mis-crystal-design-system 18.0.24 → 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: [".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}"] }); }
+            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: [".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"] }]
-    }], () => [{ 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" }); })();