@stackline/angular-multiselect-dropdown 21.1.14 → 21.1.15

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 (2) hide show
  1. package/README.md +53 -21
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -10,9 +10,9 @@
10
10
  [![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue?style=flat-square&logo=typescript)](https://www.typescriptlang.org)
11
11
  [![GitHub stars](https://img.shields.io/github/stars/alexandroit/angular-multiselect-dropdown.svg?style=flat-square)](https://github.com/alexandroit/angular-multiselect-dropdown/stargazers)
12
12
 
13
- **[Documentation & Live Demos](https://alexandro.net/docs/angular/multiselect/)** | **[Angular 21 Demo](https://alexandro.net/docs/angular/multiselect/angular-21/)** | **[npm](https://www.npmjs.com/package/@stackline/angular-multiselect-dropdown)** | **[Issues](https://github.com/alexandroit/angular-multiselect-dropdown/issues)** | **[Repository](https://github.com/alexandroit/angular-multiselect-dropdown)**
13
+ **[Documentation & Live Demos](https://alexandro.net/docs/angular/multiselect/)** | **[Angular 21 Demo](https://alexandro.net/docs/angular/multiselect/angular-21/)** | **[StackBlitz Playground](https://stackblitz.com/github/alexandroit/stackline-angular-multiselect-angular-21?startScript=start&initialpath=%2Fbasic)** | **[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 package release:** `21.1.14` for Angular `21.x`
15
+ **Latest tested package release:** `21.1.15` for Angular `21.x`
16
16
 
17
17
  ---
18
18
 
@@ -24,9 +24,9 @@
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 package release is `21.1.14` for Angular 21.x applications.
27
+ The repository contains the full documentation matrix from Angular 2 through Angular 21. The current tested package release is `21.1.15` for Angular 21.x applications.
28
28
 
29
- The Angular 21 package is compatible with Angular 21.x and was tested in a real Angular 21.2.14 application before npm publication. The 21.1.x line adds ADA-compliant keyboard navigation, focus handling, and ARIA support for the dropdown trigger, clear-all action, selected chips, listbox, and lazy-loaded results. The 21.1.14 patch keeps that behavior, fixes responsive dropdown width handling, makes tagToBody/appendToBody use portal-style positioning so dialogs and overflow containers do not clip the open list, and keeps the open menu surface opaque.
29
+ The Angular 21 package is compatible with Angular 21.x and was tested in a real Angular 21.2.14 application before npm publication. The 21.1.x line adds ADA-compliant keyboard navigation, focus handling, and ARIA support for the dropdown trigger, clear-all action, selected chips, listbox, and lazy-loaded results. The 21.1.15 patch keeps the tested runtime behavior, documents the dedicated GitHub-backed StackBlitz playground URLs, fixes responsive dropdown width handling, makes tagToBody/appendToBody use portal-style positioning so dialogs and overflow containers do not clip the open list, and keeps the open menu surface opaque.
30
30
 
31
31
  ## Features
32
32
 
@@ -51,18 +51,19 @@ The Angular 21 package is compatible with Angular 21.x and was tested in a real
51
51
 
52
52
  1. [Rename Note](#rename-note)
53
53
  2. [Angular Version Compatibility](#angular-version-compatibility)
54
- 3. [Installation](#installation)
55
- 4. [Setup](#setup)
56
- 5. [Custom CSS and SCSS Themes](#custom-css-and-scss-themes)
57
- 6. [Basic Usage](#basic-usage)
58
- 7. [Official Angular 21 Test Matrix](#official-angular-21-test-matrix)
59
- 8. [Custom Templates](#custom-templates)
60
- 9. [Forms Integration](#forms-integration)
61
- 10. [Lazy Loading and Remote Data](#lazy-loading-and-remote-data)
62
- 11. [Dialogs and Overflow Containers](#dialogs-and-overflow-containers)
63
- 12. [Events](#events)
64
- 13. [Run Locally](#run-locally)
65
- 14. [License](#license)
54
+ 3. [StackBlitz Playground](#stackblitz-playground)
55
+ 4. [Installation](#installation)
56
+ 5. [Setup](#setup)
57
+ 6. [Custom CSS and SCSS Themes](#custom-css-and-scss-themes)
58
+ 7. [Basic Usage](#basic-usage)
59
+ 8. [Official Angular 21 Test Matrix](#official-angular-21-test-matrix)
60
+ 9. [Custom Templates](#custom-templates)
61
+ 10. [Forms Integration](#forms-integration)
62
+ 11. [Lazy Loading and Remote Data](#lazy-loading-and-remote-data)
63
+ 12. [Dialogs and Overflow Containers](#dialogs-and-overflow-containers)
64
+ 13. [Events](#events)
65
+ 14. [Run Locally](#run-locally)
66
+ 15. [License](#license)
66
67
 
67
68
  ## Rename Note
68
69
 
@@ -79,7 +80,7 @@ Peer ranges are intentionally bounded to the tested Angular major. The Angular 2
79
80
 
80
81
  | Package family | Framework family | Peer range | Tested release window | Demo link |
81
82
  | :---: | :---: | :---: | :---: | :--- |
82
- | **21.x** | **Angular 21 only** | **`>=21.0.0 <22.0.0`** | **21.1.14 -> 21.2.14** | [Angular 21 family docs](https://alexandro.net/docs/angular/multiselect/angular-21/) |
83
+ | **21.x** | **Angular 21 only** | **`>=21.0.0 <22.0.0`** | **21.1.15 -> 21.2.14** | [Angular 21 family docs](https://alexandro.net/docs/angular/multiselect/angular-21/) |
83
84
  | **20.x** | **Angular 20 only** | **`>=20.0.0 <21.0.0`** | **20.0.1 -> 20.3.21** | [Angular 20 family docs](https://alexandro.net/docs/angular/multiselect/angular-20/) |
84
85
  | **19.x** | **Angular 19 only** | **`>=19.0.0 <20.0.0`** | **19.0.1 -> 19.2.22** | [Angular 19 family docs](https://alexandro.net/docs/angular/multiselect/angular-19/) |
85
86
  | **18.x** | **Angular 18 only** | **`>=18.0.0 <19.0.0`** | **18.0.1 -> 18.2.14** | [Angular 18 family docs](https://alexandro.net/docs/angular/multiselect/angular-18/) |
@@ -99,13 +100,44 @@ Peer ranges are intentionally bounded to the tested Angular major. The Angular 2
99
100
  | **4.x** | **Angular 4 only** | **`>=4.0.0 <5.0.0`** | **4.0.2 -> 4.4.7** | [Angular 4 family docs](https://alexandro.net/docs/angular/multiselect/angular-4/) |
100
101
  | **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/) |
101
102
 
103
+ ## StackBlitz Playground
104
+
105
+ The editable StackBlitz entry is one Angular 21 playground with isolated lazy routes. Official links use `stackblitz.com/github` against the maintained GitHub repository, so they stay tied to the latest pushed source instead of creating stale forked copies for every example. Each example has its own folder, Angular module, data object, and URL.
106
+
107
+ | Example | StackBlitz |
108
+ | :--- | :--- |
109
+ | Basic example | [Open](https://stackblitz.com/github/alexandroit/stackline-angular-multiselect-angular-21?startScript=start&initialpath=%2Fbasic) |
110
+ | Single selection | [Open](https://stackblitz.com/github/alexandroit/stackline-angular-multiselect-angular-21?startScript=start&initialpath=%2Fsingle-selection) |
111
+ | Search filter | [Open](https://stackblitz.com/github/alexandroit/stackline-angular-multiselect-angular-21?startScript=start&initialpath=%2Fsearch-filter) |
112
+ | Custom Search from API | [Open](https://stackblitz.com/github/alexandroit/stackline-angular-multiselect-angular-21?startScript=start&initialpath=%2Fcustom-search-api) |
113
+ | Search Filter By Property | [Open](https://stackblitz.com/github/alexandroit/stackline-angular-multiselect-angular-21?startScript=start&initialpath=%2Fsearch-filter-by-property) |
114
+ | Search and Add New Item | [Open](https://stackblitz.com/github/alexandroit/stackline-angular-multiselect-angular-21?startScript=start&initialpath=%2Fsearch-add-new-item) |
115
+ | Group By | [Open](https://stackblitz.com/github/alexandroit/stackline-angular-multiselect-angular-21?startScript=start&initialpath=%2Fgroup-by) |
116
+ | Templating | [Open](https://stackblitz.com/github/alexandroit/stackline-angular-multiselect-angular-21?startScript=start&initialpath=%2Ftemplating) |
117
+ | Using in Forms | [Open](https://stackblitz.com/github/alexandroit/stackline-angular-multiselect-angular-21?startScript=start&initialpath=%2Ftemplate-driven-forms) |
118
+ | Using in Reactive Forms | [Open](https://stackblitz.com/github/alexandroit/stackline-angular-multiselect-angular-21?startScript=start&initialpath=%2Freactive-forms) |
119
+ | Virtual Scrolling | [Open](https://stackblitz.com/github/alexandroit/stackline-angular-multiselect-angular-21?startScript=start&initialpath=%2Fvirtual-scrolling) |
120
+ | Lazy Loading from API | [Open](https://stackblitz.com/github/alexandroit/stackline-angular-multiselect-angular-21?startScript=start&initialpath=%2Flazy-loading-api) |
121
+ | Data from remote API | [Open](https://stackblitz.com/github/alexandroit/stackline-angular-multiselect-angular-21?startScript=start&initialpath=%2Fremote-data) |
122
+ | Using in List for loop | [Open](https://stackblitz.com/github/alexandroit/stackline-angular-multiselect-angular-21?startScript=start&initialpath=%2Flist-loop) |
123
+ | Using Inside Dialog | [Open](https://stackblitz.com/github/alexandroit/stackline-angular-multiselect-angular-21?startScript=start&initialpath=%2Fdialog) |
124
+ | Multiple dropdowns | [Open](https://stackblitz.com/github/alexandroit/stackline-angular-multiselect-angular-21?startScript=start&initialpath=%2Fmultiple-dropdowns) |
125
+ | Load dynamic data | [Open](https://stackblitz.com/github/alexandroit/stackline-angular-multiselect-angular-21?startScript=start&initialpath=%2Fdynamic-data) |
126
+ | Methods | [Open](https://stackblitz.com/github/alexandroit/stackline-angular-multiselect-angular-21?startScript=start&initialpath=%2Fmethods) |
127
+ | Events | [Open](https://stackblitz.com/github/alexandroit/stackline-angular-multiselect-angular-21?startScript=start&initialpath=%2Fevents) |
128
+ | Disabled mode | [Open](https://stackblitz.com/github/alexandroit/stackline-angular-multiselect-angular-21?startScript=start&initialpath=%2Fdisabled) |
129
+ | Limit selection | [Open](https://stackblitz.com/github/alexandroit/stackline-angular-multiselect-angular-21?startScript=start&initialpath=%2Flimit-selection) |
130
+ | Limit badges | [Open](https://stackblitz.com/github/alexandroit/stackline-angular-multiselect-angular-21?startScript=start&initialpath=%2Flimit-badges) |
131
+ | Custom placeholder | [Open](https://stackblitz.com/github/alexandroit/stackline-angular-multiselect-angular-21?startScript=start&initialpath=%2Fcustom-placeholder) |
132
+ | Styling | [Open](https://stackblitz.com/github/alexandroit/stackline-angular-multiselect-angular-21?startScript=start&initialpath=%2Fstyling) |
133
+
102
134
  ## Installation
103
135
 
104
136
  ```bash
105
- npm install @stackline/angular-multiselect-dropdown@21.1.14 --save-exact
137
+ npm install @stackline/angular-multiselect-dropdown@21.1.15 --save-exact
106
138
  ```
107
139
 
108
- Install `21.1.14` for Angular 21.x applications. This line keeps the tested Angular 21 behavior, makes `<angular-multiselect>` the documented standard selector, keeps `<angular2-multiselect>` only as a legacy compatibility alias, adds the ADA-compliant keyboard/ARIA accessibility patch, fixes responsive dropdown width handling, and keeps dropdown surfaces opaque in clipped containers.
140
+ Install `21.1.15` for Angular 21.x applications. This line keeps the tested Angular 21 behavior, makes `<angular-multiselect>` the documented standard selector, keeps `<angular2-multiselect>` only as a legacy compatibility alias, adds the ADA-compliant keyboard/ARIA accessibility patch, fixes responsive dropdown width handling, and keeps dropdown surfaces opaque in clipped containers.
109
141
 
110
142
  ## Setup
111
143
 
@@ -201,7 +233,7 @@ dropdownSettings = {
201
233
 
202
234
  ## Official Angular 21 Test Matrix
203
235
 
204
- The published Angular 21 release was tested in a real Angular `21.2.14` application with `@stackline/angular-multiselect-dropdown@21.1.14`. The docs now use the same examples from that test app, including the ADA-compliant keyboard, focus, ARIA behavior, responsive dropdown width handling, opaque menu surfaces, and dialog-safe positioning added in this release line.
236
+ The published Angular 21 release was tested in a real Angular `21.2.14` application with `@stackline/angular-multiselect-dropdown@21.1.15`. The docs now use the same examples from that test app, including the ADA-compliant keyboard, focus, ARIA behavior, responsive dropdown width handling, opaque menu surfaces, and dialog-safe positioning added in this release line.
205
237
 
206
238
  Switch between skins through the settings object:
207
239
 
@@ -313,7 +345,7 @@ settings = {
313
345
  };
314
346
  ```
315
347
 
316
- In `21.1.14`, `tagToBody: true` renders the open panel outside clipping containers, keeps it aligned to the original trigger, keeps the menu surface opaque, recalculates position on scroll and resize, and cleans it up on close or destroy. `appendToBody: true` is also accepted as an alias for teams that prefer that name.
348
+ In `21.1.15`, `tagToBody: true` renders the open panel outside clipping containers, keeps it aligned to the original trigger, keeps the menu surface opaque, recalculates position on scroll and resize, and cleans it up on close or destroy. `appendToBody: true` is also accepted as an alias for teams that prefer that name.
317
349
 
318
350
  ## Events
319
351
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "../../../node_modules/ng-packagr/package.schema.json",
3
3
  "name": "@stackline/angular-multiselect-dropdown",
4
- "version": "21.1.14",
4
+ "version": "21.1.15",
5
5
  "license": "MIT",
6
6
  "author": "Pradeep Terli (Original), Alexandro Paixao Marques (Maintainer)",
7
7
  "description": "Angular multiselect dropdown for Angular 21 with maintained release lines, ADA-compliant keyboard/ARIA accessibility, dialog-safe body overlays, Stackline skins, search, grouping, templates, and forms support.",