@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260704091052 → 0.8.1-dev.20260706114046

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/dist/CopyButton-UPJPMJUB.mjs +57 -0
  2. package/dist/DateTimeViewClient-R3M6ISVK.mjs +16 -0
  3. package/dist/DateViewClient-VLTRN47D.mjs +9 -0
  4. package/dist/{chunk-SDNYBQSI.mjs → HlsPlayer-57543DTW.mjs} +3 -2
  5. package/dist/HlsPlayer-5AWFZ2P6.mjs +601 -0
  6. package/dist/IframeClient-RGJFZ5P2.mjs +98 -0
  7. package/dist/InputControlClient-NJV6B65M.mjs +604 -0
  8. package/dist/InputControlClient-OQDLYA4S.mjs +604 -0
  9. package/dist/InputControlClient-TW664WIJ.mjs +602 -0
  10. package/dist/{LinkNodeButton-WDDPNYWI.mjs → LinkNodeButton-FUL3J5HR.mjs} +6 -5
  11. package/dist/LinkNodeButton-IGJOGOKI.mjs +362 -0
  12. package/dist/LinkNodeButton-ZONM74OO.mjs +174 -0
  13. package/dist/Pagination-6OFACRMQ.mjs +229 -0
  14. package/dist/Pagination-FSYLYKUA.mjs +181 -0
  15. package/dist/Pagination-YCD5CU2L.mjs +183 -0
  16. package/dist/Slider-554BKC7N.mjs +322 -0
  17. package/dist/Slider-PEIVH6A5.mjs +320 -0
  18. package/dist/chunk-2GSYECIS.mjs +109 -0
  19. package/dist/chunk-3GWLDT7C.mjs +204 -0
  20. package/dist/chunk-3R4VVVNK.mjs +903 -0
  21. package/dist/chunk-47HD7QP7.mjs +199 -0
  22. package/dist/chunk-56HSDML5.mjs +22 -0
  23. package/dist/chunk-67IG5NBU.mjs +200 -0
  24. package/dist/chunk-7ZFZLN56.mjs +903 -0
  25. package/dist/chunk-CM7LUGCH.mjs +107 -0
  26. package/dist/chunk-IKIXEQPV.mjs +198 -0
  27. package/dist/chunk-IMNQO57B.mjs +25 -0
  28. package/dist/chunk-R2HV35IB.mjs +201 -0
  29. package/dist/chunk-SPRVN5IM.mjs +118 -0
  30. package/dist/chunk-TVL6KVD5.mjs +229 -0
  31. package/dist/chunk-WEV5U33G.mjs +207 -0
  32. package/dist/chunk-YG6FKKQJ.mjs +900 -0
  33. package/dist/index.d.mts +56 -169
  34. package/dist/index.d.ts +56 -169
  35. package/dist/index.js +3940 -3807
  36. package/dist/index.mjs +591 -2923
  37. package/dist/server.d.mts +72 -0
  38. package/dist/server.d.ts +72 -0
  39. package/dist/server.js +5126 -0
  40. package/dist/server.mjs +2698 -0
  41. package/package.json +18 -4
  42. package/dist/HlsPlayer-DZNDKG2P.mjs +0 -7
  43. package/dist/chunk-DOKQUUH3.mjs +0 -414
@@ -0,0 +1,604 @@
1
+ "use client";
2
+
3
+ "use client";
4
+ import {
5
+ AssetUtility_default,
6
+ BooleanSelect_default,
7
+ CheckboxInput_default,
8
+ ColorInput_default,
9
+ DateTimeInput_default,
10
+ EmailInput_default,
11
+ LineTextInput_default,
12
+ MoneyInput_default,
13
+ MultilineTextInput_default,
14
+ NumberInput_default,
15
+ OtpInput_default,
16
+ PercentageInput_default,
17
+ PhoneInput_default,
18
+ SelectWithSearchInput_default,
19
+ TimeInput_default
20
+ } from "./chunk-7ZFZLN56.mjs";
21
+ import {
22
+ Hyperlink,
23
+ Icon_default,
24
+ InputControlType_default
25
+ } from "./chunk-2GSYECIS.mjs";
26
+ import {
27
+ Button_default,
28
+ ClientButton_default
29
+ } from "./chunk-67IG5NBU.mjs";
30
+ import "./chunk-IMNQO57B.mjs";
31
+
32
+ // src/components/controls/edit/InputControlClient.tsx
33
+ import React4 from "react";
34
+
35
+ // src/components/controls/edit/Select.tsx
36
+ import { useState, useEffect } from "react";
37
+ import { jsx, jsxs } from "react/jsx-runtime";
38
+ var Select = (props) => {
39
+ const [list, setList] = useState([]);
40
+ const getSafeValue = (val) => {
41
+ if (val === null || val === void 0) return "";
42
+ if (typeof val === "boolean") return val ? "1" : "0";
43
+ return val;
44
+ };
45
+ const textChangeHandler = (event) => {
46
+ let rawValue = event.target.value;
47
+ if (rawValue === "") rawValue = null;
48
+ let finalValue = rawValue;
49
+ if (list && props.dataKeyFieldName) {
50
+ const key = props.dataKeyFieldName;
51
+ const selectedItem = list.find(
52
+ (item) => String(item[key]) === String(rawValue)
53
+ );
54
+ if (selectedItem) {
55
+ const keyValue = selectedItem[key];
56
+ if (typeof keyValue === "number") {
57
+ finalValue = Number(rawValue);
58
+ }
59
+ }
60
+ }
61
+ props.callback?.({
62
+ name: props.name,
63
+ value: finalValue,
64
+ index: props.index,
65
+ groupKey: props.groupKey
66
+ });
67
+ };
68
+ useEffect(() => {
69
+ async function fetchData() {
70
+ if (props.dataset) {
71
+ setList(props.dataset);
72
+ return;
73
+ }
74
+ if (props.dataSource && props.serviceClient) {
75
+ let dataSource = props.dataSource;
76
+ let response;
77
+ if (props.dataSourceDependsOn && props.dependentValue) {
78
+ dataSource = dataSource.replace(
79
+ `{${props.dataSourceDependsOn}}`,
80
+ props.dependentValue
81
+ );
82
+ }
83
+ response = await props.serviceClient.get(dataSource);
84
+ setList(response.result ?? []);
85
+ }
86
+ }
87
+ fetchData();
88
+ }, [
89
+ props.dataset,
90
+ props.dataSource,
91
+ props.dependentValue,
92
+ props.dataSourceDependsOn
93
+ ]);
94
+ const value = getSafeValue(props.value);
95
+ return /* @__PURE__ */ jsxs("label", { className: "block", children: [
96
+ props.attributes?.label && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium inline-block pb-1", children: props.attributes?.label }),
97
+ " ",
98
+ props.attributes?.label && props.attributes?.required && /* @__PURE__ */ jsx("span", { className: "bg-error-weak", children: "*" }),
99
+ /* @__PURE__ */ jsxs(
100
+ "select",
101
+ {
102
+ name: props.name,
103
+ id: props.name,
104
+ value,
105
+ onChange: textChangeHandler,
106
+ required: props.attributes?.required,
107
+ disabled: props.attributes?.readOnly,
108
+ className: "peer select 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",
109
+ children: [
110
+ /* @__PURE__ */ jsx("option", { value: "", children: props.attributes?.placeholder || "Select" }),
111
+ list.map((item, index) => {
112
+ const keyField = props.dataKeyFieldName;
113
+ const textField = props.dataTextFieldName;
114
+ return /* @__PURE__ */ jsx("option", { value: item[keyField], children: item[textField] }, index);
115
+ })
116
+ ]
117
+ }
118
+ ),
119
+ /* @__PURE__ */ jsx("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 text-alert text-sm", children: props.attributes?.errorMessage || "" })
120
+ ] });
121
+ };
122
+ var Select_default = Select;
123
+
124
+ // src/components/controls/edit/SelectWithSearchPanel.tsx
125
+ import React2, {
126
+ useEffect as useEffect2,
127
+ useRef,
128
+ useState as useState2,
129
+ useCallback
130
+ } from "react";
131
+ import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
132
+ var SelectWithSearchPanel = (props) => {
133
+ const [isOpen, setIsOpen] = useState2(false);
134
+ const [searchTerm, setSearchTerm] = useState2("");
135
+ const [highlightedIndex, setHighlightedIndex] = useState2(0);
136
+ const [list, setList] = useState2([]);
137
+ const listRef = useRef(null);
138
+ const [isError, setIsError] = useState2(false);
139
+ const containerRef = useRef(null);
140
+ const [isCreateOpen, setIsCreateOpen] = useState2(false);
141
+ const [formData, setFormData] = useState2({});
142
+ const getNestedValue = (obj, path) => {
143
+ return path.split(".").reduce((acc, key) => acc?.[key], obj);
144
+ };
145
+ useEffect2(() => {
146
+ const handleClickOutside = (event) => {
147
+ if (containerRef.current && !containerRef.current.contains(event.target)) {
148
+ setIsOpen(false);
149
+ }
150
+ };
151
+ document.addEventListener("mousedown", handleClickOutside);
152
+ return () => {
153
+ document.removeEventListener("mousedown", handleClickOutside);
154
+ };
155
+ }, []);
156
+ useEffect2(() => {
157
+ async function fetchData() {
158
+ if (props.dataset) {
159
+ setList(props.dataset);
160
+ } else if (props.dataSource && props.serviceClient) {
161
+ let dataSource = props.dataSource;
162
+ if (props.dataSourceDependsOn && props.dependentValue) {
163
+ dataSource = dataSource.replace(
164
+ `{${props.dataSourceDependsOn}}`,
165
+ props.dependentValue
166
+ );
167
+ }
168
+ const response = await props.serviceClient.get(dataSource);
169
+ if (response?.result) setList(response.result);
170
+ }
171
+ }
172
+ fetchData();
173
+ }, [
174
+ props.dataSource,
175
+ props.dependentValue,
176
+ props.dataset,
177
+ props.dataSourceDependsOn
178
+ ]);
179
+ const filteredItems = list?.filter((item) => {
180
+ const value = getNestedValue(item, props.dataTextFieldName);
181
+ return value?.toLowerCase().includes(searchTerm?.toLowerCase());
182
+ });
183
+ const playBeep = () => {
184
+ const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
185
+ const oscillator = audioCtx.createOscillator();
186
+ const gainNode = audioCtx.createGain();
187
+ oscillator.type = "square";
188
+ oscillator.frequency.setValueAtTime(300, audioCtx.currentTime);
189
+ gainNode.gain.setValueAtTime(0.02, audioCtx.currentTime);
190
+ oscillator.connect(gainNode);
191
+ gainNode.connect(audioCtx.destination);
192
+ oscillator.start();
193
+ setTimeout(() => {
194
+ oscillator.stop();
195
+ audioCtx.close();
196
+ }, 250);
197
+ };
198
+ useEffect2(() => {
199
+ const filteredItems2 = list?.filter(
200
+ (item) => item[props?.dataTextFieldName]?.toLowerCase().includes(searchTerm?.toLowerCase())
201
+ );
202
+ if (searchTerm.length > 0 && filteredItems2.length === 0) {
203
+ playBeep();
204
+ setIsError(true);
205
+ } else {
206
+ setIsError(false);
207
+ }
208
+ }, [searchTerm]);
209
+ const handleSelect = (event, item) => {
210
+ event.preventDefault();
211
+ setSearchTerm(getNestedValue(item, props.dataTextFieldName));
212
+ if (props.callback) {
213
+ const val = {};
214
+ props.callback({
215
+ name: props.name,
216
+ value: item[props.dataKeyFieldName],
217
+ index: props.index,
218
+ groupKey: props.groupKey
219
+ });
220
+ }
221
+ setHighlightedIndex(0);
222
+ setIsOpen(false);
223
+ };
224
+ const handleKeyDown = (e) => {
225
+ if (e.key === "Escape") {
226
+ setIsOpen(false);
227
+ setHighlightedIndex(-1);
228
+ } else if (e.key === "ArrowDown") {
229
+ e.preventDefault();
230
+ setHighlightedIndex((prev) => {
231
+ const nextIndex = prev < filteredItems.length - 1 ? prev + 1 : prev;
232
+ scrollIntoView(nextIndex);
233
+ return nextIndex;
234
+ });
235
+ } else if (e.key === "ArrowUp") {
236
+ e.preventDefault();
237
+ setHighlightedIndex((prev) => {
238
+ const prevIndex = prev > 0 ? prev - 1 : prev;
239
+ scrollIntoView(prevIndex);
240
+ return prevIndex;
241
+ });
242
+ } else if (e.key === "Enter" && highlightedIndex >= 0) {
243
+ handleSelect(e, filteredItems[highlightedIndex]);
244
+ }
245
+ };
246
+ const scrollIntoView = (index) => {
247
+ if (listRef.current) {
248
+ const item = listRef.current.children[index];
249
+ if (item) {
250
+ item.scrollIntoView();
251
+ }
252
+ }
253
+ };
254
+ const textChangeHandler = (event) => {
255
+ const newSearchTerm = event.target.value;
256
+ setSearchTerm(newSearchTerm);
257
+ setIsOpen(true);
258
+ setHighlightedIndex(0);
259
+ };
260
+ const handleInputChange = (event, field) => {
261
+ setFormData((prev) => ({ ...prev, [field]: event.target.value }));
262
+ };
263
+ const handleSaveModal = useCallback(async () => {
264
+ console.log("Form Data:", formData);
265
+ return formData;
266
+ }, []);
267
+ return /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
268
+ /* @__PURE__ */ jsxs2("label", { className: "text-sm mb-1 font-medium", children: [
269
+ props.attributes?.label,
270
+ " ",
271
+ " ",
272
+ props?.attributes?.required && /* @__PURE__ */ jsx2("span", { className: "bg-error-weak", children: "*" })
273
+ ] }),
274
+ /* @__PURE__ */ jsx2("div", { children: /* @__PURE__ */ jsx2(
275
+ "input",
276
+ {
277
+ type: "text",
278
+ value: searchTerm,
279
+ onChange: textChangeHandler,
280
+ onFocus: () => setIsOpen(true),
281
+ onKeyDown: handleKeyDown,
282
+ placeholder: props.attributes?.placeholder,
283
+ className: `peer mt-1 py-1.5 block w-full text-black rounded border-gray-300 shadow-sm
284
+ ${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"}
285
+ disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none`
286
+ }
287
+ ) }),
288
+ /* @__PURE__ */ jsx2("div", { ref: containerRef, children: isOpen && /* @__PURE__ */ jsxs2(React2.Fragment, { children: [
289
+ /* @__PURE__ */ jsxs2("div", { className: "fixed z-50 right-0 bg-white top-[62px] w-1/4 border-l border-gray-200", children: [
290
+ /* @__PURE__ */ jsx2("div", { className: "flex flex-col p-2 bg-accent-950 text-white", children: /* @__PURE__ */ jsxs2("h5", { className: "text-md text-white font-medium", children: [
291
+ "Select a",
292
+ " ",
293
+ props.attributes?.label || props.attributes?.heading
294
+ ] }) }),
295
+ /* @__PURE__ */ jsx2("div", { className: "flex justify-end px-4 border-b py-2 border-gray-200 h-10", children: props.createFields && props.createFields.length > 0 && /* @__PURE__ */ jsx2(
296
+ "button",
297
+ {
298
+ type: "button",
299
+ className: "text-primary hover:text-primary-800",
300
+ onMouseDown: (e) => {
301
+ e.preventDefault();
302
+ setIsCreateOpen(true);
303
+ },
304
+ children: "Create"
305
+ }
306
+ ) })
307
+ ] }),
308
+ isCreateOpen && /* @__PURE__ */ jsxs2("div", { className: "fixed right-0 w-1/4 h-full top-[62px] bg-white shadow-lg border-l border-gray-200 z-50", children: [
309
+ /* @__PURE__ */ jsx2("div", { className: "flex flex-col p-2 bg-accent-950", children: /* @__PURE__ */ jsxs2("h5", { className: "text-md font-medium text-white", children: [
310
+ "Create New ",
311
+ props.attributes?.label
312
+ ] }) }),
313
+ /* @__PURE__ */ jsx2("div", { className: "flex justify-end px-4 border-b py-2 border-gray-200", children: /* @__PURE__ */ jsx2(
314
+ "button",
315
+ {
316
+ type: "button",
317
+ onClick: () => setIsCreateOpen(false),
318
+ className: "text-red-600 hover:text-red-800",
319
+ children: "Close"
320
+ }
321
+ ) }),
322
+ /* @__PURE__ */ jsxs2("div", { className: "p-4", children: [
323
+ props.createFields?.map((field) => /* @__PURE__ */ jsxs2("div", { className: "mb-4", children: [
324
+ /* @__PURE__ */ jsx2("label", { className: "text-sm mb-1 font-medium block", children: field.label }),
325
+ /* @__PURE__ */ jsx2(
326
+ "input",
327
+ {
328
+ type: field.type,
329
+ value: formData[field.name] || "",
330
+ onChange: (e) => handleInputChange(e, field.name),
331
+ placeholder: field.placeholder,
332
+ required: field.required,
333
+ disabled: field.disabled,
334
+ pattern: field.pattern,
335
+ minLength: field.minLength,
336
+ maxLength: field.maxLength,
337
+ 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"
338
+ }
339
+ )
340
+ ] }, field.name)),
341
+ /* @__PURE__ */ jsxs2(Button_default, { onClick: async () => {
342
+ handleSaveModal();
343
+ return { isSuccessful: true };
344
+ }, className: "w-full", children: [
345
+ "Save ",
346
+ props.attributes?.label
347
+ ] })
348
+ ] })
349
+ ] }),
350
+ /* @__PURE__ */ jsx2(
351
+ "div",
352
+ {
353
+ ref: listRef,
354
+ 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",
355
+ style: { height: "calc(100vh - 130px)" },
356
+ children: filteredItems.length > 0 ? filteredItems.map((item, index) => /* @__PURE__ */ jsx2("div", { children: /* @__PURE__ */ jsx2(
357
+ "button",
358
+ {
359
+ onClick: (e) => {
360
+ handleSelect(e, item);
361
+ },
362
+ 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"}`,
363
+ role: "option",
364
+ tabIndex: -1,
365
+ onMouseEnter: () => setHighlightedIndex(index),
366
+ children: /* @__PURE__ */ jsx2("span", { children: getNestedValue(item, props.dataTextFieldName) })
367
+ }
368
+ ) }, item[props.dataKeyFieldName])) : /* @__PURE__ */ jsx2("div", { className: "px-4 py-2 text-gray-500", children: "No results found" })
369
+ }
370
+ )
371
+ ] }) })
372
+ ] });
373
+ };
374
+ var SelectWithSearchPanel_default = SelectWithSearchPanel;
375
+
376
+ // src/components/controls/edit/AssetUpload.tsx
377
+ import React3, { useEffect as useEffect3 } from "react";
378
+ import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
379
+ var AssetUpload = (props) => {
380
+ const isDisabled = props.attributes?.disable ?? false;
381
+ let allValues = [];
382
+ if (props.value !== void 0 && props.value !== null && props.value !== "") {
383
+ try {
384
+ allValues = JSON.parse(props.value.toString());
385
+ } catch (error) {
386
+ }
387
+ }
388
+ const getInitialTab = () => {
389
+ if (allValues.length > 0) {
390
+ const asset = allValues[0];
391
+ if (asset.posterUrl) {
392
+ return "video";
393
+ } else if (asset.assetUrl) {
394
+ return "image";
395
+ }
396
+ }
397
+ return "image";
398
+ };
399
+ const [assetType, setAssetType] = React3.useState(getInitialTab);
400
+ useEffect3(() => {
401
+ setAssetType(getInitialTab());
402
+ }, [props.value]);
403
+ const assetUploadCallback = (newAsset) => {
404
+ if (isDisabled) return;
405
+ let updated = [];
406
+ updated.push({
407
+ assetUrl: newAsset.assetUrl,
408
+ title: newAsset.title,
409
+ posterUrl: newAsset.posterUrl,
410
+ intrinsicHeight: newAsset.intrinsicHeight,
411
+ intrinsicWidth: newAsset.intrinsicWidth
412
+ });
413
+ props.callback?.({
414
+ name: props.name,
415
+ value: JSON.stringify(updated),
416
+ index: props.index,
417
+ groupKey: props.groupKey
418
+ });
419
+ };
420
+ const deleteFile = (index) => {
421
+ if (isDisabled) return;
422
+ let existingValue = [];
423
+ if (props.value) {
424
+ try {
425
+ existingValue = JSON.parse(props.value.toString());
426
+ } catch (error) {
427
+ }
428
+ }
429
+ if (existingValue.length > index) {
430
+ existingValue.splice(index, 1);
431
+ props.callback?.({
432
+ name: props.name,
433
+ value: JSON.stringify(existingValue),
434
+ index: props.index,
435
+ groupKey: props.groupKey
436
+ });
437
+ }
438
+ };
439
+ const textChangeHandler = (index, event) => {
440
+ if (isDisabled) return;
441
+ let existingValue = [];
442
+ if (props.value) {
443
+ try {
444
+ existingValue = JSON.parse(props.value.toString());
445
+ } catch (error) {
446
+ }
447
+ }
448
+ const text = event.target.value;
449
+ if (existingValue.length > index) {
450
+ const updatedArray = [...existingValue];
451
+ updatedArray[index] = { ...updatedArray[index], title: text };
452
+ props.callback?.({
453
+ name: props.name,
454
+ value: JSON.stringify(updatedArray),
455
+ index: props.index,
456
+ groupKey: props.groupKey
457
+ });
458
+ }
459
+ };
460
+ const getAssetType = (asset) => {
461
+ if (asset.assetUrl?.endsWith(".m3u8") || asset.posterUrl) return "video";
462
+ return "image";
463
+ };
464
+ const shouldShowDetails = () => {
465
+ if (allValues.length === 0) return false;
466
+ const asset = allValues[0];
467
+ if (assetType === "video") {
468
+ return Boolean(asset.posterUrl && asset.assetUrl && asset.assetUrl.endsWith(".m3u8"));
469
+ }
470
+ if (assetType === "image") {
471
+ return Boolean(asset.assetUrl && !asset.assetUrl.endsWith(".m3u8"));
472
+ }
473
+ return false;
474
+ };
475
+ return /* @__PURE__ */ jsxs3(React3.Fragment, { children: [
476
+ /* @__PURE__ */ jsx3("label", { className: "block mb-1", children: /* @__PURE__ */ jsx3("span", { className: "text-sm font-medium", children: props?.attributes?.label }) }),
477
+ /* @__PURE__ */ jsxs3("div", { className: "flex gap-6 bg-neutral-100 rounded p-2", children: [
478
+ /* @__PURE__ */ jsx3(
479
+ ClientButton_default,
480
+ {
481
+ className: assetType === "image" ? "px-2 py-1 rounded bg-body-200 scale-95" : "text-neutral-700",
482
+ ButtonType: "Link" /* Link */,
483
+ onClick: () => setAssetType("image"),
484
+ disabled: isDisabled,
485
+ children: "Image Upload"
486
+ }
487
+ ),
488
+ /* @__PURE__ */ jsx3(
489
+ ClientButton_default,
490
+ {
491
+ className: assetType === "video" ? "bg-body-200 px-2 py-1 rounded-md scale-95" : "text-neutral-700",
492
+ ButtonType: "Link" /* Link */,
493
+ onClick: () => setAssetType("video"),
494
+ disabled: isDisabled,
495
+ children: "Video Upload"
496
+ }
497
+ )
498
+ ] }),
499
+ shouldShowDetails() && /* @__PURE__ */ jsxs3("div", { className: "relative mt-4 rounded-md p-4 border-2 border-dotted border-gray-300 bg-gray-50", children: [
500
+ /* @__PURE__ */ jsx3("span", { className: "absolute -top-2.5 left-3 bg-primary-600 text-white text-xs px-2 py-0.5 rounded-full", children: getAssetType(allValues[0]) === "video" ? "Video" : "Image" }),
501
+ /* @__PURE__ */ jsx3("div", { className: "flex flex-col gap-3", children: allValues.map((digitalAsset, index) => /* @__PURE__ */ jsxs3("div", { className: "flex justify-between items-start gap-5", children: [
502
+ /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-2 gap-x-8 gap-y-3 text-sm w-full", children: [
503
+ /* @__PURE__ */ jsxs3("div", { children: [
504
+ /* @__PURE__ */ jsx3("p", { className: "text-gray-500", children: "Title" }),
505
+ /* @__PURE__ */ jsx3(
506
+ "input",
507
+ {
508
+ type: "text",
509
+ value: digitalAsset.title,
510
+ onChange: (event) => textChangeHandler(index, event),
511
+ placeholder: "title",
512
+ disabled: isDisabled,
513
+ className: "w-full mt-1 py-1.5 block rounded border-gray-300 shadow-sm bg-white\n focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50\n disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed"
514
+ }
515
+ )
516
+ ] }),
517
+ digitalAsset.intrinsicWidth && digitalAsset.intrinsicHeight && /* @__PURE__ */ jsxs3("div", { children: [
518
+ /* @__PURE__ */ jsx3("p", { className: "text-gray-500", children: "Resolution" }),
519
+ /* @__PURE__ */ jsxs3("p", { className: "font-medium text-gray-900 mt-3", children: [
520
+ digitalAsset.intrinsicWidth,
521
+ "\xD7",
522
+ digitalAsset.intrinsicHeight
523
+ ] })
524
+ ] }),
525
+ (digitalAsset.assetUrl || digitalAsset.posterUrl) && /* @__PURE__ */ jsxs3("div", { children: [
526
+ /* @__PURE__ */ jsx3("p", { className: "text-gray-500", children: "Image / Poster" }),
527
+ /* @__PURE__ */ jsxs3("div", { className: "flex-shrink-0 flex flex-col gap-3 mt-1", children: [
528
+ getAssetType(digitalAsset) === "video" && digitalAsset.posterUrl && /* @__PURE__ */ jsx3(
529
+ "img",
530
+ {
531
+ src: AssetUtility_default.resolveUrl(props.serviceClient?.baseUrl, digitalAsset.posterUrl),
532
+ alt: digitalAsset.title || "Video poster",
533
+ className: "w-32 h-auto object-cover rounded border p-1"
534
+ }
535
+ ),
536
+ getAssetType(digitalAsset) === "image" && digitalAsset.assetUrl && /* @__PURE__ */ jsx3(
537
+ "img",
538
+ {
539
+ src: AssetUtility_default.resolveUrl(props.serviceClient?.baseUrl, digitalAsset.assetUrl),
540
+ alt: digitalAsset.title || "Uploaded image",
541
+ className: "w-32 h-auto object-cover rounded border p-1"
542
+ }
543
+ )
544
+ ] })
545
+ ] }),
546
+ digitalAsset.assetUrl?.endsWith(".m3u8") && /* @__PURE__ */ jsxs3("div", { className: "col-span-2", children: [
547
+ /* @__PURE__ */ jsx3("p", { className: "text-gray-500", children: "HLS Link" }),
548
+ /* @__PURE__ */ jsx3(
549
+ Hyperlink,
550
+ {
551
+ href: digitalAsset.assetUrl,
552
+ className: "text-primary-600 underline mt-1 break-all",
553
+ title: digitalAsset.assetUrl,
554
+ children: digitalAsset.assetUrl
555
+ }
556
+ )
557
+ ] })
558
+ ] }),
559
+ /* @__PURE__ */ jsx3(
560
+ "span",
561
+ {
562
+ onClick: () => !isDisabled && deleteFile(index),
563
+ className: isDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
564
+ children: /* @__PURE__ */ jsx3(Icon_default, { className: "w-4 h-4 text-primary", name: "delete" })
565
+ }
566
+ )
567
+ ] }, index)) })
568
+ ] })
569
+ ] });
570
+ };
571
+ var AssetUpload_default = AssetUpload;
572
+
573
+ // src/components/controls/edit/InputControlClient.tsx
574
+ import { jsx as jsx4 } from "react/jsx-runtime";
575
+ var InputControl = React4.forwardRef(
576
+ (props, ref) => {
577
+ const ControlComponents = {
578
+ [InputControlType_default.lineTextInput]: LineTextInput_default,
579
+ [InputControlType_default.emailInput]: EmailInput_default,
580
+ [InputControlType_default.multilineTextInput]: MultilineTextInput_default,
581
+ [InputControlType_default.moneyInput]: MoneyInput_default,
582
+ [InputControlType_default.select]: Select_default,
583
+ [InputControlType_default.percentageInput]: PercentageInput_default,
584
+ [InputControlType_default.phoneInput]: PhoneInput_default,
585
+ [InputControlType_default.numberInput]: NumberInput_default,
586
+ [InputControlType_default.checkboxInput]: CheckboxInput_default,
587
+ [InputControlType_default.otpInput]: OtpInput_default,
588
+ [InputControlType_default.datetimeInput]: DateTimeInput_default,
589
+ [InputControlType_default.colorInput]: ColorInput_default,
590
+ [InputControlType_default.selectWithSearchInput]: SelectWithSearchInput_default,
591
+ [InputControlType_default.selectWithSearchPanel]: SelectWithSearchPanel_default,
592
+ [InputControlType_default.booleanSelect]: BooleanSelect_default,
593
+ [InputControlType_default.timeInput]: TimeInput_default,
594
+ [InputControlType_default.asset]: AssetUpload_default
595
+ };
596
+ const SelectedControlComponent = ControlComponents[props.controlType];
597
+ return /* @__PURE__ */ jsx4(React4.Fragment, { children: SelectedControlComponent ? /* @__PURE__ */ jsx4(SelectedControlComponent, { ...props }) : "Control not found" });
598
+ }
599
+ );
600
+ InputControl.displayName = "InputControl";
601
+ var InputControlClient_default = InputControl;
602
+ export {
603
+ InputControlClient_default as default
604
+ };