@gravitee/ui-particles-angular 5.9.0 → 5.10.0-js-toggle-4785329

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

@@ -1,6 +1,6 @@
 import { trigger, transition, style, animate } from '@angular/animations';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, HostBinding, Input, Output, HostListener, NgModule, Optional, Self, ViewChild, Directive, Inject, forwardRef, ChangeDetectionStrategy, Injectable, ViewEncapsulation, ContentChildren, Host } from '@angular/core';
+import { EventEmitter, Component, HostBinding, Input, Output, HostListener, NgModule, Optional, Self, ViewChild, Directive, Inject, forwardRef, ChangeDetectionStrategy, Injectable, ViewEncapsulation, ContentChildren, Host, ContentChild } from '@angular/core';
 import { timer, Subject, fromEvent, of, BehaviorSubject } from 'rxjs';
 import * as i1 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
@@ -16,7 +16,7 @@ import { MatFormFieldControl, MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS
 import { isEmpty, toLower, dropRight, isNil, isArray, remove, isObject, cloneDeep, set } from 'lodash';
 import { startWith, map, distinctUntilChanged, tap, debounce, takeUntil, delay, filter, switchMap } from 'rxjs/operators';
 import * as i7 from '@angular/forms';
-import { FormsModule, FormArray, FormGroup, FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, FormArray, FormGroup, FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule, NgControl } from '@angular/forms';
 import * as i2$2 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import * as i3 from '@angular/material/chips';
@@ -48,6 +48,8 @@ import * as i1$3 from '@ngx-formly/core/json-schema';
 import * as i1$4 from '@ngx-formly/core';
 import { FieldType, FieldArrayType, FieldWrapper, FormlyModule } from '@ngx-formly/core';
 import { FormlyMaterialModule } from '@ngx-formly/material';
+import * as i3$2 from '@angular/material/slide-toggle';
+import { MatSlideToggle, MatSlideToggleModule } from '@angular/material/slide-toggle';
 
 /*
  * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
@@ -1046,6 +1048,11 @@ class GioFormHeadersComponent {
     }
     // From ControlValueAccessor interface
     registerOnChange(fn) {
+        const adaptOutputFn = this.adaptOutputFn;
+        if (adaptOutputFn) {
+            this._onChange = (headers) => fn(adaptOutputFn(headers));
+            return;
+        }
         this._onChange = fn;
     }
     // From ControlValueAccessor interface
@@ -1132,7 +1139,7 @@ class GioFormHeadersComponent {
     }
 }
 GioFormHeadersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormHeadersComponent, deps: [{ token: i2$2.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-GioFormHeadersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFormHeadersComponent, selector: "gio-form-headers", host: { properties: { "class.disabled": "this.disabled" } }, providers: [
+GioFormHeadersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFormHeadersComponent, selector: "gio-form-headers", inputs: { adaptOutputFn: "adaptOutputFn" }, host: { properties: { "class.disabled": "this.disabled" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => GioFormHeadersComponent),
@@ -1148,7 +1155,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             multi: true,
                         },
                     ], template: "<!--\n\n    Copyright (C) 2015 The Gravitee team (http://gravitee.io)\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n            http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n<table class=\"gio-form-headers__table gio-table-light\" [formGroup]=\"mainForm\">\n  <thead>\n    <tr>\n      <th>KEY</th>\n      <th>VALUE</th>\n    </tr>\n  </thead>\n  <tbody formArrayName=\"headers\">\n    <tr\n      *ngFor=\"let control of headersFormArray.controls; index as headerIndex\"\n      class=\"gio-form-headers__table__header-row\"\n      [formGroupName]=\"headerIndex\"\n    >\n      <td class=\"gio-form-headers__table__header-row__td-key\">\n        <mat-form-field class=\"gio-form-headers__table__header-row__td-key__field\" [floatLabel]=\"'never'\" appearance=\"standard\">\n          <textarea\n            formControlName=\"key\"\n            matInput\n            placeholder=\"Name...\"\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"1\"\n            [matAutocomplete]=\"headerNamesAutocomplete\"\n          ></textarea>\n        </mat-form-field>\n        <mat-autocomplete #headerNamesAutocomplete=\"matAutocomplete\">\n          <mat-option *ngFor=\"let headerName of getFilteredHeaderNames(headerIndex, control.value) | async\" [value]=\"headerName\">{{\n            headerName\n          }}</mat-option>\n        </mat-autocomplete>\n      </td>\n      <td class=\"gio-form-headers__table__header-row__td-value\">\n        <mat-form-field class=\"gio-form-headers__table__header-row__td-value__field\" [floatLabel]=\"'never'\" appearance=\"standard\">\n          <textarea formControlName=\"value\" matInput placeholder=\"Value...\" cdkTextareaAutosize cdkAutosizeMinRows=\"1\"></textarea>\n        </mat-form-field>\n        <button\n          class=\"gio-form-headers__table__header-row__td-value__button\"\n          *ngIf=\"headersFormArray.controls.length - 1 !== headerIndex\"\n          mat-icon-button\n          aria-label=\"Delete\"\n          (click)=\"onDeleteHeader(headerIndex)\"\n        >\n          <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host{display:block;overflow:hidden}.gio-form-headers__table{width:100%}.gio-form-headers__table__header-row__td-key,.gio-form-headers__table__header-row__td-value{position:relative;width:50%}.gio-form-headers__table__header-row__td-key__field,.gio-form-headers__table__header-row__td-value__field{display:flex;overflow:hidden;width:100%;max-height:32px;flex-direction:column;justify-content:center;padding-bottom:0}.gio-form-headers__table__header-row__td-key__field *,.gio-form-headers__table__header-row__td-value__field *{top:0;overflow:hidden;max-height:32px}.gio-form-headers__table__header-row__td-key__field:focus-within,.gio-form-headers__table__header-row__td-value__field:focus-within{z-index:100;height:auto;background-color:#fff}.gio-form-headers__table__header-row__td-key__field:focus-within *,.gio-form-headers__table__header-row__td-value__field:focus-within *{max-height:none}.gio-form-headers__table__header-row__td-key__button,.gio-form-headers__table__header-row__td-value__button{position:absolute;top:3px;right:3px;display:none}.gio-form-headers__table__header-row__td-remove{width:32px;height:32px;padding:0}.gio-form-headers__table__header-row:hover .gio-form-headers__table__header-row__td-value__button{z-index:110;display:block;background-color:#fff;opacity:.9}::ng-deep gio-form-headers .gio-form-headers__table__header-row .mat-form-field-infix{width:inherit}\n"] }]
-        }], ctorParameters: function () { return [{ type: i2$2.FocusMonitor }, { type: i0.ElementRef }]; }, propDecorators: { disabled: [{
+        }], ctorParameters: function () { return [{ type: i2$2.FocusMonitor }, { type: i0.ElementRef }]; }, propDecorators: { adaptOutputFn: [{
+                type: Input
+            }], disabled: [{
                 type: HostBinding,
                 args: ['class.disabled']
             }] } });
@@ -2743,9 +2752,68 @@ 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 GioFormJsonSchemaComponent {
-    constructor(formlyJsonschema, elRef, fm, ngControl) {
+class GioFormlyJsonSchemaService {
+    constructor(formlyJsonschema, builder) {
         this.formlyJsonschema = formlyJsonschema;
+        this.builder = builder;
+    }
+    toFormlyFieldConfig(jsonSchema) {
+        return this.formlyJsonschema.toFieldConfig(jsonSchema, {
+            map: (mappedField, mapSource) => {
+                mappedField = this.uiTypeMap(mappedField, mapSource);
+                mappedField = this.bannerMap(mappedField, mapSource);
+                mappedField = this.toggleMap(mappedField, mapSource);
+                return mappedField;
+            },
+        });
+    }
+    uiTypeMap(mappedField, mapSource) {
+        var _a, _b;
+        mappedField.type = (_b = (_a = mapSource.gioConfig) === null || _a === void 0 ? void 0 : _a.uiType) !== null && _b !== void 0 ? _b : mappedField.type;
+        return mappedField;
+    }
+    bannerMap(mappedField, mapSource) {
+        var _a;
+        mappedField.props = Object.assign(Object.assign({}, mappedField.props), (((_a = mapSource.gioConfig) === null || _a === void 0 ? void 0 : _a.banner) ? getBannerProperties(mapSource.gioConfig.banner) : {}));
+        return mappedField;
+    }
+    toggleMap(mappedField, mapSource) {
+        if (mapSource.type === 'boolean') {
+            mappedField.type = 'toggle';
+        }
+        return mappedField;
+    }
+}
+GioFormlyJsonSchemaService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormlyJsonSchemaService, deps: [{ token: i1$3.FormlyJsonschema }, { token: i1$4.FormlyFormBuilder }], target: i0.ɵɵFactoryTarget.Injectable });
+GioFormlyJsonSchemaService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormlyJsonSchemaService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormlyJsonSchemaService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$3.FormlyJsonschema }, { type: i1$4.FormlyFormBuilder }]; } });
+const getBannerProperties = (banner) => {
+    return {
+        bannerText: banner.text,
+        bannerTitle: 'title' in banner ? banner.title : undefined,
+    };
+};
+
+/*
+ * 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 GioFormJsonSchemaComponent {
+    constructor(gioFormlyJsonSchema, elRef, fm, ngControl) {
+        this.gioFormlyJsonSchema = gioFormlyJsonSchema;
         this.elRef = elRef;
         this.fm = fm;
         this.ngControl = ngControl;
@@ -2772,7 +2840,7 @@ class GioFormJsonSchemaComponent {
     }
     set jsonSchema(jsonSchema) {
         if (isObject(jsonSchema)) {
-            this.fields = [this.toFormlyFieldConfig(jsonSchema)];
+            this.fields = [this.gioFormlyJsonSchema.toFormlyFieldConfig(jsonSchema)];
         }
     }
     ngOnInit() {
@@ -2815,35 +2883,14 @@ class GioFormJsonSchemaComponent {
     setDisabledState(_isDisabled) {
         throw new Error('Method not implemented.');
     }
-    toFormlyFieldConfig(jsonSchema) {
-        return this.formlyJsonschema.toFieldConfig(jsonSchema, {
-            map: (mappedField, mapSource) => {
-                var _a;
-                // Casting fields into our specific type
-                const gioMapSource = mapSource;
-                mappedField.props = Object.assign(Object.assign({}, mappedField.props), (((_a = gioMapSource.gioConfig) === null || _a === void 0 ? void 0 : _a.banner) ? this.getBannerProperties(gioMapSource.gioConfig.banner) : {}));
-                return mappedField;
-            },
-        });
-    }
-    getBannerProperties(banner) {
-        return {
-            bannerText: banner.text,
-            bannerTitle: 'title' in banner ? banner.title : undefined,
-        };
-    }
 }
-GioFormJsonSchemaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormJsonSchemaComponent, deps: [{ token: i1$3.FormlyJsonschema }, { token: i0.ElementRef }, { token: i2$2.FocusMonitor }, { token: i7.NgControl, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-GioFormJsonSchemaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFormJsonSchemaComponent, selector: "gio-form-json-schema", inputs: { jsonSchema: "jsonSchema", options: "options" }, ngImport: i0, template: `<formly-form *ngIf="formGroup" [fields]="fields" [options]="options" [form]="formGroup" [model]="model"></formly-form>`, isInline: true, components: [{ type: i1$4.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+GioFormJsonSchemaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormJsonSchemaComponent, deps: [{ token: GioFormlyJsonSchemaService }, { token: i0.ElementRef }, { token: i2$2.FocusMonitor }, { token: i7.NgControl, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+GioFormJsonSchemaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFormJsonSchemaComponent, selector: "gio-form-json-schema", inputs: { jsonSchema: "jsonSchema", options: "options" }, ngImport: i0, template: `<formly-form *ngIf="formGroup" [fields]="fields" [options]="options" [form]="formGroup" [model]="model"></formly-form>`, isInline: true, styles: ["::ng-deep gio-form-json-schema .mat-form-field.mat-form-field-appearance-outline:not(::ng-deep :has(mat-hint),::ng-deep :has(mat-error)){padding-bottom:0}::ng-deep gio-form-json-schema .mat-form-field.mat-form-field-appearance-outline:not(::ng-deep :has(mat-hint),::ng-deep :has(mat-error)) .mat-form-field-wrapper{padding-bottom:0}::ng-deep gio-form-json-schema .mat-form-field.mat-form-field-appearance-fill:not(::ng-deep :has(mat-hint),::ng-deep :has(mat-error)){padding-bottom:0}::ng-deep gio-form-json-schema .mat-form-field.mat-form-field-appearance-fill:not(::ng-deep :has(mat-hint),::ng-deep :has(mat-error)) .mat-form-field-wrapper{margin-bottom:-1.34375em}\n"], components: [{ type: i1$4.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormJsonSchemaComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'gio-form-json-schema',
-                    template: `<formly-form *ngIf="formGroup" [fields]="fields" [options]="options" [form]="formGroup" [model]="model"></formly-form>`,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
+            args: [{ selector: 'gio-form-json-schema', template: `<formly-form *ngIf="formGroup" [fields]="fields" [options]="options" [form]="formGroup" [model]="model"></formly-form>`, styles: ["::ng-deep gio-form-json-schema .mat-form-field.mat-form-field-appearance-outline:not(::ng-deep :has(mat-hint),::ng-deep :has(mat-error)){padding-bottom:0}::ng-deep gio-form-json-schema .mat-form-field.mat-form-field-appearance-outline:not(::ng-deep :has(mat-hint),::ng-deep :has(mat-error)) .mat-form-field-wrapper{padding-bottom:0}::ng-deep gio-form-json-schema .mat-form-field.mat-form-field-appearance-fill:not(::ng-deep :has(mat-hint),::ng-deep :has(mat-error)){padding-bottom:0}::ng-deep gio-form-json-schema .mat-form-field.mat-form-field-appearance-fill:not(::ng-deep :has(mat-hint),::ng-deep :has(mat-error)) .mat-form-field-wrapper{margin-bottom:-1.34375em}\n"] }]
         }], ctorParameters: function () {
-        return [{ type: i1$3.FormlyJsonschema }, { type: i0.ElementRef }, { type: i2$2.FocusMonitor }, { type: i7.NgControl, decorators: [{
+        return [{ type: GioFormlyJsonSchemaService }, { type: i0.ElementRef }, { type: i2$2.FocusMonitor }, { type: i7.NgControl, decorators: [{
                         type: Host
                     }, {
                         type: Optional
@@ -2854,6 +2901,147 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }] } });
 
+/*
+ * 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 GioFormLabelComponent {
+}
+GioFormLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GioFormLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFormLabelComponent, selector: "gio-form-label", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormLabelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'gio-form-label',
+                    template: `<ng-content></ng-content>`,
+                }]
+        }] });
+class GioFormPrefixDirective {
+}
+GioFormPrefixDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+GioFormPrefixDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GioFormPrefixDirective, selector: "[gioFormPrefix]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormPrefixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gioFormPrefix]',
+                }]
+        }] });
+class GioFormSlideToggleDirective {
+}
+GioFormSlideToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormSlideToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+GioFormSlideToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GioFormSlideToggleDirective, selector: "[gioFormSlideToggle]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormSlideToggleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gioFormSlideToggle]',
+                }]
+        }] });
+
+/*
+ * 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 GioFormSlideToggleComponent {
+    constructor() {
+        this.unsubscribe$ = new Subject();
+        this.appearance = 'outline';
+        this.innerMatSlideToggle = null;
+        this.innerFormControlName = null;
+        this.disabled = false;
+    }
+    ngAfterContentInit() {
+        var _a;
+        let isDisabled$ = undefined;
+        // Check if disabled is delegated to inner FormControlName
+        if (this.innerFormControlName) {
+            isDisabled$ = (_a = this.innerFormControlName.statusChanges) === null || _a === void 0 ? void 0 : _a.pipe(map(() => { var _a; return !!((_a = this.innerFormControlName) === null || _a === void 0 ? void 0 : _a.disabled); }), startWith(!!this.innerFormControlName.disabled));
+        }
+        // If not, check state of inner MatSlideToggle
+        else if (this.innerMatSlideToggle) {
+            isDisabled$ = this.innerMatSlideToggle.change.pipe(map(event => event.source.disabled), startWith(this.innerMatSlideToggle.disabled));
+        }
+        if (isDisabled$) {
+            isDisabled$.pipe(takeUntil(this.unsubscribe$)).subscribe(disabled => {
+                this.disabled = disabled;
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+    }
+}
+GioFormSlideToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormSlideToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GioFormSlideToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFormSlideToggleComponent, selector: "gio-form-slide-toggle", inputs: { appearance: "appearance" }, queries: [{ propertyName: "innerMatSlideToggle", first: true, predicate: MatSlideToggle, descendants: true }, { propertyName: "innerFormControlName", first: true, predicate: NgControl, descendants: true }], ngImport: i0, template: "<!--\n\n    Copyright (C) 2015 The Gravitee team (http://gravitee.io)\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n            http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n<div\n  class=\"form-slide-toggle\"\n  [class.appearance-standard]=\"appearance === 'standard'\"\n  [class.appearance-fill]=\"appearance === 'fill'\"\n  [class.appearance-outline]=\"appearance === 'outline'\"\n>\n  <div class=\"form-slide-toggle__icon\">\n    <ng-content select=\"[gioFormPrefix]\"></ng-content>\n  </div>\n  <div class=\"form-slide-toggle__field\">\n    <div class=\"form-slide-toggle__field__mat-slide-toggle\">\n      <ng-content select=\"[gioFormSlideToggle]\"></ng-content>\n    </div>\n    <div class=\"form-slide-toggle__field__text\" [class.disabled]=\"disabled\">\n      <span class=\"form-slide-toggle__field__text__label-1\">\n        <ng-content select=\"gio-form-label\"></ng-content>\n      </span>\n      <span class=\"form-slide-toggle__field__text__label-2\">\n        <ng-content></ng-content>\n      </span>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:inline-block;padding:4px 0}::ng-deep gio-form-slide-toggle div.form-slide-toggle__icon .mat-icon{font-size:150%;line-height:1.125}.form-slide-toggle{display:flex;min-height:60px;align-items:center}.form-slide-toggle.appearance-fill,.form-slide-toggle.appearance-outline{padding:0 .75em}.form-slide-toggle__icon{padding-right:8px}.form-slide-toggle__icon:empty{display:none}.form-slide-toggle__field{display:flex;min-width:180px;flex:1 1 auto;flex-direction:row;align-items:center;justify-content:flex-start}.form-slide-toggle__field__text{display:flex;flex:1 1 100%;flex-direction:column;padding-left:14px}.form-slide-toggle__field__text__label-1{font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.form-slide-toggle__field__text__label-2{font:400 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.form-slide-toggle__field__text.disabled{color:#00000061}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormSlideToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gio-form-slide-toggle', template: "<!--\n\n    Copyright (C) 2015 The Gravitee team (http://gravitee.io)\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n            http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n<div\n  class=\"form-slide-toggle\"\n  [class.appearance-standard]=\"appearance === 'standard'\"\n  [class.appearance-fill]=\"appearance === 'fill'\"\n  [class.appearance-outline]=\"appearance === 'outline'\"\n>\n  <div class=\"form-slide-toggle__icon\">\n    <ng-content select=\"[gioFormPrefix]\"></ng-content>\n  </div>\n  <div class=\"form-slide-toggle__field\">\n    <div class=\"form-slide-toggle__field__mat-slide-toggle\">\n      <ng-content select=\"[gioFormSlideToggle]\"></ng-content>\n    </div>\n    <div class=\"form-slide-toggle__field__text\" [class.disabled]=\"disabled\">\n      <span class=\"form-slide-toggle__field__text__label-1\">\n        <ng-content select=\"gio-form-label\"></ng-content>\n      </span>\n      <span class=\"form-slide-toggle__field__text__label-2\">\n        <ng-content></ng-content>\n      </span>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:inline-block;padding:4px 0}::ng-deep gio-form-slide-toggle div.form-slide-toggle__icon .mat-icon{font-size:150%;line-height:1.125}.form-slide-toggle{display:flex;min-height:60px;align-items:center}.form-slide-toggle.appearance-fill,.form-slide-toggle.appearance-outline{padding:0 .75em}.form-slide-toggle__icon{padding-right:8px}.form-slide-toggle__icon:empty{display:none}.form-slide-toggle__field{display:flex;min-width:180px;flex:1 1 auto;flex-direction:row;align-items:center;justify-content:flex-start}.form-slide-toggle__field__text{display:flex;flex:1 1 100%;flex-direction:column;padding-left:14px}.form-slide-toggle__field__text__label-1{font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.form-slide-toggle__field__text__label-2{font:400 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.form-slide-toggle__field__text.disabled{color:#00000061}\n"] }]
+        }], propDecorators: { appearance: [{
+                type: Input
+            }], innerMatSlideToggle: [{
+                type: ContentChild,
+                args: [MatSlideToggle, {
+                        static: false,
+                    }]
+            }], innerFormControlName: [{
+                type: ContentChild,
+                args: [NgControl, {
+                        static: false,
+                    }]
+            }] } });
+
+/*
+ * 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 GioFormSlideToggleModule {
+}
+GioFormSlideToggleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormSlideToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GioFormSlideToggleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormSlideToggleModule, declarations: [GioFormSlideToggleComponent, GioFormLabelComponent, GioFormPrefixDirective], imports: [CommonModule], exports: [GioFormSlideToggleComponent, GioFormLabelComponent, GioFormPrefixDirective] });
+GioFormSlideToggleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormSlideToggleModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormSlideToggleModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [GioFormSlideToggleComponent, GioFormLabelComponent, GioFormPrefixDirective],
+                    exports: [GioFormSlideToggleComponent, GioFormLabelComponent, GioFormPrefixDirective],
+                    entryComponents: [GioFormSlideToggleComponent],
+                }]
+        }] });
+
 /*
  * Copyright (C) 2023 The Gravitee team (http://gravitee.io)
  *
@@ -2909,24 +3097,28 @@ GioFjsObjectTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
     <div class="wrapper">
       <div class="wrapper__title" *ngIf="to.label">{{ to.label }}</div>
       <p *ngIf="to.description">{{ to.description }}</p>
-      <div class="alert alert-danger" role="alert" *ngIf="showError && formControl.errors">
+      <div class="wrapper__error" *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 class="wrapper__fields">
+        <formly-field *ngFor="let f of field.fieldGroup" class="wrapper__fields__field" [field]="f"></formly-field>
+      </div>
     </div>
-  `, isInline: true, styles: [".wrapper{display:flex;flex-direction:column;padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper__title{font:600 16px/24px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:16px}.wrapper:empty{display:none}.wrapper formly-field+formly-field{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"] }] });
+  `, 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__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="alert alert-danger" role="alert" *ngIf="showError && formControl.errors">
+      <div class="wrapper__error" *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 class="wrapper__fields">
+        <formly-field *ngFor="let f of field.fieldGroup" class="wrapper__fields__field" [field]="f"></formly-field>
+      </div>
     </div>
-  `, styles: [".wrapper{display:flex;flex-direction:column;padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper__title{font:600 16px/24px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:16px}.wrapper:empty{display:none}.wrapper formly-field+formly-field{margin-top:8px}\n"] }]
+  `, 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__field:empty{display:none}.wrapper__fields__field+.wrapper__fields__field:not(:empty){display:block;margin-top:8px}\n"] }]
         }] });
 
 /*
@@ -2945,52 +3137,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * limitations under the License.
  */
 class GioFjsArrayTypeComponent extends FieldArrayType {
+    constructor() {
+        super(...arguments);
+        this.collapse = false;
+    }
 }
 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">
-      <div class="wrapper__title" *ngIf="to.label">{{ to.label }}</div>
-      <p *ngIf="to.description">{{ to.description }}</p>
+      <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="alert alert-danger" role="alert" *ngIf="showError && formControl.errors">
+      <div class="wrapper__error" *ngIf="showError && formControl.errors">
         <formly-validation-message [field]="field"></formly-validation-message>
       </div>
 
-      <div *ngFor="let field of field.fieldGroup; let i = index" class="row">
-        <formly-field [field]="field"></formly-field>
-        <div>
-          <button class="btn btn-danger" type="button" (click)="remove(i)">-</button>
+      <div *ngIf="!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>
 
-      <div>
-        <button class="btn btn-primary" type="button" (click)="add()">+</button>
+        <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__title{font:600 16px/24px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:16px}.wrapper:empty{display:none}.wrapper formly-field+formly-field{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"] }] });
+  `, isInline: true, styles: [".wrapper{padding:8px;border:1px solid #d3d5dc;border-radius:8px}.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">
-      <div class="wrapper__title" *ngIf="to.label">{{ to.label }}</div>
-      <p *ngIf="to.description">{{ to.description }}</p>
+      <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="alert alert-danger" role="alert" *ngIf="showError && formControl.errors">
+      <div class="wrapper__error" *ngIf="showError && formControl.errors">
         <formly-validation-message [field]="field"></formly-validation-message>
       </div>
 
-      <div *ngFor="let field of field.fieldGroup; let i = index" class="row">
-        <formly-field [field]="field"></formly-field>
-        <div>
-          <button class="btn btn-danger" type="button" (click)="remove(i)">-</button>
+      <div *ngIf="!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>
 
-      <div>
-        <button class="btn btn-primary" type="button" (click)="add()">+</button>
+        <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__title{font:600 16px/24px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:16px}.wrapper:empty{display:none}.wrapper formly-field+formly-field{display:block;margin-top:8px}\n"] }]
+  `, styles: [".wrapper{padding:8px;border:1px solid #d3d5dc;border-radius:8px}.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) {
@@ -3089,6 +3311,7 @@ function bannerExtension(field) {
 class GioFjsMultiSchemaTypeComponent extends FieldType {
     ngOnInit() {
         set(this.field, 'fieldGroup[0].props.appearance', 'fill');
+        set(this.field, 'fieldGroup[0].props.label', 'Select option');
     }
 }
 GioFjsMultiSchemaTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsMultiSchemaTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -3096,24 +3319,159 @@ GioFjsMultiSchemaTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
     <div class="wrapper">
       <div class="wrapper__title" *ngIf="props.label">{{ props.label }}</div>
       <p *ngIf="props.description">{{ props.description }}</p>
-      <div role="alert" *ngIf="showError && formControl.errors">
+      <div class="wrapper__error" *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: ["::ng-deep gio-fjs-multi-schema-type div.wrapper formly-field:first-child mat-form-field{padding-bottom:0}.wrapper{padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper__title{font-size:16px;font-weight:500;letter-spacing:.4px;line-height:24px;margin-bottom:4px}.wrapper:empty{display:none}\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"] }] });
+  `, isInline: true, styles: [".wrapper{padding:8px;border:1px solid #d3d5dc;border-radius:8px}.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 role="alert" *ngIf="showError && formControl.errors">
+      <div class="wrapper__error" *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: ["::ng-deep gio-fjs-multi-schema-type div.wrapper formly-field:first-child mat-form-field{padding-bottom:0}.wrapper{padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper__title{font-size:16px;font-weight:500;letter-spacing:.4px;line-height:24px;margin-bottom:4px}.wrapper:empty{display:none}\n"] }]
+  `, styles: [".wrapper{padding:8px;border:1px solid #d3d5dc;border-radius:8px}.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"] }]
+        }] });
+
+/*
+ * 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 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)
+ *
+ * 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 GioFjsHeadersTypeComponent extends FieldType {
+    constructor() {
+        super(...arguments);
+        this.defaultOptions = {
+            props: {
+                outputConfig: {
+                    keyName: 'name',
+                    valueName: 'value',
+                },
+            },
+        };
+        this.collapse = false;
+    }
+    get map() {
+        return (headers) => [...(headers !== null && headers !== void 0 ? headers : [])].map(header => {
+            return {
+                [this.props.outputConfig.keyName]: header.key,
+                [this.props.outputConfig.valueName]: header.value,
+            };
+        });
+    }
+}
+GioFjsHeadersTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsHeadersTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+GioFjsHeadersTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFjsHeadersTypeComponent, selector: "gio-fjs-headers-type", usesInheritance: true, ngImport: i0, template: `
+    <div class="wrapper">
+      <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"] }]
         }] });
 
 /*
@@ -3139,11 +3497,17 @@ GioFormJsonSchemaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         GioFjsObjectTypeComponent,
         GioFjsMultiSchemaTypeComponent,
         GioFjsArrayTypeComponent,
+        GioFjsToggleTypeComponent,
+        GioFjsHeadersTypeComponent,
         GioFormFieldWrapperComponent], imports: [CommonModule,
         A11yModule,
         ReactiveFormsModule, i1$4.FormlyModule, FormlyMaterialModule,
-        GioIconsModule], exports: [GioFormJsonSchemaComponent, FormlyModule] });
-GioFormJsonSchemaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormJsonSchemaModule, imports: [[
+        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,
@@ -3169,6 +3533,14 @@ GioFormJsonSchemaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
                     { 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 } }],
                 extras: {
@@ -3177,6 +3549,10 @@ GioFormJsonSchemaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
             }),
             FormlyMaterialModule,
             GioIconsModule,
+            GioFormSlideToggleModule,
+            GioFormHeadersModule,
+            MatSlideToggleModule,
+            MatButtonModule,
         ], FormlyModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormJsonSchemaModule, decorators: [{
             type: NgModule,
@@ -3187,6 +3563,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         GioFjsObjectTypeComponent,
                         GioFjsMultiSchemaTypeComponent,
                         GioFjsArrayTypeComponent,
+                        GioFjsToggleTypeComponent,
+                        GioFjsHeadersTypeComponent,
                         GioFormFieldWrapperComponent,
                     ],
                     imports: [
@@ -3215,6 +3593,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 { 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 } }],
                             extras: {
@@ -3223,8 +3609,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         }),
                         FormlyMaterialModule,
                         GioIconsModule,
+                        GioFormSlideToggleModule,
+                        GioFormHeadersModule,
+                        MatSlideToggleModule,
+                        MatButtonModule,
                     ],
                     exports: [GioFormJsonSchemaComponent, FormlyModule],
+                    providers: [GioFormlyJsonSchemaService],
                 }]
         }] });
 
@@ -3264,5 +3655,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { GioAvatarComponent, GioAvatarModule, GioBannerActionDirective, GioBannerBodyDirective, GioBannerComponent, GioBannerErrorComponent, GioBannerInfoComponent, GioBannerModule, GioBannerSuccessComponent, GioBannerWarningComponent, GioBreadcrumbComponent, GioBreadcrumbItemDirective, GioBreadcrumbModule, GioConfirmAndValidateDialogComponent, GioConfirmAndValidateDialogHarness, GioConfirmAndValidateDialogModule, GioConfirmDialogComponent, GioConfirmDialogHarness, GioConfirmDialogModule, GioFormFilePickerAddButtonComponent, GioFormFilePickerComponent, GioFormFilePickerEmptyComponent, GioFormFilePickerInputHarness, GioFormFilePickerLabelComponent, GioFormFilePickerModule, GioFormHeadersComponent, GioFormHeadersHarness, GioFormHeadersModule, GioFormJsonSchemaComponent, GioFormJsonSchemaModule, GioFormTagsInputComponent, GioFormTagsInputHarness, GioFormTagsInputModule, GioIconsModule, GioMatConfigModule, GioMenuComponent, GioMenuFooterComponent, GioMenuHeaderComponent, GioMenuItemComponent, GioMenuListComponent, GioMenuModule, GioMenuSelectorComponent, GioMenuSelectorHarness, GioMenuService, GioSaveBarComponent, GioSaveBarHarness, GioSaveBarModule, GioSubmenuComponent, GioSubmenuGroupComponent, GioSubmenuItemComponent, GioSubmenuModule, GioSubmenuTitleDirective, GioTopBarComponent, GioTopBarContentComponent, GioTopBarLinkComponent, GioTopBarLinkModule, GioTopBarMenuComponent, GioTopBarMenuModule, GioTopBarModule, NewFile };
+export { GioAvatarComponent, GioAvatarModule, GioBannerActionDirective, GioBannerBodyDirective, GioBannerComponent, GioBannerErrorComponent, GioBannerInfoComponent, GioBannerModule, GioBannerSuccessComponent, GioBannerWarningComponent, GioBreadcrumbComponent, GioBreadcrumbItemDirective, GioBreadcrumbModule, GioConfirmAndValidateDialogComponent, GioConfirmAndValidateDialogHarness, GioConfirmAndValidateDialogModule, GioConfirmDialogComponent, GioConfirmDialogHarness, GioConfirmDialogModule, GioFormFilePickerAddButtonComponent, GioFormFilePickerComponent, GioFormFilePickerEmptyComponent, GioFormFilePickerInputHarness, GioFormFilePickerLabelComponent, GioFormFilePickerModule, GioFormHeadersComponent, GioFormHeadersHarness, GioFormHeadersModule, GioFormJsonSchemaComponent, GioFormJsonSchemaModule, GioFormLabelComponent, GioFormPrefixDirective, GioFormSlideToggleComponent, GioFormSlideToggleDirective, GioFormSlideToggleModule, GioFormTagsInputComponent, GioFormTagsInputHarness, GioFormTagsInputModule, GioIconsModule, GioMatConfigModule, GioMenuComponent, GioMenuFooterComponent, GioMenuHeaderComponent, GioMenuItemComponent, GioMenuListComponent, GioMenuModule, GioMenuSelectorComponent, GioMenuSelectorHarness, GioMenuService, GioSaveBarComponent, GioSaveBarHarness, GioSaveBarModule, GioSubmenuComponent, GioSubmenuGroupComponent, GioSubmenuItemComponent, GioSubmenuModule, GioSubmenuTitleDirective, GioTopBarComponent, GioTopBarContentComponent, GioTopBarLinkComponent, GioTopBarLinkModule, GioTopBarMenuComponent, GioTopBarMenuModule, GioTopBarModule, NewFile };
 //# sourceMappingURL=gravitee-ui-particles-angular.mjs.map