@gem-sdk/components 12.0.3 → 12.0.5

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

@@ -1,19 +1,19 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var HeroBannerItem_liquid=require("./HeroBannerItem.liquid.js"),attrs=require("../common/attrs.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),system=require("@gem-sdk/system"),core=require("@gem-sdk/core"),helpers=require("../../helpers.js"),helpers$1=require("../common/helpers.js");const HeroBanner=e=>{let{builderAttrs:s,builderProps:t,setting:r,styles:a,style:l,children:o,advanced:n,pageContext:i}=e,{enableLazyLoadImage:c}=i??{},{enableLink:d}=r??{},p=helpers$1.getBannerLink(r),{cssClass:u}=n??{},{urlData:m}=helpers.getInsertLinkData("",p),f=system.createStateOrContext({background:helpers$1.getResponsiveSetting(a?.background||{}),uid:t?.uid,enableParallax:Number(r?.speedParallax||0)>0,speedParallax:Number(r?.speedParallax)||0,hoverEffect:a?.hoverEffect,hoverEffectScale:a?.hoverEffectScale,layout:r?.layout,contentPosition1Col:a?.contentPosition1Col,contentPosition2Col:a?.contentPosition2Col,aspectRatio:r?.aspectRatio,target:p?.target??"_self",href:m?.href??"",linkType:p?.type??"",hoverEffectDuration:a?.hoverEffectDuration}),g=!!p?.link&&d,y=system.createAttr({...attrs.getAttr({uid:t?.uid||""})}),h=system.createAttr(attrs.getAttrLink()),v=system.createStyle({...styles.getStyle(a,r,l)}),$=system.createClass({...classes.getClasses({setting:r,builderProps:t,advancedCssClass:u})}),S=system.createClass({...classes.getLinkClasses()}),C=()=>HeroBannerItem_liquid.default({setting:r,styles:a,children:o,enableLazyLoadImage:c,rawChildren:e.rawChildren,builderProps:t});return core.template`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var HeroBannerItem_liquid=require("./HeroBannerItem.liquid.js"),attrs=require("../common/attrs.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),system=require("@gem-sdk/system"),core=require("@gem-sdk/core"),helpers=require("../../helpers.js"),helpers$1=require("../common/helpers.js");const HeroBanner=e=>{let{builderAttrs:s,builderProps:t,setting:r,styles:a,style:l,children:o,advanced:n,pageContext:i}=e,{enableLazyLoadImage:c}=i??{},{enableLink:d,enableParallax:p}=r??{},u=helpers$1.getBannerLink(r),{cssClass:m}=n??{},{urlData:f}=helpers.getInsertLinkData("",u),g=system.createStateOrContext({background:helpers$1.getResponsiveSetting(a?.background||{}),uid:t?.uid,enableParallax:p&&Number(r?.speedParallax||0)>0,speedParallax:Number(r?.speedParallax)||0,hoverEffect:a?.hoverEffect,hoverEffectScale:a?.hoverEffectScale,layout:r?.layout,contentPosition1Col:a?.contentPosition1Col,contentPosition2Col:a?.contentPosition2Col,aspectRatio:r?.aspectRatio,target:u?.target??"_self",href:f?.href??"",linkType:u?.type??"",hoverEffectDuration:a?.hoverEffectDuration}),y=!!u?.link&&d,h=system.createAttr({...attrs.getAttr({uid:t?.uid||""})}),v=system.createAttr(attrs.getAttrLink()),$=system.createStyle({...styles.getStyle(a,r,l)}),S=system.createClass({...classes.getClasses({setting:r,builderProps:t,advancedCssClass:m})}),C=system.createClass({...classes.getLinkClasses()}),k=()=>HeroBannerItem_liquid.default({setting:r,styles:a,children:o,enableLazyLoadImage:c,rawChildren:e.rawChildren,builderProps:t});return core.template`
       <gp-hero-banner
         ${{...s}}
-        ${{...y}}
-        class="${$}"
-        style="${v}"
-        gp-data='${core.dataStringify(f)}'
+        ${{...h}}
+        class="${S}"
+        style="${$}"
+        gp-data='${core.dataStringify(g)}'
       >
-        ${system.If(!g,C())}
-        ${system.If(g,core.template`
+        ${system.If(!y,k())}
+        ${system.If(y,core.template`
           <div
-            ${{...h}}
+            ${{...v}}
             aria-hidden="true"
-            class="${S}"
+            class="${C}"
           >
-            ${C()}
+            ${k()}
           </div>`)}
       </gp-hero-banner>
        ${core.RenderIf(core.isLocalEnv,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-hero-banner-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="${core.baseAssetURL}/assets-v2/gp-hero-banner-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>

package/dist/cjs/hero-banner/hooks/useHeroBanner.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),core=require("@gem-sdk/core"),useTranslateValue=require("./useTranslateValue.js"),useIntersectionObserver=require("./useIntersectionObserver.js"),helpers=require("../common/helpers.js"),animationManager=require("../common/animation-manager.js");const useHeroBanner=(e,t,r)=>{let{hoverEffect:a,hoverEffectScale:n,background:s}=e||{},{link:u}=t||{},l=Number(t?.speedParallax)||0,[i,o]=React.useState(0),[c,g]=React.useState(null),[d,m]=React.useState(null),[p,R]=React.useState(""),f=React.useRef(null),[v,B]=useIntersectionObserver.default(),{translateValue:b}=useTranslateValue.useTranslateValue({containerBoundingClientRect:c,backgroundBoundingClientRect:d,speed:l}),x=core.getResponsiveValueByScreen(t?.layout,r),M=helpers.getResponsiveSetting(s||{}),q=Number(t?.speedParallax||0)>0&&M[r]?.type==="image",y=()=>{a&&q&&R(`${p} scale(${n||"100%"})`)},S=()=>{a&&q&&R(`translateY(${b}px)`)},V=e=>{u?.link&&!e?.srcElement?.closest("a")&&window.open(u?.link,u.target)};React.useEffect(()=>{q?R(`translateY(${b}px)`):R("")},[b,q]);let j=React.useCallback(()=>{if(!q||0===l||!B)return;let e=Number(window.scrollY.toFixed(0));i!==e&&(g(v?.current?v?.current?.getBoundingClientRect():null),m(f?.current?f?.current?.getBoundingClientRect():null),o(e))},[i,B,q,l,v,f]),H=core.getBgVideoByDevice(s,r),T=React.useMemo(()=>!!(H?.videoHtml5&&"html5"===H.videoType),[H]);return React.useEffect(()=>(animationManager.default.register(j),()=>{animationManager.default.unregister(j)}),[j]),React.useEffect(()=>(animationManager.default.register(j),()=>{animationManager.default.unregister(j)}),[j]),{onMouseEnterParallax:y,onMouseLeaveParallax:S,bgRef:f,transform:p,elementRef:v,dataVideo:H,isShowVideoHtml5:T,openLinkBanner:V,layoutResponsive:x}};exports.default=useHeroBanner,exports.useHeroBanner=useHeroBanner;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),core=require("@gem-sdk/core"),useTranslateValue=require("./useTranslateValue.js"),useIntersectionObserver=require("./useIntersectionObserver.js"),helpers=require("../common/helpers.js"),animationManager=require("../common/animation-manager.js");const useHeroBanner=(e,t,r)=>{let{hoverEffect:a,hoverEffectScale:n,background:s}=e||{},{link:u,enableParallax:l}=t||{},i=Number(t?.speedParallax)||0,[o,c]=React.useState(0),[g,d]=React.useState(null),[m,p]=React.useState(null),[R,f]=React.useState(""),v=React.useRef(null),[B,b]=useIntersectionObserver.default(),{translateValue:x}=useTranslateValue.useTranslateValue({containerBoundingClientRect:g,backgroundBoundingClientRect:m,speed:i}),M=core.getResponsiveValueByScreen(t?.layout,r),q=helpers.getResponsiveSetting(s||{}),y=l&&Number(t?.speedParallax||0)>0&&q[r]?.type==="image"||!1,S=()=>{a&&y&&f(`${R} scale(${n||"100%"})`)},V=()=>{a&&y&&f(`translateY(${x}px)`)},j=e=>{u?.link&&!e?.srcElement?.closest("a")&&window.open(u?.link,u.target)};React.useEffect(()=>{y?f(`translateY(${x}px)`):f("")},[x,y]);let H=React.useCallback(()=>{if(!y||0===i||!b)return;let e=Number(window.scrollY.toFixed(0));o!==e&&(d(B?.current?B?.current?.getBoundingClientRect():null),p(v?.current?v?.current?.getBoundingClientRect():null),c(e))},[o,b,y,i,B,v]),T=core.getBgVideoByDevice(s,r),h=React.useMemo(()=>!!(T?.videoHtml5&&"html5"===T.videoType),[T]);return React.useEffect(()=>(animationManager.default.register(H),()=>{animationManager.default.unregister(H)}),[H]),React.useEffect(()=>(animationManager.default.register(H),()=>{animationManager.default.unregister(H)}),[H]),{onMouseEnterParallax:S,onMouseLeaveParallax:V,bgRef:v,transform:R,elementRef:B,dataVideo:T,isShowVideoHtml5:h,openLinkBanner:j,layoutResponsive:M}};exports.default=useHeroBanner,exports.useHeroBanner=useHeroBanner;

package/dist/esm/hero-banner/components/HeroBanner.liquid.js

@@ -1,19 +1,19 @@
-import e from"./HeroBannerItem.liquid.js";import{getAttr as r,getAttrLink as o}from"../common/attrs.js";import{getStyle as s}from"../common/styles.js";import{getClasses as t,getLinkClasses as a}from"../common/classes.js";import{createStateOrContext as n,createAttr as l,createStyle as i,createClass as c,If as m}from"@gem-sdk/system";import{template as p,dataStringify as d,RenderIf as f,isLocalEnv as h,baseAssetURL as u}from"@gem-sdk/core";import{getInsertLinkData as $,getSettingPreloadData as g}from"../../helpers.js";import{getResponsiveSetting as v,getBannerLink as E}from"../common/helpers.js";let HeroBanner=b=>{let{builderAttrs:y,builderProps:P,setting:j,styles:k,style:C,children:S,advanced:x,pageContext:B}=b,{enableLazyLoadImage:H}=B??{},{enableLink:N}=j??{},R=E(j),{cssClass:_}=x??{},{urlData:w}=$("",R),A=n({background:v(k?.background||{}),uid:P?.uid,enableParallax:Number(j?.speedParallax||0)>0,speedParallax:Number(j?.speedParallax)||0,hoverEffect:k?.hoverEffect,hoverEffectScale:k?.hoverEffectScale,layout:j?.layout,contentPosition1Col:k?.contentPosition1Col,contentPosition2Col:k?.contentPosition2Col,aspectRatio:j?.aspectRatio,target:R?.target??"_self",href:w?.href??"",linkType:R?.type??"",hoverEffectDuration:k?.hoverEffectDuration}),D=!!R?.link&&N,G=l({...r({uid:P?.uid||""})}),I=l(o()),T=i({...s(k,j,C)}),q=c({...t({setting:j,builderProps:P,advancedCssClass:_})}),M=c({...a()}),O=()=>e({setting:j,styles:k,children:S,enableLazyLoadImage:H,rawChildren:b.rawChildren,builderProps:P});return p`
+import e from"./HeroBannerItem.liquid.js";import{getAttr as r,getAttrLink as o}from"../common/attrs.js";import{getStyle as s}from"../common/styles.js";import{getClasses as t,getLinkClasses as a}from"../common/classes.js";import{createStateOrContext as n,createAttr as l,createStyle as i,createClass as c,If as m}from"@gem-sdk/system";import{template as p,dataStringify as d,RenderIf as f,isLocalEnv as h,baseAssetURL as u}from"@gem-sdk/core";import{getInsertLinkData as $,getSettingPreloadData as g}from"../../helpers.js";import{getResponsiveSetting as v,getBannerLink as E}from"../common/helpers.js";let HeroBanner=b=>{let{builderAttrs:y,builderProps:P,setting:j,styles:k,style:C,children:S,advanced:x,pageContext:B}=b,{enableLazyLoadImage:H}=B??{},{enableLink:N,enableParallax:R}=j??{},_=E(j),{cssClass:w}=x??{},{urlData:A}=$("",_),D=n({background:v(k?.background||{}),uid:P?.uid,enableParallax:R&&Number(j?.speedParallax||0)>0,speedParallax:Number(j?.speedParallax)||0,hoverEffect:k?.hoverEffect,hoverEffectScale:k?.hoverEffectScale,layout:j?.layout,contentPosition1Col:k?.contentPosition1Col,contentPosition2Col:k?.contentPosition2Col,aspectRatio:j?.aspectRatio,target:_?.target??"_self",href:A?.href??"",linkType:_?.type??"",hoverEffectDuration:k?.hoverEffectDuration}),G=!!_?.link&&N,I=l({...r({uid:P?.uid||""})}),T=l(o()),q=i({...s(k,j,C)}),M=c({...t({setting:j,builderProps:P,advancedCssClass:w})}),O=c({...a()}),V=()=>e({setting:j,styles:k,children:S,enableLazyLoadImage:H,rawChildren:b.rawChildren,builderProps:P});return p`
       <gp-hero-banner
         ${{...y}}
-        ${{...G}}
-        class="${q}"
-        style="${T}"
-        gp-data='${d(A)}'
+        ${{...I}}
+        class="${M}"
+        style="${q}"
+        gp-data='${d(D)}'
       >
-        ${m(!D,O())}
-        ${m(D,p`
+        ${m(!G,V())}
+        ${m(G,p`
           <div
-            ${{...I}}
+            ${{...T}}
             aria-hidden="true"
-            class="${M}"
+            class="${O}"
           >
-            ${O()}
+            ${V()}
           </div>`)}
       </gp-hero-banner>
        ${f(h,`<script ${g('class="gps-link" delay',"src")}="{{ 'gp-hero-banner-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${g('class="gps-link" delay',"src")}="${u}/assets-v2/gp-hero-banner-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>

package/dist/esm/hero-banner/hooks/useHeroBanner.js

@@ -1 +1 @@
-import{useState as e,useRef as r,useEffect as t,useCallback as n,useMemo as l}from"react";import{getResponsiveValueByScreen as o,getBgVideoByDevice as s}from"@gem-sdk/core";import{useTranslateValue as a}from"./useTranslateValue.js";import i from"./useIntersectionObserver.js";import{getResponsiveSetting as m}from"../common/helpers.js";import u from"../common/animation-manager.js";let useHeroBanner=(p,c,d)=>{let{hoverEffect:g,hoverEffectScale:f,background:x}=p||{},{link:B}=c||{},b=Number(c?.speedParallax)||0,[j,w]=e(0),[H,$]=e(null),[k,v]=e(null),[y,N]=e(""),Y=r(null),[h,C]=i(),{translateValue:P}=a({containerBoundingClientRect:H,backgroundBoundingClientRect:k,speed:b}),R=o(c?.layout,d),T=m(x||{}),E=Number(c?.speedParallax||0)>0&&T[d]?.type==="image",F=()=>{g&&E&&N(`${y} scale(${f||"100%"})`)},I=()=>{g&&E&&N(`translateY(${P}px)`)},O=e=>{B?.link&&!e?.srcElement?.closest("a")&&window.open(B?.link,B.target)};t(()=>{E?N(`translateY(${P}px)`):N("")},[P,E]);let V=n(()=>{if(!E||0===b||!C)return;let e=Number(window.scrollY.toFixed(0));j!==e&&($(h?.current?h?.current?.getBoundingClientRect():null),v(Y?.current?Y?.current?.getBoundingClientRect():null),w(e))},[j,C,E,b,h,Y]),q=s(x,d),z=l(()=>!!(q?.videoHtml5&&"html5"===q.videoType),[q]);return t(()=>(u.register(V),()=>{u.unregister(V)}),[V]),t(()=>(u.register(V),()=>{u.unregister(V)}),[V]),{onMouseEnterParallax:F,onMouseLeaveParallax:I,bgRef:Y,transform:y,elementRef:h,dataVideo:q,isShowVideoHtml5:z,openLinkBanner:O,layoutResponsive:R}};export{useHeroBanner as default,useHeroBanner};
+import{useState as e,useRef as r,useEffect as t,useCallback as n,useMemo as l}from"react";import{getResponsiveValueByScreen as o,getBgVideoByDevice as s}from"@gem-sdk/core";import{useTranslateValue as a}from"./useTranslateValue.js";import i from"./useIntersectionObserver.js";import{getResponsiveSetting as m}from"../common/helpers.js";import u from"../common/animation-manager.js";let useHeroBanner=(p,c,d)=>{let{hoverEffect:g,hoverEffectScale:f,background:x}=p||{},{link:B,enableParallax:b}=c||{},j=Number(c?.speedParallax)||0,[w,H]=e(0),[$,k]=e(null),[v,y]=e(null),[N,Y]=e(""),h=r(null),[C,P]=i(),{translateValue:R}=a({containerBoundingClientRect:$,backgroundBoundingClientRect:v,speed:j}),T=o(c?.layout,d),E=m(x||{}),F=b&&Number(c?.speedParallax||0)>0&&E[d]?.type==="image"||!1,I=()=>{g&&F&&Y(`${N} scale(${f||"100%"})`)},O=()=>{g&&F&&Y(`translateY(${R}px)`)},V=e=>{B?.link&&!e?.srcElement?.closest("a")&&window.open(B?.link,B.target)};t(()=>{F?Y(`translateY(${R}px)`):Y("")},[R,F]);let q=n(()=>{if(!F||0===j||!P)return;let e=Number(window.scrollY.toFixed(0));w!==e&&(k(C?.current?C?.current?.getBoundingClientRect():null),y(h?.current?h?.current?.getBoundingClientRect():null),H(e))},[w,P,F,j,C,h]),z=s(x,d),A=l(()=>!!(z?.videoHtml5&&"html5"===z.videoType),[z]);return t(()=>(u.register(q),()=>{u.unregister(q)}),[q]),t(()=>(u.register(q),()=>{u.unregister(q)}),[q]),{onMouseEnterParallax:I,onMouseLeaveParallax:O,bgRef:h,transform:N,elementRef:C,dataVideo:z,isShowVideoHtml5:A,openLinkBanner:V,layoutResponsive:T}};export{useHeroBanner as default,useHeroBanner};

package/package.json

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