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

package/dist/index.d.mts

@@ -204,6 +204,8 @@ interface PageBodyRendererProps {
     donotApplyContainerClass?: boolean;
     donotApplyContainerLargeClass?: boolean;
     widgetRegistry?: Record<string, React.ComponentType<any>>;
+    serviceClient?: ServiceClientInterface;
+    resolveAssetUrl?: (assetUrl: string) => string | undefined;
 }
 declare const PageBodyRenderer: React.FC<PageBodyRendererProps>;
 

package/dist/index.d.ts

@@ -204,6 +204,8 @@ interface PageBodyRendererProps {
     donotApplyContainerClass?: boolean;
     donotApplyContainerLargeClass?: boolean;
     widgetRegistry?: Record<string, React.ComponentType<any>>;
+    serviceClient?: ServiceClientInterface;
+    resolveAssetUrl?: (assetUrl: string) => string | undefined;
 }
 declare const PageBodyRenderer: React.FC<PageBodyRendererProps>;
 

package/dist/index.js

@@ -4017,7 +4017,7 @@ function EnterAnimationClient({ hasEnterAnimation, children }) {
 }
 
 // src/components/Slider.tsx
-var import_react53 = require("react");
+var import_react53 = __toESM(require("react"));
 var import_jsx_runtime67 = require("react/jsx-runtime");
 var Slider = ({
   children,
@@ -4112,13 +4112,16 @@ var Slider = ({
   };
   const translateX = -currentSlide * (100 / slidesToShowState);
   const slides = import_react53.Children.map(children, (child, index) => {
+    if (!import_react53.default.isValidElement(child)) return null;
+    const childProps = child.props;
+    const mergedClassName = `${childProps.className ?? ""} w-full`.trim();
     return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       "div",
       {
         className: `flex-none ${scaleOnHover ? "group hover:z-50" : ""} relative`,
         style: { width: `calc(${100 / slidesToShowState}%)`, paddingRight: gap },
         children: (0, import_react53.cloneElement)(child, {
-          className: `w-full`
+          className: mergedClassName
         })
       },
       index
@@ -4379,16 +4382,15 @@ var getNestedValue = (obj, path) => {
     return current && current[key] !== void 0 ? current[key] : void 0;
   }, obj);
 };
-function generateCompleteBackgroundString(layers) {
+function generateCompleteBackgroundString(layers, resolveAssetUrl, apiBaseUrl) {
   if (!layers || !Array.isArray(layers)) return "";
   return layers.filter((layer) => layer && layer.type && layer.value).map((layer) => {
     if (layer.type === "image" && typeof layer.value === "object") {
       const imageValue = layer.value;
       if (!imageValue.assetUrl) return "";
-      const url = `url('${AssetUtility_default.resolveUrl(
-        ApiPathServerUtility.getApiPath(),
-        imageValue.assetUrl
-      )}')`;
+      const resolvedAssetUrl = resolveAssetUrl?.(imageValue.assetUrl) ?? AssetUtility_default.resolveUrl(apiBaseUrl, imageValue.assetUrl);
+      if (!resolvedAssetUrl) return "";
+      const url = `url('${resolvedAssetUrl}')`;
       const repeat = layer.repeat || "no-repeat";
       const position = layer.position || "center";
       const size = layer.size || "auto";
@@ -4472,7 +4474,11 @@ var DivContainer = async (props) => {
   const mobileStyles = props.node.mobileCssProperties;
   const dataBindingProperties = props.node.dataBinding;
   const updatedStyles = convertKeysToCamelCase(styles);
-  var background = generateCompleteBackgroundString(props.node.backgroundLayers);
+  var background = generateCompleteBackgroundString(
+    props.node.backgroundLayers,
+    props.resolveAssetUrl,
+    props.apiBaseUrl
+  );
   let containerPaddingClass = "";
   if (props.node.containerPadding == "small") {
     containerPaddingClass = "container-small";
@@ -4515,7 +4521,6 @@ var DivContainer = async (props) => {
   let response = null;
   let childCollectionData = null;
   if (dataBindingProperties) {
-    const serviceClient = new ServiceClient(props.apiBaseUrl, props.session);
     endpoint = dataBindingProperties.dataSource;
     endpoint = endpoint.replace(/\{(\w+)\}/g, (_, key) => {
       return props.routeParameters?.[key] ?? `{${key}}`;
@@ -4527,9 +4532,15 @@ var DivContainer = async (props) => {
         endpoint += separator + odataString;
       }
     }
-    response = await serviceClient.get(endpoint);
-    result = response?.result;
-    if (dataBindingProperties.showNoResultsMessage && (result === void 0 || result.length == 0)) {
+    if (props.fetchData) {
+      response = await props.fetchData(endpoint);
+      result = response?.result;
+    } else {
+      console.warn(
+        "DivContainer data binding needs `fetchData` prop but none was provided."
+      );
+    }
+    if (dataBindingProperties.showNoResultsMessage && (result === void 0 || Array.isArray(result) && result.length == 0)) {
       return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(NoDataFound_default, {});
     }
     if (dataBindingProperties.childCollectionName && props.dataitem) {
@@ -4551,6 +4562,8 @@ var DivContainer = async (props) => {
         host: props2.host,
         path: props2.path,
         apiBaseUrl: props2.apiBaseUrl,
+        serviceClient: props2.serviceClient,
+        resolveAssetUrl: props2.resolveAssetUrl,
         breadcrumb: props2.breadcrumb,
         dataitem,
         href
@@ -4700,7 +4713,9 @@ var PageBodyRenderer = (props) => {
         host: props.host,
         path: props.path,
         apiBaseUrl: props.apiBaseUrl,
-        widgetRegistry: props.widgetRegistry
+        widgetRegistry: props.widgetRegistry,
+        serviceClient: props.serviceClient,
+        resolveAssetUrl: props.resolveAssetUrl
       }
     ) }) : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_react55.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
       SelectedNode,
@@ -4712,7 +4727,9 @@ var PageBodyRenderer = (props) => {
         host: props.host,
         path: props.path,
         apiBaseUrl: props.apiBaseUrl,
-        widgetRegistry: props.widgetRegistry
+        widgetRegistry: props.widgetRegistry,
+        serviceClient: props.serviceClient,
+        resolveAssetUrl: props.resolveAssetUrl
       }
     ) }) }) }, index);
   }) });

package/dist/index.mjs

@@ -3985,7 +3985,7 @@ function EnterAnimationClient({ hasEnterAnimation, children }) {
 }
 
 // src/components/Slider.tsx
-import { useState as useState11, useEffect as useEffect11, Children, cloneElement } from "react";
+import React52, { useState as useState11, useEffect as useEffect11, Children, cloneElement } from "react";
 import { Fragment as Fragment8, jsx as jsx67, jsxs as jsxs33 } from "react/jsx-runtime";
 var Slider = ({
   children,
@@ -4080,13 +4080,16 @@ var Slider = ({
   };
   const translateX = -currentSlide * (100 / slidesToShowState);
   const slides = Children.map(children, (child, index) => {
+    if (!React52.isValidElement(child)) return null;
+    const childProps = child.props;
+    const mergedClassName = `${childProps.className ?? ""} w-full`.trim();
     return /* @__PURE__ */ jsx67(
       "div",
       {
         className: `flex-none ${scaleOnHover ? "group hover:z-50" : ""} relative`,
         style: { width: `calc(${100 / slidesToShowState}%)`, paddingRight: gap },
         children: cloneElement(child, {
-          className: `w-full`
+          className: mergedClassName
         })
       },
       index
@@ -4347,16 +4350,15 @@ var getNestedValue = (obj, path) => {
     return current && current[key] !== void 0 ? current[key] : void 0;
   }, obj);
 };
-function generateCompleteBackgroundString(layers) {
+function generateCompleteBackgroundString(layers, resolveAssetUrl, apiBaseUrl) {
   if (!layers || !Array.isArray(layers)) return "";
   return layers.filter((layer) => layer && layer.type && layer.value).map((layer) => {
     if (layer.type === "image" && typeof layer.value === "object") {
       const imageValue = layer.value;
       if (!imageValue.assetUrl) return "";
-      const url = `url('${AssetUtility_default.resolveUrl(
-        ApiPathServerUtility.getApiPath(),
-        imageValue.assetUrl
-      )}')`;
+      const resolvedAssetUrl = resolveAssetUrl?.(imageValue.assetUrl) ?? AssetUtility_default.resolveUrl(apiBaseUrl, imageValue.assetUrl);
+      if (!resolvedAssetUrl) return "";
+      const url = `url('${resolvedAssetUrl}')`;
       const repeat = layer.repeat || "no-repeat";
       const position = layer.position || "center";
       const size = layer.size || "auto";
@@ -4440,7 +4442,11 @@ var DivContainer = async (props) => {
   const mobileStyles = props.node.mobileCssProperties;
   const dataBindingProperties = props.node.dataBinding;
   const updatedStyles = convertKeysToCamelCase(styles);
-  var background = generateCompleteBackgroundString(props.node.backgroundLayers);
+  var background = generateCompleteBackgroundString(
+    props.node.backgroundLayers,
+    props.resolveAssetUrl,
+    props.apiBaseUrl
+  );
   let containerPaddingClass = "";
   if (props.node.containerPadding == "small") {
     containerPaddingClass = "container-small";
@@ -4483,7 +4489,6 @@ var DivContainer = async (props) => {
   let response = null;
   let childCollectionData = null;
   if (dataBindingProperties) {
-    const serviceClient = new ServiceClient(props.apiBaseUrl, props.session);
     endpoint = dataBindingProperties.dataSource;
     endpoint = endpoint.replace(/\{(\w+)\}/g, (_, key) => {
       return props.routeParameters?.[key] ?? `{${key}}`;
@@ -4495,9 +4500,15 @@ var DivContainer = async (props) => {
         endpoint += separator + odataString;
       }
     }
-    response = await serviceClient.get(endpoint);
-    result = response?.result;
-    if (dataBindingProperties.showNoResultsMessage && (result === void 0 || result.length == 0)) {
+    if (props.fetchData) {
+      response = await props.fetchData(endpoint);
+      result = response?.result;
+    } else {
+      console.warn(
+        "DivContainer data binding needs `fetchData` prop but none was provided."
+      );
+    }
+    if (dataBindingProperties.showNoResultsMessage && (result === void 0 || Array.isArray(result) && result.length == 0)) {
       return /* @__PURE__ */ jsx69(NoDataFound_default, {});
     }
     if (dataBindingProperties.childCollectionName && props.dataitem) {
@@ -4519,6 +4530,8 @@ var DivContainer = async (props) => {
         host: props2.host,
         path: props2.path,
         apiBaseUrl: props2.apiBaseUrl,
+        serviceClient: props2.serviceClient,
+        resolveAssetUrl: props2.resolveAssetUrl,
         breadcrumb: props2.breadcrumb,
         dataitem,
         href
@@ -4668,7 +4681,9 @@ var PageBodyRenderer = (props) => {
         host: props.host,
         path: props.path,
         apiBaseUrl: props.apiBaseUrl,
-        widgetRegistry: props.widgetRegistry
+        widgetRegistry: props.widgetRegistry,
+        serviceClient: props.serviceClient,
+        resolveAssetUrl: props.resolveAssetUrl
       }
     ) }) : /* @__PURE__ */ jsx70(React54.Fragment, { children: /* @__PURE__ */ jsx70(
       SelectedNode,
@@ -4680,7 +4695,9 @@ var PageBodyRenderer = (props) => {
         host: props.host,
         path: props.path,
         apiBaseUrl: props.apiBaseUrl,
-        widgetRegistry: props.widgetRegistry
+        widgetRegistry: props.widgetRegistry,
+        serviceClient: props.serviceClient,
+        resolveAssetUrl: props.resolveAssetUrl
       }
     ) }) }) }, index);
   }) });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acoustte-digital-services/digitalstore-controls-dev",
-  "version": "0.8.1-dev.20260323055150",
+  "version": "0.8.1-dev.20260323091914",
   "description": "Reusable React components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",