@gem-sdk/components 2.4.11 → 2.4.13

package/dist/cjs/accordion/components/AccordionItem.liquid.js

@@ -71,10 +71,17 @@ const AccordionItem = ({ accordions, index, rawChildren, builderProps, title, pa
         return '';
     };
     const composeColorIconStyle = ()=>{
-        return `.${parentUid}.gp-accordion-item-${parentUid}-${index}:hover .gp-collapsible-icon, .${parentUid}.gp-accordion-item-${parentUid}-${index}:hover .gp-icon {
-                  color: ${isShow ? color?.active : color?.hover}
-              } {
-          }`;
+        return `.gp-accordion-item-${parentUid}-${index}:hover 
+      {
+        .gp-collapsible-icon { 
+          color: ${isShow ? color?.active : color?.hover} 
+        }
+
+        .gp-icon { 
+            color: ${isShow ? iconColor?.active : iconColor?.hover} 
+        }
+      }
+    `;
     };
     const getTemplateRow = ()=>{
         return {
@@ -82,16 +89,6 @@ const AccordionItem = ({ accordions, index, rawChildren, builderProps, title, pa
         };
     };
     return core.template`
-  <style title="gp-accordion-item-style">
-  .gp-accordion-item .gp-accordion-item-${parentUid}-${index}:hover .gp-collapsible-icon.gp-accordion-item-hover, .gp-accordion-item .gp-accordion-item-${parentUid}-${index}:hover .gp-icon.gp-accordion-item-hover 
-     {
-        color: ${color?.hover} !important
-      }
-    .gp-accordion-item .gp-accordion-item-${parentUid}-${index}:hover .gp-collapsible-icon.gp-accordion-item-active, .gp-accordion-item .gp-accordion-item-${parentUid}-${index}:hover .gp-icon.gp-accordion-item-active
-     {
-        color: ${color?.active} !important
-      }
-  </style>
   <div class="gp-overflow-clip" style="${{
         ...widthStyle,
         '--height-iconCollapseSize': `${iconCollapseSize || 16}px`,

package/dist/cjs/button/components/Button.liquid.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var core = require('@gem-sdk/core');
 var helpers = require('../../helpers.js');
 
-const Button = ({ className, builderProps, customAttrs, pageContext, setting = {}, styles = {}, style, wrapClassName = '', advanced, nodePrice, dataId })=>{
+const Button = ({ className, builderProps, customAttrs, pageContext, setting = {}, styles = {}, style, wrapClassName = '', advanced, nodePrice, dataId, isUseTranslatedValue = false })=>{
     const { align, size, backgroundColor, textColor, roundedBtn, iconSpacing, globalSize } = styles;
     const { label, iconSvg, btnLink, htmlType, disabled, loading, iconAlign, iconVisible, translate, disabledLoading = true } = setting;
     const [wrapStyle, restStyle] = core.splitStyle([
@@ -70,7 +70,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
       color: ${core.getSingleColorVariable(styles?.textColor?.hover)};
     }
   `;
-    const labelValDisplay = helpers.getDynamicSourceLocales({
+    const labelValDisplay = !isUseTranslatedValue ? label : helpers.getDynamicSourceLocales({
         val: label,
         uid: builderProps?.uidTranslate ?? builderProps?.uid,
         settingId: translate ?? 'label',
@@ -161,7 +161,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
       >${iconSvg}</span>`)}
       <span
         data-gp-text
-        class="${`group-hover/button:!gp-text-inherit gp-button-text-only gp-break-words group-data-[state=loading]/button:gp-invisible [&_p]:gp-whitespace-pre-line gp-z-1 gp-h-full gp-flex gp-items-center gp-overflow-hidden ${nodePrice ? appendTypoClass : ''}
+        class="${`gp-content-product-button group-hover/button:!gp-text-inherit gp-button-text-only gp-break-words group-data-[state=loading]/button:gp-invisible [&_p]:gp-whitespace-pre-line gp-z-1 gp-h-full gp-flex gp-items-center gp-overflow-hidden ${nodePrice ? appendTypoClass : ''}
         ${styles?.typo?.attrs?.italic ? '[&:not(:has(p))]:gp-pr-[0.2em] [&_p]:[&:has(p)]:gp-pr-[0.2em]' : ''}`}"
         style="${{
         ...nodePrice && appendTypoStyle,

package/dist/cjs/grid/setting/Section.js

@@ -260,6 +260,21 @@ const config = {
                         }
                     }
                 },
+                {
+                    id: 'columnGap',
+                    type: 'range',
+                    min: 0,
+                    max: 100,
+                    step: 1,
+                    units: [
+                        '%'
+                    ],
+                    devices: {
+                        desktop: {
+                            default: '0%'
+                        }
+                    }
+                },
                 {
                     id: 'background',
                     type: 'background',
@@ -296,14 +311,29 @@ const config = {
     ],
     ui: [
         {
-            type: 'control',
+            type: 'group',
             label: {
                 en: 'Layout'
             },
-            setting: {
-                id: 'layout'
-            },
-            layout: 'vertical'
+            controls: [
+                {
+                    type: 'control',
+                    setting: {
+                        id: 'layout'
+                    },
+                    layout: 'vertical'
+                },
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Column gap'
+                    },
+                    setting: {
+                        id: 'columnGap'
+                    },
+                    condition: `!!layout.cols && layout.cols.length > 1 && pageType == "POST_PURCHASE"`
+                }
+            ]
         },
         {
             type: 'group',
@@ -340,7 +370,7 @@ const config = {
                     setting: {
                         id: 'verticalGutter'
                     },
-                    condition: `!!layout.cols && layout.cols.length > 1`
+                    condition: `!!layout.cols && layout.cols.length > 1 && pageType != "POST_PURCHASE"`
                 }
             ]
         },
@@ -349,7 +379,7 @@ const config = {
             label: {
                 en: 'Align'
             },
-            condition: `layout.display !== 'fill' || (layout.display === 'fill' && !!layout.cols && layout.cols.length > 1)`,
+            condition: `(layout.display !== 'fill' || (layout.display === 'fill' && !!layout.cols && layout.cols.length > 1)) && pageType != "POST_PURCHASE"`,
             controls: [
                 {
                     type: 'control',

package/dist/cjs/product/components/ProductButton.js

@@ -218,7 +218,7 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
     ]);
     const isInStock = core.useCurrentVariantInStock();
     const isDisable = !isInStock || createCartLoading || addToCartLoading;
-    const label = !isInStock ? setting?.outOfStockLabel : setting?.label;
+    const label = !isInStock ? !currentVariant ? 'Unavailable' : setting?.outOfStockLabel : setting?.label;
     if (!isInStock && isCustomOutOfStock) {
         buttonStyles.backgroundColor = {
             normal: oosBackground

package/dist/cjs/product/components/ProductButton.liquid.js

@@ -188,6 +188,22 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
         pageContext,
         translate: setting?.translate
     });
+    const labelUnavailableTranslate = helpers.getDynamicSourceLocales({
+        val: 'Unavailable',
+        uid: builderProps?.uid,
+        settingId: 'unavailableLabel',
+        isLiquid: true,
+        pageContext,
+        translate: setting?.translate ? 'unavailableLabel' : undefined
+    });
+    const labelOutOfStockTranslate = helpers.getDynamicSourceLocales({
+        val: setting?.outOfStockLabel,
+        uid: builderProps?.uid,
+        settingId: 'outOfStockLabel',
+        isLiquid: true,
+        pageContext,
+        translate: setting?.translate ? 'outOfStockLabel' : undefined
+    });
     return core.template /* liquid */ `
    {%- liquid
       assign inventory_quantity = variant.inventory_quantity | default: 0
@@ -195,6 +211,8 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
     <gp-product-button
       class="gp-product-button"
       gp-data-wrapper="true"
+      gp-label-out-of-stock="${pageContext?.isPreviewing ? labelOutOfStockTranslate : `{{${labelOutOfStockTranslate}}}`}"
+      gp-label-unavailable="${pageContext?.isPreviewing ? labelUnavailableTranslate : `{{${labelUnavailableTranslate}}}`}"
       gp-data='${JSON.stringify({
         setting: {
             actionEffect: setting?.actionEffect,
@@ -272,8 +290,7 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
             'gp-data-hidden': `{% if variant.available %}true{% endif %}`
         },
         setting: {
-            label: setting?.outOfStockLabel,
-            translate: setting?.translate ? 'outOfStockLabel' : undefined,
+            label: `${pageContext?.isPreviewing ? labelOutOfStockTranslate : `{{${labelOutOfStockTranslate}}}`}`,
             htmlType: 'button',
             iconAlign: iconAlign,
             iconSvg: iconSvg,
@@ -292,7 +309,8 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
             }
         },
         pageContext,
-        nodePrice: composeNodePrice()
+        nodePrice: composeNodePrice(),
+        isUseTranslatedValue: true
     })}
     </gp-product-button>
     ${core.RenderIf(core.isLocalEnv, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-product-button.js' | asset_url }}" defer="defer"></script>`, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="${core.baseAssetURL}/assets-v2/gp-product-button.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}

package/dist/esm/accordion/components/AccordionItem.liquid.js

@@ -67,10 +67,17 @@ const AccordionItem = ({ accordions, index, rawChildren, builderProps, title, pa
         return '';
     };
     const composeColorIconStyle = ()=>{
-        return `.${parentUid}.gp-accordion-item-${parentUid}-${index}:hover .gp-collapsible-icon, .${parentUid}.gp-accordion-item-${parentUid}-${index}:hover .gp-icon {
-                  color: ${isShow ? color?.active : color?.hover}
-              } {
-          }`;
+        return `.gp-accordion-item-${parentUid}-${index}:hover 
+      {
+        .gp-collapsible-icon { 
+          color: ${isShow ? color?.active : color?.hover} 
+        }
+
+        .gp-icon { 
+            color: ${isShow ? iconColor?.active : iconColor?.hover} 
+        }
+      }
+    `;
     };
     const getTemplateRow = ()=>{
         return {
@@ -78,16 +85,6 @@ const AccordionItem = ({ accordions, index, rawChildren, builderProps, title, pa
         };
     };
     return template`
-  <style title="gp-accordion-item-style">
-  .gp-accordion-item .gp-accordion-item-${parentUid}-${index}:hover .gp-collapsible-icon.gp-accordion-item-hover, .gp-accordion-item .gp-accordion-item-${parentUid}-${index}:hover .gp-icon.gp-accordion-item-hover 
-     {
-        color: ${color?.hover} !important
-      }
-    .gp-accordion-item .gp-accordion-item-${parentUid}-${index}:hover .gp-collapsible-icon.gp-accordion-item-active, .gp-accordion-item .gp-accordion-item-${parentUid}-${index}:hover .gp-icon.gp-accordion-item-active
-     {
-        color: ${color?.active} !important
-      }
-  </style>
   <div class="gp-overflow-clip" style="${{
         ...widthStyle,
         '--height-iconCollapseSize': `${iconCollapseSize || 16}px`,

package/dist/esm/button/components/Button.liquid.js

@@ -1,7 +1,7 @@
 import { splitStyle, makeStyleResponsive, makeGlobalSize, composeTypographyClassName, composeTypographyStyle, composeBorderCss, composeCornerCss, getSingleColorVariable, template, cls, getGlobalColorStateClass, getGlobalColorStateStyle, composeRadius, getStyleShadowState, composeSize, getGradientBgrStyleForButton, RenderIf } from '@gem-sdk/core';
 import { getInsertLinkData, getDynamicSourceLocales } from '../../helpers.js';
 
-const Button = ({ className, builderProps, customAttrs, pageContext, setting = {}, styles = {}, style, wrapClassName = '', advanced, nodePrice, dataId })=>{
+const Button = ({ className, builderProps, customAttrs, pageContext, setting = {}, styles = {}, style, wrapClassName = '', advanced, nodePrice, dataId, isUseTranslatedValue = false })=>{
     const { align, size, backgroundColor, textColor, roundedBtn, iconSpacing, globalSize } = styles;
     const { label, iconSvg, btnLink, htmlType, disabled, loading, iconAlign, iconVisible, translate, disabledLoading = true } = setting;
     const [wrapStyle, restStyle] = splitStyle([
@@ -66,7 +66,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
       color: ${getSingleColorVariable(styles?.textColor?.hover)};
     }
   `;
-    const labelValDisplay = getDynamicSourceLocales({
+    const labelValDisplay = !isUseTranslatedValue ? label : getDynamicSourceLocales({
         val: label,
         uid: builderProps?.uidTranslate ?? builderProps?.uid,
         settingId: translate ?? 'label',
@@ -157,7 +157,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
       >${iconSvg}</span>`)}
       <span
         data-gp-text
-        class="${`group-hover/button:!gp-text-inherit gp-button-text-only gp-break-words group-data-[state=loading]/button:gp-invisible [&_p]:gp-whitespace-pre-line gp-z-1 gp-h-full gp-flex gp-items-center gp-overflow-hidden ${nodePrice ? appendTypoClass : ''}
+        class="${`gp-content-product-button group-hover/button:!gp-text-inherit gp-button-text-only gp-break-words group-data-[state=loading]/button:gp-invisible [&_p]:gp-whitespace-pre-line gp-z-1 gp-h-full gp-flex gp-items-center gp-overflow-hidden ${nodePrice ? appendTypoClass : ''}
         ${styles?.typo?.attrs?.italic ? '[&:not(:has(p))]:gp-pr-[0.2em] [&_p]:[&:has(p)]:gp-pr-[0.2em]' : ''}`}"
         style="${{
         ...nodePrice && appendTypoStyle,

package/dist/esm/grid/setting/Section.js

@@ -256,6 +256,21 @@ const config = {
                         }
                     }
                 },
+                {
+                    id: 'columnGap',
+                    type: 'range',
+                    min: 0,
+                    max: 100,
+                    step: 1,
+                    units: [
+                        '%'
+                    ],
+                    devices: {
+                        desktop: {
+                            default: '0%'
+                        }
+                    }
+                },
                 {
                     id: 'background',
                     type: 'background',
@@ -292,14 +307,29 @@ const config = {
     ],
     ui: [
         {
-            type: 'control',
+            type: 'group',
             label: {
                 en: 'Layout'
             },
-            setting: {
-                id: 'layout'
-            },
-            layout: 'vertical'
+            controls: [
+                {
+                    type: 'control',
+                    setting: {
+                        id: 'layout'
+                    },
+                    layout: 'vertical'
+                },
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Column gap'
+                    },
+                    setting: {
+                        id: 'columnGap'
+                    },
+                    condition: `!!layout.cols && layout.cols.length > 1 && pageType == "POST_PURCHASE"`
+                }
+            ]
         },
         {
             type: 'group',
@@ -336,7 +366,7 @@ const config = {
                     setting: {
                         id: 'verticalGutter'
                     },
-                    condition: `!!layout.cols && layout.cols.length > 1`
+                    condition: `!!layout.cols && layout.cols.length > 1 && pageType != "POST_PURCHASE"`
                 }
             ]
         },
@@ -345,7 +375,7 @@ const config = {
             label: {
                 en: 'Align'
             },
-            condition: `layout.display !== 'fill' || (layout.display === 'fill' && !!layout.cols && layout.cols.length > 1)`,
+            condition: `(layout.display !== 'fill' || (layout.display === 'fill' && !!layout.cols && layout.cols.length > 1)) && pageType != "POST_PURCHASE"`,
             controls: [
                 {
                     type: 'control',

package/dist/esm/product/components/ProductButton.js

@@ -214,7 +214,7 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
     ]);
     const isInStock = useCurrentVariantInStock();
     const isDisable = !isInStock || createCartLoading || addToCartLoading;
-    const label = !isInStock ? setting?.outOfStockLabel : setting?.label;
+    const label = !isInStock ? !currentVariant ? 'Unavailable' : setting?.outOfStockLabel : setting?.label;
     if (!isInStock && isCustomOutOfStock) {
         buttonStyles.backgroundColor = {
             normal: oosBackground

package/dist/esm/product/components/ProductButton.liquid.js

@@ -184,6 +184,22 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
         pageContext,
         translate: setting?.translate
     });
+    const labelUnavailableTranslate = getDynamicSourceLocales({
+        val: 'Unavailable',
+        uid: builderProps?.uid,
+        settingId: 'unavailableLabel',
+        isLiquid: true,
+        pageContext,
+        translate: setting?.translate ? 'unavailableLabel' : undefined
+    });
+    const labelOutOfStockTranslate = getDynamicSourceLocales({
+        val: setting?.outOfStockLabel,
+        uid: builderProps?.uid,
+        settingId: 'outOfStockLabel',
+        isLiquid: true,
+        pageContext,
+        translate: setting?.translate ? 'outOfStockLabel' : undefined
+    });
     return template /* liquid */ `
    {%- liquid
       assign inventory_quantity = variant.inventory_quantity | default: 0
@@ -191,6 +207,8 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
     <gp-product-button
       class="gp-product-button"
       gp-data-wrapper="true"
+      gp-label-out-of-stock="${pageContext?.isPreviewing ? labelOutOfStockTranslate : `{{${labelOutOfStockTranslate}}}`}"
+      gp-label-unavailable="${pageContext?.isPreviewing ? labelUnavailableTranslate : `{{${labelUnavailableTranslate}}}`}"
       gp-data='${JSON.stringify({
         setting: {
             actionEffect: setting?.actionEffect,
@@ -268,8 +286,7 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
             'gp-data-hidden': `{% if variant.available %}true{% endif %}`
         },
         setting: {
-            label: setting?.outOfStockLabel,
-            translate: setting?.translate ? 'outOfStockLabel' : undefined,
+            label: `${pageContext?.isPreviewing ? labelOutOfStockTranslate : `{{${labelOutOfStockTranslate}}}`}`,
             htmlType: 'button',
             iconAlign: iconAlign,
             iconSvg: iconSvg,
@@ -288,7 +305,8 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
             }
         },
         pageContext,
-        nodePrice: composeNodePrice()
+        nodePrice: composeNodePrice(),
+        isUseTranslatedValue: true
     })}
     </gp-product-button>
     ${RenderIf(isLocalEnv, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-product-button.js' | asset_url }}" defer="defer"></script>`, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="${baseAssetURL}/assets-v2/gp-product-button.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}

package/dist/types/index.d.ts

@@ -1577,6 +1577,8 @@ type ProductButtonProps = BasePropsWrap<{
     translate?: string;
     outOfStockLabel?: string;
     unavailableLabel?: string;
+    labelUnavailableTranslate?: string;
+    labelOutOfStockTranslate?: string;
     actionEffect?: 'open-cart-drawer' | 'buy-now' | 'continue-shopping' | 'go-to-url';
     customURL?: {
         link?: string;
@@ -5433,10 +5435,11 @@ type ButtonLiquidProps = MixedProps & ButtonProps & {
     advanced?: any;
     pageContext?: PageContext;
     nodePrice?: string | null;
+    isUseTranslatedValue?: boolean;
 } & {
     dataId?: string;
 };
-declare const Button: ({ className, builderProps, customAttrs, pageContext, setting, styles, style, wrapClassName, advanced, nodePrice, dataId, }: ButtonLiquidProps) => string;
+declare const Button: ({ className, builderProps, customAttrs, pageContext, setting, styles, style, wrapClassName, advanced, nodePrice, dataId, isUseTranslatedValue, }: ButtonLiquidProps) => string;
 
 declare const Coupon: ({ setting, builderProps, builderAttrs, style, styles, advanced, pageContext, }: _gem_sdk_core.BaseProps<{
     copyContent?: string | undefined;
@@ -5688,6 +5691,8 @@ declare const ProductButton: ({ setting, builderProps, builderAttrs, style, styl
     translate?: string | undefined;
     outOfStockLabel?: string | undefined;
     unavailableLabel?: string | undefined;
+    labelUnavailableTranslate?: string | undefined;
+    labelOutOfStockTranslate?: string | undefined;
     actionEffect?: "buy-now" | "open-cart-drawer" | "continue-shopping" | "go-to-url" | undefined;
     customURL?: {
         link?: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "2.4.11",
+  "version": "2.4.13",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",