RED-5875: Material upgrade - checkbox

src/assets/styles/common-checkbox.scss

@@ -1,39 +1,64 @@
-.mat-checkbox .mat-checkbox-frame {
+$checkbox-size: 16px;
-    border: 1px solid var(--iqser-grey-5);
+$ripple-size: 26px;
+
+.mat-mdc-checkbox .mdc-checkbox {
+    flex: 0 0 $checkbox-size;
+    width: $checkbox-size;
+    height: $checkbox-size;
 }
 
-.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
+.mat-mdc-checkbox,
-.mat-checkbox-checked.mat-accent .mat-checkbox-background {
+.mdc-checkbox {
-    margin-top: 1px;
+    --mdc-checkbox-state-layer-size: $checkbox-size;
-    margin-left: 1px;
+    --mdc-checkbox-unselected-icon-color: var(--iqser-grey-5);
-    width: 18px;
+    --mdc-checkbox-unselected-hover-icon-color: var(--iqser-grey-5);
-    height: 18px;
+    --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);
 
-.mat-checkbox-layout {
+    .mdc-form-field > label {
-    align-items: center !important;
+        padding-left: 8px;
-
+        line-height: 24px;
-    .mat-checkbox-inner-container {
-        margin-left: 0;
     }
 
-    .mat-checkbox-label {
+    .mdc-checkbox__ripple {
-        font-size: var(--iqser-font-size);
+        background: var(--iqser-background);
-        color: var(--iqser-text);
+        width: $ripple-size;
+        height: $ripple-size;
+        left: calc(($checkbox-size - $ripple-size) / 2);
+        top: calc(($checkbox-size - $ripple-size) / 2);
+    }
 
-        display: flex;
+    .mdc-checkbox__background {
-        align-items: center;
+        border-width: 1px;
+        width: $checkbox-size;
+        height: $checkbox-size;
+        top: 0 !important;
+        left: 0 !important;
+    }
 
-        > *:not(:last-child) {
+    .mat-mdc-checkbox-touch-target {
-            margin-right: 8px;
+        position: unset;
-        }
+        height: $ripple-size;
+        width: $ripple-size;
+        transform: translate(calc(($checkbox-size - $ripple-size) / 2), calc(($checkbox-size - $ripple-size) / 2));
     }
 }
 
-.mat-checkbox.error .mat-checkbox-label {
+.mdc-checkbox label {
-    color: var(--iqser-primary);
+    font-size: var(--iqser-font-size);
+    color: var(--iqser-text);
+
+    display: flex;
+    align-items: center;
+
+    > *:not(:last-child) {
+        margin-right: 8px;
+    }
 }
 
-.mat-checkbox-disabled {
+.mat-mdc-checkbox-disabled .mdc-checkbox {
     opacity: 0.5;
 }

src/assets/styles/common-chips.scss

@@ -15,9 +15,13 @@ mat-chip-listbox {
     }
 }
 
+.mat-mdc-standard-chip,
+.mat-mdc-standard-chip.mat-primary.mat-mdc-chip-selected {
+    --mdc-chip-label-text-color: var(--iqser-text);
+}
+
 .mdc-evolution-chip-set mat-chip-option.mat-mdc-standard-chip {
     background-color: var(--iqser-background);
-    color: var(--iqser-text);
     border-radius: 4px;
     margin: 0 0 2px 0;
     padding: 0 12px;

src/assets/styles/common-inputs.scss

@@ -9,6 +9,12 @@ iqser-dynamic-input {
     display: flex;
 }
 
+.mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
+    padding-top: 0;
+    padding-bottom: 0;
+    min-height: var(--iqser-inputs-height);
+}
+
 .iqser-input-group {
     display: flex;
     flex-direction: column;
@@ -85,7 +91,7 @@ iqser-dynamic-input {
         background: var(--iqser-background);
     }
 
-    input,
+    input:not([type='checkbox']),
     textarea {
         box-sizing: border-box;
         margin-top: 3px;
@@ -179,7 +185,7 @@ iqser-dynamic-input {
         }
     }
 
-    label:not(.mat-slide-toggle-label):not(.mat-radio-label):not(.details-radio-label) {
+    > label:not(.mat-slide-toggle-label):not(.mat-radio-label):not(.details-radio-label) {
         opacity: 0.7;
         font-size: 11px;
         letter-spacing: 0;

src/assets/styles/common-texts.scss

@@ -1,5 +1,10 @@
 @use 'common-mixins' as mixins;
 
+* {
+    -webkit-font-smoothing: subpixel-antialiased;
+    -moz-osx-font-smoothing: auto;
+}
+
 .text-muted {
     opacity: 0.7;
 }

src/lib/common-ui.module.ts

@@ -7,7 +7,7 @@ import { CommonUiOptions, IqserAppConfig, ModuleOptions } from './utils';
 import { ConnectionStatusComponent, FullPageErrorComponent } from './error';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { ApiPathInterceptor, DefaultUserPreferenceService, IqserConfigService, IqserUserPreferenceService } from './services';

src/lib/dialog/confirmation-dialog/confirmation-dialog.component.ts

@@ -6,7 +6,7 @@ import { CircleButtonComponent, IconButtonComponent, IconButtonTypes } from '../
 import { NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
 import { FormsModule } from '@angular/forms';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { ValuesOf } from '../../utils';
 
 export const TitleColors = {

src/lib/filtering/filter-card/filter-card.component.ts

@@ -10,7 +10,7 @@ import { Filter } from '../models/filter';
 import { map } from 'rxjs/operators';
 import { shareDistinctLast, shareLast } from '../../utils';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { MAT_LEGACY_CHECKBOX_DEFAULT_OPTIONS as MAT_CHECKBOX_DEFAULT_OPTIONS } from '@angular/material/legacy-checkbox';
+import { MAT_CHECKBOX_DEFAULT_OPTIONS } from '@angular/material/checkbox';
 
 const areExpandable = (nestedFilter: INestedFilter) => !!nestedFilter?.children?.length;
 const atLeastOneIsExpandable = pipe(

src/lib/filtering/filters.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatMenuModule } from '@angular/material/menu';
 import { TranslateModule } from '@ngx-translate/core';
 import { ChevronButtonComponent, IconButtonComponent } from '../buttons';