@gravitee/ui-particles-angular 7.37.5 → 7.38.0

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

@@ -19,11 +19,11 @@ import { MatFormFieldControl, MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS
 import { isEmpty, toLower, dropRight, isNil, isArray, remove, isObject, cloneDeep, uniqueId, set, range } from 'lodash';
 import * as i7 from '@angular/forms';
 import { FormsModule, FormArray, FormGroup, FormControl, Validators, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule, NgControl } from '@angular/forms';
-import * as i1$1 from '@angular/cdk/a11y';
+import * as i1$2 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import * as i3$2 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
-import * as i1$2 from '@angular/material/icon';
+import * as i1$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i5 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
@@ -53,7 +53,7 @@ import { MatSlideToggle, MatSlideToggleModule } from '@angular/material/slide-to
 import { TestBed } from '@angular/core/testing';
 import * as i4$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i3$5 from '@angular/cdk/clipboard';
+import * as i1$6 from '@angular/cdk/clipboard';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import Cronstrue from 'cronstrue/i18n';
 import * as i2$3 from '@angular/material/button-toggle';
@@ -520,6 +520,30 @@ class GioSaveBarHarness extends ComponentHarness {
 }
 GioSaveBarHarness.hostSelector = 'gio-save-bar';
 
+/*
+ * Copyright (C) 2023 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class GioLoaderComponent {
+}
+GioLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GioLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioLoaderComponent, selector: "gio-loader", ngImport: i0, template: "<!--\n\n    Copyright (C) 2023 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<div class=\"loader\">\n  <mat-icon svgIcon=\"gio:loader\"></mat-icon>\n</div>\n", styles: [":host{position:relative;display:flex;width:48px;height:48px;align-self:center;margin:auto}.loader{display:flex;align-items:center;justify-content:center;animation:rotation 2s infinite linear}.loader mat-icon{width:100%;height:100%;margin:0}@keyframes rotation{to{transform:rotate(360deg)}}\n"], components: [{ type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gio-loader', template: "<!--\n\n    Copyright (C) 2023 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<div class=\"loader\">\n  <mat-icon svgIcon=\"gio:loader\"></mat-icon>\n</div>\n", styles: [":host{position:relative;display:flex;width:48px;height:48px;align-self:center;margin:auto}.loader{display:flex;align-items:center;justify-content:center;animation:rotation 2s infinite linear}.loader mat-icon{width:100%;height:100%;margin:0}@keyframes rotation{to{transform:rotate(360deg)}}\n"] }]
+        }] });
+
 class GioFormTagsInputComponent {
     constructor(
     // From ControlValueAccessor interface
@@ -550,6 +574,7 @@ class GioFormTagsInputComponent {
         this.useAutocompleteOptionValueOnly = false;
         this._tagInput = null;
         this.displayValueCache = {};
+        this.loading = false;
         this._value = null;
         // From MatFormFieldControl interface
         this.stateChanges = new Subject();
@@ -577,7 +602,6 @@ class GioFormTagsInputComponent {
     }
     set autocompleteOptions(v) {
         this._autocompleteOptions = v;
-        this.initAutocomplete();
     }
     /**
      * Get the label of an option value.
@@ -595,8 +619,17 @@ class GioFormTagsInputComponent {
         };
     }
     set tagInput(v) {
+        if (v) {
+            this.fm.monitor(v.nativeElement).subscribe(origin => {
+                if (origin) {
+                    this.initAutocomplete();
+                }
+            });
+        }
+        else if (this._tagInput) {
+            this.fm.stopMonitoring(this._tagInput.nativeElement);
+        }
         this._tagInput = v;
-        this.initAutocomplete();
     }
     // From MatFormFieldControl interface
     get value() {
@@ -657,6 +690,9 @@ class GioFormTagsInputComponent {
     ngOnDestroy() {
         this.stateChanges.complete();
         this.fm.stopMonitoring(this.elRef.nativeElement);
+        if (this._tagInput) {
+            this.fm.stopMonitoring(this._tagInput.nativeElement);
+        }
     }
     // From ControlValueAccess interface
     setDisabledState(isDisabled) {
@@ -719,7 +755,9 @@ class GioFormTagsInputComponent {
     }
     initAutocomplete() {
         if (this._autocompleteOptions && this._tagInput?.nativeElement) {
-            this.autocompleteFilteredOptions$ = fromEvent(this._tagInput.nativeElement, 'keyup').pipe(startWith([]), switchMap(() => {
+            this.autocompleteFilteredOptions$ = fromEvent(this._tagInput.nativeElement, 'keyup').pipe(startWith([]), tap(() => {
+                this.loading = true;
+            }), 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
@@ -730,19 +768,21 @@ class GioFormTagsInputComponent {
                     }));
                 }
                 return of(defaultAutocompleteFilter(this._autocompleteOptions ?? [], this._tagInput?.nativeElement.value ?? ''));
+            }), tap(() => {
+                this.loading = false;
             }), distinctUntilChanged());
             this.changeDetectorRef.detectChanges();
         }
     }
 }
 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: i1$1.FocusMonitor }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+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: i1$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", displayValueWith: "displayValueWith", useAutocompleteOptionValueOnly: "useAutocompleteOptionValueOnly", 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\n    *ngFor=\"let tag of value\"\n    [selectable]=\"false\"\n    [removable]=\"!disabled\"\n    (removed)=\"removeChipToFormControl(tag)\"\n    [disabled]=\"disabled\"\n  >\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 || 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    <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$2.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$2.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$2.MatChipRemove, selector: "[matChipRemove]" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i3$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], 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\n    *ngFor=\"let tag of value\"\n    [selectable]=\"false\"\n    [removable]=\"!disabled\"\n    (removed)=\"removeChipToFormControl(tag)\"\n    [disabled]=\"disabled\"\n  >\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 || 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    <mat-option *ngIf=\"loading\" disabled id=\"loader\">\n      <div class=\"loader-option\"><gio-loader></gio-loader></div>\n    </mat-option>\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: [".loader-option{display:flex}.loader-option gio-loader{width:24px}\n"], components: [{ type: i3$2.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$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: GioLoaderComponent, selector: "gio-loader" }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$2.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$2.MatChipRemove, selector: "[matChipRemove]" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i3$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormTagsInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gio-form-tags-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -750,12 +790,12 @@ 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\n    *ngFor=\"let tag of value\"\n    [selectable]=\"false\"\n    [removable]=\"!disabled\"\n    (removed)=\"removeChipToFormControl(tag)\"\n    [disabled]=\"disabled\"\n  >\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 || 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    <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: [""] }]
+                    ], 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\n    *ngFor=\"let tag of value\"\n    [selectable]=\"false\"\n    [removable]=\"!disabled\"\n    (removed)=\"removeChipToFormControl(tag)\"\n    [disabled]=\"disabled\"\n  >\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 || 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    <mat-option *ngIf=\"loading\" disabled id=\"loader\">\n      <div class=\"loader-option\"><gio-loader></gio-loader></div>\n    </mat-option>\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: [".loader-option{display:flex}.loader-option gio-loader{width:24px}\n"] }]
         }], ctorParameters: function () { return [{ type: i7.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
-                }] }, { type: i0.ElementRef }, { type: i1$1.FocusMonitor }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { ariaLabel: [{
+                }] }, { type: i0.ElementRef }, { type: i1$2.FocusMonitor }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { ariaLabel: [{
                 type: Input,
                 args: ['aria-label']
             }], addOnBlur: [{
@@ -800,6 +840,66 @@ const sanitizeAutocompleteOptions = (options) => {
     });
 };
 
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class GioIconsModule {
+    constructor(matIconRegistry, sanitizer) {
+        matIconRegistry.addSvgIconSetInNamespace('gio', sanitizer.bypassSecurityTrustResourceUrl('assets/gio-icons.svg'));
+    }
+}
+GioIconsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioIconsModule, deps: [{ token: i1$1.MatIconRegistry }, { token: i3.DomSanitizer }], target: i0.ɵɵFactoryTarget.NgModule });
+GioIconsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioIconsModule, imports: [CommonModule, HttpClientModule, MatIconModule], exports: [MatIconModule] });
+GioIconsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioIconsModule, imports: [[CommonModule, HttpClientModule, MatIconModule], MatIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioIconsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, HttpClientModule, MatIconModule],
+                    exports: [MatIconModule],
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.MatIconRegistry }, { type: i3.DomSanitizer }]; } });
+
+/*
+ * Copyright (C) 2023 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class GioLoaderModule {
+}
+GioLoaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioLoaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GioLoaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioLoaderModule, declarations: [GioLoaderComponent], imports: [CommonModule, GioIconsModule], exports: [GioLoaderComponent] });
+GioLoaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioLoaderModule, imports: [[CommonModule, GioIconsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioLoaderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, GioIconsModule],
+                    declarations: [GioLoaderComponent],
+                    exports: [GioLoaderComponent],
+                }]
+        }] });
+
 /*
  * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
  *
@@ -818,12 +918,40 @@ const sanitizeAutocompleteOptions = (options) => {
 class GioFormTagsInputModule {
 }
 GioFormTagsInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormTagsInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GioFormTagsInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormTagsInputModule, declarations: [GioFormTagsInputComponent], imports: [CommonModule, A11yModule, MatChipsModule, MatInputModule, FormsModule, MatIconModule, MatAutocompleteModule, MatSelectModule], exports: [GioFormTagsInputComponent] });
-GioFormTagsInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormTagsInputModule, imports: [[CommonModule, A11yModule, MatChipsModule, MatInputModule, FormsModule, MatIconModule, MatAutocompleteModule, MatSelectModule]] });
+GioFormTagsInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormTagsInputModule, declarations: [GioFormTagsInputComponent], imports: [CommonModule,
+        A11yModule,
+        MatChipsModule,
+        MatInputModule,
+        FormsModule,
+        MatIconModule,
+        MatAutocompleteModule,
+        MatSelectModule,
+        GioLoaderModule], exports: [GioFormTagsInputComponent] });
+GioFormTagsInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormTagsInputModule, imports: [[
+            CommonModule,
+            A11yModule,
+            MatChipsModule,
+            MatInputModule,
+            FormsModule,
+            MatIconModule,
+            MatAutocompleteModule,
+            MatSelectModule,
+            GioLoaderModule,
+        ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormTagsInputModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, A11yModule, MatChipsModule, MatInputModule, FormsModule, MatIconModule, MatAutocompleteModule, MatSelectModule],
+                    imports: [
+                        CommonModule,
+                        A11yModule,
+                        MatChipsModule,
+                        MatInputModule,
+                        FormsModule,
+                        MatIconModule,
+                        MatAutocompleteModule,
+                        MatSelectModule,
+                        GioLoaderModule,
+                    ],
                     declarations: [GioFormTagsInputComponent],
                     exports: [GioFormTagsInputComponent],
                 }]
@@ -918,7 +1046,7 @@ class GioBannerComponent {
     }
 }
 GioBannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GioBannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioBannerComponent, selector: "gio-banner", inputs: { type: "type", icon: "icon" }, 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<div\n  class=\"banner\"\n  [class.info]=\"type === 'info'\"\n  [class.error]=\"type === 'error'\"\n  [class.warning]=\"type === 'warning'\"\n  [class.success]=\"type === 'success'\"\n>\n  <div class=\"banner__wrapper\">\n    <div *ngIf=\"icon; else defaultTypeIcon\" class=\"banner__wrapper__icon\">\n      <mat-icon [svgIcon]=\"icon\"></mat-icon>\n    </div>\n    <ng-template #defaultTypeIcon>\n      <div class=\"banner__wrapper__icon\" [ngSwitch]=\"type\">\n        <mat-icon *ngSwitchCase=\"'info'\" svgIcon=\"gio:chat-lines\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'error'\" svgIcon=\"gio:chat-bubble-error\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'warning'\" svgIcon=\"gio:chat-bubble-warning\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'success'\" svgIcon=\"gio:chat-bubble-check\"></mat-icon>\n      </div>\n    </ng-template>\n    <div class=\"banner__wrapper__head\">\n      <div class=\"banner__wrapper__title\">\n        <ng-content></ng-content>\n      </div>\n      <div #body class=\"banner__wrapper__body\" [class.hide]=\"!body.children.length\">\n        <ng-content select=\"[gioBannerBody]\"></ng-content>\n      </div>\n    </div>\n    <div #action class=\"banner__wrapper__action\" [class.hide]=\"!action.children.length\">\n      <ng-content select=\"[gioBannerAction]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;margin:8px 0}.banner{display:flex;flex-direction:column;align-items:stretch;padding:12px 16px;border-radius:8px;background-color:#fff}.banner.error{border:3px solid #ec4899;color:#2c0015}.banner.error .mat-icon{color:#ec4899}.banner.error ::ng-deep a{color:inherit}.banner.info{border:3px solid #009999;color:#001f1f}.banner.info .mat-icon{color:#099}.banner.info ::ng-deep a{color:inherit}.banner.success{border:3px solid #0de598;color:#002c1c}.banner.success .mat-icon{color:#0de598}.banner.success ::ng-deep a{color:inherit}.banner.warning{border:3px solid #fe733f;color:#2c0c01}.banner.warning .mat-icon{color:#fe733f}.banner.warning ::ng-deep a{color:inherit}.banner__wrapper{position:relative;display:flex;align-items:center;font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__wrapper__icon{display:flex;align-self:flex-start;margin-right:16px}.banner__wrapper__head{display:flex;flex:1 1 auto;flex-direction:column;line-height:normal}.banner__wrapper__title{display:flex;flex:1;align-items:center;padding:4px 0}.banner__wrapper__action{align-self:flex-start;padding-left:16px}.banner__wrapper__body{font:400 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__wrapper .hide{display:none}\n"], components: [{ type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
+GioBannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioBannerComponent, selector: "gio-banner", inputs: { type: "type", icon: "icon" }, 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<div\n  class=\"banner\"\n  [class.info]=\"type === 'info'\"\n  [class.error]=\"type === 'error'\"\n  [class.warning]=\"type === 'warning'\"\n  [class.success]=\"type === 'success'\"\n>\n  <div class=\"banner__wrapper\">\n    <div *ngIf=\"icon; else defaultTypeIcon\" class=\"banner__wrapper__icon\">\n      <mat-icon [svgIcon]=\"icon\"></mat-icon>\n    </div>\n    <ng-template #defaultTypeIcon>\n      <div class=\"banner__wrapper__icon\" [ngSwitch]=\"type\">\n        <mat-icon *ngSwitchCase=\"'info'\" svgIcon=\"gio:chat-lines\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'error'\" svgIcon=\"gio:chat-bubble-error\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'warning'\" svgIcon=\"gio:chat-bubble-warning\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'success'\" svgIcon=\"gio:chat-bubble-check\"></mat-icon>\n      </div>\n    </ng-template>\n    <div class=\"banner__wrapper__head\">\n      <div class=\"banner__wrapper__title\">\n        <ng-content></ng-content>\n      </div>\n      <div #body class=\"banner__wrapper__body\" [class.hide]=\"!body.children.length\">\n        <ng-content select=\"[gioBannerBody]\"></ng-content>\n      </div>\n    </div>\n    <div #action class=\"banner__wrapper__action\" [class.hide]=\"!action.children.length\">\n      <ng-content select=\"[gioBannerAction]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;margin:8px 0}.banner{display:flex;flex-direction:column;align-items:stretch;padding:12px 16px;border-radius:8px;background-color:#fff}.banner.error{border:3px solid #ec4899;color:#2c0015}.banner.error .mat-icon{color:#ec4899}.banner.error ::ng-deep a{color:inherit}.banner.info{border:3px solid #009999;color:#001f1f}.banner.info .mat-icon{color:#099}.banner.info ::ng-deep a{color:inherit}.banner.success{border:3px solid #0de598;color:#002c1c}.banner.success .mat-icon{color:#0de598}.banner.success ::ng-deep a{color:inherit}.banner.warning{border:3px solid #fe733f;color:#2c0c01}.banner.warning .mat-icon{color:#fe733f}.banner.warning ::ng-deep a{color:inherit}.banner__wrapper{position:relative;display:flex;align-items:center;font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__wrapper__icon{display:flex;align-self:flex-start;margin-right:16px}.banner__wrapper__head{display:flex;flex:1 1 auto;flex-direction:column;line-height:normal}.banner__wrapper__title{display:flex;flex:1;align-items:center;padding:4px 0}.banner__wrapper__action{align-self:flex-start;padding-left:16px}.banner__wrapper__body{font:400 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__wrapper .hide{display:none}\n"], components: [{ type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioBannerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gio-banner', 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<div\n  class=\"banner\"\n  [class.info]=\"type === 'info'\"\n  [class.error]=\"type === 'error'\"\n  [class.warning]=\"type === 'warning'\"\n  [class.success]=\"type === 'success'\"\n>\n  <div class=\"banner__wrapper\">\n    <div *ngIf=\"icon; else defaultTypeIcon\" class=\"banner__wrapper__icon\">\n      <mat-icon [svgIcon]=\"icon\"></mat-icon>\n    </div>\n    <ng-template #defaultTypeIcon>\n      <div class=\"banner__wrapper__icon\" [ngSwitch]=\"type\">\n        <mat-icon *ngSwitchCase=\"'info'\" svgIcon=\"gio:chat-lines\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'error'\" svgIcon=\"gio:chat-bubble-error\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'warning'\" svgIcon=\"gio:chat-bubble-warning\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'success'\" svgIcon=\"gio:chat-bubble-check\"></mat-icon>\n      </div>\n    </ng-template>\n    <div class=\"banner__wrapper__head\">\n      <div class=\"banner__wrapper__title\">\n        <ng-content></ng-content>\n      </div>\n      <div #body class=\"banner__wrapper__body\" [class.hide]=\"!body.children.length\">\n        <ng-content select=\"[gioBannerBody]\"></ng-content>\n      </div>\n    </div>\n    <div #action class=\"banner__wrapper__action\" [class.hide]=\"!action.children.length\">\n      <ng-content select=\"[gioBannerAction]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;margin:8px 0}.banner{display:flex;flex-direction:column;align-items:stretch;padding:12px 16px;border-radius:8px;background-color:#fff}.banner.error{border:3px solid #ec4899;color:#2c0015}.banner.error .mat-icon{color:#ec4899}.banner.error ::ng-deep a{color:inherit}.banner.info{border:3px solid #009999;color:#001f1f}.banner.info .mat-icon{color:#099}.banner.info ::ng-deep a{color:inherit}.banner.success{border:3px solid #0de598;color:#002c1c}.banner.success .mat-icon{color:#0de598}.banner.success ::ng-deep a{color:inherit}.banner.warning{border:3px solid #fe733f;color:#2c0c01}.banner.warning .mat-icon{color:#fe733f}.banner.warning ::ng-deep a{color:inherit}.banner__wrapper{position:relative;display:flex;align-items:center;font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__wrapper__icon{display:flex;align-self:flex-start;margin-right:16px}.banner__wrapper__head{display:flex;flex:1 1 auto;flex-direction:column;line-height:normal}.banner__wrapper__title{display:flex;flex:1;align-items:center;padding:4px 0}.banner__wrapper__action{align-self:flex-start;padding-left:16px}.banner__wrapper__body{font:400 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__wrapper .hide{display:none}\n"] }]
@@ -955,7 +1083,7 @@ class GioBannerErrorComponent extends GioBannerComponent {
     }
 }
 GioBannerErrorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioBannerErrorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-GioBannerErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioBannerErrorComponent, selector: "gio-banner-error", usesInheritance: 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<div\n  class=\"banner\"\n  [class.info]=\"type === 'info'\"\n  [class.error]=\"type === 'error'\"\n  [class.warning]=\"type === 'warning'\"\n  [class.success]=\"type === 'success'\"\n>\n  <div class=\"banner__wrapper\">\n    <div *ngIf=\"icon; else defaultTypeIcon\" class=\"banner__wrapper__icon\">\n      <mat-icon [svgIcon]=\"icon\"></mat-icon>\n    </div>\n    <ng-template #defaultTypeIcon>\n      <div class=\"banner__wrapper__icon\" [ngSwitch]=\"type\">\n        <mat-icon *ngSwitchCase=\"'info'\" svgIcon=\"gio:chat-lines\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'error'\" svgIcon=\"gio:chat-bubble-error\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'warning'\" svgIcon=\"gio:chat-bubble-warning\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'success'\" svgIcon=\"gio:chat-bubble-check\"></mat-icon>\n      </div>\n    </ng-template>\n    <div class=\"banner__wrapper__head\">\n      <div class=\"banner__wrapper__title\">\n        <ng-content></ng-content>\n      </div>\n      <div #body class=\"banner__wrapper__body\" [class.hide]=\"!body.children.length\">\n        <ng-content select=\"[gioBannerBody]\"></ng-content>\n      </div>\n    </div>\n    <div #action class=\"banner__wrapper__action\" [class.hide]=\"!action.children.length\">\n      <ng-content select=\"[gioBannerAction]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;margin:8px 0}.banner{display:flex;flex-direction:column;align-items:stretch;padding:12px 16px;border-radius:8px;background-color:#fff}.banner.error{border:3px solid #ec4899;color:#2c0015}.banner.error .mat-icon{color:#ec4899}.banner.error ::ng-deep a{color:inherit}.banner.info{border:3px solid #009999;color:#001f1f}.banner.info .mat-icon{color:#099}.banner.info ::ng-deep a{color:inherit}.banner.success{border:3px solid #0de598;color:#002c1c}.banner.success .mat-icon{color:#0de598}.banner.success ::ng-deep a{color:inherit}.banner.warning{border:3px solid #fe733f;color:#2c0c01}.banner.warning .mat-icon{color:#fe733f}.banner.warning ::ng-deep a{color:inherit}.banner__wrapper{position:relative;display:flex;align-items:center;font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__wrapper__icon{display:flex;align-self:flex-start;margin-right:16px}.banner__wrapper__head{display:flex;flex:1 1 auto;flex-direction:column;line-height:normal}.banner__wrapper__title{display:flex;flex:1;align-items:center;padding:4px 0}.banner__wrapper__action{align-self:flex-start;padding-left:16px}.banner__wrapper__body{font:400 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__wrapper .hide{display:none}\n"], components: [{ type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
+GioBannerErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioBannerErrorComponent, selector: "gio-banner-error", usesInheritance: 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<div\n  class=\"banner\"\n  [class.info]=\"type === 'info'\"\n  [class.error]=\"type === 'error'\"\n  [class.warning]=\"type === 'warning'\"\n  [class.success]=\"type === 'success'\"\n>\n  <div class=\"banner__wrapper\">\n    <div *ngIf=\"icon; else defaultTypeIcon\" class=\"banner__wrapper__icon\">\n      <mat-icon [svgIcon]=\"icon\"></mat-icon>\n    </div>\n    <ng-template #defaultTypeIcon>\n      <div class=\"banner__wrapper__icon\" [ngSwitch]=\"type\">\n        <mat-icon *ngSwitchCase=\"'info'\" svgIcon=\"gio:chat-lines\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'error'\" svgIcon=\"gio:chat-bubble-error\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'warning'\" svgIcon=\"gio:chat-bubble-warning\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'success'\" svgIcon=\"gio:chat-bubble-check\"></mat-icon>\n      </div>\n    </ng-template>\n    <div class=\"banner__wrapper__head\">\n      <div class=\"banner__wrapper__title\">\n        <ng-content></ng-content>\n      </div>\n      <div #body class=\"banner__wrapper__body\" [class.hide]=\"!body.children.length\">\n        <ng-content select=\"[gioBannerBody]\"></ng-content>\n      </div>\n    </div>\n    <div #action class=\"banner__wrapper__action\" [class.hide]=\"!action.children.length\">\n      <ng-content select=\"[gioBannerAction]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;margin:8px 0}.banner{display:flex;flex-direction:column;align-items:stretch;padding:12px 16px;border-radius:8px;background-color:#fff}.banner.error{border:3px solid #ec4899;color:#2c0015}.banner.error .mat-icon{color:#ec4899}.banner.error ::ng-deep a{color:inherit}.banner.info{border:3px solid #009999;color:#001f1f}.banner.info .mat-icon{color:#099}.banner.info ::ng-deep a{color:inherit}.banner.success{border:3px solid #0de598;color:#002c1c}.banner.success .mat-icon{color:#0de598}.banner.success ::ng-deep a{color:inherit}.banner.warning{border:3px solid #fe733f;color:#2c0c01}.banner.warning .mat-icon{color:#fe733f}.banner.warning ::ng-deep a{color:inherit}.banner__wrapper{position:relative;display:flex;align-items:center;font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__wrapper__icon{display:flex;align-self:flex-start;margin-right:16px}.banner__wrapper__head{display:flex;flex:1 1 auto;flex-direction:column;line-height:normal}.banner__wrapper__title{display:flex;flex:1;align-items:center;padding:4px 0}.banner__wrapper__action{align-self:flex-start;padding-left:16px}.banner__wrapper__body{font:400 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__wrapper .hide{display:none}\n"], components: [{ type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioBannerErrorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gio-banner-error', 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<div\n  class=\"banner\"\n  [class.info]=\"type === 'info'\"\n  [class.error]=\"type === 'error'\"\n  [class.warning]=\"type === 'warning'\"\n  [class.success]=\"type === 'success'\"\n>\n  <div class=\"banner__wrapper\">\n    <div *ngIf=\"icon; else defaultTypeIcon\" class=\"banner__wrapper__icon\">\n      <mat-icon [svgIcon]=\"icon\"></mat-icon>\n    </div>\n    <ng-template #defaultTypeIcon>\n      <div class=\"banner__wrapper__icon\" [ngSwitch]=\"type\">\n        <mat-icon *ngSwitchCase=\"'info'\" svgIcon=\"gio:chat-lines\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'error'\" svgIcon=\"gio:chat-bubble-error\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'warning'\" svgIcon=\"gio:chat-bubble-warning\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'success'\" svgIcon=\"gio:chat-bubble-check\"></mat-icon>\n      </div>\n    </ng-template>\n    <div class=\"banner__wrapper__head\">\n      <div class=\"banner__wrapper__title\">\n        <ng-content></ng-content>\n      </div>\n      <div #body class=\"banner__wrapper__body\" [class.hide]=\"!body.children.length\">\n        <ng-content select=\"[gioBannerBody]\"></ng-content>\n      </div>\n    </div>\n    <div #action class=\"banner__wrapper__action\" [class.hide]=\"!action.children.length\">\n      <ng-content select=\"[gioBannerAction]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;margin:8px 0}.banner{display:flex;flex-direction:column;align-items:stretch;padding:12px 16px;border-radius:8px;background-color:#fff}.banner.error{border:3px solid #ec4899;color:#2c0015}.banner.error .mat-icon{color:#ec4899}.banner.error ::ng-deep a{color:inherit}.banner.info{border:3px solid #009999;color:#001f1f}.banner.info .mat-icon{color:#099}.banner.info ::ng-deep a{color:inherit}.banner.success{border:3px solid #0de598;color:#002c1c}.banner.success .mat-icon{color:#0de598}.banner.success ::ng-deep a{color:inherit}.banner.warning{border:3px solid #fe733f;color:#2c0c01}.banner.warning .mat-icon{color:#fe733f}.banner.warning ::ng-deep a{color:inherit}.banner__wrapper{position:relative;display:flex;align-items:center;font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__wrapper__icon{display:flex;align-self:flex-start;margin-right:16px}.banner__wrapper__head{display:flex;flex:1 1 auto;flex-direction:column;line-height:normal}.banner__wrapper__title{display:flex;flex:1;align-items:center;padding:4px 0}.banner__wrapper__action{align-self:flex-start;padding-left:16px}.banner__wrapper__body{font:400 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__wrapper .hide{display:none}\n"] }]
@@ -968,7 +1096,7 @@ class GioBannerInfoComponent extends GioBannerComponent {
     }
 }
 GioBannerInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioBannerInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-GioBannerInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioBannerInfoComponent, selector: "gio-banner-info", usesInheritance: 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<div\n  class=\"banner\"\n  [class.info]=\"type === 'info'\"\n  [class.error]=\"type === 'error'\"\n  [class.warning]=\"type === 'warning'\"\n  [class.success]=\"type === 'success'\"\n>\n  <div class=\"banner__wrapper\">\n    <div *ngIf=\"icon; else defaultTypeIcon\" class=\"banner__wrapper__icon\">\n      <mat-icon [svgIcon]=\"icon\"></mat-icon>\n    </div>\n    <ng-template #defaultTypeIcon>\n      <div class=\"banner__wrapper__icon\" [ngSwitch]=\"type\">\n        <mat-icon *ngSwitchCase=\"'info'\" svgIcon=\"gio:chat-lines\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'error'\" svgIcon=\"gio:chat-bubble-error\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'warning'\" svgIcon=\"gio:chat-bubble-warning\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'success'\" svgIcon=\"gio:chat-bubble-check\"></mat-icon>\n      </div>\n    </ng-template>\n    <div class=\"banner__wrapper__head\">\n      <div class=\"banner__wrapper__title\">\n        <ng-content></ng-content>\n      </div>\n      <div #body class=\"banner__wrapper__body\" [class.hide]=\"!body.children.length\">\n        <ng-content select=\"[gioBannerBody]\"></ng-content>\n      </div>\n    </div>\n    <div #action class=\"banner__wrapper__action\" [class.hide]=\"!action.children.length\">\n      <ng-content select=\"[gioBannerAction]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;margin:8px 0}.banner{display:flex;flex-direction:column;align-items:stretch;padding:12px 16px;border-radius:8px;background-color:#fff}.banner.error{border:3px solid #ec4899;color:#2c0015}.banner.error .mat-icon{color:#ec4899}.banner.error ::ng-deep a{color:inherit}.banner.info{border:3px solid #009999;color:#001f1f}.banner.info .mat-icon{color:#099}.banner.info ::ng-deep a{color:inherit}.banner.success{border:3px solid #0de598;color:#002c1c}.banner.success .mat-icon{color:#0de598}.banner.success ::ng-deep a{color:inherit}.banner.warning{border:3px solid #fe733f;color:#2c0c01}.banner.warning .mat-icon{color:#fe733f}.banner.warning ::ng-deep a{color:inherit}.banner__wrapper{position:relative;display:flex;align-items:center;font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__wrapper__icon{display:flex;align-self:flex-start;margin-right:16px}.banner__wrapper__head{display:flex;flex:1 1 auto;flex-direction:column;line-height:normal}.banner__wrapper__title{display:flex;flex:1;align-items:center;padding:4px 0}.banner__wrapper__action{align-self:flex-start;padding-left:16px}.banner__wrapper__body{font:400 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__wrapper .hide{display:none}\n"], components: [{ type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
+GioBannerInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioBannerInfoComponent, selector: "gio-banner-info", usesInheritance: 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<div\n  class=\"banner\"\n  [class.info]=\"type === 'info'\"\n  [class.error]=\"type === 'error'\"\n  [class.warning]=\"type === 'warning'\"\n  [class.success]=\"type === 'success'\"\n>\n  <div class=\"banner__wrapper\">\n    <div *ngIf=\"icon; else defaultTypeIcon\" class=\"banner__wrapper__icon\">\n      <mat-icon [svgIcon]=\"icon\"></mat-icon>\n    </div>\n    <ng-template #defaultTypeIcon>\n      <div class=\"banner__wrapper__icon\" [ngSwitch]=\"type\">\n        <mat-icon *ngSwitchCase=\"'info'\" svgIcon=\"gio:chat-lines\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'error'\" svgIcon=\"gio:chat-bubble-error\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'warning'\" svgIcon=\"gio:chat-bubble-warning\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'success'\" svgIcon=\"gio:chat-bubble-check\"></mat-icon>\n      </div>\n    </ng-template>\n    <div class=\"banner__wrapper__head\">\n      <div class=\"banner__wrapper__title\">\n        <ng-content></ng-content>\n      </div>\n      <div #body class=\"banner__wrapper__body\" [class.hide]=\"!body.children.length\">\n        <ng-content select=\"[gioBannerBody]\"></ng-content>\n      </div>\n    </div>\n    <div #action class=\"banner__wrapper__action\" [class.hide]=\"!action.children.length\">\n      <ng-content select=\"[gioBannerAction]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;margin:8px 0}.banner{display:flex;flex-direction:column;align-items:stretch;padding:12px 16px;border-radius:8px;background-color:#fff}.banner.error{border:3px solid #ec4899;color:#2c0015}.banner.error .mat-icon{color:#ec4899}.banner.error ::ng-deep a{color:inherit}.banner.info{border:3px solid #009999;color:#001f1f}.banner.info .mat-icon{color:#099}.banner.info ::ng-deep a{color:inherit}.banner.success{border:3px solid #0de598;color:#002c1c}.banner.success .mat-icon{color:#0de598}.banner.success ::ng-deep a{color:inherit}.banner.warning{border:3px solid #fe733f;color:#2c0c01}.banner.warning .mat-icon{color:#fe733f}.banner.warning ::ng-deep a{color:inherit}.banner__wrapper{position:relative;display:flex;align-items:center;font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__wrapper__icon{display:flex;align-self:flex-start;margin-right:16px}.banner__wrapper__head{display:flex;flex:1 1 auto;flex-direction:column;line-height:normal}.banner__wrapper__title{display:flex;flex:1;align-items:center;padding:4px 0}.banner__wrapper__action{align-self:flex-start;padding-left:16px}.banner__wrapper__body{font:400 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__wrapper .hide{display:none}\n"], components: [{ type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioBannerInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gio-banner-info', 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<div\n  class=\"banner\"\n  [class.info]=\"type === 'info'\"\n  [class.error]=\"type === 'error'\"\n  [class.warning]=\"type === 'warning'\"\n  [class.success]=\"type === 'success'\"\n>\n  <div class=\"banner__wrapper\">\n    <div *ngIf=\"icon; else defaultTypeIcon\" class=\"banner__wrapper__icon\">\n      <mat-icon [svgIcon]=\"icon\"></mat-icon>\n    </div>\n    <ng-template #defaultTypeIcon>\n      <div class=\"banner__wrapper__icon\" [ngSwitch]=\"type\">\n        <mat-icon *ngSwitchCase=\"'info'\" svgIcon=\"gio:chat-lines\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'error'\" svgIcon=\"gio:chat-bubble-error\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'warning'\" svgIcon=\"gio:chat-bubble-warning\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'success'\" svgIcon=\"gio:chat-bubble-check\"></mat-icon>\n      </div>\n    </ng-template>\n    <div class=\"banner__wrapper__head\">\n      <div class=\"banner__wrapper__title\">\n        <ng-content></ng-content>\n      </div>\n      <div #body class=\"banner__wrapper__body\" [class.hide]=\"!body.children.length\">\n        <ng-content select=\"[gioBannerBody]\"></ng-content>\n      </div>\n    </div>\n    <div #action class=\"banner__wrapper__action\" [class.hide]=\"!action.children.length\">\n      <ng-content select=\"[gioBannerAction]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;margin:8px 0}.banner{display:flex;flex-direction:column;align-items:stretch;padding:12px 16px;border-radius:8px;background-color:#fff}.banner.error{border:3px solid #ec4899;color:#2c0015}.banner.error .mat-icon{color:#ec4899}.banner.error ::ng-deep a{color:inherit}.banner.info{border:3px solid #009999;color:#001f1f}.banner.info .mat-icon{color:#099}.banner.info ::ng-deep a{color:inherit}.banner.success{border:3px solid #0de598;color:#002c1c}.banner.success .mat-icon{color:#0de598}.banner.success ::ng-deep a{color:inherit}.banner.warning{border:3px solid #fe733f;color:#2c0c01}.banner.warning .mat-icon{color:#fe733f}.banner.warning ::ng-deep a{color:inherit}.banner__wrapper{position:relative;display:flex;align-items:center;font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__wrapper__icon{display:flex;align-self:flex-start;margin-right:16px}.banner__wrapper__head{display:flex;flex:1 1 auto;flex-direction:column;line-height:normal}.banner__wrapper__title{display:flex;flex:1;align-items:center;padding:4px 0}.banner__wrapper__action{align-self:flex-start;padding-left:16px}.banner__wrapper__body{font:400 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__wrapper .hide{display:none}\n"] }]
@@ -981,7 +1109,7 @@ class GioBannerSuccessComponent extends GioBannerComponent {
     }
 }
 GioBannerSuccessComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioBannerSuccessComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-GioBannerSuccessComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioBannerSuccessComponent, selector: "gio-banner-success", usesInheritance: 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<div\n  class=\"banner\"\n  [class.info]=\"type === 'info'\"\n  [class.error]=\"type === 'error'\"\n  [class.warning]=\"type === 'warning'\"\n  [class.success]=\"type === 'success'\"\n>\n  <div class=\"banner__wrapper\">\n    <div *ngIf=\"icon; else defaultTypeIcon\" class=\"banner__wrapper__icon\">\n      <mat-icon [svgIcon]=\"icon\"></mat-icon>\n    </div>\n    <ng-template #defaultTypeIcon>\n      <div class=\"banner__wrapper__icon\" [ngSwitch]=\"type\">\n        <mat-icon *ngSwitchCase=\"'info'\" svgIcon=\"gio:chat-lines\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'error'\" svgIcon=\"gio:chat-bubble-error\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'warning'\" svgIcon=\"gio:chat-bubble-warning\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'success'\" svgIcon=\"gio:chat-bubble-check\"></mat-icon>\n      </div>\n    </ng-template>\n    <div class=\"banner__wrapper__head\">\n      <div class=\"banner__wrapper__title\">\n        <ng-content></ng-content>\n      </div>\n      <div #body class=\"banner__wrapper__body\" [class.hide]=\"!body.children.length\">\n        <ng-content select=\"[gioBannerBody]\"></ng-content>\n      </div>\n    </div>\n    <div #action class=\"banner__wrapper__action\" [class.hide]=\"!action.children.length\">\n      <ng-content select=\"[gioBannerAction]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;margin:8px 0}.banner{display:flex;flex-direction:column;align-items:stretch;padding:12px 16px;border-radius:8px;background-color:#fff}.banner.error{border:3px solid #ec4899;color:#2c0015}.banner.error .mat-icon{color:#ec4899}.banner.error ::ng-deep a{color:inherit}.banner.info{border:3px solid #009999;color:#001f1f}.banner.info .mat-icon{color:#099}.banner.info ::ng-deep a{color:inherit}.banner.success{border:3px solid #0de598;color:#002c1c}.banner.success .mat-icon{color:#0de598}.banner.success ::ng-deep a{color:inherit}.banner.warning{border:3px solid #fe733f;color:#2c0c01}.banner.warning .mat-icon{color:#fe733f}.banner.warning ::ng-deep a{color:inherit}.banner__wrapper{position:relative;display:flex;align-items:center;font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__wrapper__icon{display:flex;align-self:flex-start;margin-right:16px}.banner__wrapper__head{display:flex;flex:1 1 auto;flex-direction:column;line-height:normal}.banner__wrapper__title{display:flex;flex:1;align-items:center;padding:4px 0}.banner__wrapper__action{align-self:flex-start;padding-left:16px}.banner__wrapper__body{font:400 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__wrapper .hide{display:none}\n"], components: [{ type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
+GioBannerSuccessComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioBannerSuccessComponent, selector: "gio-banner-success", usesInheritance: 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<div\n  class=\"banner\"\n  [class.info]=\"type === 'info'\"\n  [class.error]=\"type === 'error'\"\n  [class.warning]=\"type === 'warning'\"\n  [class.success]=\"type === 'success'\"\n>\n  <div class=\"banner__wrapper\">\n    <div *ngIf=\"icon; else defaultTypeIcon\" class=\"banner__wrapper__icon\">\n      <mat-icon [svgIcon]=\"icon\"></mat-icon>\n    </div>\n    <ng-template #defaultTypeIcon>\n      <div class=\"banner__wrapper__icon\" [ngSwitch]=\"type\">\n        <mat-icon *ngSwitchCase=\"'info'\" svgIcon=\"gio:chat-lines\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'error'\" svgIcon=\"gio:chat-bubble-error\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'warning'\" svgIcon=\"gio:chat-bubble-warning\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'success'\" svgIcon=\"gio:chat-bubble-check\"></mat-icon>\n      </div>\n    </ng-template>\n    <div class=\"banner__wrapper__head\">\n      <div class=\"banner__wrapper__title\">\n        <ng-content></ng-content>\n      </div>\n      <div #body class=\"banner__wrapper__body\" [class.hide]=\"!body.children.length\">\n        <ng-content select=\"[gioBannerBody]\"></ng-content>\n      </div>\n    </div>\n    <div #action class=\"banner__wrapper__action\" [class.hide]=\"!action.children.length\">\n      <ng-content select=\"[gioBannerAction]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;margin:8px 0}.banner{display:flex;flex-direction:column;align-items:stretch;padding:12px 16px;border-radius:8px;background-color:#fff}.banner.error{border:3px solid #ec4899;color:#2c0015}.banner.error .mat-icon{color:#ec4899}.banner.error ::ng-deep a{color:inherit}.banner.info{border:3px solid #009999;color:#001f1f}.banner.info .mat-icon{color:#099}.banner.info ::ng-deep a{color:inherit}.banner.success{border:3px solid #0de598;color:#002c1c}.banner.success .mat-icon{color:#0de598}.banner.success ::ng-deep a{color:inherit}.banner.warning{border:3px solid #fe733f;color:#2c0c01}.banner.warning .mat-icon{color:#fe733f}.banner.warning ::ng-deep a{color:inherit}.banner__wrapper{position:relative;display:flex;align-items:center;font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__wrapper__icon{display:flex;align-self:flex-start;margin-right:16px}.banner__wrapper__head{display:flex;flex:1 1 auto;flex-direction:column;line-height:normal}.banner__wrapper__title{display:flex;flex:1;align-items:center;padding:4px 0}.banner__wrapper__action{align-self:flex-start;padding-left:16px}.banner__wrapper__body{font:400 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__wrapper .hide{display:none}\n"], components: [{ type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioBannerSuccessComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gio-banner-success', 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<div\n  class=\"banner\"\n  [class.info]=\"type === 'info'\"\n  [class.error]=\"type === 'error'\"\n  [class.warning]=\"type === 'warning'\"\n  [class.success]=\"type === 'success'\"\n>\n  <div class=\"banner__wrapper\">\n    <div *ngIf=\"icon; else defaultTypeIcon\" class=\"banner__wrapper__icon\">\n      <mat-icon [svgIcon]=\"icon\"></mat-icon>\n    </div>\n    <ng-template #defaultTypeIcon>\n      <div class=\"banner__wrapper__icon\" [ngSwitch]=\"type\">\n        <mat-icon *ngSwitchCase=\"'info'\" svgIcon=\"gio:chat-lines\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'error'\" svgIcon=\"gio:chat-bubble-error\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'warning'\" svgIcon=\"gio:chat-bubble-warning\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'success'\" svgIcon=\"gio:chat-bubble-check\"></mat-icon>\n      </div>\n    </ng-template>\n    <div class=\"banner__wrapper__head\">\n      <div class=\"banner__wrapper__title\">\n        <ng-content></ng-content>\n      </div>\n      <div #body class=\"banner__wrapper__body\" [class.hide]=\"!body.children.length\">\n        <ng-content select=\"[gioBannerBody]\"></ng-content>\n      </div>\n    </div>\n    <div #action class=\"banner__wrapper__action\" [class.hide]=\"!action.children.length\">\n      <ng-content select=\"[gioBannerAction]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;margin:8px 0}.banner{display:flex;flex-direction:column;align-items:stretch;padding:12px 16px;border-radius:8px;background-color:#fff}.banner.error{border:3px solid #ec4899;color:#2c0015}.banner.error .mat-icon{color:#ec4899}.banner.error ::ng-deep a{color:inherit}.banner.info{border:3px solid #009999;color:#001f1f}.banner.info .mat-icon{color:#099}.banner.info ::ng-deep a{color:inherit}.banner.success{border:3px solid #0de598;color:#002c1c}.banner.success .mat-icon{color:#0de598}.banner.success ::ng-deep a{color:inherit}.banner.warning{border:3px solid #fe733f;color:#2c0c01}.banner.warning .mat-icon{color:#fe733f}.banner.warning ::ng-deep a{color:inherit}.banner__wrapper{position:relative;display:flex;align-items:center;font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__wrapper__icon{display:flex;align-self:flex-start;margin-right:16px}.banner__wrapper__head{display:flex;flex:1 1 auto;flex-direction:column;line-height:normal}.banner__wrapper__title{display:flex;flex:1;align-items:center;padding:4px 0}.banner__wrapper__action{align-self:flex-start;padding-left:16px}.banner__wrapper__body{font:400 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__wrapper .hide{display:none}\n"] }]
@@ -994,43 +1122,12 @@ class GioBannerWarningComponent extends GioBannerComponent {
     }
 }
 GioBannerWarningComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioBannerWarningComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-GioBannerWarningComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioBannerWarningComponent, selector: "gio-banner-warning", usesInheritance: 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<div\n  class=\"banner\"\n  [class.info]=\"type === 'info'\"\n  [class.error]=\"type === 'error'\"\n  [class.warning]=\"type === 'warning'\"\n  [class.success]=\"type === 'success'\"\n>\n  <div class=\"banner__wrapper\">\n    <div *ngIf=\"icon; else defaultTypeIcon\" class=\"banner__wrapper__icon\">\n      <mat-icon [svgIcon]=\"icon\"></mat-icon>\n    </div>\n    <ng-template #defaultTypeIcon>\n      <div class=\"banner__wrapper__icon\" [ngSwitch]=\"type\">\n        <mat-icon *ngSwitchCase=\"'info'\" svgIcon=\"gio:chat-lines\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'error'\" svgIcon=\"gio:chat-bubble-error\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'warning'\" svgIcon=\"gio:chat-bubble-warning\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'success'\" svgIcon=\"gio:chat-bubble-check\"></mat-icon>\n      </div>\n    </ng-template>\n    <div class=\"banner__wrapper__head\">\n      <div class=\"banner__wrapper__title\">\n        <ng-content></ng-content>\n      </div>\n      <div #body class=\"banner__wrapper__body\" [class.hide]=\"!body.children.length\">\n        <ng-content select=\"[gioBannerBody]\"></ng-content>\n      </div>\n    </div>\n    <div #action class=\"banner__wrapper__action\" [class.hide]=\"!action.children.length\">\n      <ng-content select=\"[gioBannerAction]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;margin:8px 0}.banner{display:flex;flex-direction:column;align-items:stretch;padding:12px 16px;border-radius:8px;background-color:#fff}.banner.error{border:3px solid #ec4899;color:#2c0015}.banner.error .mat-icon{color:#ec4899}.banner.error ::ng-deep a{color:inherit}.banner.info{border:3px solid #009999;color:#001f1f}.banner.info .mat-icon{color:#099}.banner.info ::ng-deep a{color:inherit}.banner.success{border:3px solid #0de598;color:#002c1c}.banner.success .mat-icon{color:#0de598}.banner.success ::ng-deep a{color:inherit}.banner.warning{border:3px solid #fe733f;color:#2c0c01}.banner.warning .mat-icon{color:#fe733f}.banner.warning ::ng-deep a{color:inherit}.banner__wrapper{position:relative;display:flex;align-items:center;font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__wrapper__icon{display:flex;align-self:flex-start;margin-right:16px}.banner__wrapper__head{display:flex;flex:1 1 auto;flex-direction:column;line-height:normal}.banner__wrapper__title{display:flex;flex:1;align-items:center;padding:4px 0}.banner__wrapper__action{align-self:flex-start;padding-left:16px}.banner__wrapper__body{font:400 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__wrapper .hide{display:none}\n"], components: [{ type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
+GioBannerWarningComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioBannerWarningComponent, selector: "gio-banner-warning", usesInheritance: 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<div\n  class=\"banner\"\n  [class.info]=\"type === 'info'\"\n  [class.error]=\"type === 'error'\"\n  [class.warning]=\"type === 'warning'\"\n  [class.success]=\"type === 'success'\"\n>\n  <div class=\"banner__wrapper\">\n    <div *ngIf=\"icon; else defaultTypeIcon\" class=\"banner__wrapper__icon\">\n      <mat-icon [svgIcon]=\"icon\"></mat-icon>\n    </div>\n    <ng-template #defaultTypeIcon>\n      <div class=\"banner__wrapper__icon\" [ngSwitch]=\"type\">\n        <mat-icon *ngSwitchCase=\"'info'\" svgIcon=\"gio:chat-lines\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'error'\" svgIcon=\"gio:chat-bubble-error\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'warning'\" svgIcon=\"gio:chat-bubble-warning\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'success'\" svgIcon=\"gio:chat-bubble-check\"></mat-icon>\n      </div>\n    </ng-template>\n    <div class=\"banner__wrapper__head\">\n      <div class=\"banner__wrapper__title\">\n        <ng-content></ng-content>\n      </div>\n      <div #body class=\"banner__wrapper__body\" [class.hide]=\"!body.children.length\">\n        <ng-content select=\"[gioBannerBody]\"></ng-content>\n      </div>\n    </div>\n    <div #action class=\"banner__wrapper__action\" [class.hide]=\"!action.children.length\">\n      <ng-content select=\"[gioBannerAction]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;margin:8px 0}.banner{display:flex;flex-direction:column;align-items:stretch;padding:12px 16px;border-radius:8px;background-color:#fff}.banner.error{border:3px solid #ec4899;color:#2c0015}.banner.error .mat-icon{color:#ec4899}.banner.error ::ng-deep a{color:inherit}.banner.info{border:3px solid #009999;color:#001f1f}.banner.info .mat-icon{color:#099}.banner.info ::ng-deep a{color:inherit}.banner.success{border:3px solid #0de598;color:#002c1c}.banner.success .mat-icon{color:#0de598}.banner.success ::ng-deep a{color:inherit}.banner.warning{border:3px solid #fe733f;color:#2c0c01}.banner.warning .mat-icon{color:#fe733f}.banner.warning ::ng-deep a{color:inherit}.banner__wrapper{position:relative;display:flex;align-items:center;font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__wrapper__icon{display:flex;align-self:flex-start;margin-right:16px}.banner__wrapper__head{display:flex;flex:1 1 auto;flex-direction:column;line-height:normal}.banner__wrapper__title{display:flex;flex:1;align-items:center;padding:4px 0}.banner__wrapper__action{align-self:flex-start;padding-left:16px}.banner__wrapper__body{font:400 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__wrapper .hide{display:none}\n"], components: [{ type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioBannerWarningComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gio-banner-warning', 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<div\n  class=\"banner\"\n  [class.info]=\"type === 'info'\"\n  [class.error]=\"type === 'error'\"\n  [class.warning]=\"type === 'warning'\"\n  [class.success]=\"type === 'success'\"\n>\n  <div class=\"banner__wrapper\">\n    <div *ngIf=\"icon; else defaultTypeIcon\" class=\"banner__wrapper__icon\">\n      <mat-icon [svgIcon]=\"icon\"></mat-icon>\n    </div>\n    <ng-template #defaultTypeIcon>\n      <div class=\"banner__wrapper__icon\" [ngSwitch]=\"type\">\n        <mat-icon *ngSwitchCase=\"'info'\" svgIcon=\"gio:chat-lines\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'error'\" svgIcon=\"gio:chat-bubble-error\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'warning'\" svgIcon=\"gio:chat-bubble-warning\"></mat-icon>\n        <mat-icon *ngSwitchCase=\"'success'\" svgIcon=\"gio:chat-bubble-check\"></mat-icon>\n      </div>\n    </ng-template>\n    <div class=\"banner__wrapper__head\">\n      <div class=\"banner__wrapper__title\">\n        <ng-content></ng-content>\n      </div>\n      <div #body class=\"banner__wrapper__body\" [class.hide]=\"!body.children.length\">\n        <ng-content select=\"[gioBannerBody]\"></ng-content>\n      </div>\n    </div>\n    <div #action class=\"banner__wrapper__action\" [class.hide]=\"!action.children.length\">\n      <ng-content select=\"[gioBannerAction]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;margin:8px 0}.banner{display:flex;flex-direction:column;align-items:stretch;padding:12px 16px;border-radius:8px;background-color:#fff}.banner.error{border:3px solid #ec4899;color:#2c0015}.banner.error .mat-icon{color:#ec4899}.banner.error ::ng-deep a{color:inherit}.banner.info{border:3px solid #009999;color:#001f1f}.banner.info .mat-icon{color:#099}.banner.info ::ng-deep a{color:inherit}.banner.success{border:3px solid #0de598;color:#002c1c}.banner.success .mat-icon{color:#0de598}.banner.success ::ng-deep a{color:inherit}.banner.warning{border:3px solid #fe733f;color:#2c0c01}.banner.warning .mat-icon{color:#fe733f}.banner.warning ::ng-deep a{color:inherit}.banner__wrapper{position:relative;display:flex;align-items:center;font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__wrapper__icon{display:flex;align-self:flex-start;margin-right:16px}.banner__wrapper__head{display:flex;flex:1 1 auto;flex-direction:column;line-height:normal}.banner__wrapper__title{display:flex;flex:1;align-items:center;padding:4px 0}.banner__wrapper__action{align-self:flex-start;padding-left:16px}.banner__wrapper__body{font:400 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__wrapper .hide{display:none}\n"] }]
         }] });
 
-/*
- * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *         http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-class GioIconsModule {
-    constructor(matIconRegistry, sanitizer) {
-        matIconRegistry.addSvgIconSetInNamespace('gio', sanitizer.bypassSecurityTrustResourceUrl('assets/gio-icons.svg'));
-    }
-}
-GioIconsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioIconsModule, deps: [{ token: i1$2.MatIconRegistry }, { token: i3.DomSanitizer }], target: i0.ɵɵFactoryTarget.NgModule });
-GioIconsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioIconsModule, imports: [CommonModule, HttpClientModule, MatIconModule], exports: [MatIconModule] });
-GioIconsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioIconsModule, imports: [[CommonModule, HttpClientModule, MatIconModule], MatIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioIconsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, HttpClientModule, MatIconModule],
-                    exports: [MatIconModule],
-                }]
-        }], ctorParameters: function () { return [{ type: i1$2.MatIconRegistry }, { type: i3.DomSanitizer }]; } });
-
 /*
  * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
  *
@@ -1509,7 +1606,7 @@ class GioFormHeadersComponent {
         return HEADER_NAMES.filter(option => option.toLowerCase().includes(filterValue));
     }
 }
-GioFormHeadersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormHeadersComponent, deps: [{ token: i1$1.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+GioFormHeadersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormHeadersComponent, deps: [{ token: i1$2.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
 GioFormHeadersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFormHeadersComponent, selector: "gio-form-headers", inputs: { headerFieldMapper: "headerFieldMapper" }, host: { properties: { "class.disabled": "this.disabled" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
@@ -1521,7 +1618,7 @@ GioFormHeadersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             useExisting: forwardRef(() => GioFormHeadersComponent),
             multi: 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<table class=\"gio-form-headers__table gio-table-light\" [formGroup]=\"mainForm\">\n  <thead>\n    <tr>\n      <th>KEY</th>\n      <th>VALUE</th>\n    </tr>\n  </thead>\n  <tbody formArrayName=\"headers\">\n    <tr\n      *ngFor=\"let control of headersFormArray.controls; index as headerIndex\"\n      class=\"gio-form-headers__table__header-row\"\n      [formGroupName]=\"headerIndex\"\n    >\n      <td class=\"gio-form-headers__table__header-row__td-key\">\n        <mat-form-field class=\"gio-form-headers__table__header-row__td-key__field\" [floatLabel]=\"'never'\" appearance=\"standard\">\n          <textarea\n            formControlName=\"key\"\n            matInput\n            placeholder=\"Name...\"\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"1\"\n            [matAutocomplete]=\"headerNamesAutocomplete\"\n          ></textarea>\n        </mat-form-field>\n        <mat-error *ngIf=\"control.get('key')?.hasError('pattern')\">\n          Header name must not contain spaces. (RegExp: {{ control.get('key')?.getError('pattern')?.requiredPattern }})\n        </mat-error>\n        <mat-autocomplete #headerNamesAutocomplete=\"matAutocomplete\">\n          <mat-option *ngFor=\"let headerName of getFilteredHeaderNames(headerIndex, control.value) | async\" [value]=\"headerName\">{{\n            headerName\n          }}</mat-option>\n        </mat-autocomplete>\n      </td>\n      <td class=\"gio-form-headers__table__header-row__td-value\">\n        <mat-form-field class=\"gio-form-headers__table__header-row__td-value__field\" [floatLabel]=\"'never'\" appearance=\"standard\">\n          <textarea formControlName=\"value\" matInput placeholder=\"Value...\" cdkTextareaAutosize cdkAutosizeMinRows=\"1\"></textarea>\n        </mat-form-field>\n        <button\n          class=\"gio-form-headers__table__header-row__td-value__button\"\n          *ngIf=\"headersFormArray.controls.length - 1 !== headerIndex\"\n          mat-icon-button\n          aria-label=\"Delete\"\n          (click)=\"onDeleteHeader(headerIndex)\"\n        >\n          <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host{display:block;overflow:hidden}.gio-form-headers__table{width:100%}.gio-form-headers__table__header-row__td-key,.gio-form-headers__table__header-row__td-value{position:relative;width:50%}.gio-form-headers__table__header-row__td-key__field,.gio-form-headers__table__header-row__td-value__field{display:flex;overflow:hidden;width:100%;max-height:32px;flex-direction:column;justify-content:center;padding-bottom:0}.gio-form-headers__table__header-row__td-key__field *,.gio-form-headers__table__header-row__td-value__field *{top:0;overflow:hidden;max-height:32px}.gio-form-headers__table__header-row__td-key__field:focus-within,.gio-form-headers__table__header-row__td-value__field:focus-within{z-index:100;height:auto;background-color:#fff}.gio-form-headers__table__header-row__td-key__field:focus-within *,.gio-form-headers__table__header-row__td-value__field:focus-within *{max-height:none}.gio-form-headers__table__header-row__td-key__button,.gio-form-headers__table__header-row__td-value__button{position:absolute;top:3px;right:3px;display:none}.gio-form-headers__table__header-row__td-remove{width:32px;height:32px;padding:0}.gio-form-headers__table__header-row:hover .gio-form-headers__table__header-row__td-value__button{z-index:110;display:block;background-color:#fff;opacity:.9}::ng-deep gio-form-headers .gio-form-headers__table__header-row .mat-form-field-infix{width:inherit}\n"], components: [{ type: i3$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i10.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "async": i2.AsyncPipe } });
+    ], 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<table class=\"gio-form-headers__table gio-table-light\" [formGroup]=\"mainForm\">\n  <thead>\n    <tr>\n      <th>KEY</th>\n      <th>VALUE</th>\n    </tr>\n  </thead>\n  <tbody formArrayName=\"headers\">\n    <tr\n      *ngFor=\"let control of headersFormArray.controls; index as headerIndex\"\n      class=\"gio-form-headers__table__header-row\"\n      [formGroupName]=\"headerIndex\"\n    >\n      <td class=\"gio-form-headers__table__header-row__td-key\">\n        <mat-form-field class=\"gio-form-headers__table__header-row__td-key__field\" [floatLabel]=\"'never'\" appearance=\"standard\">\n          <textarea\n            formControlName=\"key\"\n            matInput\n            placeholder=\"Name...\"\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"1\"\n            [matAutocomplete]=\"headerNamesAutocomplete\"\n          ></textarea>\n        </mat-form-field>\n        <mat-error *ngIf=\"control.get('key')?.hasError('pattern')\">\n          Header name must not contain spaces. (RegExp: {{ control.get('key')?.getError('pattern')?.requiredPattern }})\n        </mat-error>\n        <mat-autocomplete #headerNamesAutocomplete=\"matAutocomplete\">\n          <mat-option *ngFor=\"let headerName of getFilteredHeaderNames(headerIndex, control.value) | async\" [value]=\"headerName\">{{\n            headerName\n          }}</mat-option>\n        </mat-autocomplete>\n      </td>\n      <td class=\"gio-form-headers__table__header-row__td-value\">\n        <mat-form-field class=\"gio-form-headers__table__header-row__td-value__field\" [floatLabel]=\"'never'\" appearance=\"standard\">\n          <textarea formControlName=\"value\" matInput placeholder=\"Value...\" cdkTextareaAutosize cdkAutosizeMinRows=\"1\"></textarea>\n        </mat-form-field>\n        <button\n          class=\"gio-form-headers__table__header-row__td-value__button\"\n          *ngIf=\"headersFormArray.controls.length - 1 !== headerIndex\"\n          mat-icon-button\n          aria-label=\"Delete\"\n          (click)=\"onDeleteHeader(headerIndex)\"\n        >\n          <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host{display:block;overflow:hidden}.gio-form-headers__table{width:100%}.gio-form-headers__table__header-row__td-key,.gio-form-headers__table__header-row__td-value{position:relative;width:50%}.gio-form-headers__table__header-row__td-key__field,.gio-form-headers__table__header-row__td-value__field{display:flex;overflow:hidden;width:100%;max-height:32px;flex-direction:column;justify-content:center;padding-bottom:0}.gio-form-headers__table__header-row__td-key__field *,.gio-form-headers__table__header-row__td-value__field *{top:0;overflow:hidden;max-height:32px}.gio-form-headers__table__header-row__td-key__field:focus-within,.gio-form-headers__table__header-row__td-value__field:focus-within{z-index:100;height:auto;background-color:#fff}.gio-form-headers__table__header-row__td-key__field:focus-within *,.gio-form-headers__table__header-row__td-value__field:focus-within *{max-height:none}.gio-form-headers__table__header-row__td-key__button,.gio-form-headers__table__header-row__td-value__button{position:absolute;top:3px;right:3px;display:none}.gio-form-headers__table__header-row__td-remove{width:32px;height:32px;padding:0}.gio-form-headers__table__header-row:hover .gio-form-headers__table__header-row__td-value__button{z-index:110;display:block;background-color:#fff;opacity:.9}::ng-deep gio-form-headers .gio-form-headers__table__header-row .mat-form-field-infix{width:inherit}\n"], components: [{ type: i3$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i10.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "async": i2.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormHeadersComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gio-form-headers', providers: [
@@ -1536,7 +1633,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             multi: true,
                         },
                     ], 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<table class=\"gio-form-headers__table gio-table-light\" [formGroup]=\"mainForm\">\n  <thead>\n    <tr>\n      <th>KEY</th>\n      <th>VALUE</th>\n    </tr>\n  </thead>\n  <tbody formArrayName=\"headers\">\n    <tr\n      *ngFor=\"let control of headersFormArray.controls; index as headerIndex\"\n      class=\"gio-form-headers__table__header-row\"\n      [formGroupName]=\"headerIndex\"\n    >\n      <td class=\"gio-form-headers__table__header-row__td-key\">\n        <mat-form-field class=\"gio-form-headers__table__header-row__td-key__field\" [floatLabel]=\"'never'\" appearance=\"standard\">\n          <textarea\n            formControlName=\"key\"\n            matInput\n            placeholder=\"Name...\"\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"1\"\n            [matAutocomplete]=\"headerNamesAutocomplete\"\n          ></textarea>\n        </mat-form-field>\n        <mat-error *ngIf=\"control.get('key')?.hasError('pattern')\">\n          Header name must not contain spaces. (RegExp: {{ control.get('key')?.getError('pattern')?.requiredPattern }})\n        </mat-error>\n        <mat-autocomplete #headerNamesAutocomplete=\"matAutocomplete\">\n          <mat-option *ngFor=\"let headerName of getFilteredHeaderNames(headerIndex, control.value) | async\" [value]=\"headerName\">{{\n            headerName\n          }}</mat-option>\n        </mat-autocomplete>\n      </td>\n      <td class=\"gio-form-headers__table__header-row__td-value\">\n        <mat-form-field class=\"gio-form-headers__table__header-row__td-value__field\" [floatLabel]=\"'never'\" appearance=\"standard\">\n          <textarea formControlName=\"value\" matInput placeholder=\"Value...\" cdkTextareaAutosize cdkAutosizeMinRows=\"1\"></textarea>\n        </mat-form-field>\n        <button\n          class=\"gio-form-headers__table__header-row__td-value__button\"\n          *ngIf=\"headersFormArray.controls.length - 1 !== headerIndex\"\n          mat-icon-button\n          aria-label=\"Delete\"\n          (click)=\"onDeleteHeader(headerIndex)\"\n        >\n          <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host{display:block;overflow:hidden}.gio-form-headers__table{width:100%}.gio-form-headers__table__header-row__td-key,.gio-form-headers__table__header-row__td-value{position:relative;width:50%}.gio-form-headers__table__header-row__td-key__field,.gio-form-headers__table__header-row__td-value__field{display:flex;overflow:hidden;width:100%;max-height:32px;flex-direction:column;justify-content:center;padding-bottom:0}.gio-form-headers__table__header-row__td-key__field *,.gio-form-headers__table__header-row__td-value__field *{top:0;overflow:hidden;max-height:32px}.gio-form-headers__table__header-row__td-key__field:focus-within,.gio-form-headers__table__header-row__td-value__field:focus-within{z-index:100;height:auto;background-color:#fff}.gio-form-headers__table__header-row__td-key__field:focus-within *,.gio-form-headers__table__header-row__td-value__field:focus-within *{max-height:none}.gio-form-headers__table__header-row__td-key__button,.gio-form-headers__table__header-row__td-value__button{position:absolute;top:3px;right:3px;display:none}.gio-form-headers__table__header-row__td-remove{width:32px;height:32px;padding:0}.gio-form-headers__table__header-row:hover .gio-form-headers__table__header-row__td-value__button{z-index:110;display:block;background-color:#fff;opacity:.9}::ng-deep gio-form-headers .gio-form-headers__table__header-row .mat-form-field-infix{width:inherit}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.FocusMonitor }, { type: i0.ElementRef }]; }, propDecorators: { headerFieldMapper: [{
+        }], ctorParameters: function () { return [{ type: i1$2.FocusMonitor }, { type: i0.ElementRef }]; }, propDecorators: { headerFieldMapper: [{
                 type: Input
             }], disabled: [{
                 type: HostBinding,
@@ -1683,7 +1780,7 @@ GioFormHeadersHarness.hostSelector = 'gio-form-headers';
 class GioFormFilePickerAddButtonComponent {
 }
 GioFormFilePickerAddButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormFilePickerAddButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GioFormFilePickerAddButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFormFilePickerAddButtonComponent, selector: "gio-form-file-picker-add-button", 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<div class=\"add-button\" matRipple>\n  <div #content><ng-content></ng-content></div>\n  <span *ngIf=\"!content.children.length\">\n    <mat-icon class=\"add-button__image\" svgIcon=\"gio:upload\"></mat-icon>\n    <span class=\"add-button__content\">Drag your file</span>\n  </span>\n</div>\n", styles: [":host{display:flex;flex-direction:column}.file-picker{display:flex;flex:1 1 auto;flex-flow:row wrap;padding:4px}.file-picker__add-button{border:2px dashed #606274;border-radius:6px;margin:4px;cursor:pointer}.file-picker__add-button:hover,.file-picker__add-button.drag-hover{border:2px dashed #876fec;background-color:#0000000a}.file-picker__add-button.drag-hover{pointer-events:none}.file-picker__add-button.complete{padding:6px;border:none}.file-picker__add-button.error{border:2px dashed #ec4899}.file-picker__preview,.file-picker__preview-empty{position:relative;display:flex;min-width:130px;min-height:130px;flex:0 0 130px;flex-flow:column nowrap;justify-content:space-between;padding:6px;border:2px solid #606274;border-radius:6px;margin:4px;inline-size:-moz-fit-content;inline-size:fit-content}.file-picker__preview.drag-hover,.file-picker__preview-empty.drag-hover{pointer-events:none}.file-picker__preview__image,.file-picker__preview-empty__image{width:100%;height:100%;background-position-x:center;background-position-y:center;background-repeat:no-repeat;background-size:contain}.file-picker__preview__file,.file-picker__preview-empty__file{display:flex;flex:1 1 auto;flex-direction:column;align-content:center;align-items:center;justify-content:center;text-align:center;font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.file-picker__preview__file code,.file-picker__preview-empty__file code{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.file-picker__preview.disabled,.file-picker__preview-empty.disabled{border:2px solid rgba(0,0,0,.12)}.file-picker__preview.error{border:2px solid #ec4899}.file-picker__preview__delete{position:absolute;z-index:200;top:0;right:0;width:24px;height:24px;border-radius:3px;background-color:#f7f8fdb3;color:#100c27;cursor:pointer}.file-picker__preview__delete:hover{color:#fe733f}.file-picker__preview-empty__default{text-align:center}:host{display:block;width:130px;height:130px}.add-button{height:100%;padding:6px;text-align:center}.add-button__image{width:100%;height:54px}.add-button__content{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}\n"], components: [{ type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+GioFormFilePickerAddButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFormFilePickerAddButtonComponent, selector: "gio-form-file-picker-add-button", 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<div class=\"add-button\" matRipple>\n  <div #content><ng-content></ng-content></div>\n  <span *ngIf=\"!content.children.length\">\n    <mat-icon class=\"add-button__image\" svgIcon=\"gio:upload\"></mat-icon>\n    <span class=\"add-button__content\">Drag your file</span>\n  </span>\n</div>\n", styles: [":host{display:flex;flex-direction:column}.file-picker{display:flex;flex:1 1 auto;flex-flow:row wrap;padding:4px}.file-picker__add-button{border:2px dashed #606274;border-radius:6px;margin:4px;cursor:pointer}.file-picker__add-button:hover,.file-picker__add-button.drag-hover{border:2px dashed #876fec;background-color:#0000000a}.file-picker__add-button.drag-hover{pointer-events:none}.file-picker__add-button.complete{padding:6px;border:none}.file-picker__add-button.error{border:2px dashed #ec4899}.file-picker__preview,.file-picker__preview-empty{position:relative;display:flex;min-width:130px;min-height:130px;flex:0 0 130px;flex-flow:column nowrap;justify-content:space-between;padding:6px;border:2px solid #606274;border-radius:6px;margin:4px;inline-size:-moz-fit-content;inline-size:fit-content}.file-picker__preview.drag-hover,.file-picker__preview-empty.drag-hover{pointer-events:none}.file-picker__preview__image,.file-picker__preview-empty__image{width:100%;height:100%;background-position-x:center;background-position-y:center;background-repeat:no-repeat;background-size:contain}.file-picker__preview__file,.file-picker__preview-empty__file{display:flex;flex:1 1 auto;flex-direction:column;align-content:center;align-items:center;justify-content:center;text-align:center;font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.file-picker__preview__file code,.file-picker__preview-empty__file code{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.file-picker__preview.disabled,.file-picker__preview-empty.disabled{border:2px solid rgba(0,0,0,.12)}.file-picker__preview.error{border:2px solid #ec4899}.file-picker__preview__delete{position:absolute;z-index:200;top:0;right:0;width:24px;height:24px;border-radius:3px;background-color:#f7f8fdb3;color:#100c27;cursor:pointer}.file-picker__preview__delete:hover{color:#fe733f}.file-picker__preview-empty__default{text-align:center}:host{display:block;width:130px;height:130px}.add-button{height:100%;padding:6px;text-align:center}.add-button__image{width:100%;height:54px}.add-button__content{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}\n"], components: [{ type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormFilePickerAddButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gio-form-file-picker-add-button', changeDetection: ChangeDetectionStrategy.OnPush, 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<div class=\"add-button\" matRipple>\n  <div #content><ng-content></ng-content></div>\n  <span *ngIf=\"!content.children.length\">\n    <mat-icon class=\"add-button__image\" svgIcon=\"gio:upload\"></mat-icon>\n    <span class=\"add-button__content\">Drag your file</span>\n  </span>\n</div>\n", styles: [":host{display:flex;flex-direction:column}.file-picker{display:flex;flex:1 1 auto;flex-flow:row wrap;padding:4px}.file-picker__add-button{border:2px dashed #606274;border-radius:6px;margin:4px;cursor:pointer}.file-picker__add-button:hover,.file-picker__add-button.drag-hover{border:2px dashed #876fec;background-color:#0000000a}.file-picker__add-button.drag-hover{pointer-events:none}.file-picker__add-button.complete{padding:6px;border:none}.file-picker__add-button.error{border:2px dashed #ec4899}.file-picker__preview,.file-picker__preview-empty{position:relative;display:flex;min-width:130px;min-height:130px;flex:0 0 130px;flex-flow:column nowrap;justify-content:space-between;padding:6px;border:2px solid #606274;border-radius:6px;margin:4px;inline-size:-moz-fit-content;inline-size:fit-content}.file-picker__preview.drag-hover,.file-picker__preview-empty.drag-hover{pointer-events:none}.file-picker__preview__image,.file-picker__preview-empty__image{width:100%;height:100%;background-position-x:center;background-position-y:center;background-repeat:no-repeat;background-size:contain}.file-picker__preview__file,.file-picker__preview-empty__file{display:flex;flex:1 1 auto;flex-direction:column;align-content:center;align-items:center;justify-content:center;text-align:center;font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.file-picker__preview__file code,.file-picker__preview-empty__file code{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.file-picker__preview.disabled,.file-picker__preview-empty.disabled{border:2px solid rgba(0,0,0,.12)}.file-picker__preview.error{border:2px solid #ec4899}.file-picker__preview__delete{position:absolute;z-index:200;top:0;right:0;width:24px;height:24px;border-radius:3px;background-color:#f7f8fdb3;color:#100c27;cursor:pointer}.file-picker__preview__delete:hover{color:#fe733f}.file-picker__preview-empty__default{text-align:center}:host{display:block;width:130px;height:130px}.add-button{height:100%;padding:6px;text-align:center}.add-button__image{width:100%;height:54px}.add-button__content{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}\n"] }]
@@ -1886,7 +1983,7 @@ class GioFormFilePickerComponent {
     }
 }
 GioFormFilePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormFilePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i7.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-GioFormFilePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFormFilePickerComponent, selector: "gio-form-file-picker", inputs: { multiple: "multiple", accept: "accept", disabled: "disabled" }, 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<ng-content select=\"gio-form-file-picker-label\"></ng-content>\n<div\n  *ngIf=\"!isDisabled; else disabledTpl\"\n  class=\"file-picker\"\n  ngxFileDropzone\n  [readMode]=\"readMode\"\n  (fileDrop)=\"onFileDropped($event)\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragleave)=\"onDragOver($event)\"\n  (blur)=\"dragHover = false\"\n>\n  <div\n    *ngIf=\"!isComplete\"\n    class=\"file-picker__add-button\"\n    [class.complete]=\"isComplete\"\n    [class.error]=\"!isValid\"\n    [class.drag-hover]=\"dragHover\"\n    ngxFilePicker\n    [accept]=\"accept\"\n    [readMode]=\"readMode\"\n    [multiple]=\"multiple\"\n    (filePick)=\"onFilePicked($event)\"\n    (click)=\"onTouched()\"\n  >\n    <div #addButton class=\"file-picker__add-button__content\"><ng-content select=\"gio-form-file-picker-add-button\"></ng-content></div>\n    <gio-form-file-picker-add-button *ngIf=\"addButton.children.length === 0\"></gio-form-file-picker-add-button>\n  </div>\n  <div *ngFor=\"let fileValue of fileValues\" class=\"file-picker__preview\" [class.drag-hover]=\"dragHover\" [class.error]=\"!isValid\">\n    <a class=\"file-picker__preview__delete\" (click)=\"onRemoveFile(fileValue)\">\n      <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n    </a>\n\n    <ng-container *ngTemplateOutlet=\"filePreview; context: { fileValue: this.fileValue }\"></ng-container>\n  </div>\n</div>\n\n<ng-template #disabledTpl>\n  <div class=\"file-picker disabled\">\n    <ng-container *ngIf=\"fileValues.length === 0\">\n      <span #previewEmpty class=\"file-picker__preview-empty disabled\">\n        <ng-content select=\"gio-form-file-picker-empty\"></ng-content>\n        <gio-form-file-picker-empty\n          *ngIf=\"previewEmpty.children.length === 0\"\n          class=\"file-picker__preview-empty__default\"\n        ></gio-form-file-picker-empty>\n      </span>\n    </ng-container>\n\n    <div class=\"file-picker__preview disabled\" *ngFor=\"let fileValue of fileValues\">\n      <ng-container *ngTemplateOutlet=\"filePreview; context: { fileValue: this.fileValue }\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #filePreview let-fileValue=\"fileValue\">\n  <div class=\"file-picker__preview__image\" *ngIf=\"fileValue.isImage\" [style.background-image]=\"'url(' + fileValue.dataUrl + ')'\"></div>\n  <div class=\"file-picker__preview__file\" *ngIf=\"!fileValue.isImage\">\n    <p>{{ fileValue.name }}</p>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column}.file-picker{display:flex;flex:1 1 auto;flex-flow:row wrap;padding:4px}.file-picker__add-button{border:2px dashed #606274;border-radius:6px;margin:4px;cursor:pointer}.file-picker__add-button:hover,.file-picker__add-button.drag-hover{border:2px dashed #876fec;background-color:#0000000a}.file-picker__add-button.drag-hover{pointer-events:none}.file-picker__add-button.complete{padding:6px;border:none}.file-picker__add-button.error{border:2px dashed #ec4899}.file-picker__preview,.file-picker__preview-empty{position:relative;display:flex;min-width:130px;min-height:130px;flex:0 0 130px;flex-flow:column nowrap;justify-content:space-between;padding:6px;border:2px solid #606274;border-radius:6px;margin:4px;inline-size:-moz-fit-content;inline-size:fit-content}.file-picker__preview.drag-hover,.file-picker__preview-empty.drag-hover{pointer-events:none}.file-picker__preview__image,.file-picker__preview-empty__image{width:100%;height:100%;background-position-x:center;background-position-y:center;background-repeat:no-repeat;background-size:contain}.file-picker__preview__file,.file-picker__preview-empty__file{display:flex;flex:1 1 auto;flex-direction:column;align-content:center;align-items:center;justify-content:center;text-align:center;font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.file-picker__preview__file code,.file-picker__preview-empty__file code{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.file-picker__preview.disabled,.file-picker__preview-empty.disabled{border:2px solid rgba(0,0,0,.12)}.file-picker__preview.error{border:2px solid #ec4899}.file-picker__preview__delete{position:absolute;z-index:200;top:0;right:0;width:24px;height:24px;border-radius:3px;background-color:#f7f8fdb3;color:#100c27;cursor:pointer}.file-picker__preview__delete:hover{color:#fe733f}.file-picker__preview-empty__default{text-align:center}\n"], components: [{ type: GioFormFilePickerAddButtonComponent, selector: "gio-form-file-picker-add-button" }, { type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: GioFormFilePickerEmptyComponent, selector: "gio-form-file-picker-empty" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.FileDropzoneDirective, selector: "[ngxFileDropzone]", outputs: ["fileDrop"], exportAs: ["ngxFileDropzone"] }, { type: i6$1.FilePickerDirective, selector: "[ngxFilePicker]", inputs: ["accept", "multiple"], outputs: ["filePick"], exportAs: ["ngxFilePicker"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+GioFormFilePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFormFilePickerComponent, selector: "gio-form-file-picker", inputs: { multiple: "multiple", accept: "accept", disabled: "disabled" }, 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<ng-content select=\"gio-form-file-picker-label\"></ng-content>\n<div\n  *ngIf=\"!isDisabled; else disabledTpl\"\n  class=\"file-picker\"\n  ngxFileDropzone\n  [readMode]=\"readMode\"\n  (fileDrop)=\"onFileDropped($event)\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragleave)=\"onDragOver($event)\"\n  (blur)=\"dragHover = false\"\n>\n  <div\n    *ngIf=\"!isComplete\"\n    class=\"file-picker__add-button\"\n    [class.complete]=\"isComplete\"\n    [class.error]=\"!isValid\"\n    [class.drag-hover]=\"dragHover\"\n    ngxFilePicker\n    [accept]=\"accept\"\n    [readMode]=\"readMode\"\n    [multiple]=\"multiple\"\n    (filePick)=\"onFilePicked($event)\"\n    (click)=\"onTouched()\"\n  >\n    <div #addButton class=\"file-picker__add-button__content\"><ng-content select=\"gio-form-file-picker-add-button\"></ng-content></div>\n    <gio-form-file-picker-add-button *ngIf=\"addButton.children.length === 0\"></gio-form-file-picker-add-button>\n  </div>\n  <div *ngFor=\"let fileValue of fileValues\" class=\"file-picker__preview\" [class.drag-hover]=\"dragHover\" [class.error]=\"!isValid\">\n    <a class=\"file-picker__preview__delete\" (click)=\"onRemoveFile(fileValue)\">\n      <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n    </a>\n\n    <ng-container *ngTemplateOutlet=\"filePreview; context: { fileValue: this.fileValue }\"></ng-container>\n  </div>\n</div>\n\n<ng-template #disabledTpl>\n  <div class=\"file-picker disabled\">\n    <ng-container *ngIf=\"fileValues.length === 0\">\n      <span #previewEmpty class=\"file-picker__preview-empty disabled\">\n        <ng-content select=\"gio-form-file-picker-empty\"></ng-content>\n        <gio-form-file-picker-empty\n          *ngIf=\"previewEmpty.children.length === 0\"\n          class=\"file-picker__preview-empty__default\"\n        ></gio-form-file-picker-empty>\n      </span>\n    </ng-container>\n\n    <div class=\"file-picker__preview disabled\" *ngFor=\"let fileValue of fileValues\">\n      <ng-container *ngTemplateOutlet=\"filePreview; context: { fileValue: this.fileValue }\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #filePreview let-fileValue=\"fileValue\">\n  <div class=\"file-picker__preview__image\" *ngIf=\"fileValue.isImage\" [style.background-image]=\"'url(' + fileValue.dataUrl + ')'\"></div>\n  <div class=\"file-picker__preview__file\" *ngIf=\"!fileValue.isImage\">\n    <p>{{ fileValue.name }}</p>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column}.file-picker{display:flex;flex:1 1 auto;flex-flow:row wrap;padding:4px}.file-picker__add-button{border:2px dashed #606274;border-radius:6px;margin:4px;cursor:pointer}.file-picker__add-button:hover,.file-picker__add-button.drag-hover{border:2px dashed #876fec;background-color:#0000000a}.file-picker__add-button.drag-hover{pointer-events:none}.file-picker__add-button.complete{padding:6px;border:none}.file-picker__add-button.error{border:2px dashed #ec4899}.file-picker__preview,.file-picker__preview-empty{position:relative;display:flex;min-width:130px;min-height:130px;flex:0 0 130px;flex-flow:column nowrap;justify-content:space-between;padding:6px;border:2px solid #606274;border-radius:6px;margin:4px;inline-size:-moz-fit-content;inline-size:fit-content}.file-picker__preview.drag-hover,.file-picker__preview-empty.drag-hover{pointer-events:none}.file-picker__preview__image,.file-picker__preview-empty__image{width:100%;height:100%;background-position-x:center;background-position-y:center;background-repeat:no-repeat;background-size:contain}.file-picker__preview__file,.file-picker__preview-empty__file{display:flex;flex:1 1 auto;flex-direction:column;align-content:center;align-items:center;justify-content:center;text-align:center;font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.file-picker__preview__file code,.file-picker__preview-empty__file code{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.file-picker__preview.disabled,.file-picker__preview-empty.disabled{border:2px solid rgba(0,0,0,.12)}.file-picker__preview.error{border:2px solid #ec4899}.file-picker__preview__delete{position:absolute;z-index:200;top:0;right:0;width:24px;height:24px;border-radius:3px;background-color:#f7f8fdb3;color:#100c27;cursor:pointer}.file-picker__preview__delete:hover{color:#fe733f}.file-picker__preview-empty__default{text-align:center}\n"], components: [{ type: GioFormFilePickerAddButtonComponent, selector: "gio-form-file-picker-add-button" }, { type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: GioFormFilePickerEmptyComponent, selector: "gio-form-file-picker-empty" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.FileDropzoneDirective, selector: "[ngxFileDropzone]", outputs: ["fileDrop"], exportAs: ["ngxFileDropzone"] }, { type: i6$1.FilePickerDirective, selector: "[ngxFilePicker]", inputs: ["accept", "multiple"], outputs: ["filePick"], exportAs: ["ngxFilePicker"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormFilePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gio-form-file-picker', changeDetection: ChangeDetectionStrategy.OnPush, 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<ng-content select=\"gio-form-file-picker-label\"></ng-content>\n<div\n  *ngIf=\"!isDisabled; else disabledTpl\"\n  class=\"file-picker\"\n  ngxFileDropzone\n  [readMode]=\"readMode\"\n  (fileDrop)=\"onFileDropped($event)\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragleave)=\"onDragOver($event)\"\n  (blur)=\"dragHover = false\"\n>\n  <div\n    *ngIf=\"!isComplete\"\n    class=\"file-picker__add-button\"\n    [class.complete]=\"isComplete\"\n    [class.error]=\"!isValid\"\n    [class.drag-hover]=\"dragHover\"\n    ngxFilePicker\n    [accept]=\"accept\"\n    [readMode]=\"readMode\"\n    [multiple]=\"multiple\"\n    (filePick)=\"onFilePicked($event)\"\n    (click)=\"onTouched()\"\n  >\n    <div #addButton class=\"file-picker__add-button__content\"><ng-content select=\"gio-form-file-picker-add-button\"></ng-content></div>\n    <gio-form-file-picker-add-button *ngIf=\"addButton.children.length === 0\"></gio-form-file-picker-add-button>\n  </div>\n  <div *ngFor=\"let fileValue of fileValues\" class=\"file-picker__preview\" [class.drag-hover]=\"dragHover\" [class.error]=\"!isValid\">\n    <a class=\"file-picker__preview__delete\" (click)=\"onRemoveFile(fileValue)\">\n      <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n    </a>\n\n    <ng-container *ngTemplateOutlet=\"filePreview; context: { fileValue: this.fileValue }\"></ng-container>\n  </div>\n</div>\n\n<ng-template #disabledTpl>\n  <div class=\"file-picker disabled\">\n    <ng-container *ngIf=\"fileValues.length === 0\">\n      <span #previewEmpty class=\"file-picker__preview-empty disabled\">\n        <ng-content select=\"gio-form-file-picker-empty\"></ng-content>\n        <gio-form-file-picker-empty\n          *ngIf=\"previewEmpty.children.length === 0\"\n          class=\"file-picker__preview-empty__default\"\n        ></gio-form-file-picker-empty>\n      </span>\n    </ng-container>\n\n    <div class=\"file-picker__preview disabled\" *ngFor=\"let fileValue of fileValues\">\n      <ng-container *ngTemplateOutlet=\"filePreview; context: { fileValue: this.fileValue }\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #filePreview let-fileValue=\"fileValue\">\n  <div class=\"file-picker__preview__image\" *ngIf=\"fileValue.isImage\" [style.background-image]=\"'url(' + fileValue.dataUrl + ')'\"></div>\n  <div class=\"file-picker__preview__file\" *ngIf=\"!fileValue.isImage\">\n    <p>{{ fileValue.name }}</p>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column}.file-picker{display:flex;flex:1 1 auto;flex-flow:row wrap;padding:4px}.file-picker__add-button{border:2px dashed #606274;border-radius:6px;margin:4px;cursor:pointer}.file-picker__add-button:hover,.file-picker__add-button.drag-hover{border:2px dashed #876fec;background-color:#0000000a}.file-picker__add-button.drag-hover{pointer-events:none}.file-picker__add-button.complete{padding:6px;border:none}.file-picker__add-button.error{border:2px dashed #ec4899}.file-picker__preview,.file-picker__preview-empty{position:relative;display:flex;min-width:130px;min-height:130px;flex:0 0 130px;flex-flow:column nowrap;justify-content:space-between;padding:6px;border:2px solid #606274;border-radius:6px;margin:4px;inline-size:-moz-fit-content;inline-size:fit-content}.file-picker__preview.drag-hover,.file-picker__preview-empty.drag-hover{pointer-events:none}.file-picker__preview__image,.file-picker__preview-empty__image{width:100%;height:100%;background-position-x:center;background-position-y:center;background-repeat:no-repeat;background-size:contain}.file-picker__preview__file,.file-picker__preview-empty__file{display:flex;flex:1 1 auto;flex-direction:column;align-content:center;align-items:center;justify-content:center;text-align:center;font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.file-picker__preview__file code,.file-picker__preview-empty__file code{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.file-picker__preview.disabled,.file-picker__preview-empty.disabled{border:2px solid rgba(0,0,0,.12)}.file-picker__preview.error{border:2px solid #ec4899}.file-picker__preview__delete{position:absolute;z-index:200;top:0;right:0;width:24px;height:24px;border-radius:3px;background-color:#f7f8fdb3;color:#100c27;cursor:pointer}.file-picker__preview__delete:hover{color:#fe733f}.file-picker__preview-empty__default{text-align:center}\n"] }]
@@ -2168,7 +2265,7 @@ class GioMenuItemComponent {
     }
 }
 GioMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioMenuItemComponent, deps: [{ token: GioMenuService }], target: i0.ɵɵFactoryTarget.Component });
-GioMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioMenuItemComponent, selector: "gio-menu-item", inputs: { icon: "icon", iconRight: "iconRight", active: "active", outlined: "outlined" }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeydownHandler($event)" } }, ngImport: i0, template: "<!--\n\n    Copyright (C) 2022 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<div\n  class=\"gio-menu-item\"\n  [class.gio-menu-item__active]=\"active\"\n  [class.gio-menu-item__outlined]=\"outlined\"\n  (click)=\"onClick($event)\"\n  (mouseenter)=\"onMouseEnter($event)\"\n  (mouseleave)=\"onMouseLeave()\"\n>\n  <mat-icon *ngIf=\"icon\" class=\"gio-menu-item__icon\" [svgIcon]=\"icon\"></mat-icon>\n  <span class=\"gio-menu-item__title\"><ng-content></ng-content></span>\n  <mat-icon *ngIf=\"iconRight\" class=\"gio-menu-item__icon-right\" [svgIcon]=\"iconRight\"></mat-icon>\n</div>\n", styles: [":host{display:block}.gio-menu-item{position:relative;display:flex;width:192px;height:36px;flex:none;flex-direction:row;flex-grow:0;align-items:center;padding:16px;border-radius:4px;margin:4px 0;background:#1c1e39;color:#f7f8fd;cursor:pointer}.gio-menu-item__active{background:#494b61}.gio-menu-item__outlined{border:1px solid #606274;border-radius:4px}.gio-menu-item__icon,.gio-menu-item__icon-right{position:absolute;width:20px;height:20px}.gio-menu-item__icon-right{right:18px}.gio-menu-item__title:not(:first-child){margin:18px 0 18px 32px}:host-context(.gio-menu__reduced) .gio-menu-item{width:44px;justify-content:center;padding:0;margin:8px 0}:host-context(.gio-menu__reduced) .gio-menu-item__title,:host-context(.gio-menu__reduced) .gio-menu-item__icon-right{display:none}:host-context(.gio-menu__reduced .gio-menu-footer) .gio-menu-item{margin:20px 0}:host-context(.gio-menu__reduced .gio-menu-footer) .gio-menu-item__outlined{margin:20px 0}.gio-menu-item:hover:not(.gio-menu-item__active){background:#33354d}\n"], components: [{ type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+GioMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioMenuItemComponent, selector: "gio-menu-item", inputs: { icon: "icon", iconRight: "iconRight", active: "active", outlined: "outlined" }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeydownHandler($event)" } }, ngImport: i0, template: "<!--\n\n    Copyright (C) 2022 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<div\n  class=\"gio-menu-item\"\n  [class.gio-menu-item__active]=\"active\"\n  [class.gio-menu-item__outlined]=\"outlined\"\n  (click)=\"onClick($event)\"\n  (mouseenter)=\"onMouseEnter($event)\"\n  (mouseleave)=\"onMouseLeave()\"\n>\n  <mat-icon *ngIf=\"icon\" class=\"gio-menu-item__icon\" [svgIcon]=\"icon\"></mat-icon>\n  <span class=\"gio-menu-item__title\"><ng-content></ng-content></span>\n  <mat-icon *ngIf=\"iconRight\" class=\"gio-menu-item__icon-right\" [svgIcon]=\"iconRight\"></mat-icon>\n</div>\n", styles: [":host{display:block}.gio-menu-item{position:relative;display:flex;width:192px;height:36px;flex:none;flex-direction:row;flex-grow:0;align-items:center;padding:16px;border-radius:4px;margin:4px 0;background:#1c1e39;color:#f7f8fd;cursor:pointer}.gio-menu-item__active{background:#494b61}.gio-menu-item__outlined{border:1px solid #606274;border-radius:4px}.gio-menu-item__icon,.gio-menu-item__icon-right{position:absolute;width:20px;height:20px}.gio-menu-item__icon-right{right:18px}.gio-menu-item__title:not(:first-child){margin:18px 0 18px 32px}:host-context(.gio-menu__reduced) .gio-menu-item{width:44px;justify-content:center;padding:0;margin:8px 0}:host-context(.gio-menu__reduced) .gio-menu-item__title,:host-context(.gio-menu__reduced) .gio-menu-item__icon-right{display:none}:host-context(.gio-menu__reduced .gio-menu-footer) .gio-menu-item{margin:20px 0}:host-context(.gio-menu__reduced .gio-menu-footer) .gio-menu-item__outlined{margin:20px 0}.gio-menu-item:hover:not(.gio-menu-item__active){background:#33354d}\n"], components: [{ type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioMenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gio-menu-item', template: "<!--\n\n    Copyright (C) 2022 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<div\n  class=\"gio-menu-item\"\n  [class.gio-menu-item__active]=\"active\"\n  [class.gio-menu-item__outlined]=\"outlined\"\n  (click)=\"onClick($event)\"\n  (mouseenter)=\"onMouseEnter($event)\"\n  (mouseleave)=\"onMouseLeave()\"\n>\n  <mat-icon *ngIf=\"icon\" class=\"gio-menu-item__icon\" [svgIcon]=\"icon\"></mat-icon>\n  <span class=\"gio-menu-item__title\"><ng-content></ng-content></span>\n  <mat-icon *ngIf=\"iconRight\" class=\"gio-menu-item__icon-right\" [svgIcon]=\"iconRight\"></mat-icon>\n</div>\n", styles: [":host{display:block}.gio-menu-item{position:relative;display:flex;width:192px;height:36px;flex:none;flex-direction:row;flex-grow:0;align-items:center;padding:16px;border-radius:4px;margin:4px 0;background:#1c1e39;color:#f7f8fd;cursor:pointer}.gio-menu-item__active{background:#494b61}.gio-menu-item__outlined{border:1px solid #606274;border-radius:4px}.gio-menu-item__icon,.gio-menu-item__icon-right{position:absolute;width:20px;height:20px}.gio-menu-item__icon-right{right:18px}.gio-menu-item__title:not(:first-child){margin:18px 0 18px 32px}:host-context(.gio-menu__reduced) .gio-menu-item{width:44px;justify-content:center;padding:0;margin:8px 0}:host-context(.gio-menu__reduced) .gio-menu-item__title,:host-context(.gio-menu__reduced) .gio-menu-item__icon-right{display:none}:host-context(.gio-menu__reduced .gio-menu-footer) .gio-menu-item{margin:20px 0}:host-context(.gio-menu__reduced .gio-menu-footer) .gio-menu-item__outlined{margin:20px 0}.gio-menu-item:hover:not(.gio-menu-item__active){background:#33354d}\n"] }]
@@ -2621,7 +2718,7 @@ class GioSubmenuItemComponent {
     }
 }
 GioSubmenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioSubmenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GioSubmenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioSubmenuItemComponent, selector: "gio-submenu-item", inputs: { active: "active", iconRight: "iconRight" }, host: { listeners: { "keydown": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "gioSubmenuItem", first: true, predicate: ["gioSubmenuItem"], descendants: true }], ngImport: i0, template: "<!--\n\n    Copyright (C) 2022 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<div #gioSubmenuItem class=\"gio-submenu-item\" [class.gio-submenu-item__active]=\"active\">\n  <span class=\"gio-submenu-item__title\"><ng-content></ng-content></span>\n  <mat-icon *ngIf=\"iconRight\" class=\"gio-submenu-item__icon-right\" [svgIcon]=\"iconRight\"></mat-icon>\n</div>\n", styles: [":host{display:block}.gio-submenu-item{width:234px;height:36px;flex:none;flex-grow:0;order:2;padding:8px 12px;border-radius:4px;margin:1px 0;cursor:pointer}.gio-submenu-item__active{background:#494b61}.gio-submenu-item__title{width:37px;height:20px;flex:none;flex-grow:0;color:#fff;letter-spacing:.4px}.gio-submenu-item__icon-right{width:20px;height:20px;color:#fff;float:right}:host-context(.gio-submenu-group) .gio-submenu-item{padding:8px 20px}:host-context(.gio-submenu__light) .gio-submenu-item__active{background:#876fec}.gio-submenu-item:hover:not(.gio-submenu-item__active){background:#33354d}:host-context(.gio-submenu__light) .gio-submenu-item:hover:not(.gio-submenu-item__active){background:#6c59bd}\n"], components: [{ type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+GioSubmenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioSubmenuItemComponent, selector: "gio-submenu-item", inputs: { active: "active", iconRight: "iconRight" }, host: { listeners: { "keydown": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "gioSubmenuItem", first: true, predicate: ["gioSubmenuItem"], descendants: true }], ngImport: i0, template: "<!--\n\n    Copyright (C) 2022 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<div #gioSubmenuItem class=\"gio-submenu-item\" [class.gio-submenu-item__active]=\"active\">\n  <span class=\"gio-submenu-item__title\"><ng-content></ng-content></span>\n  <mat-icon *ngIf=\"iconRight\" class=\"gio-submenu-item__icon-right\" [svgIcon]=\"iconRight\"></mat-icon>\n</div>\n", styles: [":host{display:block}.gio-submenu-item{width:234px;height:36px;flex:none;flex-grow:0;order:2;padding:8px 12px;border-radius:4px;margin:1px 0;cursor:pointer}.gio-submenu-item__active{background:#494b61}.gio-submenu-item__title{width:37px;height:20px;flex:none;flex-grow:0;color:#fff;letter-spacing:.4px}.gio-submenu-item__icon-right{width:20px;height:20px;color:#fff;float:right}:host-context(.gio-submenu-group) .gio-submenu-item{padding:8px 20px}:host-context(.gio-submenu__light) .gio-submenu-item__active{background:#876fec}.gio-submenu-item:hover:not(.gio-submenu-item__active){background:#33354d}:host-context(.gio-submenu__light) .gio-submenu-item:hover:not(.gio-submenu-item__active){background:#6c59bd}\n"], components: [{ type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioSubmenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gio-submenu-item', template: "<!--\n\n    Copyright (C) 2022 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<div #gioSubmenuItem class=\"gio-submenu-item\" [class.gio-submenu-item__active]=\"active\">\n  <span class=\"gio-submenu-item__title\"><ng-content></ng-content></span>\n  <mat-icon *ngIf=\"iconRight\" class=\"gio-submenu-item__icon-right\" [svgIcon]=\"iconRight\"></mat-icon>\n</div>\n", styles: [":host{display:block}.gio-submenu-item{width:234px;height:36px;flex:none;flex-grow:0;order:2;padding:8px 12px;border-radius:4px;margin:1px 0;cursor:pointer}.gio-submenu-item__active{background:#494b61}.gio-submenu-item__title{width:37px;height:20px;flex:none;flex-grow:0;color:#fff;letter-spacing:.4px}.gio-submenu-item__icon-right{width:20px;height:20px;color:#fff;float:right}:host-context(.gio-submenu-group) .gio-submenu-item{padding:8px 20px}:host-context(.gio-submenu__light) .gio-submenu-item__active{background:#876fec}.gio-submenu-item:hover:not(.gio-submenu-item__active){background:#33354d}:host-context(.gio-submenu__light) .gio-submenu-item:hover:not(.gio-submenu-item__active){background:#6c59bd}\n"] }]
@@ -2736,7 +2833,7 @@ class GioTopBarContentComponent {
     }
 }
 GioTopBarContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioTopBarContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GioTopBarContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioTopBarContentComponent, selector: "gio-top-bar-content", inputs: { type: "type", productName: "productName" }, ngImport: i0, template: "<!--\n\n    Copyright (C) 2022 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<div class=\"gio-top-bar-content\" [class]=\"type\">\n  <mat-icon [svgIcon]=\"'gio:product-' + type\"></mat-icon>\n  <span>{{ productName }}</span>\n</div>\n", styles: [".gio-top-bar-content{display:flex;height:36px;align-items:center;padding:8px 12px;border-radius:4px;gap:12px;font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.gio-top-bar-content.am{background:rgba(236,72,153,.4);color:#fff}.gio-top-bar-content.apim{background:rgba(0,111,185,.5);color:#fff}.gio-top-bar-content.cockpit{background:rgba(135,111,236,.4);color:#fff}\n"], components: [{ type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+GioTopBarContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioTopBarContentComponent, selector: "gio-top-bar-content", inputs: { type: "type", productName: "productName" }, ngImport: i0, template: "<!--\n\n    Copyright (C) 2022 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<div class=\"gio-top-bar-content\" [class]=\"type\">\n  <mat-icon [svgIcon]=\"'gio:product-' + type\"></mat-icon>\n  <span>{{ productName }}</span>\n</div>\n", styles: [".gio-top-bar-content{display:flex;height:36px;align-items:center;padding:8px 12px;border-radius:4px;gap:12px;font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.gio-top-bar-content.am{background:rgba(236,72,153,.4);color:#fff}.gio-top-bar-content.apim{background:rgba(0,111,185,.5);color:#fff}.gio-top-bar-content.cockpit{background:rgba(135,111,236,.4);color:#fff}\n"], components: [{ type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioTopBarContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gio-top-bar-content', template: "<!--\n\n    Copyright (C) 2022 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<div class=\"gio-top-bar-content\" [class]=\"type\">\n  <mat-icon [svgIcon]=\"'gio:product-' + type\"></mat-icon>\n  <span>{{ productName }}</span>\n</div>\n", styles: [".gio-top-bar-content{display:flex;height:36px;align-items:center;padding:8px 12px;border-radius:4px;gap:12px;font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.gio-top-bar-content.am{background:rgba(236,72,153,.4);color:#fff}.gio-top-bar-content.apim{background:rgba(0,111,185,.5);color:#fff}.gio-top-bar-content.cockpit{background:rgba(135,111,236,.4);color:#fff}\n"] }]
@@ -2850,7 +2947,7 @@ class GioTopBarLinkComponent {
     }
 }
 GioTopBarLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioTopBarLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GioTopBarLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioTopBarLinkComponent, selector: "gio-top-bar-link", inputs: { url: "url", name: "name" }, ngImport: i0, template: "<!--\n\n    Copyright (C) 2022 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<a mat-button [href]=\"url\" target=\"_blank\" class=\"gio-top-bar-link\">\n  <div class=\"gio-top-bar-link__content\">\n    <span>{{ name }}</span>\n    <mat-icon svgIcon=\"gio:external-link\"></mat-icon>\n  </div>\n</a>\n", styles: [":host{display:block}.gio-top-bar-link{font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;height:20px;color:#f7f8fd;letter-spacing:.4px;text-decoration:none}.gio-top-bar-link__content{display:flex;align-items:center;gap:8px}.gio-top-bar-link__content mat-icon{width:12px}\n"], components: [{ type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+GioTopBarLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioTopBarLinkComponent, selector: "gio-top-bar-link", inputs: { url: "url", name: "name" }, ngImport: i0, template: "<!--\n\n    Copyright (C) 2022 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<a mat-button [href]=\"url\" target=\"_blank\" class=\"gio-top-bar-link\">\n  <div class=\"gio-top-bar-link__content\">\n    <span>{{ name }}</span>\n    <mat-icon svgIcon=\"gio:external-link\"></mat-icon>\n  </div>\n</a>\n", styles: [":host{display:block}.gio-top-bar-link{font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;height:20px;color:#f7f8fd;letter-spacing:.4px;text-decoration:none}.gio-top-bar-link__content{display:flex;align-items:center;gap:8px}.gio-top-bar-link__content mat-icon{width:12px}\n"], components: [{ type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioTopBarLinkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gio-top-bar-link', template: "<!--\n\n    Copyright (C) 2022 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<a mat-button [href]=\"url\" target=\"_blank\" class=\"gio-top-bar-link\">\n  <div class=\"gio-top-bar-link__content\">\n    <span>{{ name }}</span>\n    <mat-icon svgIcon=\"gio:external-link\"></mat-icon>\n  </div>\n</a>\n", styles: [":host{display:block}.gio-top-bar-link{font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;height:20px;color:#f7f8fd;letter-spacing:.4px;text-decoration:none}.gio-top-bar-link__content{display:flex;align-items:center;gap:8px}.gio-top-bar-link__content mat-icon{width:12px}\n"] }]
@@ -3065,7 +3162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 class GioBreadcrumbComponent {
 }
 GioBreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GioBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioBreadcrumbComponent, selector: "gio-breadcrumb", queries: [{ propertyName: "itemDirectives", predicate: GioBreadcrumbItemDirective }], ngImport: i0, template: "<!--\n\n    Copyright (C) 2022 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<div class=\"gio-breadcrumb\">\n  <ng-container *ngFor=\"let item of itemDirectives; let first = first\">\n    <mat-icon *ngIf=\"!first\" svgIcon=\"gio:nav-arrow-right\" class=\"gio-breadcrumb__icon\"></mat-icon>\n    <ng-container *ngTemplateOutlet=\"item.templateRef\"></ng-container>\n  </ng-container>\n</div>\n", styles: [".gio-breadcrumb{display:flex;flex-flow:wrap;align-items:center;margin:2px;color:#606274}.gio-breadcrumb__icon{width:12px;height:12px;margin:0 6px;color:#bbbcc4;line-height:12px}::ng-deep .gio-breadcrumb>*:last-child{color:#6c59bd;font-weight:700}\n"], components: [{ type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+GioBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioBreadcrumbComponent, selector: "gio-breadcrumb", queries: [{ propertyName: "itemDirectives", predicate: GioBreadcrumbItemDirective }], ngImport: i0, template: "<!--\n\n    Copyright (C) 2022 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<div class=\"gio-breadcrumb\">\n  <ng-container *ngFor=\"let item of itemDirectives; let first = first\">\n    <mat-icon *ngIf=\"!first\" svgIcon=\"gio:nav-arrow-right\" class=\"gio-breadcrumb__icon\"></mat-icon>\n    <ng-container *ngTemplateOutlet=\"item.templateRef\"></ng-container>\n  </ng-container>\n</div>\n", styles: [".gio-breadcrumb{display:flex;flex-flow:wrap;align-items:center;margin:2px;color:#606274}.gio-breadcrumb__icon{width:12px;height:12px;margin:0 6px;color:#bbbcc4;line-height:12px}::ng-deep .gio-breadcrumb>*:last-child{color:#6c59bd;font-weight:700}\n"], components: [{ type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioBreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gio-breadcrumb', template: "<!--\n\n    Copyright (C) 2022 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<div class=\"gio-breadcrumb\">\n  <ng-container *ngFor=\"let item of itemDirectives; let first = first\">\n    <mat-icon *ngIf=\"!first\" svgIcon=\"gio:nav-arrow-right\" class=\"gio-breadcrumb__icon\"></mat-icon>\n    <ng-container *ngTemplateOutlet=\"item.templateRef\"></ng-container>\n  </ng-container>\n</div>\n", styles: [".gio-breadcrumb{display:flex;flex-flow:wrap;align-items:center;margin:2px;color:#606274}.gio-breadcrumb__icon{width:12px;height:12px;margin:0 6px;color:#bbbcc4;line-height:12px}::ng-deep .gio-breadcrumb>*:last-child{color:#6c59bd;font-weight:700}\n"] }]
@@ -3485,12 +3582,12 @@ class GioFormJsonSchemaComponent {
         this.stateChanges$.next();
     }
 }
-GioFormJsonSchemaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormJsonSchemaComponent, deps: [{ token: GioFormlyJsonSchemaService }, { token: i0.ElementRef }, { token: i1$1.FocusMonitor }, { token: i0.ChangeDetectorRef }, { token: i7.NgControl, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+GioFormJsonSchemaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormJsonSchemaComponent, deps: [{ token: GioFormlyJsonSchemaService }, { token: i0.ElementRef }, { token: i1$2.FocusMonitor }, { token: i0.ChangeDetectorRef }, { token: i7.NgControl, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 GioFormJsonSchemaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFormJsonSchemaComponent, selector: "gio-form-json-schema", inputs: { jsonSchema: "jsonSchema", options: "options" }, outputs: { ready: "ready" }, host: { properties: { "attr.gioFormFocusInvalidIgnore": "this.gioFormFocusInvalidIgnore" } }, usesOnChanges: true, ngImport: i0, template: `<formly-form *ngIf="formGroup" [fields]="fields" [options]="options" [form]="formGroup" [model]="model"></formly-form>`, isInline: true, styles: ["::ng-deep gio-form-json-schema .mat-form-field.mat-form-field-appearance-outline:not(::ng-deep :has(mat-hint),::ng-deep :has(mat-error)){padding-bottom:0}::ng-deep gio-form-json-schema .mat-form-field.mat-form-field-appearance-outline:not(::ng-deep :has(mat-hint),::ng-deep :has(mat-error)) .mat-form-field-wrapper{padding-bottom:0}::ng-deep gio-form-json-schema .mat-form-field.mat-form-field-appearance-fill:not(::ng-deep :has(mat-hint),::ng-deep :has(mat-error)){padding-bottom:0}::ng-deep gio-form-json-schema .mat-form-field.mat-form-field-appearance-fill:not(::ng-deep :has(mat-hint),::ng-deep :has(mat-error)) .mat-form-field-wrapper{margin-bottom:-1.34375em}\n"], components: [{ type: i1$5.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormJsonSchemaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gio-form-json-schema', template: `<formly-form *ngIf="formGroup" [fields]="fields" [options]="options" [form]="formGroup" [model]="model"></formly-form>`, styles: ["::ng-deep gio-form-json-schema .mat-form-field.mat-form-field-appearance-outline:not(::ng-deep :has(mat-hint),::ng-deep :has(mat-error)){padding-bottom:0}::ng-deep gio-form-json-schema .mat-form-field.mat-form-field-appearance-outline:not(::ng-deep :has(mat-hint),::ng-deep :has(mat-error)) .mat-form-field-wrapper{padding-bottom:0}::ng-deep gio-form-json-schema .mat-form-field.mat-form-field-appearance-fill:not(::ng-deep :has(mat-hint),::ng-deep :has(mat-error)){padding-bottom:0}::ng-deep gio-form-json-schema .mat-form-field.mat-form-field-appearance-fill:not(::ng-deep :has(mat-hint),::ng-deep :has(mat-error)) .mat-form-field-wrapper{margin-bottom:-1.34375em}\n"] }]
-        }], ctorParameters: function () { return [{ type: GioFormlyJsonSchemaService }, { type: i0.ElementRef }, { type: i1$1.FocusMonitor }, { type: i0.ChangeDetectorRef }, { type: i7.NgControl, decorators: [{
+        }], ctorParameters: function () { return [{ type: GioFormlyJsonSchemaService }, { type: i0.ElementRef }, { type: i1$2.FocusMonitor }, { type: i0.ChangeDetectorRef }, { type: i7.NgControl, decorators: [{
                     type: Host
                 }, {
                     type: Optional
@@ -4050,7 +4147,7 @@ class GioMonacoEditorFormFieldDirective {
     }
 }
 GioMonacoEditorFormFieldDirective.nextId = 0;
-GioMonacoEditorFormFieldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioMonacoEditorFormFieldDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.FocusMonitor }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: GioMonacoEditorComponent, host: true, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+GioMonacoEditorFormFieldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioMonacoEditorFormFieldDirective, deps: [{ token: i0.ElementRef }, { token: i1$2.FocusMonitor }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: GioMonacoEditorComponent, host: true, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
 GioMonacoEditorFormFieldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GioMonacoEditorFormFieldDirective, selector: "[gioMonacoEditorFormField]", inputs: { placeholder: "placeholder", required: "required", disabled: "disabled" }, host: { properties: { "id": "this.id", "attr.aria-describedBy": "this.userAriaDescribedBy", "class.hidden": "this.shouldHideEditor" } }, providers: [
         {
             provide: MatFormFieldControl,
@@ -4068,7 +4165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         },
                     ],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.FocusMonitor }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: GioMonacoEditorComponent, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.FocusMonitor }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: GioMonacoEditorComponent, decorators: [{
                     type: Host
                 }, {
                     type: Self
@@ -4275,7 +4372,7 @@ GioFjsArrayTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
         </div>
       </div>
     </div>
-  `, isInline: true, styles: [".wrapper{padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper.error{border-color:#ec4899}.wrapper:empty{display:none}.wrapper__header{display:flex}.wrapper__header__text{flex:1 1 auto}.wrapper__header__text__title{font:600 16px/24px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:8px}.wrapper__header__collapse{flex:0 0 auto}.wrapper__header__collapse .collapse-open{transform:rotate(180deg);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__header__collapse .collapse-close{transform:rotate(0);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__error{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#ec4899}.wrapper__rows__row{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.wrapper__rows__row+.wrapper__rows__row{padding-top:3px;border-top:1px solid #d3d5dc;margin-top:4px}.wrapper__rows__row__field{flex:1 1 auto}.wrapper__rows__row__remove{flex:0 0 auto}\n"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1$5.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: i1$5.FormlyField, selector: "formly-field", inputs: ["field"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+  `, isInline: true, styles: [".wrapper{padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper.error{border-color:#ec4899}.wrapper:empty{display:none}.wrapper__header{display:flex}.wrapper__header__text{flex:1 1 auto}.wrapper__header__text__title{font:600 16px/24px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:8px}.wrapper__header__collapse{flex:0 0 auto}.wrapper__header__collapse .collapse-open{transform:rotate(180deg);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__header__collapse .collapse-close{transform:rotate(0);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__error{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#ec4899}.wrapper__rows__row{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.wrapper__rows__row+.wrapper__rows__row{padding-top:3px;border-top:1px solid #d3d5dc;margin-top:4px}.wrapper__rows__row__field{flex:1 1 auto}.wrapper__rows__row__remove{flex:0 0 auto}\n"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1$5.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: i1$5.FormlyField, selector: "formly-field", inputs: ["field"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsArrayTypeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gio-fjs-array-type', template: `
@@ -4368,7 +4465,7 @@ function typeValidationMessage({ schemaType }) {
 class GioBannerWrapperComponent extends FieldWrapper {
 }
 GioBannerWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioBannerWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-GioBannerWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioBannerWrapperComponent, selector: "gio-banner-wrapper", usesInheritance: true, ngImport: i0, template: "<!--\n\n    Copyright (C) 2023 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<div class=\"wrapper\">\n  <div class=\"banner\">\n    <div class=\"banner__icon\"><mat-icon svgIcon=\"gio:info\"></mat-icon></div>\n    <div>\n      <div class=\"banner__title\" [innerHTML]=\"props.bannerTitle\"></div>\n      <div class=\"banner__text\" [innerHTML]=\"props.bannerText\"></div>\n    </div>\n  </div>\n  <ng-container #fieldComponent></ng-container>\n</div>\n", styles: ["::ng-deep gio-banner-wrapper ul{padding-inline-start:16px}.wrapper{padding:8px 0}.banner{display:flex;flex-direction:row;align-items:flex-start;padding:8px;border-radius:8px;margin-bottom:8px;background:#e7e8ef;gap:8px}.banner__icon{padding-top:2px}.banner__icon mat-icon{width:16px;height:16px;color:#6c59bd}.banner__title{font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__text{font:400 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;color:#606274}\n"], components: [{ type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+GioBannerWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioBannerWrapperComponent, selector: "gio-banner-wrapper", usesInheritance: true, ngImport: i0, template: "<!--\n\n    Copyright (C) 2023 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<div class=\"wrapper\">\n  <div class=\"banner\">\n    <div class=\"banner__icon\"><mat-icon svgIcon=\"gio:info\"></mat-icon></div>\n    <div>\n      <div class=\"banner__title\" [innerHTML]=\"props.bannerTitle\"></div>\n      <div class=\"banner__text\" [innerHTML]=\"props.bannerText\"></div>\n    </div>\n  </div>\n  <ng-container #fieldComponent></ng-container>\n</div>\n", styles: ["::ng-deep gio-banner-wrapper ul{padding-inline-start:16px}.wrapper{padding:8px 0}.banner{display:flex;flex-direction:row;align-items:flex-start;padding:8px;border-radius:8px;margin-bottom:8px;background:#e7e8ef;gap:8px}.banner__icon{padding-top:2px}.banner__icon mat-icon{width:16px;height:16px;color:#6c59bd}.banner__title{font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__text{font:400 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;color:#606274}\n"], components: [{ type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioBannerWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gio-banner-wrapper', template: "<!--\n\n    Copyright (C) 2023 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<div class=\"wrapper\">\n  <div class=\"banner\">\n    <div class=\"banner__icon\"><mat-icon svgIcon=\"gio:info\"></mat-icon></div>\n    <div>\n      <div class=\"banner__title\" [innerHTML]=\"props.bannerTitle\"></div>\n      <div class=\"banner__text\" [innerHTML]=\"props.bannerText\"></div>\n    </div>\n  </div>\n  <ng-container #fieldComponent></ng-container>\n</div>\n", styles: ["::ng-deep gio-banner-wrapper ul{padding-inline-start:16px}.wrapper{padding:8px 0}.banner{display:flex;flex-direction:row;align-items:flex-start;padding:8px;border-radius:8px;margin-bottom:8px;background:#e7e8ef;gap:8px}.banner__icon{padding-top:2px}.banner__icon mat-icon{width:16px;height:16px;color:#6c59bd}.banner__title{font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__text{font:400 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;color:#606274}\n"] }]
@@ -4547,7 +4644,7 @@ GioFjsHeadersTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         <gio-form-headers [headerFieldMapper]="outputConfig" [formControl]="formControl"></gio-form-headers>
       </div>
     </div>
-  `, isInline: true, styles: [".wrapper{display:flex;flex-direction:column;padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper__header{display:flex}.wrapper__header__text{flex:1 1 auto}.wrapper__header__text__title{font:600 16px/24px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:8px}.wrapper__header__collapse{flex:0 0 auto}.wrapper__header__collapse .collapse-open{transform:rotate(180deg);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__header__collapse .collapse-close{transform:rotate(0);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__error{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#ec4899}\n"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1$5.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: GioFormHeadersComponent, selector: "gio-form-headers", inputs: ["headerFieldMapper"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+  `, isInline: true, styles: [".wrapper{display:flex;flex-direction:column;padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper__header{display:flex}.wrapper__header__text{flex:1 1 auto}.wrapper__header__text__title{font:600 16px/24px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:8px}.wrapper__header__collapse{flex:0 0 auto}.wrapper__header__collapse .collapse-open{transform:rotate(180deg);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__header__collapse .collapse-close{transform:rotate(0);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__error{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#ec4899}\n"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1$5.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: GioFormHeadersComponent, selector: "gio-form-headers", inputs: ["headerFieldMapper"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsHeadersTypeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gio-fjs-headers-type', template: `
@@ -4613,7 +4710,7 @@ GioPasswordEyeWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
         <mat-icon [svgIcon]="hide ? 'gio:eye-empty' : 'gio:eye-off'"></mat-icon>
       </span>
     </ng-template>
-  `, isInline: true, components: [{ type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+  `, isInline: true, components: [{ type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioPasswordEyeWrapperComponent, decorators: [{
             type: Component,
             args: [{
@@ -5110,59 +5207,6 @@ class GioMonacoEditorHarness extends ComponentHarness {
 }
 GioMonacoEditorHarness.hostSelector = 'gio-monaco-editor';
 
-/*
- * Copyright (C) 2023 The Gravitee team (http://gravitee.io)
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *         http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-class GioLoaderComponent {
-}
-GioLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GioLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioLoaderComponent, selector: "gio-loader", ngImport: i0, template: "<!--\n\n    Copyright (C) 2023 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<div class=\"loader\">\n  <mat-icon svgIcon=\"gio:loader\"></mat-icon>\n</div>\n", styles: [":host{position:relative;display:flex;width:48px;height:48px;align-self:center;margin:auto}.loader{display:flex;align-items:center;justify-content:center;animation:rotation 2s infinite linear}.loader mat-icon{width:100%;height:100%}@keyframes rotation{to{transform:rotate(360deg)}}\n"], components: [{ type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioLoaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gio-loader', template: "<!--\n\n    Copyright (C) 2023 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<div class=\"loader\">\n  <mat-icon svgIcon=\"gio:loader\"></mat-icon>\n</div>\n", styles: [":host{position:relative;display:flex;width:48px;height:48px;align-self:center;margin:auto}.loader{display:flex;align-items:center;justify-content:center;animation:rotation 2s infinite linear}.loader mat-icon{width:100%;height:100%}@keyframes rotation{to{transform:rotate(360deg)}}\n"] }]
-        }] });
-
-/*
- * Copyright (C) 2023 The Gravitee team (http://gravitee.io)
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *         http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-class GioLoaderModule {
-}
-GioLoaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioLoaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GioLoaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioLoaderModule, declarations: [GioLoaderComponent], imports: [CommonModule, GioIconsModule], exports: [GioLoaderComponent] });
-GioLoaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioLoaderModule, imports: [[CommonModule, GioIconsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioLoaderModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, GioIconsModule],
-                    declarations: [GioLoaderComponent],
-                    exports: [GioLoaderComponent],
-                }]
-        }] });
-
 /*
  * Copyright (C) 2023 The Gravitee team (http://gravitee.io)
  *
@@ -5200,12 +5244,14 @@ const GIO_DIALOG_WIDTH = {
  * limitations under the License.
  */
 class GioClipboardComponent {
-    constructor() {
-        this.tooltipMessage = 'Copy to clipboard';
+    constructor(clipboard) {
+        this.clipboard = clipboard;
+        this.label = 'Copy to clipboard';
         this.tooltipHideDelay = 0;
         this.clicked = false;
         this.contentToCopy = '';
         this.alwaysVisible = false;
+        this.tabIndex = undefined;
     }
     onCopied(success, tooltip) {
         tooltip.message = success ? 'Copied!' : 'Failed to copy!';
@@ -5217,19 +5263,30 @@ class GioClipboardComponent {
         }, 2000);
         setTimeout(() => {
             this.clicked = false;
-            tooltip.message = this.tooltipMessage;
+            tooltip.message = this.label;
             tooltip.hideDelay = this.tooltipHideDelay;
         }, 2500);
     }
+    onKeyupSpace() {
+        this.clipboard.copy(this.contentToCopy);
+        if (this.tooltip) {
+            this.onCopied(true, this.tooltip);
+        }
+    }
 }
-GioClipboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioClipboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-GioClipboardComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GioClipboardComponent, inputs: { contentToCopy: "contentToCopy", alwaysVisible: "alwaysVisible" }, ngImport: i0 });
+GioClipboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioClipboardComponent, deps: [{ token: i1$6.Clipboard }], target: i0.ɵɵFactoryTarget.Directive });
+GioClipboardComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GioClipboardComponent, inputs: { contentToCopy: "contentToCopy", alwaysVisible: "alwaysVisible", tabIndex: "tabIndex" }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioClipboardComponent, decorators: [{
             type: Directive
-        }], propDecorators: { contentToCopy: [{
+        }], ctorParameters: function () { return [{ type: i1$6.Clipboard }]; }, propDecorators: { tooltip: [{
+                type: ViewChild,
+                args: ['tooltip']
+            }], contentToCopy: [{
                 type: Input
             }], alwaysVisible: [{
                 type: Input
+            }], tabIndex: [{
+                type: Input
             }] } });
 
 /*
@@ -5252,9 +5309,10 @@ class GioClipboardCopyWrapperComponent extends GioClipboardComponent {
 GioClipboardCopyWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioClipboardCopyWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
 GioClipboardCopyWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioClipboardCopyWrapperComponent, selector: "[gioClipboardCopyWrapper]", usesInheritance: true, ngImport: i0, template: `
     <ng-content></ng-content>
-    <span
+    <button
       #tooltip="matTooltip"
       class="right"
+      [attr.aria-label]="label"
       [class.clicked]="clicked"
       [class.always-visible]="alwaysVisible"
       [cdkCopyToClipboard]="contentToCopy"
@@ -5262,19 +5320,21 @@ GioClipboardCopyWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
       matRipple
       [matRippleCentered]="true"
       [matRippleUnbounded]="true"
-      [matTooltip]="tooltipMessage"
+      [matTooltip]="label"
       [matTooltipPosition]="'after'"
+      (keyup.Space)="onKeyupSpace()"
     >
       <mat-icon [inline]="true">{{ clicked ? 'check' : 'content_copy' }}</mat-icon>
-    </span>
-  `, isInline: true, styles: [".right{margin-left:4px;color:#099;cursor:pointer}.right:not(.clicked,.always-visible){opacity:0}.right.clicked{color:#0de598;opacity:1}:host(:hover) .right{opacity:.42}:host(:hover) .right:hover{opacity:1}\n"], components: [{ type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: i3$5.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+    </button>
+  `, isInline: true, styles: [".right{padding:0;border:none;margin-left:4px;background:none;color:#616266;cursor:pointer;outline:inherit}.right:not(.clicked,.always-visible){opacity:0}.right.clicked{color:#099;opacity:1}:host(:hover,:focus) .right{opacity:1}:host(:hover,:focus) .right:hover,:host(:hover,:focus) .right:focus{color:#099}\n"], components: [{ type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: i1$6.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioClipboardCopyWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: '[gioClipboardCopyWrapper]', template: `
     <ng-content></ng-content>
-    <span
+    <button
       #tooltip="matTooltip"
       class="right"
+      [attr.aria-label]="label"
       [class.clicked]="clicked"
       [class.always-visible]="alwaysVisible"
       [cdkCopyToClipboard]="contentToCopy"
@@ -5282,12 +5342,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
       matRipple
       [matRippleCentered]="true"
       [matRippleUnbounded]="true"
-      [matTooltip]="tooltipMessage"
+      [matTooltip]="label"
       [matTooltipPosition]="'after'"
+      (keyup.Space)="onKeyupSpace()"
     >
       <mat-icon [inline]="true">{{ clicked ? 'check' : 'content_copy' }}</mat-icon>
-    </span>
-  `, styles: [".right{margin-left:4px;color:#099;cursor:pointer}.right:not(.clicked,.always-visible){opacity:0}.right.clicked{color:#0de598;opacity:1}:host(:hover) .right{opacity:.42}:host(:hover) .right:hover{opacity:1}\n"] }]
+    </button>
+  `, styles: [".right{padding:0;border:none;margin-left:4px;background:none;color:#616266;cursor:pointer;outline:inherit}.right:not(.clicked,.always-visible){opacity:0}.right.clicked{color:#099;opacity:1}:host(:hover,:focus) .right{opacity:1}:host(:hover,:focus) .right:hover,:host(:hover,:focus) .right:focus{color:#099}\n"] }]
         }] });
 
 /*
@@ -5309,37 +5370,43 @@ class GioClipboardCopyIconComponent extends GioClipboardComponent {
 }
 GioClipboardCopyIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioClipboardCopyIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
 GioClipboardCopyIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioClipboardCopyIconComponent, selector: "gio-clipboard-copy-icon", usesInheritance: true, ngImport: i0, template: `
-    <mat-icon
+    <button
       #tooltip="matTooltip"
-      class="icon"
+      class="btn"
+      [attr.aria-label]="label"
       [class.clicked]="clicked"
       [cdkCopyToClipboard]="contentToCopy"
       (cdkCopyToClipboardCopied)="onCopied($event, tooltip)"
       matRipple
       [matRippleCentered]="true"
       [matRippleUnbounded]="true"
-      [matTooltip]="tooltipMessage"
+      [matTooltip]="label"
       [matTooltipPosition]="'after'"
-      >{{ clicked ? 'check' : 'content_copy' }}</mat-icon
+      (keyup.Space)="onKeyupSpace()"
     >
-  `, isInline: true, styles: [".icon{margin-left:4px;color:#099;cursor:pointer}.icon:not(.clicked){opacity:.42}.icon.clicked{color:#0de598;opacity:1}:host(:hover) .icon:hover{opacity:1}\n"], components: [{ type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: i3$5.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+      <mat-icon>{{ clicked ? 'check' : 'content_copy' }}</mat-icon>
+    </button>
+  `, isInline: true, styles: [".btn{padding:0;border:none;margin-left:4px;background:none;color:#616266;cursor:pointer;outline:inherit}.btn.clicked,.btn:hover,.btn:focus{color:#099}\n"], components: [{ type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: i1$6.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioClipboardCopyIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gio-clipboard-copy-icon', template: `
-    <mat-icon
+    <button
       #tooltip="matTooltip"
-      class="icon"
+      class="btn"
+      [attr.aria-label]="label"
       [class.clicked]="clicked"
       [cdkCopyToClipboard]="contentToCopy"
       (cdkCopyToClipboardCopied)="onCopied($event, tooltip)"
       matRipple
       [matRippleCentered]="true"
       [matRippleUnbounded]="true"
-      [matTooltip]="tooltipMessage"
+      [matTooltip]="label"
       [matTooltipPosition]="'after'"
-      >{{ clicked ? 'check' : 'content_copy' }}</mat-icon
+      (keyup.Space)="onKeyupSpace()"
     >
-  `, styles: [".icon{margin-left:4px;color:#099;cursor:pointer}.icon:not(.clicked){opacity:.42}.icon.clicked{color:#0de598;opacity:1}:host(:hover) .icon:hover{opacity:1}\n"] }]
+      <mat-icon>{{ clicked ? 'check' : 'content_copy' }}</mat-icon>
+    </button>
+  `, styles: [".btn{padding:0;border:none;margin-left:4px;background:none;color:#616266;cursor:pointer;outline:inherit}.btn.clicked,.btn:hover,.btn:focus{color:#099}\n"] }]
         }] });
 
 /*
@@ -5360,12 +5427,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 class GioClipboardModule {
 }
 GioClipboardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioClipboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GioClipboardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioClipboardModule, declarations: [GioClipboardCopyWrapperComponent, GioClipboardCopyIconComponent], imports: [CommonModule, MatIconModule, MatTooltipModule, MatRippleModule, ClipboardModule], exports: [GioClipboardCopyWrapperComponent, GioClipboardCopyIconComponent] });
-GioClipboardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioClipboardModule, imports: [[CommonModule, MatIconModule, MatTooltipModule, MatRippleModule, ClipboardModule]] });
+GioClipboardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioClipboardModule, declarations: [GioClipboardCopyWrapperComponent, GioClipboardCopyIconComponent], imports: [CommonModule, MatIconModule, MatTooltipModule, MatRippleModule, ClipboardModule, MatButtonModule], exports: [GioClipboardCopyWrapperComponent, GioClipboardCopyIconComponent] });
+GioClipboardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioClipboardModule, imports: [[CommonModule, MatIconModule, MatTooltipModule, MatRippleModule, ClipboardModule, MatButtonModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioClipboardModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, MatIconModule, MatTooltipModule, MatRippleModule, ClipboardModule],
+                    imports: [CommonModule, MatIconModule, MatTooltipModule, MatRippleModule, ClipboardModule, MatButtonModule],
                     declarations: [GioClipboardCopyWrapperComponent, GioClipboardCopyIconComponent],
                     exports: [GioClipboardCopyWrapperComponent, GioClipboardCopyIconComponent],
                 }]
@@ -5475,7 +5542,7 @@ class GioLicenseDialogComponent {
     }
 }
 GioLicenseDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioLicenseDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-GioLicenseDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioLicenseDialogComponent, selector: "gio-license-dialog", 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<div class=\"gio-license-dialog__title\">\n  <mat-icon class=\"gio-license-dialog__title__cancel\"></mat-icon>\n  <button mat-icon-button [attr.aria-label]=\"'Close'\" (click)=\"onClose()\">\n    <mat-icon class=\"gio-license-dialog__title__cancel\" svgIcon=\"gio:cancel\"> </mat-icon>\n  </button>\n</div>\n\n<mat-dialog-content class=\"gio-license-dialog__content\">\n  <img class=\"gio-license-dialog__content__image\" [src]=\"featureInfo.image\" [alt]=\"featureInfo.title || 'Unlock Gravitee Enterprise'\" />\n  <h2 class=\"gio-license-dialog__content__title\" [innerHTML]=\"featureInfo.title || 'Unlock Gravitee Enterprise' | safe : 'html'\"></h2>\n  <div class=\"gio-license-dialog__content__description\" [innerHTML]=\"featureInfo.description | safe : 'html'\"></div>\n  <div class=\"gio-license-dialog__content__action\">\n    <a class=\"gio-license-dialog__content__action__button\" mat-stroked-button color=\"accent\" target=\"_blank\" [href]=\"trialURL\">\n      {{ featureInfo.trialButtonLabel || 'Request an enterprise license' }} <mat-icon svgIcon=\"gio:external-link\"></mat-icon>\n    </a>\n    <div *ngIf=\"!featureInfo.hideDays\" class=\"gio-license-dialog__content__action__info\">14 days trial</div>\n  </div>\n</mat-dialog-content>\n", styles: [".gio-license-dialog__title{display:flex;justify-content:space-between}.gio-license-dialog__title__cancel{width:24px;height:24px;color:#8e8f9c}.gio-license-dialog__content{display:flex;width:600px;flex-direction:column;align-items:center;justify-content:center;padding:0}.gio-license-dialog__content__title{margin:0 0 24px;font:600 26px/36px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.gio-license-dialog__content__description{padding:0 50px 32px;color:#606274;font-weight:500;line-height:24px;text-align:center}.gio-license-dialog__content__action{display:flex;flex-direction:column;align-items:center;padding:0 40px}.gio-license-dialog__content__action__button{width:250px}.gio-license-dialog__content__action__info{margin-top:10px;color:#606274;text-align:center}\n"], components: [{ type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }], directives: [{ type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "safe": SafePipe } });
+GioLicenseDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioLicenseDialogComponent, selector: "gio-license-dialog", 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<div class=\"gio-license-dialog__title\">\n  <mat-icon class=\"gio-license-dialog__title__cancel\"></mat-icon>\n  <button mat-icon-button [attr.aria-label]=\"'Close'\" (click)=\"onClose()\">\n    <mat-icon class=\"gio-license-dialog__title__cancel\" svgIcon=\"gio:cancel\"> </mat-icon>\n  </button>\n</div>\n\n<mat-dialog-content class=\"gio-license-dialog__content\">\n  <img class=\"gio-license-dialog__content__image\" [src]=\"featureInfo.image\" [alt]=\"featureInfo.title || 'Unlock Gravitee Enterprise'\" />\n  <h2 class=\"gio-license-dialog__content__title\" [innerHTML]=\"featureInfo.title || 'Unlock Gravitee Enterprise' | safe : 'html'\"></h2>\n  <div class=\"gio-license-dialog__content__description\" [innerHTML]=\"featureInfo.description | safe : 'html'\"></div>\n  <div class=\"gio-license-dialog__content__action\">\n    <a class=\"gio-license-dialog__content__action__button\" mat-stroked-button color=\"accent\" target=\"_blank\" [href]=\"trialURL\">\n      {{ featureInfo.trialButtonLabel || 'Request an enterprise license' }} <mat-icon svgIcon=\"gio:external-link\"></mat-icon>\n    </a>\n    <div *ngIf=\"!featureInfo.hideDays\" class=\"gio-license-dialog__content__action__info\">14 days trial</div>\n  </div>\n</mat-dialog-content>\n", styles: [".gio-license-dialog__title{display:flex;justify-content:space-between}.gio-license-dialog__title__cancel{width:24px;height:24px;color:#8e8f9c}.gio-license-dialog__content{display:flex;width:600px;flex-direction:column;align-items:center;justify-content:center;padding:0}.gio-license-dialog__content__title{margin:0 0 24px;font:600 26px/36px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.gio-license-dialog__content__description{padding:0 50px 32px;color:#606274;font-weight:500;line-height:24px;text-align:center}.gio-license-dialog__content__action{display:flex;flex-direction:column;align-items:center;padding:0 40px}.gio-license-dialog__content__action__button{width:250px}.gio-license-dialog__content__action__info{margin-top:10px;color:#606274;text-align:center}\n"], components: [{ type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }], directives: [{ type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "safe": SafePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioLicenseDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gio-license-dialog', 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<div class=\"gio-license-dialog__title\">\n  <mat-icon class=\"gio-license-dialog__title__cancel\"></mat-icon>\n  <button mat-icon-button [attr.aria-label]=\"'Close'\" (click)=\"onClose()\">\n    <mat-icon class=\"gio-license-dialog__title__cancel\" svgIcon=\"gio:cancel\"> </mat-icon>\n  </button>\n</div>\n\n<mat-dialog-content class=\"gio-license-dialog__content\">\n  <img class=\"gio-license-dialog__content__image\" [src]=\"featureInfo.image\" [alt]=\"featureInfo.title || 'Unlock Gravitee Enterprise'\" />\n  <h2 class=\"gio-license-dialog__content__title\" [innerHTML]=\"featureInfo.title || 'Unlock Gravitee Enterprise' | safe : 'html'\"></h2>\n  <div class=\"gio-license-dialog__content__description\" [innerHTML]=\"featureInfo.description | safe : 'html'\"></div>\n  <div class=\"gio-license-dialog__content__action\">\n    <a class=\"gio-license-dialog__content__action__button\" mat-stroked-button color=\"accent\" target=\"_blank\" [href]=\"trialURL\">\n      {{ featureInfo.trialButtonLabel || 'Request an enterprise license' }} <mat-icon svgIcon=\"gio:external-link\"></mat-icon>\n    </a>\n    <div *ngIf=\"!featureInfo.hideDays\" class=\"gio-license-dialog__content__action__info\">14 days trial</div>\n  </div>\n</mat-dialog-content>\n", styles: [".gio-license-dialog__title{display:flex;justify-content:space-between}.gio-license-dialog__title__cancel{width:24px;height:24px;color:#8e8f9c}.gio-license-dialog__content{display:flex;width:600px;flex-direction:column;align-items:center;justify-content:center;padding:0}.gio-license-dialog__content__title{margin:0 0 24px;font:600 26px/36px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.gio-license-dialog__content__description{padding:0 50px 32px;color:#606274;font-weight:500;line-height:24px;text-align:center}.gio-license-dialog__content__action{display:flex;flex-direction:column;align-items:center;padding:0 40px}.gio-license-dialog__content__action__button{width:250px}.gio-license-dialog__content__action__info{margin-top:10px;color:#606274;text-align:center}\n"] }]
@@ -6149,7 +6216,7 @@ class GioFormCronComponent {
         }
     }
 }
-GioFormCronComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormCronComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.FocusMonitor }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+GioFormCronComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormCronComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.FocusMonitor }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
 GioFormCronComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFormCronComponent, selector: "gio-form-cron", host: { properties: { "class.smallDisplay": "this.smallDisplay", "class.disabled": "this.hasError" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
@@ -6161,7 +6228,7 @@ GioFormCronComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             useExisting: forwardRef(() => GioFormCronComponent),
             multi: 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<div class=\"label\"><ng-content select=\"gio-form-cron-label\"></ng-content></div>\n<div class=\"wrapper\" [class.smallDisplay]=\"smallDisplay\" [class.disabled]=\"isDisabled\">\n  <ng-container *ngIf=\"internalFormGroup\" [formGroup]=\"internalFormGroup\">\n    <div class=\"menu\">\n      <mat-button-toggle-group class=\"gio-button-toggle-group menu__mode\" name=\"mode\" aria-label=\"Cron mode\" formControlName=\"mode\">\n        <mat-button-toggle value=\"secondly\" matTooltip=\"Secondly\" [matTooltipDisabled]=\"!smallDisplay\">{{\n          smallDisplay ? 's' : 'Secondly'\n        }}</mat-button-toggle>\n        <mat-button-toggle value=\"minutely\" matTooltip=\"Minutely\" [matTooltipDisabled]=\"!smallDisplay\">{{\n          smallDisplay ? 'm' : 'Minutely'\n        }}</mat-button-toggle>\n        <mat-button-toggle value=\"hourly\" matTooltip=\"Hourly\" [matTooltipDisabled]=\"!smallDisplay\">{{\n          smallDisplay ? 'h' : 'Hourly'\n        }}</mat-button-toggle>\n        <mat-button-toggle value=\"daily\" matTooltip=\"Daily\" [matTooltipDisabled]=\"!smallDisplay\">{{\n          smallDisplay ? 'D' : 'Daily'\n        }}</mat-button-toggle>\n        <mat-button-toggle value=\"weekly\" matTooltip=\"Weekly\" [matTooltipDisabled]=\"!smallDisplay\">{{\n          smallDisplay ? 'W' : 'Weekly'\n        }}</mat-button-toggle>\n        <mat-button-toggle value=\"monthly\" matTooltip=\"Monthly\" [matTooltipDisabled]=\"!smallDisplay\">{{\n          smallDisplay ? 'M' : 'Monthly'\n        }}</mat-button-toggle>\n        <mat-button-toggle value=\"custom\" matTooltip=\"Custom\" [matTooltipDisabled]=\"!smallDisplay\">{{\n          smallDisplay ? 'C' : 'Custom'\n        }}</mat-button-toggle>\n      </mat-button-toggle-group>\n      <button\n        *ngIf=\"value && !isDisabled\"\n        mat-icon-button\n        aria-label=\"Clear\"\n        matTooltip=\"Clear\"\n        type=\"button\"\n        (click)=\"onClear({ touched: true })\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <ng-container [ngSwitch]=\"internalFormGroup.get('mode')?.value\">\n      <ng-container *ngSwitchCase=\"'secondly'\">\n        <div class=\"modeForm\">\n          <span class=\"cron-form-label\">Every </span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Second</mat-label>\n            <mat-select formControlName=\"secondInterval\">\n              <mat-option *ngFor=\"let second of seconds\" [value]=\"second\">{{ second }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'minutely'\">\n        <div class=\"modeForm\">\n          <span class=\"cron-form-label\">Every </span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Minute(s)</mat-label>\n            <mat-select formControlName=\"minuteInterval\">\n              <mat-option *ngFor=\"let minute of minutes\" [value]=\"minute\">{{ minute }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'hourly'\">\n        <div class=\"modeForm\">\n          <span class=\"cron-form-label\">Every </span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Hour(s)</mat-label>\n            <mat-select formControlName=\"hourInterval\">\n              <mat-option *ngFor=\"let hour of hours\" [value]=\"hour\">{{ hour }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <span class=\"cron-form-label\">:</span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Minute(s)</mat-label>\n            <mat-select formControlName=\"minutes\">\n              <mat-option *ngFor=\"let minute of minutes\" [value]=\"minute\">{{ minute }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'daily'\">\n        <div class=\"modeForm\">\n          <span class=\"cron-form-label\">Every </span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Day(s)</mat-label>\n            <mat-select formControlName=\"dayInterval\">\n              <mat-option *ngFor=\"let day of daysOfMonth\" [value]=\"day\">{{ day }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <span class=\"cron-form-label\"> at </span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Hour(s)</mat-label>\n            <mat-select formControlName=\"hours\">\n              <mat-option *ngFor=\"let hour of hours\" [value]=\"hour\">{{ hour }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <span class=\"cron-form-label\">:</span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Minute(s)</mat-label>\n            <mat-select formControlName=\"minutes\">\n              <mat-option *ngFor=\"let minute of minutes\" [value]=\"minute\">{{ minute }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'weekly'\">\n        <div class=\"modeForm\">\n          <span class=\"cron-form-label\">Every </span>\n          <mat-form-field class=\"modeForm__field-medium\">\n            <mat-label>Day of the week</mat-label>\n            <mat-select formControlName=\"dayOfWeek\">\n              <mat-option *ngFor=\"let day of daysOfWeek; let index = index\" [value]=\"index\">{{ day }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <span class=\"cron-form-label\"> at </span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Hours</mat-label>\n            <mat-select formControlName=\"hours\">\n              <mat-option *ngFor=\"let hour of hours\" [value]=\"hour\">{{ hour }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <span class=\"cron-form-label\">:</span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Minutes</mat-label>\n            <mat-select formControlName=\"minutes\">\n              <mat-option *ngFor=\"let minute of minutes\" [value]=\"minute\">{{ minute }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'monthly'\">\n        <div class=\"modeForm\">\n          <span class=\"cron-form-label\">On the </span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Day(s)</mat-label>\n            <mat-select formControlName=\"dayOfMonth\">\n              <mat-option *ngFor=\"let day of daysOfMonth\" [value]=\"day\">{{ day }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <span class=\"cron-form-label\"> of every month at </span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Hours</mat-label>\n            <mat-select formControlName=\"hours\">\n              <mat-option *ngFor=\"let hour of hours\" [value]=\"hour\">{{ hour }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <span class=\"cron-form-label\">:</span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Minutes</mat-label>\n            <mat-select formControlName=\"minutes\">\n              <mat-option *ngFor=\"let minute of minutes\" [value]=\"minute\">{{ minute }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'custom'\">\n        <div class=\"modeForm\">\n          <mat-form-field class=\"modeForm__field-custom\">\n            <mat-label>Cron expression</mat-label>\n            <input matInput formControlName=\"customExpression\" placeholder=\"* * * * * *\" />\n          </mat-form-field>\n        </div>\n      </ng-container>\n    </ng-container>\n\n    <div *ngIf=\"value; else placeholder\" class=\"preview\">\n      <span *ngIf=\"internalFormGroup.get('mode')?.value !== 'custom'\" class=\"preview__value\">\n        {{ value }}\n      </span>\n      <span class=\"preview__hint\">{{ expressionDescription }}</span>\n    </div>\n  </ng-container>\n\n  <ng-template #placeholder>\n    <div class=\"placeholder\">No cron expression defined.</div>\n  </ng-template>\n</div>\n<div class=\"hint\"><ng-content select=\"gio-form-cron-hint\"></ng-content></div>\n", styles: [":host{display:flex;flex-direction:column}.label{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;padding-left:10px;color:#7a7b80}.label:empty{display:none}.wrapper{display:inline-flex;flex-direction:column;padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper:hover:not(.disabled){padding:7px;border:2px solid #313133}.wrapper .menu{display:inline-flex;margin-bottom:4px}.wrapper .menu__mode{border:none;margin-bottom:0}.wrapper .modeForm{margin-bottom:8px}.wrapper .modeForm__field-small,.wrapper .modeForm__field-medium,.wrapper .modeForm__field-custom{display:inline-block;height:52px}.wrapper .modeForm__field-small{width:80px}.wrapper .modeForm__field-medium{width:120px}.wrapper .modeForm__field-custom{width:100%}.wrapper .preview,.wrapper .placeholder{display:flex;flex-direction:column;align-items:center;padding:8px;border-radius:8px;background-color:#e7e8ef;color:#000}.wrapper .preview__hint,.wrapper .placeholder{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.wrapper.disabled .preview,.wrapper.disabled .placeholder{opacity:.4}.hint{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;padding-top:2px;padding-left:10px;color:#7a7b80}.hint:empty{display:none}:host(.ng-invalid.ng-touched) .wrapper{padding:7px;border-width:2px;border-color:#ec4899}:host(.ng-invalid.ng-touched) .wrapper .preview,:host(.ng-invalid.ng-touched) .wrapper .placeholder{color:#ec4899}\n"], components: [{ type: i2$3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3$3.MatLabel, selector: "mat-label" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }] });
+    ], 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<div class=\"label\"><ng-content select=\"gio-form-cron-label\"></ng-content></div>\n<div class=\"wrapper\" [class.smallDisplay]=\"smallDisplay\" [class.disabled]=\"isDisabled\">\n  <ng-container *ngIf=\"internalFormGroup\" [formGroup]=\"internalFormGroup\">\n    <div class=\"menu\">\n      <mat-button-toggle-group class=\"gio-button-toggle-group menu__mode\" name=\"mode\" aria-label=\"Cron mode\" formControlName=\"mode\">\n        <mat-button-toggle value=\"secondly\" matTooltip=\"Secondly\" [matTooltipDisabled]=\"!smallDisplay\">{{\n          smallDisplay ? 's' : 'Secondly'\n        }}</mat-button-toggle>\n        <mat-button-toggle value=\"minutely\" matTooltip=\"Minutely\" [matTooltipDisabled]=\"!smallDisplay\">{{\n          smallDisplay ? 'm' : 'Minutely'\n        }}</mat-button-toggle>\n        <mat-button-toggle value=\"hourly\" matTooltip=\"Hourly\" [matTooltipDisabled]=\"!smallDisplay\">{{\n          smallDisplay ? 'h' : 'Hourly'\n        }}</mat-button-toggle>\n        <mat-button-toggle value=\"daily\" matTooltip=\"Daily\" [matTooltipDisabled]=\"!smallDisplay\">{{\n          smallDisplay ? 'D' : 'Daily'\n        }}</mat-button-toggle>\n        <mat-button-toggle value=\"weekly\" matTooltip=\"Weekly\" [matTooltipDisabled]=\"!smallDisplay\">{{\n          smallDisplay ? 'W' : 'Weekly'\n        }}</mat-button-toggle>\n        <mat-button-toggle value=\"monthly\" matTooltip=\"Monthly\" [matTooltipDisabled]=\"!smallDisplay\">{{\n          smallDisplay ? 'M' : 'Monthly'\n        }}</mat-button-toggle>\n        <mat-button-toggle value=\"custom\" matTooltip=\"Custom\" [matTooltipDisabled]=\"!smallDisplay\">{{\n          smallDisplay ? 'C' : 'Custom'\n        }}</mat-button-toggle>\n      </mat-button-toggle-group>\n      <button\n        *ngIf=\"value && !isDisabled\"\n        mat-icon-button\n        aria-label=\"Clear\"\n        matTooltip=\"Clear\"\n        type=\"button\"\n        (click)=\"onClear({ touched: true })\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <ng-container [ngSwitch]=\"internalFormGroup.get('mode')?.value\">\n      <ng-container *ngSwitchCase=\"'secondly'\">\n        <div class=\"modeForm\">\n          <span class=\"cron-form-label\">Every </span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Second</mat-label>\n            <mat-select formControlName=\"secondInterval\">\n              <mat-option *ngFor=\"let second of seconds\" [value]=\"second\">{{ second }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'minutely'\">\n        <div class=\"modeForm\">\n          <span class=\"cron-form-label\">Every </span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Minute(s)</mat-label>\n            <mat-select formControlName=\"minuteInterval\">\n              <mat-option *ngFor=\"let minute of minutes\" [value]=\"minute\">{{ minute }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'hourly'\">\n        <div class=\"modeForm\">\n          <span class=\"cron-form-label\">Every </span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Hour(s)</mat-label>\n            <mat-select formControlName=\"hourInterval\">\n              <mat-option *ngFor=\"let hour of hours\" [value]=\"hour\">{{ hour }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <span class=\"cron-form-label\">:</span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Minute(s)</mat-label>\n            <mat-select formControlName=\"minutes\">\n              <mat-option *ngFor=\"let minute of minutes\" [value]=\"minute\">{{ minute }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'daily'\">\n        <div class=\"modeForm\">\n          <span class=\"cron-form-label\">Every </span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Day(s)</mat-label>\n            <mat-select formControlName=\"dayInterval\">\n              <mat-option *ngFor=\"let day of daysOfMonth\" [value]=\"day\">{{ day }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <span class=\"cron-form-label\"> at </span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Hour(s)</mat-label>\n            <mat-select formControlName=\"hours\">\n              <mat-option *ngFor=\"let hour of hours\" [value]=\"hour\">{{ hour }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <span class=\"cron-form-label\">:</span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Minute(s)</mat-label>\n            <mat-select formControlName=\"minutes\">\n              <mat-option *ngFor=\"let minute of minutes\" [value]=\"minute\">{{ minute }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'weekly'\">\n        <div class=\"modeForm\">\n          <span class=\"cron-form-label\">Every </span>\n          <mat-form-field class=\"modeForm__field-medium\">\n            <mat-label>Day of the week</mat-label>\n            <mat-select formControlName=\"dayOfWeek\">\n              <mat-option *ngFor=\"let day of daysOfWeek; let index = index\" [value]=\"index\">{{ day }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <span class=\"cron-form-label\"> at </span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Hours</mat-label>\n            <mat-select formControlName=\"hours\">\n              <mat-option *ngFor=\"let hour of hours\" [value]=\"hour\">{{ hour }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <span class=\"cron-form-label\">:</span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Minutes</mat-label>\n            <mat-select formControlName=\"minutes\">\n              <mat-option *ngFor=\"let minute of minutes\" [value]=\"minute\">{{ minute }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'monthly'\">\n        <div class=\"modeForm\">\n          <span class=\"cron-form-label\">On the </span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Day(s)</mat-label>\n            <mat-select formControlName=\"dayOfMonth\">\n              <mat-option *ngFor=\"let day of daysOfMonth\" [value]=\"day\">{{ day }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <span class=\"cron-form-label\"> of every month at </span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Hours</mat-label>\n            <mat-select formControlName=\"hours\">\n              <mat-option *ngFor=\"let hour of hours\" [value]=\"hour\">{{ hour }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <span class=\"cron-form-label\">:</span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Minutes</mat-label>\n            <mat-select formControlName=\"minutes\">\n              <mat-option *ngFor=\"let minute of minutes\" [value]=\"minute\">{{ minute }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'custom'\">\n        <div class=\"modeForm\">\n          <mat-form-field class=\"modeForm__field-custom\">\n            <mat-label>Cron expression</mat-label>\n            <input matInput formControlName=\"customExpression\" placeholder=\"* * * * * *\" />\n          </mat-form-field>\n        </div>\n      </ng-container>\n    </ng-container>\n\n    <div *ngIf=\"value; else placeholder\" class=\"preview\">\n      <span *ngIf=\"internalFormGroup.get('mode')?.value !== 'custom'\" class=\"preview__value\">\n        {{ value }}\n      </span>\n      <span class=\"preview__hint\">{{ expressionDescription }}</span>\n    </div>\n  </ng-container>\n\n  <ng-template #placeholder>\n    <div class=\"placeholder\">No cron expression defined.</div>\n  </ng-template>\n</div>\n<div class=\"hint\"><ng-content select=\"gio-form-cron-hint\"></ng-content></div>\n", styles: [":host{display:flex;flex-direction:column}.label{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;padding-left:10px;color:#7a7b80}.label:empty{display:none}.wrapper{display:inline-flex;flex-direction:column;padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper:hover:not(.disabled){padding:7px;border:2px solid #313133}.wrapper .menu{display:inline-flex;margin-bottom:4px}.wrapper .menu__mode{border:none;margin-bottom:0}.wrapper .modeForm{margin-bottom:8px}.wrapper .modeForm__field-small,.wrapper .modeForm__field-medium,.wrapper .modeForm__field-custom{display:inline-block;height:52px}.wrapper .modeForm__field-small{width:80px}.wrapper .modeForm__field-medium{width:120px}.wrapper .modeForm__field-custom{width:100%}.wrapper .preview,.wrapper .placeholder{display:flex;flex-direction:column;align-items:center;padding:8px;border-radius:8px;background-color:#e7e8ef;color:#000}.wrapper .preview__hint,.wrapper .placeholder{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.wrapper.disabled .preview,.wrapper.disabled .placeholder{opacity:.4}.hint{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;padding-top:2px;padding-left:10px;color:#7a7b80}.hint:empty{display:none}:host(.ng-invalid.ng-touched) .wrapper{padding:7px;border-width:2px;border-color:#ec4899}:host(.ng-invalid.ng-touched) .wrapper .preview,:host(.ng-invalid.ng-touched) .wrapper .placeholder{color:#ec4899}\n"], components: [{ type: i2$3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3$3.MatLabel, selector: "mat-label" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormCronComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gio-form-cron', providers: [
@@ -6176,7 +6243,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             multi: true,
                         },
                     ], 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<div class=\"label\"><ng-content select=\"gio-form-cron-label\"></ng-content></div>\n<div class=\"wrapper\" [class.smallDisplay]=\"smallDisplay\" [class.disabled]=\"isDisabled\">\n  <ng-container *ngIf=\"internalFormGroup\" [formGroup]=\"internalFormGroup\">\n    <div class=\"menu\">\n      <mat-button-toggle-group class=\"gio-button-toggle-group menu__mode\" name=\"mode\" aria-label=\"Cron mode\" formControlName=\"mode\">\n        <mat-button-toggle value=\"secondly\" matTooltip=\"Secondly\" [matTooltipDisabled]=\"!smallDisplay\">{{\n          smallDisplay ? 's' : 'Secondly'\n        }}</mat-button-toggle>\n        <mat-button-toggle value=\"minutely\" matTooltip=\"Minutely\" [matTooltipDisabled]=\"!smallDisplay\">{{\n          smallDisplay ? 'm' : 'Minutely'\n        }}</mat-button-toggle>\n        <mat-button-toggle value=\"hourly\" matTooltip=\"Hourly\" [matTooltipDisabled]=\"!smallDisplay\">{{\n          smallDisplay ? 'h' : 'Hourly'\n        }}</mat-button-toggle>\n        <mat-button-toggle value=\"daily\" matTooltip=\"Daily\" [matTooltipDisabled]=\"!smallDisplay\">{{\n          smallDisplay ? 'D' : 'Daily'\n        }}</mat-button-toggle>\n        <mat-button-toggle value=\"weekly\" matTooltip=\"Weekly\" [matTooltipDisabled]=\"!smallDisplay\">{{\n          smallDisplay ? 'W' : 'Weekly'\n        }}</mat-button-toggle>\n        <mat-button-toggle value=\"monthly\" matTooltip=\"Monthly\" [matTooltipDisabled]=\"!smallDisplay\">{{\n          smallDisplay ? 'M' : 'Monthly'\n        }}</mat-button-toggle>\n        <mat-button-toggle value=\"custom\" matTooltip=\"Custom\" [matTooltipDisabled]=\"!smallDisplay\">{{\n          smallDisplay ? 'C' : 'Custom'\n        }}</mat-button-toggle>\n      </mat-button-toggle-group>\n      <button\n        *ngIf=\"value && !isDisabled\"\n        mat-icon-button\n        aria-label=\"Clear\"\n        matTooltip=\"Clear\"\n        type=\"button\"\n        (click)=\"onClear({ touched: true })\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <ng-container [ngSwitch]=\"internalFormGroup.get('mode')?.value\">\n      <ng-container *ngSwitchCase=\"'secondly'\">\n        <div class=\"modeForm\">\n          <span class=\"cron-form-label\">Every </span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Second</mat-label>\n            <mat-select formControlName=\"secondInterval\">\n              <mat-option *ngFor=\"let second of seconds\" [value]=\"second\">{{ second }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'minutely'\">\n        <div class=\"modeForm\">\n          <span class=\"cron-form-label\">Every </span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Minute(s)</mat-label>\n            <mat-select formControlName=\"minuteInterval\">\n              <mat-option *ngFor=\"let minute of minutes\" [value]=\"minute\">{{ minute }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'hourly'\">\n        <div class=\"modeForm\">\n          <span class=\"cron-form-label\">Every </span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Hour(s)</mat-label>\n            <mat-select formControlName=\"hourInterval\">\n              <mat-option *ngFor=\"let hour of hours\" [value]=\"hour\">{{ hour }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <span class=\"cron-form-label\">:</span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Minute(s)</mat-label>\n            <mat-select formControlName=\"minutes\">\n              <mat-option *ngFor=\"let minute of minutes\" [value]=\"minute\">{{ minute }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'daily'\">\n        <div class=\"modeForm\">\n          <span class=\"cron-form-label\">Every </span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Day(s)</mat-label>\n            <mat-select formControlName=\"dayInterval\">\n              <mat-option *ngFor=\"let day of daysOfMonth\" [value]=\"day\">{{ day }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <span class=\"cron-form-label\"> at </span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Hour(s)</mat-label>\n            <mat-select formControlName=\"hours\">\n              <mat-option *ngFor=\"let hour of hours\" [value]=\"hour\">{{ hour }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <span class=\"cron-form-label\">:</span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Minute(s)</mat-label>\n            <mat-select formControlName=\"minutes\">\n              <mat-option *ngFor=\"let minute of minutes\" [value]=\"minute\">{{ minute }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'weekly'\">\n        <div class=\"modeForm\">\n          <span class=\"cron-form-label\">Every </span>\n          <mat-form-field class=\"modeForm__field-medium\">\n            <mat-label>Day of the week</mat-label>\n            <mat-select formControlName=\"dayOfWeek\">\n              <mat-option *ngFor=\"let day of daysOfWeek; let index = index\" [value]=\"index\">{{ day }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <span class=\"cron-form-label\"> at </span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Hours</mat-label>\n            <mat-select formControlName=\"hours\">\n              <mat-option *ngFor=\"let hour of hours\" [value]=\"hour\">{{ hour }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <span class=\"cron-form-label\">:</span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Minutes</mat-label>\n            <mat-select formControlName=\"minutes\">\n              <mat-option *ngFor=\"let minute of minutes\" [value]=\"minute\">{{ minute }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'monthly'\">\n        <div class=\"modeForm\">\n          <span class=\"cron-form-label\">On the </span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Day(s)</mat-label>\n            <mat-select formControlName=\"dayOfMonth\">\n              <mat-option *ngFor=\"let day of daysOfMonth\" [value]=\"day\">{{ day }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <span class=\"cron-form-label\"> of every month at </span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Hours</mat-label>\n            <mat-select formControlName=\"hours\">\n              <mat-option *ngFor=\"let hour of hours\" [value]=\"hour\">{{ hour }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <span class=\"cron-form-label\">:</span>\n          <mat-form-field class=\"modeForm__field-small\">\n            <mat-label>Minutes</mat-label>\n            <mat-select formControlName=\"minutes\">\n              <mat-option *ngFor=\"let minute of minutes\" [value]=\"minute\">{{ minute }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'custom'\">\n        <div class=\"modeForm\">\n          <mat-form-field class=\"modeForm__field-custom\">\n            <mat-label>Cron expression</mat-label>\n            <input matInput formControlName=\"customExpression\" placeholder=\"* * * * * *\" />\n          </mat-form-field>\n        </div>\n      </ng-container>\n    </ng-container>\n\n    <div *ngIf=\"value; else placeholder\" class=\"preview\">\n      <span *ngIf=\"internalFormGroup.get('mode')?.value !== 'custom'\" class=\"preview__value\">\n        {{ value }}\n      </span>\n      <span class=\"preview__hint\">{{ expressionDescription }}</span>\n    </div>\n  </ng-container>\n\n  <ng-template #placeholder>\n    <div class=\"placeholder\">No cron expression defined.</div>\n  </ng-template>\n</div>\n<div class=\"hint\"><ng-content select=\"gio-form-cron-hint\"></ng-content></div>\n", styles: [":host{display:flex;flex-direction:column}.label{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;padding-left:10px;color:#7a7b80}.label:empty{display:none}.wrapper{display:inline-flex;flex-direction:column;padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper:hover:not(.disabled){padding:7px;border:2px solid #313133}.wrapper .menu{display:inline-flex;margin-bottom:4px}.wrapper .menu__mode{border:none;margin-bottom:0}.wrapper .modeForm{margin-bottom:8px}.wrapper .modeForm__field-small,.wrapper .modeForm__field-medium,.wrapper .modeForm__field-custom{display:inline-block;height:52px}.wrapper .modeForm__field-small{width:80px}.wrapper .modeForm__field-medium{width:120px}.wrapper .modeForm__field-custom{width:100%}.wrapper .preview,.wrapper .placeholder{display:flex;flex-direction:column;align-items:center;padding:8px;border-radius:8px;background-color:#e7e8ef;color:#000}.wrapper .preview__hint,.wrapper .placeholder{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.wrapper.disabled .preview,.wrapper.disabled .placeholder{opacity:.4}.hint{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;padding-top:2px;padding-left:10px;color:#7a7b80}.hint:empty{display:none}:host(.ng-invalid.ng-touched) .wrapper{padding:7px;border-width:2px;border-color:#ec4899}:host(.ng-invalid.ng-touched) .wrapper .preview,:host(.ng-invalid.ng-touched) .wrapper .placeholder{color:#ec4899}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.FocusMonitor }, { type: i0.NgZone }]; }, propDecorators: { smallDisplay: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.FocusMonitor }, { type: i0.NgZone }]; }, propDecorators: { smallDisplay: [{
                 type: HostBinding,
                 args: ['class.smallDisplay']
             }], hasError: [{
@@ -6409,7 +6476,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 class GioRadioButtonContentComponent {
 }
 GioRadioButtonContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioRadioButtonContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GioRadioButtonContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioRadioButtonContentComponent, selector: "gio-radio-button-content", inputs: { icon: "icon" }, ngImport: i0, template: "<!--\n\n    Copyright (C) 2022 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<div class=\"gio-radio-button__content\">\n  <div class=\"gio-radio-button__content__icon\">\n    <mat-icon [svgIcon]=\"icon\" *ngIf=\"icon\"></mat-icon>\n  </div>\n  <div class=\"gio-radio-button__content__title\">\n    <ng-content select=\"gio-radio-button-title\"></ng-content>\n  </div>\n  <div class=\"gio-radio-button__content__subtitle\">\n    <ng-content select=\"gio-radio-button-subtitle\"></ng-content>\n  </div>\n</div>\n", styles: [""], components: [{ type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+GioRadioButtonContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioRadioButtonContentComponent, selector: "gio-radio-button-content", inputs: { icon: "icon" }, ngImport: i0, template: "<!--\n\n    Copyright (C) 2022 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<div class=\"gio-radio-button__content\">\n  <div class=\"gio-radio-button__content__icon\">\n    <mat-icon [svgIcon]=\"icon\" *ngIf=\"icon\"></mat-icon>\n  </div>\n  <div class=\"gio-radio-button__content__title\">\n    <ng-content select=\"gio-radio-button-title\"></ng-content>\n  </div>\n  <div class=\"gio-radio-button__content__subtitle\">\n    <ng-content select=\"gio-radio-button-subtitle\"></ng-content>\n  </div>\n</div>\n", styles: [""], components: [{ type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioRadioButtonContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gio-radio-button-content', template: "<!--\n\n    Copyright (C) 2022 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<div class=\"gio-radio-button__content\">\n  <div class=\"gio-radio-button__content__icon\">\n    <mat-icon [svgIcon]=\"icon\" *ngIf=\"icon\"></mat-icon>\n  </div>\n  <div class=\"gio-radio-button__content__title\">\n    <ng-content select=\"gio-radio-button-title\"></ng-content>\n  </div>\n  <div class=\"gio-radio-button__content__subtitle\">\n    <ng-content select=\"gio-radio-button-subtitle\"></ng-content>\n  </div>\n</div>\n", styles: [""] }]