@syncfusion/ej2-react-form-builder 0.1.0-beta → 35.1.42

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (160) hide show
  1. package/README.md +81 -36
  2. package/diConfig.json +148 -0
  3. package/dist/ej2-react-form-builder.min.js +10 -0
  4. package/dist/ej2-react-form-builder.umd.min.js +11 -0
  5. package/dist/ej2-react-form-builder.umd.min.js.map +1 -0
  6. package/dist/es6/ej2-react-form-builder.es2015.js +60 -0
  7. package/dist/es6/ej2-react-form-builder.es2015.js.map +1 -0
  8. package/form-builder.d.ts +4 -0
  9. package/form-builder.js +4 -0
  10. package/index.d.ts +2 -4
  11. package/index.js +2 -4
  12. package/license +6 -13
  13. package/package.json +19 -43
  14. package/src/form-builder/formbuilder.component.d.ts +37 -0
  15. package/src/form-builder/formbuilder.component.js +50 -0
  16. package/src/form-builder/index.d.ts +2 -0
  17. package/src/form-builder/index.js +2 -0
  18. package/src/form-builder/toolboxitems-directive.d.ts +28 -0
  19. package/src/form-builder/toolboxitems-directive.js +47 -0
  20. package/src/global.js +1 -0
  21. package/src/index.d.ts +2 -16
  22. package/src/index.js +2 -6
  23. package/Common/CheckboxGroup.d.ts +0 -13
  24. package/Common/CheckboxGroup.js +0 -50
  25. package/Common/ConditionalRuleEngine.d.ts +0 -296
  26. package/Common/ConditionalRuleEngine.js +0 -566
  27. package/Common/CustomTabComponent.d.ts +0 -17
  28. package/Common/CustomTabComponent.js +0 -30
  29. package/Common/CustomValidationEngine.d.ts +0 -58
  30. package/Common/CustomValidationEngine.js +0 -146
  31. package/Common/DataGridComponent.d.ts +0 -20
  32. package/Common/DataGridComponent.js +0 -273
  33. package/Common/FormValidator.d.ts +0 -485
  34. package/Common/FormValidator.js +0 -575
  35. package/Common/MinMaxRuleEngine.d.ts +0 -105
  36. package/Common/MinMaxRuleEngine.js +0 -365
  37. package/Common/StaticHtmlRenderer.d.ts +0 -14
  38. package/Common/StaticHtmlRenderer.js +0 -24
  39. package/Common/expressions/DependencyTracker.d.ts +0 -30
  40. package/Common/expressions/DependencyTracker.js +0 -128
  41. package/Common/expressions/ExpressionEngine.d.ts +0 -95
  42. package/Common/expressions/ExpressionEngine.js +0 -506
  43. package/Common/expressions/ExpressionParser.d.ts +0 -41
  44. package/Common/expressions/ExpressionParser.js +0 -269
  45. package/Common/expressions/useGridExpressions.d.ts +0 -12
  46. package/Common/expressions/useGridExpressions.js +0 -71
  47. package/Common/globalFormId.d.ts +0 -26
  48. package/Common/globalFormId.js +0 -45
  49. package/Common/json-converter.d.ts +0 -444
  50. package/Common/json-converter.js +0 -1184
  51. package/Common/parser.d.ts +0 -98
  52. package/Common/parser.js +0 -753
  53. package/Common/utils.d.ts +0 -130
  54. package/Common/utils.js +0 -574
  55. package/src/FormBuilder.d.ts +0 -211
  56. package/src/FormBuilder.js +0 -1299
  57. package/src/components/Database/ConnectionForm.d.ts +0 -8
  58. package/src/components/Database/ConnectionForm.js +0 -28
  59. package/src/components/TopBar.d.ts +0 -10
  60. package/src/components/TopBar.js +0 -7
  61. package/src/components/icons/ComponentIcons.d.ts +0 -44
  62. package/src/components/icons/ComponentIcons.js +0 -40
  63. package/src/components/layout/FormFieldWrapper.d.ts +0 -41
  64. package/src/components/layout/FormFieldWrapper.js +0 -112
  65. package/src/components/layout/LeftPane.d.ts +0 -23
  66. package/src/components/layout/LeftPane.js +0 -310
  67. package/src/components/layout/ListBoxPane.d.ts +0 -24
  68. package/src/components/layout/ListBoxPane.js +0 -94
  69. package/src/components/layout/MainSection.d.ts +0 -39
  70. package/src/components/layout/MainSection.js +0 -1766
  71. package/src/components/layout/Preview.d.ts +0 -12
  72. package/src/components/layout/Preview.js +0 -337
  73. package/src/components/layout/RightPane.d.ts +0 -22
  74. package/src/components/layout/RightPane.js +0 -370
  75. package/src/components/theme/ThemeSwitcher.d.ts +0 -14
  76. package/src/components/theme/ThemeSwitcher.js +0 -24
  77. package/src/components/theme/theme-constant.d.ts +0 -37
  78. package/src/components/theme/theme-constant.js +0 -23
  79. package/src/config/component-properties.json +0 -4929
  80. package/src/config/form-setting.json +0 -56
  81. package/src/config/locale.d.ts +0 -449
  82. package/src/config/locale.js +0 -449
  83. package/src/context/FormSchemaContext.d.ts +0 -32
  84. package/src/context/FormSchemaContext.js +0 -155
  85. package/src/context/LocalizationContext.d.ts +0 -27
  86. package/src/context/LocalizationContext.js +0 -43
  87. package/src/context/ThemeContext.d.ts +0 -23
  88. package/src/context/ThemeContext.js +0 -161
  89. package/src/context/contexts.d.ts +0 -6
  90. package/src/context/contexts.js +0 -6
  91. package/src/context/defaultFormSchema.d.ts +0 -6
  92. package/src/context/defaultFormSchema.js +0 -20
  93. package/src/defaultPalette.d.ts +0 -9
  94. package/src/defaultPalette.js +0 -45
  95. package/src/defaultTemplate.d.ts +0 -3
  96. package/src/defaultTemplate.js +0 -185
  97. package/src/import/schemaImportUtils.d.ts +0 -24
  98. package/src/import/schemaImportUtils.js +0 -121
  99. package/src/types/ActionButtons.d.ts +0 -44
  100. package/src/types/ActionButtons.js +0 -27
  101. package/src/types/ComponentProperties.d.ts +0 -33
  102. package/src/types/ComponentProperties.js +0 -2
  103. package/src/types/FormSchema.d.ts +0 -585
  104. package/src/types/FormSchema.js +0 -147
  105. package/src/types/connection.d.ts +0 -19
  106. package/src/types/connection.js +0 -9
  107. package/src/utils/AttributesEditor.d.ts +0 -13
  108. package/src/utils/AttributesEditor.js +0 -117
  109. package/src/utils/ButtonGroupEditor.d.ts +0 -15
  110. package/src/utils/ButtonGroupEditor.js +0 -141
  111. package/src/utils/ChoiceBasedFieldEditor.d.ts +0 -16
  112. package/src/utils/ChoiceBasedFieldEditor.js +0 -87
  113. package/src/utils/ClipboardHelper.d.ts +0 -26
  114. package/src/utils/ClipboardHelper.js +0 -83
  115. package/src/utils/ColumnBuilder.d.ts +0 -11
  116. package/src/utils/ColumnBuilder.js +0 -153
  117. package/src/utils/ColumnSpanEditor.d.ts +0 -8
  118. package/src/utils/ColumnSpanEditor.js +0 -98
  119. package/src/utils/ConditionDataEditor.d.ts +0 -29
  120. package/src/utils/ConditionDataEditor.js +0 -177
  121. package/src/utils/ConditionalEditorUtils.d.ts +0 -27
  122. package/src/utils/ConditionalEditorUtils.js +0 -310
  123. package/src/utils/ConditionsEditor.d.ts +0 -20
  124. package/src/utils/ConditionsEditor.js +0 -571
  125. package/src/utils/CustomAccordion.d.ts +0 -13
  126. package/src/utils/CustomAccordion.js +0 -38
  127. package/src/utils/CustomValidationEditor.d.ts +0 -11
  128. package/src/utils/CustomValidationEditor.js +0 -208
  129. package/src/utils/DataSourceCollector.d.ts +0 -3
  130. package/src/utils/DataSourceCollector.js +0 -252
  131. package/src/utils/ExpressionEditor.d.ts +0 -13
  132. package/src/utils/ExpressionEditor.js +0 -99
  133. package/src/utils/FormSettingsPanel.d.ts +0 -9
  134. package/src/utils/FormSettingsPanel.js +0 -60
  135. package/src/utils/LookupConfig.d.ts +0 -11
  136. package/src/utils/LookupConfig.js +0 -159
  137. package/src/utils/MinMaxValueEditor.d.ts +0 -25
  138. package/src/utils/MinMaxValueEditor.js +0 -188
  139. package/src/utils/OptionsEditor.d.ts +0 -8
  140. package/src/utils/OptionsEditor.js +0 -79
  141. package/src/utils/PropertyRenderer.d.ts +0 -22
  142. package/src/utils/PropertyRenderer.js +0 -210
  143. package/src/utils/ValueRenderer.d.ts +0 -2
  144. package/src/utils/ValueRenderer.js +0 -91
  145. package/src/utils/ej2DbAdaptor.d.ts +0 -6
  146. package/src/utils/ej2DbAdaptor.js +0 -38
  147. package/src/utils/mappingHeuristics.d.ts +0 -10
  148. package/src/utils/mappingHeuristics.js +0 -33
  149. package/src/utils/renderComponent.d.ts +0 -18
  150. package/src/utils/renderComponent.js +0 -300
  151. package/styles/tailwind3.css +0 -67
  152. package/styles/themes/action-buttons.css +0 -110
  153. package/styles/themes/datagrid.css +0 -380
  154. package/styles/themes/drag-reorder.css +0 -248
  155. package/styles/themes/import-dialog.css +0 -292
  156. package/styles/themes/index.css +0 -658
  157. package/styles/themes/left-pane.css +0 -253
  158. package/styles/themes/options-editor.css +0 -63
  159. package/styles/themes/preview.css +0 -702
  160. package/styles/themes/property-dialog.css +0 -371
@@ -1,296 +0,0 @@
1
- /**
2
- * ConditionalRuleEngine - Core rule evaluation engine for conditional behaviors
3
- *
4
- * Evaluates declarative condition rules (from QueryBuilder or manual JSON) against
5
- * form state to determine field visibility, read-only state, disabled state, and
6
- * which validators should apply.
7
- *
8
- * @spec CONDITIONAL-VALIDATION.md
9
- * @requirement Tasks 3.1-3.12: ConditionalRuleEngine implementation
10
- *
11
- * Features:
12
- * - Simple rule evaluation (field operator value)
13
- * - Composite rules (AND/OR combinations with nesting)
14
- * - Conditional validators (apply validator only when condition met)
15
- * - Relationship validators (cross-field validation with safe expression eval)
16
- * - Behavioral flags (visibility, readOnly, disabled)
17
- * - Error handling with safe defaults
18
- *
19
- * Security:
20
- * - Uses expr-eval for safe expression evaluation (no eval())
21
- * - Defaults to safe behavior on errors (visible, not disabled, not read-only)
22
- *
23
- * @example
24
- * ```typescript
25
- * const isVisible = ConditionalRuleEngine.isFieldVisible(
26
- * component.conditions,
27
- * { country: 'US', age: 25 }
28
- * );
29
- *
30
- * const behaviors = ConditionalRuleEngine.applyConditionalBehaviors(
31
- * component.conditions,
32
- * formValues
33
- * );
34
- * ```
35
- */
36
- import React from 'react';
37
- import type { ConditionType, FormComponentConditions, ConditionalDataRule, ChoiceBasedFieldRule } from '../FormBuilder/types/FormSchema';
38
- /**
39
- * Form field value type (aligned with FormValidator)
40
- * @private
41
- */
42
- export type FormValueType = string | number | boolean | Date | bigint | symbol | File | FileList | string[] | number[] | React.ReactNode | null | undefined | any;
43
- /**
44
- * ConditionalRuleEngine class
45
- * @private
46
- * @spec CONDITIONAL-VALIDATION.md - Core rule evaluation engine
47
- * @requirement Phase 1: Conditional visibility, readOnly, disabled behaviors
48
- */
49
- export declare class ConditionalRuleEngine {
50
- /**
51
- * Evaluate a conditional rule against form values
52
- *
53
- * Handles both simple rules (field operator value) and composite rules (AND/OR).
54
- * Returns false for malformed rules.
55
- *
56
- * @spec CONDITIONAL-VALIDATION.md - evaluateCondition method
57
- * @requirement Task 3.2: Implement evaluateCondition with simple and composite handling
58
- *
59
- * @param rule - ConditionalRule or CompositeConditionalRule
60
- * @param formValues - Current form field values (key = field name, value = field value)
61
- * @returns true if condition met, false otherwise
62
- * @private
63
- * @example
64
- * ```typescript
65
- * const rule = { field: 'age', operator: 'greaterThan', value: 18 };
66
- * const isAdult = ConditionalRuleEngine.evaluateCondition(rule, { age: 25 });
67
- * // isAdult = true
68
- * ```
69
- */
70
- static evaluateCondition(rule: ConditionType, formValues: Record<string, FormValueType>): boolean;
71
- /**
72
- * Evaluate simple field comparison rule
73
- *
74
- * Supports operators: equal, notEqual, greaterThan, lessThan, greaterThanOrEqual,
75
- * lessThanOrEqual, in, notIn, contains, notContains.
76
- *
77
- * Handles both camelCase (greaterThan) and lowercase (greaterthan) operator formats
78
- * for compatibility with QueryBuilder output.
79
- *
80
- * @spec CONDITIONAL-VALIDATION.md - evaluateSimpleRule method
81
- * @requirement Task 3.3: Implement evaluateSimpleRule supporting all operators
82
- *
83
- * @param rule - Simple conditional rule with field, operator, value
84
- * @param formValues - Current form field values
85
- * @returns true if comparison is true, false otherwise
86
- *
87
- * @example
88
- * ```typescript
89
- * const rule = { field: 'email', operator: 'contains', value: '@' };
90
- * const hasAt = evaluateSimpleRule(rule, { email: 'test@example.com' });
91
- * // hasAt = true
92
- * ```
93
- */
94
- private static evaluateSimpleRule;
95
- /**
96
- * Evaluate composite rule with AND/OR logic
97
- *
98
- * Recursively evaluates nested rules with AND (all must be true) or OR
99
- * (at least one must be true) logic.
100
- *
101
- * @spec CONDITIONAL-VALIDATION.md - evaluateCompositeRule method
102
- * @requirement Task 3.4: Implement evaluateCompositeRule for AND/OR logic
103
- *
104
- * @param rule - Composite rule with condition ('and'|'or') and rules array
105
- * @param formValues - Current form field values
106
- * @returns true if composite condition met, false otherwise
107
- *
108
- * @example
109
- * ```typescript
110
- * const rule = {
111
- * condition: 'and',
112
- * rules: [
113
- * { field: 'age', operator: 'greaterThan', value: 18 },
114
- * { field: 'country', operator: 'equal', value: 'US' }
115
- * ]
116
- * };
117
- * const isEligible = evaluateCompositeRule(rule, { age: 25, country: 'US' });
118
- * // isEligible = true
119
- * ```
120
- */
121
- private static evaluateCompositeRule;
122
- /**
123
- * Check if field should be visible
124
- *
125
- * Evaluates visibleWhen condition. Defaults to true (visible) if no condition
126
- * is defined or on error.
127
- *
128
- * @spec CONDITIONAL-VALIDATION.md - isFieldVisible method
129
- * @requirement Task 3.8: Implement isFieldVisible (defaults to true if no condition)
130
- *
131
- * @param conditions - FormComponentConditions containing visibleWhen rule
132
- * @param formValues - Current form field values
133
- * @returns true if field should be visible, false if hidden
134
- *
135
- * @example
136
- * ```typescript
137
- * const conditions = {
138
- * visibleWhen: { field: 'showEmail', operator: 'equal', value: true }
139
- * };
140
- * const visible = isFieldVisible(conditions, { showEmail: true });
141
- * // visible = true
142
- * ```
143
- */
144
- static isFieldVisible(conditions: FormComponentConditions | undefined, formValues: Record<string, FormValueType>): boolean;
145
- /**
146
- * Check if field should be read-only
147
- *
148
- * Evaluates readOnlyWhen condition. Defaults to false (editable) if no
149
- * condition is defined or on error.
150
- *
151
- * @spec CONDITIONAL-VALIDATION.md - isFieldReadOnly method
152
- * @requirement Task 3.9: Implement isFieldReadOnly (defaults to false if no condition)
153
- *
154
- * @param conditions - FormComponentConditions containing readOnlyWhen rule
155
- * @param formValues - Current form field values
156
- * @returns true if field should be read-only, false if editable
157
- *
158
- * @example
159
- * ```typescript
160
- * const conditions = {
161
- * readOnlyWhen: { field: 'isVerified', operator: 'equal', value: true }
162
- * };
163
- * const readOnly = isFieldReadOnly(conditions, { isVerified: true });
164
- * // readOnly = true
165
- * ```
166
- */
167
- static isFieldReadOnly(conditions: FormComponentConditions | undefined, formValues: Record<string, FormValueType>): boolean;
168
- /**
169
- * Check if field should be disabled
170
- *
171
- * Evaluates disabledWhen condition. Defaults to false (enabled) if no
172
- * condition is defined or on error.
173
- *
174
- * @spec CONDITIONAL-VALIDATION.md - isFieldDisabled method
175
- * @requirement Task 3.10: Implement isFieldDisabled (defaults to false if no condition)
176
- *
177
- * @param conditions - FormComponentConditions containing disabledWhen rule
178
- * @param formValues - Current form field values
179
- * @returns true if field should be disabled, false if enabled
180
- *
181
- * @example
182
- * ```typescript
183
- * const conditions = {
184
- * disabledWhen: { field: 'orderStatus', operator: 'equal', value: 'completed' }
185
- * };
186
- * const disabled = isFieldDisabled(conditions, { orderStatus: 'completed' });
187
- * // disabled = true
188
- * ```
189
- */
190
- static isFieldDisabled(conditions: FormComponentConditions | undefined, formValues: Record<string, FormValueType>): boolean;
191
- /**
192
- * Check if field should be hidden
193
- *
194
- * Evaluates hideWhen condition. Defaults to false (visible) if no condition
195
- * is defined or on error.
196
- *
197
- * @param conditions - FormComponentConditions containing hideWhen rule
198
- * @param formValues - Current form field values
199
- * @returns true if field should be hidden, false if visible
200
- *
201
- * @example
202
- * ```typescript
203
- * const conditions = {
204
- * hideWhen: { field: 'hideEmail', operator: 'equal', value: true }
205
- * };
206
- * const hidden = isFieldHidden(conditions, { hideEmail: true });
207
- * // hidden = true
208
- * ```
209
- */
210
- static isFieldHidden(conditions: FormComponentConditions | undefined, formValues: Record<string, FormValueType>): boolean;
211
- /**
212
- * Check if field should be required
213
- *
214
- * Evaluates requiredWhen condition. Defaults to false (not required) if no condition
215
- * is defined or on error.
216
- *
217
- * @param conditions - FormComponentConditions containing requiredWhen rule
218
- * @param formValues - Current form field values
219
- * @returns true if field should be required, false if optional
220
- *
221
- * @example
222
- * ```typescript
223
- * const conditions = {
224
- * requiredWhen: { field: 'requireDetails', operator: 'equal', value: true }
225
- * };
226
- * const required = isFieldRequired(conditions, { requireDetails: true });
227
- * // required = true
228
- * ```
229
- */
230
- static isFieldRequired(conditions: FormComponentConditions | undefined, formValues: Record<string, FormValueType>): boolean;
231
- /**
232
- * Get value to set for field if condition is met
233
- *
234
- * Evaluates setValueWhen condition and returns the value to assign if true.
235
- * Returns undefined if no condition is defined, condition not met, or on error.
236
- *
237
- * @param conditions - FormComponentConditions containing setValueWhen rule
238
- * @param formValues - Current form field values
239
- * @returns The value to set if condition met, undefined otherwise
240
- *
241
- * @example
242
- * ```typescript
243
- * const conditions = {
244
- * setValueWhen: {
245
- * condition: { field: 'country', operator: 'equal', value: 'US' },
246
- * value: 'United States'
247
- * }
248
- * };
249
- * const value = getConditionalValue(conditions, { country: 'US' });
250
- * // value = 'United States'
251
- * ```
252
- */
253
- static getConditionalValue(conditions: FormComponentConditions | undefined, formValues: Record<string, FormValueType>): any;
254
- /**
255
- * Evaluate conditional data availability
256
- * Returns true if any conditional data rule's condition is met
257
- *
258
- * @param conditionalDataRules - Array of ConditionalDataRule objects
259
- * @param formValues - Current form field values
260
- * @returns Index of first matching rule, or -1 if none match
261
- */
262
- static evaluateConditionalDataRules(conditionalDataRules: ConditionalDataRule[] | undefined, formValues: Record<string, FormValueType>): number;
263
- /**
264
- * Get filtered options for a dependent dropdown based on choice-based field rule
265
- *
266
- * If choiceBasedField rule exists and primary field has a value,
267
- * return only the mapped dependent options for that primary value.
268
- * Otherwise return all options.
269
- *
270
- * @param rule - ChoiceBasedFieldRule configuration
271
- * @param allDependentOptions - Complete list of dependent field options
272
- * @param formValues - Current form values
273
- * @param primaryFieldId - ID of primary field
274
- * @returns Filtered options array
275
- *
276
- * @example
277
- * ```typescript
278
- * const rule = {
279
- * primaryFieldId: 'dept-id',
280
- * choiceMapping: {
281
- * 'Marketing': ['Markers', 'Sticky Notes'],
282
- * 'Finance': ['Calculator']
283
- * }
284
- * };
285
- *
286
- * const filtered = ConditionalRuleEngine.getChoiceBasedOptions(
287
- * rule,
288
- * ['Markers', 'Sticky Notes', 'Calculator'],
289
- * { 'dept-id': 'Marketing' },
290
- * 'dept-id'
291
- * );
292
- * // Returns: ['Markers', 'Sticky Notes']
293
- * ```
294
- */
295
- static getChoiceBasedOptions(rule: ChoiceBasedFieldRule, allDependentOptions: string[], formValues: Record<string, FormValueType>, primaryFieldId: string): string[];
296
- }