feat: add minor multiselect improvements (#1412)

* feat: add minor multiselect improvements

* test: fix tests

Author: aaron-steinfeld

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

@@ -30,6 +30,10 @@
     height: 34px;
     border-radius: 6px;
 
+    &.disabled {
+      cursor: not-allowed;
+    }
+
     &.extra-small {
       height: 30px;
     }

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

@@ -80,7 +80,8 @@ describe('Multi Select Component', () => {
       expectObservable(spectator.component.triggerValues$).toBe('x', {
         x: {
           label: selectionOptions[1].label,
-          selectedItemsCount: 1 // Selected element is 1 as set in hostProps
+          overflowItemsCount: 0,
+          overflowLabel: undefined
         }
       });
     });
@@ -116,7 +117,8 @@ describe('Multi Select Component', () => {
       expectObservable(spectator.component.triggerValues$).toBe('x', {
         x: {
           label: selectionOptions[1].label,
-          selectedItemsCount: 2
+          overflowItemsCount: 1,
+          overflowLabel: 'third'
         }
       });
     });
@@ -159,7 +161,8 @@ describe('Multi Select Component', () => {
       expectObservable(spectator.component.triggerValues$).toBe('x', {
         x: {
           label: 'second',
-          selectedItemsCount: 2
+          overflowItemsCount: 1,
+          overflowLabel: 'third'
         }
       });
     });
@@ -232,7 +235,8 @@ describe('Multi Select Component', () => {
       expectObservable(spectator.component.triggerValues$).toBe('x', {
         x: {
           label: 'second',
-          selectedItemsCount: 2
+          overflowItemsCount: 1,
+          overflowLabel: 'third'
         }
       });
     });
@@ -368,7 +372,7 @@ describe('Multi Select Component', () => {
       expectObservable(spectator.component.triggerValues$).toBe('(x|)', {
         x: {
           label: 'Placeholder',
-          selectedItemsCount: 0
+          overflowItemsCount: 0
         }
       });
     });
@@ -398,7 +402,7 @@ describe('Multi Select Component', () => {
       expectObservable(spectator.component.triggerValues$).toBe('x', {
         x: {
           label: selectionOptions[1].label,
-          selectedItemsCount: 1
+          overflowItemsCount: 0
         }
       });
     });

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

@@ -53,15 +53,23 @@ import { MultiSelectJustify } from './multi-select-justify';
           <div
             class="trigger-content"
             [style.justify-content]="this.justify"
-            [ngClass]="[this.triggerLabelDisplayMode, this.popoverOpen ? 'open' : '', this.size]"
+            [ngClass]="[
+              this.triggerLabelDisplayMode,
+              this.popoverOpen ? 'open' : '',
+              this.size,
+              this.disabled ? 'disabled' : ''
+            ]"
             #triggerContainer
           >
             <ht-icon *ngIf="this.icon" [icon]="this.icon" [size]="this.iconSize"></ht-icon>
             <ng-container *ngIf="!this.isIconOnlyMode()">
               <div class="trigger-label-container" *ngIf="this.triggerValues$ | async as triggerValues">
                 <ht-label class="trigger-label" [label]="triggerValues.label"></ht-label>
-                <span *ngIf="triggerValues.selectedItemsCount > 1" class="trigger-more-items"
-                  >+{{ triggerValues.selectedItemsCount - 1 }}</span
+                <span
+                  *ngIf="triggerValues.overflowItemsCount"
+                  class="trigger-more-items"
+                  [htTooltip]="triggerValues.overflowLabel"
+                  >+{{ triggerValues.overflowItemsCount }}</span
                 >
                 <ht-icon class="trigger-icon" icon="${IconType.ChevronDown}" [size]="this.iconSize"></ht-icon>
               </div>
@@ -262,6 +270,10 @@ export class MultiSelectComponent<V> implements ControlValueAccessor, AfterConte
     this.propagateControlValueChangeOnTouch = onTouch;
   }
 
+  public setDisabledState(isDisabled?: boolean): void {
+    this.disabled = isDisabled ?? false;
+  }
+
   private setSelection(selected: V[]): void {
     this.selected = selected;
     this.setTriggerLabel();
@@ -273,7 +285,7 @@ export class MultiSelectComponent<V> implements ControlValueAccessor, AfterConte
     if (this.triggerLabelDisplayMode === TriggerLabelDisplayMode.Placeholder) {
       this.triggerValues$ = of({
         label: this.placeholder,
-        selectedItemsCount: 0
+        overflowItemsCount: 0
       });
 
       return;
@@ -282,10 +294,17 @@ export class MultiSelectComponent<V> implements ControlValueAccessor, AfterConte
     this.triggerValues$ = this.allOptions$?.pipe(
       map(options => {
         const selectedItems: SelectOptionComponent<V>[] = options.filter(item => this.isSelectedItem(item));
+        const isMultiSelection = selectedItems.length > 1;
 
         return {
           label: this.getLabel(selectedItems),
-          selectedItemsCount: selectedItems.length
+          overflowItemsCount: isMultiSelection ? selectedItems.length - 1 : 0,
+          overflowLabel: isMultiSelection
+            ? selectedItems
+                .slice(1)
+                .map(item => item.label)
+                .join(', ')
+            : undefined
         };
       })
     );
@@ -307,7 +326,8 @@ export class MultiSelectComponent<V> implements ControlValueAccessor, AfterConte
 
 interface TriggerValues {
   label: string | undefined;
-  selectedItemsCount: number;
+  overflowItemsCount: number;
+  overflowLabel?: string;
 }
 
 export const enum TriggerLabelDisplayMode {

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

@@ -8,6 +8,7 @@ import { LabelModule } from '../label/label.module';
 import { LoadAsyncModule } from '../load-async/load-async.module';
 import { PopoverModule } from '../popover/popover.module';
 import { TraceSearchBoxModule } from '../search-box/search-box.module';
+import { TooltipModule } from '../tooltip/tooltip.module';
 import { MultiSelectComponent } from './multi-select.component';
 
 @NgModule({
@@ -20,7 +21,8 @@ import { MultiSelectComponent } from './multi-select.component';
     TraceSearchBoxModule,
     ButtonModule,
     LoadAsyncModule,
-    TraceCheckboxModule
+    TraceCheckboxModule,
+    TooltipModule
   ],
   declarations: [MultiSelectComponent],
   exports: [MultiSelectComponent]