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