@stackline/angular-multiselect-dropdown 21.2.1 → 22.0.0

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

@@ -8,8 +8,6 @@ import { Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
 
 class MyException {
-    status;
-    body;
     constructor(status, body) {
         this.status = status;
         this.body = body;
@@ -17,11 +15,10 @@ class MyException {
 }
 
 class ClickOutsideDirective {
-    _elementRef;
     constructor(_elementRef) {
         this._elementRef = _elementRef;
+        this.clickOutside = new EventEmitter();
     }
-    clickOutside = new EventEmitter();
     onClick(event, targetElement) {
         if (!targetElement) {
             return;
@@ -31,10 +28,10 @@ class ClickOutsideDirective {
             this.clickOutside.emit(event);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: ClickOutsideDirective, isStandalone: false, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:pointerdown": "onClick($event,$event.target)", "document:touchstart": "onClick($event,$event.target)" } }, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: ClickOutsideDirective, isStandalone: false, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:pointerdown": "onClick($event,$event.target)", "document:touchstart": "onClick($event,$event.target)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ClickOutsideDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clickOutside]',
@@ -50,18 +47,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
                 args: ['document:touchstart', ['$event', '$event.target']]
             }] } });
 class ScrollDirective {
-    _elementRef;
     constructor(_elementRef) {
         this._elementRef = _elementRef;
+        this.scroll = new EventEmitter();
     }
-    scroll = new EventEmitter();
     onClick(event) {
         this.scroll.emit(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ScrollDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: ScrollDirective, isStandalone: false, selector: "[scroll]", outputs: { scroll: "scroll" }, host: { listeners: { "scroll": "onClick($event)" } }, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ScrollDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: ScrollDirective, isStandalone: false, selector: "[scroll]", outputs: { scroll: "scroll" }, host: { listeners: { "scroll": "onClick($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ScrollDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ScrollDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[scroll]',
@@ -74,21 +70,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
                 args: ['scroll', ['$event']]
             }] } });
 class styleDirective {
-    el;
     constructor(el) {
         this.el = el;
     }
-    styleVal;
     ngOnInit() {
         this.el.nativeElement.style.top = this.styleVal;
     }
     ngOnChanges() {
         this.el.nativeElement.style.top = this.styleVal;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: styleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: styleDirective, isStandalone: false, selector: "[styleProp]", inputs: { styleVal: ["styleProp", "styleVal"] }, usesOnChanges: true, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: styleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: styleDirective, isStandalone: false, selector: "[styleProp]", inputs: { styleVal: ["styleProp", "styleVal"] }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: styleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: styleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[styleProp]',
@@ -99,8 +93,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
                 args: ['styleProp']
             }] } });
 class setPosition {
-    el;
-    height;
     constructor(el) {
         this.el = el;
     }
@@ -114,10 +106,10 @@ class setPosition {
             this.el.nativeElement.style.bottom = parseInt(this.height + 15 + "") + 'px';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: setPosition, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: setPosition, isStandalone: false, selector: "[setPosition]", inputs: { height: ["setPosition", "height"] }, usesOnChanges: true, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: setPosition, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: setPosition, isStandalone: false, selector: "[setPosition]", inputs: { height: ["setPosition", "height"] }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: setPosition, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: setPosition, decorators: [{
             type: Directive,
             args: [{
                     selector: '[setPosition]',
@@ -129,8 +121,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
             }] } });
 
 class DataService {
-    filteredData = [];
-    subject = new Subject();
+    constructor() {
+        this.filteredData = [];
+        this.subject = new Subject();
+    }
     setData(data) {
         this.filteredData = data;
         this.subject.next(data);
@@ -146,18 +140,17 @@ class DataService {
             return [];
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: DataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: DataService });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: DataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: DataService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: DataService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: DataService, decorators: [{
             type: Injectable
         }] });
 
 class ListFilterPipe {
-    ds;
-    filteredList = [];
     constructor(ds) {
         this.ds = ds;
+        this.filteredList = [];
     }
     transform(items, filter, searchBy) {
         if (!items || !filter || filter == "") {
@@ -198,10 +191,10 @@ class ListFilterPipe {
         }
         return found;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ListFilterPipe, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.7", ngImport: i0, type: ListFilterPipe, isStandalone: false, name: "listFilter" });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ListFilterPipe, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.0", ngImport: i0, type: ListFilterPipe, isStandalone: false, name: "listFilter" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ListFilterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ListFilterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'listFilter',
@@ -211,13 +204,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
         }], ctorParameters: () => [{ type: DataService }] });
 
 class Item {
-    template;
     constructor() {
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: Item, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: Item, isStandalone: false, selector: "c-item", queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: ``, isInline: true });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: Item, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: Item, isStandalone: false, selector: "c-item", queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: ``, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: Item, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: Item, decorators: [{
             type: Component,
             args: [{
                     selector: 'c-item',
@@ -229,13 +221,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
                 args: [TemplateRef, { static: true }]
             }] } });
 class Badge {
-    template;
     constructor() {
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: Badge, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: Badge, isStandalone: false, selector: "c-badge", queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: ``, isInline: true });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: Badge, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: Badge, isStandalone: false, selector: "c-badge", queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: ``, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: Badge, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: Badge, decorators: [{
             type: Component,
             args: [{
                     selector: 'c-badge',
@@ -247,13 +238,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
                 args: [TemplateRef, { static: true }]
             }] } });
 class Search {
-    template;
     constructor() {
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: Search, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: Search, isStandalone: false, selector: "c-search", queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: ``, isInline: true });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: Search, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: Search, isStandalone: false, selector: "c-search", queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: ``, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: Search, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: Search, decorators: [{
             type: Component,
             args: [{
                     selector: 'c-search',
@@ -265,11 +255,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
                 args: [TemplateRef, { static: true }]
             }] } });
 class TemplateRenderer {
-    viewContainer;
-    data;
-    item;
-    context;
-    view;
     constructor(viewContainer) {
         this.viewContainer = viewContainer;
     }
@@ -283,10 +268,10 @@ class TemplateRenderer {
     ngOnDestroy() {
         this.view.destroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TemplateRenderer, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: TemplateRenderer, isStandalone: false, selector: "c-templateRenderer", inputs: { data: "data", item: "item", context: "context" }, ngImport: i0, template: ``, isInline: true });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TemplateRenderer, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: TemplateRenderer, isStandalone: false, selector: "c-templateRenderer", inputs: { data: "data", item: "item", context: "context" }, ngImport: i0, template: ``, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TemplateRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TemplateRenderer, decorators: [{
             type: Component,
             args: [{
                     selector: 'c-templateRenderer',
@@ -301,9 +286,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
                 type: Input
             }] } });
 class CIcon {
-    name;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: CIcon, isStandalone: false, selector: "c-icon", inputs: { name: "name" }, host: { attributes: { "aria-hidden": "true" } }, ngImport: i0, template: `<svg *ngIf="name == 'remove'" width="100%" height="100%" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: CIcon, isStandalone: false, selector: "c-icon", inputs: { name: "name" }, host: { attributes: { "aria-hidden": "true" } }, ngImport: i0, template: `<svg *ngIf="name == 'remove'" width="100%" height="100%" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                         viewBox="0 0 47.971 47.971" style="enable-background:new 0 0 47.971 47.971;" xml:space="preserve">
                         <g>
                             <path d="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88
@@ -365,9 +349,9 @@ class CIcon {
 		c0.781-0.781,2.047-0.781,2.828,0l7.425,7.425l7.071-7.071c0.781-0.781,2.047-0.781,2.828,0c0.781,0.781,0.781,2.047,0,2.828
 		l-7.071,7.071l7.425,7.425C37.022,34.194,37.022,35.46,36.241,36.241z"/>
 </g>
-</svg>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+</svg>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CIcon, decorators: [{
             type: Component,
             args: [{
                     selector: 'c-icon',
@@ -454,12 +438,6 @@ function VIRTUAL_SCROLLER_DEFAULT_OPTIONS_FACTORY() {
     };
 }
 class VirtualScrollerComponent {
-    element;
-    renderer;
-    zone;
-    changeDetectorRef;
-    viewPortItems;
-    window = window;
     get viewPortInfo() {
         let pageInfo = this.previousViewPort || {};
         return {
@@ -472,8 +450,6 @@ class VirtualScrollerComponent {
             endIndexWithBuffer: pageInfo.endIndexWithBuffer || 0
         };
     }
-    executeRefreshOutsideAngularZone = false;
-    _enableUnequalChildrenSizes = false;
     get enableUnequalChildrenSizes() {
         return this._enableUnequalChildrenSizes;
     }
@@ -485,18 +461,6 @@ class VirtualScrollerComponent {
         this.minMeasuredChildWidth = undefined;
         this.minMeasuredChildHeight = undefined;
     }
-    useMarginInsteadOfTranslate = false;
-    modifyOverflowStyleOfParentScroll;
-    stripedTable;
-    scrollbarWidth;
-    scrollbarHeight;
-    childWidth;
-    childHeight;
-    ssrChildWidth;
-    ssrChildHeight;
-    ssrViewportWidth = 1920;
-    ssrViewportHeight = 1080;
-    _bufferAmount = 0;
     get bufferAmount() {
         if (typeof (this._bufferAmount) === 'number' && this._bufferAmount >= 0) {
             return this._bufferAmount;
@@ -508,9 +472,6 @@ class VirtualScrollerComponent {
     set bufferAmount(value) {
         this._bufferAmount = value;
     }
-    scrollAnimationTime;
-    resizeBypassRefreshThreshold;
-    _scrollThrottlingTime;
     get scrollThrottlingTime() {
         return this._scrollThrottlingTime;
     }
@@ -518,7 +479,6 @@ class VirtualScrollerComponent {
         this._scrollThrottlingTime = value;
         this.updateOnScrollFunction();
     }
-    _scrollDebounceTime;
     get scrollDebounceTime() {
         return this._scrollDebounceTime;
     }
@@ -526,7 +486,6 @@ class VirtualScrollerComponent {
         this._scrollDebounceTime = value;
         this.updateOnScrollFunction();
     }
-    onScroll;
     updateOnScrollFunction() {
         if (this.scrollDebounceTime) {
             this.onScroll = this.debounce(() => {
@@ -544,8 +503,6 @@ class VirtualScrollerComponent {
             };
         }
     }
-    checkScrollElementResizedTimer;
-    _checkResizeInterval;
     get checkResizeInterval() {
         return this._checkResizeInterval;
     }
@@ -556,7 +513,6 @@ class VirtualScrollerComponent {
         this._checkResizeInterval = value;
         this.addScrollEventHandlers();
     }
-    _items = [];
     get items() {
         return this._items;
     }
@@ -567,8 +523,6 @@ class VirtualScrollerComponent {
         this._items = value || [];
         this.refresh_internal(true);
     }
-    compareItems = (item1, item2) => item1 === item2;
-    _horizontal;
     get horizontal() {
         return this._horizontal;
     }
@@ -584,8 +538,6 @@ class VirtualScrollerComponent {
         }
         this.oldParentScrollOverflow = undefined;
     }
-    oldParentScrollOverflow;
-    _parentScroll;
     get parentScroll() {
         return this._parentScroll;
     }
@@ -603,14 +555,6 @@ class VirtualScrollerComponent {
             scrollElement.style['overflow-x'] = this.horizontal ? 'auto' : 'visible';
         }
     }
-    vsUpdate = new EventEmitter();
-    vsChange = new EventEmitter();
-    vsStart = new EventEmitter();
-    vsEnd = new EventEmitter();
-    contentElementRef;
-    invisiblePaddingElementRef;
-    headerElementRef;
-    containerElementRef;
     ngOnInit() {
         this.addScrollEventHandlers();
     }
@@ -786,12 +730,30 @@ class VirtualScrollerComponent {
         this.currentTween = { stop: stopAnimation };
         this.zone.runOutsideAngular(() => animationRequest = requestAnimationFrame(animate));
     }
-    isAngularUniversalSSR;
     constructor(element, renderer, zone, changeDetectorRef, platformId, options) {
         this.element = element;
         this.renderer = renderer;
         this.zone = zone;
         this.changeDetectorRef = changeDetectorRef;
+        this.window = window;
+        this.executeRefreshOutsideAngularZone = false;
+        this._enableUnequalChildrenSizes = false;
+        this.useMarginInsteadOfTranslate = false;
+        this.ssrViewportWidth = 1920;
+        this.ssrViewportHeight = 1080;
+        this._bufferAmount = 0;
+        this._items = [];
+        this.compareItems = (item1, item2) => item1 === item2;
+        this.vsUpdate = new EventEmitter();
+        this.vsChange = new EventEmitter();
+        this.vsStart = new EventEmitter();
+        this.vsEnd = new EventEmitter();
+        this.calculatedScrollbarWidth = 0;
+        this.calculatedScrollbarHeight = 0;
+        this.padding = 0;
+        this.previousViewPort = {};
+        this.cachedPageSize = 0;
+        this.previousScrollNumberElements = 0;
         this.isAngularUniversalSSR = isPlatformServer(platformId);
         this.scrollThrottlingTime = options.scrollThrottlingTime;
         this.scrollDebounceTime = options.scrollDebounceTime;
@@ -826,7 +788,6 @@ class VirtualScrollerComponent {
             }
         };
     }
-    previousScrollBoundingRect;
     checkScrollElementResized() {
         let boundingRect = this.getElementSize(this.getScrollElement());
         let sizeChanged;
@@ -845,13 +806,6 @@ class VirtualScrollerComponent {
             }
         }
     }
-    _invisiblePaddingProperty;
-    _offsetType;
-    _scrollType;
-    _pageOffsetType;
-    _childScrollDim;
-    _translateDir;
-    _marginDir;
     updateDirection() {
         if (this.horizontal) {
             this._invisiblePaddingProperty = 'width';
@@ -910,14 +864,6 @@ class VirtualScrollerComponent {
         };
         return result;
     }
-    calculatedScrollbarWidth = 0;
-    calculatedScrollbarHeight = 0;
-    padding = 0;
-    previousViewPort = {};
-    currentTween;
-    cachedItemsLength;
-    disposeScrollHandler;
-    disposeResizeHandler;
     refresh_internal(itemsArrayModified, refreshCompletedCallback = undefined, maxRunTimes = 2) {
         //note: maxRunTimes is to force it to keep recalculating if the previous iteration caused a re-render (different sliced items in viewport or scrollPosition changed).
         //The default of 2x max will probably be accurate enough without causing too large a performance bottleneck
@@ -1117,9 +1063,6 @@ class VirtualScrollerComponent {
         }
         return windowScrollValue || this.getScrollElement()[this._scrollType] || 0;
     }
-    minMeasuredChildWidth;
-    minMeasuredChildHeight;
-    wrapGroupDimensions;
     resetWrapGroupDimensions() {
         const oldWrapGroupDimensions = this.wrapGroupDimensions;
         this.invalidateAllCachedMeasurements();
@@ -1308,8 +1251,6 @@ class VirtualScrollerComponent {
             maxScrollPosition: maxScrollPosition
         };
     }
-    cachedPageSize = 0;
-    previousScrollNumberElements = 0;
     calculatePadding(arrayStartIndexWithBuffer, dimensions) {
         if (dimensions.itemCount === 0) {
             return 0;
@@ -1418,15 +1359,15 @@ class VirtualScrollerComponent {
             maxScrollPosition: pageInfo.maxScrollPosition
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: VirtualScrollerComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: PLATFORM_ID }, { token: 'virtual-scroller-default-options', optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: VirtualScrollerComponent, isStandalone: false, selector: "virtual-scroller,[virtualScroller]", inputs: { executeRefreshOutsideAngularZone: "executeRefreshOutsideAngularZone", enableUnequalChildrenSizes: "enableUnequalChildrenSizes", useMarginInsteadOfTranslate: "useMarginInsteadOfTranslate", modifyOverflowStyleOfParentScroll: "modifyOverflowStyleOfParentScroll", stripedTable: "stripedTable", scrollbarWidth: "scrollbarWidth", scrollbarHeight: "scrollbarHeight", childWidth: "childWidth", childHeight: "childHeight", ssrChildWidth: "ssrChildWidth", ssrChildHeight: "ssrChildHeight", ssrViewportWidth: "ssrViewportWidth", ssrViewportHeight: "ssrViewportHeight", bufferAmount: "bufferAmount", scrollAnimationTime: "scrollAnimationTime", resizeBypassRefreshThreshold: "resizeBypassRefreshThreshold", scrollThrottlingTime: "scrollThrottlingTime", scrollDebounceTime: "scrollDebounceTime", checkResizeInterval: "checkResizeInterval", items: "items", compareItems: "compareItems", horizontal: "horizontal", parentScroll: "parentScroll" }, outputs: { vsUpdate: "vsUpdate", vsChange: "vsChange", vsStart: "vsStart", vsEnd: "vsEnd" }, host: { properties: { "class.horizontal": "horizontal", "class.vertical": "!horizontal", "class.selfScroll": "!parentScroll" } }, queries: [{ propertyName: "headerElementRef", first: true, predicate: ["header"], descendants: true, read: ElementRef }, { propertyName: "containerElementRef", first: true, predicate: ["container"], descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "contentElementRef", first: true, predicate: ["content"], descendants: true, read: ElementRef }, { propertyName: "invisiblePaddingElementRef", first: true, predicate: ["invisiblePadding"], descendants: true, read: ElementRef }], exportAs: ["virtualScroller"], usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: VirtualScrollerComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: PLATFORM_ID }, { token: 'virtual-scroller-default-options', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: VirtualScrollerComponent, isStandalone: false, selector: "virtual-scroller,[virtualScroller]", inputs: { executeRefreshOutsideAngularZone: "executeRefreshOutsideAngularZone", enableUnequalChildrenSizes: "enableUnequalChildrenSizes", useMarginInsteadOfTranslate: "useMarginInsteadOfTranslate", modifyOverflowStyleOfParentScroll: "modifyOverflowStyleOfParentScroll", stripedTable: "stripedTable", scrollbarWidth: "scrollbarWidth", scrollbarHeight: "scrollbarHeight", childWidth: "childWidth", childHeight: "childHeight", ssrChildWidth: "ssrChildWidth", ssrChildHeight: "ssrChildHeight", ssrViewportWidth: "ssrViewportWidth", ssrViewportHeight: "ssrViewportHeight", bufferAmount: "bufferAmount", scrollAnimationTime: "scrollAnimationTime", resizeBypassRefreshThreshold: "resizeBypassRefreshThreshold", scrollThrottlingTime: "scrollThrottlingTime", scrollDebounceTime: "scrollDebounceTime", checkResizeInterval: "checkResizeInterval", items: "items", compareItems: "compareItems", horizontal: "horizontal", parentScroll: "parentScroll" }, outputs: { vsUpdate: "vsUpdate", vsChange: "vsChange", vsStart: "vsStart", vsEnd: "vsEnd" }, host: { properties: { "class.horizontal": "horizontal", "class.vertical": "!horizontal", "class.selfScroll": "!parentScroll" } }, queries: [{ propertyName: "headerElementRef", first: true, predicate: ["header"], descendants: true, read: ElementRef }, { propertyName: "containerElementRef", first: true, predicate: ["container"], descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "contentElementRef", first: true, predicate: ["content"], descendants: true, read: ElementRef }, { propertyName: "invisiblePaddingElementRef", first: true, predicate: ["invisiblePadding"], descendants: true, read: ElementRef }], exportAs: ["virtualScroller"], usesOnChanges: true, ngImport: i0, template: `
     <div class="total-padding" #invisiblePadding></div>
     <div class="scrollable-content" #content>
       <ng-content></ng-content>
     </div>
-  `, isInline: true, styles: [":host{position:relative;display:block;-webkit-overflow-scrolling:touch}:host.horizontal.selfScroll{overflow-y:visible;overflow-x:auto}:host.vertical.selfScroll{overflow-y:auto;overflow-x:visible}.scrollable-content{top:0;left:0;width:100%;height:100%;max-width:100vw;max-height:100vh;position:absolute}.scrollable-content ::ng-deep>*{box-sizing:border-box}:host.horizontal{white-space:nowrap}:host.horizontal .scrollable-content{display:flex}:host.horizontal .scrollable-content ::ng-deep>*{flex-shrink:0;flex-grow:0;white-space:initial}.total-padding{width:1px;opacity:0}:host.horizontal .total-padding{height:100%}\n"] });
+  `, isInline: true, styles: [":host{position:relative;display:block;-webkit-overflow-scrolling:touch}:host.horizontal.selfScroll{overflow-y:visible;overflow-x:auto}:host.vertical.selfScroll{overflow-y:auto;overflow-x:visible}.scrollable-content{top:0;left:0;width:100%;height:100%;max-width:100vw;max-height:100vh;position:absolute}.scrollable-content ::ng-deep>*{box-sizing:border-box}:host.horizontal{white-space:nowrap}:host.horizontal .scrollable-content{display:flex}:host.horizontal .scrollable-content ::ng-deep>*{flex-shrink:0;flex-grow:0;white-space:initial}.total-padding{width:1px;opacity:0}:host.horizontal .total-padding{height:100%}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: VirtualScrollerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: VirtualScrollerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'virtual-scroller,[virtualScroller]', exportAs: 'virtualScroller', standalone: false, template: `
     <div class="total-padding" #invisiblePadding></div>
@@ -1514,16 +1455,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
                 args: ['container', { read: ElementRef, static: false }]
             }] } });
 class VirtualScrollerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: VirtualScrollerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.7", ngImport: i0, type: VirtualScrollerModule, declarations: [VirtualScrollerComponent], imports: [CommonModule], exports: [VirtualScrollerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: VirtualScrollerModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: VirtualScrollerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.0", ngImport: i0, type: VirtualScrollerModule, declarations: [VirtualScrollerComponent], imports: [CommonModule], exports: [VirtualScrollerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: VirtualScrollerModule, providers: [
             {
                 provide: 'virtual-scroller-default-options',
                 useFactory: VIRTUAL_SCROLLER_DEFAULT_OPTIONS_FACTORY
             }
-        ], imports: [CommonModule] });
+        ], imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: VirtualScrollerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: VirtualScrollerModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [VirtualScrollerComponent],
@@ -1551,32 +1492,6 @@ const DROPDOWN_CONTROL_VALIDATION = {
 const noop = () => {
 };
 class AngularMultiSelect {
-    _elementRef;
-    cdr;
-    filterPipe;
-    data;
-    settings;
-    loading;
-    onSelect = new EventEmitter();
-    onDeSelect = new EventEmitter();
-    onSelectAll = new EventEmitter();
-    onDeSelectAll = new EventEmitter();
-    onOpen = new EventEmitter();
-    onClose = new EventEmitter();
-    onScrollToEnd = new EventEmitter();
-    onFilterSelectAll = new EventEmitter();
-    onFilterDeSelectAll = new EventEmitter();
-    onAddFilterNewItem = new EventEmitter();
-    onGroupSelect = new EventEmitter();
-    onGroupDeSelect = new EventEmitter();
-    itemTempl;
-    badgeTempl;
-    searchTempl;
-    searchInput;
-    selectedListElem;
-    dropdownListElem;
-    stacklineDropdown;
-    triggerButton;
     onEscapeDown(event) {
         if (this.settings && this.settings.escapeToClose && this.isKeyboardEnabled('escape')) {
             this.closeDropdown();
@@ -1595,143 +1510,138 @@ class AngularMultiSelect {
             this.scheduleDropdownPositionUpdate();
         }
     }
-    virtualdata = [];
-    searchTerm$ = new Subject();
-    selectedItems;
-    isActive = false;
-    isSelectAll = false;
-    isFilterSelectAll = false;
-    isInfiniteFilterSelectAll = false;
-    groupedData;
-    filter;
-    chunkArray;
-    scrollTop;
-    chunkIndex = [];
-    cachedItems = [];
-    groupCachedItems = [];
-    totalRows;
-    itemHeight = 41.6;
-    screenItemsLen;
-    cachedItemsLen;
-    totalHeight;
-    scroller;
-    maxBuffer;
-    lastScrolled;
-    lastRepaintY;
-    selectedListHeight;
-    filterLength = 0;
-    infiniteFilterLength = 0;
-    viewPortItems;
-    item;
-    dropdownListYOffset = 0;
-    subscription;
-    dropDownWidth = null;
-    dropDownTop = null;
-    dropDownBottom = null;
-    dropDownLeft = null;
-    dropDownDirection = 'bottom';
-    dropdownOriginalParent = null;
-    dropdownOriginalNextSibling = null;
-    dropdownAppendedToBody = false;
-    overlayListenersBound = false;
-    overlayPositionTimer = null;
-    boundOverlayPositionUpdate = () => this.scheduleDropdownPositionUpdate();
-    overlayThemeVariables = [
-        '--ms-primary',
-        '--ms-primary-soft',
-        '--ms-surface',
-        '--ms-surface-soft',
-        '--ms-surface-muted',
-        '--ms-outline',
-        '--ms-outline-strong',
-        '--ms-on-surface',
-        '--ms-on-surface-muted',
-        '--ms-chip-bg',
-        '--ms-chip-text',
-        '--ms-chip-remove',
-        '--ms-shadow',
-        '--ms-shadow-soft',
-        '--stackline-ms-primary',
-        '--stackline-ms-primary-soft',
-        '--stackline-ms-surface',
-        '--stackline-ms-surface-soft',
-        '--stackline-ms-surface-muted',
-        '--stackline-ms-outline',
-        '--stackline-ms-outline-strong',
-        '--stackline-ms-on-surface',
-        '--stackline-ms-on-surface-muted',
-        '--stackline-ms-chip-bg',
-        '--stackline-ms-chip-text',
-        '--stackline-ms-chip-remove',
-        '--stackline-ms-shadow',
-        '--stackline-ms-shadow-soft'
-    ];
-    id = Math.random().toString(36).substring(2);
-    listboxId = 'stackline-listbox-' + this.id;
-    activeDescendantId = null;
-    defaultSettings = {
-        singleSelection: false,
-        text: 'Select',
-        enableCheckAll: true,
-        selectAllText: 'Select All',
-        unSelectAllText: 'UnSelect All',
-        filterSelectAllText: 'Select all filtered results',
-        filterUnSelectAllText: 'UnSelect all filtered results',
-        enableSearchFilter: false,
-        searchBy: [],
-        maxHeight: 300,
-        badgeShowLimit: 999999999999,
-        classes: '',
-        disabled: false,
-        searchPlaceholderText: 'Search',
-        showCheckbox: true,
-        noDataLabel: 'No Data Available',
-        searchAutofocus: true,
-        lazyLoading: false,
-        labelKey: 'itemName',
-        primaryKey: 'id',
-        skin: 'classic',
-        theme: '',
-        position: 'bottom',
-        autoPosition: true,
-        enableFilterSelectAll: true,
-        selectGroup: false,
-        addNewItemOnFilter: false,
-        addNewButtonText: "Add",
-        escapeToClose: true,
-        clearAll: true,
-        tagToBody: false,
-        appendToBody: false,
-        ariaLabel: 'Select options',
-        listboxAriaLabel: 'Available options',
-        searchAriaLabel: 'Search options',
-        clearSearchAriaLabel: 'Clear search',
-        clearAllAriaLabel: 'Clear selected options',
-        removeItemAriaLabel: 'Remove selected option',
-        openDropdownAriaLabel: 'Open options',
-        closeDropdownAriaLabel: 'Close options',
-        loadingText: 'Loading options',
-        keyboard: {
-            space: true,
-            spaceOptionAction: 'toggle',
-            tab: true,
-            arrows: true,
-            escape: true,
-            backspaceRemovesLastWhenSearchEmpty: false,
-            deleteRemovesFocusedBadge: true,
-            backspace: false
-        }
-    };
-    randomSize = true;
-    parseError;
-    filteredList = [];
-    virtualScroollInit = false;
-    virtualScroller;
-    isDisabledItemPresent = false;
     constructor(_elementRef, cdr, filterPipe) {
         this._elementRef = _elementRef;
         this.cdr = cdr;
         this.filterPipe = filterPipe;
+        this.onSelect = new EventEmitter();
+        this.onDeSelect = new EventEmitter();
+        this.onSelectAll = new EventEmitter();
+        this.onDeSelectAll = new EventEmitter();
+        this.onOpen = new EventEmitter();
+        this.onClose = new EventEmitter();
+        this.onScrollToEnd = new EventEmitter();
+        this.onFilterSelectAll = new EventEmitter();
+        this.onFilterDeSelectAll = new EventEmitter();
+        this.onAddFilterNewItem = new EventEmitter();
+        this.onGroupSelect = new EventEmitter();
+        this.onGroupDeSelect = new EventEmitter();
+        this.virtualdata = [];
+        this.searchTerm$ = new Subject();
+        this.isActive = false;
+        this.isSelectAll = false;
+        this.isFilterSelectAll = false;
+        this.isInfiniteFilterSelectAll = false;
+        this.chunkIndex = [];
+        this.cachedItems = [];
+        this.groupCachedItems = [];
+        this.itemHeight = 41.6;
+        this.filterLength = 0;
+        this.infiniteFilterLength = 0;
+        this.dropdownListYOffset = 0;
+        this.dropDownWidth = null;
+        this.dropDownTop = null;
+        this.dropDownBottom = null;
+        this.dropDownLeft = null;
+        this.dropDownDirection = 'bottom';
+        this.dropdownOriginalParent = null;
+        this.dropdownOriginalNextSibling = null;
+        this.dropdownAppendedToBody = false;
+        this.overlayListenersBound = false;
+        this.overlayPositionTimer = null;
+        this.boundOverlayPositionUpdate = () => this.scheduleDropdownPositionUpdate();
+        this.overlayThemeVariables = [
+            '--ms-primary',
+            '--ms-primary-soft',
+            '--ms-surface',
+            '--ms-surface-soft',
+            '--ms-surface-muted',
+            '--ms-outline',
+            '--ms-outline-strong',
+            '--ms-on-surface',
+            '--ms-on-surface-muted',
+            '--ms-chip-bg',
+            '--ms-chip-text',
+            '--ms-chip-remove',
+            '--ms-shadow',
+            '--ms-shadow-soft',
+            '--stackline-ms-primary',
+            '--stackline-ms-primary-soft',
+            '--stackline-ms-surface',
+            '--stackline-ms-surface-soft',
+            '--stackline-ms-surface-muted',
+            '--stackline-ms-outline',
+            '--stackline-ms-outline-strong',
+            '--stackline-ms-on-surface',
+            '--stackline-ms-on-surface-muted',
+            '--stackline-ms-chip-bg',
+            '--stackline-ms-chip-text',
+            '--stackline-ms-chip-remove',
+            '--stackline-ms-shadow',
+            '--stackline-ms-shadow-soft'
+        ];
+        this.id = Math.random().toString(36).substring(2);
+        this.listboxId = 'stackline-listbox-' + this.id;
+        this.activeDescendantId = null;
+        this.defaultSettings = {
+            singleSelection: false,
+            text: 'Select',
+            enableCheckAll: true,
+            selectAllText: 'Select All',
+            unSelectAllText: 'UnSelect All',
+            filterSelectAllText: 'Select all filtered results',
+            filterUnSelectAllText: 'UnSelect all filtered results',
+            enableSearchFilter: false,
+            searchBy: [],
+            maxHeight: 300,
+            badgeShowLimit: 999999999999,
+            classes: '',
+            disabled: false,
+            searchPlaceholderText: 'Search',
+            showCheckbox: true,
+            noDataLabel: 'No Data Available',
+            searchAutofocus: true,
+            lazyLoading: false,
+            labelKey: 'itemName',
+            primaryKey: 'id',
+            skin: 'classic',
+            theme: '',
+            position: 'bottom',
+            autoPosition: true,
+            enableFilterSelectAll: true,
+            selectGroup: false,
+            addNewItemOnFilter: false,
+            addNewButtonText: "Add",
+            escapeToClose: true,
+            clearAll: true,
+            tagToBody: false,
+            appendToBody: false,
+            ariaLabel: 'Select options',
+            listboxAriaLabel: 'Available options',
+            searchAriaLabel: 'Search options',
+            clearSearchAriaLabel: 'Clear search',
+            clearAllAriaLabel: 'Clear selected options',
+            removeItemAriaLabel: 'Remove selected option',
+            openDropdownAriaLabel: 'Open options',
+            closeDropdownAriaLabel: 'Close options',
+            loadingText: 'Loading options',
+            keyboard: {
+                space: true,
+                spaceOptionAction: 'toggle',
+                tab: true,
+                arrows: true,
+                escape: true,
+                backspaceRemovesLastWhenSearchEmpty: false,
+                deleteRemovesFocusedBadge: true,
+                backspace: false
+            }
+        };
+        this.randomSize = true;
+        this.filteredList = [];
+        this.virtualScroollInit = false;
+        this.isDisabledItemPresent = false;
+        this.onTouchedCallback = noop;
+        this.onChangeCallback = noop;
         this.subscription = this.searchTerm$.asObservable().pipe(debounceTime(1000), distinctUntilChanged(), tap(term => term)).subscribe(val => {
             this.filterInfiniteList(val);
         });
@@ -2758,8 +2668,6 @@ class AngularMultiSelect {
     validate(c) {
         return null;
     }
-    onTouchedCallback = noop;
-    onChangeCallback = noop;
     writeValue(value) {
         if (value !== undefined && value !== null && value !== '') {
             if (this.settings.singleSelection) {
@@ -3407,10 +3315,10 @@ class AngularMultiSelect {
         }
         this.onFilterChange(this.filteredList);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AngularMultiSelect, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: ListFilterPipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: AngularMultiSelect, isStandalone: false, selector: "angular-multiselect, angular2-multiselect", inputs: { data: "data", settings: "settings", loading: "loading" }, outputs: { onSelect: "onSelect", onDeSelect: "onDeSelect", onSelectAll: "onSelectAll", onDeSelectAll: "onDeSelectAll", onOpen: "onOpen", onClose: "onClose", onScrollToEnd: "onScrollToEnd", onFilterSelectAll: "onFilterSelectAll", onFilterDeSelectAll: "onFilterDeSelectAll", onAddFilterNewItem: "onAddFilterNewItem", onGroupSelect: "onGroupSelect", onGroupDeSelect: "onGroupDeSelect" }, host: { listeners: { "document:keyup.escape": "onEscapeDown($event)", "document:click": "onDocumentClick($event)", "window:scroll": "onScroll($event)", "window:resize": "onResize($event)" }, properties: { "class": "defaultSettings.classes" } }, providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALIDATION], queries: [{ propertyName: "itemTempl", first: true, predicate: Item, descendants: true }, { propertyName: "badgeTempl", first: true, predicate: Badge, descendants: true }, { propertyName: "searchTempl", first: true, predicate: Search, descendants: true }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "selectedListElem", first: true, predicate: ["selectedList"], descendants: true }, { propertyName: "dropdownListElem", first: true, predicate: ["dropdownList"], descendants: true }, { propertyName: "stacklineDropdown", first: true, predicate: ["stacklineDropdown"], descendants: true }, { propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true }, { propertyName: "virtualScroller", first: true, predicate: VirtualScrollerComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"stackline-dropdown\" [ngClass]=\"getDropdownClasses()\" (clickOutside)=\"closeDropdownOnClickOut($event)\" #stacklineDropdown>\n    <div class=\"selected-list\" #selectedList>\n        <div class=\"c-btn\"\n            #triggerButton\n            (click)=\"toggleDropdown($event)\"\n            (keydown)=\"onTriggerKeydown($event)\"\n            [ngClass]=\"{'disabled': settings.disabled, 'is-active': isActive, 'has-selection': selectedItems?.length > 0, 'single-select-mode': settings.singleSelection}\"\n            [attr.tabindex]=\"settings.disabled ? -1 : 0\"\n            role=\"combobox\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-controls]=\"listboxId\"\n            [attr.aria-expanded]=\"isActive\"\n            [attr.aria-disabled]=\"settings.disabled\"\n            [attr.aria-activedescendant]=\"activeDescendantId\"\n            [attr.aria-label]=\"settings.ariaLabelledBy ? null : getAriaLabel()\"\n            [attr.aria-labelledby]=\"settings.ariaLabelledBy || null\">\n\n            <span class=\"c-placeholder\" *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n            <span class=\"c-single-value\" *ngIf=\"settings.singleSelection && !badgeTempl\">\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\">\n                    {{item[settings.labelKey]}}\n                </span>\n            </span>\n            <span class=\"c-list c-chip-list\" *ngIf=\"selectedItems?.length > 0 && settings.singleSelection && badgeTempl \">\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\">\n                    <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\n\n                    <span *ngIf=\"badgeTempl\" class=\"c-label\">\n                        <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\" [context]=\"getTemplateContext(item,k,'badge')\"></c-templateRenderer>\n                    </span>\n                    <button type=\"button\" class=\"c-remove\" (click)=\"onItemClick(item,k,$event);$event.stopPropagation()\" (keydown)=\"onRemoveButtonKeydown(item,k,$event)\" [attr.aria-label]=\"getRemoveItemAriaLabel(item)\">\n                        <c-icon [name]=\"'remove'\"></c-icon>\n                    </button>\n                </div>\n            </span>\n            <div class=\"c-list c-chip-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n                <ng-container *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\">\n                    <div class=\"c-token\" *ngIf=\"shouldShowSelectedBadge(k)\">\n                        <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\n                        <span *ngIf=\"badgeTempl\" class=\"c-label\">\n                            <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\" [context]=\"getTemplateContext(item,k,'badge')\"></c-templateRenderer>\n                        </span>\n                        <button type=\"button\" class=\"c-remove\" (click)=\"onItemClick(item,k,$event);$event.stopPropagation()\" (keydown)=\"onRemoveButtonKeydown(item,k,$event)\" [attr.aria-label]=\"getRemoveItemAriaLabel(item)\">\n                            <c-icon [name]=\"'remove'\"></c-icon>\n                        </button>\n                    </div>\n                </ng-container>\n            </div>\n            <span class=\"countplaceholder\" *ngIf=\"getHiddenSelectedCount() > 0\">+{{getHiddenSelectedCount()}}</span>\n            <button type=\"button\" class=\"c-remove clear-all\" *ngIf=\"settings.clearAll && selectedItems?.length > 0 && !settings.disabled\" (click)=\"clearSelection($event);$event.stopPropagation()\" (keydown)=\"onClearAllKeydown($event)\" [attr.aria-label]=\"getClearAllAriaLabel()\">\n                <c-icon [name]=\"'remove'\"></c-icon>\n            </button>\n            <button type=\"button\" class=\"c-arrow-toggle\" [ngClass]=\"isActive ? 'c-angle-up' : 'c-angle-down'\" [disabled]=\"settings.disabled\" (click)=\"toggleDropdown($event);$event.stopPropagation()\" (keydown)=\"onArrowButtonKeydown($event)\" [attr.aria-label]=\"isActive ? getCloseDropdownAriaLabel() : getOpenDropdownAriaLabel()\" [attr.aria-controls]=\"listboxId\" [attr.aria-expanded]=\"isActive\">\n                <c-icon [name]=\"isActive ? 'angle-up' : 'angle-down'\"></c-icon>\n            </button>\n        </div>\n    </div>\n    <div #dropdownList class=\"dropdown-list animated fadeIn\"\n    [ngClass]=\"getDropdownPanelClasses()\"\n    [style.width]=\"dropDownWidth !== null ? dropDownWidth + 'px' : 'auto'\"\n    [style.top]=\"dropDownTop\" \n    [style.bottom]=\"dropDownBottom\"\n    [style.left.px]=\"dropDownLeft\" \n        (pointerdown)=\"onDropdownPanelPointerDown($event)\"\n        (touchstart)=\"onDropdownPanelPointerDown($event)\"\n        role=\"presentation\"\n        [attr.aria-hidden]=\"!isActive\"\n        [hidden]=\"!isActive\">\n        <div [ngClass]=\"{'arrow-up': !isDropdownOpenTowardsTop(), 'arrow-down': isDropdownOpenTowardsTop()}\" class=\"arrow-2\"></div>\n        <div [ngClass]=\"{'arrow-up': !isDropdownOpenTowardsTop(), 'arrow-down': isDropdownOpenTowardsTop()}\"></div>\n        <div class=\"list-area\" *ngIf=\"isActive\" [ngClass]=\"{'single-select-mode': settings.singleSelection }\">\n            <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection && hasSelectableItems()\"\n                >\n                <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                [id]=\"id\" (change)=\"toggleSelectAll($event)\"/>\n                <label [for]=\"id\">\n                    <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n                    <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n                </label>\n            </div>\n            <img class=\"loading-icon\" *ngIf=\"loading\" src=\"assets/img/loading.gif\" [attr.alt]=\"settings.loadingText\" />\n            <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter\">\n                <span class=\"c-search\" id=\"searchIcon\" aria-hidden=\"true\">\n                    <c-icon [name]=\"'search'\"></c-icon>\n                </span>\n                <button type=\"button\" *ngIf=\"!settings.lazyLoading\" [hidden]=\"filter == undefined || filter?.length == 0\" class=\"c-clear\" (click)=\"clearSearch()\" (keydown)=\"onInlineActionKeydown($event)\" [attr.aria-label]=\"getClearSearchAriaLabel()\">\n                    <c-icon [name]=\"'clear'\"></c-icon>\n                </button>\n                <button type=\"button\" *ngIf=\"settings.lazyLoading\" [hidden]=\"filter == undefined || filter?.length == 0\" class=\"c-clear\" (click)=\"resetInfiniteSearch()\" (keydown)=\"onInlineActionKeydown($event)\" [attr.aria-label]=\"getClearSearchAriaLabel()\">\n                    <c-icon [name]=\"'clear'\"></c-icon>\n                </button>\n\n                <input class=\"c-input\" *ngIf=\"settings.groupBy && !settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                    [(ngModel)]=\"filter\" (keyup)=\"filterGroupedList()\" (keydown)=\"onSearchKeydown($event)\" [attr.aria-label]=\"getSearchAriaLabel()\">\n                <input class=\"c-input\" *ngIf=\"!settings.groupBy && !settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                    [(ngModel)]=\"filter\" (keyup)=\"filteritems($event)\" (keydown)=\"onSearchKeydown($event)\" [attr.aria-label]=\"getSearchAriaLabel()\">\n                <input class=\"c-input\" *ngIf=\"settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                    [(ngModel)]=\"filter\" (keyup)=\"onKeyUp($event)\" (keydown)=\"onSearchKeydown($event)\" [attr.aria-label]=\"getSearchAriaLabel()\">\n                <!--            <input class=\"c-input\" *ngIf=\"!settings.lazyLoading && !searchTempl && settings.groupBy\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                [(ngModel)]=\"filter\" (keyup)=\"filterGroupList($event)\">-->\n                <c-templateRenderer *ngIf=\"searchTempl\" [data]=\"searchTempl\" [item]=\"item\"></c-templateRenderer>\n            </div>\n            <div class=\"filter-select-all\" *ngIf=\"!settings.lazyLoading && settings.enableFilterSelectAll && !isDisabledItemPresent\">\n                <div class=\"pure-checkbox select-all\" *ngIf=\"!settings.groupBy && filter?.length > 0 && filterLength > 0  && !settings.singleSelection\" (click)=\"toggleFilterSelectAll()\" (keydown)=\"onSelectAllKeydown($event, 'filter')\" tabindex=\"0\" role=\"checkbox\" [attr.aria-checked]=\"isFilterSelectAll\">\n                    <input type=\"checkbox\" [checked]=\"isFilterSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                    aria-hidden=\"true\" tabindex=\"-1\" (click)=\"$event.stopPropagation()\" (change)=\"toggleFilterSelectAll()\"/>\n                    <label>\n                        <span [hidden]=\"isFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n                        <span [hidden]=\"!isFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n                    </label>\n                </div>\n                <div class=\"pure-checkbox select-all\" *ngIf=\"settings.groupBy && filter?.length > 0 && groupedData?.length > 0  && !settings.singleSelection\" (click)=\"toggleFilterSelectAll()\" (keydown)=\"onSelectAllKeydown($event, 'filter')\" tabindex=\"0\" role=\"checkbox\" [attr.aria-checked]=\"isFilterSelectAll\">\n                    <input type=\"checkbox\" [checked]=\"isFilterSelectAll && filter?.length > 0\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                    aria-hidden=\"true\" tabindex=\"-1\" (click)=\"$event.stopPropagation()\" (change)=\"toggleFilterSelectAll()\"/>\n                    <label>\n                        <span [hidden]=\"isFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n                        <span [hidden]=\"!isFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n                    </label>\n                </div>\n            </div>\n            <div class=\"filter-select-all\" *ngIf=\"settings.lazyLoading && settings.enableFilterSelectAll && !isDisabledItemPresent && !settings.singleSelection\">\n                <div class=\"pure-checkbox select-all\" *ngIf=\"filter?.length > 0 && infiniteFilterLength > 0\" (click)=\"toggleInfiniteFilterSelectAll()\" (keydown)=\"onSelectAllKeydown($event, 'infinite-filter')\" tabindex=\"0\" role=\"checkbox\" [attr.aria-checked]=\"isInfiniteFilterSelectAll\">\n                    <input type=\"checkbox\" [checked]=\"isInfiniteFilterSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                    aria-hidden=\"true\" tabindex=\"-1\" (click)=\"$event.stopPropagation()\" (change)=\"toggleInfiniteFilterSelectAll()\"/>\n                    <label>\n                        <span [hidden]=\"isInfiniteFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n                        <span [hidden]=\"!isInfiniteFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n                    </label>\n                </div>\n            </div>\n            <div class=\"filter-select-all\" *ngIf=\"filter?.length\">\n                <div class=\"btn-container\" *ngIf=\"settings.addNewItemOnFilter\">\n                    <button class=\"c-btn btn-iceblue\" (click)=\"addFilterNewItem()\">{{settings.addNewButtonText}}</button>\n                </div>\n            </div>\n\n            <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <li *ngFor=\"let item of data; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,i,'default')\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-checked]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,i,'default')\" (keydown)=\"onOptionKeydown(item,i,$event,'default')\" [ngClass]=\"{'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\">\n                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                        <label>{{item[settings.labelKey]}}</label>\n                    </li>\n                </ul>\n            </div>\n            <!-- lazy loading -->\n            <div *ngIf=\"!settings.groupBy && settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul virtualScroller #scroll [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                    (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <li *ngFor=\"let item of scroll.viewPortItems; let i = index;\" (click)=\"onItemClick(item,getVirtualItemIndex(item,i,scroll),$event)\"\n                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,getVirtualItemIndex(item,i,scroll),'lazy')\" [attr.data-virtual-index]=\"getVirtualItemIndex(item,i,scroll)\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-checked]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,getVirtualItemIndex(item,i,scroll),'lazy')\" (keydown)=\"onOptionKeydown(item,getVirtualItemIndex(item,i,scroll),$event,'lazy',scroll)\" [ngClass]=\"{'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\">\n                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                        <label>{{item[settings.labelKey]}}</label>\n                    </li>\n                </ul>\n            </div>\n            <!-- custom template -->\n            <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <li *ngFor=\"let item of data; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,i,'custom')\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-checked]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,i,'custom')\" (keydown)=\"onOptionKeydown(item,i,$event,'custom')\" [ngClass]=\"{'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\">\n                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                        <label></label>\n                        <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\" [context]=\"getTemplateContext(item,i,'custom')\"></c-templateRenderer>\n                    </li>\n                </ul>\n            </div>\n            <!-- lazy loading and custom template -->\n            <div *ngIf=\"!settings.groupBy && settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul virtualScroller #scroll2 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                    (vsEnd)=\"onScrollEnd($event)\" class=\"lazyContainer\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <li *ngFor=\"let item of scroll2.viewPortItems; let i = index;\" (click)=\"onItemClick(item,getVirtualItemIndex(item,i,scroll2),$event)\"\n                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,getVirtualItemIndex(item,i,scroll2),'lazy-custom')\" [attr.data-virtual-index]=\"getVirtualItemIndex(item,i,scroll2)\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-checked]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,getVirtualItemIndex(item,i,scroll2),'lazy-custom')\" (keydown)=\"onOptionKeydown(item,getVirtualItemIndex(item,i,scroll2),$event,'lazy-custom',scroll2)\" [ngClass]=\"{'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\">\n                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                        <label></label>\n                        <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\" [context]=\"getTemplateContext(item,getVirtualItemIndex(item,i,scroll2),'lazy-custom')\"></c-templateRenderer>\n                    </li>\n                </ul>\n            </div>\n            <!-- lazy loading, group By and custom template -->\n            <div *ngIf=\"settings.groupBy && settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul virtualScroller #scroll3 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                    (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <span *ngFor=\"let item of scroll3.viewPortItems; let i = index;\">\n                        <li (click)=\"onItemClick(item,getVirtualItemIndex(item,i,scroll3),$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item)}\"\n                            class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,getVirtualItemIndex(item,i,scroll3),'lazy-group-custom')\" [attr.data-virtual-index]=\"getVirtualItemIndex(item,i,scroll3)\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-checked]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,getVirtualItemIndex(item,i,scroll3),'lazy-group-custom')\" (keydown)=\"onOptionKeydown(item,getVirtualItemIndex(item,i,scroll3),$event,'lazy-group-custom',scroll3)\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            aria-hidden=\"true\" tabindex=\"-1\"/>\n                            <label></label>\n                            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\" [context]=\"getTemplateContext(item,getVirtualItemIndex(item,i,scroll3),'lazy-group-custom')\"></c-templateRenderer>\n                        </li>\n                        <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection}\"\n                            class=\"pure-checkbox\" role=\"presentation\">\n                            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            aria-hidden=\"true\" tabindex=\"-1\"/>\n                            <label></label>\n                            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\" [context]=\"getTemplateContext(item,i,'lazy-group-heading')\"></c-templateRenderer>\n                        </li>\n                    </span>\n                </ul>\n            </div>\n            <!-- group By and custom template -->\n            <div *ngIf=\"settings.groupBy && !settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <span *ngFor=\"let item of groupedData; let i = index;\">\n                        <li (click)=\"selectGroup(item)\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': item.selected == true, 'is-disabled': isOptionDisabled(item)}\"\n                            class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,i,'group-custom')\" [attr.aria-selected]=\"item.selected\" [attr.aria-checked]=\"item.selected\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,i,'group-custom')\" (keydown)=\"onGroupKeydown(item,i,$event,'group-custom')\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\" [checked]=\"item.selected\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            aria-hidden=\"true\" tabindex=\"-1\"/>\n                            <label>{{item[settings.labelKey]}}</label>\n                            <ul class=\"lazyContainer\">\n                                <span *ngFor=\"let val of item.list ; let j = index;\">\n                                    <li (click)=\"onItemClick(val,j,$event); $event.stopPropagation()\" [ngClass]=\"{'grp-title': val.grpTitle,'grp-item': !val.grpTitle && !settings.singleSelection, 'selected-item': isSelected(val) == true, 'is-disabled': isOptionDisabled(val)}\"\n                                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(val,j,'group-custom-'+i)\" [attr.aria-selected]=\"isSelected(val)\" [attr.aria-checked]=\"isSelected(val)\" [attr.aria-disabled]=\"isOptionDisabled(val)\" [attr.tabindex]=\"isOptionDisabled(val) ? -1 : 0\" (focus)=\"setActiveDescendant(val,j,'group-custom-'+i)\" (keydown)=\"onOptionKeydown(val,j,$event,'group-custom-'+i)\">\n                                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(val)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(val)) || val.disabled\"\n                                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                                        <label></label>\n                                        <c-templateRenderer [data]=\"itemTempl\" [item]=\"val\" [context]=\"getTemplateContext(val,j,'group-custom-'+i,item)\"></c-templateRenderer>\n                                    </li>\n                                </span>\n                            </ul>\n\n                        </li>\n                    </span>\n                </ul>\n            </div>\n            <!-- lazy loading, group By -->\n            <div *ngIf=\"settings.groupBy && settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <virtual-scroller [items]=\"groupedData\" (vsUpdate)=\"viewPortItems = $event\" (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n                    <ul virtualScroller #scroll4 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                        (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                        <span *ngFor=\"let item of scroll4.viewPortItems; let i = index;\">\n                            <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true }\"\n                                class=\"pure-checkbox\" role=\"presentation\">\n                                <input *ngIf=\"settings.showCheckbox && !item.grpTitle && !settings.singleSelection\" type=\"checkbox\" [checked]=\"isSelected(item)\"\n                                    [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                                    aria-hidden=\"true\" tabindex=\"-1\"/>\n                                <label>{{item[settings.labelKey]}}</label>\n                            </li>\n                            <li (click)=\"onItemClick(item,getVirtualItemIndex(item,i,scroll4),$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\"\n                                class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,getVirtualItemIndex(item,i,scroll4),'lazy-group')\" [attr.data-virtual-index]=\"getVirtualItemIndex(item,i,scroll4)\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-checked]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,getVirtualItemIndex(item,i,scroll4),'lazy-group')\" (keydown)=\"onOptionKeydown(item,getVirtualItemIndex(item,i,scroll4),$event,'lazy-group',scroll4)\">\n                                <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                                aria-hidden=\"true\" tabindex=\"-1\"/>\n                                <label>{{item[settings.labelKey]}}</label>\n                            </li>\n                        </span>\n                    </ul>\n                </virtual-scroller>\n            </div>\n            <!-- group By -->\n            <div *ngIf=\"settings.groupBy && !settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <span *ngFor=\"let item of groupedData ; let i = index;\">\n                        <li (click)=\"selectGroup(item)\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': item.selected == true, 'is-disabled': isOptionDisabled(item)}\"\n                            class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,i,'group')\" [attr.aria-selected]=\"item.selected\" [attr.aria-checked]=\"item.selected\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,i,'group')\" (keydown)=\"onGroupKeydown(item,i,$event,'group')\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\" [checked]=\"item.selected\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            aria-hidden=\"true\" tabindex=\"-1\"/>\n                            <label>{{item[settings.labelKey]}}</label>\n                            <ul class=\"lazyContainer\">\n                                <span *ngFor=\"let val of item.list ; let j = index;\">\n                                    <li (click)=\"onItemClick(val,j,$event); $event.stopPropagation()\" [ngClass]=\"{'selected-item': isSelected(val) == true,'grp-title': val.grpTitle,'grp-item': !val.grpTitle && !settings.singleSelection, 'is-disabled': isOptionDisabled(val)}\"\n                                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(val,j,'group-'+i)\" [attr.aria-selected]=\"isSelected(val)\" [attr.aria-checked]=\"isSelected(val)\" [attr.aria-disabled]=\"isOptionDisabled(val)\" [attr.tabindex]=\"isOptionDisabled(val) ? -1 : 0\" (focus)=\"setActiveDescendant(val,j,'group-'+i)\" (keydown)=\"onOptionKeydown(val,j,$event,'group-'+i)\">\n                                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(val)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(val)) || val.disabled\"\n                                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                                        <label>{{val[settings.labelKey]}}</label>\n                                    </li>\n                                </span>\n                            </ul>\n                        </li>\n                    </span>\n                    <!-- <span *ngFor=\"let item of groupedData ; let i = index;\">\n                    <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n                    <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\n                    <label>{{item[settings.labelKey]}}</label>\n                </li>\n                <li *ngIf=\"item.grpTitle && !settings.selectGroup\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n                    <input *ngIf=\"settings.showCheckbox && settings.selectGroup\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\n                    <label>{{item[settings.labelKey]}}</label>\n                </li>\n                 <li  (click)=\"selectGroup(item)\" *ngIf=\"item.grpTitle && settings.selectGroup\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n                    <input *ngIf=\"settings.showCheckbox && settings.selectGroup\" type=\"checkbox\" [checked]=\"item.selected\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\n                    <label>{{item[settings.labelKey]}}</label>\n                </li>\n                </span> -->\n                </ul>\n            </div>\n            <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">{{settings.noDataLabel}}</h5>\n        </div>\n    </div>\n</div>\n", styles: ["virtual-scroll{display:block;width:100%}.stackline-dropdown,.dropdown-list.skin-material,.dropdown-list.theme-material{--ms-primary: #3f51b5;--ms-primary-soft: rgba(63, 81, 181, .12);--ms-surface: #ffffff;--ms-surface-soft: #f5f7fb;--ms-surface-muted: #e8eaf6;--ms-outline: #c5cae9;--ms-outline-strong: #7986cb;--ms-on-surface: #212121;--ms-on-surface-muted: #5f6368;--ms-chip-bg: #e8eaf6;--ms-chip-text: #303f9f;--ms-chip-remove: #303f9f;--ms-shadow: 0 1px 2px rgba(33, 33, 33, .16), 0 12px 32px rgba(63, 81, 181, .12);--ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, .12), 0 4px 12px rgba(33, 33, 33, .08);color:var(--ms-on-surface, #212121);font:inherit}.stackline-dropdown{position:relative;display:block;width:100%}.selected-list{width:100%}.c-btn{position:relative;display:flex;align-items:center;align-content:center;box-sizing:border-box;flex-wrap:wrap;gap:8px;width:100%;min-height:56px;padding:11px 54px 11px 16px;border-radius:18px;border:1px solid var(--ms-outline, #c5cae9);background:var(--ms-surface, #ffffff);box-shadow:var(--ms-shadow-soft, 0 1px 2px rgba(33, 33, 33, .12), 0 4px 12px rgba(33, 33, 33, .08));cursor:pointer;line-height:1.45;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease,transform .16s ease}.c-btn.has-selection{padding-right:104px}.c-btn:hover{border-color:var(--ms-outline-strong, #7986cb)}.c-btn.is-active{border-color:var(--ms-primary, #3f51b5);box-shadow:0 0 0 3px #6750a424,var(--ms-shadow-soft, 0 1px 2px rgba(33, 33, 33, .12), 0 4px 12px rgba(33, 33, 33, .08))}.c-btn:focus-visible{outline:3px solid rgba(63,81,181,.32);outline-offset:2px}.c-btn.disabled{cursor:not-allowed;opacity:.72}.c-placeholder,.c-single-value{display:inline-flex;align-items:center;align-self:center;justify-content:flex-start;min-width:0;max-width:100%;color:var(--ms-on-surface-muted, #5f6368);font-size:.95rem;line-height:1.25;text-align:left}.c-btn.has-selection .c-single-value,.c-btn.has-selection .c-placeholder{color:var(--ms-on-surface, #212121);font-weight:500}.c-list{display:flex;flex:1 1 auto;flex-wrap:wrap;gap:8px;margin:0;padding:0;min-width:0}.c-chip-list{padding-right:8px}.c-token{position:relative;display:inline-block;vertical-align:middle;min-height:32px;max-width:100%;padding:6px 30px 6px 12px;border-radius:999px;background:var(--ms-chip-bg, #e8eaf6);color:var(--ms-chip-text, #303f9f);box-shadow:inset 0 0 0 1px #6750a414;line-height:1.35;white-space:normal;overflow-wrap:anywhere}.c-token .c-label{display:inline-flex;align-items:center;min-width:0;max-width:100%;line-height:1.3;font-weight:500;white-space:normal;overflow-wrap:anywhere}.c-remove{position:absolute;right:10px;top:50%;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;transform:translateY(-50%);color:var(--ms-chip-remove, #303f9f)}button.c-remove,button.c-clear,button.c-arrow-toggle{border:0;padding:0;background:transparent;font:inherit;cursor:pointer}button.c-arrow-toggle:disabled{cursor:not-allowed}.c-remove:focus-visible,.list-filter .c-clear:focus-visible,.c-arrow-toggle:focus-visible{outline:3px solid rgba(63,81,181,.32);outline-offset:2px}.c-remove svg,.c-angle-down svg,.c-angle-up svg{fill:currentColor}.c-remove c-icon{display:inline-flex;width:10px;height:10px;line-height:0}.clear-all c-icon{width:12px;height:12px}.clear-all{position:absolute;top:50%;right:42px;width:20px;height:20px;transform:translateY(-50%);color:var(--ms-on-surface-muted, #5f6368)}.countplaceholder{position:absolute;top:50%;right:76px;display:inline-flex;align-items:center;justify-content:center;height:20px;transform:translateY(-50%);color:var(--ms-on-surface-muted, #5f6368);font-size:.8rem;font-weight:600;line-height:1;white-space:nowrap;pointer-events:none}.c-angle-down,.c-angle-up{position:absolute;top:50%;right:16px;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;transform:translateY(-50%);color:var(--ms-on-surface-muted, #5f6368);pointer-events:auto}.dropdown-list{position:absolute;right:0;left:0;box-sizing:border-box;width:auto;min-width:0;max-width:100%;padding-top:8px;z-index:99999}.dropdown-list[hidden]{display:none!important}.dropdown-list.is-open,.dropdown-list.tagToBody{position:fixed;right:auto;max-width:calc(100vw - 16px);z-index:100000}.arrow-up,.arrow-down,.arrow-2{display:none}.list-area{box-sizing:border-box;max-width:100%;overflow:hidden;border-radius:22px;background:var(--ms-surface, #ffffff);border:1px solid var(--ms-outline, #c5cae9);box-shadow:var(--ms-shadow, 0 1px 2px rgba(33, 33, 33, .16), 0 12px 32px rgba(63, 81, 181, .12))}.select-all,.filter-select-all{padding:10px 14px;border-bottom:1px solid rgba(125,119,134,.16);background:var(--ms-surface-soft, #f5f7fb)}.list-filter{position:relative;display:flex;align-items:center;min-height:52px;padding-left:48px;padding-right:44px;border-bottom:1px solid rgba(125,119,134,.16);background:var(--ms-surface, #ffffff)}.list-filter .c-input,.list-filter input{width:100%;height:100%;border:0;background:transparent;color:var(--ms-on-surface, #212121);font:inherit}.list-filter .c-input::placeholder,.list-filter input::placeholder{color:var(--ms-on-surface-muted, #5f6368)}.list-filter .c-input:focus,.list-filter input:focus{outline:none}.list-filter .c-search,.list-filter .c-clear{position:absolute;top:50%;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;transform:translateY(-50%);color:var(--ms-on-surface-muted, #5f6368)}.list-filter .c-search{left:16px}.list-filter .c-clear{right:16px;cursor:pointer}.btn-container{padding:10px 14px 14px;text-align:center}.btn-iceblue{width:100%;min-height:40px;border-radius:999px;border:1px solid transparent;background:var(--ms-primary, #3f51b5);color:#fff;font-weight:600}.dropdown-list ul{list-style:none;margin:0;padding:8px;overflow:auto;background:var(--ms-surface, #ffffff)}.dropdown-list ul li{align-items:center;min-height:0;margin:4px;padding:12px 14px;border-radius:14px;cursor:pointer;text-align:left;line-height:1.35;transition:background-color .16s ease,color .16s ease}.dropdown-list ul li:hover{background:var(--ms-surface-soft, #f5f7fb)}.dropdown-list ul li:focus-visible{outline:3px solid rgba(63,81,181,.32);outline-offset:2px}.dropdown-option.is-disabled{cursor:not-allowed;opacity:.58}.selected-item{background:var(--ms-primary-soft, rgba(63, 81, 181, .12))!important;color:var(--ms-primary, #3f51b5)}.selected-item:hover{background:#6750a42e!important}.grp-item{padding-left:42px!important}.grp-title{margin-top:6px;padding-top:10px!important;padding-bottom:8px!important;background:transparent!important;color:var(--ms-on-surface-muted, #5f6368);cursor:default!important}.grp-title label{margin-bottom:0!important;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.grp-title:hover{background:transparent!important}.pure-checkbox{position:relative}.pure-checkbox input[type=checkbox]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pure-checkbox input[type=checkbox]+label{position:relative;display:block;width:100%;margin:0;padding-left:32px;color:inherit;cursor:pointer;font-weight:500;-webkit-user-select:none;user-select:none}.pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:0;width:18px;height:18px;margin-top:-10px;border:2px solid var(--ms-outline-strong, #7986cb);border-radius:6px;background:var(--ms-surface, #ffffff);transition:all .18s ease}.pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:11px;width:8px;height:4px;margin-top:0;border-style:solid;border-width:0 0 2px 2px;border-color:#fff;transform:translate(-50%,-58%) rotate(-45deg) scale(0);transform-origin:50%;transition:transform .16s ease-out}.pure-checkbox input[type=checkbox]:focus+label:before,.pure-checkbox input[type=checkbox]:hover+label:before{border-color:var(--ms-primary, #3f51b5);box-shadow:0 0 0 4px #3f51b51f}.pure-checkbox input[type=checkbox]:checked+label:before{border-color:var(--ms-primary, #3f51b5);background:var(--ms-primary, #3f51b5)}.pure-checkbox input[type=checkbox]:checked+label:after{transform:translate(-50%,-58%) rotate(-45deg) scale(1)}.pure-checkbox input[type=checkbox]:disabled+label{color:#b1acb8;cursor:not-allowed}.pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#d5d0db;background:#f2edf7;box-shadow:none}.single-select-mode .pure-checkbox input[type=checkbox]+label:before,.single-select-mode .pure-checkbox input[type=checkbox]+label:after{opacity:0}.single-select-mode .pure-checkbox input[type=checkbox]+label{padding-left:0}.list-message,.nodata-label{margin:0;padding:22px 16px 24px;color:var(--ms-on-surface-muted, #5f6368);text-align:center;font-size:.95rem;font-weight:500}.list-grp{padding:0 15px!important}.list-grp h4{margin:16px 0 6px;color:var(--ms-on-surface, #212121);font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.list-grp>li{padding-left:15px!important}.loading-icon{position:absolute;top:18px;right:16px;width:18px;z-index:2}.dropdown-list ::-webkit-scrollbar{width:10px}.dropdown-list ::-webkit-scrollbar-thumb{background:#7d778657;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.dropdown-list ::-webkit-scrollbar-track{background:transparent}.stackline-dropdown.theme-dark,.dropdown-list.theme-dark{--ms-primary: #8ab4f8;--ms-primary-soft: rgba(138, 180, 248, .18);--ms-surface: #151a23;--ms-surface-soft: #202736;--ms-surface-muted: #111722;--ms-outline: #384456;--ms-outline-strong: #8ab4f8;--ms-on-surface: #edf2f7;--ms-on-surface-muted: #aab6c5;--ms-chip-bg: #263247;--ms-chip-text: #d7e6ff;--ms-chip-remove: #d7e6ff;--ms-shadow: 0 20px 50px rgba(0, 0, 0, .42);--ms-shadow-soft: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 24px rgba(0, 0, 0, .28)}.stackline-dropdown.theme-custom,.dropdown-list.theme-custom{--ms-primary: var(--stackline-ms-primary, #0f766e);--ms-primary-soft: var(--stackline-ms-primary-soft, rgba(15, 118, 110, .14));--ms-surface: var(--stackline-ms-surface, #ffffff);--ms-surface-soft: var(--stackline-ms-surface-soft, #ecfdf5);--ms-surface-muted: var(--stackline-ms-surface-muted, #d1fae5);--ms-outline: var(--stackline-ms-outline, #99f6e4);--ms-outline-strong: var(--stackline-ms-outline-strong, #0f766e);--ms-on-surface: var(--stackline-ms-on-surface, #102a2a);--ms-on-surface-muted: var(--stackline-ms-on-surface-muted, #47615f);--ms-chip-bg: var(--stackline-ms-chip-bg, #ccfbf1);--ms-chip-text: var(--stackline-ms-chip-text, #115e59);--ms-chip-remove: var(--stackline-ms-chip-remove, #115e59);--ms-shadow: var(--stackline-ms-shadow, 0 18px 42px rgba(15, 118, 110, .15));--ms-shadow-soft: var(--stackline-ms-shadow-soft, 0 1px 2px rgba(15, 118, 110, .16), 0 8px 18px rgba(15, 118, 110, .09))}.stackline-dropdown.theme-classic,.dropdown-list.theme-classic{--ms-primary: #0079fe;--ms-primary-soft: #e9f4ff;--ms-surface: #ffffff;--ms-surface-soft: #f5f5f5;--ms-outline: #cccccc;--ms-outline-strong: #0079fe;--ms-on-surface: #333333;--ms-on-surface-muted: #333333;--ms-chip-bg: #0079fe;--ms-chip-text: #ffffff;--ms-chip-remove: #ffffff;--ms-shadow: 0 1px 5px #959595;--ms-shadow-soft: 0 1px 5px #959595;color:#333}.stackline-dropdown.theme-classic .selected-list{width:100%}.stackline-dropdown.theme-classic .c-btn{display:flex;align-items:center;align-content:center;flex-wrap:nowrap;gap:6px;min-height:42px;padding:10px 68px 10px 10px;border:1px solid #cccccc;border-radius:3px;background:#fff;box-shadow:0 1px 5px #959595;color:#333;font-size:14px;line-height:1.35}.stackline-dropdown.theme-classic .c-btn.has-selection{padding-right:104px}.stackline-dropdown.theme-classic .c-btn.is-active,.stackline-dropdown.theme-classic .c-btn:hover{border-color:#ccc;box-shadow:0 1px 5px #959595}.stackline-dropdown.theme-classic .c-btn.disabled{background:#ccc;opacity:1}.stackline-dropdown.theme-classic .c-placeholder,.stackline-dropdown.theme-classic .c-single-value{color:#333;font-size:14px}.stackline-dropdown.theme-classic .c-list{display:flex;flex:1 1 auto;align-items:center;flex-wrap:wrap;gap:4px;width:auto;min-width:0;margin:0;padding:0}.stackline-dropdown.theme-classic .c-chip-list{padding-right:0}.stackline-dropdown.theme-classic .c-token{display:inline-block;min-height:0;margin:2px 0 0;padding:2px 24px 2px 6px;border-radius:2px;background:#0079fe;box-shadow:none;color:#fff;line-height:1.4}.stackline-dropdown.theme-classic .c-token .c-label{display:inline;color:#fff;font-size:14px;font-weight:400;line-height:1.4}.stackline-dropdown.theme-classic .c-remove{right:5px;width:14px;height:14px;color:#fff}.stackline-dropdown.theme-classic .c-remove c-icon{width:9px;height:9px}.stackline-dropdown.theme-classic .clear-all{right:42px;width:18px;height:18px;color:#333}.stackline-dropdown.theme-classic .clear-all c-icon{width:11px;height:11px}.stackline-dropdown.theme-classic .countplaceholder{right:76px;color:#333;font-size:14px;font-weight:400}.stackline-dropdown.theme-classic .c-angle-down,.stackline-dropdown.theme-classic .c-angle-up{right:10px;width:20px;height:20px;color:#333}.stackline-dropdown.theme-classic .dropdown-list{padding-top:14px;padding-bottom:0;z-index:9999}.stackline-dropdown.theme-classic .dropdown-list.opens-up{padding-top:0;padding-bottom:14px}.stackline-dropdown.theme-classic .dropdown-list.opens-down{padding-top:14px;padding-bottom:0}.stackline-dropdown.theme-classic .arrow-up{display:block;position:absolute;top:0;width:0;height:0;margin-left:15px;border-right:13px solid transparent;border-bottom:15px solid #ffffff;border-left:13px solid transparent}.stackline-dropdown.theme-classic .arrow-2{top:-1px;border-bottom-color:#ccc}.stackline-dropdown.theme-classic .arrow-down{display:block;position:absolute;top:auto;bottom:0;width:0;height:0;margin-left:15px;border-right:13px solid transparent;border-top:15px solid #ffffff;border-left:13px solid transparent}.stackline-dropdown.theme-classic .arrow-down.arrow-2{top:auto;bottom:-1px;border-top-color:#ccc}.stackline-dropdown.theme-classic .list-area{overflow:hidden;margin:0;border:1px solid #cccccc;border-radius:3px;background:#fff;box-shadow:0 1px 5px #959595}.stackline-dropdown.theme-classic .select-all,.stackline-dropdown.theme-classic .filter-select-all{padding:10px;border-bottom:1px solid #cccccc;background:#fff}.stackline-dropdown.theme-classic .list-filter{display:block;min-height:35px;padding:0;border-bottom:1px solid #cccccc;background:#fff}.stackline-dropdown.theme-classic .list-filter .c-input,.stackline-dropdown.theme-classic .list-filter input{height:35px;padding:0 35px;color:#333}.stackline-dropdown.theme-classic .list-filter .c-search{left:13px}.stackline-dropdown.theme-classic .list-filter .c-clear{right:13px}.stackline-dropdown.theme-classic .btn-container{padding:10px}.stackline-dropdown.theme-classic .btn-iceblue{min-height:35px;border-radius:3px;background:#0079fe}.stackline-dropdown.theme-classic .dropdown-list ul{margin:0;padding:0}.stackline-dropdown.theme-classic .dropdown-list ul li{min-height:0;margin:0;padding:10px;border-radius:0;color:#333;line-height:1.35}.stackline-dropdown.theme-classic .dropdown-list ul li:hover{background:#f5f5f5}.stackline-dropdown.theme-classic .selected-item,.stackline-dropdown.theme-classic .selected-item:hover{background:#e9f4ff!important;color:#333}.stackline-dropdown.theme-classic .grp-item{padding-left:30px!important}.stackline-dropdown.theme-classic .grp-title{color:#000}.stackline-dropdown.theme-classic .grp-title label,.stackline-dropdown.theme-classic .list-grp h4{font-size:14px;font-weight:700;letter-spacing:0;text-transform:capitalize}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]+label{padding-left:2em;color:#000;font-weight:300}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]+label:before{width:14px;height:14px;margin-top:-9px;border:2px solid #0079fe;border-radius:0;background:#fff}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]+label:after{top:50%;left:9px;width:8px;height:3px;margin-top:0;border-width:0 0 3px 3px;border-color:#fff;background:transparent}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]:hover+label:before{border-color:#0079fe;background-color:#f2f2f2;box-shadow:none}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]:checked+label:before{border-color:#0079fe;background:#0079fe}.stackline-dropdown.theme-classic .single-select-mode .pure-checkbox input[type=checkbox]+label{padding-left:0}.dropdown-list.theme-classic{padding-top:14px;padding-bottom:0;z-index:100000}.dropdown-list.theme-classic.opens-up{padding-top:0;padding-bottom:14px}.dropdown-list.theme-classic.opens-down{padding-top:14px;padding-bottom:0}.dropdown-list.theme-classic .arrow-up{display:block;position:absolute;top:0;width:0;height:0;margin-left:15px;border-right:13px solid transparent;border-bottom:15px solid #ffffff;border-left:13px solid transparent}.dropdown-list.theme-classic .arrow-2{top:-1px;border-bottom-color:#ccc}.dropdown-list.theme-classic .arrow-down{display:block;position:absolute;top:auto;bottom:0;width:0;height:0;margin-left:15px;border-right:13px solid transparent;border-top:15px solid #ffffff;border-left:13px solid transparent}.dropdown-list.theme-classic .arrow-down.arrow-2{top:auto;bottom:-1px;border-top-color:#ccc}.dropdown-list.theme-classic .list-area{overflow:hidden;margin:0;border:1px solid #cccccc;border-radius:3px;background:#fff;box-shadow:0 1px 5px #959595}.dropdown-list.theme-classic .select-all,.dropdown-list.theme-classic .filter-select-all{padding:10px;border-bottom:1px solid #cccccc;background:#fff}.dropdown-list.theme-classic .list-filter{display:block;min-height:35px;padding:0;border-bottom:1px solid #cccccc;background:#fff}.dropdown-list.theme-classic .list-filter .c-input,.dropdown-list.theme-classic .list-filter input{height:35px;padding:0 35px;color:#333}.dropdown-list.theme-classic .list-filter .c-search{left:13px}.dropdown-list.theme-classic .list-filter .c-clear{right:13px}.dropdown-list.theme-classic .btn-container{padding:10px}.dropdown-list.theme-classic .btn-iceblue{min-height:35px;border-radius:3px;background:#0079fe}.dropdown-list.theme-classic ul{margin:0;padding:0}.dropdown-list.theme-classic ul li{min-height:0;margin:0;padding:10px;border-radius:0;color:#333;line-height:1.35}.dropdown-list.theme-classic ul li:hover{background:#f5f5f5}.dropdown-list.theme-classic .selected-item,.dropdown-list.theme-classic .selected-item:hover{background:#e9f4ff!important;color:#333}.dropdown-list.theme-classic .grp-item{padding-left:30px!important}.dropdown-list.theme-classic .grp-title{color:#000}.dropdown-list.theme-classic .grp-title label,.dropdown-list.theme-classic .list-grp h4{font-size:14px;font-weight:700;letter-spacing:0;text-transform:capitalize}.dropdown-list.theme-classic .pure-checkbox input[type=checkbox]+label{padding-left:2em;color:#000;font-weight:300}.dropdown-list.theme-classic .pure-checkbox input[type=checkbox]+label:before{width:14px;height:14px;margin-top:-9px;border:2px solid #0079fe;border-radius:0;background:#fff}.dropdown-list.theme-classic .pure-checkbox input[type=checkbox]+label:after{top:50%;left:9px;width:8px;height:3px;margin-top:0;border-width:0 0 3px 3px;border-color:#fff;background:transparent}.dropdown-list.theme-classic .pure-checkbox input[type=checkbox]:focus+label:before,.dropdown-list.theme-classic .pure-checkbox input[type=checkbox]:hover+label:before{border-color:#0079fe;background-color:#f2f2f2;box-shadow:none}.dropdown-list.theme-classic .pure-checkbox input[type=checkbox]:checked+label:before{border-color:#0079fe;background:#0079fe}.dropdown-list.theme-classic .single-select-mode .pure-checkbox input[type=checkbox]+label{padding-left:0}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i3.DefaultValueAccessor), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i3.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i3.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i0.forwardRef(() => VirtualScrollerComponent), selector: "virtual-scroller,[virtualScroller]", inputs: ["executeRefreshOutsideAngularZone", "enableUnequalChildrenSizes", "useMarginInsteadOfTranslate", "modifyOverflowStyleOfParentScroll", "stripedTable", "scrollbarWidth", "scrollbarHeight", "childWidth", "childHeight", "ssrChildWidth", "ssrChildHeight", "ssrViewportWidth", "ssrViewportHeight", "bufferAmount", "scrollAnimationTime", "resizeBypassRefreshThreshold", "scrollThrottlingTime", "scrollDebounceTime", "checkResizeInterval", "items", "compareItems", "horizontal", "parentScroll"], outputs: ["vsUpdate", "vsChange", "vsStart", "vsEnd"], exportAs: ["virtualScroller"] }, { kind: "directive", type: i0.forwardRef(() => ClickOutsideDirective), selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "component", type: i0.forwardRef(() => TemplateRenderer), selector: "c-templateRenderer", inputs: ["data", "item", "context"] }, { kind: "component", type: i0.forwardRef(() => CIcon), selector: "c-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: AngularMultiSelect, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: ListFilterPipe }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: AngularMultiSelect, isStandalone: false, selector: "angular-multiselect, angular2-multiselect", inputs: { data: "data", settings: "settings", loading: "loading" }, outputs: { onSelect: "onSelect", onDeSelect: "onDeSelect", onSelectAll: "onSelectAll", onDeSelectAll: "onDeSelectAll", onOpen: "onOpen", onClose: "onClose", onScrollToEnd: "onScrollToEnd", onFilterSelectAll: "onFilterSelectAll", onFilterDeSelectAll: "onFilterDeSelectAll", onAddFilterNewItem: "onAddFilterNewItem", onGroupSelect: "onGroupSelect", onGroupDeSelect: "onGroupDeSelect" }, host: { listeners: { "document:keyup.escape": "onEscapeDown($event)", "document:click": "onDocumentClick($event)", "window:scroll": "onScroll($event)", "window:resize": "onResize($event)" }, properties: { "class": "defaultSettings.classes" } }, providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALIDATION], queries: [{ propertyName: "itemTempl", first: true, predicate: Item, descendants: true }, { propertyName: "badgeTempl", first: true, predicate: Badge, descendants: true }, { propertyName: "searchTempl", first: true, predicate: Search, descendants: true }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "selectedListElem", first: true, predicate: ["selectedList"], descendants: true }, { propertyName: "dropdownListElem", first: true, predicate: ["dropdownList"], descendants: true }, { propertyName: "stacklineDropdown", first: true, predicate: ["stacklineDropdown"], descendants: true }, { propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true }, { propertyName: "virtualScroller", first: true, predicate: VirtualScrollerComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"stackline-dropdown\" [ngClass]=\"getDropdownClasses()\" (clickOutside)=\"closeDropdownOnClickOut($event)\" #stacklineDropdown>\n    <div class=\"selected-list\" #selectedList>\n        <div class=\"c-btn\"\n            #triggerButton\n            (click)=\"toggleDropdown($event)\"\n            (keydown)=\"onTriggerKeydown($event)\"\n            [ngClass]=\"{'disabled': settings.disabled, 'is-active': isActive, 'has-selection': selectedItems?.length > 0, 'single-select-mode': settings.singleSelection}\"\n            [attr.tabindex]=\"settings.disabled ? -1 : 0\"\n            role=\"combobox\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-controls]=\"listboxId\"\n            [attr.aria-expanded]=\"isActive\"\n            [attr.aria-disabled]=\"settings.disabled\"\n            [attr.aria-activedescendant]=\"activeDescendantId\"\n            [attr.aria-label]=\"settings.ariaLabelledBy ? null : getAriaLabel()\"\n            [attr.aria-labelledby]=\"settings.ariaLabelledBy || null\">\n\n            <span class=\"c-placeholder\" *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n            <span class=\"c-single-value\" *ngIf=\"settings.singleSelection && !badgeTempl\">\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\">\n                    {{item[settings.labelKey]}}\n                </span>\n            </span>\n            <span class=\"c-list c-chip-list\" *ngIf=\"selectedItems?.length > 0 && settings.singleSelection && badgeTempl \">\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\">\n                    <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\n\n                    <span *ngIf=\"badgeTempl\" class=\"c-label\">\n                        <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\" [context]=\"getTemplateContext(item,k,'badge')\"></c-templateRenderer>\n                    </span>\n                    <button type=\"button\" class=\"c-remove\" (click)=\"onItemClick(item,k,$event);$event.stopPropagation()\" (keydown)=\"onRemoveButtonKeydown(item,k,$event)\" [attr.aria-label]=\"getRemoveItemAriaLabel(item)\">\n                        <c-icon [name]=\"'remove'\"></c-icon>\n                    </button>\n                </div>\n            </span>\n            <div class=\"c-list c-chip-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n                <ng-container *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\">\n                    <div class=\"c-token\" *ngIf=\"shouldShowSelectedBadge(k)\">\n                        <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\n                        <span *ngIf=\"badgeTempl\" class=\"c-label\">\n                            <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\" [context]=\"getTemplateContext(item,k,'badge')\"></c-templateRenderer>\n                        </span>\n                        <button type=\"button\" class=\"c-remove\" (click)=\"onItemClick(item,k,$event);$event.stopPropagation()\" (keydown)=\"onRemoveButtonKeydown(item,k,$event)\" [attr.aria-label]=\"getRemoveItemAriaLabel(item)\">\n                            <c-icon [name]=\"'remove'\"></c-icon>\n                        </button>\n                    </div>\n                </ng-container>\n            </div>\n            <span class=\"countplaceholder\" *ngIf=\"getHiddenSelectedCount() > 0\">+{{getHiddenSelectedCount()}}</span>\n            <button type=\"button\" class=\"c-remove clear-all\" *ngIf=\"settings.clearAll && selectedItems?.length > 0 && !settings.disabled\" (click)=\"clearSelection($event);$event.stopPropagation()\" (keydown)=\"onClearAllKeydown($event)\" [attr.aria-label]=\"getClearAllAriaLabel()\">\n                <c-icon [name]=\"'remove'\"></c-icon>\n            </button>\n            <button type=\"button\" class=\"c-arrow-toggle\" [ngClass]=\"isActive ? 'c-angle-up' : 'c-angle-down'\" [disabled]=\"settings.disabled\" (click)=\"toggleDropdown($event);$event.stopPropagation()\" (keydown)=\"onArrowButtonKeydown($event)\" [attr.aria-label]=\"isActive ? getCloseDropdownAriaLabel() : getOpenDropdownAriaLabel()\" [attr.aria-controls]=\"listboxId\" [attr.aria-expanded]=\"isActive\">\n                <c-icon [name]=\"isActive ? 'angle-up' : 'angle-down'\"></c-icon>\n            </button>\n        </div>\n    </div>\n    <div #dropdownList class=\"dropdown-list animated fadeIn\"\n    [ngClass]=\"getDropdownPanelClasses()\"\n    [style.width]=\"dropDownWidth !== null ? dropDownWidth + 'px' : 'auto'\"\n    [style.top]=\"dropDownTop\" \n    [style.bottom]=\"dropDownBottom\"\n    [style.left.px]=\"dropDownLeft\" \n        (pointerdown)=\"onDropdownPanelPointerDown($event)\"\n        (touchstart)=\"onDropdownPanelPointerDown($event)\"\n        role=\"presentation\"\n        [attr.aria-hidden]=\"!isActive\"\n        [hidden]=\"!isActive\">\n        <div [ngClass]=\"{'arrow-up': !isDropdownOpenTowardsTop(), 'arrow-down': isDropdownOpenTowardsTop()}\" class=\"arrow-2\"></div>\n        <div [ngClass]=\"{'arrow-up': !isDropdownOpenTowardsTop(), 'arrow-down': isDropdownOpenTowardsTop()}\"></div>\n        <div class=\"list-area\" *ngIf=\"isActive\" [ngClass]=\"{'single-select-mode': settings.singleSelection }\">\n            <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection && hasSelectableItems()\"\n                >\n                <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                [id]=\"id\" (change)=\"toggleSelectAll($event)\"/>\n                <label [for]=\"id\">\n                    <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n                    <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n                </label>\n            </div>\n            <img class=\"loading-icon\" *ngIf=\"loading\" src=\"assets/img/loading.gif\" [attr.alt]=\"settings.loadingText\" />\n            <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter\">\n                <span class=\"c-search\" id=\"searchIcon\" aria-hidden=\"true\">\n                    <c-icon [name]=\"'search'\"></c-icon>\n                </span>\n                <button type=\"button\" *ngIf=\"!settings.lazyLoading\" [hidden]=\"filter == undefined || filter?.length == 0\" class=\"c-clear\" (click)=\"clearSearch()\" (keydown)=\"onInlineActionKeydown($event)\" [attr.aria-label]=\"getClearSearchAriaLabel()\">\n                    <c-icon [name]=\"'clear'\"></c-icon>\n                </button>\n                <button type=\"button\" *ngIf=\"settings.lazyLoading\" [hidden]=\"filter == undefined || filter?.length == 0\" class=\"c-clear\" (click)=\"resetInfiniteSearch()\" (keydown)=\"onInlineActionKeydown($event)\" [attr.aria-label]=\"getClearSearchAriaLabel()\">\n                    <c-icon [name]=\"'clear'\"></c-icon>\n                </button>\n\n                <input class=\"c-input\" *ngIf=\"settings.groupBy && !settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                    [(ngModel)]=\"filter\" (keyup)=\"filterGroupedList()\" (keydown)=\"onSearchKeydown($event)\" [attr.aria-label]=\"getSearchAriaLabel()\">\n                <input class=\"c-input\" *ngIf=\"!settings.groupBy && !settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                    [(ngModel)]=\"filter\" (keyup)=\"filteritems($event)\" (keydown)=\"onSearchKeydown($event)\" [attr.aria-label]=\"getSearchAriaLabel()\">\n                <input class=\"c-input\" *ngIf=\"settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                    [(ngModel)]=\"filter\" (keyup)=\"onKeyUp($event)\" (keydown)=\"onSearchKeydown($event)\" [attr.aria-label]=\"getSearchAriaLabel()\">\n                <!--            <input class=\"c-input\" *ngIf=\"!settings.lazyLoading && !searchTempl && settings.groupBy\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                [(ngModel)]=\"filter\" (keyup)=\"filterGroupList($event)\">-->\n                <c-templateRenderer *ngIf=\"searchTempl\" [data]=\"searchTempl\" [item]=\"item\"></c-templateRenderer>\n            </div>\n            <div class=\"filter-select-all\" *ngIf=\"!settings.lazyLoading && settings.enableFilterSelectAll && !isDisabledItemPresent\">\n                <div class=\"pure-checkbox select-all\" *ngIf=\"!settings.groupBy && filter?.length > 0 && filterLength > 0  && !settings.singleSelection\" (click)=\"toggleFilterSelectAll()\" (keydown)=\"onSelectAllKeydown($event, 'filter')\" tabindex=\"0\" role=\"checkbox\" [attr.aria-checked]=\"isFilterSelectAll\">\n                    <input type=\"checkbox\" [checked]=\"isFilterSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                    aria-hidden=\"true\" tabindex=\"-1\" (click)=\"$event.stopPropagation()\" (change)=\"toggleFilterSelectAll()\"/>\n                    <label>\n                        <span [hidden]=\"isFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n                        <span [hidden]=\"!isFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n                    </label>\n                </div>\n                <div class=\"pure-checkbox select-all\" *ngIf=\"settings.groupBy && filter?.length > 0 && groupedData?.length > 0  && !settings.singleSelection\" (click)=\"toggleFilterSelectAll()\" (keydown)=\"onSelectAllKeydown($event, 'filter')\" tabindex=\"0\" role=\"checkbox\" [attr.aria-checked]=\"isFilterSelectAll\">\n                    <input type=\"checkbox\" [checked]=\"isFilterSelectAll && filter?.length > 0\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                    aria-hidden=\"true\" tabindex=\"-1\" (click)=\"$event.stopPropagation()\" (change)=\"toggleFilterSelectAll()\"/>\n                    <label>\n                        <span [hidden]=\"isFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n                        <span [hidden]=\"!isFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n                    </label>\n                </div>\n            </div>\n            <div class=\"filter-select-all\" *ngIf=\"settings.lazyLoading && settings.enableFilterSelectAll && !isDisabledItemPresent && !settings.singleSelection\">\n                <div class=\"pure-checkbox select-all\" *ngIf=\"filter?.length > 0 && infiniteFilterLength > 0\" (click)=\"toggleInfiniteFilterSelectAll()\" (keydown)=\"onSelectAllKeydown($event, 'infinite-filter')\" tabindex=\"0\" role=\"checkbox\" [attr.aria-checked]=\"isInfiniteFilterSelectAll\">\n                    <input type=\"checkbox\" [checked]=\"isInfiniteFilterSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                    aria-hidden=\"true\" tabindex=\"-1\" (click)=\"$event.stopPropagation()\" (change)=\"toggleInfiniteFilterSelectAll()\"/>\n                    <label>\n                        <span [hidden]=\"isInfiniteFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n                        <span [hidden]=\"!isInfiniteFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n                    </label>\n                </div>\n            </div>\n            <div class=\"filter-select-all\" *ngIf=\"filter?.length\">\n                <div class=\"btn-container\" *ngIf=\"settings.addNewItemOnFilter\">\n                    <button class=\"c-btn btn-iceblue\" (click)=\"addFilterNewItem()\">{{settings.addNewButtonText}}</button>\n                </div>\n            </div>\n\n            <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <li *ngFor=\"let item of data; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,i,'default')\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-checked]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,i,'default')\" (keydown)=\"onOptionKeydown(item,i,$event,'default')\" [ngClass]=\"{'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\">\n                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                        <label>{{item[settings.labelKey]}}</label>\n                    </li>\n                </ul>\n            </div>\n            <!-- lazy loading -->\n            <div *ngIf=\"!settings.groupBy && settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul virtualScroller #scroll [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                    (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <li *ngFor=\"let item of scroll.viewPortItems; let i = index;\" (click)=\"onItemClick(item,getVirtualItemIndex(item,i,scroll),$event)\"\n                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,getVirtualItemIndex(item,i,scroll),'lazy')\" [attr.data-virtual-index]=\"getVirtualItemIndex(item,i,scroll)\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-checked]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,getVirtualItemIndex(item,i,scroll),'lazy')\" (keydown)=\"onOptionKeydown(item,getVirtualItemIndex(item,i,scroll),$event,'lazy',scroll)\" [ngClass]=\"{'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\">\n                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                        <label>{{item[settings.labelKey]}}</label>\n                    </li>\n                </ul>\n            </div>\n            <!-- custom template -->\n            <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <li *ngFor=\"let item of data; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,i,'custom')\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-checked]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,i,'custom')\" (keydown)=\"onOptionKeydown(item,i,$event,'custom')\" [ngClass]=\"{'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\">\n                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                        <label></label>\n                        <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\" [context]=\"getTemplateContext(item,i,'custom')\"></c-templateRenderer>\n                    </li>\n                </ul>\n            </div>\n            <!-- lazy loading and custom template -->\n            <div *ngIf=\"!settings.groupBy && settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul virtualScroller #scroll2 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                    (vsEnd)=\"onScrollEnd($event)\" class=\"lazyContainer\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <li *ngFor=\"let item of scroll2.viewPortItems; let i = index;\" (click)=\"onItemClick(item,getVirtualItemIndex(item,i,scroll2),$event)\"\n                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,getVirtualItemIndex(item,i,scroll2),'lazy-custom')\" [attr.data-virtual-index]=\"getVirtualItemIndex(item,i,scroll2)\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-checked]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,getVirtualItemIndex(item,i,scroll2),'lazy-custom')\" (keydown)=\"onOptionKeydown(item,getVirtualItemIndex(item,i,scroll2),$event,'lazy-custom',scroll2)\" [ngClass]=\"{'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\">\n                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                        <label></label>\n                        <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\" [context]=\"getTemplateContext(item,getVirtualItemIndex(item,i,scroll2),'lazy-custom')\"></c-templateRenderer>\n                    </li>\n                </ul>\n            </div>\n            <!-- lazy loading, group By and custom template -->\n            <div *ngIf=\"settings.groupBy && settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul virtualScroller #scroll3 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                    (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <span *ngFor=\"let item of scroll3.viewPortItems; let i = index;\">\n                        <li (click)=\"onItemClick(item,getVirtualItemIndex(item,i,scroll3),$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item)}\"\n                            class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,getVirtualItemIndex(item,i,scroll3),'lazy-group-custom')\" [attr.data-virtual-index]=\"getVirtualItemIndex(item,i,scroll3)\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-checked]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,getVirtualItemIndex(item,i,scroll3),'lazy-group-custom')\" (keydown)=\"onOptionKeydown(item,getVirtualItemIndex(item,i,scroll3),$event,'lazy-group-custom',scroll3)\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            aria-hidden=\"true\" tabindex=\"-1\"/>\n                            <label></label>\n                            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\" [context]=\"getTemplateContext(item,getVirtualItemIndex(item,i,scroll3),'lazy-group-custom')\"></c-templateRenderer>\n                        </li>\n                        <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection}\"\n                            class=\"pure-checkbox\" role=\"presentation\">\n                            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            aria-hidden=\"true\" tabindex=\"-1\"/>\n                            <label></label>\n                            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\" [context]=\"getTemplateContext(item,i,'lazy-group-heading')\"></c-templateRenderer>\n                        </li>\n                    </span>\n                </ul>\n            </div>\n            <!-- group By and custom template -->\n            <div *ngIf=\"settings.groupBy && !settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <span *ngFor=\"let item of groupedData; let i = index;\">\n                        <li (click)=\"selectGroup(item)\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': item.selected == true, 'is-disabled': isOptionDisabled(item)}\"\n                            class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,i,'group-custom')\" [attr.aria-selected]=\"item.selected\" [attr.aria-checked]=\"item.selected\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,i,'group-custom')\" (keydown)=\"onGroupKeydown(item,i,$event,'group-custom')\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\" [checked]=\"item.selected\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            aria-hidden=\"true\" tabindex=\"-1\"/>\n                            <label>{{item[settings.labelKey]}}</label>\n                            <ul class=\"lazyContainer\">\n                                <span *ngFor=\"let val of item.list ; let j = index;\">\n                                    <li (click)=\"onItemClick(val,j,$event); $event.stopPropagation()\" [ngClass]=\"{'grp-title': val.grpTitle,'grp-item': !val.grpTitle && !settings.singleSelection, 'selected-item': isSelected(val) == true, 'is-disabled': isOptionDisabled(val)}\"\n                                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(val,j,'group-custom-'+i)\" [attr.aria-selected]=\"isSelected(val)\" [attr.aria-checked]=\"isSelected(val)\" [attr.aria-disabled]=\"isOptionDisabled(val)\" [attr.tabindex]=\"isOptionDisabled(val) ? -1 : 0\" (focus)=\"setActiveDescendant(val,j,'group-custom-'+i)\" (keydown)=\"onOptionKeydown(val,j,$event,'group-custom-'+i)\">\n                                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(val)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(val)) || val.disabled\"\n                                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                                        <label></label>\n                                        <c-templateRenderer [data]=\"itemTempl\" [item]=\"val\" [context]=\"getTemplateContext(val,j,'group-custom-'+i,item)\"></c-templateRenderer>\n                                    </li>\n                                </span>\n                            </ul>\n\n                        </li>\n                    </span>\n                </ul>\n            </div>\n            <!-- lazy loading, group By -->\n            <div *ngIf=\"settings.groupBy && settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <virtual-scroller [items]=\"groupedData\" (vsUpdate)=\"viewPortItems = $event\" (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n                    <ul virtualScroller #scroll4 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                        (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                        <span *ngFor=\"let item of scroll4.viewPortItems; let i = index;\">\n                            <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true }\"\n                                class=\"pure-checkbox\" role=\"presentation\">\n                                <input *ngIf=\"settings.showCheckbox && !item.grpTitle && !settings.singleSelection\" type=\"checkbox\" [checked]=\"isSelected(item)\"\n                                    [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                                    aria-hidden=\"true\" tabindex=\"-1\"/>\n                                <label>{{item[settings.labelKey]}}</label>\n                            </li>\n                            <li (click)=\"onItemClick(item,getVirtualItemIndex(item,i,scroll4),$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\"\n                                class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,getVirtualItemIndex(item,i,scroll4),'lazy-group')\" [attr.data-virtual-index]=\"getVirtualItemIndex(item,i,scroll4)\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-checked]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,getVirtualItemIndex(item,i,scroll4),'lazy-group')\" (keydown)=\"onOptionKeydown(item,getVirtualItemIndex(item,i,scroll4),$event,'lazy-group',scroll4)\">\n                                <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                                aria-hidden=\"true\" tabindex=\"-1\"/>\n                                <label>{{item[settings.labelKey]}}</label>\n                            </li>\n                        </span>\n                    </ul>\n                </virtual-scroller>\n            </div>\n            <!-- group By -->\n            <div *ngIf=\"settings.groupBy && !settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <span *ngFor=\"let item of groupedData ; let i = index;\">\n                        <li (click)=\"selectGroup(item)\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': item.selected == true, 'is-disabled': isOptionDisabled(item)}\"\n                            class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,i,'group')\" [attr.aria-selected]=\"item.selected\" [attr.aria-checked]=\"item.selected\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,i,'group')\" (keydown)=\"onGroupKeydown(item,i,$event,'group')\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\" [checked]=\"item.selected\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            aria-hidden=\"true\" tabindex=\"-1\"/>\n                            <label>{{item[settings.labelKey]}}</label>\n                            <ul class=\"lazyContainer\">\n                                <span *ngFor=\"let val of item.list ; let j = index;\">\n                                    <li (click)=\"onItemClick(val,j,$event); $event.stopPropagation()\" [ngClass]=\"{'selected-item': isSelected(val) == true,'grp-title': val.grpTitle,'grp-item': !val.grpTitle && !settings.singleSelection, 'is-disabled': isOptionDisabled(val)}\"\n                                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(val,j,'group-'+i)\" [attr.aria-selected]=\"isSelected(val)\" [attr.aria-checked]=\"isSelected(val)\" [attr.aria-disabled]=\"isOptionDisabled(val)\" [attr.tabindex]=\"isOptionDisabled(val) ? -1 : 0\" (focus)=\"setActiveDescendant(val,j,'group-'+i)\" (keydown)=\"onOptionKeydown(val,j,$event,'group-'+i)\">\n                                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(val)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(val)) || val.disabled\"\n                                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                                        <label>{{val[settings.labelKey]}}</label>\n                                    </li>\n                                </span>\n                            </ul>\n                        </li>\n                    </span>\n                    <!-- <span *ngFor=\"let item of groupedData ; let i = index;\">\n                    <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n                    <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\n                    <label>{{item[settings.labelKey]}}</label>\n                </li>\n                <li *ngIf=\"item.grpTitle && !settings.selectGroup\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n                    <input *ngIf=\"settings.showCheckbox && settings.selectGroup\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\n                    <label>{{item[settings.labelKey]}}</label>\n                </li>\n                 <li  (click)=\"selectGroup(item)\" *ngIf=\"item.grpTitle && settings.selectGroup\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n                    <input *ngIf=\"settings.showCheckbox && settings.selectGroup\" type=\"checkbox\" [checked]=\"item.selected\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\n                    <label>{{item[settings.labelKey]}}</label>\n                </li>\n                </span> -->\n                </ul>\n            </div>\n            <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">{{settings.noDataLabel}}</h5>\n        </div>\n    </div>\n</div>\n", styles: ["virtual-scroll{display:block;width:100%}.stackline-dropdown,.dropdown-list.skin-material,.dropdown-list.theme-material{--ms-primary: #3f51b5;--ms-primary-soft: rgba(63, 81, 181, .12);--ms-surface: #ffffff;--ms-surface-soft: #f5f7fb;--ms-surface-muted: #e8eaf6;--ms-outline: #c5cae9;--ms-outline-strong: #7986cb;--ms-on-surface: #212121;--ms-on-surface-muted: #5f6368;--ms-chip-bg: #e8eaf6;--ms-chip-text: #303f9f;--ms-chip-remove: #303f9f;--ms-shadow: 0 1px 2px rgba(33, 33, 33, .16), 0 12px 32px rgba(63, 81, 181, .12);--ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, .12), 0 4px 12px rgba(33, 33, 33, .08);color:var(--ms-on-surface, #212121);font:inherit}.stackline-dropdown{position:relative;display:block;width:100%}.selected-list{width:100%}.c-btn{position:relative;display:flex;align-items:center;align-content:center;box-sizing:border-box;flex-wrap:wrap;gap:8px;width:100%;min-height:56px;padding:11px 54px 11px 16px;border-radius:18px;border:1px solid var(--ms-outline, #c5cae9);background:var(--ms-surface, #ffffff);box-shadow:var(--ms-shadow-soft, 0 1px 2px rgba(33, 33, 33, .12), 0 4px 12px rgba(33, 33, 33, .08));cursor:pointer;line-height:1.45;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease,transform .16s ease}.c-btn.has-selection{padding-right:104px}.c-btn:hover{border-color:var(--ms-outline-strong, #7986cb)}.c-btn.is-active{border-color:var(--ms-primary, #3f51b5);box-shadow:0 0 0 3px #6750a424,var(--ms-shadow-soft, 0 1px 2px rgba(33, 33, 33, .12), 0 4px 12px rgba(33, 33, 33, .08))}.c-btn:focus-visible{outline:3px solid rgba(63,81,181,.32);outline-offset:2px}.c-btn.disabled{cursor:not-allowed;opacity:.72}.c-placeholder,.c-single-value{display:inline-flex;align-items:center;align-self:center;justify-content:flex-start;min-width:0;max-width:100%;color:var(--ms-on-surface-muted, #5f6368);font-size:.95rem;line-height:1.25;text-align:left}.c-btn.has-selection .c-single-value,.c-btn.has-selection .c-placeholder{color:var(--ms-on-surface, #212121);font-weight:500}.c-list{display:flex;flex:1 1 auto;flex-wrap:wrap;gap:8px;margin:0;padding:0;min-width:0}.c-chip-list{padding-right:8px}.c-token{position:relative;display:inline-block;vertical-align:middle;min-height:32px;max-width:100%;padding:6px 30px 6px 12px;border-radius:999px;background:var(--ms-chip-bg, #e8eaf6);color:var(--ms-chip-text, #303f9f);box-shadow:inset 0 0 0 1px #6750a414;line-height:1.35;white-space:normal;overflow-wrap:anywhere}.c-token .c-label{display:inline-flex;align-items:center;min-width:0;max-width:100%;line-height:1.3;font-weight:500;white-space:normal;overflow-wrap:anywhere}.c-remove{position:absolute;right:10px;top:50%;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;transform:translateY(-50%);color:var(--ms-chip-remove, #303f9f)}button.c-remove,button.c-clear,button.c-arrow-toggle{border:0;padding:0;background:transparent;font:inherit;cursor:pointer}button.c-arrow-toggle:disabled{cursor:not-allowed}.c-remove:focus-visible,.list-filter .c-clear:focus-visible,.c-arrow-toggle:focus-visible{outline:3px solid rgba(63,81,181,.32);outline-offset:2px}.c-remove svg,.c-angle-down svg,.c-angle-up svg{fill:currentColor}.c-remove c-icon{display:inline-flex;width:10px;height:10px;line-height:0}.clear-all c-icon{width:12px;height:12px}.clear-all{position:absolute;top:50%;right:42px;width:20px;height:20px;transform:translateY(-50%);color:var(--ms-on-surface-muted, #5f6368)}.countplaceholder{position:absolute;top:50%;right:76px;display:inline-flex;align-items:center;justify-content:center;height:20px;transform:translateY(-50%);color:var(--ms-on-surface-muted, #5f6368);font-size:.8rem;font-weight:600;line-height:1;white-space:nowrap;pointer-events:none}.c-angle-down,.c-angle-up{position:absolute;top:50%;right:16px;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;transform:translateY(-50%);color:var(--ms-on-surface-muted, #5f6368);pointer-events:auto}.dropdown-list{position:absolute;right:0;left:0;box-sizing:border-box;width:auto;min-width:0;max-width:100%;padding-top:8px;z-index:99999}.dropdown-list[hidden]{display:none!important}.dropdown-list.is-open,.dropdown-list.tagToBody{position:fixed;right:auto;max-width:calc(100vw - 16px);z-index:100000}.arrow-up,.arrow-down,.arrow-2{display:none}.list-area{box-sizing:border-box;max-width:100%;overflow:hidden;border-radius:22px;background:var(--ms-surface, #ffffff);border:1px solid var(--ms-outline, #c5cae9);box-shadow:var(--ms-shadow, 0 1px 2px rgba(33, 33, 33, .16), 0 12px 32px rgba(63, 81, 181, .12))}.select-all,.filter-select-all{padding:10px 14px;border-bottom:1px solid rgba(125,119,134,.16);background:var(--ms-surface-soft, #f5f7fb)}.list-filter{position:relative;display:flex;align-items:center;min-height:52px;padding-left:48px;padding-right:44px;border-bottom:1px solid rgba(125,119,134,.16);background:var(--ms-surface, #ffffff)}.list-filter .c-input,.list-filter input{width:100%;height:100%;border:0;background:transparent;color:var(--ms-on-surface, #212121);font:inherit}.list-filter .c-input::placeholder,.list-filter input::placeholder{color:var(--ms-on-surface-muted, #5f6368)}.list-filter .c-input:focus,.list-filter input:focus{outline:none}.list-filter .c-search,.list-filter .c-clear{position:absolute;top:50%;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;transform:translateY(-50%);color:var(--ms-on-surface-muted, #5f6368)}.list-filter .c-search{left:16px}.list-filter .c-clear{right:16px;cursor:pointer}.btn-container{padding:10px 14px 14px;text-align:center}.btn-iceblue{width:100%;min-height:40px;border-radius:999px;border:1px solid transparent;background:var(--ms-primary, #3f51b5);color:#fff;font-weight:600}.dropdown-list ul{list-style:none;margin:0;padding:8px;overflow:auto;background:var(--ms-surface, #ffffff)}.dropdown-list ul li{align-items:center;min-height:0;margin:4px;padding:12px 14px;border-radius:14px;cursor:pointer;text-align:left;line-height:1.35;transition:background-color .16s ease,color .16s ease}.dropdown-list ul li:hover{background:var(--ms-surface-soft, #f5f7fb)}.dropdown-list ul li:focus-visible{outline:3px solid rgba(63,81,181,.32);outline-offset:2px}.dropdown-option.is-disabled{cursor:not-allowed;opacity:.58}.selected-item{background:var(--ms-primary-soft, rgba(63, 81, 181, .12))!important;color:var(--ms-primary, #3f51b5)}.selected-item:hover{background:#6750a42e!important}.grp-item{padding-left:42px!important}.grp-title{margin-top:6px;padding-top:10px!important;padding-bottom:8px!important;background:transparent!important;color:var(--ms-on-surface-muted, #5f6368);cursor:default!important}.grp-title label{margin-bottom:0!important;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.grp-title:hover{background:transparent!important}.pure-checkbox{position:relative}.pure-checkbox input[type=checkbox]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pure-checkbox input[type=checkbox]+label{position:relative;display:block;width:100%;margin:0;padding-left:32px;color:inherit;cursor:pointer;font-weight:500;-webkit-user-select:none;user-select:none}.pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:0;width:18px;height:18px;margin-top:-10px;border:2px solid var(--ms-outline-strong, #7986cb);border-radius:6px;background:var(--ms-surface, #ffffff);transition:all .18s ease}.pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:11px;width:8px;height:4px;margin-top:0;border-style:solid;border-width:0 0 2px 2px;border-color:#fff;transform:translate(-50%,-58%) rotate(-45deg) scale(0);transform-origin:50%;transition:transform .16s ease-out}.pure-checkbox input[type=checkbox]:focus+label:before,.pure-checkbox input[type=checkbox]:hover+label:before{border-color:var(--ms-primary, #3f51b5);box-shadow:0 0 0 4px #3f51b51f}.pure-checkbox input[type=checkbox]:checked+label:before{border-color:var(--ms-primary, #3f51b5);background:var(--ms-primary, #3f51b5)}.pure-checkbox input[type=checkbox]:checked+label:after{transform:translate(-50%,-58%) rotate(-45deg) scale(1)}.pure-checkbox input[type=checkbox]:disabled+label{color:#b1acb8;cursor:not-allowed}.pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#d5d0db;background:#f2edf7;box-shadow:none}.single-select-mode .pure-checkbox input[type=checkbox]+label:before,.single-select-mode .pure-checkbox input[type=checkbox]+label:after{opacity:0}.single-select-mode .pure-checkbox input[type=checkbox]+label{padding-left:0}.list-message,.nodata-label{margin:0;padding:22px 16px 24px;color:var(--ms-on-surface-muted, #5f6368);text-align:center;font-size:.95rem;font-weight:500}.list-grp{padding:0 15px!important}.list-grp h4{margin:16px 0 6px;color:var(--ms-on-surface, #212121);font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.list-grp>li{padding-left:15px!important}.loading-icon{position:absolute;top:18px;right:16px;width:18px;z-index:2}.dropdown-list ::-webkit-scrollbar{width:10px}.dropdown-list ::-webkit-scrollbar-thumb{background:#7d778657;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.dropdown-list ::-webkit-scrollbar-track{background:transparent}.stackline-dropdown.theme-dark,.dropdown-list.theme-dark{--ms-primary: #8ab4f8;--ms-primary-soft: rgba(138, 180, 248, .18);--ms-surface: #151a23;--ms-surface-soft: #202736;--ms-surface-muted: #111722;--ms-outline: #384456;--ms-outline-strong: #8ab4f8;--ms-on-surface: #edf2f7;--ms-on-surface-muted: #aab6c5;--ms-chip-bg: #263247;--ms-chip-text: #d7e6ff;--ms-chip-remove: #d7e6ff;--ms-shadow: 0 20px 50px rgba(0, 0, 0, .42);--ms-shadow-soft: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 24px rgba(0, 0, 0, .28)}.stackline-dropdown.theme-custom,.dropdown-list.theme-custom{--ms-primary: var(--stackline-ms-primary, #0f766e);--ms-primary-soft: var(--stackline-ms-primary-soft, rgba(15, 118, 110, .14));--ms-surface: var(--stackline-ms-surface, #ffffff);--ms-surface-soft: var(--stackline-ms-surface-soft, #ecfdf5);--ms-surface-muted: var(--stackline-ms-surface-muted, #d1fae5);--ms-outline: var(--stackline-ms-outline, #99f6e4);--ms-outline-strong: var(--stackline-ms-outline-strong, #0f766e);--ms-on-surface: var(--stackline-ms-on-surface, #102a2a);--ms-on-surface-muted: var(--stackline-ms-on-surface-muted, #47615f);--ms-chip-bg: var(--stackline-ms-chip-bg, #ccfbf1);--ms-chip-text: var(--stackline-ms-chip-text, #115e59);--ms-chip-remove: var(--stackline-ms-chip-remove, #115e59);--ms-shadow: var(--stackline-ms-shadow, 0 18px 42px rgba(15, 118, 110, .15));--ms-shadow-soft: var(--stackline-ms-shadow-soft, 0 1px 2px rgba(15, 118, 110, .16), 0 8px 18px rgba(15, 118, 110, .09))}.stackline-dropdown.theme-classic,.dropdown-list.theme-classic{--ms-primary: #0079fe;--ms-primary-soft: #e9f4ff;--ms-surface: #ffffff;--ms-surface-soft: #f5f5f5;--ms-outline: #cccccc;--ms-outline-strong: #0079fe;--ms-on-surface: #333333;--ms-on-surface-muted: #333333;--ms-chip-bg: #0079fe;--ms-chip-text: #ffffff;--ms-chip-remove: #ffffff;--ms-shadow: 0 1px 5px #959595;--ms-shadow-soft: 0 1px 5px #959595;color:#333}.stackline-dropdown.theme-classic .selected-list{width:100%}.stackline-dropdown.theme-classic .c-btn{display:flex;align-items:center;align-content:center;flex-wrap:nowrap;gap:6px;min-height:42px;padding:10px 68px 10px 10px;border:1px solid #cccccc;border-radius:3px;background:#fff;box-shadow:0 1px 5px #959595;color:#333;font-size:14px;line-height:1.35}.stackline-dropdown.theme-classic .c-btn.has-selection{padding-right:104px}.stackline-dropdown.theme-classic .c-btn.is-active,.stackline-dropdown.theme-classic .c-btn:hover{border-color:#ccc;box-shadow:0 1px 5px #959595}.stackline-dropdown.theme-classic .c-btn.disabled{background:#ccc;opacity:1}.stackline-dropdown.theme-classic .c-placeholder,.stackline-dropdown.theme-classic .c-single-value{color:#333;font-size:14px}.stackline-dropdown.theme-classic .c-list{display:flex;flex:1 1 auto;align-items:center;flex-wrap:wrap;gap:4px;width:auto;min-width:0;margin:0;padding:0}.stackline-dropdown.theme-classic .c-chip-list{padding-right:0}.stackline-dropdown.theme-classic .c-token{display:inline-block;min-height:0;margin:2px 0 0;padding:2px 24px 2px 6px;border-radius:2px;background:#0079fe;box-shadow:none;color:#fff;line-height:1.4}.stackline-dropdown.theme-classic .c-token .c-label{display:inline;color:#fff;font-size:14px;font-weight:400;line-height:1.4}.stackline-dropdown.theme-classic .c-remove{right:5px;width:14px;height:14px;color:#fff}.stackline-dropdown.theme-classic .c-remove c-icon{width:9px;height:9px}.stackline-dropdown.theme-classic .clear-all{right:42px;width:18px;height:18px;color:#333}.stackline-dropdown.theme-classic .clear-all c-icon{width:11px;height:11px}.stackline-dropdown.theme-classic .countplaceholder{right:76px;color:#333;font-size:14px;font-weight:400}.stackline-dropdown.theme-classic .c-angle-down,.stackline-dropdown.theme-classic .c-angle-up{right:10px;width:20px;height:20px;color:#333}.stackline-dropdown.theme-classic .dropdown-list{padding-top:14px;padding-bottom:0;z-index:9999}.stackline-dropdown.theme-classic .dropdown-list.opens-up{padding-top:0;padding-bottom:14px}.stackline-dropdown.theme-classic .dropdown-list.opens-down{padding-top:14px;padding-bottom:0}.stackline-dropdown.theme-classic .arrow-up{display:block;position:absolute;top:0;width:0;height:0;margin-left:15px;border-right:13px solid transparent;border-bottom:15px solid #ffffff;border-left:13px solid transparent}.stackline-dropdown.theme-classic .arrow-2{top:-1px;border-bottom-color:#ccc}.stackline-dropdown.theme-classic .arrow-down{display:block;position:absolute;top:auto;bottom:0;width:0;height:0;margin-left:15px;border-right:13px solid transparent;border-top:15px solid #ffffff;border-left:13px solid transparent}.stackline-dropdown.theme-classic .arrow-down.arrow-2{top:auto;bottom:-1px;border-top-color:#ccc}.stackline-dropdown.theme-classic .list-area{overflow:hidden;margin:0;border:1px solid #cccccc;border-radius:3px;background:#fff;box-shadow:0 1px 5px #959595}.stackline-dropdown.theme-classic .select-all,.stackline-dropdown.theme-classic .filter-select-all{padding:10px;border-bottom:1px solid #cccccc;background:#fff}.stackline-dropdown.theme-classic .list-filter{display:block;min-height:35px;padding:0;border-bottom:1px solid #cccccc;background:#fff}.stackline-dropdown.theme-classic .list-filter .c-input,.stackline-dropdown.theme-classic .list-filter input{height:35px;padding:0 35px;color:#333}.stackline-dropdown.theme-classic .list-filter .c-search{left:13px}.stackline-dropdown.theme-classic .list-filter .c-clear{right:13px}.stackline-dropdown.theme-classic .btn-container{padding:10px}.stackline-dropdown.theme-classic .btn-iceblue{min-height:35px;border-radius:3px;background:#0079fe}.stackline-dropdown.theme-classic .dropdown-list ul{margin:0;padding:0}.stackline-dropdown.theme-classic .dropdown-list ul li{min-height:0;margin:0;padding:10px;border-radius:0;color:#333;line-height:1.35}.stackline-dropdown.theme-classic .dropdown-list ul li:hover{background:#f5f5f5}.stackline-dropdown.theme-classic .selected-item,.stackline-dropdown.theme-classic .selected-item:hover{background:#e9f4ff!important;color:#333}.stackline-dropdown.theme-classic .grp-item{padding-left:30px!important}.stackline-dropdown.theme-classic .grp-title{color:#000}.stackline-dropdown.theme-classic .grp-title label,.stackline-dropdown.theme-classic .list-grp h4{font-size:14px;font-weight:700;letter-spacing:0;text-transform:capitalize}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]+label{padding-left:2em;color:#000;font-weight:300}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]+label:before{width:14px;height:14px;margin-top:-9px;border:2px solid #0079fe;border-radius:0;background:#fff}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]+label:after{top:50%;left:9px;width:8px;height:3px;margin-top:0;border-width:0 0 3px 3px;border-color:#fff;background:transparent}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]:hover+label:before{border-color:#0079fe;background-color:#f2f2f2;box-shadow:none}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]:checked+label:before{border-color:#0079fe;background:#0079fe}.stackline-dropdown.theme-classic .single-select-mode .pure-checkbox input[type=checkbox]+label{padding-left:0}.dropdown-list.theme-classic{padding-top:14px;padding-bottom:0;z-index:100000}.dropdown-list.theme-classic.opens-up{padding-top:0;padding-bottom:14px}.dropdown-list.theme-classic.opens-down{padding-top:14px;padding-bottom:0}.dropdown-list.theme-classic .arrow-up{display:block;position:absolute;top:0;width:0;height:0;margin-left:15px;border-right:13px solid transparent;border-bottom:15px solid #ffffff;border-left:13px solid transparent}.dropdown-list.theme-classic .arrow-2{top:-1px;border-bottom-color:#ccc}.dropdown-list.theme-classic .arrow-down{display:block;position:absolute;top:auto;bottom:0;width:0;height:0;margin-left:15px;border-right:13px solid transparent;border-top:15px solid #ffffff;border-left:13px solid transparent}.dropdown-list.theme-classic .arrow-down.arrow-2{top:auto;bottom:-1px;border-top-color:#ccc}.dropdown-list.theme-classic .list-area{overflow:hidden;margin:0;border:1px solid #cccccc;border-radius:3px;background:#fff;box-shadow:0 1px 5px #959595}.dropdown-list.theme-classic .select-all,.dropdown-list.theme-classic .filter-select-all{padding:10px;border-bottom:1px solid #cccccc;background:#fff}.dropdown-list.theme-classic .list-filter{display:block;min-height:35px;padding:0;border-bottom:1px solid #cccccc;background:#fff}.dropdown-list.theme-classic .list-filter .c-input,.dropdown-list.theme-classic .list-filter input{height:35px;padding:0 35px;color:#333}.dropdown-list.theme-classic .list-filter .c-search{left:13px}.dropdown-list.theme-classic .list-filter .c-clear{right:13px}.dropdown-list.theme-classic .btn-container{padding:10px}.dropdown-list.theme-classic .btn-iceblue{min-height:35px;border-radius:3px;background:#0079fe}.dropdown-list.theme-classic ul{margin:0;padding:0}.dropdown-list.theme-classic ul li{min-height:0;margin:0;padding:10px;border-radius:0;color:#333;line-height:1.35}.dropdown-list.theme-classic ul li:hover{background:#f5f5f5}.dropdown-list.theme-classic .selected-item,.dropdown-list.theme-classic .selected-item:hover{background:#e9f4ff!important;color:#333}.dropdown-list.theme-classic .grp-item{padding-left:30px!important}.dropdown-list.theme-classic .grp-title{color:#000}.dropdown-list.theme-classic .grp-title label,.dropdown-list.theme-classic .list-grp h4{font-size:14px;font-weight:700;letter-spacing:0;text-transform:capitalize}.dropdown-list.theme-classic .pure-checkbox input[type=checkbox]+label{padding-left:2em;color:#000;font-weight:300}.dropdown-list.theme-classic .pure-checkbox input[type=checkbox]+label:before{width:14px;height:14px;margin-top:-9px;border:2px solid #0079fe;border-radius:0;background:#fff}.dropdown-list.theme-classic .pure-checkbox input[type=checkbox]+label:after{top:50%;left:9px;width:8px;height:3px;margin-top:0;border-width:0 0 3px 3px;border-color:#fff;background:transparent}.dropdown-list.theme-classic .pure-checkbox input[type=checkbox]:focus+label:before,.dropdown-list.theme-classic .pure-checkbox input[type=checkbox]:hover+label:before{border-color:#0079fe;background-color:#f2f2f2;box-shadow:none}.dropdown-list.theme-classic .pure-checkbox input[type=checkbox]:checked+label:before{border-color:#0079fe;background:#0079fe}.dropdown-list.theme-classic .single-select-mode .pure-checkbox input[type=checkbox]+label{padding-left:0}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i3.DefaultValueAccessor), selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i3.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i3.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i0.forwardRef(() => VirtualScrollerComponent), selector: "virtual-scroller,[virtualScroller]", inputs: ["executeRefreshOutsideAngularZone", "enableUnequalChildrenSizes", "useMarginInsteadOfTranslate", "modifyOverflowStyleOfParentScroll", "stripedTable", "scrollbarWidth", "scrollbarHeight", "childWidth", "childHeight", "ssrChildWidth", "ssrChildHeight", "ssrViewportWidth", "ssrViewportHeight", "bufferAmount", "scrollAnimationTime", "resizeBypassRefreshThreshold", "scrollThrottlingTime", "scrollDebounceTime", "checkResizeInterval", "items", "compareItems", "horizontal", "parentScroll"], outputs: ["vsUpdate", "vsChange", "vsStart", "vsEnd"], exportAs: ["virtualScroller"] }, { kind: "directive", type: i0.forwardRef(() => ClickOutsideDirective), selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "component", type: i0.forwardRef(() => TemplateRenderer), selector: "c-templateRenderer", inputs: ["data", "item", "context"] }, { kind: "component", type: i0.forwardRef(() => CIcon), selector: "c-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AngularMultiSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: AngularMultiSelect, decorators: [{
             type: Component,
             args: [{ selector: 'angular-multiselect, angular2-multiselect', host: { '[class]': 'defaultSettings.classes' }, providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALIDATION], encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"stackline-dropdown\" [ngClass]=\"getDropdownClasses()\" (clickOutside)=\"closeDropdownOnClickOut($event)\" #stacklineDropdown>\n    <div class=\"selected-list\" #selectedList>\n        <div class=\"c-btn\"\n            #triggerButton\n            (click)=\"toggleDropdown($event)\"\n            (keydown)=\"onTriggerKeydown($event)\"\n            [ngClass]=\"{'disabled': settings.disabled, 'is-active': isActive, 'has-selection': selectedItems?.length > 0, 'single-select-mode': settings.singleSelection}\"\n            [attr.tabindex]=\"settings.disabled ? -1 : 0\"\n            role=\"combobox\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-controls]=\"listboxId\"\n            [attr.aria-expanded]=\"isActive\"\n            [attr.aria-disabled]=\"settings.disabled\"\n            [attr.aria-activedescendant]=\"activeDescendantId\"\n            [attr.aria-label]=\"settings.ariaLabelledBy ? null : getAriaLabel()\"\n            [attr.aria-labelledby]=\"settings.ariaLabelledBy || null\">\n\n            <span class=\"c-placeholder\" *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n            <span class=\"c-single-value\" *ngIf=\"settings.singleSelection && !badgeTempl\">\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\">\n                    {{item[settings.labelKey]}}\n                </span>\n            </span>\n            <span class=\"c-list c-chip-list\" *ngIf=\"selectedItems?.length > 0 && settings.singleSelection && badgeTempl \">\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\">\n                    <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\n\n                    <span *ngIf=\"badgeTempl\" class=\"c-label\">\n                        <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\" [context]=\"getTemplateContext(item,k,'badge')\"></c-templateRenderer>\n                    </span>\n                    <button type=\"button\" class=\"c-remove\" (click)=\"onItemClick(item,k,$event);$event.stopPropagation()\" (keydown)=\"onRemoveButtonKeydown(item,k,$event)\" [attr.aria-label]=\"getRemoveItemAriaLabel(item)\">\n                        <c-icon [name]=\"'remove'\"></c-icon>\n                    </button>\n                </div>\n            </span>\n            <div class=\"c-list c-chip-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n                <ng-container *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\">\n                    <div class=\"c-token\" *ngIf=\"shouldShowSelectedBadge(k)\">\n                        <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\n                        <span *ngIf=\"badgeTempl\" class=\"c-label\">\n                            <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\" [context]=\"getTemplateContext(item,k,'badge')\"></c-templateRenderer>\n                        </span>\n                        <button type=\"button\" class=\"c-remove\" (click)=\"onItemClick(item,k,$event);$event.stopPropagation()\" (keydown)=\"onRemoveButtonKeydown(item,k,$event)\" [attr.aria-label]=\"getRemoveItemAriaLabel(item)\">\n                            <c-icon [name]=\"'remove'\"></c-icon>\n                        </button>\n                    </div>\n                </ng-container>\n            </div>\n            <span class=\"countplaceholder\" *ngIf=\"getHiddenSelectedCount() > 0\">+{{getHiddenSelectedCount()}}</span>\n            <button type=\"button\" class=\"c-remove clear-all\" *ngIf=\"settings.clearAll && selectedItems?.length > 0 && !settings.disabled\" (click)=\"clearSelection($event);$event.stopPropagation()\" (keydown)=\"onClearAllKeydown($event)\" [attr.aria-label]=\"getClearAllAriaLabel()\">\n                <c-icon [name]=\"'remove'\"></c-icon>\n            </button>\n            <button type=\"button\" class=\"c-arrow-toggle\" [ngClass]=\"isActive ? 'c-angle-up' : 'c-angle-down'\" [disabled]=\"settings.disabled\" (click)=\"toggleDropdown($event);$event.stopPropagation()\" (keydown)=\"onArrowButtonKeydown($event)\" [attr.aria-label]=\"isActive ? getCloseDropdownAriaLabel() : getOpenDropdownAriaLabel()\" [attr.aria-controls]=\"listboxId\" [attr.aria-expanded]=\"isActive\">\n                <c-icon [name]=\"isActive ? 'angle-up' : 'angle-down'\"></c-icon>\n            </button>\n        </div>\n    </div>\n    <div #dropdownList class=\"dropdown-list animated fadeIn\"\n    [ngClass]=\"getDropdownPanelClasses()\"\n    [style.width]=\"dropDownWidth !== null ? dropDownWidth + 'px' : 'auto'\"\n    [style.top]=\"dropDownTop\" \n    [style.bottom]=\"dropDownBottom\"\n    [style.left.px]=\"dropDownLeft\" \n        (pointerdown)=\"onDropdownPanelPointerDown($event)\"\n        (touchstart)=\"onDropdownPanelPointerDown($event)\"\n        role=\"presentation\"\n        [attr.aria-hidden]=\"!isActive\"\n        [hidden]=\"!isActive\">\n        <div [ngClass]=\"{'arrow-up': !isDropdownOpenTowardsTop(), 'arrow-down': isDropdownOpenTowardsTop()}\" class=\"arrow-2\"></div>\n        <div [ngClass]=\"{'arrow-up': !isDropdownOpenTowardsTop(), 'arrow-down': isDropdownOpenTowardsTop()}\"></div>\n        <div class=\"list-area\" *ngIf=\"isActive\" [ngClass]=\"{'single-select-mode': settings.singleSelection }\">\n            <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection && hasSelectableItems()\"\n                >\n                <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                [id]=\"id\" (change)=\"toggleSelectAll($event)\"/>\n                <label [for]=\"id\">\n                    <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n                    <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n                </label>\n            </div>\n            <img class=\"loading-icon\" *ngIf=\"loading\" src=\"assets/img/loading.gif\" [attr.alt]=\"settings.loadingText\" />\n            <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter\">\n                <span class=\"c-search\" id=\"searchIcon\" aria-hidden=\"true\">\n                    <c-icon [name]=\"'search'\"></c-icon>\n                </span>\n                <button type=\"button\" *ngIf=\"!settings.lazyLoading\" [hidden]=\"filter == undefined || filter?.length == 0\" class=\"c-clear\" (click)=\"clearSearch()\" (keydown)=\"onInlineActionKeydown($event)\" [attr.aria-label]=\"getClearSearchAriaLabel()\">\n                    <c-icon [name]=\"'clear'\"></c-icon>\n                </button>\n                <button type=\"button\" *ngIf=\"settings.lazyLoading\" [hidden]=\"filter == undefined || filter?.length == 0\" class=\"c-clear\" (click)=\"resetInfiniteSearch()\" (keydown)=\"onInlineActionKeydown($event)\" [attr.aria-label]=\"getClearSearchAriaLabel()\">\n                    <c-icon [name]=\"'clear'\"></c-icon>\n                </button>\n\n                <input class=\"c-input\" *ngIf=\"settings.groupBy && !settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                    [(ngModel)]=\"filter\" (keyup)=\"filterGroupedList()\" (keydown)=\"onSearchKeydown($event)\" [attr.aria-label]=\"getSearchAriaLabel()\">\n                <input class=\"c-input\" *ngIf=\"!settings.groupBy && !settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                    [(ngModel)]=\"filter\" (keyup)=\"filteritems($event)\" (keydown)=\"onSearchKeydown($event)\" [attr.aria-label]=\"getSearchAriaLabel()\">\n                <input class=\"c-input\" *ngIf=\"settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                    [(ngModel)]=\"filter\" (keyup)=\"onKeyUp($event)\" (keydown)=\"onSearchKeydown($event)\" [attr.aria-label]=\"getSearchAriaLabel()\">\n                <!--            <input class=\"c-input\" *ngIf=\"!settings.lazyLoading && !searchTempl && settings.groupBy\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                [(ngModel)]=\"filter\" (keyup)=\"filterGroupList($event)\">-->\n                <c-templateRenderer *ngIf=\"searchTempl\" [data]=\"searchTempl\" [item]=\"item\"></c-templateRenderer>\n            </div>\n            <div class=\"filter-select-all\" *ngIf=\"!settings.lazyLoading && settings.enableFilterSelectAll && !isDisabledItemPresent\">\n                <div class=\"pure-checkbox select-all\" *ngIf=\"!settings.groupBy && filter?.length > 0 && filterLength > 0  && !settings.singleSelection\" (click)=\"toggleFilterSelectAll()\" (keydown)=\"onSelectAllKeydown($event, 'filter')\" tabindex=\"0\" role=\"checkbox\" [attr.aria-checked]=\"isFilterSelectAll\">\n                    <input type=\"checkbox\" [checked]=\"isFilterSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                    aria-hidden=\"true\" tabindex=\"-1\" (click)=\"$event.stopPropagation()\" (change)=\"toggleFilterSelectAll()\"/>\n                    <label>\n                        <span [hidden]=\"isFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n                        <span [hidden]=\"!isFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n                    </label>\n                </div>\n                <div class=\"pure-checkbox select-all\" *ngIf=\"settings.groupBy && filter?.length > 0 && groupedData?.length > 0  && !settings.singleSelection\" (click)=\"toggleFilterSelectAll()\" (keydown)=\"onSelectAllKeydown($event, 'filter')\" tabindex=\"0\" role=\"checkbox\" [attr.aria-checked]=\"isFilterSelectAll\">\n                    <input type=\"checkbox\" [checked]=\"isFilterSelectAll && filter?.length > 0\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                    aria-hidden=\"true\" tabindex=\"-1\" (click)=\"$event.stopPropagation()\" (change)=\"toggleFilterSelectAll()\"/>\n                    <label>\n                        <span [hidden]=\"isFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n                        <span [hidden]=\"!isFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n                    </label>\n                </div>\n            </div>\n            <div class=\"filter-select-all\" *ngIf=\"settings.lazyLoading && settings.enableFilterSelectAll && !isDisabledItemPresent && !settings.singleSelection\">\n                <div class=\"pure-checkbox select-all\" *ngIf=\"filter?.length > 0 && infiniteFilterLength > 0\" (click)=\"toggleInfiniteFilterSelectAll()\" (keydown)=\"onSelectAllKeydown($event, 'infinite-filter')\" tabindex=\"0\" role=\"checkbox\" [attr.aria-checked]=\"isInfiniteFilterSelectAll\">\n                    <input type=\"checkbox\" [checked]=\"isInfiniteFilterSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                    aria-hidden=\"true\" tabindex=\"-1\" (click)=\"$event.stopPropagation()\" (change)=\"toggleInfiniteFilterSelectAll()\"/>\n                    <label>\n                        <span [hidden]=\"isInfiniteFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n                        <span [hidden]=\"!isInfiniteFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n                    </label>\n                </div>\n            </div>\n            <div class=\"filter-select-all\" *ngIf=\"filter?.length\">\n                <div class=\"btn-container\" *ngIf=\"settings.addNewItemOnFilter\">\n                    <button class=\"c-btn btn-iceblue\" (click)=\"addFilterNewItem()\">{{settings.addNewButtonText}}</button>\n                </div>\n            </div>\n\n            <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <li *ngFor=\"let item of data; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,i,'default')\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-checked]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,i,'default')\" (keydown)=\"onOptionKeydown(item,i,$event,'default')\" [ngClass]=\"{'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\">\n                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                        <label>{{item[settings.labelKey]}}</label>\n                    </li>\n                </ul>\n            </div>\n            <!-- lazy loading -->\n            <div *ngIf=\"!settings.groupBy && settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul virtualScroller #scroll [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                    (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <li *ngFor=\"let item of scroll.viewPortItems; let i = index;\" (click)=\"onItemClick(item,getVirtualItemIndex(item,i,scroll),$event)\"\n                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,getVirtualItemIndex(item,i,scroll),'lazy')\" [attr.data-virtual-index]=\"getVirtualItemIndex(item,i,scroll)\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-checked]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,getVirtualItemIndex(item,i,scroll),'lazy')\" (keydown)=\"onOptionKeydown(item,getVirtualItemIndex(item,i,scroll),$event,'lazy',scroll)\" [ngClass]=\"{'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\">\n                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                        <label>{{item[settings.labelKey]}}</label>\n                    </li>\n                </ul>\n            </div>\n            <!-- custom template -->\n            <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <li *ngFor=\"let item of data; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,i,'custom')\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-checked]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,i,'custom')\" (keydown)=\"onOptionKeydown(item,i,$event,'custom')\" [ngClass]=\"{'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\">\n                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                        <label></label>\n                        <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\" [context]=\"getTemplateContext(item,i,'custom')\"></c-templateRenderer>\n                    </li>\n                </ul>\n            </div>\n            <!-- lazy loading and custom template -->\n            <div *ngIf=\"!settings.groupBy && settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul virtualScroller #scroll2 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                    (vsEnd)=\"onScrollEnd($event)\" class=\"lazyContainer\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <li *ngFor=\"let item of scroll2.viewPortItems; let i = index;\" (click)=\"onItemClick(item,getVirtualItemIndex(item,i,scroll2),$event)\"\n                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,getVirtualItemIndex(item,i,scroll2),'lazy-custom')\" [attr.data-virtual-index]=\"getVirtualItemIndex(item,i,scroll2)\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-checked]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,getVirtualItemIndex(item,i,scroll2),'lazy-custom')\" (keydown)=\"onOptionKeydown(item,getVirtualItemIndex(item,i,scroll2),$event,'lazy-custom',scroll2)\" [ngClass]=\"{'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\">\n                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                        <label></label>\n                        <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\" [context]=\"getTemplateContext(item,getVirtualItemIndex(item,i,scroll2),'lazy-custom')\"></c-templateRenderer>\n                    </li>\n                </ul>\n            </div>\n            <!-- lazy loading, group By and custom template -->\n            <div *ngIf=\"settings.groupBy && settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul virtualScroller #scroll3 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                    (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <span *ngFor=\"let item of scroll3.viewPortItems; let i = index;\">\n                        <li (click)=\"onItemClick(item,getVirtualItemIndex(item,i,scroll3),$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item)}\"\n                            class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,getVirtualItemIndex(item,i,scroll3),'lazy-group-custom')\" [attr.data-virtual-index]=\"getVirtualItemIndex(item,i,scroll3)\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-checked]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,getVirtualItemIndex(item,i,scroll3),'lazy-group-custom')\" (keydown)=\"onOptionKeydown(item,getVirtualItemIndex(item,i,scroll3),$event,'lazy-group-custom',scroll3)\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            aria-hidden=\"true\" tabindex=\"-1\"/>\n                            <label></label>\n                            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\" [context]=\"getTemplateContext(item,getVirtualItemIndex(item,i,scroll3),'lazy-group-custom')\"></c-templateRenderer>\n                        </li>\n                        <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection}\"\n                            class=\"pure-checkbox\" role=\"presentation\">\n                            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            aria-hidden=\"true\" tabindex=\"-1\"/>\n                            <label></label>\n                            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\" [context]=\"getTemplateContext(item,i,'lazy-group-heading')\"></c-templateRenderer>\n                        </li>\n                    </span>\n                </ul>\n            </div>\n            <!-- group By and custom template -->\n            <div *ngIf=\"settings.groupBy && !settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <span *ngFor=\"let item of groupedData; let i = index;\">\n                        <li (click)=\"selectGroup(item)\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': item.selected == true, 'is-disabled': isOptionDisabled(item)}\"\n                            class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,i,'group-custom')\" [attr.aria-selected]=\"item.selected\" [attr.aria-checked]=\"item.selected\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,i,'group-custom')\" (keydown)=\"onGroupKeydown(item,i,$event,'group-custom')\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\" [checked]=\"item.selected\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            aria-hidden=\"true\" tabindex=\"-1\"/>\n                            <label>{{item[settings.labelKey]}}</label>\n                            <ul class=\"lazyContainer\">\n                                <span *ngFor=\"let val of item.list ; let j = index;\">\n                                    <li (click)=\"onItemClick(val,j,$event); $event.stopPropagation()\" [ngClass]=\"{'grp-title': val.grpTitle,'grp-item': !val.grpTitle && !settings.singleSelection, 'selected-item': isSelected(val) == true, 'is-disabled': isOptionDisabled(val)}\"\n                                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(val,j,'group-custom-'+i)\" [attr.aria-selected]=\"isSelected(val)\" [attr.aria-checked]=\"isSelected(val)\" [attr.aria-disabled]=\"isOptionDisabled(val)\" [attr.tabindex]=\"isOptionDisabled(val) ? -1 : 0\" (focus)=\"setActiveDescendant(val,j,'group-custom-'+i)\" (keydown)=\"onOptionKeydown(val,j,$event,'group-custom-'+i)\">\n                                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(val)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(val)) || val.disabled\"\n                                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                                        <label></label>\n                                        <c-templateRenderer [data]=\"itemTempl\" [item]=\"val\" [context]=\"getTemplateContext(val,j,'group-custom-'+i,item)\"></c-templateRenderer>\n                                    </li>\n                                </span>\n                            </ul>\n\n                        </li>\n                    </span>\n                </ul>\n            </div>\n            <!-- lazy loading, group By -->\n            <div *ngIf=\"settings.groupBy && settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <virtual-scroller [items]=\"groupedData\" (vsUpdate)=\"viewPortItems = $event\" (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n                    <ul virtualScroller #scroll4 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                        (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                        <span *ngFor=\"let item of scroll4.viewPortItems; let i = index;\">\n                            <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true }\"\n                                class=\"pure-checkbox\" role=\"presentation\">\n                                <input *ngIf=\"settings.showCheckbox && !item.grpTitle && !settings.singleSelection\" type=\"checkbox\" [checked]=\"isSelected(item)\"\n                                    [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                                    aria-hidden=\"true\" tabindex=\"-1\"/>\n                                <label>{{item[settings.labelKey]}}</label>\n                            </li>\n                            <li (click)=\"onItemClick(item,getVirtualItemIndex(item,i,scroll4),$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true, 'is-disabled': isOptionDisabled(item) }\"\n                                class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,getVirtualItemIndex(item,i,scroll4),'lazy-group')\" [attr.data-virtual-index]=\"getVirtualItemIndex(item,i,scroll4)\" [attr.aria-selected]=\"isSelected(item)\" [attr.aria-checked]=\"isSelected(item)\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,getVirtualItemIndex(item,i,scroll4),'lazy-group')\" (keydown)=\"onOptionKeydown(item,getVirtualItemIndex(item,i,scroll4),$event,'lazy-group',scroll4)\">\n                                <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                                aria-hidden=\"true\" tabindex=\"-1\"/>\n                                <label>{{item[settings.labelKey]}}</label>\n                            </li>\n                        </span>\n                    </ul>\n                </virtual-scroller>\n            </div>\n            <!-- group By -->\n            <div *ngIf=\"settings.groupBy && !settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\"\n                style=\"overflow: auto;\">\n                <ul class=\"lazyContainer\" [id]=\"listboxId\" role=\"listbox\" [attr.aria-multiselectable]=\"!settings.singleSelection\" [attr.aria-label]=\"getListboxAriaLabel()\">\n                    <span *ngFor=\"let item of groupedData ; let i = index;\">\n                        <li (click)=\"selectGroup(item)\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': item.selected == true, 'is-disabled': isOptionDisabled(item)}\"\n                            class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(item,i,'group')\" [attr.aria-selected]=\"item.selected\" [attr.aria-checked]=\"item.selected\" [attr.aria-disabled]=\"isOptionDisabled(item)\" [attr.tabindex]=\"isOptionDisabled(item) ? -1 : 0\" (focus)=\"setActiveDescendant(item,i,'group')\" (keydown)=\"onGroupKeydown(item,i,$event,'group')\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\" [checked]=\"item.selected\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            aria-hidden=\"true\" tabindex=\"-1\"/>\n                            <label>{{item[settings.labelKey]}}</label>\n                            <ul class=\"lazyContainer\">\n                                <span *ngFor=\"let val of item.list ; let j = index;\">\n                                    <li (click)=\"onItemClick(val,j,$event); $event.stopPropagation()\" [ngClass]=\"{'selected-item': isSelected(val) == true,'grp-title': val.grpTitle,'grp-item': !val.grpTitle && !settings.singleSelection, 'is-disabled': isOptionDisabled(val)}\"\n                                        class=\"pure-checkbox dropdown-option\" role=\"option\" [id]=\"getOptionId(val,j,'group-'+i)\" [attr.aria-selected]=\"isSelected(val)\" [attr.aria-checked]=\"isSelected(val)\" [attr.aria-disabled]=\"isOptionDisabled(val)\" [attr.tabindex]=\"isOptionDisabled(val) ? -1 : 0\" (focus)=\"setActiveDescendant(val,j,'group-'+i)\" (keydown)=\"onOptionKeydown(val,j,$event,'group-'+i)\">\n                                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(val)\" [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(val)) || val.disabled\"\n                                        aria-hidden=\"true\" tabindex=\"-1\"/>\n                                        <label>{{val[settings.labelKey]}}</label>\n                                    </li>\n                                </span>\n                            </ul>\n                        </li>\n                    </span>\n                    <!-- <span *ngFor=\"let item of groupedData ; let i = index;\">\n                    <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n                    <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\n                    <label>{{item[settings.labelKey]}}</label>\n                </li>\n                <li *ngIf=\"item.grpTitle && !settings.selectGroup\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n                    <input *ngIf=\"settings.showCheckbox && settings.selectGroup\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\n                    <label>{{item[settings.labelKey]}}</label>\n                </li>\n                 <li  (click)=\"selectGroup(item)\" *ngIf=\"item.grpTitle && settings.selectGroup\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n                    <input *ngIf=\"settings.showCheckbox && settings.selectGroup\" type=\"checkbox\" [checked]=\"item.selected\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\n                    <label>{{item[settings.labelKey]}}</label>\n                </li>\n                </span> -->\n                </ul>\n            </div>\n            <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">{{settings.noDataLabel}}</h5>\n        </div>\n    </div>\n</div>\n", styles: ["virtual-scroll{display:block;width:100%}.stackline-dropdown,.dropdown-list.skin-material,.dropdown-list.theme-material{--ms-primary: #3f51b5;--ms-primary-soft: rgba(63, 81, 181, .12);--ms-surface: #ffffff;--ms-surface-soft: #f5f7fb;--ms-surface-muted: #e8eaf6;--ms-outline: #c5cae9;--ms-outline-strong: #7986cb;--ms-on-surface: #212121;--ms-on-surface-muted: #5f6368;--ms-chip-bg: #e8eaf6;--ms-chip-text: #303f9f;--ms-chip-remove: #303f9f;--ms-shadow: 0 1px 2px rgba(33, 33, 33, .16), 0 12px 32px rgba(63, 81, 181, .12);--ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, .12), 0 4px 12px rgba(33, 33, 33, .08);color:var(--ms-on-surface, #212121);font:inherit}.stackline-dropdown{position:relative;display:block;width:100%}.selected-list{width:100%}.c-btn{position:relative;display:flex;align-items:center;align-content:center;box-sizing:border-box;flex-wrap:wrap;gap:8px;width:100%;min-height:56px;padding:11px 54px 11px 16px;border-radius:18px;border:1px solid var(--ms-outline, #c5cae9);background:var(--ms-surface, #ffffff);box-shadow:var(--ms-shadow-soft, 0 1px 2px rgba(33, 33, 33, .12), 0 4px 12px rgba(33, 33, 33, .08));cursor:pointer;line-height:1.45;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease,transform .16s ease}.c-btn.has-selection{padding-right:104px}.c-btn:hover{border-color:var(--ms-outline-strong, #7986cb)}.c-btn.is-active{border-color:var(--ms-primary, #3f51b5);box-shadow:0 0 0 3px #6750a424,var(--ms-shadow-soft, 0 1px 2px rgba(33, 33, 33, .12), 0 4px 12px rgba(33, 33, 33, .08))}.c-btn:focus-visible{outline:3px solid rgba(63,81,181,.32);outline-offset:2px}.c-btn.disabled{cursor:not-allowed;opacity:.72}.c-placeholder,.c-single-value{display:inline-flex;align-items:center;align-self:center;justify-content:flex-start;min-width:0;max-width:100%;color:var(--ms-on-surface-muted, #5f6368);font-size:.95rem;line-height:1.25;text-align:left}.c-btn.has-selection .c-single-value,.c-btn.has-selection .c-placeholder{color:var(--ms-on-surface, #212121);font-weight:500}.c-list{display:flex;flex:1 1 auto;flex-wrap:wrap;gap:8px;margin:0;padding:0;min-width:0}.c-chip-list{padding-right:8px}.c-token{position:relative;display:inline-block;vertical-align:middle;min-height:32px;max-width:100%;padding:6px 30px 6px 12px;border-radius:999px;background:var(--ms-chip-bg, #e8eaf6);color:var(--ms-chip-text, #303f9f);box-shadow:inset 0 0 0 1px #6750a414;line-height:1.35;white-space:normal;overflow-wrap:anywhere}.c-token .c-label{display:inline-flex;align-items:center;min-width:0;max-width:100%;line-height:1.3;font-weight:500;white-space:normal;overflow-wrap:anywhere}.c-remove{position:absolute;right:10px;top:50%;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;transform:translateY(-50%);color:var(--ms-chip-remove, #303f9f)}button.c-remove,button.c-clear,button.c-arrow-toggle{border:0;padding:0;background:transparent;font:inherit;cursor:pointer}button.c-arrow-toggle:disabled{cursor:not-allowed}.c-remove:focus-visible,.list-filter .c-clear:focus-visible,.c-arrow-toggle:focus-visible{outline:3px solid rgba(63,81,181,.32);outline-offset:2px}.c-remove svg,.c-angle-down svg,.c-angle-up svg{fill:currentColor}.c-remove c-icon{display:inline-flex;width:10px;height:10px;line-height:0}.clear-all c-icon{width:12px;height:12px}.clear-all{position:absolute;top:50%;right:42px;width:20px;height:20px;transform:translateY(-50%);color:var(--ms-on-surface-muted, #5f6368)}.countplaceholder{position:absolute;top:50%;right:76px;display:inline-flex;align-items:center;justify-content:center;height:20px;transform:translateY(-50%);color:var(--ms-on-surface-muted, #5f6368);font-size:.8rem;font-weight:600;line-height:1;white-space:nowrap;pointer-events:none}.c-angle-down,.c-angle-up{position:absolute;top:50%;right:16px;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;transform:translateY(-50%);color:var(--ms-on-surface-muted, #5f6368);pointer-events:auto}.dropdown-list{position:absolute;right:0;left:0;box-sizing:border-box;width:auto;min-width:0;max-width:100%;padding-top:8px;z-index:99999}.dropdown-list[hidden]{display:none!important}.dropdown-list.is-open,.dropdown-list.tagToBody{position:fixed;right:auto;max-width:calc(100vw - 16px);z-index:100000}.arrow-up,.arrow-down,.arrow-2{display:none}.list-area{box-sizing:border-box;max-width:100%;overflow:hidden;border-radius:22px;background:var(--ms-surface, #ffffff);border:1px solid var(--ms-outline, #c5cae9);box-shadow:var(--ms-shadow, 0 1px 2px rgba(33, 33, 33, .16), 0 12px 32px rgba(63, 81, 181, .12))}.select-all,.filter-select-all{padding:10px 14px;border-bottom:1px solid rgba(125,119,134,.16);background:var(--ms-surface-soft, #f5f7fb)}.list-filter{position:relative;display:flex;align-items:center;min-height:52px;padding-left:48px;padding-right:44px;border-bottom:1px solid rgba(125,119,134,.16);background:var(--ms-surface, #ffffff)}.list-filter .c-input,.list-filter input{width:100%;height:100%;border:0;background:transparent;color:var(--ms-on-surface, #212121);font:inherit}.list-filter .c-input::placeholder,.list-filter input::placeholder{color:var(--ms-on-surface-muted, #5f6368)}.list-filter .c-input:focus,.list-filter input:focus{outline:none}.list-filter .c-search,.list-filter .c-clear{position:absolute;top:50%;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;transform:translateY(-50%);color:var(--ms-on-surface-muted, #5f6368)}.list-filter .c-search{left:16px}.list-filter .c-clear{right:16px;cursor:pointer}.btn-container{padding:10px 14px 14px;text-align:center}.btn-iceblue{width:100%;min-height:40px;border-radius:999px;border:1px solid transparent;background:var(--ms-primary, #3f51b5);color:#fff;font-weight:600}.dropdown-list ul{list-style:none;margin:0;padding:8px;overflow:auto;background:var(--ms-surface, #ffffff)}.dropdown-list ul li{align-items:center;min-height:0;margin:4px;padding:12px 14px;border-radius:14px;cursor:pointer;text-align:left;line-height:1.35;transition:background-color .16s ease,color .16s ease}.dropdown-list ul li:hover{background:var(--ms-surface-soft, #f5f7fb)}.dropdown-list ul li:focus-visible{outline:3px solid rgba(63,81,181,.32);outline-offset:2px}.dropdown-option.is-disabled{cursor:not-allowed;opacity:.58}.selected-item{background:var(--ms-primary-soft, rgba(63, 81, 181, .12))!important;color:var(--ms-primary, #3f51b5)}.selected-item:hover{background:#6750a42e!important}.grp-item{padding-left:42px!important}.grp-title{margin-top:6px;padding-top:10px!important;padding-bottom:8px!important;background:transparent!important;color:var(--ms-on-surface-muted, #5f6368);cursor:default!important}.grp-title label{margin-bottom:0!important;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.grp-title:hover{background:transparent!important}.pure-checkbox{position:relative}.pure-checkbox input[type=checkbox]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pure-checkbox input[type=checkbox]+label{position:relative;display:block;width:100%;margin:0;padding-left:32px;color:inherit;cursor:pointer;font-weight:500;-webkit-user-select:none;user-select:none}.pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:0;width:18px;height:18px;margin-top:-10px;border:2px solid var(--ms-outline-strong, #7986cb);border-radius:6px;background:var(--ms-surface, #ffffff);transition:all .18s ease}.pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:11px;width:8px;height:4px;margin-top:0;border-style:solid;border-width:0 0 2px 2px;border-color:#fff;transform:translate(-50%,-58%) rotate(-45deg) scale(0);transform-origin:50%;transition:transform .16s ease-out}.pure-checkbox input[type=checkbox]:focus+label:before,.pure-checkbox input[type=checkbox]:hover+label:before{border-color:var(--ms-primary, #3f51b5);box-shadow:0 0 0 4px #3f51b51f}.pure-checkbox input[type=checkbox]:checked+label:before{border-color:var(--ms-primary, #3f51b5);background:var(--ms-primary, #3f51b5)}.pure-checkbox input[type=checkbox]:checked+label:after{transform:translate(-50%,-58%) rotate(-45deg) scale(1)}.pure-checkbox input[type=checkbox]:disabled+label{color:#b1acb8;cursor:not-allowed}.pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#d5d0db;background:#f2edf7;box-shadow:none}.single-select-mode .pure-checkbox input[type=checkbox]+label:before,.single-select-mode .pure-checkbox input[type=checkbox]+label:after{opacity:0}.single-select-mode .pure-checkbox input[type=checkbox]+label{padding-left:0}.list-message,.nodata-label{margin:0;padding:22px 16px 24px;color:var(--ms-on-surface-muted, #5f6368);text-align:center;font-size:.95rem;font-weight:500}.list-grp{padding:0 15px!important}.list-grp h4{margin:16px 0 6px;color:var(--ms-on-surface, #212121);font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.list-grp>li{padding-left:15px!important}.loading-icon{position:absolute;top:18px;right:16px;width:18px;z-index:2}.dropdown-list ::-webkit-scrollbar{width:10px}.dropdown-list ::-webkit-scrollbar-thumb{background:#7d778657;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.dropdown-list ::-webkit-scrollbar-track{background:transparent}.stackline-dropdown.theme-dark,.dropdown-list.theme-dark{--ms-primary: #8ab4f8;--ms-primary-soft: rgba(138, 180, 248, .18);--ms-surface: #151a23;--ms-surface-soft: #202736;--ms-surface-muted: #111722;--ms-outline: #384456;--ms-outline-strong: #8ab4f8;--ms-on-surface: #edf2f7;--ms-on-surface-muted: #aab6c5;--ms-chip-bg: #263247;--ms-chip-text: #d7e6ff;--ms-chip-remove: #d7e6ff;--ms-shadow: 0 20px 50px rgba(0, 0, 0, .42);--ms-shadow-soft: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 24px rgba(0, 0, 0, .28)}.stackline-dropdown.theme-custom,.dropdown-list.theme-custom{--ms-primary: var(--stackline-ms-primary, #0f766e);--ms-primary-soft: var(--stackline-ms-primary-soft, rgba(15, 118, 110, .14));--ms-surface: var(--stackline-ms-surface, #ffffff);--ms-surface-soft: var(--stackline-ms-surface-soft, #ecfdf5);--ms-surface-muted: var(--stackline-ms-surface-muted, #d1fae5);--ms-outline: var(--stackline-ms-outline, #99f6e4);--ms-outline-strong: var(--stackline-ms-outline-strong, #0f766e);--ms-on-surface: var(--stackline-ms-on-surface, #102a2a);--ms-on-surface-muted: var(--stackline-ms-on-surface-muted, #47615f);--ms-chip-bg: var(--stackline-ms-chip-bg, #ccfbf1);--ms-chip-text: var(--stackline-ms-chip-text, #115e59);--ms-chip-remove: var(--stackline-ms-chip-remove, #115e59);--ms-shadow: var(--stackline-ms-shadow, 0 18px 42px rgba(15, 118, 110, .15));--ms-shadow-soft: var(--stackline-ms-shadow-soft, 0 1px 2px rgba(15, 118, 110, .16), 0 8px 18px rgba(15, 118, 110, .09))}.stackline-dropdown.theme-classic,.dropdown-list.theme-classic{--ms-primary: #0079fe;--ms-primary-soft: #e9f4ff;--ms-surface: #ffffff;--ms-surface-soft: #f5f5f5;--ms-outline: #cccccc;--ms-outline-strong: #0079fe;--ms-on-surface: #333333;--ms-on-surface-muted: #333333;--ms-chip-bg: #0079fe;--ms-chip-text: #ffffff;--ms-chip-remove: #ffffff;--ms-shadow: 0 1px 5px #959595;--ms-shadow-soft: 0 1px 5px #959595;color:#333}.stackline-dropdown.theme-classic .selected-list{width:100%}.stackline-dropdown.theme-classic .c-btn{display:flex;align-items:center;align-content:center;flex-wrap:nowrap;gap:6px;min-height:42px;padding:10px 68px 10px 10px;border:1px solid #cccccc;border-radius:3px;background:#fff;box-shadow:0 1px 5px #959595;color:#333;font-size:14px;line-height:1.35}.stackline-dropdown.theme-classic .c-btn.has-selection{padding-right:104px}.stackline-dropdown.theme-classic .c-btn.is-active,.stackline-dropdown.theme-classic .c-btn:hover{border-color:#ccc;box-shadow:0 1px 5px #959595}.stackline-dropdown.theme-classic .c-btn.disabled{background:#ccc;opacity:1}.stackline-dropdown.theme-classic .c-placeholder,.stackline-dropdown.theme-classic .c-single-value{color:#333;font-size:14px}.stackline-dropdown.theme-classic .c-list{display:flex;flex:1 1 auto;align-items:center;flex-wrap:wrap;gap:4px;width:auto;min-width:0;margin:0;padding:0}.stackline-dropdown.theme-classic .c-chip-list{padding-right:0}.stackline-dropdown.theme-classic .c-token{display:inline-block;min-height:0;margin:2px 0 0;padding:2px 24px 2px 6px;border-radius:2px;background:#0079fe;box-shadow:none;color:#fff;line-height:1.4}.stackline-dropdown.theme-classic .c-token .c-label{display:inline;color:#fff;font-size:14px;font-weight:400;line-height:1.4}.stackline-dropdown.theme-classic .c-remove{right:5px;width:14px;height:14px;color:#fff}.stackline-dropdown.theme-classic .c-remove c-icon{width:9px;height:9px}.stackline-dropdown.theme-classic .clear-all{right:42px;width:18px;height:18px;color:#333}.stackline-dropdown.theme-classic .clear-all c-icon{width:11px;height:11px}.stackline-dropdown.theme-classic .countplaceholder{right:76px;color:#333;font-size:14px;font-weight:400}.stackline-dropdown.theme-classic .c-angle-down,.stackline-dropdown.theme-classic .c-angle-up{right:10px;width:20px;height:20px;color:#333}.stackline-dropdown.theme-classic .dropdown-list{padding-top:14px;padding-bottom:0;z-index:9999}.stackline-dropdown.theme-classic .dropdown-list.opens-up{padding-top:0;padding-bottom:14px}.stackline-dropdown.theme-classic .dropdown-list.opens-down{padding-top:14px;padding-bottom:0}.stackline-dropdown.theme-classic .arrow-up{display:block;position:absolute;top:0;width:0;height:0;margin-left:15px;border-right:13px solid transparent;border-bottom:15px solid #ffffff;border-left:13px solid transparent}.stackline-dropdown.theme-classic .arrow-2{top:-1px;border-bottom-color:#ccc}.stackline-dropdown.theme-classic .arrow-down{display:block;position:absolute;top:auto;bottom:0;width:0;height:0;margin-left:15px;border-right:13px solid transparent;border-top:15px solid #ffffff;border-left:13px solid transparent}.stackline-dropdown.theme-classic .arrow-down.arrow-2{top:auto;bottom:-1px;border-top-color:#ccc}.stackline-dropdown.theme-classic .list-area{overflow:hidden;margin:0;border:1px solid #cccccc;border-radius:3px;background:#fff;box-shadow:0 1px 5px #959595}.stackline-dropdown.theme-classic .select-all,.stackline-dropdown.theme-classic .filter-select-all{padding:10px;border-bottom:1px solid #cccccc;background:#fff}.stackline-dropdown.theme-classic .list-filter{display:block;min-height:35px;padding:0;border-bottom:1px solid #cccccc;background:#fff}.stackline-dropdown.theme-classic .list-filter .c-input,.stackline-dropdown.theme-classic .list-filter input{height:35px;padding:0 35px;color:#333}.stackline-dropdown.theme-classic .list-filter .c-search{left:13px}.stackline-dropdown.theme-classic .list-filter .c-clear{right:13px}.stackline-dropdown.theme-classic .btn-container{padding:10px}.stackline-dropdown.theme-classic .btn-iceblue{min-height:35px;border-radius:3px;background:#0079fe}.stackline-dropdown.theme-classic .dropdown-list ul{margin:0;padding:0}.stackline-dropdown.theme-classic .dropdown-list ul li{min-height:0;margin:0;padding:10px;border-radius:0;color:#333;line-height:1.35}.stackline-dropdown.theme-classic .dropdown-list ul li:hover{background:#f5f5f5}.stackline-dropdown.theme-classic .selected-item,.stackline-dropdown.theme-classic .selected-item:hover{background:#e9f4ff!important;color:#333}.stackline-dropdown.theme-classic .grp-item{padding-left:30px!important}.stackline-dropdown.theme-classic .grp-title{color:#000}.stackline-dropdown.theme-classic .grp-title label,.stackline-dropdown.theme-classic .list-grp h4{font-size:14px;font-weight:700;letter-spacing:0;text-transform:capitalize}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]+label{padding-left:2em;color:#000;font-weight:300}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]+label:before{width:14px;height:14px;margin-top:-9px;border:2px solid #0079fe;border-radius:0;background:#fff}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]+label:after{top:50%;left:9px;width:8px;height:3px;margin-top:0;border-width:0 0 3px 3px;border-color:#fff;background:transparent}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]:hover+label:before{border-color:#0079fe;background-color:#f2f2f2;box-shadow:none}.stackline-dropdown.theme-classic .pure-checkbox input[type=checkbox]:checked+label:before{border-color:#0079fe;background:#0079fe}.stackline-dropdown.theme-classic .single-select-mode .pure-checkbox input[type=checkbox]+label{padding-left:0}.dropdown-list.theme-classic{padding-top:14px;padding-bottom:0;z-index:100000}.dropdown-list.theme-classic.opens-up{padding-top:0;padding-bottom:14px}.dropdown-list.theme-classic.opens-down{padding-top:14px;padding-bottom:0}.dropdown-list.theme-classic .arrow-up{display:block;position:absolute;top:0;width:0;height:0;margin-left:15px;border-right:13px solid transparent;border-bottom:15px solid #ffffff;border-left:13px solid transparent}.dropdown-list.theme-classic .arrow-2{top:-1px;border-bottom-color:#ccc}.dropdown-list.theme-classic .arrow-down{display:block;position:absolute;top:auto;bottom:0;width:0;height:0;margin-left:15px;border-right:13px solid transparent;border-top:15px solid #ffffff;border-left:13px solid transparent}.dropdown-list.theme-classic .arrow-down.arrow-2{top:auto;bottom:-1px;border-top-color:#ccc}.dropdown-list.theme-classic .list-area{overflow:hidden;margin:0;border:1px solid #cccccc;border-radius:3px;background:#fff;box-shadow:0 1px 5px #959595}.dropdown-list.theme-classic .select-all,.dropdown-list.theme-classic .filter-select-all{padding:10px;border-bottom:1px solid #cccccc;background:#fff}.dropdown-list.theme-classic .list-filter{display:block;min-height:35px;padding:0;border-bottom:1px solid #cccccc;background:#fff}.dropdown-list.theme-classic .list-filter .c-input,.dropdown-list.theme-classic .list-filter input{height:35px;padding:0 35px;color:#333}.dropdown-list.theme-classic .list-filter .c-search{left:13px}.dropdown-list.theme-classic .list-filter .c-clear{right:13px}.dropdown-list.theme-classic .btn-container{padding:10px}.dropdown-list.theme-classic .btn-iceblue{min-height:35px;border-radius:3px;background:#0079fe}.dropdown-list.theme-classic ul{margin:0;padding:0}.dropdown-list.theme-classic ul li{min-height:0;margin:0;padding:10px;border-radius:0;color:#333;line-height:1.35}.dropdown-list.theme-classic ul li:hover{background:#f5f5f5}.dropdown-list.theme-classic .selected-item,.dropdown-list.theme-classic .selected-item:hover{background:#e9f4ff!important;color:#333}.dropdown-list.theme-classic .grp-item{padding-left:30px!important}.dropdown-list.theme-classic .grp-title{color:#000}.dropdown-list.theme-classic .grp-title label,.dropdown-list.theme-classic .list-grp h4{font-size:14px;font-weight:700;letter-spacing:0;text-transform:capitalize}.dropdown-list.theme-classic .pure-checkbox input[type=checkbox]+label{padding-left:2em;color:#000;font-weight:300}.dropdown-list.theme-classic .pure-checkbox input[type=checkbox]+label:before{width:14px;height:14px;margin-top:-9px;border:2px solid #0079fe;border-radius:0;background:#fff}.dropdown-list.theme-classic .pure-checkbox input[type=checkbox]+label:after{top:50%;left:9px;width:8px;height:3px;margin-top:0;border-width:0 0 3px 3px;border-color:#fff;background:transparent}.dropdown-list.theme-classic .pure-checkbox input[type=checkbox]:focus+label:before,.dropdown-list.theme-classic .pure-checkbox input[type=checkbox]:hover+label:before{border-color:#0079fe;background-color:#f2f2f2;box-shadow:none}.dropdown-list.theme-classic .pure-checkbox input[type=checkbox]:checked+label:before{border-color:#0079fe;background:#0079fe}.dropdown-list.theme-classic .single-select-mode .pure-checkbox input[type=checkbox]+label{padding-left:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: ListFilterPipe }], propDecorators: { data: [{
@@ -3496,11 +3404,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
                 args: [VirtualScrollerComponent, { static: false }]
             }] } });
 class AngularMultiSelectModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AngularMultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.7", ngImport: i0, type: AngularMultiSelectModule, declarations: [AngularMultiSelect, ClickOutsideDirective, ScrollDirective, styleDirective, ListFilterPipe, Item, TemplateRenderer, Badge, Search, setPosition, CIcon], imports: [CommonModule, FormsModule, VirtualScrollerModule], exports: [AngularMultiSelect, ClickOutsideDirective, ScrollDirective, styleDirective, ListFilterPipe, Item, TemplateRenderer, Badge, Search, setPosition, CIcon] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AngularMultiSelectModule, providers: [DataService, ListFilterPipe], imports: [CommonModule, FormsModule, VirtualScrollerModule] });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: AngularMultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.0", ngImport: i0, type: AngularMultiSelectModule, declarations: [AngularMultiSelect, ClickOutsideDirective, ScrollDirective, styleDirective, ListFilterPipe, Item, TemplateRenderer, Badge, Search, setPosition, CIcon], imports: [CommonModule, FormsModule, VirtualScrollerModule], exports: [AngularMultiSelect, ClickOutsideDirective, ScrollDirective, styleDirective, ListFilterPipe, Item, TemplateRenderer, Badge, Search, setPosition, CIcon] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: AngularMultiSelectModule, providers: [DataService, ListFilterPipe], imports: [CommonModule, FormsModule, VirtualScrollerModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AngularMultiSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: AngularMultiSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, FormsModule, VirtualScrollerModule],
@@ -3525,15 +3433,10 @@ function cleanId(value) {
         .replace(/^-+|-+$/g, '');
 }
 class AngularMultiselectState {
-    data;
-    selectedItems;
-    settings;
-    filter = '';
-    isOpen = false;
-    activeKey = null;
-    id;
-    onChange;
     constructor(config) {
+        this.filter = '';
+        this.isOpen = false;
+        this.activeKey = null;
         this.id = config.id || Math.random().toString(36).slice(2);
         this.data = config.data || [];
         this.selectedItems = config.selectedItems ? config.selectedItems.slice() : [];