@syncfusion/ej2-form-renderer 34.2.2

package/src/common/utils.js

@@ -0,0 +1,484 @@
+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);
+};
+import { Internationalization } from '@syncfusion/ej2-base';
+import { DataManager, Query, UrlAdaptor, WebApiAdaptor, ODataV4Adaptor } from '@syncfusion/ej2-data';
+import { ConditionalRuleEngine } from './conditional-rule-engine';
+import { UI_TYPE_TO_SEMANTIC_TYPE } from './json-converter';
+import { ExpressionEngine } from './expressions/expression-engine';
+/**
+ * @private
+ */
+export var VALIDATION_REGEX = {
+    EMAIL: /^(?!.*\.\.)[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/,
+    // eslint-disable-next-line security/detect-unsafe-regex
+    URL: /^(https?:\/\/)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(\/[^\s]*)?$/,
+    DATE_ISO: /^([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/,
+    DIGITS: /^[0-9]*$/,
+    PHONE: /^[+]?[0-9]{9,13}$/,
+    CREDIT_CARD: /^\d{13,16}$/
+};
+/**
+ * Maps button style to Syncfusion CSS classes
+ * @param style - Button style ('primary' | 'flat' | 'information' | 'error' | 'success' | 'warning')
+ * @returns Space-separated CSS class string
+ * @private
+ */
+export var mapButtonStyleToClass = function (style) {
+    var styleMap = {
+        'primary': 'e-primary',
+        'flat': 'e-flat',
+        'information': 'e-info',
+        'error': 'e-danger',
+        'success': 'e-success',
+        'warning': 'e-warning'
+    };
+    return styleMap[style || 'primary'] || 'e-primary';
+};
+/**
+ * Resolves button type to valid HTML button type
+ * @param type - Button type ('submit' | 'reset' | 'button')
+ * @returns Resolved button type
+ * @private
+ */
+export var resolveButtonType = function (type) {
+    return (type === 'submit' || type === 'reset') ? type : 'button';
+};
+/**
+ * Maps button position to CSS justifyContent value
+ * @param position - Button position ('Left' | 'Right' | 'Center')
+ * @returns CSS justifyContent value
+ * @private
+ */
+export var mapPositionToJustifyContent = function (position) {
+    var positionMap = {
+        'Left': 'flex-start',
+        'Right': 'flex-end',
+        'Center': 'center'
+    };
+    return positionMap[position || 'Left'] || 'flex-start';
+};
+/**
+ * @private
+ */
+export function splitWidths(input) {
+    var result = input.map(function (v) { return (v === null ? NaN : Number(v)); });
+    var sumKnown = result.reduce(function (s, v) { return s + (isNaN(v) ? 0 : v); }, 0);
+    // If knowns already >= 100, unknowns become 0
+    var remainingInt = Math.max(0, Math.round(100 - sumKnown));
+    var unknownIndexes = result.map(function (v, i) { return (isNaN(v) ? i : -1); }).filter(function (i) { return i >= 0; });
+    var k = unknownIndexes.length;
+    if (k === 0) {
+        // nothing to split; just clamp/round knowns so they sum to 100 if you prefer, but return as-is
+        return result.map(function (v) { return Math.round(v); });
+    }
+    // Distribute integer percentage points to avoid fractional rounding problems
+    var base = Math.floor(remainingInt / k);
+    var remainder = remainingInt - base * k;
+    // Fill unknowns with base + 1 for first `remainder` items
+    unknownIndexes.forEach(function (idx) {
+        var add = remainder > 0 ? base + 1 : base;
+        result[idx] = add;
+        remainder = Math.max(0, remainder - 1);
+    });
+    // Convert any NaN (shouldn't remain) to 0 and round knowns
+    return result.map(function (v) { return (isNaN(v) ? 0 : Math.round(v)); });
+}
+/**
+ * @private
+ */
+export function extractAllDescendantIds(component) {
+    var childIds = [];
+    function traverse(comps) {
+        for (var _i = 0, comps_1 = comps; _i < comps_1.length; _i++) {
+            var comp = comps_1[_i];
+            childIds.push(comp.id);
+            // Recursively traverse nested structures
+            if (comp.children && Array.isArray(comp.children)) {
+                traverse(comp.children);
+            }
+            // Handle table cells
+            if (comp.tableCells && Array.isArray(comp.tableCells)) {
+                comp.tableCells.forEach(function (row) {
+                    if (Array.isArray(row)) {
+                        row.forEach(function (cell) {
+                            if (Array.isArray(cell)) {
+                                traverse(cell);
+                            }
+                        });
+                    }
+                });
+            }
+            // Handle tab items
+            if (comp.tabItems && Array.isArray(comp.tabItems)) {
+                comp.tabItems.forEach(function (tabItem) {
+                    if (tabItem.content && Array.isArray(tabItem.content)) {
+                        traverse(tabItem.content);
+                    }
+                });
+            }
+        }
+    }
+    // Start with direct children
+    if (component.children && Array.isArray(component.children)) {
+        traverse(component.children);
+    }
+    // Handle table cells
+    if (component.tableCells && Array.isArray(component.tableCells)) {
+        component.tableCells.forEach(function (row) {
+            if (Array.isArray(row)) {
+                row.forEach(function (cell) {
+                    if (Array.isArray(cell)) {
+                        traverse(cell);
+                    }
+                });
+            }
+        });
+    }
+    // Handle tab items
+    if (component.tabItems && Array.isArray(component.tabItems)) {
+        component.tabItems.forEach(function (tabItem) {
+            if (tabItem.content && Array.isArray(tabItem.content)) {
+                traverse(tabItem.content);
+            }
+        });
+    }
+    return childIds;
+}
+/**
+ * @private
+ */
+export function formatDateValues(component, value) {
+    var intl = new Internationalization();
+    var dFormatter = intl.getDateFormat({
+        format: 'MM/dd/yyyy',
+        type: 'date'
+    });
+    if (component.type === 'date') {
+        value = dFormatter(new Date(value));
+    }
+    if (component.type === 'time') {
+        dFormatter = intl.getDateFormat({
+            format: 'hh:mm a',
+            type: 'time'
+        });
+        value = dFormatter(new Date(value));
+    }
+    if (component.type === 'dateTime') {
+        dFormatter = intl.getDateFormat({
+            format: 'MM/dd/yyyy hh:mm a',
+            type: 'dateTime'
+        });
+        value = dFormatter(new Date(value));
+    }
+    if (component.type === 'dateRange' && Array.isArray(value)) {
+        value = value.map(function (date) {
+            return date ? dFormatter(new Date(date)) : null;
+        });
+    }
+    return value;
+}
+/**
+ * @private
+ */
+export var getComponentFromSchema = function (id, formSchema) {
+    if (!id || !formSchema)
+        return null;
+    var findInComponents = function (components) {
+        for (var _i = 0, components_1 = components; _i < components_1.length; _i++) {
+            var comp = components_1[_i];
+            if (comp.id === id || comp.name === id)
+                return comp;
+            if (comp.children) {
+                var found = findInComponents(comp.children);
+                if (found)
+                    return found;
+            }
+            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];
+                        var found = findInComponents(cell);
+                        if (found)
+                            return found;
+                    }
+                }
+            }
+            if (comp.tabItems) {
+                for (var _d = 0, _e = comp.tabItems; _d < _e.length; _d++) {
+                    var tab = _e[_d];
+                    if (tab.content) {
+                        var found = findInComponents(tab.content);
+                        if (found)
+                            return found;
+                    }
+                }
+            }
+        }
+        return null;
+    };
+    return findInComponents(formSchema.components || []);
+};
+/**
+ * Helper function to get the appropriate adaptor instance
+ * @param adaptorType - Type of adaptor ('WebApiAdaptor' | 'UrlAdaptor' | 'ODataV4Adaptor')
+ * @returns Adaptor instance
+ * @private
+ */
+export var getAdaptorInstance = function (adaptorType) {
+    switch (adaptorType) {
+        case 'WebApiAdaptor':
+            return new WebApiAdaptor();
+        case 'ODataV4Adaptor':
+            return new ODataV4Adaptor();
+        case 'UrlAdaptor':
+        default:
+            return new UrlAdaptor();
+    }
+};
+/**
+ * Extracts data from a nested path using dot notation and array indices
+ * @param data - The data object or array
+ * @param path - Path to the data (e.g., 'results.items', '[0].data', 'response[0].values')
+ * @returns Extracted data or empty array
+ * @private
+ */
+export var extractDataFromPath = function (data, path) {
+    if (!path || data === null || data === undefined)
+        return data;
+    // Split by dots but preserve array indices
+    var parts = path.split(/\.(?![^\[]*\])/); // Split by dots not inside brackets
+    var current = data;
+    for (var _i = 0, parts_1 = parts; _i < parts_1.length; _i++) {
+        var part = parts_1[_i];
+        if (current === null || current === undefined) {
+            return null;
+        }
+        // Handle array index notation like [0] or results[0]
+        var arrayMatch = part.match(/^(\w*)\[(\d+)\]$/);
+        if (arrayMatch) {
+            var propName = arrayMatch[1];
+            var index = parseInt(arrayMatch[2]);
+            // If propName is empty, current should be an array
+            if (!propName) {
+                current = current[index];
+            }
+            else {
+                current = current[propName] && current[propName][index];
+            }
+        }
+        else {
+            // Regular property access
+            current = current[part];
+        }
+    }
+    return current;
+};
+/**
+ * Build name-indexed context from ID-indexed formValues
+ * Simple traversal to map field names to their values
+ * @private
+ */
+var buildNameContext = function (formValues, components) {
+    var context = {};
+    var traverse = function (comps) {
+        comps.forEach(function (comp) {
+            // Map name -> value from formValues (keyed by ID)
+            if (comp.name && comp.id in formValues) {
+                context[comp.name] = formValues[comp.id];
+            }
+            if (comp.children)
+                traverse(comp.children);
+            if (comp.tabItems)
+                comp.tabItems.forEach(function (t) { return t.content && traverse(t.content); });
+            if (comp.tableCells)
+                comp.tableCells.forEach(function (row) { return row.forEach(function (cell) { return traverse(cell); }); });
+        });
+    };
+    traverse(components);
+    return context;
+};
+/**
+ * @private
+ */
+var sharedFieldBindingEngine = new ExpressionEngine();
+/**
+ * @private
+ */
+export var resolveFieldBinding = function (value, formValues, components) {
+    if (typeof value !== 'string' || !/{[^}]+}/.test(value)) {
+        return value; // No field references
+    }
+    // Build context: map field names to values from ID-keyed formValues
+    var context = components
+        ? buildNameContext(formValues, components)
+        : formValues;
+    try {
+        var result = sharedFieldBindingEngine.evaluate(value, context);
+        return result !== null && result !== undefined ? String(result) : '';
+    }
+    catch (err) {
+        return value; // Return original on error
+    }
+};
+/**
+ * @private
+ * (useFetchOptions is NOT located here — see ./option-fetcher.ts)
+ * (useFetchLookupOptions is NOT located here — see ./option-fetcher.ts)
+ */
+export var resolveOptions = function (options, fetchedOptions, fetchedLookupDataSource) {
+    // If lookup type with fetched data, return fetched lookup records
+    if (options && typeof options === 'object' && !Array.isArray(options) && options.type === 'lookup' && fetchedLookupDataSource) {
+        return fetchedLookupDataSource && fetchedLookupDataSource.length > 0 ? fetchedLookupDataSource : [];
+    }
+    // If URL type with fetched data, return fetched options
+    if (options && typeof options === 'object' && !Array.isArray(options) && options.type === 'url') {
+        return fetchedOptions.length > 0 ? fetchedOptions : [];
+    }
+    // If already an array, return as-is
+    if (Array.isArray(options)) {
+        return options;
+    }
+    // If it's raw data type
+    if (options && typeof options === 'object' && !Array.isArray(options) && options.type === 'raw') {
+        return Array.isArray(options.data) ? options.data : [];
+    }
+    return [];
+};
+/**
+ * @private
+ */
+export var collectAvailableFieldNames = function (components) {
+    var fieldNames = [];
+    var traverse = function (comps) {
+        comps.forEach(function (comp) {
+            // Only add fields that have a name and aren't layout components
+            if (comp.name && ['panel', 'table', 'tabs', 'card', 'message', 'button', 'splitButton', 'staticHtml'].indexOf(comp.type) === -1) {
+                // Get semantic type mapping for this component
+                var semanticType = UI_TYPE_TO_SEMANTIC_TYPE[comp.type];
+                if (semanticType) {
+                    fieldNames.push(__assign({ name: comp.name, type: semanticType.type }, (semanticType.format && { format: semanticType.format })));
+                }
+            }
+            // Traverse nested components
+            if (comp.children)
+                traverse(comp.children);
+            if (comp.tabItems) {
+                comp.tabItems.forEach(function (tab) {
+                    if (tab.content)
+                        traverse(tab.content);
+                });
+            }
+            if (comp.tableCells) {
+                comp.tableCells.forEach(function (row) {
+                    row.forEach(function (cell) { return traverse(cell); });
+                });
+            }
+        });
+    };
+    traverse(components);
+    return fieldNames;
+};
+/**
+ * Resolve conditional data for a DataGrid component
+ * Evaluates all conditionalData rules and applies the first matching one
+ * Returns both dataSource and custom columns if defined
+ *
+ * @param conditions - Component conditions including conditional data rules
+ * @param formValues - Current form field values
+ * @returns Object with dataSource and columns, or undefined if no condition matches
+ * @private
+ */
+export var resolveConditionalData = function (conditions, formValues) {
+    if (!conditions || !conditions.conditionalData || !Array.isArray(conditions.conditionalData)) {
+        return undefined;
+    }
+    // Evaluate each conditional data rule in order
+    for (var _i = 0, _a = conditions.conditionalData; _i < _a.length; _i++) {
+        var rule = _a[_i];
+        if (ConditionalRuleEngine.evaluateCondition(rule.condition, formValues)) {
+            // Condition is met - resolve and return both data source and columns
+            return {
+                dataSource: rule.dataSource,
+                columns: rule.columns && rule.columns.length > 0 ? rule.columns : undefined
+            };
+        }
+    }
+    return undefined;
+};
+/**
+ * Reads the current builder mode from the URL `mode` query parameter.
+ * @returns 'Simple' | 'Developer' | undefined if not present or invalid
+ * @private
+ */
+export var getCurrentMode = function () {
+    if (typeof window === 'undefined')
+        return undefined;
+    var urlMode = new URLSearchParams(window.location.search).get('mode');
+    if (urlMode === 'developer')
+        return 'Developer';
+    if (urlMode === 'simple')
+        return 'Simple';
+    return undefined;
+};
+/**
+ * Navigates to a URL while preserving the current `mode` query parameter.
+ * - If `mode` is already in target, it is kept as-is.
+ * - If `mode` is present in the current URL, it is appended to the target.
+ *
+ * @param target - Target path (may include existing query params), e.g. '/?sample=builder&formId=123'
+ * @private
+ */
+export var navigateTo = function (target) {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    try {
+        var url = new URL('/demo' + target, window.location.origin);
+        window.location.href = url.toString();
+    }
+    catch (_a) {
+        window.location.href = '/demo' + target;
+    }
+};
+/**
+ * @private
+ */
+export function sanitizeId(rawId, fallback) {
+    var MAX_ID_LEN = 100;
+    var safeFallback = typeof fallback === 'string' && fallback ? fallback : "field_" + Date.now() + "_" + Math.floor(Math.random() * 1000);
+    if (rawId === null || rawId === undefined)
+        return safeFallback;
+    var id = String(rawId).trim();
+    // Reject obvious prototype/constructor keys outright
+    if (!id || id === '__proto__' || id === 'prototype' || id === 'constructor') {
+        return safeFallback;
+    }
+    // Replace any character that is not alnum, dash, or underscore with underscore.
+    id = id.replace(/[^A-Za-z0-9_-]/g, '_');
+    // Ensure it starts with a letter or underscore (prepend if necessary).
+    if (!/^[A-Za-z_]/.test(id)) {
+        id = "f_" + id;
+    }
+    // Truncate to a reasonable max length
+    if (id.length > MAX_ID_LEN) {
+        id = id.slice(0, MAX_ID_LEN);
+    }
+    // Final guard: avoid reserved names
+    if (id === '__proto__' || id === 'prototype' || id === 'constructor') {
+        return safeFallback;
+    }
+    return id;
+}
+// Exported EJ2 data symbols re-exported for downstream consumers (form-renderer option fetcher).
+// `DataManager` / `Query` are used by OptionFetcher (see ./option-fetcher.ts).
+export { DataManager, Query };

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

@@ -0,0 +1,65 @@
+import { Component, Property, Event, EmitType, NotifyPropertyChanges, enableRipple, createElement, isNullOrUndefined, L10n, getComponent, addClass } from '@syncfusion/ej2-base';import { Tab, Toolbar } from '@syncfusion/ej2-navigations';import { Tooltip } from '@syncfusion/ej2-popups';import { FormValidator, Signature } from '@syncfusion/ej2-inputs';import { FormLayout, FormNode, Schema } from './types/form-schema';import { renderFormField } from './render-form-field';import { mergeSchema, UnifiedSchema } from '../common/json-converter';import { UniversalJsonParser } from '../common/parser';import { VALIDATION_REGEX, formatDateValues, splitWidths } from '../common/utils';import StaticHtmlRenderer from '../common/static-html-renderer';import { ConditionalRuleEngine, FormValueType } from '../common/conditional-rule-engine';import { ExpressionEngine, DependencyGraph } from '../common/expressions/expression-engine';import { MinMaxRuleEngine } from '../common/minmax-rule-engine';import { CustomValidationEngine } from '../common/custom-validation-engine';import { RichTextEditor } from '@syncfusion/ej2-richtexteditor';import { ImageEditor } from '@syncfusion/ej2-image-editor';
+import {SubmitEventArgs,ChangeEventArgs,ButtonClickEventArgs,FailureEventArgs} from "./form-renderer";
+import {ComponentModel} from '@syncfusion/ej2-base';
+
+/**
+ * Interface for a class FormRenderer
+ */
+export interface FormRendererModel extends ComponentModel{
+
+    /**
+     * Specifies the data schema of the form that needs to be rendered in the Form Renderer.
+     */
+    schema?: Schema | string | Record<string, unknown> | null;
+
+    /**
+     * Specifies the form layout configuration (only applies when layout details are NOT available in the schema). Determines how form fields are arranged in columns.
+     * 
+     * @default 'SingleColumn'
+     */
+    layout?: FormLayout | string;
+
+    /**
+     * Specifies the CSS class name to apply to the root form container element. This property supports space-separated multiple classes.
+     * 
+     * @default "" 
+     */
+    className?: string;
+
+    /**
+     * Event triggered when the form is submitted.
+     * This event provides form data and validation status in the event argument.
+     *
+     * @event
+     */
+    submit?: EmitType<SubmitEventArgs>;
+
+    /**
+     * Event triggered when any form field value changes. Fired on user input for tracked fields.
+     *
+     * @event
+     */
+    change?: EmitType<ChangeEventArgs>;
+
+    /**
+     * Event triggered when a button in the form is clicked. Applies to all button types (button, submit, splitButton).
+     *
+     * @event
+     */
+    buttonClick?: EmitType<ButtonClickEventArgs>;
+
+    /**
+     * Event triggered when an error is thrown in the form rendering or schema parsing.
+     *
+     * @event
+     */
+    failure?: EmitType<FailureEventArgs>;
+
+    /**
+     * Event triggered when all form elements are rendered and ready for interaction. Useful for performing post-render initialization or setup.
+     *
+     * @event
+     */
+    created?: EmitType<Object>;
+
+}