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

package/fesm2022/mis-crystal-design-system-multi-select-dropdown.mjs

@@ -1,22 +1,21 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
+import { inject, ElementRef, ViewContainerRef, input, output, signal, computed, effect, Component, ViewChild, NgModule } from '@angular/core';
 import { TemplatePortal } from '@angular/cdk/portal';
-import * as i1 from '@angular/cdk/overlay';
-import { ConnectionPositionPair, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
-import * as i2 from '@angular/common';
+import { Overlay, ConnectionPositionPair, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from '@angular/forms';
+import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i4 from 'mis-crystal-design-system/checkbox';
+import * as i3 from 'mis-crystal-design-system/checkbox';
 import { CheckboxModule } from 'mis-crystal-design-system/checkbox';
-import * as i5 from 'mis-crystal-design-system/button';
+import * as i4 from 'mis-crystal-design-system/button';
 import { ButtonModule } from 'mis-crystal-design-system/button';
 
 const _c0 = ["select"];
 const _c1 = ["popupContainer"];
 const _c2 = (a0, a1) => ({ height: a0, width: a1 });
-const _c3 = a0 => ({ background: a0 });
-const _c4 = a0 => ({ transform: a0 });
+const _c3 = a0 => ({ "background": a0 });
+const _c4 = a0 => ({ "transform": a0 });
 const _c5 = (a0, a1) => ({ "height": a0, width: a1 });
 const _c6 = (a0, a1) => ({ "position-left": a0, "position-right": a1 });
 const _c7 = (a0, a1, a2) => ({ paddingLeft: a0, border: a1, paddingRight: a2 });
@@ -29,7 +28,7 @@ function MultiSelectDropdownComponent_ng_container_4_p_3_Template(rf, ctx) { if
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.localSelectedItems == null ? null : ctx_r1.localSelectedItems.length, " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.internalSelectedItems().length, " ");
 } }
 function MultiSelectDropdownComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -41,9 +40,9 @@ function MultiSelectDropdownComponent_ng_container_4_Template(rf, ctx) { if (rf
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.label);
+    i0.ɵɵtextInterpolate(ctx_r1.label());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.showSelectedCount && (ctx_r1.localSelectedItems == null ? null : ctx_r1.localSelectedItems.length) > 0);
+    i0.ɵɵproperty("ngIf", ctx_r1.showSelectedCount() && ctx_r1.internalSelectedItems().length > 0);
 } }
 function MultiSelectDropdownComponent_ng_container_5_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -55,7 +54,7 @@ function MultiSelectDropdownComponent_ng_container_5_Template(rf, ctx) { if (rf
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.customLabelTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.customLabelTemplate());
 } }
 function MultiSelectDropdownComponent_ng_template_8_div_1__svg_svg_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
@@ -83,11 +82,11 @@ function MultiSelectDropdownComponent_ng_template_8_div_1_Template(rf, ctx) { if
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.isSearchInputFocused);
+    i0.ɵɵproperty("ngIf", !ctx_r1.isSearchInputFocused());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngModel", ctx_r1.searchInput)("ngStyle", i0.ɵɵpureFunction3(5, _c7, ctx_r1.isSearchInputFocused ? "12px" : "45px", ctx_r1.isSearchInputFocused ? "1px solid #0937B2" : "1px solid #e0e0e0", ctx_r1.isSearchInputFocused ? "45px" : "10px"))("placeholder", ctx_r1.isSearchInputFocused ? "" : ctx_r1.searchInputPlaceholder);
+    i0.ɵɵproperty("ngModel", ctx_r1.searchInput())("ngStyle", i0.ɵɵpureFunction3(5, _c7, ctx_r1.isSearchInputFocused() ? "12px" : "45px", ctx_r1.isSearchInputFocused() ? "1px solid #0937B2" : "1px solid #e0e0e0", ctx_r1.isSearchInputFocused() ? "45px" : "10px"))("placeholder", ctx_r1.isSearchInputFocused() ? "" : ctx_r1.searchInputPlaceholder());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.isSearchInputFocused);
+    i0.ɵɵproperty("ngIf", ctx_r1.isSearchInputFocused());
 } }
 function MultiSelectDropdownComponent_ng_template_8_div_3_div_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 31);
@@ -127,7 +126,7 @@ function MultiSelectDropdownComponent_ng_template_8_div_4_Template(rf, ctx) { if
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.searchInput === "" ? ctx_r1.noDataMessage : "No results", " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.searchInput() === "" ? ctx_r1.noDataMessage() : "No results", " ");
 } }
 function MultiSelectDropdownComponent_ng_template_8_div_5_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
@@ -159,262 +158,251 @@ function MultiSelectDropdownComponent_ng_template_8_Template(rf, ctx) { if (rf &
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction2(6, _c5, ctx_r1.dropdownListHeight, ctx_r1.dropdownListWidth))("ngClass", i0.ɵɵpureFunction2(9, _c6, ctx_r1.dropdownListPosition === "Left", ctx_r1.dropdownListPosition === "Right"));
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction2(6, _c5, ctx_r1.dropdownListHeight(), ctx_r1.dropdownListWidth()))("ngClass", i0.ɵɵpureFunction2(9, _c6, ctx_r1.dropdownListPosition() === "Left", ctx_r1.dropdownListPosition() === "Right"));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.searchEnabled);
+    i0.ɵɵproperty("ngIf", ctx_r1.searchEnabled());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r1.searchInput ? ctx_r1.searchData : ctx_r1.localData);
+    i0.ɵɵproperty("ngForOf", ctx_r1.displayData());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", (ctx_r1.searchInput ? ctx_r1.searchData : ctx_r1.localData).length === 0);
+    i0.ɵɵproperty("ngIf", ctx_r1.displayData().length === 0);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.localData.length !== 0 && !ctx_r1.hideApplyButton);
+    i0.ɵɵproperty("ngIf", ctx_r1.internalData().length !== 0 && !ctx_r1.hideApplyButton());
 } }
 class MultiSelectDropdownComponent {
-    set data(values) {
-        this.localData = values?.map(item => {
-            return { ...item, checked: false };
-        }) || [];
-    }
-    set selectedItems(values) {
-        this.handlerSetLocalSelectedItems(values);
-    }
-    constructor(eRef, overlay, viewContainerRef, ngZone) {
-        this.eRef = eRef;
-        this.overlay = overlay;
-        this.viewContainerRef = viewContainerRef;
-        this.ngZone = ngZone;
-        this.searchInput = "";
-        this.isOpen = false;
-        this.localSelectedItems = [];
-        this.localData = [];
-        this.searchData = [];
-        this.isSearchInputFocused = false;
-        this.SELECT_ALL_ENUM = "SELECT_ALL_ENABLED";
-        this.label = "Select";
-        this.height = "";
-        this.width = "";
-        this.dropdownListHeight = "";
-        this.dropdownListWidth = "";
-        this.dropdownListPosition = "Left";
-        this.enableSelectAll = false;
-        this.searchEnabled = true;
-        this.showSelectedCount = false;
-        this.noDataMessage = "No Data";
-        this.options = {
-            sortLabels: true
-        };
-        this.hideApplyButton = false;
-        this.searchInputPlaceholder = "Search Keyword";
-        this.onChange = new EventEmitter();
-    }
-    ngOnInit() { }
-    handlerSetLocalSelectedItems(values) {
-        this.localSelectedItems = values || [];
-        this.localData = this.localData?.map(item => {
-            if (item?.value === this.SELECT_ALL_ENUM && values?.length === this.localData?.length - 1) {
-                return { ...item, checked: true };
+    constructor() {
+        // Dependencies Injection
+        this.eRef = inject(ElementRef);
+        this.overlay = inject(Overlay);
+        this.viewContainerRef = inject(ViewContainerRef);
+        // Signal-based Inputs
+        this.data = input([]);
+        this.selectedItems = input([]);
+        this.label = input('Select');
+        this.height = input('');
+        this.width = input('');
+        this.dropdownListHeight = input('');
+        this.dropdownListWidth = input('');
+        this.dropdownListPosition = input('Left');
+        this.enableSelectAll = input(false);
+        this.searchEnabled = input(true);
+        this.showSelectedCount = input(false);
+        this.noDataMessage = input('No Data');
+        this.options = input({
+            sortLabels: true,
+        });
+        this.hideApplyButton = input(false);
+        this.searchInputPlaceholder = input('Search Keyword');
+        this.customLabelTemplate = input();
+        // Signal-based Output
+        this.onChange = output();
+        // Internal Signals for component state
+        this.isOpen = signal(false);
+        this.searchInput = signal('');
+        this.isSearchInputFocused = signal(false);
+        this.internalSelectedItems = signal([]);
+        this.internalData = signal([]);
+        // Constants
+        this.SELECT_ALL_ENUM = 'SELECT_ALL_ENABLED';
+        /**
+         * Computed signal for the data to be displayed in the dropdown list.
+         * Filters based on search input and sorts if the option is enabled.
+         */
+        this.displayData = computed(() => {
+            let dataToDisplay = this.searchEnabled() && this.searchInput() ?
+                this.filterByValue(this.internalData(), this.searchInput()) :
+                this.internalData();
+            if (this.options().sortLabels) {
+                dataToDisplay = this.sortData(dataToDisplay);
             }
-            if (values?.some(base => base?.value === item?.value)) {
-                return { ...item, checked: true };
+            return dataToDisplay;
+        });
+        effect(() => {
+            this.handleInputChanges();
+        }, { allowSignalWrites: true });
+        effect(() => {
+            if (this.isOpen()) {
+                this.openDropdown(this.popupContainer, this.selectElement?.nativeElement);
             }
             else {
-                if (item?.value !== this.SELECT_ALL_ENUM || !this.hideApplyButton) {
-                    return { ...item, checked: false };
+                this.overlayRef?.detach();
+            }
+        });
+    }
+    /**
+     * Effect to manage the component's internal state based on external inputs.
+     */
+    handleInputChanges() {
+        const values = this.data();
+        const selected = this.selectedItems();
+        const formattedData = values?.map(item => ({
+            ...item,
+            checked: selected?.some(s => s.value === item.value) ?? false
+        })) || [];
+        this.internalData.set(formattedData);
+        this.internalSelectedItems.set(selected);
+        // Apply the 'select all' logic
+        this.internalData.update(currentData => {
+            const isSelectAll = this.enableSelectAll() && currentData.every(item => item.checked || item.value === this.SELECT_ALL_ENUM);
+            const selectAllItem = {
+                label: 'Select all',
+                value: this.SELECT_ALL_ENUM,
+                checked: isSelectAll
+            };
+            const hasSelectAll = currentData.some(t => t.value === this.SELECT_ALL_ENUM);
+            if (this.enableSelectAll()) {
+                if (!hasSelectAll) {
+                    return [selectAllItem, ...currentData];
                 }
                 else {
-                    return item;
+                    return currentData.map(item => item.value === this.SELECT_ALL_ENUM ? selectAllItem : item);
                 }
             }
-        }) || [];
-        this.localData = this.formatValues(this.localData);
+            else {
+                return currentData.filter(item => item.value !== this.SELECT_ALL_ENUM);
+            }
+        });
     }
-    searchInputFocused(isFocused) {
-        this.isSearchInputFocused = isFocused;
+    /**
+     * Helper function to sort the data.
+     */
+    sortData(data) {
+        const checkedValues = data.filter(a => a.checked);
+        const unCheckedValues = data.filter(a => !a.checked);
+        const sortFn = (a, b) => a.label > b.label ? 1 : -1;
+        return [
+            ...checkedValues.sort(sortFn),
+            ...unCheckedValues.sort(sortFn)
+        ].filter(t => t.value !== this.SELECT_ALL_ENUM);
     }
-    searchInputCanceled(event) {
-        event?.stopPropagation();
-        this.searchInput = "";
-        this.isSearchInputFocused = false;
+    /**
+     * Helper function to filter the data.
+     */
+    filterByValue(array, search) {
+        return array.filter(o => o?.label?.toLowerCase().includes(search.toLowerCase())) || [];
     }
+    /**
+     * Toggles the dropdown's open/close state.
+     */
     toggleDropdown() {
-        this.ngZone.run(() => {
-            this.isOpen = !this.isOpen;
-            if (this.isOpen) {
-                this.handlerSetLocalSelectedItems(this.localSelectedItems);
-                this.localData = this.formatValues(this.localData);
-            }
-            if (this.isOpen)
-                this.openDropdown(this.popupContainer, this.selectElement?.nativeElement);
-            else
-                this.onCancel();
+        this.isOpen.update(current => !current);
+    }
+    /**
+     * Toggles the checked state of a specific item.
+     * Handles the 'Select All' logic.
+     */
+    toggleSelectedItems(event, item) {
+        event?.stopPropagation();
+        if (this.enableSelectAll() && item.value === this.SELECT_ALL_ENUM) {
+            this.internalData.update(items => items.map(t => ({ ...t, checked: !item.checked })));
+        }
+        else {
+            this.internalData.update(items => {
+                const updatedItems = items.map(a => a.value === item.value ? { ...a, checked: !a.checked } : a);
+                const allChecked = updatedItems
+                    .filter(r => r.value !== this.SELECT_ALL_ENUM)
+                    .every(t => t.checked);
+                return updatedItems.map(a => a.value === this.SELECT_ALL_ENUM ? { ...a, checked: allChecked } : a);
+            });
+        }
+        if (this.hideApplyButton()) {
+            this.applyFilters();
+        }
+    }
+    /**
+     * Emits the selected items and closes the dropdown.
+     */
+    applyFilters() {
+        const selected = this.internalData()
+            .filter(a => a.checked && a.value !== this.SELECT_ALL_ENUM)
+            .map(item => {
+            const { checked, ...data } = item;
+            return data;
         });
+        // Use the signal output's emit method
+        this.onChange.emit(selected);
+        this.internalSelectedItems.set(selected);
+        if (!this.hideApplyButton()) {
+            this.isOpen.set(false);
+        }
+    }
+    /**
+     * Resets the dropdown to an empty state.
+     */
+    onReset() {
+        this.internalData.update(items => items.map(item => ({ ...item, checked: false })));
+        this.applyFilters();
+        this.isOpen.set(false);
+    }
+    /**
+     * Closes the dropdown and reverts any changes.
+     */
+    onCancel() {
+        this.isOpen.set(false);
+        this.searchInput.set('');
+        // Revert internal data to match the last selected items
+        this.handleInputChanges();
+    }
+    /**
+     * Toggles the focus state of the search input.
+     */
+    searchInputFocused(isFocused) {
+        this.isSearchInputFocused.set(isFocused);
+    }
+    /**
+     * Clears the search input and unfocuses it.
+     */
+    searchInputCanceled(event) {
+        event.stopPropagation();
+        this.searchInput.set('');
+        this.isSearchInputFocused.set(false);
     }
+    /**
+     * Handles the change event from the search input.
+     */
+    searchInputOnChange(newValue) {
+        this.searchInput.set(newValue);
+    }
+    /**
+     * Creates and displays the overlay for the dropdown list.
+     */
     openDropdown(template, origin) {
+        if (this.overlayRef && this.overlayRef.hasAttached()) {
+            return;
+        }
         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.dropdownListHeight)
-            this.overlayRef?.updateSize({ height: this.dropdownListHeight });
-        this.overlayRef?.attach(new TemplatePortal(template, this.viewContainerRef));
-        this.overlayRef?.backdropClick()?.subscribe(res => {
-            this.onCancel();
-        });
-    }
-    filterByValue(array, string) {
-        return array?.filter(o => o?.label?.toLowerCase()?.includes(string?.toLowerCase())) || [];
-    }
-    searchInputOnChange(newValue) {
-        this.searchInput = newValue;
-        if (newValue) {
-            this.searchData = this.filterByValue(this.localData, newValue);
-        }
-        else {
-            this.searchData = [];
-            this.searchInput = "";
+        if (this.dropdownListWidth()) {
+            this.overlayRef.updateSize({ width: this.dropdownListWidth() });
         }
-    }
-    formatValues(array) {
-        let sortedArray = array || [];
-        if (this.options?.sortLabels) {
-            const checkedValues = array
-                ?.filter(a => a?.checked)
-                ?.sort((a, b) => (a?.label > b?.label ? 1 : b?.label > a?.label ? -1 : 0)) || [];
-            const unCheckedValues = array
-                ?.filter(a => !a?.checked)
-                ?.sort((a, b) => (a?.label > b?.label ? 1 : b?.label > a?.label ? -1 : 0)) || [];
-            sortedArray = [...checkedValues, ...unCheckedValues]?.filter(t => t?.value !== this.SELECT_ALL_ENUM) || [];
-        }
-        if (!sortedArray?.some(option => option?.value === this.SELECT_ALL_ENUM) && this.enableSelectAll && sortedArray?.length > 0) {
-            sortedArray?.unshift({
-                label: "Select all",
-                value: this.SELECT_ALL_ENUM,
-                checked: sortedArray?.every(y => y?.checked)
-            });
-        }
-        return sortedArray;
-    }
-    toggleSelectedItems(event, item) {
-        event?.stopPropagation();
-        if (this.enableSelectAll && item?.value === this.SELECT_ALL_ENUM) {
-            this.localData = this.localData?.map(t => ({
-                ...t,
-                checked: !item?.checked
-            })) || [];
-            if (this.hideApplyButton) {
-                this.applyFilters();
-            }
-            return;
+        if (this.dropdownListHeight()) {
+            this.overlayRef.updateSize({ height: this.dropdownListHeight() });
         }
-        if (item?.checked) {
-            this.localData = [
-                ...this.localData?.map(a => {
-                    if (a?.value === item?.value || a?.value === this.SELECT_ALL_ENUM) {
-                        return {
-                            ...a,
-                            checked: false
-                        };
-                    }
-                    return a;
-                }) || []
-            ];
-        }
-        else {
-            this.localData = [
-                ...this.localData?.map(a => {
-                    if (a?.value === item?.value) {
-                        return {
-                            ...a,
-                            checked: true
-                        };
-                    }
-                    return a;
-                }) || []
-            ];
-            if (this.enableSelectAll && this.localData?.filter(r => r?.value !== this.SELECT_ALL_ENUM)?.every(t => t?.checked)) {
-                this.localData = [
-                    ...this.localData?.map(a => {
-                        if (a?.value === this.SELECT_ALL_ENUM) {
-                            return {
-                                ...a,
-                                checked: true
-                            };
-                        }
-                        return a;
-                    }) || []
-                ];
-            }
-        }
-        if (this.searchEnabled) {
-            this.searchInputOnChange(this.searchInput);
-        }
-        if (this.hideApplyButton) {
-            this.applyFilters();
-        }
-    }
-    applyFilters() {
-        this.onChange?.emit(this.localData
-            ?.filter(a => {
-            return a?.checked && a?.value !== this.SELECT_ALL_ENUM;
-        })
-            ?.map(item => {
-            const { checked, ...data } = item || {};
-            return data;
-        }) || []);
-        if (!this.hideApplyButton) {
-            this.onCancel();
-        }
-    }
-    onReset() {
-        this.isSearchInputFocused = false;
-        this.onChange?.emit([]);
-        this.isOpen = false;
-        this.searchInput = "";
-    }
-    onCancel() {
-        this.isSearchInputFocused = false;
-        this.localData = this.localData?.map(a => {
-            if (this.localSelectedItems?.some(b => b?.value === a?.value && String(b?.checked) !== String(a?.checked))) {
-                return a;
-            }
-            else {
-                if (a?.value !== this.SELECT_ALL_ENUM && this.hideApplyButton) {
-                    return {
-                        ...a,
-                        checked: false
-                    };
-                }
-                return a;
-            }
-        }) || [];
-        this.isOpen = false;
-        this.searchInput = "";
-        this.overlayRef?.detach();
-        this.searchInput = "";
+        this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));
+        this.overlayRef.backdropClick().subscribe(() => this.onCancel());
     }
-    static { this.ɵfac = function MultiSelectDropdownComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MultiSelectDropdownComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.Overlay), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.NgZone)); }; }
+    static { this.ɵfac = function MultiSelectDropdownComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MultiSelectDropdownComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MultiSelectDropdownComponent, selectors: [["mis-multi-select-dropdown"]], viewQuery: function MultiSelectDropdownComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 5);
             i0.ɵɵviewQuery(_c1, 5);
@@ -422,7 +410,7 @@ class MultiSelectDropdownComponent {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.selectElement = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.popupContainer = _t.first);
-        } }, inputs: { data: "data", label: "label", height: "height", width: "width", dropdownListHeight: "dropdownListHeight", dropdownListWidth: "dropdownListWidth", dropdownListPosition: "dropdownListPosition", enableSelectAll: "enableSelectAll", searchEnabled: "searchEnabled", showSelectedCount: "showSelectedCount", noDataMessage: "noDataMessage", options: "options", selectedItems: "selectedItems", hideApplyButton: "hideApplyButton", searchInputPlaceholder: "searchInputPlaceholder", customLabelTemplate: "customLabelTemplate" }, outputs: { onChange: "onChange" }, decls: 10, vars: 12, consts: [["select", ""], ["popupContainer", ""], [1, "container", 3, "ngStyle"], ["tabindex", "0", 1, "dropdown", 3, "keyup.enter", "click", "ngStyle"], [1, "label"], [4, "ngIf"], ["width", "20", "height", "20", "viewBox", "0 0 20 20", "fill", "none", "xmlns", "http://www.w3.org/2000/svg", 1, "handle", 3, "ngStyle"], ["fill-rule", "evenodd", "clip-rule", "evenodd", "d", "M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z", "fill", "#181F33"], [1, "text"], ["class", "count", 4, "ngIf"], [1, "count"], [4, "ngTemplateOutlet"], [1, "popup-container", 3, "ngStyle", "ngClass"], ["class", "search-container", 4, "ngIf"], [1, "items"], ["class", "item", "tabindex", "0", 3, "ngClass", "keyup.enter", "click", 4, "ngFor", "ngForOf"], ["class", "noData", 4, "ngIf"], ["class", "actions-container", 4, "ngIf"], [1, "search-container"], ["class", "search-icon", "width", "24", "height", "24", "viewBox", "0 0 24 24", "fill", "none", "xmlns", "http://www.w3.org/2000/svg", 4, "ngIf"], [1, "search-input", 3, "ngModelChange", "focus", "ngModel", "ngStyle", "placeholder"], ["class", "cancel-icon", "width", "24", "height", "24", "viewBox", "0 0 24 24", "fill", "none", "xmlns", "http://www.w3.org/2000/svg", 3, "click", 4, "ngIf"], ["width", "24", "height", "24", "viewBox", "0 0 24 24", "fill", "none", "xmlns", "http://www.w3.org/2000/svg", 1, "search-icon"], ["fill-rule", "evenodd", "clip-rule", "evenodd", "d", "M4.21508 11.1456C4.21508 7.3179 7.33722 4.21165 11.1926 4.21165C15.048 4.21165 18.1702 7.3179 18.1702 11.1456C18.1702 12.6931 17.6599 14.1226 16.7972 15.2767L15.3685 16.7013C14.2044 17.5668 12.759 18.0796 11.1926 18.0796C7.33722 18.0796 4.21508 14.9734 4.21508 11.1456ZM15.9421 17.7835C14.6021 18.7329 12.9627 19.2913 11.1926 19.2913C6.66977 19.2913 3 15.6461 3 11.1456C3 6.64512 6.66977 3 11.1926 3C15.7155 3 19.3852 6.64512 19.3852 11.1456C19.3852 12.9371 18.8037 14.5931 17.8184 15.9375L19.8361 17.4048C20.6705 17.912 21.7554 18.6543 20.2454 20.215C18.7353 21.7756 18.0099 20.6663 17.4991 19.8364L15.9421 17.7835Z", "fill", "#6A737D"], ["width", "24", "height", "24", "viewBox", "0 0 24 24", "fill", "none", "xmlns", "http://www.w3.org/2000/svg", 1, "cancel-icon", 3, "click"], ["fill-rule", "evenodd", "clip-rule", "evenodd", "d", "M8.87446 7.32144C8.44588 6.89285 7.751 6.89285 7.32242 7.32144C6.89383 7.75002 6.89383 8.4449 7.32242 8.87349L10.4488 11.9999L7.32357 15.1252C6.89498 15.5538 6.89498 16.2486 7.32357 16.6772C7.75215 17.1058 8.44703 17.1058 8.87561 16.6772L12.0009 13.552L15.1261 16.6772C15.5547 17.1058 16.2496 17.1058 16.6781 16.6772C17.1067 16.2486 17.1067 15.5537 16.6781 15.1251L13.5529 11.9999L16.6793 8.87354C17.1079 8.44496 17.1079 7.75008 16.6793 7.3215C16.2507 6.89291 15.5558 6.89291 15.1273 7.3215L12.0009 10.4479L8.87446 7.32144Z", "fill", "#6A737D"], ["tabindex", "0", 1, "item", 3, "keyup.enter", "click", "ngClass"], [1, "checkbox-container-wrapper"], [1, "checkbox-container"], ["tabindex", "-1", 3, "checked"], ["class", "icon-container", 4, "ngIf"], [1, "icon-container"], ["alt", "no img", 1, "icon", 3, "src"], [1, "noData"], [1, "actions-container"], [3, "click", "ngStyle"], [3, "name", "type", "width"]], template: function MultiSelectDropdownComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { data: [1, "data"], selectedItems: [1, "selectedItems"], label: [1, "label"], height: [1, "height"], width: [1, "width"], dropdownListHeight: [1, "dropdownListHeight"], dropdownListWidth: [1, "dropdownListWidth"], dropdownListPosition: [1, "dropdownListPosition"], enableSelectAll: [1, "enableSelectAll"], searchEnabled: [1, "searchEnabled"], showSelectedCount: [1, "showSelectedCount"], noDataMessage: [1, "noDataMessage"], options: [1, "options"], hideApplyButton: [1, "hideApplyButton"], searchInputPlaceholder: [1, "searchInputPlaceholder"], customLabelTemplate: [1, "customLabelTemplate"] }, outputs: { onChange: "onChange" }, decls: 10, vars: 12, consts: [["select", ""], ["popupContainer", ""], [1, "container", 3, "ngStyle"], ["tabindex", "0", 1, "dropdown", 3, "keyup.enter", "click", "ngStyle"], [1, "label"], [4, "ngIf"], ["width", "20", "height", "20", "viewBox", "0 0 20 20", "fill", "none", "xmlns", "http://www.w3.org/2000/svg", 1, "handle", 3, "ngStyle"], ["fill-rule", "evenodd", "clip-rule", "evenodd", "d", "M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z", "fill", "#181F33"], [1, "text"], ["class", "count", 4, "ngIf"], [1, "count"], [4, "ngTemplateOutlet"], [1, "popup-container", 3, "ngStyle", "ngClass"], ["class", "search-container", 4, "ngIf"], [1, "items"], ["class", "item", "tabindex", "0", 3, "ngClass", "keyup.enter", "click", 4, "ngFor", "ngForOf"], ["class", "noData", 4, "ngIf"], ["class", "actions-container", 4, "ngIf"], [1, "search-container"], ["class", "search-icon", "width", "24", "height", "24", "viewBox", "0 0 24 24", "fill", "none", "xmlns", "http://www.w3.org/2000/svg", 4, "ngIf"], [1, "search-input", 3, "ngModelChange", "focus", "ngModel", "ngStyle", "placeholder"], ["class", "cancel-icon", "width", "24", "height", "24", "viewBox", "0 0 24 24", "fill", "none", "xmlns", "http://www.w3.org/2000/svg", 3, "click", 4, "ngIf"], ["width", "24", "height", "24", "viewBox", "0 0 24 24", "fill", "none", "xmlns", "http://www.w3.org/2000/svg", 1, "search-icon"], ["fill-rule", "evenodd", "clip-rule", "evenodd", "d", "M4.21508 11.1456C4.21508 7.3179 7.33722 4.21165 11.1926 4.21165C15.048 4.21165 18.1702 7.3179 18.1702 11.1456C18.1702 12.6931 17.6599 14.1226 16.7972 15.2767L15.3685 16.7013C14.2044 17.5668 12.759 18.0796 11.1926 18.0796C7.33722 18.0796 4.21508 14.9734 4.21508 11.1456ZM15.9421 17.7835C14.6021 18.7329 12.9627 19.2913 11.1926 19.2913C6.66977 19.2913 3 15.6461 3 11.1456C3 6.64512 6.66977 3 11.1926 3C15.7155 3 19.3852 6.64512 19.3852 11.1456C19.3852 12.9371 18.8037 14.5931 17.8184 15.9375L19.8361 17.4048C20.6705 17.912 21.7554 18.6543 20.2454 20.215C18.7353 21.7756 18.0099 20.6663 17.4991 19.8364L15.9421 17.7835Z", "fill", "#6A737D"], ["width", "24", "height", "24", "viewBox", "0 0 24 24", "fill", "none", "xmlns", "http://www.w3.org/2000/svg", 1, "cancel-icon", 3, "click"], ["fill-rule", "evenodd", "clip-rule", "evenodd", "d", "M8.87446 7.32144C8.44588 6.89285 7.751 6.89285 7.32242 7.32144C6.89383 7.75002 6.89383 8.4449 7.32242 8.87349L10.4488 11.9999L7.32357 15.1252C6.89498 15.5538 6.89498 16.2486 7.32357 16.6772C7.75215 17.1058 8.44703 17.1058 8.87561 16.6772L12.0009 13.552L15.1261 16.6772C15.5547 17.1058 16.2496 17.1058 16.6781 16.6772C17.1067 16.2486 17.1067 15.5537 16.6781 15.1251L13.5529 11.9999L16.6793 8.87354C17.1079 8.44496 17.1079 7.75008 16.6793 7.3215C16.2507 6.89291 15.5558 6.89291 15.1273 7.3215L12.0009 10.4479L8.87446 7.32144Z", "fill", "#6A737D"], ["tabindex", "0", 1, "item", 3, "keyup.enter", "click", "ngClass"], [1, "checkbox-container-wrapper"], [1, "checkbox-container"], ["tabindex", "-1", 3, "checked"], ["class", "icon-container", 4, "ngIf"], [1, "icon-container"], ["alt", "no img", 1, "icon", 3, "src"], [1, "noData"], [1, "actions-container"], [3, "click", "ngStyle"], [3, "name", "type", "width"]], template: function MultiSelectDropdownComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 2)(1, "div", 3, 0);
             i0.ɵɵlistener("keyup.enter", function MultiSelectDropdownComponent_Template_div_keyup_enter_1_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleDropdown()); })("click", function MultiSelectDropdownComponent_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleDropdown()); });
@@ -435,60 +423,26 @@ class MultiSelectDropdownComponent {
             i0.ɵɵelementEnd()()();
             i0.ɵɵtemplate(8, MultiSelectDropdownComponent_ng_template_8_Template, 6, 12, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
-            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction2(5, _c2, ctx.height.length > 0 ? ctx.height : "", ctx.width.length > 0 ? ctx.width : ""));
+            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction2(5, _c2, ctx.height().length > 0 ? ctx.height() : "", ctx.width().length > 0 ? ctx.width() : ""));
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(8, _c3, ctx.isOpen ? "#E6EBF7" : ""));
+            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(8, _c3, ctx.isOpen() ? "#E6EBF7" : ""));
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngIf", !ctx.customLabelTemplate);
+            i0.ɵɵproperty("ngIf", !ctx.customLabelTemplate());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.customLabelTemplate);
+            i0.ɵɵproperty("ngIf", ctx.customLabelTemplate());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(10, _c4, ctx.isOpen ? "rotate(180deg)" : "rotate(0deg)"));
-        } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2.NgTemplateOutlet, i2.NgStyle, i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgModel, i4.CheckboxComponent, i5.ButtonComponent], 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}.container[_ngcontent-%COMP%]{position:relative;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;height:32px;width:256px;font-family:Lato,sans-serif!important}.container[_ngcontent-%COMP%]   .dropdown[_ngcontent-%COMP%]{height:inherit;border:1px solid var(--border-primary, #E0E0E0);border-radius:6px;background-color:var(--bg-primary, #FFFFFF);cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 12px;overflow:hidden}.container[_ngcontent-%COMP%]   .dropdown[_ngcontent-%COMP%]:hover, .container[_ngcontent-%COMP%]   .dropdown[_ngcontent-%COMP%]:focus-visible{background-color:var(--brand-primary-hover, #F0F3FA);outline:none}.container[_ngcontent-%COMP%]   .dropdown[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]{display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px);font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-primary, #181F33)}.container[_ngcontent-%COMP%]   .dropdown[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]   .text[_ngcontent-%COMP%]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-primary, #181F33)}.container[_ngcontent-%COMP%]   .dropdown[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%]{background-color:var(--border-primary, #E0E0E0);border-radius:50%;padding:2px 7px;margin:0 0 0 8px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:var(--text-primary, #181F33)}.container[_ngcontent-%COMP%]   .dropdown[_ngcontent-%COMP%]   .handle[_ngcontent-%COMP%]{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.popup-container[_ngcontent-%COMP%]{width:100%;max-height:340px;padding-bottom:0;border:1px solid var(--border-primary, #E0E0E0);border-radius:8px;background-color:var(--bg-primary, #FFFFFF);box-shadow:0 12px 24px #0000001f;display:flex;flex-direction:column;overflow:hidden;justify-content:flex-start}.popup-container[_ngcontent-%COMP%]::-webkit-scrollbar{width:0;height:0}.popup-container[_ngcontent-%COMP%]   .search-container[_ngcontent-%COMP%]{position:relative;box-sizing:border-box;padding:8px}.popup-container[_ngcontent-%COMP%]   .search-container[_ngcontent-%COMP%]   .search-icon[_ngcontent-%COMP%]{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.popup-container[_ngcontent-%COMP%]   .search-container[_ngcontent-%COMP%]   .search-input[_ngcontent-%COMP%]{height:40px;width:100%;padding:12px;border:1px solid var(--border-primary, #E0E0E0);box-sizing:border-box;border-radius:8px;outline:none;caret-color:var(--brand-primary, #0937B2);font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:var(--text-primary, #181F33)}.popup-container[_ngcontent-%COMP%]   .search-container[_ngcontent-%COMP%]   .cancel-icon[_ngcontent-%COMP%]{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]{padding:8px 0 8px 8px;overflow-y:scroll}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]::-webkit-scrollbar{width:5px;height:0}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:var(--text-tertiary, #929DAB);border-radius:10px}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .noData[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-primary, #181F33)}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .disabled[_ngcontent-%COMP%]{pointer-events:none;opacity:.5}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;padding:8px 12px;border-radius:6px;height:auto}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]:hover, .popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]:focus-visible{background-color:var(--brand-primary-hover, #F0F3FA);outline:none}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .checkbox-container-wrapper[_ngcontent-%COMP%]{display:flex;justify-content:flex-start;align-items:center;width:90%}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .checkbox-container-wrapper[_ngcontent-%COMP%]   .checkbox-container[_ngcontent-%COMP%]{display:block;position:relative;cursor:pointer;font-size:22px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .checkbox-container-wrapper[_ngcontent-%COMP%]   .checkbox-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .checkbox-container-wrapper[_ngcontent-%COMP%]   .checkbox-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked ~ .checkmark[_ngcontent-%COMP%]:after{display:block}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .checkbox-container-wrapper[_ngcontent-%COMP%]   .checkbox-container[_ngcontent-%COMP%]   .checkmark[_ngcontent-%COMP%]{position:absolute;top:-8px;left:0;height:15px;width:15px;border-radius:4px;background-color:var(--brand-info, #0091FF);border:1px solid var(--text-secondary, #6A737D)}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .checkbox-container-wrapper[_ngcontent-%COMP%]   .checkbox-container[_ngcontent-%COMP%]   .checkmark[_ngcontent-%COMP%]:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:3px;height:6px;border:solid var(--bg-primary, #FFFFFF);border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .checkbox-container-wrapper[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]{margin:0 0 0 8px;line-height:20px;font-size:14px;font-style:normal;font-weight:400;letter-spacing:.2;text-overflow:ellipsis;overflow:hidden}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .icon-container[_ngcontent-%COMP%]{width:10%;display:flex;justify-content:flex-end}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .icon-container[_ngcontent-%COMP%]   .icon[_ngcontent-%COMP%]{width:20px;height:20px}.popup-container[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]{display:flex;justify-content:space-between;bottom:0;align-items:center;position:sticky;padding:16px;background-color:var(--bg-primary, #FFFFFF);border-top:1px solid var(--border-primary, #E0E0E0);margin-top:auto}.popup-container[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .cancel[_ngcontent-%COMP%]{cursor:pointer;padding:10px 32px;text-align:center;font-size:16px;line-height:24px;border-radius:8px}.popup-container[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .cancel[_ngcontent-%COMP%]:hover{background:var(--bg-overlay-lightest, rgba(0, 0, 0, .04))}.popup-container[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .apply[_ngcontent-%COMP%]{cursor:pointer;padding:10px 32px;text-align:center;color:var(--bg-primary, #FFFFFF);font-size:16px;line-height:24px;background:var(--brand-primary, #0937B2);border-radius:8px}"] }); }
+            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(10, _c4, ctx.isOpen() ? "rotate(180deg)" : "rotate(0deg)"));
+        } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, i1.NgStyle, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i3.CheckboxComponent, i4.ButtonComponent], styles: [".container[_ngcontent-%COMP%]{position:relative;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;height:32px;width:256px;font-family:Lato,sans-serif!important}.container[_ngcontent-%COMP%]   .dropdown[_ngcontent-%COMP%]{height:inherit;border:1px solid #e0e0e0;border-radius:6px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 12px;overflow:hidden}.container[_ngcontent-%COMP%]   .dropdown[_ngcontent-%COMP%]:hover, .container[_ngcontent-%COMP%]   .dropdown[_ngcontent-%COMP%]:focus-visible{background-color:#f5f7fc;outline:none}.container[_ngcontent-%COMP%]   .dropdown[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]{display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px);font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container[_ngcontent-%COMP%]   .dropdown[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]   .text[_ngcontent-%COMP%]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container[_ngcontent-%COMP%]   .dropdown[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%]{background-color:#e0e0e0;border-radius:50%;padding:2px 7px;margin:0 0 0 8px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:#181f33}.container[_ngcontent-%COMP%]   .dropdown[_ngcontent-%COMP%]   .handle[_ngcontent-%COMP%]{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.popup-container[_ngcontent-%COMP%]{width:100%;max-height:340px;padding-bottom:0;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 12px 24px #0000001f;display:flex;flex-direction:column;overflow:hidden;justify-content:flex-start}.popup-container[_ngcontent-%COMP%]::-webkit-scrollbar{width:0;height:0}.popup-container[_ngcontent-%COMP%]   .search-container[_ngcontent-%COMP%]{position:relative;box-sizing:border-box;padding:8px}.popup-container[_ngcontent-%COMP%]   .search-container[_ngcontent-%COMP%]   .search-icon[_ngcontent-%COMP%]{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.popup-container[_ngcontent-%COMP%]   .search-container[_ngcontent-%COMP%]   .search-input[_ngcontent-%COMP%]{height:40px;width:100%;padding:12px;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:8px;outline:none;caret-color:#0937b2;font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.popup-container[_ngcontent-%COMP%]   .search-container[_ngcontent-%COMP%]   .cancel-icon[_ngcontent-%COMP%]{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]{padding:8px 0 8px 8px;overflow-y:scroll}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]::-webkit-scrollbar{width:5px;height:0}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .noData[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .disabled[_ngcontent-%COMP%]{pointer-events:none;opacity:.5}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;padding:8px 12px;border-radius:6px;height:auto}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]:hover, .popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]:focus-visible{background-color:#f5f7fc;outline:none}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .checkbox-container-wrapper[_ngcontent-%COMP%]{display:flex;justify-content:flex-start;align-items:center;width:90%}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .checkbox-container-wrapper[_ngcontent-%COMP%]   .checkbox-container[_ngcontent-%COMP%]{display:block;position:relative;cursor:pointer;font-size:22px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .checkbox-container-wrapper[_ngcontent-%COMP%]   .checkbox-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .checkbox-container-wrapper[_ngcontent-%COMP%]   .checkbox-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked ~ .checkmark[_ngcontent-%COMP%]:after{display:block}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .checkbox-container-wrapper[_ngcontent-%COMP%]   .checkbox-container[_ngcontent-%COMP%]   .checkmark[_ngcontent-%COMP%]{position:absolute;top:-8px;left:0;height:15px;width:15px;border-radius:4px;background-color:#0079f1;border:1px solid rgb(106,115,125)}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .checkbox-container-wrapper[_ngcontent-%COMP%]   .checkbox-container[_ngcontent-%COMP%]   .checkmark[_ngcontent-%COMP%]:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:3px;height:6px;border:solid white;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .checkbox-container-wrapper[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]{margin:0 0 0 8px;line-height:20px;font-size:14px;font-style:normal;font-weight:400;letter-spacing:.2;text-overflow:ellipsis;overflow:hidden}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .icon-container[_ngcontent-%COMP%]{width:10%;display:flex;justify-content:flex-end}.popup-container[_ngcontent-%COMP%]   .items[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]   .icon-container[_ngcontent-%COMP%]   .icon[_ngcontent-%COMP%]{width:20px;height:20px}.popup-container[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]{display:flex;justify-content:space-between;bottom:0;align-items:center;position:sticky;padding:16px;background-color:#fff;border-top:1px solid #e0e0e0;margin-top:auto}.popup-container[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .cancel[_ngcontent-%COMP%]{cursor:pointer;padding:10px 32px;text-align:center;font-size:16px;line-height:24px;border-radius:8px}.popup-container[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .cancel[_ngcontent-%COMP%]:hover{background:#0937b20a}.popup-container[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .apply[_ngcontent-%COMP%]{cursor:pointer;padding:10px 32px;text-align:center;color:#fff;font-size:16px;line-height:24px;background:#0937b2;border-radius:8px}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MultiSelectDropdownComponent, [{
         type: Component,
-        args: [{ selector: "mis-multi-select-dropdown", template: "<div\n  class=\"container\"\n  [ngStyle]=\"{\n    height: height.length > 0 ? height : '',\n    width: width.length > 0 ? width : ''\n  }\"\n>\n  <div\n    class=\"dropdown\"\n    #select\n    tabindex=\"0\"\n    (keyup.enter)=\"toggleDropdown()\"\n    (click)=\"toggleDropdown()\"\n    [ngStyle]=\"{ background: isOpen ? '#E6EBF7' : '' }\"\n  >\n    <div class=\"label\">\n      <ng-container *ngIf=\"!customLabelTemplate\">\n      <p class=\"text\">{{ label }}</p>\n      <p *ngIf=\"showSelectedCount && localSelectedItems?.length > 0\" class=\"count\">\n        {{ localSelectedItems?.length }}\n      </p>\n    </ng-container>\n    <ng-container *ngIf=\"customLabelTemplate\">\n      <ng-container *ngTemplateOutlet=\"customLabelTemplate\">\n      </ng-container>\n    </ng-container>\n    </div>\n    <svg\n      class=\"handle\"\n      [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\"\n        fill=\"#181F33\"\n      />\n    </svg>\n  </div>\n</div>\n<ng-template #popupContainer>\n  <div\n    class=\"popup-container\"\n    [ngStyle]=\"{\n      'height': dropdownListHeight,\n      width: dropdownListWidth\n    }\"\n    [ngClass]=\"{\n      'position-left': dropdownListPosition === 'Left',\n      'position-right': dropdownListPosition === 'Right'\n    }\"\n  >\n      <div *ngIf=\"searchEnabled\" class=\"search-container\">\n        <svg\n          *ngIf=\"!isSearchInputFocused\"\n          class=\"search-icon\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M4.21508 11.1456C4.21508 7.3179 7.33722 4.21165 11.1926 4.21165C15.048 4.21165 18.1702 7.3179 18.1702 11.1456C18.1702 12.6931 17.6599 14.1226 16.7972 15.2767L15.3685 16.7013C14.2044 17.5668 12.759 18.0796 11.1926 18.0796C7.33722 18.0796 4.21508 14.9734 4.21508 11.1456ZM15.9421 17.7835C14.6021 18.7329 12.9627 19.2913 11.1926 19.2913C6.66977 19.2913 3 15.6461 3 11.1456C3 6.64512 6.66977 3 11.1926 3C15.7155 3 19.3852 6.64512 19.3852 11.1456C19.3852 12.9371 18.8037 14.5931 17.8184 15.9375L19.8361 17.4048C20.6705 17.912 21.7554 18.6543 20.2454 20.215C18.7353 21.7756 18.0099 20.6663 17.4991 19.8364L15.9421 17.7835Z\"\n            fill=\"#6A737D\"\n          />\n        </svg>\n        <input\n          [ngModel]=\"searchInput\"\n          [ngStyle]=\"{\n            paddingLeft: isSearchInputFocused ? '12px' : '45px',\n            border: isSearchInputFocused ? '1px solid #0937B2' : '1px solid #e0e0e0',\n            paddingRight: isSearchInputFocused ? '45px' : '10px'\n          }\"\n          (ngModelChange)=\"searchInputOnChange($event)\"\n          [placeholder]=\"isSearchInputFocused ? '' : searchInputPlaceholder\"\n          (focus)=\"searchInputFocused(true)\"\n          class=\"search-input\"\n        />\n        <svg\n          *ngIf=\"isSearchInputFocused\"\n          class=\"cancel-icon\"\n          (click)=\"searchInputCanceled($event)\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M8.87446 7.32144C8.44588 6.89285 7.751 6.89285 7.32242 7.32144C6.89383 7.75002 6.89383 8.4449 7.32242 8.87349L10.4488 11.9999L7.32357 15.1252C6.89498 15.5538 6.89498 16.2486 7.32357 16.6772C7.75215 17.1058 8.44703 17.1058 8.87561 16.6772L12.0009 13.552L15.1261 16.6772C15.5547 17.1058 16.2496 17.1058 16.6781 16.6772C17.1067 16.2486 17.1067 15.5537 16.6781 15.1251L13.5529 11.9999L16.6793 8.87354C17.1079 8.44496 17.1079 7.75008 16.6793 7.3215C16.2507 6.89291 15.5558 6.89291 15.1273 7.3215L12.0009 10.4479L8.87446 7.32144Z\"\n            fill=\"#6A737D\"\n          />\n        </svg>\n      </div>\n      <div class=\"items\">\n        <div\n          class=\"item\"\n          tabindex=\"0\"\n          (keyup.enter)=\"toggleSelectedItems($event, item)\"\n          (click)=\"toggleSelectedItems($event, item)\"\n          *ngFor=\"let item of searchInput ? searchData : localData\"\n          [ngClass]=\"{'disabled':item.disabled}\"\n        >\n          <div class=\"checkbox-container-wrapper\">\n            <div class=\"checkbox-container\">\n              <mis-checkbox [checked]=\"item.checked\" tabindex=\"-1\"></mis-checkbox>\n            </div>\n            <p class=\"label\">\n              {{ item.label }}\n            </p>\n          </div>\n          <div class=\"icon-container\" *ngIf=\"item.icon\">\n            <img class=\"icon\" [src]=\"item.icon\" alt=\"no img\" />\n          </div>\n        </div>\n        <div class=\"noData\" *ngIf=\"(searchInput ? searchData : localData).length === 0\">\n          {{ searchInput === \"\" ? noDataMessage : \"No results\" }}\n        </div>\n      </div>\n    <div *ngIf=\"localData.length !== 0 && !hideApplyButton\" class=\"actions-container\">\n      <div [ngStyle]=\"{'width': 'calc(50% - 4px)'}\" (click)=\"onReset()\">\n        <mis-button [name]=\"'Reset'\" [type]=\"'Text'\" [width]=\"'100%'\" ></mis-button>\n      </div>\n      <div [ngStyle]=\"{'width': 'calc(50% - 4px)'}\" (click)=\"applyFilters()\">\n        <mis-button [name]=\"'Apply'\" [type]=\"'Solid'\" [width]=\"'100%'\" ></mis-button>\n      </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}.container{position:relative;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;height:32px;width:256px;font-family:Lato,sans-serif!important}.container .dropdown{height:inherit;border:1px solid var(--border-primary, #E0E0E0);border-radius:6px;background-color:var(--bg-primary, #FFFFFF);cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 12px;overflow:hidden}.container .dropdown:hover,.container .dropdown:focus-visible{background-color:var(--brand-primary-hover, #F0F3FA);outline:none}.container .dropdown .label{display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px);font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-primary, #181F33)}.container .dropdown .label .text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-primary, #181F33)}.container .dropdown .label .count{background-color:var(--border-primary, #E0E0E0);border-radius:50%;padding:2px 7px;margin:0 0 0 8px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:var(--text-primary, #181F33)}.container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.popup-container{width:100%;max-height:340px;padding-bottom:0;border:1px solid var(--border-primary, #E0E0E0);border-radius:8px;background-color:var(--bg-primary, #FFFFFF);box-shadow:0 12px 24px #0000001f;display:flex;flex-direction:column;overflow:hidden;justify-content:flex-start}.popup-container::-webkit-scrollbar{width:0;height:0}.popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.popup-container .search-container .search-input{height:40px;width:100%;padding:12px;border:1px solid var(--border-primary, #E0E0E0);box-sizing:border-box;border-radius:8px;outline:none;caret-color:var(--brand-primary, #0937B2);font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:var(--text-primary, #181F33)}.popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll}.popup-container .items::-webkit-scrollbar{width:5px;height:0}.popup-container .items::-webkit-scrollbar-thumb{background:var(--text-tertiary, #929DAB);border-radius:10px}.popup-container .items .noData{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-primary, #181F33)}.popup-container .items .disabled{pointer-events:none;opacity:.5}.popup-container .items .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;padding:8px 12px;border-radius:6px;height:auto}.popup-container .items .item:hover,.popup-container .items .item:focus-visible{background-color:var(--brand-primary-hover, #F0F3FA);outline:none}.popup-container .items .item .checkbox-container-wrapper{display:flex;justify-content:flex-start;align-items:center;width:90%}.popup-container .items .item .checkbox-container-wrapper .checkbox-container{display:block;position:relative;cursor:pointer;font-size:22px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.popup-container .items .item .checkbox-container-wrapper .checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.popup-container .items .item .checkbox-container-wrapper .checkbox-container input:checked~.checkmark:after{display:block}.popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark{position:absolute;top:-8px;left:0;height:15px;width:15px;border-radius:4px;background-color:var(--brand-info, #0091FF);border:1px solid var(--text-secondary, #6A737D)}.popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:3px;height:6px;border:solid var(--bg-primary, #FFFFFF);border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.popup-container .items .item .checkbox-container-wrapper .label{margin:0 0 0 8px;line-height:20px;font-size:14px;font-style:normal;font-weight:400;letter-spacing:.2;text-overflow:ellipsis;overflow:hidden}.popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.popup-container .items .item .icon-container .icon{width:20px;height:20px}.popup-container .actions-container{display:flex;justify-content:space-between;bottom:0;align-items:center;position:sticky;padding:16px;background-color:var(--bg-primary, #FFFFFF);border-top:1px solid var(--border-primary, #E0E0E0);margin-top:auto}.popup-container .actions-container .cancel{cursor:pointer;padding:10px 32px;text-align:center;font-size:16px;line-height:24px;border-radius:8px}.popup-container .actions-container .cancel:hover{background:var(--bg-overlay-lightest, rgba(0, 0, 0, .04))}.popup-container .actions-container .apply{cursor:pointer;padding:10px 32px;text-align:center;color:var(--bg-primary, #FFFFFF);font-size:16px;line-height:24px;background:var(--brand-primary, #0937B2);border-radius:8px}\n"] }]
-    }], () => [{ type: i0.ElementRef }, { type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.NgZone }], { data: [{
-            type: Input
-        }], label: [{
-            type: Input
-        }], height: [{
-            type: Input
-        }], width: [{
-            type: Input
-        }], dropdownListHeight: [{
-            type: Input
-        }], dropdownListWidth: [{
-            type: Input
-        }], dropdownListPosition: [{
-            type: Input
-        }], enableSelectAll: [{
-            type: Input
-        }], searchEnabled: [{
-            type: Input
-        }], showSelectedCount: [{
-            type: Input
-        }], noDataMessage: [{
-            type: Input
-        }], options: [{
-            type: Input
-        }], selectedItems: [{
-            type: Input
-        }], hideApplyButton: [{
-            type: Input
-        }], searchInputPlaceholder: [{
-            type: Input
-        }], customLabelTemplate: [{
-            type: Input
-        }], onChange: [{
-            type: Output
-        }], selectElement: [{
+        args: [{ selector: 'mis-multi-select-dropdown', template: "<div\n  class=\"container\"\n  [ngStyle]=\"{\n    height: height().length > 0 ? height() : '',\n    width: width().length > 0 ? width() : ''\n  }\"\n>\n  <div\n    class=\"dropdown\"\n    #select\n    tabindex=\"0\"\n    (keyup.enter)=\"toggleDropdown()\"\n    (click)=\"toggleDropdown()\"\n    [ngStyle]=\"{ 'background': isOpen() ? '#E6EBF7' : '' }\"\n  >\n    <div class=\"label\">\n      <ng-container *ngIf=\"!customLabelTemplate()\">\n      <p class=\"text\">{{ label() }}</p>\n      <p *ngIf=\"showSelectedCount() && internalSelectedItems().length > 0\" class=\"count\">\n        {{ internalSelectedItems().length }}\n      </p>\n    </ng-container>\n    <ng-container *ngIf=\"customLabelTemplate()\">\n      <ng-container *ngTemplateOutlet=\"customLabelTemplate()\">\n      </ng-container>\n    </ng-container>\n    </div>\n    <svg\n      class=\"handle\"\n      [ngStyle]=\"{ 'transform': isOpen() ? 'rotate(180deg)' : 'rotate(0deg)' }\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\"\n        fill=\"#181F33\"\n      />\n    </svg>\n  </div>\n</div>\n<ng-template #popupContainer>\n  <div\n    class=\"popup-container\"\n    [ngStyle]=\"{\n      'height': dropdownListHeight(),\n      width: dropdownListWidth()\n    }\"\n    [ngClass]=\"{\n      'position-left': dropdownListPosition() === 'Left',\n      'position-right': dropdownListPosition() === 'Right'\n    }\"\n  >\n      <div *ngIf=\"searchEnabled()\" class=\"search-container\">\n        <svg\n          *ngIf=\"!isSearchInputFocused()\"\n          class=\"search-icon\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M4.21508 11.1456C4.21508 7.3179 7.33722 4.21165 11.1926 4.21165C15.048 4.21165 18.1702 7.3179 18.1702 11.1456C18.1702 12.6931 17.6599 14.1226 16.7972 15.2767L15.3685 16.7013C14.2044 17.5668 12.759 18.0796 11.1926 18.0796C7.33722 18.0796 4.21508 14.9734 4.21508 11.1456ZM15.9421 17.7835C14.6021 18.7329 12.9627 19.2913 11.1926 19.2913C6.66977 19.2913 3 15.6461 3 11.1456C3 6.64512 6.66977 3 11.1926 3C15.7155 3 19.3852 6.64512 19.3852 11.1456C19.3852 12.9371 18.8037 14.5931 17.8184 15.9375L19.8361 17.4048C20.6705 17.912 21.7554 18.6543 20.2454 20.215C18.7353 21.7756 18.0099 20.6663 17.4991 19.8364L15.9421 17.7835Z\"\n            fill=\"#6A737D\"\n          />\n        </svg>\n        <input\n          [ngModel]=\"searchInput()\"\n          [ngStyle]=\"{\n            paddingLeft: isSearchInputFocused() ? '12px' : '45px',\n            border: isSearchInputFocused() ? '1px solid #0937B2' : '1px solid #e0e0e0',\n            paddingRight: isSearchInputFocused() ? '45px' : '10px'\n          }\"\n          (ngModelChange)=\"searchInputOnChange($event)\"\n          [placeholder]=\"isSearchInputFocused() ? '' : searchInputPlaceholder()\"\n          (focus)=\"searchInputFocused(true)\"\n          class=\"search-input\"\n        />\n        <svg\n          *ngIf=\"isSearchInputFocused()\"\n          class=\"cancel-icon\"\n          (click)=\"searchInputCanceled($event)\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M8.87446 7.32144C8.44588 6.89285 7.751 6.89285 7.32242 7.32144C6.89383 7.75002 6.89383 8.4449 7.32242 8.87349L10.4488 11.9999L7.32357 15.1252C6.89498 15.5538 6.89498 16.2486 7.32357 16.6772C7.75215 17.1058 8.44703 17.1058 8.87561 16.6772L12.0009 13.552L15.1261 16.6772C15.5547 17.1058 16.2496 17.1058 16.6781 16.6772C17.1067 16.2486 17.1067 15.5537 16.6781 15.1251L13.5529 11.9999L16.6793 8.87354C17.1079 8.44496 17.1079 7.75008 16.6793 7.3215C16.2507 6.89291 15.5558 6.89291 15.1273 7.3215L12.0009 10.4479L8.87446 7.32144Z\"\n            fill=\"#6A737D\"\n          />\n        </svg>\n      </div>\n      <div class=\"items\">\n        <div\n          class=\"item\"\n          tabindex=\"0\"\n          (keyup.enter)=\"toggleSelectedItems($event, item)\"\n          (click)=\"toggleSelectedItems($event, item)\"\n          *ngFor=\"let item of displayData()\"\n          [ngClass]=\"{'disabled':item.disabled}\"\n        >\n          <div class=\"checkbox-container-wrapper\">\n            <div class=\"checkbox-container\">\n              <mis-checkbox [checked]=\"item.checked\" tabindex=\"-1\"></mis-checkbox>\n              </div>\n            <p class=\"label\">\n              {{ item.label }}\n            </p>\n          </div>\n          <div class=\"icon-container\" *ngIf=\"item.icon\">\n            <img class=\"icon\" [src]=\"item.icon\" alt=\"no img\" />\n          </div>\n        </div>\n        <div class=\"noData\" *ngIf=\"displayData().length === 0\">\n          {{ searchInput() === \"\" ? noDataMessage() : \"No results\" }}\n        </div>\n      </div>\n    <div *ngIf=\"internalData().length !== 0 && !hideApplyButton()\" class=\"actions-container\">\n      <div [ngStyle]=\"{'width': 'calc(50% - 4px)'}\" (click)=\"onReset()\">\n        <mis-button [name]=\"'Reset'\" [type]=\"'Text'\" [width]=\"'100%'\" ></mis-button>\n      </div>\n      <div [ngStyle]=\"{'width': 'calc(50% - 4px)'}\" (click)=\"applyFilters()\">\n        <mis-button [name]=\"'Apply'\" [type]=\"'Solid'\" [width]=\"'100%'\" ></mis-button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n\n", styles: [".container{position:relative;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;height:32px;width:256px;font-family:Lato,sans-serif!important}.container .dropdown{height:inherit;border:1px solid #e0e0e0;border-radius:6px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 12px;overflow:hidden}.container .dropdown:hover,.container .dropdown:focus-visible{background-color:#f5f7fc;outline:none}.container .dropdown .label{display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px);font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container .dropdown .label .text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container .dropdown .label .count{background-color:#e0e0e0;border-radius:50%;padding:2px 7px;margin:0 0 0 8px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:#181f33}.container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.popup-container{width:100%;max-height:340px;padding-bottom:0;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 12px 24px #0000001f;display:flex;flex-direction:column;overflow:hidden;justify-content:flex-start}.popup-container::-webkit-scrollbar{width:0;height:0}.popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.popup-container .search-container .search-input{height:40px;width:100%;padding:12px;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:8px;outline:none;caret-color:#0937b2;font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll}.popup-container .items::-webkit-scrollbar{width:5px;height:0}.popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.popup-container .items .noData{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.popup-container .items .disabled{pointer-events:none;opacity:.5}.popup-container .items .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;padding:8px 12px;border-radius:6px;height:auto}.popup-container .items .item:hover,.popup-container .items .item:focus-visible{background-color:#f5f7fc;outline:none}.popup-container .items .item .checkbox-container-wrapper{display:flex;justify-content:flex-start;align-items:center;width:90%}.popup-container .items .item .checkbox-container-wrapper .checkbox-container{display:block;position:relative;cursor:pointer;font-size:22px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.popup-container .items .item .checkbox-container-wrapper .checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.popup-container .items .item .checkbox-container-wrapper .checkbox-container input:checked~.checkmark:after{display:block}.popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark{position:absolute;top:-8px;left:0;height:15px;width:15px;border-radius:4px;background-color:#0079f1;border:1px solid rgb(106,115,125)}.popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:3px;height:6px;border:solid white;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.popup-container .items .item .checkbox-container-wrapper .label{margin:0 0 0 8px;line-height:20px;font-size:14px;font-style:normal;font-weight:400;letter-spacing:.2;text-overflow:ellipsis;overflow:hidden}.popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.popup-container .items .item .icon-container .icon{width:20px;height:20px}.popup-container .actions-container{display:flex;justify-content:space-between;bottom:0;align-items:center;position:sticky;padding:16px;background-color:#fff;border-top:1px solid #e0e0e0;margin-top:auto}.popup-container .actions-container .cancel{cursor:pointer;padding:10px 32px;text-align:center;font-size:16px;line-height:24px;border-radius:8px}.popup-container .actions-container .cancel:hover{background:#0937b20a}.popup-container .actions-container .apply{cursor:pointer;padding:10px 32px;text-align:center;color:#fff;font-size:16px;line-height:24px;background:#0937b2;border-radius:8px}\n"] }]
+    }], () => [], { selectElement: [{
             type: ViewChild,
-            args: ["select", { static: false }]
+            args: ['select', { static: false }]
         }], popupContainer: [{
             type: ViewChild,
-            args: ["popupContainer", { static: false }]
+            args: ['popupContainer', { static: false }]
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MultiSelectDropdownComponent, { className: "MultiSelectDropdownComponent" }); })();