@syncfusion/ej2-form-renderer 34.2.6 → 35.1.37

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 34.2.6
+*  version : 35.1.37
 *  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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-form-renderer",
-  "version": "34.2.6",
+  "version": "35.1.37",
   "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",
@@ -8,16 +8,16 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-form-renderer.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-buttons": "~34.2.6",
-    "@syncfusion/ej2-calendars": "~34.2.6",
-    "@syncfusion/ej2-dropdowns": "~34.2.6",
-    "@syncfusion/ej2-grids": "~34.2.6",
-    "@syncfusion/ej2-image-editor": "~34.2.6",
-    "@syncfusion/ej2-inputs": "~34.2.6",
-    "@syncfusion/ej2-navigations": "~34.2.6",
-    "@syncfusion/ej2-notifications": "~34.2.6",
-    "@syncfusion/ej2-richtexteditor": "~34.2.6",
-    "@syncfusion/ej2-splitbuttons": "~34.2.6"
+    "@syncfusion/ej2-buttons": "~35.1.37",
+    "@syncfusion/ej2-calendars": "~35.1.37",
+    "@syncfusion/ej2-dropdowns": "~35.1.37",
+    "@syncfusion/ej2-grids": "~35.1.37",
+    "@syncfusion/ej2-image-editor": "~35.1.37",
+    "@syncfusion/ej2-inputs": "~35.1.37",
+    "@syncfusion/ej2-navigations": "~35.1.37",
+    "@syncfusion/ej2-notifications": "~35.1.37",
+    "@syncfusion/ej2-richtexteditor": "~35.1.37",
+    "@syncfusion/ej2-splitbuttons": "~35.1.37"
   },
   "devDependencies": {},
   "keywords": [

package/src/{common → form-renderer/common}/checkbox-group.js

@@ -103,7 +103,7 @@ var CheckboxGroup = /** @class */ (function () {
         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 options = Array.isArray(component.options) ? component.options : [];
         var selectedItems = this.getSelectedItems();
         options.forEach(function (option, idx) {
             var optionValue = typeof option === 'string'

package/src/{common → form-renderer/common}/conditional-rule-engine.d.ts

@@ -1,10 +1,5 @@
 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;
+import { FormValueType } from './utils';
 /**
  * ConditionalRuleEngine class
  * @private

package/src/{common → form-renderer/common}/custom-validation-engine.d.ts

@@ -1,4 +1,4 @@
-import { FormValueType } from './expressions/expression-engine';
+import { FormValueType } from './utils';
 /**
  * Custom Validation Engine
  *

package/src/{common → form-renderer/common}/expressions/expression-engine.d.ts

@@ -1,7 +1,4 @@
-/**
- * @private
- */
-export declare type FormValueType = string | number | boolean | Date | null | undefined | any[];
+import { FormValueType } from '../utils';
 /**
  * @private
  */

package/src/{common → form-renderer/common}/expressions/expression-parser.d.ts

@@ -1,12 +1,4 @@
-/**
- * Field type information for validation
- * @private
- */
-export interface AvailableField {
-    name: string;
-    type: string;
-    format?: string;
-}
+import { AvailableField } from "../utils";
 /**
  * ExpressionParser - Parse and compile expressions
  *

package/src/{common → form-renderer/common}/index.d.ts

@@ -1,3 +1,4 @@
+export * from './expressions/index';
 export * from './checkbox-group';
 export * from './conditional-rule-engine';
 export * from './custom-validation-engine';
@@ -6,5 +7,6 @@ export * from './json-converter';
 export * from './minmax-rule-engine';
 export * from './option-fetcher';
 export * from './parser';
+export * from './props-forwarder';
 export * from './static-html-renderer';
 export * from './utils';

package/src/{common → form-renderer/common}/index.js

@@ -1,3 +1,4 @@
+export * from './expressions/index';
 export * from './checkbox-group';
 export * from './conditional-rule-engine';
 export * from './custom-validation-engine';
@@ -6,5 +7,6 @@ export * from './json-converter';
 export * from './minmax-rule-engine';
 export * from './option-fetcher';
 export * from './parser';
+export * from './props-forwarder';
 export * from './static-html-renderer';
 export * from './utils';

package/src/{common → form-renderer/common}/json-converter.d.ts

@@ -623,6 +623,10 @@ export interface FieldProperties {
      * Applicable to all input form field components.
      */
     customValidation?: CustomValidationRule[] | FieldDataType;
+    /**
+     * Specifies the id name of the template which can be added using the `customWidgetSettings`.
+     */
+    templateId?: string;
     /**
      * Additional UI properties supported by the rendered component.
      */
@@ -912,11 +916,12 @@ export declare function splitSchema(heartSchema: FormSchema): UnifiedSchema;
 /**
  * @private
  */
-export declare function mergeSchema(unified: UnifiedSchema): FormSchema;
+export declare function mergeSchema(unified: UnifiedSchema, dataModel?: Record<string, FieldDataType>): FormSchema;
 /**
  * @private
  */
 export declare function inferWidgetFromType(type: string, format?: string, hasOptions?: boolean): string;
+export declare function inferTypeFromWidget(widget: string): string;
 /**
  * @private
  */

package/src/{common → form-renderer/common}/json-converter.js

@@ -293,7 +293,7 @@ export function splitSchema(heartSchema) {
         var semanticType = UI_TYPE_TO_SEMANTIC_TYPE[component.type];
         // Handle layout containers
         if (component.type === 'table') {
-            var safeId = sanitizeId(component.id, generateId(semanticType.type));
+            var safeId = sanitizeId(component.id, generateId('table'));
             var tableNode_1 = __assign({ type: 'table', id: safeId, name: component.name, label: component.label, cssClass: component.cssClass, hideBorders: component.hideBorders, rows: (component.tableCells && component.tableCells.length) || 0, cols: (component.tableCells && component.tableCells[0] && component.tableCells[0].length) || 0, cells: [], columnWidths: component.columnWidths }, (component.conditions ? { conditions: component.conditions } : {}));
             // Process table cells
             if (component.tableCells) {
@@ -314,7 +314,7 @@ export function splitSchema(heartSchema) {
             return "continue";
         }
         if (component.type === 'panel') {
-            var safeId = sanitizeId(component.id, generateId(semanticType.type));
+            var safeId = sanitizeId(component.id, generateId('panel'));
             var panelNode_1 = __assign({ type: 'panel', id: safeId, name: component.name, label: component.label, cssClass: component.cssClass, hideBorders: component.hideBorders, hideLabel: component.hideLabel, children: [] }, (component.conditions ? { conditions: component.conditions } : {}));
             // Process panel children
             // Reverse children and use unshift() to maintain order with depth-first processing
@@ -325,7 +325,7 @@ export function splitSchema(heartSchema) {
             return "continue";
         }
         if (component.type === 'tabs') {
-            var safeId = sanitizeId(component.id, generateId(semanticType.type));
+            var safeId = sanitizeId(component.id, generateId('tabs'));
             var tabsNode_1 = __assign({ type: 'tabs', name: component.name, id: safeId, label: component.label, cssClass: component.cssClass, tabOptions: component.tabOptions, tabs: [] }, (component.conditions ? { conditions: component.conditions } : {}));
             // Process tabs
             if (component.tabItems) {
@@ -342,7 +342,7 @@ export function splitSchema(heartSchema) {
             return "continue";
         }
         if (component.type === 'card') {
-            var safeId = sanitizeId(component.id, generateId(semanticType.type));
+            var safeId = sanitizeId(component.id, generateId('card'));
             var cardNode_1 = __assign({ type: 'card', id: safeId, name: component.name, label: component.label, cssClass: component.cssClass, hideLabel: component.hideLabel, cardTitle: component.cardTitle, cardSubtitle: component.cardSubtitle, children: [] }, (component.conditions ? { conditions: component.conditions } : {}));
             // Process card children
             // Reverse children and use unshift() to maintain order with depth-first processing
@@ -494,7 +494,7 @@ function extractUIField(component) {
 /**
  * @private
  */
-export function mergeSchema(unified) {
+export function mergeSchema(unified, dataModel) {
     // Create lookup map for O(1) access to unified properties
     var propertyMap = new Map();
     var unifiedPropKeys = Object.keys(unified.properties);
@@ -529,7 +529,7 @@ export function mergeSchema(unified) {
                     components.push(fallbackComponent);
                 }
                 else {
-                    components.push(mergeUnifiedField(unifiedField));
+                    components.push(mergeUnifiedField(unifiedField, dataModel));
                 }
             }
             else if (node.type === 'table') {
@@ -586,7 +586,7 @@ export function mergeSchema(unified) {
         // If layout is undefined or empty, generate a flat layout from properties
         var flatPropKeys = Object.keys(unified.properties);
         components = flatPropKeys.map(function (key) {
-            return mergeUnifiedField(unified.properties[key]);
+            return mergeUnifiedField(unified.properties[key], dataModel);
         });
     }
     else {
@@ -597,7 +597,7 @@ export function mergeSchema(unified) {
 /**
  * @private
  */
-function mergeUnifiedField(unifiedField) {
+function mergeUnifiedField(unifiedField, dataModel) {
     var hasOptions = unifiedField.options !== undefined && unifiedField.options.length > 0;
     var component = {
         id: unifiedField.id || generateId(unifiedField.widget || inferWidgetFromType(unifiedField.type, unifiedField.format, hasOptions)),
@@ -649,6 +649,17 @@ function mergeUnifiedField(unifiedField) {
         component.maxTime = unifiedField.maxTime;
     if (unifiedField.pattern !== undefined)
         component.regex = unifiedField.pattern;
+    if (unifiedField.name && dataModel && Object.prototype.hasOwnProperty.call(dataModel, unifiedField.name)) {
+        if (component.type === 'checkbox' || component.type === 'switch') {
+            component.checked = dataModel[unifiedField.name];
+        }
+        if (component.type === 'dataGrid') {
+            component.dataSource = dataModel[unifiedField.name];
+        }
+        else {
+            component.defaultValue = dataModel[unifiedField.name];
+        }
+    }
     return component;
 }
 /**
@@ -697,6 +708,36 @@ export function inferWidgetFromType(type, format, hasOptions) {
         return 'textbox';
     return 'textbox';
 }
+export function inferTypeFromWidget(widget) {
+    switch (widget) {
+        case 'number':
+        case 'rangeSlider':
+        case 'rating':
+            return 'number';
+        case 'checkbox':
+        case 'switch':
+            return 'boolean';
+        case 'multiselect':
+        case 'checkboxGroup':
+            return 'array';
+        case 'button':
+            return 'button';
+        case 'message':
+            return 'message';
+        case 'signature':
+            return 'sign';
+        case 'imageEditor':
+            return 'image';
+        case 'fileUpload':
+            return 'file';
+        case 'colorPicker':
+            return 'color';
+        case 'dataGrid':
+            return 'grid';
+        default:
+            return 'string';
+    }
+}
 /**
  * @private
  */

package/src/form-renderer/common/props-forwarder.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @private
+ */
+/**
+ * @private
+ */
+export declare const RESERVED_RENDERER_KEYS: ReadonlyArray<string>;
+/**
+ * EJ2 lifecycle / framework methods whose names MUST NOT be invoked
+ * by the pass-through (would be assigned-as-data, ignored by the
+ * framework, but also poison if mapped to a setter eager on init).
+ *
+ * @private
+ */
+export declare const EJ2_LIFECYCLE_KEYS: ReadonlyArray<string>;
+/**
+ * @private
+ */
+export declare function pickUnmappedSchemaProps(component: {
+    [key: string]: unknown;
+} | undefined | null, explicitKeys: ReadonlyArray<string>): {
+    [key: string]: unknown;
+};
+/**
+ * @private
+ */
+export declare function applyExtraProps(control: any, extra: {
+    [key: string]: unknown;
+}): number;
+/**
+ * @private
+ */
+export declare function forwardExtras(control: any, component: {
+    [key: string]: unknown;
+} | undefined | null, explicitKeys: ReadonlyArray<string>, extras?: ReadonlyArray<{
+    key: string;
+    value: unknown;
+}>): number;

package/src/form-renderer/common/props-forwarder.js

@@ -0,0 +1,123 @@
+/**
+ * @private
+ */
+/**
+ * @private
+ */
+export var RESERVED_RENDERER_KEYS = [
+    'id',
+    'type',
+    'name',
+    'label',
+    'conditions',
+    'customValidation',
+    'customvalidation',
+    '_configured',
+    'widget',
+    'templateId',
+    'kind',
+    'as',
+    'visibility',
+    'options',
+    'tableCells',
+    'tabItems',
+    'children',
+    'templateData',
+    'ref'
+];
+/**
+ * EJ2 lifecycle / framework methods whose names MUST NOT be invoked
+ * by the pass-through (would be assigned-as-data, ignored by the
+ * framework, but also poison if mapped to a setter eager on init).
+ *
+ * @private
+ */
+export var EJ2_LIFECYCLE_KEYS = [
+    'created',
+    'destroyed',
+    'appendTo',
+    'appendToElement',
+    'append',
+    'render',
+    'addEventListener',
+    'removeEventListener',
+    'getModuleName',
+    'inject',
+    'dataBind',
+    'refresh',
+    'onPropertyChanged'
+];
+/**
+ * @private
+ */
+export function pickUnmappedSchemaProps(component, explicitKeys) {
+    var comp = component || {};
+    var explicit = {};
+    for (var exIdx = 0; exIdx < explicitKeys.length; exIdx++) {
+        explicit[explicitKeys[exIdx]] = true;
+    }
+    for (var rIdx = 0; rIdx < RESERVED_RENDERER_KEYS.length; rIdx++) {
+        explicit[RESERVED_RENDERER_KEYS[rIdx]] = true;
+    }
+    for (var lIdx = 0; lIdx < EJ2_LIFECYCLE_KEYS.length; lIdx++) {
+        explicit[EJ2_LIFECYCLE_KEYS[lIdx]] = true;
+    }
+    var keys = [];
+    for (var k in comp) {
+        if (Object.prototype.hasOwnProperty.call(comp, k) &&
+            !explicit[k] &&
+            k !== '__proto__' &&
+            k !== 'constructor') {
+            keys.push(k);
+        }
+    }
+    keys.sort();
+    var out = {};
+    for (var outIdx = 0; outIdx < keys.length; outIdx++) {
+        var key = keys[outIdx];
+        out[key] = comp[key];
+    }
+    return out;
+}
+/**
+ * @private
+ */
+export function applyExtraProps(control, extra) {
+    if (!control || !extra) {
+        return 0;
+    }
+    var keys = Object.keys(extra);
+    var applied = 0;
+    for (var kIdx = 0; kIdx < keys.length; kIdx++) {
+        var k = keys[kIdx];
+        try {
+            control[k] = extra[k];
+            applied++;
+        }
+        catch (e) {
+            var ctor = (control && control.constructor && control.constructor.name) || '<unknown>';
+            // eslint-disable-next-line no-console
+            console.warn("[form-renderer] cannot forward schema property \"" + k + "\" to control of type " + ctor + ":", e);
+        }
+    }
+    return applied;
+}
+/**
+ * @private
+ */
+export function forwardExtras(control, component, explicitKeys, extras) {
+    var picked = pickUnmappedSchemaProps(component, explicitKeys);
+    if (extras && extras.length) {
+        for (var exIdx = 0; exIdx < extras.length; exIdx++) {
+            var item = extras[exIdx];
+            picked[item.key] = item.value;
+        }
+        // Re-sort with the injected extras deterministically.
+        var sorted_1 = {};
+        Object.keys(picked).sort().forEach(function (k) {
+            sorted_1[k] = picked[k];
+        });
+        return applyExtraProps(control, sorted_1);
+    }
+    return applyExtraProps(control, picked);
+}

package/src/{common → form-renderer/common}/utils.d.ts

@@ -6,6 +6,12 @@ import { DataManager, Query } from '@syncfusion/ej2-data';
 export declare const VALIDATION_REGEX: {
     [key: string]: RegExp;
 };
+/**
+ * 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;
 /**
  * @private
  */

package/src/form-renderer/form-renderer/custom-widget-resolver.d.ts

@@ -0,0 +1,17 @@
+import { FormNode } from './types/form-schema';
+import { CustomWidgetSettingModel } from './form-renderer-model';
+/**
+ * @private
+ */
+export declare type CustomWidgetMatchKind = 'fieldName' | 'templateId' | 'type';
+/**
+ * @private
+ */
+export interface ResolvedCustomWidget {
+    entry: CustomWidgetSettingModel;
+    matchKind: CustomWidgetMatchKind;
+}
+/**
+ * @private
+ */
+export declare function resolveCustomWidget(component: FormNode, settings: CustomWidgetSettingModel[] | undefined): ResolvedCustomWidget | null;

package/src/form-renderer/form-renderer/custom-widget-resolver.js

@@ -0,0 +1,39 @@
+/**
+ * @private
+ */
+export function resolveCustomWidget(component, settings) {
+    if (!settings || settings.length === 0) {
+        return null;
+    }
+    var compName = component.name;
+    if (typeof compName === 'string' && compName.length > 0) {
+        for (var _i = 0, settings_1 = settings; _i < settings_1.length; _i++) {
+            var entry = settings_1[_i];
+            var fn = entry.fieldName;
+            if (typeof fn === 'string' && fn.length > 0 && fn === compName) {
+                return { entry: entry, matchKind: 'fieldName' };
+            }
+        }
+    }
+    var compTemplateId = component.templateId;
+    if (typeof compTemplateId === 'string' && compTemplateId.length > 0) {
+        for (var _a = 0, settings_2 = settings; _a < settings_2.length; _a++) {
+            var entry = settings_2[_a];
+            var eid = entry.templateId;
+            if (typeof eid === 'string' && eid.length > 0 && eid === compTemplateId) {
+                return { entry: entry, matchKind: 'templateId' };
+            }
+        }
+    }
+    var compType = component.type;
+    if (typeof compType === 'string' && compType.length > 0) {
+        for (var _b = 0, settings_3 = settings; _b < settings_3.length; _b++) {
+            var entry = settings_3[_b];
+            var et = entry.type;
+            if (typeof et === 'string' && et.length > 0 && et === compType) {
+                return { entry: entry, matchKind: 'type' };
+            }
+        }
+    }
+    return null;
+}

package/src/form-renderer/form-renderer/form-renderer-model.d.ts

@@ -0,0 +1,125 @@
+import { Component, Collection, Property, Event, EmitType, NotifyPropertyChanges, enableRipple, createElement, ChildProperty, isNullOrUndefined, L10n, getComponent, addClass, compile, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { Tab, Toolbar } from '@syncfusion/ej2-navigations';import { Tooltip } from '@syncfusion/ej2-popups';import { FormValidator, Signature } from '@syncfusion/ej2-inputs';import { FormLayout, FormNode, Schema } from './types/form-schema';import { renderFormField } from './render-form-field';import { resolveCustomWidget, ResolvedCustomWidget } from './custom-widget-resolver';import { mergeSchema, UnifiedSchema, inferTypeFromWidget } from '../common/json-converter';import { UniversalJsonParser } from '../common/parser';import { VALIDATION_REGEX, formatDateValues, splitWidths } from '../common/utils';import StaticHtmlRenderer from '../common/static-html-renderer';import { ConditionalRuleEngine, FormValueType } from '../common/index';import { ExpressionEngine, DependencyGraph } from '../common/expressions/expression-engine';import { MinMaxRuleEngine } from '../common/minmax-rule-engine';import { CustomValidationEngine } from '../common/custom-validation-engine';import { RichTextEditor } from '@syncfusion/ej2-richtexteditor';import { ImageEditor } from '@syncfusion/ej2-image-editor';
+import {FieldDataType,SubmitEventArgs,ChangeEventArgs,ButtonClickEventArgs,FailureEventArgs} from "./form-renderer";
+import {ComponentModel} from '@syncfusion/ej2-base';
+
+/**
+ * Interface for a class CustomWidgetSetting
+ */
+export interface CustomWidgetSettingModel {
+
+    /**
+     * Specifies the template content to be used.
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    template?: string | HTMLElement | Function;
+
+    /**
+     * Specifies the type of the widget to which the template must be bound. The values will be FormComponentType.
+     *
+     * @default ''
+     */
+    type?: string;
+
+    /**
+     * Specifies an optional template identifier. When set, the template is rendered to the JSON object whose templateId matches this value, irrespective of the type.
+     *
+     * @default ''
+     */
+    templateId?: string;
+
+    /**
+     * Specifies the name of the field to which the template must be bound. When set, the template is rendered to the control with the matching name, irrespective of the type property value.
+     *
+     * @default ''
+     */
+    fieldName?: string;
+
+}
+
+/**
+ * Interface for a class FormRenderer
+ */
+export interface FormRendererModel extends ComponentModel{
+
+    /**
+     * Specifies the data schema of the form that needs to be rendered in the Form Renderer.
+     */
+    schema?: Schema | string | Record<string, unknown> | null;
+
+    /**
+     * Specifies initial values for form fields by field name.
+     *
+     * @default null
+     */
+    dataModel?: Record<string, FieldDataType> | null;
+
+    /**
+     * Specifies the form layout configuration (only applies when layout details are NOT available in the schema). Determines how form fields are arranged in columns.
+     * 
+     * @default 'SingleColumn'
+     */
+    layout?: FormLayout | string;
+
+    /**
+     * Specifies the CSS class name to apply to the root form container element. This property supports space-separated multiple classes.
+     * 
+     * @default "" 
+     */
+    className?: string;
+
+    /**
+     * Specifies the custom widget settings to bind and render custom templates for form fields.
+     *
+     * @default null
+     */
+    customWidgetSettings?: CustomWidgetSettingModel[];
+
+    /**
+     * Specifies whether to enable the sanitization of untrusted HTML in custom widget string/script templates (`customWidgetSettings[].template`).
+     *
+     * @default false
+     */
+    enableHtmlSanitizer?: boolean;
+
+    /**
+     * Event triggered when the form is submitted.
+     * This event provides form data and validation status in the event argument.
+     *
+     * @event
+     */
+    submit?: EmitType<SubmitEventArgs>;
+
+    /**
+     * Event triggered when any form field value changes. Fired on user input for tracked fields.
+     *
+     * @event
+     */
+    change?: EmitType<ChangeEventArgs>;
+
+    /**
+     * Event triggered when a button in the form is clicked. Applies to all button types (button, submit, splitButton).
+     *
+     * @event
+     */
+    buttonClick?: EmitType<ButtonClickEventArgs>;
+
+    /**
+     * Event triggered when an error is thrown in the form rendering or schema parsing.
+     *
+     * @event
+     */
+    failure?: EmitType<FailureEventArgs>;
+
+    /**
+     * Event triggered when all form elements are rendered and ready for interaction. Useful for performing post-render initialization or setup.
+     *
+     * @event
+     */
+    created?: EmitType<Object>;
+
+}