@gem-sdk/components 17.0.0-dev.123 → 17.0.0-dev.126

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

@@ -1 +1 @@
-"use strict";var e=require("@gem-sdk/core"),t=require("../../image/common/helpers.js"),o=require("../../constant.js"),r=require("./const.js");const l=(t,o,r)=>{let l={};return e.DEVICES.map(i=>{let s=e.getResponsiveValueByScreen(t,i),a=e.getResponsiveValueByScreen(o,i),n=e.getResponsiveValueByScreen(r,i);l={...l,[i]:1>=(s?.cols?.length||1)?a:n}}),l},i=e=>{if(!e)return{};let t={desktop:e?.desktop?.image,tablet:e?.tablet?.image,mobile:e?.mobile?.image};return t},s=e=>{let o=i(e);return{desktop:t.createBlurDataURL(o?.desktop?.width??0,o?.desktop?.height??0),tablet:t.createBlurDataURL(o?.tablet?.width??o?.desktop?.width??0,o?.tablet?.height??o?.desktop?.width??0),mobile:t.createBlurDataURL(o?.mobile?.width??o?.tablet?.width??o?.desktop?.width??0,o?.mobile?.height??o?.tablet?.height??o?.desktop?.width??0)}},a=(o,r,l,a)=>{if(!o)return"";let n=i(o),p=e.getResponsiveValueByScreen(o,r),b=l?`url(${s(o)[r]})`:`url(${t.getImageSrc(e.getResponsiveValueByScreen(n,r),r,a)})`,g=p?.color?`, ${p.color}`:"";return p?.color?.includes(e.GRADIENT_BGR_KEY)&&p?.type==="image"?`${b}${g}`:p?.color?.includes(e.GRADIENT_BGR_KEY)&&p?.type!=="image"?`${p.color}`:p?.type==="image"?b:"url()"},n=(e,t)=>{switch(e){case"desktop":if(t?.desktop?.type==="video")return{device:"desktop",data:t.desktop};break;case"tablet":if(t?.tablet?.type==="video")return{device:"tablet",data:t.tablet};if(!t?.tablet&&t?.desktop?.type==="video")return{device:"desktop",data:t.desktop};break;case"mobile":if(t?.mobile?.type==="video")return{device:"mobile",data:t.mobile};if(!t?.mobile&&t?.tablet?.type==="video")return{device:"tablet",data:t.tablet};if(!t?.mobile&&!t?.tablet?.type&&t?.desktop?.type==="video")return{device:"desktop",data:t.desktop}}},p=(e,t)=>{if(!e)return t;let o=e?.shapeVideo;return"custom"===o?e?.shapeValue||t:void 0!==o?o:e?.shapeValue??t},b=({shapeByDevice:e,fallbackRatio:t,device:o,currentResult:r})=>{let l=p(e,t);return l?{...r,[o]:l}:r},g=e=>{let t={};for(let o in e)"top"===e[o]?t[o]="start":"bottom"===e[o]?t[o]="end":t[o]="center";return t},c=(e,t)=>{if(!e)return;if(!t)return e.shapeValue;let o=e.shapeVideo;return"custom"===o?e.shapeValue:o},u=(t,o)=>{let r=!1,l=e.DEVICES.reduce((l,i)=>{let s=e.getResponsiveValueByScreen(t,i),a=e.getResponsiveValueByScreen(o,i),n=c(s,a?.type==="video");return n&&(l[i]=n,r=!0),l},{});return{aspectRatio:r?l:void 0}},d=(t,o,r)=>e.DEVICES.reduce((l,i)=>{let s=e.getValueByDevice(t,i),a=s?.type==="video"?s?.videoType:void 0,n=e.getValueByDevice(o,i),p=r?.[i];return p&&"youtube"===a&&"cover"!==n&&(l[i]=p),l},{}),m=({enableParallax:e=!1,attachment:t="scroll"})=>!!e||"fixed"===t,y=(t,o)=>{let r={};return["desktop","mobile","tablet"].forEach(l=>{let i=e.getResponsiveValueByScreen(t,l),s=i?.type==="image"&&o,a=m({enableParallax:s,attachment:t[l]?.attachment});r={...r,[l]:s?"150%":a?"100vh":"100%"}}),e.makeStyleResponsive("h",r)},h=(t,o)=>{let r={};return["desktop","mobile","tablet"].forEach(l=>{let i=e.getResponsiveValueByScreen(t,l),s=i?.type==="image"&&o,a=m({enableParallax:s,attachment:t[l]?.attachment});r={...r,[l]:a?"100vw":"100%"}}),e.makeStyleResponsive("w",r)},f=t=>{let o={};return["desktop","mobile","tablet"].forEach(e=>{o={...o,[e]:t[e]?.attachment==="fixed"?"0px":""}}),e.makeStyleResponsive("top",o)},I=(e,t=0,o=0)=>{let r=t,l=t;if(t>o?r=o:l=o,e>=999){let t=e-r;return t>0?t:0}let i=e-l;return i>0?i:0},v=({device:e,settingLayoutRes:t,contentPosition1ColRes:o})=>{let r=t[e]?.cols??[],l=r.length<=1,i=o[e];if(l&&i)return["space-between","top","center","bottom"].includes(i)?i:void 0},k=e=>{let t=e.desktop,o=e.tablet?e.tablet:t,r=e.mobile?e.mobile:o;return{desktop:t,tablet:o,mobile:r}},S=(t,o)=>{if(!t||!o)return 16/9;let r=e.getResponsiveValueByScreen(t,o),l=r?.videoCustomRatio;if(l?.width&&l?.height){let e=Number(l.width),t=Number(l.height);if(e>0&&t>0)return e/t}return 16/9},x=e=>{switch(e){case"top":default:return{top:"0%",transform:`translate(-50%, 0%) scale(${r.VIDEO_IFRAME_SCALE})`};case"bottom":return{top:"100%",transform:`translate(-50%, -100%) scale(${r.VIDEO_IFRAME_SCALE})`};case"center":return{top:"50%",transform:`translate(-50%, -50%) scale(${r.VIDEO_IFRAME_SCALE})`}}};exports.collectAspectRatioByDevice=u,exports.collectYoutubeAspectRatio=d,exports.debounce=function(e,t){let o;return function(...r){clearTimeout(o),o=setTimeout(()=>e.apply(this,r),t)}},exports.fallbackImg="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI5MDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZGVmcz4KICAgICAgPGxpbmVhckdyYWRpZW50IGlkPSJnLTE5MjAtOTAwIj4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjIwJSIgLz4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjUwJSIgLz4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjcwJSIgLz4KICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxyZWN0IHdpZHRoPSIxOTIwIiBoZWlnaHQ9IjkwMCIgZmlsbD0icmdiYSg1MSwgNTEsIDUxLCAwKSIgLz4KICAgIDxyZWN0IGlkPSJyIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI5MDAiIGZpbGw9InVybCgjZy0xOTIwLTkwMCkiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTE5MjAiIHRvPSIxOTIwIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgIC8+CiAgPC9zdmc+",exports.formatHoverScale=e=>e?String(e).includes("%")?`${e}`:`${e}%`:"100%",exports.getAspectRatio=(e,t)=>{let{aspectRatio:o}=u(e,t);return o},exports.getAttachmentDevice=e=>{let t={};return["desktop","mobile","tablet"].forEach(o=>{let r=e?.[o]?.attachment;t={...t,[o]:"fixed"===r?"fixed":"absolute"}}),t},exports.getBackgroundImageHeroBanner=(t,o=!1,r=!1)=>{if(!t)return;let l={};return e.DEVICES.forEach(e=>{l={...l,[e]:a(t,e,o,r)}}),e.makeStyleResponsive("bgi",l)},exports.getBannerLink=e=>{let t=e?.link;return t?.type==="go-to-sales-page"?{type:"go-to-sales-page",link:o.HREF_TO_SALES_PAGE,target:"_self"}:t},exports.getBgImage=i,exports.getClassAlignBanner=e=>({"!gp-self-start":"left"===e.desktop,"!gp-self-center":"center"===e.desktop,"!gp-self-end":"right"===e.desktop,"tablet:!gp-self-start":"left"===e.tablet,"tablet:!gp-self-center":"center"===e.tablet,"tablet:!gp-self-end":"right"===e.tablet,"mobile:!gp-self-start":"left"===e.mobile,"mobile:!gp-self-center":"center"===e.mobile,"mobile:!gp-self-end":"right"===e.mobile}),exports.getClassContentPosition=e=>{let t={center:"center",top:"start",bottom:"end","space-between":"between"},o=e.desktop||"center",r=e.tablet||o,l=e.mobile||r;return{[`gp-justify-${t[o]}`]:!0,[`tablet:gp-justify-${t[r]}`]:!0,[`mobile:gp-justify-${t[l]}`]:!0}},exports.getClassForContentByFitContent=(t,o)=>{let r={desktop:!1,tablet:!1,mobile:!1};return["desktop","mobile","tablet"].forEach(l=>{let i=e.getResponsiveValueByScreen(t,l),s=!!n(l,o),a=i?.shape,p=i?.height;r={...r,[l]:"original"===a&&"fit-content"!==p&&!s}}),e.cls(r.desktop?"!gp-absolute":"",r.tablet?"tablet:!gp-absolute":"tablet:!gp-relative",r.mobile?"mobile:!gp-absolute":"mobile:!gp-relative")},exports.getClassForStretchContent=t=>{let o={desktop:"none",tablet:"none",mobile:"none"};return["desktop","mobile","tablet"].forEach(r=>{let l=e.getResponsiveValueByScreen(t,r);o={...o,[r]:l}}),e.cls("space-between"===o.desktop?"[&>*>*]:!gp-justify-between":"","space-between"===o.tablet?"tablet:[&>*>*]:!gp-justify-between ":`tablet:[&>*>*]:!gp-justify-${t?.tablet}`,"space-between"===o.mobile?"mobile:[&>*>*]:!gp-justify-between ":`mobile:[&>*>*]:!gp-justify-${t?.mobile}`)},exports.getClassSpaceBetween=(t,o)=>{let r=k(t),l=k(o),i={desktop:v({device:"desktop",settingLayoutRes:r,contentPosition1ColRes:l}),tablet:v({device:"tablet",settingLayoutRes:r,contentPosition1ColRes:l}),mobile:v({device:"mobile",settingLayoutRes:r,contentPosition1ColRes:l})},s={"space-between":{desktop:"!gp-h-full !gp-content-stretch [&>*]:!gp-justify-between [&>*:nth-child(2)]:gp-absolute [&>*:nth-child(2)]:gp-hidden",tablet:"tablet:!gp-h-full tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-between tablet:[&>*:nth-child(2)]:gp-absolute tablet:[&>*:nth-child(2)]:gp-hidden",mobile:"mobile:!gp-h-full mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-between mobile:[&>*:nth-child(2)]:gp-absolute  mobile:[&>*:nth-child(2)]:gp-hidden"},top:{desktop:"!gp-content-stretch [&>*]:!gp-justify-start",tablet:"tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-start",mobile:"mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-start"},center:{desktop:"!gp-content-stretch [&>*]:!gp-justify-center",tablet:"tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-center",mobile:"mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-center"},bottom:{desktop:"!gp-content-stretch [&>*]:!gp-justify-end",tablet:"tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-end",mobile:"mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-end"}},a={};return e.DEVICES.forEach(e=>{let t=i[e],o=s?.[t]?.[e];a[o]=!0}),a},exports.getClassSpaceBetweenLeftRight=e=>{let t=k(e),o=t?.desktop?.type=="left-distributed"||t?.desktop?.type=="right-distributed",r=t?.tablet?.type=="left-distributed"||t?.tablet?.type=="right-distributed",l=t?.mobile?.type=="left-distributed"||t?.mobile?.type=="right-distributed";return{"gp-h-full tablet:gp-h-auto mobile:gp-h-auto [&>*]:!gp-justify-between":o,"tablet:!gp-h-full tablet:[&>*]:!gp-justify-between mobile:gp-h-auto":r,"mobile:!gp-h-full mobile:[&>*]:!gp-justify-between":l,"mobile:!gp-h-auto":!l}},exports.getClipPath=(e,t)=>{if(!t)return`${r.DEFAULT_CLIP_PATH}`;let[o,l,i,s]=(e??"0 0 0 0").split(" ").map(e=>parseInt(e??"0")||0),{btlr:a,btrr:n,bbrr:p,bblr:b}=t,g=I(parseInt(a??"0")||0,o,s),c=I(parseInt(n??"0")||0,o,l),u=I(parseInt(p??"0")||0,l,i),d=I(parseInt(b??"0")||0,i,s);return[g,c,u,d].every(e=>0===e)?`${r.DEFAULT_CLIP_PATH}`:`inset(0 0 0 round ${g}px ${c}px ${u}px ${d}px)`},exports.getContainerRatio=e=>{if(!e)return 0;let{width:t,height:o}=e.getBoundingClientRect();return t&&o?t/o:0},exports.getContentPosition=l,exports.getDataVideoHeroBannerResponsive=n,exports.getDisplayStyleByFitContent=(t,o)=>{let r={desktop:"none",tablet:"none",mobile:"none"};return["desktop","mobile","tablet"].forEach(l=>{let i=e.getResponsiveValueByScreen(t,l),s=!!n(l,o),a=i?.shape,p=i?.height;r={...r,[l]:"original"!==a||"fit-content"===p||s?"none":"block"}}),e.makeStyleResponsive("d",r)},exports.getEnableBgImageByDevice=(t,o)=>{if(!e.getResponsiveValueByScreen(i(o),t))return!1;if(!o?.[t]){if("mobile"===t)return o?.tablet?.type==="image"||o?.desktop?.type==="image"&&!o?.tablet;if("tablet"===t)return o?.desktop?.type==="image"}return o?.[t]?.type==="image"},exports.getOpacityHover=e=>{let{overlayOpacity:t}=e??{},o="number"!=typeof t?.hover||isNaN(t?.hover)?"string"==typeof t?.hover?`${parseInt(t?.hover)}%`:"":`${t?.hover}%`,r="number"!=typeof t?.normal||isNaN(t?.normal)?"string"==typeof t?.normal?`${parseInt(t?.normal)}%`:"0%":`${t?.normal}%`;return o||r},exports.getPercentageVisible=(e,t)=>{let{top:o,height:r}=e,l=-r;return o<l?0:o>t?100:Math.min(Math.max((o-l)/(t-l)*100,0),100)},exports.getResponsiveSetting=k,exports.getStyleAspectRatioHeroBannerCustom=(t,o)=>{let r=e.getAspectRatioGlobalSize(o);return["desktop","mobile","tablet"].forEach(l=>{let i=e.getResponsiveValueByScreen(o,l),s=!!n(l,t);s&&(r=b({shapeByDevice:i,fallbackRatio:"auto",device:l,currentResult:r}))}),e.makeStyleResponsive("aspect",r)},exports.getStyleHeroBannerBg=(e,t)=>{let o=y(e,t),r=h(e,t),l=f(e);return{...o,...r,...l}},exports.getVideoAspectRatio=S,exports.getVisibilityStyle=e=>e?Object.keys(e).filter(e=>["--d","--d-tablet","--d-mobile"].includes(e)).reduce((t,o)=>({...t,[o]:e?.[o]!=="none"?"flex":e?.[o]}),{}):{},exports.getWidth=e=>{let t={};return["desktop","mobile","tablet"].forEach(o=>{let r=e?.[o];r&&(t={...t,[o]:"default"===r?"var(--g-ct-w, 1200px)":r})}),t},exports.getYoutubeAspectRatio=(e,t,o)=>{let r=d(e,t,o);return Object.keys(r).length?r:void 0},exports.horizontalAlign=(e,t,o)=>g(l(e,t,o)),exports.imagePlaceholder=s,exports.isScaleImage=m,exports.mapContentPositionToHorizontal=g,exports.opacityEnabledData=e=>{let{overlayColor:t,overlayOpacity:o}=e??{},r=!t?.normal||o?.normal=="0%"||!o?.normal;return{disableOpacity:r}},exports.resetVideoIframeStyle=e=>{e&&(e.style.removeProperty("width"),e.style.removeProperty("height"),e.style.removeProperty("top"),e.style.removeProperty("left"),e.style.removeProperty("transform"),e.style.removeProperty("position"))},exports.resetVideoWrapperStyle=e=>{e.style.removeProperty("position"),e.style.removeProperty("top"),e.style.removeProperty("left"),e.style.removeProperty("width"),e.style.removeProperty("height")},exports.scrollToContentBanner=e=>e?.target?.closest("div.gp-hero-banner-row")?.scrollTo(0,0),exports.setVideoIframeAlign=(e,t)=>{if(!e)return;let o=x(t);e.style.top=o.top,e.style.transform=o.transform},exports.setVideoWrapperStyle=e=>{Object.assign(e.style,{position:"absolute",top:"0",left:"0",width:"100%",height:"100%"})},exports.showVideoType=t=>e.DEVICES.some(o=>{let r=e.getValueByDevice(t,o);return r?.type!=="color"&&r?.type!=="image"&&!!r&&(r?.videoType==="html5"&&r?.videoHtml5||r?.videoType==="youtube"&&r?.video)}),exports.updateVideoIframeSize=({iframeEl:t,containerRatio:o,videoObjectFit:l,background:i,currentDevice:s,isYoutubeVideoMigrated:a})=>{let n,p;let b=S(i,s),g=e.getResponsiveValueByScreen(i,s);if(!t||!o)return;let c=g?.videoAlign||"top",u=x(c);if("contain"===l){Object.assign(t.style,{position:"absolute",top:"50%",left:"50%",width:"100%",height:"100%",maxWidth:"none",transform:`translate(-50%, -50%) scale(${r.VIDEO_IFRAME_SCALE})`});return}o>=b?(n=100,p=o/b*100):(p=100,n=b/o*100),Object.assign(t.style,{position:"absolute",top:u.top,left:"50%",width:a?"500%":`${n}%`,height:a?"100%":`${p}%`,maxWidth:"none",transform:u.transform})};
+"use strict";var e=require("@gem-sdk/core"),t=require("../../image/common/helpers.js"),o=require("../../constant.js"),r=require("./const.js");const l=(t,o,r)=>{let l={};return e.DEVICES.map(i=>{let s=e.getResponsiveValueByScreen(t,i),a=e.getResponsiveValueByScreen(o,i),n=e.getResponsiveValueByScreen(r,i);l={...l,[i]:1>=(s?.cols?.length||1)?a:n}}),l},i=e=>{if(!e)return{};let t={desktop:e?.desktop?.image,tablet:e?.tablet?.image,mobile:e?.mobile?.image};return t},s=e=>{let o=i(e);return{desktop:t.createBlurDataURL(o?.desktop?.width??0,o?.desktop?.height??0),tablet:t.createBlurDataURL(o?.tablet?.width??o?.desktop?.width??0,o?.tablet?.height??o?.desktop?.width??0),mobile:t.createBlurDataURL(o?.mobile?.width??o?.tablet?.width??o?.desktop?.width??0,o?.mobile?.height??o?.tablet?.height??o?.desktop?.width??0)}},a=(o,r,l,a)=>{if(!o)return"";let n=i(o),p=e.getResponsiveValueByScreen(o,r),b=l?`url(${s(o)[r]})`:`url(${t.getImageSrc(e.getResponsiveValueByScreen(n,r),r,a)})`,g=p?.color?`, ${p.color}`:"";return p?.color?.includes(e.GRADIENT_BGR_KEY)&&p?.type==="image"?`${b}${g}`:p?.color?.includes(e.GRADIENT_BGR_KEY)&&p?.type!=="image"?`${p.color}`:p?.type==="image"?b:"url()"},n=(e,t)=>{switch(e){case"desktop":if(t?.desktop?.type==="video")return{device:"desktop",data:t.desktop};break;case"tablet":if(t?.tablet?.type==="video")return{device:"tablet",data:t.tablet};if(!t?.tablet&&t?.desktop?.type==="video")return{device:"desktop",data:t.desktop};break;case"mobile":if(t?.mobile?.type==="video")return{device:"mobile",data:t.mobile};if(!t?.mobile&&t?.tablet?.type==="video")return{device:"tablet",data:t.tablet};if(!t?.mobile&&!t?.tablet?.type&&t?.desktop?.type==="video")return{device:"desktop",data:t.desktop}}},p=(e,t)=>{if(!e)return t;let o=e?.shapeVideo;return"custom"===o?e?.shapeValue||t:void 0!==o?o:e?.shapeValue??t},b=({shapeByDevice:e,fallbackRatio:t,device:o,currentResult:r})=>{let l=p(e,t);return l?{...r,[o]:l}:r},g=e=>{let t={};for(let o in e)"top"===e[o]?t[o]="start":"bottom"===e[o]?t[o]="end":t[o]="center";return t},c=(e,t)=>{if(!e)return;if(!t)return e.shapeValue;let o=e.shapeVideo;return"custom"===o?e.shapeValue:o},u=(t,o)=>{let r=!1,l=e.DEVICES.reduce((l,i)=>{let s=e.getResponsiveValueByScreen(t,i),a=e.getResponsiveValueByScreen(o,i),n=c(s,a?.type==="video");return n&&(l[i]=n,r=!0),l},{});return{aspectRatio:r?l:void 0}},d=(t,o,r)=>e.DEVICES.reduce((l,i)=>{let s=e.getValueByDevice(t,i),a=s?.type==="video"?s?.videoType:void 0,n=e.getValueByDevice(o,i),p=r?.[i];return p&&"youtube"===a&&"cover"!==n&&(l[i]=p),l},{}),m=({enableParallax:e=!1,attachment:t="scroll"})=>!!e||"fixed"===t,y=(t,o)=>{let r={};return["desktop","mobile","tablet"].forEach(l=>{let i=e.getResponsiveValueByScreen(t,l),s=i?.type==="image"&&o,a=m({enableParallax:s,attachment:t[l]?.attachment});r={...r,[l]:s?"150%":a?"100vh":"100%"}}),e.makeStyleResponsive("h",r)},h=(t,o)=>{let r={};return["desktop","mobile","tablet"].forEach(l=>{let i=e.getResponsiveValueByScreen(t,l),s=i?.type==="image"&&o,a=m({enableParallax:s,attachment:t[l]?.attachment});r={...r,[l]:a?"100vw":"100%"}}),e.makeStyleResponsive("w",r)},f=t=>{let o={};return["desktop","mobile","tablet"].forEach(e=>{o={...o,[e]:t[e]?.attachment==="fixed"?"0px":""}}),e.makeStyleResponsive("top",o)},I=(e,t=0,o=0)=>{let r=t,l=t;if(t>o?r=o:l=o,e>=999){let t=e-r;return t>0?t:0}let i=e-l;return i>0?i:0},v=({device:e,settingLayoutRes:t,contentPosition1ColRes:o})=>{let r=t[e]?.cols??[],l=r.length<=1,i=o[e];if(l&&i)return["space-between","top","center","bottom"].includes(i)?i:void 0},k=e=>{let t=e.desktop,o=e.tablet?e.tablet:t,r=e.mobile?e.mobile:o;return{desktop:t,tablet:o,mobile:r}},S=(t,o)=>{if(!t||!o)return 16/9;let r=e.getResponsiveValueByScreen(t,o),l=r?.videoCustomRatio;if(l?.width&&l?.height){let e=Number(l.width),t=Number(l.height);if(e>0&&t>0)return e/t}return 16/9},x=e=>{switch(e){case"top":default:return{top:"0%",transform:`translate(-50%, 0%) scale(${r.VIDEO_IFRAME_SCALE})`};case"bottom":return{top:"100%",transform:`translate(-50%, -100%) scale(${r.VIDEO_IFRAME_SCALE})`};case"center":return{top:"50%",transform:`translate(-50%, -50%) scale(${r.VIDEO_IFRAME_SCALE})`}}};exports.collectAspectRatioByDevice=u,exports.collectYoutubeAspectRatio=d,exports.debounce=function(e,t){let o;return function(...r){clearTimeout(o),o=setTimeout(()=>e.apply(this,r),t)}},exports.fallbackImg="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI5MDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZGVmcz4KICAgICAgPGxpbmVhckdyYWRpZW50IGlkPSJnLTE5MjAtOTAwIj4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjIwJSIgLz4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjUwJSIgLz4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjcwJSIgLz4KICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxyZWN0IHdpZHRoPSIxOTIwIiBoZWlnaHQ9IjkwMCIgZmlsbD0icmdiYSg1MSwgNTEsIDUxLCAwKSIgLz4KICAgIDxyZWN0IGlkPSJyIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI5MDAiIGZpbGw9InVybCgjZy0xOTIwLTkwMCkiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTE5MjAiIHRvPSIxOTIwIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgIC8+CiAgPC9zdmc+",exports.formatHoverScale=e=>e?String(e).includes("%")?`${e}`:`${e}%`:"100%",exports.getAspectRatio=(e,t)=>{let{aspectRatio:o}=u(e,t);return o},exports.getAttachmentDevice=e=>{let t={};return["desktop","mobile","tablet"].forEach(o=>{let r=e?.[o]?.attachment;t={...t,[o]:"fixed"===r?"fixed":"absolute"}}),t},exports.getBackgroundImageHeroBanner=(t,o=!1,r=!1)=>{if(!t)return;let l={};return e.DEVICES.forEach(e=>{l={...l,[e]:a(t,e,o,r)}}),e.makeStyleResponsive("bgi",l)},exports.getBannerLink=e=>{let t=e?.link;return t?.type==="go-to-sales-page"?{type:"go-to-sales-page",link:o.HREF_TO_SALES_PAGE,target:"_self"}:t},exports.getBgImage=i,exports.getClassAlignBanner=e=>({"!gp-self-start":"left"===e.desktop,"!gp-self-center":"center"===e.desktop,"!gp-self-end":"right"===e.desktop,"tablet:!gp-self-start":"left"===e.tablet,"tablet:!gp-self-center":"center"===e.tablet,"tablet:!gp-self-end":"right"===e.tablet,"mobile:!gp-self-start":"left"===e.mobile,"mobile:!gp-self-center":"center"===e.mobile,"mobile:!gp-self-end":"right"===e.mobile}),exports.getClassContentPosition=e=>{let t={center:"center",top:"start",bottom:"end","space-between":"between"},o=e.desktop||"center",r=e.tablet||o,l=e.mobile||r;return{[`gp-justify-${t[o]}`]:!0,[`tablet:gp-justify-${t[r]}`]:!0,[`mobile:gp-justify-${t[l]}`]:!0}},exports.getClassForContentByFitContent=(t,o)=>{let r={desktop:!1,tablet:!1,mobile:!1};return["desktop","mobile","tablet"].forEach(l=>{let i=e.getResponsiveValueByScreen(t,l),s=!!n(l,o),a=i?.shape,p=i?.height;r={...r,[l]:"original"===a&&"fit-content"!==p&&!s}}),e.cls(r.desktop?"!gp-absolute":"",r.tablet?"tablet:!gp-absolute":"tablet:!gp-relative",r.mobile?"mobile:!gp-absolute":"mobile:!gp-relative")},exports.getClassForStretchContent=t=>{let o={desktop:"none",tablet:"none",mobile:"none"};return["desktop","mobile","tablet"].forEach(r=>{let l=e.getResponsiveValueByScreen(t,r);o={...o,[r]:l}}),e.cls("space-between"===o.desktop?"[&>*>*]:!gp-justify-between":"","space-between"===o.tablet?"tablet:[&>*>*]:!gp-justify-between ":`tablet:[&>*>*]:!gp-justify-${t?.tablet}`,"space-between"===o.mobile?"mobile:[&>*>*]:!gp-justify-between ":`mobile:[&>*>*]:!gp-justify-${t?.mobile}`)},exports.getClassSpaceBetween=(t,o)=>{let r=k(t),l=k(o),i={desktop:v({device:"desktop",settingLayoutRes:r,contentPosition1ColRes:l}),tablet:v({device:"tablet",settingLayoutRes:r,contentPosition1ColRes:l}),mobile:v({device:"mobile",settingLayoutRes:r,contentPosition1ColRes:l})},s={"space-between":{desktop:"!gp-h-full !gp-content-stretch [&>*]:!gp-justify-between [&>*:nth-child(3)]:gp-absolute [&>*:nth-child(3)]:gp-hidden",tablet:"tablet:!gp-h-full tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-between tablet:[&>*:nth-child(3)]:gp-absolute tablet:[&>*:nth-child(3)]:gp-hidden",mobile:"mobile:!gp-h-full mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-between mobile:[&>*:nth-child(3)]:gp-absolute  mobile:[&>*:nth-child(3)]:gp-hidden"},top:{desktop:"!gp-content-stretch [&>*]:!gp-justify-start",tablet:"tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-start",mobile:"mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-start"},center:{desktop:"!gp-content-stretch [&>*]:!gp-justify-center",tablet:"tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-center",mobile:"mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-center"},bottom:{desktop:"!gp-content-stretch [&>*]:!gp-justify-end",tablet:"tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-end",mobile:"mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-end"}},a={};return e.DEVICES.forEach(e=>{let t=i[e],o=s?.[t]?.[e];a[o]=!0}),a},exports.getClassSpaceBetweenLeftRight=e=>{let t=k(e),o=t?.desktop?.type=="left-distributed"||t?.desktop?.type=="right-distributed",r=t?.tablet?.type=="left-distributed"||t?.tablet?.type=="right-distributed",l=t?.mobile?.type=="left-distributed"||t?.mobile?.type=="right-distributed";return{"gp-h-full tablet:gp-h-auto mobile:gp-h-auto [&>*]:!gp-justify-between":o,"tablet:!gp-h-full tablet:[&>*]:!gp-justify-between mobile:gp-h-auto":r,"mobile:!gp-h-full mobile:[&>*]:!gp-justify-between":l,"mobile:!gp-h-auto":!l}},exports.getClipPath=(e,t)=>{if(!t)return`${r.DEFAULT_CLIP_PATH}`;let[o,l,i,s]=(e??"0 0 0 0").split(" ").map(e=>parseInt(e??"0")||0),{btlr:a,btrr:n,bbrr:p,bblr:b}=t,g=I(parseInt(a??"0")||0,o,s),c=I(parseInt(n??"0")||0,o,l),u=I(parseInt(p??"0")||0,l,i),d=I(parseInt(b??"0")||0,i,s);return[g,c,u,d].every(e=>0===e)?`${r.DEFAULT_CLIP_PATH}`:`inset(0 0 0 round ${g}px ${c}px ${u}px ${d}px)`},exports.getContainerRatio=e=>{if(!e)return 0;let{width:t,height:o}=e.getBoundingClientRect();return t&&o?t/o:0},exports.getContentPosition=l,exports.getDataVideoHeroBannerResponsive=n,exports.getDisplayStyleByFitContent=(t,o)=>{let r={desktop:"none",tablet:"none",mobile:"none"};return["desktop","mobile","tablet"].forEach(l=>{let i=e.getResponsiveValueByScreen(t,l),s=!!n(l,o),a=i?.shape,p=i?.height;r={...r,[l]:"original"!==a||"fit-content"===p||s?"none":"block"}}),e.makeStyleResponsive("d",r)},exports.getEnableBgImageByDevice=(t,o)=>{if(!e.getResponsiveValueByScreen(i(o),t))return!1;if(!o?.[t]){if("mobile"===t)return o?.tablet?.type==="image"||o?.desktop?.type==="image"&&!o?.tablet;if("tablet"===t)return o?.desktop?.type==="image"}return o?.[t]?.type==="image"},exports.getOpacityHover=e=>{let{overlayOpacity:t}=e??{},o="number"!=typeof t?.hover||isNaN(t?.hover)?"string"==typeof t?.hover?`${parseInt(t?.hover)}%`:"":`${t?.hover}%`,r="number"!=typeof t?.normal||isNaN(t?.normal)?"string"==typeof t?.normal?`${parseInt(t?.normal)}%`:"0%":`${t?.normal}%`;return o||r},exports.getPercentageVisible=(e,t)=>{let{top:o,height:r}=e,l=-r;return o<l?0:o>t?100:Math.min(Math.max((o-l)/(t-l)*100,0),100)},exports.getResponsiveSetting=k,exports.getStyleAspectRatioHeroBannerCustom=(t,o)=>{let r=e.getAspectRatioGlobalSize(o);return["desktop","mobile","tablet"].forEach(l=>{let i=e.getResponsiveValueByScreen(o,l),s=!!n(l,t);s&&(r=b({shapeByDevice:i,fallbackRatio:"auto",device:l,currentResult:r}))}),e.makeStyleResponsive("aspect",r)},exports.getStyleHeroBannerBg=(e,t)=>{let o=y(e,t),r=h(e,t),l=f(e);return{...o,...r,...l}},exports.getVideoAspectRatio=S,exports.getVisibilityStyle=e=>e?Object.keys(e).filter(e=>["--d","--d-tablet","--d-mobile"].includes(e)).reduce((t,o)=>({...t,[o]:e?.[o]!=="none"?"flex":e?.[o]}),{}):{},exports.getWidth=e=>{let t={};return["desktop","mobile","tablet"].forEach(o=>{let r=e?.[o];r&&(t={...t,[o]:"default"===r?"var(--g-ct-w, 1200px)":r})}),t},exports.getYoutubeAspectRatio=(e,t,o)=>{let r=d(e,t,o);return Object.keys(r).length?r:void 0},exports.horizontalAlign=(e,t,o)=>g(l(e,t,o)),exports.imagePlaceholder=s,exports.isScaleImage=m,exports.mapContentPositionToHorizontal=g,exports.opacityEnabledData=e=>{let{overlayColor:t,overlayOpacity:o}=e??{},r=!t?.normal||o?.normal=="0%"||!o?.normal;return{disableOpacity:r}},exports.resetVideoIframeStyle=e=>{e&&(e.style.removeProperty("width"),e.style.removeProperty("height"),e.style.removeProperty("top"),e.style.removeProperty("left"),e.style.removeProperty("transform"),e.style.removeProperty("position"))},exports.resetVideoWrapperStyle=e=>{e.style.removeProperty("position"),e.style.removeProperty("top"),e.style.removeProperty("left"),e.style.removeProperty("width"),e.style.removeProperty("height")},exports.scrollToContentBanner=e=>e?.target?.closest("div.gp-hero-banner-row")?.scrollTo(0,0),exports.setVideoIframeAlign=(e,t)=>{if(!e)return;let o=x(t);e.style.top=o.top,e.style.transform=o.transform},exports.setVideoWrapperStyle=e=>{Object.assign(e.style,{position:"absolute",top:"0",left:"0",width:"100%",height:"100%"})},exports.showVideoType=t=>e.DEVICES.some(o=>{let r=e.getValueByDevice(t,o);return r?.type!=="color"&&r?.type!=="image"&&!!r&&(r?.videoType==="html5"&&r?.videoHtml5||r?.videoType==="youtube"&&r?.video)}),exports.updateVideoIframeSize=({iframeEl:t,containerRatio:o,videoObjectFit:l,background:i,currentDevice:s,isYoutubeVideoMigrated:a})=>{let n,p;let b=S(i,s),g=e.getResponsiveValueByScreen(i,s);if(!t||!o)return;let c=g?.videoAlign||"top",u=x(c);if("contain"===l){Object.assign(t.style,{position:"absolute",top:"50%",left:"50%",width:"100%",height:"100%",maxWidth:"none",transform:`translate(-50%, -50%) scale(${r.VIDEO_IFRAME_SCALE})`});return}o>=b?(n=100,p=o/b*100):(p=100,n=b/o*100),Object.assign(t.style,{position:"absolute",top:u.top,left:"50%",width:a?"500%":`${n}%`,height:a?"100%":`${p}%`,maxWidth:"none",transform:u.transform})};

package/dist/cjs/product/components/product-images-v2/ProductImagesV2.liquid.js

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),t=require("./common/common.js"),i=require("./components/feature-gallery/FeatureImageWithGallery.liquid.js"),r=require("./components/gallery-carousel/GalleryCarousel.liquid.js"),s=require("./components/gallery-grid/GalleryGrid.liquid.js"),a=require("../../../helpers.js"),o=require("./common/productGallery.js"),l=require("./composables/getProductImagesClassName.js"),d=require("./composables/getProductImagesStyles.js"),u=require("@gem-sdk/system"),p=require("./common/getBorderActiveCss.js"),n=require("../../helpers/function.js");exports.default=g=>{let c=t.setDefaultWhenUndefineSetting(g),{setting:m,styles:f,builderProps:y,style:$}=c,{rawChildren:S,pageContext:I}=g,{enableLazyLoadImage:h}=I??{},q={...m,...f},j=`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),t=require("./common/common.js"),i=require("./components/feature-gallery/FeatureImageWithGallery.liquid.js"),r=require("./components/gallery-carousel/GalleryCarousel.liquid.js"),s=require("./components/gallery-grid/GalleryGrid.liquid.js"),a=require("../../../helpers.js"),o=require("./common/productGallery.js"),l=require("./composables/getProductImagesClassName.js"),d=require("./composables/getProductImagesStyles.js"),p=require("@gem-sdk/system"),u=require("./common/getBorderActiveCss.js"),n=require("../../helpers/function.js");exports.default=g=>{let c=t.setDefaultWhenUndefineSetting(g),{setting:m,styles:f,builderProps:y,style:$}=c,{rawChildren:S,pageContext:h}=g,{enableLazyLoadImage:I}=h??{},q={...m,...f},j=`
     {
       "id":${JSON.stringify(y?.uid)},
-      "pageContext": ${JSON.stringify(a.filterPageContext(I))},
+      "pageContext": ${JSON.stringify(a.filterPageContext(h))},
       "setting":${JSON.stringify(m)},
       "styles":${JSON.stringify(f)},
       "productUrl":{{product.url | json }},
@@ -9,36 +9,33 @@
       "collectionUrl": {{ collection.url | json }},
       "collection": {{ collection | json }}
     }
-  `,v=u.createAttr({"section-id":"{{section.id}}","data-id":`${y?.uid}`}),{isOnlyFeatureAllDevices:C,isRenderGalleryGrid:F}=t.getConditionRenderGalleryImages(q?.position,m?.type),L=F?{}:u.createAttr({"data-only-image":u.LiquidIf("product.media.size > 1","false","true")}),{wrapperClasses:P,productImagesGalleryClasses:O}=l.getProductImagesClassName(g),D=u.createClass({"gp-grid gp-w-full !gp-m-0 gp-relative":!0}),b=u.createClass({"gp-w-full !gp-m-0 gp-relative":!0}),{wrapContainerStyle:G,wrapContainerStyleOnlyOneImage:z,galleryImageStyle:A}=d.getProductImagesStyles(q),N=o.getShapeByLayout({shape:q.shape,shapeForBottom:q.shapeForBottom,shapeFor1Col:q.shapeFor1Col,shapeFor2Col:q.shapeFor2Col,shapeForFtOnly:q.shapeForFtOnly,shapeForInsideBottom:q.shapeForInsideBottom??o.sizeSettingDefaultForNewLayout,shapeForInside:q.shapeForInside??o.sizeSettingDefaultForNewLayout},q.position),_=t.getStyleInsideLayout(q.position,N,q?.spacing),B=()=>e.template`
+  `,v=p.createAttr({"section-id":"{{section.id}}","data-id":`${y?.uid}`}),{isOnlyFeatureAllDevices:C,isRenderGalleryGrid:F}=t.getConditionRenderGalleryImages(q?.position,m?.type),P=F?{}:p.createAttr({"data-only-image":p.LiquidIf("product.media.size > 1","false","true")}),{wrapperClasses:L,productImagesGalleryClasses:O}=l.getProductImagesClassName(g),D=p.createClass({"gp-grid gp-w-full !gp-m-0 gp-relative":!0}),b=p.createClass({"gp-w-full !gp-m-0 gp-relative":!0}),{wrapContainerStyle:G,wrapContainerStyleOnlyOneImage:A,galleryImageStyle:N}=d.getProductImagesStyles(q),_=o.getShapeByLayout({shape:q.shape,shapeForBottom:q.shapeForBottom,shapeFor1Col:q.shapeFor1Col,shapeFor2Col:q.shapeFor2Col,shapeForFtOnly:q.shapeForFtOnly,shapeForInsideBottom:q.shapeForInsideBottom??o.sizeSettingDefaultForNewLayout,shapeForInside:q.shapeForInside??o.sizeSettingDefaultForNewLayout},q.position),z=t.getStyleInsideLayout(q.position,_,q?.spacing),B=()=>e.template`
       ${e.WrapRenderChildren({uid:y?.uid||"",customProps:S?.[0].customProps},S?.map(t=>{if(t)return e.template`${e.RenderChildren({...t,isInsideProductImage:!0,imageData:{imageShape:f?.ftShape,imageAlign:f?.align,imageLayout:f?.position},dotData:{dotSize:m?.ftDotSize,dotGapToCarousel:m?.ftDotGapToCarousel,dotStyle:m?.ftDotStyle}})}`}))}
+    `,U=()=>e.template`
+      <div
+        class="${O}"
+        style="${n.getStyleOfObject(N)}"
+        ${{...P}}
+      >
+        ${p.LiquidIf("product.media.size > 1",r.default({builderPropUID:`gp-gallery-${y?.uid}`,...q,enableLazyLoadImage:I}))}
+        ${p.If(F,s.default({builderPropUID:y?.uid,wrapperStyle:{...z},children:B(),...q,enableLazyLoadImage:I}))}
+      </div>
+    `,w=()=>e.template`
+      ${i.default({builderPropUID:`gp-carousel-${y?.uid}`,...q,children:B(),enableLazyLoadImage:I})}
+        ${p.If(!C,U())}
     `;return e.template`
-  ${u.If(m?.borderActive?.border!=="none",u.LiquidIf("product.media.size > 1",`<style>${p.getBorderActiveCss({settings:q,uid:y?.uid,type:"Liquid"})}</style>`),"")}
-  ${u.Liquid(`
+  ${p.If(m?.borderActive?.border!=="none",p.LiquidIf("product.media.size > 1",`<style>${u.getBorderActiveCss({settings:q,uid:y?.uid,type:"Liquid"})}</style>`),"")}
+  ${p.Liquid(`
     {% assign featured_image = product.featured_image %}
-    ${u.LiquidIf("variant != null and variant.featured_image != null","{% assign featured_image = variant.featured_image %}")}
+    ${p.LiquidIf("variant != null and variant.featured_image != null","{% assign featured_image = variant.featured_image %}")}
   `)}
     <gp-product-images
       ${{...v}}
       style="${{...$}}"
-      class="${P}"
+      class="${L}"
     >
       <script gp-data type="application/json">${j}</script>
-      <div
-        class="${u.LiquidIf("product.media.size > 1",`${D}`,`${b}`)}"
-        style="${u.LiquidIf("product.media.size > 1",n.getStyleOfObject(G),n.getStyleOfObject(z))}"
-      >
-        ${i.default({builderPropUID:`gp-carousel-${y?.uid}`,...q,children:B(),enableLazyLoadImage:h})}
-        ${u.If(!C,e.template`
-      <div
-        class="${O}"
-        style="${n.getStyleOfObject(A)}"
-        ${{...L}}
-      >
-        ${u.LiquidIf("product.media.size > 1",r.default({builderPropUID:`gp-gallery-${y?.uid}`,...q,enableLazyLoadImage:h}))}
-        ${u.If(F,s.default({builderPropUID:y?.uid,wrapperStyle:{..._},children:B(),...q,enableLazyLoadImage:h}))}
-      </div>
-    `)}
-      </div>
+      ${p.LiquidIf("product.media.size > 1",e.template`<div class="${D}" style="${n.getStyleOfObject(G)}">${w()}</div>`,e.template`<div class="${b}" style="${n.getStyleOfObject(A)}">${w()}</div>`)}
     </gp-product-images>
-    ${u.If(e.isLocalEnv,`<script ${a.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-product-images-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${a.getSettingPreloadData('class="gps-link" delay',"src")}="${e.baseAssetURL}/assets-v2/gp-product-images-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+    ${p.If(e.isLocalEnv,`<script ${a.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-product-images-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${a.getSettingPreloadData('class="gps-link" delay',"src")}="${e.baseAssetURL}/assets-v2/gp-product-images-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
   `};

package/dist/cjs/product/components/product-images-v3/ProductImagesV3.liquid.js

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),t=require("./common/common.js"),i=require("./components/feature-gallery/FeatureImageWithGallery.liquid.js"),r=require("./components/gallery-carousel/GalleryCarousel.liquid.js"),s=require("./components/gallery-grid/GalleryGrid.liquid.js"),a=require("../../../helpers.js"),o=require("./common/productGallery.js"),l=require("./composables/getProductImagesClassName.js"),d=require("./composables/getProductImagesStyles.js"),u=require("@gem-sdk/system"),p=require("./common/getBorderActiveCss.js"),n=require("../../helpers/function.js");exports.default=g=>{let c=t.setDefaultWhenUndefineSetting(g),{setting:m,styles:f,builderProps:y,style:$}=c,{rawChildren:S,pageContext:I}=g,{enableLazyLoadImage:h}=I??{},q={...m,...f},v=`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),t=require("./common/common.js"),r=require("./components/feature-gallery/FeatureImageWithGallery.liquid.js"),i=require("./components/gallery-carousel/GalleryCarousel.liquid.js"),s=require("./components/gallery-grid/GalleryGrid.liquid.js"),a=require("../../../helpers.js"),o=require("./common/productGallery.js"),l=require("./composables/getProductImagesClassName.js"),d=require("./composables/getProductImagesStyles.js"),u=require("@gem-sdk/system"),p=require("./common/getBorderActiveCss.js"),n=require("../../helpers/function.js");exports.default=g=>{let c=t.setDefaultWhenUndefineSetting(g),{setting:m,styles:f,builderProps:y,style:$}=c,{rawChildren:S,pageContext:h}=g,{enableLazyLoadImage:I}=h??{},v={...m,...f},q=`
     {
       "id":${JSON.stringify(y?.uid)},
-      "pageContext": ${JSON.stringify(a.filterPageContext(I))},
+      "pageContext": ${JSON.stringify(a.filterPageContext(h))},
       "setting":${JSON.stringify(m)},
       "styles":${JSON.stringify(f)},
       "productUrl":{{product.url | json }},
@@ -9,10 +9,10 @@
       "collectionUrl": {{ collection.url | json }},
       "collection": {{ collection | json }}
     }
-  `,j=u.createAttr({"section-id":"{{section.id}}","data-id":`${y?.uid}`}),{isOnlyFeatureAllDevices:C,isRenderGalleryGrid:F}=t.getConditionRenderGalleryImages(q?.position,m?.type),L=F?{}:u.createAttr({"data-only-image":u.LiquidIf("product.media.size > 1","false","true")}),{wrapperClasses:P,productImagesGalleryClasses:O}=l.getProductImagesClassName(g),D=u.createClass({"gp-grid gp-w-full !gp-m-0 gp-relative":!0}),b=u.createClass({"gp-w-full !gp-m-0 gp-relative":!0}),{wrapContainerStyle:G,wrapContainerStyleOnlyOneImage:z,galleryImageStyle:A}=d.getProductImagesStyles(q),N=o.getShapeByLayout({shape:q.shape,shapeForBottom:q.shapeForBottom,shapeFor1Col:q.shapeFor1Col,shapeFor2Col:q.shapeFor2Col,shapeForFtOnly:q.shapeForFtOnly,shapeForInsideBottom:q.shapeForInsideBottom??o.sizeSettingDefaultForNewLayout,shapeForInside:q.shapeForInside??o.sizeSettingDefaultForNewLayout},q.position),_=t.getStyleInsideLayout(q.position,N,q?.spacing),B=()=>e.template`
+  `,j=u.createAttr({"section-id":"{{section.id}}","data-id":`${y?.uid}`}),{isOnlyFeatureAllDevices:C,isRenderGalleryGrid:F}=t.getConditionRenderGalleryImages(v?.position,m?.type),P=F?{}:u.createAttr({"data-only-image":u.LiquidIf("product.media.size > 1","false","true")}),{wrapperClasses:L,productImagesGalleryClasses:O}=l.getProductImagesClassName(g),D=u.createClass({"gp-grid gp-w-full !gp-m-0 gp-relative":!0}),b=u.createClass({"gp-w-full !gp-m-0 gp-relative":!0}),{wrapContainerStyle:G,wrapContainerStyleOnlyOneImage:A,galleryImageStyle:N}=d.getProductImagesStyles(v),_=o.getShapeByLayout({shape:v.shape,shapeForBottom:v.shapeForBottom,shapeFor1Col:v.shapeFor1Col,shapeFor2Col:v.shapeFor2Col,shapeForFtOnly:v.shapeForFtOnly,shapeForInsideBottom:v.shapeForInsideBottom??o.sizeSettingDefaultForNewLayout,shapeForInside:v.shapeForInside??o.sizeSettingDefaultForNewLayout},v.position),z=t.getStyleInsideLayout(v.position,_,v?.spacing),B=()=>e.template`
       ${e.WrapRenderChildren({uid:y?.uid||"",customProps:S?.[0].customProps},S?.map(t=>{if(t)return e.template`${e.RenderChildren({...t,isInsideProductImage:!0,imageData:{imageShape:f?.ftShape,imageAlign:f?.align,imageLayout:f?.position},dotData:{dotSize:m?.ftDotSize,dotGapToCarousel:m?.ftDotGapToCarousel,dotStyle:m?.ftDotStyle}})}`}))}
     `;return e.template`
-  ${u.If(m?.borderActive?.border!=="none",u.LiquidIf("product.media.size > 1",`<style>${p.getBorderActiveCss({settings:q,uid:y?.uid,type:"Liquid"})}</style>`),"")}
+  ${u.If(m?.borderActive?.border!=="none",u.LiquidIf("product.media.size > 1",`<style>${p.getBorderActiveCss({settings:v,uid:y?.uid,type:"Liquid"})}</style>`),"")}
   ${u.Liquid(`
     {% assign featured_image = product.featured_image %}
     ${u.LiquidIf("variant != null and variant.featured_image != null","{% assign featured_image = variant.featured_image %}")}
@@ -20,22 +20,19 @@
     <gp-product-images-v3
       ${{...j}}
       style="${{...$}}"
-      class="${P}"
+      class="${L}"
     >
-      <script gp-data type="application/json">${v}</script>
-      <div
-        class="${u.LiquidIf("product.media.size > 1",`${D}`,`${b}`)}"
-        style="${u.LiquidIf("product.media.size > 1",n.getStyleOfObject(G),n.getStyleOfObject(z))}"
-      >
-        ${i.default({builderPropUID:`gp-carousel-${y?.uid}`,...q,children:B(),enableLazyLoadImage:h})}
+      <script gp-data type="application/json">${q}</script>
+      ${u.LiquidIf("product.media.size > 1",e.template`<div class="${D}" style="${n.getStyleOfObject(G)}">`,e.template`<div class="${b}" style="${n.getStyleOfObject(A)}">`)}
+        ${r.default({builderPropUID:`gp-carousel-${y?.uid}`,...v,children:B(),enableLazyLoadImage:I})}
         ${u.If(!C,e.template`
       <div
         class="${O}"
-        style="${n.getStyleOfObject(A)}"
-        ${{...L}}
+        style="${n.getStyleOfObject(N)}"
+        ${{...P}}
       >
-        ${u.LiquidIf("product.media.size > 1",r.default({builderPropUID:`gp-gallery-${y?.uid}`,...q,enableLazyLoadImage:h}))}
-        ${u.If(F,s.default({builderPropUID:y?.uid,wrapperStyle:{..._},children:B(),...q,enableLazyLoadImage:h}))}
+        ${u.LiquidIf("product.media.size > 1",i.default({builderPropUID:`gp-gallery-${y?.uid}`,...v,enableLazyLoadImage:I}))}
+        ${u.If(F,s.default({builderPropUID:y?.uid,wrapperStyle:{...z},children:B(),...v,enableLazyLoadImage:I}))}
       </div>
     `)}
       </div>

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

@@ -1 +1 @@
-import{DEVICES as e,makeStyleResponsive as t,getValueByDevice as o,getAspectRatioGlobalSize as l,getResponsiveValueByScreen as i,cls as r,GRADIENT_BGR_KEY as a}from"@gem-sdk/core";import{getImageSrc as n,createBlurDataURL as s}from"../../image/common/helpers.js";import{HREF_TO_SALES_PAGE as p}from"../../constant.js";import{DEFAULT_CLIP_PATH as b,VIDEO_IFRAME_SCALE as g}from"./const.js";let d=(t,o,l)=>{let r={};return e.map(e=>{let a=i(t,e),n=i(o,e),s=i(l,e);r={...r,[e]:1>=(a?.cols?.length||1)?n:s}}),r},c=(e,t)=>{if(!i(m(t),e))return!1;if(!t?.[e]){if("mobile"===e)return t?.tablet?.type==="image"||t?.desktop?.type==="image"&&!t?.tablet;if("tablet"===e)return t?.desktop?.type==="image"}return t?.[e]?.type==="image"},m=e=>{if(!e)return{};let t={desktop:e?.desktop?.image,tablet:e?.tablet?.image,mobile:e?.mobile?.image};return t},u=e=>{let t=m(e);return{desktop:s(t?.desktop?.width??0,t?.desktop?.height??0),tablet:s(t?.tablet?.width??t?.desktop?.width??0,t?.tablet?.height??t?.desktop?.width??0),mobile:s(t?.mobile?.width??t?.tablet?.width??t?.desktop?.width??0,t?.mobile?.height??t?.tablet?.height??t?.desktop?.width??0)}},h=(e,t,o,l)=>{if(!e)return"";let r=m(e),s=i(e,t),p=o?`url(${u(e)[t]})`:`url(${n(i(r,t),t,l)})`,b=s?.color?`, ${s.color}`:"";return s?.color?.includes(a)&&s?.type==="image"?`${p}${b}`:s?.color?.includes(a)&&s?.type!=="image"?`${s.color}`:s?.type==="image"?p:"url()"},y=(o,l=!1,i=!1)=>{if(!o)return;let r={};return e.forEach(e=>{r={...r,[e]:h(o,e,l,i)}}),t("bgi",r)},f=e=>{let t={};return["desktop","mobile","tablet"].forEach(o=>{let l=e?.[o]?.attachment;t={...t,[o]:"fixed"===l?"fixed":"absolute"}}),t},I=(e,t,o)=>S(d(e,t,o)),v=e=>e?.target?.closest("div.gp-hero-banner-row")?.scrollTo(0,0),k=(e,t)=>{switch(e){case"desktop":if(t?.desktop?.type==="video")return{device:"desktop",data:t.desktop};break;case"tablet":if(t?.tablet?.type==="video")return{device:"tablet",data:t.tablet};if(!t?.tablet&&t?.desktop?.type==="video")return{device:"desktop",data:t.desktop};break;case"mobile":if(t?.mobile?.type==="video")return{device:"mobile",data:t.mobile};if(!t?.mobile&&t?.tablet?.type==="video")return{device:"tablet",data:t.tablet};if(!t?.mobile&&!t?.tablet?.type&&t?.desktop?.type==="video")return{device:"desktop",data:t.desktop}}},w=e=>e?Object.keys(e).filter(e=>["--d","--d-tablet","--d-mobile"].includes(e)).reduce((t,o)=>({...t,[o]:e?.[o]!=="none"?"flex":e?.[o]}),{}):{},C=(e,t)=>{if(!e)return t;let o=e?.shapeVideo;return"custom"===o?e?.shapeValue||t:void 0!==o?o:e?.shapeValue??t},A=({shapeByDevice:e,fallbackRatio:t,device:o,currentResult:l})=>{let i=C(e,t);return i?{...l,[o]:i}:l},j=(e,o)=>{let r=l(o);return["desktop","mobile","tablet"].forEach(t=>{let l=i(o,t),a=!!k(t,e);a&&(r=A({shapeByDevice:l,fallbackRatio:"auto",device:t,currentResult:r}))}),t("aspect",r)},S=e=>{let t={};for(let o in e)"top"===e[o]?t[o]="start":"bottom"===e[o]?t[o]="end":t[o]="center";return t},Z=(e,o)=>{let l={desktop:"none",tablet:"none",mobile:"none"};return["desktop","mobile","tablet"].forEach(t=>{let r=i(e,t),a=!!k(t,o),n=r?.shape,s=r?.height;l={...l,[t]:"original"!==n||"fit-content"===s||a?"none":"block"}}),t("d",l)},B=(e,t)=>{if(!e)return;if(!t)return e.shapeValue;let o=e.shapeVideo;return"custom"===o?e.shapeValue:o},P=(t,o)=>{let l=!1,r=e.reduce((e,r)=>{let a=i(t,r),n=i(o,r),s=B(a,n?.type==="video");return s&&(e[r]=s,l=!0),e},{});return{aspectRatio:l?r:void 0}},x=(t,l,i)=>e.reduce((e,r)=>{let a=o(t,r),n=a?.type==="video"?a?.videoType:void 0,s=o(l,r),p=i?.[r];return p&&"youtube"===n&&"cover"!==s&&(e[r]=p),e},{}),$=(e,t)=>{let{aspectRatio:o}=P(e,t);return o},D=(e,t,o)=>{let l=x(e,t,o);return Object.keys(l).length?l:void 0},R=e=>{let t={};return["desktop","mobile","tablet"].forEach(o=>{let l=e?.[o];l&&(t={...t,[o]:"default"===l?"var(--g-ct-w, 1200px)":l})}),t},T=(e,t)=>{let{top:o,height:l}=e,i=-l;return o<i?0:o>t?100:Math.min(Math.max((o-i)/(t-i)*100,0),100)},V=({enableParallax:e=!1,attachment:t="scroll"})=>!!e||"fixed"===t,z=(e,o)=>{let l={};return["desktop","mobile","tablet"].forEach(t=>{let r=i(e,t),a=r?.type==="image"&&o,n=V({enableParallax:a,attachment:e[t]?.attachment});l={...l,[t]:a?"150%":n?"100vh":"100%"}}),t("h",l)},M=(e,o)=>{let l={};return["desktop","mobile","tablet"].forEach(t=>{let r=i(e,t),a=r?.type==="image"&&o,n=V({enableParallax:a,attachment:e[t]?.attachment});l={...l,[t]:n?"100vw":"100%"}}),t("w",l)},W=e=>{let o={};return["desktop","mobile","tablet"].forEach(t=>{o={...o,[t]:e[t]?.attachment==="fixed"?"0px":""}}),t("top",o)},E=(e,t)=>{let o=z(e,t),l=M(e,t),i=W(e);return{...o,...l,...i}},G=(e,t=0,o=0)=>{let l=t,i=t;if(t>o?l=o:i=o,e>=999){let t=e-l;return t>0?t:0}let r=e-i;return r>0?r:0},L=(e,t)=>{if(!t)return`${b}`;let[o,l,i,r]=(e??"0 0 0 0").split(" ").map(e=>parseInt(e??"0")||0),{btlr:a,btrr:n,bbrr:s,bblr:p}=t,g=G(parseInt(a??"0")||0,o,r),d=G(parseInt(n??"0")||0,o,l),c=G(parseInt(s??"0")||0,l,i),m=G(parseInt(p??"0")||0,i,r);return[g,d,c,m].every(e=>0===e)?`${b}`:`inset(0 0 0 round ${g}px ${d}px ${c}px ${m}px)`},H=e=>({"!gp-self-start":"left"===e.desktop,"!gp-self-center":"center"===e.desktop,"!gp-self-end":"right"===e.desktop,"tablet:!gp-self-start":"left"===e.tablet,"tablet:!gp-self-center":"center"===e.tablet,"tablet:!gp-self-end":"right"===e.tablet,"mobile:!gp-self-start":"left"===e.mobile,"mobile:!gp-self-center":"center"===e.mobile,"mobile:!gp-self-end":"right"===e.mobile}),N=({device:e,settingLayoutRes:t,contentPosition1ColRes:o})=>{let l=t[e]?.cols??[],i=l.length<=1,r=o[e];if(i&&r)return["space-between","top","center","bottom"].includes(r)?r:void 0},J=(t,o)=>{let l=Y(t),i=Y(o),r={desktop:N({device:"desktop",settingLayoutRes:l,contentPosition1ColRes:i}),tablet:N({device:"tablet",settingLayoutRes:l,contentPosition1ColRes:i}),mobile:N({device:"mobile",settingLayoutRes:l,contentPosition1ColRes:i})},a={"space-between":{desktop:"!gp-h-full !gp-content-stretch [&>*]:!gp-justify-between [&>*:nth-child(2)]:gp-absolute [&>*:nth-child(2)]:gp-hidden",tablet:"tablet:!gp-h-full tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-between tablet:[&>*:nth-child(2)]:gp-absolute tablet:[&>*:nth-child(2)]:gp-hidden",mobile:"mobile:!gp-h-full mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-between mobile:[&>*:nth-child(2)]:gp-absolute  mobile:[&>*:nth-child(2)]:gp-hidden"},top:{desktop:"!gp-content-stretch [&>*]:!gp-justify-start",tablet:"tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-start",mobile:"mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-start"},center:{desktop:"!gp-content-stretch [&>*]:!gp-justify-center",tablet:"tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-center",mobile:"mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-center"},bottom:{desktop:"!gp-content-stretch [&>*]:!gp-justify-end",tablet:"tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-end",mobile:"mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-end"}},n={};return e.forEach(e=>{let t=r[e],o=a?.[t]?.[e];n[o]=!0}),n},K=e=>{let t=Y(e),o=t?.desktop?.type=="left-distributed"||t?.desktop?.type=="right-distributed",l=t?.tablet?.type=="left-distributed"||t?.tablet?.type=="right-distributed",i=t?.mobile?.type=="left-distributed"||t?.mobile?.type=="right-distributed";return{"gp-h-full tablet:gp-h-auto mobile:gp-h-auto [&>*]:!gp-justify-between":o,"tablet:!gp-h-full tablet:[&>*]:!gp-justify-between mobile:gp-h-auto":l,"mobile:!gp-h-full mobile:[&>*]:!gp-justify-between":i,"mobile:!gp-h-auto":!i}},O=e=>{let t={desktop:"none",tablet:"none",mobile:"none"};return["desktop","mobile","tablet"].forEach(o=>{let l=i(e,o);t={...t,[o]:l}}),r("space-between"===t.desktop?"[&>*>*]:!gp-justify-between":"","space-between"===t.tablet?"tablet:[&>*>*]:!gp-justify-between ":`tablet:[&>*>*]:!gp-justify-${e?.tablet}`,"space-between"===t.mobile?"mobile:[&>*>*]:!gp-justify-between ":`mobile:[&>*>*]:!gp-justify-${e?.mobile}`)},X=(e,t)=>{let o={desktop:!1,tablet:!1,mobile:!1};return["desktop","mobile","tablet"].forEach(l=>{let r=i(e,l),a=!!k(l,t),n=r?.shape,s=r?.height;o={...o,[l]:"original"===n&&"fit-content"!==s&&!a}}),r(o.desktop?"!gp-absolute":"",o.tablet?"tablet:!gp-absolute":"tablet:!gp-relative",o.mobile?"mobile:!gp-absolute":"mobile:!gp-relative")},F=e=>{let t={center:"center",top:"start",bottom:"end","space-between":"between"},o=e.desktop||"center",l=e.tablet||o,i=e.mobile||l;return{[`gp-justify-${t[o]}`]:!0,[`tablet:gp-justify-${t[l]}`]:!0,[`mobile:gp-justify-${t[i]}`]:!0}},Y=e=>{let t=e.desktop,o=e.tablet?e.tablet:t,l=e.mobile?e.mobile:o;return{desktop:t,tablet:o,mobile:l}},U=t=>e.some(e=>{let l=o(t,e);return l?.type!=="color"&&l?.type!=="image"&&!!l&&(l?.videoType==="html5"&&l?.videoHtml5||l?.videoType==="youtube"&&l?.video)});function Q(e,t){let o;return function(...l){clearTimeout(o),o=setTimeout(()=>e.apply(this,l),t)}}let _="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI5MDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZGVmcz4KICAgICAgPGxpbmVhckdyYWRpZW50IGlkPSJnLTE5MjAtOTAwIj4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjIwJSIgLz4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjUwJSIgLz4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjcwJSIgLz4KICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxyZWN0IHdpZHRoPSIxOTIwIiBoZWlnaHQ9IjkwMCIgZmlsbD0icmdiYSg1MSwgNTEsIDUxLCAwKSIgLz4KICAgIDxyZWN0IGlkPSJyIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI5MDAiIGZpbGw9InVybCgjZy0xOTIwLTkwMCkiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTE5MjAiIHRvPSIxOTIwIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgIC8+CiAgPC9zdmc+",q=e=>{let t=e?.link;return t?.type==="go-to-sales-page"?{type:"go-to-sales-page",link:p,target:"_self"}:t},ee=e=>e?String(e).includes("%")?`${e}`:`${e}%`:"100%",et=e=>{let{overlayColor:t,overlayOpacity:o}=e??{},l=!t?.normal||o?.normal=="0%"||!o?.normal;return{disableOpacity:l}},eo=e=>{let{overlayOpacity:t}=e??{},o="number"!=typeof t?.hover||isNaN(t?.hover)?"string"==typeof t?.hover?`${parseInt(t?.hover)}%`:"":`${t?.hover}%`,l="number"!=typeof t?.normal||isNaN(t?.normal)?"string"==typeof t?.normal?`${parseInt(t?.normal)}%`:"0%":`${t?.normal}%`;return o||l},el=(e,t)=>{if(!e||!t)return 16/9;let o=i(e,t),l=o?.videoCustomRatio;if(l?.width&&l?.height){let e=Number(l.width),t=Number(l.height);if(e>0&&t>0)return e/t}return 16/9},ei=e=>{e&&(e.style.removeProperty("width"),e.style.removeProperty("height"),e.style.removeProperty("top"),e.style.removeProperty("left"),e.style.removeProperty("transform"),e.style.removeProperty("position"))},er=e=>{Object.assign(e.style,{position:"absolute",top:"0",left:"0",width:"100%",height:"100%"})},ea=e=>{e.style.removeProperty("position"),e.style.removeProperty("top"),e.style.removeProperty("left"),e.style.removeProperty("width"),e.style.removeProperty("height")},en=e=>{if(!e)return 0;let{width:t,height:o}=e.getBoundingClientRect();return t&&o?t/o:0},es=e=>{switch(e){case"top":default:return{top:"0%",transform:`translate(-50%, 0%) scale(${g})`};case"bottom":return{top:"100%",transform:`translate(-50%, -100%) scale(${g})`};case"center":return{top:"50%",transform:`translate(-50%, -50%) scale(${g})`}}},ep=(e,t)=>{if(!e)return;let o=es(t);e.style.top=o.top,e.style.transform=o.transform},eb=({iframeEl:e,containerRatio:t,videoObjectFit:o,background:l,currentDevice:r,isYoutubeVideoMigrated:a})=>{let n,s;let p=el(l,r),b=i(l,r);if(!e||!t)return;let d=b?.videoAlign||"top",c=es(d);if("contain"===o){Object.assign(e.style,{position:"absolute",top:"50%",left:"50%",width:"100%",height:"100%",maxWidth:"none",transform:`translate(-50%, -50%) scale(${g})`});return}t>=p?(n=100,s=t/p*100):(s=100,n=p/t*100),Object.assign(e.style,{position:"absolute",top:c.top,left:"50%",width:a?"500%":`${n}%`,height:a?"100%":`${s}%`,maxWidth:"none",transform:c.transform})};export{P as collectAspectRatioByDevice,x as collectYoutubeAspectRatio,Q as debounce,_ as fallbackImg,ee as formatHoverScale,$ as getAspectRatio,f as getAttachmentDevice,y as getBackgroundImageHeroBanner,q as getBannerLink,m as getBgImage,H as getClassAlignBanner,F as getClassContentPosition,X as getClassForContentByFitContent,O as getClassForStretchContent,J as getClassSpaceBetween,K as getClassSpaceBetweenLeftRight,L as getClipPath,en as getContainerRatio,d as getContentPosition,k as getDataVideoHeroBannerResponsive,Z as getDisplayStyleByFitContent,c as getEnableBgImageByDevice,eo as getOpacityHover,T as getPercentageVisible,Y as getResponsiveSetting,j as getStyleAspectRatioHeroBannerCustom,E as getStyleHeroBannerBg,el as getVideoAspectRatio,w as getVisibilityStyle,R as getWidth,D as getYoutubeAspectRatio,I as horizontalAlign,u as imagePlaceholder,V as isScaleImage,S as mapContentPositionToHorizontal,et as opacityEnabledData,ei as resetVideoIframeStyle,ea as resetVideoWrapperStyle,v as scrollToContentBanner,ep as setVideoIframeAlign,er as setVideoWrapperStyle,U as showVideoType,eb as updateVideoIframeSize};
+import{DEVICES as e,makeStyleResponsive as t,getValueByDevice as o,getAspectRatioGlobalSize as l,getResponsiveValueByScreen as i,cls as r,GRADIENT_BGR_KEY as a}from"@gem-sdk/core";import{getImageSrc as n,createBlurDataURL as s}from"../../image/common/helpers.js";import{HREF_TO_SALES_PAGE as p}from"../../constant.js";import{DEFAULT_CLIP_PATH as b,VIDEO_IFRAME_SCALE as g}from"./const.js";let d=(t,o,l)=>{let r={};return e.map(e=>{let a=i(t,e),n=i(o,e),s=i(l,e);r={...r,[e]:1>=(a?.cols?.length||1)?n:s}}),r},c=(e,t)=>{if(!i(m(t),e))return!1;if(!t?.[e]){if("mobile"===e)return t?.tablet?.type==="image"||t?.desktop?.type==="image"&&!t?.tablet;if("tablet"===e)return t?.desktop?.type==="image"}return t?.[e]?.type==="image"},m=e=>{if(!e)return{};let t={desktop:e?.desktop?.image,tablet:e?.tablet?.image,mobile:e?.mobile?.image};return t},u=e=>{let t=m(e);return{desktop:s(t?.desktop?.width??0,t?.desktop?.height??0),tablet:s(t?.tablet?.width??t?.desktop?.width??0,t?.tablet?.height??t?.desktop?.width??0),mobile:s(t?.mobile?.width??t?.tablet?.width??t?.desktop?.width??0,t?.mobile?.height??t?.tablet?.height??t?.desktop?.width??0)}},h=(e,t,o,l)=>{if(!e)return"";let r=m(e),s=i(e,t),p=o?`url(${u(e)[t]})`:`url(${n(i(r,t),t,l)})`,b=s?.color?`, ${s.color}`:"";return s?.color?.includes(a)&&s?.type==="image"?`${p}${b}`:s?.color?.includes(a)&&s?.type!=="image"?`${s.color}`:s?.type==="image"?p:"url()"},y=(o,l=!1,i=!1)=>{if(!o)return;let r={};return e.forEach(e=>{r={...r,[e]:h(o,e,l,i)}}),t("bgi",r)},f=e=>{let t={};return["desktop","mobile","tablet"].forEach(o=>{let l=e?.[o]?.attachment;t={...t,[o]:"fixed"===l?"fixed":"absolute"}}),t},I=(e,t,o)=>S(d(e,t,o)),v=e=>e?.target?.closest("div.gp-hero-banner-row")?.scrollTo(0,0),k=(e,t)=>{switch(e){case"desktop":if(t?.desktop?.type==="video")return{device:"desktop",data:t.desktop};break;case"tablet":if(t?.tablet?.type==="video")return{device:"tablet",data:t.tablet};if(!t?.tablet&&t?.desktop?.type==="video")return{device:"desktop",data:t.desktop};break;case"mobile":if(t?.mobile?.type==="video")return{device:"mobile",data:t.mobile};if(!t?.mobile&&t?.tablet?.type==="video")return{device:"tablet",data:t.tablet};if(!t?.mobile&&!t?.tablet?.type&&t?.desktop?.type==="video")return{device:"desktop",data:t.desktop}}},w=e=>e?Object.keys(e).filter(e=>["--d","--d-tablet","--d-mobile"].includes(e)).reduce((t,o)=>({...t,[o]:e?.[o]!=="none"?"flex":e?.[o]}),{}):{},C=(e,t)=>{if(!e)return t;let o=e?.shapeVideo;return"custom"===o?e?.shapeValue||t:void 0!==o?o:e?.shapeValue??t},A=({shapeByDevice:e,fallbackRatio:t,device:o,currentResult:l})=>{let i=C(e,t);return i?{...l,[o]:i}:l},j=(e,o)=>{let r=l(o);return["desktop","mobile","tablet"].forEach(t=>{let l=i(o,t),a=!!k(t,e);a&&(r=A({shapeByDevice:l,fallbackRatio:"auto",device:t,currentResult:r}))}),t("aspect",r)},S=e=>{let t={};for(let o in e)"top"===e[o]?t[o]="start":"bottom"===e[o]?t[o]="end":t[o]="center";return t},Z=(e,o)=>{let l={desktop:"none",tablet:"none",mobile:"none"};return["desktop","mobile","tablet"].forEach(t=>{let r=i(e,t),a=!!k(t,o),n=r?.shape,s=r?.height;l={...l,[t]:"original"!==n||"fit-content"===s||a?"none":"block"}}),t("d",l)},B=(e,t)=>{if(!e)return;if(!t)return e.shapeValue;let o=e.shapeVideo;return"custom"===o?e.shapeValue:o},P=(t,o)=>{let l=!1,r=e.reduce((e,r)=>{let a=i(t,r),n=i(o,r),s=B(a,n?.type==="video");return s&&(e[r]=s,l=!0),e},{});return{aspectRatio:l?r:void 0}},x=(t,l,i)=>e.reduce((e,r)=>{let a=o(t,r),n=a?.type==="video"?a?.videoType:void 0,s=o(l,r),p=i?.[r];return p&&"youtube"===n&&"cover"!==s&&(e[r]=p),e},{}),$=(e,t)=>{let{aspectRatio:o}=P(e,t);return o},D=(e,t,o)=>{let l=x(e,t,o);return Object.keys(l).length?l:void 0},R=e=>{let t={};return["desktop","mobile","tablet"].forEach(o=>{let l=e?.[o];l&&(t={...t,[o]:"default"===l?"var(--g-ct-w, 1200px)":l})}),t},T=(e,t)=>{let{top:o,height:l}=e,i=-l;return o<i?0:o>t?100:Math.min(Math.max((o-i)/(t-i)*100,0),100)},V=({enableParallax:e=!1,attachment:t="scroll"})=>!!e||"fixed"===t,z=(e,o)=>{let l={};return["desktop","mobile","tablet"].forEach(t=>{let r=i(e,t),a=r?.type==="image"&&o,n=V({enableParallax:a,attachment:e[t]?.attachment});l={...l,[t]:a?"150%":n?"100vh":"100%"}}),t("h",l)},M=(e,o)=>{let l={};return["desktop","mobile","tablet"].forEach(t=>{let r=i(e,t),a=r?.type==="image"&&o,n=V({enableParallax:a,attachment:e[t]?.attachment});l={...l,[t]:n?"100vw":"100%"}}),t("w",l)},W=e=>{let o={};return["desktop","mobile","tablet"].forEach(t=>{o={...o,[t]:e[t]?.attachment==="fixed"?"0px":""}}),t("top",o)},E=(e,t)=>{let o=z(e,t),l=M(e,t),i=W(e);return{...o,...l,...i}},G=(e,t=0,o=0)=>{let l=t,i=t;if(t>o?l=o:i=o,e>=999){let t=e-l;return t>0?t:0}let r=e-i;return r>0?r:0},L=(e,t)=>{if(!t)return`${b}`;let[o,l,i,r]=(e??"0 0 0 0").split(" ").map(e=>parseInt(e??"0")||0),{btlr:a,btrr:n,bbrr:s,bblr:p}=t,g=G(parseInt(a??"0")||0,o,r),d=G(parseInt(n??"0")||0,o,l),c=G(parseInt(s??"0")||0,l,i),m=G(parseInt(p??"0")||0,i,r);return[g,d,c,m].every(e=>0===e)?`${b}`:`inset(0 0 0 round ${g}px ${d}px ${c}px ${m}px)`},H=e=>({"!gp-self-start":"left"===e.desktop,"!gp-self-center":"center"===e.desktop,"!gp-self-end":"right"===e.desktop,"tablet:!gp-self-start":"left"===e.tablet,"tablet:!gp-self-center":"center"===e.tablet,"tablet:!gp-self-end":"right"===e.tablet,"mobile:!gp-self-start":"left"===e.mobile,"mobile:!gp-self-center":"center"===e.mobile,"mobile:!gp-self-end":"right"===e.mobile}),N=({device:e,settingLayoutRes:t,contentPosition1ColRes:o})=>{let l=t[e]?.cols??[],i=l.length<=1,r=o[e];if(i&&r)return["space-between","top","center","bottom"].includes(r)?r:void 0},J=(t,o)=>{let l=Y(t),i=Y(o),r={desktop:N({device:"desktop",settingLayoutRes:l,contentPosition1ColRes:i}),tablet:N({device:"tablet",settingLayoutRes:l,contentPosition1ColRes:i}),mobile:N({device:"mobile",settingLayoutRes:l,contentPosition1ColRes:i})},a={"space-between":{desktop:"!gp-h-full !gp-content-stretch [&>*]:!gp-justify-between [&>*:nth-child(3)]:gp-absolute [&>*:nth-child(3)]:gp-hidden",tablet:"tablet:!gp-h-full tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-between tablet:[&>*:nth-child(3)]:gp-absolute tablet:[&>*:nth-child(3)]:gp-hidden",mobile:"mobile:!gp-h-full mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-between mobile:[&>*:nth-child(3)]:gp-absolute  mobile:[&>*:nth-child(3)]:gp-hidden"},top:{desktop:"!gp-content-stretch [&>*]:!gp-justify-start",tablet:"tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-start",mobile:"mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-start"},center:{desktop:"!gp-content-stretch [&>*]:!gp-justify-center",tablet:"tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-center",mobile:"mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-center"},bottom:{desktop:"!gp-content-stretch [&>*]:!gp-justify-end",tablet:"tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-end",mobile:"mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-end"}},n={};return e.forEach(e=>{let t=r[e],o=a?.[t]?.[e];n[o]=!0}),n},K=e=>{let t=Y(e),o=t?.desktop?.type=="left-distributed"||t?.desktop?.type=="right-distributed",l=t?.tablet?.type=="left-distributed"||t?.tablet?.type=="right-distributed",i=t?.mobile?.type=="left-distributed"||t?.mobile?.type=="right-distributed";return{"gp-h-full tablet:gp-h-auto mobile:gp-h-auto [&>*]:!gp-justify-between":o,"tablet:!gp-h-full tablet:[&>*]:!gp-justify-between mobile:gp-h-auto":l,"mobile:!gp-h-full mobile:[&>*]:!gp-justify-between":i,"mobile:!gp-h-auto":!i}},O=e=>{let t={desktop:"none",tablet:"none",mobile:"none"};return["desktop","mobile","tablet"].forEach(o=>{let l=i(e,o);t={...t,[o]:l}}),r("space-between"===t.desktop?"[&>*>*]:!gp-justify-between":"","space-between"===t.tablet?"tablet:[&>*>*]:!gp-justify-between ":`tablet:[&>*>*]:!gp-justify-${e?.tablet}`,"space-between"===t.mobile?"mobile:[&>*>*]:!gp-justify-between ":`mobile:[&>*>*]:!gp-justify-${e?.mobile}`)},X=(e,t)=>{let o={desktop:!1,tablet:!1,mobile:!1};return["desktop","mobile","tablet"].forEach(l=>{let r=i(e,l),a=!!k(l,t),n=r?.shape,s=r?.height;o={...o,[l]:"original"===n&&"fit-content"!==s&&!a}}),r(o.desktop?"!gp-absolute":"",o.tablet?"tablet:!gp-absolute":"tablet:!gp-relative",o.mobile?"mobile:!gp-absolute":"mobile:!gp-relative")},F=e=>{let t={center:"center",top:"start",bottom:"end","space-between":"between"},o=e.desktop||"center",l=e.tablet||o,i=e.mobile||l;return{[`gp-justify-${t[o]}`]:!0,[`tablet:gp-justify-${t[l]}`]:!0,[`mobile:gp-justify-${t[i]}`]:!0}},Y=e=>{let t=e.desktop,o=e.tablet?e.tablet:t,l=e.mobile?e.mobile:o;return{desktop:t,tablet:o,mobile:l}},U=t=>e.some(e=>{let l=o(t,e);return l?.type!=="color"&&l?.type!=="image"&&!!l&&(l?.videoType==="html5"&&l?.videoHtml5||l?.videoType==="youtube"&&l?.video)});function Q(e,t){let o;return function(...l){clearTimeout(o),o=setTimeout(()=>e.apply(this,l),t)}}let _="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI5MDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZGVmcz4KICAgICAgPGxpbmVhckdyYWRpZW50IGlkPSJnLTE5MjAtOTAwIj4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjIwJSIgLz4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjUwJSIgLz4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjcwJSIgLz4KICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxyZWN0IHdpZHRoPSIxOTIwIiBoZWlnaHQ9IjkwMCIgZmlsbD0icmdiYSg1MSwgNTEsIDUxLCAwKSIgLz4KICAgIDxyZWN0IGlkPSJyIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI5MDAiIGZpbGw9InVybCgjZy0xOTIwLTkwMCkiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTE5MjAiIHRvPSIxOTIwIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgIC8+CiAgPC9zdmc+",q=e=>{let t=e?.link;return t?.type==="go-to-sales-page"?{type:"go-to-sales-page",link:p,target:"_self"}:t},ee=e=>e?String(e).includes("%")?`${e}`:`${e}%`:"100%",et=e=>{let{overlayColor:t,overlayOpacity:o}=e??{},l=!t?.normal||o?.normal=="0%"||!o?.normal;return{disableOpacity:l}},eo=e=>{let{overlayOpacity:t}=e??{},o="number"!=typeof t?.hover||isNaN(t?.hover)?"string"==typeof t?.hover?`${parseInt(t?.hover)}%`:"":`${t?.hover}%`,l="number"!=typeof t?.normal||isNaN(t?.normal)?"string"==typeof t?.normal?`${parseInt(t?.normal)}%`:"0%":`${t?.normal}%`;return o||l},el=(e,t)=>{if(!e||!t)return 16/9;let o=i(e,t),l=o?.videoCustomRatio;if(l?.width&&l?.height){let e=Number(l.width),t=Number(l.height);if(e>0&&t>0)return e/t}return 16/9},ei=e=>{e&&(e.style.removeProperty("width"),e.style.removeProperty("height"),e.style.removeProperty("top"),e.style.removeProperty("left"),e.style.removeProperty("transform"),e.style.removeProperty("position"))},er=e=>{Object.assign(e.style,{position:"absolute",top:"0",left:"0",width:"100%",height:"100%"})},ea=e=>{e.style.removeProperty("position"),e.style.removeProperty("top"),e.style.removeProperty("left"),e.style.removeProperty("width"),e.style.removeProperty("height")},en=e=>{if(!e)return 0;let{width:t,height:o}=e.getBoundingClientRect();return t&&o?t/o:0},es=e=>{switch(e){case"top":default:return{top:"0%",transform:`translate(-50%, 0%) scale(${g})`};case"bottom":return{top:"100%",transform:`translate(-50%, -100%) scale(${g})`};case"center":return{top:"50%",transform:`translate(-50%, -50%) scale(${g})`}}},ep=(e,t)=>{if(!e)return;let o=es(t);e.style.top=o.top,e.style.transform=o.transform},eb=({iframeEl:e,containerRatio:t,videoObjectFit:o,background:l,currentDevice:r,isYoutubeVideoMigrated:a})=>{let n,s;let p=el(l,r),b=i(l,r);if(!e||!t)return;let d=b?.videoAlign||"top",c=es(d);if("contain"===o){Object.assign(e.style,{position:"absolute",top:"50%",left:"50%",width:"100%",height:"100%",maxWidth:"none",transform:`translate(-50%, -50%) scale(${g})`});return}t>=p?(n=100,s=t/p*100):(s=100,n=p/t*100),Object.assign(e.style,{position:"absolute",top:c.top,left:"50%",width:a?"500%":`${n}%`,height:a?"100%":`${s}%`,maxWidth:"none",transform:c.transform})};export{P as collectAspectRatioByDevice,x as collectYoutubeAspectRatio,Q as debounce,_ as fallbackImg,ee as formatHoverScale,$ as getAspectRatio,f as getAttachmentDevice,y as getBackgroundImageHeroBanner,q as getBannerLink,m as getBgImage,H as getClassAlignBanner,F as getClassContentPosition,X as getClassForContentByFitContent,O as getClassForStretchContent,J as getClassSpaceBetween,K as getClassSpaceBetweenLeftRight,L as getClipPath,en as getContainerRatio,d as getContentPosition,k as getDataVideoHeroBannerResponsive,Z as getDisplayStyleByFitContent,c as getEnableBgImageByDevice,eo as getOpacityHover,T as getPercentageVisible,Y as getResponsiveSetting,j as getStyleAspectRatioHeroBannerCustom,E as getStyleHeroBannerBg,el as getVideoAspectRatio,w as getVisibilityStyle,R as getWidth,D as getYoutubeAspectRatio,I as horizontalAlign,u as imagePlaceholder,V as isScaleImage,S as mapContentPositionToHorizontal,et as opacityEnabledData,ei as resetVideoIframeStyle,ea as resetVideoWrapperStyle,v as scrollToContentBanner,ep as setVideoIframeAlign,er as setVideoWrapperStyle,U as showVideoType,eb as updateVideoIframeSize};

package/dist/esm/product/components/product-images-v2/ProductImagesV2.liquid.js

@@ -1,7 +1,7 @@
-import{isLocalEnv as e,baseAssetURL as o,template as r,WrapRenderChildren as t,RenderChildren as s}from"@gem-sdk/core";import{getConditionRenderGalleryImages as i,getStyleInsideLayout as a,setDefaultWhenUndefineSetting as p}from"./common/common.js";import l from"./components/feature-gallery/FeatureImageWithGallery.liquid.js";import d from"./components/gallery-carousel/GalleryCarousel.liquid.js";import m from"./components/gallery-grid/GalleryGrid.liquid.js";import{filterPageContext as c,getSettingPreloadData as u}from"../../../helpers.js";import{getShapeByLayout as n,sizeSettingDefaultForNewLayout as g}from"./common/productGallery.js";import{getProductImagesClassName as f}from"./composables/getProductImagesClassName.js";import{getProductImagesStyles as y}from"./composables/getProductImagesStyles.js";import{createAttr as $,LiquidIf as h,createClass as j,If as S,Liquid as v}from"@gem-sdk/system";import{getBorderActiveCss as F}from"./common/getBorderActiveCss.js";import{getStyleOfObject as I}from"../../helpers/function.js";let C=C=>{let P=p(C),{setting:G,styles:D,builderProps:b,style:z}=P,{rawChildren:O,pageContext:_}=C,{enableLazyLoadImage:N}=_??{},A={...G,...D},B=`
+import{template as e,isLocalEnv as o,baseAssetURL as t,WrapRenderChildren as r,RenderChildren as s}from"@gem-sdk/core";import{getConditionRenderGalleryImages as i,getStyleInsideLayout as a,setDefaultWhenUndefineSetting as p}from"./common/common.js";import l from"./components/feature-gallery/FeatureImageWithGallery.liquid.js";import d from"./components/gallery-carousel/GalleryCarousel.liquid.js";import m from"./components/gallery-grid/GalleryGrid.liquid.js";import{filterPageContext as c,getSettingPreloadData as n}from"../../../helpers.js";import{getShapeByLayout as u,sizeSettingDefaultForNewLayout as g}from"./common/productGallery.js";import{getProductImagesClassName as f}from"./composables/getProductImagesClassName.js";import{getProductImagesStyles as $}from"./composables/getProductImagesStyles.js";import{createAttr as y,LiquidIf as h,createClass as j,If as v,Liquid as S}from"@gem-sdk/system";import{getBorderActiveCss as F}from"./common/getBorderActiveCss.js";import{getStyleOfObject as I}from"../../helpers/function.js";let C=C=>{let P=p(C),{setting:G,styles:D,builderProps:b,style:O}=P,{rawChildren:_,pageContext:z}=C,{enableLazyLoadImage:N}=z??{},A={...G,...D},B=`
     {
       "id":${JSON.stringify(b?.uid)},
-      "pageContext": ${JSON.stringify(c(_))},
+      "pageContext": ${JSON.stringify(c(z))},
       "setting":${JSON.stringify(G)},
       "styles":${JSON.stringify(D)},
       "productUrl":{{product.url | json }},
@@ -9,36 +9,33 @@ import{isLocalEnv as e,baseAssetURL as o,template as r,WrapRenderChildren as t,R
       "collectionUrl": {{ collection.url | json }},
       "collection": {{ collection | json }}
     }
-  `,U=$({"section-id":"{{section.id}}","data-id":`${b?.uid}`}),{isOnlyFeatureAllDevices:k,isRenderGalleryGrid:q}=i(A?.position,G?.type),E=q?{}:$({"data-only-image":h("product.media.size > 1","false","true")}),{wrapperClasses:J,productImagesGalleryClasses:w}=f(C),T=j({"gp-grid gp-w-full !gp-m-0 gp-relative":!0}),x=j({"gp-w-full !gp-m-0 gp-relative":!0}),{wrapContainerStyle:L,wrapContainerStyleOnlyOneImage:M,galleryImageStyle:R}=y(A),V=n({shape:A.shape,shapeForBottom:A.shapeForBottom,shapeFor1Col:A.shapeFor1Col,shapeFor2Col:A.shapeFor2Col,shapeForFtOnly:A.shapeForFtOnly,shapeForInsideBottom:A.shapeForInsideBottom??g,shapeForInside:A.shapeForInside??g},A.position),W=a(A.position,V,A?.spacing),H=()=>r`
-      ${t({uid:b?.uid||"",customProps:O?.[0].customProps},O?.map(e=>{if(e)return r`${s({...e,isInsideProductImage:!0,imageData:{imageShape:D?.ftShape,imageAlign:D?.align,imageLayout:D?.position},dotData:{dotSize:G?.ftDotSize,dotGapToCarousel:G?.ftDotGapToCarousel,dotStyle:G?.ftDotStyle}})}`}))}
-    `;return r`
-  ${S(G?.borderActive?.border!=="none",h("product.media.size > 1",`<style>${F({settings:A,uid:b?.uid,type:"Liquid"})}</style>`),"")}
-  ${v(`
+  `,U=y({"section-id":"{{section.id}}","data-id":`${b?.uid}`}),{isOnlyFeatureAllDevices:k,isRenderGalleryGrid:q}=i(A?.position,G?.type),E=q?{}:y({"data-only-image":h("product.media.size > 1","false","true")}),{wrapperClasses:J,productImagesGalleryClasses:w}=f(C),T=j({"gp-grid gp-w-full !gp-m-0 gp-relative":!0}),x=j({"gp-w-full !gp-m-0 gp-relative":!0}),{wrapContainerStyle:L,wrapContainerStyleOnlyOneImage:M,galleryImageStyle:R}=$(A),V=u({shape:A.shape,shapeForBottom:A.shapeForBottom,shapeFor1Col:A.shapeFor1Col,shapeFor2Col:A.shapeFor2Col,shapeForFtOnly:A.shapeForFtOnly,shapeForInsideBottom:A.shapeForInsideBottom??g,shapeForInside:A.shapeForInside??g},A.position),W=a(A.position,V,A?.spacing),H=()=>e`
+      ${r({uid:b?.uid||"",customProps:_?.[0].customProps},_?.map(o=>{if(o)return e`${s({...o,isInsideProductImage:!0,imageData:{imageShape:D?.ftShape,imageAlign:D?.align,imageLayout:D?.position},dotData:{dotSize:G?.ftDotSize,dotGapToCarousel:G?.ftDotGapToCarousel,dotStyle:G?.ftDotStyle}})}`}))}
+    `,K=()=>e`
+      <div
+        class="${w}"
+        style="${I(R)}"
+        ${{...E}}
+      >
+        ${h("product.media.size > 1",d({builderPropUID:`gp-gallery-${b?.uid}`,...A,enableLazyLoadImage:N}))}
+        ${v(q,m({builderPropUID:b?.uid,wrapperStyle:{...W},children:H(),...A,enableLazyLoadImage:N}))}
+      </div>
+    `,Q=()=>e`
+      ${l({builderPropUID:`gp-carousel-${b?.uid}`,...A,children:H(),enableLazyLoadImage:N})}
+        ${v(!k,K())}
+    `;return e`
+  ${v(G?.borderActive?.border!=="none",h("product.media.size > 1",`<style>${F({settings:A,uid:b?.uid,type:"Liquid"})}</style>`),"")}
+  ${S(`
     {% assign featured_image = product.featured_image %}
     ${h("variant != null and variant.featured_image != null","{% assign featured_image = variant.featured_image %}")}
   `)}
     <gp-product-images
       ${{...U}}
-      style="${{...z}}"
+      style="${{...O}}"
       class="${J}"
     >
       <script gp-data type="application/json">${B}</script>
-      <div
-        class="${h("product.media.size > 1",`${T}`,`${x}`)}"
-        style="${h("product.media.size > 1",I(L),I(M))}"
-      >
-        ${l({builderPropUID:`gp-carousel-${b?.uid}`,...A,children:H(),enableLazyLoadImage:N})}
-        ${S(!k,r`
-      <div
-        class="${w}"
-        style="${I(R)}"
-        ${{...E}}
-      >
-        ${h("product.media.size > 1",d({builderPropUID:`gp-gallery-${b?.uid}`,...A,enableLazyLoadImage:N}))}
-        ${S(q,m({builderPropUID:b?.uid,wrapperStyle:{...W},children:H(),...A,enableLazyLoadImage:N}))}
-      </div>
-    `)}
-      </div>
+      ${h("product.media.size > 1",e`<div class="${T}" style="${I(L)}">${Q()}</div>`,e`<div class="${x}" style="${I(M)}">${Q()}</div>`)}
     </gp-product-images>
-    ${S(e,`<script ${u('class="gps-link" delay',"src")}="{{ 'gp-product-images-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${u('class="gps-link" delay',"src")}="${o}/assets-v2/gp-product-images-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+    ${v(o,`<script ${n('class="gps-link" delay',"src")}="{{ 'gp-product-images-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${n('class="gps-link" delay',"src")}="${t}/assets-v2/gp-product-images-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
   `};export{C as default};

package/dist/esm/product/components/product-images-v3/ProductImagesV3.liquid.js

@@ -1,7 +1,7 @@
-import{isLocalEnv as e,baseAssetURL as o,template as r,WrapRenderChildren as t,RenderChildren as s}from"@gem-sdk/core";import{getConditionRenderGalleryImages as i,getStyleInsideLayout as a,setDefaultWhenUndefineSetting as p}from"./common/common.js";import l from"./components/feature-gallery/FeatureImageWithGallery.liquid.js";import d from"./components/gallery-carousel/GalleryCarousel.liquid.js";import m from"./components/gallery-grid/GalleryGrid.liquid.js";import{filterPageContext as c,getSettingPreloadData as u}from"../../../helpers.js";import{getShapeByLayout as n,sizeSettingDefaultForNewLayout as g}from"./common/productGallery.js";import{getProductImagesClassName as f}from"./composables/getProductImagesClassName.js";import{getProductImagesStyles as y}from"./composables/getProductImagesStyles.js";import{createAttr as $,LiquidIf as h,createClass as v,If as j,Liquid as S}from"@gem-sdk/system";import{getBorderActiveCss as F}from"./common/getBorderActiveCss.js";import{getStyleOfObject as I}from"../../helpers/function.js";let C=C=>{let P=p(C),{setting:G,styles:D,builderProps:b,style:z}=P,{rawChildren:O,pageContext:_}=C,{enableLazyLoadImage:N}=_??{},A={...G,...D},B=`
+import{template as e,isLocalEnv as o,baseAssetURL as t,WrapRenderChildren as r,RenderChildren as s}from"@gem-sdk/core";import{getConditionRenderGalleryImages as i,getStyleInsideLayout as a,setDefaultWhenUndefineSetting as p}from"./common/common.js";import l from"./components/feature-gallery/FeatureImageWithGallery.liquid.js";import d from"./components/gallery-carousel/GalleryCarousel.liquid.js";import m from"./components/gallery-grid/GalleryGrid.liquid.js";import{filterPageContext as c,getSettingPreloadData as n}from"../../../helpers.js";import{getShapeByLayout as u,sizeSettingDefaultForNewLayout as g}from"./common/productGallery.js";import{getProductImagesClassName as f}from"./composables/getProductImagesClassName.js";import{getProductImagesStyles as y}from"./composables/getProductImagesStyles.js";import{createAttr as $,LiquidIf as h,createClass as v,If as j,Liquid as S}from"@gem-sdk/system";import{getBorderActiveCss as F}from"./common/getBorderActiveCss.js";import{getStyleOfObject as I}from"../../helpers/function.js";let C=C=>{let P=p(C),{setting:G,styles:D,builderProps:b,style:O}=P,{rawChildren:_,pageContext:z}=C,{enableLazyLoadImage:N}=z??{},A={...G,...D},B=`
     {
       "id":${JSON.stringify(b?.uid)},
-      "pageContext": ${JSON.stringify(c(_))},
+      "pageContext": ${JSON.stringify(c(z))},
       "setting":${JSON.stringify(G)},
       "styles":${JSON.stringify(D)},
       "productUrl":{{product.url | json }},
@@ -9,9 +9,9 @@ import{isLocalEnv as e,baseAssetURL as o,template as r,WrapRenderChildren as t,R
       "collectionUrl": {{ collection.url | json }},
       "collection": {{ collection | json }}
     }
-  `,U=$({"section-id":"{{section.id}}","data-id":`${b?.uid}`}),{isOnlyFeatureAllDevices:k,isRenderGalleryGrid:q}=i(A?.position,G?.type),E=q?{}:$({"data-only-image":h("product.media.size > 1","false","true")}),{wrapperClasses:J,productImagesGalleryClasses:w}=f(C),T=v({"gp-grid gp-w-full !gp-m-0 gp-relative":!0}),x=v({"gp-w-full !gp-m-0 gp-relative":!0}),{wrapContainerStyle:L,wrapContainerStyleOnlyOneImage:M,galleryImageStyle:R}=y(A),V=n({shape:A.shape,shapeForBottom:A.shapeForBottom,shapeFor1Col:A.shapeFor1Col,shapeFor2Col:A.shapeFor2Col,shapeForFtOnly:A.shapeForFtOnly,shapeForInsideBottom:A.shapeForInsideBottom??g,shapeForInside:A.shapeForInside??g},A.position),W=a(A.position,V,A?.spacing),H=()=>r`
-      ${t({uid:b?.uid||"",customProps:O?.[0].customProps},O?.map(e=>{if(e)return r`${s({...e,isInsideProductImage:!0,imageData:{imageShape:D?.ftShape,imageAlign:D?.align,imageLayout:D?.position},dotData:{dotSize:G?.ftDotSize,dotGapToCarousel:G?.ftDotGapToCarousel,dotStyle:G?.ftDotStyle}})}`}))}
-    `;return r`
+  `,U=$({"section-id":"{{section.id}}","data-id":`${b?.uid}`}),{isOnlyFeatureAllDevices:k,isRenderGalleryGrid:q}=i(A?.position,G?.type),E=q?{}:$({"data-only-image":h("product.media.size > 1","false","true")}),{wrapperClasses:J,productImagesGalleryClasses:w}=f(C),T=v({"gp-grid gp-w-full !gp-m-0 gp-relative":!0}),x=v({"gp-w-full !gp-m-0 gp-relative":!0}),{wrapContainerStyle:L,wrapContainerStyleOnlyOneImage:M,galleryImageStyle:R}=y(A),V=u({shape:A.shape,shapeForBottom:A.shapeForBottom,shapeFor1Col:A.shapeFor1Col,shapeFor2Col:A.shapeFor2Col,shapeForFtOnly:A.shapeForFtOnly,shapeForInsideBottom:A.shapeForInsideBottom??g,shapeForInside:A.shapeForInside??g},A.position),W=a(A.position,V,A?.spacing),H=()=>e`
+      ${r({uid:b?.uid||"",customProps:_?.[0].customProps},_?.map(o=>{if(o)return e`${s({...o,isInsideProductImage:!0,imageData:{imageShape:D?.ftShape,imageAlign:D?.align,imageLayout:D?.position},dotData:{dotSize:G?.ftDotSize,dotGapToCarousel:G?.ftDotGapToCarousel,dotStyle:G?.ftDotStyle}})}`}))}
+    `;return e`
   ${j(G?.borderActive?.border!=="none",h("product.media.size > 1",`<style>${F({settings:A,uid:b?.uid,type:"Liquid"})}</style>`),"")}
   ${S(`
     {% assign featured_image = product.featured_image %}
@@ -19,16 +19,13 @@ import{isLocalEnv as e,baseAssetURL as o,template as r,WrapRenderChildren as t,R
   `)}
     <gp-product-images-v3
       ${{...U}}
-      style="${{...z}}"
+      style="${{...O}}"
       class="${J}"
     >
       <script gp-data type="application/json">${B}</script>
-      <div
-        class="${h("product.media.size > 1",`${T}`,`${x}`)}"
-        style="${h("product.media.size > 1",I(L),I(M))}"
-      >
+      ${h("product.media.size > 1",e`<div class="${T}" style="${I(L)}">`,e`<div class="${x}" style="${I(M)}">`)}
         ${l({builderPropUID:`gp-carousel-${b?.uid}`,...A,children:H(),enableLazyLoadImage:N})}
-        ${j(!k,r`
+        ${j(!k,e`
       <div
         class="${w}"
         style="${I(R)}"
@@ -40,5 +37,5 @@ import{isLocalEnv as e,baseAssetURL as o,template as r,WrapRenderChildren as t,R
     `)}
       </div>
     </gp-product-images-v3>
-    ${j(e,`<script ${u('class="gps-link" delay',"src")}="{{ 'gp-product-images-v3-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${u('class="gps-link" delay',"src")}="${o}/assets-v2/gp-product-images-v3-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+    ${j(o,`<script ${n('class="gps-link" delay',"src")}="{{ 'gp-product-images-v3-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${n('class="gps-link" delay',"src")}="${t}/assets-v2/gp-product-images-v3-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
   `};export{C as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "17.0.0-dev.123",
+  "version": "17.0.0-dev.126",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -26,7 +26,7 @@
     "i18n:extract": "rollup -c ./scripts/rollup.config.settings.mjs && node ./scripts/translate/extract-texts-to-locales.js && node ./scripts/translate/en-keys-usage.js"
   },
   "devDependencies": {
-    "@gem-sdk/core": "17.0.0-dev.123",
+    "@gem-sdk/core": "17.0.0-dev.125",
     "@gem-sdk/styles": "17.0.0-dev.118",
     "@gem-sdk/system": "17.0.0-dev.93",
     "@types/react-transition-group": "^4.4.12",