@gravitee/ui-particles-angular 15.13.0 → 16.0.0

package/fesm2022/gravitee-ui-particles-angular-gio-el.mjs

@@ -1,31 +1,31 @@
 import * as i0 from '@angular/core';
-import { inject, DestroyRef, Component, Input, Optional, Self, HostBinding, EventEmitter, Output, ChangeDetectionStrategy } from '@angular/core';
+import { Input, Component, inject, DestroyRef, HostBinding, Optional, Self, EventEmitter, Output, ChangeDetectionStrategy } from '@angular/core';
 import * as i4$1 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i5 from '@angular/forms';
-import { FormControl, ReactiveFormsModule, FormGroup, Validators, FormArray } from '@angular/forms';
+import * as i4 from '@angular/forms';
+import { FormControl, ReactiveFormsModule, FormGroup, FormArray, Validators } from '@angular/forms';
 import * as i3$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i5$2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i2 from '@angular/material/form-field';
+import * as i1 from '@angular/material/form-field';
 import { MatFormFieldModule, MatFormFieldControl } from '@angular/material/form-field';
-import * as i4 from '@angular/material/input';
+import * as i3 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i3 from '@angular/material/select';
+import * as i2 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { startWith, map } from 'rxjs/operators';
-import { isNil, isEmpty, toString, isDate, get, has } from 'lodash';
+import { isNil, isEmpty, isDate, toString, get, has } from 'lodash';
 import { GioIconsModule } from '@gravitee/ui-particles-angular';
-import * as i6 from '@angular/material/autocomplete';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { Observable, Subject, combineLatest } from 'rxjs';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
-import * as i5$1 from '@angular/material/datepicker';
+import * as i5 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i6 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i5$1 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { Observable, Subject, combineLatest } from 'rxjs';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i2$1 from '@angular/cdk/a11y';
 import * as i6$1 from '@angular/material/icon';
@@ -165,45 +165,36 @@ class Condition {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class GioElEditorTypeStringComponent {
+class GioElEditorTypeBooleanComponent {
     constructor() {
-        this.destroyRef = inject(DestroyRef);
         this.operators = [
             { label: 'Equals', value: 'EQUALS' },
             { label: 'Not equals', value: 'NOT_EQUALS' },
         ];
-        this.filteredOptions$ = new Observable();
     }
     ngOnChanges(changes) {
         if (changes.conditionFormGroup) {
             const field = this.conditionFormGroup.controls.field.value;
-            if (isEmpty(field) || field?.type !== 'string') {
-                throw new Error('String field is required!');
+            if (isEmpty(field) || field?.type !== 'boolean') {
+                throw new Error('Boolean field is required!');
             }
             this.conditionFormGroup.addControl('operator', new FormControl(null));
             this.conditionFormGroup.addControl('value', new FormControl(null));
-            const values = field.values?.map(value => (typeof value === 'string' ? { value, label: value } : value));
-            if (values && !isEmpty(values)) {
-                this.filteredOptions$ = this.conditionFormGroup.get('value').valueChanges.pipe(takeUntilDestroyed(this.destroyRef), startWith(''), map(value => filterValues(values, toString(value) ?? '')));
-            }
+            this.conditionFormGroup.get('value')?.setValue(true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioElEditorTypeStringComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: GioElEditorTypeStringComponent, isStandalone: true, selector: "gio-el-editor-type-string", inputs: { conditionFormGroup: "conditionFormGroup" }, usesOnChanges: true, ngImport: i0, template: "<!--\n\n    Copyright (C) 2024 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@if (conditionFormGroup) {\n  <div [formGroup]=\"conditionFormGroup\" class=\"condition\">\n    <mat-form-field class=\"condition__operator\">\n      <mat-label>Operator</mat-label>\n\n      <mat-select formControlName=\"operator\" placeholder=\"Select Operator\">\n        @for (operator of operators; track operator.value) {\n          <mat-option [value]=\"operator.value\">{{ operator.label }}</mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Value</mat-label>\n      <input matInput formControlName=\"value\" placeholder=\"Value\" [matAutocomplete]=\"auto\" />\n\n      <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\n        @for (option of filteredOptions$ | async; track option) {\n          <mat-option [value]=\"option.value\">{{ option.label }}</mat-option>\n        }\n      </mat-autocomplete>\n    </mat-form-field>\n  </div>\n}\n", styles: [".condition{display:flex;flex-direction:row;align-items:flex-start;gap:8px}.condition__operator{width:120px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GioElEditorTypeBooleanComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: GioElEditorTypeBooleanComponent, isStandalone: true, selector: "gio-el-editor-type-boolean", inputs: { conditionFormGroup: "conditionFormGroup" }, usesOnChanges: true, ngImport: i0, template: "<!--\n\n    Copyright (C) 2024 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@if (conditionFormGroup) {\n  <div [formGroup]=\"conditionFormGroup\" class=\"condition\">\n    <mat-form-field class=\"condition__operator\">\n      <mat-label>Operator</mat-label>\n\n      <mat-select formControlName=\"operator\" placeholder=\"Select Operator\">\n        @for (operator of operators; track operator.value) {\n          <mat-option [value]=\"operator.value\">{{ operator.label }}</mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n\n    <mat-slide-toggle class=\"toggle\" #valueToggle formControlName=\"value\">\n      <mat-label>{{ valueToggle.checked ? 'True' : 'False' }}</mat-label>\n    </mat-slide-toggle>\n  </div>\n}\n", styles: [".condition{display:flex;flex-direction:row;align-items:flex-start;gap:8px}.condition__operator{width:120px}.toggle{min-width:80px;align-self:center;margin-left:8px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioElEditorTypeStringComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GioElEditorTypeBooleanComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gio-el-editor-type-string', imports: [CommonModule, MatFormFieldModule, MatSelectModule, MatInputModule, ReactiveFormsModule, MatAutocompleteModule], template: "<!--\n\n    Copyright (C) 2024 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@if (conditionFormGroup) {\n  <div [formGroup]=\"conditionFormGroup\" class=\"condition\">\n    <mat-form-field class=\"condition__operator\">\n      <mat-label>Operator</mat-label>\n\n      <mat-select formControlName=\"operator\" placeholder=\"Select Operator\">\n        @for (operator of operators; track operator.value) {\n          <mat-option [value]=\"operator.value\">{{ operator.label }}</mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Value</mat-label>\n      <input matInput formControlName=\"value\" placeholder=\"Value\" [matAutocomplete]=\"auto\" />\n\n      <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\n        @for (option of filteredOptions$ | async; track option) {\n          <mat-option [value]=\"option.value\">{{ option.label }}</mat-option>\n        }\n      </mat-autocomplete>\n    </mat-form-field>\n  </div>\n}\n", styles: [".condition{display:flex;flex-direction:row;align-items:flex-start;gap:8px}.condition__operator{width:120px}\n"] }]
+            args: [{ selector: 'gio-el-editor-type-boolean', imports: [MatFormFieldModule, MatSelectModule, ReactiveFormsModule, MatSlideToggle], template: "<!--\n\n    Copyright (C) 2024 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@if (conditionFormGroup) {\n  <div [formGroup]=\"conditionFormGroup\" class=\"condition\">\n    <mat-form-field class=\"condition__operator\">\n      <mat-label>Operator</mat-label>\n\n      <mat-select formControlName=\"operator\" placeholder=\"Select Operator\">\n        @for (operator of operators; track operator.value) {\n          <mat-option [value]=\"operator.value\">{{ operator.label }}</mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n\n    <mat-slide-toggle class=\"toggle\" #valueToggle formControlName=\"value\">\n      <mat-label>{{ valueToggle.checked ? 'True' : 'False' }}</mat-label>\n    </mat-slide-toggle>\n  </div>\n}\n", styles: [".condition{display:flex;flex-direction:row;align-items:flex-start;gap:8px}.condition__operator{width:120px}.toggle{min-width:80px;align-self:center;margin-left:8px}\n"] }]
         }], propDecorators: { conditionFormGroup: [{
                 type: Input,
                 args: [{
                         required: true,
                     }]
             }] } });
-const filterValues = (values, value) => {
-    const filterValue = value.toLowerCase();
-    return values.filter(option => option.label.toLowerCase().includes(filterValue) || option.value.toLowerCase().includes(filterValue));
-};
 
 /*
  * Copyright (C) 2024 The Gravitee team (http://gravitee.io)
@@ -220,30 +211,43 @@ const filterValues = (values, value) => {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class GioElEditorTypeBooleanComponent {
+class GioElEditorTypeDateComponent {
     constructor() {
+        this.destroyRef = inject(DestroyRef);
         this.operators = [
             { label: 'Equals', value: 'EQUALS' },
             { label: 'Not equals', value: 'NOT_EQUALS' },
+            { label: 'Less than', value: 'LESS_THAN' },
+            { label: 'Less than or equals', value: 'LESS_THAN_OR_EQUALS' },
+            { label: 'Greater than', value: 'GREATER_THAN' },
+            { label: 'Greater than or equals', value: 'GREATER_THAN_OR_EQUALS' },
         ];
+        this.datepickerControl = new FormControl();
     }
     ngOnChanges(changes) {
         if (changes.conditionFormGroup) {
             const field = this.conditionFormGroup.controls.field.value;
-            if (isEmpty(field) || field?.type !== 'boolean') {
-                throw new Error('Boolean field is required!');
+            if (isEmpty(field) || field?.type !== 'date') {
+                throw new Error('Date field is required!');
             }
             this.conditionFormGroup.addControl('operator', new FormControl(null));
-            this.conditionFormGroup.addControl('value', new FormControl(null));
-            this.conditionFormGroup.get('value')?.setValue(true);
+            this.conditionFormGroup.addControl('value', new FormControl(true));
+            this.datepickerControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
+                if (!isDate(value)) {
+                    return;
+                }
+                // Convert date to UTC ignoring timezone
+                const dateUtc = Date.UTC(value.getFullYear(), value.getMonth(), value.getDate(), value.getHours(), value.getMinutes(), value.getSeconds());
+                this.conditionFormGroup.controls.value.setValue(new Date(dateUtc));
+            });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioElEditorTypeBooleanComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: GioElEditorTypeBooleanComponent, isStandalone: true, selector: "gio-el-editor-type-boolean", inputs: { conditionFormGroup: "conditionFormGroup" }, usesOnChanges: true, ngImport: i0, template: "<!--\n\n    Copyright (C) 2024 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@if (conditionFormGroup) {\n  <div [formGroup]=\"conditionFormGroup\" class=\"condition\">\n    <mat-form-field class=\"condition__operator\">\n      <mat-label>Operator</mat-label>\n\n      <mat-select formControlName=\"operator\" placeholder=\"Select Operator\">\n        @for (operator of operators; track operator.value) {\n          <mat-option [value]=\"operator.value\">{{ operator.label }}</mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n\n    <mat-slide-toggle class=\"toggle\" #valueToggle formControlName=\"value\">\n      <mat-label>{{ valueToggle.checked ? 'True' : 'False' }}</mat-label>\n    </mat-slide-toggle>\n  </div>\n}\n", styles: [".condition{display:flex;flex-direction:row;align-items:flex-start;gap:8px}.condition__operator{width:120px}.toggle{min-width:80px;align-self:center;margin-left:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GioElEditorTypeDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: GioElEditorTypeDateComponent, isStandalone: true, selector: "gio-el-editor-type-date", inputs: { conditionFormGroup: "conditionFormGroup" }, usesOnChanges: true, ngImport: i0, template: "<!--\n\n    Copyright (C) 2024 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@if (conditionFormGroup) {\n  <div [formGroup]=\"conditionFormGroup\" class=\"condition\">\n    <mat-form-field class=\"condition__operator\">\n      <mat-label>Operator</mat-label>\n\n      <mat-select formControlName=\"operator\" placeholder=\"Select Operator\">\n        @for (operator of operators; track operator.value) {\n          <mat-option [value]=\"operator.value\">{{ operator.label }}</mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Choose a date</mat-label>\n      <input matInput [matDatepicker]=\"picker\" [formControl]=\"datepickerControl\" />\n      <mat-hint>MM/DD/YYYY</mat-hint>\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n    </mat-form-field>\n  </div>\n}\n", styles: [".condition{display:flex;flex-direction:row;align-items:flex-start;gap:8px}.condition__operator{width:120px}.toggle{min-width:80px;margin-left:8px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioElEditorTypeBooleanComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GioElEditorTypeDateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gio-el-editor-type-boolean', imports: [CommonModule, MatFormFieldModule, MatSelectModule, ReactiveFormsModule, MatSlideToggle], template: "<!--\n\n    Copyright (C) 2024 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@if (conditionFormGroup) {\n  <div [formGroup]=\"conditionFormGroup\" class=\"condition\">\n    <mat-form-field class=\"condition__operator\">\n      <mat-label>Operator</mat-label>\n\n      <mat-select formControlName=\"operator\" placeholder=\"Select Operator\">\n        @for (operator of operators; track operator.value) {\n          <mat-option [value]=\"operator.value\">{{ operator.label }}</mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n\n    <mat-slide-toggle class=\"toggle\" #valueToggle formControlName=\"value\">\n      <mat-label>{{ valueToggle.checked ? 'True' : 'False' }}</mat-label>\n    </mat-slide-toggle>\n  </div>\n}\n", styles: [".condition{display:flex;flex-direction:row;align-items:flex-start;gap:8px}.condition__operator{width:120px}.toggle{min-width:80px;align-self:center;margin-left:8px}\n"] }]
+            args: [{ selector: 'gio-el-editor-type-date', imports: [MatFormFieldModule, MatSelectModule, MatInputModule, ReactiveFormsModule, MatDatepickerModule], template: "<!--\n\n    Copyright (C) 2024 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@if (conditionFormGroup) {\n  <div [formGroup]=\"conditionFormGroup\" class=\"condition\">\n    <mat-form-field class=\"condition__operator\">\n      <mat-label>Operator</mat-label>\n\n      <mat-select formControlName=\"operator\" placeholder=\"Select Operator\">\n        @for (operator of operators; track operator.value) {\n          <mat-option [value]=\"operator.value\">{{ operator.label }}</mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Choose a date</mat-label>\n      <input matInput [matDatepicker]=\"picker\" [formControl]=\"datepickerControl\" />\n      <mat-hint>MM/DD/YYYY</mat-hint>\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n    </mat-form-field>\n  </div>\n}\n", styles: [".condition{display:flex;flex-direction:row;align-items:flex-start;gap:8px}.condition__operator{width:120px}.toggle{min-width:80px;margin-left:8px}\n"] }]
         }], propDecorators: { conditionFormGroup: [{
                 type: Input,
                 args: [{
@@ -295,12 +299,12 @@ class GioElEditorTypeNumberComponent {
             this.conditionFormGroup.addControl('value', new FormControl(true));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioElEditorTypeNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: GioElEditorTypeNumberComponent, isStandalone: true, selector: "gio-el-editor-type-number", inputs: { conditionFormGroup: "conditionFormGroup" }, usesOnChanges: true, ngImport: i0, template: "<!--\n\n    Copyright (C) 2024 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@if (conditionFormGroup) {\n  <div [formGroup]=\"conditionFormGroup\" class=\"condition\">\n    <mat-form-field class=\"condition__operator\">\n      <mat-label>Operator</mat-label>\n\n      <mat-select formControlName=\"operator\" placeholder=\"Select Operator\">\n        @for (operator of operators; track operator.value) {\n          <mat-option [value]=\"operator.value\">{{ operator.label }}</mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Value</mat-label>\n      <input matInput formControlName=\"value\" placeholder=\"Value\" type=\"number\" [min]=\"min\" [max]=\"max\" />\n      <mat-error *ngIf=\"conditionFormGroup.get('value')?.hasError('min')\"> Value must be at least {{ min }} </mat-error>\n      <mat-error *ngIf=\"conditionFormGroup.get('value')?.hasError('max')\"> Value must be at most {{ max }} </mat-error>\n    </mat-form-field>\n  </div>\n}\n", styles: [".condition{display:flex;flex-direction:row;align-items:flex-start;gap:8px}.condition__operator{width:120px}.toggle{min-width:80px;margin-left:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i5.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GioElEditorTypeNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: GioElEditorTypeNumberComponent, isStandalone: true, selector: "gio-el-editor-type-number", inputs: { conditionFormGroup: "conditionFormGroup" }, usesOnChanges: true, ngImport: i0, template: "<!--\n\n    Copyright (C) 2025 The Gravitee team (http://gravitee.io)\n    \n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n    \n            http://www.apache.org/licenses/LICENSE-2.0\n    \n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n@if (conditionFormGroup) {\n  <div [formGroup]=\"conditionFormGroup\" class=\"condition\">\n    <mat-form-field class=\"condition__operator\">\n      <mat-label>Operator</mat-label>\n\n      <mat-select formControlName=\"operator\" placeholder=\"Select Operator\">\n        @for (operator of operators; track operator.value) {\n          <mat-option [value]=\"operator.value\">{{ operator.label }}</mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Value</mat-label>\n      <input matInput formControlName=\"value\" placeholder=\"Value\" type=\"number\" [min]=\"min\" [max]=\"max\" />\n      @if (conditionFormGroup.controls.value.hasError('min')) {\n        <mat-error> Value must be at least {{ min }} </mat-error>\n      }\n      @if (conditionFormGroup.controls.value.hasError('max')) {\n        <mat-error> Value must be at most {{ max }} </mat-error>\n      }\n    </mat-form-field>\n  </div>\n}\n", styles: [".condition{display:flex;flex-direction:row;align-items:flex-start;gap:8px}.condition__operator{width:120px}.toggle{min-width:80px;margin-left:8px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i4.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioElEditorTypeNumberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GioElEditorTypeNumberComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gio-el-editor-type-number', imports: [CommonModule, MatFormFieldModule, MatSelectModule, MatInputModule, ReactiveFormsModule], template: "<!--\n\n    Copyright (C) 2024 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@if (conditionFormGroup) {\n  <div [formGroup]=\"conditionFormGroup\" class=\"condition\">\n    <mat-form-field class=\"condition__operator\">\n      <mat-label>Operator</mat-label>\n\n      <mat-select formControlName=\"operator\" placeholder=\"Select Operator\">\n        @for (operator of operators; track operator.value) {\n          <mat-option [value]=\"operator.value\">{{ operator.label }}</mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Value</mat-label>\n      <input matInput formControlName=\"value\" placeholder=\"Value\" type=\"number\" [min]=\"min\" [max]=\"max\" />\n      <mat-error *ngIf=\"conditionFormGroup.get('value')?.hasError('min')\"> Value must be at least {{ min }} </mat-error>\n      <mat-error *ngIf=\"conditionFormGroup.get('value')?.hasError('max')\"> Value must be at most {{ max }} </mat-error>\n    </mat-form-field>\n  </div>\n}\n", styles: [".condition{display:flex;flex-direction:row;align-items:flex-start;gap:8px}.condition__operator{width:120px}.toggle{min-width:80px;margin-left:8px}\n"] }]
+            args: [{ selector: 'gio-el-editor-type-number', imports: [MatFormFieldModule, MatSelectModule, MatInputModule, ReactiveFormsModule], template: "<!--\n\n    Copyright (C) 2025 The Gravitee team (http://gravitee.io)\n    \n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n    \n            http://www.apache.org/licenses/LICENSE-2.0\n    \n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n@if (conditionFormGroup) {\n  <div [formGroup]=\"conditionFormGroup\" class=\"condition\">\n    <mat-form-field class=\"condition__operator\">\n      <mat-label>Operator</mat-label>\n\n      <mat-select formControlName=\"operator\" placeholder=\"Select Operator\">\n        @for (operator of operators; track operator.value) {\n          <mat-option [value]=\"operator.value\">{{ operator.label }}</mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Value</mat-label>\n      <input matInput formControlName=\"value\" placeholder=\"Value\" type=\"number\" [min]=\"min\" [max]=\"max\" />\n      @if (conditionFormGroup.controls.value.hasError('min')) {\n        <mat-error> Value must be at least {{ min }} </mat-error>\n      }\n      @if (conditionFormGroup.controls.value.hasError('max')) {\n        <mat-error> Value must be at most {{ max }} </mat-error>\n      }\n    </mat-form-field>\n  </div>\n}\n", styles: [".condition{display:flex;flex-direction:row;align-items:flex-start;gap:8px}.condition__operator{width:120px}.toggle{min-width:80px;margin-left:8px}\n"] }]
         }], propDecorators: { conditionFormGroup: [{
                 type: Input,
                 args: [{
@@ -323,49 +327,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class GioElEditorTypeDateComponent {
+class GioElEditorTypeStringComponent {
     constructor() {
         this.destroyRef = inject(DestroyRef);
         this.operators = [
             { label: 'Equals', value: 'EQUALS' },
             { label: 'Not equals', value: 'NOT_EQUALS' },
-            { label: 'Less than', value: 'LESS_THAN' },
-            { label: 'Less than or equals', value: 'LESS_THAN_OR_EQUALS' },
-            { label: 'Greater than', value: 'GREATER_THAN' },
-            { label: 'Greater than or equals', value: 'GREATER_THAN_OR_EQUALS' },
         ];
-        this.datepickerControl = new FormControl();
+        this.filteredOptions$ = new Observable();
     }
     ngOnChanges(changes) {
         if (changes.conditionFormGroup) {
             const field = this.conditionFormGroup.controls.field.value;
-            if (isEmpty(field) || field?.type !== 'date') {
-                throw new Error('Date field is required!');
+            if (isEmpty(field) || field?.type !== 'string') {
+                throw new Error('String field is required!');
             }
             this.conditionFormGroup.addControl('operator', new FormControl(null));
-            this.conditionFormGroup.addControl('value', new FormControl(true));
-            this.datepickerControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
-                if (!isDate(value)) {
-                    return;
-                }
-                // Convert date to UTC ignoring timezone
-                const dateUtc = Date.UTC(value.getFullYear(), value.getMonth(), value.getDate(), value.getHours(), value.getMinutes(), value.getSeconds());
-                this.conditionFormGroup.controls.value.setValue(new Date(dateUtc));
-            });
+            this.conditionFormGroup.addControl('value', new FormControl(null));
+            const values = field.values?.map(value => (typeof value === 'string' ? { value, label: value } : value));
+            if (values && !isEmpty(values)) {
+                this.filteredOptions$ = this.conditionFormGroup.get('value').valueChanges.pipe(takeUntilDestroyed(this.destroyRef), startWith(''), map(value => filterValues(values, toString(value) ?? '')));
+            }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioElEditorTypeDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: GioElEditorTypeDateComponent, isStandalone: true, selector: "gio-el-editor-type-date", inputs: { conditionFormGroup: "conditionFormGroup" }, usesOnChanges: true, ngImport: i0, template: "<!--\n\n    Copyright (C) 2024 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@if (conditionFormGroup) {\n  <div [formGroup]=\"conditionFormGroup\" class=\"condition\">\n    <mat-form-field class=\"condition__operator\">\n      <mat-label>Operator</mat-label>\n\n      <mat-select formControlName=\"operator\" placeholder=\"Select Operator\">\n        @for (operator of operators; track operator.value) {\n          <mat-option [value]=\"operator.value\">{{ operator.label }}</mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Choose a date</mat-label>\n      <input matInput [matDatepicker]=\"picker\" [formControl]=\"datepickerControl\" />\n      <mat-hint>MM/DD/YYYY</mat-hint>\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n    </mat-form-field>\n  </div>\n}\n", styles: [".condition{display:flex;flex-direction:row;align-items:flex-start;gap:8px}.condition__operator{width:120px}.toggle{min-width:80px;margin-left:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GioElEditorTypeStringComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: GioElEditorTypeStringComponent, isStandalone: true, selector: "gio-el-editor-type-string", inputs: { conditionFormGroup: "conditionFormGroup" }, usesOnChanges: true, ngImport: i0, template: "<!--\n\n    Copyright (C) 2024 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@if (conditionFormGroup) {\n  <div [formGroup]=\"conditionFormGroup\" class=\"condition\">\n    <mat-form-field class=\"condition__operator\">\n      <mat-label>Operator</mat-label>\n\n      <mat-select formControlName=\"operator\" placeholder=\"Select Operator\">\n        @for (operator of operators; track operator.value) {\n          <mat-option [value]=\"operator.value\">{{ operator.label }}</mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Value</mat-label>\n      <input matInput formControlName=\"value\" placeholder=\"Value\" [matAutocomplete]=\"auto\" />\n\n      <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\n        @for (option of filteredOptions$ | async; track option) {\n          <mat-option [value]=\"option.value\">{{ option.label }}</mat-option>\n        }\n      </mat-autocomplete>\n    </mat-form-field>\n  </div>\n}\n", styles: [".condition{display:flex;flex-direction:row;align-items:flex-start;gap:8px}.condition__operator{width:120px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioElEditorTypeDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GioElEditorTypeStringComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gio-el-editor-type-date', imports: [CommonModule, MatFormFieldModule, MatSelectModule, MatInputModule, ReactiveFormsModule, MatDatepickerModule], template: "<!--\n\n    Copyright (C) 2024 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@if (conditionFormGroup) {\n  <div [formGroup]=\"conditionFormGroup\" class=\"condition\">\n    <mat-form-field class=\"condition__operator\">\n      <mat-label>Operator</mat-label>\n\n      <mat-select formControlName=\"operator\" placeholder=\"Select Operator\">\n        @for (operator of operators; track operator.value) {\n          <mat-option [value]=\"operator.value\">{{ operator.label }}</mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Choose a date</mat-label>\n      <input matInput [matDatepicker]=\"picker\" [formControl]=\"datepickerControl\" />\n      <mat-hint>MM/DD/YYYY</mat-hint>\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n    </mat-form-field>\n  </div>\n}\n", styles: [".condition{display:flex;flex-direction:row;align-items:flex-start;gap:8px}.condition__operator{width:120px}.toggle{min-width:80px;margin-left:8px}\n"] }]
+            args: [{ selector: 'gio-el-editor-type-string', imports: [CommonModule, MatFormFieldModule, MatSelectModule, MatInputModule, ReactiveFormsModule, MatAutocompleteModule], template: "<!--\n\n    Copyright (C) 2024 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@if (conditionFormGroup) {\n  <div [formGroup]=\"conditionFormGroup\" class=\"condition\">\n    <mat-form-field class=\"condition__operator\">\n      <mat-label>Operator</mat-label>\n\n      <mat-select formControlName=\"operator\" placeholder=\"Select Operator\">\n        @for (operator of operators; track operator.value) {\n          <mat-option [value]=\"operator.value\">{{ operator.label }}</mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Value</mat-label>\n      <input matInput formControlName=\"value\" placeholder=\"Value\" [matAutocomplete]=\"auto\" />\n\n      <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\n        @for (option of filteredOptions$ | async; track option) {\n          <mat-option [value]=\"option.value\">{{ option.label }}</mat-option>\n        }\n      </mat-autocomplete>\n    </mat-form-field>\n  </div>\n}\n", styles: [".condition{display:flex;flex-direction:row;align-items:flex-start;gap:8px}.condition__operator{width:120px}\n"] }]
         }], propDecorators: { conditionFormGroup: [{
                 type: Input,
                 args: [{
                         required: true,
                     }]
             }] } });
+const filterValues = (values, value) => {
+    const filterValue = value.toLowerCase();
+    return values.filter(option => option.label.toLowerCase().includes(filterValue) || option.value.toLowerCase().includes(filterValue));
+};
 
 const isConditionModel = (conditions) => {
     return 'field' in conditions && 'label' in conditions && 'type' in conditions;
@@ -581,13 +581,13 @@ class GioElFieldComponent {
         this.stateChanges.complete();
         this.focusMonitor.stopMonitoring(this.elementRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioElFieldComponent, deps: [{ token: i5.NgControl, optional: true, self: true }, { token: i0.ElementRef }, { token: i2$1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: GioElFieldComponent, isStandalone: true, selector: "gio-el-field", inputs: { conditionsModel: "conditionsModel", placeholder: "placeholder", required: "required" }, host: { properties: { "id": "this.id", "class.floating": "this.shouldLabelFloat", "attr.aria-describedBy": "this.userAriaDescribedBy" } }, providers: [{ provide: MatFormFieldControl, useExisting: GioElFieldComponent }], usesOnChanges: true, ngImport: i0, template: "<!--\n\n    Copyright (C) 2024 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\n<div class=\"container\">\n  <span class=\"text\">#</span>\n  <input class=\"input fieldSelect\" matInput [formControl]=\"fieldFormControl\" [matAutocomplete]=\"fieldSelectAuto\" />\n\n  <mat-autocomplete\n    autoActiveFirstOption\n    requireSelection\n    #fieldSelectAuto=\"matAutocomplete\"\n    panelWidth=\"auto\"\n    [displayWith]=\"displayFn\"\n    (optionSelected)=\"onFieldSelected($event)\"\n  >\n    @for (option of fieldFilteredOptions$ | async; track option) {\n      @if (option.hasOwnProperty('options')) {\n        <mat-optgroup [label]=\"option.label\">\n          @for (option of $any(option).options; track option) {\n            <mat-option [value]=\"option\">{{ option.label }}</mat-option>\n          }\n        </mat-optgroup>\n      } @else {\n        <mat-option [value]=\"option\">{{ option.label }}</mat-option>\n      }\n    }\n  </mat-autocomplete>\n  @if (selectedConditionModel?.map) {\n    <span class=\"text\">[\"</span>\n    <input class=\"input key1\" matInput [formControl]=\"key1FormControl\" [matAutocomplete]=\"key1SelectAuto\" />\n\n    <mat-autocomplete #key1SelectAuto=\"matAutocomplete\" panelWidth=\"auto\">\n      @for (option of key1FilteredOptions$ | async; track option) {\n        <mat-option [value]=\"option.value\">{{ option.label }}</mat-option>\n      }\n    </mat-autocomplete>\n\n    <span class=\"text\">\"]</span>\n  }\n  @if (selectedConditionModel?.map?.type === 'MultiMap') {\n    <span class=\"text\">[</span>\n    <input class=\"input key2\" type=\"number\" min=\"0\" matInput [formControl]=\"key2FormControl\" />\n\n    <span class=\"text\">]</span>\n  }\n</div>\n", styles: [":host{opacity:0}:host.floating{opacity:1}.container{display:flex;align-items:center}.input{flex:3 2 auto;padding:0;border:none;background:none;color:currentcolor;font:inherit;outline:none}.input.key1,.input.key2{flex:2 3 auto;border-bottom:1px dashed #a2a5b5!important}.text{color:#a2a5b5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: GioIconsModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GioElFieldComponent, deps: [{ token: i4.NgControl, optional: true, self: true }, { token: i0.ElementRef }, { token: i2$1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: GioElFieldComponent, isStandalone: true, selector: "gio-el-field", inputs: { conditionsModel: "conditionsModel", placeholder: "placeholder", required: "required" }, host: { properties: { "id": "this.id", "class.floating": "this.shouldLabelFloat", "attr.aria-describedBy": "this.userAriaDescribedBy" } }, providers: [{ provide: MatFormFieldControl, useExisting: GioElFieldComponent }], usesOnChanges: true, ngImport: i0, template: "<!--\n\n    Copyright (C) 2024 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\n<div class=\"container\">\n  <span class=\"text\">#</span>\n  <input class=\"input fieldSelect\" matInput [formControl]=\"fieldFormControl\" [matAutocomplete]=\"fieldSelectAuto\" />\n\n  <mat-autocomplete\n    autoActiveFirstOption\n    requireSelection\n    #fieldSelectAuto=\"matAutocomplete\"\n    panelWidth=\"auto\"\n    [displayWith]=\"displayFn\"\n    (optionSelected)=\"onFieldSelected($event)\"\n  >\n    @for (option of fieldFilteredOptions$ | async; track option) {\n      @if (option.hasOwnProperty('options')) {\n        <mat-optgroup [label]=\"option.label\">\n          @for (option of $any(option).options; track option) {\n            <mat-option [value]=\"option\">{{ option.label }}</mat-option>\n          }\n        </mat-optgroup>\n      } @else {\n        <mat-option [value]=\"option\">{{ option.label }}</mat-option>\n      }\n    }\n  </mat-autocomplete>\n  @if (selectedConditionModel?.map) {\n    <span class=\"text\">[\"</span>\n    <input class=\"input key1\" matInput [formControl]=\"key1FormControl\" [matAutocomplete]=\"key1SelectAuto\" />\n\n    <mat-autocomplete #key1SelectAuto=\"matAutocomplete\" panelWidth=\"auto\">\n      @for (option of key1FilteredOptions$ | async; track option) {\n        <mat-option [value]=\"option.value\">{{ option.label }}</mat-option>\n      }\n    </mat-autocomplete>\n\n    <span class=\"text\">\"]</span>\n  }\n  @if (selectedConditionModel?.map?.type === 'MultiMap') {\n    <span class=\"text\">[</span>\n    <input class=\"input key2\" type=\"number\" min=\"0\" matInput [formControl]=\"key2FormControl\" />\n\n    <span class=\"text\">]</span>\n  }\n</div>\n", styles: [":host{opacity:0}:host.floating{opacity:1}.container{display:flex;align-items:center}.input{flex:3 2 auto;padding:0;border:none;background:none;color:currentcolor;font:inherit;outline:none}.input.key1,.input.key2{flex:2 3 auto;border-bottom:1px dashed #a2a5b5!important}.text{color:#a2a5b5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i2.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: GioIconsModule }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioElFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GioElFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gio-el-field', imports: [CommonModule, MatAutocompleteModule, MatInputModule, ReactiveFormsModule, MatButtonModule, GioIconsModule], providers: [{ provide: MatFormFieldControl, useExisting: GioElFieldComponent }], template: "<!--\n\n    Copyright (C) 2024 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\n<div class=\"container\">\n  <span class=\"text\">#</span>\n  <input class=\"input fieldSelect\" matInput [formControl]=\"fieldFormControl\" [matAutocomplete]=\"fieldSelectAuto\" />\n\n  <mat-autocomplete\n    autoActiveFirstOption\n    requireSelection\n    #fieldSelectAuto=\"matAutocomplete\"\n    panelWidth=\"auto\"\n    [displayWith]=\"displayFn\"\n    (optionSelected)=\"onFieldSelected($event)\"\n  >\n    @for (option of fieldFilteredOptions$ | async; track option) {\n      @if (option.hasOwnProperty('options')) {\n        <mat-optgroup [label]=\"option.label\">\n          @for (option of $any(option).options; track option) {\n            <mat-option [value]=\"option\">{{ option.label }}</mat-option>\n          }\n        </mat-optgroup>\n      } @else {\n        <mat-option [value]=\"option\">{{ option.label }}</mat-option>\n      }\n    }\n  </mat-autocomplete>\n  @if (selectedConditionModel?.map) {\n    <span class=\"text\">[\"</span>\n    <input class=\"input key1\" matInput [formControl]=\"key1FormControl\" [matAutocomplete]=\"key1SelectAuto\" />\n\n    <mat-autocomplete #key1SelectAuto=\"matAutocomplete\" panelWidth=\"auto\">\n      @for (option of key1FilteredOptions$ | async; track option) {\n        <mat-option [value]=\"option.value\">{{ option.label }}</mat-option>\n      }\n    </mat-autocomplete>\n\n    <span class=\"text\">\"]</span>\n  }\n  @if (selectedConditionModel?.map?.type === 'MultiMap') {\n    <span class=\"text\">[</span>\n    <input class=\"input key2\" type=\"number\" min=\"0\" matInput [formControl]=\"key2FormControl\" />\n\n    <span class=\"text\">]</span>\n  }\n</div>\n", styles: [":host{opacity:0}:host.floating{opacity:1}.container{display:flex;align-items:center}.input{flex:3 2 auto;padding:0;border:none;background:none;color:currentcolor;font:inherit;outline:none}.input.key1,.input.key2{flex:2 3 auto;border-bottom:1px dashed #a2a5b5!important}.text{color:#a2a5b5}\n"] }]
-        }], ctorParameters: () => [{ type: i5.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i4.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
@@ -675,13 +675,12 @@ class GioElEditorConditionGroupComponent {
             this.conditionGroupFormGroup.controls.condition.disable();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioElEditorConditionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: GioElEditorConditionGroupComponent, isStandalone: true, selector: "gio-el-editor-condition-group", inputs: { conditionGroupFormGroup: "conditionGroupFormGroup", conditionsModel: "conditionsModel", nodeLvl: "nodeLvl" }, outputs: { remove: "remove" }, host: { properties: { "attr.node-lvl": "this.nodeLvl" } }, ngImport: i0, template: "<!--\n\n    Copyright (C) 2024 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=\"conditionGroup\" [formGroup]=\"conditionGroupFormGroup\">\n  <div class=\"conditionGroup__header\">\n    <mat-button-toggle-group\n      class=\"gio-button-toggle-group\"\n      name=\"condition\"\n      aria-label=\"Condition\"\n      formControlName=\"condition\"\n      [hideSingleSelectionIndicator]=\"true\"\n    >\n      <mat-button-toggle class=\"mat-button-toggle-group\" value=\"AND\">AND</mat-button-toggle>\n      <mat-button-toggle class=\"mat-button-toggle-group\" value=\"OR\">OR</mat-button-toggle>\n    </mat-button-toggle-group>\n\n    <div class=\"conditionGroup__header__addBtn\">\n      <button mat-button [matMenuTriggerFor]=\"addBtn\">\n        <mat-icon svgIcon=\"gio:plus\">Add</mat-icon>\n      </button>\n      <mat-menu #addBtn=\"matMenu\">\n        <button mat-menu-item (click)=\"addConditionGroup()\">Add Group</button>\n        <button mat-menu-item (click)=\"addCondition()\">Add Condition</button>\n      </mat-menu>\n    </div>\n\n    @if (nodeLvl > 0) {\n      <button class=\"conditionGroup__header__removeBtn\" mat-button aria-label=\"Remove Group\" (click)=\"removeConditionGroup()\">\n        <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n      </button>\n    }\n  </div>\n\n  <div class=\"conditionGroup__conditions\">\n    @for (condition of conditionGroupFormGroup.controls.conditions.controls; track conditionIndex; let conditionIndex = $index) {\n      @if (isConditionGroupForm(condition)) {\n        <gio-el-editor-condition-group\n          class=\"conditionGroup__conditions__conditionGroup\"\n          [conditionGroupFormGroup]=\"condition\"\n          [conditionsModel]=\"conditionsModel\"\n          [nodeLvl]=\"nodeLvl + 1\"\n          (remove)=\"removeCondition(conditionIndex)\"\n        ></gio-el-editor-condition-group>\n      } @else {\n        <div\n          class=\"conditionGroup__conditions__condition\"\n          [formGroup]=\"conditionGroupFormGroup.controls.conditions.at(conditionIndex)\"\n          [attr.node-lvl]=\"nodeLvl\"\n        >\n          <mat-form-field class=\"conditionGroup__conditions__condition__field\">\n            <mat-label>Field</mat-label>\n            <gio-el-field formControlName=\"field\" [conditionsModel]=\"conditionsModel\"></gio-el-field>\n          </mat-form-field>\n\n          @switch (condition.controls.field.value?.type) {\n            @case ('string') {\n              <gio-el-editor-type-string [conditionFormGroup]=\"condition\"></gio-el-editor-type-string>\n            }\n            @case ('boolean') {\n              <gio-el-editor-type-boolean [conditionFormGroup]=\"condition\"></gio-el-editor-type-boolean>\n            }\n            @case ('number') {\n              <gio-el-editor-type-number [conditionFormGroup]=\"condition\"></gio-el-editor-type-number>\n            }\n            @case ('date') {\n              <gio-el-editor-type-date [conditionFormGroup]=\"condition\"></gio-el-editor-type-date>\n            }\n          }\n\n          <button\n            class=\"conditionGroup__conditions__condition__removeBtn\"\n            mat-button\n            aria-label=\"Remove Condition\"\n            (click)=\"removeCondition(conditionIndex)\"\n          >\n            <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n          </button>\n        </div>\n      }\n    }\n  </div>\n</div>\n", styles: [".conditionGroup{display:flex;flex-direction:column;gap:8px}.conditionGroup__header{display:flex;flex-direction:row;align-items:center;gap:8px}.conditionGroup__header .gio-button-toggle-group{margin-bottom:0}.conditionGroup__conditions{display:flex;flex-direction:column;justify-content:center;gap:2px}.conditionGroup__conditions__condition{position:relative;display:flex;align-items:flex-start;padding:0 0 0 28px;gap:8px}.conditionGroup__conditions__condition__field{min-width:220px;max-width:440px;flex:auto}.conditionGroup__conditions__condition__removeBtn{align-self:center}.conditionGroup__conditions__condition:before{position:absolute;top:-8px;left:8px;width:1px;height:100%;border-left:2px dashed #a2a5b5;content:\"\"}.conditionGroup__conditions__condition:after{position:absolute;top:32px;left:8px;width:20px;border-top:2px dashed #a2a5b5;content:\"\"}.conditionGroup__conditions__condition:last-child:before{top:-8px;height:40px}.conditionGroup__conditions__conditionGroup{position:relative;display:block;padding:0 0 0 28px}.conditionGroup__conditions__conditionGroup:before{position:absolute;top:-8px;left:8px;width:1px;height:100%;border-left:2px dashed #a2a5b5;content:\"\"}.conditionGroup__conditions__conditionGroup:after{position:absolute;top:20px;left:8px;width:20px;border-top:2px dashed #a2a5b5;content:\"\"}.conditionGroup__conditions__conditionGroup:last-child:before{top:-8px;height:28px}\n"], dependencies: [{ kind: "component", type: GioElEditorConditionGroupComponent, selector: "gio-el-editor-condition-group", inputs: ["conditionGroupFormGroup", "conditionsModel", "nodeLvl"], outputs: ["remove"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i4$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: GioIconsModule }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: GioElEditorTypeBooleanComponent, selector: "gio-el-editor-type-boolean", inputs: ["conditionFormGroup"] }, { kind: "component", type: GioElEditorTypeDateComponent, selector: "gio-el-editor-type-date", inputs: ["conditionFormGroup"] }, { kind: "component", type: GioElEditorTypeStringComponent, selector: "gio-el-editor-type-string", inputs: ["conditionFormGroup"] }, { kind: "component", type: GioElEditorTypeNumberComponent, selector: "gio-el-editor-type-number", inputs: ["conditionFormGroup"] }, { kind: "component", type: GioElFieldComponent, selector: "gio-el-field", inputs: ["conditionsModel", "placeholder", "required"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GioElEditorConditionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: GioElEditorConditionGroupComponent, isStandalone: true, selector: "gio-el-editor-condition-group", inputs: { conditionGroupFormGroup: "conditionGroupFormGroup", conditionsModel: "conditionsModel", nodeLvl: "nodeLvl" }, outputs: { remove: "remove" }, host: { properties: { "attr.node-lvl": "this.nodeLvl" } }, ngImport: i0, template: "<!--\n\n    Copyright (C) 2024 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=\"conditionGroup\" [formGroup]=\"conditionGroupFormGroup\">\n  <div class=\"conditionGroup__header\">\n    <mat-button-toggle-group\n      class=\"gio-button-toggle-group\"\n      name=\"condition\"\n      aria-label=\"Condition\"\n      formControlName=\"condition\"\n      [hideSingleSelectionIndicator]=\"true\"\n    >\n      <mat-button-toggle class=\"mat-button-toggle-group\" value=\"AND\">AND</mat-button-toggle>\n      <mat-button-toggle class=\"mat-button-toggle-group\" value=\"OR\">OR</mat-button-toggle>\n    </mat-button-toggle-group>\n\n    <div class=\"conditionGroup__header__addBtn\">\n      <button mat-button [matMenuTriggerFor]=\"addBtn\">\n        <mat-icon svgIcon=\"gio:plus\">Add</mat-icon>\n      </button>\n      <mat-menu #addBtn=\"matMenu\">\n        <button mat-menu-item (click)=\"addConditionGroup()\">Add Group</button>\n        <button mat-menu-item (click)=\"addCondition()\">Add Condition</button>\n      </mat-menu>\n    </div>\n\n    @if (nodeLvl > 0) {\n      <button class=\"conditionGroup__header__removeBtn\" mat-button aria-label=\"Remove Group\" (click)=\"removeConditionGroup()\">\n        <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n      </button>\n    }\n  </div>\n\n  <div class=\"conditionGroup__conditions\">\n    @for (condition of conditionGroupFormGroup.controls.conditions.controls; track conditionIndex; let conditionIndex = $index) {\n      @if (isConditionGroupForm(condition)) {\n        <gio-el-editor-condition-group\n          class=\"conditionGroup__conditions__conditionGroup\"\n          [conditionGroupFormGroup]=\"condition\"\n          [conditionsModel]=\"conditionsModel\"\n          [nodeLvl]=\"nodeLvl + 1\"\n          (remove)=\"removeCondition(conditionIndex)\"\n        ></gio-el-editor-condition-group>\n      } @else {\n        <div\n          class=\"conditionGroup__conditions__condition\"\n          [formGroup]=\"conditionGroupFormGroup.controls.conditions.at(conditionIndex)\"\n          [attr.node-lvl]=\"nodeLvl\"\n        >\n          <mat-form-field class=\"conditionGroup__conditions__condition__field\">\n            <mat-label>Field</mat-label>\n            <gio-el-field formControlName=\"field\" [conditionsModel]=\"conditionsModel\"></gio-el-field>\n          </mat-form-field>\n\n          @switch (condition.controls.field.value?.type) {\n            @case ('string') {\n              <gio-el-editor-type-string [conditionFormGroup]=\"condition\"></gio-el-editor-type-string>\n            }\n            @case ('boolean') {\n              <gio-el-editor-type-boolean [conditionFormGroup]=\"condition\"></gio-el-editor-type-boolean>\n            }\n            @case ('number') {\n              <gio-el-editor-type-number [conditionFormGroup]=\"condition\"></gio-el-editor-type-number>\n            }\n            @case ('date') {\n              <gio-el-editor-type-date [conditionFormGroup]=\"condition\"></gio-el-editor-type-date>\n            }\n          }\n\n          <button\n            class=\"conditionGroup__conditions__condition__removeBtn\"\n            mat-button\n            aria-label=\"Remove Condition\"\n            (click)=\"removeCondition(conditionIndex)\"\n          >\n            <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n          </button>\n        </div>\n      }\n    }\n  </div>\n</div>\n", styles: [".conditionGroup{display:flex;flex-direction:column;gap:8px}.conditionGroup__header{display:flex;flex-direction:row;align-items:center;gap:8px}.conditionGroup__header .gio-button-toggle-group{margin-bottom:0}.conditionGroup__conditions{display:flex;flex-direction:column;justify-content:center;gap:2px}.conditionGroup__conditions__condition{position:relative;display:flex;align-items:flex-start;padding:0 0 0 28px;gap:8px}.conditionGroup__conditions__condition__field{min-width:220px;max-width:440px;flex:auto}.conditionGroup__conditions__condition__removeBtn{align-self:center}.conditionGroup__conditions__condition:before{position:absolute;top:-8px;left:8px;width:1px;height:100%;border-left:2px dashed #a2a5b5;content:\"\"}.conditionGroup__conditions__condition:after{position:absolute;top:32px;left:8px;width:20px;border-top:2px dashed #a2a5b5;content:\"\"}.conditionGroup__conditions__condition:last-child:before{top:-8px;height:40px}.conditionGroup__conditions__conditionGroup{position:relative;display:block;padding:0 0 0 28px}.conditionGroup__conditions__conditionGroup:before{position:absolute;top:-8px;left:8px;width:1px;height:100%;border-left:2px dashed #a2a5b5;content:\"\"}.conditionGroup__conditions__conditionGroup:after{position:absolute;top:20px;left:8px;width:20px;border-top:2px dashed #a2a5b5;content:\"\"}.conditionGroup__conditions__conditionGroup:last-child:before{top:-8px;height:28px}\n"], dependencies: [{ kind: "component", type: GioElEditorConditionGroupComponent, selector: "gio-el-editor-condition-group", inputs: ["conditionGroupFormGroup", "conditionsModel", "nodeLvl"], outputs: ["remove"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i4$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: GioIconsModule }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: GioElEditorTypeBooleanComponent, selector: "gio-el-editor-type-boolean", inputs: ["conditionFormGroup"] }, { kind: "component", type: GioElEditorTypeDateComponent, selector: "gio-el-editor-type-date", inputs: ["conditionFormGroup"] }, { kind: "component", type: GioElEditorTypeStringComponent, selector: "gio-el-editor-type-string", inputs: ["conditionFormGroup"] }, { kind: "component", type: GioElEditorTypeNumberComponent, selector: "gio-el-editor-type-number", inputs: ["conditionFormGroup"] }, { kind: "component", type: GioElFieldComponent, selector: "gio-el-field", inputs: ["conditionsModel", "placeholder", "required"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioElEditorConditionGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GioElEditorConditionGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gio-el-editor-condition-group', imports: [
-                        CommonModule,
                         ReactiveFormsModule,
                         MatFormFieldModule,
                         MatSelectModule,
@@ -796,13 +795,12 @@ class GioElEditorComponent {
         }))
             .subscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioElEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: GioElEditorComponent, isStandalone: true, selector: "gio-el-editor", inputs: { conditionsModel: "conditionsModel" }, outputs: { elChange: "elChange" }, ngImport: i0, template: "<!--\n\n    Copyright (C) 2024 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\n<gio-el-editor-condition-group\n  [conditionGroupFormGroup]=\"conditionGroupFormGroup\"\n  [conditionsModel]=\"conditionsModel\"\n></gio-el-editor-condition-group>\n\n@if (elOutput) {\n  <div class=\"preview\">\n    {{ elOutput }}\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #ffc2ac);color:var(--gio-oem-palette--active-contrast, #1e1b1b)}.conditionGroup{display:flex;flex-direction:column;gap:8px}.conditionGroup__header{display:flex;flex-direction:row;align-items:center;gap:8px}.conditionGroup__conditions{display:flex;flex-direction:column;gap:8px}.condition{display:flex;align-items:flex-start;gap:8px}.condition__removeBtn{align-self:center}.preview{display:flex;flex-direction:column;align-items:center;padding:8px;border-radius:4px;background-color:#f7f7f8;color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: GioIconsModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: GioElEditorConditionGroupComponent, selector: "gio-el-editor-condition-group", inputs: ["conditionGroupFormGroup", "conditionsModel", "nodeLvl"], outputs: ["remove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GioElEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: GioElEditorComponent, isStandalone: true, selector: "gio-el-editor", inputs: { conditionsModel: "conditionsModel" }, outputs: { elChange: "elChange" }, ngImport: i0, template: "<!--\n\n    Copyright (C) 2024 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\n<gio-el-editor-condition-group\n  [conditionGroupFormGroup]=\"conditionGroupFormGroup\"\n  [conditionsModel]=\"conditionsModel\"\n></gio-el-editor-condition-group>\n\n@if (elOutput) {\n  <div class=\"preview\">\n    {{ elOutput }}\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #ffc2ac);color:var(--gio-oem-palette--active-contrast, #1e1b1b)}.conditionGroup{display:flex;flex-direction:column;gap:8px}.conditionGroup__header{display:flex;flex-direction:row;align-items:center;gap:8px}.conditionGroup__conditions{display:flex;flex-direction:column;gap:8px}.condition{display:flex;align-items:flex-start;gap:8px}.condition__removeBtn{align-self:center}.preview{display:flex;flex-direction:column;align-items:center;padding:8px;border-radius:4px;background-color:#f7f7f8;color:#000}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: GioIconsModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: GioElEditorConditionGroupComponent, selector: "gio-el-editor-condition-group", inputs: ["conditionGroupFormGroup", "conditionsModel", "nodeLvl"], outputs: ["remove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioElEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GioElEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gio-el-editor', imports: [
-                        CommonModule,
                         MatButtonToggleModule,
                         ReactiveFormsModule,
                         MatButtonModule,
@@ -811,10 +809,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                         MatFormFieldModule,
                         MatInputModule,
                         MatSelectModule,
-                        GioElEditorTypeStringComponent,
-                        GioElEditorTypeBooleanComponent,
-                        GioElEditorTypeNumberComponent,
-                        GioElEditorTypeDateComponent,
                         GioElEditorConditionGroupComponent,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n\n    Copyright (C) 2024 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\n<gio-el-editor-condition-group\n  [conditionGroupFormGroup]=\"conditionGroupFormGroup\"\n  [conditionsModel]=\"conditionsModel\"\n></gio-el-editor-condition-group>\n\n@if (elOutput) {\n  <div class=\"preview\">\n    {{ elOutput }}\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #ffc2ac);color:var(--gio-oem-palette--active-contrast, #1e1b1b)}.conditionGroup{display:flex;flex-direction:column;gap:8px}.conditionGroup__header{display:flex;flex-direction:row;align-items:center;gap:8px}.conditionGroup__conditions{display:flex;flex-direction:column;gap:8px}.condition{display:flex;align-items:flex-start;gap:8px}.condition__removeBtn{align-self:center}.preview{display:flex;flex-direction:column;align-items:center;padding:8px;border-radius:4px;background-color:#f7f7f8;color:#000}\n"] }]
         }], propDecorators: { conditionsModel: [{