ng-select2-component 17.2.10 → 17.3.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.
Files changed (15) hide show
  1. package/CHANGELOG.md +21 -1
  2. package/README.md +34 -25
  3. package/fesm2022/ng-select2-component.mjs +130 -36
  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 +17 -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,6 +1,26 @@
1
1
  # Changelog of ng-select2
2
2
 
3
- ## V17.2.10 (2026-03-05)
3
+ ## V17.3.1 (2026-05-21)
4
+
5
+ - feat: searches done in Japanese (e.g. はハばバぱパ are considered the same character)
6
+ - feat: highlight ongoing searches done in Japaneseks
7
+
8
+ ## V17.3.0 (2026-05-21)
9
+
10
+ ### Change
11
+
12
+ - feat: highlighting ongoing research #95
13
+ - add `highlightText` parameter on `ng-select2` (`select2`) tag
14
+ - add `highlightText` pipe (`Select2HighlightPipe`)
15
+ - add CSS variables:
16
+ - `--select2-highlight-text-background`
17
+ - `--select2-highlight-text-color`
18
+ - `--select2-highlight-font-weight`
19
+ - `--select2-highlighted-highlight-text-background`
20
+ - `--select2-highlighted-highlight-text-color`
21
+ - `--select2-highlighted-highlight-font-weight`
22
+
23
+ ## V17.2.10 (2026-04-04)
4
24
 
5
25
  > Added near-complete code coverage with Vitest.\
6
26
  > Some of the code has been fixed (dead code, untestable code, etc.).
package/README.md CHANGED
@@ -21,20 +21,20 @@ npm i ng-select2-component --save
21
21
 
22
22
  ### Notes
23
23
 
24
- | Version  | For **Angular** | Notes |
25
- | --------- | ---------------- | ----------------- |
26
- | `17.2.x` | 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 |
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 |
38
38
 
39
39
  ## Demo
40
40
 
@@ -134,12 +134,13 @@ or
134
134
  | `templateSelection` | `TemplateRef` | | use templates for formatting content (see [Templating](#templating)) | |
135
135
  | `noLabelTemplate` | `boolean` | `false` | do not use the template in the selection, stay in text mode | |
136
136
  | `selectionOverride` | [`Select2SelectionOverride`](#select2-data-structure) | | Replace selection by a text<br>`string`: `%size%` = total selected options<br>`function`: juste show the string | |
137
- | `selectionNoWrap` | `boolean` | `false` | Force selection on one line | |
137
+ | `selectionNoWrap` | `boolean` | `false` | force selection on one line | |
138
138
  | `showSelectAll` | `boolean` | `false` | Add an option to select all options | with `multiple` |
139
139
  | `selectAllText` | `string` | `'Select all'` | Text when all options as not selected | with `multiple` |
140
- | `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` |
141
141
  | `editPattern` | `(str: string) => string` | | use it for change the pattern of the filter search | |
142
- | `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) | |
143
144
  | `ngModel`<br>`id`<br>`required`<br>`disabled`<br>`readonly`<br>`tabIndex` | | | just like a `select` control | |
144
145
  | `(update)` | `(event: `[`Select2UpdateEvent`](#select2-data-structure)`) => void` | | triggered when user select an option | |
145
146
  | `(open)` | `(event: Select2) => void` | | triggered when user open the options | |
@@ -255,9 +256,9 @@ export type Select2Template = TemplateRef<any> | { [key: string]: TemplateRef<an
255
256
  #### Unique template
256
257
 
257
258
  ```html
258
- <select2 [data]="data" [templates]="template">
259
+ <ng-select2 [data]="data" [templates]="template">
259
260
  <ng-template #template let-data="data"><strong>{{data?.color}}</strong>: {{data?.name}}</ng-template>
260
- </select2>
261
+ </ng-select2>
261
262
  ```
262
263
 
263
264
  ```ts
@@ -278,10 +279,10 @@ const data: Select2Data = [
278
279
  #### Template group & option
279
280
 
280
281
  ```html
281
- <select2 [data]="data" [templates]="{option : option, group: group}">
282
+ <ng-select2 [data]="data" [templates]="{option : option, group: group}">
282
283
  <ng-template #option let-data="data">{{data?.name}}</ng-template>
283
284
  <ng-template #group let-label="label">Group: {{label}}</ng-template>
284
- </select2>
285
+ </ng-select2>
285
286
  ```
286
287
 
287
288
  No difference in data structure.
@@ -290,10 +291,10 @@ The template is defined by its type, option or group, automatically.
290
291
  #### Template by templateId
291
292
 
292
293
  ```html
293
- <select2 [data]="data" [templates]="{template1 : template1, template2: template2}">
294
+ <ng-elect2 [data]="data" [templates]="{template1 : template1, template2: template2}">
294
295
  <ng-template #template1 let-data="data">{{data?.name}}</ng-template>
295
296
  <ng-template #template2 let-label="label" let-data="data">{{label}} : {{data?.color}}</ng-template>
296
- </select2>
297
+ </ng-elect2>
297
298
  ```
298
299
 
299
300
  ```ts
@@ -316,9 +317,9 @@ const data: Select2Data = [
316
317
  #### Template for change the selection
317
318
 
318
319
  ```html
319
- <select2 [data]="data" [templateSelection]="templateSelection">
320
+ <ng-select2 [data]="data" [templateSelection]="templateSelection">
320
321
  <ng-template #templateSelection let-data="data"><strong>{{ data?.color }}</strong> ({{ data?.name }})</ng-template>
321
- </select2>
322
+ </ng-select2>
322
323
  ```
323
324
 
324
325
  #### Possible object
@@ -449,6 +450,14 @@ It's possible to change different colors (and more) with CSS variables without h
449
450
  /* hint */
450
451
  --select2-hint-text-color: #888;
451
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
+
452
461
  /* for Material ------------------------------------------*/
453
462
  --select2-material-underline: #ddd;
454
463
  --select2-material-underline-active: #5a419e;