@stackline/angular-multiselect-dropdown 4.0.1 → 4.0.2

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 +5 -5
  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 4 Demo](https://alexandro.net/docs/angular/multiselect/angular-4/)** | **[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:** `4.0.1` for Angular `4.x`
15
+ **Latest tested npm release:** `4.0.2` for Angular `4.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 `4.0.1` for Angular 4.x applications.
27
+ The repository contains the full documentation matrix from Angular 2 through Angular 21. The current public npm release is `4.0.2` for Angular 4.x applications.
28
28
 
29
29
  The Angular 4 package is compatible with Angular 4.x and was tested in a real Angular 4.4.7 application before npm publication.
30
30
 
@@ -99,10 +99,10 @@ Each package family only installs on its matching Angular family. Framework majo
99
99
  ## Installation
100
100
 
101
101
  ```bash
102
- npm install @stackline/angular-multiselect-dropdown@4.0.1 --save-exact
102
+ npm install @stackline/angular-multiselect-dropdown@4.0.2 --save-exact
103
103
  ```
104
104
 
105
- Install `4.0.1` for Angular 4.x applications. This line keeps the tested Angular 4 behavior, makes `<angular-multiselect>` the documented standard selector, and keeps `<angular2-multiselect>` only as a legacy compatibility alias.
105
+ Install `4.0.2` for Angular 4.x applications. This line keeps the tested Angular 4 behavior, makes `<angular-multiselect>` the documented standard selector, and keeps `<angular2-multiselect>` only as a legacy compatibility alias.
106
106
 
107
107
  ## Setup
108
108
 
@@ -198,7 +198,7 @@ dropdownSettings = {
198
198
 
199
199
  ## Official Angular 4 Test Matrix
200
200
 
201
- The published Angular 4 release was tested in a real Angular `4.4.7` application with `@stackline/angular-multiselect-dropdown@4.0.1`. The docs now use the same examples from that test app.
201
+ The published Angular 4 release was tested in a real Angular `4.4.7` application with `@stackline/angular-multiselect-dropdown@4.0.2`. The docs now use the same examples from that test app.
202
202
 
203
203
  Switch between skins through the settings object:
204
204
 
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": "4.0.1",
3
+ "version": "4.0.2",
4
4
  "description": "Angular 4 compatible multiselect dropdown package for the Stackline Angular 4 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
+ }