@gem-sdk/components 2.4.14 → 2.4.16

package/dist/cjs/banner/components/hero-banner/index.liquid.js

@@ -184,7 +184,8 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             alt,
             title,
             imagePlaceholder,
-            enableLazyloadImage
+            enableLazyloadImage,
+            fallBackImg: common.fallBackImg
         })}
         <div class="${core.cls('gp-absolute gp-w-full gp-h-full')}">
           <div
@@ -197,7 +198,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
               style="${{
             'clip-path': index.getClipPath(borderBg?.width, cornerBg)
         }}"
-            > 
+            >
             <div class="${core.cls('hero-banner-bg-parallax gp-hero-banner-image-background', {
             'gp-duration-[var(--duration)] group-hover/hero:gp-scale-[var(--scale)]': hoverEffect,
             'gp-transition-transform': hoverEffect,
@@ -241,7 +242,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             '--top': 0,
             '--left': 0,
             ...core.makeStyleState('op', overlayOpacity)
-        }}"> 
+        }}">
             </div>`)}
           </div>
           ${Row_liquid.default({

package/dist/cjs/banner/helpers/common.js

@@ -319,7 +319,9 @@ const mapContentPositionToHorizontal = (contentPosition)=>{
     }
     return result;
 };
+const fallBackImg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI5MDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZGVmcz4KICAgICAgPGxpbmVhckdyYWRpZW50IGlkPSJnLTE5MjAtOTAwIj4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjIwJSIgLz4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjUwJSIgLz4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjcwJSIgLz4KICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxyZWN0IHdpZHRoPSIxOTIwIiBoZWlnaHQ9IjkwMCIgZmlsbD0icmdiYSg1MSwgNTEsIDUxLCAwKSIgLz4KICAgIDxyZWN0IGlkPSJyIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI5MDAiIGZpbGw9InVybCgjZy0xOTIwLTkwMCkiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTE5MjAiIHRvPSIxOTIwIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgIC8+CiAgPC9zdmc+';
 
+exports.fallBackImg = fallBackImg;
 exports.filterStyleByKeys = filterStyleByKeys;
 exports.getBgImage = getBgImage;
 exports.getClassAlignBanner = getClassAlignBanner;

package/dist/cjs/banner/setting/HeroBanner.js

@@ -220,7 +220,8 @@ const config = {
                     min: 0,
                     max: 1,
                     step: 0.1,
-                    default: 0.6
+                    default: 0.6,
+                    ignoreMax: true
                 },
                 {
                     id: 'alignBanner',

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, isUseTranslatedValue = false })=>{
+const Button = ({ className, builderProps, customAttrs, pageContext, setting = {}, styles = {}, style, wrapClassName = '', advanced, nodePrice, dataId, isUseTranslatedValue = true })=>{
     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([

package/dist/cjs/image/components/AdaptiveImage.liquid.js

@@ -6,8 +6,8 @@ var core = require('@gem-sdk/core');
 var getSrcSet = require('../helpers/getSrcSet.js');
 var helpers = require('./helpers.js');
 
-const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className, pictureClass, style, imagePlaceholder, enableLazyloadImage = true, ...props })=>{
-    const fallBackImage = 'https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif';
+const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className, pictureClass, style, imagePlaceholder, enableLazyloadImage = true, fallBackImg, ...props })=>{
+    const fallBackImage = fallBackImg || 'https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif';
     const srcDesktop = getSrcSet.getImageSrc(srcSet?.desktop, 'desktop') || fallBackImage;
     const srcTablet = (getSrcSet.getImageSrc(srcSet?.tablet, 'tablet') ?? getSrcSet.getImageSrc(srcSet?.desktop, 'tablet')) || fallBackImage;
     const srcMobile = (getSrcSet.getImageSrc(srcSet?.mobile, 'mobile') ?? getSrcSet.getImageSrc(srcSet?.tablet, 'mobile') ?? getSrcSet.getImageSrc(srcSet?.desktop, 'mobile')) || fallBackImage;

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

@@ -310,7 +310,7 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
         },
         pageContext,
         nodePrice: composeNodePrice(),
-        isUseTranslatedValue: true
+        isUseTranslatedValue: false
     })}
     </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/banner/components/hero-banner/index.liquid.js

@@ -1,7 +1,7 @@
 import { makeStyleResponsive, getHeightByShapeGlobalSize, makeStyleWithDefault, getWidthByShapeGlobalSize, getPaddingGlobalSize, removeUndefinedValuesFromObject, template, cls, dataStringify, RenderIf, isLocalEnv, baseAssetURL, getResponsiveValueByScreen, makeStyle, getSingleColorVariable, getRadiusStyleActiveState, getStyleBgColor, getGradientBgrStyleByDevice, getStyleShadow, getAspectRatioGlobalSize, getStyleBackgroundByDevice, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState } from '@gem-sdk/core';
 import Row from '../../../grid/components/Row.liquid.js';
 import AdaptiveImage from '../../../image/components/AdaptiveImage.liquid.js';
-import { getVisibilityStyle, getMarginStyle, getStyleAspectRatioHeroBannerCustom, removeMarginStyle, getContentPosition, mapContentPositionToHorizontal, getClassJustify, getResponsiveSetting, getClassContentPosition, getDisplayStyleByFitContent, getClassForContentByFitContent, getClassForStretchContent, getClassSpaceBetween, getWidth, getBgImage } from '../../helpers/common.js';
+import { getVisibilityStyle, getMarginStyle, getStyleAspectRatioHeroBannerCustom, removeMarginStyle, getContentPosition, mapContentPositionToHorizontal, getClassJustify, getResponsiveSetting, getClassContentPosition, getDisplayStyleByFitContent, fallBackImg, getClassForContentByFitContent, getClassForStretchContent, getClassSpaceBetween, getWidth, getBgImage } from '../../helpers/common.js';
 import { getInsertLinkData, getSettingPreloadData } from '../../../helpers.js';
 import HTML5Embed from '../../../video/components/HTML5Embed.liquid.js';
 import { getClipPath, getStyleHeroBannerBg } from './utils/index.js';
@@ -180,7 +180,8 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             alt,
             title,
             imagePlaceholder,
-            enableLazyloadImage
+            enableLazyloadImage,
+            fallBackImg
         })}
         <div class="${cls('gp-absolute gp-w-full gp-h-full')}">
           <div
@@ -193,7 +194,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
               style="${{
             'clip-path': getClipPath(borderBg?.width, cornerBg)
         }}"
-            > 
+            >
             <div class="${cls('hero-banner-bg-parallax gp-hero-banner-image-background', {
             'gp-duration-[var(--duration)] group-hover/hero:gp-scale-[var(--scale)]': hoverEffect,
             'gp-transition-transform': hoverEffect,
@@ -237,7 +238,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             '--top': 0,
             '--left': 0,
             ...makeStyleState('op', overlayOpacity)
-        }}"> 
+        }}">
             </div>`)}
           </div>
           ${Row({

package/dist/esm/banner/helpers/common.js

@@ -317,5 +317,6 @@ const mapContentPositionToHorizontal = (contentPosition)=>{
     }
     return result;
 };
+const fallBackImg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI5MDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZGVmcz4KICAgICAgPGxpbmVhckdyYWRpZW50IGlkPSJnLTE5MjAtOTAwIj4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjIwJSIgLz4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjUwJSIgLz4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjcwJSIgLz4KICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxyZWN0IHdpZHRoPSIxOTIwIiBoZWlnaHQ9IjkwMCIgZmlsbD0icmdiYSg1MSwgNTEsIDUxLCAwKSIgLz4KICAgIDxyZWN0IGlkPSJyIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI5MDAiIGZpbGw9InVybCgjZy0xOTIwLTkwMCkiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTE5MjAiIHRvPSIxOTIwIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgIC8+CiAgPC9zdmc+';
 
-export { filterStyleByKeys, getBgImage, getClassAlignBanner, getClassContentPosition, getClassForContentByFitContent, getClassForStretchContent, getClassJustify, getClassSpaceBetween, getContentPosition, getDataVideoHeroBannerResponsive, getDisplayStyleByFitContent, getMarginStyle, getResponsiveSetting, getStyleAspectRatioHeroBannerCustom, getVisibilityStyle, getWidth, mapContentPositionToHorizontal, removeMarginStyle };
+export { fallBackImg, filterStyleByKeys, getBgImage, getClassAlignBanner, getClassContentPosition, getClassForContentByFitContent, getClassForStretchContent, getClassJustify, getClassSpaceBetween, getContentPosition, getDataVideoHeroBannerResponsive, getDisplayStyleByFitContent, getMarginStyle, getResponsiveSetting, getStyleAspectRatioHeroBannerCustom, getVisibilityStyle, getWidth, mapContentPositionToHorizontal, removeMarginStyle };

package/dist/esm/banner/setting/HeroBanner.js

@@ -216,7 +216,8 @@ const config = {
                     min: 0,
                     max: 1,
                     step: 0.1,
-                    default: 0.6
+                    default: 0.6,
+                    ignoreMax: true
                 },
                 {
                     id: 'alignBanner',

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, isUseTranslatedValue = false })=>{
+const Button = ({ className, builderProps, customAttrs, pageContext, setting = {}, styles = {}, style, wrapClassName = '', advanced, nodePrice, dataId, isUseTranslatedValue = true })=>{
     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([

package/dist/esm/image/components/AdaptiveImage.liquid.js

@@ -2,8 +2,8 @@ import { template, cls, RenderIf, makeStyleResponsive } from '@gem-sdk/core';
 import { getImageSrc } from '../helpers/getSrcSet.js';
 import { createBlurDataURL } from './helpers.js';
 
-const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className, pictureClass, style, imagePlaceholder, enableLazyloadImage = true, ...props })=>{
-    const fallBackImage = 'https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif';
+const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className, pictureClass, style, imagePlaceholder, enableLazyloadImage = true, fallBackImg, ...props })=>{
+    const fallBackImage = fallBackImg || 'https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif';
     const srcDesktop = getImageSrc(srcSet?.desktop, 'desktop') || fallBackImage;
     const srcTablet = (getImageSrc(srcSet?.tablet, 'tablet') ?? getImageSrc(srcSet?.desktop, 'tablet')) || fallBackImage;
     const srcMobile = (getImageSrc(srcSet?.mobile, 'mobile') ?? getImageSrc(srcSet?.tablet, 'mobile') ?? getImageSrc(srcSet?.desktop, 'mobile')) || fallBackImage;

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

@@ -306,7 +306,7 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
         },
         pageContext,
         nodePrice: composeNodePrice(),
-        isUseTranslatedValue: true
+        isUseTranslatedValue: false
     })}
     </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

@@ -418,6 +418,7 @@ type AdaptiveImageProps = {
     width?: number | string;
     height?: number | string;
     pictureClass?: string;
+    fallBackImg?: string;
     imagePlaceholder?: ObjectDevices<string>;
 } & Omit<ImgProps, 'image'>;
 

package/package.json

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