@gravitee/ui-particles-angular 13.5.3 → 13.6.0-apim-7162-ps-native-api-65f8360

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

@@ -1,15 +1,15 @@
 import * as i0 from '@angular/core';
-import { inject, DestroyRef, Component, Input, EventEmitter, HostBinding, Output, ChangeDetectionStrategy } from '@angular/core';
-import * as i7$1 from '@angular/material/button-toggle';
+import { inject, DestroyRef, Component, Input, Optional, Self, HostBinding, EventEmitter, Output, ChangeDetectionStrategy } from '@angular/core';
+import * as i4$1 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i6 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, FormGroup, Validators, FormArray } from '@angular/forms';
-import * as i6$2 from '@angular/material/button';
+import * as i3$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i8 from '@angular/material/menu';
+import * as i5$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i1$1 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i2 from '@angular/material/form-field';
+import { MatFormFieldModule, MatFormFieldControl } from '@angular/material/form-field';
 import * as i5 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i1 from '@angular/common';
@@ -18,28 +18,27 @@ import * as i3 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { startWith, map } from 'rxjs/operators';
-import { isEmpty, toString, isDate, isNil, has } from 'lodash';
+import { isNil, isEmpty, toString, isDate, get, has } from 'lodash';
 import { GioIconsModule } from '@gravitee/ui-particles-angular';
 import * as i7 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { Observable } from 'rxjs';
+import { Observable, Subject, combineLatest } from 'rxjs';
 import * as i4 from '@angular/material/core';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
 import * as i6$1 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i9 from '@angular/material/icon';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i2$1 from '@angular/cdk/a11y';
+import * as i6$2 from '@angular/material/icon';
 import { ComponentHarness, parallel, HarnessPredicate } from '@angular/cdk/testing';
 import { MatMenuHarness } from '@angular/material/menu/testing';
-import { MatSelectHarness } from '@angular/material/select/testing';
 import { MatButtonToggleGroupHarness } from '@angular/material/button-toggle/testing';
 import { DivHarness } from '@gravitee/ui-particles-angular/testing';
 import { MatSlideToggleHarness } from '@angular/material/slide-toggle/testing';
+import { MatSelectHarness } from '@angular/material/select/testing';
 import { MatInputHarness } from '@angular/material/input/testing';
 import { MatDatepickerInputHarness } from '@angular/material/datepicker/testing';
-
-const isConditionModel = (conditions) => {
-    return 'field' in conditions && 'label' in conditions && 'type' in conditions;
-};
+import { MatAutocompleteHarness } from '@angular/material/autocomplete/testing';
 
 class ConditionGroup {
     constructor(condition, conditions) {
@@ -69,16 +68,16 @@ class ExpressionLanguageBuilder {
         AND: '&&',
     }; }
     static { this.OPERATOR_MAP = {
-        EQUALS: (field, value) => `#${field} == ${value}`,
-        NOT_EQUALS: (field, value) => `#${field} != ${value}`,
-        LESS_THAN: (field, value) => `#${field} < ${value}`,
-        LESS_THAN_OR_EQUALS: (field, value) => `#${field} <= ${value}`,
-        GREATER_THAN: (field, value) => `#${field} > ${value}`,
-        GREATER_THAN_OR_EQUALS: (field, value) => `#${field} >= ${value}`,
-        CONTAINS: (field, value) => `#${field} matches "${value}"`,
-        NOT_CONTAINS: (field, value) => `!#${field} matches "${value}"`,
-        STARTS_WITH: (field, value) => `#${field} matches "^${value}"`,
-        ENDS_WITH: (field, value) => `#${field} matches "${value}$"`,
+        EQUALS: (field, value) => `${field} == ${value}`,
+        NOT_EQUALS: (field, value) => `${field} != ${value}`,
+        LESS_THAN: (field, value) => `${field} < ${value}`,
+        LESS_THAN_OR_EQUALS: (field, value) => `${field} <= ${value}`,
+        GREATER_THAN: (field, value) => `${field} > ${value}`,
+        GREATER_THAN_OR_EQUALS: (field, value) => `${field} >= ${value}`,
+        CONTAINS: (field, value) => `${field} matches "${value}"`,
+        NOT_CONTAINS: (field, value) => `!${field} matches "${value}"`,
+        STARTS_WITH: (field, value) => `${field} matches "^${value}"`,
+        ENDS_WITH: (field, value) => `${field} matches "${value}$"`,
     }; }
     static buildConditionGroup(conditionGroup) {
         let el = '';
@@ -107,7 +106,7 @@ class ExpressionLanguageBuilder {
     }
     static buildCondition(condition) {
         const operator = ExpressionLanguageBuilder.OPERATOR_MAP[condition.operator];
-        return operator(condition.field, ExpressionLanguageBuilder.valueToString(condition.type, condition.value));
+        return operator(ExpressionLanguageBuilder.toFieldString(condition.field), ExpressionLanguageBuilder.valueToString(condition.type, condition.value));
     }
     static valueToString(type, value) {
         if (!type) {
@@ -122,6 +121,18 @@ class ExpressionLanguageBuilder {
                 return `${value}`;
         }
     }
+    static toFieldString(field) {
+        if (field instanceof Object && !isNil(field.key1Value) && !isNil(field.key2Value)) {
+            return `#${field.field}?.["${field.key1Value}"]?.[${field.key2Value}]`;
+        }
+        else if (field instanceof Object && !isNil(field.key1Value)) {
+            return `#${field.field}?.["${field.key1Value}"]`;
+        }
+        else if (field instanceof Object) {
+            return `#${field.field}`;
+        }
+        return `#${field}`;
+    }
     constructor(conditionGroup) {
         this.conditionGroup = conditionGroup;
     }
@@ -172,18 +183,18 @@ class GioElEditorTypeStringComponent {
             }
             this.conditionFormGroup.addControl('operator', new FormControl(null));
             this.conditionFormGroup.addControl('value', new FormControl(null));
-            const values = field.values;
+            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: "18.2.0", ngImport: i0, type: GioElEditorTypeStringComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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>\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\">{{ option }}</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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i7.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: i7.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i7.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: i7.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GioElEditorTypeStringComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gio-el-editor-type-string', standalone: true, 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>\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\">{{ option }}</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}\n"] }]
+            args: [{ selector: 'gio-el-editor-type-string', standalone: true, 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: [{
@@ -192,7 +203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             }] } });
 const filterValues = (values, value) => {
     const filterValue = value.toLowerCase();
-    return values.filter(option => option.toLowerCase().includes(filterValue));
+    return values.filter(option => option.label.toLowerCase().includes(filterValue) || option.value.toLowerCase().includes(filterValue));
 };
 
 /*
@@ -229,11 +240,11 @@ class GioElEditorTypeBooleanComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GioElEditorTypeBooleanComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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>\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}.toggle{min-width:80px;align-self:center;margin-left:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.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: "18.2.0", ngImport: i0, type: GioElEditorTypeBooleanComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gio-el-editor-type-boolean', standalone: true, 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>\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}.toggle{min-width:80px;align-self:center;margin-left:8px}\n"] }]
+            args: [{ selector: 'gio-el-editor-type-boolean', standalone: true, 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"] }]
         }], propDecorators: { conditionFormGroup: [{
                 type: Input,
                 args: [{
@@ -286,11 +297,11 @@ class GioElEditorTypeNumberComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GioElEditorTypeNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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>\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}.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: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.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: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i6.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.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: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i6.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GioElEditorTypeNumberComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gio-el-editor-type-number', standalone: true, 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>\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}.toggle{min-width:80px;margin-left:8px}\n"] }]
+            args: [{ selector: 'gio-el-editor-type-number', standalone: true, 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"] }]
         }], propDecorators: { conditionFormGroup: [{
                 type: Input,
                 args: [{
@@ -345,11 +356,11 @@ class GioElEditorTypeDateComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GioElEditorTypeDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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>\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}.toggle{min-width:80px;margin-left:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$1.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GioElEditorTypeDateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gio-el-editor-type-date', standalone: true, 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>\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}.toggle{min-width:80px;margin-left:8px}\n"] }]
+            args: [{ selector: 'gio-el-editor-type-date', standalone: true, 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"] }]
         }], propDecorators: { conditionFormGroup: [{
                 type: Input,
                 args: [{
@@ -357,6 +368,260 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     }]
             }] } });
 
+const isConditionModel = (conditions) => {
+    return 'field' in conditions && 'label' in conditions && 'type' in conditions;
+};
+
+/*
+ * Copyright (C) 2024 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class GioElFieldComponent {
+    // From MatFormFieldControl
+    set value(_value) {
+        // Not implemented. Only for select new value.
+    }
+    // From MatFormFieldControl
+    static { this.nextId = 0; }
+    // From MatFormFieldControl
+    get placeholder() {
+        return this._placeholder;
+    }
+    set placeholder(plh) {
+        this._placeholder = plh;
+        this.stateChanges.next();
+    }
+    // From MatFormFieldControl
+    get empty() {
+        return !this.fieldFormControl.value;
+    }
+    // From MatFormFieldControl
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    // From MatFormFieldControl
+    get required() {
+        return this._required;
+    }
+    set required(req) {
+        this._required = coerceBooleanProperty(req);
+        this.stateChanges.next();
+    }
+    // From MatFormFieldControl
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+        this._disabled ? this.fieldFormControl.disable() : this.fieldFormControl.enable();
+        this.stateChanges.next();
+    }
+    // From MatFormFieldControl
+    get errorState() {
+        return this.fieldFormControl.invalid && this.touched;
+    }
+    // From MatFormFieldControl
+    setDescribedByIds(ids) {
+        this.userAriaDescribedBy = ids.join(' ');
+    }
+    constructor(ngControl, elementRef, focusMonitor) {
+        this.ngControl = ngControl;
+        this.elementRef = elementRef;
+        this.focusMonitor = focusMonitor;
+        this.destroyRef = inject(DestroyRef);
+        this.conditionsModel = [];
+        this.fieldFilteredOptions$ = new Observable();
+        this.key1FilteredOptions$ = new Observable();
+        this.selectedConditionModel = null;
+        this.fieldFormControl = new FormControl(null);
+        this.key1FormControl = new FormControl(null);
+        this.key2FormControl = new FormControl(null);
+        // From MatFormFieldControl
+        this.stateChanges = new Subject();
+        this.id = `gio-el-editor-input-${GioElFieldComponent.nextId++}`;
+        this._placeholder = '';
+        // From MatFormFieldControl
+        this.focused = false;
+        this._required = false;
+        this._disabled = false;
+        this.touched = false;
+        // From MatFormFieldControl
+        this.controlType = 'gio-el-editor-input';
+        // From MatFormFieldControl
+        // disableAutomaticLabeling?: boolean | undefined;
+        this._onChange = () => ({});
+        this._onTouched = () => ({});
+        if (this.ngControl != null) {
+            // Setting the value accessor directly (instead of using
+            // the providers) to avoid running into a circular import.
+            this.ngControl.valueAccessor = this;
+        }
+        this.focusMonitor
+            .monitor(this.elementRef.nativeElement, true)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(origin => {
+            this.focused = !!origin;
+            this.touched = true;
+            this._onTouched();
+            this.stateChanges.next();
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes.conditionsModel) {
+            const flattenConditionsModelToOption = (conditions, parent = null) => {
+                return conditions.flatMap(condition => {
+                    if (isConditionModel(condition)) {
+                        return {
+                            ...condition,
+                            label: parent ? `${parent.label} > ${condition.label}` : condition.label,
+                            field: parent ? `${parent.field}.${condition.field}` : condition.field,
+                        };
+                    }
+                    return flattenConditionsModelToOption(condition.conditions, {
+                        ...condition,
+                        field: parent ? `${parent.field}.${condition.field}` : condition.field,
+                        label: parent ? `${parent.label} > ${condition.label}` : condition.label,
+                    });
+                });
+            };
+            const autocompleteModel = this.conditionsModel.map(conditionModel => {
+                if (isConditionModel(conditionModel)) {
+                    return {
+                        ...conditionModel,
+                    };
+                }
+                return {
+                    field: conditionModel.field,
+                    label: conditionModel.label,
+                    options: flattenConditionsModelToOption(conditionModel.conditions).map(conditions => ({
+                        ...conditions,
+                        field: `${conditionModel.field}.${conditions.field}`,
+                    })),
+                };
+            });
+            if (autocompleteModel && !isEmpty(autocompleteModel)) {
+                this.fieldFilteredOptions$ = this.fieldFormControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef), startWith(''), map(value => fieldFilterValues(autocompleteModel, toString(value) ?? '')));
+            }
+            combineLatest([
+                this.fieldFormControl.valueChanges,
+                this.key1FormControl.valueChanges.pipe(startWith(this.key1FormControl.value)),
+                this.key2FormControl.valueChanges.pipe(startWith(this.key1FormControl.value)),
+            ])
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(([fieldValue, key1Value, key2Value]) => {
+                let map = fieldValue?.map;
+                if (map?.type === 'Map') {
+                    map = { ...map, key1Value };
+                }
+                if (map?.type === 'MultiMap') {
+                    map = { ...map, key1Value, key2Value };
+                }
+                if (fieldValue && isConditionModel(fieldValue)) {
+                    this._onChange({
+                        ...fieldValue,
+                        map,
+                    });
+                }
+                else {
+                    this._onChange(null);
+                }
+                this.stateChanges.next();
+            });
+        }
+    }
+    displayFn(option) {
+        return option?.field;
+    }
+    onFieldSelected($event) {
+        this.selectedConditionModel = $event.option.value;
+        const key1AutocompleteValues = this.selectedConditionModel?.map?.key1Values?.map(value => typeof value === 'string' ? { value, label: value } : value);
+        if (key1AutocompleteValues && !isEmpty(key1AutocompleteValues)) {
+            this.key1FilteredOptions$ = this.key1FormControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef), startWith(''), map(value => key1FilterValues(key1AutocompleteValues, toString(value) ?? '')));
+        }
+    }
+    // From ControlValueAccessor interface
+    writeValue() {
+        // Not implemented. Only for select new value.
+    }
+    // From ControlValueAccessor interface
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    // From ControlValueAccessor interface
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    // From ControlValueAccessor interface
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        if (isDisabled) {
+            this.fieldFormControl.disable();
+        }
+        else {
+            this.fieldFormControl.enable();
+        }
+    }
+    // From ControlValueAccessor interface
+    onContainerClick(event) {
+        if (event.target.tagName.toLowerCase() != 'input') {
+            this.elementRef.nativeElement.querySelector('input')?.focus();
+        }
+    }
+    ngOnDestroy() {
+        this.stateChanges.complete();
+        this.focusMonitor.stopMonitoring(this.elementRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GioElFieldComponent, deps: [{ token: i6.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: "18.2.0", 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: i7.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: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i7.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.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: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: GioIconsModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GioElFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gio-el-field', standalone: true, 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: i6.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i0.ElementRef }, { type: i2$1.FocusMonitor }], propDecorators: { conditionsModel: [{
+                type: Input,
+                args: [{ required: true }]
+            }], id: [{
+                type: HostBinding
+            }], placeholder: [{
+                type: Input
+            }], shouldLabelFloat: [{
+                type: HostBinding,
+                args: ['class.floating']
+            }], required: [{
+                type: Input
+            }], userAriaDescribedBy: [{
+                type: HostBinding,
+                args: ['attr.aria-describedBy']
+            }] } });
+const fieldFilterValues = (autocompleteModel, value) => {
+    const filterValue = value.toLowerCase();
+    return autocompleteModel.filter(option => {
+        if ('options' in option) {
+            return option.options.filter(condition => condition.label.toLowerCase().includes(filterValue));
+        }
+        return option.label.toLowerCase().includes(filterValue);
+    });
+};
+const key1FilterValues = (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)
  *
@@ -375,9 +640,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
 class GioElEditorConditionGroupComponent {
     constructor() {
         /**
-         * Condition models to generate the fields for the conditions.
+         * Conditions model to generate the fields for the conditions.
          */
-        this.conditionModels = [];
+        this.conditionsModel = [];
         /**
          * Level of the node in the tree. Useful for testing with Harness to limit the scope of the query.
          */
@@ -412,7 +677,7 @@ class GioElEditorConditionGroupComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GioElEditorConditionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GioElEditorConditionGroupComponent, isStandalone: true, selector: "gio-el-editor-condition-group", inputs: { conditionGroupFormGroup: "conditionGroupFormGroup", conditionModels: "conditionModels", 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    <div class=\"conditionGroup__header__conditionField\"></div>\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          [conditionModels]=\"conditionModels\"\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\n            <mat-select formControlName=\"field\" placeholder=\"Select Field\">\n              <mat-option *ngFor=\"let field of conditionModels\" [value]=\"field\">{{ field.label }}</mat-option>\n            </mat-select>\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;gap:8px}.conditionGroup__conditions__condition{display:flex;align-items:flex-start;gap:8px}.conditionGroup__conditions__condition__field{flex:0 0 auto}.conditionGroup__conditions__condition__removeBtn{align-self:center}.conditionGroup__conditions__conditionGroup{margin-left:18px}\n"], dependencies: [{ kind: "component", type: GioElEditorConditionGroupComponent, selector: "gio-el-editor-condition-group", inputs: ["conditionGroupFormGroup", "conditionModels", "nodeLvl"], outputs: ["remove"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6$2.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: i7$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: i7$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: i8.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: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.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: i9.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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.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$1.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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.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$2.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: "18.2.0", ngImport: i0, type: GioElEditorConditionGroupComponent, decorators: [{
             type: Component,
@@ -429,13 +694,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         GioElEditorTypeDateComponent,
                         GioElEditorTypeStringComponent,
                         GioElEditorTypeNumberComponent,
-                    ], 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    <div class=\"conditionGroup__header__conditionField\"></div>\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          [conditionModels]=\"conditionModels\"\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\n            <mat-select formControlName=\"field\" placeholder=\"Select Field\">\n              <mat-option *ngFor=\"let field of conditionModels\" [value]=\"field\">{{ field.label }}</mat-option>\n            </mat-select>\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;gap:8px}.conditionGroup__conditions__condition{display:flex;align-items:flex-start;gap:8px}.conditionGroup__conditions__condition__field{flex:0 0 auto}.conditionGroup__conditions__condition__removeBtn{align-self:center}.conditionGroup__conditions__conditionGroup{margin-left:18px}\n"] }]
+                        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<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"] }]
         }], propDecorators: { conditionGroupFormGroup: [{
                 type: Input,
                 args: [{
                         required: true,
                     }]
-            }], conditionModels: [{
+            }], conditionsModel: [{
                 type: Input,
                 args: [{
                         required: true,
@@ -481,17 +747,10 @@ class GioElEditorComponent {
     constructor() {
         this.destroyRef = inject(DestroyRef);
         this.conditionsModel = [];
-        this.conditionsGroupFormArray = new FormArray([]);
+        this.elChange = new EventEmitter();
         this.conditionGroupFormGroup = newConditionGroupFormGroup();
-        this.fields = [];
     }
     ngOnInit() {
-        for (const conditionModel of this.conditionsModel) {
-            if (isConditionModel(conditionModel)) {
-                // TOTO: Impl Deep Tree for conditions Limit to fist Node for fist impl
-                this.fields.push(conditionModel);
-            }
-        }
         this.conditionGroupFormGroup.valueChanges
             .pipe(takeUntilDestroyed(this.destroyRef), map(() => this.conditionGroupFormGroup.getRawValue()), map(value => {
             const toCondition = (conditionValue) => {
@@ -504,7 +763,15 @@ class GioElEditorComponent {
                     isNil(conditionValue.value)) {
                     return null;
                 }
-                return new Condition(conditionValue.field.field, conditionValue.field.type, conditionValue.operator, conditionValue.value);
+                let field = conditionValue.field.field;
+                if (conditionValue.field.map) {
+                    field = {
+                        field: conditionValue.field.field,
+                        key1Value: get(conditionValue.field.map, 'key1Value') ?? undefined,
+                        key2Value: get(conditionValue.field.map, 'key2Value') ?? undefined,
+                    };
+                }
+                return new Condition(field, conditionValue.field.type, conditionValue.operator, conditionValue.value);
             };
             const toConditionGroup = (conditionGroupValue) => {
                 const conditions = [];
@@ -525,12 +792,13 @@ class GioElEditorComponent {
             const conditionGroupValue = toConditionGroup(value);
             if (conditionGroupValue) {
                 this.elOutput = new ExpressionLanguageBuilder(conditionGroupValue).build();
+                this.elChange.emit(this.elOutput);
             }
         }))
             .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GioElEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GioElEditorComponent, isStandalone: true, selector: "gio-el-editor", inputs: { conditionsModel: "conditionsModel" }, 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  [conditionModels]=\"fields\"\n></gio-el-editor-condition-group>\n\n@if (elOutput) {\n  <div class=\"elOutput\">\n    {{ elOutput }}\n  </div>\n}\n", styles: [".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}\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", "conditionModels", "nodeLvl"], outputs: ["remove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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, #e7e2fb);color:var(--gio-oem-palette--active-contrast, #100c27)}.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:#e7e8ef;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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GioElEditorComponent, decorators: [{
             type: Component,
@@ -549,10 +817,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         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  [conditionModels]=\"fields\"\n></gio-el-editor-condition-group>\n\n@if (elOutput) {\n  <div class=\"elOutput\">\n    {{ elOutput }}\n  </div>\n}\n", styles: [".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}\n"] }]
+                    ], 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, #e7e2fb);color:var(--gio-oem-palette--active-contrast, #100c27)}.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:#e7e8ef;color:#000}\n"] }]
         }], propDecorators: { conditionsModel: [{
                 type: Input,
                 args: [{ required: true }]
+            }], elChange: [{
+                type: Output
             }] } });
 const newConditionGroupFormGroup = () => {
     return new FormGroup({
@@ -713,6 +983,56 @@ class GioElEditorTypeDateHarness extends GioElEditorTypeComponentHarness {
     }
 }
 
+/*
+ * Copyright (C) 2024 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class GioElFieldHarness extends ComponentHarness {
+    constructor() {
+        super(...arguments);
+        this.getAutocomplete = this.locatorFor(MatAutocompleteHarness.with({ selector: '.fieldSelect' }));
+        this.getKey1Input = this.locatorForOptional(MatInputHarness.with({ selector: '.key1' }));
+        this.getKey2Input = this.locatorForOptional(MatInputHarness.with({ selector: '.key2' }));
+    }
+    static { this.hostSelector = 'gio-el-field'; }
+    static with(options = {}) {
+        return new HarnessPredicate(GioElFieldHarness, options);
+    }
+    async setValue(field, key1, key2) {
+        const autocomplete = await this.getAutocomplete();
+        await autocomplete.focus();
+        await autocomplete.selectOption({ text: new RegExp(`${field}`) });
+        if (key1) {
+            const key1Input = await this.getKey1Input();
+            await key1Input?.setValue(key1);
+        }
+        if (key2) {
+            const key2Input = await this.getKey2Input();
+            await key2Input?.setValue(key2);
+        }
+    }
+    async getValue() {
+        const autocomplete = await this.getAutocomplete();
+        const field = await autocomplete.getValue();
+        const key1Input = await this.getKey1Input();
+        const key1 = await key1Input?.getValue();
+        const key2Input = await this.getKey2Input();
+        const key2 = await key2Input?.getValue();
+        return { field, key1, key2 };
+    }
+}
+
 /*
  * Copyright (C) 2024 The Gravitee team (http://gravitee.io)
  *
@@ -747,7 +1067,7 @@ class GioElEditorConditionGroupHarness extends ComponentHarness {
         };
         this.getConditionHarness = async (index) => (await this.getConditionsHarness()).at(index);
         this.getConditionTypeHarness = (divHarness) => divHarness.childLocatorForOptional(GioElEditorTypeStringHarness, GioElEditorTypeBooleanHarness, GioElEditorTypeNumberHarness, GioElEditorTypeDateHarness)();
-        this.getConditionField = (divHarness) => divHarness.childLocatorFor(MatSelectHarness.with({ selector: '[formControlName="field"]' }))();
+        this.getConditionField = (divHarness) => divHarness.childLocatorFor(GioElFieldHarness.with({ selector: '[formControlName="field"]' }))();
     }
     static { this.hostSelector = 'gio-el-editor-condition-group'; }
     static with(options = {}) {
@@ -779,13 +1099,13 @@ class GioElEditorConditionGroupHarness extends ComponentHarness {
         }
         return toggles[0].check();
     }
-    async selectConditionField(index, field) {
+    async selectConditionField(index, field, key1, key2) {
         const conditionDiv = await this.getConditionHarness(index);
         if (!conditionDiv || !(conditionDiv instanceof DivHarness)) {
             throw new Error(`Condition with index ${index} not found`);
         }
-        const fieldSelect = await this.getConditionField(conditionDiv);
-        await fieldSelect.clickOptions({ text: field });
+        const conditionField = await this.getConditionField(conditionDiv);
+        await conditionField.setValue(field, key1, key2);
     }
     async selectConditionOperator(index, operator) {
         const conditionDiv = await this.getConditionHarness(index);
@@ -850,7 +1170,7 @@ class GioElEditorConditionGroupHarness extends ComponentHarness {
             const conditionField = await this.getConditionField(condition);
             const conditionType = await this.getConditionTypeHarness(condition);
             return {
-                field: await conditionField.getValueText(),
+                field: await conditionField.getValue(),
                 operator: await conditionType?.getOperatorValue(),
                 value: await conditionType?.getValue(),
             };
@@ -883,6 +1203,9 @@ class GioElEditorHarness extends ComponentHarness {
         this.getMainConditionGroup = this.locatorFor(GioElEditorConditionGroupHarness);
     }
     static { this.hostSelector = 'gio-el-editor'; }
+    static with(options = {}) {
+        return new HarnessPredicate(GioElEditorHarness, options);
+    }
 }
 
 /*
@@ -917,6 +1240,22 @@ class GioElEditorHarness extends ComponentHarness {
  * limitations under the License.
  */
 
+/*
+ * Copyright (C) 2024 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 /**
  * Generated bundle index. Do not edit.
  */