@xlabs-store/core 0.0.1

package/dist/collection/components/x-form-builder/services/schema/default-registry.js

@@ -0,0 +1,440 @@
+import { h } from "@stencil/core";
+import { FormRegistry } from "./form-registry";
+export function registerDefaultComponents() {
+    const InputCallback = (context) => {
+        let { commonProps, onChange } = context.getCommonProps(context.field);
+        let rerenderKey = context.field.id || context.field.name;
+        const field = context.field;
+        return (h("x-input", { key: rerenderKey, ...commonProps, type: field.type, value: field.control ? field.control.value : field.defaultValue || '', onXChange: onChange, onXBlur: () => (field.control ? field.control.markAsTouched() : null) }));
+    };
+    const DividerCallback = (context) => {
+        const orientation = context.field.orientation || 'center';
+        const text = context.field.description || '';
+        const style = {
+            margin: '12px 0',
+            borderTop: '1px solid var(--x-border, #e5e7eb)',
+            textAlign: orientation,
+        };
+        return (h("div", { role: "separator", style: style }, text && h("span", { style: { padding: '0 8px' } }, text)));
+    };
+    const HeadingCallback = (context) => {
+        const level = context.field.level ?? 3;
+        const align = context.field.align;
+        const content = String(context.field.content ?? '');
+        const styleType = context.field.styleType;
+        const ellipsis = context.field.ellipsis;
+        const ellipsisRows = context.field.ellipsisRows;
+        const style = { margin: '8px 0', textAlign: align };
+        const Tag = `h${Math.min(Math.max(level, 1), 6)}`;
+        return (h(Tag, { style: style, "data-type": styleType, "data-ellipsis": ellipsis, "data-rows": ellipsisRows }, content));
+    };
+    const ParagraphCallback = (context) => {
+        const align = context.field.align;
+        const styleType = context.field.styleType;
+        const ellipsis = context.field.ellipsis;
+        const ellipsisRows = context.field.ellipsisRows;
+        const style = {
+            margin: '8px 0',
+            color: 'var(--x-text-secondary, #6b7280)',
+            textAlign: align,
+        };
+        const content = String(context.field.content ??
+            context.field.placeholder ??
+            context.field.label ??
+            '');
+        return (h("p", { style: style, "data-type": styleType, "data-ellipsis": ellipsis, "data-rows": ellipsisRows }, content));
+    };
+    const HrefCallback = (context) => {
+        const align = context.field.align;
+        const styleType = context.field.styleType;
+        const ellipsis = context.field.ellipsis;
+        const underline = context.field.underline;
+        const icon = context.field.icon;
+        const href = context.field.href || context.field.value || '#';
+        const target = context.field.target || '_self';
+        const rel = context.field.rel || '';
+        const text = String(context.field.content ??
+            context.field.label ??
+            context.field.text ??
+            context.field.value ??
+            'Link');
+        const style = {
+            textAlign: align,
+            textDecoration: underline === false ? 'none' : 'underline',
+        };
+        return (h("div", { style: style }, h("a", { href: href, target: target, rel: rel, "data-type": styleType, "data-ellipsis": ellipsis }, icon ? (h("i", { "data-icon": icon, style: { marginRight: '8px' } })) : null, h("span", null, text))));
+    };
+    const ImageCallback = (context) => {
+        const align = context.field.align;
+        const src = context.field.src || context.field.value || '';
+        const width = context.field.width || 300;
+        const height = context.field.height || 300;
+        const alt = context.field.alt || '';
+        const preview = context.field.preview !== false;
+        return (h("div", { style: { margin: '8px 0', textAlign: align } }, h("x-image", { src: src, width: width, height: height, alt: alt, preview: preview, style: { borderRadius: '8px' } })));
+    };
+    const AvatarCallback = (context) => {
+        const align = context.field.align;
+        const src = context.field.src || context.field.value || '';
+        const size = context.field.size || 64;
+        const circle = context.field.circle === undefined ||
+            context.field.circle
+            ? '50%'
+            : '0';
+        const alt = context.field.alt || '';
+        return (h("div", { style: { margin: '8px 0', textAlign: align } }, h("img", { src: src, alt: alt, style: {
+                width: `${size}px`,
+                height: `${size}px`,
+                borderRadius: circle,
+                objectFit: 'cover',
+            } })));
+    };
+    const IframeCallback = (context) => {
+        const src = context.field.src;
+        const title = context.field.title || 'Embedded Content';
+        const width = context.field.width || '100%';
+        const height = context.field.height || 400;
+        const frameBorder = context.field.frameBorder || 0;
+        const scrolling = context.field.scrolling || 'auto';
+        const loading = context.field.loading || 'lazy';
+        const sandbox = context.field.sandbox;
+        const allow = context.field.allow;
+        const referrerPolicy = context.field.referrerPolicy;
+        return (h("div", { style: { width: '100%', margin: '8px 0' } }, h("iframe", { src: src, title: title, width: width, height: height, frameBorder: frameBorder, scrolling: scrolling, loading: loading, sandbox: sandbox, allow: allow, referrerPolicy: referrerPolicy, style: { border: 'none', borderRadius: '8px' } })));
+    };
+    const QRCodeCallback = (context) => {
+        const align = context.field.align || 'center';
+        const label = context.field.label;
+        const value = context.field.value || 'https://example.com';
+        const size = context.field.size || 200;
+        const level = context.field.level || 'M';
+        const bgColor = context.field.bgColor || '#FFFFFF';
+        const fgColor = context.field.fgColor || '#000000';
+        const includeMargin = !!context.field.includeMargin;
+        const description = context.field.description;
+        return (h("div", { style: { width: '100%', margin: '8px 0', textAlign: align } }, h("div", { style: { display: 'inline-block' } }, label ? (h("div", { style: { marginBottom: '8px', fontWeight: '500' } }, String(label))) : null, h("div", { style: {
+                width: `${size}px`,
+                height: `${size}px`,
+                background: bgColor,
+                color: fgColor,
+                border: '1px dashed #e5e7eb',
+                padding: includeMargin ? '16px' : '0',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: '8px',
+            } }, h("span", { style: { fontSize: '12px' } }, String(value), " (", String(level), ")")), description ? (h("div", { style: {
+                marginTop: '8px',
+                color: '#666',
+                fontSize: '12px',
+                textAlign: 'center',
+            } }, String(description))) : null)));
+    };
+    const PanelCallback = (context) => (h("div", { style: {
+            padding: '12px',
+            border: '1px solid var(--x-border, #e5e7eb)',
+            borderRadius: '8px',
+            margin: '8px 0',
+        } }, 'elements' in context.field && context.field.elements
+        ? context.bind(context.field.elements, context.field)
+        : null));
+    const ContainerCallback = (context) => (h("div", { style: { margin: '8px 0' } }, 'elements' in context.field && context.field.elements
+        ? context.bind(context.field.elements, context.field)
+        : null));
+    const GridCallback = (context) => (h("div", { style: {
+            display: 'grid',
+            gridTemplateColumns: `repeat(${context.field.columns || 2}, minmax(0, 1fr))`,
+            gap: '15px',
+        } }, 'elements' in context.field && context.field.elements
+        ? context.bind(context.field.elements, context.field)
+        : null));
+    const MapsCallback = (context) => {
+        const width = context.field.width || '100%';
+        const height = context.field.height || 400;
+        const provider = context.field.provider || 'openstreetmap';
+        const center = context.field.center;
+        const zoom = context.field.zoom || 10;
+        const searchEnabled = !!context.field.searchEnabled;
+        return (h("div", { style: { width: '100%', margin: '8px 0' } }, h("div", { style: {
+                width,
+                height: `${height}px`,
+                border: '1px solid #d9d9d9',
+                borderRadius: '6px',
+                position: 'relative',
+                overflow: 'hidden',
+            } }, h("div", { style: {
+                width: '100%',
+                height: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                flexDirection: 'column',
+                background: provider === 'google'
+                    ? '#e8f5e8'
+                    : provider === 'mapbox'
+                        ? '#f0f8ff'
+                        : provider === 'bing'
+                            ? '#fff7e6'
+                            : '#f0f0f0',
+            } }, h("div", { style: { fontWeight: '500', marginBottom: '8px' } }, String(context.field.label || 'Interactive Map')), center ? (h("div", { style: {
+                color: '#666',
+                fontSize: '12px',
+                textAlign: 'center',
+            } }, h("div", null, "Lat: ", center.lat, ", Lng: ", center.lng), h("div", null, "Zoom: ", zoom))) : null, searchEnabled ? (h("div", { style: { marginTop: '12px' } }, h("input", { placeholder: "Search location...", style: {
+                width: '200px',
+                padding: '6px 8px',
+                border: '1px solid #d9d9d9',
+                borderRadius: '4px',
+            } }))) : null))));
+    };
+    const SelectCallback = (context) => {
+        let { commonProps, onChange } = context.getCommonProps(context.field);
+        return (h("x-select", { ...commonProps, size: "middle", onXChange: onChange, options: context.field.options || [] }));
+    };
+    const RadioCallback = (context) => {
+        const field = context.field;
+        const options = field.options || [];
+        const currentValue = field.control ? field.control.value : field.value;
+        let { onChange } = context.getCommonProps(field);
+        return (h("div", { style: { margin: '4px 0' } }, h("div", { style: { display: 'flex', gap: '10px', flexWrap: 'wrap' } }, options.length > 0 ? (options.map((opt, idx) => (h("x-radio", { key: `${field.name}-${idx}`, name: field.name, value: opt.value, disabled: opt.disabled || field.disabled || false, onXChange: onChange, checked: currentValue === opt.value }, String(opt.label))))) : (h("x-radio", { ...field, disabled: field.disabled, onXChange: onChange }, String(field.label))))));
+    };
+    const CheckboxCallback = (context) => {
+        const field = context.field;
+        const options = field.options || [];
+        const currentValue = field.control ? field.control.value : field.value;
+        const isArray = Array.isArray(currentValue);
+        let { onChange } = context.getCommonProps(field);
+        return (h("div", { style: { margin: '4px 0' } }, h("div", { style: { display: 'flex', gap: '10px', flexWrap: 'wrap' } }, options.length > 0 ? (options.map((opt, idx) => (h("x-checkbox", { key: `${field.name}-${idx}`, name: field.name, value: opt.value, disabled: opt.disabled || field.disabled || false, onXChange: onChange, checked: isArray
+                ? (currentValue || []).includes(opt.value)
+                : !!currentValue }, String(opt.label))))) : (h("x-checkbox", { ...field, disabled: field.disabled, onXChange: onChange }, String(field.label))))));
+    };
+    const DateLocaleCallback = (context) => {
+        const field = context.field;
+        let { commonProps, onChange } = context.getCommonProps(field);
+        const minDate = field.min ? new Date(field.min) : undefined;
+        const maxDate = field.max ? new Date(field.max) : undefined;
+        const rawValue = field.control ? field.control.value : field.defaultValue;
+        return (h("x-date-picker", { ...commonProps, onXChange: onChange, picker: field.picker || 'date', format: field.format, placement: field.placement, minDate: minDate ? minDate.toISOString().split('T')[0] : undefined, maxDate: maxDate ? maxDate.toISOString().split('T')[0] : undefined, value: typeof rawValue === 'string'
+                ? rawValue
+                : rawValue instanceof Date
+                    ? rawValue.toISOString().split('T')[0]
+                    : '', size: commonProps.size }));
+    };
+    const DateTimeCallback = (context) => {
+        const field = context.field;
+        let { commonProps, onChange } = context.getCommonProps(field);
+        const minDate = field.min ? new Date(field.min) : undefined;
+        const maxDate = field.max ? new Date(field.max) : undefined;
+        const rawValue = field.control ? field.control.value : field.defaultValue;
+        return (h("x-date-picker", { ...commonProps, onXChange: onChange, picker: field.picker || 'date', format: field.format, placement: field.placement, showTime: true, minDate: minDate ? minDate.toISOString().split('T')[0] : undefined, maxDate: maxDate ? maxDate.toISOString().split('T')[0] : undefined, value: typeof rawValue === 'string'
+                ? rawValue
+                : rawValue instanceof Date
+                    ? rawValue.toISOString()
+                    : '', size: commonProps.size }));
+    };
+    const TimeCallback = (context) => {
+        const field = context.field;
+        let { commonProps, onChange } = context.getCommonProps(field);
+        const rawValue = field.control ? field.control.value : field.defaultValue;
+        const timeValue = rawValue instanceof Date
+            ? rawValue.toTimeString().split(' ')[0]
+            : typeof rawValue === 'string'
+                ? rawValue
+                : '';
+        const wrapperStyle = {
+            margin: '8px 0',
+            ...(commonProps.disabled ? { pointerEvents: 'none', opacity: '0.5' } : {}),
+        };
+        return (h("div", { style: wrapperStyle }, h("x-time-picker", { ...commonProps, value: timeValue, onXChange: (e) => {
+                onChange(e);
+            } })));
+    };
+    const DateRangeCallback = (context) => {
+        const field = context.field;
+        let { commonProps, onChange } = context.getCommonProps(field);
+        const minDate = field.min ? new Date(field.min) : undefined;
+        const maxDate = field.max ? new Date(field.max) : undefined;
+        const rawValue = field.control ? field.control.value : field.defaultValue;
+        let rangeValue = { start: null, end: null };
+        if (Array.isArray(rawValue)) {
+            rangeValue = {
+                start: rawValue[0] instanceof Date
+                    ? rawValue[0].toISOString().split('T')[0]
+                    : rawValue[0],
+                end: rawValue[1] instanceof Date
+                    ? rawValue[1].toISOString().split('T')[0]
+                    : rawValue[1],
+            };
+        }
+        return (h("x-range-picker", { ...commonProps, placeholder: [field.placeholder || 'Start', field.placeholder || 'End'], onXChange: onChange, picker: field.picker || 'date', format: field.format, placement: field.placement, minDate: minDate ? minDate.toISOString().split('T')[0] : undefined, maxDate: maxDate ? maxDate.toISOString().split('T')[0] : undefined, value: rangeValue, size: commonProps.size, showTime: field.showTime }));
+    };
+    const UploadCallback = (context) => {
+        let { commonProps, onChange } = context.getCommonProps(context.field);
+        const field = context.field;
+        return (h("x-upload", { ...commonProps, onXChange: onChange, listType: field.listType, multiple: field.multiple, maxCount: field.maxCount, accept: field.accept, action: field.action }));
+    };
+    const SliderCallback = (context) => {
+        let { commonProps, onChange } = context.getCommonProps(context.field);
+        return h("x-slider", { ...commonProps, onXChange: onChange });
+    };
+    const SwitchCallback = (context) => {
+        let { commonProps, onChange } = context.getCommonProps(context.field);
+        return (h("x-switch", { ...commonProps, size: commonProps.size === 'middle' ? 'default' : commonProps.size, onXChange: onChange }));
+    };
+    const CaptchaCallback = (context) => {
+        let { commonProps, onChange } = context.getCommonProps(context.field);
+        const field = context.field;
+        return (h("x-captcha", { ...commonProps, onXChange: onChange, length: field.length, caseSensitive: field.caseSensitive, message: field.message, error: field.error }));
+    };
+    const AddressCallback = (context) => {
+        let { commonProps, onChange } = context.getCommonProps(context.field);
+        const field = context.field;
+        return (h("x-address", { ...commonProps, value: field.control ? field.control.value : (field.defaultValue || {}), onXChange: onChange, placeholderProvince: field.placeholderProvince, placeholderDistrict: field.placeholderDistrict, placeholderWard: field.placeholderWard, ref: (el) => {
+                if (el && field.control) {
+                    field.control.registerValidatorAsync(async () => {
+                        const isValid = await el.validate();
+                        return isValid ? null : { address: 'Please select full address' };
+                    });
+                }
+            } }));
+    };
+    const TreeselectCallback = (context) => {
+        let { commonProps, onChange } = context.getCommonProps(context.field);
+        return (h("x-tree-select", { ...commonProps, onXChange: onChange, treeData: context.field.options || [], showCheckedStrategy: context.field.showCheckedStrategy }));
+    };
+    const TransferCallback = (context) => {
+        const { commonProps, onChange } = context.getCommonProps(context.field);
+        const f = context.field;
+        return (h("x-transfer", { ...commonProps, onXChange: onChange, dataSource: f.dataSource || [], targetKeys: f.control ? f.control.value : (f.targetKeys || []), selectedKeys: f.selectedKeys, titles: f.titles, operations: f.operations, showSearch: f.showSearch, searchPlaceholder: f.searchPlaceholder, notFoundContent: f.notFoundContent, oneWay: f.oneWay, showSelectAll: f.showSelectAll, listWidth: f.listWidth, listHeight: f.listHeight, pagination: f.pagination, pageSize: f.pageSize, apiConfig: f.apiConfig }));
+    };
+    const CascaderCallback = (context) => {
+        const { commonProps, onChange } = context.getCommonProps(context.field);
+        const f = context.field;
+        return (h("x-cascader", { ...commonProps, onXChange: onChange, options: f.options || [], value: f.control ? f.control.value : (f.defaultValue || null), placeholder: f.placeholder || commonProps.placeholder, size: f.size || (commonProps.size === 'default' ? 'middle' : commonProps.size), variant: f.variant, placement: f.placement, status: commonProps.status || undefined, expandTrigger: f.expandTrigger, changeOnSelect: f.changeOnSelect, multiple: f.multiple, allowClear: f.allowClear ?? commonProps.allowClear, showSearch: f.showSearch, fieldNames: f.fieldNames, displaySeparator: f.displaySeparator, maxTagCount: f.maxTagCount, notFoundContent: f.notFoundContent, loading: f.loading }));
+    };
+    const AutoCompleteCallback = (context) => {
+        const { commonProps, onChange } = context.getCommonProps(context.field);
+        const f = context.field;
+        return (h("x-auto-complete", { ...commonProps, onXChange: onChange, options: f.options || [], value: f.control ? f.control.value : (f.defaultValue || ''), placeholder: f.placeholder || commonProps.placeholder, size: f.size || (commonProps.size === 'default' ? 'middle' : commonProps.size), variant: f.variant, placement: f.placement, status: (commonProps.status || undefined), allowClear: f.allowClear ?? commonProps.allowClear, backfill: f.backfill, defaultOpen: f.defaultOpen, filterOption: f.filterOption, notFoundContent: f.notFoundContent }));
+    };
+    const ColorPickerCallback = (context) => {
+        let { commonProps, onChange } = context.getCommonProps(context.field);
+        return h("x-color-picker", { ...commonProps, onXChange: onChange });
+    };
+    const EditorCallback = (context) => {
+        let { commonProps, onChange } = context.getCommonProps(context.field);
+        return h("x-editor", { ...commonProps, onValueChange: onChange });
+    };
+    const ButtonCallback = (context) => {
+        const field = context.field;
+        const align = field.align;
+        const buttonType = field.buttonType || field.type || 'default';
+        const shape = field.shape || 'round';
+        const size = field.size || 'default';
+        const block = !!field.block;
+        const danger = !!field.danger;
+        const ghost = !!field.ghost;
+        const htmlTypeProp = field.htmlType;
+        const loading = !!field.loading;
+        const disabled = !!field.disabled;
+        const icon = field.icon;
+        const label = field.content || field.label || '';
+        const style = { textAlign: align, margin: '8px 0' };
+        const variant = field.variant || (buttonType === 'submit' || buttonType === 'reset' ? 'primary' : buttonType);
+        const htmlType = htmlTypeProp
+            ? htmlTypeProp
+            : buttonType === 'submit'
+                ? 'submit'
+                : buttonType === 'reset'
+                    ? 'reset'
+                    : 'button';
+        const onClick = (event) => {
+            if (htmlType === 'submit') {
+                if (context.builder.form.valid) {
+                    context.emitSubmit({
+                        value: context.builder.form.value,
+                        builder: context.builder,
+                        event,
+                        field,
+                    });
+                }
+                else {
+                    context.builder.form.markAllAsTouched();
+                    context.forceUpdate();
+                    context.emitError({
+                        builder: context.builder,
+                        event,
+                        errors: context.builder.form.errors,
+                    });
+                }
+            }
+            else if (htmlType === 'reset') {
+                context.builder.form.reset();
+                context.forceUpdate();
+            }
+            else {
+                context.emitClick({ field, builder: context.builder, event });
+            }
+        };
+        return (h("div", { style: style }, h("x-button", { htmlType: htmlType, type: variant, shape: shape, size: size, onXClick: onClick, block: block, danger: danger, ghost: ghost, loading: loading, disabled: disabled }, icon ? (h("x-icon", { name: icon, slot: "icon", style: { marginRight: '8px' } })) : null, label)));
+    };
+    const TableCallback = (context) => {
+        const data = context.field.dataSource || [];
+        const columns = context.field.columns || [];
+        const bordered = !!context.field.bordered;
+        const loading = !!context.field.loading;
+        const size = context.field.size || 'default';
+        return (h("div", { style: { width: '100%', margin: '8px 0' }, "data-bordered": bordered, "data-loading": loading, "data-size": size }, h("table", { style: { width: '100%', borderCollapse: 'collapse' } }, h("thead", null, h("tr", null, columns.map((col) => (h("th", { key: col.key || col.dataIndex, style: {
+                textAlign: col.align || 'left',
+                borderBottom: '1px solid #e5e7eb',
+                padding: '8px',
+            } }, col.title))))), h("tbody", null, data.map((row, idx) => (h("tr", { key: idx }, columns.map((col) => (h("td", { key: col.key || col.dataIndex, style: {
+                textAlign: col.align || 'left',
+                borderBottom: '1px solid #f0f0f0',
+                padding: '8px',
+            } }, row[col.dataIndex]))))))))));
+    };
+    FormRegistry.register('text', InputCallback);
+    FormRegistry.register('email', InputCallback);
+    FormRegistry.register('password', InputCallback);
+    FormRegistry.register('url', InputCallback);
+    FormRegistry.register('number', InputCallback);
+    FormRegistry.register('textarea', InputCallback);
+    FormRegistry.register('select', SelectCallback);
+    FormRegistry.register('radio', RadioCallback);
+    FormRegistry.register('checkbox', CheckboxCallback);
+    FormRegistry.register('date', DateLocaleCallback);
+    FormRegistry.register('datetime', DateTimeCallback);
+    FormRegistry.register('time', TimeCallback);
+    FormRegistry.register('file', UploadCallback);
+    FormRegistry.register('slider', SliderCallback);
+    FormRegistry.register('switch', SwitchCallback);
+    FormRegistry.register('captcha', CaptchaCallback);
+    FormRegistry.register('rate', InputCallback);
+    FormRegistry.register('color', ColorPickerCallback);
+    FormRegistry.register('tags', InputCallback);
+    FormRegistry.register('range', InputCallback);
+    FormRegistry.register('phone', InputCallback);
+    FormRegistry.register('location', InputCallback);
+    FormRegistry.register('address', AddressCallback);
+    FormRegistry.register('tree-select', TreeselectCallback);
+    FormRegistry.register('transfer', TransferCallback);
+    FormRegistry.register('cascader', CascaderCallback);
+    FormRegistry.register('auto-complete', AutoCompleteCallback);
+    FormRegistry.register('daterange', DateRangeCallback);
+    FormRegistry.register('divider', DividerCallback);
+    FormRegistry.register('heading', HeadingCallback);
+    FormRegistry.register('paragraph', ParagraphCallback);
+    FormRegistry.register('image', ImageCallback);
+    FormRegistry.register('avatar', AvatarCallback);
+    FormRegistry.register('editor', EditorCallback);
+    FormRegistry.register('button', ButtonCallback);
+    FormRegistry.register('href', HrefCallback);
+    FormRegistry.register('grid', GridCallback);
+    FormRegistry.register('table', TableCallback);
+    FormRegistry.register('maps', MapsCallback);
+    FormRegistry.register('panel', PanelCallback);
+    FormRegistry.register('container', ContainerCallback);
+    FormRegistry.register('iframe', IframeCallback);
+    FormRegistry.register('qr-code', QRCodeCallback);
+}

package/dist/collection/components/x-form-builder/services/schema/form-mapping.js

@@ -0,0 +1,176 @@
+import { FormBuilder, FormGroup } from "../forms";
+import { SELECTION_FIELD_TYPES } from "../../types";
+import { Utils } from "../../utils/utils";
+export class FormMapping extends FormGroup {
+    builder;
+    mapping = new Map();
+    mappingById = new Map();
+    mappingObject = {};
+    fb = new FormBuilder();
+    get schema() {
+        return this.builder.schema;
+    }
+    is_custom_submit = false;
+    constructor(builder) {
+        super({});
+        this.builder = builder;
+        this.mapping = this.toMapping();
+        this.mappingObject = this.toMappingObject();
+        this.toFormMapping(this.mappingObject, this);
+    }
+    toMapping() {
+        const mappingRecursive = (fields) => {
+            const paths = new Map();
+            if (!fields || !Array.isArray(fields))
+                return paths;
+            for (const field of fields) {
+                if (!field)
+                    continue;
+                if (field.type === 'button' && field.htmlType === 'submit') {
+                    this.is_custom_submit = true;
+                    // Don't continue here, we still want to map button for conditions
+                }
+                // Map all elements with a name or id regardless of whether they have a control
+                if (field.name) {
+                    paths.set(field.name, field);
+                }
+                if (field.id) {
+                    this.mappingById.set(field.id, field);
+                    // If it doesn't have a name, still add it to main mapping by id so it can be found by key
+                    if (!field.name) {
+                        paths.set(field.id, field);
+                    }
+                }
+                if (Utils.isFieldGroup(field)) {
+                    const child_paths = mappingRecursive(field.elements);
+                    // Safely merge Maps
+                    child_paths.forEach((v, k) => paths.set(k, v));
+                }
+            }
+            return paths;
+        };
+        // Support both 'elements' and 'fields' for compatibility
+        const elements = this.schema?.elements || this.schema?.fields;
+        if (!elements || !Array.isArray(elements)) {
+            return new Map();
+        }
+        return mappingRecursive(elements);
+    }
+    toMappingObject() {
+        const applyField = (root, field) => {
+            const path = field.name;
+            const segments = path.split('.');
+            let current = root;
+            for (let i = 0; i < segments.length; i++) {
+                let seg = segments[i];
+                const isArray = seg.endsWith('[]');
+                const key = isArray ? seg.replace('[]', '') : seg;
+                const isLast = i === segments.length - 1;
+                if (isArray) {
+                    // Nếu chưa tồn tại hoặc không phải mảng → khởi tạo mảng với 1 object rỗng
+                    const existing = current[key];
+                    if (!Array.isArray(existing)) {
+                        current[key] = [{}];
+                    }
+                    // Đảm bảo phần tử đầu tiên là object (FormMappingOptions)
+                    const arr = current[key];
+                    if (!arr[0] || typeof arr[0] !== 'object' || Array.isArray(arr[0])) {
+                        arr[0] = {};
+                    }
+                    // Đi vào phần tử đầu tiên của mảng
+                    current = arr[0];
+                    continue;
+                }
+                // Nếu là cuối → gán null
+                if (isLast) {
+                    if (!current[key]) {
+                        current[key] = field.name;
+                    }
+                    break;
+                }
+                // Chưa phải cuối → object
+                if (!current[key]) {
+                    current[key] = {};
+                }
+                current = current[key];
+            }
+        };
+        const root = {};
+        for (const [_key, field] of Array.from(this.mapping.entries())) {
+            applyField(root, field);
+        }
+        return root;
+    }
+    toFormMapping(option, root) {
+        for (const [key, value] of Object.entries(option)) {
+            if (Array.isArray(value)) {
+                const formArray = this.fb.array([]);
+                for (const item of value) {
+                    if (item instanceof Object && !(item instanceof Array)) {
+                        const formGroup = this.fb.group({});
+                        this.toFormMapping(item, formGroup);
+                        formArray.push(formGroup);
+                    }
+                    else {
+                        // Trường hợp mảng giá trị đơn giản
+                        const field = this.mapping.get(item);
+                        if (!field) {
+                            console.warn(`Field with name ${item} not found in mapping.`);
+                            continue;
+                        }
+                        const { control } = Utils.builderFromControl(field);
+                        this.validateOnUseApi(field);
+                        control.subscribe((value) => {
+                            this.builder.callEvent('onFieldChange', field.name, value);
+                        });
+                        formArray.push(control);
+                    }
+                }
+                if (root instanceof FormGroup) {
+                    root.addControl(key, formArray);
+                }
+                else {
+                    root.push(formArray);
+                }
+            }
+            else if (value instanceof Object) {
+                const formGroup = root;
+                const childGroup = new FormGroup({});
+                this.toFormMapping(value, childGroup);
+                formGroup.addControl(key, childGroup);
+            }
+            else {
+                // Giá trị là FormField
+                const field = this.mapping.get(value);
+                if (!field) {
+                    console.warn(`Field with name ${value} not found in mapping.`);
+                    continue;
+                }
+                const formGroup = root;
+                this.validateOnUseApi(field);
+                const { control } = Utils.builderFromControl(field);
+                control.subscribe((value) => {
+                    this.builder.callEvent('onFieldChange', field.name, value);
+                });
+                formGroup.addControl(key, control);
+            }
+        }
+    }
+    validateOnUseApi(field) {
+        if (SELECTION_FIELD_TYPES.includes(field.type)) {
+        }
+    }
+    /**
+     * Mark all form controls as touched to trigger validation message display
+     */
+    markAllAsTouched() {
+        // Mark all controls in the mapping as touched
+        for (const [_key, field] of Array.from(this.mapping.entries())) {
+            if (field.control) {
+                field.control.markAsTouched();
+            }
+        }
+    }
+    onSubmit() { }
+    onReset() { }
+}

package/dist/collection/components/x-form-builder/services/schema/form-registry.js

@@ -0,0 +1,30 @@
+class FormRegistryService {
+    registry = new Map();
+    register(type, renderFn) {
+        if (this.registry.has(type)) {
+            console.warn(`FormRegistry: Overriding existing renderer for type "${type}"`);
+        }
+        this.registry.set(type, renderFn);
+    }
+    getRenderer(type) {
+        return this.registry.get(type);
+    }
+    render(type, context) {
+        const renderer = this.getRenderer(type);
+        if (!renderer) {
+            console.warn(`FormRegistry: No renderer found for type "${type}"`);
+            return null;
+        }
+        return renderer(context);
+    }
+    has(type) {
+        return this.registry.has(type);
+    }
+    getRegisteredTypes() {
+        return Array.from(this.registry.keys());
+    }
+    clear() {
+        this.registry.clear();
+    }
+}
+export const FormRegistry = new FormRegistryService();

package/dist/collection/components/x-form-builder/services/schema/schema-actions.js

@@ -0,0 +1,3 @@
+export class schemaActions {
+    constructor() { }
+}