@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260328114717 → 0.8.1-dev.20260402061511

package/dist/index.js

@@ -5119,15 +5119,18 @@ var HlsPlayer1 = (0, import_dynamic5.default)(() => Promise.resolve().then(() =>
   ssr: false
 });
 var parseMaybeNumber = (value) => {
-  if (typeof value === "number")
+  if (typeof value === "number") {
     return Number.isFinite(value) ? value : void 0;
+  }
   if (typeof value !== "string") return void 0;
   const n = Number(value);
   return Number.isFinite(n) ? n : void 0;
 };
 var shouldRenderForDevice = (imageDevice, currentDevice) => {
   if (!imageDevice) return true;
-  return imageDevice == currentDevice;
+  const normalizedImageDevice = imageDevice.toString().toLowerCase();
+  const normalizedCurrentDevice = currentDevice.toString().toLowerCase();
+  return normalizedImageDevice === normalizedCurrentDevice;
 };
 var ImageGalleryNode = (props) => {
   const resolveImageUrl = (imageUrl) => {
@@ -5163,9 +5166,8 @@ var ImageGalleryNode = (props) => {
     const alt = img.title || "Gallery image";
     const styles = {};
     if (img.height) styles.height = img.height;
-    if (img.borderRadius)
-      styles.borderRadius = img.borderRadius;
     if (img.width) styles.width = img.width;
+    if (img.borderRadius) styles.borderRadius = img.borderRadius;
     return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "max-w-full", children: isHls ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       HlsPlayer1,
       {
@@ -5193,7 +5195,7 @@ var ImageGalleryNode = (props) => {
           alt
         }
       )
-    ) }, `${img.imageUrl}-${idx}`);
+    ) }, `${idx}-${img.imageUrl}`);
   }) });
 };
 var ImageGalleryNode_default = ImageGalleryNode;
@@ -5251,17 +5253,13 @@ function generateCompleteBackgroundString(layers, apiBaseUrl) {
     return "";
   }).filter((bg) => bg.trim() !== "").join(", ");
 }
-var generateCssString = (guid, stylesObject, mobileStylesObject) => {
-  {
-  }
-  const gridColumns = stylesObject.gridTemplateColumns ? stylesObject.gridTemplateColumns.match(/\d+/g) : [];
-  const hasGridProperties = gridColumns.length > 0;
+var generateCssString = (guid, stylesObject, tabletStylesObject, mobileStylesObject) => {
+  const gridColumns = stylesObject?.gridTemplateColumns ? String(stylesObject.gridTemplateColumns).match(/\d+/g) ?? [] : [];
+  const hasGridProperties = (gridColumns?.length ?? 0) > 0;
   const largeCols = hasGridProperties ? parseInt(gridColumns[0]) : 4;
   const tabletColumns = hasGridProperties ? Math.ceil(parseInt(gridColumns[0]) / 2) : 2;
   const mobileColumns = 1;
-  {
-  }
-  const cssRules = Object.entries(stylesObject).filter(([_, value]) => value !== void 0 && value !== "").map(([key, value]) => {
+  const cssRules = Object.entries(stylesObject || {}).filter(([_, value]) => value !== void 0 && value !== "").map(([key, value]) => {
     const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
     return `${cssKey}: ${value};`;
   });
@@ -5270,6 +5268,20 @@ ${cssRules.join(
     "\n"
   )}
  transition: all 0.3s ease-in-out; }`;
+  if (tabletStylesObject) {
+    const tabletCssRules = Object.entries(tabletStylesObject).filter(([_, value]) => value !== void 0 && value !== "").map(([key, value]) => {
+      const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+      return `${cssKey}: ${value};`;
+    });
+    if (tabletCssRules.length > 0) {
+      css += `
+@media (max-width: 768px) { 
+        #${guid} { 
+          ${tabletCssRules.join("\n")}
+        } 
+      }`;
+    }
+  }
   if (mobileStylesObject) {
     const mobileCssRules = Object.entries(mobileStylesObject).filter(([_, value]) => value !== void 0 && value !== "").map(([key, value]) => {
       const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
@@ -5277,28 +5289,39 @@ ${cssRules.join(
     });
     if (mobileCssRules.length > 0) {
       css += `
-@media (max-width: 480px) { #${guid} {
-${mobileCssRules.join(
-        "\n"
-      )}
-} }`;
+@media (max-width: 480px) { 
+        #${guid} { 
+          ${mobileCssRules.join("\n")}
+        } 
+      }`;
     }
   }
   if (hasGridProperties) {
-    css += `
-@media (max-width: 1279px) { #${guid} { grid-template-columns: repeat(${tabletColumns}, minmax(0, 1fr)); } }`;
-    css += `
-@media (max-width: 768px) { #${guid} { grid-template-columns: repeat(${tabletColumns}, minmax(0, 1fr)); } }`;
-    css += `
-@media (max-width: 480px) { #${guid} { grid-template-columns: repeat(${mobileColumns}, minmax(0, 1fr)); } }`;
+    const tabletHasGrid = tabletStylesObject?.gridTemplateColumns !== void 0;
+    const mobileHasGrid = mobileStylesObject?.gridTemplateColumns !== void 0;
+    if (!tabletHasGrid) {
+      css += `
+@media (max-width: 768px) { 
+        #${guid} { 
+          grid-template-columns: repeat(${tabletColumns}, minmax(0, 1fr)); 
+        } 
+      }`;
+    }
+    if (!mobileHasGrid) {
+      css += `
+@media (max-width: 480px) { 
+        #${guid} { 
+          grid-template-columns: repeat(${mobileColumns}, minmax(0, 1fr)); 
+        } 
+      }`;
+    }
   }
-  const output = {
+  return {
     css,
     gridColsLarge: largeCols,
     gridColsMedium: tabletColumns,
     gridColsSmall: mobileColumns
   };
-  return output;
 };
 var DivContainer = async (props) => {
   const NodeTypes2 = {
@@ -5319,6 +5342,7 @@ var DivContainer = async (props) => {
   };
   const styles = props.node.cssProperties;
   const mobileStyles = props.node.mobileCssProperties;
+  const tabletStyles = props.node.tabletCssProperties;
   const dataBindingProperties = props.node.dataBinding;
   const updatedStyles = convertKeysToCamelCase(styles);
   const background = generateCompleteBackgroundString(props.node.backgroundLayers, props.assetBaseUrl);
@@ -5389,7 +5413,12 @@ var DivContainer = async (props) => {
       childCollectionData = getNestedValue2(props.dataitem, dataBindingProperties.childCollectionName);
     }
   }
-  const cssResult = generateCssString(guid, updatedStyle, mobileStyles);
+  const cssResult = generateCssString(
+    guid,
+    updatedStyle,
+    tabletStyles,
+    mobileStyles
+  );
   function renderNode(node, props2, dataitem, key, href) {
     {
     }
@@ -5409,7 +5438,8 @@ var DivContainer = async (props) => {
         breadcrumb: props2.breadcrumb,
         dataitem,
         href,
-        assetBaseUrl: props2.assetBaseUrl
+        assetBaseUrl: props2.assetBaseUrl,
+        device: props2.device
       }
     ) }, key);
   }

package/dist/index.mjs

@@ -4151,15 +4151,18 @@ var HlsPlayer1 = dynamic5(() => import("./HlsPlayer-FFEIK6FG.mjs"), {
   ssr: false
 });
 var parseMaybeNumber = (value) => {
-  if (typeof value === "number")
+  if (typeof value === "number") {
     return Number.isFinite(value) ? value : void 0;
+  }
   if (typeof value !== "string") return void 0;
   const n = Number(value);
   return Number.isFinite(n) ? n : void 0;
 };
 var shouldRenderForDevice = (imageDevice, currentDevice) => {
   if (!imageDevice) return true;
-  return imageDevice == currentDevice;
+  const normalizedImageDevice = imageDevice.toString().toLowerCase();
+  const normalizedCurrentDevice = currentDevice.toString().toLowerCase();
+  return normalizedImageDevice === normalizedCurrentDevice;
 };
 var ImageGalleryNode = (props) => {
   const resolveImageUrl = (imageUrl) => {
@@ -4195,9 +4198,8 @@ var ImageGalleryNode = (props) => {
     const alt = img.title || "Gallery image";
     const styles = {};
     if (img.height) styles.height = img.height;
-    if (img.borderRadius)
-      styles.borderRadius = img.borderRadius;
     if (img.width) styles.width = img.width;
+    if (img.borderRadius) styles.borderRadius = img.borderRadius;
     return /* @__PURE__ */ jsx58("div", { className: "max-w-full", children: isHls ? /* @__PURE__ */ jsx58(
       HlsPlayer1,
       {
@@ -4225,7 +4227,7 @@ var ImageGalleryNode = (props) => {
           alt
         }
       )
-    ) }, `${img.imageUrl}-${idx}`);
+    ) }, `${idx}-${img.imageUrl}`);
   }) });
 };
 var ImageGalleryNode_default = ImageGalleryNode;
@@ -4283,17 +4285,13 @@ function generateCompleteBackgroundString(layers, apiBaseUrl) {
     return "";
   }).filter((bg) => bg.trim() !== "").join(", ");
 }
-var generateCssString = (guid, stylesObject, mobileStylesObject) => {
-  {
-  }
-  const gridColumns = stylesObject.gridTemplateColumns ? stylesObject.gridTemplateColumns.match(/\d+/g) : [];
-  const hasGridProperties = gridColumns.length > 0;
+var generateCssString = (guid, stylesObject, tabletStylesObject, mobileStylesObject) => {
+  const gridColumns = stylesObject?.gridTemplateColumns ? String(stylesObject.gridTemplateColumns).match(/\d+/g) ?? [] : [];
+  const hasGridProperties = (gridColumns?.length ?? 0) > 0;
   const largeCols = hasGridProperties ? parseInt(gridColumns[0]) : 4;
   const tabletColumns = hasGridProperties ? Math.ceil(parseInt(gridColumns[0]) / 2) : 2;
   const mobileColumns = 1;
-  {
-  }
-  const cssRules = Object.entries(stylesObject).filter(([_, value]) => value !== void 0 && value !== "").map(([key, value]) => {
+  const cssRules = Object.entries(stylesObject || {}).filter(([_, value]) => value !== void 0 && value !== "").map(([key, value]) => {
     const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
     return `${cssKey}: ${value};`;
   });
@@ -4302,6 +4300,20 @@ ${cssRules.join(
     "\n"
   )}
  transition: all 0.3s ease-in-out; }`;
+  if (tabletStylesObject) {
+    const tabletCssRules = Object.entries(tabletStylesObject).filter(([_, value]) => value !== void 0 && value !== "").map(([key, value]) => {
+      const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+      return `${cssKey}: ${value};`;
+    });
+    if (tabletCssRules.length > 0) {
+      css += `
+@media (max-width: 768px) { 
+        #${guid} { 
+          ${tabletCssRules.join("\n")}
+        } 
+      }`;
+    }
+  }
   if (mobileStylesObject) {
     const mobileCssRules = Object.entries(mobileStylesObject).filter(([_, value]) => value !== void 0 && value !== "").map(([key, value]) => {
       const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
@@ -4309,28 +4321,39 @@ ${cssRules.join(
     });
     if (mobileCssRules.length > 0) {
       css += `
-@media (max-width: 480px) { #${guid} {
-${mobileCssRules.join(
-        "\n"
-      )}
-} }`;
+@media (max-width: 480px) { 
+        #${guid} { 
+          ${mobileCssRules.join("\n")}
+        } 
+      }`;
     }
   }
   if (hasGridProperties) {
-    css += `
-@media (max-width: 1279px) { #${guid} { grid-template-columns: repeat(${tabletColumns}, minmax(0, 1fr)); } }`;
-    css += `
-@media (max-width: 768px) { #${guid} { grid-template-columns: repeat(${tabletColumns}, minmax(0, 1fr)); } }`;
-    css += `
-@media (max-width: 480px) { #${guid} { grid-template-columns: repeat(${mobileColumns}, minmax(0, 1fr)); } }`;
+    const tabletHasGrid = tabletStylesObject?.gridTemplateColumns !== void 0;
+    const mobileHasGrid = mobileStylesObject?.gridTemplateColumns !== void 0;
+    if (!tabletHasGrid) {
+      css += `
+@media (max-width: 768px) { 
+        #${guid} { 
+          grid-template-columns: repeat(${tabletColumns}, minmax(0, 1fr)); 
+        } 
+      }`;
+    }
+    if (!mobileHasGrid) {
+      css += `
+@media (max-width: 480px) { 
+        #${guid} { 
+          grid-template-columns: repeat(${mobileColumns}, minmax(0, 1fr)); 
+        } 
+      }`;
+    }
   }
-  const output = {
+  return {
     css,
     gridColsLarge: largeCols,
     gridColsMedium: tabletColumns,
     gridColsSmall: mobileColumns
   };
-  return output;
 };
 var DivContainer = async (props) => {
   const NodeTypes2 = {
@@ -4351,6 +4374,7 @@ var DivContainer = async (props) => {
   };
   const styles = props.node.cssProperties;
   const mobileStyles = props.node.mobileCssProperties;
+  const tabletStyles = props.node.tabletCssProperties;
   const dataBindingProperties = props.node.dataBinding;
   const updatedStyles = convertKeysToCamelCase(styles);
   const background = generateCompleteBackgroundString(props.node.backgroundLayers, props.assetBaseUrl);
@@ -4421,7 +4445,12 @@ var DivContainer = async (props) => {
       childCollectionData = getNestedValue2(props.dataitem, dataBindingProperties.childCollectionName);
     }
   }
-  const cssResult = generateCssString(guid, updatedStyle, mobileStyles);
+  const cssResult = generateCssString(
+    guid,
+    updatedStyle,
+    tabletStyles,
+    mobileStyles
+  );
   function renderNode(node, props2, dataitem, key, href) {
     {
     }
@@ -4441,7 +4470,8 @@ var DivContainer = async (props) => {
         breadcrumb: props2.breadcrumb,
         dataitem,
         href,
-        assetBaseUrl: props2.assetBaseUrl
+        assetBaseUrl: props2.assetBaseUrl,
+        device: props2.device
       }
     ) }, key);
   }

package/package.json

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