@stackline/angular-multiselect-dropdown 2.0.6 → 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 (6) hide show
  1. package/README.md +256 -259
  2. package/package.json +7 -7
  3. package/themes/custom.theme.css +229 -0
  4. package/themes/custom.theme.scss +228 -0
  5. package/themes/default.theme.css +63 -0
  6. package/themes/default.theme.scss +61 -0
package/README.md CHANGED
@@ -1,320 +1,317 @@
1
1
  # @stackline/angular-multiselect-dropdown
2
2
 
3
- Angular 2 multiselect dropdown component for web applications. Easy to integrate and use.
3
+ > A maintained Angular multiselect dropdown for classic Angular forms workflows, with search, grouping, custom item and badge templates, lazy loading, custom CSS/SCSS theming, and support for both template-driven and reactive forms.
4
4
 
5
- ## Compatibility
5
+ [![npm version](https://img.shields.io/npm/v/@stackline/angular-multiselect-dropdown.svg?style=flat-square)](https://www.npmjs.com/package/@stackline/angular-multiselect-dropdown)
6
+ [![npm downloads](https://img.shields.io/npm/dt/@stackline/angular-multiselect-dropdown.svg?style=flat-square)](https://www.npmjs.com/package/@stackline/angular-multiselect-dropdown)
7
+ [![npm monthly](https://img.shields.io/npm/dm/@stackline/angular-multiselect-dropdown.svg?style=flat-square)](https://www.npmjs.com/package/@stackline/angular-multiselect-dropdown)
8
+ [![license](https://img.shields.io/npm/l/@stackline/angular-multiselect-dropdown.svg?style=flat-square)](https://github.com/alexandroit/angular-multiselect-dropdown/blob/master/LICENSE)
9
+ [![Angular 4](https://img.shields.io/badge/Angular-4.x-red?style=flat-square&logo=angular)](https://alexandro.net/docs/angular/multiselect/angular-4/)
10
+ [![TypeScript](https://img.shields.io/badge/TypeScript-2.4-blue?style=flat-square&logo=typescript)](https://www.typescriptlang.org)
11
+ [![GitHub stars](https://img.shields.io/github/stars/alexandroit/angular-multiselect-dropdown.svg?style=flat-square)](https://github.com/alexandroit/angular-multiselect-dropdown/stargazers)
6
12
 
7
- This package version is compatible with Angular 2.x and was tested in a real Angular 2.4.10 application.
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)**
8
14
 
9
- - Package: `@stackline/angular-multiselect-dropdown@2.0.6`
10
- - Angular peer range: `>=2.0.0 <3.0.0`
11
- - Tested Angular runtime: `2.4.10`
15
+ **Latest tested npm release:** `4.0.2` for Angular `4.x`
12
16
 
13
- ## Table of Contents
14
- ##### 1. Getting Started
15
- ##### 2. Installation
16
- ##### 3. Usage
17
- ##### 4. Templates
18
- ##### 5. Template Driven Forms support
19
- ##### 5. Reactive Forms support
20
- ##### 6. Settings configuration
21
- ##### 7. Callbacks and events
22
- ##### 8. Lazy lodaing - handle large data lists
23
- ##### 9. Group By feature
24
- ##### 10. Search filter for both plain list and grouped list
17
+ ---
25
18
 
19
+ > **Credits:** Original upstream copyright is preserved in the license. Current maintenance, Angular line stewardship, publishing, and documentation by [Alexandro Paixao Marques](https://github.com/alexandroit/angular-multiselect-dropdown).
26
20
 
21
+ ---
27
22
 
23
+ ## Why this library?
28
24
 
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.
29
26
 
30
- ## Getting Started
31
- ### Installation
32
- - The Mutiselect Dropdown package is published as `@stackline/angular-multiselect-dropdown`.
33
- - Install the tested Angular 2 package:
34
- `npm install @stackline/angular-multiselect-dropdown@2.0.6`
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.
35
28
 
36
- - Once installed import `AngularMultiSelectModule` from the installed package into your module as follows:
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.
37
30
 
38
- ### Theme option
31
+ ## Features
39
32
 
40
- The package ships four built-in skins:
33
+ | Feature | Supported |
34
+ | :--- | :---: |
35
+ | Angular 4 tested published release line | ✅ |
36
+ | Multi-select and single-select modes | ✅ |
37
+ | Search and filter | ✅ |
38
+ | Group by field | ✅ |
39
+ | Custom item templates (`<c-item>`) | ✅ |
40
+ | Custom badge templates (`<c-badge>`) | ✅ |
41
+ | Template-driven forms (`ngModel`) | ✅ |
42
+ | Reactive forms (`formControlName`) | ✅ |
43
+ | Lazy loading and remote-data hooks | ✅ |
44
+ | Theming via bundled CSS/SCSS | ✅ |
45
+ | Primary selector `<angular-multiselect>` | ✅ |
46
+ | Legacy compatibility alias `<angular2-multiselect>` | ✅ |
47
+ | Versioned docs builds per Angular line | ✅ |
41
48
 
42
- - `classic` keeps the original compact layout and is the default.
43
- - `material` enables the rounded chip and list-item spacing skin.
44
- - `dark` uses the Material layout with dark surfaces for dark-mode screens.
45
- - `custom` uses the Material layout and reads CSS custom properties from your app.
49
+ ## Table of Contents
46
50
 
47
- ```js
48
- this.dropdownSettings = {
49
- text: 'Select Countries',
50
- enableSearchFilter: true,
51
- theme: 'material'
52
- };
51
+ 1. [Rename Note](#rename-note)
52
+ 2. [Angular Version Compatibility](#angular-version-compatibility)
53
+ 3. [Installation](#installation)
54
+ 4. [Setup](#setup)
55
+ 5. [Custom CSS and SCSS Themes](#custom-css-and-scss-themes)
56
+ 6. [Basic Usage](#basic-usage)
57
+ 7. [Official Angular 4 Test Matrix](#official-angular-4-test-matrix)
58
+ 8. [Custom Templates](#custom-templates)
59
+ 9. [Forms Integration](#forms-integration)
60
+ 10. [Lazy Loading and Remote Data](#lazy-loading-and-remote-data)
61
+ 11. [Events](#events)
62
+ 12. [Run Locally](#run-locally)
63
+ 13. [License](#license)
64
+
65
+ ## Rename Note
66
+
67
+ - new package: `@stackline/angular-multiselect-dropdown`
68
+ - previous package: `@stackline/angular2-multiselect-dropdown`
69
+ - primary selector: `<angular-multiselect>`
70
+ - legacy alias still accepted only for compatibility: `<angular2-multiselect>`
71
+
72
+ ## Angular Version Compatibility
73
+
74
+ Each package family only installs on its matching Angular family. Framework major and package major are not always the same package number, so use the package family column below.
75
+
76
+ | Package family | Framework family | Peer range | Tested release window | Demo link |
77
+ | :---: | :---: | :---: | :---: | :--- |
78
+ | **21.x** | **Angular 21 only** | **`>=21.0.0 <22.0.0`** | **21.0.0 -> 21.2.8** | [Angular 21 family docs](https://alexandro.net/docs/angular/multiselect/angular-21/) |
79
+ | **20.x** | **Angular 20 only** | **`>=20.0.0 <21.0.0`** | **20.0.0 -> 20.3.18** | [Angular 20 family docs](https://alexandro.net/docs/angular/multiselect/angular-20/) |
80
+ | **19.x** | **Angular 19 only** | **`>=19.0.0 <20.0.0`** | **19.0.0 -> 19.2.20** | [Angular 19 family docs](https://alexandro.net/docs/angular/multiselect/angular-19/) |
81
+ | **18.x** | **Angular 18 only** | **`>=18.0.0 <19.0.0`** | **18.0.0 -> 18.2.14** | [Angular 18 family docs](https://alexandro.net/docs/angular/multiselect/angular-18/) |
82
+ | **17.x** | **Angular 17 only** | **`>=17.0.0 <18.0.0`** | **17.0.0 -> 17.3.12** | [Angular 17 family docs](https://alexandro.net/docs/angular/multiselect/angular-17/) |
83
+ | **16.x** | **Angular 16 only** | **`>=16.0.0 <17.0.0`** | **16.0.0 -> 16.2.12** | [Angular 16 family docs](https://alexandro.net/docs/angular/multiselect/angular-16/) |
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
+ | **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
+ | **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/) |
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
+ | **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
+ | **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/) |
92
+ | **7.x** | **Angular 7 only** | **`>=7.0.0 <8.0.0`** | **7.0.0 -> 7.2.16** | [Angular 7 family docs](https://alexandro.net/docs/angular/multiselect/angular-7/) |
93
+ | **6.x** | **Angular 6 only** | **`>=6.0.0 <7.0.0`** | **6.0.0 -> 6.1.10** | [Angular 6 family docs](https://alexandro.net/docs/angular/multiselect/angular-6/) |
94
+ | **5.x** | **Angular 5 only** | **`>=5.0.0 <6.0.0`** | **5.0.0 -> 5.2.11** | [Angular 5 family docs](https://alexandro.net/docs/angular/multiselect/angular-5/) |
95
+ | **4.x** | **Angular 4 only** | **`>=4.0.0 <5.0.0`** | **4.0.0 -> 4.4.7** | [Angular 4 family docs](https://alexandro.net/docs/angular/multiselect/angular-4/) |
96
+ | **2.x** | **Angular 2 only** | **`>=2.0.0 <3.0.0`** | **compatible with 2.x; tested on 2.4.10** | [Angular 2 family docs](https://alexandro.net/docs/angular/multiselect/angular-2/) |
97
+
98
+
99
+ ## Installation
100
+
101
+ ```bash
102
+ npm install @stackline/angular-multiselect-dropdown@4.0.2 --save-exact
53
103
  ```
54
104
 
55
- To change the skin at runtime, only update `settings.theme` or `settings.skin`.
56
- No other template or data customization is required:
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.
57
106
 
58
- ```js
59
- this.dropdownSettings.theme = 'dark';
60
- ```
107
+ ## Setup
61
108
 
62
- The component adds `theme-{name}` to the internal `.stackline-dropdown` element.
63
- That means any new skin can follow the same pattern:
109
+ ### 1. Import the module
64
110
 
65
- ```js
66
- this.dropdownSettings = {
67
- text: 'Select Countries',
68
- enableSearchFilter: true,
69
- theme: 'brand'
70
- };
71
- ```
111
+ ```ts
112
+ import { NgModule } from '@angular/core';
113
+ import { BrowserModule } from '@angular/platform-browser';
114
+ import { FormsModule } from '@angular/forms';
115
+ import { AngularMultiSelectModule } from '@stackline/angular-multiselect-dropdown';
72
116
 
73
- ```css
74
- .stackline-dropdown.theme-brand {
75
- --stackline-ms-primary: #7c3aed;
76
- --stackline-ms-primary-soft: rgba(124, 58, 237, 0.14);
77
- --stackline-ms-surface: #ffffff;
78
- --stackline-ms-surface-soft: #f5f3ff;
79
- --stackline-ms-outline: #c4b5fd;
80
- --stackline-ms-outline-strong: #7c3aed;
81
- --stackline-ms-on-surface: #22183f;
82
- --stackline-ms-on-surface-muted: #6b5d80;
83
- --stackline-ms-chip-bg: #ede9fe;
84
- --stackline-ms-chip-text: #5b21b6;
85
- --stackline-ms-chip-remove: #5b21b6;
86
- --stackline-ms-divider: rgba(124, 58, 237, 0.16);
87
- --stackline-ms-section-bg: #faf5ff;
88
- }
117
+ @NgModule({
118
+ imports: [
119
+ BrowserModule,
120
+ FormsModule,
121
+ AngularMultiSelectModule
122
+ ]
123
+ })
124
+ export class AppModule {}
89
125
  ```
90
126
 
91
- For the built-in `custom` skin, define the `--stackline-ms-*` variables on a
92
- parent element or globally:
93
-
94
- ```css
95
- .orders-filter {
96
- --stackline-ms-primary: #b45309;
97
- --stackline-ms-primary-soft: rgba(180, 83, 9, 0.14);
98
- --stackline-ms-surface: #fffaf0;
99
- --stackline-ms-surface-soft: #fffbeb;
100
- --stackline-ms-outline: #fcd34d;
101
- --stackline-ms-outline-strong: #b45309;
102
- --stackline-ms-on-surface: #2f1b05;
103
- --stackline-ms-on-surface-muted: #7c5b2e;
104
- --stackline-ms-chip-bg: #fef3c7;
105
- --stackline-ms-chip-text: #92400e;
106
- }
127
+ ### 2. Add the default theme
128
+
129
+ ```json
130
+ "styles": [
131
+ "node_modules/@stackline/angular-multiselect-dropdown/themes/default.theme.css"
132
+ ]
107
133
  ```
108
134
 
109
- ### Usage
110
- Import `AngularMultiSelectModule` into `NgModule` in `app.module.ts`
111
- ```js
112
- import { AngularMultiSelectModule } from '@stackline/angular-multiselect-dropdown/angular2-multiselect-dropdown';
135
+ ## Custom CSS and SCSS Themes
113
136
 
114
- @NgModule({
115
- // ...
116
- imports: [
117
- AngularMultiSelectModule,
118
- ]
119
- // ...
120
- })
137
+ The package also ships a full custom starter theme in both formats:
138
+
139
+ - `node_modules/@stackline/angular-multiselect-dropdown/themes/custom.theme.scss`
140
+ - `node_modules/@stackline/angular-multiselect-dropdown/themes/custom.theme.css`
141
+
142
+ Use the `scss` file when you want to take over the component styles completely and keep the theme in your app source:
121
143
 
144
+ ```json
145
+ "styles": [
146
+ "src/styles.scss",
147
+ "src/styles/multiselect-dropdown.theme.scss"
148
+ ]
122
149
  ```
123
150
 
124
- Declare the component data variables and options in your component where you want to consume the dropdown component.
125
-
126
- ```js
127
-
128
- import { Component, OnInit } from '@angular/core';
129
-
130
- export class AppComponent implements OnInit {
131
- dropdownList = [];
132
- selectedItems = [];
133
- dropdownSettings = {};
134
- ngOnInit(){
135
- this.dropdownList = [
136
- {"id":1,"itemName":"India"},
137
- {"id":2,"itemName":"Singapore"},
138
- {"id":3,"itemName":"Australia"},
139
- {"id":4,"itemName":"Canada"},
140
- {"id":5,"itemName":"South Korea"},
141
- {"id":6,"itemName":"Germany"},
142
- {"id":7,"itemName":"France"},
143
- {"id":8,"itemName":"Russia"},
144
- {"id":9,"itemName":"Italy"},
145
- {"id":10,"itemName":"Sweden"}
146
- ];
147
- this.selectedItems = [
148
- {"id":2,"itemName":"Singapore"},
149
- {"id":3,"itemName":"Australia"},
150
- {"id":4,"itemName":"Canada"},
151
- {"id":5,"itemName":"South Korea"}
152
- ];
153
- this.dropdownSettings = {
154
- singleSelection: false,
155
- text:"Select Countries",
156
- selectAllText:'Select All',
157
- unSelectAllText:'UnSelect All',
158
- enableSearchFilter: true,
159
- classes:"myclass custom-class"
160
- };
161
- }
162
- onItemSelect(item:any){
163
- console.log(item);
164
- console.log(this.selectedItems);
165
- }
166
- OnItemDeSelect(item:any){
167
- console.log(item);
168
- console.log(this.selectedItems);
169
- }
170
- onSelectAll(items: any){
171
- console.log(items);
172
- }
173
- onDeSelectAll(items: any){
174
- console.log(items);
175
- }
176
- }
151
+ Start `src/styles/multiselect-dropdown.theme.scss` from the package file above and edit the selectors and tokens freely.
152
+
153
+ Use the `css` file when you want a plain compiled starter that can be copied and adjusted without a Sass pipeline.
154
+
155
+ ## Basic Usage
156
+
157
+ ```ts
158
+ dropdownList = [
159
+ { id: 1, itemName: 'Brazil' },
160
+ { id: 2, itemName: 'Canada' },
161
+ { id: 3, itemName: 'Portugal' },
162
+ { id: 4, itemName: 'United States' },
163
+ { id: 5, itemName: 'Argentina' },
164
+ { id: 6, itemName: 'Germany' },
165
+ { id: 7, itemName: 'Japan' },
166
+ { id: 8, itemName: 'South Africa' }
167
+ ];
168
+
169
+ selectedItems = [{ id: 2, itemName: 'Canada' }];
170
+
171
+ dropdownSettings = {
172
+ singleSelection: false,
173
+ text: 'Classic basic',
174
+ selectAllText: 'Select all',
175
+ unSelectAllText: 'Clear all',
176
+ enableSearchFilter: true,
177
+ searchPlaceholderText: 'Search',
178
+ badgeShowLimit: 4,
179
+ maxHeight: 260,
180
+ showCheckbox: true,
181
+ noDataLabel: 'No data',
182
+ theme: 'classic',
183
+ tagToBody: false
184
+ };
177
185
  ```
178
186
 
179
- Add the following component tag in you template
180
187
  ```html
181
- <angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems"
182
- [settings]="dropdownSettings"
183
- (onSelect)="onItemSelect($event)"
184
- (onDeSelect)="OnItemDeSelect($event)"
185
- (onSelectAll)="onSelectAll($event)"
186
- (onDeSelectAll)="onDeSelectAll($event)"></angular2-multiselect>
188
+ <angular-multiselect
189
+ [data]="dropdownList"
190
+ [(ngModel)]="selectedItems"
191
+ [settings]="dropdownSettings"
192
+ (onSelect)="onItemSelect($event)"
193
+ (onDeSelect)="onItemDeSelect($event)"
194
+ (onSelectAll)="onSelectAll($event)"
195
+ (onDeSelectAll)="onDeSelectAll($event)">
196
+ </angular-multiselect>
197
+ ```
198
+
199
+ ## Official Angular 4 Test Matrix
200
+
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
+
203
+ Switch between skins through the settings object:
204
+
205
+ ```ts
206
+ settings = {
207
+ text: 'Classic basic',
208
+ theme: 'classic'
209
+ };
187
210
 
211
+ materialSettings = {
212
+ text: 'Material basic',
213
+ theme: 'material'
214
+ };
188
215
  ```
189
- ### Template - For custom html of menu item
216
+
217
+ The same twelve scenarios are validated for both `classic` and `material`:
218
+
219
+ | # | Scenario | Main settings tested |
220
+ | :---: | :--- | :--- |
221
+ | 01 | Basic multi | `{ enableSearchFilter: false }` |
222
+ | 02 | Search + select all | Search, select all, clear all, events |
223
+ | 03 | Single without checkbox | `{ singleSelection: true, showCheckbox: false, enableCheckAll: false }` |
224
+ | 04 | Multi without checkbox | `{ showCheckbox: false, enableCheckAll: false }` |
225
+ | 05 | Selection limit | `{ limitSelection: 2, badgeShowLimit: 2 }` |
226
+ | 06 | Badge overflow | `{ badgeShowLimit: 2, maxHeight: 220 }` |
227
+ | 07 | Grouped by region | `{ groupBy: 'region', maxHeight: 220 }` |
228
+ | 08 | Disabled with value | `{ disabled: true }` |
229
+ | 09 | Empty data | `{ noDataLabel: 'No records found' }` |
230
+ | 10 | Long list with scroll | `{ maxHeight: 120, badgeShowLimit: 3 }` |
231
+ | 11 | Local lazy loading | `{ lazyLoading: true, maxHeight: 120, badgeShowLimit: 3 }` |
232
+ | 12 | Item + chip template | `<c-badge>` and `<c-item>` custom templates |
233
+
234
+ ## Custom Templates
190
235
 
191
236
  ```html
192
- <angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings">
237
+ <angular-multiselect
238
+ [data]="dropdownList"
239
+ [(ngModel)]="selectedItems"
240
+ [settings]="dropdownSettings">
193
241
  <c-item>
194
- <ng-template let-item="item">
195
- <label style="color: #333;min-width: 150px;">{{item.itemName}}</label>
196
- <img [src]="item.image" style="width: 30px; border: 1px solid #efefef;margin-right: 20px;" />
197
- <label>Capital - {{item.capital}}</label>
198
- </ng-template>
199
- </c-item>
200
- </angular2-multiselect>
201
-
242
+ <ng-template let-item="item">
243
+ <label>{{ item.itemName }}</label>
244
+ <img [src]="item.image" style="width: 24px; margin-left: 8px;" />
245
+ </ng-template>
246
+ </c-item>
247
+ </angular-multiselect>
202
248
  ```
203
249
 
204
- ### Template - For custom html of Selected item - badge
250
+ `<angular2-multiselect>` remains available only as a legacy compatibility alias for applications migrating from the old outdated plugin. New code and all current examples should use `<angular-multiselect>`.
205
251
 
206
- ```html
207
- <angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings">
208
- <c-badge>
209
- <ng-template let-item="item">
210
- <label style="margin: 0px;">{{item.itemName}}</label>
211
- <img [src]="item.image" style="width: 16px; margin-right: 5px;" />
212
- </ng-template>
213
- </c-badge>
214
- </angular2-multiselect>
252
+ ## Forms Integration
253
+
254
+ ### Template-driven forms
215
255
 
256
+ ```html
257
+ <form #form="ngForm">
258
+ <angular-multiselect
259
+ [data]="skills"
260
+ [(ngModel)]="selectedSkills"
261
+ [settings]="settings"
262
+ name="skills"
263
+ required>
264
+ </angular-multiselect>
265
+ </form>
216
266
  ```
217
267
 
218
- ### Template Driven Forms support
268
+ ### Reactive forms
219
269
 
220
270
  ```html
221
-
222
- <form (ngSubmit)="onSubmit()" #loginForm="ngForm" style="border: 1px solid #ccc; padding: 10px;">
223
- <div class="form-group">
224
- <label for="name">Skills</label>
225
- <angular2-multiselect [data]="itemList" [(ngModel)]="formModel.skills"
226
- [settings]="settings"
227
- (onSelect)="onItemSelect($event)"
228
- (onDeSelect)="OnItemDeSelect($event)"
229
- (onSelectAll)="onSelectAll($event)"
230
- (onDeSelectAll)="onDeSelectAll($event)" name="skills">
231
- </angular2-multiselect>
232
- </div>
271
+ <form [formGroup]="userForm">
272
+ <angular-multiselect
273
+ [data]="skills"
274
+ [settings]="settings"
275
+ formControlName="skills">
276
+ </angular-multiselect>
233
277
  </form>
234
-
235
278
  ```
236
279
 
237
- ```js
280
+ ## Lazy Loading and Remote Data
238
281
 
239
- formModel = {
240
- name: '',
241
- email: 'ascasc@aa.com',
242
- skills: [{ "id": 1, "itemName": "Angular" }]
243
- };
282
+ Enable lazy loading through the settings object and respond to the scroll event from your container logic:
244
283
 
284
+ ```ts
285
+ settings = {
286
+ text: 'Select Items',
287
+ enableSearchFilter: true,
288
+ lazyLoading: true,
289
+ labelKey: 'name',
290
+ primaryKey: 'id'
291
+ };
245
292
  ```
246
293
 
247
- ### Reactive Forms support
294
+ The versioned docs include working examples for lazy loading, remote data, grouping, templating, and forms usage.
248
295
 
249
- ```html
296
+ For sticky cards, constrained containers, or dashboard layouts, keep `tagToBody: false` so the dropdown panel stays anchored to the field and does not jump across the page.
250
297
 
251
- <form [formGroup]="userForm" novalidate style="border: 1px solid #ccc; padding: 10px;">
252
- <div class="form-group">
253
- <label for="name">Skills</label>
254
- <angular2-multiselect [data]="itemList" [(ngModel)]="selectedItems"
255
- [settings]="settings"
256
- (onSelect)="onItemSelect($event)"
257
- (onDeSelect)="OnItemDeSelect($event)"
258
- (onSelectAll)="onSelectAll($event)"
259
- (onDeSelectAll)="onDeSelectAll($event)" formControlName="skills">
260
- </angular2-multiselect>
261
- </div>
262
- </form>
298
+ ## Events
263
299
 
264
- ```
300
+ The classic output contract is preserved:
265
301
 
266
- ```js
267
- userForm: FormGroup;
268
- this.userForm = this.fb.group({
269
- name: '',
270
- email: ['', Validators.required],
271
- skills: [[], Validators.required]
272
- });
302
+ - `(onSelect)`
303
+ - `(onDeSelect)`
304
+ - `(onSelectAll)`
305
+ - `(onDeSelectAll)`
306
+ - `(onAddFilterNewItem)`
273
307
 
274
- ```
308
+ ## Run Locally
275
309
 
276
- ### Settings
277
- The following list of settings are supported by the component. Configure the settings to meet your requirement.
278
-
279
- | Setting |Type | Description | Default Value |
280
- |:--- |:--- |:--- |:--- |
281
- | singleSelection | Boolean | To set the dropdown for single item selection only. | false |
282
- | text | String | Text to be show in the dropdown, when no items are selected. | 'Select' |
283
- | enableCheckAll | Boolean | Enable the option to select all items in list | false |
284
- | selectAllText | String | Text to display as the label of select all option | Select All |
285
- | unSelectAllText | String | Text to display as the label of unSelect option | UnSelect All |
286
- | enableSearchFilter | Boolean | Enable filter option for the list. | false |
287
- | maxHeight | Number | Set maximum height of the dropdown list in px. | 300 |
288
- | badgeShowLimit | Number | Limit the number of badges/items to show in the input field. If not set will show all selected. | All |
289
- | classes | String | Custom classes to the dropdown component. Classes are added to the dropdown selector tag. To add multiple classes, the value should be space separated class names.| '' |
290
- | limitSelection | Number | Limit the selection of number of items from the dropdown list. Once the limit is reached, all unselected items gets disabled. | none |
291
- | disabled | Boolean | Disable the dropdown | false |
292
- | searchPlaceholderText | String | Custom text for the search placeholder text. Default value would be 'Search' | 'Search' |
293
- | groupBy | String | Name of the field by which the list should be grouped. | none |
294
- | searchAutofocus | Boolean | Autofocus search input field| true |
295
- | labelKey | String | The property name which should be rendered as label in the dropdown| itemName |
296
-
297
-
298
- ### Callback Methods
299
- - `onSelect` - Return the selected item on selection.
300
- Example : (onSelect)="onItemSelect($event)"
301
- - `onDeSelect` - Return the un-selected item on un-selecting.
302
- Example : (onDeSelect)="OnItemDeSelect($event)"
303
- - `onSelectAll` - Return the list of all selected items.
304
- Example : (onSelectAll)="onSelectAll($event)"
305
- - `onDeSelectAll` - Returns an empty array.
306
- Example : (onDeSelectAll)="onDeSelectAll($event)"
307
- - `onOpen` - Callback method fired after the dropdown opens
308
- Example : (onOpen)="onOpen($event)"
309
- - `onClose` - Callback method, fired when the dropdown is closed
310
- Example : (onClose)="onClose($event)"
311
-
312
- ## Run locally
313
- - Clone the repository or downlod the .zip,.tar files.
314
- - Run `npm install`
315
- - Run `ng serve` for a dev server
316
- - Navigate to `http://localhost:4200/`
317
- The app will automatically reload if you change any of the source files.
310
+ ```bash
311
+ npm install
312
+ npm run docs:sync
313
+ ```
318
314
 
319
315
  ## License
320
- MIT License.
316
+
317
+ MIT
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@stackline/angular-multiselect-dropdown",
3
- "version": "2.0.6",
4
- "description": "Angular 2 compatible multiselect dropdown package for the Stackline Angular 2 release line.",
3
+ "version": "4.0.2",
4
+ "description": "Angular 4 compatible multiselect dropdown package for the Stackline Angular 4 release line.",
5
5
  "keywords": [
6
6
  "angular 2 multiselect dropdown",
7
7
  "angular 4 multiselect dropdown",
@@ -29,7 +29,7 @@
29
29
  "explorer": "source-map-explorer ./dist/index.umd.js",
30
30
  "gh-pages": "rimraf docs && npm run docs && gh-pages -d docs",
31
31
  "lint": "npm run tslint 'src/**/*.ts'",
32
- "ngcompile": "node_modules/.bin/ngc -p tsconfig-aot.json",
32
+ "ngcompile": "ngc -p tsconfig-aot.json",
33
33
  "postversion": "git push && git push --tags",
34
34
  "prebuild": "rimraf dist tmp",
35
35
  "prebuild:watch": "rimraf dist tmp",
@@ -110,9 +110,9 @@
110
110
  "main": "angular2-multiselect-dropdown.ts",
111
111
  "types": "angular2-multiselect-dropdown.ts",
112
112
  "peerDependencies": {
113
- "@angular/common": ">=2.0.0 <3.0.0",
114
- "@angular/core": ">=2.0.0 <3.0.0",
115
- "@angular/forms": ">=2.0.0 <3.0.0"
113
+ "@angular/common": ">=4.0.0 <5.0.0",
114
+ "@angular/core": ">=4.0.0 <5.0.0",
115
+ "@angular/forms": ">=4.0.0 <5.0.0"
116
116
  },
117
- "homepage": "https://alexandro.net/docs/angular/multiselect/angular-2/"
117
+ "homepage": "https://alexandro.net/docs/angular/multiselect/angular-4/"
118
118
  }
package/themes/custom.theme.css ADDED
@@ -0,0 +1,229 @@
1
+ /*
2
+ Custom theme starter for @stackline/angular-multiselect-dropdown.
3
+
4
+ Copy this file into your application and edit the values below when you want
5
+ full control over the dropdown look without touching the library source.
6
+ */
7
+ .stackline-dropdown {
8
+ --ms-primary: #3f51b5;
9
+ --ms-primary-soft: rgba(63, 81, 181, 0.12);
10
+ --ms-surface: #ffffff;
11
+ --ms-surface-soft: #f5f7fb;
12
+ --ms-surface-muted: #e8eaf6;
13
+ --ms-outline: #c5cae9;
14
+ --ms-outline-strong: #7986cb;
15
+ --ms-on-surface: #212121;
16
+ --ms-on-surface-muted: #5f6368;
17
+ --ms-chip-bg: #e8eaf6;
18
+ --ms-chip-text: #303f9f;
19
+ --ms-chip-remove: #303f9f;
20
+ --ms-shadow: 0 1px 2px rgba(33, 33, 33, 0.16), 0 12px 32px rgba(63, 81, 181, 0.12);
21
+ --ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, 0.12), 0 4px 12px rgba(33, 33, 33, 0.08);
22
+ }
23
+
24
+ .stackline-dropdown .c-btn {
25
+ min-height: 56px;
26
+ padding: 11px 84px 11px 16px;
27
+ border-radius: 18px;
28
+ background: var(--ms-surface);
29
+ border: 1px solid var(--ms-outline);
30
+ color: var(--ms-on-surface);
31
+ box-shadow: var(--ms-shadow-soft);
32
+ }
33
+
34
+ .stackline-dropdown .c-btn:hover {
35
+ border-color: var(--ms-outline-strong);
36
+ }
37
+
38
+ .stackline-dropdown .c-btn.is-active {
39
+ border-color: var(--ms-primary);
40
+ box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.14), var(--ms-shadow-soft);
41
+ }
42
+
43
+ .stackline-dropdown .c-placeholder,
44
+ .stackline-dropdown .c-single-value,
45
+ .stackline-dropdown .countplaceholder,
46
+ .stackline-dropdown .c-angle-down,
47
+ .stackline-dropdown .c-angle-up,
48
+ .stackline-dropdown .clear-all {
49
+ color: var(--ms-on-surface-muted);
50
+ }
51
+
52
+ .stackline-dropdown .c-chip-list {
53
+ gap: 8px;
54
+ }
55
+
56
+ .stackline-dropdown .c-token {
57
+ display: inline-block;
58
+ vertical-align: middle;
59
+ min-height: 32px;
60
+ max-width: 100%;
61
+ padding: 6px 30px 6px 12px;
62
+ border-radius: 999px;
63
+ background: var(--ms-chip-bg);
64
+ color: var(--ms-chip-text);
65
+ box-shadow: inset 0 0 0 1px rgba(63, 81, 181, 0.08);
66
+ line-height: 1.35;
67
+ white-space: normal;
68
+ overflow-wrap: anywhere;
69
+ }
70
+
71
+ .stackline-dropdown .c-remove {
72
+ color: inherit;
73
+ }
74
+
75
+ .stackline-dropdown .c-token .c-label {
76
+ max-width: 100%;
77
+ color: inherit;
78
+ white-space: normal;
79
+ overflow-wrap: anywhere;
80
+ }
81
+
82
+ .stackline-dropdown .list-area {
83
+ border-radius: 22px;
84
+ background: var(--ms-surface);
85
+ border: 1px solid var(--ms-outline);
86
+ box-shadow: var(--ms-shadow);
87
+ }
88
+
89
+ .stackline-dropdown .select-all,
90
+ .stackline-dropdown .filter-select-all {
91
+ background: var(--ms-surface-soft);
92
+ border-bottom: 1px solid rgba(121, 134, 203, 0.16);
93
+ }
94
+
95
+ .stackline-dropdown .list-filter {
96
+ min-height: 52px;
97
+ padding-left: 48px;
98
+ padding-right: 44px;
99
+ background: var(--ms-surface);
100
+ border-bottom: 1px solid rgba(121, 134, 203, 0.16);
101
+ }
102
+
103
+ .stackline-dropdown .list-filter .c-input,
104
+ .stackline-dropdown .list-filter input {
105
+ color: var(--ms-on-surface);
106
+ }
107
+
108
+ .stackline-dropdown .list-filter .c-input::placeholder,
109
+ .stackline-dropdown .list-filter input::placeholder,
110
+ .stackline-dropdown .list-filter .c-search,
111
+ .stackline-dropdown .list-filter .c-clear {
112
+ color: var(--ms-on-surface-muted);
113
+ }
114
+
115
+ .stackline-dropdown .btn-iceblue {
116
+ width: 100%;
117
+ min-height: 40px;
118
+ border-radius: 999px;
119
+ border: 1px solid transparent;
120
+ background: var(--ms-primary);
121
+ color: #ffffff;
122
+ font-weight: 600;
123
+ }
124
+
125
+ .stackline-dropdown .dropdown-list ul {
126
+ padding: 8px;
127
+ }
128
+
129
+ .stackline-dropdown .dropdown-list ul li {
130
+ min-height: 0;
131
+ margin: 4px;
132
+ padding: 12px 14px;
133
+ border-radius: 14px;
134
+ color: var(--ms-on-surface);
135
+ line-height: 1.35;
136
+ }
137
+
138
+ .stackline-dropdown .dropdown-list ul li:hover {
139
+ background: var(--ms-surface-soft);
140
+ }
141
+
142
+ .stackline-dropdown .selected-item {
143
+ background: var(--ms-primary-soft) !important;
144
+ color: var(--ms-primary);
145
+ }
146
+
147
+ .stackline-dropdown .grp-title {
148
+ color: var(--ms-on-surface-muted);
149
+ }
150
+
151
+ .stackline-dropdown .grp-title label,
152
+ .stackline-dropdown .list-grp h4 {
153
+ letter-spacing: 0.08em;
154
+ text-transform: uppercase;
155
+ }
156
+
157
+ .stackline-dropdown .pure-checkbox input[type=checkbox] + label {
158
+ padding-left: 32px;
159
+ color: inherit;
160
+ font-weight: 500;
161
+ }
162
+
163
+ .stackline-dropdown .pure-checkbox input[type=checkbox] + label::before {
164
+ width: 18px;
165
+ height: 18px;
166
+ margin-top: -10px;
167
+ border: 2px solid var(--ms-outline-strong);
168
+ border-radius: 6px;
169
+ background: var(--ms-surface);
170
+ }
171
+
172
+ .stackline-dropdown .pure-checkbox input[type=checkbox] + label::after {
173
+ left: 5px;
174
+ width: 7px;
175
+ height: 3px;
176
+ margin-top: -3px;
177
+ border-width: 0 0 2px 2px;
178
+ border-color: #ffffff;
179
+ }
180
+
181
+ .stackline-dropdown .pure-checkbox input[type=checkbox]:focus + label::before,
182
+ .stackline-dropdown .pure-checkbox input[type=checkbox]:hover + label::before {
183
+ border-color: var(--ms-primary);
184
+ box-shadow: 0 0 0 4px rgba(63, 81, 181, 0.12);
185
+ }
186
+
187
+ .stackline-dropdown .pure-checkbox input[type=checkbox]:checked + label::before {
188
+ border-color: var(--ms-primary);
189
+ background: var(--ms-primary);
190
+ }
191
+
192
+ .stackline-dropdown .list-message,
193
+ .stackline-dropdown .nodata-label {
194
+ color: var(--ms-on-surface-muted);
195
+ }
196
+
197
+ .stackline-dropdown .loading-icon {
198
+ width: 18px;
199
+ top: 18px;
200
+ right: 16px;
201
+ }
202
+
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 ADDED
@@ -0,0 +1,228 @@
1
+ /*
2
+ Custom theme starter for @stackline/angular-multiselect-dropdown.
3
+
4
+ Copy this file into your application and edit the values below when you want
5
+ full control over the dropdown look without touching the library source.
6
+ */
7
+
8
+ .stackline-dropdown {
9
+ --ms-primary: #3f51b5;
10
+ --ms-primary-soft: rgba(63, 81, 181, 0.12);
11
+ --ms-surface: #ffffff;
12
+ --ms-surface-soft: #f5f7fb;
13
+ --ms-surface-muted: #e8eaf6;
14
+ --ms-outline: #c5cae9;
15
+ --ms-outline-strong: #7986cb;
16
+ --ms-on-surface: #212121;
17
+ --ms-on-surface-muted: #5f6368;
18
+ --ms-chip-bg: #e8eaf6;
19
+ --ms-chip-text: #303f9f;
20
+ --ms-chip-remove: #303f9f;
21
+ --ms-shadow: 0 1px 2px rgba(33, 33, 33, 0.16), 0 12px 32px rgba(63, 81, 181, 0.12);
22
+ --ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, 0.12), 0 4px 12px rgba(33, 33, 33, 0.08);
23
+ }
24
+
25
+ .stackline-dropdown .c-btn {
26
+ min-height: 56px;
27
+ padding: 11px 84px 11px 16px;
28
+ border-radius: 18px;
29
+ background: var(--ms-surface);
30
+ border: 1px solid var(--ms-outline);
31
+ color: var(--ms-on-surface);
32
+ box-shadow: var(--ms-shadow-soft);
33
+ }
34
+
35
+ .stackline-dropdown .c-btn:hover {
36
+ border-color: var(--ms-outline-strong);
37
+ }
38
+
39
+ .stackline-dropdown .c-btn.is-active {
40
+ border-color: var(--ms-primary);
41
+ box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.14), var(--ms-shadow-soft);
42
+ }
43
+
44
+ .stackline-dropdown .c-placeholder,
45
+ .stackline-dropdown .c-single-value,
46
+ .stackline-dropdown .countplaceholder,
47
+ .stackline-dropdown .c-angle-down,
48
+ .stackline-dropdown .c-angle-up,
49
+ .stackline-dropdown .clear-all {
50
+ color: var(--ms-on-surface-muted);
51
+ }
52
+
53
+ .stackline-dropdown .c-chip-list {
54
+ gap: 8px;
55
+ }
56
+
57
+ .stackline-dropdown .c-token {
58
+ display: inline-block;
59
+ vertical-align: middle;
60
+ min-height: 32px;
61
+ max-width: 100%;
62
+ padding: 6px 30px 6px 12px;
63
+ border-radius: 999px;
64
+ background: var(--ms-chip-bg);
65
+ color: var(--ms-chip-text);
66
+ box-shadow: inset 0 0 0 1px rgba(63, 81, 181, 0.08);
67
+ line-height: 1.35;
68
+ white-space: normal;
69
+ overflow-wrap: anywhere;
70
+ }
71
+
72
+ .stackline-dropdown .c-remove {
73
+ color: inherit;
74
+ }
75
+
76
+ .stackline-dropdown .c-token .c-label {
77
+ max-width: 100%;
78
+ color: inherit;
79
+ white-space: normal;
80
+ overflow-wrap: anywhere;
81
+ }
82
+
83
+ .stackline-dropdown .list-area {
84
+ border-radius: 22px;
85
+ background: var(--ms-surface);
86
+ border: 1px solid var(--ms-outline);
87
+ box-shadow: var(--ms-shadow);
88
+ }
89
+
90
+ .stackline-dropdown .select-all,
91
+ .stackline-dropdown .filter-select-all {
92
+ background: var(--ms-surface-soft);
93
+ border-bottom: 1px solid rgba(121, 134, 203, 0.16);
94
+ }
95
+
96
+ .stackline-dropdown .list-filter {
97
+ min-height: 52px;
98
+ padding-left: 48px;
99
+ padding-right: 44px;
100
+ background: var(--ms-surface);
101
+ border-bottom: 1px solid rgba(121, 134, 203, 0.16);
102
+ }
103
+
104
+ .stackline-dropdown .list-filter .c-input,
105
+ .stackline-dropdown .list-filter input {
106
+ color: var(--ms-on-surface);
107
+ }
108
+
109
+ .stackline-dropdown .list-filter .c-input::placeholder,
110
+ .stackline-dropdown .list-filter input::placeholder,
111
+ .stackline-dropdown .list-filter .c-search,
112
+ .stackline-dropdown .list-filter .c-clear {
113
+ color: var(--ms-on-surface-muted);
114
+ }
115
+
116
+ .stackline-dropdown .btn-iceblue {
117
+ width: 100%;
118
+ min-height: 40px;
119
+ border-radius: 999px;
120
+ border: 1px solid transparent;
121
+ background: var(--ms-primary);
122
+ color: #ffffff;
123
+ font-weight: 600;
124
+ }
125
+
126
+ .stackline-dropdown .dropdown-list ul {
127
+ padding: 8px;
128
+ }
129
+
130
+ .stackline-dropdown .dropdown-list ul li {
131
+ min-height: 0;
132
+ margin: 4px;
133
+ padding: 12px 14px;
134
+ border-radius: 14px;
135
+ color: var(--ms-on-surface);
136
+ line-height: 1.35;
137
+ }
138
+
139
+ .stackline-dropdown .dropdown-list ul li:hover {
140
+ background: var(--ms-surface-soft);
141
+ }
142
+
143
+ .stackline-dropdown .selected-item {
144
+ background: var(--ms-primary-soft) !important;
145
+ color: var(--ms-primary);
146
+ }
147
+
148
+ .stackline-dropdown .grp-title {
149
+ color: var(--ms-on-surface-muted);
150
+ }
151
+
152
+ .stackline-dropdown .grp-title label,
153
+ .stackline-dropdown .list-grp h4 {
154
+ letter-spacing: 0.08em;
155
+ text-transform: uppercase;
156
+ }
157
+
158
+ .stackline-dropdown .pure-checkbox input[type="checkbox"] + label {
159
+ padding-left: 32px;
160
+ color: inherit;
161
+ font-weight: 500;
162
+ }
163
+
164
+ .stackline-dropdown .pure-checkbox input[type="checkbox"] + label::before {
165
+ width: 18px;
166
+ height: 18px;
167
+ margin-top: -10px;
168
+ border: 2px solid var(--ms-outline-strong);
169
+ border-radius: 6px;
170
+ background: var(--ms-surface);
171
+ }
172
+
173
+ .stackline-dropdown .pure-checkbox input[type="checkbox"] + label::after {
174
+ left: 5px;
175
+ width: 7px;
176
+ height: 3px;
177
+ margin-top: -3px;
178
+ border-width: 0 0 2px 2px;
179
+ border-color: #ffffff;
180
+ }
181
+
182
+ .stackline-dropdown .pure-checkbox input[type="checkbox"]:focus + label::before,
183
+ .stackline-dropdown .pure-checkbox input[type="checkbox"]:hover + label::before {
184
+ border-color: var(--ms-primary);
185
+ box-shadow: 0 0 0 4px rgba(63, 81, 181, 0.12);
186
+ }
187
+
188
+ .stackline-dropdown .pure-checkbox input[type="checkbox"]:checked + label::before {
189
+ border-color: var(--ms-primary);
190
+ background: var(--ms-primary);
191
+ }
192
+
193
+ .stackline-dropdown .list-message,
194
+ .stackline-dropdown .nodata-label {
195
+ color: var(--ms-on-surface-muted);
196
+ }
197
+
198
+ .stackline-dropdown .loading-icon {
199
+ width: 18px;
200
+ top: 18px;
201
+ right: 16px;
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 ADDED
@@ -0,0 +1,63 @@
1
+ .stackline-dropdown {
2
+ --ms-primary: #3f51b5;
3
+ --ms-primary-soft: rgba(63, 81, 181, 0.12);
4
+ --ms-surface: #ffffff;
5
+ --ms-surface-soft: #f5f7fb;
6
+ --ms-surface-muted: #e8eaf6;
7
+ --ms-outline: #c5cae9;
8
+ --ms-outline-strong: #7986cb;
9
+ --ms-on-surface: #212121;
10
+ --ms-on-surface-muted: #5f6368;
11
+ --ms-chip-bg: #e8eaf6;
12
+ --ms-chip-text: #303f9f;
13
+ --ms-chip-remove: #303f9f;
14
+ --ms-shadow: 0 1px 2px rgba(33, 33, 33, 0.16), 0 12px 32px rgba(63, 81, 181, 0.12);
15
+ --ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, 0.12), 0 4px 12px rgba(33, 33, 33, 0.08);
16
+ }
17
+
18
+ .stackline-dropdown .c-btn {
19
+ background: var(--ms-surface);
20
+ border-color: var(--ms-outline);
21
+ color: var(--ms-on-surface);
22
+ }
23
+
24
+ .stackline-dropdown .c-btn:hover {
25
+ border-color: var(--ms-outline-strong);
26
+ }
27
+
28
+ .stackline-dropdown .selected-item {
29
+ background: var(--ms-primary-soft);
30
+ }
31
+
32
+ .stackline-dropdown .btn-iceblue {
33
+ background: var(--ms-primary);
34
+ color: #ffffff;
35
+ }
36
+
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 ADDED
@@ -0,0 +1,61 @@
1
+ .stackline-dropdown {
2
+ --ms-primary: #3f51b5;
3
+ --ms-primary-soft: rgba(63, 81, 181, 0.12);
4
+ --ms-surface: #ffffff;
5
+ --ms-surface-soft: #f5f7fb;
6
+ --ms-surface-muted: #e8eaf6;
7
+ --ms-outline: #c5cae9;
8
+ --ms-outline-strong: #7986cb;
9
+ --ms-on-surface: #212121;
10
+ --ms-on-surface-muted: #5f6368;
11
+ --ms-chip-bg: #e8eaf6;
12
+ --ms-chip-text: #303f9f;
13
+ --ms-chip-remove: #303f9f;
14
+ --ms-shadow: 0 1px 2px rgba(33, 33, 33, 0.16), 0 12px 32px rgba(63, 81, 181, 0.12);
15
+ --ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, 0.12), 0 4px 12px rgba(33, 33, 33, 0.08);
16
+ }
17
+
18
+ .stackline-dropdown .c-btn {
19
+ background: var(--ms-surface);
20
+ border-color: var(--ms-outline);
21
+ color: var(--ms-on-surface);
22
+ }
23
+
24
+ .stackline-dropdown .c-btn:hover {
25
+ border-color: var(--ms-outline-strong);
26
+ }
27
+
28
+ .stackline-dropdown .selected-item {
29
+ background: var(--ms-primary-soft);
30
+ }
31
+
32
+ .stackline-dropdown .btn-iceblue {
33
+ background: var(--ms-primary);
34
+ color: #ffffff;
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
+ }