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

package/dist/index.js

@@ -5251,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};`;
   });
@@ -5270,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();
@@ -5277,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 = {
@@ -5319,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);
@@ -5389,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

@@ -4283,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};`;
   });
@@ -4302,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();
@@ -4309,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 = {
@@ -4351,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);
@@ -4421,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.20260328114717",
+  "version": "0.8.1-dev.20260402052726",
   "description": "Reusable React components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",