@stackline/angular-multiselect-dropdown 21.1.0 → 21.1.2

package/README.md

@@ -12,7 +12,7 @@
 
 **[Documentation & Live Demos](https://alexandro.net/docs/angular/multiselect/)** | **[Angular 21 Demo](https://alexandro.net/docs/angular/multiselect/angular-21/)** | **[npm](https://www.npmjs.com/package/@stackline/angular-multiselect-dropdown)** | **[Issues](https://github.com/alexandroit/angular-multiselect-dropdown/issues)** | **[Repository](https://github.com/alexandroit/angular-multiselect-dropdown)**
 
-**Latest tested package release:** `21.1.0` for Angular `21.x`
+**Latest tested package release:** `21.1.2` for Angular `21.x`
 
 ---
 
@@ -24,9 +24,9 @@
 
 The original `angular2-multiselect-dropdown` package became difficult to keep current across multiple Angular generations. This maintained package keeps the classic API and template structure intact, introduces the new primary selector `<angular-multiselect>`, preserves the legacy alias `<angular2-multiselect>`, and publishes the project line by line so older applications can keep a predictable upgrade path.
 
-The repository contains the full documentation matrix from Angular 2 through Angular 21. The current package release is `21.1.0` for Angular 21.x applications.
+The repository contains the full documentation matrix from Angular 2 through Angular 21. The current package release is `21.1.2` for Angular 21.x applications.
 
-The Angular 21 package is compatible with Angular 21.x and was tested in a real Angular 21.2.14 application before npm publication. The 21.1.0 line adds ADA-compliant keyboard navigation, focus handling, and ARIA support for the dropdown trigger, clear-all action, selected chips, listbox, and lazy-loaded results.
+The Angular 21 package is compatible with Angular 21.x and was tested in a real Angular 21.2.14 application before npm publication. The 21.1.x line adds ADA-compliant keyboard navigation, focus handling, and ARIA support for the dropdown trigger, clear-all action, selected chips, listbox, and lazy-loaded results. The 21.1.2 patch keeps that behavior, fixes responsive dropdown width handling, and makes tagToBody/appendToBody render the open panel from document.body so dialogs and overflow containers do not clip it.
 
 ## Features
 
@@ -59,9 +59,10 @@ The Angular 21 package is compatible with Angular 21.x and was tested in a real
 8. [Custom Templates](#custom-templates)
 9. [Forms Integration](#forms-integration)
 10. [Lazy Loading and Remote Data](#lazy-loading-and-remote-data)
-11. [Events](#events)
-12. [Run Locally](#run-locally)
-13. [License](#license)
+11. [Dialogs and Overflow Containers](#dialogs-and-overflow-containers)
+12. [Events](#events)
+13. [Run Locally](#run-locally)
+14. [License](#license)
 
 ## Rename Note
 
@@ -78,7 +79,7 @@ Peer ranges are intentionally bounded to the tested Angular major. The Angular 2
 
 | Package family | Framework family | Peer range | Tested release window | Demo link |
 | :---: | :---: | :---: | :---: | :--- |
-| **21.x** | **Angular 21 only** | **`>=21.0.0 <22.0.0`** | **21.1.0 -> 21.2.14** | [Angular 21 family docs](https://alexandro.net/docs/angular/multiselect/angular-21/) |
+| **21.x** | **Angular 21 only** | **`>=21.0.0 <22.0.0`** | **21.1.2 -> 21.2.14** | [Angular 21 family docs](https://alexandro.net/docs/angular/multiselect/angular-21/) |
 | **20.x** | **Angular 20 only** | **`>=20.0.0 <21.0.0`** | **20.0.1 -> 20.3.21** | [Angular 20 family docs](https://alexandro.net/docs/angular/multiselect/angular-20/) |
 | **19.x** | **Angular 19 only** | **`>=19.0.0 <20.0.0`** | **19.0.1 -> 19.2.22** | [Angular 19 family docs](https://alexandro.net/docs/angular/multiselect/angular-19/) |
 | **18.x** | **Angular 18 only** | **`>=18.0.0 <19.0.0`** | **18.0.1 -> 18.2.14** | [Angular 18 family docs](https://alexandro.net/docs/angular/multiselect/angular-18/) |
@@ -101,10 +102,10 @@ Peer ranges are intentionally bounded to the tested Angular major. The Angular 2
 ## Installation
 
 ```bash
-npm install @stackline/angular-multiselect-dropdown@21.1.0 --save-exact
+npm install @stackline/angular-multiselect-dropdown@21.1.2 --save-exact
 ```
 
-Install `21.1.0` for Angular 21.x applications. This line keeps the tested Angular 21 behavior, makes `<angular-multiselect>` the documented standard selector, keeps `<angular2-multiselect>` only as a legacy compatibility alias, and adds the ADA-compliant keyboard/ARIA accessibility patch.
+Install `21.1.2` for Angular 21.x applications. This line keeps the tested Angular 21 behavior, makes `<angular-multiselect>` the documented standard selector, keeps `<angular2-multiselect>` only as a legacy compatibility alias, adds the ADA-compliant keyboard/ARIA accessibility patch, and fixes responsive dropdown width handling.
 
 ## Setup
 
@@ -181,7 +182,7 @@ dropdownSettings = {
   maxHeight: 260,
   showCheckbox: true,
   noDataLabel: 'No data',
-  theme: 'classic',
+  skin: 'classic',
   tagToBody: false
 };
 ```
@@ -200,22 +201,24 @@ dropdownSettings = {
 
 ## Official Angular 21 Test Matrix
 
-The published Angular 21 release was tested in a real Angular `21.2.14` application with `@stackline/angular-multiselect-dropdown@21.1.0`. The docs now use the same examples from that test app, including the ADA-compliant keyboard, focus, and ARIA behavior added in this release.
+The published Angular 21 release was tested in a real Angular `21.2.14` application with `@stackline/angular-multiselect-dropdown@21.1.2`. The docs now use the same examples from that test app, including the ADA-compliant keyboard, focus, ARIA behavior, and responsive dropdown width handling and body-overlay positioning added in this release line.
 
 Switch between skins through the settings object:
 
 ```ts
 settings = {
   text: 'Classic basic',
-  theme: 'classic'
+  skin: 'classic'
 };
 
 materialSettings = {
   text: 'Material basic',
-  theme: 'material'
+  skin: 'material'
 };
 ```
 
+`settings.theme` is still accepted as a legacy alias for older code, but new Angular usage should configure only `settings.skin`.
+
 The same twelve scenarios are validated for both `classic` and `material`:
 
 | # | Scenario | Main settings tested |
@@ -297,6 +300,21 @@ The versioned docs include working examples for lazy loading, remote data, group
 
 For sticky cards, constrained containers, or dashboard layouts, keep `tagToBody: false` so the dropdown panel stays anchored to the field and does not jump across the page.
 
+## Dialogs and Overflow Containers
+
+Use `tagToBody: true` when the dropdown is inside Angular Material dialogs, modals, drawers, or containers that set `overflow: hidden` or `overflow: auto`.
+
+```ts
+settings = {
+  text: 'Select countries',
+  enableSearchFilter: true,
+  skin: 'material',
+  tagToBody: true
+};
+```
+
+In `21.1.2`, `tagToBody: true` moves the open panel to `document.body`, keeps it aligned to the original trigger, recalculates position on scroll and resize, and removes the body node on close or destroy. `appendToBody: true` is also accepted as an alias for teams that prefer that name.
+
 ## Events
 
 The classic output contract is preserved:

package/fesm2022/stackline-angular-multiselect-dropdown.mjs

@@ -1579,13 +1579,13 @@ class AngularMultiSelect {
         }
     }
     onScroll(event) {
-        if (this.isActive && this.settings.tagToBody) {
-            this.closeDropdown();
-            /*             const elem = this.stacklineDropdown.nativeElement;
-                        if(this.settings.autoPosition){
-                            this.dropDownTop = elem.getBoundingClientRect().y + elem.clientHeight + 1;
-                        }
-                        this.dropDownLeft = elem.getBoundingClientRect().x; */
+        if (this.isActive && this.isBodyOverlayEnabled()) {
+            this.scheduleDropdownPositionUpdate();
+        }
+    }
+    onResize(event) {
+        if (this.isActive && this.isBodyOverlayEnabled()) {
+            this.scheduleDropdownPositionUpdate();
         }
     }
     virtualdata = [];
@@ -1618,10 +1618,16 @@ class AngularMultiSelect {
     item;
     dropdownListYOffset = 0;
     subscription;
-    dropDownWidth = 0;
+    dropDownWidth = null;
     dropDownTop = null;
     dropDownBottom = null;
-    dropDownLeft = 0;
+    dropDownLeft = null;
+    dropdownOriginalParent = null;
+    dropdownOriginalNextSibling = null;
+    dropdownAppendedToBody = false;
+    overlayListenersBound = false;
+    overlayPositionTimer = null;
+    boundOverlayPositionUpdate = () => this.scheduleDropdownPositionUpdate();
     id = Math.random().toString(36).substring(2);
     listboxId = 'stackline-listbox-' + this.id;
     activeDescendantId = null;
@@ -1646,8 +1652,8 @@ class AngularMultiSelect {
         lazyLoading: false,
         labelKey: 'itemName',
         primaryKey: 'id',
-        theme: 'classic',
         skin: 'classic',
+        theme: '',
         position: 'bottom',
         autoPosition: true,
         enableFilterSelectAll: true,
@@ -1657,6 +1663,7 @@ class AngularMultiSelect {
         escapeToClose: true,
         clearAll: true,
         tagToBody: false,
+        appendToBody: false,
         ariaLabel: 'Select options',
         listboxAriaLabel: 'Available options',
         searchAriaLabel: 'Search options',
@@ -1677,7 +1684,7 @@ class AngularMultiSelect {
         this._elementRef = _elementRef;
         this.cdr = cdr;
         this.filterPipe = filterPipe;
-        this.searchTerm$.asObservable().pipe(debounceTime(1000), distinctUntilChanged(), tap(term => term)).subscribe(val => {
+        this.subscription = this.searchTerm$.asObservable().pipe(debounceTime(1000), distinctUntilChanged(), tap(term => term)).subscribe(val => {
             this.filterInfiniteList(val);
         });
     }
@@ -1695,19 +1702,19 @@ class AngularMultiSelect {
         });
         this.virtualScroollInit = false;
     }
-    getThemeName() {
-        var rawTheme = 'classic';
+    getSkinName() {
+        var rawSkin = 'classic';
         if (this.settings) {
-            rawTheme = this.settings.skin || this.settings.theme || 'classic';
+            rawSkin = this.settings.skin || this.settings.theme || 'classic';
         }
-        var theme = String(rawTheme).toLowerCase().replace(/[^a-z0-9_-]+/g, '-');
-        theme = theme.replace(/^-+|-+$/g, '');
-        return theme || 'classic';
+        var skin = String(rawSkin).toLowerCase().replace(/[^a-z0-9_-]+/g, '-');
+        skin = skin.replace(/^-+|-+$/g, '');
+        return skin || 'classic';
     }
     getDropdownClasses() {
-        var theme = this.getThemeName();
-        var classes = 'theme-' + theme;
-        if (theme !== 'classic' && theme !== 'material' && theme !== 'dark' && theme !== 'custom') {
+        var skin = this.getSkinName();
+        var classes = 'skin-' + skin + ' theme-' + skin;
+        if (skin !== 'classic' && skin !== 'material' && skin !== 'dark' && skin !== 'custom') {
             classes += ' theme-custom';
         }
         if (this.isActive) {
@@ -1721,6 +1728,113 @@ class AngularMultiSelect {
         }
         return classes;
     }
+    isBodyOverlayEnabled() {
+        return !!(this.settings && (this.settings.tagToBody || this.settings.appendToBody));
+    }
+    getDropdownPanelElement() {
+        if (!this.dropdownListElem || !this.dropdownListElem.nativeElement) {
+            return null;
+        }
+        return this.dropdownListElem.nativeElement;
+    }
+    getAnchorElement() {
+        if (this.selectedListElem && this.selectedListElem.nativeElement) {
+            return this.selectedListElem.nativeElement;
+        }
+        if (this.stacklineDropdown && this.stacklineDropdown.nativeElement) {
+            return this.stacklineDropdown.nativeElement;
+        }
+        return null;
+    }
+    getDropdownMaxHeight() {
+        return this.settings && this.settings.maxHeight ? this.settings.maxHeight : this.defaultSettings.maxHeight || 300;
+    }
+    appendDropdownPanelToBody() {
+        if (!this.isBodyOverlayEnabled() || !this.isActive || typeof document === 'undefined') {
+            this.restoreDropdownPanel();
+            return;
+        }
+        var panel = this.getDropdownPanelElement();
+        if (!panel || !document.body) {
+            return;
+        }
+        if (!this.dropdownAppendedToBody) {
+            this.dropdownOriginalParent = panel.parentNode;
+            this.dropdownOriginalNextSibling = panel.nextSibling;
+            document.body.appendChild(panel);
+            this.dropdownAppendedToBody = true;
+        }
+        this.bindOverlayListeners();
+    }
+    restoreDropdownPanel(removeFromDom = false) {
+        this.unbindOverlayListeners();
+        this.clearOverlayPositionTimer();
+        var panel = this.getDropdownPanelElement();
+        if (!panel || !this.dropdownAppendedToBody) {
+            this.dropdownAppendedToBody = false;
+            return;
+        }
+        if (removeFromDom) {
+            if (panel.parentNode) {
+                panel.parentNode.removeChild(panel);
+            }
+        }
+        else if (this.dropdownOriginalParent) {
+            if (this.dropdownOriginalNextSibling && this.dropdownOriginalNextSibling.parentNode === this.dropdownOriginalParent) {
+                this.dropdownOriginalParent.insertBefore(panel, this.dropdownOriginalNextSibling);
+            }
+            else {
+                this.dropdownOriginalParent.appendChild(panel);
+            }
+        }
+        this.dropdownOriginalParent = null;
+        this.dropdownOriginalNextSibling = null;
+        this.dropdownAppendedToBody = false;
+    }
+    bindOverlayListeners() {
+        if (this.overlayListenersBound || typeof window === 'undefined' || typeof document === 'undefined') {
+            return;
+        }
+        window.addEventListener('resize', this.boundOverlayPositionUpdate);
+        window.addEventListener('scroll', this.boundOverlayPositionUpdate, true);
+        document.addEventListener('scroll', this.boundOverlayPositionUpdate, true);
+        this.overlayListenersBound = true;
+    }
+    unbindOverlayListeners() {
+        if (!this.overlayListenersBound || typeof window === 'undefined' || typeof document === 'undefined') {
+            this.overlayListenersBound = false;
+            return;
+        }
+        window.removeEventListener('resize', this.boundOverlayPositionUpdate);
+        window.removeEventListener('scroll', this.boundOverlayPositionUpdate, true);
+        document.removeEventListener('scroll', this.boundOverlayPositionUpdate, true);
+        this.overlayListenersBound = false;
+    }
+    clearOverlayPositionTimer() {
+        if (this.overlayPositionTimer !== null) {
+            clearTimeout(this.overlayPositionTimer);
+            this.overlayPositionTimer = null;
+        }
+    }
+    scheduleDropdownPositionUpdate() {
+        if (!this.isActive || !this.isBodyOverlayEnabled() || this.overlayPositionTimer !== null) {
+            return;
+        }
+        this.overlayPositionTimer = setTimeout(() => {
+            this.overlayPositionTimer = null;
+            if (!this.isActive || !this.isBodyOverlayEnabled()) {
+                return;
+            }
+            this.appendDropdownPanelToBody();
+            this.calculateDropdownDirection();
+            this.cdr.detectChanges();
+        }, 0);
+    }
+    onDropdownPanelPointerDown(event) {
+        if (this.isBodyOverlayEnabled()) {
+            event.stopPropagation();
+        }
+    }
     getAriaLabel() {
         if (this.settings && this.settings.ariaLabel) {
             return this.settings.ariaLabel;
@@ -2140,6 +2254,14 @@ class AngularMultiSelect {
         }
         if (changes.settings && !changes.settings.firstChange) {
             this.settings = Object.assign(this.defaultSettings, this.settings);
+            if (this.isActive) {
+                if (this.isBodyOverlayEnabled()) {
+                    this.scheduleDropdownPositionUpdate();
+                }
+                else {
+                    this.restoreDropdownPanel();
+                }
+            }
         }
         if (changes.loading) {
         }
@@ -2164,6 +2286,9 @@ class AngularMultiSelect {
             this.selectedListHeight.val = this.selectedListElem.nativeElement.clientHeight;
             this.cdr.detectChanges();
         }
+        if (this.isActive && this.isBodyOverlayEnabled() && !this.dropdownAppendedToBody) {
+            this.appendDropdownPanelToBody();
+        }
         //this.calculateDropdownDirection();
     }
     onItemClick(item, index, evt) {
@@ -2200,6 +2325,7 @@ class AngularMultiSelect {
         if (this.settings.groupBy) {
             this.updateGroupInfo(item);
         }
+        this.scheduleDropdownPositionUpdate();
     }
     validate(c) {
         return null;
@@ -2317,7 +2443,9 @@ class AngularMultiSelect {
             return;
         }
         this.isActive = true;
+        this.appendDropdownPanelToBody();
         this.calculateDropdownDirection();
+        this.scheduleDropdownPositionUpdate();
         if (this.settings.searchAutofocus && this.searchInput && this.settings.enableSearchFilter && !this.searchTempl) {
             setTimeout(() => {
                 this.searchInput.nativeElement.focus();
@@ -2334,6 +2462,7 @@ class AngularMultiSelect {
         }
         this.filter = "";
         this.isActive = false;
+        this.restoreDropdownPanel();
         this.searchTerm$.next('');
         this.onClose.emit(false);
     }
@@ -2347,6 +2476,7 @@ class AngularMultiSelect {
             }
             this.filter = "";
             this.isActive = false;
+            this.restoreDropdownPanel();
             this.clearSearch();
             this.searchTerm$.next('');
             this.onClose.emit(false);
@@ -2387,6 +2517,7 @@ class AngularMultiSelect {
         }
         setTimeout(() => {
             this.calculateDropdownDirection();
+            this.scheduleDropdownPositionUpdate();
         });
         event.stopPropagation();
     }
@@ -2416,6 +2547,7 @@ class AngularMultiSelect {
                 });
             }
         });
+        this.scheduleDropdownPositionUpdate();
     }
     toggleFilterSelectAll() {
         if (!this.isFilterSelectAll) {
@@ -2483,6 +2615,7 @@ class AngularMultiSelect {
             this.isFilterSelectAll = false;
             this.onFilterDeSelectAll.emit(removed);
         }
+        this.scheduleDropdownPositionUpdate();
     }
     toggleInfiniteFilterSelectAll() {
         if (!this.isInfiniteFilterSelectAll) {
@@ -2501,6 +2634,7 @@ class AngularMultiSelect {
             });
             this.isInfiniteFilterSelectAll = false;
         }
+        this.scheduleDropdownPositionUpdate();
     }
     clearSearch() {
         if (this.settings.groupBy) {
@@ -2511,6 +2645,7 @@ class AngularMultiSelect {
         this.isFilterSelectAll = false;
         this.searchTerm$.next('');
         this.data = this.cachedItems;
+        this.scheduleDropdownPositionUpdate();
     }
     onFilterChange(data) {
         if (this.filter && this.filter == "" || data.length == 0) {
@@ -2530,6 +2665,7 @@ class AngularMultiSelect {
             this.isFilterSelectAll = false;
         }
         this.data = data;
+        this.scheduleDropdownPositionUpdate();
     }
     cloneArray(arr) {
         let i, copy;
@@ -2699,6 +2835,7 @@ class AngularMultiSelect {
         this.groupedData = this.groupCachedItems;
         this.searchTerm$.next('');
         this.infiniteFilterLength = 0;
+        this.scheduleDropdownPositionUpdate();
     }
     onScrollEnd(e) {
         if (e.endIndex === this.data.length - 1 || e.startIndex === 0) {
@@ -2706,9 +2843,11 @@ class AngularMultiSelect {
         this.onScrollToEnd.emit(e);
     }
     ngOnDestroy() {
+        this.restoreDropdownPanel(true);
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
+        this.searchTerm$.complete();
     }
     selectGroup(item) {
         if (item.disabled) {
@@ -2739,10 +2878,24 @@ class AngularMultiSelect {
     }
     calculateDropdownDirection() {
         let shouldOpenTowardsTop = this.settings.position == 'top';
-        const elem = this.stacklineDropdown.nativeElement;
-        const dropdownWidth = elem.clientWidth;
-        this.dropDownWidth = dropdownWidth;
-        this.dropDownLeft = this.settings.tagToBody ? elem.getBoundingClientRect().x : 0;
+        const elem = this.getAnchorElement();
+        if (!elem) {
+            return;
+        }
+        const elemBounds = elem.getBoundingClientRect();
+        const dropdownWidth = Math.round(elemBounds.width || elem.clientWidth || 0);
+        if (this.isBodyOverlayEnabled()) {
+            const viewportWidth = window.innerWidth || document.documentElement.clientWidth || dropdownWidth;
+            const maxWidth = Math.max(0, viewportWidth - 16);
+            const safeWidth = Math.max(0, Math.min(dropdownWidth, maxWidth));
+            const maxLeft = Math.max(8, viewportWidth - safeWidth - 8);
+            this.dropDownWidth = safeWidth || null;
+            this.dropDownLeft = Math.round(Math.max(8, Math.min(elemBounds.left, maxLeft)));
+        }
+        else {
+            this.dropDownWidth = null;
+            this.dropDownLeft = null;
+        }
         if (this.settings.position == 'top' && !this.settings.autoPosition) {
             this.openTowardsTop(true);
         }
@@ -2750,11 +2903,11 @@ class AngularMultiSelect {
             this.openTowardsTop(false);
         }
         if (this.settings.autoPosition) {
-            const dropdownHeight = this.defaultSettings.maxHeight;
+            const dropdownHeight = this.getDropdownMaxHeight() + 32;
             const viewportHeight = document.documentElement.clientHeight;
             const selectedListBounds = this.selectedListElem.nativeElement.getBoundingClientRect();
             const spaceOnTop = selectedListBounds.top;
-            const spaceOnBottom = viewportHeight - selectedListBounds.top;
+            const spaceOnBottom = viewportHeight - selectedListBounds.bottom;
             if (spaceOnBottom < spaceOnTop && dropdownHeight < spaceOnTop) {
                 this.openTowardsTop(true);
             }
@@ -2772,11 +2925,16 @@ class AngularMultiSelect {
         }
     }
     openTowardsTop(value) {
-        const elem = this.stacklineDropdown.nativeElement;
+        const elem = this.getAnchorElement();
+        if (!elem) {
+            return;
+        }
+        const elemBounds = elem.getBoundingClientRect();
+        const dropdownMaxHeight = this.getDropdownMaxHeight();
         if (value && this.selectedListElem.nativeElement.clientHeight) {
             this.dropdownListYOffset = 15 - this.selectedListElem.nativeElement.clientHeight;
-            if (this.settings.tagToBody) {
-                this.dropDownTop = (elem.getBoundingClientRect().y - this.selectedListElem.nativeElement.clientHeight * 2 - 15 - this.defaultSettings.maxHeight) + 'px';
+            if (this.isBodyOverlayEnabled()) {
+                this.dropDownTop = Math.max(8, elemBounds.top - dropdownMaxHeight - 15) + 'px';
                 this.dropDownBottom = null;
             }
             else {
@@ -2786,8 +2944,8 @@ class AngularMultiSelect {
             this.settings.position = 'top';
         }
         else {
-            if (this.settings.tagToBody) {
-                this.dropDownTop = (elem.getBoundingClientRect().y + elem.clientHeight + 1) + 'px';
+            if (this.isBodyOverlayEnabled()) {
+                this.dropDownTop = (elemBounds.bottom + 1) + 'px';
                 this.dropDownBottom = null;
             }
             else {
@@ -2810,6 +2968,7 @@ class AngularMultiSelect {
         this.onChangeCallback(this.selectedItems);
         this.onTouchedCallback(this.selectedItems);
         this.onDeSelectAll.emit(this.selectedItems);
+        this.scheduleDropdownPositionUpdate();
     }
     filteritems(evt) {
         this.filteredList = this.filterPipe.transform(this.cachedItems, evt.target.value, this.settings.searchBy);
@@ -2828,11 +2987,11 @@ class AngularMultiSelect {
         this.onFilterChange(this.filteredList);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AngularMultiSelect, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: ListFilterPipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: AngularMultiSelect, isStandalone: false, selector: "angular-multiselect, angular2-multiselect", inputs: { data: "data", settings: "settings", loading: "loading" }, outputs: { onSelect: "onSelect", onDeSelect: "onDeSelect", onSelectAll: "onSelectAll", onDeSelectAll: "onDeSelectAll", onOpen: "onOpen", onClose: "onClose", onScrollToEnd: "onScrollToEnd", onFilterSelectAll: "onFilterSelectAll", onFilterDeSelectAll: "onFilterDeSelectAll", onAddFilterNewItem: "onAddFilterNewItem", onGroupSelect: "onGroupSelect", onGroupDeSelect: "onGroupDeSelect" }, host: { listeners: { "document:keyup.escape": "onEscapeDown($event)", "window:scroll": "onScroll($event)" }, properties: { "class": "defaultSettings.classes" } }, providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALIDATION], queries: [{ propertyName: "itemTempl", first: true, predicate: Item, descendants: true }, { propertyName: "badgeTempl", first: true, predicate: Badge, descendants: true }, { propertyName: "searchTempl", first: true, predicate: Search, descendants: true }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "selectedListElem", first: true, predicate: ["selectedList"], descendants: true }, { propertyName: "dropdownListElem", first: true, predicate: ["dropdownList"], descendants: true }, { propertyName: "stacklineDropdown", first: true, predicate: ["stacklineDropdown"], descendants: true }, { propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true }, { propertyName: "virtualScroller", first: true, predicate: VirtualScrollerComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"stackline-dropdown\" [ngClass]=\"getDropdownClasses()\" (clickOutside)=\"closeDropdownOnClickOut()\" #stacklineDropdown>\n    <div class=\"selected-list\" #selectedList>\n        <div class=\"c-btn\"\n            #triggerButton\n            (click)=\"toggleDropdown($event)\"\n            (keydown)=\"onTriggerKeydown($event)\"\n            [ngClass]=\"{'disabled': settings.disabled, 'is-active': isActive, 'has-selection': selectedItems?.length > 0, 'single-select-mode': settings.singleSelection}\"\n            [attr.tabindex]=\"settings.disabled ? -1 : 0\"\n            role=\"combobox\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-controls]=\"listboxId\"\n            [attr.aria-expanded]=\"isActive\"\n            [attr.aria-disabled]=\"settings.disabled\"\n            [attr.aria-activedescendant]=\"activeDescendantId\"\n            [attr.aria-label]=\"settings.ariaLabelledBy ? null : getAriaLabel()\"\n            [attr.aria-labelledby]=\"settings.ariaLabelledBy || null\">\n\n            <span class=\"c-placeholder\" *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n            <span class=\"c-single-value\" *ngIf=\"settings.singleSelection && !badgeTempl\">\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\">\n                    {{item[settings.labelKey]}}\n                </span>\n            </span>\n            <span class=\"c-list c-chip-list\" *ngIf=\"selectedItems?.length > 0 && settings.singleSelection && badgeTempl \">\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\">\n                    <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\n\n                    <span *ngIf=\"badgeTempl\" class=\"c-label\">\n                        <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\"></c-templateRenderer>\n                    </span>\n                    <button type=\"button\" class=\"c-remove\" (click)=\"onItemClick(item,k,$event);$event.stopPropagation()\" (keydown)=\"onInlineActionKeydown($event)\" [attr.aria-label]=\"getRemoveItemAriaLabel(item)\">\n                        <c-icon [name]=\"'remove'\"></c-icon>\n                    </button>\n                </div>\n            </span>\n            <div class=\"c-list c-chip-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n                <ng-container *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\">\n                    <div class=\"c-token\" *ngIf=\"shouldShowSelectedBadge(k)\">\n                        <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\n                        <span *ngIf=\"badgeTempl\" class=\"c-label\">\n                            <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\"></c-templateRenderer>\n                        </span>\n                        <button type=\"button\" class=\"c-remove\" (click)=\"onItemClick(item,k,$event);$event.stopPropagation()\" (keydown)=\"onInlineActionKeydown($event)\" [attr.aria-label]=\"getRemoveItemAriaLabel(item)\">\n                            <c-icon [name]=\"'remove'\"></c-icon>\n                        </button>\n                    </div>\n                </ng-container>\n            </div>\n            <span class=\"countplaceholder\" *ngIf=\"getHiddenSelectedCount() > 0\">+{{getHiddenSelectedCount()}}</span>\n            <button type=\"button\" class=\"c-remove clear-all\" *ngIf=\"settings.clearAll && selectedItems?.length > 0 && !settings.disabled\" (click)=\"clearSelection($event);$event.stopPropagation()\" (keydown)=\"onInlineActionKeydown($event)\" [attr.aria-label]=\"getClearAllAriaLabel()\">\n                <c-icon [name]=\"'remove'\"></c-icon>\n            </button>\n            <button type=\"button\" *ngIf=\"!isActive\" class=\"c-angle-down c-arrow-toggle\" [disabled]=\"settings.disabled\" (click)=\"toggleDropdown($event);$event.stopPropagation()\" (keydown)=\"onArrowButtonKeydown($event)\" [attr.aria-label]=\"getOpenDropdownAriaLabel()\" [attr.aria-controls]=\"listboxId\" [attr.aria-expanded]=\"isActive\">\n                <c-icon [name]=\"'angle-down'\"></c-icon>\n            </button>\n            <button type=\"button\" *ngIf=\"isActive\" class=\"c-angle-up c-arrow-toggle\" [disabled]=\"settings.disabled\" (click)=\"toggleDropdown($event);$event.stopPropagation()\" (keydown)=\"onArrowButtonKeydown($event)\" [attr.aria-label]=\"getCloseDropdownAriaLabel()\" [attr.aria-controls]=\"listboxId\" [attr.aria-expanded]=\"isActive\">\n                <c-icon [name]=\"'angle-up'\"></c-icon>\n\n            </button>\n        </div>\n    </div>\n    <div #dropdownList class=\"dropdown-list animated fadeIn\"\n    [ngClass]=\"{'tagToBody': settings.tagToBody, 'opens-up': settings.position == 'top', 'opens-down': settings.position == 'bottom'}\"\n    [style.width.px]=\"dropDownWidth\" \n    [style.top]=\"dropDownTop\" \n    [style.bottom]=\"dropDownBottom\"\n    [style.left.px]=\"dropDownLeft\" \n        role=\"presentation\"\n        [attr.aria-hidden]=\"!isActive\"\n        [hidden]=\"!isActive\">\n        <div [ngClass]=\"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\" class=\"arrow-2\"></div>\n        <div [ngClass]=\"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\"></div>\n        <div class=\"list-area\" [ngClass]=\"{'single-select-mode': settings.singleSelection }\">\n            <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection && data?.length > 0 && !isDisabledItemPresent\"\n                >\n                <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                [id]=\"id\" (change)=\"toggleSelectAll($event)\"/>\n                <label [for]=\"id\">\n                    <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n                    <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n                </label>\n            </div>\n            <img class=\"loading-icon\" *ngIf=\"loading\" src=\"assets/img/loading.gif\" [attr.alt]=\"settings.loadingText\" />\n            <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter\">\n                <span class=\"c-search\" id=\"searchIcon\" aria-hidden=\"true\">\n                    <c-icon [name]=\"'search'\"></c-icon>\n                </span>\n                <button type=\"button\" *ngIf=\"!settings.lazyLoading\" [hidden]=\"filter == undefined || filter?.length == 0\" class=\"c-clear\" (click)=\"clearSearch()\" (keydown)=\"onInlineActionKeydown($event)\" [attr.aria-label]=\"getClearSearchAriaLabel()\">\n                    <c-icon [name]=\"'clear'\"></c-icon>\n                </button>\n                <button type=\"button\" *ngIf=\"settings.lazyLoading\" [hidden]=\"filter == undefined || filter?.length == 0\" class=\"c-clear\" (click)=\"resetInfiniteSearch()\" (keydown)=\"onInlineActionKeydown($event)\" [attr.aria-label]=\"getClearSearchAriaLabel()\">\n                    <c-icon [name]=\"'clear'\"></c-icon>\n                </button>\n\n                <input class=\"c-input\" *ngIf=\"settings.groupBy && !settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                    [(ngModel)]=\"filter\" (keyup)=\"filterGroupedList()\" (keydown)=\"onSearchKeydown($event)\" [attr.aria-label]=\"getSearchAriaLabel()\">\n                <input class=\"c-input\" *ngIf=\"!settings.groupBy && !settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                    [(ngModel)]=\"filter\" (keyup)=\"filteritems($event)\" (keydown)=\"onSearchKeydown($event)\" [attr.aria-label]=\"getSearchAriaLabel()\">\n                <input class=\"c-input\" *ngIf=\"settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                    [(ngModel)]=\"filter\" (keyup)=\"onKeyUp($event)\" (keydown)=\"onSearchKeydown($event)\" [attr.aria-label]=\"getSearchAriaLabel()\">\n                <!--            <input class=\"c-input\" *ngIf=\"!settings.lazyLoading && !searchTempl && settings.groupBy\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                [(ngModel)]=\"filter\" (keyup)=\"filterGroupList($event)\">-->\n                <c-templateRenderer *ngIf=\"searchTempl\" [data]=\"searchTempl\" [item]=\"item\"></c-templateRenderer>\n            </div>\n            <div class=\"filter-select-all\" *ngIf=\"!settings.lazyLoading && settings.enableFilterSelectAll && !isDisabledItemPresent\">\n                <div class=\"pure-checkbox select-all\" *ngIf=\"!settings.groupBy && filter?.length > 0 && filterLength > 0  && !settings.singleSelection\" (click)=\"toggleFilterSelectAll()\" (keydown)=\"onSelectAllKeydown($event, 'filter')\" tabindex=\"0\" role=\"checkbox\" [attr.aria-checked]=\"isFilterSelectAll\">\n                    <input type=\"checkbox\" [checked]=\"isFilterSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                    aria-hidden=\"true\" tabindex=\"-1\" (click)=\"$event.stopPropagation()\" (change)=\"toggleFilterSelectAll()\"/>\n                    <label>\n                        <span [hidden]=\"isFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n                        <span [hidden]=\"!isFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n                    </label>\n                </div>\n                <div class=\"pure-checkbox select-all\" *ngIf=\"settings.groupBy && filter?.length > 0 && groupedData?.length > 0  && !settings.singleSelection\" (click)=\"toggleFilterSelectAll()\" (keydown)=\"onSelectAllKeydown($event, 'filter')\" tabindex=\"0\" role=\"checkbox\" [attr.aria-checked]=\"isFilterSelectAll\">\n                    <input type=\"checkbox\" [checked]=\"isFilterSelectAll && filter?.length > 0\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                    aria-hidden=\"true\" tabindex=\"-1\" (click)=\"$event.stopPropagation()\" (change)=\"toggleFilterSelectAll()\"/>\n                    <label>\n                        <span [hidden]=\"isFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n                        <span [hidden]=\"!isFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n                    </label>\n                </div>\n            </div>\n            <div class=\"filter-select-all\" *ngIf=\"settings.lazyLoading && settings.enableFilterSelectAll && !isDisabledItemPresent && !settings.singleSelection\">\n                <div class=\"pure-checkbox select-all\" *ngIf=\"filter?.length > 0 && infiniteFilterLength > 0\" (click)=\"toggleInfiniteFilterSelectAll()\" (keydown)=\"onSelectAllKeydown($event, 'infinite-filter')\" tabindex=\"0\" role=\"checkbox\" [attr.aria-checked]=\"isInfiniteFilterSelectAll\">\n                    <input type=\"checkbox\" [checked]=\"isInfiniteFilterSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                    aria-hidden=\"true\" tabindex=\"-1\" (click)=\"$event.stopPropagation()\" (change)=\"toggleInfiniteFilterSelectAll()\"/>\n                    <label>\n                        <span [hidden]=\"isInfiniteFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n                        <span [hidden]=\"!isInfiniteFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n                    </label>\n                </div>\n            </div>\n            <div class=\"filter-select-all\" *ngIf=\"filter?.length\">\n                <div class=\"btn-container\" *ngIf=\"settings.addNewItemOnFilter\">\n                    <button class=\"c-btn btn-iceblue\" (click)=\"addFilterNewItem()\">{{settings.addNewButtonText}}</button>\n                </div>\n            </div>\n\n            <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <li *ngFor=\"let item of data; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,i,'default')\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,i,'default')\" (keydown)=\"onOptionKeydown(item,i,$event,'default')\" [ngClass]=\"{'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\">\n                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                        <label>{{item[settings.labelKey]}}</label>\n                    </li>\n                </ul>\n            </div>\n            <!-- lazy loading -->\n            <div *ngIf=\"!settings.groupBy && settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul virtualScroller #scroll [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                    (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <li *ngFor=\"let item of scroll.viewPortItems; let i = index;\" (click)=\"onItemClick(item,getVirtualItemIndex(item,i,scroll),$event)\"\n                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,getVirtualItemIndex(item,i,scroll),'lazy')\" [attr.data-virtual-index]=\"getVirtualItemIndex(item,i,scroll)\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,getVirtualItemIndex(item,i,scroll),'lazy')\" (keydown)=\"onOptionKeydown(item,getVirtualItemIndex(item,i,scroll),$event,'lazy',scroll)\" [ngClass]=\"{'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\">\n                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                        <label>{{item[settings.labelKey]}}</label>\n                    </li>\n                </ul>\n            </div>\n            <!-- custom template -->\n            <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <li *ngFor=\"let item of data; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,i,'custom')\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,i,'custom')\" (keydown)=\"onOptionKeydown(item,i,$event,'custom')\" [ngClass]=\"{'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\">\n                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                        <label></label>\n                        <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n                    </li>\n                </ul>\n            </div>\n            <!-- lazy loading and custom template -->\n            <div *ngIf=\"!settings.groupBy && settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul virtualScroller #scroll2 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                    (vsEnd)=\"onScrollEnd($event)\" class=\"lazyContainer\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <li *ngFor=\"let item of scroll2.viewPortItems; let i = index;\" (click)=\"onItemClick(item,getVirtualItemIndex(item,i,scroll2),$event)\"\n                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,getVirtualItemIndex(item,i,scroll2),'lazy-custom')\" [attr.data-virtual-index]=\"getVirtualItemIndex(item,i,scroll2)\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,getVirtualItemIndex(item,i,scroll2),'lazy-custom')\" (keydown)=\"onOptionKeydown(item,getVirtualItemIndex(item,i,scroll2),$event,'lazy-custom',scroll2)\" [ngClass]=\"{'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\">\n                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                        <label></label>\n                        <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n                    </li>\n                </ul>\n            </div>\n            <!-- lazy loading, group By and custom template -->\n            <div *ngIf=\"settings.groupBy && settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul virtualScroller #scroll3 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                    (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <span *ngFor=\"let item of scroll3.viewPortItems; let i = index;\">\n                        <li (click)=\"onItemClick(item,getVirtualItemIndex(item,i,scroll3),$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item)}\"\n                            class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,getVirtualItemIndex(item,i,scroll3),'lazy-group-custom')\" [attr.data-virtual-index]=\"getVirtualItemIndex(item,i,scroll3)\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,getVirtualItemIndex(item,i,scroll3),'lazy-group-custom')\" (keydown)=\"onOptionKeydown(item,getVirtualItemIndex(item,i,scroll3),$event,'lazy-group-custom',scroll3)\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            aria-hidden=\"true\" tabindex=\"-1\"/>\n                            <label></label>\n                            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n                        </li>\n                        <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection}\"\n                            class=\"pure-checkbox\" role=\"presentation\">\n                            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            aria-hidden=\"true\" tabindex=\"-1\"/>\n                            <label></label>\n                            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n                        </li>\n                    </span>\n                </ul>\n            </div>\n            <!-- group By and custom template -->\n            <div *ngIf=\"settings.groupBy && !settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <span *ngFor=\"let item of groupedData; let i = index;\">\n                        <li (click)=\"selectGroup(item)\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': item.selected == true, 'is-disabled': isOptionDisabled(item)}\"\n                            class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,i,'group-custom')\" [attr.aria-selected]=\"item.selected\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,i,'group-custom')\" (keydown)=\"onGroupKeydown(item,i,$event,'group-custom')\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\" [checked]=\"item.selected\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            aria-hidden=\"true\" tabindex=\"-1\"/>\n                            <label>{{item[settings.labelKey]}}</label>\n                            <ul class=\"lazyContainer\">\n                                <span *ngFor=\"let val of item.list ; let j = index;\">\n                                    <li (click)=\"onItemClick(val,j,$event); $event.stopPropagation()\" [ngClass]=\"{'grp-title': val.grpTitle,'grp-item': !val.grpTitle && !settings.singleSelection, 'selected-item': isSelected(val) == true, 'is-disabled': isOptionDisabled(val)}\"\n                                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(val,j,'group-custom-'+i)\" [attr.aria-selected]=\"isSelected(val)\" [attr.aria-disabled]=\"isOptionDisabled(val)\" [attr.tabindex]=\"isOptionDisabled(val) ? -1 : 0\" (focus)=\"setActiveDescendant(val,j,'group-custom-'+i)\" (keydown)=\"onOptionKeydown(val,j,$event,'group-custom-'+i)\">\n                                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(val)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(val)) || val.disabled\"\n                                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                                        <label></label>\n                                        <c-templateRenderer [data]=\"itemTempl\" [item]=\"val\"></c-templateRenderer>\n                                    </li>\n                                </span>\n                            </ul>\n\n                        </li>\n                    </span>\n                </ul>\n            </div>\n            <!-- lazy loading, group By -->\n            <div *ngIf=\"settings.groupBy && settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <virtual-scroller [items]=\"groupedData\" (vsUpdate)=\"viewPortItems = $event\" (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n                    <ul virtualScroller #scroll4 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                        (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                        <span *ngFor=\"let item of scroll4.viewPortItems; let i = index;\">\n                            <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true }\"\n                                class=\"pure-checkbox\" role=\"presentation\">\n                                <input *ngIf=\"settings.showCheckbox && !item.grpTitle && !settings.singleSelection\" type=\"checkbox\" [checked]=\"isSelected(item)\"\n                                    [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                                    aria-hidden=\"true\" tabindex=\"-1\"/>\n                                <label>{{item[settings.labelKey]}}</label>\n                            </li>\n                            <li (click)=\"onItemClick(item,getVirtualItemIndex(item,i,scroll4),$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\"\n                                class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,getVirtualItemIndex(item,i,scroll4),'lazy-group')\" [attr.data-virtual-index]=\"getVirtualItemIndex(item,i,scroll4)\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,getVirtualItemIndex(item,i,scroll4),'lazy-group')\" (keydown)=\"onOptionKeydown(item,getVirtualItemIndex(item,i,scroll4),$event,'lazy-group',scroll4)\">\n                                <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                                aria-hidden=\"true\" tabindex=\"-1\"/>\n                                <label>{{item[settings.labelKey]}}</label>\n                            </li>\n                        </span>\n                    </ul>\n                </virtual-scroller>\n            </div>\n            <!-- group By -->\n            <div *ngIf=\"settings.groupBy && !settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <span *ngFor=\"let item of groupedData ; let i = index;\">\n                        <li (click)=\"selectGroup(item)\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': item.selected == true, 'is-disabled': isOptionDisabled(item)}\"\n                            class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,i,'group')\" [attr.aria-selected]=\"item.selected\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,i,'group')\" (keydown)=\"onGroupKeydown(item,i,$event,'group')\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\" [checked]=\"item.selected\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            aria-hidden=\"true\" tabindex=\"-1\"/>\n                            <label>{{item[settings.labelKey]}}</label>\n                            <ul class=\"lazyContainer\">\n                                <span *ngFor=\"let val of item.list ; let j = index;\">\n                                    <li (click)=\"onItemClick(val,j,$event); $event.stopPropagation()\" [ngClass]=\"{'selected-item': isSelected(val) == true,'grp-title': val.grpTitle,'grp-item': !val.grpTitle && !settings.singleSelection, 'is-disabled': isOptionDisabled(val)}\"\n                                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(val,j,'group-'+i)\" [attr.aria-selected]=\"isSelected(val)\" [attr.aria-disabled]=\"isOptionDisabled(val)\" [attr.tabindex]=\"isOptionDisabled(val) ? -1 : 0\" (focus)=\"setActiveDescendant(val,j,'group-'+i)\" (keydown)=\"onOptionKeydown(val,j,$event,'group-'+i)\">\n                                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(val)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(val)) || val.disabled\"\n                                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                                        <label>{{val[settings.labelKey]}}</label>\n                                    </li>\n                                </span>\n                            </ul>\n                        </li>\n                    </span>\n                    <!-- <span *ngFor=\"let item of groupedData ; let i = index;\">\n                    <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n                    <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\n                    <label>{{item[settings.labelKey]}}</label>\n                </li>\n                <li *ngIf=\"item.grpTitle && !settings.selectGroup\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n                    <input *ngIf=\"settings.showCheckbox && settings.selectGroup\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\n                    <label>{{item[settings.labelKey]}}</label>\n                </li>\n                 <li  (click)=\"selectGroup(item)\" *ngIf=\"item.grpTitle && settings.selectGroup\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n                    <input *ngIf=\"settings.showCheckbox && settings.selectGroup\" type=\"checkbox\" [checked]=\"item.selected\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\n                    <label>{{item[settings.labelKey]}}</label>\n                </li>\n                </span> -->\n                </ul>\n            </div>\n            <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">{{settings.noDataLabel}}</h5>\n        </div>\n    </div>\n</div>\n", styles: ["virtual-scroll{display:block;width:100%}.stackline-dropdown{--ms-primary: #3f51b5;--ms-primary-soft: rgba(63, 81, 181, .12);--ms-surface: #ffffff;--ms-surface-soft: #f5f7fb;--ms-surface-muted: #e8eaf6;--ms-outline: #c5cae9;--ms-outline-strong: #7986cb;--ms-on-surface: #212121;--ms-on-surface-muted: #5f6368;--ms-chip-bg: #e8eaf6;--ms-chip-text: #303f9f;--ms-chip-remove: #303f9f;--ms-shadow: 0 1px 2px rgba(33, 33, 33, .16), 0 12px 32px rgba(63, 81, 181, .12);--ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, .12), 0 4px 12px rgba(33, 33, 33, .08);position:relative;display:block;width:100%;color:var(--ms-on-surface);font:inherit}.selected-list{width:100%}.c-btn{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:8px;width:100%;min-height:56px;padding:11px 54px 11px 16px;border-radius:18px;border:1px solid var(--ms-outline);background:var(--ms-surface);box-shadow:var(--ms-shadow-soft);cursor:pointer;line-height:1.45;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease,transform .16s ease}.c-btn:hover{border-color:var(--ms-outline-strong)}.c-btn.is-active{border-color:var(--ms-primary);box-shadow:0 0 0 3px #6750a424,var(--ms-shadow-soft)}.c-btn:focus-visible{outline:3px solid rgba(63,81,181,.32);outline-offset:2px}.c-btn.disabled{cursor:not-allowed;opacity:.72}.c-placeholder,.c-single-value{color:var(--ms-on-surface-muted);font-size:.95rem}.c-btn.has-selection .c-single-value,.c-btn.has-selection .c-placeholder{color:var(--ms-on-surface);font-weight:500}.c-list{display:flex;flex:1 1 auto;flex-wrap:wrap;gap:8px;margin:0;padding:0;min-width:0}.c-chip-list{padding-right:8px}.c-token{position:relative;display:inline-block;vertical-align:middle;min-height:32px;max-width:100%;padding:6px 30px 6px 12px;border-radius:999px;background:var(--ms-chip-bg);color:var(--ms-chip-text);box-shadow:inset 0 0 0 1px #6750a414;line-height:1.35;white-space:normal;overflow-wrap:anywhere}.c-token .c-label{display:inline-flex;align-items:center;min-width:0;max-width:100%;line-height:1.3;font-weight:500;white-space:normal;overflow-wrap:anywhere}.c-remove{position:absolute;right:10px;top:50%;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;transform:translateY(-50%);color:var(--ms-chip-remove)}button.c-remove,button.c-clear,button.c-arrow-toggle{border:0;padding:0;background:transparent;font:inherit;cursor:pointer}button.c-arrow-toggle:disabled{cursor:not-allowed}.c-remove:focus-visible,.list-filter .c-clear:focus-visible,.c-arrow-toggle:focus-visible{outline:3px solid rgba(63,81,181,.32);outline-offset:2px}.c-remove svg,.c-angle-down svg,.c-angle-up svg{fill:currentColor}.c-remove c-icon{display:inline-flex;width:10px;height:10px;line-height:0}.clear-all c-icon{width:12px;height:12px}.clear-all{position:absolute;top:50%;right:42px;width:20px;height:20px;transform:translateY(-50%);color:var(--ms-on-surface-muted)}.countplaceholder{position:absolute;top:50%;right:76px;transform:translateY(-50%);color:var(--ms-on-surface-muted);font-size:.8rem;font-weight:600}.c-angle-down,.c-angle-up{position:absolute;top:50%;right:16px;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;transform:translateY(-50%);color:var(--ms-on-surface-muted);pointer-events:auto}.dropdown-list{position:absolute;width:100%;padding-top:8px;z-index:99999}.dropdown-list.tagToBody{position:fixed}.arrow-up,.arrow-down,.arrow-2{display:none}.list-area{overflow:hidden;border-radius:22px;background:var(--ms-surface);border:1px solid var(--ms-outline);box-shadow:var(--ms-shadow)}.select-all,.filter-select-all{padding:10px 14px;border-bottom:1px solid rgba(125,119,134,.16);background:#f7f2fac2}.list-filter{position:relative;display:flex;align-items:center;min-height:52px;padding-left:48px;padding-right:44px;border-bottom:1px solid rgba(125,119,134,.16);background:var(--ms-surface)}.list-filter .c-input,.list-filter input{width:100%;height:100%;border:0;background:transparent;color:var(--ms-on-surface);font:inherit}.list-filter .c-input::placeholder,.list-filter input::placeholder{color:var(--ms-on-surface-muted)}.list-filter .c-input:focus,.list-filter input:focus{outline:none}.list-filter .c-search,.list-filter .c-clear{position:absolute;top:50%;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;transform:translateY(-50%);color:var(--ms-on-surface-muted)}.list-filter .c-search{left:16px}.list-filter .c-clear{right:16px;cursor:pointer}.btn-container{padding:10px 14px 14px;text-align:center}.btn-iceblue{width:100%;min-height:40px;border-radius:999px;border:1px solid transparent;background:var(--ms-primary);color:#fff;font-weight:600}.dropdown-list ul{list-style:none;margin:0;padding:8px;overflow:auto}.dropdown-list ul li{align-items:center;min-height:0;margin:4px;padding:12px 14px;border-radius:14px;cursor:pointer;text-align:left;line-height:1.35;transition:background-color .16s ease,color .16s ease}.dropdown-list ul li:hover{background:var(--ms-surface-soft)}.dropdown-list ul li:focus-visible{outline:3px solid rgba(63,81,181,.32);outline-offset:2px}.dropdown-option.is-disabled{cursor:not-allowed;opacity:.58}.selected-item{background:var(--ms-primary-soft)!important;color:var(--ms-primary)}.selected-item:hover{background:#6750a42e!important}.grp-item{padding-left:42px!important}.grp-title{margin-top:6px;padding-top:10px!important;padding-bottom:8px!important;background:transparent!important;color:var(--ms-on-surface-muted);cursor:default!important}.grp-title label{margin-bottom:0!important;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.grp-title:hover{background:transparent!important}.pure-checkbox{position:relative}.pure-checkbox input[type=checkbox]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pure-checkbox input[type=checkbox]+label{position:relative;display:block;width:100%;margin:0;padding-left:32px;color:inherit;cursor:pointer;font-weight:500;-webkit-user-select:none;user-select:none}.pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:0;width:18px;height:18px;margin-top:-10px;border:2px solid var(--ms-outline-strong);border-radius:6px;background:var(--ms-surface);transition:all .18s ease}.pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:5px;width:7px;height:3px;margin-top:-3px;border-style:solid;border-width:0 0 2px 2px;border-color:#fff;transform:rotate(-45deg) scale(0);transform-origin:50%;transition:transform .16s ease-out}.pure-checkbox input[type=checkbox]:focus+label:before,.pure-checkbox input[type=checkbox]:hover+label:before{border-color:var(--ms-primary);box-shadow:0 0 0 4px #3f51b51f}.pure-checkbox input[type=checkbox]:checked+label:before{border-color:var(--ms-primary);background:var(--ms-primary)}.pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.pure-checkbox input[type=checkbox]:disabled+label{color:#b1acb8;cursor:not-allowed}.pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#d5d0db;background:#f2edf7;box-shadow:none}.single-select-mode .pure-checkbox input[type=checkbox]+label:before,.single-select-mode .pure-checkbox input[type=checkbox]+label:after{opacity:0}.single-select-mode .pure-checkbox input[type=checkbox]+label{padding-left:0}.list-message,.nodata-label{margin:0;padding:22px 16px 24px;color:var(--ms-on-surface-muted);text-align:center;font-size:.95rem;font-weight:500}.list-grp{padding:0 15px!important}.list-grp h4{margin:16px 0 6px;color:var(--ms-on-surface);font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.list-grp>li{padding-left:15px!important}.loading-icon{position:absolute;top:18px;right:16px;width:18px;z-index:2}.dropdown-list ::-webkit-scrollbar{width:10px}.dropdown-list ::-webkit-scrollbar-thumb{background:#7d778657;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.dropdown-list ::-webkit-scrollbar-track{background:transparent}.stackline-dropdown.theme-dark{--ms-primary: #8ab4f8;--ms-primary-soft: rgba(138, 180, 248, .18);--ms-surface: #151a23;--ms-surface-soft: #202736;--ms-surface-muted: #111722;--ms-outline: #384456;--ms-outline-strong: #8ab4f8;--ms-on-surface: #edf2f7;--ms-on-surface-muted: #aab6c5;--ms-chip-bg: #263247;--ms-chip-text: #d7e6ff;--ms-chip-remove: #d7e6ff;--ms-shadow: 0 20px 50px rgba(0, 0, 0, .42);--ms-shadow-soft: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 24px rgba(0, 0, 0, .28)}.stackline-dropdown.theme-custom{--ms-primary: var(--stackline-ms-primary, #0f766e);--ms-primary-soft: var(--stackline-ms-primary-soft, rgba(15, 118, 110, .14));--ms-surface: var(--stackline-ms-surface, #ffffff);--ms-surface-soft: var(--stackline-ms-surface-soft, #ecfdf5);--ms-surface-muted: var(--stackline-ms-surface-muted, #d1fae5);--ms-outline: var(--stackline-ms-outline, #99f6e4);--ms-outline-strong: var(--stackline-ms-outline-strong, #0f766e);--ms-on-surface: var(--stackline-ms-on-surface, #102a2a);--ms-on-surface-muted: var(--stackline-ms-on-surface-muted, #47615f);--ms-chip-bg: var(--stackline-ms-chip-bg, #ccfbf1);--ms-chip-text: var(--stackline-ms-chip-text, #115e59);--ms-chip-remove: var(--stackline-ms-chip-remove, #115e59);--ms-shadow: var(--stackline-ms-shadow, 0 18px 42px rgba(15, 118, 110, .15));--ms-shadow-soft: var(--stackline-ms-shadow-soft, 0 1px 2px rgba(15, 118, 110, .16), 0 8px 18px rgba(15, 118, 110, .09))}.stackline-dropdown.theme-classic{--ms-primary: #0079fe;--ms-primary-soft: #e9f4ff;--ms-surface: #ffffff;--ms-surface-soft: #f5f5f5;--ms-outline: #cccccc;--ms-outline-strong: #0079fe;--ms-on-surface: #333333;--ms-on-surface-muted: #333333;--ms-chip-bg: #0079fe;--ms-chip-text: #ffffff;--ms-chip-remove: #ffffff;--ms-shadow: 0 1px 5px #959595;--ms-shadow-soft: 0 1px 5px #959595;color:#333}.stackline-dropdown.theme-classic .selected-list{width:100%}.stackline-dropdown.theme-classic .c-btn{display:flex;align-items:center;flex-wrap:nowrap;gap:6px;min-height:42px;padding:10px 68px 10px 10px;border:1px solid #cccccc;border-radius:3px;background:#fff;box-shadow:0 1px 5px #959595;color:#333;font-size:14px;line-height:1.35}.stackline-dropdown.theme-classic .c-btn.is-active,.stackline-dropdown.theme-classic .c-btn:hover{border-color:#ccc;box-shadow:0 1px 5px #959595}.stackline-dropdown.theme-classic .c-btn.disabled{background:#ccc;opacity:1}.stackline-dropdown.theme-classic .c-placeholder,.stackline-dropdown.theme-classic .c-single-value{color:#333;font-size:14px}.stackline-dropdown.theme-classic .c-list{display:flex;flex:1 1 auto;align-items:center;flex-wrap:wrap;gap:4px;width:auto;min-width:0;margin:0;padding:0}.stackline-dropdown.theme-classic .c-chip-list{padding-right:0}.stackline-dropdown.theme-classic .c-token{display:inline-block;min-height:0;margin:2px 0 0;padding:2px 24px 2px 6px;border-radius:2px;background:#0079fe;box-shadow:none;color:#fff;line-height:1.4}.stackline-dropdown.theme-classic .c-token .c-label{display:inline;color:#fff;font-size:14px;font-weight:400;line-height:1.4}.stackline-dropdown.theme-classic .c-remove{right:5px;width:14px;height:14px;color:#fff}.stackline-dropdown.theme-classic .c-remove c-icon{width:9px;height:9px}.stackline-dropdown.theme-classic .clear-all{right:42px;width:18px;height:18px;color:#333}.stackline-dropdown.theme-classic .clear-all c-icon{width:11px;height:11px}.stackline-dropdown.theme-classic .countplaceholder{right:76px;color:#333;font-size:14px;font-weight:400}.stackline-dropdown.theme-classic .c-angle-down,.stackline-dropdown.theme-classic .c-angle-up{right:10px;width:20px;height:20px;color:#333}.stackline-dropdown.theme-classic .dropdown-list{padding-top:14px;padding-bottom:0;z-index:9999}.stackline-dropdown.theme-classic .dropdown-list.opens-up{padding-top:0;padding-bottom:14px}.stackline-dropdown.theme-classic .dropdown-list.opens-down{padding-top:14px;padding-bottom:0}.stackline-dropdown.theme-classic .arrow-up{display:block;position:absolute;top:0;width:0;height:0;margin-left:15px;border-right:13px solid transparent;border-bottom:15px solid #ffffff;border-left:13px solid transparent}.stackline-dropdown.theme-classic .arrow-2{top:-1px;border-bottom-color:#ccc}.stackline-dropdown.theme-classic .arrow-down{display:block;position:absolute;top:auto;bottom:0;width:0;height:0;margin-left:15px;border-right:13px solid transparent;border-top:15px solid #ffffff;border-left:13px solid transparent}.stackline-dropdown.theme-classic .arrow-down.arrow-2{top:auto;bottom:-1px;border-top-color:#ccc}.stackline-dropdown.theme-classic .list-area{overflow:hidden;margin:0;border:1px solid #cccccc;border-radius:3px;background:#fff;box-shadow:0 1px 5px #959595}.stackline-dropdown.theme-classic .select-all,.stackline-dropdown.theme-classic .filter-select-all{padding:10px;border-bottom:1px solid #cccccc;background:#fff}.stackline-dropdown.theme-classic .list-filter{display:block;min-height:35px;padding:0;border-bottom:1px solid #cccccc;background:#fff}.stackline-dropdown.theme-classic .list-filter .c-input,.stackline-dropdown.theme-classic .list-filter input{height:35px;padding:0 35px;color:#333}.stackline-dropdown.theme-classic .list-filter .c-search{left:13px}.stackline-dropdown.theme-classic .list-filter .c-clear{right:13px}.stackline-dropdown.theme-classic .btn-container{padding:10px}.stackline-dropdown.theme-classic .btn-iceblue{min-height:35px;border-radius:3px;background:#0079fe}.stackline-dropdown.theme-classic .dropdown-list ul{margin:0;padding:0}.stackline-dropdown.theme-classic .dropdown-list ul li{min-height:0;margin:0;padding:10px;border-radius:0;color:#333;line-height:1.35}.stackline-dropdown.theme-classic .dropdown-list ul li:hover{background:#f5f5f5}.stackline-dropdown.theme-classic .selected-item,.stackline-dropdown.theme-classic .selected-item:hover{background:#e9f4ff!important;color:#333}.stackline-dropdown.theme-classic .grp-item{padding-left:30px!important}.stackline-dropdown.theme-classic .grp-title{color:#000}.stackline-dropdown.theme-classic .grp-title label,.stackline-dropdown.theme-classic .list-grp h4{font-size:14px;font-weight:700;letter-spacing:0;text-transform:capitalize}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]+label{padding-left:2em;color:#000;font-weight:300}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]+label:before{width:14px;height:14px;margin-top:-9px;border:2px solid #0079fe;border-radius:0;background:#fff}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]+label:after{top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-width:0 0 3px 3px;border-color:#fff;background:transparent}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]:hover+label:before{border-color:#0079fe;background-color:#f2f2f2;box-shadow:none}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]:checked+label:before{border-color:#0079fe;background:#0079fe}.stackline-dropdown.theme-classic .single-select-mode .pure-checkbox input[type=checkbox]+label{padding-left:0}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i3.DefaultValueAccessor), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i3.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i3.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i0.forwardRef(() => VirtualScrollerComponent), selector: "virtual-scroller,[virtualScroller]", inputs: ["executeRefreshOutsideAngularZone", "enableUnequalChildrenSizes", "useMarginInsteadOfTranslate", "modifyOverflowStyleOfParentScroll", "stripedTable", "scrollbarWidth", "scrollbarHeight", "childWidth", "childHeight", "ssrChildWidth", "ssrChildHeight", "ssrViewportWidth", "ssrViewportHeight", "bufferAmount", "scrollAnimationTime", "resizeBypassRefreshThreshold", "scrollThrottlingTime", "scrollDebounceTime", "checkResizeInterval", "items", "compareItems", "horizontal", "parentScroll"], outputs: ["vsUpdate", "vsChange", "vsStart", "vsEnd"], exportAs: ["virtualScroller"] }, { kind: "directive", type: i0.forwardRef(() => ClickOutsideDirective), selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "component", type: i0.forwardRef(() => TemplateRenderer), selector: "c-templateRenderer", inputs: ["data", "item"] }, { kind: "component", type: i0.forwardRef(() => CIcon), selector: "c-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: AngularMultiSelect, isStandalone: false, selector: "angular-multiselect, angular2-multiselect", inputs: { data: "data", settings: "settings", loading: "loading" }, outputs: { onSelect: "onSelect", onDeSelect: "onDeSelect", onSelectAll: "onSelectAll", onDeSelectAll: "onDeSelectAll", onOpen: "onOpen", onClose: "onClose", onScrollToEnd: "onScrollToEnd", onFilterSelectAll: "onFilterSelectAll", onFilterDeSelectAll: "onFilterDeSelectAll", onAddFilterNewItem: "onAddFilterNewItem", onGroupSelect: "onGroupSelect", onGroupDeSelect: "onGroupDeSelect" }, host: { listeners: { "document:keyup.escape": "onEscapeDown($event)", "window:scroll": "onScroll($event)", "window:resize": "onResize($event)" }, properties: { "class": "defaultSettings.classes" } }, providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALIDATION], queries: [{ propertyName: "itemTempl", first: true, predicate: Item, descendants: true }, { propertyName: "badgeTempl", first: true, predicate: Badge, descendants: true }, { propertyName: "searchTempl", first: true, predicate: Search, descendants: true }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "selectedListElem", first: true, predicate: ["selectedList"], descendants: true }, { propertyName: "dropdownListElem", first: true, predicate: ["dropdownList"], descendants: true }, { propertyName: "stacklineDropdown", first: true, predicate: ["stacklineDropdown"], descendants: true }, { propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true }, { propertyName: "virtualScroller", first: true, predicate: VirtualScrollerComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"stackline-dropdown\" [ngClass]=\"getDropdownClasses()\" (clickOutside)=\"closeDropdownOnClickOut()\" #stacklineDropdown>\n    <div class=\"selected-list\" #selectedList>\n        <div class=\"c-btn\"\n            #triggerButton\n            (click)=\"toggleDropdown($event)\"\n            (keydown)=\"onTriggerKeydown($event)\"\n            [ngClass]=\"{'disabled': settings.disabled, 'is-active': isActive, 'has-selection': selectedItems?.length > 0, 'single-select-mode': settings.singleSelection}\"\n            [attr.tabindex]=\"settings.disabled ? -1 : 0\"\n            role=\"combobox\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-controls]=\"listboxId\"\n            [attr.aria-expanded]=\"isActive\"\n            [attr.aria-disabled]=\"settings.disabled\"\n            [attr.aria-activedescendant]=\"activeDescendantId\"\n            [attr.aria-label]=\"settings.ariaLabelledBy ? null : getAriaLabel()\"\n            [attr.aria-labelledby]=\"settings.ariaLabelledBy || null\">\n\n            <span class=\"c-placeholder\" *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n            <span class=\"c-single-value\" *ngIf=\"settings.singleSelection && !badgeTempl\">\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\">\n                    {{item[settings.labelKey]}}\n                </span>\n            </span>\n            <span class=\"c-list c-chip-list\" *ngIf=\"selectedItems?.length > 0 && settings.singleSelection && badgeTempl \">\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\">\n                    <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\n\n                    <span *ngIf=\"badgeTempl\" class=\"c-label\">\n                        <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\"></c-templateRenderer>\n                    </span>\n                    <button type=\"button\" class=\"c-remove\" (click)=\"onItemClick(item,k,$event);$event.stopPropagation()\" (keydown)=\"onInlineActionKeydown($event)\" [attr.aria-label]=\"getRemoveItemAriaLabel(item)\">\n                        <c-icon [name]=\"'remove'\"></c-icon>\n                    </button>\n                </div>\n            </span>\n            <div class=\"c-list c-chip-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n                <ng-container *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\">\n                    <div class=\"c-token\" *ngIf=\"shouldShowSelectedBadge(k)\">\n                        <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\n                        <span *ngIf=\"badgeTempl\" class=\"c-label\">\n                            <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\"></c-templateRenderer>\n                        </span>\n                        <button type=\"button\" class=\"c-remove\" (click)=\"onItemClick(item,k,$event);$event.stopPropagation()\" (keydown)=\"onInlineActionKeydown($event)\" [attr.aria-label]=\"getRemoveItemAriaLabel(item)\">\n                            <c-icon [name]=\"'remove'\"></c-icon>\n                        </button>\n                    </div>\n                </ng-container>\n            </div>\n            <span class=\"countplaceholder\" *ngIf=\"getHiddenSelectedCount() > 0\">+{{getHiddenSelectedCount()}}</span>\n            <button type=\"button\" class=\"c-remove clear-all\" *ngIf=\"settings.clearAll && selectedItems?.length > 0 && !settings.disabled\" (click)=\"clearSelection($event);$event.stopPropagation()\" (keydown)=\"onInlineActionKeydown($event)\" [attr.aria-label]=\"getClearAllAriaLabel()\">\n                <c-icon [name]=\"'remove'\"></c-icon>\n            </button>\n            <button type=\"button\" *ngIf=\"!isActive\" class=\"c-angle-down c-arrow-toggle\" [disabled]=\"settings.disabled\" (click)=\"toggleDropdown($event);$event.stopPropagation()\" (keydown)=\"onArrowButtonKeydown($event)\" [attr.aria-label]=\"getOpenDropdownAriaLabel()\" [attr.aria-controls]=\"listboxId\" [attr.aria-expanded]=\"isActive\">\n                <c-icon [name]=\"'angle-down'\"></c-icon>\n            </button>\n            <button type=\"button\" *ngIf=\"isActive\" class=\"c-angle-up c-arrow-toggle\" [disabled]=\"settings.disabled\" (click)=\"toggleDropdown($event);$event.stopPropagation()\" (keydown)=\"onArrowButtonKeydown($event)\" [attr.aria-label]=\"getCloseDropdownAriaLabel()\" [attr.aria-controls]=\"listboxId\" [attr.aria-expanded]=\"isActive\">\n                <c-icon [name]=\"'angle-up'\"></c-icon>\n\n            </button>\n        </div>\n    </div>\n    <div #dropdownList class=\"dropdown-list animated fadeIn\"\n    [ngClass]=\"{'tagToBody': isBodyOverlayEnabled(), 'opens-up': settings.position == 'top', 'opens-down': settings.position == 'bottom'}\"\n    [style.width]=\"dropDownWidth !== null ? dropDownWidth + 'px' : 'auto'\"\n    [style.top]=\"dropDownTop\" \n    [style.bottom]=\"dropDownBottom\"\n    [style.left.px]=\"dropDownLeft\" \n        (pointerdown)=\"onDropdownPanelPointerDown($event)\"\n        (touchstart)=\"onDropdownPanelPointerDown($event)\"\n        role=\"presentation\"\n        [attr.aria-hidden]=\"!isActive\"\n        [hidden]=\"!isActive\">\n        <div [ngClass]=\"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\" class=\"arrow-2\"></div>\n        <div [ngClass]=\"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\"></div>\n        <div class=\"list-area\" [ngClass]=\"{'single-select-mode': settings.singleSelection }\">\n            <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection && data?.length > 0 && !isDisabledItemPresent\"\n                >\n                <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                [id]=\"id\" (change)=\"toggleSelectAll($event)\"/>\n                <label [for]=\"id\">\n                    <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n                    <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n                </label>\n            </div>\n            <img class=\"loading-icon\" *ngIf=\"loading\" src=\"assets/img/loading.gif\" [attr.alt]=\"settings.loadingText\" />\n            <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter\">\n                <span class=\"c-search\" id=\"searchIcon\" aria-hidden=\"true\">\n                    <c-icon [name]=\"'search'\"></c-icon>\n                </span>\n                <button type=\"button\" *ngIf=\"!settings.lazyLoading\" [hidden]=\"filter == undefined || filter?.length == 0\" class=\"c-clear\" (click)=\"clearSearch()\" (keydown)=\"onInlineActionKeydown($event)\" [attr.aria-label]=\"getClearSearchAriaLabel()\">\n                    <c-icon [name]=\"'clear'\"></c-icon>\n                </button>\n                <button type=\"button\" *ngIf=\"settings.lazyLoading\" [hidden]=\"filter == undefined || filter?.length == 0\" class=\"c-clear\" (click)=\"resetInfiniteSearch()\" (keydown)=\"onInlineActionKeydown($event)\" [attr.aria-label]=\"getClearSearchAriaLabel()\">\n                    <c-icon [name]=\"'clear'\"></c-icon>\n                </button>\n\n                <input class=\"c-input\" *ngIf=\"settings.groupBy && !settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                    [(ngModel)]=\"filter\" (keyup)=\"filterGroupedList()\" (keydown)=\"onSearchKeydown($event)\" [attr.aria-label]=\"getSearchAriaLabel()\">\n                <input class=\"c-input\" *ngIf=\"!settings.groupBy && !settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                    [(ngModel)]=\"filter\" (keyup)=\"filteritems($event)\" (keydown)=\"onSearchKeydown($event)\" [attr.aria-label]=\"getSearchAriaLabel()\">\n                <input class=\"c-input\" *ngIf=\"settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                    [(ngModel)]=\"filter\" (keyup)=\"onKeyUp($event)\" (keydown)=\"onSearchKeydown($event)\" [attr.aria-label]=\"getSearchAriaLabel()\">\n                <!--            <input class=\"c-input\" *ngIf=\"!settings.lazyLoading && !searchTempl && settings.groupBy\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                [(ngModel)]=\"filter\" (keyup)=\"filterGroupList($event)\">-->\n                <c-templateRenderer *ngIf=\"searchTempl\" [data]=\"searchTempl\" [item]=\"item\"></c-templateRenderer>\n            </div>\n            <div class=\"filter-select-all\" *ngIf=\"!settings.lazyLoading && settings.enableFilterSelectAll && !isDisabledItemPresent\">\n                <div class=\"pure-checkbox select-all\" *ngIf=\"!settings.groupBy && filter?.length > 0 && filterLength > 0  && !settings.singleSelection\" (click)=\"toggleFilterSelectAll()\" (keydown)=\"onSelectAllKeydown($event, 'filter')\" tabindex=\"0\" role=\"checkbox\" [attr.aria-checked]=\"isFilterSelectAll\">\n                    <input type=\"checkbox\" [checked]=\"isFilterSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                    aria-hidden=\"true\" tabindex=\"-1\" (click)=\"$event.stopPropagation()\" (change)=\"toggleFilterSelectAll()\"/>\n                    <label>\n                        <span [hidden]=\"isFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n                        <span [hidden]=\"!isFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n                    </label>\n                </div>\n                <div class=\"pure-checkbox select-all\" *ngIf=\"settings.groupBy && filter?.length > 0 && groupedData?.length > 0  && !settings.singleSelection\" (click)=\"toggleFilterSelectAll()\" (keydown)=\"onSelectAllKeydown($event, 'filter')\" tabindex=\"0\" role=\"checkbox\" [attr.aria-checked]=\"isFilterSelectAll\">\n                    <input type=\"checkbox\" [checked]=\"isFilterSelectAll && filter?.length > 0\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                    aria-hidden=\"true\" tabindex=\"-1\" (click)=\"$event.stopPropagation()\" (change)=\"toggleFilterSelectAll()\"/>\n                    <label>\n                        <span [hidden]=\"isFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n                        <span [hidden]=\"!isFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n                    </label>\n                </div>\n            </div>\n            <div class=\"filter-select-all\" *ngIf=\"settings.lazyLoading && settings.enableFilterSelectAll && !isDisabledItemPresent && !settings.singleSelection\">\n                <div class=\"pure-checkbox select-all\" *ngIf=\"filter?.length > 0 && infiniteFilterLength > 0\" (click)=\"toggleInfiniteFilterSelectAll()\" (keydown)=\"onSelectAllKeydown($event, 'infinite-filter')\" tabindex=\"0\" role=\"checkbox\" [attr.aria-checked]=\"isInfiniteFilterSelectAll\">\n                    <input type=\"checkbox\" [checked]=\"isInfiniteFilterSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                    aria-hidden=\"true\" tabindex=\"-1\" (click)=\"$event.stopPropagation()\" (change)=\"toggleInfiniteFilterSelectAll()\"/>\n                    <label>\n                        <span [hidden]=\"isInfiniteFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n                        <span [hidden]=\"!isInfiniteFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n                    </label>\n                </div>\n            </div>\n            <div class=\"filter-select-all\" *ngIf=\"filter?.length\">\n                <div class=\"btn-container\" *ngIf=\"settings.addNewItemOnFilter\">\n                    <button class=\"c-btn btn-iceblue\" (click)=\"addFilterNewItem()\">{{settings.addNewButtonText}}</button>\n                </div>\n            </div>\n\n            <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <li *ngFor=\"let item of data; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,i,'default')\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,i,'default')\" (keydown)=\"onOptionKeydown(item,i,$event,'default')\" [ngClass]=\"{'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\">\n                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                        <label>{{item[settings.labelKey]}}</label>\n                    </li>\n                </ul>\n            </div>\n            <!-- lazy loading -->\n            <div *ngIf=\"!settings.groupBy && settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul virtualScroller #scroll [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                    (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <li *ngFor=\"let item of scroll.viewPortItems; let i = index;\" (click)=\"onItemClick(item,getVirtualItemIndex(item,i,scroll),$event)\"\n                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,getVirtualItemIndex(item,i,scroll),'lazy')\" [attr.data-virtual-index]=\"getVirtualItemIndex(item,i,scroll)\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,getVirtualItemIndex(item,i,scroll),'lazy')\" (keydown)=\"onOptionKeydown(item,getVirtualItemIndex(item,i,scroll),$event,'lazy',scroll)\" [ngClass]=\"{'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\">\n                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                        <label>{{item[settings.labelKey]}}</label>\n                    </li>\n                </ul>\n            </div>\n            <!-- custom template -->\n            <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <li *ngFor=\"let item of data; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,i,'custom')\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,i,'custom')\" (keydown)=\"onOptionKeydown(item,i,$event,'custom')\" [ngClass]=\"{'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\">\n                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                        <label></label>\n                        <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n                    </li>\n                </ul>\n            </div>\n            <!-- lazy loading and custom template -->\n            <div *ngIf=\"!settings.groupBy && settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul virtualScroller #scroll2 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                    (vsEnd)=\"onScrollEnd($event)\" class=\"lazyContainer\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <li *ngFor=\"let item of scroll2.viewPortItems; let i = index;\" (click)=\"onItemClick(item,getVirtualItemIndex(item,i,scroll2),$event)\"\n                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,getVirtualItemIndex(item,i,scroll2),'lazy-custom')\" [attr.data-virtual-index]=\"getVirtualItemIndex(item,i,scroll2)\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,getVirtualItemIndex(item,i,scroll2),'lazy-custom')\" (keydown)=\"onOptionKeydown(item,getVirtualItemIndex(item,i,scroll2),$event,'lazy-custom',scroll2)\" [ngClass]=\"{'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\">\n                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                        <label></label>\n                        <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n                    </li>\n                </ul>\n            </div>\n            <!-- lazy loading, group By and custom template -->\n            <div *ngIf=\"settings.groupBy && settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul virtualScroller #scroll3 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                    (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <span *ngFor=\"let item of scroll3.viewPortItems; let i = index;\">\n                        <li (click)=\"onItemClick(item,getVirtualItemIndex(item,i,scroll3),$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item)}\"\n                            class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,getVirtualItemIndex(item,i,scroll3),'lazy-group-custom')\" [attr.data-virtual-index]=\"getVirtualItemIndex(item,i,scroll3)\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,getVirtualItemIndex(item,i,scroll3),'lazy-group-custom')\" (keydown)=\"onOptionKeydown(item,getVirtualItemIndex(item,i,scroll3),$event,'lazy-group-custom',scroll3)\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            aria-hidden=\"true\" tabindex=\"-1\"/>\n                            <label></label>\n                            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n                        </li>\n                        <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection}\"\n                            class=\"pure-checkbox\" role=\"presentation\">\n                            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            aria-hidden=\"true\" tabindex=\"-1\"/>\n                            <label></label>\n                            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n                        </li>\n                    </span>\n                </ul>\n            </div>\n            <!-- group By and custom template -->\n            <div *ngIf=\"settings.groupBy && !settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <span *ngFor=\"let item of groupedData; let i = index;\">\n                        <li (click)=\"selectGroup(item)\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': item.selected == true, 'is-disabled': isOptionDisabled(item)}\"\n                            class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,i,'group-custom')\" [attr.aria-selected]=\"item.selected\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,i,'group-custom')\" (keydown)=\"onGroupKeydown(item,i,$event,'group-custom')\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\" [checked]=\"item.selected\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            aria-hidden=\"true\" tabindex=\"-1\"/>\n                            <label>{{item[settings.labelKey]}}</label>\n                            <ul class=\"lazyContainer\">\n                                <span *ngFor=\"let val of item.list ; let j = index;\">\n                                    <li (click)=\"onItemClick(val,j,$event); $event.stopPropagation()\" [ngClass]=\"{'grp-title': val.grpTitle,'grp-item': !val.grpTitle && !settings.singleSelection, 'selected-item': isSelected(val) == true, 'is-disabled': isOptionDisabled(val)}\"\n                                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(val,j,'group-custom-'+i)\" [attr.aria-selected]=\"isSelected(val)\" [attr.aria-disabled]=\"isOptionDisabled(val)\" [attr.tabindex]=\"isOptionDisabled(val) ? -1 : 0\" (focus)=\"setActiveDescendant(val,j,'group-custom-'+i)\" (keydown)=\"onOptionKeydown(val,j,$event,'group-custom-'+i)\">\n                                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(val)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(val)) || val.disabled\"\n                                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                                        <label></label>\n                                        <c-templateRenderer [data]=\"itemTempl\" [item]=\"val\"></c-templateRenderer>\n                                    </li>\n                                </span>\n                            </ul>\n\n                        </li>\n                    </span>\n                </ul>\n            </div>\n            <!-- lazy loading, group By -->\n            <div *ngIf=\"settings.groupBy && settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <virtual-scroller [items]=\"groupedData\" (vsUpdate)=\"viewPortItems = $event\" (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n                    <ul virtualScroller #scroll4 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                        (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                        <span *ngFor=\"let item of scroll4.viewPortItems; let i = index;\">\n                            <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true }\"\n                                class=\"pure-checkbox\" role=\"presentation\">\n                                <input *ngIf=\"settings.showCheckbox && !item.grpTitle && !settings.singleSelection\" type=\"checkbox\" [checked]=\"isSelected(item)\"\n                                    [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                                    aria-hidden=\"true\" tabindex=\"-1\"/>\n                                <label>{{item[settings.labelKey]}}</label>\n                            </li>\n                            <li (click)=\"onItemClick(item,getVirtualItemIndex(item,i,scroll4),$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\"\n                                class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,getVirtualItemIndex(item,i,scroll4),'lazy-group')\" [attr.data-virtual-index]=\"getVirtualItemIndex(item,i,scroll4)\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,getVirtualItemIndex(item,i,scroll4),'lazy-group')\" (keydown)=\"onOptionKeydown(item,getVirtualItemIndex(item,i,scroll4),$event,'lazy-group',scroll4)\">\n                                <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                                aria-hidden=\"true\" tabindex=\"-1\"/>\n                                <label>{{item[settings.labelKey]}}</label>\n                            </li>\n                        </span>\n                    </ul>\n                </virtual-scroller>\n            </div>\n            <!-- group By -->\n            <div *ngIf=\"settings.groupBy && !settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <span *ngFor=\"let item of groupedData ; let i = index;\">\n                        <li (click)=\"selectGroup(item)\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': item.selected == true, 'is-disabled': isOptionDisabled(item)}\"\n                            class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,i,'group')\" [attr.aria-selected]=\"item.selected\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,i,'group')\" (keydown)=\"onGroupKeydown(item,i,$event,'group')\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\" [checked]=\"item.selected\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            aria-hidden=\"true\" tabindex=\"-1\"/>\n                            <label>{{item[settings.labelKey]}}</label>\n                            <ul class=\"lazyContainer\">\n                                <span *ngFor=\"let val of item.list ; let j = index;\">\n                                    <li (click)=\"onItemClick(val,j,$event); $event.stopPropagation()\" [ngClass]=\"{'selected-item': isSelected(val) == true,'grp-title': val.grpTitle,'grp-item': !val.grpTitle && !settings.singleSelection, 'is-disabled': isOptionDisabled(val)}\"\n                                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(val,j,'group-'+i)\" [attr.aria-selected]=\"isSelected(val)\" [attr.aria-disabled]=\"isOptionDisabled(val)\" [attr.tabindex]=\"isOptionDisabled(val) ? -1 : 0\" (focus)=\"setActiveDescendant(val,j,'group-'+i)\" (keydown)=\"onOptionKeydown(val,j,$event,'group-'+i)\">\n                                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(val)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(val)) || val.disabled\"\n                                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                                        <label>{{val[settings.labelKey]}}</label>\n                                    </li>\n                                </span>\n                            </ul>\n                        </li>\n                    </span>\n                    <!-- <span *ngFor=\"let item of groupedData ; let i = index;\">\n                    <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n                    <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\n                    <label>{{item[settings.labelKey]}}</label>\n                </li>\n                <li *ngIf=\"item.grpTitle && !settings.selectGroup\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n                    <input *ngIf=\"settings.showCheckbox && settings.selectGroup\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\n                    <label>{{item[settings.labelKey]}}</label>\n                </li>\n                 <li  (click)=\"selectGroup(item)\" *ngIf=\"item.grpTitle && settings.selectGroup\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n                    <input *ngIf=\"settings.showCheckbox && settings.selectGroup\" type=\"checkbox\" [checked]=\"item.selected\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\n                    <label>{{item[settings.labelKey]}}</label>\n                </li>\n                </span> -->\n                </ul>\n            </div>\n            <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">{{settings.noDataLabel}}</h5>\n        </div>\n    </div>\n</div>\n", styles: ["virtual-scroll{display:block;width:100%}.stackline-dropdown{--ms-primary: #3f51b5;--ms-primary-soft: rgba(63, 81, 181, .12);--ms-surface: #ffffff;--ms-surface-soft: #f5f7fb;--ms-surface-muted: #e8eaf6;--ms-outline: #c5cae9;--ms-outline-strong: #7986cb;--ms-on-surface: #212121;--ms-on-surface-muted: #5f6368;--ms-chip-bg: #e8eaf6;--ms-chip-text: #303f9f;--ms-chip-remove: #303f9f;--ms-shadow: 0 1px 2px rgba(33, 33, 33, .16), 0 12px 32px rgba(63, 81, 181, .12);--ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, .12), 0 4px 12px rgba(33, 33, 33, .08);position:relative;display:block;width:100%;color:var(--ms-on-surface);font:inherit}.selected-list{width:100%}.c-btn{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:8px;width:100%;min-height:56px;padding:11px 54px 11px 16px;border-radius:18px;border:1px solid var(--ms-outline);background:var(--ms-surface);box-shadow:var(--ms-shadow-soft);cursor:pointer;line-height:1.45;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease,transform .16s ease}.c-btn:hover{border-color:var(--ms-outline-strong)}.c-btn.is-active{border-color:var(--ms-primary);box-shadow:0 0 0 3px #6750a424,var(--ms-shadow-soft)}.c-btn:focus-visible{outline:3px solid rgba(63,81,181,.32);outline-offset:2px}.c-btn.disabled{cursor:not-allowed;opacity:.72}.c-placeholder,.c-single-value{color:var(--ms-on-surface-muted);font-size:.95rem}.c-btn.has-selection .c-single-value,.c-btn.has-selection .c-placeholder{color:var(--ms-on-surface);font-weight:500}.c-list{display:flex;flex:1 1 auto;flex-wrap:wrap;gap:8px;margin:0;padding:0;min-width:0}.c-chip-list{padding-right:8px}.c-token{position:relative;display:inline-block;vertical-align:middle;min-height:32px;max-width:100%;padding:6px 30px 6px 12px;border-radius:999px;background:var(--ms-chip-bg);color:var(--ms-chip-text);box-shadow:inset 0 0 0 1px #6750a414;line-height:1.35;white-space:normal;overflow-wrap:anywhere}.c-token .c-label{display:inline-flex;align-items:center;min-width:0;max-width:100%;line-height:1.3;font-weight:500;white-space:normal;overflow-wrap:anywhere}.c-remove{position:absolute;right:10px;top:50%;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;transform:translateY(-50%);color:var(--ms-chip-remove)}button.c-remove,button.c-clear,button.c-arrow-toggle{border:0;padding:0;background:transparent;font:inherit;cursor:pointer}button.c-arrow-toggle:disabled{cursor:not-allowed}.c-remove:focus-visible,.list-filter .c-clear:focus-visible,.c-arrow-toggle:focus-visible{outline:3px solid rgba(63,81,181,.32);outline-offset:2px}.c-remove svg,.c-angle-down svg,.c-angle-up svg{fill:currentColor}.c-remove c-icon{display:inline-flex;width:10px;height:10px;line-height:0}.clear-all c-icon{width:12px;height:12px}.clear-all{position:absolute;top:50%;right:42px;width:20px;height:20px;transform:translateY(-50%);color:var(--ms-on-surface-muted)}.countplaceholder{position:absolute;top:50%;right:76px;transform:translateY(-50%);color:var(--ms-on-surface-muted);font-size:.8rem;font-weight:600}.c-angle-down,.c-angle-up{position:absolute;top:50%;right:16px;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;transform:translateY(-50%);color:var(--ms-on-surface-muted);pointer-events:auto}.dropdown-list{position:absolute;right:0;left:0;box-sizing:border-box;width:auto;min-width:0;max-width:100%;padding-top:8px;z-index:99999}.dropdown-list.tagToBody{position:fixed;right:auto;max-width:calc(100vw - 16px);z-index:100000}.arrow-up,.arrow-down,.arrow-2{display:none}.list-area{box-sizing:border-box;max-width:100%;overflow:hidden;border-radius:22px;background:var(--ms-surface);border:1px solid var(--ms-outline);box-shadow:var(--ms-shadow)}.select-all,.filter-select-all{padding:10px 14px;border-bottom:1px solid rgba(125,119,134,.16);background:#f7f2fac2}.list-filter{position:relative;display:flex;align-items:center;min-height:52px;padding-left:48px;padding-right:44px;border-bottom:1px solid rgba(125,119,134,.16);background:var(--ms-surface)}.list-filter .c-input,.list-filter input{width:100%;height:100%;border:0;background:transparent;color:var(--ms-on-surface);font:inherit}.list-filter .c-input::placeholder,.list-filter input::placeholder{color:var(--ms-on-surface-muted)}.list-filter .c-input:focus,.list-filter input:focus{outline:none}.list-filter .c-search,.list-filter .c-clear{position:absolute;top:50%;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;transform:translateY(-50%);color:var(--ms-on-surface-muted)}.list-filter .c-search{left:16px}.list-filter .c-clear{right:16px;cursor:pointer}.btn-container{padding:10px 14px 14px;text-align:center}.btn-iceblue{width:100%;min-height:40px;border-radius:999px;border:1px solid transparent;background:var(--ms-primary);color:#fff;font-weight:600}.dropdown-list ul{list-style:none;margin:0;padding:8px;overflow:auto}.dropdown-list ul li{align-items:center;min-height:0;margin:4px;padding:12px 14px;border-radius:14px;cursor:pointer;text-align:left;line-height:1.35;transition:background-color .16s ease,color .16s ease}.dropdown-list ul li:hover{background:var(--ms-surface-soft)}.dropdown-list ul li:focus-visible{outline:3px solid rgba(63,81,181,.32);outline-offset:2px}.dropdown-option.is-disabled{cursor:not-allowed;opacity:.58}.selected-item{background:var(--ms-primary-soft)!important;color:var(--ms-primary)}.selected-item:hover{background:#6750a42e!important}.grp-item{padding-left:42px!important}.grp-title{margin-top:6px;padding-top:10px!important;padding-bottom:8px!important;background:transparent!important;color:var(--ms-on-surface-muted);cursor:default!important}.grp-title label{margin-bottom:0!important;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.grp-title:hover{background:transparent!important}.pure-checkbox{position:relative}.pure-checkbox input[type=checkbox]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pure-checkbox input[type=checkbox]+label{position:relative;display:block;width:100%;margin:0;padding-left:32px;color:inherit;cursor:pointer;font-weight:500;-webkit-user-select:none;user-select:none}.pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:0;width:18px;height:18px;margin-top:-10px;border:2px solid var(--ms-outline-strong);border-radius:6px;background:var(--ms-surface);transition:all .18s ease}.pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:5px;width:7px;height:3px;margin-top:-3px;border-style:solid;border-width:0 0 2px 2px;border-color:#fff;transform:rotate(-45deg) scale(0);transform-origin:50%;transition:transform .16s ease-out}.pure-checkbox input[type=checkbox]:focus+label:before,.pure-checkbox input[type=checkbox]:hover+label:before{border-color:var(--ms-primary);box-shadow:0 0 0 4px #3f51b51f}.pure-checkbox input[type=checkbox]:checked+label:before{border-color:var(--ms-primary);background:var(--ms-primary)}.pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.pure-checkbox input[type=checkbox]:disabled+label{color:#b1acb8;cursor:not-allowed}.pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#d5d0db;background:#f2edf7;box-shadow:none}.single-select-mode .pure-checkbox input[type=checkbox]+label:before,.single-select-mode .pure-checkbox input[type=checkbox]+label:after{opacity:0}.single-select-mode .pure-checkbox input[type=checkbox]+label{padding-left:0}.list-message,.nodata-label{margin:0;padding:22px 16px 24px;color:var(--ms-on-surface-muted);text-align:center;font-size:.95rem;font-weight:500}.list-grp{padding:0 15px!important}.list-grp h4{margin:16px 0 6px;color:var(--ms-on-surface);font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.list-grp>li{padding-left:15px!important}.loading-icon{position:absolute;top:18px;right:16px;width:18px;z-index:2}.dropdown-list ::-webkit-scrollbar{width:10px}.dropdown-list ::-webkit-scrollbar-thumb{background:#7d778657;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.dropdown-list ::-webkit-scrollbar-track{background:transparent}.stackline-dropdown.theme-dark{--ms-primary: #8ab4f8;--ms-primary-soft: rgba(138, 180, 248, .18);--ms-surface: #151a23;--ms-surface-soft: #202736;--ms-surface-muted: #111722;--ms-outline: #384456;--ms-outline-strong: #8ab4f8;--ms-on-surface: #edf2f7;--ms-on-surface-muted: #aab6c5;--ms-chip-bg: #263247;--ms-chip-text: #d7e6ff;--ms-chip-remove: #d7e6ff;--ms-shadow: 0 20px 50px rgba(0, 0, 0, .42);--ms-shadow-soft: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 24px rgba(0, 0, 0, .28)}.stackline-dropdown.theme-custom{--ms-primary: var(--stackline-ms-primary, #0f766e);--ms-primary-soft: var(--stackline-ms-primary-soft, rgba(15, 118, 110, .14));--ms-surface: var(--stackline-ms-surface, #ffffff);--ms-surface-soft: var(--stackline-ms-surface-soft, #ecfdf5);--ms-surface-muted: var(--stackline-ms-surface-muted, #d1fae5);--ms-outline: var(--stackline-ms-outline, #99f6e4);--ms-outline-strong: var(--stackline-ms-outline-strong, #0f766e);--ms-on-surface: var(--stackline-ms-on-surface, #102a2a);--ms-on-surface-muted: var(--stackline-ms-on-surface-muted, #47615f);--ms-chip-bg: var(--stackline-ms-chip-bg, #ccfbf1);--ms-chip-text: var(--stackline-ms-chip-text, #115e59);--ms-chip-remove: var(--stackline-ms-chip-remove, #115e59);--ms-shadow: var(--stackline-ms-shadow, 0 18px 42px rgba(15, 118, 110, .15));--ms-shadow-soft: var(--stackline-ms-shadow-soft, 0 1px 2px rgba(15, 118, 110, .16), 0 8px 18px rgba(15, 118, 110, .09))}.stackline-dropdown.theme-classic{--ms-primary: #0079fe;--ms-primary-soft: #e9f4ff;--ms-surface: #ffffff;--ms-surface-soft: #f5f5f5;--ms-outline: #cccccc;--ms-outline-strong: #0079fe;--ms-on-surface: #333333;--ms-on-surface-muted: #333333;--ms-chip-bg: #0079fe;--ms-chip-text: #ffffff;--ms-chip-remove: #ffffff;--ms-shadow: 0 1px 5px #959595;--ms-shadow-soft: 0 1px 5px #959595;color:#333}.stackline-dropdown.theme-classic .selected-list{width:100%}.stackline-dropdown.theme-classic .c-btn{display:flex;align-items:center;flex-wrap:nowrap;gap:6px;min-height:42px;padding:10px 68px 10px 10px;border:1px solid #cccccc;border-radius:3px;background:#fff;box-shadow:0 1px 5px #959595;color:#333;font-size:14px;line-height:1.35}.stackline-dropdown.theme-classic .c-btn.is-active,.stackline-dropdown.theme-classic .c-btn:hover{border-color:#ccc;box-shadow:0 1px 5px #959595}.stackline-dropdown.theme-classic .c-btn.disabled{background:#ccc;opacity:1}.stackline-dropdown.theme-classic .c-placeholder,.stackline-dropdown.theme-classic .c-single-value{color:#333;font-size:14px}.stackline-dropdown.theme-classic .c-list{display:flex;flex:1 1 auto;align-items:center;flex-wrap:wrap;gap:4px;width:auto;min-width:0;margin:0;padding:0}.stackline-dropdown.theme-classic .c-chip-list{padding-right:0}.stackline-dropdown.theme-classic .c-token{display:inline-block;min-height:0;margin:2px 0 0;padding:2px 24px 2px 6px;border-radius:2px;background:#0079fe;box-shadow:none;color:#fff;line-height:1.4}.stackline-dropdown.theme-classic .c-token .c-label{display:inline;color:#fff;font-size:14px;font-weight:400;line-height:1.4}.stackline-dropdown.theme-classic .c-remove{right:5px;width:14px;height:14px;color:#fff}.stackline-dropdown.theme-classic .c-remove c-icon{width:9px;height:9px}.stackline-dropdown.theme-classic .clear-all{right:42px;width:18px;height:18px;color:#333}.stackline-dropdown.theme-classic .clear-all c-icon{width:11px;height:11px}.stackline-dropdown.theme-classic .countplaceholder{right:76px;color:#333;font-size:14px;font-weight:400}.stackline-dropdown.theme-classic .c-angle-down,.stackline-dropdown.theme-classic .c-angle-up{right:10px;width:20px;height:20px;color:#333}.stackline-dropdown.theme-classic .dropdown-list{padding-top:14px;padding-bottom:0;z-index:9999}.stackline-dropdown.theme-classic .dropdown-list.opens-up{padding-top:0;padding-bottom:14px}.stackline-dropdown.theme-classic .dropdown-list.opens-down{padding-top:14px;padding-bottom:0}.stackline-dropdown.theme-classic .arrow-up{display:block;position:absolute;top:0;width:0;height:0;margin-left:15px;border-right:13px solid transparent;border-bottom:15px solid #ffffff;border-left:13px solid transparent}.stackline-dropdown.theme-classic .arrow-2{top:-1px;border-bottom-color:#ccc}.stackline-dropdown.theme-classic .arrow-down{display:block;position:absolute;top:auto;bottom:0;width:0;height:0;margin-left:15px;border-right:13px solid transparent;border-top:15px solid #ffffff;border-left:13px solid transparent}.stackline-dropdown.theme-classic .arrow-down.arrow-2{top:auto;bottom:-1px;border-top-color:#ccc}.stackline-dropdown.theme-classic .list-area{overflow:hidden;margin:0;border:1px solid #cccccc;border-radius:3px;background:#fff;box-shadow:0 1px 5px #959595}.stackline-dropdown.theme-classic .select-all,.stackline-dropdown.theme-classic .filter-select-all{padding:10px;border-bottom:1px solid #cccccc;background:#fff}.stackline-dropdown.theme-classic .list-filter{display:block;min-height:35px;padding:0;border-bottom:1px solid #cccccc;background:#fff}.stackline-dropdown.theme-classic .list-filter .c-input,.stackline-dropdown.theme-classic .list-filter input{height:35px;padding:0 35px;color:#333}.stackline-dropdown.theme-classic .list-filter .c-search{left:13px}.stackline-dropdown.theme-classic .list-filter .c-clear{right:13px}.stackline-dropdown.theme-classic .btn-container{padding:10px}.stackline-dropdown.theme-classic .btn-iceblue{min-height:35px;border-radius:3px;background:#0079fe}.stackline-dropdown.theme-classic .dropdown-list ul{margin:0;padding:0}.stackline-dropdown.theme-classic .dropdown-list ul li{min-height:0;margin:0;padding:10px;border-radius:0;color:#333;line-height:1.35}.stackline-dropdown.theme-classic .dropdown-list ul li:hover{background:#f5f5f5}.stackline-dropdown.theme-classic .selected-item,.stackline-dropdown.theme-classic .selected-item:hover{background:#e9f4ff!important;color:#333}.stackline-dropdown.theme-classic .grp-item{padding-left:30px!important}.stackline-dropdown.theme-classic .grp-title{color:#000}.stackline-dropdown.theme-classic .grp-title label,.stackline-dropdown.theme-classic .list-grp h4{font-size:14px;font-weight:700;letter-spacing:0;text-transform:capitalize}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]+label{padding-left:2em;color:#000;font-weight:300}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]+label:before{width:14px;height:14px;margin-top:-9px;border:2px solid #0079fe;border-radius:0;background:#fff}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]+label:after{top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-width:0 0 3px 3px;border-color:#fff;background:transparent}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]:hover+label:before{border-color:#0079fe;background-color:#f2f2f2;box-shadow:none}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]:checked+label:before{border-color:#0079fe;background:#0079fe}.stackline-dropdown.theme-classic .single-select-mode .pure-checkbox input[type=checkbox]+label{padding-left:0}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i3.DefaultValueAccessor), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i3.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i3.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i0.forwardRef(() => VirtualScrollerComponent), selector: "virtual-scroller,[virtualScroller]", inputs: ["executeRefreshOutsideAngularZone", "enableUnequalChildrenSizes", "useMarginInsteadOfTranslate", "modifyOverflowStyleOfParentScroll", "stripedTable", "scrollbarWidth", "scrollbarHeight", "childWidth", "childHeight", "ssrChildWidth", "ssrChildHeight", "ssrViewportWidth", "ssrViewportHeight", "bufferAmount", "scrollAnimationTime", "resizeBypassRefreshThreshold", "scrollThrottlingTime", "scrollDebounceTime", "checkResizeInterval", "items", "compareItems", "horizontal", "parentScroll"], outputs: ["vsUpdate", "vsChange", "vsStart", "vsEnd"], exportAs: ["virtualScroller"] }, { kind: "directive", type: i0.forwardRef(() => ClickOutsideDirective), selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "component", type: i0.forwardRef(() => TemplateRenderer), selector: "c-templateRenderer", inputs: ["data", "item"] }, { kind: "component", type: i0.forwardRef(() => CIcon), selector: "c-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AngularMultiSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'angular-multiselect, angular2-multiselect', host: { '[class]': 'defaultSettings.classes' }, providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALIDATION], encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"stackline-dropdown\" [ngClass]=\"getDropdownClasses()\" (clickOutside)=\"closeDropdownOnClickOut()\" #stacklineDropdown>\n    <div class=\"selected-list\" #selectedList>\n        <div class=\"c-btn\"\n            #triggerButton\n            (click)=\"toggleDropdown($event)\"\n            (keydown)=\"onTriggerKeydown($event)\"\n            [ngClass]=\"{'disabled': settings.disabled, 'is-active': isActive, 'has-selection': selectedItems?.length > 0, 'single-select-mode': settings.singleSelection}\"\n            [attr.tabindex]=\"settings.disabled ? -1 : 0\"\n            role=\"combobox\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-controls]=\"listboxId\"\n            [attr.aria-expanded]=\"isActive\"\n            [attr.aria-disabled]=\"settings.disabled\"\n            [attr.aria-activedescendant]=\"activeDescendantId\"\n            [attr.aria-label]=\"settings.ariaLabelledBy ? null : getAriaLabel()\"\n            [attr.aria-labelledby]=\"settings.ariaLabelledBy || null\">\n\n            <span class=\"c-placeholder\" *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n            <span class=\"c-single-value\" *ngIf=\"settings.singleSelection && !badgeTempl\">\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\">\n                    {{item[settings.labelKey]}}\n                </span>\n            </span>\n            <span class=\"c-list c-chip-list\" *ngIf=\"selectedItems?.length > 0 && settings.singleSelection && badgeTempl \">\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\">\n                    <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\n\n                    <span *ngIf=\"badgeTempl\" class=\"c-label\">\n                        <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\"></c-templateRenderer>\n                    </span>\n                    <button type=\"button\" class=\"c-remove\" (click)=\"onItemClick(item,k,$event);$event.stopPropagation()\" (keydown)=\"onInlineActionKeydown($event)\" [attr.aria-label]=\"getRemoveItemAriaLabel(item)\">\n                        <c-icon [name]=\"'remove'\"></c-icon>\n                    </button>\n                </div>\n            </span>\n            <div class=\"c-list c-chip-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n                <ng-container *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\">\n                    <div class=\"c-token\" *ngIf=\"shouldShowSelectedBadge(k)\">\n                        <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\n                        <span *ngIf=\"badgeTempl\" class=\"c-label\">\n                            <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\"></c-templateRenderer>\n                        </span>\n                        <button type=\"button\" class=\"c-remove\" (click)=\"onItemClick(item,k,$event);$event.stopPropagation()\" (keydown)=\"onInlineActionKeydown($event)\" [attr.aria-label]=\"getRemoveItemAriaLabel(item)\">\n                            <c-icon [name]=\"'remove'\"></c-icon>\n                        </button>\n                    </div>\n                </ng-container>\n            </div>\n            <span class=\"countplaceholder\" *ngIf=\"getHiddenSelectedCount() > 0\">+{{getHiddenSelectedCount()}}</span>\n            <button type=\"button\" class=\"c-remove clear-all\" *ngIf=\"settings.clearAll && selectedItems?.length > 0 && !settings.disabled\" (click)=\"clearSelection($event);$event.stopPropagation()\" (keydown)=\"onInlineActionKeydown($event)\" [attr.aria-label]=\"getClearAllAriaLabel()\">\n                <c-icon [name]=\"'remove'\"></c-icon>\n            </button>\n            <button type=\"button\" *ngIf=\"!isActive\" class=\"c-angle-down c-arrow-toggle\" [disabled]=\"settings.disabled\" (click)=\"toggleDropdown($event);$event.stopPropagation()\" (keydown)=\"onArrowButtonKeydown($event)\" [attr.aria-label]=\"getOpenDropdownAriaLabel()\" [attr.aria-controls]=\"listboxId\" [attr.aria-expanded]=\"isActive\">\n                <c-icon [name]=\"'angle-down'\"></c-icon>\n            </button>\n            <button type=\"button\" *ngIf=\"isActive\" class=\"c-angle-up c-arrow-toggle\" [disabled]=\"settings.disabled\" (click)=\"toggleDropdown($event);$event.stopPropagation()\" (keydown)=\"onArrowButtonKeydown($event)\" [attr.aria-label]=\"getCloseDropdownAriaLabel()\" [attr.aria-controls]=\"listboxId\" [attr.aria-expanded]=\"isActive\">\n                <c-icon [name]=\"'angle-up'\"></c-icon>\n\n            </button>\n        </div>\n    </div>\n    <div #dropdownList class=\"dropdown-list animated fadeIn\"\n    [ngClass]=\"{'tagToBody': settings.tagToBody, 'opens-up': settings.position == 'top', 'opens-down': settings.position == 'bottom'}\"\n    [style.width.px]=\"dropDownWidth\" \n    [style.top]=\"dropDownTop\" \n    [style.bottom]=\"dropDownBottom\"\n    [style.left.px]=\"dropDownLeft\" \n        role=\"presentation\"\n        [attr.aria-hidden]=\"!isActive\"\n        [hidden]=\"!isActive\">\n        <div [ngClass]=\"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\" class=\"arrow-2\"></div>\n        <div [ngClass]=\"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\"></div>\n        <div class=\"list-area\" [ngClass]=\"{'single-select-mode': settings.singleSelection }\">\n            <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection && data?.length > 0 && !isDisabledItemPresent\"\n                >\n                <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                [id]=\"id\" (change)=\"toggleSelectAll($event)\"/>\n                <label [for]=\"id\">\n                    <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n                    <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n                </label>\n            </div>\n            <img class=\"loading-icon\" *ngIf=\"loading\" src=\"assets/img/loading.gif\" [attr.alt]=\"settings.loadingText\" />\n            <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter\">\n                <span class=\"c-search\" id=\"searchIcon\" aria-hidden=\"true\">\n                    <c-icon [name]=\"'search'\"></c-icon>\n                </span>\n                <button type=\"button\" *ngIf=\"!settings.lazyLoading\" [hidden]=\"filter == undefined || filter?.length == 0\" class=\"c-clear\" (click)=\"clearSearch()\" (keydown)=\"onInlineActionKeydown($event)\" [attr.aria-label]=\"getClearSearchAriaLabel()\">\n                    <c-icon [name]=\"'clear'\"></c-icon>\n                </button>\n                <button type=\"button\" *ngIf=\"settings.lazyLoading\" [hidden]=\"filter == undefined || filter?.length == 0\" class=\"c-clear\" (click)=\"resetInfiniteSearch()\" (keydown)=\"onInlineActionKeydown($event)\" [attr.aria-label]=\"getClearSearchAriaLabel()\">\n                    <c-icon [name]=\"'clear'\"></c-icon>\n                </button>\n\n                <input class=\"c-input\" *ngIf=\"settings.groupBy && !settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                    [(ngModel)]=\"filter\" (keyup)=\"filterGroupedList()\" (keydown)=\"onSearchKeydown($event)\" [attr.aria-label]=\"getSearchAriaLabel()\">\n                <input class=\"c-input\" *ngIf=\"!settings.groupBy && !settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                    [(ngModel)]=\"filter\" (keyup)=\"filteritems($event)\" (keydown)=\"onSearchKeydown($event)\" [attr.aria-label]=\"getSearchAriaLabel()\">\n                <input class=\"c-input\" *ngIf=\"settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                    [(ngModel)]=\"filter\" (keyup)=\"onKeyUp($event)\" (keydown)=\"onSearchKeydown($event)\" [attr.aria-label]=\"getSearchAriaLabel()\">\n                <!--            <input class=\"c-input\" *ngIf=\"!settings.lazyLoading && !searchTempl && settings.groupBy\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                [(ngModel)]=\"filter\" (keyup)=\"filterGroupList($event)\">-->\n                <c-templateRenderer *ngIf=\"searchTempl\" [data]=\"searchTempl\" [item]=\"item\"></c-templateRenderer>\n            </div>\n            <div class=\"filter-select-all\" *ngIf=\"!settings.lazyLoading && settings.enableFilterSelectAll && !isDisabledItemPresent\">\n                <div class=\"pure-checkbox select-all\" *ngIf=\"!settings.groupBy && filter?.length > 0 && filterLength > 0  && !settings.singleSelection\" (click)=\"toggleFilterSelectAll()\" (keydown)=\"onSelectAllKeydown($event, 'filter')\" tabindex=\"0\" role=\"checkbox\" [attr.aria-checked]=\"isFilterSelectAll\">\n                    <input type=\"checkbox\" [checked]=\"isFilterSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                    aria-hidden=\"true\" tabindex=\"-1\" (click)=\"$event.stopPropagation()\" (change)=\"toggleFilterSelectAll()\"/>\n                    <label>\n                        <span [hidden]=\"isFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n                        <span [hidden]=\"!isFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n                    </label>\n                </div>\n                <div class=\"pure-checkbox select-all\" *ngIf=\"settings.groupBy && filter?.length > 0 && groupedData?.length > 0  && !settings.singleSelection\" (click)=\"toggleFilterSelectAll()\" (keydown)=\"onSelectAllKeydown($event, 'filter')\" tabindex=\"0\" role=\"checkbox\" [attr.aria-checked]=\"isFilterSelectAll\">\n                    <input type=\"checkbox\" [checked]=\"isFilterSelectAll && filter?.length > 0\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                    aria-hidden=\"true\" tabindex=\"-1\" (click)=\"$event.stopPropagation()\" (change)=\"toggleFilterSelectAll()\"/>\n                    <label>\n                        <span [hidden]=\"isFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n                        <span [hidden]=\"!isFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n                    </label>\n                </div>\n            </div>\n            <div class=\"filter-select-all\" *ngIf=\"settings.lazyLoading && settings.enableFilterSelectAll && !isDisabledItemPresent && !settings.singleSelection\">\n                <div class=\"pure-checkbox select-all\" *ngIf=\"filter?.length > 0 && infiniteFilterLength > 0\" (click)=\"toggleInfiniteFilterSelectAll()\" (keydown)=\"onSelectAllKeydown($event, 'infinite-filter')\" tabindex=\"0\" role=\"checkbox\" [attr.aria-checked]=\"isInfiniteFilterSelectAll\">\n                    <input type=\"checkbox\" [checked]=\"isInfiniteFilterSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                    aria-hidden=\"true\" tabindex=\"-1\" (click)=\"$event.stopPropagation()\" (change)=\"toggleInfiniteFilterSelectAll()\"/>\n                    <label>\n                        <span [hidden]=\"isInfiniteFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n                        <span [hidden]=\"!isInfiniteFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n                    </label>\n                </div>\n            </div>\n            <div class=\"filter-select-all\" *ngIf=\"filter?.length\">\n                <div class=\"btn-container\" *ngIf=\"settings.addNewItemOnFilter\">\n                    <button class=\"c-btn btn-iceblue\" (click)=\"addFilterNewItem()\">{{settings.addNewButtonText}}</button>\n                </div>\n            </div>\n\n            <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <li *ngFor=\"let item of data; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,i,'default')\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,i,'default')\" (keydown)=\"onOptionKeydown(item,i,$event,'default')\" [ngClass]=\"{'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\">\n                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                        <label>{{item[settings.labelKey]}}</label>\n                    </li>\n                </ul>\n            </div>\n            <!-- lazy loading -->\n            <div *ngIf=\"!settings.groupBy && settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul virtualScroller #scroll [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                    (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <li *ngFor=\"let item of scroll.viewPortItems; let i = index;\" (click)=\"onItemClick(item,getVirtualItemIndex(item,i,scroll),$event)\"\n                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,getVirtualItemIndex(item,i,scroll),'lazy')\" [attr.data-virtual-index]=\"getVirtualItemIndex(item,i,scroll)\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,getVirtualItemIndex(item,i,scroll),'lazy')\" (keydown)=\"onOptionKeydown(item,getVirtualItemIndex(item,i,scroll),$event,'lazy',scroll)\" [ngClass]=\"{'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\">\n                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                        <label>{{item[settings.labelKey]}}</label>\n                    </li>\n                </ul>\n            </div>\n            <!-- custom template -->\n            <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <li *ngFor=\"let item of data; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,i,'custom')\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,i,'custom')\" (keydown)=\"onOptionKeydown(item,i,$event,'custom')\" [ngClass]=\"{'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\">\n                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                        <label></label>\n                        <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n                    </li>\n                </ul>\n            </div>\n            <!-- lazy loading and custom template -->\n            <div *ngIf=\"!settings.groupBy && settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul virtualScroller #scroll2 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                    (vsEnd)=\"onScrollEnd($event)\" class=\"lazyContainer\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <li *ngFor=\"let item of scroll2.viewPortItems; let i = index;\" (click)=\"onItemClick(item,getVirtualItemIndex(item,i,scroll2),$event)\"\n                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,getVirtualItemIndex(item,i,scroll2),'lazy-custom')\" [attr.data-virtual-index]=\"getVirtualItemIndex(item,i,scroll2)\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,getVirtualItemIndex(item,i,scroll2),'lazy-custom')\" (keydown)=\"onOptionKeydown(item,getVirtualItemIndex(item,i,scroll2),$event,'lazy-custom',scroll2)\" [ngClass]=\"{'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\">\n                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                        <label></label>\n                        <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n                    </li>\n                </ul>\n            </div>\n            <!-- lazy loading, group By and custom template -->\n            <div *ngIf=\"settings.groupBy && settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul virtualScroller #scroll3 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                    (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <span *ngFor=\"let item of scroll3.viewPortItems; let i = index;\">\n                        <li (click)=\"onItemClick(item,getVirtualItemIndex(item,i,scroll3),$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item)}\"\n                            class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,getVirtualItemIndex(item,i,scroll3),'lazy-group-custom')\" [attr.data-virtual-index]=\"getVirtualItemIndex(item,i,scroll3)\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,getVirtualItemIndex(item,i,scroll3),'lazy-group-custom')\" (keydown)=\"onOptionKeydown(item,getVirtualItemIndex(item,i,scroll3),$event,'lazy-group-custom',scroll3)\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            aria-hidden=\"true\" tabindex=\"-1\"/>\n                            <label></label>\n                            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n                        </li>\n                        <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection}\"\n                            class=\"pure-checkbox\" role=\"presentation\">\n                            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            aria-hidden=\"true\" tabindex=\"-1\"/>\n                            <label></label>\n                            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n                        </li>\n                    </span>\n                </ul>\n            </div>\n            <!-- group By and custom template -->\n            <div *ngIf=\"settings.groupBy && !settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <span *ngFor=\"let item of groupedData; let i = index;\">\n                        <li (click)=\"selectGroup(item)\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': item.selected == true, 'is-disabled': isOptionDisabled(item)}\"\n                            class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,i,'group-custom')\" [attr.aria-selected]=\"item.selected\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,i,'group-custom')\" (keydown)=\"onGroupKeydown(item,i,$event,'group-custom')\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\" [checked]=\"item.selected\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            aria-hidden=\"true\" tabindex=\"-1\"/>\n                            <label>{{item[settings.labelKey]}}</label>\n                            <ul class=\"lazyContainer\">\n                                <span *ngFor=\"let val of item.list ; let j = index;\">\n                                    <li (click)=\"onItemClick(val,j,$event); $event.stopPropagation()\" [ngClass]=\"{'grp-title': val.grpTitle,'grp-item': !val.grpTitle && !settings.singleSelection, 'selected-item': isSelected(val) == true, 'is-disabled': isOptionDisabled(val)}\"\n                                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(val,j,'group-custom-'+i)\" [attr.aria-selected]=\"isSelected(val)\" [attr.aria-disabled]=\"isOptionDisabled(val)\" [attr.tabindex]=\"isOptionDisabled(val) ? -1 : 0\" (focus)=\"setActiveDescendant(val,j,'group-custom-'+i)\" (keydown)=\"onOptionKeydown(val,j,$event,'group-custom-'+i)\">\n                                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(val)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(val)) || val.disabled\"\n                                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                                        <label></label>\n                                        <c-templateRenderer [data]=\"itemTempl\" [item]=\"val\"></c-templateRenderer>\n                                    </li>\n                                </span>\n                            </ul>\n\n                        </li>\n                    </span>\n                </ul>\n            </div>\n            <!-- lazy loading, group By -->\n            <div *ngIf=\"settings.groupBy && settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <virtual-scroller [items]=\"groupedData\" (vsUpdate)=\"viewPortItems = $event\" (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n                    <ul virtualScroller #scroll4 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                        (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                        <span *ngFor=\"let item of scroll4.viewPortItems; let i = index;\">\n                            <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true }\"\n                                class=\"pure-checkbox\" role=\"presentation\">\n                                <input *ngIf=\"settings.showCheckbox && !item.grpTitle && !settings.singleSelection\" type=\"checkbox\" [checked]=\"isSelected(item)\"\n                                    [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                                    aria-hidden=\"true\" tabindex=\"-1\"/>\n                                <label>{{item[settings.labelKey]}}</label>\n                            </li>\n                            <li (click)=\"onItemClick(item,getVirtualItemIndex(item,i,scroll4),$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\"\n                                class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,getVirtualItemIndex(item,i,scroll4),'lazy-group')\" [attr.data-virtual-index]=\"getVirtualItemIndex(item,i,scroll4)\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,getVirtualItemIndex(item,i,scroll4),'lazy-group')\" (keydown)=\"onOptionKeydown(item,getVirtualItemIndex(item,i,scroll4),$event,'lazy-group',scroll4)\">\n                                <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                                aria-hidden=\"true\" tabindex=\"-1\"/>\n                                <label>{{item[settings.labelKey]}}</label>\n                            </li>\n                        </span>\n                    </ul>\n                </virtual-scroller>\n            </div>\n            <!-- group By -->\n            <div *ngIf=\"settings.groupBy && !settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <span *ngFor=\"let item of groupedData ; let i = index;\">\n                        <li (click)=\"selectGroup(item)\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': item.selected == true, 'is-disabled': isOptionDisabled(item)}\"\n                            class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,i,'group')\" [attr.aria-selected]=\"item.selected\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,i,'group')\" (keydown)=\"onGroupKeydown(item,i,$event,'group')\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\" [checked]=\"item.selected\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            aria-hidden=\"true\" tabindex=\"-1\"/>\n                            <label>{{item[settings.labelKey]}}</label>\n                            <ul class=\"lazyContainer\">\n                                <span *ngFor=\"let val of item.list ; let j = index;\">\n                                    <li (click)=\"onItemClick(val,j,$event); $event.stopPropagation()\" [ngClass]=\"{'selected-item': isSelected(val) == true,'grp-title': val.grpTitle,'grp-item': !val.grpTitle && !settings.singleSelection, 'is-disabled': isOptionDisabled(val)}\"\n                                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(val,j,'group-'+i)\" [attr.aria-selected]=\"isSelected(val)\" [attr.aria-disabled]=\"isOptionDisabled(val)\" [attr.tabindex]=\"isOptionDisabled(val) ? -1 : 0\" (focus)=\"setActiveDescendant(val,j,'group-'+i)\" (keydown)=\"onOptionKeydown(val,j,$event,'group-'+i)\">\n                                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(val)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(val)) || val.disabled\"\n                                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                                        <label>{{val[settings.labelKey]}}</label>\n                                    </li>\n                                </span>\n                            </ul>\n                        </li>\n                    </span>\n                    <!-- <span *ngFor=\"let item of groupedData ; let i = index;\">\n                    <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n                    <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\n                    <label>{{item[settings.labelKey]}}</label>\n                </li>\n                <li *ngIf=\"item.grpTitle && !settings.selectGroup\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n                    <input *ngIf=\"settings.showCheckbox && settings.selectGroup\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\n                    <label>{{item[settings.labelKey]}}</label>\n                </li>\n                 <li  (click)=\"selectGroup(item)\" *ngIf=\"item.grpTitle && settings.selectGroup\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n                    <input *ngIf=\"settings.showCheckbox && settings.selectGroup\" type=\"checkbox\" [checked]=\"item.selected\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\n                    <label>{{item[settings.labelKey]}}</label>\n                </li>\n                </span> -->\n                </ul>\n            </div>\n            <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">{{settings.noDataLabel}}</h5>\n        </div>\n    </div>\n</div>\n", styles: ["virtual-scroll{display:block;width:100%}.stackline-dropdown{--ms-primary: #3f51b5;--ms-primary-soft: rgba(63, 81, 181, .12);--ms-surface: #ffffff;--ms-surface-soft: #f5f7fb;--ms-surface-muted: #e8eaf6;--ms-outline: #c5cae9;--ms-outline-strong: #7986cb;--ms-on-surface: #212121;--ms-on-surface-muted: #5f6368;--ms-chip-bg: #e8eaf6;--ms-chip-text: #303f9f;--ms-chip-remove: #303f9f;--ms-shadow: 0 1px 2px rgba(33, 33, 33, .16), 0 12px 32px rgba(63, 81, 181, .12);--ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, .12), 0 4px 12px rgba(33, 33, 33, .08);position:relative;display:block;width:100%;color:var(--ms-on-surface);font:inherit}.selected-list{width:100%}.c-btn{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:8px;width:100%;min-height:56px;padding:11px 54px 11px 16px;border-radius:18px;border:1px solid var(--ms-outline);background:var(--ms-surface);box-shadow:var(--ms-shadow-soft);cursor:pointer;line-height:1.45;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease,transform .16s ease}.c-btn:hover{border-color:var(--ms-outline-strong)}.c-btn.is-active{border-color:var(--ms-primary);box-shadow:0 0 0 3px #6750a424,var(--ms-shadow-soft)}.c-btn:focus-visible{outline:3px solid rgba(63,81,181,.32);outline-offset:2px}.c-btn.disabled{cursor:not-allowed;opacity:.72}.c-placeholder,.c-single-value{color:var(--ms-on-surface-muted);font-size:.95rem}.c-btn.has-selection .c-single-value,.c-btn.has-selection .c-placeholder{color:var(--ms-on-surface);font-weight:500}.c-list{display:flex;flex:1 1 auto;flex-wrap:wrap;gap:8px;margin:0;padding:0;min-width:0}.c-chip-list{padding-right:8px}.c-token{position:relative;display:inline-block;vertical-align:middle;min-height:32px;max-width:100%;padding:6px 30px 6px 12px;border-radius:999px;background:var(--ms-chip-bg);color:var(--ms-chip-text);box-shadow:inset 0 0 0 1px #6750a414;line-height:1.35;white-space:normal;overflow-wrap:anywhere}.c-token .c-label{display:inline-flex;align-items:center;min-width:0;max-width:100%;line-height:1.3;font-weight:500;white-space:normal;overflow-wrap:anywhere}.c-remove{position:absolute;right:10px;top:50%;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;transform:translateY(-50%);color:var(--ms-chip-remove)}button.c-remove,button.c-clear,button.c-arrow-toggle{border:0;padding:0;background:transparent;font:inherit;cursor:pointer}button.c-arrow-toggle:disabled{cursor:not-allowed}.c-remove:focus-visible,.list-filter .c-clear:focus-visible,.c-arrow-toggle:focus-visible{outline:3px solid rgba(63,81,181,.32);outline-offset:2px}.c-remove svg,.c-angle-down svg,.c-angle-up svg{fill:currentColor}.c-remove c-icon{display:inline-flex;width:10px;height:10px;line-height:0}.clear-all c-icon{width:12px;height:12px}.clear-all{position:absolute;top:50%;right:42px;width:20px;height:20px;transform:translateY(-50%);color:var(--ms-on-surface-muted)}.countplaceholder{position:absolute;top:50%;right:76px;transform:translateY(-50%);color:var(--ms-on-surface-muted);font-size:.8rem;font-weight:600}.c-angle-down,.c-angle-up{position:absolute;top:50%;right:16px;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;transform:translateY(-50%);color:var(--ms-on-surface-muted);pointer-events:auto}.dropdown-list{position:absolute;width:100%;padding-top:8px;z-index:99999}.dropdown-list.tagToBody{position:fixed}.arrow-up,.arrow-down,.arrow-2{display:none}.list-area{overflow:hidden;border-radius:22px;background:var(--ms-surface);border:1px solid var(--ms-outline);box-shadow:var(--ms-shadow)}.select-all,.filter-select-all{padding:10px 14px;border-bottom:1px solid rgba(125,119,134,.16);background:#f7f2fac2}.list-filter{position:relative;display:flex;align-items:center;min-height:52px;padding-left:48px;padding-right:44px;border-bottom:1px solid rgba(125,119,134,.16);background:var(--ms-surface)}.list-filter .c-input,.list-filter input{width:100%;height:100%;border:0;background:transparent;color:var(--ms-on-surface);font:inherit}.list-filter .c-input::placeholder,.list-filter input::placeholder{color:var(--ms-on-surface-muted)}.list-filter .c-input:focus,.list-filter input:focus{outline:none}.list-filter .c-search,.list-filter .c-clear{position:absolute;top:50%;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;transform:translateY(-50%);color:var(--ms-on-surface-muted)}.list-filter .c-search{left:16px}.list-filter .c-clear{right:16px;cursor:pointer}.btn-container{padding:10px 14px 14px;text-align:center}.btn-iceblue{width:100%;min-height:40px;border-radius:999px;border:1px solid transparent;background:var(--ms-primary);color:#fff;font-weight:600}.dropdown-list ul{list-style:none;margin:0;padding:8px;overflow:auto}.dropdown-list ul li{align-items:center;min-height:0;margin:4px;padding:12px 14px;border-radius:14px;cursor:pointer;text-align:left;line-height:1.35;transition:background-color .16s ease,color .16s ease}.dropdown-list ul li:hover{background:var(--ms-surface-soft)}.dropdown-list ul li:focus-visible{outline:3px solid rgba(63,81,181,.32);outline-offset:2px}.dropdown-option.is-disabled{cursor:not-allowed;opacity:.58}.selected-item{background:var(--ms-primary-soft)!important;color:var(--ms-primary)}.selected-item:hover{background:#6750a42e!important}.grp-item{padding-left:42px!important}.grp-title{margin-top:6px;padding-top:10px!important;padding-bottom:8px!important;background:transparent!important;color:var(--ms-on-surface-muted);cursor:default!important}.grp-title label{margin-bottom:0!important;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.grp-title:hover{background:transparent!important}.pure-checkbox{position:relative}.pure-checkbox input[type=checkbox]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pure-checkbox input[type=checkbox]+label{position:relative;display:block;width:100%;margin:0;padding-left:32px;color:inherit;cursor:pointer;font-weight:500;-webkit-user-select:none;user-select:none}.pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:0;width:18px;height:18px;margin-top:-10px;border:2px solid var(--ms-outline-strong);border-radius:6px;background:var(--ms-surface);transition:all .18s ease}.pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:5px;width:7px;height:3px;margin-top:-3px;border-style:solid;border-width:0 0 2px 2px;border-color:#fff;transform:rotate(-45deg) scale(0);transform-origin:50%;transition:transform .16s ease-out}.pure-checkbox input[type=checkbox]:focus+label:before,.pure-checkbox input[type=checkbox]:hover+label:before{border-color:var(--ms-primary);box-shadow:0 0 0 4px #3f51b51f}.pure-checkbox input[type=checkbox]:checked+label:before{border-color:var(--ms-primary);background:var(--ms-primary)}.pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.pure-checkbox input[type=checkbox]:disabled+label{color:#b1acb8;cursor:not-allowed}.pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#d5d0db;background:#f2edf7;box-shadow:none}.single-select-mode .pure-checkbox input[type=checkbox]+label:before,.single-select-mode .pure-checkbox input[type=checkbox]+label:after{opacity:0}.single-select-mode .pure-checkbox input[type=checkbox]+label{padding-left:0}.list-message,.nodata-label{margin:0;padding:22px 16px 24px;color:var(--ms-on-surface-muted);text-align:center;font-size:.95rem;font-weight:500}.list-grp{padding:0 15px!important}.list-grp h4{margin:16px 0 6px;color:var(--ms-on-surface);font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.list-grp>li{padding-left:15px!important}.loading-icon{position:absolute;top:18px;right:16px;width:18px;z-index:2}.dropdown-list ::-webkit-scrollbar{width:10px}.dropdown-list ::-webkit-scrollbar-thumb{background:#7d778657;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.dropdown-list ::-webkit-scrollbar-track{background:transparent}.stackline-dropdown.theme-dark{--ms-primary: #8ab4f8;--ms-primary-soft: rgba(138, 180, 248, .18);--ms-surface: #151a23;--ms-surface-soft: #202736;--ms-surface-muted: #111722;--ms-outline: #384456;--ms-outline-strong: #8ab4f8;--ms-on-surface: #edf2f7;--ms-on-surface-muted: #aab6c5;--ms-chip-bg: #263247;--ms-chip-text: #d7e6ff;--ms-chip-remove: #d7e6ff;--ms-shadow: 0 20px 50px rgba(0, 0, 0, .42);--ms-shadow-soft: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 24px rgba(0, 0, 0, .28)}.stackline-dropdown.theme-custom{--ms-primary: var(--stackline-ms-primary, #0f766e);--ms-primary-soft: var(--stackline-ms-primary-soft, rgba(15, 118, 110, .14));--ms-surface: var(--stackline-ms-surface, #ffffff);--ms-surface-soft: var(--stackline-ms-surface-soft, #ecfdf5);--ms-surface-muted: var(--stackline-ms-surface-muted, #d1fae5);--ms-outline: var(--stackline-ms-outline, #99f6e4);--ms-outline-strong: var(--stackline-ms-outline-strong, #0f766e);--ms-on-surface: var(--stackline-ms-on-surface, #102a2a);--ms-on-surface-muted: var(--stackline-ms-on-surface-muted, #47615f);--ms-chip-bg: var(--stackline-ms-chip-bg, #ccfbf1);--ms-chip-text: var(--stackline-ms-chip-text, #115e59);--ms-chip-remove: var(--stackline-ms-chip-remove, #115e59);--ms-shadow: var(--stackline-ms-shadow, 0 18px 42px rgba(15, 118, 110, .15));--ms-shadow-soft: var(--stackline-ms-shadow-soft, 0 1px 2px rgba(15, 118, 110, .16), 0 8px 18px rgba(15, 118, 110, .09))}.stackline-dropdown.theme-classic{--ms-primary: #0079fe;--ms-primary-soft: #e9f4ff;--ms-surface: #ffffff;--ms-surface-soft: #f5f5f5;--ms-outline: #cccccc;--ms-outline-strong: #0079fe;--ms-on-surface: #333333;--ms-on-surface-muted: #333333;--ms-chip-bg: #0079fe;--ms-chip-text: #ffffff;--ms-chip-remove: #ffffff;--ms-shadow: 0 1px 5px #959595;--ms-shadow-soft: 0 1px 5px #959595;color:#333}.stackline-dropdown.theme-classic .selected-list{width:100%}.stackline-dropdown.theme-classic .c-btn{display:flex;align-items:center;flex-wrap:nowrap;gap:6px;min-height:42px;padding:10px 68px 10px 10px;border:1px solid #cccccc;border-radius:3px;background:#fff;box-shadow:0 1px 5px #959595;color:#333;font-size:14px;line-height:1.35}.stackline-dropdown.theme-classic .c-btn.is-active,.stackline-dropdown.theme-classic .c-btn:hover{border-color:#ccc;box-shadow:0 1px 5px #959595}.stackline-dropdown.theme-classic .c-btn.disabled{background:#ccc;opacity:1}.stackline-dropdown.theme-classic .c-placeholder,.stackline-dropdown.theme-classic .c-single-value{color:#333;font-size:14px}.stackline-dropdown.theme-classic .c-list{display:flex;flex:1 1 auto;align-items:center;flex-wrap:wrap;gap:4px;width:auto;min-width:0;margin:0;padding:0}.stackline-dropdown.theme-classic .c-chip-list{padding-right:0}.stackline-dropdown.theme-classic .c-token{display:inline-block;min-height:0;margin:2px 0 0;padding:2px 24px 2px 6px;border-radius:2px;background:#0079fe;box-shadow:none;color:#fff;line-height:1.4}.stackline-dropdown.theme-classic .c-token .c-label{display:inline;color:#fff;font-size:14px;font-weight:400;line-height:1.4}.stackline-dropdown.theme-classic .c-remove{right:5px;width:14px;height:14px;color:#fff}.stackline-dropdown.theme-classic .c-remove c-icon{width:9px;height:9px}.stackline-dropdown.theme-classic .clear-all{right:42px;width:18px;height:18px;color:#333}.stackline-dropdown.theme-classic .clear-all c-icon{width:11px;height:11px}.stackline-dropdown.theme-classic .countplaceholder{right:76px;color:#333;font-size:14px;font-weight:400}.stackline-dropdown.theme-classic .c-angle-down,.stackline-dropdown.theme-classic .c-angle-up{right:10px;width:20px;height:20px;color:#333}.stackline-dropdown.theme-classic .dropdown-list{padding-top:14px;padding-bottom:0;z-index:9999}.stackline-dropdown.theme-classic .dropdown-list.opens-up{padding-top:0;padding-bottom:14px}.stackline-dropdown.theme-classic .dropdown-list.opens-down{padding-top:14px;padding-bottom:0}.stackline-dropdown.theme-classic .arrow-up{display:block;position:absolute;top:0;width:0;height:0;margin-left:15px;border-right:13px solid transparent;border-bottom:15px solid #ffffff;border-left:13px solid transparent}.stackline-dropdown.theme-classic .arrow-2{top:-1px;border-bottom-color:#ccc}.stackline-dropdown.theme-classic .arrow-down{display:block;position:absolute;top:auto;bottom:0;width:0;height:0;margin-left:15px;border-right:13px solid transparent;border-top:15px solid #ffffff;border-left:13px solid transparent}.stackline-dropdown.theme-classic .arrow-down.arrow-2{top:auto;bottom:-1px;border-top-color:#ccc}.stackline-dropdown.theme-classic .list-area{overflow:hidden;margin:0;border:1px solid #cccccc;border-radius:3px;background:#fff;box-shadow:0 1px 5px #959595}.stackline-dropdown.theme-classic .select-all,.stackline-dropdown.theme-classic .filter-select-all{padding:10px;border-bottom:1px solid #cccccc;background:#fff}.stackline-dropdown.theme-classic .list-filter{display:block;min-height:35px;padding:0;border-bottom:1px solid #cccccc;background:#fff}.stackline-dropdown.theme-classic .list-filter .c-input,.stackline-dropdown.theme-classic .list-filter input{height:35px;padding:0 35px;color:#333}.stackline-dropdown.theme-classic .list-filter .c-search{left:13px}.stackline-dropdown.theme-classic .list-filter .c-clear{right:13px}.stackline-dropdown.theme-classic .btn-container{padding:10px}.stackline-dropdown.theme-classic .btn-iceblue{min-height:35px;border-radius:3px;background:#0079fe}.stackline-dropdown.theme-classic .dropdown-list ul{margin:0;padding:0}.stackline-dropdown.theme-classic .dropdown-list ul li{min-height:0;margin:0;padding:10px;border-radius:0;color:#333;line-height:1.35}.stackline-dropdown.theme-classic .dropdown-list ul li:hover{background:#f5f5f5}.stackline-dropdown.theme-classic .selected-item,.stackline-dropdown.theme-classic .selected-item:hover{background:#e9f4ff!important;color:#333}.stackline-dropdown.theme-classic .grp-item{padding-left:30px!important}.stackline-dropdown.theme-classic .grp-title{color:#000}.stackline-dropdown.theme-classic .grp-title label,.stackline-dropdown.theme-classic .list-grp h4{font-size:14px;font-weight:700;letter-spacing:0;text-transform:capitalize}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]+label{padding-left:2em;color:#000;font-weight:300}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]+label:before{width:14px;height:14px;margin-top:-9px;border:2px solid #0079fe;border-radius:0;background:#fff}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]+label:after{top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-width:0 0 3px 3px;border-color:#fff;background:transparent}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]:hover+label:before{border-color:#0079fe;background-color:#f2f2f2;box-shadow:none}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]:checked+label:before{border-color:#0079fe;background:#0079fe}.stackline-dropdown.theme-classic .single-select-mode .pure-checkbox input[type=checkbox]+label{padding-left:0}\n"] }]
+            args: [{ selector: 'angular-multiselect, angular2-multiselect', host: { '[class]': 'defaultSettings.classes' }, providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALIDATION], encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"stackline-dropdown\" [ngClass]=\"getDropdownClasses()\" (clickOutside)=\"closeDropdownOnClickOut()\" #stacklineDropdown>\n    <div class=\"selected-list\" #selectedList>\n        <div class=\"c-btn\"\n            #triggerButton\n            (click)=\"toggleDropdown($event)\"\n            (keydown)=\"onTriggerKeydown($event)\"\n            [ngClass]=\"{'disabled': settings.disabled, 'is-active': isActive, 'has-selection': selectedItems?.length > 0, 'single-select-mode': settings.singleSelection}\"\n            [attr.tabindex]=\"settings.disabled ? -1 : 0\"\n            role=\"combobox\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-controls]=\"listboxId\"\n            [attr.aria-expanded]=\"isActive\"\n            [attr.aria-disabled]=\"settings.disabled\"\n            [attr.aria-activedescendant]=\"activeDescendantId\"\n            [attr.aria-label]=\"settings.ariaLabelledBy ? null : getAriaLabel()\"\n            [attr.aria-labelledby]=\"settings.ariaLabelledBy || null\">\n\n            <span class=\"c-placeholder\" *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n            <span class=\"c-single-value\" *ngIf=\"settings.singleSelection && !badgeTempl\">\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\">\n                    {{item[settings.labelKey]}}\n                </span>\n            </span>\n            <span class=\"c-list c-chip-list\" *ngIf=\"selectedItems?.length > 0 && settings.singleSelection && badgeTempl \">\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\">\n                    <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\n\n                    <span *ngIf=\"badgeTempl\" class=\"c-label\">\n                        <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\"></c-templateRenderer>\n                    </span>\n                    <button type=\"button\" class=\"c-remove\" (click)=\"onItemClick(item,k,$event);$event.stopPropagation()\" (keydown)=\"onInlineActionKeydown($event)\" [attr.aria-label]=\"getRemoveItemAriaLabel(item)\">\n                        <c-icon [name]=\"'remove'\"></c-icon>\n                    </button>\n                </div>\n            </span>\n            <div class=\"c-list c-chip-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n                <ng-container *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\">\n                    <div class=\"c-token\" *ngIf=\"shouldShowSelectedBadge(k)\">\n                        <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\n                        <span *ngIf=\"badgeTempl\" class=\"c-label\">\n                            <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\"></c-templateRenderer>\n                        </span>\n                        <button type=\"button\" class=\"c-remove\" (click)=\"onItemClick(item,k,$event);$event.stopPropagation()\" (keydown)=\"onInlineActionKeydown($event)\" [attr.aria-label]=\"getRemoveItemAriaLabel(item)\">\n                            <c-icon [name]=\"'remove'\"></c-icon>\n                        </button>\n                    </div>\n                </ng-container>\n            </div>\n            <span class=\"countplaceholder\" *ngIf=\"getHiddenSelectedCount() > 0\">+{{getHiddenSelectedCount()}}</span>\n            <button type=\"button\" class=\"c-remove clear-all\" *ngIf=\"settings.clearAll && selectedItems?.length > 0 && !settings.disabled\" (click)=\"clearSelection($event);$event.stopPropagation()\" (keydown)=\"onInlineActionKeydown($event)\" [attr.aria-label]=\"getClearAllAriaLabel()\">\n                <c-icon [name]=\"'remove'\"></c-icon>\n            </button>\n            <button type=\"button\" *ngIf=\"!isActive\" class=\"c-angle-down c-arrow-toggle\" [disabled]=\"settings.disabled\" (click)=\"toggleDropdown($event);$event.stopPropagation()\" (keydown)=\"onArrowButtonKeydown($event)\" [attr.aria-label]=\"getOpenDropdownAriaLabel()\" [attr.aria-controls]=\"listboxId\" [attr.aria-expanded]=\"isActive\">\n                <c-icon [name]=\"'angle-down'\"></c-icon>\n            </button>\n            <button type=\"button\" *ngIf=\"isActive\" class=\"c-angle-up c-arrow-toggle\" [disabled]=\"settings.disabled\" (click)=\"toggleDropdown($event);$event.stopPropagation()\" (keydown)=\"onArrowButtonKeydown($event)\" [attr.aria-label]=\"getCloseDropdownAriaLabel()\" [attr.aria-controls]=\"listboxId\" [attr.aria-expanded]=\"isActive\">\n                <c-icon [name]=\"'angle-up'\"></c-icon>\n\n            </button>\n        </div>\n    </div>\n    <div #dropdownList class=\"dropdown-list animated fadeIn\"\n    [ngClass]=\"{'tagToBody': isBodyOverlayEnabled(), 'opens-up': settings.position == 'top', 'opens-down': settings.position == 'bottom'}\"\n    [style.width]=\"dropDownWidth !== null ? dropDownWidth + 'px' : 'auto'\"\n    [style.top]=\"dropDownTop\" \n    [style.bottom]=\"dropDownBottom\"\n    [style.left.px]=\"dropDownLeft\" \n        (pointerdown)=\"onDropdownPanelPointerDown($event)\"\n        (touchstart)=\"onDropdownPanelPointerDown($event)\"\n        role=\"presentation\"\n        [attr.aria-hidden]=\"!isActive\"\n        [hidden]=\"!isActive\">\n        <div [ngClass]=\"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\" class=\"arrow-2\"></div>\n        <div [ngClass]=\"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\"></div>\n        <div class=\"list-area\" [ngClass]=\"{'single-select-mode': settings.singleSelection }\">\n            <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection && data?.length > 0 && !isDisabledItemPresent\"\n                >\n                <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                [id]=\"id\" (change)=\"toggleSelectAll($event)\"/>\n                <label [for]=\"id\">\n                    <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n                    <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n                </label>\n            </div>\n            <img class=\"loading-icon\" *ngIf=\"loading\" src=\"assets/img/loading.gif\" [attr.alt]=\"settings.loadingText\" />\n            <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter\">\n                <span class=\"c-search\" id=\"searchIcon\" aria-hidden=\"true\">\n                    <c-icon [name]=\"'search'\"></c-icon>\n                </span>\n                <button type=\"button\" *ngIf=\"!settings.lazyLoading\" [hidden]=\"filter == undefined || filter?.length == 0\" class=\"c-clear\" (click)=\"clearSearch()\" (keydown)=\"onInlineActionKeydown($event)\" [attr.aria-label]=\"getClearSearchAriaLabel()\">\n                    <c-icon [name]=\"'clear'\"></c-icon>\n                </button>\n                <button type=\"button\" *ngIf=\"settings.lazyLoading\" [hidden]=\"filter == undefined || filter?.length == 0\" class=\"c-clear\" (click)=\"resetInfiniteSearch()\" (keydown)=\"onInlineActionKeydown($event)\" [attr.aria-label]=\"getClearSearchAriaLabel()\">\n                    <c-icon [name]=\"'clear'\"></c-icon>\n                </button>\n\n                <input class=\"c-input\" *ngIf=\"settings.groupBy && !settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                    [(ngModel)]=\"filter\" (keyup)=\"filterGroupedList()\" (keydown)=\"onSearchKeydown($event)\" [attr.aria-label]=\"getSearchAriaLabel()\">\n                <input class=\"c-input\" *ngIf=\"!settings.groupBy && !settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                    [(ngModel)]=\"filter\" (keyup)=\"filteritems($event)\" (keydown)=\"onSearchKeydown($event)\" [attr.aria-label]=\"getSearchAriaLabel()\">\n                <input class=\"c-input\" *ngIf=\"settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                    [(ngModel)]=\"filter\" (keyup)=\"onKeyUp($event)\" (keydown)=\"onSearchKeydown($event)\" [attr.aria-label]=\"getSearchAriaLabel()\">\n                <!--            <input class=\"c-input\" *ngIf=\"!settings.lazyLoading && !searchTempl && settings.groupBy\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                [(ngModel)]=\"filter\" (keyup)=\"filterGroupList($event)\">-->\n                <c-templateRenderer *ngIf=\"searchTempl\" [data]=\"searchTempl\" [item]=\"item\"></c-templateRenderer>\n            </div>\n            <div class=\"filter-select-all\" *ngIf=\"!settings.lazyLoading && settings.enableFilterSelectAll && !isDisabledItemPresent\">\n                <div class=\"pure-checkbox select-all\" *ngIf=\"!settings.groupBy && filter?.length > 0 && filterLength > 0  && !settings.singleSelection\" (click)=\"toggleFilterSelectAll()\" (keydown)=\"onSelectAllKeydown($event, 'filter')\" tabindex=\"0\" role=\"checkbox\" [attr.aria-checked]=\"isFilterSelectAll\">\n                    <input type=\"checkbox\" [checked]=\"isFilterSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                    aria-hidden=\"true\" tabindex=\"-1\" (click)=\"$event.stopPropagation()\" (change)=\"toggleFilterSelectAll()\"/>\n                    <label>\n                        <span [hidden]=\"isFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n                        <span [hidden]=\"!isFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n                    </label>\n                </div>\n                <div class=\"pure-checkbox select-all\" *ngIf=\"settings.groupBy && filter?.length > 0 && groupedData?.length > 0  && !settings.singleSelection\" (click)=\"toggleFilterSelectAll()\" (keydown)=\"onSelectAllKeydown($event, 'filter')\" tabindex=\"0\" role=\"checkbox\" [attr.aria-checked]=\"isFilterSelectAll\">\n                    <input type=\"checkbox\" [checked]=\"isFilterSelectAll && filter?.length > 0\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                    aria-hidden=\"true\" tabindex=\"-1\" (click)=\"$event.stopPropagation()\" (change)=\"toggleFilterSelectAll()\"/>\n                    <label>\n                        <span [hidden]=\"isFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n                        <span [hidden]=\"!isFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n                    </label>\n                </div>\n            </div>\n            <div class=\"filter-select-all\" *ngIf=\"settings.lazyLoading && settings.enableFilterSelectAll && !isDisabledItemPresent && !settings.singleSelection\">\n                <div class=\"pure-checkbox select-all\" *ngIf=\"filter?.length > 0 && infiniteFilterLength > 0\" (click)=\"toggleInfiniteFilterSelectAll()\" (keydown)=\"onSelectAllKeydown($event, 'infinite-filter')\" tabindex=\"0\" role=\"checkbox\" [attr.aria-checked]=\"isInfiniteFilterSelectAll\">\n                    <input type=\"checkbox\" [checked]=\"isInfiniteFilterSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                    aria-hidden=\"true\" tabindex=\"-1\" (click)=\"$event.stopPropagation()\" (change)=\"toggleInfiniteFilterSelectAll()\"/>\n                    <label>\n                        <span [hidden]=\"isInfiniteFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n                        <span [hidden]=\"!isInfiniteFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n                    </label>\n                </div>\n            </div>\n            <div class=\"filter-select-all\" *ngIf=\"filter?.length\">\n                <div class=\"btn-container\" *ngIf=\"settings.addNewItemOnFilter\">\n                    <button class=\"c-btn btn-iceblue\" (click)=\"addFilterNewItem()\">{{settings.addNewButtonText}}</button>\n                </div>\n            </div>\n\n            <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <li *ngFor=\"let item of data; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,i,'default')\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,i,'default')\" (keydown)=\"onOptionKeydown(item,i,$event,'default')\" [ngClass]=\"{'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\">\n                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                        <label>{{item[settings.labelKey]}}</label>\n                    </li>\n                </ul>\n            </div>\n            <!-- lazy loading -->\n            <div *ngIf=\"!settings.groupBy && settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul virtualScroller #scroll [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                    (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <li *ngFor=\"let item of scroll.viewPortItems; let i = index;\" (click)=\"onItemClick(item,getVirtualItemIndex(item,i,scroll),$event)\"\n                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,getVirtualItemIndex(item,i,scroll),'lazy')\" [attr.data-virtual-index]=\"getVirtualItemIndex(item,i,scroll)\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,getVirtualItemIndex(item,i,scroll),'lazy')\" (keydown)=\"onOptionKeydown(item,getVirtualItemIndex(item,i,scroll),$event,'lazy',scroll)\" [ngClass]=\"{'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\">\n                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                        <label>{{item[settings.labelKey]}}</label>\n                    </li>\n                </ul>\n            </div>\n            <!-- custom template -->\n            <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <li *ngFor=\"let item of data; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,i,'custom')\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,i,'custom')\" (keydown)=\"onOptionKeydown(item,i,$event,'custom')\" [ngClass]=\"{'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\">\n                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                        <label></label>\n                        <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n                    </li>\n                </ul>\n            </div>\n            <!-- lazy loading and custom template -->\n            <div *ngIf=\"!settings.groupBy && settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul virtualScroller #scroll2 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                    (vsEnd)=\"onScrollEnd($event)\" class=\"lazyContainer\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <li *ngFor=\"let item of scroll2.viewPortItems; let i = index;\" (click)=\"onItemClick(item,getVirtualItemIndex(item,i,scroll2),$event)\"\n                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,getVirtualItemIndex(item,i,scroll2),'lazy-custom')\" [attr.data-virtual-index]=\"getVirtualItemIndex(item,i,scroll2)\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,getVirtualItemIndex(item,i,scroll2),'lazy-custom')\" (keydown)=\"onOptionKeydown(item,getVirtualItemIndex(item,i,scroll2),$event,'lazy-custom',scroll2)\" [ngClass]=\"{'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\">\n                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                        <label></label>\n                        <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n                    </li>\n                </ul>\n            </div>\n            <!-- lazy loading, group By and custom template -->\n            <div *ngIf=\"settings.groupBy && settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul virtualScroller #scroll3 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                    (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <span *ngFor=\"let item of scroll3.viewPortItems; let i = index;\">\n                        <li (click)=\"onItemClick(item,getVirtualItemIndex(item,i,scroll3),$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item)}\"\n                            class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,getVirtualItemIndex(item,i,scroll3),'lazy-group-custom')\" [attr.data-virtual-index]=\"getVirtualItemIndex(item,i,scroll3)\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,getVirtualItemIndex(item,i,scroll3),'lazy-group-custom')\" (keydown)=\"onOptionKeydown(item,getVirtualItemIndex(item,i,scroll3),$event,'lazy-group-custom',scroll3)\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            aria-hidden=\"true\" tabindex=\"-1\"/>\n                            <label></label>\n                            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n                        </li>\n                        <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection}\"\n                            class=\"pure-checkbox\" role=\"presentation\">\n                            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            aria-hidden=\"true\" tabindex=\"-1\"/>\n                            <label></label>\n                            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n                        </li>\n                    </span>\n                </ul>\n            </div>\n            <!-- group By and custom template -->\n            <div *ngIf=\"settings.groupBy && !settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <span *ngFor=\"let item of groupedData; let i = index;\">\n                        <li (click)=\"selectGroup(item)\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': item.selected == true, 'is-disabled': isOptionDisabled(item)}\"\n                            class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,i,'group-custom')\" [attr.aria-selected]=\"item.selected\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,i,'group-custom')\" (keydown)=\"onGroupKeydown(item,i,$event,'group-custom')\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\" [checked]=\"item.selected\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            aria-hidden=\"true\" tabindex=\"-1\"/>\n                            <label>{{item[settings.labelKey]}}</label>\n                            <ul class=\"lazyContainer\">\n                                <span *ngFor=\"let val of item.list ; let j = index;\">\n                                    <li (click)=\"onItemClick(val,j,$event); $event.stopPropagation()\" [ngClass]=\"{'grp-title': val.grpTitle,'grp-item': !val.grpTitle && !settings.singleSelection, 'selected-item': isSelected(val) == true, 'is-disabled': isOptionDisabled(val)}\"\n                                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(val,j,'group-custom-'+i)\" [attr.aria-selected]=\"isSelected(val)\" [attr.aria-disabled]=\"isOptionDisabled(val)\" [attr.tabindex]=\"isOptionDisabled(val) ? -1 : 0\" (focus)=\"setActiveDescendant(val,j,'group-custom-'+i)\" (keydown)=\"onOptionKeydown(val,j,$event,'group-custom-'+i)\">\n                                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(val)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(val)) || val.disabled\"\n                                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                                        <label></label>\n                                        <c-templateRenderer [data]=\"itemTempl\" [item]=\"val\"></c-templateRenderer>\n                                    </li>\n                                </span>\n                            </ul>\n\n                        </li>\n                    </span>\n                </ul>\n            </div>\n            <!-- lazy loading, group By -->\n            <div *ngIf=\"settings.groupBy && settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <virtual-scroller [items]=\"groupedData\" (vsUpdate)=\"viewPortItems = $event\" (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n                    <ul virtualScroller #scroll4 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                        (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                        <span *ngFor=\"let item of scroll4.viewPortItems; let i = index;\">\n                            <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true }\"\n                                class=\"pure-checkbox\" role=\"presentation\">\n                                <input *ngIf=\"settings.showCheckbox && !item.grpTitle && !settings.singleSelection\" type=\"checkbox\" [checked]=\"isSelected(item)\"\n                                    [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                                    aria-hidden=\"true\" tabindex=\"-1\"/>\n                                <label>{{item[settings.labelKey]}}</label>\n                            </li>\n                            <li (click)=\"onItemClick(item,getVirtualItemIndex(item,i,scroll4),$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\"\n                                class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,getVirtualItemIndex(item,i,scroll4),'lazy-group')\" [attr.data-virtual-index]=\"getVirtualItemIndex(item,i,scroll4)\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,getVirtualItemIndex(item,i,scroll4),'lazy-group')\" (keydown)=\"onOptionKeydown(item,getVirtualItemIndex(item,i,scroll4),$event,'lazy-group',scroll4)\">\n                                <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                                aria-hidden=\"true\" tabindex=\"-1\"/>\n                                <label>{{item[settings.labelKey]}}</label>\n                            </li>\n                        </span>\n                    </ul>\n                </virtual-scroller>\n            </div>\n            <!-- group By -->\n            <div *ngIf=\"settings.groupBy && !settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <span *ngFor=\"let item of groupedData ; let i = index;\">\n                        <li (click)=\"selectGroup(item)\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': item.selected == true, 'is-disabled': isOptionDisabled(item)}\"\n                            class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,i,'group')\" [attr.aria-selected]=\"item.selected\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,i,'group')\" (keydown)=\"onGroupKeydown(item,i,$event,'group')\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\" [checked]=\"item.selected\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            aria-hidden=\"true\" tabindex=\"-1\"/>\n                            <label>{{item[settings.labelKey]}}</label>\n                            <ul class=\"lazyContainer\">\n                                <span *ngFor=\"let val of item.list ; let j = index;\">\n                                    <li (click)=\"onItemClick(val,j,$event); $event.stopPropagation()\" [ngClass]=\"{'selected-item': isSelected(val) == true,'grp-title': val.grpTitle,'grp-item': !val.grpTitle && !settings.singleSelection, 'is-disabled': isOptionDisabled(val)}\"\n                                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(val,j,'group-'+i)\" [attr.aria-selected]=\"isSelected(val)\" [attr.aria-disabled]=\"isOptionDisabled(val)\" [attr.tabindex]=\"isOptionDisabled(val) ? -1 : 0\" (focus)=\"setActiveDescendant(val,j,'group-'+i)\" (keydown)=\"onOptionKeydown(val,j,$event,'group-'+i)\">\n                                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(val)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(val)) || val.disabled\"\n                                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                                        <label>{{val[settings.labelKey]}}</label>\n                                    </li>\n                                </span>\n                            </ul>\n                        </li>\n                    </span>\n                    <!-- <span *ngFor=\"let item of groupedData ; let i = index;\">\n                    <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n                    <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\n                    <label>{{item[settings.labelKey]}}</label>\n                </li>\n                <li *ngIf=\"item.grpTitle && !settings.selectGroup\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n                    <input *ngIf=\"settings.showCheckbox && settings.selectGroup\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\n                    <label>{{item[settings.labelKey]}}</label>\n                </li>\n                 <li  (click)=\"selectGroup(item)\" *ngIf=\"item.grpTitle && settings.selectGroup\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n                    <input *ngIf=\"settings.showCheckbox && settings.selectGroup\" type=\"checkbox\" [checked]=\"item.selected\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\n                    <label>{{item[settings.labelKey]}}</label>\n                </li>\n                </span> -->\n                </ul>\n            </div>\n            <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">{{settings.noDataLabel}}</h5>\n        </div>\n    </div>\n</div>\n", styles: ["virtual-scroll{display:block;width:100%}.stackline-dropdown{--ms-primary: #3f51b5;--ms-primary-soft: rgba(63, 81, 181, .12);--ms-surface: #ffffff;--ms-surface-soft: #f5f7fb;--ms-surface-muted: #e8eaf6;--ms-outline: #c5cae9;--ms-outline-strong: #7986cb;--ms-on-surface: #212121;--ms-on-surface-muted: #5f6368;--ms-chip-bg: #e8eaf6;--ms-chip-text: #303f9f;--ms-chip-remove: #303f9f;--ms-shadow: 0 1px 2px rgba(33, 33, 33, .16), 0 12px 32px rgba(63, 81, 181, .12);--ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, .12), 0 4px 12px rgba(33, 33, 33, .08);position:relative;display:block;width:100%;color:var(--ms-on-surface);font:inherit}.selected-list{width:100%}.c-btn{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:8px;width:100%;min-height:56px;padding:11px 54px 11px 16px;border-radius:18px;border:1px solid var(--ms-outline);background:var(--ms-surface);box-shadow:var(--ms-shadow-soft);cursor:pointer;line-height:1.45;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease,transform .16s ease}.c-btn:hover{border-color:var(--ms-outline-strong)}.c-btn.is-active{border-color:var(--ms-primary);box-shadow:0 0 0 3px #6750a424,var(--ms-shadow-soft)}.c-btn:focus-visible{outline:3px solid rgba(63,81,181,.32);outline-offset:2px}.c-btn.disabled{cursor:not-allowed;opacity:.72}.c-placeholder,.c-single-value{color:var(--ms-on-surface-muted);font-size:.95rem}.c-btn.has-selection .c-single-value,.c-btn.has-selection .c-placeholder{color:var(--ms-on-surface);font-weight:500}.c-list{display:flex;flex:1 1 auto;flex-wrap:wrap;gap:8px;margin:0;padding:0;min-width:0}.c-chip-list{padding-right:8px}.c-token{position:relative;display:inline-block;vertical-align:middle;min-height:32px;max-width:100%;padding:6px 30px 6px 12px;border-radius:999px;background:var(--ms-chip-bg);color:var(--ms-chip-text);box-shadow:inset 0 0 0 1px #6750a414;line-height:1.35;white-space:normal;overflow-wrap:anywhere}.c-token .c-label{display:inline-flex;align-items:center;min-width:0;max-width:100%;line-height:1.3;font-weight:500;white-space:normal;overflow-wrap:anywhere}.c-remove{position:absolute;right:10px;top:50%;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;transform:translateY(-50%);color:var(--ms-chip-remove)}button.c-remove,button.c-clear,button.c-arrow-toggle{border:0;padding:0;background:transparent;font:inherit;cursor:pointer}button.c-arrow-toggle:disabled{cursor:not-allowed}.c-remove:focus-visible,.list-filter .c-clear:focus-visible,.c-arrow-toggle:focus-visible{outline:3px solid rgba(63,81,181,.32);outline-offset:2px}.c-remove svg,.c-angle-down svg,.c-angle-up svg{fill:currentColor}.c-remove c-icon{display:inline-flex;width:10px;height:10px;line-height:0}.clear-all c-icon{width:12px;height:12px}.clear-all{position:absolute;top:50%;right:42px;width:20px;height:20px;transform:translateY(-50%);color:var(--ms-on-surface-muted)}.countplaceholder{position:absolute;top:50%;right:76px;transform:translateY(-50%);color:var(--ms-on-surface-muted);font-size:.8rem;font-weight:600}.c-angle-down,.c-angle-up{position:absolute;top:50%;right:16px;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;transform:translateY(-50%);color:var(--ms-on-surface-muted);pointer-events:auto}.dropdown-list{position:absolute;right:0;left:0;box-sizing:border-box;width:auto;min-width:0;max-width:100%;padding-top:8px;z-index:99999}.dropdown-list.tagToBody{position:fixed;right:auto;max-width:calc(100vw - 16px);z-index:100000}.arrow-up,.arrow-down,.arrow-2{display:none}.list-area{box-sizing:border-box;max-width:100%;overflow:hidden;border-radius:22px;background:var(--ms-surface);border:1px solid var(--ms-outline);box-shadow:var(--ms-shadow)}.select-all,.filter-select-all{padding:10px 14px;border-bottom:1px solid rgba(125,119,134,.16);background:#f7f2fac2}.list-filter{position:relative;display:flex;align-items:center;min-height:52px;padding-left:48px;padding-right:44px;border-bottom:1px solid rgba(125,119,134,.16);background:var(--ms-surface)}.list-filter .c-input,.list-filter input{width:100%;height:100%;border:0;background:transparent;color:var(--ms-on-surface);font:inherit}.list-filter .c-input::placeholder,.list-filter input::placeholder{color:var(--ms-on-surface-muted)}.list-filter .c-input:focus,.list-filter input:focus{outline:none}.list-filter .c-search,.list-filter .c-clear{position:absolute;top:50%;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;transform:translateY(-50%);color:var(--ms-on-surface-muted)}.list-filter .c-search{left:16px}.list-filter .c-clear{right:16px;cursor:pointer}.btn-container{padding:10px 14px 14px;text-align:center}.btn-iceblue{width:100%;min-height:40px;border-radius:999px;border:1px solid transparent;background:var(--ms-primary);color:#fff;font-weight:600}.dropdown-list ul{list-style:none;margin:0;padding:8px;overflow:auto}.dropdown-list ul li{align-items:center;min-height:0;margin:4px;padding:12px 14px;border-radius:14px;cursor:pointer;text-align:left;line-height:1.35;transition:background-color .16s ease,color .16s ease}.dropdown-list ul li:hover{background:var(--ms-surface-soft)}.dropdown-list ul li:focus-visible{outline:3px solid rgba(63,81,181,.32);outline-offset:2px}.dropdown-option.is-disabled{cursor:not-allowed;opacity:.58}.selected-item{background:var(--ms-primary-soft)!important;color:var(--ms-primary)}.selected-item:hover{background:#6750a42e!important}.grp-item{padding-left:42px!important}.grp-title{margin-top:6px;padding-top:10px!important;padding-bottom:8px!important;background:transparent!important;color:var(--ms-on-surface-muted);cursor:default!important}.grp-title label{margin-bottom:0!important;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.grp-title:hover{background:transparent!important}.pure-checkbox{position:relative}.pure-checkbox input[type=checkbox]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pure-checkbox input[type=checkbox]+label{position:relative;display:block;width:100%;margin:0;padding-left:32px;color:inherit;cursor:pointer;font-weight:500;-webkit-user-select:none;user-select:none}.pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:0;width:18px;height:18px;margin-top:-10px;border:2px solid var(--ms-outline-strong);border-radius:6px;background:var(--ms-surface);transition:all .18s ease}.pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:5px;width:7px;height:3px;margin-top:-3px;border-style:solid;border-width:0 0 2px 2px;border-color:#fff;transform:rotate(-45deg) scale(0);transform-origin:50%;transition:transform .16s ease-out}.pure-checkbox input[type=checkbox]:focus+label:before,.pure-checkbox input[type=checkbox]:hover+label:before{border-color:var(--ms-primary);box-shadow:0 0 0 4px #3f51b51f}.pure-checkbox input[type=checkbox]:checked+label:before{border-color:var(--ms-primary);background:var(--ms-primary)}.pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.pure-checkbox input[type=checkbox]:disabled+label{color:#b1acb8;cursor:not-allowed}.pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#d5d0db;background:#f2edf7;box-shadow:none}.single-select-mode .pure-checkbox input[type=checkbox]+label:before,.single-select-mode .pure-checkbox input[type=checkbox]+label:after{opacity:0}.single-select-mode .pure-checkbox input[type=checkbox]+label{padding-left:0}.list-message,.nodata-label{margin:0;padding:22px 16px 24px;color:var(--ms-on-surface-muted);text-align:center;font-size:.95rem;font-weight:500}.list-grp{padding:0 15px!important}.list-grp h4{margin:16px 0 6px;color:var(--ms-on-surface);font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.list-grp>li{padding-left:15px!important}.loading-icon{position:absolute;top:18px;right:16px;width:18px;z-index:2}.dropdown-list ::-webkit-scrollbar{width:10px}.dropdown-list ::-webkit-scrollbar-thumb{background:#7d778657;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.dropdown-list ::-webkit-scrollbar-track{background:transparent}.stackline-dropdown.theme-dark{--ms-primary: #8ab4f8;--ms-primary-soft: rgba(138, 180, 248, .18);--ms-surface: #151a23;--ms-surface-soft: #202736;--ms-surface-muted: #111722;--ms-outline: #384456;--ms-outline-strong: #8ab4f8;--ms-on-surface: #edf2f7;--ms-on-surface-muted: #aab6c5;--ms-chip-bg: #263247;--ms-chip-text: #d7e6ff;--ms-chip-remove: #d7e6ff;--ms-shadow: 0 20px 50px rgba(0, 0, 0, .42);--ms-shadow-soft: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 24px rgba(0, 0, 0, .28)}.stackline-dropdown.theme-custom{--ms-primary: var(--stackline-ms-primary, #0f766e);--ms-primary-soft: var(--stackline-ms-primary-soft, rgba(15, 118, 110, .14));--ms-surface: var(--stackline-ms-surface, #ffffff);--ms-surface-soft: var(--stackline-ms-surface-soft, #ecfdf5);--ms-surface-muted: var(--stackline-ms-surface-muted, #d1fae5);--ms-outline: var(--stackline-ms-outline, #99f6e4);--ms-outline-strong: var(--stackline-ms-outline-strong, #0f766e);--ms-on-surface: var(--stackline-ms-on-surface, #102a2a);--ms-on-surface-muted: var(--stackline-ms-on-surface-muted, #47615f);--ms-chip-bg: var(--stackline-ms-chip-bg, #ccfbf1);--ms-chip-text: var(--stackline-ms-chip-text, #115e59);--ms-chip-remove: var(--stackline-ms-chip-remove, #115e59);--ms-shadow: var(--stackline-ms-shadow, 0 18px 42px rgba(15, 118, 110, .15));--ms-shadow-soft: var(--stackline-ms-shadow-soft, 0 1px 2px rgba(15, 118, 110, .16), 0 8px 18px rgba(15, 118, 110, .09))}.stackline-dropdown.theme-classic{--ms-primary: #0079fe;--ms-primary-soft: #e9f4ff;--ms-surface: #ffffff;--ms-surface-soft: #f5f5f5;--ms-outline: #cccccc;--ms-outline-strong: #0079fe;--ms-on-surface: #333333;--ms-on-surface-muted: #333333;--ms-chip-bg: #0079fe;--ms-chip-text: #ffffff;--ms-chip-remove: #ffffff;--ms-shadow: 0 1px 5px #959595;--ms-shadow-soft: 0 1px 5px #959595;color:#333}.stackline-dropdown.theme-classic .selected-list{width:100%}.stackline-dropdown.theme-classic .c-btn{display:flex;align-items:center;flex-wrap:nowrap;gap:6px;min-height:42px;padding:10px 68px 10px 10px;border:1px solid #cccccc;border-radius:3px;background:#fff;box-shadow:0 1px 5px #959595;color:#333;font-size:14px;line-height:1.35}.stackline-dropdown.theme-classic .c-btn.is-active,.stackline-dropdown.theme-classic .c-btn:hover{border-color:#ccc;box-shadow:0 1px 5px #959595}.stackline-dropdown.theme-classic .c-btn.disabled{background:#ccc;opacity:1}.stackline-dropdown.theme-classic .c-placeholder,.stackline-dropdown.theme-classic .c-single-value{color:#333;font-size:14px}.stackline-dropdown.theme-classic .c-list{display:flex;flex:1 1 auto;align-items:center;flex-wrap:wrap;gap:4px;width:auto;min-width:0;margin:0;padding:0}.stackline-dropdown.theme-classic .c-chip-list{padding-right:0}.stackline-dropdown.theme-classic .c-token{display:inline-block;min-height:0;margin:2px 0 0;padding:2px 24px 2px 6px;border-radius:2px;background:#0079fe;box-shadow:none;color:#fff;line-height:1.4}.stackline-dropdown.theme-classic .c-token .c-label{display:inline;color:#fff;font-size:14px;font-weight:400;line-height:1.4}.stackline-dropdown.theme-classic .c-remove{right:5px;width:14px;height:14px;color:#fff}.stackline-dropdown.theme-classic .c-remove c-icon{width:9px;height:9px}.stackline-dropdown.theme-classic .clear-all{right:42px;width:18px;height:18px;color:#333}.stackline-dropdown.theme-classic .clear-all c-icon{width:11px;height:11px}.stackline-dropdown.theme-classic .countplaceholder{right:76px;color:#333;font-size:14px;font-weight:400}.stackline-dropdown.theme-classic .c-angle-down,.stackline-dropdown.theme-classic .c-angle-up{right:10px;width:20px;height:20px;color:#333}.stackline-dropdown.theme-classic .dropdown-list{padding-top:14px;padding-bottom:0;z-index:9999}.stackline-dropdown.theme-classic .dropdown-list.opens-up{padding-top:0;padding-bottom:14px}.stackline-dropdown.theme-classic .dropdown-list.opens-down{padding-top:14px;padding-bottom:0}.stackline-dropdown.theme-classic .arrow-up{display:block;position:absolute;top:0;width:0;height:0;margin-left:15px;border-right:13px solid transparent;border-bottom:15px solid #ffffff;border-left:13px solid transparent}.stackline-dropdown.theme-classic .arrow-2{top:-1px;border-bottom-color:#ccc}.stackline-dropdown.theme-classic .arrow-down{display:block;position:absolute;top:auto;bottom:0;width:0;height:0;margin-left:15px;border-right:13px solid transparent;border-top:15px solid #ffffff;border-left:13px solid transparent}.stackline-dropdown.theme-classic .arrow-down.arrow-2{top:auto;bottom:-1px;border-top-color:#ccc}.stackline-dropdown.theme-classic .list-area{overflow:hidden;margin:0;border:1px solid #cccccc;border-radius:3px;background:#fff;box-shadow:0 1px 5px #959595}.stackline-dropdown.theme-classic .select-all,.stackline-dropdown.theme-classic .filter-select-all{padding:10px;border-bottom:1px solid #cccccc;background:#fff}.stackline-dropdown.theme-classic .list-filter{display:block;min-height:35px;padding:0;border-bottom:1px solid #cccccc;background:#fff}.stackline-dropdown.theme-classic .list-filter .c-input,.stackline-dropdown.theme-classic .list-filter input{height:35px;padding:0 35px;color:#333}.stackline-dropdown.theme-classic .list-filter .c-search{left:13px}.stackline-dropdown.theme-classic .list-filter .c-clear{right:13px}.stackline-dropdown.theme-classic .btn-container{padding:10px}.stackline-dropdown.theme-classic .btn-iceblue{min-height:35px;border-radius:3px;background:#0079fe}.stackline-dropdown.theme-classic .dropdown-list ul{margin:0;padding:0}.stackline-dropdown.theme-classic .dropdown-list ul li{min-height:0;margin:0;padding:10px;border-radius:0;color:#333;line-height:1.35}.stackline-dropdown.theme-classic .dropdown-list ul li:hover{background:#f5f5f5}.stackline-dropdown.theme-classic .selected-item,.stackline-dropdown.theme-classic .selected-item:hover{background:#e9f4ff!important;color:#333}.stackline-dropdown.theme-classic .grp-item{padding-left:30px!important}.stackline-dropdown.theme-classic .grp-title{color:#000}.stackline-dropdown.theme-classic .grp-title label,.stackline-dropdown.theme-classic .list-grp h4{font-size:14px;font-weight:700;letter-spacing:0;text-transform:capitalize}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]+label{padding-left:2em;color:#000;font-weight:300}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]+label:before{width:14px;height:14px;margin-top:-9px;border:2px solid #0079fe;border-radius:0;background:#fff}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]+label:after{top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-width:0 0 3px 3px;border-color:#fff;background:transparent}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]:hover+label:before{border-color:#0079fe;background-color:#f2f2f2;box-shadow:none}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]:checked+label:before{border-color:#0079fe;background:#0079fe}.stackline-dropdown.theme-classic .single-select-mode .pure-checkbox input[type=checkbox]+label{padding-left:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: ListFilterPipe }], propDecorators: { data: [{
                 type: Input
             }], settings: [{
@@ -2905,6 +3064,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
             }], onScroll: [{
                 type: HostListener,
                 args: ['window:scroll', ['$event']]
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
             }], virtualScroller: [{
                 type: ViewChild,
                 args: [VirtualScrollerComponent, { static: false }]

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../../../node_modules/ng-packagr/package.schema.json",
   "name": "@stackline/angular-multiselect-dropdown",
-  "version": "21.1.0",
+  "version": "21.1.2",
   "license": "MIT",
   "author": "Pradeep Terli (Original), Alexandro Paixao Marques (Maintainer)",
   "description": "Angular multiselect dropdown for maintained release lines from Angular 2 through Angular 21, with search, grouping, custom templates, checkbox selection, reactive and template-driven forms support, Material-inspired theming, and ADA-compliant keyboard/ARIA accessibility support.",

package/types/stackline-angular-multiselect-dropdown.d.ts

@@ -29,6 +29,7 @@ interface DropdownSettings {
     lazyLoading?: boolean;
     labelKey?: string;
     primaryKey?: string;
+    /** @deprecated Use `skin` instead. Kept as a compatibility alias. */
     theme?: string;
     skin?: string;
     position?: string;
@@ -40,6 +41,7 @@ interface DropdownSettings {
     autoPosition?: boolean;
     clearAll?: boolean;
     tagToBody?: boolean;
+    appendToBody?: boolean;
     ariaLabel?: string;
     ariaLabelledBy?: string;
     listboxAriaLabel?: string;
@@ -350,6 +352,7 @@ declare class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChan
     triggerButton: ElementRef;
     onEscapeDown(event: Event): void;
     onScroll(event: any): void;
+    onResize(event: any): void;
     virtualdata: any;
     searchTerm$: Subject<string>;
     selectedItems: Array<any>;
@@ -380,10 +383,16 @@ declare class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChan
     item: any;
     dropdownListYOffset: number;
     subscription: Subscription;
-    dropDownWidth: number;
+    dropDownWidth: number | null;
     dropDownTop: string | null;
     dropDownBottom: string | null;
-    dropDownLeft: number;
+    dropDownLeft: number | null;
+    private dropdownOriginalParent;
+    private dropdownOriginalNextSibling;
+    private dropdownAppendedToBody;
+    private overlayListenersBound;
+    private overlayPositionTimer;
+    private boundOverlayPositionUpdate;
     id: any;
     listboxId: string;
     activeDescendantId: string | null;
@@ -396,8 +405,19 @@ declare class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChan
     isDisabledItemPresent: boolean;
     constructor(_elementRef: ElementRef, cdr: ChangeDetectorRef, filterPipe: ListFilterPipe);
     ngOnInit(): void;
-    getThemeName(): string;
+    getSkinName(): string;
     getDropdownClasses(): string;
+    isBodyOverlayEnabled(): boolean;
+    private getDropdownPanelElement;
+    private getAnchorElement;
+    private getDropdownMaxHeight;
+    private appendDropdownPanelToBody;
+    private restoreDropdownPanel;
+    private bindOverlayListeners;
+    private unbindOverlayListeners;
+    private clearOverlayPositionTimer;
+    private scheduleDropdownPositionUpdate;
+    onDropdownPanelPointerDown(event: Event): void;
     getAriaLabel(): string;
     getListboxAriaLabel(): string;
     getSearchAriaLabel(): string;