@gravitee/ui-particles-angular 16.0.1 → 16.1.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.
|
@@ -477,8 +477,11 @@ class GioFormTagsInputComponent {
|
|
|
477
477
|
this.describedBy = ids.join(' ');
|
|
478
478
|
}
|
|
479
479
|
// From MatFormFieldControl interface
|
|
480
|
-
|
|
481
|
-
|
|
480
|
+
onContainerClick(_event) {
|
|
481
|
+
if (this._tagInput) {
|
|
482
|
+
this._tagInput.nativeElement.focus();
|
|
483
|
+
}
|
|
484
|
+
}
|
|
482
485
|
addChipToFormControl(event) {
|
|
483
486
|
const input = this._tagInput?.nativeElement;
|
|
484
487
|
const tagToAdd = (event.value ?? '').trim();
|
|
@@ -524,9 +527,11 @@ class GioFormTagsInputComponent {
|
|
|
524
527
|
if (typeof this._autocompleteOptions === 'function') {
|
|
525
528
|
return this._autocompleteOptions(this._tagInput?.nativeElement.value ?? '').pipe(map(options => sanitizeAutocompleteOptions(options)),
|
|
526
529
|
// Add options to displayValueCache to avoid call on select
|
|
527
|
-
tap(
|
|
528
|
-
|
|
529
|
-
|
|
530
|
+
tap(groups => {
|
|
531
|
+
groups.forEach(group => {
|
|
532
|
+
group.groupOptions.forEach(option => {
|
|
533
|
+
this.displayValueCache[option.value] = option.label;
|
|
534
|
+
});
|
|
530
535
|
});
|
|
531
536
|
}));
|
|
532
537
|
}
|
|
@@ -543,7 +548,7 @@ class GioFormTagsInputComponent {
|
|
|
543
548
|
provide: MatFormFieldControl,
|
|
544
549
|
useExisting: GioFormTagsInputComponent,
|
|
545
550
|
},
|
|
546
|
-
], viewQueries: [{ propertyName: "tagInput", first: true, predicate: ["tagInput"], descendants: true }], ngImport: i0, template: "<!--\n\n Copyright (C) 2025 The Gravitee team (http://gravitee.io)\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n you may not use this file except in compliance with the License.\n You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n distributed under the License is distributed on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n See the License for the specific language governing permissions and\n limitations under the License.\n\n-->\n<mat-chip-grid #tagChipList [attr.aria-label]=\"ariaLabel\" multiple [disabled]=\"disabled\">\n @for (tag of value; track tag) {\n <mat-chip-row [removable]=\"!disabled\" (removed)=\"removeChipToFormControl(tag)\" [disabled]=\"disabled\" (click)=\"tagClicked.emit(tag)\">\n @if (_displayValueWith) {\n {{ _displayValueWith(tag) | async }}\n } @else {\n {{ tag }}\n }\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip-row>\n }\n <input\n #tagInput\n [matAutocompleteDisabled]=\"!_autocompleteOptions || disabled\"\n [matAutocomplete]=\"auto\"\n [placeholder]=\"placeholder\"\n [matChipInputFor]=\"tagChipList\"\n [matChipInputAddOnBlur]=\"addOnBlur\"\n (matChipInputTokenEnd)=\"onMatChipTokenEnd()\"\n />\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onAutocompleteSelect($event)\">\n @if (loading) {\n <mat-option disabled id=\"loader\">\n <div class=\"loader-option\"><gio-loader></gio-loader></div>\n </mat-option>\n }\n @for (
|
|
551
|
+
], viewQueries: [{ propertyName: "tagInput", first: true, predicate: ["tagInput"], descendants: true }], ngImport: i0, template: "<!--\n\n Copyright (C) 2025 The Gravitee team (http://gravitee.io)\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n you may not use this file except in compliance with the License.\n You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n distributed under the License is distributed on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n See the License for the specific language governing permissions and\n limitations under the License.\n\n-->\n<mat-chip-grid #tagChipList [attr.aria-label]=\"ariaLabel\" multiple [disabled]=\"disabled\">\n @for (tag of value; track tag) {\n <mat-chip-row [removable]=\"!disabled\" (removed)=\"removeChipToFormControl(tag)\" [disabled]=\"disabled\" (click)=\"tagClicked.emit(tag)\">\n @if (_displayValueWith) {\n {{ _displayValueWith(tag) | async }}\n } @else {\n {{ tag }}\n }\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip-row>\n }\n <input\n #tagInput\n [matAutocompleteDisabled]=\"!_autocompleteOptions || disabled\"\n [matAutocomplete]=\"auto\"\n [placeholder]=\"placeholder\"\n [matChipInputFor]=\"tagChipList\"\n [matChipInputAddOnBlur]=\"addOnBlur\"\n (matChipInputTokenEnd)=\"onMatChipTokenEnd()\"\n />\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onAutocompleteSelect($event)\">\n @if (loading) {\n <mat-option disabled id=\"loader\">\n <div class=\"loader-option\"><gio-loader></gio-loader></div>\n </mat-option>\n }\n @for (group of autocompleteFilteredOptions$ | async; track group.groupLabel) {\n @if (group.groupLabel) {\n <mat-optgroup [label]=\"group.groupLabel\">\n @for (option of group.groupOptions; track option.value) {\n <mat-option [value]=\"option.value\">\n {{ option.label }}\n </mat-option>\n }\n </mat-optgroup>\n } @else {\n @for (option of group.groupOptions; track option.value) {\n <mat-option [value]=\"option.value\">\n {{ option.label }}\n </mat-option>\n }\n }\n }\n </mat-autocomplete>\n</mat-chip-grid>\n", styles: ["::ng-deep gio-form-tags-input .mat-mdc-standard-chip{height:unset!important;min-height:var(--mat-chip-container-height)}::ng-deep gio-form-tags-input .mat-mdc-standard-chip .mdc-evolution-chip__text-label{white-space:normal}.loader-option{display:flex}.loader-option gio-loader{width:24px}\n"], dependencies: [{ kind: "component", type: i3.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i3.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i5.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: GioLoaderComponent, selector: "gio-loader" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
547
552
|
}
|
|
548
553
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GioFormTagsInputComponent, decorators: [{
|
|
549
554
|
type: Component,
|
|
@@ -552,7 +557,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
552
557
|
provide: MatFormFieldControl,
|
|
553
558
|
useExisting: GioFormTagsInputComponent,
|
|
554
559
|
},
|
|
555
|
-
], standalone: false, template: "<!--\n\n Copyright (C) 2025 The Gravitee team (http://gravitee.io)\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n you may not use this file except in compliance with the License.\n You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n distributed under the License is distributed on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n See the License for the specific language governing permissions and\n limitations under the License.\n\n-->\n<mat-chip-grid #tagChipList [attr.aria-label]=\"ariaLabel\" multiple [disabled]=\"disabled\">\n @for (tag of value; track tag) {\n <mat-chip-row [removable]=\"!disabled\" (removed)=\"removeChipToFormControl(tag)\" [disabled]=\"disabled\" (click)=\"tagClicked.emit(tag)\">\n @if (_displayValueWith) {\n {{ _displayValueWith(tag) | async }}\n } @else {\n {{ tag }}\n }\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip-row>\n }\n <input\n #tagInput\n [matAutocompleteDisabled]=\"!_autocompleteOptions || disabled\"\n [matAutocomplete]=\"auto\"\n [placeholder]=\"placeholder\"\n [matChipInputFor]=\"tagChipList\"\n [matChipInputAddOnBlur]=\"addOnBlur\"\n (matChipInputTokenEnd)=\"onMatChipTokenEnd()\"\n />\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onAutocompleteSelect($event)\">\n @if (loading) {\n <mat-option disabled id=\"loader\">\n <div class=\"loader-option\"><gio-loader></gio-loader></div>\n </mat-option>\n }\n @for (
|
|
560
|
+
], standalone: false, template: "<!--\n\n Copyright (C) 2025 The Gravitee team (http://gravitee.io)\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n you may not use this file except in compliance with the License.\n You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n distributed under the License is distributed on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n See the License for the specific language governing permissions and\n limitations under the License.\n\n-->\n<mat-chip-grid #tagChipList [attr.aria-label]=\"ariaLabel\" multiple [disabled]=\"disabled\">\n @for (tag of value; track tag) {\n <mat-chip-row [removable]=\"!disabled\" (removed)=\"removeChipToFormControl(tag)\" [disabled]=\"disabled\" (click)=\"tagClicked.emit(tag)\">\n @if (_displayValueWith) {\n {{ _displayValueWith(tag) | async }}\n } @else {\n {{ tag }}\n }\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip-row>\n }\n <input\n #tagInput\n [matAutocompleteDisabled]=\"!_autocompleteOptions || disabled\"\n [matAutocomplete]=\"auto\"\n [placeholder]=\"placeholder\"\n [matChipInputFor]=\"tagChipList\"\n [matChipInputAddOnBlur]=\"addOnBlur\"\n (matChipInputTokenEnd)=\"onMatChipTokenEnd()\"\n />\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onAutocompleteSelect($event)\">\n @if (loading) {\n <mat-option disabled id=\"loader\">\n <div class=\"loader-option\"><gio-loader></gio-loader></div>\n </mat-option>\n }\n @for (group of autocompleteFilteredOptions$ | async; track group.groupLabel) {\n @if (group.groupLabel) {\n <mat-optgroup [label]=\"group.groupLabel\">\n @for (option of group.groupOptions; track option.value) {\n <mat-option [value]=\"option.value\">\n {{ option.label }}\n </mat-option>\n }\n </mat-optgroup>\n } @else {\n @for (option of group.groupOptions; track option.value) {\n <mat-option [value]=\"option.value\">\n {{ option.label }}\n </mat-option>\n }\n }\n }\n </mat-autocomplete>\n</mat-chip-grid>\n", styles: ["::ng-deep gio-form-tags-input .mat-mdc-standard-chip{height:unset!important;min-height:var(--mat-chip-container-height)}::ng-deep gio-form-tags-input .mat-mdc-standard-chip .mdc-evolution-chip__text-label{white-space:normal}.loader-option{display:flex}.loader-option gio-loader{width:24px}\n"] }]
|
|
556
561
|
}], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
|
|
557
562
|
type: Optional
|
|
558
563
|
}, {
|
|
@@ -592,16 +597,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
592
597
|
args: ['attr.aria-describedby']
|
|
593
598
|
}] } });
|
|
594
599
|
const defaultAutocompleteFilter = (options, search) => {
|
|
595
|
-
|
|
596
|
-
|
|
600
|
+
const optionsFilter = (options, search) => {
|
|
601
|
+
return options.filter(option => option.label.toLowerCase().includes((search ?? '').toLowerCase()) ||
|
|
602
|
+
option.value.toLowerCase().includes((search ?? '').toLowerCase()));
|
|
603
|
+
};
|
|
604
|
+
return sanitizeAutocompleteOptions(options)
|
|
605
|
+
.map(group => ({
|
|
606
|
+
groupLabel: group.groupLabel,
|
|
607
|
+
groupOptions: optionsFilter(group.groupOptions, search),
|
|
608
|
+
}))
|
|
609
|
+
.filter(group => group.groupOptions.length > 0);
|
|
597
610
|
};
|
|
598
611
|
const sanitizeAutocompleteOptions = (options) => {
|
|
599
|
-
|
|
612
|
+
const sanitizeFlatOptions = (flatOptions) => flatOptions.map(option => {
|
|
600
613
|
if (option && typeof option !== 'string' && 'value' in option && 'label' in option) {
|
|
601
614
|
return option;
|
|
602
615
|
}
|
|
603
616
|
return { value: option, label: option };
|
|
604
617
|
});
|
|
618
|
+
if (Array.isArray(options) &&
|
|
619
|
+
(options.length === 0 || typeof options[0] === 'string' || ('value' in options[0] && 'label' in options[0]))) {
|
|
620
|
+
const optionsFlat = options;
|
|
621
|
+
return [
|
|
622
|
+
{
|
|
623
|
+
groupOptions: sanitizeFlatOptions(optionsFlat),
|
|
624
|
+
},
|
|
625
|
+
];
|
|
626
|
+
}
|
|
627
|
+
else {
|
|
628
|
+
// Else option is Grouped
|
|
629
|
+
const optionsGrouped = options;
|
|
630
|
+
return optionsGrouped.map(group => ({
|
|
631
|
+
groupLabel: group.groupLabel,
|
|
632
|
+
groupOptions: sanitizeFlatOptions(group.groupOptions),
|
|
633
|
+
}));
|
|
634
|
+
}
|
|
605
635
|
};
|
|
606
636
|
|
|
607
637
|
/*
|