@syncfusion/ej2-form-renderer 34.2.2

package/dist/global/index.d.ts

@@ -0,0 +1,14 @@
+/*!
+*  filename: index.d.ts
+*  version : 34.2.2
+*  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
+*  Use of this code is subject to the terms of our license.
+*  A copy of the current license can be obtained at any time by e-mailing
+*  licensing@syncfusion.com. Any infringement will be prosecuted under
+*  applicable laws. 
+*/
+import * as _formrenderer from '@syncfusion/ej2-form-renderer';
+
+export declare namespace ej {
+    const formrenderer: typeof _formrenderer;
+}

package/form-renderer.d.ts

@@ -0,0 +1,4 @@
+/**
+ * form-renderer
+ */
+export * from './src/form-renderer/index';

package/form-renderer.js

@@ -0,0 +1,4 @@
+/**
+ * form-renderer
+ */
+export * from './src/form-renderer/index';

package/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * index
+ */
+export * from './src/index';

package/index.js

@@ -0,0 +1,4 @@
+/**
+ * index
+ */
+export * from './src/index';

package/license

@@ -0,0 +1,10 @@
+Essential JS 2 library is available under the Syncfusion Essential Studio program,  and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
+
+To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions. 
+
+Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
+
+Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions. 
+
+The Syncfusion license that contains the terms and conditions can be found at 
+https://www.syncfusion.com/content/downloads/syncfusion_license.pdf

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@syncfusion/ej2-form-renderer",
+  "version": "34.2.2",
+  "description": "A package of Essential JS 2 Form Renderer which can render feature-rich Syncfusion components as a form.",
+  "author": "Syncfusion Inc.",
+  "license": "SEE LICENSE IN license",
+  "main": "./dist/ej2-form-renderer.umd.min.js",
+  "module": "./index.js",
+  "es2015": "./dist/es6/ej2-form-renderer.es5.js",
+  "dependencies": {
+    "@syncfusion/ej2-buttons": "~34.2.2",
+    "@syncfusion/ej2-calendars": "~34.2.2",
+    "@syncfusion/ej2-dropdowns": "~34.2.2",
+    "@syncfusion/ej2-grids": "~34.2.2",
+    "@syncfusion/ej2-image-editor": "~34.2.2",
+    "@syncfusion/ej2-inputs": "~34.2.2",
+    "@syncfusion/ej2-navigations": "~34.2.2",
+    "@syncfusion/ej2-notifications": "~34.2.2",
+    "@syncfusion/ej2-richtexteditor": "~34.2.2",
+    "@syncfusion/ej2-splitbuttons": "~34.2.2"
+  },
+  "devDependencies": {},
+  "keywords": [
+    "syncfusion",
+    "ej2",
+    "react",
+    "form",
+    "form-renderer",
+    "dynamic-forms",
+    "json-forms",
+    "schema-forms",
+    "ui-components"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/syncfusion/ej2-javascript-ui-controls.git"
+  },
+  "typings": "index.d.ts",
+  "sideEffects": false,
+  "homepage": "https://www.syncfusion.com/javascript-ui-controls"
+}

package/src/common/checkbox-group.d.ts

@@ -0,0 +1,55 @@
+import { FormNode } from '../form-renderer/types/form-schema';
+/**
+ * @private
+ * Options for `CheckboxGroup`.
+ */
+export interface CheckboxGroupOptions {
+    component: FormNode;
+    formState?: any;
+    value?: string[];
+    onChange?: (value: string[]) => void;
+    optionRef?: (el: any, idx?: number) => void;
+    enableRtl?: boolean;
+    target?: HTMLElement;
+    ref?: any;
+}
+/**
+ * @private
+ */
+export declare class CheckboxGroup {
+    private component;
+    private formState;
+    private onChangeCb;
+    private optionRef;
+    private enableRtl;
+    private target;
+    private container;
+    private itemsContainer;
+    private checkboxes;
+    private ref;
+    constructor(options: CheckboxGroupOptions);
+    private getSelectedItems;
+    private valueProp;
+    /** Used in non-formState mode to seed the initial value. */
+    setValue(value: string[]): void;
+    private handleCheckboxChange;
+    /**
+     * Compose the size CSS class for the CheckBox.
+     */
+    private readonly sizeCssClass;
+    /**
+     * Build and append the group DOM tree. Returns the container element.
+     */
+    render(target?: HTMLElement): HTMLElement;
+    /**
+     * Re-render the selection state from the current model value. Used by
+     * the host after a programmatic value change.
+     */
+    refreshSelection(): void;
+    /**
+     * Destroy all child EJ2 instances and detach the container.
+     */
+    destroy(): void;
+    setOptions(options: any[]): void;
+}
+export default CheckboxGroup;

package/src/common/checkbox-group.js

@@ -0,0 +1,241 @@
+import { CheckBox } from '@syncfusion/ej2-buttons';
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
+/**
+ * @private
+ */
+var resolveAttributes = function (attributes) {
+    if (!attributes) {
+        return {};
+    }
+    if (Array.isArray(attributes)) {
+        return attributes.reduce(function (acc, item) {
+            if (item && item.key && item.value !== undefined) {
+                acc[item.key] = item.value;
+            }
+            return acc;
+        }, {});
+    }
+    return attributes;
+};
+/**
+ * @private
+ */
+var CheckboxGroup = /** @class */ (function () {
+    function CheckboxGroup(options) {
+        this.checkboxes = [];
+        this.component = options.component;
+        this.formState = options.formState;
+        this.onChangeCb = options.onChange;
+        this.optionRef = options.optionRef;
+        this.enableRtl = options.enableRtl;
+        this.target = options.target;
+        this.container = null;
+        this.itemsContainer = null;
+        this.ref = options.ref;
+    }
+    CheckboxGroup.prototype.getSelectedItems = function () {
+        var resolvedValue = (this.formState
+            ? this.formState.values[this.component.id]
+            : (isNullOrUndefined(this.valueProp()) ? this.component.defaultValue : this.valueProp()));
+        return Array.isArray(resolvedValue) ? resolvedValue : [];
+    };
+    CheckboxGroup.prototype.valueProp = function () {
+        // Used only when `formState` is absent — read the `value` option.
+        return this._value;
+    };
+    /** Used in non-formState mode to seed the initial value. */
+    CheckboxGroup.prototype.setValue = function (value) {
+        this._value = value;
+    };
+    CheckboxGroup.prototype.handleCheckboxChange = function (option, checked) {
+        var selectedItems = this.getSelectedItems();
+        var newValue = checked
+            ? selectedItems.concat([option]) : selectedItems.filter(function (i) { return i !== option; });
+        if (this.formState) {
+            this.onChangeCb(newValue);
+        }
+    };
+    Object.defineProperty(CheckboxGroup.prototype, "sizeCssClass", {
+        /**
+         * Compose the size CSS class for the CheckBox.
+         */
+        get: function () {
+            var base = this.component.cssClass || '';
+            var sizeMod = this.component.size === 'Small'
+                ? ' e-small'
+                : this.component.size === 'Bigger'
+                    ? ' e-bigger'
+                    : '';
+            return "" + base + sizeMod;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * Build and append the group DOM tree. Returns the container element.
+     */
+    CheckboxGroup.prototype.render = function (target) {
+        var _this = this;
+        var component = this.component;
+        var groupLabel = component.label && component.required
+            ? component.label + " *"
+            : (component.label || '');
+        var host = target || this.target;
+        // Outer container
+        var container = document.createElement('div');
+        container.className = ("checkbox-group " + (component.cssClass || '')).trim();
+        container.setAttribute('role', 'group');
+        container.setAttribute('aria-label', groupLabel);
+        container.title = component.tooltip || '';
+        var htmlAttrs = resolveAttributes(component.htmlAttributes);
+        Object.keys(htmlAttrs).forEach(function (key) {
+            // Apply additional htmlAttributes to the container (matches spread).
+            if (key !== 'class' && key !== 'className' && key !== 'style') {
+                container.setAttribute(key, String(htmlAttrs[key]));
+            }
+        });
+        var containerStyle = "display:flex;flex-direction:" + (component.layoutDirection === 'row' ? 'row' : 'column') + ";" +
+            ("gap:" + (component.gap || '8px') + ";align-items:flex-start;");
+        container.setAttribute('style', containerStyle);
+        // Items container
+        var itemsContainer = document.createElement('div');
+        itemsContainer.className = 'checkbox-group-items';
+        var itemsStyle = "display:flex;flex-direction:" + (component.layoutDirection === 'row' ? 'row' : 'column') + ";" +
+            ("flex-wrap:wrap;gap:" + (component.gap || '2px') + ";width:100%;");
+        itemsContainer.setAttribute('style', itemsStyle);
+        var options = Array.isArray(component.options) ? component.options : ['Option 1'];
+        var selectedItems = this.getSelectedItems();
+        options.forEach(function (option, idx) {
+            var optionValue = typeof option === 'string'
+                ? option
+                : (option.value != null ? option.value : (option.label != null ? option.label : option.key));
+            var optionLabel = typeof option === 'string'
+                ? option
+                : (option.label != null ? option.label : (option.value != null ? option.value : String(optionValue)));
+            var wrapper = document.createElement('div');
+            itemsContainer.appendChild(wrapper);
+            var checkBox = new CheckBox({
+                label: optionLabel,
+                enableRtl: _this.enableRtl,
+                checked: selectedItems.indexOf(optionValue) !== -1,
+                disabled: !!component.disabled,
+                labelPosition: component.checkboxLabelPosition || 'After',
+                cssClass: _this.sizeCssClass.trim(),
+                htmlAttributes: htmlAttrs,
+                change: function (e) {
+                    _this.handleCheckboxChange(optionValue, e.checked);
+                }
+            });
+            checkBox.appendTo(wrapper);
+            _this.ref(checkBox, idx);
+            // Set the id mirroring `${component.id}_${idx}` after appendTo so
+            // EJ2 preserves the wrapper id semantics.
+            var inputEl = wrapper.querySelector('input[type="checkbox"]');
+            if (inputEl) {
+                inputEl.id = _this.component.id + "_" + idx;
+            }
+            // Ref callback — provide the EJ2 instance + index.
+            if (_this.optionRef) {
+                _this.optionRef(checkBox, idx);
+            }
+            _this.checkboxes.push(checkBox);
+        });
+        container.appendChild(itemsContainer);
+        if (host) {
+            host.appendChild(container);
+        }
+        this.container = container;
+        this.itemsContainer = itemsContainer;
+        return container;
+    };
+    /**
+     * Re-render the selection state from the current model value. Used by
+     * the host after a programmatic value change.
+     */
+    CheckboxGroup.prototype.refreshSelection = function () {
+        var _this = this;
+        var selectedItems = this.getSelectedItems();
+        var options = Array.isArray(this.component.options) ? this.component.options : ['Option 1'];
+        options.forEach(function (option, idx) {
+            var optionValue = typeof option === 'string'
+                ? option
+                : (option.value != null ? option.value : (option.label != null ? option.label : option.key));
+            var checkBox = _this.checkboxes[idx];
+            if (checkBox) {
+                checkBox.checked = selectedItems.indexOf(optionValue) !== -1;
+            }
+        });
+    };
+    /**
+     * Destroy all child EJ2 instances and detach the container.
+     */
+    CheckboxGroup.prototype.destroy = function () {
+        for (var _i = 0, _a = this.checkboxes; _i < _a.length; _i++) {
+            var cb = _a[_i];
+            try {
+                cb.destroy();
+            }
+            catch (e) { /* ignore */ }
+        }
+        this.checkboxes = [];
+        if (this.container && this.container.parentNode) {
+            this.container.parentNode.removeChild(this.container);
+        }
+        this.container = null;
+        this.itemsContainer = null;
+    };
+    CheckboxGroup.prototype.setOptions = function (options) {
+        var _this = this;
+        this.component.options = options;
+        if (!this.itemsContainer) {
+            return;
+        }
+        for (var _i = 0, _a = this.checkboxes; _i < _a.length; _i++) {
+            var cb = _a[_i];
+            try {
+                cb.destroy();
+            }
+            catch (_b) {
+            }
+        }
+        this.checkboxes = [];
+        while (this.itemsContainer.firstChild) {
+            this.itemsContainer.removeChild(this.itemsContainer.firstChild);
+        }
+        var selectedItems = this.getSelectedItems();
+        options.forEach(function (option, idx) {
+            var optionValue = typeof option === 'string'
+                ? option
+                : (option.value || option.label || option.key);
+            var optionLabel = typeof option === 'string'
+                ? option
+                : (option.label || option.value || String(optionValue));
+            var wrapper = document.createElement('div');
+            _this.itemsContainer.appendChild(wrapper);
+            var checkBox = new CheckBox({
+                label: optionLabel,
+                enableRtl: _this.enableRtl,
+                checked: selectedItems.indexOf(optionValue) !== -1,
+                disabled: !!_this.component.disabled,
+                labelPosition: _this.component.checkboxLabelPosition || 'After',
+                cssClass: _this.sizeCssClass.trim(),
+                change: function (e) {
+                    _this.handleCheckboxChange(optionValue, e.checked);
+                }
+            });
+            checkBox.appendTo(wrapper);
+            _this.ref(checkBox, idx);
+            var inputEl = wrapper.querySelector('input[type="checkbox"]');
+            if (inputEl) {
+                inputEl.id = _this.component.id + "_" + idx;
+            }
+            if (_this.optionRef) {
+                _this.optionRef(checkBox, idx);
+            }
+            _this.checkboxes.push(checkBox);
+        });
+    };
+    return CheckboxGroup;
+}());
+export { CheckboxGroup };
+export default CheckboxGroup;

package/src/common/conditional-rule-engine.d.ts

@@ -0,0 +1,241 @@
+import { ConditionType, ConditionRule, ConditionalDataRule, ChoiceBasedFieldRule } from '../form-renderer/types/form-schema';
+/**
+ * Form field value type (aligned with FormValidator)
+ *
+ * @private
+ */
+export declare type FormValueType = string | number | boolean | Date | bigint | symbol | File | FileList | string[] | number[] | any | null | undefined;
+/**
+ * ConditionalRuleEngine class
+ * @private
+ */
+export declare class ConditionalRuleEngine {
+    /**
+     * Evaluate a conditional rule against form values
+     *
+     * Handles both simple rules (field operator value) and composite rules (AND/OR).
+     * Returns false for malformed rules.
+     *
+     * @param rule - ConditionalRule or CompositeConditionalRule
+     * @param formValues - Current form field values (key = field name, value = field value)
+     * @returns true if condition met, false otherwise
+     * @private
+     * @example
+     * ```typescript
+     * const rule = { field: 'age', operator: 'greaterThan', value: 18 };
+     * const isAdult = ConditionalRuleEngine.evaluateCondition(rule, { age: 25 });
+     * // isAdult = true
+     * ```
+     */
+    static evaluateCondition(rule: ConditionType, formValues: Record<string, FormValueType>): boolean;
+    /**
+     * Evaluate simple field comparison rule
+     *
+     * Supports operators: equal, notEqual, greaterThan, lessThan, greaterThanOrEqual,
+     * lessThanOrEqual, in, notIn, contains, notContains.
+     *
+     * Handles both camelCase (greaterThan) and lowercase (greaterthan) operator formats
+     * for compatibility with QueryBuilder output.
+     *
+     * @param rule - Simple conditional rule with field, operator, value
+     * @param formValues - Current form field values
+     * @returns true if comparison is true, false otherwise
+     *
+     * @example
+     * ```typescript
+     * const rule = { field: 'email', operator: 'contains', value: '@' };
+     * const hasAt = evaluateSimpleRule(rule, { email: 'test@example.com' });
+     * // hasAt = true
+     * ```
+     */
+    private static evaluateSimpleRule;
+    /**
+     * Evaluate composite rule with AND/OR logic
+     *
+     * Recursively evaluates nested rules with AND (all must be true) or OR
+     * (at least one must be true) logic.
+     *
+     * @param rule - Composite rule with condition ('and'|'or') and rules array
+     * @param formValues - Current form field values
+     * @returns true if composite condition met, false otherwise
+     *
+     * @example
+     * ```typescript
+     * const rule = {
+     *   condition: 'and',
+     *   rules: [
+     *     { field: 'age', operator: 'greaterThan', value: 18 },
+     *     { field: 'country', operator: 'equal', value: 'US' }
+     *   ]
+     * };
+     * const isEligible = evaluateCompositeRule(rule, { age: 25, country: 'US' });
+     * // isEligible = true
+     * ```
+     */
+    private static evaluateCompositeRule;
+    /**
+     * Check if field should be visible
+     *
+     * Evaluates visibleWhen condition. Defaults to true (visible) if no condition
+     * is defined or on error.
+     *
+     * @param conditions - FormComponentConditions containing visibleWhen rule
+     * @param formValues - Current form field values
+     * @returns true if field should be visible, false if hidden
+     *
+     * @example
+     * ```typescript
+     * const conditions = {
+     *   visibleWhen: { field: 'showEmail', operator: 'equal', value: true }
+     * };
+     * const visible = isFieldVisible(conditions, { showEmail: true });
+     * // visible = true
+     * ```
+     */
+    static isFieldVisible(conditions: ConditionRule | undefined, formValues: Record<string, FormValueType>): boolean;
+    /**
+     * Check if field should be read-only
+     *
+     * Evaluates readOnlyWhen condition. Defaults to false (editable) if no
+     * condition is defined or on error.
+     *
+     * @param conditions - FormComponentConditions containing readOnlyWhen rule
+     * @param formValues - Current form field values
+     * @returns true if field should be read-only, false if editable
+     *
+     * @example
+     * ```typescript
+     * const conditions = {
+     *   readOnlyWhen: { field: 'isVerified', operator: 'equal', value: true }
+     * };
+     * const readOnly = isFieldReadOnly(conditions, { isVerified: true });
+     * // readOnly = true
+     * ```
+     */
+    static isFieldReadOnly(conditions: ConditionRule | undefined, formValues: Record<string, FormValueType>): boolean;
+    /**
+     * Check if field should be disabled
+     *
+     * Evaluates disabledWhen condition. Defaults to false (enabled) if no
+     * condition is defined or on error.
+     *
+     * @param conditions - FormComponentConditions containing disabledWhen rule
+     * @param formValues - Current form field values
+     * @returns true if field should be disabled, false if enabled
+     *
+     * @example
+     * ```typescript
+     * const conditions = {
+     *   disabledWhen: { field: 'orderStatus', operator: 'equal', value: 'completed' }
+     * };
+     * const disabled = isFieldDisabled(conditions, { orderStatus: 'completed' });
+     * // disabled = true
+     * ```
+     */
+    static isFieldDisabled(conditions: ConditionRule | undefined, formValues: Record<string, FormValueType>): boolean;
+    /**
+     * Check if field should be hidden
+     *
+     * Evaluates hideWhen condition. Defaults to false (visible) if no condition
+     * is defined or on error.
+     *
+     * @param conditions - FormComponentConditions containing hideWhen rule
+     * @param formValues - Current form field values
+     * @returns true if field should be hidden, false if visible
+     *
+     * @example
+     * ```typescript
+     * const conditions = {
+     *   hideWhen: { field: 'hideEmail', operator: 'equal', value: true }
+     * };
+     * const hidden = isFieldHidden(conditions, { hideEmail: true });
+     * // hidden = true
+     * ```
+     */
+    static isFieldHidden(conditions: ConditionRule | undefined, formValues: Record<string, FormValueType>): boolean;
+    /**
+     * Check if field should be required
+     *
+     * Evaluates requiredWhen condition. Defaults to false (not required) if no condition
+     * is defined or on error.
+     *
+     * @param conditions - FormComponentConditions containing requiredWhen rule
+     * @param formValues - Current form field values
+     * @returns true if field should be required, false if optional
+     *
+     * @example
+     * ```typescript
+     * const conditions = {
+     *   requiredWhen: { field: 'requireDetails', operator: 'equal', value: true }
+     * };
+     * const required = isFieldRequired(conditions, { requireDetails: true });
+     * // required = true
+     * ```
+     */
+    static isFieldRequired(conditions: ConditionRule | undefined, formValues: Record<string, FormValueType>): boolean;
+    /**
+     * Get value to set for field if condition is met
+     *
+     * Evaluates setValueWhen condition and returns the value to assign if true.
+     * Returns undefined if no condition is defined, condition not met, or on error.
+     *
+     * @param conditions - FormComponentConditions containing setValueWhen rule
+     * @param formValues - Current form field values
+     * @returns The value to set if condition met, undefined otherwise
+     *
+     * @example
+     * ```typescript
+     * const conditions = {
+     *   setValueWhen: {
+     *     condition: { field: 'country', operator: 'equal', value: 'US' },
+     *     value: 'United States'
+     *   }
+     * };
+     * const value = getConditionalValue(conditions, { country: 'US' });
+     * // value = 'United States'
+     * ```
+     */
+    static getConditionalValue(conditions: ConditionRule | undefined, formValues: Record<string, FormValueType>): any;
+    /**
+     * Evaluate conditional data availability
+     * Returns true if any conditional data rule's condition is met
+     *
+     * @param conditionalDataRules - Array of ConditionalDataRule objects
+     * @param formValues - Current form field values
+     * @returns Index of first matching rule, or -1 if none match
+     */
+    static evaluateConditionalDataRules(conditionalDataRules: ConditionalDataRule[] | undefined, formValues: Record<string, FormValueType>): number;
+    /**
+   * Get filtered options for a dependent dropdown based on choice-based field rule
+   *
+   * If choiceBasedField rule exists and primary field has a value,
+   * return only the mapped dependent options for that primary value.
+   * Otherwise return all options.
+   *
+   * @param rule - ChoiceBasedFieldRule configuration
+   * @param allDependentOptions - Complete list of dependent field options
+   * @param formValues - Current form values
+   * @param primaryFieldId - ID of primary field
+   * @returns Filtered options array
+   *
+   * @example
+   * ```typescript
+   * const rule = {
+   *   primaryFieldId: 'dept-id',
+   *   choiceMapping: {
+   *     'Marketing': ['Markers', 'Sticky Notes'],
+   *     'Finance': ['Calculator']
+   *   }
+   * };
+   *
+   * const filtered = ConditionalRuleEngine.getChoiceBasedOptions(
+   *   rule,
+   *   ['Markers', 'Sticky Notes', 'Calculator'],
+   *   { 'dept-id': 'Marketing' },
+   *   'dept-id'
+   * );
+   * // Returns: ['Markers', 'Sticky Notes']
+   * ```
+   */
+    static getChoiceBasedOptions(rule: ChoiceBasedFieldRule, allDependentOptions: string[], formValues: Record<string, FormValueType>, primaryFieldId: string): string[];
+}