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

package/src/types/FormSchema.js

@@ -1,147 +0,0 @@
-/**
- * Represents the category of components in the Form Builder
- * @private
- */
-export var ComponentCategory;
-(function (ComponentCategory) {
-    /**
-     * Specifies the basic set of form components in the Form Builder
-     */
-    ComponentCategory["BASIC"] = "basic";
-    /**
-     * Specifies the advanced set of form components in the Form Builder
-     */
-    ComponentCategory["ADVANCED"] = "advanced";
-    /**
-     * Specifies the layout components in the Form Builder
-     */
-    ComponentCategory["LAYOUT"] = "layout";
-})(ComponentCategory || (ComponentCategory = {}));
-/**
- * Represents the components supported in the Form Builder.
- */
-export var FormComponentType;
-(function (FormComponentType) {
-    /**
-     * Specifies the text box component.
-     */
-    FormComponentType["TEXTBOX"] = "textbox";
-    /**
-     * Specifies the text area component.
-     */
-    FormComponentType["TEXTAREA"] = "textarea";
-    /**
-     * Specifies the check box component.
-     */
-    FormComponentType["CHECKBOX"] = "checkbox";
-    /**
-     * Specifies the radio button component.
-     */
-    FormComponentType["RADIO"] = "radio";
-    /**
-     * Specifies the numeric text box component.
-     */
-    FormComponentType["NUMBER"] = "number";
-    /**
-     * Specifies the masked text box component.
-     */
-    FormComponentType["INPUT_MASK"] = "inputMask";
-    /**
-     * Specifies the dropdown list component.
-     */
-    FormComponentType["DROPDOWN"] = "dropdown";
-    /**
-     * Specifies the date picker component.
-     */
-    FormComponentType["DATE"] = "date";
-    /**
-     * Specifies the button component.
-     */
-    FormComponentType["BUTTON"] = "button";
-    /**
-     * Specifies the check box component for multiple choice selection.
-     */
-    FormComponentType["CHECKBOX_GROUP"] = "checkboxGroup";
-    /**
-     * Specifies the multiselect component for multiple choice selection.
-     */
-    FormComponentType["MULTISELECT"] = "multiselect";
-    /**
-     * Specifies the date time picker component.
-     */
-    FormComponentType["DATE_TIME"] = "dateTime";
-    /**
-     * Specifies the time picker component.
-     */
-    FormComponentType["TIME"] = "time";
-    /**
-     * Specifies the date range picker component.
-     */
-    FormComponentType["DATE_RANGE"] = "dateRange";
-    /**
-     * Specifies the switch component.
-     */
-    FormComponentType["SWITCH"] = "switch";
-    /**
-     * Specifies the rating component.
-     */
-    FormComponentType["RATING"] = "rating";
-    /**
-     * Specifies the splitbutton component.
-     */
-    FormComponentType["SPLIT_BUTTON"] = "splitButton";
-    /**
-     * Specifies the range slider component.
-     */
-    FormComponentType["RANGE_SLIDER"] = "rangeSlider";
-    /**
-     * Specifies the signature component.
-     */
-    FormComponentType["SIGNATURE"] = "signature";
-    /**
-     * Specifies the image editor component.
-     */
-    FormComponentType["IMAGE_EDITOR"] = "imageEditor";
-    /**
-     * Specifies the file upload component.
-     */
-    FormComponentType["FILE_UPLOAD"] = "fileUpload";
-    FormComponentType["COLOR_PICKER"] = "colorPicker";
-    /**
-     * Specifies the rich text editor component.
-     */
-    FormComponentType["RICH_TEXT_EDITOR"] = "richTextEditor";
-    /**
-     * Specifies the data grid component.
-     */
-    FormComponentType["DATA_GRID"] = "dataGrid";
-    /**
-     * Specifies the message component.
-     */
-    FormComponentType["MESSAGE"] = "message";
-    /**
-     * Specifies the panel element for layouting.
-     */
-    FormComponentType["PANEL"] = "panel";
-    /**
-     * Specifies the table element for layouting.
-     */
-    FormComponentType["TABLE"] = "table";
-    /**
-     * Specifies the tab component for layouting.
-     */
-    FormComponentType["TABS"] = "tabs";
-    /**
-     * Specifies the card element for layouting.
-     */
-    FormComponentType["CARD"] = "card";
-    /**
-     * Specifies the lookup component for associating the data from other forms in the current form.
-     */
-    FormComponentType["LOOKUP"] = "lookup";
-    /**
-     * Specifies the HTML element that can be rendered in the form.
-     */
-    FormComponentType["STATIC_HTML"] = "staticHtml";
-    FormComponentType["AUTO_NUMBER"] = "autoNumber";
-})(FormComponentType || (FormComponentType = {}));

package/src/types/connection.d.ts

@@ -1,19 +0,0 @@
-export type ConnectionConfig = {
-    id?: string;
-    name?: string;
-    type?: 'postgres' | 'mysql' | 'mssql' | 'sqlite' | 'mongodb';
-    host: string;
-    port?: number;
-    database: string;
-    ssl?: {
-        require?: boolean;
-        ca?: string;
-    };
-    auth?: {
-        username?: string;
-        password?: string;
-        saveCredentials?: boolean;
-    };
-    timeout?: number;
-};
-export declare const defaultConnection: ConnectionConfig;

package/src/types/connection.js

@@ -1,9 +0,0 @@
-export const defaultConnection = {
-    type: 'postgres',
-    host: '',
-    port: 5432,
-    database: '',
-    ssl: { require: false },
-    auth: { username: '', password: '', saveCredentials: false },
-    timeout: 15,
-};

package/src/utils/AttributesEditor.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-interface AttributesEditorProps {
-    attributes: Array<{
-        key: string;
-        value: string;
-    }>;
-    onChange: (attributes: Array<{
-        key: string;
-        value: string;
-    }>) => void;
-}
-export declare const AttributesEditor: React.FC<AttributesEditorProps>;
-export {};

package/src/utils/AttributesEditor.js

@@ -1,117 +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 AttributesEditor = ({ attributes, onChange }) => {
-    const [rows, setRows] = useState([]);
-    const gridRef = useRef(null);
-    const nextIdRef = useRef(0);
-    const { l10n } = useLocalization();
-    // Initialize rows from attributes
-    useEffect(() => {
-        let initialRows = [];
-        if (Array.isArray(attributes) && attributes.length > 0) {
-            initialRows = attributes.map((attr, idx) => {
-                const id = idx;
-                if (id >= nextIdRef.current) {
-                    nextIdRef.current = id + 1;
-                }
-                return {
-                    id,
-                    index: idx + 1,
-                    attrKey: attr.key || '',
-                    value: attr.value || ''
-                };
-            });
-        }
-        else {
-            nextIdRef.current = 0;
-            initialRows = [];
-        }
-        setRows(initialRows);
-    }, []);
-    // Update parent when rows change
-    const updateAttributes = (newRows) => {
-        const updatedAttributes = newRows.map(row => ({
-            key: row.attrKey || '',
-            value: row.value || ''
-        }));
-        onChange(updatedAttributes);
-    };
-    const handleAddRow = () => {
-        const newId = nextIdRef.current++;
-        const newIndex = rows.length + 1;
-        const newRow = {
-            id: newId,
-            index: newIndex,
-            attrKey: '',
-            value: ''
-        };
-        const newRows = [...rows, newRow];
-        setRows(newRows);
-        updateAttributes(newRows);
-    };
-    /* istanbul ignore next */
-    const handleDeleteRow = (id) => {
-        const newRows = rows.filter(row => row.id !== id).map((row, idx) => ({
-            ...row,
-            index: idx + 1
-        }));
-        setRows(newRows);
-        updateAttributes(newRows);
-    };
-    /* istanbul ignore next */
-    const handleKeyChange = (id, newKey) => {
-        if (rows[id].attrKey === newKey) {
-            return;
-        }
-        const newRows = rows.map(row => row.id === id ? { ...row, attrKey: newKey } : row);
-        setRows(newRows);
-        updateAttributes(newRows);
-    };
-    /* istanbul ignore next */
-    const handleValueChange = (id, newValue) => {
-        if (rows[id].value === newValue) {
-            return;
-        }
-        const newRows = rows.map(row => row.id === id ? { ...row, value: newValue } : row);
-        setRows(newRows);
-        updateAttributes(newRows);
-    };
-    /* istanbul ignore next */
-    const actionTemplate = (props) => (_jsx("button", { onClick: () => handleDeleteRow(props.id), onKeyDown: (e) => {
-            if (e.code === "Enter") {
-                handleDeleteRow(props.id);
-            }
-        }, className: "e-btn e-flat", title: "Delete this attribute", "aria-label": "Delete this attribute", 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 keyTemplate = (props) => (_jsx("div", { className: "e-input-group", children: _jsx("input", { type: "text", defaultValue: props.attrKey, onBlur: (e) => {
-                handleKeyChange(props.id, e.target.value);
-                floatBlur(e);
-            }, placeholder: "e.g., data-test, aria-label", tabIndex: 0, "aria-label": "Attribute name", onFocus: floatFocus, onKeyDown: (e) => {
-                if (e.ctrlKey && e.key === 'a') {
-                    e.preventDefault();
-                    e.currentTarget.select();
-                }
-            }, className: "e-input" }) }));
-    /* istanbul ignore next */
-    const valueTemplate = (props) => (_jsx("div", { className: "e-input-group", children: _jsx("input", { type: "text", defaultValue: props.value, onBlur: (e) => {
-                handleValueChange(props.id, e.target.value);
-                floatBlur(e);
-            }, placeholder: "e.g., value for the attribute", tabIndex: 0, "aria-label": "Attribute value", onFocus: floatFocus, onKeyDown: (e) => {
-                if (e.ctrlKey && e.key === 'a') {
-                    e.preventDefault();
-                    e.currentTarget.select();
-                }
-            }, className: "e-input" }) }));
-    const height = rows.length >= 3 ? 184 : rows.length === 2 ? 126 : rows.length <= 1 ? 68 : 184;
-    return (_jsxs("div", { className: "options-editor", children: [_jsxs(GridComponent, { ref: gridRef, dataSource: rows, allowPaging: false, height: height, cssClass: "options-grid", allowSelection: false, children: [_jsxs(ColumnsDirective, { children: [_jsx(ColumnDirective, { field: "attrKey", headerText: l10n.getConstant("attributeName"), width: "200px", template: keyTemplate, allowSorting: false }), _jsx(ColumnDirective, { field: "value", headerText: l10n.getConstant("attributeValue"), width: "200px", template: valueTemplate, 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('addAttribute') }) })] }));
-};

package/src/utils/ButtonGroupEditor.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-interface ButtonDef {
-    label?: string;
-    type?: 'submit' | 'reset' | 'button';
-    style?: 'primary' | 'flat' | 'information' | 'error' | 'success' | 'warning';
-    iconCss?: string;
-    iconPosition?: 'Left' | 'Right';
-    disabled?: boolean;
-}
-interface ButtonGroupEditorProps {
-    buttons?: ButtonDef[];
-    onChange: (buttons: ButtonDef[]) => void;
-}
-export declare const ButtonGroupEditor: React.FC<ButtonGroupEditorProps>;
-export default ButtonGroupEditor;

package/src/utils/ButtonGroupEditor.js

@@ -1,141 +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 ButtonGroupEditor = ({ buttons = [], onChange }) => {
-    const [rows, setRows] = useState([]);
-    const gridRef = useRef(null);
-    const { l10n } = useLocalization();
-    // Initialize rows from buttons array
-    useEffect(() => {
-        const initialRows = (buttons || []).map((btn, idx) => ({
-            id: idx,
-            index: idx + 1,
-            label: btn.label || '',
-            type: btn.type || 'button',
-            style: btn.style || 'primary',
-            iconCss: btn.iconCss || '',
-            iconPosition: btn.iconPosition || 'Left',
-            disabled: btn.disabled || false
-        }));
-        setRows(initialRows);
-    }, [buttons]);
-    // Update parent when rows change
-    const updateButtons = (newRows) => {
-        const updatedButtons = newRows.map(row => ({
-            label: row.label || '',
-            type: row.type || 'button',
-            style: row.style || 'primary',
-            iconCss: row.iconCss || '',
-            iconPosition: row.iconPosition || 'Left',
-            disabled: row.disabled || false
-        }));
-        onChange(updatedButtons);
-    };
-    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: `Button ${newIndex}`,
-            type: 'button',
-            style: 'primary',
-            iconCss: '',
-            iconPosition: 'Left',
-            disabled: false
-        };
-        const newRows = [...rows, newRow];
-        setRows(newRows);
-        updateButtons(newRows);
-    };
-    const handleDeleteRow = (id) => {
-        const newRows = rows.filter(row => row.id !== id).map((row, idx) => ({
-            ...row,
-            index: idx + 1
-        }));
-        setRows(newRows);
-        updateButtons(newRows);
-    };
-    const handleLabelChange = (id, newLabel) => {
-        if (rows[id].label === newLabel) {
-            return;
-        }
-        const newRows = rows.map(row => row.id === id ? { ...row, label: newLabel } : row);
-        setRows(newRows);
-        updateButtons(newRows);
-    };
-    const handleTypeChange = (id, newType) => {
-        const newRows = rows.map(row => row.id === id ? { ...row, type: newType } : row);
-        setRows(newRows);
-        updateButtons(newRows);
-    };
-    const handleStyleChange = (id, newStyle) => {
-        const newRows = rows.map(row => row.id === id ? { ...row, style: newStyle } : row);
-        setRows(newRows);
-        updateButtons(newRows);
-    };
-    const handleIconCssChange = (id, newIconCss) => {
-        if (rows[id].iconCss === newIconCss) {
-            return;
-        }
-        const newRows = rows.map(row => row.id === id ? { ...row, iconCss: newIconCss } : row);
-        setRows(newRows);
-        updateButtons(newRows);
-    };
-    const handleIconPositionChange = (id, newPosition) => {
-        const newRows = rows.map(row => row.id === id ? { ...row, iconPosition: newPosition } : row);
-        setRows(newRows);
-        updateButtons(newRows);
-    };
-    const handleDisabledChange = (id, isDisabled) => {
-        const newRows = rows.map(row => row.id === id ? { ...row, disabled: isDisabled } : row);
-        setRows(newRows);
-        updateButtons(newRows);
-    };
-    // Template for label input column
-    const labelTemplate = (props) => (_jsx("div", { className: "e-input-group", children: _jsx("input", { type: "text", defaultValue: props.label, tabIndex: 0, "aria-label": "Button label", onFocus: floatFocus, onKeyDown: (e) => {
-                if (e.ctrlKey && e.key === 'a') {
-                    e.preventDefault();
-                    e.currentTarget.select();
-                }
-            }, onBlur: (e) => {
-                handleLabelChange(props.id, e.target.value);
-                floatBlur(e);
-            }, placeholder: "Enter button label", className: "e-input" }) }));
-    // Template for type select column (native select styled like Syncfusion input)
-    const typeTemplate = (props) => (_jsx("div", { className: "e-input-group", children: _jsxs("select", { defaultValue: props.type, className: "e-input", tabIndex: 0, "aria-label": "Button type", onFocus: floatFocus, onBlur: floatBlur, onChange: (e) => handleTypeChange(props.id, e.target.value), children: [_jsx("option", { value: "button", children: "Button" }), _jsx("option", { value: "submit", children: "Submit" }), _jsx("option", { value: "reset", children: "Reset" })] }) }));
-    // Template for style select column (native select styled like Syncfusion input)
-    const styleTemplate = (props) => (_jsx("div", { className: "e-input-group", children: _jsxs("select", { defaultValue: props.style, className: "e-input", tabIndex: 0, "aria-label": "Button style", onFocus: floatFocus, onBlur: floatBlur, onChange: (e) => handleStyleChange(props.id, e.target.value), children: [_jsx("option", { value: "primary", children: "Primary" }), _jsx("option", { value: "flat", children: "Flat" }), _jsx("option", { value: "information", children: "Information" }), _jsx("option", { value: "error", children: "Error" }), _jsx("option", { value: "success", children: "Success" }), _jsx("option", { value: "warning", children: "Warning" })] }) }));
-    // Template for icon CSS input column
-    const iconCssTemplate = (props) => (_jsx("div", { className: "e-input-group", children: _jsx("input", { type: "text", tabIndex: 0, "aria-label": "Icon CSS class", defaultValue: props.iconCss || '', onBlur: (e) => {
-                handleIconCssChange(props.id, e.target.value);
-                floatBlur(e);
-            }, placeholder: "e.g., e-icon-close", onFocus: floatFocus, onKeyDown: (e) => {
-                if (e.ctrlKey && e.key === 'a') {
-                    e.preventDefault();
-                    e.currentTarget.select();
-                }
-            }, className: "e-input" }) }));
-    // Template for icon position select column
-    const iconPositionTemplate = (props) => (_jsx("div", { className: "e-input-group", children: _jsxs("select", { defaultValue: props.iconPosition || 'Left', className: "e-input", tabIndex: 0, "aria-label": "Icon position", onFocus: floatFocus, onBlur: floatBlur, onChange: (e) => handleIconPositionChange(props.id, e.target.value), children: [_jsx("option", { value: "Left", children: "Left" }), _jsx("option", { value: "Right", children: "Right" })] }) }));
-    // Template for disabled checkbox column
-    const disabledTemplate = (props) => (_jsx("div", { className: 'e-checkbox-wrapper', children: _jsx("input", { type: "checkbox", defaultChecked: props.disabled || false, tabIndex: 0, "aria-label": "Disabled", onChange: (e) => handleDisabledChange(props.id, e.target.checked), className: "e-check-box", style: { cursor: 'pointer' } }) }));
-    // Template for delete action column
-    const actionTemplate = (props) => (_jsx("button", { onClick: () => handleDeleteRow(props.id), onKeyDown: (e) => {
-            if (e.code === "Enter") {
-                handleDeleteRow(props.id);
-            }
-        }, className: "e-btn e-flat", title: "Delete this button", "aria-label": "Delete this button", type: "button", children: _jsx("span", { className: "e-icons e-trash", style: {
-                cursor: 'pointer',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                flexShrink: 0,
-            } }) }));
-    const height = rows.length >= 3 ? 184 : rows.length === 2 ? 126 : rows.length <= 1 ? 68 : 184;
-    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("buttonLabel"), width: "150", template: labelTemplate, allowSorting: false }), _jsx(ColumnDirective, { field: "type", headerText: l10n.getConstant("buttonType"), width: "120", template: typeTemplate, allowSorting: false }), _jsx(ColumnDirective, { field: "style", headerText: l10n.getConstant("buttonStyle"), width: "120", template: styleTemplate, allowSorting: false }), _jsx(ColumnDirective, { field: "iconCss", headerText: l10n.getConstant("iconCss"), width: "130", template: iconCssTemplate, allowSorting: false }), _jsx(ColumnDirective, { field: "iconPosition", headerText: l10n.getConstant("iconPosition"), width: "110", template: iconPositionTemplate, allowSorting: false }), _jsx(ColumnDirective, { field: "disabled", headerText: l10n.getConstant("disabled"), width: "80", textAlign: "Center", template: disabledTemplate, 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('addButton') }) })] }));
-};
-export default ButtonGroupEditor;

package/src/utils/ChoiceBasedFieldEditor.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-import type { FormComponent, ChoiceBasedFieldRule } from '../types/FormSchema';
-export interface ChoiceBasedFieldEditorProps {
-    componentForEdit: FormComponent;
-    componentFields: FormComponent[];
-    existingRule?: ChoiceBasedFieldRule;
-    onChange: (rule: ChoiceBasedFieldRule | undefined) => void;
-}
-/**
- * ChoiceBasedFieldEditor Component - Simple 3-Step Flow
- *
- * STEP 1: Select primary field (Dropdown)
- * STEP 2: Select primary option (Dropdown)
- * STEP 3: Map dependent options (MultiSelect)
- */
-export declare const ChoiceBasedFieldEditor: React.FC<ChoiceBasedFieldEditorProps>;

package/src/utils/ChoiceBasedFieldEditor.js

@@ -1,87 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState, useRef } from 'react';
-import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
-import { MultiSelectComponent, Inject, CheckBoxSelection } from '@syncfusion/ej2-react-dropdowns';
-import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
-import { useLocalization } from '../context/LocalizationContext';
-import { useFormSchema } from '../context/FormSchemaContext';
-import { useFetchOptions, resolveOptions, getComponentFromSchema } from '../../Common/utils';
-/**
- * ChoiceBasedFieldEditor Component - Simple 3-Step Flow
- *
- * STEP 1: Select primary field (Dropdown)
- * STEP 2: Select primary option (Dropdown)
- * STEP 3: Map dependent options (MultiSelect)
- */
-export const ChoiceBasedFieldEditor = ({ componentForEdit, componentFields, existingRule, onChange }) => {
-    const { l10n } = useLocalization();
-    const { formSchema } = useFormSchema();
-    const dropdownRef = useRef(null);
-    const [primaryFieldId, setPrimaryFieldId] = useState(existingRule?.primaryFieldId || null);
-    const [currentOptionIndex, setCurrentOptionIndex] = useState(0);
-    const [choiceMapping, setChoiceMapping] = useState(existingRule?.choiceMapping || {});
-    // Get live component with updated options from formSchema
-    const liveComponent = useMemo(() => {
-        return componentForEdit ? getComponentFromSchema(componentForEdit.id, formSchema) || componentForEdit : componentForEdit;
-    }, [componentForEdit, formSchema]);
-    // Filter available primary fields
-    const availablePrimaryFields = useMemo(() => {
-        const currentIndex = componentFields.findIndex(f => f.id === componentForEdit.id);
-        return componentFields
-            .slice(0, currentIndex)
-            .filter(f => f.type === 'dropdown' && f.id !== componentForEdit.id);
-    }, [componentFields, componentForEdit.id]);
-    // Find the selected primary field
-    const selectedPrimaryField = useMemo(() => {
-        return availablePrimaryFields.find(f => f.id === primaryFieldId);
-    }, [availablePrimaryFields, primaryFieldId]);
-    // Fetch and resolve primary field options
-    const primaryFieldFetchedOptions = useFetchOptions(selectedPrimaryField?.options || []);
-    const primaryFieldOptions = useMemo(() => {
-        if (!selectedPrimaryField)
-            return [];
-        const resolved = resolveOptions(selectedPrimaryField.options, primaryFieldFetchedOptions);
-        return Array.isArray(resolved) ? resolved : (Array.isArray(selectedPrimaryField.options) ? selectedPrimaryField.options : []);
-    }, [selectedPrimaryField, primaryFieldFetchedOptions]);
-    // Fetch and resolve dependent field options from live component
-    const dependentFieldFetchedOptions = useFetchOptions(liveComponent.options);
-    const dependentFieldOptions = useMemo(() => {
-        const resolved = resolveOptions(liveComponent.options, dependentFieldFetchedOptions);
-        return Array.isArray(resolved) ? resolved : (Array.isArray(liveComponent.options) ? liveComponent.options : []);
-    }, [liveComponent.options, dependentFieldFetchedOptions]);
-    const currentPrimaryOption = primaryFieldOptions[currentOptionIndex];
-    const handleSave = () => {
-        if (!primaryFieldId || Object.keys(choiceMapping).length === 0) {
-            return;
-        }
-        const rule = {
-            primaryFieldId,
-            choiceMapping,
-            showAllWhenNotMapped: false
-        };
-        onChange(rule);
-    };
-    const handleCancel = () => {
-        dropdownRef?.current?.setProperties({ value: null });
-        setPrimaryFieldId(null);
-        setCurrentOptionIndex(0);
-        setChoiceMapping({});
-        onChange(undefined);
-    };
-    return (_jsxs("div", { className: "choice-based-editor", style: { marginTop: '0.5rem' }, children: [_jsxs("div", { style: { marginBottom: '2rem', padding: '0 25px' }, children: [_jsx("label", { className: 'property-description', htmlFor: "cbfe-primary-field", children: l10n.getConstant('selectPrimaryField') }), _jsx(DropDownListComponent, { ref: dropdownRef, dataSource: availablePrimaryFields.map(f => ({
-                            text: f.label || f.name || f.id,
-                            value: f.id
-                        })), fields: { text: 'text', value: 'value' }, placeholder: "Select a field", value: primaryFieldId || undefined, change: (e) => {
-                            setPrimaryFieldId(e.value);
-                            setCurrentOptionIndex(0);
-                            setChoiceMapping({});
-                        }, floatLabelType: "Never", htmlAttributes: { 'aria-label': l10n.getConstant('selectPrimaryField') } }, "step1-primary-field")] }), primaryFieldId && primaryFieldOptions.length > 0 && (_jsxs("div", { style: { marginBottom: '2rem', padding: '0 25px' }, children: [_jsxs("label", { className: 'property-description', htmlFor: "cbfe-primary-option", children: [l10n.getConstant('selectPrimaryOption'), " (", currentOptionIndex + 1, " of ", primaryFieldOptions.length, ")"] }), _jsx(DropDownListComponent, { dataSource: primaryFieldOptions.map(opt => ({ text: opt, value: opt })), fields: { text: 'text', value: 'value' }, value: currentPrimaryOption, change: (e) => {
-                            const newIndex = primaryFieldOptions.indexOf(e.value);
-                            setCurrentOptionIndex(newIndex);
-                        }, floatLabelType: "Never", htmlAttributes: { 'aria-label': l10n.getConstant('selectPrimaryOption') } }, `step2-options-${primaryFieldId}`)] })), primaryFieldId && currentPrimaryOption && dependentFieldOptions.length > 0 && (_jsxs("div", { style: { marginBottom: '2rem', padding: '0 25px' }, children: [_jsxs("label", { className: 'property-description', htmlFor: "cbfe-dependent-options", children: [l10n.getConstant('selectDependentOptions'), " for \"", currentPrimaryOption, "\""] }), _jsx(MultiSelectComponent, { dataSource: dependentFieldOptions.map((opt) => ({ text: opt, value: opt })), fields: { text: 'text', value: 'value' }, placeholder: l10n.getConstant('selectOptions'), mode: "CheckBox", showSelectAll: true, value: choiceMapping[currentPrimaryOption] || [], change: (e) => {
-                            setChoiceMapping({
-                                ...choiceMapping,
-                                [currentPrimaryOption]: e.value || []
-                            });
-                        }, floatLabelType: "Never", htmlAttributes: { 'aria-label': l10n.getConstant('selectDependentOptions') }, children: _jsx(Inject, { services: [CheckBoxSelection] }) }, `step3-multiselect-${primaryFieldId}-${currentOptionIndex}`), _jsxs("small", { style: { display: 'block', marginTop: '0.5rem', color: '#666' }, children: [choiceMapping[currentPrimaryOption]?.length || 0, " option(s) selected"] })] })), primaryFieldId && (_jsxs("div", { style: { display: 'flex', gap: '0.5rem', marginTop: '2rem', padding: '0 25px' }, children: [_jsx(ButtonComponent, { onClick: handleSave, cssClass: "e-primary", disabled: Object.keys(choiceMapping).length === 0, "aria-label": l10n.getConstant('save'), children: l10n.getConstant('save') }), _jsx(ButtonComponent, { onClick: handleCancel, cssClass: "e-outline", "aria-label": l10n.getConstant('cancel'), children: l10n.getConstant('cancel') })] }))] }));
-};

package/src/utils/ClipboardHelper.d.ts

@@ -1,26 +0,0 @@
-import type { FormComponent } from '../types/FormSchema';
-/**
- * System clipboard helper for copying/pasting form field configurations
- * Uses navigator.clipboard API for cross-tab and external tool integration
- */
-export declare class ClipboardHelper {
-    private static readonly CLIPBOARD_PREFIX;
-    /**
-     * Copy field configuration to system clipboard as JSON
-     */
-    static copyToClipboard(field: FormComponent): Promise<void>;
-    /**
-     * Read field configuration from system clipboard
-     * Returns null if clipboard doesn't contain valid field data
-     */
-    static readFromClipboard(): Promise<FormComponent | null>;
-    /**
-     * Check if clipboard contains valid form field data
-     */
-    static hasClipboardData(): Promise<boolean>;
-    /**
-     * Generate new unique field with modified ID and name
-     */
-    static createUniqueField(sourceField: FormComponent): FormComponent;
-    static clearData(): Promise<void>;
-}