@syncfusion/ej2-form-renderer 34.2.8 → 35.1.42

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

@@ -28,23 +28,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { Component, Collection, Property, Event, NotifyPropertyChanges, enableRipple, createElement, ChildProperty, isNullOrUndefined, L10n, getComponent, addClass, compile, SanitizeHtmlHelper } 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 { resolveCustomWidget } from './custom-widget-resolver';
+import { mergeSchema, inferTypeFromWidget } from '../common/json-converter';
 import { UniversalJsonParser } from '../common/parser';
 import { VALIDATION_REGEX, formatDateValues, splitWidths } from '../common/utils';
 import StaticHtmlRenderer from '../common/static-html-renderer';
-import { ConditionalRuleEngine } from '../common/conditional-rule-engine';
+import { ConditionalRuleEngine } from '../common/index';
 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',
@@ -68,6 +67,29 @@ var inputTargetTypes = [
 export var defaultLocale = {
     "unsupportedComponent": "Unsupported Component type"
 };
+/**
+ * Specifies the custom widget settings for rendering custom templates for existing FormComponentTypes.
+ */
+var CustomWidgetSetting = /** @class */ (function (_super) {
+    __extends(CustomWidgetSetting, _super);
+    function CustomWidgetSetting() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property(null)
+    ], CustomWidgetSetting.prototype, "template", void 0);
+    __decorate([
+        Property('')
+    ], CustomWidgetSetting.prototype, "type", void 0);
+    __decorate([
+        Property('')
+    ], CustomWidgetSetting.prototype, "templateId", void 0);
+    __decorate([
+        Property('')
+    ], CustomWidgetSetting.prototype, "fieldName", void 0);
+    return CustomWidgetSetting;
+}(ChildProperty));
+export { CustomWidgetSetting };
 /**
  * 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.
  *
@@ -82,131 +104,57 @@ export var defaultLocale = {
 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
+     * @private
      */
     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 () {
@@ -215,7 +163,6 @@ var FormRenderer = /** @class */ (function (_super) {
         this.expressionEngine = new ExpressionEngine();
     };
     /**
-     * Main render: normalize schema, build rules + initial values, render tree.
      * @private
      */
     FormRenderer.prototype.render = function () {
@@ -237,10 +184,12 @@ var FormRenderer = /** @class */ (function (_super) {
         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.isReact && this.portals) {
+            this.renderReactTemplates();
+        }
         if (this.formState && this.initialValuesCache) {
             var initKeys = Object.keys(this.initialValuesCache);
             for (var _i = 0, initKeys_1 = initKeys; _i < initKeys_1.length; _i++) {
@@ -264,21 +213,7 @@ var FormRenderer = /** @class */ (function (_super) {
             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 (component.type === 'tabs') {
-                var tabElement = rendered.querySelector('.e-control.e-tab');
-                var tabInstance = getComponent(tabElement, 'tab');
-                tabInstance.refreshOverflow();
+                _this.refreshRenderedComponent(component, rendered);
             }
         });
         if (this.created && !this.createdFired) {
@@ -290,6 +225,58 @@ var FormRenderer = /** @class */ (function (_super) {
             }, 0);
         }
     };
+    FormRenderer.prototype.refreshRenderedComponent = function (component, rendered) {
+        var _this = this;
+        var componentRoot = rendered;
+        if (component.type === 'tabs') {
+            componentRoot = rendered.querySelector("#" + component.id + ".e-control.e-tab") || rendered;
+        }
+        else {
+            componentRoot = rendered.querySelector("[data-field-id=\"" + component.id + "\"]") || rendered;
+        }
+        if (component.type === 'richTextEditor') {
+            var rteElement = componentRoot.querySelector('.e-richtexteditor');
+            var rteInstance = rteElement ? getComponent(rteElement, 'richtexteditor') : null;
+            if (rteInstance) {
+                rteInstance.refreshUI();
+            }
+        }
+        else if (component.type === 'dataGrid') {
+            var toolbarElement = componentRoot.querySelector('.e-control.e-toolbar');
+            var toolbarInstance = toolbarElement ? getComponent(toolbarElement, 'toolbar') : null;
+            if (toolbarInstance) {
+                toolbarInstance.refresh();
+            }
+        }
+        else if (component.type === 'imageEditor') {
+            var editorElement = componentRoot.querySelector('.e-control.e-image-editor');
+            var editorInstance = editorElement ? getComponent(editorElement, 'image-editor') : null;
+            if (editorInstance) {
+                editorInstance.refresh();
+            }
+        }
+        else if (component.type === 'tabs') {
+            var tabInstance = getComponent(componentRoot, 'tab');
+            if (tabInstance) {
+                tabInstance.refreshOverflow();
+            }
+        }
+        if (component.children) {
+            component.children.forEach(function (child) { return _this.refreshRenderedComponent(child, rendered); });
+        }
+        if (component.tableCells) {
+            component.tableCells.forEach(function (row) {
+                row.forEach(function (cell) { return cell.forEach(function (child) { return _this.refreshRenderedComponent(child, rendered); }); });
+            });
+        }
+        if (component.tabItems) {
+            component.tabItems.forEach(function (tab) {
+                if (tab.content) {
+                    tab.content.forEach(function (child) { return _this.refreshRenderedComponent(child, rendered); });
+                }
+            });
+        }
+    };
     /**
      * @private
      */
@@ -318,7 +305,7 @@ var FormRenderer = /** @class */ (function (_super) {
             var isUnifiedSchema = parsedInput && typeof parsedInput === 'object' &&
                 parsedInput.properties && Array.isArray(parsedInput.layout);
             if (isUnifiedSchema) {
-                this.processedSchemaCache = mergeSchema(parsedInput);
+                this.processedSchemaCache = mergeSchema(parsedInput, this.dataModel || undefined);
             }
             else {
                 var parser = new UniversalJsonParser();
@@ -345,12 +332,7 @@ var FormRenderer = /** @class */ (function (_super) {
             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 () {
@@ -392,7 +374,6 @@ var FormRenderer = /** @class */ (function (_super) {
     };
     Object.defineProperty(FormRenderer.prototype, "layoutClass", {
         /**
-         * The layout CSS class (suppressed when layout components are present).
          * @private
          */
         get: function () {
@@ -414,11 +395,7 @@ var FormRenderer = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    // ----------------------------------------------------------------------
-    // G4 — collectAllComponents + idToLabel
-    // ----------------------------------------------------------------------
     /**
-     * Recursively collect all components including nested ones.
      * @private
      */
     FormRenderer.prototype.collectAllComponents = function (components) {
@@ -446,6 +423,22 @@ var FormRenderer = /** @class */ (function (_super) {
         traverse(components);
         return all;
     };
+    FormRenderer.prototype.getDataModelByName = function () {
+        var _this = this;
+        var dataModel = {};
+        var components = this.collectAllComponents(this.processedSchemaCache.components);
+        var componentsById = {};
+        components.forEach(function (component) {
+            componentsById[component.id] = component;
+        });
+        Object.keys(this.formState.values).forEach(function (id) {
+            var component = componentsById[id];
+            if (component && component.name) {
+                dataModel[component.name] = _this.formState.values[id];
+            }
+        });
+        return dataModel;
+    };
     /**
      * @private
      */
@@ -477,10 +470,6 @@ var FormRenderer = /** @class */ (function (_super) {
         traverse(this.processedSchemaCache.components);
         return map;
     };
-    // ----------------------------------------------------------------------
-    // G5 — buildValidationRules via FormStateBridge + ConditionalRuleEngine +
-    //       EMAIL/URL auto-regex + customValidator closure
-    // ----------------------------------------------------------------------
     /**
      * @private
      */
@@ -597,13 +586,11 @@ var FormRenderer = /** @class */ (function (_super) {
             });
         };
         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)) {
@@ -611,7 +598,6 @@ var FormRenderer = /** @class */ (function (_super) {
                 }
             });
         }
-        // (Re)create the EJ2 native FormValidator bound to the host element.
         if (this.validator) {
             try {
                 this.validator.refresh();
@@ -630,14 +616,6 @@ var FormRenderer = /** @class */ (function (_super) {
             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) {
@@ -658,15 +636,7 @@ var FormRenderer = /** @class */ (function (_super) {
                 }
             },
             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) {
@@ -701,10 +671,6 @@ var FormRenderer = /** @class */ (function (_super) {
             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);
@@ -719,10 +685,6 @@ var FormRenderer = /** @class */ (function (_super) {
     };
     /**
      * @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 = {};
@@ -779,11 +741,7 @@ var FormRenderer = /** @class */ (function (_super) {
         }
         return values;
     };
-    // ----------------------------------------------------------------------
-    // Expression engine init (used by G9)
-    // ----------------------------------------------------------------------
     /**
-     * Initialize the expression engine dependency graph + computed-field set.
      * @private
      */
     FormRenderer.prototype.initExpressionEngine = function () {
@@ -836,7 +794,7 @@ var FormRenderer = /** @class */ (function (_super) {
         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) {
+        if (['panel', 'table', 'tabs', 'card', 'message', 'staticHtml'].indexOf(component.type) !== -1) {
             return null;
         }
         var conditionalReadOnly = ConditionalRuleEngine.isFieldReadOnly(component.conditions, formValues);
@@ -866,7 +824,6 @@ var FormRenderer = /** @class */ (function (_super) {
         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) {
@@ -969,7 +926,7 @@ var FormRenderer = /** @class */ (function (_super) {
                     _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.trigger('change', { fieldName: component.name, label: component.label || component.id, value: value, dataModel: _this.getDataModelByName() });
                 _this.afterValueChange(component.id);
             }
         };
@@ -991,60 +948,145 @@ var FormRenderer = /** @class */ (function (_super) {
             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);
+        var skipDefault = false;
+        var resolvedWidget = resolveCustomWidget(component, this.customWidgetSettings);
+        if (resolvedWidget) {
+            var compiled = null;
+            try {
+                compiled = this.getTemplateFunction(resolvedWidget.entry.template);
+            }
+            catch (e) {
+                if (this.failure) {
+                    this.trigger('failure', { error: e });
+                }
+                compiled = null;
+            }
+            if (compiled) {
+                try {
+                    if (target.parentNode) {
+                        target.parentNode.removeChild(target);
+                    }
+                    var swappedComponent = Object.assign({}, component, {
+                        id: component.name,
+                        name: component.id,
+                        type: inferTypeFromWidget(component.type),
+                        widget: component.type
+                    });
+                    var renderedOut = compiled({
+                        fieldData: swappedComponent,
+                        value: formState ? formState.values[component.id] : undefined,
+                    }, this, 'customWidgetTemplate' + component.id, (this.element.id || 'form-renderer') + 'customWidgetTemplate', this.isStringTemplate, undefined, fieldInput, this.root);
+                    var outList = void 0;
+                    if (renderedOut == null) {
+                        outList = [];
+                    }
+                    else if (Array.isArray(renderedOut)) {
+                        outList = renderedOut;
+                    }
+                    else if (typeof renderedOut === 'string') {
+                        outList = [renderedOut];
+                    }
+                    else if (typeof renderedOut === 'object'
+                        && !renderedOut.nodeType
+                        && typeof renderedOut.length === 'number'
+                        && typeof renderedOut.item === 'function') {
+                        var snapshot = [];
+                        var list = renderedOut;
+                        for (var i = 0; i < list.length; i++) {
+                            snapshot.push(list[i]);
                         }
-                        catch (e) { /* swallow */ }
-                        _this.syncFormStateErrors();
+                        outList = snapshot;
                     }
-                }
-            },
-            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 {
+                        outList = [renderedOut];
+                    }
+                    for (var _i = 0, outList_1 = outList; _i < outList_1.length; _i++) {
+                        var node = outList_1[_i];
+                        if (node && typeof node === 'object' && node.nodeType) {
+                            fieldInput.appendChild(node);
+                        }
+                        else if (typeof node === 'string') {
+                            var markup = this.sanitizeTemplateValue(node);
+                            var span = createElement('span');
+                            span.innerHTML = markup;
+                            while (span.firstChild) {
+                                fieldInput.appendChild(span.firstChild);
+                            }
+                        }
+                        else if (node && typeof node === 'object') {
+                            throw new Error('Custom widget template for "' + component.name + '" returned a ' +
+                                'framework object that the vanilla renderer cannot insert. Use the ' +
+                                'React/Angular/Vue wrapper (registered templates / portals) for ' +
+                                'JSX or platform templates.');
                         }
                     }
+                    setInputRef(fieldInput);
+                    skipDefault = true;
                 }
+                catch (renderErr) {
+                    if (this.failure) {
+                        this.trigger('failure', { error: renderErr });
+                    }
+                    skipDefault = false;
+                }
+            }
+        }
+        if (!skipDefault) {
+            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
             });
-        }
-        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);
+            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 _a = 0, _b = Object.keys(this.inputRefs); _a < _b.length; _a++) {
+                        var key = _b[_a];
+                        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);
+                        }
                     }
                 }
             }
@@ -1090,11 +1132,6 @@ var FormRenderer = /** @class */ (function (_super) {
             }
             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) {
@@ -1191,14 +1228,6 @@ var FormRenderer = /** @class */ (function (_super) {
                 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;
@@ -1308,6 +1337,9 @@ var FormRenderer = /** @class */ (function (_super) {
                 return wrapper;
             }
             case 'button': {
+                if (resolveCustomWidget(component, this.customWidgetSettings)) {
+                    return this.renderField(component);
+                }
                 var buttonlDisabled = ConditionalRuleEngine.isFieldDisabled(component.conditions, formValues);
                 var buttonComputed = !!component.disabled || buttonlDisabled;
                 var wrapper = createElement('div', { className: 'form-group' });
@@ -1332,6 +1364,12 @@ var FormRenderer = /** @class */ (function (_super) {
                             form.querySelectorAll('.e-control.e-multiselect.e-lib').forEach(function (cb) {
                                 (cb.ej2_instances[0]).value = [];
                             });
+                            form.querySelectorAll('.e-control.e-slider.e-lib').forEach(function (slider) {
+                                (slider.ej2_instances[0]).value = 0;
+                            });
+                            form.querySelectorAll('.e-control.e-uploader.e-lib').forEach(function (upload) {
+                                (upload.ej2_instances[0]).clearAll();
+                            });
                         }
                         _this.formState.values = {};
                         form.reset();
@@ -1369,6 +1407,9 @@ var FormRenderer = /** @class */ (function (_super) {
                 return wrapper;
             }
             case 'splitButton': {
+                if (resolveCustomWidget(component, this.customWidgetSettings)) {
+                    return this.renderField(component);
+                }
                 var splitButtonDisabled = ConditionalRuleEngine.isFieldDisabled(component.conditions, formValues);
                 var computedDisabled = !!component.disabled || splitButtonDisabled;
                 var wrapper = createElement('div', { className: 'form-group' });
@@ -1422,11 +1463,6 @@ var FormRenderer = /** @class */ (function (_super) {
         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);
         }
@@ -1440,8 +1476,12 @@ var FormRenderer = /** @class */ (function (_super) {
             infoElement.classList.remove('e-error');
         }
         var inputElement = this.getInputElementByName(fieldId);
+        if (!inputElement) {
+            return;
+        }
         var inputParent = inputElement.parentElement;
         var grandParent = inputParent.parentElement;
+        var greatGrandParent = grandParent ? grandParent.parentElement : null;
         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');
@@ -1449,6 +1489,9 @@ var FormRenderer = /** @class */ (function (_super) {
         else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper'))) {
             grandParent.classList.remove('e-error');
         }
+        else if ((greatGrandParent != null) && (greatGrandParent.classList.contains('e-control-wrapper') || greatGrandParent.classList.contains('e-wrapper'))) {
+            greatGrandParent.classList.remove('e-error');
+        }
         else {
             inputElement.classList.remove('e-error');
         }
@@ -1474,23 +1517,15 @@ var FormRenderer = /** @class */ (function (_super) {
     };
     /**
      * @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);
@@ -1519,18 +1554,9 @@ var FormRenderer = /** @class */ (function (_super) {
     };
     /**
      * @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);
         var _loop_3 = function (comp) {
@@ -1561,7 +1587,6 @@ var FormRenderer = /** @class */ (function (_super) {
                             this_1.collectConditionFieldIds(item.condition, triggers);
                             this_1.collectConditionFieldIds(item.condition, myDeps);
                         }
-                        // DataGrid conditional columns
                         if (item && Array.isArray(item.conditions)) {
                             for (var _c = 0, _d = item.conditions; _c < _d.length; _c++) {
                                 var subCond = _d[_c];
@@ -1609,13 +1634,6 @@ var FormRenderer = /** @class */ (function (_super) {
                     collectMinMaxReferenceIds(range);
                 }
             }
-            // ==========================================================
-            // 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 &&
@@ -1645,26 +1663,29 @@ var FormRenderer = /** @class */ (function (_super) {
     };
     /**
      * @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);
     };
+    FormRenderer.prototype.getScrollParent = function () {
+        var parent = this.element.parentElement;
+        while (parent) {
+            var style = window.getComputedStyle(parent);
+            var overflowY = style.overflowY;
+            var overflowX = style.overflowX;
+            var canScrollY = (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') &&
+                parent.scrollHeight > parent.clientHeight;
+            var canScrollX = (overflowX === 'auto' || overflowX === 'scroll' || overflowX === 'overlay') &&
+                parent.scrollWidth > parent.clientWidth;
+            if (canScrollY || canScrollX) {
+                return parent;
+            }
+            parent = parent.parentElement;
+        }
+        return null;
+    };
     /**
      * @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;
@@ -1680,12 +1701,15 @@ var FormRenderer = /** @class */ (function (_super) {
                 selectionStart = activeEl.selectionStart;
                 selectionEnd = activeEl.selectionEnd;
             }
-            catch (e) { /* not a text input — ignore */ }
+            catch (e) { /* ignore */ }
         }
         var savedElementScrollTop = this.element.scrollTop;
         var savedElementScrollLeft = this.element.scrollLeft;
         var savedWindowScrollX = window.scrollX;
         var savedWindowScrollY = window.scrollY;
+        var scrollParent = this.getScrollParent();
+        var savedScrollParentTop = scrollParent ? scrollParent.scrollTop : 0;
+        var savedScrollParentLeft = scrollParent ? scrollParent.scrollLeft : 0;
         this.preservedFields.clear();
         var allComps = this.collectAllComponents(this.processedSchemaCache.components);
         var _loop_4 = function (comp) {
@@ -1716,6 +1740,9 @@ var FormRenderer = /** @class */ (function (_super) {
             _loop_4(comp);
         }
         this.refreshing = true;
+        if (this.isReact || this.isAngular) {
+            this.clearTemplate();
+        }
         this.destroyRenderedExcludingPreserved();
         this.removePreviousRoot();
         if (this.validator) {
@@ -1726,6 +1753,10 @@ var FormRenderer = /** @class */ (function (_super) {
         try {
             this.element.scrollTop = savedElementScrollTop;
             this.element.scrollLeft = savedElementScrollLeft;
+            if (scrollParent) {
+                scrollParent.scrollTop = savedScrollParentTop;
+                scrollParent.scrollLeft = savedScrollParentLeft;
+            }
             window.scrollTo(savedWindowScrollX, savedWindowScrollY);
         }
         catch (e) { /* swallow */ }
@@ -1745,15 +1776,9 @@ var FormRenderer = /** @class */ (function (_super) {
                 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 {
@@ -1762,7 +1787,7 @@ var FormRenderer = /** @class */ (function (_super) {
                         }
                     }
                     catch (e) {
-                        // swallow
+                        // ignore
                     }
                     _this.preservedFields.delete(id);
                 }
@@ -1816,11 +1841,6 @@ var FormRenderer = /** @class */ (function (_super) {
     };
     /**
      * @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 = [];
@@ -1841,8 +1861,6 @@ var FormRenderer = /** @class */ (function (_super) {
             _loop_5(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_6 = function (key) {
             var inst = this_4.inputRefs[key];
@@ -1865,10 +1883,6 @@ var FormRenderer = /** @class */ (function (_super) {
     };
     /**
      * @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 = [];
@@ -1898,7 +1912,6 @@ var FormRenderer = /** @class */ (function (_super) {
         return inputEl;
     };
     /**
-     * Evaluate expressions in topological order with type coercion.
      * @private
      */
     FormRenderer.prototype.evaluateExpressions = function () {
@@ -1999,22 +2012,10 @@ var FormRenderer = /** @class */ (function (_super) {
                             }
                             if (result !== null && result !== undefined && result !== formValues[component.id] && this_5.formState) {
                                 this_5.formState.values[component.id] = result;
-                                // Sync the underlying input element so the
-                                // FormValidator reads the new value on its
-                                // next validate() pass.
                                 if (this_5.validator) {
                                     var inputEl = this_5.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 */ }
+                                        this_5.syncValueToInput(inputEl, component.id, result);
                                     }
                                 }
                             }
@@ -2041,7 +2042,6 @@ var FormRenderer = /** @class */ (function (_super) {
         }
     };
     /**
-     * Re-trigger custom validation for changed + dependent fields.
      * @private
      */
     FormRenderer.prototype.retriggerCustomValidation = function () {
@@ -2146,13 +2146,106 @@ var FormRenderer = /** @class */ (function (_super) {
         }
     };
     /**
-     * Retrieves the underlying Syncfusion form-input component instance by its field name. Use this to call Syncfusion component methods and properties.
+     * Retrieves the underlying Syncfusion form-input component instance by its field name.
+     * Use this to call Syncfusion component methods and properties.
+     *
+     * @param {string} name - Specifies the name for the built-in Syncfusion component.
+     * @returns {object | null} - Specifies the instance of the Syncfusion component in the form.
      */
     FormRenderer.prototype.getComponent = function (name) {
         return this.inputRefs[name] || null;
     };
     /**
-     * Re-normalize + re-render on `schema`/`locale`/`enableRtl` change.
+     * Programmatically sets a form field's value for user edits.
+     *
+     * @param  {string} fieldName - The field's `name` (the schema property's `name`).
+     * @param  {any} value - The new value to set.
+     * @returns void
+     */
+    FormRenderer.prototype.setFieldValue = function (fieldName, value) {
+        var allComponents = this.collectAllComponents(this.processedSchemaCache.components || []);
+        var component = allComponents.find(function (c) { return c.name === fieldName; });
+        if (!component) {
+            return;
+        }
+        if (this.formState) {
+            this.formState.values[component.id] = value;
+        }
+        var inputEl = this.getInputElementByName(component.id);
+        if (inputEl) {
+            this.syncValueToInput(inputEl, component.id, value);
+        }
+        this.afterValueChange(component.id);
+    };
+    /**
+     * @private
+     */
+    FormRenderer.prototype.syncValueToInput = function (inputEl, fieldId, value) {
+        if (!inputEl) {
+            return;
+        }
+        try {
+            var nativeInput = (inputEl instanceof HTMLInputElement) ? inputEl : null;
+            var isCheckable = !!nativeInput &&
+                (nativeInput.type === 'checkbox' || nativeInput.type === 'radio');
+            var ej2Inst = inputEl.ej2_instances && inputEl.ej2_instances[0];
+            if (ej2Inst) {
+                if (isCheckable && typeof ej2Inst.checked !== 'undefined') {
+                    if (nativeInput.type === 'radio' && typeof ej2Inst.value !== 'undefined') {
+                        ej2Inst.checked = String(value) === String(ej2Inst.value);
+                    }
+                    else {
+                        ej2Inst.checked = FormRenderer_1.coerceChecked(value);
+                    }
+                }
+                else if (typeof ej2Inst.value !== 'undefined') {
+                    ej2Inst.value = value;
+                }
+                return;
+            }
+            if (inputEl instanceof HTMLSelectElement) {
+                var strValue = (value === null || value === undefined) ? '' : String(value);
+                inputEl.value = strValue;
+                if (inputEl.value !== strValue && inputEl.options.length > 0) {
+                    for (var i = 0; i < inputEl.options.length; i++) {
+                        if (inputEl.options[i].text === strValue) {
+                            inputEl.value = inputEl.options[i].value;
+                            break;
+                        }
+                    }
+                }
+            }
+            else if (nativeInput && nativeInput.type === 'radio') {
+                var radios = this.element.querySelectorAll("input[type=\"radio\"][name=\"" + fieldId + "\"]");
+                for (var i = 0; i < radios.length; i++) {
+                    radios[i].checked = String(value) === radios[i].value;
+                }
+            }
+            else if (isCheckable) {
+                nativeInput.checked = FormRenderer_1.coerceChecked(value);
+            }
+            else if (typeof inputEl.value !== 'undefined') {
+                inputEl.value = (value === null || value === undefined) ? '' : String(value);
+            }
+        }
+        catch (e) { /* ignore */ }
+    };
+    /**
+     * @private
+     */
+    FormRenderer.coerceChecked = function (value) {
+        if (typeof value === 'boolean') {
+            return value;
+        }
+        if (typeof value === 'number') {
+            return value !== 0;
+        }
+        if (typeof value === 'string') {
+            return value !== '' && value !== 'false' && value !== '0';
+        }
+        return !!value;
+    };
+    /**
      * @private
      */
     FormRenderer.prototype.onPropertyChanged = function (newProps, oldProps) {
@@ -2160,6 +2253,9 @@ var FormRenderer = /** @class */ (function (_super) {
         if (newProps.schema !== oldProps.schema) {
             reRender = true;
         }
+        if (newProps.dataModel !== oldProps.dataModel) {
+            reRender = true;
+        }
         if (newProps.locale !== oldProps.locale) {
             reRender = true;
         }
@@ -2169,13 +2265,15 @@ var FormRenderer = /** @class */ (function (_super) {
         if (newProps.layout !== oldProps.layout) {
             reRender = true;
         }
-        if (newProps.locale !== oldProps.locale) {
+        if (newProps.customWidgetSettings !== oldProps.customWidgetSettings) {
             reRender = true;
         }
         if (!reRender) {
             return;
         }
-        // Tear down rendered children and re-render.
+        if (this.isReact || this.isAngular) {
+            this.clearTemplate();
+        }
         this.refreshing = true;
         this.destroyRendered();
         this.removePreviousRoot();
@@ -2184,7 +2282,6 @@ var FormRenderer = /** @class */ (function (_super) {
         this.refreshing = false;
     };
     /**
-     * Destroy all child EJ2 instances, detach listeners, null refs.
      * @private
      */
     FormRenderer.prototype.destroyRendered = function () {
@@ -2217,7 +2314,6 @@ var FormRenderer = /** @class */ (function (_super) {
         this.pendingChangedFieldIds = new Set();
     };
     /**
-     * Remove persisted tab selection state for this form when it is fully destroyed.
      * @private
      */
     FormRenderer.prototype.clearPersistedTabSelections = function () {
@@ -2237,11 +2333,43 @@ var FormRenderer = /** @class */ (function (_super) {
         catch (_a) {
         }
     };
+    FormRenderer.prototype.getTemplateFunction = function (template) {
+        var templateFn = null;
+        try {
+            if (typeof template === 'string' && template.indexOf('#') !== -1 && document.querySelectorAll(template).length) {
+                templateFn = compile(this.sanitizeTemplateValue(document.querySelector(template).innerHTML.trim()));
+            }
+            else if (typeof template === 'string') {
+                templateFn = compile(this.sanitizeTemplateValue(template));
+            }
+            else {
+                templateFn = compile(template);
+            }
+        }
+        catch (e) {
+            templateFn = compile(template);
+        }
+        return templateFn;
+    };
+    /**
+     * @private
+     */
+    FormRenderer.prototype.sanitizeTemplateValue = function (value) {
+        if (this.enableHtmlSanitizer && typeof value === 'string') {
+            try {
+                return SanitizeHtmlHelper.sanitize(value);
+            }
+            catch (e) { /* swallow */ }
+        }
+        return value;
+    };
     /**
-     * Full component teardown.
      * @private
      */
     FormRenderer.prototype.destroy = function () {
+        if (this.isReact || this.isAngular) {
+            this.clearTemplate();
+        }
         this.destroyRendered();
         this.formState = { values: {}, errors: {} };
         this.expressionEngine = null;
@@ -2274,24 +2402,27 @@ var FormRenderer = /** @class */ (function (_super) {
         }
     };
     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(null)
+    ], FormRenderer.prototype, "dataModel", void 0);
     __decorate([
         Property('SingleColumn')
     ], FormRenderer.prototype, "layout", void 0);
     __decorate([
         Property('')
     ], FormRenderer.prototype, "className", void 0);
+    __decorate([
+        Collection([], CustomWidgetSetting)
+    ], FormRenderer.prototype, "customWidgetSettings", void 0);
+    __decorate([
+        Property(false)
+    ], FormRenderer.prototype, "enableHtmlSanitizer", void 0);
     __decorate([
         Event()
     ], FormRenderer.prototype, "submit", void 0);