mis-crystal-design-system 18.0.25 → 18.1.0-signal-test

package/fesm2022/mis-crystal-design-system-async-search-dropdown.mjs

@@ -1,12 +1,12 @@
-import * as i1 from '@angular/cdk/overlay';
-import { ConnectionPositionPair, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, ViewChild, ContentChild, Output, HostListener, NgModule } from '@angular/core';
+import { input, output, signal, effect, Component, ViewChild, ContentChild, HostListener, NgModule } from '@angular/core';
 import * as i3 from '@angular/forms';
 import { UntypedFormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { Subject, merge } from 'rxjs';
+import * as i1 from '@angular/cdk/overlay';
+import { ConnectionPositionPair, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
 import { tap, debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { Subject, merge } from 'rxjs';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i4 from 'mis-crystal-design-system/loader';
@@ -20,410 +20,384 @@ const _c2 = ["ddBtn"];
 const _c3 = ["input"];
 const _c4 = ["dd"];
 const _c5 = (a0, a1, a2) => ({ opened: a0, disabled: a1, readonly: a2 });
-const _c6 = (a0, a1) => ({ "chip-md": a0, "chip-sm": a1 });
-const _c7 = (a0, a1) => ({ "h6": a0, "h8-b": a1 });
-const _c8 = () => ({ "margin-right": "4px" });
-const _c9 = a0 => ({ "cursor": "pointer", "font-size": a0 });
-const _c10 = (a0, a1) => ({ "ip-md": a0, "ip-sm": a1 });
-const _c11 = (a0, a1) => ({ "max-height": a0, "width": a1 });
-const _c12 = a0 => ({ "dd-list-pd": a0 });
-const _c13 = a0 => ({ $implicit: a0 });
+const _c6 = (a0, a1) => ({ "ip-md": a0, "ip-sm": a1 });
+const _c7 = (a0, a1) => ({ "chip-md": a0, "chip-sm": a1 });
+const _c8 = (a0, a1) => ({ "h6": a0, "h8-b": a1 });
+const _c9 = a0 => ({ cursor: "pointer", "font-size": a0 });
+const _c10 = (a0, a1) => ({ "max-height": a0, "width": a1 });
+const _c11 = a0 => ({ "dd-list-pd": a0 });
+const _c12 = a0 => ({ $implicit: a0 });
 function AsyncDropdownComponent_div_2_div_1_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 15)(1, "span", 16);
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 14)(1, "span", 15);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 17);
-    i0.ɵɵlistener("click", function AsyncDropdownComponent_div_2_div_1_Template_span_click_3_listener() { const item_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.removeItem(item_r2)); })("keyup.enter", function AsyncDropdownComponent_div_2_div_1_Template_span_keyup_enter_3_listener() { const item_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.removeItem(item_r2)); });
+    i0.ɵɵelementStart(3, "span", 16);
+    i0.ɵɵlistener("click", function AsyncDropdownComponent_div_2_div_1_Template_span_click_3_listener() { const item_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.removeItem(item_r3)); })("keyup.enter", function AsyncDropdownComponent_div_2_div_1_Template_span_keyup_enter_3_listener() { const item_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.removeItem(item_r3)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const item_r2 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(5, _c6, ctx_r2.size === "md", ctx_r2.size === "sm"));
+    const item_r3 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(4, _c7, ctx_r3.size() === "md", ctx_r3.size() === "sm"));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(8, _c7, ctx_r2.size === "md", ctx_r2.size === "sm"))("ngStyle", i0.ɵɵpureFunction0(11, _c8));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c8, ctx_r3.size() === "md", ctx_r3.size() === "sm"));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(item_r2[ctx_r2.displayKey]);
+    i0.ɵɵtextInterpolate1(" ", item_r3[ctx_r3.displayKey()], " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(12, _c9, ctx_r2.size === "sm" ? "12px" : "14px"));
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(10, _c9, ctx_r3.size() === "sm" ? "12px" : "14px"));
 } }
 function AsyncDropdownComponent_div_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 13);
-    i0.ɵɵtemplate(1, AsyncDropdownComponent_div_2_div_1_Template, 4, 14, "div", 14);
+    i0.ɵɵelementStart(0, "div", 12);
+    i0.ɵɵtemplate(1, AsyncDropdownComponent_div_2_div_1_Template, 4, 12, "div", 13);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
+    const ctx_r3 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r2.selectedItems);
+    i0.ɵɵproperty("ngForOf", ctx_r3.selectedItems);
 } }
 function AsyncDropdownComponent_div_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 18);
-    i0.ɵɵelement(1, "img", 19);
+    i0.ɵɵelementStart(0, "div", 17);
+    i0.ɵɵelement(1, "img", 18);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
+    const ctx_r3 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("src", ctx_r2.customPlaceholderIcon, i0.ɵɵsanitizeUrl);
+    i0.ɵɵproperty("src", ctx_r3.customPlaceholderIcon(), i0.ɵɵsanitizeUrl);
 } }
 function AsyncDropdownComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 20);
-} }
-function AsyncDropdownComponent_input_7_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 21, 4);
-    i0.ɵɵlistener("focus", function AsyncDropdownComponent_input_7_Template_input_focus_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.defaultCall()); })("keyup.enter", function AsyncDropdownComponent_input_7_Template_input_keyup_enter_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.enablePopUpOnTab()); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(3, _c10, ctx_r2.size === "md", ctx_r2.size === "sm"))("placeholder", ctx_r2.placeholder)("formControl", ctx_r2.searchInput);
+    i0.ɵɵelement(0, "span", 19);
 } }
-function AsyncDropdownComponent_ng_template_8_Template(rf, ctx) { if (rf & 1) {
+function AsyncDropdownComponent_div_9_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 22, 4);
-    i0.ɵɵlistener("focus", function AsyncDropdownComponent_ng_template_8_Template_input_focus_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.defaultCall()); })("keyup.enter", function AsyncDropdownComponent_ng_template_8_Template_input_keyup_enter_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.enablePopUpOnTab()); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(3, _c10, ctx_r2.size === "md", ctx_r2.size === "sm"))("placeholder", ctx_r2.placeholder)("formControl", ctx_r2.searchInput);
-} }
-function AsyncDropdownComponent_div_10_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 23);
-    i0.ɵɵlistener("click", function AsyncDropdownComponent_div_10_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.removeInputValue()); })("keyup.enter", function AsyncDropdownComponent_div_10_Template_div_keyup_enter_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.removeInputValue()); });
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵlistener("click", function AsyncDropdownComponent_div_9_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.removeInputValue()); })("keyup.enter", function AsyncDropdownComponent_div_9_Template_div_keyup_enter_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.removeInputValue()); });
     i0.ɵɵelementEnd();
 } }
-function AsyncDropdownComponent_ng_template_11_ng_container_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0, 27);
+function AsyncDropdownComponent_ng_template_10_ng_container_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 24);
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.customLoader);
+    const ctx_r3 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r3.customLoader);
 } }
-function AsyncDropdownComponent_ng_template_11_ng_container_1_ng_template_2_div_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 29);
-    i0.ɵɵelement(1, "mis-loader", 30);
+function AsyncDropdownComponent_ng_template_10_ng_container_1_ng_template_2_div_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵelement(1, "mis-loader", 27);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("mobileView", true);
 } }
-function AsyncDropdownComponent_ng_template_11_ng_container_1_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, AsyncDropdownComponent_ng_template_11_ng_container_1_ng_template_2_div_0_Template, 2, 1, "div", 28);
+function AsyncDropdownComponent_ng_template_10_ng_container_1_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, AsyncDropdownComponent_ng_template_10_ng_container_1_ng_template_2_div_0_Template, 2, 1, "div", 25);
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngIf", ctx_r2.loading && !ctx_r2.customLoader);
+    const ctx_r3 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngIf", ctx_r3.loading() && !ctx_r3.customLoader);
 } }
-function AsyncDropdownComponent_ng_template_11_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+function AsyncDropdownComponent_ng_template_10_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, AsyncDropdownComponent_ng_template_11_ng_container_1_ng_container_1_Template, 1, 1, "ng-container", 26)(2, AsyncDropdownComponent_ng_template_11_ng_container_1_ng_template_2_Template, 1, 1, "ng-template", null, 5, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵtemplate(1, AsyncDropdownComponent_ng_template_10_ng_container_1_ng_container_1_Template, 1, 1, "ng-container", 23)(2, AsyncDropdownComponent_ng_template_10_ng_container_1_ng_template_2_Template, 1, 1, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const defaultLoader_r7 = i0.ɵɵreference(3);
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const defaultLoader_r6 = i0.ɵɵreference(3);
+    const ctx_r3 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.customLoader)("ngIfElse", defaultLoader_r7);
+    i0.ɵɵproperty("ngIf", ctx_r3.customLoader)("ngIfElse", defaultLoader_r6);
 } }
-function AsyncDropdownComponent_ng_template_11_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+function AsyncDropdownComponent_ng_template_10_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "div", 29)(2, "p");
+    i0.ɵɵelementStart(1, "div", 26)(2, "p");
     i0.ɵɵtext(3, "Unknown error has occurred, ");
     i0.ɵɵelement(4, "br");
     i0.ɵɵtext(5, " Please try again later.");
     i0.ɵɵelementEnd()();
     i0.ɵɵelementContainerEnd();
 } }
-function AsyncDropdownComponent_ng_template_11_div_3_ng_container_1_div_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 35);
-    i0.ɵɵelementContainer(1, 36);
-    i0.ɵɵelementEnd();
+function AsyncDropdownComponent_ng_template_10_div_3_ng_container_1_ng_container_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementContainer(1, 32);
+    i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const item_r9 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("tabindex", ctx_r2.openPopUpOnTab ? 0 : -1);
+    const item_r8 = i0.ɵɵnextContext().$implicit;
+    const ctx_r3 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.customItem)("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c13, item_r9));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r3.customItem)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c12, item_r8));
 } }
-function AsyncDropdownComponent_ng_template_11_div_3_ng_container_1_ng_template_4_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelement(0, "div", 33);
-    i0.ɵɵelementStart(1, "div", 37);
-    i0.ɵɵlistener("click", function AsyncDropdownComponent_ng_template_11_div_3_ng_container_1_ng_template_4_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r10); const item_r9 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.selectData(item_r9, false)); })("keyup.enter", function AsyncDropdownComponent_ng_template_11_div_3_ng_container_1_ng_template_4_Template_div_keyup_enter_1_listener() { i0.ɵɵrestoreView(_r10); const item_r9 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.selectData(item_r9, false)); });
-    i0.ɵɵelementStart(2, "div", 38)(3, "div", 39);
+function AsyncDropdownComponent_ng_template_10_div_3_ng_container_1_ng_template_4_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelement(0, "div", 30);
+    i0.ɵɵelementStart(1, "div", 33);
+    i0.ɵɵlistener("click", function AsyncDropdownComponent_ng_template_10_div_3_ng_container_1_ng_template_4_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r9); const item_r8 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.selectData(item_r8, false)); })("keyup.enter", function AsyncDropdownComponent_ng_template_10_div_3_ng_container_1_ng_template_4_Template_div_keyup_enter_1_listener() { i0.ɵɵrestoreView(_r9); const item_r8 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.selectData(item_r8, false)); });
+    i0.ɵɵelementStart(2, "div", 34)(3, "div", 35);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 40);
+    i0.ɵɵelementStart(5, "div", 36);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const item_r9 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const item_r8 = i0.ɵɵnextContext().$implicit;
+    const ctx_r3 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("tabindex", ctx_r2.openPopUpOnTab ? 0 : -1);
+    i0.ɵɵproperty("tabindex", ctx_r3.openPopUpOnTab() ? 0 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", item_r9[ctx_r2.displayKey], " ");
+    i0.ɵɵtextInterpolate(item_r8[ctx_r3.displayKey()]);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", item_r9[ctx_r2.secondaryDisplayKey], " ");
+    i0.ɵɵtextInterpolate(item_r8[ctx_r3.secondaryDisplayKey()]);
 } }
-function AsyncDropdownComponent_ng_template_11_div_3_ng_container_1_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
+function AsyncDropdownComponent_ng_template_10_div_3_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "div", 32);
-    i0.ɵɵlistener("click", function AsyncDropdownComponent_ng_template_11_div_3_ng_container_1_Template_div_click_1_listener() { const item_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.selectData(item_r9, false)); })("keyup.enter", function AsyncDropdownComponent_ng_template_11_div_3_ng_container_1_Template_div_keyup_enter_1_listener() { const item_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.selectData(item_r9, false)); });
-    i0.ɵɵelement(2, "div", 33);
-    i0.ɵɵtemplate(3, AsyncDropdownComponent_ng_template_11_div_3_ng_container_1_div_3_Template, 2, 5, "div", 34)(4, AsyncDropdownComponent_ng_template_11_div_3_ng_container_1_ng_template_4_Template, 7, 3, "ng-template", null, 6, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵelementStart(1, "div", 29);
+    i0.ɵɵlistener("click", function AsyncDropdownComponent_ng_template_10_div_3_ng_container_1_Template_div_click_1_listener() { const item_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.selectData(item_r8, false)); })("keyup.enter", function AsyncDropdownComponent_ng_template_10_div_3_ng_container_1_Template_div_keyup_enter_1_listener() { const item_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.selectData(item_r8, false)); });
+    i0.ɵɵelement(2, "div", 30);
+    i0.ɵɵtemplate(3, AsyncDropdownComponent_ng_template_10_div_3_ng_container_1_ng_container_3_Template, 2, 4, "ng-container", 31)(4, AsyncDropdownComponent_ng_template_10_div_3_ng_container_1_ng_template_4_Template, 7, 3, "ng-template", null, 5, i0.ɵɵtemplateRefExtractor);
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const standardItem_r11 = i0.ɵɵreference(5);
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const standardItem_r10 = i0.ɵɵreference(5);
+    const ctx_r3 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", ctx_r2.customItem)("ngIfElse", standardItem_r11);
+    i0.ɵɵproperty("ngIf", ctx_r3.customItem)("ngIfElse", standardItem_r10);
 } }
-function AsyncDropdownComponent_ng_template_11_div_3_Template(rf, ctx) { if (rf & 1) {
+function AsyncDropdownComponent_ng_template_10_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div");
-    i0.ɵɵtemplate(1, AsyncDropdownComponent_ng_template_11_div_3_ng_container_1_Template, 6, 2, "ng-container", 31);
+    i0.ɵɵtemplate(1, AsyncDropdownComponent_ng_template_10_div_3_ng_container_1_Template, 6, 2, "ng-container", 28);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r3 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r2.data);
+    i0.ɵɵproperty("ngForOf", ctx_r3.data());
 } }
-function AsyncDropdownComponent_ng_template_11_div_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div")(1, "div", 41);
+function AsyncDropdownComponent_ng_template_10_div_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "div", 37);
     i0.ɵɵtext(2, "No Data Available");
     i0.ɵɵelementEnd()();
 } }
-function AsyncDropdownComponent_ng_template_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 24);
-    i0.ɵɵtemplate(1, AsyncDropdownComponent_ng_template_11_ng_container_1_Template, 4, 2, "ng-container", 25)(2, AsyncDropdownComponent_ng_template_11_ng_container_2_Template, 6, 0, "ng-container", 25)(3, AsyncDropdownComponent_ng_template_11_div_3_Template, 2, 1, "div", 25)(4, AsyncDropdownComponent_ng_template_11_div_4_Template, 3, 0, "div", 25);
+function AsyncDropdownComponent_ng_template_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21);
+    i0.ɵɵtemplate(1, AsyncDropdownComponent_ng_template_10_ng_container_1_Template, 4, 2, "ng-container", 22)(2, AsyncDropdownComponent_ng_template_10_ng_container_2_Template, 6, 0, "ng-container", 22)(3, AsyncDropdownComponent_ng_template_10_div_3_Template, 2, 1, "div", 22)(4, AsyncDropdownComponent_ng_template_10_div_4_Template, 3, 0, "div", 22);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction2(7, _c11, ctx_r2.height, ctx_r2.dropdownListWidth))("ngClass", i0.ɵɵpureFunction1(10, _c12, ctx_r2.data.length === 0))("cdkTrapFocusAutoCapture", ctx_r2.openPopUpOnTab);
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction2(7, _c10, ctx_r3.height(), ctx_r3.dropdownListWidth()))("ngClass", i0.ɵɵpureFunction1(10, _c11, ctx_r3.data().length === 0))("cdkTrapFocusAutoCapture", ctx_r3.openPopUpOnTab());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.loading);
+    i0.ɵɵproperty("ngIf", ctx_r3.loading());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.error);
+    i0.ɵɵproperty("ngIf", ctx_r3.error());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.loading && !ctx_r2.error && ctx_r2.data.length > 0);
+    i0.ɵɵproperty("ngIf", !ctx_r3.loading() && !ctx_r3.error() && ctx_r3.data().length > 0);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.loading && !ctx_r2.error && ctx_r2.data.length === 0 && ctx_r2.searchInput.value);
+    i0.ɵɵproperty("ngIf", !ctx_r3.loading() && !ctx_r3.error() && ctx_r3.data().length === 0 && ctx_r3.searchInput.value);
 } }
 class AsyncDropdownComponent {
-    constructor(overlay, viewContainerRef, _ngZone) {
+    constructor(overlay, viewContainerRef, _ngZone, injector) {
         this.overlay = overlay;
         this.viewContainerRef = viewContainerRef;
         this._ngZone = _ngZone;
-        this.size = 'md';
-        this.placeholder = "Select"; // placeholder for input
-        this.debounceTime = 400; // wait time till which API call is paused
-        this.minInputLength = 2; // min length after which API call is made
-        this.multi = false; // maintain a list or emit value
-        this.disableCopyPaste = false;
-        this.dropdownListPosition = "Left"; //dropdown position
-        this.customPlaceholderIcon = ""; // custom icon for placeholder instead of default search icon
-        // tslint:disable-next-line
-        this.onSelect = new EventEmitter(true); // emit selected values
+        this.injector = injector;
+        // === Inputs ===
+        this.height = input();
+        this.width = input();
+        this.size = input('md');
+        this.httpStream = input.required();
+        this.displayKey = input.required();
+        this.secondaryDisplayKey = input('');
+        this.placeholder = input('Select');
+        this.debounceTime = input(400);
+        this.minInputLength = input(2);
+        this.multi = input(false);
+        this.uniqueKey = input();
+        this.control = input(null);
+        this.disabled = input(false);
+        this.readonly = input(false);
+        this.disableCopyPaste = input(false);
+        this.dropdownListWidth = input();
+        this.dropdownListPosition = input('Left');
+        this.customPlaceholderIcon = input('');
+        this.selections = input(new Map());
+        this.searchValue = input();
+        // === Outputs ===
+        this.onSelect = output();
+        this.searchQueryChange = output();
+        this.clear = output();
+        this.itemSelected = output();
+        this.itemRemoved = output();
+        // === Internal state ===
         this.searchInput = new UntypedFormControl();
-        this.data = [];
-        this.opened = false;
-        this.loading = false;
-        this.error = false;
-        this.openPopUpOnTab = false;
-        // tslint:disable-next-line
-        this.selections = new Map();
         this.httpStreamTrigger = new Subject();
-        this.searchQueryChange = new EventEmitter();
-        this.clear = new EventEmitter(false);
-        this.itemSelected = new EventEmitter();
-        this.itemRemoved = new EventEmitter();
-        this.handleControlChanges = (values) => {
-            values.forEach(el => {
-                this.selectData(el, true);
-            });
-            // tslint:disable-next-line
-        };
-    }
-    ngOnInit() {
-        if (this.multi && !this.uniqueKey) {
-            throw new Error("[uniqueKey] required in multi mode.");
-        }
-        if (this.disabled) {
-            this.searchInput.disable();
-        }
-        const searchObservable = this.searchInput.valueChanges.pipe(tap((val) => this.searchQueryChange.emit(val)), debounceTime(this.debounceTime), distinctUntilChanged());
-        this.searchSubscription = merge(searchObservable, this.httpStreamTrigger)
-            .subscribe(res => {
-            this._ngZone.run(() => {
-                res = res?.trim() ?? '';
-                if (res?.length < this.minInputLength || !res?.length) {
+        // === Signals ===
+        this.opened = signal(false);
+        this.loading = signal(false);
+        this.error = signal(false);
+        this.openPopUpOnTab = signal(false);
+        this.data = signal([]);
+        // === Effect to handle search ===
+        this.searchEffect = effect(() => {
+            // Merge form control changes and manual triggers
+            merge(this.searchInput.valueChanges.pipe(tap((val) => this.searchQueryChange.emit(val)), debounceTime(this.debounceTime()), distinctUntilChanged()), this.httpStreamTrigger).subscribe((query) => {
+                const q = query?.trim() ?? '';
+                if (!q || q.length < this.minInputLength()) {
                     this.closeDropdown();
                     return;
                 }
-                else if (res?.length > this.minInputLength && this.httpStream) {
-                    this.loading = true;
-                    this.error = false;
-                    if (!this.overlayRef?.hasAttached())
-                        this.openDropdown(this.dd, this.origin.nativeElement);
-                    this.httpStream(res).subscribe(list => {
-                        this.loading = false;
-                        this.data = list;
-                        if (!this.overlayRef?.hasAttached() && list.length > 0) {
-                            this.openDropdown(this.dd, this.origin.nativeElement);
-                        }
-                    }, error => {
-                        this.loading = false;
-                        this.error = true;
-                    });
+                this.loading.set(true);
+                this.error.set(false);
+                // Open overlay if not yet open
+                if (!this.overlayRef?.hasAttached()) {
+                    this.openDropdown(this.dd, this.origin.nativeElement);
                 }
+                // Call HTTP stream
+                this.httpStream()(q).subscribe({
+                    next: (list) => {
+                        this.loading.set(false);
+                        this.data.set(list);
+                    },
+                    error: () => {
+                        this.loading.set(false);
+                        this.error.set(true);
+                    },
+                });
             });
         });
-        if (this.control?.value) {
-            this.handleControlChanges(this.control.value);
-        }
-        this.controlSubscription = this.control?.valueChanges.subscribe(this.handleControlChanges);
+        this.handleControlChanges = (values) => {
+            values.forEach((el) => this.selectData(el, true));
+        };
     }
-    refreshHttpStream(query) {
-        this.loading = true;
-        this.httpStreamTrigger.next(query);
+    // === Lifecycle ===
+    ngOnInit() {
+        if (this.multi() && !this.uniqueKey()) {
+            throw new Error('[uniqueKey] required in multi mode.');
+        }
+        if (this.disabled())
+            this.searchInput.disable();
+        if (this.control()?.value) {
+            this.handleControlChanges(this.control().value);
+        }
+        this.control()?.valueChanges.subscribe(this.handleControlChanges);
     }
-    ngOnChanges(changes) {
-        if (changes && changes?.searchValue?.currentValue) {
-            this.searchInput.patchValue(changes.searchValue.currentValue);
+    ngOnChanges() {
+        if (this.searchValue()) {
+            this.searchInput.patchValue(this.searchValue());
         }
-        if (changes && changes.disabled) {
+        if (this.disabled()) {
+            this.searchInput.disable();
+        }
+        else {
             this.searchInput.enable();
-            if (this.disabled) {
-                this.searchInput.disable();
-            }
         }
     }
     ngOnDestroy() {
-        this.searchSubscription?.unsubscribe();
-        this.defaultCallSubscription?.unsubscribe();
+        this.overlayRef?.dispose();
+    }
+    // === Methods ===
+    refreshHttpStream(query) {
+        this.httpStreamTrigger.next(query);
     }
     openDropdown(template, origin) {
         const positionsBottom = [
-            new ConnectionPositionPair({ originX: "start", originY: "bottom" }, { overlayX: "start", overlayY: "top" }, 0, 4),
-            new ConnectionPositionPair({ originX: "end", originY: "bottom" }, { overlayX: "end", overlayY: "top" }, 0, 4)
+            new ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' }, 0, 4),
+            new ConnectionPositionPair({ originX: 'end', originY: 'bottom' }, { overlayX: 'end', overlayY: 'top' }, 0, 4),
         ];
         const positionsTop = [
-            new ConnectionPositionPair({ originX: "start", originY: "top" }, { overlayX: "start", overlayY: "bottom" }, 0, -4),
-            new ConnectionPositionPair({ originX: "end", originY: "top" }, { overlayX: "end", overlayY: "bottom" }, 0, -4)
+            new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' }, 0, -4),
+            new ConnectionPositionPair({ originX: 'end', originY: 'top' }, { overlayX: 'end', overlayY: 'bottom' }, 0, -4),
         ];
         const positionStrategy = this.overlay
             .position()
             .flexibleConnectedTo(origin)
             .withPositions([
-            ...(this.dropdownListPosition === "Right" ? positionsBottom.reverse() : positionsBottom),
-            ...(this.dropdownListPosition === "Right" ? positionsTop.reverse() : positionsTop)
+            ...(this.dropdownListPosition() === 'Right' ? positionsBottom.reverse() : positionsBottom),
+            ...(this.dropdownListPosition() === 'Right' ? positionsTop.reverse() : positionsTop),
         ])
             .withPush(true);
         const configs = new OverlayConfig({
             hasBackdrop: true,
-            backdropClass: "cdk-overlay-transparent-backdrop",
+            backdropClass: 'cdk-overlay-transparent-backdrop',
             scrollStrategy: this.overlay.scrollStrategies.reposition(),
             positionStrategy,
-            width: origin.clientWidth
+            width: origin.clientWidth,
         });
         this.overlayRef = this.overlay.create(configs);
-        if (this.dropdownListWidth)
-            this.overlayRef.updateSize({ width: this.dropdownListWidth });
+        if (this.dropdownListWidth())
+            this.overlayRef.updateSize({ width: this.dropdownListWidth() });
         this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));
-        this.overlayRef.backdropClick().subscribe(res => {
-            this.closeDropdown();
-        });
+        this.overlayRef.backdropClick().subscribe(() => this.closeDropdown());
     }
-    /**
-     * closes the dropdown
-     */
     closeDropdown() {
-        this.opened = false;
-        this.openPopUpOnTab = false;
+        this.opened.set(false);
+        this.openPopUpOnTab.set(false);
         this.overlayRef?.detach();
-        this.data = [];
+        this.data.set([]);
     }
     enablePopUpOnTab() {
-        this.openPopUpOnTab = true;
+        this.openPopUpOnTab.set(true);
     }
     handleKeyDown(event) {
         if (event.key === 'Escape') {
-            this.searchInput.patchValue("");
+            this.searchInput.reset();
             this.closeDropdown();
         }
     }
-    /**
-     *
-     * @param item item to select
-     * if item property disabled is set to true, selection will be disabled
-     * @param effectedFromOutside set to true if calling from parent component, if true will focus on search input
-     */
     selectData(item, effectedFromOutside = true) {
-        if (item.disabled) {
+        if (item.disabled)
             return;
-        }
         this.itemSelected.emit(item);
-        if (!this.multi) {
-            this.searchInput.patchValue(item[this.displayKey], { emitEvent: false });
+        if (!this.multi()) {
+            this.searchInput.patchValue(item[this.displayKey()], { emitEvent: false });
             this.setControlValue(item);
         }
         else {
-            if (!this.selections.has(item[this.uniqueKey])) {
-                this.selections.set(item[this.uniqueKey], item);
+            if (!this.selections().has(item[this.uniqueKey()])) {
+                this.selections().set(item[this.uniqueKey()], item);
             }
             this.setControlValue(this.selectedItems);
             if (!effectedFromOutside) {
                 setTimeout(() => {
-                    this.input.nativeElement.focus();
-                    this.input.nativeElement.scrollIntoView();
+                    this.inputRef.nativeElement.focus();
+                    this.inputRef.nativeElement.scrollIntoView();
                 }, 10);
             }
-            this.searchInput.patchValue("");
-            this.data = [];
+            this.searchInput.patchValue('');
+            this.data.set([]);
         }
         this.closeDropdown();
     }
-    /**
-     *
-     * @param item remove item from selected list
-     */
     removeItem(item) {
         this.itemRemoved.emit(item);
-        this.selections.delete(item[this.uniqueKey]);
+        this.selections().delete(item[this.uniqueKey()]);
         this.setControlValue(this.selectedItems);
-        // tslint:disable-next-line
-        this.input["nativeElement"].focus();
+        this.inputRef.nativeElement.focus();
     }
     setControlValue(value) {
         this.onSelect.emit(value);
-        this.control?.patchValue(value, { emitEvent: false });
+        this.control()?.patchValue(value, { emitEvent: false });
     }
-    /**
-     * @returns list of selected items
-     */
     get selectedItems() {
-        return Array.from(this.selections.values());
+        return Array.from(this.selections().values());
     }
     removeInputValue() {
         this.searchInput.reset();
-        this.data = [];
+        this.data.set([]);
         this.clear.emit(true);
     }
     defaultCall() {
-        if (this.minInputLength === -1) {
-            this.loading = true;
-            this.defaultCallSubscription = this.httpStream(this.searchInput.value || '').subscribe(list => {
-                this.loading = false;
-                this.data = list;
-                if (!this.overlayRef?.hasAttached() && this.data?.length > 0) {
-                    this.openDropdown(this.dd, this.origin.nativeElement);
-                }
-            }, error => {
-                this.loading = false;
-                this.error = true;
+        if (this.minInputLength() === -1) {
+            this.loading.set(true);
+            this.httpStream()(this.searchInput.value || '').subscribe({
+                next: (list) => {
+                    this.loading.set(false);
+                    this.data.set(list);
+                    if (!this.overlayRef?.hasAttached() && list.length > 0) {
+                        this.openDropdown(this.dd, this.origin.nativeElement);
+                    }
+                },
+                error: () => {
+                    this.loading.set(false);
+                    this.error.set(true);
+                },
             });
         }
     }
-    static { this.ɵfac = function AsyncDropdownComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AsyncDropdownComponent)(i0.ɵɵdirectiveInject(i1.Overlay), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.NgZone)); }; }
+    static { this.ɵfac = function AsyncDropdownComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AsyncDropdownComponent)(i0.ɵɵdirectiveInject(i1.Overlay), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i0.Injector)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AsyncDropdownComponent, selectors: [["mis-async-search-dropdown"]], contentQueries: function AsyncDropdownComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
             i0.ɵɵcontentQuery(dirIndex, _c0, 5);
             i0.ɵɵcontentQuery(dirIndex, _c1, 5);
@@ -438,100 +412,55 @@ class AsyncDropdownComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.origin = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.input = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputRef = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dd = _t.first);
         } }, hostBindings: function AsyncDropdownComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown", function AsyncDropdownComponent_keydown_HostBindingHandler($event) { return ctx.handleKeyDown($event); }, false, i0.ɵɵresolveDocument);
-        } }, inputs: { height: "height", width: "width", size: "size", httpStream: "httpStream", displayKey: "displayKey", secondaryDisplayKey: "secondaryDisplayKey", placeholder: "placeholder", debounceTime: "debounceTime", minInputLength: "minInputLength", multi: "multi", uniqueKey: "uniqueKey", control: "control", disabled: "disabled", readonly: "readonly", disableCopyPaste: "disableCopyPaste", dropdownListWidth: "dropdownListWidth", dropdownListPosition: "dropdownListPosition", customPlaceholderIcon: "customPlaceholderIcon", selections: "selections", searchValue: "searchValue" }, outputs: { onSelect: "onSelect", searchQueryChange: "searchQueryChange", clear: "clear", itemSelected: "itemSelected", itemRemoved: "itemRemoved" }, features: [i0.ɵɵNgOnChangesFeature], decls: 13, vars: 13, consts: [["ddBtn", ""], ["defaultSearchIcon", ""], ["enableCopyPaste", ""], ["dd", ""], ["input", ""], ["defaultLoader", ""], ["standardItem", ""], [1, "dd-wrapper", 3, "ngClass"], ["class", "selected-list", 4, "ngIf"], [1, "search-input"], ["class", "custom-icon", 4, "ngIf", "ngIfElse"], ["oncopy", "return false;", "onpaste", "return false", "oncut", "return false", "tabindex", "0", "type", "text", "class", "black-text h6", 3, "ngClass", "placeholder", "formControl", "focus", "keyup.enter", 4, "ngIf", "ngIfElse"], ["class", "icon-ic-navigation-cancel-24 croos-icon", "tabindex", "0", 3, "click", "keyup.enter", 4, "ngIf"], [1, "selected-list"], ["class", "chip", 3, "ngClass", 4, "ngFor", "ngForOf"], [1, "chip", 3, "ngClass"], [3, "ngClass", "ngStyle"], ["tabindex", "0", 1, "icon-ic-navigation-cancel-24", 2, "cursor", "pointer", 3, "click", "keyup.enter", "ngStyle"], [1, "custom-icon"], ["alt", "customIcon", 3, "src"], [1, "icon-ic-action-search-24"], ["oncopy", "return false;", "onpaste", "return false", "oncut", "return false", "tabindex", "0", "type", "text", 1, "black-text", "h6", 3, "focus", "keyup.enter", "ngClass", "placeholder", "formControl"], ["tabindex", "0", "type", "text", 1, "black-text", "h6", 3, "focus", "keyup.enter", "ngClass", "placeholder", "formControl"], ["tabindex", "0", 1, "icon-ic-navigation-cancel-24", "croos-icon", 3, "click", "keyup.enter"], ["tabindex", "0", "cdkTrapFocus", "", 1, "dd-list", 3, "ngStyle", "ngClass", "cdkTrapFocusAutoCapture"], [4, "ngIf"], [3, "ngTemplateOutlet", 4, "ngIf", "ngIfElse"], [3, "ngTemplateOutlet"], ["class", "status-container", 4, "ngIf"], [1, "status-container"], [3, "mobileView"], [4, "ngFor", "ngForOf"], [3, "click", "keyup.enter"], ["tabindex", "-1", "cdkFocusInitial", ""], [3, "tabindex", 4, "ngIf", "ngIfElse"], [3, "tabindex"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "item", 3, "click", "keyup.enter", "tabindex"], [1, "value"], [1, "primary"], [1, "secondary"], [1, "data-not-found"]], template: function AsyncDropdownComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 7, 0);
-            i0.ɵɵtemplate(2, AsyncDropdownComponent_div_2_Template, 2, 1, "div", 8);
-            i0.ɵɵelementStart(3, "div", 9);
-            i0.ɵɵtemplate(4, AsyncDropdownComponent_div_4_Template, 2, 1, "div", 10)(5, AsyncDropdownComponent_ng_template_5_Template, 1, 0, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor)(7, AsyncDropdownComponent_input_7_Template, 2, 6, "input", 11)(8, AsyncDropdownComponent_ng_template_8_Template, 2, 6, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor)(10, AsyncDropdownComponent_div_10_Template, 1, 0, "div", 12);
+        } }, inputs: { height: [1, "height"], width: [1, "width"], size: [1, "size"], httpStream: [1, "httpStream"], displayKey: [1, "displayKey"], secondaryDisplayKey: [1, "secondaryDisplayKey"], placeholder: [1, "placeholder"], debounceTime: [1, "debounceTime"], minInputLength: [1, "minInputLength"], multi: [1, "multi"], uniqueKey: [1, "uniqueKey"], control: [1, "control"], disabled: [1, "disabled"], readonly: [1, "readonly"], disableCopyPaste: [1, "disableCopyPaste"], dropdownListWidth: [1, "dropdownListWidth"], dropdownListPosition: [1, "dropdownListPosition"], customPlaceholderIcon: [1, "customPlaceholderIcon"], selections: [1, "selections"], searchValue: [1, "searchValue"] }, outputs: { onSelect: "onSelect", searchQueryChange: "searchQueryChange", clear: "clear", itemSelected: "itemSelected", itemRemoved: "itemRemoved" }, features: [i0.ɵɵNgOnChangesFeature], decls: 12, vars: 21, consts: [["ddBtn", ""], ["defaultSearchIcon", ""], ["input", ""], ["dd", ""], ["defaultLoader", ""], ["standardItem", ""], [1, "dd-wrapper", 3, "ngClass"], ["class", "selected-list", 4, "ngIf"], [1, "search-input"], ["class", "custom-icon", 4, "ngIf", "ngIfElse"], ["type", "text", 1, "black-text", "h6", 3, "focus", "keyup.enter", "ngClass", "placeholder", "formControl"], ["class", "icon-ic-navigation-cancel-24 croos-icon", "tabindex", "0", 3, "click", "keyup.enter", 4, "ngIf"], [1, "selected-list"], ["class", "chip", 3, "ngClass", 4, "ngFor", "ngForOf"], [1, "chip", 3, "ngClass"], [2, "margin-right", "4px", 3, "ngClass"], ["tabindex", "0", 1, "icon-ic-navigation-cancel-24", 3, "click", "keyup.enter", "ngStyle"], [1, "custom-icon"], ["alt", "customIcon", 3, "src"], [1, "icon-ic-action-search-24"], ["tabindex", "0", 1, "icon-ic-navigation-cancel-24", "croos-icon", 3, "click", "keyup.enter"], ["tabindex", "0", "cdkTrapFocus", "", 1, "dd-list", 3, "ngStyle", "ngClass", "cdkTrapFocusAutoCapture"], [4, "ngIf"], [3, "ngTemplateOutlet", 4, "ngIf", "ngIfElse"], [3, "ngTemplateOutlet"], ["class", "status-container", 4, "ngIf"], [1, "status-container"], [3, "mobileView"], [4, "ngFor", "ngForOf"], [3, "click", "keyup.enter"], ["tabindex", "-1", "cdkFocusInitial", ""], [4, "ngIf", "ngIfElse"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "item", 3, "click", "keyup.enter", "tabindex"], [1, "value"], [1, "primary"], [1, "secondary"], [1, "data-not-found"]], template: function AsyncDropdownComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 6, 0);
+            i0.ɵɵtemplate(2, AsyncDropdownComponent_div_2_Template, 2, 1, "div", 7);
+            i0.ɵɵelementStart(3, "div", 8);
+            i0.ɵɵtemplate(4, AsyncDropdownComponent_div_4_Template, 2, 1, "div", 9)(5, AsyncDropdownComponent_ng_template_5_Template, 1, 0, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵelementStart(7, "input", 10, 2);
+            i0.ɵɵlistener("focus", function AsyncDropdownComponent_Template_input_focus_7_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.defaultCall()); })("keyup.enter", function AsyncDropdownComponent_Template_input_keyup_enter_7_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.enablePopUpOnTab()); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(9, AsyncDropdownComponent_div_9_Template, 1, 0, "div", 11);
             i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(11, AsyncDropdownComponent_ng_template_11_Template, 5, 12, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(10, AsyncDropdownComponent_ng_template_10_Template, 5, 12, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
-            const defaultSearchIcon_r12 = i0.ɵɵreference(6);
-            const enableCopyPaste_r13 = i0.ɵɵreference(9);
-            i0.ɵɵstyleProp("width", ctx.width);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(9, _c5, ctx.opened, ctx.disabled, ctx.readonly));
+            const defaultSearchIcon_r11 = i0.ɵɵreference(6);
+            i0.ɵɵstyleProp("width", ctx.width());
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(14, _c5, ctx.opened(), ctx.disabled(), ctx.readonly()));
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.multi && ctx.selections.size > 0);
+            i0.ɵɵproperty("ngIf", ctx.multi() && ctx.selectedItems.length > 0);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.customPlaceholderIcon)("ngIfElse", defaultSearchIcon_r12);
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngIf", ctx.disableCopyPaste)("ngIfElse", enableCopyPaste_r13);
+            i0.ɵɵproperty("ngIf", ctx.customPlaceholderIcon())("ngIfElse", defaultSearchIcon_r11);
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngIf", ctx.searchInput == null ? null : ctx.searchInput.value == null ? null : ctx.searchInput.value.length);
-        } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2.NgTemplateOutlet, i2.NgStyle, i3.DefaultValueAccessor, i3.NgControlStatus, i3.FormControlDirective, i4.LoaderComponent, i5.CdkTrapFocus], styles: ["[_ngcontent-%COMP%]:root{--pmry-200: #99BAF7;--pmry-100: #CBDDFB;--pmry-500: #0937B2;--pmry-400: #3C68D0;--pmry-600: #062A99;--pmry-700: #041F80;--pmry-300: #638FE7;--pmry-800: #021567;--pmry-900: #010F55;--sec-d-purple: #40447F;--sec-maroon: #6B034E;--sec-mud-red: #B23600;--sec-orange: #ED711C;--sec-purple: #815FD5;--sec-teal: #10ADAE;--sec-yellow: #D4900C;--sec-green: #547F40;--sec-bright-green: #27D22E;--sec-dark-teal: #035F6B;--sec-chocolate: #7C2F33;--sec-rube-pink: #C13D6D;--sec-cerulean: #0087B2;--sem-error: #B00020;--sem-info: #0091FF;--sem-warning: #FF9D00;--sem-success: #38AF49;--grey-bg-1: #FAFAFA;--grey-bg: #F5F5F5;--grey-seperators: #E0E0E0;--grey-disabled: #C8CDD3;--grey-hover: #F5F7FC;--grey-pressed: #E6EBF7;--grey-row: #F5F7FC;--dec-light-yellow: #F4E7C3;--dec-light-purple: #DACFF9;--dec-light-green: #E4F5E9;--dec-light-green2: #F1FFF3;--dec-light-pink: #FAE1EA;--dec-: #F4CBC1;--dec-lt-orange: #FAEFED;--dec-light-blue: #CFECF9;--dec-row-selection: #F1FDF8;--dec-row-selection2: #F2FBFF;--dec-row-lines: #D3E1E9;--text-white: #FFFFFF;--text-muted: #6A737D;--text-black: #181F33;--MR-solid-blue2:#C8D5F6;--MR-solid-purple:#C9C3FB;--MR-solid-orange:#EEAC9F;--MR-solid-green:#ACDADA;--MR-solid-brown:#E8C8AF;--MR-solid-yellow:#FFEFC7;--MR-solid-blue:#BBE6FF;--MR-solid-pink:#FFC6F2;--tr-hover:#F0F3FA;--tr-pressed:#DAE1F3;--brand-primary: #0937B2;--brand-primary-light: #3C68D0;--brand-primary-dark: #062A99;--brand-primary-darker: #041F80;--brand-primary-lighter: #638FE7;--brand-primary-lightest: #CBDDFB;--brand-primary-hover: #F0F3FA;--brand-primary-active: #DAE1F3;--brand-secondary: #ED711C;--brand-secondary-light: #F09E65;--brand-secondary-dark: #B23600;--brand-secondary-lighter: #FFC6F2;--brand-accent: #10ADAE;--brand-accent-light: #16CBBC;--brand-accent-dark: #035F6B;--brand-accent-lighter: #ACDADA;--brand-success: #38AF49;--brand-success-light: #4CAF50;--brand-success-dark: #216531;--brand-success-lighter: #E4F5E9;--brand-success-lightest: #F1FFF3;--brand-error: #B00020;--brand-error-light: #F04E4E;--brand-error-dark: #A60060;--brand-error-lighter: #FAE1EA;--brand-error-lightest: #FDF2F2;--brand-warning: #FF9D00;--brand-warning-light: #D4900C;--brand-warning-dark: #624000;--brand-warning-lighter: #F4E7C3;--brand-warning-lightest: #FAEFED;--brand-info: #0091FF;--brand-info-light: #35A1FF;--brand-info-dark: #0087B2;--brand-info-lighter: #CFECF9;--text-primary: #181F33;--text-secondary: #6A737D;--text-tertiary: #929DAB;--text-disabled: #929DAB;--text-primary-87: rgba(24, 31, 51, .87);--text-primary-60: rgba(24, 31, 51, .6);--text-primary-38: rgba(24, 31, 51, .38);--text-primary-12: rgba(24, 31, 51, .12);--bg-primary: #FFFFFF;--bg-secondary: #FAFAFA;--bg-tertiary: #F5F5F5;--bg-overlay: rgba(0, 0, 0, .32);--bg-overlay-light: rgba(0, 0, 0, .12);--bg-overlay-lighter: rgba(0, 0, 0, .08);--bg-overlay-lightest: rgba(0, 0, 0, .04);--border-primary: #E0E0E0;--border-secondary: #D6DCE2;--border-tertiary: #C8CDD3;--border-light: #F1F4F8;--border-primary-12: rgba(0, 0, 0, .12);--border-primary-08: rgba(0, 0, 0, .08);--border-primary-06: rgba(0, 0, 0, .06);--shadow-primary: rgba(0, 0, 0, .12);--shadow-secondary: rgba(0, 0, 0, .08);--shadow-tertiary: rgba(0, 0, 0, .04);--shadow-light: rgba(0, 0, 0, .06);--status-available: #929DAB;--status-unavailable: #CCD3DA;--status-hotseat: #857BFF;--status-multiteam: #10ADAE;--status-selected: #10ADAE;--status-upcoming: #D4900C;--status-room: #38AF49;--status-room-booked: #B23600;--status-room-unavailable: #181F33;--team-color-1: #F8C52E;--team-color-2: #FA8E20;--team-color-3: #987CDD;--team-color-4: #16CBBC;--team-color-5: #E65010;--team-color-6: #A60060;--team-color-7: #ED323B;--team-color-8: #35A1FF;--team-color-9: #80D348}.dd-wrapper[_ngcontent-%COMP%]{background:var(--bg-primary, #FFFFFF);border:1px solid var(--border-primary, #E0E0E0);box-sizing:border-box;border-radius:4px;display:block;cursor:pointer;outline:none}.dd-wrapper.opened[_ngcontent-%COMP%], .dd-wrapper[_ngcontent-%COMP%]:hover{background:var(--bg-tertiary, #F5F5F5)}.dd-wrapper[_ngcontent-%COMP%]   .selected-list[_ngcontent-%COMP%]{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:4px;padding:8px 16px}.dd-wrapper[_ngcontent-%COMP%]:focus-within{border-color:var(--brand-primary, #0937B2);background:var(--bg-tertiary, #F5F5F5)}.dd-wrapper.disabled[_ngcontent-%COMP%], .dd-wrapper.readonly[_ngcontent-%COMP%]{pointer-events:none}.search-input[_ngcontent-%COMP%]{position:relative;border-radius:8px}.search-input[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]{box-sizing:border-box;outline:none;padding-left:40px;padding-right:24px;background-color:transparent;color:var(--text-primary, #181F33);border-radius:inherit;border:1px solid transparent;width:100%}.search-input[_ngcontent-%COMP%]   span[_ngcontent-%COMP%], .search-input[_ngcontent-%COMP%]   .custom-icon[_ngcontent-%COMP%]{position:absolute;top:50%;transform:translateY(-50%);font-size:24px;line-height:24px;height:24px;left:8px}.search-input[_ngcontent-%COMP%]   .croos-icon[_ngcontent-%COMP%]{position:absolute;top:50%;transform:translateY(-50%);font-size:16px;width:24px;line-height:16px;height:16px;right:0}.dd-list[_ngcontent-%COMP%]{padding:8px 0;max-height:200px;background:var(--bg-primary, #FFFFFF);box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:8px;min-width:100%;overflow-y:auto}.dd-list[_ngcontent-%COMP%]::-webkit-scrollbar{width:8px;border-radius:4px}.dd-list[_ngcontent-%COMP%]::-webkit-scrollbar-track{background:var(--bg-primary, #FFFFFF);border-radius:4px}.dd-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:var(--text-tertiary, #929DAB);border-radius:4px}.dd-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary, #929DAB)}.dd-list[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]{padding:8px 16px;cursor:pointer}.dd-list[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .disabled[_ngcontent-%COMP%]{color:var(--text-secondary, #6A737D)!important;pointer-events:none}.dd-list[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .value[_ngcontent-%COMP%]{display:flex;justify-content:space-between;align-items:center}.dd-list[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .value[_ngcontent-%COMP%]   .primary[_ngcontent-%COMP%], .dd-list[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .value[_ngcontent-%COMP%]   .secondary[_ngcontent-%COMP%]{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-primary, #181F33)}.dd-list[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .reason[_ngcontent-%COMP%]{font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-secondary, #6A737D)}.dd-list[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]:hover:not(.disabled){background:var(--brand-primary-hover, #F0F3FA)}.dd-list[_ngcontent-%COMP%]   .data-not-found[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;font-size:16px;padding:8px}.dd-list-pd[_ngcontent-%COMP%]{padding:unset}.chip[_ngcontent-%COMP%]{display:inline-flex;align-items:center;background:var(--border-primary, #E0E0E0);overflow-wrap:anywhere;cursor:default}.chip[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{color:var(--text-primary, #181F33)}.chip-md[_ngcontent-%COMP%]{border-radius:16px;padding:4px 12px}.chip-sm[_ngcontent-%COMP%]{border-radius:6px;padding:4px 8px;text-transform:uppercase}.ip-md[_ngcontent-%COMP%]{padding-top:8px;padding-bottom:8px}.ip-sm[_ngcontent-%COMP%]{padding-top:3px;padding-bottom:3px}.status-container[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;height:128px}.status-container[_ngcontent-%COMP%]   p[_ngcontent-%COMP%]{text-align:center}  #spinner{position:relative!important}"] }); }
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(18, _c6, ctx.size() === "md", ctx.size() === "sm"))("placeholder", ctx.placeholder())("formControl", ctx.searchInput);
+            i0.ɵɵattribute("tabindex", 0)("oncopy", ctx.disableCopyPaste() ? "return false;" : null)("onpaste", ctx.disableCopyPaste() ? "return false;" : null)("oncut", ctx.disableCopyPaste() ? "return false;" : null);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.searchInput.value == null ? null : ctx.searchInput.value.length);
+        } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2.NgTemplateOutlet, i2.NgStyle, i3.DefaultValueAccessor, i3.NgControlStatus, i3.FormControlDirective, i4.LoaderComponent, i5.CdkTrapFocus], styles: [".dd-wrapper[_ngcontent-%COMP%]{background:#fff;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:4px;display:block;cursor:pointer;outline:none}.dd-wrapper.opened[_ngcontent-%COMP%], .dd-wrapper[_ngcontent-%COMP%]:hover{background:#f5f5f5}.dd-wrapper[_ngcontent-%COMP%]   .selected-list[_ngcontent-%COMP%]{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:4px;padding:8px 16px}.dd-wrapper[_ngcontent-%COMP%]:focus-within{border-color:#0937b2;background:#f5f5f5}.dd-wrapper.disabled[_ngcontent-%COMP%], .dd-wrapper.readonly[_ngcontent-%COMP%]{pointer-events:none}.search-input[_ngcontent-%COMP%]{position:relative;border-radius:8px}.search-input[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]{box-sizing:border-box;outline:none;padding-left:40px;padding-right:24px;background-color:transparent;color:#181f33;border-radius:inherit;border:1px solid transparent;width:100%}.search-input[_ngcontent-%COMP%]   span[_ngcontent-%COMP%], .search-input[_ngcontent-%COMP%]   .custom-icon[_ngcontent-%COMP%]{position:absolute;top:50%;transform:translateY(-50%);font-size:24px;line-height:24px;height:24px;left:8px}.search-input[_ngcontent-%COMP%]   .croos-icon[_ngcontent-%COMP%]{position:absolute;top:50%;transform:translateY(-50%);font-size:16px;width:24px;line-height:16px;height:16px;right:0}.dd-list[_ngcontent-%COMP%]{padding:8px 0;max-height:200px;background:#fff;box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:8px;min-width:100%;overflow-y:auto}.dd-list[_ngcontent-%COMP%]::-webkit-scrollbar{width:8px;border-radius:4px}.dd-list[_ngcontent-%COMP%]::-webkit-scrollbar-track{background:#fff;border-radius:4px}.dd-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:#929dab;border-radius:4px}.dd-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover{background:#929dab}.dd-list[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]{padding:8px 16px;cursor:pointer}.dd-list[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .disabled[_ngcontent-%COMP%]{color:#6a737d!important;pointer-events:none}.dd-list[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .value[_ngcontent-%COMP%]{display:flex;justify-content:space-between;align-items:center}.dd-list[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .value[_ngcontent-%COMP%]   .primary[_ngcontent-%COMP%], .dd-list[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .value[_ngcontent-%COMP%]   .secondary[_ngcontent-%COMP%]{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.dd-list[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .reason[_ngcontent-%COMP%]{font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#6a737d}.dd-list[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]:hover:not(.disabled){background:#f5f7fc}.dd-list[_ngcontent-%COMP%]   .data-not-found[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;font-size:16px;padding:8px}.dd-list-pd[_ngcontent-%COMP%]{padding:unset}.chip[_ngcontent-%COMP%]{display:inline-flex;align-items:center;background:#e0e0e0;overflow-wrap:anywhere;cursor:default}.chip[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{color:#181f33}.chip-md[_ngcontent-%COMP%]{border-radius:16px;padding:4px 12px}.chip-sm[_ngcontent-%COMP%]{border-radius:6px;padding:4px 8px;text-transform:uppercase}.ip-md[_ngcontent-%COMP%]{padding-top:8px;padding-bottom:8px}.ip-sm[_ngcontent-%COMP%]{padding-top:3px;padding-bottom:3px}.status-container[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;height:128px}.status-container[_ngcontent-%COMP%]   p[_ngcontent-%COMP%]{text-align:center}  #spinner{position:relative!important}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AsyncDropdownComponent, [{
         type: Component,
-        args: [{ selector: "mis-async-search-dropdown", template: "<div class=\"dd-wrapper\" [ngClass]=\"{ opened: opened, disabled: disabled, readonly: readonly }\" [style.width]=\"width\" #ddBtn>\n  <div class=\"selected-list\" *ngIf=\"multi && selections.size > 0\">\n    <div class=\"chip\" [ngClass]=\"{'chip-md': size === 'md', 'chip-sm': size === 'sm'}\" *ngFor=\"let item of selectedItems\">\n      <span [ngClass]=\"{'h6': size === 'md', 'h8-b': size === 'sm'}\" [ngStyle]=\"{ 'margin-right': '4px'}\">{{item[displayKey]}}</span>\n      <span style=\"cursor: pointer;\" (click)=\"removeItem(item)\" tabindex=\"0\" (keyup.enter)=\"removeItem(item)\" [ngStyle]=\"{\n        'cursor': 'pointer',\n        'font-size': size === 'sm' ? '12px' : '14px'\n      }\" class=\"icon-ic-navigation-cancel-24\"></span>\n    </div>\n  </div>\n  <div class=\"search-input\">\n    <div *ngIf=\"customPlaceholderIcon; else defaultSearchIcon\" class=\"custom-icon\">\n      <img [src]=\"customPlaceholderIcon\" alt=\"customIcon\" />\n    </div>\n    <ng-template #defaultSearchIcon>\n      <span class=\"icon-ic-action-search-24\"></span>\n    </ng-template>\n    <input *ngIf=\"disableCopyPaste; else enableCopyPaste\" [ngClass]=\"{'ip-md': size === 'md', 'ip-sm': size === 'sm'}\" oncopy=\"return false;\" onpaste=\"return false\" oncut=\"return false\" tabindex=\"0\" type=\"text\" class=\"black-text h6\" #input [placeholder]=\"placeholder\" [formControl]=\"searchInput\" (focus)=\"defaultCall()\" (keyup.enter)=\"enablePopUpOnTab()\"/>\n    <ng-template #enableCopyPaste>\n      <input [ngClass]=\"{'ip-md': size === 'md', 'ip-sm': size === 'sm'}\" tabindex=\"0\" type=\"text\" class=\"black-text h6\" #input [placeholder]=\"placeholder\" [formControl]=\"searchInput\" (focus)=\"defaultCall()\" (keyup.enter)=\"enablePopUpOnTab()\" />\n    </ng-template>\n    <div class=\"icon-ic-navigation-cancel-24 croos-icon\" *ngIf=\"searchInput?.value?.length\" tabindex=\"0\" (click)=\"removeInputValue()\" (keyup.enter)=\"removeInputValue()\"></div>\n  </div>\n</div>\n\n<ng-template #dd>\n  <div class=\"dd-list\" [ngStyle]=\"{'max-height':height, 'width': dropdownListWidth}\"  [ngClass]=\"{'dd-list-pd':data.length === 0}\" tabindex=\"0\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"openPopUpOnTab\">\n    <ng-container *ngIf=\"loading\">\n      <ng-container\n        *ngIf=\"customLoader; else defaultLoader\"\n        [ngTemplateOutlet]=\"customLoader\"\n      ></ng-container>\n      <ng-template #defaultLoader>\n        <div class=\"status-container\" *ngIf=\"loading && !customLoader\">\n          <mis-loader [mobileView]=\"true\"></mis-loader>\n        </div>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"error\">\n      <div class=\"status-container\">\n        <p>Unknown error has occurred, <br> Please try again later.</p>\n      </div>\n    </ng-container>\n    <div *ngIf=\"!loading && !error && data.length > 0\">\n      <ng-container *ngFor=\"let item of data\">\n        <div (click)=\"selectData(item, false)\" (keyup.enter)=\"selectData(item, false)\"> \n          <div tabindex=\"-1\" cdkFocusInitial></div>  \n          <div\n          [tabindex]=\"openPopUpOnTab ? 0 : -1\"\n          *ngIf=\"customItem; else standardItem\"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"customItem\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          ></ng-container>\n        </div>\n          <ng-template #standardItem>\n            <div tabindex=\"-1\" cdkFocusInitial></div>  \n            <div class=\"item\" (click)=\"selectData(item, false)\" [tabindex]=\"openPopUpOnTab ? 0 : -1\" (keyup.enter)=\"selectData(item, false)\">\n              <div class=\"value\">\n                <div class=\"primary\">\n                  {{ item[displayKey] }}\n                </div>\n                <div class=\"secondary\">\n                  {{ item[secondaryDisplayKey] }}\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </div>\n      </ng-container>\n    </div>\n    <div *ngIf=\"!loading && !error && data.length === 0 && searchInput.value\">\n      <div class=\"data-not-found\">No Data Available</div>\n  </div>\n  </div>\n</ng-template>\n", styles: [":root{--pmry-200: #99BAF7;--pmry-100: #CBDDFB;--pmry-500: #0937B2;--pmry-400: #3C68D0;--pmry-600: #062A99;--pmry-700: #041F80;--pmry-300: #638FE7;--pmry-800: #021567;--pmry-900: #010F55;--sec-d-purple: #40447F;--sec-maroon: #6B034E;--sec-mud-red: #B23600;--sec-orange: #ED711C;--sec-purple: #815FD5;--sec-teal: #10ADAE;--sec-yellow: #D4900C;--sec-green: #547F40;--sec-bright-green: #27D22E;--sec-dark-teal: #035F6B;--sec-chocolate: #7C2F33;--sec-rube-pink: #C13D6D;--sec-cerulean: #0087B2;--sem-error: #B00020;--sem-info: #0091FF;--sem-warning: #FF9D00;--sem-success: #38AF49;--grey-bg-1: #FAFAFA;--grey-bg: #F5F5F5;--grey-seperators: #E0E0E0;--grey-disabled: #C8CDD3;--grey-hover: #F5F7FC;--grey-pressed: #E6EBF7;--grey-row: #F5F7FC;--dec-light-yellow: #F4E7C3;--dec-light-purple: #DACFF9;--dec-light-green: #E4F5E9;--dec-light-green2: #F1FFF3;--dec-light-pink: #FAE1EA;--dec-: #F4CBC1;--dec-lt-orange: #FAEFED;--dec-light-blue: #CFECF9;--dec-row-selection: #F1FDF8;--dec-row-selection2: #F2FBFF;--dec-row-lines: #D3E1E9;--text-white: #FFFFFF;--text-muted: #6A737D;--text-black: #181F33;--MR-solid-blue2:#C8D5F6;--MR-solid-purple:#C9C3FB;--MR-solid-orange:#EEAC9F;--MR-solid-green:#ACDADA;--MR-solid-brown:#E8C8AF;--MR-solid-yellow:#FFEFC7;--MR-solid-blue:#BBE6FF;--MR-solid-pink:#FFC6F2;--tr-hover:#F0F3FA;--tr-pressed:#DAE1F3;--brand-primary: #0937B2;--brand-primary-light: #3C68D0;--brand-primary-dark: #062A99;--brand-primary-darker: #041F80;--brand-primary-lighter: #638FE7;--brand-primary-lightest: #CBDDFB;--brand-primary-hover: #F0F3FA;--brand-primary-active: #DAE1F3;--brand-secondary: #ED711C;--brand-secondary-light: #F09E65;--brand-secondary-dark: #B23600;--brand-secondary-lighter: #FFC6F2;--brand-accent: #10ADAE;--brand-accent-light: #16CBBC;--brand-accent-dark: #035F6B;--brand-accent-lighter: #ACDADA;--brand-success: #38AF49;--brand-success-light: #4CAF50;--brand-success-dark: #216531;--brand-success-lighter: #E4F5E9;--brand-success-lightest: #F1FFF3;--brand-error: #B00020;--brand-error-light: #F04E4E;--brand-error-dark: #A60060;--brand-error-lighter: #FAE1EA;--brand-error-lightest: #FDF2F2;--brand-warning: #FF9D00;--brand-warning-light: #D4900C;--brand-warning-dark: #624000;--brand-warning-lighter: #F4E7C3;--brand-warning-lightest: #FAEFED;--brand-info: #0091FF;--brand-info-light: #35A1FF;--brand-info-dark: #0087B2;--brand-info-lighter: #CFECF9;--text-primary: #181F33;--text-secondary: #6A737D;--text-tertiary: #929DAB;--text-disabled: #929DAB;--text-primary-87: rgba(24, 31, 51, .87);--text-primary-60: rgba(24, 31, 51, .6);--text-primary-38: rgba(24, 31, 51, .38);--text-primary-12: rgba(24, 31, 51, .12);--bg-primary: #FFFFFF;--bg-secondary: #FAFAFA;--bg-tertiary: #F5F5F5;--bg-overlay: rgba(0, 0, 0, .32);--bg-overlay-light: rgba(0, 0, 0, .12);--bg-overlay-lighter: rgba(0, 0, 0, .08);--bg-overlay-lightest: rgba(0, 0, 0, .04);--border-primary: #E0E0E0;--border-secondary: #D6DCE2;--border-tertiary: #C8CDD3;--border-light: #F1F4F8;--border-primary-12: rgba(0, 0, 0, .12);--border-primary-08: rgba(0, 0, 0, .08);--border-primary-06: rgba(0, 0, 0, .06);--shadow-primary: rgba(0, 0, 0, .12);--shadow-secondary: rgba(0, 0, 0, .08);--shadow-tertiary: rgba(0, 0, 0, .04);--shadow-light: rgba(0, 0, 0, .06);--status-available: #929DAB;--status-unavailable: #CCD3DA;--status-hotseat: #857BFF;--status-multiteam: #10ADAE;--status-selected: #10ADAE;--status-upcoming: #D4900C;--status-room: #38AF49;--status-room-booked: #B23600;--status-room-unavailable: #181F33;--team-color-1: #F8C52E;--team-color-2: #FA8E20;--team-color-3: #987CDD;--team-color-4: #16CBBC;--team-color-5: #E65010;--team-color-6: #A60060;--team-color-7: #ED323B;--team-color-8: #35A1FF;--team-color-9: #80D348}.dd-wrapper{background:var(--bg-primary, #FFFFFF);border:1px solid var(--border-primary, #E0E0E0);box-sizing:border-box;border-radius:4px;display:block;cursor:pointer;outline:none}.dd-wrapper.opened,.dd-wrapper:hover{background:var(--bg-tertiary, #F5F5F5)}.dd-wrapper .selected-list{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:4px;padding:8px 16px}.dd-wrapper:focus-within{border-color:var(--brand-primary, #0937B2);background:var(--bg-tertiary, #F5F5F5)}.dd-wrapper.disabled,.dd-wrapper.readonly{pointer-events:none}.search-input{position:relative;border-radius:8px}.search-input input{box-sizing:border-box;outline:none;padding-left:40px;padding-right:24px;background-color:transparent;color:var(--text-primary, #181F33);border-radius:inherit;border:1px solid transparent;width:100%}.search-input span,.search-input .custom-icon{position:absolute;top:50%;transform:translateY(-50%);font-size:24px;line-height:24px;height:24px;left:8px}.search-input .croos-icon{position:absolute;top:50%;transform:translateY(-50%);font-size:16px;width:24px;line-height:16px;height:16px;right:0}.dd-list{padding:8px 0;max-height:200px;background:var(--bg-primary, #FFFFFF);box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:8px;min-width:100%;overflow-y:auto}.dd-list::-webkit-scrollbar{width:8px;border-radius:4px}.dd-list::-webkit-scrollbar-track{background:var(--bg-primary, #FFFFFF);border-radius:4px}.dd-list::-webkit-scrollbar-thumb{background:var(--text-tertiary, #929DAB);border-radius:4px}.dd-list::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary, #929DAB)}.dd-list .item{padding:8px 16px;cursor:pointer}.dd-list .item .disabled{color:var(--text-secondary, #6A737D)!important;pointer-events:none}.dd-list .item .value{display:flex;justify-content:space-between;align-items:center}.dd-list .item .value .primary,.dd-list .item .value .secondary{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-primary, #181F33)}.dd-list .item .reason{font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-secondary, #6A737D)}.dd-list .item:hover:not(.disabled){background:var(--brand-primary-hover, #F0F3FA)}.dd-list .data-not-found{display:flex;justify-content:center;align-items:center;font-size:16px;padding:8px}.dd-list-pd{padding:unset}.chip{display:inline-flex;align-items:center;background:var(--border-primary, #E0E0E0);overflow-wrap:anywhere;cursor:default}.chip span{color:var(--text-primary, #181F33)}.chip-md{border-radius:16px;padding:4px 12px}.chip-sm{border-radius:6px;padding:4px 8px;text-transform:uppercase}.ip-md{padding-top:8px;padding-bottom:8px}.ip-sm{padding-top:3px;padding-bottom:3px}.status-container{display:flex;justify-content:center;align-items:center;height:128px}.status-container p{text-align:center}::ng-deep #spinner{position:relative!important}\n"] }]
-    }], () => [{ type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.NgZone }], { height: [{
-            type: Input
-        }], width: [{
-            type: Input
-        }], size: [{
-            type: Input
-        }], httpStream: [{
-            type: Input
-        }], displayKey: [{
-            type: Input
-        }], secondaryDisplayKey: [{
-            type: Input
-        }], placeholder: [{
-            type: Input
-        }], debounceTime: [{
-            type: Input
-        }], minInputLength: [{
-            type: Input
-        }], multi: [{
-            type: Input
-        }], uniqueKey: [{
-            type: Input
-        }], control: [{
-            type: Input
-        }], disabled: [{
-            type: Input
-        }], readonly: [{
-            type: Input
-        }], disableCopyPaste: [{
-            type: Input
-        }], dropdownListWidth: [{
-            type: Input
-        }], dropdownListPosition: [{
-            type: Input
-        }], customPlaceholderIcon: [{
-            type: Input
-        }], origin: [{
+        args: [{ selector: 'mis-async-search-dropdown', template: "<div class=\"dd-wrapper\"\n     [ngClass]=\"{ opened: opened(), disabled: disabled(), readonly: readonly() }\"\n     [style.width]=\"width()\"\n     #ddBtn>\n  \n  <!-- Selected chips for multi-select -->\n  <div class=\"selected-list\" *ngIf=\"multi() && selectedItems.length > 0\">\n    <div class=\"chip\"\n         [ngClass]=\"{ 'chip-md': size() === 'md', 'chip-sm': size() === 'sm' }\"\n         *ngFor=\"let item of selectedItems\">\n      <span [ngClass]=\"{ 'h6': size() === 'md', 'h8-b': size() === 'sm' }\"\n            style=\"margin-right: 4px;\">\n        {{ item[displayKey()] }}\n      </span>\n      <span class=\"icon-ic-navigation-cancel-24\"\n            [ngStyle]=\"{ cursor: 'pointer', 'font-size': size() === 'sm' ? '12px' : '14px' }\"\n            tabindex=\"0\"\n            (click)=\"removeItem(item)\"\n            (keyup.enter)=\"removeItem(item)\">\n      </span>\n    </div>\n  </div>\n\n  <!-- Search input -->\n  <div class=\"search-input\">\n    <!-- Placeholder icon -->\n    <div *ngIf=\"customPlaceholderIcon(); else defaultSearchIcon\" class=\"custom-icon\">\n      <img [src]=\"customPlaceholderIcon()\" alt=\"customIcon\" />\n    </div>\n    <ng-template #defaultSearchIcon>\n      <span class=\"icon-ic-action-search-24\"></span>\n    </ng-template>\n\n    <!-- Input field -->\n    <input [ngClass]=\"{ 'ip-md': size() === 'md', 'ip-sm': size() === 'sm' }\"\n           [placeholder]=\"placeholder()\"\n           [formControl]=\"searchInput\"\n           [attr.tabindex]=\"0\"\n           type=\"text\"\n           class=\"black-text h6\"\n           #input\n           (focus)=\"defaultCall()\"\n           (keyup.enter)=\"enablePopUpOnTab()\"\n           [attr.oncopy]=\"disableCopyPaste() ? 'return false;' : null\"\n           [attr.onpaste]=\"disableCopyPaste() ? 'return false;' : null\"\n           [attr.oncut]=\"disableCopyPaste() ? 'return false;' : null\"/>\n\n    <!-- Clear input -->\n    <div class=\"icon-ic-navigation-cancel-24 croos-icon\"\n         *ngIf=\"searchInput.value?.length\"\n         tabindex=\"0\"\n         (click)=\"removeInputValue()\"\n         (keyup.enter)=\"removeInputValue()\">\n    </div>\n  </div>\n</div>\n\n<!-- Dropdown template -->\n<ng-template #dd>\n  <div class=\"dd-list\"\n       [ngStyle]=\"{ 'max-height': height(), 'width': dropdownListWidth() }\"\n       [ngClass]=\"{ 'dd-list-pd': data().length === 0 }\"\n       tabindex=\"0\"\n       cdkTrapFocus\n       [cdkTrapFocusAutoCapture]=\"openPopUpOnTab()\">\n\n    <!-- Loader -->\n    <ng-container *ngIf=\"loading()\">\n      <ng-container *ngIf=\"customLoader; else defaultLoader\" [ngTemplateOutlet]=\"customLoader\"></ng-container>\n      <ng-template #defaultLoader>\n        <div class=\"status-container\" *ngIf=\"loading() && !customLoader\">\n          <mis-loader [mobileView]=\"true\"></mis-loader>\n        </div>\n      </ng-template>\n    </ng-container>\n\n    <!-- Error -->\n    <ng-container *ngIf=\"error()\">\n      <div class=\"status-container\">\n        <p>Unknown error has occurred, <br/> Please try again later.</p>\n      </div>\n    </ng-container>\n\n    <!-- Data list -->\n    <div *ngIf=\"!loading() && !error() && data().length > 0\">\n      <ng-container *ngFor=\"let item of data()\">\n        <div (click)=\"selectData(item, false)\" (keyup.enter)=\"selectData(item, false)\">\n          <div tabindex=\"-1\" cdkFocusInitial></div>\n\n          <!-- Custom item -->\n          <ng-container *ngIf=\"customItem; else standardItem\">\n            <ng-container [ngTemplateOutlet]=\"customItem\"\n                          [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n          </ng-container>\n\n          <!-- Standard item -->\n          <ng-template #standardItem>\n            <div tabindex=\"-1\" cdkFocusInitial></div>\n            <div class=\"item\"\n                 [tabindex]=\"openPopUpOnTab() ? 0 : -1\"\n                 (click)=\"selectData(item, false)\"\n                 (keyup.enter)=\"selectData(item, false)\">\n              <div class=\"value\">\n                <div class=\"primary\">{{ item[displayKey()] }}</div>\n                <div class=\"secondary\">{{ item[secondaryDisplayKey()] }}</div>\n              </div>\n            </div>\n          </ng-template>\n        </div>\n      </ng-container>\n    </div>\n\n    <!-- No data -->\n    <div *ngIf=\"!loading() && !error() && data().length === 0 && searchInput.value\">\n      <div class=\"data-not-found\">No Data Available</div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".dd-wrapper{background:#fff;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:4px;display:block;cursor:pointer;outline:none}.dd-wrapper.opened,.dd-wrapper:hover{background:#f5f5f5}.dd-wrapper .selected-list{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:4px;padding:8px 16px}.dd-wrapper:focus-within{border-color:#0937b2;background:#f5f5f5}.dd-wrapper.disabled,.dd-wrapper.readonly{pointer-events:none}.search-input{position:relative;border-radius:8px}.search-input input{box-sizing:border-box;outline:none;padding-left:40px;padding-right:24px;background-color:transparent;color:#181f33;border-radius:inherit;border:1px solid transparent;width:100%}.search-input span,.search-input .custom-icon{position:absolute;top:50%;transform:translateY(-50%);font-size:24px;line-height:24px;height:24px;left:8px}.search-input .croos-icon{position:absolute;top:50%;transform:translateY(-50%);font-size:16px;width:24px;line-height:16px;height:16px;right:0}.dd-list{padding:8px 0;max-height:200px;background:#fff;box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:8px;min-width:100%;overflow-y:auto}.dd-list::-webkit-scrollbar{width:8px;border-radius:4px}.dd-list::-webkit-scrollbar-track{background:#fff;border-radius:4px}.dd-list::-webkit-scrollbar-thumb{background:#929dab;border-radius:4px}.dd-list::-webkit-scrollbar-thumb:hover{background:#929dab}.dd-list .item{padding:8px 16px;cursor:pointer}.dd-list .item .disabled{color:#6a737d!important;pointer-events:none}.dd-list .item .value{display:flex;justify-content:space-between;align-items:center}.dd-list .item .value .primary,.dd-list .item .value .secondary{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.dd-list .item .reason{font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#6a737d}.dd-list .item:hover:not(.disabled){background:#f5f7fc}.dd-list .data-not-found{display:flex;justify-content:center;align-items:center;font-size:16px;padding:8px}.dd-list-pd{padding:unset}.chip{display:inline-flex;align-items:center;background:#e0e0e0;overflow-wrap:anywhere;cursor:default}.chip span{color:#181f33}.chip-md{border-radius:16px;padding:4px 12px}.chip-sm{border-radius:6px;padding:4px 8px;text-transform:uppercase}.ip-md{padding-top:8px;padding-bottom:8px}.ip-sm{padding-top:3px;padding-bottom:3px}.status-container{display:flex;justify-content:center;align-items:center;height:128px}.status-container p{text-align:center}::ng-deep #spinner{position:relative!important}\n"] }]
+    }], () => [{ type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i0.Injector }], { origin: [{
             type: ViewChild,
-            args: ["ddBtn", { static: false }]
-        }], input: [{
+            args: ['ddBtn', { static: false }]
+        }], inputRef: [{
             type: ViewChild,
-            args: ["input", { static: false }]
+            args: ['input', { static: false }]
         }], dd: [{
             type: ViewChild,
-            args: ["dd", { static: false }]
+            args: ['dd', { static: false }]
         }], customItem: [{
             type: ContentChild,
-            args: ["misCustomItem", { static: false }]
+            args: ['misCustomItem', { static: false }]
         }], customLoader: [{
             type: ContentChild,
-            args: ["asyncCustomLoader", { static: false }]
-        }], onSelect: [{
-            type: Output
-        }], selections: [{
-            type: Input
-        }], searchValue: [{
-            type: Input
-        }], searchQueryChange: [{
-            type: Output
-        }], clear: [{
-            type: Output
-        }], itemSelected: [{
-            type: Output
-        }], itemRemoved: [{
-            type: Output
+            args: ['asyncCustomLoader', { static: false }]
         }], handleKeyDown: [{
             type: HostListener,
             args: ['document:keydown', ['$event']]