@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260722112436 → 0.8.1-dev.20260723122345

package/dist/server.js

@@ -852,7 +852,9 @@ var init_Button = __esm({
         event.preventDefault();
         event.stopPropagation();
         if (props.confirm) {
-          const confirmed = await showConfirmation("Are you sure you want to delete this item?");
+          const confirmed = await showConfirmation(
+            "Are you sure you want to delete this item?"
+          );
           setShowModal(null);
           if (!confirmed) {
             return;
@@ -867,7 +869,9 @@ var init_Button = __esm({
           isValid = await props.onValidate();
           if (!isValid) {
             setInProgress(false);
-            ToastService_default.showError("There are errors in the form. Please fix them before proceeding.");
+            ToastService_default.showError(
+              "There are errors in the form. Please fix them before proceeding."
+            );
             return;
           }
         }
@@ -891,7 +895,16 @@ var init_Button = __esm({
         return new Promise((resolve) => {
           const onConfirm = () => resolve(true);
           const onCancel = () => resolve(false);
-          setShowModal(/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Confirm_default, { message: props.confirmationMessage, onConfirm, onCancel }));
+          setShowModal(
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              Confirm_default,
+              {
+                message: props.confirmationMessage,
+                onConfirm,
+                onCancel
+              }
+            )
+          );
         });
       };
       let buttonClass = props.ButtonType ? buttonClasses.get(props.ButtonType) : buttonClasses.get("Primary" /* Solid */);
@@ -905,13 +918,39 @@ var init_Button = __esm({
             onClick: execute,
             disabled: props.disabled,
             title: isDisabled ? "The button is disabled to prevent any action" : "",
-            className: buttonClass + " relative " + props.className,
+            className: `${buttonClass} relative inline-flex items-center justify-center gap-2 ${props.className ?? ""}`,
             children: [
               isActionPerformed && props.oneTimeAction && responseMessage ? responseMessage : props.children,
-              inProgress && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react4.default.Fragment, { children: props.hideProgressIndicator === true ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute bottom-0 left-0 h-0.5 bg-gray-400 rounded animate-progress" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { className: "animate-spin ml-2 mr-3 h-5 w-5 " + progressClass, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { className: "opacity-75", fill: "currentColor", 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" })
-              ] }) })
+              inProgress && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: props.hideProgressIndicator ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute bottom-0 left-0 h-0.5 bg-gray-400 rounded animate-progress" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                "svg",
+                {
+                  className: `animate-spin h-5 w-5 flex-shrink-0 ${progressClass}`,
+                  xmlns: "http://www.w3.org/2000/svg",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      "circle",
+                      {
+                        className: "opacity-25",
+                        cx: "12",
+                        cy: "12",
+                        r: "10",
+                        stroke: "currentColor",
+                        strokeWidth: "4"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      "path",
+                      {
+                        className: "opacity-75",
+                        fill: "currentColor",
+                        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"
+                      }
+                    )
+                  ]
+                }
+              ) })
             ]
           }
         ),
@@ -1154,6 +1193,8 @@ var init_LinkNodeButton = __esm({
     LinkNodeButton = (props) => {
       const { node, dataitem, children, linkText, linkType, linkUrl } = props;
       const [isLoading, setIsLoading] = (0, import_react5.useState)(false);
+      const [successMessage, setSuccessMessage] = (0, import_react5.useState)(null);
+      console.log("LinkNodeButton props:", props);
       const extractFieldNames = (0, import_react5.useCallback)((template) => {
         if (!template) return [];
         const regex = /\{(\{\})?([a-zA-Z_$][a-zA-Z0-9_$]*)(?:\}\})?\}/g;
@@ -1161,35 +1202,38 @@ var init_LinkNodeButton = __esm({
         const fieldNames = matches.map((match) => match[2] || match[1]).filter((name, index, self) => self.indexOf(name) === index);
         return fieldNames;
       }, []);
-      const replaceTemplateVariables = (0, import_react5.useCallback)((template, responseData) => {
-        if (!template) return template;
-        let result = template;
-        const fieldNames = extractFieldNames(template);
-        if (responseData) {
-          fieldNames.forEach((fieldName) => {
-            const value = getNestedValue7(responseData, fieldName);
-            if (value !== void 0) {
-              const regex1 = new RegExp(`\\{${fieldName}\\}`, "g");
-              const regex2 = new RegExp(`\\{\\{${fieldName}\\}\\}`, "g");
-              result = result.replace(regex1, String(value));
-              result = result.replace(regex2, String(value));
-            }
-          });
-        }
-        if (props.routeParameters) {
-          Object.entries(props.routeParameters).forEach(([key, value]) => {
-            const regex = new RegExp(`\\{\\{${key}\\}\\}`, "g");
-            result = result.replace(regex, String(value));
-          });
-        }
-        if (dataitem) {
-          Object.entries(dataitem).forEach(([key, value]) => {
-            const regex = new RegExp(`\\{\\{${key}\\}\\}`, "g");
-            result = result.replace(regex, String(value));
-          });
-        }
-        return result;
-      }, [props.routeParameters, dataitem, extractFieldNames]);
+      const replaceTemplateVariables = (0, import_react5.useCallback)(
+        (template, responseData) => {
+          if (!template) return template;
+          let result = template;
+          const fieldNames = extractFieldNames(template);
+          if (responseData) {
+            fieldNames.forEach((fieldName) => {
+              const value = getNestedValue7(responseData, fieldName);
+              if (value !== void 0) {
+                const regex1 = new RegExp(`\\{${fieldName}\\}`, "g");
+                const regex2 = new RegExp(`\\{\\{${fieldName}\\}\\}`, "g");
+                result = result.replace(regex1, String(value));
+                result = result.replace(regex2, String(value));
+              }
+            });
+          }
+          if (props.routeParameters) {
+            Object.entries(props.routeParameters).forEach(([key, value]) => {
+              const regex = new RegExp(`\\{\\{${key}\\}\\}`, "g");
+              result = result.replace(regex, String(value));
+            });
+          }
+          if (dataitem) {
+            Object.entries(dataitem).forEach(([key, value]) => {
+              const regex = new RegExp(`\\{\\{${key}\\}\\}`, "g");
+              result = result.replace(regex, String(value));
+            });
+          }
+          return result;
+        },
+        [props.routeParameters, dataitem, extractFieldNames]
+      );
       const getNestedValue7 = (0, import_react5.useCallback)((obj, path) => {
         if (!obj || !path) return void 0;
         if (obj[path] !== void 0) {
@@ -1207,7 +1251,10 @@ var init_LinkNodeButton = __esm({
       }, []);
       const onClick = (0, import_react5.useCallback)(async () => {
         if (!node.postUrl) {
-          return { isSuccessful: false, message: "No POST URL configured for this button" };
+          return {
+            isSuccessful: false,
+            message: "No POST URL configured for this button"
+          };
         }
         setIsLoading(true);
         try {
@@ -1233,6 +1280,7 @@ var init_LinkNodeButton = __esm({
           }
           if (response?.message) {
             ToastService_default.showSuccess(response.message);
+            setSuccessMessage(response.message);
           }
           if (response && node.redirectUrl) {
             const fieldNames = extractFieldNames(node.redirectUrl);
@@ -1255,7 +1303,9 @@ var init_LinkNodeButton = __esm({
               }
             });
             console.log("Field value map:", fieldValueMap);
-            const missingFields = fieldNames.filter((fieldName) => !fieldValueMap[fieldName]);
+            const missingFields = fieldNames.filter(
+              (fieldName) => !fieldValueMap[fieldName]
+            );
             if (missingFields.length > 0) {
               console.warn(`Missing field values for: ${missingFields.join(", ")}`);
             }
@@ -1266,7 +1316,10 @@ var init_LinkNodeButton = __esm({
               resolvedRedirectUrl = resolvedRedirectUrl.replace(regex1, value);
               resolvedRedirectUrl = resolvedRedirectUrl.replace(regex2, value);
             });
-            resolvedRedirectUrl = replaceTemplateVariables(resolvedRedirectUrl, response);
+            resolvedRedirectUrl = replaceTemplateVariables(
+              resolvedRedirectUrl,
+              response
+            );
             console.log("Final redirect URL:", resolvedRedirectUrl);
             if (resolvedRedirectUrl && !resolvedRedirectUrl.includes("{")) {
               window.location.href = resolvedRedirectUrl;
@@ -1277,14 +1330,27 @@ var init_LinkNodeButton = __esm({
             return { isSuccessful: false, message: errorMessage };
           }
           setIsLoading(false);
-          return { isSuccessful: true, message: response?.message, result: response };
+          return {
+            isSuccessful: true,
+            message: response?.message,
+            result: response
+          };
         } catch (err) {
           console.error("Button API call failed:", err);
           const errorMessage = err.message || "An unexpected error occurred";
           setIsLoading(false);
           return { isSuccessful: false, message: errorMessage };
         }
-      }, [node.postUrl, node.payload, node.redirectUrl, replaceTemplateVariables, extractFieldNames, getNestedValue7, props.apiBaseUrl, props.session]);
+      }, [
+        node.postUrl,
+        node.payload,
+        node.redirectUrl,
+        replaceTemplateVariables,
+        extractFieldNames,
+        getNestedValue7,
+        props.apiBaseUrl,
+        props.session
+      ]);
       const renderButtonContent = () => {
         if (children) {
           return children;
@@ -1294,14 +1360,41 @@ var init_LinkNodeButton = __esm({
         }
         return node.title || "Button";
       };
+      const fontSize = node.children?.[0]?.style?.match(/font-size:\s*([^;]+)/)?.[1];
       return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "link-button-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         Button_default,
         {
           ButtonType: linkType,
           onClick,
-          disabled: isLoading,
+          disabled: isLoading || !!successMessage,
           className: "w-full",
-          children: renderButtonContent()
+          children: successMessage ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            "span",
+            {
+              style: fontSize ? { fontSize } : void 0,
+              className: "inline-flex items-center gap-2",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    viewBox: "0 0 20 20",
+                    fill: "currentColor",
+                    className: "w-5 h-5",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      "path",
+                      {
+                        fillRule: "evenodd",
+                        d: "M16.704 5.29a1 1 0 010 1.42l-7.25 7.25a1 1 0 01-1.415 0L3.29 9.21a1 1 0 111.415-1.414l4.042 4.042 6.543-6.543a1 1 0 011.414 0z",
+                        clipRule: "evenodd"
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: successMessage })
+              ]
+            }
+          ) : renderButtonContent()
         }
       ) });
     };
@@ -1314,13 +1407,42 @@ var DateViewClient_exports = {};
 __export(DateViewClient_exports, {
   default: () => DateViewClient_default
 });
-var import_react8, import_jsx_runtime15, DateViewClient, DateViewClient_default;
+var import_react8, import_jsx_runtime15, dateFormatter, timeFormatterNoSeconds, timeFormatterWithSeconds, dateTimeFormatterNoSeconds, dateTimeFormatterWithSeconds, DateViewClient, DateViewClient_default;
 var init_DateViewClient = __esm({
   "src/components/controls/view/DateViewClient.tsx"() {
     "use strict";
     "use client";
     import_react8 = require("react");
     import_jsx_runtime15 = require("react/jsx-runtime");
+    dateFormatter = new Intl.DateTimeFormat("en", {
+      day: "2-digit",
+      month: "short",
+      year: "numeric"
+    });
+    timeFormatterNoSeconds = new Intl.DateTimeFormat("en", {
+      hour: "2-digit",
+      minute: "2-digit"
+    });
+    timeFormatterWithSeconds = new Intl.DateTimeFormat("en", {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit"
+    });
+    dateTimeFormatterNoSeconds = new Intl.DateTimeFormat("en", {
+      day: "2-digit",
+      month: "short",
+      year: "numeric",
+      hour: "2-digit",
+      minute: "2-digit"
+    });
+    dateTimeFormatterWithSeconds = new Intl.DateTimeFormat("en", {
+      day: "2-digit",
+      month: "short",
+      year: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit"
+    });
     DateViewClient = (props) => {
       const [timeZoneAbbr, setTimeZoneAbbr] = (0, import_react8.useState)("");
       (0, import_react8.useEffect)(() => {
@@ -1345,37 +1467,13 @@ var init_DateViewClient = __esm({
         return date;
       };
       const formatDate = (date) => {
-        return new Intl.DateTimeFormat("en", {
-          day: "2-digit",
-          month: "short",
-          year: "numeric"
-        }).format(date);
+        return dateFormatter.format(date);
       };
       const formatTime = (date) => {
-        return date.getSeconds() === 0 ? new Intl.DateTimeFormat("en", {
-          hour: "2-digit",
-          minute: "2-digit"
-        }).format(date) : new Intl.DateTimeFormat("en", {
-          hour: "2-digit",
-          minute: "2-digit",
-          second: "2-digit"
-        }).format(date);
+        return date.getSeconds() === 0 ? timeFormatterNoSeconds.format(date) : timeFormatterWithSeconds.format(date);
       };
       const formatDateTime = (date) => {
-        return date.getSeconds() === 0 ? new Intl.DateTimeFormat("en", {
-          day: "2-digit",
-          month: "short",
-          year: "numeric",
-          hour: "2-digit",
-          minute: "2-digit"
-        }).format(date) : new Intl.DateTimeFormat("en", {
-          day: "2-digit",
-          month: "short",
-          year: "numeric",
-          hour: "2-digit",
-          minute: "2-digit",
-          second: "2-digit"
-        }).format(date);
+        return date.getSeconds() === 0 ? dateTimeFormatterNoSeconds.format(date) : dateTimeFormatterWithSeconds.format(date);
       };
       const getTimePeriod = (date) => {
         const hours = date.getHours();
@@ -3632,6 +3730,17 @@ var EmbedNode_default = EmbedNode;
 init_ServiceClient();
 
 // src/components/utilities/AnimationUtility.tsx
+var normalizeSelector = (guid) => {
+  const trimmedGuid = guid?.trim();
+  if (!trimmedGuid) {
+    return ".animation-fallback";
+  }
+  const baseValue = trimmedGuid.replace(/^#/, "").replace(/^\./, "");
+  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+    return `#${CSS.escape(baseValue)}`;
+  }
+  return `#${baseValue}`;
+};
 var AnimationUtility = class {
   static generateAnimationCSS(config, guid) {
     const {
@@ -3646,10 +3755,12 @@ var AnimationUtility = class {
       speedPerChar = 100,
       cursor = true,
       mode = "enter",
-      direction = "left"
-      // Default direction
+      direction = "left",
+      backgroundColor,
+      borderColor
     } = config;
     let base = "", visible = "", keyframes = "";
+    const selector = normalizeSelector(guid);
     switch (config.animation) {
       case "Fade":
         base = `opacity:0; transition:opacity ${duration}ms ${easing} ${delay}ms;`;
@@ -3683,12 +3794,20 @@ var AnimationUtility = class {
       `;
         if (mode === "enter") {
           base = `opacity:0;`;
-          visible = `opacity:1; animation:bounce ${duration}ms ${easing} ${delay}ms ${repeat};`;
+          visible = `opacity:1; animation: bounce ${duration}ms ${easing} ${delay}ms ${repeat};`;
         } else {
           base = ``;
-          visible = `animation:bounce ${duration / 1e3}s ${easing} ${delay / 1e3}s ${repeat};`;
+          visible = `animation: bounce ${duration / 1e3}s ${easing} ${delay / 1e3}s ${repeat};`;
         }
         break;
+      case "Background":
+        base = `transition: background-color ${duration}ms ${easing} ${delay}ms;`;
+        visible = `background-color: ${backgroundColor};`;
+        break;
+      case "Border":
+        base = `transition: border-color ${duration}ms ${easing} ${delay}ms;`;
+        visible = `border-color: ${borderColor};`;
+        break;
       case "Typewriter":
         keyframes = ` 
         @keyframes typewriter { from { width: 0 } to { width: 100% } } 
@@ -3710,14 +3829,14 @@ var AnimationUtility = class {
     if (mode === "hover") {
       return `
       ${keyframes} 
-      ${guid} { ${base} } 
-      ${guid}:hover { ${visible} } 
+      ${selector} { ${base} } 
+      ${selector}:hover { ${visible} } 
     `;
     } else {
       return `
       ${keyframes} 
-      ${guid} { ${base} } 
-      ${guid}.visible { ${visible} } 
+      ${selector} { ${base} } 
+      ${selector}.visible { ${visible} } 
     `;
     }
   }
@@ -4847,6 +4966,7 @@ var DivContainer = async (props) => {
   }
   const updatedStyle = { ...updatedStyles };
   const guid = "css" + crypto.randomUUID().toLocaleLowerCase();
+  const animationSelector = `#${guid}`;
   const { enterAnimation, exitAnimation, hoverAnimation } = props.node;
   let animationCSS = "";
   if (enterAnimation?.name) {
@@ -4856,7 +4976,7 @@ var DivContainer = async (props) => {
         mode: "enter",
         ...enterAnimation.properties
       },
-      `#${guid}`
+      animationSelector
     );
   }
   if (hoverAnimation?.name) {
@@ -4866,7 +4986,7 @@ var DivContainer = async (props) => {
         mode: "hover",
         ...hoverAnimation.properties
       },
-      `#${guid}`
+      animationSelector
     );
   }
   const isHidden = !shouldRenderContainer(
@@ -5129,46 +5249,49 @@ var PageBodyRenderer = (props) => {
     }
     return true;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react34.default.Fragment, { children: rootNode && rootNode?.children?.map((node, index) => {
-    {
-    }
-    const SelectedNode = NodeTypes[node.type];
-    if (!shouldRenderNode(node)) {
-      return null;
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react34.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react34.default.Fragment, { children: node.type == "layout-container" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react34.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-      SelectedNode,
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_react34.default.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { children: "Thuis isadiasdia testaststtstst" }),
+    rootNode && rootNode?.children?.map((node, index) => {
       {
-        node,
-        firstNode: true,
-        routeParameters: props.routeParameters,
-        query: props.query,
-        session: props.session,
-        host: props.host,
-        path: props.path,
-        apiBaseUrl: props.apiBaseUrl,
-        serviceClient: props.serviceClient,
-        assetBaseUrl: props.assetBaseUrl,
-        device: props.device,
-        widgetRenderer: props.widgetRenderer
       }
-    ) }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react34.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-      SelectedNode,
-      {
-        node,
-        routeParameters: props.routeParameters,
-        query: props.query,
-        session: props.session,
-        host: props.host,
-        path: props.path,
-        apiBaseUrl: props.apiBaseUrl,
-        serviceClient: props.serviceClient,
-        assetBaseUrl: props.assetBaseUrl,
-        device: props.device,
-        widgetRenderer: props.widgetRenderer
+      const SelectedNode = NodeTypes[node.type];
+      if (!shouldRenderNode(node)) {
+        return null;
       }
-    ) }) }) }, index);
-  }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react34.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react34.default.Fragment, { children: node.type == "layout-container" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react34.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        SelectedNode,
+        {
+          node,
+          firstNode: true,
+          routeParameters: props.routeParameters,
+          query: props.query,
+          session: props.session,
+          host: props.host,
+          path: props.path,
+          apiBaseUrl: props.apiBaseUrl,
+          serviceClient: props.serviceClient,
+          assetBaseUrl: props.assetBaseUrl,
+          device: props.device,
+          widgetRenderer: props.widgetRenderer
+        }
+      ) }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react34.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        SelectedNode,
+        {
+          node,
+          routeParameters: props.routeParameters,
+          query: props.query,
+          session: props.session,
+          host: props.host,
+          path: props.path,
+          apiBaseUrl: props.apiBaseUrl,
+          serviceClient: props.serviceClient,
+          assetBaseUrl: props.assetBaseUrl,
+          device: props.device,
+          widgetRenderer: props.widgetRenderer
+        }
+      ) }) }) }, index);
+    })
+  ] });
 };
 var PageBodyRenderer_default = PageBodyRenderer;
 // Annotate the CommonJS export names for ESM import in node: