@syncfusion/ej2-form-renderer 34.2.2

package/src/form-renderer/form-renderer.js

@@ -0,0 +1,2277 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, Property, Event, NotifyPropertyChanges, enableRipple, createElement, isNullOrUndefined, L10n, getComponent, addClass } from '@syncfusion/ej2-base';
+import { Tab } from '@syncfusion/ej2-navigations';
+import { Tooltip } from '@syncfusion/ej2-popups';
+import { FormValidator } from '@syncfusion/ej2-inputs';
+import { renderFormField } from './render-form-field';
+import { mergeSchema } 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 } from '../common/conditional-rule-engine';
+import { ExpressionEngine } from '../common/expressions/expression-engine';
+import { MinMaxRuleEngine } from '../common/minmax-rule-engine';
+import { CustomValidationEngine } from '../common/custom-validation-engine';
+/**
+ * @private
+ *
+ * Internal input target types array to define a target.
+ */
+var inputTargetTypes = [
+    'textbox',
+    'number',
+    'checkbox',
+    'dropdown',
+    'multiselect',
+    'date',
+    'dateTime',
+    'time',
+    'dateRange',
+    'switch',
+    'rating',
+    'colorPicker',
+    'inputMask',
+    'fileUpload'
+];
+/**
+ * @private
+ */
+export var defaultLocale = {
+    "unsupportedComponent": "Unsupported Component type"
+};
+/**
+ * The FormRenderer component consumes a JSON form schema and renders a fully functional, Syncfusion-based form. It handles field mapping, conditional visibility/disabling, expression evaluation, custom validation, and data submission.
+ *
+ * ```typescript
+ * let form: FormRenderer = new FormRenderer({
+ *   schema: formSchema,
+ *   submit: (args: SubmitEventArgs) => console.log(args)
+ * });
+ * form.appendTo('#container');
+ * ```
+ */
+var FormRenderer = /** @class */ (function (_super) {
+    __extends(FormRenderer, _super);
+    /**
+     * Constructor for creating the widget
+     *
+     * @param  {FormRendererModel} options - Specifies the form renderer model
+     * @param  {string|HTMLDivElement} element - Specifies the target element
+     */
+    function FormRenderer(options, element) {
+        var _this = _super.call(this, options, element) || this;
+        _this.processedSchemaCache = { version: '1.0.0', components: [] };
+        /** Localization instance */
+        _this.l10n = new L10n('form-renderer', defaultLocale, _this.locale);
+        /**
+         * @private
+         *
+         * Minimal form-state container owned by the orchestrator. The previous
+         * vanilla-TS port delegated this to `FormStateBridge`; that bridge's
+         * `registeredFields` gate silently short-circuited every field to "no
+         * error" because the orchestrator never called `registerField`. The
+         * EJ2 native `FormValidator` (bound to `this.element`) now handles all
+         * rule evaluation, error-element placement, change/blur/submit wiring,
+         * and ARIA — exactly what `FormValidator` was designed for. This object
+         * is the orchestrator's authoritative values store; `errors` are
+         * mirrored from the FormValidator's `errorRules` for `renderField`'s
+         * initial-paint logic and for submit-time `isValid` checks.
+         */
+        _this.formState = { values: Object.create(null), errors: Object.create(null) };
+        /** EJ2 native FormValidator bound to `this.element` (replaces FormStateBridge). */
+        _this.validator = null;
+        /** Map of input component instances keyed by `name` (or `${name}_${idx}`). */
+        _this.inputRefs = {};
+        /** Conditional value applied tracker (per-field). */
+        _this.conditionalValueApplied = {};
+        /** Expression engine + dependency graph + computed-field set. */
+        _this.expressionEngine = null;
+        _this.expressionDependencyGraph = {};
+        _this.expressionEvaluationInProgress = false;
+        _this.previousFormValues = {};
+        _this.computedFieldNames = new Set();
+        /** Custom validation engine instance. */
+        _this.customValidationEngine = new CustomValidationEngine();
+        /** Latest form values snapshot for custom validation (named-key context). */
+        _this.currentFormValues = {};
+        /** Whether initial values have been seeded once. */
+        _this.isInitialized = false;
+        /** Cached layout detection result. */
+        _this.hasLayoutComponentsCache = false;
+        /** Cached id→label map. */
+        _this.idToLabelCache = {};
+        /** Cached initial values (recomputed on schema change). */
+        _this.initialValuesCache = {};
+        /** Rendered child EJ2 instances (for destroy cleanup). */
+        _this.renderedInstances = [];
+        /** Tooltip instances keyed by field id so stale tooltips can be replaced promptly. */
+        _this.tooltipRefs = {};
+        /** `created` fired-once guard. */
+        _this.createdFired = false;
+        /**
+         * Coalescing guard for `scheduleRerender`. Prevents redundant full-form
+         * re-renders within a single microtask — mirrors React's batched-state
+         * semantics so that a user keystroke + expression cascade fire one render.
+         */
+        _this.rerenderScheduled = false;
+        /**
+         * Set of `component.id`s that are referenced as the trigger field of any
+         * other component's `conditions` (`visibleWhen` / `hideWhen` /
+         * `disabledWhen` / `requiredWhen` / `readOnlyWhen` / `setValueWhen` /
+         * `choiceBasedField.primaryFieldId`). Only changes to these fields can
+         * affect visibility / disabled / required / valueWhen of any other
+         * field, so only they need to trigger a full-form re-render. Changes to
+         * fields *not* in this set are guaranteed to have no conditional side
+         * effects and safely skip the (expensive) full DOM teardown + rebuild.
+         * Built once per schema in `buildConditionalDependencyMap`.
+         */
+        _this.conditionalTriggerFieldIds = new Set();
+        /**
+         * Maps `component.id` → the previously-rendered DOM subtree (form-group)
+         * for "expensive" components (dataGrid, dropdown, multiselect,
+         * checkboxGroup) that support remote data. During a full-form re-render
+         * triggered by an *unrelated* conditional change, these subtrees are
+         * detached (not destroyed) and re-attached in place, avoiding a re-fetch
+         * of their remote data sources and preventing the visible blink/reload.
+         * A subtree is *invalidated* (dropped from this map, forcing a fresh
+         * render) when a field it depends on (via its own `conditions` or
+         * `conditionalData`) is the one that changed.
+         */
+        _this.preservedFields = new Map();
+        /**
+         * Per-consumer dependency map: `component.id` → set of trigger field ids
+         * that the consumer's own `conditions` / `conditionalData` /
+         * `choiceBasedField` reference. Used during `rerenderForm` to decide
+         * whether a preserved subtree must be invalidated (rebuilt) because the
+         * changed field is one of its own dependencies, or can be safely reused.
+         */
+        _this.consumerDependencyMap = new Map();
+        /**
+         * @private
+         *
+         * Coalesced full-form re-render. Multiple triggers within the same
+         * microtask drain into a single `rerenderForm()` call. The set of
+         * changed field ids is accumulated across the tick so `rerenderForm`
+         * can decide which preserved subtrees must be invalidated (because one
+         * of the changed fields is in their own dependency set).
+         */
+        _this.pendingChangedFieldIds = new Set();
+        return _this;
+    }
+    FormRenderer_1 = FormRenderer;
+    /**
+     * Returns the EJ2 component module name.
+     * @private
+     */
+    FormRenderer.prototype.getModuleName = function () {
+        return 'form-renderer';
+    };
+    /**
+     * Return the persisted-state payload. The base class declares this
+     * abstract; FormRenderer does not implement state persistence, so an
+     * empty object is returned (mirrors the EJ2 convention for
+     * non-persistent components).
+     * @private
+     */
+    FormRenderer.prototype.getPersistData = function () {
+        return this.addOnPersist(['formState', JSON.stringify(this.formState)]);
+    };
+    /**
+     * Pre-render wiring: enable ripple, init the expression engine + bridge.
+     * @private
+     */
+    FormRenderer.prototype.preRender = function () {
+        enableRipple(true);
+        this.createdFired = false;
+        this.expressionEngine = new ExpressionEngine();
+    };
+    /**
+     * Main render: normalize schema, build rules + initial values, render tree.
+     * @private
+     */
+    FormRenderer.prototype.render = function () {
+        var _this = this;
+        this.clearEngineCaches();
+        this.removePreviousRoot();
+        this.normalizeSchema();
+        this.element.classList.add('form-renderer-container');
+        if (this.className) {
+            addClass([this.element], this.className.replace(/\s+/g, ' ').trim().split(' '));
+        }
+        if (this.enableRtl) {
+            this.element.classList.add('e-rtl');
+        }
+        else {
+            this.element.classList.remove('e-rtl');
+        }
+        this.hasLayoutComponentsCache = this.computeHasLayoutComponents();
+        this.idToLabelCache = this.computeIdToLabel();
+        this.initialValuesCache = this.buildInitialValues();
+        this.buildValidationRulesAndBridge();
+        // Seed initial values into the form-state values map once.
+        if (!this.isInitialized) {
+            this.isInitialized = true;
+        }
+        if (this.formState && this.initialValuesCache) {
+            var initKeys = Object.keys(this.initialValuesCache);
+            for (var _i = 0, initKeys_1 = initKeys; _i < initKeys_1.length; _i++) {
+                var id = initKeys_1[_i];
+                var value = this.initialValuesCache[id];
+                if (!(this.formState).values[id]) {
+                    (this.formState).values[id] = value;
+                }
+            }
+        }
+        this.currentFormValues = __assign({}, (this.formState ? this.formState.values : {}));
+        this.initExpressionEngine();
+        this.buildConditionalDependencyMap();
+        var root = createElement('form', {
+            className: "form-renderer " + this.layoutClass,
+            attrs: { role: 'region', 'aria-label': this.processedSchemaCache.settings ? (this.processedSchemaCache.settings.name || 'Form') : 'Form' }
+        });
+        this.element.appendChild(root);
+        this.inputRefs = {};
+        (this.processedSchemaCache.components || []).forEach(function (component) {
+            var rendered = _this.renderComponent(component);
+            if (rendered) {
+                root.appendChild(rendered);
+            }
+            if (component.type === 'richTextEditor') {
+                var rteElement = rendered.querySelector('.e-richtexteditor');
+                var rteInstance = getComponent(rteElement, 'richtexteditor');
+                rteInstance.refreshUI();
+            }
+            if (component.type === 'dataGrid') {
+                var toolbarElement = rendered.querySelector('.e-control.e-toolbar');
+                var rteInstance = getComponent(toolbarElement, 'toolbar');
+                rteInstance.refresh();
+            }
+        });
+        if (this.created && !this.createdFired) {
+            setTimeout(function () {
+                if (Object.keys(_this.inputRefs).length > 0) {
+                    _this.createdFired = true;
+                    _this.trigger('created', {});
+                }
+            }, 0);
+        }
+    };
+    /**
+     * @private
+     */
+    FormRenderer.prototype.normalizeSchema = function () {
+        var schema = this.schema;
+        try {
+            if (!schema) {
+                this.processedSchemaCache = { version: '1.0.0', components: [] };
+                return;
+            }
+            var parsedInput = schema;
+            if (typeof schema === 'string') {
+                try {
+                    parsedInput = JSON.parse(schema);
+                }
+                catch (err) {
+                    if (this.failure) {
+                        this.trigger('failure', {
+                            error: err
+                        });
+                    }
+                    this.processedSchemaCache = { version: '1.0.0', components: [] };
+                    return;
+                }
+            }
+            var isUnifiedSchema = parsedInput && typeof parsedInput === 'object' &&
+                parsedInput.properties && Array.isArray(parsedInput.layout);
+            if (isUnifiedSchema) {
+                this.processedSchemaCache = mergeSchema(parsedInput);
+            }
+            else {
+                var parser = new UniversalJsonParser();
+                var parseResult = parser.parse(typeof schema === 'string' ? schema : JSON.stringify(schema));
+                if (parseResult.success && parseResult.schema) {
+                    this.processedSchemaCache = parseResult.schema;
+                }
+                else {
+                    if (this.failure) {
+                        this.trigger('failure', {
+                            error: parseResult.errors
+                        });
+                    }
+                    this.processedSchemaCache = { version: '1.0.0', components: [] };
+                }
+            }
+        }
+        catch (error) {
+            if (this.failure) {
+                this.trigger('failure', {
+                    error: error
+                });
+            }
+            this.processedSchemaCache = { version: '1.0.0', components: [] };
+        }
+    };
+    // ----------------------------------------------------------------------
+    // G3 — layout detection + suppression map
+    // ----------------------------------------------------------------------
+    /**
+     * Recursively scan the schema for any `table`/`tabs`/`panel`/`card`
+     * (including inside table cells and tab content). Mirrors `hasLayoutComponents`.
+     * @private
+     */
+    FormRenderer.prototype.computeHasLayoutComponents = function () {
+        if (!this.processedSchemaCache.components) {
+            return false;
+        }
+        var checkForLayoutTypes = function (components) {
+            for (var _i = 0, components_1 = components; _i < components_1.length; _i++) {
+                var comp = components_1[_i];
+                if (['table', 'tabs', 'panel', 'card'].indexOf(comp.type) !== -1) {
+                    return true;
+                }
+                if (comp.children && checkForLayoutTypes(comp.children)) {
+                    return true;
+                }
+                if (comp.tableCells) {
+                    for (var _a = 0, _b = comp.tableCells; _a < _b.length; _a++) {
+                        var row = _b[_a];
+                        for (var _c = 0, row_1 = row; _c < row_1.length; _c++) {
+                            var cell = row_1[_c];
+                            if (checkForLayoutTypes(cell)) {
+                                return true;
+                            }
+                        }
+                    }
+                }
+                if (comp.tabItems) {
+                    for (var _d = 0, _e = comp.tabItems; _d < _e.length; _d++) {
+                        var tab = _e[_d];
+                        if (tab.content && checkForLayoutTypes(tab.content)) {
+                            return true;
+                        }
+                    }
+                }
+            }
+            return false;
+        };
+        return checkForLayoutTypes(this.processedSchemaCache.components);
+    };
+    Object.defineProperty(FormRenderer.prototype, "layoutClass", {
+        /**
+         * The layout CSS class (suppressed when layout components are present).
+         * @private
+         */
+        get: function () {
+            if (this.hasLayoutComponentsCache) {
+                return '';
+            }
+            switch (this.layout) {
+                case 'TwoColumn':
+                    return 'twolayout';
+                case 'ThreeColumn':
+                    return 'threelayout';
+                case 'FourColumn':
+                    return 'fourlayout';
+                case 'SingleColumn':
+                default:
+                    return '';
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    // ----------------------------------------------------------------------
+    // G4 — collectAllComponents + idToLabel
+    // ----------------------------------------------------------------------
+    /**
+     * Recursively collect all components including nested ones.
+     * @private
+     */
+    FormRenderer.prototype.collectAllComponents = function (components) {
+        var all = [];
+        var traverse = function (comps) {
+            comps.forEach(function (comp) {
+                all.push(comp);
+                if (comp.children && comp.children.length > 0) {
+                    traverse(comp.children);
+                }
+                if (comp.tableCells) {
+                    comp.tableCells.forEach(function (row) {
+                        row.forEach(function (cell) { return traverse(cell); });
+                    });
+                }
+                if (comp.tabItems) {
+                    comp.tabItems.forEach(function (tab) {
+                        if (tab.content) {
+                            traverse(tab.content);
+                        }
+                    });
+                }
+            });
+        };
+        traverse(components);
+        return all;
+    };
+    /**
+     * @private
+     */
+    FormRenderer.prototype.computeIdToLabel = function () {
+        var map = {};
+        var traverse = function (comps) {
+            comps.forEach(function (comp) {
+                if (comp.label && ['panel', 'table', 'tabs', 'card', 'button', 'message', 'splitButton'].indexOf(comp.type) === -1) {
+                    if (comp.name) {
+                        map[comp.id] = comp.name;
+                    }
+                    else if (comp.label) {
+                        map[comp.id] = comp.label;
+                    }
+                }
+                if (comp.children) {
+                    traverse(comp.children);
+                }
+                if (comp.tableCells) {
+                    comp.tableCells.forEach(function (row) { return row.forEach(function (cell) { return traverse(cell); }); });
+                }
+                if (comp.tabItems) {
+                    comp.tabItems.forEach(function (tab) { if (tab.content) {
+                        traverse(tab.content);
+                    } });
+                }
+            });
+        };
+        traverse(this.processedSchemaCache.components);
+        return map;
+    };
+    // ----------------------------------------------------------------------
+    // G5 — buildValidationRules via FormStateBridge + ConditionalRuleEngine +
+    //       EMAIL/URL auto-regex + customValidator closure
+    // ----------------------------------------------------------------------
+    /**
+     * @private
+     */
+    FormRenderer.prototype.buildValidationRulesAndBridge = function () {
+        var _this = this;
+        var rules = {};
+        var formValues = (this.formState && this.formState.values) || {};
+        var collectRules = function (components, parentVisible) {
+            if (parentVisible === void 0) { parentVisible = true; }
+            components.forEach(function (component) {
+                if (!component) {
+                    return;
+                }
+                var componentRules = {};
+                var isVisible = parentVisible && (component.visible === false
+                    ? false
+                    : ConditionalRuleEngine.isFieldVisible(component.conditions, formValues));
+                var isHidden = parentVisible && ConditionalRuleEngine.isFieldHidden(component.conditions, formValues);
+                if (!isVisible || isHidden) {
+                    return;
+                }
+                var conditionalRequired = ConditionalRuleEngine.isFieldRequired(component.conditions, formValues);
+                var conditionalDisabled = ConditionalRuleEngine.isFieldDisabled(component.conditions, formValues);
+                var conditionalReadOnly = ConditionalRuleEngine.isFieldReadOnly(component.conditions, formValues);
+                var finalRequired = !!component.required || conditionalRequired;
+                var finalDisabled = !!component.disabled || conditionalDisabled;
+                var finalReadOnly = !!component.readOnly || conditionalReadOnly;
+                if (component.customValidation &&
+                    Array.isArray(component.customValidation) &&
+                    component.customValidation.length > 0 &&
+                    !finalDisabled && !finalReadOnly) {
+                    var customValidationExpression = component.customValidation && component.customValidation[0] && component.customValidation[0].expression;
+                    var validationMessage = customValidationExpression && customValidationExpression.match(/\?\s*true\s*:\s*['"](.+?)['"]/) ? customValidationExpression.match(/\?\s*true\s*:\s*['"](.+?)['"]/)[1] : undefined;
+                    var customMessage = validationMessage ||
+                        component.validationMessage ||
+                        (component.label || component.id) + " is invalid";
+                    var self_1 = _this;
+                    componentRules.customValidation = [
+                        function (args) {
+                            var fieldValue = args.value;
+                            if (finalRequired && (fieldValue === '' || fieldValue === null || fieldValue === undefined)) {
+                                return true;
+                            }
+                            var idToNameMap = {};
+                            var allComponents = self_1.collectAllComponents(self_1.processedSchemaCache.components);
+                            allComponents.forEach(function (comp) {
+                                if (comp.name) {
+                                    idToNameMap[comp.id] = comp.name;
+                                }
+                            });
+                            var currentFormValues = __assign({}, (self_1.currentFormValues || {}));
+                            var cfvKeys = Object.keys(__assign({}, currentFormValues));
+                            for (var _i = 0, cfvKeys_1 = cfvKeys; _i < cfvKeys_1.length; _i++) {
+                                var componentId = cfvKeys_1[_i];
+                                var value = currentFormValues[componentId];
+                                var fieldName = idToNameMap[componentId];
+                                if (fieldName) {
+                                    currentFormValues[fieldName] = value;
+                                    delete currentFormValues[componentId];
+                                }
+                            }
+                            for (var _a = 0, _b = component.customValidation; _a < _b.length; _a++) {
+                                var rule = _b[_a];
+                                if (!self_1.customValidationEngine) {
+                                    return true;
+                                }
+                                var result = self_1.customValidationEngine.validate(rule.expression, fieldValue, currentFormValues);
+                                if (result !== true) {
+                                    return false;
+                                }
+                            }
+                            return true;
+                        },
+                        customMessage
+                    ];
+                }
+                if (finalRequired && !finalDisabled && !finalReadOnly) {
+                    componentRules.required = [true, component.validationMessage || component.label + " is required"];
+                }
+                if (component.minLength && !finalDisabled && !finalReadOnly) {
+                    componentRules.minLength = [component.minLength, "Minimum " + component.minLength + " characters allowed"];
+                }
+                if (component.maxLength && !finalDisabled && !finalReadOnly) {
+                    componentRules.maxLength = [component.maxLength, "Maximum " + component.maxLength + " characters allowed"];
+                }
+                if (component.type === 'textbox' && component.textboxType && !component.regex &&
+                    !componentRules.regex && !finalDisabled && !finalReadOnly) {
+                    if (component.textboxType === 'email') {
+                        componentRules.regex = [VALIDATION_REGEX['EMAIL'], component.validationMessage || 'Invalid format'];
+                    }
+                    else if (component.textboxType === 'url') {
+                        componentRules.regex = [VALIDATION_REGEX['URL'], component.validationMessage || 'Invalid format'];
+                    }
+                }
+                if (component.regex && !finalDisabled && !finalReadOnly) {
+                    componentRules.regex = [component.regex, component.validationMessage || 'Invalid format'];
+                }
+                if (Object.keys(componentRules).length > 0) {
+                    rules[component.id] = componentRules;
+                }
+                if (component.children) {
+                    collectRules(component.children, isVisible && !isHidden);
+                }
+                if (component.tableCells) {
+                    component.tableCells.forEach(function (row) { return row.forEach(function (cell) { return collectRules(cell, isVisible && !isHidden); }); });
+                }
+                if (component.tabItems) {
+                    component.tabItems.forEach(function (tab) {
+                        if (tab.content) {
+                            collectRules(tab.content, isVisible && !isHidden);
+                        }
+                    });
+                }
+            });
+        };
+        collectRules(this.processedSchemaCache.components);
+        // Preserve previously-entered values across a re-render.
+        var previousValues = this.formState ? __assign({}, this.formState.values) : __assign({}, this.initialValuesCache);
+        this.formState = {
+            values: Object.assign(Object.create(null), this.initialValuesCache, previousValues),
+            errors: this.enablePersistence ? this.formState.errors : Object.create(null)
+        };
+        // Restore any previously-entered values that the merge above pruned.
+        if (previousValues) {
+            Object.keys(previousValues).forEach(function (id) {
+                if (!(id in _this.formState.values)) {
+                    _this.formState.values[id] = previousValues[id];
+                }
+            });
+        }
+        // (Re)create the EJ2 native FormValidator bound to the host element.
+        if (this.validator) {
+            try {
+                this.validator.refresh();
+                this.validator.destroy();
+            }
+            catch (e) { /* swallow */ }
+            this.validator = null;
+        }
+        var self = this;
+        this.validator = new FormValidator(this.element, {
+            rules: rules,
+            locale: this.locale,
+            ignore: 'e-hidden',
+            errorClass: 'e-error',
+            validClass: 'e-valid',
+            errorElement: 'div',
+            errorContainer: 'div',
+            customPlacement: function (inputElement, errorElement) {
+                // Locate the per-field error-message slot rendered in
+                // `renderField` by its id (`error-<component.id>`). The
+                // input's `name` attribute matches `component.id`
+                // (set in renderField), so `getElementById('error-' + name)`
+                // resolves the slot and the validator's error element is
+                // appended into it (FormValidator sets
+                // `errorElement.style.display = 'block'` before invoking
+                // customPlacement, which makes the slot visible).
+                var name = inputElement.getAttribute('name');
+                if (!name) {
+                    if (inputElement.parentElement) {
+                        inputElement.parentElement.appendChild(errorElement);
+                    }
+                    return;
+                }
+                var slot = document.getElementById("error-" + name);
+                if (slot) {
+                    while (slot.firstChild) {
+                        slot.removeChild(slot.firstChild);
+                    }
+                    slot.appendChild(errorElement);
+                    slot.style.display = 'block';
+                }
+                else if (inputElement.parentElement) {
+                    inputElement.parentElement.appendChild(errorElement);
+                }
+            },
+            validationComplete: function (args) {
+                // Mirror the validator's error state into formState.errors so
+                // submit-time isValid and renderField's initial-paint logic
+                // (which read formState.errors[id]) continue to work.
+                self.syncFormStateErrors();
+                // Keep the per-field error slot's visibility in sync with
+                // the validator's outcome. On `success`, the FormValidator's
+                // `hideMessage` sets its own error element's `display: none`,
+                // but our slot (`error-<id>`) would otherwise keep the stale
+                // error element appended. Clear + hide the slot on success.
+                if (args && args.inputName) {
+                    var slot = document.getElementById("error-" + args.inputName);
+                    if (slot) {
+                        if (args.status === 'success') {
+                            while (slot.firstChild) {
+                                slot.removeChild(slot.firstChild);
+                            }
+                            slot.style.display = 'none';
+                        }
+                        else if (args.status === 'failure') {
+                            slot.style.display = 'block';
+                        }
+                    }
+                }
+            },
+            submit: function (event) {
+                if (!self.validator) {
+                    return;
+                }
+                var isValid = self.validator.validate();
+                if (!isValid) {
+                    if (event && typeof event.preventDefault === 'function') {
+                        event.preventDefault();
+                    }
+                    return;
+                }
+                self.handleSubmitData(__assign({}, self.formState.values));
+                if (event && typeof event.preventDefault === 'function') {
+                    event.preventDefault();
+                }
+            },
+            reset: function () {
+            }
+        });
+        // Apply cached previous values to the FormValidator's input elements.
+        // The validator reads live values from inputs at validate() time, but
+        // initial values seeded here ensure any pre-populated values are
+        // respected even if a field is never focused before submit.
+        if (previousValues) {
+            Object.keys(previousValues).forEach(function (id) {
+                var inputEl = _this.validator.getInputElement(id);
+                if (inputEl && previousValues[id] !== undefined && previousValues[id] !== null) {
+                    try {
+                        inputEl.value = String(previousValues[id]);
+                    }
+                    catch (e) { /* swallow */ }
+                }
+            });
+        }
+    };
+    /**
+     * @private
+     *
+     * Mirror the FormValidator's `errorRules` array into `this.formState.errors`
+     * keyed by field `name` (= `component.id`). Called after every
+     * `validationComplete` callback and from submit-time `isValid` reads.
+     */
+    FormRenderer.prototype.syncFormStateErrors = function () {
+        var errors = {};
+        if (this.validator) {
+            var errorRules = this.validator.errorRules || [];
+            for (var _i = 0, errorRules_1 = errorRules; _i < errorRules_1.length; _i++) {
+                var rule = errorRules_1[_i];
+                if (rule && rule.name) {
+                    errors[rule.name] = rule.message;
+                }
+            }
+        }
+        this.formState.errors = errors;
+    };
+    /**
+     * @private
+     */
+    FormRenderer.prototype.buildInitialValues = function () {
+        var _this = this;
+        var values = {};
+        var allComponents = this.collectAllComponents(this.processedSchemaCache.components);
+        var componentIds = new Set();
+        allComponents.forEach(function (comp) {
+            if (comp.type === 'staticHtml') {
+                componentIds.add(comp.id);
+                return;
+            }
+            if (comp.type === 'dataGrid') {
+                values[comp.id] = Array.isArray(comp.dataSource)
+                    ? comp.dataSource
+                    : [];
+            }
+            if (comp.defaultValue !== undefined) {
+                values[comp.id] = comp.defaultValue;
+            }
+            else {
+                switch (comp.type) {
+                    case 'checkbox':
+                    case 'switch':
+                        values[comp.id] = false;
+                        break;
+                    default:
+                        break;
+                }
+            }
+            componentIds.add(comp.id);
+        });
+        if (this.formState) {
+            Object.keys(this.formState.values)
+                .filter(function (key) { return !componentIds.has(key); })
+                .forEach(function (key) {
+                delete (_this.formState).values[key];
+            });
+        }
+        return values;
+    };
+    // ----------------------------------------------------------------------
+    // Expression engine init (used by G9)
+    // ----------------------------------------------------------------------
+    /**
+     * Initialize the expression engine dependency graph + computed-field set.
+     * @private
+     */
+    FormRenderer.prototype.initExpressionEngine = function () {
+        if (!this.processedSchemaCache.components || this.processedSchemaCache.components.length === 0) {
+            return;
+        }
+        try {
+            var engine = this.expressionEngine;
+            var allComponents = this.collectAllComponents(this.processedSchemaCache.components);
+            var graph = engine.buildDependencyGraph(allComponents);
+            var cycles = engine.detectCircularDependencies(graph);
+            if (cycles.length > 0) {
+            }
+            this.expressionDependencyGraph = graph;
+            var computedFields_1 = new Set();
+            allComponents.forEach(function (comp) {
+                if (comp.expressionValue) {
+                    computedFields_1.add(comp.id);
+                }
+            });
+            this.computedFieldNames = computedFields_1;
+        }
+        catch (error) {
+            if (this.failure) {
+                this.trigger('failure', {
+                    error: error
+                });
+            }
+        }
+    };
+    /**
+     * @private
+     */
+    FormRenderer.prototype.disposeTooltipInstance = function (fieldId) {
+        var existingTooltip = this.tooltipRefs[fieldId] || null;
+        if (existingTooltip) {
+            try {
+                existingTooltip.destroy();
+            }
+            catch (e) {
+                this.trigger('failure', {
+                    error: e
+                });
+            }
+            this.renderedInstances = this.renderedInstances.filter(function (inst) { return inst !== existingTooltip; });
+            this.tooltipRefs[fieldId] = null;
+        }
+    };
+    FormRenderer.prototype.renderField = function (component) {
+        var _this = this;
+        var formState = this.formState;
+        var formValues = formState ? formState.values : {};
+        if (['panel', 'table', 'tabs', 'card', 'message', 'button', 'splitButton', 'staticHtml'].indexOf(component.type) !== -1) {
+            return null;
+        }
+        var conditionalReadOnly = ConditionalRuleEngine.isFieldReadOnly(component.conditions, formValues);
+        var conditionalDisabled = ConditionalRuleEngine.isFieldDisabled(component.conditions, formValues);
+        var conditionalRequired = ConditionalRuleEngine.isFieldRequired(component.conditions, formValues);
+        var conditionalValue = ConditionalRuleEngine.getConditionalValue(component.conditions, formValues);
+        var computedReadOnly = !!component.readOnly || conditionalReadOnly;
+        var computedDisabled = !!component.disabled || conditionalDisabled;
+        var computedRequired = !!component.required || conditionalRequired;
+        var minMaxConstraints = MinMaxRuleEngine.getConstraints(component.minMaxRange, formValues, component.type);
+        if (component.type === 'dateTime') {
+            var dateConstraints = MinMaxRuleEngine.getConstraints(component.minMaxRange, formValues, 'date');
+            var timeConstraints = MinMaxRuleEngine.getConstraints(component.minMaxTimeRange, formValues, 'time');
+            minMaxConstraints = {
+                minValue: undefined,
+                maxValue: undefined,
+                minDate: dateConstraints.minDate,
+                maxDate: dateConstraints.maxDate,
+                minTime: timeConstraints.minTime,
+                maxTime: timeConstraints.maxTime
+            };
+        }
+        var labelPos = component.labelPosition || 'top';
+        var labelWidth = component.labelWidth || 'auto';
+        var showLabel = !component.hideLabel && !!component.label &&
+            ['checkbox', 'button', 'staticHtml'].indexOf(component.type) === -1;
+        var shouldShowError = !!(formState && formState.errors[component.id]);
+        var isRequiredError = shouldShowError && !!(formState && formState.errors[component.id].indexOf('required') !== -1);
+        var hasError = shouldShowError && !(isRequiredError && !computedRequired);
+        // setValueWhen false→true transition tracking.
+        var conditionIsActive = conditionalValue !== undefined;
+        var wasConditionActive = this.conditionalValueApplied[component.id] || false;
+        if (formState) {
+            if (conditionIsActive && !wasConditionActive) {
+                formState.values[component.id] = conditionalValue;
+                this.conditionalValueApplied[component.id] = true;
+            }
+            else if (!conditionIsActive && wasConditionActive) {
+                this.conditionalValueApplied[component.id] = false;
+            }
+        }
+        var formGroup = createElement('div', {
+            className: 'form-group',
+            attrs: { 'data-field-id': component.id, 'data-fr-field': component.id }
+        });
+        var fieldWrapper = createElement('div', {
+            className: "field-wrapper label-" + labelPos.toLowerCase()
+        });
+        if (showLabel) {
+            var labelEl = createElement('label', {
+                className: 'field-label'
+            });
+            if (inputTargetTypes.indexOf(component.type) !== -1 || component.type === 'textarea') {
+                labelEl.setAttribute('for', !isNullOrUndefined(this.element.id) ? this.element.id + '-' + component.name : component.name);
+            }
+            labelEl.style.width = labelPos.toLowerCase() === 'left' ? labelWidth + "%" : 'auto';
+            var span = createElement('span');
+            span.textContent = component.label;
+            labelEl.appendChild(span);
+            if (computedRequired) {
+                var asterisk = createElement('span', { className: 'required-asterisk' });
+                asterisk.textContent = '*';
+                labelEl.appendChild(asterisk);
+            }
+            this.disposeTooltipInstance(component.id);
+            if (component.tooltip) {
+                var tooltipHost = createElement('span', {
+                    className: 'e-msg-icon e-icons e-circle-info tooltip-icon',
+                    attrs: {
+                        'aria-label': component.tooltip,
+                        title: component.tooltip,
+                        tabindex: '0',
+                        role: 'button',
+                        'aria-haspopup': 'true'
+                    }
+                });
+                tooltipHost.style.cursor = 'pointer';
+                tooltipHost.style.display = 'flex';
+                tooltipHost.style.alignItems = 'center';
+                tooltipHost.style.justifyContent = 'center';
+                tooltipHost.style.flexShrink = '0';
+                labelEl.appendChild(tooltipHost);
+                var tooltip = new Tooltip({ content: component.tooltip, enableRtl: this.enableRtl });
+                tooltip.appendTo(tooltipHost);
+                this.tooltipRefs[component.id] = tooltip;
+                this.renderedInstances.push(tooltip);
+            }
+            fieldWrapper.appendChild(labelEl);
+        }
+        var fieldInput = createElement('div', {
+            className: 'field-input',
+        });
+        var isIndexedRef = (component.type === 'radio' || component.type === 'checkboxGroup') && Array.isArray(component.options);
+        var setInputRef = isIndexedRef
+            ? function (el, idx) {
+                if (el && typeof idx === 'number') {
+                    _this.inputRefs[component.name + "_" + idx] = el;
+                }
+            }
+            : function (el) {
+                if (el) {
+                    _this.inputRefs[component.name] = el;
+                }
+            };
+        var mergedComponent = __assign({}, component, { readOnly: computedReadOnly, disabled: computedDisabled, required: computedRequired }, (minMaxConstraints.minValue !== undefined && { minValue: minMaxConstraints.minValue }), (minMaxConstraints.maxValue !== undefined && { maxValue: minMaxConstraints.maxValue }), (minMaxConstraints.minDate !== undefined && { minDate: minMaxConstraints.minDate }), (minMaxConstraints.maxDate !== undefined && { maxDate: minMaxConstraints.maxDate }), (minMaxConstraints.minTime !== undefined && { minTime: minMaxConstraints.minTime }), (minMaxConstraints.maxTime !== undefined && { maxTime: minMaxConstraints.maxTime }));
+        var onChangeHandler = function (value) {
+            if (component.type !== 'staticHtml') {
+                if (component.type === 'signature') {
+                    var ref = _this.inputRefs[value];
+                    value = ref.getSignature();
+                }
+                if (component.type === 'imageEditor') {
+                    var ref = _this.inputRefs[value];
+                    var imageData = ref.getImageData();
+                    var canvas = document.createElement('canvas');
+                    canvas.width = imageData.width;
+                    canvas.height = imageData.height;
+                    var context = canvas.getContext('2d');
+                    if (context) {
+                        context.putImageData(imageData, 0, 0);
+                    }
+                    value = canvas.toDataURL();
+                }
+                if (component.type === 'radio' || component.type === 'checkboxGroup') {
+                    var inputElement = _this.validator.getInputElement(component.id);
+                    inputElement.value = value;
+                }
+                value = formatDateValues(component, value);
+                if (_this.formState && formState) {
+                    _this.formState.values[component.id] = value;
+                    formState.values[component.id] = value;
+                }
+                _this.trigger('change', { fieldName: component.name, label: component.label || component.id, value: value });
+                _this.afterValueChange(component.id);
+            }
+        };
+        var targetTag = inputTargetTypes.indexOf(component.type) !== -1
+            ? 'input' : component.type === 'textarea' ? 'textarea' : 'div';
+        var target = createElement(targetTag, {
+            attrs: { 'aria-label': component.label + " " + component.type }
+        });
+        if (component.type === 'radio' || component.type === 'checkboxGroup') {
+            var inputEl = createElement('input');
+            inputEl.id = !isNullOrUndefined(this.element.id) ? this.element.id + '-' + component.name : component.name;
+            inputEl.setAttribute('name', component.id);
+            inputEl.style.display = 'none';
+            inputEl.setAttribute('aria-hidden', 'true');
+            target.appendChild(inputEl);
+        }
+        else {
+            target.id = !isNullOrUndefined(this.element.id) ? this.element.id + '-' + component.name : component.name;
+            target.setAttribute('name', component.id);
+        }
+        fieldInput.appendChild(target);
+        var instance = renderFormField({
+            component: mergedComponent,
+            value: formState ? formState.values[component.id] : undefined,
+            onChange: onChangeHandler,
+            formState: formState,
+            settings: this.processedSchemaCache.settings,
+            onBlur: function () {
+                if (formState && component.type !== 'staticHtml') {
+                    if (_this.validator) {
+                        try {
+                            _this.beforeValidate(component.id);
+                            _this.validator.validate(component.id);
+                        }
+                        catch (e) { /* swallow */ }
+                        _this.syncFormStateErrors();
+                    }
+                }
+            },
+            ref: setInputRef,
+            hasError: hasError,
+            locale: this.locale,
+            components: this.collectAllComponents(this.processedSchemaCache.components),
+            enableRtl: this.enableRtl,
+            target: target,
+            l10n: this.l10n
+        });
+        if (Array.isArray(instance)) {
+            instance.forEach(function (entry) {
+                if (entry && typeof entry.destroy === 'function') {
+                    _this.renderedInstances.push(entry);
+                }
+                else if (entry instanceof HTMLElement) {
+                    for (var _i = 0, _a = Object.keys(_this.inputRefs); _i < _a.length; _i++) {
+                        var key = _a[_i];
+                        var inst = _this.inputRefs[key];
+                        var hostEl = inst && (inst.element || inst.target || (inst.hostElement && inst.hostElement()));
+                        if (hostEl && (hostEl === entry || entry.contains(hostEl))) {
+                            _this.renderedInstances.push(inst);
+                        }
+                    }
+                }
+            });
+        }
+        else if (instance) {
+            if (typeof instance.destroy === 'function') {
+                this.renderedInstances.push(instance);
+            }
+            else if (instance instanceof HTMLElement) {
+                for (var _i = 0, _a = Object.keys(this.inputRefs); _i < _a.length; _i++) {
+                    var key = _a[_i];
+                    var inst = this.inputRefs[key];
+                    var hostEl = inst && (inst.element || inst.target || (inst.hostElement && inst.hostElement()));
+                    if (hostEl && (hostEl === instance || instance.contains(hostEl))) {
+                        this.renderedInstances.push(inst);
+                    }
+                }
+            }
+        }
+        var errorSlot = createElement('div', {
+            id: 'error-' + (component.id || component.name || component.label),
+            className: 'e-error-message',
+            attrs: { role: 'alert', 'aria-live': 'assertive' }
+        });
+        errorSlot.style.display = 'none';
+        if (hasError && formState && formState.errors[component.id]) {
+            errorSlot.textContent = formState.errors[component.id];
+            errorSlot.classList.add('e-error');
+            errorSlot.style.display = 'block';
+        }
+        fieldInput.appendChild(errorSlot);
+        fieldWrapper.appendChild(fieldInput);
+        formGroup.appendChild(fieldWrapper);
+        if (component.description) {
+            var desc = createElement('div', {
+                className: 'field-description',
+                attrs: { 'aria-describedby': "description-" + component.label }
+            });
+            desc.textContent = component.description;
+            formGroup.appendChild(desc);
+        }
+        return formGroup;
+    };
+    /**
+     * @private
+     */
+    FormRenderer.prototype.renderComponent = function (component) {
+        var _this = this;
+        var formState = this.formState;
+        var formValues = formState ? formState.values : {};
+        var isVisible = component.visible === false
+            ? false
+            : ConditionalRuleEngine.isFieldVisible(component.conditions, formValues);
+        var isHidden = ConditionalRuleEngine.isFieldHidden(component.conditions, formValues);
+        if (!isVisible || isHidden) {
+            if (formState && formState.values[component.id] !== undefined && formState.values[component.id] !== null) {
+                formState.values[component.id] = null;
+            }
+            return null;
+        }
+        // Re-attach preserved subtree for expensive / remote-data components
+        // (dataGrid / dropdown / multiselect / checkboxGroup / lookup). The
+        // subtree was detached in `rerenderForm` before the rest of the tree
+        // was destroyed; re-attaching it here avoids a re-fetch of remote
+        // data sources and prevents the visible blink of a fresh render.
+        if (FormRenderer_1.PRESERVABLE_TYPES.has(component.type) && this.preservedFields.has(component.id)) {
+            var preservedNode = this.preservedFields.get(component.id);
+            if (preservedNode) {
+                this.preservedFields.delete(component.id);
+                return preservedNode;
+            }
+        }
+        switch (component.type) {
+            case 'panel': {
+                var fieldset = createElement('fieldset', {
+                    className: "form-panel-renderer " + (component.cssClass || '')
+                });
+                fieldset.style.minInlineSize = 'unset';
+                if (component.label && !component.hideLabel) {
+                    var legend = createElement('legend', {
+                        className: !component.hideBorders ? 'panel-legend' : ''
+                    });
+                    legend.textContent = component.label;
+                    fieldset.appendChild(legend);
+                }
+                var content_1 = createElement('div', { className: 'panel-content' });
+                (component.children || []).forEach(function (child) {
+                    var rendered = _this.renderComponent(child);
+                    if (rendered) {
+                        content_1.appendChild(rendered);
+                    }
+                });
+                fieldset.appendChild(content_1);
+                return fieldset;
+            }
+            case 'table': {
+                var tableRows = component.rows || (component.tableCells ? component.tableCells.length : 2);
+                var tableCols = component.columns || (component.tableCells && component.tableCells[0] ? component.tableCells[0].length : 2);
+                var defaultColSpan = Math.floor(12 / tableCols);
+                var columnWidthsProp = component.columnWidths;
+                var splittedWidths = columnWidthsProp ? splitWidths(columnWidthsProp.widths) : [];
+                var tableDiv = createElement('div', {
+                    className: "form-table-renderer " + (component.hideBorders ? '' : 'table-border') + " " + (component.cssClass || ''),
+                    attrs: { role: 'group', 'aria-label': component.label || 'Table Layout' }
+                });
+                for (var rowIndex = 0; rowIndex < tableRows; rowIndex++) {
+                    var rowDiv = createElement('div', { className: 'e-form-table-row' });
+                    if (component.hideBorders) {
+                        rowDiv.style.display = 'flex';
+                        rowDiv.style.gap = '1.5rem';
+                    }
+                    var _loop_1 = function (colIndex) {
+                        var cellComponents = (component.tableCells && component.tableCells[rowIndex] &&
+                            component.tableCells[rowIndex][colIndex]) || [];
+                        var cellSpan = defaultColSpan;
+                        var colWidthValue = splittedWidths[colIndex];
+                        var isSingleColumn = tableCols === 1;
+                        var cellStyle = isSingleColumn ? { width: '100%' } : (colWidthValue ? { width: colWidthValue + "%" } : {});
+                        var allNullWidths = !columnWidthsProp || (Array.isArray(columnWidthsProp.widths) && columnWidthsProp.widths.every(function (w) { return w === null; }));
+                        var isFirstRow = rowIndex === 0;
+                        var cellDiv = createElement('div', {
+                            className: "e-form-table-cell " + (colWidthValue ? '' : allNullWidths ? "col-" + cellSpan : '')
+                        });
+                        if (component.hideBorders) {
+                            Object.assign(cellDiv.style, cellStyle, { padding: isFirstRow ? '0' : '12px 0 0 0' });
+                        }
+                        else {
+                            Object.assign(cellDiv.style, cellStyle);
+                        }
+                        cellComponents.forEach(function (comp) {
+                            var rendered = _this.renderComponent(comp);
+                            if (rendered) {
+                                cellDiv.appendChild(rendered);
+                            }
+                        });
+                        rowDiv.appendChild(cellDiv);
+                    };
+                    for (var colIndex = 0; colIndex < tableCols; colIndex++) {
+                        _loop_1(colIndex);
+                    }
+                    tableDiv.appendChild(rowDiv);
+                }
+                return tableDiv;
+            }
+            case 'tabs': {
+                var tabsDiv = createElement('div', {
+                    className: "form-tabs-renderer " + (component.cssClass || '')
+                });
+                var tabHost = createElement('div', {
+                    className: 'e-tab'
+                });
+                tabHost.id = component.id;
+                var tabHeader_1 = createElement('div', {
+                    className: 'e-tab-header'
+                });
+                var tabContent_1 = createElement('div', {
+                    className: 'e-content'
+                });
+                tabHost.appendChild(tabHeader_1);
+                tabHost.appendChild(tabContent_1);
+                tabsDiv.appendChild(tabHost);
+                // Build the tab's host DOM up front so each `.e-content > .e-item`
+                // wrapper exists during initialization. Using the JSON `items`
+                // path causes EJ2 to lazily materialize only the active content
+                // panel, which leaves the remaining rendered tab bodies missing
+                // from the live DOM. By seeding the HTML markup structure and
+                // inserting the already-rendered live child nodes into every
+                // content item, the bound EJ2 instances stay attached and all
+                // tabs render correctly.
+                (component.tabItems || []).forEach(function (tab) {
+                    var headerItem = createElement('div');
+                    headerItem.textContent = tab.header;
+                    tabHeader_1.appendChild(headerItem);
+                    var contentItem = createElement('div');
+                    var contentDiv = createElement('div', { className: 'tab-content-renderer' });
+                    (tab.content || []).forEach(function (comp) {
+                        var rendered = _this.renderComponent(comp);
+                        if (rendered) {
+                            contentDiv.appendChild(rendered);
+                        }
+                    });
+                    contentItem.appendChild(contentDiv);
+                    tabContent_1.appendChild(contentItem);
+                });
+                var tab = new Tab({
+                    enableRtl: this.enableRtl,
+                    cssClass: component.cssClass,
+                    enablePersistence: true,
+                    animation: { previous: { effect: 'None' }, next: { effect: 'None' } },
+                    selected: function (args) {
+                        if (typeof window === 'undefined')
+                            return null;
+                        try {
+                            window.localStorage.setItem('tab' + component.id, JSON.stringify({
+                                selectedItem: args.selectedIndex
+                            }));
+                        }
+                        catch (_a) {
+                        }
+                    }
+                });
+                tab.appendTo(tabHost);
+                this.renderedInstances.push(tab);
+                return tabsDiv;
+            }
+            case 'card': {
+                var fieldset = createElement('fieldset', {
+                    className: "e-card form-card-renderer " + (component.cssClass || '')
+                });
+                fieldset.style.minInlineSize = 'unset';
+                fieldset.style.padding = '0';
+                var header = createElement('div', { className: 'e-card-header' });
+                var caption = createElement('div', { className: 'e-card-header-caption' });
+                var title = createElement('div', { className: 'e-card-title' });
+                title.textContent = component.cardTitle || component.label || 'Card Title';
+                caption.appendChild(title);
+                if (component.cardSubtitle) {
+                    var sub = createElement('div', { className: 'e-card-sub-title' });
+                    sub.textContent = component.cardSubtitle;
+                    caption.appendChild(sub);
+                }
+                header.appendChild(caption);
+                fieldset.appendChild(header);
+                var content_2 = createElement('div', { className: 'e-card-content card-content' });
+                (component.children || []).forEach(function (child) {
+                    var rendered = _this.renderComponent(child);
+                    if (rendered) {
+                        content_2.appendChild(rendered);
+                    }
+                });
+                fieldset.appendChild(content_2);
+                return fieldset;
+            }
+            case 'staticHtml': {
+                var renderer = new StaticHtmlRenderer({
+                    content: component.defaultValue || '<p>HTML content</p>',
+                    id: component.id,
+                    enableHtmlSanitizer: component.enableHtmlSanitizer
+                });
+                var el = renderer.render();
+                this.renderedInstances.push(renderer);
+                return el;
+            }
+            case 'message': {
+                var wrapper = createElement('div', { className: 'form-group' });
+                var target = createElement('div');
+                target.id = component.name;
+                target.setAttribute('name', component.id);
+                wrapper.appendChild(target);
+                var instance = renderFormField({
+                    component: component,
+                    locale: this.locale,
+                    value: undefined,
+                    onChange: function () { },
+                    enableRtl: this.enableRtl,
+                    target: target,
+                    ref: function (el, idx) {
+                        if (idx !== undefined) {
+                            _this.inputRefs[component.name + "_" + idx] = el;
+                        }
+                        else {
+                            _this.inputRefs[component.name] = el;
+                        }
+                    },
+                });
+                if (Array.isArray(instance)) {
+                    instance.forEach(function (entry) {
+                        if (entry) {
+                            _this.renderedInstances.push(entry);
+                        }
+                    });
+                }
+                else if (instance) {
+                    this.renderedInstances.push(instance);
+                }
+                return wrapper;
+            }
+            case 'button': {
+                var buttonlDisabled = ConditionalRuleEngine.isFieldDisabled(component.conditions, formValues);
+                var buttonComputed = !!component.disabled || buttonlDisabled;
+                var wrapper = createElement('div', { className: 'form-group' });
+                var target = createElement('div');
+                target.id = component.name;
+                target.setAttribute('name', component.id);
+                wrapper.appendChild(target);
+                var handleButtonClick = function (event) {
+                    if (_this.buttonClick) {
+                        var label = component.buttonsGroups
+                            ? (event.target && event.target.ej2_instances ? event.target.ej2_instances[0].content : '')
+                            : component.label || '';
+                        _this.trigger('buttonClick', { fieldName: component.name, label: label, event: event });
+                    }
+                    var button = event.target;
+                    if (button.type && button.type === 'reset') {
+                        var form = button.closest('form');
+                        if (form) {
+                            form.querySelectorAll('input[type="checkbox"]').forEach(function (cb) {
+                                (cb.ej2_instances[0]).checked = false;
+                            });
+                        }
+                        _this.formState.values = {};
+                        form.reset();
+                        _this.rerenderForm();
+                        _this.validator.destroy();
+                    }
+                };
+                var instance = renderFormField({
+                    component: __assign({}, component, { disabled: buttonComputed }),
+                    value: undefined,
+                    onChange: function () { },
+                    locale: this.locale,
+                    onClick: handleButtonClick,
+                    ref: function (el, idx) {
+                        if (idx !== undefined) {
+                            _this.inputRefs[component.name + "_" + idx] = el;
+                        }
+                        else {
+                            _this.inputRefs[component.name] = el;
+                        }
+                    },
+                    enableRtl: this.enableRtl,
+                    target: target
+                });
+                if (Array.isArray(instance)) {
+                    instance.forEach(function (entry) {
+                        if (entry) {
+                            _this.renderedInstances.push(entry);
+                        }
+                    });
+                }
+                else if (instance) {
+                    this.renderedInstances.push(instance);
+                }
+                return wrapper;
+            }
+            case 'splitButton': {
+                var splitButtonDisabled = ConditionalRuleEngine.isFieldDisabled(component.conditions, formValues);
+                var computedDisabled = !!component.disabled || splitButtonDisabled;
+                var wrapper = createElement('div', { className: 'form-group' });
+                var target = createElement('div');
+                target.id = component.name;
+                target.setAttribute('name', component.id);
+                wrapper.appendChild(target);
+                var handleSplitButtonEvent = function (event) {
+                    if (_this.buttonClick) {
+                        _this.trigger('buttonClick', { fieldName: component.name, label: component.label || '', event: event });
+                    }
+                };
+                var instance = renderFormField({
+                    component: __assign({}, component, { disabled: computedDisabled }),
+                    value: undefined,
+                    locale: this.locale,
+                    onChange: function () { },
+                    onClick: handleSplitButtonEvent,
+                    ref: function (el) { if (el) {
+                        _this.inputRefs[component.name] = el;
+                    } },
+                    enableRtl: this.enableRtl,
+                    target: target
+                });
+                if (Array.isArray(instance)) {
+                    instance.forEach(function (entry) {
+                        if (entry) {
+                            _this.renderedInstances.push(entry);
+                        }
+                    });
+                }
+                else if (instance) {
+                    this.renderedInstances.push(instance);
+                }
+                return wrapper;
+            }
+            default:
+                return this.renderField(component);
+        }
+    };
+    /**
+     * @private
+     */
+    FormRenderer.prototype.afterValueChange = function (changedFieldId) {
+        if (!this.formState) {
+            return;
+        }
+        this.currentFormValues = __assign({}, this.formState.values);
+        this.evaluateExpressions();
+        this.retriggerCustomValidation();
+        this.beforeValidate(changedFieldId);
+        this.validator.validate(changedFieldId);
+        this.syncFormStateErrors();
+        // Only schedule a full-form re-render when the changed field is a
+        // conditional trigger (i.e. some other field's visibility/disabled/
+        // required/readOnly/valueWhen references its id). Changes to fields
+        // that nothing depends on skip the expensive DOM teardown + rebuild,
+        // keeping keystroke latency low for non-conditional inputs.
+        if (changedFieldId && this.isConditionalTrigger(changedFieldId)) {
+            this.scheduleRerender(changedFieldId);
+        }
+    };
+    /**
+     * @private
+     */
+    FormRenderer.prototype.beforeValidate = function (fieldId) {
+        var infoElement = this.element.querySelector("#" + fieldId + "-info");
+        if (infoElement && infoElement.classList.contains('e-error')) {
+            infoElement.classList.remove('e-error');
+        }
+        var inputElement = this.getInputElementByName(fieldId);
+        var inputParent = inputElement.parentElement;
+        var grandParent = inputParent.parentElement;
+        if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') ||
+            (inputElement.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {
+            inputParent.classList.remove('e-error');
+        }
+        else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper'))) {
+            grandParent.classList.remove('e-error');
+        }
+        else {
+            inputElement.classList.remove('e-error');
+        }
+        if (this.validator) {
+            this.validator.errorRules = [];
+        }
+    };
+    FormRenderer.prototype.scheduleRerender = function (changedFieldId) {
+        var _this = this;
+        if (changedFieldId) {
+            this.pendingChangedFieldIds.add(changedFieldId);
+        }
+        if (this.rerenderScheduled) {
+            return;
+        }
+        this.rerenderScheduled = true;
+        Promise.resolve().then(function () {
+            _this.rerenderScheduled = false;
+            var changedIds = new Set(_this.pendingChangedFieldIds);
+            _this.pendingChangedFieldIds.clear();
+            _this.rerenderForm(changedIds);
+        });
+    };
+    /**
+     * @private
+     *
+     * Recursively walk a `ConditionType` (a `ConditionalRule { field }` leaf
+     * or a `CompositeConditionalRule { rules: [...] }` tree) and collect the
+     * `field` ids of every leaf rule into the supplied `acc` set. These are
+     * the trigger ids whose value changes can affect the visibility/disabled/
+     * required/readOnly/valueWhen of the component that owns this `conditions`.
+     */
+    FormRenderer.prototype.collectConditionFieldIds = function (condition, acc) {
+        if (!condition) {
+            return;
+        }
+        if (typeof condition.field === 'string') {
+            // Leaf rule.
+            acc.add(condition.field);
+        }
+        else if (Array.isArray(condition.rules)) {
+            // Composite (and/or) — recurse.
+            for (var _i = 0, _a = condition.rules; _i < _a.length; _i++) {
+                var sub = _a[_i];
+                this.collectConditionFieldIds(sub, acc);
+            }
+        }
+    };
+    FormRenderer.prototype.collectDataSourceReferenceIds = function (value, allComps, target) {
+        if (typeof value !== 'string') {
+            return;
+        }
+        var matches = value.match(/\{([^}]+)\}/g);
+        if (!matches) {
+            return;
+        }
+        var _loop_2 = function (match) {
+            var componentName = match.slice(1, -1);
+            var referencedComp = allComps.find(function (c) { return c.name === componentName; });
+            if (referencedComp && referencedComp.id) {
+                target.add(referencedComp.id);
+            }
+        };
+        for (var _i = 0, matches_1 = matches; _i < matches_1.length; _i++) {
+            var match = matches_1[_i];
+            _loop_2(match);
+        }
+    };
+    /**
+     * @private
+     *
+     * Build `this.conditionalTriggerFieldIds` — the set of every
+     * `component.id` that is referenced by *any* other component's
+     * `conditions` (visibleWhen / hideWhen / disabledWhen / requiredWhen /
+     * readOnlyWhen / setValueWhen / choiceBasedField.primaryFieldId).
+     * Only changes to ids in this set can affect another field's
+     * visibility/enabled/required/value, so only they need to trigger a
+     * full-form re-render. Called once per schema during `render()`.
+     */
+    FormRenderer.prototype.buildConditionalDependencyMap = function () {
+        var triggers = new Set();
+        // Per-consumer dependency set (rebuilt each pass).
+        var consumerDeps = new Map();
+        var allComps = this.collectAllComponents(this.processedSchemaCache.components);
+        for (var _i = 0, allComps_1 = allComps; _i < allComps_1.length; _i++) {
+            var comp = allComps_1[_i];
+            var myDeps = new Set();
+            consumerDeps.set(comp.id, myDeps);
+            var conditions = comp.conditions;
+            if (conditions) {
+                var conditionKeys = [
+                    'visibleWhen',
+                    'hideWhen',
+                    'disabledWhen',
+                    'requiredWhen',
+                    'readOnlyWhen',
+                    'choiceBasedField',
+                    'conditionalData'
+                ];
+                for (var _a = 0, conditionKeys_1 = conditionKeys; _a < conditionKeys_1.length; _a++) {
+                    var key = conditionKeys_1[_a];
+                    if (conditions[key]) {
+                        this.collectConditionFieldIds(conditions[key], triggers);
+                        this.collectConditionFieldIds(conditions[key], myDeps);
+                    }
+                }
+                if (Array.isArray(conditions.conditionalData)) {
+                    for (var _b = 0, _c = conditions.conditionalData; _b < _c.length; _b++) {
+                        var item = _c[_b];
+                        if (item && item.condition) {
+                            this.collectConditionFieldIds(item.condition, triggers);
+                            this.collectConditionFieldIds(item.condition, myDeps);
+                        }
+                        // DataGrid conditional columns
+                        if (item && Array.isArray(item.conditions)) {
+                            for (var _d = 0, _e = item.conditions; _d < _e.length; _d++) {
+                                var subCond = _e[_d];
+                                this.collectConditionFieldIds(subCond, triggers);
+                                this.collectConditionFieldIds(subCond, myDeps);
+                            }
+                        }
+                    }
+                }
+                if (conditions.setValueWhen &&
+                    conditions.setValueWhen.condition) {
+                    this.collectConditionFieldIds(conditions.setValueWhen.condition, triggers);
+                    this.collectConditionFieldIds(conditions.setValueWhen.condition, myDeps);
+                }
+                if (conditions.choiceBasedField &&
+                    typeof conditions.choiceBasedField.primaryFieldId === 'string') {
+                    triggers.add(conditions.choiceBasedField.primaryFieldId);
+                    myDeps.add(conditions.choiceBasedField.primaryFieldId);
+                }
+            }
+            // ==========================================================
+            // DataGrid remote datasource dependencies
+            // Example:
+            // search.key = "{combobox}"
+            // filter.value = "{department}"
+            // Resolve component by NAME and add its ID as dependency.
+            // ==========================================================
+            var ds = comp.dataSource;
+            if ((comp.type === 'dataGrid') &&
+                ds &&
+                ds.type === 'url') {
+                if (ds.search && typeof ds.search.key === 'string') {
+                    this.collectDataSourceReferenceIds(ds.search.key, allComps, triggers);
+                    this.collectDataSourceReferenceIds(ds.search.key, allComps, myDeps);
+                }
+                if (Array.isArray(ds.filters)) {
+                    for (var _f = 0, _g = ds.filters; _f < _g.length; _f++) {
+                        var filter = _g[_f];
+                        if (typeof filter.value === 'string') {
+                            this.collectDataSourceReferenceIds(filter.value, allComps, triggers);
+                            this.collectDataSourceReferenceIds(filter.value, allComps, myDeps);
+                        }
+                    }
+                }
+            }
+        }
+        this.conditionalTriggerFieldIds = triggers;
+        this.consumerDependencyMap = consumerDeps;
+    };
+    /**
+     * @private
+     *
+     * Returns `true` if a value change to `fieldId` can affect any other
+     * field's conditional state (visibility/disabled/required/readOnly/
+     * valueWhen/choiceBasedField) — i.e. `fieldId` is in the
+     * `conditionalTriggerFieldIds` set built by
+     * `buildConditionalDependencyMap`. Used by `afterValueChange` to skip
+     * the expensive full-form re-render when the changed field is not a
+     * conditional trigger.
+     */
+    FormRenderer.prototype.isConditionalTrigger = function (fieldId) {
+        return this.conditionalTriggerFieldIds.has(fieldId);
+    };
+    /**
+     * @private
+     *
+     * Tear down the rendered tree and re-render it, preserving user-entered
+     * `formState.values` (carried through `buildValidationRulesAndBridge`'s
+     * `previousValues` merge) and restoring keyboard focus to the field that
+     * had it before re-render (so a user typing in a textbox is not
+     * interrupted by a dependent field appearing/disappearing on the page).
+     */
+    FormRenderer.prototype.rerenderForm = function (changedFieldIds) {
+        var _this = this;
+        var changedIds = changedFieldIds || new Set();
+        var activeEl = document.activeElement;
+        var focusedName = activeEl && activeEl.getAttribute
+            ? activeEl.getAttribute('name')
+            : null;
+        var selectionStart = null;
+        var selectionEnd = null;
+        if (focusedName && activeEl && activeEl.selectionStart !== undefined) {
+            try {
+                selectionStart = activeEl.selectionStart;
+                selectionEnd = activeEl.selectionEnd;
+            }
+            catch (e) { /* not a text input — ignore */ }
+        }
+        var savedElementScrollTop = this.element.scrollTop;
+        var savedElementScrollLeft = this.element.scrollLeft;
+        var savedWindowScrollX = window.scrollX;
+        var savedWindowScrollY = window.scrollY;
+        this.preservedFields.clear();
+        var allComps = this.collectAllComponents(this.processedSchemaCache.components);
+        var _loop_3 = function (comp) {
+            if (!FormRenderer_1.PRESERVABLE_TYPES.has(comp.type)) {
+                return "continue";
+            }
+            var myDeps = this_1.consumerDependencyMap.get(comp.id);
+            var dependsOnChanged = false;
+            if (myDeps) {
+                changedIds.forEach(function (changedId) {
+                    if (myDeps.has(changedId)) {
+                        dependsOnChanged = true;
+                    }
+                });
+            }
+            if (dependsOnChanged) {
+                return "continue";
+            }
+            var liveNode = this_1.element.querySelector("[data-field-id=\"" + comp.id + "\"]");
+            if (liveNode && liveNode.parentElement) {
+                liveNode.parentElement.removeChild(liveNode);
+                this_1.preservedFields.set(comp.id, liveNode);
+            }
+        };
+        var this_1 = this;
+        for (var _i = 0, allComps_2 = allComps; _i < allComps_2.length; _i++) {
+            var comp = allComps_2[_i];
+            _loop_3(comp);
+        }
+        this.refreshing = true;
+        this.destroyRenderedExcludingPreserved();
+        this.removePreviousRoot();
+        if (this.validator) {
+            this.validator.destroy();
+        }
+        this.render();
+        this.refreshing = false;
+        try {
+            this.element.scrollTop = savedElementScrollTop;
+            this.element.scrollLeft = savedElementScrollLeft;
+            window.scrollTo(savedWindowScrollX, savedWindowScrollY);
+        }
+        catch (e) { /* swallow */ }
+        if (focusedName) {
+            var elToFocus = this.getInputElementByName(focusedName);
+            if (elToFocus && typeof elToFocus.focus === 'function') {
+                try {
+                    elToFocus.focus();
+                    if (selectionStart !== null && selectionEnd !== null &&
+                        typeof elToFocus.setSelectionRange === 'function') {
+                        try {
+                            elToFocus.setSelectionRange(selectionStart, selectionEnd);
+                        }
+                        catch (e) { /* swallow — non-text input */ }
+                    }
+                }
+                catch (e) { /* swallow */ }
+            }
+        }
+        // Drop preserved subtrees that were not re-attached (e.g. their
+        // field became hidden during this re-render). Their EJ2 instances
+        // are still in `renderedInstances`; destroy them now to avoid leaks.
+        if (this.preservedFields.size > 0) {
+            var stillKept_1 = [];
+            this.preservedFields.forEach(function (node, id) {
+                // If the node is no longer in the live document tree, the
+                // field was not re-attached (hidden / removed). Destroy it
+                // and remove the detached DOM node so it cannot be re-used.
+                if (!_this.element.contains(node) && !document.body.contains(node)) {
+                    _this.destroyPreservedSubtree(node);
+                    try {
+                        if (node.parentNode) {
+                            node.parentNode.removeChild(node);
+                        }
+                    }
+                    catch (e) {
+                        // swallow
+                    }
+                    _this.preservedFields.delete(id);
+                }
+                else {
+                    stillKept_1.push(id);
+                }
+            });
+            stillKept_1.forEach(function (id) { return _this.preservedFields.delete(id); });
+        }
+    };
+    /**
+     * @private
+     */
+    FormRenderer.prototype.removePreviousRoot = function () {
+        if (this.element) {
+            while (this.element.childNodes.length > 0) {
+                this.element.removeChild(this.element.firstChild);
+            }
+        }
+    };
+    /**
+     * @private
+     */
+    FormRenderer.prototype.destroyRenderedInstance = function (inst) {
+        if (!inst || typeof inst.destroy !== 'function') {
+            return;
+        }
+        var state = inst;
+        if (state.isDestroyed || state.destroyed || state.disposed) {
+            return;
+        }
+        var hostElement = inst.element || inst.target || (inst.hostElement && typeof inst.hostElement === 'function' ? inst.hostElement() : undefined);
+        try {
+            state.isDestroyed = true;
+            state.destroyed = true;
+            state.disposed = true;
+            inst.destroy();
+        }
+        catch (e) {
+            console.warn('FormRenderer: failed to destroy child instance.', e);
+        }
+        finally {
+            if (hostElement && hostElement.parentNode) {
+                try {
+                    hostElement.parentNode.removeChild(hostElement);
+                }
+                catch (e) {
+                }
+            }
+        }
+    };
+    /**
+     * @private
+     *
+     * Destroy all rendered EJ2 instances except those whose host element
+     * lives inside a preserved subtree (those are kept alive for re-use in
+     * the upcoming `render()` pass). Mirrors `destroyRendered` but skips
+     * instances rooted in `preservedFields` nodes.
+     */
+    FormRenderer.prototype.destroyRenderedExcludingPreserved = function () {
+        var survived = [];
+        var preservedNodes = Array.from(this.preservedFields.values());
+        var _loop_4 = function (inst) {
+            var hostEl = inst && (inst.element || inst.target || (inst.hostElement && inst.hostElement()));
+            var isPreserved = !!hostEl && preservedNodes.some(function (n) { return n === hostEl || n.contains(hostEl); });
+            if (isPreserved) {
+                survived.push(inst);
+            }
+            else {
+                this_2.destroyRenderedInstance(inst);
+            }
+        };
+        var this_2 = this;
+        for (var _i = 0, _a = this.renderedInstances; _i < _a.length; _i++) {
+            var inst = _a[_i];
+            _loop_4(inst);
+        }
+        this.renderedInstances = survived;
+        // Prune inputRefs whose host element lives in a destroyed subtree
+        // (preserved ones stay).
+        var inputRefKeys = Object.keys(this.inputRefs);
+        var _loop_5 = function (key) {
+            var inst = this_3.inputRefs[key];
+            var hostEl = inst && (inst.element || inst.target || (inst.hostElement && inst.hostElement()));
+            var isPreserved = !!hostEl && preservedNodes.some(function (n) { return n === hostEl || n.contains(hostEl); });
+            if (!isPreserved) {
+                delete this_3.inputRefs[key];
+            }
+        };
+        var this_3 = this;
+        for (var _b = 0, inputRefKeys_1 = inputRefKeys; _b < inputRefKeys_1.length; _b++) {
+            var key = inputRefKeys_1[_b];
+            _loop_5(key);
+        }
+        this.conditionalValueApplied = {};
+        this.expressionDependencyGraph = {};
+        this.computedFieldNames = new Set();
+        this.previousFormValues = {};
+        this.conditionalTriggerFieldIds = new Set();
+    };
+    /**
+     * @private
+     *
+     * Destroy EJ2 instances whose host element lives inside a preserved
+     * subtree that was NOT re-attached (field became hidden). Used during
+     * the post-render cleanup pass in `rerenderForm`.
+     */
+    FormRenderer.prototype.destroyPreservedSubtree = function (rootNode) {
+        var survived = [];
+        for (var _i = 0, _a = this.renderedInstances; _i < _a.length; _i++) {
+            var inst = _a[_i];
+            var hostEl = inst && (inst.element || inst.target || (inst.hostElement && inst.hostElement()));
+            if (hostEl && (hostEl === rootNode || rootNode.contains(hostEl))) {
+                this.destroyRenderedInstance(inst);
+            }
+            else {
+                survived.push(inst);
+            }
+        }
+        this.renderedInstances = survived;
+    };
+    FormRenderer.prototype.getInputElementByName = function (name) {
+        var inputEl = this.element.querySelector("[name=\"" + name + "\"]");
+        if (!inputEl) {
+            return null;
+        }
+        if (!inputEl.classList.contains('e-control')) {
+            var eControl = inputEl.parentElement ? inputEl.parentElement.querySelector('.e-control') : null;
+            if (eControl) {
+                return eControl;
+            }
+        }
+        return inputEl;
+    };
+    /**
+     * Evaluate expressions in topological order with type coercion.
+     * @private
+     */
+    FormRenderer.prototype.evaluateExpressions = function () {
+        if (!this.formState || !this.expressionEngine) {
+            return;
+        }
+        if (this.expressionEvaluationInProgress) {
+            return;
+        }
+        try {
+            this.expressionEvaluationInProgress = true;
+            var engine = this.expressionEngine;
+            var dependencyGraph = this.expressionDependencyGraph;
+            var formValues = this.formState.values || {};
+            var allComponents = this.collectAllComponents(this.processedSchemaCache.components);
+            var previousValues = this.previousFormValues;
+            var computedFieldNames = this.computedFieldNames;
+            var idToNameMap_1 = {};
+            allComponents.forEach(function (comp) {
+                if (comp.name) {
+                    idToNameMap_1[comp.id] = comp.name;
+                }
+            });
+            var contextValues = {};
+            var fvKeys = Object.keys(formValues);
+            for (var _i = 0, fvKeys_1 = fvKeys; _i < fvKeys_1.length; _i++) {
+                var componentId = fvKeys_1[_i];
+                var value = formValues[componentId];
+                var fieldName = idToNameMap_1[componentId];
+                if (fieldName) {
+                    contextValues[fieldName] = value;
+                }
+            }
+            var previousContextValues = __assign({}, previousValues);
+            Object.assign(previousValues, contextValues);
+            var changedFields = new Set();
+            var ctxKeys = Object.keys(contextValues);
+            var _loop_6 = function (fieldName) {
+                var fieldId = Object.keys(idToNameMap_1).find(function (id) { return idToNameMap_1[id] === fieldName; });
+                if (fieldId && contextValues[fieldName] !== previousContextValues[fieldName] && !computedFieldNames.has(fieldId)) {
+                    changedFields.add(fieldName);
+                }
+            };
+            for (var _a = 0, ctxKeys_1 = ctxKeys; _a < ctxKeys_1.length; _a++) {
+                var fieldName = ctxKeys_1[_a];
+                _loop_6(fieldName);
+            }
+            if (changedFields.size === 0) {
+                return;
+            }
+            var evaluationOrder = engine.getTopologicalOrder(dependencyGraph);
+            var _loop_7 = function (fieldName) {
+                var component = allComponents.find(function (c) { return c.name === fieldName; });
+                if (component && component.expressionValue) {
+                    computedFieldNames.add(component.id);
+                    try {
+                        var isVisible = component.visible !== false
+                            ? ConditionalRuleEngine.isFieldVisible(component.conditions, formValues)
+                            : false;
+                        if (isVisible) {
+                            var currentValues = {};
+                            var fvKeys2 = Object.keys(formValues);
+                            for (var _i = 0, fvKeys2_1 = fvKeys2; _i < fvKeys2_1.length; _i++) {
+                                var componentId = fvKeys2_1[_i];
+                                var value = formValues[componentId];
+                                var fn = idToNameMap_1[componentId];
+                                if (fn) {
+                                    currentValues[fn] = value;
+                                }
+                            }
+                            var result = engine.evaluate(component.expressionValue, currentValues);
+                            result = (typeof result === 'string' && result.indexOf('undefined') !== -1)
+                                ? result.replace(/undefined/g, '')
+                                : result;
+                            if (result !== null && result !== undefined && result !== '') {
+                                switch (component.type) {
+                                    case 'number': {
+                                        var numResult = Number(result);
+                                        result = isNaN(numResult) ? 0 : numResult;
+                                        break;
+                                    }
+                                    case 'checkbox':
+                                    case 'switch':
+                                        result = Boolean(result);
+                                        break;
+                                    case 'textbox':
+                                    case 'textarea':
+                                        result = String(result);
+                                        break;
+                                    case 'dateRange':
+                                    case 'checkboxGroup':
+                                    case 'multiselect':
+                                        break;
+                                    default:
+                                        result = String(result);
+                                        break;
+                                }
+                            }
+                            if (result !== null && result !== undefined && result !== formValues[component.id] && this_4.formState) {
+                                this_4.formState.values[component.id] = result;
+                                // Sync the underlying input element so the
+                                // FormValidator reads the new value on its
+                                // next validate() pass.
+                                if (this_4.validator) {
+                                    var inputEl = this_4.getInputElementByName(component.id);
+                                    if (inputEl) {
+                                        try {
+                                            if (inputEl.ej2_instances[0]) {
+                                                inputEl.ej2_instances[0].value = result;
+                                                // (inputEl as any).ej2_instances[0].refresh();
+                                            }
+                                            else {
+                                                (inputEl).value = String(result);
+                                            }
+                                        }
+                                        catch (e) { /* swallow */ }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    catch (error) {
+                        if (this_4.failure) {
+                            this_4.trigger('failure', {
+                                error: error
+                            });
+                        }
+                    }
+                }
+            };
+            var this_4 = this;
+            for (var _b = 0, evaluationOrder_1 = evaluationOrder; _b < evaluationOrder_1.length; _b++) {
+                var fieldName = evaluationOrder_1[_b];
+                _loop_7(fieldName);
+            }
+            Object.assign(previousValues, contextValues);
+        }
+        finally {
+            this.expressionEvaluationInProgress = false;
+        }
+    };
+    /**
+     * Re-trigger custom validation for changed + dependent fields.
+     * @private
+     */
+    FormRenderer.prototype.retriggerCustomValidation = function () {
+        var _this = this;
+        if (!this.formState) {
+            return;
+        }
+        if (!this.customValidationEngine) {
+            return;
+        }
+        try {
+            var allComponents_1 = this.collectAllComponents(this.processedSchemaCache.components);
+            var formValues_1 = this.formState.values || {};
+            var previousValues_1 = this.previousFormValues;
+            var changedFields_1 = new Set();
+            Object.keys(formValues_1).forEach(function (fieldId) {
+                if (formValues_1[fieldId] !== previousValues_1[fieldId]) {
+                    changedFields_1.add(fieldId);
+                }
+            });
+            if (changedFields_1.size === 0) {
+                return;
+            }
+            var fieldsToValidate_1 = new Set();
+            changedFields_1.forEach(function (fieldId) {
+                var component = allComponents_1.find(function (c) { return c.id === fieldId; });
+                if (component && component.customValidation && Array.isArray(component.customValidation)) {
+                    fieldsToValidate_1.add(fieldId);
+                }
+            });
+            allComponents_1.forEach(function (component) {
+                if (component.customValidation && Array.isArray(component.customValidation)) {
+                    component.customValidation.forEach(function (rule) {
+                        var deps = _this.customValidationEngine.extractDependencies(rule.expression);
+                        deps.forEach(function (dep) {
+                            var depComponent = allComponents_1.find(function (c) { return c.id === dep || c.name === dep; });
+                            if (depComponent && changedFields_1.has(depComponent.id)) {
+                                fieldsToValidate_1.add(component.id);
+                            }
+                        });
+                    });
+                }
+            });
+            this.previousFormValues = __assign({}, formValues_1);
+        }
+        catch (error) {
+            if (this.failure) {
+                this.trigger('failure', {
+                    error: error
+                });
+            }
+        }
+    };
+    /**
+     * @private
+     */
+    FormRenderer.prototype.handleSubmitData = function (data) {
+        var formState = this.formState;
+        var isValid = formState && formState.errors ? Object.keys(formState.errors).length === 0 : false;
+        var transformedData = {};
+        var formValues = formState ? formState.values : {};
+        var excludedTypes = new Set(['button', 'message', 'panel', 'table', 'tabs']);
+        var allComps = this.collectAllComponents(this.processedSchemaCache.components || []);
+        var excludedIds = new Set(allComps.filter(function (c) { return excludedTypes.has(c.type); }).map(function (c) { return c.id; }));
+        var hiddenFieldIds = new Set(allComps.filter(function (c) {
+            if (c.visible === false) {
+                return true;
+            }
+            if (c.conditions && c.conditions.visibleWhen) {
+                if (!ConditionalRuleEngine.isFieldVisible(c.conditions, formValues)) {
+                    return true;
+                }
+            }
+            if (c.conditions && c.conditions.hideWhen) {
+                if (ConditionalRuleEngine.isFieldHidden(c.conditions, formValues)) {
+                    return true;
+                }
+            }
+            return false;
+        }).map(function (c) { return c.id; }));
+        var disabledFieldIds = new Set(allComps.filter(function (c) {
+            if (c.disabled) {
+                return true;
+            }
+            if (c.conditions && c.conditions.disabledWhen) {
+                return ConditionalRuleEngine.isFieldDisabled(c.conditions, formValues);
+            }
+            return false;
+        }).map(function (c) { return c.id; }));
+        var dataKeys = Object.keys(data);
+        for (var _i = 0, dataKeys_1 = dataKeys; _i < dataKeys_1.length; _i++) {
+            var id = dataKeys_1[_i];
+            var val = data[id];
+            if (excludedIds.has(id) || hiddenFieldIds.has(id) || disabledFieldIds.has(id)) {
+                return;
+            }
+            var label = this.idToLabelCache[id] || id;
+            transformedData[label] = val;
+        }
+        if (this.submit) {
+            this.trigger('submit', { data: transformedData, isValid: isValid });
+        }
+    };
+    /**
+     * Retrieves the underlying Syncfusion form-input component instance by its field name. Use this to call Syncfusion component methods and properties.
+     */
+    FormRenderer.prototype.getComponent = function (name) {
+        return this.inputRefs[name] || null;
+    };
+    /**
+     * Re-normalize + re-render on `schema`/`locale`/`enableRtl` change.
+     * @private
+     */
+    FormRenderer.prototype.onPropertyChanged = function (newProps, oldProps) {
+        var reRender = false;
+        if (newProps.schema !== oldProps.schema) {
+            reRender = true;
+        }
+        if (newProps.locale !== oldProps.locale) {
+            reRender = true;
+        }
+        if (newProps.enableRtl !== oldProps.enableRtl) {
+            reRender = true;
+        }
+        if (newProps.layout !== oldProps.layout) {
+            reRender = true;
+        }
+        if (newProps.locale !== oldProps.locale) {
+            reRender = true;
+        }
+        if (!reRender) {
+            return;
+        }
+        // Tear down rendered children and re-render.
+        this.refreshing = true;
+        this.destroyRendered();
+        this.removePreviousRoot();
+        this.isInitialized = false;
+        this.render();
+        this.refreshing = false;
+    };
+    /**
+     * Destroy all child EJ2 instances, detach listeners, null refs.
+     * @private
+     */
+    FormRenderer.prototype.destroyRendered = function () {
+        var _this = this;
+        if (this.validator) {
+            try {
+                this.validator.destroy();
+            }
+            catch (e) {
+                this.trigger('failure', {
+                    error: e
+                });
+            }
+            this.validator = null;
+        }
+        this.renderedInstances.forEach(function (inst) {
+            _this.destroyRenderedInstance(inst);
+        });
+        this.renderedInstances = [];
+        this.removePreviousRoot();
+        this.inputRefs = {};
+        this.tooltipRefs = {};
+        this.conditionalValueApplied = {};
+        this.expressionDependencyGraph = {};
+        this.computedFieldNames = new Set();
+        this.previousFormValues = {};
+        this.conditionalTriggerFieldIds = new Set();
+        this.consumerDependencyMap = new Map();
+        this.preservedFields = new Map();
+        this.pendingChangedFieldIds = new Set();
+    };
+    /**
+     * Remove persisted tab selection state for this form when it is fully destroyed.
+     * @private
+     */
+    FormRenderer.prototype.clearPersistedTabSelections = function () {
+        if (typeof window === 'undefined')
+            return null;
+        try {
+            var components = (this.processedSchemaCache && this.processedSchemaCache.components)
+                ? this.processedSchemaCache.components
+                : [];
+            var allComps = this.collectAllComponents(components);
+            allComps.forEach(function (component) {
+                if (component.type === 'tabs' && component.id) {
+                    window.localStorage.removeItem('tab' + component.id);
+                }
+            });
+        }
+        catch (_a) {
+        }
+    };
+    /**
+     * Full component teardown.
+     * @private
+     */
+    FormRenderer.prototype.destroy = function () {
+        this.destroyRendered();
+        this.formState = { values: {}, errors: {} };
+        this.expressionEngine = null;
+        this.customValidationEngine = null;
+        this.clearEngineCaches();
+        this.clearPersistedTabSelections();
+        this.consumerDependencyMap = new Map();
+        this.preservedFields = new Map();
+        this.conditionalTriggerFieldIds = new Set();
+        _super.prototype.destroy.call(this);
+    };
+    /**
+     * @private
+     */
+    FormRenderer.prototype.clearEngineCaches = function () {
+        if (this.expressionEngine) {
+            try {
+                this.expressionEngine.clearCache();
+            }
+            catch (e) { /* swallow */ }
+        }
+        if (this.customValidationEngine) {
+            var inner = this.customValidationEngine.expressionEngine;
+            if (inner && typeof inner.clearCache === 'function') {
+                try {
+                    inner.clearCache();
+                }
+                catch (e) { /* swallow */ }
+            }
+        }
+    };
+    var FormRenderer_1;
+    /**
+     * Component types eligible for DOM preservation across re-renders.
+     * These types either bind remote data (dataGrid, lookup-backed
+     * dropdown/multiselect) or render many child options (checkboxGroup)
+     * and are noticeably expensive / flicker-prone to rebuild.
+     */
+    FormRenderer.PRESERVABLE_TYPES = new Set([
+        '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'
+    ]);
+    __decorate([
+        Property(null)
+    ], FormRenderer.prototype, "schema", void 0);
+    __decorate([
+        Property('SingleColumn')
+    ], FormRenderer.prototype, "layout", void 0);
+    __decorate([
+        Property('')
+    ], FormRenderer.prototype, "className", void 0);
+    __decorate([
+        Event()
+    ], FormRenderer.prototype, "submit", void 0);
+    __decorate([
+        Event()
+    ], FormRenderer.prototype, "change", void 0);
+    __decorate([
+        Event()
+    ], FormRenderer.prototype, "buttonClick", void 0);
+    __decorate([
+        Event()
+    ], FormRenderer.prototype, "failure", void 0);
+    __decorate([
+        Event()
+    ], FormRenderer.prototype, "created", void 0);
+    FormRenderer = FormRenderer_1 = __decorate([
+        NotifyPropertyChanges
+    ], FormRenderer);
+    return FormRenderer;
+}(Component));
+export { FormRenderer };
+export default FormRenderer;