@gravitee/ui-particles-angular 5.20.1-json-schema-code-editor-7ccffa8 → 5.20.1-sprite-icons-documentation-65888ab

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, uniqueId, set } from 'lodash';
+import { isEmpty, toLower, dropRight, isNil, isArray, remove, isObject, cloneDeep, set, uniqueId } 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 { FieldType as FieldType$1, FormlyMaterialModule } from '@ngx-formly/material';
+import { 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,9 +2861,6 @@ class GioFormlyJsonSchemaService {
                 type: 'password',
             };
         }
-        else if (mapSource.type === 'string' && mapSource.format === 'gio-code-editor') {
-            mappedField.type = 'gio-code-editor';
-        }
         return mappedField;
     }
     bannerMap(mappedField, mapSource) {
@@ -3179,7 +3176,17 @@ 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.
  */
-const GIO_MONACO_EDITOR_CONFIG = new InjectionToken('gio-monaco-editor-config');
+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: ``,
+                }]
+        }] });
 
 /*
  * Copyright (C) 2023 The Gravitee team (http://gravitee.io)
@@ -3196,53 +3203,39 @@ 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 GioFjsObjectTypeComponent extends FieldType {
 }
-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',
-                }]
+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"] }]
         }] });
 
 /*
@@ -3260,57 +3253,118 @@ 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.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,
-        });
+class GioFjsArrayTypeComponent extends FieldArrayType {
+    constructor() {
+        super(...arguments);
+        this.collapse = false;
     }
 }
-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 }]; } });
+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]}".`;
+}
 
 /*
  * Copyright (C) 2023 The Gravitee team (http://gravitee.io)
@@ -3327,294 +3381,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 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();
-    }
-    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;
-            }
-        }
-    }
+class GioFormFieldWrapperComponent extends FieldWrapper {
 }
-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: [{
+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-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
-            }] } });
+            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"] }]
+        }] });
 
-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(' ');
+function bannerExtension(field) {
+    if (!field.props || (field.wrappers && field.wrappers.indexOf('gio-with-banner') !== -1)) {
+        return;
     }
-    onContainerClick(_event) {
-        if (!this.focused) {
-            this.hostGioMonacoEditorComponent.standaloneCodeEditor?.focus();
-        }
+    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 || [])];
     }
 }
-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) 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.
@@ -3628,40 +3415,35 @@ 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 GioFjsMultiSchemaTypeComponent extends FieldType {
+    ngOnInit() {
+        set(this.field, 'fieldGroup[0].props.appearance', 'fill');
+        set(this.field, 'fieldGroup[0].props.label', 'Select option');
     }
 }
-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: {},
-                        },
-                    ],
-                }]
+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"] }]
         }] });
 
 /*
@@ -3679,15 +3461,39 @@ 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 {
+class GioFjsToggleTypeComponent 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: [{
+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-null-type',
-                    template: ``,
+                    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>
+  `,
                 }]
         }] });
 
@@ -3706,65 +3512,31 @@ 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 {
-}
-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 {
+class GioFjsHeadersTypeComponent extends FieldType {
     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,
+            };
+        });
+    }
 }
-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">
+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>
@@ -3776,31 +3548,18 @@ GioFjsArrayTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
           </button>
         </div>
       </div>
-
-      <div class="wrapper__error gio-ng-invalid" *ngIf="showError && formControl.errors">
+      <div class="wrapper__error" *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 *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{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: [{
+  `, 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-array-type', template: `
-    <div class="wrapper" [class.error]="formControl.touched && formControl.invalid">
+            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>
@@ -3812,63 +3571,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
           </button>
         </div>
       </div>
-
-      <div class="wrapper__error gio-ng-invalid" *ngIf="showError && formControl.errors">
+      <div class="wrapper__error" *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 *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{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"] }]
+  `, 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"] }]
         }] });
 
-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)
  *
@@ -3884,27 +3596,61 @@ function typeValidationMessage({ schemaType }) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class GioBannerWrapperComponent extends FieldWrapper {
+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';
+    }
 }
-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: [{
+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-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"] }]
-        }] });
+            args: [{
+                    selector: 'gio-password-eye-wrapper',
+                    template: `
+    <ng-container #fieldComponent></ng-container>
 
-function bannerExtension(field) {
-    if (!field.props || (field.wrappers && field.wrappers.indexOf('gio-with-banner') !== -1)) {
+    <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.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 || [])];
+    if (field.props.type === 'password') {
+        field.wrappers = [...(field.wrappers || []), 'gio-password-eye'];
     }
 }
 
 /*
- * 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.
@@ -3918,35 +3664,148 @@ 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 GioFormJsonSchemaModule {
 }
-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"] }]
+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],
+                }]
         }] });
 
 /*
@@ -3964,44 +3823,9 @@ 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) 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.
@@ -4015,77 +3839,83 @@ 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 {
-    constructor() {
-        super(...arguments);
-        this.defaultOptions = {
-            props: {
-                outputConfig: {
-                    keyName: 'name',
-                    valueName: 'value',
-                },
-            },
-        };
-        this.collapse = false;
+class GioBaseFormFocusInvalidDirective {
+    constructor(hostElement, formGroupDirective) {
+        this.hostElement = hostElement;
+        this.formGroupDirective = formGroupDirective;
     }
-    get map() {
-        return (headers) => [...(headers ?? [])].map(header => {
-            return {
-                [this.props.outputConfig.keyName]: header.key,
-                [this.props.outputConfig.valueName]: header.value,
-            };
-        });
+    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;
     }
 }
-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"] }]
-        }] });
+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();
+    }
+}
+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();
+    }
+}
+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']
+            }] } });
 
 /*
- * 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.
@@ -4099,58 +3929,18 @@ 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';
-    }
-}
-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'];
-    }
+class GioFormFocusInvalidModule {
 }
+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)
@@ -4167,45 +3957,74 @@ function passwordEyeExtension(field) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class GioFjsCodeEditorTypeComponent extends FieldType$1 {
-    ngOnInit() {
-        this.languageConfig = undefined;
+const GIO_MONACO_EDITOR_CONFIG = new InjectionToken('gio-monaco-editor-config');
+
+/*
+ * 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 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 });
+        });
     }
 }
-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,
+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: [{
-                    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,
+                    providedIn: 'root',
                 }]
         }] });
 
 /*
- * 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.
@@ -4219,167 +4038,56 @@ 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 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,
-        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: [{
-                    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],
+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,
+        });
+    }
+}
+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)
@@ -4396,95 +4104,151 @@ 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.
  */
-
-/*
- * 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) {
+class GioMonacoEditorComponent {
+    constructor(config, monacoEditorService, languageJsonService, hostElement, changeDetectorRef, ngZone) {
+        this.config = config;
+        this.monacoEditorService = monacoEditorService;
+        this.languageJsonService = languageJsonService;
         this.hostElement = hostElement;
-        this.formGroupDirective = formGroupDirective;
+        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();
     }
-    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 });
-            }
+    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();
+        });
+    }
+    ngOnDestroy() {
+        if (this.standaloneCodeEditor) {
+            this.standaloneCodeEditor.dispose();
+            this.standaloneCodeEditor = undefined;
         }
-        catch (error) {
-            // Best effort. If the focus doesn't work it's not very important
-            // 🧪 Useful to avoid som error in tests
+        if (this.textModel) {
+            this.textModel.dispose();
+            this.textModel = undefined;
         }
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
     }
-    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);
+    // From ControlValueAccessor interface
+    writeValue(_value) {
+        if (_value) {
+            this.value = _value;
+        }
+        if (this.textModel) {
+            this.textModel.setValue(this.value);
         }
-        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();
+    // From ControlValueAccessor interface
+    registerOnChange(fn) {
+        this._onChange = fn;
     }
-}
-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();
+    // 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);
+    }
+    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;
+            }
+        }
     }
 }
-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']
+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
             }] } });
 
 /*
@@ -4502,16 +4266,39 @@ 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 GioMonacoEditorModule {
+    static forRoot(config) {
+        return {
+            ngModule: GioMonacoEditorModule,
+            providers: [
+                {
+                    provide: GIO_MONACO_EDITOR_CONFIG,
+                    useValue: config,
+                },
+            ],
+        };
+    }
 }
-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: [{
+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: [{
             type: NgModule,
             args: [{
-                    declarations: [GioFormFocusInvalidFormDirective, GioButtonFocusInvalidButtonDirective, GioFormFocusInvalidIgnoreDirective],
-                    exports: [GioFormFocusInvalidFormDirective, GioButtonFocusInvalidButtonDirective, GioFormFocusInvalidIgnoreDirective],
+                    imports: [CommonModule, HttpClientModule, ReactiveFormsModule],
+                    declarations: [GioMonacoEditorComponent],
+                    exports: [GioMonacoEditorComponent],
+                    providers: [
+                        {
+                            provide: GIO_MONACO_EDITOR_CONFIG,
+                            useValue: {},
+                        },
+                    ],
                 }]
         }] });
 
@@ -4544,12 +4331,25 @@ 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", 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", 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 });
 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,
+                        },
+                    ],
                 }]
         }] });
 
@@ -4700,5 +4500,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, GioMonacoEditorFormFieldDirective, 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, 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