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

package/src/utils/CustomValidationEditor.js

@@ -1,208 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useRef, useEffect } from 'react';
-import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
-import { CustomValidationEngine } from '../../Common/CustomValidationEngine';
-import { ButtonComponent, RadioButtonComponent } from '@syncfusion/ej2-react-buttons';
-import { useLocalization } from '../context/LocalizationContext';
-export const CustomValidationEditor = ({ componentFields, excludeFieldId, values, existingRules = [], onChange }) => {
-    const validationEngine = useRef(new CustomValidationEngine()).current;
-    const [errorMessage, setErrorMessage] = useState('Please enter a valid value.');
-    const [errorMessageError, setErrorMessageError] = useState('');
-    const [logicalOp, setLogicalOp] = useState('and');
-    const [rules, setRules] = useState([]);
-    const { l10n } = useLocalization();
-    // Build available field names
-    const availableFields = componentFields
-        .filter(c => c.name !== excludeFieldId)
-        .map(c => c.name);
-    // Initialize from existing rules - parse multiple conditions
-    useEffect(() => {
-        if (existingRules.length > 0 && existingRules[0].expression) {
-            const parsed = validationEngine.parseExpression(existingRules[0].expression);
-            if (parsed) {
-                setErrorMessage(parsed.errorMessage);
-                // Detect logical operator (AND or OR) and split conditions
-                const condition = parsed.condition;
-                let detectedOp = 'and';
-                let splitConditions = [];
-                if (condition.includes(' || ')) {
-                    detectedOp = 'or';
-                    // Split by || but be careful with parentheses
-                    splitConditions = splitConditionsByOperator(condition, '||');
-                }
-                else if (condition.includes(' && ')) {
-                    detectedOp = 'and';
-                    splitConditions = splitConditionsByOperator(condition, '&&');
-                }
-                else {
-                    // Single condition
-                    splitConditions = [condition];
-                }
-                setLogicalOp(detectedOp);
-                // Create rule objects for each condition
-                const newRules = splitConditions.map((cond, idx) => ({
-                    id: (idx + 1).toString(),
-                    condition: cond.trim(),
-                    errors: []
-                }));
-                setRules(newRules.length > 0 ? newRules : [{ id: '1', condition: '', errors: [] }]);
-            }
-        }
-    }, []);
-    // Helper to split conditions by operator while respecting parentheses
-    const splitConditionsByOperator = (expression, operator) => {
-        const conditions = [];
-        let current = '';
-        let depth = 0;
-        for (let i = 0; i < expression.length; i++) {
-            const char = expression[i];
-            if (char === '(')
-                depth++;
-            else if (char === ')')
-                depth--;
-            // Check for operator at depth 0
-            if (depth === 0 && expression.substr(i, operator.length) === operator) {
-                conditions.push(current.trim());
-                current = '';
-                i += operator.length - 1;
-            }
-            else {
-                current += char;
-            }
-        }
-        if (current.trim()) {
-            conditions.push(current.trim());
-        }
-        return conditions.map(c => {
-            // Remove outer parentheses if present
-            c = c.trim();
-            if (c.startsWith('(') && c.endsWith(')')) {
-                c = c.slice(1, -1).trim();
-            }
-            return c;
-        });
-    };
-    const handleConditionChange = (id, condition) => {
-        const errors = validationEngine.validateConditionSyntax(condition, availableFields);
-        setRules(prev => {
-            const updated = prev.map(r => r.id === id ? { ...r, condition, errors } : r);
-            notifyParent(updated, errorMessage, logicalOp);
-            return updated;
-        });
-    };
-    const handleErrorMessageChange = (e) => {
-        const msg = e.value || '';
-        setErrorMessage(msg);
-        notifyParent(rules, msg, logicalOp);
-    };
-    const handleLogicalOpChange = (op) => {
-        setLogicalOp(op);
-        notifyParent(rules, errorMessage, op);
-    };
-    const addRule = () => {
-        const newId = Date.now().toString();
-        setRules(prev => [
-            ...prev,
-            { id: newId, condition: '', errors: [] }
-        ]);
-    };
-    const removeRule = (id) => {
-        if (rules.length > 1) {
-            setRules(prev => {
-                const updated = prev.filter(r => r.id !== id);
-                notifyParent(updated, errorMessage, logicalOp);
-                return updated;
-            });
-        }
-        else {
-            clearAll();
-        }
-    };
-    const clearAll = () => {
-        // Reset to initial state
-        setErrorMessage('');
-        setErrorMessageError('');
-        setLogicalOp('and');
-        setRules([]);
-        // Notify parent to remove from schema
-        onChange([]);
-    };
-    const notifyParent = (currentRules, msg, op) => {
-        const validConditions = currentRules
-            .filter(r => r.condition.trim() && r.errors.length === 0)
-            .map(r => {
-            let cond = r.condition.trim();
-            // Strip outer parentheses to normalize
-            while (cond.startsWith('(') && cond.endsWith(')')) {
-                const inner = cond.slice(1, -1).trim();
-                // Check if outer parens are actually matched
-                let depth = 0;
-                let isMatched = true;
-                for (let i = 0; i < inner.length; i++) {
-                    if (inner[i] === '(')
-                        depth++;
-                    else if (inner[i] === ')')
-                        depth--;
-                    if (depth < 0) {
-                        isMatched = false;
-                        break;
-                    }
-                }
-                if (isMatched && depth === 0) {
-                    cond = inner;
-                }
-                else {
-                    break;
-                }
-            }
-            return cond;
-        });
-        // Only notify if we have at least one valid condition and error message
-        if (validConditions.length > 0 && msg) {
-            // Combine conditions with && or ||
-            const operator = op === 'and' ? ' && ' : ' || ';
-            // Wrap each condition in parentheses (only one layer)
-            const wrappedConditions = validConditions.map(cond => `(${cond})`);
-            const combinedCondition = wrappedConditions.join(` ${operator} `);
-            const fullExpression = validationEngine.buildExpression(combinedCondition, msg);
-            onChange([{
-                    condition: undefined,
-                    expression: fullExpression
-                }]);
-        }
-    };
-    return (_jsxs("div", { className: "custom-validation-editor", role: "group", "aria-label": l10n.getConstant(values.label), children: [_jsxs("div", { style: { display: 'flex', justifyContent: "space-between" }, children: [_jsx("label", { className: "property-label", style: { fontWeight: '600', marginBottom: "0.5rem", fontSize: '0.875rem' }, children: l10n.getConstant(values.label) }), _jsx("div", { style: { marginBottom: "0.5rem" }, children: _jsx(ButtonComponent, { onClick: addRule, iconCss: 'e-icons e-plus', cssClass: "e-flat", title: "Add Condition", "aria-label": l10n.getConstant('addHeader'), children: l10n.getConstant('addHeader') }) })] }), _jsx("div", { className: "custom-validation-description", style: { marginBottom: "0.75rem" }, children: _jsx("p", { className: "property-description", children: l10n.getConstant('customValidationDescription') }) }), _jsxs("div", { className: "e-group-container", "aria-labelledby": "custom-validation-heading", "aria-describedby": "custom-validation-description", children: [rules.length > 1 && (_jsx("div", { className: "e-group-header", children: _jsxs("div", { className: "e-logical-op-radio-group", role: "radiogroup", "aria-label": "Logical Operator", style: { display: 'flex', flexDirection: 'column', gap: '1.5rem' }, children: [_jsx(RadioButtonComponent, { id: "qb-and-rules", name: "qb-logical-op", value: "and", label: "AND", checked: logicalOp === 'and', labelPosition: "After", change: (e) => {
-                                        if (e)
-                                            handleLogicalOpChange(e.value);
-                                    } }), _jsx(RadioButtonComponent, { id: "qb-or-rules", name: "qb-logical-op", value: "or", label: "OR", checked: logicalOp === 'or', labelPosition: "After", change: (e) => {
-                                        if (e)
-                                            handleLogicalOpChange(e.value);
-                                    } })] }) })), _jsx("div", { className: "e-group-body", children: _jsx("div", { className: "e-rule-list", children: rules.map((rule, idx) => (_jsxs(React.Fragment, { children: [idx > 0 && (_jsxs("div", { "aria-hidden": "true", style: {
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            gap: '8px',
-                                            margin: '8px 0'
-                                        }, children: [_jsx("div", { style: { flex: 1, height: '1px', background: 'rgb(var(--sf-color-line-color))' } }), _jsx("span", { style: {
-                                                    border: '1px solid rgb(var(--sf-color-line-color))',
-                                                    borderRadius: '9999px',
-                                                    padding: '2px 5px',
-                                                    fontSize: '10px',
-                                                    lineHeight: 1.5,
-                                                }, children: logicalOp === 'and' ? 'AND' : 'OR' }), _jsx("div", { style: { flex: 1, height: '1px', background: 'rgb(var(--sf-color-line-color))' } })] })), _jsxs("div", { className: "e-rule-container e-horizontal-mode", role: "group", "aria-label": `Condition ${idx + 1}`, children: [_jsxs("div", { className: "e-rule-field", children: [_jsx("div", { className: "e-rule-value", children: _jsx("input", { value: rule.condition, onChange: (e) => handleConditionChange(rule.id, e.target.value), placeholder: "(input === {fieldName})", className: "e-input custom-validation-textarea", "aria-label": `Condition ${idx + 1}`, "aria-invalid": rule.errors.length > 0, "aria-describedby": rule.errors.length > 0
-                                                                ? `condition-errors-${rule.id}`
-                                                                : undefined }) }), _jsx("div", { children: _jsx(ButtonComponent, { iconCss: 'e-icons e-trash', onClick: () => removeRule(rule.id), title: "Remove this condition", cssClass: "e-small e-flat", "aria-label": `Remove condition ${idx + 1}` }) })] }), rule.errors.length > 0 && (_jsx("div", { className: "custom-validation-field-errors", role: "alert", "aria-live": "polite", children: rule.errors.map((error, errIdx) => (_jsx("div", { className: "e-error", children: error }, errIdx))) }))] })] }, rule.id))) }) })] }), _jsxs("div", { className: "custom-validation-error-message form-group", style: { marginTop: '0.75rem' }, children: [_jsxs("label", { style: { fontWeight: 400, fontSize: '14px' }, children: [l10n.getConstant('validationMessage'), " ", _jsx("span", { style: { color: '#e74c3c' }, children: "*" })] }), _jsx(TextBoxComponent, { placeholder: l10n.getConstant('provideCustomValidationMessage'), value: errorMessage, change: handleErrorMessageChange, blur: (e) => {
-                            if (e.value === '') {
-                                setErrorMessageError(l10n.getConstant('customValidationErrorMessage'));
-                            }
-                            else {
-                                setErrorMessageError('');
-                            }
-                        }, floatLabelType: "Never", cssClass: `custom-validation-error-input ${errorMessageError ? 'e-error' : ''}`, htmlAttributes: {
-                            'aria-labelledby': 'validation-message-label',
-                            'aria-required': 'true',
-                            'aria-invalid': errorMessageError ? 'true' : 'false',
-                            ...(errorMessageError && {
-                                'aria-describedby': 'validation-message-error'
-                            })
-                        } }), errorMessageError && (_jsx("div", { className: "e-error", style: { marginTop: '6px' }, role: "alert", "aria-live": "polite", children: errorMessageError }))] })] }));
-};

package/src/utils/DataSourceCollector.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import type { DataSourceCollectorProps } from '../types/FormSchema';
-export declare const DataSourceCollector: React.FC<DataSourceCollectorProps>;

package/src/utils/DataSourceCollector.js

@@ -1,252 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useCallback } from 'react';
-import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
-import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
-import { ButtonComponent, RadioButtonComponent, SwitchComponent } from '@syncfusion/ej2-react-buttons';
-import { useLocalization } from '../context/LocalizationContext';
-import { OptionsEditor } from './OptionsEditor';
-import { AccordionWrapper } from './CustomAccordion';
-export const DataSourceCollector = ({ value, onChange, type = 'options', datakey, isAccordion = false }) => {
-    const { l10n } = useLocalization();
-    const isGridType = type === 'grid';
-    const defaultType = isGridType ? 'raw_data' : 'options';
-    const [dataSourceType, setDataSourceType] = useState(defaultType);
-    const [rawJsonData, setRawJsonData] = useState(JSON.stringify(value));
-    const [optionData, setOptionData] = useState(null);
-    const [formNames, setFormNames] = useState([]);
-    const [selectedFormName, setSelectedFormName] = useState(typeof value === 'object' && (value?.formName) ? value?.formName : '');
-    const [isLoadingFormNames, setIsLoadingFormNames] = useState(true);
-    const [lookupErrorMessage, setLookupErrorMessage] = useState('');
-    const [remoteUrl, setRemoteUrl] = useState('');
-    const [headers, setHeaders] = useState([]);
-    const [dataPath, setDataPath] = useState('');
-    const [search, setSearch] = useState({ enabled: false, fields: [] });
-    const [sort, setSort] = useState({ enabled: false, field: '', direction: 'ascending' });
-    const [filters, setFilters] = useState([]);
-    const [adaptorType, setAdaptorType] = useState('WebApiAdaptor');
-    const [take, setTake] = useState(null);
-    const [skip, setSkip] = useState(null);
-    const [errorMessage, setErrorMessage] = useState('');
-    const [successMessage, setSuccessMessage] = useState('');
-    // Initialize with current value
-    useEffect(() => {
-        if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
-            setDataSourceType(value.type === 'url' ? 'remote_url' : value.type === 'raw' ? 'raw_data' : (isGridType ? 'raw_data' : 'options'));
-            if (value.type === 'lookup' && value.formName) {
-                setDataSourceType('lookup');
-                setSelectedFormName(value.formName);
-            }
-            if (value.url)
-                setRemoteUrl(value.url);
-            if (value.headers)
-                setHeaders(value.headers);
-            if (value.search)
-                setSearch(value.search);
-            if (value.sort)
-                setSort(value.sort);
-            if (value.filters)
-                setFilters(value.filters);
-            if (value.adaptorType)
-                setAdaptorType(value.adaptorType);
-            if (value.take)
-                setTake(value.take);
-            if (value.skip)
-                setSkip(value.skip);
-            if (value.dataPath)
-                setDataPath(value.dataPath);
-        }
-        else if (Array.isArray(value)) {
-            setRawJsonData(JSON.stringify(value));
-        }
-    }, []);
-    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) : [];
-                setFormNames(names);
-            }
-            catch (error) {
-                console.error('Error fetching form names:', error);
-                setFormNames([]);
-            }
-            finally {
-                setIsLoadingFormNames(false);
-            }
-        };
-        if (isGridType) {
-            fetchFormNames();
-        }
-    }, [isGridType]);
-    // Filter options based on type
-    const allDataSourceOptions = [
-        { text: l10n.getConstant('options'), value: 'options' },
-        { text: l10n.getConstant('rawData') || 'Raw Data', value: 'raw_data' },
-        { text: l10n.getConstant('remoteUrl') || 'Remote URL', value: 'remote_url' }
-    ];
-    const dataSourceOptions = isGridType
-        ? allDataSourceOptions.filter(opt => opt.value !== 'options') /*.concat([{ text: l10n.getConstant('lookup') || 'Lookup', value: 'lookup' }])*/
-        : allDataSourceOptions;
-    const handleDataSourceTypeChange = (e) => {
-        setDataSourceType(e.value);
-        setErrorMessage('');
-        setSuccessMessage('');
-        setHeaders([]);
-        if (e.value !== 'lookup') {
-            setSelectedFormName('');
-            setLookupErrorMessage('');
-        }
-    };
-    const handleHeaderKeyChange = (index, newKey) => {
-        const updatedHeaders = [...headers];
-        updatedHeaders[index].key = newKey;
-        setHeaders(updatedHeaders);
-    };
-    const handleHeaderValueChange = (index, newValue) => {
-        const updatedHeaders = [...headers];
-        updatedHeaders[index].value = newValue;
-        setHeaders(updatedHeaders);
-    };
-    const handleAddHeader = () => {
-        setHeaders([...headers, { key: '', value: '' }]);
-    };
-    const handleRemoveHeader = (index) => {
-        const updatedHeaders = headers.filter((_, i) => i !== index);
-        setHeaders(updatedHeaders);
-    };
-    const handleRawDataChange = (e) => {
-        setRawJsonData(e.value);
-        setErrorMessage('');
-        try {
-            const parsed = JSON.parse(e.value);
-            if (Array.isArray(parsed)) {
-                onChange(parsed);
-            }
-        }
-        catch (err) {
-            const errorMsg = err instanceof Error ? err.message : 'Invalid JSON format';
-            setErrorMessage(l10n.getConstant('invalidJson') || `Invalid JSON: ${errorMsg}`);
-        }
-    };
-    const handleOptionDataChange = (e) => {
-        onChange(e);
-        setOptionData(e);
-    };
-    const handleSaveUrl = () => {
-        if (!remoteUrl.trim()) {
-            setErrorMessage(l10n.getConstant('pleaseEnterUrl') || 'Please enter a URL');
-            setSuccessMessage('');
-            onChange([]);
-            return;
-        }
-        // Save URL and query parameters  
-        const config = {
-            type: 'url',
-            url: remoteUrl,
-            headers: headers.filter(h => h.key.trim()),
-            adaptorType: adaptorType,
-            dataPath: dataPath || undefined, // Add this line
-            search: search?.enabled ? search : undefined,
-            sort: sort?.enabled ? sort : undefined,
-            filters: filters?.length > 0 ? filters : undefined,
-            take: take != null && take > 0 ? take : undefined,
-            skip: skip != null && skip > 0 ? skip : undefined
-        };
-        onChange(config);
-        setErrorMessage('');
-        setSuccessMessage(l10n.getConstant('urlSavedSuccessfully') || 'URL configuration saved successfully');
-    };
-    const handleLookupFormNameChange = useCallback((args) => {
-        const formName = args.value;
-        setSelectedFormName(formName);
-        setLookupErrorMessage('');
-        if (formName) {
-            onChange({
-                type: 'lookup',
-                formName: formName
-            });
-        }
-        else {
-            onChange([]);
-        }
-    }, [onChange]);
-    const content = (_jsxs("div", { className: "data-source-collector", children: [_jsxs("div", { className: "data-source-type-selector", role: "radiogroup", "aria-label": l10n.getConstant('dataSource'), style: { marginBottom: "1rem", display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [dataSourceOptions.map((option) => (_jsx(RadioButtonComponent, { id: `ds-${option.value}-${datakey}`, name: `dataSourceType-${datakey}`, value: option.value, label: option.text, checked: dataSourceType === option.value, labelPosition: "After", change: (e) => {
-                            if (e) {
-                                handleDataSourceTypeChange({ value: e.value });
-                            }
-                        } }, `${option.value}`))), _jsx("div", { style: { height: '1px', background: 'rgb(var(--sf-color-line-color))' } })] }, datakey), _jsxs("div", { className: "data-source-content", children: [dataSourceType === 'options' && !isGridType && (_jsx(OptionsEditor, { options: optionData !== null ? optionData : Array.isArray(value) ? value : (value?.data || []), onChange: handleOptionDataChange, type: type })), dataSourceType === 'raw_data' && (_jsxs("div", { className: "raw-data-editor", children: [_jsxs("label", { className: 'property-label', style: { fontWeight: 500, marginBottom: '0.75rem' }, children: [l10n.getConstant('json'), " ", l10n.getConstant('data')] }), _jsx(TextBoxComponent, { value: rawJsonData, placeholder: l10n.getConstant('pasteJsonArrayRecords') || 'e.g., ["Option 1", "Option 2"]', multiline: true, change: handleRawDataChange, floatLabelType: "Never", htmlAttributes: {
-                                    'aria-labelledby': `${datakey}-json-data-label`
-                                } })] })), dataSourceType === 'remote_url' && (_jsxs("div", { className: "remote-url-editor", children: [_jsxs("div", { className: "url-input-group", style: { marginBottom: "1rem" }, children: [_jsx("label", { className: 'property-label', style: { fontWeight: 500, marginBottom: '0.5rem' }, children: l10n.getConstant('endpointUrl') }), _jsx(TextBoxComponent, { value: remoteUrl, placeholder: l10n.getConstant('enterUrl'), change: (e) => {
-                                            setRemoteUrl(e.value);
-                                            setErrorMessage('');
-                                        }, floatLabelType: "Never", htmlAttributes: {
-                                            'aria-labelledby': `${datakey}-endpoint-url-label`
-                                        } })] }), _jsxs("div", { className: "data-path-input", style: { marginBottom: "1rem" }, children: [_jsx("div", { className: 'property-label', style: { fontWeight: 500, marginBottom: "0.5rem" }, children: l10n.getConstant('dataPath') }), _jsx(TextBoxComponent, { value: dataPath, placeholder: l10n.getConstant('dataPathPlaceholder'), change: (e) => setDataPath(e.value), floatLabelType: "Never", htmlAttributes: {
-                                            'aria-labelledby': `${datakey}-data-path-label`
-                                        } })] }), _jsxs("div", { className: "headers-editor", style: { marginBottom: "0.25rem" }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: "space-between" }, children: [_jsx("div", { className: 'property-label', style: { fontWeight: 500, marginBottom: "0.75rem" }, children: l10n.getConstant('headers') }), _jsx(ButtonComponent, { style: { marginBottom: "0.75rem" }, onClick: handleAddHeader, iconCss: 'e-icons e-plus', cssClass: "e-flat", title: "Add Condition", "aria-label": l10n.getConstant('addHeader'), children: l10n.getConstant('addHeader') })] }), headers.map((header, index) => (_jsxs("div", { style: { display: "flex", gap: "0.5rem", marginBottom: "0.75rem" }, children: [_jsx(TextBoxComponent, { value: header.key, placeholder: l10n.getConstant('headerKey'), change: (e) => handleHeaderKeyChange(index, e.value), floatLabelType: "Never", style: { flex: 1 }, width: '90px', htmlAttributes: {
-                                                    'aria-label': `${l10n.getConstant('headerKey')} ${index + 1}`
-                                                } }), _jsx(TextBoxComponent, { value: header.value, placeholder: "Value", change: (e) => handleHeaderValueChange(index, e.value), floatLabelType: "Never", style: { flex: 1 }, width: '90px', htmlAttributes: {
-                                                    'aria-label': `${l10n.getConstant('value')} ${index + 1}`
-                                                } }), _jsx(ButtonComponent, { onClick: () => handleRemoveHeader(index), cssClass: 'e-flat', iconCss: 'e-icons e-trash', type: "button", "aria-label": `${l10n.getConstant('delete')} ${l10n.getConstant('header')} ${index + 1}` })] }, index)))] }), _jsxs("div", { className: "adaptor-selector", style: { marginBottom: "0.75rem" }, children: [_jsx("div", { className: 'property-label', style: { fontWeight: 500, marginBottom: "0.5rem" }, children: l10n.getConstant('adaptorType') }), _jsx("div", { style: { marginBottom: "1rem" }, children: _jsx(DropDownListComponent, { dataSource: [
-                                                { text: 'Web API Adaptor', value: 'WebApiAdaptor' },
-                                                { text: 'URL Adaptor', value: 'UrlAdaptor' },
-                                                { text: 'OData V4 Adaptor', value: 'ODataV4Adaptor' }
-                                            ], fields: { text: 'text', value: 'value' }, value: adaptorType, change: (e) => setAdaptorType(e.value), floatLabelType: "Never", htmlAttributes: {
-                                                'aria-labelledby': `${datakey}-adaptor-type-label`
-                                            } }) }), _jsx("div", { style: { height: '0.5px', background: 'rgb(var(--sf-color-line-color))' } })] }), _jsxs(_Fragment, { children: [_jsx("div", { className: 'property-label', style: { fontWeight: 600, marginBottom: "0.5rem" }, children: l10n.getConstant('queryConfiguration') }), _jsxs("div", { className: 'query-section', children: [_jsxs("div", { style: { display: 'flex', justifyContent: "space-between" }, children: [_jsx("label", { className: 'property-label', style: { fontWeight: 600, marginBottom: "0.5rem" }, children: l10n.getConstant('search') }), _jsx("div", { children: _jsx(SwitchComponent, { checked: search.enabled, change: (e) => setSearch({ ...search, enabled: e.checked }), htmlAttributes: {
-                                                                'aria-label': l10n.getConstant('search')
-                                                            } }) })] }), search.enabled && (_jsxs(_Fragment, { children: [_jsxs("div", { style: { marginBottom: "0.75rem" }, children: [_jsx("div", { className: 'property-label', style: { fontWeight: 500, marginBottom: "0.5rem" }, children: l10n.getConstant('queryParameterName') }), _jsx("div", { className: 'property-description', children: l10n.getConstant('fieldToSearch') }), _jsx(TextBoxComponent, { value: search.key || `${l10n.getConstant('search')}`, change: (e) => setSearch({ ...search, key: e.value }), floatLabelType: "Always", htmlAttributes: {
-                                                                    'aria-label': l10n.getConstant('queryParameterName')
-                                                                } })] }), _jsxs("div", { children: [_jsx("div", { className: 'property-label', style: { fontWeight: 500, marginBottom: "0.5rem" }, children: "Fields" }), _jsx("div", { className: 'property-description', children: l10n.getConstant('fieldsToSearchIn') }), _jsx(TextBoxComponent, { value: search.fields.join(', '), change: (e) => setSearch({ ...search, fields: e.value.split(',').map((f) => f.trim()).filter((f) => f) }), floatLabelType: "Always", multiline: true, htmlAttributes: {
-                                                                    'aria-label': l10n.getConstant('fieldsToSearchIn')
-                                                                } })] })] }))] }), _jsxs("div", { className: "query-section", children: [_jsxs("div", { style: { display: 'flex', justifyContent: "space-between" }, children: [_jsx("label", { className: 'property-label', style: { fontWeight: 600, marginBottom: "0.5rem" }, children: l10n.getConstant('sort') }), _jsx("div", { children: _jsx(SwitchComponent, { checked: sort.enabled, change: (e) => setSort({ ...sort, enabled: e.checked }), htmlAttributes: {
-                                                                'aria-label': l10n.getConstant('sort')
-                                                            } }) })] }), sort.enabled && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [_jsx("div", { className: 'property-label', style: { fontWeight: 500 }, children: "Field" }), _jsx(TextBoxComponent, { value: sort.field, placeholder: l10n.getConstant('fieldToSortBy'), change: (e) => setSort({ ...sort, field: e.value }), floatLabelType: "Never", style: { flex: 1 }, htmlAttributes: {
-                                                            'aria-label': l10n.getConstant('fieldToSortBy')
-                                                        } }), _jsx("div", { className: 'property-label', style: { fontWeight: 500 }, children: "Direction" }), _jsx(DropDownListComponent, { dataSource: [
-                                                            { text: l10n.getConstant('ascending'), value: 'ascending' },
-                                                            { text: l10n.getConstant('descending'), value: 'descending' }
-                                                        ], fields: { text: 'text', value: 'value' }, value: sort.direction, change: (e) => setSort({ ...sort, direction: e.value }), floatLabelType: "Never", style: { flex: 1 }, htmlAttributes: {
-                                                            'aria-label': 'Direction'
-                                                        } })] }))] }), _jsxs("div", { className: "query-section", children: [_jsxs("div", { style: { display: 'flex', justifyContent: "space-between" }, children: [_jsx("div", { className: 'property-label', style: { fontWeight: 500, marginBottom: "0.25rem" }, children: l10n.getConstant('filters') }), _jsx(ButtonComponent, { style: { marginBottom: "0.25rem" }, onClick: () => setFilters([...filters, { field: '', operator: 'equal', value: '' }]), iconCss: 'e-icons e-plus', cssClass: "e-flat", title: "Add Condition", "aria-label": l10n.getConstant('addHeader'), children: l10n.getConstant('addHeader') })] }), filters.length > 0 &&
-                                                _jsx("div", { className: 'property-description', style: { marginBottom: "0.75rem" }, children: l10n.getConstant('fieldToSearch') }), filters.map((filter, index) => (_jsxs("div", { style: { display: "flex", gap: "0.5rem", marginBottom: "0.5rem", flexWrap: 'wrap', padding: '6px', border: '1px solid rgb(var(--sf-color-line-color))', borderRadius: '12px' }, children: [_jsx(TextBoxComponent, { value: filter.field, width: "185px", placeholder: l10n.getConstant('fieldStatus'), change: (e) => {
-                                                            const updated = [...filters];
-                                                            updated[index].field = e.value;
-                                                            setFilters(updated);
-                                                        }, floatLabelType: "Never", style: { flex: 1 }, htmlAttributes: {
-                                                            'aria-label': `${l10n.getConstant('fieldStatus')} ${index + 1}`
-                                                        } }), datakey === 'data' &&
-                                                        _jsx(ButtonComponent, { cssClass: "e-flat", iconCss: 'e-icons e-trash', onClick: () => setFilters(filters.filter((_, i) => i !== index)), type: "button", "aria-label": `${l10n.getConstant('delete')} ${l10n.getConstant('filters')} ${index + 1}` }), _jsx(DropDownListComponent, { dataSource: [
-                                                            { text: '=', value: 'equal' },
-                                                            { text: '!=', value: 'notequal' },
-                                                            { text: 'contains', value: 'contains' },
-                                                            { text: '>', value: 'greaterthan' },
-                                                            { text: '<', value: 'lessthan' },
-                                                            { text: '>=', value: 'greaterthanorequal' },
-                                                            { text: '<=', value: 'lessthanorequal' }
-                                                        ], fields: { text: 'text', value: 'value' }, value: filter.operator, width: "105px", popupWidth: "100px", change: (e) => {
-                                                            const updated = [...filters];
-                                                            updated[index].operator = e.value;
-                                                            setFilters(updated);
-                                                        }, floatLabelType: "Never", style: { flex: 1 }, htmlAttributes: {
-                                                            'aria-label': `Operator ${index + 1}`
-                                                        } }), _jsx(TextBoxComponent, { value: filter.value, placeholder: l10n.getConstant('value'), width: "105px", change: (e) => {
-                                                            const updated = [...filters];
-                                                            updated[index].value = e.value;
-                                                            setFilters(updated);
-                                                        }, floatLabelType: "Never", style: { flex: 1 }, htmlAttributes: {
-                                                            'aria-label': `${l10n.getConstant('value')} ${index + 1}`
-                                                        } }), datakey === 'Conditionaldata' &&
-                                                        _jsx(ButtonComponent, { cssClass: "e-flat", iconCss: 'e-icons e-trash', onClick: () => setFilters(filters.filter((_, i) => i !== index)), type: "button", "aria-label": `${l10n.getConstant('delete')} ${l10n.getConstant('filters')} ${index + 1}` })] }, index)))] }), _jsx("div", { className: "query-section", children: _jsxs("div", { style: { display: "flex", gap: "0.5rem" }, children: [_jsxs("div", { children: [_jsx("div", { className: 'property-label', style: { fontWeight: 500, marginBottom: "0.25rem" }, children: l10n.getConstant('offset') }), _jsx(TextBoxComponent, { value: skip !== null ? skip.toString() : '', placeholder: l10n.getConstant('skipOffset'), change: (e) => setSkip(parseInt(e.value) || 0), floatLabelType: "Never", type: "number", style: { flex: 1 }, htmlAttributes: {
-                                                                'aria-label': l10n.getConstant('offset')
-                                                            } })] }), _jsxs("div", { children: [_jsx("div", { className: 'property-label', style: { fontWeight: 500, marginBottom: "0.25rem" }, children: l10n.getConstant('limit') }), _jsx(TextBoxComponent, { value: take !== null ? take.toString() : '', placeholder: l10n.getConstant('takeLimit'), change: (e) => setTake(parseInt(e.value) || 0), floatLabelType: "Never", type: "number", style: { flex: 1 }, htmlAttributes: {
-                                                                'aria-label': l10n.getConstant('limit')
-                                                            } })] })] }) })] }), _jsx(ButtonComponent, { style: { marginTop: '0.75rem' }, cssClass: "e-primary", onClick: handleSaveUrl, type: "button", "aria-label": l10n.getConstant('save'), children: l10n.getConstant('save') })] })), dataSourceType === 'lookup' && (_jsxs("div", { className: "lookup-editor", style: { marginBottom: '0.75rem' }, children: [_jsx("div", { className: 'property-description', style: { marginBottom: '0.5rem' }, children: l10n.getConstant('selectFormSubmissions') }), _jsxs("div", { style: { marginBottom: '0.5rem' }, children: [_jsx("label", { style: { display: 'block', marginBottom: '0.5rem', fontWeight: 500 }, children: l10n.getConstant('selectFormName') }), _jsx(DropDownListComponent, { dataSource: formNames, value: selectedFormName, change: handleLookupFormNameChange, placeholder: l10n.getConstant('selectFormName'), popupHeight: "200px", allowFiltering: true, enabled: !isLoadingFormNames, floatLabelType: "Never", htmlAttributes: {
-                                            'aria-labelledby': `${datakey}-form-name-label`
-                                        } })] }), lookupErrorMessage && (_jsx("p", { className: "e-error", style: { marginTop: '0.5rem' }, role: "alert", "aria-live": "assertive", children: lookupErrorMessage }))] })), errorMessage && (_jsx("p", { className: "e-error", role: "alert", "aria-live": "assertive", children: errorMessage })), successMessage && (_jsx("p", { className: "e-success", role: "alert", "aria-live": "assertive", children: successMessage }))] }), type != 'grid' ? (_jsx("div", { style: { height: '0.5px', background: 'rgb(var(--sf-color-line-color))', marginTop: '1rem' } })) : null] }));
-    return isAccordion ? (_jsx(AccordionWrapper, { title: l10n.getConstant('dataSource'), children: content })) : (content);
-};

package/src/utils/ExpressionEditor.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-export interface ExpressionEditorProps {
-    expression?: string;
-    availableFields: string[] | any[];
-    onExpressionChange: (expression: string) => void;
-}
-export interface ColumnExpressionEditorProps {
-    expression?: string;
-    availableFields: string[];
-    onExpressionChange: (expression: string) => void;
-}
-export declare const ExpressionEditor: React.FC<ExpressionEditorProps>;
-export declare const ColumnExpressionEditor: React.FC<ColumnExpressionEditorProps>;

package/src/utils/ExpressionEditor.js

@@ -1,99 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useMemo } from 'react';
-import { ExpressionEngine, ExpressionValidator } from '../../Common/expressions/ExpressionEngine';
-import { floatBlur, floatFocus } from '../components/layout/LeftPane';
-import { useLocalization } from '../context/LocalizationContext';
-import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
-export const ExpressionEditor = ({ expression = '', availableFields, onExpressionChange }) => {
-    const [localExpression, setLocalExpression] = useState(expression);
-    const [errors, setErrors] = useState([]);
-    const [hasDependencies, setHasDependencies] = useState(false);
-    const validator = new ExpressionValidator();
-    const engine = new ExpressionEngine();
-    // Validate expression and extract dependencies
-    useEffect(() => {
-        if (localExpression.trim() === '') {
-            setErrors([]);
-            setHasDependencies(false);
-            return;
-        }
-        const validationErrors = validator.validate(localExpression, availableFields);
-        const deps = engine.extractDependencies(localExpression);
-        const errorMessages = validationErrors.map(e => e.message);
-        // If no dependencies found, add error
-        if (deps.length === 0) {
-            errorMessages.push('Expression must contain at least one field reference');
-        }
-        setErrors(errorMessages);
-        setHasDependencies(deps.length > 0);
-    }, [localExpression, availableFields]);
-    // Update parent on change (even if there are validation errors)
-    // Syntax errors are shown but don't block expression from being saved
-    // Runtime validation will catch field reference errors at evaluation time
-    useEffect(() => {
-        if (errors.length === 0 && hasDependencies) {
-            onExpressionChange(localExpression);
-        }
-        else {
-            onExpressionChange('');
-        }
-    }, [localExpression, onExpressionChange, hasDependencies, errors]);
-    // Show field suggestions when typing {
-    const handleChange = (e) => {
-        const value = e.target.value || e.value || '';
-        setLocalExpression(value);
-    };
-    return (_jsxs("div", { className: "expression-editor", children: [_jsx("div", { className: "expression-input-wrapper", children: _jsx("div", { className: "e-input-group", children: _jsx("textarea", { className: `e-input ${errors.length > 0 ? 'e-error' : ''}`, placeholder: "e.g., {qty} * {price}", onFocus: floatFocus, onBlur: floatBlur, value: localExpression, onChange: handleChange, "aria-label": 'Expression Editor textbox', "aria-invalid": errors.length > 0 ? 'true' : 'false' }) }) }), errors.length > 0 && (_jsx("div", { className: "expression-errors", role: "alert", "aria-live": "assertive", children: errors.map((error, idx) => (_jsx("div", { className: "e-error", role: "alert", "aria-live": "assertive", children: error }, idx))) }))] }));
-};
-export const ColumnExpressionEditor = ({ expression = '', availableFields, onExpressionChange }) => {
-    const [inputValue, setInputValue] = useState(expression);
-    const validator = useMemo(() => new ExpressionValidator(), []);
-    const engine = useMemo(() => new ExpressionEngine(), []);
-    const { l10n } = useLocalization();
-    // Validate only when expression is updated externally
-    useEffect(() => {
-        setInputValue(expression);
-    }, [expression]);
-    // Validation errors
-    const errors = useMemo(() => {
-        if (!inputValue || inputValue.trim() === '') {
-            return [];
-        }
-        const validationErrors = validator.validate(inputValue, availableFields);
-        const errorMessages = validationErrors.map(e => e.message);
-        // Check for field dependencies
-        const deps = engine.extractDependencies(inputValue);
-        // If no dependencies found, add error
-        if (deps.length === 0) {
-            errorMessages.push('Expression must contain at least one field reference');
-        }
-        return errorMessages;
-    }, [inputValue, availableFields, validator, engine]);
-    // Handle local input change
-    const handleInputChange = (e) => {
-        const newValue = e.value || '';
-        setInputValue(newValue);
-        // Validate before calling parent onChange
-        let tempErrors = [];
-        if (newValue && newValue.trim() !== '') {
-            const validationErrors = validator.validate(newValue, availableFields);
-            tempErrors = validationErrors.map(e => e.message);
-            // Check for field dependencies
-            const deps = engine.extractDependencies(newValue);
-            if (deps.length === 0) {
-                tempErrors.push('Expression must contain at least one field reference');
-            }
-        }
-        // Only notify parent if no errors
-        if (tempErrors.length === 0) {
-            onExpressionChange(newValue);
-        }
-    };
-    return (_jsxs("div", { "aria-label": 'Expression Editor textbox', className: "column-expression-editor", style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(TextBoxComponent, { multiline: true, placeholder: l10n.getConstant("expressionPlaceholder"), value: inputValue, change: handleInputChange, className: "e-textbox expression-input", htmlAttributes: {
-                    'aria-label': 'Expression Editor textbox',
-                    'aria-invalid': errors.length > 0 ? 'true' : 'false',
-                    ...(errors.length > 0 && {
-                        'aria-describedby': 'column-expression-errors'
-                    })
-                } }), errors.length > 0 && (_jsx("div", { className: "e-error", id: "column-expression-errors", role: "alert", "aria-live": "assertive", children: errors.map((error, idx) => (_jsx("p", { style: { margin: 0 }, children: error }, idx))) }))] }));
-};

package/src/utils/FormSettingsPanel.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import type { FormSettings } from '../types/FormSchema';
-interface FormSettingsPanelProps {
-    settings: FormSettings | undefined;
-    formSettingsConfig: any;
-    onSave: (settings: FormSettings, key: string) => void;
-}
-export declare const FormSettingsPanel: React.FC<FormSettingsPanelProps>;
-export {};