@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260328113654 → 0.8.1-dev.20260402052726

package/dist/index.js

@@ -5161,6 +5161,11 @@ var ImageGalleryNode = (props) => {
     const intrinsicHeight = parseMaybeNumber(img.intrinsicHeight);
     const isHls = imageUrl.endsWith(".m3u8");
     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;
     return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "max-w-full", children: isHls ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       HlsPlayer1,
       {
@@ -5180,6 +5185,7 @@ var ImageGalleryNode = (props) => {
         "img",
         {
           loading: "lazy",
+          style: styles,
           className: "object-cover max-w-full",
           src: imageUrl,
           width: intrinsicWidth,
@@ -5245,17 +5251,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};`;
   });
@@ -5264,6 +5266,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();
@@ -5271,28 +5287,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 = {
@@ -5313,6 +5340,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);
@@ -5383,7 +5411,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) {
     {
     }

package/dist/index.mjs

@@ -4193,6 +4193,11 @@ var ImageGalleryNode = (props) => {
     const intrinsicHeight = parseMaybeNumber(img.intrinsicHeight);
     const isHls = imageUrl.endsWith(".m3u8");
     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;
     return /* @__PURE__ */ jsx58("div", { className: "max-w-full", children: isHls ? /* @__PURE__ */ jsx58(
       HlsPlayer1,
       {
@@ -4212,6 +4217,7 @@ var ImageGalleryNode = (props) => {
         "img",
         {
           loading: "lazy",
+          style: styles,
           className: "object-cover max-w-full",
           src: imageUrl,
           width: intrinsicWidth,
@@ -4277,17 +4283,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};`;
   });
@@ -4296,6 +4298,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();
@@ -4303,28 +4319,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 = {
@@ -4345,6 +4372,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);
@@ -4415,7 +4443,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) {
     {
     }

package/package.json

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