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

package/src/types/FormSchema.js

@@ -0,0 +1,147 @@
+/**
+ * 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

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

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

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

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

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

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

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

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

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