@stackline/angular-multiselect-dropdown 2.0.3 → 2.0.4

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 (3) hide show
  1. package/README.md +222 -207
  2. package/package.json +18 -6
  3. package/npm-debug.log.3264368948 +0 -0
package/README.md CHANGED
@@ -1,264 +1,279 @@
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 2](https://img.shields.io/badge/Angular-2.x-red?style=flat-square&logo=angular)](https://alexandro.net/docs/angular/multiselect/angular-2/)
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 2 Demo](https://alexandro.net/docs/angular/multiselect/angular-2/)** | **[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.3`
10
- - Angular peer range: `>=2.0.0 <3.0.0`
11
- - Tested Angular runtime: `2.4.10`
15
+ **Latest tested npm release:** `2.0.4` for Angular `2.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.3`
27
+ The repository contains the full documentation matrix from Angular 2 through Angular 21. The current public npm release is `2.0.4` for Angular 2.x applications.
35
28
 
36
- - Once installed import `AngularMultiSelectModule` from the installed package into your module as follows:
29
+ The Angular 2 package is compatible with Angular 2.x and was tested in a real Angular 2.4.10 application before publication.
37
30
 
38
- ### Theme option
31
+ ## Features
39
32
 
40
- The package ships two built-in skins:
33
+ | Feature | Supported |
34
+ | :--- | :---: |
35
+ | Angular 2 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 selector `<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.
49
+ ## Table of Contents
44
50
 
45
- ```js
46
- this.dropdownSettings = {
47
- text: 'Select Countries',
48
- enableSearchFilter: true,
49
- theme: 'material'
50
- };
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. [Custom Templates](#custom-templates)
58
+ 8. [Forms Integration](#forms-integration)
59
+ 9. [Lazy Loading and Remote Data](#lazy-loading-and-remote-data)
60
+ 10. [Events](#events)
61
+ 11. [Run Locally](#run-locally)
62
+ 12. [License](#license)
63
+
64
+ ## Rename Note
65
+
66
+ - new package: `@stackline/angular-multiselect-dropdown`
67
+ - previous package: `@stackline/angular2-multiselect-dropdown`
68
+ - primary selector: `<angular-multiselect>`
69
+ - legacy alias still accepted: `<angular2-multiselect>`
70
+
71
+ ## Angular Version Compatibility
72
+
73
+ 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.
74
+
75
+ | Package family | Framework family | Peer range | Tested release window | Demo link |
76
+ | :---: | :---: | :---: | :---: | :--- |
77
+ | **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/) |
78
+ | **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/) |
79
+ | **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/) |
80
+ | **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/) |
81
+ | **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/) |
82
+ | **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/) |
83
+ | **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/) |
84
+ | **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/) |
85
+ | **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/) |
86
+ | **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/) |
87
+ | **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/) |
88
+ | **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/) |
89
+ | **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/) |
90
+ | **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/) |
91
+ | **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/) |
92
+ | **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/) |
93
+ | **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/) |
94
+ | **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/) |
95
+ | **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/) |
96
+
97
+
98
+ ## Installation
99
+
100
+ ```bash
101
+ npm install @stackline/angular-multiselect-dropdown@2.0.4
51
102
  ```
52
103
 
53
- ### Usage
54
- Import `AngularMultiSelectModule` into `NgModule` in `app.module.ts`
55
- ```js
56
- import { AngularMultiSelectModule } from '@stackline/angular-multiselect-dropdown/angular2-multiselect-dropdown';
104
+ Install `2.0.4` for Angular 2.x applications. This patch keeps the tested Angular 2 behavior and updates the published README, package metadata, and documentation links.
105
+
106
+ ## Setup
107
+
108
+ ### 1. Import the module
109
+
110
+ ```ts
111
+ import { NgModule } from '@angular/core';
112
+ import { BrowserModule } from '@angular/platform-browser';
113
+ import { FormsModule } from '@angular/forms';
114
+ import { AngularMultiSelectModule } from '@stackline/angular-multiselect-dropdown';
57
115
 
58
116
  @NgModule({
59
- // ...
60
117
  imports: [
61
- AngularMultiSelectModule,
118
+ BrowserModule,
119
+ FormsModule,
120
+ AngularMultiSelectModule
62
121
  ]
63
- // ...
64
122
  })
123
+ export class AppModule {}
124
+ ```
65
125
 
126
+ ### 2. Add the default theme
127
+
128
+ ```json
129
+ "styles": [
130
+ "node_modules/@stackline/angular-multiselect-dropdown/themes/default.theme.css"
131
+ ]
66
132
  ```
67
133
 
68
- Declare the component data variables and options in your component where you want to consume the dropdown component.
69
-
70
- ```js
71
-
72
- import { Component, OnInit } from '@angular/core';
73
-
74
- export class AppComponent implements OnInit {
75
- dropdownList = [];
76
- selectedItems = [];
77
- dropdownSettings = {};
78
- ngOnInit(){
79
- this.dropdownList = [
80
- {"id":1,"itemName":"India"},
81
- {"id":2,"itemName":"Singapore"},
82
- {"id":3,"itemName":"Australia"},
83
- {"id":4,"itemName":"Canada"},
84
- {"id":5,"itemName":"South Korea"},
85
- {"id":6,"itemName":"Germany"},
86
- {"id":7,"itemName":"France"},
87
- {"id":8,"itemName":"Russia"},
88
- {"id":9,"itemName":"Italy"},
89
- {"id":10,"itemName":"Sweden"}
90
- ];
91
- this.selectedItems = [
92
- {"id":2,"itemName":"Singapore"},
93
- {"id":3,"itemName":"Australia"},
94
- {"id":4,"itemName":"Canada"},
95
- {"id":5,"itemName":"South Korea"}
96
- ];
97
- this.dropdownSettings = {
98
- singleSelection: false,
99
- text:"Select Countries",
100
- selectAllText:'Select All',
101
- unSelectAllText:'UnSelect All',
102
- enableSearchFilter: true,
103
- classes:"myclass custom-class"
104
- };
105
- }
106
- onItemSelect(item:any){
107
- console.log(item);
108
- console.log(this.selectedItems);
109
- }
110
- OnItemDeSelect(item:any){
111
- console.log(item);
112
- console.log(this.selectedItems);
113
- }
114
- onSelectAll(items: any){
115
- console.log(items);
116
- }
117
- onDeSelectAll(items: any){
118
- console.log(items);
119
- }
120
- }
134
+ ## Custom CSS and SCSS Themes
135
+
136
+ The package also ships a full custom starter theme in both formats:
137
+
138
+ - `node_modules/@stackline/angular-multiselect-dropdown/themes/custom.theme.scss`
139
+ - `node_modules/@stackline/angular-multiselect-dropdown/themes/custom.theme.css`
140
+
141
+ Use the `scss` file when you want to take over the component styles completely and keep the theme in your app source:
142
+
143
+ ```json
144
+ "styles": [
145
+ "src/styles.scss",
146
+ "src/styles/multiselect-dropdown.theme.scss"
147
+ ]
121
148
  ```
122
149
 
123
- Add the following component tag in you template
124
- ```html
125
- <angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems"
126
- [settings]="dropdownSettings"
127
- (onSelect)="onItemSelect($event)"
128
- (onDeSelect)="OnItemDeSelect($event)"
129
- (onSelectAll)="onSelectAll($event)"
130
- (onDeSelectAll)="onDeSelectAll($event)"></angular2-multiselect>
150
+ Start `src/styles/multiselect-dropdown.theme.scss` from the package file above and edit the selectors and tokens freely.
151
+
152
+ Use the `css` file when you want a plain compiled starter that can be copied and adjusted without a Sass pipeline.
153
+
154
+ ## Basic Usage
155
+
156
+ ```ts
157
+ dropdownList = [
158
+ { id: 1, itemName: 'India' },
159
+ { id: 2, itemName: 'Singapore' },
160
+ { id: 3, itemName: 'Australia' },
161
+ { id: 4, itemName: 'Canada' }
162
+ ];
163
+
164
+ selectedItems = [{ id: 2, itemName: 'Singapore' }];
165
+
166
+ dropdownSettings = {
167
+ singleSelection: false,
168
+ text: 'Select Countries',
169
+ selectAllText: 'Select All',
170
+ unSelectAllText: 'UnSelect All',
171
+ enableSearchFilter: true,
172
+ tagToBody: false
173
+ };
174
+ ```
131
175
 
176
+ ```html
177
+ <angular-multiselect
178
+ [data]="dropdownList"
179
+ [(ngModel)]="selectedItems"
180
+ [settings]="dropdownSettings"
181
+ (onSelect)="onItemSelect($event)"
182
+ (onDeSelect)="onItemDeSelect($event)"
183
+ (onSelectAll)="onSelectAll($event)"
184
+ (onDeSelectAll)="onDeSelectAll($event)">
185
+ </angular-multiselect>
132
186
  ```
133
- ### Template - For custom html of menu item
187
+
188
+ ## Custom Templates
134
189
 
135
190
  ```html
136
- <angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings">
191
+ <angular-multiselect
192
+ [data]="dropdownList"
193
+ [(ngModel)]="selectedItems"
194
+ [settings]="dropdownSettings">
137
195
  <c-item>
138
- <ng-template let-item="item">
139
- <label style="color: #333;min-width: 150px;">{{item.itemName}}</label>
140
- <img [src]="item.image" style="width: 30px; border: 1px solid #efefef;margin-right: 20px;" />
141
- <label>Capital - {{item.capital}}</label>
142
- </ng-template>
143
- </c-item>
144
- </angular2-multiselect>
145
-
196
+ <ng-template let-item="item">
197
+ <label>{{ item.itemName }}</label>
198
+ <img [src]="item.image" style="width: 24px; margin-left: 8px;" />
199
+ </ng-template>
200
+ </c-item>
201
+ </angular-multiselect>
146
202
  ```
147
203
 
148
- ### Template - For custom html of Selected item - badge
204
+ The same template contract also works with the legacy selector:
149
205
 
150
206
  ```html
151
- <angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings">
152
- <c-badge>
153
- <ng-template let-item="item">
154
- <label style="margin: 0px;">{{item.itemName}}</label>
155
- <img [src]="item.image" style="width: 16px; margin-right: 5px;" />
156
- </ng-template>
157
- </c-badge>
158
- </angular2-multiselect>
159
-
207
+ <angular2-multiselect></angular2-multiselect>
160
208
  ```
161
209
 
162
- ### Template Driven Forms support
210
+ ## Forms Integration
163
211
 
164
- ```html
212
+ ### Template-driven forms
165
213
 
166
- <form (ngSubmit)="onSubmit()" #loginForm="ngForm" style="border: 1px solid #ccc; padding: 10px;">
167
- <div class="form-group">
168
- <label for="name">Skills</label>
169
- <angular2-multiselect [data]="itemList" [(ngModel)]="formModel.skills"
170
- [settings]="settings"
171
- (onSelect)="onItemSelect($event)"
172
- (onDeSelect)="OnItemDeSelect($event)"
173
- (onSelectAll)="onSelectAll($event)"
174
- (onDeSelectAll)="onDeSelectAll($event)" name="skills">
175
- </angular2-multiselect>
176
- </div>
214
+ ```html
215
+ <form #form="ngForm">
216
+ <angular-multiselect
217
+ [data]="skills"
218
+ [(ngModel)]="selectedSkills"
219
+ [settings]="settings"
220
+ name="skills"
221
+ required>
222
+ </angular-multiselect>
177
223
  </form>
224
+ ```
225
+
226
+ ### Reactive forms
178
227
 
228
+ ```html
229
+ <form [formGroup]="userForm">
230
+ <angular-multiselect
231
+ [data]="skills"
232
+ [settings]="settings"
233
+ formControlName="skills">
234
+ </angular-multiselect>
235
+ </form>
179
236
  ```
180
237
 
181
- ```js
238
+ ## Lazy Loading and Remote Data
182
239
 
183
- formModel = {
184
- name: '',
185
- email: 'ascasc@aa.com',
186
- skills: [{ "id": 1, "itemName": "Angular" }]
187
- };
240
+ Enable lazy loading through the settings object and respond to the scroll event from your container logic:
188
241
 
242
+ ```ts
243
+ settings = {
244
+ text: 'Select Items',
245
+ enableSearchFilter: true,
246
+ lazyLoading: true,
247
+ labelKey: 'name',
248
+ primaryKey: 'id'
249
+ };
189
250
  ```
190
251
 
191
- ### Reactive Forms support
252
+ The versioned docs include working examples for lazy loading, remote data, grouping, templating, and forms usage.
192
253
 
193
- ```html
254
+ 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.
194
255
 
195
- <form [formGroup]="userForm" novalidate style="border: 1px solid #ccc; padding: 10px;">
196
- <div class="form-group">
197
- <label for="name">Skills</label>
198
- <angular2-multiselect [data]="itemList" [(ngModel)]="selectedItems"
199
- [settings]="settings"
200
- (onSelect)="onItemSelect($event)"
201
- (onDeSelect)="OnItemDeSelect($event)"
202
- (onSelectAll)="onSelectAll($event)"
203
- (onDeSelectAll)="onDeSelectAll($event)" formControlName="skills">
204
- </angular2-multiselect>
205
- </div>
206
- </form>
256
+ ## Events
207
257
 
208
- ```
258
+ The classic output contract is preserved:
209
259
 
210
- ```js
211
- userForm: FormGroup;
212
- this.userForm = this.fb.group({
213
- name: '',
214
- email: ['', Validators.required],
215
- skills: [[], Validators.required]
216
- });
260
+ - `(onSelect)`
261
+ - `(onDeSelect)`
262
+ - `(onSelectAll)`
263
+ - `(onDeSelectAll)`
264
+ - `(onAddFilterNewItem)`
217
265
 
218
- ```
266
+ ## Run Locally
219
267
 
220
- ### Settings
221
- The following list of settings are supported by the component. Configure the settings to meet your requirement.
222
-
223
- | Setting |Type | Description | Default Value |
224
- |:--- |:--- |:--- |:--- |
225
- | singleSelection | Boolean | To set the dropdown for single item selection only. | false |
226
- | text | String | Text to be show in the dropdown, when no items are selected. | 'Select' |
227
- | enableCheckAll | Boolean | Enable the option to select all items in list | false |
228
- | selectAllText | String | Text to display as the label of select all option | Select All |
229
- | unSelectAllText | String | Text to display as the label of unSelect option | UnSelect All |
230
- | enableSearchFilter | Boolean | Enable filter option for the list. | false |
231
- | maxHeight | Number | Set maximum height of the dropdown list in px. | 300 |
232
- | badgeShowLimit | Number | Limit the number of badges/items to show in the input field. If not set will show all selected. | All |
233
- | 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.| '' |
234
- | limitSelection | Number | Limit the selection of number of items from the dropdown list. Once the limit is reached, all unselected items gets disabled. | none |
235
- | disabled | Boolean | Disable the dropdown | false |
236
- | searchPlaceholderText | String | Custom text for the search placeholder text. Default value would be 'Search' | 'Search' |
237
- | groupBy | String | Name of the field by which the list should be grouped. | none |
238
- | searchAutofocus | Boolean | Autofocus search input field| true |
239
- | labelKey | String | The property name which should be rendered as label in the dropdown| itemName |
240
-
241
-
242
- ### Callback Methods
243
- - `onSelect` - Return the selected item on selection.
244
- Example : (onSelect)="onItemSelect($event)"
245
- - `onDeSelect` - Return the un-selected item on un-selecting.
246
- Example : (onDeSelect)="OnItemDeSelect($event)"
247
- - `onSelectAll` - Return the list of all selected items.
248
- Example : (onSelectAll)="onSelectAll($event)"
249
- - `onDeSelectAll` - Returns an empty array.
250
- Example : (onDeSelectAll)="onDeSelectAll($event)"
251
- - `onOpen` - Callback method fired after the dropdown opens
252
- Example : (onOpen)="onOpen($event)"
253
- - `onClose` - Callback method, fired when the dropdown is closed
254
- Example : (onClose)="onClose($event)"
255
-
256
- ## Run locally
257
- - Clone the repository or downlod the .zip,.tar files.
258
- - Run `npm install`
259
- - Run `ng serve` for a dev server
260
- - Navigate to `http://localhost:4200/`
261
- The app will automatically reload if you change any of the source files.
268
+ ```bash
269
+ npm install
270
+ npm run docs:sync
271
+ npm run build-package
272
+ cd docs-src/angular-21
273
+ npm install --ignore-scripts
274
+ npm run build
275
+ ```
262
276
 
263
277
  ## License
264
- MIT License.
278
+
279
+ MIT
package/package.json CHANGED
@@ -1,12 +1,24 @@
1
1
  {
2
2
  "name": "@stackline/angular-multiselect-dropdown",
3
- "version": "2.0.3",
4
- "description": "Angular 2 compatible multiselect dropdown package for the Stackline Angular 2 release line.",
3
+ "version": "2.0.4",
4
+ "description": "Angular 2 compatible multiselect dropdown for the Stackline maintained Angular release line.",
5
5
  "keywords": [
6
- "angular 2 multiselect dropdown",
7
- "angular 4 multiselect dropdown",
6
+ "angular",
7
+ "angular2",
8
+ "angular 2",
9
+ "angular-multiselect-dropdown",
8
10
  "angular multiselect",
9
- "angular dropdown"
11
+ "angular dropdown",
12
+ "multiselect",
13
+ "multiselect-dropdown",
14
+ "dropdown",
15
+ "select",
16
+ "search-filter",
17
+ "group-by",
18
+ "custom-templates",
19
+ "template-driven-forms",
20
+ "reactive-forms",
21
+ "stackline"
10
22
  ],
11
23
  "license": "MIT",
12
24
  "angular-cli": {},
@@ -114,5 +126,5 @@
114
126
  "@angular/core": ">=2.0.0 <3.0.0",
115
127
  "@angular/forms": ">=2.0.0 <3.0.0"
116
128
  },
117
- "homepage": "https://github.com/alexandroit/angular-multiselect-dropdown"
129
+ "homepage": "https://alexandro.net/docs/angular/multiselect/"
118
130
  }
package/npm-debug.log.3264368948 DELETED
File without changes