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

package/src/utils/PropertyRenderer.js

@@ -1,210 +0,0 @@
-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

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

package/src/utils/ValueRenderer.js

@@ -1,91 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,33 +0,0 @@
-// 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

@@ -1,18 +0,0 @@
-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;