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

package/src/utils/FormSettingsPanel.js

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

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

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

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

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

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

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

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