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

package/src/utils/CustomValidationEditor.js

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

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

package/src/utils/DataSourceCollector.js

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

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

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

@@ -0,0 +1,9 @@
+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 {};