@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260818060820 → 0.8.1-dev.20260824072352

package/dist/server.mjs

@@ -1,10 +1,16 @@
 import {
-  Hyperlink,
   OdataBuilder
-} from "./chunk-TVL6KVD5.mjs";
+} from "./chunk-Q46GMD3P.mjs";
+import {
+  AssetUtility_default
+} from "./chunk-TQ6BXQ3A.mjs";
+import {
+  Hyperlink
+} from "./chunk-2R26M6CK.mjs";
+import "./chunk-4R7F7LBL.mjs";
 import {
   ServiceClient_default
-} from "./chunk-3GWLDT7C.mjs";
+} from "./chunk-WXZMRMRS.mjs";
 import "./chunk-56HSDML5.mjs";
 
 // src/components/pageRenderingEngine/PageBodyRenderer.tsx
@@ -95,27 +101,6 @@ var LineBreakNode_default = LineBreakNode;
 // src/components/pageRenderingEngine/nodes/LinkNode.tsx
 import React from "react";
 
-// src/components/utilities/AssetUtility.tsx
-var AssetUtility = class {
-  constructor() {
-  }
-  static resolveUrl(assetBaseUrl, url) {
-    if (!url) return void 0;
-    if (url.startsWith("http")) return url;
-    if (!assetBaseUrl) return url;
-    return `${assetBaseUrl}/${url}`;
-  }
-  // // static getAssetUrl(apiBaseUrl: string) {
-  // //   let domainName = apiBaseUrl.replace("https://", "");
-  // //   return `https://cdn.g-assets.com/${domainName}`;
-  // // }
-  // static getAssetFullPath(apiBaseUrl: string, relativePath: string) {
-  //   const domainName = apiBaseUrl.replace("https://", "");
-  //   return `https://cdn.g-assets.com/${domainName}/${relativePath}`;
-  // }
-};
-var AssetUtility_default = AssetUtility;
-
 // src/components/pageRenderingEngine/nodes/ImageNode.tsx
 import dynamic2 from "next/dynamic";
 
@@ -305,7 +290,7 @@ var ImageNode_default = ImageNode;
 // src/components/pageRenderingEngine/nodes/LinkNode.tsx
 import dynamic3 from "next/dynamic";
 import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
-var LinkNodeButton = dynamic3(() => import("./LinkNodeButton-KZRNRJRI.mjs"), {
+var LinkNodeButton = dynamic3(() => import("./LinkNodeButton-IT2CELKO.mjs"), {
   ssr: false
 });
 function getNestedValue2(obj, path) {
@@ -2278,7 +2263,10 @@ var GoogleMapNode_default = GoogleMapNode;
 
 // src/components/pageRenderingEngine/nodes/DivContainer.tsx
 import { jsx as jsx35, jsxs as jsxs13 } from "react/jsx-runtime";
-var Pagination = dynamic11(() => import("./Pagination-6OFACRMQ.mjs"), { ssr: true });
+var Pagination = dynamic11(() => import("./Pagination-ZQO3EUKB.mjs"), { ssr: true });
+var DataBindingControls = dynamic11(() => import("./DataBindingControls-XCAIDMDC.mjs"), {
+  ssr: true
+});
 var Slider = dynamic11(() => import("./Slider-PEIVH6A5.mjs"), {
   ssr: false
 });
@@ -2686,6 +2674,36 @@ var DivContainer = async (props) => {
     noLinkColor && "no-link-color",
     !!props.node.enterAnimation && "enter-animation"
   ].filter(Boolean).join(" ");
+  const showDataBindingControls = Boolean(
+    dataBindingProperties?.showFacets || dataBindingProperties?.showSortOptions || dataBindingProperties?.showSearchBar
+  );
+  const WrapperComponent = Wrapper;
+  const renderedContainer = /* @__PURE__ */ jsx35(
+    WrapperComponent,
+    {
+      id: guid,
+      style: combinedStyles,
+      className: classNames || void 0,
+      ...wrapperProps,
+      children: dataToRender.map(
+        (item, idx) => item?.links?.view && renderLink ? renderChildren(
+          props.node.children,
+          props,
+          item,
+          idx,
+          props.href ? void 0 : item?.links?.view
+        )?.map((child, i) => /* @__PURE__ */ jsx35(React22.Fragment, { children: child }, i)) : renderChildren(props.node.children, props, item, idx)
+      )
+    }
+  );
+  const paginationControl = dataBindingProperties?.enablePagination ? /* @__PURE__ */ jsx35(
+    Pagination,
+    {
+      path: props.path,
+      query: props.query,
+      dataset: response
+    }
+  ) : null;
   return /* @__PURE__ */ jsxs13(React22.Fragment, { children: [
     /* @__PURE__ */ jsx35(
       "style",
@@ -2693,32 +2711,48 @@ var DivContainer = async (props) => {
         dangerouslySetInnerHTML: { __html: cssResult.css + animationCSS }
       }
     ),
-    /* @__PURE__ */ jsx35(
-      Wrapper,
-      {
-        id: guid,
-        style: combinedStyles,
-        className: classNames || void 0,
-        ...wrapperProps,
-        children: dataToRender.map(
-          (item, idx) => item?.links?.view && renderLink ? renderChildren(
-            props.node.children,
-            props,
-            item,
-            idx,
-            props.href ? void 0 : item?.links?.view
-          )?.map((child, i) => /* @__PURE__ */ jsx35(React22.Fragment, { children: child }, i)) : renderChildren(props.node.children, props, item, idx)
-        )
-      }
-    ),
-    dataBindingProperties && props.node.dataBinding.enablePagination && /* @__PURE__ */ jsx35("div", { children: /* @__PURE__ */ jsx35(
-      Pagination,
-      {
-        path: props.path,
-        query: props.query,
-        dataset: response
-      }
-    ) })
+    showDataBindingControls ? /* @__PURE__ */ jsxs13(React22.Fragment, { children: [
+      /* @__PURE__ */ jsx35(
+        DataBindingControls,
+        {
+          mode: "toolbar",
+          path: props.path,
+          query: props.query,
+          facets: response?.facets,
+          sortOptions: response?.sortOptions,
+          showSortOptions: dataBindingProperties?.showSortOptions,
+          showSearchBar: dataBindingProperties?.showSearchBar
+        }
+      ),
+      /* @__PURE__ */ jsxs13(
+        "div",
+        {
+          className: dataBindingProperties?.showFacets ? "grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_18rem]" : void 0,
+          children: [
+            /* @__PURE__ */ jsxs13("div", { className: "min-w-0", children: [
+              renderedContainer,
+              paginationControl
+            ] }),
+            dataBindingProperties?.showFacets && /* @__PURE__ */ jsxs13("aside", { className: "border bg-default p-3 lg:sticky lg:top-[90px] lg:self-start", children: [
+              /* @__PURE__ */ jsx35("h2", { className: "mb-2 text-lg font-semibold", children: "Filters" }),
+              /* @__PURE__ */ jsx35(
+                DataBindingControls,
+                {
+                  mode: "facets",
+                  path: props.path,
+                  query: props.query,
+                  facets: response?.facets,
+                  showFacets: dataBindingProperties.showFacets
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs13(React22.Fragment, { children: [
+      renderedContainer,
+      paginationControl && /* @__PURE__ */ jsx35("div", { children: paginationControl })
+    ] })
   ] });
 };
 var DivContainer_default = DivContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clyrex-digital/clyrex-controls-dev",
-  "version": "0.8.1-dev.20260818060820",
+  "version": "0.8.1-dev.20260824072352",
   "description": "Reusable React components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/dist/LinkNodeButton-KZRNRJRI.mjs

@@ -1,467 +0,0 @@
-"use client";
-import {
-  ServiceClient_default
-} from "./chunk-3GWLDT7C.mjs";
-import {
-  buttonClasses,
-  progressClasses
-} from "./chunk-56HSDML5.mjs";
-
-// src/components/pageRenderingEngine/nodes/LinkNodeButton.tsx
-import { useCallback, useState as useState3 } from "react";
-
-// src/components/Button.tsx
-import React3, { useState as useState2 } from "react";
-
-// src/components/ToastService.tsx
-var toastHandlersKey = "__digitalStoreToastHandlers";
-var getToastHandlers = () => {
-  const globalScope = globalThis;
-  if (!globalScope[toastHandlersKey]) {
-    globalScope[toastHandlersKey] = {};
-  }
-  return globalScope[toastHandlersKey];
-};
-var ToastService = class {
-  static initialize(showToast, closeToast) {
-    const handlers = getToastHandlers();
-    handlers.showToast = showToast;
-    handlers.closeToast = closeToast;
-  }
-  static showError(message) {
-    const handlers = getToastHandlers();
-    if (handlers.showToast) {
-      handlers.showToast(message, "error");
-    }
-  }
-  static showInfo(message) {
-    const handlers = getToastHandlers();
-    if (handlers.showToast) {
-      handlers.showToast(message, "info");
-    }
-  }
-  static showWarning(message) {
-    const handlers = getToastHandlers();
-    if (handlers.showToast) {
-      handlers.showToast(message, "warning");
-    }
-  }
-  static showSuccess(message) {
-    const handlers = getToastHandlers();
-    if (handlers.showToast) {
-      handlers.showToast(message, "success");
-    }
-  }
-  static close() {
-    const handlers = getToastHandlers();
-    if (handlers.closeToast) {
-      handlers.closeToast();
-    }
-  }
-};
-var ToastService_default = ToastService;
-
-// src/components/Confirm.tsx
-import { useState } from "react";
-
-// src/components/ClientButton.tsx
-import React from "react";
-import { jsx } from "react/jsx-runtime";
-var ClientButton = (props) => {
-  const execute = async (event) => {
-    if (props.onClick !== void 0) {
-      props.onClick();
-    } else {
-      ToastService_default.showError("No action defined.");
-    }
-  };
-  let buttonClass = props.ButtonType ? buttonClasses.get(props.ButtonType) : buttonClasses.get("Primary" /* Solid */);
-  return /* @__PURE__ */ jsx(React.Fragment, { children: /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      onClick: execute,
-      className: buttonClass + " " + props.className,
-      children: props.children
-    }
-  ) });
-};
-var ClientButton_default = ClientButton;
-
-// src/components/Confirm.tsx
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-var Confirm = ({ message, onConfirm, onCancel }) => {
-  const [showModal, setShowModal] = useState(true);
-  const handleConfirmAction = () => {
-    setShowModal(false);
-    if (onConfirm) {
-      onConfirm();
-    }
-  };
-  const handleCancelAction = () => {
-    setShowModal(false);
-    if (onCancel) {
-      onCancel();
-    }
-  };
-  return /* @__PURE__ */ jsx2(Fragment, { children: showModal && /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 flex items-center justify-center z-50", children: [
-    /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 bg-black opacity-70" }),
-    /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-md p-6 w-2/6 shadow border z-50", children: [
-      /* @__PURE__ */ jsx2("p", { className: "text-xl font-medium mb-4", children: "Confirmation" }),
-      /* @__PURE__ */ jsx2("p", { className: "mb-4", children: message }),
-      /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-8", children: [
-        /* @__PURE__ */ jsx2(
-          ClientButton_default,
-          {
-            onClick: handleCancelAction,
-            ButtonType: "PrimaryHollow" /* Hollow */,
-            children: "Cancel"
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          ClientButton_default,
-          {
-            onClick: handleConfirmAction,
-            children: "Confirm"
-          }
-        )
-      ] })
-    ] })
-  ] }) });
-};
-var Confirm_default = Confirm;
-{
-}
-
-// src/components/Button.tsx
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var Button = (props) => {
-  const [inProgress, setInProgress] = useState2(false);
-  const [isActionPerformed, setIsActionPerformed] = useState2(false);
-  const [responseMessage, setResponseMessage] = useState2(null);
-  const [showModal, setShowModal] = useState2(null);
-  const execute = async (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    if (props.confirm) {
-      const confirmed = await showConfirmation(
-        "Are you sure you want to delete this item?"
-      );
-      setShowModal(null);
-      if (!confirmed) {
-        return;
-      }
-    }
-    if (props.oneTimeAction && isActionPerformed) {
-      return;
-    }
-    setInProgress(true);
-    let isValid = true;
-    if (props.onValidate !== void 0) {
-      isValid = await props.onValidate();
-      if (!isValid) {
-        setInProgress(false);
-        ToastService_default.showError(
-          "There are errors in the form. Please fix them before proceeding."
-        );
-        return;
-      }
-    }
-    if (props.onClick !== void 0) {
-      let response = await props.onClick();
-      if (response.isSuccessful) {
-        setIsActionPerformed(true);
-        setResponseMessage(response.message);
-        if (props.showToast) {
-          ToastService_default.showInfo(response.message || "");
-        }
-      } else {
-        ToastService_default.showError(response.message || "");
-      }
-    } else {
-      ToastService_default.showError("No action defined.");
-    }
-    setInProgress(false);
-  };
-  const showConfirmation = (message) => {
-    return new Promise((resolve) => {
-      const onConfirm = () => resolve(true);
-      const onCancel = () => resolve(false);
-      setShowModal(
-        /* @__PURE__ */ jsx3(
-          Confirm_default,
-          {
-            message: props.confirmationMessage,
-            onConfirm,
-            onCancel
-          }
-        )
-      );
-    });
-  };
-  let buttonClass = props.ButtonType ? buttonClasses.get(props.ButtonType) : buttonClasses.get("Primary" /* Solid */);
-  let progressClass = props.ButtonType ? progressClasses.get(props.ButtonType) : progressClasses.get("Primary" /* Solid */);
-  const isDisabled = inProgress || isActionPerformed && props.oneTimeAction;
-  return /* @__PURE__ */ jsxs2(React3.Fragment, { children: [
-    /* @__PURE__ */ jsxs2(
-      "button",
-      {
-        type: "submit",
-        onClick: execute,
-        disabled: props.disabled,
-        title: isDisabled ? "The button is disabled to prevent any action" : "",
-        className: `${buttonClass} relative inline-flex items-center justify-center gap-2 ${props.className ?? ""}`,
-        children: [
-          isActionPerformed && props.oneTimeAction && responseMessage ? responseMessage : props.children,
-          inProgress && /* @__PURE__ */ jsx3(Fragment2, { children: props.hideProgressIndicator ? /* @__PURE__ */ jsx3("div", { className: "absolute bottom-0 left-0 h-0.5 bg-gray-400 rounded animate-progress" }) : /* @__PURE__ */ jsxs2(
-            "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__ */ jsx3(
-                  "circle",
-                  {
-                    className: "opacity-25",
-                    cx: "12",
-                    cy: "12",
-                    r: "10",
-                    stroke: "currentColor",
-                    strokeWidth: "4"
-                  }
-                ),
-                /* @__PURE__ */ jsx3(
-                  "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"
-                  }
-                )
-              ]
-            }
-          ) })
-        ]
-      }
-    ),
-    showModal
-  ] });
-};
-var Button_default = Button;
-
-// src/components/pageRenderingEngine/nodes/LinkNodeButton.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var LinkNodeButton = (props) => {
-  const { node, dataitem, children, linkText, linkType, linkUrl } = props;
-  const [isLoading, setIsLoading] = useState3(false);
-  const [successMessage, setSuccessMessage] = useState3(null);
-  console.log("LinkNodeButton props:", props);
-  const extractFieldNames = useCallback((template) => {
-    if (!template) return [];
-    const regex = /\{(\{\})?([a-zA-Z_$][a-zA-Z0-9_$]*)(?:\}\})?\}/g;
-    const matches = Array.from(template.matchAll(regex));
-    const fieldNames = matches.map((match) => match[2] || match[1]).filter((name, index, self) => self.indexOf(name) === index);
-    return fieldNames;
-  }, []);
-  const replaceTemplateVariables = useCallback(
-    (template, responseData) => {
-      if (!template) return template;
-      let result = template;
-      const fieldNames = extractFieldNames(template);
-      if (responseData) {
-        fieldNames.forEach((fieldName) => {
-          const value = getNestedValue(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 getNestedValue = useCallback((obj, path) => {
-    if (!obj || !path) return void 0;
-    if (obj[path] !== void 0) {
-      return obj[path];
-    }
-    const keys = path.split(".");
-    let current = obj;
-    for (const key of keys) {
-      if (current[key] === void 0) {
-        return void 0;
-      }
-      current = current[key];
-    }
-    return current;
-  }, []);
-  const onClick = useCallback(async () => {
-    if (!node.postUrl) {
-      return {
-        isSuccessful: false,
-        message: "No POST URL configured for this button"
-      };
-    }
-    setIsLoading(true);
-    try {
-      const resolvedPostUrl = replaceTemplateVariables(node.postUrl);
-      let parsedPayload = {};
-      if (node.payload) {
-        try {
-          const payloadStr = replaceTemplateVariables(node.payload);
-          parsedPayload = JSON.parse(payloadStr);
-          console.log("Parsed payload:", parsedPayload);
-        } catch (err) {
-          console.error("Failed to parse payload JSON:", err);
-          parsedPayload = { error: "Invalid payload JSON" };
-        }
-      }
-      const serviceClient = new ServiceClient_default(props.apiBaseUrl, props.session);
-      const response = await serviceClient.post(resolvedPostUrl, parsedPayload);
-      console.log("API Response:", response);
-      if (response && !response.isSuccessful) {
-        const errorMessage = response.message || "API request failed";
-        setIsLoading(false);
-        return { isSuccessful: false, message: errorMessage };
-      }
-      if (response?.message) {
-        ToastService_default.showSuccess(response.message);
-        setSuccessMessage(response.message);
-      }
-      if (response && node.redirectUrl) {
-        const fieldNames = extractFieldNames(node.redirectUrl);
-        console.log("Field names in redirect URL:", fieldNames);
-        const fieldValueMap = {};
-        fieldNames.forEach((fieldName) => {
-          const value = getNestedValue(response, fieldName);
-          if (value !== void 0) {
-            fieldValueMap[fieldName] = String(value);
-          } else {
-            const resultValue = getNestedValue(response, `result.${fieldName}`);
-            if (resultValue !== void 0) {
-              fieldValueMap[fieldName] = String(resultValue);
-            } else {
-              const dataValue = getNestedValue(response, `data.${fieldName}`);
-              if (dataValue !== void 0) {
-                fieldValueMap[fieldName] = String(dataValue);
-              }
-            }
-          }
-        });
-        console.log("Field value map:", fieldValueMap);
-        const missingFields = fieldNames.filter(
-          (fieldName) => !fieldValueMap[fieldName]
-        );
-        if (missingFields.length > 0) {
-          console.warn(`Missing field values for: ${missingFields.join(", ")}`);
-        }
-        let resolvedRedirectUrl = node.redirectUrl;
-        Object.entries(fieldValueMap).forEach(([fieldName, value]) => {
-          const regex1 = new RegExp(`\\{${fieldName}\\}`, "g");
-          const regex2 = new RegExp(`\\{\\{${fieldName}\\}\\}`, "g");
-          resolvedRedirectUrl = resolvedRedirectUrl.replace(regex1, value);
-          resolvedRedirectUrl = resolvedRedirectUrl.replace(regex2, value);
-        });
-        resolvedRedirectUrl = replaceTemplateVariables(
-          resolvedRedirectUrl,
-          response
-        );
-        console.log("Final redirect URL:", resolvedRedirectUrl);
-        if (resolvedRedirectUrl && !resolvedRedirectUrl.includes("{")) {
-          window.location.href = resolvedRedirectUrl;
-        }
-      } else if (!response) {
-        const errorMessage = "No response from server";
-        setIsLoading(false);
-        return { isSuccessful: false, message: errorMessage };
-      }
-      setIsLoading(false);
-      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,
-    getNestedValue,
-    props.apiBaseUrl,
-    props.session
-  ]);
-  const renderButtonContent = () => {
-    if (children) {
-      return children;
-    }
-    if (linkText) {
-      return /* @__PURE__ */ jsx4("span", { children: linkText });
-    }
-    return node.title || "Button";
-  };
-  const fontSize = node.children?.[0]?.style?.match(/font-size:\s*([^;]+)/)?.[1];
-  return /* @__PURE__ */ jsx4("div", { className: "link-button-wrapper", children: /* @__PURE__ */ jsx4(
-    Button_default,
-    {
-      ButtonType: linkType,
-      onClick,
-      disabled: isLoading || !!successMessage,
-      className: "w-full",
-      children: successMessage ? /* @__PURE__ */ jsxs3(
-        "span",
-        {
-          style: fontSize ? { fontSize } : void 0,
-          className: "inline-flex items-center gap-2",
-          children: [
-            /* @__PURE__ */ jsx4(
-              "svg",
-              {
-                xmlns: "http://www.w3.org/2000/svg",
-                viewBox: "0 0 20 20",
-                fill: "currentColor",
-                className: "w-5 h-5",
-                children: /* @__PURE__ */ jsx4(
-                  "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__ */ jsx4("span", { children: successMessage })
-          ]
-        }
-      ) : renderButtonContent()
-    }
-  ) });
-};
-var LinkNodeButton_default = LinkNodeButton;
-export {
-  LinkNodeButton_default as default
-};