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

package/src/types/ActionButtons.d.ts

@@ -1,44 +0,0 @@
-import type { FormComponent } from './FormSchema';
-/**
- * Enumeration of available action button types
- */
-export declare const ActionButtonType: {
-    readonly PASTE: "paste";
-    readonly COPY: "copy";
-    readonly DELETE: "delete";
-    readonly SWITCH_WIDGET: "switch_widget";
-};
-export type ActionButtonType = typeof ActionButtonType[keyof typeof ActionButtonType];
-/**
- * System clipboard state for managing copied field configurations
- * Uses navigator.clipboard API for cross-tab compatibility
- */
-export interface ClipboardState {
-    /** Checks if clipboard contains valid field data */
-    hasClipboardData: () => Promise<boolean>;
-    /** Writes field configuration to system clipboard as JSON */
-    copyToClipboard: (field: FormComponent) => Promise<void>;
-    /** Reads field configuration from system clipboard */
-    readFromClipboard: () => Promise<FormComponent | null>;
-}
-/**
- * Collection of callback functions for handling field actions
- */
-export interface FormFieldActionHandlers {
-    /** Opens PropertyDialog with current field values */
-    onEdit: (fieldId: string) => void;
-    /** Stores field in system clipboard as JSON */
-    onCopy: (field: FormComponent) => void;
-    /** Pastes copied field after (next to) target field */
-    onPaste: (targetFieldId: string) => void;
-    /** Removes field from schema */
-    onDelete: (fieldId: string) => void;
-}
-/**
- * Icon CSS classes for action buttons (Syncfusion ej2-icons)
- */
-export declare const ACTION_BUTTON_ICONS: Record<ActionButtonType, string>;
-/**
- * Aria labels for action buttons (accessibility)
- */
-export declare const ACTION_BUTTON_LABELS: Record<ActionButtonType, string>;

package/src/types/ActionButtons.js

@@ -1,27 +0,0 @@
-/**
- * Enumeration of available action button types
- */
-export const ActionButtonType = {
-    PASTE: 'paste',
-    COPY: 'copy',
-    DELETE: 'delete',
-    SWITCH_WIDGET: 'switch_widget'
-};
-/**
- * Icon CSS classes for action buttons (Syncfusion ej2-icons)
- */
-export const ACTION_BUTTON_ICONS = {
-    [ActionButtonType.PASTE]: 'e-icons e-paste',
-    [ActionButtonType.COPY]: 'e-icons e-copy',
-    [ActionButtonType.DELETE]: 'e-icons e-trash',
-    [ActionButtonType.SWITCH_WIDGET]: 'e-icons e-repeat'
-};
-/**
- * Aria labels for action buttons (accessibility)
- */
-export const ACTION_BUTTON_LABELS = {
-    [ActionButtonType.PASTE]: 'Paste copied field after this field',
-    [ActionButtonType.COPY]: 'Copy field configuration to clipboard',
-    [ActionButtonType.DELETE]: 'Delete field',
-    [ActionButtonType.SWITCH_WIDGET]: 'Switch widget type'
-};

package/src/types/ComponentProperties.d.ts

@@ -1,33 +0,0 @@
-export interface PropertyDefinition {
-    name: string;
-    key: string;
-    label: string;
-    type: 'text' | 'number' | 'boolean' | 'dropdown' | 'object' | 'lookupconfig' | 'conditionBuilder' | 'expression' | 'customValidation' | 'multiselect' | 'radio' | 'minMaxEditor' | 'options' | 'day' | 'time' | 'datetime' | 'attributes' | 'array' | 'daterange' | 'color' | 'datagridcolumns' | 'json' | 'buttonGroup' | 'html' | 'columnspaneditor' | 'switch' | 'URLImport';
-    default: any;
-    required?: boolean;
-    placeholder?: string;
-    editorMode?: 'date' | 'number' | 'time';
-    length?: number;
-    description?: string;
-    options?: string[];
-    min?: number;
-    max?: number;
-    step?: number;
-    componentType?: string;
-}
-export interface PropertyGroup {
-    name: string;
-    properties: PropertyDefinition[];
-}
-export interface ComponentDefinition {
-    type: string;
-    displayName: string;
-    category: string;
-    groups: PropertyGroup[];
-}
-export interface ComponentsConfig {
-    [key: string]: ComponentDefinition;
-}
-export interface PropertyValues {
-    [key: string]: any;
-}

package/src/types/ComponentProperties.js

@@ -1,2 +0,0 @@
-// Type definitions for component property configuration
-export {};

package/src/types/FormSchema.d.ts

@@ -1,585 +0,0 @@
-import type { visualMode } from "@syncfusion/ej2-react-dropdowns";
-import type { RuleModel } from "@syncfusion/ej2-react-querybuilder";
-import type { LayoutNode, FieldProperties } from "../../Common/json-converter";
-/**
- * Represents a pre-defined form template that can be loaded into the Form Builder.
- * Templates can be used to create custom components and frequently used form element structures.
- */
-export interface DefaultTemplates {
-    /** Specifies the unique identifier for the template */
-    id: string;
-    /** Specifies the display title shown in the template palette */
-    title: string;
-    /** Specifies the JSON schema payload of the template */
-    schema?: any;
-}
-/**
- * Represents the category of components in the Form Builder
- * @private
- */
-export declare enum ComponentCategory {
-    /**
-     * Specifies the basic set of form components in the Form Builder
-     */
-    BASIC = "basic",
-    /**
-     * Specifies the advanced set of form components in the Form Builder
-     */
-    ADVANCED = "advanced",
-    /**
-     * Specifies the layout components in the Form Builder
-     */
-    LAYOUT = "layout"
-}
-/**
- * Represents the components supported in the Form Builder.
- */
-export declare enum FormComponentType {
-    /**
-     * Specifies the text box component.
-     */
-    TEXTBOX = "textbox",
-    /**
-     * Specifies the text area component.
-     */
-    TEXTAREA = "textarea",
-    /**
-     * Specifies the check box component.
-     */
-    CHECKBOX = "checkbox",
-    /**
-     * Specifies the radio button component.
-     */
-    RADIO = "radio",
-    /**
-     * Specifies the numeric text box component.
-     */
-    NUMBER = "number",
-    /**
-     * Specifies the masked text box component.
-     */
-    INPUT_MASK = "inputMask",
-    /**
-     * Specifies the dropdown list component.
-     */
-    DROPDOWN = "dropdown",
-    /**
-     * Specifies the date picker component.
-     */
-    DATE = "date",
-    /**
-     * Specifies the button component.
-     */
-    BUTTON = "button",
-    /**
-     * Specifies the check box component for multiple choice selection.
-     */
-    CHECKBOX_GROUP = "checkboxGroup",
-    /**
-     * Specifies the multiselect component for multiple choice selection.
-     */
-    MULTISELECT = "multiselect",
-    /**
-     * Specifies the date time picker component.
-     */
-    DATE_TIME = "dateTime",
-    /**
-     * Specifies the time picker component.
-     */
-    TIME = "time",
-    /**
-     * Specifies the date range picker component.
-     */
-    DATE_RANGE = "dateRange",
-    /**
-     * Specifies the switch component.
-     */
-    SWITCH = "switch",
-    /**
-     * Specifies the rating component.
-     */
-    RATING = "rating",
-    /**
-     * Specifies the splitbutton component.
-     */
-    SPLIT_BUTTON = "splitButton",
-    /**
-     * Specifies the range slider component.
-     */
-    RANGE_SLIDER = "rangeSlider",
-    /**
-     * Specifies the signature component.
-     */
-    SIGNATURE = "signature",
-    /**
-     * Specifies the image editor component.
-     */
-    IMAGE_EDITOR = "imageEditor",
-    /**
-     * Specifies the file upload component.
-     */
-    FILE_UPLOAD = "fileUpload",
-    COLOR_PICKER = "colorPicker",
-    /**
-     * Specifies the rich text editor component.
-     */
-    RICH_TEXT_EDITOR = "richTextEditor",
-    /**
-     * Specifies the data grid component.
-     */
-    DATA_GRID = "dataGrid",
-    /**
-     * Specifies the message component.
-     */
-    MESSAGE = "message",
-    /**
-     * Specifies the panel element for layouting.
-     */
-    PANEL = "panel",
-    /**
-     * Specifies the table element for layouting.
-     */
-    TABLE = "table",
-    /**
-     * Specifies the tab component for layouting.
-     */
-    TABS = "tabs",
-    /**
-     * Specifies the card element for layouting.
-     */
-    CARD = "card",
-    /**
-     * Specifies the lookup component for associating the data from other forms in the current form.
-     */
-    LOOKUP = "lookup",
-    /**
-     * Specifies the HTML element that can be rendered in the form.
-     */
-    STATIC_HTML = "staticHtml",
-    AUTO_NUMBER = "autoNumber"
-}
-/**
- * @private
- */
-export interface PaletteComponent {
-    /** The type identifier of the component (e.g., 'textbox', 'dropdown') */
-    type: string;
-    /** Display label shown in the palette UI */
-    label: string;
-    /** Optional CSS icon class for the component representation in the palette */
-    icon?: string;
-    /** Category grouping for the palette ('basic', 'layout', 'advanced', 'data', or 'templates') */
-    category?: 'basic' | 'layout' | 'advanced' | 'data' | 'templates';
-    /** Indicates if this palette item is a pre-defined template */
-    isTemplate?: boolean;
-    /** Template data associated with the item, if `isTemplate` is true */
-    templateData?: DefaultTemplates;
-}
-/**
- * Minimal representation of a palette item, containing only the component type.
- * @private
- */
-export type PaletteItem = Pick<PaletteComponent, 'type'>;
-/**
- * Palette configuration - allows users to control which components appear in each category
- * @private
- */
-export interface PaletteConfig {
-    /** List of basic components to display in the palette */
-    [ComponentCategory.BASIC]?: PaletteItem[];
-    /** List of advanced components to display in the palette */
-    [ComponentCategory.ADVANCED]?: PaletteItem[];
-    /** List of layout components to display in the palette */
-    [ComponentCategory.LAYOUT]?: PaletteItem[];
-}
-/**
- * @private
- */
-export type ConditionalOperator = 'equal' | 'notEqual' | 'greaterThan' | 'lessThan' | 'greaterThanOrEqual' | 'lessThanOrEqual' | 'in' | 'notIn' | 'contains' | 'notContains';
-/**
- * @private
- */
-export interface ConditionalRule {
-    field: string;
-    operator: ConditionalOperator;
-    value: any;
-}
-/**
- * @private
- */
-export interface CompositeConditionalRule {
-    condition: 'and' | 'or';
-    rules: (ConditionalRule | CompositeConditionalRule)[];
-}
-/**
- * @private
- */
-export type ConditionType = ConditionalRule | CompositeConditionalRule;
-/**
- * @private
- */
-export interface DataSourceCollectorProps {
-    value: string[] | {
-        type: 'url' | 'raw' | 'options' | 'lookup';
-        url?: string;
-        headers?: HeaderPair[];
-        data?: string[];
-        search?: SearchConfig;
-        sort?: SortConfig;
-        filters?: FilterConfig[];
-        adaptorType?: string;
-        take?: number;
-        skip?: number;
-        dataPath?: string;
-        formName?: any;
-    };
-    onChange: (data: string[] | any) => void;
-    type?: string;
-    datakey?: string;
-    isAccordion?: boolean;
-}
-/**
- * @private
- */
-export interface HeaderPair {
-    key: string;
-    value: string;
-}
-/**
- * @private
- */
-export interface SearchConfig {
-    enabled: boolean;
-    fields: string[];
-    key?: string;
-}
-/**
- * @private
- */
-export interface SortConfig {
-    enabled: boolean;
-    field: string;
-    direction: 'ascending' | 'descending';
-}
-/**
- * @private
- */
-export interface FilterConfig {
-    field: string;
-    operator: string;
-    value: any;
-}
-/**
- * @private
- */
-export interface ChoiceBasedFieldRule {
-    primaryFieldId: string;
-    choiceMapping: Record<string, string[]>;
-    showAllWhenNotMapped?: boolean;
-}
-/**
- * @private
- */
-export interface ConditionalDataRule {
-    condition: ConditionType;
-    dataSource: DataSourceCollectorProps['value'];
-    columns?: GridColumn[];
-    includeColumns?: boolean;
-}
-/**
- * @private
- */
-export interface FormComponentConditions {
-    visibleWhen?: ConditionType;
-    hideWhen?: ConditionType;
-    readOnlyWhen?: ConditionType;
-    disabledWhen?: ConditionType;
-    requiredWhen?: ConditionType;
-    setValueWhen?: {
-        condition: ConditionType;
-        value: any;
-    };
-    choiceBasedField?: ChoiceBasedFieldRule;
-    conditionalData?: ConditionalDataRule[];
-}
-/**
- * @private
- */
-export interface MinMaxRangeConfig {
-    minMode?: 'value' | 'field';
-    minValue?: number | string | {
-        field: string;
-    };
-    maxMode?: 'value' | 'field';
-    maxValue?: number | string | {
-        field: string;
-    };
-}
-/**
- * @private
- */
-export interface LookupConfig {
-    formName: string;
-    field: string;
-}
-/**
- * @private
- */
-export interface CustomValidationRule {
-    condition?: RuleModel;
-    expression: string;
-}
-/**
- * @private
- */
-export interface FormComponent {
-    id: string;
-    type: 'textbox' | 'textarea' | 'number' | 'checkbox' | 'checkboxGroup' | 'radio' | 'dropdown' | 'multiselect' | 'button' | 'date' | 'dateTime' | 'time' | 'dateRange' | 'switch' | 'signature' | 'rating' | 'imageEditor' | 'fileUpload' | 'rangeSlider' | 'colorPicker' | 'inputMask' | 'message' | 'panel' | 'table' | 'tabs' | 'dataGrid' | 'staticHtml' | 'card' | 'splitButton' | 'richTextEditor' | 'autoNumber' | 'lookup';
-    textboxType?: string;
-    label: string;
-    name: string;
-    description?: string | undefined;
-    prefix?: string | undefined;
-    suffix?: string | undefined;
-    hideBorders?: boolean;
-    placeholder?: string;
-    defaultValue?: any;
-    disabled?: boolean;
-    visible?: boolean;
-    tooltip?: string;
-    hideLabel?: boolean;
-    cssClass?: string;
-    multiline?: boolean;
-    showClearButton?: boolean;
-    showCloseIcon?: boolean;
-    showIcon?: boolean;
-    variant?: string;
-    severity?: string;
-    content?: string;
-    showTodayButton?: boolean;
-    htmlAttributes?: Record<string, any>;
-    labelPosition?: 'top' | 'bottom' | 'left' | 'right';
-    position?: 'center' | 'left' | 'right';
-    fieldLabelPosition?: 'After' | 'Before';
-    labelWidth?: string;
-    floatLabelType?: 'Never' | 'Always' | 'Auto';
-    readOnly?: boolean;
-    autocomplete?: boolean;
-    cols?: number;
-    textareaRows?: number;
-    checked?: boolean;
-    indeterminate?: boolean;
-    enableHtmlSanitizer?: boolean;
-    offLabel?: string;
-    onLabel?: string;
-    buttonType?: 'button' | 'submit';
-    iconCss?: string;
-    iconPosition?: 'Left' | 'Right';
-    style?: string;
-    buttonsGroups?: ButtonDefinition[] | [];
-    gap?: string;
-    decimals?: number;
-    currency?: string;
-    format?: string;
-    numberFormat?: string;
-    allowReset?: boolean;
-    itemsCount?: number;
-    precision?: number | string;
-    showRatingTooltip?: boolean;
-    showRatingLabel?: boolean;
-    ratingLabelPosition?: 'top' | 'bottom' | 'left' | 'right';
-    height?: string | number;
-    width?: string | number;
-    backgroundColor?: string;
-    strokeColor?: string;
-    maximumStrokeWidth?: number;
-    minimumStrokeWidth?: number;
-    velocity?: number;
-    enableOpacity?: boolean;
-    showNoColor?: boolean;
-    showButtons?: boolean;
-    showRecentColors?: boolean;
-    orientation?: 'Horizontal' | 'Vertical';
-    allowExtensions?: string;
-    saveUrl?: string;
-    removeUrl?: string;
-    buttons?: {};
-    allowMultiple?: boolean;
-    showFileList?: boolean;
-    calendarMode?: string;
-    dayHeaderFormat?: string;
-    depth?: string;
-    firstDayOfWeek?: number;
-    start?: string;
-    allowEdit?: boolean;
-    enabled?: boolean;
-    timeFormat?: string;
-    step?: number;
-    startDate?: string;
-    endDate?: string;
-    separator?: string;
-    mask?: string;
-    customCharacters?: Record<string, string>;
-    promptChar?: string;
-    allowCustomValue?: boolean;
-    addTagOnBlur?: boolean;
-    delimiterChar?: string;
-    visualMode?: visualMode;
-    showSelectAll?: boolean;
-    selectAllText?: string;
-    unSelectAllText?: string;
-    showDropDownIcon?: boolean;
-    validateOn?: 'Change' | 'Blur';
-    pageSize?: number;
-    size?: string;
-    allowPaging?: boolean;
-    allowAdding?: boolean;
-    allowEditing?: boolean;
-    allowFiltering?: boolean;
-    allowDeleting?: boolean;
-    dataSource?: [];
-    required?: boolean;
-    minLength?: number;
-    maxLength?: number;
-    min?: number;
-    max?: number;
-    minDate?: string;
-    maxDate?: string;
-    minValue?: number;
-    maxValue?: number;
-    minMaxRange?: MinMaxRangeConfig;
-    minMaxTimeRange?: MinMaxRangeConfig;
-    minTime?: string;
-    maxTime?: string;
-    regex?: RegExp;
-    validationMessage?: string;
-    options?: string[];
-    checkboxLabelPosition?: 'Before' | 'After';
-    layoutDirection?: 'row' | 'column';
-    tabOptions?: string[];
-    fields?: Record<string, any>;
-    enableVirtualization?: boolean;
-    popupHeight?: string;
-    popupWidth?: string;
-    children?: FormComponent[];
-    rows?: number;
-    columns?: number;
-    messageType?: 'info' | 'success' | 'warning' | 'error';
-    messageContent?: string;
-    legend?: string;
-    cardTitle?: string;
-    cardSubtitle?: string;
-    tabItems?: Array<{
-        header: string;
-        content?: FormComponent[];
-    }>;
-    tableCells?: FormComponent[][][];
-    columnWidths?: {
-        widths: number[];
-    };
-    lookUpConfig?: LookupConfig;
-    enableImportFromWord?: {
-        enabled: boolean;
-        serviceUrl: string;
-    };
-    enableExportToWord?: {
-        enabled: boolean;
-        serviceUrl: string;
-    };
-    enableExportToPdf?: {
-        enabled: boolean;
-        serviceUrl: string;
-    };
-    parentPath?: string;
-    startIndex?: number;
-    conditions?: FormComponentConditions;
-    properties?: Record<string, any>;
-    expressionValue?: string;
-    customValidation?: CustomValidationRule[];
-    _configured?: boolean;
-}
-/**
- * @private
- */
-export interface GridColumn {
-    field: string;
-    headerText: string;
-    type?: 'string' | 'number' | 'date' | 'boolean';
-    isPrimaryKey?: boolean;
-    allowEditing?: boolean;
-    width?: string | number;
-    textAlign?: 'Left' | 'Right' | 'Center';
-    format?: string;
-    editType?: 'textbox' | 'numericedit' | 'datepickeredit' | 'dropdownedit' | 'checkbox' | 'booleanedit';
-    edit?: {
-        params?: Record<string, any>;
-    };
-    validationRules?: {
-        required?: boolean;
-        min?: number;
-        max?: number;
-        minLength?: number;
-        maxLength?: number;
-    };
-    expression?: string;
-    customValidation?: CustomValidationRule[];
-}
-/**
- * @private
- */
-export interface GridComponentSchema extends Omit<FormComponent, 'columns' | 'dataSource' | 'selectionType'> {
-    type: 'dataGrid';
-    columns: GridColumn[];
-    dataSource?: Record<string, any>[];
-    allowPaging?: boolean;
-    pageSize?: number;
-    height?: string | number;
-    width?: string | number;
-    allowAdding?: boolean;
-    allowEditing?: boolean;
-    allowDeleting?: boolean;
-    locale?: string;
-    toolbar?: ('Add' | 'Edit' | 'Delete' | 'Update' | 'Cancel' | 'Search')[];
-    _currentData?: Record<string, any>[];
-}
-/**
- * @private
- */
-export interface FormSettings {
-    name?: string;
-    width?: string;
-    validate?: boolean;
-    hideLabel?: boolean;
-    size?: string;
-    floatLabelType?: string;
-}
-/**
- * Represents the JSON schema format that is used to render in the Form Renderer and exported from the Form Builder components.
- */
-export interface Schema {
-    /** Represents the version of the schema  (e.g., '0.1.0') */
-    version: string;
-    properties: Record<string, FieldProperties>;
-    theme?: string;
-    layout: LayoutNode[];
-    settings?: any;
-}
-/**
- * @private
- */
-export interface FormSchema {
-    version: string;
-    components: FormComponent[];
-    settings?: FormSettings;
-}
-/**
- * @private
- */
-export interface ButtonDefinition {
-    label: string;
-    type?: 'submit' | 'reset' | 'button';
-    style?: 'primary' | 'flat' | 'information' | 'error' | 'success' | 'warning';
-    iconCss?: string;
-    iconPosition?: 'Left' | 'Right';
-    disabled?: boolean;
-}