Skip to content

Commit

Permalink
Add properties: selectionOverride & selectionNoWrap #79
Browse files Browse the repository at this point in the history
  • Loading branch information
@Zefling
Zefling committed Nov 15, 2024
1 parent b8cddcc commit 3066730
Show file tree
Hide file tree
Showing 9 changed files with 191 additions and 13 deletions.
13 changes: 12 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)<br>number: item by line<br>string: minimal item width | |
| `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 | |
| `listPosition` | `'below'`<br>`'above'`<br>`'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` |
Expand All @@ -103,6 +103,8 @@ class MainModule {}
| `templates` | `TemplateRef`<br>`{option?: TemplateRef, group?: TemplateRef}`<br>etc.<br>(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<br>`string`: `%size%` = total selected options<br>`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`<br>`id`<br>`required`<br>`disabled`<br>`readonly`<br>`tabIndex` | | | | just like a `select` control | |
| `(update)` | `(event: `[`Select2UpdateEvent`](#select2-data-structure)`) => void` | event | | triggered when user select an option | |
Expand All @@ -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
Expand Down Expand Up @@ -206,6 +215,8 @@ export interface Select2ScrollEvent {
/** current data */
readonly data: Select2Data;
}

export type Select2SelectionOverride = string | ((params: { size: number; options: Select2Option[] | null }) => string);
```

### Templating
Expand Down
2 changes: 2 additions & 0 deletions projects/ng-select2-component/src/lib/select2-interfaces.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,3 +90,5 @@ export interface Select2ScrollEvent {
/** current data */
readonly data: Select2Data;
}

export type Select2SelectionOverride = string | ((params: { size: number; options: Select2Option[] | null }) => string);
18 changes: 10 additions & 8 deletions projects/ng-select2-component/src/lib/select2.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,12 @@
[class.select2-selection--single]="!multiple"
role="combobox"
>
@if (!multiple) {
@if (selectionOverride) {
<span class="select2-selection__override" [innerHTML]="_selectionOverrideLabel()"></span>
@if (!multiple && resettable && resetSelectedValue !== value && select2Option && !(disabled || readonly)) {
<span (click)="reset($event)" class="select2-selection__reset" role="presentation">×</span>
}
} @else if (!multiple) {
<span class="select2-selection__rendered" [title]="select2Option?.label || ''">
@if (!select2Option) {
<span>&nbsp;</span>
Expand All @@ -51,14 +56,11 @@
>{{ placeholder }}</span
>
</span>
}
@if (!multiple && resettable && resetSelectedValue !== value && select2Option && !(disabled || readonly)) {
<span (click)="reset($event)" class="select2-selection__reset" role="presentation">×</span>
}
@if (!multiple) {
@if (resettable && resetSelectedValue !== value && select2Option && !(disabled || readonly)) {
<span (click)="reset($event)" class="select2-selection__reset" role="presentation">×</span>
}
<span class="select2-selection__arrow" role="presentation"> </span>
}
@if (multiple) {
} @else {
<ul class="select2-selection__rendered">
@if (!autoCreate) {
<span
Expand Down
29 changes: 29 additions & 0 deletions projects/ng-select2-component/src/lib/select2.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,11 @@
display: none;
}

.select2-selection__override {
flex: 1;
margin: 0 5px;
}

.select2-selection__reset,
.select2-selection__arrow {
display: flex;
Expand Down Expand Up @@ -317,6 +322,11 @@
display: none;
}

.select2-selection__override {
flex: 1;
margin: 0 5px;
}

.select2-selection__clear {
cursor: pointer;
float: right;
Expand Down Expand Up @@ -577,6 +587,25 @@
}
}
}

&.select2-selection-nowrap {
.select2-selection--single,
.select2-selection--multiple {
&.select2-selection {
&,
& span,
& ul {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
& ul {
display: flex;
flex-wrap: nowrap;
}
}
}
}
}

// material style
Expand Down
28 changes: 28 additions & 0 deletions projects/ng-select2-component/src/lib/select2.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ import {
Select2RemoveEvent,
Select2ScrollEvent,
Select2SearchEvent,
Select2SelectionOverride,
Select2UpdateEvent,
Select2UpdateValue,
Select2Value,
Expand Down Expand Up @@ -201,6 +202,18 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
*/
@Input() grid = '';

/**
* Replace selection by a text
* * if string: `%size%` = total selected options
* * if function: juste show the string
*/
@Input() selectionOverride: Select2SelectionOverride;

/** force selection on one line */
@HostBinding('class.select2-selection-nowrap')
@Input({ transform: booleanAttribute })
selectionNoWrap = false;

@Output() update = new EventEmitter<Select2UpdateEvent<Select2UpdateValue>>();
@Output() autoCreateItem = new EventEmitter<Select2AutoCreateEvent<Select2UpdateValue>>();
@Output() open = new EventEmitter<Select2>();
Expand Down Expand Up @@ -941,6 +954,21 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
return !!(isInvalid && (isTouched || isSubmitted));
}

_selectionOverrideLabel() {
if (typeof this.selectionOverride === 'function') {
return this.selectionOverride({
size: this.optionsSize(),
options: Array.isArray(this.option) ? this.option : this.option ? [this.option] : null,
});
} else if (typeof this.selectionOverride === 'string') {
return this.selectionOverride.replaceAll('%size%', `${this.optionsSize()}`);
}
}

private optionsSize() {
return Array.isArray(this.option) ? this.option.length : this.option ? 1 : 0;
}

private addItem(value: string): Select2Option {
let item = Select2Utils.getOptionByValue(this._data, value);
if (!item) {
Expand Down
48 changes: 47 additions & 1 deletion src/app/app-examples.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,9 @@ <h3 id="ex-9">9. multiple + limite <input type="number" [(ngModel)]="limitSelect
>
</select2>
<h3 id="ex-10">10. multiple + hide selected items ({{ value10 | json }})</h3>

<label><input id="no-wrap" type="checkbox" [(ngModel)]="selectionNoWrap" /> selectionNoWrap</label>

<select2
[overlay]="overlay"
[data]="data10"
Expand All @@ -114,6 +117,7 @@ <h3 id="ex-10">10. multiple + hide selected items ({{ value10 | json }})</h3>
(update)="update('value10', $event)"
hideSelectedItems="true"
id="selec2-10"
[selectionNoWrap]="selectionNoWrap"
>
</select2>
<h3 id="ex-11">11. material style and form binding ({{ value11 }})</h3>
Expand Down Expand Up @@ -468,7 +472,7 @@ <h3 id="ex-35">35. grid-auto ({{ value35 }})</h3>
(update)="update('value35', $event)"
></select2>

<h3 id="ex-35b">35b. grid-auto sub-group + multiple ({{ value35b }})</h3>
<h3 id="ex-35b">35b. grid-auto sub-group + multiple ({{ value35b | json }})</h3>
<select2
[overlay]="overlay"
[data]="data35b"
Expand All @@ -479,4 +483,46 @@ <h3 id="ex-35b">35b. grid-auto sub-group + multiple ({{ value35b }})</h3>
(autoCreateItem)="update('value35b', $event)"
(update)="update('value35b', $event)"
></select2>

<h3 id="ex-35">36. selectionOverride ({{ value36 }})</h3>
<select2
selectionOverride="Test (%size%)"
resettable
[overlay]="overlay"
[data]="data36"
[value]="value36"
id="selec2-36"
(update)="update('value36', $event)"
>
</select2>
<br />

<h3 id="ex-36m">36b. selectionOverride multiple ({{ value36m | json }})</h3>

<select2
selectionOverride="Test (%size%)"
[overlay]="overlay"
[data]="data36m"
[value]="value36m"
id="selec2-36-m"
(update)="update('value36m', $event)"
multiple
>
</select2>

<h3 id="ex-36mf">36c. selectionOverride multiple / function ({{ value36mf | json }})</h3>

<label><input id="no-wrap" type="checkbox" [(ngModel)]="selectionNoWrap" /> selectionNoWrap</label>

<select2
[selectionOverride]="selectionOverride"
[selectionNoWrap]="selectionNoWrap"
[overlay]="overlay"
[data]="data36mf"
[value]="value36mf"
id="selec2-36-mf"
(update)="update('value36mf', $event)"
multiple
>
</select2>
</div>
14 changes: 13 additions & 1 deletion src/app/app-examples.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
Select2Data,
Select2ScrollEvent,
Select2SearchEvent,
Select2SelectionOverride,
Select2UpdateEvent,
} from 'projects/ng-select2-component/src/public_api';

Expand Down Expand Up @@ -72,6 +73,9 @@ export class AppExamplesComponent {
data34b = data1;
data35 = data35;
data35b = data35b;
data36 = data1;
data36m = data1;
data36mf = data1;

minCountForSearch = Infinity;

Expand All @@ -88,7 +92,7 @@ export class AppExamplesComponent {
value7 = '';
value8 = '';
value9: string[] = [];
value10: string[] = ['CA', 'OR'];
value10: string[] = ['CA', 'OR', 'RI', 'WV', 'VT', 'VA', 'AR', 'IA'];
value11 = 'CA';
value12 = 'CA';
value13 = true;
Expand Down Expand Up @@ -117,10 +121,18 @@ export class AppExamplesComponent {
value34b = '';
value35 = '';
value35b = '';
value36 = '';
value36m = ['NY', 'NC', 'RI', 'WV', 'VT', 'VA', 'AR', 'IA'];
value36mf = ['NY', 'NC', 'RI', 'WV', 'VT', 'VA', 'AR', 'IA'];

selectionOverride: Select2SelectionOverride = params => {
return `Selection (${params.size}${params.options.length > 0 ? ': ' + params.options.map(e => e.label).join(', ') : ''}) `;
};

limitSelection = 0;

overlay = false;
selectionNoWrap = false;

fg: UntypedFormGroup = new UntypedFormGroup({
state: new UntypedFormControl(),
Expand Down
33 changes: 31 additions & 2 deletions src/app/app-gen.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,30 @@ <h4>parameters</h4>
<option value="borderless">borderless</option>
</select>
</div>
<h4>Templates</h4>

<h5>Selection</h5>
<div>selectionOverride:</div>
<div>
<label for="selectionOverrideFunction"> - function : </label>
<input type="checkbox" formControlName="selectionOverrideFunction" id="selectionOverrideFunction" />
</div>
<div>
<label for="selectionOverrideString">
- string: <br /><small><code>%size%</code> = selected item count </small></label
>
<input
type="text"
formControlName="selectionOverrideString"
id="selectionOverrideString"
[attr.disabled]="ctrlForm?.value?.selectionOverrideFunction === true ? 'disabled' : null"
/>
</div>
<div>
<label for="selectionNoWrap">selectionOverride : </label>
<input type="checkbox" formControlName="selectionNoWrap" id="selectionNoWrap" />
</div>

<h5>Templates</h5>
<div>
<label for="template">template style :</label>
<select formControlName="template" id="template">
Expand All @@ -155,7 +178,7 @@ <h4>Templates</h4>
<h4>Events</h4>
<div>
<label for="update">update: </label>
<input type="checkbox" formControlName="update" id="update" />
<input type="checkbox" formControlName="selectionOverride" id="update" />
</div>
<div>
<label for="open">open: </label>
Expand Down Expand Up @@ -217,6 +240,12 @@ <h4>HTML render</h4>
[noResultMessage]="ctrlForm?.value?.noResultMessage"
[grid]="ctrlForm?.value?.grid"
[noLabelTemplate]="ctrlForm?.value?.noLabelTemplate"
[selectionOverride]="
ctrlForm?.value?.selectionOverrideFunction
? selectionOverride
: ctrlForm?.value?.selectionOverrideString
"
[selectionNoWrap]="ctrlForm?.value?.selectionNoWrap"
[templates]="
getTemplate(
template,
Expand Down
Loading

0 comments on commit 3066730

Please sign in to comment.