@grumptech/ngx-formly-editor 1.0.0

package/fesm2022/grumptech-ngx-formly-editor.mjs

@@ -0,0 +1,1714 @@
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { BehaviorSubject, Subject, fromEvent, debounceTime, map, startWith, skip } from 'rxjs';
+import * as i0 from '@angular/core';
+import { Injectable, InjectionToken, inject, signal, ElementRef, ChangeDetectorRef, DestroyRef, ChangeDetectionStrategy, Component, model, viewChild, output, input } from '@angular/core';
+import { toFlatArray, jsonParse, jsonStringify, cleanInput, jsonParseFieldsAndValidate } from '@grumptech/formly-converters';
+import { FormlyConfig, FieldArrayType, FormlyForm } from '@ngx-formly/core';
+import { MatxPanel, MatxPanelHeaderButton } from '@grumptech/ngx-matx/panel';
+import { CodeEditor } from '@grumptech/ngx-basic-ui/code-editor';
+import * as i1 from '@angular/forms';
+import { FormGroup, ReactiveFormsModule, UntypedFormGroup, FormControl } from '@angular/forms';
+import { AsyncPipe } from '@angular/common';
+import { MatIcon } from '@angular/material/icon';
+import { MatxDragDropTree } from '@grumptech/ngx-matx/drag-drop-tree';
+import { MatButton } from '@angular/material/button';
+import { MatxFullWidthFormFields } from '@grumptech/ngx-matx/full-width-form-fields';
+import JSON5 from 'json5';
+import * as i2 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatInput } from '@angular/material/input';
+import * as i3 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+
+class TestValueManager {
+    changeSubject = new BehaviorSubject(null);
+    onChange = this.changeSubject.asObservable();
+    ngOnDestroy() {
+        this.changeSubject.complete();
+    }
+    set(value) {
+        this.changeSubject.next(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TestValueManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TestValueManager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TestValueManager, decorators: [{
+            type: Injectable
+        }] });
+
+class UndoManager {
+    states = [];
+    currentState = 0;
+    change = new Subject();
+    onChange = this.change.asObservable();
+    ngOnDestroy() {
+        this.change.complete();
+    }
+    push(state) {
+        if (this.currentState < this.states.length - 1) {
+            this.states.splice(this.currentState + 1);
+        }
+        this.states.push(JSON.stringify(state));
+        this.currentState = this.states.length - 1;
+    }
+    clear() {
+        this.states.splice(0, this.states.length - 1);
+        this.currentState = 0;
+    }
+    undo() {
+        if (this.currentState > 0) {
+            this.currentState--;
+            this.change.next(JSON.parse(this.states[this.currentState]));
+        }
+    }
+    redo() {
+        if (this.currentState < this.states.length - 1) {
+            this.currentState++;
+            this.change.next(JSON.parse(this.states[this.currentState]));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UndoManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UndoManager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UndoManager, decorators: [{
+            type: Injectable
+        }] });
+
+class FieldConfigBuilder {
+    fields = [];
+    parentByField = new Map();
+    build() {
+        return this.fields;
+    }
+    set(fields) {
+        this.fields = fields;
+        this.fields.forEach((i) => this.addToMapsRecursive(i));
+        return this;
+    }
+    add(field, idx, parent) {
+        let list = this.fields;
+        if (parent) {
+            parent.fieldGroup = parent.fieldGroup || [];
+            list = parent.fieldGroup;
+        }
+        list.splice(idx, 0, field);
+        this.addToMapsRecursive(field, parent);
+        return this;
+    }
+    addToFieldArray(field, parent, first = true) {
+        if (typeof parent.fieldArray === 'object') {
+            field = {
+                type: 'formly-group',
+                fieldGroup: first
+                    ? [field, parent.fieldArray]
+                    : [parent.fieldArray, field],
+            };
+            this.removeFromMapsRecursive(parent.fieldArray);
+        }
+        parent.fieldArray = field;
+        this.addToMapsRecursive(field, parent);
+        return this;
+    }
+    insertAfter(field, referenceField) {
+        const parent = this.parentByField.get(referenceField);
+        if (parent?.fieldArray === referenceField) {
+            return this.addToFieldArray(field, parent, false);
+        }
+        const index = this.getIndex(referenceField, parent?.fieldGroup || this.fields);
+        return this.add(field, index + 1, parent);
+    }
+    update(field, newField) {
+        const parent = this.parentByField.get(field);
+        if (parent && parent.fieldArray === field) {
+            parent.fieldArray = newField;
+        }
+        else {
+            const list = parent ? parent.fieldGroup || [] : this.fields;
+            const idx = this.getIndex(field, list);
+            list.splice(idx, 1, newField);
+        }
+        this.removeFromMapsRecursive(field);
+        this.addToMapsRecursive(newField);
+        return this;
+    }
+    remove(field) {
+        const parent = this.parentByField.get(field);
+        if (parent && parent.fieldArray === field) {
+            delete parent.fieldArray;
+        }
+        else {
+            const list = parent ? parent.fieldGroup || [] : this.fields;
+            const idx = this.getIndex(field, list);
+            list.splice(idx, 1);
+        }
+        this.removeFromMapsRecursive(field);
+        return this;
+    }
+    getIndex(field, list) {
+        const idx = list.indexOf(field);
+        if (idx === -1) {
+            throw new Error(`Formly builder: field not found: ${JSON.stringify(field)}`);
+        }
+        return idx;
+    }
+    addToMapsRecursive(field, parent) {
+        if (parent) {
+            this.parentByField.set(field, parent);
+        }
+        if (typeof field.fieldArray === 'object') {
+            this.addToMapsRecursive(field.fieldArray, field);
+        }
+        field.fieldGroup?.forEach((i) => this.addToMapsRecursive(i, field));
+    }
+    removeFromMapsRecursive(field) {
+        this.parentByField.delete(field);
+        if (typeof field.fieldArray === 'object') {
+            this.removeFromMapsRecursive(field.fieldArray);
+        }
+        field.fieldGroup?.forEach((i) => this.removeFromMapsRecursive(i));
+    }
+}
+
+const defaultProperties$1 = {
+    key: {
+        key: 'key',
+        type: 'formly-editor-input',
+        props: { label: 'key' },
+    },
+    id: {
+        key: 'id',
+        type: 'formly-editor-input',
+        props: { label: 'id' },
+    },
+    name: {
+        key: 'name',
+        type: 'formly-editor-input',
+        props: { label: 'name' },
+    },
+    type: {
+        key: 'type',
+        type: 'formly-editor-select',
+        props: { label: 'type' },
+    },
+    className: {
+        key: 'className',
+        type: 'formly-editor-input',
+        props: { label: 'className' },
+    },
+    template: {
+        key: 'template',
+        type: 'formly-editor-textarea',
+        props: { label: 'template' },
+    },
+    defaultValue: {
+        key: 'defaultValue',
+        type: 'formly-editor-input',
+        props: { label: 'defaultValue' },
+    },
+    hide: {
+        key: 'hide',
+        type: 'formly-editor-checkbox',
+        props: { label: 'hide' },
+    },
+    focus: {
+        key: 'focus',
+        type: 'formly-editor-checkbox',
+        props: { label: 'focus' },
+    },
+    fieldGroupClassName: {
+        key: 'fieldGroupClassName',
+        type: 'formly-editor-input',
+        props: { label: 'fieldGroupClassName' },
+    },
+    'props.type': {
+        key: 'props.type',
+        type: 'formly-editor-input',
+        props: { label: 'type' },
+    },
+    'props.label': {
+        key: 'props.label',
+        type: 'formly-editor-input',
+        props: { label: 'label' },
+    },
+    'props.placeholder': {
+        key: 'props.placeholder',
+        type: 'formly-editor-input',
+        props: { label: 'placeholder' },
+    },
+    'props.disabled': {
+        key: 'props.disabled',
+        type: 'formly-editor-checkbox',
+        props: { label: 'disabled' },
+    },
+    'props.options': {
+        key: 'props.options',
+        type: 'formly-editor-array-dialog',
+        props: {
+            label: 'options',
+            dialogTitle: 'Options',
+            field: {
+                fieldGroup: [
+                    {
+                        key: 'label',
+                        type: 'formly-editor-input',
+                        props: { label: 'Label' },
+                    },
+                    {
+                        key: 'value',
+                        type: 'formly-editor-input',
+                        props: { label: 'Value' },
+                    },
+                ],
+            },
+        },
+    },
+    'props.rows': {
+        key: 'props.rows',
+        type: 'formly-editor-input-number',
+        props: { label: 'rows' },
+    },
+    'props.cols': {
+        key: 'props.cols',
+        type: 'formly-editor-input-number',
+        props: { label: 'cols' },
+    },
+    'props.description': {
+        key: 'props.description',
+        type: 'formly-editor-input',
+        props: { label: 'description' },
+    },
+    'props.hidden': {
+        key: 'props.hidden',
+        type: 'formly-editor-checkbox',
+        props: { label: 'hidden' },
+    },
+    'props.max': {
+        key: 'props.max',
+        type: 'formly-editor-input-number',
+        props: { label: 'max' },
+    },
+    'props.min': {
+        key: 'props.min',
+        type: 'formly-editor-input-number',
+        props: { label: 'min' },
+    },
+    'props.minLength': {
+        key: 'props.minLength',
+        type: 'formly-editor-input-number',
+        props: { label: 'minLength' },
+    },
+    'props.maxLength': {
+        key: 'props.maxLength',
+        type: 'formly-editor-input-number',
+        props: { label: 'maxLength' },
+    },
+    'props.pattern': {
+        key: 'props.pattern',
+        type: 'formly-editor-input',
+        props: { label: 'pattern' },
+    },
+    'props.required': {
+        key: 'props.required',
+        type: 'formly-editor-checkbox',
+        props: { label: 'required' },
+    },
+    'props.tabindex': {
+        key: 'props.tabindex',
+        type: 'formly-editor-input-number',
+        props: { label: 'tabindex' },
+    },
+    'props.readonly': {
+        key: 'props.readonly',
+        type: 'formly-editor-checkbox',
+        props: { label: 'readonly' },
+    },
+    'props.step': {
+        key: 'props.step',
+        type: 'formly-editor-input-number',
+        props: { label: 'step' },
+    },
+    spacing: {},
+    'props.url': {
+        key: 'props.url',
+        type: 'formly-editor-input',
+        props: { label: 'url' },
+    },
+    'props.method': {
+        key: 'props.method',
+        type: 'formly-editor-input',
+        props: { label: 'method' },
+    },
+    'props.valueKey': {
+        key: 'props.valueKey',
+        type: 'formly-editor-input',
+        props: { label: 'value key' },
+    },
+    'props.labelKey': {
+        key: 'props.labelKey',
+        type: 'formly-editor-input',
+        props: { label: 'label key' },
+    },
+    'props.inputGroups': {
+        key: 'props.inputGroups',
+        type: 'formly-editor-select',
+        props: {
+            label: 'input groups',
+            multiple: true,
+            options: [
+                { label: 'path', value: 'path' },
+                { label: 'query', value: 'query' },
+                { label: 'body', value: 'body' },
+                { label: 'result', value: 'result' },
+            ],
+        },
+    },
+    'props.responseType': {
+        key: 'props.responseType',
+        type: 'formly-editor-select',
+        props: {
+            label: 'response type',
+            options: [
+                { label: 'none', value: undefined },
+                { label: 'arraybuffer', value: 'arraybuffer' },
+                { label: 'blob', value: 'blob' },
+                { label: 'json', value: 'json' },
+                { label: 'text', value: 'text' },
+            ],
+        },
+    },
+    'props.addButtonLabel': {
+        key: 'props.addButtonLabel',
+        type: 'formly-editor-input',
+        props: { label: 'add button label' },
+    },
+    'props.emptyArrayMessage': {
+        key: 'props.emptyArrayMessage',
+        type: 'formly-editor-input',
+        props: { label: 'empty array message' },
+    },
+    'props.navigationDisabled': {
+        key: 'props.navigationDisabled',
+        type: 'formly-editor-checkbox',
+        props: { label: 'disable navigation' },
+    },
+    'props.action': {
+        key: 'props.action',
+        type: 'formly-editor-select',
+        props: {
+            label: 'action',
+            options: [
+                { label: 'send-and-clear', value: 'send-and-clear' },
+                { label: 'send-and-close', value: 'send-and-close' },
+                { label: 'send-and-navigate', value: 'send-and-navigate' },
+                { label: 'send-and-show-message', value: 'send-and-show-message' },
+            ],
+        },
+    },
+    'props.autoRun': {
+        key: 'props.autoRun',
+        type: 'formly-editor-checkbox',
+        props: { label: 'run automatically' },
+    },
+    'props.form': {
+        key: 'props.form',
+        type: 'formly-editor-input',
+        props: { label: 'form' },
+    },
+    'props.menu': {
+        key: 'props.menu',
+        type: 'formly-editor-menu-dialog',
+        props: { label: 'menu' },
+    },
+    'props.pages': {
+        key: 'props.pages',
+        type: 'formly-editor-array-dialog',
+        props: {
+            label: 'pages',
+            dialogTitle: 'Pages',
+            width: 800,
+            field: {
+                fieldGroup: [
+                    {
+                        key: 'url',
+                        type: 'formly-editor-input',
+                        props: { label: 'url' },
+                    },
+                    {
+                        key: 'breadcrumbParts',
+                        type: 'formly-editor-array-dialog',
+                        props: {
+                            label: 'breadcrumb parts',
+                            dialogTitle: 'Breadcrumb parts',
+                            width: 750,
+                            field: {
+                                fieldGroup: [
+                                    {
+                                        key: 'label',
+                                        type: 'formly-editor-input',
+                                        props: { label: 'label' },
+                                    },
+                                    {
+                                        key: 'url',
+                                        type: 'formly-editor-input',
+                                        props: { label: 'url' },
+                                    },
+                                ],
+                            },
+                        },
+                    },
+                ],
+            },
+        },
+    },
+};
+
+const defaultProperties = [
+    'key',
+    'type',
+    'props.required',
+    'props.label',
+    'props.placeholder',
+    'props.description',
+    'hide',
+    'props.disabled',
+    'props.readonly',
+];
+const propertiesWithOptions = [
+    'key',
+    'type',
+    'props.required',
+    'props.label',
+    'props.placeholder',
+    'props.description',
+    'hide',
+    'props.disabled',
+    'props.readonly',
+    'props.options',
+];
+const propertiesArrayType = [
+    'key',
+    'type',
+    'props.required',
+    'props.label',
+    'hide',
+    'props.disabled',
+    'props.readonly',
+    'props.emptyArrayMessage',
+    'props.addButtonLabel',
+];
+const propertiesActionType = [
+    'key',
+    'type',
+    'props.inputGroups',
+    'props.label',
+    'props.url',
+    'props.method',
+    'props.responseType',
+    'props.action',
+    'hide',
+    'props.disabled',
+];
+const defaultPropertiesByType = {
+    action: propertiesActionType,
+    app: ['spacing', 'type', 'props.menu', 'props.pages'],
+    'app-breadcrumb': ['key', 'type'],
+    'app-navigation': ['key', 'type'],
+    array: propertiesArrayType,
+    boolean: defaultProperties,
+    checkbox: defaultProperties,
+    datepicker: defaultProperties,
+    datetimepicker: defaultProperties,
+    'dialog-button': ['key', 'type', 'props.label', 'props.form', 'hide'],
+    enum: propertiesWithOptions,
+    'error-message': defaultProperties,
+    'formly-template': ['spacing', 'template'],
+    grid: propertiesArrayType,
+    input: defaultProperties,
+    integer: defaultProperties,
+    link: ['key', 'type', 'props.label', 'props.url', 'hide'],
+    'load-action': propertiesActionType
+        .map((i) => (i === 'props.action' ? 'spacing' : i))
+        .concat(['props.autoRun']),
+    'formly-group': ['key', 'type', 'hide', 'props.disabled'],
+    message: defaultProperties,
+    'message-container': ['spacing', 'type'],
+    number: defaultProperties,
+    multicheckbox: propertiesWithOptions,
+    object: [
+        'key',
+        'type',
+        'props.required',
+        'props.label',
+        'hide',
+        'props.disabled',
+        'props.readonly',
+    ],
+    page: ['props.navigationDisabled', 'type'],
+    'save-action': propertiesActionType.map((i) => i === 'props.action' ? 'spacing' : i),
+    radio: propertiesWithOptions,
+    select: propertiesWithOptions,
+    string: defaultProperties,
+    textarea: defaultProperties.slice().concat(['props.rows']),
+    'url-select': [
+        'key',
+        'type',
+        'props.required',
+        'props.label',
+        'props.placeholder',
+        'props.description',
+        'hide',
+        'props.disabled',
+        'props.readonly',
+        'props.url',
+        'props.valueKey',
+        'props.labelKey',
+    ],
+};
+
+const defaultEditorConfig = {
+    groupTypes: ['formly-group', 'object', 'app', 'page', 'message-container'],
+    properties: defaultProperties$1,
+    propertiesByType: defaultPropertiesByType,
+    formRenderConfig: {
+        editFormFieldConverter: (field) => {
+            field.hide && delete field.hide;
+            field.expressions && delete field.expressions;
+        },
+        testFormFieldConverter: () => { },
+    },
+};
+
+const FORMLY_EDITOR_CONFIG = new InjectionToken('formlyEditorConfig');
+
+class EditorConfigReader {
+    groupTypes;
+    properties;
+    propertiesByType;
+    formRenderConfig;
+    constructor() {
+        const config = inject(FORMLY_EDITOR_CONFIG);
+        const defaults = defaultEditorConfig;
+        this.groupTypes = config.groupTypes ?? defaults.groupTypes ?? [];
+        this.properties = Object.assign({}, defaults.properties, config.properties);
+        this.propertiesByType = Object.assign({}, defaults.propertiesByType, config.propertiesByType);
+        this.formRenderConfig = Object.assign({}, defaults.formRenderConfig, config.formRenderConfig);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: EditorConfigReader, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: EditorConfigReader });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: EditorConfigReader, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class FieldTypesReader {
+    formlyConfig = inject(FormlyConfig);
+    groupTypes = inject(EditorConfigReader).groupTypes;
+    initialized = false;
+    fieldTypes = [];
+    fieldTypesSet = new Set();
+    fieldArrayTypesSet = new Set();
+    fieldGroupTypesSet = new Set();
+    initialize() {
+        if (this.initialized) {
+            return;
+        }
+        const fieldTypes = this.formlyConfig.types;
+        this.fieldTypes = Object.freeze(Object.keys(fieldTypes)
+            .filter((i) => !i.startsWith('formly-editor-'))
+            .sort((x, y) => x.localeCompare(y)));
+        this.fieldTypesSet = new Set(this.fieldTypes);
+        this.fieldGroupTypesSet = new Set(this.groupTypes);
+        this.fieldArrayTypesSet = new Set(this.fieldTypes.filter((i) => fieldTypes[i].component?.prototype instanceof FieldArrayType));
+        this.initialized = true;
+    }
+    get() {
+        this.initialize();
+        return this.fieldTypes;
+    }
+    getType(field) {
+        this.initialize();
+        if (typeof field.type === 'string') {
+            return field.type;
+        }
+        return field.template ? 'formly-template' : 'formly-group';
+    }
+    getStandardTypes() {
+        this.initialize();
+        return this.fieldTypes.filter((i) => i !== 'formly-template' &&
+            !this.fieldGroupTypesSet.has(i) &&
+            !this.fieldArrayTypesSet.has(i));
+    }
+    getGroupTypes() {
+        this.initialize();
+        return this.fieldTypes.filter((i) => this.fieldGroupTypesSet.has(i));
+    }
+    getArrayTypes() {
+        this.initialize();
+        return this.fieldTypes.filter((i) => this.fieldArrayTypesSet.has(i));
+    }
+    hasExistingType(field) {
+        this.initialize();
+        return (!('type' in field) ||
+            (typeof field.type === 'string' && this.fieldTypesSet.has(field.type)));
+    }
+    isFieldGroup(field) {
+        this.initialize();
+        return this.fieldGroupTypesSet.has(this.getType(field));
+    }
+    isFieldArray(field) {
+        this.initialize();
+        return (typeof field.type === 'string' && this.fieldArrayTypesSet.has(field.type));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FieldTypesReader, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FieldTypesReader });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FieldTypesReader, decorators: [{
+            type: Injectable
+        }] });
+
+class SelectionManager {
+    selection = new Set();
+    selectSubject = new BehaviorSubject(null);
+    onSelect = this.selectSubject.asObservable();
+    ngOnDestroy() {
+        this.selectSubject.complete();
+    }
+    has(key) {
+        return this.selection.has(key);
+    }
+    get() {
+        return [...this.selection.keys()];
+    }
+    getLast() {
+        return this.selectSubject.value;
+    }
+    set(selection) {
+        this.selection = new Set(selection);
+        const last = this.selectSubject.value;
+        this.next(last && !this.selection.has(last) ? null : last);
+    }
+    replace(oldKey, newKey) {
+        if (this.selection.has(oldKey)) {
+            this.selection.delete(oldKey);
+            this.selection.add(newKey);
+            this.next(newKey);
+        }
+    }
+    clear() {
+        if (this.selection.size !== 0) {
+            this.selection.clear();
+        }
+        this.next(null);
+    }
+    select(key, ctrlKey, shiftKey) {
+        if (key === null) {
+            return this.clear();
+        }
+        if (ctrlKey || shiftKey) {
+            return this.toggle(key);
+        }
+        if (this.selection.has(key) && this.selection.size === 1) {
+            return this.next(key);
+        }
+        this.selection.clear();
+        this.selection.add(key);
+        this.next(key);
+    }
+    toggle(key) {
+        if (this.selection.has(key)) {
+            this.selection.delete(key);
+            this.next(null);
+        }
+        else {
+            this.selection.add(key);
+            this.next(key);
+        }
+    }
+    next(key) {
+        this.selectSubject.next(key);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SelectionManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SelectionManager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SelectionManager, decorators: [{
+            type: Injectable
+        }] });
+
+class DataManager {
+    onChange;
+    selection = inject((SelectionManager));
+    undoManager = inject((UndoManager));
+    formlyFieldTypes = inject(FieldTypesReader);
+    fields = [];
+    change = new BehaviorSubject([]);
+    constructor() {
+        this.onChange = this.change.asObservable();
+        this.undoManager.onChange.subscribe((state) => {
+            this.selection.clear();
+            this.fields.splice(0);
+            this.fields.push(...state);
+            this.change.next(this.fields);
+        });
+    }
+    ngOnDestroy() {
+        this.change.complete();
+    }
+    setFields(fields) {
+        this.undoManager.clear();
+        this.selection.clear();
+        this.fields = fields;
+        this.update();
+    }
+    getFields() {
+        return this.fields;
+    }
+    addFields(fields) {
+        if (fields.length === 0) {
+            return;
+        }
+        const selectedField = this.selection.getLast();
+        const configBuilder = new FieldConfigBuilder().set(this.fields);
+        if (!selectedField) {
+            fields.forEach((i) => configBuilder.add(i, this.fields.length));
+        }
+        else if (this.formlyFieldTypes.isFieldGroup(selectedField)) {
+            fields.forEach((i, idx) => configBuilder.add(i, idx, selectedField ?? undefined));
+        }
+        else if (!this.formlyFieldTypes.isFieldArray(selectedField)) {
+            fields
+                .reverse()
+                .forEach((i) => configBuilder.insertAfter(i, selectedField));
+        }
+        else if (typeof selectedField.fieldArray === 'object') {
+            configBuilder.update(selectedField.fieldArray, {
+                type: 'formly-group',
+                fieldGroup: [...fields, selectedField.fieldArray],
+            });
+        }
+        else {
+            configBuilder.addToFieldArray(fields.length > 1
+                ? { type: 'formly-group', fieldGroup: fields }
+                : fields[0], selectedField);
+        }
+        this.update();
+    }
+    updateField(oldField, newField) {
+        const configBuilder = new FieldConfigBuilder().set(this.fields);
+        configBuilder.update(oldField, newField);
+        this.selection.replace(oldField, newField);
+        this.update();
+    }
+    moveField(field, targetIndex, target) {
+        const configBuilder = new FieldConfigBuilder().set(this.fields);
+        configBuilder.remove(field);
+        if (!target || !this.formlyFieldTypes.isFieldArray(target)) {
+            configBuilder.add(field, targetIndex, target);
+        }
+        else {
+            configBuilder.addToFieldArray(field, target, !targetIndex);
+        }
+        this.update();
+    }
+    removeSelectedFields() {
+        const fields = this.getSelectedFields();
+        if (fields.length) {
+            const configBuilder = new FieldConfigBuilder().set(this.fields);
+            fields.forEach((i) => configBuilder.remove(i));
+            this.selection.clear();
+            this.update();
+        }
+    }
+    getSelectedFields() {
+        return this.getSelectedFieldsRecursive(this.fields);
+    }
+    getSelectedFieldsRecursive(fields) {
+        return fields.flatMap((i) => {
+            if (this.selection.has(i)) {
+                return i;
+            }
+            const children = (typeof i.fieldArray === 'object' ? [i.fieldArray] : []).concat(i.fieldGroup || []);
+            return this.getSelectedFieldsRecursive(children);
+        });
+    }
+    update() {
+        this.undoManager.push(this.fields);
+        this.change.next(this.fields);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DataManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DataManager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DataManager, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class FieldMarker {
+    FORMLY_DESIGNER_CLASS_PREFIX = 'formly-designer-class-prefix_';
+    markField(field, id) {
+        field.className =
+            (field.className ? `${field.className} ` : '') +
+                `${this.FORMLY_DESIGNER_CLASS_PREFIX}${id}`;
+    }
+    getIdFromElement(element) {
+        for (let i = 0, l = element.classList.length; i < l; i++) {
+            const cssClass = element.classList[i];
+            if (cssClass.startsWith(this.FORMLY_DESIGNER_CLASS_PREFIX)) {
+                return cssClass.replace(this.FORMLY_DESIGNER_CLASS_PREFIX, '');
+            }
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FieldMarker, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FieldMarker, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FieldMarker, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class DataValidator {
+    fieldTypesReader = inject(FieldTypesReader);
+    validate(fields) {
+        const result = new Map();
+        if (fields.length > 1) {
+            this.validateField({ fieldGroup: fields }, result);
+        }
+        toFlatArray(fields).forEach((i, idx) => {
+            if (idx !== 0 ||
+                fields.length > 1 ||
+                !this.fieldTypesReader.isFieldArray(i)) {
+                this.validateField(i, result);
+            }
+        });
+        return result;
+    }
+    validateField(field, messages) {
+        if (!this.fieldTypesReader.hasExistingType(field)) {
+            messages.set(field, `Unknown field type '${field.type}'`);
+        }
+        if (field.fieldGroup?.length) {
+            field.fieldGroup
+                ?.filter((i) => !i.key && this.fieldTypesReader.isFieldArray(i))
+                ?.forEach((i) => messages.set(i, 'Field array in a group should have a key'));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DataValidator, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DataValidator });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DataValidator, decorators: [{
+            type: Injectable
+        }] });
+
+class InitialValueFactory {
+    fieldTypesReader = inject(FieldTypesReader);
+    create(fields, defaultArraySize = 0) {
+        const result = this.createRecursive(fields, defaultArraySize);
+        return defaultArraySize ? result : Array.isArray(result) ? [] : {};
+    }
+    createRecursive(fields, defaultArraySize) {
+        const result = {};
+        let arrayResult = null;
+        fields.forEach((i) => {
+            const value = this.createRecursiveForField(i, defaultArraySize);
+            if (i.key) {
+                result[`${i.key}`] = value;
+            }
+            else if (typeof value === 'object') {
+                Array.isArray(value)
+                    ? (arrayResult = value)
+                    : Object.assign(result, value);
+            }
+        });
+        return Object.keys(result).length ? result : arrayResult;
+    }
+    createRecursiveForField(field, defaultArraySize) {
+        if (this.fieldTypesReader.isFieldGroup(field) && field.fieldGroup) {
+            return this.createRecursive(field.fieldGroup, defaultArraySize);
+        }
+        if (this.fieldTypesReader.isFieldArray(field)) {
+            if (defaultArraySize === 0) {
+                return [];
+            }
+            const fieldGroup = typeof field.fieldArray === 'object'
+                ? field.fieldArray.fieldGroup
+                : null;
+            return fieldGroup
+                ? [this.createRecursive(fieldGroup, defaultArraySize)]
+                : [null];
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: InitialValueFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: InitialValueFactory });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: InitialValueFactory, decorators: [{
+            type: Injectable
+        }] });
+
+class ResultFormComponent {
+    overlayFields = signal([], ...(ngDevMode ? [{ debugName: "overlayFields" }] : /* istanbul ignore next */ []));
+    form = new FormGroup({});
+    formlyFields = signal([], ...(ngDevMode ? [{ debugName: "formlyFields" }] : /* istanbul ignore next */ []));
+    model = signal(undefined, ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
+    elementRef = inject(ElementRef);
+    changeDetectorRef = inject(ChangeDetectorRef);
+    dataManager = inject(DataManager);
+    selection = inject((SelectionManager));
+    marker = inject(FieldMarker);
+    dataValidator = inject(DataValidator);
+    initialValueFactory = inject(InitialValueFactory);
+    formRenderConfig = inject(EditorConfigReader).formRenderConfig;
+    changeDectorRef = inject(ChangeDetectorRef);
+    destroyRef = inject(DestroyRef);
+    ngOnInit() {
+        fromEvent(window, 'resize')
+            .pipe(takeUntilDestroyed(this.destroyRef), debounceTime(200))
+            .subscribe(() => this.render(this.dataManager.getFields()));
+        this.dataManager.onChange.subscribe((fields) => this.render(fields));
+        this.selection.onSelect.subscribe(() => this.changeDectorRef.detectChanges());
+    }
+    isSelected(field) {
+        return this.selection.has(field);
+    }
+    handleClick(field, event) {
+        this.selection.select(field, event.ctrlKey, event.shiftKey);
+    }
+    overlayFieldTrackBy(_index, item) {
+        return item.field;
+    }
+    render(fields) {
+        const fieldByIdx = new Map(toFlatArray(fields).map((i, idx) => [`${idx}`, i]));
+        const formlyFields = structuredClone(fields);
+        const validationMessages = this.dataValidator.validate(formlyFields);
+        toFlatArray(formlyFields).forEach((i, idx) => {
+            this.formRenderConfig.editFormFieldConverter(i);
+            this.marker.markField(i, `${idx}`);
+            const validationMessage = validationMessages.get(i);
+            if (validationMessage) {
+                this.markInvalidField(i, validationMessage);
+            }
+        });
+        this.clearForm(this.initialValueFactory.create(formlyFields, 1));
+        this.formlyFields.set(formlyFields);
+        this.changeDetectorRef.detectChanges();
+        const rect = this.elementRef.nativeElement.getBoundingClientRect();
+        this.overlayFields.set(Object.values(this.elementRef.nativeElement.getElementsByTagName('formly-field'))
+            .map((i) => ({
+            rect: this.calculateRect(i, rect),
+            field: fieldByIdx.get(this.marker.getIdFromElement(i)),
+        }))
+            .filter((i) => i.field));
+    }
+    markInvalidField(field, message) {
+        field.type = 'formly-template';
+        field.template = message;
+        if (field.fieldArray) {
+            delete field.fieldArray;
+        }
+        if (field.fieldGroup) {
+            delete field.fieldGroup;
+        }
+    }
+    clearForm(value) {
+        Object.keys(this.form.controls).forEach((i) => this.form.removeControl(i));
+        this.form.reset(value);
+        this.model.set(value);
+    }
+    calculateRect(element, container) {
+        const result = {
+            left: Number.MAX_VALUE,
+            top: Number.MAX_VALUE,
+            right: 0,
+            bottom: 0,
+        };
+        [element]
+            .concat(Object.values(element.querySelectorAll('*')))
+            .forEach((i) => {
+            const rect = i.getBoundingClientRect();
+            if (rect.width && rect.height) {
+                result.left = Math.min(rect.left, result.left);
+                result.top = Math.min(rect.top, result.top);
+                result.right = Math.max(rect.right, result.right);
+                result.bottom = Math.max(rect.bottom, result.bottom);
+            }
+        });
+        return {
+            left: Math.max(result.left - container.left, 0),
+            top: Math.max(result.top - container.top, 0),
+            right: Math.min(container.right - result.right, container.width),
+            bottom: Math.min(container.bottom - result.bottom, container.height),
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ResultFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ResultFormComponent, isStandalone: true, selector: "formly-designer-result-form", ngImport: i0, template: "<form [formGroup]=\"form\">\n  <formly-form\n    [fields]=\"formlyFields()\"\n    [form]=\"form\"\n    [model]=\"model()\"\n    inert=\"true\"\n  />\n</form>\n<div class=\"overlay\">\n  @for (field of overlayFields(); track overlayFieldTrackBy($index, field)) {\n    <div\n      [class]=\"'overlay_field' + (isSelected(field.field) ? '--selected' : '')\"\n      [style.left]=\"field.rect.left + 'px'\"\n      [style.top]=\"field.rect.top + 'px'\"\n      [style.right]=\"field.rect.right + 'px'\"\n      [style.bottom]=\"field.rect.bottom + 'px'\"\n      (click)=\"handleClick(field.field, $event)\"\n    ></div>\n  }\n</div>\n", styles: [":host{position:relative;display:block}.overlay{position:absolute;z-index:1;cursor:pointer;inset:0;opacity:.1}.overlay_field,.overlay_field--selected{position:absolute}.overlay_field--selected{opacity:1;background-color:gray}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ResultFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'formly-designer-result-form', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, FormlyForm], template: "<form [formGroup]=\"form\">\n  <formly-form\n    [fields]=\"formlyFields()\"\n    [form]=\"form\"\n    [model]=\"model()\"\n    inert=\"true\"\n  />\n</form>\n<div class=\"overlay\">\n  @for (field of overlayFields(); track overlayFieldTrackBy($index, field)) {\n    <div\n      [class]=\"'overlay_field' + (isSelected(field.field) ? '--selected' : '')\"\n      [style.left]=\"field.rect.left + 'px'\"\n      [style.top]=\"field.rect.top + 'px'\"\n      [style.right]=\"field.rect.right + 'px'\"\n      [style.bottom]=\"field.rect.bottom + 'px'\"\n      (click)=\"handleClick(field.field, $event)\"\n    ></div>\n  }\n</div>\n", styles: [":host{position:relative;display:block}.overlay{position:absolute;z-index:1;cursor:pointer;inset:0;opacity:.1}.overlay_field,.overlay_field--selected{position:absolute}.overlay_field--selected{opacity:1;background-color:gray}\n"] }]
+        }] });
+
+class ResultStructureComponent {
+    nodes;
+    fieldTypes = [];
+    formlyFieldTypes = inject(FieldTypesReader);
+    dataManager = inject(DataManager);
+    dataValidator = inject(DataValidator);
+    selection = inject((SelectionManager));
+    validationMessages;
+    changeDectorRef = inject(ChangeDetectorRef);
+    ngOnInit() {
+        this.fieldTypes = this.formlyFieldTypes.get();
+        this.nodes = this.dataManager.onChange.pipe(map((fields) => {
+            this.validationMessages = this.dataValidator.validate(fields);
+            return this.toDragDropNodes(fields);
+        }));
+        this.selection.onSelect.subscribe(() => this.changeDectorRef.detectChanges());
+    }
+    handleDropped(event) {
+        this.dataManager.moveField(event.currentArray[event.currentIndex].data, event.targetIndex, event.targetParent?.data);
+    }
+    handleClick(field, event) {
+        this.selection.select(field, event.ctrlKey, event.shiftKey);
+    }
+    isSelected(field) {
+        return this.selection.has(field);
+    }
+    getFieldType(field) {
+        return this.formlyFieldTypes.getType(field);
+    }
+    treeTrackBy(_index, item) {
+        return item.data;
+    }
+    getWarning(field) {
+        return this.validationMessages?.get(field);
+    }
+    toDragDropNodes(fields) {
+        return fields.map((i) => {
+            if (this.formlyFieldTypes.isFieldGroup(i)) {
+                return {
+                    data: i,
+                    childNodes: this.toDragDropNodes(i.fieldGroup || []),
+                };
+            }
+            if (this.formlyFieldTypes.isFieldArray(i)) {
+                return {
+                    data: i,
+                    childNodes: typeof i.fieldArray === 'object'
+                        ? this.toDragDropNodes([i.fieldArray])
+                        : [],
+                };
+            }
+            return { data: i };
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ResultStructureComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ResultStructureComponent, isStandalone: true, selector: "formly-designer-result-structure", ngImport: i0, template: "<matx-drag-drop-tree\n  [nodes]=\"(nodes | async) ?? []\"\n  [trackBy]=\"treeTrackBy\"\n  (dropped)=\"handleDropped($event)\"\n  class=\"tree\"\n>\n  <ng-template #headerTemplate let-data=\"data\">\n    <div\n      (click)=\"handleClick(data, $event)\"\n      [class]=\"'tree-node-header' + (isSelected(data) ? '--selected' : '')\"\n    >\n      <strong title=\"type\">[{{ getFieldType(data) }}]</strong>\n      <span title=\"key\"> {{ data?.key }} </span>\n      <em title=\"label\">{{ data?.props?.label }}</em>\n      @if (getWarning(data)) {\n        <span class=\"icon-container\">\n          &nbsp;\n          <mat-icon [title]=\"getWarning(data)\" color=\"warn\">warning</mat-icon>\n        </span>\n      }\n    </div>\n  </ng-template>\n</matx-drag-drop-tree>\n", styles: [".tree-node-header,.tree-node-header--selected{padding:5px;border-radius:4px;background-color:#fffc}.tree-node-header em,.tree-node-header--selected em{color:gray}.tree-node-header .icon-container,.tree-node-header--selected .icon-container{display:inline-block;width:30px;position:relative}.tree-node-header .icon-container mat-icon,.tree-node-header--selected .icon-container mat-icon{font-size:18px;position:absolute;top:1px;right:-5px}.tree-node-header--selected,.tree-node-header--selected--selected{background-color:#f0f0f0}.tree .tree-node-header{background:none}\n"], dependencies: [{ kind: "component", type: MatxDragDropTree, selector: "matx-drag-drop-tree", inputs: ["nodes", "trackBy"], outputs: ["dropped"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ResultStructureComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'formly-designer-result-structure', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, MatxDragDropTree, MatIcon], template: "<matx-drag-drop-tree\n  [nodes]=\"(nodes | async) ?? []\"\n  [trackBy]=\"treeTrackBy\"\n  (dropped)=\"handleDropped($event)\"\n  class=\"tree\"\n>\n  <ng-template #headerTemplate let-data=\"data\">\n    <div\n      (click)=\"handleClick(data, $event)\"\n      [class]=\"'tree-node-header' + (isSelected(data) ? '--selected' : '')\"\n    >\n      <strong title=\"type\">[{{ getFieldType(data) }}]</strong>\n      <span title=\"key\"> {{ data?.key }} </span>\n      <em title=\"label\">{{ data?.props?.label }}</em>\n      @if (getWarning(data)) {\n        <span class=\"icon-container\">\n          &nbsp;\n          <mat-icon [title]=\"getWarning(data)\" color=\"warn\">warning</mat-icon>\n        </span>\n      }\n    </div>\n  </ng-template>\n</matx-drag-drop-tree>\n", styles: [".tree-node-header,.tree-node-header--selected{padding:5px;border-radius:4px;background-color:#fffc}.tree-node-header em,.tree-node-header--selected em{color:gray}.tree-node-header .icon-container,.tree-node-header--selected .icon-container{display:inline-block;width:30px;position:relative}.tree-node-header .icon-container mat-icon,.tree-node-header--selected .icon-container mat-icon{font-size:18px;position:absolute;top:1px;right:-5px}.tree-node-header--selected,.tree-node-header--selected--selected{background-color:#f0f0f0}.tree .tree-node-header{background:none}\n"] }]
+        }] });
+
+class ResultTestComponent {
+    form = new UntypedFormGroup({});
+    formlyOptions = {};
+    formlyFields = [];
+    model;
+    dataManager = inject(DataManager);
+    initialValueFactory = inject(InitialValueFactory);
+    testValueManager = inject(TestValueManager);
+    formRenderConfig = inject(EditorConfigReader).formRenderConfig;
+    destroyRef = inject(DestroyRef);
+    fields = [];
+    constructor() {
+        this.fields = this.dataManager.getFields();
+        this.reset();
+    }
+    ngAfterViewInit() {
+        this.testValueManager.set(this.model);
+        this.form.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.testValueManager.set(this.model));
+    }
+    reset() {
+        const value = this.initialValueFactory.create(this.fields);
+        this.model = value;
+        this.form.reset(value);
+        const formlyFields = structuredClone(this.fields);
+        toFlatArray(formlyFields).forEach((i) => this.formRenderConfig.testFormFieldConverter(i));
+        this.formlyFields = formlyFields;
+        this.testValueManager.set(this.model);
+    }
+    validate() {
+        this.form.markAsDirty();
+        this.form.markAllAsTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ResultTestComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ResultTestComponent, isStandalone: true, selector: "formly-designer-result-test", ngImport: i0, template: "<formly-form\n  [form]=\"form\"\n  [fields]=\"formlyFields\"\n  [options]=\"formlyOptions\"\n  [model]=\"model\"\n/>\n<div class=\"button-container\">\n  <button mat-stroked-button (click)=\"reset()\">Clear</button>\n  <button mat-stroked-button (click)=\"validate()\">Validate</button>\n</div>\n", styles: [".button-container{text-align:right}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ResultTestComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'formly-designer-result-test', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButton, FormlyForm], template: "<formly-form\n  [form]=\"form\"\n  [fields]=\"formlyFields\"\n  [options]=\"formlyOptions\"\n  [model]=\"model\"\n/>\n<div class=\"button-container\">\n  <button mat-stroked-button (click)=\"reset()\">Clear</button>\n  <button mat-stroked-button (click)=\"validate()\">Validate</button>\n</div>\n", styles: [".button-container{text-align:right}\n"] }]
+        }], ctorParameters: () => [] });
+
+class ResultComponent {
+    mode = model('select', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    data = signal('', ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    formatter = (data) => {
+        const result = jsonParse(data);
+        return result.success ? jsonStringify(result.result) : data;
+    };
+    dataManager = inject(DataManager);
+    ngAfterContentInit() {
+        this.dataManager.onChange.subscribe((fields) => this.data.set(JSON.stringify(fields)));
+    }
+    setMode(mode) {
+        this.mode.set(mode);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ResultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ResultComponent, isStandalone: true, selector: "formly-designer-result", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mode: "modeChange" }, ngImport: i0, template: "<matx-panel headerTitle=\"Form\">\n  <matx-panel-header-button\n    icon=\"highlight_alt\"\n    tooltip=\"Select fields\"\n    (click)=\"setMode('select')\"\n    [selected]=\"mode() === 'select'\"\n  />\n  <matx-panel-header-button\n    icon=\"density_small\"\n    tooltip=\"Structure\"\n    (click)=\"setMode('structure')\"\n    [selected]=\"mode() === 'structure'\"\n  />\n  <matx-panel-header-button\n    icon=\"code\"\n    tooltip=\"View code\"\n    (click)=\"setMode('code')\"\n    [selected]=\"mode() === 'code'\"\n  />\n  <matx-panel-header-button\n    icon=\"play_arrow\"\n    tooltip=\"Test form\"\n    (click)=\"setMode('test')\"\n    [selected]=\"mode() === 'test'\"\n  />\n  @switch (mode()) {\n    @case (\"structure\") {\n      <formly-designer-result-structure />\n    }\n    @case (\"code\") {\n      <b-code-editor\n        [disabled]=\"true\"\n        [data]=\"data()\"\n        [formatter]=\"formatter\"\n      />\n    }\n    @case (\"select\") {\n      <formly-designer-result-form />\n    }\n    @case (\"test\") {\n      <formly-designer-result-test />\n    }\n  }\n</matx-panel>\n", dependencies: [{ kind: "component", type: ResultFormComponent, selector: "formly-designer-result-form" }, { kind: "component", type: ResultStructureComponent, selector: "formly-designer-result-structure" }, { kind: "component", type: ResultTestComponent, selector: "formly-designer-result-test" }, { kind: "component", type: MatxPanel, selector: "matx-panel", inputs: ["headerTitle", "fullHeight"] }, { kind: "component", type: MatxPanelHeaderButton, selector: "matx-panel-header-button", inputs: ["icon", "tooltip", "selected", "disabled"] }, { kind: "component", type: CodeEditor, selector: "b-code-editor", inputs: ["data", "disabled", "formatter", "validator"], outputs: ["validChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ResultComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'formly-designer-result', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        ResultFormComponent,
+                        ResultStructureComponent,
+                        ResultTestComponent,
+                        MatxPanel,
+                        MatxPanelHeaderButton,
+                        CodeEditor,
+                    ], template: "<matx-panel headerTitle=\"Form\">\n  <matx-panel-header-button\n    icon=\"highlight_alt\"\n    tooltip=\"Select fields\"\n    (click)=\"setMode('select')\"\n    [selected]=\"mode() === 'select'\"\n  />\n  <matx-panel-header-button\n    icon=\"density_small\"\n    tooltip=\"Structure\"\n    (click)=\"setMode('structure')\"\n    [selected]=\"mode() === 'structure'\"\n  />\n  <matx-panel-header-button\n    icon=\"code\"\n    tooltip=\"View code\"\n    (click)=\"setMode('code')\"\n    [selected]=\"mode() === 'code'\"\n  />\n  <matx-panel-header-button\n    icon=\"play_arrow\"\n    tooltip=\"Test form\"\n    (click)=\"setMode('test')\"\n    [selected]=\"mode() === 'test'\"\n  />\n  @switch (mode()) {\n    @case (\"structure\") {\n      <formly-designer-result-structure />\n    }\n    @case (\"code\") {\n      <b-code-editor\n        [disabled]=\"true\"\n        [data]=\"data()\"\n        [formatter]=\"formatter\"\n      />\n    }\n    @case (\"select\") {\n      <formly-designer-result-form />\n    }\n    @case (\"test\") {\n      <formly-designer-result-test />\n    }\n  }\n</matx-panel>\n" }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }, { type: i0.Output, args: ["modeChange"] }] } });
+
+class EditorFieldsReader {
+    fieldTypesReader = inject(FieldTypesReader);
+    fieldsByKey;
+    keysByType;
+    constructor() {
+        const config = inject(EditorConfigReader);
+        this.fieldsByKey = config.properties;
+        this.keysByType = config.propertiesByType;
+    }
+    getFields(type) {
+        const result = [];
+        if (!this.keysByType[type]) {
+            console.warn(`Editor config reader: No fields for type ${type} found`);
+        }
+        (this.keysByType[type] ?? []).forEach((i) => {
+            if (!this.fieldsByKey[i]) {
+                console.warn(`Editor config reader: Field with key ${i} for type ${type} not found`);
+                return;
+            }
+            const field = structuredClone(this.fieldsByKey[i]);
+            if (field.key === 'type' && !field.props?.options) {
+                field.props ??= {};
+                field.props.options = this.getOptions(type);
+            }
+            if (field.key === 'props.menu' && !field.props?.options) {
+                field.props ??= {};
+            }
+            result.push(field);
+        });
+        return [{ type: 'formly-editor-group', fieldGroup: result }];
+    }
+    getOptions(type) {
+        if (this.fieldTypesReader.isFieldArray({ type: type })) {
+            return this.fieldTypesReader
+                .getArrayTypes()
+                .map((i) => ({ value: i, label: i }));
+        }
+        if (this.fieldTypesReader.isFieldGroup({ type: type })) {
+            return this.fieldTypesReader
+                .getGroupTypes()
+                .map((i) => ({ value: i, label: i }));
+        }
+        return this.fieldTypesReader
+            .getStandardTypes()
+            .map((i) => ({ value: i, label: i }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: EditorFieldsReader, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: EditorFieldsReader });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: EditorFieldsReader, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class FormlyFieldEditorEdit {
+    form = new UntypedFormGroup({});
+    fields = signal([], ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
+    formField = signal(null, ...(ngDevMode ? [{ debugName: "formField" }] : /* istanbul ignore next */ []));
+    editorFieldsReader = inject(EditorFieldsReader);
+    fieldTypesReader = inject(FieldTypesReader);
+    selectionManager = inject((SelectionManager));
+    dataManager = inject(DataManager);
+    destroyRef = inject(DestroyRef);
+    field;
+    ngOnInit() {
+        this.form.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef), debounceTime(200))
+            .subscribe(() => this.save());
+        this.selectionManager.onSelect
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((field) => {
+            if (this.field !== field && field !== null) {
+                this.save();
+                this.field = field;
+                this.updateForm(field);
+                this.setValue(field);
+            }
+        });
+    }
+    save() {
+        if (this.form.pristine) {
+            return;
+        }
+        const formField = this.formField();
+        if (this.field && formField) {
+            this.form.markAsPristine();
+            const currentField = this.field;
+            this.field = structuredClone(formField);
+            cleanInput(this.field);
+            this.dataManager.updateField(currentField, this.field);
+            if (currentField.type !== this.field.type) {
+                this.updateForm(this.field);
+            }
+        }
+    }
+    setValue(field) {
+        field = structuredClone(field);
+        field.props ??= {};
+        this.formField.set(field);
+    }
+    updateForm(field) {
+        Object.keys(this.form.controls).forEach((i) => this.form.removeControl(i));
+        this.fields.set(this.editorFieldsReader.getFields(this.fieldTypesReader.getType(field)));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FormlyFieldEditorEdit, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: FormlyFieldEditorEdit, isStandalone: true, selector: "formly-designer-field-editor-edit", ngImport: i0, template: `
+    <form [formGroup]="form">
+      <matx-full-width-form-fields>
+        <formly-form [fields]="fields()" [form]="form" [model]="formField()" />
+      </matx-full-width-form-fields>
+    </form>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "component", type: MatxFullWidthFormFields, selector: "matx-full-width-form-fields" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FormlyFieldEditorEdit, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formly-designer-field-editor-edit',
+                    template: `
+    <form [formGroup]="form">
+      <matx-full-width-form-fields>
+        <formly-form [fields]="fields()" [form]="form" [model]="formField()" />
+      </matx-full-width-form-fields>
+    </form>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [ReactiveFormsModule, FormlyForm, MatxFullWidthFormFields],
+                }]
+        }] });
+
+class FormlyFieldEditorCode {
+    data = model('', ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    formatter = (data) => {
+        const result = jsonParse(data);
+        return result.success ? jsonStringify(result.result) : data;
+    };
+    validator = (data) => this.validate(data);
+    dataManager = inject(DataManager);
+    fieldTypes = inject(FieldTypesReader);
+    selection = inject((SelectionManager));
+    destroyRef = inject(DestroyRef);
+    jsonEditorChild = viewChild.required(CodeEditor);
+    field;
+    ngOnInit() {
+        this.selection.onSelect
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((field) => {
+            if (this.field !== field && field !== null) {
+                this.save();
+                this.field = field;
+                if (field.fieldArray || field.fieldGroup) {
+                    field = { ...field };
+                    delete field.fieldGroup;
+                    delete field.fieldArray;
+                }
+                this.data.set(JSON.stringify(field));
+            }
+        });
+    }
+    save() {
+        const data = this.jsonEditorChild().getData();
+        if (!data || !this.validator(data).valid) {
+            return;
+        }
+        const currentField = this.field;
+        this.field = JSON5.parse(data);
+        this.field.fieldGroup = currentField.fieldGroup;
+        this.field.fieldArray = currentField.fieldArray;
+        cleanInput(this.field);
+        this.dataManager.updateField(currentField, this.field);
+    }
+    validate(data) {
+        const result = jsonParseFieldsAndValidate(data);
+        if (!result.success ||
+            !(result.result[0].fieldArray || result.result[0].fieldGroup)) {
+            return { valid: result.success, message: result.message };
+        }
+        const field = result.result[0];
+        if (field.fieldArray && !this.fieldTypes.isFieldArray(field)) {
+            return {
+                valid: false,
+                message: `Can not add /fieldArray to field type '${this.fieldTypes.getType(field)}'.`,
+            };
+        }
+        if (field.fieldGroup && !this.fieldTypes.isFieldGroup(field)) {
+            return {
+                valid: false,
+                message: `Can not add /fieldGroup to field type '${this.fieldTypes.getType(field)}'.`,
+            };
+        }
+        return {
+            valid: false,
+            message: "Add fields to /fieldArray or /fieldGroup with 'Add field'.",
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FormlyFieldEditorCode, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.18", type: FormlyFieldEditorCode, isStandalone: true, selector: "formly-designer-field-editor-code", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange" }, viewQueries: [{ propertyName: "jsonEditorChild", first: true, predicate: CodeEditor, descendants: true, isSignal: true }], ngImport: i0, template: `<b-code-editor
+    [data]="data()"
+    [formatter]="formatter"
+    [validator]="validator"
+    (validChange)="save()"
+  />`, isInline: true, styles: [":host{display:flex;flex-direction:column;flex:1;overflow:hidden}b-code-editor{flex:1;overflow:hidden}\n"], dependencies: [{ kind: "component", type: CodeEditor, selector: "b-code-editor", inputs: ["data", "disabled", "formatter", "validator"], outputs: ["validChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FormlyFieldEditorCode, decorators: [{
+            type: Component,
+            args: [{ selector: 'formly-designer-field-editor-code', template: `<b-code-editor
+    [data]="data()"
+    [formatter]="formatter"
+    [validator]="validator"
+    (validChange)="save()"
+  />`, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CodeEditor], styles: [":host{display:flex;flex-direction:column;flex:1;overflow:hidden}b-code-editor{flex:1;overflow:hidden}\n"] }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }, { type: i0.Output, args: ["dataChange"] }], jsonEditorChild: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CodeEditor), { isSignal: true }] }] } });
+
+class FormlyFieldEditorAdd {
+    types = [];
+    optionSelected = output();
+    formControl;
+    filteredTypes;
+    fieldTypesReader = inject(FieldTypesReader);
+    editorConfigReader = inject(EditorConfigReader);
+    dataManager = inject(DataManager);
+    commitHandled = false;
+    ngOnInit() {
+        this.types = this.fieldTypesReader
+            .get()
+            .filter((i) => this.editorConfigReader.propertiesByType[i])
+            .sort((x, y) => x.localeCompare(y));
+        this.formControl = new FormControl('', this.inListValidator(this.types));
+        this.filteredTypes = this.formControl.valueChanges.pipe(startWith(''), map((value) => {
+            value = value.toLowerCase();
+            return this.types.filter((option) => option.toLowerCase().includes(value));
+        }));
+    }
+    handleFocusout() {
+        this.formControl.markAsUntouched();
+    }
+    handleClick() {
+        this.commitHandled = false;
+    }
+    handleSelect(event) {
+        event.option.deselect();
+        this.select(event.option.value);
+        this.commitHandled = true;
+    }
+    commit() {
+        if (this.commitHandled) {
+            this.commitHandled = false;
+            return;
+        }
+        const value = (this.formControl.value ?? '').toLowerCase();
+        const selection = this.types.filter((i) => i.toLowerCase() === value);
+        if (selection.length) {
+            this.select(selection[0]);
+        }
+        else {
+            this.formControl.markAsTouched();
+        }
+    }
+    select(value) {
+        const field = { type: value };
+        this.dataManager.addFields([field]);
+        this.formControl.reset('');
+    }
+    inListValidator(items) {
+        return (control) => {
+            const value = control.value?.toLowerCase();
+            const valid = items.some((i) => i.toLowerCase() === value);
+            return valid ? null : { notInList: true };
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FormlyFieldEditorAdd, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FormlyFieldEditorAdd, isStandalone: true, selector: "formly-designer-field-editor-add", outputs: { optionSelected: "optionSelected" }, host: { listeners: { "focusout": "handleFocusout()" } }, ngImport: i0, template: `
+    <mat-form-field floatLabel="always">
+      <mat-label>type</mat-label>
+      <input
+        matInput
+        [matAutocomplete]="autocomplete"
+        [formControl]="formControl"
+        (keydown.enter)="commit()"
+      />
+      <mat-autocomplete
+        autoActiveFirstOption
+        #autocomplete="matAutocomplete"
+        (optionSelected)="handleSelect($event)"
+      >
+        @for (option of filteredTypes | async; track option) {
+          <mat-option [value]="option" (click)="handleClick()">
+            {{ option }}
+          </mat-option>
+        }
+      </mat-autocomplete>
+      <mat-error>Select value from list</mat-error>
+    </mat-form-field>
+    <button mat-stroked-button color="primary" (click)="commit()">
+      <mat-icon>add</mat-icon>
+      Add field
+    </button>
+  `, isInline: true, styles: ["mat-form-field{margin-right:20px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FormlyFieldEditorAdd, decorators: [{
+            type: Component,
+            args: [{ selector: 'formly-designer-field-editor-add', template: `
+    <mat-form-field floatLabel="always">
+      <mat-label>type</mat-label>
+      <input
+        matInput
+        [matAutocomplete]="autocomplete"
+        [formControl]="formControl"
+        (keydown.enter)="commit()"
+      />
+      <mat-autocomplete
+        autoActiveFirstOption
+        #autocomplete="matAutocomplete"
+        (optionSelected)="handleSelect($event)"
+      >
+        @for (option of filteredTypes | async; track option) {
+          <mat-option [value]="option" (click)="handleClick()">
+            {{ option }}
+          </mat-option>
+        }
+      </mat-autocomplete>
+      <mat-error>Select value from list</mat-error>
+    </mat-form-field>
+    <button mat-stroked-button color="primary" (click)="commit()">
+      <mat-icon>add</mat-icon>
+      Add field
+    </button>
+  `, host: {
+                        '(focusout)': 'handleFocusout()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        AsyncPipe,
+                        ReactiveFormsModule,
+                        MatButton,
+                        MatIcon,
+                        MatInput,
+                        MatAutocompleteModule,
+                        MatFormFieldModule,
+                    ], styles: ["mat-form-field{margin-right:20px}\n"] }]
+        }], propDecorators: { optionSelected: [{ type: i0.Output, args: ["optionSelected"] }] } });
+
+class FormlyFieldEditor {
+    mode = signal('add', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    selection = inject((SelectionManager));
+    snackBar = inject(MatSnackBar);
+    field = null;
+    editChild = viewChild.required(FormlyFieldEditorEdit);
+    codeChild = viewChild.required(FormlyFieldEditorCode);
+    ngOnInit() {
+        this.selection.onSelect.subscribe((field) => {
+            this.field = field;
+            if (field === null) {
+                this.mode.set('add');
+            }
+            else if (this.mode() === 'add') {
+                this.mode.set('edit');
+            }
+        });
+    }
+    save() {
+        this.mode() === 'edit' && this.editChild().save();
+        this.mode() === 'code' && this.codeChild().save();
+    }
+    setMode(mode) {
+        if (this.field === null && (mode === 'edit' || mode === 'code')) {
+            this.snackBar.open('Select a field to edit', 'X');
+            return;
+        }
+        if (mode === 'edit' || mode === 'code') {
+            this.save();
+        }
+        this.mode.set(mode);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FormlyFieldEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FormlyFieldEditor, isStandalone: true, selector: "formly-designer-field-editor", viewQueries: [{ propertyName: "editChild", first: true, predicate: FormlyFieldEditorEdit, descendants: true, isSignal: true }, { propertyName: "codeChild", first: true, predicate: FormlyFieldEditorCode, descendants: true, isSignal: true }], ngImport: i0, template: "<matx-panel headerTitle=\"Field\">\n  <matx-panel-header-button\n    icon=\"add\"\n    tooltip=\"Add field\"\n    (click)=\"setMode('add')\"\n    [selected]=\"mode() === 'add'\"\n  />\n  <matx-panel-header-button\n    icon=\"edit\"\n    tooltip=\"Edit field\"\n    (click)=\"setMode('edit')\"\n    [selected]=\"mode() === 'edit'\"\n  />\n  <matx-panel-header-button\n    icon=\"code\"\n    tooltip=\"Code\"\n    (click)=\"setMode('code')\"\n    [selected]=\"mode() === 'code'\"\n  />\n  @if (mode() === \"add\") {\n    <formly-designer-field-editor-add />\n  }\n  @if (mode() === \"edit\") {\n    <formly-designer-field-editor-edit />\n  }\n  @if (mode() === \"code\") {\n    <formly-designer-field-editor-code />\n  }\n</matx-panel>\n", dependencies: [{ kind: "component", type: FormlyFieldEditorEdit, selector: "formly-designer-field-editor-edit" }, { kind: "component", type: FormlyFieldEditorCode, selector: "formly-designer-field-editor-code", inputs: ["data"], outputs: ["dataChange"] }, { kind: "component", type: FormlyFieldEditorAdd, selector: "formly-designer-field-editor-add", outputs: ["optionSelected"] }, { kind: "component", type: MatxPanel, selector: "matx-panel", inputs: ["headerTitle", "fullHeight"] }, { kind: "component", type: MatxPanelHeaderButton, selector: "matx-panel-header-button", inputs: ["icon", "tooltip", "selected", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FormlyFieldEditor, decorators: [{
+            type: Component,
+            args: [{ selector: 'formly-designer-field-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        FormlyFieldEditorEdit,
+                        FormlyFieldEditorCode,
+                        FormlyFieldEditorAdd,
+                        MatxPanel,
+                        MatxPanelHeaderButton,
+                    ], template: "<matx-panel headerTitle=\"Field\">\n  <matx-panel-header-button\n    icon=\"add\"\n    tooltip=\"Add field\"\n    (click)=\"setMode('add')\"\n    [selected]=\"mode() === 'add'\"\n  />\n  <matx-panel-header-button\n    icon=\"edit\"\n    tooltip=\"Edit field\"\n    (click)=\"setMode('edit')\"\n    [selected]=\"mode() === 'edit'\"\n  />\n  <matx-panel-header-button\n    icon=\"code\"\n    tooltip=\"Code\"\n    (click)=\"setMode('code')\"\n    [selected]=\"mode() === 'code'\"\n  />\n  @if (mode() === \"add\") {\n    <formly-designer-field-editor-add />\n  }\n  @if (mode() === \"edit\") {\n    <formly-designer-field-editor-edit />\n  }\n  @if (mode() === \"code\") {\n    <formly-designer-field-editor-code />\n  }\n</matx-panel>\n" }]
+        }], propDecorators: { editChild: [{ type: i0.ViewChild, args: [i0.forwardRef(() => FormlyFieldEditorEdit), { isSignal: true }] }], codeChild: [{ type: i0.ViewChild, args: [i0.forwardRef(() => FormlyFieldEditorCode), { isSignal: true }] }] } });
+
+class TestValueComponent {
+    data;
+    formatter = (data) => {
+        const result = jsonParse(data);
+        return result.success ? jsonStringify(result.result) : data;
+    };
+    constructor() {
+        this.data = inject(TestValueManager).onChange.pipe(map((value) => JSON.stringify(value ?? {})));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TestValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: TestValueComponent, isStandalone: true, selector: "formly-designer-test-value", ngImport: i0, template: "<matx-panel headerTitle=\"Value\">\n  <b-code-editor\n    [disabled]=\"true\"\n    [data]=\"(data | async) ?? ''\"\n    [formatter]=\"formatter\"\n  />\n</matx-panel>\n", dependencies: [{ kind: "component", type: MatxPanel, selector: "matx-panel", inputs: ["headerTitle", "fullHeight"] }, { kind: "component", type: CodeEditor, selector: "b-code-editor", inputs: ["data", "disabled", "formatter", "validator"], outputs: ["validChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TestValueComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'formly-designer-test-value', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, MatxPanel, CodeEditor], template: "<matx-panel headerTitle=\"Value\">\n  <b-code-editor\n    [disabled]=\"true\"\n    [data]=\"(data | async) ?? ''\"\n    [formatter]=\"formatter\"\n  />\n</matx-panel>\n" }]
+        }], ctorParameters: () => [] });
+
+class EditCommand {
+    commandType;
+    data;
+    constructor(commandType, data) {
+        this.commandType = commandType;
+        this.data = data;
+    }
+}
+var EditCommandType;
+(function (EditCommandType) {
+    EditCommandType[EditCommandType["EditUndo"] = 0] = "EditUndo";
+    EditCommandType[EditCommandType["EditRedo"] = 1] = "EditRedo";
+    EditCommandType[EditCommandType["EditCut"] = 2] = "EditCut";
+    EditCommandType[EditCommandType["EditCopy"] = 3] = "EditCopy";
+    EditCommandType[EditCommandType["EditPaste"] = 4] = "EditPaste";
+    EditCommandType[EditCommandType["EditDelete"] = 5] = "EditDelete";
+    EditCommandType[EditCommandType["EditSelectAll"] = 6] = "EditSelectAll";
+})(EditCommandType || (EditCommandType = {}));
+
+class FormlyEditor {
+    hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+    fields = input([], ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
+    onCommand = input(...(ngDevMode ? [undefined, { debugName: "onCommand" }] : /* istanbul ignore next */ []));
+    dataChange = output();
+    fieldEditor = viewChild.required(FormlyFieldEditor);
+    mode = 'select';
+    snackBar = inject(MatSnackBar);
+    dataManager = inject(DataManager);
+    undoManager = inject((UndoManager));
+    selection = inject((SelectionManager));
+    destroyRef = inject(DestroyRef);
+    ngOnInit() {
+        this.onCommand()
+            ?.pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((i) => this.handleCommand(i));
+        this.dataManager.setFields(this.fields());
+        this.dataManager.onChange
+            .pipe(skip(1))
+            .subscribe(() => this.dataChange.emit());
+    }
+    handleModeChange(mode) {
+        this.mode = mode;
+    }
+    handleCommand(command) {
+        if (this.hidden()) {
+            return;
+        }
+        this.fieldEditor().save();
+        switch (command.commandType) {
+            case EditCommandType.EditUndo:
+                this.undoManager.undo();
+                break;
+            case EditCommandType.EditRedo:
+                this.undoManager.redo();
+                break;
+            case EditCommandType.EditCut:
+                navigator.clipboard.writeText(this.getSelectedFieldsJson());
+                this.dataManager.removeSelectedFields();
+                break;
+            case EditCommandType.EditCopy:
+                navigator.clipboard.writeText(this.getSelectedFieldsJson());
+                break;
+            case EditCommandType.EditPaste:
+                const convertedData = jsonParseFieldsAndValidate(command.data ?? '');
+                if (convertedData.success) {
+                    this.dataManager.addFields(convertedData.result);
+                }
+                else {
+                    console.warn(convertedData.message, { data: command.data });
+                    this.snackBar.open('Clipboard contains invalid data', 'X');
+                }
+                break;
+            case EditCommandType.EditDelete:
+                this.dataManager.removeSelectedFields();
+                break;
+            case EditCommandType.EditSelectAll:
+                this.selection.set(toFlatArray(this.dataManager.getFields()));
+                break;
+        }
+    }
+    getSelectedFieldsJson() {
+        return jsonStringify(this.dataManager.getSelectedFields());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FormlyEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FormlyEditor, isStandalone: true, selector: "formly-editor", inputs: { hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, onCommand: { classPropertyName: "onCommand", publicName: "onCommand", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataChange: "dataChange" }, host: { properties: { "class.hidden": "hidden()" } }, providers: [SelectionManager, DataManager, TestValueManager, UndoManager], viewQueries: [{ propertyName: "fieldEditor", first: true, predicate: FormlyFieldEditor, descendants: true, isSignal: true }], ngImport: i0, template: "@if (!hidden()) {\n  <div class=\"result\">\n    <formly-designer-result\n      [mode]=\"mode\"\n      (modeChange)=\"handleModeChange($event)\"\n    />\n  </div>\n  <div [class]=\"mode === 'test' ? 'editor--hidden' : 'editor'\">\n    <formly-designer-field-editor />\n  </div>\n  @if (mode === \"test\") {\n    <div class=\"test-value\">\n      <formly-designer-test-value />\n    </div>\n  }\n}\n", styles: [":host{display:flex}:host.hidden{display:none}.result,.editor,.editor--hidden,.test-value{box-sizing:border-box}.editor--hidden{display:none}.result{min-width:0;max-width:1000px;flex:2;margin-right:1px}.editor,.test-value{min-width:0;max-width:500px;flex:1}\n"], dependencies: [{ kind: "component", type: FormlyFieldEditor, selector: "formly-designer-field-editor" }, { kind: "component", type: ResultComponent, selector: "formly-designer-result", inputs: ["mode"], outputs: ["modeChange"] }, { kind: "component", type: TestValueComponent, selector: "formly-designer-test-value" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FormlyEditor, decorators: [{
+            type: Component,
+            args: [{ selector: 'formly-editor', providers: [SelectionManager, DataManager, TestValueManager, UndoManager], host: {
+                        '[class.hidden]': 'hidden()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormlyFieldEditor, ResultComponent, TestValueComponent], template: "@if (!hidden()) {\n  <div class=\"result\">\n    <formly-designer-result\n      [mode]=\"mode\"\n      (modeChange)=\"handleModeChange($event)\"\n    />\n  </div>\n  <div [class]=\"mode === 'test' ? 'editor--hidden' : 'editor'\">\n    <formly-designer-field-editor />\n  </div>\n  @if (mode === \"test\") {\n    <div class=\"test-value\">\n      <formly-designer-test-value />\n    </div>\n  }\n}\n", styles: [":host{display:flex}:host.hidden{display:none}.result,.editor,.editor--hidden,.test-value{box-sizing:border-box}.editor--hidden{display:none}.result{min-width:0;max-width:1000px;flex:2;margin-right:1px}.editor,.test-value{min-width:0;max-width:500px;flex:1}\n"] }]
+        }], propDecorators: { hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: false }] }], onCommand: [{ type: i0.Input, args: [{ isSignal: true, alias: "onCommand", required: false }] }], dataChange: [{ type: i0.Output, args: ["dataChange"] }], fieldEditor: [{ type: i0.ViewChild, args: [i0.forwardRef(() => FormlyFieldEditor), { isSignal: true }] }] } });
+
+class JsonExporter {
+    get name() {
+        return 'Json';
+    }
+    get extension() {
+        return '.json';
+    }
+    export(data) {
+        return jsonStringify(data);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: JsonExporter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: JsonExporter, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: JsonExporter, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+function provideFormlyEditor(config) {
+    return [
+        {
+            provide: FORMLY_EDITOR_CONFIG,
+            useValue: config,
+        },
+        EditorConfigReader,
+        EditorFieldsReader,
+        FieldTypesReader,
+        DataValidator,
+        InitialValueFactory,
+    ];
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EditCommand, EditCommandType, FormlyEditor, JsonExporter, provideFormlyEditor };
+//# sourceMappingURL=grumptech-ngx-formly-editor.mjs.map