@gem-sdk/components 19.0.0-staging.8 → 19.0.0

package/dist/esm/estimate-delivery/common/helpers.js

@@ -1 +1 @@
-import e from"../../text/components/TextInline.js";import{getDynamicSourceLocales as t,createSettingId as a}from"../../helpers.js";import{createClass as r}from"@gem-sdk/system";import{getStyleEstimateDate as u}from"./styles.js";import{EstimateDate as l}from"../settings/configs/translate.js";let n=e=>e?"number"==typeof e?e:Number(e.split("days")[0]):0,s=e=>{let t=new Date(Date.now()),a=n(e?.estimateTime),r=n(e?.minEstimate),u=n(e?.maxEstimate),l=e?.typeFormat==="Custom"?e?.customFormat:e?.typeFormat;if(!l)return"";if(e?.typeEstimate===d.SPECIFIC){let e=`${p(g(a),l)}`;return e}p(t);let s=`${p(g(r),l)} - ${p(g(u),l)}`;return s},i=e=>{switch(e?.htmlTag){case 1:return"h1";case 2:return"h2";case 3:return"h3";case 4:return"h4";case 5:return"h5";case 6:return"h6";default:return"div"}},o=({type:e,styles:t,setting:a,builderProps:r,pageContext:u})=>{let l="React"===e,n=m({type:e,styles:t,setting:a,builderProps:r,pageContext:u});return{text:n,htmlTag:i(a),globalSize:a?.globalSize,background:a?.background,...!l&&{isForceValue:!0}}},m=({type:n,styles:i,setting:o,builderProps:m,pageContext:y})=>{let d="React"===n,p=r({"estimate-date-main":!0}),g=d||y?.isPreviewing?o?.customText:t({val:o?.customText,uid:m?.uid,settingId:a({id:l?.customText?.id}),pageContext:y??{},isCapitalize:i?.typo?.attrs?.transform==="capitalize"}).toString();return`${o?.enableCustomText===!1?"":e({styles:u(i,"typoCustom"),setting:{text:g},elementAttrs:{debugText:JSON.stringify({pageContext:y,setting:o,isReact:d,builderProps:m,textWithTranslate:g}).replaceAll("'","'")}})} ${e({styles:u(i,"typoDate"),setting:{text:s(o)},className:p})}`},y={SHOW:"show",HIDE:"hide"},d={SPECIFIC:"specific",RANGE:"range"},p=(e,t="%B %d, %Y")=>{let a=e.getMonth()+1,r=e.getDate(),u=e.getFullYear(),l=[{type:"%a",value:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"][e.getDay()]},{type:"%A",value:["Sunday","Monday","Tueday","Wednesday","Thursday","Friday","Saturday"][e.getDay()]},{type:"%d",value:r.toString().padStart(2,"0")},{type:"%b",value:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][a-1]},{type:"%B",value:["January","February","March","April","May","June","July","August","September","October","November","December"][a-1]},{type:"%m",value:a.toString().padStart(2,"0")},{type:"%y",value:u.toString().slice(-2)},{type:"%Y",value:u},{type:"%sf",value:function(e){let t=Math.floor(e/10)%10,a=e%10;return 1===a&&1!==t?"st":2===a&&1!==t?"nd":3===a&&1!==t?"rd":"th"}(r)}];return l.forEach(e=>{t=t.replaceAll(e?.type,e?.value?.toString()||"")}),t},g=e=>{let t=new Date,a=new Date(t);return a.setDate(t.getDate()+Number(e)),a},c=()=>{let e=new Date(Date.now());return{FORMAT_1:{Label:p(e,"%b %d"),value:"%b %d"},FORMAT_2:{Label:p(e,"%b %d, %Y"),value:"%b %d, %Y"},FORMAT_3:{Label:p(e,"%a, %b %d"),value:"%a, %b %d"},FORMAT_4:{Label:p(e,"%d/%m/%Y"),value:"%d/%m/%Y"},FORMAT_5:{Label:p(e,"%Y/%m/%d"),value:"%Y/%m/%d"},FORMAT_6:{Label:"Custom"}}};export{d as ESTIMATE_DAYS,y as OUT_OF_STOCK,p as getDayFormat,g as getFutureDay,o as getNewSetting,c as listFormatDate};
+import e from"../../text/components/TextInline.js";import{getDynamicSourceLocales as t,createSettingId as a}from"../../helpers.js";import{createClass as r}from"@gem-sdk/system";import{getStyleEstimateDate as u}from"./styles.js";import{EstimateDate as l}from"../settings/configs/translate.js";let s=e=>e?"number"==typeof e?e:Number(e.split("days")[0]):0,n=e=>{let t=new Date(Date.now()),a=s(e?.estimateTime),r=s(e?.minEstimate),u=s(e?.maxEstimate),l=e?.typeFormat==="Custom"?e?.customFormat:e?.typeFormat;if(!l)return"";if(e?.typeEstimate===d.SPECIFIC){let e=`${p(g(a),l)}`;return e}p(t);let n=`${p(g(r),l)} - ${p(g(u),l)}`;return n},i=e=>{switch(e?.htmlTag){case 1:return"h1";case 2:return"h2";case 3:return"h3";case 4:return"h4";case 5:return"h5";case 6:return"h6";default:return"div"}},o=({type:e,styles:t,setting:a,builderProps:r,pageContext:u})=>{let l="React"===e,s=m({type:e,styles:t,setting:a,builderProps:r,pageContext:u});return{text:s,htmlTag:i(a),globalSize:a?.globalSize,background:a?.background,...!l&&{isForceValue:!0}}},m=({type:s,styles:i,setting:o,builderProps:m,pageContext:y})=>{let d="React"===s,p=r({"estimate-date-main":!0}),g=d||y?.isPreviewing?o?.customText:t({val:o?.customText,uid:m?.uid,settingId:a({id:l?.customText?.id}),pageContext:y??{},isCapitalize:i?.typo?.attrs?.transform==="capitalize"}).toString();return`${o?.enableCustomText===!1?"":e({styles:u(i,"typoCustom"),setting:{text:g},elementAttrs:{debugText:JSON.stringify({pageContext:y,setting:o,isReact:d,builderProps:m,textWithTranslate:g}).replaceAll("'","'")}})} ${e({styles:u(i,"typoDate"),setting:{text:n(o)},className:p})}`},y={SHOW:"show",HIDE:"hide"},d={SPECIFIC:"specific",RANGE:"range"},p=(e,t="%B %d, %Y")=>{let a=e.getMonth()+1,r=e.getDate(),u=e.getFullYear(),l=[{type:"%a",value:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"][e.getDay()]},{type:"%A",value:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][e.getDay()]},{type:"%d",value:r.toString().padStart(2,"0")},{type:"%b",value:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][a-1]},{type:"%B",value:["January","February","March","April","May","June","July","August","September","October","November","December"][a-1]},{type:"%m",value:a.toString().padStart(2,"0")},{type:"%y",value:u.toString().slice(-2)},{type:"%Y",value:u},{type:"%sf",value:function(e){let t=Math.floor(e/10)%10,a=e%10;return 1===a&&1!==t?"st":2===a&&1!==t?"nd":3===a&&1!==t?"rd":"th"}(r)}];return l.forEach(e=>{t=t.replaceAll(e?.type,e?.value?.toString()||"")}),t},g=e=>{let t=new Date,a=new Date(t);return a.setDate(t.getDate()+Number(e)),a},c=()=>{let e=new Date(Date.now());return{FORMAT_1:{Label:p(e,"%b %d"),value:"%b %d"},FORMAT_2:{Label:p(e,"%b %d, %Y"),value:"%b %d, %Y"},FORMAT_3:{Label:p(e,"%a, %b %d"),value:"%a, %b %d"},FORMAT_4:{Label:p(e,"%d/%m/%Y"),value:"%d/%m/%Y"},FORMAT_5:{Label:p(e,"%Y/%m/%d"),value:"%Y/%m/%d"},FORMAT_6:{Label:"Custom"}}};export{d as ESTIMATE_DAYS,y as OUT_OF_STOCK,p as getDayFormat,g as getFutureDay,o as getNewSetting,c as listFormatDate};

package/dist/esm/grid/components/row/Row.liquid.js

@@ -1,28 +1,28 @@
-import{template as e,WrapRenderChildren as o,RenderChildren as s,RenderIf as r,hasTranslatedLiquid as t,isLocalEnv as i,baseAssetURL as a}from"@gem-sdk/core";import{getBackgroundTranslated as l,getSettingPreloadData as m}from"../../../helpers.js";import p from"../../../video/components/HTML5Embed.liquid.js";import{createClass as d,If as n}from"@gem-sdk/system";import{getYoutubeVideoId as c}from"../../../video/common/helpers.js";import u from"../../../video/components/LiteYouTubeEmbed.liquid.js";import{getAttr as f}from"./common/attrs.js";import{Row as g}from"../../settings/configs/row/translate.js";import{getClass as $}from"./common/classes.js";import{getRowStyle as y}from"./common/styles.js";import{getData as k,checkHasBackgroundVideo as j,isRenderHtmlVideo as v,isRenderYoutubeVideo as b}from"./common/helpers.js";import{getResponsiveSetting as w}from"../../../hero-banner/common/helpers.js";let h=h=>{let{styles:C,setting:E,rawChildren:S,builderProps:q}=h,{isSection:L}=E??{},{background:P}=C??{},T=L?"section":"div",V=l({background:P,uid:q?.uid,enableTranslate:!!g?.background?.id,pageContext:h.pageContext??{}}),{stateData:x}=k(h,V),{rowStyle:z,backgroundBoxStyle:A,embedVideoStyle:N,sectionStyle:R}=y({rowProps:h,type:"Liquid",translatedBackground:V}),{rowAttr:_}=f(h),{rowClass:G,backgroundBoxClass:I,backgroundBoxInnerClass:M,sectionClass:O,wrapperYoutubeClasses:B,iframeYoutubeClasses:H}=$(h),U=d({[G]:!0}),Y=()=>{if(!j(P))return;let e=w(P||{});if(v(P))return p({uid:q?.uid,muted:!0,loop:e.desktop?.loop,controls:!1,autoplay:!0,src:"",title:"Video",className:"gp-relative",style:N});if(b(P)){let o=e?.desktop?.video??"",s=c(o)||"",r=t(o),i=`&loop=false&playlist=${s}&showinfo=0&rel=0&fs=0&enablejsapi=1`;return u({uid:q?.uid,id:s,autoplay:!0,title:"Video",translatedVideoUrl:r?o:"",controls:!1,params:i,adNetwork:!1,noCookie:!0,muted:!0,lazy:e?.desktop?.lazyLoad??!0,style:N,wrapperClass:B,iframeClass:H})}},D=e`
-    <gp-row gp-data='${x}' ${{..._}} class="${U}" style="${z()}">
+import{template as e,WrapRenderChildren as o,RenderChildren as s,RenderIf as r,hasTranslatedLiquid as t,isLocalEnv as i,baseAssetURL as a}from"@gem-sdk/core";import{getBackgroundTranslated as l,getSettingPreloadData as p}from"../../../helpers.js";import m from"../../../video/components/HTML5Embed.liquid.js";import{createClass as d,If as n}from"@gem-sdk/system";import{getYoutubeVideoId as c}from"../../../video/common/helpers.js";import g from"../../../video/components/LiteYouTubeEmbed.liquid.js";import{getAttr as u}from"./common/attrs.js";import{Row as f}from"../../settings/configs/row/translate.js";import{getClass as $}from"./common/classes.js";import{getRowStyle as y}from"./common/styles.js";import{getData as k,checkHasBackgroundVideo as j,isRenderHtmlVideo as v,isRenderYoutubeVideo as b}from"./common/helpers.js";import{getResponsiveSetting as w}from"../../../hero-banner/common/helpers.js";let h=h=>{let{styles:C,setting:x,rawChildren:E,builderProps:S}=h,{isSection:q}=x??{},{background:L}=C??{},P=q?"section":"div",T=l({background:L,uid:S?.uid,enableTranslate:!!f?.background?.id,pageContext:h.pageContext??{}}),{stateData:V}=k(h,T),{rowStyle:z,backgroundBoxStyle:A,embedVideoStyle:N,sectionStyle:R}=y({rowProps:h,type:"Liquid",translatedBackground:T}),{rowAttr:_}=u(h),{rowClass:G,backgroundBoxClass:I,backgroundBoxInnerClass:M,sectionClass:O,wrapperYoutubeClasses:B,iframeYoutubeClasses:H}=$(h),U=d({[G]:!0}),Y=()=>{if(!j(L))return;let e=w(L||{});if(v(L))return m({uid:S?.uid,muted:!0,loop:e.desktop?.loop,controls:!1,autoplay:!0,src:"",title:"Video",className:"gp-relative",style:N,pageContext:h.pageContext});if(b(L)){let o=e?.desktop?.video??"",s=c(o)||"",r=t(o),i=`&loop=false&playlist=${s}&showinfo=0&rel=0&fs=0&enablejsapi=1`;return g({uid:S?.uid,id:s,autoplay:!0,title:"Video",translatedVideoUrl:r?o:"",controls:!1,params:i,adNetwork:!1,noCookie:!0,muted:!0,lazy:e?.desktop?.lazyLoad??!0,style:N,wrapperClass:B,iframeClass:H,pageContext:h.pageContext})}},D=e`
+    <gp-row gp-data='${V}' ${{..._}} class="${U}" style="${z()}">
       ${n(!!Y(),e`
           <div class="${I}" style="${A}">
             <div class="${M}">${Y()}</div>
           </div>
         `)}
 
-      ${o({uid:q?.uid||"",customProps:S?.[0].customProps},S?.map(e=>{if(e)return s({...e,order:E?.order,layout:E?.layout,justifyContent:E?.verticalAlign})}))}
+      ${o({uid:S?.uid||"",customProps:E?.[0].customProps},E?.map(e=>{if(e)return s({...e,order:x?.order,layout:x?.layout,justifyContent:x?.verticalAlign})}))}
 
-      ${(()=>{if(j(P))return e`
-      ${r(i,`<script ${m('class="gps-link" delay',"src")}="{{ 'gp-row-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${m('class="gps-link" delay',"src")}="${a}/assets-v2/gp-row-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+      ${(()=>{if(j(L))return e`
+      ${r(i,`<script ${p('class="gps-link" delay',"src")}="{{ 'gp-row-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${p('class="gps-link" delay',"src")}="${a}/assets-v2/gp-row-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
     `})()}
     </gp-row>
   `;return e`
-    ${r(!!C?.preloadBgImage,`${r(!!P?.desktop?.image?.src,`<link rel="preload" href="${P?.desktop?.image?.src}" as="image" />`)}${r(!!P?.tablet?.image?.src,`<link rel="preload" href="${P?.tablet?.image?.src}" as="image" />`)}${r(!!P?.mobile?.image?.src,`<link rel="preload" href="${P?.mobile?.image?.src}" as="image" />`)}`)}
+    ${r(!!C?.preloadBgImage,`${r(!!L?.desktop?.image?.src,`<link rel="preload" href="${L?.desktop?.image?.src}" as="image" />`)}${r(!!L?.tablet?.image?.src,`<link rel="preload" href="${L?.tablet?.image?.src}" as="image" />`)}${r(!!L?.mobile?.image?.src,`<link rel="preload" href="${L?.mobile?.image?.src}" as="image" />`)}`)}
 
-    ${r(!!L,"{% assign locationOrigin = request.origin | append: routes.root_url | split: '/' | join: '/' %}")}
+    ${r(!!q,"{% assign locationOrigin = request.origin | append: routes.root_url | split: '/' | join: '/' %}")}
 
-    ${n(L,e`
-        <${T}
-          class="${O} ${L?m("gps-lazy"):""}"
+    ${n(q,e`
+        <${P}
+          class="${O} ${q?p("gps-lazy"):""}"
           style="${R}"
         >
           ${D}
-        </${T}>
+        </${P}>
       `,e`${D}`)}
   `};export{h as default};

package/dist/esm/hero-banner/common/classes.js

@@ -1 +1 @@
-import{getGlobalColorStateClass as e}from"@gem-sdk/core";import{getClassAlignBanner as r,getClassContentPosition as l,getContentPosition as g,getClassForContentByFitContent as t,getClassForStretchContent as o,getClassSpaceBetween as p,getOpacityHover as a,opacityEnabledData as n,getClassSpaceBetweenLeftRight as s,getResponsiveSetting as i}from"./helpers.js";function u(e){return e.split(" ").reduce((e,r)=>(e[r]=!0,e),{})}let b=({setting:e,builderProps:l,advancedCssClass:g})=>{let t="gp-group/hero gp-flex gp-w-full gp-flex-col gp-self-center gp-transition-colors gp-duration-200 gp-ease-in-out";return g&&(t+=` ${g}`),{...l?.uid&&{[l.uid]:!0},...u(t),...r(i(e?.alignBanner||{}))}},f=()=>({...u("gp-cursor-pointer gp-h-full")}),h=(e,r)=>({...u("gp-relative gp-flex gp-w-full gp-flex-col gp-items-center gp-overflow-hidden hero-banner-container"),...l(g(e?.layout,r?.contentPosition1Col,r?.contentPosition2Col)||{})}),v=e=>{let{overlayColor:r}=e??{},l=r?.hover||r?.normal;return l&&"transparent"!==l&&"0%"!=a(e)},c=r=>{let{overlayColor:l,hoverEffect:g}=r??{},{disableOpacity:t}=n(r),o="gp-absolute gp-inset-0 gp-left-[var(--left)] gp-top-[var(--top)]";return v(r)&&(o+=" gp-transition-all gp-duration-300"),g&&(o+=" group-hover/hero:gp-bg-[color:var(--hvr-bgc,_var(--bgc))] group-hover/hero:gp-opacity-[var(--hvr-op,_var(--op))]"),e("bg",l,t,!g)&&(o+=` ${e("bg",l,t,!g)}`),u(o)},d=(e,r)=>{let{sizeSetting:l,background:g}=e??{},{verticalAlign:a}=r??{},n=t(l,g),i=o(a),b=p(r?.layout||{},e?.contentPosition1Col||{}),f=s(r?.layout||{}),h=`gp-hero-banner-row ${n}  ${i}`;return{...u(h),...b,...f}},C=()=>u("adaptive-hero-banner"),m=()=>u("gp-w-full gp-invisible -gp-z-1"),w=(e,r)=>{let l="hero-banner-bg gp-hero-banner-image-background hero-banner-bg-parallax";return r&&(l+=" gp_lazybg"),e&&(l+=" gp-duration-[var(--duration)] group-hover/hero:gp-scale-[var(--scale)] gp-transition-transform"),u(l)},y=()=>u("gp-hero-banner-bg gp-absolute gp-overflow-hidden gp-w-full gp-h-full top-0 left-0"),_=(e=!1)=>{let r="gp-relative gp-h-full";return e&&(r+=" gp-hidden"),u(r)},x=e=>{let r="gp-h-full gp-w-full !gp-max-w-none gp-pointer-events-none";return e&&(r+=" gp-pb-[56.25%]"),u(r)},k=()=>u("gp-inset-0 gp-w-full gp-bg-black gp-h-full !gp-max-w-none"),z=e=>{let r="gp-absolute gp-top-0 gp-invisible gp-w-full gp_lazyload gp-h-full gp_lazyforbg";return"tablet"===e&&(r+=" gp_lazybg_tl"),"mobile"===e&&(r+=" gp_lazybg_mb"),u(r)};export{v as enableTransitionHover,C as getAdaptiveClasses,m as getAdaptivePictureClasses,w as getBackgroundClasses,b as getClasses,y as getContainBackgroundClasses,h as getContainerClasses,_ as getHtml5VideoClasses,k as getIframeYoutubeClasses,z as getLazyBackgroundClasses,f as getLinkClasses,c as getOverlayClasses,d as getRowClasses,x as getWrapperYoutubeClasses};
+import{getGlobalColorStateClass as e}from"@gem-sdk/core";import{getClassAlignBanner as r,getClassContentPosition as t,getContentPosition as g,getClassForContentByFitContent as l,getClassForStretchContent as o,getClassSpaceBetween as p,getOpacityHover as n,opacityEnabledData as a,getClassSpaceBetweenLeftRight as s,getResponsiveSetting as i}from"./helpers.js";function u(e){return e.split(" ").reduce((e,r)=>(e[r]=!0,e),{})}let b=({setting:e,builderProps:t,advancedCssClass:g})=>{let l="gp-group/hero gp-flex gp-w-full gp-flex-col gp-self-center gp-transition-colors gp-duration-200 gp-ease-in-out";return g&&(l+=` ${g}`),{...t?.uid&&{[t.uid]:!0},...u(l),...r(i(e?.alignBanner||{}))}},f=()=>({...u("gp-cursor-pointer gp-h-full")}),h=(e,r)=>({...u("gp-relative gp-flex gp-w-full gp-flex-col gp-items-center gp-overflow-hidden hero-banner-container"),...t(g(e?.layout,r?.contentPosition1Col,r?.contentPosition2Col)||{})}),v=e=>{let{overlayColor:r}=e??{},t=r?.hover||r?.normal;return t&&"transparent"!==t&&"0%"!=n(e)},c=r=>{let{overlayColor:t,hoverEffect:g}=r??{},{disableOpacity:l}=a(r),o="gp-absolute gp-inset-0 gp-left-[var(--left)] gp-top-[var(--top)]";return v(r)&&(o+=" gp-transition-all gp-duration-300"),g&&(o+=" group-hover/hero:gp-bg-[color:var(--hvr-bgc,_var(--bgc))] group-hover/hero:gp-opacity-[var(--hvr-op,_var(--op))]"),e("bg",t,l,!g)&&(o+=` ${e("bg",t,l,!g)}`),u(o)},d=(e,r)=>{let{sizeSetting:t,background:g}=e??{},{verticalAlign:n}=r??{},a=l(t,g),i=o(n),b=p(r?.layout||{},e?.contentPosition1Col||{}),f=s(r?.layout||{}),h=`gp-hero-banner-row ${a}  ${i}`;return{...u(h),...b,...f}},C=()=>u("adaptive-hero-banner"),m=()=>u("gp-w-full gp-invisible -gp-z-1"),w=(e,r)=>{let t="hero-banner-bg gp-hero-banner-image-background hero-banner-bg-parallax";return r&&(t+=" gp_lazybg"),e&&(t+=" gp-duration-[var(--duration)] group-hover/hero:gp-scale-[var(--scale)] gp-transition-transform"),u(t)},y=()=>u("gp-hero-banner-bg gp-absolute gp-overflow-hidden gp-w-full gp-h-full top-0 left-0"),x=(e=!1)=>{let r="gp-relative gp-h-full";return e&&(r+=" gp-hidden"),u(r)},_=e=>{let r="gp-h-full gp-w-full !gp-max-w-none gp-pointer-events-none";return e&&(r+=" gp-pb-[56.25%]"),u(r)},k=()=>u("gp-inset-0 gp-w-full gp-bg-black gp-h-full !gp-max-w-none"),z=e=>{let r="gp-absolute gp-top-0 gp-invisible gp-w-full gp-h-full gp_lazyforbg";return"tablet"===e&&(r+=" gp_lazybg_tl"),"mobile"===e&&(r+=" gp_lazybg_mb"),u(r)};export{v as enableTransitionHover,C as getAdaptiveClasses,m as getAdaptivePictureClasses,w as getBackgroundClasses,b as getClasses,y as getContainBackgroundClasses,h as getContainerClasses,x as getHtml5VideoClasses,k as getIframeYoutubeClasses,z as getLazyBackgroundClasses,f as getLinkClasses,c as getOverlayClasses,d as getRowClasses,_ as getWrapperYoutubeClasses};

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

@@ -1,2 +1,2 @@
 'use client';
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import o from"./HeroBannerItem.js";import{getAttr as s,getAttrLink as m}from"../common/attrs.js";import{getStyle as t}from"../common/styles.js";import{getClasses as n,getLinkClasses as a}from"../common/classes.js";import{createAttr as i,createStyle as l,createClass as d,If as f}from"@gem-sdk/system";import{useRenderMode as p,useCurrentDevice as c,filterToolbarPreview as u}from"@gem-sdk/core";import{getBannerLink as h}from"../common/helpers.js";import j from"../hooks/useHeroBanner.js";import{useRef as y}from"react";let g=g=>{let{builderAttrs:k,builderProps:v,setting:C,styles:B,style:H,children:R,advanced:b,enableLazyLoadImage:w=!0}=g,{isEditMode:L,isPreviewSharePageMode:x}=p(),{enableLink:I}=C??{},M=h(C),{cssClass:N}=b??{},V=c(),{elementRef:z,transform:E,onMouseEnterParallax:P,onMouseLeaveParallax:S,dataVideo:W,bgRef:q,isShowVideoHtml5:A,openLinkBanner:D,layoutResponsive:F}=j(B,C,V),G=y(null),J=!!M?.link&&I&&!L&&!x,K=i({...s({uid:v?.uid||""})}),O=i({...m()}),Q=l({...t(B,C,H)}),T=d({...n({setting:C,builderProps:v,advancedCssClass:N})}),U=d({...a()}),X=()=>r(o,{setting:C,styles:B,children:R,rawChildren:g.rawChildren,builderProps:v,enableLazyLoadImage:w,elementRef:z,transform:E,dataVideo:W,layoutResponsive:F,bgRef:q,isShowVideoHtml5:A,heroBannerWrapperRef:G});return e("div",{ref:G,...k,...K,className:T,style:Q,onMouseEnter:P,onMouseLeave:S,children:[f(!J,X()),f(J,r("div",{...O,"aria-hidden":"true",onClick:D,className:U,children:X()})),u(R,!0)]})};export{g as default};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import o from"./HeroBannerItem.js";import{getAttr as s,getAttrLink as m}from"../common/attrs.js";import{getStyle as t}from"../common/styles.js";import{getClasses as n,getLinkClasses as i}from"../common/classes.js";import{createAttr as a,createStyle as l,createClass as d,If as p}from"@gem-sdk/system";import{useRenderMode as f,useCurrentDevice as c,filterToolbarPreview as u}from"@gem-sdk/core";import{getBannerLink as h}from"../common/helpers.js";import j from"../hooks/useHeroBanner.js";import{useRef as C}from"react";let g=g=>{let{builderAttrs:k,builderProps:v,setting:y,styles:B,style:H,children:R,advanced:w,pageContext:x}=g,{isEditMode:b,isPreviewSharePageMode:M}=f(),{enableLink:N}=y??{},V=h(y),{cssClass:E}=w??{},I=c(),{elementRef:L,transform:P,onMouseEnterParallax:S,onMouseLeaveParallax:W,dataVideo:q,bgRef:z,isShowVideoHtml5:A,openLinkBanner:D,layoutResponsive:F}=j(B,y,I),G=C(null),J=!!V?.link&&N&&!b&&!M,K=a({...s({uid:v?.uid||""})}),O=a({...m()}),Q=l({...t(B,y,H)}),T=d({...n({setting:y,builderProps:v,advancedCssClass:E})}),U=d({...i()}),X=()=>r(o,{setting:y,styles:B,children:R,rawChildren:g.rawChildren,builderProps:v,pageContext:x,elementRef:L,transform:P,dataVideo:q,layoutResponsive:F,bgRef:z,isShowVideoHtml5:A,heroBannerWrapperRef:G});return e("div",{ref:G,...k,...K,className:T,style:Q,onMouseEnter:S,onMouseLeave:W,children:[p(!J,X()),p(J,r("div",{...O,"aria-hidden":"true",onClick:D,className:U,children:X()})),u(R,!0)]})};export{g as default};

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

package/dist/esm/hero-banner/components/HeroBannerItem.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useMemo as t}from"react";import{useEditorMode as s,filterToolbarPreview as i,getAspectRatioGlobalSize as r}from"@gem-sdk/core";import l from"../../grid/components/row/Row.js";import{createStyle as m,createClass as a}from"@gem-sdk/system";import d from"../../image/components/AdaptiveImage.js";import p from"../../video/components/HTML5Embed.js";import{getContainerStyle as n,getOverlayStyle as c,getRowStyle as y,getAdaptiveStyle as u,getBackgroundStyle as f,getContainBackgroundStyle as v,getYoutubeIframeStyle as h,getHtml5VideoStyle as b}from"../common/styles.js";import{getContainerClasses as g,getOverlayClasses as j,getRowClasses as N,getAdaptivePictureClasses as T,getAdaptiveClasses as k,getBackgroundClasses as H,getContainBackgroundClasses as w,getHtml5VideoClasses as C,getWrapperYoutubeClasses as I,getIframeYoutubeClasses as L}from"../common/classes.js";import{getBackgroundImageHeroBanner as V,showVideoType as z,scrollToContentBanner as B,getWidth as M,horizontalAlign as Y,fallbackImg as E,getBgImage as x}from"../common/helpers.js";import A from"../../video/components/LiteYouTubeEmbed.js";import{getYoutubeVideoId as R,youtubeVideoRegex as $}from"../../video/common/helpers.js";import O from"../hooks/useHeroBannerItem.js";import{getYoutubeContentClasses as S}from"../../video/common/classes.js";let W=W=>{s();let{setting:q,styles:D,children:F,elementRef:G,transform:J,dataVideo:K,bgRef:P,isShowVideoHtml5:Q,layoutResponsive:U,heroBannerWrapperRef:X}=W,{layout:Z,verticalAlign:_,enableParallax:ee,alt:eo,title:et}=q??{},{background:es,overlayColor:ei,verticalGutter:er,sizeSetting:el,contentWidth:em,hoverEffect:ea,contentPosition1Col:ed,contentPosition2Col:ep,videoObjectFit:en}=D??{},ec=m({...n(D)}),ey=a({...g(q,D)}),eu=m({...c(D)}),ef=a({...j(D)}),ev=m({...y(D)}),eh=a({...N(D,q)}),eb=m({...u(D)}),eg=a({...T()}),ej=a({...k()}),eN=a({...H(ea,!1)}),eT=m({...V(es,!1,!0),...f(D,ee,J)}),ek=a({...w()}),eH=m({...v(D)}),ew=a({...C(!Q)}),{youtubeIframeWrapperRef:eC,resolvedAspectRatio:eI,youtubeAspectRatio:eL}=O({videoType:K?.videoType,sizeSetting:el,background:es,videoObjectFit:en,heroBannerWrapperRef:X,isYoutubeVideoMigrated:q?.isYoutubeVideoMigrated}),eV=m({...h(eL,en)}),ez=m({...b(eI,en,es)}),eB=a({...I(q?.isYoutubeVideoMigrated)}),eM=a({...L()}),eY=a({...S()}),eE=t(()=>{if(!z(es))return;if(K?.videoType==="html5"&&!K.videoHtml5||K?.videoType==="youtube"&&!K.video)return null;if(K?.type==="video"&&K?.videoType==="html5"&&K?.videoHtml5)return e(p,{muted:!0,loop:K?.loop,controls:!1,autoplay:!0,src:K?.videoHtml5||"",title:"Video",style:ez,className:ew});let o=K?.video??"",t=R(o),s=K?.loop?1:0,i=`&loop=${s}&playlist=${t}&showinfo=0&rel=0&fs=0&enablejsapi=1`;if(K?.type==="video"&&K?.videoType==="youtube"&&t&&$.test(o))return e("div",{className:eY,ref:eC,children:e(A,{id:t,isHeroBanner:!0,autoplay:!0,title:"Video",controls:!1,params:i,adNetwork:!1,noCookie:!0,muted:!0,lazy:K?.lazyLoad??!0,style:eV,wrapperClass:eB,iframeClass:eM})})},[K,es,ew,eM,eB,eV,ez,eC]);return o("div",{className:ey,style:ec,children:[o("div",{ref:G,className:ek,style:eH,children:[e("div",{ref:P,className:eN,style:eT,children:eE}),!!ei&&e("div",{"aria-label":"Overlay",className:ef,style:eu})]}),e(l,{className:eh,style:ev,setting:{layout:Z,horizontalAlign:Y(Z,ed,ep),verticalAlign:_},styles:{verticalGutter:er,width:M(em),fullWidth:{desktop:!1,tablet:!1,mobile:!1}},hiddenEmptyCol:U?.cols?.length===1,onBlur:e=>B(e),children:i(F)}),e(d,{pictureClass:eg,srcSet:x(es),className:ej,aspectRatio:r(el),style:eb,alt:eo,title:et,enableLazyLoadImage:!1,fallbackImg:E})]})};export{W as default};
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useMemo as t}from"react";import{useEditorMode as s,filterToolbarPreview as i,getAspectRatioGlobalSize as r}from"@gem-sdk/core";import l from"../../grid/components/row/Row.js";import{createStyle as m,createClass as a}from"@gem-sdk/system";import d from"../../image/components/AdaptiveImage.js";import p from"../../video/components/HTML5Embed.js";import{getContainerStyle as n,getOverlayStyle as c,getRowStyle as u,getAdaptiveStyle as y,getBackgroundStyle as f,getContainBackgroundStyle as v,getYoutubeIframeStyle as h,getHtml5VideoStyle as b}from"../common/styles.js";import{getContainerClasses as g,getOverlayClasses as j,getRowClasses as N,getAdaptivePictureClasses as T,getAdaptiveClasses as k,getBackgroundClasses as H,getContainBackgroundClasses as w,getHtml5VideoClasses as C,getWrapperYoutubeClasses as V,getIframeYoutubeClasses as B}from"../common/classes.js";import{getBackgroundImageHeroBanner as I,showVideoType as M,scrollToContentBanner as Y,getWidth as z,horizontalAlign as E,fallbackImg as L,getBgImage as x}from"../common/helpers.js";import A from"../../video/components/LiteYouTubeEmbed.js";import{getYoutubeVideoId as R,youtubeVideoRegex as $}from"../../video/common/helpers.js";import O from"../hooks/useHeroBannerItem.js";import{getYoutubeContentClasses as S}from"../../video/common/classes.js";let W=W=>{s();let{setting:q,styles:D,children:F,elementRef:G,transform:J,dataVideo:K,bgRef:P,isShowVideoHtml5:Q,layoutResponsive:U,heroBannerWrapperRef:X}=W,{layout:Z,verticalAlign:_,enableParallax:ee,alt:eo,title:et}=q??{},{background:es,overlayColor:ei,verticalGutter:er,sizeSetting:el,contentWidth:em,hoverEffect:ea,contentPosition1Col:ed,contentPosition2Col:ep,videoObjectFit:en}=D??{},ec=m({...n(D)}),eu=a({...g(q,D)}),ey=m({...c(D)}),ef=a({...j(D)}),ev=m({...u(D)}),eh=a({...N(D,q)}),eb=m({...y(D)}),eg=a({...T()}),ej=a({...k()}),eN=a({...H(ea,!1)}),eT=m({...I(es,!1,!0),...f(D,ee,J)}),ek=a({...w()}),eH=m({...v(D)}),ew=a({...C(!Q)}),{youtubeIframeWrapperRef:eC,resolvedAspectRatio:eV,youtubeAspectRatio:eB}=O({videoType:K?.videoType,sizeSetting:el,background:es,videoObjectFit:en,heroBannerWrapperRef:X,isYoutubeVideoMigrated:q?.isYoutubeVideoMigrated}),eI=m({...h(eB,en)}),eM=m({...b(eV,en,es)}),eY=a({...V(q?.isYoutubeVideoMigrated)}),ez=a({...B()}),eE=a({...S()}),eL=t(()=>{if(!M(es))return;if(K?.videoType==="html5"&&!K.videoHtml5||K?.videoType==="youtube"&&!K.video)return null;if(K?.type==="video"&&K?.videoType==="html5"&&K?.videoHtml5)return e(p,{muted:!0,loop:K?.loop,controls:!1,autoplay:!0,src:K?.videoHtml5||"",title:"Video",style:eM,className:ew});let o=K?.video??"",t=R(o),s=K?.loop?1:0,i=`&loop=${s}&playlist=${t}&showinfo=0&rel=0&fs=0&enablejsapi=1`;if(K?.type==="video"&&K?.videoType==="youtube"&&t&&$.test(o))return e("div",{className:eE,ref:eC,children:e(A,{id:t,isHeroBanner:!0,autoplay:!0,title:"Video",controls:!1,params:i,adNetwork:!1,noCookie:!0,muted:!0,lazy:K?.lazyLoad??!0,style:eI,wrapperClass:eY,iframeClass:ez})})},[K,es,ew,ez,eY,eI,eM,eC]);return o("div",{className:eu,style:ec,children:[o("div",{ref:G,className:ek,style:eH,children:[e("div",{ref:P,className:eN,style:eT,children:eL}),!!ei&&e("div",{"aria-label":"Overlay",className:ef,style:ey})]}),e(l,{className:eh,style:ev,setting:{layout:Z,horizontalAlign:E(Z,ed,ep),verticalAlign:_},styles:{verticalGutter:er,width:z(em),fullWidth:{desktop:!1,tablet:!1,mobile:!1}},hiddenEmptyCol:U?.cols?.length===1,onBlur:e=>Y(e),children:i(F)}),e(d,{pictureClass:eg,srcSet:x(es),className:ej,aspectRatio:r(el),style:eb,alt:eo,title:et,fallbackImg:L})]})};export{W as default};

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

@@ -1,16 +1,16 @@
-import{template as e,getAspectRatioGlobalSize as t,DEVICES as o,getResponsiveValueByScreen as s,hasTranslatedLiquid as i}from"@gem-sdk/core";import l from"../../grid/components/row/Row.liquid.js";import{createStyle as a,createClass as r,If as m}from"@gem-sdk/system";import d from"../../image/components/AdaptiveImage.liquid.js";import n from"../../video/components/HTML5Embed.liquid.js";import{getContainerStyle as p,getOverlayStyle as u,getRowStyle as c,getAdaptiveStyle as f,getBackgroundStyle as v,getContainBackgroundStyle as y,getYoutubeIframeStyle as g,getHtml5VideoStyle as j}from"../common/styles.js";import{getContainerClasses as $,getOverlayClasses as b,getRowClasses as h,getAdaptivePictureClasses as C,getAdaptiveClasses as w,getBackgroundClasses as I,getContainBackgroundClasses as T,getHtml5VideoClasses as k,getWrapperYoutubeClasses as x,getIframeYoutubeClasses as N,getLazyBackgroundClasses as q}from"../common/classes.js";import{getAspectRatio as H,getYoutubeAspectRatio as z,getBackgroundImageHeroBanner as A,getWidth as L,horizontalAlign as V,getEnableBgImageByDevice as B,getBgImage as E,showVideoType as R,getResponsiveSetting as S,fallbackImg as D}from"../common/helpers.js";import{getImageSrc as M}from"../../image/common/helpers.js";import O from"../../image/components/NextImage.liquid.js";import U from"../../video/components/LiteYouTubeEmbed.liquid.js";import{getYoutubeVideoId as W,youtubeVideoRegex as Y}from"../../video/common/helpers.js";import{isRenderHtmlVideo as F}from"../../grid/components/row/common/helpers.js";import{PRIORITY_LOAD_ATTRS as G}from"../../image/constants.js";import{getSeoTranslated as J}from"../../helpers.js";let K=K=>{let{enableLazyLoadImage:P=!0,translatedBackground:Q,setting:X,styles:Z,children:_,builderProps:ee,rawChildren:et,pageContext:eo}=K,{layout:es,verticalAlign:ei,enableParallax:el,alt:ea,title:er,preload:em,isYoutubeVideoMigrated:ed}=X??{},{background:en,overlayColor:ep,verticalGutter:eu,sizeSetting:ec,contentWidth:ef,hoverEffect:ev,contentPosition1Col:ey,contentPosition2Col:eg,videoObjectFit:ej}=Z??{},e$=!em&&P,eb=H(ec,en),eh=z(en,ej,eb),eC=S(Q||{}),ew=eC.desktop,eI=a({...p(Z)}),eT=r({...$(X,Z)}),ek=a({...u(Z)}),ex=r({...b(Z)}),eN=a({...c(Z)}),eq=r({...h(Z,X)}),eH=a({...f(Z)}),ez=r({...C()}),eA=r({...w()}),eL=r({...I(ev,e$)}),eV=a({...A(Q,e$,!1),...v(Z,el,"")}),eB=r({...T()}),eE=a({...y(Z)}),eR=r({...k(!1)}),eS=a({...g(eh,ej)}),eD=r({...x(ed)}),eM=a({...j(eb,ej,en)}),eO=r({...N()}),eU=e=>r({...q(e)});return e`
-  <div class="${eT}" style="${eI}">
+import{template as e,getAspectRatioGlobalSize as t,DEVICES as o,getResponsiveValueByScreen as s,hasTranslatedLiquid as i}from"@gem-sdk/core";import l from"../../grid/components/row/Row.liquid.js";import{createStyle as a,createClass as r,If as m}from"@gem-sdk/system";import d from"../../image/components/AdaptiveImage.liquid.js";import n from"../../video/components/HTML5Embed.liquid.js";import{getContainerStyle as p,getOverlayStyle as u,getRowStyle as c,getAdaptiveStyle as f,getBackgroundStyle as y,getContainBackgroundStyle as g,getYoutubeIframeStyle as v,getHtml5VideoStyle as j}from"../common/styles.js";import{getContainerClasses as $,getOverlayClasses as b,getRowClasses as h,getAdaptivePictureClasses as C,getAdaptiveClasses as I,getBackgroundClasses as w,getContainBackgroundClasses as T,getHtml5VideoClasses as k,getWrapperYoutubeClasses as x,getIframeYoutubeClasses as N,getLazyBackgroundClasses as q}from"../common/classes.js";import{getAspectRatio as L,getYoutubeAspectRatio as z,getBackgroundImageHeroBanner as H,getWidth as A,horizontalAlign as V,getEnableBgImageByDevice as B,getBgImage as E,showVideoType as R,getResponsiveSetting as S,fallbackImg as D}from"../common/helpers.js";import{getImageSrc as M}from"../../image/common/helpers.js";import O from"../../image/components/NextImage.liquid.js";import U from"../../video/components/LiteYouTubeEmbed.liquid.js";import{getYoutubeVideoId as W,youtubeVideoRegex as Y}from"../../video/common/helpers.js";import{isRenderHtmlVideo as F}from"../../grid/components/row/common/helpers.js";import{PRIORITY_LOAD_ATTRS as G}from"../../image/constants.js";import{getSeoTranslated as J}from"../../helpers.js";let K=K=>{let{translatedBackground:P,setting:Q,styles:X,children:Z,builderProps:_,rawChildren:ee,pageContext:et}=K,{layout:eo,verticalAlign:es,enableParallax:ei,alt:el,title:ea,preload:er,isYoutubeVideoMigrated:em}=Q??{},{background:ed,overlayColor:en,verticalGutter:ep,sizeSetting:eu,contentWidth:ec,hoverEffect:ef,contentPosition1Col:ey,contentPosition2Col:eg,videoObjectFit:ev}=X??{},ej=!er&&(et?.enableLazyLoadImage??!0),e$=L(eu,ed),eb=z(ed,ev,e$),eh=S(P||{}),eC=eh.desktop,eI=a({...p(X)}),ew=r({...$(Q,X)}),eT=a({...u(X)}),ek=r({...b(X)}),ex=a({...c(X)}),eN=r({...h(X,Q)}),eq=a({...f(X)}),eL=r({...C()}),ez=r({...I()}),eH=r({...w(ef,ej)}),eA=a({...H(P,ej,!1),...y(X,ei,"")}),eV=r({...T()}),eB=a({...g(X)}),eE=r({...k(!1)}),eR=a({...v(eb,ev)}),eS=r({...x(em)}),eD=a({...j(e$,ev,ed)}),eM=r({...N()}),eO=e=>r({...q(e)});return e`
+  <div class="${ew}" style="${eI}">
       <div
-        class="${eB}"
-        style="${eE}"
+        class="${eV}"
+        style="${eB}"
       >
-        <div class="${eL}" style="${eV}">
-          ${(()=>{if(!em)return o.map(e=>m(B(e,Q),O({src:M(s(E(Q),e),e),alt:J({valueTranslate:ea,uid:ee?.uid,settingId:"alt",pageContext:eo??{}}),title:J({valueTranslate:er,uid:ee?.uid,settingId:"title",pageContext:eo??{}}),className:eU(e),isDisableAspectStyle:!0,enableLazyLoadImage:P}))).join("")})()}
-          ${(()=>{if(!R(en))return;if(F(en))return n({uid:ee?.uid,muted:!0,loop:ew?.loop,controls:!1,autoplay:!0,src:ew?.videoHtml5||"",title:"Video",style:eM,className:eR});let e=ew?.video??"",t=W(e),o=`&loop=false&playlist=${t}&showinfo=0&rel=0&fs=0&enablejsapi=1`,s=i(e);if(ew?.type==="video"&&ew?.videoType==="youtube"&&t&&Y.test(e)||s)return U({uid:ee?.uid,id:t??"",translatedVideoUrl:s?e:"",isHeroBanner:!0,autoplay:!0,title:"Video",controls:!1,params:o,adNetwork:!1,noCookie:!0,muted:!0,lazy:ew?.lazyLoad??!0,style:eS,wrapperClass:eD,iframeClass:eO})})()}
+        <div class="${eH}" style="${eA}">
+          ${(()=>{if(!er)return o.map(e=>m(B(e,P),O({src:M(s(E(P),e),e),alt:J({valueTranslate:el,uid:_?.uid,settingId:"alt",pageContext:et??{}}),title:J({valueTranslate:ea,uid:_?.uid,settingId:"title",pageContext:et??{}}),className:eO(e),isDisableAspectStyle:!0,pageContext:et}))).join("")})()}
+          ${(()=>{if(!R(ed))return;if(F(ed))return n({uid:_?.uid,muted:!0,loop:eC?.loop,controls:!1,autoplay:!0,src:eC?.videoHtml5||"",title:"Video",style:eD,className:eE,pageContext:et});let e=eC?.video??"",t=W(e),o=`&loop=false&playlist=${t}&showinfo=0&rel=0&fs=0&enablejsapi=1`,s=i(e);if(eC?.type==="video"&&eC?.videoType==="youtube"&&t&&Y.test(e)||s)return U({uid:_?.uid,id:t??"",translatedVideoUrl:s?e:"",isHeroBanner:!0,autoplay:!0,title:"Video",controls:!1,params:o,adNetwork:!1,noCookie:!0,muted:!0,lazy:eC?.lazyLoad??!0,style:eR,wrapperClass:eS,iframeClass:eM,pageContext:et})})()}
         </div>
-        ${m(!!ep,e`<div aria-label="Overlay" class="${ex}" style="${ek}"> </div>`)}
+        ${m(!!en,e`<div aria-label="Overlay" class="${ek}" style="${eT}"> </div>`)}
       </div>
-      ${l({className:eq,style:eN,setting:{layout:es,horizontalAlign:V(es,ey,eg),verticalAlign:ei},styles:{verticalGutter:eu,width:L(ef),fullWidth:{desktop:!1,tablet:!1,mobile:!1}},children:_,rawChildren:et})}
-        ${d({pictureClass:ez,srcSet:E(Q),className:eA,...em&&G,aspectRatio:t(ec),style:eH,alt:J({valueTranslate:ea,uid:ee?.uid,settingId:"alt",pageContext:eo??{}}),title:J({valueTranslate:er,uid:ee?.uid,settingId:"title",pageContext:eo??{}}),enableLazyLoadImage:P,fallbackImg:D})}
+      ${l({className:eN,style:ex,setting:{layout:eo,horizontalAlign:V(eo,ey,eg),verticalAlign:es},styles:{verticalGutter:ep,width:A(ec),fullWidth:{desktop:!1,tablet:!1,mobile:!1}},children:Z,rawChildren:ee})}
+        ${d({pictureClass:eL,srcSet:E(P),className:ez,...er&&G,aspectRatio:t(eu),style:eq,alt:J({valueTranslate:el,uid:_?.uid,settingId:"alt",pageContext:et??{}}),title:J({valueTranslate:ea,uid:_?.uid,settingId:"title",pageContext:et??{}}),pageContext:et,fallbackImg:D})}
   </div>
 `};export{K as default};

package/dist/esm/image/common/attrs.js

@@ -1 +1 @@
-import{HREF_TO_SALES_PAGE as t}from"../../constant.js";import{getAspectRatio as e,getNewBackupFileKey as r,getImageSrc as a,safeStringify as s,IMAGE_PLACEHOLDER as i,NEXT_IMAGE_CONFIG as l,getSrcSet as o,createBlurDataURL as p}from"./helpers.js";import{createAttr as g}from"@gem-sdk/system";import{handleClickLink as c}from"../../helpers.js";import{PRIORITY_LOAD_ATTRS as n}from"../constants.js";let u=(t,e)=>({...t,...e&&{"data-id":e}}),d=({urlData:e,imageLink:r,title:a,isLiquid:s=!1})=>{let i=s?{...e,...r?.noFollow&&{rel:"nofollow"},title:a}:{setting:e,title:a};return r?.type!=="go-to-sales-page"?r?.link?i:{}:s?{href:t,target:"_self"}:{setting:{href:t,target:"_self"}}},y=({pageContext:t,enableLazyLoadImage:e=!1})=>({...t&&{pageContext:t},...e&&{enableLazyLoadImage:e}}),m=({styles:t,setting:i,mode:l,isLiquid:o})=>{let{alt:p,srcSet:g,priority:u,qualityPercent:d,qualityType:y,title:m}=i??{},k=e({styles:t,setting:i}),A=g?.desktop?.backupFileKey?r(g?.desktop?.backupFileKey??"",g?.desktop?.src??""):"",F=o?a({src:g?.desktop?.src,backupFileKey:A,backupFilePath:g?.desktop?.backupFilePath,storage:g?.desktop?.storage}):g?.desktop?.src??"",L=u?{}:{"base-src":F??"","quality-type":s(y),"quality-percent":s(d)};return{pictureClass:"gp-contents",...p&&{alt:p},...m&&{title:m},...g&&{srcSet:g},...u&&n,...L,...t?.objectFit&&{layout:t.objectFit},onClick:()=>{c(i?.imageLink,l)},aspectRatio:k}},k=({styles:t,setting:r})=>{let{objectFit:a}=t??{},{vw:s,alt:i,title:l,quality:o,priority:p,isNotLazyload:g,qualityType:c,qualityPercent:n}=r??{},u=e({styles:t,setting:r});return{...r?.image,...s&&{vw:s},...i&&{alt:i},...l&&{title:l},...o&&{quality:o},...p&&{priority:p},isNotLazyload:g,setting:{aspectRatio:u,layout:a,qualityType:c,qualityPercent:n}}},A=t=>{let{srcset:e,setting:i,storage:c,baseSrc:n,priority:u,customAttrs:d,width:y=2237,height:m=1678,isNotLazyload:k,backupFileKey:A,backupFilePath:F,srcIsLiquidCode:L,enableLazyLoadImage:b,alt:f=l.DEFAULT_ALT,title:h,src:T=l.DEFAULT_SRC,sizes:E=l.DEFAULT_SIZES}=t,_=!k&&b&&!u;return g({...d,...(()=>{let{qualityPercent:t,qualityType:e}=i??{},r=!u&&e&&t?{"quality-type":s(e),"quality-percent":s(t)}:{"quality-type":"","quality-percent":""};return{...f&&{alt:f},...h&&{title:h},width:y,height:m,draggable:"false",...r}})(),...(()=>{let t=A?r(A??"",T):"",s=L?n:a({src:T,backupFileKey:t,backupFilePath:F,storage:c}),i=L?T:o(t??"",c??"THEME",T),l={sizes:"100vw",src:p(y,m),...s&&!u?{"base-src":s}:{},...s?{"data-src":s}:{},...i?{"data-srcset":i}:{}},g={sizes:E,src:s??"",isNotLazyload:"true",srcset:e??"",...s&&!u?{"base-src":s}:{},...u?{loading:"eager",fetchpriority:"high"}:{loading:"lazy"}};return{"data-sizes":"auto",..._?l:g}})()})},F=t=>{let{width:e=l.DEFAULT_WIDTH_PROPS,height:r=l.DEFAULT_HEIGHT_PROPS,quality:a,priority:s,isNotLazyload:o,enableLazyLoadImage:p,base64:c=i,alt:n=l.DEFAULT_ALT,title:u,src:d=l.DEFAULT_SRC}=t,y=!o&&p&&!s,m=g((()=>{let t={loading:"lazy",placeholder:"blur",...c&&{blurDataURL:c}};return{...y?t:{loading:"eager",fetchpriority:"high"}}})());return{src:d,alt:n,title:u,width:e,height:r,quality:a,...m}};export{m as getAdaptiveImageAttrs,u as getContainerAttrs,y as getImageLiquidAttrs,d as getLinkWrapperAttrs,k as getNextImageAttrs,A as getNextImageLiquidAttrs,F as getNextImageReactAttrs};
+import{HREF_TO_SALES_PAGE as e}from"../../constant.js";import{getAspectRatio as t,getNewBackupFileKey as r,getImageSrc as a,safeStringify as s,IMAGE_PLACEHOLDER as l,NEXT_IMAGE_CONFIG as i,getSrcSet as o,createBlurDataURL as g}from"./helpers.js";import{createAttr as p}from"@gem-sdk/system";import{handleClickLink as n}from"../../helpers.js";import{PRIORITY_LOAD_ATTRS as c}from"../constants.js";let u=(e,t)=>({...e,...t&&{"data-id":t}}),d=({urlData:t,imageLink:r,title:a,isLiquid:s=!1})=>{let l=s?{...t,...r?.noFollow&&{rel:"nofollow"},title:a}:{setting:t,title:a};return r?.type!=="go-to-sales-page"?r?.link?l:{}:s?{href:e,target:"_self"}:{setting:{href:e,target:"_self"}}},y=({pageContext:e})=>({...e&&{pageContext:e}}),m=({styles:e,setting:l,mode:i,isLiquid:o})=>{let{alt:g,srcSet:p,priority:u,qualityPercent:d,qualityType:y,title:m}=l??{},L=t({styles:e,setting:l}),k=p?.desktop?.backupFileKey?r(p?.desktop?.backupFileKey??"",p?.desktop?.src??""):"",A=o?a({src:p?.desktop?.src,backupFileKey:k,backupFilePath:p?.desktop?.backupFilePath,storage:p?.desktop?.storage}):p?.desktop?.src??"",b=u?{}:{"base-src":A??"","quality-type":s(y),"quality-percent":s(d)};return{pictureClass:"gp-contents",...g&&{alt:g},...m&&{title:m},...p&&{srcSet:p},...u&&c,...b,...e?.objectFit&&{layout:e.objectFit},onClick:()=>{n(l?.imageLink,i)},aspectRatio:L}},L=({styles:e,setting:r})=>{let{objectFit:a}=e??{},{vw:s,alt:l,title:i,quality:o,priority:g,isNotLazyload:p,qualityType:n,qualityPercent:c}=r??{},u=t({styles:e,setting:r});return{...r?.image,...s&&{vw:s},...l&&{alt:l},...i&&{title:i},...o&&{quality:o},...g&&{priority:g},isNotLazyload:p,setting:{aspectRatio:u,layout:a,qualityType:n,qualityPercent:c}}},k=e=>{let{srcset:t,setting:l,storage:n,baseSrc:c,priority:u,customAttrs:d,width:y=2237,height:m=1678,isNotLazyload:L,backupFileKey:k,backupFilePath:A,srcIsLiquidCode:b,pageContext:F,alt:f=i.DEFAULT_ALT,title:h,src:T=i.DEFAULT_SRC,sizes:E=i.DEFAULT_SIZES}=e,_=!L&&(F?.enableLazyLoadImage??!0)&&!u;return p({...d,...(()=>{let{qualityPercent:e,qualityType:t}=l??{},r=!u&&t&&e?{"quality-type":s(t),"quality-percent":s(e)}:{"quality-type":"","quality-percent":""};return{...f&&{alt:f},...h&&{title:h},width:y,height:m,draggable:"false",...r}})(),...(()=>{let e=k?r(k??"",T):"",s=b?c:a({src:T,backupFileKey:e,backupFilePath:A,storage:n}),l=b?T:o(e??"",n??"THEME",T),i={sizes:"100vw",src:g(y,m),...s&&!u?{"base-src":s}:{},...s?{"data-src":s}:{},...l?{"data-srcset":l}:{}},p={sizes:E,src:s??"",isNotLazyload:"true",srcset:t??"",...s&&!u?{"base-src":s}:{},...u?{loading:"eager",fetchpriority:"high"}:{loading:"lazy"}};return{"data-sizes":"auto",..._?i:p}})()})},A=e=>{let{width:t=i.DEFAULT_WIDTH_PROPS,height:r=i.DEFAULT_HEIGHT_PROPS,quality:a,priority:s,isNotLazyload:o,pageContext:g,base64:n=l,alt:c=i.DEFAULT_ALT,title:u,src:d=i.DEFAULT_SRC}=e,y=!o&&(g?.enableLazyLoadImage??!0)&&!s,m=p((()=>{let e={loading:"lazy",placeholder:"blur",...n&&{blurDataURL:n}};return{...y?e:{loading:"eager",fetchpriority:"high"}}})());return{src:d,alt:c,title:u,width:t,height:r,quality:a,...m}};export{m as getAdaptiveImageAttrs,u as getContainerAttrs,y as getImageLiquidAttrs,d as getLinkWrapperAttrs,L as getNextImageAttrs,k as getNextImageLiquidAttrs,A as getNextImageReactAttrs};

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

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as e,Fragment as s,jsxs as r}from"react/jsx-runtime";import{FALLBACK_IMAGE as t,getAdaptiveImageData as m,IMAGE_PLACEHOLDER as a}from"../common/helpers.js";import{createAttr as o,createStyleReact as l,createStyle as c,createClass as i}from"@gem-sdk/system";import{getAdaptiveImageClasses as d}from"../common/classes.js";import{getAdaptivePictureStyles as p,getAdaptiveImageStyles as n}from"../common/styles.js";let f=f=>{let{alt:h,style:u,srcSet:g,layout:y,priority:x,className:j,aspectRatio:k,borderRadius:w,pictureClass:v,enableLazyLoadImage:z,...L}=f,{getDeviceSource:N}=m(f),{srcTablet:S,srcMobile:b}=N(),A=o({loading:x?"eager":"lazy",src:g?.desktop?.src||t}),I=l({...p()}),P=c({...n({layout:y,aspectRatio:k,borderRadius:w}),...u}),q=i({...d({className:j,hasLazyLoad:!x&&z})});return e(s,{children:r("picture",{style:I,className:v,children:[r(s,{children:[b&&e("source",{media:"(max-width: 767px)",srcSet:z?a:b}),S&&e("source",{media:"(max-width: 1024px)",srcSet:z?a:S})]}),e("img",{...L,...A,alt:h,width:"100%",style:P,className:q,draggable:"false"})]})})};f.defaultProps={layout:{desktop:"cover"}};export{f as default};
+import{jsx as e,Fragment as a,jsxs as s}from"react/jsx-runtime";import{FALLBACK_IMAGE as m,getAdaptiveImageData as r,IMAGE_PLACEHOLDER as o}from"../common/helpers.js";import{createAttr as t,createStyleReact as l,createStyle as d,createClass as c}from"@gem-sdk/system";import{getAdaptiveImageClasses as i}from"../common/classes.js";import{getAdaptivePictureStyles as p,getAdaptiveImageStyles as n}from"../common/styles.js";let g=g=>{let{alt:y,style:f,srcSet:h,layout:u,priority:L,className:x,aspectRatio:z,borderRadius:b,pictureClass:j,pageContext:I,...k}=g,{getDeviceSource:w}=r(g),{srcTablet:v,srcMobile:N}=w(),S=t({loading:L?"eager":"lazy",src:h?.desktop?.src||m}),A=l({...p()}),P=d({...n({layout:u,aspectRatio:z,borderRadius:b}),...f}),q=c({...i({className:x,hasLazyLoad:!L&&I?.enableLazyLoadImage})});return e(a,{children:s("picture",{style:A,className:j,children:[s(a,{children:[N&&e("source",{media:"(max-width: 767px)",srcSet:I?.enableLazyLoadImage?o:N}),v&&e("source",{media:"(max-width: 1024px)",srcSet:I?.enableLazyLoadImage?o:v})]}),e("img",{...k,...S,alt:y,width:"100%",style:P,className:q,draggable:"false"})]})})};g.defaultProps={layout:{desktop:"cover"}};export{g as default};

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

@@ -1,17 +1,17 @@
-import{template as t}from"@gem-sdk/core";import{createAttr as e,createStyle as s,createClass as i}from"@gem-sdk/system";import{getAdaptiveImageClasses as o}from"../common/classes.js";import{createBlurDataURL as a,getAdaptiveImageData as m}from"../common/helpers.js";import{getAdaptivePictureStyles as d,getAdaptiveImageStyles as r}from"../common/styles.js";let h=h=>{let{alt:p,style:c,layout:l,srcSet:$,priority:g,className:w,aspectRatio:k,pageContext:u,pictureClass:b,borderRadius:f,enableLazyLoadImage:n=!0,...x}=h,{getDeviceSource:y}=m(h),{srcDesktop:L,srcTablet:j,srcMobile:z}=y({isLiquid:!0}),S=e({src:n&&!g?a($?.desktop?.width??0,$?.desktop?.height??0):L,"data-src":L}),q=s({...d()}),v=s({...r({layout:l,aspectRatio:k,borderRadius:f}),...c}),A=i({...o({className:w,hasLazyLoad:!g&&n,hasForceLoad:u?.isOptimizePlan})});return t`
-    <picture style="${q}" class="${b}">
-      ${t`
-      ${z?`<source media="(max-width: 767px)" data-srcSet="${z}" srcset="${n&&!g?a($?.mobile?.width??$?.tablet?.width??$?.desktop?.width??0,$?.mobile?.height??$?.tablet?.height??$?.desktop?.height??0):z}" />`:""}
-      ${j?`<source media="(max-width: 1024px)" data-srcSet="${j}" srcset="${n&&!g?a($?.tablet?.width??$?.desktop?.width??0,$?.tablet?.height??$?.desktop?.height??0):j}" />`:""}
+import{template as e}from"@gem-sdk/core";import{createAttr as t,createStyle as a,createClass as s}from"@gem-sdk/system";import{getAdaptiveImageClasses as o}from"../common/classes.js";import{createBlurDataURL as i,getAdaptiveImageData as m}from"../common/helpers.js";import{getAdaptivePictureStyles as d,getAdaptiveImageStyles as r}from"../common/styles.js";let h=h=>{let{alt:l,style:p,layout:c,srcSet:$,priority:g,className:L,aspectRatio:b,pageContext:n,pictureClass:w,borderRadius:y,...k}=h,{getDeviceSource:u}=m(h),{srcDesktop:f,srcTablet:z,srcMobile:x}=u({isLiquid:!0}),I=t({src:n?.enableLazyLoadImage&&!g?i($?.desktop?.width??0,$?.desktop?.height??0):f,"data-src":f}),j=a({...d()}),S=a({...r({layout:c,aspectRatio:b,borderRadius:y}),...p}),q=s({...o({className:L,hasLazyLoad:!g&&n?.enableLazyLoadImage,hasForceLoad:n?.isOptimizePlan})});return e`
+    <picture style="${j}" class="${w}">
+      ${e`
+      ${x?`<source media="(max-width: 767px)" data-srcSet="${x}" srcset="${n?.enableLazyLoadImage&&!g?i($?.mobile?.width??$?.tablet?.width??$?.desktop?.width??0,$?.mobile?.height??$?.tablet?.height??$?.desktop?.height??0):x}" />`:""}
+      ${z?`<source media="(max-width: 1024px)" data-srcSet="${z}" srcset="${n?.enableLazyLoadImage&&!g?i($?.tablet?.width??$?.desktop?.width??0,$?.tablet?.height??$?.desktop?.height??0):z}" />`:""}
     `}
-      ${t`
+      ${e`
       <img
-        ${{...x}}
-        ${{...S}}
-        alt="${p}"
+        ${{...k}}
+        ${{...I}}
+        alt="${l}"
         width="100%"
-        style="${v}"
-        class="${A}"
+        style="${S}"
+        class="${q}"
       />
     `}
     </picture>

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

@@ -1,16 +1,16 @@
-import{template as s}from"@gem-sdk/core";import{createStyle as e,createClass as t,createAttr as i,If as m}from"@gem-sdk/system";import{getLinkData as o}from"../../helpers.js";import r from"./AdaptiveImage.liquid.js";import l from"./NextImage.liquid.js";import{getWrapperStyles as a,getImageStyles as p,getContainerStyles as d}from"../common/styles.js";import{getWrapperClasses as u,getImageClasses as c,getContainerClasses as f}from"../common/classes.js";import{getContainerAttrs as n,getAdaptiveImageAttrs as $,getNextImageAttrs as g,getLinkWrapperAttrs as j,getImageLiquidAttrs as y}from"../common/attrs.js";import{getSettingTranslatedImageAndSeo as q}from"../common/helpers.js";let v=({style:v,styles:h,setting:I,advanced:L,className:N,pageContext:k,builderAttrs:x,builderProps:W})=>{let A=q({setting:I,uid:W?.uid,pageContext:k}),{imageLink:C,isAdaptive:b,enableImageLink:w}=A??{},{enableLazyLoadImage:z}=k??{},{Wrapper:B,urlData:D}=o({defaultWrap:"div",setting:C,enableImageLink:w,isLiquid:!0}),E=e(a(h)),F=e(p(h,W)),G=e(d(v,h)),H=t(u()),J=t(c(N,h)),K=t(f(W?.uid,L?.cssClass,h?.shape)),M=i(n(x,W?.uid)),O=j({urlData:D,imageLink:C,title:A?.title,isLiquid:!0}),P=$({styles:h,setting:A,isLiquid:!0}),Q=g({styles:h,setting:A}),R=y({pageContext:k,enableLazyLoadImage:z});return s`
+import{template as s}from"@gem-sdk/core";import{createStyle as e,createClass as t,createAttr as i,If as m}from"@gem-sdk/system";import{getLinkData as o}from"../../helpers.js";import r from"./AdaptiveImage.liquid.js";import l from"./NextImage.liquid.js";import{getWrapperStyles as a,getImageStyles as p,getContainerStyles as d}from"../common/styles.js";import{getWrapperClasses as u,getImageClasses as c,getContainerClasses as f}from"../common/classes.js";import{getContainerAttrs as n,getAdaptiveImageAttrs as $,getNextImageAttrs as g,getLinkWrapperAttrs as j,getImageLiquidAttrs as y}from"../common/attrs.js";import{getSettingTranslatedImageAndSeo as q}from"../common/helpers.js";let v=({style:v,styles:h,setting:I,advanced:L,className:N,pageContext:k,builderAttrs:x,builderProps:W})=>{let A=q({setting:I,uid:W?.uid,pageContext:k}),{imageLink:C,isAdaptive:b,enableImageLink:w}=A??{},{Wrapper:z,urlData:B}=o({defaultWrap:"div",setting:C,enableImageLink:w,isLiquid:!0}),D=e(a(h)),E=e(p(h,W)),F=e(d(v,h)),G=t(u()),H=t(c(N,h)),J=t(f(W?.uid,L?.cssClass,h?.shape)),K=i(n(x,W?.uid)),M=j({urlData:B,imageLink:C,title:A?.title,isLiquid:!0}),O=$({styles:h,setting:A,isLiquid:!0}),P=g({styles:h,setting:A}),Q=y({pageContext:k});return s`
     <div
       role="presentation"
-      ${{...M}}
-      style="${G}"
-      class="${K}"
+      ${{...K}}
+      style="${F}"
+      class="${J}"
     >
-      <${B}
-        ${O}
-        style="${E}"
-        class="${H}"
+      <${z}
+        ${M}
+        style="${D}"
+        class="${G}"
       >
-        ${m(b,r({...R,...P,style:F,className:J}),l({...R,...Q,style:F,className:J}))}
-      </${B}>
+        ${m(b,r({...Q,...O,style:E,className:H}),l({...Q,...P,style:E,className:H}))}
+      </${z}>
     </div>
   `};export{v as default};

package/dist/esm/image/components/NextImage.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as m}from"react/jsx-runtime";import t from"next/image";import{createStyle as e,createClass as o}from"@gem-sdk/system";import{getNextImageClasses as s}from"../common/classes.js";import{getNextImageStyles as r}from"../common/styles.js";import{getNextImageReactAttrs as a}from"../common/attrs.js";let i=i=>{let{style:f,imgRef:l,setting:c,priority:p,className:n,width:j,height:x,isNotLazyload:y,isDisableAspectStyle:d,enableLazyLoadImage:g=!0}=i,u=e({...f,...r({width:j,height:x,setting:c,isDisableAspectStyle:d,isDisableObjectFit:!1})}),b=o({...s({className:n,hasLazyLoad:!y&&g&&!p})}),L=a(i);return m(t,{ref:l,...L,style:u,className:b})};export{i as default};
+import{jsx as m}from"react/jsx-runtime";import e from"next/image";import{createStyle as t,createClass as o}from"@gem-sdk/system";import{getNextImageClasses as r}from"../common/classes.js";import{getNextImageStyles as s}from"../common/styles.js";import{getNextImageReactAttrs as a}from"../common/attrs.js";let i=i=>{let{style:l,imgRef:f,setting:c,priority:n,className:p,width:j,height:g,isNotLazyload:x,isDisableAspectStyle:y,pageContext:b}=i,d=!x&&(b?.enableLazyLoadImage??!0)&&!n,u=t({...l,...s({width:j,height:g,setting:c,isDisableAspectStyle:y,isDisableObjectFit:!1})}),I=o({...r({className:p,hasLazyLoad:d})}),L=a(i);return m(e,{ref:f,...L,style:u,className:I})};export{i as default};

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

@@ -1,4 +1,4 @@
-import{template as m}from"@gem-sdk/core";import{createStyle as s,createClass as o}from"@gem-sdk/system";import{getNextImageClasses as t}from"../common/classes.js";import{getNextImageStyles as e}from"../common/styles.js";import{getNextImageLiquidAttrs as r}from"../common/attrs.js";let i=i=>{let{style:a,setting:l,priority:p,className:c,pageContext:d,width:f,height:n,customLazyload:g,isDisableObjectFit:y,isDisableAspectStyle:$,enableLazyLoadImage:j=!0}=i,z=s({...a,...e({width:f,height:n,setting:l,isDisableObjectFit:y,isDisableAspectStyle:$})}),k=o({...t({className:c,hasLazyLoad:!g&&j&&!p,isOptimizePlan:d?.isOptimizePlan})}),u=r(i);return m`
+import{template as m}from"@gem-sdk/core";import{createStyle as e,createClass as o}from"@gem-sdk/system";import{getNextImageClasses as s}from"../common/classes.js";import{getNextImageStyles as t}from"../common/styles.js";import{getNextImageLiquidAttrs as r}from"../common/attrs.js";let i=i=>{let{style:a,setting:l,priority:p,className:n,pageContext:c,width:d,height:f,customLazyload:g,isDisableObjectFit:y,isDisableAspectStyle:$}=i,j=!g&&(c?.enableLazyLoadImage??!0)&&!p,z=e({...a,...t({width:d,height:f,setting:l,isDisableObjectFit:y,isDisableAspectStyle:$})}),k=o({...s({className:n,hasLazyLoad:j,isOptimizePlan:c?.isOptimizePlan})}),u=r(i);return m`
     <img
       ${u}
       id="${i?.id}"

package/dist/esm/image/settings/configs/ui-v2.js

@@ -1 +1 @@
-let e=[{label:"Style",controls:[{setting:{id:"imageStyle"},layout:"vertical",controlChangeTrigger:{settings:[{condition:'imageStyle==="circle"',source:["imageStyle"],action:{controlId:"shape",newValue:{shape:"square",shapeValue:"1/1",shapeLinked:!0,width:"80px"},groupType:"style",controlType:"style"}},{condition:'imageStyle==="circle"',source:["imageStyle"],action:{controlId:"borderRadius",newValue:{bblr:"9999px",btrr:"9999px",bbrr:"9999px",btlr:"9999px",radiusType:"circle"},groupType:"style",controlType:"style"}},{condition:'imageStyle==="circle"',source:["imageStyle"],action:{controlId:"wrapperBorder",newValue:{border:"none",color:"transparent",borderWidth:"0px"},groupType:"style",controlType:"style"}},{condition:'imageStyle==="rectangle"',source:["imageStyle"],action:{controlId:"wrapperBorder",newValue:{border:"none",color:"transparent",borderWidth:"0px"},groupType:"style",controlType:"style"}},{condition:'imageStyle==="circle"',source:["imageStyle"],action:{controlId:"shadow",newValue:{enable:!1},groupType:"style",controlType:"style"}},{condition:'imageStyle==="rectangle"',source:["imageStyle"],action:{controlId:"shadow",newValue:{enable:!1},groupType:"style",controlType:"style"}},{condition:'imageStyle==="rectangle"',source:["imageStyle"],action:{controlId:"shape",newValue:{shape:"original",shapeValue:"",width:"100%"},groupType:"style",controlType:"style"}},{condition:'imageStyle==="rectangle"',source:["imageStyle"],action:{controlId:"borderRadius",newValue:{bblr:"0px",btrr:"0px",bbrr:"0px",btlr:"0px",radiusType:"none"},groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}}]},{label:"Source",controls:[{conditionDisplay:"isAdaptive === false",setting:{id:"image"},layout:"vertical",options:{updateFields:[{field:"preload",settingId:"priority"},{field:"altText",settingId:"alt"},{field:"imageTitle",settingId:"title"}]},controlChangeTrigger:{settings:[{action:{controlId:"priority",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"alt",valueFromField:"altText",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"title",valueFromField:"imageTitle",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}},{conditionDisplay:"isAdaptive === true",setting:{id:"srcSet"},layout:"vertical",options:{updateFields:[{field:"preload",settingId:"priority"},{field:"altText",settingId:"alt"},{field:"imageTitle",settingId:"title"}]},controlChangeTrigger:{settings:[{action:{controlId:"priority",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"alt",valueFromField:"altText",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"title",valueFromField:"imageTitle",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"Scale",setting:{id:"objectFit"},conditionDisplay:'shape.shape !== "original"'}]},{label:"Size",hiddenOnMobile:!0,controls:[{setting:{id:"shape"},layout:"vertical"}]},{label:"Shape",hiddenOnMobile:!0,controls:[{label:"Border",controlConfig:{id:"border",type:"border-v2",linkWithSetting:{name:"wrapperBorder"}}},{label:"Corner",controlConfig:{id:"corner",type:"corner-v2",linkWithSetting:{name:"borderRadius"}}},{label:"Shadow",setting:{id:"shadow"},options:{updateFields:[{field:"enable",settingId:"hasActiveShadow"}]},controlChangeTrigger:{settings:[{condition:"shadow.enable === true",source:["shadow","hasActiveShadow"],action:{controlId:"hasActiveShadow",groupType:"advanced",controlType:"advanced",newValue:!0}},{condition:"shadow.enable === false",source:["shadow","hasActiveShadow"],action:{controlId:"hasActiveShadow",groupType:"advanced",controlType:"advanced",newValue:!1}}],options:{noRecordHistory:!0}}}]},{controls:[{label:"Link",setting:{id:"enableImageLink"},options:{labelVariant:"primary",toggleStyle:"switch"}},{layout:"vertical",controlConfig:{id:"linkedToPreSalesPageBanner",type:"banner",message:"Pre-sales page elements with link should redirect to the Sales page."},conditionDisplay:'pageType === "GP_PRE_SALE_PAGE" && enableImageLink == true'},{setting:{id:"imageLink"},conditionDisplay:"enableImageLink === true",layout:"vertical"}]},{label:"SEO",hiddenOnMobile:!0,controls:[{type:"combo",label:"Alt text",iconName:"polaris-text-block",getValueFromSettingID:"alt",compoDefaultValue:"Describes the appearance of the image",isHideClear:!0,controls:[{label:"Content",setting:{id:"alt"},layout:"vertical"}]},{type:"combo",label:"Image title",iconName:"polaris-text-block",getValueFromSettingID:"title",isHideClear:!0,compoDefaultValue:"Title",controls:[{label:"Content",setting:{id:"title"},layout:"vertical"}]}]},{label:"Optimize LCP",conditionDisplay:'pageType !== "STATIC"',hiddenOnMobile:!0,controls:[{label:"Preload",setting:{id:"priority"}},{label:"Quality",setting:{id:"qualityType"},options:{disableMessage:"This setting only works with images uploaded to Shopify"},conditionEnable:"(activeScreenId === \"desktop\" && srcSet?.src && srcSet.src.includes('cdn.shopify.com')) || (activeScreenId === \"tablet\" && srcSet?.src && srcSet.src.includes('cdn.shopify.com')) || (activeScreenId === \"mobile\" && srcSet?.src && srcSet.src.includes('cdn.shopify.com'))",conditionDisplay:"priority === false"},{layout:"horizontal",label:"Quality",conditionDisplay:'qualityType == "custom" && priority === false && ((activeScreenId === "desktop" && srcSet?.src && srcSet.src.includes("cdn.shopify.com")) || (activeScreenId === "tablet" && srcSet?.src && srcSet.src.includes("cdn.shopify.com")) || (activeScreenId === "mobile" && srcSet?.src && srcSet.src.includes("cdn.shopify.com")))',setting:{id:"qualityPercent"}}]},{controls:[{label:"Align",hiddenOnMobile:!0,setting:{id:"align"},conditionEnable:'!(shape.width === "default" || (parseInt(shape.width) >= 100 && shape.width?.includes("%")))',options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Horizontal alignment is disabled when the width is set to 100% or greater"}}]}];export{e as SettingUIV2};
+let e=[{label:"Style",controls:[{setting:{id:"imageStyle"},layout:"vertical",controlChangeTrigger:{settings:[{condition:'imageStyle==="circle"',source:["imageStyle"],action:{controlId:"shape",newValue:{shape:"square",shapeValue:"1/1",shapeLinked:!0,width:"80px"},groupType:"style",controlType:"style"}},{condition:'imageStyle==="circle"',source:["imageStyle"],action:{controlId:"borderRadius",newValue:{bblr:"9999px",btrr:"9999px",bbrr:"9999px",btlr:"9999px",radiusType:"circle"},groupType:"style",controlType:"style"}},{condition:'imageStyle==="circle"',source:["imageStyle"],action:{controlId:"wrapperBorder",newValue:{border:"none",color:"transparent",borderWidth:"0px"},groupType:"style",controlType:"style"}},{condition:'imageStyle==="rectangle"',source:["imageStyle"],action:{controlId:"wrapperBorder",newValue:{border:"none",color:"transparent",borderWidth:"0px"},groupType:"style",controlType:"style"}},{condition:'imageStyle==="circle"',source:["imageStyle"],action:{controlId:"shadow",newValue:{enable:!1},groupType:"style",controlType:"style"}},{condition:'imageStyle==="rectangle"',source:["imageStyle"],action:{controlId:"shadow",newValue:{enable:!1},groupType:"style",controlType:"style"}},{condition:'imageStyle==="rectangle"',source:["imageStyle"],action:{controlId:"shape",newValue:{shape:"original",shapeValue:"",width:"100%"},groupType:"style",controlType:"style"}},{condition:'imageStyle==="rectangle"',source:["imageStyle"],action:{controlId:"borderRadius",newValue:{bblr:"0px",btrr:"0px",bbrr:"0px",btlr:"0px",radiusType:"none"},groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}}]},{label:"Source",controls:[{conditionDisplay:"isAdaptive === false",setting:{id:"image"},layout:"vertical",options:{updateFields:[{field:"preload",settingId:"priority"},{field:"altText",settingId:"alt"},{field:"imageTitle",settingId:"title"}]},controlChangeTrigger:{settings:[{action:{controlId:"priority",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"alt",valueFromField:"altText",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"title",valueFromField:"imageTitle",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}},{conditionDisplay:"isAdaptive === true",setting:{id:"srcSet"},layout:"vertical",options:{updateFields:[{field:"preload",settingId:"priority"},{field:"altText",settingId:"alt"},{field:"imageTitle",settingId:"title"}]},controlChangeTrigger:{settings:[{action:{controlId:"priority",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"alt",valueFromField:"altText",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"title",valueFromField:"imageTitle",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"Scale",setting:{id:"objectFit"},conditionDisplay:'shape.shape !== "original"'}]},{label:"Size",hiddenOnMobile:!0,controls:[{setting:{id:"shape"},layout:"vertical"}]},{label:"Shape",hiddenOnMobile:!0,controls:[{label:"Border",controlConfig:{id:"border",type:"border-v2",linkWithSetting:{name:"wrapperBorder"}}},{label:"Corner",controlConfig:{id:"corner",type:"corner-v2",linkWithSetting:{name:"borderRadius"}}},{label:"Shadow",setting:{id:"shadow"},options:{updateFields:[{field:"enable",settingId:"hasActiveShadow"}]},controlChangeTrigger:{settings:[{condition:"shadow.enable === true",source:["shadow","hasActiveShadow"],action:{controlId:"hasActiveShadow",groupType:"advanced",controlType:"advanced",newValue:!0}},{condition:"shadow.enable === false",source:["shadow","hasActiveShadow"],action:{controlId:"hasActiveShadow",groupType:"advanced",controlType:"advanced",newValue:!1}}],options:{noRecordHistory:!0}}}]},{controls:[{label:"Link",setting:{id:"enableImageLink"},options:{labelVariant:"primary",toggleStyle:"switch"}},{layout:"vertical",controlConfig:{id:"linkedToPreSalesPageBanner",type:"banner",message:"Pre-sales page elements with link should redirect to the Sales page."},conditionDisplay:'pageType === "GP_PRE_SALE_PAGE" && enableImageLink == true'},{setting:{id:"imageLink"},conditionDisplay:"enableImageLink === true",layout:"vertical"}]},{label:"SEO",hiddenOnMobile:!0,controls:[{type:"combo",label:"Alt text",iconName:"polaris-text-block",getValueFromSettingID:"alt",compoDefaultValue:"Describes the appearance of the image",isHideClear:!0,controls:[{label:"Content",setting:{id:"alt"},layout:"vertical"}]},{type:"combo",label:"Image title",iconName:"polaris-text-block",getValueFromSettingID:"title",isHideClear:!0,compoDefaultValue:"Title",controls:[{label:"Content",setting:{id:"title"},layout:"vertical"}]}]},{label:"Optimize LCP",hiddenOnMobile:!0,controls:[{label:"Preload",setting:{id:"priority"}},{label:"Quality",setting:{id:"qualityType"},options:{disableMessage:"This setting only works with images uploaded to Shopify"},conditionEnable:"(activeScreenId === \"desktop\" && srcSet?.src && srcSet.src.includes('cdn.shopify.com')) || (activeScreenId === \"tablet\" && srcSet?.src && srcSet.src.includes('cdn.shopify.com')) || (activeScreenId === \"mobile\" && srcSet?.src && srcSet.src.includes('cdn.shopify.com'))",conditionDisplay:"priority === false"},{layout:"horizontal",label:"Quality",conditionDisplay:'qualityType == "custom" && priority === false && ((activeScreenId === "desktop" && srcSet?.src && srcSet.src.includes("cdn.shopify.com")) || (activeScreenId === "tablet" && srcSet?.src && srcSet.src.includes("cdn.shopify.com")) || (activeScreenId === "mobile" && srcSet?.src && srcSet.src.includes("cdn.shopify.com")))',setting:{id:"qualityPercent"}}]},{controls:[{label:"Align",hiddenOnMobile:!0,setting:{id:"align"},conditionEnable:'!(shape.width === "default" || (parseInt(shape.width) >= 100 && shape.width?.includes("%")))',options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Horizontal alignment is disabled when the width is set to 100% or greater"}}]}];export{e as SettingUIV2};

package/dist/esm/image-comparison/components/CompareImage.liquid.js

@@ -1,26 +1,26 @@
-import{template as t,isLocalEnv as e,baseAssetURL as i}from"@gem-sdk/core";import{createStyle as s,createClass as a,createAttr as r,createStateOrContext as l,If as o}from"@gem-sdk/system";import{getSettingPreloadData as m}from"../../helpers.js";import d from"../../image/components/NextImage.liquid.js";import{getOuterWrapperStyles as p,getWrapperWidth as c,getContainerStyles as g,getLazyPlaceholderStyle as n,getImageStyles as y,getLabelStyles as h,getArrowStyles as f,getLineStyles as $,getHandleStyles as b,getHandleCustomStyles as L,getSliderStyles as S}from"../common/styles.js";import{getOuterWrapperClasses as j,getLabelClasses as u,getLabelContainerClasses as I}from"../common/classes.js";import{getImageLiquidAttrs as v,getImagePlaceholderAttrs as w,getLabelLiquidAttrs as A,getLabelAttrs as C}from"../common/attrs.js";import{getData as q}from"../common/helpers.js";import N from"./Label.liquid.js";import k from"./SlideHandle.liquid.js";let z=z=>{let{leftImage:D,rightImage:E,advanced:O,builderData:x,pageContext:F,preload:G=!1,onSliderPositionChange:H}=z,{hover:W,styles:_,handle:J,handleSize:M,leftImageAlt:P,leftImageTitle:R,leftImageCss:T,leftImageLabel:V,rightImageAlt:B,rightImageTitle:K,rightImageCss:Q,rightImageLabel:U,sliderLineWidth:X,sliderLineColor:Y,sliderPositionPercentage:Z,vertical:tt,componentUid:te,tempImage:ti,aspectRatio:ts,defaultRatio:ta,isHorizontal:tr,hasLeftLabel:tl,hasRightLabel:to,qualityType:tm,qualityPercent:td,getLeftImageSrc:tp,getRightImageSrc:tc}=q(z),tg=tp({isLiquid:!0}),tn=tc({isLiquid:!0}),ty=s({...p(_)}),th=s({...c({width:_?.width,leftImageWidth:D?.width,rightImageWidth:E?.width})}),tf=s({...g({aspectRatio:ts,builderData:x})}),t$=s({...n(ts)}),tb=s({...y({type:"right",props:z})}),tL=s({...y({type:"left",props:z})}),tS=s({...h({styles:_,type:"left",isHorizontal:tr})}),tj=s({...h({styles:_,type:"right",isHorizontal:tr})}),tu=s({...f({type:"left"})}),tI=s({...f({type:"right"})}),tv=s({...$({isHorizontal:tr,sliderLineColor:Y,sliderLineWidth:X})}),tw=s({...b({handleSize:M,isHorizontal:tr,sliderLineColor:Y,sliderLineWidth:X})}),tA=s({...L()}),tC=s({...S({hover:W,handleSize:M,isHorizontal:tr})}),tq=a({...j(O?.cssClass)}),tN=a({...u(_)}),tk=a({...I()}),tz=C({componentUid:te,positionId:"left",label:V??""}),tD=C({componentUid:te,positionId:"right",label:U??""}),tE=r({...v({priority:G,src:tn,title:K,isDisableObjectFit:!0,isDisableAspectStyle:!0,id:`right-image-${te}`})}),tO=r({...v({priority:G,src:tg,title:R,isDisableObjectFit:!0,isDisableAspectStyle:!0,id:`left-image-${te}`})}),tx=A({pageContext:F,translateLabel:"leftImageLabel"}),tF=A({pageContext:F,translateLabel:"rightImageLabel"}),tG=r({...w({width:ti?.width,height:ti?.height})}),tH=l({hover:W,handle:J,vertical:tt,leftImage:D,rightImage:E,handleSize:M,aspectRatio:ts,defaultRatio:ta,componentUid:te,leftImageCss:T,rightImageCss:Q,sliderLineColor:Y,sliderLineWidth:X,sliderPositionPercentage:Z,onSliderPositionChange:H});return t`
+import{template as t,isLocalEnv as i,baseAssetURL as e}from"@gem-sdk/core";import{createStyle as s,createClass as a,createAttr as r,createStateOrContext as l,If as o}from"@gem-sdk/system";import{getSettingPreloadData as m}from"../../helpers.js";import d from"../../image/components/NextImage.liquid.js";import{getOuterWrapperStyles as p,getWrapperWidth as c,getContainerStyles as g,getLazyPlaceholderStyle as n,getImageStyles as h,getLabelStyles as y,getArrowStyles as f,getLineStyles as $,getHandleStyles as b,getHandleCustomStyles as S,getSliderStyles as j}from"../common/styles.js";import{getOuterWrapperClasses as u,getLabelClasses as I,getLabelContainerClasses as L}from"../common/classes.js";import{getImageLiquidAttrs as v,getImagePlaceholderAttrs as w,getLabelLiquidAttrs as A,getLabelAttrs as C}from"../common/attrs.js";import{getData as q}from"../common/helpers.js";import N from"./Label.liquid.js";import k from"./SlideHandle.liquid.js";let D=D=>{let{leftImage:E,rightImage:O,advanced:x,builderData:z,pageContext:F,preload:G=!1,onSliderPositionChange:H}=D,{hover:W,styles:_,handle:J,handleSize:M,leftImageAlt:P,leftImageTitle:R,leftImageCss:T,leftImageLabel:V,rightImageAlt:B,rightImageTitle:K,rightImageCss:Q,rightImageLabel:U,sliderLineWidth:X,sliderLineColor:Y,sliderPositionPercentage:Z,vertical:tt,componentUid:ti,tempImage:te,aspectRatio:ts,defaultRatio:ta,isHorizontal:tr,hasLeftLabel:tl,hasRightLabel:to,qualityType:tm,qualityPercent:td,getLeftImageSrc:tp,getRightImageSrc:tc}=q(D),tg=tp({isLiquid:!0}),tn=tc({isLiquid:!0}),th=s({...p(_)}),ty=s({...c({width:_?.width,leftImageWidth:E?.width,rightImageWidth:O?.width})}),tf=s({...g({aspectRatio:ts,builderData:z})}),t$=s({...n(ts)}),tb=s({...h({type:"right",props:D})}),tS=s({...h({type:"left",props:D})}),tj=s({...y({styles:_,type:"left",isHorizontal:tr})}),tu=s({...y({styles:_,type:"right",isHorizontal:tr})}),tI=s({...f({type:"left"})}),tL=s({...f({type:"right"})}),tv=s({...$({isHorizontal:tr,sliderLineColor:Y,sliderLineWidth:X})}),tw=s({...b({handleSize:M,isHorizontal:tr,sliderLineColor:Y,sliderLineWidth:X})}),tA=s({...S()}),tC=s({...j({hover:W,handleSize:M,isHorizontal:tr})}),tq=a({...u(x?.cssClass)}),tN=a({...I(_)}),tk=a({...L()}),tD=C({componentUid:ti,positionId:"left",label:V??""}),tE=C({componentUid:ti,positionId:"right",label:U??""}),tO=r({...v({priority:G,src:tn,title:K,isDisableObjectFit:!0,isDisableAspectStyle:!0,id:`right-image-${ti}`})}),tx=r({...v({priority:G,src:tg,title:R,isDisableObjectFit:!0,isDisableAspectStyle:!0,id:`left-image-${ti}`})}),tz=A({pageContext:F,translateLabel:"leftImageLabel"}),tF=A({pageContext:F,translateLabel:"rightImageLabel"}),tG=r({...w({width:te?.width,height:te?.height})}),tH=l({hover:W,handle:J,vertical:tt,leftImage:E,rightImage:O,handleSize:M,aspectRatio:ts,defaultRatio:ta,componentUid:ti,leftImageCss:T,rightImageCss:Q,sliderLineColor:Y,sliderLineWidth:X,sliderPositionPercentage:Z,onSliderPositionChange:H});return t`
     <gp-image-comparison
-      data-id="${te}"
-      style="${ty}"
+      data-id="${ti}"
+      style="${th}"
       class="${tq}"
       gp-data='${JSON.stringify(tH)}'
     >
-      <div id="img-comparison-wrapper-${te}" style="${th}">
+      <div id="img-comparison-wrapper-${ti}" style="${ty}">
         <div
-          id="img-comparison-container-${te}"
+          id="img-comparison-container-${ti}"
           data-testid="container"
           style="${tf}"
         >
           ${t`
       <img alt="" ${tG} style="${t$}" />
     `}
-          ${d({...tE,alt:B,style:tb,setting:{qualityType:tm,qualityPercent:td},enableLazyLoadImage:!G,isNotLazyload:G,customAttrs:{"data-testid":"right-image"}})}
-          ${d({...tO,alt:P,style:tL,setting:{qualityType:tm,qualityPercent:td},enableLazyLoadImage:!G,isNotLazyload:G,customAttrs:{"data-testid":"left-image"}})}
-          ${k({componentUid:te,customHandle:J,lineStyles:tv,sliderStyles:tC,handleStyles:tw,customHandleStyles:tA,leftArrowStyles:tu,rightArrowStyles:tI})}
-          ${o(tl,N({...tz,...tx,styles:_,childrenClass:tN,childrenStyle:tS,containerClass:tk,containerStyle:{}}),"")}
-          ${o(to,N({...tD,...tF,styles:_,childrenClass:tN,childrenStyle:tj,containerClass:tk,containerStyle:{}}),"")}
+          ${d({...tO,alt:B,style:tb,setting:{qualityType:tm,qualityPercent:td},pageContext:F,isNotLazyload:G,customAttrs:{"data-testid":"right-image"}})}
+          ${d({...tx,alt:P,style:tS,setting:{qualityType:tm,qualityPercent:td},pageContext:F,isNotLazyload:G,customAttrs:{"data-testid":"left-image"}})}
+          ${k({componentUid:ti,customHandle:J,lineStyles:tv,sliderStyles:tC,handleStyles:tw,customHandleStyles:tA,leftArrowStyles:tI,rightArrowStyles:tL})}
+          ${o(tl,N({...tD,...tz,styles:_,childrenClass:tN,childrenStyle:tj,containerClass:tk,containerStyle:{}}),"")}
+          ${o(to,N({...tE,...tF,styles:_,childrenClass:tN,childrenStyle:tu,containerClass:tk,containerStyle:{}}),"")}
         </div>
       </div>
     </gp-image-comparison>
-    ${`${o(e,`<script ${m('class="gps-link" delay',"src")}="{{ 'gp-image-comparison-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${m('class="gps-link" delay',"src")}="${i}/assets-v2/gp-image-comparison-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}`}
-  `};export{z as default};
+    ${`${o(i,`<script ${m('class="gps-link" delay',"src")}="{{ 'gp-image-comparison-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${m('class="gps-link" delay',"src")}="${e}/assets-v2/gp-image-comparison-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}`}
+  `};export{D as default};

package/dist/esm/image-comparison/settings/configs/ui-v2.js

@@ -1 +1 @@
-let e=[{label:"Layout",controls:[{setting:{id:"direction"},layout:"vertical",options:{fullWidth:!0}}]},{label:"Image",controls:[{label:"1st image",setting:{id:"imageLeft"},options:{updateFields:[{field:"preload",settingId:"preload"},{field:"altText",settingId:"altLeft"},{field:"imageTitle",settingId:"titleLeft"}]},controlChangeTrigger:{settings:[{action:{controlId:"preload",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"altLeft",valueFromField:"altText",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"titleLeft",valueFromField:"imageTitle",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"2nd image",setting:{id:"imageRight"},options:{updateFields:[{field:"preload",settingId:"preload"},{field:"altText",settingId:"altRight"},{field:"imageTitle",settingId:"titleRight"}]},controlChangeTrigger:{settings:[{action:{controlId:"preload",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"altRight",valueFromField:"altText",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"titleRight",valueFromField:"imageTitle",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"Scale",setting:{id:"imageScale"}}]},{label:"Slider",controls:[{label:"Behavior",setting:{id:"hoverToSlide"}},{label:"Default ratio",setting:{id:"defaultPercentage"}}]},{controls:[{label:"Badge",hiddenOnMobile:!0,setting:{id:"enableLabel"},options:{labelVariant:"primary",toggleStyle:"switch"}},{label:"1st",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"leftImageLabel"}},{label:"2nd",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"rightImageLabel"}},{conditionDisplay:"enableLabel === true",label:"Text style",hiddenOnMobile:!0,setting:{id:"typo"},options:{updateFields:[{field:"attrs.color",settingId:"labelTextColor"}]},controlChangeTrigger:{settings:[{action:{controlId:"labelTextColor",valueFromField:"attrs.color",groupType:"style",controlType:"style",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"Padding",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"labelPadding"}},{label:"Background",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"labelBackgroundColor"}},{label:"Border",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"labelBorder"}},{label:"Corner",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"labelRounded"}},{label:"Shadow",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"labelShadow"}},{label:"Position",hiddenOnMobile:!0,setting:{id:"labelPositionHoz"},conditionDisplay:"enableLabel === true && direction === 'horizontal'"},{label:"Position",hiddenOnMobile:!0,setting:{id:"labelPositionVer"},conditionDisplay:"enableLabel === true && direction === 'vertical'"}]},{label:"Size",hiddenOnMobile:!0,controls:[{label:"Frame",setting:{id:"aspectRatio"}},{label:"Ratio",conditionDisplay:"aspectRatio === 'custom'",setting:{id:"customAspectRadio"}},{label:"Width",setting:{id:"width"}}]},{label:"Shape",hiddenOnMobile:!0,controls:[{label:"Border",setting:{id:"border",state:"normal"}},{label:"Corner",setting:{id:"rounded",state:"normal"}},{label:"Shadow",setting:{id:"boxShadow",state:"normal"},options:{updateFields:[{field:"normal.enable",settingId:"hasBoxShadow",state:"normal"}]},controlChangeTrigger:{settings:[{condition:"boxShadow.normal.enable === true",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!0}},{condition:"boxShadow.normal.enable === false",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!1}}],options:{noRecordHistory:!0}}}]},{label:"Optimize LCP",conditionDisplay:'pageType !== "STATIC"',hiddenOnMobile:!0,controls:[{label:"Preload",setting:{id:"preload"}},{label:"Quality",conditionEnable:"((imageLeft.src || imageRight.src) && (imageLeft.src.includes('cdn.shopify.com') || imageRight.src.includes('cdn.shopify.com')))",conditionDisplay:"preload === false",setting:{id:"qualityType"},options:{fullWidth:!0,disableMessage:"This setting only works with images uploaded to Shopify"}},{layout:"horizontal",label:"Quality",conditionDisplay:'qualityType == "custom" && preload === false && ((imageLeft.src || imageRight.src) && (imageLeft.src.includes("cdn.shopify.com") || imageRight.src.includes("cdn.shopify.com"))) ',setting:{id:"qualityPercent"}}]},{label:"SEO",hiddenOnMobile:!0,controls:[{label:"1st image",type:"combo",iconName:"polaris-text-title",fixedValue:"Edit",popoverLabel:"SEO",setting:{id:"enableSEOLeft"},controls:[{label:"Alt text",options:{labelAlign:"top"},setting:{id:"altLeft"}},{label:"Image title",options:{labelAlign:"top"},setting:{id:"titleLeft"}}]},{label:"2nd image",type:"combo",iconName:"polaris-text-title",fixedValue:"Edit",setting:{id:"enableSEORight"},popoverLabel:"SEO",controls:[{label:"Alt text",options:{labelAlign:"top"},setting:{id:"altRight"}},{label:"Image title",options:{labelAlign:"top"},setting:{id:"titleRight"}}]}]},{controls:[{label:"Align",hiddenOnMobile:!0,conditionEnable:'!(width === "default" || (parseInt(width) >= 100 && width?.includes("%")))',setting:{id:"align"},options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Align is not supported when width is 100%"}}]}];export{e as SettingUIV2};
+let e=[{label:"Layout",controls:[{setting:{id:"direction"},layout:"vertical",options:{fullWidth:!0}}]},{label:"Image",controls:[{label:"1st image",setting:{id:"imageLeft"},options:{updateFields:[{field:"preload",settingId:"preload"},{field:"altText",settingId:"altLeft"},{field:"imageTitle",settingId:"titleLeft"}]},controlChangeTrigger:{settings:[{action:{controlId:"preload",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"altLeft",valueFromField:"altText",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"titleLeft",valueFromField:"imageTitle",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"2nd image",setting:{id:"imageRight"},options:{updateFields:[{field:"preload",settingId:"preload"},{field:"altText",settingId:"altRight"},{field:"imageTitle",settingId:"titleRight"}]},controlChangeTrigger:{settings:[{action:{controlId:"preload",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"altRight",valueFromField:"altText",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"titleRight",valueFromField:"imageTitle",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"Scale",setting:{id:"imageScale"}}]},{label:"Slider",controls:[{label:"Behavior",setting:{id:"hoverToSlide"}},{label:"Default ratio",setting:{id:"defaultPercentage"}}]},{controls:[{label:"Badge",hiddenOnMobile:!0,setting:{id:"enableLabel"},options:{labelVariant:"primary",toggleStyle:"switch"}},{label:"1st",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"leftImageLabel"}},{label:"2nd",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"rightImageLabel"}},{conditionDisplay:"enableLabel === true",label:"Text style",hiddenOnMobile:!0,setting:{id:"typo"},options:{updateFields:[{field:"attrs.color",settingId:"labelTextColor"}]},controlChangeTrigger:{settings:[{action:{controlId:"labelTextColor",valueFromField:"attrs.color",groupType:"style",controlType:"style",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"Padding",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"labelPadding"}},{label:"Background",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"labelBackgroundColor"}},{label:"Border",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"labelBorder"}},{label:"Corner",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"labelRounded"}},{label:"Shadow",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"labelShadow"}},{label:"Position",hiddenOnMobile:!0,setting:{id:"labelPositionHoz"},conditionDisplay:"enableLabel === true && direction === 'horizontal'"},{label:"Position",hiddenOnMobile:!0,setting:{id:"labelPositionVer"},conditionDisplay:"enableLabel === true && direction === 'vertical'"}]},{label:"Size",hiddenOnMobile:!0,controls:[{label:"Frame",setting:{id:"aspectRatio"}},{label:"Ratio",conditionDisplay:"aspectRatio === 'custom'",setting:{id:"customAspectRadio"}},{label:"Width",setting:{id:"width"}}]},{label:"Shape",hiddenOnMobile:!0,controls:[{label:"Border",setting:{id:"border",state:"normal"}},{label:"Corner",setting:{id:"rounded",state:"normal"}},{label:"Shadow",setting:{id:"boxShadow",state:"normal"},options:{updateFields:[{field:"normal.enable",settingId:"hasBoxShadow",state:"normal"}]},controlChangeTrigger:{settings:[{condition:"boxShadow.normal.enable === true",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!0}},{condition:"boxShadow.normal.enable === false",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!1}}],options:{noRecordHistory:!0}}}]},{label:"Optimize LCP",hiddenOnMobile:!0,controls:[{label:"Preload",setting:{id:"preload"}},{label:"Quality",conditionEnable:"((imageLeft.src || imageRight.src) && (imageLeft.src.includes('cdn.shopify.com') || imageRight.src.includes('cdn.shopify.com')))",conditionDisplay:"preload === false",setting:{id:"qualityType"},options:{fullWidth:!0,disableMessage:"This setting only works with images uploaded to Shopify"}},{layout:"horizontal",label:"Quality",conditionDisplay:'qualityType == "custom" && preload === false && ((imageLeft.src || imageRight.src) && (imageLeft.src.includes("cdn.shopify.com") || imageRight.src.includes("cdn.shopify.com"))) ',setting:{id:"qualityPercent"}}]},{label:"SEO",hiddenOnMobile:!0,controls:[{label:"1st image",type:"combo",iconName:"polaris-text-title",fixedValue:"Edit",popoverLabel:"SEO",setting:{id:"enableSEOLeft"},controls:[{label:"Alt text",options:{labelAlign:"top"},setting:{id:"altLeft"}},{label:"Image title",options:{labelAlign:"top"},setting:{id:"titleLeft"}}]},{label:"2nd image",type:"combo",iconName:"polaris-text-title",fixedValue:"Edit",setting:{id:"enableSEORight"},popoverLabel:"SEO",controls:[{label:"Alt text",options:{labelAlign:"top"},setting:{id:"altRight"}},{label:"Image title",options:{labelAlign:"top"},setting:{id:"titleRight"}}]}]},{controls:[{label:"Align",hiddenOnMobile:!0,conditionEnable:'!(width === "default" || (parseInt(width) >= 100 && width?.includes("%")))',setting:{id:"align"},options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Align is not supported when width is 100%"}}]}];export{e as SettingUIV2};