@acoustte-digital-services/digitalstore-controls 0.16.0 → 0.18.0
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/index.d.mts +123 -1
- package/dist/index.d.ts +123 -1
- package/dist/index.js +1563 -0
- package/dist/index.mjs +1561 -0
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
2
4
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
6
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
@@ -14,6 +16,7 @@ var __spreadValues = (a, b) => {
|
|
|
14
16
|
}
|
|
15
17
|
return a;
|
|
16
18
|
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
17
20
|
|
|
18
21
|
// src/controls/view/ViewControl.tsx
|
|
19
22
|
import React11 from "react";
|
|
@@ -217,7 +220,1565 @@ var ViewControl = (props) => {
|
|
|
217
220
|
return /* @__PURE__ */ jsx11(React11.Fragment, { children: SelectedControlComponent ? /* @__PURE__ */ jsx11(SelectedControlComponent, __spreadValues({}, props)) : "Control not found" });
|
|
218
221
|
};
|
|
219
222
|
var ViewControl_default = ViewControl;
|
|
223
|
+
|
|
224
|
+
// src/controls/edit/InputControl.tsx
|
|
225
|
+
import React31 from "react";
|
|
226
|
+
|
|
227
|
+
// src/controls/edit/MultilineTextInput.tsx
|
|
228
|
+
import React12 from "react";
|
|
229
|
+
import { jsx as jsx12, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
230
|
+
var MultilineTextInput = (props) => {
|
|
231
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
|
|
232
|
+
const textChangeHandler = (event) => {
|
|
233
|
+
const text = event.target.value;
|
|
234
|
+
if (props.callback !== void 0) {
|
|
235
|
+
props.callback(
|
|
236
|
+
{
|
|
237
|
+
name: props.name,
|
|
238
|
+
value: text,
|
|
239
|
+
index: props.index,
|
|
240
|
+
groupKey: props.groupKey
|
|
241
|
+
}
|
|
242
|
+
);
|
|
243
|
+
}
|
|
244
|
+
};
|
|
245
|
+
let value = "";
|
|
246
|
+
if (props.value !== void 0 && props.value !== null) {
|
|
247
|
+
value = props.value;
|
|
248
|
+
}
|
|
249
|
+
return /* @__PURE__ */ jsx12(React12.Fragment, { children: /* @__PURE__ */ jsxs2("label", { className: "block mb-1", children: [
|
|
250
|
+
/* @__PURE__ */ jsx12("span", { className: "text-sm font-medium ", children: (_a = props == null ? void 0 : props.attributes) == null ? void 0 : _a.label }),
|
|
251
|
+
" ",
|
|
252
|
+
((_b = props == null ? void 0 : props.attributes) == null ? void 0 : _b.label) && ((_c = props == null ? void 0 : props.attributes) == null ? void 0 : _c.required) && /* @__PURE__ */ jsx12("span", { className: "text-alert", children: "*" }),
|
|
253
|
+
/* @__PURE__ */ jsx12(
|
|
254
|
+
"textarea",
|
|
255
|
+
{
|
|
256
|
+
name: props.name,
|
|
257
|
+
id: props.name,
|
|
258
|
+
value,
|
|
259
|
+
onChange: textChangeHandler,
|
|
260
|
+
onBlur: props == null ? void 0 : props.onBlur,
|
|
261
|
+
rows: 4,
|
|
262
|
+
required: (_d = props == null ? void 0 : props.attributes) == null ? void 0 : _d.required,
|
|
263
|
+
placeholder: (_e = props == null ? void 0 : props.attributes) == null ? void 0 : _e.placeholder,
|
|
264
|
+
maxLength: (_f = props == null ? void 0 : props.attributes) == null ? void 0 : _f.maxLength,
|
|
265
|
+
disabled: (_g = props == null ? void 0 : props.attributes) == null ? void 0 : _g.readOnly,
|
|
266
|
+
minLength: (_h = props == null ? void 0 : props.attributes) == null ? void 0 : _h.minLength,
|
|
267
|
+
className: "peer mt-1 py-1.5 block w-full rounded border-gray-300 shadow-sm\r\n focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
|
|
268
|
+
}
|
|
269
|
+
),
|
|
270
|
+
/* @__PURE__ */ jsx12("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 text-alert text-sm", children: ((_i = props == null ? void 0 : props.attributes) == null ? void 0 : _i.errorMessage) ? props.attributes.errorMessage : "" })
|
|
271
|
+
] }) });
|
|
272
|
+
};
|
|
273
|
+
var MultilineTextInput_default = MultilineTextInput;
|
|
274
|
+
|
|
275
|
+
// src/controls/edit/LineTextInput.tsx
|
|
276
|
+
import React13 from "react";
|
|
277
|
+
import { jsx as jsx13, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
278
|
+
var LineTextInput = (props) => {
|
|
279
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
|
|
280
|
+
const textChangeHandler = (event) => {
|
|
281
|
+
const text = event.target.value;
|
|
282
|
+
if (props.callback !== void 0) {
|
|
283
|
+
props.callback(
|
|
284
|
+
{
|
|
285
|
+
name: props.name,
|
|
286
|
+
value: text,
|
|
287
|
+
index: props.index,
|
|
288
|
+
groupKey: props.groupKey
|
|
289
|
+
}
|
|
290
|
+
);
|
|
291
|
+
}
|
|
292
|
+
};
|
|
293
|
+
let value = "";
|
|
294
|
+
if (props.value !== void 0 && props.value !== null) {
|
|
295
|
+
value = props.value;
|
|
296
|
+
}
|
|
297
|
+
return /* @__PURE__ */ jsx13(React13.Fragment, { children: /* @__PURE__ */ jsxs3("label", { className: "block", children: [
|
|
298
|
+
((_a = props == null ? void 0 : props.attributes) == null ? void 0 : _a.label) && /* @__PURE__ */ jsx13("span", { className: "text-sm inline-block pb-1 font-medium ", children: (_b = props == null ? void 0 : props.attributes) == null ? void 0 : _b.label }),
|
|
299
|
+
" ",
|
|
300
|
+
((_c = props == null ? void 0 : props.attributes) == null ? void 0 : _c.label) && ((_d = props == null ? void 0 : props.attributes) == null ? void 0 : _d.required) && /* @__PURE__ */ jsx13("span", { className: "text-alert", children: "*" }),
|
|
301
|
+
/* @__PURE__ */ jsx13(
|
|
302
|
+
"input",
|
|
303
|
+
{
|
|
304
|
+
type: "text",
|
|
305
|
+
name: props.name,
|
|
306
|
+
id: props.name,
|
|
307
|
+
value,
|
|
308
|
+
onChange: textChangeHandler,
|
|
309
|
+
onBlur: props == null ? void 0 : props.onBlur,
|
|
310
|
+
required: (_e = props == null ? void 0 : props.attributes) == null ? void 0 : _e.required,
|
|
311
|
+
placeholder: (_f = props == null ? void 0 : props.attributes) == null ? void 0 : _f.placeholder,
|
|
312
|
+
maxLength: (_g = props == null ? void 0 : props.attributes) == null ? void 0 : _g.maxLength,
|
|
313
|
+
pattern: (_h = props == null ? void 0 : props.attributes) == null ? void 0 : _h.pattern,
|
|
314
|
+
disabled: (_i = props == null ? void 0 : props.attributes) == null ? void 0 : _i.readOnly,
|
|
315
|
+
minLength: (_j = props == null ? void 0 : props.attributes) == null ? void 0 : _j.minLength,
|
|
316
|
+
className: `peer py-1.5 block w-full rounded border-gray-300 shadow-sm
|
|
317
|
+
focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
|
|
318
|
+
disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none
|
|
319
|
+
${(props == null ? void 0 : props.inputClasses) ? props.inputClasses : ``}
|
|
320
|
+
`
|
|
321
|
+
}
|
|
322
|
+
),
|
|
323
|
+
/* @__PURE__ */ jsx13("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 text-alert text-sm", children: ((_k = props == null ? void 0 : props.attributes) == null ? void 0 : _k.errorMessage) ? props.attributes.errorMessage : "" })
|
|
324
|
+
] }) });
|
|
325
|
+
};
|
|
326
|
+
var LineTextInput_default = LineTextInput;
|
|
327
|
+
|
|
328
|
+
// src/controls/edit/MoneyInput.tsx
|
|
329
|
+
import React14 from "react";
|
|
330
|
+
import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
331
|
+
var MoneyInput = (props) => {
|
|
332
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
|
|
333
|
+
const textChangeHandler = (event) => {
|
|
334
|
+
const rawValue = event.target.value;
|
|
335
|
+
const numericValue = parseFloat(rawValue);
|
|
336
|
+
if (rawValue === "" || !isNaN(numericValue) && numericValue >= 0) {
|
|
337
|
+
if (props.callback !== void 0) {
|
|
338
|
+
props.callback({
|
|
339
|
+
name: props.name,
|
|
340
|
+
value: rawValue,
|
|
341
|
+
index: props.index,
|
|
342
|
+
groupKey: props.groupKey
|
|
343
|
+
});
|
|
344
|
+
}
|
|
345
|
+
}
|
|
346
|
+
};
|
|
347
|
+
const handleWheel = (event) => {
|
|
348
|
+
event.preventDefault();
|
|
349
|
+
event.target.blur();
|
|
350
|
+
};
|
|
351
|
+
let value;
|
|
352
|
+
if (props.value !== void 0 && props.value !== null) {
|
|
353
|
+
value = props.value;
|
|
354
|
+
}
|
|
355
|
+
const preventNegative = (e) => {
|
|
356
|
+
if (e.key === "-") {
|
|
357
|
+
e.preventDefault();
|
|
358
|
+
}
|
|
359
|
+
};
|
|
360
|
+
return /* @__PURE__ */ jsx14(React14.Fragment, { children: /* @__PURE__ */ jsxs4("label", { className: "block mb-1", children: [
|
|
361
|
+
/* @__PURE__ */ jsx14("span", { className: "text-sm font-medium ", children: (_a = props == null ? void 0 : props.attributes) == null ? void 0 : _a.label }),
|
|
362
|
+
" ",
|
|
363
|
+
((_b = props == null ? void 0 : props.attributes) == null ? void 0 : _b.label) && ((_c = props == null ? void 0 : props.attributes) == null ? void 0 : _c.required) && /* @__PURE__ */ jsx14("span", { className: "text-alert", children: "*" }),
|
|
364
|
+
/* @__PURE__ */ jsx14(
|
|
365
|
+
"input",
|
|
366
|
+
{
|
|
367
|
+
type: "number",
|
|
368
|
+
name: props.name,
|
|
369
|
+
id: props.name,
|
|
370
|
+
value,
|
|
371
|
+
min: 0,
|
|
372
|
+
onChange: textChangeHandler,
|
|
373
|
+
onWheel: handleWheel,
|
|
374
|
+
onKeyDown: preventNegative,
|
|
375
|
+
required: (_d = props == null ? void 0 : props.attributes) == null ? void 0 : _d.required,
|
|
376
|
+
placeholder: (_e = props == null ? void 0 : props.attributes) == null ? void 0 : _e.placeholder,
|
|
377
|
+
maxLength: (_f = props == null ? void 0 : props.attributes) == null ? void 0 : _f.maxLength,
|
|
378
|
+
pattern: (_g = props == null ? void 0 : props.attributes) == null ? void 0 : _g.pattern,
|
|
379
|
+
disabled: (_h = props == null ? void 0 : props.attributes) == null ? void 0 : _h.readOnly,
|
|
380
|
+
minLength: (_i = props == null ? void 0 : props.attributes) == null ? void 0 : _i.minLength,
|
|
381
|
+
className: "peer mt-1 py-1.5 block w-full rounded border-gray-300 shadow-sm\r\n focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 number-input"
|
|
382
|
+
}
|
|
383
|
+
),
|
|
384
|
+
/* @__PURE__ */ jsx14("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 text-alert text-sm", children: ((_j = props == null ? void 0 : props.attributes) == null ? void 0 : _j.errorMessage) ? props.attributes.errorMessage : "" })
|
|
385
|
+
] }) });
|
|
386
|
+
};
|
|
387
|
+
var MoneyInput_default = MoneyInput;
|
|
388
|
+
|
|
389
|
+
// src/controls/edit/Select.tsx
|
|
390
|
+
import { useState, useEffect } from "react";
|
|
391
|
+
import { jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
392
|
+
var Select = (props) => {
|
|
393
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
394
|
+
const [list, setList] = useState([]);
|
|
395
|
+
const getSafeValue = (val) => {
|
|
396
|
+
if (val === null || val === void 0) return "";
|
|
397
|
+
if (typeof val === "boolean") return val ? "1" : "0";
|
|
398
|
+
return val;
|
|
399
|
+
};
|
|
400
|
+
const textChangeHandler = (event) => {
|
|
401
|
+
var _a2;
|
|
402
|
+
let rawValue = event.target.value;
|
|
403
|
+
if (rawValue === "") rawValue = null;
|
|
404
|
+
let finalValue = rawValue;
|
|
405
|
+
if (list && props.dataKeyFieldName) {
|
|
406
|
+
const key = props.dataKeyFieldName;
|
|
407
|
+
const selectedItem = list.find(
|
|
408
|
+
(item) => String(item[key]) === String(rawValue)
|
|
409
|
+
);
|
|
410
|
+
if (selectedItem) {
|
|
411
|
+
const keyValue = selectedItem[key];
|
|
412
|
+
if (typeof keyValue === "number") {
|
|
413
|
+
finalValue = Number(rawValue);
|
|
414
|
+
}
|
|
415
|
+
}
|
|
416
|
+
}
|
|
417
|
+
(_a2 = props.callback) == null ? void 0 : _a2.call(props, {
|
|
418
|
+
name: props.name,
|
|
419
|
+
value: finalValue,
|
|
420
|
+
index: props.index,
|
|
421
|
+
groupKey: props.groupKey
|
|
422
|
+
});
|
|
423
|
+
};
|
|
424
|
+
useEffect(() => {
|
|
425
|
+
async function fetchData() {
|
|
426
|
+
var _a2;
|
|
427
|
+
if (props.dataset) {
|
|
428
|
+
setList(props.dataset);
|
|
429
|
+
return;
|
|
430
|
+
}
|
|
431
|
+
if (props.dataSource && props.serviceClient) {
|
|
432
|
+
let dataSource = props.dataSource;
|
|
433
|
+
let response;
|
|
434
|
+
if (props.dataSourceDependsOn && props.dependentValue) {
|
|
435
|
+
dataSource = dataSource.replace(
|
|
436
|
+
`{${props.dataSourceDependsOn}}`,
|
|
437
|
+
props.dependentValue
|
|
438
|
+
);
|
|
439
|
+
}
|
|
440
|
+
response = await props.serviceClient.get(dataSource);
|
|
441
|
+
setList((_a2 = response.result) != null ? _a2 : []);
|
|
442
|
+
}
|
|
443
|
+
}
|
|
444
|
+
fetchData();
|
|
445
|
+
}, [
|
|
446
|
+
props.dataset,
|
|
447
|
+
props.dataSource,
|
|
448
|
+
props.dependentValue,
|
|
449
|
+
props.dataSourceDependsOn
|
|
450
|
+
]);
|
|
451
|
+
const value = getSafeValue(props.value);
|
|
452
|
+
return /* @__PURE__ */ jsxs5("label", { className: "block", children: [
|
|
453
|
+
((_a = props.attributes) == null ? void 0 : _a.label) && /* @__PURE__ */ jsx15("span", { className: "text-sm font-medium inline-block pb-1", children: (_b = props.attributes) == null ? void 0 : _b.label }),
|
|
454
|
+
((_c = props.attributes) == null ? void 0 : _c.label) && ((_d = props.attributes) == null ? void 0 : _d.required) && /* @__PURE__ */ jsx15("span", { className: "text-alert", children: "*" }),
|
|
455
|
+
/* @__PURE__ */ jsxs5(
|
|
456
|
+
"select",
|
|
457
|
+
{
|
|
458
|
+
name: props.name,
|
|
459
|
+
id: props.name,
|
|
460
|
+
value,
|
|
461
|
+
onChange: textChangeHandler,
|
|
462
|
+
required: (_e = props.attributes) == null ? void 0 : _e.required,
|
|
463
|
+
disabled: (_f = props.attributes) == null ? void 0 : _f.readOnly,
|
|
464
|
+
className: "peer py-1.5 block w-full text-black rounded border-gray-300 shadow-sm\r\n focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50\r\n disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none",
|
|
465
|
+
children: [
|
|
466
|
+
/* @__PURE__ */ jsx15("option", { value: "", children: ((_g = props.attributes) == null ? void 0 : _g.placeholder) || "Select" }),
|
|
467
|
+
list.map((item, index) => {
|
|
468
|
+
const keyField = props.dataKeyFieldName;
|
|
469
|
+
const textField = props.dataTextFieldName;
|
|
470
|
+
return /* @__PURE__ */ jsx15("option", { value: item[keyField], children: item[textField] }, index);
|
|
471
|
+
})
|
|
472
|
+
]
|
|
473
|
+
}
|
|
474
|
+
),
|
|
475
|
+
/* @__PURE__ */ jsx15("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 text-alert text-sm", children: ((_h = props.attributes) == null ? void 0 : _h.errorMessage) || "" })
|
|
476
|
+
] });
|
|
477
|
+
};
|
|
478
|
+
var Select_default = Select;
|
|
479
|
+
|
|
480
|
+
// src/controls/edit/PercentageInput.tsx
|
|
481
|
+
import React16 from "react";
|
|
482
|
+
import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
483
|
+
var PercentageInput = (props) => {
|
|
484
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
|
|
485
|
+
const textChangeHandler = (event) => {
|
|
486
|
+
const rawValue = event.target.value;
|
|
487
|
+
const numericValue = parseFloat(rawValue);
|
|
488
|
+
if (rawValue === "" || !isNaN(numericValue) && numericValue >= 0) {
|
|
489
|
+
if (props.callback !== void 0) {
|
|
490
|
+
props.callback({
|
|
491
|
+
name: props.name,
|
|
492
|
+
value: rawValue,
|
|
493
|
+
index: props.index,
|
|
494
|
+
groupKey: props.groupKey
|
|
495
|
+
});
|
|
496
|
+
}
|
|
497
|
+
}
|
|
498
|
+
};
|
|
499
|
+
const handleWheel = (event) => {
|
|
500
|
+
event.preventDefault();
|
|
501
|
+
event.target.blur();
|
|
502
|
+
};
|
|
503
|
+
let value;
|
|
504
|
+
if (props.value !== void 0 && props.value !== null) {
|
|
505
|
+
value = props.value;
|
|
506
|
+
}
|
|
507
|
+
const preventNegative = (e) => {
|
|
508
|
+
if (e.key === "-") {
|
|
509
|
+
e.preventDefault();
|
|
510
|
+
}
|
|
511
|
+
};
|
|
512
|
+
return /* @__PURE__ */ jsx16(React16.Fragment, { children: /* @__PURE__ */ jsxs6("label", { className: "block mb-1", children: [
|
|
513
|
+
/* @__PURE__ */ jsx16("span", { className: "text-sm font-medium ", children: ((_a = props == null ? void 0 : props.attributes) == null ? void 0 : _a.label) ? ((_b = props == null ? void 0 : props.attributes) == null ? void 0 : _b.label) + " %" : "" }),
|
|
514
|
+
" ",
|
|
515
|
+
((_c = props == null ? void 0 : props.attributes) == null ? void 0 : _c.label) && ((_d = props == null ? void 0 : props.attributes) == null ? void 0 : _d.required) && /* @__PURE__ */ jsx16("span", { className: "text-alert", children: "*" }),
|
|
516
|
+
/* @__PURE__ */ jsx16(
|
|
517
|
+
"input",
|
|
518
|
+
{
|
|
519
|
+
type: "number",
|
|
520
|
+
name: props.name,
|
|
521
|
+
id: props.name,
|
|
522
|
+
value,
|
|
523
|
+
min: 0,
|
|
524
|
+
onChange: textChangeHandler,
|
|
525
|
+
onKeyDown: preventNegative,
|
|
526
|
+
onWheel: handleWheel,
|
|
527
|
+
required: (_e = props == null ? void 0 : props.attributes) == null ? void 0 : _e.required,
|
|
528
|
+
placeholder: (_f = props == null ? void 0 : props.attributes) == null ? void 0 : _f.placeholder,
|
|
529
|
+
pattern: (_g = props == null ? void 0 : props.attributes) == null ? void 0 : _g.pattern,
|
|
530
|
+
disabled: (_h = props == null ? void 0 : props.attributes) == null ? void 0 : _h.readOnly,
|
|
531
|
+
max: "100",
|
|
532
|
+
className: "peer mt-1 py-1.5 block w-full rounded border-gray-300 shadow-sm\r\n focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 number-input"
|
|
533
|
+
}
|
|
534
|
+
),
|
|
535
|
+
/* @__PURE__ */ jsx16("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 text-alert text-sm", children: ((_i = props == null ? void 0 : props.attributes) == null ? void 0 : _i.errorMessage) ? props.attributes.errorMessage : "" })
|
|
536
|
+
] }) });
|
|
537
|
+
};
|
|
538
|
+
var PercentageInput_default = PercentageInput;
|
|
539
|
+
|
|
540
|
+
// src/controls/edit/PhoneInput.tsx
|
|
541
|
+
import React17 from "react";
|
|
542
|
+
import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
543
|
+
var PhoneInput = (props) => {
|
|
544
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
545
|
+
const textChangeHandler = (event) => {
|
|
546
|
+
const text = event.target.value;
|
|
547
|
+
if (props.callback !== void 0) {
|
|
548
|
+
props.callback(
|
|
549
|
+
{
|
|
550
|
+
name: props.name,
|
|
551
|
+
value: text,
|
|
552
|
+
index: props.index,
|
|
553
|
+
groupKey: props.groupKey
|
|
554
|
+
}
|
|
555
|
+
);
|
|
556
|
+
}
|
|
557
|
+
};
|
|
558
|
+
let value = "";
|
|
559
|
+
if (props.value !== void 0 && props.value !== null) {
|
|
560
|
+
value = props.value;
|
|
561
|
+
}
|
|
562
|
+
return /* @__PURE__ */ jsx17(React17.Fragment, { children: /* @__PURE__ */ jsxs7("label", { className: "block mb-1", children: [
|
|
563
|
+
/* @__PURE__ */ jsx17("span", { className: "text-sm font-medium ", children: (_a = props == null ? void 0 : props.attributes) == null ? void 0 : _a.label }),
|
|
564
|
+
/* @__PURE__ */ jsxs7("div", { className: "flex items-center bg-gray-100 rounded border border-gray-300 \r\n focus-within:border-indigo-300 focus-within:ring focus-within:ring-indigo-200 focus-within:ring-opacity-50", children: [
|
|
565
|
+
/* @__PURE__ */ jsx17("span", { className: "px-3 text-gray-700", children: props.prefix }),
|
|
566
|
+
/* @__PURE__ */ jsx17(
|
|
567
|
+
"input",
|
|
568
|
+
{
|
|
569
|
+
type: "text",
|
|
570
|
+
name: props.name,
|
|
571
|
+
id: props.name,
|
|
572
|
+
value,
|
|
573
|
+
onChange: textChangeHandler,
|
|
574
|
+
required: (_b = props == null ? void 0 : props.attributes) == null ? void 0 : _b.required,
|
|
575
|
+
placeholder: (_c = props == null ? void 0 : props.attributes) == null ? void 0 : _c.placeholder,
|
|
576
|
+
maxLength: (_d = props == null ? void 0 : props.attributes) == null ? void 0 : _d.maxLength,
|
|
577
|
+
pattern: (_e = props == null ? void 0 : props.attributes) == null ? void 0 : _e.pattern,
|
|
578
|
+
disabled: (_f = props == null ? void 0 : props.attributes) == null ? void 0 : _f.readOnly,
|
|
579
|
+
minLength: (_g = props == null ? void 0 : props.attributes) == null ? void 0 : _g.minLength,
|
|
580
|
+
className: "py-1.5 block w-full outline-none focus:ring-0 border-0 mr-0.5"
|
|
581
|
+
}
|
|
582
|
+
)
|
|
583
|
+
] }),
|
|
584
|
+
/* @__PURE__ */ jsx17("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 text-alert text-sm", children: ((_h = props == null ? void 0 : props.attributes) == null ? void 0 : _h.errorMessage) ? props.attributes.errorMessage : "" })
|
|
585
|
+
] }) });
|
|
586
|
+
};
|
|
587
|
+
var PhoneInput_default = PhoneInput;
|
|
588
|
+
|
|
589
|
+
// src/controls/edit/NumberInput.tsx
|
|
590
|
+
import React18 from "react";
|
|
591
|
+
import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
592
|
+
var NumberInput = (props) => {
|
|
593
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
|
|
594
|
+
const textChangeHandler = (event) => {
|
|
595
|
+
const text = event.target.value;
|
|
596
|
+
if (props.callback !== void 0) {
|
|
597
|
+
props.callback(
|
|
598
|
+
{
|
|
599
|
+
name: props.name,
|
|
600
|
+
value: text,
|
|
601
|
+
index: props.index,
|
|
602
|
+
groupKey: props.groupKey
|
|
603
|
+
}
|
|
604
|
+
);
|
|
605
|
+
}
|
|
606
|
+
};
|
|
607
|
+
const handleWheel = (event) => {
|
|
608
|
+
event.preventDefault();
|
|
609
|
+
event.target.blur();
|
|
610
|
+
};
|
|
611
|
+
let value;
|
|
612
|
+
if (props.value !== void 0 && props.value !== null) {
|
|
613
|
+
value = props.value;
|
|
614
|
+
}
|
|
615
|
+
return /* @__PURE__ */ jsx18(React18.Fragment, { children: /* @__PURE__ */ jsxs8("label", { className: "block", children: [
|
|
616
|
+
((_a = props == null ? void 0 : props.attributes) == null ? void 0 : _a.label) && /* @__PURE__ */ jsx18("span", { className: "text-sm inline-block pb-1 font-medium ", children: (_b = props == null ? void 0 : props.attributes) == null ? void 0 : _b.label }),
|
|
617
|
+
" ",
|
|
618
|
+
((_c = props == null ? void 0 : props.attributes) == null ? void 0 : _c.label) && ((_d = props == null ? void 0 : props.attributes) == null ? void 0 : _d.required) && /* @__PURE__ */ jsx18("span", { className: "text-alert", children: "*" }),
|
|
619
|
+
/* @__PURE__ */ jsx18(
|
|
620
|
+
"input",
|
|
621
|
+
{
|
|
622
|
+
type: "number",
|
|
623
|
+
name: props.name,
|
|
624
|
+
id: props.name,
|
|
625
|
+
value,
|
|
626
|
+
onChange: textChangeHandler,
|
|
627
|
+
onWheel: handleWheel,
|
|
628
|
+
required: (_e = props == null ? void 0 : props.attributes) == null ? void 0 : _e.required,
|
|
629
|
+
placeholder: (_f = props == null ? void 0 : props.attributes) == null ? void 0 : _f.placeholder,
|
|
630
|
+
onBlur: props == null ? void 0 : props.onBlur,
|
|
631
|
+
pattern: (_g = props == null ? void 0 : props.attributes) == null ? void 0 : _g.pattern,
|
|
632
|
+
disabled: (_h = props == null ? void 0 : props.attributes) == null ? void 0 : _h.readOnly,
|
|
633
|
+
max: (_i = props == null ? void 0 : props.attributes) == null ? void 0 : _i.maxValue,
|
|
634
|
+
min: (_j = props == null ? void 0 : props.attributes) == null ? void 0 : _j.minValue,
|
|
635
|
+
className: "peer py-1.5 block w-full rounded border-gray-300 shadow-sm\r\n focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 number-input\r\n disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none\r\n "
|
|
636
|
+
}
|
|
637
|
+
),
|
|
638
|
+
/* @__PURE__ */ jsx18("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 text-alert text-sm", children: ((_k = props == null ? void 0 : props.attributes) == null ? void 0 : _k.errorMessage) ? props.attributes.errorMessage : "" })
|
|
639
|
+
] }) });
|
|
640
|
+
};
|
|
641
|
+
var NumberInput_default = NumberInput;
|
|
642
|
+
|
|
643
|
+
// src/controls/edit/CheckboxInput.tsx
|
|
644
|
+
import React19 from "react";
|
|
645
|
+
import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
646
|
+
var CheckboxInput = (props) => {
|
|
647
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
|
|
648
|
+
const textChangeHandler = (event) => {
|
|
649
|
+
let text = event.target.checked;
|
|
650
|
+
console.log(text);
|
|
651
|
+
if (props.callback !== void 0) {
|
|
652
|
+
props.callback(
|
|
653
|
+
{
|
|
654
|
+
name: props.name,
|
|
655
|
+
value: text,
|
|
656
|
+
index: props.index,
|
|
657
|
+
groupKey: props.groupKey
|
|
658
|
+
}
|
|
659
|
+
);
|
|
660
|
+
}
|
|
661
|
+
};
|
|
662
|
+
const trueValue = true;
|
|
663
|
+
let value = false;
|
|
664
|
+
if (props.value != void 0 && props.value != null && props.value != "" && (props.value == "true" || props.value.toString() == "true")) {
|
|
665
|
+
value = true;
|
|
666
|
+
}
|
|
667
|
+
return /* @__PURE__ */ jsx19(React19.Fragment, { children: /* @__PURE__ */ jsxs9("label", { className: "block mb-1", children: [
|
|
668
|
+
/* @__PURE__ */ jsx19("span", { className: "text-sm font-medium", children: (_a = props == null ? void 0 : props.attributes) == null ? void 0 : _a.label }),
|
|
669
|
+
" ",
|
|
670
|
+
((_b = props == null ? void 0 : props.attributes) == null ? void 0 : _b.label) && ((_c = props == null ? void 0 : props.attributes) == null ? void 0 : _c.required) && /* @__PURE__ */ jsx19("span", { className: "text-alert", children: "*" }),
|
|
671
|
+
/* @__PURE__ */ jsx19(
|
|
672
|
+
"input",
|
|
673
|
+
{
|
|
674
|
+
type: "checkbox",
|
|
675
|
+
name: props.name,
|
|
676
|
+
id: props.name,
|
|
677
|
+
checked: value,
|
|
678
|
+
onChange: textChangeHandler,
|
|
679
|
+
required: (_d = props == null ? void 0 : props.attributes) == null ? void 0 : _d.required,
|
|
680
|
+
placeholder: (_e = props == null ? void 0 : props.attributes) == null ? void 0 : _e.placeholder,
|
|
681
|
+
maxLength: (_f = props == null ? void 0 : props.attributes) == null ? void 0 : _f.maxLength,
|
|
682
|
+
pattern: (_g = props == null ? void 0 : props.attributes) == null ? void 0 : _g.pattern,
|
|
683
|
+
disabled: (_h = props == null ? void 0 : props.attributes) == null ? void 0 : _h.readOnly,
|
|
684
|
+
minLength: (_i = props == null ? void 0 : props.attributes) == null ? void 0 : _i.minLength,
|
|
685
|
+
className: "peer mt-1 py-1.5 block rounded border-gray-300 shadow-sm\r\n focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50\r\n disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none\r\n "
|
|
686
|
+
}
|
|
687
|
+
),
|
|
688
|
+
/* @__PURE__ */ jsx19("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 text-alert text-sm", children: ((_j = props == null ? void 0 : props.attributes) == null ? void 0 : _j.errorMessage) ? props.attributes.errorMessage : "" })
|
|
689
|
+
] }) });
|
|
690
|
+
};
|
|
691
|
+
var CheckboxInput_default = CheckboxInput;
|
|
692
|
+
|
|
693
|
+
// src/controls/edit/OtpInput.tsx
|
|
694
|
+
import React20 from "react";
|
|
695
|
+
import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
696
|
+
var OtpInput = (props) => {
|
|
697
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
698
|
+
const textChangeHandler = (event) => {
|
|
699
|
+
const text = event.target.value;
|
|
700
|
+
if (props.callback !== void 0) {
|
|
701
|
+
props.callback(
|
|
702
|
+
{
|
|
703
|
+
name: props.name,
|
|
704
|
+
value: text,
|
|
705
|
+
index: props.index,
|
|
706
|
+
groupKey: props.groupKey
|
|
707
|
+
}
|
|
708
|
+
);
|
|
709
|
+
}
|
|
710
|
+
};
|
|
711
|
+
const handleWheel = (event) => {
|
|
712
|
+
event.preventDefault();
|
|
713
|
+
};
|
|
714
|
+
let value;
|
|
715
|
+
if (props.value !== void 0 && props.value !== null) {
|
|
716
|
+
value = props.value;
|
|
717
|
+
}
|
|
718
|
+
return /* @__PURE__ */ jsx20(React20.Fragment, { children: /* @__PURE__ */ jsxs10("label", { htmlFor: props.name, className: "block mb-1 w-full", children: [
|
|
719
|
+
/* @__PURE__ */ jsx20("span", { className: "text-sm font-medium ", children: (_a = props == null ? void 0 : props.attributes) == null ? void 0 : _a.label }),
|
|
720
|
+
/* @__PURE__ */ jsx20(
|
|
721
|
+
"input",
|
|
722
|
+
{
|
|
723
|
+
type: "text",
|
|
724
|
+
name: props.name,
|
|
725
|
+
id: props.name,
|
|
726
|
+
value,
|
|
727
|
+
onChange: textChangeHandler,
|
|
728
|
+
autoComplete: "off",
|
|
729
|
+
required: (_b = props == null ? void 0 : props.attributes) == null ? void 0 : _b.required,
|
|
730
|
+
placeholder: (_c = props == null ? void 0 : props.attributes) == null ? void 0 : _c.placeholder,
|
|
731
|
+
maxLength: 4,
|
|
732
|
+
pattern: (_d = props == null ? void 0 : props.attributes) == null ? void 0 : _d.pattern,
|
|
733
|
+
disabled: (_e = props == null ? void 0 : props.attributes) == null ? void 0 : _e.readOnly,
|
|
734
|
+
minLength: (_f = props == null ? void 0 : props.attributes) == null ? void 0 : _f.minLength,
|
|
735
|
+
autoFocus: (_g = props == null ? void 0 : props.attributes) == null ? void 0 : _g.autoFocus,
|
|
736
|
+
onWheel: handleWheel,
|
|
737
|
+
className: "peer mt-1 py-1.5 block w-full rounded border-gray-300 shadow-sm tracking-[1.25em] text-center\r\n focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
|
|
738
|
+
}
|
|
739
|
+
),
|
|
740
|
+
/* @__PURE__ */ jsx20("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 text-alert text-sm", children: ((_h = props == null ? void 0 : props.attributes) == null ? void 0 : _h.errorMessage) ? props.attributes.errorMessage : "" })
|
|
741
|
+
] }) });
|
|
742
|
+
};
|
|
743
|
+
var OtpInput_default = OtpInput;
|
|
744
|
+
|
|
745
|
+
// src/controls/edit/DateTimeInput.tsx
|
|
746
|
+
import React21 from "react";
|
|
747
|
+
|
|
748
|
+
// src/controls/utilities/DateTimeUtility.tsx
|
|
749
|
+
var DateTimeUtility = class {
|
|
750
|
+
constructor() {
|
|
751
|
+
}
|
|
752
|
+
static formatDate(date) {
|
|
753
|
+
if (!date) {
|
|
754
|
+
throw new Error("Invalid date");
|
|
755
|
+
}
|
|
756
|
+
const pad = (num) => num.toString().padStart(2, "0");
|
|
757
|
+
const year = date.getFullYear();
|
|
758
|
+
const month = pad(date.getMonth() + 1);
|
|
759
|
+
const day = pad(date.getDate());
|
|
760
|
+
const hours = pad(date.getHours());
|
|
761
|
+
const minutes = pad(date.getMinutes());
|
|
762
|
+
const seconds = pad(date.getSeconds());
|
|
763
|
+
return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
|
|
764
|
+
}
|
|
765
|
+
static getMonthShortNameCustom(month) {
|
|
766
|
+
const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
|
767
|
+
if (month < 1 || month > 12) {
|
|
768
|
+
throw new Error("Invalid month. Please provide a value between 1 and 12.");
|
|
769
|
+
}
|
|
770
|
+
return monthNames[month - 1];
|
|
771
|
+
}
|
|
772
|
+
static getCurrentWeekRange() {
|
|
773
|
+
const today = /* @__PURE__ */ new Date();
|
|
774
|
+
const day = today.getDay();
|
|
775
|
+
const diffToMonday = (day === 0 ? -6 : 1) - day;
|
|
776
|
+
const monday = new Date(today);
|
|
777
|
+
monday.setDate(today.getDate() + diffToMonday);
|
|
778
|
+
monday.setHours(0, 0, 0, 0);
|
|
779
|
+
const sunday = new Date(monday);
|
|
780
|
+
sunday.setDate(monday.getDate() + 6);
|
|
781
|
+
sunday.setHours(23, 59, 59, 999);
|
|
782
|
+
return { start: monday, end: sunday };
|
|
783
|
+
}
|
|
784
|
+
static getCurrentMonthRange() {
|
|
785
|
+
const now = /* @__PURE__ */ new Date();
|
|
786
|
+
const start = new Date(now.getFullYear(), now.getMonth(), 1);
|
|
787
|
+
const end = new Date(now.getFullYear(), now.getMonth() + 1, 0);
|
|
788
|
+
return { start, end };
|
|
789
|
+
}
|
|
790
|
+
static formatShortDate(date) {
|
|
791
|
+
const day = date.getDate();
|
|
792
|
+
const month = this.getMonthShortNameCustom(date.getMonth() + 1);
|
|
793
|
+
return `${day} ${month}`;
|
|
794
|
+
}
|
|
795
|
+
static formatIndianCurrencyShort(value) {
|
|
796
|
+
if (value >= 1e7) {
|
|
797
|
+
return `${(value / 1e7).toFixed(2)} Cr`;
|
|
798
|
+
} else if (value >= 1e5) {
|
|
799
|
+
return `${(value / 1e5).toFixed(2)} L`;
|
|
800
|
+
} else if (value >= 1e3) {
|
|
801
|
+
return `${(value / 1e3).toFixed(2)} K`;
|
|
802
|
+
} else {
|
|
803
|
+
return `${value}`;
|
|
804
|
+
}
|
|
805
|
+
}
|
|
806
|
+
};
|
|
807
|
+
var DateTimeUtility_default = DateTimeUtility;
|
|
808
|
+
|
|
809
|
+
// src/controls/edit/DateTimeInput.tsx
|
|
810
|
+
import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
811
|
+
var DateTimeInput = (props) => {
|
|
812
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
|
|
813
|
+
const textChangeHandler = (event) => {
|
|
814
|
+
const localDate = new Date(event.target.value);
|
|
815
|
+
if (props.callback !== void 0) {
|
|
816
|
+
const utcDate = new Date(localDate.getTime() + localDate.getTimezoneOffset() * 6e4);
|
|
817
|
+
let formattedDate = DateTimeUtility_default.formatDate(utcDate);
|
|
818
|
+
props.callback(
|
|
819
|
+
{
|
|
820
|
+
name: props.name,
|
|
821
|
+
value: formattedDate,
|
|
822
|
+
index: props.index,
|
|
823
|
+
groupKey: props.groupKey
|
|
824
|
+
}
|
|
825
|
+
);
|
|
826
|
+
}
|
|
827
|
+
};
|
|
828
|
+
let value;
|
|
829
|
+
let localvalue;
|
|
830
|
+
let timeZoneAbbr;
|
|
831
|
+
const now = /* @__PURE__ */ new Date();
|
|
832
|
+
const utcOffset = now.getTimezoneOffset();
|
|
833
|
+
if (props.value !== void 0 && props.value !== null) {
|
|
834
|
+
value = props.value;
|
|
835
|
+
const now2 = /* @__PURE__ */ new Date();
|
|
836
|
+
const offsetMinutes = now2.getTimezoneOffset();
|
|
837
|
+
const offsetMilliseconds = offsetMinutes * 60 * 1e3;
|
|
838
|
+
const valDate = value.toString().includes("Z") ? new Date(value) : /* @__PURE__ */ new Date(value + "Z");
|
|
839
|
+
let localDate = new Date(valDate.getTime() - offsetMilliseconds);
|
|
840
|
+
timeZoneAbbr = now2.toLocaleTimeString("en", { timeZoneName: "short" }).split(" ")[2];
|
|
841
|
+
localvalue = (_a = localDate == null ? void 0 : localDate.toISOString()) == null ? void 0 : _a.slice(0, 16);
|
|
842
|
+
}
|
|
843
|
+
return /* @__PURE__ */ jsx21(React21.Fragment, { children: /* @__PURE__ */ jsxs11("label", { className: "block mb-1", children: [
|
|
844
|
+
/* @__PURE__ */ jsx21("span", { className: "text-sm font-medium ", children: (_b = props == null ? void 0 : props.attributes) == null ? void 0 : _b.label }),
|
|
845
|
+
" ",
|
|
846
|
+
((_c = props == null ? void 0 : props.attributes) == null ? void 0 : _c.label) && ((_d = props == null ? void 0 : props.attributes) == null ? void 0 : _d.required) && /* @__PURE__ */ jsx21("span", { className: "text-alert", children: "*" }),
|
|
847
|
+
/* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
|
|
848
|
+
/* @__PURE__ */ jsx21(
|
|
849
|
+
"input",
|
|
850
|
+
{
|
|
851
|
+
type: "datetime-local",
|
|
852
|
+
name: props.name,
|
|
853
|
+
id: props.name,
|
|
854
|
+
value: localvalue,
|
|
855
|
+
onChange: textChangeHandler,
|
|
856
|
+
required: (_e = props == null ? void 0 : props.attributes) == null ? void 0 : _e.required,
|
|
857
|
+
placeholder: (_f = props == null ? void 0 : props.attributes) == null ? void 0 : _f.placeholder,
|
|
858
|
+
maxLength: (_g = props == null ? void 0 : props.attributes) == null ? void 0 : _g.maxLength,
|
|
859
|
+
pattern: (_h = props == null ? void 0 : props.attributes) == null ? void 0 : _h.pattern,
|
|
860
|
+
disabled: (_i = props == null ? void 0 : props.attributes) == null ? void 0 : _i.readOnly,
|
|
861
|
+
minLength: (_j = props == null ? void 0 : props.attributes) == null ? void 0 : _j.minLength,
|
|
862
|
+
className: "peer mt-1 py-1.5 block w-full rounded border-gray-300 shadow-sm\r\n focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50\r\n disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none\r\n "
|
|
863
|
+
}
|
|
864
|
+
),
|
|
865
|
+
/* @__PURE__ */ jsx21("span", { children: timeZoneAbbr })
|
|
866
|
+
] }),
|
|
867
|
+
/* @__PURE__ */ jsx21("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 text-alert text-sm", children: ((_k = props == null ? void 0 : props.attributes) == null ? void 0 : _k.errorMessage) ? props.attributes.errorMessage : "" })
|
|
868
|
+
] }) });
|
|
869
|
+
};
|
|
870
|
+
var DateTimeInput_default = DateTimeInput;
|
|
871
|
+
|
|
872
|
+
// src/controls/edit/ColorInput.tsx
|
|
873
|
+
import React22, { useEffect as useEffect2 } from "react";
|
|
874
|
+
import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
875
|
+
var ColorInput = (props) => {
|
|
876
|
+
var _a, _b, _c, _d, _e;
|
|
877
|
+
const [color, setColor] = React22.useState("#3b82f6");
|
|
878
|
+
useEffect2(() => {
|
|
879
|
+
if (props.value !== void 0 && props.value !== null) {
|
|
880
|
+
if (typeof props.value === "string") {
|
|
881
|
+
setColor(props.value);
|
|
882
|
+
}
|
|
883
|
+
}
|
|
884
|
+
}, [props.value]);
|
|
885
|
+
const handleColorChange = (event) => {
|
|
886
|
+
const newColor = event.target.value;
|
|
887
|
+
setColor(newColor);
|
|
888
|
+
if (props.callback) {
|
|
889
|
+
props.callback(
|
|
890
|
+
{
|
|
891
|
+
name: props.name,
|
|
892
|
+
value: newColor,
|
|
893
|
+
index: props.index,
|
|
894
|
+
groupKey: props.groupKey
|
|
895
|
+
}
|
|
896
|
+
);
|
|
897
|
+
}
|
|
898
|
+
};
|
|
899
|
+
return /* @__PURE__ */ jsxs12("label", { className: "block mb-1", children: [
|
|
900
|
+
/* @__PURE__ */ jsx22("span", { className: "text-sm font-medium", children: (_a = props == null ? void 0 : props.attributes) == null ? void 0 : _a.label }),
|
|
901
|
+
" ",
|
|
902
|
+
((_b = props == null ? void 0 : props.attributes) == null ? void 0 : _b.label) && ((_c = props == null ? void 0 : props.attributes) == null ? void 0 : _c.required) && /* @__PURE__ */ jsx22("span", { className: "text-alert", children: "*" }),
|
|
903
|
+
/* @__PURE__ */ jsx22(
|
|
904
|
+
"input",
|
|
905
|
+
{
|
|
906
|
+
type: "color",
|
|
907
|
+
name: props.name,
|
|
908
|
+
id: props.name,
|
|
909
|
+
value: color,
|
|
910
|
+
onChange: handleColorChange,
|
|
911
|
+
required: (_d = props == null ? void 0 : props.attributes) == null ? void 0 : _d.required,
|
|
912
|
+
className: `w-[88px] h-12 block cursor-pointer focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50`
|
|
913
|
+
}
|
|
914
|
+
),
|
|
915
|
+
((_e = props == null ? void 0 : props.attributes) == null ? void 0 : _e.errorMessage) && /* @__PURE__ */ jsx22("p", { className: "mt-1 text-alert text-sm", children: props.attributes.errorMessage })
|
|
916
|
+
] });
|
|
917
|
+
};
|
|
918
|
+
var ColorInput_default = ColorInput;
|
|
919
|
+
|
|
920
|
+
// src/controls/edit/SelectWithSearchInput.tsx
|
|
921
|
+
import { useEffect as useEffect3, useRef, useState as useState2 } from "react";
|
|
922
|
+
import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
923
|
+
var SelectWithSearchInput = (props) => {
|
|
924
|
+
var _a, _b;
|
|
925
|
+
const [isOpen, setIsOpen] = useState2(false);
|
|
926
|
+
const [searchTerm, setSearchTerm] = useState2("");
|
|
927
|
+
const [highlightedIndex, setHighlightedIndex] = useState2(-1);
|
|
928
|
+
const [selectedItem, setSelectedItem] = useState2(null);
|
|
929
|
+
const [list, setList] = useState2([]);
|
|
930
|
+
useEffect3(() => {
|
|
931
|
+
async function fetchData() {
|
|
932
|
+
if (props.dataset) {
|
|
933
|
+
setList(props.dataset);
|
|
934
|
+
} else if (props.dataSource && props.serviceClient) {
|
|
935
|
+
let dataSource = props.dataSource;
|
|
936
|
+
if (props.dataSourceDependsOn && props.dependentValue) {
|
|
937
|
+
dataSource = dataSource.replace(
|
|
938
|
+
`{${props.dataSourceDependsOn}}`,
|
|
939
|
+
props.dependentValue
|
|
940
|
+
);
|
|
941
|
+
}
|
|
942
|
+
const response = await props.serviceClient.get(dataSource);
|
|
943
|
+
if (response == null ? void 0 : response.result) setList(response.result);
|
|
944
|
+
}
|
|
945
|
+
}
|
|
946
|
+
fetchData();
|
|
947
|
+
}, [
|
|
948
|
+
props.dataSource,
|
|
949
|
+
props.dependentValue,
|
|
950
|
+
props.dataset,
|
|
951
|
+
props.dataSourceDependsOn
|
|
952
|
+
]);
|
|
953
|
+
const filteredItems = list == null ? void 0 : list.filter(
|
|
954
|
+
(item) => {
|
|
955
|
+
var _a2;
|
|
956
|
+
return (_a2 = item[props == null ? void 0 : props.dataTextFieldName]) == null ? void 0 : _a2.toLowerCase().includes(searchTerm.toLowerCase());
|
|
957
|
+
}
|
|
958
|
+
);
|
|
959
|
+
const handleSelect = (event, item) => {
|
|
960
|
+
event.preventDefault();
|
|
961
|
+
setSearchTerm(item[props.dataTextFieldName]);
|
|
962
|
+
setSelectedItem(item);
|
|
963
|
+
setIsOpen(false);
|
|
964
|
+
setHighlightedIndex(-1);
|
|
965
|
+
if (props.callback) {
|
|
966
|
+
props.callback({
|
|
967
|
+
name: props.name,
|
|
968
|
+
value: item[props.dataKeyFieldName],
|
|
969
|
+
index: props.index,
|
|
970
|
+
groupKey: props.groupKey
|
|
971
|
+
});
|
|
972
|
+
}
|
|
973
|
+
};
|
|
974
|
+
const handleKeyDown = (e) => {
|
|
975
|
+
if (e.key === "ArrowDown") {
|
|
976
|
+
setHighlightedIndex(
|
|
977
|
+
(prev) => prev < filteredItems.length - 1 ? prev + 1 : 0
|
|
978
|
+
);
|
|
979
|
+
} else if (e.key === "ArrowUp") {
|
|
980
|
+
setHighlightedIndex(
|
|
981
|
+
(prev) => prev > 0 ? prev - 1 : filteredItems.length - 1
|
|
982
|
+
);
|
|
983
|
+
} else if (e.key === "Enter" && highlightedIndex >= 0) {
|
|
984
|
+
handleSelect(e, filteredItems[highlightedIndex]);
|
|
985
|
+
}
|
|
986
|
+
};
|
|
987
|
+
const dropdownRef = useRef(null);
|
|
988
|
+
useEffect3(() => {
|
|
989
|
+
if (highlightedIndex >= 0 && dropdownRef.current) {
|
|
990
|
+
const highlightedItem = dropdownRef.current.children[highlightedIndex];
|
|
991
|
+
highlightedItem == null ? void 0 : highlightedItem.scrollIntoView({
|
|
992
|
+
behavior: "smooth",
|
|
993
|
+
block: "nearest"
|
|
994
|
+
});
|
|
995
|
+
}
|
|
996
|
+
}, [highlightedIndex]);
|
|
997
|
+
return /* @__PURE__ */ jsxs13("div", { className: "relative", children: [
|
|
998
|
+
/* @__PURE__ */ jsx23("label", { children: (_a = props.attributes) == null ? void 0 : _a.label }),
|
|
999
|
+
" ",
|
|
1000
|
+
((_b = props == null ? void 0 : props.attributes) == null ? void 0 : _b.required) && /* @__PURE__ */ jsx23("span", { className: "text-alert", children: "*" }),
|
|
1001
|
+
/* @__PURE__ */ jsxs13("div", { className: "relative", children: [
|
|
1002
|
+
/* @__PURE__ */ jsx23(
|
|
1003
|
+
"input",
|
|
1004
|
+
{
|
|
1005
|
+
type: "text",
|
|
1006
|
+
value: searchTerm,
|
|
1007
|
+
onChange: (e) => {
|
|
1008
|
+
setSearchTerm(e.target.value);
|
|
1009
|
+
setIsOpen(true);
|
|
1010
|
+
setHighlightedIndex(-1);
|
|
1011
|
+
},
|
|
1012
|
+
onFocus: () => setIsOpen(true),
|
|
1013
|
+
onKeyDown: handleKeyDown,
|
|
1014
|
+
placeholder: "Select or search for a name",
|
|
1015
|
+
className: "peer py-1.5 block w-full text-black rounded border-gray-300 shadow-sm\r\n focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50\r\n disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none\r\n "
|
|
1016
|
+
}
|
|
1017
|
+
),
|
|
1018
|
+
/* @__PURE__ */ jsx23(
|
|
1019
|
+
"button",
|
|
1020
|
+
{
|
|
1021
|
+
type: "button",
|
|
1022
|
+
onClick: () => setIsOpen(!isOpen),
|
|
1023
|
+
className: "absolute right-2 top-3 h-5 w-5 text-gray-500 focus:outline-none",
|
|
1024
|
+
children: /* @__PURE__ */ jsx23(
|
|
1025
|
+
"svg",
|
|
1026
|
+
{
|
|
1027
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1028
|
+
fill: "none",
|
|
1029
|
+
viewBox: "0 0 24 24",
|
|
1030
|
+
strokeWidth: 1.5,
|
|
1031
|
+
stroke: "currentColor",
|
|
1032
|
+
className: "w-full h-full",
|
|
1033
|
+
children: /* @__PURE__ */ jsx23(
|
|
1034
|
+
"path",
|
|
1035
|
+
{
|
|
1036
|
+
strokeLinecap: "round",
|
|
1037
|
+
strokeLinejoin: "round",
|
|
1038
|
+
d: "M19.5 8.25l-7.5 7.5-7.5-7.5"
|
|
1039
|
+
}
|
|
1040
|
+
)
|
|
1041
|
+
}
|
|
1042
|
+
)
|
|
1043
|
+
}
|
|
1044
|
+
)
|
|
1045
|
+
] }),
|
|
1046
|
+
isOpen && /* @__PURE__ */ jsx23(
|
|
1047
|
+
"div",
|
|
1048
|
+
{
|
|
1049
|
+
ref: dropdownRef,
|
|
1050
|
+
className: "absolute z-10 mt-2 w-full bg-white border border-gray-200 rounded-md shadow-lg max-h-48 overflow-y-auto",
|
|
1051
|
+
children: filteredItems.length > 0 ? filteredItems.map((item, index) => /* @__PURE__ */ jsx23(
|
|
1052
|
+
"button",
|
|
1053
|
+
{
|
|
1054
|
+
onClick: (e) => handleSelect(e, item),
|
|
1055
|
+
className: `w-full px-4 py-2 flex items-center space-x-2 text-left ${index === highlightedIndex ? "bg-gray-200" : "hover:bg-gray-100"}`,
|
|
1056
|
+
role: "option",
|
|
1057
|
+
tabIndex: -1,
|
|
1058
|
+
onMouseEnter: () => setHighlightedIndex(index),
|
|
1059
|
+
children: /* @__PURE__ */ jsx23("span", { children: item[props.dataTextFieldName] })
|
|
1060
|
+
},
|
|
1061
|
+
item[props.dataKeyFieldName]
|
|
1062
|
+
)) : /* @__PURE__ */ jsx23("div", { className: "px-4 py-2 text-gray-500", children: "No results found" })
|
|
1063
|
+
}
|
|
1064
|
+
)
|
|
1065
|
+
] });
|
|
1066
|
+
};
|
|
1067
|
+
var SelectWithSearchInput_default = SelectWithSearchInput;
|
|
1068
|
+
|
|
1069
|
+
// src/controls/components/Button.tsx
|
|
1070
|
+
import React26, { useState as useState4 } from "react";
|
|
1071
|
+
|
|
1072
|
+
// src/controls/components/ToastService.tsx
|
|
1073
|
+
var ToastService = class _ToastService {
|
|
1074
|
+
static initialize(showToast, closeToast) {
|
|
1075
|
+
_ToastService.showToast = showToast;
|
|
1076
|
+
_ToastService.closeToast = closeToast;
|
|
1077
|
+
}
|
|
1078
|
+
static showError(message) {
|
|
1079
|
+
if (_ToastService.showToast) {
|
|
1080
|
+
_ToastService.showToast(message, "error");
|
|
1081
|
+
}
|
|
1082
|
+
}
|
|
1083
|
+
static showInfo(message) {
|
|
1084
|
+
if (_ToastService.showToast) {
|
|
1085
|
+
_ToastService.showToast(message, "info");
|
|
1086
|
+
}
|
|
1087
|
+
}
|
|
1088
|
+
static close() {
|
|
1089
|
+
if (_ToastService.closeToast) {
|
|
1090
|
+
_ToastService.closeToast();
|
|
1091
|
+
}
|
|
1092
|
+
}
|
|
1093
|
+
};
|
|
1094
|
+
var ToastService_default = ToastService;
|
|
1095
|
+
|
|
1096
|
+
// src/controls/components/StyleTypes.tsx
|
|
1097
|
+
var buttonClasses = /* @__PURE__ */ new Map([
|
|
1098
|
+
["Primary" /* Primary */, "relative inline-flex items-center justify-center bg-primary rounded px-4 py-3 lg:py-2 font-medium shadow-sm hover:shadow-lg hover:bg-primary-strong focus:outline-none active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out text-body"],
|
|
1099
|
+
["Secondary" /* Secondary */, "relative inline-flex items-center justify-center bg-gradient-to-b from-secondary to-secondary-strong rounded px-4 py-3 lg:py-2 font-medium shadow-sm hover:shadow-lg focus:outline-none active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out text-body hover:bg-secondary-strong"],
|
|
1100
|
+
["Neutral" /* Neutral */, "relative inline-flex items-center justify-center bg-neutral-strong rounded px-4 py-3 lg:py-2 font-medium shadow-sm hover:shadow-lg focus:outline-none active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out text-body hover:bg-neutral-stronger"],
|
|
1101
|
+
["PrimaryHollow" /* PrimaryHollow */, "inline-flex font-medium items-center justify-center px-4 py-3 lg:py-2 transparent border-primary border text-primary rounded hover:shadow-md focus:outline-none transition duration-150 ease-in-out active:scale-95"],
|
|
1102
|
+
["SecondaryHollow" /* SecondaryHollow */, "inline-flex font-medium items-center justify-center px-4 py-3 lg:py-2 transparent border-secondary border text-secondary rounded hover:shadow-md focus:outline-none transition duration-150 ease-in-out active:scale-95"],
|
|
1103
|
+
["NeutralHollow" /* NeutralHollow */, "inline-flex font-medium items-center justify-center px-4 py-3 lg:py-2 transparent border-neutral border text-neutral rounded hover:shadow-md focus:outline-none transition duration-150 ease-in-out active:scale-95"],
|
|
1104
|
+
["Ripple" /* Ripple */, "px-3 py-1.5 inline-flex items-center text-sm font-medium rounded border-[1.5px] border-primary ripple btn-bg-primary btn-primary-text"],
|
|
1105
|
+
["Danger" /* Danger */, "inline-flex text-sm font-medium items-center justify-center px-4 py-2 border border-alert bg-alert text-white rounded hover:bg-alert-600 hover:border-alert-600 focus:outline-none active:ring-1 active:ring-alert"],
|
|
1106
|
+
["Link" /* Link */, ""],
|
|
1107
|
+
["Light" /* Light */, "inline-flex items-center justify-center rounded bg-white border px-4 py-2 leading-6 text-primary shadow-sm hover:shadow focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:cursor-not-allowed"]
|
|
1108
|
+
]);
|
|
1109
|
+
var progressClasses = /* @__PURE__ */ new Map([
|
|
1110
|
+
["Primary" /* Primary */, ""],
|
|
1111
|
+
["PrimaryHollow" /* PrimaryHollow */, ""],
|
|
1112
|
+
["Secondary" /* Secondary */, ""],
|
|
1113
|
+
["SecondaryHollow" /* SecondaryHollow */, ""],
|
|
1114
|
+
["Neutral" /* Neutral */, ""],
|
|
1115
|
+
["NeutralHollow" /* NeutralHollow */, ""],
|
|
1116
|
+
["Ripple" /* Ripple */, ""],
|
|
1117
|
+
["Danger" /* Danger */, ""],
|
|
1118
|
+
["Link" /* Link */, ""]
|
|
1119
|
+
]);
|
|
1120
|
+
|
|
1121
|
+
// src/controls/components/Confirm.tsx
|
|
1122
|
+
import { useState as useState3 } from "react";
|
|
1123
|
+
|
|
1124
|
+
// src/controls/components/ClientButton.tsx
|
|
1125
|
+
import React24 from "react";
|
|
1126
|
+
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
1127
|
+
var ClientButton = (props) => {
|
|
1128
|
+
const execute = async (event) => {
|
|
1129
|
+
event.preventDefault();
|
|
1130
|
+
if (props.onClick !== void 0) {
|
|
1131
|
+
props.onClick();
|
|
1132
|
+
} else {
|
|
1133
|
+
ToastService_default.showError("No action defined.");
|
|
1134
|
+
}
|
|
1135
|
+
};
|
|
1136
|
+
let buttonClass = props.ButtonType ? buttonClasses.get(props.ButtonType) : buttonClasses.get("Primary" /* Primary */);
|
|
1137
|
+
return /* @__PURE__ */ jsx24(React24.Fragment, { children: /* @__PURE__ */ jsx24(
|
|
1138
|
+
"button",
|
|
1139
|
+
{
|
|
1140
|
+
type: "button",
|
|
1141
|
+
onClick: execute,
|
|
1142
|
+
"data-role": props.dataRole,
|
|
1143
|
+
disabled: props.disabled,
|
|
1144
|
+
tabIndex: props.tabIndex,
|
|
1145
|
+
className: buttonClass + " " + props.className,
|
|
1146
|
+
children: props.children
|
|
1147
|
+
}
|
|
1148
|
+
) });
|
|
1149
|
+
};
|
|
1150
|
+
var ClientButton_default = ClientButton;
|
|
1151
|
+
|
|
1152
|
+
// src/controls/components/Confirm.tsx
|
|
1153
|
+
import { Fragment, jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1154
|
+
var Confirm = ({ message, onConfirm, onCancel }) => {
|
|
1155
|
+
const [showModal, setShowModal] = useState3(true);
|
|
1156
|
+
const handleConfirmAction = () => {
|
|
1157
|
+
setShowModal(false);
|
|
1158
|
+
if (onConfirm) {
|
|
1159
|
+
onConfirm();
|
|
1160
|
+
}
|
|
1161
|
+
};
|
|
1162
|
+
const handleCancelAction = () => {
|
|
1163
|
+
setShowModal(false);
|
|
1164
|
+
if (onCancel) {
|
|
1165
|
+
onCancel();
|
|
1166
|
+
}
|
|
1167
|
+
};
|
|
1168
|
+
return /* @__PURE__ */ jsx25(Fragment, { children: showModal && /* @__PURE__ */ jsxs14("div", { className: "fixed inset-0 flex items-center justify-center z-20", children: [
|
|
1169
|
+
/* @__PURE__ */ jsx25("div", { className: "absolute inset-0 bg-black opacity-70" }),
|
|
1170
|
+
/* @__PURE__ */ jsxs14("div", { className: "bg-white rounded-md p-6 shadow border z-50", children: [
|
|
1171
|
+
/* @__PURE__ */ jsx25("p", { className: "text-xl font-semibold mb-4", children: "Confirmation" }),
|
|
1172
|
+
/* @__PURE__ */ jsx25("p", { className: "mb-4", children: message }),
|
|
1173
|
+
/* @__PURE__ */ jsxs14("div", { className: "flex justify-end gap-8", children: [
|
|
1174
|
+
/* @__PURE__ */ jsx25(
|
|
1175
|
+
ClientButton_default,
|
|
1176
|
+
{
|
|
1177
|
+
onClick: handleCancelAction,
|
|
1178
|
+
ButtonType: "PrimaryHollow" /* PrimaryHollow */,
|
|
1179
|
+
children: "Cancel"
|
|
1180
|
+
}
|
|
1181
|
+
),
|
|
1182
|
+
/* @__PURE__ */ jsx25(
|
|
1183
|
+
ClientButton_default,
|
|
1184
|
+
{
|
|
1185
|
+
onClick: handleConfirmAction,
|
|
1186
|
+
children: "Confirm"
|
|
1187
|
+
}
|
|
1188
|
+
)
|
|
1189
|
+
] })
|
|
1190
|
+
] })
|
|
1191
|
+
] }) });
|
|
1192
|
+
};
|
|
1193
|
+
var Confirm_default = Confirm;
|
|
1194
|
+
{
|
|
1195
|
+
}
|
|
1196
|
+
|
|
1197
|
+
// src/controls/components/Button.tsx
|
|
1198
|
+
import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1199
|
+
var Button = (props) => {
|
|
1200
|
+
const [inProgress, setInProgress] = useState4(false);
|
|
1201
|
+
const [isActionPerformed, setIsActionPerformed] = useState4(false);
|
|
1202
|
+
const [responseMessage, setResponseMessage] = useState4(null);
|
|
1203
|
+
const [showModal, setShowModal] = useState4(null);
|
|
1204
|
+
const execute = async (event) => {
|
|
1205
|
+
event.preventDefault();
|
|
1206
|
+
if (props.confirm) {
|
|
1207
|
+
const confirmed = await showConfirmation(
|
|
1208
|
+
"Are you sure you want to delete this item?"
|
|
1209
|
+
);
|
|
1210
|
+
setShowModal(null);
|
|
1211
|
+
if (!confirmed) {
|
|
1212
|
+
return;
|
|
1213
|
+
}
|
|
1214
|
+
}
|
|
1215
|
+
if (props.oneTimeAction && isActionPerformed) {
|
|
1216
|
+
return;
|
|
1217
|
+
}
|
|
1218
|
+
setInProgress(true);
|
|
1219
|
+
let isValid = true;
|
|
1220
|
+
if (props.onValidate !== void 0) {
|
|
1221
|
+
isValid = await props.onValidate();
|
|
1222
|
+
if (!isValid) {
|
|
1223
|
+
setInProgress(false);
|
|
1224
|
+
ToastService_default.showError(
|
|
1225
|
+
"There are error in the form. Please fix them before proceeding."
|
|
1226
|
+
);
|
|
1227
|
+
return;
|
|
1228
|
+
}
|
|
1229
|
+
}
|
|
1230
|
+
if (props.onClick !== void 0) {
|
|
1231
|
+
let response = await props.onClick(props.index);
|
|
1232
|
+
console.log(response);
|
|
1233
|
+
if (response.isSuccessful) {
|
|
1234
|
+
setIsActionPerformed(true);
|
|
1235
|
+
setResponseMessage(response.message);
|
|
1236
|
+
if (props.showToast) {
|
|
1237
|
+
ToastService_default.showInfo(response.message || "");
|
|
1238
|
+
}
|
|
1239
|
+
} else {
|
|
1240
|
+
ToastService_default.showError(response.message || "");
|
|
1241
|
+
}
|
|
1242
|
+
} else {
|
|
1243
|
+
ToastService_default.showError("No action defined.");
|
|
1244
|
+
}
|
|
1245
|
+
setInProgress(false);
|
|
1246
|
+
};
|
|
1247
|
+
const showConfirmation = (message) => {
|
|
1248
|
+
return new Promise((resolve) => {
|
|
1249
|
+
const onConfirm = () => resolve(true);
|
|
1250
|
+
const onCancel = () => resolve(false);
|
|
1251
|
+
setShowModal(
|
|
1252
|
+
/* @__PURE__ */ jsx26(
|
|
1253
|
+
Confirm_default,
|
|
1254
|
+
{
|
|
1255
|
+
message: props.confirmationMessage,
|
|
1256
|
+
onConfirm,
|
|
1257
|
+
onCancel
|
|
1258
|
+
}
|
|
1259
|
+
)
|
|
1260
|
+
);
|
|
1261
|
+
});
|
|
1262
|
+
};
|
|
1263
|
+
let buttonClass = props.ButtonType ? buttonClasses.get(props.ButtonType) : buttonClasses.get("Primary" /* Primary */);
|
|
1264
|
+
let progressClass = props.ButtonType ? progressClasses.get(props.ButtonType) : progressClasses.get("Primary" /* Primary */);
|
|
1265
|
+
return /* @__PURE__ */ jsxs15(React26.Fragment, { children: [
|
|
1266
|
+
/* @__PURE__ */ jsxs15(
|
|
1267
|
+
"button",
|
|
1268
|
+
{
|
|
1269
|
+
type: "submit",
|
|
1270
|
+
onClick: execute,
|
|
1271
|
+
id: props.id,
|
|
1272
|
+
disabled: props.disabled,
|
|
1273
|
+
className: buttonClass + " relative " + (props.className || "") + (props.isActive ? " scale-95 shadow-inner" : ""),
|
|
1274
|
+
children: [
|
|
1275
|
+
isActionPerformed && props.oneTimeAction && responseMessage ? responseMessage : props.children,
|
|
1276
|
+
inProgress && /* @__PURE__ */ jsx26(React26.Fragment, { children: props.hideProgressIndicator === true ? /* @__PURE__ */ jsx26("div", { className: "absolute bottom-0 left-0 h-0.5 bg-gray-400 rounded animate-progress" }) : /* @__PURE__ */ jsxs15(
|
|
1277
|
+
"svg",
|
|
1278
|
+
{
|
|
1279
|
+
className: "animate-spin ml-2 mr-3 h-5 w-5 " + progressClass,
|
|
1280
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1281
|
+
fill: "none",
|
|
1282
|
+
viewBox: "0 0 24 24",
|
|
1283
|
+
children: [
|
|
1284
|
+
/* @__PURE__ */ jsx26(
|
|
1285
|
+
"circle",
|
|
1286
|
+
{
|
|
1287
|
+
className: "opacity-25",
|
|
1288
|
+
cx: "12",
|
|
1289
|
+
cy: "12",
|
|
1290
|
+
r: "10",
|
|
1291
|
+
stroke: "currentColor",
|
|
1292
|
+
strokeWidth: "4"
|
|
1293
|
+
}
|
|
1294
|
+
),
|
|
1295
|
+
/* @__PURE__ */ jsx26(
|
|
1296
|
+
"path",
|
|
1297
|
+
{
|
|
1298
|
+
className: "opacity-75",
|
|
1299
|
+
fill: "currentColor",
|
|
1300
|
+
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
1301
|
+
}
|
|
1302
|
+
)
|
|
1303
|
+
]
|
|
1304
|
+
}
|
|
1305
|
+
) })
|
|
1306
|
+
]
|
|
1307
|
+
}
|
|
1308
|
+
),
|
|
1309
|
+
showModal
|
|
1310
|
+
] });
|
|
1311
|
+
};
|
|
1312
|
+
var Button_default = Button;
|
|
1313
|
+
|
|
1314
|
+
// src/controls/edit/SelectWithSearchPanel.tsx
|
|
1315
|
+
import React27, { useEffect as useEffect4, useRef as useRef2, useState as useState5, useCallback } from "react";
|
|
1316
|
+
import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1317
|
+
var SelectWithSearchPanel = (props) => {
|
|
1318
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
1319
|
+
const [isOpen, setIsOpen] = useState5(false);
|
|
1320
|
+
const [searchTerm, setSearchTerm] = useState5("");
|
|
1321
|
+
const [highlightedIndex, setHighlightedIndex] = useState5(0);
|
|
1322
|
+
const [list, setList] = useState5([]);
|
|
1323
|
+
const listRef = useRef2(null);
|
|
1324
|
+
const [isError, setIsError] = useState5(false);
|
|
1325
|
+
const containerRef = useRef2(null);
|
|
1326
|
+
const [isCreateOpen, setIsCreateOpen] = useState5(false);
|
|
1327
|
+
const [formData, setFormData] = useState5({});
|
|
1328
|
+
const getNestedValue = (obj, path) => {
|
|
1329
|
+
return path.split(".").reduce((acc, key) => acc == null ? void 0 : acc[key], obj);
|
|
1330
|
+
};
|
|
1331
|
+
useEffect4(() => {
|
|
1332
|
+
const handleClickOutside = (event) => {
|
|
1333
|
+
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
1334
|
+
setIsOpen(false);
|
|
1335
|
+
}
|
|
1336
|
+
};
|
|
1337
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
1338
|
+
return () => {
|
|
1339
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
1340
|
+
};
|
|
1341
|
+
}, []);
|
|
1342
|
+
useEffect4(() => {
|
|
1343
|
+
async function fetchData() {
|
|
1344
|
+
if (props.dataset) {
|
|
1345
|
+
setList(props.dataset);
|
|
1346
|
+
} else if (props.dataSource && props.serviceClient) {
|
|
1347
|
+
let dataSource = props.dataSource;
|
|
1348
|
+
if (props.dataSourceDependsOn && props.dependentValue) {
|
|
1349
|
+
dataSource = dataSource.replace(`{${props.dataSourceDependsOn}}`, props.dependentValue);
|
|
1350
|
+
}
|
|
1351
|
+
const response = await props.serviceClient.get(dataSource);
|
|
1352
|
+
if (response == null ? void 0 : response.result) setList(response.result);
|
|
1353
|
+
}
|
|
1354
|
+
}
|
|
1355
|
+
fetchData();
|
|
1356
|
+
}, [props.dataSource, props.dependentValue, props.dataset, props.dataSourceDependsOn]);
|
|
1357
|
+
const filteredItems = list == null ? void 0 : list.filter((item) => {
|
|
1358
|
+
const value = getNestedValue(item, props.dataTextFieldName);
|
|
1359
|
+
return value == null ? void 0 : value.toLowerCase().includes(searchTerm == null ? void 0 : searchTerm.toLowerCase());
|
|
1360
|
+
});
|
|
1361
|
+
const playBeep = () => {
|
|
1362
|
+
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
|
|
1363
|
+
const oscillator = audioCtx.createOscillator();
|
|
1364
|
+
const gainNode = audioCtx.createGain();
|
|
1365
|
+
oscillator.type = "square";
|
|
1366
|
+
oscillator.frequency.setValueAtTime(300, audioCtx.currentTime);
|
|
1367
|
+
gainNode.gain.setValueAtTime(0.02, audioCtx.currentTime);
|
|
1368
|
+
oscillator.connect(gainNode);
|
|
1369
|
+
gainNode.connect(audioCtx.destination);
|
|
1370
|
+
oscillator.start();
|
|
1371
|
+
setTimeout(() => {
|
|
1372
|
+
oscillator.stop();
|
|
1373
|
+
audioCtx.close();
|
|
1374
|
+
}, 250);
|
|
1375
|
+
};
|
|
1376
|
+
useEffect4(() => {
|
|
1377
|
+
const filteredItems2 = list == null ? void 0 : list.filter(
|
|
1378
|
+
(item) => {
|
|
1379
|
+
var _a2;
|
|
1380
|
+
return (_a2 = item[props == null ? void 0 : props.dataTextFieldName]) == null ? void 0 : _a2.toLowerCase().includes(searchTerm == null ? void 0 : searchTerm.toLowerCase());
|
|
1381
|
+
}
|
|
1382
|
+
);
|
|
1383
|
+
if (searchTerm.length > 0 && filteredItems2.length === 0) {
|
|
1384
|
+
playBeep();
|
|
1385
|
+
setIsError(true);
|
|
1386
|
+
} else {
|
|
1387
|
+
setIsError(false);
|
|
1388
|
+
}
|
|
1389
|
+
}, [searchTerm]);
|
|
1390
|
+
const handleSelect = (event, item) => {
|
|
1391
|
+
event.preventDefault();
|
|
1392
|
+
setSearchTerm(getNestedValue(item, props.dataTextFieldName));
|
|
1393
|
+
if (props.callback) {
|
|
1394
|
+
const val = {};
|
|
1395
|
+
props.callback({
|
|
1396
|
+
name: props.name,
|
|
1397
|
+
value: item[props.dataKeyFieldName],
|
|
1398
|
+
index: props.index,
|
|
1399
|
+
groupKey: props.groupKey
|
|
1400
|
+
});
|
|
1401
|
+
}
|
|
1402
|
+
setHighlightedIndex(0);
|
|
1403
|
+
setIsOpen(false);
|
|
1404
|
+
};
|
|
1405
|
+
const handleKeyDown = (e) => {
|
|
1406
|
+
if (e.key === "Escape") {
|
|
1407
|
+
setIsOpen(false);
|
|
1408
|
+
setHighlightedIndex(-1);
|
|
1409
|
+
} else if (e.key === "ArrowDown") {
|
|
1410
|
+
e.preventDefault();
|
|
1411
|
+
setHighlightedIndex((prev) => {
|
|
1412
|
+
const nextIndex = prev < filteredItems.length - 1 ? prev + 1 : prev;
|
|
1413
|
+
scrollIntoView(nextIndex);
|
|
1414
|
+
return nextIndex;
|
|
1415
|
+
});
|
|
1416
|
+
} else if (e.key === "ArrowUp") {
|
|
1417
|
+
e.preventDefault();
|
|
1418
|
+
setHighlightedIndex((prev) => {
|
|
1419
|
+
const prevIndex = prev > 0 ? prev - 1 : prev;
|
|
1420
|
+
scrollIntoView(prevIndex);
|
|
1421
|
+
return prevIndex;
|
|
1422
|
+
});
|
|
1423
|
+
} else if (e.key === "Enter" && highlightedIndex >= 0) {
|
|
1424
|
+
handleSelect(e, filteredItems[highlightedIndex]);
|
|
1425
|
+
}
|
|
1426
|
+
};
|
|
1427
|
+
const scrollIntoView = (index) => {
|
|
1428
|
+
if (listRef.current) {
|
|
1429
|
+
const item = listRef.current.children[index];
|
|
1430
|
+
if (item) {
|
|
1431
|
+
item.scrollIntoView();
|
|
1432
|
+
}
|
|
1433
|
+
}
|
|
1434
|
+
};
|
|
1435
|
+
const textChangeHandler = (event) => {
|
|
1436
|
+
const newSearchTerm = event.target.value;
|
|
1437
|
+
setSearchTerm(newSearchTerm);
|
|
1438
|
+
setIsOpen(true);
|
|
1439
|
+
setHighlightedIndex(0);
|
|
1440
|
+
};
|
|
1441
|
+
const handleInputChange = (event, field) => {
|
|
1442
|
+
setFormData((prev) => __spreadProps(__spreadValues({}, prev), { [field]: event.target.value }));
|
|
1443
|
+
};
|
|
1444
|
+
const handleSaveModal = useCallback(async (index) => {
|
|
1445
|
+
console.log("Form Data:", formData);
|
|
1446
|
+
return {
|
|
1447
|
+
isSuccessful: true,
|
|
1448
|
+
result: formData
|
|
1449
|
+
};
|
|
1450
|
+
}, [formData]);
|
|
1451
|
+
return /* @__PURE__ */ jsxs16("div", { className: "relative", children: [
|
|
1452
|
+
/* @__PURE__ */ jsx27("label", { className: "text-sm mb-1 font-medium", children: (_a = props.attributes) == null ? void 0 : _a.label }),
|
|
1453
|
+
/* @__PURE__ */ jsx27("div", { children: /* @__PURE__ */ jsx27(
|
|
1454
|
+
"input",
|
|
1455
|
+
{
|
|
1456
|
+
type: "text",
|
|
1457
|
+
value: searchTerm,
|
|
1458
|
+
onChange: textChangeHandler,
|
|
1459
|
+
onFocus: () => setIsOpen(true),
|
|
1460
|
+
onKeyDown: handleKeyDown,
|
|
1461
|
+
placeholder: (_b = props.attributes) == null ? void 0 : _b.placeholder,
|
|
1462
|
+
className: `peer mt-1 py-1.5 block w-full text-black rounded border-gray-300 shadow-sm
|
|
1463
|
+
${isError ? "focus:border-red-300 focus:ring focus:ring-red-200 focus:ring-opacity-50" : "focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"}
|
|
1464
|
+
disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none`
|
|
1465
|
+
}
|
|
1466
|
+
) }),
|
|
1467
|
+
/* @__PURE__ */ jsx27("div", { ref: containerRef, children: isOpen && /* @__PURE__ */ jsxs16(React27.Fragment, { children: [
|
|
1468
|
+
/* @__PURE__ */ jsxs16("div", { className: "fixed z-50 right-0 bg-white top-[62px] w-1/4 border-l border-gray-200", children: [
|
|
1469
|
+
/* @__PURE__ */ jsx27("div", { className: "flex flex-col p-2 bg-accent-950 text-white", children: /* @__PURE__ */ jsxs16("h5", { className: "text-md text-white font-medium", children: [
|
|
1470
|
+
"Select a ",
|
|
1471
|
+
((_c = props.attributes) == null ? void 0 : _c.label) || ((_d = props.attributes) == null ? void 0 : _d.heading)
|
|
1472
|
+
] }) }),
|
|
1473
|
+
/* @__PURE__ */ jsx27("div", { className: "flex justify-end px-4 border-b py-2 border-gray-200 h-10", children: props.createFields && props.createFields.length > 0 && /* @__PURE__ */ jsx27(
|
|
1474
|
+
"button",
|
|
1475
|
+
{
|
|
1476
|
+
type: "button",
|
|
1477
|
+
className: "text-primary hover:text-primary-800",
|
|
1478
|
+
onMouseDown: (e) => {
|
|
1479
|
+
e.preventDefault();
|
|
1480
|
+
setIsCreateOpen(true);
|
|
1481
|
+
},
|
|
1482
|
+
children: "Create"
|
|
1483
|
+
}
|
|
1484
|
+
) })
|
|
1485
|
+
] }),
|
|
1486
|
+
isCreateOpen && /* @__PURE__ */ jsxs16("div", { className: "fixed right-0 w-1/4 h-full top-[62px] bg-white shadow-lg border-l border-gray-200 z-50", children: [
|
|
1487
|
+
/* @__PURE__ */ jsx27("div", { className: "flex flex-col p-2 bg-accent-950", children: /* @__PURE__ */ jsxs16("h5", { className: "text-md font-medium text-white", children: [
|
|
1488
|
+
"Create New ",
|
|
1489
|
+
(_e = props.attributes) == null ? void 0 : _e.label
|
|
1490
|
+
] }) }),
|
|
1491
|
+
/* @__PURE__ */ jsx27("div", { className: "flex justify-end px-4 border-b py-2 border-gray-200", children: /* @__PURE__ */ jsx27(
|
|
1492
|
+
"button",
|
|
1493
|
+
{
|
|
1494
|
+
type: "button",
|
|
1495
|
+
onClick: () => setIsCreateOpen(false),
|
|
1496
|
+
className: "text-red-600 hover:text-red-800",
|
|
1497
|
+
children: "Close"
|
|
1498
|
+
}
|
|
1499
|
+
) }),
|
|
1500
|
+
/* @__PURE__ */ jsxs16("div", { className: "p-4", children: [
|
|
1501
|
+
(_f = props.createFields) == null ? void 0 : _f.map((field) => /* @__PURE__ */ jsxs16("div", { className: "mb-4", children: [
|
|
1502
|
+
/* @__PURE__ */ jsx27("label", { className: "text-sm mb-1 font-medium block", children: field.label }),
|
|
1503
|
+
/* @__PURE__ */ jsx27(
|
|
1504
|
+
"input",
|
|
1505
|
+
{
|
|
1506
|
+
type: field.type,
|
|
1507
|
+
value: formData[field.name] || "",
|
|
1508
|
+
onChange: (e) => handleInputChange(e, field.name),
|
|
1509
|
+
placeholder: field.placeholder,
|
|
1510
|
+
required: field.required,
|
|
1511
|
+
disabled: field.disabled,
|
|
1512
|
+
pattern: field.pattern,
|
|
1513
|
+
minLength: field.minLength,
|
|
1514
|
+
maxLength: field.maxLength,
|
|
1515
|
+
className: "peer mt-1 py-1.5 block w-full text-black rounded border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
|
|
1516
|
+
}
|
|
1517
|
+
)
|
|
1518
|
+
] }, field.name)),
|
|
1519
|
+
/* @__PURE__ */ jsxs16(
|
|
1520
|
+
Button_default,
|
|
1521
|
+
{
|
|
1522
|
+
onClick: async () => {
|
|
1523
|
+
await handleSaveModal();
|
|
1524
|
+
return { isSuccessful: true };
|
|
1525
|
+
},
|
|
1526
|
+
className: "w-full",
|
|
1527
|
+
children: [
|
|
1528
|
+
"Save ",
|
|
1529
|
+
(_g = props.attributes) == null ? void 0 : _g.label
|
|
1530
|
+
]
|
|
1531
|
+
}
|
|
1532
|
+
)
|
|
1533
|
+
] })
|
|
1534
|
+
] }),
|
|
1535
|
+
/* @__PURE__ */ jsx27(
|
|
1536
|
+
"div",
|
|
1537
|
+
{
|
|
1538
|
+
ref: listRef,
|
|
1539
|
+
className: "fixed z-10 right-0 mt-[130px] top-0 w-1/4 bg-white border-l border-gray-200 shadow-lg overflow-y-auto",
|
|
1540
|
+
style: { height: "calc(100vh - 130px)" },
|
|
1541
|
+
children: filteredItems.length > 0 ? filteredItems.map((item, index) => /* @__PURE__ */ jsx27("div", { children: /* @__PURE__ */ jsx27(
|
|
1542
|
+
"button",
|
|
1543
|
+
{
|
|
1544
|
+
onClick: (e) => {
|
|
1545
|
+
handleSelect(e, item);
|
|
1546
|
+
},
|
|
1547
|
+
className: `w-full px-4 py-2 flex items-center space-x-2 text-left border-b border-gray-200 ${index === highlightedIndex ? "bg-gray-200" : "hover:bg-gray-100"}`,
|
|
1548
|
+
role: "option",
|
|
1549
|
+
tabIndex: -1,
|
|
1550
|
+
onMouseEnter: () => setHighlightedIndex(index),
|
|
1551
|
+
children: /* @__PURE__ */ jsx27("span", { children: getNestedValue(item, props.dataTextFieldName) })
|
|
1552
|
+
}
|
|
1553
|
+
) }, item[props.dataKeyFieldName])) : /* @__PURE__ */ jsx27("div", { className: "px-4 py-2 text-gray-500", children: "No results found" })
|
|
1554
|
+
}
|
|
1555
|
+
)
|
|
1556
|
+
] }) })
|
|
1557
|
+
] });
|
|
1558
|
+
};
|
|
1559
|
+
var SelectWithSearchPanel_default = SelectWithSearchPanel;
|
|
1560
|
+
|
|
1561
|
+
// src/controls/edit/BooleanSelect.tsx
|
|
1562
|
+
import React28, { useState as useState6, useEffect as useEffect5 } from "react";
|
|
1563
|
+
import { jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1564
|
+
var BooleanSelect = (props) => {
|
|
1565
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
1566
|
+
const [list, setList] = useState6();
|
|
1567
|
+
const textChangeHandler = (event) => {
|
|
1568
|
+
const text = event.target.value;
|
|
1569
|
+
const boolValue = (text == null ? void 0 : text.toLowerCase()) === "true" || text === "1";
|
|
1570
|
+
if (props.callback !== void 0) {
|
|
1571
|
+
props.callback(
|
|
1572
|
+
{
|
|
1573
|
+
name: props.name,
|
|
1574
|
+
value: boolValue,
|
|
1575
|
+
index: props.index,
|
|
1576
|
+
groupKey: props.groupKey
|
|
1577
|
+
}
|
|
1578
|
+
);
|
|
1579
|
+
}
|
|
1580
|
+
};
|
|
1581
|
+
useEffect5(() => {
|
|
1582
|
+
async function fetchData() {
|
|
1583
|
+
console.log("in select");
|
|
1584
|
+
if (props.dataset) {
|
|
1585
|
+
setList(props.dataset);
|
|
1586
|
+
} else if (props.dataSource && props.dataSource != "" && props.serviceClient) {
|
|
1587
|
+
let dataSource = props.dataSource;
|
|
1588
|
+
let response;
|
|
1589
|
+
if (props.dataSourceDependsOn) {
|
|
1590
|
+
if (props.dependentValue) {
|
|
1591
|
+
dataSource = dataSource.replace(`{${props.dataSourceDependsOn}}`, props.dependentValue);
|
|
1592
|
+
response = await props.serviceClient.get(dataSource);
|
|
1593
|
+
setList(response.result);
|
|
1594
|
+
}
|
|
1595
|
+
} else {
|
|
1596
|
+
response = await props.serviceClient.get(dataSource);
|
|
1597
|
+
setList(response.result);
|
|
1598
|
+
}
|
|
1599
|
+
}
|
|
1600
|
+
}
|
|
1601
|
+
fetchData();
|
|
1602
|
+
}, [props.dataSource, props.dependentValue, props.dataset, props.dataSourceDependsOn]);
|
|
1603
|
+
let value;
|
|
1604
|
+
if (props.value !== void 0 && props.value !== null) {
|
|
1605
|
+
value = props.value;
|
|
1606
|
+
}
|
|
1607
|
+
return /* @__PURE__ */ jsx28(React28.Fragment, { children: /* @__PURE__ */ jsxs17("label", { className: "block", children: [
|
|
1608
|
+
/* @__PURE__ */ jsx28("span", { className: "text-sm font-medium ", children: (_a = props == null ? void 0 : props.attributes) == null ? void 0 : _a.label }),
|
|
1609
|
+
" ",
|
|
1610
|
+
((_b = props == null ? void 0 : props.attributes) == null ? void 0 : _b.label) && ((_c = props == null ? void 0 : props.attributes) == null ? void 0 : _c.required) && /* @__PURE__ */ jsx28("span", { className: "text-alert", children: "*" }),
|
|
1611
|
+
/* @__PURE__ */ jsxs17(
|
|
1612
|
+
"select",
|
|
1613
|
+
{
|
|
1614
|
+
name: props.name,
|
|
1615
|
+
id: props.name,
|
|
1616
|
+
value,
|
|
1617
|
+
onChange: textChangeHandler,
|
|
1618
|
+
required: (_d = props == null ? void 0 : props.attributes) == null ? void 0 : _d.required,
|
|
1619
|
+
placeholder: (_e = props == null ? void 0 : props.attributes) == null ? void 0 : _e.placeholder,
|
|
1620
|
+
disabled: (_f = props == null ? void 0 : props.attributes) == null ? void 0 : _f.readOnly,
|
|
1621
|
+
className: "peer mt-1 py-1.5 block w-full text-black rounded border-gray-300 shadow-sm\r\n focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50\r\n disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none\r\n ",
|
|
1622
|
+
children: [
|
|
1623
|
+
/* @__PURE__ */ jsx28("option", { className: "", value: "", children: ((_g = props.attributes) == null ? void 0 : _g.placeholder) || "Select" }),
|
|
1624
|
+
list && list.map((item, i) => {
|
|
1625
|
+
return /* @__PURE__ */ jsx28(
|
|
1626
|
+
"option",
|
|
1627
|
+
{
|
|
1628
|
+
className: "fac-select-option",
|
|
1629
|
+
value: item[props.dataKeyFieldName],
|
|
1630
|
+
children: item[props.dataTextFieldName]
|
|
1631
|
+
},
|
|
1632
|
+
item[props.dataKeyFieldName]
|
|
1633
|
+
);
|
|
1634
|
+
})
|
|
1635
|
+
]
|
|
1636
|
+
}
|
|
1637
|
+
),
|
|
1638
|
+
/* @__PURE__ */ jsx28("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 text-alert text-sm", children: ((_h = props == null ? void 0 : props.attributes) == null ? void 0 : _h.errorMessage) ? props.attributes.errorMessage : "" })
|
|
1639
|
+
] }) });
|
|
1640
|
+
};
|
|
1641
|
+
var BooleanSelect_default = BooleanSelect;
|
|
1642
|
+
|
|
1643
|
+
// src/controls/edit/EmailInput.tsx
|
|
1644
|
+
import React29 from "react";
|
|
1645
|
+
import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1646
|
+
var EmailInput = (props) => {
|
|
1647
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
|
|
1648
|
+
const textChangeHandler = (event) => {
|
|
1649
|
+
const text = event.target.value;
|
|
1650
|
+
if (text) {
|
|
1651
|
+
const atIndex = text.indexOf("@");
|
|
1652
|
+
const dotIndex = text.indexOf(".", atIndex);
|
|
1653
|
+
if (dotIndex < atIndex || text.length - dotIndex <= 2) {
|
|
1654
|
+
event.target.setCustomValidity("invaild-value");
|
|
1655
|
+
} else {
|
|
1656
|
+
event.target.setCustomValidity("");
|
|
1657
|
+
}
|
|
1658
|
+
}
|
|
1659
|
+
if (props.callback !== void 0) {
|
|
1660
|
+
props.callback({
|
|
1661
|
+
name: props.name,
|
|
1662
|
+
value: text,
|
|
1663
|
+
index: props.index
|
|
1664
|
+
});
|
|
1665
|
+
}
|
|
1666
|
+
};
|
|
1667
|
+
let value = "";
|
|
1668
|
+
if (props.value !== void 0 && props.value !== null) {
|
|
1669
|
+
value = props.value;
|
|
1670
|
+
}
|
|
1671
|
+
return /* @__PURE__ */ jsx29(React29.Fragment, { children: /* @__PURE__ */ jsxs18("label", { className: "block mb-1", children: [
|
|
1672
|
+
/* @__PURE__ */ jsx29("span", { className: "text-sm font-medium text-slate-700", children: (_a = props == null ? void 0 : props.attributes) == null ? void 0 : _a.label }),
|
|
1673
|
+
" ",
|
|
1674
|
+
((_b = props == null ? void 0 : props.attributes) == null ? void 0 : _b.label) && ((_c = props == null ? void 0 : props.attributes) == null ? void 0 : _c.required) && /* @__PURE__ */ jsx29("span", { className: "text-alert", children: "*" }),
|
|
1675
|
+
/* @__PURE__ */ jsx29(
|
|
1676
|
+
"input",
|
|
1677
|
+
{
|
|
1678
|
+
type: "email",
|
|
1679
|
+
name: props.name,
|
|
1680
|
+
id: props.name,
|
|
1681
|
+
value,
|
|
1682
|
+
onChange: textChangeHandler,
|
|
1683
|
+
required: (_d = props == null ? void 0 : props.attributes) == null ? void 0 : _d.required,
|
|
1684
|
+
placeholder: (_e = props == null ? void 0 : props.attributes) == null ? void 0 : _e.placeholder,
|
|
1685
|
+
maxLength: (_f = props == null ? void 0 : props.attributes) == null ? void 0 : _f.maxLength,
|
|
1686
|
+
disabled: (_g = props == null ? void 0 : props.attributes) == null ? void 0 : _g.readOnly,
|
|
1687
|
+
minLength: (_h = props == null ? void 0 : props.attributes) == null ? void 0 : _h.minLength,
|
|
1688
|
+
className: "peer mt-1 py-1.5 block w-full rounded border-gray-300 shadow-sm\r\n focus-within:border-neutral-300 focus-within:ring focus-within:ring-neutral-300 focus-within:ring-opacity-50 transition-all duration-500 ease-in-out"
|
|
1689
|
+
}
|
|
1690
|
+
),
|
|
1691
|
+
/* @__PURE__ */ jsx29("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 mb-0 text-alert text-sm", children: ((_i = props == null ? void 0 : props.attributes) == null ? void 0 : _i.errorMessage) ? props.attributes.errorMessage : "" })
|
|
1692
|
+
] }) });
|
|
1693
|
+
};
|
|
1694
|
+
var EmailInput_default = EmailInput;
|
|
1695
|
+
|
|
1696
|
+
// src/controls/edit/TimeInput.tsx
|
|
1697
|
+
import React30 from "react";
|
|
1698
|
+
import { jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1699
|
+
var TimeInput = (props) => {
|
|
1700
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
1701
|
+
const timeChangeHandler = (event) => {
|
|
1702
|
+
const timeValue = event.target.value;
|
|
1703
|
+
if (props.callback) {
|
|
1704
|
+
props.callback({
|
|
1705
|
+
name: props.name,
|
|
1706
|
+
value: timeValue,
|
|
1707
|
+
index: props.index,
|
|
1708
|
+
groupKey: props.groupKey
|
|
1709
|
+
});
|
|
1710
|
+
}
|
|
1711
|
+
};
|
|
1712
|
+
return /* @__PURE__ */ jsx30(React30.Fragment, { children: /* @__PURE__ */ jsxs19("label", { className: "block mb-1", children: [
|
|
1713
|
+
/* @__PURE__ */ jsx30("span", { className: "text-sm font-medium", children: (_a = props == null ? void 0 : props.attributes) == null ? void 0 : _a.label }),
|
|
1714
|
+
((_b = props == null ? void 0 : props.attributes) == null ? void 0 : _b.label) && ((_c = props == null ? void 0 : props.attributes) == null ? void 0 : _c.required) && /* @__PURE__ */ jsx30("span", { className: "text-alert", children: "*" }),
|
|
1715
|
+
/* @__PURE__ */ jsx30("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx30(
|
|
1716
|
+
"input",
|
|
1717
|
+
{
|
|
1718
|
+
type: "time",
|
|
1719
|
+
name: props.name,
|
|
1720
|
+
id: props.name,
|
|
1721
|
+
value: typeof props.value === "boolean" ? "" : (_d = props.value) != null ? _d : "",
|
|
1722
|
+
onChange: timeChangeHandler,
|
|
1723
|
+
required: (_e = props == null ? void 0 : props.attributes) == null ? void 0 : _e.required,
|
|
1724
|
+
disabled: (_f = props == null ? void 0 : props.attributes) == null ? void 0 : _f.readOnly,
|
|
1725
|
+
className: "peer mt-1 py-1.5 block w-full rounded border-gray-300 shadow-sm\r\n focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50\r\n disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none"
|
|
1726
|
+
}
|
|
1727
|
+
) }),
|
|
1728
|
+
/* @__PURE__ */ jsx30("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 text-alert text-sm", children: (_h = (_g = props == null ? void 0 : props.attributes) == null ? void 0 : _g.errorMessage) != null ? _h : "" })
|
|
1729
|
+
] }) });
|
|
1730
|
+
};
|
|
1731
|
+
var TimeInput_default = TimeInput;
|
|
1732
|
+
|
|
1733
|
+
// src/controls/edit/InputControlType.tsx
|
|
1734
|
+
var InputControlType = {
|
|
1735
|
+
lineTextInput: "text",
|
|
1736
|
+
multilineTextInput: "multilinetext",
|
|
1737
|
+
emailInput: "email",
|
|
1738
|
+
moneyInput: "money",
|
|
1739
|
+
select: "select",
|
|
1740
|
+
percentageInput: "percentage",
|
|
1741
|
+
phoneInput: "phone",
|
|
1742
|
+
numberInput: "number",
|
|
1743
|
+
checkboxInput: "boolean",
|
|
1744
|
+
otpInput: "otp",
|
|
1745
|
+
datetimeInput: "datetime",
|
|
1746
|
+
timeInput: "time",
|
|
1747
|
+
colorInput: "colorInput",
|
|
1748
|
+
selectWithSearchInput: "selectWithSearchInput",
|
|
1749
|
+
selectWithSearchPanel: "selectWithSearchPanel",
|
|
1750
|
+
booleanSelect: "booleanSelect"
|
|
1751
|
+
};
|
|
1752
|
+
var InputControlType_default = InputControlType;
|
|
1753
|
+
|
|
1754
|
+
// src/controls/edit/InputControl.tsx
|
|
1755
|
+
import { jsx as jsx31 } from "react/jsx-runtime";
|
|
1756
|
+
var InputControl = (props) => {
|
|
1757
|
+
const ControlComponents = {
|
|
1758
|
+
[InputControlType_default.lineTextInput]: LineTextInput_default,
|
|
1759
|
+
[InputControlType_default.emailInput]: EmailInput_default,
|
|
1760
|
+
[InputControlType_default.multilineTextInput]: MultilineTextInput_default,
|
|
1761
|
+
[InputControlType_default.moneyInput]: MoneyInput_default,
|
|
1762
|
+
[InputControlType_default.select]: Select_default,
|
|
1763
|
+
[InputControlType_default.percentageInput]: PercentageInput_default,
|
|
1764
|
+
[InputControlType_default.phoneInput]: PhoneInput_default,
|
|
1765
|
+
[InputControlType_default.numberInput]: NumberInput_default,
|
|
1766
|
+
[InputControlType_default.checkboxInput]: CheckboxInput_default,
|
|
1767
|
+
[InputControlType_default.otpInput]: OtpInput_default,
|
|
1768
|
+
[InputControlType_default.datetimeInput]: DateTimeInput_default,
|
|
1769
|
+
[InputControlType_default.colorInput]: ColorInput_default,
|
|
1770
|
+
[InputControlType_default.selectWithSearchInput]: SelectWithSearchInput_default,
|
|
1771
|
+
[InputControlType_default.selectWithSearchPanel]: SelectWithSearchPanel_default,
|
|
1772
|
+
[InputControlType_default.booleanSelect]: BooleanSelect_default,
|
|
1773
|
+
[InputControlType_default.timeInput]: TimeInput_default
|
|
1774
|
+
};
|
|
1775
|
+
const SelectedControlComponent = ControlComponents[props.controlType];
|
|
1776
|
+
return /* @__PURE__ */ jsx31(React31.Fragment, { children: SelectedControlComponent ? /* @__PURE__ */ jsx31(SelectedControlComponent, __spreadValues({}, props)) : "Control not found" });
|
|
1777
|
+
};
|
|
1778
|
+
var InputControl_default = InputControl;
|
|
220
1779
|
export {
|
|
1780
|
+
InputControl_default as InputControl,
|
|
1781
|
+
InputControlType_default as InputControlType,
|
|
221
1782
|
ViewControl_default as ViewControl,
|
|
222
1783
|
ViewControlTypes_default as ViewControlTypes
|
|
223
1784
|
};
|