ng-select2-component 10.0.0 → 11.1.0
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.
- package/CHANGELOG.md +27 -2
- package/README.md +52 -45
- package/esm2020/lib/select2-hint.component.mjs +3 -3
- package/esm2020/lib/select2-label.component.mjs +3 -3
- package/esm2020/lib/select2.component.mjs +150 -121
- package/esm2020/lib/select2.module.mjs +4 -4
- package/fesm2015/ng-select2-component.mjs +161 -130
- package/fesm2015/ng-select2-component.mjs.map +1 -1
- package/fesm2020/ng-select2-component.mjs +159 -130
- package/fesm2020/ng-select2-component.mjs.map +1 -1
- package/lib/select2-hint.component.d.ts +1 -1
- package/lib/select2-interfaces.d.ts +3 -3
- package/lib/select2-interfaces.d.ts.map +1 -1
- package/lib/select2-label.component.d.ts +1 -1
- package/lib/select2.component.d.ts +18 -7
- package/lib/select2.component.d.ts.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,13 +1,38 @@
|
|
|
1
1
|
# Changelog of ng-select2
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## V11.1.0 (2023-04-15)
|
|
4
|
+
|
|
5
|
+
### Breaking Changes
|
|
6
|
+
|
|
7
|
+
- By default the template is now used in the selection. To revert to previous behavior use `noLabelTemplate`.
|
|
8
|
+
- Code removal for IE11 and Edge
|
|
9
|
+
|
|
10
|
+
### Changes
|
|
11
|
+
|
|
12
|
+
- add `noLabelTemplate`: do not use the template in the selection, stay in text mode.
|
|
13
|
+
- add `autoCreate`: gives the possibility to add elements not present in the list. #48
|
|
14
|
+
- add CSS variables : `--select2-single-height`, `--select2-multiple-height`
|
|
15
|
+
|
|
16
|
+
## V11.0.0 (2023-04-06)
|
|
17
|
+
|
|
18
|
+
### Breaking Changes
|
|
19
|
+
|
|
20
|
+
- minimum required support has been upgraded to Angular `15.0`.
|
|
21
|
+
- update ngx-infinite-scroll to `15.0.0`.
|
|
22
|
+
|
|
23
|
+
### Changes
|
|
24
|
+
|
|
25
|
+
- fix class `select2-container--focus`
|
|
26
|
+
- add item keyboard remove (multiple)
|
|
27
|
+
|
|
28
|
+
## V10.0.0 (2022-07-27)
|
|
4
29
|
|
|
5
30
|
### Breaking Changes
|
|
6
31
|
|
|
7
32
|
- minimum required support has been upgraded to Angular `14.0`.
|
|
8
33
|
- update ngx-infinite-scroll to `14.0.0`.
|
|
9
34
|
|
|
10
|
-
## V9.0.0 (
|
|
35
|
+
## V9.0.0 (2022-03-10)
|
|
11
36
|
|
|
12
37
|
### Breaking Changes
|
|
13
38
|
|
package/README.md
CHANGED
|
@@ -14,17 +14,19 @@ npm i ng-select2-component --save
|
|
|
14
14
|
|
|
15
15
|
- peerDependencies:
|
|
16
16
|
|
|
17
|
-
- `angular`
|
|
18
|
-
- `angular/cdk`
|
|
17
|
+
- `angular` 15.0.0 and more
|
|
18
|
+
- `angular/cdk` 15.0.0 and more
|
|
19
19
|
|
|
20
20
|
- dependencies (include):
|
|
21
|
-
- `ngx-infinite-scroll@^
|
|
21
|
+
- `ngx-infinite-scroll@^15.0.0`
|
|
22
22
|
|
|
23
23
|
> **Note:**<br>
|
|
24
|
-
>
|
|
25
|
-
> For `angular`
|
|
26
|
-
> For `angular`
|
|
27
|
-
> For `angular`
|
|
24
|
+
>
|
|
25
|
+
> - For `angular` 7, 8 and 9 (View Engine): use version `7.3.1`.
|
|
26
|
+
> - For `angular` 10, 11 and 12 (View Engine): use version `8.1.0`.
|
|
27
|
+
> - For `angular` 13 (Ivy): use version `9.0.0`.
|
|
28
|
+
> - For `angular` 14 (Ivy): use version `10.0.0`.
|
|
29
|
+
> - For `angular` 15 and more (Ivy): use version `11.0.0`.
|
|
28
30
|
|
|
29
31
|
## Demo
|
|
30
32
|
|
|
@@ -42,6 +44,7 @@ npm i ng-select2-component --save
|
|
|
42
44
|
- hide search box
|
|
43
45
|
- placeholder
|
|
44
46
|
- multiple selection
|
|
47
|
+
- add items not found in multiple
|
|
45
48
|
- material style
|
|
46
49
|
- form binding
|
|
47
50
|
- templating
|
|
@@ -67,40 +70,42 @@ class MainModule {}
|
|
|
67
70
|
|
|
68
71
|
### properties and events of the component
|
|
69
72
|
|
|
70
|
-
| name | type | status | default | description
|
|
71
|
-
| ------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | -------- | -------------------- |
|
|
72
|
-
| `data` | [`Select2Data`](#select2-data-structure) | required | | the data of the select2
|
|
73
|
-
| `value` | [`Select2Value`](#select2-data-structure) | | | initial value
|
|
74
|
-
| `minCharForSearch` | `number` | | `0` | start the search when the number of characters is reached (`0` = unlimited)
|
|
75
|
-
| `minCountForSearch` | `number` | | `6` | hide search box if `options.length < minCountForSearch`
|
|
76
|
-
| `displaySearchStatus` | `'default'`<br>`'hidden'`<br>`'always'` | | `'default'` | display the search box (`default` : is based on `minCountForSearch`) |
|
|
77
|
-
| `placeholder` | `string` | | | the placeholder string if nothing selected
|
|
78
|
-
| `noResultMessage` | `string` | | | the message string if no results when using the search field
|
|
79
|
-
| `customSearchEnabled` | `boolean` | | `false` | will trigger `search` event, and disable inside filter
|
|
80
|
-
| `multiple` | `boolean` | | `false` | select multiple options
|
|
81
|
-
| `resettable` | `boolean` | | `false` | add a button to reset value
|
|
82
|
-
| `
|
|
83
|
-
| `
|
|
84
|
-
| `
|
|
85
|
-
| `
|
|
86
|
-
| `
|
|
87
|
-
| `
|
|
88
|
-
| `
|
|
89
|
-
| `
|
|
90
|
-
| `
|
|
91
|
-
| `
|
|
92
|
-
| `
|
|
93
|
-
| `
|
|
94
|
-
| `
|
|
95
|
-
| `
|
|
96
|
-
| `
|
|
97
|
-
| `
|
|
98
|
-
| `(
|
|
99
|
-
| `(
|
|
100
|
-
| `(
|
|
101
|
-
| `(
|
|
102
|
-
| `(
|
|
103
|
-
| `(
|
|
73
|
+
| name | type | status | default | description | required |
|
|
74
|
+
| ------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | -------- | -------------------- | -------------------------------------------------------------------------------------- | ----------------------------- |
|
|
75
|
+
| `data` | [`Select2Data`](#select2-data-structure) | required | | the data of the select2 | |
|
|
76
|
+
| `value` | [`Select2Value`](#select2-data-structure) | | | initial value | |
|
|
77
|
+
| `minCharForSearch` | `number` | | `0` | start the search when the number of characters is reached (`0` = unlimited) | |
|
|
78
|
+
| `minCountForSearch` | `number` | | `6` | hide search box if `options.length < minCountForSearch` | |
|
|
79
|
+
| `displaySearchStatus` | `'default'`<br>`'hidden'`<br>`'always'` | | `'default'` | display the search box (`default` : is based on `minCountForSearch`) | |
|
|
80
|
+
| `placeholder` | `string` | | | the placeholder string if nothing selected | |
|
|
81
|
+
| `noResultMessage` | `string` | | | the message string if no results when using the search field | |
|
|
82
|
+
| `customSearchEnabled` | `boolean` | | `false` | will trigger `search` event, and disable inside filter | |
|
|
83
|
+
| `multiple` | `boolean` | | `false` | select multiple options | |
|
|
84
|
+
| `resettable` | `boolean` | | `false` | add a button to reset value | not `multiple` |
|
|
85
|
+
| `autoCreate` | `boolean` | | `false` | gives the possibility to add elements not present in the list. | with `multiple` |
|
|
86
|
+
| `limitSelection` | `number` | | `0` | to limit multiple selection (`0` = unlimited) | |
|
|
87
|
+
| `hideSelectedItems` | `boolean` | | `false` | remove selected values | with `multiple` |
|
|
88
|
+
| `resultMaxHeight` | `string` | | `'200px'` | change the height size of results | |
|
|
89
|
+
| `maxResults` | `number` | | `0` | maximum results limit (`0` = unlimited) | |
|
|
90
|
+
| `maxResultsMessage` | `string` | | `'Too much result…'` | message when maximum result | |
|
|
91
|
+
| `listPosition` | `'below'`<br>`'above'`<br>`'auto'` \* | | `'below'` | the position for the dropdown list | `'auto'`: only with `overlay` |
|
|
92
|
+
| `infiniteScroll` | `boolean` | | `false` | active infiniteScroll on dropdown list | with `ngx-infinite-scroll` |
|
|
93
|
+
| `infiniteScrollDistance` | `number` | | `1.5` | infiniteScroll distance | with `ngx-infinite-scroll` |
|
|
94
|
+
| `infiniteScrollThrottle` | `number` | | `150` | infiniteScroll throttle | |
|
|
95
|
+
| `overlay` | `boolean` | | `false` | active an overlay mode for dropdown list (with angular cdk). (See [Overlay](#overlay)) | |
|
|
96
|
+
| `styleMode` | `'default'`<br>`'material'`<br>`'noStyle'` | | `'default'` | change style for material style or remove border and background color | |
|
|
97
|
+
| `templates` | `TemplateRef`<br>`{option?: TemplateRef, group?: TemplateRef}`<br>`{templateId1: TemplateRef, ...}` | | | use templates for formatting content (see [Templating](#templating)) | |
|
|
98
|
+
| `noLabelTemplate` | `boolean` | | `false` | do not use the template in the selection, stay in text mode | |
|
|
99
|
+
| `editPattern` | `(str: string) => string` | | | use it for change the pattern of the filter search | |
|
|
100
|
+
| `ngModel`<br>`id`<br>`required`<br>`disabled`<br>`readonly`<br>`tabIndex` | | | | just like a `select` control | |
|
|
101
|
+
| `(update)` | `(event: `[`Select2UpdateEvent`](#select2-data-structure)`) => void` | event | | triggered when user select an option | |
|
|
102
|
+
| `(open)` | `(event: Select2) => void` | event | | triggered when user open the options | |
|
|
103
|
+
| `(close)` | `(event: Select2) => void` | event | | triggered when user close the options | |
|
|
104
|
+
| `(focus)` | `(event: Select2) => void` | event | | triggered when user enters the component | |
|
|
105
|
+
| `(blur)` | `(event: Select2) => void` | event | | triggered when user leaves the component | |
|
|
106
|
+
| `(search)` | `(event: `[`Select2SearchEvent`](#select2-data-structure)`) => void` | event | | triggered when search text changed | with `customSearchEnabled` |
|
|
107
|
+
| `(scroll)` | `(event: `[`Select2ScrollEvent`](#select2-data-structure)`) => void` | event | | triggered when infiniteScroll is on `up` or `down` position | with `ngx-infinite-scroll` |
|
|
108
|
+
| `(removedOption)` | `(event: `[`Select2RemoveEvent`](#select2-data-structure)`) => void` | event | | triggered when an option is removed from the list of selected options options list | with `multiple` |
|
|
104
109
|
|
|
105
110
|
### select2 data structure
|
|
106
111
|
|
|
@@ -239,12 +244,16 @@ If the overlay mode is used / activated, add to the project root in CSS (with `V
|
|
|
239
244
|
@import '~@angular/cdk/overlay-prebuilt.css';
|
|
240
245
|
```
|
|
241
246
|
|
|
242
|
-
## CSS variables
|
|
247
|
+
## CSS variables
|
|
243
248
|
|
|
244
249
|
It's possible to change different colors (and more) with CSS variables without having to modify them with `::ng-deep` or other CSS rules :
|
|
245
250
|
|
|
246
251
|
```css
|
|
247
252
|
:root {
|
|
253
|
+
/* size */
|
|
254
|
+
--select2-single-height: 28px;
|
|
255
|
+
--select2-multiple-height: 28px;
|
|
256
|
+
|
|
248
257
|
/* label */
|
|
249
258
|
--select2-label-text-color: #000;
|
|
250
259
|
--select2-required-color: red;
|
|
@@ -255,7 +264,7 @@ It's possible to change different colors (and more) with CSS variables without h
|
|
|
255
264
|
--select2-selection-disabled-background: #eee;
|
|
256
265
|
--select2-selection-border-color: #aaa;
|
|
257
266
|
--select2-selection-focus-border-color: #000;
|
|
258
|
-
--select2-selection-text-color: #
|
|
267
|
+
--select2-selection-text-color: #111;
|
|
259
268
|
|
|
260
269
|
/* selection: choice item (multiple) */
|
|
261
270
|
--select2-selection-choice-background: #e4e4e4;
|
|
@@ -326,8 +335,6 @@ It's possible to change different colors (and more) with CSS variables without h
|
|
|
326
335
|
}
|
|
327
336
|
```
|
|
328
337
|
|
|
329
|
-
For IE11, see [css-vars-ponyfill](https://github.com/jhildenbiddle/css-vars-ponyfill).
|
|
330
|
-
|
|
331
338
|
## Publishing the library
|
|
332
339
|
|
|
333
340
|
```
|
|
@@ -2,9 +2,9 @@ import { Directive } from '@angular/core';
|
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
export class Select2Hint {
|
|
4
4
|
}
|
|
5
|
-
/** @nocollapse */ Select2Hint.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6
|
-
/** @nocollapse */ Select2Hint.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
7
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5
|
+
/** @nocollapse */ Select2Hint.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: Select2Hint, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
6
|
+
/** @nocollapse */ Select2Hint.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: Select2Hint, selector: "select2-hint", ngImport: i0 });
|
|
7
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: Select2Hint, decorators: [{
|
|
8
8
|
type: Directive,
|
|
9
9
|
args: [{ selector: 'select2-hint' }]
|
|
10
10
|
}] });
|
|
@@ -2,9 +2,9 @@ import { Directive } from '@angular/core';
|
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
export class Select2Label {
|
|
4
4
|
}
|
|
5
|
-
/** @nocollapse */ Select2Label.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6
|
-
/** @nocollapse */ Select2Label.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
7
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5
|
+
/** @nocollapse */ Select2Label.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: Select2Label, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
6
|
+
/** @nocollapse */ Select2Label.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: Select2Label, selector: "select2-label", ngImport: i0 });
|
|
7
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: Select2Label, decorators: [{
|
|
8
8
|
type: Directive,
|
|
9
9
|
args: [{ selector: 'select2-label' }]
|
|
10
10
|
}] });
|