@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,292 +0,0 @@
1
- /* Import Dialog Styles */
2
-
3
- .import-dialog .e-dlg-content {
4
- padding: 0;
5
- overflow: visible;
6
- }
7
-
8
- .import-dialog-content {
9
- display: flex;
10
- flex-direction: column;
11
- gap: 16px;
12
- padding: 20px;
13
- height: 100%;
14
- }
15
-
16
- .dialog-instruction {
17
- margin: 0;
18
- padding: 12px 16px;
19
- background-color: var(--sf-color-surface-secondary, #f5f5f5);
20
- border-radius: 8px;
21
- border-left: 3px solid var(--sf-color-primary);
22
- }
23
-
24
- .dialog-instruction p {
25
- margin: 0;
26
- font-size: 14px;
27
- line-height: 1.5;
28
- color: var(--sf-color-on-surface);
29
- }
30
-
31
- .dialog-instruction strong {
32
- color: var(--sf-color-primary);
33
- font-weight: 600;
34
- }
35
-
36
- .json-input-container {
37
- flex: 1;
38
- display: flex;
39
- flex-direction: column;
40
- }
41
-
42
- .json-input {
43
- width: 100%;
44
- height: 100%;
45
- min-height: 300px;
46
- padding: 16px;
47
- border: 2px solid var(--sf-color-outline, #ccc);
48
- border-radius: 8px;
49
- font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
50
- font-size: 13px;
51
- line-height: 1.6;
52
- resize: vertical;
53
- background-color: var(--sf-color-surface, #fff);
54
- color: var(--sf-color-on-surface);
55
- transition: border-color 0.2s;
56
- }
57
-
58
- .json-input:focus {
59
- outline: none;
60
- border-color: var(--sf-color-primary);
61
- box-shadow: 0 0 0 3px var(--sf-color-primary-container, rgba(98, 0, 238, 0.1));
62
- }
63
-
64
- .json-input::placeholder {
65
- color: var(--sf-color-on-surface-variant, #666);
66
- opacity: 0.6;
67
- }
68
-
69
- /* Validation Results */
70
- .validation-result {
71
- padding: 16px;
72
- border-radius: 8px;
73
- animation: slideIn 0.3s ease-out;
74
- }
75
-
76
- @keyframes slideIn {
77
- from {
78
- opacity: 0;
79
- transform: translateY(-10px);
80
- }
81
- to {
82
- opacity: 1;
83
- transform: translateY(0);
84
- }
85
- }
86
-
87
- .validation-result.success {
88
- background-color: var(--sf-color-success-container, #d4edda);
89
- border: 1px solid var(--sf-color-success, #28a745);
90
- }
91
-
92
- .validation-result.error {
93
- background-color: var(--sf-color-error-container, #f8d7da);
94
- border: 1px solid var(--sf-color-error, #dc3545);
95
- }
96
-
97
- .validation-success {
98
- display: flex;
99
- align-items: center;
100
- gap: 10px;
101
- color: var(--sf-color-on-success-container, #155724);
102
- font-weight: 500;
103
- }
104
-
105
- .validation-success svg {
106
- flex-shrink: 0;
107
- stroke: var(--sf-color-success, #28a745);
108
- }
109
-
110
- .validation-errors,
111
- .validation-warnings {
112
- display: flex;
113
- flex-direction: column;
114
- gap: 8px;
115
- }
116
-
117
- .error-header,
118
- .warning-header {
119
- display: flex;
120
- align-items: center;
121
- gap: 8px;
122
- font-weight: 600;
123
- margin-bottom: 4px;
124
- }
125
-
126
- .error-header {
127
- color: var(--sf-color-error, #dc3545);
128
- }
129
-
130
- .error-header svg {
131
- flex-shrink: 0;
132
- stroke: var(--sf-color-error, #dc3545);
133
- }
134
-
135
- .warning-header {
136
- color: var(--sf-color-warning, #ffc107);
137
- margin-top: 12px;
138
- }
139
-
140
- .warning-header svg {
141
- flex-shrink: 0;
142
- stroke: var(--sf-color-warning, #ffc107);
143
- }
144
-
145
- .error-list,
146
- .warning-list {
147
- margin: 0;
148
- padding-left: 28px;
149
- list-style: disc;
150
- }
151
-
152
- .error-list li {
153
- margin: 4px 0;
154
- font-size: 13px;
155
- line-height: 1.5;
156
- color: var(--sf-color-on-error-container, #721c24);
157
- }
158
-
159
- .warning-list li {
160
- margin: 4px 0;
161
- font-size: 13px;
162
- line-height: 1.5;
163
- color: var(--sf-color-on-warning-container, #856404);
164
- }
165
-
166
- /* Dialog Footer */
167
- .import-dialog-footer {
168
- display: flex;
169
- gap: 12px;
170
- justify-content: flex-end;
171
- align-items: center;
172
- }
173
-
174
- .import-dialog-footer .validate-btn {
175
- margin-right: auto;
176
- background-color: var(--sf-color-secondary-container, #e3f2fd);
177
- color: var(--sf-color-secondary, #1976d2);
178
- }
179
-
180
- .import-dialog-footer .validate-btn:hover:not(:disabled) {
181
- background-color: var(--sf-color-secondary, #1976d2);
182
- color: var(--sf-color-on-secondary, #fff);
183
- }
184
-
185
- .import-dialog-footer .import-btn:disabled {
186
- opacity: 0.5;
187
- cursor: not-allowed;
188
- }
189
-
190
- .conditions-editor-dialog .e-listbox-wrapper {
191
- border: none !important;
192
- border-radius: 0px !important;
193
- }
194
-
195
- .conditions-editor-dialog .e-listbox-wrapper .e-list-item {
196
- border-radius: 6px !important;
197
- }
198
-
199
- /* Dark mode adjustments */
200
- [data-theme="dark"] .dialog-instruction {
201
- background-color: rgba(170, 170, 252, 0.1);
202
- }
203
-
204
- [data-theme="dark"] .json-input {
205
- background-color: var(--sf-color-surface, #1e1e1e);
206
- border-color: var(--sf-color-outline-variant, #444);
207
- color: var(--sf-color-on-surface, #e0e0e0);
208
- }
209
-
210
- [data-theme="dark"] .json-input::placeholder {
211
- color: var(--sf-color-on-surface-variant, #999);
212
- }
213
-
214
- [data-theme="dark"] .validation-result.success {
215
- background-color: rgba(40, 167, 69, 0.15);
216
- border-color: var(--sf-color-success, #28a745);
217
- }
218
-
219
- [data-theme="dark"] .validation-result.error {
220
- background-color: rgba(220, 53, 69, 0.15);
221
- border-color: var(--sf-color-error, #dc3545);
222
- }
223
-
224
- [data-theme="dark"] .validation-success {
225
- color: var(--sf-color-success, #28a745);
226
- }
227
-
228
- [data-theme="dark"] .error-list li {
229
- color: var(--sf-color-error, #ff6b6b);
230
- }
231
-
232
- [data-theme="dark"] .warning-list li {
233
- color: var(--sf-color-warning, #ffd93d);
234
- }
235
-
236
- /* Split Schema Mode Styles */
237
- .split-schema-container {
238
- display: flex;
239
- gap: 16px;
240
- height: 100%;
241
- }
242
-
243
- .split-schema-container > div {
244
- flex: 1;
245
- display: flex;
246
- flex-direction: column;
247
- min-width: 0; /* Allow flex items to shrink */
248
- }
249
-
250
- .split-schema-container label {
251
- font-weight: 600;
252
- margin-bottom: 8px;
253
- color: var(--sf-color-on-surface);
254
- display: flex;
255
- align-items: baseline;
256
- gap: 8px;
257
- }
258
-
259
- .split-schema-container label span {
260
- font-weight: 400;
261
- font-size: 0.85em;
262
- color: var(--sf-color-on-surface-variant);
263
- }
264
-
265
- [data-theme="dark"] .split-schema-container label {
266
- color: var(--sf-color-on-surface, #e0e0e0);
267
- }
268
-
269
- [data-theme="dark"] .split-schema-container label span {
270
- color: var(--sf-color-on-surface-variant, #999);
271
- }
272
-
273
- /* Responsive adjustments */
274
- @container (max-width: 768px) {
275
- .import-dialog {
276
- width: 95% !important;
277
- height: 90% !important;
278
- }
279
-
280
- .json-input {
281
- min-height: 200px;
282
- }
283
-
284
- .split-schema-container {
285
- flex-direction: column;
286
- gap: 12px;
287
- }
288
-
289
- .split-schema-container .json-input {
290
- min-height: 150px;
291
- }
292
- }