@gravitee/ui-particles-angular 5.20.1 → 5.21.0

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

@@ -12,7 +12,7 @@ import { ComponentHarness, HarnessPredicate, parallel, TestKey } from '@angular/
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i3$1 from '@angular/material/form-field';
 import { MatFormFieldControl, MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
-import { isEmpty, toLower, dropRight, isNil, isArray, remove, isObject, cloneDeep, set, uniqueId } from 'lodash';
+import { isEmpty, toLower, dropRight, isNil, isArray, remove, isObject, cloneDeep, uniqueId, set } from 'lodash';
 import { startWith, map, distinctUntilChanged, tap, debounce, takeUntil, delay, filter, switchMap, debounceTime } from 'rxjs/operators';
 import * as i7 from '@angular/forms';
 import { FormsModule, FormArray, FormGroup, FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule, NgControl } from '@angular/forms';
@@ -46,7 +46,7 @@ import { toSvg } from 'jdenticon';
 import * as i1$3 from '@ngx-formly/core/json-schema';
 import * as i1$4 from '@ngx-formly/core';
 import { FieldType, FieldArrayType, FieldWrapper, FormlyModule } from '@ngx-formly/core';
-import { FormlyMaterialModule } from '@ngx-formly/material';
+import { FieldType as FieldType$1, FormlyMaterialModule } from '@ngx-formly/material';
 import * as i3$2 from '@angular/material/slide-toggle';
 import { MatSlideToggle, MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { TestBed } from '@angular/core/testing';
@@ -2861,6 +2861,9 @@ class GioFormlyJsonSchemaService {
                 type: 'password',
             };
         }
+        else if (mapSource.type === 'string' && mapSource.format === 'gio-code-editor') {
+            mappedField.type = 'gio-code-editor';
+        }
         return mappedField;
     }
     bannerMap(mappedField, mapSource) {
@@ -3176,17 +3179,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class GioFjsNullTypeComponent extends FieldType {
-}
-GioFjsNullTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsNullTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-GioFjsNullTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFjsNullTypeComponent, selector: "gio-fjs-null-type", usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsNullTypeComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'gio-fjs-null-type',
-                    template: ``,
-                }]
-        }] });
+const GIO_MONACO_EDITOR_CONFIG = new InjectionToken('gio-monaco-editor-config');
 
 /*
  * Copyright (C) 2023 The Gravitee team (http://gravitee.io)
@@ -3203,39 +3196,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class GioFjsObjectTypeComponent extends FieldType {
+class GioMonacoEditorService {
+    constructor() {
+        this.loaded$ = new ReplaySubject(1);
+        this.loaded = false;
+    }
+    loadEditor() {
+        if (this.loaded) {
+            // Already loaded, do nothing.
+            return Promise.resolve();
+        }
+        this.loaded = true;
+        return new Promise(resolve => {
+            // Monaco is already loaded
+            if (typeof window.monaco === 'object') {
+                resolve();
+                return;
+            }
+            const onGotAmdLoader = () => {
+                // Load Monaco
+                window.require.config({ paths: { vs: 'assets/monaco-editor/min/vs' } });
+                window.require(['vs/editor/editor.main'], () => {
+                    resolve();
+                });
+            };
+            // Load AMD loader if necessary
+            if (!window.require) {
+                const loaderScript = document.createElement('script');
+                loaderScript.type = 'text/javascript';
+                loaderScript.src = 'assets/monaco-editor/min/vs/loader.js';
+                loaderScript.addEventListener('load', onGotAmdLoader);
+                document.body.appendChild(loaderScript);
+            }
+            else {
+                onGotAmdLoader();
+            }
+        }).then(() => {
+            this.loaded$.next({ monaco: window.monaco });
+        });
+    }
 }
-GioFjsObjectTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsObjectTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-GioFjsObjectTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFjsObjectTypeComponent, selector: "gio-fjs-object-type", usesInheritance: true, ngImport: i0, template: `
-    <div class="wrapper">
-      <div class="wrapper__title" *ngIf="to.label">{{ to.label }}</div>
-      <p *ngIf="to.description">{{ to.description }}</p>
-      <div class="wrapper__error gio-ng-invalid" *ngIf="showError && formControl.errors">
-        <formly-validation-message [field]="field"></formly-validation-message>
-      </div>
-      <div class="wrapper__fields">
-        <ng-container *ngFor="let f of field.fieldGroup">
-          <formly-field *ngIf="f.type" class="wrapper__fields__field" [field]="f"></formly-field>
-        </ng-container>
-      </div>
-    </div>
-  `, isInline: true, styles: [".wrapper{display:flex;flex-direction:column}.wrapper__title{font:600 18px/24px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:16px}.wrapper:empty{display:none}.wrapper__error{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#ec4899}.wrapper__fields{padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper__fields:empty{display:none}.wrapper__fields:has(> .wrapper__fields__field:only-child):has(> .wrapper__fields__field:empty){display:none}.wrapper__fields__field:empty{display:none}.wrapper__fields__field+.wrapper__fields__field:not(:empty){display:block;margin-top:8px}\n"], components: [{ type: i1$4.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: i1$4.FormlyField, selector: "formly-field", inputs: ["field"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsObjectTypeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gio-fjs-object-type', template: `
-    <div class="wrapper">
-      <div class="wrapper__title" *ngIf="to.label">{{ to.label }}</div>
-      <p *ngIf="to.description">{{ to.description }}</p>
-      <div class="wrapper__error gio-ng-invalid" *ngIf="showError && formControl.errors">
-        <formly-validation-message [field]="field"></formly-validation-message>
-      </div>
-      <div class="wrapper__fields">
-        <ng-container *ngFor="let f of field.fieldGroup">
-          <formly-field *ngIf="f.type" class="wrapper__fields__field" [field]="f"></formly-field>
-        </ng-container>
-      </div>
-    </div>
-  `, styles: [".wrapper{display:flex;flex-direction:column}.wrapper__title{font:600 18px/24px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:16px}.wrapper:empty{display:none}.wrapper__error{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#ec4899}.wrapper__fields{padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper__fields:empty{display:none}.wrapper__fields:has(> .wrapper__fields__field:only-child):has(> .wrapper__fields__field:empty){display:none}.wrapper__fields__field:empty{display:none}.wrapper__fields__field+.wrapper__fields__field:not(:empty){display:block;margin-top:8px}\n"] }]
+GioMonacoEditorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioMonacoEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+GioMonacoEditorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioMonacoEditorService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioMonacoEditorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
         }] });
 
 /*
@@ -3253,118 +3260,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class GioFjsArrayTypeComponent extends FieldArrayType {
-    constructor() {
-        super(...arguments);
-        this.collapse = false;
+class GioLanguageJsonService {
+    constructor(codeEditorService) {
+        this.codeEditorService = codeEditorService;
+        this.unsubscribe$ = new Subject();
+        codeEditorService.loaded$.pipe(takeUntil(this.unsubscribe$)).subscribe(event => {
+            this.setup(event.monaco);
+        });
+    }
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+    }
+    setup(monaco) {
+        if (!monaco) {
+            throw new Error('Monaco is not loaded');
+        }
+        this.monaco = monaco;
+        const defaults = monaco.languages.json.jsonDefaults;
+        defaults.setDiagnosticsOptions({
+            validate: true,
+            allowComments: true,
+        });
+    }
+    addSchemas(id, definitions = []) {
+        if (!this.monaco) {
+            throw new Error('Monaco is not loaded');
+        }
+        const defaults = this.monaco.languages.json.jsonDefaults;
+        const options = defaults.diagnosticsOptions;
+        let schemas = definitions.map(({ uri, schema }) => ({
+            uri,
+            schema,
+            fileMatch: [id || '*.json'],
+        }));
+        if (options && options.schemas && options.schemas.length > 0) {
+            schemas = [...options.schemas, ...schemas];
+        }
+        defaults.setDiagnosticsOptions({
+            ...options,
+            schemas: schemas,
+        });
     }
 }
-GioFjsArrayTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsArrayTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-GioFjsArrayTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFjsArrayTypeComponent, selector: "gio-fjs-array-type", usesInheritance: true, ngImport: i0, template: `
-    <div class="wrapper" [class.error]="formControl.touched && formControl.invalid">
-      <div class="wrapper__header">
-        <div class="wrapper__header__text">
-          <div class="wrapper__header__text__title" *ngIf="to.label">{{ to.label }}</div>
-          <p *ngIf="to.description">{{ to.description }}</p>
-        </div>
-        <div class="wrapper__header__collapse">
-          <button type="button" mat-icon-button aria-label="Collapse" (click)="collapse = !collapse">
-            <mat-icon [class.collapse-open]="collapse" [class.collapse-close]="!collapse" svgIcon="gio:nav-arrow-down"></mat-icon>
-          </button>
-        </div>
-      </div>
-
-      <div class="wrapper__error gio-ng-invalid" *ngIf="showError && formControl.errors">
-        <formly-validation-message [field]="field"></formly-validation-message>
-      </div>
-
-      <div [hidden]="collapse" class="wrapper__rows" [class.collapse-open]="collapse" [class.collapse-close]="!collapse">
-        <div *ngFor="let field of field.fieldGroup; let i = index" class="wrapper__rows__row">
-          <formly-field class="wrapper__rows__row__field" [field]="field"></formly-field>
-          <div class="wrapper__rows__row__remove">
-            <button type="button" mat-icon-button aria-label="Remove" (click)="remove(i)">
-              <mat-icon svgIcon="gio:cancel"></mat-icon>
-            </button>
-          </div>
-        </div>
-
-        <div>
-          <button type="button" mat-stroked-button aria-label="Add" (click)="add()"><mat-icon svgIcon="gio:plus"></mat-icon> Add</button>
-        </div>
-      </div>
-    </div>
-  `, isInline: true, styles: [".wrapper{padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper.error{border-color:#ec4899}.wrapper:empty{display:none}.wrapper__header{display:flex}.wrapper__header__text{flex:1 1 auto}.wrapper__header__text__title{font:600 16px/24px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:8px}.wrapper__header__collapse{flex:0 0 auto}.wrapper__header__collapse .collapse-open{transform:rotate(180deg);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__header__collapse .collapse-close{transform:rotate(0);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__error{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#ec4899}.wrapper__rows__row{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.wrapper__rows__row+.wrapper__rows__row{padding-top:3px;border-top:1px solid #d3d5dc;margin-top:4px}.wrapper__rows__row__field{flex:1 1 auto}.wrapper__rows__row__remove{flex:0 0 auto}\n"], components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1$4.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: i1$4.FormlyField, selector: "formly-field", inputs: ["field"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsArrayTypeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gio-fjs-array-type', template: `
-    <div class="wrapper" [class.error]="formControl.touched && formControl.invalid">
-      <div class="wrapper__header">
-        <div class="wrapper__header__text">
-          <div class="wrapper__header__text__title" *ngIf="to.label">{{ to.label }}</div>
-          <p *ngIf="to.description">{{ to.description }}</p>
-        </div>
-        <div class="wrapper__header__collapse">
-          <button type="button" mat-icon-button aria-label="Collapse" (click)="collapse = !collapse">
-            <mat-icon [class.collapse-open]="collapse" [class.collapse-close]="!collapse" svgIcon="gio:nav-arrow-down"></mat-icon>
-          </button>
-        </div>
-      </div>
-
-      <div class="wrapper__error gio-ng-invalid" *ngIf="showError && formControl.errors">
-        <formly-validation-message [field]="field"></formly-validation-message>
-      </div>
-
-      <div [hidden]="collapse" class="wrapper__rows" [class.collapse-open]="collapse" [class.collapse-close]="!collapse">
-        <div *ngFor="let field of field.fieldGroup; let i = index" class="wrapper__rows__row">
-          <formly-field class="wrapper__rows__row__field" [field]="field"></formly-field>
-          <div class="wrapper__rows__row__remove">
-            <button type="button" mat-icon-button aria-label="Remove" (click)="remove(i)">
-              <mat-icon svgIcon="gio:cancel"></mat-icon>
-            </button>
-          </div>
-        </div>
-
-        <div>
-          <button type="button" mat-stroked-button aria-label="Add" (click)="add()"><mat-icon svgIcon="gio:plus"></mat-icon> Add</button>
-        </div>
-      </div>
-    </div>
-  `, styles: [".wrapper{padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper.error{border-color:#ec4899}.wrapper:empty{display:none}.wrapper__header{display:flex}.wrapper__header__text{flex:1 1 auto}.wrapper__header__text__title{font:600 16px/24px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:8px}.wrapper__header__collapse{flex:0 0 auto}.wrapper__header__collapse .collapse-open{transform:rotate(180deg);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__header__collapse .collapse-close{transform:rotate(0);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__error{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#ec4899}.wrapper__rows__row{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.wrapper__rows__row+.wrapper__rows__row{padding-top:3px;border-top:1px solid #d3d5dc;margin-top:4px}.wrapper__rows__row__field{flex:1 1 auto}.wrapper__rows__row__remove{flex:0 0 auto}\n"] }]
-        }] });
-
-function minItemsValidationMessage(error, field) {
-    return `Should NOT have fewer than ${field.props?.minItems} items`;
-}
-function maxItemsValidationMessage(error, field) {
-    return `Should NOT have more than ${field.props?.maxItems} items`;
-}
-function minLengthValidationMessage(error, field) {
-    return `Should NOT be shorter than ${field.props?.minLength} characters`;
-}
-function maxLengthValidationMessage(error, field) {
-    return `Should NOT be longer than ${field.props?.maxLength} characters`;
-}
-function minValidationMessage(error, field) {
-    return `Should be >= ${field.props?.min}`;
-}
-function maxValidationMessage(error, field) {
-    return `Should be <= ${field.props?.max}`;
-}
-function multipleOfValidationMessage(error, field) {
-    return `Should be multiple of ${field.props?.step}`;
-}
-function exclusiveMinimumValidationMessage(error, field) {
-    return `Should be > ${field.props?.step}`;
-}
-function exclusiveMaximumValidationMessage(error, field) {
-    return `Should be < ${field.props?.step}`;
-}
-function constValidationMessage(error, field) {
-    return `Should be equal to constant "${field.props?.const}"`;
-}
-function typeValidationMessage({ schemaType }) {
-    return `Should be "${schemaType[0]}".`;
-}
+GioLanguageJsonService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioLanguageJsonService, deps: [{ token: GioMonacoEditorService }], target: i0.ɵɵFactoryTarget.Injectable });
+GioLanguageJsonService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioLanguageJsonService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioLanguageJsonService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: GioMonacoEditorService }]; } });
 
 /*
  * Copyright (C) 2023 The Gravitee team (http://gravitee.io)
@@ -3381,27 +3327,294 @@ function typeValidationMessage({ schemaType }) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class GioFormFieldWrapperComponent extends FieldWrapper {
-}
-GioFormFieldWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormFieldWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-GioFormFieldWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFormFieldWrapperComponent, selector: "gio-form-field-wrapper", usesInheritance: true, ngImport: i0, template: "<!--\n\n    Copyright (C) 2023 The Gravitee team (http://gravitee.io)\n    \n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n    \n            http://www.apache.org/licenses/LICENSE-2.0\n    \n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n<div class=\"wrapper\">\n  <div class=\"banner\">\n    <div class=\"banner__icon\"><mat-icon svgIcon=\"gio:info\"></mat-icon></div>\n    <div>\n      <div class=\"banner__title\" [innerHTML]=\"props.bannerTitle\"></div>\n      <div class=\"banner__text\" [innerHTML]=\"props.bannerText\"></div>\n    </div>\n  </div>\n  <ng-container #fieldComponent></ng-container>\n</div>\n", styles: [".wrapper{padding:8px 0}.banner{display:flex;flex-direction:row;align-items:flex-start;padding:8px;border-radius:8px;margin-bottom:8px;background:#e7e8ef;gap:8px}.banner__icon{padding-top:2px}.banner__icon mat-icon{width:16px;height:16px;color:#6c59bd}.banner__title{font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__text{font:400 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;color:#606274}\n"], components: [{ type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormFieldWrapperComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gio-form-field-wrapper', template: "<!--\n\n    Copyright (C) 2023 The Gravitee team (http://gravitee.io)\n    \n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n    \n            http://www.apache.org/licenses/LICENSE-2.0\n    \n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n<div class=\"wrapper\">\n  <div class=\"banner\">\n    <div class=\"banner__icon\"><mat-icon svgIcon=\"gio:info\"></mat-icon></div>\n    <div>\n      <div class=\"banner__title\" [innerHTML]=\"props.bannerTitle\"></div>\n      <div class=\"banner__text\" [innerHTML]=\"props.bannerText\"></div>\n    </div>\n  </div>\n  <ng-container #fieldComponent></ng-container>\n</div>\n", styles: [".wrapper{padding:8px 0}.banner{display:flex;flex-direction:row;align-items:flex-start;padding:8px;border-radius:8px;margin-bottom:8px;background:#e7e8ef;gap:8px}.banner__icon{padding-top:2px}.banner__icon mat-icon{width:16px;height:16px;color:#6c59bd}.banner__title{font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__text{font:400 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;color:#606274}\n"] }]
-        }] });
-
-function bannerExtension(field) {
-    if (!field.props || (field.wrappers && field.wrappers.indexOf('gio-with-banner') !== -1)) {
-        return;
+class GioMonacoEditorComponent {
+    constructor(hostElement, config, monacoEditorService, languageJsonService, changeDetectorRef, ngZone, ngControl) {
+        this.hostElement = hostElement;
+        this.config = config;
+        this.monacoEditorService = monacoEditorService;
+        this.languageJsonService = languageJsonService;
+        this.changeDetectorRef = changeDetectorRef;
+        this.ngZone = ngZone;
+        this.ngControl = ngControl;
+        this.options = {};
+        this.loaded$ = new ReplaySubject(1);
+        this.defaultOptions = {
+            contextmenu: false,
+            minimap: {
+                enabled: true,
+            },
+            automaticLayout: true,
+            scrollBeyondLastLine: false,
+        };
+        this.value = '';
+        this.readOnly = false;
+        this._onChange = () => ({});
+        this._onTouched = () => ({});
+        this.unsubscribe$ = new Subject();
+        if (this.ngControl) {
+            // Set the value accessor directly (instead of providing
+            // NG_VALUE_ACCESSOR) to avoid running into a circular import
+            this.ngControl.valueAccessor = this;
+        }
+        this.monacoEditorService.loadEditor();
     }
-    if (field.props.bannerTitle || field.props.bannerText) {
-        // WARNING: 'gio-with-banner' must be placed before field wrappers in order to put banner before mat-form-field if exists
-        field.wrappers = ['gio-with-banner', ...(field.wrappers || [])];
+    ngAfterViewInit() {
+        // Wait until monaco editor is available
+        this.monacoEditorService.loaded$.pipe(takeUntil(this.unsubscribe$)).subscribe(({ monaco }) => {
+            this.setupEditor(monaco);
+            this.loaded$.next(false);
+            this.changeDetectorRef.detectChanges();
+        });
+    }
+    ngOnDestroy() {
+        if (this.standaloneCodeEditor) {
+            this.standaloneCodeEditor.dispose();
+            this.standaloneCodeEditor = undefined;
+        }
+        if (this.textModel) {
+            this.textModel.dispose();
+            this.textModel = undefined;
+        }
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+    }
+    // From ControlValueAccessor interface
+    writeValue(_value) {
+        if (_value) {
+            this.value = _value;
+        }
+        if (this.textModel) {
+            this.textModel.setValue(this.value);
+        }
+    }
+    // From ControlValueAccessor interface
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    // From ControlValueAccessor interface
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    // From ControlValueAccessor interface
+    setDisabledState(isDisabled) {
+        this.readOnly = isDisabled;
+    }
+    setupEditor(monaco) {
+        if (!this.hostElement) {
+            throw new Error('No editor ref found.');
+        }
+        const domElement = this.hostElement.nativeElement;
+        const settings = {
+            value: this.value,
+            language: this.languageConfig?.language ?? 'text',
+            uri: `code-${uniqueId()}`,
+        };
+        this.ngZone.runOutsideAngular(() => {
+            this.textModel = monaco.editor.createModel(settings.value, settings.language, monaco.Uri.parse(settings.uri));
+        });
+        const options = Object.assign({}, this.defaultOptions, this.options, {
+            readOnly: this.readOnly,
+            theme: this.config.theme ?? 'vs',
+            model: this.textModel,
+        });
+        this.standaloneCodeEditor = monaco.editor.create(domElement, {
+            ...options,
+        });
+        this.textModel?.onDidChangeContent(() => {
+            const newValue = this.textModel?.getValue();
+            this.ngZone.run(() => {
+                this.value = newValue ?? '';
+                this._onChange(newValue ?? '');
+                this._onTouched();
+            });
+        });
+        this.standaloneCodeEditor?.onDidBlurEditorWidget(() => {
+            this.ngZone.run(() => {
+                this._onTouched();
+            });
+        });
+        this.setupLanguage(settings.uri, this.languageConfig);
+    }
+    setupLanguage(uri, languageConfig) {
+        if (!languageConfig) {
+            return;
+        }
+        const { language } = languageConfig;
+        if (language) {
+            const lang = language.toLowerCase();
+            switch (lang) {
+                case 'json':
+                    if (languageConfig.schemas) {
+                        this.languageJsonService.addSchemas(uri, languageConfig.schemas);
+                    }
+                    break;
+                default:
+                    break;
+            }
+        }
     }
 }
+GioMonacoEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioMonacoEditorComponent, deps: [{ token: i0.ElementRef }, { token: GIO_MONACO_EDITOR_CONFIG }, { token: GioMonacoEditorService }, { token: GioLanguageJsonService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i7.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+GioMonacoEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioMonacoEditorComponent, selector: "gio-monaco-editor", inputs: { languageConfig: "languageConfig", options: "options" }, ngImport: i0, template: ` <div *ngIf="loaded$ | async">Loading...</div>`, isInline: true, styles: [":host{display:block;height:100%;min-height:150px;transition:opacity .2s ease-out}:host-context(.hidden){opacity:0}\n"], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i2$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioMonacoEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gio-monaco-editor', template: ` <div *ngIf="loaded$ | async">Loading...</div>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;height:100%;min-height:150px;transition:opacity .2s ease-out}:host-context(.hidden){opacity:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [GIO_MONACO_EDITOR_CONFIG]
+                }] }, { type: GioMonacoEditorService }, { type: GioLanguageJsonService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i7.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }]; }, propDecorators: { languageConfig: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }] } });
+
+class GioMonacoEditorFormFieldDirective {
+    constructor(elementRef, focusMonitor, renderer, changeDetectorRef, hostGioMonacoEditorComponent) {
+        this.elementRef = elementRef;
+        this.focusMonitor = focusMonitor;
+        this.renderer = renderer;
+        this.changeDetectorRef = changeDetectorRef;
+        this.hostGioMonacoEditorComponent = hostGioMonacoEditorComponent;
+        this.stateChanges = new Subject();
+        this.id = `gio-monaco-editor-${GioMonacoEditorFormFieldDirective.nextId++}`;
+        this.userAriaDescribedBy = '';
+        this.ngControl = null;
+        this.focused = false;
+        this.errorState = false;
+        this.controlType = 'gio-monaco-editor';
+        // autofilled?: boolean | undefined;
+        this._placeholder = '';
+        this._required = false;
+        this._disabled = false;
+        this.maxHeight = 500;
+        this.unsubscribe$ = new Subject();
+    }
+    get value() {
+        return this.hostGioMonacoEditorComponent?.value ?? null;
+    }
+    set placeholder(placeholder) {
+        this._placeholder = placeholder;
+        this.stateChanges.next();
+    }
+    get placeholder() {
+        return this._placeholder;
+    }
+    set required(required) {
+        this._required = coerceBooleanProperty(required);
+        this.stateChanges.next();
+    }
+    get required() {
+        return this._required;
+    }
+    set disabled(disabled) {
+        this._disabled = coerceBooleanProperty(disabled);
+        if (this.focused) {
+            this.focused = false;
+            this.stateChanges.next();
+        }
+    }
+    get disabled() {
+        if (this.ngControl && this.ngControl.disabled !== null) {
+            return this.ngControl.disabled;
+        }
+        return this._disabled;
+    }
+    get empty() {
+        return !this.value;
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    get shouldHideEditor() {
+        return !this.shouldLabelFloat;
+    }
+    ngOnInit() {
+        this.stateChanges.pipe(takeUntil(this.unsubscribe$)).subscribe(() => this.changeDetectorRef.markForCheck());
+        this.focusMonitor
+            .monitor(this.elementRef.nativeElement, true)
+            .pipe(takeUntil(this.unsubscribe$))
+            .subscribe(origin => {
+            this.focused = !!origin;
+            this.stateChanges.next();
+        });
+        this.ngControl = this.hostGioMonacoEditorComponent?.ngControl;
+        this.hostGioMonacoEditorComponent.loaded$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+            // Auto resize editor
+            this.hostGioMonacoEditorComponent.standaloneCodeEditor?.onDidContentSizeChange(() => {
+                const height = Math.min(this.hostGioMonacoEditorComponent.standaloneCodeEditor?.getContentHeight() ?? this.maxHeight, this.maxHeight);
+                this.renderer.setStyle(this.elementRef.nativeElement, 'height', `${height}px`);
+                this.hostGioMonacoEditorComponent.standaloneCodeEditor?.layout();
+                this.stateChanges.next();
+            });
+        });
+    }
+    ngDoCheck() {
+        if (this.ngControl) {
+            this.errorState = !!this.ngControl.invalid && !!this.ngControl.touched;
+            this.stateChanges.next();
+        }
+    }
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+        this.focusMonitor.stopMonitoring(this.elementRef.nativeElement);
+    }
+    setDescribedByIds(ids) {
+        this.userAriaDescribedBy = ids.join(' ');
+    }
+    onContainerClick(_event) {
+        if (!this.focused) {
+            this.hostGioMonacoEditorComponent.standaloneCodeEditor?.focus();
+        }
+    }
+}
+GioMonacoEditorFormFieldDirective.nextId = 0;
+GioMonacoEditorFormFieldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioMonacoEditorFormFieldDirective, deps: [{ token: i0.ElementRef }, { token: i2$2.FocusMonitor }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: GioMonacoEditorComponent, host: true, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+GioMonacoEditorFormFieldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GioMonacoEditorFormFieldDirective, selector: "[gioMonacoEditorFormField]", inputs: { placeholder: "placeholder", required: "required", disabled: "disabled" }, host: { properties: { "id": "this.id", "attr.aria-describedBy": "this.userAriaDescribedBy", "class.hidden": "this.shouldHideEditor" } }, providers: [
+        {
+            provide: MatFormFieldControl,
+            useExisting: forwardRef(() => GioMonacoEditorFormFieldDirective),
+        },
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioMonacoEditorFormFieldDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gioMonacoEditorFormField]',
+                    providers: [
+                        {
+                            provide: MatFormFieldControl,
+                            useExisting: forwardRef(() => GioMonacoEditorFormFieldDirective),
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2$2.FocusMonitor }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: GioMonacoEditorComponent, decorators: [{
+                    type: Host
+                }, {
+                    type: Self
+                }, {
+                    type: Optional
+                }] }]; }, propDecorators: { id: [{
+                type: HostBinding
+            }], userAriaDescribedBy: [{
+                type: HostBinding,
+                args: ['attr.aria-describedBy']
+            }], placeholder: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], shouldHideEditor: [{
+                type: HostBinding,
+                args: ['class.hidden']
+            }] } });
 
 /*
- * Copyright (C) 2023 The Gravitee team (http://gravitee.io)
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -3415,35 +3628,40 @@ function bannerExtension(field) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class GioFjsMultiSchemaTypeComponent extends FieldType {
-    ngOnInit() {
-        set(this.field, 'fieldGroup[0].props.appearance', 'fill');
-        set(this.field, 'fieldGroup[0].props.label', 'Select option');
+class GioMonacoEditorModule {
+    static forRoot(config) {
+        return {
+            ngModule: GioMonacoEditorModule,
+            providers: [
+                {
+                    provide: GIO_MONACO_EDITOR_CONFIG,
+                    useValue: config,
+                },
+            ],
+        };
     }
 }
-GioFjsMultiSchemaTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsMultiSchemaTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-GioFjsMultiSchemaTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFjsMultiSchemaTypeComponent, selector: "gio-fjs-multi-schema-type", usesInheritance: true, ngImport: i0, template: `
-    <div class="wrapper">
-      <div class="wrapper__title" *ngIf="props.label">{{ props.label }}</div>
-      <p *ngIf="props.description">{{ props.description }}</p>
-      <div class="wrapper__error gio-ng-invalid" *ngIf="showError && formControl.errors">
-        <formly-validation-message [field]="field"></formly-validation-message>
-      </div>
-      <formly-field *ngFor="let f of field.fieldGroup" [field]="f"></formly-field>
-    </div>
-  `, isInline: true, styles: [".wrapper__title{font-size:16px;font-weight:500;line-height:24px;font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:4px}.wrapper:empty{display:none}.wrapper__error{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#ec4899}\n"], components: [{ type: i1$4.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: i1$4.FormlyField, selector: "formly-field", inputs: ["field"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsMultiSchemaTypeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gio-fjs-multi-schema-type', template: `
-    <div class="wrapper">
-      <div class="wrapper__title" *ngIf="props.label">{{ props.label }}</div>
-      <p *ngIf="props.description">{{ props.description }}</p>
-      <div class="wrapper__error gio-ng-invalid" *ngIf="showError && formControl.errors">
-        <formly-validation-message [field]="field"></formly-validation-message>
-      </div>
-      <formly-field *ngFor="let f of field.fieldGroup" [field]="f"></formly-field>
-    </div>
-  `, styles: [".wrapper__title{font-size:16px;font-weight:500;line-height:24px;font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:4px}.wrapper:empty{display:none}.wrapper__error{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#ec4899}\n"] }]
+GioMonacoEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioMonacoEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GioMonacoEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioMonacoEditorModule, declarations: [GioMonacoEditorComponent, GioMonacoEditorFormFieldDirective], imports: [CommonModule, HttpClientModule, ReactiveFormsModule], exports: [GioMonacoEditorComponent, GioMonacoEditorFormFieldDirective] });
+GioMonacoEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioMonacoEditorModule, providers: [
+        {
+            provide: GIO_MONACO_EDITOR_CONFIG,
+            useValue: {},
+        },
+    ], imports: [[CommonModule, HttpClientModule, ReactiveFormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioMonacoEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, HttpClientModule, ReactiveFormsModule],
+                    declarations: [GioMonacoEditorComponent, GioMonacoEditorFormFieldDirective],
+                    exports: [GioMonacoEditorComponent, GioMonacoEditorFormFieldDirective],
+                    providers: [
+                        {
+                            provide: GIO_MONACO_EDITOR_CONFIG,
+                            useValue: {},
+                        },
+                    ],
+                }]
         }] });
 
 /*
@@ -3461,39 +3679,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class GioFjsToggleTypeComponent extends FieldType {
+class GioFjsNullTypeComponent extends FieldType {
 }
-GioFjsToggleTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsToggleTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-GioFjsToggleTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFjsToggleTypeComponent, selector: "gio-fjs-toggle-type", usesInheritance: true, ngImport: i0, template: `
-    <gio-form-slide-toggle>
-      <gio-form-label>{{ props.label }}</gio-form-label>
-      {{ props.description }}
-      <mat-slide-toggle
-        gioFormSlideToggle
-        [id]="id"
-        [formControl]="formControl"
-        [formlyAttributes]="field"
-        [tabIndex]="props.tabindex"
-      ></mat-slide-toggle>
-    </gio-form-slide-toggle>
-  `, isInline: true, components: [{ type: GioFormSlideToggleComponent, selector: "gio-form-slide-toggle", inputs: ["appearance"] }, { type: GioFormLabelComponent, selector: "gio-form-label" }, { type: i3$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$4.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsToggleTypeComponent, decorators: [{
+GioFjsNullTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsNullTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+GioFjsNullTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFjsNullTypeComponent, selector: "gio-fjs-null-type", usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsNullTypeComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'gio-fjs-toggle-type',
-                    template: `
-    <gio-form-slide-toggle>
-      <gio-form-label>{{ props.label }}</gio-form-label>
-      {{ props.description }}
-      <mat-slide-toggle
-        gioFormSlideToggle
-        [id]="id"
-        [formControl]="formControl"
-        [formlyAttributes]="field"
-        [tabIndex]="props.tabindex"
-      ></mat-slide-toggle>
-    </gio-form-slide-toggle>
-  `,
+                    selector: 'gio-fjs-null-type',
+                    template: ``,
                 }]
         }] });
 
@@ -3512,31 +3706,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class GioFjsHeadersTypeComponent extends FieldType {
+class GioFjsObjectTypeComponent extends FieldType {
+}
+GioFjsObjectTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsObjectTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+GioFjsObjectTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFjsObjectTypeComponent, selector: "gio-fjs-object-type", usesInheritance: true, ngImport: i0, template: `
+    <div class="wrapper">
+      <div class="wrapper__title" *ngIf="to.label">{{ to.label }}</div>
+      <p *ngIf="to.description">{{ to.description }}</p>
+      <div class="wrapper__error gio-ng-invalid" *ngIf="showError && formControl.errors">
+        <formly-validation-message [field]="field"></formly-validation-message>
+      </div>
+      <div class="wrapper__fields">
+        <ng-container *ngFor="let f of field.fieldGroup">
+          <formly-field *ngIf="f.type" class="wrapper__fields__field" [field]="f"></formly-field>
+        </ng-container>
+      </div>
+    </div>
+  `, isInline: true, styles: [".wrapper{display:flex;flex-direction:column}.wrapper__title{font:600 18px/24px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:16px}.wrapper:empty{display:none}.wrapper__error{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#ec4899}.wrapper__fields{padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper__fields:empty{display:none}.wrapper__fields:has(> .wrapper__fields__field:only-child):has(> .wrapper__fields__field:empty){display:none}.wrapper__fields__field:empty{display:none}.wrapper__fields__field+.wrapper__fields__field:not(:empty){display:block;margin-top:8px}\n"], components: [{ type: i1$4.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: i1$4.FormlyField, selector: "formly-field", inputs: ["field"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsObjectTypeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gio-fjs-object-type', template: `
+    <div class="wrapper">
+      <div class="wrapper__title" *ngIf="to.label">{{ to.label }}</div>
+      <p *ngIf="to.description">{{ to.description }}</p>
+      <div class="wrapper__error gio-ng-invalid" *ngIf="showError && formControl.errors">
+        <formly-validation-message [field]="field"></formly-validation-message>
+      </div>
+      <div class="wrapper__fields">
+        <ng-container *ngFor="let f of field.fieldGroup">
+          <formly-field *ngIf="f.type" class="wrapper__fields__field" [field]="f"></formly-field>
+        </ng-container>
+      </div>
+    </div>
+  `, styles: [".wrapper{display:flex;flex-direction:column}.wrapper__title{font:600 18px/24px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:16px}.wrapper:empty{display:none}.wrapper__error{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#ec4899}.wrapper__fields{padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper__fields:empty{display:none}.wrapper__fields:has(> .wrapper__fields__field:only-child):has(> .wrapper__fields__field:empty){display:none}.wrapper__fields__field:empty{display:none}.wrapper__fields__field+.wrapper__fields__field:not(:empty){display:block;margin-top:8px}\n"] }]
+        }] });
+
+/*
+ * Copyright (C) 2023 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class GioFjsArrayTypeComponent extends FieldArrayType {
     constructor() {
         super(...arguments);
-        this.defaultOptions = {
-            props: {
-                outputConfig: {
-                    keyName: 'name',
-                    valueName: 'value',
-                },
-            },
-        };
         this.collapse = false;
     }
-    get map() {
-        return (headers) => [...(headers ?? [])].map(header => {
-            return {
-                [this.props.outputConfig.keyName]: header.key,
-                [this.props.outputConfig.valueName]: header.value,
-            };
-        });
-    }
 }
-GioFjsHeadersTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsHeadersTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-GioFjsHeadersTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFjsHeadersTypeComponent, selector: "gio-fjs-headers-type", usesInheritance: true, ngImport: i0, template: `
-    <div class="wrapper">
+GioFjsArrayTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsArrayTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+GioFjsArrayTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFjsArrayTypeComponent, selector: "gio-fjs-array-type", usesInheritance: true, ngImport: i0, template: `
+    <div class="wrapper" [class.error]="formControl.touched && formControl.invalid">
       <div class="wrapper__header">
         <div class="wrapper__header__text">
           <div class="wrapper__header__text__title" *ngIf="to.label">{{ to.label }}</div>
@@ -3548,18 +3776,31 @@ GioFjsHeadersTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
           </button>
         </div>
       </div>
-      <div class="wrapper__error" *ngIf="showError && formControl.errors">
+
+      <div class="wrapper__error gio-ng-invalid" *ngIf="showError && formControl.errors">
         <formly-validation-message [field]="field"></formly-validation-message>
       </div>
-      <div *ngIf="!collapse" class="wrapper__rows" [class.collapse-open]="collapse" [class.collapse-close]="!collapse">
-        <gio-form-headers [adaptOutputFn]="map" [formControl]="formControl"></gio-form-headers>
+
+      <div [hidden]="collapse" class="wrapper__rows" [class.collapse-open]="collapse" [class.collapse-close]="!collapse">
+        <div *ngFor="let field of field.fieldGroup; let i = index" class="wrapper__rows__row">
+          <formly-field class="wrapper__rows__row__field" [field]="field"></formly-field>
+          <div class="wrapper__rows__row__remove">
+            <button type="button" mat-icon-button aria-label="Remove" (click)="remove(i)">
+              <mat-icon svgIcon="gio:cancel"></mat-icon>
+            </button>
+          </div>
+        </div>
+
+        <div>
+          <button type="button" mat-stroked-button aria-label="Add" (click)="add()"><mat-icon svgIcon="gio:plus"></mat-icon> Add</button>
+        </div>
       </div>
     </div>
-  `, isInline: true, styles: [".wrapper{display:flex;flex-direction:column;padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper__header{display:flex}.wrapper__header__text{flex:1 1 auto}.wrapper__header__text__title{font:600 16px/24px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:8px}.wrapper__header__collapse{flex:0 0 auto}.wrapper__header__collapse .collapse-open{transform:rotate(180deg);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__header__collapse .collapse-close{transform:rotate(0);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__error{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#ec4899}\n"], components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1$4.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: GioFormHeadersComponent, selector: "gio-form-headers", inputs: ["adaptOutputFn"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsHeadersTypeComponent, decorators: [{
+  `, isInline: true, styles: [".wrapper{padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper.error{border-color:#ec4899}.wrapper:empty{display:none}.wrapper__header{display:flex}.wrapper__header__text{flex:1 1 auto}.wrapper__header__text__title{font:600 16px/24px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:8px}.wrapper__header__collapse{flex:0 0 auto}.wrapper__header__collapse .collapse-open{transform:rotate(180deg);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__header__collapse .collapse-close{transform:rotate(0);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__error{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#ec4899}.wrapper__rows__row{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.wrapper__rows__row+.wrapper__rows__row{padding-top:3px;border-top:1px solid #d3d5dc;margin-top:4px}.wrapper__rows__row__field{flex:1 1 auto}.wrapper__rows__row__remove{flex:0 0 auto}\n"], components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1$4.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: i1$4.FormlyField, selector: "formly-field", inputs: ["field"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsArrayTypeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gio-fjs-headers-type', template: `
-    <div class="wrapper">
+            args: [{ selector: 'gio-fjs-array-type', template: `
+    <div class="wrapper" [class.error]="formControl.touched && formControl.invalid">
       <div class="wrapper__header">
         <div class="wrapper__header__text">
           <div class="wrapper__header__text__title" *ngIf="to.label">{{ to.label }}</div>
@@ -3571,16 +3812,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
           </button>
         </div>
       </div>
-      <div class="wrapper__error" *ngIf="showError && formControl.errors">
+
+      <div class="wrapper__error gio-ng-invalid" *ngIf="showError && formControl.errors">
         <formly-validation-message [field]="field"></formly-validation-message>
       </div>
-      <div *ngIf="!collapse" class="wrapper__rows" [class.collapse-open]="collapse" [class.collapse-close]="!collapse">
-        <gio-form-headers [adaptOutputFn]="map" [formControl]="formControl"></gio-form-headers>
+
+      <div [hidden]="collapse" class="wrapper__rows" [class.collapse-open]="collapse" [class.collapse-close]="!collapse">
+        <div *ngFor="let field of field.fieldGroup; let i = index" class="wrapper__rows__row">
+          <formly-field class="wrapper__rows__row__field" [field]="field"></formly-field>
+          <div class="wrapper__rows__row__remove">
+            <button type="button" mat-icon-button aria-label="Remove" (click)="remove(i)">
+              <mat-icon svgIcon="gio:cancel"></mat-icon>
+            </button>
+          </div>
+        </div>
+
+        <div>
+          <button type="button" mat-stroked-button aria-label="Add" (click)="add()"><mat-icon svgIcon="gio:plus"></mat-icon> Add</button>
+        </div>
       </div>
     </div>
-  `, styles: [".wrapper{display:flex;flex-direction:column;padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper__header{display:flex}.wrapper__header__text{flex:1 1 auto}.wrapper__header__text__title{font:600 16px/24px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:8px}.wrapper__header__collapse{flex:0 0 auto}.wrapper__header__collapse .collapse-open{transform:rotate(180deg);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__header__collapse .collapse-close{transform:rotate(0);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__error{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#ec4899}\n"] }]
+  `, styles: [".wrapper{padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper.error{border-color:#ec4899}.wrapper:empty{display:none}.wrapper__header{display:flex}.wrapper__header__text{flex:1 1 auto}.wrapper__header__text__title{font:600 16px/24px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:8px}.wrapper__header__collapse{flex:0 0 auto}.wrapper__header__collapse .collapse-open{transform:rotate(180deg);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__header__collapse .collapse-close{transform:rotate(0);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__error{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#ec4899}.wrapper__rows__row{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.wrapper__rows__row+.wrapper__rows__row{padding-top:3px;border-top:1px solid #d3d5dc;margin-top:4px}.wrapper__rows__row__field{flex:1 1 auto}.wrapper__rows__row__remove{flex:0 0 auto}\n"] }]
         }] });
 
+function minItemsValidationMessage(error, field) {
+    return `Should NOT have fewer than ${field.props?.minItems} items`;
+}
+function maxItemsValidationMessage(error, field) {
+    return `Should NOT have more than ${field.props?.maxItems} items`;
+}
+function minLengthValidationMessage(error, field) {
+    return `Should NOT be shorter than ${field.props?.minLength} characters`;
+}
+function maxLengthValidationMessage(error, field) {
+    return `Should NOT be longer than ${field.props?.maxLength} characters`;
+}
+function minValidationMessage(error, field) {
+    return `Should be >= ${field.props?.min}`;
+}
+function maxValidationMessage(error, field) {
+    return `Should be <= ${field.props?.max}`;
+}
+function multipleOfValidationMessage(error, field) {
+    return `Should be multiple of ${field.props?.step}`;
+}
+function exclusiveMinimumValidationMessage(error, field) {
+    return `Should be > ${field.props?.step}`;
+}
+function exclusiveMaximumValidationMessage(error, field) {
+    return `Should be < ${field.props?.step}`;
+}
+function constValidationMessage(error, field) {
+    return `Should be equal to constant "${field.props?.const}"`;
+}
+function typeValidationMessage({ schemaType }) {
+    return `Should be "${schemaType[0]}".`;
+}
+
 /*
  * Copyright (C) 2023 The Gravitee team (http://gravitee.io)
  *
@@ -3596,61 +3884,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class GioPasswordEyeWrapperComponent extends FieldWrapper {
-    constructor() {
-        super(...arguments);
-        this.hide = true;
-    }
-    ngAfterViewInit() {
-        if (this.matSuffix) {
-            this.props.suffix = this.matSuffix;
-        }
-    }
-    addonEyeClick($event) {
-        $event.stopPropagation();
-        this.hide = !this.hide;
-        this.props.type = this.hide ? 'password' : 'text';
-    }
+class GioBannerWrapperComponent extends FieldWrapper {
 }
-GioPasswordEyeWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioPasswordEyeWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-GioPasswordEyeWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioPasswordEyeWrapperComponent, selector: "gio-password-eye-wrapper", viewQueries: [{ propertyName: "matSuffix", first: true, predicate: ["matSuffix"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
-    <ng-container #fieldComponent></ng-container>
-
-    <ng-template #matSuffix>
-      <span style="cursor: pointer" (click)="addonEyeClick($event)">
-        <mat-icon [svgIcon]="hide ? 'gio:eye-empty' : 'gio:eye-off'"></mat-icon>
-      </span>
-    </ng-template>
-  `, isInline: true, components: [{ type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioPasswordEyeWrapperComponent, decorators: [{
+GioBannerWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioBannerWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+GioBannerWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioBannerWrapperComponent, selector: "gio-banner-wrapper", usesInheritance: true, ngImport: i0, template: "<!--\n\n    Copyright (C) 2023 The Gravitee team (http://gravitee.io)\n    \n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n    \n            http://www.apache.org/licenses/LICENSE-2.0\n    \n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n<div class=\"wrapper\">\n  <div class=\"banner\">\n    <div class=\"banner__icon\"><mat-icon svgIcon=\"gio:info\"></mat-icon></div>\n    <div>\n      <div class=\"banner__title\" [innerHTML]=\"props.bannerTitle\"></div>\n      <div class=\"banner__text\" [innerHTML]=\"props.bannerText\"></div>\n    </div>\n  </div>\n  <ng-container #fieldComponent></ng-container>\n</div>\n", styles: ["::ng-deep gio-banner-wrapper ul{padding-inline-start:16px}.wrapper{padding:8px 0}.banner{display:flex;flex-direction:row;align-items:flex-start;padding:8px;border-radius:8px;margin-bottom:8px;background:#e7e8ef;gap:8px}.banner__icon{padding-top:2px}.banner__icon mat-icon{width:16px;height:16px;color:#6c59bd}.banner__title{font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__text{font:400 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;color:#606274}\n"], components: [{ type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioBannerWrapperComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'gio-password-eye-wrapper',
-                    template: `
-    <ng-container #fieldComponent></ng-container>
+            args: [{ selector: 'gio-banner-wrapper', template: "<!--\n\n    Copyright (C) 2023 The Gravitee team (http://gravitee.io)\n    \n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n    \n            http://www.apache.org/licenses/LICENSE-2.0\n    \n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n<div class=\"wrapper\">\n  <div class=\"banner\">\n    <div class=\"banner__icon\"><mat-icon svgIcon=\"gio:info\"></mat-icon></div>\n    <div>\n      <div class=\"banner__title\" [innerHTML]=\"props.bannerTitle\"></div>\n      <div class=\"banner__text\" [innerHTML]=\"props.bannerText\"></div>\n    </div>\n  </div>\n  <ng-container #fieldComponent></ng-container>\n</div>\n", styles: ["::ng-deep gio-banner-wrapper ul{padding-inline-start:16px}.wrapper{padding:8px 0}.banner{display:flex;flex-direction:row;align-items:flex-start;padding:8px;border-radius:8px;margin-bottom:8px;background:#e7e8ef;gap:8px}.banner__icon{padding-top:2px}.banner__icon mat-icon{width:16px;height:16px;color:#6c59bd}.banner__title{font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.banner__text{font:400 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;color:#606274}\n"] }]
+        }] });
 
-    <ng-template #matSuffix>
-      <span style="cursor: pointer" (click)="addonEyeClick($event)">
-        <mat-icon [svgIcon]="hide ? 'gio:eye-empty' : 'gio:eye-off'"></mat-icon>
-      </span>
-    </ng-template>
-  `,
-                }]
-        }], propDecorators: { matSuffix: [{
-                type: ViewChild,
-                args: ['matSuffix', { static: true }]
-            }] } });
-function passwordEyeExtension(field) {
-    if (!field.props || (field.wrappers && field.wrappers.indexOf('gio-password-eye') !== -1)) {
+function bannerExtension(field) {
+    if (!field.props || (field.wrappers && field.wrappers.indexOf('gio-with-banner') !== -1)) {
         return;
     }
-    if (field.props.type === 'password') {
-        field.wrappers = [...(field.wrappers || []), 'gio-password-eye'];
+    if (field.props.bannerTitle || field.props.bannerText) {
+        // WARNING: 'gio-with-banner' must be placed before field wrappers in order to put banner before mat-form-field if exists
+        field.wrappers = ['gio-with-banner', ...(field.wrappers || [])];
     }
 }
 
 /*
- * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ * Copyright (C) 2023 The Gravitee team (http://gravitee.io)
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -3664,148 +3918,35 @@ function passwordEyeExtension(field) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class GioFormJsonSchemaModule {
-}
-GioFormJsonSchemaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormJsonSchemaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GioFormJsonSchemaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormJsonSchemaModule, declarations: [GioFormJsonSchemaComponent,
-        GioFjsNullTypeComponent,
-        GioFjsObjectTypeComponent,
-        GioFjsMultiSchemaTypeComponent,
-        GioFjsArrayTypeComponent,
-        GioFjsToggleTypeComponent,
-        GioFjsHeadersTypeComponent,
-        GioFormFieldWrapperComponent,
-        GioPasswordEyeWrapperComponent], imports: [CommonModule,
-        A11yModule,
-        ReactiveFormsModule, i1$4.FormlyModule, FormlyMaterialModule,
-        GioIconsModule,
-        GioFormSlideToggleModule,
-        GioFormHeadersModule,
-        MatSlideToggleModule,
-        MatButtonModule], exports: [GioFormJsonSchemaComponent, FormlyModule] });
-GioFormJsonSchemaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormJsonSchemaModule, providers: [GioFormlyJsonSchemaService], imports: [[
-            CommonModule,
-            A11yModule,
-            ReactiveFormsModule,
-            FormlyModule.forRoot({
-                validationMessages: [
-                    { name: 'required', message: 'This field is required' },
-                    { name: 'type', message: typeValidationMessage },
-                    { name: 'minLength', message: minLengthValidationMessage },
-                    { name: 'maxLength', message: maxLengthValidationMessage },
-                    { name: 'min', message: minValidationMessage },
-                    { name: 'max', message: maxValidationMessage },
-                    { name: 'multipleOf', message: multipleOfValidationMessage },
-                    { name: 'exclusiveMinimum', message: exclusiveMinimumValidationMessage },
-                    { name: 'exclusiveMaximum', message: exclusiveMaximumValidationMessage },
-                    { name: 'minItems', message: minItemsValidationMessage },
-                    { name: 'maxItems', message: maxItemsValidationMessage },
-                    { name: 'uniqueItems', message: 'Should NOT have duplicate items' },
-                    { name: 'const', message: constValidationMessage },
-                ],
-                wrappers: [
-                    { name: 'gio-with-banner', component: GioFormFieldWrapperComponent },
-                    { name: 'gio-password-eye', component: GioPasswordEyeWrapperComponent },
-                ],
-                types: [
-                    { name: 'null', component: GioFjsNullTypeComponent, wrappers: ['form-field'] },
-                    { name: 'array', component: GioFjsArrayTypeComponent },
-                    { name: 'object', component: GioFjsObjectTypeComponent },
-                    { name: 'multischema', component: GioFjsMultiSchemaTypeComponent },
-                    {
-                        name: 'toggle',
-                        component: GioFjsToggleTypeComponent,
-                    },
-                    {
-                        name: 'gio-headers-array',
-                        component: GioFjsHeadersTypeComponent,
-                    },
-                ],
-                extensions: [
-                    { name: 'banner', extension: { onPopulate: bannerExtension } },
-                    { name: 'password-eye', extension: { onPopulate: passwordEyeExtension } },
-                ],
-                extras: {
-                    checkExpressionOn: 'changeDetectionCheck',
-                },
-            }),
-            FormlyMaterialModule,
-            GioIconsModule,
-            GioFormSlideToggleModule,
-            GioFormHeadersModule,
-            MatSlideToggleModule,
-            MatButtonModule,
-        ], FormlyModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormJsonSchemaModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        GioFormJsonSchemaComponent,
-                        GioFjsNullTypeComponent,
-                        GioFjsObjectTypeComponent,
-                        GioFjsMultiSchemaTypeComponent,
-                        GioFjsArrayTypeComponent,
-                        GioFjsToggleTypeComponent,
-                        GioFjsHeadersTypeComponent,
-                        GioFormFieldWrapperComponent,
-                        GioPasswordEyeWrapperComponent,
-                    ],
-                    imports: [
-                        CommonModule,
-                        A11yModule,
-                        ReactiveFormsModule,
-                        FormlyModule.forRoot({
-                            validationMessages: [
-                                { name: 'required', message: 'This field is required' },
-                                { name: 'type', message: typeValidationMessage },
-                                { name: 'minLength', message: minLengthValidationMessage },
-                                { name: 'maxLength', message: maxLengthValidationMessage },
-                                { name: 'min', message: minValidationMessage },
-                                { name: 'max', message: maxValidationMessage },
-                                { name: 'multipleOf', message: multipleOfValidationMessage },
-                                { name: 'exclusiveMinimum', message: exclusiveMinimumValidationMessage },
-                                { name: 'exclusiveMaximum', message: exclusiveMaximumValidationMessage },
-                                { name: 'minItems', message: minItemsValidationMessage },
-                                { name: 'maxItems', message: maxItemsValidationMessage },
-                                { name: 'uniqueItems', message: 'Should NOT have duplicate items' },
-                                { name: 'const', message: constValidationMessage },
-                            ],
-                            wrappers: [
-                                { name: 'gio-with-banner', component: GioFormFieldWrapperComponent },
-                                { name: 'gio-password-eye', component: GioPasswordEyeWrapperComponent },
-                            ],
-                            types: [
-                                { name: 'null', component: GioFjsNullTypeComponent, wrappers: ['form-field'] },
-                                { name: 'array', component: GioFjsArrayTypeComponent },
-                                { name: 'object', component: GioFjsObjectTypeComponent },
-                                { name: 'multischema', component: GioFjsMultiSchemaTypeComponent },
-                                {
-                                    name: 'toggle',
-                                    component: GioFjsToggleTypeComponent,
-                                },
-                                {
-                                    name: 'gio-headers-array',
-                                    component: GioFjsHeadersTypeComponent,
-                                },
-                            ],
-                            extensions: [
-                                { name: 'banner', extension: { onPopulate: bannerExtension } },
-                                { name: 'password-eye', extension: { onPopulate: passwordEyeExtension } },
-                            ],
-                            extras: {
-                                checkExpressionOn: 'changeDetectionCheck',
-                            },
-                        }),
-                        FormlyMaterialModule,
-                        GioIconsModule,
-                        GioFormSlideToggleModule,
-                        GioFormHeadersModule,
-                        MatSlideToggleModule,
-                        MatButtonModule,
-                    ],
-                    exports: [GioFormJsonSchemaComponent, FormlyModule],
-                    providers: [GioFormlyJsonSchemaService],
-                }]
+class GioFjsMultiSchemaTypeComponent extends FieldType {
+    ngOnInit() {
+        set(this.field, 'fieldGroup[0].props.appearance', 'fill');
+        set(this.field, 'fieldGroup[0].props.label', 'Select option');
+    }
+}
+GioFjsMultiSchemaTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsMultiSchemaTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+GioFjsMultiSchemaTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFjsMultiSchemaTypeComponent, selector: "gio-fjs-multi-schema-type", usesInheritance: true, ngImport: i0, template: `
+    <div class="wrapper">
+      <div class="wrapper__title" *ngIf="props.label">{{ props.label }}</div>
+      <p *ngIf="props.description">{{ props.description }}</p>
+      <div class="wrapper__error gio-ng-invalid" *ngIf="showError && formControl.errors">
+        <formly-validation-message [field]="field"></formly-validation-message>
+      </div>
+      <formly-field *ngFor="let f of field.fieldGroup" [field]="f"></formly-field>
+    </div>
+  `, isInline: true, styles: [".wrapper__title{font-size:16px;font-weight:500;line-height:24px;font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:4px}.wrapper:empty{display:none}.wrapper__error{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#ec4899}\n"], components: [{ type: i1$4.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: i1$4.FormlyField, selector: "formly-field", inputs: ["field"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsMultiSchemaTypeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gio-fjs-multi-schema-type', template: `
+    <div class="wrapper">
+      <div class="wrapper__title" *ngIf="props.label">{{ props.label }}</div>
+      <p *ngIf="props.description">{{ props.description }}</p>
+      <div class="wrapper__error gio-ng-invalid" *ngIf="showError && formControl.errors">
+        <formly-validation-message [field]="field"></formly-validation-message>
+      </div>
+      <formly-field *ngFor="let f of field.fieldGroup" [field]="f"></formly-field>
+    </div>
+  `, styles: [".wrapper__title{font-size:16px;font-weight:500;line-height:24px;font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:4px}.wrapper:empty{display:none}.wrapper__error{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#ec4899}\n"] }]
         }] });
 
 /*
@@ -3823,9 +3964,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+class GioFjsToggleTypeComponent extends FieldType {
+}
+GioFjsToggleTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsToggleTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+GioFjsToggleTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFjsToggleTypeComponent, selector: "gio-fjs-toggle-type", usesInheritance: true, ngImport: i0, template: `
+    <gio-form-slide-toggle>
+      <gio-form-label>{{ props.label }}</gio-form-label>
+      {{ props.description }}
+      <mat-slide-toggle
+        gioFormSlideToggle
+        [id]="id"
+        [formControl]="formControl"
+        [formlyAttributes]="field"
+        [tabIndex]="props.tabindex"
+      ></mat-slide-toggle>
+    </gio-form-slide-toggle>
+  `, isInline: true, components: [{ type: GioFormSlideToggleComponent, selector: "gio-form-slide-toggle", inputs: ["appearance"] }, { type: GioFormLabelComponent, selector: "gio-form-label" }, { type: i3$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$4.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsToggleTypeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'gio-fjs-toggle-type',
+                    template: `
+    <gio-form-slide-toggle>
+      <gio-form-label>{{ props.label }}</gio-form-label>
+      {{ props.description }}
+      <mat-slide-toggle
+        gioFormSlideToggle
+        [id]="id"
+        [formControl]="formControl"
+        [formlyAttributes]="field"
+        [tabIndex]="props.tabindex"
+      ></mat-slide-toggle>
+    </gio-form-slide-toggle>
+  `,
+                }]
+        }] });
 
 /*
- * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ * Copyright (C) 2023 The Gravitee team (http://gravitee.io)
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -3839,83 +4015,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class GioBaseFormFocusInvalidDirective {
-    constructor(hostElement, formGroupDirective) {
-        this.hostElement = hostElement;
-        this.formGroupDirective = formGroupDirective;
-    }
-    focusOnFirstInvalid() {
-        const selector = '.ng-invalid[formControlName],input.ng-invalid,mat-select.ng-invalid,textarea.ng-invalid,.gio-ng-invalid';
-        try {
-            // Mark all controls as touched to display errors
-            if (this.formGroupDirective) {
-                this.formGroupDirective.control.markAllAsTouched();
-                this.formGroupDirective.control.updateValueAndValidity();
-            }
-            const parentForm = this.hostElement.nativeElement.closest('form');
-            const invalidFieldElements = parentForm?.querySelectorAll(selector);
-            const invalidControl = this.getFirstInvalidControl(invalidFieldElements);
-            if (invalidControl) {
-                invalidControl.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                invalidControl.focus({ preventScroll: true });
-            }
-        }
-        catch (error) {
-            // Best effort. If the focus doesn't work it's not very important
-            // 🧪 Useful to avoid som error in tests
-        }
-    }
-    getFirstInvalidControl(invalidFieldElements, index = 0) {
-        let invalidControl = invalidFieldElements?.item(index);
-        const hasIgnoreAttribute = invalidControl?.attributes?.getNamedItem(GIO_FORM_FOCUS_INVALID_IGNORE_SELECTOR);
-        if (hasIgnoreAttribute) {
-            invalidControl = this.getFirstInvalidControl(invalidFieldElements, index + 1);
-        }
-        return invalidControl;
-    }
-}
-GioBaseFormFocusInvalidDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioBaseFormFocusInvalidDirective, deps: [{ token: i0.ElementRef }, { token: i7.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-GioBaseFormFocusInvalidDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GioBaseFormFocusInvalidDirective, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioBaseFormFocusInvalidDirective, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i7.FormGroupDirective, decorators: [{
-                    type: Optional
-                }] }]; } });
-class GioFormFocusInvalidFormDirective extends GioBaseFormFocusInvalidDirective {
-    onFormSubmit() {
-        this.focusOnFirstInvalid();
+class GioFjsHeadersTypeComponent extends FieldType {
+    constructor() {
+        super(...arguments);
+        this.defaultOptions = {
+            props: {
+                outputConfig: {
+                    keyName: 'name',
+                    valueName: 'value',
+                },
+            },
+        };
+        this.collapse = false;
     }
-}
-GioFormFocusInvalidFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormFocusInvalidFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-GioFormFocusInvalidFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GioFormFocusInvalidFormDirective, selector: "form[gioFormFocusInvalid]", host: { listeners: { "submit": "onFormSubmit()" } }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormFocusInvalidFormDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'form[gioFormFocusInvalid]',
-                }]
-        }], propDecorators: { onFormSubmit: [{
-                type: HostListener,
-                args: ['submit']
-            }] } });
-class GioButtonFocusInvalidButtonDirective extends GioBaseFormFocusInvalidDirective {
-    onClick() {
-        this.focusOnFirstInvalid();
+    get map() {
+        return (headers) => [...(headers ?? [])].map(header => {
+            return {
+                [this.props.outputConfig.keyName]: header.key,
+                [this.props.outputConfig.valueName]: header.value,
+            };
+        });
     }
 }
-GioButtonFocusInvalidButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioButtonFocusInvalidButtonDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-GioButtonFocusInvalidButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GioButtonFocusInvalidButtonDirective, selector: "button[gioFormFocusInvalid]", host: { listeners: { "click": "onClick()" } }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioButtonFocusInvalidButtonDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'button[gioFormFocusInvalid]',
-                }]
-        }], propDecorators: { onClick: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
+GioFjsHeadersTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsHeadersTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+GioFjsHeadersTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFjsHeadersTypeComponent, selector: "gio-fjs-headers-type", usesInheritance: true, ngImport: i0, template: `
+    <div class="wrapper">
+      <div class="wrapper__header">
+        <div class="wrapper__header__text">
+          <div class="wrapper__header__text__title" *ngIf="to.label">{{ to.label }}</div>
+          <p *ngIf="to.description">{{ to.description }}</p>
+        </div>
+        <div class="wrapper__header__collapse">
+          <button type="button" mat-icon-button aria-label="Collapse" (click)="collapse = !collapse">
+            <mat-icon [class.collapse-open]="collapse" [class.collapse-close]="!collapse" svgIcon="gio:nav-arrow-down"></mat-icon>
+          </button>
+        </div>
+      </div>
+      <div class="wrapper__error" *ngIf="showError && formControl.errors">
+        <formly-validation-message [field]="field"></formly-validation-message>
+      </div>
+      <div *ngIf="!collapse" class="wrapper__rows" [class.collapse-open]="collapse" [class.collapse-close]="!collapse">
+        <gio-form-headers [adaptOutputFn]="map" [formControl]="formControl"></gio-form-headers>
+      </div>
+    </div>
+  `, isInline: true, styles: [".wrapper{display:flex;flex-direction:column;padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper__header{display:flex}.wrapper__header__text{flex:1 1 auto}.wrapper__header__text__title{font:600 16px/24px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:8px}.wrapper__header__collapse{flex:0 0 auto}.wrapper__header__collapse .collapse-open{transform:rotate(180deg);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__header__collapse .collapse-close{transform:rotate(0);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__error{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#ec4899}\n"], components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1$4.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: GioFormHeadersComponent, selector: "gio-form-headers", inputs: ["adaptOutputFn"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsHeadersTypeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gio-fjs-headers-type', template: `
+    <div class="wrapper">
+      <div class="wrapper__header">
+        <div class="wrapper__header__text">
+          <div class="wrapper__header__text__title" *ngIf="to.label">{{ to.label }}</div>
+          <p *ngIf="to.description">{{ to.description }}</p>
+        </div>
+        <div class="wrapper__header__collapse">
+          <button type="button" mat-icon-button aria-label="Collapse" (click)="collapse = !collapse">
+            <mat-icon [class.collapse-open]="collapse" [class.collapse-close]="!collapse" svgIcon="gio:nav-arrow-down"></mat-icon>
+          </button>
+        </div>
+      </div>
+      <div class="wrapper__error" *ngIf="showError && formControl.errors">
+        <formly-validation-message [field]="field"></formly-validation-message>
+      </div>
+      <div *ngIf="!collapse" class="wrapper__rows" [class.collapse-open]="collapse" [class.collapse-close]="!collapse">
+        <gio-form-headers [adaptOutputFn]="map" [formControl]="formControl"></gio-form-headers>
+      </div>
+    </div>
+  `, styles: [".wrapper{display:flex;flex-direction:column;padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper__header{display:flex}.wrapper__header__text{flex:1 1 auto}.wrapper__header__text__title{font:600 16px/24px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:8px}.wrapper__header__collapse{flex:0 0 auto}.wrapper__header__collapse .collapse-open{transform:rotate(180deg);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__header__collapse .collapse-close{transform:rotate(0);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__error{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#ec4899}\n"] }]
+        }] });
 
 /*
- * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ * Copyright (C) 2023 The Gravitee team (http://gravitee.io)
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -3929,35 +4099,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class GioFormFocusInvalidModule {
+class GioPasswordEyeWrapperComponent extends FieldWrapper {
+    constructor() {
+        super(...arguments);
+        this.hide = true;
+    }
+    ngAfterViewInit() {
+        if (this.matSuffix) {
+            this.props.suffix = this.matSuffix;
+        }
+    }
+    addonEyeClick($event) {
+        $event.stopPropagation();
+        this.hide = !this.hide;
+        this.props.type = this.hide ? 'password' : 'text';
+    }
+}
+GioPasswordEyeWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioPasswordEyeWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+GioPasswordEyeWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioPasswordEyeWrapperComponent, selector: "gio-password-eye-wrapper", viewQueries: [{ propertyName: "matSuffix", first: true, predicate: ["matSuffix"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    <ng-container #fieldComponent></ng-container>
+
+    <ng-template #matSuffix>
+      <span style="cursor: pointer" (click)="addonEyeClick($event)">
+        <mat-icon [svgIcon]="hide ? 'gio:eye-empty' : 'gio:eye-off'"></mat-icon>
+      </span>
+    </ng-template>
+  `, isInline: true, components: [{ type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioPasswordEyeWrapperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'gio-password-eye-wrapper',
+                    template: `
+    <ng-container #fieldComponent></ng-container>
+
+    <ng-template #matSuffix>
+      <span style="cursor: pointer" (click)="addonEyeClick($event)">
+        <mat-icon [svgIcon]="hide ? 'gio:eye-empty' : 'gio:eye-off'"></mat-icon>
+      </span>
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { matSuffix: [{
+                type: ViewChild,
+                args: ['matSuffix', { static: true }]
+            }] } });
+function passwordEyeExtension(field) {
+    if (!field.props || (field.wrappers && field.wrappers.indexOf('gio-password-eye') !== -1)) {
+        return;
+    }
+    if (field.props.type === 'password') {
+        field.wrappers = [...(field.wrappers || []), 'gio-password-eye'];
+    }
 }
-GioFormFocusInvalidModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormFocusInvalidModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GioFormFocusInvalidModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormFocusInvalidModule, declarations: [GioFormFocusInvalidFormDirective, GioButtonFocusInvalidButtonDirective, GioFormFocusInvalidIgnoreDirective], exports: [GioFormFocusInvalidFormDirective, GioButtonFocusInvalidButtonDirective, GioFormFocusInvalidIgnoreDirective] });
-GioFormFocusInvalidModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormFocusInvalidModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormFocusInvalidModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [GioFormFocusInvalidFormDirective, GioButtonFocusInvalidButtonDirective, GioFormFocusInvalidIgnoreDirective],
-                    exports: [GioFormFocusInvalidFormDirective, GioButtonFocusInvalidButtonDirective, GioFormFocusInvalidIgnoreDirective],
-                }]
-        }] });
-
-/*
- * Copyright (C) 2023 The Gravitee team (http://gravitee.io)
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *         http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-const GIO_MONACO_EDITOR_CONFIG = new InjectionToken('gio-monaco-editor-config');
 
 /*
  * Copyright (C) 2023 The Gravitee team (http://gravitee.io)
@@ -3974,57 +4167,45 @@ const GIO_MONACO_EDITOR_CONFIG = new InjectionToken('gio-monaco-editor-config');
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class GioMonacoEditorService {
-    constructor() {
-        this.loaded$ = new ReplaySubject(1);
-        this.loaded = false;
-    }
-    loadEditor() {
-        if (this.loaded) {
-            // Already loaded, do nothing.
-            return Promise.resolve();
-        }
-        this.loaded = true;
-        return new Promise(resolve => {
-            // Monaco is already loaded
-            if (typeof window.monaco === 'object') {
-                resolve();
-                return;
-            }
-            const onGotAmdLoader = () => {
-                // Load Monaco
-                window.require.config({ paths: { vs: 'assets/monaco-editor/min/vs' } });
-                window.require(['vs/editor/editor.main'], () => {
-                    resolve();
-                });
-            };
-            // Load AMD loader if necessary
-            if (!window.require) {
-                const loaderScript = document.createElement('script');
-                loaderScript.type = 'text/javascript';
-                loaderScript.src = 'assets/monaco-editor/min/vs/loader.js';
-                loaderScript.addEventListener('load', onGotAmdLoader);
-                document.body.appendChild(loaderScript);
-            }
-            else {
-                onGotAmdLoader();
-            }
-        }).then(() => {
-            this.loaded$.next({ monaco: window.monaco });
-        });
+class GioFjsCodeEditorTypeComponent extends FieldType$1 {
+    ngOnInit() {
+        this.languageConfig = undefined;
     }
 }
-GioMonacoEditorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioMonacoEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-GioMonacoEditorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioMonacoEditorService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioMonacoEditorService, decorators: [{
-            type: Injectable,
+GioFjsCodeEditorTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsCodeEditorTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+GioFjsCodeEditorTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFjsCodeEditorTypeComponent, selector: "gio-fjs-code-editor-type", usesInheritance: true, ngImport: i0, template: `
+    <gio-monaco-editor
+      gioMonacoEditorFormField
+      ngDefaultControl
+      [formControl]="formControl"
+      [languageConfig]="languageConfig"
+    ></gio-monaco-editor>
+  `, isInline: true, styles: ["gio-monaco-editor{min-height:38px}\n"], components: [{ type: GioMonacoEditorComponent, selector: "gio-monaco-editor", inputs: ["languageConfig", "options"] }], directives: [{ type: GioMonacoEditorFormFieldDirective, selector: "[gioMonacoEditorFormField]", inputs: ["placeholder", "required", "disabled"] }, { type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsCodeEditorTypeComponent, decorators: [{
+            type: Component,
             args: [{
-                    providedIn: 'root',
+                    selector: 'gio-fjs-code-editor-type',
+                    template: `
+    <gio-monaco-editor
+      gioMonacoEditorFormField
+      ngDefaultControl
+      [formControl]="formControl"
+      [languageConfig]="languageConfig"
+    ></gio-monaco-editor>
+  `,
+                    styles: [
+                        `
+      gio-monaco-editor {
+        min-height: 38px;
+      }
+    `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });
 
 /*
- * Copyright (C) 2023 The Gravitee team (http://gravitee.io)
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -4038,56 +4219,167 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class GioLanguageJsonService {
-    constructor(codeEditorService) {
-        this.unsubscribe$ = new Subject();
-        codeEditorService.loaded$.pipe(takeUntil(this.unsubscribe$)).subscribe(event => {
-            this.setup(event.monaco);
-        });
-    }
-    ngOnDestroy() {
-        this.unsubscribe$.next();
-        this.unsubscribe$.complete();
-    }
-    setup(monaco) {
-        if (!monaco) {
-            throw new Error('Monaco is not loaded');
-        }
-        this.monaco = monaco;
-        const defaults = monaco.languages.json.jsonDefaults;
-        defaults.setDiagnosticsOptions({
-            validate: true,
-            allowComments: true,
-        });
-    }
-    addSchemas(id, definitions = []) {
-        if (!this.monaco) {
-            throw new Error('Monaco is not loaded');
-        }
-        const defaults = this.monaco.languages.json.jsonDefaults;
-        const options = defaults.diagnosticsOptions;
-        let schemas = definitions.map(({ uri, schema }) => ({
-            uri,
-            schema,
-            fileMatch: [id || '*.json'],
-        }));
-        if (options && options.schemas && options.schemas.length > 0) {
-            schemas = [...options.schemas, ...schemas];
-        }
-        defaults.setDiagnosticsOptions({
-            ...options,
-            schemas: schemas,
-        });
-    }
+class GioFormJsonSchemaModule {
 }
-GioLanguageJsonService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioLanguageJsonService, deps: [{ token: GioMonacoEditorService }], target: i0.ɵɵFactoryTarget.Injectable });
-GioLanguageJsonService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioLanguageJsonService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioLanguageJsonService, decorators: [{
-            type: Injectable,
+GioFormJsonSchemaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormJsonSchemaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GioFormJsonSchemaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormJsonSchemaModule, declarations: [GioFormJsonSchemaComponent,
+        GioFjsNullTypeComponent,
+        GioFjsObjectTypeComponent,
+        GioFjsMultiSchemaTypeComponent,
+        GioFjsArrayTypeComponent,
+        GioFjsToggleTypeComponent,
+        GioFjsHeadersTypeComponent,
+        GioFjsCodeEditorTypeComponent,
+        GioBannerWrapperComponent,
+        GioPasswordEyeWrapperComponent], imports: [CommonModule,
+        A11yModule,
+        ReactiveFormsModule, i1$4.FormlyModule, FormlyMaterialModule,
+        MatInputModule,
+        GioIconsModule,
+        GioFormSlideToggleModule,
+        GioFormHeadersModule,
+        GioMonacoEditorModule,
+        MatSlideToggleModule,
+        MatButtonModule], exports: [GioFormJsonSchemaComponent, FormlyModule] });
+GioFormJsonSchemaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormJsonSchemaModule, providers: [GioFormlyJsonSchemaService], imports: [[
+            CommonModule,
+            A11yModule,
+            ReactiveFormsModule,
+            FormlyModule.forRoot({
+                validationMessages: [
+                    { name: 'required', message: 'This field is required' },
+                    { name: 'type', message: typeValidationMessage },
+                    { name: 'minLength', message: minLengthValidationMessage },
+                    { name: 'maxLength', message: maxLengthValidationMessage },
+                    { name: 'min', message: minValidationMessage },
+                    { name: 'max', message: maxValidationMessage },
+                    { name: 'multipleOf', message: multipleOfValidationMessage },
+                    { name: 'exclusiveMinimum', message: exclusiveMinimumValidationMessage },
+                    { name: 'exclusiveMaximum', message: exclusiveMaximumValidationMessage },
+                    { name: 'minItems', message: minItemsValidationMessage },
+                    { name: 'maxItems', message: maxItemsValidationMessage },
+                    { name: 'uniqueItems', message: 'Should NOT have duplicate items' },
+                    { name: 'const', message: constValidationMessage },
+                ],
+                wrappers: [
+                    { name: 'gio-with-banner', component: GioBannerWrapperComponent },
+                    { name: 'gio-password-eye', component: GioPasswordEyeWrapperComponent },
+                ],
+                types: [
+                    { name: 'null', component: GioFjsNullTypeComponent, wrappers: ['form-field'] },
+                    { name: 'array', component: GioFjsArrayTypeComponent },
+                    { name: 'object', component: GioFjsObjectTypeComponent },
+                    { name: 'multischema', component: GioFjsMultiSchemaTypeComponent },
+                    {
+                        name: 'toggle',
+                        component: GioFjsToggleTypeComponent,
+                    },
+                    {
+                        name: 'gio-code-editor',
+                        component: GioFjsCodeEditorTypeComponent,
+                        wrappers: ['form-field'],
+                    },
+                    {
+                        name: 'gio-headers-array',
+                        component: GioFjsHeadersTypeComponent,
+                    },
+                ],
+                extensions: [
+                    { name: 'banner', extension: { onPopulate: bannerExtension } },
+                    { name: 'password-eye', extension: { onPopulate: passwordEyeExtension } },
+                ],
+                extras: {
+                    checkExpressionOn: 'changeDetectionCheck',
+                },
+            }),
+            FormlyMaterialModule,
+            MatInputModule,
+            GioIconsModule,
+            GioFormSlideToggleModule,
+            GioFormHeadersModule,
+            GioMonacoEditorModule,
+            MatSlideToggleModule,
+            MatButtonModule,
+        ], FormlyModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormJsonSchemaModule, decorators: [{
+            type: NgModule,
             args: [{
-                    providedIn: 'root',
+                    declarations: [
+                        GioFormJsonSchemaComponent,
+                        GioFjsNullTypeComponent,
+                        GioFjsObjectTypeComponent,
+                        GioFjsMultiSchemaTypeComponent,
+                        GioFjsArrayTypeComponent,
+                        GioFjsToggleTypeComponent,
+                        GioFjsHeadersTypeComponent,
+                        GioFjsCodeEditorTypeComponent,
+                        GioBannerWrapperComponent,
+                        GioPasswordEyeWrapperComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        A11yModule,
+                        ReactiveFormsModule,
+                        FormlyModule.forRoot({
+                            validationMessages: [
+                                { name: 'required', message: 'This field is required' },
+                                { name: 'type', message: typeValidationMessage },
+                                { name: 'minLength', message: minLengthValidationMessage },
+                                { name: 'maxLength', message: maxLengthValidationMessage },
+                                { name: 'min', message: minValidationMessage },
+                                { name: 'max', message: maxValidationMessage },
+                                { name: 'multipleOf', message: multipleOfValidationMessage },
+                                { name: 'exclusiveMinimum', message: exclusiveMinimumValidationMessage },
+                                { name: 'exclusiveMaximum', message: exclusiveMaximumValidationMessage },
+                                { name: 'minItems', message: minItemsValidationMessage },
+                                { name: 'maxItems', message: maxItemsValidationMessage },
+                                { name: 'uniqueItems', message: 'Should NOT have duplicate items' },
+                                { name: 'const', message: constValidationMessage },
+                            ],
+                            wrappers: [
+                                { name: 'gio-with-banner', component: GioBannerWrapperComponent },
+                                { name: 'gio-password-eye', component: GioPasswordEyeWrapperComponent },
+                            ],
+                            types: [
+                                { name: 'null', component: GioFjsNullTypeComponent, wrappers: ['form-field'] },
+                                { name: 'array', component: GioFjsArrayTypeComponent },
+                                { name: 'object', component: GioFjsObjectTypeComponent },
+                                { name: 'multischema', component: GioFjsMultiSchemaTypeComponent },
+                                {
+                                    name: 'toggle',
+                                    component: GioFjsToggleTypeComponent,
+                                },
+                                {
+                                    name: 'gio-code-editor',
+                                    component: GioFjsCodeEditorTypeComponent,
+                                    wrappers: ['form-field'],
+                                },
+                                {
+                                    name: 'gio-headers-array',
+                                    component: GioFjsHeadersTypeComponent,
+                                },
+                            ],
+                            extensions: [
+                                { name: 'banner', extension: { onPopulate: bannerExtension } },
+                                { name: 'password-eye', extension: { onPopulate: passwordEyeExtension } },
+                            ],
+                            extras: {
+                                checkExpressionOn: 'changeDetectionCheck',
+                            },
+                        }),
+                        FormlyMaterialModule,
+                        MatInputModule,
+                        GioIconsModule,
+                        GioFormSlideToggleModule,
+                        GioFormHeadersModule,
+                        GioMonacoEditorModule,
+                        MatSlideToggleModule,
+                        MatButtonModule,
+                    ],
+                    exports: [GioFormJsonSchemaComponent, FormlyModule],
+                    providers: [GioFormlyJsonSchemaService],
                 }]
-        }], ctorParameters: function () { return [{ type: GioMonacoEditorService }]; } });
+        }] });
 
 /*
  * Copyright (C) 2023 The Gravitee team (http://gravitee.io)
@@ -4104,151 +4396,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class GioMonacoEditorComponent {
-    constructor(config, monacoEditorService, languageJsonService, hostElement, changeDetectorRef, ngZone) {
-        this.config = config;
-        this.monacoEditorService = monacoEditorService;
-        this.languageJsonService = languageJsonService;
+
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class GioBaseFormFocusInvalidDirective {
+    constructor(hostElement, formGroupDirective) {
         this.hostElement = hostElement;
-        this.changeDetectorRef = changeDetectorRef;
-        this.ngZone = ngZone;
-        this.options = {};
-        this.id = uniqueId('gio-monaco-editor-');
-        this.loading = true;
-        this.defaultOptions = {
-            contextmenu: false,
-            minimap: {
-                enabled: true,
-            },
-            automaticLayout: true,
-            scrollBeyondLastLine: false,
-        };
-        this.value = '';
-        this.readOnly = false;
-        this._onChange = () => ({});
-        this._onTouched = () => ({});
-        this.unsubscribe$ = new Subject();
-        this.monacoEditorService.loadEditor();
-    }
-    ngAfterViewInit() {
-        // Wait until monaco editor is available
-        this.monacoEditorService.loaded$.pipe(takeUntil(this.unsubscribe$)).subscribe(({ monaco }) => {
-            this.setupEditor(monaco);
-            this.loading = false;
-            this.changeDetectorRef.detectChanges();
-        });
+        this.formGroupDirective = formGroupDirective;
     }
-    ngOnDestroy() {
-        if (this.standaloneCodeEditor) {
-            this.standaloneCodeEditor.dispose();
-            this.standaloneCodeEditor = undefined;
+    focusOnFirstInvalid() {
+        const selector = '.ng-invalid[formControlName],input.ng-invalid,mat-select.ng-invalid,textarea.ng-invalid,.gio-ng-invalid';
+        try {
+            // Mark all controls as touched to display errors
+            if (this.formGroupDirective) {
+                this.formGroupDirective.control.markAllAsTouched();
+                this.formGroupDirective.control.updateValueAndValidity();
+            }
+            const parentForm = this.hostElement.nativeElement.closest('form');
+            const invalidFieldElements = parentForm?.querySelectorAll(selector);
+            const invalidControl = this.getFirstInvalidControl(invalidFieldElements);
+            if (invalidControl) {
+                invalidControl.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                invalidControl.focus({ preventScroll: true });
+            }
         }
-        if (this.textModel) {
-            this.textModel.dispose();
-            this.textModel = undefined;
+        catch (error) {
+            // Best effort. If the focus doesn't work it's not very important
+            // 🧪 Useful to avoid som error in tests
         }
-        this.unsubscribe$.next();
-        this.unsubscribe$.complete();
     }
-    // From ControlValueAccessor interface
-    writeValue(_value) {
-        if (_value) {
-            this.value = _value;
-        }
-        if (this.textModel) {
-            this.textModel.setValue(this.value);
+    getFirstInvalidControl(invalidFieldElements, index = 0) {
+        let invalidControl = invalidFieldElements?.item(index);
+        const hasIgnoreAttribute = invalidControl?.attributes?.getNamedItem(GIO_FORM_FOCUS_INVALID_IGNORE_SELECTOR);
+        if (hasIgnoreAttribute) {
+            invalidControl = this.getFirstInvalidControl(invalidFieldElements, index + 1);
         }
+        return invalidControl;
     }
-    // From ControlValueAccessor interface
-    registerOnChange(fn) {
-        this._onChange = fn;
-    }
-    // From ControlValueAccessor interface
-    registerOnTouched(fn) {
-        this._onTouched = fn;
-    }
-    // From ControlValueAccessor interface
-    setDisabledState(isDisabled) {
-        this.readOnly = isDisabled;
-    }
-    setupEditor(monaco) {
-        if (!this.hostElement) {
-            throw new Error('No editor ref found.');
-        }
-        const domElement = this.hostElement.nativeElement;
-        const settings = {
-            value: this.value,
-            language: this.languageConfig?.language ?? 'text',
-            uri: `code-${uniqueId()}`,
-        };
-        this.ngZone.runOutsideAngular(() => {
-            this.textModel = monaco.editor.createModel(settings.value, settings.language, monaco.Uri.parse(settings.uri));
-        });
-        const options = Object.assign({}, this.defaultOptions, this.options, {
-            readOnly: this.readOnly,
-            theme: this.config.theme ?? 'vs',
-            model: this.textModel,
-        });
-        this.standaloneCodeEditor = monaco.editor.create(domElement, {
-            ...options,
-        });
-        this.textModel?.onDidChangeContent(() => {
-            const newValue = this.textModel?.getValue();
-            this.ngZone.run(() => {
-                newValue && this._onChange(newValue);
-                this._onTouched();
-            });
-        });
-        this.standaloneCodeEditor?.onDidBlurEditorWidget(() => {
-            this.ngZone.run(() => {
-                this._onTouched();
-            });
-        });
-        this.setupLanguage(settings.uri, this.languageConfig);
+}
+GioBaseFormFocusInvalidDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioBaseFormFocusInvalidDirective, deps: [{ token: i0.ElementRef }, { token: i7.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+GioBaseFormFocusInvalidDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GioBaseFormFocusInvalidDirective, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioBaseFormFocusInvalidDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i7.FormGroupDirective, decorators: [{
+                    type: Optional
+                }] }]; } });
+class GioFormFocusInvalidFormDirective extends GioBaseFormFocusInvalidDirective {
+    onFormSubmit() {
+        this.focusOnFirstInvalid();
     }
-    setupLanguage(uri, languageConfig) {
-        if (!languageConfig) {
-            return;
-        }
-        const { language } = languageConfig;
-        if (language) {
-            const lang = language.toLowerCase();
-            switch (lang) {
-                case 'json':
-                    if (languageConfig.schemas) {
-                        this.languageJsonService.addSchemas(uri, languageConfig.schemas);
-                    }
-                    break;
-                default:
-                    break;
-            }
-        }
+}
+GioFormFocusInvalidFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormFocusInvalidFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+GioFormFocusInvalidFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GioFormFocusInvalidFormDirective, selector: "form[gioFormFocusInvalid]", host: { listeners: { "submit": "onFormSubmit()" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormFocusInvalidFormDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'form[gioFormFocusInvalid]',
+                }]
+        }], propDecorators: { onFormSubmit: [{
+                type: HostListener,
+                args: ['submit']
+            }] } });
+class GioButtonFocusInvalidButtonDirective extends GioBaseFormFocusInvalidDirective {
+    onClick() {
+        this.focusOnFirstInvalid();
     }
 }
-GioMonacoEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioMonacoEditorComponent, deps: [{ token: GIO_MONACO_EDITOR_CONFIG }, { token: GioMonacoEditorService }, { token: GioLanguageJsonService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-GioMonacoEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioMonacoEditorComponent, selector: "gio-monaco-editor", inputs: { languageConfig: "languageConfig", options: "options" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => GioMonacoEditorComponent),
-            multi: true,
-        },
-    ], ngImport: i0, template: ` <div *ngIf="loading">Loading...</div>`, isInline: true, styles: [":host{display:block;height:100%;min-height:150px}\n"], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioMonacoEditorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gio-monaco-editor', template: ` <div *ngIf="loading">Loading...</div>`, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => GioMonacoEditorComponent),
-                            multi: true,
-                        },
-                    ], styles: [":host{display:block;height:100%;min-height:150px}\n"] }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [GIO_MONACO_EDITOR_CONFIG]
-                }] }, { type: GioMonacoEditorService }, { type: GioLanguageJsonService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { languageConfig: [{
-                type: Input
-            }], options: [{
-                type: Input
+GioButtonFocusInvalidButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioButtonFocusInvalidButtonDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+GioButtonFocusInvalidButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GioButtonFocusInvalidButtonDirective, selector: "button[gioFormFocusInvalid]", host: { listeners: { "click": "onClick()" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioButtonFocusInvalidButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[gioFormFocusInvalid]',
+                }]
+        }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click']
             }] } });
 
 /*
@@ -4266,39 +4502,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class GioMonacoEditorModule {
-    static forRoot(config) {
-        return {
-            ngModule: GioMonacoEditorModule,
-            providers: [
-                {
-                    provide: GIO_MONACO_EDITOR_CONFIG,
-                    useValue: config,
-                },
-            ],
-        };
-    }
+class GioFormFocusInvalidModule {
 }
-GioMonacoEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioMonacoEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GioMonacoEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioMonacoEditorModule, declarations: [GioMonacoEditorComponent], imports: [CommonModule, HttpClientModule, ReactiveFormsModule], exports: [GioMonacoEditorComponent] });
-GioMonacoEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioMonacoEditorModule, providers: [
-        {
-            provide: GIO_MONACO_EDITOR_CONFIG,
-            useValue: {},
-        },
-    ], imports: [[CommonModule, HttpClientModule, ReactiveFormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioMonacoEditorModule, decorators: [{
+GioFormFocusInvalidModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormFocusInvalidModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GioFormFocusInvalidModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormFocusInvalidModule, declarations: [GioFormFocusInvalidFormDirective, GioButtonFocusInvalidButtonDirective, GioFormFocusInvalidIgnoreDirective], exports: [GioFormFocusInvalidFormDirective, GioButtonFocusInvalidButtonDirective, GioFormFocusInvalidIgnoreDirective] });
+GioFormFocusInvalidModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormFocusInvalidModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormFocusInvalidModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, HttpClientModule, ReactiveFormsModule],
-                    declarations: [GioMonacoEditorComponent],
-                    exports: [GioMonacoEditorComponent],
-                    providers: [
-                        {
-                            provide: GIO_MONACO_EDITOR_CONFIG,
-                            useValue: {},
-                        },
-                    ],
+                    declarations: [GioFormFocusInvalidFormDirective, GioButtonFocusInvalidButtonDirective, GioFormFocusInvalidIgnoreDirective],
+                    exports: [GioFormFocusInvalidFormDirective, GioButtonFocusInvalidButtonDirective, GioFormFocusInvalidIgnoreDirective],
                 }]
         }] });
 
@@ -4331,25 +4544,12 @@ class GioMonacoEditorTestingComponent extends GioMonacoEditorComponent {
     }
 }
 GioMonacoEditorTestingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioMonacoEditorTestingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-GioMonacoEditorTestingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioMonacoEditorTestingComponent, selector: "gio-monaco-editor", providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => GioMonacoEditorTestingComponent),
-            multi: true,
-        },
-    ], usesInheritance: true, ngImport: i0, template: '<input type="text" [value]="getValue" (input)="changeValue($any($event).target?.value)" />', isInline: true });
+GioMonacoEditorTestingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioMonacoEditorTestingComponent, selector: "gio-monaco-editor", usesInheritance: true, ngImport: i0, template: '<input type="text" [value]="getValue" (input)="changeValue($any($event).target?.value)" />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioMonacoEditorTestingComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'gio-monaco-editor',
                     template: '<input type="text" [value]="getValue" (input)="changeValue($any($event).target?.value)" />',
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => GioMonacoEditorTestingComponent),
-                            multi: true,
-                        },
-                    ],
                 }]
         }] });
 
@@ -4500,5 +4700,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { GIO_FORM_FOCUS_INVALID_IGNORE_SELECTOR, GioAvatarComponent, GioAvatarModule, GioBannerActionDirective, GioBannerBodyDirective, GioBannerComponent, GioBannerErrorComponent, GioBannerInfoComponent, GioBannerModule, GioBannerSuccessComponent, GioBannerWarningComponent, GioBaseFormFocusInvalidDirective, GioBreadcrumbComponent, GioBreadcrumbItemDirective, GioBreadcrumbModule, GioButtonFocusInvalidButtonDirective, GioConfirmAndValidateDialogComponent, GioConfirmAndValidateDialogHarness, GioConfirmAndValidateDialogModule, GioConfirmDialogComponent, GioConfirmDialogHarness, GioConfirmDialogModule, GioFormFilePickerAddButtonComponent, GioFormFilePickerComponent, GioFormFilePickerEmptyComponent, GioFormFilePickerInputHarness, GioFormFilePickerLabelComponent, GioFormFilePickerModule, GioFormFocusInvalidFormDirective, GioFormFocusInvalidIgnoreDirective, GioFormFocusInvalidModule, GioFormHeadersComponent, GioFormHeadersHarness, GioFormHeadersModule, GioFormJsonSchemaComponent, GioFormJsonSchemaModule, GioFormLabelComponent, GioFormPrefixDirective, GioFormSlideToggleComponent, GioFormSlideToggleDirective, GioFormSlideToggleModule, GioFormTagsInputComponent, GioFormTagsInputHarness, GioFormTagsInputModule, GioIconsModule, GioLoaderComponent, GioLoaderModule, GioMatConfigModule, GioMenuComponent, GioMenuFooterComponent, GioMenuHeaderComponent, GioMenuItemComponent, GioMenuListComponent, GioMenuModule, GioMenuSelectorComponent, GioMenuSelectorHarness, GioMenuService, GioMonacoEditorComponent, GioMonacoEditorHarness, GioMonacoEditorModule, GioSaveBarComponent, GioSaveBarHarness, GioSaveBarModule, GioSubmenuComponent, GioSubmenuGroupComponent, GioSubmenuItemComponent, GioSubmenuModule, GioSubmenuTitleDirective, GioTopBarComponent, GioTopBarContentComponent, GioTopBarLinkComponent, GioTopBarLinkModule, GioTopBarMenuComponent, GioTopBarMenuModule, GioTopBarModule, NewFile };
+export { GIO_FORM_FOCUS_INVALID_IGNORE_SELECTOR, GioAvatarComponent, GioAvatarModule, GioBannerActionDirective, GioBannerBodyDirective, GioBannerComponent, GioBannerErrorComponent, GioBannerInfoComponent, GioBannerModule, GioBannerSuccessComponent, GioBannerWarningComponent, GioBaseFormFocusInvalidDirective, GioBreadcrumbComponent, GioBreadcrumbItemDirective, GioBreadcrumbModule, GioButtonFocusInvalidButtonDirective, GioConfirmAndValidateDialogComponent, GioConfirmAndValidateDialogHarness, GioConfirmAndValidateDialogModule, GioConfirmDialogComponent, GioConfirmDialogHarness, GioConfirmDialogModule, GioFormFilePickerAddButtonComponent, GioFormFilePickerComponent, GioFormFilePickerEmptyComponent, GioFormFilePickerInputHarness, GioFormFilePickerLabelComponent, GioFormFilePickerModule, GioFormFocusInvalidFormDirective, GioFormFocusInvalidIgnoreDirective, GioFormFocusInvalidModule, GioFormHeadersComponent, GioFormHeadersHarness, GioFormHeadersModule, GioFormJsonSchemaComponent, GioFormJsonSchemaModule, GioFormLabelComponent, GioFormPrefixDirective, GioFormSlideToggleComponent, GioFormSlideToggleDirective, GioFormSlideToggleModule, GioFormTagsInputComponent, GioFormTagsInputHarness, GioFormTagsInputModule, GioIconsModule, GioLoaderComponent, GioLoaderModule, GioMatConfigModule, GioMenuComponent, GioMenuFooterComponent, GioMenuHeaderComponent, GioMenuItemComponent, GioMenuListComponent, GioMenuModule, GioMenuSelectorComponent, GioMenuSelectorHarness, GioMenuService, GioMonacoEditorComponent, GioMonacoEditorFormFieldDirective, GioMonacoEditorHarness, GioMonacoEditorModule, GioSaveBarComponent, GioSaveBarHarness, GioSaveBarModule, GioSubmenuComponent, GioSubmenuGroupComponent, GioSubmenuItemComponent, GioSubmenuModule, GioSubmenuTitleDirective, GioTopBarComponent, GioTopBarContentComponent, GioTopBarLinkComponent, GioTopBarLinkModule, GioTopBarMenuComponent, GioTopBarMenuModule, GioTopBarModule, NewFile };
 //# sourceMappingURL=gravitee-ui-particles-angular.mjs.map