fix: support disabling options in multi-select (#979)

* fix: multi select - support disabled options

Author: arjunlalb

projects/components/src/multi-select/multi-select.component.scss

@@ -92,7 +92,7 @@
   flex-direction: column;
 
   .divider {
-    padding: 0px 16px 4px 16px;
+    padding: 0 16px 4px 16px;
   }
 
   .multi-select-options {
@@ -107,8 +107,13 @@
     font-size: 15px;
     align-items: center;
 
+    &.disabled {
+      color: $gray-5;
+      cursor: not-allowed;
+    }
+
     .checkbox {
-      margin: 0px;
+      margin: 0;
       color: $gray-3;
 
       ::ng-deep .mat-ripple {

projects/components/src/multi-select/multi-select.component.test.ts

@@ -1,3 +1,5 @@
+// tslint:disable: max-file-line-count
+
 import { CommonModule } from '@angular/common';
 import { fakeAsync, flush } from '@angular/core/testing';
 import { IconLibraryTestingModule, IconType } from '@hypertrace/assets-library';
@@ -476,4 +478,44 @@ describe('Multi Select Component', () => {
     expect(spectator.query('.select-all', { root: true })).toExist();
     flush();
   }));
+
+  test('should disable select options as expected', fakeAsync(() => {
+    const onChange = jest.fn();
+
+    spectator = hostFactory(
+      `
+    <ht-multi-select (selectedChange)="onChange($event)">
+      <ht-select-option *ngFor="let option of options" [label]="option.label" [value]="option.value" [disabled]="option.disabled"></ht-select-option>
+    </ht-multi-select>`,
+      {
+        hostProps: {
+          options: [
+            { label: 'first', value: 'first-value' },
+            { label: 'second', value: 'second-value', disabled: true },
+            {
+              label: 'third',
+              value: 'third-value',
+              selectedLabel: 'Third Value!!!',
+              icon: 'test-icon',
+              iconColor: 'red'
+            }
+          ],
+          onChange: onChange
+        }
+      }
+    );
+
+    spectator.tick();
+    spectator.click('.trigger-content');
+
+    const optionElements = spectator.queryAll('.multi-select-option', { root: true });
+    expect(optionElements.length).toBe(3);
+    expect(optionElements[0]).not.toHaveClass('disabled');
+    expect(optionElements[1]).toHaveClass('disabled');
+    expect(optionElements[2]).not.toHaveClass('disabled');
+    spectator.click(optionElements[1]);
+
+    expect(onChange).not.toHaveBeenCalled();
+    flush();
+  }));
 });

projects/components/src/multi-select/multi-select.component.ts

@@ -94,11 +94,13 @@ import { MultiSelectJustify } from './multi-select-justify';
                 *ngFor="let item of filteredOptions"
                 (click)="this.onSelectionChange(item)"
                 class="multi-select-option"
+                [ngClass]="{ disabled: item.disabled }"
               >
                 <ht-checkbox
                   class="checkbox"
                   (click)="this.preventClickDefault($event)"
                   [checked]="this.isSelectedItem(item)"
+                  [disabled]="item.disabled"
                 ></ht-checkbox>
                 <ht-icon
                   class="icon"
@@ -207,6 +209,10 @@ export class MultiSelectComponent<V> implements AfterContentInit, OnChanges {
   }
 
   public onSelectionChange(item: SelectOptionComponent<V>): void {
+    if (item.disabled) {
+      return;
+    }
+
     const selected = this.isSelectedItem(item)
       ? this.selected?.filter(value => value !== item.value)
       : (this.selected ?? []).concat(item.value);