RED-5875: Upgrade to new Angular Material components (select)

src/assets/styles/common-autocomplete.scss

@@ -1,11 +1,12 @@
 @use 'common-mixins';
 
-.mat-autocomplete-panel {
+.mat-mdc-autocomplete-panel {
     @include common-mixins.scroll-bar;
+    background-color: var(--iqser-background);
 
     border-radius: 8px;
 
-    .mat-option {
+    .mat-mdc-option {
         font-size: inherit;
     }
 }

src/assets/styles/common-inputs.scss

@@ -53,23 +53,8 @@ iqser-dynamic-input {
         }
     }
 
-    .mat-form-field-underline {
+    .mdc-floating-label {
-        display: none;
+        transform: none;
-    }
-
-    .mat-form-field-wrapper,
-    .mat-form-field-infix {
-        padding-bottom: 0;
-    }
-
-    .mat-form-field-label {
-        opacity: 0.7 !important;
-        color: var(--iqser-text) !important;
-        transform: translateY(-1.34em) !important;
-    }
-
-    .mat-form-field-required-marker {
-        display: none;
     }
 
     &:first-child {
@@ -96,12 +81,46 @@ iqser-dynamic-input {
         color: var(--iqser-white);
     }
 
+    .mat-mdc-text-field-wrapper {
+        padding: 0;
+    }
+
     input,
-    textarea,
+    textarea {
-    mat-select {
         box-sizing: border-box;
+        margin-top: 3px;
+        min-height: var(--iqser-inputs-height);
+        line-height: 32px;
         padding-left: 11px;
         padding-right: 11px;
+    }
+
+    .mat-mdc-form-field {
+        margin-top: 3px;
+
+        input {
+            margin-top: 0;
+        }
+    }
+
+    .mat-mdc-form-field-subscript-wrapper {
+        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--focused .mdc-notched-outline__leading,
+    .mdc-text-field--focused .mdc-notched-outline__notch,
+    .mdc-text-field--focused .mdc-notched-outline__trailing {
+        border-width: 1px;
+    }
+
+    input,
+    textarea {
         border: 1px solid var(--iqser-inputs-outline);
         font-family: var(--iqser-font-family);
         font-size: var(--iqser-font-size);
@@ -109,14 +128,12 @@ iqser-dynamic-input {
         color: var(--iqser-text);
         border-radius: 8px;
         outline: none;
-        margin-top: 3px;
-        min-height: 36px;
 
         &.with-icon {
             padding-right: 34px;
         }
 
-        &:focus:not(:disabled):not(.mat-select-disabled) {
+        &:focus:not(:disabled) {
             border-color: var(--iqser-text);
         }
 
@@ -132,13 +149,14 @@ iqser-dynamic-input {
                 border-color: var(--iqser-primary);
             }
         }
+    }
 
-        &:disabled,
+    input:disabled,
-        &.mat-select-disabled {
+    textarea:disabled,
+    .mdc-text-field--disabled {
         background-color: var(--iqser-alt-background);
         color: rgba(var(--iqser-text-rgb), 0.3);
     }
-    }
 
     textarea {
         line-height: 18px;
@@ -149,26 +167,6 @@ iqser-dynamic-input {
         max-width: 150px;
     }
 
-    mat-select,
-    .mat-select.mat-select-disabled {
-        .mat-select-trigger {
-            height: 32px;
-        }
-
-        .mat-select-placeholder {
-            color: rgba(var(--iqser-text-rgb), 0.4);
-        }
-
-        .mat-select-value {
-            vertical-align: middle;
-            color: var(--iqser-text);
-        }
-
-        .mat-select-arrow {
-            color: rgba(var(--iqser-text-rgb), 0.7);
-        }
-    }
-
     textarea {
         resize: vertical;
         padding-top: 7px;

src/assets/styles/common-select.scss

@@ -1,42 +1,39 @@
 @use 'common-mixins';
 
-.mat-select-panel {
+.mat-mdc-select {
+    padding: 0 11px;
+    box-sizing: border-box;
+    line-height: var(--iqser-inputs-height);
+}
+
+.mat-mdc-select-panel {
     padding: 7px 0 !important;
+    min-width: fit-content;
     background-color: var(--iqser-background);
     @include common-mixins.scroll-bar;
+    @include common-mixins.drop-shadow;
+}
 
-    .mat-option {
+.mat-mdc-select-arrow-wrapper {
+    margin-left: 10px;
+}
+
+.mat-mdc-option {
     margin: 1px 8px;
     border-radius: 4px;
     color: var(--iqser-text);
 
-        &:hover:not(.mat-option-disabled),
+    &:hover:not(.mdc-list-item--disabled, .mdc-list-item--selected),
-        &:focus:not(.mat-option-disabled) {
+    &:focus:not(.mdc-list-item--disabled, .mdc-list-item--selected) {
         background-color: var(--iqser-btn-bg);
     }
 
-        &.mat-selected:not(.mat-option-multiple) {
+    &.mdc-list-item--selected {
         background-color: rgba(var(--iqser-primary-rgb), 0.2);
+        color: var(--iqser-primary);
     }
 
-        &.mat-option-disabled {
+    &.mdc-list-item--disabled {
         color: rgba(var(--iqser-text-rgb), 0.7);
     }
-    }
-}
-
-.mat-form-field.no-label .mat-form-field-infix {
-    padding: 0 !important;
-    border-top: 0 !important;
-}
-
-mat-select {
-    .mat-select-value,
-    .mat-select-arrow {
-        color: var(--iqser-text);
-    }
-
-    .mat-select-arrow {
-        margin-left: 6px;
-    }
 }

src/lib/inputs/inputs.module.ts

@@ -11,6 +11,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { DynamicInputComponent } from './dynamic-input/dynamic-input.component';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatInputModule } from '@angular/material/input';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 
 const modules = [
     IqserIconsModule,
@@ -27,5 +28,6 @@ const components = [RoundCheckboxComponent, EditableInputComponent, InputWithAct
     declarations: [...components],
     exports: [...components],
     imports: [CommonModule, ...modules],
+    providers: [{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } }],
 })
 export class IqserInputsModule {}