From 3066730ecfe19189e2fce1cd02be06856dc3fdd3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Z=C3=A9fling?= Date: Sat, 16 Nov 2024 00:39:27 +0100 Subject: [PATCH] Add properties: `selectionOverride` & `selectionNoWrap` #79 --- README.md | 13 ++++- .../src/lib/select2-interfaces.ts | 2 + .../src/lib/select2.component.html | 18 +++---- .../src/lib/select2.component.scss | 29 +++++++++++ .../src/lib/select2.component.ts | 28 +++++++++++ src/app/app-examples.component.html | 48 ++++++++++++++++++- src/app/app-examples.component.ts | 14 +++++- src/app/app-gen.component.html | 33 ++++++++++++- src/app/app-gen.component.ts | 19 ++++++++ 9 files changed, 191 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 6c4d73c..02e097e 100644 --- a/README.md +++ b/README.md @@ -93,7 +93,7 @@ class MainModule {} | `resultMaxHeight` | `string` | | `'200px'` | change the height size of results | | | `maxResults` | `number` | | `0` | maximum results limit (`0` = unlimited) | | | `maxResultsMessage` | `string` | | `'Too much result…'` | message when maximum result | | -| `grid` | `number` or `string` | | | option by line in grid layout (empty or `0` = no grid layout)
number: item by line
string: minimal item width | | +| `grid` | `number` or `string` | | | option by line in grid layout (empty or `0` = no grid layout)
`number`: item by line
`string`: minimal item width | | | `listPosition` | `'below'`
`'above'`
`'auto'` ¹ | | `'below'` | the position for the dropdown list | ¹ `'auto'`: only with `overlay` | | `infiniteScroll` | `boolean` | | `false` | active infiniteScroll on dropdown list | with `ngx-infinite-scroll` | | `infiniteScrollDistance` | `number` | | `1.5` | infiniteScroll distance | with `ngx-infinite-scroll` | @@ -103,6 +103,8 @@ class MainModule {} | `templates` | `TemplateRef`
`{option?: TemplateRef, group?: TemplateRef}`
etc.
(see ”possible object” in [Templating](#templating)) | | | use templates for formatting content (see [Templating](#templating)) | | | `templateSelection` | `TemplateRef` | | | use templates for formatting content (see [Templating](#templating)) | | | `noLabelTemplate` | `boolean` | | `false` | do not use the template in the selection, stay in text mode | | +| `selectionOverride` | `string` or function ([`Select2SelectionOverride`](#select2-data-structure)) | | | Replace selection by a text
`string`: `%size%` = total selected options
`function`: juste show the string | | +| `selectionNoWrap` | `boolean` | | `false` | Force selection on one line | | | `editPattern` | `(str: string) => string` | | | use it for change the pattern of the filter search | | | `ngModel`
`id`
`required`
`disabled`
`readonly`
`tabIndex` | | | | just like a `select` control | | | `(update)` | `(event: `[`Select2UpdateEvent`](#select2-data-structure)`) => void` | event | | triggered when user select an option | | @@ -115,6 +117,13 @@ class MainModule {} | `(removeOption)` | `(event: `[`Select2RemoveEvent`](#select2-data-structure)`) => void` | event | | triggered when an option is removed from the list of selected options options list | with `multiple` | | `(autoCreateItem)` | `(event: `[`Select2AutoCreateEvent`](#select2-data-structure)`) => void` | event | | triggered when a new item has been added | with `autoCreate` | + @Input() selectionOverride: Select2SelectionOverride; + + /** force selection on one line */ + @HostBinding('class.select2-selection-nowrap') + @Input({ transform: booleanAttribute }) + selectionNoWrap = false; + ### select2 data structure ```ts @@ -206,6 +215,8 @@ export interface Select2ScrollEvent { /** current data */ readonly data: Select2Data; } + +export type Select2SelectionOverride = string | ((params: { size: number; options: Select2Option[] | null }) => string); ``` ### Templating diff --git a/projects/ng-select2-component/src/lib/select2-interfaces.ts b/projects/ng-select2-component/src/lib/select2-interfaces.ts index 11efe45..ec2e6c1 100644 --- a/projects/ng-select2-component/src/lib/select2-interfaces.ts +++ b/projects/ng-select2-component/src/lib/select2-interfaces.ts @@ -90,3 +90,5 @@ export interface Select2ScrollEvent { /** current data */ readonly data: Select2Data; } + +export type Select2SelectionOverride = string | ((params: { size: number; options: Select2Option[] | null }) => string); diff --git a/projects/ng-select2-component/src/lib/select2.component.html b/projects/ng-select2-component/src/lib/select2.component.html index 486d45d..040ee25 100644 --- a/projects/ng-select2-component/src/lib/select2.component.html +++ b/projects/ng-select2-component/src/lib/select2.component.html @@ -31,7 +31,12 @@ [class.select2-selection--single]="!multiple" role="combobox" > - @if (!multiple) { + @if (selectionOverride) { + + @if (!multiple && resettable && resetSelectedValue !== value && select2Option && !(disabled || readonly)) { + × + } + } @else if (!multiple) { @if (!select2Option) {   @@ -51,14 +56,11 @@ >{{ placeholder }} - } - @if (!multiple && resettable && resetSelectedValue !== value && select2Option && !(disabled || readonly)) { - × - } - @if (!multiple) { + @if (resettable && resetSelectedValue !== value && select2Option && !(disabled || readonly)) { + × + } - } - @if (multiple) { + } @else {