@syncfusion/ej2-react-form-renderer 0.1.0-beta → 0.1.1-beta

package/src/renderFormField.js

@@ -33,14 +33,14 @@ const normalizeAttributes = (attributes) => {
 /**
  * Renders a single form field component
  */
-export const renderFormField = ({ component, value, onChange, onBlur, ref, hasError = false, onClick }) => {
+export const renderFormField = ({ component, value, onChange, onBlur, ref, hasError = false, onClick, locale }) => {
     const commonProps = {
         floatLabelType: (component.floatLabelType || 'Never'),
         placeholder: component.placeholder || '',
         enabled: !component.disabled,
     };
     const createValidationHandlers = (getValue) => {
-        const validateOn = component.validateOn || 'Blur';
+        const validateOn = component.validateOn || 'Change';
         const handlers = {};
         // If validateOn is 'Change' or undefined, add change and blur handlers
         if (!validateOn || validateOn === 'Change') {
@@ -56,45 +56,45 @@ export const renderFormField = ({ component, value, onChange, onBlur, ref, hasEr
     };
     const htmlAttrs = normalizeAttributes(component.htmlAttributes);
     const errorClass = hasError ? 'e-error' : '';
-    const cssClass = `${component.cssClass || ''} ${errorClass}`.trim();
+    const cssClass = `${component.cssClass || ''} ${errorClass} ${component.size === 'Small' ? ' e-small' : component.size === 'Bigger' ? ' e-bigger' : ''}`.trim();
     switch (component.type) {
         case 'textbox':
-            return (_jsx(TextBoxComponent, { id: component.id, type: component.multiline ? 'hidden' : component.textboxType ? component.textboxType : 'text', name: component.id, ...commonProps, value: value !== undefined ? value : (component.defaultValue || ''), multiline: component.multiline, showClearButton: component.showClearButton, autocomplete: component.autocomplete === false ? 'off' : 'on', readonly: component.readOnly || false, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
+            return (_jsx(TextBoxComponent, { id: component.id, type: component.multiline ? 'hidden' : component.textboxType ? component.textboxType : 'text', name: component.id, locale: locale, ...commonProps, value: value !== undefined ? value : (component.defaultValue || ''), multiline: component.multiline, showClearButton: component.showClearButton, autocomplete: component.autocomplete === false ? 'off' : 'on', readonly: component.readOnly || false, cssClass: cssClass, htmlAttributes: htmlAttrs, appendTemplate: component.suffix, prependTemplate: component.prefix, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
         case 'textarea':
-            return (_jsx(TextAreaComponent, { id: component.id, name: component.id, ...commonProps, 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, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
+            return (_jsx(TextAreaComponent, { id: component.id, name: component.id, locale: locale, ...commonProps, 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((args) => args.value || ''), ref: ref }, component.id));
         case 'number':
-            return (_jsx(NumericTextBoxComponent, { id: component.id, name: component.id, ...commonProps, value: value !== undefined ? value : (component.defaultValue || 0), decimals: component.decimals || 2, currency: component.currency, format: component.format || '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, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
+            return (_jsx(NumericTextBoxComponent, { id: component.id, name: component.id, locale: locale, ...commonProps, value: value !== undefined ? value : (component.defaultValue || 0), 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, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
         case 'checkbox':
             const checkboxLabel = component.label && component.required
                 ? `${component.label} *`
                 : component.label;
-            return (_jsx(CheckBoxComponent, { id: component.id, name: component.id, label: checkboxLabel, labelPosition: component.checkboxLabelPosition, checked: component.defaultValue ?? (component.checked ?? false), indeterminate: component.indeterminate || false, disabled: component.disabled, cssClass: cssClass, htmlAttributes: htmlAttrs, change: (args) => onChange(args.checked), ref: ref }, component.id));
-        case 'checkboxgroup':
+            return (_jsx(CheckBoxComponent, { id: component.id, locale: locale, name: component.id, label: checkboxLabel, labelPosition: component.checkboxLabelPosition, checked: component.defaultValue ?? (component.checked ?? false), indeterminate: component.indeterminate || false, disabled: component.disabled, cssClass: cssClass, htmlAttributes: htmlAttrs, change: (args) => onChange(args.checked), ref: ref }, component.id));
+        case 'checkboxGroup':
             return (_jsx(CheckboxGroup, { component: component, value: value, onChange: (v) => onChange(v), optionRef: ref }, component.id));
         case 'radio':
             return (_jsx("div", { id: `${component.id}-group`, className: `e-radio-group ${errorClass}`, children: (component.options || ['Option 1']).map((option, idx) => {
                     const optionValue = option;
                     const optionText = option;
-                    return (_jsx("div", { style: { marginBottom: '8px' }, children: _jsx(RadioButtonComponent, { id: `${component.id}_${idx}_${optionValue}`, name: component.id, label: optionText, disabled: component.disabled, value: optionValue, htmlAttributes: htmlAttrs, labelPosition: component.fieldLabelPosition, checked: component.defaultValue === optionValue, cssClass: component.cssClass, change: (args) => {
+                    return (_jsx("div", { style: { marginBottom: '8px' }, children: _jsx(RadioButtonComponent, { id: `${component.id}_${idx}_${optionValue}`, name: component.id, label: optionText, locale: locale, disabled: component.disabled, value: optionValue, htmlAttributes: htmlAttrs, labelPosition: component.fieldLabelPosition, checked: component.defaultValue === optionValue, cssClass: cssClass, change: (args) => {
                                 if (args.value === optionValue) {
                                     onChange(optionValue);
                                 }
                             }, ref: ref ? (el) => ref(el, idx) : undefined }, component.id) }, idx));
                 }) }));
         case 'dropdown':
-            return (_jsx(DropDownListComponent, { id: component.id, name: component.id, ...commonProps, cssClass: cssClass, dataSource: component.options || ["Option 1"], value: value !== undefined ? value : (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((args) => args.value || ''), ref: ref }, component.id));
+            return (_jsx(DropDownListComponent, { id: component.id, name: component.id, ...commonProps, locale: locale, cssClass: cssClass, dataSource: component.options || ["Option 1"], value: value !== undefined ? value : (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((args) => args.value || ''), ref: ref }, component.id));
         case 'multiselect':
-            return (_jsx(MultiSelectComponent, { id: component.id, name: component.id, ...commonProps, value: value !== undefined ? value : (component.defaultValue ?? null), placeholder: component.placeholder, dataSource: component.options || ["Option 1"], 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' : 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((args) => args.value || ''), ref: ref, children: _jsx(Inject, { services: [CheckBoxSelection] }) }, component.id));
-        case 'datepicker':
-            return (_jsx(DatePickerComponent, { ...commonProps, id: component.id, name: component.id, value: value !== undefined ? value : (component.defaultValue ?? null), floatLabelType: component.floatLabelType || 'Never', format: component.format || 'MM/dd/yyyy', placeholder: component.placeholder || '', readOnly: component.readOnly || false, showClearButton: component.showClearButton !== false ? true : false, 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((args) => args.value || ''), ref: ref, children: _jsx(Inject, { services: [Islamic] }) }, component.id));
-        case 'datetimepicker':
-            return (_jsx(DateTimePickerComponent, { ...commonProps, id: component.id, name: component.id, floatLabelType: component.floatLabelType || 'Never', dayHeaderFormat: component.dayHeaderFormat || 'Short', value: value !== undefined ? value : (component.defaultValue ?? null), format: component.format || 'MM/dd/yyyy hh:mm a', showClearButton: component.showClearButton !== false, showTodayButton: component.showTodayButton || 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((args) => args.value || ''), ref: ref, children: _jsx(Inject, { services: [Islamic] }) }, component.id));
-        case 'timepicker':
-            return (_jsx(TimePickerComponent, { id: component.id, name: component.id, floatLabelType: component.floatLabelType || 'Never', placeholder: component.placeholder || '', enabled: !component.disabled, value: value !== undefined ? value : (component.defaultValue ?? null), format: component.format || 'hh:mm a', showClearButton: component.showClearButton !== false, 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((args) => args.value || ''), ref: ref }, component.id));
-        case 'daterange':
-            return (_jsx(DateRangePickerComponent, { id: component.id, name: component.id, floatLabelType: component.floatLabelType || 'Never', dayHeaderFormat: component.dayHeaderFormat || 'Short', placeholder: component.placeholder || '', enabled: !component.disabled, value: value !== undefined ? value : (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 !== false, readonly: component.readOnly || false, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
+            return (_jsx(MultiSelectComponent, { id: component.id, name: component.id, locale: locale, ...commonProps, value: value !== undefined ? value : (component.defaultValue ?? null), placeholder: component.placeholder, dataSource: component.options || ["Option 1"], 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' : 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((args) => args.value || ''), ref: ref, children: _jsx(Inject, { services: [CheckBoxSelection] }) }, component.id));
+        case 'date':
+            return (_jsx(DatePickerComponent, { ...commonProps, id: component.id, name: component.id, locale: locale, value: value !== undefined ? value : (component.defaultValue ?? null), floatLabelType: component.floatLabelType || 'Never', format: component.format || 'MM/dd/yyyy', placeholder: component.placeholder || '', readOnly: component.readOnly || false, showClearButton: component.showClearButton !== false ? true : false, 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((args) => args.value || ''), ref: ref, children: _jsx(Inject, { services: [Islamic] }) }, component.id));
+        case 'dateTime':
+            return (_jsx(DateTimePickerComponent, { ...commonProps, id: component.id, locale: locale, name: component.id, floatLabelType: component.floatLabelType || 'Never', dayHeaderFormat: component.dayHeaderFormat || 'Short', value: value !== undefined ? value : (component.defaultValue ?? null), format: component.format || 'MM/dd/yyyy hh:mm a', showClearButton: component.showClearButton !== false, 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((args) => args.value || ''), ref: ref, children: _jsx(Inject, { services: [Islamic] }) }, component.id));
+        case 'time':
+            return (_jsx(TimePickerComponent, { id: component.id, locale: locale, name: component.id, floatLabelType: component.floatLabelType || 'Never', placeholder: component.placeholder || '', enabled: !component.disabled, value: value !== undefined ? value : (component.defaultValue ?? null), format: component.format || 'hh:mm a', showClearButton: component.showClearButton !== false, 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((args) => args.value || ''), ref: ref }, component.id));
+        case 'dateRange':
+            return (_jsx(DateRangePickerComponent, { id: component.id, locale: locale, name: component.id, floatLabelType: component.floatLabelType || 'Never', dayHeaderFormat: component.dayHeaderFormat || 'Short', placeholder: component.placeholder || '', enabled: !component.disabled, value: value !== undefined ? value : (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 !== false, readonly: component.readOnly || false, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
         case 'switch':
-            return (_jsx(SwitchComponent, { id: component.id, value: component.defaultValue, name: component.id, checked: component.checked, disabled: component.disabled, onLabel: component.onLabel || '', offLabel: component.offLabel || '', cssClass: cssClass, htmlAttributes: htmlAttrs, change: (args) => onChange(args.checked), ref: ref }, component.id));
+            return (_jsx(SwitchComponent, { id: component.id, locale: locale, value: component.defaultValue, name: component.id, checked: component.defaultValue ?? (component.checked ?? false), disabled: component.disabled, onLabel: component.onLabel || '', offLabel: component.offLabel || '', cssClass: cssClass, htmlAttributes: htmlAttrs, change: (args) => onChange(args.checked), ref: ref }, component.id));
         case 'button':
             // If buttonsGroups is provided, render a button group in-place of a single button
             const groupButtons = (component.buttonsGroups || component.buttons || []);
@@ -107,12 +107,12 @@ export const renderFormField = ({ component, value, onChange, onBlur, ref, hasEr
                     justifyContent: mapPositionToJustifyContent(component.position),
                     width: component.width || undefined,
                 };
-                return (_jsx("div", { id: component.id, role: "group", "aria-label": component.label || 'Button Group', className: component.cssClass, style: groupStyleObj, children: groupButtons.map((btn, idx) => {
+                return (_jsx("div", { id: component.id, role: "group", "aria-label": component.label || 'Button Group', className: cssClass, style: groupStyleObj, children: groupButtons.map((btn, idx) => {
                         const btnId = `${component.id}_${idx}`;
                         const btnCssClass = [
                             mapButtonStyleToClass(btn.style)
                         ].filter(Boolean).join(' ');
-                        return (_jsx(ButtonComponent, { id: String(btnId), name: String(btnId), type: resolveButtonType(btn.type), cssClass: btnCssClass, disabled: btn.disabled || false, content: btn.label || `Button ${idx + 1}`, iconCss: btn.iconCss, iconPosition: btn.iconPosition, onClick: (event) => {
+                        return (_jsx(ButtonComponent, { id: String(btnId), name: String(btnId), locale: locale, type: resolveButtonType(btn.type), cssClass: btnCssClass, disabled: btn.disabled || false, content: btn.label || `Button ${idx + 1}`, iconCss: btn.iconCss, iconPosition: btn.iconPosition, onClick: (event) => {
                                 if (onClick) {
                                     onClick(event);
                                 }
@@ -129,19 +129,20 @@ export const renderFormField = ({ component, value, onChange, onBlur, ref, hasEr
                 mapButtonStyleToClass(component.style),
                 resolvedButtonType === 'submit' ? 'submit-btn form-submit-type' : '',
                 resolvedButtonType === 'reset' ? 'form-reset-type' : '',
-                component.cssClass || 'e-primary'
+                component.cssClass || 'e-primary',
+                component.size === 'Small' ? ' e-small' : component.size === 'Bigger' ? ' e-bigger' : ''
             ].filter(Boolean).join(' ') || 'e-primary';
             const buttonContainerStyle = {
                 display: 'flex',
                 justifyContent: mapPositionToJustifyContent(component.position),
                 width: component.width || '100%',
             };
-            return (_jsx("div", { id: `${component.id}-container`, style: buttonContainerStyle, children: _jsx(ButtonComponent, { id: component.id, type: resolvedButtonType, cssClass: buttonCssClassList, disabled: component.disabled, iconCss: component.iconCss, iconPosition: component.iconPosition, onClick: (event) => {
+            return (_jsx("div", { id: `${component.id}-container`, style: buttonContainerStyle, children: _jsx(ButtonComponent, { id: component.id, type: resolvedButtonType, locale: locale, cssClass: buttonCssClassList, disabled: component.disabled, iconCss: component.iconCss, iconPosition: component.iconPosition, onClick: (event) => {
                         if (onClick) {
                             onClick(event);
                         }
                     }, ref: ref, children: component.label }, component.id) }, `form-${component.type}-${component.id}`));
-        case 'splitbutton':
+        case 'splitButton':
             const splitButtonCssClassList = [
                 component.style === 'primary' ? 'e-primary' : '',
                 component.style === 'flat' ? '' : '',
@@ -155,7 +156,7 @@ export const renderFormField = ({ component, value, onChange, onBlur, ref, hasEr
                 display: 'flex',
                 justifyContent: mapPositionToJustifyContent(component.position)
             };
-            return (_jsx("div", { id: `${component.id}-container`, "aria-label": 'Splitbutton', style: splitButtonContainerStyle, children: _jsx(SplitButtonComponent, { id: component.id, content: component.label || 'Split Button', items: component.options?.map((option, index) => ({
+            return (_jsx("div", { id: `${component.id}-container`, "aria-label": 'Splitbutton', style: splitButtonContainerStyle, children: _jsx(SplitButtonComponent, { id: component.id, locale: locale, content: component.label || 'Split Button', items: component.options?.map((option, index) => ({
                         text: option,
                         id: `${component.id}_option_${index}`
                     })) || [{ text: 'Option 1', id: `${component.id}_option_0` }], cssClass: splitButtonCssClassList, disabled: component.disabled, iconCss: component.iconCss, iconPosition: component.iconPosition || 'Left', onClick: (event) => {
@@ -168,34 +169,34 @@ export const renderFormField = ({ component, value, onChange, onBlur, ref, hasEr
                         }
                     }, ref: ref }, component.id) }, `form-${component.type}-${component.id}`));
         case 'signature':
-            return (_jsx(SignatureComponent, { id: component.id, backgroundColor: component.backgroundColor || '', strokeColor: component.strokeColor || '', maxStrokeWidth: component.maxValue, minStrokeWidth: component.minValue, velocity: component.velocity, disabled: component.disabled, change: (args) => onChange(args.value), ref: ref }, component.id));
+            return (_jsx(SignatureComponent, { id: component.id, className: cssClass, locale: locale, backgroundColor: component.backgroundColor || '', strokeColor: component.strokeColor || '', maxStrokeWidth: component.maxValue, minStrokeWidth: component.minValue, velocity: component.velocity, disabled: component.disabled, change: (args) => onChange(args.value), ref: ref }, component.id));
         case 'rating':
-            return (_jsx(RatingComponent, { id: component.id, name: component.id, value: value !== undefined ? value : (component.defaultValue || 0), disabled: component.disabled, cssClass: component.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: (args) => onChange(args.value), ref: ref }, component.id));
-        case 'colorpicker':
-            return (_jsx(ColorPickerComponent, { id: component.id, value: value !== undefined ? value : (component.defaultValue || ''), disabled: component.disabled, enableOpacity: component.enableOpacity, showButtons: component.showButtons, showRecentColors: component.showRecentColors, noColor: component.showNoColor, cssClass: cssClass, change: (args) => onChange(args.value), ref: ref }, component.id));
-        case 'inputmask':
-            return (_jsx(MaskedTextBoxComponent, { id: component.id, name: component.id, ...commonProps, value: value !== undefined ? value : (component.defaultValue || ''), floatLabelType: component.floatLabelType || 'Never', placeholder: component.placeholder || '', enabled: !component.disabled, mask: component.mask || '000-000-0000', promptChar: component.promptChar || '_', customCharacters: component.customCharacters, readOnly: component.readOnly || false, showClearButton: component.showClearButton !== false, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
-        case 'rangeslider':
-            return (_jsx(SliderComponent, { id: component.id, value: value !== undefined ? value : (component.defaultValue ?? 0), min: component.minValue || 0, max: component.maxValue || 100, step: component.step || 1, disabled: component.disabled, cssClass: cssClass, enabled: !component.disabled, showButtons: component.showButtons, change: (args) => onChange(args.value), ref: ref }, component.id));
-        case 'fileupload':
-            return (_jsx(UploaderComponent, { id: component.id, name: component.id, type: 'file', enabled: !component.disabled, allowedExtensions: component.allowExtensions, asyncSettings: { saveUrl: component.saveUrl, removeUrl: component.removeUrl }, buttons: component.buttons || {
+            return (_jsx(RatingComponent, { id: component.id, name: component.id, 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: (args) => onChange(args.value), ref: ref }, component.id));
+        case 'colorPicker':
+            return (_jsx(ColorPickerComponent, { id: component.id, 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: (args) => onChange(args.value), ref: ref }, component.id));
+        case 'inputMask':
+            return (_jsx(MaskedTextBoxComponent, { id: component.id, name: component.id, ...commonProps, locale: locale, value: value !== undefined ? value : (component.defaultValue || ''), floatLabelType: component.floatLabelType || 'Never', placeholder: component.placeholder || '', enabled: !component.disabled, 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((args) => args.value || ''), ref: ref }, component.id));
+        case 'rangeSlider':
+            return (_jsx(SliderComponent, { id: component.id, locale: locale, value: value !== undefined ? value : (component.defaultValue ?? 0), min: component.minValue || 0, max: component.maxValue || 100, step: component.step || 1, disabled: component.disabled, cssClass: cssClass, enabled: !component.disabled, showButtons: component.showButtons, change: (args) => onChange(args.value), ref: ref }, component.id));
+        case 'fileUpload':
+            return (_jsx(UploaderComponent, { id: component.id, name: component.id, 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: (args) => onChange(args.filesData), ref: ref }, component.id));
-        case 'imageeditor':
-            return (_jsx(ImageEditorComponent, { id: component.id, disabled: component.disabled, cssClass: component.cssClass, height: (component.height || '350px').toString(), width: (component.width || '100%').toString(), ref: ref }, component.id));
+        case 'imageEditor':
+            return (_jsx(ImageEditorComponent, { id: component.id, locale: locale, disabled: component.disabled, cssClass: cssClass, height: (component.height || '350px').toString(), width: (component.width || '100%').toString(), ref: ref }, component.id));
         case 'message':
-            return (_jsx(MessageComponent, { id: component.id, severity: component.severity || component.messageType || 'info', variant: component.variant, content: component.content || 'Message', showCloseIcon: component.showCloseIcon || false, showIcon: component.showIcon || false, disabled: component.disabled, cssClass: component.cssClass, ref: ref }, component.id));
-        case 'datagrid':
+            return (_jsx(MessageComponent, { id: component.id, locale: locale, severity: component.severity || component.messageType || 'info', variant: component.variant, content: component.content || 'Message', showCloseIcon: component.showCloseIcon, showIcon: (component.showIcon === undefined ? false : component.showIcon) || false, disabled: component.disabled, cssClass: cssClass, ref: ref }, component.id));
+        case 'dataGrid':
             const dg = component;
-            return (_jsx("div", { id: dg.id, className: dg.cssClass, children: _jsx(DataGridComponent, { id: dg.id, type: 'datagrid', label: dg.label || '', columns: dg.columns || [], dataSource: value !== undefined ? value : (dg.dataSource ?? dg.dataSource ?? []), height: dg.height || '200px', width: dg.width || '100%', pageSize: dg.pageSize || 6, allowPaging: dg.allowPaging !== false, allowAdding: dg.allowAdding !== false, allowEditing: dg.allowEditing !== false, allowDeleting: dg.allowDeleting !== false, onDataChange: (data) => onChange(data), ref: ref }) }, dg.id));
-        case 'richtexteditor':
+            return (_jsx("div", { id: dg.id, className: dg.cssClass, children: _jsx(DataGridComponent, { id: dg.id, type: 'dataGrid', locale: locale, label: dg.label || '', name: dg.name || '', columns: dg.columns || [], dataSource: value !== undefined ? value : (dg.dataSource ?? dg.dataSource ?? []), height: dg.height || '200px', width: dg.width || '100%', pageSize: dg.pageSize || 6, allowPaging: dg.allowPaging !== false, allowAdding: dg.allowAdding !== false, allowEditing: dg.allowEditing !== false, allowDeleting: dg.allowDeleting !== false, onDataChange: (data) => onChange(data), cssClass: cssClass, ref: ref }) }, dg.id));
+        case 'richTextEditor':
             const toolbarSettings = {
                 items: ['Undo', 'Redo', '|', 'Bold', 'Italic', 'Underline', 'StrikeThrough', 'InlineCode', '|', 'CreateLink', 'Blockquote', '|', 'BulletFormatList', 'NumberFormatList', '|', 'Formats', 'Alignments', '|', 'Outdent', 'Indent', '|',
                     'FontColor', 'BackgroundColor', 'FontName', 'FontSize', '|', 'LowerCase', 'UpperCase', '|', 'SourceCode']
             };
-            return (_jsx(RichTextEditorComponent, { id: component.id, name: component.id, toolbarSettings: toolbarSettings, value: value !== undefined ? value : (component.defaultValue || ''), placeholder: component.placeholder || '', enabled: !component.disabled, readonly: component.readOnly || false, maxLength: component.maxLength || 1000, cssClass: cssClass || undefined, height: component.height || '300px', width: component.width || '100%', htmlAttributes: htmlAttrs, ref: ref, children: _jsx(RTEInject, { services: [Toolbar, Link, HtmlEditor, QuickToolbar] }) }, `${component.id}`));
+            return (_jsx(RichTextEditorComponent, { id: component.id, locale: locale, name: component.id, toolbarSettings: toolbarSettings, value: value !== undefined ? value : (component.defaultValue || ''), placeholder: component.placeholder || '', enabled: !component.disabled, readonly: component.readOnly || false, maxLength: component.maxLength || 1000, cssClass: cssClass || undefined, height: component.height || '300px', width: component.width || '100%', htmlAttributes: htmlAttrs, ref: ref, children: _jsx(RTEInject, { services: [Toolbar, Link, HtmlEditor, QuickToolbar] }) }, `${component.id}`));
         default:
             return (_jsxs("div", { className: "unsupported-component", children: ["Unsupported component type: ", component.type] }));
     }

package/src/types/FormSchema.d.ts

@@ -8,6 +8,28 @@ export interface ButtonClickEventArgs {
     buttonLabel: string;
     event: React.MouseEvent<HTMLButtonElement>;
 }
+export type ConditionalOperator = 'equal' | 'notEqual' | 'greaterThan' | 'lessThan' | 'greaterThanOrEqual' | 'lessThanOrEqual' | 'in' | 'notIn' | 'contains' | 'notContains';
+export interface ConditionalRule {
+    field: string;
+    operator: ConditionalOperator;
+    value: any;
+}
+export interface CompositeConditionalRule {
+    condition: 'and' | 'or';
+    rules: (ConditionalRule | CompositeConditionalRule)[];
+}
+export type ConditionType = ConditionalRule | CompositeConditionalRule;
+export interface FormComponentConditions {
+    visibleWhen?: ConditionType;
+    hideWhen?: ConditionType;
+    readOnlyWhen?: ConditionType;
+    disabledWhen?: ConditionType;
+    requiredWhen?: ConditionType;
+    setValueWhen?: {
+        condition: ConditionType;
+        value: any;
+    };
+}
 export interface FormSchema {
     version: string;
     theme: string;
@@ -15,10 +37,13 @@ export interface FormSchema {
 }
 export interface FormComponent {
     id: string;
-    type: 'textbox' | 'textarea' | 'number' | 'email' | 'url' | 'phone' | 'password' | 'checkbox' | 'checkboxgroup' | 'radio' | 'dropdown' | 'multiselect' | 'button' | 'datepicker' | 'datetimepicker' | 'timepicker' | 'daterange' | 'switch' | 'signature' | 'rating' | 'imageeditor' | 'fileupload' | 'rangeslider' | 'colorpicker' | 'inputmask' | 'message' | 'panel' | 'table' | 'tabs' | 'datagrid' | 'card' | 'splitbutton' | 'richtexteditor' | 'statichtml';
+    type: 'textbox' | 'textarea' | 'number' | 'email' | 'url' | 'phone' | 'password' | 'checkbox' | 'checkboxGroup' | 'radio' | 'dropdown' | 'multiselect' | 'button' | 'date' | 'dateTime' | 'time' | 'dateRange' | 'switch' | 'signature' | 'rating' | 'imageEditor' | 'fileUpload' | 'rangeSlider' | 'colorPicker' | 'inputMask' | 'message' | 'panel' | 'table' | 'tabs' | 'dataGrid' | 'card' | 'splitButton' | 'richTextEditor' | 'staticHtml';
     textboxType?: string;
     label: string;
     name: string;
+    description?: string | undefined;
+    prefix?: string | undefined;
+    suffix?: string | undefined;
     placeholder?: string;
     defaultValue?: any;
     disabled?: boolean;
@@ -59,6 +84,7 @@ export interface FormComponent {
     decimals?: number;
     currency?: string;
     format?: string;
+    numberFormat?: string;
     allowReset?: boolean;
     itemsCount?: number;
     precision?: number | string;
@@ -108,6 +134,7 @@ export interface FormComponent {
     showDropDownIcon?: boolean;
     validateOn?: 'Change' | 'Blur';
     pageSize?: number;
+    size?: string;
     allowPaging?: boolean;
     allowAdding?: boolean;
     allowEditing?: boolean;
@@ -153,6 +180,7 @@ export interface FormComponent {
     tableCells?: FormComponent[][][];
     parentPath?: string;
     properties?: Record<string, any>;
+    conditions?: FormComponentConditions;
     _configured?: boolean;
 }
 export interface ValidationRules {

package/src/utils.js

@@ -1,3 +1,4 @@
+import { Internationalization } from '@syncfusion/ej2-base';
 /**
  * Maps button style to Syncfusion CSS classes
  * @param style - Button style ('primary' | 'flat' | 'information' | 'error' | 'success' | 'warning')
@@ -58,3 +59,88 @@ export function splitWidths(input) {
     // Convert any NaN (shouldn't remain) to 0 and round knowns
     return result.map(v => (isNaN(v) ? 0 : Math.round(v)));
 }
+export function extractAllDescendantIds(component) {
+    const childIds = [];
+    function traverse(comps) {
+        for (const comp of comps) {
+            childIds.push(comp.id);
+            // Recursively traverse nested structures
+            if (comp.children && Array.isArray(comp.children)) {
+                traverse(comp.children);
+            }
+            // Handle table cells
+            if (comp.tableCells && Array.isArray(comp.tableCells)) {
+                comp.tableCells.forEach((row) => {
+                    if (Array.isArray(row)) {
+                        row.forEach((cell) => {
+                            if (Array.isArray(cell)) {
+                                traverse(cell);
+                            }
+                        });
+                    }
+                });
+            }
+            // Handle tab items
+            if (comp.tabItems && Array.isArray(comp.tabItems)) {
+                comp.tabItems.forEach((tabItem) => {
+                    if (tabItem.content && Array.isArray(tabItem.content)) {
+                        traverse(tabItem.content);
+                    }
+                });
+            }
+        }
+    }
+    // Start with direct children
+    if (component.children && Array.isArray(component.children)) {
+        traverse(component.children);
+    }
+    // Handle table cells
+    if (component.tableCells && Array.isArray(component.tableCells)) {
+        component.tableCells.forEach((row) => {
+            if (Array.isArray(row)) {
+                row.forEach((cell) => {
+                    if (Array.isArray(cell)) {
+                        traverse(cell);
+                    }
+                });
+            }
+        });
+    }
+    // Handle tab items
+    if (component.tabItems && Array.isArray(component.tabItems)) {
+        component.tabItems.forEach((tabItem) => {
+            if (tabItem.content && Array.isArray(tabItem.content)) {
+                traverse(tabItem.content);
+            }
+        });
+    }
+    return childIds;
+}
+export function formatDateValues(component, value) {
+    let intl = new Internationalization();
+    let dFormatter = intl.getDateFormat({
+        format: 'MM/dd/yyyy',
+        type: 'date'
+    });
+    if (component.type === 'date') {
+        value = dFormatter(new Date(value));
+    }
+    if (component.type === 'time') {
+        dFormatter = intl.getDateFormat({
+            format: 'hh:mm a',
+            type: 'time'
+        });
+        value = dFormatter(new Date(value));
+    }
+    if (component.type === 'dateTime') {
+        dFormatter = intl.getDateFormat({
+            format: 'MM/dd/yyyy hh:mm a',
+            type: 'dateTime'
+        });
+        value = dFormatter(new Date(value));
+    }
+    if (component.type === 'dateRange' && Array.isArray(value)) {
+        value = value.map(date => date ? dFormatter(new Date(date)) : null);
+    }
+    return value;
+}

package/styles/form-renderer.base.css

@@ -150,6 +150,22 @@
   min-width: 0;
 }
 
+.field-wrapper:has(.e-small) .field-label {
+  font-size: .75rem;
+}
+
+.field-wrapper:has(.e-small) .field-description {
+  font-size: 0.625rem;
+}
+
+.field-wrapper:has(.e-bigger) .field-label {
+  font-size: 1rem;
+}
+
+.field-wrapper:has(.e-bigger) .field-description {
+  font-size: 0.875rem;
+}
+
 /* Label */
 .field-label {
   font-size: 0.875rem;
@@ -213,7 +229,6 @@
   border: none;
   border-radius: 8px;
   padding: 0;
-  margin: 1rem 0;
 }
 
 .form-panel-renderer:has(.panel-legend) {
@@ -268,45 +283,45 @@
   overflow-y: hidden; 
 }
 
-.form-table-renderer .table-row {
+.form-table-renderer .e-form-table-row {
   display: table-row;
   background: transparent;
 }
 
-.form-table-renderer .table-cell {
+.form-table-renderer .e-form-table-cell {
   display: table-cell;
   padding: 12px;
   vertical-align: top;
 }
 
-.table-border .table-cell {
+.table-border .e-form-table-cell {
   border-bottom: 1px solid var(--sf-layout-border-color);
   border-right: 1px solid var(--sf-layout-border-color);
 }
 
-.table-cell:last-child {
+.e-form-table-cell:last-child {
   border-right: none;
 }
 
-.form-table-renderer .table-row:last-child .table-cell {
+.form-table-renderer .e-form-table-row:last-child .e-form-table-cell {
   border-bottom: none;
 }
 
-.table-cell > .form-table-renderer,
-.table-cell > .form-tabs-renderer,
-.table-cell > .form-card-renderer,
-.table-cell > .form-panel-renderer,
-.table-cell > .form-group
+.e-form-table-cell > .form-table-renderer,
+.e-form-table-cell > .form-tabs-renderer,
+.e-form-table-cell > .form-card-renderer,
+.e-form-table-cell > .form-panel-renderer,
+.e-form-table-cell > .form-group
  {
-    margin-bottom: 0.5rem;
+    margin-bottom: 1.5rem;
 }
 
 
-.table-cell > .form-table-renderer:last-child,
-.table-cell > .form-tabs-renderer:last-child,
-.table-cell > .form-card-renderer:last-child,
-.table-cell > .form-panel-renderer:last-child,
-.table-cell > .form-group:last-child
+.e-form-table-cell > .form-table-renderer:last-child,
+.e-form-table-cell > .form-tabs-renderer:last-child,
+.e-form-table-cell > .form-card-renderer:last-child,
+.e-form-table-cell > .form-panel-renderer:last-child,
+.e-form-table-cell > .form-group:last-child
 {
   margin-bottom: 0;
 }
@@ -342,6 +357,7 @@
 }
 
 .tab-content-renderer {
+  padding-top: 10px;
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -387,11 +403,11 @@
   border-color: #3d3d3d;
 }
 
-[data-theme="dark"] .table-row {
+[data-theme="dark"] .e-form-table-row {
   border-color: #3d3d3d;
 }
 
-[data-theme="dark"] .table-cell {
+[data-theme="dark"] .e-form-table-cell {
   border-color: #3d3d3d;
 }
 
@@ -442,7 +458,7 @@
     width: 100%;
   }
   
-  .form-table-renderer .table-cell {
+  .form-table-renderer .e-form-table-cell {
     display: block;
     flex: 1 1 auto;
     min-width: 250px; /* minimum width before wrapping to next row */
@@ -457,17 +473,17 @@
     flex: 1 1 auto;
   }
   
-  .table-border .table-cell  {
+  .table-border .e-form-table-cell  {
     border-right: none;
     border-bottom: 1px solid var(--sf-layout-border-color);
     border-radius: 4px;
   }
   
-  .form-table-renderer .table-cell:last-child {
+  .form-table-renderer .e-form-table-cell:last-child {
     border-bottom: 1px solid var(--sf-layout-border-color);
   }
   
-  .form-table-renderer .row:last-child .table-cell {
+  .form-table-renderer .row:last-child .e-form-table-cell {
     border-bottom: none;
   }
 }