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

package/fesm2020/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';
@@ -12,7 +12,7 @@ import { ComponentHarness, HarnessPredicate, parallel, TestKey } from '@angular/
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i3$1 from '@angular/material/form-field';
 import { MatFormFieldControl, MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
-import { isEmpty, toLower, dropRight, isNil, isArray, remove, isObject, cloneDeep } 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';
@@ -43,9 +43,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';
 
 /*
@@ -324,7 +323,7 @@ class GioFormTagsInputComponent {
     }
     // From ControlValueAccessor interface
     get empty() {
-        return isEmpty(this.value) && isEmpty(this._tagInput?.nativeElement?.value);
+        return isEmpty$1(this.value) && isEmpty$1(this._tagInput?.nativeElement?.value);
     }
     // From ControlValueAccessor interface
     get shouldLabelFloat() {
@@ -386,7 +385,7 @@ class GioFormTagsInputComponent {
     addChipToFormControl(event) {
         const input = this._tagInput?.nativeElement;
         const tagToAdd = (event.value ?? '').trim();
-        if (isEmpty(tagToAdd)) {
+        if (isEmpty$1(tagToAdd)) {
             return;
         }
         // Add the tag only if shouldAddTag in validationCb return true
@@ -1170,7 +1169,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;
@@ -2778,75 +2777,607 @@ 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) {
-        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;
+// 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;
         }
-        // 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;
+    }
+    return total;
+}
+class GioJsonschema {
+    toFieldConfig(schema, options) {
+        return this._toFieldConfig(schema, { schema, ...(options || {}) });
+    }
+    _toFieldConfig(schema, { key, ...options }) {
+        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 = { ...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], {
+                        ...options,
+                        key: property,
+                        isOptional: options.isOptional || !isRequired,
+                    });
+                    field.fieldGroup.push(f);
+                    if (isRequired || propDeps[property]) {
+                        f.expressions = {
+                            ...(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 { [property]: constSchema, ...properties } = oneOfSchemaItem.properties;
+                                field.fieldGroup.push({
+                                    ...this._toFieldConfig({ ...oneOfSchemaItem, properties }, { ...options, resetOnHide: true }),
+                                    expressions: {
+                                        hide: f => !f.model || getConstValue(constSchema) !== f.model[property],
+                                    },
+                                });
+                            });
+                        }
+                        else {
+                            field.fieldGroup.push({
+                                ...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, { ...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, { ...options, key, shareFormControl: false })];
+        }
+        // map in possible formlyConfig options from the widget property
+        if (schema.widget?.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;
     }
-    set jsonSchema(jsonSchema) {
-        if (isObject(jsonSchema)) {
-            this.fields = [this.toFormlyFieldConfig(jsonSchema)];
+    resolveAllOf({ allOf, ...baseSchema }, options) {
+        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);
     }
-    ngOnInit() {
-        this.formGroup.statusChanges.pipe(takeUntil(this.unsubscribe$)).subscribe(status => {
-            if (status === 'VALID') {
-                this.ngControl?.control?.setErrors(null);
+    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) => ({
+                        ...this._toFieldConfig(s, { ...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?.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 {
+            ...definition,
+            ...(schema.properties ? { properties: { ...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);
+                    }
+                });
             }
-            if (status === 'INVALID') {
-                this.ngControl?.control?.setErrors({ invalid: true });
+            else {
+                // schema dependencies
+                schemaDeps[prop] = dependency;
             }
         });
-        // 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);
-        });
+        return { propDeps, schemaDeps };
     }
-    ngOnDestroy() {
-        this.unsubscribe$.next();
-        this.unsubscribe$.unsubscribe();
-        this.fm.stopMonitoring(this.elRef.nativeElement);
+    guessSchemaType(schema) {
+        const type = schema?.type;
+        if (!type && 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] : [];
     }
-    // From ControlValueAccessor
-    writeValue(value) {
-        this.model = cloneDeep(value) ?? {};
+    addValidator(field, name, validator) {
+        field.validators = field.validators || {};
+        field.validators[name] = validator;
     }
-    // From ControlValueAccessor
-    registerOnChange(fn) {
-        this._onChange = fn;
+    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)));
     }
-    // From ControlValueAccessor
-    registerOnTouched(fn) {
-        this._onTouched = fn;
+    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);
     }
-    // From ControlValueAccessor
-    setDisabledState(_isDisabled) {
-        throw new Error('Method not implemented.');
+    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], {
+                        ...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)
+ *
+ * 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(formlyJsonschema) {
+        this.formlyJsonschema = formlyJsonschema;
+        this.formGroup = new FormGroup({});
+        this.options = {};
+        this.model = {};
+        this.fields = [];
+    }
+    set jsonSchema(jsonSchema) {
+        if (isObject$1(jsonSchema)) {
+            this.fields = [this.toFormlyFieldConfig(jsonSchema)];
+        }
+    }
+    set initialValue(initialValue) {
+        if (initialValue) {
+            this.model = cloneDeep(initialValue);
+        }
     }
     toFormlyFieldConfig(jsonSchema) {
         return this.formlyJsonschema.toFieldConfig(jsonSchema, {
@@ -2868,23 +3399,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
             }] } });
 
 /*
@@ -2939,30 +3469,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"] }]
         }] });
 
 /*
@@ -2984,8 +3511,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">
@@ -3003,14 +3530,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">
@@ -3028,8 +3553,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) {
@@ -3116,37 +3640,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"] }]
         }] });
 
 /*
@@ -3173,12 +3693,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: [
@@ -3204,9 +3722,6 @@ GioFormJsonSchemaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
                     { name: 'multischema', component: GioFjsMultiSchemaTypeComponent },
                 ],
                 extensions: [{ name: 'banner', extension: { onPopulate: bannerExtension } }],
-                extras: {
-                    checkExpressionOn: 'changeDetectionCheck',
-                },
             }),
             FormlyMaterialModule,
             GioIconsModule,
@@ -3224,7 +3739,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     ],
                     imports: [
                         CommonModule,
-                        A11yModule,
                         ReactiveFormsModule,
                         FormlyModule.forRoot({
                             validationMessages: [
@@ -3250,9 +3764,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,