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