@syncfusion/ej2-form-renderer 34.2.6 → 35.1.37

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

@@ -0,0 +1,7 @@
+/**
+ * Form renderer modules
+ */
+export * from './form-renderer';
+export * from './form-renderer-model';
+export * from './types/form-schema';
+export * from './render-form-field';

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

@@ -0,0 +1,6 @@
+/**
+ * Form renderer modules
+ */
+export * from './form-renderer';
+export * from './types/form-schema';
+export * from './render-form-field';

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

@@ -23,6 +23,7 @@ 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';
+import { forwardExtras } from '../common/index';
 /**
  * @private
  */
@@ -93,6 +94,11 @@ export var renderFormField = function (options) {
             if (target) {
                 tb.appendTo(target);
             }
+            forwardExtras(tb, component, [
+                'name', 'multiline', 'textboxType', 'defaultValue',
+                'showClearButton', 'autocomplete', 'readOnly', 'cssClass',
+                'suffix', 'prefix', 'floatLabelType', 'placeholder', 'disabled'
+            ]);
             ref(tb);
             return tb;
         }
@@ -101,6 +107,11 @@ export var renderFormField = function (options) {
             if (target) {
                 ta.appendTo(target);
             }
+            forwardExtras(ta, component, [
+                'name', 'defaultValue', 'cols', 'textareaRows',
+                'showClearButton', 'readOnly', 'maxLength', 'cssClass',
+                'suffix', 'prefix', 'floatLabelType', 'placeholder', 'disabled'
+            ]);
             ref(ta);
             return ta;
         }
@@ -132,6 +143,11 @@ export var renderFormField = function (options) {
                 target.setAttribute('name', component.id);
                 ntb.appendTo(target);
             }
+            forwardExtras(ntb, component, [
+                'name', 'defaultValue', 'decimals', 'currency', 'numberFormat',
+                'step', 'minValue', 'maxValue', 'readOnly', 'showClearButton',
+                'cssClass', 'suffix', 'prefix', 'floatLabelType', 'placeholder', 'disabled'
+            ]);
             ref(ntb);
             return ntb;
         }
@@ -156,6 +172,10 @@ export var renderFormField = function (options) {
                 applyHostId(target, component.name);
                 cb.appendTo(target);
             }
+            forwardExtras(cb, component, [
+                'name', 'checked', 'indeterminate',
+                'checkboxLabelPosition', 'cssClass'
+            ]);
             ref(cb);
             return cb;
         }
@@ -185,6 +205,11 @@ export var renderFormField = function (options) {
             if (target) {
                 applyHostId(target, component.name);
             }
+            forwardExtras(group_1, component, [
+                'options', 'enableRtl', 'disabled', 'readOnly', 'required',
+                'checkboxLabelPosition', 'layoutDirection', 'gap', 'size',
+                'cssClass', 'htmlAttributes'
+            ]);
             group_1.render(target);
             return group_1;
         }
@@ -194,12 +219,11 @@ export var renderFormField = function (options) {
                 id: component.name + "-group",
                 className: "e-radio-group " + errorClass
             });
-            var rbInstances = [];
+            var rbInstances_1 = [];
             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,
@@ -228,11 +252,16 @@ export var renderFormField = function (options) {
                 if (options.ref && typeof options.ref === 'function') {
                     options.ref(rb, idx);
                 }
+                rbInstances_1.push(rb);
+                forwardExtras(rb, component, [
+                    'name', 'options', 'disabled', 'defaultValue',
+                    'fieldLabelPosition', 'cssClass', 'htmlAttributes'
+                ]);
             });
             if (target) {
                 target.appendChild(wrapper_1);
             }
-            return rbInstances;
+            return rbInstances_1;
         }
         case 'dropdown': {
             // Same Vanilla TS fetch adaptation as checkboxGroup (see above).
@@ -262,6 +291,12 @@ export var renderFormField = function (options) {
             if (target) {
                 ddl_1.appendTo(target);
             }
+            forwardExtras(ddl_1, component, [
+                'name', 'defaultValue', 'showClearButton', 'readOnly',
+                'enableVirtualization', 'popupHeight', 'popupWidth',
+                'cssClass', 'htmlAttributes', 'floatLabelType', 'placeholder',
+                'disabled', 'fields', 'groupBy'
+            ]);
             ref(ddl_1);
             return ddl_1;
         }
@@ -283,6 +318,14 @@ export var renderFormField = function (options) {
             if (target) {
                 ms_1.appendTo(target);
             }
+            forwardExtras(ms_1, component, [
+                'name', 'defaultValue', 'placeholder', 'showClearButton',
+                'readOnly', 'allowCustomValue', 'addTagOnBlur',
+                'delimiterChar', 'showSelectAll', 'visualMode', 'selectAllText',
+                'unSelectAllText', 'showDropDownIcon', 'enableVirtualization',
+                'popupHeight', 'popupWidth', 'cssClass', 'htmlAttributes',
+                'floatLabelType', 'disabled'
+            ]);
             ref(ms_1);
             return ms_1;
         }
@@ -292,6 +335,13 @@ export var renderFormField = function (options) {
             if (target) {
                 dp.appendTo(target);
             }
+            forwardExtras(dp, component, [
+                'name', 'defaultValue', 'format', 'readOnly', 'showClearButton',
+                'showTodayButton', 'calendarMode', 'dayHeaderFormat',
+                'depth', 'start', 'firstDayOfWeek', 'minDate', 'maxDate',
+                'cssClass', 'htmlAttributes', 'floatLabelType', 'placeholder',
+                'disabled'
+            ]);
             ref(dp);
             return dp;
         }
@@ -301,6 +351,13 @@ export var renderFormField = function (options) {
             if (target) {
                 dtp.appendTo(target);
             }
+            forwardExtras(dtp, component, [
+                'name', 'defaultValue', 'format', 'showClearButton',
+                'showTodayButton', 'dayHeaderFormat', 'depth', 'start', 'step',
+                'minDate', 'maxDate', 'minTime', 'maxTime', 'readOnly',
+                'cssClass', 'htmlAttributes', 'floatLabelType', 'placeholder',
+                'disabled'
+            ]);
             ref(dtp);
             return dtp;
         }
@@ -309,6 +366,12 @@ export var renderFormField = function (options) {
             if (target) {
                 tp.appendTo(target);
             }
+            forwardExtras(tp, component, [
+                'name', 'defaultValue', 'format', 'showClearButton',
+                'step', 'minTime', 'maxTime', 'readOnly',
+                'cssClass', 'htmlAttributes', 'floatLabelType', 'placeholder',
+                'disabled'
+            ]);
             ref(tp);
             return tp;
         }
@@ -317,6 +380,13 @@ export var renderFormField = function (options) {
             if (target) {
                 drp.appendTo(target);
             }
+            forwardExtras(drp, component, [
+                'name', 'defaultValue', 'format', 'separator',
+                'showClearButton', 'minDate', 'maxDate', 'readOnly',
+                'dayHeaderFormat', 'depth', 'start',
+                'cssClass', 'htmlAttributes', 'floatLabelType', 'placeholder',
+                'disabled'
+            ]);
             ref(drp);
             return drp;
         }
@@ -338,6 +408,10 @@ export var renderFormField = function (options) {
                 applyHostId(target, component.name);
                 sw.appendTo(target);
             }
+            forwardExtras(sw, component, [
+                'name', 'defaultValue', 'checked', 'onLabel', 'offLabel',
+                'cssClass', 'htmlAttributes'
+            ]);
             ref(sw);
             return sw;
         }
@@ -350,7 +424,8 @@ export var renderFormField = function (options) {
                     alignItems: 'center',
                     gap: component.gap || '8px',
                     justifyContent: mapPositionToJustifyContent(component.position),
-                    width: component.width || undefined
+                    width: component.width || undefined,
+                    maxWidth: '100%'
                 };
                 var groupContainer_1 = createElement('div', {
                     id: component.name,
@@ -396,6 +471,11 @@ export var renderFormField = function (options) {
                 if (target) {
                     target.appendChild(groupContainer_1);
                 }
+                for (var bi = 0; bi < btnInstances_1.length; bi++) {
+                    forwardExtras(btnInstances_1[bi], component, [
+                        'buttonsGroups', 'gap', 'position', 'size', 'cssClass'
+                    ]);
+                }
                 return btnInstances_1;
             }
             // Fallback: single ButtonComponent when no group is configured.
@@ -440,6 +520,10 @@ export var renderFormField = function (options) {
             if (target) {
                 target.appendChild(container);
             }
+            forwardExtras(btnInst, component, [
+                'buttonType', 'style', 'iconCss', 'iconPosition',
+                'cssClass', 'position', 'size', 'disabled'
+            ]);
             return btnInst;
         }
         case 'splitButton': {
@@ -450,7 +534,8 @@ export var renderFormField = function (options) {
                 component.style === 'error' ? 'e-danger' : '',
                 component.style === 'success' ? 'e-success' : '',
                 component.style === 'warning' ? 'e-warning' : '',
-                component.cssClass || ''
+                component.cssClass || '',
+                component.size === 'Small' ? ' e-small' : component.size === 'Bigger' ? ' e-bigger' : ''
             ].filter(Boolean).join(' ') || undefined;
             var splitButtonContainerStyle = {
                 display: 'flex',
@@ -495,12 +580,17 @@ export var renderFormField = function (options) {
             if (target) {
                 target.appendChild(container);
             }
+            forwardExtras(sb, component, [
+                'options', 'style', 'iconCss', 'iconPosition',
+                'cssClass', 'position', 'disabled'
+            ]);
             ref(sb);
             return sb;
         }
         case 'signature': {
             var canvas = createElement('canvas', {
-                id: component.name
+                id: component.name,
+                className: cssClass
             });
             var sig = new Signature({
                 enableRtl: enableRtl,
@@ -517,6 +607,9 @@ export var renderFormField = function (options) {
                 sig.appendTo(canvas);
                 target.appendChild(canvas);
             }
+            forwardExtras(sig, component, [
+                'backgroundColor', 'strokeColor', 'maxValue', 'minValue', 'velocity'
+            ]);
             ref(sig);
             return sig;
         }
@@ -542,6 +635,11 @@ export var renderFormField = function (options) {
                 target.setAttribute('name', component.id);
                 rt.appendTo(target);
             }
+            forwardExtras(rt, component, [
+                'defaultValue', 'allowReset', 'itemsCount', 'minValue',
+                'precision', 'readOnly', 'showRatingTooltip',
+                'showRatingLabel', 'ratingLabelPosition', 'cssClass', 'labelPosition'
+            ]);
             ref(rt);
             return rt;
         }
@@ -562,6 +660,10 @@ export var renderFormField = function (options) {
                 applyHostId(target, component.name);
                 cp.appendTo(target);
             }
+            forwardExtras(cp, component, [
+                'defaultValue', 'enableOpacity', 'showButtons',
+                'showRecentColors', 'showNoColor', 'cssClass'
+            ]);
             ref(cp);
             return cp;
         }
@@ -570,6 +672,12 @@ export var renderFormField = function (options) {
             if (target) {
                 im.appendTo(target);
             }
+            forwardExtras(im, component, [
+                'name', 'defaultValue', 'mask', 'promptChar',
+                'customCharacters', 'readOnly', 'showClearButton',
+                'cssClass', 'htmlAttributes', 'suffix', 'prefix',
+                'floatLabelType', 'placeholder', 'disabled'
+            ]);
             ref(im);
             return im;
         }
@@ -591,6 +699,10 @@ export var renderFormField = function (options) {
                 applyHostId(target, component.name);
                 sl.appendTo(target);
             }
+            forwardExtras(sl, component, [
+                'defaultValue', 'minValue', 'maxValue', 'step',
+                'cssClass', 'readOnly', 'showButtons'
+            ]);
             ref(sl);
             return sl;
         }
@@ -619,32 +731,35 @@ export var renderFormField = function (options) {
                 applyHostId(target, component.name);
                 up.appendTo(target);
             }
+            forwardExtras(up, component, [
+                'allowExtensions', 'saveUrl', 'removeUrl',
+                'buttons', 'maxValue', 'minValue',
+                'allowMultiple', 'showFileList',
+                'htmlAttributes', 'cssClass'
+            ]);
             ref(up);
             return up;
         }
         case 'imageEditor': {
-            var ieHost = createElement('div', {
-                id: component.name,
-                attrs: { 'data-field': component.id }
+            var ie = 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); }
             });
-            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);
+                applyHostId(target, component.name);
+                ie.appendTo(target);
             }
-            ref(ie_1);
-            return ie_1;
+            forwardExtras(ie, component, [
+                'height', 'width', 'cssClass'
+            ]);
+            ref(ie);
+            return ie;
         }
         case 'message': {
             var msg = new Message({
@@ -661,6 +776,10 @@ export var renderFormField = function (options) {
                 applyHostId(target, component.name);
                 msg.appendTo(target);
             }
+            forwardExtras(msg, component, [
+                'severity', 'messageType', 'variant', 'content',
+                'showCloseIcon', 'showIcon', 'cssClass'
+            ]);
             ref(msg);
             return msg;
         }
@@ -715,6 +834,11 @@ export var renderFormField = function (options) {
                 gridComp_1.isInitialized = true;
                 initializedGrids.add(component.id);
             }
+            forwardExtras(gridComp_1, component, [
+                'dataSource', 'columns', 'conditions', 'height', 'width',
+                'pageSize', 'allowPaging', 'allowFiltering', 'allowAdding',
+                'allowEditing', 'allowDeleting', 'cssClass'
+            ]);
             if (typeof options.ref === 'function') {
                 options.ref(gridComp_1);
             }
@@ -794,6 +918,11 @@ export var renderFormField = function (options) {
             });
             RichTextEditor.Inject(Toolbar, Link, HtmlEditor, QuickToolbar, RTEImage, Count, Table, EmojiPicker, PasteCleanup, SlashMenu, CodeBlock, ClipBoardCleanup, AutoFormat, ImportExport);
             rte.appendTo(target);
+            forwardExtras(rte, component, [
+                'enableImportFromWord', 'enableExportToWord', 'enableExportToPdf',
+                'defaultValue', 'placeholder', 'readOnly', 'maxLength', 'cssClass',
+                'height', 'width', 'htmlAttributes', 'toolbarSettings'
+            ]);
             ref(rte);
             return rte;
         }

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

@@ -1,6 +1,5 @@
 /**
- * Form renderer modules
+ * Form Renderer all modules.
  */
-export * from './form-renderer';
-export * from './form-renderer-model';
-export * from './types/form-schema';
+export * from './form-renderer/index';
+export * from './common/index';

package/src/form-renderer/index.js

@@ -1,5 +1,5 @@
 /**
- * Form renderer modules
+ * Form Renderer all modules.
  */
-export * from './form-renderer';
-export * from './types/form-schema';
+export * from './form-renderer/index';
+export * from './common/index';

package/src/index.d.ts

@@ -1,4 +1 @@
-/**
- * Form Renderer all modules.
- */
-export * from './form-renderer/index';
+export * from './form-renderer';

package/src/index.js

@@ -1,4 +1 @@
-/**
- * Form Renderer all modules.
- */
-export * from './form-renderer/index';
+export * from './form-renderer';

package/common.d.ts

@@ -1,4 +0,0 @@
-/**
- * common
- */
-export * from './src/common/index';

package/common.js

@@ -1,4 +0,0 @@
-/**
- * common
- */
-export * from './src/common/index';

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

@@ -1,65 +0,0 @@
-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>;
-
-}