add round checkbox component

src/assets/styles/_buttons.scss

@@ -4,6 +4,7 @@
 $btn-bg-hover: #e2e4e9 !default;
 $btn-bg: #f0f1f4 !default;
 $warn: #fdbd00 !default;
+$white: white;
 
 .mat-button,
 .mat-flat-button {

src/lib/buttons/circle-button/circle-button.component.ts

@@ -14,7 +14,7 @@ export class CircleButtonComponent implements OnInit {
     readonly circleButtonTypes = CircleButtonTypes;
 
     @Input() @Required() icon!: string;
-    @Input() @Required() tooltip!: string;
+    @Input() tooltip?: string;
     @Input() tooltipClass?: string;
     @Input() showDot = false;
     @Input() tooltipPosition: TooltipPositionsType = TooltipPositionsTypes.above;

src/lib/common-ui.module.ts

@@ -7,15 +7,20 @@ import { ChevronButtonComponent } from './buttons/chevron-button/chevron-button.
 import { DomSanitizer } from '@angular/platform-browser';
 import { CircleButtonComponent } from './buttons/circle-button/circle-button.component';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { RoundCheckboxComponent } from './inputs/round-checkbox/round-checkbox.component';
 
 const buttons = [IconButtonComponent, ChevronButtonComponent, CircleButtonComponent];
 
+const inputs = [RoundCheckboxComponent];
+
 const matModules = [MatIconModule, MatButtonModule, MatTooltipModule];
 
+const components = [...buttons, ...inputs];
+
 @NgModule({
-    declarations: [...buttons],
+    declarations: [...components],
     imports: [CommonModule, ...matModules],
-    exports: [...buttons, ...matModules]
+    exports: [...components, ...matModules]
 })
 export class CommonUiModule {
     constructor(private readonly _iconRegistry: MatIconRegistry, private readonly _sanitizer: DomSanitizer) {

src/lib/inputs/round-checkbox/round-checkbox.component.html

@@ -0,0 +1,11 @@
+<div
+    #wrapper
+    [class.active]="active && !indeterminate"
+    [class.inactive]="!active && !indeterminate"
+    [class.indeterminate]="indeterminate"
+    [class.with-bg]="type === 'with-bg'"
+    class="wrapper"
+>
+    <mat-icon *ngIf="active && !indeterminate" svgIcon="red:radio-selected"></mat-icon>
+    <mat-icon *ngIf="indeterminate" svgIcon="red:radio-indeterminate"></mat-icon>
+</div>

src/lib/inputs/round-checkbox/round-checkbox.component.scss

@@ -0,0 +1,34 @@
+@import '../../../assets/styles/common';
+
+:host {
+    cursor: pointer;
+}
+
+.wrapper {
+    width: var(--size);
+    height: var(--size);
+    box-sizing: border-box;
+    border-radius: 50%;
+
+    &.inactive {
+        border: 1px solid #d3d5da;
+        background-color: $white;
+    }
+
+    .mat-icon {
+        color: $primary;
+        width: var(--size);
+        height: var(--size);
+    }
+
+    &.with-bg {
+        .mat-icon {
+            color: $white;
+        }
+
+        &.inactive {
+            border: 1px solid $btn-bg;
+            background-color: transparent;
+        }
+    }
+}

src/lib/inputs/round-checkbox/round-checkbox.component.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+
+@Component({
+    selector: 'iqser-round-checkbox',
+    templateUrl: './round-checkbox.component.html',
+    styleUrls: ['./round-checkbox.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class RoundCheckboxComponent implements OnInit {
+    @Input() size = 20;
+    @Input() active = false;
+    @Input() indeterminate = false;
+    @Input() type: 'default' | 'with-bg' = 'default';
+
+    @ViewChild('wrapper', { static: true }) private readonly _wrapper!: ElementRef;
+
+    ngOnInit(): void {
+        this._wrapper.nativeElement.style.setProperty('--size', this.size + 'px');
+    }
+}