From 562b184f323365694a900c9c6b6babfeef3f9d91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Tue, 28 Feb 2023 23:33:16 +0200 Subject: [PATCH] RED-5875: Upgrade to new Angular Material components (chips) --- .../modules/mat-config/mat-config.module.ts | 4 +- .../components/select/select.component.html | 16 ++--- .../components/select/select.component.scss | 67 +------------------ .../components/select/select.component.ts | 20 ++---- apps/red-ui/src/assets/i18n/redact/en.json | 2 +- apps/red-ui/src/assets/i18n/scm/en.json | 2 +- libs/common-ui | 2 +- 7 files changed, 15 insertions(+), 98 deletions(-) diff --git a/apps/red-ui/src/app/modules/mat-config/mat-config.module.ts b/apps/red-ui/src/app/modules/mat-config/mat-config.module.ts index 401ac7742..d1031ac1a 100644 --- a/apps/red-ui/src/app/modules/mat-config/mat-config.module.ts +++ b/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({ diff --git a/apps/red-ui/src/app/modules/shared/components/select/select.component.html b/apps/red-ui/src/app/modules/shared/components/select/select.component.html index 03dfd21b7..fc01a781b 100644 --- a/apps/red-ui/src/app/modules/shared/components/select/select.component.html +++ b/apps/red-ui/src/app/modules/shared/components/select/select.component.html @@ -11,21 +11,15 @@ - - + + - - - + + + {{ option.label | translate }} diff --git a/apps/red-ui/src/app/modules/shared/components/select/select.component.scss b/apps/red-ui/src/app/modules/shared/components/select/select.component.scss index 5860f0d48..c63444db5 100644 --- a/apps/red-ui/src/app/modules/shared/components/select/select.component.scss +++ b/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; } diff --git a/apps/red-ui/src/app/modules/shared/components/select/select.component.ts b/apps/red-ui/src/app/modules/shared/components/select/select.component.ts index a6c36b003..89a498516 100644 --- a/apps/red-ui/src/app/modules/shared/components/select/select.component.ts +++ b/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)); } diff --git a/apps/red-ui/src/assets/i18n/redact/en.json b/apps/red-ui/src/assets/i18n/redact/en.json index 2c29a6d3c..8e39b3bd2 100644 --- a/apps/red-ui/src/assets/i18n/redact/en.json +++ b/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": { diff --git a/apps/red-ui/src/assets/i18n/scm/en.json b/apps/red-ui/src/assets/i18n/scm/en.json index 819404810..4ce547ea5 100644 --- a/apps/red-ui/src/assets/i18n/scm/en.json +++ b/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": { diff --git a/libs/common-ui b/libs/common-ui index 7ca5db9ce..03eedf10c 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit 7ca5db9ceec9c67e978c439789cea638bd933a23 +Subproject commit 03eedf10c842c6663175789268ec9f4084237571