@xlabs-store/core 0.0.1 → 0.0.3

package/dist/esm/x-form-builder.entry.js

@@ -1,805 +0,0 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-ig_mFsVk.js';
-import { U as Utils, S as SchemaBuilder } from './schema-builder-DBPGgJBx.js';
-import { t as translate } from './locale.service-D66tF8_2.js';
-
-const xFormBuilderCss = () => `:host{display:block}`;
-
-const EMPTY_OBJECT = {};
-const XFormBuilder = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.xChange = createEvent(this, "xChange", 7);
-        this.formSubmit = createEvent(this, "formSubmit", 7);
-        this.xTableAction = createEvent(this, "xTableAction", 7);
-        this.formError = createEvent(this, "formError", 7);
-        this.ready = createEvent(this, "ready", 7);
-        this.xClick = createEvent(this, "xClick", 7);
-        this.valueChange = createEvent(this, "valueChange", 7);
-    }
-    /**
-     * The first name
-     */
-    // private size: 'small' | 'default' | 'large' = 'default';
-    xChange;
-    formSubmit;
-    xTableAction;
-    formError;
-    ready;
-    xClick;
-    valueChange;
-    get el() { return getElement(this); }
-    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 watchers() { return {
-        "schema": [{
-                "syncBuilder": 0
-            }],
-        "value": [{
-                "syncBuilder": 0
-            }],
-        "context": [{
-                "syncBuilder": 0
-            }]
-    }; }
-};
-XFormBuilder.style = xFormBuilderCss();
-
-export { XFormBuilder as x_form_builder };