ng-select2-component 15.4.0 → 17.0.0

package/AUTHORS.md

@@ -4,14 +4,14 @@ ng-select2 is written by York Yao with contributions from:
 
 Main contributors:
 
--   Célian Veyssière (aka Zéfling)
--   Baptiste (aka BatMen)
+- Célian Veyssière (aka Zéfling)
+- Baptiste (aka BatMen)
 
 Thanks for your contributions:
 
--   ADesbois
--   mbelin-hvs
--   Varun Nambiar
--   Khanh Ngo
--   Johan Compagner
--   majora2007
+- ADesbois
+- mbelin-hvs
+- Varun Nambiar
+- Khanh Ngo
+- Johan Compagner
+- majora2007

package/CHANGELOG.md

@@ -1,6 +1,56 @@
 # Changelog of ng-select2
 
-## V15.4.0 (2024-12-18)
+## V17.0.0 (2024-12-23)
+
+### Changes
+
+- Rewrite the component to use all the advances of Angular:
+    - Switch to stand-alone component mode
+    - Use of signals for inputs & queries
+    - Removed a lot of setTimeout
+    - Improved the overlay with the CDK
+    - Fix autocreate with single option
+    - Add resettable with multiple mode
+    - Fix inconsistencies in the code
+    - Much stricter code rewriting
+- Accessibility (from 15.4.0)
+    - Added/modified accessibility attributes
+    - New inputs for accessibility
+        - `title`
+        - `ariaLabelledBy`
+        - `ariaDescribedBy`
+        - `ariaInvalid`
+        - `ariaResetButtonDescription`
+    - Improved focus/blur
+    - Fixed readonly
+    - Added reset button to tab navigation
+    - Keyboard interactions
+        - Update
+            - `Escape`: Improved focus after closing popup.
+            - `Tab`: Navigates correctly when no searchbox.
+        - New
+            - `Home`: Opens popup. Goes to first option.
+            - `End`: Opens popup. Goes to last option.
+            - `PageUp`: Opens popup. Goes up 10 options.
+            - `PageDown`: Opens popup. Goes down 10 options.
+            - `Space`: Opens popup. Selects option when there is no search input.
+            - `Alt`+`Down`, `Alt`+`Up`: Opens/closes popup.
+
+### Demo
+
+- New demo
+
+---
+
+## V16.0.0 (2024-11-27)
+
+### Breaking Changes
+
+- minimum required support has been upgraded to Angular `19.0`.
+
+---
+
+## V15.4.0 (on a branch) (2024-12-18)
 
 ### Changes
 
@@ -80,6 +130,8 @@
 
 - manage blur event (overlay, click on option)
 
+---
+
 ## V14.0.1 (2024-03-04)
 
 - add `borderless` style
@@ -90,7 +142,18 @@
 
 - minimum required support has been upgraded to Angular `17.0`.
 
-## V13.0.10 (2024-03-04)
+---
+
+## V13.0.12 (on a branch) (2024-07-24)
+
+- Fix reset with multiple #69
+- Rewrite update event #69
+
+## V13.0.11 (on a branch) (2024-06-14)
+
+- manage blur event (overlay, click on option)
+
+## V13.0.10 (on a branch) (2024-03-04)
 
 - add `borderless` style
 
@@ -154,6 +217,8 @@
 - fix template with `multiple`
 - refacto with `numberAttribute` & `booleanAttribute` (Angular `16.1`)
 
+---
+
 ## V12.1.0 (2023-07-05)
 
 ### Changes
@@ -195,6 +260,8 @@
 - fix class `select2-container--focus`
 - add item keyboard remove (multiple)
 
+---
+
 ## V10.0.0 (2022-07-27)
 
 ### Breaking Changes

package/README.md

@@ -12,25 +12,30 @@ npm i ng-select2-component --save
 
 ## Requirements
 
--   peerDependencies:
-
-    -   `angular` 18.0.0 and more
-    -   `angular/cdk` 18.0.0 and more
-
--   dependencies (include):
-    -   `ngx-infinite-scroll` 18.0.0 and more
-
-> **Note:**<br>
->
-> -   For `angular` 7, 8 and 9 (View Engine): use version `7.3.1`.
-> -   For `angular` 10, 11 and 12 (View Engine): use version `8.1.0`.
-> -   For `angular` 13 (Ivy): use version `9.0.0`.
-> -   For `angular` 14 (Ivy): use version `10.0.0`.
-> -   For `angular` 15 (Ivy): use version `11.1.0`.
-> -   For `angular` 16 (Ivy): use version `12.1.0`.
-> -   For `angular` 16.1 (Ivy): use version `13.0.10`.
-> -   For `angular` 17 (Ivy): use version `14.0.1`.
-> -   For `angular` 18 and more (Ivy): use version `15.0.1`.
+- peerDependencies:
+
+    - `angular` 19.0.0 and more
+    - `angular/cdk` 19.0.0 and more
+
+- dependencies (include):
+
+    - `ngx-infinite-scroll` 19.0.0 and more
+
+### Notes
+
+| Version   | For **Angular** | Notes             |
+| --------- | --------------- | ----------------- |
+| `7.3.1`   | 7, 8 and 9      | View Engine       |
+| `8.1.0`   | 10, 11 and 12   | View Engine       |
+| `9.0.0`   | 13              | Ivy               |
+| `10.0.0`  | 14              | Ivy               |
+| `11.1.0`  | 15              | Ivy               |
+| `12.1.0`  | 16              | Ivy               |
+| `13.0.12` | 16.1            | Ivy               |
+| `14.0.1`  | 17              | Ivy               |
+| `15.3.0`  | 18              | Ivy               |
+| `16.0.0`  | 19              | Ivy / Module      |
+| `17.0.0`  | 19 and more     | Ivy / Stand-alone |
 
 ## Demo
 
@@ -38,34 +43,37 @@ npm i ng-select2-component --save
 
 ## Features
 
--   select one
--   options or groups (list or grid)
--   scroll
--   local search
--   select by keyboard
--   disabled option
--   disabled component
--   hide search box
--   placeholder
--   multiple selection
--   add items not found in multiple
--   material style
--   form binding
--   templating
+- select one
+- options or groups (list or grid)
+- scroll
+- local search
+- select by keyboard
+- disabled option
+- disabled component
+- hide search box
+- placeholder
+- multiple selection
+- add items not found in multiple
+- material style
+- form binding
+- templating
 
 ## Usage
 
 ### example
 
 ```ts
-import { Select2Module } from 'ng-select2-component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { Select2, Select2Hint, Select2Label } from 'ng-select2-component';
 
-@NgModule({
-    imports: [BrowserModule, FormsModule, Select2Module],
-    declarations: [MainComponent],
-    bootstrap: [MainComponent],
+@Component({
+    selector: 'my-component',
+    templateUrl: './my-component.component.html',
+    styleUrls: ['./my-component.component.scss'],
+    imports: [FormsModule, ReactiveFormsModule, Select2, Select2Hint, Select2Label],
 })
-class MainModule {}
+class MyComponent {}
 ```
 
 ```html
@@ -107,7 +115,7 @@ class MainModule {}
 | `selectionNoWrap`                                                         | `boolean`                                                                                                                      |          | `false`              | Force selection on one line                                                                                             |                                      |
 | `showSelectAll`                                                           | `boolean`                                                                                                                      |          | `false`              | Add an option to select all options                                                                                     | with `multiple`                      |
 | `selectAllText`                                                           | `string`                                                                                                                       |          | `'Select all'`       | Text when all options as not selected                                                                                   | with `multiple`                      |
-| `removeAllText`                                                           | `string`                                                                                                                       |          | `'Remove all'`       | Text when all options as selected                                                                                        | with `multiple`                      |
+| `removeAllText`                                                           | `string`                                                                                                                       |          | `'Remove all'`       | Text when all options as selected                                                                                       | with `multiple`                      |
 | `editPattern`                                                             | `(str: string) => string`                                                                                                      |          |                      | use it for change the pattern of the filter search                                                                      |                                      |
 | `ngModel`<br>`id`<br>`required`<br>`disabled`<br>`readonly`<br>`tabIndex` |                                                                                                                                |          |                      | just like a `select` control                                                                                            |                                      |
 | `(update)`                                                                | `(event: `[`Select2UpdateEvent`](#select2-data-structure)`) => void`                                                           | event    |                      | triggered when user select an option                                                                                    |                                      |
@@ -287,37 +295,37 @@ const data: Select2Data = [
 
 #### Possible object
 
--   `TemplateRef`
--   `{template: TemplateRef}`
--   `{option?: TemplateRef, group?: TemplateRef}`
--   `{templateId1: TemplateRef, ...}`
+- `TemplateRef`
+- `{template: TemplateRef}`
+- `{option?: TemplateRef, group?: TemplateRef}`
+- `{templateId1: TemplateRef, ...}`
 
 In addition to the rendering templates of options and groups, in addition to going through the `templateSelection` attribute, it is possible to define that of the selection :
 
--   `{templateSelection: TemplateRef}`
--   `{optionSelection: TemplateRef}`
+- `{templateSelection: TemplateRef}`
+- `{optionSelection: TemplateRef}`
 
 #### Priority order
 
 For group or option:
 
--   `'id'` (from item data `templateId`)
--   `'group'` or `'option'`
--   `'template'`
--   `TemplateRef` (from html attribute `templates`)
--   Default render
+- `'id'` (from item data `templateId`)
+- `'group'` or `'option'`
+- `'template'`
+- `TemplateRef` (from html attribute `templates`)
+- Default render
 
 For the selection:
 
--   `'id'` (from item data `templateSelectionId`)
--   `'optionSelection'`
--   `'templateSelection'`
--   `TemplateRef` (from html attribute `templateSelection`)
--   `'id'` (from item data `templateId`)
--   `'option'`
--   `'template'`
--   `TemplateRef` (from html attribute `templates`)
--   Default render
+- `'id'` (from item data `templateSelectionId`)
+- `'optionSelection'`
+- `'templateSelection'`
+- `TemplateRef` (from html attribute `templateSelection`)
+- `'id'` (from item data `templateId`)
+- `'option'`
+- `'template'`
+- `TemplateRef` (from html attribute `templates`)
+- Default render
 
 ### Overlay