@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260323045408 → 0.8.1-dev.20260323060538

package/dist/index.js

@@ -1422,7 +1422,7 @@ var SelectWithSearchPanel = (props) => {
   const containerRef = (0, import_react27.useRef)(null);
   const [isCreateOpen, setIsCreateOpen] = (0, import_react27.useState)(false);
   const [formData, setFormData] = (0, import_react27.useState)({});
-  const getNestedValue = (obj, path) => {
+  const getNestedValue2 = (obj, path) => {
     return path.split(".").reduce((acc, key) => acc?.[key], obj);
   };
   (0, import_react27.useEffect)(() => {
@@ -1460,7 +1460,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 = () => {
@@ -1491,7 +1491,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({
@@ -1638,7 +1638,7 @@ var SelectWithSearchPanel = (props) => {
               role: "option",
               tabIndex: -1,
               onMouseEnter: () => setHighlightedIndex(index),
-              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: getNestedValue(item, props.dataTextFieldName) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: getNestedValue2(item, props.dataTextFieldName) })
             }
           ) }, item[props.dataKeyFieldName])) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "px-4 py-2 text-gray-500", children: "No results found" })
         }
@@ -1937,51 +1937,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 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)}`;
     }
-    return 1;
+    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;
   }
@@ -2537,7 +2632,7 @@ var DataList = (props) => {
 var DataList_default = DataList;
 
 // src/components/pageRenderingEngine/PageBodyRenderer.tsx
-var import_react52 = __toESM(require("react"));
+var import_react55 = __toESM(require("react"));
 
 // src/components/pageRenderingEngine/nodes/ParagraphNode.tsx
 var import_react37 = __toESM(require("react"));
@@ -2563,17 +2658,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)
         ])
       );
     }
@@ -2593,7 +2688,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}}`;
@@ -2714,13 +2809,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 = [
@@ -2737,7 +2832,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");
@@ -3566,69 +3661,824 @@ var FormContainerNode = (props) => {
 var FormContainerNode_default = FormContainerNode;
 
 // src/components/pageRenderingEngine/nodes/DivContainer.tsx
-var import_react51 = __toESM(require("react"));
-var import_link3 = __toESM(require("next/link"));
+var import_react54 = __toESM(require("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
+var import_react51 = require("react");
 var import_jsx_runtime65 = require("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
+var Pagination = (props) => {
+  const { dataset, path, query, showPageSizeSelector = false, showJumpToPage = false } = props;
+  const builder = (0, import_react51.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__ */ (0, import_jsx_runtime65.jsx)(
+    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__ */ (0, import_jsx_runtime65.jsx)("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__ */ (0, import_jsx_runtime65.jsx)(
+      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__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "py-6 border-t bg-default", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "text-sm", children: [
+        "Showing ",
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("span", { className: "font-semibold", children: [
+          startItem,
+          "-",
+          endItem
+        ] }),
+        " ",
+        "out of ",
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "font-semibold", children: totalItems.toLocaleString() }),
+        " results"
+      ] }),
+      totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex items-center space-x-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+          NavigationButton,
+          {
+            page: activePageNumber - 1,
+            disabled: activePageNumber === 1,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Icon_default, { name: "chevronLeft", className: "w-4 h-4 mr-1" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "text-sm", children: "Prev" })
+            ]
+          }
+        ),
+        paginationRange.map((item, index) => {
+          if (item === "...") {
+            return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+              "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__ */ (0, import_jsx_runtime65.jsx)(PageButton, { page, children: page }, page);
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+          NavigationButton,
+          {
+            page: activePageNumber + 1,
+            disabled: activePageNumber === totalPages,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "text-sm", children: "Next" }),
+              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Icon_default, { name: "chevronRight", className: "w-4 h-4 ml-1" }) })
+            ]
+          }
+        )
+      ] }),
+      showJumpToPage && totalPages > 5 && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "text-sm", children: "Go to:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          "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__ */ (0, import_jsx_runtime65.jsx)("div", { className: "mt-4 pt-4 border-t bg-default", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex items-center justify-center space-x-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "text-sm", children: "Show:" }),
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "flex space-x-1", children: [10, 25, 50, 100].map((size) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        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__ */ (0, import_jsx_runtime65.jsx)("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
+var import_react52 = __toESM(require("react"));
+var import_jsx_runtime66 = require("react/jsx-runtime");
+function EnterAnimationClient({ hasEnterAnimation, children }) {
+  const ref = (0, import_react52.useRef)(null);
+  (0, import_react52.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime66.jsx)(import_jsx_runtime66.Fragment, { children: children && // enforce passing the ref to Wrapper
+  //@ts-ignore
+  import_react52.default.cloneElement(children, { ref }) });
+}
+
+// src/components/Slider.tsx
+var import_react53 = __toESM(require("react"));
+var import_jsx_runtime67 = require("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] = (0, import_react53.useState)(0);
+  const [transition, setTransition] = (0, import_react53.useState)(true);
+  const [slidesToShowState, setSlidesToShowState] = (0, import_react53.useState)(
+    typeof slidesToShow === "number" ? slidesToShow : slidesToShow.large
+  );
+  const [isPlaying, setIsPlaying] = (0, import_react53.useState)(autoplay);
+  (0, import_react53.useEffect)(() => {
+    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]);
+  (0, import_react53.useEffect)(() => {
+    if (!autoplay) return;
+    const timer = setInterval(() => {
+      if (isPlaying) {
+        nextSlide();
+      }
+    }, autoplay_speed);
+    return () => clearInterval(timer);
+  }, [autoplay, autoplay_speed, currentSlide, isPlaying]);
+  const totalSlides = import_react53.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 = import_react53.Children.map(children, (child, index) => {
+    if (!import_react53.default.isValidElement(child)) return null;
+    const childProps = child.props;
+    const mergedClassName = `${childProps.className ?? ""} w-full`.trim();
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      "div",
+      {
+        className: `flex-none ${scaleOnHover ? "group hover:z-50" : ""} relative`,
+        style: { width: `calc(${100 / slidesToShowState}%)`, paddingRight: gap },
+        children: (0, import_react53.cloneElement)(child, {
+          className: mergedClassName
+        })
+      },
+      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__ */ (0, import_jsx_runtime67.jsxs)(
+    "div",
+    {
+      className: `relative w-full overflow-hidden ${className}`,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          "div",
+          {
+            className: "flex h-full",
+            style: {
+              transition: transition ? "transform 0.5s ease" : "none",
+              transform: `translateX(${translateX}%)`
+            },
+            children: slides
+          }
+        ),
+        show_arrows && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+            ArrowButton,
+            {
+              direction: "left",
+              onClick: prevSlide,
+              visible: infinite_scroll || currentSlide > 0,
+              className: arrowClassName,
+              children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("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__ */ (0, import_jsx_runtime67.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5 8.25 12l7.5-7.5" }) })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+            ArrowButton,
+            {
+              direction: "right",
+              onClick: nextSlide,
+              visible: infinite_scroll || currentSlide < maxSlide,
+              className: arrowClassName,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("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__ */ (0, import_jsx_runtime67.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m8.25 4.5 7.5 7.5-7.5 7.5" }) }),
+                "          "
+              ]
+            }
+          )
+        ] }),
+        show_dots && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("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__ */ (0, import_jsx_runtime67.jsx)(
+          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__ */ (0, import_jsx_runtime67.jsx)(
+  "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] = (0, import_react53.useState)(0);
+  (0, import_react53.useEffect)(() => {
+    if (active) {
+      setProgress(0);
+    }
+  }, [active, index]);
+  (0, import_react53.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime67.jsx)(
+        "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__ */ (0, import_jsx_runtime67.jsx)(
+        "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__ */ (0, import_jsx_runtime67.jsxs)(
+    "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
+var import_jsx_runtime68 = require("react/jsx-runtime");
+var NoDataFound = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center bg-neutral-weak", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "mb-5", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "mx-auto w-20 h-20 rounded-full flex items-center justify-center bg-neutral-soft", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+      "svg",
+      {
+        className: "w-10 h-10",
+        fill: "none",
+        stroke: "currentColor",
+        viewBox: "0 0 24 24",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+          "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__ */ (0, import_jsx_runtime68.jsx)("h3", { className: "text-lg font-medium mb-2", children: "No data available" }),
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("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
+var import_jsx_runtime69 = require("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, resolveAssetUrl, apiBaseUrl) {
+  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 resolvedAssetUrl = resolveAssetUrl?.(imageValue.assetUrl) ?? AssetUtility_default.resolveUrl(apiBaseUrl, imageValue.assetUrl);
+      if (!resolvedAssetUrl) return "";
+      const url = `url('${resolvedAssetUrl}')`;
+      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)); } }`;
   }
-  var background = generateCompleteBackgroundString(props.node.backgroundLayers);
+  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,
+    props.resolveAssetUrl,
+    props.apiBaseUrl
+  );
   let containerPaddingClass = "";
   if (props.node.containerPadding == "small") {
     containerPaddingClass = "container-small";
@@ -3637,103 +4487,190 @@ 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) {
+    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")}
-} }`;
+    if (props.serviceClient) {
+      response = await props.serviceClient.get(endpoint);
+      result = response?.result;
+    } else {
+      console.warn(
+        "DivContainer data binding needs `serviceClient` prop but none was provided."
+      );
+    }
+    if (dataBindingProperties.showNoResultsMessage && (result === void 0 || Array.isArray(result) && result.length == 0)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(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__ */ (0, import_jsx_runtime69.jsx)(import_react54.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+      SelectedNode,
+      {
+        node,
+        parentTag: Wrapper,
+        routeParameters: props2.routeParameters,
+        query: props2.query,
+        session: props2.session,
+        host: props2.host,
+        path: props2.path,
+        apiBaseUrl: props2.apiBaseUrl,
+        serviceClient: props2.serviceClient,
+        resolveAssetUrl: props2.resolveAssetUrl,
+        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__ */ (0, import_jsx_runtime65.jsxs)(import_react51.default.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("style", { dangerouslySetInnerHTML: { __html: css } }),
-    props.node.href && props.node.href !== "" ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_link3.default, { href: props.node.href, className: "block", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-      "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__ */ (0, import_jsx_runtime69.jsxs)(import_react54.default.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("style", { dangerouslySetInnerHTML: { __html: cssResult.css + animationCSS } }),
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(EnterAnimationClient, { hasEnterAnimation: !!props.node.enterAnimation, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react54.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+      Wrapper,
       {
         id: guid,
-        style: { ...backgroundStyle, display: "block" },
-        className: containerPaddingClass,
-        children: props.node.children?.map((node, index) => {
-          const SelectedNode = NodeTypes2[node.type];
-          return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react51.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-            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__ */ (0, import_jsx_runtime69.jsx)(import_react54.default.Fragment, { children: child }, i)
+          ) : renderChildren(props.node.children, props, item, idx)
+        )
       }
-    ) }) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { id: guid, style: { ...backgroundStyle }, className: containerPaddingClass, children: props.node.children && props.node.children.map((node, index) => {
-      const SelectedNode = NodeTypes2[node.type];
-      return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react51.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-        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__ */ (0, import_jsx_runtime69.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Pagination_default, { path: props.path, query: props.query, dataset: response }) })
   ] });
 };
 var DivContainer_default = DivContainer;
 
 // src/components/pageRenderingEngine/PageBodyRenderer.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var NodeTypes = {
   ["paragraph"]: ParagraphNode_default,
   ["heading"]: HeadingNode_default,
@@ -3761,11 +4698,11 @@ var PageBodyRenderer = (props) => {
   if (pageBodyTree && pageBodyTree.root) {
     rootNode = pageBodyTree.root;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react52.default.Fragment, { children: rootNode && rootNode?.children?.map((node, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_react55.default.Fragment, { children: rootNode && rootNode?.children?.map((node, index) => {
     {
     }
     const SelectedNode = NodeTypes[node.type];
-    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react52.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react52.default.Fragment, { children: node.type == "layout-container" ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react52.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_react55.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_react55.default.Fragment, { children: node.type == "layout-container" ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_react55.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
       SelectedNode,
       {
         node,
@@ -3776,9 +4713,11 @@ var PageBodyRenderer = (props) => {
         host: props.host,
         path: props.path,
         apiBaseUrl: props.apiBaseUrl,
-        widgetRegistry: props.widgetRegistry
+        widgetRegistry: props.widgetRegistry,
+        serviceClient: props.serviceClient,
+        resolveAssetUrl: props.resolveAssetUrl
       }
-    ) }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react52.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_react55.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
       SelectedNode,
       {
         node,
@@ -3788,7 +4727,9 @@ var PageBodyRenderer = (props) => {
         host: props.host,
         path: props.path,
         apiBaseUrl: props.apiBaseUrl,
-        widgetRegistry: props.widgetRegistry
+        widgetRegistry: props.widgetRegistry,
+        serviceClient: props.serviceClient,
+        resolveAssetUrl: props.resolveAssetUrl
       }
     ) }) }) }, index);
   }) });