ng-select2-component 15.1.0 → 15.2.1
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 +15 -3
- package/README.md +75 -40
- package/esm2022/lib/select2-interfaces.mjs +1 -1
- package/esm2022/lib/select2.component.mjs +29 -11
- package/fesm2022/ng-select2-component.mjs +28 -10
- package/fesm2022/ng-select2-component.mjs.map +1 -1
- package/lib/select2-interfaces.d.ts +4 -2
- package/lib/select2-interfaces.d.ts.map +1 -1
- package/lib/select2.component.d.ts +6 -4
- package/lib/select2.component.d.ts.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# Changelog of ng-select2
|
|
2
2
|
|
|
3
|
+
## V15.2.1 (2024-08-22)
|
|
4
|
+
|
|
5
|
+
### Changes
|
|
6
|
+
|
|
7
|
+
- Delete a forgotten logger #75
|
|
8
|
+
|
|
9
|
+
## V15.2.0 (2024-08-03)
|
|
10
|
+
|
|
11
|
+
### Changes
|
|
12
|
+
|
|
13
|
+
- Add templates for selection (see readme or code generator) #74
|
|
14
|
+
|
|
3
15
|
## V15.1.0 (2024-08-02)
|
|
4
16
|
|
|
5
17
|
### Changes
|
|
@@ -340,7 +352,7 @@
|
|
|
340
352
|
|
|
341
353
|
### Changes
|
|
342
354
|
|
|
343
|
-
- add `limitSelection` attribute to limit multiple selection. (By
|
|
355
|
+
- add `limitSelection` attribute to limit multiple selection. (By default `0` for no limit)
|
|
344
356
|
|
|
345
357
|
## V7.1.3 (2020-05-07)
|
|
346
358
|
|
|
@@ -407,8 +419,8 @@
|
|
|
407
419
|
|
|
408
420
|
- with label and required is true, add a red `*` after the label
|
|
409
421
|
- add new @input parameters :
|
|
410
|
-
- `hideSelectedItems` : for `multiple`, remove selected values (by
|
|
411
|
-
- `resultMaxHeight` : change the height size of results (by
|
|
422
|
+
- `hideSelectedItems` : for `multiple`, remove selected values (by default : `false`)
|
|
423
|
+
- `resultMaxHeight` : change the height size of results (by default : `200px`);
|
|
412
424
|
|
|
413
425
|
### Corrections
|
|
414
426
|
|
package/README.md
CHANGED
|
@@ -74,45 +74,46 @@ class MainModule {}
|
|
|
74
74
|
|
|
75
75
|
### properties and events of the component
|
|
76
76
|
|
|
77
|
-
| name | type
|
|
78
|
-
| ------------------------------------------------------------------------- |
|
|
79
|
-
| `data` | [`Select2Data`](#select2-data-structure)
|
|
80
|
-
| `value` | [`Select2Value`](#select2-data-structure)
|
|
81
|
-
| `minCharForSearch` | `number`
|
|
82
|
-
| `minCountForSearch` | `number`
|
|
83
|
-
| `displaySearchStatus` | `'default'`<br>`'hidden'`<br>`'always'`
|
|
84
|
-
| `placeholder` | `string`
|
|
85
|
-
| `noResultMessage` | `string`
|
|
86
|
-
| `customSearchEnabled` | `boolean`
|
|
87
|
-
| `multiple` | `boolean`
|
|
88
|
-
| `resettable` | `boolean`
|
|
89
|
-
| `resetSelectedValue` | `any`
|
|
90
|
-
| `autoCreate` | `boolean`
|
|
91
|
-
| `limitSelection` | `number`
|
|
92
|
-
| `hideSelectedItems` | `boolean`
|
|
93
|
-
| `resultMaxHeight` | `string`
|
|
94
|
-
| `maxResults` | `number`
|
|
95
|
-
| `maxResultsMessage` | `string`
|
|
96
|
-
| `grid` | `number` or `string`
|
|
97
|
-
| `listPosition` | `'below'`<br>`'above'`<br>`'auto'` ¹
|
|
98
|
-
| `infiniteScroll` | `boolean`
|
|
99
|
-
| `infiniteScrollDistance` | `number`
|
|
100
|
-
| `infiniteScrollThrottle` | `number`
|
|
101
|
-
| `overlay` | `boolean`
|
|
102
|
-
| `styleMode` | `'default'`<br>`'material'`<br>`'noStyle'`<br>`'borderless'`
|
|
103
|
-
| `templates` | `TemplateRef`<br>`{option?: TemplateRef, group?: TemplateRef}`<br
|
|
104
|
-
| `
|
|
105
|
-
| `
|
|
106
|
-
| `
|
|
107
|
-
| `
|
|
108
|
-
| `(
|
|
109
|
-
| `(
|
|
110
|
-
| `(
|
|
111
|
-
| `(
|
|
112
|
-
| `(
|
|
113
|
-
| `(
|
|
114
|
-
| `(
|
|
115
|
-
| `(
|
|
77
|
+
| name | type | status | default | description | required |
|
|
78
|
+
| ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | -------- | -------------------- | ------------------------------------------------------------------------------------------------------------------- | ------------------------------------ |
|
|
79
|
+
| `data` | [`Select2Data`](#select2-data-structure) | required | | the data of the select2 | |
|
|
80
|
+
| `value` | [`Select2Value`](#select2-data-structure) | | | initial value | |
|
|
81
|
+
| `minCharForSearch` | `number` | | `0` | start the search when the number of characters is reached (`0` = unlimited) | |
|
|
82
|
+
| `minCountForSearch` | `number` | | `6` | hide search box if `options.length < minCountForSearch` | |
|
|
83
|
+
| `displaySearchStatus` | `'default'`<br>`'hidden'`<br>`'always'` | | `'default'` | display the search box (`default` : is based on `minCountForSearch`) | |
|
|
84
|
+
| `placeholder` | `string` | | | the placeholder string if nothing selected | |
|
|
85
|
+
| `noResultMessage` | `string` | | | the message string if no results when using the search field | |
|
|
86
|
+
| `customSearchEnabled` | `boolean` | | `false` | will trigger `search` event, and disable inside filter | |
|
|
87
|
+
| `multiple` | `boolean` | | `false` | select multiple options | |
|
|
88
|
+
| `resettable` | `boolean` | | `false` | add a button to reset value | not `multiple` |
|
|
89
|
+
| `resetSelectedValue` | `any` | | `undefined` | selected option when × is clicked | not `multiple` and with `resettable` |
|
|
90
|
+
| `autoCreate` | `boolean` | | `false` | gives the possibility to add elements not present in the list. | |
|
|
91
|
+
| `limitSelection` | `number` | | `0` | to limit multiple selection (`0` = unlimited) | |
|
|
92
|
+
| `hideSelectedItems` | `boolean` | | `false` | remove selected values | with `multiple` |
|
|
93
|
+
| `resultMaxHeight` | `string` | | `'200px'` | change the height size of results | |
|
|
94
|
+
| `maxResults` | `number` | | `0` | maximum results limit (`0` = unlimited) | |
|
|
95
|
+
| `maxResultsMessage` | `string` | | `'Too much result…'` | message when maximum result | |
|
|
96
|
+
| `grid` | `number` or `string` | | | option by line in grid layout (empty or `0` = no grid layout)<br>number: item by line<br>string: minimal item width | |
|
|
97
|
+
| `listPosition` | `'below'`<br>`'above'`<br>`'auto'` ¹ | | `'below'` | the position for the dropdown list | ¹ `'auto'`: only with `overlay` |
|
|
98
|
+
| `infiniteScroll` | `boolean` | | `false` | active infiniteScroll on dropdown list | with `ngx-infinite-scroll` |
|
|
99
|
+
| `infiniteScrollDistance` | `number` | | `1.5` | infiniteScroll distance | with `ngx-infinite-scroll` |
|
|
100
|
+
| `infiniteScrollThrottle` | `number` | | `150` | infiniteScroll throttle | |
|
|
101
|
+
| `overlay` | `boolean` | | `false` | active an overlay mode for dropdown list (with angular cdk). (See [Overlay](#overlay)) | |
|
|
102
|
+
| `styleMode` | `'default'`<br>`'material'`<br>`'noStyle'`<br>`'borderless'` | | `'default'` | change style for material style or remove border and background color | |
|
|
103
|
+
| `templates` | `TemplateRef`<br>`{option?: TemplateRef, group?: TemplateRef}`<br>etc.<br>(see ”possible object” in [Templating](#templating)) | | | use templates for formatting content (see [Templating](#templating)) | |
|
|
104
|
+
| `templateSelection` | `TemplateRef` | | | use templates for formatting content (see [Templating](#templating)) | |
|
|
105
|
+
| `noLabelTemplate` | `boolean` | | `false` | do not use the template in the selection, stay in text mode | |
|
|
106
|
+
| `editPattern` | `(str: string) => string` | | | use it for change the pattern of the filter search | |
|
|
107
|
+
| `ngModel`<br>`id`<br>`required`<br>`disabled`<br>`readonly`<br>`tabIndex` | | | | just like a `select` control | |
|
|
108
|
+
| `(update)` | `(event: `[`Select2UpdateEvent`](#select2-data-structure)`) => void` | event | | triggered when user select an option | |
|
|
109
|
+
| `(open)` | `(event: Select2) => void` | event | | triggered when user open the options | |
|
|
110
|
+
| `(close)` | `(event: Select2) => void` | event | | triggered when user close the options | |
|
|
111
|
+
| `(focus)` | `(event: Select2) => void` | event | | triggered when user enters the component | |
|
|
112
|
+
| `(blur)` | `(event: Select2) => void` | event | | triggered when user leaves the component | |
|
|
113
|
+
| `(search)` | `(event: `[`Select2SearchEvent`](#select2-data-structure)`) => void` | event | | triggered when search text changed | with `customSearchEnabled` |
|
|
114
|
+
| `(scroll)` | `(event: `[`Select2ScrollEvent`](#select2-data-structure)`) => void` | event | | triggered when infiniteScroll is on `up` or `down` position | with `ngx-infinite-scroll` |
|
|
115
|
+
| `(removeOption)` | `(event: `[`Select2RemoveEvent`](#select2-data-structure)`) => void` | event | | triggered when an option is removed from the list of selected options options list | with `multiple` |
|
|
116
|
+
| `(autoCreateItem)` | `(event: `[`Select2AutoCreateEvent`](#select2-data-structure)`) => void` | event | | triggered when a new item has been added | with `autoCreate` |
|
|
116
117
|
|
|
117
118
|
### select2 data structure
|
|
118
119
|
|
|
@@ -270,6 +271,40 @@ const data: Select2Data = [
|
|
|
270
271
|
];
|
|
271
272
|
```
|
|
272
273
|
|
|
274
|
+
#### Possible object
|
|
275
|
+
|
|
276
|
+
- `TemplateRef`
|
|
277
|
+
- `{template: TemplateRef}`
|
|
278
|
+
- `{option?: TemplateRef, group?: TemplateRef}`
|
|
279
|
+
- `{templateId1: TemplateRef, ...}`
|
|
280
|
+
|
|
281
|
+
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 :
|
|
282
|
+
|
|
283
|
+
- `{templateSelection: TemplateRef}`
|
|
284
|
+
- `{optionSelection: TemplateRef}`
|
|
285
|
+
|
|
286
|
+
#### Priority order
|
|
287
|
+
|
|
288
|
+
For group or option:
|
|
289
|
+
|
|
290
|
+
- `'id'` (from item data `templateId`)
|
|
291
|
+
- `'group'` or `'option'`
|
|
292
|
+
- `'template'`
|
|
293
|
+
- `TemplateRef` (from html attribute `templates`)
|
|
294
|
+
- Default render
|
|
295
|
+
|
|
296
|
+
For the selection:
|
|
297
|
+
|
|
298
|
+
- `'id'` (from item data `templateSelectionId`)
|
|
299
|
+
- `'optionSelection'`
|
|
300
|
+
- `'templateSelection'`
|
|
301
|
+
- `TemplateRef` (from html attribute `templateSelection`)
|
|
302
|
+
- `'id'` (from item data `templateId`)
|
|
303
|
+
- `'option'`
|
|
304
|
+
- `'template'`
|
|
305
|
+
- `TemplateRef` (from html attribute `templates`)
|
|
306
|
+
- Default render
|
|
307
|
+
|
|
273
308
|
### Overlay
|
|
274
309
|
|
|
275
310
|
If the overlay mode is used / activated, add to the project root in CSS (with `ViewEncapsulation.None`)
|
|
@@ -360,7 +395,7 @@ It's possible to change different colors (and more) with CSS variables without h
|
|
|
360
395
|
--select2-option-group-text-color: gray;
|
|
361
396
|
--select2-option-group-background: transparent;
|
|
362
397
|
--select2-option-padding: 6px;
|
|
363
|
-
|
|
398
|
+
|
|
364
399
|
/* hint */
|
|
365
400
|
--select2-hint-text-color: #888;
|
|
366
401
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0Mi1pbnRlcmZhY2VzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctc2VsZWN0Mi1jb21wb25lbnQvc3JjL2xpYi9zZWxlY3QyLWludGVyZmFjZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFNlbGVjdDIgfSBmcm9tICcuL3NlbGVjdDIuY29tcG9uZW50JztcblxuZXhwb3J0IGludGVyZmFjZSBTZWxlY3QyR3JvdXAge1xuICAgIC8qKiBsYWJlbCBvZiBncm91cCAqL1xuICAgIGxhYmVsOiBzdHJpbmc7XG4gICAgLyoqIG9wdGlvbnMgbGlzdCAqL1xuICAgIG9wdGlvbnM6IFNlbGVjdDJPcHRpb25bXTtcbiAgICAvKiogYWRkIGNsYXNzZXMgICovXG4gICAgY2xhc3Nlcz86IHN0cmluZztcbiAgICAvKiogdGVtcGxhdGUgaWQgZHJvcGRvd24gJiBzZWxlY3Rpb24gaWYgbm8gdGVtcGxhdGVTZWxlY3Rpb25JZCAqL1xuICAgIHRlbXBsYXRlSWQ/OiBzdHJpbmc7XG4gICAgLyoqIHRlbXBsYXRlIGRhdGEgICovXG4gICAgZGF0YT86IGFueTtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBTZWxlY3QyT3B0aW9uIHtcbiAgICAvKiogdmFsdWUgICovXG4gICAgdmFsdWU6IFNlbGVjdDJWYWx1ZTtcbiAgICAvKiogbGFiZWwgb2Ygb3B0aW9uICovXG4gICAgbGFiZWw6IHN0cmluZztcbiAgICAvKiogbm8gc2VsZWN0YWJsZSBpcyBkaXNhYmxlZCAqL1xuICAgIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgICAvKiogZm9yIGlkZW50aWZpY2F0aW9uICovXG4gICAgaWQ/OiBzdHJpbmc7XG4gICAgLyoqIGFkZCBjbGFzc2VzICAqL1xuICAgIGNsYXNzZXM/OiBzdHJpbmc7XG4gICAgLyoqIHRlbXBsYXRlIGlkIGRyb3Bkb3duICYgc2VsZWN0aW9uIGlmIG5vIHRlbXBsYXRlU2VsZWN0aW9uSWQgKi9cbiAgICB0ZW1wbGF0ZUlkPzogc3RyaW5nO1xuICAgIC8qKiB0ZW1wbGF0ZSBpZCBmb3Igc2VsZWN0aW9uICovXG4gICAgdGVtcGxhdGVTZWxlY3Rpb25JZD86IHN0cmluZztcbiAgICAvKiogdGVtcGxhdGUgZGF0YSAgKi9cbiAgICBkYXRhPzogYW55O1xuICAgIC8qKiBoaWRlIHRoaXMgb3B0aW9uICovXG4gICAgaGlkZT86IGJvb2xlYW47XG59XG5cbmV4cG9ydCB0eXBlIFNlbGVjdDJWYWx1ZSA9IHN0cmluZyB8IG51bWJlciB8IGJvb2xlYW4gfCBvYmplY3Q7XG5cbmV4cG9ydCB0eXBlIFNlbGVjdDJVcGRhdGVWYWx1ZSA9IFNlbGVjdDJWYWx1ZSB8IFNlbGVjdDJWYWx1ZVtdO1xuXG5leHBvcnQgdHlwZSBTZWxlY3QyRGF0YSA9IChTZWxlY3QyR3JvdXAgfCBTZWxlY3QyT3B0aW9uKVtdO1xuXG5leHBvcnQgaW50ZXJmYWNlIFNlbGVjdDJVcGRhdGVFdmVudDxVIGV4dGVuZHMgU2VsZWN0MlVwZGF0ZVZhbHVlID0gU2VsZWN0MlZhbHVlPiB7XG4gICAgLyoqIGNvbXBvbmVudCAqL1xuICAgIHJlYWRvbmx5IGNvbXBvbmVudDogU2VsZWN0MjtcbiAgICAvKiogY3VycmVudCBzZWxlY3RlZCB2YWx1ZSAqL1xuICAgIHJlYWRvbmx5IHZhbHVlOiBVO1xuICAgIC8qKiBzZWxlY3RlZCBvcHRpb24gKi9cbiAgICByZWFkb25seSBvcHRpb25zOiBTZWxlY3QyT3B0aW9uW107XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgU2VsZWN0MkF1dG9DcmVhdGVFdmVudDxVIGV4dGVuZHMgU2VsZWN0MlVwZGF0ZVZhbHVlID0gU2VsZWN0MlZhbHVlPiB7XG4gICAgLyoqIGNvbXBvbmVudCAqL1xuICAgIHJlYWRvbmx5IGNvbXBvbmVudDogU2VsZWN0MjtcbiAgICAvKiogY3VycmVudCBzZWxlY3RlZCB2YWx1ZSAqL1xuICAgIHJlYWRvbmx5IHZhbHVlOiBVO1xuICAgIC8qKiBzZWxlY3RlZCBvcHRpb24gKi9cbiAgICByZWFkb25seSBvcHRpb25zOiBTZWxlY3QyT3B0aW9uW107XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgU2VsZWN0MlNlYXJjaEV2ZW50PFUgZXh0ZW5kcyBTZWxlY3QyVXBkYXRlVmFsdWUgPSBTZWxlY3QyVmFsdWU+IHtcbiAgICAvKiogY29tcG9uZW50ICovXG4gICAgcmVhZG9ubHkgY29tcG9uZW50OiBTZWxlY3QyO1xuICAgIC8qKiBjdXJyZW50IHNlbGVjdGVkIHZhbHVlICovXG4gICAgcmVhZG9ubHkgdmFsdWU6IFU7XG4gICAgLyoqIHNlYXJjaCB0ZXh0ICovXG4gICAgcmVhZG9ubHkgc2VhcmNoOiBzdHJpbmc7XG4gICAgLyoqIGN1cnJlbnQgZGF0YSBzb3VyY2UgKi9cbiAgICByZWFkb25seSBkYXRhOiBTZWxlY3QyRGF0YTtcbiAgICAvKiogbWV0aG9kIHRvIGNhbGwgdG8gdXBkYXRlIHRoZSBkYXRhICovXG4gICAgcmVhZG9ubHkgZmlsdGVyZWREYXRhOiAoZGF0YTogU2VsZWN0MkRhdGEpID0+IHZvaWQ7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgU2VsZWN0MlJlbW92ZUV2ZW50PFUgZXh0ZW5kcyBTZWxlY3QyVXBkYXRlVmFsdWUgPSBTZWxlY3QyVmFsdWU+IHtcbiAgICAvKiogY29tcG9uZW50ICovXG4gICAgcmVhZG9ubHkgY29tcG9uZW50OiBTZWxlY3QyO1xuICAgIC8qKiBjdXJyZW50IHNlbGVjdGVkIHZhbHVlICovXG4gICAgcmVhZG9ubHkgdmFsdWU6IFU7XG4gICAgLyoqIHJlbW92ZSAqL1xuICAgIHJlYWRvbmx5IHJlbW92ZWRPcHRpb246IFNlbGVjdDJPcHRpb247XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgU2VsZWN0MlNjcm9sbEV2ZW50IHtcbiAgICAvKiogY29tcG9uZW50ICovXG4gICAgcmVhZG9ubHkgY29tcG9uZW50OiBTZWxlY3QyO1xuICAgIC8qKiBzY3JvbGwgd2F5ICovXG4gICAgcmVhZG9ubHkgd2F5OiAndXAnIHwgJ2Rvd24nO1xuICAgIC8qKiBzZWFyY2ggdGV4dCAqL1xuICAgIHJlYWRvbmx5IHNlYXJjaDogc3RyaW5nO1xuICAgIC8qKiBjdXJyZW50IGRhdGEgKi9cbiAgICByZWFkb25seSBkYXRhOiBTZWxlY3QyRGF0YTtcbn1cbiJdfQ==
|