@gem-sdk/components 17.0.0-dev.73 → 17.0.0-dev.74
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";exports.REGEX_IS_NON_RESIZABLE_IMAGE=/\.(gif|webp|jfif|svg|tiff?)(?:\?|$)/i;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var e=require("@gem-sdk/core"),t=require("../../helpers.js"),r=require("../settings/configs/translate.js");const
|
|
1
|
+
"use strict";var e=require("@gem-sdk/core"),t=require("../../helpers.js"),r=require("../settings/configs/translate.js"),i=require("./const.js");const s=({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},l=(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">
|
|
2
2
|
<defs>
|
|
3
3
|
<linearGradient id="g-${e}-${t}">
|
|
4
4
|
<stop stop-color="rgba(51, 51, 51, 0)" offset="20%" />
|
|
@@ -9,4 +9,4 @@
|
|
|
9
9
|
<rect width="${e}" height="${t}" fill="rgba(51, 51, 51, 0)" />
|
|
10
10
|
<rect id="r" width="${e}" height="${t}" fill="url(#g-${e}-${t})" />
|
|
11
11
|
<animate xlink:href="#r" attributeName="x" from="-${e}" to="${e}" dur="1s" repeatCount="indefinite" />
|
|
12
|
-
</svg>`,
|
|
12
|
+
</svg>`,a=e=>"undefined"==typeof window?Buffer.from(e).toString("base64"):window.btoa(e),o="https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",n=e=>i.REGEX_IS_NON_RESIZABLE_IMAGE.test(e),g=(e,t)=>{let r=p(e);return n(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`},c=e=>e,u=(t,r,i)=>{if(t?.metafieldDefinitionKey)return d(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=`{{ "${p(e)}" | file_url }}`):s=`{{ "${e}" | asset_url }}`}}if(r&&s?.includes("cdn.shopify")&&!n(s))switch(r){case"tablet":s=s?.includes("?")?`${s}&width=1024`:`${s}?width=1024`;break;case"mobile":s=s?.includes("?")?`${s}&width=768`:`${s}?width=768`}return s},d=e=>`{{${e} | file_url}}`,p=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=h({str:e,reg:/_(pico|icon|thumb|small|compact|medium|large|grande|original|1024x1024|2048x2048|master)+\./g,newString:"."});if(n(r))return r;let i=h({str:r,reg:/\.jpg|\.png|\.jpeg/g,newString:t,isAdd:!0});return i}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},S=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=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=o,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=s,exports.createBlurDataURL=(e,t)=>`data:image/svg+xml;base64,${a(l(e,t))}`,exports.getAdaptiveImageData=e=>{let{srcSet:t,fallbackImg:r}=e;return{getDeviceSource:e=>{let{isLiquid:i}=e??{},s=u(t?.desktop,"desktop",!i)||r||o,l=u(t?.tablet,"tablet",!i)||u(t?.desktop,"tablet",!i)||r||o,a=u(t?.mobile,"mobile",!i)||u(t?.tablet,"mobile",!i)||u(t?.desktop,"mobile",!i)||r||o;return{srcTablet:l,srcMobile:a,srcDesktop:s}}}},exports.getAspectRatio=({styles:t,setting:r})=>{let{srcSet:i,image:l}=r??{},{customAspectRadio:a,shape:o}=t??{},n={desktop:s({device:"desktop",aspect:t?.aspectRatio,auto:r?.isAdaptive?i?.desktop:l,custom:a}),tablet:s({device:"tablet",aspect:t?.aspectRatio,auto:r?.isAdaptive?i?.tablet:l,custom:a}),mobile:s({device:"mobile",aspect:t?.aspectRatio,auto:r?.isAdaptive?i?.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=u,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?g(e,t):c(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=S(t),o=x(s);l.forEach(e=>{_({item:e,settingWidth:a,width:o,qualityType:r,qualityPercent:i})})},exports.isCannotResizeImage=n,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.replaceBackupFileKeyFileContent=p,exports.resizeImage=f,exports.safeStringify=e=>JSON.stringify(e||{}).replace(/"/g,"""),exports.shimmer=l,exports.toBase64=a;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
let f=/\.(gif|webp|jfif|svg|tiff?)(?:\?|$)/i;export{f as REGEX_IS_NON_RESIZABLE_IMAGE};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{getCornerCSSFromGlobal as e,getAspectRatioGlobalSize as t,hasTranslatedLiquid as i,makeStyleResponsive as r,DEVICES as l,getResponsiveValueByScreen as a,cloneDeep as s}from"@gem-sdk/core";import{getDynamicSourceLocales as o,createSettingId as n}from"../../helpers.js";import{Image as g}from"../settings/configs/translate.js";let
|
|
1
|
+
import{getCornerCSSFromGlobal as e,getAspectRatioGlobalSize as t,hasTranslatedLiquid as i,makeStyleResponsive as r,DEVICES as l,getResponsiveValueByScreen as a,cloneDeep as s}from"@gem-sdk/core";import{getDynamicSourceLocales as o,createSettingId as n}from"../../helpers.js";import{Image as g}from"../settings/configs/translate.js";import{REGEX_IS_NON_RESIZABLE_IMAGE as c}from"./const.js";let d=t=>{let i={...t},r=!0;return i&&Object.keys(i??{}).forEach(e=>{if("bblr"===e||"bbrr"===e||"btlr"===e||"btrr"===e){let t=i[e]??{};"0px"!==t&&(r=!1)}}),r?e(i):{}},u=({styles:e,setting:i})=>{let{srcSet:r,image:l}=i??{},{customAspectRadio:a,shape:s}=e??{},o={desktop:m({device:"desktop",aspect:e?.aspectRatio,auto:i?.isAdaptive?r?.desktop:l,custom:a}),tablet:m({device:"tablet",aspect:e?.aspectRatio,auto:i?.isAdaptive?r?.tablet:l,custom:a}),mobile:m({device:"mobile",aspect:e?.aspectRatio,auto:i?.isAdaptive?r?.mobile:l,custom:a})};return s?t(s):o},m=({device:e,aspect:t,custom:i,auto:r})=>{let l=t?.[e];return"auto"===l?r?.height?`${r.width}/${r.height}`:void 0:"custom"===l?i?.[e]?.height?`${i?.[e]?.width}/${i?.[e]?.height}`:void 0:l},f=({layout:e,isDisableObjectFit:t})=>t?{}:r("objf",e),p=({isDisableAspectStyle:e,aspectRatio:t,objectFits:i,width:r,height:a})=>{if(e)return{};let s={};return l.forEach(e=>{let l=`--objf${"desktop"!==e?`-${e}`:""}`,o=i?.[l]||i?.["--objf"];if(t?.[e]==="auto"&&"contain"===o){s[e]="auto";return}s[e]=t?.[e]!=="auto"&&t?.[e]?t[e]:`${r}/${a}`}),s},h=e=>JSON.stringify(e||{}).replace(/"/g,"""),b=(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">
|
|
2
2
|
<defs>
|
|
3
3
|
<linearGradient id="g-${e}-${t}">
|
|
4
4
|
<stop stop-color="rgba(51, 51, 51, 0)" offset="20%" />
|
|
@@ -9,4 +9,4 @@ import{getCornerCSSFromGlobal as e,getAspectRatioGlobalSize as t,hasTranslatedLi
|
|
|
9
9
|
<rect width="${e}" height="${t}" fill="rgba(51, 51, 51, 0)" />
|
|
10
10
|
<rect id="r" width="${e}" height="${t}" fill="url(#g-${e}-${t})" />
|
|
11
11
|
<animate xlink:href="#r" attributeName="x" from="-${e}" to="${e}" dur="1s" repeatCount="indefinite" />
|
|
12
|
-
</svg>`,
|
|
12
|
+
</svg>`,A=e=>"undefined"==typeof window?Buffer.from(e).toString("base64"):window.btoa(e),w=(e,t)=>`data:image/svg+xml;base64,${A(b(e,t))}`,$="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",_="https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",S={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},E=e=>{let{srcSet:t,fallbackImg:i}=e;return{getDeviceSource:e=>{let{isLiquid:r}=e??{},l=C(t?.desktop,"desktop",!r)||i||_,a=C(t?.tablet,"tablet",!r)||C(t?.desktop,"tablet",!r)||i||_,s=C(t?.mobile,"mobile",!r)||C(t?.tablet,"mobile",!r)||C(t?.desktop,"mobile",!r)||i||_;return{srcTablet:a,srcMobile:s,srcDesktop:l}}}},x=({setting:e,uid:t,pageContext:i})=>{if(!e||!g)return{};let r=s(e);for(let e in r.srcSet){let l=r.srcSet[e];if(l&&l.src){let r=o({val:l.src,uid:t,settingId:g?.srcSet?.id?`${g.srcSet.id}_${e}_src`:"",pageContext:i??{}});l.src=String(r)}}let l=o({val:r.alt,uid:t,settingId:n({id:g?.alt?.id}),pageContext:i??{}});r.alt=String(l);let a=o({val:r.title,uid:t,settingId:n({id:g?.title?.id}),pageContext:i??{}});return r.title=String(a),r},I=(e,t,i)=>e?v(e,t):y(i),k=e=>c.test(e),v=(e,t)=>{let i=N(e);return k(e)?"FILE_CONTENT"==t?`{{ '${i}' | file_url }} 768w, {{ '${i}' | file_url }} 1024w, {{ '${i}' | file_url }} 1440w`:`{{ '${e}' | asset_url }} 768w, {{ '${e}' | asset_url }} 1024w, {{ '${e}' | asset_url }} 1440w`:"FILE_CONTENT"==t?`{{ '${i}' | file_img_url: '768x' }} 768w, {{ '${i}' | file_img_url: '1024x' }} 1024w, {{ '${i}' | file_img_url: 'master' }} 1440w`:`{{ '${e}' | asset_img_url: '768x' }} 768w, {{ '${e}' | asset_img_url: '1024x' }} 1024w, {{ '${e}' | asset_img_url: 'master' }} 1440w`},y=e=>e,C=(e,t,r)=>{if(e?.metafieldDefinitionKey)return F(e?.metafieldDefinitionKey);let l=e?.backupFilePath??e?.src??"";if(r)l=e?.src||"";else{let t=e?.src??"";if(i(t))return t;if(e?.backupFileKey){let t=R(e.backupFileKey,e?.src??"");"THEME"!==e.storage&&e.storage?"FILE_CONTENT"===e.storage&&(l=`{{ "${N(t)}" | file_url }}`):l=`{{ "${t}" | asset_url }}`}}if(t&&l?.includes("cdn.shopify")&&!k(l))switch(t){case"tablet":l=l?.includes("?")?`${l}&width=1024`:`${l}?width=1024`;break;case"mobile":l=l?.includes("?")?`${l}&width=768`:`${l}?width=768`}return l},F=e=>`{{${e} | file_url}}`,N=e=>e.replace(/\.jpeg|\.jfif/g,".jpg"),R=(e,t)=>{let i=t?.match(/\/files\/([^\/]+\.(jpg|jpeg|gif|png|webp|svg))/)?.[1];return i&&i!=e?i:e};function T(e,t){let i=j({str:e,reg:/_(pico|icon|thumb|small|compact|medium|large|grande|original|1024x1024|2048x2048|master)+\./g,newString:"."});if(k(i))return i;let r=j({str:i,reg:/\.jpg|\.png|\.jpeg/g,newString:t,isAdd:!0});return r}let j=e=>{let t=e.str,i=e.str.match(e.reg)?.length;if(i){let r,l=1;for(;null!==(r=e.reg.exec(e.str));){if(l===i){let i=e.reg.lastIndex,l=i-r[0].length;e.isAdd&&(e.newString="_"+e.newString+r),t=t.slice(0,l)+e.newString+t.slice(i,t.length)}l++}}return t},L=(e,t)=>{let i=H(),r=t?.[i]||"auto";if("auto"===r||r.includes("%"))return e;let l=Number(r.replace("px",""));return l>e?e:Number(r.replace("px",""))},D=e=>{let{itemWidthParam:t,imageWidthSetting:i,qualityType:r,qualityPercent:l}=e,s=H(),o=L(t,i),n=a(r,s,"finest"),g=a(l,s,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=e=>{let t={desktop:"100%",tablet:"100%",mobile:"100%"};return l.forEach(i=>{let r=a(e,i)?.width||"100%";t[i]=r}),t},O=e=>{let t={desktop:"100%",tablet:"100%",mobile:"100%"};return l.forEach(i=>{let r=a(e,i)?.width||"100%";t[i]=r}),t},B=e=>{let t=document.querySelectorAll(`.gem-slider-item-${e}.gp-gallery-image-item`),i=0;return t.forEach(e=>{e.offsetWidth>i&&(i=e.offsetWidth)}),i},K=e=>{let t=document.querySelectorAll(`.gem-slider-item-${e}.gp-ft-image-item`),i=0;return t.forEach(e=>{e.offsetWidth>i&&(i=e.offsetWidth)}),i},P=e=>{let{shapeByLayout:t,qualityType:i,qualityPercent:r,builderPropUID:l}=e,a=document.querySelectorAll(`.gem-slider-item-${l}.gp-gallery-image-item`),s=O(t),o=B(l);a.forEach(e=>{G({item:e,settingWidth:s,width:o,qualityType:i,qualityPercent:r})})},U=e=>{let{ftShape:t,qualityType:i,qualityPercent:r,builderPropUID:l}=e,a=document.querySelectorAll(`.gem-slider-item-${l}.gp-ft-image-item`),s=W(t),o=K(l);a.forEach(e=>{G({item:e,settingWidth:s,width:o,qualityType:i,qualityPercent:r})})},G=e=>{let{item:t,settingWidth:i,width:r,qualityType:l,qualityPercent:a}=e,s=H(),o=t.querySelector("img");if(o){let e=D({itemWidthParam:r,imageWidthSetting:i,qualityType:l,qualityPercent:a}),t=o.getAttribute("base-src");if(!t)return;let n=M(e,t),g=q(t,n,s);o.setAttribute("srcset",g)}},M=(e,t)=>"auto"===e?t:T(t,`${e}x`),q=(e,t,i)=>`${"mobile"===i&&e!==t?t:T(e,"768x")} 767w, ${"tablet"===i&&e!==t?t:T(e,"1024x")} 1023w, ${"desktop"===i&&e!==t?t:T(e,"1920x")} 1440w`,H=()=>window.innerWidth<768?"mobile":window.innerWidth>=768&&window.innerWidth<1025?"tablet":"desktop";export{_ as FALLBACK_IMAGE,$ as IMAGE_PLACEHOLDER,S as NEXT_IMAGE_CONFIG,m as composeAspectRatio,w as createBlurDataURL,E as getAdaptiveImageData,u as getAspectRatio,p as getAspectRatioNextImage,H as getCurrentDevice,C as getImageSrc,D as getImageWidthFollowByQuality,R as getNewBackupFileKey,f as getResponsiveObjectFit,x as getSettingTranslatedImageAndSeo,I as getSrcSet,U as handleSetSrcForFeatureProductImage,P as handleSetSrcForProductImageList,k as isCannotResizeImage,d as overwriteDefaultRadius,N as replaceBackupFileKeyFileContent,T as resizeImage,h as safeStringify,b as shimmer,A as toBase64};
|