@gem-sdk/components 2.1.5 → 2.1.7

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

@@ -134,6 +134,140 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
         tablet: helpers$1.createBlurDataURL(srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0),
         mobile: helpers$1.createBlurDataURL(srcSet?.mobile?.width ?? srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.mobile?.height ?? srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0)
     };
+    const renderInnerHeroBanner = ()=>{
+        return core.template /* liquid */ `
+      <div
+        class="${core.cls('gp-relative gp-flex gp-flex-col gp-items-center gp-overflow-hidden gp_haslazybg', {
+            ...common.getClassContentPosition(contentPosition || {})
+        })}"
+        style="${{
+            ...styleHeight,
+            ...styleAspectRatio,
+            ...core.makeStyle({
+                bs: borderBg?.border ?? borderBg?.border,
+                bw: borderBg?.width ?? borderBg?.width,
+                bc: core.getSingleColorVariable(borderBg?.color)
+            }),
+            ...core.getRadiusStyleActiveState({
+                ...cornerBg,
+                active: {
+                    ...cornerBg || {},
+                    radiusType: 'custom'
+                }
+            }),
+            ...background ? {
+                ...core.getStyleBgColor(background)
+            } : {},
+            ...core.getGradientBgrStyleByDevice(background, bgiEnableByDevice),
+            ...core.getStyleShadow({
+                value: shadowBg,
+                styleAppliedFor: 'box-shadow',
+                isEnableShadow: hasActiveShadow
+            })
+        }}"
+      >
+        ${AdaptiveImage_liquid.default({
+            priority: setting?.preload,
+            pictureClass: 'gp-w-full',
+            srcSet: srcSet,
+            className: `adaptive-hero-banner`,
+            aspectRatio: core.getAspectRatioGlobalSize(sizeSetting),
+            style: {
+                ...common.getDisplayStyleByFitContent(sizeSetting, background),
+                ...styleHeight,
+                ...styleWidthShapeOriginal,
+                ...styleWidth,
+                '--op': 0,
+                '--z': -1
+            },
+            alt,
+            title,
+            imagePlaceholder,
+            enableLazyloadImage
+        })}
+        <div class="${core.cls('gp-absolute gp-w-full gp-h-full')}">
+          <div
+            class="${core.cls('gp-overflow-hidden gp-relative gp-w-full gp-h-full')}"
+            >
+            <div
+              aria-label="Background Image"
+              role="banner"
+              class='gp-hero-banner-bg gp-absolute gp-overflow-hidden gp-w-full gp-h-full top-0 left-0'
+              style="${{
+            'clip-path': index.getClipPath(borderBg?.width, cornerBg)
+        }}"
+            > 
+            <div class="${core.cls('hero-banner-bg-parallax gp-hero-banner-image-background gp_lazybg', {
+            'gp-duration-[var(--duration)] group-hover/hero:gp-scale-[var(--scale)]': hoverEffect,
+            'gp-transition-transform': hoverEffect
+        })}"
+              style="${{
+            ...core.getStyleBackgroundByDevice(background, {
+                ignoreBgAttachment: true,
+                ignoreBackgroundImage: true,
+                liquid: true
+            }),
+            ...core.makeStyleResponsive('bgi', {
+                desktop: `url('${bgiEnableByDevice['desktop'] ? setting?.preload || !enableLazyloadImage ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
+                tablet: `url('${bgiEnableByDevice['tablet'] ? setting?.preload || !enableLazyloadImage ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
+                mobile: `url('${bgiEnableByDevice['mobile'] ? setting?.preload || !enableLazyloadImage ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
+            }),
+            '--duration': `${hoverEffectDuration ?? 0}s`,
+            '--scale': hoverEffectScale ?? 1,
+            ...core.makeStyleResponsive('pos', getAttachmentDevice()),
+            ...index.getStyleHeroBannerBg(backgroundResponsive || {}, enableParallax)
+        }}"
+            >
+            ${!setting?.preload ? getSrcSet.DEVICES.map((device)=>{
+            return core.RenderIf(getEnableBgImageByDevice(device), NextImage_liquid.default({
+                src: getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, device), device),
+                alt: `lazy image ${device}`,
+                className: `gp-absolute gp-top-0 gp-invisible gp-w-full gp_lazyload gp-h-full gp_lazyforbg ${device === 'tablet' ? 'gp_lazybg_tl' : ''} ${device === 'mobile' ? 'gp_lazybg_mb' : ''}`,
+                isDisableAspectStyle: true,
+                enableLazyloadImage
+            }));
+        }).join('') : ''}
+            </div>  
+            ${embed()} </div>
+          </div>
+          ${core.RenderIf(overlayEnable, core.template`<div
+              aria-label="Overlay"
+              role="banner"
+              class="${core.cls('gp-absolute gp-inset-0 gp-left-[var(--left)] gp-top-[var(--top)] gp-transition-all gp-duration-300 group-hover/hero:gp-bg-[color:var(--hvr-bgc,_var(--bgc))] group-hover/hero:gp-opacity-[var(--hvr-op,_var(--op))]', core.getGlobalColorStateClass('bg', overlayColor))}"
+            style="${{
+            ...core.getGlobalColorStateStyle('bgc', overlayColor),
+            '--top': 0,
+            '--left': 0,
+            ...core.makeStyleState('op', overlayOpacity)
+        }}"> 
+            </div>`)}
+          </div>
+          ${Row_liquid.default({
+            className: core.cls('gp-hero-banner-row gp-z-1 gp-w-full', common.getClassForContentByFitContent(sizeSetting, background), common.getClassForStretchContent(verticalAlign), common.getClassSpaceBetween(setting?.layout || {}, styles?.contentPosition1Col || {}, styles?.contentPosition2Col || {})),
+            setting: {
+                layout,
+                horizontalAlign: rowHorizontalAlign,
+                verticalAlign,
+                order
+            },
+            styles: {
+                verticalGutter,
+                width: common.getWidth(contentWidth),
+                fullWidth: {
+                    desktop: false,
+                    tablet: false,
+                    mobile: false
+                }
+            },
+            style: {
+                ...contentPaddingStyle
+            },
+            children,
+            rawChildren
+        })}
+      </div>
+    `;
+    };
     return core.template`
     <div class="${core.cls('gp-flex gp-w-full', common.getClassJustify(alignBannerData))}" style="${{
         ...styleHeight,
@@ -142,6 +276,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
     }}">
       <gp-hero-banner
         gp-data='${core.dataStringify({
+        target: urlData?.target ?? '_blank',
         background: backgroundResponsive,
         uid: builderProps?.uid,
         enableParallax,
@@ -153,6 +288,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
         contentPosition2Col: styles?.contentPosition2Col,
         aspectRatio: setting?.aspectRatio
     }).replaceAll("'", '&#039;')}'
+        gp-href="${urlData.href}"
         ${{
         ...builderAttrs
     }}
@@ -166,145 +302,19 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
     }}"
         data-id="${builderProps?.uid}"
       >
-        <div
-        class="${core.cls('gp-relative gp-flex gp-flex-col gp-items-center gp-overflow-hidden gp_haslazybg', {
-        ...common.getClassContentPosition(contentPosition || {})
-    })}"
-          style="${{
-        ...styleHeight,
-        ...styleAspectRatio,
-        ...core.makeStyle({
-            bs: borderBg?.border ?? borderBg?.border,
-            bw: borderBg?.width ?? borderBg?.width,
-            bc: core.getSingleColorVariable(borderBg?.color)
-        }),
-        ...core.getRadiusStyleActiveState({
-            ...cornerBg,
-            active: {
-                ...cornerBg || {},
-                radiusType: 'custom'
-            }
-        }),
-        ...background ? {
-            ...core.getStyleBgColor(background)
-        } : {},
-        ...core.getGradientBgrStyleByDevice(background, bgiEnableByDevice),
-        ...core.getStyleShadow({
-            value: shadowBg,
-            styleAppliedFor: 'box-shadow',
-            isEnableShadow: hasActiveShadow
-        })
-    }}"
-        >
-          ${AdaptiveImage_liquid.default({
-        priority: setting?.preload,
-        pictureClass: 'gp-w-full',
-        srcSet: srcSet,
-        className: `adaptive-hero-banner`,
-        aspectRatio: core.getAspectRatioGlobalSize(sizeSetting),
-        style: {
-            ...common.getDisplayStyleByFitContent(sizeSetting, background),
-            ...styleHeight,
-            ...styleWidthShapeOriginal,
-            ...styleWidth,
-            '--op': 0,
-            '--z': -1
-        },
-        alt,
-        title,
-        imagePlaceholder,
-        enableLazyloadImage
-    })}
-          <div class="${core.cls('gp-absolute gp-w-full gp-h-full')}">
-            <div
-              class="${core.cls('gp-overflow-hidden gp-relative gp-w-full gp-h-full')}"
-              >
-              <div
-                aria-label="Background Image"
-                role="banner"
-                class='gp-hero-banner-bg gp-absolute gp-overflow-hidden gp-w-full gp-h-full top-0 left-0'
-                style="${{
-        'clip-path': index.getClipPath(borderBg?.width, cornerBg)
-    }}"
-              > 
-              <div class="${core.cls('hero-banner-bg-parallax gp-hero-banner-image-background gp_lazybg', {
-        'gp-duration-[var(--duration)] group-hover/hero:gp-scale-[var(--scale)]': hoverEffect,
-        'gp-transition-transform': hoverEffect
-    })}"
-              style="${{
-        ...core.getStyleBackgroundByDevice(background, {
-            ignoreBgAttachment: true,
-            ignoreBackgroundImage: true,
-            liquid: true
-        }),
-        ...core.makeStyleResponsive('bgi', {
-            desktop: `url('${bgiEnableByDevice['desktop'] ? setting?.preload || !enableLazyloadImage ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
-            tablet: `url('${bgiEnableByDevice['tablet'] ? setting?.preload || !enableLazyloadImage ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
-            mobile: `url('${bgiEnableByDevice['mobile'] ? setting?.preload || !enableLazyloadImage ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
-        }),
-        '--duration': `${hoverEffectDuration ?? 0}s`,
-        '--scale': hoverEffectScale ?? 1,
-        ...core.makeStyleResponsive('pos', getAttachmentDevice()),
-        ...index.getStyleHeroBannerBg(backgroundResponsive || {}, enableParallax)
-    }}"
-             >
-             ${!setting?.preload ? getSrcSet.DEVICES.map((device)=>{
-        return core.RenderIf(getEnableBgImageByDevice(device), NextImage_liquid.default({
-            src: getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, device), device),
-            alt: `lazy image ${device}`,
-            className: `gp-absolute gp-top-0 gp-invisible gp-w-full gp_lazyload gp-h-full gp_lazyforbg ${device === 'tablet' ? 'gp_lazybg_tl' : ''} ${device === 'mobile' ? 'gp_lazybg_mb' : ''}`,
-            isDisableAspectStyle: true,
-            enableLazyloadImage
-        }));
-    }).join('') : ''}
-              </div>  
-              ${embed()} </div>
-            </div>
-            ${core.RenderIf(overlayEnable, core.template`<div
-            aria-label="Overlay"
-            role="banner"
-            class="${core.cls('gp-absolute gp-inset-0 gp-left-[var(--left)] gp-top-[var(--top)] gp-transition-all gp-duration-300 group-hover/hero:gp-bg-[color:var(--hvr-bgc,_var(--bgc))] group-hover/hero:gp-opacity-[var(--hvr-op,_var(--op))]', core.getGlobalColorStateClass('bg', overlayColor))}"
-            style="${{
-        ...core.getGlobalColorStateStyle('bgc', overlayColor),
-        '--top': 0,
-        '--left': 0,
-        ...core.makeStyleState('op', overlayOpacity)
-    }}"
-          > </div>`)}
-          </div>
-          ${core.RenderIf(!!link?.link, `<a
-              href="${urlData?.href}"
-              target="${urlData?.target}"
-              aria-label="Hero banner link"
-              class="gp-absolute gp-inset-0 gp-z-1"
-            > </a>`)}
-          ${Row_liquid.default({
-        className: core.cls('gp-hero-banner-row gp-z-1 gp-w-full', common.getClassForContentByFitContent(sizeSetting, background), common.getClassForStretchContent(verticalAlign), common.getClassSpaceBetween(setting?.layout || {}, styles?.contentPosition1Col || {}, styles?.contentPosition2Col || {})),
-        setting: {
-            layout,
-            horizontalAlign: rowHorizontalAlign,
-            verticalAlign,
-            order
-        },
-        styles: {
-            verticalGutter,
-            width: common.getWidth(contentWidth),
-            fullWidth: {
-                desktop: false,
-                tablet: false,
-                mobile: false
-            }
-        },
-        style: {
-            ...contentPaddingStyle
-        },
-        children,
-        rawChildren
-    })}
-        </div>
+        ${core.RenderIf(!link?.link, renderInnerHeroBanner())}
+        ${core.RenderIf(!!link?.link, core.template /* liquid */ `
+          <div
+            data-hero-banner-link="true"
+            aria-label="Hero banner link"
+            class="${core.cls(link?.link ? 'gp-cursor-pointer' : '')}"
+          >
+            ${renderInnerHeroBanner()}
+          </div>`)}
       </gp-hero-banner>
     </div>
-    ${core.RenderIf(core.isLocalEnv, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-hero-banner.js' | asset_url }}" defer="defer"></script>`, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="${core.baseAssetURL}/assets-v2/gp-hero-banner.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+    ${core.RenderIf(core.isLocalEnv, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-hero-banner.js' | asset_url }}" defer="defer"></script>`, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="${core.baseAssetURL}/assets-v2/gp-hero-banner.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, makeStyle, getSingleColorVariable, getRadiusStyleActiveState, getStyleBgColor, getGradientBgrStyleByDevice, getStyleShadow, getAspectRatioGlobalSize, getStyleBackgroundByDevice, getResponsiveValueByScreen, RenderIf, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, isLocalEnv, baseAssetURL } from '@gem-sdk/core';
+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, getClassContentPosition, getDisplayStyleByFitContent, getClassForContentByFitContent, getClassForStretchContent, getClassSpaceBetween, getWidth, getResponsiveSetting, getBgImage } from '../../helpers/common.js';
+import { getVisibilityStyle, getMarginStyle, getStyleAspectRatioHeroBannerCustom, removeMarginStyle, getContentPosition, mapContentPositionToHorizontal, getClassJustify, getResponsiveSetting, getClassContentPosition, getDisplayStyleByFitContent, 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';
@@ -130,6 +130,140 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
         tablet: createBlurDataURL(srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0),
         mobile: createBlurDataURL(srcSet?.mobile?.width ?? srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.mobile?.height ?? srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0)
     };
+    const renderInnerHeroBanner = ()=>{
+        return template /* liquid */ `
+      <div
+        class="${cls('gp-relative gp-flex gp-flex-col gp-items-center gp-overflow-hidden gp_haslazybg', {
+            ...getClassContentPosition(contentPosition || {})
+        })}"
+        style="${{
+            ...styleHeight,
+            ...styleAspectRatio,
+            ...makeStyle({
+                bs: borderBg?.border ?? borderBg?.border,
+                bw: borderBg?.width ?? borderBg?.width,
+                bc: getSingleColorVariable(borderBg?.color)
+            }),
+            ...getRadiusStyleActiveState({
+                ...cornerBg,
+                active: {
+                    ...cornerBg || {},
+                    radiusType: 'custom'
+                }
+            }),
+            ...background ? {
+                ...getStyleBgColor(background)
+            } : {},
+            ...getGradientBgrStyleByDevice(background, bgiEnableByDevice),
+            ...getStyleShadow({
+                value: shadowBg,
+                styleAppliedFor: 'box-shadow',
+                isEnableShadow: hasActiveShadow
+            })
+        }}"
+      >
+        ${AdaptiveImage({
+            priority: setting?.preload,
+            pictureClass: 'gp-w-full',
+            srcSet: srcSet,
+            className: `adaptive-hero-banner`,
+            aspectRatio: getAspectRatioGlobalSize(sizeSetting),
+            style: {
+                ...getDisplayStyleByFitContent(sizeSetting, background),
+                ...styleHeight,
+                ...styleWidthShapeOriginal,
+                ...styleWidth,
+                '--op': 0,
+                '--z': -1
+            },
+            alt,
+            title,
+            imagePlaceholder,
+            enableLazyloadImage
+        })}
+        <div class="${cls('gp-absolute gp-w-full gp-h-full')}">
+          <div
+            class="${cls('gp-overflow-hidden gp-relative gp-w-full gp-h-full')}"
+            >
+            <div
+              aria-label="Background Image"
+              role="banner"
+              class='gp-hero-banner-bg gp-absolute gp-overflow-hidden gp-w-full gp-h-full top-0 left-0'
+              style="${{
+            'clip-path': getClipPath(borderBg?.width, cornerBg)
+        }}"
+            > 
+            <div class="${cls('hero-banner-bg-parallax gp-hero-banner-image-background gp_lazybg', {
+            'gp-duration-[var(--duration)] group-hover/hero:gp-scale-[var(--scale)]': hoverEffect,
+            'gp-transition-transform': hoverEffect
+        })}"
+              style="${{
+            ...getStyleBackgroundByDevice(background, {
+                ignoreBgAttachment: true,
+                ignoreBackgroundImage: true,
+                liquid: true
+            }),
+            ...makeStyleResponsive('bgi', {
+                desktop: `url('${bgiEnableByDevice['desktop'] ? setting?.preload || !enableLazyloadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
+                tablet: `url('${bgiEnableByDevice['tablet'] ? setting?.preload || !enableLazyloadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
+                mobile: `url('${bgiEnableByDevice['mobile'] ? setting?.preload || !enableLazyloadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
+            }),
+            '--duration': `${hoverEffectDuration ?? 0}s`,
+            '--scale': hoverEffectScale ?? 1,
+            ...makeStyleResponsive('pos', getAttachmentDevice()),
+            ...getStyleHeroBannerBg(backgroundResponsive || {}, enableParallax)
+        }}"
+            >
+            ${!setting?.preload ? DEVICES.map((device)=>{
+            return RenderIf(getEnableBgImageByDevice(device), NextImage({
+                src: getImageSrc(getResponsiveValueByScreen(srcSet, device), device),
+                alt: `lazy image ${device}`,
+                className: `gp-absolute gp-top-0 gp-invisible gp-w-full gp_lazyload gp-h-full gp_lazyforbg ${device === 'tablet' ? 'gp_lazybg_tl' : ''} ${device === 'mobile' ? 'gp_lazybg_mb' : ''}`,
+                isDisableAspectStyle: true,
+                enableLazyloadImage
+            }));
+        }).join('') : ''}
+            </div>  
+            ${embed()} </div>
+          </div>
+          ${RenderIf(overlayEnable, template`<div
+              aria-label="Overlay"
+              role="banner"
+              class="${cls('gp-absolute gp-inset-0 gp-left-[var(--left)] gp-top-[var(--top)] gp-transition-all gp-duration-300 group-hover/hero:gp-bg-[color:var(--hvr-bgc,_var(--bgc))] group-hover/hero:gp-opacity-[var(--hvr-op,_var(--op))]', getGlobalColorStateClass('bg', overlayColor))}"
+            style="${{
+            ...getGlobalColorStateStyle('bgc', overlayColor),
+            '--top': 0,
+            '--left': 0,
+            ...makeStyleState('op', overlayOpacity)
+        }}"> 
+            </div>`)}
+          </div>
+          ${Row({
+            className: cls('gp-hero-banner-row gp-z-1 gp-w-full', getClassForContentByFitContent(sizeSetting, background), getClassForStretchContent(verticalAlign), getClassSpaceBetween(setting?.layout || {}, styles?.contentPosition1Col || {}, styles?.contentPosition2Col || {})),
+            setting: {
+                layout,
+                horizontalAlign: rowHorizontalAlign,
+                verticalAlign,
+                order
+            },
+            styles: {
+                verticalGutter,
+                width: getWidth(contentWidth),
+                fullWidth: {
+                    desktop: false,
+                    tablet: false,
+                    mobile: false
+                }
+            },
+            style: {
+                ...contentPaddingStyle
+            },
+            children,
+            rawChildren
+        })}
+      </div>
+    `;
+    };
     return template`
     <div class="${cls('gp-flex gp-w-full', getClassJustify(alignBannerData))}" style="${{
         ...styleHeight,
@@ -138,6 +272,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
     }}">
       <gp-hero-banner
         gp-data='${dataStringify({
+        target: urlData?.target ?? '_blank',
         background: backgroundResponsive,
         uid: builderProps?.uid,
         enableParallax,
@@ -149,6 +284,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
         contentPosition2Col: styles?.contentPosition2Col,
         aspectRatio: setting?.aspectRatio
     }).replaceAll("'", '&#039;')}'
+        gp-href="${urlData.href}"
         ${{
         ...builderAttrs
     }}
@@ -162,145 +298,19 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
     }}"
         data-id="${builderProps?.uid}"
       >
-        <div
-        class="${cls('gp-relative gp-flex gp-flex-col gp-items-center gp-overflow-hidden gp_haslazybg', {
-        ...getClassContentPosition(contentPosition || {})
-    })}"
-          style="${{
-        ...styleHeight,
-        ...styleAspectRatio,
-        ...makeStyle({
-            bs: borderBg?.border ?? borderBg?.border,
-            bw: borderBg?.width ?? borderBg?.width,
-            bc: getSingleColorVariable(borderBg?.color)
-        }),
-        ...getRadiusStyleActiveState({
-            ...cornerBg,
-            active: {
-                ...cornerBg || {},
-                radiusType: 'custom'
-            }
-        }),
-        ...background ? {
-            ...getStyleBgColor(background)
-        } : {},
-        ...getGradientBgrStyleByDevice(background, bgiEnableByDevice),
-        ...getStyleShadow({
-            value: shadowBg,
-            styleAppliedFor: 'box-shadow',
-            isEnableShadow: hasActiveShadow
-        })
-    }}"
-        >
-          ${AdaptiveImage({
-        priority: setting?.preload,
-        pictureClass: 'gp-w-full',
-        srcSet: srcSet,
-        className: `adaptive-hero-banner`,
-        aspectRatio: getAspectRatioGlobalSize(sizeSetting),
-        style: {
-            ...getDisplayStyleByFitContent(sizeSetting, background),
-            ...styleHeight,
-            ...styleWidthShapeOriginal,
-            ...styleWidth,
-            '--op': 0,
-            '--z': -1
-        },
-        alt,
-        title,
-        imagePlaceholder,
-        enableLazyloadImage
-    })}
-          <div class="${cls('gp-absolute gp-w-full gp-h-full')}">
-            <div
-              class="${cls('gp-overflow-hidden gp-relative gp-w-full gp-h-full')}"
-              >
-              <div
-                aria-label="Background Image"
-                role="banner"
-                class='gp-hero-banner-bg gp-absolute gp-overflow-hidden gp-w-full gp-h-full top-0 left-0'
-                style="${{
-        'clip-path': getClipPath(borderBg?.width, cornerBg)
-    }}"
-              > 
-              <div class="${cls('hero-banner-bg-parallax gp-hero-banner-image-background gp_lazybg', {
-        'gp-duration-[var(--duration)] group-hover/hero:gp-scale-[var(--scale)]': hoverEffect,
-        'gp-transition-transform': hoverEffect
-    })}"
-              style="${{
-        ...getStyleBackgroundByDevice(background, {
-            ignoreBgAttachment: true,
-            ignoreBackgroundImage: true,
-            liquid: true
-        }),
-        ...makeStyleResponsive('bgi', {
-            desktop: `url('${bgiEnableByDevice['desktop'] ? setting?.preload || !enableLazyloadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
-            tablet: `url('${bgiEnableByDevice['tablet'] ? setting?.preload || !enableLazyloadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
-            mobile: `url('${bgiEnableByDevice['mobile'] ? setting?.preload || !enableLazyloadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
-        }),
-        '--duration': `${hoverEffectDuration ?? 0}s`,
-        '--scale': hoverEffectScale ?? 1,
-        ...makeStyleResponsive('pos', getAttachmentDevice()),
-        ...getStyleHeroBannerBg(backgroundResponsive || {}, enableParallax)
-    }}"
-             >
-             ${!setting?.preload ? DEVICES.map((device)=>{
-        return RenderIf(getEnableBgImageByDevice(device), NextImage({
-            src: getImageSrc(getResponsiveValueByScreen(srcSet, device), device),
-            alt: `lazy image ${device}`,
-            className: `gp-absolute gp-top-0 gp-invisible gp-w-full gp_lazyload gp-h-full gp_lazyforbg ${device === 'tablet' ? 'gp_lazybg_tl' : ''} ${device === 'mobile' ? 'gp_lazybg_mb' : ''}`,
-            isDisableAspectStyle: true,
-            enableLazyloadImage
-        }));
-    }).join('') : ''}
-              </div>  
-              ${embed()} </div>
-            </div>
-            ${RenderIf(overlayEnable, template`<div
-            aria-label="Overlay"
-            role="banner"
-            class="${cls('gp-absolute gp-inset-0 gp-left-[var(--left)] gp-top-[var(--top)] gp-transition-all gp-duration-300 group-hover/hero:gp-bg-[color:var(--hvr-bgc,_var(--bgc))] group-hover/hero:gp-opacity-[var(--hvr-op,_var(--op))]', getGlobalColorStateClass('bg', overlayColor))}"
-            style="${{
-        ...getGlobalColorStateStyle('bgc', overlayColor),
-        '--top': 0,
-        '--left': 0,
-        ...makeStyleState('op', overlayOpacity)
-    }}"
-          > </div>`)}
-          </div>
-          ${RenderIf(!!link?.link, `<a
-              href="${urlData?.href}"
-              target="${urlData?.target}"
-              aria-label="Hero banner link"
-              class="gp-absolute gp-inset-0 gp-z-1"
-            > </a>`)}
-          ${Row({
-        className: cls('gp-hero-banner-row gp-z-1 gp-w-full', getClassForContentByFitContent(sizeSetting, background), getClassForStretchContent(verticalAlign), getClassSpaceBetween(setting?.layout || {}, styles?.contentPosition1Col || {}, styles?.contentPosition2Col || {})),
-        setting: {
-            layout,
-            horizontalAlign: rowHorizontalAlign,
-            verticalAlign,
-            order
-        },
-        styles: {
-            verticalGutter,
-            width: getWidth(contentWidth),
-            fullWidth: {
-                desktop: false,
-                tablet: false,
-                mobile: false
-            }
-        },
-        style: {
-            ...contentPaddingStyle
-        },
-        children,
-        rawChildren
-    })}
-        </div>
+        ${RenderIf(!link?.link, renderInnerHeroBanner())}
+        ${RenderIf(!!link?.link, template /* liquid */ `
+          <div
+            data-hero-banner-link="true"
+            aria-label="Hero banner link"
+            class="${cls(link?.link ? 'gp-cursor-pointer' : '')}"
+          >
+            ${renderInnerHeroBanner()}
+          </div>`)}
       </gp-hero-banner>
     </div>
-    ${RenderIf(isLocalEnv, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-hero-banner.js' | asset_url }}" defer="defer"></script>`, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="${baseAssetURL}/assets-v2/gp-hero-banner.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+    ${RenderIf(isLocalEnv, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-hero-banner.js' | asset_url }}" defer="defer"></script>`, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="${baseAssetURL}/assets-v2/gp-hero-banner.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>
+`)}
   `;
 };
 

package/package.json

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