RED-5875: Material upgrade - fixes

src/assets/styles/common-breadcrumbs.scss

@@ -13,13 +13,13 @@
         min-width: 16px;
     }
 
-    .dropdown-breadcrumb {
+    .dropdown-breadcrumb .mdc-button {
         font-weight: 600;
-        color: var(--iqser-primary);
+        --mdc-text-button-label-text-color: var(--iqser-primary);
+    }
 
-        &[aria-expanded='true'] .mat-button-wrapper > span {
-            color: var(--iqser-text);
-        }
+    .dropdown-breadcrumb[aria-expanded='true'] .mdc-button {
+        --mdc-text-button-label-text-color: var(--iqser-text);
     }
 }
 

src/assets/styles/common-buttons.scss

@@ -64,11 +64,11 @@ iqser-icon-button {
     .mdc-button.mat-mdc-button {
         @include iconSize14;
 
-        --mdc-text-button-label-text-color: var(--iqser-accent);
+        --mdc-text-button-label-text-color: var(--iqser-text);
         padding: 0 14px;
 
         &[disabled] {
-            --mdc-text-button-disabled-label-text-color: rgba(var(--iqser-accent-rgb), 0.3);
+            --mdc-text-button-disabled-label-text-color: rgba(var(--iqser-text-rgb), 0.3);
         }
 
         .mat-icon {
@@ -161,7 +161,7 @@ iqser-chevron-button {
         @include iconSize14;
 
         &:not([disabled]) {
-            --mdc-text-button-label-text-color: var(--iqser-accent);
+            --mdc-text-button-label-text-color: var(--iqser-text);
         }
     }
 }
@@ -173,7 +173,9 @@ iqser-user-button {
 
     display: block;
 
-    .mat-mdc-button {
+    .mdc-button.mat-mdc-button {
+        --mdc-text-button-label-text-color: var(--iqser-text);
+
         @include iconSize14;
         padding: 0 10px 0 5px;
     }

src/assets/styles/common-checkbox.scss

@@ -14,7 +14,6 @@ $ripple-size: 26px;
     --mdc-checkbox-unselected-hover-icon-color: var(--iqser-grey-5);
     --mdc-checkbox-unselected-pressed-icon-color: var(--iqser-grey-5);
     --mdc-checkbox-unselected-focus-icon-color: var(--iqser-grey-5);
-    --mdc-theme-text-primary-on-background: var(--iqser-text);
     --mdc-checkbox-disabled-selected-icon-color: var(--iqser-primary);
     --mdc-checkbox-disabled-unselected-icon-color: var(--iqser-grey-5);
 

src/assets/styles/common-dialogs.scss

@@ -1,10 +1,10 @@
 @use 'common-mixins';
 
 .mat-mdc-dialog-container .mdc-dialog__surface {
+    --mdc-dialog-container-color: var(--iqser-background);
     display: flex !important;
     flex-direction: row;
     color: var(--iqser-text);
-    background-color: var(--iqser-background);
     padding: 0 !important;
     border-radius: 8px !important;
     @include common-mixins.scroll-bar;

src/assets/styles/common-inputs.scss

@@ -113,10 +113,19 @@ iqser-dynamic-input {
         display: none;
     }
 
-    .mdc-notched-outline__leading,
-    .mdc-notched-outline__trailing {
-        --mdc-shape-small: 8px; // border-radius
-        border-color: var(--iqser-inputs-outline);
+    .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) {
+        .mdc-notched-outline__leading,
+        .mdc-notched-outline__trailing {
+            --mdc-shape-small: 8px; // border-radius
+            border-color: var(--iqser-inputs-outline);
+        }
+
+        &:hover {
+            .mdc-notched-outline__leading,
+            .mdc-notched-outline__trailing {
+                border-color: var(--iqser-inputs-outline);
+            }
+        }
     }
 
     .mdc-text-field--focused .mdc-notched-outline__leading,

src/assets/styles/common-menu.scss

@@ -5,7 +5,6 @@
     max-width: none !important;
     min-width: 180px !important;
     margin-top: var(--iqser-menu-margin-top);
-    background-color: var(--iqser-popup-background);
     min-height: unset !important;
     @include common-mixins.scroll-bar;
     @include common-mixins.drop-shadow;
@@ -36,6 +35,7 @@
 
         mat-icon {
             color: var(--iqser-text);
+            width: 14px;
         }
 
         .dot {
@@ -77,13 +77,17 @@
         }
 
         &.active {
-            font-weight: 600;
+            > span {
+                font-weight: 600;
+            }
+
             padding-right: 8px;
             justify-content: space-between;
 
             .checkmark {
                 display: flex;
                 margin-left: 16px;
+                order: 1;
             }
         }
     }

src/assets/styles/common-select.scss

@@ -37,3 +37,7 @@
         color: rgba(var(--iqser-text-rgb), 0.7);
     }
 }
+
+.mat-mdc-select-value {
+    color: var(--iqser-text);
+}

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

@@ -5,7 +5,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 
 @Component({
-    selector: 'iqser-chevron-button [label]',
+    selector: 'iqser-chevron-button',
     templateUrl: './chevron-button.component.html',
     styleUrls: ['./chevron-button.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -13,7 +13,7 @@ import { MatIconModule } from '@angular/material/icon';
     imports: [NgIf, MatIconModule, MatButtonModule],
 })
 export class ChevronButtonComponent {
-    @Input() label!: string;
+    @Input({ required: true }) label!: string;
     @Input() showDot = false;
     @Input() primary = false;
     @Input() disabled = false;