@gravitee/ui-particles-angular 5.7.3-improve-form-json-compo-db890aa → 5.7.3-json-schema-77b8f57

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 } from '@angular/core';
 import { timer, Subject, fromEvent, of, BehaviorSubject } from 'rxjs';
 import * as i1 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
@@ -8,12 +8,12 @@ import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i2$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { __awaiter } from 'tslib';
+import { __awaiter, __rest } from 'tslib';
 import { ComponentHarness, HarnessPredicate, parallel, TestKey } from '@angular/cdk/testing';
 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 } from 'lodash';
+import { isEmpty as isEmpty$1, toLower, dropRight, isNil, isArray, remove, cloneDeep, isObject as isObject$1, 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';
@@ -44,9 +44,8 @@ import * as i6$2 from 'ngx-file-helpers';
 import { ReadMode, NgxFileHelpersModule } from 'ngx-file-helpers';
 import { MatSelectHarness } from '@angular/material/select/testing';
 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 * as i1$3 from '@ngx-formly/core';
+import { ɵhasKey, ɵgetFieldValue, ɵreverseDeepMerge, ɵclone, FieldType, FieldArrayType, FieldWrapper, FormlyModule } from '@ngx-formly/core';
 import { FormlyMaterialModule } from '@ngx-formly/material';
 
 /*
@@ -322,7 +321,7 @@ class GioFormTagsInputComponent {
     // From ControlValueAccessor interface
     get empty() {
         var _a, _b;
-        return isEmpty(this.value) && isEmpty((_b = (_a = this._tagInput) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.value);
+        return isEmpty$1(this.value) && isEmpty$1((_b = (_a = this._tagInput) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.value);
     }
     // From ControlValueAccessor interface
     get shouldLabelFloat() {
@@ -385,7 +384,7 @@ class GioFormTagsInputComponent {
         var _a, _b, _c;
         const input = (_a = this._tagInput) === null || _a === void 0 ? void 0 : _a.nativeElement;
         const tagToAdd = ((_b = event.value) !== null && _b !== void 0 ? _b : '').trim();
-        if (isEmpty(tagToAdd)) {
+        if (isEmpty$1(tagToAdd)) {
             return;
         }
         // Add the tag only if shouldAddTag in validationCb return true
@@ -1154,7 +1153,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }] } });
 const removeLastEmptyHeader = (headers) => {
     const lastHeader = headers[headers.length - 1];
-    if (lastHeader && isEmpty(lastHeader.key) && isEmpty(lastHeader.value)) {
+    if (lastHeader && isEmpty$1(lastHeader.key) && isEmpty$1(lastHeader.value)) {
         return dropRight(headers);
     }
     return headers;
@@ -2728,6 +2727,552 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * limitations under the License.
  */
 
+// https://stackoverflow.com/a/27865285
+function decimalPlaces(a) {
+    if (!isFinite(a)) {
+        return 0;
+    }
+    let e = 1, p = 0;
+    while (Math.round(a * e) / e !== a) {
+        e *= 10;
+        p++;
+    }
+    return p;
+}
+function isEmpty(v) {
+    return v === '' || v == null;
+}
+function isObject(v) {
+    return v != null && typeof v === 'object' && !Array.isArray(v);
+}
+function isInteger(value) {
+    return Number.isInteger ? Number.isInteger(value) : typeof value === 'number' && Math.floor(value) === value;
+}
+function isConst(schema) {
+    return typeof schema === 'object' && (schema.hasOwnProperty('const') || (schema.enum && schema.enum.length === 1));
+}
+function totalMatchedFields(field) {
+    if (!field.fieldGroup) {
+        return ɵhasKey(field) && ɵgetFieldValue(field) !== undefined ? 1 : 0;
+    }
+    const total = field.fieldGroup.reduce((s, f) => totalMatchedFields(f) + s, 0);
+    if (total === 0 && ɵhasKey(field)) {
+        const value = ɵgetFieldValue(field);
+        if (value === null || (value !== undefined && ((field.fieldArray && Array.isArray(value)) || (!field.fieldArray && isObject(value))))) {
+            return 1;
+        }
+    }
+    return total;
+}
+class GioJsonschema {
+    toFieldConfig(schema, options) {
+        return this._toFieldConfig(schema, Object.assign({ schema }, (options || {})));
+    }
+    _toFieldConfig(schema, _a) {
+        var _b;
+        var { key } = _a, options = __rest(_a, ["key"]);
+        schema = this.resolveSchema(schema, options);
+        const types = this.guessSchemaType(schema);
+        let field = {
+            type: types[0],
+            defaultValue: schema.default,
+            props: {
+                label: schema.title,
+                readonly: schema.readOnly,
+                description: schema.description,
+            },
+        };
+        if (key != null) {
+            field.key = key;
+        }
+        if (!options.ignoreDefault && (schema.readOnly || options.readOnly)) {
+            field.props.disabled = true;
+            options = Object.assign(Object.assign({}, options), { readOnly: true });
+        }
+        if (options.resetOnHide) {
+            field.resetOnHide = true;
+        }
+        if (key && options.strict) {
+            this.addValidator(field, 'type', (c, f) => {
+                const value = ɵgetFieldValue(f);
+                if (value != null) {
+                    switch (field.type) {
+                        case 'string': {
+                            return typeof value === 'string';
+                        }
+                        case 'integer': {
+                            return isInteger(value);
+                        }
+                        case 'number': {
+                            return typeof value === 'number';
+                        }
+                        case 'object': {
+                            return isObject(value);
+                        }
+                        case 'array': {
+                            return Array.isArray(value);
+                        }
+                    }
+                }
+                return true;
+            });
+        }
+        if (options.shareFormControl === false) {
+            field.shareFormControl = false;
+        }
+        if (options.ignoreDefault) {
+            delete field.defaultValue;
+        }
+        this.addValidator(field, 'type', {
+            schemaType: types,
+            expression: ({ value }) => {
+                if (value === undefined) {
+                    return true;
+                }
+                if (value === null && types.indexOf('null') !== -1) {
+                    return true;
+                }
+                switch (types[0]) {
+                    case 'null': {
+                        return typeof value === null;
+                    }
+                    case 'string': {
+                        return typeof value === 'string';
+                    }
+                    case 'integer': {
+                        return isInteger(value);
+                    }
+                    case 'number': {
+                        return typeof value === 'number';
+                    }
+                    case 'object': {
+                        return isObject(value);
+                    }
+                    case 'array': {
+                        return Array.isArray(value);
+                    }
+                }
+                return true;
+            },
+        });
+        switch (field.type) {
+            case 'number':
+            case 'integer': {
+                field.parsers = [(v) => (isEmpty(v) ? undefined : Number(v))];
+                if (schema.hasOwnProperty('minimum')) {
+                    field.props.min = schema.minimum;
+                }
+                if (schema.hasOwnProperty('maximum')) {
+                    field.props.max = schema.maximum;
+                }
+                if (schema.hasOwnProperty('exclusiveMinimum')) {
+                    field.props.exclusiveMinimum = schema.exclusiveMinimum;
+                    this.addValidator(field, 'exclusiveMinimum', ({ value }) => isEmpty(value) || value > schema.exclusiveMinimum);
+                }
+                if (schema.hasOwnProperty('exclusiveMaximum')) {
+                    field.props.exclusiveMaximum = schema.exclusiveMaximum;
+                    this.addValidator(field, 'exclusiveMaximum', ({ value }) => isEmpty(value) || value < schema.exclusiveMaximum);
+                }
+                if (schema.hasOwnProperty('multipleOf')) {
+                    field.props.step = schema.multipleOf;
+                    this.addValidator(field, 'multipleOf', ({ value }) => {
+                        if (isEmpty(value) || typeof value !== 'number' || value === 0 || schema.multipleOf <= 0) {
+                            return true;
+                        }
+                        // https://github.com/ajv-validator/ajv/issues/652#issue-283610859
+                        const multiplier = Math.pow(10, decimalPlaces(schema.multipleOf));
+                        return Math.round(value * multiplier) % Math.round(schema.multipleOf * multiplier) === 0;
+                    });
+                }
+                break;
+            }
+            case 'string': {
+                field.parsers = [
+                    v => {
+                        if (types.indexOf('null') !== -1) {
+                            v = isEmpty(v) ? null : v;
+                        }
+                        else if (!field.props.required) {
+                            v = v === '' ? undefined : v;
+                        }
+                        return v;
+                    },
+                ];
+                ['minLength', 'maxLength', 'pattern'].forEach(prop => {
+                    if (schema.hasOwnProperty(prop)) {
+                        field.props[prop] = schema[prop];
+                    }
+                });
+                break;
+            }
+            case 'object': {
+                if (!field.fieldGroup) {
+                    field.fieldGroup = [];
+                }
+                const { propDeps, schemaDeps } = this.resolveDependencies(schema);
+                Object.keys(schema.properties || {}).forEach(property => {
+                    const isRequired = Array.isArray(schema.required) && schema.required.indexOf(property) !== -1;
+                    const f = this._toFieldConfig(schema.properties[property], Object.assign(Object.assign({}, options), { key: property, isOptional: options.isOptional || !isRequired }));
+                    field.fieldGroup.push(f);
+                    if (isRequired || propDeps[property]) {
+                        f.expressions = Object.assign(Object.assign({}, (f.expressions || {})), { 'props.required': f => {
+                                let parent = f.parent;
+                                const model = f.fieldGroup && f.key != null ? parent.model : f.model;
+                                while (parent.key == null && parent.parent) {
+                                    parent = parent.parent;
+                                }
+                                const required = parent && parent.props ? parent.props.required : false;
+                                if (!model && !required) {
+                                    return false;
+                                }
+                                if (Array.isArray(schema.required) && schema.required.indexOf(property) !== -1) {
+                                    return true;
+                                }
+                                return propDeps[property] && f.model && propDeps[property].some(k => !isEmpty(f.model[k]));
+                            } });
+                    }
+                    if (schemaDeps[property]) {
+                        const getConstValue = (s) => {
+                            return s.hasOwnProperty('const') ? s.const : s.enum[0];
+                        };
+                        const oneOfSchema = schemaDeps[property].oneOf;
+                        if (oneOfSchema && oneOfSchema.every(o => o.properties && o.properties[property] && isConst(o.properties[property]))) {
+                            oneOfSchema.forEach(oneOfSchemaItem => {
+                                const _a = oneOfSchemaItem.properties, _b = property, constSchema = _a[_b], properties = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
+                                field.fieldGroup.push(Object.assign(Object.assign({}, this._toFieldConfig(Object.assign(Object.assign({}, oneOfSchemaItem), { properties }), Object.assign(Object.assign({}, options), { resetOnHide: true }))), { expressions: {
+                                        hide: f => !f.model || getConstValue(constSchema) !== f.model[property],
+                                    } }));
+                            });
+                        }
+                        else {
+                            field.fieldGroup.push(Object.assign(Object.assign({}, this._toFieldConfig(schemaDeps[property], options)), { expressions: {
+                                    hide: f => !f.model || isEmpty(f.model[property]),
+                                } }));
+                        }
+                    }
+                });
+                console.log('schema', cloneDeep(schema));
+                if (schema.oneOf) {
+                    console.log(cloneDeep(field.fieldGroup));
+                    field.fieldGroup.push(this.resolveMultiSchema('oneOf', schema.oneOf, Object.assign(Object.assign({}, options), { shareFormControl: false })));
+                }
+                if (schema.anyOf) {
+                    field.fieldGroup.push(this.resolveMultiSchema('anyOf', schema.anyOf, options));
+                }
+                break;
+            }
+            case 'array': {
+                if (schema.hasOwnProperty('minItems')) {
+                    field.props.minItems = schema.minItems;
+                    this.addValidator(field, 'minItems', (c, f) => {
+                        const value = ɵgetFieldValue(f);
+                        return isEmpty(value) || value.length >= schema.minItems;
+                    });
+                    if (!options.isOptional && schema.minItems > 0 && field.defaultValue === undefined) {
+                        field.defaultValue = Array.from(new Array(schema.minItems));
+                    }
+                }
+                if (schema.hasOwnProperty('maxItems')) {
+                    field.props.maxItems = schema.maxItems;
+                    this.addValidator(field, 'maxItems', (c, f) => {
+                        const value = ɵgetFieldValue(f);
+                        return isEmpty(value) || value.length <= schema.maxItems;
+                    });
+                }
+                if (schema.hasOwnProperty('uniqueItems')) {
+                    field.props.uniqueItems = schema.uniqueItems;
+                    this.addValidator(field, 'uniqueItems', (c, f) => {
+                        const value = ɵgetFieldValue(f);
+                        if (isEmpty(value) || !schema.uniqueItems) {
+                            return true;
+                        }
+                        const uniqueItems = Array.from(new Set(value.map((v) => JSON.stringify(v))));
+                        return uniqueItems.length === value.length;
+                    });
+                }
+                // resolve items schema needed for isEnum check
+                if (schema.items && !Array.isArray(schema.items)) {
+                    schema.items = this.resolveSchema(schema.items, options);
+                }
+                // TODO: remove isEnum check once adding an option to skip extension
+                if (!this.isEnum(schema)) {
+                    field.fieldArray = (root) => {
+                        if (!Array.isArray(schema.items)) {
+                            // When items is a single schema, the additionalItems keyword is meaningless, and it should not be used.
+                            const f = schema.items ? this._toFieldConfig(schema.items, options) : {};
+                            if (f.props) {
+                                f.props.required = true;
+                            }
+                            return f;
+                        }
+                        const length = root.fieldGroup ? root.fieldGroup.length : 0;
+                        const itemSchema = schema.items[length] ? schema.items[length] : schema.additionalItems;
+                        const f = itemSchema ? this._toFieldConfig(itemSchema, options) : {};
+                        if (f.props) {
+                            f.props.required = true;
+                        }
+                        if (schema.items[length]) {
+                            f.props.removable = false;
+                        }
+                        return f;
+                    };
+                }
+                break;
+            }
+        }
+        if (schema.hasOwnProperty('const')) {
+            field.props.const = schema.const;
+            this.addValidator(field, 'const', ({ value }) => value === schema.const);
+            if (!field.type) {
+                field.defaultValue = schema.const;
+            }
+        }
+        if (this.isEnum(schema)) {
+            field.props.multiple = field.type === 'array';
+            field.type = 'enum';
+            field.props.options = this.toEnumOptions(schema);
+        }
+        if (schema.oneOf && !field.type) {
+            delete field.key;
+            field.fieldGroup = [this.resolveMultiSchema('oneOf', schema.oneOf, Object.assign(Object.assign({}, options), { key, shareFormControl: false }))];
+        }
+        // map in possible formlyConfig options from the widget property
+        if ((_b = schema.widget) === null || _b === void 0 ? void 0 : _b.formlyConfig) {
+            field = this.mergeFields(field, schema.widget.formlyConfig);
+        }
+        field.templateOptions = field.props;
+        // if there is a map function passed in, use it to allow the user to
+        // further customize how fields are being mapped
+        return options.map ? options.map(field, schema) : field;
+    }
+    resolveSchema(schema, options) {
+        if (schema && schema.$ref) {
+            console.log('resolveSchema', { schema });
+            schema = this.resolveDefinition(schema, options);
+            console.log('resolved', { schema });
+        }
+        if (schema && schema.allOf) {
+            console.log('noopo');
+            schema = this.resolveAllOf(schema, options);
+        }
+        return schema;
+    }
+    resolveAllOf(_a, options) {
+        var { allOf } = _a, baseSchema = __rest(_a, ["allOf"]);
+        console.log('resolveAllOf', { allOf });
+        if (!allOf.length) {
+            throw Error(`allOf array can not be empty ${allOf}.`);
+        }
+        return allOf.reduce((base, schema) => {
+            schema = this.resolveSchema(schema, options);
+            console.log('resolveAllOf > resolveSchema', { schema });
+            if (base.required && schema.required) {
+                base.required = [...base.required, ...schema.required];
+            }
+            if (schema.uniqueItems) {
+                base.uniqueItems = schema.uniqueItems;
+            }
+            // resolve to min value
+            ['maxLength', 'maximum', 'exclusiveMaximum', 'maxItems', 'maxProperties'].forEach(prop => {
+                if (!isEmpty(base[prop]) && !isEmpty(schema[prop])) {
+                    base[prop] = base[prop] < schema[prop] ? base[prop] : schema[prop];
+                }
+            });
+            // resolve to max value
+            ['minLength', 'minimum', 'exclusiveMinimum', 'minItems', 'minProperties'].forEach(prop => {
+                if (!isEmpty(base[prop]) && !isEmpty(schema[prop])) {
+                    base[prop] = base[prop] > schema[prop] ? base[prop] : schema[prop];
+                }
+            });
+            return ɵreverseDeepMerge(base, schema);
+        }, baseSchema);
+    }
+    resolveMultiSchema(mode, schemas, options) {
+        console.log('resolveMultiSchema', { mode, schemas, options });
+        return {
+            type: 'multischema',
+            fieldGroup: [
+                {
+                    type: 'enum',
+                    defaultValue: -1,
+                    props: {
+                        multiple: mode === 'anyOf',
+                        options: schemas.map((s, i) => ({ label: s.title, value: i, disabled: s.readOnly })),
+                    },
+                    hooks: {
+                        onInit: f => f.formControl.valueChanges.pipe(tap(() => f.options.detectChanges(f.parent))),
+                    },
+                },
+                {
+                    fieldGroup: schemas.map((s, i) => (Object.assign(Object.assign({}, this._toFieldConfig(s, Object.assign(Object.assign({}, options), { resetOnHide: true }))), { expressions: {
+                            hide: (f, forceUpdate) => {
+                                const control = f.parent.parent.fieldGroup[0].formControl;
+                                if (control.value === -1 || forceUpdate) {
+                                    let value = f.parent.fieldGroup
+                                        .map((f, i) => [f, i, this.isFieldValid(f, i, schemas, options)])
+                                        .sort(([f1, , f1Valid], [f2, , f2Valid]) => {
+                                        if (f1Valid !== f2Valid) {
+                                            return f2Valid ? 1 : -1;
+                                        }
+                                        const matchedFields1 = totalMatchedFields(f1);
+                                        const matchedFields2 = totalMatchedFields(f2);
+                                        if (matchedFields1 === matchedFields2) {
+                                            if (f1.props.disabled === f2.props.disabled) {
+                                                return 0;
+                                            }
+                                            return matchedFields2 > matchedFields1 ? 1 : -1;
+                                        }
+                                        return matchedFields2 > matchedFields1 ? 1 : -1;
+                                    })
+                                        .map(([, i]) => i);
+                                    if (mode === 'anyOf') {
+                                        const definedValue = value.filter(i => totalMatchedFields(f.parent.fieldGroup[i]));
+                                        value = definedValue.length > 0 ? definedValue : [value[0] || 0];
+                                    }
+                                    value = value.length > 0 ? value : [0];
+                                    control.setValue(mode === 'anyOf' ? value : value[0]);
+                                }
+                                return Array.isArray(control.value) ? control.value.indexOf(i) === -1 : control.value !== i;
+                            },
+                        } }))),
+                },
+            ],
+        };
+    }
+    resolveDefinition(schema, options) {
+        const [uri, pointer] = schema.$ref.split('#/');
+        if (uri) {
+            throw Error(`Remote schemas for ${schema.$ref} not supported yet.`);
+        }
+        const definition = !pointer
+            ? null
+            : pointer.split('/').reduce((def, path) => ((def === null || def === void 0 ? void 0 : def.hasOwnProperty(path)) ? def[path] : null), options.schema);
+        if (!definition) {
+            throw Error(`Cannot find a definition for ${schema.$ref}.`);
+        }
+        if (definition.$ref) {
+            return this.resolveDefinition(definition, options);
+        }
+        console.log({ definition, schema });
+        return Object.assign(Object.assign(Object.assign({}, definition), (schema.properties ? { properties: Object.assign(Object.assign({}, schema.properties), definition.properties) } : {})), ['title', 'description', 'default', 'widget'].reduce((annotation, p) => {
+            if (schema.hasOwnProperty(p)) {
+                annotation[p] = schema[p];
+            }
+            return annotation;
+        }, {}));
+    }
+    resolveDependencies(schema) {
+        const propDeps = {};
+        const schemaDeps = {};
+        Object.keys(schema.dependencies || {}).forEach(prop => {
+            const dependency = schema.dependencies[prop];
+            if (Array.isArray(dependency)) {
+                // Property dependencies
+                dependency.forEach(dep => {
+                    if (!propDeps[dep]) {
+                        propDeps[dep] = [prop];
+                    }
+                    else {
+                        propDeps[dep].push(prop);
+                    }
+                });
+            }
+            else {
+                // schema dependencies
+                schemaDeps[prop] = dependency;
+            }
+        });
+        return { propDeps, schemaDeps };
+    }
+    guessSchemaType(schema) {
+        const type = schema === null || schema === void 0 ? void 0 : schema.type;
+        if (!type && (schema === null || schema === void 0 ? void 0 : schema.properties)) {
+            return ['object'];
+        }
+        if (Array.isArray(type)) {
+            if (type.length === 1) {
+                return type;
+            }
+            if (type.length === 2 && type.indexOf('null') !== -1) {
+                return type.sort(t1 => (t1 == 'null' ? 1 : -1));
+            }
+            return type;
+        }
+        return type ? [type] : [];
+    }
+    addValidator(field, name, validator) {
+        field.validators = field.validators || {};
+        field.validators[name] = validator;
+    }
+    isEnum(schema) {
+        return (!!schema.enum ||
+            (schema.anyOf && schema.anyOf.every(isConst)) ||
+            (schema.oneOf && schema.oneOf.every(isConst)) ||
+            (schema.uniqueItems && schema.items && !Array.isArray(schema.items) && this.isEnum(schema.items)));
+    }
+    toEnumOptions(schema) {
+        if (schema.enum) {
+            return schema.enum.map(value => ({ value, label: value }));
+        }
+        const toEnum = (s) => {
+            const value = s.hasOwnProperty('const') ? s.const : s.enum[0];
+            const option = { value, label: s.title || value };
+            if (s.readOnly) {
+                option.disabled = true;
+            }
+            return option;
+        };
+        if (schema.anyOf) {
+            return schema.anyOf.map(toEnum);
+        }
+        if (schema.oneOf) {
+            return schema.oneOf.map(toEnum);
+        }
+        return this.toEnumOptions(schema.items);
+    }
+    isFieldValid(root, i, schemas, options) {
+        if (!root._schemasFields) {
+            Object.defineProperty(root, '_schemasFields', { enumerable: false, writable: true, configurable: true });
+            root._schemasFields = {};
+        }
+        let field = root._schemasFields[i];
+        const model = root.model ? ɵclone(root.model) : root.fieldArray ? [] : {};
+        if (!field) {
+            field = root._schemasFields[i] = root.options.build({
+                form: Array.isArray(model) ? new FormArray([]) : new FormGroup({}),
+                fieldGroup: [
+                    this._toFieldConfig(schemas[i], Object.assign(Object.assign({}, options), { resetOnHide: true, ignoreDefault: true, map: null, strict: true })),
+                ],
+                model,
+                options: {},
+            });
+        }
+        else {
+            field.model = model;
+            root.options.build(field);
+        }
+        return field.form.valid;
+    }
+    mergeFields(f1, f2) {
+        for (let prop in f2) {
+            const f1Prop = prop === 'templateOptions' ? 'props' : prop;
+            if (isObject(f1[f1Prop]) && isObject(f2[prop])) {
+                f1[f1Prop] = this.mergeFields(f1[f1Prop], f2[prop]);
+            }
+            else if (f2[prop] != null) {
+                f1[f1Prop] = f2[prop];
+            }
+        }
+        return f1;
+    }
+}
+GioJsonschema.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioJsonschema, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+GioJsonschema.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioJsonschema, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioJsonschema, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /*
  * Copyright (C) 2023 The Gravitee team (http://gravitee.io)
  *
@@ -2744,76 +3289,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * limitations under the License.
  */
 class GioFormJsonSchemaComponent {
-    constructor(formlyJsonschema, elRef, fm, ngControl) {
+    constructor(formlyJsonschema) {
         this.formlyJsonschema = formlyJsonschema;
-        this.elRef = elRef;
-        this.fm = fm;
-        this.ngControl = ngControl;
-        this.unsubscribe$ = new Subject();
         this.formGroup = new FormGroup({});
         this.options = {};
         this.model = {};
         this.fields = [];
-        this._onChange = () => ({});
-        this._onTouched = () => ({});
-        this.touched = false;
-        if (ngControl) {
-            // Setting the value accessor directly (instead of using
-            // the providers `NG_VALUE_ACCESSOR`) to avoid running into a circular import.
-            ngControl.valueAccessor = this;
-        }
-        // When the user interact with the form, mark it as touched
-        fm.monitor(elRef.nativeElement, true)
-            .pipe(takeUntil(this.unsubscribe$))
-            .subscribe(() => {
-            this._onTouched();
-            this.touched = true;
-        });
     }
     set jsonSchema(jsonSchema) {
-        if (isObject(jsonSchema)) {
+        if (isObject$1(jsonSchema)) {
             this.fields = [this.toFormlyFieldConfig(jsonSchema)];
         }
     }
-    ngOnInit() {
-        this.formGroup.statusChanges.pipe(takeUntil(this.unsubscribe$)).subscribe(status => {
-            var _a, _b, _c, _d;
-            if (status === 'VALID') {
-                (_b = (_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.setErrors(null);
-            }
-            if (status === 'INVALID') {
-                (_d = (_c = this.ngControl) === null || _c === void 0 ? void 0 : _c.control) === null || _d === void 0 ? void 0 : _d.setErrors({ invalid: true });
-            }
-        });
-        // To simulate the behavior of classic form controls, emit value only when the form is touched
-        // Allow to keep the formControl pristine until the user interact with it
-        this.formGroup.valueChanges
-            .pipe(takeUntil(this.unsubscribe$), filter(() => this.touched))
-            .subscribe(value => {
-            this._onChange(value);
-        });
-    }
-    ngOnDestroy() {
-        this.unsubscribe$.next();
-        this.unsubscribe$.unsubscribe();
-        this.fm.stopMonitoring(this.elRef.nativeElement);
-    }
-    // From ControlValueAccessor
-    writeValue(value) {
-        var _a;
-        this.model = (_a = cloneDeep(value)) !== null && _a !== void 0 ? _a : {};
-    }
-    // From ControlValueAccessor
-    registerOnChange(fn) {
-        this._onChange = fn;
-    }
-    // From ControlValueAccessor
-    registerOnTouched(fn) {
-        this._onTouched = fn;
-    }
-    // From ControlValueAccessor
-    setDisabledState(_isDisabled) {
-        throw new Error('Method not implemented.');
+    set initialValue(initialValue) {
+        if (initialValue) {
+            this.model = cloneDeep(initialValue);
+        }
     }
     toFormlyFieldConfig(jsonSchema) {
         return this.formlyJsonschema.toFieldConfig(jsonSchema, {
@@ -2833,25 +3324,22 @@ class GioFormJsonSchemaComponent {
         };
     }
 }
-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: GioJsonschema }], 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", formGroup: "formGroup", options: "options", initialValue: "initialValue" }, ngImport: i0, template: `<formly-form [fields]="fields" [options]="options" [form]="formGroup" [model]="model"></formly-form>`, isInline: true, components: [{ type: i1$3.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }] });
 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,
+                    template: `<formly-form [fields]="fields" [options]="options" [form]="formGroup" [model]="model"></formly-form>`,
                 }]
-        }], ctorParameters: function () {
-        return [{ type: i1$3.FormlyJsonschema }, { type: i0.ElementRef }, { type: i2$2.FocusMonitor }, { type: i7.NgControl, decorators: [{
-                        type: Host
-                    }, {
-                        type: Optional
-                    }] }];
-    }, propDecorators: { jsonSchema: [{
+        }], ctorParameters: function () { return [{ type: GioJsonschema }]; }, propDecorators: { jsonSchema: [{
+                type: Input
+            }], formGroup: [{
                 type: Input
             }], options: [{
                 type: Input
+            }], initialValue: [{
+                type: Input
             }] } });
 
 /*
@@ -2906,30 +3394,27 @@ 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>
-      <legend *ngIf="to.label">{{ to.label }}</legend>
+    <div class="wrapper">
+      <h4 *ngIf="to.label">{{ to.label }}</h4>
       <p *ngIf="to.description">{{ to.description }}</p>
       <div class="alert alert-danger" role="alert" *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, 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;display:flex;flex-direction:column}.wrapper:empty{display:none}.wrapper formly-field+formly-field{margin-top:8px}\n"], components: [{ type: i1$3.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: i1$3.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>
-      <legend *ngIf="to.label">{{ to.label }}</legend>
+            args: [{ selector: 'gio-fjs-object-type', template: `
+    <div class="wrapper">
+      <h4 *ngIf="to.label">{{ to.label }}</h4>
       <p *ngIf="to.description">{{ to.description }}</p>
       <div class="alert alert-danger" role="alert" *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{padding:8px;border:1px solid #d3d5dc;border-radius:8px;display:flex;flex-direction:column}.wrapper:empty{display:none}.wrapper formly-field+formly-field{margin-top:8px}\n"] }]
         }] });
 
 /*
@@ -2951,8 +3436,8 @@ class GioFjsArrayTypeComponent extends FieldArrayType {
 }
 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>
-      <legend *ngIf="to.label">{{ to.label }}</legend>
+    <div class="wrapper">
+      <h4 *ngIf="to.label">{{ to.label }}</h4>
       <p *ngIf="to.description">{{ to.description }}</p>
 
       <div class="alert alert-danger" role="alert" *ngIf="showError && formControl.errors">
@@ -2970,14 +3455,12 @@ GioFjsArrayTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
         <button class="btn btn-primary" type="button" (click)="add()">+</button>
       </div>
     </div>
-  `, isInline: true, 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 formly-field+formly-field{margin-top:8px;display:block}\n"], components: [{ type: i1$3.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: i1$3.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>
-      <legend *ngIf="to.label">{{ to.label }}</legend>
+            args: [{ selector: 'gio-fjs-array-type', template: `
+    <div class="wrapper">
+      <h4 *ngIf="to.label">{{ to.label }}</h4>
       <p *ngIf="to.description">{{ to.description }}</p>
 
       <div class="alert alert-danger" role="alert" *ngIf="showError && formControl.errors">
@@ -2995,8 +3478,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <button class="btn btn-primary" type="button" (click)="add()">+</button>
       </div>
     </div>
-  `,
-                }]
+  `, styles: [".wrapper{padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper:empty{display:none}.wrapper formly-field+formly-field{margin-top:8px;display:block}\n"] }]
         }] });
 
 function minItemsValidationMessage(error, field) {
@@ -3093,37 +3575,33 @@ function bannerExtension(field) {
  * limitations under the License.
  */
 class GioFjsMultiSchemaTypeComponent extends FieldType {
+    ngOnInit() {
+        set(this.field, 'fieldGroup[0].props.appearance', 'fill');
+    }
 }
 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="card mb-3">
-      <div class="card-body">
-        <legend *ngIf="props.label">{{ props.label }}</legend>
-        <p *ngIf="props.description">{{ props.description }}</p>
-        <div class="alert alert-danger" role="alert" *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">
+      <h5 *ngIf="props.label">{{ props.label }}</h5>
+      <p *ngIf="props.description">{{ props.description }}</p>
+      <div role="alert" *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, 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: ["::ng-deep gio-fjs-multi-schema-type .wrapper formly-field:first-child mat-form-field{padding-bottom:0}.wrapper{padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper:empty{display:none}\n"], components: [{ type: i1$3.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: i1$3.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="card mb-3">
-      <div class="card-body">
-        <legend *ngIf="props.label">{{ props.label }}</legend>
-        <p *ngIf="props.description">{{ props.description }}</p>
-        <div class="alert alert-danger" role="alert" *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>
+            args: [{ selector: 'gio-fjs-multi-schema-type', template: `
+    <div class="wrapper">
+      <h5 *ngIf="props.label">{{ props.label }}</h5>
+      <p *ngIf="props.description">{{ props.description }}</p>
+      <div role="alert" *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 .wrapper formly-field:first-child mat-form-field{padding-bottom:0}.wrapper{padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper:empty{display:none}\n"] }]
         }] });
 
 /*
@@ -3150,12 +3628,10 @@ GioFormJsonSchemaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         GioFjsMultiSchemaTypeComponent,
         GioFjsArrayTypeComponent,
         GioFormFieldWrapperComponent], imports: [CommonModule,
-        A11yModule,
-        ReactiveFormsModule, i1$4.FormlyModule, FormlyMaterialModule,
+        ReactiveFormsModule, i1$3.FormlyModule, FormlyMaterialModule,
         GioIconsModule], exports: [GioFormJsonSchemaComponent, FormlyModule] });
 GioFormJsonSchemaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormJsonSchemaModule, imports: [[
             CommonModule,
-            A11yModule,
             ReactiveFormsModule,
             FormlyModule.forRoot({
                 validationMessages: [
@@ -3181,9 +3657,6 @@ GioFormJsonSchemaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
                     { name: 'multischema', component: GioFjsMultiSchemaTypeComponent },
                 ],
                 extensions: [{ name: 'banner', extension: { onPopulate: bannerExtension } }],
-                extras: {
-                    checkExpressionOn: 'changeDetectionCheck',
-                },
             }),
             FormlyMaterialModule,
             GioIconsModule,
@@ -3201,7 +3674,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     ],
                     imports: [
                         CommonModule,
-                        A11yModule,
                         ReactiveFormsModule,
                         FormlyModule.forRoot({
                             validationMessages: [
@@ -3227,9 +3699,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 { name: 'multischema', component: GioFjsMultiSchemaTypeComponent },
                             ],
                             extensions: [{ name: 'banner', extension: { onPopulate: bannerExtension } }],
-                            extras: {
-                                checkExpressionOn: 'changeDetectionCheck',
-                            },
                         }),
                         FormlyMaterialModule,
                         GioIconsModule,