ng-select2-component 17.2.9 → 17.3.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 (15) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/README.md +74 -30
  3. package/fesm2022/ng-select2-component.mjs +214 -133
  4. package/fesm2022/ng-select2-component.mjs.map +1 -1
  5. package/lib/select2-const.d.ts +1 -0
  6. package/lib/select2-const.d.ts.map +1 -1
  7. package/lib/select2-highlight.pipe.d.ts +10 -0
  8. package/lib/select2-highlight.pipe.d.ts.map +1 -0
  9. package/lib/select2-utils.d.ts +3 -2
  10. package/lib/select2-utils.d.ts.map +1 -1
  11. package/lib/select2.component.d.ts +25 -2
  12. package/lib/select2.component.d.ts.map +1 -1
  13. package/package.json +1 -1
  14. package/public_api.d.ts +1 -0
  15. package/public_api.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,29 @@
1
1
  # Changelog of ng-select2
2
2
 
3
+ ## V17.3.0 (2026-05-21)
4
+
5
+ ### Change
6
+
7
+ - feat: highlighting ongoing research #95
8
+ - add `highlightText` parameter on `ng-select2` (`select2`) tag
9
+ - add `highlightText` pipe (`Select2HighlightPipe`)
10
+ - add CSS variables:
11
+ - `--select2-highlight-text-background`
12
+ - `--select2-highlight-text-color`
13
+ - `--select2-highlight-font-weight`
14
+ - `--select2-highlighted-highlight-text-background`
15
+ - `--select2-highlighted-highlight-text-color`
16
+ - `--select2-highlighted-highlight-font-weight`
17
+
18
+ ## V17.2.10 (2026-04-04)
19
+
20
+ > Added near-complete code coverage with Vitest.\
21
+ > Some of the code has been fixed (dead code, untestable code, etc.).
22
+
23
+ ### Change
24
+
25
+ - fix: improve the destruction of the component
26
+
3
27
  ## V17.2.9 (2026-03-05)
4
28
 
5
29
  ### Change
package/README.md CHANGED
@@ -13,30 +13,28 @@ npm i ng-select2-component --save
13
13
  ## Requirements
14
14
 
15
15
  - peerDependencies:
16
-
17
16
  - `angular` `^18.1.0` to `^21.0.0`
18
17
  - `angular/cdk` `^18.1.0` to `^21.0.0`
19
18
 
20
19
  - dependencies (include):
21
-
22
20
  - `ngx-infinite-scroll` `^19.0.0` to `^21.0.0`
23
21
 
24
22
  ### Notes
25
23
 
26
- | Version  | For **Angular** | Notes |
27
- | --------- | ---------------- | ----------------- |
28
- | `17.2.x` | 18.1, 19, 20, 21 | Ivy / Stand-alone |
29
- | `17.1.0` | 19 | Ivy / Stand-alone |
30
- | `16.0.0` | 19 | Ivy / Module |
31
- | `15.4.0` | 18 | Ivy |
32
- | `14.0.1` | 17 | Ivy |
33
- | `13.0.12` | 16.1 | Ivy |
34
- | `12.1.0` | 16 | Ivy |
35
- | `11.1.0` | 15 | Ivy |
36
- | `10.0.0` | 14 | Ivy |
37
- | `9.0.0` | 13 | Ivy |
38
- | `8.1.0` | 10, 11 and 12 | View Engine |
39
- | `7.3.1` | 7, 8 and 9 | View Engine |
24
+ | Version | For **Angular** | Notes |
25
+ | -------------------- | ---------------- | ----------------- |
26
+ | `17.2.11` / `17.3.0` | 18.1, 19, 20, 21 | Ivy / Stand-alone |
27
+ | `17.1.0` | 19 | Ivy / Stand-alone |
28
+ | `16.0.0` | 19 | Ivy / Module |
29
+ | `15.4.0` | 18 | Ivy |
30
+ | `14.0.1` | 17 | Ivy |
31
+ | `13.0.12` | 16.1 | Ivy |
32
+ | `12.1.0` | 16 | Ivy |
33
+ | `11.1.0` | 15 | Ivy |
34
+ | `10.0.0` | 14 | Ivy |
35
+ | `9.0.0` | 13 | Ivy |
36
+ | `8.1.0` | 10, 11 and 12 | View Engine |
37
+ | `7.3.1` | 7, 8 and 9 | View Engine |
40
38
 
41
39
  ## Demo
42
40
 
@@ -66,6 +64,8 @@ npm i ng-select2-component --save
66
64
 
67
65
  ### example
68
66
 
67
+ #### TS
68
+
69
69
  ```ts
70
70
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
71
71
 
@@ -80,8 +80,25 @@ import { Select2, Select2Hint, Select2Label } from 'ng-select2-component';
80
80
  class MyComponent {}
81
81
  ```
82
82
 
83
+ #### HTML template
84
+
85
+ ```html
86
+ <select2 [data]="data" [value]="value" (update)="update($event)"></select2>
87
+ ```
88
+
89
+ or
90
+
91
+ ```html
92
+ <ng-select2 [data]="data" [value]="value" (update)="update($event)" />
93
+ ```
94
+
95
+ or
96
+
83
97
  ```html
84
- <select2 [data]="data" [value]="value" (update)="update($event)"> </select2>
98
+ <ng-select2 [data]="data" [value]="value" (update)="update($event)">
99
+ <ng-select2-label>label</ng-select2-label>
100
+ <ng-select2-hint>hint</ng-select2-hint>
101
+ </ng-select2>
85
102
  ```
86
103
 
87
104
  ### properties and events of the component
@@ -117,12 +134,13 @@ class MyComponent {}
117
134
  | `templateSelection` | `TemplateRef` | | use templates for formatting content (see [Templating](#templating)) | |
118
135
  | `noLabelTemplate` | `boolean` | `false` | do not use the template in the selection, stay in text mode | |
119
136
  | `selectionOverride` | [`Select2SelectionOverride`](#select2-data-structure) | | Replace selection by a text<br>`string`: `%size%` = total selected options<br>`function`: juste show the string | |
120
- | `selectionNoWrap` | `boolean` | `false` | Force selection on one line | |
137
+ | `selectionNoWrap` | `boolean` | `false` | force selection on one line | |
121
138
  | `showSelectAll` | `boolean` | `false` | Add an option to select all options | with `multiple` |
122
139
  | `selectAllText` | `string` | `'Select all'` | Text when all options as not selected | with `multiple` |
123
- | `removeAllText` | `string` | `'Remove all'` | Text when all options as selected | with `multiple` |
140
+ | `removeAllText` | `string` | `'Remove all'` | text when all options as selected | with `multiple` |
124
141
  | `editPattern` | `(str: string) => string` | | use it for change the pattern of the filter search | |
125
- | `nativeKeyboard` | `boolean` | `false` | Use the keyboard navigation like native HTML select component | not with `multiple` |
142
+ | `nativeKeyboard` | `boolean` | `false` | use the keyboard navigation like native HTML select component | not with `multiple` |
143
+ | `highlightText` | `boolean` | `false` | use to highlight search text in dropdown options (with template see code generator) | |
126
144
  | `ngModel`<br>`id`<br>`required`<br>`disabled`<br>`readonly`<br>`tabIndex` | | | just like a `select` control | |
127
145
  | `(update)` | `(event: `[`Select2UpdateEvent`](#select2-data-structure)`) => void` | | triggered when user select an option | |
128
146
  | `(open)` | `(event: Select2) => void` | | triggered when user open the options | |
@@ -238,9 +256,9 @@ export type Select2Template = TemplateRef<any> | { [key: string]: TemplateRef<an
238
256
  #### Unique template
239
257
 
240
258
  ```html
241
- <select2 [data]="data" [templates]="template">
259
+ <ng-select2 [data]="data" [templates]="template">
242
260
  <ng-template #template let-data="data"><strong>{{data?.color}}</strong>: {{data?.name}}</ng-template>
243
- </select2>
261
+ </ng-select2>
244
262
  ```
245
263
 
246
264
  ```ts
@@ -261,10 +279,10 @@ const data: Select2Data = [
261
279
  #### Template group & option
262
280
 
263
281
  ```html
264
- <select2 [data]="data" [templates]="{option : option, group: group}">
282
+ <ng-select2 [data]="data" [templates]="{option : option, group: group}">
265
283
  <ng-template #option let-data="data">{{data?.name}}</ng-template>
266
284
  <ng-template #group let-label="label">Group: {{label}}</ng-template>
267
- </select2>
285
+ </ng-select2>
268
286
  ```
269
287
 
270
288
  No difference in data structure.
@@ -273,10 +291,10 @@ The template is defined by its type, option or group, automatically.
273
291
  #### Template by templateId
274
292
 
275
293
  ```html
276
- <select2 [data]="data" [templates]="{template1 : template1, template2: template2}">
294
+ <ng-elect2 [data]="data" [templates]="{template1 : template1, template2: template2}">
277
295
  <ng-template #template1 let-data="data">{{data?.name}}</ng-template>
278
296
  <ng-template #template2 let-label="label" let-data="data">{{label}} : {{data?.color}}</ng-template>
279
- </select2>
297
+ </ng-elect2>
280
298
  ```
281
299
 
282
300
  ```ts
@@ -299,9 +317,9 @@ const data: Select2Data = [
299
317
  #### Template for change the selection
300
318
 
301
319
  ```html
302
- <select2 [data]="data" [templateSelection]="templateSelection">
320
+ <ng-select2 [data]="data" [templateSelection]="templateSelection">
303
321
  <ng-template #templateSelection let-data="data"><strong>{{ data?.color }}</strong> ({{ data?.name }})</ng-template>
304
- </select2>
322
+ </ng-select2>
305
323
  ```
306
324
 
307
325
  #### Possible object
@@ -432,6 +450,14 @@ It's possible to change different colors (and more) with CSS variables without h
432
450
  /* hint */
433
451
  --select2-hint-text-color: #888;
434
452
 
453
+ /* highlight search text */
454
+ --select2-highlight-text-background: transparent;
455
+ --select2-highlight-text-color: inherit;
456
+ --select2-highlight-font-weight: 800;
457
+ --select2-highlighted-highlight-text-background: transparent;
458
+ --select2-highlighted-highlight-text-color: inherit;
459
+ --select2-highlighted-highlight-font-weight: 800;
460
+
435
461
  /* for Material ------------------------------------------*/
436
462
  --select2-material-underline: #ddd;
437
463
  --select2-material-underline-active: #5a419e;
@@ -452,17 +478,35 @@ It's possible to change different colors (and more) with CSS variables without h
452
478
 
453
479
  ## Publishing the library
454
480
 
455
- ```
481
+ ```sh
456
482
  npm run build:lib
457
483
  npm run publish:lib
458
484
  ```
459
485
 
460
486
  ## Update Demo
461
487
 
462
- ```
488
+ ```sh
463
489
  npm run build:demo
464
490
  ```
465
491
 
492
+ ## Tests
493
+
494
+ ```sh
495
+ # run tests
496
+ npm run test
497
+ npm run test:vitest
498
+ ```
499
+
500
+ ```sh
501
+ # run tests with coverage
502
+ npm run test:vitest:coverage
503
+ ```
504
+
505
+ ```sh
506
+ # run tests with watch
507
+ npm run test:vitest:watch
508
+ ```
509
+
466
510
  ## License
467
511
 
468
512
  Like Angular, this module is released under the permissive MIT license. Your contributions are always welcome.