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

package/src/utils/FormSettingsPanel.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { PropertyGroupRenderer } from './PropertyRenderer';
+import { useLocalization } from '../context/LocalizationContext';
+const filterFormSettings = (settings, defaults) => {
+    const filtered = {};
+    Object.keys(settings).forEach(key => {
+        // Only include properties that differ from defaults, except for 'name' which is always included
+        if (key === 'name' || settings[key] !== defaults[key]) {
+            filtered[key] = settings[key];
+        }
+    });
+    return filtered;
+};
+// Get default values from form-setting.json
+const getDefaultFormSettings = (config) => {
+    const defaults = {};
+    config?.groups?.forEach((group) => {
+        group.properties?.forEach((prop) => {
+            if (prop.key && prop.default !== undefined) {
+                defaults[prop.key] = prop.default;
+            }
+        });
+    });
+    return defaults;
+};
+export const FormSettingsPanel = ({ settings, formSettingsConfig, onSave }) => {
+    // Initialize with current settings or defaults
+    const defaultSettings = getDefaultFormSettings(formSettingsConfig);
+    let settingsRef = {
+        ...defaultSettings,
+        ...settings,
+    };
+    const { l10n } = useLocalization();
+    // Update ref when settings prop changes
+    useEffect(() => {
+        settingsRef = {
+            ...defaultSettings,
+            ...settings
+        };
+    }, [settings, defaultSettings, formSettingsConfig]);
+    const handlePropertyChange = (key, value) => {
+        const newSettings = {
+            ...settingsRef,
+            [key]: value
+        };
+        settingsRef = newSettings;
+        // Only save the filtered settings (properties that differ from defaults)
+        const filteredSettings = filterFormSettings(newSettings, defaultSettings);
+        onSave(filteredSettings, key);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "sidebar-header", children: _jsx("h3", { children: l10n.getConstant('formsettings') }) }), _jsx("div", { className: "form-settings property-content", role: "region", "aria-labelledby": "form-settings-heading", children: _jsx("div", { className: "form-properties-section fb-scrollbar", style: { overflowY: "auto" }, "aria-label": l10n.getConstant('formsettings'), children: formSettingsConfig?.groups?.map((group, index) => {
+                        const isLast = index === (formSettingsConfig.groups || []).length - 1;
+                        return (_jsxs("div", { role: "group", "aria-labelledby": `settings-group-${index}`, children: [_jsx("h4", { id: `settings-group-${index}`, style: { margin: "12px 12px 0 12px", fontWeight: 600 }, children: l10n.getConstant(group.name.toLowerCase()) }), _jsx(PropertyGroupRenderer, { groupName: group.name, properties: group.properties, initialValues: settingsRef, onChange: handlePropertyChange }), isLast ? null : (_jsx("div", { style: {
+                                        margin: '0',
+                                        padding: 0,
+                                        borderBottom: '1px solid rgb(var(--sf-color-line-color))'
+                                    }, "aria-hidden": "true" }))] }, `group-${index}`));
+                    }) }) })] }));
+};

package/src/utils/LookupConfig.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type LookupConfig as LookupConfigType } from '../types/FormSchema';
+interface LookupConfigProps {
+    value: LookupConfigType & {
+        selectionType?: string;
+        displayFormat?: string;
+    };
+    onChange: (config: any) => void;
+}
+export declare const LookupConfig: React.FC<LookupConfigProps>;
+export default LookupConfig;

package/src/utils/LookupConfig.js

@@ -0,0 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
+import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
+import { useLocalization } from '../context/LocalizationContext';
+export const LookupConfig = ({ value, onChange }) => {
+    const { l10n } = useLocalization();
+    const [formNames, setFormNames] = useState([]);
+    const [formResponseObjects, setFormResponseObjects] = useState([]);
+    const [formFields, setFormFields] = useState([]);
+    const [selectedFormId, setSelectedFormId] = useState('');
+    const [selectedFormName, setSelectedFormName] = useState(value?.formName || '');
+    const [selectedField, setSelectedField] = useState(value?.field || '');
+    const [selectedSelectionType, setSelectedSelectionType] = useState(value?.selectionType || 'Single');
+    const [selectedDisplayFormat, setSelectedDisplayFormat] = useState(value?.displayFormat || 'Dropdown');
+    const [isLoadingForms, setIsLoadingForms] = useState(true);
+    const [isLoadingFields, setIsLoadingFields] = useState(false);
+    /**
+     * Fetch all form names from backend that have submissions
+     */
+    useEffect(() => {
+        const fetchFormNames = async () => {
+            try {
+                const response = await fetch(/*formNameUrl*/ '');
+                if (!response.ok) {
+                    throw new Error(`Network response was not ok: ${response.status} ${response.statusText}`);
+                }
+                const data = await response.json();
+                const names = Array.isArray(data) ? data.map((item) => item.name).filter(Boolean) : [];
+                const objects = Array.isArray(data)
+                    ? data.map((item) => ({ id: item.id, name: item.name })).filter((o) => o && o.name)
+                    : [];
+                setFormNames(names);
+                setFormResponseObjects(objects);
+            }
+            catch (error) {
+                console.error('Error fetching form names:', error);
+                setFormNames([]);
+                setFormResponseObjects([]);
+            }
+            finally {
+                setIsLoadingForms(false);
+            }
+        };
+        fetchFormNames();
+    }, []);
+    /**
+     * Fetch fields from selected form's submissions via backend API
+     */
+    useEffect(() => {
+        if (!selectedFormName) {
+            setFormFields([]);
+            return;
+        }
+        setIsLoadingFields(true);
+        const fetchFields = async () => {
+            try {
+                if (!isNullOrUndefined(selectedFormId) && selectedFormId !== '') {
+                    setIsLoadingFields(true);
+                    const response = await fetch(/*getRecordsUrl*/ '' + `${selectedFormId}`);
+                    const submissions = await response.json();
+                    if (submissions.length > 0) {
+                        const fields = Object.keys(submissions[0]).filter(key => !['id', 'timestamp'].includes(key));
+                        setFormFields(fields);
+                    }
+                    setIsLoadingFields(false);
+                }
+            }
+            catch (error) {
+                console.error('Error fetching form fields:', error);
+                setFormFields([]);
+            }
+        };
+        fetchFields();
+    }, [selectedFormName]);
+    /**
+     * Get filtered displayFormat options based on selectionType
+     */
+    const displayFormatOptions = useMemo(() => {
+        const allOptions = ['Dropdown', 'Radio', 'MultiSelect', 'Checkbox'];
+        const normalizedType = selectedSelectionType?.toLowerCase() || 'single';
+        if (normalizedType === 'single') {
+            return allOptions.filter(opt => ['dropdown', 'radio'].includes(opt.toLowerCase()));
+        }
+        else if (normalizedType === 'multiple') {
+            return allOptions.filter(opt => ['multiselect', 'checkbox'].includes(opt.toLowerCase()));
+        }
+        return allOptions;
+    }, [selectedSelectionType]);
+    /**
+     * Reset displayFormat if it's not valid for the new selectionType
+     */
+    useEffect(() => {
+        if (!displayFormatOptions.includes(selectedDisplayFormat)) {
+            setSelectedDisplayFormat(displayFormatOptions[0] || 'Dropdown');
+        }
+    }, [displayFormatOptions, selectedDisplayFormat]);
+    const handleFormNameChange = useCallback((args) => {
+        const newId = args.value;
+        const matched = formResponseObjects.find(o => o.name === newId);
+        const newFormName = matched ? matched.name : '';
+        const newFormId = matched ? matched.id : '';
+        setSelectedFormName(newFormName);
+        setSelectedFormId(newFormId);
+        setSelectedField('');
+        onChange({
+            formName: newFormName,
+            field: '',
+            selectionType: selectedSelectionType,
+            displayFormat: selectedDisplayFormat
+        });
+    }, [onChange, selectedSelectionType, selectedDisplayFormat, formResponseObjects]);
+    const handleFieldChange = useCallback((args) => {
+        const newField = args.value;
+        setSelectedField(newField);
+        onChange({
+            formName: selectedFormName,
+            field: newField,
+            selectionType: selectedSelectionType,
+            displayFormat: selectedDisplayFormat
+        });
+    }, [onChange, selectedFormName, selectedSelectionType, selectedDisplayFormat]);
+    const handleSelectionTypeChange = useCallback((args) => {
+        const newSelectionType = args.value;
+        setSelectedSelectionType(newSelectionType);
+        // Calculate the correct displayFormat for this selectionType immediately
+        const normalizedType = newSelectionType?.toLowerCase() || 'single';
+        let validDisplayFormat;
+        if (normalizedType === 'single') {
+            validDisplayFormat = 'Dropdown'; // Default for single
+        }
+        else if (normalizedType === 'multiple') {
+            validDisplayFormat = 'MultiSelect'; // Default for multiple
+        }
+        else {
+            validDisplayFormat = 'Dropdown';
+        }
+        setSelectedDisplayFormat(validDisplayFormat);
+        // Send updated values with correct displayFormat
+        onChange({
+            formName: selectedFormName,
+            field: selectedField,
+            selectionType: newSelectionType,
+            displayFormat: validDisplayFormat
+        });
+    }, [onChange, selectedFormName, selectedField]);
+    const handleDisplayFormatChange = useCallback((args) => {
+        const newDisplayFormat = args.value;
+        setSelectedDisplayFormat(newDisplayFormat);
+        onChange({
+            formName: selectedFormName,
+            field: selectedField,
+            selectionType: selectedSelectionType,
+            displayFormat: newDisplayFormat
+        });
+    }, [onChange, selectedFormName, selectedField, selectedSelectionType]);
+    return (_jsxs("div", { className: "lookup-config-container", style: { display: 'flex', flexDirection: 'column', gap: '0.5rem' }, children: [_jsxs("div", { className: "lookup-config-group", style: { marginBottom: '0.5rem' }, children: [_jsx("label", { className: "property-label", style: { marginBottom: '0.5rem' }, children: l10n.getConstant('selectionType') || 'Selection Type' }), _jsx(DropDownListComponent, { dataSource: ['Single', 'Multiple'], value: selectedSelectionType, change: handleSelectionTypeChange, placeholder: l10n.getConstant('selectSelectionType') || 'Select selection type...', popupHeight: "100px" })] }), _jsxs("div", { className: "lookup-config-group", style: { marginBottom: '0.5rem' }, children: [_jsx("label", { className: "property-label", style: { marginBottom: '0.5rem' }, children: l10n.getConstant('displayFormat') || 'Display Format' }), _jsx(DropDownListComponent, { dataSource: displayFormatOptions, value: selectedDisplayFormat, change: handleDisplayFormatChange, placeholder: l10n.getConstant('selectDisplayFormat') || 'Select display format...', popupHeight: "150px" })] }), _jsx("label", { className: "property-label", children: l10n.getConstant('lookupConfig') }), _jsxs("div", { className: "lookup-config-group", children: [_jsx("label", { style: { display: 'block', marginBottom: '0.5rem', fontWeight: 500 }, children: l10n.getConstant('selectFormName') || 'Select Form Name' }), _jsx(DropDownListComponent, { dataSource: formNames, value: selectedFormName, change: handleFormNameChange, placeholder: l10n.getConstant('selectForm') || 'Select a form...', popupHeight: "200px", allowFiltering: true, enabled: !isLoadingForms })] }), selectedFormName && (_jsxs("div", { className: "lookup-config-group", children: [_jsx("label", { style: { display: 'block', marginBottom: '0.5rem', fontWeight: 500 }, children: l10n.getConstant('selectField') || 'Select Field' }), _jsx(DropDownListComponent, { dataSource: formFields, value: selectedField, change: handleFieldChange, placeholder: l10n.getConstant('selectField') || 'Select field...', popupHeight: "200px", allowFiltering: true, enabled: !isLoadingFields })] }))] }));
+};
+export default LookupConfig;

package/src/utils/MinMaxValueEditor.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+interface MinMaxRangeData {
+    enabled: boolean;
+    minMode?: 'value' | 'field';
+    minValue?: number | string | {
+        field: string;
+    };
+    maxMode?: 'value' | 'field';
+    maxValue?: number | string | {
+        field: string;
+    };
+}
+interface MinMaxValueEditorProps {
+    label: string;
+    initialValue: MinMaxRangeData[];
+    mode: 'number' | 'date' | 'time';
+    onChange: (value: MinMaxRangeData[]) => void;
+    locale?: string;
+    description?: string;
+    disabled?: boolean;
+    currentFieldId?: string;
+    builderMode?: 'Simple' | 'Developer';
+}
+export declare const MinMaxValueEditor: React.FC<MinMaxValueEditorProps>;
+export default MinMaxValueEditor;

package/src/utils/MinMaxValueEditor.js

@@ -0,0 +1,188 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
+import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
+import { ButtonComponent, CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
+import { DatePickerComponent, TimePickerComponent } from '@syncfusion/ej2-react-calendars';
+import { useLocalization } from '../context/LocalizationContext';
+import { useFormSchema } from '../context/FormSchemaContext';
+import { Internationalization } from '@syncfusion/ej2-base';
+export const MinMaxValueEditor = ({ label, initialValue = [], mode, onChange, disabled = false, currentFieldId, builderMode, }) => {
+    const { l10n, locale } = useLocalization();
+    const { formSchema } = useFormSchema();
+    let intl = new Internationalization();
+    const [state, setState] = useState(() => {
+        // Detect if initialValue has field-based ranges
+        const hasFieldData = Array.isArray(initialValue) && initialValue.some(r => (typeof r.minValue === 'object' && r.minValue?.field) ||
+            (typeof r.maxValue === 'object' && r.maxValue?.field));
+        return {
+            useFieldMode: hasFieldData,
+            ranges: Array.isArray(initialValue) && initialValue.length > 0 ? initialValue : [{ enabled: false }]
+        };
+    });
+    const availableFields = useMemo(() => {
+        if (!formSchema?.components)
+            return [];
+        const fields = [];
+        const traverse = (components) => {
+            components.forEach(comp => {
+                if (comp.name === currentFieldId)
+                    return;
+                const isNumber = ['number'].includes(comp.type);
+                const isDate = ['date'].includes(comp.type);
+                const isTime = ['time'].includes(comp.type);
+                if ((isNumber && mode === 'number') || (isDate && mode === 'date') || (isTime && mode === 'time')) {
+                    fields.push({
+                        id: comp.id,
+                        name: comp.label || comp.name || comp.id,
+                        type: isNumber ? 'number' : isTime ? 'time' : 'date'
+                    });
+                }
+                if (comp.children?.length)
+                    traverse(comp.children);
+                if (comp.tableCells) {
+                    comp.tableCells.forEach(row => {
+                        row.forEach(cell => {
+                            traverse(cell);
+                        });
+                    });
+                }
+                if (comp.tabItems) {
+                    comp.tabItems.forEach(tab => {
+                        if (tab.content)
+                            traverse(tab.content);
+                    });
+                }
+            });
+        };
+        traverse(formSchema.components);
+        return fields.sort((a, b) => a.name.localeCompare(b.name));
+    }, [formSchema, mode, currentFieldId]);
+    const dropdownDataSource = availableFields.map(f => ({
+        text: f.name,
+        value: f.id
+    }));
+    const handleToggle = (checked) => {
+        const newState = {
+            useFieldMode: checked,
+            ranges: checked ? [{ enabled: true }] : [{ enabled: false }]
+        };
+        setState(newState);
+        onChange(newState.ranges);
+    };
+    const handleMinChange = (newValue) => {
+        const updated = [...state.ranges];
+        updated[0] = { ...updated[0], minValue: newValue };
+        setState({ ...state, ranges: updated });
+        onChange(updated);
+    };
+    const handleMaxChange = (newValue) => {
+        const updated = [...state.ranges];
+        updated[0] = { ...updated[0], maxValue: newValue };
+        setState({ ...state, ranges: updated });
+        onChange(updated);
+    };
+    const handleMinFieldChange = (index, fieldId) => {
+        const updated = [...state.ranges];
+        updated[index] = { ...updated[index], minValue: { field: fieldId } };
+        setState({ ...state, ranges: updated });
+        onChange(updated);
+    };
+    const handleMaxFieldChange = (index, fieldId) => {
+        const updated = [...state.ranges];
+        updated[index] = { ...updated[index], maxValue: { field: fieldId } };
+        setState({ ...state, ranges: updated });
+        onChange(updated);
+    };
+    const handleDelete = (index) => {
+        const updated = state.ranges.filter((_, i) => i !== index);
+        setState({ ...state, ranges: updated });
+        onChange(updated);
+    };
+    const handleAddRange = () => {
+        const updated = [...state.ranges, { enabled: true }];
+        setState({ ...state, ranges: updated });
+        onChange(updated);
+    };
+    const getMinValue = () => {
+        const range = state.ranges[0];
+        if (typeof range?.minValue === 'object')
+            return '';
+        return range?.minValue ?? '';
+    };
+    const getMaxValue = () => {
+        const range = state.ranges[0];
+        if (typeof range?.maxValue === 'object')
+            return '';
+        return range?.maxValue ?? '';
+    };
+    const getMinFieldId = (index) => {
+        const range = state.ranges[index];
+        if (typeof range?.minValue === 'object' && range?.minValue?.field) {
+            return range.minValue.field;
+        }
+        return '';
+    };
+    const getMaxFieldId = (index) => {
+        const range = state.ranges[index];
+        if (typeof range?.maxValue === 'object' && range?.maxValue?.field) {
+            return range.maxValue.field;
+        }
+        return '';
+    };
+    return (_jsxs("div", { className: `minmax-editor`, role: "group", "aria-label": label, children: [builderMode === 'Developer' &&
+                _jsx("div", { className: "minmax-toggle-section", children: _jsx(CheckBoxComponent, { id: `minmax-toggle-${label?.replace(/\s+/g, '_')}`, label: l10n.getConstant('useFieldValue'), checked: state.useFieldMode, cssClass: "e-small", locale: locale, change: (e) => handleToggle(e.checked), disabled: disabled || availableFields.length === 0 }) }), !state.useFieldMode && (_jsxs("div", { className: "minmax-inputs-row", children: [_jsxs("div", { className: "minmax-input-group", children: [_jsx("label", { className: "minmax-input-label", children: l10n.getConstant('minValue') }), mode === 'number' && (_jsx(NumericTextBoxComponent, { value: getMinValue(), width: '118px', change: (e) => handleMinChange(e.value), disabled: disabled, locale: locale, format: 'n', cssClass: "minmax-numeric", htmlAttributes: {
+                                    'aria-label': `min-value-label-${label?.replace(/\s+/g, '_')}`
+                                } })), " ", mode === 'date' && (_jsx(DatePickerComponent, { value: undefined, width: '118px', format: "MM/dd/yyyy", locale: locale, change: (e) => {
+                                    if (e.value) {
+                                        let dFormatter = intl.getDateFormat({
+                                            format: 'MM/dd/yyyy',
+                                            type: 'date'
+                                        });
+                                        let value = dFormatter(e.value);
+                                        handleMinChange(value);
+                                    }
+                                }, disabled: disabled, cssClass: "minmax-date", htmlAttributes: {
+                                    'aria-label': `min-value-label-${label?.replace(/\s+/g, '_')}`
+                                } })), mode === 'time' && (_jsx(TimePickerComponent, { value: undefined, width: '118px', format: "hh:mm a", locale: locale, change: (e) => {
+                                    if (e.value) {
+                                        let dFormatter = intl.getDateFormat({
+                                            format: 'hh:mm a',
+                                            type: 'time'
+                                        });
+                                        let value = dFormatter(e.value);
+                                        handleMinChange(value);
+                                    }
+                                }, disabled: disabled, cssClass: "minmax-date", htmlAttributes: {
+                                    'aria-label': `min-value-label-${label?.replace(/\s+/g, '_')}`
+                                } }))] }), _jsxs("div", { className: "minmax-input-group", children: [_jsx("label", { className: "minmax-input-label", children: l10n.getConstant('maxValue') }), mode === 'number' && (_jsx(NumericTextBoxComponent, { value: getMaxValue(), width: '118px', change: (e) => handleMaxChange(e.value), format: 'n', locale: locale, disabled: disabled, cssClass: "minmax-numeric", htmlAttributes: {
+                                    'aria-label': `max-value-label-${label?.replace(/\s+/g, '_')}`
+                                } })), " ", mode === 'date' && (_jsx(DatePickerComponent, { value: undefined, format: "MM/dd/yyyy", width: '118px', locale: locale, change: (e) => {
+                                    if (e.value) {
+                                        let dFormatter = intl.getDateFormat({
+                                            format: 'MM/dd/yyyy',
+                                            type: 'date'
+                                        });
+                                        let value = dFormatter(e.value);
+                                        handleMaxChange(value);
+                                    }
+                                }, disabled: disabled, cssClass: "minmax-date", htmlAttributes: {
+                                    'aria-label': `max-value-label-${label?.replace(/\s+/g, '_')}`
+                                } })), mode === 'time' && (_jsx(TimePickerComponent, { value: undefined, width: '118px', locale: locale, format: "hh:mm a", change: (e) => {
+                                    if (e.value) {
+                                        let dFormatter = intl.getDateFormat({
+                                            format: 'hh:mm a',
+                                            type: 'time'
+                                        });
+                                        let value = dFormatter(e.value);
+                                        handleMaxChange(value);
+                                    }
+                                }, disabled: disabled, cssClass: "minmax-date", htmlAttributes: {
+                                    'aria-label': `max-value-label-${label?.replace(/\s+/g, '_')}`
+                                } }))] })] })), state.useFieldMode && (_jsxs(_Fragment, { children: [state.ranges.map((_range, index) => (_jsxs("div", { className: "minmax-inputs-row", style: { marginBottom: "0.75rem" }, children: [_jsxs("div", { className: "minmax-input-group", children: [_jsx("label", { className: "minmax-input-label", children: l10n.getConstant('minValue') }), _jsx(DropDownListComponent, { dataSource: dropdownDataSource, fields: { text: 'text', value: 'value' }, width: '100px', popupWidth: '200px', locale: locale, value: getMinFieldId(index), change: (e) => handleMinFieldChange(index, e.value), disabled: disabled, cssClass: "minmax-dropdown", htmlAttributes: {
+                                            'aria-label': `min-field-label-${index}`
+                                        } })] }), _jsxs("div", { className: "minmax-input-group", children: [_jsx("label", { className: "minmax-input-label", children: l10n.getConstant('maxValue') }), _jsx(DropDownListComponent, { dataSource: dropdownDataSource, fields: { text: 'text', value: 'value' }, width: '100px', locale: locale, popupWidth: '200px', value: getMaxFieldId(index), change: (e) => handleMaxFieldChange(index, e.value), disabled: disabled, cssClass: "minmax-dropdown", htmlAttributes: {
+                                            'aria-label': `max-field-label-${index}`
+                                        } })] }), _jsx("div", { className: "minmax-delete-group", children: _jsx(ButtonComponent, { onClick: () => handleDelete(index), disabled: disabled, iconCss: "e-icons e-trash", cssClass: 'e-outlined', title: "Delete range", "aria-label": `${l10n.getConstant('delete')} ${l10n.getConstant('addRange')} ${index + 1}` }) })] }, index))), _jsx("div", { className: "minmax-add-range-section", children: _jsx(ButtonComponent, { className: "minmax-add-range-btn", onClick: handleAddRange, disabled: disabled, "aria-label": l10n.getConstant('addRange'), children: l10n.getConstant('addRange') }) })] }))] }));
+};
+export default MinMaxValueEditor;

package/src/utils/OptionsEditor.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface OptionsEditorProps {
+    options: string[];
+    onChange: (options: string[]) => void;
+    type: string;
+}
+export declare const OptionsEditor: React.FC<OptionsEditorProps>;
+export {};

package/src/utils/OptionsEditor.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
+import { GridComponent, ColumnsDirective, ColumnDirective, Inject, Page } from '@syncfusion/ej2-react-grids';
+import { useLocalization } from '../context/LocalizationContext';
+import { floatBlur, floatFocus } from '../components/layout/LeftPane';
+export const OptionsEditor = ({ options, onChange, type }) => {
+    const [rows, setRows] = useState([]);
+    const gridRef = useRef(null);
+    const { l10n } = useLocalization();
+    // Initialize rows from options
+    useEffect(() => {
+        const initialRows = (options).map((option, idx) => ({
+            id: idx,
+            index: idx + 1,
+            label: l10n.getConstant(option) || option
+        }));
+        setRows(initialRows);
+    }, []);
+    // Update parent when rows change
+    const updateOptions = (newRows) => {
+        const updatedOptions = newRows.map(row => row.label);
+        onChange(updatedOptions);
+    };
+    const handleAddRow = () => {
+        const newId = rows.length > 0 ? Math.max(...rows.map(r => r.id)) + 1 : 0;
+        const newIndex = rows.length + 1;
+        const newRow = {
+            id: newId,
+            index: newIndex,
+            label: type === "tabs" ? `${l10n.getConstant('tab')} ${newIndex}` : `${l10n.getConstant('option')} ${newIndex}`
+        };
+        const newRows = [...rows, newRow];
+        setRows(newRows);
+        updateOptions(newRows);
+    };
+    /* istanbul ignore next */
+    const handleDeleteRow = (id) => {
+        const newRows = rows.filter(row => row.id !== id).map((row, idx) => ({
+            ...row,
+            index: idx + 1
+        }));
+        setRows(newRows);
+        updateOptions(newRows);
+    };
+    /* istanbul ignore next */
+    const handleLabelChange = (id, newLabel) => {
+        if (rows[id].label === newLabel) {
+            return;
+        }
+        const newRows = rows.map(row => row.id === id ? { ...row, label: newLabel } : row);
+        setRows(newRows);
+        updateOptions(newRows);
+    };
+    /* istanbul ignore next */
+    const actionTemplate = (props) => (_jsx("button", { onClick: () => handleDeleteRow(props.id), onKeyDown: (e) => {
+            if (e.code === "Enter") {
+                handleDeleteRow(props.id);
+            }
+        }, "aria-label": 'Delete this option', className: "e-btn e-flat", title: "Delete this option", type: "button", children: _jsx("span", { className: "e-icons e-trash", style: {
+                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                flexShrink: 0,
+            } }) }));
+    /* istanbul ignore next */
+    const labelTemplate = (props) => (_jsx("div", { className: "e-input-group", children: _jsx("input", { className: "e-input", type: "text", "aria-label": 'Option Value', defaultValue: props.label, onBlur: (e) => {
+                handleLabelChange(props.id, e.target.value);
+                floatBlur(e);
+            }, onFocus: floatFocus, tabIndex: 0, onKeyDown: (e) => {
+                if (e.ctrlKey && e.key === 'a') {
+                    e.preventDefault();
+                    e.currentTarget.select();
+                }
+            }, placeholder: `${type === 'tabs' ? 'Enter tab label' : "Enter option label"}` }) }));
+    const height = rows.length >= 3 ? 174 : rows.length == 2 ? 116 : rows.length <= 1 ? 58 : 174;
+    return (_jsxs("div", { className: "options-editor", children: [_jsxs(GridComponent, { ref: gridRef, dataSource: rows, allowPaging: false, height: height, allowSelection: false, cssClass: "options-grid", children: [_jsxs(ColumnsDirective, { children: [_jsx(ColumnDirective, { field: "label", headerText: `${l10n.getConstant(type === 'tabs' ? 'tabLabel' : 'optionLabel')}`, width: "auto", template: labelTemplate, allowSorting: false }), _jsx(ColumnDirective, { headerText: l10n.getConstant("action"), width: "80", textAlign: "Center", allowSorting: false, template: actionTemplate })] }), _jsx(Inject, { services: [Page] })] }), _jsx("div", { className: "options-actions", children: _jsx(ButtonComponent, { cssClass: "e-outlined", onClick: handleAddRow, type: "button", children: l10n.getConstant(type === 'tabs' ? 'addNewTab' : 'addNewOption') }) })] }));
+};

package/src/utils/PropertyRenderer.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { PropertyDefinition, PropertyValues } from '../types/ComponentProperties';
+interface PropertyRendererProps {
+    propertiesValues: any;
+    property: PropertyDefinition;
+    initialValue: any;
+    existingValues: any;
+    onChange: (key: string, value: any) => void;
+    mode?: 'Simple' | 'Developer';
+}
+export declare const PropertyRenderer: React.FC<PropertyRendererProps>;
+declare const MemoizedPropertyRenderer: React.NamedExoticComponent<PropertyRendererProps>;
+interface PropertyGroupRendererProps {
+    groupName: string;
+    properties: PropertyDefinition[];
+    existingValues?: any;
+    initialValues: PropertyValues;
+    onChange: (key: string, value: any) => void;
+    mode?: 'Simple' | 'Developer';
+}
+export declare const PropertyGroupRenderer: React.FC<PropertyGroupRendererProps>;
+export default MemoizedPropertyRenderer;