@gem-sdk/components 17.0.0-dev.73 → 17.0.0-dev.75

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.
Files changed (11) hide show
  1. package/dist/cjs/image/common/const.js +1 -0
  2. package/dist/cjs/image/common/helpers.js +2 -2
  3. package/dist/cjs/image/settings/configs/ui-v2.js +1 -1
  4. package/dist/cjs/image-comparison/settings/configs/ui-v2.js +1 -1
  5. package/dist/cjs/product/settings/product-image-v3/configs/ui-v2.js +1 -1
  6. package/dist/esm/image/common/const.js +1 -0
  7. package/dist/esm/image/common/helpers.js +2 -2
  8. package/dist/esm/image/settings/configs/ui-v2.js +1 -1
  9. package/dist/esm/image-comparison/settings/configs/ui-v2.js +1 -1
  10. package/dist/esm/product/settings/product-image-v3/configs/ui-v2.js +1 -1
  11. package/package.json +1 -1
package/dist/cjs/image/common/const.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";exports.REGEX_IS_NON_RESIZABLE_IMAGE=/\.(gif|webp|jfif|svg|tiff?)(?:\?|$)/i;
package/dist/cjs/image/common/helpers.js CHANGED
@@ -1,4 +1,4 @@
1
- "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">
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>`,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;
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,"&quot;"),exports.shimmer=l,exports.toBase64=a;
package/dist/cjs/image/settings/configs/ui-v2.js CHANGED
@@ -1 +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",hiddenOnMobile:!0,controls:[{setting:{id:"shape"},layout:"vertical"}]},{label:"Shape",hiddenOnMobile:!0,controls:[{label:"Border",controlConfig:{id:"border",type:"border-v2",linkWithSetting:{name:"wrapperBorder"}}},{label:"Corner",controlConfig:{id:"corner",type:"corner-v2",linkWithSetting:{name:"borderRadius"}}},{label:"Shadow",setting:{id:"shadow"},options:{updateFields:[{field:"enable",settingId:"hasActiveShadow"}]},controlChangeTrigger:{settings:[{condition:"shadow.enable === true",source:["shadow","hasActiveShadow"],action:{controlId:"hasActiveShadow",groupType:"advanced",controlType:"advanced",newValue:!0}},{condition:"shadow.enable === false",source:["shadow","hasActiveShadow"],action:{controlId:"hasActiveShadow",groupType:"advanced",controlType:"advanced",newValue:!1}}],options:{noRecordHistory:!0}}}]},{controls:[{label:"Link",setting:{id:"enableImageLink"},options:{labelVariant:"primary",toggleStyle:"switch"}},{layout:"vertical",controlConfig:{id:"linkedToPreSalesPageBanner",type:"banner",message:"Pre-sales page elements with link should redirect to the Sales page."},conditionDisplay:'pageType === "GP_PRE_SALE_PAGE" && enableImageLink == true'},{setting:{id:"imageLink"},conditionDisplay:"enableImageLink === true",layout:"vertical"}]},{label:"SEO",hiddenOnMobile:!0,controls:[{type:"combo",label:"Alt text",iconName:"polaris-text-block",getValueFromSettingID:"alt",compoDefaultValue:"Describes the appearance of the image",isHideClear:!0,controls:[{label:"Content",setting:{id:"alt"},layout:"vertical"}]},{type:"combo",label:"Image title",iconName:"polaris-text-block",getValueFromSettingID:"title",isHideClear:!0,compoDefaultValue:"Title",controls:[{label:"Content",setting:{id:"title"},layout:"vertical"}]}]},{label:"Optimize LCP",hiddenOnMobile:!0,controls:[{label:"Preload",setting:{id:"priority"}},{label:"Quality",setting:{id:"qualityType"},options:{disableMessage:"This setting only works with images uploaded to Shopify"},conditionEnable:"(activeScreenId === \"desktop\" && srcSet?.src && srcSet.src.includes('cdn.shopify.com')) || (activeScreenId === \"tablet\" && srcSet?.src && srcSet.src.includes('cdn.shopify.com')) || (activeScreenId === \"mobile\" && srcSet?.src && srcSet.src.includes('cdn.shopify.com'))",conditionDisplay:"priority === false"},{layout:"horizontal",label:"Quality",conditionDisplay:'qualityType == "custom" && priority === false && ((activeScreenId === "desktop" && srcSet?.src && srcSet.src.includes("cdn.shopify.com")) || (activeScreenId === "tablet" && srcSet?.src && srcSet.src.includes("cdn.shopify.com")) || (activeScreenId === "mobile" && srcSet?.src && srcSet.src.includes("cdn.shopify.com")))',setting:{id:"qualityPercent"}}]},{controls:[{label:"Align",hiddenOnMobile:!0,setting:{id:"align"},conditionEnable:'!(shape.width === "default" || (parseInt(shape.width) >= 100 && shape.width?.includes("%")))',options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Horizontal alignment is disabled when the width is set to 100% or greater"}}]}];
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",hiddenOnMobile:!0,controls:[{setting:{id:"shape"},layout:"vertical"}]},{label:"Shape",hiddenOnMobile:!0,controls:[{label:"Border",controlConfig:{id:"border",type:"border-v2",linkWithSetting:{name:"wrapperBorder"}}},{label:"Corner",controlConfig:{id:"corner",type:"corner-v2",linkWithSetting:{name:"borderRadius"}}},{label:"Shadow",setting:{id:"shadow"},options:{updateFields:[{field:"enable",settingId:"hasActiveShadow"}]},controlChangeTrigger:{settings:[{condition:"shadow.enable === true",source:["shadow","hasActiveShadow"],action:{controlId:"hasActiveShadow",groupType:"advanced",controlType:"advanced",newValue:!0}},{condition:"shadow.enable === false",source:["shadow","hasActiveShadow"],action:{controlId:"hasActiveShadow",groupType:"advanced",controlType:"advanced",newValue:!1}}],options:{noRecordHistory:!0}}}]},{controls:[{label:"Link",setting:{id:"enableImageLink"},options:{labelVariant:"primary",toggleStyle:"switch"}},{layout:"vertical",controlConfig:{id:"linkedToPreSalesPageBanner",type:"banner",message:"Pre-sales page elements with link should redirect to the Sales page."},conditionDisplay:'pageType === "GP_PRE_SALE_PAGE" && enableImageLink == true'},{setting:{id:"imageLink"},conditionDisplay:"enableImageLink === true",layout:"vertical"}]},{label:"SEO",hiddenOnMobile:!0,controls:[{type:"combo",label:"Alt text",iconName:"polaris-text-block",getValueFromSettingID:"alt",compoDefaultValue:"Describes the appearance of the image",isHideClear:!0,controls:[{label:"Content",setting:{id:"alt"},layout:"vertical"}]},{type:"combo",label:"Image title",iconName:"polaris-text-block",getValueFromSettingID:"title",isHideClear:!0,compoDefaultValue:"Title",controls:[{label:"Content",setting:{id:"title"},layout:"vertical"}]}]},{label:"Optimize LCP",conditionDisplay:'pageType !== "STATIC"',hiddenOnMobile:!0,controls:[{label:"Preload",setting:{id:"priority"}},{label:"Quality",setting:{id:"qualityType"},options:{disableMessage:"This setting only works with images uploaded to Shopify"},conditionEnable:"(activeScreenId === \"desktop\" && srcSet?.src && srcSet.src.includes('cdn.shopify.com')) || (activeScreenId === \"tablet\" && srcSet?.src && srcSet.src.includes('cdn.shopify.com')) || (activeScreenId === \"mobile\" && srcSet?.src && srcSet.src.includes('cdn.shopify.com'))",conditionDisplay:"priority === false"},{layout:"horizontal",label:"Quality",conditionDisplay:'qualityType == "custom" && priority === false && ((activeScreenId === "desktop" && srcSet?.src && srcSet.src.includes("cdn.shopify.com")) || (activeScreenId === "tablet" && srcSet?.src && srcSet.src.includes("cdn.shopify.com")) || (activeScreenId === "mobile" && srcSet?.src && srcSet.src.includes("cdn.shopify.com")))',setting:{id:"qualityPercent"}}]},{controls:[{label:"Align",hiddenOnMobile:!0,setting:{id:"align"},conditionEnable:'!(shape.width === "default" || (parseInt(shape.width) >= 100 && shape.width?.includes("%")))',options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Horizontal alignment is disabled when the width is set to 100% or greater"}}]}];
package/dist/cjs/image-comparison/settings/configs/ui-v2.js CHANGED
@@ -1 +1 @@
1
- "use strict";exports.SettingUIV2=[{label:"Layout",controls:[{setting:{id:"direction"},layout:"vertical",options:{fullWidth:!0}}]},{label:"Image",controls:[{label:"1st image",setting:{id:"imageLeft"},options:{updateFields:[{field:"preload",settingId:"preload"},{field:"altText",settingId:"altLeft"},{field:"imageTitle",settingId:"titleLeft"}]},controlChangeTrigger:{settings:[{action:{controlId:"preload",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"altLeft",valueFromField:"altText",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"titleLeft",valueFromField:"imageTitle",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"2nd image",setting:{id:"imageRight"},options:{updateFields:[{field:"preload",settingId:"preload"},{field:"altText",settingId:"altRight"},{field:"imageTitle",settingId:"titleRight"}]},controlChangeTrigger:{settings:[{action:{controlId:"preload",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"altRight",valueFromField:"altText",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"titleRight",valueFromField:"imageTitle",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"Scale",setting:{id:"imageScale"}}]},{label:"Slider",controls:[{label:"Behavior",setting:{id:"hoverToSlide"}},{label:"Default ratio",setting:{id:"defaultPercentage"}}]},{controls:[{label:"Badge",hiddenOnMobile:!0,setting:{id:"enableLabel"},options:{labelVariant:"primary",toggleStyle:"switch"}},{label:"1st",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"leftImageLabel"}},{label:"2nd",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"rightImageLabel"}},{conditionDisplay:"enableLabel === true",label:"Text style",hiddenOnMobile:!0,setting:{id:"typo"},options:{updateFields:[{field:"attrs.color",settingId:"labelTextColor"}]},controlChangeTrigger:{settings:[{action:{controlId:"labelTextColor",valueFromField:"attrs.color",groupType:"style",controlType:"style",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"Padding",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"labelPadding"}},{label:"Background",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"labelBackgroundColor"}},{label:"Border",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"labelBorder"}},{label:"Corner",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"labelRounded"}},{label:"Shadow",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"labelShadow"}},{label:"Position",hiddenOnMobile:!0,setting:{id:"labelPositionHoz"},conditionDisplay:"enableLabel === true && direction === 'horizontal'"},{label:"Position",hiddenOnMobile:!0,setting:{id:"labelPositionVer"},conditionDisplay:"enableLabel === true && direction === 'vertical'"}]},{label:"Size",hiddenOnMobile:!0,controls:[{label:"Frame",setting:{id:"aspectRatio"}},{label:"Ratio",conditionDisplay:"aspectRatio === 'custom'",setting:{id:"customAspectRadio"}},{label:"Width",setting:{id:"width"}}]},{label:"Shape",hiddenOnMobile:!0,controls:[{label:"Border",setting:{id:"border",state:"normal"}},{label:"Corner",setting:{id:"rounded",state:"normal"}},{label:"Shadow",setting:{id:"boxShadow",state:"normal"},options:{updateFields:[{field:"normal.enable",settingId:"hasBoxShadow",state:"normal"}]},controlChangeTrigger:{settings:[{condition:"boxShadow.normal.enable === true",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!0}},{condition:"boxShadow.normal.enable === false",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!1}}],options:{noRecordHistory:!0}}}]},{label:"Optimize LCP",hiddenOnMobile:!0,controls:[{label:"Preload",setting:{id:"preload"}},{label:"Quality",conditionEnable:"((imageLeft.src || imageRight.src) && (imageLeft.src.includes('cdn.shopify.com') || imageRight.src.includes('cdn.shopify.com')))",conditionDisplay:"preload === false",setting:{id:"qualityType"},options:{fullWidth:!0,disableMessage:"This setting only works with images uploaded to Shopify"}},{layout:"horizontal",label:"Quality",conditionDisplay:'qualityType == "custom" && preload === false && ((imageLeft.src || imageRight.src) && (imageLeft.src.includes("cdn.shopify.com") || imageRight.src.includes("cdn.shopify.com"))) ',setting:{id:"qualityPercent"}}]},{label:"SEO",hiddenOnMobile:!0,controls:[{label:"1st image",type:"combo",iconName:"polaris-text-title",fixedValue:"Edit",popoverLabel:"SEO",setting:{id:"enableSEOLeft"},controls:[{label:"Alt text",options:{labelAlign:"top"},setting:{id:"altLeft"}},{label:"Image title",options:{labelAlign:"top"},setting:{id:"titleLeft"}}]},{label:"2nd image",type:"combo",iconName:"polaris-text-title",fixedValue:"Edit",setting:{id:"enableSEORight"},popoverLabel:"SEO",controls:[{label:"Alt text",options:{labelAlign:"top"},setting:{id:"altRight"}},{label:"Image title",options:{labelAlign:"top"},setting:{id:"titleRight"}}]}]},{controls:[{label:"Align",hiddenOnMobile:!0,conditionEnable:'!(width === "default" || (parseInt(width) >= 100 && width?.includes("%")))',setting:{id:"align"},options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Align is not supported when width is 100%"}}]}];
1
+ "use strict";exports.SettingUIV2=[{label:"Layout",controls:[{setting:{id:"direction"},layout:"vertical",options:{fullWidth:!0}}]},{label:"Image",controls:[{label:"1st image",setting:{id:"imageLeft"},options:{updateFields:[{field:"preload",settingId:"preload"},{field:"altText",settingId:"altLeft"},{field:"imageTitle",settingId:"titleLeft"}]},controlChangeTrigger:{settings:[{action:{controlId:"preload",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"altLeft",valueFromField:"altText",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"titleLeft",valueFromField:"imageTitle",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"2nd image",setting:{id:"imageRight"},options:{updateFields:[{field:"preload",settingId:"preload"},{field:"altText",settingId:"altRight"},{field:"imageTitle",settingId:"titleRight"}]},controlChangeTrigger:{settings:[{action:{controlId:"preload",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"altRight",valueFromField:"altText",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"titleRight",valueFromField:"imageTitle",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"Scale",setting:{id:"imageScale"}}]},{label:"Slider",controls:[{label:"Behavior",setting:{id:"hoverToSlide"}},{label:"Default ratio",setting:{id:"defaultPercentage"}}]},{controls:[{label:"Badge",hiddenOnMobile:!0,setting:{id:"enableLabel"},options:{labelVariant:"primary",toggleStyle:"switch"}},{label:"1st",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"leftImageLabel"}},{label:"2nd",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"rightImageLabel"}},{conditionDisplay:"enableLabel === true",label:"Text style",hiddenOnMobile:!0,setting:{id:"typo"},options:{updateFields:[{field:"attrs.color",settingId:"labelTextColor"}]},controlChangeTrigger:{settings:[{action:{controlId:"labelTextColor",valueFromField:"attrs.color",groupType:"style",controlType:"style",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"Padding",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"labelPadding"}},{label:"Background",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"labelBackgroundColor"}},{label:"Border",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"labelBorder"}},{label:"Corner",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"labelRounded"}},{label:"Shadow",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"labelShadow"}},{label:"Position",hiddenOnMobile:!0,setting:{id:"labelPositionHoz"},conditionDisplay:"enableLabel === true && direction === 'horizontal'"},{label:"Position",hiddenOnMobile:!0,setting:{id:"labelPositionVer"},conditionDisplay:"enableLabel === true && direction === 'vertical'"}]},{label:"Size",hiddenOnMobile:!0,controls:[{label:"Frame",setting:{id:"aspectRatio"}},{label:"Ratio",conditionDisplay:"aspectRatio === 'custom'",setting:{id:"customAspectRadio"}},{label:"Width",setting:{id:"width"}}]},{label:"Shape",hiddenOnMobile:!0,controls:[{label:"Border",setting:{id:"border",state:"normal"}},{label:"Corner",setting:{id:"rounded",state:"normal"}},{label:"Shadow",setting:{id:"boxShadow",state:"normal"},options:{updateFields:[{field:"normal.enable",settingId:"hasBoxShadow",state:"normal"}]},controlChangeTrigger:{settings:[{condition:"boxShadow.normal.enable === true",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!0}},{condition:"boxShadow.normal.enable === false",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!1}}],options:{noRecordHistory:!0}}}]},{label:"Optimize LCP",conditionDisplay:'pageType !== "STATIC"',hiddenOnMobile:!0,controls:[{label:"Preload",setting:{id:"preload"}},{label:"Quality",conditionEnable:"((imageLeft.src || imageRight.src) && (imageLeft.src.includes('cdn.shopify.com') || imageRight.src.includes('cdn.shopify.com')))",conditionDisplay:"preload === false",setting:{id:"qualityType"},options:{fullWidth:!0,disableMessage:"This setting only works with images uploaded to Shopify"}},{layout:"horizontal",label:"Quality",conditionDisplay:'qualityType == "custom" && preload === false && ((imageLeft.src || imageRight.src) && (imageLeft.src.includes("cdn.shopify.com") || imageRight.src.includes("cdn.shopify.com"))) ',setting:{id:"qualityPercent"}}]},{label:"SEO",hiddenOnMobile:!0,controls:[{label:"1st image",type:"combo",iconName:"polaris-text-title",fixedValue:"Edit",popoverLabel:"SEO",setting:{id:"enableSEOLeft"},controls:[{label:"Alt text",options:{labelAlign:"top"},setting:{id:"altLeft"}},{label:"Image title",options:{labelAlign:"top"},setting:{id:"titleLeft"}}]},{label:"2nd image",type:"combo",iconName:"polaris-text-title",fixedValue:"Edit",setting:{id:"enableSEORight"},popoverLabel:"SEO",controls:[{label:"Alt text",options:{labelAlign:"top"},setting:{id:"altRight"}},{label:"Image title",options:{labelAlign:"top"},setting:{id:"titleRight"}}]}]},{controls:[{label:"Align",hiddenOnMobile:!0,conditionEnable:'!(width === "default" || (parseInt(width) >= 100 && width?.includes("%")))',setting:{id:"align"},options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Align is not supported when width is 100%"}}]}];
package/dist/cjs/product/settings/product-image-v3/configs/ui-v2.js CHANGED
@@ -1 +1 @@
1
- "use strict";var i=require("./ui/ImageListNavigation.js"),o=require("./ui/FeatureNavigation.js"),e=require("./ui/FeatureDots.js");const t='((type == "slider" || position == "left" || position == "right") && position !== "one-col" && position != "two-col")',n='(["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position))',l=[{label:"Layout",controls:[{layout:"vertical",setting:{id:"position"},options:{isComboLayout:!0},controls:[{label:"Ratio",type:"control",setting:{id:"ratioLayout"},layout:"vertical",conditionDisplay:'position == "left"'},{label:"Ratio",type:"control",setting:{id:"ratioLayoutRight"},layout:"vertical",conditionDisplay:'position == "right"'}]}]},{label:"Featured image",conditionDisplay:n,controls:[{setting:{id:"ftShape"},hiddenOnMobile:!0,layout:"vertical",controlChangeTrigger:{settings:[{condition:"ftShape.shape === 'original'",source:["ftShape"],action:{controlId:"ftLayout",newValue:"contain",groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}},{conditionDisplay:"ftShape.shape !== 'original'",label:"Image scale",setting:{id:"ftLayout"}},{...e.FeatureDots,hiddenOnMobile:!0,conditionDisplay:`${n} && position === "only-feature"`},{...o.FeatureNavigation,hiddenOnMobile:!0,conditionDisplay:`${n}`}],moreSettings:{type:"collapse",controls:[{label:"Corner",setting:{id:"ftCorner"},hiddenOnMobile:!0},{type:"combo",label:"Hover action",conditionDisplay:n,iconName:"gp-trigger-action-hover",getValueFromSettingID:"hoverEffect",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"zoom",hiddenOnMobile:!0,controls:[{label:"When hover",setting:{id:"hoverEffect"}},{label:"Zoom type",conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoomType"}},{label:"Zoom value",conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoom"}},{label:"Other image",conditionDisplay:'hoverEffect == "other"',setting:{id:"otherImage"}}]},{type:"combo",label:"Click action",hiddenOnMobile:!0,iconName:"gp-trigger-action-click",conditionDisplay:n,getValueFromSettingID:"ftClickOpenLightBox",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"popup",controls:[{label:"After click",setting:{id:"ftClickOpenLightBox"}},{label:"Open new tab",setting:{id:"ftClickOpenNewTab"},conditionDisplay:'ftClickOpenLightBox === "product-link"'}]},{type:"control",label:"Slide speed",setting:{id:"ftAnimationSpeed"}},{type:"control",label:"Animation",setting:{id:"ftAnimationMode"}},{label:"Drag / swipe",setting:{id:"ftDragToScroll"}},{label:"Infinity loop",setting:{id:"ftLoop"}}]}},{label:"Image list",conditionDisplay:'(position !== "only-feature")',controls:[{label:"Display",hiddenOnMobile:!0,conditionDisplay:'position === "bottom-center" || position === "bottom-left" || position === "inside-bottom"',setting:{id:"type"}},{setting:{id:"shape"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'["left", "right"].includes(position)'},{setting:{id:"shapeForBottom"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'["bottom-left", "bottom-center"].includes(position)'},{setting:{id:"shapeForInsideBottom"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'["inside-bottom"].includes(position)'},{setting:{id:"shapeForInside"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'["inside-left", "inside-right"].includes(position)'},{setting:{id:"shapeForFtOnly"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'position == "only-feature"'},{setting:{id:"shapeFor2Col"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'position == "two-col"'},{setting:{id:"shapeFor1Col"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'position == "one-col"'},{label:"Image gap",setting:{id:"itemSpacing"}},{conditionDisplay:"(position == 'one-col' && shapeFor1Col.shape !== 'original') || (position == 'two-col' && shapeFor2Col.shape !== 'original') || (position == 'only-feature' && shapeForFtOnly.shape !== 'original') || ([\"inside-left\", \"inside-right\"].includes(position) && shapeForInside.shape !== 'original') || ([\"inside-bottom\"].includes(position) && shapeForInsideBottom.shape !== 'original') || ([\"bottom-left\", \"bottom-center\"].includes(position) && shapeForBottom.shape !== 'original') || ([\"left\", \"right\"].includes(position) && shape.shape !== 'original')",label:"Image scale",setting:{id:"layout"}},{...i.ImageListNavigation,hiddenOnMobile:!0,conditionDisplay:t}],moreSettings:{type:"collapse",controls:[{label:"Corner",hiddenOnMobile:!0,setting:{id:"corner"}},{label:"Active border",hiddenOnMobile:!0,conditionDisplay:'!["one-col", "two-col"].includes(position)',setting:{id:"borderActive"}},{type:"combo",label:"Hover action",conditionDisplay:'(position == "one-col" || position == "two-col")',iconName:"gp-trigger-action-hover",getValueFromSettingID:"galleryHoverEffect",defaultValueWhenClear:"none",hiddenOnMobile:!0,compoDefaultValue:"zoom",controls:[{label:"When hover",setting:{id:"galleryHoverEffect"},conditionDisplay:'galleryHoverEffect == "none"'},{label:"Zoom type",conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoomType"}},{label:"Zoom value",conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoom"}},{label:"Other image",conditionDisplay:'galleryHoverEffect == "other"',setting:{id:"otherImage"}}]},{label:"Click action",setting:{id:"clickOpenLightBox"}},{conditionDisplay:t,label:"Drag / swipe",setting:{id:"dragToScroll"}},{conditionDisplay:t,label:"Infinity loop",setting:{id:"loop"}}]}},{label:"Item spacing",hiddenOnMobile:!0,conditionDisplay:'["bottom-center", "left", "right", "inside-bottom", "inside-left", "inside-right"].includes(position)',controls:[{label:"Gap",setting:{id:"spacing"}}]},{label:"Display condition",controls:[{conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',label:"Default item",setting:{id:"preDisplay"}},{label:"Image list",setting:{id:"filterByVariant"}}],messageConfig:{type:"info",message:'Image list can display based on the selected variants. <a class="text-white" target="_blank" href="https://gempages.co/display-selected-variant">How to setup</a>'}},{label:"Optimize LCP",controls:[{label:"Preload",conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',setting:{id:"preload"}},{label:"Quality",setting:{id:"qualityType"},conditionDisplay:"preload === false"},{layout:"horizontal",label:"Quality",conditionDisplay:'qualityType == "custom" && preload === false',setting:{id:"qualityPercent"}}]},{hiddenOnMobile:!0,controls:[{label:"Align",setting:{id:"align"},options:{labelVariant:"primary"}}]}];exports.SettingUIV2=l;
1
+ "use strict";var i=require("./ui/ImageListNavigation.js"),o=require("./ui/FeatureNavigation.js"),e=require("./ui/FeatureDots.js");const t='((type == "slider" || position == "left" || position == "right") && position !== "one-col" && position != "two-col")',n='(["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position))',l=[{label:"Layout",controls:[{layout:"vertical",setting:{id:"position"},options:{isComboLayout:!0},controls:[{label:"Ratio",type:"control",setting:{id:"ratioLayout"},layout:"vertical",conditionDisplay:'position == "left"'},{label:"Ratio",type:"control",setting:{id:"ratioLayoutRight"},layout:"vertical",conditionDisplay:'position == "right"'}]}]},{label:"Featured image",conditionDisplay:n,controls:[{setting:{id:"ftShape"},hiddenOnMobile:!0,layout:"vertical",controlChangeTrigger:{settings:[{condition:"ftShape.shape === 'original'",source:["ftShape"],action:{controlId:"ftLayout",newValue:"contain",groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}},{conditionDisplay:"ftShape.shape !== 'original'",label:"Image scale",setting:{id:"ftLayout"}},{...e.FeatureDots,hiddenOnMobile:!0,conditionDisplay:`${n} && position === "only-feature"`},{...o.FeatureNavigation,hiddenOnMobile:!0,conditionDisplay:`${n}`}],moreSettings:{type:"collapse",controls:[{label:"Corner",setting:{id:"ftCorner"},hiddenOnMobile:!0},{type:"combo",label:"Hover action",conditionDisplay:n,iconName:"gp-trigger-action-hover",getValueFromSettingID:"hoverEffect",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"zoom",hiddenOnMobile:!0,controls:[{label:"When hover",setting:{id:"hoverEffect"}},{label:"Zoom type",conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoomType"}},{label:"Zoom value",conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoom"}},{label:"Other image",conditionDisplay:'hoverEffect == "other"',setting:{id:"otherImage"}}]},{type:"combo",label:"Click action",hiddenOnMobile:!0,iconName:"gp-trigger-action-click",conditionDisplay:n,getValueFromSettingID:"ftClickOpenLightBox",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"popup",controls:[{label:"After click",setting:{id:"ftClickOpenLightBox"}},{label:"Open new tab",setting:{id:"ftClickOpenNewTab"},conditionDisplay:'ftClickOpenLightBox === "product-link"'}]},{type:"control",label:"Slide speed",setting:{id:"ftAnimationSpeed"}},{type:"control",label:"Animation",setting:{id:"ftAnimationMode"}},{label:"Drag / swipe",setting:{id:"ftDragToScroll"}},{label:"Infinity loop",setting:{id:"ftLoop"}}]}},{label:"Image list",conditionDisplay:'(position !== "only-feature")',controls:[{label:"Display",hiddenOnMobile:!0,conditionDisplay:'position === "bottom-center" || position === "bottom-left" || position === "inside-bottom"',setting:{id:"type"}},{setting:{id:"shape"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'["left", "right"].includes(position)'},{setting:{id:"shapeForBottom"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'["bottom-left", "bottom-center"].includes(position)'},{setting:{id:"shapeForInsideBottom"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'["inside-bottom"].includes(position)'},{setting:{id:"shapeForInside"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'["inside-left", "inside-right"].includes(position)'},{setting:{id:"shapeForFtOnly"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'position == "only-feature"'},{setting:{id:"shapeFor2Col"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'position == "two-col"'},{setting:{id:"shapeFor1Col"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'position == "one-col"'},{label:"Image gap",setting:{id:"itemSpacing"}},{conditionDisplay:"(position == 'one-col' && shapeFor1Col.shape !== 'original') || (position == 'two-col' && shapeFor2Col.shape !== 'original') || (position == 'only-feature' && shapeForFtOnly.shape !== 'original') || ([\"inside-left\", \"inside-right\"].includes(position) && shapeForInside.shape !== 'original') || ([\"inside-bottom\"].includes(position) && shapeForInsideBottom.shape !== 'original') || ([\"bottom-left\", \"bottom-center\"].includes(position) && shapeForBottom.shape !== 'original') || ([\"left\", \"right\"].includes(position) && shape.shape !== 'original')",label:"Image scale",setting:{id:"layout"}},{...i.ImageListNavigation,hiddenOnMobile:!0,conditionDisplay:t}],moreSettings:{type:"collapse",controls:[{label:"Corner",hiddenOnMobile:!0,setting:{id:"corner"}},{label:"Active border",hiddenOnMobile:!0,conditionDisplay:'!["one-col", "two-col"].includes(position)',setting:{id:"borderActive"}},{type:"combo",label:"Hover action",conditionDisplay:'(position == "one-col" || position == "two-col")',iconName:"gp-trigger-action-hover",getValueFromSettingID:"galleryHoverEffect",defaultValueWhenClear:"none",hiddenOnMobile:!0,compoDefaultValue:"zoom",controls:[{label:"When hover",setting:{id:"galleryHoverEffect"},conditionDisplay:'galleryHoverEffect == "none"'},{label:"Zoom type",conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoomType"}},{label:"Zoom value",conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoom"}},{label:"Other image",conditionDisplay:'galleryHoverEffect == "other"',setting:{id:"otherImage"}}]},{label:"Click action",setting:{id:"clickOpenLightBox"}},{conditionDisplay:t,label:"Drag / swipe",setting:{id:"dragToScroll"}},{conditionDisplay:t,label:"Infinity loop",setting:{id:"loop"}}]}},{label:"Item spacing",hiddenOnMobile:!0,conditionDisplay:'["bottom-center", "left", "right", "inside-bottom", "inside-left", "inside-right"].includes(position)',controls:[{label:"Gap",setting:{id:"spacing"}}]},{label:"Display condition",controls:[{conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',label:"Default item",setting:{id:"preDisplay"}},{label:"Image list",setting:{id:"filterByVariant"}}],messageConfig:{type:"info",message:'Image list can display based on the selected variants. <a class="text-white" target="_blank" href="https://gempages.co/display-selected-variant">How to setup</a>'}},{label:"Optimize LCP",conditionDisplay:'pageType !== "STATIC"',controls:[{label:"Preload",conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',setting:{id:"preload"}},{label:"Quality",setting:{id:"qualityType"},conditionDisplay:"preload === false"},{layout:"horizontal",label:"Quality",conditionDisplay:'qualityType == "custom" && preload === false',setting:{id:"qualityPercent"}}]},{hiddenOnMobile:!0,controls:[{label:"Align",setting:{id:"align"},options:{labelVariant:"primary"}}]}];exports.SettingUIV2=l;
package/dist/esm/image/common/const.js ADDED
@@ -0,0 +1 @@
1
+ let f=/\.(gif|webp|jfif|svg|tiff?)(?:\?|$)/i;export{f as REGEX_IS_NON_RESIZABLE_IMAGE};
package/dist/esm/image/common/helpers.js CHANGED
@@ -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 c=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:d({device:"desktop",aspect:e?.aspectRatio,auto:i?.isAdaptive?r?.desktop:l,custom:a}),tablet:d({device:"tablet",aspect:e?.aspectRatio,auto:i?.isAdaptive?r?.tablet:l,custom:a}),mobile:d({device:"mobile",aspect:e?.aspectRatio,auto:i?.isAdaptive?r?.mobile:l,custom:a})};return s?t(s):o},d=({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),m=({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},p=e=>JSON.stringify(e||{}).replace(/"/g,"&quot;"),h=(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">
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,"&quot;"),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>`,b=e=>"undefined"==typeof window?Buffer.from(e).toString("base64"):window.btoa(e),A=(e,t)=>`data:image/svg+xml;base64,${b(h(e,t))}`,w="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",$="https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",_={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},S=e=>{let{srcSet:t,fallbackImg:i}=e;return{getDeviceSource:e=>{let{isLiquid:r}=e??{},l=y(t?.desktop,"desktop",!r)||i||$,a=y(t?.tablet,"tablet",!r)||y(t?.desktop,"tablet",!r)||i||$,s=y(t?.mobile,"mobile",!r)||y(t?.tablet,"mobile",!r)||y(t?.desktop,"mobile",!r)||i||$;return{srcTablet:a,srcMobile:s,srcDesktop:l}}}},E=({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},x=(e,t,i)=>e?I(e,t):k(i),v=e=>e.includes("webp")||e.includes("jfif")||e.includes(".svg")||e.includes(".tiff"),I=(e,t)=>{let i=R(e);return v(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`},k=e=>e,y=(e,t,r)=>{if(e?.metafieldDefinitionKey)return C(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=N(e.backupFileKey,e?.src??"");"THEME"!==e.storage&&e.storage?"FILE_CONTENT"===e.storage&&(l=`{{ "${R(t)}" | file_url }}`):l=`{{ "${t}" | asset_url }}`}}if(t&&l?.includes("cdn.shopify"))switch(t){case"tablet":l=l?.replace(F,"_1024x.");break;case"mobile":l=l?.replace(F,"_768x.")}return l},C=e=>`{{${e} | file_url}}`,F=/\.(?=[^.]*$)/,R=e=>e.replace(/\.jpeg|\.jfif/g,".jpg"),N=(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=e.match(/\.webp/g)?.length,r=j({str:e,reg:/_(pico|icon|thumb|small|compact|medium|large|grande|original|1024x1024|2048x2048|master)+\./g,newString:"."});if(i)return r;let l=j({str:r,reg:/\.jpg|\.png|\.gif|\.jpeg/g,newString:t,isAdd:!0});return l}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},D=(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",""))},L=e=>{let{itemWidthParam:t,imageWidthSetting:i,qualityType:r,qualityPercent:l}=e,s=H(),o=D(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=L({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,w as IMAGE_PLACEHOLDER,_ as NEXT_IMAGE_CONFIG,d as composeAspectRatio,A as createBlurDataURL,S as getAdaptiveImageData,u as getAspectRatio,m as getAspectRatioNextImage,H as getCurrentDevice,y as getImageSrc,L as getImageWidthFollowByQuality,N as getNewBackupFileKey,f as getResponsiveObjectFit,E as getSettingTranslatedImageAndSeo,x as getSrcSet,U as handleSetSrcForFeatureProductImage,P as handleSetSrcForProductImageList,v as isCannotResizeImage,c as overwriteDefaultRadius,F as regexReplaceEndDot,R as replaceBackupFileKeyFileContent,T as resizeImage,p as safeStringify,h as shimmer,b as toBase64};
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};
package/dist/esm/image/settings/configs/ui-v2.js CHANGED
@@ -1 +1 @@
1
- let e=[{label:"Style",controls:[{setting:{id:"imageStyle"},layout:"vertical",controlChangeTrigger:{settings:[{condition:'imageStyle==="circle"',source:["imageStyle"],action:{controlId:"shape",newValue:{shape:"square",shapeValue:"1/1",shapeLinked:!0,width:"80px"},groupType:"style",controlType:"style"}},{condition:'imageStyle==="circle"',source:["imageStyle"],action:{controlId:"borderRadius",newValue:{bblr:"9999px",btrr:"9999px",bbrr:"9999px",btlr:"9999px",radiusType:"circle"},groupType:"style",controlType:"style"}},{condition:'imageStyle==="circle"',source:["imageStyle"],action:{controlId:"wrapperBorder",newValue:{border:"none",color:"transparent",borderWidth:"0px"},groupType:"style",controlType:"style"}},{condition:'imageStyle==="rectangle"',source:["imageStyle"],action:{controlId:"wrapperBorder",newValue:{border:"none",color:"transparent",borderWidth:"0px"},groupType:"style",controlType:"style"}},{condition:'imageStyle==="circle"',source:["imageStyle"],action:{controlId:"shadow",newValue:{enable:!1},groupType:"style",controlType:"style"}},{condition:'imageStyle==="rectangle"',source:["imageStyle"],action:{controlId:"shadow",newValue:{enable:!1},groupType:"style",controlType:"style"}},{condition:'imageStyle==="rectangle"',source:["imageStyle"],action:{controlId:"shape",newValue:{shape:"original",shapeValue:"",width:"100%"},groupType:"style",controlType:"style"}},{condition:'imageStyle==="rectangle"',source:["imageStyle"],action:{controlId:"borderRadius",newValue:{bblr:"0px",btrr:"0px",bbrr:"0px",btlr:"0px",radiusType:"none"},groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}}]},{label:"Source",controls:[{conditionDisplay:"isAdaptive === false",setting:{id:"image"},layout:"vertical",options:{updateFields:[{field:"preload",settingId:"priority"},{field:"altText",settingId:"alt"},{field:"imageTitle",settingId:"title"}]},controlChangeTrigger:{settings:[{action:{controlId:"priority",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"alt",valueFromField:"altText",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"title",valueFromField:"imageTitle",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}},{conditionDisplay:"isAdaptive === true",setting:{id:"srcSet"},layout:"vertical",options:{updateFields:[{field:"preload",settingId:"priority"},{field:"altText",settingId:"alt"},{field:"imageTitle",settingId:"title"}]},controlChangeTrigger:{settings:[{action:{controlId:"priority",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"alt",valueFromField:"altText",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"title",valueFromField:"imageTitle",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"Scale",setting:{id:"objectFit"},conditionDisplay:'shape.shape !== "original"'}]},{label:"Size",hiddenOnMobile:!0,controls:[{setting:{id:"shape"},layout:"vertical"}]},{label:"Shape",hiddenOnMobile:!0,controls:[{label:"Border",controlConfig:{id:"border",type:"border-v2",linkWithSetting:{name:"wrapperBorder"}}},{label:"Corner",controlConfig:{id:"corner",type:"corner-v2",linkWithSetting:{name:"borderRadius"}}},{label:"Shadow",setting:{id:"shadow"},options:{updateFields:[{field:"enable",settingId:"hasActiveShadow"}]},controlChangeTrigger:{settings:[{condition:"shadow.enable === true",source:["shadow","hasActiveShadow"],action:{controlId:"hasActiveShadow",groupType:"advanced",controlType:"advanced",newValue:!0}},{condition:"shadow.enable === false",source:["shadow","hasActiveShadow"],action:{controlId:"hasActiveShadow",groupType:"advanced",controlType:"advanced",newValue:!1}}],options:{noRecordHistory:!0}}}]},{controls:[{label:"Link",setting:{id:"enableImageLink"},options:{labelVariant:"primary",toggleStyle:"switch"}},{layout:"vertical",controlConfig:{id:"linkedToPreSalesPageBanner",type:"banner",message:"Pre-sales page elements with link should redirect to the Sales page."},conditionDisplay:'pageType === "GP_PRE_SALE_PAGE" && enableImageLink == true'},{setting:{id:"imageLink"},conditionDisplay:"enableImageLink === true",layout:"vertical"}]},{label:"SEO",hiddenOnMobile:!0,controls:[{type:"combo",label:"Alt text",iconName:"polaris-text-block",getValueFromSettingID:"alt",compoDefaultValue:"Describes the appearance of the image",isHideClear:!0,controls:[{label:"Content",setting:{id:"alt"},layout:"vertical"}]},{type:"combo",label:"Image title",iconName:"polaris-text-block",getValueFromSettingID:"title",isHideClear:!0,compoDefaultValue:"Title",controls:[{label:"Content",setting:{id:"title"},layout:"vertical"}]}]},{label:"Optimize LCP",hiddenOnMobile:!0,controls:[{label:"Preload",setting:{id:"priority"}},{label:"Quality",setting:{id:"qualityType"},options:{disableMessage:"This setting only works with images uploaded to Shopify"},conditionEnable:"(activeScreenId === \"desktop\" && srcSet?.src && srcSet.src.includes('cdn.shopify.com')) || (activeScreenId === \"tablet\" && srcSet?.src && srcSet.src.includes('cdn.shopify.com')) || (activeScreenId === \"mobile\" && srcSet?.src && srcSet.src.includes('cdn.shopify.com'))",conditionDisplay:"priority === false"},{layout:"horizontal",label:"Quality",conditionDisplay:'qualityType == "custom" && priority === false && ((activeScreenId === "desktop" && srcSet?.src && srcSet.src.includes("cdn.shopify.com")) || (activeScreenId === "tablet" && srcSet?.src && srcSet.src.includes("cdn.shopify.com")) || (activeScreenId === "mobile" && srcSet?.src && srcSet.src.includes("cdn.shopify.com")))',setting:{id:"qualityPercent"}}]},{controls:[{label:"Align",hiddenOnMobile:!0,setting:{id:"align"},conditionEnable:'!(shape.width === "default" || (parseInt(shape.width) >= 100 && shape.width?.includes("%")))',options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Horizontal alignment is disabled when the width is set to 100% or greater"}}]}];export{e as SettingUIV2};
1
+ let e=[{label:"Style",controls:[{setting:{id:"imageStyle"},layout:"vertical",controlChangeTrigger:{settings:[{condition:'imageStyle==="circle"',source:["imageStyle"],action:{controlId:"shape",newValue:{shape:"square",shapeValue:"1/1",shapeLinked:!0,width:"80px"},groupType:"style",controlType:"style"}},{condition:'imageStyle==="circle"',source:["imageStyle"],action:{controlId:"borderRadius",newValue:{bblr:"9999px",btrr:"9999px",bbrr:"9999px",btlr:"9999px",radiusType:"circle"},groupType:"style",controlType:"style"}},{condition:'imageStyle==="circle"',source:["imageStyle"],action:{controlId:"wrapperBorder",newValue:{border:"none",color:"transparent",borderWidth:"0px"},groupType:"style",controlType:"style"}},{condition:'imageStyle==="rectangle"',source:["imageStyle"],action:{controlId:"wrapperBorder",newValue:{border:"none",color:"transparent",borderWidth:"0px"},groupType:"style",controlType:"style"}},{condition:'imageStyle==="circle"',source:["imageStyle"],action:{controlId:"shadow",newValue:{enable:!1},groupType:"style",controlType:"style"}},{condition:'imageStyle==="rectangle"',source:["imageStyle"],action:{controlId:"shadow",newValue:{enable:!1},groupType:"style",controlType:"style"}},{condition:'imageStyle==="rectangle"',source:["imageStyle"],action:{controlId:"shape",newValue:{shape:"original",shapeValue:"",width:"100%"},groupType:"style",controlType:"style"}},{condition:'imageStyle==="rectangle"',source:["imageStyle"],action:{controlId:"borderRadius",newValue:{bblr:"0px",btrr:"0px",bbrr:"0px",btlr:"0px",radiusType:"none"},groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}}]},{label:"Source",controls:[{conditionDisplay:"isAdaptive === false",setting:{id:"image"},layout:"vertical",options:{updateFields:[{field:"preload",settingId:"priority"},{field:"altText",settingId:"alt"},{field:"imageTitle",settingId:"title"}]},controlChangeTrigger:{settings:[{action:{controlId:"priority",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"alt",valueFromField:"altText",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"title",valueFromField:"imageTitle",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}},{conditionDisplay:"isAdaptive === true",setting:{id:"srcSet"},layout:"vertical",options:{updateFields:[{field:"preload",settingId:"priority"},{field:"altText",settingId:"alt"},{field:"imageTitle",settingId:"title"}]},controlChangeTrigger:{settings:[{action:{controlId:"priority",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"alt",valueFromField:"altText",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"title",valueFromField:"imageTitle",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"Scale",setting:{id:"objectFit"},conditionDisplay:'shape.shape !== "original"'}]},{label:"Size",hiddenOnMobile:!0,controls:[{setting:{id:"shape"},layout:"vertical"}]},{label:"Shape",hiddenOnMobile:!0,controls:[{label:"Border",controlConfig:{id:"border",type:"border-v2",linkWithSetting:{name:"wrapperBorder"}}},{label:"Corner",controlConfig:{id:"corner",type:"corner-v2",linkWithSetting:{name:"borderRadius"}}},{label:"Shadow",setting:{id:"shadow"},options:{updateFields:[{field:"enable",settingId:"hasActiveShadow"}]},controlChangeTrigger:{settings:[{condition:"shadow.enable === true",source:["shadow","hasActiveShadow"],action:{controlId:"hasActiveShadow",groupType:"advanced",controlType:"advanced",newValue:!0}},{condition:"shadow.enable === false",source:["shadow","hasActiveShadow"],action:{controlId:"hasActiveShadow",groupType:"advanced",controlType:"advanced",newValue:!1}}],options:{noRecordHistory:!0}}}]},{controls:[{label:"Link",setting:{id:"enableImageLink"},options:{labelVariant:"primary",toggleStyle:"switch"}},{layout:"vertical",controlConfig:{id:"linkedToPreSalesPageBanner",type:"banner",message:"Pre-sales page elements with link should redirect to the Sales page."},conditionDisplay:'pageType === "GP_PRE_SALE_PAGE" && enableImageLink == true'},{setting:{id:"imageLink"},conditionDisplay:"enableImageLink === true",layout:"vertical"}]},{label:"SEO",hiddenOnMobile:!0,controls:[{type:"combo",label:"Alt text",iconName:"polaris-text-block",getValueFromSettingID:"alt",compoDefaultValue:"Describes the appearance of the image",isHideClear:!0,controls:[{label:"Content",setting:{id:"alt"},layout:"vertical"}]},{type:"combo",label:"Image title",iconName:"polaris-text-block",getValueFromSettingID:"title",isHideClear:!0,compoDefaultValue:"Title",controls:[{label:"Content",setting:{id:"title"},layout:"vertical"}]}]},{label:"Optimize LCP",conditionDisplay:'pageType !== "STATIC"',hiddenOnMobile:!0,controls:[{label:"Preload",setting:{id:"priority"}},{label:"Quality",setting:{id:"qualityType"},options:{disableMessage:"This setting only works with images uploaded to Shopify"},conditionEnable:"(activeScreenId === \"desktop\" && srcSet?.src && srcSet.src.includes('cdn.shopify.com')) || (activeScreenId === \"tablet\" && srcSet?.src && srcSet.src.includes('cdn.shopify.com')) || (activeScreenId === \"mobile\" && srcSet?.src && srcSet.src.includes('cdn.shopify.com'))",conditionDisplay:"priority === false"},{layout:"horizontal",label:"Quality",conditionDisplay:'qualityType == "custom" && priority === false && ((activeScreenId === "desktop" && srcSet?.src && srcSet.src.includes("cdn.shopify.com")) || (activeScreenId === "tablet" && srcSet?.src && srcSet.src.includes("cdn.shopify.com")) || (activeScreenId === "mobile" && srcSet?.src && srcSet.src.includes("cdn.shopify.com")))',setting:{id:"qualityPercent"}}]},{controls:[{label:"Align",hiddenOnMobile:!0,setting:{id:"align"},conditionEnable:'!(shape.width === "default" || (parseInt(shape.width) >= 100 && shape.width?.includes("%")))',options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Horizontal alignment is disabled when the width is set to 100% or greater"}}]}];export{e as SettingUIV2};
package/dist/esm/image-comparison/settings/configs/ui-v2.js CHANGED
@@ -1 +1 @@
1
- let e=[{label:"Layout",controls:[{setting:{id:"direction"},layout:"vertical",options:{fullWidth:!0}}]},{label:"Image",controls:[{label:"1st image",setting:{id:"imageLeft"},options:{updateFields:[{field:"preload",settingId:"preload"},{field:"altText",settingId:"altLeft"},{field:"imageTitle",settingId:"titleLeft"}]},controlChangeTrigger:{settings:[{action:{controlId:"preload",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"altLeft",valueFromField:"altText",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"titleLeft",valueFromField:"imageTitle",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"2nd image",setting:{id:"imageRight"},options:{updateFields:[{field:"preload",settingId:"preload"},{field:"altText",settingId:"altRight"},{field:"imageTitle",settingId:"titleRight"}]},controlChangeTrigger:{settings:[{action:{controlId:"preload",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"altRight",valueFromField:"altText",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"titleRight",valueFromField:"imageTitle",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"Scale",setting:{id:"imageScale"}}]},{label:"Slider",controls:[{label:"Behavior",setting:{id:"hoverToSlide"}},{label:"Default ratio",setting:{id:"defaultPercentage"}}]},{controls:[{label:"Badge",hiddenOnMobile:!0,setting:{id:"enableLabel"},options:{labelVariant:"primary",toggleStyle:"switch"}},{label:"1st",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"leftImageLabel"}},{label:"2nd",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"rightImageLabel"}},{conditionDisplay:"enableLabel === true",label:"Text style",hiddenOnMobile:!0,setting:{id:"typo"},options:{updateFields:[{field:"attrs.color",settingId:"labelTextColor"}]},controlChangeTrigger:{settings:[{action:{controlId:"labelTextColor",valueFromField:"attrs.color",groupType:"style",controlType:"style",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"Padding",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"labelPadding"}},{label:"Background",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"labelBackgroundColor"}},{label:"Border",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"labelBorder"}},{label:"Corner",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"labelRounded"}},{label:"Shadow",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"labelShadow"}},{label:"Position",hiddenOnMobile:!0,setting:{id:"labelPositionHoz"},conditionDisplay:"enableLabel === true && direction === 'horizontal'"},{label:"Position",hiddenOnMobile:!0,setting:{id:"labelPositionVer"},conditionDisplay:"enableLabel === true && direction === 'vertical'"}]},{label:"Size",hiddenOnMobile:!0,controls:[{label:"Frame",setting:{id:"aspectRatio"}},{label:"Ratio",conditionDisplay:"aspectRatio === 'custom'",setting:{id:"customAspectRadio"}},{label:"Width",setting:{id:"width"}}]},{label:"Shape",hiddenOnMobile:!0,controls:[{label:"Border",setting:{id:"border",state:"normal"}},{label:"Corner",setting:{id:"rounded",state:"normal"}},{label:"Shadow",setting:{id:"boxShadow",state:"normal"},options:{updateFields:[{field:"normal.enable",settingId:"hasBoxShadow",state:"normal"}]},controlChangeTrigger:{settings:[{condition:"boxShadow.normal.enable === true",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!0}},{condition:"boxShadow.normal.enable === false",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!1}}],options:{noRecordHistory:!0}}}]},{label:"Optimize LCP",hiddenOnMobile:!0,controls:[{label:"Preload",setting:{id:"preload"}},{label:"Quality",conditionEnable:"((imageLeft.src || imageRight.src) && (imageLeft.src.includes('cdn.shopify.com') || imageRight.src.includes('cdn.shopify.com')))",conditionDisplay:"preload === false",setting:{id:"qualityType"},options:{fullWidth:!0,disableMessage:"This setting only works with images uploaded to Shopify"}},{layout:"horizontal",label:"Quality",conditionDisplay:'qualityType == "custom" && preload === false && ((imageLeft.src || imageRight.src) && (imageLeft.src.includes("cdn.shopify.com") || imageRight.src.includes("cdn.shopify.com"))) ',setting:{id:"qualityPercent"}}]},{label:"SEO",hiddenOnMobile:!0,controls:[{label:"1st image",type:"combo",iconName:"polaris-text-title",fixedValue:"Edit",popoverLabel:"SEO",setting:{id:"enableSEOLeft"},controls:[{label:"Alt text",options:{labelAlign:"top"},setting:{id:"altLeft"}},{label:"Image title",options:{labelAlign:"top"},setting:{id:"titleLeft"}}]},{label:"2nd image",type:"combo",iconName:"polaris-text-title",fixedValue:"Edit",setting:{id:"enableSEORight"},popoverLabel:"SEO",controls:[{label:"Alt text",options:{labelAlign:"top"},setting:{id:"altRight"}},{label:"Image title",options:{labelAlign:"top"},setting:{id:"titleRight"}}]}]},{controls:[{label:"Align",hiddenOnMobile:!0,conditionEnable:'!(width === "default" || (parseInt(width) >= 100 && width?.includes("%")))',setting:{id:"align"},options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Align is not supported when width is 100%"}}]}];export{e as SettingUIV2};
1
+ let e=[{label:"Layout",controls:[{setting:{id:"direction"},layout:"vertical",options:{fullWidth:!0}}]},{label:"Image",controls:[{label:"1st image",setting:{id:"imageLeft"},options:{updateFields:[{field:"preload",settingId:"preload"},{field:"altText",settingId:"altLeft"},{field:"imageTitle",settingId:"titleLeft"}]},controlChangeTrigger:{settings:[{action:{controlId:"preload",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"altLeft",valueFromField:"altText",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"titleLeft",valueFromField:"imageTitle",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"2nd image",setting:{id:"imageRight"},options:{updateFields:[{field:"preload",settingId:"preload"},{field:"altText",settingId:"altRight"},{field:"imageTitle",settingId:"titleRight"}]},controlChangeTrigger:{settings:[{action:{controlId:"preload",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"altRight",valueFromField:"altText",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"titleRight",valueFromField:"imageTitle",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"Scale",setting:{id:"imageScale"}}]},{label:"Slider",controls:[{label:"Behavior",setting:{id:"hoverToSlide"}},{label:"Default ratio",setting:{id:"defaultPercentage"}}]},{controls:[{label:"Badge",hiddenOnMobile:!0,setting:{id:"enableLabel"},options:{labelVariant:"primary",toggleStyle:"switch"}},{label:"1st",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"leftImageLabel"}},{label:"2nd",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"rightImageLabel"}},{conditionDisplay:"enableLabel === true",label:"Text style",hiddenOnMobile:!0,setting:{id:"typo"},options:{updateFields:[{field:"attrs.color",settingId:"labelTextColor"}]},controlChangeTrigger:{settings:[{action:{controlId:"labelTextColor",valueFromField:"attrs.color",groupType:"style",controlType:"style",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"Padding",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"labelPadding"}},{label:"Background",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"labelBackgroundColor"}},{label:"Border",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"labelBorder"}},{label:"Corner",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"labelRounded"}},{label:"Shadow",hiddenOnMobile:!0,conditionDisplay:"enableLabel === true",setting:{id:"labelShadow"}},{label:"Position",hiddenOnMobile:!0,setting:{id:"labelPositionHoz"},conditionDisplay:"enableLabel === true && direction === 'horizontal'"},{label:"Position",hiddenOnMobile:!0,setting:{id:"labelPositionVer"},conditionDisplay:"enableLabel === true && direction === 'vertical'"}]},{label:"Size",hiddenOnMobile:!0,controls:[{label:"Frame",setting:{id:"aspectRatio"}},{label:"Ratio",conditionDisplay:"aspectRatio === 'custom'",setting:{id:"customAspectRadio"}},{label:"Width",setting:{id:"width"}}]},{label:"Shape",hiddenOnMobile:!0,controls:[{label:"Border",setting:{id:"border",state:"normal"}},{label:"Corner",setting:{id:"rounded",state:"normal"}},{label:"Shadow",setting:{id:"boxShadow",state:"normal"},options:{updateFields:[{field:"normal.enable",settingId:"hasBoxShadow",state:"normal"}]},controlChangeTrigger:{settings:[{condition:"boxShadow.normal.enable === true",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!0}},{condition:"boxShadow.normal.enable === false",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!1}}],options:{noRecordHistory:!0}}}]},{label:"Optimize LCP",conditionDisplay:'pageType !== "STATIC"',hiddenOnMobile:!0,controls:[{label:"Preload",setting:{id:"preload"}},{label:"Quality",conditionEnable:"((imageLeft.src || imageRight.src) && (imageLeft.src.includes('cdn.shopify.com') || imageRight.src.includes('cdn.shopify.com')))",conditionDisplay:"preload === false",setting:{id:"qualityType"},options:{fullWidth:!0,disableMessage:"This setting only works with images uploaded to Shopify"}},{layout:"horizontal",label:"Quality",conditionDisplay:'qualityType == "custom" && preload === false && ((imageLeft.src || imageRight.src) && (imageLeft.src.includes("cdn.shopify.com") || imageRight.src.includes("cdn.shopify.com"))) ',setting:{id:"qualityPercent"}}]},{label:"SEO",hiddenOnMobile:!0,controls:[{label:"1st image",type:"combo",iconName:"polaris-text-title",fixedValue:"Edit",popoverLabel:"SEO",setting:{id:"enableSEOLeft"},controls:[{label:"Alt text",options:{labelAlign:"top"},setting:{id:"altLeft"}},{label:"Image title",options:{labelAlign:"top"},setting:{id:"titleLeft"}}]},{label:"2nd image",type:"combo",iconName:"polaris-text-title",fixedValue:"Edit",setting:{id:"enableSEORight"},popoverLabel:"SEO",controls:[{label:"Alt text",options:{labelAlign:"top"},setting:{id:"altRight"}},{label:"Image title",options:{labelAlign:"top"},setting:{id:"titleRight"}}]}]},{controls:[{label:"Align",hiddenOnMobile:!0,conditionEnable:'!(width === "default" || (parseInt(width) >= 100 && width?.includes("%")))',setting:{id:"align"},options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Align is not supported when width is 100%"}}]}];export{e as SettingUIV2};
package/dist/esm/product/settings/product-image-v3/configs/ui-v2.js CHANGED
@@ -1 +1 @@
1
- import{ImageListNavigation as i}from"./ui/ImageListNavigation.js";import{FeatureNavigation as o}from"./ui/FeatureNavigation.js";import{FeatureDots as t}from"./ui/FeatureDots.js";let e='((type == "slider" || position == "left" || position == "right") && position !== "one-col" && position != "two-col")',n='(["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position))',l=[{label:"Layout",controls:[{layout:"vertical",setting:{id:"position"},options:{isComboLayout:!0},controls:[{label:"Ratio",type:"control",setting:{id:"ratioLayout"},layout:"vertical",conditionDisplay:'position == "left"'},{label:"Ratio",type:"control",setting:{id:"ratioLayoutRight"},layout:"vertical",conditionDisplay:'position == "right"'}]}]},{label:"Featured image",conditionDisplay:n,controls:[{setting:{id:"ftShape"},hiddenOnMobile:!0,layout:"vertical",controlChangeTrigger:{settings:[{condition:"ftShape.shape === 'original'",source:["ftShape"],action:{controlId:"ftLayout",newValue:"contain",groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}},{conditionDisplay:"ftShape.shape !== 'original'",label:"Image scale",setting:{id:"ftLayout"}},{...t,hiddenOnMobile:!0,conditionDisplay:`${n} && position === "only-feature"`},{...o,hiddenOnMobile:!0,conditionDisplay:`${n}`}],moreSettings:{type:"collapse",controls:[{label:"Corner",setting:{id:"ftCorner"},hiddenOnMobile:!0},{type:"combo",label:"Hover action",conditionDisplay:n,iconName:"gp-trigger-action-hover",getValueFromSettingID:"hoverEffect",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"zoom",hiddenOnMobile:!0,controls:[{label:"When hover",setting:{id:"hoverEffect"}},{label:"Zoom type",conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoomType"}},{label:"Zoom value",conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoom"}},{label:"Other image",conditionDisplay:'hoverEffect == "other"',setting:{id:"otherImage"}}]},{type:"combo",label:"Click action",hiddenOnMobile:!0,iconName:"gp-trigger-action-click",conditionDisplay:n,getValueFromSettingID:"ftClickOpenLightBox",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"popup",controls:[{label:"After click",setting:{id:"ftClickOpenLightBox"}},{label:"Open new tab",setting:{id:"ftClickOpenNewTab"},conditionDisplay:'ftClickOpenLightBox === "product-link"'}]},{type:"control",label:"Slide speed",setting:{id:"ftAnimationSpeed"}},{type:"control",label:"Animation",setting:{id:"ftAnimationMode"}},{label:"Drag / swipe",setting:{id:"ftDragToScroll"}},{label:"Infinity loop",setting:{id:"ftLoop"}}]}},{label:"Image list",conditionDisplay:'(position !== "only-feature")',controls:[{label:"Display",hiddenOnMobile:!0,conditionDisplay:'position === "bottom-center" || position === "bottom-left" || position === "inside-bottom"',setting:{id:"type"}},{setting:{id:"shape"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'["left", "right"].includes(position)'},{setting:{id:"shapeForBottom"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'["bottom-left", "bottom-center"].includes(position)'},{setting:{id:"shapeForInsideBottom"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'["inside-bottom"].includes(position)'},{setting:{id:"shapeForInside"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'["inside-left", "inside-right"].includes(position)'},{setting:{id:"shapeForFtOnly"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'position == "only-feature"'},{setting:{id:"shapeFor2Col"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'position == "two-col"'},{setting:{id:"shapeFor1Col"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'position == "one-col"'},{label:"Image gap",setting:{id:"itemSpacing"}},{conditionDisplay:"(position == 'one-col' && shapeFor1Col.shape !== 'original') || (position == 'two-col' && shapeFor2Col.shape !== 'original') || (position == 'only-feature' && shapeForFtOnly.shape !== 'original') || ([\"inside-left\", \"inside-right\"].includes(position) && shapeForInside.shape !== 'original') || ([\"inside-bottom\"].includes(position) && shapeForInsideBottom.shape !== 'original') || ([\"bottom-left\", \"bottom-center\"].includes(position) && shapeForBottom.shape !== 'original') || ([\"left\", \"right\"].includes(position) && shape.shape !== 'original')",label:"Image scale",setting:{id:"layout"}},{...i,hiddenOnMobile:!0,conditionDisplay:e}],moreSettings:{type:"collapse",controls:[{label:"Corner",hiddenOnMobile:!0,setting:{id:"corner"}},{label:"Active border",hiddenOnMobile:!0,conditionDisplay:'!["one-col", "two-col"].includes(position)',setting:{id:"borderActive"}},{type:"combo",label:"Hover action",conditionDisplay:'(position == "one-col" || position == "two-col")',iconName:"gp-trigger-action-hover",getValueFromSettingID:"galleryHoverEffect",defaultValueWhenClear:"none",hiddenOnMobile:!0,compoDefaultValue:"zoom",controls:[{label:"When hover",setting:{id:"galleryHoverEffect"},conditionDisplay:'galleryHoverEffect == "none"'},{label:"Zoom type",conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoomType"}},{label:"Zoom value",conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoom"}},{label:"Other image",conditionDisplay:'galleryHoverEffect == "other"',setting:{id:"otherImage"}}]},{label:"Click action",setting:{id:"clickOpenLightBox"}},{conditionDisplay:e,label:"Drag / swipe",setting:{id:"dragToScroll"}},{conditionDisplay:e,label:"Infinity loop",setting:{id:"loop"}}]}},{label:"Item spacing",hiddenOnMobile:!0,conditionDisplay:'["bottom-center", "left", "right", "inside-bottom", "inside-left", "inside-right"].includes(position)',controls:[{label:"Gap",setting:{id:"spacing"}}]},{label:"Display condition",controls:[{conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',label:"Default item",setting:{id:"preDisplay"}},{label:"Image list",setting:{id:"filterByVariant"}}],messageConfig:{type:"info",message:'Image list can display based on the selected variants. <a class="text-white" target="_blank" href="https://gempages.co/display-selected-variant">How to setup</a>'}},{label:"Optimize LCP",controls:[{label:"Preload",conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',setting:{id:"preload"}},{label:"Quality",setting:{id:"qualityType"},conditionDisplay:"preload === false"},{layout:"horizontal",label:"Quality",conditionDisplay:'qualityType == "custom" && preload === false',setting:{id:"qualityPercent"}}]},{hiddenOnMobile:!0,controls:[{label:"Align",setting:{id:"align"},options:{labelVariant:"primary"}}]}];export{l as SettingUIV2};
1
+ import{ImageListNavigation as i}from"./ui/ImageListNavigation.js";import{FeatureNavigation as o}from"./ui/FeatureNavigation.js";import{FeatureDots as t}from"./ui/FeatureDots.js";let e='((type == "slider" || position == "left" || position == "right") && position !== "one-col" && position != "two-col")',n='(["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position))',l=[{label:"Layout",controls:[{layout:"vertical",setting:{id:"position"},options:{isComboLayout:!0},controls:[{label:"Ratio",type:"control",setting:{id:"ratioLayout"},layout:"vertical",conditionDisplay:'position == "left"'},{label:"Ratio",type:"control",setting:{id:"ratioLayoutRight"},layout:"vertical",conditionDisplay:'position == "right"'}]}]},{label:"Featured image",conditionDisplay:n,controls:[{setting:{id:"ftShape"},hiddenOnMobile:!0,layout:"vertical",controlChangeTrigger:{settings:[{condition:"ftShape.shape === 'original'",source:["ftShape"],action:{controlId:"ftLayout",newValue:"contain",groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}},{conditionDisplay:"ftShape.shape !== 'original'",label:"Image scale",setting:{id:"ftLayout"}},{...t,hiddenOnMobile:!0,conditionDisplay:`${n} && position === "only-feature"`},{...o,hiddenOnMobile:!0,conditionDisplay:`${n}`}],moreSettings:{type:"collapse",controls:[{label:"Corner",setting:{id:"ftCorner"},hiddenOnMobile:!0},{type:"combo",label:"Hover action",conditionDisplay:n,iconName:"gp-trigger-action-hover",getValueFromSettingID:"hoverEffect",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"zoom",hiddenOnMobile:!0,controls:[{label:"When hover",setting:{id:"hoverEffect"}},{label:"Zoom type",conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoomType"}},{label:"Zoom value",conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoom"}},{label:"Other image",conditionDisplay:'hoverEffect == "other"',setting:{id:"otherImage"}}]},{type:"combo",label:"Click action",hiddenOnMobile:!0,iconName:"gp-trigger-action-click",conditionDisplay:n,getValueFromSettingID:"ftClickOpenLightBox",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"popup",controls:[{label:"After click",setting:{id:"ftClickOpenLightBox"}},{label:"Open new tab",setting:{id:"ftClickOpenNewTab"},conditionDisplay:'ftClickOpenLightBox === "product-link"'}]},{type:"control",label:"Slide speed",setting:{id:"ftAnimationSpeed"}},{type:"control",label:"Animation",setting:{id:"ftAnimationMode"}},{label:"Drag / swipe",setting:{id:"ftDragToScroll"}},{label:"Infinity loop",setting:{id:"ftLoop"}}]}},{label:"Image list",conditionDisplay:'(position !== "only-feature")',controls:[{label:"Display",hiddenOnMobile:!0,conditionDisplay:'position === "bottom-center" || position === "bottom-left" || position === "inside-bottom"',setting:{id:"type"}},{setting:{id:"shape"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'["left", "right"].includes(position)'},{setting:{id:"shapeForBottom"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'["bottom-left", "bottom-center"].includes(position)'},{setting:{id:"shapeForInsideBottom"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'["inside-bottom"].includes(position)'},{setting:{id:"shapeForInside"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'["inside-left", "inside-right"].includes(position)'},{setting:{id:"shapeForFtOnly"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'position == "only-feature"'},{setting:{id:"shapeFor2Col"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'position == "two-col"'},{setting:{id:"shapeFor1Col"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'position == "one-col"'},{label:"Image gap",setting:{id:"itemSpacing"}},{conditionDisplay:"(position == 'one-col' && shapeFor1Col.shape !== 'original') || (position == 'two-col' && shapeFor2Col.shape !== 'original') || (position == 'only-feature' && shapeForFtOnly.shape !== 'original') || ([\"inside-left\", \"inside-right\"].includes(position) && shapeForInside.shape !== 'original') || ([\"inside-bottom\"].includes(position) && shapeForInsideBottom.shape !== 'original') || ([\"bottom-left\", \"bottom-center\"].includes(position) && shapeForBottom.shape !== 'original') || ([\"left\", \"right\"].includes(position) && shape.shape !== 'original')",label:"Image scale",setting:{id:"layout"}},{...i,hiddenOnMobile:!0,conditionDisplay:e}],moreSettings:{type:"collapse",controls:[{label:"Corner",hiddenOnMobile:!0,setting:{id:"corner"}},{label:"Active border",hiddenOnMobile:!0,conditionDisplay:'!["one-col", "two-col"].includes(position)',setting:{id:"borderActive"}},{type:"combo",label:"Hover action",conditionDisplay:'(position == "one-col" || position == "two-col")',iconName:"gp-trigger-action-hover",getValueFromSettingID:"galleryHoverEffect",defaultValueWhenClear:"none",hiddenOnMobile:!0,compoDefaultValue:"zoom",controls:[{label:"When hover",setting:{id:"galleryHoverEffect"},conditionDisplay:'galleryHoverEffect == "none"'},{label:"Zoom type",conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoomType"}},{label:"Zoom value",conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoom"}},{label:"Other image",conditionDisplay:'galleryHoverEffect == "other"',setting:{id:"otherImage"}}]},{label:"Click action",setting:{id:"clickOpenLightBox"}},{conditionDisplay:e,label:"Drag / swipe",setting:{id:"dragToScroll"}},{conditionDisplay:e,label:"Infinity loop",setting:{id:"loop"}}]}},{label:"Item spacing",hiddenOnMobile:!0,conditionDisplay:'["bottom-center", "left", "right", "inside-bottom", "inside-left", "inside-right"].includes(position)',controls:[{label:"Gap",setting:{id:"spacing"}}]},{label:"Display condition",controls:[{conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',label:"Default item",setting:{id:"preDisplay"}},{label:"Image list",setting:{id:"filterByVariant"}}],messageConfig:{type:"info",message:'Image list can display based on the selected variants. <a class="text-white" target="_blank" href="https://gempages.co/display-selected-variant">How to setup</a>'}},{label:"Optimize LCP",conditionDisplay:'pageType !== "STATIC"',controls:[{label:"Preload",conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',setting:{id:"preload"}},{label:"Quality",setting:{id:"qualityType"},conditionDisplay:"preload === false"},{layout:"horizontal",label:"Quality",conditionDisplay:'qualityType == "custom" && preload === false',setting:{id:"qualityPercent"}}]},{hiddenOnMobile:!0,controls:[{label:"Align",setting:{id:"align"},options:{labelVariant:"primary"}}]}];export{l as SettingUIV2};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/components",
3
- "version": "17.0.0-dev.73",
3
+ "version": "17.0.0-dev.75",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",