@syncfusion/ej2-form-renderer 34.2.2

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

@@ -0,0 +1,816 @@
+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 { TextBox, NumericTextBox, MaskedTextBox, Uploader, TextArea, Slider, ColorPicker, Rating, Signature } from '@syncfusion/ej2-inputs';
+import { CheckBox, RadioButton, Switch, Button } from '@syncfusion/ej2-buttons';
+import { SplitButton } from '@syncfusion/ej2-splitbuttons';
+import { DropDownList, MultiSelect, CheckBoxSelection, VirtualScroll } from '@syncfusion/ej2-dropdowns';
+import { DatePicker, DateTimePicker, TimePicker, DateRangePicker, Islamic } from '@syncfusion/ej2-calendars';
+import { Message } from '@syncfusion/ej2-notifications';
+import { ImageEditor } from '@syncfusion/ej2-image-editor';
+import { RichTextEditor, Toolbar, HtmlEditor, Link, QuickToolbar, Image as RTEImage, Count, Table, EmojiPicker, SlashMenu, CodeBlock, ClipBoardCleanup, AutoFormat, ImportExport, PasteCleanup } from '@syncfusion/ej2-richtexteditor';
+import { createElement } from '@syncfusion/ej2-base';
+import { mapButtonStyleToClass, mapPositionToJustifyContent, resolveButtonType, resolveConditionalData, resolveOptions } from '../common/utils';
+import { OptionFetcher } from '../common/option-fetcher';
+import { CheckboxGroup } from '../common/checkbox-group';
+import { DataGridComponent } from '../common/datagrid-component';
+import { ConditionalRuleEngine } from '../common/conditional-rule-engine';
+/**
+ * @private
+ */
+var normalizeAttributes = function (attributes) {
+    if (!attributes) {
+        return {};
+    }
+    if (Array.isArray(attributes)) {
+        return attributes.reduce(function (acc, item) {
+            if (item && item.key && item.value !== undefined) {
+                acc[item.key] = item.value;
+            }
+            return acc;
+        }, {});
+    }
+    return attributes;
+};
+/**
+ * @private
+ */
+var applyHostId = function (el, id) {
+    if (el && id) {
+        el.setAttribute('id', id);
+    }
+};
+/**
+ * Renders a single form field component (vanilla EJ2 TS) and returns the
+ * instantiated EJ2 component instance (or host element). The host owns DOM
+ * attachment and ref tracking.
+ *
+ * @private
+ */
+export var renderFormField = function (options) {
+    var component = options.component, value = options.value, onChange = options.onChange, onBlur = options.onBlur, onClick = options.onClick, _a = options.hasError, hasError = _a === void 0 ? false : _a, locale = options.locale, formState = options.formState, settings = options.settings, components = options.components, enableRtl = options.enableRtl, ref = options.ref, l10n = options.l10n;
+    var initializedGrids = options.initializedGrids || new Set();
+    var target = options.target;
+    var commonProps = {
+        floatLabelType: (component.floatLabelType || 'Never'),
+        placeholder: component.placeholder || '',
+        enabled: !component.disabled
+    };
+    var createValidationHandlers = function (getValue) {
+        var validateOn = component.validateOn || 'Change';
+        var handlers = {};
+        if (!validateOn || validateOn === 'Change') {
+            handlers.change = function (args) { return onChange(getValue(args)); };
+            handlers.blur = function () { if (onBlur) {
+                onBlur();
+            } };
+        }
+        if (validateOn === 'Blur') {
+            handlers.change = function (args) { return onChange(getValue(args)); };
+            handlers.blur = function () { if (onBlur) {
+                onBlur();
+            } };
+        }
+        return handlers;
+    };
+    var htmlAttrs = normalizeAttributes(component.htmlAttributes);
+    if (component.required) {
+        htmlAttrs['aria-required'] = 'true';
+    }
+    var errorClass = hasError ? 'e-error' : '';
+    var cssClass = ((component.cssClass || '') + " " + errorClass + " " + (component.size === 'Small' ? ' e-small' : component.size === 'Bigger' ? ' e-bigger' : '')).trim();
+    switch (component.type) {
+        case 'textbox': {
+            var tb = new TextBox(__assign({ id: component.name, type: component.multiline ? 'hidden' : (component.textboxType ? component.textboxType : 'text'), name: component.id, enableRtl: enableRtl, locale: locale, floatLabelType: commonProps.floatLabelType, placeholder: commonProps.placeholder, enabled: commonProps.enabled, value: value !== undefined ? value : (component.defaultValue || ''), multiline: component.multiline, showClearButton: component.showClearButton, autocomplete: component.autocomplete === false || component.autocomplete === undefined ? 'off' : 'on', readonly: component.readOnly || false, cssClass: cssClass, htmlAttributes: htmlAttrs, appendTemplate: component.suffix, prependTemplate: component.prefix }, createValidationHandlers(function (args) { return args.value || ''; })));
+            if (target) {
+                tb.appendTo(target);
+            }
+            ref(tb);
+            return tb;
+        }
+        case 'textarea': {
+            var ta = new TextArea(__assign({ id: component.name, name: component.id, enableRtl: enableRtl, locale: locale, floatLabelType: commonProps.floatLabelType, placeholder: commonProps.placeholder, enabled: commonProps.enabled, value: value !== undefined ? value : (component.defaultValue || ''), cols: component.cols || 200, rows: component.textareaRows || 4, showClearButton: component.showClearButton || false, readonly: component.readOnly || false, maxLength: component.maxLength || 255, cssClass: cssClass, htmlAttributes: htmlAttrs, appendTemplate: component.suffix, prependTemplate: component.prefix, resizeMode: 'Vertical' }, createValidationHandlers(function (args) { return args.value || ''; })));
+            if (target) {
+                ta.appendTo(target);
+            }
+            ref(ta);
+            return ta;
+        }
+        case 'number': {
+            var numValue = value === '' ? undefined : value;
+            var ntb = new NumericTextBox({
+                locale: locale,
+                enableRtl: enableRtl,
+                floatLabelType: commonProps.floatLabelType,
+                placeholder: commonProps.placeholder,
+                enabled: commonProps.enabled,
+                value: numValue !== undefined ? numValue : (component.defaultValue || undefined),
+                decimals: component.decimals || 2,
+                currency: component.currency,
+                format: component.numberFormat || 'n2',
+                step: component.step || 1,
+                min: component.minValue || undefined,
+                max: component.maxValue || undefined,
+                readonly: component.readOnly || false,
+                showClearButton: component.showClearButton || false,
+                cssClass: cssClass,
+                htmlAttributes: htmlAttrs,
+                appendTemplate: component.suffix,
+                prependTemplate: component.prefix,
+                change: function (args) { return onChange(args.value); }
+            });
+            if (target) {
+                applyHostId(target, component.name);
+                target.setAttribute('name', component.id);
+                ntb.appendTo(target);
+            }
+            ref(ntb);
+            return ntb;
+        }
+        case 'checkbox': {
+            var checkboxLabel = component.label && component.required
+                ? component.label + " *"
+                : component.label;
+            var cb = new CheckBox({
+                locale: locale,
+                name: component.id,
+                enableRtl: enableRtl,
+                label: checkboxLabel,
+                labelPosition: component.checkboxLabelPosition,
+                checked: ((component.checked !== undefined && component.checked !== null ? component.checked : false) || (value !== undefined && value !== null ? value : false)),
+                indeterminate: component.indeterminate || false,
+                disabled: component.disabled,
+                cssClass: cssClass,
+                htmlAttributes: htmlAttrs,
+                change: function (args) { return onChange(args.checked); }
+            });
+            if (target) {
+                applyHostId(target, component.name);
+                cb.appendTo(target);
+            }
+            ref(cb);
+            return cb;
+        }
+        case 'checkboxGroup': {
+            var fetchedCheckboxOptions_1 = [];
+            OptionFetcher.fetch(component.options, component.id, formState ? formState.values : undefined, components)
+                .then(function (res) {
+                if (res.id === component.id && res.options.length > 0) {
+                    fetchedCheckboxOptions_1.push.apply(fetchedCheckboxOptions_1, res.options);
+                    group_1.setOptions(fetchedCheckboxOptions_1);
+                }
+            }).catch(function () { });
+            var resolvedCheckboxOptions = resolveOptions(component.options, fetchedCheckboxOptions_1);
+            var finalCheckboxOptions = resolvedCheckboxOptions.length > 0
+                ? resolvedCheckboxOptions
+                : (component.options || ['Option 1']);
+            var group_1 = new CheckboxGroup({
+                component: __assign({}, component, { options: finalCheckboxOptions }),
+                formState: formState,
+                value: value,
+                enableRtl: enableRtl,
+                onChange: function (v) { return onChange(v); },
+                optionRef: options.ref,
+                target: target,
+                ref: ref
+            });
+            if (target) {
+                applyHostId(target, component.name);
+            }
+            group_1.render(target);
+            return group_1;
+        }
+        case 'radio': {
+            var radioOptions = Array.isArray(component.options) ? component.options : ['Option 1'];
+            var wrapper_1 = createElement('div', {
+                id: component.name + "-group",
+                className: "e-radio-group " + errorClass
+            });
+            var rbInstances = [];
+            radioOptions.forEach(function (option, idx) {
+                var optionValue = option;
+                var optionText = option;
+                var row = createElement('div');
+                row.style.marginBottom = '8px';
+                wrapper_1.appendChild(row);
+                var rbHost = createElement('input', {
+                    id: component.name + "_" + idx + "_" + optionValue,
+                    attrs: { type: 'radio' }
+                });
+                row.appendChild(rbHost);
+                var rb = new RadioButton({
+                    name: component.id,
+                    label: optionText,
+                    enableRtl: enableRtl,
+                    locale: locale,
+                    disabled: component.disabled,
+                    value: optionValue,
+                    htmlAttributes: htmlAttrs,
+                    labelPosition: component.fieldLabelPosition,
+                    checked: component.defaultValue === optionValue || value === optionValue,
+                    cssClass: cssClass,
+                    change: function (args) {
+                        if (args.value === optionValue) {
+                            onChange(optionValue);
+                        }
+                    }
+                });
+                rb.appendTo(rbHost);
+                ref(rb, idx);
+                if (options.ref && typeof options.ref === 'function') {
+                    options.ref(rb, idx);
+                }
+            });
+            if (target) {
+                target.appendChild(wrapper_1);
+            }
+            return rbInstances;
+        }
+        case 'dropdown': {
+            // Same Vanilla TS fetch adaptation as checkboxGroup (see above).
+            var fetchedDropdownOptions_1 = [];
+            OptionFetcher.fetch(component.options, component.id, formState ? formState.values : undefined, components)
+                .then(function (res) {
+                if (res.id === component.id && res.options.length > 0) {
+                    fetchedDropdownOptions_1.push.apply(fetchedDropdownOptions_1, res.options);
+                    ddl_1.dataSource = fetchedDropdownOptions_1;
+                }
+            }).catch(function () { });
+            var resolvedDropdownOptions = resolveOptions(component.options, fetchedDropdownOptions_1);
+            var finalDropdownOptions = resolvedDropdownOptions.length > 0
+                ? resolvedDropdownOptions
+                : (component.options || ['Option 1']);
+            if (component.conditions && component.conditions.choiceBasedField) {
+                finalDropdownOptions = ConditionalRuleEngine.getChoiceBasedOptions(component.conditions.choiceBasedField, finalDropdownOptions, formState ? formState.values : undefined, component.conditions.choiceBasedField.primaryFieldId);
+                if (finalDropdownOptions.length > 0 && value != null && finalDropdownOptions.indexOf(value) === -1) {
+                    if (formState) {
+                        formState.values[component.id] = null;
+                    }
+                }
+            }
+            var ddl_1 = new DropDownList(__assign({ id: component.name, name: component.id, floatLabelType: commonProps.floatLabelType, placeholder: commonProps.placeholder, enabled: commonProps.enabled, locale: locale, enableRtl: enableRtl, cssClass: cssClass, dataSource: finalDropdownOptions, value: formState.values[component.id] !== undefined ? formState.values[component.id] : (component.defaultValue !== undefined && component.defaultValue !== null ? component.defaultValue : null), showClearButton: component.showClearButton || false, readonly: component.readOnly || false, enableVirtualization: component.enableVirtualization || false, popupHeight: component.popupHeight || '300px', popupWidth: component.popupWidth || '100%', htmlAttributes: htmlAttrs }, createValidationHandlers(function (args) { return args.value || ''; })));
+            // Inject services (VirtualScroll) for the virtualization path.
+            DropDownList.Inject(VirtualScroll);
+            if (target) {
+                ddl_1.appendTo(target);
+            }
+            ref(ddl_1);
+            return ddl_1;
+        }
+        case 'multiselect': {
+            var fetchedMultiSelectOptions_1 = [];
+            OptionFetcher.fetch(component.options, component.id, formState ? formState.values : undefined, components)
+                .then(function (res) {
+                if (res.id === component.id && res.options.length > 0) {
+                    fetchedMultiSelectOptions_1.push.apply(fetchedMultiSelectOptions_1, res.options);
+                    ms_1.dataSource = fetchedMultiSelectOptions_1;
+                }
+            }).catch(function () { });
+            var resolvedMultiSelectOptions = resolveOptions(component.options, fetchedMultiSelectOptions_1);
+            var finalMultiSelectOptions = resolvedMultiSelectOptions.length > 0
+                ? resolvedMultiSelectOptions
+                : (component.options || ['Option 1']);
+            var ms_1 = new MultiSelect(__assign({ name: component.id, enableRtl: enableRtl, locale: locale, floatLabelType: commonProps.floatLabelType, enabled: commonProps.enabled, value: value !== undefined ? value : (component.defaultValue !== undefined && component.defaultValue !== null ? component.defaultValue : null), placeholder: component.placeholder, dataSource: finalMultiSelectOptions, fields: { text: 'text', value: 'value' }, showClearButton: component.showClearButton || false, readonly: component.readOnly || false, allowCustomValue: component.allowCustomValue || false, addTagOnBlur: component.addTagOnBlur || false, delimiterChar: component.delimiterChar || ',', showSelectAll: component.showSelectAll || false, mode: component.showSelectAll ? 'CheckBox' : (component.visualMode ? component.visualMode : undefined), selectAllText: component.selectAllText, unSelectAllText: component.unSelectAllText, showDropDownIcon: component.showDropDownIcon !== false, enableVirtualization: component.enableVirtualization || false, popupHeight: component.popupHeight || '300px', popupWidth: component.popupWidth || '100%', cssClass: cssClass, htmlAttributes: htmlAttrs }, createValidationHandlers(function (args) { return args.value || ''; })));
+            MultiSelect.Inject(CheckBoxSelection, VirtualScroll);
+            if (target) {
+                ms_1.appendTo(target);
+            }
+            ref(ms_1);
+            return ms_1;
+        }
+        case 'date': {
+            var dp = new DatePicker(__assign({ floatLabelType: commonProps.floatLabelType, id: component.name, name: component.id, enableRtl: enableRtl, locale: locale, placeholder: commonProps.placeholder, enabled: commonProps.enabled, value: value !== undefined ? value : (component.defaultValue !== undefined && component.defaultValue !== null ? component.defaultValue : null), format: component.format || 'MM/dd/yyyy', readOnly: component.readOnly || false, showClearButton: component.showClearButton === undefined ? false : component.showClearButton, showTodayButton: component.showTodayButton !== false ? true : false, calendarMode: component.calendarMode || 'Gregorian', dayHeaderFormat: component.dayHeaderFormat || 'Short', depth: component.depth || 'Month', start: component.start || 'Month', firstDayOfWeek: component.firstDayOfWeek || 0, min: component.minDate ? new Date(component.minDate) : undefined, max: component.maxDate ? new Date(component.maxDate) : undefined, cssClass: cssClass, htmlAttributes: htmlAttrs }, createValidationHandlers(function (args) { return args.value || ''; })));
+            DatePicker.Inject(Islamic);
+            if (target) {
+                dp.appendTo(target);
+            }
+            ref(dp);
+            return dp;
+        }
+        case 'dateTime': {
+            var dtp = new DateTimePicker(__assign({ id: component.name, floatLabelType: commonProps.floatLabelType, placeholder: commonProps.placeholder, enabled: commonProps.enabled, locale: locale, enableRtl: enableRtl, name: component.id, dayHeaderFormat: component.dayHeaderFormat || 'Short', value: value !== undefined ? value : (component.defaultValue !== undefined && component.defaultValue !== null ? component.defaultValue : null), format: component.format || 'MM/dd/yyyy hh:mm a', showClearButton: component.showClearButton === undefined ? false : component.showClearButton, showTodayButton: component.showTodayButton !== false ? true : false, depth: component.depth || 'Month', start: component.start || 'Month', step: component.step || 1, readonly: component.readOnly || false, min: component.minDate ? new Date(component.minDate) : undefined, max: component.maxDate ? new Date(component.maxDate) : undefined, minTime: component.minTime ? new Date("2000-01-01 " + component.minTime) : undefined, maxTime: component.maxTime ? new Date("2000-01-01 " + component.maxTime) : undefined, enableMask: false, cssClass: cssClass, htmlAttributes: htmlAttrs }, createValidationHandlers(function (args) { return args.value || ''; })));
+            DateTimePicker.Inject(Islamic);
+            if (target) {
+                dtp.appendTo(target);
+            }
+            ref(dtp);
+            return dtp;
+        }
+        case 'time': {
+            var tp = new TimePicker(__assign({ id: component.name, locale: locale, name: component.id, enableRtl: enableRtl, floatLabelType: commonProps.floatLabelType, placeholder: commonProps.placeholder, enabled: commonProps.enabled, value: value !== undefined ? value : (component.defaultValue !== undefined && component.defaultValue !== null ? component.defaultValue : null), format: component.format || 'hh:mm a', showClearButton: component.showClearButton === undefined ? false : component.showClearButton, step: component.step || 30, readonly: component.readOnly || false, min: component.minTime ? new Date("2000-01-01 " + component.minTime) : undefined, max: component.maxTime ? new Date("2000-01-01 " + component.maxTime) : undefined, enableMask: false, cssClass: cssClass, htmlAttributes: htmlAttrs }, createValidationHandlers(function (args) { return args.value || ''; })));
+            if (target) {
+                tp.appendTo(target);
+            }
+            ref(tp);
+            return tp;
+        }
+        case 'dateRange': {
+            var drp = new DateRangePicker(__assign({ id: component.name, locale: locale, enableRtl: enableRtl, name: component.id, floatLabelType: commonProps.floatLabelType, dayHeaderFormat: component.dayHeaderFormat || 'Short', placeholder: commonProps.placeholder, enabled: commonProps.enabled, value: value !== undefined ? value : (component.defaultValue !== undefined && component.defaultValue !== null ? component.defaultValue : null), depth: component.depth || 'Month', start: component.start || 'Month', min: component.minDate ? new Date(component.minDate) : undefined, max: component.maxDate ? new Date(component.maxDate) : undefined, format: component.format || 'MM/dd/yyyy', separator: component.separator || ' - ', showClearButton: component.showClearButton === undefined ? false : component.showClearButton, readonly: component.readOnly || false, cssClass: cssClass, htmlAttributes: htmlAttrs }, createValidationHandlers(function (args) { return args.value || ''; })));
+            if (target) {
+                drp.appendTo(target);
+            }
+            ref(drp);
+            return drp;
+        }
+        case 'switch': {
+            var sw = new Switch({
+                locale: locale,
+                enableRtl: enableRtl,
+                value: component.defaultValue,
+                name: component.id,
+                checked: ((component.checked !== undefined && component.checked !== null ? component.checked : false) || (value !== undefined && value !== null ? value : false)),
+                disabled: component.disabled,
+                onLabel: component.onLabel || '',
+                offLabel: component.offLabel || '',
+                cssClass: cssClass,
+                htmlAttributes: htmlAttrs,
+                change: function (args) { return onChange(args.checked); }
+            });
+            if (target) {
+                applyHostId(target, component.name);
+                sw.appendTo(target);
+            }
+            ref(sw);
+            return sw;
+        }
+        case 'button': {
+            var groupButtons = (component.buttonsGroups || component.buttons || []);
+            if (groupButtons && groupButtons.length > 0) {
+                var groupStyleObj = {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    alignItems: 'center',
+                    gap: component.gap || '8px',
+                    justifyContent: mapPositionToJustifyContent(component.position),
+                    width: component.width || undefined
+                };
+                var groupContainer_1 = createElement('div', {
+                    id: component.name,
+                    attrs: {
+                        role: 'group',
+                        'aria-label': component.label || 'Button Group',
+                        className: cssClass + " " + (enableRtl ? 'e-rtl' : '')
+                    }
+                });
+                Object.assign(groupContainer_1.style, groupStyleObj);
+                var btnInstances_1 = [];
+                groupButtons.forEach(function (btnDef, idx) {
+                    var btnId = component.name + "_" + idx;
+                    var btnCssClass = [mapButtonStyleToClass(btnDef.style)].filter(Boolean).join(' ');
+                    btnCssClass += component.size === 'Small' ? ' e-small' : component.size === 'Bigger' ? ' e-bigger' : '';
+                    var resolvedGroupType = resolveButtonType(btnDef.type);
+                    var btnHost = createElement('button', {
+                        id: String(btnId),
+                        attrs: { name: String(btnId), type: resolvedGroupType }
+                    });
+                    groupContainer_1.appendChild(btnHost);
+                    var btnInst = new Button({
+                        locale: locale,
+                        enableRtl: enableRtl,
+                        cssClass: btnCssClass,
+                        disabled: btnDef.disabled || false,
+                        content: btnDef.label || "Button " + (idx + 1),
+                        iconCss: btnDef.iconCss,
+                        iconPosition: btnDef.iconPosition
+                    });
+                    btnInst.appendTo(btnHost);
+                    btnInst.element.onclick = function (event) {
+                        if (onClick) {
+                            onClick(event);
+                        }
+                    };
+                    ref(btnInst, idx);
+                    btnInstances_1.push(btnInst);
+                    if (options.ref && typeof options.ref === 'function') {
+                        options.ref(btnInst, idx);
+                    }
+                });
+                if (target) {
+                    target.appendChild(groupContainer_1);
+                }
+                return btnInstances_1;
+            }
+            // Fallback: single ButtonComponent when no group is configured.
+            var resolvedButtonType = resolveButtonType(component.buttonType);
+            var buttonCssClassList = [
+                mapButtonStyleToClass(component.style),
+                resolvedButtonType === 'submit' ? 'submit-btn form-submit-type' : '',
+                resolvedButtonType === 'reset' ? 'form-reset-type' : '',
+                component.cssClass || 'e-primary',
+                component.size === 'Small' ? ' e-small' : component.size === 'Bigger' ? ' e-bigger' : ''
+            ].filter(Boolean).join(' ') || 'e-primary';
+            var buttonContainerStyle = {
+                display: 'flex',
+                justifyContent: mapPositionToJustifyContent(component.position),
+                width: component.width || '100%'
+            };
+            var container = createElement('div', {
+                id: component.name + "-container"
+            });
+            Object.assign(container.style, buttonContainerStyle);
+            var btnHost = createElement('button', {
+                id: component.name,
+                attrs: { type: resolvedButtonType }
+            });
+            container.appendChild(btnHost);
+            var btnInst = new Button({
+                enableRtl: enableRtl,
+                locale: locale,
+                cssClass: buttonCssClassList,
+                disabled: component.disabled,
+                iconCss: component.iconCss,
+                iconPosition: component.iconPosition,
+                content: component.label,
+            });
+            btnInst.appendTo(btnHost);
+            ref(btnInst);
+            btnInst.element.onclick = function (event) {
+                if (onClick) {
+                    onClick(event);
+                }
+            };
+            if (target) {
+                target.appendChild(container);
+            }
+            return btnInst;
+        }
+        case 'splitButton': {
+            var splitButtonCssClassList = [
+                component.style === 'primary' ? 'e-primary' : '',
+                component.style === 'flat' ? '' : '',
+                component.style === 'information' ? 'e-info' : '',
+                component.style === 'error' ? 'e-danger' : '',
+                component.style === 'success' ? 'e-success' : '',
+                component.style === 'warning' ? 'e-warning' : '',
+                component.cssClass || ''
+            ].filter(Boolean).join(' ') || undefined;
+            var splitButtonContainerStyle = {
+                display: 'flex',
+                justifyContent: mapPositionToJustifyContent(component.position)
+            };
+            var container = createElement('div', {
+                id: component.name + "-container",
+                attrs: { 'aria-label': 'Splitbutton' }
+            });
+            Object.assign(container.style, splitButtonContainerStyle);
+            var items = (component.options && component.options.length > 0
+                ? component.options.map(function (option, index) { return ( /* eslint-disable-next-line */{
+                    text: option,
+                    id: component.id + "_option_" + index
+                }); })
+                : [/* eslint-disable-next-line */ { text: 'Option 1', id: component.id + "_option_0" }]);
+            var sbHost = createElement('button', {
+                id: component.name
+            });
+            container.appendChild(sbHost);
+            var sb = new SplitButton({
+                locale: locale,
+                enableRtl: enableRtl,
+                content: component.label || 'Split Button',
+                items: items,
+                cssClass: splitButtonCssClassList,
+                disabled: component.disabled,
+                iconCss: component.iconCss,
+                iconPosition: component.iconPosition || 'Left',
+                click: function (args) {
+                    if (onClick) {
+                        onClick(__assign({}, args));
+                    }
+                },
+                select: function (args) {
+                    if (onClick) {
+                        onClick(__assign({}, args, { selectedItem: args.item.text }));
+                    }
+                }
+            });
+            sb.appendTo(sbHost);
+            if (target) {
+                target.appendChild(container);
+            }
+            ref(sb);
+            return sb;
+        }
+        case 'signature': {
+            var canvas = createElement('canvas', {
+                id: component.name
+            });
+            var sig = new Signature({
+                enableRtl: enableRtl,
+                locale: locale,
+                backgroundColor: component.backgroundColor || '',
+                strokeColor: component.strokeColor || '',
+                maxStrokeWidth: component.maxValue,
+                minStrokeWidth: component.minValue,
+                velocity: component.velocity,
+                disabled: component.disabled,
+                change: function () { return onChange(component.name); }
+            });
+            if (target) {
+                sig.appendTo(canvas);
+                target.appendChild(canvas);
+            }
+            ref(sig);
+            return sig;
+        }
+        case 'rating': {
+            var rt = new Rating({
+                enableRtl: enableRtl,
+                locale: locale,
+                value: value !== undefined ? value : (component.defaultValue || 0),
+                disabled: component.disabled,
+                cssClass: cssClass,
+                allowReset: component.allowReset,
+                itemsCount: component.itemsCount,
+                min: component.minValue,
+                precision: component.precision,
+                readOnly: component.readOnly,
+                showTooltip: component.showRatingTooltip || false,
+                showLabel: component.showRatingLabel,
+                labelPosition: component.showRatingLabel ? component.ratingLabelPosition : undefined,
+                valueChanged: function (args) { return onChange(args.value); }
+            });
+            if (target) {
+                applyHostId(target, component.name);
+                target.setAttribute('name', component.id);
+                rt.appendTo(target);
+            }
+            ref(rt);
+            return rt;
+        }
+        case 'colorPicker': {
+            var cp = new ColorPicker({
+                enableRtl: enableRtl,
+                locale: locale,
+                value: value !== undefined ? value : (component.defaultValue || ''),
+                disabled: component.disabled,
+                enableOpacity: component.enableOpacity,
+                showButtons: component.showButtons,
+                showRecentColors: component.showRecentColors,
+                noColor: component.showNoColor,
+                cssClass: cssClass,
+                change: function (args) { return onChange(args.value); }
+            });
+            if (target) {
+                applyHostId(target, component.name);
+                cp.appendTo(target);
+            }
+            ref(cp);
+            return cp;
+        }
+        case 'inputMask': {
+            var im = new MaskedTextBox(__assign({ id: component.name, name: component.id, enableRtl: enableRtl, floatLabelType: component.floatLabelType || 'Never', placeholder: component.placeholder || '', enabled: !component.disabled, locale: locale, value: value !== undefined ? value : (component.defaultValue || ''), mask: component.mask || '000-000-0000', promptChar: component.promptChar || '_', customCharacters: component.customCharacters, readOnly: component.readOnly || false, showClearButton: component.showClearButton !== false, cssClass: cssClass, htmlAttributes: htmlAttrs, appendTemplate: component.suffix, prependTemplate: component.prefix }, createValidationHandlers(function (args) { return args.value || ''; })));
+            if (target) {
+                im.appendTo(target);
+            }
+            ref(im);
+            return im;
+        }
+        case 'rangeSlider': {
+            var sl = new Slider({
+                enableRtl: enableRtl,
+                locale: locale,
+                value: value !== undefined ? value : (component.defaultValue !== undefined && component.defaultValue !== null ? component.defaultValue : 0),
+                min: component.minValue || 0,
+                max: component.maxValue || 100,
+                step: component.step || 1,
+                cssClass: cssClass,
+                enabled: !component.disabled,
+                readonly: component.readOnly,
+                showButtons: component.showButtons,
+                change: function (args) { return onChange(args.value); }
+            });
+            if (target) {
+                applyHostId(target, component.name);
+                sl.appendTo(target);
+            }
+            ref(sl);
+            return sl;
+        }
+        case 'fileUpload': {
+            var up = new Uploader({
+                enableRtl: enableRtl,
+                locale: locale,
+                type: 'file',
+                enabled: !component.disabled,
+                allowedExtensions: component.allowExtensions,
+                asyncSettings: { saveUrl: component.saveUrl, removeUrl: component.removeUrl },
+                buttons: component.buttons || {
+                    'browse': 'Choose File',
+                    'clear': 'Clear All',
+                    'upload': 'Upload All'
+                },
+                maxFileSize: component.maxValue,
+                minFileSize: component.minValue,
+                multiple: !!component.allowMultiple,
+                showFileList: component.showFileList,
+                htmlAttributes: htmlAttrs,
+                cssClass: cssClass,
+                change: function (args) { return onChange(args.file); }
+            });
+            if (target) {
+                applyHostId(target, component.name);
+                up.appendTo(target);
+            }
+            ref(up);
+            return up;
+        }
+        case 'imageEditor': {
+            var ieHost = createElement('div', {
+                id: component.name,
+                attrs: { 'data-field': component.id }
+            });
+            var ie_1;
+            setTimeout(function () {
+                ie_1 = new ImageEditor({
+                    locale: locale,
+                    enableRtl: enableRtl,
+                    disabled: component.disabled,
+                    cssClass: cssClass,
+                    height: (component.height != null ? component.height : '350px').toString(),
+                    width: (component.width != null ? component.width : '100%').toString(),
+                    editComplete: function () { return onChange(component.name); },
+                    fileOpened: function () { return onChange(component.name); }
+                }, "#" + component.name);
+            }, 100);
+            if (target) {
+                target.appendChild(ieHost);
+            }
+            ref(ie_1);
+            return ie_1;
+        }
+        case 'message': {
+            var msg = new Message({
+                locale: locale,
+                enableRtl: enableRtl,
+                severity: component.severity || component.messageType || 'info',
+                variant: component.variant,
+                content: component.content || 'Message',
+                showCloseIcon: component.showCloseIcon,
+                showIcon: ((component.showIcon === undefined ? false : component.showIcon) || false),
+                cssClass: cssClass
+            });
+            if (target) {
+                applyHostId(target, component.name);
+                msg.appendTo(target);
+            }
+            ref(msg);
+            return msg;
+        }
+        case 'dataGrid': {
+            var dg_1 = component;
+            var conditionalDataResult = resolveConditionalData(dg_1.conditions, (formState && formState.values) || {});
+            var conditionalData_1 = conditionalDataResult ? conditionalDataResult.dataSource : undefined;
+            var conditionalColumns = conditionalDataResult ? conditionalDataResult.columns : undefined;
+            var effectiveDataSource = conditionalData_1 || dg_1.dataSource;
+            var fetchedDataSource = [];
+            OptionFetcher.fetch(conditionalData_1 || dg_1.dataSource, dg_1.id, formState && formState.values, components).then(function (res) {
+                if (res.id === dg_1.id && res.options.length > 0) {
+                    var newDataSource = resolveOptions(conditionalData_1 || dg_1.dataSource, res.options, fetchedLookupDataSource_1);
+                    gridComp_1.setDataSource(newDataSource);
+                }
+            });
+            var fetchedLookupDataSource_1 = [];
+            var resolvedDataSource = conditionalData_1
+                ? resolveOptions(conditionalData_1, fetchedDataSource, fetchedLookupDataSource_1)
+                : resolveOptions(dg_1.dataSource, fetchedDataSource, fetchedLookupDataSource_1);
+            var finalDataSource = resolvedDataSource.length > 0 ? resolvedDataSource : (dg_1.dataSource !== undefined && dg_1.dataSource !== null ? dg_1.dataSource : []);
+            var finalColumns = conditionalColumns && conditionalColumns.length > 0 ? conditionalColumns : (dg_1.columns !== undefined && dg_1.columns !== null ? dg_1.columns : []);
+            var gridHost = target || createElement('div', {
+                id: dg_1.name,
+                className: dg_1.cssClass
+            });
+            if (target) {
+                applyHostId(target, component.name);
+            }
+            var gridComp_1 = new DataGridComponent({
+                locale: locale,
+                name: dg_1.name || '',
+                columns: finalColumns,
+                enableRtl: enableRtl,
+                dataSource: (finalDataSource !== undefined && finalDataSource.length > 0) ? finalDataSource : value,
+                height: (dg_1.height != null ? dg_1.height : '200px'),
+                width: (dg_1.width != null ? dg_1.width : '100%'),
+                pageSize: dg_1.pageSize || 6,
+                allowPaging: dg_1.allowPaging !== false,
+                allowFiltering: dg_1.allowFiltering,
+                allowAdding: dg_1.allowAdding !== false,
+                allowEditing: dg_1.allowEditing !== false,
+                allowDeleting: dg_1.allowDeleting !== false,
+                onDataChange: function (data) { return onChange(data); },
+                cssClass: cssClass,
+                target: gridHost,
+                ref: ref
+            });
+            gridComp_1.render(gridHost);
+            if (!initializedGrids.has(component.id) && formState && Array.isArray(finalDataSource)) {
+                formState.values[component.id] = finalDataSource;
+                gridComp_1.isInitialized = true;
+                initializedGrids.add(component.id);
+            }
+            if (typeof options.ref === 'function') {
+                options.ref(gridComp_1);
+            }
+            else if (options.ref) {
+                options.ref.current = gridComp_1;
+            }
+            return target || gridHost;
+        }
+        case 'richTextEditor': {
+            var toolbarSettings = {
+                items: [
+                    'Undo', 'Redo', '|', 'Bold', 'Italic', 'Underline', 'StrikeThrough', 'InlineCode', '|',
+                    'CreateLink', 'Image', 'CreateTable', 'CodeBlock', 'HorizontalLine', 'Blockquote', 'EmojiPicker', '|',
+                    'LineHeight', 'Formats', 'Alignments', '|', 'BulletFormatList', 'NumberFormatList', 'Checklist', '|',
+                    'Outdent', 'Indent', '|', 'FontColor', 'BackgroundColor', 'FontName', 'FontSize', '|',
+                    'LowerCase', 'UpperCase', 'SuperScript', 'SubScript', '|', 'SourceCode', '|'
+                ]
+            };
+            if (component.enableImportFromWord && component.enableImportFromWord.enabled) {
+                toolbarSettings.items.push('ImportWord');
+            }
+            if (component.enableExportToWord && component.enableExportToWord.enabled) {
+                toolbarSettings.items.push('ExportWord');
+            }
+            if (component.enableExportToPdf && component.enableExportToPdf.enabled) {
+                toolbarSettings.items.push('ExportPdf');
+            }
+            toolbarSettings.items.push('Print');
+            var hasValidService = function (config) {
+                return !!config && config.enabled && typeof config.serviceUrl === 'string' && config.serviceUrl.trim() !== '';
+            };
+            var importWord = hasValidService(component.enableImportFromWord)
+                ? {
+                    // eslint-disable-next-line security/detect-unsafe-regex
+                    serviceUrl: /^(https?:)?\/\//i.test(component.enableImportFromWord ? component.enableImportFromWord.serviceUrl : '')
+                        ? (component.enableImportFromWord ? component.enableImportFromWord.serviceUrl : '')
+                        : (settings && settings.hostUrl ? settings.hostUrl : '').replace(/\/+$/, '') + "/" + (component.enableImportFromWord ? component.enableImportFromWord.serviceUrl : '').replace(/^\/+/, '')
+                }
+                : undefined;
+            var exportWord = hasValidService(component.enableExportToWord)
+                ? {
+                    // eslint-disable-next-line security/detect-unsafe-regex
+                    serviceUrl: /^(https?:)?\/\//i.test(component.enableExportToWord ? component.enableExportToWord.serviceUrl : '')
+                        ? (component.enableExportToWord ? component.enableExportToWord.serviceUrl : '')
+                        : (settings && settings.hostUrl ? settings.hostUrl : '').replace(/\/+$/, '') + "/" + (component.enableExportToWord ? component.enableExportToWord.serviceUrl : '').replace(/^\/+/, ''),
+                    fileName: 'RichTextEditor.docx',
+                    stylesheet: "\n                .e-rte-content {\n                  font-size: 1em;\n                  font-weight: 400;\n                  margin: 0;\n                }\n              "
+                }
+                : undefined;
+            var exportPdf = hasValidService(component.enableExportToPdf)
+                ? {
+                    // eslint-disable-next-line security/detect-unsafe-regex
+                    serviceUrl: /^(https?:)?\/\//i.test(component.enableExportToPdf ? component.enableExportToPdf.serviceUrl : '')
+                        ? (component.enableExportToPdf ? component.enableExportToPdf.serviceUrl : '')
+                        : (settings && settings.hostUrl ? settings.hostUrl : '').replace(/\/+$/, '') + "/" + (component.enableExportToPdf ? component.enableExportToPdf.serviceUrl : '').replace(/^\/+/, ''),
+                    fileName: 'RichTextEditor.pdf',
+                    stylesheet: "\n                .e-rte-content {\n                  font-size: 1em;\n                  font-weight: 400;\n                  margin: 0;\n                }\n              "
+                }
+                : undefined;
+            var rte = new RichTextEditor({
+                locale: locale,
+                toolbarSettings: toolbarSettings,
+                enableRtl: enableRtl,
+                value: value !== undefined ? value : (component.defaultValue || ''),
+                placeholder: component.placeholder || '',
+                enabled: !component.disabled,
+                readonly: component.readOnly || false,
+                maxLength: component.maxLength || undefined,
+                cssClass: cssClass || undefined,
+                height: component.height || '300px',
+                width: component.width || '100%',
+                htmlAttributes: htmlAttrs,
+                importWord: importWord,
+                exportPdf: exportPdf,
+                exportWord: exportWord,
+                change: function (args) { return onChange(args.value); }
+            });
+            RichTextEditor.Inject(Toolbar, Link, HtmlEditor, QuickToolbar, RTEImage, Count, Table, EmojiPicker, PasteCleanup, SlashMenu, CodeBlock, ClipBoardCleanup, AutoFormat, ImportExport);
+            rte.appendTo(target);
+            ref(rte);
+            return rte;
+        }
+        default: {
+            var msg = new Message({
+                locale: locale,
+                enableRtl: enableRtl,
+                severity: 'Warning',
+                content: l10n.getConstant('unsupportedComponent') + " : " + component.type,
+                cssClass: cssClass
+            });
+            if (target) {
+                applyHostId(target, component.name);
+                msg.appendTo(target);
+            }
+            ref(msg);
+            return msg;
+        }
+    }
+};