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

package/dist/index.js

@@ -3432,6 +3432,19 @@ var init_InputControlClient = __esm({
   }
 });
 
+// src/components/controls/edit/InputControl.tsx
+var import_dynamic5, InputControl2, InputControl_default;
+var init_InputControl = __esm({
+  "src/components/controls/edit/InputControl.tsx"() {
+    "use strict";
+    import_dynamic5 = __toESM(require("next/dynamic"));
+    InputControl2 = (0, import_dynamic5.default)(() => Promise.resolve().then(() => (init_InputControlClient(), InputControlClient_exports)), {
+      ssr: false
+    });
+    InputControl_default = InputControl2;
+  }
+});
+
 // src/clients/CacheManage.tsx
 var import_node_cache, CacheManager;
 var init_CacheManage = __esm({
@@ -3468,7 +3481,7 @@ var init_CacheManage = __esm({
 });
 
 // src/clients/ServiceClient.tsx
-var ServerApiError, ServiceClient, ServiceClient_default;
+var ServerApiError, _ServiceClient, ServiceClient, ServiceClient_default;
 var init_ServiceClient = __esm({
   "src/clients/ServiceClient.tsx"() {
     "use strict";
@@ -3481,7 +3494,7 @@ var init_ServiceClient = __esm({
         this.data.isSuccessful = false;
       }
     };
-    ServiceClient = class {
+    _ServiceClient = class _ServiceClient {
       constructor(apiBaseUrl, session) {
         this.cacheManager = CacheManager.getInstance();
         this.baseUrl = apiBaseUrl;
@@ -3524,28 +3537,42 @@ var init_ServiceClient = __esm({
         if (cachedData) {
           return cachedData;
         }
-        console.log("*****************CALLING API:", cacheKey, (/* @__PURE__ */ new Date()).toISOString());
-        const response = await fetch(fullPath, { headers: config.headers });
-        if (!response.ok) {
-          const apiErrorData = await response.json();
-          throw new ServerApiError(apiErrorData, response.status);
-        }
-        const cacheControl = response.headers.get("Cache-Control");
-        let revalidate = null;
-        if (cacheControl) {
-          const maxAgeMatch = cacheControl.match(/max-age=(\d+)/);
-          if (maxAgeMatch && maxAgeMatch[1]) {
-            const maxAge = parseInt(maxAgeMatch[1], 10);
-            revalidate = maxAge * 1e3;
-          }
+        const existingRequest = _ServiceClient.inFlightGetRequests.get(cacheKey);
+        if (existingRequest) {
+          return existingRequest;
         }
-        const data = await response.json();
-        data.isSuccessful = true;
-        if (revalidate !== null && revalidate > 0) {
-          console.log("revalidate............I am caching:" + revalidate);
-          this.cacheManager.set(cacheKey, data, revalidate);
+        const request = (async () => {
+          console.log("*****************CALLING API:", cacheKey, (/* @__PURE__ */ new Date()).toISOString());
+          const response = await fetch(fullPath, { headers: config.headers });
+          if (!response.ok) {
+            const apiErrorData = await response.json();
+            throw new ServerApiError(apiErrorData, response.status);
+          }
+          const cacheControl = response.headers.get("Cache-Control");
+          let revalidate = null;
+          if (cacheControl) {
+            const maxAgeMatch = cacheControl.match(/max-age=(\d+)/);
+            if (maxAgeMatch && maxAgeMatch[1]) {
+              const maxAge = parseInt(maxAgeMatch[1], 10);
+              revalidate = maxAge * 1e3;
+            }
+          }
+          const data = await response.json();
+          data.isSuccessful = true;
+          if (revalidate !== null && revalidate > 0) {
+            console.log("revalidate............I am caching:" + revalidate);
+            this.cacheManager.set(cacheKey, data, revalidate);
+          }
+          return data;
+        })();
+        _ServiceClient.inFlightGetRequests.set(cacheKey, request);
+        try {
+          return await request;
+        } finally {
+          if (_ServiceClient.inFlightGetRequests.get(cacheKey) === request) {
+            _ServiceClient.inFlightGetRequests.delete(cacheKey);
+          }
         }
-        return data;
       }
       //   private async refreshToken(): Promise<void> {
       //     console.log("*******************calling refresh token***********************");
@@ -3642,6 +3669,8 @@ var init_ServiceClient = __esm({
         }
       }
     };
+    _ServiceClient.inFlightGetRequests = /* @__PURE__ */ new Map();
+    ServiceClient = _ServiceClient;
     ServiceClient_default = ServiceClient;
   }
 });
@@ -4094,6 +4123,12 @@ var init_OdataBuilder = __esm({
               if (key == "searchCols") {
                 this.searchCols = odata[key];
               }
+              if (key == "filter") {
+                this.apiFilter = odata[key];
+              }
+              if (key == "orderBy") {
+                this.apiOrderBy = odata[key];
+              }
             }
           }
         }
@@ -4120,6 +4155,12 @@ var init_OdataBuilder = __esm({
         if (obj?.["searchCols"] && obj["searchCols"].trim() !== "") {
           queryString += `&searchCols=${encodeURIComponent(obj["searchCols"])}`;
         }
+        if (obj?.["filter"] && obj["filter"].trim() !== "") {
+          queryString += `&filter=${encodeURIComponent(obj["filter"])}`;
+        }
+        if (obj?.["orderBy"] && obj["orderBy"].trim() !== "") {
+          queryString += `&orderBy=${encodeURIComponent(obj["orderBy"])}`;
+        }
         if (obj) {
           if (obj["$filter"] && obj["$filter"] !== null && obj["$filter"] !== "") {
             queryString = queryString + `&$filter=${encodeURIComponent(obj["$filter"])}`;
@@ -4167,6 +4208,18 @@ var init_OdataBuilder = __esm({
         }
         return pageNumber;
       }
+      appendApiQueryParameters(url) {
+        if (this.searchTerm) {
+          url += `&searchTerm=${encodeURIComponent(this.searchTerm)}`;
+        }
+        if (this.apiFilter) {
+          url += `&filter=${encodeURIComponent(this.apiFilter)}`;
+        }
+        if (this.apiOrderBy) {
+          url += `&orderBy=${encodeURIComponent(this.apiOrderBy)}`;
+        }
+        return url;
+      }
       getUrl() {
         let url = `${this.baseUrl}?$skip=${this.skip}&$top=${this.top}&$count=true`;
         if (this.filterBy !== null && this.filterBy !== "") {
@@ -4182,7 +4235,7 @@ var init_OdataBuilder = __esm({
           url += `&searchCols=${encodeURIComponent(this.searchCols)}`;
         }
         console.log(url);
-        return url;
+        return this.appendApiQueryParameters(url);
       }
       getNewOrderByUrl(orderBy) {
         let url = `${this.baseUrl}?$skip=${0}&$top=${this.top}&$count=true`;
@@ -4196,7 +4249,7 @@ var init_OdataBuilder = __esm({
           url += `&searchCols=${encodeURIComponent(this.searchCols)}`;
         }
         url = url + `&$orderby=${encodeURIComponent(orderBy)}`;
-        return url;
+        return this.appendApiQueryParameters(url);
       }
       getNewFilterUrl(filterBy) {
         let url = `${this.baseUrl}?$skip=${0}&$top=${this.top}&$count=true`;
@@ -4212,7 +4265,7 @@ var init_OdataBuilder = __esm({
         if (this.searchCols) {
           url += `&searchCols=${encodeURIComponent(this.searchCols)}`;
         }
-        return url;
+        return this.appendApiQueryParameters(url);
       }
       getNewPageUrl(page) {
         let skip = page * Constants.pagesize - Constants.pagesize;
@@ -4229,7 +4282,7 @@ var init_OdataBuilder = __esm({
         if (this.searchCols) {
           url += `&searchCols=${encodeURIComponent(this.searchCols)}`;
         }
-        return url;
+        return this.appendApiQueryParameters(url);
       }
       getNewPageSizeUrl(pageSize) {
         const currentPage = this.getPageNumber(
@@ -4243,7 +4296,7 @@ var init_OdataBuilder = __esm({
         if (this.orderBy !== null && this.orderBy !== "") {
           url = url + `&$orderby=${encodeURIComponent(this.orderBy)}`;
         }
-        return url;
+        return this.appendApiQueryParameters(url);
       }
       getOrderBy() {
         return this.orderBy;
@@ -4436,18 +4489,224 @@ var init_Pagination = __esm({
   }
 });
 
+// src/components/pageRenderingEngine/nodes/DataBindingControls.tsx
+var DataBindingControls_exports = {};
+__export(DataBindingControls_exports, {
+  default: () => DataBindingControls_default
+});
+var import_react55, import_navigation, import_jsx_runtime77, humanize, escapeODataString, normalizeSortOption, DUMMY_FACETS, DUMMY_SORT_OPTIONS, DataBindingControls, DataBindingControls_default;
+var init_DataBindingControls = __esm({
+  "src/components/pageRenderingEngine/nodes/DataBindingControls.tsx"() {
+    "use strict";
+    "use client";
+    import_react55 = require("react");
+    import_navigation = require("next/navigation");
+    init_InputControl();
+    init_InputControlType();
+    import_jsx_runtime77 = require("react/jsx-runtime");
+    humanize = (value) => value.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").trim();
+    escapeODataString = (value) => value.replace(/'/g, "''");
+    normalizeSortOption = (option) => {
+      const direction = option.direction.trim();
+      return {
+        label: option.title || humanize(option.name),
+        value: [option.name, direction].filter(Boolean).join(" ")
+      };
+    };
+    DUMMY_FACETS = {
+      CategoryTitle: [
+        { value: "Career Readiness", count: 2 },
+        { value: "Student Learning", count: 2 }
+      ],
+      Author: [
+        { value: "John Smith", count: 2 },
+        { value: "Sarah Jones", count: 1 },
+        { value: "Emily Brown", count: 1 }
+      ]
+    };
+    DUMMY_SORT_OPTIONS = [
+      { name: "createdDate", title: "Newest First", direction: "desc" },
+      { name: "createdDate", title: "Oldest First", direction: "asc" },
+      { name: "title", title: "Title A-Z", direction: "asc" },
+      { name: "title", title: "Title Z-A", direction: "desc" }
+    ];
+    DataBindingControls = ({
+      path,
+      query,
+      facets,
+      sortOptions,
+      showFacets,
+      showSortOptions,
+      showSearchBar,
+      mode = "toolbar"
+    }) => {
+      const router = (0, import_navigation.useRouter)();
+      const apiFacetGroups = Object.entries(facets ?? {}).filter(
+        ([, values]) => Array.isArray(values) && values.length > 0
+      );
+      const facetGroups = apiFacetGroups.length > 0 ? apiFacetGroups : Object.entries(DUMMY_FACETS);
+      const apiSortOptions = (sortOptions ?? []).filter(
+        (option) => option?.name && option?.direction
+      );
+      const resolvedSortOptions = apiSortOptions.length > 0 ? apiSortOptions : DUMMY_SORT_OPTIONS;
+      const normalizedSortOptions = resolvedSortOptions.map(normalizeSortOption).filter((option) => option.value);
+      const currentFilter = query?.["$filter"] ?? query?.filter ?? "";
+      const currentSort = query?.["$orderby"] ?? query?.orderBy ?? "";
+      const currentSearch = query?.searchTerm ?? query?.searchText ?? "";
+      const [searchText, setSearchText] = (0, import_react55.useState)(currentSearch);
+      const lastNavigationUrl = (0, import_react55.useRef)(null);
+      (0, import_react55.useEffect)(() => {
+        setSearchText(currentSearch);
+      }, [currentSearch]);
+      const getQueryUrl = (0, import_react55.useCallback)(
+        (updates) => {
+          const params = new URLSearchParams(query ?? {});
+          Object.entries(updates).forEach(([key, value]) => {
+            if (value) {
+              params.set(key, value);
+            } else {
+              params.delete(key);
+            }
+          });
+          params.delete("$skip");
+          params.delete("skip");
+          const queryString = params.toString();
+          return queryString ? `${path}?${queryString}` : path;
+        },
+        [path, query]
+      );
+      const getFacetUrl = (field, value) => getQueryUrl({
+        $filter: value ? `${field} eq '${escapeODataString(value)}'` : void 0,
+        filter: void 0
+      });
+      const navigateWithoutReload = (0, import_react55.useCallback)(
+        (url) => {
+          if (lastNavigationUrl.current === url) {
+            return;
+          }
+          if (typeof window !== "undefined") {
+            const targetUrl = new URL(url, window.location.origin);
+            if (targetUrl.pathname === window.location.pathname && targetUrl.search === window.location.search) {
+              return;
+            }
+          }
+          lastNavigationUrl.current = url;
+          router.push(url, { scroll: false });
+        },
+        [router]
+      );
+      (0, import_react55.useEffect)(() => {
+        const trimmedSearchText = searchText.trim();
+        if (trimmedSearchText === currentSearch.trim()) {
+          return;
+        }
+        const timeout = window.setTimeout(() => {
+          navigateWithoutReload(
+            getQueryUrl({
+              searchTerm: trimmedSearchText || void 0,
+              searchText: void 0
+            })
+          );
+        }, 500);
+        return () => window.clearTimeout(timeout);
+      }, [currentSearch, getQueryUrl, navigateWithoutReload, searchText]);
+      const hasFacetControls = showFacets && facetGroups.length > 0;
+      const hasSortControls = showSortOptions && normalizedSortOptions.length > 0;
+      const shouldShowToolbar = mode === "toolbar" && (showSearchBar || hasSortControls);
+      const shouldShowFacets = mode === "facets" && hasFacetControls;
+      if (!shouldShowToolbar && !shouldShowFacets) {
+        return null;
+      }
+      const renderFacetLinks = (field, values, stacked = false) => /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: stacked ? "flex flex-col gap-1" : "flex flex-wrap gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => navigateWithoutReload(getFacetUrl(field)),
+            "aria-pressed": !currentFilter,
+            className: `px-3 py-2 text-left text-sm ${stacked ? "w-full" : "border"} ${currentFilter ? "" : "bg-primary-base font-semibold"}`,
+            children: "All"
+          }
+        ),
+        values.map((facet) => {
+          const filter = `${field} eq '${escapeODataString(facet.value)}'`;
+          return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: () => navigateWithoutReload(getFacetUrl(field, facet.value)),
+              "aria-pressed": currentFilter === filter,
+              className: `px-3 py-2 text-left text-sm ${stacked ? "w-full" : "border"} ${currentFilter === filter ? "bg-primary-base font-semibold" : ""}`,
+              children: [
+                facet.value,
+                " (",
+                facet.count,
+                ")"
+              ]
+            },
+            `${field}-${facet.value}`
+          );
+        })
+      ] });
+      return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: mode === "toolbar" ? "mb-6" : "flex flex-col gap-2", children: [
+        shouldShowToolbar && /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
+          showSearchBar && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+            InputControl_default,
+            {
+              name: "searchText",
+              controlType: InputControlType_default.lineTextInput,
+              value: searchText,
+              callback: (updatedValues) => setSearchText(updatedValues.value),
+              attributes: { placeholder: "Search" },
+              inputClasses: "!mt-0"
+            }
+          ) }),
+          hasSortControls && /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex items-center gap-2 text-sm", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "font-medium", children: "Sort by" }),
+            /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+              InputControl_default,
+              {
+                name: "sortOptions",
+                controlType: InputControlType_default.select,
+                value: currentSort,
+                dataset: normalizedSortOptions,
+                dataKeyFieldName: "value",
+                dataTextFieldName: "label",
+                callback: (updatedValues) => navigateWithoutReload(
+                  getQueryUrl({
+                    $orderby: updatedValues.value || void 0,
+                    orderBy: void 0
+                  })
+                ),
+                attributes: { placeholder: "Default" },
+                inputClasses: "!mt-0 min-w-44"
+              }
+            )
+          ] })
+        ] }),
+        shouldShowFacets && facetGroups.length === 1 && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("nav", { "aria-label": `${humanize(facetGroups[0][0])} filters`, children: renderFacetLinks(facetGroups[0][0], facetGroups[0][1]) }),
+        shouldShowFacets && facetGroups.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "flex flex-col gap-2", children: facetGroups.map(([field, values]) => /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("details", { className: "border-b", open: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("summary", { className: "cursor-pointer font-semibold", children: humanize(field) }),
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "p-2", children: renderFacetLinks(field, values, true) })
+        ] }, field)) })
+      ] });
+    };
+    DataBindingControls_default = DataBindingControls;
+  }
+});
+
 // src/components/Slider.tsx
 var Slider_exports = {};
 __export(Slider_exports, {
   default: () => Slider_default
 });
-var import_react55, import_jsx_runtime77, Slider, ArrowButton, ProgressPill, Slider_default;
+var import_react56, import_jsx_runtime78, Slider, ArrowButton, ProgressPill, Slider_default;
 var init_Slider = __esm({
   "src/components/Slider.tsx"() {
     "use strict";
     "use client";
-    import_react55 = __toESM(require("react"));
-    import_jsx_runtime77 = require("react/jsx-runtime");
+    import_react56 = __toESM(require("react"));
+    import_jsx_runtime78 = require("react/jsx-runtime");
     Slider = ({
       children,
       slidesToShow = 4,
@@ -4465,13 +4724,13 @@ var init_Slider = __esm({
       pillStyle = "cumulative",
       progressPosition = "bottom"
     }) => {
-      const [currentSlide, setCurrentSlide] = (0, import_react55.useState)(0);
-      const [transition, setTransition] = (0, import_react55.useState)(true);
-      const [slidesToShowState, setSlidesToShowState] = (0, import_react55.useState)(
+      const [currentSlide, setCurrentSlide] = (0, import_react56.useState)(0);
+      const [transition, setTransition] = (0, import_react56.useState)(true);
+      const [slidesToShowState, setSlidesToShowState] = (0, import_react56.useState)(
         typeof slidesToShow === "number" ? slidesToShow : slidesToShow.large
       );
-      const [isPlaying, setIsPlaying] = (0, import_react55.useState)(autoplay);
-      (0, import_react55.useEffect)(() => {
+      const [isPlaying, setIsPlaying] = (0, import_react56.useState)(autoplay);
+      (0, import_react56.useEffect)(() => {
         if (typeof slidesToShow === "number") return;
         const handleResize = () => {
           if (window.innerWidth >= 1024) {
@@ -4486,7 +4745,7 @@ var init_Slider = __esm({
         window.addEventListener("resize", handleResize);
         return () => window.removeEventListener("resize", handleResize);
       }, [slidesToShow]);
-      (0, import_react55.useEffect)(() => {
+      (0, import_react56.useEffect)(() => {
         if (!autoplay) return;
         const timer = setInterval(() => {
           if (isPlaying) {
@@ -4495,7 +4754,7 @@ var init_Slider = __esm({
         }, autoplay_speed);
         return () => clearInterval(timer);
       }, [autoplay, autoplay_speed, currentSlide, isPlaying]);
-      const totalSlides = import_react55.Children.count(children);
+      const totalSlides = import_react56.Children.count(children);
       const maxSlide = totalSlides - slidesToShowState;
       const nextSlide = () => {
         if (currentSlide >= maxSlide) {
@@ -4540,16 +4799,16 @@ var init_Slider = __esm({
         }
       };
       const translateX = -currentSlide * (100 / slidesToShowState);
-      const slides = import_react55.Children.map(children, (child, index) => {
-        if (!import_react55.default.isValidElement(child)) return null;
+      const slides = import_react56.Children.map(children, (child, index) => {
+        if (!import_react56.default.isValidElement(child)) return null;
         const childProps = child.props;
         const mergedClassName = `${childProps.className ?? ""} w-full`.trim();
-        return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
           "div",
           {
             className: `flex-none ${scaleOnHover ? "group hover:z-50" : ""} relative`,
             style: { width: `calc(${100 / slidesToShowState}%)`, paddingRight: gap },
-            children: (0, import_react55.cloneElement)(child, {
+            children: (0, import_react56.cloneElement)(child, {
               className: mergedClassName
             })
           },
@@ -4567,14 +4826,14 @@ var init_Slider = __esm({
             return "bottom-4";
         }
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
         "div",
         {
           className: `relative w-full overflow-hidden ${className}`,
           onMouseEnter: handleMouseEnter,
           onMouseLeave: handleMouseLeave,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
               "div",
               {
                 className: "flex h-full",
@@ -4585,18 +4844,18 @@ var init_Slider = __esm({
                 children: slides
               }
             ),
-            show_arrows && /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_jsx_runtime77.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+            show_arrows && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
                 ArrowButton,
                 {
                   direction: "left",
                   onClick: prevSlide,
                   visible: infinite_scroll || currentSlide > 0,
                   className: arrowClassName,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime77.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_runtime77.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5 8.25 12l7.5-7.5" }) })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime78.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_runtime78.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5 8.25 12l7.5-7.5" }) })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
                 ArrowButton,
                 {
                   direction: "right",
@@ -4604,13 +4863,13 @@ var init_Slider = __esm({
                   visible: infinite_scroll || currentSlide < maxSlide,
                   className: arrowClassName,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime77.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_runtime77.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m8.25 4.5 7.5 7.5-7.5 7.5" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime78.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_runtime78.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_runtime77.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_runtime77.jsx)(
+            show_dots && /* @__PURE__ */ (0, import_jsx_runtime78.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_runtime78.jsx)(
               ProgressPill,
               {
                 active: index === currentSlide,
@@ -4636,7 +4895,7 @@ var init_Slider = __esm({
       visible,
       children,
       className = ""
-    }) => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+    }) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
       "button",
       {
         className: `
@@ -4662,13 +4921,13 @@ var init_Slider = __esm({
       currentSlide,
       totalSlides
     }) => {
-      const [progress, setProgress] = (0, import_react55.useState)(0);
-      (0, import_react55.useEffect)(() => {
+      const [progress, setProgress] = (0, import_react56.useState)(0);
+      (0, import_react56.useEffect)(() => {
         if (active) {
           setProgress(0);
         }
       }, [active, index]);
-      (0, import_react55.useEffect)(() => {
+      (0, import_react56.useEffect)(() => {
         if (!active || !isPlaying) {
           if (!active) {
             setProgress(0);
@@ -4723,7 +4982,7 @@ var init_Slider = __esm({
       const renderProgressBar = () => {
         if (style === "modern" && isActive || style === "cumulative" && shouldShowProgress) {
           const displayProgress = style === "cumulative" && isFilled ? 100 : progress;
-          return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime78.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`,
@@ -4735,7 +4994,7 @@ var init_Slider = __esm({
       };
       const renderCumulativeFill = () => {
         if (style === "cumulative" && isFilled && !isActive) {
-          return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
             "div",
             {
               className: `absolute top-0 left-0 h-full rounded-full ${activeClassName || "bg-white"} transition-all duration-300`,
@@ -4745,7 +5004,7 @@ var init_Slider = __esm({
         }
         return null;
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
         "button",
         {
           className: `${baseClasses} ${getStyleClasses()}`,
@@ -5171,18 +5430,12 @@ var ViewControl = (props) => {
 };
 var ViewControl_default = ViewControl;
 
-// src/components/controls/edit/InputControl.tsx
-var import_dynamic5 = __toESM(require("next/dynamic"));
-var InputControl2 = (0, import_dynamic5.default)(() => Promise.resolve().then(() => (init_InputControlClient(), InputControlClient_exports)), {
-  ssr: false
-});
-var InputControl_default = InputControl2;
-
 // src/index.ts
+init_InputControl();
 init_InputControlType();
 
 // src/components/pageRenderingEngine/PageBodyRenderer.tsx
-var import_react57 = __toESM(require("react"));
+var import_react58 = __toESM(require("react"));
 
 // src/components/pageRenderingEngine/nodes/ParagraphNode.tsx
 var import_react44 = __toESM(require("react"));
@@ -5956,7 +6209,7 @@ var WidgetNode_default = WidgetNode;
 
 // src/components/pageRenderingEngine/nodes/DivContainer.tsx
 var import_dynamic12 = __toESM(require("next/dynamic"));
-var import_react56 = __toESM(require("react"));
+var import_react57 = __toESM(require("react"));
 
 // src/components/pageRenderingEngine/nodes/EmbedNode.tsx
 var import_dynamic9 = __toESM(require("next/dynamic"));
@@ -7071,8 +7324,11 @@ var GoogleMapNode = (props) => {
 var GoogleMapNode_default = GoogleMapNode;
 
 // src/components/pageRenderingEngine/nodes/DivContainer.tsx
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var Pagination2 = (0, import_dynamic12.default)(() => Promise.resolve().then(() => (init_Pagination(), Pagination_exports)), { ssr: true });
+var DataBindingControls2 = (0, import_dynamic12.default)(() => Promise.resolve().then(() => (init_DataBindingControls(), DataBindingControls_exports)), {
+  ssr: true
+});
 var Slider2 = (0, import_dynamic12.default)(() => Promise.resolve().then(() => (init_Slider(), Slider_exports)), {
   ssr: false
 });
@@ -7327,7 +7583,7 @@ var DivContainer = async (props) => {
     response = await serviceClient.get(endpoint);
     result = response?.result;
     if (dataBindingProperties.showNoResultsMessage && (result === void 0 || result.length == 0)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(NoDataFound_default, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(NoDataFound_default, {});
     }
     if (dataBindingProperties.childCollectionName && props.dataitem) {
       childCollectionData = getNestedValue6(
@@ -7347,7 +7603,7 @@ var DivContainer = async (props) => {
     }
     const SelectedNode = NodeTypes2[node.type];
     if (!SelectedNode) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react56.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_react57.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
       SelectedNode,
       {
         node,
@@ -7480,45 +7736,91 @@ var DivContainer = async (props) => {
     noLinkColor && "no-link-color",
     !!props.node.enterAnimation && "enter-animation"
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_react56.default.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  const showDataBindingControls = Boolean(
+    dataBindingProperties?.showFacets || dataBindingProperties?.showSortOptions || dataBindingProperties?.showSearchBar
+  );
+  const WrapperComponent = Wrapper;
+  const renderedContainer = /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    WrapperComponent,
+    {
+      id: guid,
+      style: combinedStyles,
+      className: classNames || void 0,
+      ...wrapperProps,
+      children: dataToRender.map(
+        (item, idx) => item?.links?.view && renderLink ? renderChildren(
+          props.node.children,
+          props,
+          item,
+          idx,
+          props.href ? void 0 : item?.links?.view
+        )?.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_react57.default.Fragment, { children: child }, i)) : renderChildren(props.node.children, props, item, idx)
+      )
+    }
+  );
+  const paginationControl = dataBindingProperties?.enablePagination ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    Pagination2,
+    {
+      path: props.path,
+      query: props.query,
+      dataset: response
+    }
+  ) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_react57.default.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
       "style",
       {
         dangerouslySetInnerHTML: { __html: cssResult.css + animationCSS }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
-      Wrapper,
-      {
-        id: guid,
-        style: combinedStyles,
-        className: classNames || void 0,
-        ...wrapperProps,
-        children: dataToRender.map(
-          (item, idx) => item?.links?.view && renderLink ? renderChildren(
-            props.node.children,
-            props,
-            item,
-            idx,
-            props.href ? void 0 : item?.links?.view
-          )?.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react56.default.Fragment, { children: child }, i)) : renderChildren(props.node.children, props, item, idx)
-        )
-      }
-    ),
-    dataBindingProperties && props.node.dataBinding.enablePagination && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
-      Pagination2,
-      {
-        path: props.path,
-        query: props.query,
-        dataset: response
-      }
-    ) })
+    showDataBindingControls ? /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_react57.default.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+        DataBindingControls2,
+        {
+          mode: "toolbar",
+          path: props.path,
+          query: props.query,
+          facets: response?.facets,
+          sortOptions: response?.sortOptions,
+          showSortOptions: dataBindingProperties?.showSortOptions,
+          showSearchBar: dataBindingProperties?.showSearchBar
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+        "div",
+        {
+          className: dataBindingProperties?.showFacets ? "grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_18rem]" : void 0,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "min-w-0", children: [
+              renderedContainer,
+              paginationControl
+            ] }),
+            dataBindingProperties?.showFacets && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("aside", { className: "border bg-default p-3 lg:sticky lg:top-[90px] lg:self-start", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("h2", { className: "mb-2 text-lg font-semibold", children: "Filters" }),
+              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+                DataBindingControls2,
+                {
+                  mode: "facets",
+                  path: props.path,
+                  query: props.query,
+                  facets: response?.facets,
+                  showFacets: dataBindingProperties.showFacets
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_react57.default.Fragment, { children: [
+      renderedContainer,
+      paginationControl && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { children: paginationControl })
+    ] })
   ] });
 };
 var DivContainer_default = DivContainer;
 
 // src/components/pageRenderingEngine/PageBodyRenderer.tsx
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 var NodeTypes = {
   ["paragraph"]: ParagraphNode_default,
   ["heading"]: HeadingNode_default,
@@ -7556,14 +7858,14 @@ var PageBodyRenderer = (props) => {
     }
     return true;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_react57.default.Fragment, { children: rootNode && rootNode?.children?.map((node, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react58.default.Fragment, { children: rootNode && rootNode?.children?.map((node, index) => {
     {
     }
     const SelectedNode = NodeTypes[node.type];
     if (!shouldRenderNode(node)) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_react57.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_react57.default.Fragment, { children: node.type == "layout-container" ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_react57.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react58.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react58.default.Fragment, { children: node.type == "layout-container" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react58.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
       SelectedNode,
       {
         node,
@@ -7579,7 +7881,7 @@ var PageBodyRenderer = (props) => {
         device: props.device,
         widgetRenderer: props.widgetRenderer
       }
-    ) }) : /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_react57.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react58.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
       SelectedNode,
       {
         node,
@@ -7600,10 +7902,10 @@ var PageBodyRenderer = (props) => {
 var PageBodyRenderer_default = PageBodyRenderer;
 
 // src/components/pageRenderingEngine/EnterAnimationHydrator.tsx
-var import_react58 = require("react");
+var import_react59 = require("react");
 var ENTER_ANIMATION_SELECTOR = ".enter-animation";
 function EnterAnimationHydrator() {
-  (0, import_react58.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     let observer;
     const observedElements = /* @__PURE__ */ new WeakSet();
     const revealAnimatedElements = () => {
@@ -7648,22 +7950,22 @@ function EnterAnimationHydrator() {
 }
 
 // src/components/Toast.tsx
-var import_react59 = require("react");
+var import_react60 = require("react");
 init_ToastService();
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var Toast = () => {
-  const [showToast, setShowToast] = (0, import_react59.useState)(false);
-  const [message, setMessage] = (0, import_react59.useState)("");
-  const [messageType, setMessageType] = (0, import_react59.useState)("error");
-  const timeoutRef = (0, import_react59.useRef)(null);
-  const closeToast = (0, import_react59.useCallback)(() => {
+  const [showToast, setShowToast] = (0, import_react60.useState)(false);
+  const [message, setMessage] = (0, import_react60.useState)("");
+  const [messageType, setMessageType] = (0, import_react60.useState)("error");
+  const timeoutRef = (0, import_react60.useRef)(null);
+  const closeToast = (0, import_react60.useCallback)(() => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
     }
     setShowToast(false);
   }, []);
-  const showMessage = (0, import_react59.useCallback)((message2, messageType2) => {
+  const showMessage = (0, import_react60.useCallback)((message2, messageType2) => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
     }
@@ -7675,7 +7977,7 @@ var Toast = () => {
       timeoutRef.current = null;
     }, 4e3);
   }, []);
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     ToastService_default.initialize(showMessage, closeToast);
     return () => {
       closeToast();
@@ -7684,8 +7986,8 @@ var Toast = () => {
       });
     };
   }, [closeToast, showMessage]);
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_jsx_runtime80.Fragment, { children: showToast && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "fixed top-2 flex justify-center w-1/2 max-w-xl left-1/2 -translate-x-1/2", style: { zIndex: 1e3 }, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: `w-full items-center flex justify-between p-3 rounded-md relative shadow border bg-${messageType}-soft`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_jsx_runtime81.Fragment, { children: showToast && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "fixed top-2 flex justify-center w-1/2 max-w-xl left-1/2 -translate-x-1/2", style: { zIndex: 1e3 }, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: `w-full items-center flex justify-between p-3 rounded-md relative shadow border bg-${messageType}-soft`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
       "span",
       {
         className: "font-medium text-inherit text-sm",
@@ -7693,7 +7995,7 @@ var Toast = () => {
         children: message
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("button", { className: "absolute right-2 top-2 ml-2 focus:outline-none", onClick: closeToast, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("button", { className: "absolute right-2 top-2 ml-2 focus:outline-none", onClick: closeToast, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -7701,7 +8003,7 @@ var Toast = () => {
         fill: "none",
         viewBox: "0 0 24 24",
         stroke: "currentColor",
-        children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" })
       }
     ) })
   ] }) }) });
@@ -7731,8 +8033,8 @@ init_Switcher();
 
 // src/components/NavigationTabsV2.tsx
 var import_link3 = __toESM(require("next/link"));
-var import_navigation = require("next/navigation");
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_navigation2 = require("next/navigation");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 function resolveRoutePlaceholders(route, params) {
   return route.replace(/\{([^}]+)\}/g, (match, key) => {
     const value = params[key];
@@ -7744,7 +8046,7 @@ function resolveRoutePlaceholders(route, params) {
   });
 }
 var NavigationTabsV2 = ({ tabs, params = {} }) => {
-  const pathname = (0, import_navigation.usePathname)();
+  const pathname = (0, import_navigation2.usePathname)();
   const shouldHideTabs = pathname?.includes("/add");
   if (shouldHideTabs) return null;
   const mappedTabs = tabs?.sort((a, b) => a.displayOrder - b.displayOrder)?.map((tab) => ({
@@ -7757,8 +8059,8 @@ var NavigationTabsV2 = ({ tabs, params = {} }) => {
     isActive: tab.isActive
   })) || [];
   if (mappedTabs.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "flex border-b bg-white rounded-t mb-3", children: mappedTabs.map(({ tabTitle, landingPageUrl, isActive }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_link3.default, { href: landingPageUrl, className: "-mb-px", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "flex border-b bg-white rounded-t mb-3", children: mappedTabs.map(({ tabTitle, landingPageUrl, isActive }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_link3.default, { href: landingPageUrl, className: "-mb-px", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       "div",
       {
         className: `text-sm font-medium border-b-2 px-6 py-2 transition
@@ -7771,14 +8073,15 @@ var NavigationTabsV2 = ({ tabs, params = {} }) => {
 var NavigationTabsV2_default = NavigationTabsV2;
 
 // src/components/dataForm/DataList.tsx
-var import_react62 = __toESM(require("react"));
-var import_navigation2 = require("next/navigation");
+var import_react63 = __toESM(require("react"));
+init_InputControl();
+var import_navigation3 = require("next/navigation");
 
 // src/components/dataForm/NoContentView.tsx
-var import_react60 = __toESM(require("react"));
-var import_jsx_runtime82 = require("react/jsx-runtime");
+var import_react61 = __toESM(require("react"));
+var import_jsx_runtime83 = require("react/jsx-runtime");
 var NoContentView = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_react60.default.Fragment, { children: props.isDataFound === false && props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_react61.default.Fragment, { children: props.isDataFound === false && props.children });
 };
 var NoContentView_default = NoContentView;
 
@@ -7786,39 +8089,39 @@ var NoContentView_default = NoContentView;
 init_InputControlType();
 
 // src/components/dataForm/ContentView.tsx
-var import_react61 = __toESM(require("react"));
-var import_jsx_runtime83 = require("react/jsx-runtime");
+var import_react62 = __toESM(require("react"));
+var import_jsx_runtime84 = require("react/jsx-runtime");
 var ContentView = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_react61.default.Fragment, { children: [
-    props.isDataFound == null && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "", children: /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "bg-gray-200 rounded-md p-4 animate-pulse", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "flex items-center mb-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "bg-gray-300 h-8 w-8 rounded-full animate-pulse" }),
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "ml-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "bg-gray-300 h-3 w-16 animate-pulse" }),
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "bg-gray-300 h-2 w-12 animate-pulse" })
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_react62.default.Fragment, { children: [
+    props.isDataFound == null && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "bg-gray-200 rounded-md p-4 animate-pulse", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "flex items-center mb-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "bg-gray-300 h-8 w-8 rounded-full animate-pulse" }),
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "ml-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "bg-gray-300 h-3 w-16 animate-pulse" }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "bg-gray-300 h-2 w-12 animate-pulse" })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "grid grid-cols-3 gap-4 mt-6", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "animate-pulse", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "grid grid-cols-3 gap-4 mt-6", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "animate-pulse", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "animate-pulse", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "animate-pulse", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "animate-pulse", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "animate-pulse", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
         ] })
       ] })
     ] }) }),
@@ -7878,17 +8181,17 @@ function FormReducer(state, action) {
 var FormReducer_default = FormReducer;
 
 // src/components/dataForm/DataList.tsx
-var import_jsx_runtime84 = require("react/jsx-runtime");
+var import_jsx_runtime85 = require("react/jsx-runtime");
 var DataList = (props) => {
-  const router = (0, import_navigation2.useRouter)();
+  const router = (0, import_navigation3.useRouter)();
   let builder = new OdataBuilder(props.path);
   let orderBy = "";
   let activePageNumber = 0;
   let pages = 0;
   console.log(props.addLinkText);
-  const [isDataFound, setIsDataFound] = (0, import_react62.useState)(null);
-  const [searchTerm, setSearchTerm] = (0, import_react62.useState)(props.query?.searchTerm ?? "");
-  (0, import_react62.useEffect)(() => {
+  const [isDataFound, setIsDataFound] = (0, import_react63.useState)(null);
+  const [searchTerm, setSearchTerm] = (0, import_react63.useState)(props.query?.searchTerm ?? "");
+  (0, import_react63.useEffect)(() => {
     if (props?.dataset) {
       if (props?.dataset.result && props.dataset.result.length > 0) {
         setIsDataFound(true);
@@ -7897,7 +8200,7 @@ var DataList = (props) => {
       }
     }
   }, [props.dataset]);
-  (0, import_react62.useEffect)(() => {
+  (0, import_react63.useEffect)(() => {
     if (!props.query?.["$filter"] || !props.filters) return;
     const filterQuery = props.query["$filter"];
     props.filters.forEach((filter) => {
@@ -7916,7 +8219,7 @@ var DataList = (props) => {
     if (path.includes(".")) {
       return path.split(".").reduce((prev, curr) => prev ? prev[curr] : null, obj);
     } else if (Array.isArray(obj[path])) {
-      return obj[path].map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { children: item }, index));
+      return obj[path].map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { children: item }, index));
     } else {
       return obj[path];
     }
@@ -7925,11 +8228,11 @@ var DataList = (props) => {
     inputValues: {},
     lastPropertyChanged: ""
   };
-  const [formState, dispatch] = (0, import_react62.useReducer)(FormReducer_default, initialState);
+  const [formState, dispatch] = (0, import_react63.useReducer)(FormReducer_default, initialState);
   const getSearchableColumns = () => {
     return props.columns?.filter((c) => c.isSearchable)?.map((c) => c.name)?.join(",");
   };
-  const handleFilterChange = (0, import_react62.useCallback)(
+  const handleFilterChange = (0, import_react63.useCallback)(
     (updatedValues) => {
       dispatch({
         type: FORM_INPUT_UPDATE,
@@ -7960,7 +8263,7 @@ var DataList = (props) => {
     },
     [dispatch, props, router]
   );
-  (0, import_react62.useEffect)(() => {
+  (0, import_react63.useEffect)(() => {
     if (!props.columns.some((col) => col.isSearchable)) {
       return;
     }
@@ -7995,30 +8298,30 @@ var DataList = (props) => {
   const renderPageNumbers = () => {
     if (pages <= 10) {
       return Array.from({ length: pages }, (_, index) => index + 1).map(
-        (page) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_react62.default.Fragment, { children: activePageNumber !== page ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+        (page) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_react63.default.Fragment, { children: activePageNumber !== page ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
           Hyperlink,
           {
             className: "px-3 py-1 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-100",
             href: builder.getNewPageUrl(page),
             children: page
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "px-3 py-1 border-t border-b border-gray-300 bg-primary-base", children: page }) }, page)
+        ) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "px-3 py-1 border-t border-b border-gray-300 bg-primary-base", children: page }) }, page)
       );
     } else {
       const showFirstPages = activePageNumber <= 5;
       const showLastPages = activePageNumber > pages - 5;
       if (showFirstPages) {
-        return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_jsx_runtime84.Fragment, { children: [
-          Array.from({ length: 8 }, (_, index) => index + 1).map((page) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_react62.default.Fragment, { children: activePageNumber !== page ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, { children: [
+          Array.from({ length: 8 }, (_, index) => index + 1).map((page) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_react63.default.Fragment, { children: activePageNumber !== page ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
             Hyperlink,
             {
               className: "px-3 py-1 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-100",
               href: builder.getNewPageUrl(page),
               children: page
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "px-3 py-1 border-t border-b border-gray-300 bg-primary-base", children: page }) }, page)),
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "px-2 py-1", children: "..." }),
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "px-3 py-1 border-t border-b border-gray-300 bg-primary-base", children: page }) }, page)),
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "px-2 py-1", children: "..." }),
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
             Hyperlink,
             {
               className: "px-3 py-1 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-100",
@@ -8026,7 +8329,7 @@ var DataList = (props) => {
               children: pages - 1
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
             Hyperlink,
             {
               className: "px-3 py-1 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-100",
@@ -8034,7 +8337,7 @@ var DataList = (props) => {
               children: pages
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "relative inline-block", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "relative inline-block", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
             "select",
             {
               className: "  py-1 border border-gray-300 bg-white text-gray-700 appearance-none rounded-none",
@@ -8046,18 +8349,18 @@ var DataList = (props) => {
                 }
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("option", { className: "", value: "", children: "Jump to" }),
+                /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("option", { className: "", value: "", children: "Jump to" }),
                 Array.from(
                   { length: Math.max(0, pages - 10) },
                   (_, index) => index + 9
-                ).map((page) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("option", { value: page, children: page }, page))
+                ).map((page) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("option", { value: page, children: page }, page))
               ]
             }
           ) })
         ] });
       } else if (showLastPages) {
-        return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_jsx_runtime84.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
             Hyperlink,
             {
               className: "px-3 py-1 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-100",
@@ -8065,7 +8368,7 @@ var DataList = (props) => {
               children: "1"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
             Hyperlink,
             {
               className: "px-3 py-1 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-100",
@@ -8073,21 +8376,21 @@ var DataList = (props) => {
               children: "2"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "px-2 py-1", children: "..." }),
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "px-2 py-1", children: "..." }),
           Array.from({ length: 8 }, (_, index) => pages - 7 + index).map(
-            (page) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_react62.default.Fragment, { children: activePageNumber !== page ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+            (page) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_react63.default.Fragment, { children: activePageNumber !== page ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
               Hyperlink,
               {
                 className: "px-3 py-1 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-100",
                 href: builder.getNewPageUrl(page),
                 children: page
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "px-3 py-1 border-t border-b border-gray-300 bg-primary-base", children: page }) }, page)
+            ) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "px-3 py-1 border-t border-b border-gray-300 bg-primary-base", children: page }) }, page)
           )
         ] });
       } else {
-        return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_jsx_runtime84.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
             Hyperlink,
             {
               className: "px-3 py-1 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-100",
@@ -8095,7 +8398,7 @@ var DataList = (props) => {
               children: "1"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
             Hyperlink,
             {
               className: "px-3 py-1 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-100",
@@ -8103,20 +8406,20 @@ var DataList = (props) => {
               children: "2"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "px-2 py-1", children: "..." }),
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "px-2 py-1", children: "..." }),
           Array.from(
             { length: 5 },
             (_, index) => activePageNumber - 2 + index
-          ).map((page) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_react62.default.Fragment, { children: activePageNumber !== page ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+          ).map((page) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_react63.default.Fragment, { children: activePageNumber !== page ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
             Hyperlink,
             {
               className: "px-3 py-1 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-100",
               href: builder.getNewPageUrl(page),
               children: page
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "px-3 py-1 border-t border-b border-gray-300 bg-primary-base", children: page }) }, page)),
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "px-2 py-1", children: "..." }),
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "px-3 py-1 border-t border-b border-gray-300 bg-primary-base", children: page }) }, page)),
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "px-2 py-1", children: "..." }),
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
             Hyperlink,
             {
               className: "px-3 py-1 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-100",
@@ -8124,7 +8427,7 @@ var DataList = (props) => {
               children: pages - 1
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
             Hyperlink,
             {
               className: "px-3 py-1 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-100",
@@ -8132,7 +8435,7 @@ var DataList = (props) => {
               children: pages
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "relative inline-block", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "relative inline-block", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
             "select",
             {
               className: "px-2 py-1 border border-gray-300 bg-white text-gray-700 appearance-none rounded-none",
@@ -8144,8 +8447,8 @@ var DataList = (props) => {
                 }
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("option", { value: "", children: "Jump to" }),
-                Array.from({ length: pages - 4 }, (_, index) => index + 3).filter((page) => page > 2 && page < pages - 1).map((page) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("option", { value: page, children: page }, page))
+                /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("option", { value: "", children: "Jump to" }),
+                Array.from({ length: pages - 4 }, (_, index) => index + 3).filter((page) => page > 2 && page < pages - 1).map((page) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("option", { value: page, children: page }, page))
               ]
             }
           ) })
@@ -8153,16 +8456,16 @@ var DataList = (props) => {
       }
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_react62.default.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(ContentView_default, { isDataFound, children: [
-      (props.title || props.filters || props.addLinkHref) && /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_react63.default.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(ContentView_default, { isDataFound, children: [
+      (props.title || props.filters || props.addLinkHref) && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
         "div",
         {
           className: `flex justify-between items-center bg-white pl-6 pr-2 h-14 mb-3 shadow-sm rounded-md sticky top-0`,
           children: [
-            props.title ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "inline-flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("h2", { className: "text-lg font-semibold text-black-800", children: props.title }) }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", {}),
-            /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "flex items-center gap-3", children: [
-              props.columns.some((col) => col.isSearchable) && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+            props.title ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "inline-flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("h2", { className: "text-lg font-semibold text-black-800", children: props.title }) }) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex items-center gap-3", children: [
+              props.columns.some((col) => col.isSearchable) && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
                 InputControl_default,
                 {
                   name: "Search_input",
@@ -8174,7 +8477,7 @@ var DataList = (props) => {
                   }
                 }
               ),
-              props.filters && props.filters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+              props.filters && props.filters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
                 InputControl_default,
                 {
                   name: filter.name,
@@ -8189,15 +8492,15 @@ var DataList = (props) => {
                 },
                 filter.name
               )),
-              props.addLinkHref && /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
+              props.addLinkHref && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
                 Hyperlink,
                 {
                   className: "gap-1",
                   linkType: "Primary" /* Solid */,
                   href: props.addLinkHref,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Icon_default, { name: "plus", className: "w-4 h-4" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "text-sm font-medium", children: props.addLinkText || "Add New" })
+                    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Icon_default, { name: "plus", className: "w-4 h-4" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "text-sm font-medium", children: props.addLinkText || "Add New" })
                   ]
                 }
               )
@@ -8205,8 +8508,8 @@ var DataList = (props) => {
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "flex-1 overflow-y-auto  justify-end bg-white rounded shadow h-[calc(100vh-14rem)]", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("table", { className: "w-full   divide-y divide-gray-200", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("thead", { className: "bg-gray-50 sticky top-0", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("tr", { children: props?.columns?.map((column) => {
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "flex-1 overflow-y-auto  justify-end bg-white rounded shadow h-[calc(100vh-14rem)]", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("table", { className: "w-full   divide-y divide-gray-200", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("thead", { className: "bg-gray-50 sticky top-0", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("tr", { children: props?.columns?.map((column) => {
           let url = builder.getNewOrderByUrl(column.name);
           let icon = "chevronUpDown";
           if (orderBy.includes(`${column.name} desc`)) {
@@ -8216,18 +8519,18 @@ var DataList = (props) => {
             icon = "chevronUp";
             url = builder.getNewOrderByUrl(column.name + " desc");
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
             "th",
             {
               className: "px-6 py-3 text-left font-medium bg-neutral-soft " + (column.enableSorting ? "cursor-pointer " : "") + column.width + (column.controlType == ViewControlTypes_default.money ? " text-right" : ""),
-              children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
                 Hyperlink,
                 {
                   href: column.enableSorting ? url : void 0,
                   className: "!text-neutral-contrast ",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("span", { className: "flex items-center space-x-1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "text-black", children: column.label }),
-                    column.enableSorting && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Icon_default, { className: "w-4 h-4", name: icon })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("span", { className: "flex items-center space-x-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "text-black", children: column.label }),
+                    column.enableSorting && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Icon_default, { className: "w-4 h-4", name: icon })
                   ] })
                 }
               )
@@ -8235,22 +8538,22 @@ var DataList = (props) => {
             column.name
           );
         }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("tbody", { className: "divide-y divide-gray-200 ", children: props.dataset?.result?.map((dataitem, index) => {
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("tbody", { className: "divide-y divide-gray-200 ", children: props.dataset?.result?.map((dataitem, index) => {
           let validityClass = "";
           if (props.recordValidityColumnName && getNestedProperty2(dataitem, props.recordValidityColumnName) == false) {
             validityClass = "bg-alert-200";
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("tr", { className: validityClass, children: props?.columns?.map((column, colindex) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_react62.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("tr", { className: validityClass, children: props?.columns?.map((column, colindex) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_react63.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
               "td",
               {
                 className: "px-6 py-2 whitespace-normal " + (column.controlType == ViewControlTypes_default.money ? "" : ""),
-                children: column.addhref === true ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+                children: column.addhref === true ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
                   Hyperlink,
                   {
                     className: "",
                     href: `https://${dataitem[column.name]}`,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
                       ViewControl_default,
                       {
                         controlType: column.controlType,
@@ -8263,11 +8566,11 @@ var DataList = (props) => {
                       }
                     )
                   }
-                ) : column.showAsLink ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+                ) : column.showAsLink ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
                   Hyperlink,
                   {
                     href: props.path + dataitem[props.columns[0].name] + "/" + (dataitem.linkUrlSegment ?? column.linkUrlSegment),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
                       ViewControl_default,
                       {
                         controlType: column.controlType,
@@ -8277,7 +8580,7 @@ var DataList = (props) => {
                       }
                     )
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+                ) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
                   ViewControl_default,
                   {
                     controlType: column.controlType,
@@ -8291,10 +8594,10 @@ var DataList = (props) => {
           }) }, index);
         }) })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "pt-4 border-t border-t-gray-50 sticky bottom-0 h-11 mt-2 ", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "text-gray-700", children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "flex space-x-2 items-center", children: [
-          activePageNumber > 1 && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "pt-4 border-t border-t-gray-50 sticky bottom-0 h-11 mt-2 ", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "text-gray-700", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex space-x-2 items-center", children: [
+          activePageNumber > 1 && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
             Hyperlink,
             {
               className: "px-3 py-1 rounded-l-md border border-gray-300 bg-white text-gray-500 hover:bg-gray-200",
@@ -8302,9 +8605,9 @@ var DataList = (props) => {
               children: "Prev"
             }
           ),
-          activePageNumber <= 1 && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "px-3 py-1 rounded-l-md border border-gray-300 bg-gray-200 text-gray-500 hover:bg-gray-200", children: "Prev" }),
+          activePageNumber <= 1 && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "px-3 py-1 rounded-l-md border border-gray-300 bg-gray-200 text-gray-500 hover:bg-gray-200", children: "Prev" }),
           renderPageNumbers(),
-          activePageNumber < pages && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+          activePageNumber < pages && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
             Hyperlink,
             {
               className: "px-3 py-1 rounded-r-md border border-gray-300 bg-white text-gray-500 hover:bg-gray-200",
@@ -8312,19 +8615,19 @@ var DataList = (props) => {
               children: "Next"
             }
           ),
-          activePageNumber >= pages && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "px-3 py-1 rounded-r-md border border-gray-300 bg-gray-200 text-gray-500", children: "Next" })
+          activePageNumber >= pages && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "px-3 py-1 rounded-r-md border border-gray-300 bg-gray-200 text-gray-500", children: "Next" })
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(NoContentView_default, { isDataFound, children: [
-      (props.title || props.filters || props.addLinkHref) && /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(NoContentView_default, { isDataFound, children: [
+      (props.title || props.filters || props.addLinkHref) && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
         "div",
         {
           className: `flex justify-between items-center bg-white pl-6 pr-2 h-14 mb-3 shadow-sm rounded-md border-b border-neutral-200`,
           children: [
-            props.title ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "inline-flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("h2", { className: "text-lg font-semibold text-black", children: props.title }) }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", {}),
-            /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "flex items-center gap-3", children: [
-              props.columns.some((col) => col.isSearchable) && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+            props.title ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "inline-flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("h2", { className: "text-lg font-semibold text-black", children: props.title }) }) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex items-center gap-3", children: [
+              props.columns.some((col) => col.isSearchable) && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
                 InputControl_default,
                 {
                   name: "Search_input",
@@ -8336,7 +8639,7 @@ var DataList = (props) => {
                   }
                 }
               ),
-              props.filters && props.filters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+              props.filters && props.filters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
                 InputControl_default,
                 {
                   name: filter.name,
@@ -8351,15 +8654,15 @@ var DataList = (props) => {
                 },
                 filter.name
               )),
-              props.addLinkHref && /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
+              props.addLinkHref && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
                 Hyperlink,
                 {
                   className: "gap-1",
                   linkType: "Primary" /* Solid */,
                   href: props.addLinkHref,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Icon_default, { name: "plus", className: "w-4 h-4" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "text-sm font-medium", children: props.addLinkText || "Add New" })
+                    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Icon_default, { name: "plus", className: "w-4 h-4" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "text-sm font-medium", children: props.addLinkText || "Add New" })
                   ]
                 }
               )
@@ -8367,8 +8670,8 @@ var DataList = (props) => {
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "flex-grow overflow-y-auto justify-end bg-white rounded shadow h-[75vh]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("table", { className: "w-full divide-y divide-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("thead", { className: "bg-gray-50", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("tr", { children: props?.columns?.map((column) => {
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex-grow overflow-y-auto justify-end bg-white rounded shadow h-[75vh]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("table", { className: "w-full divide-y divide-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("thead", { className: "bg-gray-50", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("tr", { children: props?.columns?.map((column) => {
           let url = builder.getNewOrderByUrl(column.name);
           let icon = "chevronUpDown";
           if (orderBy.includes(`${column.name} desc`)) {
@@ -8378,18 +8681,18 @@ var DataList = (props) => {
             icon = "chevronUp";
             url = builder.getNewOrderByUrl(column.name + " desc");
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
             "th",
             {
               className: "px-6 py-3 text-left font-medium bg-neutral-soft " + (column.enableSorting ? "cursor-pointer " : "") + column.width + (column.controlType == ViewControlTypes_default.money ? " text-right" : ""),
-              children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
                 Hyperlink,
                 {
                   href: column.enableSorting ? url : void 0,
                   className: "text-body-950",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("span", { className: "flex items-center space-x-1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { children: column.label }),
-                    column.enableSorting && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Icon_default, { className: "w-4 h-4", name: icon })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("span", { className: "flex items-center space-x-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { children: column.label }),
+                    column.enableSorting && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Icon_default, { className: "w-4 h-4", name: icon })
                   ] })
                 }
               )
@@ -8397,7 +8700,7 @@ var DataList = (props) => {
             column.name
           );
         }) }) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "w-full text-center bg-transparent pt-5", children: "There are no entries in the table at the moment." })
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "w-full text-center bg-transparent pt-5", children: "There are no entries in the table at the moment." })
       ] })
     ] })
   ] });
@@ -8405,12 +8708,12 @@ var DataList = (props) => {
 var DataList_default = DataList;
 
 // src/components/dataForm/DataListRenderer.tsx
-var import_react63 = __toESM(require("react"));
+var import_react64 = __toESM(require("react"));
 init_ServiceClient();
 init_OdataBuilder();
 init_SelectWithSearchInput();
-var import_navigation3 = require("next/navigation");
-var import_jsx_runtime85 = require("react/jsx-runtime");
+var import_navigation4 = require("next/navigation");
+var import_jsx_runtime86 = require("react/jsx-runtime");
 var viewControlMap = {
   number: ViewControlTypes.number,
   lineText: ViewControlTypes.lineText,
@@ -8465,14 +8768,14 @@ var DataListRenderer = ({
   widgetProps
 }) => {
   const serviceClient = new ServiceClient_default(apiBaseUrl, session);
-  const [columns, setColumns] = (0, import_react63.useState)([]);
-  const [dataset, setDataset] = (0, import_react63.useState)();
-  const [filter, setFilters] = (0, import_react63.useState)([]);
-  const [addLinkHref, setAddLinkHref] = (0, import_react63.useState)("");
-  const [addLinkText, setAddLinkText] = (0, import_react63.useState)("");
-  const [serviceRoute, setServiceRoute] = (0, import_react63.useState)("");
-  const pathname = (0, import_navigation3.usePathname)();
-  (0, import_react63.useEffect)(() => {
+  const [columns, setColumns] = (0, import_react64.useState)([]);
+  const [dataset, setDataset] = (0, import_react64.useState)();
+  const [filter, setFilters] = (0, import_react64.useState)([]);
+  const [addLinkHref, setAddLinkHref] = (0, import_react64.useState)("");
+  const [addLinkText, setAddLinkText] = (0, import_react64.useState)("");
+  const [serviceRoute, setServiceRoute] = (0, import_react64.useState)("");
+  const pathname = (0, import_navigation4.usePathname)();
+  (0, import_react64.useEffect)(() => {
     if (!formDefinition) return;
     setColumns(mapApiToColumns(formDefinition));
     setFilters(mapApiToFilters(formDefinition));
@@ -8485,7 +8788,7 @@ var DataListRenderer = ({
     setAddLinkHref(resolvedAddLinkHref);
     setAddLinkText(formDefinition?.siteFormDataList?.addLinkText ?? "");
   }, [formDefinition, params]);
-  (0, import_react63.useEffect)(() => {
+  (0, import_react64.useEffect)(() => {
     const fetchData = async () => {
       if (!serviceRoute) return;
       const resolvedRoute = resolveRoutePlaceholders2(serviceRoute, params);
@@ -8505,13 +8808,13 @@ var DataListRenderer = ({
       isActive: landingPageUrl === pathname
     };
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_react63.default.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_react64.default.Fragment, { children: [
     resolvedTabs.length > 0 && // <NavigationTabsV2
     //   tabs={resolvedTabs}
     //   params={(widgetProps?.params ?? params) as Record<string, any>}
     // />
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(NavigationTabsV2_default, { tabs, params: widgetProps.params }),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(NavigationTabsV2_default, { tabs, params: widgetProps.params }),
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
       DataList_default,
       {
         addLinkHref,
@@ -8533,13 +8836,15 @@ var DataListRenderer_default = DataListRenderer;
 init_InputControlType();
 
 // src/components/dataForm/DataForm.tsx
-var import_react65 = __toESM(require("react"));
+var import_react66 = __toESM(require("react"));
+init_InputControl();
 init_Icon();
 init_Button();
 init_StyleTypes();
 
 // src/components/dataForm/DataFormChildSection.tsx
-var import_react64 = __toESM(require("react"));
+var import_react65 = __toESM(require("react"));
+init_InputControl();
 
 // src/components/dataForm/StyleTypes.tsx
 var StyleTypes2 = /* @__PURE__ */ ((StyleTypes3) => {
@@ -8566,7 +8871,7 @@ var FORM_CHILD_ONE_TO_ONE_UPDATE = "FORM_CHILD_ONE_TO_ONE_UPDATE";
 var FORM_CHILD_ROW_ADD = "FORM_CHILD_ROW_ADD";
 
 // src/components/dataForm/DataFormChildSection.tsx
-var import_jsx_runtime86 = require("react/jsx-runtime");
+var import_jsx_runtime87 = require("react/jsx-runtime");
 var DataFormChildSection = (props) => {
   const { section } = props;
   const isOneToOne = section.relationshipType === "one-to-one";
@@ -8578,7 +8883,7 @@ var DataFormChildSection = (props) => {
     return childItems.map((item, originalIndex) => ({ item, originalIndex })).filter((x) => !x.item.isDeleted) || [];
   };
   const childItemsToRender = getChildItemsForRendering();
-  const handleChildInputChange = (0, import_react64.useCallback)(
+  const handleChildInputChange = (0, import_react65.useCallback)(
     (updatedValues) => {
       if (isOneToOne) {
         props.callback({
@@ -8605,7 +8910,7 @@ var DataFormChildSection = (props) => {
     },
     [props, isOneToOne, childItemsToRender]
   );
-  const onAddRow = (0, import_react64.useCallback)(() => {
+  const onAddRow = (0, import_react65.useCallback)(() => {
     props.callback({
       sectionName: props.section.name,
       actionType: FORM_CHILD_ROW_ADD,
@@ -8614,7 +8919,7 @@ var DataFormChildSection = (props) => {
       rowIndex: -1
     });
   }, [props]);
-  const onDeleteRow = (0, import_react64.useCallback)(
+  const onDeleteRow = (0, import_react65.useCallback)(
     (filteredIndex) => {
       const visibleItem = childItemsToRender[filteredIndex];
       if (visibleItem) {
@@ -8634,14 +8939,14 @@ var DataFormChildSection = (props) => {
     childItemsToRender,
     allChildItems: childItems
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_react64.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "rounded border-neutral-200 border px-6 py-4 mb-2", children: [
-    section.sectionTitle && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "mb-4 text-lg font-medium text-body-950", children: section.sectionTitle }),
-    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "flex-grow flex flex-col justify-between overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex flex-col justify-between gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("table", { className: "w-full border-separate divide-y divide-gray-200", children: [
-        (!isOneToOne || childItemsToRender.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("thead", { className: "", children: section.sectionRows.map((sectionRow, sectionRowIndex) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("tr", { className: "", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_react65.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "rounded border-neutral-200 border px-6 py-4 mb-2", children: [
+    section.sectionTitle && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "mb-4 text-lg font-medium text-body-950", children: section.sectionTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "flex-grow flex flex-col justify-between overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "flex flex-col justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("table", { className: "w-full border-separate divide-y divide-gray-200", children: [
+        (!isOneToOne || childItemsToRender.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("thead", { className: "", children: section.sectionRows.map((sectionRow, sectionRowIndex) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("tr", { className: "", children: [
             sectionRow.elements.map((field, index) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
                 "th",
                 {
                   className: "py-3 font-normal text-left",
@@ -8650,21 +8955,21 @@ var DataFormChildSection = (props) => {
                 field.name
               );
             }),
-            !section.readonly && !isOneToOne && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("th", { className: "py-3 font-normal text-left", children: "Actions" })
+            !section.readonly && !isOneToOne && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("th", { className: "py-3 font-normal text-left", children: "Actions" })
           ] }, sectionRowIndex);
         }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("tbody", { className: "divide-y divide-gray-200", children: childItemsToRender.map((visibleItem, filteredIndex) => {
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("tbody", { className: "divide-y divide-gray-200", children: childItemsToRender.map((visibleItem, filteredIndex) => {
           const { item, originalIndex } = visibleItem;
           const rowKey = originalIndex;
-          return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_react64.default.Fragment, { children: section.sectionRows.map(
+          return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_react65.default.Fragment, { children: section.sectionRows.map(
             (sectionRow, sectionRowIndex) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
                 "tr",
                 {
                   className: "",
                   children: [
                     sectionRow.elements.map((field, index) => {
-                      return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "w-11/12", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+                      return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "w-11/12", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
                         InputControl_default,
                         {
                           index: filteredIndex,
@@ -8684,7 +8989,7 @@ var DataFormChildSection = (props) => {
                         }
                       ) }) }) }, field.name);
                     }),
-                    !section.readonly && !isOneToOne && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+                    !section.readonly && !isOneToOne && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
                       ClientButton_default,
                       {
                         ButtonType: StyleTypes2.Hollow,
@@ -8693,7 +8998,7 @@ var DataFormChildSection = (props) => {
                         },
                         dataRole: "delete",
                         tabIndex: -1,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
                           Icon_default,
                           {
                             className: "w-4 h-4",
@@ -8710,7 +9015,7 @@ var DataFormChildSection = (props) => {
           ) }, rowKey);
         }) })
       ] }) }),
-      !section.readonly && !isOneToOne && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "ml-1", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+      !section.readonly && !isOneToOne && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "ml-1", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
         ClientButton_default,
         {
           ButtonType: "Link" /* Link */,
@@ -8725,9 +9030,9 @@ var DataFormChildSection = (props) => {
 var DataFormChildSection_default = DataFormChildSection;
 
 // src/components/dataForm/DataForm.tsx
-var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_jsx_runtime88 = require("react/jsx-runtime");
 var DataForm = (props) => {
-  const formRef = (0, import_react65.useRef)(null);
+  const formRef = (0, import_react66.useRef)(null);
   console.log(props.dataItem, "dssads");
   const initialState = {
     inputValues: {},
@@ -8736,9 +9041,9 @@ var DataForm = (props) => {
   const childInitialState = {
     inputValues: []
   };
-  const [formState, dispatch] = (0, import_react65.useReducer)(FormReducer_default, initialState);
+  const [formState, dispatch] = (0, import_react66.useReducer)(FormReducer_default, initialState);
   console.log(props.sections, "sections");
-  const clearHiddenChildSections = (0, import_react65.useCallback)(
+  const clearHiddenChildSections = (0, import_react66.useCallback)(
     (changedProperty, newValues) => {
       if (!props.sections) return;
       const allChildSections = [];
@@ -8776,7 +9081,7 @@ var DataForm = (props) => {
     },
     [props.sections, formState.inputValues]
   );
-  const handleInputChange = (0, import_react65.useCallback)(
+  const handleInputChange = (0, import_react66.useCallback)(
     async (updatedValues) => {
       dispatch({
         type: FORM_INPUT_UPDATE,
@@ -8791,7 +9096,7 @@ var DataForm = (props) => {
     },
     [dispatch, formState.inputValues, clearHiddenChildSections]
   );
-  const fetchData = (0, import_react65.useCallback)(async () => {
+  const fetchData = (0, import_react66.useCallback)(async () => {
     if (!props.rules) return;
     if (Object.keys(formState.inputValues).length === 0) {
       return;
@@ -8822,7 +9127,7 @@ var DataForm = (props) => {
       console.error("Error fetching data:", error);
     }
   }, [formState.lastPropertyChanged, formState.inputValues]);
-  (0, import_react65.useEffect)(() => {
+  (0, import_react66.useEffect)(() => {
     fetchData();
   }, [formState.inputValues, formState.lastPropertyChanged]);
   function replacePlaceholders(template, context, params) {
@@ -8842,7 +9147,7 @@ var DataForm = (props) => {
       }
     );
   }
-  const handleChildSectionChangeCallback = (0, import_react65.useCallback)(
+  const handleChildSectionChangeCallback = (0, import_react66.useCallback)(
     (params) => {
       dispatch({
         type: params.actionType,
@@ -8887,7 +9192,7 @@ var DataForm = (props) => {
     });
     return cloned;
   }
-  const onClick = (0, import_react65.useCallback)(async () => {
+  const onClick = (0, import_react66.useCallback)(async () => {
     if (props.onClick) {
       const isEdit = props.dataItem && Object.keys(props.dataItem).length > 0;
       const normalizedValues = normalizeChildSections(
@@ -8903,21 +9208,21 @@ var DataForm = (props) => {
       return { isSuccessful: true };
     }
   }, [formState, props]);
-  const handleAdditionalOnClick = (0, import_react65.useCallback)(async () => {
+  const handleAdditionalOnClick = (0, import_react66.useCallback)(async () => {
     if (props.additionalActions?.onClick) {
       return await props.additionalActions.onClick(formState);
     } else {
       return { isSuccessful: true, message: "Action completed successfully" };
     }
   }, [formState, props]);
-  const onDelete = (0, import_react65.useCallback)(async () => {
+  const onDelete = (0, import_react66.useCallback)(async () => {
     if (props.onDelete) {
       return await props.onDelete(formState);
     } else {
       return { isSuccessful: true };
     }
   }, [formState, props]);
-  (0, import_react65.useEffect)(() => {
+  (0, import_react66.useEffect)(() => {
     if (props.dataItem) {
       dispatch({
         type: FORM_INITIAL_UPDATE,
@@ -8945,19 +9250,19 @@ var DataForm = (props) => {
       return false;
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_react65.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "flex-grow flex flex-col", children: [
-    props.title && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "inline-flex items-center gap-2 px-6 py-3 border border-neutral-200 bg-white shadow-sm rounded-t-md", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_react66.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "flex-grow flex flex-col", children: [
+    props.title && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "inline-flex items-center gap-2 px-6 py-3 border border-neutral-200 bg-white shadow-sm rounded-t-md", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
       "div",
       {
         className: "inline-flex items-center gap-2 cursor-pointer",
         onClick: () => window.history.back(),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Icon_default, { name: "chevronLeft", className: "w-4 h-4 text-primary-800" }),
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("h2", { className: "text-lg font-semibold text-primary-800", children: props.title })
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Icon_default, { name: "chevronLeft", className: "w-4 h-4 text-primary-800" }),
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("h2", { className: "text-lg font-semibold text-primary-800", children: props.title })
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
       "form",
       {
         className: "group space-y-6 pb-6 overflow-y-auto",
@@ -8978,8 +9283,8 @@ var DataForm = (props) => {
             }
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "flex flex-col gap-6", children: props.sections?.map((section, sectionIndex) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_react65.default.Fragment, { children: !section.isChildSection && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: " rounded-b-lg bg-white shadow border-neutral-200 border px-8 py-6 ", children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "flex flex-col gap-6", children: props.sections?.map((section, sectionIndex) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_react66.default.Fragment, { children: !section.isChildSection && /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: " rounded-b-lg bg-white shadow border-neutral-200 border px-8 py-6 ", children: [
             section.sectionRows?.map(
               (sectionRow, sectionRowIndex) => {
                 const elementsCount = sectionRow.elements.length;
@@ -8990,14 +9295,14 @@ var DataForm = (props) => {
                     sectionRow.visible
                   );
                 }
-                return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_react65.default.Fragment, { children: isVisible && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "lg:flex gap-14 flex-1 mb-4 ", children: sectionRow.elements.map((field, index) => {
-                  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_react66.default.Fragment, { children: isVisible && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "lg:flex gap-14 flex-1 mb-4 ", children: sectionRow.elements.map((field, index) => {
+                  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
                     "div",
                     {
                       className: sectionRow.grow ? "grow" : "",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { children: field.controlType }),
-                        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { children: field.controlType }),
+                        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
                           InputControl_default,
                           {
                             name: field.name,
@@ -9027,12 +9332,12 @@ var DataForm = (props) => {
                 }) }) }, sectionRowIndex);
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { children: section.childSections?.map(
+            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { children: section.childSections?.map(
               (childSection, childSectionIndex) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { children: childSection.name && evalutateCondition(
+                return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { children: childSection.name && evalutateCondition(
                   formState.inputValues,
                   childSection.visible
-                ) && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+                ) && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
                   DataFormChildSection_default,
                   {
                     section: childSection,
@@ -9047,8 +9352,8 @@ var DataForm = (props) => {
         }) })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "flex px-6 py-3 mt-2 mb-2 justify-end  items-center gap-5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { children: props.additionalActions && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "flex px-6 py-3 mt-2 mb-2 justify-end  items-center gap-5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { children: props.additionalActions && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
         Button_default,
         {
           ButtonType: "PrimaryHollow" /* Hollow */,
@@ -9056,7 +9361,7 @@ var DataForm = (props) => {
           children: props.additionalActions.title
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { children: props.onDelete && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { children: props.onDelete && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
         Button_default,
         {
           ButtonType: "PrimaryHollow" /* Hollow */,
@@ -9067,7 +9372,7 @@ var DataForm = (props) => {
           children: "Delete"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { children: props.onClick && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { children: props.onClick && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
         Button_default,
         {
           onValidate,
@@ -9085,7 +9390,7 @@ var DataForm_default = DataForm;
 
 // src/components/dataForm/DataFormRenderer.tsx
 init_ServiceClient();
-var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_jsx_runtime89 = require("react/jsx-runtime");
 function getAction(actions, code) {
   return actions?.find((a) => a.actionCode === code);
 }
@@ -9111,9 +9416,9 @@ var DataFormRenderer = ({
     "Delete"
   );
   const hasDataItem = dataItem && Object.keys(dataItem).length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "flex-grow flex flex-col", children: [
-    widgetProps && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(NavigationTabsV2_default, { tabs, params: widgetProps.params }),
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "flex-grow flex flex-col", children: [
+    widgetProps && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(NavigationTabsV2_default, { tabs, params: widgetProps.params }),
+    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
       DataForm_default,
       {
         title: !isAddPage ? "Edit " + formDefinition.formTitle + "- v2" : "Add " + formDefinition.formTitle + "- v2",