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