@stackline/angular-multiselect-dropdown 13.0.0 → 13.0.1

package/README.md

@@ -12,7 +12,7 @@
 
 **[Documentation & Live Demos](https://alexandro.net/docs/angular/multiselect/)** | **[Angular 13 Demo](https://alexandro.net/docs/angular/multiselect/angular-13/)** | **[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 npm release:** `13.0.0` for Angular `13.x`
+**Latest tested npm release:** `13.0.1` for Angular `13.x`
 
 ---
 
@@ -24,7 +24,7 @@
 
 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 public npm release is `13.0.0` for Angular 13.x applications.
+The repository contains the full documentation matrix from Angular 2 through Angular 21. The current public npm release is `13.0.1` for Angular 13.x applications.
 
 The Angular 13 package is compatible with Angular 13.x and was tested in a real Angular 13.4.0 application before npm publication.
 
@@ -83,8 +83,8 @@ Each package family only installs on its matching Angular family. Framework majo
 | **16.x** | **Angular 16 only** | **`>=16.0.0 <17.0.0`** | **16.0.0 -> 16.2.12** | [Angular 16 family docs](https://alexandro.net/docs/angular/multiselect/angular-16/) |
 | **15.x** | **Angular 15 only** | **`>=15.0.0 <16.0.0`** | **15.0.0 -> 15.2.10** | [Angular 15 family docs](https://alexandro.net/docs/angular/multiselect/angular-15/) |
 | **14.x** | **Angular 14 only** | **`>=14.0.0 <15.0.0`** | **14.0.0 -> 14.3.0** | [Angular 14 family docs](https://alexandro.net/docs/angular/multiselect/angular-14/) |
-| **13.x** | **Angular 13 only** | **`>=13.0.0 <14.0.0`** | **13.0.0 -> 13.4.0** | [Angular 13 family docs](https://alexandro.net/docs/angular/multiselect/angular-13/) |
-| **12.x** | **Angular 12 only** | **`>=12.0.0 <13.0.0`** | **12.0.0 -> 12.2.17** | [Angular 12 family docs](https://alexandro.net/docs/angular/multiselect/angular-12/) |
+| **13.x** | **Angular 13 only** | **`>=13.0.1 <14.0.0`** | **13.0.1 -> 13.4.0** | [Angular 13 family docs](https://alexandro.net/docs/angular/multiselect/angular-13/) |
+| **12.x** | **Angular 12 only** | **`>=12.0.0 <13.0.1`** | **12.0.0 -> 12.2.17** | [Angular 12 family docs](https://alexandro.net/docs/angular/multiselect/angular-12/) |
 | **11.x** | **Angular 11 only** | **`>=11.0.0 <12.0.0`** | **11.0.0 -> 11.2.14** | [Angular 11 family docs](https://alexandro.net/docs/angular/multiselect/angular-11/) |
 | **10.x** | **Angular 10 only** | **`>=10.0.0 <11.0.0`** | **10.0.0 -> 10.2.5** | [Angular 10 family docs](https://alexandro.net/docs/angular/multiselect/angular-10/) |
 | **9.x** | **Angular 9 only** | **`>=9.0.0 <10.0.0`** | **9.0.0 -> 9.1.13** | [Angular 9 family docs](https://alexandro.net/docs/angular/multiselect/angular-9/) |
@@ -98,10 +98,10 @@ Each package family only installs on its matching Angular family. Framework majo
 ## Installation
 
 ```bash
-npm install @stackline/angular-multiselect-dropdown@13.0.0 --save-exact
+npm install @stackline/angular-multiselect-dropdown@13.0.1 --save-exact
 ```
 
-Install `13.0.0` for Angular 13.x applications. This line keeps the tested Angular 13 behavior, makes `<angular-multiselect>` the documented standard selector, and keeps `<angular2-multiselect>` only as a legacy compatibility alias.
+Install `13.0.1` for Angular 13.x applications. This line keeps the tested Angular 13 behavior, makes `<angular-multiselect>` the documented standard selector, and keeps `<angular2-multiselect>` only as a legacy compatibility alias.
 
 ## Setup
 
@@ -197,7 +197,7 @@ dropdownSettings = {
 
 ## Official Angular 13 Test Matrix
 
-The published Angular 13 release was tested in a real Angular `13.4.0` application with `@stackline/angular-multiselect-dropdown@13.0.0`. The docs now use the same examples from that test app.
+The published Angular 13 release was tested in a real Angular `13.4.0` application with `@stackline/angular-multiselect-dropdown@13.0.1`. The docs now use the same examples from that test app.
 
 Switch between skins through the settings object:
 

package/esm2020/lib/multiselect.component.mjs

@@ -52,7 +52,8 @@ export class AngularMultiSelect {
             lazyLoading: false,
             labelKey: 'itemName',
             theme: 'classic',
-            skin: 'classic'
+            skin: 'classic',
+        clearAll: true
         };
         this.onTouchedCallback = noop;
         this.onChangeCallback = noop;
@@ -223,6 +224,13 @@ export class AngularMultiSelect {
         this.onChangeCallback(this.selectedItems);
         this.onTouchedCallback(this.selectedItems);
     }
+    clearSelection(e) {
+        this.selectedItems = [];
+        this.isSelectAll = false;
+        this.onChangeCallback(this.selectedItems);
+        this.onTouchedCallback(this.selectedItems);
+        this.onDeSelectAll.emit(this.selectedItems);
+    }
     toggleDropdown(evt) {
         if (this.settings.disabled) {
             return false;
@@ -339,14 +347,14 @@ export class AngularMultiSelect {
     }
 }
 AngularMultiSelect.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularMultiSelect, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AngularMultiSelect.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AngularMultiSelect, selector: "angular-multiselect, angular2-multiselect", inputs: { data: "data", settings: "settings" }, outputs: { onSelect: "onSelect", onDeSelect: "onDeSelect", onSelectAll: "onSelectAll", onDeSelectAll: "onDeSelectAll", onOpen: "onOpen", onClose: "onClose" }, host: { 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 }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"stackline-dropdown\" [ngClass]=\"getDropdownClasses()\" (clickOutside)=\"closeDropdown()\">\n    <div class=\"selected-list\">\n        <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\n            <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n            <span *ngIf=\"settings.singleSelection\">\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\n                    {{item[settings.labelKey]}}\n                </span>\n            </span>\n            <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\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                    <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\n                </div>\n            </div> \n            <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n            <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n        </div>      \n    </div>\n    <div class=\"dropdown-list\" [hidden]=\"!isActive\">\n    <div class=\"arrow-up arrow-2\"></div>\n    <div class=\"arrow-up\"></div>\n    <div class=\"list-area\">\n        <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\n            <label>\n                <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n                <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n            </label>\n        </div>   \n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && !settings.lazyLoading\">\n            <span class=\"fa fa-search\"></span>\n            <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\n        </div> \n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\n            <span class=\"fa fa-search\"></span>\n            <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\n        </div>\n    <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"lazyContainer\" >\n        <span *ngIf=\"itemTempl\">\n            <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl && !settings.lazyLoading\" >\n        <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label>{{item[settings.labelKey]}}</label>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl && settings.lazyLoading\" >\n            <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\n\n            \n        <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label>{{item[settings.labelKey]}}</label>\n        </li>\n        </div>\n        </span>\n    </ul>\n    <div *ngIf=\"settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n    <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\n        <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\n        <span *ngIf=\"itemTempl\" >\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl\" >\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\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", isInline: true, styles: [".stackline-dropdown{position:relative}.c-btn{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:14px;color:#333}.c-btn.disabled{background:#ccc}.c-btn:focus{outline:none}.selected-list .c-list{display:flex;flex:1 1 auto;align-items:center;flex-wrap:wrap;min-width:0;float:none;padding:0;margin:0;width:auto}.selected-list .c-list .c-token{list-style:none;padding:0 5px;background:#0079FE;color:#fff;border-radius:2px;margin-right:4px;margin-top:2px;float:left}.selected-list .c-list .c-token .c-label{display:block;float:left}.selected-list .c-list .c-token .fa-remove{margin-left:1px;font-size:12px}.selected-list .fa-angle-down,.selected-list .fa-angle-up{font-size:15pt;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.selected-list .countplaceholder{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;align-self:center;margin:0 0 0 6px;line-height:1}.selected-list .c-btn{box-sizing:border-box;width:100%;box-shadow:0 1px 5px #959595;padding:10px 36px 10px 10px;cursor:pointer;display:flex;align-items:center;flex-wrap:nowrap;position:relative}.dropdown-list{position:absolute;padding-top:14px;width:100%;z-index:9999}.dropdown-list ul{padding:0;list-style:none;overflow:auto;margin:0}.dropdown-list ul li{padding:10px;cursor:pointer;text-align:left}.dropdown-list ul li:first-child{padding-top:10px}.dropdown-list ul li:last-child{padding-bottom:10px}.dropdown-list ul li:hover{background:#f5f5f5}.dropdown-list ::-webkit-scrollbar{width:8px}.dropdown-list ::-webkit-scrollbar-thumb{background:#cccccc;border-radius:5px}.dropdown-list ::-webkit-scrollbar-track{background:#f2f2f2}.arrow-up{width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:15px solid #fff;margin-left:15px;position:absolute;top:0}.arrow-2{border-bottom:15px solid #ccc;top:-1px}.list-area{border:1px solid #ccc;border-radius:3px;background:#fff;margin:0;box-shadow:0 1px 5px #959595}.select-all{padding:10px;border-bottom:1px solid #ccc;text-align:left}.list-filter{border-bottom:1px solid #ccc;position:relative}.list-filter input{border:0px;width:100%;height:35px;padding:0 0 0 35px}.list-filter input:focus{outline:none}.list-filter .fa{position:absolute;top:10px;left:13px;color:#888}.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]:focus+label:before,.pure-checkbox input[type=checkbox]:hover+label:before{border-color:#0079fe;background-color:#f2f2f2}.pure-checkbox input[type=checkbox]:active+label:before{transition-duration:0s}.pure-checkbox input[type=checkbox]+label{position:relative;padding-left:2em;vertical-align:middle;-webkit-user-select:none;user-select:none;cursor:pointer;margin:0;color:#000;font-weight:300}.pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";color:#0079fe;position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;border:2px solid #0079FE;text-align:center;transition:all .4s ease}.pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";background-color:#0079fe;position:absolute;top:50%;left:4px;width:10px;height:10px;margin-top:-5px;transform:scale(0);transform-origin:50%;transition:transform .2s ease-out}.pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#ccc}.pure-checkbox input[type=checkbox]:disabled:focus+label:before .pure-checkbox input[type=checkbox]:disabled:hover+label:before{background-color:inherit}.pure-checkbox input[type=checkbox]:disabled:checked+label:before{background-color:#ccc}.pure-checkbox input[type=checkbox]+label:after{background-color:transparent;top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#fff;border-width:0 0 3px 3px;border-image:none;transform:rotate(-45deg) scale(0)}.pure-checkbox input[type=checkbox]:checked+label:after{content:\"\";transform:rotate(-45deg) scale(1);transition:transform .2s ease-out}.pure-checkbox input[type=radio]:checked+label:before{background-color:#fff}.pure-checkbox input[type=radio]:checked+label:after{transform:scale(1)}.pure-checkbox input[type=radio]+label:before{border-radius:50%}.pure-checkbox input[type=checkbox]:checked+label:before{background:#0079FE}.pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.list-message{text-align:center}.list-grp{padding:0 15px!important}.list-grp h4{text-transform:capitalize;margin:15px 0 0;font-size:14px;font-weight:700}.list-grp>li{padding-left:15px!important}.stackline-dropdown.theme-material,.stackline-dropdown.theme-dark,.stackline-dropdown.theme-custom{--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-divider: rgba(125, 119, 134, .16);--ms-section-bg: rgba(247, 242, 250, .76);--ms-selected-text: var(--ms-primary);--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);display:block;width:100%;color:var(--ms-on-surface);font:inherit}.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-divider: rgba(170, 182, 197, .18);--ms-section-bg: #101620;--ms-selected-text: #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-divider: var(--stackline-ms-divider, rgba(15, 118, 110, .16));--ms-section-bg: var(--stackline-ms-section-bg, #f0fdfa);--ms-selected-text: var(--stackline-ms-selected-text, var(--ms-primary));--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-material .selected-list,.stackline-dropdown.theme-dark .selected-list,.stackline-dropdown.theme-custom .selected-list{width:100%}.stackline-dropdown.theme-material .selected-list .c-btn,.stackline-dropdown.theme-dark .selected-list .c-btn,.stackline-dropdown.theme-custom .selected-list .c-btn{position:relative;display:flex;align-items:center;flex-wrap:nowrap;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);color:var(--ms-on-surface);cursor:pointer;font-size:inherit;line-height:1.45;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease,transform .16s ease}.stackline-dropdown.theme-material .selected-list .c-btn:hover,.stackline-dropdown.theme-dark .selected-list .c-btn:hover,.stackline-dropdown.theme-custom .selected-list .c-btn:hover{border-color:var(--ms-outline-strong)}.stackline-dropdown.theme-material .selected-list .c-btn.disabled,.stackline-dropdown.theme-dark .selected-list .c-btn.disabled,.stackline-dropdown.theme-custom .selected-list .c-btn.disabled{background:var(--ms-surface);cursor:not-allowed;opacity:.72}.stackline-dropdown.theme-material .selected-list .c-list,.stackline-dropdown.theme-dark .selected-list .c-list,.stackline-dropdown.theme-custom .selected-list .c-list{display:flex;flex:1 1 auto;flex-wrap:wrap;gap:8px;width:auto;min-width:0;margin:0;padding:0;float:none}.stackline-dropdown.theme-material .selected-list .c-list .c-token,.stackline-dropdown.theme-dark .selected-list .c-list .c-token,.stackline-dropdown.theme-custom .selected-list .c-list .c-token{position:relative;display:inline-block;vertical-align:middle;min-height:32px;max-width:100%;padding:6px 30px 6px 12px;background:var(--ms-chip-bg);color:var(--ms-chip-text);border-radius:999px;box-shadow:inset 0 0 0 1px #6750a414;line-height:1.35;white-space:normal;overflow-wrap:anywhere;margin:0;float:none}.stackline-dropdown.theme-material .selected-list .c-list .c-token .c-label,.stackline-dropdown.theme-dark .selected-list .c-list .c-token .c-label,.stackline-dropdown.theme-custom .selected-list .c-list .c-token .c-label{display:inline-flex;align-items:center;float:none;min-width:0;max-width:100%;line-height:1.3;font-weight:500;white-space:normal;overflow-wrap:anywhere}.stackline-dropdown.theme-material .selected-list .c-list .c-token .fa-remove,.stackline-dropdown.theme-dark .selected-list .c-list .c-token .fa-remove,.stackline-dropdown.theme-custom .selected-list .c-list .c-token .fa-remove{position:absolute;right:10px;top:50%;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:0;transform:translateY(-50%);color:var(--ms-chip-remove);cursor:pointer}.stackline-dropdown.theme-material .selected-list .countplaceholder,.stackline-dropdown.theme-dark .selected-list .countplaceholder,.stackline-dropdown.theme-custom .selected-list .countplaceholder{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;align-self:center;margin:0;line-height:1;color:var(--ms-on-surface-muted);font-size:.8rem;font-weight:600}.stackline-dropdown.theme-material .selected-list .fa-angle-down,.stackline-dropdown.theme-dark .selected-list .fa-angle-down,.stackline-dropdown.theme-custom .selected-list .fa-angle-down,.stackline-dropdown.theme-material .selected-list .fa-angle-up,.stackline-dropdown.theme-dark .selected-list .fa-angle-up,.stackline-dropdown.theme-custom .selected-list .fa-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);font-size:15pt;pointer-events:none}.stackline-dropdown.theme-material .dropdown-list,.stackline-dropdown.theme-dark .dropdown-list,.stackline-dropdown.theme-custom .dropdown-list{position:absolute;width:100%;padding-top:8px;z-index:99999}.stackline-dropdown.theme-material .arrow-up,.stackline-dropdown.theme-dark .arrow-up,.stackline-dropdown.theme-custom .arrow-up,.stackline-dropdown.theme-material .arrow-down,.stackline-dropdown.theme-dark .arrow-down,.stackline-dropdown.theme-custom .arrow-down,.stackline-dropdown.theme-material .arrow-2,.stackline-dropdown.theme-dark .arrow-2,.stackline-dropdown.theme-custom .arrow-2{display:none}.stackline-dropdown.theme-material .list-area,.stackline-dropdown.theme-dark .list-area,.stackline-dropdown.theme-custom .list-area{overflow:hidden;border-radius:22px;background:var(--ms-surface);border:1px solid var(--ms-outline);box-shadow:var(--ms-shadow);margin:0}.stackline-dropdown.theme-material .select-all,.stackline-dropdown.theme-dark .select-all,.stackline-dropdown.theme-custom .select-all{padding:10px 14px;border-bottom:1px solid var(--ms-divider);background:var(--ms-section-bg);text-align:left}.stackline-dropdown.theme-material .list-filter,.stackline-dropdown.theme-dark .list-filter,.stackline-dropdown.theme-custom .list-filter{position:relative;display:flex;align-items:center;min-height:52px;padding-left:48px;padding-right:44px;border-bottom:1px solid var(--ms-divider);background:var(--ms-surface)}.stackline-dropdown.theme-material .list-filter input,.stackline-dropdown.theme-dark .list-filter input,.stackline-dropdown.theme-custom .list-filter input{width:100%;height:100%;border:0;background:transparent;color:var(--ms-on-surface);font:inherit;padding:0}.stackline-dropdown.theme-material .list-filter input::placeholder,.stackline-dropdown.theme-dark .list-filter input::placeholder,.stackline-dropdown.theme-custom .list-filter input::placeholder{color:var(--ms-on-surface-muted)}.stackline-dropdown.theme-material .list-filter input:focus,.stackline-dropdown.theme-dark .list-filter input:focus,.stackline-dropdown.theme-custom .list-filter input:focus{outline:none}.stackline-dropdown.theme-material .list-filter .fa,.stackline-dropdown.theme-dark .list-filter .fa,.stackline-dropdown.theme-custom .list-filter .fa{position:absolute;top:50%;left:16px;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;transform:translateY(-50%);color:var(--ms-on-surface-muted)}.stackline-dropdown.theme-material .dropdown-list ul,.stackline-dropdown.theme-dark .dropdown-list ul,.stackline-dropdown.theme-custom .dropdown-list ul{list-style:none;margin:0;padding:8px;overflow:auto}.stackline-dropdown.theme-material .dropdown-list ul li,.stackline-dropdown.theme-dark .dropdown-list ul li,.stackline-dropdown.theme-custom .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}.stackline-dropdown.theme-material .dropdown-list ul li:first-child,.stackline-dropdown.theme-dark .dropdown-list ul li:first-child,.stackline-dropdown.theme-custom .dropdown-list ul li:first-child{padding-top:12px}.stackline-dropdown.theme-material .dropdown-list ul li:last-child,.stackline-dropdown.theme-dark .dropdown-list ul li:last-child,.stackline-dropdown.theme-custom .dropdown-list ul li:last-child{padding-bottom:12px}.stackline-dropdown.theme-material .dropdown-list ul li:hover,.stackline-dropdown.theme-dark .dropdown-list ul li:hover,.stackline-dropdown.theme-custom .dropdown-list ul li:hover{background:var(--ms-surface-soft)}.stackline-dropdown.theme-material .pure-checkbox,.stackline-dropdown.theme-dark .pure-checkbox,.stackline-dropdown.theme-custom .pure-checkbox{position:relative}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label,.stackline-dropdown.theme-custom .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}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:0;width:16px;height:16px;margin-top:-10px;border:2px solid var(--ms-outline-strong);border-radius:5px;background:var(--ms-surface);transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label:after,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label:after,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:5px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#fff;border-width:0 0 3px 3px;border-image:none;background:transparent;transform:rotate(-45deg) scale(0);transform-origin:50%;transition:transform .16s ease}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:hover+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:hover+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:hover+label:before{border-color:var(--ms-primary);background:var(--ms-surface-soft)}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked+label:before{border-color:var(--ms-primary);background:var(--ms-primary)}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked+label:after,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked+label:after,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.stackline-dropdown.theme-material .list-message,.stackline-dropdown.theme-dark .list-message,.stackline-dropdown.theme-custom .list-message{margin:0;padding:20px 14px;color:var(--ms-on-surface-muted);text-align:center}\n"], components: [{ type: i0.forwardRef(function () { return TemplateRenderer; }), selector: "c-templateRenderer", inputs: ["data", "item"] }], directives: [{ type: i0.forwardRef(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return ClickOutsideDirective; }), selector: "[clickOutside]", outputs: ["clickOutside"] }, { type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0.forwardRef(function () { return i2.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i0.forwardRef(function () { return i2.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { type: i0.forwardRef(function () { return i2.NgModel; }), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i0.forwardRef(function () { return i1.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i0.forwardRef(function () { return styleDirective; }), selector: "[styleProp]", inputs: ["styleProp"] }], pipes: { "listFilter": i0.forwardRef(function () { return ListFilterPipe; }) } });
+AngularMultiSelect.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AngularMultiSelect, selector: "angular-multiselect, angular2-multiselect", inputs: { data: "data", settings: "settings" }, outputs: { onSelect: "onSelect", onDeSelect: "onDeSelect", onSelectAll: "onSelectAll", onDeSelectAll: "onDeSelectAll", onOpen: "onOpen", onClose: "onClose" }, host: { 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 }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"stackline-dropdown\" [ngClass]=\"getDropdownClasses()\" (clickOutside)=\"closeDropdown()\">\n    <div class=\"selected-list\">\n        <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\n            <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n            <span *ngIf=\"settings.singleSelection\">\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\n                    {{item[settings.labelKey]}}\n                </span>\n            </span>\n            <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\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                    <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\n                </div>\n            </div> \n            <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n            <span class=\"fa fa-remove clear-all\" *ngIf=\"settings.clearAll && selectedItems?.length > 0 && !settings.disabled\" (click)=\"clearSelection($event);$event.stopPropagation()\"></span>\n            <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n        </div>      \n    </div>\n    <div class=\"dropdown-list\" [hidden]=\"!isActive\">\n    <div class=\"arrow-up arrow-2\"></div>\n    <div class=\"arrow-up\"></div>\n    <div class=\"list-area\">\n        <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\n            <label>\n                <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n                <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n            </label>\n        </div>   \n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && !settings.lazyLoading\">\n            <span class=\"fa fa-search\"></span>\n            <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\n        </div> \n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\n            <span class=\"fa fa-search\"></span>\n            <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\n        </div>\n    <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"lazyContainer\" >\n        <span *ngIf=\"itemTempl\">\n            <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl && !settings.lazyLoading\" >\n        <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label>{{item[settings.labelKey]}}</label>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl && settings.lazyLoading\" >\n            <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\n\n            \n        <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label>{{item[settings.labelKey]}}</label>\n        </li>\n        </div>\n        </span>\n    </ul>\n    <div *ngIf=\"settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n    <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\n        <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\n        <span *ngIf=\"itemTempl\" >\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl\" >\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\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", isInline: true, styles: [".stackline-dropdown{position:relative}.c-btn{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:14px;color:#333}.c-btn.disabled{background:#ccc}.c-btn:focus{outline:none}.selected-list .c-list{display:flex;flex:1 1 auto;align-items:center;flex-wrap:wrap;min-width:0;float:none;padding:0;margin:0;width:auto}.selected-list .c-list .c-token{list-style:none;padding:0 5px;background:#0079FE;color:#fff;border-radius:2px;margin-right:4px;margin-top:2px;float:left}.selected-list .c-list .c-token .c-label{display:block;float:left}.selected-list .c-list .c-token .fa-remove{margin-left:1px;font-size:12px}.selected-list .fa-angle-down,.selected-list .fa-angle-up{font-size:15pt;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.selected-list .countplaceholder{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;align-self:center;margin:0 0 0 6px;line-height:1}.selected-list .c-btn{box-sizing:border-box;width:100%;box-shadow:0 1px 5px #959595;padding: 10px 68px 10px 10px;cursor:pointer;display:flex;align-items:center;flex-wrap:nowrap;position:relative}.dropdown-list{position:absolute;padding-top:14px;width:100%;z-index:9999}.dropdown-list ul{padding:0;list-style:none;overflow:auto;margin:0}.dropdown-list ul li{padding:10px;cursor:pointer;text-align:left}.dropdown-list ul li:first-child{padding-top:10px}.dropdown-list ul li:last-child{padding-bottom:10px}.dropdown-list ul li:hover{background:#f5f5f5}.dropdown-list ::-webkit-scrollbar{width:8px}.dropdown-list ::-webkit-scrollbar-thumb{background:#cccccc;border-radius:5px}.dropdown-list ::-webkit-scrollbar-track{background:#f2f2f2}.arrow-up{width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:15px solid #fff;margin-left:15px;position:absolute;top:0}.arrow-2{border-bottom:15px solid #ccc;top:-1px}.list-area{border:1px solid #ccc;border-radius:3px;background:#fff;margin:0;box-shadow:0 1px 5px #959595}.select-all{padding:10px;border-bottom:1px solid #ccc;text-align:left}.list-filter{border-bottom:1px solid #ccc;position:relative}.list-filter input{border:0px;width:100%;height:35px;padding:0 0 0 35px}.list-filter input:focus{outline:none}.list-filter .fa{position:absolute;top:10px;left:13px;color:#888}.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]:focus+label:before,.pure-checkbox input[type=checkbox]:hover+label:before{border-color:#0079fe;background-color:#f2f2f2}.pure-checkbox input[type=checkbox]:active+label:before{transition-duration:0s}.pure-checkbox input[type=checkbox]+label{position:relative;padding-left:2em;vertical-align:middle;-webkit-user-select:none;user-select:none;cursor:pointer;margin:0;color:#000;font-weight:300}.pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";color:#0079fe;position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;border:2px solid #0079FE;text-align:center;transition:all .4s ease}.pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";background-color:#0079fe;position:absolute;top:50%;left:4px;width:10px;height:10px;margin-top:-5px;transform:scale(0);transform-origin:50%;transition:transform .2s ease-out}.pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#ccc}.pure-checkbox input[type=checkbox]:disabled:focus+label:before .pure-checkbox input[type=checkbox]:disabled:hover+label:before{background-color:inherit}.pure-checkbox input[type=checkbox]:disabled:checked+label:before{background-color:#ccc}.pure-checkbox input[type=checkbox]+label:after{background-color:transparent;top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#fff;border-width:0 0 3px 3px;border-image:none;transform:rotate(-45deg) scale(0)}.pure-checkbox input[type=checkbox]:checked+label:after{content:\"\";transform:rotate(-45deg) scale(1);transition:transform .2s ease-out}.pure-checkbox input[type=radio]:checked+label:before{background-color:#fff}.pure-checkbox input[type=radio]:checked+label:after{transform:scale(1)}.pure-checkbox input[type=radio]+label:before{border-radius:50%}.pure-checkbox input[type=checkbox]:checked+label:before{background:#0079FE}.pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.list-message{text-align:center}.list-grp{padding:0 15px!important}.list-grp h4{text-transform:capitalize;margin:15px 0 0;font-size:14px;font-weight:700}.list-grp>li{padding-left:15px!important}.stackline-dropdown.theme-material,.stackline-dropdown.theme-dark,.stackline-dropdown.theme-custom{--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-divider: rgba(125, 119, 134, .16);--ms-section-bg: rgba(247, 242, 250, .76);--ms-selected-text: var(--ms-primary);--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);display:block;width:100%;color:var(--ms-on-surface);font:inherit}.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-divider: rgba(170, 182, 197, .18);--ms-section-bg: #101620;--ms-selected-text: #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-divider: var(--stackline-ms-divider, rgba(15, 118, 110, .16));--ms-section-bg: var(--stackline-ms-section-bg, #f0fdfa);--ms-selected-text: var(--stackline-ms-selected-text, var(--ms-primary));--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-material .selected-list,.stackline-dropdown.theme-dark .selected-list,.stackline-dropdown.theme-custom .selected-list{width:100%}.stackline-dropdown.theme-material .selected-list .c-btn,.stackline-dropdown.theme-dark .selected-list .c-btn,.stackline-dropdown.theme-custom .selected-list .c-btn{position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:8px;width:100%;min-height:56px;padding: 11px 84px 11px 16px;border-radius:18px;border:1px solid var(--ms-outline);background:var(--ms-surface);box-shadow:var(--ms-shadow-soft);color:var(--ms-on-surface);cursor:pointer;font-size:inherit;line-height:1.45;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease,transform .16s ease}.stackline-dropdown.theme-material .selected-list .c-btn:hover,.stackline-dropdown.theme-dark .selected-list .c-btn:hover,.stackline-dropdown.theme-custom .selected-list .c-btn:hover{border-color:var(--ms-outline-strong)}.stackline-dropdown.theme-material .selected-list .c-btn.disabled,.stackline-dropdown.theme-dark .selected-list .c-btn.disabled,.stackline-dropdown.theme-custom .selected-list .c-btn.disabled{background:var(--ms-surface);cursor:not-allowed;opacity:.72}.stackline-dropdown.theme-material .selected-list .c-list,.stackline-dropdown.theme-dark .selected-list .c-list,.stackline-dropdown.theme-custom .selected-list .c-list{display:flex;flex:1 1 auto;flex-wrap:wrap;gap:8px;width:auto;min-width:0;margin:0;padding:0;float:none}.stackline-dropdown.theme-material .selected-list .c-list .c-token,.stackline-dropdown.theme-dark .selected-list .c-list .c-token,.stackline-dropdown.theme-custom .selected-list .c-list .c-token{position:relative;display:inline-block;vertical-align:middle;min-height:32px;max-width:100%;padding:6px 30px 6px 12px;background:var(--ms-chip-bg);color:var(--ms-chip-text);border-radius:999px;box-shadow:inset 0 0 0 1px #6750a414;line-height:1.35;white-space:normal;overflow-wrap:anywhere;margin:0;float:none}.stackline-dropdown.theme-material .selected-list .c-list .c-token .c-label,.stackline-dropdown.theme-dark .selected-list .c-list .c-token .c-label,.stackline-dropdown.theme-custom .selected-list .c-list .c-token .c-label{display:inline-flex;align-items:center;float:none;min-width:0;max-width:100%;line-height:1.3;font-weight:500;white-space:normal;overflow-wrap:anywhere}.stackline-dropdown.theme-material .selected-list .c-list .c-token .fa-remove,.stackline-dropdown.theme-dark .selected-list .c-list .c-token .fa-remove,.stackline-dropdown.theme-custom .selected-list .c-list .c-token .fa-remove{position:absolute;right:10px;top:50%;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:0;transform:translateY(-50%);color:var(--ms-chip-remove);cursor:pointer}.stackline-dropdown.theme-material .selected-list .countplaceholder,.stackline-dropdown.theme-dark .selected-list .countplaceholder,.stackline-dropdown.theme-custom .selected-list .countplaceholder{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;align-self:center;margin:0;line-height:1;color:var(--ms-on-surface-muted);font-size:.8rem;font-weight:600}.stackline-dropdown.theme-material .selected-list .fa-angle-down,.stackline-dropdown.theme-dark .selected-list .fa-angle-down,.stackline-dropdown.theme-custom .selected-list .fa-angle-down,.stackline-dropdown.theme-material .selected-list .fa-angle-up,.stackline-dropdown.theme-dark .selected-list .fa-angle-up,.stackline-dropdown.theme-custom .selected-list .fa-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);font-size:15pt;pointer-events:none}.stackline-dropdown.theme-material .dropdown-list,.stackline-dropdown.theme-dark .dropdown-list,.stackline-dropdown.theme-custom .dropdown-list{position:absolute;width:100%;padding-top:8px;z-index:99999}.stackline-dropdown.theme-material .arrow-up,.stackline-dropdown.theme-dark .arrow-up,.stackline-dropdown.theme-custom .arrow-up,.stackline-dropdown.theme-material .arrow-down,.stackline-dropdown.theme-dark .arrow-down,.stackline-dropdown.theme-custom .arrow-down,.stackline-dropdown.theme-material .arrow-2,.stackline-dropdown.theme-dark .arrow-2,.stackline-dropdown.theme-custom .arrow-2{display:none}.stackline-dropdown.theme-material .list-area,.stackline-dropdown.theme-dark .list-area,.stackline-dropdown.theme-custom .list-area{overflow:hidden;border-radius:22px;background:var(--ms-surface);border:1px solid var(--ms-outline);box-shadow:var(--ms-shadow);margin:0}.stackline-dropdown.theme-material .select-all,.stackline-dropdown.theme-dark .select-all,.stackline-dropdown.theme-custom .select-all{padding:10px 14px;border-bottom:1px solid var(--ms-divider);background:var(--ms-section-bg);text-align:left}.stackline-dropdown.theme-material .list-filter,.stackline-dropdown.theme-dark .list-filter,.stackline-dropdown.theme-custom .list-filter{position:relative;display:flex;align-items:center;min-height:52px;padding-left:48px;padding-right:44px;border-bottom:1px solid var(--ms-divider);background:var(--ms-surface)}.stackline-dropdown.theme-material .list-filter input,.stackline-dropdown.theme-dark .list-filter input,.stackline-dropdown.theme-custom .list-filter input{width:100%;height:100%;border:0;background:transparent;color:var(--ms-on-surface);font:inherit;padding:0}.stackline-dropdown.theme-material .list-filter input::placeholder,.stackline-dropdown.theme-dark .list-filter input::placeholder,.stackline-dropdown.theme-custom .list-filter input::placeholder{color:var(--ms-on-surface-muted)}.stackline-dropdown.theme-material .list-filter input:focus,.stackline-dropdown.theme-dark .list-filter input:focus,.stackline-dropdown.theme-custom .list-filter input:focus{outline:none}.stackline-dropdown.theme-material .list-filter .fa,.stackline-dropdown.theme-dark .list-filter .fa,.stackline-dropdown.theme-custom .list-filter .fa{position:absolute;top:50%;left:16px;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;transform:translateY(-50%);color:var(--ms-on-surface-muted)}.stackline-dropdown.theme-material .dropdown-list ul,.stackline-dropdown.theme-dark .dropdown-list ul,.stackline-dropdown.theme-custom .dropdown-list ul{list-style:none;margin:0;padding:8px;overflow:auto}.stackline-dropdown.theme-material .dropdown-list ul li,.stackline-dropdown.theme-dark .dropdown-list ul li,.stackline-dropdown.theme-custom .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}.stackline-dropdown.theme-material .dropdown-list ul li:first-child,.stackline-dropdown.theme-dark .dropdown-list ul li:first-child,.stackline-dropdown.theme-custom .dropdown-list ul li:first-child{padding-top:12px}.stackline-dropdown.theme-material .dropdown-list ul li:last-child,.stackline-dropdown.theme-dark .dropdown-list ul li:last-child,.stackline-dropdown.theme-custom .dropdown-list ul li:last-child{padding-bottom:12px}.stackline-dropdown.theme-material .dropdown-list ul li:hover,.stackline-dropdown.theme-dark .dropdown-list ul li:hover,.stackline-dropdown.theme-custom .dropdown-list ul li:hover{background:var(--ms-surface-soft)}.stackline-dropdown.theme-material .pure-checkbox,.stackline-dropdown.theme-dark .pure-checkbox,.stackline-dropdown.theme-custom .pure-checkbox{position:relative}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label,.stackline-dropdown.theme-custom .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}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:0;width:16px;height:16px;margin-top:-10px;border:2px solid var(--ms-outline-strong);border-radius:5px;background:var(--ms-surface);transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label:after,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label:after,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:5px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#fff;border-width:0 0 3px 3px;border-image:none;background:transparent;transform:rotate(-45deg) scale(0);transform-origin:50%;transition:transform .16s ease}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:hover+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:hover+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:hover+label:before{border-color:var(--ms-primary);background:var(--ms-surface-soft)}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked+label:before{border-color:var(--ms-primary);background:var(--ms-primary)}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked+label:after,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked+label:after,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.stackline-dropdown.theme-material .list-message,.stackline-dropdown.theme-dark .list-message,.stackline-dropdown.theme-custom .list-message{margin:0;padding:20px 14px;color:var(--ms-on-surface-muted);text-align:center}\n"], components: [{ type: i0.forwardRef(function () { return TemplateRenderer; }), selector: "c-templateRenderer", inputs: ["data", "item"] }], directives: [{ type: i0.forwardRef(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return ClickOutsideDirective; }), selector: "[clickOutside]", outputs: ["clickOutside"] }, { type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0.forwardRef(function () { return i2.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i0.forwardRef(function () { return i2.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { type: i0.forwardRef(function () { return i2.NgModel; }), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i0.forwardRef(function () { return i1.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i0.forwardRef(function () { return styleDirective; }), selector: "[styleProp]", inputs: ["styleProp"] }], pipes: { "listFilter": i0.forwardRef(function () { return ListFilterPipe; }) } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularMultiSelect, decorators: [{
             type: Component,
             args: [{
                     selector: 'angular-multiselect, angular2-multiselect',
-                    template: "<div class=\"stackline-dropdown\" [ngClass]=\"getDropdownClasses()\" (clickOutside)=\"closeDropdown()\">\n    <div class=\"selected-list\">\n        <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\n            <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n            <span *ngIf=\"settings.singleSelection\">\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\n                    {{item[settings.labelKey]}}\n                </span>\n            </span>\n            <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\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                    <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\n                </div>\n            </div> \n            <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n            <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n        </div>      \n    </div>\n    <div class=\"dropdown-list\" [hidden]=\"!isActive\">\n    <div class=\"arrow-up arrow-2\"></div>\n    <div class=\"arrow-up\"></div>\n    <div class=\"list-area\">\n        <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\n            <label>\n                <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n                <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n            </label>\n        </div>   \n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && !settings.lazyLoading\">\n            <span class=\"fa fa-search\"></span>\n            <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\n        </div> \n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\n            <span class=\"fa fa-search\"></span>\n            <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\n        </div>\n    <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"lazyContainer\" >\n        <span *ngIf=\"itemTempl\">\n            <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl && !settings.lazyLoading\" >\n        <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label>{{item[settings.labelKey]}}</label>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl && settings.lazyLoading\" >\n            <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\n\n            \n        <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label>{{item[settings.labelKey]}}</label>\n        </li>\n        </div>\n        </span>\n    </ul>\n    <div *ngIf=\"settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n    <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\n        <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\n        <span *ngIf=\"itemTempl\" >\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl\" >\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\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",
+                    template: "<div class=\"stackline-dropdown\" [ngClass]=\"getDropdownClasses()\" (clickOutside)=\"closeDropdown()\">\n    <div class=\"selected-list\">\n        <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\n            <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n            <span *ngIf=\"settings.singleSelection\">\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\n                    {{item[settings.labelKey]}}\n                </span>\n            </span>\n            <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\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                    <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\n                </div>\n            </div> \n            <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n            <span class=\"fa fa-remove clear-all\" *ngIf=\"settings.clearAll && selectedItems?.length > 0 && !settings.disabled\" (click)=\"clearSelection($event);$event.stopPropagation()\"></span>\n            <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n        </div>      \n    </div>\n    <div class=\"dropdown-list\" [hidden]=\"!isActive\">\n    <div class=\"arrow-up arrow-2\"></div>\n    <div class=\"arrow-up\"></div>\n    <div class=\"list-area\">\n        <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\n            <label>\n                <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n                <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n            </label>\n        </div>   \n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && !settings.lazyLoading\">\n            <span class=\"fa fa-search\"></span>\n            <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\n        </div> \n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\n            <span class=\"fa fa-search\"></span>\n            <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\n        </div>\n    <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"lazyContainer\" >\n        <span *ngIf=\"itemTempl\">\n            <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl && !settings.lazyLoading\" >\n        <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label>{{item[settings.labelKey]}}</label>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl && settings.lazyLoading\" >\n            <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\n\n            \n        <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label>{{item[settings.labelKey]}}</label>\n        </li>\n        </div>\n        </span>\n    </ul>\n    <div *ngIf=\"settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n    <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\n        <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\n        <span *ngIf=\"itemTempl\" >\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl\" >\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\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",
                     host: { '[class]': 'defaultSettings.classes' },
-                    styles: [".stackline-dropdown {\n  position: relative;\n}\n\n.c-btn {\n  display: inline-block;\n  background: #fff;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 14px;\n  color: #333;\n}\n\n.c-btn.disabled {\n  background: #ccc;\n}\n\n.c-btn:focus {\n  outline: none;\n}\n\n.selected-list .c-list {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  flex-wrap: wrap;\n  min-width: 0;\n  float: none;\n  padding: 0px;\n  margin: 0px;\n  width: auto;\n}\n.selected-list .c-list .c-token {\n  list-style: none;\n  padding: 0px 5px;\n  background: #0079FE;\n  color: #fff;\n  border-radius: 2px;\n  margin-right: 4px;\n  margin-top: 2px;\n  float: left;\n}\n.selected-list .c-list .c-token .c-label {\n  display: block;\n  float: left;\n  /*width: 50px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;*/\n}\n.selected-list .c-list .c-token .fa-remove {\n  margin-left: 1px;\n  font-size: 12px;\n}\n.selected-list .fa-angle-down, .selected-list .fa-angle-up {\n  font-size: 15pt;\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.selected-list .countplaceholder {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  margin: 0 0 0 6px;\n  line-height: 1;\n}\n.selected-list .c-btn {\n  box-sizing: border-box;\n  width: 100%;\n  box-shadow: 0px 1px 5px #959595;\n  padding: 10px 36px 10px 10px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  position: relative;\n}\n\n.dropdown-list {\n  position: absolute;\n  padding-top: 14px;\n  width: 100%;\n  z-index: 9999;\n}\n.dropdown-list ul {\n  padding: 0px;\n  list-style: none;\n  overflow: auto;\n  margin: 0px;\n}\n.dropdown-list ul li {\n  padding: 10px 10px;\n  cursor: pointer;\n  text-align: left;\n}\n.dropdown-list ul li:first-child {\n  padding-top: 10px;\n}\n.dropdown-list ul li:last-child {\n  padding-bottom: 10px;\n}\n.dropdown-list ul li:hover {\n  background: #f5f5f5;\n}\n.dropdown-list ::-webkit-scrollbar {\n  width: 8px;\n}\n.dropdown-list ::-webkit-scrollbar-thumb {\n  background: #cccccc;\n  border-radius: 5px;\n}\n.dropdown-list ::-webkit-scrollbar-track {\n  background: #f2f2f2;\n}\n\n.arrow-up {\n  width: 0;\n  height: 0;\n  border-left: 13px solid transparent;\n  border-right: 13px solid transparent;\n  border-bottom: 15px solid #fff;\n  margin-left: 15px;\n  position: absolute;\n  top: 0;\n}\n\n.arrow-2 {\n  border-bottom: 15px solid #ccc;\n  top: -1px;\n}\n\n.list-area {\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  background: #fff;\n  margin: 0px;\n  box-shadow: 0px 1px 5px #959595;\n}\n\n.select-all {\n  padding: 10px;\n  border-bottom: 1px solid #ccc;\n  text-align: left;\n}\n\n.list-filter {\n  border-bottom: 1px solid #ccc;\n  position: relative;\n}\n.list-filter input {\n  border: 0px;\n  width: 100%;\n  height: 35px;\n  padding: 0px 0px 0px 35px;\n}\n.list-filter input:focus {\n  outline: none;\n}\n.list-filter .fa {\n  position: absolute;\n  top: 10px;\n  left: 13px;\n  color: #888;\n}\n\n.pure-checkbox input[type=checkbox] {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\n.pure-checkbox input[type=checkbox]:focus + label:before,\n.pure-checkbox input[type=checkbox]:hover + label:before {\n  border-color: #0079FE;\n  background-color: #f2f2f2;\n}\n\n.pure-checkbox input[type=checkbox]:active + label:before {\n  transition-duration: 0s;\n}\n\n.pure-checkbox input[type=checkbox] + label {\n  position: relative;\n  padding-left: 2em;\n  vertical-align: middle;\n  user-select: none;\n  cursor: pointer;\n  margin: 0px;\n  color: #000;\n  font-weight: 300;\n}\n\n.pure-checkbox input[type=checkbox] + label:before {\n  box-sizing: content-box;\n  content: \"\";\n  color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 14px;\n  height: 14px;\n  margin-top: -9px;\n  border: 2px solid #0079FE;\n  text-align: center;\n  transition: all 0.4s ease;\n}\n\n.pure-checkbox input[type=checkbox] + label:after {\n  box-sizing: content-box;\n  content: \"\";\n  background-color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 4px;\n  width: 10px;\n  height: 10px;\n  margin-top: -5px;\n  transform: scale(0);\n  transform-origin: 50%;\n  transition: transform 200ms ease-out;\n}\n\n.pure-checkbox input[type=checkbox]:disabled + label:before {\n  border-color: #cccccc;\n}\n\n.pure-checkbox input[type=checkbox]:disabled:focus + label:before .pure-checkbox input[type=checkbox]:disabled:hover + label:before {\n  background-color: inherit;\n}\n\n.pure-checkbox input[type=checkbox]:disabled:checked + label:before {\n  background-color: #cccccc;\n}\n\n.pure-checkbox input[type=checkbox] + label:after {\n  background-color: transparent;\n  top: 50%;\n  left: 4px;\n  width: 8px;\n  height: 3px;\n  margin-top: -4px;\n  border-style: solid;\n  border-color: #ffffff;\n  border-width: 0 0 3px 3px;\n  border-image: none;\n  transform: rotate(-45deg) scale(0);\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:after {\n  content: \"\";\n  transform: rotate(-45deg) scale(1);\n  transition: transform 200ms ease-out;\n}\n\n.pure-checkbox input[type=radio]:checked + label:before {\n  background-color: white;\n}\n\n.pure-checkbox input[type=radio]:checked + label:after {\n  transform: scale(1);\n}\n\n.pure-checkbox input[type=radio] + label:before {\n  border-radius: 50%;\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:before {\n  background: #0079FE;\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:after {\n  transform: rotate(-45deg) scale(1);\n}\n\n.list-message {\n  text-align: center;\n}\n\n.list-grp {\n  padding: 0 15px !important;\n}\n\n.list-grp h4 {\n  text-transform: capitalize;\n  margin: 15px 0px 0px 0px;\n  font-size: 14px;\n  font-weight: 700;\n}\n\n.list-grp > li {\n  padding-left: 15px !important;\n}\n\n.stackline-dropdown.theme-material,\n.stackline-dropdown.theme-dark,\n.stackline-dropdown.theme-custom {\n  --ms-primary: #3f51b5;\n  --ms-primary-soft: rgba(63, 81, 181, 0.12);\n  --ms-surface: #ffffff;\n  --ms-surface-soft: #f5f7fb;\n  --ms-surface-muted: #e8eaf6;\n  --ms-outline: #c5cae9;\n  --ms-outline-strong: #7986cb;\n  --ms-on-surface: #212121;\n  --ms-on-surface-muted: #5f6368;\n  --ms-chip-bg: #e8eaf6;\n  --ms-chip-text: #303f9f;\n  --ms-chip-remove: #303f9f;\n  --ms-divider: rgba(125, 119, 134, 0.16);\n  --ms-section-bg: rgba(247, 242, 250, 0.76);\n  --ms-selected-text: var(--ms-primary);\n  --ms-shadow: 0 1px 2px rgba(33, 33, 33, 0.16), 0 12px 32px rgba(63, 81, 181, 0.12);\n  --ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, 0.12), 0 4px 12px rgba(33, 33, 33, 0.08);\n  display: block;\n  width: 100%;\n  color: var(--ms-on-surface);\n  font: inherit;\n}\n\n.stackline-dropdown.theme-dark {\n  --ms-primary: #8ab4f8;\n  --ms-primary-soft: rgba(138, 180, 248, 0.18);\n  --ms-surface: #151a23;\n  --ms-surface-soft: #202736;\n  --ms-surface-muted: #111722;\n  --ms-outline: #384456;\n  --ms-outline-strong: #8ab4f8;\n  --ms-on-surface: #edf2f7;\n  --ms-on-surface-muted: #aab6c5;\n  --ms-chip-bg: #263247;\n  --ms-chip-text: #d7e6ff;\n  --ms-chip-remove: #d7e6ff;\n  --ms-divider: rgba(170, 182, 197, 0.18);\n  --ms-section-bg: #101620;\n  --ms-selected-text: #d7e6ff;\n  --ms-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);\n  --ms-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 24px rgba(0, 0, 0, 0.28);\n}\n\n.stackline-dropdown.theme-custom {\n  --ms-primary: var(--stackline-ms-primary, #0f766e);\n  --ms-primary-soft: var(--stackline-ms-primary-soft, rgba(15, 118, 110, 0.14));\n  --ms-surface: var(--stackline-ms-surface, #ffffff);\n  --ms-surface-soft: var(--stackline-ms-surface-soft, #ecfdf5);\n  --ms-surface-muted: var(--stackline-ms-surface-muted, #d1fae5);\n  --ms-outline: var(--stackline-ms-outline, #99f6e4);\n  --ms-outline-strong: var(--stackline-ms-outline-strong, #0f766e);\n  --ms-on-surface: var(--stackline-ms-on-surface, #102a2a);\n  --ms-on-surface-muted: var(--stackline-ms-on-surface-muted, #47615f);\n  --ms-chip-bg: var(--stackline-ms-chip-bg, #ccfbf1);\n  --ms-chip-text: var(--stackline-ms-chip-text, #115e59);\n  --ms-chip-remove: var(--stackline-ms-chip-remove, #115e59);\n  --ms-divider: var(--stackline-ms-divider, rgba(15, 118, 110, 0.16));\n  --ms-section-bg: var(--stackline-ms-section-bg, #f0fdfa);\n  --ms-selected-text: var(--stackline-ms-selected-text, var(--ms-primary));\n  --ms-shadow: var(--stackline-ms-shadow, 0 18px 42px rgba(15, 118, 110, 0.15));\n  --ms-shadow-soft: var(--stackline-ms-shadow-soft, 0 1px 2px rgba(15, 118, 110, 0.16), 0 8px 18px rgba(15, 118, 110, 0.09));\n}\n\n.stackline-dropdown.theme-material .selected-list,\n.stackline-dropdown.theme-dark .selected-list,\n.stackline-dropdown.theme-custom .selected-list {\n  width: 100%;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn,\n.stackline-dropdown.theme-dark .selected-list .c-btn,\n.stackline-dropdown.theme-custom .selected-list .c-btn {\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  gap: 8px;\n  width: 100%;\n  min-height: 56px;\n  padding: 11px 54px 11px 16px;\n  border-radius: 18px;\n  border: 1px solid var(--ms-outline);\n  background: var(--ms-surface);\n  box-shadow: var(--ms-shadow-soft);\n  color: var(--ms-on-surface);\n  cursor: pointer;\n  font-size: inherit;\n  line-height: 1.45;\n  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, transform 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn:hover,\n.stackline-dropdown.theme-dark .selected-list .c-btn:hover,\n.stackline-dropdown.theme-custom .selected-list .c-btn:hover {\n  border-color: var(--ms-outline-strong);\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn.disabled,\n.stackline-dropdown.theme-dark .selected-list .c-btn.disabled,\n.stackline-dropdown.theme-custom .selected-list .c-btn.disabled {\n  background: var(--ms-surface);\n  cursor: not-allowed;\n  opacity: 0.72;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list,\n.stackline-dropdown.theme-dark .selected-list .c-list,\n.stackline-dropdown.theme-custom .selected-list .c-list {\n  display: flex;\n  flex: 1 1 auto;\n  flex-wrap: wrap;\n  gap: 8px;\n  width: auto;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  float: none;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token,\n.stackline-dropdown.theme-dark .selected-list .c-list .c-token,\n.stackline-dropdown.theme-custom .selected-list .c-list .c-token {\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  min-height: 32px;\n  max-width: 100%;\n  padding: 6px 30px 6px 12px;\n  background: var(--ms-chip-bg);\n  color: var(--ms-chip-text);\n  border-radius: 999px;\n  box-shadow: inset 0 0 0 1px rgba(103, 80, 164, 0.08);\n  line-height: 1.35;\n  white-space: normal;\n  overflow-wrap: anywhere;\n  margin: 0;\n  float: none;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token .c-label,\n.stackline-dropdown.theme-dark .selected-list .c-list .c-token .c-label,\n.stackline-dropdown.theme-custom .selected-list .c-list .c-token .c-label {\n  display: inline-flex;\n  align-items: center;\n  float: none;\n  min-width: 0;\n  max-width: 100%;\n  line-height: 1.3;\n  font-weight: 500;\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token .fa-remove,\n.stackline-dropdown.theme-dark .selected-list .c-list .c-token .fa-remove,\n.stackline-dropdown.theme-custom .selected-list .c-list .c-token .fa-remove {\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  margin-left: 0;\n  transform: translateY(-50%);\n  color: var(--ms-chip-remove);\n  cursor: pointer;\n}\n\n.stackline-dropdown.theme-material .selected-list .countplaceholder,\n.stackline-dropdown.theme-dark .selected-list .countplaceholder,\n.stackline-dropdown.theme-custom .selected-list .countplaceholder {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  margin: 0;\n  line-height: 1;\n  color: var(--ms-on-surface-muted);\n  font-size: 0.8rem;\n  font-weight: 600;\n}\n\n.stackline-dropdown.theme-material .selected-list .fa-angle-down,\n.stackline-dropdown.theme-dark .selected-list .fa-angle-down,\n.stackline-dropdown.theme-custom .selected-list .fa-angle-down,\n.stackline-dropdown.theme-material .selected-list .fa-angle-up,\n.stackline-dropdown.theme-dark .selected-list .fa-angle-up,\n.stackline-dropdown.theme-custom .selected-list .fa-angle-up {\n  position: absolute;\n  top: 50%;\n  right: 16px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  transform: translateY(-50%);\n  color: var(--ms-on-surface-muted);\n  font-size: 15pt;\n  pointer-events: none;\n}\n\n.stackline-dropdown.theme-material .dropdown-list,\n.stackline-dropdown.theme-dark .dropdown-list,\n.stackline-dropdown.theme-custom .dropdown-list {\n  position: absolute;\n  width: 100%;\n  padding-top: 8px;\n  z-index: 99999;\n}\n\n.stackline-dropdown.theme-material .arrow-up,\n.stackline-dropdown.theme-dark .arrow-up,\n.stackline-dropdown.theme-custom .arrow-up,\n.stackline-dropdown.theme-material .arrow-down,\n.stackline-dropdown.theme-dark .arrow-down,\n.stackline-dropdown.theme-custom .arrow-down,\n.stackline-dropdown.theme-material .arrow-2,\n.stackline-dropdown.theme-dark .arrow-2,\n.stackline-dropdown.theme-custom .arrow-2 {\n  display: none;\n}\n\n.stackline-dropdown.theme-material .list-area,\n.stackline-dropdown.theme-dark .list-area,\n.stackline-dropdown.theme-custom .list-area {\n  overflow: hidden;\n  border-radius: 22px;\n  background: var(--ms-surface);\n  border: 1px solid var(--ms-outline);\n  box-shadow: var(--ms-shadow);\n  margin: 0;\n}\n\n.stackline-dropdown.theme-material .select-all,\n.stackline-dropdown.theme-dark .select-all,\n.stackline-dropdown.theme-custom .select-all {\n  padding: 10px 14px;\n  border-bottom: 1px solid var(--ms-divider);\n  background: var(--ms-section-bg);\n  text-align: left;\n}\n\n.stackline-dropdown.theme-material .list-filter,\n.stackline-dropdown.theme-dark .list-filter,\n.stackline-dropdown.theme-custom .list-filter {\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-height: 52px;\n  padding-left: 48px;\n  padding-right: 44px;\n  border-bottom: 1px solid var(--ms-divider);\n  background: var(--ms-surface);\n}\n\n.stackline-dropdown.theme-material .list-filter input,\n.stackline-dropdown.theme-dark .list-filter input,\n.stackline-dropdown.theme-custom .list-filter input {\n  width: 100%;\n  height: 100%;\n  border: 0;\n  background: transparent;\n  color: var(--ms-on-surface);\n  font: inherit;\n  padding: 0;\n}\n\n.stackline-dropdown.theme-material .list-filter input::placeholder,\n.stackline-dropdown.theme-dark .list-filter input::placeholder,\n.stackline-dropdown.theme-custom .list-filter input::placeholder {\n  color: var(--ms-on-surface-muted);\n}\n\n.stackline-dropdown.theme-material .list-filter input:focus,\n.stackline-dropdown.theme-dark .list-filter input:focus,\n.stackline-dropdown.theme-custom .list-filter input:focus {\n  outline: none;\n}\n\n.stackline-dropdown.theme-material .list-filter .fa,\n.stackline-dropdown.theme-dark .list-filter .fa,\n.stackline-dropdown.theme-custom .list-filter .fa {\n  position: absolute;\n  top: 50%;\n  left: 16px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  transform: translateY(-50%);\n  color: var(--ms-on-surface-muted);\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul,\n.stackline-dropdown.theme-dark .dropdown-list ul,\n.stackline-dropdown.theme-custom .dropdown-list ul {\n  list-style: none;\n  margin: 0;\n  padding: 8px;\n  overflow: auto;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li,\n.stackline-dropdown.theme-dark .dropdown-list ul li,\n.stackline-dropdown.theme-custom .dropdown-list ul li {\n  align-items: center;\n  min-height: 0;\n  margin: 4px;\n  padding: 12px 14px;\n  border-radius: 14px;\n  cursor: pointer;\n  text-align: left;\n  line-height: 1.35;\n  transition: background-color 0.16s ease, color 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:first-child,\n.stackline-dropdown.theme-dark .dropdown-list ul li:first-child,\n.stackline-dropdown.theme-custom .dropdown-list ul li:first-child {\n  padding-top: 12px;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:last-child,\n.stackline-dropdown.theme-dark .dropdown-list ul li:last-child,\n.stackline-dropdown.theme-custom .dropdown-list ul li:last-child {\n  padding-bottom: 12px;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:hover,\n.stackline-dropdown.theme-dark .dropdown-list ul li:hover,\n.stackline-dropdown.theme-custom .dropdown-list ul li:hover {\n  background: var(--ms-surface-soft);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox,\n.stackline-dropdown.theme-dark .pure-checkbox,\n.stackline-dropdown.theme-custom .pure-checkbox {\n  position: relative;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label {\n  position: relative;\n  display: block;\n  width: 100%;\n  margin: 0;\n  padding-left: 32px;\n  color: inherit;\n  cursor: pointer;\n  font-weight: 500;\n  user-select: none;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label:before {\n  box-sizing: content-box;\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 16px;\n  height: 16px;\n  margin-top: -10px;\n  border: 2px solid var(--ms-outline-strong);\n  border-radius: 5px;\n  background: var(--ms-surface);\n  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label:after,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label:after,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label:after {\n  box-sizing: content-box;\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 5px;\n  width: 8px;\n  height: 3px;\n  margin-top: -4px;\n  border-style: solid;\n  border-color: #ffffff;\n  border-width: 0 0 3px 3px;\n  border-image: none;\n  background: transparent;\n  transform: rotate(-45deg) scale(0);\n  transform-origin: 50%;\n  transition: transform 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:hover + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:hover + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:hover + label:before {\n  border-color: var(--ms-primary);\n  background: var(--ms-surface-soft);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked + label:before {\n  border-color: var(--ms-primary);\n  background: var(--ms-primary);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked + label:after,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked + label:after,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked + label:after {\n  transform: rotate(-45deg) scale(1);\n}\n\n.stackline-dropdown.theme-material .list-message,\n.stackline-dropdown.theme-dark .list-message,\n.stackline-dropdown.theme-custom .list-message {\n  margin: 0;\n  padding: 20px 14px;\n  color: var(--ms-on-surface-muted);\n  text-align: center;\n}\n"],
+                    styles: [".stackline-dropdown {\n  position: relative;\n}\n\n.c-btn {\n  display: inline-block;\n  background: #fff;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 14px;\n  color: #333;\n}\n\n.c-btn.disabled {\n  background: #ccc;\n}\n\n.c-btn:focus {\n  outline: none;\n}\n\n.selected-list .c-list {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  flex-wrap: wrap;\n  min-width: 0;\n  float: none;\n  padding: 0px;\n  margin: 0px;\n  width: auto;\n}\n.selected-list .c-list .c-token {\n  list-style: none;\n  padding: 0px 5px;\n  background: #0079FE;\n  color: #fff;\n  border-radius: 2px;\n  margin-right: 4px;\n  margin-top: 2px;\n  float: left;\n}\n.selected-list .c-list .c-token .c-label {\n  display: block;\n  float: left;\n  /*width: 50px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;*/\n}\n.selected-list .c-list .c-token .fa-remove {\n  margin-left: 1px;\n  font-size: 12px;\n}\n.selected-list .fa-angle-down, .selected-list .fa-angle-up {\n  font-size: 15pt;\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.selected-list .countplaceholder {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  margin: 0 0 0 6px;\n  line-height: 1;\n}\n.selected-list .c-btn {\n  box-sizing: border-box;\n  width: 100%;\n  box-shadow: 0px 1px 5px #959595;\n  padding: 10px 68px 10px 10px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  position: relative;\n}\n\n.dropdown-list {\n  position: absolute;\n  padding-top: 14px;\n  width: 100%;\n  z-index: 9999;\n}\n.dropdown-list ul {\n  padding: 0px;\n  list-style: none;\n  overflow: auto;\n  margin: 0px;\n}\n.dropdown-list ul li {\n  padding: 10px 10px;\n  cursor: pointer;\n  text-align: left;\n}\n.dropdown-list ul li:first-child {\n  padding-top: 10px;\n}\n.dropdown-list ul li:last-child {\n  padding-bottom: 10px;\n}\n.dropdown-list ul li:hover {\n  background: #f5f5f5;\n}\n.dropdown-list ::-webkit-scrollbar {\n  width: 8px;\n}\n.dropdown-list ::-webkit-scrollbar-thumb {\n  background: #cccccc;\n  border-radius: 5px;\n}\n.dropdown-list ::-webkit-scrollbar-track {\n  background: #f2f2f2;\n}\n\n.arrow-up {\n  width: 0;\n  height: 0;\n  border-left: 13px solid transparent;\n  border-right: 13px solid transparent;\n  border-bottom: 15px solid #fff;\n  margin-left: 15px;\n  position: absolute;\n  top: 0;\n}\n\n.arrow-2 {\n  border-bottom: 15px solid #ccc;\n  top: -1px;\n}\n\n.list-area {\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  background: #fff;\n  margin: 0px;\n  box-shadow: 0px 1px 5px #959595;\n}\n\n.select-all {\n  padding: 10px;\n  border-bottom: 1px solid #ccc;\n  text-align: left;\n}\n\n.list-filter {\n  border-bottom: 1px solid #ccc;\n  position: relative;\n}\n.list-filter input {\n  border: 0px;\n  width: 100%;\n  height: 35px;\n  padding: 0px 0px 0px 35px;\n}\n.list-filter input:focus {\n  outline: none;\n}\n.list-filter .fa {\n  position: absolute;\n  top: 10px;\n  left: 13px;\n  color: #888;\n}\n\n.pure-checkbox input[type=checkbox] {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\n.pure-checkbox input[type=checkbox]:focus + label:before,\n.pure-checkbox input[type=checkbox]:hover + label:before {\n  border-color: #0079FE;\n  background-color: #f2f2f2;\n}\n\n.pure-checkbox input[type=checkbox]:active + label:before {\n  transition-duration: 0s;\n}\n\n.pure-checkbox input[type=checkbox] + label {\n  position: relative;\n  padding-left: 2em;\n  vertical-align: middle;\n  user-select: none;\n  cursor: pointer;\n  margin: 0px;\n  color: #000;\n  font-weight: 300;\n}\n\n.pure-checkbox input[type=checkbox] + label:before {\n  box-sizing: content-box;\n  content: \"\";\n  color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 14px;\n  height: 14px;\n  margin-top: -9px;\n  border: 2px solid #0079FE;\n  text-align: center;\n  transition: all 0.4s ease;\n}\n\n.pure-checkbox input[type=checkbox] + label:after {\n  box-sizing: content-box;\n  content: \"\";\n  background-color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 4px;\n  width: 10px;\n  height: 10px;\n  margin-top: -5px;\n  transform: scale(0);\n  transform-origin: 50%;\n  transition: transform 200ms ease-out;\n}\n\n.pure-checkbox input[type=checkbox]:disabled + label:before {\n  border-color: #cccccc;\n}\n\n.pure-checkbox input[type=checkbox]:disabled:focus + label:before .pure-checkbox input[type=checkbox]:disabled:hover + label:before {\n  background-color: inherit;\n}\n\n.pure-checkbox input[type=checkbox]:disabled:checked + label:before {\n  background-color: #cccccc;\n}\n\n.pure-checkbox input[type=checkbox] + label:after {\n  background-color: transparent;\n  top: 50%;\n  left: 4px;\n  width: 8px;\n  height: 3px;\n  margin-top: -4px;\n  border-style: solid;\n  border-color: #ffffff;\n  border-width: 0 0 3px 3px;\n  border-image: none;\n  transform: rotate(-45deg) scale(0);\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:after {\n  content: \"\";\n  transform: rotate(-45deg) scale(1);\n  transition: transform 200ms ease-out;\n}\n\n.pure-checkbox input[type=radio]:checked + label:before {\n  background-color: white;\n}\n\n.pure-checkbox input[type=radio]:checked + label:after {\n  transform: scale(1);\n}\n\n.pure-checkbox input[type=radio] + label:before {\n  border-radius: 50%;\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:before {\n  background: #0079FE;\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:after {\n  transform: rotate(-45deg) scale(1);\n}\n\n.list-message {\n  text-align: center;\n}\n\n.list-grp {\n  padding: 0 15px !important;\n}\n\n.list-grp h4 {\n  text-transform: capitalize;\n  margin: 15px 0px 0px 0px;\n  font-size: 14px;\n  font-weight: 700;\n}\n\n.list-grp > li {\n  padding-left: 15px !important;\n}\n\n.stackline-dropdown.theme-material,\n.stackline-dropdown.theme-dark,\n.stackline-dropdown.theme-custom {\n  --ms-primary: #3f51b5;\n  --ms-primary-soft: rgba(63, 81, 181, 0.12);\n  --ms-surface: #ffffff;\n  --ms-surface-soft: #f5f7fb;\n  --ms-surface-muted: #e8eaf6;\n  --ms-outline: #c5cae9;\n  --ms-outline-strong: #7986cb;\n  --ms-on-surface: #212121;\n  --ms-on-surface-muted: #5f6368;\n  --ms-chip-bg: #e8eaf6;\n  --ms-chip-text: #303f9f;\n  --ms-chip-remove: #303f9f;\n  --ms-divider: rgba(125, 119, 134, 0.16);\n  --ms-section-bg: rgba(247, 242, 250, 0.76);\n  --ms-selected-text: var(--ms-primary);\n  --ms-shadow: 0 1px 2px rgba(33, 33, 33, 0.16), 0 12px 32px rgba(63, 81, 181, 0.12);\n  --ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, 0.12), 0 4px 12px rgba(33, 33, 33, 0.08);\n  display: block;\n  width: 100%;\n  color: var(--ms-on-surface);\n  font: inherit;\n}\n\n.stackline-dropdown.theme-dark {\n  --ms-primary: #8ab4f8;\n  --ms-primary-soft: rgba(138, 180, 248, 0.18);\n  --ms-surface: #151a23;\n  --ms-surface-soft: #202736;\n  --ms-surface-muted: #111722;\n  --ms-outline: #384456;\n  --ms-outline-strong: #8ab4f8;\n  --ms-on-surface: #edf2f7;\n  --ms-on-surface-muted: #aab6c5;\n  --ms-chip-bg: #263247;\n  --ms-chip-text: #d7e6ff;\n  --ms-chip-remove: #d7e6ff;\n  --ms-divider: rgba(170, 182, 197, 0.18);\n  --ms-section-bg: #101620;\n  --ms-selected-text: #d7e6ff;\n  --ms-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);\n  --ms-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 24px rgba(0, 0, 0, 0.28);\n}\n\n.stackline-dropdown.theme-custom {\n  --ms-primary: var(--stackline-ms-primary, #0f766e);\n  --ms-primary-soft: var(--stackline-ms-primary-soft, rgba(15, 118, 110, 0.14));\n  --ms-surface: var(--stackline-ms-surface, #ffffff);\n  --ms-surface-soft: var(--stackline-ms-surface-soft, #ecfdf5);\n  --ms-surface-muted: var(--stackline-ms-surface-muted, #d1fae5);\n  --ms-outline: var(--stackline-ms-outline, #99f6e4);\n  --ms-outline-strong: var(--stackline-ms-outline-strong, #0f766e);\n  --ms-on-surface: var(--stackline-ms-on-surface, #102a2a);\n  --ms-on-surface-muted: var(--stackline-ms-on-surface-muted, #47615f);\n  --ms-chip-bg: var(--stackline-ms-chip-bg, #ccfbf1);\n  --ms-chip-text: var(--stackline-ms-chip-text, #115e59);\n  --ms-chip-remove: var(--stackline-ms-chip-remove, #115e59);\n  --ms-divider: var(--stackline-ms-divider, rgba(15, 118, 110, 0.16));\n  --ms-section-bg: var(--stackline-ms-section-bg, #f0fdfa);\n  --ms-selected-text: var(--stackline-ms-selected-text, var(--ms-primary));\n  --ms-shadow: var(--stackline-ms-shadow, 0 18px 42px rgba(15, 118, 110, 0.15));\n  --ms-shadow-soft: var(--stackline-ms-shadow-soft, 0 1px 2px rgba(15, 118, 110, 0.16), 0 8px 18px rgba(15, 118, 110, 0.09));\n}\n\n.stackline-dropdown.theme-material .selected-list,\n.stackline-dropdown.theme-dark .selected-list,\n.stackline-dropdown.theme-custom .selected-list {\n  width: 100%;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn,\n.stackline-dropdown.theme-dark .selected-list .c-btn,\n.stackline-dropdown.theme-custom .selected-list .c-btn {\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  gap: 8px;\n  width: 100%;\n  min-height: 56px;\n  padding: 11px 84px 11px 16px;\n  border-radius: 18px;\n  border: 1px solid var(--ms-outline);\n  background: var(--ms-surface);\n  box-shadow: var(--ms-shadow-soft);\n  color: var(--ms-on-surface);\n  cursor: pointer;\n  font-size: inherit;\n  line-height: 1.45;\n  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, transform 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn:hover,\n.stackline-dropdown.theme-dark .selected-list .c-btn:hover,\n.stackline-dropdown.theme-custom .selected-list .c-btn:hover {\n  border-color: var(--ms-outline-strong);\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn.disabled,\n.stackline-dropdown.theme-dark .selected-list .c-btn.disabled,\n.stackline-dropdown.theme-custom .selected-list .c-btn.disabled {\n  background: var(--ms-surface);\n  cursor: not-allowed;\n  opacity: 0.72;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list,\n.stackline-dropdown.theme-dark .selected-list .c-list,\n.stackline-dropdown.theme-custom .selected-list .c-list {\n  display: flex;\n  flex: 1 1 auto;\n  flex-wrap: wrap;\n  gap: 8px;\n  width: auto;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  float: none;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token,\n.stackline-dropdown.theme-dark .selected-list .c-list .c-token,\n.stackline-dropdown.theme-custom .selected-list .c-list .c-token {\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  min-height: 32px;\n  max-width: 100%;\n  padding: 6px 30px 6px 12px;\n  background: var(--ms-chip-bg);\n  color: var(--ms-chip-text);\n  border-radius: 999px;\n  box-shadow: inset 0 0 0 1px rgba(103, 80, 164, 0.08);\n  line-height: 1.35;\n  white-space: normal;\n  overflow-wrap: anywhere;\n  margin: 0;\n  float: none;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token .c-label,\n.stackline-dropdown.theme-dark .selected-list .c-list .c-token .c-label,\n.stackline-dropdown.theme-custom .selected-list .c-list .c-token .c-label {\n  display: inline-flex;\n  align-items: center;\n  float: none;\n  min-width: 0;\n  max-width: 100%;\n  line-height: 1.3;\n  font-weight: 500;\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token .fa-remove,\n.stackline-dropdown.theme-dark .selected-list .c-list .c-token .fa-remove,\n.stackline-dropdown.theme-custom .selected-list .c-list .c-token .fa-remove {\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  margin-left: 0;\n  transform: translateY(-50%);\n  color: var(--ms-chip-remove);\n  cursor: pointer;\n}\n\n.stackline-dropdown.theme-material .selected-list .countplaceholder,\n.stackline-dropdown.theme-dark .selected-list .countplaceholder,\n.stackline-dropdown.theme-custom .selected-list .countplaceholder {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  margin: 0;\n  line-height: 1;\n  color: var(--ms-on-surface-muted);\n  font-size: 0.8rem;\n  font-weight: 600;\n}\n\n.stackline-dropdown.theme-material .selected-list .fa-angle-down,\n.stackline-dropdown.theme-dark .selected-list .fa-angle-down,\n.stackline-dropdown.theme-custom .selected-list .fa-angle-down,\n.stackline-dropdown.theme-material .selected-list .fa-angle-up,\n.stackline-dropdown.theme-dark .selected-list .fa-angle-up,\n.stackline-dropdown.theme-custom .selected-list .fa-angle-up {\n  position: absolute;\n  top: 50%;\n  right: 16px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  transform: translateY(-50%);\n  color: var(--ms-on-surface-muted);\n  font-size: 15pt;\n  pointer-events: none;\n}\n\n.stackline-dropdown.theme-material .dropdown-list,\n.stackline-dropdown.theme-dark .dropdown-list,\n.stackline-dropdown.theme-custom .dropdown-list {\n  position: absolute;\n  width: 100%;\n  padding-top: 8px;\n  z-index: 99999;\n}\n\n.stackline-dropdown.theme-material .arrow-up,\n.stackline-dropdown.theme-dark .arrow-up,\n.stackline-dropdown.theme-custom .arrow-up,\n.stackline-dropdown.theme-material .arrow-down,\n.stackline-dropdown.theme-dark .arrow-down,\n.stackline-dropdown.theme-custom .arrow-down,\n.stackline-dropdown.theme-material .arrow-2,\n.stackline-dropdown.theme-dark .arrow-2,\n.stackline-dropdown.theme-custom .arrow-2 {\n  display: none;\n}\n\n.stackline-dropdown.theme-material .list-area,\n.stackline-dropdown.theme-dark .list-area,\n.stackline-dropdown.theme-custom .list-area {\n  overflow: hidden;\n  border-radius: 22px;\n  background: var(--ms-surface);\n  border: 1px solid var(--ms-outline);\n  box-shadow: var(--ms-shadow);\n  margin: 0;\n}\n\n.stackline-dropdown.theme-material .select-all,\n.stackline-dropdown.theme-dark .select-all,\n.stackline-dropdown.theme-custom .select-all {\n  padding: 10px 14px;\n  border-bottom: 1px solid var(--ms-divider);\n  background: var(--ms-section-bg);\n  text-align: left;\n}\n\n.stackline-dropdown.theme-material .list-filter,\n.stackline-dropdown.theme-dark .list-filter,\n.stackline-dropdown.theme-custom .list-filter {\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-height: 52px;\n  padding-left: 48px;\n  padding-right: 44px;\n  border-bottom: 1px solid var(--ms-divider);\n  background: var(--ms-surface);\n}\n\n.stackline-dropdown.theme-material .list-filter input,\n.stackline-dropdown.theme-dark .list-filter input,\n.stackline-dropdown.theme-custom .list-filter input {\n  width: 100%;\n  height: 100%;\n  border: 0;\n  background: transparent;\n  color: var(--ms-on-surface);\n  font: inherit;\n  padding: 0;\n}\n\n.stackline-dropdown.theme-material .list-filter input::placeholder,\n.stackline-dropdown.theme-dark .list-filter input::placeholder,\n.stackline-dropdown.theme-custom .list-filter input::placeholder {\n  color: var(--ms-on-surface-muted);\n}\n\n.stackline-dropdown.theme-material .list-filter input:focus,\n.stackline-dropdown.theme-dark .list-filter input:focus,\n.stackline-dropdown.theme-custom .list-filter input:focus {\n  outline: none;\n}\n\n.stackline-dropdown.theme-material .list-filter .fa,\n.stackline-dropdown.theme-dark .list-filter .fa,\n.stackline-dropdown.theme-custom .list-filter .fa {\n  position: absolute;\n  top: 50%;\n  left: 16px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  transform: translateY(-50%);\n  color: var(--ms-on-surface-muted);\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul,\n.stackline-dropdown.theme-dark .dropdown-list ul,\n.stackline-dropdown.theme-custom .dropdown-list ul {\n  list-style: none;\n  margin: 0;\n  padding: 8px;\n  overflow: auto;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li,\n.stackline-dropdown.theme-dark .dropdown-list ul li,\n.stackline-dropdown.theme-custom .dropdown-list ul li {\n  align-items: center;\n  min-height: 0;\n  margin: 4px;\n  padding: 12px 14px;\n  border-radius: 14px;\n  cursor: pointer;\n  text-align: left;\n  line-height: 1.35;\n  transition: background-color 0.16s ease, color 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:first-child,\n.stackline-dropdown.theme-dark .dropdown-list ul li:first-child,\n.stackline-dropdown.theme-custom .dropdown-list ul li:first-child {\n  padding-top: 12px;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:last-child,\n.stackline-dropdown.theme-dark .dropdown-list ul li:last-child,\n.stackline-dropdown.theme-custom .dropdown-list ul li:last-child {\n  padding-bottom: 12px;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:hover,\n.stackline-dropdown.theme-dark .dropdown-list ul li:hover,\n.stackline-dropdown.theme-custom .dropdown-list ul li:hover {\n  background: var(--ms-surface-soft);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox,\n.stackline-dropdown.theme-dark .pure-checkbox,\n.stackline-dropdown.theme-custom .pure-checkbox {\n  position: relative;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label {\n  position: relative;\n  display: block;\n  width: 100%;\n  margin: 0;\n  padding-left: 32px;\n  color: inherit;\n  cursor: pointer;\n  font-weight: 500;\n  user-select: none;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label:before {\n  box-sizing: content-box;\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 16px;\n  height: 16px;\n  margin-top: -10px;\n  border: 2px solid var(--ms-outline-strong);\n  border-radius: 5px;\n  background: var(--ms-surface);\n  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label:after,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label:after,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label:after {\n  box-sizing: content-box;\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 5px;\n  width: 8px;\n  height: 3px;\n  margin-top: -4px;\n  border-style: solid;\n  border-color: #ffffff;\n  border-width: 0 0 3px 3px;\n  border-image: none;\n  background: transparent;\n  transform: rotate(-45deg) scale(0);\n  transform-origin: 50%;\n  transition: transform 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:hover + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:hover + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:hover + label:before {\n  border-color: var(--ms-primary);\n  background: var(--ms-surface-soft);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked + label:before {\n  border-color: var(--ms-primary);\n  background: var(--ms-primary);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked + label:after,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked + label:after,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked + label:after {\n  transform: rotate(-45deg) scale(1);\n}\n\n.stackline-dropdown.theme-material .list-message,\n.stackline-dropdown.theme-dark .list-message,\n.stackline-dropdown.theme-custom .list-message {\n  margin: 0;\n  padding: 20px 14px;\n  color: var(--ms-on-surface-muted);\n  text-align: center;\n}\n"],
                     providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALIDATION]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { data: [{

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

@@ -225,7 +225,8 @@ class AngularMultiSelect {
             lazyLoading: false,
             labelKey: 'itemName',
             theme: 'classic',
-            skin: 'classic'
+            skin: 'classic',
+        clearAll: true
         };
         this.onTouchedCallback = noop;
         this.onChangeCallback = noop;
@@ -396,6 +397,13 @@ class AngularMultiSelect {
         this.onChangeCallback(this.selectedItems);
         this.onTouchedCallback(this.selectedItems);
     }
+    clearSelection(e) {
+        this.selectedItems = [];
+        this.isSelectAll = false;
+        this.onChangeCallback(this.selectedItems);
+        this.onTouchedCallback(this.selectedItems);
+        this.onDeSelectAll.emit(this.selectedItems);
+    }
     toggleDropdown(evt) {
         if (this.settings.disabled) {
             return false;
@@ -512,14 +520,14 @@ class AngularMultiSelect {
     }
 }
 AngularMultiSelect.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularMultiSelect, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AngularMultiSelect.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AngularMultiSelect, selector: "angular-multiselect, angular2-multiselect", inputs: { data: "data", settings: "settings" }, outputs: { onSelect: "onSelect", onDeSelect: "onDeSelect", onSelectAll: "onSelectAll", onDeSelectAll: "onDeSelectAll", onOpen: "onOpen", onClose: "onClose" }, host: { 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 }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"stackline-dropdown\" [ngClass]=\"getDropdownClasses()\" (clickOutside)=\"closeDropdown()\">\n    <div class=\"selected-list\">\n        <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\n            <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n            <span *ngIf=\"settings.singleSelection\">\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\n                    {{item[settings.labelKey]}}\n                </span>\n            </span>\n            <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\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                    <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\n                </div>\n            </div> \n            <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n            <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n        </div>      \n    </div>\n    <div class=\"dropdown-list\" [hidden]=\"!isActive\">\n    <div class=\"arrow-up arrow-2\"></div>\n    <div class=\"arrow-up\"></div>\n    <div class=\"list-area\">\n        <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\n            <label>\n                <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n                <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n            </label>\n        </div>   \n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && !settings.lazyLoading\">\n            <span class=\"fa fa-search\"></span>\n            <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\n        </div> \n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\n            <span class=\"fa fa-search\"></span>\n            <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\n        </div>\n    <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"lazyContainer\" >\n        <span *ngIf=\"itemTempl\">\n            <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl && !settings.lazyLoading\" >\n        <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label>{{item[settings.labelKey]}}</label>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl && settings.lazyLoading\" >\n            <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\n\n            \n        <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label>{{item[settings.labelKey]}}</label>\n        </li>\n        </div>\n        </span>\n    </ul>\n    <div *ngIf=\"settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n    <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\n        <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\n        <span *ngIf=\"itemTempl\" >\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl\" >\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\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", isInline: true, styles: [".stackline-dropdown{position:relative}.c-btn{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:14px;color:#333}.c-btn.disabled{background:#ccc}.c-btn:focus{outline:none}.selected-list .c-list{display:flex;flex:1 1 auto;align-items:center;flex-wrap:wrap;min-width:0;float:none;padding:0;margin:0;width:auto}.selected-list .c-list .c-token{list-style:none;padding:0 5px;background:#0079FE;color:#fff;border-radius:2px;margin-right:4px;margin-top:2px;float:left}.selected-list .c-list .c-token .c-label{display:block;float:left}.selected-list .c-list .c-token .fa-remove{margin-left:1px;font-size:12px}.selected-list .fa-angle-down,.selected-list .fa-angle-up{font-size:15pt;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.selected-list .countplaceholder{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;align-self:center;margin:0 0 0 6px;line-height:1}.selected-list .c-btn{box-sizing:border-box;width:100%;box-shadow:0 1px 5px #959595;padding:10px 36px 10px 10px;cursor:pointer;display:flex;align-items:center;flex-wrap:nowrap;position:relative}.dropdown-list{position:absolute;padding-top:14px;width:100%;z-index:9999}.dropdown-list ul{padding:0;list-style:none;overflow:auto;margin:0}.dropdown-list ul li{padding:10px;cursor:pointer;text-align:left}.dropdown-list ul li:first-child{padding-top:10px}.dropdown-list ul li:last-child{padding-bottom:10px}.dropdown-list ul li:hover{background:#f5f5f5}.dropdown-list ::-webkit-scrollbar{width:8px}.dropdown-list ::-webkit-scrollbar-thumb{background:#cccccc;border-radius:5px}.dropdown-list ::-webkit-scrollbar-track{background:#f2f2f2}.arrow-up{width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:15px solid #fff;margin-left:15px;position:absolute;top:0}.arrow-2{border-bottom:15px solid #ccc;top:-1px}.list-area{border:1px solid #ccc;border-radius:3px;background:#fff;margin:0;box-shadow:0 1px 5px #959595}.select-all{padding:10px;border-bottom:1px solid #ccc;text-align:left}.list-filter{border-bottom:1px solid #ccc;position:relative}.list-filter input{border:0px;width:100%;height:35px;padding:0 0 0 35px}.list-filter input:focus{outline:none}.list-filter .fa{position:absolute;top:10px;left:13px;color:#888}.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]:focus+label:before,.pure-checkbox input[type=checkbox]:hover+label:before{border-color:#0079fe;background-color:#f2f2f2}.pure-checkbox input[type=checkbox]:active+label:before{transition-duration:0s}.pure-checkbox input[type=checkbox]+label{position:relative;padding-left:2em;vertical-align:middle;-webkit-user-select:none;user-select:none;cursor:pointer;margin:0;color:#000;font-weight:300}.pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";color:#0079fe;position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;border:2px solid #0079FE;text-align:center;transition:all .4s ease}.pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";background-color:#0079fe;position:absolute;top:50%;left:4px;width:10px;height:10px;margin-top:-5px;transform:scale(0);transform-origin:50%;transition:transform .2s ease-out}.pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#ccc}.pure-checkbox input[type=checkbox]:disabled:focus+label:before .pure-checkbox input[type=checkbox]:disabled:hover+label:before{background-color:inherit}.pure-checkbox input[type=checkbox]:disabled:checked+label:before{background-color:#ccc}.pure-checkbox input[type=checkbox]+label:after{background-color:transparent;top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#fff;border-width:0 0 3px 3px;border-image:none;transform:rotate(-45deg) scale(0)}.pure-checkbox input[type=checkbox]:checked+label:after{content:\"\";transform:rotate(-45deg) scale(1);transition:transform .2s ease-out}.pure-checkbox input[type=radio]:checked+label:before{background-color:#fff}.pure-checkbox input[type=radio]:checked+label:after{transform:scale(1)}.pure-checkbox input[type=radio]+label:before{border-radius:50%}.pure-checkbox input[type=checkbox]:checked+label:before{background:#0079FE}.pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.list-message{text-align:center}.list-grp{padding:0 15px!important}.list-grp h4{text-transform:capitalize;margin:15px 0 0;font-size:14px;font-weight:700}.list-grp>li{padding-left:15px!important}.stackline-dropdown.theme-material,.stackline-dropdown.theme-dark,.stackline-dropdown.theme-custom{--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-divider: rgba(125, 119, 134, .16);--ms-section-bg: rgba(247, 242, 250, .76);--ms-selected-text: var(--ms-primary);--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);display:block;width:100%;color:var(--ms-on-surface);font:inherit}.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-divider: rgba(170, 182, 197, .18);--ms-section-bg: #101620;--ms-selected-text: #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-divider: var(--stackline-ms-divider, rgba(15, 118, 110, .16));--ms-section-bg: var(--stackline-ms-section-bg, #f0fdfa);--ms-selected-text: var(--stackline-ms-selected-text, var(--ms-primary));--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-material .selected-list,.stackline-dropdown.theme-dark .selected-list,.stackline-dropdown.theme-custom .selected-list{width:100%}.stackline-dropdown.theme-material .selected-list .c-btn,.stackline-dropdown.theme-dark .selected-list .c-btn,.stackline-dropdown.theme-custom .selected-list .c-btn{position:relative;display:flex;align-items:center;flex-wrap:nowrap;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);color:var(--ms-on-surface);cursor:pointer;font-size:inherit;line-height:1.45;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease,transform .16s ease}.stackline-dropdown.theme-material .selected-list .c-btn:hover,.stackline-dropdown.theme-dark .selected-list .c-btn:hover,.stackline-dropdown.theme-custom .selected-list .c-btn:hover{border-color:var(--ms-outline-strong)}.stackline-dropdown.theme-material .selected-list .c-btn.disabled,.stackline-dropdown.theme-dark .selected-list .c-btn.disabled,.stackline-dropdown.theme-custom .selected-list .c-btn.disabled{background:var(--ms-surface);cursor:not-allowed;opacity:.72}.stackline-dropdown.theme-material .selected-list .c-list,.stackline-dropdown.theme-dark .selected-list .c-list,.stackline-dropdown.theme-custom .selected-list .c-list{display:flex;flex:1 1 auto;flex-wrap:wrap;gap:8px;width:auto;min-width:0;margin:0;padding:0;float:none}.stackline-dropdown.theme-material .selected-list .c-list .c-token,.stackline-dropdown.theme-dark .selected-list .c-list .c-token,.stackline-dropdown.theme-custom .selected-list .c-list .c-token{position:relative;display:inline-block;vertical-align:middle;min-height:32px;max-width:100%;padding:6px 30px 6px 12px;background:var(--ms-chip-bg);color:var(--ms-chip-text);border-radius:999px;box-shadow:inset 0 0 0 1px #6750a414;line-height:1.35;white-space:normal;overflow-wrap:anywhere;margin:0;float:none}.stackline-dropdown.theme-material .selected-list .c-list .c-token .c-label,.stackline-dropdown.theme-dark .selected-list .c-list .c-token .c-label,.stackline-dropdown.theme-custom .selected-list .c-list .c-token .c-label{display:inline-flex;align-items:center;float:none;min-width:0;max-width:100%;line-height:1.3;font-weight:500;white-space:normal;overflow-wrap:anywhere}.stackline-dropdown.theme-material .selected-list .c-list .c-token .fa-remove,.stackline-dropdown.theme-dark .selected-list .c-list .c-token .fa-remove,.stackline-dropdown.theme-custom .selected-list .c-list .c-token .fa-remove{position:absolute;right:10px;top:50%;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:0;transform:translateY(-50%);color:var(--ms-chip-remove);cursor:pointer}.stackline-dropdown.theme-material .selected-list .countplaceholder,.stackline-dropdown.theme-dark .selected-list .countplaceholder,.stackline-dropdown.theme-custom .selected-list .countplaceholder{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;align-self:center;margin:0;line-height:1;color:var(--ms-on-surface-muted);font-size:.8rem;font-weight:600}.stackline-dropdown.theme-material .selected-list .fa-angle-down,.stackline-dropdown.theme-dark .selected-list .fa-angle-down,.stackline-dropdown.theme-custom .selected-list .fa-angle-down,.stackline-dropdown.theme-material .selected-list .fa-angle-up,.stackline-dropdown.theme-dark .selected-list .fa-angle-up,.stackline-dropdown.theme-custom .selected-list .fa-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);font-size:15pt;pointer-events:none}.stackline-dropdown.theme-material .dropdown-list,.stackline-dropdown.theme-dark .dropdown-list,.stackline-dropdown.theme-custom .dropdown-list{position:absolute;width:100%;padding-top:8px;z-index:99999}.stackline-dropdown.theme-material .arrow-up,.stackline-dropdown.theme-dark .arrow-up,.stackline-dropdown.theme-custom .arrow-up,.stackline-dropdown.theme-material .arrow-down,.stackline-dropdown.theme-dark .arrow-down,.stackline-dropdown.theme-custom .arrow-down,.stackline-dropdown.theme-material .arrow-2,.stackline-dropdown.theme-dark .arrow-2,.stackline-dropdown.theme-custom .arrow-2{display:none}.stackline-dropdown.theme-material .list-area,.stackline-dropdown.theme-dark .list-area,.stackline-dropdown.theme-custom .list-area{overflow:hidden;border-radius:22px;background:var(--ms-surface);border:1px solid var(--ms-outline);box-shadow:var(--ms-shadow);margin:0}.stackline-dropdown.theme-material .select-all,.stackline-dropdown.theme-dark .select-all,.stackline-dropdown.theme-custom .select-all{padding:10px 14px;border-bottom:1px solid var(--ms-divider);background:var(--ms-section-bg);text-align:left}.stackline-dropdown.theme-material .list-filter,.stackline-dropdown.theme-dark .list-filter,.stackline-dropdown.theme-custom .list-filter{position:relative;display:flex;align-items:center;min-height:52px;padding-left:48px;padding-right:44px;border-bottom:1px solid var(--ms-divider);background:var(--ms-surface)}.stackline-dropdown.theme-material .list-filter input,.stackline-dropdown.theme-dark .list-filter input,.stackline-dropdown.theme-custom .list-filter input{width:100%;height:100%;border:0;background:transparent;color:var(--ms-on-surface);font:inherit;padding:0}.stackline-dropdown.theme-material .list-filter input::placeholder,.stackline-dropdown.theme-dark .list-filter input::placeholder,.stackline-dropdown.theme-custom .list-filter input::placeholder{color:var(--ms-on-surface-muted)}.stackline-dropdown.theme-material .list-filter input:focus,.stackline-dropdown.theme-dark .list-filter input:focus,.stackline-dropdown.theme-custom .list-filter input:focus{outline:none}.stackline-dropdown.theme-material .list-filter .fa,.stackline-dropdown.theme-dark .list-filter .fa,.stackline-dropdown.theme-custom .list-filter .fa{position:absolute;top:50%;left:16px;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;transform:translateY(-50%);color:var(--ms-on-surface-muted)}.stackline-dropdown.theme-material .dropdown-list ul,.stackline-dropdown.theme-dark .dropdown-list ul,.stackline-dropdown.theme-custom .dropdown-list ul{list-style:none;margin:0;padding:8px;overflow:auto}.stackline-dropdown.theme-material .dropdown-list ul li,.stackline-dropdown.theme-dark .dropdown-list ul li,.stackline-dropdown.theme-custom .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}.stackline-dropdown.theme-material .dropdown-list ul li:first-child,.stackline-dropdown.theme-dark .dropdown-list ul li:first-child,.stackline-dropdown.theme-custom .dropdown-list ul li:first-child{padding-top:12px}.stackline-dropdown.theme-material .dropdown-list ul li:last-child,.stackline-dropdown.theme-dark .dropdown-list ul li:last-child,.stackline-dropdown.theme-custom .dropdown-list ul li:last-child{padding-bottom:12px}.stackline-dropdown.theme-material .dropdown-list ul li:hover,.stackline-dropdown.theme-dark .dropdown-list ul li:hover,.stackline-dropdown.theme-custom .dropdown-list ul li:hover{background:var(--ms-surface-soft)}.stackline-dropdown.theme-material .pure-checkbox,.stackline-dropdown.theme-dark .pure-checkbox,.stackline-dropdown.theme-custom .pure-checkbox{position:relative}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label,.stackline-dropdown.theme-custom .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}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:0;width:16px;height:16px;margin-top:-10px;border:2px solid var(--ms-outline-strong);border-radius:5px;background:var(--ms-surface);transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label:after,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label:after,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:5px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#fff;border-width:0 0 3px 3px;border-image:none;background:transparent;transform:rotate(-45deg) scale(0);transform-origin:50%;transition:transform .16s ease}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:hover+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:hover+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:hover+label:before{border-color:var(--ms-primary);background:var(--ms-surface-soft)}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked+label:before{border-color:var(--ms-primary);background:var(--ms-primary)}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked+label:after,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked+label:after,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.stackline-dropdown.theme-material .list-message,.stackline-dropdown.theme-dark .list-message,.stackline-dropdown.theme-custom .list-message{margin:0;padding:20px 14px;color:var(--ms-on-surface-muted);text-align:center}\n"], components: [{ type: i0.forwardRef(function () { return TemplateRenderer; }), selector: "c-templateRenderer", inputs: ["data", "item"] }], directives: [{ type: i0.forwardRef(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return ClickOutsideDirective; }), selector: "[clickOutside]", outputs: ["clickOutside"] }, { type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0.forwardRef(function () { return i2.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i0.forwardRef(function () { return i2.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { type: i0.forwardRef(function () { return i2.NgModel; }), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i0.forwardRef(function () { return i1.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i0.forwardRef(function () { return styleDirective; }), selector: "[styleProp]", inputs: ["styleProp"] }], pipes: { "listFilter": i0.forwardRef(function () { return ListFilterPipe; }) } });
+AngularMultiSelect.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AngularMultiSelect, selector: "angular-multiselect, angular2-multiselect", inputs: { data: "data", settings: "settings" }, outputs: { onSelect: "onSelect", onDeSelect: "onDeSelect", onSelectAll: "onSelectAll", onDeSelectAll: "onDeSelectAll", onOpen: "onOpen", onClose: "onClose" }, host: { 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 }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"stackline-dropdown\" [ngClass]=\"getDropdownClasses()\" (clickOutside)=\"closeDropdown()\">\n    <div class=\"selected-list\">\n        <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\n            <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n            <span *ngIf=\"settings.singleSelection\">\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\n                    {{item[settings.labelKey]}}\n                </span>\n            </span>\n            <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\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                    <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\n                </div>\n            </div> \n            <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n            <span class=\"fa fa-remove clear-all\" *ngIf=\"settings.clearAll && selectedItems?.length > 0 && !settings.disabled\" (click)=\"clearSelection($event);$event.stopPropagation()\"></span>\n            <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n        </div>      \n    </div>\n    <div class=\"dropdown-list\" [hidden]=\"!isActive\">\n    <div class=\"arrow-up arrow-2\"></div>\n    <div class=\"arrow-up\"></div>\n    <div class=\"list-area\">\n        <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\n            <label>\n                <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n                <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n            </label>\n        </div>   \n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && !settings.lazyLoading\">\n            <span class=\"fa fa-search\"></span>\n            <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\n        </div> \n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\n            <span class=\"fa fa-search\"></span>\n            <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\n        </div>\n    <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"lazyContainer\" >\n        <span *ngIf=\"itemTempl\">\n            <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl && !settings.lazyLoading\" >\n        <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label>{{item[settings.labelKey]}}</label>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl && settings.lazyLoading\" >\n            <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\n\n            \n        <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label>{{item[settings.labelKey]}}</label>\n        </li>\n        </div>\n        </span>\n    </ul>\n    <div *ngIf=\"settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n    <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\n        <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\n        <span *ngIf=\"itemTempl\" >\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl\" >\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\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", isInline: true, styles: [".stackline-dropdown{position:relative}.c-btn{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:14px;color:#333}.c-btn.disabled{background:#ccc}.c-btn:focus{outline:none}.selected-list .c-list{display:flex;flex:1 1 auto;align-items:center;flex-wrap:wrap;min-width:0;float:none;padding:0;margin:0;width:auto}.selected-list .c-list .c-token{list-style:none;padding:0 5px;background:#0079FE;color:#fff;border-radius:2px;margin-right:4px;margin-top:2px;float:left}.selected-list .c-list .c-token .c-label{display:block;float:left}.selected-list .c-list .c-token .fa-remove{margin-left:1px;font-size:12px}.selected-list .fa-angle-down,.selected-list .fa-angle-up{font-size:15pt;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.selected-list .countplaceholder{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;align-self:center;margin:0 0 0 6px;line-height:1}.selected-list .c-btn{box-sizing:border-box;width:100%;box-shadow:0 1px 5px #959595;padding: 10px 68px 10px 10px;cursor:pointer;display:flex;align-items:center;flex-wrap:nowrap;position:relative}.dropdown-list{position:absolute;padding-top:14px;width:100%;z-index:9999}.dropdown-list ul{padding:0;list-style:none;overflow:auto;margin:0}.dropdown-list ul li{padding:10px;cursor:pointer;text-align:left}.dropdown-list ul li:first-child{padding-top:10px}.dropdown-list ul li:last-child{padding-bottom:10px}.dropdown-list ul li:hover{background:#f5f5f5}.dropdown-list ::-webkit-scrollbar{width:8px}.dropdown-list ::-webkit-scrollbar-thumb{background:#cccccc;border-radius:5px}.dropdown-list ::-webkit-scrollbar-track{background:#f2f2f2}.arrow-up{width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:15px solid #fff;margin-left:15px;position:absolute;top:0}.arrow-2{border-bottom:15px solid #ccc;top:-1px}.list-area{border:1px solid #ccc;border-radius:3px;background:#fff;margin:0;box-shadow:0 1px 5px #959595}.select-all{padding:10px;border-bottom:1px solid #ccc;text-align:left}.list-filter{border-bottom:1px solid #ccc;position:relative}.list-filter input{border:0px;width:100%;height:35px;padding:0 0 0 35px}.list-filter input:focus{outline:none}.list-filter .fa{position:absolute;top:10px;left:13px;color:#888}.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]:focus+label:before,.pure-checkbox input[type=checkbox]:hover+label:before{border-color:#0079fe;background-color:#f2f2f2}.pure-checkbox input[type=checkbox]:active+label:before{transition-duration:0s}.pure-checkbox input[type=checkbox]+label{position:relative;padding-left:2em;vertical-align:middle;-webkit-user-select:none;user-select:none;cursor:pointer;margin:0;color:#000;font-weight:300}.pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";color:#0079fe;position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;border:2px solid #0079FE;text-align:center;transition:all .4s ease}.pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";background-color:#0079fe;position:absolute;top:50%;left:4px;width:10px;height:10px;margin-top:-5px;transform:scale(0);transform-origin:50%;transition:transform .2s ease-out}.pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#ccc}.pure-checkbox input[type=checkbox]:disabled:focus+label:before .pure-checkbox input[type=checkbox]:disabled:hover+label:before{background-color:inherit}.pure-checkbox input[type=checkbox]:disabled:checked+label:before{background-color:#ccc}.pure-checkbox input[type=checkbox]+label:after{background-color:transparent;top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#fff;border-width:0 0 3px 3px;border-image:none;transform:rotate(-45deg) scale(0)}.pure-checkbox input[type=checkbox]:checked+label:after{content:\"\";transform:rotate(-45deg) scale(1);transition:transform .2s ease-out}.pure-checkbox input[type=radio]:checked+label:before{background-color:#fff}.pure-checkbox input[type=radio]:checked+label:after{transform:scale(1)}.pure-checkbox input[type=radio]+label:before{border-radius:50%}.pure-checkbox input[type=checkbox]:checked+label:before{background:#0079FE}.pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.list-message{text-align:center}.list-grp{padding:0 15px!important}.list-grp h4{text-transform:capitalize;margin:15px 0 0;font-size:14px;font-weight:700}.list-grp>li{padding-left:15px!important}.stackline-dropdown.theme-material,.stackline-dropdown.theme-dark,.stackline-dropdown.theme-custom{--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-divider: rgba(125, 119, 134, .16);--ms-section-bg: rgba(247, 242, 250, .76);--ms-selected-text: var(--ms-primary);--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);display:block;width:100%;color:var(--ms-on-surface);font:inherit}.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-divider: rgba(170, 182, 197, .18);--ms-section-bg: #101620;--ms-selected-text: #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-divider: var(--stackline-ms-divider, rgba(15, 118, 110, .16));--ms-section-bg: var(--stackline-ms-section-bg, #f0fdfa);--ms-selected-text: var(--stackline-ms-selected-text, var(--ms-primary));--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-material .selected-list,.stackline-dropdown.theme-dark .selected-list,.stackline-dropdown.theme-custom .selected-list{width:100%}.stackline-dropdown.theme-material .selected-list .c-btn,.stackline-dropdown.theme-dark .selected-list .c-btn,.stackline-dropdown.theme-custom .selected-list .c-btn{position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:8px;width:100%;min-height:56px;padding: 11px 84px 11px 16px;border-radius:18px;border:1px solid var(--ms-outline);background:var(--ms-surface);box-shadow:var(--ms-shadow-soft);color:var(--ms-on-surface);cursor:pointer;font-size:inherit;line-height:1.45;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease,transform .16s ease}.stackline-dropdown.theme-material .selected-list .c-btn:hover,.stackline-dropdown.theme-dark .selected-list .c-btn:hover,.stackline-dropdown.theme-custom .selected-list .c-btn:hover{border-color:var(--ms-outline-strong)}.stackline-dropdown.theme-material .selected-list .c-btn.disabled,.stackline-dropdown.theme-dark .selected-list .c-btn.disabled,.stackline-dropdown.theme-custom .selected-list .c-btn.disabled{background:var(--ms-surface);cursor:not-allowed;opacity:.72}.stackline-dropdown.theme-material .selected-list .c-list,.stackline-dropdown.theme-dark .selected-list .c-list,.stackline-dropdown.theme-custom .selected-list .c-list{display:flex;flex:1 1 auto;flex-wrap:wrap;gap:8px;width:auto;min-width:0;margin:0;padding:0;float:none}.stackline-dropdown.theme-material .selected-list .c-list .c-token,.stackline-dropdown.theme-dark .selected-list .c-list .c-token,.stackline-dropdown.theme-custom .selected-list .c-list .c-token{position:relative;display:inline-block;vertical-align:middle;min-height:32px;max-width:100%;padding:6px 30px 6px 12px;background:var(--ms-chip-bg);color:var(--ms-chip-text);border-radius:999px;box-shadow:inset 0 0 0 1px #6750a414;line-height:1.35;white-space:normal;overflow-wrap:anywhere;margin:0;float:none}.stackline-dropdown.theme-material .selected-list .c-list .c-token .c-label,.stackline-dropdown.theme-dark .selected-list .c-list .c-token .c-label,.stackline-dropdown.theme-custom .selected-list .c-list .c-token .c-label{display:inline-flex;align-items:center;float:none;min-width:0;max-width:100%;line-height:1.3;font-weight:500;white-space:normal;overflow-wrap:anywhere}.stackline-dropdown.theme-material .selected-list .c-list .c-token .fa-remove,.stackline-dropdown.theme-dark .selected-list .c-list .c-token .fa-remove,.stackline-dropdown.theme-custom .selected-list .c-list .c-token .fa-remove{position:absolute;right:10px;top:50%;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:0;transform:translateY(-50%);color:var(--ms-chip-remove);cursor:pointer}.stackline-dropdown.theme-material .selected-list .countplaceholder,.stackline-dropdown.theme-dark .selected-list .countplaceholder,.stackline-dropdown.theme-custom .selected-list .countplaceholder{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;align-self:center;margin:0;line-height:1;color:var(--ms-on-surface-muted);font-size:.8rem;font-weight:600}.stackline-dropdown.theme-material .selected-list .fa-angle-down,.stackline-dropdown.theme-dark .selected-list .fa-angle-down,.stackline-dropdown.theme-custom .selected-list .fa-angle-down,.stackline-dropdown.theme-material .selected-list .fa-angle-up,.stackline-dropdown.theme-dark .selected-list .fa-angle-up,.stackline-dropdown.theme-custom .selected-list .fa-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);font-size:15pt;pointer-events:none}.stackline-dropdown.theme-material .dropdown-list,.stackline-dropdown.theme-dark .dropdown-list,.stackline-dropdown.theme-custom .dropdown-list{position:absolute;width:100%;padding-top:8px;z-index:99999}.stackline-dropdown.theme-material .arrow-up,.stackline-dropdown.theme-dark .arrow-up,.stackline-dropdown.theme-custom .arrow-up,.stackline-dropdown.theme-material .arrow-down,.stackline-dropdown.theme-dark .arrow-down,.stackline-dropdown.theme-custom .arrow-down,.stackline-dropdown.theme-material .arrow-2,.stackline-dropdown.theme-dark .arrow-2,.stackline-dropdown.theme-custom .arrow-2{display:none}.stackline-dropdown.theme-material .list-area,.stackline-dropdown.theme-dark .list-area,.stackline-dropdown.theme-custom .list-area{overflow:hidden;border-radius:22px;background:var(--ms-surface);border:1px solid var(--ms-outline);box-shadow:var(--ms-shadow);margin:0}.stackline-dropdown.theme-material .select-all,.stackline-dropdown.theme-dark .select-all,.stackline-dropdown.theme-custom .select-all{padding:10px 14px;border-bottom:1px solid var(--ms-divider);background:var(--ms-section-bg);text-align:left}.stackline-dropdown.theme-material .list-filter,.stackline-dropdown.theme-dark .list-filter,.stackline-dropdown.theme-custom .list-filter{position:relative;display:flex;align-items:center;min-height:52px;padding-left:48px;padding-right:44px;border-bottom:1px solid var(--ms-divider);background:var(--ms-surface)}.stackline-dropdown.theme-material .list-filter input,.stackline-dropdown.theme-dark .list-filter input,.stackline-dropdown.theme-custom .list-filter input{width:100%;height:100%;border:0;background:transparent;color:var(--ms-on-surface);font:inherit;padding:0}.stackline-dropdown.theme-material .list-filter input::placeholder,.stackline-dropdown.theme-dark .list-filter input::placeholder,.stackline-dropdown.theme-custom .list-filter input::placeholder{color:var(--ms-on-surface-muted)}.stackline-dropdown.theme-material .list-filter input:focus,.stackline-dropdown.theme-dark .list-filter input:focus,.stackline-dropdown.theme-custom .list-filter input:focus{outline:none}.stackline-dropdown.theme-material .list-filter .fa,.stackline-dropdown.theme-dark .list-filter .fa,.stackline-dropdown.theme-custom .list-filter .fa{position:absolute;top:50%;left:16px;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;transform:translateY(-50%);color:var(--ms-on-surface-muted)}.stackline-dropdown.theme-material .dropdown-list ul,.stackline-dropdown.theme-dark .dropdown-list ul,.stackline-dropdown.theme-custom .dropdown-list ul{list-style:none;margin:0;padding:8px;overflow:auto}.stackline-dropdown.theme-material .dropdown-list ul li,.stackline-dropdown.theme-dark .dropdown-list ul li,.stackline-dropdown.theme-custom .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}.stackline-dropdown.theme-material .dropdown-list ul li:first-child,.stackline-dropdown.theme-dark .dropdown-list ul li:first-child,.stackline-dropdown.theme-custom .dropdown-list ul li:first-child{padding-top:12px}.stackline-dropdown.theme-material .dropdown-list ul li:last-child,.stackline-dropdown.theme-dark .dropdown-list ul li:last-child,.stackline-dropdown.theme-custom .dropdown-list ul li:last-child{padding-bottom:12px}.stackline-dropdown.theme-material .dropdown-list ul li:hover,.stackline-dropdown.theme-dark .dropdown-list ul li:hover,.stackline-dropdown.theme-custom .dropdown-list ul li:hover{background:var(--ms-surface-soft)}.stackline-dropdown.theme-material .pure-checkbox,.stackline-dropdown.theme-dark .pure-checkbox,.stackline-dropdown.theme-custom .pure-checkbox{position:relative}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label,.stackline-dropdown.theme-custom .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}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:0;width:16px;height:16px;margin-top:-10px;border:2px solid var(--ms-outline-strong);border-radius:5px;background:var(--ms-surface);transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label:after,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label:after,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:5px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#fff;border-width:0 0 3px 3px;border-image:none;background:transparent;transform:rotate(-45deg) scale(0);transform-origin:50%;transition:transform .16s ease}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:hover+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:hover+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:hover+label:before{border-color:var(--ms-primary);background:var(--ms-surface-soft)}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked+label:before{border-color:var(--ms-primary);background:var(--ms-primary)}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked+label:after,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked+label:after,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.stackline-dropdown.theme-material .list-message,.stackline-dropdown.theme-dark .list-message,.stackline-dropdown.theme-custom .list-message{margin:0;padding:20px 14px;color:var(--ms-on-surface-muted);text-align:center}\n"], components: [{ type: i0.forwardRef(function () { return TemplateRenderer; }), selector: "c-templateRenderer", inputs: ["data", "item"] }], directives: [{ type: i0.forwardRef(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return ClickOutsideDirective; }), selector: "[clickOutside]", outputs: ["clickOutside"] }, { type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0.forwardRef(function () { return i2.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i0.forwardRef(function () { return i2.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { type: i0.forwardRef(function () { return i2.NgModel; }), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i0.forwardRef(function () { return i1.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i0.forwardRef(function () { return styleDirective; }), selector: "[styleProp]", inputs: ["styleProp"] }], pipes: { "listFilter": i0.forwardRef(function () { return ListFilterPipe; }) } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularMultiSelect, decorators: [{
             type: Component,
             args: [{
                     selector: 'angular-multiselect, angular2-multiselect',
-                    template: "<div class=\"stackline-dropdown\" [ngClass]=\"getDropdownClasses()\" (clickOutside)=\"closeDropdown()\">\n    <div class=\"selected-list\">\n        <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\n            <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n            <span *ngIf=\"settings.singleSelection\">\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\n                    {{item[settings.labelKey]}}\n                </span>\n            </span>\n            <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\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                    <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\n                </div>\n            </div> \n            <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n            <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n        </div>      \n    </div>\n    <div class=\"dropdown-list\" [hidden]=\"!isActive\">\n    <div class=\"arrow-up arrow-2\"></div>\n    <div class=\"arrow-up\"></div>\n    <div class=\"list-area\">\n        <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\n            <label>\n                <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n                <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n            </label>\n        </div>   \n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && !settings.lazyLoading\">\n            <span class=\"fa fa-search\"></span>\n            <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\n        </div> \n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\n            <span class=\"fa fa-search\"></span>\n            <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\n        </div>\n    <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"lazyContainer\" >\n        <span *ngIf=\"itemTempl\">\n            <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl && !settings.lazyLoading\" >\n        <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label>{{item[settings.labelKey]}}</label>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl && settings.lazyLoading\" >\n            <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\n\n            \n        <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label>{{item[settings.labelKey]}}</label>\n        </li>\n        </div>\n        </span>\n    </ul>\n    <div *ngIf=\"settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n    <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\n        <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\n        <span *ngIf=\"itemTempl\" >\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl\" >\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\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",
+                    template: "<div class=\"stackline-dropdown\" [ngClass]=\"getDropdownClasses()\" (clickOutside)=\"closeDropdown()\">\n    <div class=\"selected-list\">\n        <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\n            <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n            <span *ngIf=\"settings.singleSelection\">\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\n                    {{item[settings.labelKey]}}\n                </span>\n            </span>\n            <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\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                    <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\n                </div>\n            </div> \n            <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n            <span class=\"fa fa-remove clear-all\" *ngIf=\"settings.clearAll && selectedItems?.length > 0 && !settings.disabled\" (click)=\"clearSelection($event);$event.stopPropagation()\"></span>\n            <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n        </div>      \n    </div>\n    <div class=\"dropdown-list\" [hidden]=\"!isActive\">\n    <div class=\"arrow-up arrow-2\"></div>\n    <div class=\"arrow-up\"></div>\n    <div class=\"list-area\">\n        <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\n            <label>\n                <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n                <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n            </label>\n        </div>   \n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && !settings.lazyLoading\">\n            <span class=\"fa fa-search\"></span>\n            <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\n        </div> \n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\n            <span class=\"fa fa-search\"></span>\n            <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\n        </div>\n    <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"lazyContainer\" >\n        <span *ngIf=\"itemTempl\">\n            <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl && !settings.lazyLoading\" >\n        <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label>{{item[settings.labelKey]}}</label>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl && settings.lazyLoading\" >\n            <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\n\n            \n        <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label>{{item[settings.labelKey]}}</label>\n        </li>\n        </div>\n        </span>\n    </ul>\n    <div *ngIf=\"settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n    <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\n        <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\n        <span *ngIf=\"itemTempl\" >\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl\" >\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\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",
                     host: { '[class]': 'defaultSettings.classes' },
-                    styles: [".stackline-dropdown {\n  position: relative;\n}\n\n.c-btn {\n  display: inline-block;\n  background: #fff;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 14px;\n  color: #333;\n}\n\n.c-btn.disabled {\n  background: #ccc;\n}\n\n.c-btn:focus {\n  outline: none;\n}\n\n.selected-list .c-list {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  flex-wrap: wrap;\n  min-width: 0;\n  float: none;\n  padding: 0px;\n  margin: 0px;\n  width: auto;\n}\n.selected-list .c-list .c-token {\n  list-style: none;\n  padding: 0px 5px;\n  background: #0079FE;\n  color: #fff;\n  border-radius: 2px;\n  margin-right: 4px;\n  margin-top: 2px;\n  float: left;\n}\n.selected-list .c-list .c-token .c-label {\n  display: block;\n  float: left;\n  /*width: 50px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;*/\n}\n.selected-list .c-list .c-token .fa-remove {\n  margin-left: 1px;\n  font-size: 12px;\n}\n.selected-list .fa-angle-down, .selected-list .fa-angle-up {\n  font-size: 15pt;\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.selected-list .countplaceholder {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  margin: 0 0 0 6px;\n  line-height: 1;\n}\n.selected-list .c-btn {\n  box-sizing: border-box;\n  width: 100%;\n  box-shadow: 0px 1px 5px #959595;\n  padding: 10px 36px 10px 10px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  position: relative;\n}\n\n.dropdown-list {\n  position: absolute;\n  padding-top: 14px;\n  width: 100%;\n  z-index: 9999;\n}\n.dropdown-list ul {\n  padding: 0px;\n  list-style: none;\n  overflow: auto;\n  margin: 0px;\n}\n.dropdown-list ul li {\n  padding: 10px 10px;\n  cursor: pointer;\n  text-align: left;\n}\n.dropdown-list ul li:first-child {\n  padding-top: 10px;\n}\n.dropdown-list ul li:last-child {\n  padding-bottom: 10px;\n}\n.dropdown-list ul li:hover {\n  background: #f5f5f5;\n}\n.dropdown-list ::-webkit-scrollbar {\n  width: 8px;\n}\n.dropdown-list ::-webkit-scrollbar-thumb {\n  background: #cccccc;\n  border-radius: 5px;\n}\n.dropdown-list ::-webkit-scrollbar-track {\n  background: #f2f2f2;\n}\n\n.arrow-up {\n  width: 0;\n  height: 0;\n  border-left: 13px solid transparent;\n  border-right: 13px solid transparent;\n  border-bottom: 15px solid #fff;\n  margin-left: 15px;\n  position: absolute;\n  top: 0;\n}\n\n.arrow-2 {\n  border-bottom: 15px solid #ccc;\n  top: -1px;\n}\n\n.list-area {\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  background: #fff;\n  margin: 0px;\n  box-shadow: 0px 1px 5px #959595;\n}\n\n.select-all {\n  padding: 10px;\n  border-bottom: 1px solid #ccc;\n  text-align: left;\n}\n\n.list-filter {\n  border-bottom: 1px solid #ccc;\n  position: relative;\n}\n.list-filter input {\n  border: 0px;\n  width: 100%;\n  height: 35px;\n  padding: 0px 0px 0px 35px;\n}\n.list-filter input:focus {\n  outline: none;\n}\n.list-filter .fa {\n  position: absolute;\n  top: 10px;\n  left: 13px;\n  color: #888;\n}\n\n.pure-checkbox input[type=checkbox] {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\n.pure-checkbox input[type=checkbox]:focus + label:before,\n.pure-checkbox input[type=checkbox]:hover + label:before {\n  border-color: #0079FE;\n  background-color: #f2f2f2;\n}\n\n.pure-checkbox input[type=checkbox]:active + label:before {\n  transition-duration: 0s;\n}\n\n.pure-checkbox input[type=checkbox] + label {\n  position: relative;\n  padding-left: 2em;\n  vertical-align: middle;\n  user-select: none;\n  cursor: pointer;\n  margin: 0px;\n  color: #000;\n  font-weight: 300;\n}\n\n.pure-checkbox input[type=checkbox] + label:before {\n  box-sizing: content-box;\n  content: \"\";\n  color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 14px;\n  height: 14px;\n  margin-top: -9px;\n  border: 2px solid #0079FE;\n  text-align: center;\n  transition: all 0.4s ease;\n}\n\n.pure-checkbox input[type=checkbox] + label:after {\n  box-sizing: content-box;\n  content: \"\";\n  background-color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 4px;\n  width: 10px;\n  height: 10px;\n  margin-top: -5px;\n  transform: scale(0);\n  transform-origin: 50%;\n  transition: transform 200ms ease-out;\n}\n\n.pure-checkbox input[type=checkbox]:disabled + label:before {\n  border-color: #cccccc;\n}\n\n.pure-checkbox input[type=checkbox]:disabled:focus + label:before .pure-checkbox input[type=checkbox]:disabled:hover + label:before {\n  background-color: inherit;\n}\n\n.pure-checkbox input[type=checkbox]:disabled:checked + label:before {\n  background-color: #cccccc;\n}\n\n.pure-checkbox input[type=checkbox] + label:after {\n  background-color: transparent;\n  top: 50%;\n  left: 4px;\n  width: 8px;\n  height: 3px;\n  margin-top: -4px;\n  border-style: solid;\n  border-color: #ffffff;\n  border-width: 0 0 3px 3px;\n  border-image: none;\n  transform: rotate(-45deg) scale(0);\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:after {\n  content: \"\";\n  transform: rotate(-45deg) scale(1);\n  transition: transform 200ms ease-out;\n}\n\n.pure-checkbox input[type=radio]:checked + label:before {\n  background-color: white;\n}\n\n.pure-checkbox input[type=radio]:checked + label:after {\n  transform: scale(1);\n}\n\n.pure-checkbox input[type=radio] + label:before {\n  border-radius: 50%;\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:before {\n  background: #0079FE;\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:after {\n  transform: rotate(-45deg) scale(1);\n}\n\n.list-message {\n  text-align: center;\n}\n\n.list-grp {\n  padding: 0 15px !important;\n}\n\n.list-grp h4 {\n  text-transform: capitalize;\n  margin: 15px 0px 0px 0px;\n  font-size: 14px;\n  font-weight: 700;\n}\n\n.list-grp > li {\n  padding-left: 15px !important;\n}\n\n.stackline-dropdown.theme-material,\n.stackline-dropdown.theme-dark,\n.stackline-dropdown.theme-custom {\n  --ms-primary: #3f51b5;\n  --ms-primary-soft: rgba(63, 81, 181, 0.12);\n  --ms-surface: #ffffff;\n  --ms-surface-soft: #f5f7fb;\n  --ms-surface-muted: #e8eaf6;\n  --ms-outline: #c5cae9;\n  --ms-outline-strong: #7986cb;\n  --ms-on-surface: #212121;\n  --ms-on-surface-muted: #5f6368;\n  --ms-chip-bg: #e8eaf6;\n  --ms-chip-text: #303f9f;\n  --ms-chip-remove: #303f9f;\n  --ms-divider: rgba(125, 119, 134, 0.16);\n  --ms-section-bg: rgba(247, 242, 250, 0.76);\n  --ms-selected-text: var(--ms-primary);\n  --ms-shadow: 0 1px 2px rgba(33, 33, 33, 0.16), 0 12px 32px rgba(63, 81, 181, 0.12);\n  --ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, 0.12), 0 4px 12px rgba(33, 33, 33, 0.08);\n  display: block;\n  width: 100%;\n  color: var(--ms-on-surface);\n  font: inherit;\n}\n\n.stackline-dropdown.theme-dark {\n  --ms-primary: #8ab4f8;\n  --ms-primary-soft: rgba(138, 180, 248, 0.18);\n  --ms-surface: #151a23;\n  --ms-surface-soft: #202736;\n  --ms-surface-muted: #111722;\n  --ms-outline: #384456;\n  --ms-outline-strong: #8ab4f8;\n  --ms-on-surface: #edf2f7;\n  --ms-on-surface-muted: #aab6c5;\n  --ms-chip-bg: #263247;\n  --ms-chip-text: #d7e6ff;\n  --ms-chip-remove: #d7e6ff;\n  --ms-divider: rgba(170, 182, 197, 0.18);\n  --ms-section-bg: #101620;\n  --ms-selected-text: #d7e6ff;\n  --ms-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);\n  --ms-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 24px rgba(0, 0, 0, 0.28);\n}\n\n.stackline-dropdown.theme-custom {\n  --ms-primary: var(--stackline-ms-primary, #0f766e);\n  --ms-primary-soft: var(--stackline-ms-primary-soft, rgba(15, 118, 110, 0.14));\n  --ms-surface: var(--stackline-ms-surface, #ffffff);\n  --ms-surface-soft: var(--stackline-ms-surface-soft, #ecfdf5);\n  --ms-surface-muted: var(--stackline-ms-surface-muted, #d1fae5);\n  --ms-outline: var(--stackline-ms-outline, #99f6e4);\n  --ms-outline-strong: var(--stackline-ms-outline-strong, #0f766e);\n  --ms-on-surface: var(--stackline-ms-on-surface, #102a2a);\n  --ms-on-surface-muted: var(--stackline-ms-on-surface-muted, #47615f);\n  --ms-chip-bg: var(--stackline-ms-chip-bg, #ccfbf1);\n  --ms-chip-text: var(--stackline-ms-chip-text, #115e59);\n  --ms-chip-remove: var(--stackline-ms-chip-remove, #115e59);\n  --ms-divider: var(--stackline-ms-divider, rgba(15, 118, 110, 0.16));\n  --ms-section-bg: var(--stackline-ms-section-bg, #f0fdfa);\n  --ms-selected-text: var(--stackline-ms-selected-text, var(--ms-primary));\n  --ms-shadow: var(--stackline-ms-shadow, 0 18px 42px rgba(15, 118, 110, 0.15));\n  --ms-shadow-soft: var(--stackline-ms-shadow-soft, 0 1px 2px rgba(15, 118, 110, 0.16), 0 8px 18px rgba(15, 118, 110, 0.09));\n}\n\n.stackline-dropdown.theme-material .selected-list,\n.stackline-dropdown.theme-dark .selected-list,\n.stackline-dropdown.theme-custom .selected-list {\n  width: 100%;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn,\n.stackline-dropdown.theme-dark .selected-list .c-btn,\n.stackline-dropdown.theme-custom .selected-list .c-btn {\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  gap: 8px;\n  width: 100%;\n  min-height: 56px;\n  padding: 11px 54px 11px 16px;\n  border-radius: 18px;\n  border: 1px solid var(--ms-outline);\n  background: var(--ms-surface);\n  box-shadow: var(--ms-shadow-soft);\n  color: var(--ms-on-surface);\n  cursor: pointer;\n  font-size: inherit;\n  line-height: 1.45;\n  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, transform 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn:hover,\n.stackline-dropdown.theme-dark .selected-list .c-btn:hover,\n.stackline-dropdown.theme-custom .selected-list .c-btn:hover {\n  border-color: var(--ms-outline-strong);\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn.disabled,\n.stackline-dropdown.theme-dark .selected-list .c-btn.disabled,\n.stackline-dropdown.theme-custom .selected-list .c-btn.disabled {\n  background: var(--ms-surface);\n  cursor: not-allowed;\n  opacity: 0.72;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list,\n.stackline-dropdown.theme-dark .selected-list .c-list,\n.stackline-dropdown.theme-custom .selected-list .c-list {\n  display: flex;\n  flex: 1 1 auto;\n  flex-wrap: wrap;\n  gap: 8px;\n  width: auto;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  float: none;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token,\n.stackline-dropdown.theme-dark .selected-list .c-list .c-token,\n.stackline-dropdown.theme-custom .selected-list .c-list .c-token {\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  min-height: 32px;\n  max-width: 100%;\n  padding: 6px 30px 6px 12px;\n  background: var(--ms-chip-bg);\n  color: var(--ms-chip-text);\n  border-radius: 999px;\n  box-shadow: inset 0 0 0 1px rgba(103, 80, 164, 0.08);\n  line-height: 1.35;\n  white-space: normal;\n  overflow-wrap: anywhere;\n  margin: 0;\n  float: none;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token .c-label,\n.stackline-dropdown.theme-dark .selected-list .c-list .c-token .c-label,\n.stackline-dropdown.theme-custom .selected-list .c-list .c-token .c-label {\n  display: inline-flex;\n  align-items: center;\n  float: none;\n  min-width: 0;\n  max-width: 100%;\n  line-height: 1.3;\n  font-weight: 500;\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token .fa-remove,\n.stackline-dropdown.theme-dark .selected-list .c-list .c-token .fa-remove,\n.stackline-dropdown.theme-custom .selected-list .c-list .c-token .fa-remove {\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  margin-left: 0;\n  transform: translateY(-50%);\n  color: var(--ms-chip-remove);\n  cursor: pointer;\n}\n\n.stackline-dropdown.theme-material .selected-list .countplaceholder,\n.stackline-dropdown.theme-dark .selected-list .countplaceholder,\n.stackline-dropdown.theme-custom .selected-list .countplaceholder {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  margin: 0;\n  line-height: 1;\n  color: var(--ms-on-surface-muted);\n  font-size: 0.8rem;\n  font-weight: 600;\n}\n\n.stackline-dropdown.theme-material .selected-list .fa-angle-down,\n.stackline-dropdown.theme-dark .selected-list .fa-angle-down,\n.stackline-dropdown.theme-custom .selected-list .fa-angle-down,\n.stackline-dropdown.theme-material .selected-list .fa-angle-up,\n.stackline-dropdown.theme-dark .selected-list .fa-angle-up,\n.stackline-dropdown.theme-custom .selected-list .fa-angle-up {\n  position: absolute;\n  top: 50%;\n  right: 16px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  transform: translateY(-50%);\n  color: var(--ms-on-surface-muted);\n  font-size: 15pt;\n  pointer-events: none;\n}\n\n.stackline-dropdown.theme-material .dropdown-list,\n.stackline-dropdown.theme-dark .dropdown-list,\n.stackline-dropdown.theme-custom .dropdown-list {\n  position: absolute;\n  width: 100%;\n  padding-top: 8px;\n  z-index: 99999;\n}\n\n.stackline-dropdown.theme-material .arrow-up,\n.stackline-dropdown.theme-dark .arrow-up,\n.stackline-dropdown.theme-custom .arrow-up,\n.stackline-dropdown.theme-material .arrow-down,\n.stackline-dropdown.theme-dark .arrow-down,\n.stackline-dropdown.theme-custom .arrow-down,\n.stackline-dropdown.theme-material .arrow-2,\n.stackline-dropdown.theme-dark .arrow-2,\n.stackline-dropdown.theme-custom .arrow-2 {\n  display: none;\n}\n\n.stackline-dropdown.theme-material .list-area,\n.stackline-dropdown.theme-dark .list-area,\n.stackline-dropdown.theme-custom .list-area {\n  overflow: hidden;\n  border-radius: 22px;\n  background: var(--ms-surface);\n  border: 1px solid var(--ms-outline);\n  box-shadow: var(--ms-shadow);\n  margin: 0;\n}\n\n.stackline-dropdown.theme-material .select-all,\n.stackline-dropdown.theme-dark .select-all,\n.stackline-dropdown.theme-custom .select-all {\n  padding: 10px 14px;\n  border-bottom: 1px solid var(--ms-divider);\n  background: var(--ms-section-bg);\n  text-align: left;\n}\n\n.stackline-dropdown.theme-material .list-filter,\n.stackline-dropdown.theme-dark .list-filter,\n.stackline-dropdown.theme-custom .list-filter {\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-height: 52px;\n  padding-left: 48px;\n  padding-right: 44px;\n  border-bottom: 1px solid var(--ms-divider);\n  background: var(--ms-surface);\n}\n\n.stackline-dropdown.theme-material .list-filter input,\n.stackline-dropdown.theme-dark .list-filter input,\n.stackline-dropdown.theme-custom .list-filter input {\n  width: 100%;\n  height: 100%;\n  border: 0;\n  background: transparent;\n  color: var(--ms-on-surface);\n  font: inherit;\n  padding: 0;\n}\n\n.stackline-dropdown.theme-material .list-filter input::placeholder,\n.stackline-dropdown.theme-dark .list-filter input::placeholder,\n.stackline-dropdown.theme-custom .list-filter input::placeholder {\n  color: var(--ms-on-surface-muted);\n}\n\n.stackline-dropdown.theme-material .list-filter input:focus,\n.stackline-dropdown.theme-dark .list-filter input:focus,\n.stackline-dropdown.theme-custom .list-filter input:focus {\n  outline: none;\n}\n\n.stackline-dropdown.theme-material .list-filter .fa,\n.stackline-dropdown.theme-dark .list-filter .fa,\n.stackline-dropdown.theme-custom .list-filter .fa {\n  position: absolute;\n  top: 50%;\n  left: 16px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  transform: translateY(-50%);\n  color: var(--ms-on-surface-muted);\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul,\n.stackline-dropdown.theme-dark .dropdown-list ul,\n.stackline-dropdown.theme-custom .dropdown-list ul {\n  list-style: none;\n  margin: 0;\n  padding: 8px;\n  overflow: auto;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li,\n.stackline-dropdown.theme-dark .dropdown-list ul li,\n.stackline-dropdown.theme-custom .dropdown-list ul li {\n  align-items: center;\n  min-height: 0;\n  margin: 4px;\n  padding: 12px 14px;\n  border-radius: 14px;\n  cursor: pointer;\n  text-align: left;\n  line-height: 1.35;\n  transition: background-color 0.16s ease, color 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:first-child,\n.stackline-dropdown.theme-dark .dropdown-list ul li:first-child,\n.stackline-dropdown.theme-custom .dropdown-list ul li:first-child {\n  padding-top: 12px;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:last-child,\n.stackline-dropdown.theme-dark .dropdown-list ul li:last-child,\n.stackline-dropdown.theme-custom .dropdown-list ul li:last-child {\n  padding-bottom: 12px;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:hover,\n.stackline-dropdown.theme-dark .dropdown-list ul li:hover,\n.stackline-dropdown.theme-custom .dropdown-list ul li:hover {\n  background: var(--ms-surface-soft);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox,\n.stackline-dropdown.theme-dark .pure-checkbox,\n.stackline-dropdown.theme-custom .pure-checkbox {\n  position: relative;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label {\n  position: relative;\n  display: block;\n  width: 100%;\n  margin: 0;\n  padding-left: 32px;\n  color: inherit;\n  cursor: pointer;\n  font-weight: 500;\n  user-select: none;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label:before {\n  box-sizing: content-box;\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 16px;\n  height: 16px;\n  margin-top: -10px;\n  border: 2px solid var(--ms-outline-strong);\n  border-radius: 5px;\n  background: var(--ms-surface);\n  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label:after,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label:after,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label:after {\n  box-sizing: content-box;\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 5px;\n  width: 8px;\n  height: 3px;\n  margin-top: -4px;\n  border-style: solid;\n  border-color: #ffffff;\n  border-width: 0 0 3px 3px;\n  border-image: none;\n  background: transparent;\n  transform: rotate(-45deg) scale(0);\n  transform-origin: 50%;\n  transition: transform 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:hover + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:hover + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:hover + label:before {\n  border-color: var(--ms-primary);\n  background: var(--ms-surface-soft);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked + label:before {\n  border-color: var(--ms-primary);\n  background: var(--ms-primary);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked + label:after,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked + label:after,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked + label:after {\n  transform: rotate(-45deg) scale(1);\n}\n\n.stackline-dropdown.theme-material .list-message,\n.stackline-dropdown.theme-dark .list-message,\n.stackline-dropdown.theme-custom .list-message {\n  margin: 0;\n  padding: 20px 14px;\n  color: var(--ms-on-surface-muted);\n  text-align: center;\n}\n"],
+                    styles: [".stackline-dropdown {\n  position: relative;\n}\n\n.c-btn {\n  display: inline-block;\n  background: #fff;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 14px;\n  color: #333;\n}\n\n.c-btn.disabled {\n  background: #ccc;\n}\n\n.c-btn:focus {\n  outline: none;\n}\n\n.selected-list .c-list {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  flex-wrap: wrap;\n  min-width: 0;\n  float: none;\n  padding: 0px;\n  margin: 0px;\n  width: auto;\n}\n.selected-list .c-list .c-token {\n  list-style: none;\n  padding: 0px 5px;\n  background: #0079FE;\n  color: #fff;\n  border-radius: 2px;\n  margin-right: 4px;\n  margin-top: 2px;\n  float: left;\n}\n.selected-list .c-list .c-token .c-label {\n  display: block;\n  float: left;\n  /*width: 50px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;*/\n}\n.selected-list .c-list .c-token .fa-remove {\n  margin-left: 1px;\n  font-size: 12px;\n}\n.selected-list .fa-angle-down, .selected-list .fa-angle-up {\n  font-size: 15pt;\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.selected-list .countplaceholder {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  margin: 0 0 0 6px;\n  line-height: 1;\n}\n.selected-list .c-btn {\n  box-sizing: border-box;\n  width: 100%;\n  box-shadow: 0px 1px 5px #959595;\n  padding: 10px 68px 10px 10px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  position: relative;\n}\n\n.dropdown-list {\n  position: absolute;\n  padding-top: 14px;\n  width: 100%;\n  z-index: 9999;\n}\n.dropdown-list ul {\n  padding: 0px;\n  list-style: none;\n  overflow: auto;\n  margin: 0px;\n}\n.dropdown-list ul li {\n  padding: 10px 10px;\n  cursor: pointer;\n  text-align: left;\n}\n.dropdown-list ul li:first-child {\n  padding-top: 10px;\n}\n.dropdown-list ul li:last-child {\n  padding-bottom: 10px;\n}\n.dropdown-list ul li:hover {\n  background: #f5f5f5;\n}\n.dropdown-list ::-webkit-scrollbar {\n  width: 8px;\n}\n.dropdown-list ::-webkit-scrollbar-thumb {\n  background: #cccccc;\n  border-radius: 5px;\n}\n.dropdown-list ::-webkit-scrollbar-track {\n  background: #f2f2f2;\n}\n\n.arrow-up {\n  width: 0;\n  height: 0;\n  border-left: 13px solid transparent;\n  border-right: 13px solid transparent;\n  border-bottom: 15px solid #fff;\n  margin-left: 15px;\n  position: absolute;\n  top: 0;\n}\n\n.arrow-2 {\n  border-bottom: 15px solid #ccc;\n  top: -1px;\n}\n\n.list-area {\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  background: #fff;\n  margin: 0px;\n  box-shadow: 0px 1px 5px #959595;\n}\n\n.select-all {\n  padding: 10px;\n  border-bottom: 1px solid #ccc;\n  text-align: left;\n}\n\n.list-filter {\n  border-bottom: 1px solid #ccc;\n  position: relative;\n}\n.list-filter input {\n  border: 0px;\n  width: 100%;\n  height: 35px;\n  padding: 0px 0px 0px 35px;\n}\n.list-filter input:focus {\n  outline: none;\n}\n.list-filter .fa {\n  position: absolute;\n  top: 10px;\n  left: 13px;\n  color: #888;\n}\n\n.pure-checkbox input[type=checkbox] {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\n.pure-checkbox input[type=checkbox]:focus + label:before,\n.pure-checkbox input[type=checkbox]:hover + label:before {\n  border-color: #0079FE;\n  background-color: #f2f2f2;\n}\n\n.pure-checkbox input[type=checkbox]:active + label:before {\n  transition-duration: 0s;\n}\n\n.pure-checkbox input[type=checkbox] + label {\n  position: relative;\n  padding-left: 2em;\n  vertical-align: middle;\n  user-select: none;\n  cursor: pointer;\n  margin: 0px;\n  color: #000;\n  font-weight: 300;\n}\n\n.pure-checkbox input[type=checkbox] + label:before {\n  box-sizing: content-box;\n  content: \"\";\n  color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 14px;\n  height: 14px;\n  margin-top: -9px;\n  border: 2px solid #0079FE;\n  text-align: center;\n  transition: all 0.4s ease;\n}\n\n.pure-checkbox input[type=checkbox] + label:after {\n  box-sizing: content-box;\n  content: \"\";\n  background-color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 4px;\n  width: 10px;\n  height: 10px;\n  margin-top: -5px;\n  transform: scale(0);\n  transform-origin: 50%;\n  transition: transform 200ms ease-out;\n}\n\n.pure-checkbox input[type=checkbox]:disabled + label:before {\n  border-color: #cccccc;\n}\n\n.pure-checkbox input[type=checkbox]:disabled:focus + label:before .pure-checkbox input[type=checkbox]:disabled:hover + label:before {\n  background-color: inherit;\n}\n\n.pure-checkbox input[type=checkbox]:disabled:checked + label:before {\n  background-color: #cccccc;\n}\n\n.pure-checkbox input[type=checkbox] + label:after {\n  background-color: transparent;\n  top: 50%;\n  left: 4px;\n  width: 8px;\n  height: 3px;\n  margin-top: -4px;\n  border-style: solid;\n  border-color: #ffffff;\n  border-width: 0 0 3px 3px;\n  border-image: none;\n  transform: rotate(-45deg) scale(0);\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:after {\n  content: \"\";\n  transform: rotate(-45deg) scale(1);\n  transition: transform 200ms ease-out;\n}\n\n.pure-checkbox input[type=radio]:checked + label:before {\n  background-color: white;\n}\n\n.pure-checkbox input[type=radio]:checked + label:after {\n  transform: scale(1);\n}\n\n.pure-checkbox input[type=radio] + label:before {\n  border-radius: 50%;\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:before {\n  background: #0079FE;\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:after {\n  transform: rotate(-45deg) scale(1);\n}\n\n.list-message {\n  text-align: center;\n}\n\n.list-grp {\n  padding: 0 15px !important;\n}\n\n.list-grp h4 {\n  text-transform: capitalize;\n  margin: 15px 0px 0px 0px;\n  font-size: 14px;\n  font-weight: 700;\n}\n\n.list-grp > li {\n  padding-left: 15px !important;\n}\n\n.stackline-dropdown.theme-material,\n.stackline-dropdown.theme-dark,\n.stackline-dropdown.theme-custom {\n  --ms-primary: #3f51b5;\n  --ms-primary-soft: rgba(63, 81, 181, 0.12);\n  --ms-surface: #ffffff;\n  --ms-surface-soft: #f5f7fb;\n  --ms-surface-muted: #e8eaf6;\n  --ms-outline: #c5cae9;\n  --ms-outline-strong: #7986cb;\n  --ms-on-surface: #212121;\n  --ms-on-surface-muted: #5f6368;\n  --ms-chip-bg: #e8eaf6;\n  --ms-chip-text: #303f9f;\n  --ms-chip-remove: #303f9f;\n  --ms-divider: rgba(125, 119, 134, 0.16);\n  --ms-section-bg: rgba(247, 242, 250, 0.76);\n  --ms-selected-text: var(--ms-primary);\n  --ms-shadow: 0 1px 2px rgba(33, 33, 33, 0.16), 0 12px 32px rgba(63, 81, 181, 0.12);\n  --ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, 0.12), 0 4px 12px rgba(33, 33, 33, 0.08);\n  display: block;\n  width: 100%;\n  color: var(--ms-on-surface);\n  font: inherit;\n}\n\n.stackline-dropdown.theme-dark {\n  --ms-primary: #8ab4f8;\n  --ms-primary-soft: rgba(138, 180, 248, 0.18);\n  --ms-surface: #151a23;\n  --ms-surface-soft: #202736;\n  --ms-surface-muted: #111722;\n  --ms-outline: #384456;\n  --ms-outline-strong: #8ab4f8;\n  --ms-on-surface: #edf2f7;\n  --ms-on-surface-muted: #aab6c5;\n  --ms-chip-bg: #263247;\n  --ms-chip-text: #d7e6ff;\n  --ms-chip-remove: #d7e6ff;\n  --ms-divider: rgba(170, 182, 197, 0.18);\n  --ms-section-bg: #101620;\n  --ms-selected-text: #d7e6ff;\n  --ms-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);\n  --ms-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 24px rgba(0, 0, 0, 0.28);\n}\n\n.stackline-dropdown.theme-custom {\n  --ms-primary: var(--stackline-ms-primary, #0f766e);\n  --ms-primary-soft: var(--stackline-ms-primary-soft, rgba(15, 118, 110, 0.14));\n  --ms-surface: var(--stackline-ms-surface, #ffffff);\n  --ms-surface-soft: var(--stackline-ms-surface-soft, #ecfdf5);\n  --ms-surface-muted: var(--stackline-ms-surface-muted, #d1fae5);\n  --ms-outline: var(--stackline-ms-outline, #99f6e4);\n  --ms-outline-strong: var(--stackline-ms-outline-strong, #0f766e);\n  --ms-on-surface: var(--stackline-ms-on-surface, #102a2a);\n  --ms-on-surface-muted: var(--stackline-ms-on-surface-muted, #47615f);\n  --ms-chip-bg: var(--stackline-ms-chip-bg, #ccfbf1);\n  --ms-chip-text: var(--stackline-ms-chip-text, #115e59);\n  --ms-chip-remove: var(--stackline-ms-chip-remove, #115e59);\n  --ms-divider: var(--stackline-ms-divider, rgba(15, 118, 110, 0.16));\n  --ms-section-bg: var(--stackline-ms-section-bg, #f0fdfa);\n  --ms-selected-text: var(--stackline-ms-selected-text, var(--ms-primary));\n  --ms-shadow: var(--stackline-ms-shadow, 0 18px 42px rgba(15, 118, 110, 0.15));\n  --ms-shadow-soft: var(--stackline-ms-shadow-soft, 0 1px 2px rgba(15, 118, 110, 0.16), 0 8px 18px rgba(15, 118, 110, 0.09));\n}\n\n.stackline-dropdown.theme-material .selected-list,\n.stackline-dropdown.theme-dark .selected-list,\n.stackline-dropdown.theme-custom .selected-list {\n  width: 100%;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn,\n.stackline-dropdown.theme-dark .selected-list .c-btn,\n.stackline-dropdown.theme-custom .selected-list .c-btn {\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  gap: 8px;\n  width: 100%;\n  min-height: 56px;\n  padding: 11px 84px 11px 16px;\n  border-radius: 18px;\n  border: 1px solid var(--ms-outline);\n  background: var(--ms-surface);\n  box-shadow: var(--ms-shadow-soft);\n  color: var(--ms-on-surface);\n  cursor: pointer;\n  font-size: inherit;\n  line-height: 1.45;\n  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, transform 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn:hover,\n.stackline-dropdown.theme-dark .selected-list .c-btn:hover,\n.stackline-dropdown.theme-custom .selected-list .c-btn:hover {\n  border-color: var(--ms-outline-strong);\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn.disabled,\n.stackline-dropdown.theme-dark .selected-list .c-btn.disabled,\n.stackline-dropdown.theme-custom .selected-list .c-btn.disabled {\n  background: var(--ms-surface);\n  cursor: not-allowed;\n  opacity: 0.72;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list,\n.stackline-dropdown.theme-dark .selected-list .c-list,\n.stackline-dropdown.theme-custom .selected-list .c-list {\n  display: flex;\n  flex: 1 1 auto;\n  flex-wrap: wrap;\n  gap: 8px;\n  width: auto;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  float: none;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token,\n.stackline-dropdown.theme-dark .selected-list .c-list .c-token,\n.stackline-dropdown.theme-custom .selected-list .c-list .c-token {\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  min-height: 32px;\n  max-width: 100%;\n  padding: 6px 30px 6px 12px;\n  background: var(--ms-chip-bg);\n  color: var(--ms-chip-text);\n  border-radius: 999px;\n  box-shadow: inset 0 0 0 1px rgba(103, 80, 164, 0.08);\n  line-height: 1.35;\n  white-space: normal;\n  overflow-wrap: anywhere;\n  margin: 0;\n  float: none;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token .c-label,\n.stackline-dropdown.theme-dark .selected-list .c-list .c-token .c-label,\n.stackline-dropdown.theme-custom .selected-list .c-list .c-token .c-label {\n  display: inline-flex;\n  align-items: center;\n  float: none;\n  min-width: 0;\n  max-width: 100%;\n  line-height: 1.3;\n  font-weight: 500;\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token .fa-remove,\n.stackline-dropdown.theme-dark .selected-list .c-list .c-token .fa-remove,\n.stackline-dropdown.theme-custom .selected-list .c-list .c-token .fa-remove {\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  margin-left: 0;\n  transform: translateY(-50%);\n  color: var(--ms-chip-remove);\n  cursor: pointer;\n}\n\n.stackline-dropdown.theme-material .selected-list .countplaceholder,\n.stackline-dropdown.theme-dark .selected-list .countplaceholder,\n.stackline-dropdown.theme-custom .selected-list .countplaceholder {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  margin: 0;\n  line-height: 1;\n  color: var(--ms-on-surface-muted);\n  font-size: 0.8rem;\n  font-weight: 600;\n}\n\n.stackline-dropdown.theme-material .selected-list .fa-angle-down,\n.stackline-dropdown.theme-dark .selected-list .fa-angle-down,\n.stackline-dropdown.theme-custom .selected-list .fa-angle-down,\n.stackline-dropdown.theme-material .selected-list .fa-angle-up,\n.stackline-dropdown.theme-dark .selected-list .fa-angle-up,\n.stackline-dropdown.theme-custom .selected-list .fa-angle-up {\n  position: absolute;\n  top: 50%;\n  right: 16px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  transform: translateY(-50%);\n  color: var(--ms-on-surface-muted);\n  font-size: 15pt;\n  pointer-events: none;\n}\n\n.stackline-dropdown.theme-material .dropdown-list,\n.stackline-dropdown.theme-dark .dropdown-list,\n.stackline-dropdown.theme-custom .dropdown-list {\n  position: absolute;\n  width: 100%;\n  padding-top: 8px;\n  z-index: 99999;\n}\n\n.stackline-dropdown.theme-material .arrow-up,\n.stackline-dropdown.theme-dark .arrow-up,\n.stackline-dropdown.theme-custom .arrow-up,\n.stackline-dropdown.theme-material .arrow-down,\n.stackline-dropdown.theme-dark .arrow-down,\n.stackline-dropdown.theme-custom .arrow-down,\n.stackline-dropdown.theme-material .arrow-2,\n.stackline-dropdown.theme-dark .arrow-2,\n.stackline-dropdown.theme-custom .arrow-2 {\n  display: none;\n}\n\n.stackline-dropdown.theme-material .list-area,\n.stackline-dropdown.theme-dark .list-area,\n.stackline-dropdown.theme-custom .list-area {\n  overflow: hidden;\n  border-radius: 22px;\n  background: var(--ms-surface);\n  border: 1px solid var(--ms-outline);\n  box-shadow: var(--ms-shadow);\n  margin: 0;\n}\n\n.stackline-dropdown.theme-material .select-all,\n.stackline-dropdown.theme-dark .select-all,\n.stackline-dropdown.theme-custom .select-all {\n  padding: 10px 14px;\n  border-bottom: 1px solid var(--ms-divider);\n  background: var(--ms-section-bg);\n  text-align: left;\n}\n\n.stackline-dropdown.theme-material .list-filter,\n.stackline-dropdown.theme-dark .list-filter,\n.stackline-dropdown.theme-custom .list-filter {\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-height: 52px;\n  padding-left: 48px;\n  padding-right: 44px;\n  border-bottom: 1px solid var(--ms-divider);\n  background: var(--ms-surface);\n}\n\n.stackline-dropdown.theme-material .list-filter input,\n.stackline-dropdown.theme-dark .list-filter input,\n.stackline-dropdown.theme-custom .list-filter input {\n  width: 100%;\n  height: 100%;\n  border: 0;\n  background: transparent;\n  color: var(--ms-on-surface);\n  font: inherit;\n  padding: 0;\n}\n\n.stackline-dropdown.theme-material .list-filter input::placeholder,\n.stackline-dropdown.theme-dark .list-filter input::placeholder,\n.stackline-dropdown.theme-custom .list-filter input::placeholder {\n  color: var(--ms-on-surface-muted);\n}\n\n.stackline-dropdown.theme-material .list-filter input:focus,\n.stackline-dropdown.theme-dark .list-filter input:focus,\n.stackline-dropdown.theme-custom .list-filter input:focus {\n  outline: none;\n}\n\n.stackline-dropdown.theme-material .list-filter .fa,\n.stackline-dropdown.theme-dark .list-filter .fa,\n.stackline-dropdown.theme-custom .list-filter .fa {\n  position: absolute;\n  top: 50%;\n  left: 16px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  transform: translateY(-50%);\n  color: var(--ms-on-surface-muted);\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul,\n.stackline-dropdown.theme-dark .dropdown-list ul,\n.stackline-dropdown.theme-custom .dropdown-list ul {\n  list-style: none;\n  margin: 0;\n  padding: 8px;\n  overflow: auto;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li,\n.stackline-dropdown.theme-dark .dropdown-list ul li,\n.stackline-dropdown.theme-custom .dropdown-list ul li {\n  align-items: center;\n  min-height: 0;\n  margin: 4px;\n  padding: 12px 14px;\n  border-radius: 14px;\n  cursor: pointer;\n  text-align: left;\n  line-height: 1.35;\n  transition: background-color 0.16s ease, color 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:first-child,\n.stackline-dropdown.theme-dark .dropdown-list ul li:first-child,\n.stackline-dropdown.theme-custom .dropdown-list ul li:first-child {\n  padding-top: 12px;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:last-child,\n.stackline-dropdown.theme-dark .dropdown-list ul li:last-child,\n.stackline-dropdown.theme-custom .dropdown-list ul li:last-child {\n  padding-bottom: 12px;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:hover,\n.stackline-dropdown.theme-dark .dropdown-list ul li:hover,\n.stackline-dropdown.theme-custom .dropdown-list ul li:hover {\n  background: var(--ms-surface-soft);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox,\n.stackline-dropdown.theme-dark .pure-checkbox,\n.stackline-dropdown.theme-custom .pure-checkbox {\n  position: relative;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label {\n  position: relative;\n  display: block;\n  width: 100%;\n  margin: 0;\n  padding-left: 32px;\n  color: inherit;\n  cursor: pointer;\n  font-weight: 500;\n  user-select: none;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label:before {\n  box-sizing: content-box;\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 16px;\n  height: 16px;\n  margin-top: -10px;\n  border: 2px solid var(--ms-outline-strong);\n  border-radius: 5px;\n  background: var(--ms-surface);\n  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label:after,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label:after,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label:after {\n  box-sizing: content-box;\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 5px;\n  width: 8px;\n  height: 3px;\n  margin-top: -4px;\n  border-style: solid;\n  border-color: #ffffff;\n  border-width: 0 0 3px 3px;\n  border-image: none;\n  background: transparent;\n  transform: rotate(-45deg) scale(0);\n  transform-origin: 50%;\n  transition: transform 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:hover + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:hover + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:hover + label:before {\n  border-color: var(--ms-primary);\n  background: var(--ms-surface-soft);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked + label:before {\n  border-color: var(--ms-primary);\n  background: var(--ms-primary);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked + label:after,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked + label:after,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked + label:after {\n  transform: rotate(-45deg) scale(1);\n}\n\n.stackline-dropdown.theme-material .list-message,\n.stackline-dropdown.theme-dark .list-message,\n.stackline-dropdown.theme-custom .list-message {\n  margin: 0;\n  padding: 20px 14px;\n  color: var(--ms-on-surface-muted);\n  text-align: center;\n}\n"],
                     providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALIDATION]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { data: [{

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

@@ -225,7 +225,8 @@ class AngularMultiSelect {
             lazyLoading: false,
             labelKey: 'itemName',
             theme: 'classic',
-            skin: 'classic'
+            skin: 'classic',
+        clearAll: true
         };
         this.onTouchedCallback = noop;
         this.onChangeCallback = noop;
@@ -396,6 +397,13 @@ class AngularMultiSelect {
         this.onChangeCallback(this.selectedItems);
         this.onTouchedCallback(this.selectedItems);
     }
+    clearSelection(e) {
+        this.selectedItems = [];
+        this.isSelectAll = false;
+        this.onChangeCallback(this.selectedItems);
+        this.onTouchedCallback(this.selectedItems);
+        this.onDeSelectAll.emit(this.selectedItems);
+    }
     toggleDropdown(evt) {
         if (this.settings.disabled) {
             return false;
@@ -512,14 +520,14 @@ class AngularMultiSelect {
     }
 }
 AngularMultiSelect.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularMultiSelect, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AngularMultiSelect.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AngularMultiSelect, selector: "angular-multiselect, angular2-multiselect", inputs: { data: "data", settings: "settings" }, outputs: { onSelect: "onSelect", onDeSelect: "onDeSelect", onSelectAll: "onSelectAll", onDeSelectAll: "onDeSelectAll", onOpen: "onOpen", onClose: "onClose" }, host: { 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 }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"stackline-dropdown\" [ngClass]=\"getDropdownClasses()\" (clickOutside)=\"closeDropdown()\">\n    <div class=\"selected-list\">\n        <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\n            <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n            <span *ngIf=\"settings.singleSelection\">\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\n                    {{item[settings.labelKey]}}\n                </span>\n            </span>\n            <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\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                    <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\n                </div>\n            </div> \n            <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n            <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n        </div>      \n    </div>\n    <div class=\"dropdown-list\" [hidden]=\"!isActive\">\n    <div class=\"arrow-up arrow-2\"></div>\n    <div class=\"arrow-up\"></div>\n    <div class=\"list-area\">\n        <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\n            <label>\n                <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n                <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n            </label>\n        </div>   \n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && !settings.lazyLoading\">\n            <span class=\"fa fa-search\"></span>\n            <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\n        </div> \n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\n            <span class=\"fa fa-search\"></span>\n            <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\n        </div>\n    <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"lazyContainer\" >\n        <span *ngIf=\"itemTempl\">\n            <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl && !settings.lazyLoading\" >\n        <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label>{{item[settings.labelKey]}}</label>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl && settings.lazyLoading\" >\n            <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\n\n            \n        <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label>{{item[settings.labelKey]}}</label>\n        </li>\n        </div>\n        </span>\n    </ul>\n    <div *ngIf=\"settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n    <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\n        <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\n        <span *ngIf=\"itemTempl\" >\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl\" >\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\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", isInline: true, styles: [".stackline-dropdown{position:relative}.c-btn{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:14px;color:#333}.c-btn.disabled{background:#ccc}.c-btn:focus{outline:none}.selected-list .c-list{display:flex;flex:1 1 auto;align-items:center;flex-wrap:wrap;min-width:0;float:none;padding:0;margin:0;width:auto}.selected-list .c-list .c-token{list-style:none;padding:0 5px;background:#0079FE;color:#fff;border-radius:2px;margin-right:4px;margin-top:2px;float:left}.selected-list .c-list .c-token .c-label{display:block;float:left}.selected-list .c-list .c-token .fa-remove{margin-left:1px;font-size:12px}.selected-list .fa-angle-down,.selected-list .fa-angle-up{font-size:15pt;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.selected-list .countplaceholder{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;align-self:center;margin:0 0 0 6px;line-height:1}.selected-list .c-btn{box-sizing:border-box;width:100%;box-shadow:0 1px 5px #959595;padding:10px 36px 10px 10px;cursor:pointer;display:flex;align-items:center;flex-wrap:nowrap;position:relative}.dropdown-list{position:absolute;padding-top:14px;width:100%;z-index:9999}.dropdown-list ul{padding:0;list-style:none;overflow:auto;margin:0}.dropdown-list ul li{padding:10px;cursor:pointer;text-align:left}.dropdown-list ul li:first-child{padding-top:10px}.dropdown-list ul li:last-child{padding-bottom:10px}.dropdown-list ul li:hover{background:#f5f5f5}.dropdown-list ::-webkit-scrollbar{width:8px}.dropdown-list ::-webkit-scrollbar-thumb{background:#cccccc;border-radius:5px}.dropdown-list ::-webkit-scrollbar-track{background:#f2f2f2}.arrow-up{width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:15px solid #fff;margin-left:15px;position:absolute;top:0}.arrow-2{border-bottom:15px solid #ccc;top:-1px}.list-area{border:1px solid #ccc;border-radius:3px;background:#fff;margin:0;box-shadow:0 1px 5px #959595}.select-all{padding:10px;border-bottom:1px solid #ccc;text-align:left}.list-filter{border-bottom:1px solid #ccc;position:relative}.list-filter input{border:0px;width:100%;height:35px;padding:0 0 0 35px}.list-filter input:focus{outline:none}.list-filter .fa{position:absolute;top:10px;left:13px;color:#888}.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]:focus+label:before,.pure-checkbox input[type=checkbox]:hover+label:before{border-color:#0079fe;background-color:#f2f2f2}.pure-checkbox input[type=checkbox]:active+label:before{transition-duration:0s}.pure-checkbox input[type=checkbox]+label{position:relative;padding-left:2em;vertical-align:middle;-webkit-user-select:none;user-select:none;cursor:pointer;margin:0;color:#000;font-weight:300}.pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";color:#0079fe;position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;border:2px solid #0079FE;text-align:center;transition:all .4s ease}.pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";background-color:#0079fe;position:absolute;top:50%;left:4px;width:10px;height:10px;margin-top:-5px;transform:scale(0);transform-origin:50%;transition:transform .2s ease-out}.pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#ccc}.pure-checkbox input[type=checkbox]:disabled:focus+label:before .pure-checkbox input[type=checkbox]:disabled:hover+label:before{background-color:inherit}.pure-checkbox input[type=checkbox]:disabled:checked+label:before{background-color:#ccc}.pure-checkbox input[type=checkbox]+label:after{background-color:transparent;top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#fff;border-width:0 0 3px 3px;border-image:none;transform:rotate(-45deg) scale(0)}.pure-checkbox input[type=checkbox]:checked+label:after{content:\"\";transform:rotate(-45deg) scale(1);transition:transform .2s ease-out}.pure-checkbox input[type=radio]:checked+label:before{background-color:#fff}.pure-checkbox input[type=radio]:checked+label:after{transform:scale(1)}.pure-checkbox input[type=radio]+label:before{border-radius:50%}.pure-checkbox input[type=checkbox]:checked+label:before{background:#0079FE}.pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.list-message{text-align:center}.list-grp{padding:0 15px!important}.list-grp h4{text-transform:capitalize;margin:15px 0 0;font-size:14px;font-weight:700}.list-grp>li{padding-left:15px!important}.stackline-dropdown.theme-material,.stackline-dropdown.theme-dark,.stackline-dropdown.theme-custom{--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-divider: rgba(125, 119, 134, .16);--ms-section-bg: rgba(247, 242, 250, .76);--ms-selected-text: var(--ms-primary);--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);display:block;width:100%;color:var(--ms-on-surface);font:inherit}.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-divider: rgba(170, 182, 197, .18);--ms-section-bg: #101620;--ms-selected-text: #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-divider: var(--stackline-ms-divider, rgba(15, 118, 110, .16));--ms-section-bg: var(--stackline-ms-section-bg, #f0fdfa);--ms-selected-text: var(--stackline-ms-selected-text, var(--ms-primary));--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-material .selected-list,.stackline-dropdown.theme-dark .selected-list,.stackline-dropdown.theme-custom .selected-list{width:100%}.stackline-dropdown.theme-material .selected-list .c-btn,.stackline-dropdown.theme-dark .selected-list .c-btn,.stackline-dropdown.theme-custom .selected-list .c-btn{position:relative;display:flex;align-items:center;flex-wrap:nowrap;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);color:var(--ms-on-surface);cursor:pointer;font-size:inherit;line-height:1.45;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease,transform .16s ease}.stackline-dropdown.theme-material .selected-list .c-btn:hover,.stackline-dropdown.theme-dark .selected-list .c-btn:hover,.stackline-dropdown.theme-custom .selected-list .c-btn:hover{border-color:var(--ms-outline-strong)}.stackline-dropdown.theme-material .selected-list .c-btn.disabled,.stackline-dropdown.theme-dark .selected-list .c-btn.disabled,.stackline-dropdown.theme-custom .selected-list .c-btn.disabled{background:var(--ms-surface);cursor:not-allowed;opacity:.72}.stackline-dropdown.theme-material .selected-list .c-list,.stackline-dropdown.theme-dark .selected-list .c-list,.stackline-dropdown.theme-custom .selected-list .c-list{display:flex;flex:1 1 auto;flex-wrap:wrap;gap:8px;width:auto;min-width:0;margin:0;padding:0;float:none}.stackline-dropdown.theme-material .selected-list .c-list .c-token,.stackline-dropdown.theme-dark .selected-list .c-list .c-token,.stackline-dropdown.theme-custom .selected-list .c-list .c-token{position:relative;display:inline-block;vertical-align:middle;min-height:32px;max-width:100%;padding:6px 30px 6px 12px;background:var(--ms-chip-bg);color:var(--ms-chip-text);border-radius:999px;box-shadow:inset 0 0 0 1px #6750a414;line-height:1.35;white-space:normal;overflow-wrap:anywhere;margin:0;float:none}.stackline-dropdown.theme-material .selected-list .c-list .c-token .c-label,.stackline-dropdown.theme-dark .selected-list .c-list .c-token .c-label,.stackline-dropdown.theme-custom .selected-list .c-list .c-token .c-label{display:inline-flex;align-items:center;float:none;min-width:0;max-width:100%;line-height:1.3;font-weight:500;white-space:normal;overflow-wrap:anywhere}.stackline-dropdown.theme-material .selected-list .c-list .c-token .fa-remove,.stackline-dropdown.theme-dark .selected-list .c-list .c-token .fa-remove,.stackline-dropdown.theme-custom .selected-list .c-list .c-token .fa-remove{position:absolute;right:10px;top:50%;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:0;transform:translateY(-50%);color:var(--ms-chip-remove);cursor:pointer}.stackline-dropdown.theme-material .selected-list .countplaceholder,.stackline-dropdown.theme-dark .selected-list .countplaceholder,.stackline-dropdown.theme-custom .selected-list .countplaceholder{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;align-self:center;margin:0;line-height:1;color:var(--ms-on-surface-muted);font-size:.8rem;font-weight:600}.stackline-dropdown.theme-material .selected-list .fa-angle-down,.stackline-dropdown.theme-dark .selected-list .fa-angle-down,.stackline-dropdown.theme-custom .selected-list .fa-angle-down,.stackline-dropdown.theme-material .selected-list .fa-angle-up,.stackline-dropdown.theme-dark .selected-list .fa-angle-up,.stackline-dropdown.theme-custom .selected-list .fa-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);font-size:15pt;pointer-events:none}.stackline-dropdown.theme-material .dropdown-list,.stackline-dropdown.theme-dark .dropdown-list,.stackline-dropdown.theme-custom .dropdown-list{position:absolute;width:100%;padding-top:8px;z-index:99999}.stackline-dropdown.theme-material .arrow-up,.stackline-dropdown.theme-dark .arrow-up,.stackline-dropdown.theme-custom .arrow-up,.stackline-dropdown.theme-material .arrow-down,.stackline-dropdown.theme-dark .arrow-down,.stackline-dropdown.theme-custom .arrow-down,.stackline-dropdown.theme-material .arrow-2,.stackline-dropdown.theme-dark .arrow-2,.stackline-dropdown.theme-custom .arrow-2{display:none}.stackline-dropdown.theme-material .list-area,.stackline-dropdown.theme-dark .list-area,.stackline-dropdown.theme-custom .list-area{overflow:hidden;border-radius:22px;background:var(--ms-surface);border:1px solid var(--ms-outline);box-shadow:var(--ms-shadow);margin:0}.stackline-dropdown.theme-material .select-all,.stackline-dropdown.theme-dark .select-all,.stackline-dropdown.theme-custom .select-all{padding:10px 14px;border-bottom:1px solid var(--ms-divider);background:var(--ms-section-bg);text-align:left}.stackline-dropdown.theme-material .list-filter,.stackline-dropdown.theme-dark .list-filter,.stackline-dropdown.theme-custom .list-filter{position:relative;display:flex;align-items:center;min-height:52px;padding-left:48px;padding-right:44px;border-bottom:1px solid var(--ms-divider);background:var(--ms-surface)}.stackline-dropdown.theme-material .list-filter input,.stackline-dropdown.theme-dark .list-filter input,.stackline-dropdown.theme-custom .list-filter input{width:100%;height:100%;border:0;background:transparent;color:var(--ms-on-surface);font:inherit;padding:0}.stackline-dropdown.theme-material .list-filter input::placeholder,.stackline-dropdown.theme-dark .list-filter input::placeholder,.stackline-dropdown.theme-custom .list-filter input::placeholder{color:var(--ms-on-surface-muted)}.stackline-dropdown.theme-material .list-filter input:focus,.stackline-dropdown.theme-dark .list-filter input:focus,.stackline-dropdown.theme-custom .list-filter input:focus{outline:none}.stackline-dropdown.theme-material .list-filter .fa,.stackline-dropdown.theme-dark .list-filter .fa,.stackline-dropdown.theme-custom .list-filter .fa{position:absolute;top:50%;left:16px;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;transform:translateY(-50%);color:var(--ms-on-surface-muted)}.stackline-dropdown.theme-material .dropdown-list ul,.stackline-dropdown.theme-dark .dropdown-list ul,.stackline-dropdown.theme-custom .dropdown-list ul{list-style:none;margin:0;padding:8px;overflow:auto}.stackline-dropdown.theme-material .dropdown-list ul li,.stackline-dropdown.theme-dark .dropdown-list ul li,.stackline-dropdown.theme-custom .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}.stackline-dropdown.theme-material .dropdown-list ul li:first-child,.stackline-dropdown.theme-dark .dropdown-list ul li:first-child,.stackline-dropdown.theme-custom .dropdown-list ul li:first-child{padding-top:12px}.stackline-dropdown.theme-material .dropdown-list ul li:last-child,.stackline-dropdown.theme-dark .dropdown-list ul li:last-child,.stackline-dropdown.theme-custom .dropdown-list ul li:last-child{padding-bottom:12px}.stackline-dropdown.theme-material .dropdown-list ul li:hover,.stackline-dropdown.theme-dark .dropdown-list ul li:hover,.stackline-dropdown.theme-custom .dropdown-list ul li:hover{background:var(--ms-surface-soft)}.stackline-dropdown.theme-material .pure-checkbox,.stackline-dropdown.theme-dark .pure-checkbox,.stackline-dropdown.theme-custom .pure-checkbox{position:relative}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label,.stackline-dropdown.theme-custom .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}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:0;width:16px;height:16px;margin-top:-10px;border:2px solid var(--ms-outline-strong);border-radius:5px;background:var(--ms-surface);transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label:after,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label:after,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:5px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#fff;border-width:0 0 3px 3px;border-image:none;background:transparent;transform:rotate(-45deg) scale(0);transform-origin:50%;transition:transform .16s ease}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:hover+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:hover+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:hover+label:before{border-color:var(--ms-primary);background:var(--ms-surface-soft)}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked+label:before{border-color:var(--ms-primary);background:var(--ms-primary)}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked+label:after,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked+label:after,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.stackline-dropdown.theme-material .list-message,.stackline-dropdown.theme-dark .list-message,.stackline-dropdown.theme-custom .list-message{margin:0;padding:20px 14px;color:var(--ms-on-surface-muted);text-align:center}\n"], components: [{ type: i0.forwardRef(function () { return TemplateRenderer; }), selector: "c-templateRenderer", inputs: ["data", "item"] }], directives: [{ type: i0.forwardRef(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return ClickOutsideDirective; }), selector: "[clickOutside]", outputs: ["clickOutside"] }, { type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0.forwardRef(function () { return i2.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i0.forwardRef(function () { return i2.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { type: i0.forwardRef(function () { return i2.NgModel; }), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i0.forwardRef(function () { return i1.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i0.forwardRef(function () { return styleDirective; }), selector: "[styleProp]", inputs: ["styleProp"] }], pipes: { "listFilter": i0.forwardRef(function () { return ListFilterPipe; }) } });
+AngularMultiSelect.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AngularMultiSelect, selector: "angular-multiselect, angular2-multiselect", inputs: { data: "data", settings: "settings" }, outputs: { onSelect: "onSelect", onDeSelect: "onDeSelect", onSelectAll: "onSelectAll", onDeSelectAll: "onDeSelectAll", onOpen: "onOpen", onClose: "onClose" }, host: { 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 }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"stackline-dropdown\" [ngClass]=\"getDropdownClasses()\" (clickOutside)=\"closeDropdown()\">\n    <div class=\"selected-list\">\n        <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\n            <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n            <span *ngIf=\"settings.singleSelection\">\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\n                    {{item[settings.labelKey]}}\n                </span>\n            </span>\n            <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\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                    <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\n                </div>\n            </div> \n            <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n            <span class=\"fa fa-remove clear-all\" *ngIf=\"settings.clearAll && selectedItems?.length > 0 && !settings.disabled\" (click)=\"clearSelection($event);$event.stopPropagation()\"></span>\n            <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n        </div>      \n    </div>\n    <div class=\"dropdown-list\" [hidden]=\"!isActive\">\n    <div class=\"arrow-up arrow-2\"></div>\n    <div class=\"arrow-up\"></div>\n    <div class=\"list-area\">\n        <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\n            <label>\n                <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n                <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n            </label>\n        </div>   \n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && !settings.lazyLoading\">\n            <span class=\"fa fa-search\"></span>\n            <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\n        </div> \n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\n            <span class=\"fa fa-search\"></span>\n            <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\n        </div>\n    <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"lazyContainer\" >\n        <span *ngIf=\"itemTempl\">\n            <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl && !settings.lazyLoading\" >\n        <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label>{{item[settings.labelKey]}}</label>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl && settings.lazyLoading\" >\n            <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\n\n            \n        <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label>{{item[settings.labelKey]}}</label>\n        </li>\n        </div>\n        </span>\n    </ul>\n    <div *ngIf=\"settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n    <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\n        <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\n        <span *ngIf=\"itemTempl\" >\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl\" >\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\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", isInline: true, styles: [".stackline-dropdown{position:relative}.c-btn{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:14px;color:#333}.c-btn.disabled{background:#ccc}.c-btn:focus{outline:none}.selected-list .c-list{display:flex;flex:1 1 auto;align-items:center;flex-wrap:wrap;min-width:0;float:none;padding:0;margin:0;width:auto}.selected-list .c-list .c-token{list-style:none;padding:0 5px;background:#0079FE;color:#fff;border-radius:2px;margin-right:4px;margin-top:2px;float:left}.selected-list .c-list .c-token .c-label{display:block;float:left}.selected-list .c-list .c-token .fa-remove{margin-left:1px;font-size:12px}.selected-list .fa-angle-down,.selected-list .fa-angle-up{font-size:15pt;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.selected-list .countplaceholder{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;align-self:center;margin:0 0 0 6px;line-height:1}.selected-list .c-btn{box-sizing:border-box;width:100%;box-shadow:0 1px 5px #959595;padding: 10px 68px 10px 10px;cursor:pointer;display:flex;align-items:center;flex-wrap:nowrap;position:relative}.dropdown-list{position:absolute;padding-top:14px;width:100%;z-index:9999}.dropdown-list ul{padding:0;list-style:none;overflow:auto;margin:0}.dropdown-list ul li{padding:10px;cursor:pointer;text-align:left}.dropdown-list ul li:first-child{padding-top:10px}.dropdown-list ul li:last-child{padding-bottom:10px}.dropdown-list ul li:hover{background:#f5f5f5}.dropdown-list ::-webkit-scrollbar{width:8px}.dropdown-list ::-webkit-scrollbar-thumb{background:#cccccc;border-radius:5px}.dropdown-list ::-webkit-scrollbar-track{background:#f2f2f2}.arrow-up{width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:15px solid #fff;margin-left:15px;position:absolute;top:0}.arrow-2{border-bottom:15px solid #ccc;top:-1px}.list-area{border:1px solid #ccc;border-radius:3px;background:#fff;margin:0;box-shadow:0 1px 5px #959595}.select-all{padding:10px;border-bottom:1px solid #ccc;text-align:left}.list-filter{border-bottom:1px solid #ccc;position:relative}.list-filter input{border:0px;width:100%;height:35px;padding:0 0 0 35px}.list-filter input:focus{outline:none}.list-filter .fa{position:absolute;top:10px;left:13px;color:#888}.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]:focus+label:before,.pure-checkbox input[type=checkbox]:hover+label:before{border-color:#0079fe;background-color:#f2f2f2}.pure-checkbox input[type=checkbox]:active+label:before{transition-duration:0s}.pure-checkbox input[type=checkbox]+label{position:relative;padding-left:2em;vertical-align:middle;-webkit-user-select:none;user-select:none;cursor:pointer;margin:0;color:#000;font-weight:300}.pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";color:#0079fe;position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;border:2px solid #0079FE;text-align:center;transition:all .4s ease}.pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";background-color:#0079fe;position:absolute;top:50%;left:4px;width:10px;height:10px;margin-top:-5px;transform:scale(0);transform-origin:50%;transition:transform .2s ease-out}.pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#ccc}.pure-checkbox input[type=checkbox]:disabled:focus+label:before .pure-checkbox input[type=checkbox]:disabled:hover+label:before{background-color:inherit}.pure-checkbox input[type=checkbox]:disabled:checked+label:before{background-color:#ccc}.pure-checkbox input[type=checkbox]+label:after{background-color:transparent;top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#fff;border-width:0 0 3px 3px;border-image:none;transform:rotate(-45deg) scale(0)}.pure-checkbox input[type=checkbox]:checked+label:after{content:\"\";transform:rotate(-45deg) scale(1);transition:transform .2s ease-out}.pure-checkbox input[type=radio]:checked+label:before{background-color:#fff}.pure-checkbox input[type=radio]:checked+label:after{transform:scale(1)}.pure-checkbox input[type=radio]+label:before{border-radius:50%}.pure-checkbox input[type=checkbox]:checked+label:before{background:#0079FE}.pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.list-message{text-align:center}.list-grp{padding:0 15px!important}.list-grp h4{text-transform:capitalize;margin:15px 0 0;font-size:14px;font-weight:700}.list-grp>li{padding-left:15px!important}.stackline-dropdown.theme-material,.stackline-dropdown.theme-dark,.stackline-dropdown.theme-custom{--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-divider: rgba(125, 119, 134, .16);--ms-section-bg: rgba(247, 242, 250, .76);--ms-selected-text: var(--ms-primary);--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);display:block;width:100%;color:var(--ms-on-surface);font:inherit}.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-divider: rgba(170, 182, 197, .18);--ms-section-bg: #101620;--ms-selected-text: #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-divider: var(--stackline-ms-divider, rgba(15, 118, 110, .16));--ms-section-bg: var(--stackline-ms-section-bg, #f0fdfa);--ms-selected-text: var(--stackline-ms-selected-text, var(--ms-primary));--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-material .selected-list,.stackline-dropdown.theme-dark .selected-list,.stackline-dropdown.theme-custom .selected-list{width:100%}.stackline-dropdown.theme-material .selected-list .c-btn,.stackline-dropdown.theme-dark .selected-list .c-btn,.stackline-dropdown.theme-custom .selected-list .c-btn{position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:8px;width:100%;min-height:56px;padding: 11px 84px 11px 16px;border-radius:18px;border:1px solid var(--ms-outline);background:var(--ms-surface);box-shadow:var(--ms-shadow-soft);color:var(--ms-on-surface);cursor:pointer;font-size:inherit;line-height:1.45;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease,transform .16s ease}.stackline-dropdown.theme-material .selected-list .c-btn:hover,.stackline-dropdown.theme-dark .selected-list .c-btn:hover,.stackline-dropdown.theme-custom .selected-list .c-btn:hover{border-color:var(--ms-outline-strong)}.stackline-dropdown.theme-material .selected-list .c-btn.disabled,.stackline-dropdown.theme-dark .selected-list .c-btn.disabled,.stackline-dropdown.theme-custom .selected-list .c-btn.disabled{background:var(--ms-surface);cursor:not-allowed;opacity:.72}.stackline-dropdown.theme-material .selected-list .c-list,.stackline-dropdown.theme-dark .selected-list .c-list,.stackline-dropdown.theme-custom .selected-list .c-list{display:flex;flex:1 1 auto;flex-wrap:wrap;gap:8px;width:auto;min-width:0;margin:0;padding:0;float:none}.stackline-dropdown.theme-material .selected-list .c-list .c-token,.stackline-dropdown.theme-dark .selected-list .c-list .c-token,.stackline-dropdown.theme-custom .selected-list .c-list .c-token{position:relative;display:inline-block;vertical-align:middle;min-height:32px;max-width:100%;padding:6px 30px 6px 12px;background:var(--ms-chip-bg);color:var(--ms-chip-text);border-radius:999px;box-shadow:inset 0 0 0 1px #6750a414;line-height:1.35;white-space:normal;overflow-wrap:anywhere;margin:0;float:none}.stackline-dropdown.theme-material .selected-list .c-list .c-token .c-label,.stackline-dropdown.theme-dark .selected-list .c-list .c-token .c-label,.stackline-dropdown.theme-custom .selected-list .c-list .c-token .c-label{display:inline-flex;align-items:center;float:none;min-width:0;max-width:100%;line-height:1.3;font-weight:500;white-space:normal;overflow-wrap:anywhere}.stackline-dropdown.theme-material .selected-list .c-list .c-token .fa-remove,.stackline-dropdown.theme-dark .selected-list .c-list .c-token .fa-remove,.stackline-dropdown.theme-custom .selected-list .c-list .c-token .fa-remove{position:absolute;right:10px;top:50%;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:0;transform:translateY(-50%);color:var(--ms-chip-remove);cursor:pointer}.stackline-dropdown.theme-material .selected-list .countplaceholder,.stackline-dropdown.theme-dark .selected-list .countplaceholder,.stackline-dropdown.theme-custom .selected-list .countplaceholder{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;align-self:center;margin:0;line-height:1;color:var(--ms-on-surface-muted);font-size:.8rem;font-weight:600}.stackline-dropdown.theme-material .selected-list .fa-angle-down,.stackline-dropdown.theme-dark .selected-list .fa-angle-down,.stackline-dropdown.theme-custom .selected-list .fa-angle-down,.stackline-dropdown.theme-material .selected-list .fa-angle-up,.stackline-dropdown.theme-dark .selected-list .fa-angle-up,.stackline-dropdown.theme-custom .selected-list .fa-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);font-size:15pt;pointer-events:none}.stackline-dropdown.theme-material .dropdown-list,.stackline-dropdown.theme-dark .dropdown-list,.stackline-dropdown.theme-custom .dropdown-list{position:absolute;width:100%;padding-top:8px;z-index:99999}.stackline-dropdown.theme-material .arrow-up,.stackline-dropdown.theme-dark .arrow-up,.stackline-dropdown.theme-custom .arrow-up,.stackline-dropdown.theme-material .arrow-down,.stackline-dropdown.theme-dark .arrow-down,.stackline-dropdown.theme-custom .arrow-down,.stackline-dropdown.theme-material .arrow-2,.stackline-dropdown.theme-dark .arrow-2,.stackline-dropdown.theme-custom .arrow-2{display:none}.stackline-dropdown.theme-material .list-area,.stackline-dropdown.theme-dark .list-area,.stackline-dropdown.theme-custom .list-area{overflow:hidden;border-radius:22px;background:var(--ms-surface);border:1px solid var(--ms-outline);box-shadow:var(--ms-shadow);margin:0}.stackline-dropdown.theme-material .select-all,.stackline-dropdown.theme-dark .select-all,.stackline-dropdown.theme-custom .select-all{padding:10px 14px;border-bottom:1px solid var(--ms-divider);background:var(--ms-section-bg);text-align:left}.stackline-dropdown.theme-material .list-filter,.stackline-dropdown.theme-dark .list-filter,.stackline-dropdown.theme-custom .list-filter{position:relative;display:flex;align-items:center;min-height:52px;padding-left:48px;padding-right:44px;border-bottom:1px solid var(--ms-divider);background:var(--ms-surface)}.stackline-dropdown.theme-material .list-filter input,.stackline-dropdown.theme-dark .list-filter input,.stackline-dropdown.theme-custom .list-filter input{width:100%;height:100%;border:0;background:transparent;color:var(--ms-on-surface);font:inherit;padding:0}.stackline-dropdown.theme-material .list-filter input::placeholder,.stackline-dropdown.theme-dark .list-filter input::placeholder,.stackline-dropdown.theme-custom .list-filter input::placeholder{color:var(--ms-on-surface-muted)}.stackline-dropdown.theme-material .list-filter input:focus,.stackline-dropdown.theme-dark .list-filter input:focus,.stackline-dropdown.theme-custom .list-filter input:focus{outline:none}.stackline-dropdown.theme-material .list-filter .fa,.stackline-dropdown.theme-dark .list-filter .fa,.stackline-dropdown.theme-custom .list-filter .fa{position:absolute;top:50%;left:16px;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;transform:translateY(-50%);color:var(--ms-on-surface-muted)}.stackline-dropdown.theme-material .dropdown-list ul,.stackline-dropdown.theme-dark .dropdown-list ul,.stackline-dropdown.theme-custom .dropdown-list ul{list-style:none;margin:0;padding:8px;overflow:auto}.stackline-dropdown.theme-material .dropdown-list ul li,.stackline-dropdown.theme-dark .dropdown-list ul li,.stackline-dropdown.theme-custom .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}.stackline-dropdown.theme-material .dropdown-list ul li:first-child,.stackline-dropdown.theme-dark .dropdown-list ul li:first-child,.stackline-dropdown.theme-custom .dropdown-list ul li:first-child{padding-top:12px}.stackline-dropdown.theme-material .dropdown-list ul li:last-child,.stackline-dropdown.theme-dark .dropdown-list ul li:last-child,.stackline-dropdown.theme-custom .dropdown-list ul li:last-child{padding-bottom:12px}.stackline-dropdown.theme-material .dropdown-list ul li:hover,.stackline-dropdown.theme-dark .dropdown-list ul li:hover,.stackline-dropdown.theme-custom .dropdown-list ul li:hover{background:var(--ms-surface-soft)}.stackline-dropdown.theme-material .pure-checkbox,.stackline-dropdown.theme-dark .pure-checkbox,.stackline-dropdown.theme-custom .pure-checkbox{position:relative}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label,.stackline-dropdown.theme-custom .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}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:0;width:16px;height:16px;margin-top:-10px;border:2px solid var(--ms-outline-strong);border-radius:5px;background:var(--ms-surface);transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label:after,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label:after,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:5px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#fff;border-width:0 0 3px 3px;border-image:none;background:transparent;transform:rotate(-45deg) scale(0);transform-origin:50%;transition:transform .16s ease}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:hover+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:hover+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:hover+label:before{border-color:var(--ms-primary);background:var(--ms-surface-soft)}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked+label:before{border-color:var(--ms-primary);background:var(--ms-primary)}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked+label:after,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked+label:after,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.stackline-dropdown.theme-material .list-message,.stackline-dropdown.theme-dark .list-message,.stackline-dropdown.theme-custom .list-message{margin:0;padding:20px 14px;color:var(--ms-on-surface-muted);text-align:center}\n"], components: [{ type: i0.forwardRef(function () { return TemplateRenderer; }), selector: "c-templateRenderer", inputs: ["data", "item"] }], directives: [{ type: i0.forwardRef(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return ClickOutsideDirective; }), selector: "[clickOutside]", outputs: ["clickOutside"] }, { type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0.forwardRef(function () { return i2.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i0.forwardRef(function () { return i2.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { type: i0.forwardRef(function () { return i2.NgModel; }), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i0.forwardRef(function () { return i1.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i0.forwardRef(function () { return styleDirective; }), selector: "[styleProp]", inputs: ["styleProp"] }], pipes: { "listFilter": i0.forwardRef(function () { return ListFilterPipe; }) } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularMultiSelect, decorators: [{
             type: Component,
             args: [{
                     selector: 'angular-multiselect, angular2-multiselect',
-                    template: "<div class=\"stackline-dropdown\" [ngClass]=\"getDropdownClasses()\" (clickOutside)=\"closeDropdown()\">\n    <div class=\"selected-list\">\n        <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\n            <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n            <span *ngIf=\"settings.singleSelection\">\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\n                    {{item[settings.labelKey]}}\n                </span>\n            </span>\n            <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\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                    <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\n                </div>\n            </div> \n            <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n            <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n        </div>      \n    </div>\n    <div class=\"dropdown-list\" [hidden]=\"!isActive\">\n    <div class=\"arrow-up arrow-2\"></div>\n    <div class=\"arrow-up\"></div>\n    <div class=\"list-area\">\n        <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\n            <label>\n                <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n                <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n            </label>\n        </div>   \n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && !settings.lazyLoading\">\n            <span class=\"fa fa-search\"></span>\n            <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\n        </div> \n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\n            <span class=\"fa fa-search\"></span>\n            <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\n        </div>\n    <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"lazyContainer\" >\n        <span *ngIf=\"itemTempl\">\n            <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl && !settings.lazyLoading\" >\n        <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label>{{item[settings.labelKey]}}</label>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl && settings.lazyLoading\" >\n            <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\n\n            \n        <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label>{{item[settings.labelKey]}}</label>\n        </li>\n        </div>\n        </span>\n    </ul>\n    <div *ngIf=\"settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n    <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\n        <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\n        <span *ngIf=\"itemTempl\" >\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl\" >\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\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",
+                    template: "<div class=\"stackline-dropdown\" [ngClass]=\"getDropdownClasses()\" (clickOutside)=\"closeDropdown()\">\n    <div class=\"selected-list\">\n        <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\n            <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n            <span *ngIf=\"settings.singleSelection\">\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\n                    {{item[settings.labelKey]}}\n                </span>\n            </span>\n            <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\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                    <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\n                </div>\n            </div> \n            <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n            <span class=\"fa fa-remove clear-all\" *ngIf=\"settings.clearAll && selectedItems?.length > 0 && !settings.disabled\" (click)=\"clearSelection($event);$event.stopPropagation()\"></span>\n            <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n        </div>      \n    </div>\n    <div class=\"dropdown-list\" [hidden]=\"!isActive\">\n    <div class=\"arrow-up arrow-2\"></div>\n    <div class=\"arrow-up\"></div>\n    <div class=\"list-area\">\n        <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\n            <label>\n                <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n                <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n            </label>\n        </div>   \n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && !settings.lazyLoading\">\n            <span class=\"fa fa-search\"></span>\n            <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\n        </div> \n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\n            <span class=\"fa fa-search\"></span>\n            <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\n        </div>\n    <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"lazyContainer\" >\n        <span *ngIf=\"itemTempl\">\n            <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl && !settings.lazyLoading\" >\n        <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label>{{item[settings.labelKey]}}</label>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl && settings.lazyLoading\" >\n            <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\n\n            \n        <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label>{{item[settings.labelKey]}}</label>\n        </li>\n        </div>\n        </span>\n    </ul>\n    <div *ngIf=\"settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n    <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\n        <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\n        <span *ngIf=\"itemTempl\" >\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl\" >\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\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",
                     host: { '[class]': 'defaultSettings.classes' },
-                    styles: [".stackline-dropdown {\n  position: relative;\n}\n\n.c-btn {\n  display: inline-block;\n  background: #fff;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 14px;\n  color: #333;\n}\n\n.c-btn.disabled {\n  background: #ccc;\n}\n\n.c-btn:focus {\n  outline: none;\n}\n\n.selected-list .c-list {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  flex-wrap: wrap;\n  min-width: 0;\n  float: none;\n  padding: 0px;\n  margin: 0px;\n  width: auto;\n}\n.selected-list .c-list .c-token {\n  list-style: none;\n  padding: 0px 5px;\n  background: #0079FE;\n  color: #fff;\n  border-radius: 2px;\n  margin-right: 4px;\n  margin-top: 2px;\n  float: left;\n}\n.selected-list .c-list .c-token .c-label {\n  display: block;\n  float: left;\n  /*width: 50px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;*/\n}\n.selected-list .c-list .c-token .fa-remove {\n  margin-left: 1px;\n  font-size: 12px;\n}\n.selected-list .fa-angle-down, .selected-list .fa-angle-up {\n  font-size: 15pt;\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.selected-list .countplaceholder {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  margin: 0 0 0 6px;\n  line-height: 1;\n}\n.selected-list .c-btn {\n  box-sizing: border-box;\n  width: 100%;\n  box-shadow: 0px 1px 5px #959595;\n  padding: 10px 36px 10px 10px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  position: relative;\n}\n\n.dropdown-list {\n  position: absolute;\n  padding-top: 14px;\n  width: 100%;\n  z-index: 9999;\n}\n.dropdown-list ul {\n  padding: 0px;\n  list-style: none;\n  overflow: auto;\n  margin: 0px;\n}\n.dropdown-list ul li {\n  padding: 10px 10px;\n  cursor: pointer;\n  text-align: left;\n}\n.dropdown-list ul li:first-child {\n  padding-top: 10px;\n}\n.dropdown-list ul li:last-child {\n  padding-bottom: 10px;\n}\n.dropdown-list ul li:hover {\n  background: #f5f5f5;\n}\n.dropdown-list ::-webkit-scrollbar {\n  width: 8px;\n}\n.dropdown-list ::-webkit-scrollbar-thumb {\n  background: #cccccc;\n  border-radius: 5px;\n}\n.dropdown-list ::-webkit-scrollbar-track {\n  background: #f2f2f2;\n}\n\n.arrow-up {\n  width: 0;\n  height: 0;\n  border-left: 13px solid transparent;\n  border-right: 13px solid transparent;\n  border-bottom: 15px solid #fff;\n  margin-left: 15px;\n  position: absolute;\n  top: 0;\n}\n\n.arrow-2 {\n  border-bottom: 15px solid #ccc;\n  top: -1px;\n}\n\n.list-area {\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  background: #fff;\n  margin: 0px;\n  box-shadow: 0px 1px 5px #959595;\n}\n\n.select-all {\n  padding: 10px;\n  border-bottom: 1px solid #ccc;\n  text-align: left;\n}\n\n.list-filter {\n  border-bottom: 1px solid #ccc;\n  position: relative;\n}\n.list-filter input {\n  border: 0px;\n  width: 100%;\n  height: 35px;\n  padding: 0px 0px 0px 35px;\n}\n.list-filter input:focus {\n  outline: none;\n}\n.list-filter .fa {\n  position: absolute;\n  top: 10px;\n  left: 13px;\n  color: #888;\n}\n\n.pure-checkbox input[type=checkbox] {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\n.pure-checkbox input[type=checkbox]:focus + label:before,\n.pure-checkbox input[type=checkbox]:hover + label:before {\n  border-color: #0079FE;\n  background-color: #f2f2f2;\n}\n\n.pure-checkbox input[type=checkbox]:active + label:before {\n  transition-duration: 0s;\n}\n\n.pure-checkbox input[type=checkbox] + label {\n  position: relative;\n  padding-left: 2em;\n  vertical-align: middle;\n  user-select: none;\n  cursor: pointer;\n  margin: 0px;\n  color: #000;\n  font-weight: 300;\n}\n\n.pure-checkbox input[type=checkbox] + label:before {\n  box-sizing: content-box;\n  content: \"\";\n  color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 14px;\n  height: 14px;\n  margin-top: -9px;\n  border: 2px solid #0079FE;\n  text-align: center;\n  transition: all 0.4s ease;\n}\n\n.pure-checkbox input[type=checkbox] + label:after {\n  box-sizing: content-box;\n  content: \"\";\n  background-color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 4px;\n  width: 10px;\n  height: 10px;\n  margin-top: -5px;\n  transform: scale(0);\n  transform-origin: 50%;\n  transition: transform 200ms ease-out;\n}\n\n.pure-checkbox input[type=checkbox]:disabled + label:before {\n  border-color: #cccccc;\n}\n\n.pure-checkbox input[type=checkbox]:disabled:focus + label:before .pure-checkbox input[type=checkbox]:disabled:hover + label:before {\n  background-color: inherit;\n}\n\n.pure-checkbox input[type=checkbox]:disabled:checked + label:before {\n  background-color: #cccccc;\n}\n\n.pure-checkbox input[type=checkbox] + label:after {\n  background-color: transparent;\n  top: 50%;\n  left: 4px;\n  width: 8px;\n  height: 3px;\n  margin-top: -4px;\n  border-style: solid;\n  border-color: #ffffff;\n  border-width: 0 0 3px 3px;\n  border-image: none;\n  transform: rotate(-45deg) scale(0);\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:after {\n  content: \"\";\n  transform: rotate(-45deg) scale(1);\n  transition: transform 200ms ease-out;\n}\n\n.pure-checkbox input[type=radio]:checked + label:before {\n  background-color: white;\n}\n\n.pure-checkbox input[type=radio]:checked + label:after {\n  transform: scale(1);\n}\n\n.pure-checkbox input[type=radio] + label:before {\n  border-radius: 50%;\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:before {\n  background: #0079FE;\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:after {\n  transform: rotate(-45deg) scale(1);\n}\n\n.list-message {\n  text-align: center;\n}\n\n.list-grp {\n  padding: 0 15px !important;\n}\n\n.list-grp h4 {\n  text-transform: capitalize;\n  margin: 15px 0px 0px 0px;\n  font-size: 14px;\n  font-weight: 700;\n}\n\n.list-grp > li {\n  padding-left: 15px !important;\n}\n\n.stackline-dropdown.theme-material,\n.stackline-dropdown.theme-dark,\n.stackline-dropdown.theme-custom {\n  --ms-primary: #3f51b5;\n  --ms-primary-soft: rgba(63, 81, 181, 0.12);\n  --ms-surface: #ffffff;\n  --ms-surface-soft: #f5f7fb;\n  --ms-surface-muted: #e8eaf6;\n  --ms-outline: #c5cae9;\n  --ms-outline-strong: #7986cb;\n  --ms-on-surface: #212121;\n  --ms-on-surface-muted: #5f6368;\n  --ms-chip-bg: #e8eaf6;\n  --ms-chip-text: #303f9f;\n  --ms-chip-remove: #303f9f;\n  --ms-divider: rgba(125, 119, 134, 0.16);\n  --ms-section-bg: rgba(247, 242, 250, 0.76);\n  --ms-selected-text: var(--ms-primary);\n  --ms-shadow: 0 1px 2px rgba(33, 33, 33, 0.16), 0 12px 32px rgba(63, 81, 181, 0.12);\n  --ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, 0.12), 0 4px 12px rgba(33, 33, 33, 0.08);\n  display: block;\n  width: 100%;\n  color: var(--ms-on-surface);\n  font: inherit;\n}\n\n.stackline-dropdown.theme-dark {\n  --ms-primary: #8ab4f8;\n  --ms-primary-soft: rgba(138, 180, 248, 0.18);\n  --ms-surface: #151a23;\n  --ms-surface-soft: #202736;\n  --ms-surface-muted: #111722;\n  --ms-outline: #384456;\n  --ms-outline-strong: #8ab4f8;\n  --ms-on-surface: #edf2f7;\n  --ms-on-surface-muted: #aab6c5;\n  --ms-chip-bg: #263247;\n  --ms-chip-text: #d7e6ff;\n  --ms-chip-remove: #d7e6ff;\n  --ms-divider: rgba(170, 182, 197, 0.18);\n  --ms-section-bg: #101620;\n  --ms-selected-text: #d7e6ff;\n  --ms-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);\n  --ms-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 24px rgba(0, 0, 0, 0.28);\n}\n\n.stackline-dropdown.theme-custom {\n  --ms-primary: var(--stackline-ms-primary, #0f766e);\n  --ms-primary-soft: var(--stackline-ms-primary-soft, rgba(15, 118, 110, 0.14));\n  --ms-surface: var(--stackline-ms-surface, #ffffff);\n  --ms-surface-soft: var(--stackline-ms-surface-soft, #ecfdf5);\n  --ms-surface-muted: var(--stackline-ms-surface-muted, #d1fae5);\n  --ms-outline: var(--stackline-ms-outline, #99f6e4);\n  --ms-outline-strong: var(--stackline-ms-outline-strong, #0f766e);\n  --ms-on-surface: var(--stackline-ms-on-surface, #102a2a);\n  --ms-on-surface-muted: var(--stackline-ms-on-surface-muted, #47615f);\n  --ms-chip-bg: var(--stackline-ms-chip-bg, #ccfbf1);\n  --ms-chip-text: var(--stackline-ms-chip-text, #115e59);\n  --ms-chip-remove: var(--stackline-ms-chip-remove, #115e59);\n  --ms-divider: var(--stackline-ms-divider, rgba(15, 118, 110, 0.16));\n  --ms-section-bg: var(--stackline-ms-section-bg, #f0fdfa);\n  --ms-selected-text: var(--stackline-ms-selected-text, var(--ms-primary));\n  --ms-shadow: var(--stackline-ms-shadow, 0 18px 42px rgba(15, 118, 110, 0.15));\n  --ms-shadow-soft: var(--stackline-ms-shadow-soft, 0 1px 2px rgba(15, 118, 110, 0.16), 0 8px 18px rgba(15, 118, 110, 0.09));\n}\n\n.stackline-dropdown.theme-material .selected-list,\n.stackline-dropdown.theme-dark .selected-list,\n.stackline-dropdown.theme-custom .selected-list {\n  width: 100%;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn,\n.stackline-dropdown.theme-dark .selected-list .c-btn,\n.stackline-dropdown.theme-custom .selected-list .c-btn {\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  gap: 8px;\n  width: 100%;\n  min-height: 56px;\n  padding: 11px 54px 11px 16px;\n  border-radius: 18px;\n  border: 1px solid var(--ms-outline);\n  background: var(--ms-surface);\n  box-shadow: var(--ms-shadow-soft);\n  color: var(--ms-on-surface);\n  cursor: pointer;\n  font-size: inherit;\n  line-height: 1.45;\n  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, transform 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn:hover,\n.stackline-dropdown.theme-dark .selected-list .c-btn:hover,\n.stackline-dropdown.theme-custom .selected-list .c-btn:hover {\n  border-color: var(--ms-outline-strong);\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn.disabled,\n.stackline-dropdown.theme-dark .selected-list .c-btn.disabled,\n.stackline-dropdown.theme-custom .selected-list .c-btn.disabled {\n  background: var(--ms-surface);\n  cursor: not-allowed;\n  opacity: 0.72;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list,\n.stackline-dropdown.theme-dark .selected-list .c-list,\n.stackline-dropdown.theme-custom .selected-list .c-list {\n  display: flex;\n  flex: 1 1 auto;\n  flex-wrap: wrap;\n  gap: 8px;\n  width: auto;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  float: none;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token,\n.stackline-dropdown.theme-dark .selected-list .c-list .c-token,\n.stackline-dropdown.theme-custom .selected-list .c-list .c-token {\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  min-height: 32px;\n  max-width: 100%;\n  padding: 6px 30px 6px 12px;\n  background: var(--ms-chip-bg);\n  color: var(--ms-chip-text);\n  border-radius: 999px;\n  box-shadow: inset 0 0 0 1px rgba(103, 80, 164, 0.08);\n  line-height: 1.35;\n  white-space: normal;\n  overflow-wrap: anywhere;\n  margin: 0;\n  float: none;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token .c-label,\n.stackline-dropdown.theme-dark .selected-list .c-list .c-token .c-label,\n.stackline-dropdown.theme-custom .selected-list .c-list .c-token .c-label {\n  display: inline-flex;\n  align-items: center;\n  float: none;\n  min-width: 0;\n  max-width: 100%;\n  line-height: 1.3;\n  font-weight: 500;\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token .fa-remove,\n.stackline-dropdown.theme-dark .selected-list .c-list .c-token .fa-remove,\n.stackline-dropdown.theme-custom .selected-list .c-list .c-token .fa-remove {\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  margin-left: 0;\n  transform: translateY(-50%);\n  color: var(--ms-chip-remove);\n  cursor: pointer;\n}\n\n.stackline-dropdown.theme-material .selected-list .countplaceholder,\n.stackline-dropdown.theme-dark .selected-list .countplaceholder,\n.stackline-dropdown.theme-custom .selected-list .countplaceholder {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  margin: 0;\n  line-height: 1;\n  color: var(--ms-on-surface-muted);\n  font-size: 0.8rem;\n  font-weight: 600;\n}\n\n.stackline-dropdown.theme-material .selected-list .fa-angle-down,\n.stackline-dropdown.theme-dark .selected-list .fa-angle-down,\n.stackline-dropdown.theme-custom .selected-list .fa-angle-down,\n.stackline-dropdown.theme-material .selected-list .fa-angle-up,\n.stackline-dropdown.theme-dark .selected-list .fa-angle-up,\n.stackline-dropdown.theme-custom .selected-list .fa-angle-up {\n  position: absolute;\n  top: 50%;\n  right: 16px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  transform: translateY(-50%);\n  color: var(--ms-on-surface-muted);\n  font-size: 15pt;\n  pointer-events: none;\n}\n\n.stackline-dropdown.theme-material .dropdown-list,\n.stackline-dropdown.theme-dark .dropdown-list,\n.stackline-dropdown.theme-custom .dropdown-list {\n  position: absolute;\n  width: 100%;\n  padding-top: 8px;\n  z-index: 99999;\n}\n\n.stackline-dropdown.theme-material .arrow-up,\n.stackline-dropdown.theme-dark .arrow-up,\n.stackline-dropdown.theme-custom .arrow-up,\n.stackline-dropdown.theme-material .arrow-down,\n.stackline-dropdown.theme-dark .arrow-down,\n.stackline-dropdown.theme-custom .arrow-down,\n.stackline-dropdown.theme-material .arrow-2,\n.stackline-dropdown.theme-dark .arrow-2,\n.stackline-dropdown.theme-custom .arrow-2 {\n  display: none;\n}\n\n.stackline-dropdown.theme-material .list-area,\n.stackline-dropdown.theme-dark .list-area,\n.stackline-dropdown.theme-custom .list-area {\n  overflow: hidden;\n  border-radius: 22px;\n  background: var(--ms-surface);\n  border: 1px solid var(--ms-outline);\n  box-shadow: var(--ms-shadow);\n  margin: 0;\n}\n\n.stackline-dropdown.theme-material .select-all,\n.stackline-dropdown.theme-dark .select-all,\n.stackline-dropdown.theme-custom .select-all {\n  padding: 10px 14px;\n  border-bottom: 1px solid var(--ms-divider);\n  background: var(--ms-section-bg);\n  text-align: left;\n}\n\n.stackline-dropdown.theme-material .list-filter,\n.stackline-dropdown.theme-dark .list-filter,\n.stackline-dropdown.theme-custom .list-filter {\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-height: 52px;\n  padding-left: 48px;\n  padding-right: 44px;\n  border-bottom: 1px solid var(--ms-divider);\n  background: var(--ms-surface);\n}\n\n.stackline-dropdown.theme-material .list-filter input,\n.stackline-dropdown.theme-dark .list-filter input,\n.stackline-dropdown.theme-custom .list-filter input {\n  width: 100%;\n  height: 100%;\n  border: 0;\n  background: transparent;\n  color: var(--ms-on-surface);\n  font: inherit;\n  padding: 0;\n}\n\n.stackline-dropdown.theme-material .list-filter input::placeholder,\n.stackline-dropdown.theme-dark .list-filter input::placeholder,\n.stackline-dropdown.theme-custom .list-filter input::placeholder {\n  color: var(--ms-on-surface-muted);\n}\n\n.stackline-dropdown.theme-material .list-filter input:focus,\n.stackline-dropdown.theme-dark .list-filter input:focus,\n.stackline-dropdown.theme-custom .list-filter input:focus {\n  outline: none;\n}\n\n.stackline-dropdown.theme-material .list-filter .fa,\n.stackline-dropdown.theme-dark .list-filter .fa,\n.stackline-dropdown.theme-custom .list-filter .fa {\n  position: absolute;\n  top: 50%;\n  left: 16px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  transform: translateY(-50%);\n  color: var(--ms-on-surface-muted);\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul,\n.stackline-dropdown.theme-dark .dropdown-list ul,\n.stackline-dropdown.theme-custom .dropdown-list ul {\n  list-style: none;\n  margin: 0;\n  padding: 8px;\n  overflow: auto;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li,\n.stackline-dropdown.theme-dark .dropdown-list ul li,\n.stackline-dropdown.theme-custom .dropdown-list ul li {\n  align-items: center;\n  min-height: 0;\n  margin: 4px;\n  padding: 12px 14px;\n  border-radius: 14px;\n  cursor: pointer;\n  text-align: left;\n  line-height: 1.35;\n  transition: background-color 0.16s ease, color 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:first-child,\n.stackline-dropdown.theme-dark .dropdown-list ul li:first-child,\n.stackline-dropdown.theme-custom .dropdown-list ul li:first-child {\n  padding-top: 12px;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:last-child,\n.stackline-dropdown.theme-dark .dropdown-list ul li:last-child,\n.stackline-dropdown.theme-custom .dropdown-list ul li:last-child {\n  padding-bottom: 12px;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:hover,\n.stackline-dropdown.theme-dark .dropdown-list ul li:hover,\n.stackline-dropdown.theme-custom .dropdown-list ul li:hover {\n  background: var(--ms-surface-soft);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox,\n.stackline-dropdown.theme-dark .pure-checkbox,\n.stackline-dropdown.theme-custom .pure-checkbox {\n  position: relative;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label {\n  position: relative;\n  display: block;\n  width: 100%;\n  margin: 0;\n  padding-left: 32px;\n  color: inherit;\n  cursor: pointer;\n  font-weight: 500;\n  user-select: none;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label:before {\n  box-sizing: content-box;\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 16px;\n  height: 16px;\n  margin-top: -10px;\n  border: 2px solid var(--ms-outline-strong);\n  border-radius: 5px;\n  background: var(--ms-surface);\n  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label:after,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label:after,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label:after {\n  box-sizing: content-box;\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 5px;\n  width: 8px;\n  height: 3px;\n  margin-top: -4px;\n  border-style: solid;\n  border-color: #ffffff;\n  border-width: 0 0 3px 3px;\n  border-image: none;\n  background: transparent;\n  transform: rotate(-45deg) scale(0);\n  transform-origin: 50%;\n  transition: transform 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:hover + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:hover + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:hover + label:before {\n  border-color: var(--ms-primary);\n  background: var(--ms-surface-soft);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked + label:before {\n  border-color: var(--ms-primary);\n  background: var(--ms-primary);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked + label:after,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked + label:after,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked + label:after {\n  transform: rotate(-45deg) scale(1);\n}\n\n.stackline-dropdown.theme-material .list-message,\n.stackline-dropdown.theme-dark .list-message,\n.stackline-dropdown.theme-custom .list-message {\n  margin: 0;\n  padding: 20px 14px;\n  color: var(--ms-on-surface-muted);\n  text-align: center;\n}\n"],
+                    styles: [".stackline-dropdown {\n  position: relative;\n}\n\n.c-btn {\n  display: inline-block;\n  background: #fff;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 14px;\n  color: #333;\n}\n\n.c-btn.disabled {\n  background: #ccc;\n}\n\n.c-btn:focus {\n  outline: none;\n}\n\n.selected-list .c-list {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  flex-wrap: wrap;\n  min-width: 0;\n  float: none;\n  padding: 0px;\n  margin: 0px;\n  width: auto;\n}\n.selected-list .c-list .c-token {\n  list-style: none;\n  padding: 0px 5px;\n  background: #0079FE;\n  color: #fff;\n  border-radius: 2px;\n  margin-right: 4px;\n  margin-top: 2px;\n  float: left;\n}\n.selected-list .c-list .c-token .c-label {\n  display: block;\n  float: left;\n  /*width: 50px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;*/\n}\n.selected-list .c-list .c-token .fa-remove {\n  margin-left: 1px;\n  font-size: 12px;\n}\n.selected-list .fa-angle-down, .selected-list .fa-angle-up {\n  font-size: 15pt;\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.selected-list .countplaceholder {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  margin: 0 0 0 6px;\n  line-height: 1;\n}\n.selected-list .c-btn {\n  box-sizing: border-box;\n  width: 100%;\n  box-shadow: 0px 1px 5px #959595;\n  padding: 10px 68px 10px 10px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  position: relative;\n}\n\n.dropdown-list {\n  position: absolute;\n  padding-top: 14px;\n  width: 100%;\n  z-index: 9999;\n}\n.dropdown-list ul {\n  padding: 0px;\n  list-style: none;\n  overflow: auto;\n  margin: 0px;\n}\n.dropdown-list ul li {\n  padding: 10px 10px;\n  cursor: pointer;\n  text-align: left;\n}\n.dropdown-list ul li:first-child {\n  padding-top: 10px;\n}\n.dropdown-list ul li:last-child {\n  padding-bottom: 10px;\n}\n.dropdown-list ul li:hover {\n  background: #f5f5f5;\n}\n.dropdown-list ::-webkit-scrollbar {\n  width: 8px;\n}\n.dropdown-list ::-webkit-scrollbar-thumb {\n  background: #cccccc;\n  border-radius: 5px;\n}\n.dropdown-list ::-webkit-scrollbar-track {\n  background: #f2f2f2;\n}\n\n.arrow-up {\n  width: 0;\n  height: 0;\n  border-left: 13px solid transparent;\n  border-right: 13px solid transparent;\n  border-bottom: 15px solid #fff;\n  margin-left: 15px;\n  position: absolute;\n  top: 0;\n}\n\n.arrow-2 {\n  border-bottom: 15px solid #ccc;\n  top: -1px;\n}\n\n.list-area {\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  background: #fff;\n  margin: 0px;\n  box-shadow: 0px 1px 5px #959595;\n}\n\n.select-all {\n  padding: 10px;\n  border-bottom: 1px solid #ccc;\n  text-align: left;\n}\n\n.list-filter {\n  border-bottom: 1px solid #ccc;\n  position: relative;\n}\n.list-filter input {\n  border: 0px;\n  width: 100%;\n  height: 35px;\n  padding: 0px 0px 0px 35px;\n}\n.list-filter input:focus {\n  outline: none;\n}\n.list-filter .fa {\n  position: absolute;\n  top: 10px;\n  left: 13px;\n  color: #888;\n}\n\n.pure-checkbox input[type=checkbox] {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\n.pure-checkbox input[type=checkbox]:focus + label:before,\n.pure-checkbox input[type=checkbox]:hover + label:before {\n  border-color: #0079FE;\n  background-color: #f2f2f2;\n}\n\n.pure-checkbox input[type=checkbox]:active + label:before {\n  transition-duration: 0s;\n}\n\n.pure-checkbox input[type=checkbox] + label {\n  position: relative;\n  padding-left: 2em;\n  vertical-align: middle;\n  user-select: none;\n  cursor: pointer;\n  margin: 0px;\n  color: #000;\n  font-weight: 300;\n}\n\n.pure-checkbox input[type=checkbox] + label:before {\n  box-sizing: content-box;\n  content: \"\";\n  color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 14px;\n  height: 14px;\n  margin-top: -9px;\n  border: 2px solid #0079FE;\n  text-align: center;\n  transition: all 0.4s ease;\n}\n\n.pure-checkbox input[type=checkbox] + label:after {\n  box-sizing: content-box;\n  content: \"\";\n  background-color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 4px;\n  width: 10px;\n  height: 10px;\n  margin-top: -5px;\n  transform: scale(0);\n  transform-origin: 50%;\n  transition: transform 200ms ease-out;\n}\n\n.pure-checkbox input[type=checkbox]:disabled + label:before {\n  border-color: #cccccc;\n}\n\n.pure-checkbox input[type=checkbox]:disabled:focus + label:before .pure-checkbox input[type=checkbox]:disabled:hover + label:before {\n  background-color: inherit;\n}\n\n.pure-checkbox input[type=checkbox]:disabled:checked + label:before {\n  background-color: #cccccc;\n}\n\n.pure-checkbox input[type=checkbox] + label:after {\n  background-color: transparent;\n  top: 50%;\n  left: 4px;\n  width: 8px;\n  height: 3px;\n  margin-top: -4px;\n  border-style: solid;\n  border-color: #ffffff;\n  border-width: 0 0 3px 3px;\n  border-image: none;\n  transform: rotate(-45deg) scale(0);\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:after {\n  content: \"\";\n  transform: rotate(-45deg) scale(1);\n  transition: transform 200ms ease-out;\n}\n\n.pure-checkbox input[type=radio]:checked + label:before {\n  background-color: white;\n}\n\n.pure-checkbox input[type=radio]:checked + label:after {\n  transform: scale(1);\n}\n\n.pure-checkbox input[type=radio] + label:before {\n  border-radius: 50%;\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:before {\n  background: #0079FE;\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:after {\n  transform: rotate(-45deg) scale(1);\n}\n\n.list-message {\n  text-align: center;\n}\n\n.list-grp {\n  padding: 0 15px !important;\n}\n\n.list-grp h4 {\n  text-transform: capitalize;\n  margin: 15px 0px 0px 0px;\n  font-size: 14px;\n  font-weight: 700;\n}\n\n.list-grp > li {\n  padding-left: 15px !important;\n}\n\n.stackline-dropdown.theme-material,\n.stackline-dropdown.theme-dark,\n.stackline-dropdown.theme-custom {\n  --ms-primary: #3f51b5;\n  --ms-primary-soft: rgba(63, 81, 181, 0.12);\n  --ms-surface: #ffffff;\n  --ms-surface-soft: #f5f7fb;\n  --ms-surface-muted: #e8eaf6;\n  --ms-outline: #c5cae9;\n  --ms-outline-strong: #7986cb;\n  --ms-on-surface: #212121;\n  --ms-on-surface-muted: #5f6368;\n  --ms-chip-bg: #e8eaf6;\n  --ms-chip-text: #303f9f;\n  --ms-chip-remove: #303f9f;\n  --ms-divider: rgba(125, 119, 134, 0.16);\n  --ms-section-bg: rgba(247, 242, 250, 0.76);\n  --ms-selected-text: var(--ms-primary);\n  --ms-shadow: 0 1px 2px rgba(33, 33, 33, 0.16), 0 12px 32px rgba(63, 81, 181, 0.12);\n  --ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, 0.12), 0 4px 12px rgba(33, 33, 33, 0.08);\n  display: block;\n  width: 100%;\n  color: var(--ms-on-surface);\n  font: inherit;\n}\n\n.stackline-dropdown.theme-dark {\n  --ms-primary: #8ab4f8;\n  --ms-primary-soft: rgba(138, 180, 248, 0.18);\n  --ms-surface: #151a23;\n  --ms-surface-soft: #202736;\n  --ms-surface-muted: #111722;\n  --ms-outline: #384456;\n  --ms-outline-strong: #8ab4f8;\n  --ms-on-surface: #edf2f7;\n  --ms-on-surface-muted: #aab6c5;\n  --ms-chip-bg: #263247;\n  --ms-chip-text: #d7e6ff;\n  --ms-chip-remove: #d7e6ff;\n  --ms-divider: rgba(170, 182, 197, 0.18);\n  --ms-section-bg: #101620;\n  --ms-selected-text: #d7e6ff;\n  --ms-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);\n  --ms-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 24px rgba(0, 0, 0, 0.28);\n}\n\n.stackline-dropdown.theme-custom {\n  --ms-primary: var(--stackline-ms-primary, #0f766e);\n  --ms-primary-soft: var(--stackline-ms-primary-soft, rgba(15, 118, 110, 0.14));\n  --ms-surface: var(--stackline-ms-surface, #ffffff);\n  --ms-surface-soft: var(--stackline-ms-surface-soft, #ecfdf5);\n  --ms-surface-muted: var(--stackline-ms-surface-muted, #d1fae5);\n  --ms-outline: var(--stackline-ms-outline, #99f6e4);\n  --ms-outline-strong: var(--stackline-ms-outline-strong, #0f766e);\n  --ms-on-surface: var(--stackline-ms-on-surface, #102a2a);\n  --ms-on-surface-muted: var(--stackline-ms-on-surface-muted, #47615f);\n  --ms-chip-bg: var(--stackline-ms-chip-bg, #ccfbf1);\n  --ms-chip-text: var(--stackline-ms-chip-text, #115e59);\n  --ms-chip-remove: var(--stackline-ms-chip-remove, #115e59);\n  --ms-divider: var(--stackline-ms-divider, rgba(15, 118, 110, 0.16));\n  --ms-section-bg: var(--stackline-ms-section-bg, #f0fdfa);\n  --ms-selected-text: var(--stackline-ms-selected-text, var(--ms-primary));\n  --ms-shadow: var(--stackline-ms-shadow, 0 18px 42px rgba(15, 118, 110, 0.15));\n  --ms-shadow-soft: var(--stackline-ms-shadow-soft, 0 1px 2px rgba(15, 118, 110, 0.16), 0 8px 18px rgba(15, 118, 110, 0.09));\n}\n\n.stackline-dropdown.theme-material .selected-list,\n.stackline-dropdown.theme-dark .selected-list,\n.stackline-dropdown.theme-custom .selected-list {\n  width: 100%;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn,\n.stackline-dropdown.theme-dark .selected-list .c-btn,\n.stackline-dropdown.theme-custom .selected-list .c-btn {\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  gap: 8px;\n  width: 100%;\n  min-height: 56px;\n  padding: 11px 84px 11px 16px;\n  border-radius: 18px;\n  border: 1px solid var(--ms-outline);\n  background: var(--ms-surface);\n  box-shadow: var(--ms-shadow-soft);\n  color: var(--ms-on-surface);\n  cursor: pointer;\n  font-size: inherit;\n  line-height: 1.45;\n  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, transform 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn:hover,\n.stackline-dropdown.theme-dark .selected-list .c-btn:hover,\n.stackline-dropdown.theme-custom .selected-list .c-btn:hover {\n  border-color: var(--ms-outline-strong);\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn.disabled,\n.stackline-dropdown.theme-dark .selected-list .c-btn.disabled,\n.stackline-dropdown.theme-custom .selected-list .c-btn.disabled {\n  background: var(--ms-surface);\n  cursor: not-allowed;\n  opacity: 0.72;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list,\n.stackline-dropdown.theme-dark .selected-list .c-list,\n.stackline-dropdown.theme-custom .selected-list .c-list {\n  display: flex;\n  flex: 1 1 auto;\n  flex-wrap: wrap;\n  gap: 8px;\n  width: auto;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  float: none;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token,\n.stackline-dropdown.theme-dark .selected-list .c-list .c-token,\n.stackline-dropdown.theme-custom .selected-list .c-list .c-token {\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  min-height: 32px;\n  max-width: 100%;\n  padding: 6px 30px 6px 12px;\n  background: var(--ms-chip-bg);\n  color: var(--ms-chip-text);\n  border-radius: 999px;\n  box-shadow: inset 0 0 0 1px rgba(103, 80, 164, 0.08);\n  line-height: 1.35;\n  white-space: normal;\n  overflow-wrap: anywhere;\n  margin: 0;\n  float: none;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token .c-label,\n.stackline-dropdown.theme-dark .selected-list .c-list .c-token .c-label,\n.stackline-dropdown.theme-custom .selected-list .c-list .c-token .c-label {\n  display: inline-flex;\n  align-items: center;\n  float: none;\n  min-width: 0;\n  max-width: 100%;\n  line-height: 1.3;\n  font-weight: 500;\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token .fa-remove,\n.stackline-dropdown.theme-dark .selected-list .c-list .c-token .fa-remove,\n.stackline-dropdown.theme-custom .selected-list .c-list .c-token .fa-remove {\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  margin-left: 0;\n  transform: translateY(-50%);\n  color: var(--ms-chip-remove);\n  cursor: pointer;\n}\n\n.stackline-dropdown.theme-material .selected-list .countplaceholder,\n.stackline-dropdown.theme-dark .selected-list .countplaceholder,\n.stackline-dropdown.theme-custom .selected-list .countplaceholder {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  margin: 0;\n  line-height: 1;\n  color: var(--ms-on-surface-muted);\n  font-size: 0.8rem;\n  font-weight: 600;\n}\n\n.stackline-dropdown.theme-material .selected-list .fa-angle-down,\n.stackline-dropdown.theme-dark .selected-list .fa-angle-down,\n.stackline-dropdown.theme-custom .selected-list .fa-angle-down,\n.stackline-dropdown.theme-material .selected-list .fa-angle-up,\n.stackline-dropdown.theme-dark .selected-list .fa-angle-up,\n.stackline-dropdown.theme-custom .selected-list .fa-angle-up {\n  position: absolute;\n  top: 50%;\n  right: 16px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  transform: translateY(-50%);\n  color: var(--ms-on-surface-muted);\n  font-size: 15pt;\n  pointer-events: none;\n}\n\n.stackline-dropdown.theme-material .dropdown-list,\n.stackline-dropdown.theme-dark .dropdown-list,\n.stackline-dropdown.theme-custom .dropdown-list {\n  position: absolute;\n  width: 100%;\n  padding-top: 8px;\n  z-index: 99999;\n}\n\n.stackline-dropdown.theme-material .arrow-up,\n.stackline-dropdown.theme-dark .arrow-up,\n.stackline-dropdown.theme-custom .arrow-up,\n.stackline-dropdown.theme-material .arrow-down,\n.stackline-dropdown.theme-dark .arrow-down,\n.stackline-dropdown.theme-custom .arrow-down,\n.stackline-dropdown.theme-material .arrow-2,\n.stackline-dropdown.theme-dark .arrow-2,\n.stackline-dropdown.theme-custom .arrow-2 {\n  display: none;\n}\n\n.stackline-dropdown.theme-material .list-area,\n.stackline-dropdown.theme-dark .list-area,\n.stackline-dropdown.theme-custom .list-area {\n  overflow: hidden;\n  border-radius: 22px;\n  background: var(--ms-surface);\n  border: 1px solid var(--ms-outline);\n  box-shadow: var(--ms-shadow);\n  margin: 0;\n}\n\n.stackline-dropdown.theme-material .select-all,\n.stackline-dropdown.theme-dark .select-all,\n.stackline-dropdown.theme-custom .select-all {\n  padding: 10px 14px;\n  border-bottom: 1px solid var(--ms-divider);\n  background: var(--ms-section-bg);\n  text-align: left;\n}\n\n.stackline-dropdown.theme-material .list-filter,\n.stackline-dropdown.theme-dark .list-filter,\n.stackline-dropdown.theme-custom .list-filter {\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-height: 52px;\n  padding-left: 48px;\n  padding-right: 44px;\n  border-bottom: 1px solid var(--ms-divider);\n  background: var(--ms-surface);\n}\n\n.stackline-dropdown.theme-material .list-filter input,\n.stackline-dropdown.theme-dark .list-filter input,\n.stackline-dropdown.theme-custom .list-filter input {\n  width: 100%;\n  height: 100%;\n  border: 0;\n  background: transparent;\n  color: var(--ms-on-surface);\n  font: inherit;\n  padding: 0;\n}\n\n.stackline-dropdown.theme-material .list-filter input::placeholder,\n.stackline-dropdown.theme-dark .list-filter input::placeholder,\n.stackline-dropdown.theme-custom .list-filter input::placeholder {\n  color: var(--ms-on-surface-muted);\n}\n\n.stackline-dropdown.theme-material .list-filter input:focus,\n.stackline-dropdown.theme-dark .list-filter input:focus,\n.stackline-dropdown.theme-custom .list-filter input:focus {\n  outline: none;\n}\n\n.stackline-dropdown.theme-material .list-filter .fa,\n.stackline-dropdown.theme-dark .list-filter .fa,\n.stackline-dropdown.theme-custom .list-filter .fa {\n  position: absolute;\n  top: 50%;\n  left: 16px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  transform: translateY(-50%);\n  color: var(--ms-on-surface-muted);\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul,\n.stackline-dropdown.theme-dark .dropdown-list ul,\n.stackline-dropdown.theme-custom .dropdown-list ul {\n  list-style: none;\n  margin: 0;\n  padding: 8px;\n  overflow: auto;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li,\n.stackline-dropdown.theme-dark .dropdown-list ul li,\n.stackline-dropdown.theme-custom .dropdown-list ul li {\n  align-items: center;\n  min-height: 0;\n  margin: 4px;\n  padding: 12px 14px;\n  border-radius: 14px;\n  cursor: pointer;\n  text-align: left;\n  line-height: 1.35;\n  transition: background-color 0.16s ease, color 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:first-child,\n.stackline-dropdown.theme-dark .dropdown-list ul li:first-child,\n.stackline-dropdown.theme-custom .dropdown-list ul li:first-child {\n  padding-top: 12px;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:last-child,\n.stackline-dropdown.theme-dark .dropdown-list ul li:last-child,\n.stackline-dropdown.theme-custom .dropdown-list ul li:last-child {\n  padding-bottom: 12px;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:hover,\n.stackline-dropdown.theme-dark .dropdown-list ul li:hover,\n.stackline-dropdown.theme-custom .dropdown-list ul li:hover {\n  background: var(--ms-surface-soft);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox,\n.stackline-dropdown.theme-dark .pure-checkbox,\n.stackline-dropdown.theme-custom .pure-checkbox {\n  position: relative;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label {\n  position: relative;\n  display: block;\n  width: 100%;\n  margin: 0;\n  padding-left: 32px;\n  color: inherit;\n  cursor: pointer;\n  font-weight: 500;\n  user-select: none;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label:before {\n  box-sizing: content-box;\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 16px;\n  height: 16px;\n  margin-top: -10px;\n  border: 2px solid var(--ms-outline-strong);\n  border-radius: 5px;\n  background: var(--ms-surface);\n  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label:after,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label:after,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label:after {\n  box-sizing: content-box;\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 5px;\n  width: 8px;\n  height: 3px;\n  margin-top: -4px;\n  border-style: solid;\n  border-color: #ffffff;\n  border-width: 0 0 3px 3px;\n  border-image: none;\n  background: transparent;\n  transform: rotate(-45deg) scale(0);\n  transform-origin: 50%;\n  transition: transform 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:hover + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:hover + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:hover + label:before {\n  border-color: var(--ms-primary);\n  background: var(--ms-surface-soft);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked + label:before {\n  border-color: var(--ms-primary);\n  background: var(--ms-primary);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked + label:after,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked + label:after,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked + label:after {\n  transform: rotate(-45deg) scale(1);\n}\n\n.stackline-dropdown.theme-material .list-message,\n.stackline-dropdown.theme-dark .list-message,\n.stackline-dropdown.theme-custom .list-message {\n  margin: 0;\n  padding: 20px 14px;\n  color: var(--ms-on-surface-muted);\n  text-align: center;\n}\n"],
                     providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALIDATION]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { data: [{

package/lib/multiselect.interface.d.ts

@@ -19,4 +19,5 @@ export interface DropdownSettings {
     labelKey?: string;
     theme?: string;
     skin?: string;
+    clearAll?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackline/angular-multiselect-dropdown",
-  "version": "13.0.0",
+  "version": "13.0.1",
   "description": "Angular 13 compatible multiselect dropdown package for the Stackline Angular 13 release line.",
   "license": "MIT",
   "author": "Pradeep Terli",
@@ -47,4 +47,4 @@
     }
   },
   "sideEffects": false
-}
+}

package/themes/custom.theme.css

@@ -23,7 +23,7 @@
 
 .stackline-dropdown .c-btn {
   min-height: 56px;
-  padding: 11px 54px 11px 16px;
+  padding: 11px 84px 11px 16px;
   border-radius: 18px;
   background: var(--ms-surface);
   border: 1px solid var(--ms-outline);
@@ -201,3 +201,29 @@
 }
 
 /*# sourceMappingURL=custom.theme.css.map */
+
+
+.selected-list .clear-all {
+  font-size: 12pt;
+  position: absolute;
+  right: 42px;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+}
+
+.stackline-dropdown.theme-material .selected-list .clear-all,
+.stackline-dropdown.theme-dark .selected-list .clear-all,
+.stackline-dropdown.theme-custom .selected-list .clear-all {
+  position: absolute;
+  top: 50%;
+  right: 42px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  transform: translateY(-50%);
+  color: var(--ms-on-surface-muted);
+  cursor: pointer;
+}

package/themes/custom.theme.scss

@@ -24,7 +24,7 @@
 
 .stackline-dropdown .c-btn {
   min-height: 56px;
-  padding: 11px 54px 11px 16px;
+  padding: 11px 84px 11px 16px;
   border-radius: 18px;
   background: var(--ms-surface);
   border: 1px solid var(--ms-outline);
@@ -200,3 +200,29 @@
   top: 18px;
   right: 16px;
 }
+
+
+.selected-list .clear-all {
+  font-size: 12pt;
+  position: absolute;
+  right: 42px;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+}
+
+.stackline-dropdown.theme-material .selected-list .clear-all,
+.stackline-dropdown.theme-dark .selected-list .clear-all,
+.stackline-dropdown.theme-custom .selected-list .clear-all {
+  position: absolute;
+  top: 50%;
+  right: 42px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  transform: translateY(-50%);
+  color: var(--ms-on-surface-muted);
+  cursor: pointer;
+}

package/themes/default.theme.css

@@ -35,3 +35,29 @@
 }
 
 /*# sourceMappingURL=default.theme.css.map */
+
+
+.selected-list .clear-all {
+  font-size: 12pt;
+  position: absolute;
+  right: 42px;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+}
+
+.stackline-dropdown.theme-material .selected-list .clear-all,
+.stackline-dropdown.theme-dark .selected-list .clear-all,
+.stackline-dropdown.theme-custom .selected-list .clear-all {
+  position: absolute;
+  top: 50%;
+  right: 42px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  transform: translateY(-50%);
+  color: var(--ms-on-surface-muted);
+  cursor: pointer;
+}

package/themes/default.theme.scss

@@ -33,3 +33,29 @@
   background: var(--ms-primary);
   color: #ffffff;
 }
+
+
+.selected-list .clear-all {
+  font-size: 12pt;
+  position: absolute;
+  right: 42px;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+}
+
+.stackline-dropdown.theme-material .selected-list .clear-all,
+.stackline-dropdown.theme-dark .selected-list .clear-all,
+.stackline-dropdown.theme-custom .selected-list .clear-all {
+  position: absolute;
+  top: 50%;
+  right: 42px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  transform: translateY(-50%);
+  color: var(--ms-on-surface-muted);
+  cursor: pointer;
+}