@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260615115948 → 0.8.1-dev.20260616044503

package/dist/index.js

@@ -5505,17 +5505,36 @@ var getNestedValue3 = (obj, path) => {
     return current && current[key] !== void 0 ? current[key] : void 0;
   }, obj);
 };
-{
-}
-function generateCompleteBackgroundString(layers, apiBaseUrl) {
+function generateCompleteBackgroundString(layers, apiBaseUrl, dataItem) {
   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 "";
+      let assetUrl = imageValue.assetUrl || "";
+      if (layer.datafield && dataItem) {
+        const fieldValue = getNestedValue3(
+          dataItem,
+          layer.datafield
+        );
+        if (typeof fieldValue === "string" && fieldValue.trim() !== "") {
+          assetUrl = fieldValue;
+        } else if (fieldValue && typeof fieldValue === "object" && fieldValue.assetUrl) {
+          assetUrl = fieldValue.assetUrl;
+        } else if (Array.isArray(fieldValue)) {
+          const matchedAsset = layer.tag ? fieldValue.find(
+            (x) => x?.tag?.toLowerCase() === layer.tag?.toLowerCase()
+          ) : fieldValue[0];
+          if (matchedAsset?.assetUrl) {
+            assetUrl = matchedAsset.assetUrl;
+          }
+        }
+      }
+      if (!assetUrl) {
+        return "";
+      }
       const url = `url('${AssetUtility_default.resolveUrl(
         apiBaseUrl,
-        imageValue.assetUrl
+        assetUrl
       )}')`;
       const repeat = layer.repeat || "no-repeat";
       const position = layer.position || "center";
@@ -5525,7 +5544,9 @@ function generateCompleteBackgroundString(layers, apiBaseUrl) {
     }
     if (layer.type === "gradient" && typeof layer.value === "object") {
       const gradient = layer.value;
-      if (!gradient.colors || !gradient.direction) return "";
+      if (!gradient.colors || !gradient.direction) {
+        return "";
+      }
       const colors = gradient.colors.map(
         (colorStop) => `color-mix(in srgb, ${colorStop.color}, transparent ${colorStop.transparency ?? 0}%) ${colorStop.start || "0%"}`
       ).join(", ");
@@ -5628,7 +5649,6 @@ var DivContainer = async (props) => {
   const tabletStyles = props.node.tabletCssProperties;
   const dataBindingProperties = props.node.dataBinding;
   const updatedStyles = convertKeysToCamelCase(styles);
-  const background = generateCompleteBackgroundString(props.node.backgroundLayers, props.assetBaseUrl);
   let containerPaddingClass = "";
   if (props.node.containerPadding == "small") {
     containerPaddingClass = "container-small";
@@ -5638,14 +5658,6 @@ var DivContainer = async (props) => {
   {
   }
   const updatedStyle = { ...updatedStyles };
-  const backgroundStyle = background && background !== "" ? { background } : {};
-  const combinedStyles = {
-    ...backgroundStyle
-  };
-  if (props.node.enableBackgroundClipText) {
-    combinedStyles.WebkitBackgroundClip = "text";
-    combinedStyles.backgroundClip = "text";
-  }
   const guid = "css" + crypto.randomUUID().toLocaleLowerCase();
   const { enterAnimation, exitAnimation, hoverAnimation } = props.node;
   let animationCSS = "";
@@ -5766,6 +5778,20 @@ var DivContainer = async (props) => {
     }
     return [props.dataitem];
   })();
+  const backgroundDataItem = dataToRender.length > 0 ? dataToRender[0] : props.dataitem;
+  const background = generateCompleteBackgroundString(
+    props.node.backgroundLayers,
+    props.assetBaseUrl,
+    backgroundDataItem
+  );
+  const backgroundStyle = background && background !== "" ? { background } : {};
+  const combinedStyles = {
+    ...backgroundStyle
+  };
+  if (props.node.enableBackgroundClipText) {
+    combinedStyles.WebkitBackgroundClip = "text";
+    combinedStyles.backgroundClip = "text";
+  }
   const renderLink = result && props.node.dataBinding?.responseType === "array" ? true : false;
   {
   }

package/dist/index.mjs

@@ -3899,17 +3899,36 @@ var getNestedValue3 = (obj, path) => {
     return current && current[key] !== void 0 ? current[key] : void 0;
   }, obj);
 };
-{
-}
-function generateCompleteBackgroundString(layers, apiBaseUrl) {
+function generateCompleteBackgroundString(layers, apiBaseUrl, dataItem) {
   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 "";
+      let assetUrl = imageValue.assetUrl || "";
+      if (layer.datafield && dataItem) {
+        const fieldValue = getNestedValue3(
+          dataItem,
+          layer.datafield
+        );
+        if (typeof fieldValue === "string" && fieldValue.trim() !== "") {
+          assetUrl = fieldValue;
+        } else if (fieldValue && typeof fieldValue === "object" && fieldValue.assetUrl) {
+          assetUrl = fieldValue.assetUrl;
+        } else if (Array.isArray(fieldValue)) {
+          const matchedAsset = layer.tag ? fieldValue.find(
+            (x) => x?.tag?.toLowerCase() === layer.tag?.toLowerCase()
+          ) : fieldValue[0];
+          if (matchedAsset?.assetUrl) {
+            assetUrl = matchedAsset.assetUrl;
+          }
+        }
+      }
+      if (!assetUrl) {
+        return "";
+      }
       const url = `url('${AssetUtility_default.resolveUrl(
         apiBaseUrl,
-        imageValue.assetUrl
+        assetUrl
       )}')`;
       const repeat = layer.repeat || "no-repeat";
       const position = layer.position || "center";
@@ -3919,7 +3938,9 @@ function generateCompleteBackgroundString(layers, apiBaseUrl) {
     }
     if (layer.type === "gradient" && typeof layer.value === "object") {
       const gradient = layer.value;
-      if (!gradient.colors || !gradient.direction) return "";
+      if (!gradient.colors || !gradient.direction) {
+        return "";
+      }
       const colors = gradient.colors.map(
         (colorStop) => `color-mix(in srgb, ${colorStop.color}, transparent ${colorStop.transparency ?? 0}%) ${colorStop.start || "0%"}`
       ).join(", ");
@@ -4022,7 +4043,6 @@ var DivContainer = async (props) => {
   const tabletStyles = props.node.tabletCssProperties;
   const dataBindingProperties = props.node.dataBinding;
   const updatedStyles = convertKeysToCamelCase(styles);
-  const background = generateCompleteBackgroundString(props.node.backgroundLayers, props.assetBaseUrl);
   let containerPaddingClass = "";
   if (props.node.containerPadding == "small") {
     containerPaddingClass = "container-small";
@@ -4032,14 +4052,6 @@ var DivContainer = async (props) => {
   {
   }
   const updatedStyle = { ...updatedStyles };
-  const backgroundStyle = background && background !== "" ? { background } : {};
-  const combinedStyles = {
-    ...backgroundStyle
-  };
-  if (props.node.enableBackgroundClipText) {
-    combinedStyles.WebkitBackgroundClip = "text";
-    combinedStyles.backgroundClip = "text";
-  }
   const guid = "css" + crypto.randomUUID().toLocaleLowerCase();
   const { enterAnimation, exitAnimation, hoverAnimation } = props.node;
   let animationCSS = "";
@@ -4160,6 +4172,20 @@ var DivContainer = async (props) => {
     }
     return [props.dataitem];
   })();
+  const backgroundDataItem = dataToRender.length > 0 ? dataToRender[0] : props.dataitem;
+  const background = generateCompleteBackgroundString(
+    props.node.backgroundLayers,
+    props.assetBaseUrl,
+    backgroundDataItem
+  );
+  const backgroundStyle = background && background !== "" ? { background } : {};
+  const combinedStyles = {
+    ...backgroundStyle
+  };
+  if (props.node.enableBackgroundClipText) {
+    combinedStyles.WebkitBackgroundClip = "text";
+    combinedStyles.backgroundClip = "text";
+  }
   const renderLink = result && props.node.dataBinding?.responseType === "array" ? true : false;
   {
   }

package/package.json

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