diff --git a/src/assets/styles/_buttons.scss b/src/assets/styles/_buttons.scss index 22ba359..2c2b8e9 100644 --- a/src/assets/styles/_buttons.scss +++ b/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 { diff --git a/src/lib/buttons/circle-button/circle-button.component.ts b/src/lib/buttons/circle-button/circle-button.component.ts index 6ed14e1..b7707b1 100644 --- a/src/lib/buttons/circle-button/circle-button.component.ts +++ b/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; diff --git a/src/lib/common-ui.module.ts b/src/lib/common-ui.module.ts index fea1ecd..37b06d7 100644 --- a/src/lib/common-ui.module.ts +++ b/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) { diff --git a/src/lib/inputs/round-checkbox/round-checkbox.component.html b/src/lib/inputs/round-checkbox/round-checkbox.component.html new file mode 100644 index 0000000..6599e3c --- /dev/null +++ b/src/lib/inputs/round-checkbox/round-checkbox.component.html @@ -0,0 +1,11 @@ +
+ + +
diff --git a/src/lib/inputs/round-checkbox/round-checkbox.component.scss b/src/lib/inputs/round-checkbox/round-checkbox.component.scss new file mode 100644 index 0000000..99c3e9b --- /dev/null +++ b/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; + } + } +} diff --git a/src/lib/inputs/round-checkbox/round-checkbox.component.ts b/src/lib/inputs/round-checkbox/round-checkbox.component.ts new file mode 100644 index 0000000..1986040 --- /dev/null +++ b/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'); + } +}