formique 1.0.6 → 1.0.7
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.
- package/dist/css/formique.css +263 -142
- package/formique.umd.js +1 -1
- package/package.json +2 -2
- package/formique.cjs.js +0 -1
package/dist/css/formique.css
CHANGED
|
@@ -1,250 +1,371 @@
|
|
|
1
|
-
@import url('https://fonts.googleapis.com/css2?family=
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
|
|
2
|
+
|
|
3
|
+
.dark-theme {
|
|
4
|
+
--background-dark: #0A0A0A;
|
|
5
|
+
--background-light: #1A1A1A;
|
|
6
|
+
--text-light: #E5E5E5;
|
|
7
|
+
--border-color: #333333;
|
|
8
|
+
--input-background: #1C1C1C;
|
|
9
|
+
--input-background-disabled: #2A2A2A;
|
|
10
|
+
--label-color: #999999;
|
|
11
|
+
--radio-checkbox-accent: #4A90E2;
|
|
12
|
+
--button-background: #444444;
|
|
13
|
+
--button-background-hover: #555555;
|
|
14
|
+
--button-text-color: #E5E5E5;
|
|
15
|
+
--input-border-color: #444444;
|
|
16
|
+
--input-border-color-focus: #666666;
|
|
17
|
+
--secondary-text-color: #B3B3B3;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
.light-theme {
|
|
23
|
+
--background-light: #ffffff;
|
|
24
|
+
--background-dark: #1a1a1a;
|
|
25
|
+
--text-light: #333333;
|
|
26
|
+
--border-color: #cccccc;
|
|
27
|
+
--input-background: #ffffff;
|
|
28
|
+
--input-background-disabled: #e0e0e0;
|
|
29
|
+
--label-color: #555555;
|
|
30
|
+
--radio-checkbox-accent: #4A90E2;
|
|
31
|
+
--button-background: #888888;
|
|
32
|
+
--button-background-hover: #666666;
|
|
33
|
+
--button-text-color: #ffffff;
|
|
34
|
+
--input-border-color: #cccccc;
|
|
35
|
+
--input-border-color-focus: #4A90E2;
|
|
36
|
+
--secondary-text-color: #777777;
|
|
37
|
+
}
|
|
4
38
|
|
|
39
|
+
.pink-theme {
|
|
40
|
+
--background-dark: red;
|
|
41
|
+
--background-light: #05051e;
|
|
42
|
+
--text-light: #fe8bbb;
|
|
43
|
+
--border-color: pink;
|
|
44
|
+
--input-background: #ffffff;
|
|
45
|
+
--input-background-disabled: #f1f8e9;
|
|
46
|
+
--label-color: #fe8bbb; /* #c2185b; */
|
|
47
|
+
--radio-checkbox-accent: #c2185b;
|
|
48
|
+
--button-background: #c2185b; /*#e91e63;*/
|
|
49
|
+
--button-background-hover: #f01ff0;
|
|
50
|
+
--button-text-color: #ffffff;
|
|
51
|
+
--input-border-color: #05051e;
|
|
52
|
+
--input-border-color-focus: #c2185b;
|
|
53
|
+
--secondary-text-color: #880e4f;
|
|
54
|
+
}
|
|
5
55
|
|
|
6
|
-
/* Dark Theme
|
|
7
56
|
|
|
8
|
-
|
|
9
|
-
--background-
|
|
10
|
-
--background-
|
|
11
|
-
--text-light:
|
|
12
|
-
--
|
|
13
|
-
--
|
|
14
|
-
--input-background
|
|
15
|
-
--
|
|
16
|
-
--
|
|
17
|
-
--
|
|
18
|
-
--button-background
|
|
57
|
+
.light-blue-theme {
|
|
58
|
+
--background-light: #f0f8ff;
|
|
59
|
+
--background-dark: #003b5c;
|
|
60
|
+
--text-light: #fff;
|
|
61
|
+
--text-dark: #000;
|
|
62
|
+
--border-color: #0077b6;
|
|
63
|
+
--input-background: #ffffff;
|
|
64
|
+
--input-background-disabled: #d1e4f4;
|
|
65
|
+
--label-color: #4a6572;
|
|
66
|
+
--radio-checkbox-accent: #0091d3;
|
|
67
|
+
--button-background: #1e3a8a;
|
|
68
|
+
--button-background-hover: #0f2a5f;
|
|
69
|
+
--button-text-color: #ffffff;
|
|
70
|
+
--input-border-color: #0077b6;
|
|
71
|
+
--input-border-color-focus: #00aaff;
|
|
72
|
+
--secondary-text-color: #4f5b62;
|
|
73
|
+
--dropdown-option-text-color: #003b5c;
|
|
74
|
+
--legend-text-color: #1d3557;
|
|
75
|
+
|
|
19
76
|
}
|
|
20
77
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
--background-dark: #2c2c2c;
|
|
24
|
-
--background-light: #3d3d3d;
|
|
25
|
-
--text-light: #f1f1f1;
|
|
26
|
-
--border-color: #555;
|
|
27
|
-
--input-background: #444;
|
|
28
|
-
--input-background-disabled: #666;
|
|
29
|
-
--label-color: #ff4081;
|
|
30
|
-
--radio-checkbox-accent: #ff4081;
|
|
31
|
-
--button-background: #ff4081;
|
|
32
|
-
--button-background-hover: #e91e63;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
/* Deep Blue, Purple, and Pink Theme */
|
|
36
|
-
:root {
|
|
37
|
-
--background-dark: #1a1a40;
|
|
38
|
-
--background-light: #2b2b73;
|
|
39
|
-
--text-light: #f1f1f1;
|
|
40
|
-
--border-color: #4a4a91;
|
|
41
|
-
--input-background: #3a3a6b;
|
|
42
|
-
--input-background-disabled: #555587;
|
|
43
|
-
--label-color: #ff66b3;
|
|
44
|
-
--radio-checkbox-accent: #ff66b3;
|
|
45
|
-
--button-background: linear-gradient(45deg, #6a4fbf, #ff66b3);
|
|
46
|
-
--button-background-hover: linear-gradient(45deg, #4e2e8b, #ff4081);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
/* Indigo Theme
|
|
51
|
-
:root {
|
|
78
|
+
|
|
79
|
+
.indigo-theme {
|
|
52
80
|
--background-dark: #2c2c2c;
|
|
53
81
|
--background-light: #3d3d3d;
|
|
54
82
|
--text-light: #e0e0e0;
|
|
55
83
|
--border-color: #444;
|
|
56
84
|
--input-background: #333;
|
|
57
85
|
--input-background-disabled: #555;
|
|
58
|
-
--label-color: #
|
|
86
|
+
--label-color: #7986cb;
|
|
59
87
|
--radio-checkbox-accent: #3f51b5;
|
|
60
88
|
--button-background: #3f51b5;
|
|
61
89
|
--button-background-hover: #303f9f;
|
|
90
|
+
--button-text-color: #ffffff;
|
|
91
|
+
--input-border-color: #3f51b5;
|
|
92
|
+
--input-border-color-focus: #303f9f;
|
|
93
|
+
--secondary-text-color: #b3b3b3;
|
|
62
94
|
}
|
|
63
95
|
|
|
64
|
-
|
|
65
|
-
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
.dark-blue-theme {
|
|
66
100
|
--background-dark: #0a0a0a;
|
|
67
101
|
--background-light: #1a1a1a;
|
|
68
102
|
--text-light: #e0e0e0;
|
|
69
103
|
--border-color: #333;
|
|
70
104
|
--input-background: #222;
|
|
71
105
|
--input-background-disabled: #444;
|
|
72
|
-
--label-color: #
|
|
106
|
+
--label-color: #81d4fa;
|
|
73
107
|
--radio-checkbox-accent: #2196f3;
|
|
74
108
|
--button-background: #2196f3;
|
|
75
109
|
--button-background-hover: #1976d2;
|
|
110
|
+
--button-text-color: #ffffff;
|
|
111
|
+
--input-border-color: #2196f3;
|
|
112
|
+
--input-border-color-focus: #1976d2;
|
|
113
|
+
--secondary-text-color: #b3b3b3;
|
|
76
114
|
}
|
|
77
115
|
|
|
78
116
|
|
|
79
117
|
|
|
80
|
-
/* Dark and Orange
|
|
81
118
|
|
|
82
|
-
|
|
119
|
+
.dark-orange-theme {
|
|
83
120
|
--background-dark: #121212;
|
|
84
121
|
--background-light: #1e1e1e;
|
|
85
122
|
--text-light: #e0e0e0;
|
|
86
123
|
--border-color: #333;
|
|
87
124
|
--input-background: #333;
|
|
88
125
|
--input-background-disabled: #444;
|
|
89
|
-
--label-color: #
|
|
90
|
-
--radio-checkbox-accent: #
|
|
91
|
-
--button-background: #
|
|
92
|
-
--button-background-hover: #
|
|
126
|
+
--label-color: #f96743;
|
|
127
|
+
--radio-checkbox-accent: #f96743;
|
|
128
|
+
--button-background: #f96743;
|
|
129
|
+
--button-background-hover: #f24e2e;
|
|
130
|
+
--button-text-color: #ffffff;
|
|
131
|
+
--input-border-color: #f96743;
|
|
132
|
+
--input-border-color-focus: #f24e2e;
|
|
133
|
+
--secondary-text-color: #b3b3b3;
|
|
93
134
|
}
|
|
94
135
|
|
|
95
|
-
*/
|
|
96
136
|
|
|
137
|
+
.green-theme {
|
|
138
|
+
--background-dark: #001700;
|
|
139
|
+
--background-light: #011f01;
|
|
140
|
+
--text-light: #e0e0e0;
|
|
141
|
+
--border-color: #333;
|
|
142
|
+
--input-background: #333;
|
|
143
|
+
--input-background-disabled: #444;
|
|
144
|
+
--label-color: #4caf50;
|
|
145
|
+
--radio-checkbox-accent: #4caf50;
|
|
146
|
+
--button-background: #4caf50;
|
|
147
|
+
--button-background-hover: #388e3c;
|
|
148
|
+
--button-text-color: #ffffff;
|
|
149
|
+
--input-border-color: #4caf50;
|
|
150
|
+
--input-border-color-focus: #388e3c;
|
|
151
|
+
--secondary-text-color: #b3b3b3;
|
|
152
|
+
}
|
|
97
153
|
|
|
98
154
|
|
|
99
|
-
|
|
155
|
+
.purple-theme {
|
|
156
|
+
--background-dark: #121212;
|
|
157
|
+
--background-light: #f3e5f5;
|
|
158
|
+
--text-light: #4a148c;
|
|
159
|
+
--border-color: #333;
|
|
160
|
+
--input-background: #ffffff;
|
|
161
|
+
--input-background-disabled: #f1f8e9;
|
|
162
|
+
--label-color: #9c27b0;
|
|
163
|
+
--radio-checkbox-accent: #9c27b0;
|
|
164
|
+
--button-background: #9c27b0;
|
|
165
|
+
--button-background-hover: #7b1fa2;
|
|
166
|
+
--button-text-color: #ffffff;
|
|
167
|
+
--input-border-color: #9c27b0;
|
|
168
|
+
--input-border-color-focus: #7b1fa2;
|
|
169
|
+
--secondary-text-color: #880e4f;
|
|
170
|
+
}
|
|
100
171
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
border-
|
|
107
|
-
|
|
108
|
-
|
|
172
|
+
.midnight-blush-theme {
|
|
173
|
+
--background-light: #05051e;
|
|
174
|
+
--background-dark: #05051e;
|
|
175
|
+
--text-light: #ffbd7a;
|
|
176
|
+
--text-dark: #ffffff;
|
|
177
|
+
--border-color: #ffbd7a; /* #9e7aff;*/
|
|
178
|
+
--input-background: #ffffff;
|
|
179
|
+
--input-background-disabled: #d9d9d9;
|
|
180
|
+
--label-color: #9e7aff;
|
|
181
|
+
--radio-checkbox-accent: #fe8bbb;
|
|
182
|
+
--button-background: #ffbd7a;
|
|
183
|
+
--button-background-hover: #9e7aff; /*#fe8bbb*/;
|
|
184
|
+
--button-text-color: #05051e;
|
|
185
|
+
--input-border-color: #9e7aff;
|
|
186
|
+
--input-border-color-focus: #fe8bbb;
|
|
187
|
+
--secondary-text-color: #ffbd7a;
|
|
188
|
+
--dropdown-option-text-color: #05051e;
|
|
189
|
+
--legend-text-color: #9e7aff;
|
|
109
190
|
}
|
|
110
191
|
|
|
111
192
|
|
|
112
|
-
*/
|
|
113
193
|
|
|
114
194
|
|
|
115
|
-
|
|
116
|
-
|
|
195
|
+
|
|
196
|
+
/* Formique Container */
|
|
197
|
+
.formique {
|
|
198
|
+
max-width: 600px;
|
|
117
199
|
margin: auto;
|
|
118
200
|
padding: 1rem;
|
|
119
|
-
background:
|
|
201
|
+
background: var(--background-light);
|
|
120
202
|
border-radius: 8px;
|
|
121
|
-
color:
|
|
122
|
-
font-family: 'Montserrat', sans-serif
|
|
203
|
+
color: var(--text-light);
|
|
204
|
+
/*font-family: 'Montserrat', sans-serif;*/
|
|
205
|
+
font-family: 'Lato', sans-serif;
|
|
206
|
+
margin-bottom: 200px;
|
|
207
|
+
border: 1px solid var(--border-color);
|
|
208
|
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
|
|
123
209
|
}
|
|
124
210
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
211
|
/* Input Block Styling */
|
|
129
|
-
|
|
212
|
+
.formique .input-block {
|
|
130
213
|
margin-bottom: 1rem;
|
|
214
|
+
position: relative;
|
|
131
215
|
}
|
|
132
216
|
|
|
133
|
-
|
|
217
|
+
.formique .input-block label {
|
|
134
218
|
display: block;
|
|
135
219
|
margin-bottom: 0.5rem;
|
|
136
|
-
color: var(--label-color);
|
|
220
|
+
color: var(--label-color);
|
|
137
221
|
}
|
|
138
222
|
|
|
139
|
-
|
|
140
|
-
|
|
223
|
+
.formique .input-block .form-input,
|
|
224
|
+
.formique .input-block .form-control {
|
|
141
225
|
width: 100%;
|
|
142
|
-
padding: 0.75rem;
|
|
143
|
-
border:
|
|
144
|
-
border-
|
|
145
|
-
|
|
226
|
+
padding: 0.75rem 1rem 0.75rem 2.5rem;
|
|
227
|
+
border: none;
|
|
228
|
+
border-bottom: 1px solid var(--border-color);
|
|
229
|
+
border-radius: 0;
|
|
230
|
+
background-color: var(--background-light);
|
|
146
231
|
color: var(--text-light);
|
|
147
232
|
box-sizing: border-box;
|
|
233
|
+
font-size: 1rem;
|
|
148
234
|
}
|
|
149
235
|
|
|
150
|
-
#formique .input-block .form-input:disabled {
|
|
151
|
-
background-color: var(--input-background-disabled); /* Background for disabled inputs */
|
|
152
|
-
cursor: not-allowed;
|
|
153
|
-
}
|
|
154
236
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
237
|
+
.formique .input-block .form-input:focus {
|
|
238
|
+
outline: none;
|
|
239
|
+
border-bottom: 1px solid var(--button-background);
|
|
158
240
|
}
|
|
159
241
|
|
|
160
|
-
#formique .radio-group legend {
|
|
161
|
-
margin-bottom: 0.5rem;
|
|
162
|
-
font-weight: bold;
|
|
163
|
-
color: var(--label-color); /* Orange color for legend */
|
|
164
|
-
}
|
|
165
242
|
|
|
166
|
-
|
|
167
|
-
|
|
243
|
+
.formique .input-block .form-input-icon {
|
|
244
|
+
position: absolute;
|
|
245
|
+
left: 1rem;
|
|
246
|
+
top: 50%;
|
|
247
|
+
transform: translateY(-50%);
|
|
248
|
+
color: var(--label-color);
|
|
168
249
|
}
|
|
169
250
|
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
251
|
+
/* Input Disabled */
|
|
252
|
+
.formique .input-block .form-input:disabled {
|
|
253
|
+
background-color: var(--input-background-disabled);
|
|
254
|
+
cursor: not-allowed;
|
|
255
|
+
border-bottom: 1px solid var(--label-color);
|
|
173
256
|
}
|
|
174
257
|
|
|
175
|
-
/* Checkbox
|
|
176
|
-
|
|
258
|
+
/* Fieldset Styling for Radio, Checkbox, and Select Groups */
|
|
259
|
+
.formique .radio-group,
|
|
260
|
+
.formique .checkbox-group,
|
|
261
|
+
.formique .form-select {
|
|
177
262
|
margin-bottom: 1rem;
|
|
263
|
+
padding: 1rem 0;
|
|
264
|
+
border-radius: 8px;
|
|
265
|
+
background-color: transparent;
|
|
266
|
+
border: 1px solid var(--border-color);
|
|
178
267
|
}
|
|
179
268
|
|
|
180
|
-
|
|
269
|
+
/* Radio and Checkbox Group Styling */
|
|
270
|
+
.formique .radio-group legend,
|
|
271
|
+
.formique .checkbox-group legend {
|
|
181
272
|
margin-bottom: 0.5rem;
|
|
182
273
|
font-weight: bold;
|
|
183
|
-
color: var(--label-color);
|
|
274
|
+
color: var(--label-color);
|
|
184
275
|
}
|
|
185
276
|
|
|
186
|
-
|
|
277
|
+
.formique .radio-group div,
|
|
278
|
+
.formique .checkbox-group div {
|
|
187
279
|
margin-bottom: 0.5rem;
|
|
280
|
+
display: flex;
|
|
281
|
+
align-items: center;
|
|
188
282
|
}
|
|
189
283
|
|
|
190
|
-
|
|
284
|
+
.formique .radio-group .form-radio-input,
|
|
285
|
+
.formique .checkbox-group .form-checkbox-input {
|
|
191
286
|
margin-right: 0.5rem;
|
|
192
|
-
accent-color: var(--radio-checkbox-accent);
|
|
287
|
+
accent-color: var(--radio-checkbox-accent);
|
|
193
288
|
}
|
|
194
289
|
|
|
195
290
|
/* Select Styling */
|
|
196
|
-
|
|
291
|
+
.formique .form-select {
|
|
197
292
|
margin-bottom: 1rem;
|
|
293
|
+
padding: 1rem 2rem;
|
|
294
|
+
border-radius: 8px;
|
|
295
|
+
background-color: transparent;
|
|
296
|
+
border: 1px solid var(--border-color); /* Reduced thickness */
|
|
198
297
|
}
|
|
199
298
|
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
margin-bottom: 0.5rem;
|
|
203
|
-
color: var(--label-color); /* Orange color for labels */
|
|
299
|
+
.formique .form-select legend {
|
|
300
|
+
color: var(--legend-text-color);
|
|
204
301
|
}
|
|
205
302
|
|
|
206
|
-
|
|
303
|
+
.formique .form-select select option {
|
|
304
|
+
background-color: #000!important;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
/* Label for Select */
|
|
308
|
+
.formique .form-select label {
|
|
309
|
+
display: block;
|
|
207
310
|
margin-bottom: 0.5rem;
|
|
208
|
-
|
|
209
|
-
color: var(--label-color); /* Orange color for legend */
|
|
311
|
+
color: var(--label-color);
|
|
210
312
|
}
|
|
211
313
|
|
|
212
|
-
|
|
314
|
+
/* The Select Input Styling */
|
|
315
|
+
.formique .form-select select {
|
|
213
316
|
width: 100%;
|
|
214
|
-
padding: 0.75rem;
|
|
215
|
-
border:
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
317
|
+
padding: 0.75rem 1rem 0.75rem 2.5rem;
|
|
318
|
+
border: none;
|
|
319
|
+
background-color: transparent;
|
|
320
|
+
color: var(--legend-text-color);
|
|
321
|
+
font-size: 1rem;
|
|
219
322
|
box-sizing: border-box;
|
|
220
323
|
}
|
|
221
324
|
|
|
222
|
-
/*
|
|
223
|
-
|
|
325
|
+
/* Focus Effect for Select */
|
|
326
|
+
.formique .form-select select:focus {
|
|
327
|
+
outline: none;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
/* Icon for Select, Radio, and Checkbox Inputs */
|
|
331
|
+
.formique .radio-group .form-radio-input + label,
|
|
332
|
+
.formique .checkbox-group .form-checkbox-input + label {
|
|
333
|
+
margin-left: 0.5rem;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
.formique .radio-group label,
|
|
337
|
+
.formique .checkbox-group label {
|
|
338
|
+
color: var(--label-color);
|
|
339
|
+
font-weight: normal;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
.formique .form-select .form-select-icon {
|
|
343
|
+
position: absolute;
|
|
344
|
+
left: 1rem;
|
|
345
|
+
top: 50%;
|
|
346
|
+
transform: translateY(-50%);
|
|
347
|
+
color: var(--label-color);
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.formique .radio-group div,
|
|
351
|
+
.formique .checkbox-group div {
|
|
352
|
+
padding-left: 2.5rem;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
|
|
356
|
+
.formique .form-submit-btn {
|
|
224
357
|
padding: 0.75rem 1.5rem;
|
|
225
|
-
border: 1px solid var(--
|
|
358
|
+
border: 1px solid var(--background-light);
|
|
226
359
|
border-radius: 4px;
|
|
227
|
-
background-color: var(--button-background);
|
|
228
|
-
color: var(--text-
|
|
360
|
+
background-color: var(--button-background);
|
|
361
|
+
color: var(--button-text-color);
|
|
229
362
|
font-size: 1rem;
|
|
230
363
|
cursor: pointer;
|
|
231
364
|
transition: background-color 0.3s;
|
|
232
365
|
}
|
|
233
366
|
|
|
234
|
-
|
|
235
|
-
background-color: var(--button-background-hover);
|
|
236
|
-
color: var(--text-
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
/* General Styles */
|
|
240
|
-
|
|
241
|
-
/*
|
|
242
|
-
body {
|
|
243
|
-
background-color: var(--background-dark);
|
|
244
|
-
color: var(--text-light);
|
|
245
|
-
font-family: Arial, sans-serif;
|
|
246
|
-
margin: 0;
|
|
247
|
-
padding: 0;
|
|
367
|
+
.formique .form-submit-btn:hover {
|
|
368
|
+
background-color: var(--button-background-hover);
|
|
369
|
+
color: var(--button-text-color);
|
|
248
370
|
}
|
|
249
|
-
*/
|
|
250
371
|
|
package/formique.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e="undefined"!=typeof globalThis?globalThis:e||self).Formique=n()}(this,(function(){"use strict";class e{renderField(e,n,i,t,s,l){throw new Error("Method renderField must be implemented")}}return class extends e{constructor(e,n={},i={}){super(),this.formSchema=e,this.divClass="input-block",this.inputClass="form-input",this.radioGroupClass="radio-group",this.checkboxGroupClass="checkbox-group",this.selectGroupClass="form-select",this.submitButtonClass="form-submit-btn",this.formParams=n,this.formContainerId=i.formContainerId||"formique",this.formMarkUp="",this.dependencyGraph={},this.themes=["dark","light","pink","light","indigo","dark-blue","dark-orange","green","purple","midnight-blush"],document.addEventListener("DOMContentLoaded",(()=>{if(this.renderFormHTML(),this.initDependencyGraph(),this.registerObservers(),this.formSettings.theme&&this.themes.includes(this.formSettings.theme)){let e=this.formSettings.theme;this.applyTheme(e,this.formContainerId)}else this.applyTheme("dark",this.formContainerId)})),this.formSettings={requiredFieldIndicator:!0,placeholders:!0,asteriskHtml:'<span aria-hidden="true" style="color: red;">*</span>',...i},Object.keys(this.formParams).length>0&&(this.formMarkUp+=this.renderFormElement()),this.renderForm()}initDependencyGraph(){this.dependencyGraph={},this.formSchema.forEach((e=>{const[n,i,t,s,l={}]=e,r=l.id||i;l.dependents&&(this.dependencyGraph[r]=l.dependents.map((e=>{const n=this.formSchema.find((([,n])=>n===e));if(n){const i=n[4]||{};return{dependent:i.id||e,condition:i.condition||null}}console.warn(`Dependent field "${e}" not found in schema.`)})),this.dependencyGraph[r].push({state:null}),console.log("Graph",this.dependencyGraph[r]),this.attachInputChangeListener(r)),l.dependents&&l.dependents.forEach((e=>{const n=this.formSchema.find((([,n])=>n===e)),i=(n&&n[4]||{}).id||e,t=document.querySelector(`#${i}-block`);t&&(t.style.display="none")}))})),console.log("Dependency Graph:",this.dependencyGraph)}attachInputChangeListener(e){const n=document.getElementById(e);n&&n.addEventListener("input",(n=>{const i=n.target.value;this.handleParentFieldChange(e,i)}))}handleParentFieldChange(e,n){const i=this.dependencyGraph[e];i&&(this.dependencyGraph[e].forEach((e=>{void 0!==e.state&&(e.state=n)})),console.log(`Updated Dependency Graph for ${e}:`,this.dependencyGraph[e]),i.forEach((e=>{if(e.dependent){const i=e.dependent+"-block",t=document.getElementById(i);if(t){const s="function"==typeof e.condition?e.condition(n):n===e.condition;console.log(`Checking condition for ${i}: `,n,"==",e.condition,"Result:",s),t.style.display=s?"block":"none";t.querySelectorAll("input, select, textarea").forEach((e=>{s?e.required="true"===e.getAttribute("data-original-required"):(e.setAttribute("data-original-required",e.required),e.required=!1)}))}else console.warn(`Wrapper block with ID ${i} not found.`)}})))}registerObservers(){this.formSchema.forEach((e=>{const[n,i,t,s,l={}]=e,r=l.id||i;l.dependents&&l.dependents.forEach((e=>{if(this.dependencyGraph[r]){const n=this.formSchema.find((([,n])=>n===e));if(n){const i=n[4]?.id||e;this.dependencyGraph[r].forEach((n=>{n.dependent===e&&(n.observers||(n.observers=[]),n.observers.push(i))}))}}}))})),console.log("Observers Registered:",JSON.stringify(this.dependencyGraph,null,2))}applyTheme(e,n){const i=document.querySelector("link[formique-style]");i?fetch(i.href).then((e=>e.text())).then((i=>{const t=i.match(new RegExp(`\\.${e}-theme\\s*{([^}]*)}`,"i"));if(!t)return void console.error(`Theme rules for ${e} not found in the stylesheet.`);const s=t[1].trim(),l=document.getElementById(n);if(l){l.classList.add(`${e}-theme`,"formique");const i=document.createElement("style");i.textContent=`\n #${n} {\n ${s}\n }\n `,l.parentNode.insertBefore(i,l),console.log(`Applied ${e} theme to form container: ${n}`)}else console.error(`Form container with ID ${n} not found.`)})).catch((e=>{console.error("Error loading the stylesheet:",e)})):console.error("Stylesheet with 'formique-style' not found!")}renderFormElement(){let e="<form\n";const n=this.formParams||{};for(const[i,t]of Object.entries(n))if(null!=t)if("boolean"==typeof t)t&&(e+=` ${i}\n`);else{e+=` ${"accept_charset"===i?"accept-charset":i.replace(/_/g,"-")}="${t}"\n`}if(e+=">\n",n.laravel){e+=`<input type="hidden" name="_token" value="${document.querySelector('meta[name="csrf-token"]').getAttribute("content")}">`}return e=e.replace(/\n\s*$/,"\n"),e}renderForm(){const e=this.formSchema.map((e=>{const[n,i,t,s,l={},r]=e;return this.renderField(n,i,t,s,l,r)})).join("");this.formMarkUp+=e}renderField(e,n,i,t,s,l){const r={text:this.renderTextField,email:this.renderEmailField,number:this.renderNumberField,password:this.renderPasswordField,password:this.renderTextAreaField,tel:this.renderTelField,date:this.renderDateField,time:this.renderTimeField,"datetime-local":this.renderDateTimeField,month:this.renderMonthField,week:this.renderWeekField,url:this.renderUrlField,search:this.renderSearchField,color:this.renderColorField,checkbox:this.renderCheckboxField,radio:this.renderRadioField,file:this.renderFileField,hidden:this.renderHiddenField,image:this.renderImageField,textarea:this.renderTextAreaField,singleSelect:this.renderSingleSelectField,multipleSelect:this.renderMultipleSelectField,dynamicSingleSelect:this.renderDynamicSingleSelectField,submit:this.renderSubmitButton}[e];return r?r.call(this,e,n,i,t,s,l):(console.warn(`Unsupported field type '${e}' encountered.`),"")}renderTextField(e,n,i,t,s){const l=["required","minlength","maxlength","pattern"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=` ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=` ${e}="${i}"\n`;break;default:l.includes(e)||console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'number'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'text'.[0m`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d=s.id||n;const o=this.formSettings?.framework||!1;let c,$="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on"))if("semantq"===o){const i=n.endsWith("()")?n.slice(0,-2):n;$+=` @${e.replace(/^on/,"")}={${i}}\n`}else{$+=` ${e}="${n.endsWith("()")?n:`${n}()`}"\n`}else!0===n?$+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&($+=` ${e.replace(/_/g,"-")}="${n}"\n`);c="class"in s?s.class:this.inputClass;let p=`\n <div class="${this.divClass}" id="${d+"-block"}">\n <label for="${d}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n </label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${d}"\n class="${c}"\n ${$}\n ${r}\n ${$.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${i}"`:""} />\n </div>\n`.replace(/^\s*\n/gm,"").trim();p=p.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),this.formMarkUp+=p}renderEmailField(e,n,i,t,s){const l=["required","pattern","minlength","maxlength","multiple"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=` ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=` ${e}="${i}"\n`;break;default:l.includes(e)||console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'number'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'email'.[0m`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}"> \n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n </label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n ${c.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${i}"`:""}\n\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderNumberField(e,n,i,t,s){const l=["required","min","max","step"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=` ${e}\n`;else switch(e){case"min":case"max":case"step":r+=` ${e}="${i}"\n`;break;default:l.includes(e)||console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'number'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'number'.[0m`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}"> \n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderPasswordField(e,n,i,t,s){const l=["required","minlength","maxlength","pattern"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=` ${e}\n`;else switch(e){case"minlength":case"maxlength":case"pattern":r+=` ${e}="${i}"\n`;break;default:l.includes(e)||console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'password'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'password'.[0m`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}"> \n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderTextAreaField(e,n,i,t,s){const l=["required","minlength","maxlength","pattern"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=` ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=` ${e}="${i}"\n`;break;default:l.includes(e)||console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'number'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'text'.[0m`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d=s.id||n;const o=this.formSettings?.framework||!1;let c,$="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on"))if("semantq"===o){const i=n.endsWith("()")?n.slice(0,-2):n;$+=` @${e.replace(/^on/,"")}={${i}}\n`}else{$+=` ${e}="${n.endsWith("()")?n:`${n}()`}"\n`}else!0===n?$+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&($+=` ${e.replace(/_/g,"-")}="${n}"\n`);c="class"in s?s.class:this.inputClass;let p=`\n <div class="${this.divClass}" id="${d+"-block"}">\n <label for="${d}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n </label>\n <textarea \n name="${n}"\n ${a}\n id="${d}"\n class="${c}"\n ${$}\n ${r}\n ${$.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${i}"`:""}>\n </textarea>\n </div>\n`.replace(/^\s*\n/gm,"").trim();p=p.replace(/<textarea\s+([^>]*)>\s*<\/textarea>/,((e,n)=>`<textarea\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n></textarea>`)),this.formMarkUp+=p}renderTelField(e,n,i,t,s){const l=["required","pattern","minlength","maxlength"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=` ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=` ${e}="${i}"\n`;break;default:l.includes(e)||console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'tel'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'tel'.[0m`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}">\n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();return $=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),$}renderDateField(e,n,i,t,s){const l=["required","min","max","step","placeholder","readonly","disabled","autocomplete","spellcheck","inputmode","title"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=` ${e}\n`;else switch(e){case"min":case"max":case"step":r+=` ${e}="${i}"\n`;break;default:l.includes(e)||console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'date'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'date'.[0m`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}"> \n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderTimeField(e,n,i,t,s){const l=["required","min","max","step","readonly","disabled","autocomplete","spellcheck","inputmode","title"];let r="";t&&Object.entries(t).forEach((([i,t])=>{if(l.includes(i))if("boolean"==typeof t&&t)r+=` ${i}\n`;else switch(i){case"min":case"max":case"step":r+=` ${i}="${t}"\n`;break;default:l.includes(i)||console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}"> \n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderDateTimeField(e,n,i,t,s){const l=["required","min","max","step","readonly","disabled","autocomplete","spellcheck","inputmode","title"];let r="";t&&Object.entries(t).forEach((([i,t])=>{if(l.includes(i))if("boolean"==typeof t&&t)r+=` ${i}\n`;else switch(i){case"min":case"max":case"step":r+=` ${i}="${t}"\n`;break;default:l.includes(i)||console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}"> \n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderMonthField(e,n,i,t,s){const l=["required","min","max","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=` ${e}\n`;else switch(e){case"min":case"max":case"pattern":r+=` ${e}="${i}"\n`;break;default:l.includes(e)&&console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'month'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'month'.[0m`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}">\n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderWeekField(e,n,i,t,s){const l=["required","min","max","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=` ${e}\n`;else switch(e){case"min":case"max":case"pattern":r+=` ${e}="${i}"\n`;break;default:l.includes(e)&&console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'week'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'week'.[0m`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}">\n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderUrlField(e,n,i,t,s){const l=["required","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";t&&Object.entries(t).forEach((([i,t])=>{if(l.includes(i))if("boolean"==typeof t&&t)r+=` ${i}\n`;else if("pattern"===i)r+=` ${i}="${t}"\n`;else l.includes(i)||console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`);else console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}">\n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderSearchField(e,n,i,t,s){const l=["required","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";t&&Object.entries(t).forEach((([i,t])=>{if(l.includes(i))if("boolean"==typeof t&&t)r+=` ${i}\n`;else if("pattern"===i)r+=` ${i}="${t}"\n`;else l.includes(i)||console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`);else console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}">\n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderColorField(e,n,i,t,s){const l=["required","readonly","disabled","autocomplete","inputmode","title"];let r="";t&&Object.entries(t).forEach((([i,t])=>{l.includes(i)?"boolean"==typeof t&&t?r+=` ${i}\n`:l.includes(i)||console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`):console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`)}));let a="";if(("bind:value"===s.binding||s.binding.startsWith("::")&&n)&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}">\n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderFileField(e,n,i,t,s){const l=["required","accept","multiple","disabled","title"];let r="";t&&Object.entries(t).forEach((([i,t])=>{l.includes(i)?"boolean"==typeof t&&t?r+=` ${i}\n`:l.includes(i)||console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`):console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`)}));let a="";if("bind:value"===s.binding&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}">\n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderHiddenField(e,n,i,t,s){const l=["type","name","value","id","class","style","required","readonly","disabled","tabindex"];let r="";t&&Object.entries(t).forEach((([i,t])=>{l.includes(i)&&"boolean"==typeof t&&t?r+=` ${i}\n`:console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`)}));let a="";if("bind:value"===s.binding&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}">\n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderImageField(e,n,i,t,s){const l=["accept","required","minwidth","maxwidth","minheight","maxheight"];let r="";t&&Object.entries(t).forEach((([i,t])=>{l.includes(i)?"accept"===i?r+=`accept="${t}"\n`:["required","minwidth","maxwidth","minheight","maxheight"].includes(i)?r+=`${i}="${t}"\n`:console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`):console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`)}));let a="";("bind:value"===s.binding||s.binding.startsWith("::"))&&(a=` bind:value="${n}"`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}">\n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderImageField(e,n,i,t,s){const l=["accept","required","minwidth","maxwidth","minheight","maxheight"];let r="";t&&Object.entries(t).forEach((([i,t])=>{l.includes(i)?r+=`${i}="${t}"\n`:console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`)}));let a="";("bind:value"===s.binding||bindingSyntax.startsWith("::"))&&(a=`bind:value="${n}"\n`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}">\n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();return $=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),$}renderTextAreaField(e,n,i,t,s){const l=["required","minlength","maxlength"];let r="";t&&Object.entries(t).forEach((([i,t])=>{l.includes(i)?r+="boolean"==typeof t&&t?` ${i}\n`:` ${i}="${t}"\n`:console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d=s.id||n,o="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){o+=` ${e}="${n.endsWith("()")?n:`${n}()`}"\n`}else!0===n?o+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(o+=` ${e.replace(/_/g,"-")}="${n}"\n`);let c=s.class||this.inputClass,$=`\n <div class="${this.divClass}" id="${d+"-block"}">\n <label for="${d}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n </label>\n <textarea \n name="${n}"\n ${a}\n id="${d}"\n class="${c}"\n ${o}\n ${r}\n ${o.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${i}"`:""}>\n </textarea>\n </div>\n`.replace(/^\s*\n/gm,"").trim();$=$.replace(/<textarea\s+([^>]*)>\s*<\/textarea>/,((e,n)=>`<textarea\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n></textarea>`)),this.formMarkUp+=$}renderRadioField(e,n,i,t,s,l){const r=["required"];let a="";t&&Object.entries(t).forEach((([e,i])=>{if(r.includes(e))if("boolean"==typeof i&&i)a+=` ${e}\n`;else if("required"===e)a+=` ${e}\n`;else r.includes(e)||console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'radio'.[0m`);else console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'radio'.[0m`)}));let d="";if(s.binding)if("bind:value"===s.binding&&n)d=` bind:value="${n}"\n`;else if(s.binding.startsWith("::")&&n)d=` bind:value="${n}"\n`;else if(s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);let $=s.class||this.inputClass,p="";l&&l.length&&(p=l.map((i=>`\n <div>\n <input \n type="${e}" \n name="${n}" \n value="${i.value}"\n ${d} \n ${c}\n ${s.id,`id="${o}-${i.value}"`}\n class="${$}"\n ${a}\n />\n <label \n for="${s.id,`${o}-${i.value}`}">\n ${i.label}\n </label>\n </div>\n `)).join(""));let u=`\n <fieldset class="${this.radioGroupClass}" id="${o+"-block"}">\n <legend>\n ${i} \n ${a.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n </legend>\n ${p}\n </fieldset>\n `.replace(/^\s*\n/gm,"").trim().replace(/<input\s+([^>]*)\/>/g,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`));u=u.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=u}renderCheckboxField(e,n,i,t,s,l){const r=["required"];let a="";t&&Object.entries(t).forEach((([i,t])=>{r.includes(i)?"required"===i&&(a+=`${i}\n`):console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`)}));let d="";s.binding&&("bind:checked"===s.binding||s.binding.startsWith("::"))&&(d=` bind:checked="${n}"\n`);let o,c=s.id||n,$="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;$+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?$+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&($+=` ${e.replace(/_/g,"-")}="${n}"\n`);o="class"in s?s.class:this.inputClass;let p="";Array.isArray(l)&&(p=l.map((e=>{const i=`${c}-${e.value}`;return`\n <div>\n <input \n type="checkbox" \n name="${n}" \n value="${e.value}"${d} ${$}\n ${s.id,`id="${i}"`}\n class="${o}"\n />\n <label \n for="${i}">\n ${e.label}\n </label>\n </div>\n `})).join(""));let u=`\n <fieldset class="${this.checkboxGroupClass}" id="${c+"-block"}">\n <legend>\n ${i} ${a.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n </legend>\n ${p}\n </fieldset>\n `.replace(/^\s*\n/gm,"").trim();u=u.replace(/<input\s+([^>]*)\/>/g,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),u=u.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=u}renderDynamicSingleSelectField(e,n,i,t,s,l){const r=l.flat().map((e=>{const n=e.options.some((e=>!0===e.selected));return{value:e.id,label:e.label,...n&&{selected:!0}}})),a=l;this.renderSingleSelectField(e,n,i,t,s,r,a,"dynamicSingleSelect")}renderSingleSelectField(e,n,i,t,s,l,r,a){const d=["required"];let o="";t&&Object.entries(t).forEach((([i,t])=>{d.includes(i)?"required"===i&&(o+=`${i} `):console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`)}));let c="";s.binding&&"string"==typeof s.binding&&s.binding.startsWith("::")&&(c=` bind:value="${n}" `);let $=s.id||n,p="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;p+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?p+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(p+=` ${e.replace(/_/g,"-")}="${n}"\n`);let u="";Array.isArray(l)&&(u+='\n <option value="">Choose an option</option>\n ',u+=l.map((e=>{const n=e.selected?" selected":"";return`\n <option value="${e.value}"${n}>${e.label}</option>\n `})).join(""));let m=s.class||this.inputClass;const f="dynamicSingleSelect"===a&&r?' onchange="handleDynamicSingleSelect(this.value,id)"':"";let h,b;if("dynamicSingleSelect"===a&&r)if(i.includes("-")){const[e]=i.split("-");h=e,b=i}else h=i,b=i;else h=i;let g=`\n <fieldset class="${this.selectGroupClass}" id="${$+"-block"}">\n <legend>${h} \n ${o.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n </legend>\n <label for="${$}"> Select ${h} \n <select name="${n}"\n ${c}\n \n id="${$}"\n class="${m}"\n ${p}\n ${o}\n ${f} \n >\n ${u}\n </select>\n </fieldset>\n`.replace(/^\s*\n/gm,"").trim().replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g,((e,n,i)=>`<select\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n>\n${i.trim()}\n</select>`));if(g=g.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=g,a&&"dynamicSingleSelect"===a&&r){const e=document.getElementById(this.formContainerId);let i=s.id||n;if(e){const n=document.createElement("script");n.textContent='\n window.handleDynamicSingleSelect = function(category, fieldsetid) {\n //console.log("HERE", fieldsetid);\n\n // Hide all subcategory fields\n document.querySelectorAll(`[class*="${fieldsetid}"]`).forEach(div => {\n div.style.display = "none";\n });\n\n // Show the selected category\n const selectedCategoryFieldset = document.getElementById(category + \'-options\');\n if (selectedCategoryFieldset) {\n selectedCategoryFieldset.style.display = "block";\n }\n }\n',e.appendChild(n)}else console.error(`Target div with id "${this.formContainerId}" not found.`);r.forEach((e=>{const{id:n,label:t,options:s}=e,l=s.map((e=>{const n=e.selected?" selected":"";return`\n <option value="${e.value}"${n}>${e.label}</option>\n `})).join("");let r,a;console.log("Label:",b),r=b.includes("-")?b.split("-")?.[1]+" Options":"options",a="options"!==r?b.split("-")?.[1]+" Option":r;let d=`\n <fieldset class="${this.selectGroupClass} ${i}" id="${n}-options" style="display: none;">\n <legend> ${t} ${r} ${this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n </legend>\n <label for="${n}"> Select ${t} ${a} \n </label>\n <select name="${n}"\n ${c}\n \n id="${n+"-block"}"\n class="${m}"\n ${p}\n ${o}\n >\n <option value="">Choose an option</option>\n ${l}\n </select>\n </fieldset>\n `.replace(/^\s*\n/gm,"").trim();d=d.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g,((e,n,i)=>`<select\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n>\n${i.trim()}\n</select>`)),d=d.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=d}))}}renderMultipleSelectField(e,n,i,t,s,l){const r=["required","minlength","maxlength"];let a="";t&&Object.entries(t).forEach((([i,t])=>{r.includes(i)?"required"===i?a+=`${i} `:"minlength"===i?a+=`minlength="${t}" `:"maxlength"===i&&(a+=`maxlength="${t}" `):console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`)}));let d="";s.binding&&"string"==typeof s.binding&&s.binding.startsWith("::")&&(d=` bind:value="${n}" `);let o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);let $="";Array.isArray(l)&&($=l.map((e=>{const n=e.selected?" selected":"";return`\n <option value="${e.value}"${n}>${e.label}</option>\n `})).join(""));let p;p="class"in s?s.class:this.inputClass;let u=`\n <fieldset class="${this.selectGroupClass}" id="${o+"-block"}">\n <label for="${o}">${i}\n ${a.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <select name="${n}"\n ${d}\n \n id="${o}"\n class="${p}"\n ${c}\n ${a}\n multiple\n >\n ${$}\n </select>\n </fieldset>\n `.replace(/^\s*\n/gm,"").trim();u=u.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g,((e,n,i)=>`<select\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n>\n${i.trim()}\n</select>`)),u=u.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=u}renderSubmitButton(e,n,i,t,s){const l=s.id||n;let r,a="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){a+=` ${e}="${n.endsWith("()")?n.slice(0,-2):n}"`}else!0===n?a+=` ${e.replace(/_/g,"-")}`:!1!==n&&(a+=` ${e.replace(/_/g,"-")}="${n}"`);r="class"in s?s.class:this.submitButtonClass;let d=`\n <input type="${e}"\n id="${l+"-block"}"\n class="${r}"\n value="${i}"\n ${a}\n />\n `.replace(/^\s*\n/gm,"").trim();this.formMarkUp+=d}renderFormHTML(){this.formMarkUp+="</form>";const e=document.getElementById(this.formContainerId);e?e.innerHTML=this.formMarkUp:console.error(`Error: formContainer not found. Please ensure an element with id ${this.formContainerId} exists in the HTML.`)}}}));
|
|
1
|
+
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e="undefined"!=typeof globalThis?globalThis:e||self).Formique=n()}(this,(function(){"use strict";class e{renderField(e,n,t,i,s,l){throw new Error("Method renderField must be implemented")}}return class extends e{constructor(e,n={},t={}){super(),this.formSchema=e,this.divClass="input-block",this.inputClass="form-input",this.radioGroupClass="radio-group",this.checkboxGroupClass="checkbox-group",this.selectGroupClass="form-select",this.submitButtonClass="form-submit-btn",this.formParams=n,this.formContainerId=t.formContainerId||"formique",this.formAction=n.action||"https://httpbin.org/post",this.method=n.method.toUpperCase()||"POST",this.formMarkUp="",this.dependencyGraph={},this.themes=["dark","light","pink","light","indigo","dark-blue","light-blue","dark-orange","green","purple","midnight-blush"],document.addEventListener("DOMContentLoaded",(()=>{if(this.renderFormHTML(),this.initDependencyGraph(),this.registerObservers(),this.formSettings.theme&&this.themes.includes(this.formSettings.theme)){let e=this.formSettings.theme;this.applyTheme(e,this.formContainerId)}else this.applyTheme("dark",this.formContainerId);document.getElementById(`${this.formParams.id}`).addEventListener("submit",(e=>{this.formSettings.submitOnPage&&(e.preventDefault(),this.handleOnPageFormSubmission(this.formParams.id))}))})),this.formSettings={requiredFieldIndicator:!0,placeholders:!0,asteriskHtml:'<span aria-hidden="true" style="color: red;">*</span>',...t},Object.keys(this.formParams).length>0&&(this.formMarkUp+=this.renderFormElement()),this.renderForm()}initDependencyGraph(){this.dependencyGraph={},this.formSchema.forEach((e=>{const[n,t,i,s,l={}]=e,r=l.id||t;l.dependents&&(this.dependencyGraph[r]=l.dependents.map((e=>{const n=this.formSchema.find((([,n])=>n===e));if(n){const t=n[4]||{};return{dependent:t.id||e,condition:t.condition||null}}console.warn(`Dependent field "${e}" not found in schema.`)})),this.dependencyGraph[r].push({state:null}),this.attachInputChangeListener(r)),l.dependents&&l.dependents.forEach((e=>{const n=this.formSchema.find((([,n])=>n===e)),t=(n&&n[4]||{}).id||e,i=document.querySelector(`#${t}-block`);i&&(i.style.display="none")}))}))}attachInputChangeListener(e){const n=document.getElementById(e);n&&n.addEventListener("input",(n=>{const t=n.target.value;this.handleParentFieldChange(e,t)}))}handleParentFieldChange(e,n){const t=this.dependencyGraph[e];t&&(this.dependencyGraph[e].forEach((e=>{void 0!==e.state&&(e.state=n)})),t.forEach((e=>{if(e.dependent){const t=e.dependent+"-block",i=document.getElementById(t);if(i){const t="function"==typeof e.condition?e.condition(n):n===e.condition;i.style.display=t?"block":"none";i.querySelectorAll("input, select, textarea").forEach((e=>{t?e.required="true"===e.getAttribute("data-original-required"):(e.setAttribute("data-original-required",e.required),e.required=!1)}))}else console.warn(`Wrapper block with ID ${t} not found.`)}})))}registerObservers(){this.formSchema.forEach((e=>{const[n,t,i,s,l={}]=e,r=l.id||t;l.dependents&&l.dependents.forEach((e=>{if(this.dependencyGraph[r]){const n=this.formSchema.find((([,n])=>n===e));if(n){const t=n[4]?.id||e;this.dependencyGraph[r].forEach((n=>{n.dependent===e&&(n.observers||(n.observers=[]),n.observers.push(t))}))}}}))}))}applyTheme(e,n){const t=document.querySelector("link[formique-style]");t?fetch(t.href).then((e=>e.text())).then((t=>{const i=t.match(new RegExp(`\\.${e}-theme\\s*{([^}]*)}`,"i"));if(!i)return void console.error(`Theme rules for ${e} not found in the stylesheet.`);const s=i[1].trim(),l=document.getElementById(n);if(l){l.classList.add(`${e}-theme`,"formique");const t=document.createElement("style");t.textContent=`\n #${n} {\n ${s}\n }\n `,l.parentNode.insertBefore(t,l)}else console.error(`Form container with ID ${n} not found.`)})).catch((e=>{console.error("Error loading the stylesheet:",e)})):console.error("Stylesheet with 'formique-style' not found!")}renderFormElement(){let e="<form\n";const n=this.formParams||{};for(const[t,i]of Object.entries(n))if(null!=i)if("boolean"==typeof i)i&&(e+=` ${t}\n`);else{e+=` ${"accept_charset"===t?"accept-charset":t.replace(/_/g,"-")}="${i}"\n`}if(e+=">\n",n.laravel){e+=`<input type="hidden" name="_token" value="${document.querySelector('meta[name="csrf-token"]').getAttribute("content")}">`}return e=e.replace(/\n\s*$/,"\n"),e}renderForm(){const e=this.formSchema.map((e=>{const[n,t,i,s,l={},r]=e;return this.renderField(n,t,i,s,l,r)})).join("");this.formMarkUp+=e}renderField(e,n,t,i,s,l){const r={text:this.renderTextField,email:this.renderEmailField,number:this.renderNumberField,password:this.renderPasswordField,password:this.renderTextAreaField,tel:this.renderTelField,date:this.renderDateField,time:this.renderTimeField,"datetime-local":this.renderDateTimeField,month:this.renderMonthField,week:this.renderWeekField,url:this.renderUrlField,search:this.renderSearchField,color:this.renderColorField,checkbox:this.renderCheckboxField,radio:this.renderRadioField,file:this.renderFileField,hidden:this.renderHiddenField,image:this.renderImageField,textarea:this.renderTextAreaField,singleSelect:this.renderSingleSelectField,multipleSelect:this.renderMultipleSelectField,dynamicSingleSelect:this.renderDynamicSingleSelectField,submit:this.renderSubmitButton}[e];return r?r.call(this,e,n,t,i,s,l):(console.warn(`Unsupported field type '${e}' encountered.`),"")}handleOnPageFormSubmission(e){const n=document.getElementById(e);if(n){const e=new FormData(n);fetch(this.formAction,{method:this.method,body:e}).then((e=>e.json())).then((e=>{console.log("Success:",e);const n=document.getElementById(this.formContainerId);if(n){const e=document.createElement("div");e.classList.add("success-message","message-container"),e.innerHTML=this.formSettings.successMessage||"Your details have been successfully submitted!",n.innerHTML="",n.appendChild(e)}})).catch((e=>{console.error("Error:",e);const n=document.getElementById(this.formContainerId);if(n){let t=n.querySelector(".error-message");t&&t.remove();const i=document.createElement("div");i.classList.add("error-message","message-container");let s=this.formSettings.errorMessage||"An error occurred while submitting the form. Please try again.";s=`${s}<br/>Details: ${e.message}`,i.innerHTML=s,n.appendChild(i)}}))}}renderTextField(e,n,t,i,s){const l=["required","minlength","maxlength","pattern"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=` ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=` ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'number'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'text'.[0m`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d=s.id||n;const o=this.formSettings?.framework||!1;let c,$="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on"))if("semantq"===o){const t=n.endsWith("()")?n.slice(0,-2):n;$+=` @${e.replace(/^on/,"")}={${t}}\n`}else{$+=` ${e}="${n.endsWith("()")?n:`${n}()`}"\n`}else!0===n?$+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&($+=` ${e.replace(/_/g,"-")}="${n}"\n`);c="class"in s?s.class:this.inputClass;let p=`\n <div class="${this.divClass}" id="${d+"-block"}">\n <label for="${d}">${t}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n </label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${d}"\n class="${c}"\n ${$}\n ${r}\n ${$.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${t}"`:""} />\n </div>\n`.replace(/^\s*\n/gm,"").trim();p=p.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),this.formMarkUp+=p}renderEmailField(e,n,t,i,s){const l=["required","pattern","minlength","maxlength","multiple"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=` ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=` ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'number'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'email'.[0m`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}"> \n <label for="${o}">${t}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n </label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n ${c.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${t}"`:""}\n\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderNumberField(e,n,t,i,s){const l=["required","min","max","step"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=` ${e}\n`;else switch(e){case"min":case"max":case"step":r+=` ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'number'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'number'.[0m`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}"> \n <label for="${o}">${t}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderPasswordField(e,n,t,i,s){const l=["required","minlength","maxlength","pattern"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=` ${e}\n`;else switch(e){case"minlength":case"maxlength":case"pattern":r+=` ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'password'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'password'.[0m`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}"> \n <label for="${o}">${t}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderTextAreaField(e,n,t,i,s){const l=["required","minlength","maxlength","pattern"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=` ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=` ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'number'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'text'.[0m`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d=s.id||n;const o=this.formSettings?.framework||!1;let c,$="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on"))if("semantq"===o){const t=n.endsWith("()")?n.slice(0,-2):n;$+=` @${e.replace(/^on/,"")}={${t}}\n`}else{$+=` ${e}="${n.endsWith("()")?n:`${n}()`}"\n`}else!0===n?$+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&($+=` ${e.replace(/_/g,"-")}="${n}"\n`);c="class"in s?s.class:this.inputClass;let p=`\n <div class="${this.divClass}" id="${d+"-block"}">\n <label for="${d}">${t}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n </label>\n <textarea \n name="${n}"\n ${a}\n id="${d}"\n class="${c}"\n ${$}\n ${r}\n ${$.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${t}"`:""}>\n </textarea>\n </div>\n`.replace(/^\s*\n/gm,"").trim();p=p.replace(/<textarea\s+([^>]*)>\s*<\/textarea>/,((e,n)=>`<textarea\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n></textarea>`)),this.formMarkUp+=p}renderTelField(e,n,t,i,s){const l=["required","pattern","minlength","maxlength"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=` ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=` ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'tel'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'tel'.[0m`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}">\n <label for="${o}">${t}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();return $=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),$}renderDateField(e,n,t,i,s){const l=["required","min","max","step","placeholder","readonly","disabled","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=` ${e}\n`;else switch(e){case"min":case"max":case"step":r+=` ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'date'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'date'.[0m`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}"> \n <label for="${o}">${t}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderTimeField(e,n,t,i,s){const l=["required","min","max","step","readonly","disabled","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([t,i])=>{if(l.includes(t))if("boolean"==typeof i&&i)r+=` ${t}\n`;else switch(t){case"min":case"max":case"step":r+=` ${t}="${i}"\n`;break;default:l.includes(t)||console.warn(`[31mUnsupported validation attribute '${t}' for field '${n}' of type '${e}'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${t}' for field '${n}' of type '${e}'.[0m`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}"> \n <label for="${o}">${t}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderDateTimeField(e,n,t,i,s){const l=["required","min","max","step","readonly","disabled","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([t,i])=>{if(l.includes(t))if("boolean"==typeof i&&i)r+=` ${t}\n`;else switch(t){case"min":case"max":case"step":r+=` ${t}="${i}"\n`;break;default:l.includes(t)||console.warn(`[31mUnsupported validation attribute '${t}' for field '${n}' of type '${e}'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${t}' for field '${n}' of type '${e}'.[0m`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}"> \n <label for="${o}">${t}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderMonthField(e,n,t,i,s){const l=["required","min","max","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=` ${e}\n`;else switch(e){case"min":case"max":case"pattern":r+=` ${e}="${t}"\n`;break;default:l.includes(e)&&console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'month'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'month'.[0m`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}">\n <label for="${o}">${t}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderWeekField(e,n,t,i,s){const l=["required","min","max","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=` ${e}\n`;else switch(e){case"min":case"max":case"pattern":r+=` ${e}="${t}"\n`;break;default:l.includes(e)&&console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'week'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'week'.[0m`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}">\n <label for="${o}">${t}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderUrlField(e,n,t,i,s){const l=["required","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([t,i])=>{if(l.includes(t))if("boolean"==typeof i&&i)r+=` ${t}\n`;else if("pattern"===t)r+=` ${t}="${i}"\n`;else l.includes(t)||console.warn(`[31mUnsupported validation attribute '${t}' for field '${n}' of type '${e}'.[0m`);else console.warn(`[31mUnsupported validation attribute '${t}' for field '${n}' of type '${e}'.[0m`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}">\n <label for="${o}">${t}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderSearchField(e,n,t,i,s){const l=["required","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([t,i])=>{if(l.includes(t))if("boolean"==typeof i&&i)r+=` ${t}\n`;else if("pattern"===t)r+=` ${t}="${i}"\n`;else l.includes(t)||console.warn(`[31mUnsupported validation attribute '${t}' for field '${n}' of type '${e}'.[0m`);else console.warn(`[31mUnsupported validation attribute '${t}' for field '${n}' of type '${e}'.[0m`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}">\n <label for="${o}">${t}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderColorField(e,n,t,i,s){const l=["required","readonly","disabled","autocomplete","inputmode","title"];let r="";i&&Object.entries(i).forEach((([t,i])=>{l.includes(t)?"boolean"==typeof i&&i?r+=` ${t}\n`:l.includes(t)||console.warn(`[31mUnsupported validation attribute '${t}' for field '${n}' of type '${e}'.[0m`):console.warn(`[31mUnsupported validation attribute '${t}' for field '${n}' of type '${e}'.[0m`)}));let a="";if(("bind:value"===s.binding||s.binding.startsWith("::")&&n)&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}">\n <label for="${o}">${t}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderFileField(e,n,t,i,s){const l=["required","accept","multiple","disabled","title"];let r="";i&&Object.entries(i).forEach((([t,i])=>{l.includes(t)?"boolean"==typeof i&&i?r+=` ${t}\n`:l.includes(t)||console.warn(`[31mUnsupported validation attribute '${t}' for field '${n}' of type '${e}'.[0m`):console.warn(`[31mUnsupported validation attribute '${t}' for field '${n}' of type '${e}'.[0m`)}));let a="";if("bind:value"===s.binding&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}">\n <label for="${o}">${t}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderHiddenField(e,n,t,i,s){const l=["type","name","value","id","class","style","required","readonly","disabled","tabindex"];let r="";i&&Object.entries(i).forEach((([t,i])=>{l.includes(t)&&"boolean"==typeof i&&i?r+=` ${t}\n`:console.warn(`[31mUnsupported validation attribute '${t}' for field '${n}' of type '${e}'.[0m`)}));let a="";if("bind:value"===s.binding&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}">\n <label for="${o}">${t}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderImageField(e,n,t,i,s){const l=["accept","required","minwidth","maxwidth","minheight","maxheight"];let r="";i&&Object.entries(i).forEach((([t,i])=>{l.includes(t)?"accept"===t?r+=`accept="${i}"\n`:["required","minwidth","maxwidth","minheight","maxheight"].includes(t)?r+=`${t}="${i}"\n`:console.warn(`[31mUnsupported validation attribute '${t}' for field '${n}' of type '${e}'.[0m`):console.warn(`[31mUnsupported validation attribute '${t}' for field '${n}' of type '${e}'.[0m`)}));let a="";("bind:value"===s.binding||s.binding.startsWith("::"))&&(a=` bind:value="${n}"`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}">\n <label for="${o}">${t}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderImageField(e,n,t,i,s){const l=["accept","required","minwidth","maxwidth","minheight","maxheight"];let r="";i&&Object.entries(i).forEach((([t,i])=>{l.includes(t)?r+=`${t}="${i}"\n`:console.warn(`[31mUnsupported validation attribute '${t}' for field '${n}' of type '${e}'.[0m`)}));let a="";("bind:value"===s.binding||bindingSyntax.startsWith("::"))&&(a=`bind:value="${n}"\n`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}">\n <label for="${o}">${t}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();return $=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),$}renderTextAreaField(e,n,t,i,s){const l=["required","minlength","maxlength"];let r="";i&&Object.entries(i).forEach((([t,i])=>{l.includes(t)?r+="boolean"==typeof i&&i?` ${t}\n`:` ${t}="${i}"\n`:console.warn(`[31mUnsupported validation attribute '${t}' for field '${n}' of type '${e}'.[0m`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d=s.id||n,o="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){o+=` ${e}="${n.endsWith("()")?n:`${n}()`}"\n`}else!0===n?o+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(o+=` ${e.replace(/_/g,"-")}="${n}"\n`);let c=s.class||this.inputClass,$=`\n <div class="${this.divClass}" id="${d+"-block"}">\n <label for="${d}">${t}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n </label>\n <textarea \n name="${n}"\n ${a}\n id="${d}"\n class="${c}"\n ${o}\n ${r}\n ${o.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${t}"`:""}>\n </textarea>\n </div>\n`.replace(/^\s*\n/gm,"").trim();$=$.replace(/<textarea\s+([^>]*)>\s*<\/textarea>/,((e,n)=>`<textarea\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n></textarea>`)),this.formMarkUp+=$}renderRadioField(e,n,t,i,s,l){const r=["required"];let a="";i&&Object.entries(i).forEach((([e,t])=>{if(r.includes(e))if("boolean"==typeof t&&t)a+=` ${e}\n`;else if("required"===e)a+=` ${e}\n`;else r.includes(e)||console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'radio'.[0m`);else console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'radio'.[0m`)}));let d="";if(s.binding)if("bind:value"===s.binding&&n)d=` bind:value="${n}"\n`;else if(s.binding.startsWith("::")&&n)d=` bind:value="${n}"\n`;else if(s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);let $=s.class||this.inputClass,p="";l&&l.length&&(p=l.map((t=>`\n <div>\n <input \n type="${e}" \n name="${n}" \n value="${t.value}"\n ${d} \n ${c}\n ${s.id,`id="${o}-${t.value}"`}\n class="${$}"\n ${a}\n />\n <label \n for="${s.id,`${o}-${t.value}`}">\n ${t.label}\n </label>\n </div>\n `)).join(""));let m=`\n <fieldset class="${this.radioGroupClass}" id="${o+"-block"}">\n <legend>\n ${t} \n ${a.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n </legend>\n ${p}\n </fieldset>\n `.replace(/^\s*\n/gm,"").trim().replace(/<input\s+([^>]*)\/>/g,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`));m=m.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=m}renderCheckboxField(e,n,t,i,s,l){const r=["required"];let a="";i&&Object.entries(i).forEach((([t,i])=>{r.includes(t)?"required"===t&&(a+=`${t}\n`):console.warn(`[31mUnsupported validation attribute '${t}' for field '${n}' of type '${e}'.[0m`)}));let d="";s.binding&&("bind:checked"===s.binding||s.binding.startsWith("::"))&&(d=` bind:checked="${n}"\n`);let o,c=s.id||n,$="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;$+=` @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?$+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&($+=` ${e.replace(/_/g,"-")}="${n}"\n`);o="class"in s?s.class:this.inputClass;let p="";Array.isArray(l)&&(p=l.map((e=>{const t=`${c}-${e.value}`;return`\n <div>\n <input \n type="checkbox" \n name="${n}" \n value="${e.value}"${d} ${$}\n ${s.id,`id="${t}"`}\n class="${o}"\n />\n <label \n for="${t}">\n ${e.label}\n </label>\n </div>\n `})).join(""));let m=`\n <fieldset class="${this.checkboxGroupClass}" id="${c+"-block"}">\n <legend>\n ${t} ${a.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n </legend>\n ${p}\n </fieldset>\n `.replace(/^\s*\n/gm,"").trim();m=m.replace(/<input\s+([^>]*)\/>/g,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),m=m.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=m}renderDynamicSingleSelectField(e,n,t,i,s,l){const r=l.flat().map((e=>{const n=e.options.some((e=>!0===e.selected));return{value:e.id,label:e.label,...n&&{selected:!0}}})),a=l;this.renderSingleSelectField(e,n,t,i,s,r,a,"dynamicSingleSelect")}renderSingleSelectField(e,n,t,i,s,l,r,a){const d=["required"];let o="";i&&Object.entries(i).forEach((([t,i])=>{d.includes(t)?"required"===t&&(o+=`${t} `):console.warn(`[31mUnsupported validation attribute '${t}' for field '${n}' of type '${e}'.[0m`)}));let c="";s.binding&&"string"==typeof s.binding&&s.binding.startsWith("::")&&(c=` bind:value="${n}" `);let $=s.id||n,p="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;p+=` @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?p+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(p+=` ${e.replace(/_/g,"-")}="${n}"\n`);let m="";Array.isArray(l)&&(m+='\n <option value="">Choose an option</option>\n ',m+=l.map((e=>{const n=e.selected?" selected":"";return`\n <option value="${e.value}"${n}>${e.label}</option>\n `})).join(""));let u=s.class||this.inputClass;const f="dynamicSingleSelect"===a&&r?' onchange="handleDynamicSingleSelect(this.value,id)"':"";let h,b;if("dynamicSingleSelect"===a&&r)if(t.includes("-")){const[e]=t.split("-");h=e,b=t}else h=t,b=t;else h=t;let g=`\n <fieldset class="${this.selectGroupClass}" id="${$+"-block"}">\n <legend>${h} \n ${o.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n </legend>\n <label for="${$}"> Select ${h} \n <select name="${n}"\n ${c}\n \n id="${$}"\n class="${u}"\n ${p}\n ${o}\n ${f} \n >\n ${m}\n </select>\n </fieldset>\n`.replace(/^\s*\n/gm,"").trim().replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g,((e,n,t)=>`<select\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n>\n${t.trim()}\n</select>`));if(g=g.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=g,a&&"dynamicSingleSelect"===a&&r){const e=document.getElementById(this.formContainerId);let t=s.id||n;if(e){const n=document.createElement("script");n.textContent='\n window.handleDynamicSingleSelect = function(category, fieldsetid) {\n //console.log("HERE", fieldsetid);\n\n // Hide all subcategory fields\n document.querySelectorAll(`[class*="${fieldsetid}"]`).forEach(div => {\n div.style.display = "none";\n });\n\n // Show the selected category\n const selectedCategoryFieldset = document.getElementById(category + \'-options\');\n if (selectedCategoryFieldset) {\n selectedCategoryFieldset.style.display = "block";\n }\n }\n',e.appendChild(n)}else console.error(`Target div with id "${this.formContainerId}" not found.`);r.forEach((e=>{const{id:n,label:i,options:s}=e,l=s.map((e=>{const n=e.selected?" selected":"";return`\n <option value="${e.value}"${n}>${e.label}</option>\n `})).join("");let r,a;console.log("Label:",b),r=b.includes("-")?b.split("-")?.[1]+" Options":"options",a="options"!==r?b.split("-")?.[1]+" Option":r;let d=`\n <fieldset class="${this.selectGroupClass} ${t}" id="${n}-options" style="display: none;">\n <legend> ${i} ${r} ${this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n </legend>\n <label for="${n}"> Select ${i} ${a} \n </label>\n <select name="${n}"\n ${c}\n \n id="${n+"-block"}"\n class="${u}"\n ${p}\n ${o}\n >\n <option value="">Choose an option</option>\n ${l}\n </select>\n </fieldset>\n `.replace(/^\s*\n/gm,"").trim();d=d.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g,((e,n,t)=>`<select\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n>\n${t.trim()}\n</select>`)),d=d.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=d}))}}renderMultipleSelectField(e,n,t,i,s,l){const r=["required","minlength","maxlength"];let a="";i&&Object.entries(i).forEach((([t,i])=>{r.includes(t)?"required"===t?a+=`${t} `:"minlength"===t?a+=`minlength="${i}" `:"maxlength"===t&&(a+=`maxlength="${i}" `):console.warn(`[31mUnsupported validation attribute '${t}' for field '${n}' of type '${e}'.[0m`)}));let d="";s.binding&&"string"==typeof s.binding&&s.binding.startsWith("::")&&(d=` bind:value="${n}" `);let o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);let $="";Array.isArray(l)&&($=l.map((e=>{const n=e.selected?" selected":"";return`\n <option value="${e.value}"${n}>${e.label}</option>\n `})).join(""));let p;p="class"in s?s.class:this.inputClass;let m=`\n <fieldset class="${this.selectGroupClass}" id="${o+"-block"}">\n <label for="${o}">${t}\n ${a.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <select name="${n}"\n ${d}\n \n id="${o}"\n class="${p}"\n ${c}\n ${a}\n multiple\n >\n ${$}\n </select>\n </fieldset>\n `.replace(/^\s*\n/gm,"").trim();m=m.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g,((e,n,t)=>`<select\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n>\n${t.trim()}\n</select>`)),m=m.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=m}renderSubmitButton(e,n,t,i,s){const l=s.id||n;let r,a="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){a+=` ${e}="${n.endsWith("()")?n.slice(0,-2):n}"`}else!0===n?a+=` ${e.replace(/_/g,"-")}`:!1!==n&&(a+=` ${e.replace(/_/g,"-")}="${n}"`);r="class"in s?s.class:this.submitButtonClass;let d=`\n <input type="${e}"\n id="${l+"-block"}"\n class="${r}"\n value="${t}"\n ${a}\n />\n `.replace(/^\s*\n/gm,"").trim();this.formMarkUp+=d}renderFormHTML(){this.formMarkUp+="</form>";const e=document.getElementById(this.formContainerId);e?e.innerHTML=this.formMarkUp:console.error(`Error: formContainer not found. Please ensure an element with id ${this.formContainerId} exists in the HTML.`)}}}));
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "formique",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.7",
|
|
4
4
|
"description": "Formique Declarative Form Syntax JavaScript Library",
|
|
5
|
-
"main": "formique.
|
|
5
|
+
"main": "formique.umd.js",
|
|
6
6
|
"module": "formique.mjs",
|
|
7
7
|
"browser": "formique.umd.js",
|
|
8
8
|
"exports": {
|
package/formique.cjs.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";class e{renderField(e,n,i,t,s,l){throw new Error("Method renderField must be implemented")}}module.exports=class extends e{constructor(e,n={},i={}){super(),this.formSchema=e,this.divClass="input-block",this.inputClass="form-input",this.radioGroupClass="radio-group",this.checkboxGroupClass="checkbox-group",this.selectGroupClass="form-select",this.submitButtonClass="form-submit-btn",this.formParams=n,this.formContainerId=i.formContainerId||"formique",this.formMarkUp="",this.dependencyGraph={},this.themes=["dark","light","pink","light","indigo","dark-blue","dark-orange","green","purple","midnight-blush"],document.addEventListener("DOMContentLoaded",(()=>{if(this.renderFormHTML(),this.initDependencyGraph(),this.registerObservers(),this.formSettings.theme&&this.themes.includes(this.formSettings.theme)){let e=this.formSettings.theme;this.applyTheme(e,this.formContainerId)}else this.applyTheme("dark",this.formContainerId)})),this.formSettings={requiredFieldIndicator:!0,placeholders:!0,asteriskHtml:'<span aria-hidden="true" style="color: red;">*</span>',...i},Object.keys(this.formParams).length>0&&(this.formMarkUp+=this.renderFormElement()),this.renderForm()}initDependencyGraph(){this.dependencyGraph={},this.formSchema.forEach((e=>{const[n,i,t,s,l={}]=e,r=l.id||i;l.dependents&&(this.dependencyGraph[r]=l.dependents.map((e=>{const n=this.formSchema.find((([,n])=>n===e));if(n){const i=n[4]||{};return{dependent:i.id||e,condition:i.condition||null}}console.warn(`Dependent field "${e}" not found in schema.`)})),this.dependencyGraph[r].push({state:null}),console.log("Graph",this.dependencyGraph[r]),this.attachInputChangeListener(r)),l.dependents&&l.dependents.forEach((e=>{const n=this.formSchema.find((([,n])=>n===e)),i=(n&&n[4]||{}).id||e,t=document.querySelector(`#${i}-block`);t&&(t.style.display="none")}))})),console.log("Dependency Graph:",this.dependencyGraph)}attachInputChangeListener(e){const n=document.getElementById(e);n&&n.addEventListener("input",(n=>{const i=n.target.value;this.handleParentFieldChange(e,i)}))}handleParentFieldChange(e,n){const i=this.dependencyGraph[e];i&&(this.dependencyGraph[e].forEach((e=>{void 0!==e.state&&(e.state=n)})),console.log(`Updated Dependency Graph for ${e}:`,this.dependencyGraph[e]),i.forEach((e=>{if(e.dependent){const i=e.dependent+"-block",t=document.getElementById(i);if(t){const s="function"==typeof e.condition?e.condition(n):n===e.condition;console.log(`Checking condition for ${i}: `,n,"==",e.condition,"Result:",s),t.style.display=s?"block":"none";t.querySelectorAll("input, select, textarea").forEach((e=>{s?e.required="true"===e.getAttribute("data-original-required"):(e.setAttribute("data-original-required",e.required),e.required=!1)}))}else console.warn(`Wrapper block with ID ${i} not found.`)}})))}registerObservers(){this.formSchema.forEach((e=>{const[n,i,t,s,l={}]=e,r=l.id||i;l.dependents&&l.dependents.forEach((e=>{if(this.dependencyGraph[r]){const n=this.formSchema.find((([,n])=>n===e));if(n){const i=n[4]?.id||e;this.dependencyGraph[r].forEach((n=>{n.dependent===e&&(n.observers||(n.observers=[]),n.observers.push(i))}))}}}))})),console.log("Observers Registered:",JSON.stringify(this.dependencyGraph,null,2))}applyTheme(e,n){const i=document.querySelector("link[formique-style]");i?fetch(i.href).then((e=>e.text())).then((i=>{const t=i.match(new RegExp(`\\.${e}-theme\\s*{([^}]*)}`,"i"));if(!t)return void console.error(`Theme rules for ${e} not found in the stylesheet.`);const s=t[1].trim(),l=document.getElementById(n);if(l){l.classList.add(`${e}-theme`,"formique");const i=document.createElement("style");i.textContent=`\n #${n} {\n ${s}\n }\n `,l.parentNode.insertBefore(i,l),console.log(`Applied ${e} theme to form container: ${n}`)}else console.error(`Form container with ID ${n} not found.`)})).catch((e=>{console.error("Error loading the stylesheet:",e)})):console.error("Stylesheet with 'formique-style' not found!")}renderFormElement(){let e="<form\n";const n=this.formParams||{};for(const[i,t]of Object.entries(n))if(null!=t)if("boolean"==typeof t)t&&(e+=` ${i}\n`);else{e+=` ${"accept_charset"===i?"accept-charset":i.replace(/_/g,"-")}="${t}"\n`}if(e+=">\n",n.laravel){e+=`<input type="hidden" name="_token" value="${document.querySelector('meta[name="csrf-token"]').getAttribute("content")}">`}return e=e.replace(/\n\s*$/,"\n"),e}renderForm(){const e=this.formSchema.map((e=>{const[n,i,t,s,l={},r]=e;return this.renderField(n,i,t,s,l,r)})).join("");this.formMarkUp+=e}renderField(e,n,i,t,s,l){const r={text:this.renderTextField,email:this.renderEmailField,number:this.renderNumberField,password:this.renderPasswordField,password:this.renderTextAreaField,tel:this.renderTelField,date:this.renderDateField,time:this.renderTimeField,"datetime-local":this.renderDateTimeField,month:this.renderMonthField,week:this.renderWeekField,url:this.renderUrlField,search:this.renderSearchField,color:this.renderColorField,checkbox:this.renderCheckboxField,radio:this.renderRadioField,file:this.renderFileField,hidden:this.renderHiddenField,image:this.renderImageField,textarea:this.renderTextAreaField,singleSelect:this.renderSingleSelectField,multipleSelect:this.renderMultipleSelectField,dynamicSingleSelect:this.renderDynamicSingleSelectField,submit:this.renderSubmitButton}[e];return r?r.call(this,e,n,i,t,s,l):(console.warn(`Unsupported field type '${e}' encountered.`),"")}renderTextField(e,n,i,t,s){const l=["required","minlength","maxlength","pattern"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=` ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=` ${e}="${i}"\n`;break;default:l.includes(e)||console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'number'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'text'.[0m`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d=s.id||n;const o=this.formSettings?.framework||!1;let c,$="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on"))if("semantq"===o){const i=n.endsWith("()")?n.slice(0,-2):n;$+=` @${e.replace(/^on/,"")}={${i}}\n`}else{$+=` ${e}="${n.endsWith("()")?n:`${n}()`}"\n`}else!0===n?$+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&($+=` ${e.replace(/_/g,"-")}="${n}"\n`);c="class"in s?s.class:this.inputClass;let p=`\n <div class="${this.divClass}" id="${d+"-block"}">\n <label for="${d}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n </label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${d}"\n class="${c}"\n ${$}\n ${r}\n ${$.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${i}"`:""} />\n </div>\n`.replace(/^\s*\n/gm,"").trim();p=p.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),this.formMarkUp+=p}renderEmailField(e,n,i,t,s){const l=["required","pattern","minlength","maxlength","multiple"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=` ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=` ${e}="${i}"\n`;break;default:l.includes(e)||console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'number'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'email'.[0m`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}"> \n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n </label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n ${c.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${i}"`:""}\n\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderNumberField(e,n,i,t,s){const l=["required","min","max","step"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=` ${e}\n`;else switch(e){case"min":case"max":case"step":r+=` ${e}="${i}"\n`;break;default:l.includes(e)||console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'number'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'number'.[0m`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}"> \n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderPasswordField(e,n,i,t,s){const l=["required","minlength","maxlength","pattern"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=` ${e}\n`;else switch(e){case"minlength":case"maxlength":case"pattern":r+=` ${e}="${i}"\n`;break;default:l.includes(e)||console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'password'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'password'.[0m`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}"> \n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderTextAreaField(e,n,i,t,s){const l=["required","minlength","maxlength","pattern"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=` ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=` ${e}="${i}"\n`;break;default:l.includes(e)||console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'number'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'text'.[0m`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d=s.id||n;const o=this.formSettings?.framework||!1;let c,$="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on"))if("semantq"===o){const i=n.endsWith("()")?n.slice(0,-2):n;$+=` @${e.replace(/^on/,"")}={${i}}\n`}else{$+=` ${e}="${n.endsWith("()")?n:`${n}()`}"\n`}else!0===n?$+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&($+=` ${e.replace(/_/g,"-")}="${n}"\n`);c="class"in s?s.class:this.inputClass;let p=`\n <div class="${this.divClass}" id="${d+"-block"}">\n <label for="${d}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n </label>\n <textarea \n name="${n}"\n ${a}\n id="${d}"\n class="${c}"\n ${$}\n ${r}\n ${$.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${i}"`:""}>\n </textarea>\n </div>\n`.replace(/^\s*\n/gm,"").trim();p=p.replace(/<textarea\s+([^>]*)>\s*<\/textarea>/,((e,n)=>`<textarea\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n></textarea>`)),this.formMarkUp+=p}renderTelField(e,n,i,t,s){const l=["required","pattern","minlength","maxlength"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=` ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=` ${e}="${i}"\n`;break;default:l.includes(e)||console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'tel'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'tel'.[0m`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}">\n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();return $=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),$}renderDateField(e,n,i,t,s){const l=["required","min","max","step","placeholder","readonly","disabled","autocomplete","spellcheck","inputmode","title"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=` ${e}\n`;else switch(e){case"min":case"max":case"step":r+=` ${e}="${i}"\n`;break;default:l.includes(e)||console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'date'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'date'.[0m`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}"> \n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderTimeField(e,n,i,t,s){const l=["required","min","max","step","readonly","disabled","autocomplete","spellcheck","inputmode","title"];let r="";t&&Object.entries(t).forEach((([i,t])=>{if(l.includes(i))if("boolean"==typeof t&&t)r+=` ${i}\n`;else switch(i){case"min":case"max":case"step":r+=` ${i}="${t}"\n`;break;default:l.includes(i)||console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}"> \n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderDateTimeField(e,n,i,t,s){const l=["required","min","max","step","readonly","disabled","autocomplete","spellcheck","inputmode","title"];let r="";t&&Object.entries(t).forEach((([i,t])=>{if(l.includes(i))if("boolean"==typeof t&&t)r+=` ${i}\n`;else switch(i){case"min":case"max":case"step":r+=` ${i}="${t}"\n`;break;default:l.includes(i)||console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}"> \n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderMonthField(e,n,i,t,s){const l=["required","min","max","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=` ${e}\n`;else switch(e){case"min":case"max":case"pattern":r+=` ${e}="${i}"\n`;break;default:l.includes(e)&&console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'month'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'month'.[0m`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}">\n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderWeekField(e,n,i,t,s){const l=["required","min","max","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=` ${e}\n`;else switch(e){case"min":case"max":case"pattern":r+=` ${e}="${i}"\n`;break;default:l.includes(e)&&console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'week'.[0m`)}else console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'week'.[0m`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}">\n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderUrlField(e,n,i,t,s){const l=["required","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";t&&Object.entries(t).forEach((([i,t])=>{if(l.includes(i))if("boolean"==typeof t&&t)r+=` ${i}\n`;else if("pattern"===i)r+=` ${i}="${t}"\n`;else l.includes(i)||console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`);else console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}">\n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderSearchField(e,n,i,t,s){const l=["required","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";t&&Object.entries(t).forEach((([i,t])=>{if(l.includes(i))if("boolean"==typeof t&&t)r+=` ${i}\n`;else if("pattern"===i)r+=` ${i}="${t}"\n`;else l.includes(i)||console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`);else console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}">\n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderColorField(e,n,i,t,s){const l=["required","readonly","disabled","autocomplete","inputmode","title"];let r="";t&&Object.entries(t).forEach((([i,t])=>{l.includes(i)?"boolean"==typeof t&&t?r+=` ${i}\n`:l.includes(i)||console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`):console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`)}));let a="";if(("bind:value"===s.binding||s.binding.startsWith("::")&&n)&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}">\n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderFileField(e,n,i,t,s){const l=["required","accept","multiple","disabled","title"];let r="";t&&Object.entries(t).forEach((([i,t])=>{l.includes(i)?"boolean"==typeof t&&t?r+=` ${i}\n`:l.includes(i)||console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`):console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`)}));let a="";if("bind:value"===s.binding&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}">\n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderHiddenField(e,n,i,t,s){const l=["type","name","value","id","class","style","required","readonly","disabled","tabindex"];let r="";t&&Object.entries(t).forEach((([i,t])=>{l.includes(i)&&"boolean"==typeof t&&t?r+=` ${i}\n`:console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`)}));let a="";if("bind:value"===s.binding&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}">\n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderImageField(e,n,i,t,s){const l=["accept","required","minwidth","maxwidth","minheight","maxheight"];let r="";t&&Object.entries(t).forEach((([i,t])=>{l.includes(i)?"accept"===i?r+=`accept="${t}"\n`:["required","minwidth","maxwidth","minheight","maxheight"].includes(i)?r+=`${i}="${t}"\n`:console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`):console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`)}));let a="";("bind:value"===s.binding||s.binding.startsWith("::"))&&(a=` bind:value="${n}"`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}">\n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderImageField(e,n,i,t,s){const l=["accept","required","minwidth","maxwidth","minheight","maxheight"];let r="";t&&Object.entries(t).forEach((([i,t])=>{l.includes(i)?r+=`${i}="${t}"\n`:console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`)}));let a="";("bind:value"===s.binding||bindingSyntax.startsWith("::"))&&(a=`bind:value="${n}"\n`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n <div class="${this.divClass}" id="${o+"-block"}">\n <label for="${o}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <input \n type="${e}"\n name="${n}"\n ${a}\n id="${o}"\n class="${d}"\n ${c}\n ${r}\n />\n </div>\n `.replace(/^\s*\n/gm,"").trim();return $=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),$}renderTextAreaField(e,n,i,t,s){const l=["required","minlength","maxlength"];let r="";t&&Object.entries(t).forEach((([i,t])=>{l.includes(i)?r+="boolean"==typeof t&&t?` ${i}\n`:` ${i}="${t}"\n`:console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d=s.id||n,o="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){o+=` ${e}="${n.endsWith("()")?n:`${n}()`}"\n`}else!0===n?o+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(o+=` ${e.replace(/_/g,"-")}="${n}"\n`);let c=s.class||this.inputClass,$=`\n <div class="${this.divClass}" id="${d+"-block"}">\n <label for="${d}">${i}\n ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n </label>\n <textarea \n name="${n}"\n ${a}\n id="${d}"\n class="${c}"\n ${o}\n ${r}\n ${o.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${i}"`:""}>\n </textarea>\n </div>\n`.replace(/^\s*\n/gm,"").trim();$=$.replace(/<textarea\s+([^>]*)>\s*<\/textarea>/,((e,n)=>`<textarea\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n></textarea>`)),this.formMarkUp+=$}renderRadioField(e,n,i,t,s,l){const r=["required"];let a="";t&&Object.entries(t).forEach((([e,i])=>{if(r.includes(e))if("boolean"==typeof i&&i)a+=` ${e}\n`;else if("required"===e)a+=` ${e}\n`;else r.includes(e)||console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'radio'.[0m`);else console.warn(`[31mUnsupported validation attribute '${e}' for field '${n}' of type 'radio'.[0m`)}));let d="";if(s.binding)if("bind:value"===s.binding&&n)d=` bind:value="${n}"\n`;else if(s.binding.startsWith("::")&&n)d=` bind:value="${n}"\n`;else if(s.binding&&!n)return void console.log("[31m%s[0m",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);let $=s.class||this.inputClass,p="";l&&l.length&&(p=l.map((i=>`\n <div>\n <input \n type="${e}" \n name="${n}" \n value="${i.value}"\n ${d} \n ${c}\n ${s.id,`id="${o}-${i.value}"`}\n class="${$}"\n ${a}\n />\n <label \n for="${s.id,`${o}-${i.value}`}">\n ${i.label}\n </label>\n </div>\n `)).join(""));let u=`\n <fieldset class="${this.radioGroupClass}" id="${o+"-block"}">\n <legend>\n ${i} \n ${a.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n </legend>\n ${p}\n </fieldset>\n `.replace(/^\s*\n/gm,"").trim().replace(/<input\s+([^>]*)\/>/g,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`));u=u.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=u}renderCheckboxField(e,n,i,t,s,l){const r=["required"];let a="";t&&Object.entries(t).forEach((([i,t])=>{r.includes(i)?"required"===i&&(a+=`${i}\n`):console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`)}));let d="";s.binding&&("bind:checked"===s.binding||s.binding.startsWith("::"))&&(d=` bind:checked="${n}"\n`);let o,c=s.id||n,$="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;$+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?$+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&($+=` ${e.replace(/_/g,"-")}="${n}"\n`);o="class"in s?s.class:this.inputClass;let p="";Array.isArray(l)&&(p=l.map((e=>{const i=`${c}-${e.value}`;return`\n <div>\n <input \n type="checkbox" \n name="${n}" \n value="${e.value}"${d} ${$}\n ${s.id,`id="${i}"`}\n class="${o}"\n />\n <label \n for="${i}">\n ${e.label}\n </label>\n </div>\n `})).join(""));let u=`\n <fieldset class="${this.checkboxGroupClass}" id="${c+"-block"}">\n <legend>\n ${i} ${a.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n </legend>\n ${p}\n </fieldset>\n `.replace(/^\s*\n/gm,"").trim();u=u.replace(/<input\s+([^>]*)\/>/g,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n/>`)),u=u.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=u}renderDynamicSingleSelectField(e,n,i,t,s,l){const r=l.flat().map((e=>{const n=e.options.some((e=>!0===e.selected));return{value:e.id,label:e.label,...n&&{selected:!0}}})),a=l;this.renderSingleSelectField(e,n,i,t,s,r,a,"dynamicSingleSelect")}renderSingleSelectField(e,n,i,t,s,l,r,a){const d=["required"];let o="";t&&Object.entries(t).forEach((([i,t])=>{d.includes(i)?"required"===i&&(o+=`${i} `):console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`)}));let c="";s.binding&&"string"==typeof s.binding&&s.binding.startsWith("::")&&(c=` bind:value="${n}" `);let $=s.id||n,p="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;p+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?p+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(p+=` ${e.replace(/_/g,"-")}="${n}"\n`);let u="";Array.isArray(l)&&(u+='\n <option value="">Choose an option</option>\n ',u+=l.map((e=>{const n=e.selected?" selected":"";return`\n <option value="${e.value}"${n}>${e.label}</option>\n `})).join(""));let m=s.class||this.inputClass;const f="dynamicSingleSelect"===a&&r?' onchange="handleDynamicSingleSelect(this.value,id)"':"";let h,b;if("dynamicSingleSelect"===a&&r)if(i.includes("-")){const[e]=i.split("-");h=e,b=i}else h=i,b=i;else h=i;let g=`\n <fieldset class="${this.selectGroupClass}" id="${$+"-block"}">\n <legend>${h} \n ${o.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n </legend>\n <label for="${$}"> Select ${h} \n <select name="${n}"\n ${c}\n \n id="${$}"\n class="${m}"\n ${p}\n ${o}\n ${f} \n >\n ${u}\n </select>\n </fieldset>\n`.replace(/^\s*\n/gm,"").trim().replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g,((e,n,i)=>`<select\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n>\n${i.trim()}\n</select>`));if(g=g.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=g,a&&"dynamicSingleSelect"===a&&r){const e=document.getElementById(this.formContainerId);let i=s.id||n;if(e){const n=document.createElement("script");n.textContent='\n window.handleDynamicSingleSelect = function(category, fieldsetid) {\n //console.log("HERE", fieldsetid);\n\n // Hide all subcategory fields\n document.querySelectorAll(`[class*="${fieldsetid}"]`).forEach(div => {\n div.style.display = "none";\n });\n\n // Show the selected category\n const selectedCategoryFieldset = document.getElementById(category + \'-options\');\n if (selectedCategoryFieldset) {\n selectedCategoryFieldset.style.display = "block";\n }\n }\n',e.appendChild(n)}else console.error(`Target div with id "${this.formContainerId}" not found.`);r.forEach((e=>{const{id:n,label:t,options:s}=e,l=s.map((e=>{const n=e.selected?" selected":"";return`\n <option value="${e.value}"${n}>${e.label}</option>\n `})).join("");let r,a;console.log("Label:",b),r=b.includes("-")?b.split("-")?.[1]+" Options":"options",a="options"!==r?b.split("-")?.[1]+" Option":r;let d=`\n <fieldset class="${this.selectGroupClass} ${i}" id="${n}-options" style="display: none;">\n <legend> ${t} ${r} ${this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n </legend>\n <label for="${n}"> Select ${t} ${a} \n </label>\n <select name="${n}"\n ${c}\n \n id="${n+"-block"}"\n class="${m}"\n ${p}\n ${o}\n >\n <option value="">Choose an option</option>\n ${l}\n </select>\n </fieldset>\n `.replace(/^\s*\n/gm,"").trim();d=d.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g,((e,n,i)=>`<select\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n>\n${i.trim()}\n</select>`)),d=d.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=d}))}}renderMultipleSelectField(e,n,i,t,s,l){const r=["required","minlength","maxlength"];let a="";t&&Object.entries(t).forEach((([i,t])=>{r.includes(i)?"required"===i?a+=`${i} `:"minlength"===i?a+=`minlength="${t}" `:"maxlength"===i&&(a+=`maxlength="${t}" `):console.warn(`[31mUnsupported validation attribute '${i}' for field '${n}' of type '${e}'.[0m`)}));let d="";s.binding&&"string"==typeof s.binding&&s.binding.startsWith("::")&&(d=` bind:value="${n}" `);let o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=` @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=` ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=` ${e.replace(/_/g,"-")}="${n}"\n`);let $="";Array.isArray(l)&&($=l.map((e=>{const n=e.selected?" selected":"";return`\n <option value="${e.value}"${n}>${e.label}</option>\n `})).join(""));let p;p="class"in s?s.class:this.inputClass;let u=`\n <fieldset class="${this.selectGroupClass}" id="${o+"-block"}">\n <label for="${o}">${i}\n ${a.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n <select name="${n}"\n ${d}\n \n id="${o}"\n class="${p}"\n ${c}\n ${a}\n multiple\n >\n ${$}\n </select>\n </fieldset>\n `.replace(/^\s*\n/gm,"").trim();u=u.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g,((e,n,i)=>`<select\n${n.trim().split(/\s+/).map((e=>` ${e}`)).join("\n")}\n>\n${i.trim()}\n</select>`)),u=u.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=u}renderSubmitButton(e,n,i,t,s){const l=s.id||n;let r,a="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){a+=` ${e}="${n.endsWith("()")?n.slice(0,-2):n}"`}else!0===n?a+=` ${e.replace(/_/g,"-")}`:!1!==n&&(a+=` ${e.replace(/_/g,"-")}="${n}"`);r="class"in s?s.class:this.submitButtonClass;let d=`\n <input type="${e}"\n id="${l+"-block"}"\n class="${r}"\n value="${i}"\n ${a}\n />\n `.replace(/^\s*\n/gm,"").trim();this.formMarkUp+=d}renderFormHTML(){this.formMarkUp+="</form>";const e=document.getElementById(this.formContainerId);e?e.innerHTML=this.formMarkUp:console.error(`Error: formContainer not found. Please ensure an element with id ${this.formContainerId} exists in the HTML.`)}};
|