@xlabs-store/core 0.0.1

package/dist/collection/components/x-form-builder/x-form-builder.js

@@ -0,0 +1,1017 @@
+import { h, } from "@stencil/core";
+import { Utils } from "./utils/utils";
+import { SchemaBuilder } from "./services/schema/schema-builder";
+import { translate } from "../../locales/locale.service";
+const EMPTY_OBJECT = {};
+export class XFormBuilder {
+    /**
+     * The first name
+     */
+    // private size: 'small' | 'default' | 'large' = 'default';
+    xChange;
+    formSubmit;
+    xTableAction;
+    formError;
+    ready;
+    xClick;
+    valueChange;
+    el;
+    getMessageValidator(field, errors = {}) {
+        if (!errors || Object.keys(errors).length === 0) {
+            return [];
+        }
+        const params = {
+            ...field,
+            id: field.id,
+            name: field.name,
+            label: field.label,
+            field: field.label || field.name || 'Field',
+        };
+        const fieldValidationMessages = field?.validationMessages || {};
+        const settingValidationMessages = this.schema?.setting?.validateMessages || {};
+        const defaultValidationMessages = Utils.messageValidator();
+        const messages = Object.entries(errors).map(([errKey, errValue]) => {
+            const message = fieldValidationMessages[errKey] ||
+                settingValidationMessages[errKey] ||
+                defaultValidationMessages[errKey];
+            return translate(message, {
+                ...errValue,
+                ...params,
+            });
+        });
+        return messages;
+    }
+    get mapping() {
+        const InputCallback = (field) => {
+            const { commonProps, onChange } = this.getcommonProps(field);
+            const rerenderKey = field.id || field.name;
+            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 InputNumberCallback = (field) => {
+            const { commonProps, onChange } = this.getcommonProps(field);
+            const f = field;
+            return (h("x-input-number", { ...commonProps, status: commonProps.status, min: f.min, max: f.max, step: f.step, precision: f.precision, controls: f.controls, stringMode: f.stringMode, onXChange: onChange }));
+        };
+        // Simple non-input renderers for remaining cases
+        const DividerCallback = (field) => {
+            const f = field;
+            const orientation = f.orientation || 'center';
+            const text = f.text || f.content || f.description || '';
+            const dashed = !!f.dashed;
+            const plain = !!f.plain;
+            const style = {
+                marginTop: f.marginTop !== undefined ? `${f.marginTop}px` : '12px',
+                marginBottom: f.marginBottom !== undefined ? `${f.marginBottom}px` : '12px',
+            };
+            return (h("x-divider", { orientation: orientation, dashed: dashed, plain: plain, style: style }, text));
+        };
+        const HeadingCallback = (field) => {
+            const level = field.level ?? 3;
+            const align = field.align;
+            const content = String(field.content ?? '');
+            const styleType = field.styleType;
+            const ellipsis = field.ellipsis;
+            const ellipsisRows = 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 = (field) => {
+            const align = field.align;
+            const styleType = field.styleType;
+            const ellipsis = field.ellipsis;
+            const ellipsisRows = field.ellipsisRows;
+            const style = {
+                margin: '8px 0',
+                color: 'var(--x-text-secondary, #6b7280)',
+                textAlign: align,
+            };
+            const content = String(field.content ?? field.placeholder ?? field.label ?? '');
+            return (h("p", { style: style, "data-type": styleType, "data-ellipsis": ellipsis, "data-rows": ellipsisRows }, content));
+        };
+        const HrefCallback = (field) => {
+            const align = field.align;
+            const styleType = field.styleType;
+            const ellipsis = field.ellipsis;
+            const underline = field.underline;
+            const icon = field.icon;
+            const href = field.href || field.value || '#';
+            const target = field.target || '_self';
+            const rel = field.rel || '';
+            const text = String(field.content ??
+                field.label ??
+                field.text ??
+                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 = (field) => {
+            const align = field.align;
+            const src = field.src || field.value || '';
+            const width = field.width || 300;
+            const height = field.height || 300;
+            const alt = field.alt || '';
+            return (h("div", { style: { margin: '8px 0', textAlign: align } }, h("img", { src: src, width: width, height: height, alt: alt, style: { borderRadius: '8px' } })));
+        };
+        const AvatarCallback = (field) => {
+            const align = field.align;
+            const src = field.src || field.value || '';
+            const size = field.size || 64;
+            const circle = field.circle === undefined || field.circle
+                ? '50%'
+                : '0';
+            const alt = 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 = (field) => {
+            const src = field.src;
+            const title = field.title || 'Embedded Content';
+            const width = field.width || '100%';
+            const height = field.height || 400;
+            const frameBorder = field.frameBorder || 0;
+            const scrolling = field.scrolling || 'auto';
+            const loading = field.loading || 'lazy';
+            const sandbox = field.sandbox;
+            const allow = field.allow;
+            const referrerPolicy = 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 = (field) => {
+            const align = field.align || 'center';
+            const label = field.label;
+            const value = field.value || 'https://example.com';
+            const size = field.size || 200;
+            const level = field.level || 'M';
+            const bgColor = field.bgColor || '#FFFFFF';
+            const fgColor = field.fgColor || '#000000';
+            const includeMargin = !!field.includeMargin;
+            const description = 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 = (field) => (h("div", { style: {
+                padding: '12px',
+                border: '1px solid var(--x-border, #e5e7eb)',
+                borderRadius: '8px',
+                margin: '8px 0',
+            } }, 'elements' in field && field.elements
+            ? this.bind(field.elements, field)
+            : null));
+        const ContainerCallback = (field) => (h("div", { style: { margin: '8px 0' } }, 'elements' in field && field.elements
+            ? this.bind(field.elements, field)
+            : null));
+        const GridCallback = (field) => (h("div", { style: {
+                display: 'grid',
+                gridTemplateColumns: `repeat(${field.columns || 12}, minmax(0, 1fr))`,
+                gap: `${field.gap || 15}px`,
+            } }, 'elements' in field && field.elements
+            ? this.bind(field.elements, field)
+            : null));
+        const MapsCallback = (field) => {
+            const width = field.width || '100%';
+            const height = field.height || 400;
+            const provider = field.provider || 'openstreetmap';
+            const center = field.center;
+            const zoom = field.zoom || 10;
+            const searchEnabled = !!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(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))));
+        };
+        // Wrappers for stencil components to satisfy function signature
+        const SelectCallback = (field) => {
+            let { commonProps, onChange } = this.getcommonProps(field);
+            const f = field;
+            // Map mode: "multiple" | "tags" | "single" (single -> undefined)
+            const mode = f.mode === 'single' ? undefined : f.mode;
+            return (h("x-select", { ...commonProps, value: field.control ? field.control.value : field.defaultValue, mode: mode, allowClear: f.allowClear ?? commonProps.allowClear ?? false, showSearch: f.showSearch ?? false, placeholder: f.placeholder || commonProps.placeholder, onXChange: onChange, options: f.options || [] }));
+        };
+        const RadioCallback = (field) => {
+            const { commonProps, onChange } = this.getcommonProps(field);
+            const f = field;
+            return (h("x-radio-group", { ...commonProps, value: field.control ? field.control.value : field.defaultValue, options: f.options || [], direction: f.direction || f.orientation || 'horizontal', onXChange: onChange }));
+        };
+        const CheckboxCallback = (field) => {
+            const { commonProps, onChange } = this.getcommonProps(field);
+            const f = field;
+            const options = f.options || [];
+            const currentValue = field.control
+                ? field.control.value
+                : commonProps.defaultValue;
+            const isArray = Array.isArray(currentValue);
+            const direction = f.direction || f.orientation || 'horizontal';
+            const containerStyle = {
+                display: 'flex',
+                gap: '10px',
+                flexWrap: 'wrap',
+                flexDirection: direction === 'vertical' ? 'column' : 'row',
+            };
+            return (h("div", { style: { margin: '4px 0' } }, h("div", { style: containerStyle }, options.length > 0 ? (options.map((opt, idx) => (h("x-checkbox", { key: `${field.name}-${idx}`, ...commonProps, value: opt.value, disabled: opt.disabled || commonProps.disabled, onXChange: onChange, checked: isArray
+                    ? (currentValue || []).includes(opt.value)
+                    : currentValue === opt.value }, String(opt.label))))) : (h("x-checkbox", { ...commonProps, onXChange: onChange, checked: !!currentValue }, String(field.label))))));
+        };
+        const DateLocaleCallback = (field) => {
+            let { commonProps, onChange } = this.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 = (field) => {
+            let { commonProps, onChange } = this.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 = (field) => {
+            let { commonProps, onChange } = this.getcommonProps(field);
+            // Ensure value is a string for x-time-picker
+            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 = (field) => {
+            let { commonProps, onChange } = this.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 = (field) => {
+            let { commonProps, onChange } = this.getcommonProps(field);
+            const fieldData = field;
+            return (h("x-upload", { ...commonProps, onXChange: onChange, listType: fieldData.listType, multiple: fieldData.multiple, maxCount: fieldData.maxCount, accept: fieldData.accept, action: fieldData.action }));
+        };
+        const SliderCallback = (field) => {
+            let { commonProps, onChange } = this.getcommonProps(field);
+            const f = field;
+            return (h("x-slider", { ...commonProps, value: field.control ? field.control.value : field.defaultValue, range: f.range, marks: f.marks, tooltip: f.tooltip !== undefined ? f.tooltip : f.tooltipVisible, allowCross: f.allowCross, pushable: f.pushable, draggableTrack: f.draggableTrack, onXChange: onChange }));
+        };
+        const SwitchCallback = (field) => {
+            let { commonProps, onChange } = this.getcommonProps(field);
+            const f = field;
+            return (h("x-switch", { ...commonProps, checked: field.control ? field.control.value : field.defaultValue, size: commonProps.size === 'middle' ? 'default' : commonProps.size, checkedChildren: f.checkedChildren, unCheckedChildren: f.unCheckedChildren, defaultChecked: f.defaultChecked, onXChange: onChange }));
+        };
+        const CaptchaCallback = (field) => {
+            let { commonProps, onChange } = this.getcommonProps(field);
+            const f = field;
+            return (h("x-captcha", { ...commonProps, value: field.control ? field.control.value : (field.defaultValue || ''), length: f.length, caseSensitive: f.caseSensitive, message: f.message, onXChange: onChange }));
+        };
+        const AddressCallback = (field) => {
+            let { commonProps, onChange } = this.getcommonProps(field);
+            const f = field;
+            return (h("x-address", { ...commonProps, value: field.control ? field.control.value : (field.defaultValue || EMPTY_OBJECT), onXChange: onChange, placeholderProvince: f.placeholderProvince, placeholderDistrict: f.placeholderDistrict, placeholderWard: f.placeholderWard, ...{
+                    provincesData: f.provincesData,
+                    districtsData: f.districtsData,
+                    wardsData: f.wardsData,
+                }, ref: (el) => {
+                    if (el && field.control) {
+                        field.control.registerValidatorAsync(async () => {
+                            const isValid = await el.validate();
+                            return isValid ? null : { address: 'Please select full address' };
+                        });
+                    }
+                } }));
+        };
+        const RateCallback = (field) => {
+            let { commonProps, onChange } = this.getcommonProps(field);
+            const f = field;
+            return (h("x-rate", { ...commonProps, value: field.control ? field.control.value : (field.defaultValue || 0), count: f.count, allowHalf: f.allowHalf, allowClear: f.allowClear, character: f.character, onXChange: onChange }));
+        };
+        const TreeselectCallback = (field) => {
+            const { commonProps, onChange } = this.getcommonProps(field);
+            const f = field;
+            return (h("x-tree-select", { ...commonProps, onXChange: onChange, treeData: f.treeData || f.options || [], multiple: f.multiple, treeCheckable: f.treeCheckable, showCheckedStrategy: f.showCheckedStrategy, showSearch: f.showSearch, allowClear: f.allowClear ?? commonProps.allowClear, placeholder: f.placeholder || commonProps.placeholder, value: field.control ? field.control.value : commonProps.defaultValue }));
+        };
+        const TransferCallback = (field) => {
+            const { commonProps, onChange } = this.getcommonProps(field);
+            const f = field;
+            return (h("x-transfer", { ...commonProps, onXChange: onChange, dataSource: f.dataSource || [], targetKeys: field.control ? field.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 }));
+        };
+        const CascaderCallback = (field) => {
+            const { commonProps, onChange } = this.getcommonProps(field);
+            const f = field;
+            return (h("x-cascader", { ...commonProps, onXChange: onChange, options: f.options || [], value: field.control ? field.control.value : (f.defaultValue || null), placeholder: f.placeholder || commonProps.placeholder, size: f.size || 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 = (field) => {
+            const { commonProps, onChange } = this.getcommonProps(field);
+            const f = field;
+            return (h("x-auto-complete", { ...commonProps, onXChange: onChange, options: f.options || [], value: field.control ? field.control.value : (f.defaultValue || ''), placeholder: f.placeholder || commonProps.placeholder, size: f.size || 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 = (field) => {
+            let { commonProps, onChange } = this.getcommonProps(field);
+            return h("x-color-picker", { ...commonProps, onXChange: onChange });
+        };
+        const EditorCallback = (field) => {
+            let { commonProps, onChange } = this.getcommonProps(field);
+            return h("x-editor", { ...commonProps, onValueChange: onChange });
+        };
+        const ButtonCallback = (field) => {
+            const f = field;
+            const align = f.align;
+            const buttonType = f.buttonType || f.type || 'default';
+            const shape = f.shape || 'default';
+            const size = f.size || 'middle';
+            const block = !!f.block;
+            const danger = !!f.danger;
+            const ghost = !!f.ghost;
+            const icon = f.icon;
+            const loading = !!f.loading;
+            const disabled = !!f.disabled;
+            const label = f.content || field.label || '';
+            const style = { textAlign: align, margin: '8px 0' };
+            const htmlType = f.htmlType
+                ? f.htmlType
+                : (f.type === 'submit' || f.type === 'reset' ? f.type : 'button');
+            const onClick = async (event) => {
+                if (htmlType === 'submit') {
+                    // Validate all captcha components first
+                    let allCaptchaValid = true;
+                    const shadowRoot = this.el.shadowRoot;
+                    if (shadowRoot) {
+                        const captchas = shadowRoot.querySelectorAll('x-captcha');
+                        for (let i = 0; i < captchas.length; i++) {
+                            const captcha = captchas[i];
+                            if (captcha.validate) {
+                                const res = await captcha.validate();
+                                if (!res) {
+                                    allCaptchaValid = false;
+                                }
+                            }
+                        }
+                    }
+                    if (this.builder.form.valid && allCaptchaValid) {
+                        this.formSubmit.emit({
+                            value: this.builder.form.value,
+                            builder: this.builder,
+                            event,
+                            field,
+                        });
+                    }
+                    else {
+                        this.builder.form.markAllAsTouched();
+                        this._tick++;
+                        this.formError.emit({
+                            builder: this.builder,
+                            event,
+                            errors: this.builder.form.errors,
+                        });
+                    }
+                }
+                else if (htmlType === 'reset') {
+                    this.builder.form.reset();
+                    this._tick++;
+                }
+                else {
+                    this.xClick.emit({ field, builder: this.builder, event });
+                }
+            };
+            return (h("div", { style: style }, h("x-button", { type: buttonType, shape: shape, size: size, block: block, danger: danger, ghost: ghost, loading: loading, disabled: disabled, htmlType: htmlType, onXClick: onClick }, icon && h("x-icon", { slot: 'icon', name: icon }), label)));
+        };
+        const TableCallback = (field) => {
+            const { commonProps, onChange } = this.getcommonProps(field);
+            const f = field;
+            const columns = (f.columns || []).map(col => ({
+                ...col,
+                dataIndex: col.dataIndex || col.key,
+                slot: col.actions ? (col.slot || col.key || 'action') : col.slot
+            }));
+            return (h("x-table", { ...commonProps, columns: columns, dataSource: f.dataSource || [], rowKey: f.rowKey || 'id', tableTitle: f.tableTitle, pagination: f.pagination, tableScroll: f.tableScroll, rowSelection: f.rowSelection, size: f.size, bordered: f.bordered, loading: f.loading, showHeader: f.showHeader, emptyText: f.emptyText, resizableColumns: f.resizableColumns, draggableColumns: f.draggableColumns, draggableRows: f.draggableRows, sticky: f.sticky, onXSelectionChange: (ev) => {
+                    if (f.rowSelection) {
+                        onChange(ev.detail.selectedRowKeys);
+                    }
+                }, onXChange: (ev) => {
+                    console.log('x-form-builder: Table changed:', ev.detail);
+                } }, columns.filter(col => col.actions).map(col => ((f.dataSource || []).map((record, index) => (h("div", { slot: `${col.slot}-${index}`, style: { display: 'flex', gap: '8px' } }, (col.actions || []).map(action => {
+                const button = (h("x-button", { type: action.type === 'button' ? 'primary' : 'link', size: "small", danger: action.danger, onClick: (e) => {
+                        e.stopPropagation();
+                        this.xTableAction.emit({
+                            action: action.onClick || action.label,
+                            record,
+                            field: f
+                        });
+                    } }, action.icon && h("x-icon", { slot: 'icon', name: action.icon }), action.label));
+                return action.tooltip ? (h("x-tooltip", { tooltipTitle: action.tooltip }, button)) : (button);
+            }))))))));
+        };
+        return {
+            text: InputCallback,
+            input: InputCallback,
+            email: InputCallback,
+            password: InputCallback,
+            url: InputCallback,
+            number: InputNumberCallback,
+            textarea: InputCallback,
+            select: SelectCallback,
+            radio: RadioCallback,
+            checkbox: CheckboxCallback,
+            date: DateLocaleCallback,
+            datetime: DateTimeCallback,
+            time: TimeCallback,
+            file: UploadCallback,
+            slider: SliderCallback,
+            switch: SwitchCallback,
+            rate: RateCallback,
+            color: ColorPickerCallback,
+            tags: InputCallback,
+            range: InputCallback,
+            phone: InputCallback,
+            location: InputCallback,
+            'tree-select': TreeselectCallback,
+            transfer: TransferCallback,
+            cascader: CascaderCallback,
+            'auto-complete': AutoCompleteCallback,
+            daterange: DateRangeCallback,
+            divider: DividerCallback,
+            heading: HeadingCallback,
+            paragraph: ParagraphCallback,
+            image: ImageCallback,
+            captcha: CaptchaCallback,
+            address: AddressCallback,
+            avatar: AvatarCallback,
+            editor: EditorCallback,
+            button: ButtonCallback,
+            href: HrefCallback,
+            grid: GridCallback,
+            table: TableCallback,
+            maps: MapsCallback,
+            panel: PanelCallback,
+            container: ContainerCallback,
+            iframe: IframeCallback,
+            'qr-code': QRCodeCallback,
+        };
+    }
+    schema;
+    getcommonProps(field) {
+        const commonProps = {
+            defaultValue: (field.defaultValue ?? field.defaultChecked ?? field.targetKeys),
+            prefixIcon: field.prefixIcon,
+            suffixIcon: field.suffixIcon,
+            focused: field.focused,
+            status: field.status,
+            allowClear: field.allowClear,
+            hasUppercase: field.hasUppercase,
+            hasNumber: field.hasNumber,
+            hasSpecialChar: field.hasSpecialChar,
+            name: field.name,
+            required: field.required || (Array.isArray(field.validators) && field.validators.some(v => v.type === 'required')),
+            disabled: field.disabled,
+            readonly: field.readonly,
+            size: (field.size || 'middle'),
+            placeholder: field.placeholder || '',
+            errorMessage: '',
+            pattern: field.pattern,
+        };
+        if ('min' in field) {
+            commonProps.min = field.min;
+        }
+        if ('max' in field) {
+            commonProps.max = field.max;
+        }
+        if ('step' in field) {
+            commonProps.step = field.step;
+        }
+        if ('minLength' in field) {
+            commonProps.minLength = field.minLength;
+        }
+        if ('maxLength' in field) {
+            commonProps.maxLength = field.maxLength;
+        }
+        const onChange = (e) => {
+            const val = e.detail && typeof e.detail === 'object' && 'value' in e.detail
+                ? e.detail.value
+                : e.detail;
+            if (field.control) {
+                field.control.setValue(val);
+            }
+            else {
+                field.value = val;
+            }
+            this._tick++;
+        };
+        const control = field.control;
+        if (control && this.builder && control.touched) {
+            commonProps.status = undefined;
+            if (control.invalid) {
+                commonProps.status = 'error';
+                const errors = control.errors ?? {};
+                const messages = this.getMessageValidator(field, errors);
+                commonProps.errorMessage =
+                    messages.length > 0 ? messages[0] : 'Invalid value';
+            }
+        }
+        return { commonProps, onChange };
+    }
+    _tick = 0;
+    value;
+    context = {};
+    builder;
+    componentWillLoad() {
+        this.syncBuilder();
+    }
+    syncBuilder() {
+        this.asyncBuilderForm();
+    }
+    isSyncing = false;
+    asyncBuilderForm() {
+        if (this.isSyncing)
+            return;
+        this.isSyncing = true;
+        try {
+            if (this.schema && (!this.builder || this.schema !== this.builder.schema)) {
+                this.builder = new SchemaBuilder(this.schema);
+                this.builder.subscribe((value) => {
+                    this.value = value;
+                    this.valueChange.emit(value);
+                    this.xChange.emit({
+                        builder: this.builder,
+                        event: null,
+                    });
+                    this._tick++;
+                });
+            }
+            if (this.builder && this.value) {
+                this.builder.form.patchValue(this.value, { emitEvent: false });
+            }
+            if (this.builder && this.context) {
+                this.builder.context = this.context;
+                if (this.builder.conditions && this.builder.conditions.checkAll) {
+                    this.builder.conditions.checkAll();
+                }
+            }
+            this._tick++;
+        }
+        finally {
+            this.isSyncing = false;
+        }
+    }
+    getLayoutStyles() {
+        const layoutConfig = this.schema.layout || this.schema.setting?.layout || 'vertical';
+        const layout = layoutConfig;
+        const layoutType = typeof layout === 'string' ? layout : layout?.type;
+        const gap = this.schema?.gap ?? 10;
+        if (layoutType === 'horizontal') {
+            return {
+                container: {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: `${layout?.gap ?? gap}px`,
+                },
+                item: { marginBottom: '0' },
+            };
+        }
+        if (layoutType === 'inline') {
+            return {
+                container: { display: 'flex', alignItems: 'center', gap: `${layout?.gap ?? gap}px` },
+                item: { marginBottom: '0' },
+            };
+        }
+        if (layoutType === 'grid') {
+            const columns = layout?.columns || 2;
+            return {
+                container: {
+                    display: 'grid',
+                    gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+                    gap: `${layout?.gap ?? gap}px`,
+                },
+                item: { marginBottom: '0' },
+            };
+        }
+        // default vertical
+        return {
+            container: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: `${layout?.gap ?? gap}px`,
+            },
+            item: { marginBottom: '0' },
+        };
+    }
+    bind(elements, _parent) {
+        if (!elements || !Array.isArray(elements)) {
+            return null;
+        }
+        return elements.map((element) => {
+            if (element.hidden) {
+                return null;
+            }
+            const isParentDisabled = _parent ? _parent.disabled : false;
+            const isParentReadonly = _parent ? _parent.readonly : false;
+            const computedElement = {
+                ...element,
+                disabled: element.disabled || isParentDisabled,
+                readonly: element.readonly || isParentReadonly
+            };
+            const Component = this.mapping[element.type];
+            const itemStyle = { marginBottom: '15px' };
+            if (_parent?.type === 'grid') {
+                const span = element.span || 1;
+                itemStyle.gridColumn = `span ${span}`;
+            }
+            if ('elements' in element) {
+                return (h("div", { key: element.id || element.name, style: itemStyle }, h(Component, { ...computedElement })));
+            }
+            const { commonProps } = this.getcommonProps(computedElement);
+            const layoutConfig = this.schema.layout || this.schema.setting?.layout || 'vertical';
+            const layoutType = typeof layoutConfig === 'string' ? layoutConfig : layoutConfig?.type;
+            const labelAlign = typeof layoutConfig === 'object' ? layoutConfig?.labelAlign : (this.schema.setting?.labelAlign || 'right');
+            const labelCol = this.schema.setting?.labelCol;
+            const wrapperCol = this.schema.setting?.wrapperCol;
+            if (element.type === 'button') {
+                const buttonProps = { ...element };
+                if (buttonProps.buttonType) {
+                    buttonProps.type = buttonProps.buttonType;
+                }
+                if (element.align) {
+                    itemStyle.textAlign = element.align;
+                }
+                return (h("div", { key: element.id || element.name, style: itemStyle }, h(Component, { ...buttonProps }, element.content)));
+            }
+            return (h("x-form-item", { key: element.id || element.name, label: element.label, colon: element.colon, required: element.required || (Array.isArray(element.validators) && element.validators.some(v => v.type === 'required')), validateStatus: commonProps.status, help: commonProps.errorMessage || element.note, layout: layoutType, labelAlign: labelAlign, labelCol: labelCol, wrapperCol: wrapperCol, style: itemStyle }, h(Component, { ...computedElement })));
+        });
+    }
+    render() {
+        if (!this.schema)
+            return null;
+        const styles = this.getLayoutStyles();
+        const renderActions = () => {
+            if (!this.schema || !this.builder)
+                return null;
+            if (this.builder.form.is_custom_submit)
+                return null;
+            const setting = this.schema.setting || {};
+            let actions = Array.isArray(this.schema.actions)
+                ? this.schema.actions
+                : [];
+            // Ensure at least one submit action is present
+            if (!actions || actions.length === 0) {
+                if (setting.showSubmitButton) {
+                    actions.push({
+                        id: 'submit',
+                        type: 'submit',
+                        label: setting.submitButtonText || translate('buttons.submit'),
+                    });
+                }
+                if (setting.showResetButton) {
+                    actions.push({
+                        id: 'reset',
+                        type: 'reset',
+                        label: setting.resetButtonText || translate('buttons.reset'),
+                    });
+                }
+            }
+            const ButtonComponent = this.mapping['button'];
+            // Optional layout from settings
+            const actionsAlign = setting.submitButtonPosition || 'right';
+            const containerStyle = {
+                marginTop: '12px',
+                textAlign: actionsAlign,
+            };
+            return (h("div", { style: containerStyle }, actions.map((action, idx) => {
+                const { label, type, ...rest } = action;
+                const buttonProps = { ...rest };
+                if (type === 'submit' || type === 'reset') {
+                    buttonProps.htmlType = type;
+                }
+                else if (type) {
+                    buttonProps.type = type;
+                }
+                return (h("span", { style: { display: 'inline-block', marginLeft: idx ? '8px' : '0' }, key: action.id || `action-${idx}` }, h(ButtonComponent, { ...buttonProps }, label)));
+            })));
+        };
+        const form_template = (h("form", { noValidate: true, onSubmit: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+            } }, h("div", { style: styles.container }, this.bind(this.schema?.elements)), renderActions()));
+        if (this.schema.type === 'card') {
+            return (h("x-card", null, h("slot", { name: "title" }, this.schema.title && (h("x-typography-title", { level: 3 }, this.schema.title)), this.schema.description && (h("x-typography-text", null, this.schema.description))), form_template));
+        }
+        return form_template;
+    }
+    static get is() { return "x-form-builder"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-form-builder.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-form-builder.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "schema": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Schema",
+                    "resolved": "Schema",
+                    "references": {
+                        "Schema": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-form-builder/types/index.ts::Schema",
+                            "referenceLocation": "Schema"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "T",
+                    "resolved": "T",
+                    "references": {
+                        "T": {
+                            "location": "global",
+                            "id": "global::T"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "context": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "context",
+                "defaultValue": "{}"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_tick": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xChange",
+                "name": "xChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The first name"
+                },
+                "complexType": {
+                    "original": "XFormBuilderChangeDetail",
+                    "resolved": "XFormBuilderChangeDetail",
+                    "references": {
+                        "XFormBuilderChangeDetail": {
+                            "location": "local",
+                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-form-builder/x-form-builder.tsx",
+                            "id": "src/components/x-form-builder/x-form-builder.tsx::XFormBuilderChangeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "formSubmit",
+                "name": "formSubmit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "XFormBuilderSubmitDetail",
+                    "resolved": "XFormBuilderSubmitDetail",
+                    "references": {
+                        "XFormBuilderSubmitDetail": {
+                            "location": "local",
+                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-form-builder/x-form-builder.tsx",
+                            "id": "src/components/x-form-builder/x-form-builder.tsx::XFormBuilderSubmitDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xTableAction",
+                "name": "xTableAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "XTableActionDetail",
+                    "resolved": "XTableActionDetail",
+                    "references": {
+                        "XTableActionDetail": {
+                            "location": "local",
+                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-form-builder/x-form-builder.tsx",
+                            "id": "src/components/x-form-builder/x-form-builder.tsx::XTableActionDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "formError",
+                "name": "formError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "XFormBuilderErrorDetail",
+                    "resolved": "XFormBuilderErrorDetail",
+                    "references": {
+                        "XFormBuilderErrorDetail": {
+                            "location": "local",
+                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-form-builder/x-form-builder.tsx",
+                            "id": "src/components/x-form-builder/x-form-builder.tsx::XFormBuilderErrorDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "ready",
+                "name": "ready",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "xClick",
+                "name": "xClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "XFormBuilderClickDetail",
+                    "resolved": "XFormBuilderClickDetail",
+                    "references": {
+                        "XFormBuilderClickDetail": {
+                            "location": "local",
+                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-form-builder/x-form-builder.tsx",
+                            "id": "src/components/x-form-builder/x-form-builder.tsx::XFormBuilderClickDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "schema",
+                "methodName": "syncBuilder"
+            }, {
+                "propName": "value",
+                "methodName": "syncBuilder"
+            }, {
+                "propName": "context",
+                "methodName": "syncBuilder"
+            }];
+    }
+}