@stackline/angular-multiselect-dropdown 17.0.0 → 18.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +12 -12
  2. package/esm2022/lib/clickOutside.mjs +9 -9
  3. package/esm2022/lib/list-filter.mjs +3 -3
  4. package/esm2022/lib/menu-item.mjs +9 -9
  5. package/esm2022/lib/multiselect.component.mjs +7 -7
  6. package/fesm2022/stackline-angular-multiselect-dropdown.mjs +28 -28
  7. package/package.json +7 -7
package/README.md CHANGED
@@ -6,13 +6,13 @@
6
6
  [![npm downloads](https://img.shields.io/npm/dt/@stackline/angular-multiselect-dropdown.svg?style=flat-square)](https://www.npmjs.com/package/@stackline/angular-multiselect-dropdown)
7
7
  [![npm monthly](https://img.shields.io/npm/dm/@stackline/angular-multiselect-dropdown.svg?style=flat-square)](https://www.npmjs.com/package/@stackline/angular-multiselect-dropdown)
8
8
  [![license](https://img.shields.io/npm/l/@stackline/angular-multiselect-dropdown.svg?style=flat-square)](https://github.com/alexandroit/angular-multiselect-dropdown/blob/master/LICENSE)
9
- [![Angular 17](https://img.shields.io/badge/Angular-17.x-red?style=flat-square&logo=angular)](https://alexandro.net/docs/angular/multiselect/angular-17/)
10
- [![TypeScript](https://img.shields.io/badge/TypeScript-5.4-blue?style=flat-square&logo=typescript)](https://www.typescriptlang.org)
9
+ [![Angular 18](https://img.shields.io/badge/Angular-18.x-red?style=flat-square&logo=angular)](https://alexandro.net/docs/angular/multiselect/angular-18/)
10
+ [![TypeScript](https://img.shields.io/badge/TypeScript-5.5-blue?style=flat-square&logo=typescript)](https://www.typescriptlang.org)
11
11
  [![GitHub stars](https://img.shields.io/github/stars/alexandroit/angular-multiselect-dropdown.svg?style=flat-square)](https://github.com/alexandroit/angular-multiselect-dropdown/stargazers)
12
12
 
13
- **[Documentation & Live Demos](https://alexandro.net/docs/angular/multiselect/)** | **[Angular 17 Demo](https://alexandro.net/docs/angular/multiselect/angular-17/)** | **[npm](https://www.npmjs.com/package/@stackline/angular-multiselect-dropdown)** | **[Issues](https://github.com/alexandroit/angular-multiselect-dropdown/issues)** | **[Repository](https://github.com/alexandroit/angular-multiselect-dropdown)**
13
+ **[Documentation & Live Demos](https://alexandro.net/docs/angular/multiselect/)** | **[Angular 18 Demo](https://alexandro.net/docs/angular/multiselect/angular-18/)** | **[npm](https://www.npmjs.com/package/@stackline/angular-multiselect-dropdown)** | **[Issues](https://github.com/alexandroit/angular-multiselect-dropdown/issues)** | **[Repository](https://github.com/alexandroit/angular-multiselect-dropdown)**
14
14
 
15
- **Latest tested npm release:** `17.0.0` for Angular `17.x`
15
+ **Latest tested npm release:** `18.0.0` for Angular `18.x`
16
16
 
17
17
  ---
18
18
 
@@ -24,15 +24,15 @@
24
24
 
25
25
  The original `angular2-multiselect-dropdown` package became difficult to keep current across multiple Angular generations. This maintained package keeps the classic API and template structure intact, introduces the new primary selector `<angular-multiselect>`, preserves the legacy alias `<angular2-multiselect>`, and publishes the project line by line so older applications can keep a predictable upgrade path.
26
26
 
27
- The repository contains the full documentation matrix from Angular 2 through Angular 21. The current public npm release is `17.0.0` for Angular 17.x applications.
27
+ The repository contains the full documentation matrix from Angular 2 through Angular 21. The current public npm release is `18.0.0` for Angular 18.x applications.
28
28
 
29
- The Angular 17 package is compatible with Angular 17.x and was tested in a real Angular 17.3.12 application before npm publication.
29
+ The Angular 18 package is compatible with Angular 18.x and was tested in a real Angular 18.2.14 application before npm publication.
30
30
 
31
31
  ## Features
32
32
 
33
33
  | Feature | Supported |
34
34
  | :--- | :---: |
35
- | Angular 17 tested published release line | ✅ |
35
+ | Angular 18 tested published release line | ✅ |
36
36
  | Multi-select and single-select modes | ✅ |
37
37
  | Search and filter | ✅ |
38
38
  | Group by field | ✅ |
@@ -54,7 +54,7 @@ The Angular 17 package is compatible with Angular 17.x and was tested in a real
54
54
  4. [Setup](#setup)
55
55
  5. [Custom CSS and SCSS Themes](#custom-css-and-scss-themes)
56
56
  6. [Basic Usage](#basic-usage)
57
- 7. [Official Angular 17 Test Matrix](#official-angular-17-test-matrix)
57
+ 7. [Official Angular 18 Test Matrix](#official-angular-18-test-matrix)
58
58
  8. [Custom Templates](#custom-templates)
59
59
  9. [Forms Integration](#forms-integration)
60
60
  10. [Lazy Loading and Remote Data](#lazy-loading-and-remote-data)
@@ -98,10 +98,10 @@ Each package family only installs on its matching Angular family. Framework majo
98
98
  ## Installation
99
99
 
100
100
  ```bash
101
- npm install @stackline/angular-multiselect-dropdown@17.0.0 --save-exact
101
+ npm install @stackline/angular-multiselect-dropdown@18.0.0 --save-exact
102
102
  ```
103
103
 
104
- Install `17.0.0` for Angular 17.x applications. This line keeps the tested Angular 17 behavior, makes `<angular-multiselect>` the documented standard selector, and keeps `<angular2-multiselect>` only as a legacy compatibility alias.
104
+ Install `18.0.0` for Angular 18.x applications. This line keeps the tested Angular 18 behavior, makes `<angular-multiselect>` the documented standard selector, and keeps `<angular2-multiselect>` only as a legacy compatibility alias.
105
105
 
106
106
  ## Setup
107
107
 
@@ -195,9 +195,9 @@ dropdownSettings = {
195
195
  </angular-multiselect>
196
196
  ```
197
197
 
198
- ## Official Angular 17 Test Matrix
198
+ ## Official Angular 18 Test Matrix
199
199
 
200
- The published Angular 17 release was tested in a real Angular `17.3.12` application with `@stackline/angular-multiselect-dropdown@17.0.0`. The docs now use the same examples from that test app.
200
+ The published Angular 18 release was tested in a real Angular `18.2.14` application with `@stackline/angular-multiselect-dropdown@18.0.0`. The docs now use the same examples from that test app.
201
201
 
202
202
  Switch between skins through the settings object:
203
203
 
package/esm2022/lib/clickOutside.mjs CHANGED
@@ -15,10 +15,10 @@ export class ClickOutsideDirective {
15
15
  this.clickOutside.emit(event);
16
16
  }
17
17
  }
18
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
19
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onClick($event,$event.target)", "document:touchstart": "onClick($event,$event.target)" } }, ngImport: i0 });
18
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
19
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onClick($event,$event.target)", "document:touchstart": "onClick($event,$event.target)" } }, ngImport: i0 });
20
20
  }
21
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ClickOutsideDirective, decorators: [{
21
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ClickOutsideDirective, decorators: [{
22
22
  type: Directive,
23
23
  args: [{
24
24
  selector: '[clickOutside]'
@@ -41,10 +41,10 @@ export class ScrollDirective {
41
41
  onClick(event, targetElement) {
42
42
  this.scroll.emit(event);
43
43
  }
44
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ScrollDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
45
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: ScrollDirective, selector: "[scroll]", outputs: { scroll: "scroll" }, host: { listeners: { "scroll": "onClick($event)" } }, ngImport: i0 });
44
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScrollDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
45
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ScrollDirective, selector: "[scroll]", outputs: { scroll: "scroll" }, host: { listeners: { "scroll": "onClick($event)" } }, ngImport: i0 });
46
46
  }
47
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ScrollDirective, decorators: [{
47
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScrollDirective, decorators: [{
48
48
  type: Directive,
49
49
  args: [{
50
50
  selector: '[scroll]'
@@ -67,10 +67,10 @@ export class styleDirective {
67
67
  ngOnChanges() {
68
68
  this.el.nativeElement.style.top = this.styleVal;
69
69
  }
70
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: styleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
71
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: styleDirective, selector: "[styleProp]", inputs: { styleVal: ["styleProp", "styleVal"] }, usesOnChanges: true, ngImport: i0 });
70
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: styleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
71
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: styleDirective, selector: "[styleProp]", inputs: { styleVal: ["styleProp", "styleVal"] }, usesOnChanges: true, ngImport: i0 });
72
72
  }
73
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: styleDirective, decorators: [{
73
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: styleDirective, decorators: [{
74
74
  type: Directive,
75
75
  args: [{
76
76
  selector: '[styleProp]'
package/esm2022/lib/list-filter.mjs CHANGED
@@ -20,10 +20,10 @@ export class ListFilterPipe {
20
20
  }
21
21
  return found;
22
22
  }
23
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ListFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
24
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ListFilterPipe, name: "listFilter", pure: false });
23
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
24
+ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ListFilterPipe, name: "listFilter", pure: false });
25
25
  }
26
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ListFilterPipe, decorators: [{
26
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListFilterPipe, decorators: [{
27
27
  type: Pipe,
28
28
  args: [{
29
29
  name: 'listFilter',
package/esm2022/lib/menu-item.mjs CHANGED
@@ -4,10 +4,10 @@ export class Item {
4
4
  template;
5
5
  constructor() {
6
6
  }
7
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Item, deps: [], target: i0.ɵɵFactoryTarget.Component });
8
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: Item, selector: "c-item", queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: ``, isInline: true });
7
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Item, deps: [], target: i0.ɵɵFactoryTarget.Component });
8
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: Item, selector: "c-item", queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: ``, isInline: true });
9
9
  }
10
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Item, decorators: [{
10
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Item, decorators: [{
11
11
  type: Component,
12
12
  args: [{
13
13
  selector: 'c-item',
@@ -21,10 +21,10 @@ export class Badge {
21
21
  template;
22
22
  constructor() {
23
23
  }
24
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Badge, deps: [], target: i0.ɵɵFactoryTarget.Component });
25
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: Badge, selector: "c-badge", queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: ``, isInline: true });
24
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Badge, deps: [], target: i0.ɵɵFactoryTarget.Component });
25
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: Badge, selector: "c-badge", queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: ``, isInline: true });
26
26
  }
27
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Badge, decorators: [{
27
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Badge, decorators: [{
28
28
  type: Component,
29
29
  args: [{
30
30
  selector: 'c-badge',
@@ -51,10 +51,10 @@ export class TemplateRenderer {
51
51
  ngOnDestroy() {
52
52
  this.view.destroy();
53
53
  }
54
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TemplateRenderer, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
55
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TemplateRenderer, selector: "c-templateRenderer", inputs: { data: "data", item: "item" }, ngImport: i0, template: ``, isInline: true });
54
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TemplateRenderer, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
55
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TemplateRenderer, selector: "c-templateRenderer", inputs: { data: "data", item: "item" }, ngImport: i0, template: ``, isInline: true });
56
56
  }
57
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TemplateRenderer, decorators: [{
57
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TemplateRenderer, decorators: [{
58
58
  type: Component,
59
59
  args: [{
60
60
  selector: 'c-templateRenderer',
package/esm2022/lib/multiselect.component.mjs CHANGED
@@ -357,10 +357,10 @@ export class AngularMultiSelect {
357
357
  this.updateView(this.scrollTop);
358
358
  }
359
359
  }
360
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AngularMultiSelect, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
361
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AngularMultiSelect, selector: "angular-multiselect, angular2-multiselect", inputs: { data: "data", settings: "settings" }, outputs: { onSelect: "onSelect", onDeSelect: "onDeSelect", onSelectAll: "onSelectAll", onDeSelectAll: "onDeSelectAll", onOpen: "onOpen", onClose: "onClose" }, host: { properties: { "class": "defaultSettings.classes" } }, providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALIDATION], queries: [{ propertyName: "itemTempl", first: true, predicate: Item, descendants: true }, { propertyName: "badgeTempl", first: true, predicate: Badge, descendants: true }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"stackline-dropdown\" [ngClass]=\"getDropdownClasses()\" (clickOutside)=\"closeDropdown()\">\n <div class=\"selected-list\">\n <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\n <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n <span *ngIf=\"settings.singleSelection\">\n <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\n {{item[settings.labelKey]}}\n </span>\n </span>\n <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\n <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\n <span *ngIf=\"badgeTempl\" class=\"c-label\">\n <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\"></c-templateRenderer>\n </span>\n <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\n </div>\n </div> \n <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n </div> \n </div>\n <div class=\"dropdown-list\" [hidden]=\"!isActive\">\n <div class=\"arrow-up arrow-2\"></div>\n <div class=\"arrow-up\"></div>\n <div class=\"list-area\">\n <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\n <label>\n <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n </label>\n </div> \n <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && !settings.lazyLoading\">\n <span class=\"fa fa-search\"></span>\n <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\n </div> \n <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\n <span class=\"fa fa-search\"></span>\n <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\n </div>\n <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"lazyContainer\" >\n <span *ngIf=\"itemTempl\">\n <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </span>\n <span *ngIf=\"!itemTempl && !settings.lazyLoading\" >\n <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </span>\n <span *ngIf=\"!itemTempl && settings.lazyLoading\" >\n <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\n\n \n <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </div>\n </span>\n </ul>\n <div *ngIf=\"settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\n <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\n <span *ngIf=\"itemTempl\" >\n <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </span>\n <span *ngIf=\"!itemTempl\" >\n <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </span>\n </ul>\n </div>\n <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">{{settings.noDataLabel}}</h5>\n </div>\n </div>\n</div>\n", isInline: true, styles: [".stackline-dropdown{position:relative}.c-btn{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:14px;color:#333}.c-btn.disabled{background:#ccc}.c-btn:focus{outline:none}.selected-list .c-list{display:flex;flex:1 1 auto;align-items:center;flex-wrap:wrap;min-width:0;float:none;padding:0;margin:0;width:auto}.selected-list .c-list .c-token{list-style:none;padding:0 5px;background:#0079fe;color:#fff;border-radius:2px;margin-right:4px;margin-top:2px;float:left}.selected-list .c-list .c-token .c-label{display:block;float:left}.selected-list .c-list .c-token .fa-remove{margin-left:1px;font-size:12px}.selected-list .fa-angle-down,.selected-list .fa-angle-up{font-size:15pt;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.selected-list .countplaceholder{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;align-self:center;margin:0 0 0 6px;line-height:1}.selected-list .c-btn{box-sizing:border-box;width:100%;box-shadow:0 1px 5px #959595;padding:10px 36px 10px 10px;cursor:pointer;display:flex;align-items:center;flex-wrap:nowrap;position:relative}.dropdown-list{position:absolute;padding-top:14px;width:100%;z-index:9999}.dropdown-list ul{padding:0;list-style:none;overflow:auto;margin:0}.dropdown-list ul li{padding:10px;cursor:pointer;text-align:left}.dropdown-list ul li:first-child{padding-top:10px}.dropdown-list ul li:last-child{padding-bottom:10px}.dropdown-list ul li:hover{background:#f5f5f5}.dropdown-list ::-webkit-scrollbar{width:8px}.dropdown-list ::-webkit-scrollbar-thumb{background:#ccc;border-radius:5px}.dropdown-list ::-webkit-scrollbar-track{background:#f2f2f2}.arrow-up{width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:15px solid #fff;margin-left:15px;position:absolute;top:0}.arrow-2{border-bottom:15px solid #ccc;top:-1px}.list-area{border:1px solid #ccc;border-radius:3px;background:#fff;margin:0;box-shadow:0 1px 5px #959595}.select-all{padding:10px;border-bottom:1px solid #ccc;text-align:left}.list-filter{border-bottom:1px solid #ccc;position:relative}.list-filter input{border:0px;width:100%;height:35px;padding:0 0 0 35px}.list-filter input:focus{outline:none}.list-filter .fa{position:absolute;top:10px;left:13px;color:#888}.pure-checkbox input[type=checkbox]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pure-checkbox input[type=checkbox]:focus+label:before,.pure-checkbox input[type=checkbox]:hover+label:before{border-color:#0079fe;background-color:#f2f2f2}.pure-checkbox input[type=checkbox]:active+label:before{transition-duration:0s}.pure-checkbox input[type=checkbox]+label{position:relative;padding-left:2em;vertical-align:middle;-webkit-user-select:none;user-select:none;cursor:pointer;margin:0;color:#000;font-weight:300}.pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";color:#0079fe;position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;border:2px solid #0079FE;text-align:center;transition:all .4s ease}.pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";background-color:#0079fe;position:absolute;top:50%;left:4px;width:10px;height:10px;margin-top:-5px;transform:scale(0);transform-origin:50%;transition:transform .2s ease-out}.pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#ccc}.pure-checkbox input[type=checkbox]:disabled:focus+label:before .pure-checkbox input[type=checkbox]:disabled:hover+label:before{background-color:inherit}.pure-checkbox input[type=checkbox]:disabled:checked+label:before{background-color:#ccc}.pure-checkbox input[type=checkbox]+label:after{background-color:transparent;top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#fff;border-width:0 0 3px 3px;border-image:none;transform:rotate(-45deg) scale(0)}.pure-checkbox input[type=checkbox]:checked+label:after{content:\"\";transform:rotate(-45deg) scale(1);transition:transform .2s ease-out}.pure-checkbox input[type=radio]:checked+label:before{background-color:#fff}.pure-checkbox input[type=radio]:checked+label:after{transform:scale(1)}.pure-checkbox input[type=radio]+label:before{border-radius:50%}.pure-checkbox input[type=checkbox]:checked+label:before{background:#0079fe}.pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.list-message{text-align:center}.list-grp{padding:0 15px!important}.list-grp h4{text-transform:capitalize;margin:15px 0 0;font-size:14px;font-weight:700}.list-grp>li{padding-left:15px!important}.stackline-dropdown.theme-material,.stackline-dropdown.theme-dark,.stackline-dropdown.theme-custom{--ms-primary: #3f51b5;--ms-primary-soft: rgba(63, 81, 181, .12);--ms-surface: #ffffff;--ms-surface-soft: #f5f7fb;--ms-surface-muted: #e8eaf6;--ms-outline: #c5cae9;--ms-outline-strong: #7986cb;--ms-on-surface: #212121;--ms-on-surface-muted: #5f6368;--ms-chip-bg: #e8eaf6;--ms-chip-text: #303f9f;--ms-chip-remove: #303f9f;--ms-divider: rgba(125, 119, 134, .16);--ms-section-bg: rgba(247, 242, 250, .76);--ms-selected-text: var(--ms-primary);--ms-shadow: 0 1px 2px rgba(33, 33, 33, .16), 0 12px 32px rgba(63, 81, 181, .12);--ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, .12), 0 4px 12px rgba(33, 33, 33, .08);display:block;width:100%;color:var(--ms-on-surface);font:inherit}.stackline-dropdown.theme-dark{--ms-primary: #8ab4f8;--ms-primary-soft: rgba(138, 180, 248, .18);--ms-surface: #151a23;--ms-surface-soft: #202736;--ms-surface-muted: #111722;--ms-outline: #384456;--ms-outline-strong: #8ab4f8;--ms-on-surface: #edf2f7;--ms-on-surface-muted: #aab6c5;--ms-chip-bg: #263247;--ms-chip-text: #d7e6ff;--ms-chip-remove: #d7e6ff;--ms-divider: rgba(170, 182, 197, .18);--ms-section-bg: #101620;--ms-selected-text: #d7e6ff;--ms-shadow: 0 20px 50px rgba(0, 0, 0, .42);--ms-shadow-soft: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 24px rgba(0, 0, 0, .28)}.stackline-dropdown.theme-custom{--ms-primary: var(--stackline-ms-primary, #0f766e);--ms-primary-soft: var(--stackline-ms-primary-soft, rgba(15, 118, 110, .14));--ms-surface: var(--stackline-ms-surface, #ffffff);--ms-surface-soft: var(--stackline-ms-surface-soft, #ecfdf5);--ms-surface-muted: var(--stackline-ms-surface-muted, #d1fae5);--ms-outline: var(--stackline-ms-outline, #99f6e4);--ms-outline-strong: var(--stackline-ms-outline-strong, #0f766e);--ms-on-surface: var(--stackline-ms-on-surface, #102a2a);--ms-on-surface-muted: var(--stackline-ms-on-surface-muted, #47615f);--ms-chip-bg: var(--stackline-ms-chip-bg, #ccfbf1);--ms-chip-text: var(--stackline-ms-chip-text, #115e59);--ms-chip-remove: var(--stackline-ms-chip-remove, #115e59);--ms-divider: var(--stackline-ms-divider, rgba(15, 118, 110, .16));--ms-section-bg: var(--stackline-ms-section-bg, #f0fdfa);--ms-selected-text: var(--stackline-ms-selected-text, var(--ms-primary));--ms-shadow: var(--stackline-ms-shadow, 0 18px 42px rgba(15, 118, 110, .15));--ms-shadow-soft: var(--stackline-ms-shadow-soft, 0 1px 2px rgba(15, 118, 110, .16), 0 8px 18px rgba(15, 118, 110, .09))}.stackline-dropdown.theme-material .selected-list,.stackline-dropdown.theme-dark .selected-list,.stackline-dropdown.theme-custom .selected-list{width:100%}.stackline-dropdown.theme-material .selected-list .c-btn,.stackline-dropdown.theme-dark .selected-list .c-btn,.stackline-dropdown.theme-custom .selected-list .c-btn{position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:8px;width:100%;min-height:56px;padding:11px 54px 11px 16px;border-radius:18px;border:1px solid var(--ms-outline);background:var(--ms-surface);box-shadow:var(--ms-shadow-soft);color:var(--ms-on-surface);cursor:pointer;font-size:inherit;line-height:1.45;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease,transform .16s ease}.stackline-dropdown.theme-material .selected-list .c-btn:hover,.stackline-dropdown.theme-dark .selected-list .c-btn:hover,.stackline-dropdown.theme-custom .selected-list .c-btn:hover{border-color:var(--ms-outline-strong)}.stackline-dropdown.theme-material .selected-list .c-btn.disabled,.stackline-dropdown.theme-dark .selected-list .c-btn.disabled,.stackline-dropdown.theme-custom .selected-list .c-btn.disabled{background:var(--ms-surface);cursor:not-allowed;opacity:.72}.stackline-dropdown.theme-material .selected-list .c-list,.stackline-dropdown.theme-dark .selected-list .c-list,.stackline-dropdown.theme-custom .selected-list .c-list{display:flex;flex:1 1 auto;flex-wrap:wrap;gap:8px;width:auto;min-width:0;margin:0;padding:0;float:none}.stackline-dropdown.theme-material .selected-list .c-list .c-token,.stackline-dropdown.theme-dark .selected-list .c-list .c-token,.stackline-dropdown.theme-custom .selected-list .c-list .c-token{position:relative;display:inline-block;vertical-align:middle;min-height:32px;max-width:100%;padding:6px 30px 6px 12px;background:var(--ms-chip-bg);color:var(--ms-chip-text);border-radius:999px;box-shadow:inset 0 0 0 1px #6750a414;line-height:1.35;white-space:normal;overflow-wrap:anywhere;margin:0;float:none}.stackline-dropdown.theme-material .selected-list .c-list .c-token .c-label,.stackline-dropdown.theme-dark .selected-list .c-list .c-token .c-label,.stackline-dropdown.theme-custom .selected-list .c-list .c-token .c-label{display:inline-flex;align-items:center;float:none;min-width:0;max-width:100%;line-height:1.3;font-weight:500;white-space:normal;overflow-wrap:anywhere}.stackline-dropdown.theme-material .selected-list .c-list .c-token .fa-remove,.stackline-dropdown.theme-dark .selected-list .c-list .c-token .fa-remove,.stackline-dropdown.theme-custom .selected-list .c-list .c-token .fa-remove{position:absolute;right:10px;top:50%;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:0;transform:translateY(-50%);color:var(--ms-chip-remove);cursor:pointer}.stackline-dropdown.theme-material .selected-list .countplaceholder,.stackline-dropdown.theme-dark .selected-list .countplaceholder,.stackline-dropdown.theme-custom .selected-list .countplaceholder{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;align-self:center;margin:0;line-height:1;color:var(--ms-on-surface-muted);font-size:.8rem;font-weight:600}.stackline-dropdown.theme-material .selected-list .fa-angle-down,.stackline-dropdown.theme-dark .selected-list .fa-angle-down,.stackline-dropdown.theme-custom .selected-list .fa-angle-down,.stackline-dropdown.theme-material .selected-list .fa-angle-up,.stackline-dropdown.theme-dark .selected-list .fa-angle-up,.stackline-dropdown.theme-custom .selected-list .fa-angle-up{position:absolute;top:50%;right:16px;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;transform:translateY(-50%);color:var(--ms-on-surface-muted);font-size:15pt;pointer-events:none}.stackline-dropdown.theme-material .dropdown-list,.stackline-dropdown.theme-dark .dropdown-list,.stackline-dropdown.theme-custom .dropdown-list{position:absolute;width:100%;padding-top:8px;z-index:99999}.stackline-dropdown.theme-material .arrow-up,.stackline-dropdown.theme-dark .arrow-up,.stackline-dropdown.theme-custom .arrow-up,.stackline-dropdown.theme-material .arrow-down,.stackline-dropdown.theme-dark .arrow-down,.stackline-dropdown.theme-custom .arrow-down,.stackline-dropdown.theme-material .arrow-2,.stackline-dropdown.theme-dark .arrow-2,.stackline-dropdown.theme-custom .arrow-2{display:none}.stackline-dropdown.theme-material .list-area,.stackline-dropdown.theme-dark .list-area,.stackline-dropdown.theme-custom .list-area{overflow:hidden;border-radius:22px;background:var(--ms-surface);border:1px solid var(--ms-outline);box-shadow:var(--ms-shadow);margin:0}.stackline-dropdown.theme-material .select-all,.stackline-dropdown.theme-dark .select-all,.stackline-dropdown.theme-custom .select-all{padding:10px 14px;border-bottom:1px solid var(--ms-divider);background:var(--ms-section-bg);text-align:left}.stackline-dropdown.theme-material .list-filter,.stackline-dropdown.theme-dark .list-filter,.stackline-dropdown.theme-custom .list-filter{position:relative;display:flex;align-items:center;min-height:52px;padding-left:48px;padding-right:44px;border-bottom:1px solid var(--ms-divider);background:var(--ms-surface)}.stackline-dropdown.theme-material .list-filter input,.stackline-dropdown.theme-dark .list-filter input,.stackline-dropdown.theme-custom .list-filter input{width:100%;height:100%;border:0;background:transparent;color:var(--ms-on-surface);font:inherit;padding:0}.stackline-dropdown.theme-material .list-filter input::placeholder,.stackline-dropdown.theme-dark .list-filter input::placeholder,.stackline-dropdown.theme-custom .list-filter input::placeholder{color:var(--ms-on-surface-muted)}.stackline-dropdown.theme-material .list-filter input:focus,.stackline-dropdown.theme-dark .list-filter input:focus,.stackline-dropdown.theme-custom .list-filter input:focus{outline:none}.stackline-dropdown.theme-material .list-filter .fa,.stackline-dropdown.theme-dark .list-filter .fa,.stackline-dropdown.theme-custom .list-filter .fa{position:absolute;top:50%;left:16px;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;transform:translateY(-50%);color:var(--ms-on-surface-muted)}.stackline-dropdown.theme-material .dropdown-list ul,.stackline-dropdown.theme-dark .dropdown-list ul,.stackline-dropdown.theme-custom .dropdown-list ul{list-style:none;margin:0;padding:8px;overflow:auto}.stackline-dropdown.theme-material .dropdown-list ul li,.stackline-dropdown.theme-dark .dropdown-list ul li,.stackline-dropdown.theme-custom .dropdown-list ul li{align-items:center;min-height:0;margin:4px;padding:12px 14px;border-radius:14px;cursor:pointer;text-align:left;line-height:1.35;transition:background-color .16s ease,color .16s ease}.stackline-dropdown.theme-material .dropdown-list ul li:first-child,.stackline-dropdown.theme-dark .dropdown-list ul li:first-child,.stackline-dropdown.theme-custom .dropdown-list ul li:first-child{padding-top:12px}.stackline-dropdown.theme-material .dropdown-list ul li:last-child,.stackline-dropdown.theme-dark .dropdown-list ul li:last-child,.stackline-dropdown.theme-custom .dropdown-list ul li:last-child{padding-bottom:12px}.stackline-dropdown.theme-material .dropdown-list ul li:hover,.stackline-dropdown.theme-dark .dropdown-list ul li:hover,.stackline-dropdown.theme-custom .dropdown-list ul li:hover{background:var(--ms-surface-soft)}.stackline-dropdown.theme-material .pure-checkbox,.stackline-dropdown.theme-dark .pure-checkbox,.stackline-dropdown.theme-custom .pure-checkbox{position:relative}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]+label{position:relative;display:block;width:100%;margin:0;padding-left:32px;color:inherit;cursor:pointer;font-weight:500;-webkit-user-select:none;user-select:none}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:0;width:16px;height:16px;margin-top:-10px;border:2px solid var(--ms-outline-strong);border-radius:5px;background:var(--ms-surface);transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label:after,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label:after,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:5px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#fff;border-width:0 0 3px 3px;border-image:none;background:transparent;transform:rotate(-45deg) scale(0);transform-origin:50%;transition:transform .16s ease}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:hover+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:hover+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:hover+label:before{border-color:var(--ms-primary);background:var(--ms-surface-soft)}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked+label:before{border-color:var(--ms-primary);background:var(--ms-primary)}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked+label:after,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked+label:after,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.stackline-dropdown.theme-material .list-message,.stackline-dropdown.theme-dark .list-message,.stackline-dropdown.theme-custom .list-message{margin:0;padding:20px 14px;color:var(--ms-on-surface-muted);text-align:center}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i2.DefaultValueAccessor), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i2.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i2.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i0.forwardRef(() => ClickOutsideDirective), selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "directive", type: i0.forwardRef(() => styleDirective), selector: "[styleProp]", inputs: ["styleProp"] }, { kind: "component", type: i0.forwardRef(() => TemplateRenderer), selector: "c-templateRenderer", inputs: ["data", "item"] }, { kind: "pipe", type: i0.forwardRef(() => ListFilterPipe), name: "listFilter" }] });
360
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AngularMultiSelect, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
361
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AngularMultiSelect, selector: "angular-multiselect, angular2-multiselect", inputs: { data: "data", settings: "settings" }, outputs: { onSelect: "onSelect", onDeSelect: "onDeSelect", onSelectAll: "onSelectAll", onDeSelectAll: "onDeSelectAll", onOpen: "onOpen", onClose: "onClose" }, host: { properties: { "class": "defaultSettings.classes" } }, providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALIDATION], queries: [{ propertyName: "itemTempl", first: true, predicate: Item, descendants: true }, { propertyName: "badgeTempl", first: true, predicate: Badge, descendants: true }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"stackline-dropdown\" [ngClass]=\"getDropdownClasses()\" (clickOutside)=\"closeDropdown()\">\n <div class=\"selected-list\">\n <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\n <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n <span *ngIf=\"settings.singleSelection\">\n <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\n {{item[settings.labelKey]}}\n </span>\n </span>\n <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\n <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\n <span *ngIf=\"badgeTempl\" class=\"c-label\">\n <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\"></c-templateRenderer>\n </span>\n <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\n </div>\n </div> \n <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n </div> \n </div>\n <div class=\"dropdown-list\" [hidden]=\"!isActive\">\n <div class=\"arrow-up arrow-2\"></div>\n <div class=\"arrow-up\"></div>\n <div class=\"list-area\">\n <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\n <label>\n <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n </label>\n </div> \n <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && !settings.lazyLoading\">\n <span class=\"fa fa-search\"></span>\n <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\n </div> \n <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\n <span class=\"fa fa-search\"></span>\n <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\n </div>\n <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"lazyContainer\" >\n <span *ngIf=\"itemTempl\">\n <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </span>\n <span *ngIf=\"!itemTempl && !settings.lazyLoading\" >\n <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </span>\n <span *ngIf=\"!itemTempl && settings.lazyLoading\" >\n <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\n\n \n <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </div>\n </span>\n </ul>\n <div *ngIf=\"settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\n <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\n <span *ngIf=\"itemTempl\" >\n <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </span>\n <span *ngIf=\"!itemTempl\" >\n <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </span>\n </ul>\n </div>\n <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">{{settings.noDataLabel}}</h5>\n </div>\n </div>\n</div>\n", isInline: true, styles: [".stackline-dropdown{position:relative}.c-btn{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:14px;color:#333}.c-btn.disabled{background:#ccc}.c-btn:focus{outline:none}.selected-list .c-list{display:flex;flex:1 1 auto;align-items:center;flex-wrap:wrap;min-width:0;float:none;padding:0;margin:0;width:auto}.selected-list .c-list .c-token{list-style:none;padding:0 5px;background:#0079fe;color:#fff;border-radius:2px;margin-right:4px;margin-top:2px;float:left}.selected-list .c-list .c-token .c-label{display:block;float:left}.selected-list .c-list .c-token .fa-remove{margin-left:1px;font-size:12px}.selected-list .fa-angle-down,.selected-list .fa-angle-up{font-size:15pt;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.selected-list .countplaceholder{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;align-self:center;margin:0 0 0 6px;line-height:1}.selected-list .c-btn{box-sizing:border-box;width:100%;box-shadow:0 1px 5px #959595;padding:10px 36px 10px 10px;cursor:pointer;display:flex;align-items:center;flex-wrap:nowrap;position:relative}.dropdown-list{position:absolute;padding-top:14px;width:100%;z-index:9999}.dropdown-list ul{padding:0;list-style:none;overflow:auto;margin:0}.dropdown-list ul li{padding:10px;cursor:pointer;text-align:left}.dropdown-list ul li:first-child{padding-top:10px}.dropdown-list ul li:last-child{padding-bottom:10px}.dropdown-list ul li:hover{background:#f5f5f5}.dropdown-list ::-webkit-scrollbar{width:8px}.dropdown-list ::-webkit-scrollbar-thumb{background:#ccc;border-radius:5px}.dropdown-list ::-webkit-scrollbar-track{background:#f2f2f2}.arrow-up{width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:15px solid #fff;margin-left:15px;position:absolute;top:0}.arrow-2{border-bottom:15px solid #ccc;top:-1px}.list-area{border:1px solid #ccc;border-radius:3px;background:#fff;margin:0;box-shadow:0 1px 5px #959595}.select-all{padding:10px;border-bottom:1px solid #ccc;text-align:left}.list-filter{border-bottom:1px solid #ccc;position:relative}.list-filter input{border:0px;width:100%;height:35px;padding:0 0 0 35px}.list-filter input:focus{outline:none}.list-filter .fa{position:absolute;top:10px;left:13px;color:#888}.pure-checkbox input[type=checkbox]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pure-checkbox input[type=checkbox]:focus+label:before,.pure-checkbox input[type=checkbox]:hover+label:before{border-color:#0079fe;background-color:#f2f2f2}.pure-checkbox input[type=checkbox]:active+label:before{transition-duration:0s}.pure-checkbox input[type=checkbox]+label{position:relative;padding-left:2em;vertical-align:middle;-webkit-user-select:none;user-select:none;cursor:pointer;margin:0;color:#000;font-weight:300}.pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";color:#0079fe;position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;border:2px solid #0079FE;text-align:center;transition:all .4s ease}.pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";background-color:#0079fe;position:absolute;top:50%;left:4px;width:10px;height:10px;margin-top:-5px;transform:scale(0);transform-origin:50%;transition:transform .2s ease-out}.pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#ccc}.pure-checkbox input[type=checkbox]:disabled:focus+label:before .pure-checkbox input[type=checkbox]:disabled:hover+label:before{background-color:inherit}.pure-checkbox input[type=checkbox]:disabled:checked+label:before{background-color:#ccc}.pure-checkbox input[type=checkbox]+label:after{background-color:transparent;top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#fff;border-width:0 0 3px 3px;border-image:none;transform:rotate(-45deg) scale(0)}.pure-checkbox input[type=checkbox]:checked+label:after{content:\"\";transform:rotate(-45deg) scale(1);transition:transform .2s ease-out}.pure-checkbox input[type=radio]:checked+label:before{background-color:#fff}.pure-checkbox input[type=radio]:checked+label:after{transform:scale(1)}.pure-checkbox input[type=radio]+label:before{border-radius:50%}.pure-checkbox input[type=checkbox]:checked+label:before{background:#0079fe}.pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.list-message{text-align:center}.list-grp{padding:0 15px!important}.list-grp h4{text-transform:capitalize;margin:15px 0 0;font-size:14px;font-weight:700}.list-grp>li{padding-left:15px!important}.stackline-dropdown.theme-material,.stackline-dropdown.theme-dark,.stackline-dropdown.theme-custom{--ms-primary: #3f51b5;--ms-primary-soft: rgba(63, 81, 181, .12);--ms-surface: #ffffff;--ms-surface-soft: #f5f7fb;--ms-surface-muted: #e8eaf6;--ms-outline: #c5cae9;--ms-outline-strong: #7986cb;--ms-on-surface: #212121;--ms-on-surface-muted: #5f6368;--ms-chip-bg: #e8eaf6;--ms-chip-text: #303f9f;--ms-chip-remove: #303f9f;--ms-divider: rgba(125, 119, 134, .16);--ms-section-bg: rgba(247, 242, 250, .76);--ms-selected-text: var(--ms-primary);--ms-shadow: 0 1px 2px rgba(33, 33, 33, .16), 0 12px 32px rgba(63, 81, 181, .12);--ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, .12), 0 4px 12px rgba(33, 33, 33, .08);display:block;width:100%;color:var(--ms-on-surface);font:inherit}.stackline-dropdown.theme-dark{--ms-primary: #8ab4f8;--ms-primary-soft: rgba(138, 180, 248, .18);--ms-surface: #151a23;--ms-surface-soft: #202736;--ms-surface-muted: #111722;--ms-outline: #384456;--ms-outline-strong: #8ab4f8;--ms-on-surface: #edf2f7;--ms-on-surface-muted: #aab6c5;--ms-chip-bg: #263247;--ms-chip-text: #d7e6ff;--ms-chip-remove: #d7e6ff;--ms-divider: rgba(170, 182, 197, .18);--ms-section-bg: #101620;--ms-selected-text: #d7e6ff;--ms-shadow: 0 20px 50px rgba(0, 0, 0, .42);--ms-shadow-soft: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 24px rgba(0, 0, 0, .28)}.stackline-dropdown.theme-custom{--ms-primary: var(--stackline-ms-primary, #0f766e);--ms-primary-soft: var(--stackline-ms-primary-soft, rgba(15, 118, 110, .14));--ms-surface: var(--stackline-ms-surface, #ffffff);--ms-surface-soft: var(--stackline-ms-surface-soft, #ecfdf5);--ms-surface-muted: var(--stackline-ms-surface-muted, #d1fae5);--ms-outline: var(--stackline-ms-outline, #99f6e4);--ms-outline-strong: var(--stackline-ms-outline-strong, #0f766e);--ms-on-surface: var(--stackline-ms-on-surface, #102a2a);--ms-on-surface-muted: var(--stackline-ms-on-surface-muted, #47615f);--ms-chip-bg: var(--stackline-ms-chip-bg, #ccfbf1);--ms-chip-text: var(--stackline-ms-chip-text, #115e59);--ms-chip-remove: var(--stackline-ms-chip-remove, #115e59);--ms-divider: var(--stackline-ms-divider, rgba(15, 118, 110, .16));--ms-section-bg: var(--stackline-ms-section-bg, #f0fdfa);--ms-selected-text: var(--stackline-ms-selected-text, var(--ms-primary));--ms-shadow: var(--stackline-ms-shadow, 0 18px 42px rgba(15, 118, 110, .15));--ms-shadow-soft: var(--stackline-ms-shadow-soft, 0 1px 2px rgba(15, 118, 110, .16), 0 8px 18px rgba(15, 118, 110, .09))}.stackline-dropdown.theme-material .selected-list,.stackline-dropdown.theme-dark .selected-list,.stackline-dropdown.theme-custom .selected-list{width:100%}.stackline-dropdown.theme-material .selected-list .c-btn,.stackline-dropdown.theme-dark .selected-list .c-btn,.stackline-dropdown.theme-custom .selected-list .c-btn{position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:8px;width:100%;min-height:56px;padding:11px 54px 11px 16px;border-radius:18px;border:1px solid var(--ms-outline);background:var(--ms-surface);box-shadow:var(--ms-shadow-soft);color:var(--ms-on-surface);cursor:pointer;font-size:inherit;line-height:1.45;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease,transform .16s ease}.stackline-dropdown.theme-material .selected-list .c-btn:hover,.stackline-dropdown.theme-dark .selected-list .c-btn:hover,.stackline-dropdown.theme-custom .selected-list .c-btn:hover{border-color:var(--ms-outline-strong)}.stackline-dropdown.theme-material .selected-list .c-btn.disabled,.stackline-dropdown.theme-dark .selected-list .c-btn.disabled,.stackline-dropdown.theme-custom .selected-list .c-btn.disabled{background:var(--ms-surface);cursor:not-allowed;opacity:.72}.stackline-dropdown.theme-material .selected-list .c-list,.stackline-dropdown.theme-dark .selected-list .c-list,.stackline-dropdown.theme-custom .selected-list .c-list{display:flex;flex:1 1 auto;flex-wrap:wrap;gap:8px;width:auto;min-width:0;margin:0;padding:0;float:none}.stackline-dropdown.theme-material .selected-list .c-list .c-token,.stackline-dropdown.theme-dark .selected-list .c-list .c-token,.stackline-dropdown.theme-custom .selected-list .c-list .c-token{position:relative;display:inline-block;vertical-align:middle;min-height:32px;max-width:100%;padding:6px 30px 6px 12px;background:var(--ms-chip-bg);color:var(--ms-chip-text);border-radius:999px;box-shadow:inset 0 0 0 1px #6750a414;line-height:1.35;white-space:normal;overflow-wrap:anywhere;margin:0;float:none}.stackline-dropdown.theme-material .selected-list .c-list .c-token .c-label,.stackline-dropdown.theme-dark .selected-list .c-list .c-token .c-label,.stackline-dropdown.theme-custom .selected-list .c-list .c-token .c-label{display:inline-flex;align-items:center;float:none;min-width:0;max-width:100%;line-height:1.3;font-weight:500;white-space:normal;overflow-wrap:anywhere}.stackline-dropdown.theme-material .selected-list .c-list .c-token .fa-remove,.stackline-dropdown.theme-dark .selected-list .c-list .c-token .fa-remove,.stackline-dropdown.theme-custom .selected-list .c-list .c-token .fa-remove{position:absolute;right:10px;top:50%;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:0;transform:translateY(-50%);color:var(--ms-chip-remove);cursor:pointer}.stackline-dropdown.theme-material .selected-list .countplaceholder,.stackline-dropdown.theme-dark .selected-list .countplaceholder,.stackline-dropdown.theme-custom .selected-list .countplaceholder{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;align-self:center;margin:0;line-height:1;color:var(--ms-on-surface-muted);font-size:.8rem;font-weight:600}.stackline-dropdown.theme-material .selected-list .fa-angle-down,.stackline-dropdown.theme-dark .selected-list .fa-angle-down,.stackline-dropdown.theme-custom .selected-list .fa-angle-down,.stackline-dropdown.theme-material .selected-list .fa-angle-up,.stackline-dropdown.theme-dark .selected-list .fa-angle-up,.stackline-dropdown.theme-custom .selected-list .fa-angle-up{position:absolute;top:50%;right:16px;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;transform:translateY(-50%);color:var(--ms-on-surface-muted);font-size:15pt;pointer-events:none}.stackline-dropdown.theme-material .dropdown-list,.stackline-dropdown.theme-dark .dropdown-list,.stackline-dropdown.theme-custom .dropdown-list{position:absolute;width:100%;padding-top:8px;z-index:99999}.stackline-dropdown.theme-material .arrow-up,.stackline-dropdown.theme-dark .arrow-up,.stackline-dropdown.theme-custom .arrow-up,.stackline-dropdown.theme-material .arrow-down,.stackline-dropdown.theme-dark .arrow-down,.stackline-dropdown.theme-custom .arrow-down,.stackline-dropdown.theme-material .arrow-2,.stackline-dropdown.theme-dark .arrow-2,.stackline-dropdown.theme-custom .arrow-2{display:none}.stackline-dropdown.theme-material .list-area,.stackline-dropdown.theme-dark .list-area,.stackline-dropdown.theme-custom .list-area{overflow:hidden;border-radius:22px;background:var(--ms-surface);border:1px solid var(--ms-outline);box-shadow:var(--ms-shadow);margin:0}.stackline-dropdown.theme-material .select-all,.stackline-dropdown.theme-dark .select-all,.stackline-dropdown.theme-custom .select-all{padding:10px 14px;border-bottom:1px solid var(--ms-divider);background:var(--ms-section-bg);text-align:left}.stackline-dropdown.theme-material .list-filter,.stackline-dropdown.theme-dark .list-filter,.stackline-dropdown.theme-custom .list-filter{position:relative;display:flex;align-items:center;min-height:52px;padding-left:48px;padding-right:44px;border-bottom:1px solid var(--ms-divider);background:var(--ms-surface)}.stackline-dropdown.theme-material .list-filter input,.stackline-dropdown.theme-dark .list-filter input,.stackline-dropdown.theme-custom .list-filter input{width:100%;height:100%;border:0;background:transparent;color:var(--ms-on-surface);font:inherit;padding:0}.stackline-dropdown.theme-material .list-filter input::placeholder,.stackline-dropdown.theme-dark .list-filter input::placeholder,.stackline-dropdown.theme-custom .list-filter input::placeholder{color:var(--ms-on-surface-muted)}.stackline-dropdown.theme-material .list-filter input:focus,.stackline-dropdown.theme-dark .list-filter input:focus,.stackline-dropdown.theme-custom .list-filter input:focus{outline:none}.stackline-dropdown.theme-material .list-filter .fa,.stackline-dropdown.theme-dark .list-filter .fa,.stackline-dropdown.theme-custom .list-filter .fa{position:absolute;top:50%;left:16px;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;transform:translateY(-50%);color:var(--ms-on-surface-muted)}.stackline-dropdown.theme-material .dropdown-list ul,.stackline-dropdown.theme-dark .dropdown-list ul,.stackline-dropdown.theme-custom .dropdown-list ul{list-style:none;margin:0;padding:8px;overflow:auto}.stackline-dropdown.theme-material .dropdown-list ul li,.stackline-dropdown.theme-dark .dropdown-list ul li,.stackline-dropdown.theme-custom .dropdown-list ul li{align-items:center;min-height:0;margin:4px;padding:12px 14px;border-radius:14px;cursor:pointer;text-align:left;line-height:1.35;transition:background-color .16s ease,color .16s ease}.stackline-dropdown.theme-material .dropdown-list ul li:first-child,.stackline-dropdown.theme-dark .dropdown-list ul li:first-child,.stackline-dropdown.theme-custom .dropdown-list ul li:first-child{padding-top:12px}.stackline-dropdown.theme-material .dropdown-list ul li:last-child,.stackline-dropdown.theme-dark .dropdown-list ul li:last-child,.stackline-dropdown.theme-custom .dropdown-list ul li:last-child{padding-bottom:12px}.stackline-dropdown.theme-material .dropdown-list ul li:hover,.stackline-dropdown.theme-dark .dropdown-list ul li:hover,.stackline-dropdown.theme-custom .dropdown-list ul li:hover{background:var(--ms-surface-soft)}.stackline-dropdown.theme-material .pure-checkbox,.stackline-dropdown.theme-dark .pure-checkbox,.stackline-dropdown.theme-custom .pure-checkbox{position:relative}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]+label{position:relative;display:block;width:100%;margin:0;padding-left:32px;color:inherit;cursor:pointer;font-weight:500;-webkit-user-select:none;user-select:none}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:0;width:16px;height:16px;margin-top:-10px;border:2px solid var(--ms-outline-strong);border-radius:5px;background:var(--ms-surface);transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label:after,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label:after,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:5px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#fff;border-width:0 0 3px 3px;border-image:none;background:transparent;transform:rotate(-45deg) scale(0);transform-origin:50%;transition:transform .16s ease}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:hover+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:hover+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:hover+label:before{border-color:var(--ms-primary);background:var(--ms-surface-soft)}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked+label:before{border-color:var(--ms-primary);background:var(--ms-primary)}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked+label:after,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked+label:after,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.stackline-dropdown.theme-material .list-message,.stackline-dropdown.theme-dark .list-message,.stackline-dropdown.theme-custom .list-message{margin:0;padding:20px 14px;color:var(--ms-on-surface-muted);text-align:center}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i2.DefaultValueAccessor), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i2.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i2.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i0.forwardRef(() => ClickOutsideDirective), selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "directive", type: i0.forwardRef(() => styleDirective), selector: "[styleProp]", inputs: ["styleProp"] }, { kind: "component", type: i0.forwardRef(() => TemplateRenderer), selector: "c-templateRenderer", inputs: ["data", "item"] }, { kind: "pipe", type: i0.forwardRef(() => ListFilterPipe), name: "listFilter" }] });
362
362
  }
363
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AngularMultiSelect, decorators: [{
363
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AngularMultiSelect, decorators: [{
364
364
  type: Component,
365
365
  args: [{ selector: 'angular-multiselect, angular2-multiselect', template: "<div class=\"stackline-dropdown\" [ngClass]=\"getDropdownClasses()\" (clickOutside)=\"closeDropdown()\">\n <div class=\"selected-list\">\n <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\n <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n <span *ngIf=\"settings.singleSelection\">\n <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\n {{item[settings.labelKey]}}\n </span>\n </span>\n <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\n <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\n <span *ngIf=\"badgeTempl\" class=\"c-label\">\n <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\"></c-templateRenderer>\n </span>\n <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\n </div>\n </div> \n <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n </div> \n </div>\n <div class=\"dropdown-list\" [hidden]=\"!isActive\">\n <div class=\"arrow-up arrow-2\"></div>\n <div class=\"arrow-up\"></div>\n <div class=\"list-area\">\n <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\n <label>\n <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n </label>\n </div> \n <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && !settings.lazyLoading\">\n <span class=\"fa fa-search\"></span>\n <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\n </div> \n <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\n <span class=\"fa fa-search\"></span>\n <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\n </div>\n <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"lazyContainer\" >\n <span *ngIf=\"itemTempl\">\n <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </span>\n <span *ngIf=\"!itemTempl && !settings.lazyLoading\" >\n <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </span>\n <span *ngIf=\"!itemTempl && settings.lazyLoading\" >\n <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\n\n \n <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </div>\n </span>\n </ul>\n <div *ngIf=\"settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\n <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\n <span *ngIf=\"itemTempl\" >\n <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </span>\n <span *ngIf=\"!itemTempl\" >\n <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </span>\n </ul>\n </div>\n <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">{{settings.noDataLabel}}</h5>\n </div>\n </div>\n</div>\n", host: { '[class]': 'defaultSettings.classes' }, providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALIDATION], styles: [".stackline-dropdown{position:relative}.c-btn{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:14px;color:#333}.c-btn.disabled{background:#ccc}.c-btn:focus{outline:none}.selected-list .c-list{display:flex;flex:1 1 auto;align-items:center;flex-wrap:wrap;min-width:0;float:none;padding:0;margin:0;width:auto}.selected-list .c-list .c-token{list-style:none;padding:0 5px;background:#0079fe;color:#fff;border-radius:2px;margin-right:4px;margin-top:2px;float:left}.selected-list .c-list .c-token .c-label{display:block;float:left}.selected-list .c-list .c-token .fa-remove{margin-left:1px;font-size:12px}.selected-list .fa-angle-down,.selected-list .fa-angle-up{font-size:15pt;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.selected-list .countplaceholder{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;align-self:center;margin:0 0 0 6px;line-height:1}.selected-list .c-btn{box-sizing:border-box;width:100%;box-shadow:0 1px 5px #959595;padding:10px 36px 10px 10px;cursor:pointer;display:flex;align-items:center;flex-wrap:nowrap;position:relative}.dropdown-list{position:absolute;padding-top:14px;width:100%;z-index:9999}.dropdown-list ul{padding:0;list-style:none;overflow:auto;margin:0}.dropdown-list ul li{padding:10px;cursor:pointer;text-align:left}.dropdown-list ul li:first-child{padding-top:10px}.dropdown-list ul li:last-child{padding-bottom:10px}.dropdown-list ul li:hover{background:#f5f5f5}.dropdown-list ::-webkit-scrollbar{width:8px}.dropdown-list ::-webkit-scrollbar-thumb{background:#ccc;border-radius:5px}.dropdown-list ::-webkit-scrollbar-track{background:#f2f2f2}.arrow-up{width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:15px solid #fff;margin-left:15px;position:absolute;top:0}.arrow-2{border-bottom:15px solid #ccc;top:-1px}.list-area{border:1px solid #ccc;border-radius:3px;background:#fff;margin:0;box-shadow:0 1px 5px #959595}.select-all{padding:10px;border-bottom:1px solid #ccc;text-align:left}.list-filter{border-bottom:1px solid #ccc;position:relative}.list-filter input{border:0px;width:100%;height:35px;padding:0 0 0 35px}.list-filter input:focus{outline:none}.list-filter .fa{position:absolute;top:10px;left:13px;color:#888}.pure-checkbox input[type=checkbox]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pure-checkbox input[type=checkbox]:focus+label:before,.pure-checkbox input[type=checkbox]:hover+label:before{border-color:#0079fe;background-color:#f2f2f2}.pure-checkbox input[type=checkbox]:active+label:before{transition-duration:0s}.pure-checkbox input[type=checkbox]+label{position:relative;padding-left:2em;vertical-align:middle;-webkit-user-select:none;user-select:none;cursor:pointer;margin:0;color:#000;font-weight:300}.pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";color:#0079fe;position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;border:2px solid #0079FE;text-align:center;transition:all .4s ease}.pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";background-color:#0079fe;position:absolute;top:50%;left:4px;width:10px;height:10px;margin-top:-5px;transform:scale(0);transform-origin:50%;transition:transform .2s ease-out}.pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#ccc}.pure-checkbox input[type=checkbox]:disabled:focus+label:before .pure-checkbox input[type=checkbox]:disabled:hover+label:before{background-color:inherit}.pure-checkbox input[type=checkbox]:disabled:checked+label:before{background-color:#ccc}.pure-checkbox input[type=checkbox]+label:after{background-color:transparent;top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#fff;border-width:0 0 3px 3px;border-image:none;transform:rotate(-45deg) scale(0)}.pure-checkbox input[type=checkbox]:checked+label:after{content:\"\";transform:rotate(-45deg) scale(1);transition:transform .2s ease-out}.pure-checkbox input[type=radio]:checked+label:before{background-color:#fff}.pure-checkbox input[type=radio]:checked+label:after{transform:scale(1)}.pure-checkbox input[type=radio]+label:before{border-radius:50%}.pure-checkbox input[type=checkbox]:checked+label:before{background:#0079fe}.pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.list-message{text-align:center}.list-grp{padding:0 15px!important}.list-grp h4{text-transform:capitalize;margin:15px 0 0;font-size:14px;font-weight:700}.list-grp>li{padding-left:15px!important}.stackline-dropdown.theme-material,.stackline-dropdown.theme-dark,.stackline-dropdown.theme-custom{--ms-primary: #3f51b5;--ms-primary-soft: rgba(63, 81, 181, .12);--ms-surface: #ffffff;--ms-surface-soft: #f5f7fb;--ms-surface-muted: #e8eaf6;--ms-outline: #c5cae9;--ms-outline-strong: #7986cb;--ms-on-surface: #212121;--ms-on-surface-muted: #5f6368;--ms-chip-bg: #e8eaf6;--ms-chip-text: #303f9f;--ms-chip-remove: #303f9f;--ms-divider: rgba(125, 119, 134, .16);--ms-section-bg: rgba(247, 242, 250, .76);--ms-selected-text: var(--ms-primary);--ms-shadow: 0 1px 2px rgba(33, 33, 33, .16), 0 12px 32px rgba(63, 81, 181, .12);--ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, .12), 0 4px 12px rgba(33, 33, 33, .08);display:block;width:100%;color:var(--ms-on-surface);font:inherit}.stackline-dropdown.theme-dark{--ms-primary: #8ab4f8;--ms-primary-soft: rgba(138, 180, 248, .18);--ms-surface: #151a23;--ms-surface-soft: #202736;--ms-surface-muted: #111722;--ms-outline: #384456;--ms-outline-strong: #8ab4f8;--ms-on-surface: #edf2f7;--ms-on-surface-muted: #aab6c5;--ms-chip-bg: #263247;--ms-chip-text: #d7e6ff;--ms-chip-remove: #d7e6ff;--ms-divider: rgba(170, 182, 197, .18);--ms-section-bg: #101620;--ms-selected-text: #d7e6ff;--ms-shadow: 0 20px 50px rgba(0, 0, 0, .42);--ms-shadow-soft: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 24px rgba(0, 0, 0, .28)}.stackline-dropdown.theme-custom{--ms-primary: var(--stackline-ms-primary, #0f766e);--ms-primary-soft: var(--stackline-ms-primary-soft, rgba(15, 118, 110, .14));--ms-surface: var(--stackline-ms-surface, #ffffff);--ms-surface-soft: var(--stackline-ms-surface-soft, #ecfdf5);--ms-surface-muted: var(--stackline-ms-surface-muted, #d1fae5);--ms-outline: var(--stackline-ms-outline, #99f6e4);--ms-outline-strong: var(--stackline-ms-outline-strong, #0f766e);--ms-on-surface: var(--stackline-ms-on-surface, #102a2a);--ms-on-surface-muted: var(--stackline-ms-on-surface-muted, #47615f);--ms-chip-bg: var(--stackline-ms-chip-bg, #ccfbf1);--ms-chip-text: var(--stackline-ms-chip-text, #115e59);--ms-chip-remove: var(--stackline-ms-chip-remove, #115e59);--ms-divider: var(--stackline-ms-divider, rgba(15, 118, 110, .16));--ms-section-bg: var(--stackline-ms-section-bg, #f0fdfa);--ms-selected-text: var(--stackline-ms-selected-text, var(--ms-primary));--ms-shadow: var(--stackline-ms-shadow, 0 18px 42px rgba(15, 118, 110, .15));--ms-shadow-soft: var(--stackline-ms-shadow-soft, 0 1px 2px rgba(15, 118, 110, .16), 0 8px 18px rgba(15, 118, 110, .09))}.stackline-dropdown.theme-material .selected-list,.stackline-dropdown.theme-dark .selected-list,.stackline-dropdown.theme-custom .selected-list{width:100%}.stackline-dropdown.theme-material .selected-list .c-btn,.stackline-dropdown.theme-dark .selected-list .c-btn,.stackline-dropdown.theme-custom .selected-list .c-btn{position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:8px;width:100%;min-height:56px;padding:11px 54px 11px 16px;border-radius:18px;border:1px solid var(--ms-outline);background:var(--ms-surface);box-shadow:var(--ms-shadow-soft);color:var(--ms-on-surface);cursor:pointer;font-size:inherit;line-height:1.45;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease,transform .16s ease}.stackline-dropdown.theme-material .selected-list .c-btn:hover,.stackline-dropdown.theme-dark .selected-list .c-btn:hover,.stackline-dropdown.theme-custom .selected-list .c-btn:hover{border-color:var(--ms-outline-strong)}.stackline-dropdown.theme-material .selected-list .c-btn.disabled,.stackline-dropdown.theme-dark .selected-list .c-btn.disabled,.stackline-dropdown.theme-custom .selected-list .c-btn.disabled{background:var(--ms-surface);cursor:not-allowed;opacity:.72}.stackline-dropdown.theme-material .selected-list .c-list,.stackline-dropdown.theme-dark .selected-list .c-list,.stackline-dropdown.theme-custom .selected-list .c-list{display:flex;flex:1 1 auto;flex-wrap:wrap;gap:8px;width:auto;min-width:0;margin:0;padding:0;float:none}.stackline-dropdown.theme-material .selected-list .c-list .c-token,.stackline-dropdown.theme-dark .selected-list .c-list .c-token,.stackline-dropdown.theme-custom .selected-list .c-list .c-token{position:relative;display:inline-block;vertical-align:middle;min-height:32px;max-width:100%;padding:6px 30px 6px 12px;background:var(--ms-chip-bg);color:var(--ms-chip-text);border-radius:999px;box-shadow:inset 0 0 0 1px #6750a414;line-height:1.35;white-space:normal;overflow-wrap:anywhere;margin:0;float:none}.stackline-dropdown.theme-material .selected-list .c-list .c-token .c-label,.stackline-dropdown.theme-dark .selected-list .c-list .c-token .c-label,.stackline-dropdown.theme-custom .selected-list .c-list .c-token .c-label{display:inline-flex;align-items:center;float:none;min-width:0;max-width:100%;line-height:1.3;font-weight:500;white-space:normal;overflow-wrap:anywhere}.stackline-dropdown.theme-material .selected-list .c-list .c-token .fa-remove,.stackline-dropdown.theme-dark .selected-list .c-list .c-token .fa-remove,.stackline-dropdown.theme-custom .selected-list .c-list .c-token .fa-remove{position:absolute;right:10px;top:50%;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:0;transform:translateY(-50%);color:var(--ms-chip-remove);cursor:pointer}.stackline-dropdown.theme-material .selected-list .countplaceholder,.stackline-dropdown.theme-dark .selected-list .countplaceholder,.stackline-dropdown.theme-custom .selected-list .countplaceholder{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;align-self:center;margin:0;line-height:1;color:var(--ms-on-surface-muted);font-size:.8rem;font-weight:600}.stackline-dropdown.theme-material .selected-list .fa-angle-down,.stackline-dropdown.theme-dark .selected-list .fa-angle-down,.stackline-dropdown.theme-custom .selected-list .fa-angle-down,.stackline-dropdown.theme-material .selected-list .fa-angle-up,.stackline-dropdown.theme-dark .selected-list .fa-angle-up,.stackline-dropdown.theme-custom .selected-list .fa-angle-up{position:absolute;top:50%;right:16px;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;transform:translateY(-50%);color:var(--ms-on-surface-muted);font-size:15pt;pointer-events:none}.stackline-dropdown.theme-material .dropdown-list,.stackline-dropdown.theme-dark .dropdown-list,.stackline-dropdown.theme-custom .dropdown-list{position:absolute;width:100%;padding-top:8px;z-index:99999}.stackline-dropdown.theme-material .arrow-up,.stackline-dropdown.theme-dark .arrow-up,.stackline-dropdown.theme-custom .arrow-up,.stackline-dropdown.theme-material .arrow-down,.stackline-dropdown.theme-dark .arrow-down,.stackline-dropdown.theme-custom .arrow-down,.stackline-dropdown.theme-material .arrow-2,.stackline-dropdown.theme-dark .arrow-2,.stackline-dropdown.theme-custom .arrow-2{display:none}.stackline-dropdown.theme-material .list-area,.stackline-dropdown.theme-dark .list-area,.stackline-dropdown.theme-custom .list-area{overflow:hidden;border-radius:22px;background:var(--ms-surface);border:1px solid var(--ms-outline);box-shadow:var(--ms-shadow);margin:0}.stackline-dropdown.theme-material .select-all,.stackline-dropdown.theme-dark .select-all,.stackline-dropdown.theme-custom .select-all{padding:10px 14px;border-bottom:1px solid var(--ms-divider);background:var(--ms-section-bg);text-align:left}.stackline-dropdown.theme-material .list-filter,.stackline-dropdown.theme-dark .list-filter,.stackline-dropdown.theme-custom .list-filter{position:relative;display:flex;align-items:center;min-height:52px;padding-left:48px;padding-right:44px;border-bottom:1px solid var(--ms-divider);background:var(--ms-surface)}.stackline-dropdown.theme-material .list-filter input,.stackline-dropdown.theme-dark .list-filter input,.stackline-dropdown.theme-custom .list-filter input{width:100%;height:100%;border:0;background:transparent;color:var(--ms-on-surface);font:inherit;padding:0}.stackline-dropdown.theme-material .list-filter input::placeholder,.stackline-dropdown.theme-dark .list-filter input::placeholder,.stackline-dropdown.theme-custom .list-filter input::placeholder{color:var(--ms-on-surface-muted)}.stackline-dropdown.theme-material .list-filter input:focus,.stackline-dropdown.theme-dark .list-filter input:focus,.stackline-dropdown.theme-custom .list-filter input:focus{outline:none}.stackline-dropdown.theme-material .list-filter .fa,.stackline-dropdown.theme-dark .list-filter .fa,.stackline-dropdown.theme-custom .list-filter .fa{position:absolute;top:50%;left:16px;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;transform:translateY(-50%);color:var(--ms-on-surface-muted)}.stackline-dropdown.theme-material .dropdown-list ul,.stackline-dropdown.theme-dark .dropdown-list ul,.stackline-dropdown.theme-custom .dropdown-list ul{list-style:none;margin:0;padding:8px;overflow:auto}.stackline-dropdown.theme-material .dropdown-list ul li,.stackline-dropdown.theme-dark .dropdown-list ul li,.stackline-dropdown.theme-custom .dropdown-list ul li{align-items:center;min-height:0;margin:4px;padding:12px 14px;border-radius:14px;cursor:pointer;text-align:left;line-height:1.35;transition:background-color .16s ease,color .16s ease}.stackline-dropdown.theme-material .dropdown-list ul li:first-child,.stackline-dropdown.theme-dark .dropdown-list ul li:first-child,.stackline-dropdown.theme-custom .dropdown-list ul li:first-child{padding-top:12px}.stackline-dropdown.theme-material .dropdown-list ul li:last-child,.stackline-dropdown.theme-dark .dropdown-list ul li:last-child,.stackline-dropdown.theme-custom .dropdown-list ul li:last-child{padding-bottom:12px}.stackline-dropdown.theme-material .dropdown-list ul li:hover,.stackline-dropdown.theme-dark .dropdown-list ul li:hover,.stackline-dropdown.theme-custom .dropdown-list ul li:hover{background:var(--ms-surface-soft)}.stackline-dropdown.theme-material .pure-checkbox,.stackline-dropdown.theme-dark .pure-checkbox,.stackline-dropdown.theme-custom .pure-checkbox{position:relative}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]+label{position:relative;display:block;width:100%;margin:0;padding-left:32px;color:inherit;cursor:pointer;font-weight:500;-webkit-user-select:none;user-select:none}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:0;width:16px;height:16px;margin-top:-10px;border:2px solid var(--ms-outline-strong);border-radius:5px;background:var(--ms-surface);transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label:after,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label:after,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:5px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#fff;border-width:0 0 3px 3px;border-image:none;background:transparent;transform:rotate(-45deg) scale(0);transform-origin:50%;transition:transform .16s ease}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:hover+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:hover+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:hover+label:before{border-color:var(--ms-primary);background:var(--ms-surface-soft)}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked+label:before{border-color:var(--ms-primary);background:var(--ms-primary)}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked+label:after,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked+label:after,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.stackline-dropdown.theme-material .list-message,.stackline-dropdown.theme-dark .list-message,.stackline-dropdown.theme-custom .list-message{margin:0;padding:20px 14px;color:var(--ms-on-surface-muted);text-align:center}\n"] }]
366
366
  }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { data: [{
@@ -396,11 +396,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
396
396
  args: ['searchInput', { static: false }]
397
397
  }] } });
398
398
  export class AngularMultiSelectModule {
399
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AngularMultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
400
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: AngularMultiSelectModule, declarations: [AngularMultiSelect, ClickOutsideDirective, ScrollDirective, styleDirective, ListFilterPipe, Item, TemplateRenderer, Badge], imports: [CommonModule, FormsModule], exports: [AngularMultiSelect, ClickOutsideDirective, ScrollDirective, styleDirective, ListFilterPipe, Item, TemplateRenderer, Badge] });
401
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AngularMultiSelectModule, imports: [CommonModule, FormsModule] });
399
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AngularMultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
400
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: AngularMultiSelectModule, declarations: [AngularMultiSelect, ClickOutsideDirective, ScrollDirective, styleDirective, ListFilterPipe, Item, TemplateRenderer, Badge], imports: [CommonModule, FormsModule], exports: [AngularMultiSelect, ClickOutsideDirective, ScrollDirective, styleDirective, ListFilterPipe, Item, TemplateRenderer, Badge] });
401
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AngularMultiSelectModule, imports: [CommonModule, FormsModule] });
402
402
  }
403
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AngularMultiSelectModule, decorators: [{
403
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AngularMultiSelectModule, decorators: [{
404
404
  type: NgModule,
405
405
  args: [{
406
406
  imports: [CommonModule, FormsModule],
package/fesm2022/stackline-angular-multiselect-dropdown.mjs CHANGED
@@ -33,10 +33,10 @@ class ClickOutsideDirective {
33
33
  this.clickOutside.emit(event);
34
34
  }
35
35
  }
36
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
37
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onClick($event,$event.target)", "document:touchstart": "onClick($event,$event.target)" } }, ngImport: i0 });
36
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
37
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onClick($event,$event.target)", "document:touchstart": "onClick($event,$event.target)" } }, ngImport: i0 });
38
38
  }
39
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ClickOutsideDirective, decorators: [{
39
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ClickOutsideDirective, decorators: [{
40
40
  type: Directive,
41
41
  args: [{
42
42
  selector: '[clickOutside]'
@@ -59,10 +59,10 @@ class ScrollDirective {
59
59
  onClick(event, targetElement) {
60
60
  this.scroll.emit(event);
61
61
  }
62
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ScrollDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
63
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: ScrollDirective, selector: "[scroll]", outputs: { scroll: "scroll" }, host: { listeners: { "scroll": "onClick($event)" } }, ngImport: i0 });
62
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScrollDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
63
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ScrollDirective, selector: "[scroll]", outputs: { scroll: "scroll" }, host: { listeners: { "scroll": "onClick($event)" } }, ngImport: i0 });
64
64
  }
65
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ScrollDirective, decorators: [{
65
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScrollDirective, decorators: [{
66
66
  type: Directive,
67
67
  args: [{
68
68
  selector: '[scroll]'
@@ -85,10 +85,10 @@ class styleDirective {
85
85
  ngOnChanges() {
86
86
  this.el.nativeElement.style.top = this.styleVal;
87
87
  }
88
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: styleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
89
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: styleDirective, selector: "[styleProp]", inputs: { styleVal: ["styleProp", "styleVal"] }, usesOnChanges: true, ngImport: i0 });
88
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: styleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
89
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: styleDirective, selector: "[styleProp]", inputs: { styleVal: ["styleProp", "styleVal"] }, usesOnChanges: true, ngImport: i0 });
90
90
  }
91
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: styleDirective, decorators: [{
91
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: styleDirective, decorators: [{
92
92
  type: Directive,
93
93
  args: [{
94
94
  selector: '[styleProp]'
@@ -118,10 +118,10 @@ class ListFilterPipe {
118
118
  }
119
119
  return found;
120
120
  }
121
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ListFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
122
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ListFilterPipe, name: "listFilter", pure: false });
121
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
122
+ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ListFilterPipe, name: "listFilter", pure: false });
123
123
  }
124
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ListFilterPipe, decorators: [{
124
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListFilterPipe, decorators: [{
125
125
  type: Pipe,
126
126
  args: [{
127
127
  name: 'listFilter',
@@ -133,10 +133,10 @@ class Item {
133
133
  template;
134
134
  constructor() {
135
135
  }
136
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Item, deps: [], target: i0.ɵɵFactoryTarget.Component });
137
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: Item, selector: "c-item", queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: ``, isInline: true });
136
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Item, deps: [], target: i0.ɵɵFactoryTarget.Component });
137
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: Item, selector: "c-item", queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: ``, isInline: true });
138
138
  }
139
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Item, decorators: [{
139
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Item, decorators: [{
140
140
  type: Component,
141
141
  args: [{
142
142
  selector: 'c-item',
@@ -150,10 +150,10 @@ class Badge {
150
150
  template;
151
151
  constructor() {
152
152
  }
153
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Badge, deps: [], target: i0.ɵɵFactoryTarget.Component });
154
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: Badge, selector: "c-badge", queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: ``, isInline: true });
153
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Badge, deps: [], target: i0.ɵɵFactoryTarget.Component });
154
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: Badge, selector: "c-badge", queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: ``, isInline: true });
155
155
  }
156
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Badge, decorators: [{
156
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Badge, decorators: [{
157
157
  type: Component,
158
158
  args: [{
159
159
  selector: 'c-badge',
@@ -180,10 +180,10 @@ class TemplateRenderer {
180
180
  ngOnDestroy() {
181
181
  this.view.destroy();
182
182
  }
183
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TemplateRenderer, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
184
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TemplateRenderer, selector: "c-templateRenderer", inputs: { data: "data", item: "item" }, ngImport: i0, template: ``, isInline: true });
183
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TemplateRenderer, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
184
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TemplateRenderer, selector: "c-templateRenderer", inputs: { data: "data", item: "item" }, ngImport: i0, template: ``, isInline: true });
185
185
  }
186
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TemplateRenderer, decorators: [{
186
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TemplateRenderer, decorators: [{
187
187
  type: Component,
188
188
  args: [{
189
189
  selector: 'c-templateRenderer',
@@ -544,10 +544,10 @@ class AngularMultiSelect {
544
544
  this.updateView(this.scrollTop);
545
545
  }
546
546
  }
547
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AngularMultiSelect, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
548
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AngularMultiSelect, selector: "angular-multiselect, angular2-multiselect", inputs: { data: "data", settings: "settings" }, outputs: { onSelect: "onSelect", onDeSelect: "onDeSelect", onSelectAll: "onSelectAll", onDeSelectAll: "onDeSelectAll", onOpen: "onOpen", onClose: "onClose" }, host: { properties: { "class": "defaultSettings.classes" } }, providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALIDATION], queries: [{ propertyName: "itemTempl", first: true, predicate: Item, descendants: true }, { propertyName: "badgeTempl", first: true, predicate: Badge, descendants: true }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"stackline-dropdown\" [ngClass]=\"getDropdownClasses()\" (clickOutside)=\"closeDropdown()\">\n <div class=\"selected-list\">\n <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\n <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n <span *ngIf=\"settings.singleSelection\">\n <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\n {{item[settings.labelKey]}}\n </span>\n </span>\n <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\n <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\n <span *ngIf=\"badgeTempl\" class=\"c-label\">\n <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\"></c-templateRenderer>\n </span>\n <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\n </div>\n </div> \n <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n </div> \n </div>\n <div class=\"dropdown-list\" [hidden]=\"!isActive\">\n <div class=\"arrow-up arrow-2\"></div>\n <div class=\"arrow-up\"></div>\n <div class=\"list-area\">\n <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\n <label>\n <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n </label>\n </div> \n <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && !settings.lazyLoading\">\n <span class=\"fa fa-search\"></span>\n <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\n </div> \n <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\n <span class=\"fa fa-search\"></span>\n <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\n </div>\n <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"lazyContainer\" >\n <span *ngIf=\"itemTempl\">\n <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </span>\n <span *ngIf=\"!itemTempl && !settings.lazyLoading\" >\n <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </span>\n <span *ngIf=\"!itemTempl && settings.lazyLoading\" >\n <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\n\n \n <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </div>\n </span>\n </ul>\n <div *ngIf=\"settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\n <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\n <span *ngIf=\"itemTempl\" >\n <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </span>\n <span *ngIf=\"!itemTempl\" >\n <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </span>\n </ul>\n </div>\n <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">{{settings.noDataLabel}}</h5>\n </div>\n </div>\n</div>\n", isInline: true, styles: [".stackline-dropdown{position:relative}.c-btn{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:14px;color:#333}.c-btn.disabled{background:#ccc}.c-btn:focus{outline:none}.selected-list .c-list{display:flex;flex:1 1 auto;align-items:center;flex-wrap:wrap;min-width:0;float:none;padding:0;margin:0;width:auto}.selected-list .c-list .c-token{list-style:none;padding:0 5px;background:#0079fe;color:#fff;border-radius:2px;margin-right:4px;margin-top:2px;float:left}.selected-list .c-list .c-token .c-label{display:block;float:left}.selected-list .c-list .c-token .fa-remove{margin-left:1px;font-size:12px}.selected-list .fa-angle-down,.selected-list .fa-angle-up{font-size:15pt;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.selected-list .countplaceholder{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;align-self:center;margin:0 0 0 6px;line-height:1}.selected-list .c-btn{box-sizing:border-box;width:100%;box-shadow:0 1px 5px #959595;padding:10px 36px 10px 10px;cursor:pointer;display:flex;align-items:center;flex-wrap:nowrap;position:relative}.dropdown-list{position:absolute;padding-top:14px;width:100%;z-index:9999}.dropdown-list ul{padding:0;list-style:none;overflow:auto;margin:0}.dropdown-list ul li{padding:10px;cursor:pointer;text-align:left}.dropdown-list ul li:first-child{padding-top:10px}.dropdown-list ul li:last-child{padding-bottom:10px}.dropdown-list ul li:hover{background:#f5f5f5}.dropdown-list ::-webkit-scrollbar{width:8px}.dropdown-list ::-webkit-scrollbar-thumb{background:#ccc;border-radius:5px}.dropdown-list ::-webkit-scrollbar-track{background:#f2f2f2}.arrow-up{width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:15px solid #fff;margin-left:15px;position:absolute;top:0}.arrow-2{border-bottom:15px solid #ccc;top:-1px}.list-area{border:1px solid #ccc;border-radius:3px;background:#fff;margin:0;box-shadow:0 1px 5px #959595}.select-all{padding:10px;border-bottom:1px solid #ccc;text-align:left}.list-filter{border-bottom:1px solid #ccc;position:relative}.list-filter input{border:0px;width:100%;height:35px;padding:0 0 0 35px}.list-filter input:focus{outline:none}.list-filter .fa{position:absolute;top:10px;left:13px;color:#888}.pure-checkbox input[type=checkbox]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pure-checkbox input[type=checkbox]:focus+label:before,.pure-checkbox input[type=checkbox]:hover+label:before{border-color:#0079fe;background-color:#f2f2f2}.pure-checkbox input[type=checkbox]:active+label:before{transition-duration:0s}.pure-checkbox input[type=checkbox]+label{position:relative;padding-left:2em;vertical-align:middle;-webkit-user-select:none;user-select:none;cursor:pointer;margin:0;color:#000;font-weight:300}.pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";color:#0079fe;position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;border:2px solid #0079FE;text-align:center;transition:all .4s ease}.pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";background-color:#0079fe;position:absolute;top:50%;left:4px;width:10px;height:10px;margin-top:-5px;transform:scale(0);transform-origin:50%;transition:transform .2s ease-out}.pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#ccc}.pure-checkbox input[type=checkbox]:disabled:focus+label:before .pure-checkbox input[type=checkbox]:disabled:hover+label:before{background-color:inherit}.pure-checkbox input[type=checkbox]:disabled:checked+label:before{background-color:#ccc}.pure-checkbox input[type=checkbox]+label:after{background-color:transparent;top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#fff;border-width:0 0 3px 3px;border-image:none;transform:rotate(-45deg) scale(0)}.pure-checkbox input[type=checkbox]:checked+label:after{content:\"\";transform:rotate(-45deg) scale(1);transition:transform .2s ease-out}.pure-checkbox input[type=radio]:checked+label:before{background-color:#fff}.pure-checkbox input[type=radio]:checked+label:after{transform:scale(1)}.pure-checkbox input[type=radio]+label:before{border-radius:50%}.pure-checkbox input[type=checkbox]:checked+label:before{background:#0079fe}.pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.list-message{text-align:center}.list-grp{padding:0 15px!important}.list-grp h4{text-transform:capitalize;margin:15px 0 0;font-size:14px;font-weight:700}.list-grp>li{padding-left:15px!important}.stackline-dropdown.theme-material,.stackline-dropdown.theme-dark,.stackline-dropdown.theme-custom{--ms-primary: #3f51b5;--ms-primary-soft: rgba(63, 81, 181, .12);--ms-surface: #ffffff;--ms-surface-soft: #f5f7fb;--ms-surface-muted: #e8eaf6;--ms-outline: #c5cae9;--ms-outline-strong: #7986cb;--ms-on-surface: #212121;--ms-on-surface-muted: #5f6368;--ms-chip-bg: #e8eaf6;--ms-chip-text: #303f9f;--ms-chip-remove: #303f9f;--ms-divider: rgba(125, 119, 134, .16);--ms-section-bg: rgba(247, 242, 250, .76);--ms-selected-text: var(--ms-primary);--ms-shadow: 0 1px 2px rgba(33, 33, 33, .16), 0 12px 32px rgba(63, 81, 181, .12);--ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, .12), 0 4px 12px rgba(33, 33, 33, .08);display:block;width:100%;color:var(--ms-on-surface);font:inherit}.stackline-dropdown.theme-dark{--ms-primary: #8ab4f8;--ms-primary-soft: rgba(138, 180, 248, .18);--ms-surface: #151a23;--ms-surface-soft: #202736;--ms-surface-muted: #111722;--ms-outline: #384456;--ms-outline-strong: #8ab4f8;--ms-on-surface: #edf2f7;--ms-on-surface-muted: #aab6c5;--ms-chip-bg: #263247;--ms-chip-text: #d7e6ff;--ms-chip-remove: #d7e6ff;--ms-divider: rgba(170, 182, 197, .18);--ms-section-bg: #101620;--ms-selected-text: #d7e6ff;--ms-shadow: 0 20px 50px rgba(0, 0, 0, .42);--ms-shadow-soft: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 24px rgba(0, 0, 0, .28)}.stackline-dropdown.theme-custom{--ms-primary: var(--stackline-ms-primary, #0f766e);--ms-primary-soft: var(--stackline-ms-primary-soft, rgba(15, 118, 110, .14));--ms-surface: var(--stackline-ms-surface, #ffffff);--ms-surface-soft: var(--stackline-ms-surface-soft, #ecfdf5);--ms-surface-muted: var(--stackline-ms-surface-muted, #d1fae5);--ms-outline: var(--stackline-ms-outline, #99f6e4);--ms-outline-strong: var(--stackline-ms-outline-strong, #0f766e);--ms-on-surface: var(--stackline-ms-on-surface, #102a2a);--ms-on-surface-muted: var(--stackline-ms-on-surface-muted, #47615f);--ms-chip-bg: var(--stackline-ms-chip-bg, #ccfbf1);--ms-chip-text: var(--stackline-ms-chip-text, #115e59);--ms-chip-remove: var(--stackline-ms-chip-remove, #115e59);--ms-divider: var(--stackline-ms-divider, rgba(15, 118, 110, .16));--ms-section-bg: var(--stackline-ms-section-bg, #f0fdfa);--ms-selected-text: var(--stackline-ms-selected-text, var(--ms-primary));--ms-shadow: var(--stackline-ms-shadow, 0 18px 42px rgba(15, 118, 110, .15));--ms-shadow-soft: var(--stackline-ms-shadow-soft, 0 1px 2px rgba(15, 118, 110, .16), 0 8px 18px rgba(15, 118, 110, .09))}.stackline-dropdown.theme-material .selected-list,.stackline-dropdown.theme-dark .selected-list,.stackline-dropdown.theme-custom .selected-list{width:100%}.stackline-dropdown.theme-material .selected-list .c-btn,.stackline-dropdown.theme-dark .selected-list .c-btn,.stackline-dropdown.theme-custom .selected-list .c-btn{position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:8px;width:100%;min-height:56px;padding:11px 54px 11px 16px;border-radius:18px;border:1px solid var(--ms-outline);background:var(--ms-surface);box-shadow:var(--ms-shadow-soft);color:var(--ms-on-surface);cursor:pointer;font-size:inherit;line-height:1.45;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease,transform .16s ease}.stackline-dropdown.theme-material .selected-list .c-btn:hover,.stackline-dropdown.theme-dark .selected-list .c-btn:hover,.stackline-dropdown.theme-custom .selected-list .c-btn:hover{border-color:var(--ms-outline-strong)}.stackline-dropdown.theme-material .selected-list .c-btn.disabled,.stackline-dropdown.theme-dark .selected-list .c-btn.disabled,.stackline-dropdown.theme-custom .selected-list .c-btn.disabled{background:var(--ms-surface);cursor:not-allowed;opacity:.72}.stackline-dropdown.theme-material .selected-list .c-list,.stackline-dropdown.theme-dark .selected-list .c-list,.stackline-dropdown.theme-custom .selected-list .c-list{display:flex;flex:1 1 auto;flex-wrap:wrap;gap:8px;width:auto;min-width:0;margin:0;padding:0;float:none}.stackline-dropdown.theme-material .selected-list .c-list .c-token,.stackline-dropdown.theme-dark .selected-list .c-list .c-token,.stackline-dropdown.theme-custom .selected-list .c-list .c-token{position:relative;display:inline-block;vertical-align:middle;min-height:32px;max-width:100%;padding:6px 30px 6px 12px;background:var(--ms-chip-bg);color:var(--ms-chip-text);border-radius:999px;box-shadow:inset 0 0 0 1px #6750a414;line-height:1.35;white-space:normal;overflow-wrap:anywhere;margin:0;float:none}.stackline-dropdown.theme-material .selected-list .c-list .c-token .c-label,.stackline-dropdown.theme-dark .selected-list .c-list .c-token .c-label,.stackline-dropdown.theme-custom .selected-list .c-list .c-token .c-label{display:inline-flex;align-items:center;float:none;min-width:0;max-width:100%;line-height:1.3;font-weight:500;white-space:normal;overflow-wrap:anywhere}.stackline-dropdown.theme-material .selected-list .c-list .c-token .fa-remove,.stackline-dropdown.theme-dark .selected-list .c-list .c-token .fa-remove,.stackline-dropdown.theme-custom .selected-list .c-list .c-token .fa-remove{position:absolute;right:10px;top:50%;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:0;transform:translateY(-50%);color:var(--ms-chip-remove);cursor:pointer}.stackline-dropdown.theme-material .selected-list .countplaceholder,.stackline-dropdown.theme-dark .selected-list .countplaceholder,.stackline-dropdown.theme-custom .selected-list .countplaceholder{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;align-self:center;margin:0;line-height:1;color:var(--ms-on-surface-muted);font-size:.8rem;font-weight:600}.stackline-dropdown.theme-material .selected-list .fa-angle-down,.stackline-dropdown.theme-dark .selected-list .fa-angle-down,.stackline-dropdown.theme-custom .selected-list .fa-angle-down,.stackline-dropdown.theme-material .selected-list .fa-angle-up,.stackline-dropdown.theme-dark .selected-list .fa-angle-up,.stackline-dropdown.theme-custom .selected-list .fa-angle-up{position:absolute;top:50%;right:16px;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;transform:translateY(-50%);color:var(--ms-on-surface-muted);font-size:15pt;pointer-events:none}.stackline-dropdown.theme-material .dropdown-list,.stackline-dropdown.theme-dark .dropdown-list,.stackline-dropdown.theme-custom .dropdown-list{position:absolute;width:100%;padding-top:8px;z-index:99999}.stackline-dropdown.theme-material .arrow-up,.stackline-dropdown.theme-dark .arrow-up,.stackline-dropdown.theme-custom .arrow-up,.stackline-dropdown.theme-material .arrow-down,.stackline-dropdown.theme-dark .arrow-down,.stackline-dropdown.theme-custom .arrow-down,.stackline-dropdown.theme-material .arrow-2,.stackline-dropdown.theme-dark .arrow-2,.stackline-dropdown.theme-custom .arrow-2{display:none}.stackline-dropdown.theme-material .list-area,.stackline-dropdown.theme-dark .list-area,.stackline-dropdown.theme-custom .list-area{overflow:hidden;border-radius:22px;background:var(--ms-surface);border:1px solid var(--ms-outline);box-shadow:var(--ms-shadow);margin:0}.stackline-dropdown.theme-material .select-all,.stackline-dropdown.theme-dark .select-all,.stackline-dropdown.theme-custom .select-all{padding:10px 14px;border-bottom:1px solid var(--ms-divider);background:var(--ms-section-bg);text-align:left}.stackline-dropdown.theme-material .list-filter,.stackline-dropdown.theme-dark .list-filter,.stackline-dropdown.theme-custom .list-filter{position:relative;display:flex;align-items:center;min-height:52px;padding-left:48px;padding-right:44px;border-bottom:1px solid var(--ms-divider);background:var(--ms-surface)}.stackline-dropdown.theme-material .list-filter input,.stackline-dropdown.theme-dark .list-filter input,.stackline-dropdown.theme-custom .list-filter input{width:100%;height:100%;border:0;background:transparent;color:var(--ms-on-surface);font:inherit;padding:0}.stackline-dropdown.theme-material .list-filter input::placeholder,.stackline-dropdown.theme-dark .list-filter input::placeholder,.stackline-dropdown.theme-custom .list-filter input::placeholder{color:var(--ms-on-surface-muted)}.stackline-dropdown.theme-material .list-filter input:focus,.stackline-dropdown.theme-dark .list-filter input:focus,.stackline-dropdown.theme-custom .list-filter input:focus{outline:none}.stackline-dropdown.theme-material .list-filter .fa,.stackline-dropdown.theme-dark .list-filter .fa,.stackline-dropdown.theme-custom .list-filter .fa{position:absolute;top:50%;left:16px;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;transform:translateY(-50%);color:var(--ms-on-surface-muted)}.stackline-dropdown.theme-material .dropdown-list ul,.stackline-dropdown.theme-dark .dropdown-list ul,.stackline-dropdown.theme-custom .dropdown-list ul{list-style:none;margin:0;padding:8px;overflow:auto}.stackline-dropdown.theme-material .dropdown-list ul li,.stackline-dropdown.theme-dark .dropdown-list ul li,.stackline-dropdown.theme-custom .dropdown-list ul li{align-items:center;min-height:0;margin:4px;padding:12px 14px;border-radius:14px;cursor:pointer;text-align:left;line-height:1.35;transition:background-color .16s ease,color .16s ease}.stackline-dropdown.theme-material .dropdown-list ul li:first-child,.stackline-dropdown.theme-dark .dropdown-list ul li:first-child,.stackline-dropdown.theme-custom .dropdown-list ul li:first-child{padding-top:12px}.stackline-dropdown.theme-material .dropdown-list ul li:last-child,.stackline-dropdown.theme-dark .dropdown-list ul li:last-child,.stackline-dropdown.theme-custom .dropdown-list ul li:last-child{padding-bottom:12px}.stackline-dropdown.theme-material .dropdown-list ul li:hover,.stackline-dropdown.theme-dark .dropdown-list ul li:hover,.stackline-dropdown.theme-custom .dropdown-list ul li:hover{background:var(--ms-surface-soft)}.stackline-dropdown.theme-material .pure-checkbox,.stackline-dropdown.theme-dark .pure-checkbox,.stackline-dropdown.theme-custom .pure-checkbox{position:relative}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]+label{position:relative;display:block;width:100%;margin:0;padding-left:32px;color:inherit;cursor:pointer;font-weight:500;-webkit-user-select:none;user-select:none}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:0;width:16px;height:16px;margin-top:-10px;border:2px solid var(--ms-outline-strong);border-radius:5px;background:var(--ms-surface);transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label:after,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label:after,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:5px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#fff;border-width:0 0 3px 3px;border-image:none;background:transparent;transform:rotate(-45deg) scale(0);transform-origin:50%;transition:transform .16s ease}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:hover+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:hover+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:hover+label:before{border-color:var(--ms-primary);background:var(--ms-surface-soft)}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked+label:before{border-color:var(--ms-primary);background:var(--ms-primary)}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked+label:after,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked+label:after,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.stackline-dropdown.theme-material .list-message,.stackline-dropdown.theme-dark .list-message,.stackline-dropdown.theme-custom .list-message{margin:0;padding:20px 14px;color:var(--ms-on-surface-muted);text-align:center}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i2.DefaultValueAccessor), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i2.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i2.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i0.forwardRef(() => ClickOutsideDirective), selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "directive", type: i0.forwardRef(() => styleDirective), selector: "[styleProp]", inputs: ["styleProp"] }, { kind: "component", type: i0.forwardRef(() => TemplateRenderer), selector: "c-templateRenderer", inputs: ["data", "item"] }, { kind: "pipe", type: i0.forwardRef(() => ListFilterPipe), name: "listFilter" }] });
547
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AngularMultiSelect, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
548
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AngularMultiSelect, selector: "angular-multiselect, angular2-multiselect", inputs: { data: "data", settings: "settings" }, outputs: { onSelect: "onSelect", onDeSelect: "onDeSelect", onSelectAll: "onSelectAll", onDeSelectAll: "onDeSelectAll", onOpen: "onOpen", onClose: "onClose" }, host: { properties: { "class": "defaultSettings.classes" } }, providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALIDATION], queries: [{ propertyName: "itemTempl", first: true, predicate: Item, descendants: true }, { propertyName: "badgeTempl", first: true, predicate: Badge, descendants: true }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"stackline-dropdown\" [ngClass]=\"getDropdownClasses()\" (clickOutside)=\"closeDropdown()\">\n <div class=\"selected-list\">\n <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\n <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n <span *ngIf=\"settings.singleSelection\">\n <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\n {{item[settings.labelKey]}}\n </span>\n </span>\n <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\n <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\n <span *ngIf=\"badgeTempl\" class=\"c-label\">\n <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\"></c-templateRenderer>\n </span>\n <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\n </div>\n </div> \n <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n </div> \n </div>\n <div class=\"dropdown-list\" [hidden]=\"!isActive\">\n <div class=\"arrow-up arrow-2\"></div>\n <div class=\"arrow-up\"></div>\n <div class=\"list-area\">\n <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\n <label>\n <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n </label>\n </div> \n <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && !settings.lazyLoading\">\n <span class=\"fa fa-search\"></span>\n <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\n </div> \n <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\n <span class=\"fa fa-search\"></span>\n <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\n </div>\n <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"lazyContainer\" >\n <span *ngIf=\"itemTempl\">\n <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </span>\n <span *ngIf=\"!itemTempl && !settings.lazyLoading\" >\n <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </span>\n <span *ngIf=\"!itemTempl && settings.lazyLoading\" >\n <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\n\n \n <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </div>\n </span>\n </ul>\n <div *ngIf=\"settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\n <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\n <span *ngIf=\"itemTempl\" >\n <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </span>\n <span *ngIf=\"!itemTempl\" >\n <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </span>\n </ul>\n </div>\n <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">{{settings.noDataLabel}}</h5>\n </div>\n </div>\n</div>\n", isInline: true, styles: [".stackline-dropdown{position:relative}.c-btn{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:14px;color:#333}.c-btn.disabled{background:#ccc}.c-btn:focus{outline:none}.selected-list .c-list{display:flex;flex:1 1 auto;align-items:center;flex-wrap:wrap;min-width:0;float:none;padding:0;margin:0;width:auto}.selected-list .c-list .c-token{list-style:none;padding:0 5px;background:#0079fe;color:#fff;border-radius:2px;margin-right:4px;margin-top:2px;float:left}.selected-list .c-list .c-token .c-label{display:block;float:left}.selected-list .c-list .c-token .fa-remove{margin-left:1px;font-size:12px}.selected-list .fa-angle-down,.selected-list .fa-angle-up{font-size:15pt;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.selected-list .countplaceholder{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;align-self:center;margin:0 0 0 6px;line-height:1}.selected-list .c-btn{box-sizing:border-box;width:100%;box-shadow:0 1px 5px #959595;padding:10px 36px 10px 10px;cursor:pointer;display:flex;align-items:center;flex-wrap:nowrap;position:relative}.dropdown-list{position:absolute;padding-top:14px;width:100%;z-index:9999}.dropdown-list ul{padding:0;list-style:none;overflow:auto;margin:0}.dropdown-list ul li{padding:10px;cursor:pointer;text-align:left}.dropdown-list ul li:first-child{padding-top:10px}.dropdown-list ul li:last-child{padding-bottom:10px}.dropdown-list ul li:hover{background:#f5f5f5}.dropdown-list ::-webkit-scrollbar{width:8px}.dropdown-list ::-webkit-scrollbar-thumb{background:#ccc;border-radius:5px}.dropdown-list ::-webkit-scrollbar-track{background:#f2f2f2}.arrow-up{width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:15px solid #fff;margin-left:15px;position:absolute;top:0}.arrow-2{border-bottom:15px solid #ccc;top:-1px}.list-area{border:1px solid #ccc;border-radius:3px;background:#fff;margin:0;box-shadow:0 1px 5px #959595}.select-all{padding:10px;border-bottom:1px solid #ccc;text-align:left}.list-filter{border-bottom:1px solid #ccc;position:relative}.list-filter input{border:0px;width:100%;height:35px;padding:0 0 0 35px}.list-filter input:focus{outline:none}.list-filter .fa{position:absolute;top:10px;left:13px;color:#888}.pure-checkbox input[type=checkbox]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pure-checkbox input[type=checkbox]:focus+label:before,.pure-checkbox input[type=checkbox]:hover+label:before{border-color:#0079fe;background-color:#f2f2f2}.pure-checkbox input[type=checkbox]:active+label:before{transition-duration:0s}.pure-checkbox input[type=checkbox]+label{position:relative;padding-left:2em;vertical-align:middle;-webkit-user-select:none;user-select:none;cursor:pointer;margin:0;color:#000;font-weight:300}.pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";color:#0079fe;position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;border:2px solid #0079FE;text-align:center;transition:all .4s ease}.pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";background-color:#0079fe;position:absolute;top:50%;left:4px;width:10px;height:10px;margin-top:-5px;transform:scale(0);transform-origin:50%;transition:transform .2s ease-out}.pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#ccc}.pure-checkbox input[type=checkbox]:disabled:focus+label:before .pure-checkbox input[type=checkbox]:disabled:hover+label:before{background-color:inherit}.pure-checkbox input[type=checkbox]:disabled:checked+label:before{background-color:#ccc}.pure-checkbox input[type=checkbox]+label:after{background-color:transparent;top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#fff;border-width:0 0 3px 3px;border-image:none;transform:rotate(-45deg) scale(0)}.pure-checkbox input[type=checkbox]:checked+label:after{content:\"\";transform:rotate(-45deg) scale(1);transition:transform .2s ease-out}.pure-checkbox input[type=radio]:checked+label:before{background-color:#fff}.pure-checkbox input[type=radio]:checked+label:after{transform:scale(1)}.pure-checkbox input[type=radio]+label:before{border-radius:50%}.pure-checkbox input[type=checkbox]:checked+label:before{background:#0079fe}.pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.list-message{text-align:center}.list-grp{padding:0 15px!important}.list-grp h4{text-transform:capitalize;margin:15px 0 0;font-size:14px;font-weight:700}.list-grp>li{padding-left:15px!important}.stackline-dropdown.theme-material,.stackline-dropdown.theme-dark,.stackline-dropdown.theme-custom{--ms-primary: #3f51b5;--ms-primary-soft: rgba(63, 81, 181, .12);--ms-surface: #ffffff;--ms-surface-soft: #f5f7fb;--ms-surface-muted: #e8eaf6;--ms-outline: #c5cae9;--ms-outline-strong: #7986cb;--ms-on-surface: #212121;--ms-on-surface-muted: #5f6368;--ms-chip-bg: #e8eaf6;--ms-chip-text: #303f9f;--ms-chip-remove: #303f9f;--ms-divider: rgba(125, 119, 134, .16);--ms-section-bg: rgba(247, 242, 250, .76);--ms-selected-text: var(--ms-primary);--ms-shadow: 0 1px 2px rgba(33, 33, 33, .16), 0 12px 32px rgba(63, 81, 181, .12);--ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, .12), 0 4px 12px rgba(33, 33, 33, .08);display:block;width:100%;color:var(--ms-on-surface);font:inherit}.stackline-dropdown.theme-dark{--ms-primary: #8ab4f8;--ms-primary-soft: rgba(138, 180, 248, .18);--ms-surface: #151a23;--ms-surface-soft: #202736;--ms-surface-muted: #111722;--ms-outline: #384456;--ms-outline-strong: #8ab4f8;--ms-on-surface: #edf2f7;--ms-on-surface-muted: #aab6c5;--ms-chip-bg: #263247;--ms-chip-text: #d7e6ff;--ms-chip-remove: #d7e6ff;--ms-divider: rgba(170, 182, 197, .18);--ms-section-bg: #101620;--ms-selected-text: #d7e6ff;--ms-shadow: 0 20px 50px rgba(0, 0, 0, .42);--ms-shadow-soft: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 24px rgba(0, 0, 0, .28)}.stackline-dropdown.theme-custom{--ms-primary: var(--stackline-ms-primary, #0f766e);--ms-primary-soft: var(--stackline-ms-primary-soft, rgba(15, 118, 110, .14));--ms-surface: var(--stackline-ms-surface, #ffffff);--ms-surface-soft: var(--stackline-ms-surface-soft, #ecfdf5);--ms-surface-muted: var(--stackline-ms-surface-muted, #d1fae5);--ms-outline: var(--stackline-ms-outline, #99f6e4);--ms-outline-strong: var(--stackline-ms-outline-strong, #0f766e);--ms-on-surface: var(--stackline-ms-on-surface, #102a2a);--ms-on-surface-muted: var(--stackline-ms-on-surface-muted, #47615f);--ms-chip-bg: var(--stackline-ms-chip-bg, #ccfbf1);--ms-chip-text: var(--stackline-ms-chip-text, #115e59);--ms-chip-remove: var(--stackline-ms-chip-remove, #115e59);--ms-divider: var(--stackline-ms-divider, rgba(15, 118, 110, .16));--ms-section-bg: var(--stackline-ms-section-bg, #f0fdfa);--ms-selected-text: var(--stackline-ms-selected-text, var(--ms-primary));--ms-shadow: var(--stackline-ms-shadow, 0 18px 42px rgba(15, 118, 110, .15));--ms-shadow-soft: var(--stackline-ms-shadow-soft, 0 1px 2px rgba(15, 118, 110, .16), 0 8px 18px rgba(15, 118, 110, .09))}.stackline-dropdown.theme-material .selected-list,.stackline-dropdown.theme-dark .selected-list,.stackline-dropdown.theme-custom .selected-list{width:100%}.stackline-dropdown.theme-material .selected-list .c-btn,.stackline-dropdown.theme-dark .selected-list .c-btn,.stackline-dropdown.theme-custom .selected-list .c-btn{position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:8px;width:100%;min-height:56px;padding:11px 54px 11px 16px;border-radius:18px;border:1px solid var(--ms-outline);background:var(--ms-surface);box-shadow:var(--ms-shadow-soft);color:var(--ms-on-surface);cursor:pointer;font-size:inherit;line-height:1.45;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease,transform .16s ease}.stackline-dropdown.theme-material .selected-list .c-btn:hover,.stackline-dropdown.theme-dark .selected-list .c-btn:hover,.stackline-dropdown.theme-custom .selected-list .c-btn:hover{border-color:var(--ms-outline-strong)}.stackline-dropdown.theme-material .selected-list .c-btn.disabled,.stackline-dropdown.theme-dark .selected-list .c-btn.disabled,.stackline-dropdown.theme-custom .selected-list .c-btn.disabled{background:var(--ms-surface);cursor:not-allowed;opacity:.72}.stackline-dropdown.theme-material .selected-list .c-list,.stackline-dropdown.theme-dark .selected-list .c-list,.stackline-dropdown.theme-custom .selected-list .c-list{display:flex;flex:1 1 auto;flex-wrap:wrap;gap:8px;width:auto;min-width:0;margin:0;padding:0;float:none}.stackline-dropdown.theme-material .selected-list .c-list .c-token,.stackline-dropdown.theme-dark .selected-list .c-list .c-token,.stackline-dropdown.theme-custom .selected-list .c-list .c-token{position:relative;display:inline-block;vertical-align:middle;min-height:32px;max-width:100%;padding:6px 30px 6px 12px;background:var(--ms-chip-bg);color:var(--ms-chip-text);border-radius:999px;box-shadow:inset 0 0 0 1px #6750a414;line-height:1.35;white-space:normal;overflow-wrap:anywhere;margin:0;float:none}.stackline-dropdown.theme-material .selected-list .c-list .c-token .c-label,.stackline-dropdown.theme-dark .selected-list .c-list .c-token .c-label,.stackline-dropdown.theme-custom .selected-list .c-list .c-token .c-label{display:inline-flex;align-items:center;float:none;min-width:0;max-width:100%;line-height:1.3;font-weight:500;white-space:normal;overflow-wrap:anywhere}.stackline-dropdown.theme-material .selected-list .c-list .c-token .fa-remove,.stackline-dropdown.theme-dark .selected-list .c-list .c-token .fa-remove,.stackline-dropdown.theme-custom .selected-list .c-list .c-token .fa-remove{position:absolute;right:10px;top:50%;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:0;transform:translateY(-50%);color:var(--ms-chip-remove);cursor:pointer}.stackline-dropdown.theme-material .selected-list .countplaceholder,.stackline-dropdown.theme-dark .selected-list .countplaceholder,.stackline-dropdown.theme-custom .selected-list .countplaceholder{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;align-self:center;margin:0;line-height:1;color:var(--ms-on-surface-muted);font-size:.8rem;font-weight:600}.stackline-dropdown.theme-material .selected-list .fa-angle-down,.stackline-dropdown.theme-dark .selected-list .fa-angle-down,.stackline-dropdown.theme-custom .selected-list .fa-angle-down,.stackline-dropdown.theme-material .selected-list .fa-angle-up,.stackline-dropdown.theme-dark .selected-list .fa-angle-up,.stackline-dropdown.theme-custom .selected-list .fa-angle-up{position:absolute;top:50%;right:16px;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;transform:translateY(-50%);color:var(--ms-on-surface-muted);font-size:15pt;pointer-events:none}.stackline-dropdown.theme-material .dropdown-list,.stackline-dropdown.theme-dark .dropdown-list,.stackline-dropdown.theme-custom .dropdown-list{position:absolute;width:100%;padding-top:8px;z-index:99999}.stackline-dropdown.theme-material .arrow-up,.stackline-dropdown.theme-dark .arrow-up,.stackline-dropdown.theme-custom .arrow-up,.stackline-dropdown.theme-material .arrow-down,.stackline-dropdown.theme-dark .arrow-down,.stackline-dropdown.theme-custom .arrow-down,.stackline-dropdown.theme-material .arrow-2,.stackline-dropdown.theme-dark .arrow-2,.stackline-dropdown.theme-custom .arrow-2{display:none}.stackline-dropdown.theme-material .list-area,.stackline-dropdown.theme-dark .list-area,.stackline-dropdown.theme-custom .list-area{overflow:hidden;border-radius:22px;background:var(--ms-surface);border:1px solid var(--ms-outline);box-shadow:var(--ms-shadow);margin:0}.stackline-dropdown.theme-material .select-all,.stackline-dropdown.theme-dark .select-all,.stackline-dropdown.theme-custom .select-all{padding:10px 14px;border-bottom:1px solid var(--ms-divider);background:var(--ms-section-bg);text-align:left}.stackline-dropdown.theme-material .list-filter,.stackline-dropdown.theme-dark .list-filter,.stackline-dropdown.theme-custom .list-filter{position:relative;display:flex;align-items:center;min-height:52px;padding-left:48px;padding-right:44px;border-bottom:1px solid var(--ms-divider);background:var(--ms-surface)}.stackline-dropdown.theme-material .list-filter input,.stackline-dropdown.theme-dark .list-filter input,.stackline-dropdown.theme-custom .list-filter input{width:100%;height:100%;border:0;background:transparent;color:var(--ms-on-surface);font:inherit;padding:0}.stackline-dropdown.theme-material .list-filter input::placeholder,.stackline-dropdown.theme-dark .list-filter input::placeholder,.stackline-dropdown.theme-custom .list-filter input::placeholder{color:var(--ms-on-surface-muted)}.stackline-dropdown.theme-material .list-filter input:focus,.stackline-dropdown.theme-dark .list-filter input:focus,.stackline-dropdown.theme-custom .list-filter input:focus{outline:none}.stackline-dropdown.theme-material .list-filter .fa,.stackline-dropdown.theme-dark .list-filter .fa,.stackline-dropdown.theme-custom .list-filter .fa{position:absolute;top:50%;left:16px;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;transform:translateY(-50%);color:var(--ms-on-surface-muted)}.stackline-dropdown.theme-material .dropdown-list ul,.stackline-dropdown.theme-dark .dropdown-list ul,.stackline-dropdown.theme-custom .dropdown-list ul{list-style:none;margin:0;padding:8px;overflow:auto}.stackline-dropdown.theme-material .dropdown-list ul li,.stackline-dropdown.theme-dark .dropdown-list ul li,.stackline-dropdown.theme-custom .dropdown-list ul li{align-items:center;min-height:0;margin:4px;padding:12px 14px;border-radius:14px;cursor:pointer;text-align:left;line-height:1.35;transition:background-color .16s ease,color .16s ease}.stackline-dropdown.theme-material .dropdown-list ul li:first-child,.stackline-dropdown.theme-dark .dropdown-list ul li:first-child,.stackline-dropdown.theme-custom .dropdown-list ul li:first-child{padding-top:12px}.stackline-dropdown.theme-material .dropdown-list ul li:last-child,.stackline-dropdown.theme-dark .dropdown-list ul li:last-child,.stackline-dropdown.theme-custom .dropdown-list ul li:last-child{padding-bottom:12px}.stackline-dropdown.theme-material .dropdown-list ul li:hover,.stackline-dropdown.theme-dark .dropdown-list ul li:hover,.stackline-dropdown.theme-custom .dropdown-list ul li:hover{background:var(--ms-surface-soft)}.stackline-dropdown.theme-material .pure-checkbox,.stackline-dropdown.theme-dark .pure-checkbox,.stackline-dropdown.theme-custom .pure-checkbox{position:relative}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]+label{position:relative;display:block;width:100%;margin:0;padding-left:32px;color:inherit;cursor:pointer;font-weight:500;-webkit-user-select:none;user-select:none}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:0;width:16px;height:16px;margin-top:-10px;border:2px solid var(--ms-outline-strong);border-radius:5px;background:var(--ms-surface);transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label:after,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label:after,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:5px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#fff;border-width:0 0 3px 3px;border-image:none;background:transparent;transform:rotate(-45deg) scale(0);transform-origin:50%;transition:transform .16s ease}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:hover+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:hover+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:hover+label:before{border-color:var(--ms-primary);background:var(--ms-surface-soft)}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked+label:before{border-color:var(--ms-primary);background:var(--ms-primary)}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked+label:after,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked+label:after,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.stackline-dropdown.theme-material .list-message,.stackline-dropdown.theme-dark .list-message,.stackline-dropdown.theme-custom .list-message{margin:0;padding:20px 14px;color:var(--ms-on-surface-muted);text-align:center}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i2.DefaultValueAccessor), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i2.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i2.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i0.forwardRef(() => ClickOutsideDirective), selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "directive", type: i0.forwardRef(() => styleDirective), selector: "[styleProp]", inputs: ["styleProp"] }, { kind: "component", type: i0.forwardRef(() => TemplateRenderer), selector: "c-templateRenderer", inputs: ["data", "item"] }, { kind: "pipe", type: i0.forwardRef(() => ListFilterPipe), name: "listFilter" }] });
549
549
  }
550
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AngularMultiSelect, decorators: [{
550
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AngularMultiSelect, decorators: [{
551
551
  type: Component,
552
552
  args: [{ selector: 'angular-multiselect, angular2-multiselect', template: "<div class=\"stackline-dropdown\" [ngClass]=\"getDropdownClasses()\" (clickOutside)=\"closeDropdown()\">\n <div class=\"selected-list\">\n <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\n <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n <span *ngIf=\"settings.singleSelection\">\n <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\n {{item[settings.labelKey]}}\n </span>\n </span>\n <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\n <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\n <span *ngIf=\"badgeTempl\" class=\"c-label\">\n <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\"></c-templateRenderer>\n </span>\n <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\n </div>\n </div> \n <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n </div> \n </div>\n <div class=\"dropdown-list\" [hidden]=\"!isActive\">\n <div class=\"arrow-up arrow-2\"></div>\n <div class=\"arrow-up\"></div>\n <div class=\"list-area\">\n <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\n <label>\n <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n </label>\n </div> \n <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && !settings.lazyLoading\">\n <span class=\"fa fa-search\"></span>\n <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\n </div> \n <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\n <span class=\"fa fa-search\"></span>\n <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\n </div>\n <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"lazyContainer\" >\n <span *ngIf=\"itemTempl\">\n <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </span>\n <span *ngIf=\"!itemTempl && !settings.lazyLoading\" >\n <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </span>\n <span *ngIf=\"!itemTempl && settings.lazyLoading\" >\n <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\n\n \n <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </div>\n </span>\n </ul>\n <div *ngIf=\"settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\n <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\n <span *ngIf=\"itemTempl\" >\n <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </span>\n <span *ngIf=\"!itemTempl\" >\n <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </span>\n </ul>\n </div>\n <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">{{settings.noDataLabel}}</h5>\n </div>\n </div>\n</div>\n", host: { '[class]': 'defaultSettings.classes' }, providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALIDATION], styles: [".stackline-dropdown{position:relative}.c-btn{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:14px;color:#333}.c-btn.disabled{background:#ccc}.c-btn:focus{outline:none}.selected-list .c-list{display:flex;flex:1 1 auto;align-items:center;flex-wrap:wrap;min-width:0;float:none;padding:0;margin:0;width:auto}.selected-list .c-list .c-token{list-style:none;padding:0 5px;background:#0079fe;color:#fff;border-radius:2px;margin-right:4px;margin-top:2px;float:left}.selected-list .c-list .c-token .c-label{display:block;float:left}.selected-list .c-list .c-token .fa-remove{margin-left:1px;font-size:12px}.selected-list .fa-angle-down,.selected-list .fa-angle-up{font-size:15pt;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.selected-list .countplaceholder{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;align-self:center;margin:0 0 0 6px;line-height:1}.selected-list .c-btn{box-sizing:border-box;width:100%;box-shadow:0 1px 5px #959595;padding:10px 36px 10px 10px;cursor:pointer;display:flex;align-items:center;flex-wrap:nowrap;position:relative}.dropdown-list{position:absolute;padding-top:14px;width:100%;z-index:9999}.dropdown-list ul{padding:0;list-style:none;overflow:auto;margin:0}.dropdown-list ul li{padding:10px;cursor:pointer;text-align:left}.dropdown-list ul li:first-child{padding-top:10px}.dropdown-list ul li:last-child{padding-bottom:10px}.dropdown-list ul li:hover{background:#f5f5f5}.dropdown-list ::-webkit-scrollbar{width:8px}.dropdown-list ::-webkit-scrollbar-thumb{background:#ccc;border-radius:5px}.dropdown-list ::-webkit-scrollbar-track{background:#f2f2f2}.arrow-up{width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:15px solid #fff;margin-left:15px;position:absolute;top:0}.arrow-2{border-bottom:15px solid #ccc;top:-1px}.list-area{border:1px solid #ccc;border-radius:3px;background:#fff;margin:0;box-shadow:0 1px 5px #959595}.select-all{padding:10px;border-bottom:1px solid #ccc;text-align:left}.list-filter{border-bottom:1px solid #ccc;position:relative}.list-filter input{border:0px;width:100%;height:35px;padding:0 0 0 35px}.list-filter input:focus{outline:none}.list-filter .fa{position:absolute;top:10px;left:13px;color:#888}.pure-checkbox input[type=checkbox]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pure-checkbox input[type=checkbox]:focus+label:before,.pure-checkbox input[type=checkbox]:hover+label:before{border-color:#0079fe;background-color:#f2f2f2}.pure-checkbox input[type=checkbox]:active+label:before{transition-duration:0s}.pure-checkbox input[type=checkbox]+label{position:relative;padding-left:2em;vertical-align:middle;-webkit-user-select:none;user-select:none;cursor:pointer;margin:0;color:#000;font-weight:300}.pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";color:#0079fe;position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;border:2px solid #0079FE;text-align:center;transition:all .4s ease}.pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";background-color:#0079fe;position:absolute;top:50%;left:4px;width:10px;height:10px;margin-top:-5px;transform:scale(0);transform-origin:50%;transition:transform .2s ease-out}.pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#ccc}.pure-checkbox input[type=checkbox]:disabled:focus+label:before .pure-checkbox input[type=checkbox]:disabled:hover+label:before{background-color:inherit}.pure-checkbox input[type=checkbox]:disabled:checked+label:before{background-color:#ccc}.pure-checkbox input[type=checkbox]+label:after{background-color:transparent;top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#fff;border-width:0 0 3px 3px;border-image:none;transform:rotate(-45deg) scale(0)}.pure-checkbox input[type=checkbox]:checked+label:after{content:\"\";transform:rotate(-45deg) scale(1);transition:transform .2s ease-out}.pure-checkbox input[type=radio]:checked+label:before{background-color:#fff}.pure-checkbox input[type=radio]:checked+label:after{transform:scale(1)}.pure-checkbox input[type=radio]+label:before{border-radius:50%}.pure-checkbox input[type=checkbox]:checked+label:before{background:#0079fe}.pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.list-message{text-align:center}.list-grp{padding:0 15px!important}.list-grp h4{text-transform:capitalize;margin:15px 0 0;font-size:14px;font-weight:700}.list-grp>li{padding-left:15px!important}.stackline-dropdown.theme-material,.stackline-dropdown.theme-dark,.stackline-dropdown.theme-custom{--ms-primary: #3f51b5;--ms-primary-soft: rgba(63, 81, 181, .12);--ms-surface: #ffffff;--ms-surface-soft: #f5f7fb;--ms-surface-muted: #e8eaf6;--ms-outline: #c5cae9;--ms-outline-strong: #7986cb;--ms-on-surface: #212121;--ms-on-surface-muted: #5f6368;--ms-chip-bg: #e8eaf6;--ms-chip-text: #303f9f;--ms-chip-remove: #303f9f;--ms-divider: rgba(125, 119, 134, .16);--ms-section-bg: rgba(247, 242, 250, .76);--ms-selected-text: var(--ms-primary);--ms-shadow: 0 1px 2px rgba(33, 33, 33, .16), 0 12px 32px rgba(63, 81, 181, .12);--ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, .12), 0 4px 12px rgba(33, 33, 33, .08);display:block;width:100%;color:var(--ms-on-surface);font:inherit}.stackline-dropdown.theme-dark{--ms-primary: #8ab4f8;--ms-primary-soft: rgba(138, 180, 248, .18);--ms-surface: #151a23;--ms-surface-soft: #202736;--ms-surface-muted: #111722;--ms-outline: #384456;--ms-outline-strong: #8ab4f8;--ms-on-surface: #edf2f7;--ms-on-surface-muted: #aab6c5;--ms-chip-bg: #263247;--ms-chip-text: #d7e6ff;--ms-chip-remove: #d7e6ff;--ms-divider: rgba(170, 182, 197, .18);--ms-section-bg: #101620;--ms-selected-text: #d7e6ff;--ms-shadow: 0 20px 50px rgba(0, 0, 0, .42);--ms-shadow-soft: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 24px rgba(0, 0, 0, .28)}.stackline-dropdown.theme-custom{--ms-primary: var(--stackline-ms-primary, #0f766e);--ms-primary-soft: var(--stackline-ms-primary-soft, rgba(15, 118, 110, .14));--ms-surface: var(--stackline-ms-surface, #ffffff);--ms-surface-soft: var(--stackline-ms-surface-soft, #ecfdf5);--ms-surface-muted: var(--stackline-ms-surface-muted, #d1fae5);--ms-outline: var(--stackline-ms-outline, #99f6e4);--ms-outline-strong: var(--stackline-ms-outline-strong, #0f766e);--ms-on-surface: var(--stackline-ms-on-surface, #102a2a);--ms-on-surface-muted: var(--stackline-ms-on-surface-muted, #47615f);--ms-chip-bg: var(--stackline-ms-chip-bg, #ccfbf1);--ms-chip-text: var(--stackline-ms-chip-text, #115e59);--ms-chip-remove: var(--stackline-ms-chip-remove, #115e59);--ms-divider: var(--stackline-ms-divider, rgba(15, 118, 110, .16));--ms-section-bg: var(--stackline-ms-section-bg, #f0fdfa);--ms-selected-text: var(--stackline-ms-selected-text, var(--ms-primary));--ms-shadow: var(--stackline-ms-shadow, 0 18px 42px rgba(15, 118, 110, .15));--ms-shadow-soft: var(--stackline-ms-shadow-soft, 0 1px 2px rgba(15, 118, 110, .16), 0 8px 18px rgba(15, 118, 110, .09))}.stackline-dropdown.theme-material .selected-list,.stackline-dropdown.theme-dark .selected-list,.stackline-dropdown.theme-custom .selected-list{width:100%}.stackline-dropdown.theme-material .selected-list .c-btn,.stackline-dropdown.theme-dark .selected-list .c-btn,.stackline-dropdown.theme-custom .selected-list .c-btn{position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:8px;width:100%;min-height:56px;padding:11px 54px 11px 16px;border-radius:18px;border:1px solid var(--ms-outline);background:var(--ms-surface);box-shadow:var(--ms-shadow-soft);color:var(--ms-on-surface);cursor:pointer;font-size:inherit;line-height:1.45;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease,transform .16s ease}.stackline-dropdown.theme-material .selected-list .c-btn:hover,.stackline-dropdown.theme-dark .selected-list .c-btn:hover,.stackline-dropdown.theme-custom .selected-list .c-btn:hover{border-color:var(--ms-outline-strong)}.stackline-dropdown.theme-material .selected-list .c-btn.disabled,.stackline-dropdown.theme-dark .selected-list .c-btn.disabled,.stackline-dropdown.theme-custom .selected-list .c-btn.disabled{background:var(--ms-surface);cursor:not-allowed;opacity:.72}.stackline-dropdown.theme-material .selected-list .c-list,.stackline-dropdown.theme-dark .selected-list .c-list,.stackline-dropdown.theme-custom .selected-list .c-list{display:flex;flex:1 1 auto;flex-wrap:wrap;gap:8px;width:auto;min-width:0;margin:0;padding:0;float:none}.stackline-dropdown.theme-material .selected-list .c-list .c-token,.stackline-dropdown.theme-dark .selected-list .c-list .c-token,.stackline-dropdown.theme-custom .selected-list .c-list .c-token{position:relative;display:inline-block;vertical-align:middle;min-height:32px;max-width:100%;padding:6px 30px 6px 12px;background:var(--ms-chip-bg);color:var(--ms-chip-text);border-radius:999px;box-shadow:inset 0 0 0 1px #6750a414;line-height:1.35;white-space:normal;overflow-wrap:anywhere;margin:0;float:none}.stackline-dropdown.theme-material .selected-list .c-list .c-token .c-label,.stackline-dropdown.theme-dark .selected-list .c-list .c-token .c-label,.stackline-dropdown.theme-custom .selected-list .c-list .c-token .c-label{display:inline-flex;align-items:center;float:none;min-width:0;max-width:100%;line-height:1.3;font-weight:500;white-space:normal;overflow-wrap:anywhere}.stackline-dropdown.theme-material .selected-list .c-list .c-token .fa-remove,.stackline-dropdown.theme-dark .selected-list .c-list .c-token .fa-remove,.stackline-dropdown.theme-custom .selected-list .c-list .c-token .fa-remove{position:absolute;right:10px;top:50%;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:0;transform:translateY(-50%);color:var(--ms-chip-remove);cursor:pointer}.stackline-dropdown.theme-material .selected-list .countplaceholder,.stackline-dropdown.theme-dark .selected-list .countplaceholder,.stackline-dropdown.theme-custom .selected-list .countplaceholder{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;align-self:center;margin:0;line-height:1;color:var(--ms-on-surface-muted);font-size:.8rem;font-weight:600}.stackline-dropdown.theme-material .selected-list .fa-angle-down,.stackline-dropdown.theme-dark .selected-list .fa-angle-down,.stackline-dropdown.theme-custom .selected-list .fa-angle-down,.stackline-dropdown.theme-material .selected-list .fa-angle-up,.stackline-dropdown.theme-dark .selected-list .fa-angle-up,.stackline-dropdown.theme-custom .selected-list .fa-angle-up{position:absolute;top:50%;right:16px;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;transform:translateY(-50%);color:var(--ms-on-surface-muted);font-size:15pt;pointer-events:none}.stackline-dropdown.theme-material .dropdown-list,.stackline-dropdown.theme-dark .dropdown-list,.stackline-dropdown.theme-custom .dropdown-list{position:absolute;width:100%;padding-top:8px;z-index:99999}.stackline-dropdown.theme-material .arrow-up,.stackline-dropdown.theme-dark .arrow-up,.stackline-dropdown.theme-custom .arrow-up,.stackline-dropdown.theme-material .arrow-down,.stackline-dropdown.theme-dark .arrow-down,.stackline-dropdown.theme-custom .arrow-down,.stackline-dropdown.theme-material .arrow-2,.stackline-dropdown.theme-dark .arrow-2,.stackline-dropdown.theme-custom .arrow-2{display:none}.stackline-dropdown.theme-material .list-area,.stackline-dropdown.theme-dark .list-area,.stackline-dropdown.theme-custom .list-area{overflow:hidden;border-radius:22px;background:var(--ms-surface);border:1px solid var(--ms-outline);box-shadow:var(--ms-shadow);margin:0}.stackline-dropdown.theme-material .select-all,.stackline-dropdown.theme-dark .select-all,.stackline-dropdown.theme-custom .select-all{padding:10px 14px;border-bottom:1px solid var(--ms-divider);background:var(--ms-section-bg);text-align:left}.stackline-dropdown.theme-material .list-filter,.stackline-dropdown.theme-dark .list-filter,.stackline-dropdown.theme-custom .list-filter{position:relative;display:flex;align-items:center;min-height:52px;padding-left:48px;padding-right:44px;border-bottom:1px solid var(--ms-divider);background:var(--ms-surface)}.stackline-dropdown.theme-material .list-filter input,.stackline-dropdown.theme-dark .list-filter input,.stackline-dropdown.theme-custom .list-filter input{width:100%;height:100%;border:0;background:transparent;color:var(--ms-on-surface);font:inherit;padding:0}.stackline-dropdown.theme-material .list-filter input::placeholder,.stackline-dropdown.theme-dark .list-filter input::placeholder,.stackline-dropdown.theme-custom .list-filter input::placeholder{color:var(--ms-on-surface-muted)}.stackline-dropdown.theme-material .list-filter input:focus,.stackline-dropdown.theme-dark .list-filter input:focus,.stackline-dropdown.theme-custom .list-filter input:focus{outline:none}.stackline-dropdown.theme-material .list-filter .fa,.stackline-dropdown.theme-dark .list-filter .fa,.stackline-dropdown.theme-custom .list-filter .fa{position:absolute;top:50%;left:16px;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;transform:translateY(-50%);color:var(--ms-on-surface-muted)}.stackline-dropdown.theme-material .dropdown-list ul,.stackline-dropdown.theme-dark .dropdown-list ul,.stackline-dropdown.theme-custom .dropdown-list ul{list-style:none;margin:0;padding:8px;overflow:auto}.stackline-dropdown.theme-material .dropdown-list ul li,.stackline-dropdown.theme-dark .dropdown-list ul li,.stackline-dropdown.theme-custom .dropdown-list ul li{align-items:center;min-height:0;margin:4px;padding:12px 14px;border-radius:14px;cursor:pointer;text-align:left;line-height:1.35;transition:background-color .16s ease,color .16s ease}.stackline-dropdown.theme-material .dropdown-list ul li:first-child,.stackline-dropdown.theme-dark .dropdown-list ul li:first-child,.stackline-dropdown.theme-custom .dropdown-list ul li:first-child{padding-top:12px}.stackline-dropdown.theme-material .dropdown-list ul li:last-child,.stackline-dropdown.theme-dark .dropdown-list ul li:last-child,.stackline-dropdown.theme-custom .dropdown-list ul li:last-child{padding-bottom:12px}.stackline-dropdown.theme-material .dropdown-list ul li:hover,.stackline-dropdown.theme-dark .dropdown-list ul li:hover,.stackline-dropdown.theme-custom .dropdown-list ul li:hover{background:var(--ms-surface-soft)}.stackline-dropdown.theme-material .pure-checkbox,.stackline-dropdown.theme-dark .pure-checkbox,.stackline-dropdown.theme-custom .pure-checkbox{position:relative}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]+label{position:relative;display:block;width:100%;margin:0;padding-left:32px;color:inherit;cursor:pointer;font-weight:500;-webkit-user-select:none;user-select:none}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:0;width:16px;height:16px;margin-top:-10px;border:2px solid var(--ms-outline-strong);border-radius:5px;background:var(--ms-surface);transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]+label:after,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]+label:after,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:5px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#fff;border-width:0 0 3px 3px;border-image:none;background:transparent;transform:rotate(-45deg) scale(0);transform-origin:50%;transition:transform .16s ease}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:focus+label:before,.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:hover+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:hover+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:hover+label:before{border-color:var(--ms-primary);background:var(--ms-surface-soft)}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked+label:before,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked+label:before,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked+label:before{border-color:var(--ms-primary);background:var(--ms-primary)}.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked+label:after,.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked+label:after,.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.stackline-dropdown.theme-material .list-message,.stackline-dropdown.theme-dark .list-message,.stackline-dropdown.theme-custom .list-message{margin:0;padding:20px 14px;color:var(--ms-on-surface-muted);text-align:center}\n"] }]
553
553
  }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { data: [{
@@ -583,11 +583,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
583
583
  args: ['searchInput', { static: false }]
584
584
  }] } });
585
585
  class AngularMultiSelectModule {
586
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AngularMultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
587
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: AngularMultiSelectModule, declarations: [AngularMultiSelect, ClickOutsideDirective, ScrollDirective, styleDirective, ListFilterPipe, Item, TemplateRenderer, Badge], imports: [CommonModule, FormsModule], exports: [AngularMultiSelect, ClickOutsideDirective, ScrollDirective, styleDirective, ListFilterPipe, Item, TemplateRenderer, Badge] });
588
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AngularMultiSelectModule, imports: [CommonModule, FormsModule] });
586
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AngularMultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
587
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: AngularMultiSelectModule, declarations: [AngularMultiSelect, ClickOutsideDirective, ScrollDirective, styleDirective, ListFilterPipe, Item, TemplateRenderer, Badge], imports: [CommonModule, FormsModule], exports: [AngularMultiSelect, ClickOutsideDirective, ScrollDirective, styleDirective, ListFilterPipe, Item, TemplateRenderer, Badge] });
588
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AngularMultiSelectModule, imports: [CommonModule, FormsModule] });
589
589
  }
590
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AngularMultiSelectModule, decorators: [{
590
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AngularMultiSelectModule, decorators: [{
591
591
  type: NgModule,
592
592
  args: [{
593
593
  imports: [CommonModule, FormsModule],
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@stackline/angular-multiselect-dropdown",
3
- "version": "17.0.0",
4
- "description": "Angular 17 compatible multiselect dropdown package for the Stackline Angular 17 release line.",
3
+ "version": "18.0.0",
4
+ "description": "Angular 18 compatible multiselect dropdown package for the Stackline Angular 18 release line.",
5
5
  "license": "MIT",
6
6
  "author": "Pradeep Terli",
7
7
  "repository": {
@@ -11,17 +11,17 @@
11
11
  "bugs": {
12
12
  "url": "https://github.com/alexandroit/angular-multiselect-dropdown/issues"
13
13
  },
14
- "homepage": "https://alexandro.net/docs/angular/multiselect/angular-17/",
14
+ "homepage": "https://alexandro.net/docs/angular/multiselect/angular-18/",
15
15
  "keywords": [
16
16
  "angular 2 multiselect dropdown",
17
- "angular 17 multiselect dropdown",
17
+ "angular 18 multiselect dropdown",
18
18
  "angular multiselect",
19
19
  "angular dropdown"
20
20
  ],
21
21
  "peerDependencies": {
22
- "@angular/common": ">=17.0.0 <18.0.0",
23
- "@angular/core": ">=17.0.0 <18.0.0",
24
- "@angular/forms": ">=17.0.0 <18.0.0"
22
+ "@angular/common": ">=18.0.0 <19.0.0",
23
+ "@angular/core": ">=18.0.0 <19.0.0",
24
+ "@angular/forms": ">=18.0.0 <19.0.0"
25
25
  },
26
26
  "dependencies": {
27
27
  "font-awesome": "*",