@gravitee/ui-particles-angular 7.27.0 → 7.28.0

package/fesm2020/gravitee-ui-particles-angular.mjs

@@ -4,7 +4,7 @@ import * as i0 from '@angular/core';
 import { Injectable, SecurityContext, APP_ID, Component, Inject, Input, NgModule, EventEmitter, HostBinding, Output, HostListener, Optional, Self, ViewChild, Directive, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, ContentChildren, Host, ContentChild, InjectionToken } from '@angular/core';
 import * as i4 from '@angular/common/http';
 import { HttpClientModule } from '@angular/common/http';
-import { shareReplay, switchMap, catchError, takeUntil, startWith, map, distinctUntilChanged, tap, debounce, delay, filter, take, debounceTime } from 'rxjs/operators';
+import { shareReplay, switchMap, catchError, takeUntil, tap, startWith, map, distinctUntilChanged, debounce, delay, filter, take, debounceTime } from 'rxjs/operators';
 import { Observable, of, ReplaySubject, Subject, forkJoin, timer, fromEvent, BehaviorSubject, merge } from 'rxjs';
 import * as i3 from '@angular/platform-browser';
 import { trigger, transition, style, animate } from '@angular/animations';
@@ -550,6 +550,7 @@ class GioFormTagsInputComponent {
         this.focused = false;
         this._required = false;
         this._disabled = false;
+        this.displayValueCache = {};
         // From ControlValueAccessor interface
         this.describedBy = '';
         // Replace the provider from above with this.
@@ -569,6 +570,21 @@ class GioFormTagsInputComponent {
         this._autocompleteOptions = v;
         this.initAutocomplete();
     }
+    /**
+     * Get the label of an option value.
+     * To use with autocompleteOptions label & value mode.
+     * Function called each time a tag needs to be displayed id defined.
+     */
+    set displayValueWith(displayValueWith) {
+        this._displayValueWith = (value) => {
+            if (this.displayValueCache[value]) {
+                return of(this.displayValueCache[value]);
+            }
+            return displayValueWith(value).pipe(tap(label => {
+                this.displayValueCache[value] = label;
+            }));
+        };
+    }
     set tagInput(v) {
         this._tagInput = v;
         this.initAutocomplete();
@@ -689,8 +705,17 @@ class GioFormTagsInputComponent {
     }
     initAutocomplete() {
         if (this._autocompleteOptions && this._tagInput?.nativeElement) {
-            this.autocompleteFilteredOptions$ = fromEvent(this._tagInput.nativeElement, 'keyup').pipe(startWith([]), map(() => {
-                return (this._autocompleteOptions ?? []).filter(defaultHeader => defaultHeader.toLowerCase().includes((this._tagInput?.nativeElement.value ?? '').toLowerCase()));
+            this.autocompleteFilteredOptions$ = fromEvent(this._tagInput.nativeElement, 'keyup').pipe(startWith([]), switchMap(() => {
+                if (typeof this._autocompleteOptions === 'function') {
+                    return this._autocompleteOptions(this._tagInput?.nativeElement.value ?? '').pipe(map(options => sanitizeAutocompleteOptions(options)), 
+                    // Add options to displayValueCache to avoid call on select
+                    tap(options => {
+                        options.forEach(option => {
+                            this.displayValueCache[option.value] = option.label;
+                        });
+                    }));
+                }
+                return of(defaultAutocompleteFilter(this._autocompleteOptions ?? [], this._tagInput?.nativeElement.value ?? ''));
             }), distinctUntilChanged());
             this.changeDetectorRef.detectChanges();
         }
@@ -698,12 +723,12 @@ class GioFormTagsInputComponent {
 }
 GioFormTagsInputComponent.nextId = 0;
 GioFormTagsInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormTagsInputComponent, deps: [{ token: i7.NgControl, optional: true, self: true }, { token: i0.ElementRef }, { token: i2$2.FocusMonitor }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-GioFormTagsInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFormTagsInputComponent, selector: "gio-form-tags-input", inputs: { ariaLabel: ["aria-label", "ariaLabel"], addOnBlur: "addOnBlur", tagValidationHook: "tagValidationHook", autocompleteOptions: "autocompleteOptions", placeholder: "placeholder", required: "required", disabled: "disabled" }, host: { properties: { "id": "this.id", "class.floating": "this.shouldLabelFloat", "attr.aria-describedby": "this.describedBy" } }, providers: [
+GioFormTagsInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFormTagsInputComponent, selector: "gio-form-tags-input", inputs: { ariaLabel: ["aria-label", "ariaLabel"], addOnBlur: "addOnBlur", tagValidationHook: "tagValidationHook", autocompleteOptions: "autocompleteOptions", displayValueWith: "displayValueWith", placeholder: "placeholder", required: "required", disabled: "disabled" }, host: { properties: { "id": "this.id", "class.floating": "this.shouldLabelFloat", "attr.aria-describedby": "this.describedBy" } }, providers: [
         {
             provide: MatFormFieldControl,
             useExisting: GioFormTagsInputComponent,
         },
-    ], viewQueries: [{ propertyName: "tagInput", first: true, predicate: ["tagInput"], descendants: true }], ngImport: i0, template: "<!--\n\n    Copyright (C) 2015 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-list #tagChipList [attr.aria-label]=\"ariaLabel\" multiple [disabled]=\"disabled\">\n  <mat-chip *ngFor=\"let tag of value\" [selectable]=\"false\" [removable]=\"!disabled\" (removed)=\"removeChipToFormControl(tag)\">\n    {{ tag }}\n    <mat-icon matChipRemove>cancel</mat-icon>\n  </mat-chip>\n  <input\n    *ngIf=\"!disabled\"\n    #tagInput\n    [matAutocompleteDisabled]=\"!_autocompleteOptions\"\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    <mat-option *ngFor=\"let value of autocompleteFilteredOptions$ | async\" [value]=\"value\">\n      {{ value }}\n    </mat-option>\n  </mat-autocomplete>\n</mat-chip-list>\n", styles: [""], components: [{ type: i3$1.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i3$1.MatChipRemove, selector: "[matChipRemove]" }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i3$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }], pipes: { "async": i2$1.AsyncPipe } });
+    ], viewQueries: [{ propertyName: "tagInput", first: true, predicate: ["tagInput"], descendants: true }], ngImport: i0, template: "<!--\n\n    Copyright (C) 2015 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-list #tagChipList [attr.aria-label]=\"ariaLabel\" multiple [disabled]=\"disabled\">\n  <mat-chip *ngFor=\"let tag of value\" [selectable]=\"false\" [removable]=\"!disabled\" (removed)=\"removeChipToFormControl(tag)\">\n    {{ _displayValueWith ? (_displayValueWith(tag) | async) : tag }}\n    <mat-icon matChipRemove>cancel</mat-icon>\n  </mat-chip>\n  <input\n    *ngIf=\"!disabled\"\n    #tagInput\n    [matAutocompleteDisabled]=\"!_autocompleteOptions\"\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    <mat-option *ngFor=\"let option of autocompleteFilteredOptions$ | async\" [value]=\"option.value\">\n      {{ option.label }}\n    </mat-option>\n  </mat-autocomplete>\n</mat-chip-list>\n", styles: [""], components: [{ type: i3$1.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i3$1.MatChipRemove, selector: "[matChipRemove]" }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i3$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }], pipes: { "async": i2$1.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormTagsInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gio-form-tags-input', providers: [
@@ -711,7 +736,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             provide: MatFormFieldControl,
                             useExisting: GioFormTagsInputComponent,
                         },
-                    ], template: "<!--\n\n    Copyright (C) 2015 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-list #tagChipList [attr.aria-label]=\"ariaLabel\" multiple [disabled]=\"disabled\">\n  <mat-chip *ngFor=\"let tag of value\" [selectable]=\"false\" [removable]=\"!disabled\" (removed)=\"removeChipToFormControl(tag)\">\n    {{ tag }}\n    <mat-icon matChipRemove>cancel</mat-icon>\n  </mat-chip>\n  <input\n    *ngIf=\"!disabled\"\n    #tagInput\n    [matAutocompleteDisabled]=\"!_autocompleteOptions\"\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    <mat-option *ngFor=\"let value of autocompleteFilteredOptions$ | async\" [value]=\"value\">\n      {{ value }}\n    </mat-option>\n  </mat-autocomplete>\n</mat-chip-list>\n", styles: [""] }]
+                    ], template: "<!--\n\n    Copyright (C) 2015 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-list #tagChipList [attr.aria-label]=\"ariaLabel\" multiple [disabled]=\"disabled\">\n  <mat-chip *ngFor=\"let tag of value\" [selectable]=\"false\" [removable]=\"!disabled\" (removed)=\"removeChipToFormControl(tag)\">\n    {{ _displayValueWith ? (_displayValueWith(tag) | async) : tag }}\n    <mat-icon matChipRemove>cancel</mat-icon>\n  </mat-chip>\n  <input\n    *ngIf=\"!disabled\"\n    #tagInput\n    [matAutocompleteDisabled]=\"!_autocompleteOptions\"\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    <mat-option *ngFor=\"let option of autocompleteFilteredOptions$ | async\" [value]=\"option.value\">\n      {{ option.label }}\n    </mat-option>\n  </mat-autocomplete>\n</mat-chip-list>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i7.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -725,6 +750,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], autocompleteOptions: [{
                 type: Input
+            }], displayValueWith: [{
+                type: Input
             }], tagInput: [{
                 type: ViewChild,
                 args: ['tagInput']
@@ -744,6 +771,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: HostBinding,
                 args: ['attr.aria-describedby']
             }] } });
+const defaultAutocompleteFilter = (options, search) => {
+    return sanitizeAutocompleteOptions(options).filter(defaultHeader => defaultHeader.label.toLowerCase().includes((search ?? '').toLowerCase()) ||
+        defaultHeader.value.toLowerCase().includes((search ?? '').toLowerCase()));
+};
+const sanitizeAutocompleteOptions = (options) => {
+    return options.map(option => {
+        if (option && typeof option !== 'string' && 'value' in option && 'label' in option) {
+            return option;
+        }
+        return { value: option, label: option };
+    });
+};
 
 /*
  * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
@@ -3153,6 +3192,7 @@ class GioFormlyJsonSchemaService {
                 mappedField = this.bannerMap(mappedField, mapSource);
                 mappedField = this.toggleMap(mappedField, mapSource);
                 mappedField = this.disabledMap(mappedField, mapSource);
+                mappedField = this.enumLabelMap(mappedField, mapSource);
                 return mappedField;
             },
         });
@@ -3214,6 +3254,20 @@ class GioFormlyJsonSchemaService {
         };
         return mappedField;
     }
+    enumLabelMap(mappedField, mapSource) {
+        if (mapSource.enum && !isEmpty(mapSource.enum) && mapSource.gioConfig?.enumLabelMap && isArray(mappedField.props?.options)) {
+            mappedField.props = {
+                ...mappedField.props,
+                options: mappedField.props?.options?.map(({ value }) => {
+                    return {
+                        label: value ? mapSource.gioConfig?.enumLabelMap?.[value] : value,
+                        value: value,
+                    };
+                }),
+            };
+        }
+        return mappedField;
+    }
 }
 GioFormlyJsonSchemaService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormlyJsonSchemaService, deps: [{ token: i1$3.FormlyJsonschema }, { token: i1$4.FormlyFormBuilder }], target: i0.ɵɵFactoryTarget.Injectable });
 GioFormlyJsonSchemaService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormlyJsonSchemaService });