@gem-sdk/components 17.0.0-dev.28 → 17.0.0-staging.5

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

@@ -1,4 +1,4 @@
-"use strict";var e=require("@gem-sdk/core"),t=require("../../helpers.js"),r=require("../settings/configs/translate.js");const i=({device:e,aspect:t,custom:r,auto:i})=>{let s=t?.[e];return"auto"===s?i?.height?`${i.width}/${i.height}`:void 0:"custom"===s?r?.[e]?.height?`${r?.[e]?.width}/${r?.[e]?.height}`:void 0:s},s=(e,t)=>`<svg width="${e}" height="${t}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+"use strict";var core=require("@gem-sdk/core"),helpers=require("../../helpers.js"),translate=require("../settings/configs/translate.js");const overwriteDefaultRadius=e=>{let t={...e},r=!0;return t&&Object.keys(t??{}).forEach(e=>{if("bblr"===e||"bbrr"===e||"btlr"===e||"btrr"===e){let i=t[e]??{};"0px"!==i&&(r=!1)}}),r?core.getCornerCSSFromGlobal(t):{}},getAspectRatio=({styles:e,setting:t})=>{let{srcSet:r,image:i}=t??{},{customAspectRadio:a,shape:s}=e??{},l={desktop:composeAspectRatio({device:"desktop",aspect:e?.aspectRatio,auto:t?.isAdaptive?r?.desktop:i,custom:a}),tablet:composeAspectRatio({device:"tablet",aspect:e?.aspectRatio,auto:t?.isAdaptive?r?.tablet:i,custom:a}),mobile:composeAspectRatio({device:"mobile",aspect:e?.aspectRatio,auto:t?.isAdaptive?r?.mobile:i,custom:a})};return s?core.getAspectRatioGlobalSize(s):l},composeAspectRatio=({device:e,aspect:t,custom:r,auto:i})=>{let a=t?.[e];return"auto"===a?i?.height?`${i.width}/${i.height}`:void 0:"custom"===a?r?.[e]?.height?`${r?.[e]?.width}/${r?.[e]?.height}`:void 0:a},getResponsiveObjectFit=({layout:e,isDisableObjectFit:t})=>t?{}:core.makeStyleResponsive("objf",e),getAspectRatioNextImage=({isDisableAspectStyle:e,aspectRatio:t,objectFits:r,width:i,height:a})=>{if(e)return{};let s={};return core.DEVICES.forEach(e=>{let l=`--objf${"desktop"!==e?`-${e}`:""}`,o=r?.[l]||r?.["--objf"];if(t?.[e]==="auto"&&"contain"===o){s[e]="auto";return}s[e]=t?.[e]!=="auto"&&t?.[e]?t[e]:`${i}/${a}`}),s},safeStringify=e=>JSON.stringify(e||{}).replace(/"/g,"&quot;"),shimmer=(e,t)=>`<svg width="${e}" height="${t}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <defs>
       <linearGradient id="g-${e}-${t}">
         <stop stop-color="rgba(51, 51, 51, 0)" offset="20%" />
@@ -9,4 +9,4 @@
     <rect width="${e}" height="${t}" fill="rgba(51, 51, 51, 0)" />
     <rect id="r" width="${e}" height="${t}" fill="url(#g-${e}-${t})" />
     <animate xlink:href="#r" attributeName="x" from="-${e}" to="${e}" dur="1s" repeatCount="indefinite"  />
-  </svg>`,l=e=>"undefined"==typeof window?Buffer.from(e).toString("base64"):window.btoa(e),a="https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",o=e=>e.includes("webp")||e.includes("jfif")||e.includes(".svg")||e.includes(".tiff"),n=(e,t)=>{let r=d(e);return o(e)?"FILE_CONTENT"==t?`{{ '${r}' | file_url }} 768w, {{ '${r}' | file_url }} 1024w, {{ '${r}' | file_url }} 1440w`:`{{ '${e}' | asset_url }} 768w, {{ '${e}' | asset_url }} 1024w, {{ '${e}' | asset_url }} 1440w`:"FILE_CONTENT"==t?`{{ '${r}' | file_img_url: '768x' }} 768w, {{ '${r}' | file_img_url: '1024x' }} 1024w, {{ '${r}' | file_img_url: 'master' }} 1440w`:`{{ '${e}' | asset_img_url: '768x' }} 768w, {{ '${e}' | asset_img_url: '1024x' }} 1024w, {{ '${e}' | asset_img_url: 'master' }} 1440w`},g=e=>e,c=(t,r,i)=>{if(t?.metafieldDefinitionKey)return u(t?.metafieldDefinitionKey);let s=t?.backupFilePath??t?.src??"";if(i)s=t?.src||"";else{let r=t?.src??"";if(e.hasTranslatedLiquid(r))return r;if(t?.backupFileKey){let e=m(t.backupFileKey,t?.src??"");"THEME"!==t.storage&&t.storage?"FILE_CONTENT"===t.storage&&(s=`{{ "${d(e)}" | file_url }}`):s=`{{ "${e}" | asset_url }}`}}if(r&&s?.includes("cdn.shopify"))switch(r){case"tablet":s=s?.replace(p,"_1024x.");break;case"mobile":s=s?.replace(p,"_768x.")}return s},u=e=>`{{${e} | file_url}}`,p=/\.(?=[^.]*$)/,d=e=>e.replace(/\.jpeg|\.jfif/g,".jpg"),m=(e,t)=>{let r=t?.match(/\/files\/([^\/]+\.(jpg|jpeg|gif|png|webp|svg))/)?.[1];return r&&r!=e?r:e};function f(e,t){let r=e.match(/\.webp/g)?.length,i=h({str:e,reg:/_(pico|icon|thumb|small|compact|medium|large|grande|original|1024x1024|2048x2048|master)+\./g,newString:"."});if(r)return i;let s=h({str:i,reg:/\.jpg|\.png|\.gif|\.jpeg/g,newString:t,isAdd:!0});return s}const h=e=>{let t=e.str,r=e.str.match(e.reg)?.length;if(r){let i,s=1;for(;null!==(i=e.reg.exec(e.str));){if(s===r){let r=e.reg.lastIndex,s=r-i[0].length;e.isAdd&&(e.newString="_"+e.newString+i),t=t.slice(0,s)+e.newString+t.slice(r,t.length)}s++}}return t},b=(e,t)=>{let r=v(),i=t?.[r]||"auto";if("auto"===i||i.includes("%"))return e;let s=Number(i.replace("px",""));return s>e?e:Number(i.replace("px",""))},A=t=>{let{itemWidthParam:r,imageWidthSetting:i,qualityType:s,qualityPercent:l}=t,a=v(),o=b(r,i),n=e.getResponsiveValueByScreen(s,a,"finest"),g=e.getResponsiveValueByScreen(l,a,100);switch(n){case"finest":default:return"auto";case"high":return Math.round(1.5*o)||1;case"medium":return Math.round(o)||1;case"custom":return Math.round(o*(Number(g)/100))||1}},w=t=>{let r={desktop:"100%",tablet:"100%",mobile:"100%"};return e.DEVICES.forEach(i=>{let s=e.getResponsiveValueByScreen(t,i)?.width||"100%";r[i]=s}),r},x=t=>{let r={desktop:"100%",tablet:"100%",mobile:"100%"};return e.DEVICES.forEach(i=>{let s=e.getResponsiveValueByScreen(t,i)?.width||"100%";r[i]=s}),r},S=e=>{let t=document.querySelectorAll(`.gem-slider-item-${e}.gp-gallery-image-item`),r=0;return t.forEach(e=>{e.offsetWidth>r&&(r=e.offsetWidth)}),r},$=e=>{let t=document.querySelectorAll(`.gem-slider-item-${e}.gp-ft-image-item`),r=0;return t.forEach(e=>{e.offsetWidth>r&&(r=e.offsetWidth)}),r},_=e=>{let{item:t,settingWidth:r,width:i,qualityType:s,qualityPercent:l}=e,a=v(),o=t.querySelector("img");if(o){let e=A({itemWidthParam:i,imageWidthSetting:r,qualityType:s,qualityPercent:l}),t=o.getAttribute("base-src");if(!t)return;let n=E(e,t),g=I(t,n,a);o.setAttribute("srcset",g)}},E=(e,t)=>"auto"===e?t:f(t,`${e}x`),I=(e,t,r)=>`${"mobile"===r&&e!==t?t:f(e,"768x")} 767w, ${"tablet"===r&&e!==t?t:f(e,"1024x")} 1023w, ${"desktop"===r&&e!==t?t:f(e,"1920x")} 1440w`,v=()=>window.innerWidth<768?"mobile":window.innerWidth>=768&&window.innerWidth<1025?"tablet":"desktop";exports.FALLBACK_IMAGE=a,exports.IMAGE_PLACEHOLDER="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",exports.NEXT_IMAGE_CONFIG={DEFAULT_SIZES:"100vw",DEFAULT_ALT:"Alt image",DEFAULT_SRC:"https://cdn.shopify.com/s/files/1/2005/9307/files/placeholder-1.png?v=1751355990",DEFAULT_WIDTH_PROPS:800,DEFAULT_HEIGHT_PROPS:533},exports.composeAspectRatio=i,exports.createBlurDataURL=(e,t)=>`data:image/svg+xml;base64,${l(s(e,t))}`,exports.getAdaptiveImageData=e=>{let{srcSet:t,fallbackImg:r}=e;return{getDeviceSource:e=>{let{isLiquid:i}=e??{},s=c(t?.desktop,"desktop",!i)||r||a,l=c(t?.tablet,"tablet",!i)||c(t?.desktop,"tablet",!i)||r||a,o=c(t?.mobile,"mobile",!i)||c(t?.tablet,"mobile",!i)||c(t?.desktop,"mobile",!i)||r||a;return{srcTablet:l,srcMobile:o,srcDesktop:s}}}},exports.getAspectRatio=({styles:t,setting:r})=>{let{srcSet:s,image:l}=r??{},{customAspectRadio:a,shape:o}=t??{},n={desktop:i({device:"desktop",aspect:t?.aspectRatio,auto:r?.isAdaptive?s?.desktop:l,custom:a}),tablet:i({device:"tablet",aspect:t?.aspectRatio,auto:r?.isAdaptive?s?.tablet:l,custom:a}),mobile:i({device:"mobile",aspect:t?.aspectRatio,auto:r?.isAdaptive?s?.mobile:l,custom:a})};return o?e.getAspectRatioGlobalSize(o):n},exports.getAspectRatioNextImage=({isDisableAspectStyle:t,aspectRatio:r,objectFits:i,width:s,height:l})=>{if(t)return{};let a={};return e.DEVICES.forEach(e=>{let t=`--objf${"desktop"!==e?`-${e}`:""}`,o=i?.[t]||i?.["--objf"];if(r?.[e]==="auto"&&"contain"===o){a[e]="auto";return}a[e]=r?.[e]!=="auto"&&r?.[e]?r[e]:`${s}/${l}`}),a},exports.getCurrentDevice=v,exports.getImageSrc=c,exports.getImageWidthFollowByQuality=A,exports.getNewBackupFileKey=m,exports.getResponsiveObjectFit=({layout:t,isDisableObjectFit:r})=>r?{}:e.makeStyleResponsive("objf",t),exports.getSettingTranslatedImageAndSeo=({setting:i,uid:s,pageContext:l})=>{if(!i||!r.Image)return{};let a=e.cloneDeep(i);for(let e in a.srcSet){let i=a.srcSet[e];if(i&&i.src){let a=t.getDynamicSourceLocales({val:i.src,uid:s,settingId:r.Image?.srcSet?.id?`${r.Image.srcSet.id}_${e}_src`:"",pageContext:l??{}});i.src=String(a)}}let o=t.getDynamicSourceLocales({val:a.alt,uid:s,settingId:t.createSettingId({id:r.Image?.alt?.id}),pageContext:l??{}});a.alt=String(o);let n=t.getDynamicSourceLocales({val:a.title,uid:s,settingId:t.createSettingId({id:r.Image?.title?.id}),pageContext:l??{}});return a.title=String(n),a},exports.getSrcSet=(e,t,r)=>e?n(e,t):g(r),exports.handleSetSrcForFeatureProductImage=e=>{let{ftShape:t,qualityType:r,qualityPercent:i,builderPropUID:s}=e,l=document.querySelectorAll(`.gem-slider-item-${s}.gp-ft-image-item`),a=w(t),o=$(s);l.forEach(e=>{_({item:e,settingWidth:a,width:o,qualityType:r,qualityPercent:i})})},exports.handleSetSrcForProductImageList=e=>{let{shapeByLayout:t,qualityType:r,qualityPercent:i,builderPropUID:s}=e,l=document.querySelectorAll(`.gem-slider-item-${s}.gp-gallery-image-item`),a=x(t),o=S(s);l.forEach(e=>{_({item:e,settingWidth:a,width:o,qualityType:r,qualityPercent:i})})},exports.isCannotResizeImage=o,exports.overwriteDefaultRadius=t=>{let r={...t},i=!0;return r&&Object.keys(r??{}).forEach(e=>{if("bblr"===e||"bbrr"===e||"btlr"===e||"btrr"===e){let t=r[e]??{};"0px"!==t&&(i=!1)}}),i?e.getCornerCSSFromGlobal(r):{}},exports.regexReplaceEndDot=p,exports.replaceBackupFileKeyFileContent=d,exports.resizeImage=f,exports.safeStringify=e=>JSON.stringify(e||{}).replace(/"/g,"&quot;"),exports.shimmer=s,exports.toBase64=l;
+  </svg>`,toBase64=e=>"undefined"==typeof window?Buffer.from(e).toString("base64"):window.btoa(e),createBlurDataURL=(e,t)=>`data:image/svg+xml;base64,${toBase64(shimmer(e,t))}`,IMAGE_PLACEHOLDER="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",FALLBACK_IMAGE="https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",NEXT_IMAGE_CONFIG={DEFAULT_SIZES:"100vw",DEFAULT_ALT:"Alt image",DEFAULT_SRC:"https://cdn.shopify.com/s/files/1/2005/9307/files/placeholder-1.png?v=1751355990",DEFAULT_WIDTH_PROPS:800,DEFAULT_HEIGHT_PROPS:533},getAdaptiveImageData=e=>{let{srcSet:t,fallbackImg:r}=e,i=e=>{let{isLiquid:i}=e??{},a=getImageSrc(t?.desktop,"desktop",!i)||r||FALLBACK_IMAGE,s=getImageSrc(t?.tablet,"tablet",!i)||getImageSrc(t?.desktop,"tablet",!i)||r||FALLBACK_IMAGE,l=getImageSrc(t?.mobile,"mobile",!i)||getImageSrc(t?.tablet,"mobile",!i)||getImageSrc(t?.desktop,"mobile",!i)||r||FALLBACK_IMAGE;return{srcTablet:s,srcMobile:l,srcDesktop:a}};return{getDeviceSource:i}},getSettingTranslatedImageAndSeo=({setting:e,uid:t,pageContext:r})=>{if(!e||!translate.Image)return{};let i=core.cloneDeep(e);for(let e in i.srcSet){let a=i.srcSet[e];if(a&&a.src){let i=helpers.getDynamicSourceLocales({val:a.src,uid:t,settingId:translate.Image?.srcSet?.id?`${translate.Image.srcSet.id}_${e}_src`:"",pageContext:r??{}});a.src=String(i)}}let a=helpers.getDynamicSourceLocales({val:i.alt,uid:t,settingId:helpers.createSettingId({id:translate.Image?.alt?.id}),pageContext:r??{}});i.alt=String(a);let s=helpers.getDynamicSourceLocales({val:i.title,uid:t,settingId:helpers.createSettingId({id:translate.Image?.title?.id}),pageContext:r??{}});return i.title=String(s),i},getSrcSet=(e,t,r)=>e?getSrcSetLiquid(e,t):getSrcSetLink(r),isCannotResizeImage=e=>e.includes("webp")||e.includes("jfif")||e.includes(".svg")||e.includes(".tiff"),getSrcSetLiquid=(e,t)=>{let r=replaceBackupFileKeyFileContent(e);return isCannotResizeImage(e)?"FILE_CONTENT"==t?`{{ '${r}' | file_url }} 768w, {{ '${r}' | file_url }} 1024w, {{ '${r}' | file_url }} 1440w`:`{{ '${e}' | asset_url }} 768w, {{ '${e}' | asset_url }} 1024w, {{ '${e}' | asset_url }} 1440w`:"FILE_CONTENT"==t?`{{ '${r}' | file_img_url: '768x' }} 768w, {{ '${r}' | file_img_url: '1024x' }} 1024w, {{ '${r}' | file_img_url: 'master' }} 1440w`:`{{ '${e}' | asset_img_url: '768x' }} 768w, {{ '${e}' | asset_img_url: '1024x' }} 1024w, {{ '${e}' | asset_img_url: 'master' }} 1440w`},getSrcSetLink=e=>e,getImageSrc=(e,t,r)=>{if(e?.metafieldDefinitionKey)return getImageMetafieldDefinitionKey(e?.metafieldDefinitionKey);let i=e?.backupFilePath??e?.src??"";if(r)i=e?.src||"";else{let t=e?.src??"";if(core.hasTranslatedLiquid(t))return t;if(e?.backupFileKey){let t=getNewBackupFileKey(e.backupFileKey,e?.src??"");"THEME"!==e.storage&&e.storage?"FILE_CONTENT"===e.storage&&(i=`{{ "${replaceBackupFileKeyFileContent(t)}" | file_url }}`):i=`{{ "${t}" | asset_url }}`}}if(t&&i?.includes("cdn.shopify"))switch(t){case"tablet":i=i?.replace(regexReplaceEndDot,"_1024x.");break;case"mobile":i=i?.replace(regexReplaceEndDot,"_768x.")}return i},getImageMetafieldDefinitionKey=e=>`{{${e} | file_url}}`,regexReplaceEndDot=/\.(?=[^.]*$)/,replaceBackupFileKeyFileContent=e=>e.replace(/\.jpeg|\.jfif/g,".jpg"),getNewBackupFileKey=(e,t)=>{let r=t?.match(/\/files\/([^\/]+\.(jpg|jpeg|gif|png|webp|svg))/)?.[1];return r&&r!=e?r:e};function resizeImage(e,t){let r=e.match(/\.webp/g)?.length,i=replaceRegexLastMatch({str:e,reg:/_(pico|icon|thumb|small|compact|medium|large|grande|original|1024x1024|2048x2048|master)+\./g,newString:"."});if(r)return i;let a=replaceRegexLastMatch({str:i,reg:/\.jpg|\.png|\.gif|\.jpeg/g,newString:t,isAdd:!0});return a}const replaceRegexLastMatch=e=>{let t=e.str,r=e.str.match(e.reg)?.length;if(r){let i,a=1;for(;null!==(i=e.reg.exec(e.str));){if(a===r){let r=e.reg.lastIndex,a=r-i[0].length;e.isAdd&&(e.newString="_"+e.newString+i),t=t.slice(0,a)+e.newString+t.slice(r,t.length)}a++}}return t},getItemWidth=(e,t)=>{let r=getCurrentDevice(),i=t?.[r]||"auto";if(!i||"auto"===i||i.includes("%"))return e;let a=Number(i.replace("px",""));return a>e?e:Number(i.replace("px",""))},getImageWidthFollowByQuality=e=>{let{itemWidthParam:t,imageWidthSetting:r,qualityType:i,qualityPercent:a}=e,s=getCurrentDevice(),l=getItemWidth(t,r),o=core.getResponsiveValueByScreen(i,s,"finest"),g=core.getResponsiveValueByScreen(a,s,100);switch(o){case"finest":default:return"auto";case"high":return Math.round(1.5*l)||1;case"medium":return Math.round(l)||1;case"custom":return Math.round(l*(Number(g)/100))||1}},getWidthOfFeatureImageSetting=e=>{let t={desktop:"100%",tablet:"100%",mobile:"100%"};return core.DEVICES.forEach(r=>{let i=core.getResponsiveValueByScreen(e,r)?.width||"100%";t[r]=i}),t},getWidthOfImageListSetting=e=>{let t={desktop:"100%",tablet:"100%",mobile:"100%"};return core.DEVICES.forEach(r=>{let i=core.getResponsiveValueByScreen(e,r)?.width||"100%";t[r]=i}),t},getWidthOfListImageInDom=e=>{let t=document.querySelectorAll(`.gem-slider-item-${e}.gp-gallery-image-item`),r=0;return t.forEach(e=>{e.offsetWidth>r&&(r=e.offsetWidth)}),r},getWidthOfFeatureImageInDom=e=>{let t=document.querySelectorAll(`.gem-slider-item-${e}.gp-ft-image-item`),r=0;return t.forEach(e=>{e.offsetWidth>r&&(r=e.offsetWidth)}),r},handleSetSrcForProductImageList=e=>{let{shapeByLayout:t,qualityType:r,qualityPercent:i,builderPropUID:a}=e,s=document.querySelectorAll(`.gem-slider-item-${a}.gp-gallery-image-item`),l=getWidthOfImageListSetting(t),o=getWidthOfListImageInDom(a);s.forEach(e=>{handleSetSrcForGalleryImage({item:e,settingWidth:l,width:o,qualityType:r,qualityPercent:i})})},handleSetSrcForFeatureProductImage=e=>{let{ftShape:t,qualityType:r,qualityPercent:i,builderPropUID:a}=e,s=document.querySelectorAll(`.gem-slider-item-${a}.gp-ft-image-item`),l=getWidthOfFeatureImageSetting(t),o=getWidthOfFeatureImageInDom(a);s.forEach(e=>{handleSetSrcForGalleryImage({item:e,settingWidth:l,width:o,qualityType:r,qualityPercent:i})})},handleSetSrcForGalleryImage=e=>{let{item:t,settingWidth:r,width:i,qualityType:a,qualityPercent:s}=e,l=getCurrentDevice(),o=t.querySelector("img");if(o){let e=getImageWidthFollowByQuality({itemWidthParam:i,imageWidthSetting:r,qualityType:a,qualityPercent:s}),t=o.getAttribute("base-src");if(!t)return;let g=getImageSrcByQuality(e,t),c=getImageSrcSet(t,g,l);o.setAttribute("srcset",c)}},getImageSrcByQuality=(e,t)=>"auto"===e?t:resizeImage(t,`${e}x`),getImageSrcSet=(e,t,r)=>`${"mobile"===r&&e!==t?t:resizeImage(e,"768x")} 767w, ${"tablet"===r&&e!==t?t:resizeImage(e,"1024x")} 1023w, ${"desktop"===r&&e!==t?t:resizeImage(e,"1920x")} 1440w`,getCurrentDevice=()=>window.innerWidth<768?"mobile":window.innerWidth>=768&&window.innerWidth<1025?"tablet":"desktop";exports.FALLBACK_IMAGE=FALLBACK_IMAGE,exports.IMAGE_PLACEHOLDER="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",exports.NEXT_IMAGE_CONFIG=NEXT_IMAGE_CONFIG,exports.composeAspectRatio=composeAspectRatio,exports.createBlurDataURL=createBlurDataURL,exports.getAdaptiveImageData=getAdaptiveImageData,exports.getAspectRatio=getAspectRatio,exports.getAspectRatioNextImage=getAspectRatioNextImage,exports.getCurrentDevice=getCurrentDevice,exports.getImageSrc=getImageSrc,exports.getImageWidthFollowByQuality=getImageWidthFollowByQuality,exports.getNewBackupFileKey=getNewBackupFileKey,exports.getResponsiveObjectFit=getResponsiveObjectFit,exports.getSettingTranslatedImageAndSeo=getSettingTranslatedImageAndSeo,exports.getSrcSet=getSrcSet,exports.handleSetSrcForFeatureProductImage=handleSetSrcForFeatureProductImage,exports.handleSetSrcForProductImageList=handleSetSrcForProductImageList,exports.isCannotResizeImage=isCannotResizeImage,exports.overwriteDefaultRadius=overwriteDefaultRadius,exports.regexReplaceEndDot=regexReplaceEndDot,exports.replaceBackupFileKeyFileContent=replaceBackupFileKeyFileContent,exports.resizeImage=resizeImage,exports.safeStringify=safeStringify,exports.shimmer=shimmer,exports.toBase64=toBase64;

package/dist/cjs/image/common/styles.js

@@ -1 +1 @@
-"use strict";var e=require("@gem-sdk/core"),t=require("./helpers.js");const s=t=>{let s=t?.shape?e.makeStyleResponsive("w",e.getWidthByShapeGlobalSize(t.shape)):e.makeStyleResponsive("w",e.makeWidth(t?.width,t?.fullWidth));return s},a=t=>e.makeStyleResponsive("h",e.getHeightByShapeGlobalSize(t?.shape));exports.getAdaptiveImageStyles=({layout:s,aspectRatio:a,borderRadius:i})=>{let r=t.getResponsiveObjectFit({layout:s,isDisableObjectFit:!1});return{...e.makeStyleResponsiveState("radius",i),...e.makeStyleResponsive("aspect",a),...r}},exports.getAdaptivePictureStyles=()=>({"border-radius":"inherit"}),exports.getContainerStyles=(t,s)=>({...t,...e.makeStyleResponsive("ta",s?.align)}),exports.getImageStyles=(i,r)=>{let{wrapperBorder:l,borderRadius:o}=i??{};return{...s(i),...a(i),...e.getBorderStyle(l),...e.getBorderRadiusStyle(o),...t.overwriteDefaultRadius(r?.builderData?.advanced?.rounded),...e.getStyleShadow({value:i?.shadow,styleAppliedFor:"box-shadow",isEnableShadow:i?.shadow?.enable&&i?.shadow?.type!=="none"})}},exports.getNextImageStyles=({width:s,height:a,setting:i,isDisableObjectFit:r,isDisableAspectStyle:l})=>{let{layout:o,aspectRatio:p}=i??{},d=t.getResponsiveObjectFit({layout:o,isDisableObjectFit:r}),n=t.getAspectRatioNextImage({isDisableAspectStyle:l,objectFits:d,aspectRatio:p,width:s,height:a});return{...e.makeStyleResponsive("aspect",n),...d}},exports.getWrapperStyles=t=>({"border-radius":"inherit",...e.makeStyleResponsive("jc",t?.align)});
+"use strict";var core=require("@gem-sdk/core"),helpers=require("./helpers.js");const getContainerStyles=(e,t)=>({...e,...core.makeStyleResponsive("ta",t?.align)}),getWrapperStyles=e=>({"border-radius":"inherit",...core.makeStyleResponsive("jc",e?.align)}),getImageStyles=(e,t)=>{let{wrapperBorder:s,borderRadius:r}=e??{};return{...getImageWidth(e),...getImageHeight(e),...core.getBorderStyle(s),...core.getBorderRadiusStyle(r),...helpers.overwriteDefaultRadius(t?.builderData?.advanced?.rounded),...core.getStyleShadow({value:e?.shadow,styleAppliedFor:"box-shadow",isEnableShadow:e?.shadow?.enable&&e?.shadow?.type!=="none"})}},getNextImageStyles=({width:e,height:t,setting:s,isDisableObjectFit:r,isDisableAspectStyle:a})=>{let{layout:i,aspectRatio:l}=s??{},o=helpers.getResponsiveObjectFit({layout:i,isDisableObjectFit:r}),g=helpers.getAspectRatioNextImage({isDisableAspectStyle:a,objectFits:o,aspectRatio:l,width:e,height:t});return{...core.makeStyleResponsive("aspect",g),...o}},getAdaptiveImageStyles=({layout:e,aspectRatio:t,borderRadius:s})=>{let r=helpers.getResponsiveObjectFit({layout:e,isDisableObjectFit:!1});return{...core.makeStyleResponsiveState("radius",s),...core.makeStyleResponsive("aspect",t),...r}},getAdaptivePictureStyles=()=>({"border-radius":"inherit"}),getImageWidth=e=>{let t=e?.shape?core.makeStyleResponsive("w",core.getWidthByShapeGlobalSize(e.shape)):core.makeStyleResponsive("w",core.makeWidth(e?.width,e?.fullWidth));return t},getImageHeight=e=>core.makeStyleResponsive("h",core.getHeightByShapeGlobalSize(e?.shape));exports.getAdaptiveImageStyles=getAdaptiveImageStyles,exports.getAdaptivePictureStyles=getAdaptivePictureStyles,exports.getContainerStyles=getContainerStyles,exports.getImageStyles=getImageStyles,exports.getNextImageStyles=getNextImageStyles,exports.getWrapperStyles=getWrapperStyles;

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

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../common/helpers.js"),t=require("@gem-sdk/system"),a=require("../common/classes.js"),r=require("../common/styles.js");const c=c=>{let{alt:l,style:i,srcSet:d,layout:m,priority:o,className:u,aspectRatio:g,borderRadius:p,pictureClass:n,enableLazyLoadImage:x,...y}=c,{getDeviceSource:A}=s.getAdaptiveImageData(c),{srcTablet:j,srcMobile:h}=A(),L=t.createAttr({loading:o?"eager":"lazy",src:d?.desktop?.src||s.FALLBACK_IMAGE}),v=t.createStyleReact({...r.getAdaptivePictureStyles()}),E=t.createStyle({...r.getAdaptiveImageStyles({layout:m,aspectRatio:g,borderRadius:p}),...i}),I=t.createClass({...a.getAdaptiveImageClasses({className:u,hasLazyLoad:!o&&x})});return e.jsx(e.Fragment,{children:e.jsxs("picture",{style:v,className:n,children:[e.jsxs(e.Fragment,{children:[h&&e.jsx("source",{media:"(max-width: 767px)",srcSet:x?s.IMAGE_PLACEHOLDER:h}),j&&e.jsx("source",{media:"(max-width: 1024px)",srcSet:x?s.IMAGE_PLACEHOLDER:j})]}),e.jsx("img",{...y,...L,alt:l,width:"100%",style:E,className:I,draggable:"false"})]})})};c.defaultProps={layout:{desktop:"cover"}},exports.default=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),helpers=require("../common/helpers.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js");const AdaptiveImage=e=>{let{alt:s,style:t,srcSet:a,layout:r,priority:m,className:l,aspectRatio:i,borderRadius:c,pictureClass:u,enableLazyLoadImage:d,...n}=e,{getDeviceSource:p}=helpers.getAdaptiveImageData(e),{srcTablet:x,srcMobile:j}=p(),o=system.createAttr({loading:m?"eager":"lazy",src:a?.desktop?.src||helpers.FALLBACK_IMAGE}),y=system.createStyleReact({...styles.getAdaptivePictureStyles()}),g=system.createStyle({...styles.getAdaptiveImageStyles({layout:r,aspectRatio:i,borderRadius:c}),...t}),A=system.createClass({...classes.getAdaptiveImageClasses({className:l,hasLazyLoad:!m&&d})}),h=()=>jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[j&&jsxRuntime.jsx("source",{media:"(max-width: 767px)",srcSet:d?helpers.IMAGE_PLACEHOLDER:j}),x&&jsxRuntime.jsx("source",{media:"(max-width: 1024px)",srcSet:d?helpers.IMAGE_PLACEHOLDER:x})]}),R=()=>jsxRuntime.jsx("img",{...n,...o,alt:s,width:"100%",style:g,className:A,draggable:"false"});return jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsxs("picture",{style:y,className:u,children:[h(),R()]})})};AdaptiveImage.defaultProps={layout:{desktop:"cover"}},exports.default=AdaptiveImage;

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

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

package/dist/cjs/image/components/Image.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@gem-sdk/core"),s=require("@gem-sdk/system"),r=require("./AdaptiveImage.js"),a=require("./NextImage.js"),l=require("../common/styles.js"),i=require("../common/classes.js"),c=require("../common/attrs.js"),n=require("../../helpers.js");exports.default=({style:o,styles:u,setting:g,children:m,advanced:d,className:p,builderAttrs:y,builderProps:j,onLoad:C,onClick:q})=>{let{imageLink:x,isAdaptive:A,enableImageLink:I}=g??{},f=t.useEditorMode(),{Wrapper:v,urlData:N}=n.getLinkData({defaultWrap:"div",setting:x,enableImageLink:I}),S=s.createStyleReact(l.getWrapperStyles(u)),k=s.createStyle(l.getImageStyles(u,j)),W=s.createStyle(l.getContainerStyles(o,u)),h=s.createClass(i.getWrapperClasses()),L=s.createClass(i.getImageClasses(p,u)),M=s.createClass(i.getContainerClasses(j?.uid,d?.cssClass,u?.shape)),_=s.createAttr(c.getContainerAttrs(y,j?.uid)),b=c.getLinkWrapperAttrs({urlData:N,imageLink:x,title:g?.title}),D=c.getAdaptiveImageAttrs({styles:u,setting:g,mode:f}),E=c.getNextImageAttrs({styles:u,setting:g});return e.jsxs("div",{role:"presentation",..._,style:W,className:M,onClick:q,children:[e.jsx(v,{...b,style:S,className:h,children:s.If(A,e.jsx(r.default,{...D,style:k,className:L}),e.jsx(a.default,{...E,style:k,className:L,onLoad:C}))}),m]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),AdaptiveImage=require("./AdaptiveImage.js"),NextImage=require("./NextImage.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),attrs=require("../common/attrs.js"),helpers=require("../../helpers.js");const Image=({style:e,styles:s,setting:t,children:a,advanced:r,className:l,builderAttrs:m,builderProps:i,onLoad:c,onClick:y})=>{let{imageLink:n,isAdaptive:g,enableImageLink:u}=t??{},o=core.useEditorMode(),{Wrapper:d,urlData:p}=helpers.getLinkData({defaultWrap:"div",setting:n,enableImageLink:u}),j=system.createStyleReact(styles.getWrapperStyles(s)),x=system.createStyle(styles.getImageStyles(s,i)),I=system.createStyle(styles.getContainerStyles(e,s)),C=system.createClass(classes.getWrapperClasses()),q=system.createClass(classes.getImageClasses(l,s)),A=system.createClass(classes.getContainerClasses(i?.uid,r?.cssClass,s?.shape)),v=system.createAttr(attrs.getContainerAttrs(m,i?.uid)),N=attrs.getLinkWrapperAttrs({urlData:p,imageLink:n,title:t?.title}),f=attrs.getAdaptiveImageAttrs({styles:s,setting:t,mode:o}),h=attrs.getNextImageAttrs({styles:s,setting:t}),R=()=>system.If(g,jsxRuntime.jsx(AdaptiveImage.default,{...f,style:x,className:q}),jsxRuntime.jsx(NextImage.default,{...h,style:x,className:q,onLoad:c}));return jsxRuntime.jsxs("div",{role:"presentation",...v,style:I,className:A,onClick:y,children:[jsxRuntime.jsx(d,{...N,style:j,className:C,children:R()}),a]})};exports.default=Image;

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

@@ -1,16 +1,16 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),t=require("@gem-sdk/system"),s=require("../../helpers.js"),r=require("./AdaptiveImage.liquid.js"),a=require("./NextImage.liquid.js"),i=require("../common/styles.js"),l=require("../common/classes.js"),g=require("../common/attrs.js"),u=require("../common/helpers.js");exports.default=({style:d,styles:m,setting:n,advanced:c,className:o,pageContext:p,builderAttrs:y,builderProps:q})=>{let C=u.getSettingTranslatedImageAndSeo({setting:n,uid:q?.uid,pageContext:p}),{imageLink:A,isAdaptive:I,enableImageLink:$}=C??{},{enableLazyLoadImage:j}=p??{},{Wrapper:S,urlData:v}=s.getLinkData({defaultWrap:"div",setting:A,enableImageLink:$,isLiquid:!0}),f=t.createStyle(i.getWrapperStyles(m)),L=t.createStyle(i.getImageStyles(m,q)),W=t.createStyle(i.getContainerStyles(d,m)),k=t.createClass(l.getWrapperClasses()),x=t.createClass(l.getImageClasses(o,m)),N=t.createClass(l.getContainerClasses(q?.uid,c?.cssClass,m?.shape)),h=t.createAttr(g.getContainerAttrs(y,q?.uid)),_=g.getLinkWrapperAttrs({urlData:v,imageLink:A,title:C?.title,isLiquid:!0}),b=g.getAdaptiveImageAttrs({styles:m,setting:C,isLiquid:!0}),D=g.getNextImageAttrs({styles:m,setting:C}),M=g.getImageLiquidAttrs({pageContext:p,enableLazyLoadImage:j});return e.template`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),helpers$1=require("../../helpers.js"),AdaptiveImage_liquid=require("./AdaptiveImage.liquid.js"),NextImage_liquid=require("./NextImage.liquid.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),attrs=require("../common/attrs.js"),helpers=require("../common/helpers.js");const Image=({style:e,styles:s,setting:t,advanced:a,className:r,pageContext:l,builderAttrs:i,builderProps:m})=>{let g=helpers.getSettingTranslatedImageAndSeo({setting:t,uid:m?.uid,pageContext:l}),{imageLink:d,isAdaptive:u,enableImageLink:y}=g??{},{enableLazyLoadImage:c}=l??{},{Wrapper:p,urlData:n}=helpers$1.getLinkData({defaultWrap:"div",setting:d,enableImageLink:y,isLiquid:!0}),o=system.createStyle(styles.getWrapperStyles(s)),q=system.createStyle(styles.getImageStyles(s,m)),I=system.createStyle(styles.getContainerStyles(e,s)),A=system.createClass(classes.getWrapperClasses()),$=system.createClass(classes.getImageClasses(r,s)),C=system.createClass(classes.getContainerClasses(m?.uid,a?.cssClass,s?.shape)),v=system.createAttr(attrs.getContainerAttrs(i,m?.uid)),j=attrs.getLinkWrapperAttrs({urlData:n,imageLink:d,title:g?.title,isLiquid:!0}),S=attrs.getAdaptiveImageAttrs({styles:s,setting:g,isLiquid:!0}),h=attrs.getNextImageAttrs({styles:s,setting:g}),f=attrs.getImageLiquidAttrs({pageContext:l,enableLazyLoadImage:c}),x=()=>system.If(u,AdaptiveImage_liquid.default({...f,...S,style:q,className:$}),NextImage_liquid.default({...f,...h,style:q,className:$})),L=()=>x();return core.template`
     <div
       role="presentation"
-      ${{...h}}
-      style="${W}"
-      class="${N}"
+      ${{...v}}
+      style="${I}"
+      class="${C}"
     >
-      <${S}
-        ${_}
-        style="${f}"
-        class="${k}"
+      <${p}
+        ${j}
+        style="${o}"
+        class="${A}"
       >
-        ${t.If(I,r.default({...M,...b,style:L,className:x}),a.default({...M,...D,style:L,className:x}))}
-      </${S}>
+        ${L()}
+      </${p}>
     </div>
-  `};
+  `};exports.default=Image;

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

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/system"),t=require("@gem-sdk/core");exports.default=({src:s,alt:r,style:l,poster:a,reveal:o,loaded:i,loading:u,arStatus:p,aspectRatio:c,modelIsVisible:d,cameraControls:m,dataJsFocusVisible:n,dataShopifyFeature:v="1.12"})=>{let y=e.createAttr({src:s,alt:r,"data-shopify-feature":v,...l,...a?{poster:a}:{},...o?{reveal:o}:{},...i?{loaded:i}:{},...u?{loading:u}:{},...d?{modelIsVisible:d}:{},"ar-status":p,"camera-controls":m,...n?{"data-js-focus-visible":n}:{}}),g=e.createStyle((()=>{let e={desktop:t.getResponsiveValueByScreen(c,"desktop")||"1/1",tablet:t.getResponsiveValueByScreen(c,"tablet")||"1/1",mobile:t.getResponsiveValueByScreen(c,"mobile")||"1/1"};return{...t.makeStyleResponsive("aspect",e)}})()),f=e.createClass({"gp-w-full gp-h-full model-viewer gp-z-[90]":!0});return t.template`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var system=require("@gem-sdk/system"),core=require("@gem-sdk/core");const Model3d=({src:e,alt:t,style:s,poster:r,reveal:l,loaded:o,loading:a,arStatus:c,aspectRatio:d,modelIsVisible:i,cameraControls:u,dataJsFocusVisible:m,dataShopifyFeature:p="1.12"})=>{let y=()=>({"gp-w-full gp-h-full model-viewer gp-z-[90]":!0}),n=()=>{let e={desktop:core.getResponsiveValueByScreen(d,"desktop")||"1/1",tablet:core.getResponsiveValueByScreen(d,"tablet")||"1/1",mobile:core.getResponsiveValueByScreen(d,"mobile")||"1/1"};return{...core.makeStyleResponsive("aspect",e)}},v=()=>({src:e,alt:t,"data-shopify-feature":p,...s,...r?{poster:r}:{},...l?{reveal:l}:{},...o?{loaded:o}:{},...a?{loading:a}:{},...i?{modelIsVisible:i}:{},...c?{"ar-status":c}:{},...u?{"camera-controls":u}:{},...m?{"data-js-focus-visible":m}:{}}),g=system.createAttr(v()),f=system.createStyle(n()),b=system.createClass(y());return core.template`
     <model-viewer
-      ${{...y}}
-      class="${f}"
-      style="${g}">
+      ${{...g}}
+      class="${b}"
+      style="${f}">
     </model-viewer>
-  `};
+  `};exports.default=Model3d;

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

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("next/image"),t=require("@gem-sdk/system"),r=require("../common/classes.js"),a=require("../common/styles.js"),m=require("../common/attrs.js");exports.default=i=>{let{style:l,imgRef:c,setting:u,priority:o,className:g,width:x,height:j,isNotLazyload:n,isDisableAspectStyle:y,enableLazyLoadImage:q=!0}=i,d=t.createStyle({...l,...a.getNextImageStyles({width:x,height:j,setting:u,isDisableAspectStyle:y,isDisableObjectFit:!1})}),N=t.createClass({...r.getNextImageClasses({className:g,hasLazyLoad:!n&&q&&!o})}),b=m.getNextImageReactAttrs(i);return e.jsx(s,{ref:c,...b,style:d,className:N})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),Image=require("next/image"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),attrs=require("../common/attrs.js");const NextImage=e=>{let{style:s,imgRef:t,setting:r,priority:a,className:m,width:l,height:c,isNotLazyload:i,isDisableAspectStyle:u,enableLazyLoadImage:g=!0}=e,x=!i&&g&&!a,o=system.createStyle({...s,...styles.getNextImageStyles({width:l,height:c,setting:r,isDisableAspectStyle:u,isDisableObjectFit:!1})}),y=system.createClass({...classes.getNextImageClasses({className:m,hasLazyLoad:x})}),n=attrs.getNextImageReactAttrs(e);return jsxRuntime.jsx(Image,{ref:t,...n,style:o,className:y})};exports.default=NextImage;

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

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),s=require("@gem-sdk/system"),t=require("../common/classes.js"),r=require("../common/styles.js"),a=require("../common/attrs.js");exports.default=i=>{let{style:m,setting:l,priority:o,className:u,pageContext:c,width:d,height:g,customLazyload:n,isDisableObjectFit:y,isDisableAspectStyle:p,enableLazyLoadImage:q=!0}=i,x=s.createStyle({...m,...r.getNextImageStyles({width:d,height:g,setting:l,isDisableObjectFit:y,isDisableAspectStyle:p})}),j=s.createClass({...t.getNextImageClasses({className:u,hasLazyLoad:!n&&q&&!o,isOptimizePlan:c?.isOptimizePlan})}),$=a.getNextImageLiquidAttrs(i);return e.template`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),attrs=require("../common/attrs.js");const NextImage=e=>{let{style:s,setting:t,priority:r,className:a,pageContext:m,width:l,height:i,customLazyload:c,isDisableObjectFit:o,isDisableAspectStyle:g,enableLazyLoadImage:u=!0}=e,y=!c&&u&&!r,d=system.createStyle({...s,...styles.getNextImageStyles({width:l,height:i,setting:t,isDisableObjectFit:o,isDisableAspectStyle:g})}),n=system.createClass({...classes.getNextImageClasses({className:a,hasLazyLoad:y,isOptimizePlan:m?.isOptimizePlan})}),x=attrs.getNextImageLiquidAttrs(e);return core.template`
     <img
-      ${$}
-      id="${i?.id}"
-      style="${x}"
-      class="${j}"
-    />`};
+      ${x}
+      id="${e?.id}"
+      style="${d}"
+      class="${n}"
+    />`};exports.default=NextImage;

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

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),t=require("@gem-sdk/system");const r="feature-video gp-w-full gp-h-full gp-relative",a="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture";exports.default=({src:s,alt:l,style:c,autoplay:p,controls:i,aspectRatio:u,allowfullscreen:o,frameborder:m="0",allow:d=a,className:y=r})=>{let f=t.createAttr({src:s,alt:l,allow:d,frameborder:m,...c,...p?{autoplay:p}:{},controls:i,allowfullscreen:o}),g=t.createStyle({...e.makeStyleResponsive("aspect",u)}),n=t.createClass({[y]:!0});return e.template`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system");const DEFAULT_CLASS="feature-video gp-w-full gp-h-full gp-relative",DEFAULT_ALLOW="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",Video=({src:e,alt:t,style:r,autoplay:s,controls:a,aspectRatio:c,allowfullscreen:l,frameborder:o="0",allow:i=DEFAULT_ALLOW,className:p=DEFAULT_CLASS})=>{let m=()=>({[p]:!0}),u=()=>({...core.makeStyleResponsive("aspect",c)}),y=()=>({src:e,alt:t,allow:i,frameborder:o,...r,...s?{autoplay:s}:{},...a?{controls:a}:{},...l?{allowfullscreen:l}:{}}),d=system.createAttr(y()),L=system.createStyle(u()),A=system.createClass(m());return core.template`
     <iframe
-      ${{...f}}
-      style="${g}"
-      class="${n}"
+      ${{...d}}
+      style="${L}"
+      class="${A}"
     >
     </iframe>
-  `};
+  `};exports.default=Video;

package/dist/cjs/image/constants.js

@@ -1 +1 @@
-"use strict";exports.PRIORITY_LOAD_ATTRS={loading:"eager",fetchpriority:"high",priority:!0};
+"use strict";const PRIORITY_LOAD_ATTRS={loading:"eager",fetchpriority:"high",priority:!0};exports.PRIORITY_LOAD_ATTRS=PRIORITY_LOAD_ATTRS;

package/dist/cjs/image/index.js

@@ -1 +1 @@
-"use strict";require("react/jsx-runtime"),require("@gem-sdk/core"),require("@gem-sdk/system"),require("./components/AdaptiveImage.js"),require("next/image"),require("react"),require("next/link");var e=require("./settings/Image.js");const r={Image:e.default};exports.imageSetting=r;
+"use strict";require("react/jsx-runtime"),require("@gem-sdk/core"),require("@gem-sdk/system"),require("./components/AdaptiveImage.js"),require("next/image"),require("react"),require("next/link");var Image$1=require("./settings/Image.js");const imageSetting={Image:Image$1.default};exports.imageSetting=imageSetting;

package/dist/cjs/image/next.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("next/dynamic"),r=require("../common/components/Loading.js");require("react/jsx-runtime"),require("react"),require("@gem-sdk/core");const t=e(()=>Promise.resolve().then(function(){return require("./components/Image.js")}),{loading:r.default});exports.default={Image:t};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var dynamic=require("next/dynamic"),Loading=require("../common/components/Loading.js");require("react/jsx-runtime"),require("react"),require("@gem-sdk/core");const Image=dynamic(()=>Promise.resolve().then(function(){return require("./components/Image.js")}),{loading:Loading.default});var image={Image};exports.default=image;

package/dist/cjs/image/settings/Image.js

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./configs/ui-v2.js"),t=require("./configs/settings.js"),s=require("./configs/presets.js");const i={tag:"Image",label:"Image",icon:`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var uiV2=require("./configs/ui-v2.js"),settings=require("./configs/settings.js"),presets=require("./configs/presets.js");const config={tag:"Image",label:"Image",icon:`
   <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M13.3337 14.6666C13.3337 16.1333 12.1337 17.3333 10.667 17.3333C9.20033 17.3333 8.00033 16.1333 8.00033 14.6666C8.00033 13.2 9.20033 12 10.667 12C12.1337 12 13.3337 13.2 13.3337 14.6666ZM27.3741 14.8404C26.9836 14.4499 26.3504 14.4499 25.9599 14.8404L16.667 24.1333L14.0346 21.6062C13.6442 21.2314 13.0267 21.2352 12.6409 21.6145L5.33366 28.8V9.33329H34.667V22.1333L27.3741 14.8404ZM34.667 30.6666H23.2003L18.5337 26L26.667 17.8666L34.667 25.8666V30.6666ZM7.33366 30.6666L13.467 24.6666L19.467 30.6666H7.33366ZM3.66699 6.66663C3.11471 6.66663 2.66699 7.11434 2.66699 7.66663V31.4666V32.3333C2.66699 32.8856 3.11471 33.3333 3.66699 33.3333H25.867H36.3337C36.8859 33.3333 37.3337 32.8856 37.3337 32.3333V30.6666V28.5333V24.8V7.66662C37.3337 7.11434 36.8859 6.66663 36.3337 6.66663H3.66699Z" fill="currentColor"/>
   </svg>
-  `,settings:t.ImageSettings,ui:[],uiV2:e.SettingUIV2,presets:s.ImagePreset,rootOverride:{advanced:{"spacing-setting":{desktop:{margin:{bottom:0}}}}}};exports.default=i;
+  `,settings:settings.ImageSettings,ui:[],uiV2:uiV2.SettingUIV2,presets:presets.ImagePreset,rootOverride:{advanced:{"spacing-setting":{desktop:{margin:{bottom:0}}}}}};exports.default=config;

package/dist/cjs/image/settings/configs/presets.js

@@ -1,4 +1,4 @@
-"use strict";const e=[{id:"image",name:"Image",icon:{desktop:`
+"use strict";const ImagePreset=[{id:"image",name:"Image",icon:{desktop:`
           <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
           <rect width="96" height="48" rx="3" fill="#424242"/>
           <circle cx="37" cy="17" r="3" fill="#D6D6D6"/>
@@ -22,4 +22,4 @@
         <ellipse cx="20.4375" cy="22.9688" rx="2.0625" ry="1.96875" fill="#F9F9F9"/>
         <path d="M17.2887 32.9997L20.5342 29.1816C20.6441 29.052 20.7799 28.9473 20.9327 28.8741C21.0856 28.8009 21.2521 28.761 21.4213 28.7568C21.5905 28.7527 21.7587 28.7845 21.915 28.8501C22.0712 28.9158 22.2118 29.0138 22.3278 29.1378L23.8454 30.758L29.7777 23.6225C29.8938 23.4827 30.0398 23.371 30.2048 23.2958C30.3697 23.2205 30.5495 23.1836 30.7306 23.1878C30.9117 23.192 31.0895 23.2372 31.2509 23.3201C31.4122 23.4029 31.5529 23.5213 31.6625 23.6663L38.7549 33.0467C38.8905 33.2266 38.9735 33.4409 38.9947 33.6656C39.0158 33.8902 38.9741 34.1164 38.8744 34.3186C38.7747 34.5207 38.6209 34.6909 38.4302 34.81C38.2396 34.9291 38.0197 34.9923 37.7952 34.9926L18.2057 35C17.9753 34.9999 17.7497 34.9334 17.5557 34.8085C17.3616 34.6835 17.2072 34.5053 17.1108 34.2948C17.0143 34.0844 16.9798 33.8506 17.0113 33.6211C17.0429 33.3915 17.1391 33.1759 17.2887 32.9997Z" fill="#F9F9F9"/>
         </svg>
-        `},components:[{tag:"Image",settings:{imageStyle:"circle",imageLink:{type:"go-to-sales-page"}},styles:{shape:{desktop:{shape:"square",shapeValue:"1/1",width:"80px",shapeLinked:!0}},borderRadius:{btrr:"999999px",bblr:"999999px",bbrr:"999999px",btlr:"999999px",radiusType:"circle"},wrapperBorder:{borderType:"none",border:"none",width:"1px 1px 1px 1px",position:"all",borderWidth:"1px",color:"#000000",isCustom:!0}},advanced:{"spacing-setting":{desktop:{margin:{bottom:"var(--g-s-l)"}}},editorData:{cssplaceholder:".{{rootClassName}} {\n\n}\n.{{rootClassName}} > figure > img {\n\n}"}}}],rootOverride:{styles:{shape:{desktop:{shape:"square",shapeValue:"1/1",width:"80px",shapeLinked:!0}},borderRadius:{btrr:"999999px",bblr:"999999px",bbrr:"999999px",btlr:"999999px",radiusType:"circle"}},advanced:{"spacing-setting":{desktop:{margin:{bottom:0}}}}}}];exports.ImagePreset=e;
+        `},components:[{tag:"Image",settings:{imageStyle:"circle",imageLink:{type:"go-to-sales-page"}},styles:{shape:{desktop:{shape:"square",shapeValue:"1/1",width:"80px",shapeLinked:!0}},borderRadius:{btrr:"999999px",bblr:"999999px",bbrr:"999999px",btlr:"999999px",radiusType:"circle"},wrapperBorder:{borderType:"none",border:"none",width:"1px 1px 1px 1px",position:"all",borderWidth:"1px",color:"#000000",isCustom:!0}},advanced:{"spacing-setting":{desktop:{margin:{bottom:"var(--g-s-l)"}}},editorData:{cssplaceholder:".{{rootClassName}} {\n\n}\n.{{rootClassName}} > figure > img {\n\n}"}}}],rootOverride:{styles:{shape:{desktop:{shape:"square",shapeValue:"1/1",width:"80px",shapeLinked:!0}},borderRadius:{btrr:"999999px",bblr:"999999px",bbrr:"999999px",btlr:"999999px",radiusType:"circle"}},advanced:{"spacing-setting":{desktop:{margin:{bottom:0}}}}}}];exports.ImagePreset=ImagePreset;

package/dist/cjs/image/settings/configs/settings.js

@@ -1 +1 @@
-"use strict";exports.ImageSettings=[{id:"setting",controls:[{id:"imageStyle",label:"Style",type:"layout-selector",iconViewBox:"0 0 72 72",enableItemBackground:!0,popoverLabel:"Style",itemPerRow:2,itemSpacing:"large",options:[{label:"Rectangle",value:"rectangle",iconName:"gp-image-rectangle-style"},{label:"Circle",value:"circle",iconName:"gp-image-circle-style"}],default:"rectangle"},{id:"image-info",label:"Image",type:"group",controls:[{id:"image",type:"image-select",label:"Pick Image",default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_demo.jpg",width:2237,height:1678}},{id:"srcSet",type:"image-select",hide:!0,dynamicSource:!0,devices:{desktop:{default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_demo.jpg",width:2237,height:1678}}}},{id:"isAdaptive",type:"toggle",label:"Adaptive",default:!0,hideOnMode:{mobileOnly:!0}}]},{id:"enableImageLink",type:"toggle",default:!1,compoDefaultValue:!1},{id:"imageLink",type:"pick-link",label:"Pick Link",default:{type:"open-page",link:"",target:"_self"},hiddenOptions:{"stay-on-page":!0}},{id:"seo",type:"group",label:"SEO",controls:[{id:"alt",label:"Alt Text",type:"textarea",minHeight:56,autoHeight:!0,placeholder:"E.g: Classic white crewneck t-shirt with minimalist design",default:void 0},{id:"title",label:"Image title",info:"Show title when hover to image",type:"textarea",minHeight:56,autoHeight:!0,placeholder:"E.g: White t-shirt",default:void 0}]},{id:"optimize",type:"group",label:"Optimize",hiddenWithGemPages:!0,controls:[{id:"qualityType",type:"select",label:"Quality",devices:{desktop:{default:"high"}},options:[{title:"Finest",value:"finest"},{title:"High",value:"high"},{title:"Medium",value:"medium"},{title:"Custom",value:"custom",tooltip:"You can choose it for advanced page loading optimization."}]},{id:"qualityPercent",type:"input:slider",label:"",units:["%"],showDefaultUnit:!0,min:100,max:400,step:50,useOnlyUnitInit:!0,isNumber:!0,devices:{desktop:{default:100}}},{id:"priority",type:"toggle",label:"Preload",default:!1}]},{id:"isNotLazyload",type:"toggle",default:!1}]},{id:"style",controls:[{id:"shape",type:"size-setting",label:"",devices:{desktop:{default:{shape:"original",shapeLinked:!0,width:"1200px"}}},settingConfig:{width:{displayOptions:["full"]},height:{displayOptions:["full"],units:["px","%"]}},hiddenSettings:["padding","gap"]},{id:"objectFit",type:"option:illustration",enableTooltip:!0,label:"Image scale",options:[{label:"Fill image",value:"cover",type:"image",svgName:"gp-image-cover"},{label:"Fit image",value:"contain",type:"image",svgName:"gp-image-contain"}],devices:{desktop:{default:"cover"}}},{id:"align",label:"Align",type:"option:value",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"center"}}},{id:"behavior-state",type:"behavior-state",label:"Behavior State",controls:[{id:"borderImg",type:"border",label:"Border",default:{normal:{borderType:"none",border:"none",width:"1px 1px 1px 1px",borderWidth:"1px",color:"#000000",isCustom:!1}},state:{hover:!0,normal:!0}},{id:"opacity",label:"Overlay Opacity",type:"input:slider",min:0,max:100,step:1,units:["%"],useOnlyUnitInit:!0,default:{normal:0},state:{normal:!0,hover:!0}},{id:"opacityColor",label:"Overlay Color",type:"colorpicker",default:{normal:"#242424"},state:{normal:!0,hover:!0}},{id:"hasBoxShadowImg",type:"toggle",label:"Enable Image Shadow",default:{normal:!1},state:{normal:!0,hover:!0}},{id:"boxShadowImg",type:"boxShadow",label:"Image Shadow",hideOnState:{normal:!0,hover:!0},default:{normal:{type:"shadow-1",distance:"4px",blur:"4px",spread:"0px",color:"rgba(18, 18, 18, 0.2)",angle:45}},state:{normal:!0,hover:!0}}]},{id:"wrapperBorder",type:"border",label:"Border",default:{borderType:"none",border:"none",width:"1px 1px 1px 1px",position:"all",borderWidth:"1px",color:"#000000",isCustom:!0}},{id:"borderRadius",type:"radius-preset",label:"Corner",default:{radiusType:"none"},compoDefaultValue:{bblr:"20px",btrr:"20px",bbrr:"20px",btlr:"20px",radiusType:"rounded"}},{id:"hasActiveShadow",type:"toggle",label:"Enable Button Shadow",default:!1},{id:"shadow",type:"shadow-v2",label:"Button Shadow",default:{type:"none",distance:"10px",blur:"12px",spread:"10px",color:"rgba(18, 18, 18, 0.77)",angle:40}}]}];
+"use strict";const ImageSettings=[{id:"setting",controls:[{id:"imageStyle",label:"Style",type:"layout-selector",iconViewBox:"0 0 72 72",enableItemBackground:!0,popoverLabel:"Style",itemPerRow:2,itemSpacing:"large",options:[{label:"Rectangle",value:"rectangle",iconName:"gp-image-rectangle-style"},{label:"Circle",value:"circle",iconName:"gp-image-circle-style"}],default:"rectangle"},{id:"image-info",label:"Image",type:"group",controls:[{id:"image",type:"image-select",label:"Pick Image",default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_demo.jpg",width:2237,height:1678}},{id:"srcSet",type:"image-select",hide:!0,dynamicSource:!0,devices:{desktop:{default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_demo.jpg",width:2237,height:1678}}}},{id:"isAdaptive",type:"toggle",label:"Adaptive",default:!0,hideOnMode:{mobileOnly:!0}}]},{id:"enableImageLink",type:"toggle",default:!1,compoDefaultValue:!1},{id:"imageLink",type:"pick-link",label:"Pick Link",default:{type:"open-page",link:"",target:"_self"},hiddenOptions:{"stay-on-page":!0}},{id:"seo",type:"group",label:"SEO",controls:[{id:"alt",label:"Alt Text",type:"textarea",minHeight:56,autoHeight:!0,placeholder:"E.g: Classic white crewneck t-shirt with minimalist design",default:void 0},{id:"title",label:"Image title",info:"Show title when hover to image",type:"textarea",minHeight:56,autoHeight:!0,placeholder:"E.g: White t-shirt",default:void 0}]},{id:"optimize",type:"group",label:"Optimize",hiddenWithGemPages:!0,controls:[{id:"qualityType",type:"select",label:"Quality",devices:{desktop:{default:"high"}},options:[{title:"Finest",value:"finest"},{title:"High",value:"high"},{title:"Medium",value:"medium"},{title:"Custom",value:"custom",tooltip:"You can choose it for advanced page loading optimization."}]},{id:"qualityPercent",type:"input:slider",label:"",units:["%"],showDefaultUnit:!0,min:100,max:400,step:50,useOnlyUnitInit:!0,isNumber:!0,devices:{desktop:{default:100}}},{id:"priority",type:"toggle",label:"Preload",default:!1}]},{id:"isNotLazyload",type:"toggle",default:!1}]},{id:"style",controls:[{id:"shape",type:"size-setting",label:"",devices:{desktop:{default:{shape:"original",shapeLinked:!0,width:"1200px"}}},settingConfig:{width:{displayOptions:["full"]},height:{displayOptions:["full"],units:["px","%"]}},hiddenSettings:["padding","gap"]},{id:"objectFit",type:"option:illustration",enableTooltip:!0,label:"Image scale",options:[{label:"Fill image",value:"cover",type:"image",svgName:"gp-image-cover"},{label:"Fit image",value:"contain",type:"image",svgName:"gp-image-contain"}],devices:{desktop:{default:"cover"}}},{id:"align",label:"Align",type:"option:value",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"center"}}},{id:"behavior-state",type:"behavior-state",label:"Behavior State",controls:[{id:"borderImg",type:"border",label:"Border",default:{normal:{borderType:"none",border:"none",width:"1px 1px 1px 1px",borderWidth:"1px",color:"#000000",isCustom:!1}},state:{hover:!0,normal:!0}},{id:"opacity",label:"Overlay Opacity",type:"input:slider",min:0,max:100,step:1,units:["%"],useOnlyUnitInit:!0,default:{normal:0},state:{normal:!0,hover:!0}},{id:"opacityColor",label:"Overlay Color",type:"colorpicker",default:{normal:"#242424"},state:{normal:!0,hover:!0}},{id:"hasBoxShadowImg",type:"toggle",label:"Enable Image Shadow",default:{normal:!1},state:{normal:!0,hover:!0}},{id:"boxShadowImg",type:"boxShadow",label:"Image Shadow",hideOnState:{normal:!0,hover:!0},default:{normal:{type:"shadow-1",distance:"4px",blur:"4px",spread:"0px",color:"rgba(18, 18, 18, 0.2)",angle:45}},state:{normal:!0,hover:!0}}]},{id:"wrapperBorder",type:"border",label:"Border",default:{borderType:"none",border:"none",width:"1px 1px 1px 1px",position:"all",borderWidth:"1px",color:"#000000",isCustom:!0}},{id:"borderRadius",type:"radius-preset",label:"Corner",default:{radiusType:"none"},compoDefaultValue:{bblr:"20px",btrr:"20px",bbrr:"20px",btlr:"20px",radiusType:"rounded"}},{id:"hasActiveShadow",type:"toggle",label:"Enable Button Shadow",default:!1},{id:"shadow",type:"shadow-v2",label:"Button Shadow",default:{type:"none",distance:"10px",blur:"12px",spread:"10px",color:"rgba(18, 18, 18, 0.77)",angle:40}}]}];exports.ImageSettings=ImageSettings;

package/dist/cjs/image/settings/configs/translate.js

@@ -1 +1 @@
-"use strict";exports.Image={srcSet:{id:"srcSet",fields:["src"]},alt:{id:"alt"},title:{id:"title"}};
+"use strict";const Image={srcSet:{id:"srcSet",fields:["src"]},alt:{id:"alt"},title:{id:"title"}};exports.Image=Image;

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

@@ -1 +1 @@
-"use strict";exports.SettingUIV2=[{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",controls:[{setting:{id:"shape"},layout:"vertical"}]},{label:"Shape",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",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",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",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"}}]}];
+"use strict";const SettingUIV2=[{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",controls:[{setting:{id:"shape"},layout:"vertical"}]},{label:"Shape",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",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",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",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"}}]}];exports.SettingUIV2=SettingUIV2;

package/dist/cjs/image-comparison/common/attrs.js

@@ -1 +1 @@
-"use strict";const t=({src:t,title:e=""})=>({src:t,title:e});exports.getBaseImageAttrs=t,exports.getImageLiquidAttrs=({id:e,src:r,title:s="",priority:a=!1,isDisableObjectFit:i=!1,isDisableAspectStyle:g=!1})=>({...t({src:r,title:s}),id:e,priority:a,isDisableObjectFit:i,isDisableAspectStyle:g}),exports.getImagePlaceholderAttrs=({width:t=0,height:e=0})=>({src:"",width:t,height:e,"data-testid":"temp-image"}),exports.getImageReactAttrs=({src:e,testId:r,width:s=0,height:a=0,title:i="",priority:g=!1})=>{let o=t({src:e,title:i});return{...o,...g?{fetchpriority:"high",loading:"eager"}:{loading:"lazy",fetchpriority:"low"},width:s,height:a,"data-testid":r,"base-src":g?"":o.src}},exports.getLabelAttrs=({label:t="",positionId:e="left",componentUid:r})=>({label:t,positionId:e,uid:r}),exports.getLabelLiquidAttrs=({pageContext:t,translateLabel:e})=>({pageContext:t,translateLabel:e});
+"use strict";const getLabelAttrs=({label:t="",positionId:e="left",componentUid:a})=>({label:t,positionId:e,uid:a}),getLabelLiquidAttrs=({pageContext:t,translateLabel:e})=>({pageContext:t,translateLabel:e}),getImagePlaceholderAttrs=({width:t=0,height:e=0})=>({src:"",width:t,height:e,"data-testid":"temp-image"}),getBaseImageAttrs=({src:t,title:e=""})=>({src:t,title:e}),getImageLiquidAttrs=({id:t,src:e,title:a="",priority:r=!1,isDisableObjectFit:s=!1,isDisableAspectStyle:g=!1})=>({...getBaseImageAttrs({src:e,title:a}),id:t,priority:r,isDisableObjectFit:s,isDisableAspectStyle:g}),getImageReactAttrs=({src:t,testId:e,width:a=0,height:r=0,title:s="",priority:g=!1})=>{let i=g?{fetchpriority:"high",loading:"eager"}:{loading:"lazy",fetchpriority:"low"},A=getBaseImageAttrs({src:t,title:s});return{...A,...i,width:a,height:r,"data-testid":e,"base-src":g?"":A.src}};exports.getBaseImageAttrs=getBaseImageAttrs,exports.getImageLiquidAttrs=getImageLiquidAttrs,exports.getImagePlaceholderAttrs=getImagePlaceholderAttrs,exports.getImageReactAttrs=getImageReactAttrs,exports.getLabelAttrs=getLabelAttrs,exports.getLabelLiquidAttrs=getLabelLiquidAttrs;

package/dist/cjs/image-comparison/common/classes.js

@@ -1 +1 @@
-"use strict";var e=require("@gem-sdk/core");exports.getImageComparisonWrapperClasses=()=>({"gp-flex gp-w-full gp-overflow-hidden":!0}),exports.getImageComparisonWrapperStyles=()=>({"border-radius":"inherit"}),exports.getLabelClasses=p=>{let s=e.composeTypographyClassName(p?.typo);return{[s]:!0,"gp-absolute gp-box-border gp-rounded-[4px] gp-bg-[rgba(0,0,0,0.60)] gp-px-2 gp-py-1":!0}},exports.getLabelContainerClasses=()=>({"gp-absolute gp-top-0 gp-h-full gp-w-full":!0}),exports.getOuterWrapperClasses=e=>({"gp-w-full gp-flex":!0,...e&&{cssClass:!0}});
+"use strict";var core=require("@gem-sdk/core");const getOuterWrapperClasses=e=>({"gp-w-full gp-flex":!0,...e&&{cssClass:!0}}),getLabelClasses=e=>{let s=core.composeTypographyClassName(e?.typo);return{[s]:!0,"gp-absolute gp-box-border gp-rounded-[4px] gp-bg-[rgba(0,0,0,0.60)] gp-px-2 gp-py-1":!0}},getLabelContainerClasses=()=>({"gp-absolute gp-top-0 gp-h-full gp-w-full":!0}),getImageComparisonWrapperClasses=()=>({"gp-flex gp-w-full gp-overflow-hidden":!0}),getImageComparisonWrapperStyles=()=>({"border-radius":"inherit"});exports.getImageComparisonWrapperClasses=getImageComparisonWrapperClasses,exports.getImageComparisonWrapperStyles=getImageComparisonWrapperStyles,exports.getLabelClasses=getLabelClasses,exports.getLabelContainerClasses=getLabelContainerClasses,exports.getOuterWrapperClasses=getOuterWrapperClasses;

package/dist/cjs/image-comparison/common/helpers.js

@@ -1 +1 @@
-"use strict";var t=require("@gem-sdk/core"),e=require("../../image/common/helpers.js"),o=require("../../helpers.js"),a=require("../settings/configs/translate.js");const i=({styles:t,leftImage:e,rightImage:o})=>{let a=(e?.width??0)/(e?.height??1),i=(o?.width??0)/(o?.height??1),s=a<=i?`${e?.width??0}/${e?.height??1}`:`${o?.width??0}/${o?.height??1}`,l=r({aspect:t?.aspectRatio,auto:a<=i?e:o,custom:t?.customAspectRadio,defaultRatio:s});return{defaultRatio:s,responsiveAspectRatio:l}},r=({aspect:t,auto:o,custom:a,defaultRatio:i})=>({desktop:e.composeAspectRatio({device:"desktop",aspect:t,auto:o,custom:a})??i,tablet:e.composeAspectRatio({device:"tablet",aspect:t,auto:o,custom:a}),mobile:e.composeAspectRatio({device:"mobile",aspect:t,auto:o,custom:a})}),s=({input:e,isHorizontal:o})=>{let{device:a,positionHoz:i,positionVer:r}=e,s=o?t.getResponsiveValueByScreen(i,a,"hoz-center"):t.getResponsiveValueByScreen(r,a,"ver-center");return({"hoz-center":{topLeft:"50%",bottomRight:"auto"},top:{topLeft:"8px",bottomRight:"auto"},bottom:{topLeft:"auto",bottomRight:"8px"},"ver-center":{topLeft:"50%",bottomRight:"auto"},left:{topLeft:"8px",bottomRight:"auto"},right:{topLeft:"auto",bottomRight:"8px"}})[s]??{topLeft:"50%",bottomRight:"auto"}},l=t=>{let{isHorizontal:e,containerWidth:o,containerHeight:a,sliderPosition:i,type:r}=t,s=e?o*i:a*i;return"left"===r?{clip:e?`rect(auto, ${s}px, auto, auto)`:`rect(auto, auto, ${s}px, auto)`}:{clip:e?`rect(auto, auto, auto, ${s}px)`:`rect(${s}px, auto, auto, auto)`}},n=t=>{let{isHorizontal:e,containerWidth:o,containerHeight:a,sliderPosition:i,handleSize:r}=t;return{[e?"top":"left"]:0,[e?"left":"top"]:`${(e?o*i:a*i)-r/2}px`}},p=t=>({...l(t)});exports.FLEX_ALIGN={left:"start",center:"center",right:"end",justify:"start"},exports.composeLabelPosition=s,exports.composeResponsiveAspectRatio=r,exports.generateTranslateByDevices=({isHorizontal:t,labelPositionHoz:e,labelPositionVer:o})=>{let a=t?e:o,i={desktop:a?.desktop??"hoz-center",tablet:a?.tablet??a?.desktop??"hoz-center",mobile:a?.mobile??a?.tablet??a?.desktop??"hoz-center"},r={desktop:"translateX(0) translateY(0)",tablet:"translateX(0) translateY(0)",mobile:"translateX(0) translateY(0)"};for(let e in i){let o=i?.[e];o.includes("center")?r[e]=t?"translateX(0) translateY(-50%)":"translateX(-50%) translateY(0)":r[e]="translateX(0) translateY(0)"}return r},exports.getAspectRatioData=i,exports.getData=t=>{let{handle:o=null,hover:a=!1,handleSize:r=40,leftImageAlt:s="",leftImageTitle:l="",leftImageCss:n={},leftImageLabel:p=null,rightImageAlt:c="",rightImageTitle:g="",rightImageCss:u={},rightImageLabel:m=null,sliderLineWidth:d=2,sliderLineColor:h="#ffffff",sliderPositionPercentage:f=.5,vertical:b=!1,componentUid:L="",styles:R={},leftImage:x,rightImage:S,enableLabel:I=!1,qualityType:v,qualityPercent:y}=t,$=(x?.width??0)<(S?.width??0)?{...x}:{...S},{responsiveAspectRatio:C,defaultRatio:k}=i({leftImage:x,rightImage:S,styles:R});return{styles:R,handle:o,hover:a,handleSize:r,leftImageAlt:s,leftImageTitle:l,leftImageCss:n,leftImageLabel:p,rightImageAlt:c,rightImageTitle:g,rightImageCss:u,rightImageLabel:m,sliderLineWidth:d,sliderLineColor:h,sliderPositionPercentage:f,vertical:b,componentUid:L,tempImage:$,aspectRatio:C,defaultRatio:k,isHorizontal:!b,hasLeftLabel:I&&!!p,hasRightLabel:I&&!!m,qualityType:v,qualityPercent:y,getLeftImageSrc:t=>{let{isLiquid:o}=t??{};return o?e.getImageSrc(x):x?.src??""},getRightImageSrc:t=>{let{isLiquid:o}=t??{};return o?e.getImageSrc(S):S?.src??""}}},exports.getImageClipStyle=l,exports.getLabelContainerStyles=p,exports.getLabelPosition=({position:t,labelPositionHoz:e,labelPositionVer:o,isHorizontal:a})=>({desktop:s({input:{device:"desktop",positionHoz:e,positionVer:o},isHorizontal:a})?.[t??"topLeft"],tablet:s({input:{device:"tablet",positionHoz:e,positionVer:o},isHorizontal:a})?.[t??"topLeft"],mobile:s({input:{device:"mobile",positionHoz:e,positionVer:o},isHorizontal:a})?.[t??"topLeft"]}),exports.getReactStyles=t=>({sliderPosition:n(t),leftImageClip:l({...t,type:"left"}),rightImageClip:l({...t,type:"right"}),leftLabelContainer:p({...t,type:"left"}),rightLabelContainer:p({...t,type:"right"})}),exports.getSettingTranslatedImageComparisonAndSeo=({setting:e,uid:i,pageContext:r})=>{if(!e)return;let s=t.cloneDeep(e);for(let t of["Left","Right"]){let e=`image${t}`,l=s[e];if(l?.src){let t=o.getDynamicSourceLocales({val:l.src,uid:i,settingId:a.ImageComparison?.[e]?.id?`${a.ImageComparison?.[e]?.id}_src`:"",pageContext:r});s[e].src=String(t)}let n=`alt${t}`,p=o.getDynamicSourceLocales({val:s[n],uid:i,settingId:o.createSettingId({id:a.ImageComparison?.[n]?.id}),pageContext:r});s[n]=String(p);let c=`title${t}`,g=o.getDynamicSourceLocales({val:s[c],uid:i,settingId:o.createSettingId({id:a.ImageComparison?.[c]?.id}),pageContext:r});s[c]=String(g)}return s},exports.getSliderPositionPercentage=t=>{let e="string"==typeof t?parseInt(t??0):t;return(e??50)/100},exports.getSliderPositionStyle=n;
+"use strict";var core=require("@gem-sdk/core"),helpers$1=require("../../image/common/helpers.js"),helpers=require("../../helpers.js"),translate=require("../settings/configs/translate.js");const getAspectRatioData=({styles:e,leftImage:t,rightImage:o})=>{let a=(t?.width??0)/(t?.height??1),i=(o?.width??0)/(o?.height??1),s=a<=i?`${t?.width??0}/${t?.height??1}`:`${o?.width??0}/${o?.height??1}`,r=a<=i?t:o,l=composeResponsiveAspectRatio({aspect:e?.aspectRatio,auto:r,custom:e?.customAspectRadio,defaultRatio:s});return{defaultRatio:s,responsiveAspectRatio:l}},composeResponsiveAspectRatio=({aspect:e,auto:t,custom:o,defaultRatio:a})=>({desktop:helpers$1.composeAspectRatio({device:"desktop",aspect:e,auto:t,custom:o})??a,tablet:helpers$1.composeAspectRatio({device:"tablet",aspect:e,auto:t,custom:o}),mobile:helpers$1.composeAspectRatio({device:"mobile",aspect:e,auto:t,custom:o})}),composeLabelPosition=({input:e,isHorizontal:t})=>{let{device:o,positionHoz:a,positionVer:i}=e,s=t?core.getResponsiveValueByScreen(a,o,"hoz-center"):core.getResponsiveValueByScreen(i,o,"ver-center"),r={topLeft:"50%",bottomRight:"auto"};return({"hoz-center":{topLeft:"50%",bottomRight:"auto"},top:{topLeft:"8px",bottomRight:"auto"},bottom:{topLeft:"auto",bottomRight:"8px"},"ver-center":{topLeft:"50%",bottomRight:"auto"},left:{topLeft:"8px",bottomRight:"auto"},right:{topLeft:"auto",bottomRight:"8px"}})[s]??r},getLabelPosition=({position:e,labelPositionHoz:t,labelPositionVer:o,isHorizontal:a})=>({desktop:composeLabelPosition({input:{device:"desktop",positionHoz:t,positionVer:o},isHorizontal:a})?.[e??"topLeft"],tablet:composeLabelPosition({input:{device:"tablet",positionHoz:t,positionVer:o},isHorizontal:a})?.[e??"topLeft"],mobile:composeLabelPosition({input:{device:"mobile",positionHoz:t,positionVer:o},isHorizontal:a})?.[e??"topLeft"]}),generateTranslateByDevices=({isHorizontal:e,labelPositionHoz:t,labelPositionVer:o})=>{let a=e?t:o,i={desktop:a?.desktop??"hoz-center",tablet:a?.tablet??a?.desktop??"hoz-center",mobile:a?.mobile??a?.tablet??a?.desktop??"hoz-center"},s={desktop:"translateX(0) translateY(0)",tablet:"translateX(0) translateY(0)",mobile:"translateX(0) translateY(0)"};for(let t in i){let o=i?.[t];o.includes("center")?s[t]=e?"translateX(0) translateY(-50%)":"translateX(-50%) translateY(0)":s[t]="translateX(0) translateY(0)"}return s},getSliderPositionPercentage=e=>{let t="string"==typeof e?parseInt(e??0):e;return(t??50)/100},FLEX_ALIGN={left:"start",center:"center",right:"end",justify:"start"},getData=e=>{let{handle:t=null,hover:o=!1,handleSize:a=40,leftImageAlt:i="",leftImageTitle:s="",leftImageCss:r={},leftImageLabel:l=null,rightImageAlt:n="",rightImageTitle:p="",rightImageCss:g={},rightImageLabel:c=null,sliderLineWidth:m=2,sliderLineColor:u="#ffffff",sliderPositionPercentage:d=.5,vertical:h=!1,componentUid:S="",styles:b={},leftImage:L,rightImage:f,enableLabel:y=!1,qualityType:R,qualityPercent:I}=e,v=!h,x=y&&!!l,C=y&&!!c,P=(L?.width??0)<(f?.width??0)?{...L}:{...f},A=e=>{let{isLiquid:t}=e??{};return t?helpers$1.getImageSrc(L):L?.src??""},$=e=>{let{isLiquid:t}=e??{};return t?helpers$1.getImageSrc(f):f?.src??""},{responsiveAspectRatio:D,defaultRatio:k}=getAspectRatioData({leftImage:L,rightImage:f,styles:b});return{styles:b,handle:t,hover:o,handleSize:a,leftImageAlt:i,leftImageTitle:s,leftImageCss:r,leftImageLabel:l,rightImageAlt:n,rightImageTitle:p,rightImageCss:g,rightImageLabel:c,sliderLineWidth:m,sliderLineColor:u,sliderPositionPercentage:d,vertical:h,componentUid:S,tempImage:P,aspectRatio:D,defaultRatio:k,isHorizontal:v,hasLeftLabel:x,hasRightLabel:C,qualityType:R,qualityPercent:I,getLeftImageSrc:A,getRightImageSrc:$}},getImageClipStyle=e=>{let{isHorizontal:t,containerWidth:o,containerHeight:a,sliderPosition:i,type:s}=e,r=t?o*i:a*i;return"left"===s?{clip:t?`rect(auto, ${r}px, auto, auto)`:`rect(auto, auto, ${r}px, auto)`}:{clip:t?`rect(auto, auto, auto, ${r}px)`:`rect(${r}px, auto, auto, auto)`}},getSliderPositionStyle=e=>{let{isHorizontal:t,containerWidth:o,containerHeight:a,sliderPosition:i,handleSize:s}=e,r=t?o*i:a*i,l=s/2;return{[t?"top":"left"]:0,[t?"left":"top"]:`${r-l}px`}},getLabelContainerStyles=e=>({...getImageClipStyle(e)}),getReactStyles=e=>({sliderPosition:getSliderPositionStyle(e),leftImageClip:getImageClipStyle({...e,type:"left"}),rightImageClip:getImageClipStyle({...e,type:"right"}),leftLabelContainer:getLabelContainerStyles({...e,type:"left"}),rightLabelContainer:getLabelContainerStyles({...e,type:"right"})}),getSettingTranslatedImageComparisonAndSeo=({setting:e,uid:t,pageContext:o})=>{if(!e)return;let a=core.cloneDeep(e);for(let e of["Left","Right"]){let i=`image${e}`,s=a[i];if(s?.src){let e=helpers.getDynamicSourceLocales({val:s.src,uid:t,settingId:translate.ImageComparison?.[i]?.id?`${translate.ImageComparison?.[i]?.id}_src`:"",pageContext:o});a[i].src=String(e)}let r=`alt${e}`,l=helpers.getDynamicSourceLocales({val:a[r],uid:t,settingId:helpers.createSettingId({id:translate.ImageComparison?.[r]?.id}),pageContext:o});a[r]=String(l);let n=`title${e}`,p=helpers.getDynamicSourceLocales({val:a[n],uid:t,settingId:helpers.createSettingId({id:translate.ImageComparison?.[n]?.id}),pageContext:o});a[n]=String(p)}return a};exports.FLEX_ALIGN=FLEX_ALIGN,exports.composeLabelPosition=composeLabelPosition,exports.composeResponsiveAspectRatio=composeResponsiveAspectRatio,exports.generateTranslateByDevices=generateTranslateByDevices,exports.getAspectRatioData=getAspectRatioData,exports.getData=getData,exports.getImageClipStyle=getImageClipStyle,exports.getLabelContainerStyles=getLabelContainerStyles,exports.getLabelPosition=getLabelPosition,exports.getReactStyles=getReactStyles,exports.getSettingTranslatedImageComparisonAndSeo=getSettingTranslatedImageComparisonAndSeo,exports.getSliderPositionPercentage=getSliderPositionPercentage,exports.getSliderPositionStyle=getSliderPositionStyle;

package/dist/cjs/image-comparison/common/styles.js

@@ -1,20 +1,20 @@
-"use strict";var e=require("@gem-sdk/core"),t=require("./helpers.js");const o=(t,o)=>{let l=`
-    #image-comparison-left-label-${o} div, #image-comparison-right-label-${o} div {
-      ${e.composeBorderCss(t?.labelBorder?.desktop)}
-      ${e.composeCornerCss(t?.labelRounded?.desktop)}
+"use strict";var core=require("@gem-sdk/core"),helpers=require("./helpers.js");const getWrapperWidth=({width:e,leftImageWidth:t=0,rightImageWidth:o=0})=>{let l=core.makeStyleResponsive("w",{desktop:e?.desktop??"0",tablet:e?.tablet??e?.desktop??"0",mobile:e?.mobile??e?.tablet??e?.desktop??"0"});for(let e in l)l[e]="undefinedpx"!==l[e]&&l[e]?l[e]:`${Math.min(t,o)||900}px`;return l},getContainerStyles=({aspectRatio:e,builderData:t,allImagesLoaded:o=!0})=>({height:"auto",overflow:"hidden",position:"relative","box-sizing":"border-box",display:o?"block":"none",...core.makeStyleResponsive("aspect",e),...core.getCornerCSSFromGlobal(t?.advanced?.rounded)}),getOuterWrapperStyles=e=>{let t={desktop:helpers.FLEX_ALIGN[e?.align?.desktop??"left"],tablet:helpers.FLEX_ALIGN[e?.align?.tablet??e?.align?.desktop??"left"],mobile:helpers.FLEX_ALIGN[e?.align?.mobile??e?.align?.tablet??e?.align?.desktop??"left"]};return{...core.makeStyleResponsive("jc",t)}},getLabelStyles=({type:e,styles:t,isHorizontal:o})=>{let l=o?{["left"===e?"left":"right"]:"8px"}:{["left"===e?"top":"bottom"]:"8px"},r=helpers.generateTranslateByDevices({isHorizontal:o,labelPositionHoz:t?.labelPositionHoz,labelPositionVer:t?.labelPositionVer}),s=e=>helpers.getLabelPosition({position:e,isHorizontal:o,labelPositionHoz:t?.labelPositionHoz,labelPositionVer:t?.labelPositionVer});return core.makeStyleResponsive(o?"top":"left",s("topLeft")),{opacity:1,...l,...core.composeBorderResponsive(t?.labelBorder),...core.composeTypographyStyle(t?.typo),...core.makeStyleResponsive("t",r),...core.getResponsiveStylePadding(t?.labelPadding),...core.makeStyleResponsive(o?"top":"left",s("topLeft")),...core.makeStyleResponsive(o?"bottom":"right",s("bottomRight")),...core.getResponsiveStyleShadowWithoutState(t?.labelShadow,"box-shadow",t?.labelShadow),...core.getStyleShadow({styleAppliedFor:"text-shadow",value:t?.typo?.custom?.textShadow,isEnableShadow:t?.typo?.custom?.hasShadowText}),...core.makeStyleResponsive("bg",t?.labelBackgroundColor),...core.makeStyle({c:t?.labelTextColor??"#F9F9F9"})}},getImageStyles=({type:e,props:t})=>{let{styles:o,leftImageCss:l,rightImageCss:r}=t??{},s="left"===e?l:r;return{top:0,width:"100%",height:"100%",display:"block",position:"absolute",...s,...core.makeStyleResponsive("objf",o?.imageScale)}},getInnerBorderCss=(e,t)=>{let o=`
+    #image-comparison-left-label-${t} div, #image-comparison-right-label-${t} div {
+      ${core.composeBorderCss(e?.labelBorder?.desktop)}
+      ${core.composeCornerCss(e?.labelRounded?.desktop)}
     }
 
     @media only screen and (max-width: 1024px) and (min-width: 768px) {
-      #image-comparison-left-label-${o} div, #image-comparison-right-label-${o} div {
-        ${e.composeBorderCss(t?.labelBorder?.tablet)}
-        ${e.composeCornerCss(t?.labelRounded?.tablet)}
+      #image-comparison-left-label-${t} div, #image-comparison-right-label-${t} div {
+        ${core.composeBorderCss(e?.labelBorder?.tablet)}
+        ${core.composeCornerCss(e?.labelRounded?.tablet)}
       }
     }
 
     @media only screen and (max-width: 767px) {
-      #image-comparison-left-label-${o} div, #image-comparison-right-label-${o} div {
-        ${e.composeBorderCss(t?.labelBorder?.mobile)}
-        ${e.composeCornerCss(t?.labelRounded?.mobile)}
+      #image-comparison-left-label-${t} div, #image-comparison-right-label-${t} div {
+        ${core.composeBorderCss(e?.labelBorder?.mobile)}
+        ${core.composeCornerCss(e?.labelRounded?.mobile)}
       }
     }
-  `;return l},l=e=>{let{hover:t,isHorizontal:o}=e;return t?"pointer":o?"ew-resize":"ns-resize"};exports.getArrowStyles=e=>({filter:"drop-shadow(rgba(0, 0, 0, 0.4) 0px 0px 4px)",margin:"left"===e.type?"0 2px 0 0":"0 0 0 2px"}),exports.getContainerStyles=({aspectRatio:t,builderData:o,allImagesLoaded:l=!0})=>({height:"auto",overflow:"hidden",position:"relative","box-sizing":"border-box",display:l?"block":"none",...e.makeStyleResponsive("aspect",t),...e.getCornerCSSFromGlobal(o?.advanced?.rounded)}),exports.getHandleCustomStyles=()=>({width:"auto",height:"auto",display:"flex",flex:"1 0 auto","align-items":"center","box-sizing":"border-box","justify-content":"center"}),exports.getHandleStyles=e=>({display:"flex",flex:"1 0 auto","align-items":"center","box-sizing":"border-box","justify-content":"center","border-radius":"100%",width:`${e.handleSize}px`,height:`${e.handleSize}px`,"box-shadow":"0px 0px 4px 0px rgba(0, 0, 0, 0.40)",transform:e.isHorizontal?"none":"rotate(90deg)",border:`${e.sliderLineWidth}px solid ${e.sliderLineColor}`}),exports.getImageStyles=({type:t,props:o})=>{let{styles:l,leftImageCss:i,rightImageCss:s}=o??{};return{top:0,width:"100%",height:"100%",display:"block",position:"absolute",..."left"===t?i:s,...e.makeStyleResponsive("objf",l?.imageScale)}},exports.getInnerBorderCss=o,exports.getLabelCustomCss=(e,t)=>o(e,t),exports.getLabelStyles=({type:o,styles:l,isHorizontal:i})=>{let s=i?{["left"===o?"left":"right"]:"8px"}:{["left"===o?"top":"bottom"]:"8px"},a=t.generateTranslateByDevices({isHorizontal:i,labelPositionHoz:l?.labelPositionHoz,labelPositionVer:l?.labelPositionVer}),r=e=>t.getLabelPosition({position:e,isHorizontal:i,labelPositionHoz:l?.labelPositionHoz,labelPositionVer:l?.labelPositionVer});return e.makeStyleResponsive(i?"top":"left",r("topLeft")),{opacity:1,...s,...e.composeBorderResponsive(l?.labelBorder),...e.composeTypographyStyle(l?.typo),...e.makeStyleResponsive("t",a),...e.getResponsiveStylePadding(l?.labelPadding),...e.makeStyleResponsive(i?"top":"left",r("topLeft")),...e.makeStyleResponsive(i?"bottom":"right",r("bottomRight")),...e.getResponsiveStyleShadowWithoutState(l?.labelShadow,"box-shadow",l?.labelShadow),...e.getStyleShadow({styleAppliedFor:"text-shadow",value:l?.typo?.custom?.textShadow,isEnableShadow:l?.typo?.custom?.hasShadowText}),...e.makeStyleResponsive("bg",l?.labelBackgroundColor),...e.makeStyle({c:l?.labelTextColor??"#F9F9F9"})}},exports.getLazyPlaceholderStyle=t=>({"--pos":"static","--op":0,...e.makeStyleResponsive("aspect",t)}),exports.getLineStyles=e=>({display:"block",flex:"0 1 auto",background:e.sliderLineColor,"box-shadow":"0px 0px 4px 0px rgba(0, 0, 0, 0.40)",height:e.isHorizontal?"100%":`${e.sliderLineWidth}px`,width:e.isHorizontal?`${e.sliderLineWidth}px`:"100%"}),exports.getOuterWrapperStyles=o=>{let l={desktop:t.FLEX_ALIGN[o?.align?.desktop??"left"],tablet:t.FLEX_ALIGN[o?.align?.tablet??o?.align?.desktop??"left"],mobile:t.FLEX_ALIGN[o?.align?.mobile??o?.align?.tablet??o?.align?.desktop??"left"]};return{...e.makeStyleResponsive("jc",l)}},exports.getSliderCursorStyles=l,exports.getSliderStyles=e=>({"z-index":2,display:"flex",position:"absolute","align-items":"center","justify-content":"center",cursor:l(e),"flex-direction":e.isHorizontal?"column":"row",height:e.isHorizontal?"100%":`${e.handleSize}px`,width:e.isHorizontal?`${e.handleSize}px`:"100%"}),exports.getWrapperWidth=({width:t,leftImageWidth:o=0,rightImageWidth:l=0})=>{let i=e.makeStyleResponsive("w",{desktop:t?.desktop??"0",tablet:t?.tablet??t?.desktop??"0",mobile:t?.mobile??t?.tablet??t?.desktop??"0"});for(let e in i)i[e]="undefinedpx"!==i[e]&&i[e]?i[e]:`${Math.min(o,l)||900}px`;return i};
+  `;return o},getLabelCustomCss=(e,t)=>getInnerBorderCss(e,t),getLazyPlaceholderStyle=e=>({"--pos":"static","--op":0,...core.makeStyleResponsive("aspect",e)}),getSliderCursorStyles=e=>{let{hover:t,isHorizontal:o}=e;return t?"pointer":o?"ew-resize":"ns-resize"},getSliderStyles=e=>({"z-index":2,display:"flex",position:"absolute","align-items":"center","justify-content":"center",cursor:getSliderCursorStyles(e),"flex-direction":e.isHorizontal?"column":"row",height:e.isHorizontal?"100%":`${e.handleSize}px`,width:e.isHorizontal?`${e.handleSize}px`:"100%"}),getLineStyles=e=>({display:"block",flex:"0 1 auto",background:e.sliderLineColor,"box-shadow":"0px 0px 4px 0px rgba(0, 0, 0, 0.40)",height:e.isHorizontal?"100%":`${e.sliderLineWidth}px`,width:e.isHorizontal?`${e.sliderLineWidth}px`:"100%"}),getHandleStyles=e=>({display:"flex",flex:"1 0 auto","align-items":"center","box-sizing":"border-box","justify-content":"center","border-radius":"100%",width:`${e.handleSize}px`,height:`${e.handleSize}px`,"box-shadow":"0px 0px 4px 0px rgba(0, 0, 0, 0.40)",transform:e.isHorizontal?"none":"rotate(90deg)",border:`${e.sliderLineWidth}px solid ${e.sliderLineColor}`}),getHandleCustomStyles=()=>({width:"auto",height:"auto",display:"flex",flex:"1 0 auto","align-items":"center","box-sizing":"border-box","justify-content":"center"}),getArrowStyles=e=>({filter:"drop-shadow(rgba(0, 0, 0, 0.4) 0px 0px 4px)",margin:"left"===e.type?"0 2px 0 0":"0 0 0 2px"});exports.getArrowStyles=getArrowStyles,exports.getContainerStyles=getContainerStyles,exports.getHandleCustomStyles=getHandleCustomStyles,exports.getHandleStyles=getHandleStyles,exports.getImageStyles=getImageStyles,exports.getInnerBorderCss=getInnerBorderCss,exports.getLabelCustomCss=getLabelCustomCss,exports.getLabelStyles=getLabelStyles,exports.getLazyPlaceholderStyle=getLazyPlaceholderStyle,exports.getLineStyles=getLineStyles,exports.getOuterWrapperStyles=getOuterWrapperStyles,exports.getSliderCursorStyles=getSliderCursorStyles,exports.getSliderStyles=getSliderStyles,exports.getWrapperWidth=getWrapperWidth;

package/dist/cjs/image-comparison/components/CompareImage.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@gem-sdk/system");require("react");var a=require("../common/styles.js"),l=require("../common/attrs.js"),r=require("../common/classes.js"),s=require("./Label.js"),i=require("./SlideHandle.js"),c=require("../common/helpers.js"),y=require("../hooks/useCompareImage.js");exports.default=g=>{let{leftImage:d,rightImage:n,builderData:o,advanced:h}=g,{hover:S,styles:m,handle:p,handleSize:u,leftImageAlt:f,leftImageTitle:C,leftImageLabel:j,rightImageAlt:R,rightImageTitle:I,rightImageLabel:w,sliderLineWidth:L,sliderLineColor:b,componentUid:x,tempImage:A,aspectRatio:q,isHorizontal:v,hasLeftLabel:W,hasRightLabel:H,getLeftImageSrc:P,getRightImageSrc:O}=c.getData(g),k=P(),$=O(),{ref:_,priority:z,sliderRef:D,containerRef:M,leftImageRef:N,rightImageRef:U,sliderPosition:B,containerWidth:E,containerHeight:F,allImagesLoaded:G,setLeftImgLoaded:J,setRightImgLoaded:K}=y.useCompareImage({props:g,aspectRatio:q}),Q=c.getReactStyles({handleSize:u,isHorizontal:v,containerWidth:E,containerHeight:F,sliderPosition:B}),T=t.createStyleReact({...a.getOuterWrapperStyles(m)}),V=t.createStyleReact({...a.getWrapperWidth({width:m?.width,leftImageWidth:d?.width,rightImageWidth:n?.width})}),X=t.createStyleReact({...a.getContainerStyles({aspectRatio:q,builderData:o,allImagesLoaded:G})}),Y=t.createStyleReact({...a.getLazyPlaceholderStyle(q)}),Z=t.createStyleReact({...a.getImageStyles({type:"right",props:g}),...Q.rightImageClip}),ee=t.createStyleReact({...a.getImageStyles({type:"left",props:g}),...Q.leftImageClip}),et=t.createStyleReact({...a.getLabelStyles({styles:m,type:"left",isHorizontal:v})}),ea=t.createStyleReact({...a.getLabelStyles({styles:m,type:"right",isHorizontal:v})}),el=t.createStyleReact({...a.getArrowStyles({type:"left"})}),er=t.createStyleReact({...a.getArrowStyles({type:"right"})}),es=t.createStyleReact({...a.getLineStyles({isHorizontal:v,sliderLineColor:b,sliderLineWidth:L})}),ei=t.createStyleReact({...a.getHandleStyles({handleSize:u,isHorizontal:v,sliderLineColor:b,sliderLineWidth:L})}),ec=t.createStyleReact({...a.getHandleCustomStyles()}),ey=t.createStyleReact({...a.getSliderStyles({hover:S,handleSize:u,isHorizontal:v}),...Q.sliderPosition}),eg=t.createClass({...r.getOuterWrapperClasses(h?.cssClass)}),ed=t.createClass({...r.getLabelClasses(m)}),en=t.createClass({...r.getLabelContainerClasses()}),eo=t.createAttr({...l.getImageReactAttrs({testId:"right-image",src:$,title:I,width:n?.width,height:n?.height,priority:z})}),eh=t.createAttr({...l.getImageReactAttrs({testId:"left-image",src:k,title:C,width:d?.width,height:d?.height,priority:z})}),eS=l.getLabelAttrs({componentUid:x,positionId:"left",label:j??""}),em=l.getLabelAttrs({componentUid:x,positionId:"right",label:w??""}),ep=t.createAttr({...l.getImagePlaceholderAttrs({width:A?.width,height:A?.height})});return e.jsx("div",{"data-id":x,className:eg,style:T,children:e.jsx("div",{id:`img-comparison-wrapper-${x}`,style:V,ref:_,children:e.jsxs("div",{id:`img-comparison-container-${x}`,ref:M,"data-testid":"container",style:X,children:[e.jsx("img",{alt:"",...ep,style:Y}),e.jsx("img",{alt:R,ref:U,...eo,style:Z,onLoad:()=>K(!0)}),e.jsx("img",{alt:f,ref:N,...eh,style:ee,onLoad:()=>J(!0)}),e.jsx(i.default,{customHandle:p,componentUid:x,lineStyles:es,sliderStyles:ey,handleStyles:ei,customHandleStyles:ec,leftArrowStyles:el,rightArrowStyles:er,sliderRef:D}),t.If(W,e.jsx(s.default,{...eS,styles:m,childrenClass:ed,childrenStyle:et,containerClass:en,containerStyle:Q?.leftLabelContainer??{}})),t.If(H,e.jsx(s.default,{...em,styles:m,childrenClass:ed,childrenStyle:ea,containerClass:en,containerStyle:Q?.rightLabelContainer??{}}))]})})})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),system=require("@gem-sdk/system");require("react");var styles=require("../common/styles.js"),attrs=require("../common/attrs.js"),classes=require("../common/classes.js"),Label=require("./Label.js"),SlideHandle=require("./SlideHandle.js"),helpers=require("../common/helpers.js"),useCompareImage=require("../hooks/useCompareImage.js");const CompareImage=e=>{let{leftImage:t,rightImage:s,builderData:l,advanced:a}=e,{hover:r,styles:i,handle:y,handleSize:m,leftImageAlt:c,leftImageTitle:n,leftImageLabel:g,rightImageAlt:d,rightImageTitle:o,rightImageLabel:h,sliderLineWidth:S,sliderLineColor:u,componentUid:p,tempImage:j,aspectRatio:R,isHorizontal:C,hasLeftLabel:x,hasRightLabel:f,getLeftImageSrc:I,getRightImageSrc:L}=helpers.getData(e),b=I(),w=L(),{ref:A,priority:q,sliderRef:H,containerRef:v,leftImageRef:W,rightImageRef:P,sliderPosition:O,containerWidth:k,containerHeight:$,allImagesLoaded:_,setLeftImgLoaded:z,setRightImgLoaded:D}=useCompareImage.useCompareImage({props:e,aspectRatio:R}),M=helpers.getReactStyles({handleSize:m,isHorizontal:C,containerWidth:k,containerHeight:$,sliderPosition:O}),N=system.createStyleReact({...styles.getOuterWrapperStyles(i)}),U=system.createStyleReact({...styles.getWrapperWidth({width:i?.width,leftImageWidth:t?.width,rightImageWidth:s?.width})}),B=system.createStyleReact({...styles.getContainerStyles({aspectRatio:R,builderData:l,allImagesLoaded:_})}),E=system.createStyleReact({...styles.getLazyPlaceholderStyle(R)}),F=system.createStyleReact({...styles.getImageStyles({type:"right",props:e}),...M.rightImageClip}),G=system.createStyleReact({...styles.getImageStyles({type:"left",props:e}),...M.leftImageClip}),J=system.createStyleReact({...styles.getLabelStyles({styles:i,type:"left",isHorizontal:C})}),K=system.createStyleReact({...styles.getLabelStyles({styles:i,type:"right",isHorizontal:C})}),Q=system.createStyleReact({...styles.getArrowStyles({type:"left"})}),T=system.createStyleReact({...styles.getArrowStyles({type:"right"})}),V=system.createStyleReact({...styles.getLineStyles({isHorizontal:C,sliderLineColor:u,sliderLineWidth:S})}),X=system.createStyleReact({...styles.getHandleStyles({handleSize:m,isHorizontal:C,sliderLineColor:u,sliderLineWidth:S})}),Y=system.createStyleReact({...styles.getHandleCustomStyles()}),Z=system.createStyleReact({...styles.getSliderStyles({hover:r,handleSize:m,isHorizontal:C}),...M.sliderPosition}),ee=system.createClass({...classes.getOuterWrapperClasses(a?.cssClass)}),et=system.createClass({...classes.getLabelClasses(i)}),es=system.createClass({...classes.getLabelContainerClasses()}),el=system.createAttr({...attrs.getImageReactAttrs({testId:"right-image",src:w,title:o,width:s?.width,height:s?.height,priority:q})}),ea=system.createAttr({...attrs.getImageReactAttrs({testId:"left-image",src:b,title:n,width:t?.width,height:t?.height,priority:q})}),er=attrs.getLabelAttrs({componentUid:p,positionId:"left",label:g??""}),ei=attrs.getLabelAttrs({componentUid:p,positionId:"right",label:h??""}),ey=system.createAttr({...attrs.getImagePlaceholderAttrs({width:j?.width,height:j?.height})}),em=()=>jsxRuntime.jsx("img",{alt:"",...ey,style:E}),ec=()=>jsxRuntime.jsx("img",{alt:d,ref:P,...el,style:F,onLoad:()=>D(!0)}),en=()=>jsxRuntime.jsx("img",{alt:c,ref:W,...ea,style:G,onLoad:()=>z(!0)}),eg=()=>jsxRuntime.jsx(SlideHandle.default,{customHandle:y,componentUid:p,lineStyles:V,sliderStyles:Z,handleStyles:X,customHandleStyles:Y,leftArrowStyles:Q,rightArrowStyles:T,sliderRef:H}),ed=()=>jsxRuntime.jsx(Label.default,{...er,styles:i,childrenClass:et,childrenStyle:J,containerClass:es,containerStyle:M?.leftLabelContainer??{}}),eo=()=>jsxRuntime.jsx(Label.default,{...ei,styles:i,childrenClass:et,childrenStyle:K,containerClass:es,containerStyle:M?.rightLabelContainer??{}});return jsxRuntime.jsx("div",{"data-id":p,className:ee,style:N,children:jsxRuntime.jsx("div",{id:`img-comparison-wrapper-${p}`,style:U,ref:A,children:jsxRuntime.jsxs("div",{id:`img-comparison-container-${p}`,ref:v,"data-testid":"container",style:B,children:[em(),ec(),en(),eg(),system.If(x,ed()),system.If(f,eo())]})})})};exports.default=CompareImage;