@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260320074145 → 0.8.1-dev.20260323055150

package/dist/index.mjs

@@ -1,3 +1,6 @@
+"use client";
+
+
 // src/components/controls/view/ViewControl.tsx
 import React11 from "react";
 
@@ -1384,7 +1387,7 @@ var SelectWithSearchPanel = (props) => {
   const containerRef = useRef2(null);
   const [isCreateOpen, setIsCreateOpen] = useState5(false);
   const [formData, setFormData] = useState5({});
-  const getNestedValue = (obj, path) => {
+  const getNestedValue2 = (obj, path) => {
     return path.split(".").reduce((acc, key) => acc?.[key], obj);
   };
   useEffect4(() => {
@@ -1422,7 +1425,7 @@ var SelectWithSearchPanel = (props) => {
     props.dataSourceDependsOn
   ]);
   const filteredItems = list?.filter((item) => {
-    const value = getNestedValue(item, props.dataTextFieldName);
+    const value = getNestedValue2(item, props.dataTextFieldName);
     return value?.toLowerCase().includes(searchTerm?.toLowerCase());
   });
   const playBeep = () => {
@@ -1453,7 +1456,7 @@ var SelectWithSearchPanel = (props) => {
   }, [searchTerm]);
   const handleSelect = (event, item) => {
     event.preventDefault();
-    setSearchTerm(getNestedValue(item, props.dataTextFieldName));
+    setSearchTerm(getNestedValue2(item, props.dataTextFieldName));
     if (props.callback) {
       const val = {};
       props.callback({
@@ -1600,7 +1603,7 @@ var SelectWithSearchPanel = (props) => {
               role: "option",
               tabIndex: -1,
               onMouseEnter: () => setHighlightedIndex(index),
-              children: /* @__PURE__ */ jsx27("span", { children: getNestedValue(item, props.dataTextFieldName) })
+              children: /* @__PURE__ */ jsx27("span", { children: getNestedValue2(item, props.dataTextFieldName) })
             }
           ) }, item[props.dataKeyFieldName])) : /* @__PURE__ */ jsx27("div", { className: "px-4 py-2 text-gray-500", children: "No results found" })
         }
@@ -1902,51 +1905,146 @@ var OdataBuilder = class {
     this.baseUrl = url;
     this.top = Constants.pagesize.toString();
     this.skip = "0";
+    this.keyword = "";
     this.filterBy = "";
     this.orderBy = "";
   }
+  // parseSearchParams(ReadonlyUrlSearchParams): DataQuery {
+  //     this.top = top;
+  //     return this;
+  //   }
   setQuery(odata) {
-    if (!odata) return this;
-    if (odata["$skip"]) this.skip = odata["$skip"];
-    if (odata["$top"]) this.top = odata["$top"];
-    if (odata["$filter"]) this.filterBy = odata["$filter"];
-    if (odata["$orderby"]) this.orderBy = odata["$orderby"];
+    if (odata) {
+      for (const key in odata) {
+        if (odata[key] != null && odata[key] != "") {
+          if (key == "$skip") {
+            this.setSkip(odata[key]);
+          }
+          if (key == "$filter") {
+            this.setFilter(odata[key]);
+          }
+          if (key == "$top") {
+            this.setTop(odata[key]);
+          }
+          if (key == "$orderby") {
+            this.setOrderBy(odata[key]);
+          }
+        }
+      }
+    }
+    return this;
+  }
+  // parseKeyValuePairs(inputString: string): { [key: string]: string } {
+  //     return inputString.split('$')
+  //         .map((pair) => pair.split('='))
+  //         .reduce((result: { [key: string]: string }, [key, value]) => {
+  //             if (key && value) {
+  //                 result[key.trim()] = value.trim();
+  //             }
+  //             return result;
+  //         }, {});
+  // }
+  static getOdataQueryString(obj, defaultOrder) {
+    let queryString = "";
+    let skip = (obj && obj["$skip"]) ?? "0";
+    let top = (obj && obj["$top"]) ?? Constants.pagesize.toString();
+    queryString = `$skip=${skip}&$top=${top}&$count=true`;
+    if (obj) {
+      if (obj["$filter"] && obj["$filter"] !== null && obj["$filter"] !== "") {
+        queryString = queryString + `&$filter=${encodeURIComponent(obj["$filter"])}`;
+      }
+      if (obj["$orderby"] && obj["$orderby"] !== null && obj["$orderby"] !== "") {
+        queryString = queryString + `&$orderby=${encodeURIComponent(obj["$orderby"])}`;
+      } else if (defaultOrder) {
+        queryString = queryString + `&$orderby=${encodeURIComponent(defaultOrder)}`;
+      }
+    } else {
+      if (defaultOrder) {
+        queryString = queryString + `&$orderby=${encodeURIComponent(defaultOrder)}`;
+      }
+    }
+    return queryString;
+  }
+  setTop(top) {
+    this.top = top;
+    return this;
+  }
+  setSkip(skip) {
+    this.skip = skip;
+    return this;
+  }
+  setKeyword(keyword) {
+    this.keyword = keyword;
+    return this;
+  }
+  setFilter(filterBy) {
+    this.filterBy = filterBy;
+    return this;
+  }
+  setOrderBy(orderBy) {
+    this.orderBy = orderBy;
     return this;
   }
   getPageNumber(pageSize) {
-    const skip = parseInt(this.skip);
-    const top = parseInt(this.top);
-    if (!isNaN(skip) && !isNaN(top)) {
-      return skip / pageSize + 1;
+    let pageNumber = 1;
+    if (this.skip && this.top) {
+      const skip = parseInt(this.skip);
+      const top = parseInt(this.top);
+      if (!isNaN(skip) && !isNaN(top)) {
+        pageNumber = skip / pageSize + 1;
+      }
     }
-    return 1;
+    return pageNumber;
+  }
+  getUrl() {
+    let url = `${this.baseUrl}?$skip=${this.skip}&$top=${this.top}&$count=true`;
+    if (this.filterBy !== null && this.filterBy !== "") {
+      url = url + `&$filter=${encodeURIComponent(this.filterBy)}`;
+    }
+    if (this.orderBy !== null && this.orderBy !== "") {
+      url = url + `&$orderby=${encodeURIComponent(this.orderBy)}`;
+    }
+    console.log(url);
+    return url;
   }
   getNewOrderByUrl(orderBy) {
-    let url = `${this.baseUrl}?$skip=0&$top=${this.top}&$count=true`;
-    if (this.filterBy) {
-      url += `&$filter=${encodeURIComponent(this.filterBy)}`;
+    let url = `${this.baseUrl}?$skip=${0}&$top=${this.top}&$count=true`;
+    if (this.filterBy !== null && this.filterBy !== "") {
+      url = url + `&$filter=${encodeURIComponent(this.filterBy)}`;
     }
-    url += `&$orderby=${encodeURIComponent(orderBy)}`;
+    url = url + `&$orderby=${encodeURIComponent(orderBy)}`;
     return url;
   }
   getNewFilterUrl(filterBy) {
-    let url = `${this.baseUrl}?$skip=0&$top=${this.top}&$count=true`;
-    if (filterBy) {
-      url += `&$filter=${encodeURIComponent(filterBy)}`;
+    let url = `${this.baseUrl}?$skip=${0}&$top=${this.top}&$count=true`;
+    if (filterBy !== null && filterBy !== "") {
+      url = url + `&$filter=${encodeURIComponent(filterBy)}`;
     }
-    if (this.orderBy) {
-      url += `&$orderby=${encodeURIComponent(this.orderBy)}`;
+    if (this.orderBy !== null && this.orderBy !== "") {
+      url = url + `&$orderby=${encodeURIComponent(this.orderBy)}`;
     }
     return url;
   }
   getNewPageUrl(page) {
-    const skip = page * Constants.pagesize - Constants.pagesize;
+    let skip = page * Constants.pagesize - Constants.pagesize;
     let url = `${this.baseUrl}?$skip=${skip}&$top=${this.top}&$count=true`;
-    if (this.filterBy) {
-      url += `&$filter=${encodeURIComponent(this.filterBy)}`;
+    if (this.filterBy !== null && this.filterBy !== "") {
+      url = url + `&$filter=${encodeURIComponent(this.filterBy)}`;
     }
-    if (this.orderBy) {
-      url += `&$orderby=${encodeURIComponent(this.orderBy)}`;
+    if (this.orderBy !== null && this.orderBy !== "") {
+      url = url + `&$orderby=${encodeURIComponent(this.orderBy)}`;
+    }
+    return url;
+  }
+  getNewPageSizeUrl(pageSize) {
+    const currentPage = this.getPageNumber(parseInt(this.top || Constants.pagesize.toString()));
+    const skip = (currentPage - 1) * pageSize;
+    let url = `${this.baseUrl}?$skip=${skip}&$top=${pageSize}&$count=true`;
+    if (this.filterBy !== null && this.filterBy !== "") {
+      url = url + `&$filter=${encodeURIComponent(this.filterBy)}`;
+    }
+    if (this.orderBy !== null && this.orderBy !== "") {
+      url = url + `&$orderby=${encodeURIComponent(this.orderBy)}`;
     }
     return url;
   }
@@ -2502,7 +2600,7 @@ var DataList = (props) => {
 var DataList_default = DataList;
 
 // src/components/pageRenderingEngine/PageBodyRenderer.tsx
-import React51 from "react";
+import React54 from "react";
 
 // src/components/pageRenderingEngine/nodes/ParagraphNode.tsx
 import React37 from "react";
@@ -2528,17 +2626,17 @@ var TextNode = (props) => {
     }
     return styleObject;
   }
-  function toCamelCase(str) {
+  function toCamelCase2(str) {
     return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
   }
-  function convertKeysToCamelCase(obj) {
+  function convertKeysToCamelCase2(obj) {
     if (Array.isArray(obj)) {
-      return obj.map(convertKeysToCamelCase);
+      return obj.map(convertKeysToCamelCase2);
     } else if (obj !== null && typeof obj === "object") {
       return Object.fromEntries(
         Object.entries(obj).filter(([_, value]) => value !== "").map(([key, value]) => [
-          toCamelCase(key),
-          convertKeysToCamelCase(value)
+          toCamelCase2(key),
+          convertKeysToCamelCase2(value)
         ])
       );
     }
@@ -2558,7 +2656,7 @@ var TextNode = (props) => {
     if (format === 1024) classes.push("capitalize");
     return classes.join(" ");
   }
-  const styles = convertKeysToCamelCase(cssStringToJson(props.node.style));
+  const styles = convertKeysToCamelCase2(cssStringToJson(props.node.style));
   function replacePlaceholders(template, dataItem) {
     return template.replace(/{(\w+)}/g, (_, key) => {
       return key in dataItem ? dataItem[key] : `{${key}}`;
@@ -2679,13 +2777,13 @@ var DatafieldNode = (props) => {
     }
     return styleObject;
   }
-  function toCamelCase(str) {
+  function toCamelCase2(str) {
     return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
   }
-  function convertKeysToCamelCase(obj) {
+  function convertKeysToCamelCase2(obj) {
     if (!obj || typeof obj !== "object") return obj;
     return Object.fromEntries(
-      Object.entries(obj).map(([key, value2]) => [toCamelCase(key), value2])
+      Object.entries(obj).map(([key, value2]) => [toCamelCase2(key), value2])
     );
   }
   const Formats = [
@@ -2702,7 +2800,7 @@ var DatafieldNode = (props) => {
     "italic underline",
     "italic underline font-medium"
   ];
-  const styles = convertKeysToCamelCase(cssStringToJson(props.node.style));
+  const styles = convertKeysToCamelCase2(cssStringToJson(props.node.style));
   const fieldName = props.node.fieldName;
   const value = props.dataitem ? getNestedProperty(props.dataitem, fieldName) : null;
   console.log(fieldName, value, "haha");
@@ -2912,7 +3010,60 @@ var QuoteNode_default = QuoteNode;
 
 // src/components/pageRenderingEngine/nodes/CodeNode.tsx
 import React42 from "react";
-import { jsx as jsx52 } from "react/jsx-runtime";
+
+// src/components/CopyButton.tsx
+import { useState as useState8, useRef as useRef3, useEffect as useEffect7 } from "react";
+import { jsx as jsx52, jsxs as jsxs26 } from "react/jsx-runtime";
+function CopyButton({ text }) {
+  const [copied, setCopied] = useState8(false);
+  const timeoutRef = useRef3(null);
+  useEffect7(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy: ", err);
+    }
+  };
+  return /* @__PURE__ */ jsxs26(
+    "button",
+    {
+      onClick: handleCopy,
+      className: "flex gap-1 items-center hover:text-white transition",
+      children: [
+        /* @__PURE__ */ jsx52(
+          "svg",
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            className: "w-4 h-4",
+            fill: "currentColor",
+            children: /* @__PURE__ */ jsx52(
+              "path",
+              {
+                fillRule: "evenodd",
+                clipRule: "evenodd",
+                d: "M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z"
+              }
+            )
+          }
+        ),
+        copied ? "Copied!" : "Copy code"
+      ]
+    }
+  );
+}
+
+// src/components/pageRenderingEngine/nodes/CodeNode.tsx
+import { jsx as jsx53, jsxs as jsxs27 } from "react/jsx-runtime";
 var CodeNode = (props) => {
   const NodeTypes2 = {
     ["text"]: TextNode_default,
@@ -2925,17 +3076,23 @@ var CodeNode = (props) => {
     if (node.type === "link") return node.text || node.url || "";
     return "";
   }).join("") ?? "";
-  return /* @__PURE__ */ jsx52("div", { className: "code-block", children: /* @__PURE__ */ jsx52("code", { className: "block bg-gray-900 text-gray-100 p-4 rounded-b-md text-sm whitespace-pre-wrap", children: props.node.children && props.node.children.map((node, index) => {
-    const SelectedNode = NodeTypes2[node.type];
-    return /* @__PURE__ */ jsx52(React42.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx52(SelectedNode, { node, session: props.session, apiBaseUrl: props.apiBaseUrl, routeParameters: props.routeParameters }) }, index);
-  }) }) });
+  return /* @__PURE__ */ jsxs27("div", { className: "code-block", children: [
+    /* @__PURE__ */ jsxs27("div", { className: "flex items-center relative text-gray-200 bg-gray-800 px-4 py-2.5 text-xs font-sans justify-between rounded-t-md", children: [
+      /* @__PURE__ */ jsx53("span", { children: "Code Snippet" }),
+      /* @__PURE__ */ jsx53(CopyButton, { text: textContent })
+    ] }),
+    /* @__PURE__ */ jsx53("code", { className: "block bg-gray-900 text-gray-100 p-4 rounded-b-md text-sm whitespace-pre-wrap", children: props.node.children && props.node.children.map((node, index) => {
+      const SelectedNode = NodeTypes2[node.type];
+      return /* @__PURE__ */ jsx53(React42.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx53(SelectedNode, { node, session: props.session, apiBaseUrl: props.apiBaseUrl, routeParameters: props.routeParameters }) }, index);
+    }) })
+  ] });
 };
 var CodeNode_default = CodeNode;
 
 // src/components/pageRenderingEngine/nodes/HorizontalRuleNode.tsx
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var HorizontalRuleNode = (props) => {
-  return /* @__PURE__ */ jsx53("hr", {});
+  return /* @__PURE__ */ jsx54("hr", {});
 };
 var HorizontalRuleNode_default = HorizontalRuleNode;
 
@@ -2944,11 +3101,11 @@ import React48 from "react";
 
 // src/components/pageRenderingEngine/nodes/ImageNode.tsx
 import React43 from "react";
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var ImageNode = (props) => {
   const { node, apiBaseUrl = "" } = props;
   let imageUrl = node.imageUrl.startsWith("http") ? node.imageUrl : `${apiBaseUrl}/digitalassets/storefront/${node.imageUrl}`;
-  return /* @__PURE__ */ jsx54(React43.Fragment, { children: node.width ? /* @__PURE__ */ jsx54("div", { style: { width: node.width }, children: /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx55(React43.Fragment, { children: node.width ? /* @__PURE__ */ jsx55("div", { style: { width: node.width }, children: /* @__PURE__ */ jsx55(
     "img",
     {
       loading: "lazy",
@@ -2958,7 +3115,7 @@ var ImageNode = (props) => {
       height: node.intrinsicHeight,
       alt: node.title
     }
-  ) }) : /* @__PURE__ */ jsx54(
+  ) }) : /* @__PURE__ */ jsx55(
     "img",
     {
       loading: "lazy",
@@ -2974,7 +3131,7 @@ var ImageNode_default = ImageNode;
 
 // src/components/pageRenderingEngine/nodes/WidgetNode.tsx
 import { Suspense } from "react";
-import { Fragment as Fragment5, jsx as jsx55, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx56, jsxs as jsxs28 } from "react/jsx-runtime";
 var WidgetNode = (props) => {
   const getWidgetParameters = () => {
     const widgetInputParameters = { ...props.routeParameters ?? {} };
@@ -3029,12 +3186,12 @@ var WidgetNode = (props) => {
   const SelectedWidget = props.widgetRegistry?.[props.node.widgetCode];
   if (!SelectedWidget) {
     console.warn("Widget not found:", props.node.widgetCode);
-    return /* @__PURE__ */ jsxs26(Fragment5, { children: [
+    return /* @__PURE__ */ jsxs28(Fragment5, { children: [
       "Widget not found: ",
       props.node.widgetCode
     ] });
   }
-  return /* @__PURE__ */ jsx55(Suspense, { fallback: /* @__PURE__ */ jsx55("div", { className: "container mt-2", children: "..." }), children: /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx56(Suspense, { fallback: /* @__PURE__ */ jsx56("div", { className: "container mt-2", children: "..." }), children: /* @__PURE__ */ jsx56(
     SelectedWidget,
     {
       params: getWidgetParameters(),
@@ -3049,42 +3206,42 @@ var WidgetNode = (props) => {
 var WidgetNode_default = WidgetNode;
 
 // src/components/pageRenderingEngine/nodes/IframeClient.tsx
-import React46, { useEffect as useEffect7, useRef as useRef3, useState as useState8 } from "react";
+import React46, { useEffect as useEffect8, useRef as useRef4, useState as useState9 } from "react";
 
 // src/components/IFrameLoaderView.tsx
 import React45 from "react";
-import { jsx as jsx56, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs29 } from "react/jsx-runtime";
 var IFrameLoaderView = (props) => {
-  return /* @__PURE__ */ jsxs27(React45.Fragment, { children: [
-    props.isDataFound == null && /* @__PURE__ */ jsx56("div", { className: "", children: /* @__PURE__ */ jsxs27("div", { className: "mt-4 bg-gray-200 rounded-md p-4 animate-pulse", children: [
-      /* @__PURE__ */ jsxs27("div", { className: "flex items-center mb-4", children: [
-        /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 h-8 w-8 rounded-full animate-pulse" }),
-        /* @__PURE__ */ jsxs27("div", { className: "ml-2", children: [
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 h-3 w-16 animate-pulse" }),
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 h-2 w-12 animate-pulse" })
+  return /* @__PURE__ */ jsxs29(React45.Fragment, { children: [
+    props.isDataFound == null && /* @__PURE__ */ jsx57("div", { className: "", children: /* @__PURE__ */ jsxs29("div", { className: "mt-4 bg-gray-200 rounded-md p-4 animate-pulse", children: [
+      /* @__PURE__ */ jsxs29("div", { className: "flex items-center mb-4", children: [
+        /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 h-8 w-8 rounded-full animate-pulse" }),
+        /* @__PURE__ */ jsxs29("div", { className: "ml-2", children: [
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 h-3 w-16 animate-pulse" }),
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 h-2 w-12 animate-pulse" })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs27("div", { className: "grid grid-cols-3 gap-4 mt-6", children: [
-        /* @__PURE__ */ jsxs27("div", { className: "animate-pulse", children: [
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
+      /* @__PURE__ */ jsxs29("div", { className: "grid grid-cols-3 gap-4 mt-6", children: [
+        /* @__PURE__ */ jsxs29("div", { className: "animate-pulse", children: [
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
         ] }),
-        /* @__PURE__ */ jsxs27("div", { className: "animate-pulse", children: [
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
+        /* @__PURE__ */ jsxs29("div", { className: "animate-pulse", children: [
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
         ] }),
-        /* @__PURE__ */ jsxs27("div", { className: "animate-pulse", children: [
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
+        /* @__PURE__ */ jsxs29("div", { className: "animate-pulse", children: [
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
         ] })
       ] })
     ] }) }),
@@ -3094,12 +3251,12 @@ var IFrameLoaderView = (props) => {
 var IFrameLoaderView_default = IFrameLoaderView;
 
 // src/components/pageRenderingEngine/nodes/IframeClient.tsx
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 var IframeClient = ({ src }) => {
-  const iframeRef = useRef3(null);
-  const [iframeHeight, setIframeHeight] = useState8("100%");
-  const [isDataFound, setIsDataFound] = useState8(null);
-  useEffect7(() => {
+  const iframeRef = useRef4(null);
+  const [iframeHeight, setIframeHeight] = useState9("100%");
+  const [isDataFound, setIsDataFound] = useState9(null);
+  useEffect8(() => {
     const handleReceiveMessage = (event) => {
       const eventName = event?.data?.eventName;
       const payload = event?.data?.payload;
@@ -3114,7 +3271,7 @@ var IframeClient = ({ src }) => {
     window.addEventListener("message", handleReceiveMessage);
     return () => window.removeEventListener("message", handleReceiveMessage);
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     const handleResize = () => {
       if (iframeRef.current) {
         iframeRef.current.contentWindow?.postMessage({ eventName: "RESIZE" }, "*");
@@ -3126,7 +3283,7 @@ var IframeClient = ({ src }) => {
   const handleIframeLoad = () => {
     setIsDataFound(true);
   };
-  return /* @__PURE__ */ jsx57(React46.Fragment, { children: /* @__PURE__ */ jsx57(IFrameLoaderView_default, { isDataFound, children: /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx58(React46.Fragment, { children: /* @__PURE__ */ jsx58(IFrameLoaderView_default, { isDataFound, children: /* @__PURE__ */ jsx58(
     "iframe",
     {
       ref: iframeRef,
@@ -3140,7 +3297,7 @@ var IframeClient = ({ src }) => {
 var IframeClient_default = IframeClient;
 
 // src/components/pageRenderingEngine/nodes/EmbedNode.tsx
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var EmbedNode = (props) => {
   let src;
   if (props.node.provider == "youtube") {
@@ -3150,13 +3307,13 @@ var EmbedNode = (props) => {
   } else {
     src = props.node.embedSrc;
   }
-  return /* @__PURE__ */ jsx58("div", { className: "aspect-video", children: src && /* @__PURE__ */ jsx58(IframeClient_default, { src }) });
+  return /* @__PURE__ */ jsx59("div", { className: "aspect-video", children: src && /* @__PURE__ */ jsx59(IframeClient_default, { src }) });
 };
 var EmbedNode_default = EmbedNode;
 
 // src/components/pageRenderingEngine/nodes/VideoNode.tsx
 import React47 from "react";
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var VideoNode = (props) => {
   let src;
   if (props.node.provider == "youtube") {
@@ -3164,12 +3321,12 @@ var VideoNode = (props) => {
   } else if (props.node.provider == "bunny") {
     src = `https://iframe.mediadelivery.net/embed/${props.node.videoId}?autoplay=false&loop=false&muted=false&preload=true&responsive=true`;
   }
-  return /* @__PURE__ */ jsx59(React47.Fragment, { children: src && /* @__PURE__ */ jsx59("iframe", { className: "w-full aspect-video rounded", src, loading: "lazy", allow: "accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;", allowFullScreen: true }) });
+  return /* @__PURE__ */ jsx60(React47.Fragment, { children: src && /* @__PURE__ */ jsx60("iframe", { className: "w-full aspect-video rounded", src, loading: "lazy", allow: "accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;", allowFullScreen: true }) });
 };
 var VideoNode_default = VideoNode;
 
 // src/components/pageRenderingEngine/nodes/LayoutItemNode.tsx
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var LayoutItemNode = (props) => {
   const NodeTypes2 = {
     ["paragraph"]: ParagraphNode_default,
@@ -3230,11 +3387,11 @@ var LayoutItemNode = (props) => {
   } else {
     updatedLayout = removeParagraphsAtStartAndEnd(props.node);
   }
-  return /* @__PURE__ */ jsx60(React48.Fragment, { children: /* @__PURE__ */ jsx60("div", { className: "layout-item " + cssClasses, style: { ...styles }, children: updatedLayout.children.map((node, index) => {
+  return /* @__PURE__ */ jsx61(React48.Fragment, { children: /* @__PURE__ */ jsx61("div", { className: "layout-item " + cssClasses, style: { ...styles }, children: updatedLayout.children.map((node, index) => {
     {
     }
     const SelectedNode = NodeTypes2[node.type];
-    return /* @__PURE__ */ jsx60(React48.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx60(
+    return /* @__PURE__ */ jsx61(React48.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx61(
       SelectedNode,
       {
         node,
@@ -3264,7 +3421,7 @@ var AssetUtility = class {
 var AssetUtility_default = AssetUtility;
 
 // src/components/pageRenderingEngine/nodes/LayoutContainerNode.tsx
-import { Fragment as Fragment6, jsx as jsx61, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx62, jsxs as jsxs30 } from "react/jsx-runtime";
 var LayoutContainerNode = (props) => {
   const VERTICAL_ALIGNMENT_CLASSES = {
     start: "items-start",
@@ -3334,7 +3491,7 @@ var LayoutContainerNode = (props) => {
   if (backgroundLayers.length) {
     styles.background = backgroundLayers.join(", ");
   }
-  const renderChildren = () => props.node.children?.map((node, index) => /* @__PURE__ */ jsx61(
+  const renderChildren = () => props.node.children?.map((node, index) => /* @__PURE__ */ jsx62(
     LayoutItemNode_default,
     {
       node,
@@ -3348,8 +3505,8 @@ var LayoutContainerNode = (props) => {
     },
     index
   ));
-  return /* @__PURE__ */ jsxs28(Fragment6, { children: [
-    sectionWidth === "mixed" && /* @__PURE__ */ jsx61("div", { className: cssClasses, style: styles, children: /* @__PURE__ */ jsx61("div", { className: "container", children: /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsxs30(Fragment6, { children: [
+    sectionWidth === "mixed" && /* @__PURE__ */ jsx62("div", { className: cssClasses, style: styles, children: /* @__PURE__ */ jsx62("div", { className: "container", children: /* @__PURE__ */ jsx62(
       "div",
       {
         className: `grid gap-y-4 lg:gap-y-0 ${gridCssClasses} ${addPadding ? "py-8 lg:py-6" : ""}`,
@@ -3357,7 +3514,7 @@ var LayoutContainerNode = (props) => {
         children: renderChildren()
       }
     ) }) }),
-    sectionWidth === "full" && /* @__PURE__ */ jsx61(
+    sectionWidth === "full" && /* @__PURE__ */ jsx62(
       "div",
       {
         className: `grid gap-y-4 lg:gap-y-0 ${cssClasses} ${gridCssClasses} ${addPadding ? "p-8 lg:p-0" : ""}`,
@@ -3365,7 +3522,7 @@ var LayoutContainerNode = (props) => {
         children: renderChildren()
       }
     ),
-    sectionWidth === "fixed" && /* @__PURE__ */ jsx61("div", { className: "container", children: /* @__PURE__ */ jsx61(
+    sectionWidth === "fixed" && /* @__PURE__ */ jsx62("div", { className: "container", children: /* @__PURE__ */ jsx62(
       "div",
       {
         className: `grid gap-y-4 lg:gap-y-0 ${cssClasses} ${gridCssClasses} ${addPadding ? "px-8 py-6 lg:px-6 lg:py-6" : ""}`,
@@ -3378,12 +3535,12 @@ var LayoutContainerNode = (props) => {
 var LayoutContainerNode_default = LayoutContainerNode;
 
 // src/components/pageRenderingEngine/nodes/FormContainerNode.tsx
-import React49, { useRef as useRef4, useReducer as useReducer2, useCallback as useCallback3, useEffect as useEffect8 } from "react";
+import React49, { useRef as useRef5, useReducer as useReducer2, useCallback as useCallback3, useEffect as useEffect9 } from "react";
 
 // src/components/pageRenderingEngine/nodes/InputControlNode.tsx
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
 var InputControlNode = (props) => {
-  return /* @__PURE__ */ jsx62("div", { children: /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx63("div", { children: /* @__PURE__ */ jsx63(
     InputControl_default,
     {
       name: props.node.name,
@@ -3412,13 +3569,13 @@ var InputControlNode = (props) => {
 var InputControlNode_default = InputControlNode;
 
 // src/components/pageRenderingEngine/nodes/FormContainerNode.tsx
-import { jsx as jsx63, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs31 } from "react/jsx-runtime";
 var FormContainerNode = (props) => {
   const NodeTypes2 = {
     ["input-control"]: InputControlNode_default
   };
   const { node } = props;
-  const formRef = useRef4(null);
+  const formRef = useRef5(null);
   const initialState = {
     inputValues: {},
     lastPropertyChanged: ""
@@ -3435,7 +3592,7 @@ var FormContainerNode = (props) => {
       return true;
     }
   };
-  useEffect8(() => {
+  useEffect9(() => {
     const fetchInitialData = async () => {
       if (!props.fetchData || !node.dataFetchApi) return;
       const response = await props.fetchData(
@@ -3452,12 +3609,12 @@ var FormContainerNode = (props) => {
     };
     fetchInitialData();
   }, [props.fetchData, node.dataFetchApi, props.routeParameters]);
-  return /* @__PURE__ */ jsxs29("form", { className: "group space-y-6 pb-6 overflow-y-auto", noValidate: true, ref: formRef, children: [
+  return /* @__PURE__ */ jsxs31("form", { className: "group space-y-6 pb-6 overflow-y-auto", noValidate: true, ref: formRef, children: [
     node.children && node.children.map((node2, index) => {
       {
       }
       const SelectedNode = NodeTypes2[node2.type];
-      return /* @__PURE__ */ jsx63(React49.Fragment, { children: SelectedNode && node2.type == "input-control" && /* @__PURE__ */ jsx63(
+      return /* @__PURE__ */ jsx64(React49.Fragment, { children: SelectedNode && node2.type == "input-control" && /* @__PURE__ */ jsx64(
         InputControlNode_default,
         {
           value: formState.inputValues[node2.name],
@@ -3466,74 +3623,823 @@ var FormContainerNode = (props) => {
         }
       ) }, index);
     }),
-    node.children.length == 0 && /* @__PURE__ */ jsx63("div", { className: "py-0.5 lg:py-1.5" })
+    node.children.length == 0 && /* @__PURE__ */ jsx64("div", { className: "py-0.5 lg:py-1.5" })
   ] });
 };
 var FormContainerNode_default = FormContainerNode;
 
 // src/components/pageRenderingEngine/nodes/DivContainer.tsx
-import React50 from "react";
-import Link3 from "next/link";
-import { jsx as jsx64, jsxs as jsxs30 } from "react/jsx-runtime";
-var DivContainer = (props) => {
-  const { cssProperties: styles, hoverCssProperties: hoverStyles, mobileCssProperties: mobileStyles } = props.node;
-  const updatedStyles = convertKeysToCamelCase(styles);
-  const NodeTypes2 = {
-    ["paragraph"]: ParagraphNode_default,
-    ["heading"]: HeadingNode_default,
-    ["list"]: ListNode_default,
-    ["quote"]: QuoteNode_default,
-    ["code"]: CodeNode_default,
-    ["image"]: ImageNode_default,
-    ["horizontalrule"]: HorizontalRuleNode_default,
-    ["layout-container"]: LayoutContainerNode_default,
-    ["widget"]: WidgetNode_default,
-    ["embed"]: EmbedNode_default,
-    ["div-container"]: DivContainer,
-    ["text"]: TextNode_default,
-    ["datafield"]: DatafieldNode_default,
-    ["svg-icon"]: SVGIconNode_default
+import React53 from "react";
+
+// src/components/utilities/AnimationUtility.tsx
+var AnimationUtility = class {
+  static generateAnimationCSS(config, guid) {
+    const {
+      duration = 700,
+      delay = 0,
+      easing = "ease-out",
+      distance = 30,
+      scaleStart = 1,
+      scaleEnd = 1.2,
+      repeat = 1,
+      intensity = 20,
+      speedPerChar = 100,
+      cursor = true,
+      mode = "enter",
+      direction = "left"
+      // Default direction
+    } = config;
+    let base = "", visible = "", keyframes = "";
+    switch (config.animation) {
+      case "Fade":
+        base = `opacity:0; transition:opacity ${duration}ms ${easing} ${delay}ms;`;
+        visible = `opacity:1;`;
+        break;
+      case "FadeInUp":
+        base = `opacity:0; transform:translateY(${distance}px); transition:all ${duration}ms ${easing} ${delay}ms;`;
+        visible = `opacity:1; transform:translateY(0);`;
+        break;
+      case "Slide":
+        const slideTransform = this.getSlideTransform(direction, distance);
+        base = `opacity:0; transform:${slideTransform.start}; transition:all ${duration}ms ${easing} ${delay}ms; will-change: transform, opacity;`;
+        visible = `opacity:1; transform:${slideTransform.end}; will-change: unset;`;
+        break;
+      case "ZoomIn":
+        if (mode === "enter") {
+          base = `opacity:0; transform:scale(${scaleStart}); transition:all ${duration}ms ${easing} ${delay}ms;`;
+          visible = `opacity:1; transform:scale(${scaleEnd});`;
+        } else {
+          base = `transform:scale(${scaleStart}); transition:transform ${duration / 1e3}s ${easing} ${delay / 1e3}s;`;
+          visible = `transform:scale(${scaleEnd});`;
+        }
+        break;
+      case "Bounce":
+        keyframes = `
+        @keyframes bounce { 
+          0%,20%,50%,80%,100% { transform: translateY(0); } 
+          40% { transform: translateY(-${intensity}px); } 
+          60% { transform: translateY(-${intensity / 2}px); } 
+        }
+      `;
+        if (mode === "enter") {
+          base = `opacity:0;`;
+          visible = `opacity:1; animation:bounce ${duration}ms ${easing} ${delay}ms ${repeat};`;
+        } else {
+          base = ``;
+          visible = `animation:bounce ${duration / 1e3}s ${easing} ${delay / 1e3}s ${repeat};`;
+        }
+        break;
+      case "Typewriter":
+        keyframes = ` 
+        @keyframes typewriter { from { width: 0 } to { width: 100% } } 
+        @keyframes blink { 50% { border-color: transparent } } 
+      `;
+        base = ` 
+        overflow:hidden; 
+        border-right:${cursor ? "2px solid black" : "none"}; 
+        white-space:nowrap; 
+        width:0;
+        margin:0 auto;
+      `;
+        visible = ` 
+        animation:typewriter ${speedPerChar * 30}ms steps(30,end) ${delay}ms forwards 
+        ${cursor ? ", blink .75s step-end infinite" : ""}; 
+      `;
+        break;
+    }
+    if (mode === "hover") {
+      return `
+      ${keyframes} 
+      ${guid} { ${base} } 
+      ${guid}:hover { ${visible} } 
+    `;
+    } else {
+      return `
+      ${keyframes} 
+      ${guid} { ${base} } 
+      ${guid}.visible { ${visible} } 
+    `;
+    }
+  }
+  // Helper method to generate slide transforms based on direction
+  static getSlideTransform(direction, distance) {
+    switch (direction) {
+      case "left":
+        return { start: `translateX(${distance}px)`, end: `translateX(0)` };
+      case "right":
+        return { start: `translateX(-${distance}px)`, end: `translateX(0)` };
+      case "up":
+        return { start: `translateY(${distance}px)`, end: `translateY(0)` };
+      case "down":
+        return { start: `translateY(-${distance}px)`, end: `translateY(0)` };
+      default:
+        return { start: `translateX(${distance}px)`, end: `translateX(0)` };
+    }
+  }
+};
+var AnimationUtility_default = AnimationUtility;
+
+// src/components/Pagination.tsx
+import { useMemo } from "react";
+import { jsx as jsx65, jsxs as jsxs32 } from "react/jsx-runtime";
+var Pagination = (props) => {
+  const { dataset, path, query, showPageSizeSelector = false, showJumpToPage = false } = props;
+  const builder = useMemo(() => {
+    const b = new OdataBuilder(path);
+    if (query) b.setQuery(query);
+    return b;
+  }, [path, query]);
+  const activePageNumber = builder.getPageNumber(Constants.pagesize);
+  const totalItems = dataset?.count || 0;
+  const itemsPerPage = parseInt(builder.top || Constants.pagesize.toString());
+  const totalPages = Math.ceil(totalItems / itemsPerPage);
+  const startItem = totalItems > 0 ? (activePageNumber - 1) * itemsPerPage + 1 : 0;
+  const endItem = Math.min(activePageNumber * itemsPerPage, totalItems);
+  const getPaginationRange = () => {
+    const delta = 1;
+    const range = [];
+    if (totalPages <= 7) {
+      return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+    range.push(1);
+    let start = Math.max(2, activePageNumber - delta);
+    let end = Math.min(totalPages - 1, activePageNumber + delta);
+    if (activePageNumber - delta <= 2) {
+      end = Math.min(totalPages - 1, 4);
+    }
+    if (activePageNumber + delta >= totalPages - 1) {
+      start = Math.max(2, totalPages - 4);
+    }
+    if (start > 2) {
+      range.push("...");
+    }
+    for (let i = start; i <= end; i++) {
+      range.push(i);
+    }
+    if (end < totalPages - 1) {
+      range.push("...");
+    }
+    if (totalPages > 1) {
+      range.push(totalPages);
+    }
+    return range;
   };
-  function toCamelCase(str) {
-    return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+  const paginationRange = getPaginationRange();
+  const PageButton = ({ page, children }) => /* @__PURE__ */ jsx65(
+    Hyperlink,
+    {
+      linkType: "Link" /* Link */,
+      className: `
+               min-w-[20px] md:min-w-[40px] h-10 flex items-center justify-center px-2.5 md:px-3 
+                border text-sm font-medium transition-colors duration-150
+                ${activePageNumber === page ? "bg-primary-base font-semibold" : ""}
+            `,
+      href: builder.getNewPageUrl(page),
+      children
+    }
+  );
+  const NavigationButton = ({ page, disabled, children }) => {
+    if (disabled) {
+      return /* @__PURE__ */ jsx65("span", { className: "min-w-[20px] md:min-w-[40px] h-10 flex items-center justify-center px-2 md:px-3 border  bg-neutral-base cursor-not-allowed", children });
+    }
+    return /* @__PURE__ */ jsx65(
+      Hyperlink,
+      {
+        className: "min-w-[20px] md:min-w-[40px] h-10 flex items-center justify-center px-2 md:px-3 border transition-colors duration-150",
+        href: builder.getNewPageUrl(page),
+        children
+      }
+    );
+  };
+  if (totalPages <= 1 && totalItems === 0) return null;
+  return /* @__PURE__ */ jsxs32("div", { className: "py-6 border-t bg-default", children: [
+    /* @__PURE__ */ jsxs32("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs32("div", { className: "text-sm", children: [
+        "Showing ",
+        /* @__PURE__ */ jsxs32("span", { className: "font-semibold", children: [
+          startItem,
+          "-",
+          endItem
+        ] }),
+        " ",
+        "out of ",
+        /* @__PURE__ */ jsx65("span", { className: "font-semibold", children: totalItems.toLocaleString() }),
+        " results"
+      ] }),
+      totalPages > 1 && /* @__PURE__ */ jsxs32("div", { className: "flex items-center space-x-1", children: [
+        /* @__PURE__ */ jsxs32(
+          NavigationButton,
+          {
+            page: activePageNumber - 1,
+            disabled: activePageNumber === 1,
+            children: [
+              /* @__PURE__ */ jsx65("span", { children: /* @__PURE__ */ jsx65(Icon_default, { name: "chevronLeft", className: "w-4 h-4 mr-1" }) }),
+              /* @__PURE__ */ jsx65("span", { className: "text-sm", children: "Prev" })
+            ]
+          }
+        ),
+        paginationRange.map((item, index) => {
+          if (item === "...") {
+            return /* @__PURE__ */ jsx65(
+              "span",
+              {
+                className: "min-w-[20px] md:min-w-[40px] h-10 flex items-center justify-center text-gray-500",
+                children: "..."
+              },
+              `ellipsis-${index}`
+            );
+          }
+          const page = item;
+          return /* @__PURE__ */ jsx65(PageButton, { page, children: page }, page);
+        }),
+        /* @__PURE__ */ jsxs32(
+          NavigationButton,
+          {
+            page: activePageNumber + 1,
+            disabled: activePageNumber === totalPages,
+            children: [
+              /* @__PURE__ */ jsx65("span", { className: "text-sm", children: "Next" }),
+              /* @__PURE__ */ jsx65("span", { children: /* @__PURE__ */ jsx65(Icon_default, { name: "chevronRight", className: "w-4 h-4 ml-1" }) })
+            ]
+          }
+        )
+      ] }),
+      showJumpToPage && totalPages > 5 && /* @__PURE__ */ jsxs32("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsx65("span", { className: "text-sm", children: "Go to:" }),
+        /* @__PURE__ */ jsx65("div", { className: "relative", children: /* @__PURE__ */ jsx65(
+          "input",
+          {
+            type: "number",
+            min: "1",
+            max: totalPages,
+            defaultValue: activePageNumber,
+            className: "w-20 h-10 px-3 border rounded text-sm focus:outline-none focus:ring-2 focus:border-transparent",
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                const input = e.target;
+                const page = parseInt(input.value);
+                if (page >= 1 && page <= totalPages && page !== activePageNumber) {
+                  window.location.href = builder.getNewPageUrl(page);
+                }
+              }
+            }
+          }
+        ) })
+      ] })
+    ] }),
+    showPageSizeSelector && /* @__PURE__ */ jsx65("div", { className: "mt-4 pt-4 border-t bg-default", children: /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-center space-x-2", children: [
+      /* @__PURE__ */ jsx65("span", { className: "text-sm", children: "Show:" }),
+      /* @__PURE__ */ jsx65("div", { className: "flex space-x-1", children: [10, 25, 50, 100].map((size) => /* @__PURE__ */ jsx65(
+        Hyperlink,
+        {
+          className: `
+                                        px-3 py-1 text-sm rounded border transition-colors duration-150
+                                        ${itemsPerPage === size ? "bg-primary-base font-medium" : "bg-neutral-weak"}
+                                    `,
+          href: builder.getNewPageSizeUrl(size),
+          children: size
+        },
+        size
+      )) }),
+      /* @__PURE__ */ jsx65("span", { className: "text-sm", children: "per page" })
+    ] }) })
+  ] });
+};
+var Pagination_default = Pagination;
+
+// src/components/utilities/PathUtility.tsx
+var PathUtility = class {
+  constructor() {
   }
-  function convertKeysToCamelCase(obj) {
-    if (!obj || typeof obj !== "object") return obj;
-    if (Array.isArray(obj)) {
-      return obj.map(convertKeysToCamelCase);
+  normalizePath(path) {
+    if (path == null) {
+      return "/";
     }
-    return Object.fromEntries(
-      Object.entries(obj).filter(([_, value]) => value !== "" && value !== void 0).map(([key, value]) => [
-        toCamelCase(key),
-        convertKeysToCamelCase(value)
-        // Recursively convert nested objects
-      ])
+    const trimmedPath = path.replace(/^\/|\/$/g, "");
+    return trimmedPath === "" ? "/" : "/" + trimmedPath + "/";
+  }
+  joinAndNormalizePaths(path1, path2) {
+    path1 = path1.replace(/\/$/, "");
+    path2 = path2.replace(/^\//, "");
+    const joinedPath = `${path1}/${path2}`;
+    const normalizedPath = joinedPath.replace(/\/{2,}/g, "/");
+    return normalizedPath === "" ? "/" : "/" + normalizedPath;
+  }
+  removeLeadingAndTrailingSlashes(path) {
+    if (path == null) {
+      return "/";
+    }
+    const trimmedPath = path.replace(/^\/|\/$/g, "");
+    return trimmedPath;
+  }
+  removeTrailingSlash(path) {
+    if (path == null) {
+      return "/";
+    }
+    const trimmedPath = path.replace(/\/$/, "");
+    return trimmedPath;
+  }
+  joinPaths(path1, path2) {
+    if (!path1.endsWith("/") && !path2.startsWith("/")) {
+      return `${path1}/${path2}`;
+    } else if (path1.endsWith("/") && path2.startsWith("/")) {
+      return `${path1}${path2.substr(1)}`;
+    } else {
+      return `${path1}${path2}`;
+    }
+  }
+  getFirstSegment(path) {
+    if (!path || path === "/") {
+      return "";
+    }
+    const segments = path.split("/").filter(Boolean);
+    return segments.length > 0 ? segments[0] : "";
+  }
+};
+var PathUtility_default = new PathUtility();
+
+// src/components/pageRenderingEngine/nodes/EnterAnimationClient.tsx
+import React51, { useEffect as useEffect10, useRef as useRef6 } from "react";
+import { Fragment as Fragment7, jsx as jsx66 } from "react/jsx-runtime";
+function EnterAnimationClient({ hasEnterAnimation, children }) {
+  const ref = useRef6(null);
+  useEffect10(() => {
+    if (!hasEnterAnimation || !ref.current) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add("visible");
+            observer.unobserve(entry.target);
+          }
+        });
+      },
+      { threshold: 0.1 }
+    );
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [hasEnterAnimation]);
+  return /* @__PURE__ */ jsx66(Fragment7, { children: children && // enforce passing the ref to Wrapper
+  //@ts-ignore
+  React51.cloneElement(children, { ref }) });
+}
+
+// src/components/Slider.tsx
+import { useState as useState11, useEffect as useEffect11, Children, cloneElement } from "react";
+import { Fragment as Fragment8, jsx as jsx67, jsxs as jsxs33 } from "react/jsx-runtime";
+var Slider = ({
+  children,
+  slidesToShow = 4,
+  infinite_scroll = false,
+  autoplay = false,
+  autoplay_speed = 3e3,
+  show_arrows = false,
+  show_dots = false,
+  scaleOnHover = false,
+  className = "",
+  arrowClassName = "bg-black/50 hover:bg-black/80 text-white rounded-full w-10 h-10 flex items-center justify-center",
+  dotActiveClassName = "bg-gray-300",
+  dotInactiveClassName = "bg-gray-600",
+  gap,
+  pillStyle = "cumulative",
+  progressPosition = "bottom"
+}) => {
+  const [currentSlide, setCurrentSlide] = useState11(0);
+  const [transition, setTransition] = useState11(true);
+  const [slidesToShowState, setSlidesToShowState] = useState11(
+    typeof slidesToShow === "number" ? slidesToShow : slidesToShow.large
+  );
+  const [isPlaying, setIsPlaying] = useState11(autoplay);
+  useEffect11(() => {
+    if (typeof slidesToShow === "number") return;
+    const handleResize = () => {
+      if (window.innerWidth >= 1024) {
+        setSlidesToShowState(slidesToShow.large);
+      } else if (window.innerWidth >= 768) {
+        setSlidesToShowState(slidesToShow.medium);
+      } else {
+        setSlidesToShowState(slidesToShow.small);
+      }
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [slidesToShow]);
+  useEffect11(() => {
+    if (!autoplay) return;
+    const timer = setInterval(() => {
+      if (isPlaying) {
+        nextSlide();
+      }
+    }, autoplay_speed);
+    return () => clearInterval(timer);
+  }, [autoplay, autoplay_speed, currentSlide, isPlaying]);
+  const totalSlides = Children.count(children);
+  const maxSlide = totalSlides - slidesToShowState;
+  const nextSlide = () => {
+    if (currentSlide >= maxSlide) {
+      if (infinite_scroll) {
+        setTransition(true);
+        setCurrentSlide(0);
+      }
+    } else {
+      setTransition(true);
+      setCurrentSlide(currentSlide + 1);
+    }
+  };
+  const prevSlide = () => {
+    if (currentSlide <= 0) {
+      if (infinite_scroll) {
+        setTransition(true);
+        setCurrentSlide(maxSlide);
+      }
+    } else {
+      setTransition(true);
+      setCurrentSlide(currentSlide - 1);
+    }
+  };
+  const goToSlide = (index) => {
+    setTransition(true);
+    setCurrentSlide(index);
+  };
+  const handlePillClick = (index) => {
+    goToSlide(index);
+    if (autoplay) {
+      setIsPlaying(true);
+    }
+  };
+  const handleMouseEnter = () => {
+    if (autoplay) {
+      setIsPlaying(false);
+    }
+  };
+  const handleMouseLeave = () => {
+    if (autoplay) {
+      setIsPlaying(true);
+    }
+  };
+  const translateX = -currentSlide * (100 / slidesToShowState);
+  const slides = Children.map(children, (child, index) => {
+    return /* @__PURE__ */ jsx67(
+      "div",
+      {
+        className: `flex-none ${scaleOnHover ? "group hover:z-50" : ""} relative`,
+        style: { width: `calc(${100 / slidesToShowState}%)`, paddingRight: gap },
+        children: cloneElement(child, {
+          className: `w-full`
+        })
+      },
+      index
     );
+  });
+  const getProgressPositionClass = () => {
+    switch (progressPosition) {
+      case "top":
+        return "top-4";
+      case "bottom-outside":
+        return "bottom-4 translate-y-full mt-4";
+      case "bottom":
+      default:
+        return "bottom-4";
+    }
+  };
+  return /* @__PURE__ */ jsxs33(
+    "div",
+    {
+      className: `relative w-full overflow-hidden ${className}`,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        /* @__PURE__ */ jsx67(
+          "div",
+          {
+            className: "flex h-full",
+            style: {
+              transition: transition ? "transform 0.5s ease" : "none",
+              transform: `translateX(${translateX}%)`
+            },
+            children: slides
+          }
+        ),
+        show_arrows && /* @__PURE__ */ jsxs33(Fragment8, { children: [
+          /* @__PURE__ */ jsx67(
+            ArrowButton,
+            {
+              direction: "left",
+              onClick: prevSlide,
+              visible: infinite_scroll || currentSlide > 0,
+              className: arrowClassName,
+              children: /* @__PURE__ */ jsx67("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "w-6 h-6", children: /* @__PURE__ */ jsx67("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5 8.25 12l7.5-7.5" }) })
+            }
+          ),
+          /* @__PURE__ */ jsxs33(
+            ArrowButton,
+            {
+              direction: "right",
+              onClick: nextSlide,
+              visible: infinite_scroll || currentSlide < maxSlide,
+              className: arrowClassName,
+              children: [
+                /* @__PURE__ */ jsx67("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "w-6 h-6", children: /* @__PURE__ */ jsx67("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m8.25 4.5 7.5 7.5-7.5 7.5" }) }),
+                "          "
+              ]
+            }
+          )
+        ] }),
+        show_dots && /* @__PURE__ */ jsx67("div", { className: `absolute left-1/2 -translate-x-1/2 flex justify-center space-x-1.5 ${getProgressPositionClass()}`, children: Array.from({ length: totalSlides }).map((_, index) => /* @__PURE__ */ jsx67(
+          ProgressPill,
+          {
+            active: index === currentSlide,
+            duration: autoplay_speed,
+            index,
+            onClick: () => handlePillClick(index),
+            isPlaying: isPlaying && index === currentSlide && autoplay,
+            style: pillStyle,
+            activeClassName: dotActiveClassName,
+            inactiveClassName: dotInactiveClassName,
+            currentSlide,
+            totalSlides
+          },
+          index
+        )) })
+      ]
+    }
+  );
+};
+var ArrowButton = ({
+  direction,
+  onClick,
+  visible,
+  children,
+  className = ""
+}) => /* @__PURE__ */ jsx67(
+  "button",
+  {
+    className: `
+      absolute top-1/2 -translate-y-1/2 z-10
+      ${direction === "left" ? "left-2.5" : "right-2.5"}
+      ${!visible && "hidden"}
+      ${className}
+    `,
+    onClick,
+    "aria-label": direction === "left" ? "Previous slide" : "Next slide",
+    children
   }
-  function generateCompleteBackgroundString(layers) {
-    if (!layers || !Array.isArray(layers)) return "";
-    return layers.filter((layer) => layer && layer.type && layer.value).map((layer) => {
-      if (layer.type === "image" && layer.value && typeof layer.value === "object") {
-        const imageValue = layer.value;
-        if (!imageValue.assetUrl) return "";
-        const url = `url('${AssetUtility_default.resolveUrl("/api/images", imageValue.assetUrl)}')`;
-        const repeat = layer.repeat || "no-repeat";
-        const position = layer.position || "center";
-        const size = layer.size || "auto";
-        const attachment = layer.attachment || "scroll";
-        return `${url} ${position} / ${size} ${repeat} ${attachment}`;
-      }
-      if (layer.type === "gradient" && layer.value && typeof layer.value === "object") {
-        const gradient = layer.value;
-        if (!gradient.colors || !gradient.direction) return "";
-        const colors = gradient.colors.map(
-          (colorStop) => `color-mix(in srgb, ${colorStop.color}, transparent ${colorStop.transparency ?? 0}%) ${colorStop.start || "0%"}`
-        ).join(", ");
-        return `linear-gradient(${gradient.direction}, ${colors})`;
+);
+var ProgressPill = ({
+  active,
+  duration,
+  index,
+  onClick,
+  isPlaying,
+  style = "modern",
+  activeClassName = "",
+  inactiveClassName = "",
+  currentSlide,
+  totalSlides
+}) => {
+  const [progress, setProgress] = useState11(0);
+  useEffect11(() => {
+    if (active) {
+      setProgress(0);
+    }
+  }, [active, index]);
+  useEffect11(() => {
+    if (!active || !isPlaying) {
+      if (!active) {
+        setProgress(0);
       }
-      return "";
-    }).filter((bg) => bg.trim() !== "").join(", ");
+      return;
+    }
+    const startTime = Date.now();
+    const interval = setInterval(() => {
+      const elapsed = Date.now() - startTime;
+      const newProgress = elapsed / duration * 100;
+      if (newProgress >= 100) {
+        setProgress(100);
+        clearInterval(interval);
+      } else {
+        setProgress(newProgress);
+      }
+    }, 50);
+    return () => clearInterval(interval);
+  }, [active, isPlaying, duration, index]);
+  const isFilled = index < currentSlide;
+  const isActive = index === currentSlide;
+  const shouldShowProgress = isActive || style === "cumulative" && isFilled;
+  const baseClasses = "cursor-pointer transition-all duration-300 ease-out";
+  const getStyleClasses = () => {
+    switch (style) {
+      case "minimal":
+        return `
+          ${isActive ? "w-8" : "w-2"} h-2 rounded-full
+          ${isActive ? activeClassName || "bg-white" : inactiveClassName || "bg-white/50"}
+          hover:scale-110
+        `;
+      case "cumulative":
+        return `
+          w-4 h-1 rounded-full overflow-hidden relative
+          ${isFilled ? activeClassName || "bg-white" : inactiveClassName || "bg-white/30"}
+        `;
+      case "modern":
+        return `
+          w-8 h-1.5 rounded-full overflow-hidden relative
+          ${isActive ? inactiveClassName || "bg-white/30" : inactiveClassName || "bg-white/30"}
+          hover:h-2
+        `;
+      case "default":
+      default:
+        return `
+          w-6 h-1.5 rounded-full
+          ${isActive ? activeClassName || "bg-white" : inactiveClassName || "bg-white/50"}
+          hover:w-8
+        `;
+    }
+  };
+  const renderProgressBar = () => {
+    if (style === "modern" && isActive || style === "cumulative" && shouldShowProgress) {
+      const displayProgress = style === "cumulative" && isFilled ? 100 : progress;
+      return /* @__PURE__ */ jsx67(
+        "div",
+        {
+          className: `absolute top-0 left-0 h-full rounded-full ${style === "cumulative" && isFilled ? activeClassName || "bg-white" : activeClassName || "bg-white"} transition-all duration-50 ease-linear`,
+          style: { width: `${displayProgress}%` }
+        }
+      );
+    }
+    return null;
+  };
+  const renderCumulativeFill = () => {
+    if (style === "cumulative" && isFilled && !isActive) {
+      return /* @__PURE__ */ jsx67(
+        "div",
+        {
+          className: `absolute top-0 left-0 h-full rounded-full ${activeClassName || "bg-white"} transition-all duration-300`,
+          style: { width: "100%" }
+        }
+      );
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsxs33(
+    "button",
+    {
+      className: `${baseClasses} ${getStyleClasses()}`,
+      onClick,
+      "aria-label": `Go to slide ${index + 1}`,
+      "aria-current": isActive ? "true" : "false",
+      children: [
+        renderProgressBar(),
+        renderCumulativeFill()
+      ]
+    }
+  );
+};
+var Slider_default = Slider;
+
+// src/components/NoDataFound.tsx
+import { jsx as jsx68, jsxs as jsxs34 } from "react/jsx-runtime";
+var NoDataFound = () => {
+  return /* @__PURE__ */ jsxs34("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center bg-neutral-weak", children: [
+    /* @__PURE__ */ jsx68("div", { className: "mb-5", children: /* @__PURE__ */ jsx68("div", { className: "mx-auto w-20 h-20 rounded-full flex items-center justify-center bg-neutral-soft", children: /* @__PURE__ */ jsx68(
+      "svg",
+      {
+        className: "w-10 h-10",
+        fill: "none",
+        stroke: "currentColor",
+        viewBox: "0 0 24 24",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /* @__PURE__ */ jsx68(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: "1.5",
+            d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
+          }
+        )
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx68("h3", { className: "text-lg font-medium mb-2", children: "No data available" }),
+    /* @__PURE__ */ jsx68("p", { className: " max-w-sm mb-0", children: "No records found. Data may be empty or not available at the moment." })
+  ] });
+};
+var NoDataFound_default = NoDataFound;
+
+// src/components/pageRenderingEngine/nodes/DivContainer.tsx
+import { jsx as jsx69, jsxs as jsxs35 } from "react/jsx-runtime";
+function toCamelCase(str) {
+  return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+function convertKeysToCamelCase(obj) {
+  if (!obj || typeof obj !== "object") return obj;
+  if (Array.isArray(obj)) return obj.map(convertKeysToCamelCase);
+  return Object.fromEntries(
+    Object.entries(obj).filter(([_, value]) => value !== "" && value !== void 0).map(([key, value]) => [
+      toCamelCase(key),
+      convertKeysToCamelCase(value)
+    ])
+  );
+}
+var getNestedValue = (obj, path) => {
+  if (!obj || !path) return void 0;
+  return path.split(".").reduce((current, key) => {
+    return current && current[key] !== void 0 ? current[key] : void 0;
+  }, obj);
+};
+function generateCompleteBackgroundString(layers) {
+  if (!layers || !Array.isArray(layers)) return "";
+  return layers.filter((layer) => layer && layer.type && layer.value).map((layer) => {
+    if (layer.type === "image" && typeof layer.value === "object") {
+      const imageValue = layer.value;
+      if (!imageValue.assetUrl) return "";
+      const url = `url('${AssetUtility_default.resolveUrl(
+        ApiPathServerUtility.getApiPath(),
+        imageValue.assetUrl
+      )}')`;
+      const repeat = layer.repeat || "no-repeat";
+      const position = layer.position || "center";
+      const size = layer.size || "auto";
+      const attachment = layer.attachment || "scroll";
+      return `${url} ${position} / ${size} ${repeat} ${attachment}`;
+    }
+    if (layer.type === "gradient" && typeof layer.value === "object") {
+      const gradient = layer.value;
+      if (!gradient.colors || !gradient.direction) return "";
+      const colors = gradient.colors.map(
+        (colorStop) => `color-mix(in srgb, ${colorStop.color}, transparent ${colorStop.transparency ?? 0}%) ${colorStop.start || "0%"}`
+      ).join(", ");
+      return `linear-gradient(${gradient.direction}, ${colors})`;
+    }
+    return "";
+  }).filter((bg) => bg.trim() !== "").join(", ");
+}
+var generateCssString = (guid, stylesObject, mobileStylesObject) => {
+  let gridColumns = stylesObject.gridTemplateColumns ? stylesObject.gridTemplateColumns.match(/\d+/g) : [];
+  let hasGridProperties = gridColumns.length > 0;
+  let largeCols = hasGridProperties ? parseInt(gridColumns[0]) : 4;
+  let tabletColumns = hasGridProperties ? Math.ceil(parseInt(gridColumns[0]) / 2) : 2;
+  let mobileColumns = 1;
+  let cssRules = Object.entries(stylesObject).filter(([_, value]) => value !== void 0 && value !== "").map(([key, value]) => {
+    const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+    return `${cssKey}: ${value};`;
+  });
+  let css = `#${guid} {
+${cssRules.join(
+    "\n"
+  )}
+ transition: all 0.3s ease-in-out; }`;
+  if (mobileStylesObject) {
+    let mobileCssRules = Object.entries(mobileStylesObject).filter(([_, value]) => value !== void 0 && value !== "").map(([key, value]) => {
+      const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+      return `${cssKey}: ${value};`;
+    });
+    if (mobileCssRules.length > 0) {
+      css += `
+@media (max-width: 480px) { #${guid} {
+${mobileCssRules.join(
+        "\n"
+      )}
+} }`;
+    }
   }
+  if (hasGridProperties) {
+    css += `
+@media (max-width: 1279px) { #${guid} { grid-template-columns: repeat(${tabletColumns}, minmax(0, 1fr)); } }`;
+    css += `
+@media (max-width: 768px) { #${guid} { grid-template-columns: repeat(${tabletColumns}, minmax(0, 1fr)); } }`;
+    css += `
+@media (max-width: 480px) { #${guid} { grid-template-columns: repeat(${mobileColumns}, minmax(0, 1fr)); } }`;
+  }
+  const output = {
+    css,
+    gridColsLarge: largeCols,
+    gridColsMedium: tabletColumns,
+    gridColsSmall: mobileColumns
+  };
+  return output;
+};
+var DivContainer = async (props) => {
+  const NodeTypes2 = {
+    paragraph: ParagraphNode_default,
+    heading: HeadingNode_default,
+    list: ListNode_default,
+    quote: QuoteNode_default,
+    code: CodeNode_default,
+    image: ImageNode_default,
+    horizontalrule: HorizontalRuleNode_default,
+    "layout-container": LayoutContainerNode_default,
+    widget: WidgetNode_default,
+    embed: EmbedNode_default,
+    "div-container": DivContainer,
+    text: TextNode_default,
+    datafield: DatafieldNode_default,
+    "svg-icon": SVGIconNode_default
+  };
+  const styles = props.node.cssProperties;
+  const mobileStyles = props.node.mobileCssProperties;
+  const dataBindingProperties = props.node.dataBinding;
+  const updatedStyles = convertKeysToCamelCase(styles);
   var background = generateCompleteBackgroundString(props.node.backgroundLayers);
   let containerPaddingClass = "";
   if (props.node.containerPadding == "small") {
@@ -3543,103 +4449,183 @@ var DivContainer = (props) => {
   }
   const updatedStyle = { ...updatedStyles };
   const backgroundStyle = background && background !== "" ? { background } : {};
+  const combinedStyles = {
+    ...backgroundStyle
+  };
+  if (props.node.enableBackgroundClipText) {
+    combinedStyles.WebkitBackgroundClip = "text";
+    combinedStyles.backgroundClip = "text";
+  }
   const guid = "css" + crypto.randomUUID().toLocaleLowerCase();
-  const generateCssString = (stylesObject, hoverStylesObject, mobileStylesObject) => {
-    let gridColumns = stylesObject.gridTemplateColumns ? stylesObject.gridTemplateColumns.match(/\d+/g) : [];
-    let hasGridProperties = gridColumns.length > 0;
-    let tabletColumns = hasGridProperties ? Math.ceil(parseInt(gridColumns[0]) / 2) : 2;
-    let mobileColumns = 1;
-    let cssRules = Object.entries(stylesObject).filter(([_, value]) => value !== void 0 && value !== "").map(([key, value]) => {
-      const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
-      return `${cssKey}: ${value};`;
+  const { enterAnimation, exitAnimation, hoverAnimation } = props.node;
+  let animationCSS = "";
+  if (enterAnimation?.name) {
+    animationCSS += AnimationUtility_default.generateAnimationCSS(
+      { animation: enterAnimation.name, mode: "enter", ...enterAnimation.properties },
+      `#${guid}`
+    );
+  }
+  if (hoverAnimation?.name) {
+    animationCSS += AnimationUtility_default.generateAnimationCSS(
+      { animation: hoverAnimation.name, mode: "hover", ...hoverAnimation.properties },
+      `#${guid}`
+    );
+  }
+  const shouldHideContainer = () => {
+    if (!props.node.fieldVisibleOnTrue) return false;
+    const fieldValue = getNestedValue(props.dataitem, props.node.fieldVisibleOnTrue);
+    return fieldValue !== void 0 && fieldValue === false;
+  };
+  const isHidden = shouldHideContainer();
+  let odataString = void 0;
+  let endpoint = void 0;
+  let result = null;
+  let response = null;
+  let childCollectionData = null;
+  if (dataBindingProperties) {
+    const serviceClient = new ServiceClient(props.apiBaseUrl, props.session);
+    endpoint = dataBindingProperties.dataSource;
+    endpoint = endpoint.replace(/\{(\w+)\}/g, (_, key) => {
+      return props.routeParameters?.[key] ?? `{${key}}`;
     });
-    let css2 = `#${guid} {
-${cssRules.join("\n")}
-
-        transition: all 0.3s ease-in-out;
-        }`;
-    if (hoverStylesObject) {
-      let hoverCssRules = Object.entries(hoverStylesObject).filter(([_, value]) => value !== void 0 && value !== "").map(([key, value]) => {
-        const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
-        return `${cssKey}: ${value};`;
-      });
-      if (hoverCssRules.length > 0) {
-        css2 += `
-#${guid}:hover {
-${hoverCssRules.join("\n")}
-}`;
+    if (dataBindingProperties.applyODataParams) {
+      odataString = OdataBuilder.getOdataQueryString(props.query);
+      if (odataString) {
+        const separator = endpoint.includes("?") ? "&" : "?";
+        endpoint += separator + odataString;
       }
     }
-    if (mobileStylesObject) {
-      let mobileCssRules = Object.entries(mobileStylesObject).filter(([_, value]) => value !== void 0 && value !== "").map(([key, value]) => {
-        const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
-        return `${cssKey}: ${value};`;
-      });
-      if (mobileCssRules.length > 0) {
-        css2 += `
-@media (max-width: 480px) { #${guid} {
-${mobileCssRules.join("\n")}
-} }`;
+    response = await serviceClient.get(endpoint);
+    result = response?.result;
+    if (dataBindingProperties.showNoResultsMessage && (result === void 0 || result.length == 0)) {
+      return /* @__PURE__ */ jsx69(NoDataFound_default, {});
+    }
+    if (dataBindingProperties.childCollectionName && props.dataitem) {
+      childCollectionData = getNestedValue(props.dataitem, dataBindingProperties.childCollectionName);
+    }
+  }
+  const cssResult = generateCssString(guid, updatedStyle, mobileStyles);
+  function renderNode(node, props2, dataitem, key, href) {
+    const SelectedNode = NodeTypes2[node.type];
+    if (!SelectedNode) return null;
+    return /* @__PURE__ */ jsx69(React53.Fragment, { children: /* @__PURE__ */ jsx69(
+      SelectedNode,
+      {
+        node,
+        parentTag: Wrapper,
+        routeParameters: props2.routeParameters,
+        query: props2.query,
+        session: props2.session,
+        host: props2.host,
+        path: props2.path,
+        apiBaseUrl: props2.apiBaseUrl,
+        breadcrumb: props2.breadcrumb,
+        dataitem,
+        href
+      }
+    ) }, key);
+  }
+  function renderChildren(nodes, props2, data, key, href) {
+    if (!nodes) return null;
+    const childNodes = nodes.map((node, index) => {
+      if (node.type === "div-container" && node.dataBinding?.childCollectionName && data) {
+        return renderNode(node, props2, data, index, href);
       }
+      return renderNode(node, props2, data, index, href);
+    });
+    return childNodes;
+  }
+  function queryObjectToString(query) {
+    if (!query) return "";
+    return Object.entries(query).map(
+      ([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
+    ).join("&");
+  }
+  function resolveHrefTemplate(template, dataItem) {
+    return template.replace(/\{([^}]+)\}/g, (match, key) => {
+      return dataItem[key] !== void 0 ? dataItem[key] : match;
+    });
+  }
+  const dataToRender = (() => {
+    if (childCollectionData && Array.isArray(childCollectionData)) {
+      return childCollectionData;
     }
-    if (hasGridProperties) {
-      css2 += `
-@media (max-width: 1279px) { #${guid} { grid-template-columns: repeat(${tabletColumns}, minmax(0, 1fr)); } }`;
-      css2 += `
-@media (max-width: 768px) { #${guid} { grid-template-columns: repeat(${tabletColumns}, minmax(0, 1fr)); } }`;
-      css2 += `
-@media (max-width: 480px) { #${guid} { grid-template-columns: repeat(${mobileColumns}, minmax(0, 1fr)); } }`;
+    if (result && props.node.dataBinding?.responseType === "array") {
+      return result;
     }
-    return css2;
-  };
-  const css = generateCssString(updatedStyle, hoverStyles, mobileStyles);
-  return /* @__PURE__ */ jsxs30(React50.Fragment, { children: [
-    /* @__PURE__ */ jsx64("style", { dangerouslySetInnerHTML: { __html: css } }),
-    props.node.href && props.node.href !== "" ? /* @__PURE__ */ jsx64(Link3, { href: props.node.href, className: "block", children: /* @__PURE__ */ jsx64(
-      "div",
+    if (result && props.node.dataBinding?.responseType === "object") {
+      return [result];
+    }
+    return [props.dataitem];
+  })();
+  const renderLink = result && props.node.dataBinding?.responseType === "array" ? true : false;
+  let Wrapper;
+  let wrapperProps;
+  switch (true) {
+    case props.node.componentProperties?.type === "slider":
+      Wrapper = Slider_default;
+      const largeCols = props.node.componentProperties?.columns || 4;
+      const slidesToShow = {
+        large: largeCols,
+        medium: Math.ceil(largeCols / 2),
+        small: 1
+      };
+      wrapperProps = { ...props.node.componentProperties, "slidesToShow": slidesToShow };
+      break;
+    case !!(props.node.href || props.href):
+      Wrapper = "a";
+      let href = props.node.href || props.href;
+      if (href?.includes("{")) {
+        href = resolveHrefTemplate(href, props.dataitem);
+      }
+      const currentPath = decodeURIComponent(PathUtility_default.removeTrailingSlash(props.path) + "?" + queryObjectToString(props.query));
+      const resolvedHref = decodeURIComponent(href || "");
+      const isSelected = currentPath === resolvedHref;
+      wrapperProps = { href, "data-isSelected": isSelected, "data-path": currentPath, "data-href": resolvedHref, class: "no-link-color" };
+      break;
+    default: {
+      const replacementTag = props.node.replaceDivTagWith;
+      const allowedTags = ["div", "section", "article", "details", "summary"];
+      if (replacementTag && allowedTags.includes(replacementTag)) {
+        Wrapper = replacementTag;
+      } else {
+        Wrapper = "div";
+      }
+      wrapperProps = {};
+      break;
+    }
+  }
+  if (isHidden) {
+    return null;
+  }
+  const classNames = [
+    containerPaddingClass,
+    props.node.autoFormat && "auto-format",
+    props.node.bgClass
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs35(React53.Fragment, { children: [
+    /* @__PURE__ */ jsx69("style", { dangerouslySetInnerHTML: { __html: cssResult.css + animationCSS } }),
+    /* @__PURE__ */ jsx69(EnterAnimationClient, { hasEnterAnimation: !!props.node.enterAnimation, children: /* @__PURE__ */ jsx69(React53.Fragment, { children: /* @__PURE__ */ jsx69(
+      Wrapper,
       {
         id: guid,
-        style: { ...backgroundStyle, display: "block" },
-        className: containerPaddingClass,
-        children: props.node.children?.map((node, index) => {
-          const SelectedNode = NodeTypes2[node.type];
-          return /* @__PURE__ */ jsx64(React50.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx64(
-            SelectedNode,
-            {
-              node,
-              routeParameters: props.routeParameters,
-              query: props.query,
-              session: props.session,
-              host: props.host,
-              path: props.path,
-              apiBaseUrl: props.apiBaseUrl,
-              breadcrumb: props.breadcrumb
-            }
-          ) }, index);
-        })
+        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__ */ jsx69(React53.Fragment, { children: child }, i)
+          ) : renderChildren(props.node.children, props, item, idx)
+        )
       }
-    ) }) : /* @__PURE__ */ jsx64("div", { id: guid, style: { ...backgroundStyle }, className: containerPaddingClass, children: props.node.children && props.node.children.map((node, index) => {
-      const SelectedNode = NodeTypes2[node.type];
-      return /* @__PURE__ */ jsx64(React50.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx64(
-        SelectedNode,
-        {
-          node,
-          routeParameters: props.routeParameters,
-          query: props.query,
-          session: props.session,
-          host: props.host,
-          path: props.path,
-          apiBaseUrl: props.apiBaseUrl,
-          breadcrumb: props.breadcrumb
-        }
-      ) }, index);
-    }) })
+    ) }) }),
+    dataBindingProperties && props.node.dataBinding.enablePagination && /* @__PURE__ */ jsx69("div", { children: /* @__PURE__ */ jsx69(Pagination_default, { path: props.path, query: props.query, dataset: response }) })
   ] });
 };
 var DivContainer_default = DivContainer;
 
 // src/components/pageRenderingEngine/PageBodyRenderer.tsx
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 var NodeTypes = {
   ["paragraph"]: ParagraphNode_default,
   ["heading"]: HeadingNode_default,
@@ -3667,11 +4653,11 @@ var PageBodyRenderer = (props) => {
   if (pageBodyTree && pageBodyTree.root) {
     rootNode = pageBodyTree.root;
   }
-  return /* @__PURE__ */ jsx65(React51.Fragment, { children: rootNode && rootNode?.children?.map((node, index) => {
+  return /* @__PURE__ */ jsx70(React54.Fragment, { children: rootNode && rootNode?.children?.map((node, index) => {
     {
     }
     const SelectedNode = NodeTypes[node.type];
-    return /* @__PURE__ */ jsx65(React51.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx65(React51.Fragment, { children: node.type == "layout-container" ? /* @__PURE__ */ jsx65(React51.Fragment, { children: /* @__PURE__ */ jsx65(
+    return /* @__PURE__ */ jsx70(React54.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx70(React54.Fragment, { children: node.type == "layout-container" ? /* @__PURE__ */ jsx70(React54.Fragment, { children: /* @__PURE__ */ jsx70(
       SelectedNode,
       {
         node,
@@ -3684,7 +4670,7 @@ var PageBodyRenderer = (props) => {
         apiBaseUrl: props.apiBaseUrl,
         widgetRegistry: props.widgetRegistry
       }
-    ) }) : /* @__PURE__ */ jsx65(React51.Fragment, { children: /* @__PURE__ */ jsx65(
+    ) }) : /* @__PURE__ */ jsx70(React54.Fragment, { children: /* @__PURE__ */ jsx70(
       SelectedNode,
       {
         node,
@@ -3708,4 +4694,3 @@ export {
   ViewControl_default as ViewControl,
   ViewControlTypes_default as ViewControlTypes
 };
-//# sourceMappingURL=index.mjs.map