From 8c1ac7876f6957224ca42025d412d7b235736989 Mon Sep 17 00:00:00 2001
From: Arjunlal B <arjun@traceable.ai>
Date: Tue, 14 Dec 2021 10:07:27 +0530
Subject: [PATCH 1/4] feat: support for configurable max height in multi select
 container

---
 .../src/multi-select/multi-select.component.ts           | 9 ++++++---
 .../src/table/controls/table-controls.component.ts       | 1 +
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/projects/components/src/multi-select/multi-select.component.ts b/projects/components/src/multi-select/multi-select.component.ts
index 465f0e707..3d1903f7e 100644
--- a/projects/components/src/multi-select/multi-select.component.ts
+++ b/projects/components/src/multi-select/multi-select.component.ts
@@ -57,8 +57,8 @@ import { MultiSelectJustify } from './multi-select-justify';
             #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">
+            <ng-container *htLoadAsync="this.triggerValues$ as triggerValues">
+              <div *ngIf="!this.isIconOnlyMode()" class="trigger-label-container">
                 <ht-label class="trigger-label" [label]="triggerValues.label"></ht-label>
                 <span *ngIf="triggerValues.selectedItemsCount > 1" class="trigger-more-items"
                   >+{{ triggerValues.selectedItemsCount - 1 }}</span
@@ -69,7 +69,7 @@ import { MultiSelectJustify } from './multi-select-justify';
           </div>
         </ht-popover-trigger>
         <ht-popover-content>
-          <div class="multi-select-content" [ngStyle]="{ 'min-width.px': triggerContainer.offsetWidth }">
+          <div class="multi-select-content" [ngStyle]="{ 'min-width.px': triggerContainer.offsetWidth, 'max-height.px': this.maxHeight }">
             <ng-container *ngIf="this.searchMode !== '${MultiSelectSearchMode.Disabled}'">
               <ng-container *ngIf="this.allOptions$ | async as allOptions">
                 <ht-search-box
@@ -163,6 +163,9 @@ export class MultiSelectComponent<V> implements ControlValueAccessor, AfterConte
   @Input()
   public triggerLabelDisplayMode: TriggerLabelDisplayMode = TriggerLabelDisplayMode.Selection;
 
+  @Input()
+  public maxHeight: number = 360;
+
   @Output()
   public readonly selectedChange: EventEmitter<V[]> = new EventEmitter<V[]>();
 
diff --git a/projects/components/src/table/controls/table-controls.component.ts b/projects/components/src/table/controls/table-controls.component.ts
index d8bf011a7..04482ef0b 100644
--- a/projects/components/src/table/controls/table-controls.component.ts
+++ b/projects/components/src/table/controls/table-controls.component.ts
@@ -52,6 +52,7 @@ import {
             class="control select"
             [ngClass]="{ applied: this.appliedFilters(selectControl).length > 0 }"
             showBorder="true"
+            [maxHeight]="440"
             searchMode="${MultiSelectSearchMode.CaseInsensitive}"
             (selectedChange)="this.onMultiSelectChange(selectControl, $event)"
           >

From c90ebf03a323ac7bf48afa638e4cf9b3391b6de1 Mon Sep 17 00:00:00 2001
From: Arjunlal B <arjun@traceable.ai>
Date: Tue, 14 Dec 2021 10:08:12 +0530
Subject: [PATCH 2/4] fix: revert testing change

---
 .../components/src/table/controls/table-controls.component.ts    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/projects/components/src/table/controls/table-controls.component.ts b/projects/components/src/table/controls/table-controls.component.ts
index 04482ef0b..d8bf011a7 100644
--- a/projects/components/src/table/controls/table-controls.component.ts
+++ b/projects/components/src/table/controls/table-controls.component.ts
@@ -52,7 +52,6 @@ import {
             class="control select"
             [ngClass]="{ applied: this.appliedFilters(selectControl).length > 0 }"
             showBorder="true"
-            [maxHeight]="440"
             searchMode="${MultiSelectSearchMode.CaseInsensitive}"
             (selectedChange)="this.onMultiSelectChange(selectControl, $event)"
           >

From 928bc909cfb0441b03daad770ed5ea04996d4b14 Mon Sep 17 00:00:00 2001
From: Arjunlal B <arjun@traceable.ai>
Date: Tue, 14 Dec 2021 10:14:32 +0530
Subject: [PATCH 3/4] fix: undo unintended change

---
 .../components/src/multi-select/multi-select.component.ts     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/components/src/multi-select/multi-select.component.ts b/projects/components/src/multi-select/multi-select.component.ts
index 3d1903f7e..696f5fa08 100644
--- a/projects/components/src/multi-select/multi-select.component.ts
+++ b/projects/components/src/multi-select/multi-select.component.ts
@@ -57,8 +57,8 @@ import { MultiSelectJustify } from './multi-select-justify';
             #triggerContainer
           >
             <ht-icon *ngIf="this.icon" [icon]="this.icon" [size]="this.iconSize"></ht-icon>
-            <ng-container *htLoadAsync="this.triggerValues$ as triggerValues">
-              <div *ngIf="!this.isIconOnlyMode()" class="trigger-label-container">
+            <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

From 9ccba35248f769cedf3255876a00e9f700975de9 Mon Sep 17 00:00:00 2001
From: Arjunlal B <arjun@traceable.ai>
Date: Fri, 14 Jan 2022 07:43:03 +0530
Subject: [PATCH 4/4] fix: lint fix

---
 .../components/src/multi-select/multi-select.component.ts    | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/projects/components/src/multi-select/multi-select.component.ts b/projects/components/src/multi-select/multi-select.component.ts
index be3642cda..c0ab74510 100644
--- a/projects/components/src/multi-select/multi-select.component.ts
+++ b/projects/components/src/multi-select/multi-select.component.ts
@@ -69,7 +69,10 @@ import { MultiSelectJustify } from './multi-select-justify';
           </div>
         </ht-popover-trigger>
         <ht-popover-content>
-          <div class="multi-select-content" [ngStyle]="{ 'min-width.px': triggerContainer.offsetWidth, 'max-height.px': this.maxHeight }">
+          <div
+            class="multi-select-content"
+            [ngStyle]="{ 'min-width.px': triggerContainer.offsetWidth, 'max-height.px': this.maxHeight }"
+          >
             <ng-container *ngIf="this.searchMode !== '${MultiSelectSearchMode.Disabled}'">
               <ng-container *ngIf="this.allOptions$ | async as allOptions">
                 <ht-search-box