fix(mulit-select): add readonly (#1040)

allianz · Sep 20, 2023 · 86013b1 · 86013b1
1 parent 0f899e3
commit 86013b1
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 4 deletions.
diff --git a/.../documentation/examples/dropdown/dropdown-multi-select/dropdown-multi-select-example.html b/.../documentation/examples/dropdown/dropdown-multi-select/dropdown-multi-select-example.html
@@ -5,11 +5,21 @@
                 <nx-multi-select [options]="options"></nx-multi-select>
             </nx-formfield>
         </div>
+        <div nxCol="12, 12, 6">
+            <nx-formfield label="Fruits">
+                <nx-multi-select
+                    [options]="complexOptions"
+                    selectLabel="name"
+                    selectValue="id"
+                ></nx-multi-select>
+            </nx-formfield>
+        </div>
     </div>
     <div nxRow>
         <div nxCol="12, 12, 6">
             <nx-formfield label="Fruits">
                 <nx-multi-select
+                    placeholder="Choose options"
                     [options]="complexOptions"
                     selectLabel="name"
                     selectValue="id"
@@ -18,12 +28,13 @@
         </div>
 
         <div nxCol="12, 12, 6">
-            <nx-formfield label="Fruits">
+            <nx-formfield label="Readonly">
                 <nx-multi-select
                     placeholder="Choose options"
                     [options]="complexOptions"
                     [selectLabel]="selectLabel"
                     [selectValue]="selectValue"
+                    readonly
                 ></nx-multi-select>
             </nx-formfield>
         </div>

diff --git a/projects/ng-aquila/documentation/examples/dropdown/multi-select/multi-select-example.html b/projects/ng-aquila/documentation/examples/dropdown/multi-select/multi-select-example.html
@@ -47,3 +47,15 @@ <h3>Reactive forms validation</h3>
     Selected options:
     <pre>[{{ control.value?.join(', ') }}]</pre>
 </div>
+
+<h3>Readonly</h3>
+<nx-formfield appearance="outline" floatLabel="always" label="Multi select">
+    <nx-multi-select
+        filter
+        placeholder="Choose options"
+        [options]="options"
+        selectValue="i'"
+        selectLabel="label"
+        readonly
+    ></nx-multi-select>
+</nx-formfield>
diff --git a/projects/ng-aquila/src/dropdown/multi-select/multi-select.component.scss b/projects/ng-aquila/src/dropdown/multi-select/multi-select.component.scss
@@ -58,6 +58,18 @@
     }
 }
 
+:host(.is-readonly) {
+    .indicator {
+        color: v(formfield-disabled-text-color);
+        @media screen and (forced-colors: active) {
+            color: GrayText !important;
+        }
+    }
+    .value {
+        cursor: not-allowed;
+    }
+}
+
 .value-text {
     overflow: hidden;
     white-space: nowrap;

diff --git a/projects/ng-aquila/src/dropdown/multi-select/multi-select.component.ts b/projects/ng-aquila/src/dropdown/multi-select/multi-select.component.ts
@@ -50,6 +50,10 @@ const _defaultFilterFn: NxMultiSelectFilterFn = (query, label) => label.toLowerC
     styleUrls: ['./multi-select.component.scss'],
     providers: [{ provide: NxFormfieldControl, useExisting: NxMultiSelectComponent }],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        '[class.is-readonly]': 'readonly',
+        '[attr.readonly]': 'readonly || null',
+    },
 })
 export class NxMultiSelectComponent<S, T> implements ControlValueAccessor, NxFormfieldControl<T[]>, DoCheck, OnDestroy, AfterViewInit {
     get value(): T[] {
@@ -411,7 +415,7 @@ export class NxMultiSelectComponent<S, T> implements ControlValueAccessor, NxFor
     }
 
     _open($event: Event, origin: FocusOrigin) {
-        if (this._isOpen || this.disabled) {
+        if (this._isOpen || this.disabled || this.readonly) {
             return;
         }
 
@@ -443,7 +447,7 @@ export class NxMultiSelectComponent<S, T> implements ControlValueAccessor, NxFor
     }
 
     _onKeydown($event: KeyboardEvent) {
-        if (this.disabled) {
+        if (this.disabled || this.readonly) {
             return;
         }
 
@@ -484,7 +488,7 @@ export class NxMultiSelectComponent<S, T> implements ControlValueAccessor, NxFor
         if (this.ngControl?.control?.updateOn !== 'blur') {
             this._onTouched();
         }
-        if (!this._isOpen && !this.disabled) {
+        if (!this._isOpen && !this.disabled && !this.readonly) {
             this._onTouched();
             this.focusOut.emit(true);
         }