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

apps/red-ui/src/app/modules/mat-config/mat-config.module.ts

@@ -15,8 +15,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
-import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
+import { MatChipsModule } from '@angular/material/chips';
 import { MatDialogModule } from '@angular/material/dialog';
 
 const matImports = [
@@ -38,7 +37,6 @@ const matImports = [
     MatProgressBarModule,
     MatAutocompleteModule,
     MatChipsModule,
-    MatRadioModule,
 ];
 
 @NgModule({

apps/red-ui/src/app/modules/shared/components/select/select.component.html

@@ -11,21 +11,15 @@
     </div>
 </div>
 
-<mat-chip-list [disabled]="disabled" [multiple]="multiple" [class.disabled]="disabled" class="options flex-center" selectable>
-    <mat-chip
-        #chip="matChip"
-        (click)="toggleSelection(chip)"
-        (selectionChange)="selectChange($event)"
-        *ngFor="let option of options"
-        [value]="valueMapper(option)"
-    >
+<mat-chip-listbox [disabled]="disabled" [multiple]="multiple" class="options mat-mdc-chip-set-stacked" selectable>
+    <mat-chip-option (selectionChange)="selectChange($event)" *ngFor="let option of options" [value]="valueMapper(option)">
         <ng-container
             [ngTemplateOutletContext]="{ option: option }"
             [ngTemplateOutlet]="optionTemplate || defaultOptionTemplate"
         ></ng-container>
-        <mat-icon *ngIf="chip.selected" [svgIcon]="'iqser:check'"></mat-icon>
-    </mat-chip>
-</mat-chip-list>
+        <mat-icon [svgIcon]="'iqser:check'" class="selected-mark"></mat-icon>
+    </mat-chip-option>
+</mat-chip-listbox>
 
 <ng-template #defaultOptionTemplate let-option="option">
     {{ option.label | translate }}

apps/red-ui/src/app/modules/shared/components/select/select.component.scss

@@ -1,6 +1,3 @@
-@use 'common-mixins';
-@use 'variables';
-
 :host {
     border-radius: 8px;
     border: 1px solid var(--iqser-grey-5);
@@ -8,27 +5,13 @@
     display: block;
 
     &.ng-invalid {
-        border-color: rgba(variables.$primary, 0.3);
+        border-color: rgba(var(--iqser-primary-rgb), 0.3);
     }
 }
 
 :host(.fixed-height) {
     height: var(--height);
     overflow: hidden;
-
-    ::ng-deep .mat-chip-list {
-        height: calc(var(--height) - 40px);
-
-        .mat-chip-list-wrapper {
-            height: 100%;
-            align-items: flex-start;
-            flex-direction: column;
-            overflow-x: hidden;
-            overflow-y: auto;
-            flex-wrap: nowrap;
-            @include common-mixins.scroll-bar();
-        }
-    }
 }
 
 .label-header {
@@ -49,54 +32,6 @@
     padding: 0 16px 16px 16px;
 }
 
-.mat-standard-chip {
-    cursor: pointer;
-}
-
-mat-chip {
-    width: 100%;
-    height: 32px;
-    border-radius: 4px;
-    font-size: 13px;
-    font-weight: 400;
-    display: flex;
-    justify-content: space-between;
-}
-
-::ng-deep .mat-chip-list-wrapper {
-    width: 100%;
-    margin: 0;
-}
-
-.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
-    background-color: var(--iqser-btn-bg);
-    color: var(--iqser-text);
-}
-
-.mat-chip.mat-standard-chip {
-    background-color: var(--iqser-background);
-    color: var(--iqser-text);
-    margin: 0 0 2px 0;
-    transition: background-color 0.2s;
-
-    &:hover {
-        background-color: var(--iqser-not-disabled-table-item);
-    }
-}
-
-.mat-chip.mat-standard-chip::after {
-    background: transparent;
-}
-
-.mat-standard-chip:focus::after {
-    opacity: 0;
-}
-
-.disabled {
-    pointer-events: none;
-    color: var(--iqser-grey-5);
-}
-
 mat-icon {
     width: 14px;
 }

apps/red-ui/src/app/modules/shared/components/select/select.component.ts

@@ -1,10 +1,6 @@
 import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, HostBinding, Input, TemplateRef, ViewChild } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import {
-    MatLegacyChip as MatChip,
-    MatLegacyChipList as MatChipList,
-    MatLegacyChipSelectionChange as MatChipSelectionChange,
-} from '@angular/material/legacy-chips';
+import { MatChipListbox, MatChipSelectionChange } from '@angular/material/chips';
 
 @Component({
     selector: 'redaction-select',
@@ -24,7 +20,7 @@ export class SelectComponent implements AfterViewInit, ControlValueAccessor {
     @Input() options: any[];
     @Input() disabled = false;
     @Input() multiple = true;
-    @ViewChild(MatChipList) chipList: MatChipList;
+    @ViewChild(MatChipListbox) chipList: MatChipListbox;
     private _value: any[] = [];
     private _onChange: (value: any[]) => void;
 
@@ -89,15 +85,9 @@ export class SelectComponent implements AfterViewInit, ControlValueAccessor {
         this.disabled = isDisabled;
     }
 
-    toggleSelection(chip: MatChip): void {
-        if (!this.disabled) {
-            chip.toggleSelected(true);
-        }
-    }
-
     selectAll($event) {
         $event.stopPropagation();
-        this.chipList.chips.forEach(chip => {
+        this.chipList._chips.forEach(chip => {
             if (!chip.selected) {
                 chip.toggleSelected(true);
             }
@@ -106,7 +96,7 @@ export class SelectComponent implements AfterViewInit, ControlValueAccessor {
 
     deselectAll($event?) {
         $event?.stopPropagation();
-        this.chipList.chips.forEach(chip => {
+        this.chipList._chips.forEach(chip => {
             if (chip.selected) {
                 chip.toggleSelected(true);
             }
@@ -115,7 +105,7 @@ export class SelectComponent implements AfterViewInit, ControlValueAccessor {
 
     private _selectChips(value: any[]): void {
         this.deselectAll();
-        const chipsToSelect = this.chipList.chips.filter(c => value.includes(c.value));
+        const chipsToSelect = this.chipList._chips.filter(c => value.includes(c.value));
         chipsToSelect.forEach(chip => chip.toggleSelected(true));
     }
 

apps/red-ui/src/assets/i18n/redact/en.json

@@ -1048,7 +1048,7 @@
       "redaction-preview-color-placeholder": "#000000"
     },
     "header": "Download options",
-    "unapproved-files-warning": "This download contains unapproved file(s)"
+    "unapproved-files-warning": "This download contains unapproved file(s)."
   },
   "download-includes": "Choose what is included at download:",
   "download-status": {

apps/red-ui/src/assets/i18n/scm/en.json

@@ -1048,7 +1048,7 @@
       "redaction-preview-color-placeholder": "#000000"
     },
     "header": "Download options",
-    "unapproved-files-warning": "This download contains unapproved file(s)"
+    "unapproved-files-warning": "This download contains unapproved file(s)."
   },
   "download-includes": "Choose what is included at download:",
   "download-status": {

libs/common-ui

@@ -1 +1 @@
-Subproject commit 7ca5db9ceec9c67e978c439789cea638bd933a23
+Subproject commit 03eedf10c842c6663175789268ec9f4084237571