@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260713051007 → 0.8.1-dev.20260713054521

package/dist/InputControlClient-BO7WPPVX.mjs

@@ -0,0 +1,766 @@
+"use client";
+import {
+  AssetUtility_default,
+  BooleanSelect_default,
+  CheckboxInput_default,
+  ColorInput_default,
+  DateTimeInput_default,
+  EmailInput_default,
+  LineTextInput_default,
+  MoneyInput_default,
+  MultilineTextInput_default,
+  NumberInput_default,
+  OtpInput_default,
+  PercentageInput_default,
+  PhoneInput_default,
+  SelectWithSearchInput_default,
+  TimeInput_default,
+  VideoView_default
+} from "./chunk-NT56SZOV.mjs";
+import {
+  Hyperlink,
+  Icon_default,
+  InputControlType_default
+} from "./chunk-DBHUCH4B.mjs";
+import {
+  Button_default,
+  ClientButton_default
+} from "./chunk-YL6E76X2.mjs";
+import "./chunk-56HSDML5.mjs";
+
+// src/components/controls/edit/InputControlClient.tsx
+import React5 from "react";
+
+// src/components/controls/edit/Select.tsx
+import { useState, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Select = (props) => {
+  const [list, setList] = useState([]);
+  const getSafeValue = (val) => {
+    if (val === null || val === void 0) return "";
+    if (typeof val === "boolean") return val ? "1" : "0";
+    return val;
+  };
+  const textChangeHandler = (event) => {
+    let rawValue = event.target.value;
+    if (rawValue === "") rawValue = null;
+    let finalValue = rawValue;
+    if (list && props.dataKeyFieldName) {
+      const key = props.dataKeyFieldName;
+      const selectedItem = list.find(
+        (item) => String(item[key]) === String(rawValue)
+      );
+      if (selectedItem) {
+        const keyValue = selectedItem[key];
+        if (typeof keyValue === "number") {
+          finalValue = Number(rawValue);
+        }
+      }
+    }
+    props.callback?.({
+      name: props.name,
+      value: finalValue,
+      index: props.index,
+      groupKey: props.groupKey
+    });
+  };
+  useEffect(() => {
+    async function fetchData() {
+      if (props.dataset) {
+        setList(props.dataset);
+        return;
+      }
+      if (props.dataSource && props.serviceClient) {
+        let dataSource = props.dataSource;
+        let response;
+        if (props.dataSourceDependsOn && props.dependentValue) {
+          dataSource = dataSource.replace(
+            `{${props.dataSourceDependsOn}}`,
+            props.dependentValue
+          );
+        }
+        response = await props.serviceClient.get(dataSource);
+        setList(response.result ?? []);
+      }
+    }
+    fetchData();
+  }, [
+    props.dataset,
+    props.dataSource,
+    props.dependentValue,
+    props.dataSourceDependsOn
+  ]);
+  const value = getSafeValue(props.value);
+  return /* @__PURE__ */ jsxs("label", { className: "block", children: [
+    props.attributes?.label && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium inline-block pb-1", children: props.attributes?.label }),
+    " ",
+    props.attributes?.label && props.attributes?.required && /* @__PURE__ */ jsx("span", { className: "bg-error-weak", children: "*" }),
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        name: props.name,
+        id: props.name,
+        value,
+        onChange: textChangeHandler,
+        required: props.attributes?.required,
+        disabled: props.attributes?.readOnly,
+        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",
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: props.attributes?.placeholder || "Select" }),
+          list.map((item, index) => {
+            const keyField = props.dataKeyFieldName;
+            const textField = props.dataTextFieldName;
+            return /* @__PURE__ */ jsx("option", { value: item[keyField], children: item[textField] }, index);
+          })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 text-alert text-sm", children: props.attributes?.errorMessage || "" })
+  ] });
+};
+var Select_default = Select;
+
+// src/components/controls/edit/SelectWithSearchPanel.tsx
+import React2, {
+  useEffect as useEffect2,
+  useRef,
+  useState as useState2,
+  useCallback
+} from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var SelectWithSearchPanel = (props) => {
+  const [isOpen, setIsOpen] = useState2(false);
+  const [searchTerm, setSearchTerm] = useState2("");
+  const [highlightedIndex, setHighlightedIndex] = useState2(0);
+  const [list, setList] = useState2([]);
+  const listRef = useRef(null);
+  const [isError, setIsError] = useState2(false);
+  const containerRef = useRef(null);
+  const [isCreateOpen, setIsCreateOpen] = useState2(false);
+  const [formData, setFormData] = useState2({});
+  const getNestedValue = (obj, path) => {
+    return path.split(".").reduce((acc, key) => acc?.[key], obj);
+  };
+  useEffect2(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  useEffect2(() => {
+    async function fetchData() {
+      if (props.dataset) {
+        setList(props.dataset);
+      } else if (props.dataSource && props.serviceClient) {
+        let dataSource = props.dataSource;
+        if (props.dataSourceDependsOn && props.dependentValue) {
+          dataSource = dataSource.replace(
+            `{${props.dataSourceDependsOn}}`,
+            props.dependentValue
+          );
+        }
+        const response = await props.serviceClient.get(dataSource);
+        if (response?.result) setList(response.result);
+      }
+    }
+    fetchData();
+  }, [
+    props.dataSource,
+    props.dependentValue,
+    props.dataset,
+    props.dataSourceDependsOn
+  ]);
+  const filteredItems = list?.filter((item) => {
+    const value = getNestedValue(item, props.dataTextFieldName);
+    return value?.toLowerCase().includes(searchTerm?.toLowerCase());
+  });
+  const playBeep = () => {
+    const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+    const oscillator = audioCtx.createOscillator();
+    const gainNode = audioCtx.createGain();
+    oscillator.type = "square";
+    oscillator.frequency.setValueAtTime(300, audioCtx.currentTime);
+    gainNode.gain.setValueAtTime(0.02, audioCtx.currentTime);
+    oscillator.connect(gainNode);
+    gainNode.connect(audioCtx.destination);
+    oscillator.start();
+    setTimeout(() => {
+      oscillator.stop();
+      audioCtx.close();
+    }, 250);
+  };
+  useEffect2(() => {
+    const filteredItems2 = list?.filter(
+      (item) => item[props?.dataTextFieldName]?.toLowerCase().includes(searchTerm?.toLowerCase())
+    );
+    if (searchTerm.length > 0 && filteredItems2.length === 0) {
+      playBeep();
+      setIsError(true);
+    } else {
+      setIsError(false);
+    }
+  }, [searchTerm]);
+  const handleSelect = (event, item) => {
+    event.preventDefault();
+    setSearchTerm(getNestedValue(item, props.dataTextFieldName));
+    if (props.callback) {
+      const val = {};
+      props.callback({
+        name: props.name,
+        value: item[props.dataKeyFieldName],
+        index: props.index,
+        groupKey: props.groupKey
+      });
+    }
+    setHighlightedIndex(0);
+    setIsOpen(false);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      setIsOpen(false);
+      setHighlightedIndex(-1);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setHighlightedIndex((prev) => {
+        const nextIndex = prev < filteredItems.length - 1 ? prev + 1 : prev;
+        scrollIntoView(nextIndex);
+        return nextIndex;
+      });
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setHighlightedIndex((prev) => {
+        const prevIndex = prev > 0 ? prev - 1 : prev;
+        scrollIntoView(prevIndex);
+        return prevIndex;
+      });
+    } else if (e.key === "Enter" && highlightedIndex >= 0) {
+      handleSelect(e, filteredItems[highlightedIndex]);
+    }
+  };
+  const scrollIntoView = (index) => {
+    if (listRef.current) {
+      const item = listRef.current.children[index];
+      if (item) {
+        item.scrollIntoView();
+      }
+    }
+  };
+  const textChangeHandler = (event) => {
+    const newSearchTerm = event.target.value;
+    setSearchTerm(newSearchTerm);
+    setIsOpen(true);
+    setHighlightedIndex(0);
+  };
+  const handleInputChange = (event, field) => {
+    setFormData((prev) => ({ ...prev, [field]: event.target.value }));
+  };
+  const handleSaveModal = useCallback(async () => {
+    console.log("Form Data:", formData);
+    return formData;
+  }, []);
+  return /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs2("label", { className: "text-sm mb-1 font-medium", children: [
+      props.attributes?.label,
+      " ",
+      " ",
+      props?.attributes?.required && /* @__PURE__ */ jsx2("span", { className: "bg-error-weak", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { children: /* @__PURE__ */ jsx2(
+      "input",
+      {
+        type: "text",
+        value: searchTerm,
+        onChange: textChangeHandler,
+        onFocus: () => setIsOpen(true),
+        onKeyDown: handleKeyDown,
+        placeholder: props.attributes?.placeholder,
+        className: `peer mt-1 py-1.5 block w-full text-black rounded border-gray-300 shadow-sm
+          ${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"}  
+          disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none`
+      }
+    ) }),
+    /* @__PURE__ */ jsx2("div", { ref: containerRef, children: isOpen && /* @__PURE__ */ jsxs2(React2.Fragment, { children: [
+      /* @__PURE__ */ jsxs2("div", { className: "fixed z-50 right-0 bg-white top-[62px] w-1/4 border-l border-gray-200", children: [
+        /* @__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: [
+          "Select a",
+          " ",
+          props.attributes?.label || props.attributes?.heading
+        ] }) }),
+        /* @__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(
+          "button",
+          {
+            type: "button",
+            className: "text-primary hover:text-primary-800",
+            onMouseDown: (e) => {
+              e.preventDefault();
+              setIsCreateOpen(true);
+            },
+            children: "Create"
+          }
+        ) })
+      ] }),
+      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: [
+        /* @__PURE__ */ jsx2("div", { className: "flex flex-col p-2 bg-accent-950", children: /* @__PURE__ */ jsxs2("h5", { className: "text-md font-medium text-white", children: [
+          "Create New ",
+          props.attributes?.label
+        ] }) }),
+        /* @__PURE__ */ jsx2("div", { className: "flex justify-end px-4 border-b py-2 border-gray-200", children: /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            onClick: () => setIsCreateOpen(false),
+            className: "text-red-600 hover:text-red-800",
+            children: "Close"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs2("div", { className: "p-4", children: [
+          props.createFields?.map((field) => /* @__PURE__ */ jsxs2("div", { className: "mb-4", children: [
+            /* @__PURE__ */ jsx2("label", { className: "text-sm mb-1 font-medium block", children: field.label }),
+            /* @__PURE__ */ jsx2(
+              "input",
+              {
+                type: field.type,
+                value: formData[field.name] || "",
+                onChange: (e) => handleInputChange(e, field.name),
+                placeholder: field.placeholder,
+                required: field.required,
+                disabled: field.disabled,
+                pattern: field.pattern,
+                minLength: field.minLength,
+                maxLength: field.maxLength,
+                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"
+              }
+            )
+          ] }, field.name)),
+          /* @__PURE__ */ jsxs2(Button_default, { onClick: async () => {
+            handleSaveModal();
+            return { isSuccessful: true };
+          }, className: "w-full", children: [
+            "Save ",
+            props.attributes?.label
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx2(
+        "div",
+        {
+          ref: listRef,
+          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",
+          style: { height: "calc(100vh - 130px)" },
+          children: filteredItems.length > 0 ? filteredItems.map((item, index) => /* @__PURE__ */ jsx2("div", { children: /* @__PURE__ */ jsx2(
+            "button",
+            {
+              onClick: (e) => {
+                handleSelect(e, item);
+              },
+              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"}`,
+              role: "option",
+              tabIndex: -1,
+              onMouseEnter: () => setHighlightedIndex(index),
+              children: /* @__PURE__ */ jsx2("span", { children: getNestedValue(item, props.dataTextFieldName) })
+            }
+          ) }, item[props.dataKeyFieldName])) : /* @__PURE__ */ jsx2("div", { className: "px-4 py-2 text-gray-500", children: "No results found" })
+        }
+      )
+    ] }) })
+  ] });
+};
+var SelectWithSearchPanel_default = SelectWithSearchPanel;
+
+// src/components/controls/edit/AssetUpload.tsx
+import React3, { useEffect as useEffect3 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var AssetUpload = (props) => {
+  const isDisabled = props.attributes?.disable ?? false;
+  let allValues = [];
+  if (props.value !== void 0 && props.value !== null && props.value !== "") {
+    try {
+      allValues = JSON.parse(props.value.toString());
+    } catch (error) {
+    }
+  }
+  const getInitialTab = () => {
+    if (allValues.length > 0) {
+      const asset = allValues[0];
+      if (asset.posterUrl) {
+        return "video";
+      } else if (asset.assetUrl) {
+        return "image";
+      }
+    }
+    return "image";
+  };
+  const [assetType, setAssetType] = React3.useState(getInitialTab);
+  useEffect3(() => {
+    setAssetType(getInitialTab());
+  }, [props.value]);
+  const assetUploadCallback = (newAsset) => {
+    if (isDisabled) return;
+    let updated = [];
+    updated.push({
+      assetUrl: newAsset.assetUrl,
+      title: newAsset.title,
+      posterUrl: newAsset.posterUrl,
+      intrinsicHeight: newAsset.intrinsicHeight,
+      intrinsicWidth: newAsset.intrinsicWidth
+    });
+    props.callback?.({
+      name: props.name,
+      value: JSON.stringify(updated),
+      index: props.index,
+      groupKey: props.groupKey
+    });
+  };
+  const deleteFile = (index) => {
+    if (isDisabled) return;
+    let existingValue = [];
+    if (props.value) {
+      try {
+        existingValue = JSON.parse(props.value.toString());
+      } catch (error) {
+      }
+    }
+    if (existingValue.length > index) {
+      existingValue.splice(index, 1);
+      props.callback?.({
+        name: props.name,
+        value: JSON.stringify(existingValue),
+        index: props.index,
+        groupKey: props.groupKey
+      });
+    }
+  };
+  const textChangeHandler = (index, event) => {
+    if (isDisabled) return;
+    let existingValue = [];
+    if (props.value) {
+      try {
+        existingValue = JSON.parse(props.value.toString());
+      } catch (error) {
+      }
+    }
+    const text = event.target.value;
+    if (existingValue.length > index) {
+      const updatedArray = [...existingValue];
+      updatedArray[index] = { ...updatedArray[index], title: text };
+      props.callback?.({
+        name: props.name,
+        value: JSON.stringify(updatedArray),
+        index: props.index,
+        groupKey: props.groupKey
+      });
+    }
+  };
+  const getAssetType = (asset) => {
+    if (asset.assetUrl?.endsWith(".m3u8") || asset.posterUrl) return "video";
+    return "image";
+  };
+  const shouldShowDetails = () => {
+    if (allValues.length === 0) return false;
+    const asset = allValues[0];
+    if (assetType === "video") {
+      return Boolean(asset.posterUrl && asset.assetUrl && asset.assetUrl.endsWith(".m3u8"));
+    }
+    if (assetType === "image") {
+      return Boolean(asset.assetUrl && !asset.assetUrl.endsWith(".m3u8"));
+    }
+    return false;
+  };
+  return /* @__PURE__ */ jsxs3(React3.Fragment, { children: [
+    /* @__PURE__ */ jsx3("label", { className: "block mb-1", children: /* @__PURE__ */ jsx3("span", { className: "text-sm font-medium", children: props?.attributes?.label }) }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex gap-6 bg-neutral-100 rounded p-2", children: [
+      /* @__PURE__ */ jsx3(
+        ClientButton_default,
+        {
+          className: assetType === "image" ? "px-2 py-1 rounded bg-body-200 scale-95" : "text-neutral-700",
+          ButtonType: "Link" /* Link */,
+          onClick: () => setAssetType("image"),
+          disabled: isDisabled,
+          children: "Image Upload"
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        ClientButton_default,
+        {
+          className: assetType === "video" ? "bg-body-200 px-2 py-1 rounded-md scale-95" : "text-neutral-700",
+          ButtonType: "Link" /* Link */,
+          onClick: () => setAssetType("video"),
+          disabled: isDisabled,
+          children: "Video Upload"
+        }
+      )
+    ] }),
+    shouldShowDetails() && /* @__PURE__ */ jsxs3("div", { className: "relative mt-4 rounded-md p-4 border-2 border-dotted border-gray-300 bg-gray-50", children: [
+      /* @__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" }),
+      /* @__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: [
+        /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-2 gap-x-8 gap-y-3 text-sm w-full", children: [
+          /* @__PURE__ */ jsxs3("div", { children: [
+            /* @__PURE__ */ jsx3("p", { className: "text-gray-500", children: "Title" }),
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                type: "text",
+                value: digitalAsset.title,
+                onChange: (event) => textChangeHandler(index, event),
+                placeholder: "title",
+                disabled: isDisabled,
+                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"
+              }
+            )
+          ] }),
+          digitalAsset.intrinsicWidth && digitalAsset.intrinsicHeight && /* @__PURE__ */ jsxs3("div", { children: [
+            /* @__PURE__ */ jsx3("p", { className: "text-gray-500", children: "Resolution" }),
+            /* @__PURE__ */ jsxs3("p", { className: "font-medium text-gray-900 mt-3", children: [
+              digitalAsset.intrinsicWidth,
+              "\xD7",
+              digitalAsset.intrinsicHeight
+            ] })
+          ] }),
+          (digitalAsset.assetUrl || digitalAsset.posterUrl) && /* @__PURE__ */ jsxs3("div", { children: [
+            /* @__PURE__ */ jsx3("p", { className: "text-gray-500", children: "Image / Poster" }),
+            /* @__PURE__ */ jsxs3("div", { className: "flex-shrink-0 flex flex-col gap-3 mt-1", children: [
+              getAssetType(digitalAsset) === "video" && digitalAsset.posterUrl && /* @__PURE__ */ jsx3(
+                "img",
+                {
+                  src: AssetUtility_default.resolveUrl(props.serviceClient?.baseUrl, digitalAsset.posterUrl),
+                  alt: digitalAsset.title || "Video poster",
+                  className: "w-32 h-auto object-cover rounded border p-1"
+                }
+              ),
+              getAssetType(digitalAsset) === "image" && digitalAsset.assetUrl && /* @__PURE__ */ jsx3(
+                "img",
+                {
+                  src: AssetUtility_default.resolveUrl(props.serviceClient?.baseUrl, digitalAsset.assetUrl),
+                  alt: digitalAsset.title || "Uploaded image",
+                  className: "w-32 h-auto object-cover rounded border p-1"
+                }
+              )
+            ] })
+          ] }),
+          digitalAsset.assetUrl?.endsWith(".m3u8") && /* @__PURE__ */ jsxs3("div", { className: "col-span-2", children: [
+            /* @__PURE__ */ jsx3("p", { className: "text-gray-500", children: "HLS Link" }),
+            /* @__PURE__ */ jsx3(
+              Hyperlink,
+              {
+                href: digitalAsset.assetUrl,
+                className: "text-primary-600 underline mt-1 break-all",
+                title: digitalAsset.assetUrl,
+                children: digitalAsset.assetUrl
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx3(
+          "span",
+          {
+            onClick: () => !isDisabled && deleteFile(index),
+            className: isDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+            children: /* @__PURE__ */ jsx3(Icon_default, { className: "w-4 h-4 text-primary", name: "delete" })
+          }
+        )
+      ] }, index)) })
+    ] })
+  ] });
+};
+var AssetUpload_default = AssetUpload;
+
+// src/components/controls/edit/SwitchInput.tsx
+import React4 from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var SwitchInput = (props) => {
+  const textChangeHandler = (event) => {
+    let text = event.target.checked;
+    if (props.callback !== void 0) {
+      props.callback({
+        name: props.name,
+        value: text,
+        index: props.index,
+        groupKey: props.groupKey
+      });
+    }
+  };
+  let value = false;
+  if (props.value != void 0 && props.value != null && props.value != "" && (props.value == "true" || props.value.toString() == "true")) {
+    value = true;
+  }
+  return /* @__PURE__ */ jsx4(React4.Fragment, { children: /* @__PURE__ */ jsxs4("div", { className: "flex items-start justify-between gap-4 py-3", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "min-w-0", children: [
+      props?.attributes?.label && /* @__PURE__ */ jsxs4(
+        "label",
+        {
+          htmlFor: props.name,
+          className: "inline-block text-sm font-semibold text-slate-800",
+          children: [
+            props.attributes.label,
+            props?.attributes?.required && /* @__PURE__ */ jsx4("span", { className: "bg-error-weak", children: "*" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx4("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage || "" })
+    ] }),
+    /* @__PURE__ */ jsxs4(
+      "label",
+      {
+        htmlFor: props.name,
+        className: "relative inline-flex shrink-0 cursor-pointer items-center peer-disabled:cursor-not-allowed",
+        children: [
+          /* @__PURE__ */ jsx4(
+            "input",
+            {
+              type: "checkbox",
+              name: props.name,
+              id: props.name,
+              checked: value,
+              onChange: textChangeHandler,
+              required: props?.attributes?.required,
+              disabled: props?.attributes?.readOnly,
+              className: "peer sr-only"
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            "div",
+            {
+              className: "h-6 w-11 rounded-full bg-slate-200 shadow-inner\n                       transition-colors duration-200 ease-in-out\n                       peer-checked:bg-blue-600\n                       peer-focus-visible:ring-2 peer-focus-visible:ring-blue-300 peer-focus-visible:ring-offset-2\n                       peer-disabled:bg-slate-100"
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            "div",
+            {
+              className: "absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-default shadow\n                       transition-transform duration-200 ease-in-out\n                       peer-checked:translate-x-5\n                       peer-disabled:bg-slate-50"
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
+};
+var SwitchInput_default = SwitchInput;
+
+// src/components/controls/edit/VideoInput.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var normalizeVideoValue = (value) => {
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (!trimmed) return void 0;
+    try {
+      const parsed = JSON.parse(trimmed);
+      if (typeof parsed === "string") {
+        return parsed;
+      }
+      if (parsed && typeof parsed === "object") {
+        const candidate = parsed;
+        if (typeof candidate.assetUrl === "string") return candidate.assetUrl;
+        if (typeof candidate.url === "string") return candidate.url;
+        if (typeof candidate.src === "string") return candidate.src;
+      }
+    } catch {
+      return trimmed;
+    }
+    return trimmed;
+  }
+  if (value && typeof value === "object") {
+    const candidate = value;
+    if (typeof candidate.assetUrl === "string") return candidate.assetUrl;
+    if (typeof candidate.url === "string") return candidate.url;
+    if (typeof candidate.src === "string") return candidate.src;
+  }
+  return void 0;
+};
+var VideoInput = (props) => {
+  const isReadOnly = Boolean(
+    props.attributes?.readOnly || props.disable || props.attributes?.disable
+  );
+  const videoUrl = normalizeVideoValue(props.value ?? props.defaultValue);
+  const handleChange = (event) => {
+    const text = event.target.value;
+    props.callback?.({
+      name: props.name,
+      value: text,
+      index: props.index,
+      groupKey: props.groupKey
+    });
+  };
+  return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2", children: [
+    "ayush testing",
+    props.attributes?.label ? /* @__PURE__ */ jsxs5("label", { className: "text-sm font-medium", children: [
+      props.attributes.label,
+      props.attributes?.required ? /* @__PURE__ */ jsx5("span", { className: "ml-1 text-red-500", children: "*" }) : null
+    ] }) : null,
+    isReadOnly ? /* @__PURE__ */ jsxs5(Fragment, { children: [
+      "called video view",
+      console.log(props.value, "vkjbvbvbvsdjkvdfn"),
+      /* @__PURE__ */ jsx5(
+        VideoView_default,
+        {
+          ...props,
+          value: props.value ?? props.defaultValue,
+          assetBaseUrl: props.serviceClient?.baseUrl
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs5(Fragment, { children: [
+      /* @__PURE__ */ jsx5(
+        "input",
+        {
+          type: "text",
+          name: props.name,
+          id: props.name,
+          value: videoUrl ?? "",
+          onChange: handleChange,
+          onBlur: props.onBlur,
+          placeholder: props.attributes?.placeholder || "Paste a video URL or blob URL",
+          disabled: isReadOnly,
+          className: "peer input mt-1 block w-full rounded shadow-sm"
+        }
+      ),
+      videoUrl ? /* @__PURE__ */ jsx5(
+        VideoView_default,
+        {
+          ...props,
+          value: props.value ?? props.defaultValue,
+          assetBaseUrl: props.serviceClient?.baseUrl
+        }
+      ) : null
+    ] })
+  ] });
+};
+var VideoInput_default = VideoInput;
+
+// src/components/controls/edit/InputControlClient.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var InputControl = React5.forwardRef(
+  (props, ref) => {
+    const ControlComponents = {
+      [InputControlType_default.lineTextInput]: LineTextInput_default,
+      [InputControlType_default.emailInput]: EmailInput_default,
+      [InputControlType_default.multilineTextInput]: MultilineTextInput_default,
+      [InputControlType_default.moneyInput]: MoneyInput_default,
+      [InputControlType_default.select]: Select_default,
+      [InputControlType_default.percentageInput]: PercentageInput_default,
+      [InputControlType_default.phoneInput]: PhoneInput_default,
+      [InputControlType_default.numberInput]: NumberInput_default,
+      [InputControlType_default.checkboxInput]: CheckboxInput_default,
+      [InputControlType_default.otpInput]: OtpInput_default,
+      [InputControlType_default.datetimeInput]: DateTimeInput_default,
+      [InputControlType_default.colorInput]: ColorInput_default,
+      [InputControlType_default.selectWithSearchInput]: SelectWithSearchInput_default,
+      [InputControlType_default.selectWithSearchPanel]: SelectWithSearchPanel_default,
+      [InputControlType_default.booleanSelect]: BooleanSelect_default,
+      [InputControlType_default.timeInput]: TimeInput_default,
+      [InputControlType_default.asset]: AssetUpload_default,
+      [InputControlType_default.switchInput]: SwitchInput_default,
+      [InputControlType_default.videoInput]: VideoInput_default
+    };
+    const SelectedControlComponent = ControlComponents[props.controlType];
+    return /* @__PURE__ */ jsx6(React5.Fragment, { children: SelectedControlComponent ? /* @__PURE__ */ jsx6(SelectedControlComponent, { ...props }) : "Control not found" });
+  }
+);
+InputControl.displayName = "InputControl";
+var InputControlClient_default = InputControl;
+export {
+  InputControlClient_default as default
+};