@syncfusion/ej2-react-form-builder 0.1.0-beta

package/src/utils/PropertyRenderer.js

@@ -0,0 +1,210 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useRef, useState } from 'react';
+import { TextBoxComponent, NumericTextBoxComponent, ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
+import { CheckBoxComponent, SwitchComponent, RadioButtonComponent } from '@syncfusion/ej2-react-buttons';
+import { DropDownListComponent, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
+import { DatePickerComponent, TimePickerComponent, DateTimePickerComponent, DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';
+import { RichTextEditorComponent, Inject, Toolbar, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-react-richtexteditor';
+import { OptionsEditor } from './OptionsEditor';
+import { AttributesEditor } from './AttributesEditor';
+import { ColumnBuilder } from './ColumnBuilder';
+import ButtonGroupEditor from './ButtonGroupEditor';
+import { ColumnSpanEditor } from './ColumnSpanEditor';
+import { useLocalization } from '../context/LocalizationContext';
+import { DataSourceCollector } from './DataSourceCollector';
+import { ExpressionEditor } from './ExpressionEditor';
+import MinMaxValueEditor from './MinMaxValueEditor';
+import LookupConfig from './LookupConfig';
+import { CustomValidationEditor } from './CustomValidationEditor';
+export const PropertyRenderer = ({ propertiesValues, property, initialValue, onChange, existingValues, mode }) => {
+    const rteRef = useRef(null);
+    const handleChange = (newValue) => {
+        onChange(property.key, newValue);
+    };
+    const { l10n, locale } = useLocalization();
+    switch (property.type) {
+        case 'text':
+            return (_jsxs("div", { className: "property-field", children: [_jsxs("label", { className: "property-label", children: [l10n.getConstant(property.label), property.required && _jsx("span", { className: "required", children: "*" })] }), property.description && (_jsx("p", { className: "property-description", children: l10n.getConstant(property.description) })), _jsx(TextBoxComponent, { id: `prop-text-${property.key}`, locale: locale, value: property.key !== 'name' && property.key !== 'width' ?
+                            initialValue !== undefined ? l10n.getConstant(initialValue) || initialValue : property.default || ''
+                            : initialValue !== undefined ? initialValue : property.default || '', placeholder: l10n.getConstant(property.placeholder), onChange: (property.key === 'defaultValue' || property.key === 'prefix' || property.key === 'suffix') ? undefined : (e) => handleChange(e.value), change: (property.key === 'defaultValue' || property.key === 'prefix' || property.key === 'suffix') ? (e) => handleChange(e.value) : undefined, floatLabelType: "Never", htmlAttributes: { 'maxLength': `${property.length}`, 'aria-label': `${l10n.getConstant(property.label)} textbox` } })] }));
+        case 'number':
+            return (_jsxs("div", { className: "property-field", children: [_jsxs("label", { className: "property-label", children: [l10n.getConstant(property.label), property.required && _jsx("span", { className: "required", children: "*" })] }), property.description && (_jsx("p", { className: "property-description", children: l10n.getConstant(property.description) })), _jsx(NumericTextBoxComponent, { id: `prop-number-${property.key}`, locale: locale, value: initialValue !== null && initialValue !== undefined ? initialValue : property.default, placeholder: l10n.getConstant(property.placeholder), min: property.min, max: property.max, format: 'n', step: property.step || 1, change: (e) => handleChange(e.value), floatLabelType: "Never", htmlAttributes: { 'aria-label': `${l10n.getConstant(property.label)} numeric textbox` } })] }));
+        case 'boolean':
+            return (_jsxs("div", { className: "property-field property-field-checkbox", children: [property.description && (_jsx("p", { className: "property-description property-description-inline", children: l10n.getConstant(property.description) })), _jsx(CheckBoxComponent, { id: `prop-boolean-${property.key}`, locale: locale, label: l10n.getConstant(property.label), checked: initialValue !== undefined ? initialValue : property.default, change: (e) => handleChange(e.checked), htmlAttributes: { 'aria-label': `${l10n.getConstant(property.label)} checkbox` } })] }));
+        case 'dropdown':
+            return (_jsxs("div", { className: "property-field", children: [_jsxs("label", { className: "property-label", children: [l10n.getConstant(property.label), property.required && _jsx("span", { className: "required", children: "*" })] }), property.description && (_jsx("p", { className: "property-description", children: l10n.getConstant(property.description) })), _jsx(DropDownListComponent, { id: `prop-dropdown-${property.key}`, dataSource: (property.options || []).map(option => ({
+                            text: l10n.getConstant(option) || option,
+                            value: option.charAt(0).toUpperCase() + option.slice(1)
+                        })), locale: locale, fields: { text: 'text', value: 'value' }, value: initialValue || property.default, placeholder: l10n.getConstant(property.placeholder), change: (e) => handleChange(e.value), floatLabelType: "Never", htmlAttributes: { 'aria-label': `${l10n.getConstant(property.label)} dropdown` } })] }));
+        case 'multiselect':
+            return (_jsxs("div", { className: "property-field", children: [_jsxs("label", { className: "property-label", children: [l10n.getConstant(property.label), property.required && _jsx("span", { className: "required", children: "*" })] }), property.description && (_jsx("p", { className: "property-description", children: l10n.getConstant(property.description) })), _jsx(MultiSelectComponent, { id: `prop-dropdown-${property.key}`, dataSource: (property.options || []).map(option => ({
+                            text: l10n.getConstant(option) || option,
+                            value: option.charAt(0).toUpperCase() + option.slice(1)
+                        })), allowCustomValue: true, locale: locale, fields: { text: 'text', value: 'value' }, value: initialValue || property.default, placeholder: l10n.getConstant(property.placeholder), change: (e) => handleChange(e.value), floatLabelType: "Never", htmlAttributes: { 'aria-label': `${l10n.getConstant(property.label)} multiselect` } })] }));
+        case 'radio':
+            return (_jsxs("div", { className: "property-field", children: [_jsxs("label", { className: "property-label", id: `label-${property.key}`, children: [l10n.getConstant(property.label), property.required && _jsx("span", { className: "required", children: "*" })] }), property.description && (_jsx("p", { className: "property-description", id: `desc-${property.key}`, children: l10n.getConstant(property.description) })), _jsx("div", { role: "radiogroup", "aria-labelledby": `label-${property.key}`, className: "radio-options", children: (property.options || []).map((opt, index) => {
+                            const isLast = index === (property.options || []).length - 1;
+                            return (_jsxs("div", { className: "radio-option", "aria-label": l10n.getConstant(property.label), children: [_jsx(RadioButtonComponent, { name: `prop-radio-${property.key}`, id: `prop-radio-${property.key}-${opt}`, label: l10n.getConstant(opt), value: opt, checked: initialValue === opt, change: () => handleChange(opt), htmlAttributes: { 'aria-describedby': `desc-${property.key}` } }), _jsx("div", { className: "property-description property-description-inline", style: { marginBottom: isLast ? '0' : '0.5rem', marginTop: '0.3rem' }, children: l10n.getConstant(`visibility_${opt}_description`) })] }, opt));
+                        }) })] }));
+        case 'object':
+            return (_jsxs("div", { className: "property-field", children: [_jsxs("label", { className: "property-label", children: [l10n.getConstant(property.label), property.required && _jsx("span", { className: "required", children: "*" })] }), property.description && (_jsx("p", { className: "property-description", children: l10n.getConstant(property.description) })), _jsx(TextBoxComponent, { id: `prop-object-${property.key}`, value: typeof initialValue === 'object' ? JSON.stringify(initialValue, null, 2) : (initialValue || JSON.stringify(property.default || {})), placeholder: l10n.getConstant(property.placeholder), multiline: true, locale: locale, change: (e) => {
+                            try {
+                                const parsed = JSON.parse(e.value);
+                                handleChange(parsed);
+                            }
+                            catch {
+                                handleChange(e.value);
+                            }
+                        }, floatLabelType: "Never", htmlAttributes: { 'aria-label': `${l10n.getConstant(property.label)} json input` } })] }));
+        case 'array':
+            return (_jsxs("div", { className: "property-field", children: [_jsxs("label", { className: "property-label", children: [l10n.getConstant(property.label), property.required && _jsx("span", { className: "required", children: "*" })] }), property.description && (_jsx("p", { className: "property-description", children: l10n.getConstant(property.description) })), _jsx(TextBoxComponent, { id: `prop-array-${property.key}`, value: Array.isArray(initialValue) ? JSON.stringify(initialValue) : (initialValue || JSON.stringify(property.default || [])), placeholder: 'e.g., ["item1", "item2"]', multiline: true, locale: locale, change: (e) => {
+                            try {
+                                const parsed = JSON.parse(e.value);
+                                handleChange(Array.isArray(parsed) ? parsed : []);
+                            }
+                            catch (err) {
+                                // Invalid JSON, keep as is for now
+                                handleChange(e.value);
+                            }
+                        }, floatLabelType: "Never", htmlAttributes: { 'aria-label': `${l10n.getConstant(property.label)} array textbox` } })] }));
+        case 'html':
+            const toolbarSettings = {
+                items: ['Undo', 'Redo', '|', 'SourceCode']
+            };
+            return (_jsxs("div", { className: "property-field", children: [_jsxs("label", { className: "property-label", children: [l10n.getConstant(property.label), property.required && _jsx("span", { className: "required", children: "*" })] }), property.description && (_jsx("p", { className: "property-description", children: l10n.getConstant(property.description) })), _jsx(RichTextEditorComponent, { ref: rteRef, id: `prop-html-${property.key}`, editorMode: "HTML", locale: locale, toolbarSettings: toolbarSettings, value: initialValue || property.default || '', change: (e) => handleChange(e.value), saveInterval: 1, height: "180px", enableHtmlSanitizer: false, created: () => {
+                            if (rteRef.current) {
+                                setTimeout(() => {
+                                    rteRef.current?.showSourceCode();
+                                }, 150);
+                            }
+                        }, htmlAttributes: { 'aria-label': `HTML Editor` }, children: _jsx(Inject, { services: [Toolbar, HtmlEditor, QuickToolbar] }) })] }));
+        case 'conditionBuilder':
+            return (_jsxs("div", { className: "property-field", children: [_jsx("label", { className: "property-label", children: l10n.getConstant(property.label) }), property.description && (_jsx("p", { className: "property-description", children: l10n.getConstant(property.description) })), _jsx("div", { className: "condition-builder-placeholder", children: _jsx("p", { style: { margin: 0, color: '#999', fontSize: '0.875rem' }, children: "Condition Builder (Coming Soon)" }) })] }));
+        case 'expression':
+            return (_jsxs("div", { className: "property-field", children: [_jsx("label", { className: "property-label", children: l10n.getConstant(property.label) }), property.description && (_jsx("div", { className: "property-description", children: l10n.getConstant(property.description) })), _jsx(ExpressionEditor, { expression: initialValue || property.default || '', availableFields: propertiesValues.availableFields || [], onExpressionChange: (expr) => { if (expr !== undefined && expr !== "" && expr !== initialValue) {
+                            handleChange(expr);
+                        } } })] }));
+        case 'customValidation':
+            return (_jsx("div", { className: "property-field", children: _jsx(CustomValidationEditor, { componentFields: propertiesValues.availableFields || [], excludeFieldId: existingValues?.name, values: property, existingRules: existingValues?.customValidation, onChange: handleChange }) }));
+        case 'minMaxEditor':
+            return (_jsxs("div", { className: "property-field", children: [_jsx("label", { className: "property-label", children: l10n.getConstant(property.label) }), property.description && (_jsx("p", { className: "property-description", children: l10n.getConstant(property.description) })), _jsx(MinMaxValueEditor, { label: l10n.getConstant(property.label), initialValue: initialValue || [], mode: property.editorMode || 'number', onChange: handleChange, locale: locale, description: property.description ? l10n.getConstant(property.description) : undefined, currentFieldId: propertiesValues?.name, builderMode: mode })] }));
+        case 'lookupconfig':
+            return (_jsx(LookupConfig, { value: initialValue, onChange: (newValue) => handleChange(newValue) }));
+        case 'options':
+            const componentType = property.componentType || 'options';
+            const useDataSourceCollector = mode != 'Simple' && ['fromurl'].includes(componentType.toLowerCase());
+            return (_jsxs("div", { className: "property-field", children: [_jsxs("label", { className: "property-label", children: [l10n.getConstant(property.label), property.required && _jsx("span", { className: "required", children: "*" })] }), property.description && (_jsx("p", { className: "property-description", children: l10n.getConstant(property.description) })), useDataSourceCollector ? (_jsx(DataSourceCollector, { value: initialValue || [l10n.getConstant('defaultOptionValue')], onChange: handleChange, type: componentType })) : (_jsx(OptionsEditor, { options: Array.isArray(initialValue) ? initialValue : [l10n.getConstant('defaultOptionValue')], onChange: handleChange, type: componentType }))] }));
+        case 'buttonGroup':
+            return (_jsxs("div", { className: "property-field", children: [_jsxs("label", { className: "property-label", children: [l10n.getConstant(property.label), property.required && _jsx("span", { className: "required", children: "*" })] }), property.description && (_jsx("p", { className: "property-description", children: l10n.getConstant(property.description) })), _jsx(ButtonGroupEditor, { buttons: Array.isArray(initialValue) ? initialValue : (property.default || []), onChange: (val) => handleChange(val) })] }));
+        case 'attributes':
+            return (_jsxs("div", { className: "property-field", children: [_jsxs("label", { className: "property-label", children: [l10n.getConstant(property.label), property.required && _jsx("span", { className: "required", children: "*" })] }), _jsx(AttributesEditor, { attributes: initialValue || [], onChange: handleChange })] }));
+        case 'color':
+            return (_jsxs("div", { className: "property-field", children: [_jsxs("label", { className: "property-label", children: [l10n.getConstant(property.label), property.required && _jsx("span", { className: "required", children: "*" })] }), _jsx(ColorPickerComponent, { locale: locale, value: initialValue || property.default || '', change: (e) => { handleChange(e.value); } }, `form`)] }));
+        case 'day':
+            const formatDate = (date) => {
+                if (!date)
+                    return '';
+                const month = String(date.getMonth() + 1).padStart(2, '0');
+                const day = String(date.getDate()).padStart(2, '0');
+                const year = date.getFullYear();
+                return `${month}/${day}/${year}`;
+            };
+            return (_jsxs("div", { className: "property-field", children: [_jsxs("label", { className: "property-label", children: [l10n.getConstant(property.label), property.required && _jsx("span", { className: "required", children: "*" })] }), property.description && (_jsx("p", { className: "property-description", children: l10n.getConstant(property.description) })), _jsx(DatePickerComponent, { id: `prop-day-${property.key}`, locale: locale, value: initialValue ? new Date(initialValue) : undefined, format: "MM/dd/yyyy", placeholder: l10n.getConstant(property.placeholder) || 'Select a date', change: (e) => handleChange(e.value ? formatDate(e.value) : ''), floatLabelType: "Never", htmlAttributes: { 'aria-label': `${l10n.getConstant(property.label)} datePicker` } })] }));
+        case 'time':
+            const formatTime = (date) => {
+                if (!date)
+                    return '';
+                let hours = date.getHours();
+                const minutes = String(date.getMinutes()).padStart(2, '0');
+                const ampm = hours >= 12 ? 'PM' : 'AM';
+                hours = hours % 12 || 12; // Convert to 12-hour format (1-12)
+                const hoursStr = String(hours).padStart(2, '0');
+                return `${hoursStr}:${minutes} ${ampm}`;
+            };
+            return (_jsxs("div", { className: "property-field", children: [_jsxs("label", { className: "property-label", children: [l10n.getConstant(property.label), property.required && _jsx("span", { className: "required", children: "*" })] }), property.description && (_jsx("p", { className: "property-description", children: l10n.getConstant(property.description) })), _jsx(TimePickerComponent, { id: `prop-time-${property.key}`, locale: locale, value: initialValue ? new Date(`2000-01-01 ${initialValue}`) : undefined, format: "hh:mm a", placeholder: l10n.getConstant(property.placeholder) || 'Select a time', change: (e) => handleChange(e.value ? formatTime(e.value) : ''), floatLabelType: "Never", htmlAttributes: { 'aria-label': `${l10n.getConstant(property.label)} timepicker` } })] }));
+        case 'datetime':
+            const formatDateTime = (date) => {
+                if (!date)
+                    return '';
+                const month = String(date.getMonth() + 1).padStart(2, '0');
+                const day = String(date.getDate()).padStart(2, '0');
+                const year = date.getFullYear();
+                let hours = date.getHours();
+                const ampm = hours >= 12 ? 'PM' : 'AM';
+                hours = hours % 12 || 12; // Convert to 12-hour format (1-12)
+                const hoursStr = String(hours).padStart(2, '0');
+                const minutes = String(date.getMinutes()).padStart(2, '0');
+                return `${month}/${day}/${year} ${hoursStr}:${minutes} ${ampm}`;
+            };
+            return (_jsxs("div", { className: "property-field", children: [_jsxs("label", { className: "property-label", children: [l10n.getConstant(property.label), property.required && _jsx("span", { className: "required", children: "*" })] }), property.description && (_jsx("p", { className: "property-description", children: l10n.getConstant(property.description) })), _jsx(DateTimePickerComponent, { id: `prop-datetime-${property.key}`, locale: locale, value: initialValue ? new Date(initialValue) : undefined, format: "MM/dd/yyyy hh:mm a", placeholder: l10n.getConstant(property.placeholder) || 'Select date and time', change: (e) => handleChange(e.value ? formatDateTime(e.value) : ''), floatLabelType: "Never", htmlAttributes: { 'aria-label': `${l10n.getConstant(property.label)} datetimepicker` } })] }));
+        case 'daterange':
+            const formatDateRange = (startDate, endDate) => {
+                if (!startDate || !endDate)
+                    return '';
+                const formatDate = (date) => {
+                    const month = String(date.getMonth() + 1).padStart(2, '0');
+                    const day = String(date.getDate()).padStart(2, '0');
+                    const year = date.getFullYear();
+                    return `${month}/${day}/${year}`;
+                };
+                return `${formatDate(startDate)}  -  ${formatDate(endDate)}`;
+            };
+            return (_jsxs("div", { className: "property-field", children: [_jsxs("label", { className: "property-label", children: [l10n.getConstant(property.label), property.required && _jsx("span", { className: "required", children: "*" })] }), property.description && (_jsx("p", { className: "property-description", children: l10n.getConstant(property.description) })), _jsx(DateRangePickerComponent, { id: `prop-daterange-${property.key}`, locale: locale, startDate: initialValue?.startDate ? new Date(initialValue.startDate) : undefined, endDate: initialValue?.endDate ? new Date(initialValue.endDate) : undefined, format: "MM/dd/yyyy", placeholder: l10n.getConstant(property.placeholder) || 'Select date range', change: (e) => {
+                            if (e.startDate && e.endDate) {
+                                handleChange(formatDateRange(e.startDate, e.endDate));
+                            }
+                            else {
+                                handleChange('');
+                            }
+                        }, floatLabelType: "Never", htmlAttributes: { 'aria-label': `${l10n.getConstant(property.label)} daterangepicker` } })] }));
+        case 'datagridcolumns':
+            return (_jsx("div", { className: "property-field", children: _jsx(ColumnBuilder, { columns: Array.isArray(initialValue) ? initialValue : [], onChange: handleChange, name: propertiesValues.name || [], label: property.label }) }));
+        case 'json':
+            return (_jsx("div", { className: "property-field", children: _jsx(DataSourceCollector, { datakey: 'data', value: initialValue || property.default || '[]', onChange: handleChange, type: "grid", isAccordion: true }) }));
+        case 'columnspaneditor':
+            return (_jsxs("div", { className: "property-field", children: [_jsxs("label", { className: "property-label", children: [l10n.getConstant(property.label), property.required && _jsx("span", { className: "required", children: "*" })] }), property.description && (_jsx("p", { className: "property-description", children: l10n.getConstant(property.description) })), _jsx(ColumnSpanEditor, { columnCount: propertiesValues.columns || 2, initialWidths: initialValue?.widths, onChange: (widths) => handleChange({ widths }) }, property.key)] }));
+        case 'switch':
+            return (_jsxs("div", { className: "property-field", children: [property.description && (_jsx("p", { className: "property-description property-description-inline", children: l10n.getConstant(property.description) })), _jsxs("div", { className: "property-field property-field-checkbox", children: [_jsxs("div", { children: [l10n.getConstant(property.label), ":"] }), _jsx(SwitchComponent, { id: `prop-boolean-${property.key}`, locale: locale, offLabel: l10n.getConstant('off'), onLabel: l10n.getConstant('on'), checked: initialValue !== undefined ? initialValue : property.default, change: (e) => handleChange(e.checked), htmlAttributes: { 'aria-label': `${l10n.getConstant(property.label)} switch` } })] })] }));
+        case 'URLImport':
+            const [isEnabled, setIsEnabled] = useState(typeof initialValue === 'object'
+                ? initialValue?.enabled ?? false
+                : Boolean(initialValue));
+            const currentValue = {
+                enabled: isEnabled,
+                serviceUrl: typeof initialValue === 'object'
+                    ? initialValue?.serviceUrl ?? ''
+                    : ''
+            };
+            const handleEnabledChange = (checked) => {
+                checked ? handleChange({
+                    enabled: currentValue.serviceUrl ? true : false,
+                    serviceUrl: checked ? currentValue.serviceUrl || '' : ''
+                }) : handleChange(null);
+                setIsEnabled(checked);
+            };
+            const handleServiceChange = (value) => {
+                handleChange({
+                    enabled: true,
+                    serviceUrl: value
+                });
+            };
+            return (_jsxs("div", { className: "property-field", children: [_jsx("div", { className: "property-field property-field-checkbox", style: { marginBottom: '0.5rem' }, children: _jsx(CheckBoxComponent, { id: `prop-urlimport-${property.key}`, locale: locale, label: l10n.getConstant(property.label), checked: isEnabled, change: (e) => handleEnabledChange(e.checked === true) }, `${property.key}-${isEnabled}`) }), isEnabled && (_jsxs(_Fragment, { children: [property.description && (_jsx("p", { className: "property-description property-description-inline", children: l10n.getConstant(property.description) })), _jsx("div", { children: _jsx(TextBoxComponent, { id: `prop-url-${property.key}`, locale: locale, value: currentValue.serviceUrl, placeholder: l10n.getConstant(`${property.placeholder}`) || 'Enter service URL', change: (e) => handleServiceChange(e.value), floatLabelType: "Never" }) })] }))] }));
+        default:
+            return null;
+    }
+};
+// Memoize PropertyRenderer to prevent unnecessary re-renders
+const MemoizedPropertyRenderer = React.memo(PropertyRenderer);
+export const PropertyGroupRenderer = React.memo(({ properties, existingValues, initialValues, onChange, mode }) => {
+    return (_jsx("div", { className: "property-group", "aria-label": 'property-group', children: _jsx("div", { className: "property-group-content", children: properties.map((property) => {
+                // Conditionally hide labelWidth when labelPosition is top/bottom
+                if (property.key === 'labelWidth') {
+                    const labelPosition = initialValues['labelPosition'];
+                    if (!labelPosition || labelPosition === 'top' || labelPosition === 'bottom') {
+                        return null; // Don't render labelWidth for top/bottom positions
+                    }
+                }
+                return (_jsx(MemoizedPropertyRenderer, { propertiesValues: initialValues, property: property, initialValue: initialValues[property.key], existingValues: existingValues, onChange: onChange, mode: mode }, property.key));
+            }) }) }));
+});
+export default MemoizedPropertyRenderer;

package/src/utils/ValueRenderer.d.ts

@@ -0,0 +1,2 @@
+declare const ValueRenderer: React.FC<any>;
+export default ValueRenderer;

package/src/utils/ValueRenderer.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DropDownListComponent, MultiSelectComponent } from "@syncfusion/ej2-react-dropdowns";
+import { useLocalization } from "../context/LocalizationContext";
+import { DatePickerComponent, DateRangePickerComponent, DateTimePickerComponent, TimePickerComponent } from "@syncfusion/ej2-react-calendars";
+import { NumericTextBoxComponent, TextBoxComponent } from "@syncfusion/ej2-react-inputs";
+import { useFormSchema } from "../context/FormSchemaContext";
+import { useMemo } from "react";
+import { Internationalization } from '@syncfusion/ej2-base';
+import { getComponentFromSchema, resolveOptions, useFetchOptions } from "../../Common/utils";
+const ValueRenderer = ({ componentForEdit, conditionsRef, handleSetValueValueChange }) => {
+    const { l10n, locale } = useLocalization();
+    const { formSchema } = useFormSchema();
+    // Get live component with updated options from formSchema
+    const liveComponent = useMemo(() => {
+        return componentForEdit ? getComponentFromSchema(componentForEdit.id, formSchema) || componentForEdit : componentForEdit;
+    }, [componentForEdit, formSchema]);
+    const fetchedOptions = useFetchOptions(liveComponent.options);
+    const resolvedOptions = Array.isArray(liveComponent.options)
+        ? liveComponent.options
+        : liveComponent.options?.type === 'url' ? resolveOptions(liveComponent.options, fetchedOptions) : [];
+    return (_jsxs("div", { style: { margin: "10px", marginTop: "15px" }, children: [_jsx("label", { className: "property-description", style: { marginBottom: "5px", display: "block" }, children: l10n.getConstant('setValue') }), liveComponent && ((liveComponent.type === 'multiselect' || liveComponent.type === 'checkboxGroup') && liveComponent.options ? (_jsx(MultiSelectComponent, { id: `${liveComponent.id}_setValue`, locale: locale, dataSource: resolvedOptions.map((opt) => {
+                    const val = typeof opt === 'string' ? opt : opt.value;
+                    const label = typeof opt === 'string' ? opt : opt.label || opt.text || opt.value;
+                    return { text: label, value: val };
+                }), fields: { text: 'text', value: 'value' }, value: Array.isArray(conditionsRef.current.setValueWhen?.value) ? conditionsRef.current.setValueWhen.value : [], change: (e) => handleSetValueValueChange({ target: { value: e.value } }), placeholder: "Select values", popupHeight: "300px" })) : (liveComponent.type === 'dropdown' || liveComponent.type === 'radio') && liveComponent.options ? (_jsx(DropDownListComponent, { id: `${liveComponent.id}_setValue`, locale: locale, dataSource: resolvedOptions.map((opt) => {
+                    const val = typeof opt === 'string' ? opt : opt.value;
+                    const label = typeof opt === 'string' ? opt : opt.label || opt.text || opt.value;
+                    return { text: label, value: val };
+                }), fields: { text: 'text', value: 'value' }, value: conditionsRef.current.setValueWhen?.value || '', change: (e) => handleSetValueValueChange({ target: { value: e.value } }), placeholder: "Select value", popupHeight: "300px" })) : liveComponent.type === 'date' ? (_jsx(DatePickerComponent, { id: `${liveComponent.id}_setValue`, locale: locale, value: conditionsRef.current.setValueWhen?.value ? new Date(conditionsRef.current.setValueWhen.value) : undefined, change: (e) => {
+                    if (e.value !== null && e.value !== undefined) {
+                        // Format date using Syncfusion Internationalization
+                        const intl = new Internationalization();
+                        const formatter = intl.getDateFormat({
+                            format: 'MM/dd/yyyy',
+                            type: 'date'
+                        });
+                        handleSetValueValueChange({ target: { value: formatter(e.value) } });
+                    }
+                }, placeholder: "Select date", format: "MM/dd/yyyy" })) : liveComponent.type === 'time' ? (_jsx(TimePickerComponent, { id: `${liveComponent.id}_setValue`, locale: locale, value: conditionsRef.current.setValueWhen?.value ? (typeof conditionsRef.current.setValueWhen.value === 'string'
+                    ? new Date(`2000-01-01 ${conditionsRef.current.setValueWhen.value}`)
+                    : conditionsRef.current.setValueWhen.value) : undefined, change: (e) => {
+                    if (e.value !== null && e.value !== undefined) {
+                        // Format time using Syncfusion Internationalization
+                        const intl = new Internationalization();
+                        const formatter = intl.getDateFormat({
+                            format: 'hh:mm a',
+                            type: 'time'
+                        });
+                        handleSetValueValueChange({ target: { value: formatter(e.value) } });
+                    }
+                }, placeholder: "Select time", format: "hh:mm a" })) : liveComponent.type === 'dateTime' ? (_jsx(DateTimePickerComponent, { id: `${liveComponent.id}_setValue`, locale: locale, value: conditionsRef.current.setValueWhen?.value ? new Date(conditionsRef.current.setValueWhen.value) : undefined, change: (e) => {
+                    if (e.value !== null && e.value !== undefined) {
+                        // Format dateTime using Syncfusion Internationalization
+                        const intl = new Internationalization();
+                        const formatter = intl.getDateFormat({
+                            format: 'MM/dd/yyyy hh:mm a',
+                            type: 'dateTime'
+                        });
+                        handleSetValueValueChange({ target: { value: formatter(e.value) } });
+                    }
+                }, placeholder: "Select date and time", format: "MM/dd/yyyy hh:mm a" })) : liveComponent.type === 'dateRange' ? (_jsx(DateRangePickerComponent, { id: `${liveComponent.id}_setValue`, locale: locale, value: conditionsRef.current.setValueWhen?.value ? (Array.isArray(conditionsRef.current.setValueWhen.value)
+                    ? [new Date(conditionsRef.current.setValueWhen.value[0]), new Date(conditionsRef.current.setValueWhen.value[1])]
+                    : undefined) : undefined, change: (e) => {
+                    if (e.value !== null && e.value !== undefined && Array.isArray(e.value) && e.value.length === 2) {
+                        // Format date range using Syncfusion Internationalization
+                        const intl = new Internationalization();
+                        const formatter = intl.getDateFormat({
+                            format: 'MM/dd/yyyy',
+                            type: 'date'
+                        });
+                        const startDate = formatter(e.value[0]);
+                        const endDate = formatter(e.value[1]);
+                        handleSetValueValueChange({ target: { value: [startDate, endDate] } });
+                    }
+                }, placeholder: "Select date range", format: "MM/dd/yyyy" })) : liveComponent.type === 'number' || liveComponent.type === 'rating' || liveComponent.type === 'rangeSlider' ? (_jsx(NumericTextBoxComponent, { id: `${liveComponent.id}_setValue`, locale: locale, value: conditionsRef.current.setValueWhen?.value || 0, change: (e) => handleSetValueValueChange({ target: { value: e.value } }), placeholder: "Enter number", format: "n" })) : liveComponent.type === 'dateRange' ? (_jsx(DateRangePickerComponent, { id: `${liveComponent.id}_setValue`, locale: locale, value: conditionsRef.current.setValueWhen?.value ? (Array.isArray(conditionsRef.current.setValueWhen.value)
+                    ? [new Date(conditionsRef.current.setValueWhen.value[0]), new Date(conditionsRef.current.setValueWhen.value[1])]
+                    : undefined) : undefined, change: (e) => {
+                    if (e.value !== null && e.value !== undefined && Array.isArray(e.value) && e.value.length === 2) {
+                        // Format date range using Syncfusion Internationalization
+                        const intl = new Internationalization();
+                        const formatter = intl.getDateFormat({
+                            format: 'MM/dd/yyyy',
+                            type: 'date'
+                        });
+                        const startDate = formatter(e.value[0]);
+                        const endDate = formatter(e.value[1]);
+                        handleSetValueValueChange({ target: { value: [startDate, endDate] } });
+                    }
+                }, placeholder: "Select date range", format: "MM/dd/yyyy" })) : (_jsx(TextBoxComponent, { id: `${liveComponent.id}_setValue`, type: "text", locale: locale, value: conditionsRef.current.setValueWhen?.value || '', change: (e) => handleSetValueValueChange({ target: { value: e.value } }), placeholder: `Enter value for ${liveComponent.label || liveComponent.id}` })))] }));
+};
+export default ValueRenderer;

package/src/utils/ej2DbAdaptor.d.ts

@@ -0,0 +1,6 @@
+import { UrlAdaptor, Query } from '@syncfusion/ej2-data';
+export declare class DbImportAdaptor extends UrlAdaptor {
+    private sessionId;
+    constructor(sessionId: string);
+    read(request: any, _query?: Query): Promise<any>;
+}

package/src/utils/ej2DbAdaptor.js

@@ -0,0 +1,38 @@
+import { UrlAdaptor } from '@syncfusion/ej2-data';
+export class DbImportAdaptor extends UrlAdaptor {
+    sessionId;
+    constructor(sessionId) {
+        super();
+        this.sessionId = sessionId;
+    }
+    async read(request, _query) {
+        const params = request.params || {};
+        const action = params.action;
+        const table = params.table || '';
+        const limit = params.limit || 10;
+        let url = '';
+        if (action === 'tables') {
+            url = `/api/db/tables?sessionId=${encodeURIComponent(this.sessionId)}`;
+        }
+        else if (action === 'columns') {
+            url = `/api/db/columns?sessionId=${encodeURIComponent(this.sessionId)}&table=${encodeURIComponent(table)}`;
+        }
+        else if (action === 'sample') {
+            url = `/api/db/sample?sessionId=${encodeURIComponent(this.sessionId)}&table=${encodeURIComponent(table)}&limit=${limit}`;
+        }
+        else {
+            throw new Error('DbImportAdaptor: action param required (tables|columns|sample)');
+        }
+        const resp = await fetch(url, { credentials: 'same-origin' });
+        if (!resp.ok)
+            throw new Error(`Request failed ${resp.status}`);
+        const json = await resp.json();
+        if (json.tables)
+            return { result: json.tables, count: json.tables.length };
+        if (json.columns)
+            return { result: json.columns, count: json.columns.length };
+        if (json.rows)
+            return { result: json.rows, count: json.rows.length };
+        return { result: [], count: 0 };
+    }
+}

package/src/utils/mappingHeuristics.d.ts

@@ -0,0 +1,10 @@
+export type ColumnInfo = {
+    name: string;
+    dataType: string;
+    nullable?: boolean;
+    maxLength?: number | null;
+    isPrimary?: boolean;
+};
+export declare function suggestFieldType(col: ColumnInfo): string;
+export declare function mapFieldType(col: ColumnInfo): string;
+export declare function suggestDropdownCandidates(_: any[]): any[];

package/src/utils/mappingHeuristics.js

@@ -0,0 +1,33 @@
+// Return a suggested form field type for a given column data type
+export function suggestFieldType(col) {
+    const t = (col.dataType || '').toLowerCase();
+    if (t.includes('char') || t.includes('text') || t === 'string' || t.includes('uuid'))
+        return 'textbox';
+    if (t === 'boolean' || t === 'bit' || t === 'tinyint(1)')
+        return 'Checkbox';
+    if (t.includes('int') || t === 'number' || t === 'numeric' || t === 'decimal' || t === 'bigint')
+        return 'number';
+    if (t.includes('date') || t.includes('time') || t.includes('timestamp'))
+        return 'datepicker';
+    if (t === 'json' || t === 'jsonb' || t === 'object')
+        return 'textarea';
+    // default fallback
+    return 'textBox';
+}
+export function mapFieldType(col) {
+    const t = (col.dataType || '').toLowerCase();
+    if (t.includes('char') || t.includes('text') || t === 'string' || t.includes('uuid'))
+        return 'string';
+    if (t === 'boolean' || t === 'bit' || t === 'tinyint(1)')
+        return 'Checkbox';
+    if (t.includes('int') || t === 'number' || t === 'numeric' || t === 'decimal' || t === 'bigint')
+        return 'number';
+    if (t.includes('date') || t.includes('time') || t.includes('timestamp'))
+        return 'date';
+    // default fallback
+    return 'textBox';
+}
+// Optionally derive dropdown candidates from sample rows (not implemented here)
+export function suggestDropdownCandidates(_) {
+    return [];
+}

package/src/utils/renderComponent.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { type FormComponent } from '../types/FormSchema';
+import { type FormState } from '../../Common/FormValidator';
+import { type DataGridRef } from '../../Common/DataGridComponent';
+import { L10n } from '@syncfusion/ej2-base';
+export interface RenderComponentProps {
+    component: FormComponent;
+    formState?: FormState;
+    gridRefs?: Record<string, React.RefObject<DataGridRef>>;
+    l10n: L10n;
+    locale: string;
+    formSettings?: any;
+}
+/**
+ * Shared component rendering utility used by both MainSection and ComponentPreview
+ * Renders a FormComponent with all properties applied consistently
+ */
+export declare const RenderComponent: ({ component, formState, gridRefs, l10n, locale, formSettings }: RenderComponentProps) => React.ReactNode;