@syncfusion/ej2-form-renderer 34.2.2

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

@@ -0,0 +1,105 @@
+/**
+ * @private
+ */
+export interface MinMaxRangeItem {
+    enabled: boolean;
+    minValue?: number | string | {
+        field: string;
+    };
+    maxValue?: number | string | {
+        field: string;
+    };
+}
+/**
+ * @private
+ */
+export interface MinMaxConstraints {
+    minValue?: number | string;
+    maxValue?: number | string;
+    minDate?: string;
+    maxDate?: string;
+    minTime?: string;
+    maxTime?: string;
+}
+/**
+ * Extract min/max constraints from minMaxRange array
+ * @private
+ */
+export declare class MinMaxRuleEngine {
+    /**
+     * Extract min/max constraints from minMaxRange array
+     * Handles three cases:
+     * 1. Direct values (enabled: false)
+     * 2. Single field reference (enabled: true, 1 range)
+     * 3. Multiple ranges (enabled: true, 2+ ranges) - takes UTMOST
+     * @private
+     * @param minMaxRange - Array of range configurations
+     * @param formValues - Current form state values (id → value)
+     * @param componentType - 'number' | 'date' | 'dateRange'
+     * @returns Constraints object with appropriate keys
+     */
+    static getConstraints(minMaxRange: MinMaxRangeItem[] | undefined, formValues: Record<string, any>, componentType?: string): MinMaxConstraints;
+    /**
+     * Resolve a single value - either direct or field reference
+     *
+     * @param value - Direct value or field reference object
+     * @param formValues - Form state values for field lookup
+     * @returns Resolved value or undefined
+     */
+    private static resolveValue;
+    /**
+     * Get the most permissive (widest) minimum value
+     * For numbers: MIN of all mins
+     * For dates: earliest date (MIN string comparison on ISO format)
+     * For times: earliest time (MIN string comparison on 24-hour format)
+     *
+     * @param ranges - Array of {min, max} values
+     * @param componentType - Type of component
+     * @returns Most permissive minimum value
+     */
+    private static getPermissiveMin;
+    /**
+     * Get the most permissive (widest) maximum value
+     * For numbers: MAX of all maxs
+     * For dates: latest date (MAX string comparison on ISO format)
+     * For times: latest time (MAX string comparison on 24-hour format)
+     *
+     * @param ranges - Array of {min, max} values
+     * @param componentType - Type of component
+     * @returns Most permissive maximum value
+     */
+    private static getPermissiveMax;
+    /**
+     * Convert MM/DD/YYYY date format to ISO (YYYY-MM-DD) for comparison
+     * Handles both formats gracefully
+     *
+     * @param dateString - Date in MM/DD/YYYY or ISO format
+     * @returns ISO date string (YYYY-MM-DD)
+     */
+    private static convertToISO;
+    /**
+     * Convert 12-hour time format to 24-hour format for comparison
+     * Handles both 12-hour (hh:mm a) and 24-hour (HH:mm) formats
+     *
+     * @param timeString - Time in 12-hour (hh:mm a/p) or 24-hour (HH:mm) format
+     * @returns 24-hour format time string (HH:mm)
+     */
+    private static convertTimeTo24Hour;
+    /**
+     * Get empty constraints object based on component type
+     */
+    private static getEmptyConstraints;
+    /**
+     * Validate if a value passes all min/max constraints (optional)
+     * Can be used for client-side validation before submission
+     *
+     * @param value - Value to validate
+     * @param constraints - Constraints to check against
+     * @param componentType - Type of component
+     * @returns Validation result with error message if invalid
+     */
+    static validateValue(value: any, constraints: MinMaxConstraints, componentType: string): {
+        isValid: boolean;
+        error?: string;
+    };
+}

package/src/common/minmax-rule-engine.js

@@ -0,0 +1,380 @@
+/**
+ * Extract min/max constraints from minMaxRange array
+ * @private
+ */
+var MinMaxRuleEngine = /** @class */ (function () {
+    function MinMaxRuleEngine() {
+    }
+    /**
+     * Extract min/max constraints from minMaxRange array
+     * Handles three cases:
+     * 1. Direct values (enabled: false)
+     * 2. Single field reference (enabled: true, 1 range)
+     * 3. Multiple ranges (enabled: true, 2+ ranges) - takes UTMOST
+     * @private
+     * @param minMaxRange - Array of range configurations
+     * @param formValues - Current form state values (id → value)
+     * @param componentType - 'number' | 'date' | 'dateRange'
+     * @returns Constraints object with appropriate keys
+     */
+    MinMaxRuleEngine.getConstraints = function (minMaxRange, formValues, componentType) {
+        var _this = this;
+        if (componentType === void 0) { componentType = 'number'; }
+        // No ranges provided
+        if (!minMaxRange || minMaxRange.length === 0) {
+            return this.getEmptyConstraints(componentType);
+        }
+        // First, check for CASE 1: Direct values (enabled: false)
+        var directValueRange = minMaxRange.find(function (range) { return range.enabled === false; });
+        if (directValueRange) {
+            // Use direct values without field lookup
+            var minValue = this.resolveValue(directValueRange.minValue, {});
+            var maxValue = this.resolveValue(directValueRange.maxValue, {});
+            if (componentType === 'date' || componentType === 'dateRange') {
+                return {
+                    minValue: undefined,
+                    maxValue: undefined,
+                    minDate: minValue,
+                    maxDate: maxValue,
+                    minTime: undefined,
+                    maxTime: undefined
+                };
+            }
+            if (componentType === 'time') {
+                return {
+                    minValue: undefined,
+                    maxValue: undefined,
+                    minDate: undefined,
+                    maxDate: undefined,
+                    minTime: minValue,
+                    maxTime: maxValue
+                };
+            }
+            return {
+                minValue: minValue,
+                maxValue: maxValue,
+                minDate: undefined,
+                maxDate: undefined,
+                minTime: undefined,
+                maxTime: undefined
+            };
+        }
+        // CASE 2 & 3: Field references (enabled: true)
+        var enabledRanges = minMaxRange.filter(function (range) { return range.enabled === true; });
+        // No enabled ranges - return empty
+        if (enabledRanges.length === 0) {
+            return this.getEmptyConstraints(componentType);
+        }
+        // Extract resolved values from each enabled range
+        var resolvedRanges = enabledRanges
+            .map(function (range) { return ({
+            min: _this.resolveValue(range.minValue, formValues),
+            max: _this.resolveValue(range.maxValue, formValues)
+        }); })
+            .filter(function (range) { return range.min !== undefined || range.max !== undefined; });
+        // No valid ranges
+        if (resolvedRanges.length === 0) {
+            return this.getEmptyConstraints(componentType);
+        }
+        // Combine multiple ranges using UTMOST (most permissive)
+        var finalMin = this.getPermissiveMin(resolvedRanges, componentType);
+        var finalMax = this.getPermissiveMax(resolvedRanges, componentType);
+        // Return appropriate keys based on component type
+        if (componentType === 'date' || componentType === 'dateRange') {
+            return {
+                minValue: undefined,
+                maxValue: undefined,
+                minDate: finalMin,
+                maxDate: finalMax,
+                minTime: undefined,
+                maxTime: undefined
+            };
+        }
+        if (componentType === 'time') {
+            return {
+                minValue: undefined,
+                maxValue: undefined,
+                minDate: undefined,
+                maxDate: undefined,
+                minTime: finalMin,
+                maxTime: finalMax
+            };
+        }
+        return {
+            minValue: finalMin,
+            maxValue: finalMax,
+            minDate: undefined,
+            maxDate: undefined,
+            minTime: undefined,
+            maxTime: undefined
+        };
+    };
+    /**
+     * Resolve a single value - either direct or field reference
+     *
+     * @param value - Direct value or field reference object
+     * @param formValues - Form state values for field lookup
+     * @returns Resolved value or undefined
+     */
+    MinMaxRuleEngine.resolveValue = function (value, formValues) {
+        // Direct value (number or string)
+        if (typeof value === 'number') {
+            return value;
+        }
+        if (typeof value === 'string') {
+            return value;
+        }
+        // Field reference object
+        if (value && typeof value === 'object' && value.field) {
+            var fieldId = value.field;
+            var fieldValue = formValues[fieldId];
+            return fieldValue !== undefined ? fieldValue : undefined;
+        }
+        return undefined;
+    };
+    /**
+     * Get the most permissive (widest) minimum value
+     * For numbers: MIN of all mins
+     * For dates: earliest date (MIN string comparison on ISO format)
+     * For times: earliest time (MIN string comparison on 24-hour format)
+     *
+     * @param ranges - Array of {min, max} values
+     * @param componentType - Type of component
+     * @returns Most permissive minimum value
+     */
+    MinMaxRuleEngine.getPermissiveMin = function (ranges, componentType) {
+        var _this = this;
+        if (ranges.length === 0)
+            return undefined;
+        if (componentType === 'date' || componentType === 'dateRange') {
+            // For dates, find earliest (minimum) date
+            return ranges.reduce(function (earliest, current) {
+                if (!current.min)
+                    return earliest;
+                if (!earliest)
+                    return current.min;
+                var earliestIso = _this.convertToISO(earliest);
+                var currentIso = _this.convertToISO(current.min);
+                return currentIso < earliestIso ? current.min : earliest;
+            }, undefined);
+        }
+        if (componentType === 'time') {
+            // For times, find earliest (minimum) time
+            return ranges.reduce(function (earliest, current) {
+                if (!current.min)
+                    return earliest;
+                if (!earliest)
+                    return current.min;
+                var earliest24 = _this.convertTimeTo24Hour(earliest);
+                var current24 = _this.convertTimeTo24Hour(current.min);
+                return current24 < earliest24 ? current.min : earliest;
+            }, undefined);
+        }
+        // For numbers, find minimum (skip undefined values)
+        var minValues = ranges.map(function (r) { return r.min; }).filter(function (v) { return v !== undefined; });
+        return minValues.length > 0 ? Math.min.apply(Math, minValues) : undefined;
+    };
+    /**
+     * Get the most permissive (widest) maximum value
+     * For numbers: MAX of all maxs
+     * For dates: latest date (MAX string comparison on ISO format)
+     * For times: latest time (MAX string comparison on 24-hour format)
+     *
+     * @param ranges - Array of {min, max} values
+     * @param componentType - Type of component
+     * @returns Most permissive maximum value
+     */
+    MinMaxRuleEngine.getPermissiveMax = function (ranges, componentType) {
+        var _this = this;
+        if (ranges.length === 0)
+            return undefined;
+        if (componentType === 'date' || componentType === 'dateRange') {
+            // For dates, find latest (maximum) date
+            return ranges.reduce(function (latest, current) {
+                if (!current.max)
+                    return latest;
+                if (!latest)
+                    return current.max;
+                var latestIso = _this.convertToISO(latest);
+                var currentIso = _this.convertToISO(current.max);
+                return currentIso > latestIso ? current.max : latest;
+            }, undefined);
+        }
+        if (componentType === 'time') {
+            // For times, find latest (maximum) time
+            return ranges.reduce(function (latest, current) {
+                if (!current.max)
+                    return latest;
+                if (!latest)
+                    return current.max;
+                var latest24 = _this.convertTimeTo24Hour(latest);
+                var current24 = _this.convertTimeTo24Hour(current.max);
+                return current24 > latest24 ? current.max : latest;
+            }, undefined);
+        }
+        // For numbers, find maximum (skip undefined values)
+        var maxValues = ranges.map(function (r) { return r.max; }).filter(function (v) { return v !== undefined; });
+        return maxValues.length > 0 ? Math.max.apply(Math, maxValues) : undefined;
+    };
+    /**
+     * Convert MM/DD/YYYY date format to ISO (YYYY-MM-DD) for comparison
+     * Handles both formats gracefully
+     *
+     * @param dateString - Date in MM/DD/YYYY or ISO format
+     * @returns ISO date string (YYYY-MM-DD)
+     */
+    MinMaxRuleEngine.convertToISO = function (dateString) {
+        if (!dateString)
+            return '';
+        // Already ISO format (YYYY-MM-DD)
+        if (dateString.includes('-') && dateString.length === 10) {
+            return dateString;
+        }
+        // MM/DD/YYYY format
+        if (dateString.indexOf('/') !== -1) {
+            var parts = dateString.split('/');
+            var month = parts[0];
+            var day = parts[1];
+            var year = parts[2];
+            if (!month || !day || !year)
+                return dateString;
+            var monthPadded = month.length < 2 ? '0' + month : month;
+            var dayPadded = day.length < 2 ? '0' + day : day;
+            return year + "-" + monthPadded + "-" + dayPadded;
+        }
+        return dateString;
+    };
+    /**
+     * Convert 12-hour time format to 24-hour format for comparison
+     * Handles both 12-hour (hh:mm a) and 24-hour (HH:mm) formats
+     *
+     * @param timeString - Time in 12-hour (hh:mm a/p) or 24-hour (HH:mm) format
+     * @returns 24-hour format time string (HH:mm)
+     */
+    MinMaxRuleEngine.convertTimeTo24Hour = function (timeString) {
+        if (!timeString)
+            return '';
+        // Check if it contains AM/PM (12-hour format)
+        var isPM = /PM/i.test(timeString);
+        var isAM = /AM/i.test(timeString);
+        if (isAM || isPM) {
+            // Extract time part (before AM/PM)
+            var timePart = timeString.replace(/\s*(AM|PM)/i, '').trim();
+            var _a = timePart.split(':'), hours = _a[0], minutes = _a[1];
+            if (!hours || !minutes)
+                return timeString;
+            var hour = parseInt(hours, 10);
+            if (isPM && hour !== 12) {
+                hour += 12; // Convert PM hours (except 12) to 24-hour
+            }
+            else if (isAM && hour === 12) {
+                hour = 0; // Convert 12 AM to 00:00
+            }
+            var hourStr = String(hour);
+            var hourPadded = hourStr.length < 2 ? '0' + hourStr : hourStr;
+            return hourPadded + ":" + minutes;
+        }
+        // Already in 24-hour format or unknown format
+        return timeString;
+    };
+    /**
+     * Get empty constraints object based on component type
+     */
+    MinMaxRuleEngine.getEmptyConstraints = function (componentType) {
+        if (componentType === 'date' || componentType === 'dateRange') {
+            return {
+                minValue: undefined,
+                maxValue: undefined,
+                minDate: undefined,
+                maxDate: undefined,
+                minTime: undefined,
+                maxTime: undefined
+            };
+        }
+        if (componentType === 'time') {
+            return {
+                minValue: undefined,
+                maxValue: undefined,
+                minDate: undefined,
+                maxDate: undefined,
+                minTime: undefined,
+                maxTime: undefined
+            };
+        }
+        return {
+            minValue: undefined,
+            maxValue: undefined,
+            minDate: undefined,
+            maxDate: undefined,
+            minTime: undefined,
+            maxTime: undefined
+        };
+    };
+    /**
+     * Validate if a value passes all min/max constraints (optional)
+     * Can be used for client-side validation before submission
+     *
+     * @param value - Value to validate
+     * @param constraints - Constraints to check against
+     * @param componentType - Type of component
+     * @returns Validation result with error message if invalid
+     */
+    MinMaxRuleEngine.validateValue = function (value, constraints, componentType) {
+        if (value === undefined || value === null || value === '') {
+            return { isValid: true }; // Empty values pass (required handled separately)
+        }
+        if (componentType === 'date' || componentType === 'dateRange') {
+            if (constraints.minDate) {
+                var minIso = this.convertToISO(constraints.minDate);
+                var valueIso = this.convertToISO(value);
+                if (valueIso < minIso) {
+                    return { isValid: false, error: "Date must be on or after " + constraints.minDate };
+                }
+            }
+            if (constraints.maxDate) {
+                var maxIso = this.convertToISO(constraints.maxDate);
+                var valueIso = this.convertToISO(value);
+                if (valueIso > maxIso) {
+                    return { isValid: false, error: "Date must be on or before " + constraints.maxDate };
+                }
+            }
+        }
+        else if (componentType === 'time') {
+            if (constraints.minTime) {
+                if (value < constraints.minTime) {
+                    return { isValid: false, error: "Time must be on or after " + constraints.minTime };
+                }
+            }
+            if (constraints.maxTime) {
+                if (value > constraints.maxTime) {
+                    return { isValid: false, error: "Time must be on or before " + constraints.maxTime };
+                }
+            }
+        }
+        else {
+            // Number type
+            var numValue = Number(value);
+            if (constraints.minValue !== undefined) {
+                var minNum = Number(constraints.minValue);
+                if (numValue < minNum) {
+                    return {
+                        isValid: false,
+                        error: "Value must be at least " + constraints.minValue
+                    };
+                }
+            }
+            if (constraints.maxValue !== undefined) {
+                var maxNum = Number(constraints.maxValue);
+                if (numValue > maxNum) {
+                    return {
+                        isValid: false,
+                        error: "Value must be at most " + constraints.maxValue
+                    };
+                }
+            }
+        }
+        return { isValid: true };
+    };
+    return MinMaxRuleEngine;
+}());
+export { MinMaxRuleEngine };

package/src/common/option-fetcher.d.ts

@@ -0,0 +1,30 @@
+import { FormNode } from '../form-renderer/types/form-schema';
+/**
+ * @private
+ */
+export declare class OptionFetcher {
+    /**
+     * Fetch option data via `DataManager` + `Query`, supporting
+     * search/sort/filter/paging/queryParams, with `resolveFieldBinding`
+     * used to resolve `{field}` references in search keys and filter
+     * values, and `extractDataFromPath` used to project the result.
+     *
+     * Mirrors `useFetchOptions` (utils.tsx lines 359–471).
+     *
+     * @param componentOptions - Options config (array fallback handled by
+     *   caller; this method only handles `type==='url'` objects).
+     * @param componentId - Id of the requesting component (for stale
+     *   avoidance by the caller). Not used internally beyond tagging.
+     * @param formValues - Current form values (id-keyed) used to resolve
+     *   `{field}` references when `components` is provided.
+     * @param components - Schema components used to map name-keyed context
+     *   from id-keyed `formValues`.
+     * @returns Promise resolving to the option array (or empty array on
+     *   error / non-url config). Never rejects — errors are caught and return `[]`.
+     */
+    static fetch(componentOptions: any, componentId: string, formValues?: Record<string, any>, components?: FormNode[]): Promise<{
+        id: string;
+        options: string[];
+    }>;
+}
+export default OptionFetcher;

package/src/common/option-fetcher.js

@@ -0,0 +1,139 @@
+import { DataManager, Query } from '@syncfusion/ej2-data';
+import { resolveFieldBinding, getAdaptorInstance, extractDataFromPath } from './utils';
+/**
+ * @private
+ */
+var OptionFetcher = /** @class */ (function () {
+    function OptionFetcher() {
+    }
+    /**
+     * Fetch option data via `DataManager` + `Query`, supporting
+     * search/sort/filter/paging/queryParams, with `resolveFieldBinding`
+     * used to resolve `{field}` references in search keys and filter
+     * values, and `extractDataFromPath` used to project the result.
+     *
+     * Mirrors `useFetchOptions` (utils.tsx lines 359–471).
+     *
+     * @param componentOptions - Options config (array fallback handled by
+     *   caller; this method only handles `type==='url'` objects).
+     * @param componentId - Id of the requesting component (for stale
+     *   avoidance by the caller). Not used internally beyond tagging.
+     * @param formValues - Current form values (id-keyed) used to resolve
+     *   `{field}` references when `components` is provided.
+     * @param components - Schema components used to map name-keyed context
+     *   from id-keyed `formValues`.
+     * @returns Promise resolving to the option array (or empty array on
+     *   error / non-url config). Never rejects — errors are caught and return `[]`.
+     */
+    OptionFetcher.fetch = function (componentOptions, componentId, formValues, components) {
+        var isUrlType = componentOptions &&
+            typeof componentOptions === 'object' &&
+            !Array.isArray(componentOptions) &&
+            componentOptions.type === 'url' &&
+            componentOptions.url;
+        if (!isUrlType) {
+            return Promise.resolve({ id: componentId, options: [] });
+        }
+        var urlConfig = componentOptions;
+        return new Promise(function (resolve) {
+            try {
+                var headers_1 = {};
+                if (urlConfig.headers && Array.isArray(urlConfig.headers)) {
+                    urlConfig.headers.forEach(function (h) {
+                        if (h.key && h.key.trim()) {
+                            headers_1[h.key] = h.value;
+                        }
+                    });
+                }
+                // Create DataManager with selected adaptor
+                var dataManager = new DataManager({
+                    url: urlConfig.url,
+                    adaptor: getAdaptorInstance(urlConfig.adaptorType),
+                    headers: Object.keys(headers_1).length ? headers_1 : undefined
+                });
+                // Build Query (dynamic support)
+                var query_1 = new Query();
+                if (urlConfig.search && urlConfig.search.enabled && urlConfig.search.fields && urlConfig.search.fields.length > 0) {
+                    var searchKey = urlConfig.search.key || 'search';
+                    // Resolve field bindings in search value
+                    var resolvedSearchValue = formValues
+                        ? resolveFieldBinding(searchKey, formValues, components)
+                        : /[{}]/.test(searchKey) ? '' : searchKey;
+                    query_1 = query_1.search(resolvedSearchValue, urlConfig.search.fields);
+                }
+                // Apply sort query
+                if (urlConfig.sort && urlConfig.sort.enabled && urlConfig.sort.field) {
+                    var sortDirection = urlConfig.sort.direction === 'descending' ? 'descending' : 'ascending';
+                    query_1 = query_1.sortBy(urlConfig.sort.field, sortDirection);
+                }
+                // Apply filter queries with field binding resolution
+                if (urlConfig.filters && Array.isArray(urlConfig.filters) && urlConfig.filters.length > 0) {
+                    urlConfig.filters.forEach(function (f) {
+                        if (f.field && f.operator && f.value !== undefined && f.value !== '') {
+                            var resolvedFilterValue = formValues
+                                ? resolveFieldBinding(f.value, formValues, components)
+                                : /[{}]/.test(f.value) ? '' : f.value;
+                            if (resolvedFilterValue !== '') {
+                                query_1 = query_1.where(f.field, f.operator, resolvedFilterValue);
+                            }
+                        }
+                    });
+                }
+                // Add params (query string)
+                if (urlConfig.queryParams) {
+                    Object.keys(urlConfig.queryParams).forEach(function (key) {
+                        query_1 = query_1.addParams(key, urlConfig.queryParams[key]);
+                    });
+                }
+                // Paging
+                if (urlConfig.skip) {
+                    query_1 = query_1.skip(urlConfig.skip);
+                }
+                if (urlConfig.take) {
+                    query_1 = query_1.take(urlConfig.take);
+                }
+                var timeoutMs = 15000;
+                var timedOut_1 = false;
+                var timeoutHandle_1 = setTimeout(function () {
+                    timedOut_1 = true;
+                    resolve({ id: componentId, options: [] });
+                }, timeoutMs);
+                dataManager.executeQuery(query_1).then(function (res) {
+                    if (timedOut_1) {
+                        return;
+                    }
+                    clearTimeout(timeoutHandle_1);
+                    var data = res.result;
+                    if (urlConfig.dataPath) {
+                        data = extractDataFromPath(data, urlConfig.dataPath);
+                    }
+                    var options;
+                    if (Array.isArray(data)) {
+                        options = data;
+                    }
+                    else if (typeof data === 'string') {
+                        options = [data];
+                    }
+                    else {
+                        options = [];
+                    }
+                    resolve({ id: componentId, options: options });
+                }).catch(function (err) {
+                    if (timedOut_1) {
+                        return;
+                    }
+                    clearTimeout(timeoutHandle_1);
+                    // console.error('Fetch error:', err);
+                    resolve({ id: componentId, options: [] });
+                });
+            }
+            catch (err) {
+                // console.error('Setup error:', err);
+                resolve({ id: componentId, options: [] });
+            }
+        });
+    };
+    return OptionFetcher;
+}());
+export { OptionFetcher };
+export default OptionFetcher;