ng-select2-component 8.0.6 → 8.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.
Files changed (14) hide show
  1. package/CHANGELOG.md +17 -1
  2. package/README.md +39 -33
  3. package/bundles/ng-select2-component.umd.js +259 -180
  4. package/bundles/ng-select2-component.umd.js.map +1 -1
  5. package/bundles/ng-select2-component.umd.min.js +1 -1
  6. package/bundles/ng-select2-component.umd.min.js.map +1 -1
  7. package/esm2015/lib/select2-utils.js +120 -93
  8. package/esm2015/lib/select2.component.js +85 -55
  9. package/fesm2015/ng-select2-component.js +203 -146
  10. package/fesm2015/ng-select2-component.js.map +1 -1
  11. package/lib/select2-utils.d.ts +10 -6
  12. package/lib/select2.component.d.ts +11 -6
  13. package/ng-select2-component.metadata.json +1 -1
  14. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,6 +1,22 @@
1
1
  # Changelog of ng-select2
2
2
 
3
- ## V8.0.6 (2021-02-04)
3
+ ## V8.1.0 (2022-02-18)
4
+
5
+ ### Breaking Changes
6
+
7
+ - CSS variable `--select2-font-style-color` renamed in `--select2-too-much-font-style`
8
+
9
+ ### Changes
10
+
11
+ - add `maxResults` maximum results limit (`0` = no limit, by default : `0`).
12
+ - add `maxResultsMessage` parameter, message when maximum results (by default : `'Too many results…'`)
13
+ - add CSS variable `--select2-too-much-result-color` and `--select2-too-much-result-style`
14
+
15
+ ### Corrections
16
+
17
+ - filtered data for group is now correct
18
+
19
+ ## V8.0.6 (2022-01-04)
4
20
 
5
21
  ### Corrections
6
22
 
package/README.md CHANGED
@@ -64,38 +64,40 @@ class MainModule {}
64
64
 
65
65
  ### properties and events of the component
66
66
 
67
- | name | type | status | default | description |
68
- | ------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | -------- | ----------- | -------------------------------------------------------------------------------------------------- |
69
- | `data` | [`Select2Data`](#select2-data-structure) | required | | the data of the select2 |
70
- | `value` | [`Select2Value`](#select2-data-structure) | | | initial value |
71
- | `minCharForSearch` | `number` | | `0` | start the search when the number of characters is reached (`0` = unlimited) |
72
- | `minCountForSearch` | `number` | | `6` | hide search box if `options.length < minCountForSearch` |
73
- | `displaySearchStatus` | `'default'`<br>`'hidden'`<br>`'always'` | | `'default'` | display the search box (`default` : is based on `minCountForSearch`) |
74
- | `placeholder` | `string` | | | the placeholder string if nothing selected |
75
- | `noResultMessage` | `string` | | | the message string if no results when using the search field |
76
- | `customSearchEnabled` | `boolean` | | `false` | will trigger `search` event, and disable inside filter |
77
- | `multiple` | `boolean` | | `false` | select multiple options |
78
- | `resettable` | `boolean` | | `false` | add a button to reset value (not with `multiple`) |
79
- | `limitSelection` | `number` | | `0` | to limit multiple selection (`0` = unlimited) |
80
- | `hideSelectedItems` | `boolean` | | `false` | for `multiple`, remove selected values |
81
- | `resultMaxHeight` | `string` | | `'200px'` | change the height size of results |
82
- | `listPosition` | `'below'`<br>`'above'`<br>`'auto'` \* | | `'below'` | the position for the dropdown list<br> \* `'auto'`: only with `overlay` |
83
- | `infiniteScroll` | `boolean` | | `false` | active infiniteScroll on dropdown list ( with `ngx-infinite-scroll`) |
84
- | `infiniteScrollDistance` | `number` | | `1.5` | infiniteScroll distance |
85
- | `infiniteScrollThrottle` | `number` | | `150` | infiniteScroll throttle |
86
- | `overlay` | `boolean` | | `false` | active an overlay mode for dropdown list (with angular cdk). (See [Overlay](#overlay)) |
87
- | `styleMode` | `'default'`<br>`'material'`<br>`'noStyle'` | | `'default'` | change style for material style or remove border and background color |
88
- | `templates` | `TemplateRef`<br> `{option?: TemplateRef, group?: TemplateRef}`<br> `{templateId1: TemplateRef, ...}` | | | use templates for formatting content (see [Templating](#templating)) |
89
- | `editPattern` | `(str: string) => string` | | | use it for change the pattern of the filter search |
90
- | `ngModel`<br>`id`<br>`required`<br>`disabled`<br>`readonly`<br>`tabIndex` | | | | just like a `select` control |
91
- | `(update)` | `(event: `[`Select2UpdateEvent`](#select2-data-structure)`) => void` | event | | triggered when user select an option |
92
- | `(open)` | `(event: Select2) => void` | event | | triggered when user open the options |
93
- | `(close)` | `(event: Select2) => void` | event | | triggered when user close the options |
94
- | `(focus)` | `(event: Select2) => void` | event | | triggered when user enters the component |
95
- | `(blur)` | `(event: Select2) => void` | event | | triggered when user leaves the component |
96
- | `(search)` | `(event: `[`Select2SearchEvent`](#select2-data-structure)`) => void` | event | | triggered when search text changed |
97
- | `(scroll)` | `(event: `[`Select2ScrollEvent`](#select2-data-structure)`) => void` | event | | triggered when infiniteScroll is on `up` or `down` position |
98
- | `(removedOption)` | `(event: `[`Select2RemoveEvent`](#select2-data-structure)`) => void` | event | | for `multiple`, triggered when an option is removed from the list of selected options options list |
67
+ | name | type | status | default | description |
68
+ | ------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | -------- | -------------------- | -------------------------------------------------------------------------------------------------- |
69
+ | `data` | [`Select2Data`](#select2-data-structure) | required | | the data of the select2 |
70
+ | `value` | [`Select2Value`](#select2-data-structure) | | | initial value |
71
+ | `minCharForSearch` | `number` | | `0` | start the search when the number of characters is reached (`0` = unlimited) |
72
+ | `minCountForSearch` | `number` | | `6` | hide search box if `options.length < minCountForSearch` |
73
+ | `displaySearchStatus` | `'default'`<br>`'hidden'`<br>`'always'` | | `'default'` | display the search box (`default` : is based on `minCountForSearch`) |
74
+ | `placeholder` | `string` | | | the placeholder string if nothing selected |
75
+ | `noResultMessage` | `string` | | | the message string if no results when using the search field |
76
+ | `customSearchEnabled` | `boolean` | | `false` | will trigger `search` event, and disable inside filter |
77
+ | `multiple` | `boolean` | | `false` | select multiple options |
78
+ | `resettable` | `boolean` | | `false` | add a button to reset value (not with `multiple`) |
79
+ | `limitSelection` | `number` | | `0` | to limit multiple selection (`0` = unlimited) |
80
+ | `hideSelectedItems` | `boolean` | | `false` | for `multiple`, remove selected values |
81
+ | `resultMaxHeight` | `string` | | `'200px'` | change the height size of results |
82
+ | `maxResults` | `number` | | `0` | maximum results limit (`0` = unlimited)s |
83
+ | `maxResultsMessage` | `string` | | `'Too much result…'` | message when maximum result |
84
+ | `listPosition` | `'below'`<br>`'above'`<br>`'auto'` \* | | `'below'` | the position for the dropdown list<br> \* `'auto'`: only with `overlay` |
85
+ | `infiniteScroll` | `boolean` | | `false` | active infiniteScroll on dropdown list ( with `ngx-infinite-scroll`) |
86
+ | `infiniteScrollDistance` | `number` | | `1.5` | infiniteScroll distance |
87
+ | `infiniteScrollThrottle` | `number` | | `150` | infiniteScroll throttle |
88
+ | `overlay` | `boolean` | | `false` | active an overlay mode for dropdown list (with angular cdk). (See [Overlay](#overlay)) |
89
+ | `styleMode` | `'default'`<br>`'material'`<br>`'noStyle'` | | `'default'` | change style for material style or remove border and background color |
90
+ | `templates` | `TemplateRef`<br>`{option?: TemplateRef, group?: TemplateRef}`<br>`{templateId1: TemplateRef, ...}` | | | use templates for formatting content (see [Templating](#templating)) |
91
+ | `editPattern` | `(str: string) => string` | | | use it for change the pattern of the filter search |
92
+ | `ngModel`<br>`id`<br>`required`<br>`disabled`<br>`readonly`<br>`tabIndex` | | | | just like a `select` control |
93
+ | `(update)` | `(event: `[`Select2UpdateEvent`](#select2-data-structure)`) => void` | event | | triggered when user select an option |
94
+ | `(open)` | `(event: Select2) => void` | event | | triggered when user open the options |
95
+ | `(close)` | `(event: Select2) => void` | event | | triggered when user close the options |
96
+ | `(focus)` | `(event: Select2) => void` | event | | triggered when user enters the component |
97
+ | `(blur)` | `(event: Select2) => void` | event | | triggered when user leaves the component |
98
+ | `(search)` | `(event: `[`Select2SearchEvent`](#select2-data-structure)`) => void` | event | | triggered when search text changed |
99
+ | `(scroll)` | `(event: `[`Select2ScrollEvent`](#select2-data-structure)`) => void` | event | | triggered when infiniteScroll is on `up` or `down` position |
100
+ | `(removedOption)` | `(event: `[`Select2RemoveEvent`](#select2-data-structure)`) => void` | event | | for `multiple`, triggered when an option is removed from the list of selected options options list |
99
101
 
100
102
  ### select2 data structure
101
103
 
@@ -265,7 +267,11 @@ It's possible to change different colors (and more) with CSS variables without h
265
267
 
266
268
  /* no result message */
267
269
  --select2-no-result-color: #888;
268
- --select2-font-style-color: italic;
270
+ --select2-no-result-font-style: italic;
271
+
272
+ /* no result message */
273
+ --select2-too-much-result-color: #888;
274
+ --select2-too-much-result-style: italic;
269
275
 
270
276
  /* reset */
271
277
  --select2-reset-color: #999;