@stackline/angular-multiselect-dropdown 12.0.0 → 12.0.1

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 (10) hide show
  1. package/README.md +7 -7
  2. package/multiselect.component.css +28 -2
  3. package/package.json +1 -1
  4. package/src/app/angular2-multiselect-dropdown/multiselect.component.html +1 -0
  5. package/src/app/angular2-multiselect-dropdown/multiselect.component.scss +4 -2
  6. package/src/app/angular2-multiselect-dropdown/multiselect.component.ts +11 -3
  7. package/themes/custom.theme.css +27 -1
  8. package/themes/custom.theme.scss +27 -1
  9. package/themes/default.theme.css +26 -0
  10. package/themes/default.theme.scss +26 -0
package/README.md CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  **[Documentation & Live Demos](https://alexandro.net/docs/angular/multiselect/)** | **[Angular 12 Demo](https://alexandro.net/docs/angular/multiselect/angular-12/)** | **[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:** `12.0.0` for Angular `12.x`
15
+ **Latest tested npm release:** `12.0.1` for Angular `12.x`
16
16
 
17
17
  ---
18
18
 
@@ -24,7 +24,7 @@
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 `12.0.0` for Angular 12.x applications.
27
+ The repository contains the full documentation matrix from Angular 2 through Angular 21. The current public npm release is `12.0.1` for Angular 12.x applications.
28
28
 
29
29
  The Angular 12 package is compatible with Angular 12.x and was tested in a real Angular 12.2.17 application before npm publication.
30
30
 
@@ -84,8 +84,8 @@ Each package family only installs on its matching Angular family. Framework majo
84
84
  | **15.x** | **Angular 15 only** | **`>=15.0.0 <16.0.0`** | **15.0.0 -> 15.2.10** | [Angular 15 family docs](https://alexandro.net/docs/angular/multiselect/angular-15/) |
85
85
  | **14.x** | **Angular 14 only** | **`>=14.0.0 <15.0.0`** | **14.0.0 -> 14.3.0** | [Angular 14 family docs](https://alexandro.net/docs/angular/multiselect/angular-14/) |
86
86
  | **13.x** | **Angular 13 only** | **`>=13.0.0 <14.0.0`** | **13.0.0 -> 13.4.0** | [Angular 13 family docs](https://alexandro.net/docs/angular/multiselect/angular-13/) |
87
- | **12.x** | **Angular 12 only** | **`>=12.0.0 <13.0.0`** | **12.0.0 -> 12.2.17** | [Angular 12 family docs](https://alexandro.net/docs/angular/multiselect/angular-12/) |
88
- | **11.x** | **Angular 11 only** | **`>=11.0.0 <12.0.0`** | **11.0.0 -> 11.2.14** | [Angular 11 family docs](https://alexandro.net/docs/angular/multiselect/angular-11/) |
87
+ | **12.x** | **Angular 12 only** | **`>=12.0.1 <13.0.0`** | **12.0.1 -> 12.2.17** | [Angular 12 family docs](https://alexandro.net/docs/angular/multiselect/angular-12/) |
88
+ | **11.x** | **Angular 11 only** | **`>=11.0.0 <12.0.1`** | **11.0.0 -> 11.2.14** | [Angular 11 family docs](https://alexandro.net/docs/angular/multiselect/angular-11/) |
89
89
  | **10.x** | **Angular 10 only** | **`>=10.0.0 <11.0.0`** | **10.0.0 -> 10.2.5** | [Angular 10 family docs](https://alexandro.net/docs/angular/multiselect/angular-10/) |
90
90
  | **9.x** | **Angular 9 only** | **`>=9.0.0 <10.0.0`** | **9.0.0 -> 9.1.13** | [Angular 9 family docs](https://alexandro.net/docs/angular/multiselect/angular-9/) |
91
91
  | **8.x** | **Angular 8 only** | **`>=8.0.0 <9.0.0`** | **8.0.0 -> 8.2.14** | [Angular 8 family docs](https://alexandro.net/docs/angular/multiselect/angular-8/) |
@@ -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@12.0.0 --save-exact
101
+ npm install @stackline/angular-multiselect-dropdown@12.0.1 --save-exact
102
102
  ```
103
103
 
104
- Install `12.0.0` for Angular 12.x applications. This line keeps the tested Angular 12 behavior, makes `<angular-multiselect>` the documented standard selector, and keeps `<angular2-multiselect>` only as a legacy compatibility alias.
104
+ Install `12.0.1` for Angular 12.x applications. This line keeps the tested Angular 12 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
 
@@ -197,7 +197,7 @@ dropdownSettings = {
197
197
 
198
198
  ## Official Angular 12 Test Matrix
199
199
 
200
- The published Angular 12 release was tested in a real Angular `12.2.17` application with `@stackline/angular-multiselect-dropdown@12.0.0`. The docs now use the same examples from that test app.
200
+ The published Angular 12 release was tested in a real Angular `12.2.17` application with `@stackline/angular-multiselect-dropdown@12.0.1`. 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/multiselect.component.css CHANGED
@@ -72,7 +72,7 @@
72
72
  box-sizing: border-box;
73
73
  width: 100%;
74
74
  box-shadow: 0px 1px 5px #959595;
75
- padding: 10px 36px 10px 10px;
75
+ padding: 10px 68px 10px 10px;
76
76
  cursor: pointer;
77
77
  display: flex;
78
78
  align-items: center;
@@ -382,7 +382,7 @@
382
382
  gap: 8px;
383
383
  width: 100%;
384
384
  min-height: 56px;
385
- padding: 11px 54px 11px 16px;
385
+ padding: 11px 84px 11px 16px;
386
386
  border-radius: 18px;
387
387
  border: 1px solid var(--ms-outline);
388
388
  background: var(--ms-surface);
@@ -731,3 +731,29 @@
731
731
  color: var(--ms-on-surface-muted);
732
732
  text-align: center;
733
733
  }
734
+
735
+
736
+ .selected-list .clear-all {
737
+ font-size: 12pt;
738
+ position: absolute;
739
+ right: 42px;
740
+ top: 50%;
741
+ transform: translateY(-50%);
742
+ cursor: pointer;
743
+ }
744
+
745
+ .stackline-dropdown.theme-material .selected-list .clear-all,
746
+ .stackline-dropdown.theme-dark .selected-list .clear-all,
747
+ .stackline-dropdown.theme-custom .selected-list .clear-all {
748
+ position: absolute;
749
+ top: 50%;
750
+ right: 42px;
751
+ display: inline-flex;
752
+ align-items: center;
753
+ justify-content: center;
754
+ width: 20px;
755
+ height: 20px;
756
+ transform: translateY(-50%);
757
+ color: var(--ms-on-surface-muted);
758
+ cursor: pointer;
759
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stackline/angular-multiselect-dropdown",
3
- "version": "12.0.0",
3
+ "version": "12.0.1",
4
4
  "description": "Angular 12 compatible multiselect dropdown package for the Stackline Angular 12 release line.",
5
5
  "keywords": [
6
6
  "angular 2 multiselect dropdown",
package/src/app/angular2-multiselect-dropdown/multiselect.component.html CHANGED
@@ -17,6 +17,7 @@
17
17
  </div>
18
18
  </div>
19
19
  <span class="countplaceholder" *ngIf="selectedItems?.length > settings.badgeShowLimit">+{{selectedItems?.length - settings.badgeShowLimit }}</span>
20
+ <span class="fa fa-remove clear-all" *ngIf="settings.clearAll && selectedItems?.length > 0 && !settings.disabled" (click)="clearSelection($event);$event.stopPropagation()"></span>
20
21
  <span class="fa" [ngClass]="{'fa-angle-down': !isActive,'fa-angle-up':isActive}"></span>
21
22
  </div>
22
23
  </div>
package/src/app/angular2-multiselect-dropdown/multiselect.component.scss CHANGED
@@ -72,7 +72,7 @@ $base-color: #0079FE;
72
72
  box-sizing: border-box;
73
73
  width: 100%;
74
74
  box-shadow: 0px 1px 5px #959595;
75
- padding: 10px 36px 10px 10px;
75
+ padding: 10px 68px 10px 10px;
76
76
  cursor: pointer;
77
77
  display: flex;
78
78
  align-items: center;
@@ -359,7 +359,7 @@ $base-color: #0079FE;
359
359
  gap: 8px;
360
360
  width: 100%;
361
361
  min-height: 56px;
362
- padding: 11px 54px 11px 16px;
362
+ padding: 11px 84px 11px 16px;
363
363
  border-radius: 18px;
364
364
  border: 1px solid var(--ms-outline);
365
365
  background: var(--ms-surface);
@@ -708,3 +708,5 @@ $base-color: #0079FE;
708
708
  color: var(--ms-on-surface-muted);
709
709
  text-align: center;
710
710
  }
711
+
712
+ .selected-list .clear-all{font-size:12pt;position:absolute;right:42px;top:50%;transform:translateY(-50%);cursor:pointer}.stackline-dropdown.theme-material .selected-list .clear-all,.stackline-dropdown.theme-dark .selected-list .clear-all,.stackline-dropdown.theme-custom .selected-list .clear-all{position:absolute;top:50%;right:42px;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;transform:translateY(-50%);color:var(--ms-on-surface-muted);cursor:pointer}
package/src/app/angular2-multiselect-dropdown/multiselect.component.ts CHANGED
@@ -22,9 +22,9 @@ const noop = () => {
22
22
 
23
23
  @Component({
24
24
  selector: 'angular-multiselect, angular2-multiselect',
25
- 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",
25
+ template: "<div class=\"stackline-dropdown\" [ngClass]=\"getDropdownClasses()\" (clickOutside)=\"closeDropdown()\">\n <div class=\"selected-list\">\n <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\n <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n <span *ngIf=\"settings.singleSelection\">\n <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\n {{item[settings.labelKey]}}\n </span>\n </span>\n <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\n <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\n <span *ngIf=\"badgeTempl\" class=\"c-label\">\n <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\"></c-templateRenderer>\n </span>\n <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\n </div>\n </div> \n <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n <span class=\"fa fa-remove clear-all\" *ngIf=\"settings.clearAll && selectedItems?.length > 0 && !settings.disabled\" (click)=\"clearSelection($event);$event.stopPropagation()\"></span>\n <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n </div> \n </div>\n <div class=\"dropdown-list\" [hidden]=\"!isActive\">\n <div class=\"arrow-up arrow-2\"></div>\n <div class=\"arrow-up\"></div>\n <div class=\"list-area\">\n <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\n <label>\n <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n </label>\n </div> \n <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && !settings.lazyLoading\">\n <span class=\"fa fa-search\"></span>\n <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\n </div> \n <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\n <span class=\"fa fa-search\"></span>\n <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\n </div>\n <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"lazyContainer\" >\n <span *ngIf=\"itemTempl\">\n <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </span>\n <span *ngIf=\"!itemTempl && !settings.lazyLoading\" >\n <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </span>\n <span *ngIf=\"!itemTempl && settings.lazyLoading\" >\n <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\n\n \n <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </div>\n </span>\n </ul>\n <div *ngIf=\"settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\n <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\n <span *ngIf=\"itemTempl\" >\n <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </span>\n <span *ngIf=\"!itemTempl\" >\n <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </span>\n </ul>\n </div>\n <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">{{settings.noDataLabel}}</h5>\n </div>\n </div>\n</div>\n",
26
26
  host: { '[class]': 'defaultSettings.classes' },
27
- styles: [".stackline-dropdown {\n position: relative;\n}\n\n.c-btn {\n display: inline-block;\n background: #fff;\n border: 1px solid #ccc;\n border-radius: 3px;\n font-size: 14px;\n color: #333;\n}\n\n.c-btn.disabled {\n background: #ccc;\n}\n\n.c-btn:focus {\n outline: none;\n}\n\n.selected-list .c-list {\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n flex-wrap: wrap;\n min-width: 0;\n float: none;\n padding: 0px;\n margin: 0px;\n width: auto;\n}\n.selected-list .c-list .c-token {\n list-style: none;\n padding: 0px 5px;\n background: #0079FE;\n color: #fff;\n border-radius: 2px;\n margin-right: 4px;\n margin-top: 2px;\n float: left;\n}\n.selected-list .c-list .c-token .c-label {\n display: block;\n float: left;\n /*width: 50px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;*/\n}\n.selected-list .c-list .c-token .fa-remove {\n margin-left: 1px;\n font-size: 12px;\n}\n.selected-list .fa-angle-down, .selected-list .fa-angle-up {\n font-size: 15pt;\n position: absolute;\n right: 10px;\n top: 50%;\n transform: translateY(-50%);\n}\n.selected-list .countplaceholder {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n align-self: center;\n margin: 0 0 0 6px;\n line-height: 1;\n}\n.selected-list .c-btn {\n box-sizing: border-box;\n width: 100%;\n box-shadow: 0px 1px 5px #959595;\n padding: 10px 36px 10px 10px;\n cursor: pointer;\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n position: relative;\n}\n\n.dropdown-list {\n position: absolute;\n padding-top: 14px;\n width: 100%;\n z-index: 9999;\n}\n.dropdown-list ul {\n padding: 0px;\n list-style: none;\n overflow: auto;\n margin: 0px;\n}\n.dropdown-list ul li {\n padding: 10px 10px;\n cursor: pointer;\n text-align: left;\n}\n.dropdown-list ul li:first-child {\n padding-top: 10px;\n}\n.dropdown-list ul li:last-child {\n padding-bottom: 10px;\n}\n.dropdown-list ul li:hover {\n background: #f5f5f5;\n}\n.dropdown-list ::-webkit-scrollbar {\n width: 8px;\n}\n.dropdown-list ::-webkit-scrollbar-thumb {\n background: #cccccc;\n border-radius: 5px;\n}\n.dropdown-list ::-webkit-scrollbar-track {\n background: #f2f2f2;\n}\n\n.arrow-up {\n width: 0;\n height: 0;\n border-left: 13px solid transparent;\n border-right: 13px solid transparent;\n border-bottom: 15px solid #fff;\n margin-left: 15px;\n position: absolute;\n top: 0;\n}\n\n.arrow-2 {\n border-bottom: 15px solid #ccc;\n top: -1px;\n}\n\n.list-area {\n border: 1px solid #ccc;\n border-radius: 3px;\n background: #fff;\n margin: 0px;\n box-shadow: 0px 1px 5px #959595;\n}\n\n.select-all {\n padding: 10px;\n border-bottom: 1px solid #ccc;\n text-align: left;\n}\n\n.list-filter {\n border-bottom: 1px solid #ccc;\n position: relative;\n}\n.list-filter input {\n border: 0px;\n width: 100%;\n height: 35px;\n padding: 0px 0px 0px 35px;\n}\n.list-filter input:focus {\n outline: none;\n}\n.list-filter .fa {\n position: absolute;\n top: 10px;\n left: 13px;\n color: #888;\n}\n\n.pure-checkbox input[type=checkbox] {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.pure-checkbox input[type=checkbox]:focus + label:before,\n.pure-checkbox input[type=checkbox]:hover + label:before {\n border-color: #0079FE;\n background-color: #f2f2f2;\n}\n\n.pure-checkbox input[type=checkbox]:active + label:before {\n transition-duration: 0s;\n}\n\n.pure-checkbox input[type=checkbox] + label {\n position: relative;\n padding-left: 2em;\n vertical-align: middle;\n user-select: none;\n cursor: pointer;\n margin: 0px;\n color: #000;\n font-weight: 300;\n}\n\n.pure-checkbox input[type=checkbox] + label:before {\n box-sizing: content-box;\n content: \"\";\n color: #0079FE;\n position: absolute;\n top: 50%;\n left: 0;\n width: 14px;\n height: 14px;\n margin-top: -9px;\n border: 2px solid #0079FE;\n text-align: center;\n transition: all 0.4s ease;\n}\n\n.pure-checkbox input[type=checkbox] + label:after {\n box-sizing: content-box;\n content: \"\";\n background-color: #0079FE;\n position: absolute;\n top: 50%;\n left: 4px;\n width: 10px;\n height: 10px;\n margin-top: -5px;\n transform: scale(0);\n transform-origin: 50%;\n transition: transform 200ms ease-out;\n}\n\n.pure-checkbox input[type=checkbox]:disabled + label:before {\n border-color: #cccccc;\n}\n\n.pure-checkbox input[type=checkbox]:disabled:focus + label:before .pure-checkbox input[type=checkbox]:disabled:hover + label:before {\n background-color: inherit;\n}\n\n.pure-checkbox input[type=checkbox]:disabled:checked + label:before {\n background-color: #cccccc;\n}\n\n.pure-checkbox input[type=checkbox] + label:after {\n background-color: transparent;\n top: 50%;\n left: 4px;\n width: 8px;\n height: 3px;\n margin-top: -4px;\n border-style: solid;\n border-color: #ffffff;\n border-width: 0 0 3px 3px;\n border-image: none;\n transform: rotate(-45deg) scale(0);\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:after {\n content: \"\";\n transform: rotate(-45deg) scale(1);\n transition: transform 200ms ease-out;\n}\n\n.pure-checkbox input[type=radio]:checked + label:before {\n background-color: white;\n}\n\n.pure-checkbox input[type=radio]:checked + label:after {\n transform: scale(1);\n}\n\n.pure-checkbox input[type=radio] + label:before {\n border-radius: 50%;\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:before {\n background: #0079FE;\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:after {\n transform: rotate(-45deg) scale(1);\n}\n\n.list-message {\n text-align: center;\n}\n\n.list-grp {\n padding: 0 15px !important;\n}\n\n.list-grp h4 {\n text-transform: capitalize;\n margin: 15px 0px 0px 0px;\n font-size: 14px;\n font-weight: 700;\n}\n\n.list-grp > li {\n padding-left: 15px !important;\n}\n\n.stackline-dropdown.theme-material,\n.stackline-dropdown.theme-dark,\n.stackline-dropdown.theme-custom {\n --ms-primary: #3f51b5;\n --ms-primary-soft: rgba(63, 81, 181, 0.12);\n --ms-surface: #ffffff;\n --ms-surface-soft: #f5f7fb;\n --ms-surface-muted: #e8eaf6;\n --ms-outline: #c5cae9;\n --ms-outline-strong: #7986cb;\n --ms-on-surface: #212121;\n --ms-on-surface-muted: #5f6368;\n --ms-chip-bg: #e8eaf6;\n --ms-chip-text: #303f9f;\n --ms-chip-remove: #303f9f;\n --ms-divider: rgba(125, 119, 134, 0.16);\n --ms-section-bg: rgba(247, 242, 250, 0.76);\n --ms-selected-text: var(--ms-primary);\n --ms-shadow: 0 1px 2px rgba(33, 33, 33, 0.16), 0 12px 32px rgba(63, 81, 181, 0.12);\n --ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, 0.12), 0 4px 12px rgba(33, 33, 33, 0.08);\n display: block;\n width: 100%;\n color: var(--ms-on-surface);\n font: inherit;\n}\n\n.stackline-dropdown.theme-dark {\n --ms-primary: #8ab4f8;\n --ms-primary-soft: rgba(138, 180, 248, 0.18);\n --ms-surface: #151a23;\n --ms-surface-soft: #202736;\n --ms-surface-muted: #111722;\n --ms-outline: #384456;\n --ms-outline-strong: #8ab4f8;\n --ms-on-surface: #edf2f7;\n --ms-on-surface-muted: #aab6c5;\n --ms-chip-bg: #263247;\n --ms-chip-text: #d7e6ff;\n --ms-chip-remove: #d7e6ff;\n --ms-divider: rgba(170, 182, 197, 0.18);\n --ms-section-bg: #101620;\n --ms-selected-text: #d7e6ff;\n --ms-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);\n --ms-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 24px rgba(0, 0, 0, 0.28);\n}\n\n.stackline-dropdown.theme-custom {\n --ms-primary: var(--stackline-ms-primary, #0f766e);\n --ms-primary-soft: var(--stackline-ms-primary-soft, rgba(15, 118, 110, 0.14));\n --ms-surface: var(--stackline-ms-surface, #ffffff);\n --ms-surface-soft: var(--stackline-ms-surface-soft, #ecfdf5);\n --ms-surface-muted: var(--stackline-ms-surface-muted, #d1fae5);\n --ms-outline: var(--stackline-ms-outline, #99f6e4);\n --ms-outline-strong: var(--stackline-ms-outline-strong, #0f766e);\n --ms-on-surface: var(--stackline-ms-on-surface, #102a2a);\n --ms-on-surface-muted: var(--stackline-ms-on-surface-muted, #47615f);\n --ms-chip-bg: var(--stackline-ms-chip-bg, #ccfbf1);\n --ms-chip-text: var(--stackline-ms-chip-text, #115e59);\n --ms-chip-remove: var(--stackline-ms-chip-remove, #115e59);\n --ms-divider: var(--stackline-ms-divider, rgba(15, 118, 110, 0.16));\n --ms-section-bg: var(--stackline-ms-section-bg, #f0fdfa);\n --ms-selected-text: var(--stackline-ms-selected-text, var(--ms-primary));\n --ms-shadow: var(--stackline-ms-shadow, 0 18px 42px rgba(15, 118, 110, 0.15));\n --ms-shadow-soft: var(--stackline-ms-shadow-soft, 0 1px 2px rgba(15, 118, 110, 0.16), 0 8px 18px rgba(15, 118, 110, 0.09));\n}\n\n.stackline-dropdown.theme-material .selected-list,\n.stackline-dropdown.theme-dark .selected-list,\n.stackline-dropdown.theme-custom .selected-list {\n width: 100%;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn,\n.stackline-dropdown.theme-dark .selected-list .c-btn,\n.stackline-dropdown.theme-custom .selected-list .c-btn {\n position: relative;\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: 8px;\n width: 100%;\n min-height: 56px;\n padding: 11px 54px 11px 16px;\n border-radius: 18px;\n border: 1px solid var(--ms-outline);\n background: var(--ms-surface);\n box-shadow: var(--ms-shadow-soft);\n color: var(--ms-on-surface);\n cursor: pointer;\n font-size: inherit;\n line-height: 1.45;\n transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, transform 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn:hover,\n.stackline-dropdown.theme-dark .selected-list .c-btn:hover,\n.stackline-dropdown.theme-custom .selected-list .c-btn:hover {\n border-color: var(--ms-outline-strong);\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn.disabled,\n.stackline-dropdown.theme-dark .selected-list .c-btn.disabled,\n.stackline-dropdown.theme-custom .selected-list .c-btn.disabled {\n background: var(--ms-surface);\n cursor: not-allowed;\n opacity: 0.72;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list,\n.stackline-dropdown.theme-dark .selected-list .c-list,\n.stackline-dropdown.theme-custom .selected-list .c-list {\n display: flex;\n flex: 1 1 auto;\n flex-wrap: wrap;\n gap: 8px;\n width: auto;\n min-width: 0;\n margin: 0;\n padding: 0;\n float: none;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token,\n.stackline-dropdown.theme-dark .selected-list .c-list .c-token,\n.stackline-dropdown.theme-custom .selected-list .c-list .c-token {\n position: relative;\n display: inline-block;\n vertical-align: middle;\n min-height: 32px;\n max-width: 100%;\n padding: 6px 30px 6px 12px;\n background: var(--ms-chip-bg);\n color: var(--ms-chip-text);\n border-radius: 999px;\n box-shadow: inset 0 0 0 1px rgba(103, 80, 164, 0.08);\n line-height: 1.35;\n white-space: normal;\n overflow-wrap: anywhere;\n margin: 0;\n float: none;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token .c-label,\n.stackline-dropdown.theme-dark .selected-list .c-list .c-token .c-label,\n.stackline-dropdown.theme-custom .selected-list .c-list .c-token .c-label {\n display: inline-flex;\n align-items: center;\n float: none;\n min-width: 0;\n max-width: 100%;\n line-height: 1.3;\n font-weight: 500;\n white-space: normal;\n overflow-wrap: anywhere;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token .fa-remove,\n.stackline-dropdown.theme-dark .selected-list .c-list .c-token .fa-remove,\n.stackline-dropdown.theme-custom .selected-list .c-list .c-token .fa-remove {\n position: absolute;\n right: 10px;\n top: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n margin-left: 0;\n transform: translateY(-50%);\n color: var(--ms-chip-remove);\n cursor: pointer;\n}\n\n.stackline-dropdown.theme-material .selected-list .countplaceholder,\n.stackline-dropdown.theme-dark .selected-list .countplaceholder,\n.stackline-dropdown.theme-custom .selected-list .countplaceholder {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n align-self: center;\n margin: 0;\n line-height: 1;\n color: var(--ms-on-surface-muted);\n font-size: 0.8rem;\n font-weight: 600;\n}\n\n.stackline-dropdown.theme-material .selected-list .fa-angle-down,\n.stackline-dropdown.theme-dark .selected-list .fa-angle-down,\n.stackline-dropdown.theme-custom .selected-list .fa-angle-down,\n.stackline-dropdown.theme-material .selected-list .fa-angle-up,\n.stackline-dropdown.theme-dark .selected-list .fa-angle-up,\n.stackline-dropdown.theme-custom .selected-list .fa-angle-up {\n position: absolute;\n top: 50%;\n right: 16px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n transform: translateY(-50%);\n color: var(--ms-on-surface-muted);\n font-size: 15pt;\n pointer-events: none;\n}\n\n.stackline-dropdown.theme-material .dropdown-list,\n.stackline-dropdown.theme-dark .dropdown-list,\n.stackline-dropdown.theme-custom .dropdown-list {\n position: absolute;\n width: 100%;\n padding-top: 8px;\n z-index: 99999;\n}\n\n.stackline-dropdown.theme-material .arrow-up,\n.stackline-dropdown.theme-dark .arrow-up,\n.stackline-dropdown.theme-custom .arrow-up,\n.stackline-dropdown.theme-material .arrow-down,\n.stackline-dropdown.theme-dark .arrow-down,\n.stackline-dropdown.theme-custom .arrow-down,\n.stackline-dropdown.theme-material .arrow-2,\n.stackline-dropdown.theme-dark .arrow-2,\n.stackline-dropdown.theme-custom .arrow-2 {\n display: none;\n}\n\n.stackline-dropdown.theme-material .list-area,\n.stackline-dropdown.theme-dark .list-area,\n.stackline-dropdown.theme-custom .list-area {\n overflow: hidden;\n border-radius: 22px;\n background: var(--ms-surface);\n border: 1px solid var(--ms-outline);\n box-shadow: var(--ms-shadow);\n margin: 0;\n}\n\n.stackline-dropdown.theme-material .select-all,\n.stackline-dropdown.theme-dark .select-all,\n.stackline-dropdown.theme-custom .select-all {\n padding: 10px 14px;\n border-bottom: 1px solid var(--ms-divider);\n background: var(--ms-section-bg);\n text-align: left;\n}\n\n.stackline-dropdown.theme-material .list-filter,\n.stackline-dropdown.theme-dark .list-filter,\n.stackline-dropdown.theme-custom .list-filter {\n position: relative;\n display: flex;\n align-items: center;\n min-height: 52px;\n padding-left: 48px;\n padding-right: 44px;\n border-bottom: 1px solid var(--ms-divider);\n background: var(--ms-surface);\n}\n\n.stackline-dropdown.theme-material .list-filter input,\n.stackline-dropdown.theme-dark .list-filter input,\n.stackline-dropdown.theme-custom .list-filter input {\n width: 100%;\n height: 100%;\n border: 0;\n background: transparent;\n color: var(--ms-on-surface);\n font: inherit;\n padding: 0;\n}\n\n.stackline-dropdown.theme-material .list-filter input::placeholder,\n.stackline-dropdown.theme-dark .list-filter input::placeholder,\n.stackline-dropdown.theme-custom .list-filter input::placeholder {\n color: var(--ms-on-surface-muted);\n}\n\n.stackline-dropdown.theme-material .list-filter input:focus,\n.stackline-dropdown.theme-dark .list-filter input:focus,\n.stackline-dropdown.theme-custom .list-filter input:focus {\n outline: none;\n}\n\n.stackline-dropdown.theme-material .list-filter .fa,\n.stackline-dropdown.theme-dark .list-filter .fa,\n.stackline-dropdown.theme-custom .list-filter .fa {\n position: absolute;\n top: 50%;\n left: 16px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n transform: translateY(-50%);\n color: var(--ms-on-surface-muted);\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul,\n.stackline-dropdown.theme-dark .dropdown-list ul,\n.stackline-dropdown.theme-custom .dropdown-list ul {\n list-style: none;\n margin: 0;\n padding: 8px;\n overflow: auto;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li,\n.stackline-dropdown.theme-dark .dropdown-list ul li,\n.stackline-dropdown.theme-custom .dropdown-list ul li {\n align-items: center;\n min-height: 0;\n margin: 4px;\n padding: 12px 14px;\n border-radius: 14px;\n cursor: pointer;\n text-align: left;\n line-height: 1.35;\n transition: background-color 0.16s ease, color 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:first-child,\n.stackline-dropdown.theme-dark .dropdown-list ul li:first-child,\n.stackline-dropdown.theme-custom .dropdown-list ul li:first-child {\n padding-top: 12px;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:last-child,\n.stackline-dropdown.theme-dark .dropdown-list ul li:last-child,\n.stackline-dropdown.theme-custom .dropdown-list ul li:last-child {\n padding-bottom: 12px;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:hover,\n.stackline-dropdown.theme-dark .dropdown-list ul li:hover,\n.stackline-dropdown.theme-custom .dropdown-list ul li:hover {\n background: var(--ms-surface-soft);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox,\n.stackline-dropdown.theme-dark .pure-checkbox,\n.stackline-dropdown.theme-custom .pure-checkbox {\n position: relative;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label {\n position: relative;\n display: block;\n width: 100%;\n margin: 0;\n padding-left: 32px;\n color: inherit;\n cursor: pointer;\n font-weight: 500;\n user-select: none;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label:before {\n box-sizing: content-box;\n content: \"\";\n position: absolute;\n top: 50%;\n left: 0;\n width: 16px;\n height: 16px;\n margin-top: -10px;\n border: 2px solid var(--ms-outline-strong);\n border-radius: 5px;\n background: var(--ms-surface);\n transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label:after,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label:after,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label:after {\n box-sizing: content-box;\n content: \"\";\n position: absolute;\n top: 50%;\n left: 5px;\n width: 8px;\n height: 3px;\n margin-top: -4px;\n border-style: solid;\n border-color: #ffffff;\n border-width: 0 0 3px 3px;\n border-image: none;\n background: transparent;\n transform: rotate(-45deg) scale(0);\n transform-origin: 50%;\n transition: transform 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:hover + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:hover + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:hover + label:before {\n border-color: var(--ms-primary);\n background: var(--ms-surface-soft);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked + label:before {\n border-color: var(--ms-primary);\n background: var(--ms-primary);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked + label:after,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked + label:after,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked + label:after {\n transform: rotate(-45deg) scale(1);\n}\n\n.stackline-dropdown.theme-material .list-message,\n.stackline-dropdown.theme-dark .list-message,\n.stackline-dropdown.theme-custom .list-message {\n margin: 0;\n padding: 20px 14px;\n color: var(--ms-on-surface-muted);\n text-align: center;\n}\n"],
27
+ styles: [".stackline-dropdown {\n position: relative;\n}\n\n.c-btn {\n display: inline-block;\n background: #fff;\n border: 1px solid #ccc;\n border-radius: 3px;\n font-size: 14px;\n color: #333;\n}\n\n.c-btn.disabled {\n background: #ccc;\n}\n\n.c-btn:focus {\n outline: none;\n}\n\n.selected-list .c-list {\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n flex-wrap: wrap;\n min-width: 0;\n float: none;\n padding: 0px;\n margin: 0px;\n width: auto;\n}\n.selected-list .c-list .c-token {\n list-style: none;\n padding: 0px 5px;\n background: #0079FE;\n color: #fff;\n border-radius: 2px;\n margin-right: 4px;\n margin-top: 2px;\n float: left;\n}\n.selected-list .c-list .c-token .c-label {\n display: block;\n float: left;\n /*width: 50px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;*/\n}\n.selected-list .c-list .c-token .fa-remove {\n margin-left: 1px;\n font-size: 12px;\n}\n.selected-list .fa-angle-down, .selected-list .fa-angle-up {\n font-size: 15pt;\n position: absolute;\n right: 10px;\n top: 50%;\n transform: translateY(-50%);\n}\n.selected-list .countplaceholder {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n align-self: center;\n margin: 0 0 0 6px;\n line-height: 1;\n}\n.selected-list .c-btn {\n box-sizing: border-box;\n width: 100%;\n box-shadow: 0px 1px 5px #959595;\n padding: 10px 68px 10px 10px;\n cursor: pointer;\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n position: relative;\n}\n\n.dropdown-list {\n position: absolute;\n padding-top: 14px;\n width: 100%;\n z-index: 9999;\n}\n.dropdown-list ul {\n padding: 0px;\n list-style: none;\n overflow: auto;\n margin: 0px;\n}\n.dropdown-list ul li {\n padding: 10px 10px;\n cursor: pointer;\n text-align: left;\n}\n.dropdown-list ul li:first-child {\n padding-top: 10px;\n}\n.dropdown-list ul li:last-child {\n padding-bottom: 10px;\n}\n.dropdown-list ul li:hover {\n background: #f5f5f5;\n}\n.dropdown-list ::-webkit-scrollbar {\n width: 8px;\n}\n.dropdown-list ::-webkit-scrollbar-thumb {\n background: #cccccc;\n border-radius: 5px;\n}\n.dropdown-list ::-webkit-scrollbar-track {\n background: #f2f2f2;\n}\n\n.arrow-up {\n width: 0;\n height: 0;\n border-left: 13px solid transparent;\n border-right: 13px solid transparent;\n border-bottom: 15px solid #fff;\n margin-left: 15px;\n position: absolute;\n top: 0;\n}\n\n.arrow-2 {\n border-bottom: 15px solid #ccc;\n top: -1px;\n}\n\n.list-area {\n border: 1px solid #ccc;\n border-radius: 3px;\n background: #fff;\n margin: 0px;\n box-shadow: 0px 1px 5px #959595;\n}\n\n.select-all {\n padding: 10px;\n border-bottom: 1px solid #ccc;\n text-align: left;\n}\n\n.list-filter {\n border-bottom: 1px solid #ccc;\n position: relative;\n}\n.list-filter input {\n border: 0px;\n width: 100%;\n height: 35px;\n padding: 0px 0px 0px 35px;\n}\n.list-filter input:focus {\n outline: none;\n}\n.list-filter .fa {\n position: absolute;\n top: 10px;\n left: 13px;\n color: #888;\n}\n\n.pure-checkbox input[type=checkbox] {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.pure-checkbox input[type=checkbox]:focus + label:before,\n.pure-checkbox input[type=checkbox]:hover + label:before {\n border-color: #0079FE;\n background-color: #f2f2f2;\n}\n\n.pure-checkbox input[type=checkbox]:active + label:before {\n transition-duration: 0s;\n}\n\n.pure-checkbox input[type=checkbox] + label {\n position: relative;\n padding-left: 2em;\n vertical-align: middle;\n user-select: none;\n cursor: pointer;\n margin: 0px;\n color: #000;\n font-weight: 300;\n}\n\n.pure-checkbox input[type=checkbox] + label:before {\n box-sizing: content-box;\n content: \"\";\n color: #0079FE;\n position: absolute;\n top: 50%;\n left: 0;\n width: 14px;\n height: 14px;\n margin-top: -9px;\n border: 2px solid #0079FE;\n text-align: center;\n transition: all 0.4s ease;\n}\n\n.pure-checkbox input[type=checkbox] + label:after {\n box-sizing: content-box;\n content: \"\";\n background-color: #0079FE;\n position: absolute;\n top: 50%;\n left: 4px;\n width: 10px;\n height: 10px;\n margin-top: -5px;\n transform: scale(0);\n transform-origin: 50%;\n transition: transform 200ms ease-out;\n}\n\n.pure-checkbox input[type=checkbox]:disabled + label:before {\n border-color: #cccccc;\n}\n\n.pure-checkbox input[type=checkbox]:disabled:focus + label:before .pure-checkbox input[type=checkbox]:disabled:hover + label:before {\n background-color: inherit;\n}\n\n.pure-checkbox input[type=checkbox]:disabled:checked + label:before {\n background-color: #cccccc;\n}\n\n.pure-checkbox input[type=checkbox] + label:after {\n background-color: transparent;\n top: 50%;\n left: 4px;\n width: 8px;\n height: 3px;\n margin-top: -4px;\n border-style: solid;\n border-color: #ffffff;\n border-width: 0 0 3px 3px;\n border-image: none;\n transform: rotate(-45deg) scale(0);\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:after {\n content: \"\";\n transform: rotate(-45deg) scale(1);\n transition: transform 200ms ease-out;\n}\n\n.pure-checkbox input[type=radio]:checked + label:before {\n background-color: white;\n}\n\n.pure-checkbox input[type=radio]:checked + label:after {\n transform: scale(1);\n}\n\n.pure-checkbox input[type=radio] + label:before {\n border-radius: 50%;\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:before {\n background: #0079FE;\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:after {\n transform: rotate(-45deg) scale(1);\n}\n\n.list-message {\n text-align: center;\n}\n\n.list-grp {\n padding: 0 15px !important;\n}\n\n.list-grp h4 {\n text-transform: capitalize;\n margin: 15px 0px 0px 0px;\n font-size: 14px;\n font-weight: 700;\n}\n\n.list-grp > li {\n padding-left: 15px !important;\n}\n\n.stackline-dropdown.theme-material,\n.stackline-dropdown.theme-dark,\n.stackline-dropdown.theme-custom {\n --ms-primary: #3f51b5;\n --ms-primary-soft: rgba(63, 81, 181, 0.12);\n --ms-surface: #ffffff;\n --ms-surface-soft: #f5f7fb;\n --ms-surface-muted: #e8eaf6;\n --ms-outline: #c5cae9;\n --ms-outline-strong: #7986cb;\n --ms-on-surface: #212121;\n --ms-on-surface-muted: #5f6368;\n --ms-chip-bg: #e8eaf6;\n --ms-chip-text: #303f9f;\n --ms-chip-remove: #303f9f;\n --ms-divider: rgba(125, 119, 134, 0.16);\n --ms-section-bg: rgba(247, 242, 250, 0.76);\n --ms-selected-text: var(--ms-primary);\n --ms-shadow: 0 1px 2px rgba(33, 33, 33, 0.16), 0 12px 32px rgba(63, 81, 181, 0.12);\n --ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, 0.12), 0 4px 12px rgba(33, 33, 33, 0.08);\n display: block;\n width: 100%;\n color: var(--ms-on-surface);\n font: inherit;\n}\n\n.stackline-dropdown.theme-dark {\n --ms-primary: #8ab4f8;\n --ms-primary-soft: rgba(138, 180, 248, 0.18);\n --ms-surface: #151a23;\n --ms-surface-soft: #202736;\n --ms-surface-muted: #111722;\n --ms-outline: #384456;\n --ms-outline-strong: #8ab4f8;\n --ms-on-surface: #edf2f7;\n --ms-on-surface-muted: #aab6c5;\n --ms-chip-bg: #263247;\n --ms-chip-text: #d7e6ff;\n --ms-chip-remove: #d7e6ff;\n --ms-divider: rgba(170, 182, 197, 0.18);\n --ms-section-bg: #101620;\n --ms-selected-text: #d7e6ff;\n --ms-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);\n --ms-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 24px rgba(0, 0, 0, 0.28);\n}\n\n.stackline-dropdown.theme-custom {\n --ms-primary: var(--stackline-ms-primary, #0f766e);\n --ms-primary-soft: var(--stackline-ms-primary-soft, rgba(15, 118, 110, 0.14));\n --ms-surface: var(--stackline-ms-surface, #ffffff);\n --ms-surface-soft: var(--stackline-ms-surface-soft, #ecfdf5);\n --ms-surface-muted: var(--stackline-ms-surface-muted, #d1fae5);\n --ms-outline: var(--stackline-ms-outline, #99f6e4);\n --ms-outline-strong: var(--stackline-ms-outline-strong, #0f766e);\n --ms-on-surface: var(--stackline-ms-on-surface, #102a2a);\n --ms-on-surface-muted: var(--stackline-ms-on-surface-muted, #47615f);\n --ms-chip-bg: var(--stackline-ms-chip-bg, #ccfbf1);\n --ms-chip-text: var(--stackline-ms-chip-text, #115e59);\n --ms-chip-remove: var(--stackline-ms-chip-remove, #115e59);\n --ms-divider: var(--stackline-ms-divider, rgba(15, 118, 110, 0.16));\n --ms-section-bg: var(--stackline-ms-section-bg, #f0fdfa);\n --ms-selected-text: var(--stackline-ms-selected-text, var(--ms-primary));\n --ms-shadow: var(--stackline-ms-shadow, 0 18px 42px rgba(15, 118, 110, 0.15));\n --ms-shadow-soft: var(--stackline-ms-shadow-soft, 0 1px 2px rgba(15, 118, 110, 0.16), 0 8px 18px rgba(15, 118, 110, 0.09));\n}\n\n.stackline-dropdown.theme-material .selected-list,\n.stackline-dropdown.theme-dark .selected-list,\n.stackline-dropdown.theme-custom .selected-list {\n width: 100%;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn,\n.stackline-dropdown.theme-dark .selected-list .c-btn,\n.stackline-dropdown.theme-custom .selected-list .c-btn {\n position: relative;\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: 8px;\n width: 100%;\n min-height: 56px;\n padding: 11px 84px 11px 16px;\n border-radius: 18px;\n border: 1px solid var(--ms-outline);\n background: var(--ms-surface);\n box-shadow: var(--ms-shadow-soft);\n color: var(--ms-on-surface);\n cursor: pointer;\n font-size: inherit;\n line-height: 1.45;\n transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, transform 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn:hover,\n.stackline-dropdown.theme-dark .selected-list .c-btn:hover,\n.stackline-dropdown.theme-custom .selected-list .c-btn:hover {\n border-color: var(--ms-outline-strong);\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn.disabled,\n.stackline-dropdown.theme-dark .selected-list .c-btn.disabled,\n.stackline-dropdown.theme-custom .selected-list .c-btn.disabled {\n background: var(--ms-surface);\n cursor: not-allowed;\n opacity: 0.72;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list,\n.stackline-dropdown.theme-dark .selected-list .c-list,\n.stackline-dropdown.theme-custom .selected-list .c-list {\n display: flex;\n flex: 1 1 auto;\n flex-wrap: wrap;\n gap: 8px;\n width: auto;\n min-width: 0;\n margin: 0;\n padding: 0;\n float: none;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token,\n.stackline-dropdown.theme-dark .selected-list .c-list .c-token,\n.stackline-dropdown.theme-custom .selected-list .c-list .c-token {\n position: relative;\n display: inline-block;\n vertical-align: middle;\n min-height: 32px;\n max-width: 100%;\n padding: 6px 30px 6px 12px;\n background: var(--ms-chip-bg);\n color: var(--ms-chip-text);\n border-radius: 999px;\n box-shadow: inset 0 0 0 1px rgba(103, 80, 164, 0.08);\n line-height: 1.35;\n white-space: normal;\n overflow-wrap: anywhere;\n margin: 0;\n float: none;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token .c-label,\n.stackline-dropdown.theme-dark .selected-list .c-list .c-token .c-label,\n.stackline-dropdown.theme-custom .selected-list .c-list .c-token .c-label {\n display: inline-flex;\n align-items: center;\n float: none;\n min-width: 0;\n max-width: 100%;\n line-height: 1.3;\n font-weight: 500;\n white-space: normal;\n overflow-wrap: anywhere;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token .fa-remove,\n.stackline-dropdown.theme-dark .selected-list .c-list .c-token .fa-remove,\n.stackline-dropdown.theme-custom .selected-list .c-list .c-token .fa-remove {\n position: absolute;\n right: 10px;\n top: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n margin-left: 0;\n transform: translateY(-50%);\n color: var(--ms-chip-remove);\n cursor: pointer;\n}\n\n.stackline-dropdown.theme-material .selected-list .countplaceholder,\n.stackline-dropdown.theme-dark .selected-list .countplaceholder,\n.stackline-dropdown.theme-custom .selected-list .countplaceholder {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n align-self: center;\n margin: 0;\n line-height: 1;\n color: var(--ms-on-surface-muted);\n font-size: 0.8rem;\n font-weight: 600;\n}\n\n.stackline-dropdown.theme-material .selected-list .fa-angle-down,\n.stackline-dropdown.theme-dark .selected-list .fa-angle-down,\n.stackline-dropdown.theme-custom .selected-list .fa-angle-down,\n.stackline-dropdown.theme-material .selected-list .fa-angle-up,\n.stackline-dropdown.theme-dark .selected-list .fa-angle-up,\n.stackline-dropdown.theme-custom .selected-list .fa-angle-up {\n position: absolute;\n top: 50%;\n right: 16px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n transform: translateY(-50%);\n color: var(--ms-on-surface-muted);\n font-size: 15pt;\n pointer-events: none;\n}\n\n.stackline-dropdown.theme-material .dropdown-list,\n.stackline-dropdown.theme-dark .dropdown-list,\n.stackline-dropdown.theme-custom .dropdown-list {\n position: absolute;\n width: 100%;\n padding-top: 8px;\n z-index: 99999;\n}\n\n.stackline-dropdown.theme-material .arrow-up,\n.stackline-dropdown.theme-dark .arrow-up,\n.stackline-dropdown.theme-custom .arrow-up,\n.stackline-dropdown.theme-material .arrow-down,\n.stackline-dropdown.theme-dark .arrow-down,\n.stackline-dropdown.theme-custom .arrow-down,\n.stackline-dropdown.theme-material .arrow-2,\n.stackline-dropdown.theme-dark .arrow-2,\n.stackline-dropdown.theme-custom .arrow-2 {\n display: none;\n}\n\n.stackline-dropdown.theme-material .list-area,\n.stackline-dropdown.theme-dark .list-area,\n.stackline-dropdown.theme-custom .list-area {\n overflow: hidden;\n border-radius: 22px;\n background: var(--ms-surface);\n border: 1px solid var(--ms-outline);\n box-shadow: var(--ms-shadow);\n margin: 0;\n}\n\n.stackline-dropdown.theme-material .select-all,\n.stackline-dropdown.theme-dark .select-all,\n.stackline-dropdown.theme-custom .select-all {\n padding: 10px 14px;\n border-bottom: 1px solid var(--ms-divider);\n background: var(--ms-section-bg);\n text-align: left;\n}\n\n.stackline-dropdown.theme-material .list-filter,\n.stackline-dropdown.theme-dark .list-filter,\n.stackline-dropdown.theme-custom .list-filter {\n position: relative;\n display: flex;\n align-items: center;\n min-height: 52px;\n padding-left: 48px;\n padding-right: 44px;\n border-bottom: 1px solid var(--ms-divider);\n background: var(--ms-surface);\n}\n\n.stackline-dropdown.theme-material .list-filter input,\n.stackline-dropdown.theme-dark .list-filter input,\n.stackline-dropdown.theme-custom .list-filter input {\n width: 100%;\n height: 100%;\n border: 0;\n background: transparent;\n color: var(--ms-on-surface);\n font: inherit;\n padding: 0;\n}\n\n.stackline-dropdown.theme-material .list-filter input::placeholder,\n.stackline-dropdown.theme-dark .list-filter input::placeholder,\n.stackline-dropdown.theme-custom .list-filter input::placeholder {\n color: var(--ms-on-surface-muted);\n}\n\n.stackline-dropdown.theme-material .list-filter input:focus,\n.stackline-dropdown.theme-dark .list-filter input:focus,\n.stackline-dropdown.theme-custom .list-filter input:focus {\n outline: none;\n}\n\n.stackline-dropdown.theme-material .list-filter .fa,\n.stackline-dropdown.theme-dark .list-filter .fa,\n.stackline-dropdown.theme-custom .list-filter .fa {\n position: absolute;\n top: 50%;\n left: 16px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n transform: translateY(-50%);\n color: var(--ms-on-surface-muted);\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul,\n.stackline-dropdown.theme-dark .dropdown-list ul,\n.stackline-dropdown.theme-custom .dropdown-list ul {\n list-style: none;\n margin: 0;\n padding: 8px;\n overflow: auto;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li,\n.stackline-dropdown.theme-dark .dropdown-list ul li,\n.stackline-dropdown.theme-custom .dropdown-list ul li {\n align-items: center;\n min-height: 0;\n margin: 4px;\n padding: 12px 14px;\n border-radius: 14px;\n cursor: pointer;\n text-align: left;\n line-height: 1.35;\n transition: background-color 0.16s ease, color 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:first-child,\n.stackline-dropdown.theme-dark .dropdown-list ul li:first-child,\n.stackline-dropdown.theme-custom .dropdown-list ul li:first-child {\n padding-top: 12px;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:last-child,\n.stackline-dropdown.theme-dark .dropdown-list ul li:last-child,\n.stackline-dropdown.theme-custom .dropdown-list ul li:last-child {\n padding-bottom: 12px;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:hover,\n.stackline-dropdown.theme-dark .dropdown-list ul li:hover,\n.stackline-dropdown.theme-custom .dropdown-list ul li:hover {\n background: var(--ms-surface-soft);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox,\n.stackline-dropdown.theme-dark .pure-checkbox,\n.stackline-dropdown.theme-custom .pure-checkbox {\n position: relative;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label {\n position: relative;\n display: block;\n width: 100%;\n margin: 0;\n padding-left: 32px;\n color: inherit;\n cursor: pointer;\n font-weight: 500;\n user-select: none;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label:before {\n box-sizing: content-box;\n content: \"\";\n position: absolute;\n top: 50%;\n left: 0;\n width: 16px;\n height: 16px;\n margin-top: -10px;\n border: 2px solid var(--ms-outline-strong);\n border-radius: 5px;\n background: var(--ms-surface);\n transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label:after,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label:after,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label:after {\n box-sizing: content-box;\n content: \"\";\n position: absolute;\n top: 50%;\n left: 5px;\n width: 8px;\n height: 3px;\n margin-top: -4px;\n border-style: solid;\n border-color: #ffffff;\n border-width: 0 0 3px 3px;\n border-image: none;\n background: transparent;\n transform: rotate(-45deg) scale(0);\n transform-origin: 50%;\n transition: transform 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:hover + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:hover + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:hover + label:before {\n border-color: var(--ms-primary);\n background: var(--ms-surface-soft);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked + label:before {\n border-color: var(--ms-primary);\n background: var(--ms-primary);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked + label:after,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked + label:after,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked + label:after {\n transform: rotate(-45deg) scale(1);\n}\n\n.stackline-dropdown.theme-material .list-message,\n.stackline-dropdown.theme-dark .list-message,\n.stackline-dropdown.theme-custom .list-message {\n margin: 0;\n padding: 20px 14px;\n color: var(--ms-on-surface-muted);\n text-align: center;\n}\n"],
28
28
  providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALIDATION]
29
29
  })
30
30
 
@@ -97,7 +97,8 @@ export class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChang
97
97
  lazyLoading: false,
98
98
  labelKey: 'itemName',
99
99
  theme: 'classic',
100
- skin: 'classic'
100
+ skin: 'classic',
101
+ clearAll: true
101
102
  }
102
103
  public parseError: boolean;
103
104
  constructor(public _elementRef : ElementRef) {
@@ -278,6 +279,13 @@ export class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChang
278
279
  this.onChangeCallback(this.selectedItems);
279
280
  this.onTouchedCallback(this.selectedItems);
280
281
  }
282
+ clearSelection(e?: any) {
283
+ this.selectedItems = [];
284
+ this.isSelectAll = false;
285
+ this.onChangeCallback(this.selectedItems);
286
+ this.onTouchedCallback(this.selectedItems);
287
+ this.onDeSelectAll.emit(this.selectedItems);
288
+ }
281
289
  toggleDropdown(evt: any) {
282
290
  if (this.settings.disabled) {
283
291
  return false;
package/themes/custom.theme.css CHANGED
@@ -23,7 +23,7 @@
23
23
 
24
24
  .stackline-dropdown .c-btn {
25
25
  min-height: 56px;
26
- padding: 11px 54px 11px 16px;
26
+ padding: 11px 84px 11px 16px;
27
27
  border-radius: 18px;
28
28
  background: var(--ms-surface);
29
29
  border: 1px solid var(--ms-outline);
@@ -201,3 +201,29 @@
201
201
  }
202
202
 
203
203
  /*# sourceMappingURL=custom.theme.css.map */
204
+
205
+
206
+ .selected-list .clear-all {
207
+ font-size: 12pt;
208
+ position: absolute;
209
+ right: 42px;
210
+ top: 50%;
211
+ transform: translateY(-50%);
212
+ cursor: pointer;
213
+ }
214
+
215
+ .stackline-dropdown.theme-material .selected-list .clear-all,
216
+ .stackline-dropdown.theme-dark .selected-list .clear-all,
217
+ .stackline-dropdown.theme-custom .selected-list .clear-all {
218
+ position: absolute;
219
+ top: 50%;
220
+ right: 42px;
221
+ display: inline-flex;
222
+ align-items: center;
223
+ justify-content: center;
224
+ width: 20px;
225
+ height: 20px;
226
+ transform: translateY(-50%);
227
+ color: var(--ms-on-surface-muted);
228
+ cursor: pointer;
229
+ }
package/themes/custom.theme.scss CHANGED
@@ -24,7 +24,7 @@
24
24
 
25
25
  .stackline-dropdown .c-btn {
26
26
  min-height: 56px;
27
- padding: 11px 54px 11px 16px;
27
+ padding: 11px 84px 11px 16px;
28
28
  border-radius: 18px;
29
29
  background: var(--ms-surface);
30
30
  border: 1px solid var(--ms-outline);
@@ -200,3 +200,29 @@
200
200
  top: 18px;
201
201
  right: 16px;
202
202
  }
203
+
204
+
205
+ .selected-list .clear-all {
206
+ font-size: 12pt;
207
+ position: absolute;
208
+ right: 42px;
209
+ top: 50%;
210
+ transform: translateY(-50%);
211
+ cursor: pointer;
212
+ }
213
+
214
+ .stackline-dropdown.theme-material .selected-list .clear-all,
215
+ .stackline-dropdown.theme-dark .selected-list .clear-all,
216
+ .stackline-dropdown.theme-custom .selected-list .clear-all {
217
+ position: absolute;
218
+ top: 50%;
219
+ right: 42px;
220
+ display: inline-flex;
221
+ align-items: center;
222
+ justify-content: center;
223
+ width: 20px;
224
+ height: 20px;
225
+ transform: translateY(-50%);
226
+ color: var(--ms-on-surface-muted);
227
+ cursor: pointer;
228
+ }
package/themes/default.theme.css CHANGED
@@ -35,3 +35,29 @@
35
35
  }
36
36
 
37
37
  /*# sourceMappingURL=default.theme.css.map */
38
+
39
+
40
+ .selected-list .clear-all {
41
+ font-size: 12pt;
42
+ position: absolute;
43
+ right: 42px;
44
+ top: 50%;
45
+ transform: translateY(-50%);
46
+ cursor: pointer;
47
+ }
48
+
49
+ .stackline-dropdown.theme-material .selected-list .clear-all,
50
+ .stackline-dropdown.theme-dark .selected-list .clear-all,
51
+ .stackline-dropdown.theme-custom .selected-list .clear-all {
52
+ position: absolute;
53
+ top: 50%;
54
+ right: 42px;
55
+ display: inline-flex;
56
+ align-items: center;
57
+ justify-content: center;
58
+ width: 20px;
59
+ height: 20px;
60
+ transform: translateY(-50%);
61
+ color: var(--ms-on-surface-muted);
62
+ cursor: pointer;
63
+ }
package/themes/default.theme.scss CHANGED
@@ -33,3 +33,29 @@
33
33
  background: var(--ms-primary);
34
34
  color: #ffffff;
35
35
  }
36
+
37
+
38
+ .selected-list .clear-all {
39
+ font-size: 12pt;
40
+ position: absolute;
41
+ right: 42px;
42
+ top: 50%;
43
+ transform: translateY(-50%);
44
+ cursor: pointer;
45
+ }
46
+
47
+ .stackline-dropdown.theme-material .selected-list .clear-all,
48
+ .stackline-dropdown.theme-dark .selected-list .clear-all,
49
+ .stackline-dropdown.theme-custom .selected-list .clear-all {
50
+ position: absolute;
51
+ top: 50%;
52
+ right: 42px;
53
+ display: inline-flex;
54
+ align-items: center;
55
+ justify-content: center;
56
+ width: 20px;
57
+ height: 20px;
58
+ transform: translateY(-50%);
59
+ color: var(--ms-on-surface-muted);
60
+ cursor: pointer;
61
+ }