RED-5875: Material upgrade - buttons: circle button

src/assets/styles/common-buttons.scss

@@ -31,6 +31,81 @@ iqser-icon-button .mdc-button.mat-mdc-button {
     }
 }
 
+iqser-circle-button .mat-mdc-icon-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .mat-mdc-button-touch-target {
+        width: var(--circle-button-size);
+        height: var(--circle-button-size);
+    }
+
+    &.mat-mdc-button-base {
+        height: var(--circle-button-size);
+        width: var(--circle-button-size);
+        padding: 0;
+    }
+
+    svg {
+        vertical-align: bottom;
+        width: inherit;
+        height: inherit;
+    }
+
+    &.overlay {
+        background: rgba(var(--iqser-primary-rgb), 0.1);
+    }
+
+    &.primary {
+        --mdc-icon-button-icon-color: var(--iqser-white);
+
+        &[disabled] {
+            --mdc-icon-button-disabled-icon-color: rgba(255, 255, 255, 0.5);
+        }
+
+        background: var(--iqser-primary);
+    }
+
+    &.warn:not([disabled]) {
+        --mdc-icon-button-icon-color: var(--iqser-accent);
+        background-color: var(--iqser-warn);
+    }
+
+    mat-icon {
+        width: var(--circle-button-icon-size);
+        height: var(--circle-button-icon-size);
+        line-height: var(--circle-button-icon-size);
+
+        svg {
+            line-height: var(--circle-button-icon-size);
+        }
+    }
+}
+
+iqser-chevron-button,
+iqser-circle-button,
+iqser-icon-button {
+    .dot {
+        top: 1px;
+        left: 1px;
+    }
+
+    &[aria-expanded='true'] {
+        .mat-mdc-button-base {
+            background: rgba(var(--iqser-primary-rgb), 0.1);
+
+            &.primary {
+                background: var(--iqser-primary-2);
+            }
+
+            &.grey-selected {
+                background-color: var(--iqser-btn-bg);
+            }
+        }
+    }
+}
+
 //.mat-button,
 //.mat-flat-button {
 //    border-radius: var(--iqser-button-radius) !important;
@@ -143,20 +218,3 @@ iqser-icon-button .mdc-button.mat-mdc-button {
 //    }
 //}
 //
-//iqser-chevron-button,
-//iqser-circle-button,
-//iqser-icon-button {
-//    &[aria-expanded='true'] {
-//        button {
-//            background: rgba(var(--iqser-primary-rgb), 0.1);
-//
-//            &.primary {
-//                background: var(--iqser-primary-2);
-//            }
-//
-//            &.grey-selected {
-//                background-color: var(--iqser-btn-bg);
-//            }
-//        }
-//    }
-//}

src/assets/styles/common-select.scss

@@ -29,7 +29,7 @@
     }
 
     &.mdc-list-item--selected {
-        background-color: rgba(var(--iqser-primary-rgb), 0.2);
+        background-color: rgba(var(--iqser-primary-rgb), 0.2) !important;
         color: var(--iqser-primary);
     }
 

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

@@ -1,4 +1,4 @@
-<div [matTooltipClass]="tooltipClass" [matTooltipPosition]="tooltipPosition" [matTooltip]="tooltip">
+<div [matTooltipClass]="tooltipClass || ''" [matTooltipPosition]="tooltipPosition" [matTooltip]="tooltip || ''">
     <button
         (click)="performAction($event)"
         [class.dark-bg]="type === _circleButtonTypes.dark"

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

@@ -1,47 +1,9 @@
 :host {
-    height: var(--size);
+    display: block;
-    width: var(--size);
-    align-items: center;
 
-    button {
+    > div {
-        height: var(--size);
+        width: var(--circle-button-size);
-        width: var(--size);
+        height: var(--circle-button-size);
-        line-height: var(--size);
+        position: relative;
-
-        mat-icon {
-            width: var(--iconSize);
-            height: var(--iconSize);
-            line-height: var(--iconSize);
-            margin: 0;
-
-            svg {
-                line-height: var(--iconSize);
-            }
-        }
-
-        &.mat-button-disabled {
-            cursor: not-allowed;
-
-            &:not(.primary):not(.warn):not(.dark-bg):hover {
-                background-color: var(--iqser-btn-bg);
-            }
-        }
-
-        &.primary.mat-button-disabled {
-            color: #ffffff80;
-        }
-
-        &.warn:not([disabled]) {
-            background-color: var(--iqser-warn);
-            color: var(--iqser-accent);
-
-            &:hover {
-                background-color: var(--iqser-warn);
-            }
-        }
-    }
-
-    &.primary mat-icon {
-        color: var(--iqser-primary);
     }
 }

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

@@ -38,8 +38,8 @@ export class CircleButtonComponent implements OnInit {
     readonly #elementRef = inject(ElementRef<HTMLElement>);
 
     ngOnInit(): void {
-        this.#elementRef.nativeElement.style.setProperty('--size', `${this.size}px`);
+        this.#elementRef.nativeElement.style.setProperty('--circle-button-size', `${this.size}px`);
-        this.#elementRef.nativeElement.style.setProperty('--iconSize', `${this.iconSize}px`);
+        this.#elementRef.nativeElement.style.setProperty('--circle-button-icon-size', `${this.iconSize}px`);
     }
 
     performAction($event: MouseEvent) {

src/lib/help-mode/help-mode/help-mode.component.html

@@ -11,7 +11,7 @@
                 (click)="helpModeService.deactivateHelpMode()"
                 [iconSize]="10"
                 [size]="20"
-                [type]="'help'"
+                [type]="circleButtonTypes.help"
                 class="ml-8"
                 icon="iqser:close"
             ></iqser-circle-button>

src/lib/help-mode/help-mode/help-mode.component.ts

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, HostListener } from '@angular/core'
 import { HelpModeService } from '../help-mode.service';
 import { IqserEventTarget } from '../../utils';
 import { MatDialog } from '@angular/material/dialog';
+import { CircleButtonTypes } from '../../buttons';
 
 @Component({
     selector: 'iqser-help-mode',
@@ -10,6 +11,8 @@ import { MatDialog } from '@angular/material/dialog';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HelpModeComponent {
+    readonly circleButtonTypes = CircleButtonTypes;
+
     constructor(private readonly _dialog: MatDialog, readonly helpModeService: HelpModeService) {}
 
     @HostListener('document:keydown.escape', ['$event'])