@gem-sdk/components 15.0.4 → 16.0.0

package/dist/esm/icon-list/settings/configs/ui-v2.js

@@ -1 +1 @@
-let SettingUIV2=[{label:{en:"Item management"},controls:[{label:{en:"Order"},setting:{id:"childItem"}}]},{label:{en:"Item spacing"},controls:[{label:{en:"Gap"},setting:{id:"verticalSpacing"}}]},{label:{en:"Item style"},moreSettings:{controls:[{label:{en:"Padding"},controlConfig:{id:"padding-item-padding",type:"padding-v2",linkWithSetting:{name:"itemPadding",field:"padding"},compoDefaultValue:{desktop:{default:{type:"medium",top:"8px",bottom:"8px",left:"16px",right:"16px"}}}}},{label:{en:"Background"},setting:{id:"itemBackgroundColor"}},{label:{en:"Border"},setting:{id:"itemBorder"}},{label:{en:"Corner"},setting:{id:"itemRounded"}},{label:{en:"Shadow"},setting:{id:"itemBoxShadow"}}]},controls:[{label:{en:"Icon & text gap"},setting:{id:"horizontalSpacing"}}]},{label:{en:"Size"},controls:[{id:"Width",label:{en:"Width"},controlConfig:{id:"width",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,fallbackValue:"Auto",linkWithSetting:{name:"globalSize",field:"width"},displayOptions:[{label:"Fit content",value:"Auto",showValue:!0},{label:"Full",value:"100%",showValue:!0}]},layout:"horizontal"},{label:{en:"Padding"},controlConfig:{id:"padding",type:"padding-v2",linkWithSetting:{name:"spacing-setting",field:"padding"},compoDefaultValue:{desktop:{default:{type:"medium",top:"16px",bottom:"16px",left:"16px",right:"16px"}}}}},{label:{en:"Arrange"},setting:{id:"align"},options:{fullWidth:!0},conditionDisplay:"globalSize.width !== 'Auto'"}]},{label:{en:"Background"},controls:[{setting:{id:"background"},layout:"vertical",options:{updateFields:[{field:"preload",settingId:"preload"}]},controlChangeTrigger:{settings:[{action:{controlId:"preload",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}}]},{label:{en:"Shape"},controls:[{label:{en:"Border"},setting:{id:"border",state:"normal"}},{label:{en:"Corner"},setting:{id:"rounded",state:"normal"}},{label:{en:"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}}}]},{controls:[{label:{en:"Align"},conditionEnable:'!(parseInt(globalSize.width) >= 100 && globalSize.width?.includes("%"))',setting:{id:"alignWrapper"},options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Align is not supported when width is 100%"}}]}];export{SettingUIV2};
+let SettingUIV2=[{label:"Item management",controls:[{label:"Order",setting:{id:"childItem"}}]},{label:"Item spacing",controls:[{label:"Gap",setting:{id:"verticalSpacing"}}]},{label:"Item style",moreSettings:{controls:[{label:"Padding",controlConfig:{id:"padding-item-padding",type:"padding-v2",linkWithSetting:{name:"itemPadding",field:"padding"},compoDefaultValue:{desktop:{default:{type:"medium",top:"8px",bottom:"8px",left:"16px",right:"16px"}}}}},{label:"Background",setting:{id:"itemBackgroundColor"}},{label:"Border",setting:{id:"itemBorder"}},{label:"Corner",setting:{id:"itemRounded"}},{label:"Shadow",setting:{id:"itemBoxShadow"}}]},controls:[{label:"Icon & text gap",setting:{id:"horizontalSpacing"}}]},{label:"Size",controls:[{id:"Width",label:"Width",controlConfig:{id:"width",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,fallbackValue:"Auto",linkWithSetting:{name:"globalSize",field:"width"},displayOptions:[{label:"Fit content",value:"Auto",showValue:!0},{label:"Full",value:"100%",showValue:!0}]},layout:"horizontal"},{label:"Padding",controlConfig:{id:"padding",type:"padding-v2",linkWithSetting:{name:"spacing-setting",field:"padding"},compoDefaultValue:{desktop:{default:{type:"medium",top:"16px",bottom:"16px",left:"16px",right:"16px"}}}}},{label:"Arrange",setting:{id:"align"},options:{fullWidth:!0},conditionDisplay:"globalSize.width !== 'Auto'"}]},{label:"Background",controls:[{setting:{id:"background"},layout:"vertical",options:{updateFields:[{field:"preload",settingId:"preload"}]},controlChangeTrigger:{settings:[{action:{controlId:"preload",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}}]},{label:"Shape",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}}}]},{controls:[{label:"Align",conditionEnable:'!(parseInt(globalSize.width) >= 100 && globalSize.width?.includes("%"))',setting:{id:"alignWrapper"},options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Align is not supported when width is 100%"}}]}];export{SettingUIV2};

package/dist/esm/icon-list-hoz/settings/IconListHoz.js

@@ -1,7 +1,7 @@
-import{SettingUIV1 as e}from"./configs/uiV1.js";import{SettingUIV2 as i}from"./configs/uiV2.js";import{IconListHozSettings as o}from"./configs/settings.js";import{IconListHozPreset as t}from"./configs/presets.js";let config={tag:"IconListHoz",label:"Icon List",icon:`
+import{SettingUIV2 as e}from"./configs/uiV2.js";import{IconListHozSettings as i}from"./configs/settings.js";import{IconListHozPreset as o}from"./configs/presets.js";let config={tag:"IconListHoz",label:"Icon List",icon:`
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M12 10.625C11.2406 10.625 10.625 11.2406 10.625 12C10.625 12.7594 11.2406 13.375 12 13.375C12.7594 13.375 13.375 12.7594 13.375 12C13.375 11.2406 12.7594 10.625 12 10.625ZM9.125 12C9.125 10.4122 10.4122 9.125 12 9.125C13.5878 9.125 14.875 10.4122 14.875 12C14.875 13.5878 13.5878 14.875 12 14.875C10.4122 14.875 9.125 13.5878 9.125 12Z" fill="white"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M19.625 10.6251C18.8656 10.6251 18.25 11.2407 18.25 12.0001C18.25 12.7595 18.8656 13.3751 19.625 13.3751C20.3844 13.3751 21 12.7595 21 12.0001C21 11.2407 20.3844 10.6251 19.625 10.6251ZM16.75 12.0001C16.75 10.4123 18.0372 9.12512 19.625 9.12512C21.2128 9.12512 22.5 10.4123 22.5 12.0001C22.5 13.5879 21.2128 14.8751 19.625 14.8751C18.0372 14.8751 16.75 13.5879 16.75 12.0001Z" fill="white"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M4.375 10.6251C3.61561 10.6251 3 11.2407 3 12.0001C3 12.7595 3.61561 13.3751 4.375 13.3751C5.13439 13.3751 5.75 12.7595 5.75 12.0001C5.75 11.2407 5.13439 10.6251 4.375 10.6251ZM1.5 12.0001C1.5 10.4123 2.78718 9.12512 4.375 9.12512C5.96282 9.12512 7.25 10.4123 7.25 12.0001C7.25 13.5879 5.96282 14.8751 4.375 14.8751C2.78718 14.8751 1.5 13.5879 1.5 12.0001Z" fill="white"/>
 </svg>
-  `,settings:o,ui:e,uiV2:i,presets:t,locales:{editor:{en:{icons_not_found:"Icons not found"}}},rootOverride:{advanced:{"spacing-setting":{desktop:{margin:{bottom:0}}}}}};export{config as default};
+  `,settings:i,ui:[],uiV2:e,presets:o,locales:{editor:{en:{icons_not_found:"Icons not found"}}},rootOverride:{advanced:{"spacing-setting":{desktop:{margin:{bottom:0}}}}}};export{config as default};

package/dist/esm/icon-list-hoz/settings/configs/presets.js

@@ -1,4 +1,4 @@
-import{itemChildrenTemplate as L,itemSystemStarTemplate as C,itemChildrenHalfStarTemplate as t}from"../ItemTemplate.js";let IconListHozPreset=[{id:"icon-list-hoz",name:{en:"Icon List"},icon:{desktop:`
+import{itemChildrenTemplate as L,itemSystemStarTemplate as C,itemChildrenHalfStarTemplate as t}from"../ItemTemplate.js";let IconListHozPreset=[{id:"icon-list-hoz",name:"Icon List",icon:{desktop:`
           <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M15.6863 18.586C15.8147 18.3258 16.1856 18.3258 16.314 18.586L17.8598 21.7181C17.9108 21.8214 18.0094 21.893 18.1234 21.9096L21.5799 22.4119C21.867 22.4536 21.9816 22.8064 21.7739 23.0089L19.2727 25.4469C19.1902 25.5273 19.1526 25.6432 19.1721 25.7567L19.7625 29.1993C19.8115 29.4852 19.5114 29.7032 19.2547 29.5683L16.163 27.9429C16.0611 27.8893 15.9393 27.8893 15.8373 27.9429L12.7457 29.5683C12.4889 29.7032 12.1888 29.4852 12.2378 29.1993L12.8283 25.7567C12.8478 25.6432 12.8101 25.5273 12.7276 25.4469L10.2264 23.0089C10.0187 22.8064 10.1333 22.4536 10.4204 22.4119L13.877 21.9096C13.991 21.893 14.0895 21.8214 14.1405 21.7181L15.6863 18.586Z" fill="#F9F9F9"/>
 <path d="M31.6863 18.586C31.8147 18.3258 32.1856 18.3258 32.314 18.586L33.8598 21.7181C33.9108 21.8214 34.0094 21.893 34.1234 21.9096L37.5799 22.4119C37.867 22.4536 37.9816 22.8064 37.7739 23.0089L35.2727 25.4469C35.1902 25.5273 35.1526 25.6432 35.1721 25.7567L35.7625 29.1993C35.8115 29.4852 35.5114 29.7032 35.2547 29.5683L32.163 27.9429C32.0611 27.8893 31.9393 27.8893 31.8373 27.9429L28.7457 29.5683C28.4889 29.7032 28.1888 29.4852 28.2378 29.1993L28.8283 25.7567C28.8478 25.6432 28.8101 25.5273 28.7276 25.4469L26.2264 23.0089C26.0187 22.8064 26.1333 22.4536 26.4204 22.4119L29.877 21.9096C29.991 21.893 30.0895 21.8214 30.1405 21.7181L31.6863 18.586Z" fill="#F9F9F9"/>
@@ -6,7 +6,7 @@ import{itemChildrenTemplate as L,itemSystemStarTemplate as C,itemChildrenHalfSta
 <path d="M63.6863 18.586C63.8147 18.3258 64.1856 18.3258 64.314 18.586L65.8598 21.7181C65.9108 21.8214 66.0094 21.893 66.1234 21.9096L69.5799 22.4119C69.867 22.4536 69.9816 22.8064 69.7739 23.0089L67.2727 25.4469C67.1902 25.5273 67.1526 25.6432 67.1721 25.7567L67.7625 29.1993C67.8115 29.4852 67.5114 29.7032 67.2547 29.5683L64.163 27.9429C64.0611 27.8893 63.9393 27.8893 63.8373 27.9429L60.7457 29.5683C60.4889 29.7032 60.1888 29.4852 60.2378 29.1993L60.8283 25.7567C60.8478 25.6432 60.8101 25.5273 60.7276 25.4469L58.2264 23.0089C58.0187 22.8064 58.1333 22.4536 58.4204 22.4119L61.877 21.9096C61.991 21.893 62.0895 21.8214 62.1405 21.7181L63.6863 18.586Z" fill="#F9F9F9"/>
 <path d="M79.6863 18.586C79.8147 18.3258 80.1856 18.3258 80.314 18.586L81.8598 21.7181C81.9108 21.8214 82.0094 21.893 82.1234 21.9096L85.5799 22.4119C85.867 22.4536 85.9816 22.8064 85.7739 23.0089L83.2727 25.4469C83.1902 25.5273 83.1526 25.6432 83.1721 25.7567L83.7625 29.1993C83.8115 29.4852 83.5114 29.7032 83.2547 29.5683L80.163 27.9429C80.0611 27.8893 79.9393 27.8893 79.8373 27.9429L76.7457 29.5683C76.4889 29.7032 76.1888 29.4852 76.2378 29.1993L76.8283 25.7567C76.8478 25.6432 76.8101 25.5273 76.7276 25.4469L74.2264 23.0089C74.0187 22.8064 74.1333 22.4536 74.4204 22.4119L77.877 21.9096C77.991 21.893 78.0895 21.8214 78.1405 21.7181L79.6863 18.586Z" fill="#F9F9F9"/>
 </svg>
-        `},components:[{tag:"IconListHoz",settings:{childItem:["Icon 1","Icon 2","Icon 3","Icon 4","Icon 5"]},advanced:{"spacing-setting":{desktop:{margin:{bottom:"var(--g-s-l)"}}}},childrens:[L,L,L,L,L]}]},{id:"icon-list-hoz-half-star",name:{en:"Icon List"},icon:{desktop:`
+        `},components:[{tag:"IconListHoz",settings:{childItem:["Icon 1","Icon 2","Icon 3","Icon 4","Icon 5"]},advanced:{"spacing-setting":{desktop:{margin:{bottom:"var(--g-s-l)"}}}},childrens:[L,L,L,L,L]}]},{id:"icon-list-hoz-half-star",name:"Icon List",icon:{desktop:`
         <svg width="78" height="14" viewBox="0 0 78 14" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M6.68606 1.58622C6.81445 1.32608 7.18539 1.32608 7.31378 1.58621L8.8596 4.71838C8.91058 4.82168 9.00913 4.89328 9.12312 4.90984L12.5797 5.41211C12.8667 5.45383 12.9814 5.80662 12.7736 6.0091L10.2725 8.44715C10.19 8.52756 10.1523 8.64341 10.1718 8.75695L10.7623 12.1995C10.8113 12.4854 10.5112 12.7035 10.2544 12.5685L7.16279 10.9431C7.06083 10.8895 6.93902 10.8895 6.83705 10.9431L3.74542 12.5685C3.48865 12.7035 3.18855 12.4855 3.23759 12.1995L3.82804 8.75695C3.84751 8.64341 3.80987 8.52756 3.72738 8.44715L1.2262 6.0091C1.01846 5.80662 1.13309 5.45383 1.42017 5.41211L4.87672 4.90984C4.99072 4.89328 5.08927 4.82168 5.14025 4.71838L6.68606 1.58622Z" fill="#F9F9F9"/>
         <path d="M22.6861 1.58622C22.8144 1.32608 23.1854 1.32608 23.3138 1.58621L24.8596 4.71838C24.9106 4.82168 25.0091 4.89328 25.1231 4.90984L28.5797 5.41211C28.8667 5.45383 28.9814 5.80662 28.7736 6.0091L26.2725 8.44715C26.19 8.52756 26.1523 8.64341 26.1718 8.75695L26.7623 12.1995C26.8113 12.4854 26.5112 12.7035 26.2544 12.5685L23.1628 10.9431C23.0608 10.8895 22.939 10.8895 22.8371 10.9431L19.7454 12.5685C19.4887 12.7035 19.1885 12.4855 19.2376 12.1995L19.828 8.75695C19.8475 8.64341 19.8099 8.52756 19.7274 8.44715L17.2262 6.0091C17.0185 5.80662 17.1331 5.45383 17.4202 5.41211L20.8767 4.90984C20.9907 4.89328 21.0893 4.82168 21.1402 4.71838L22.6861 1.58622Z" fill="#F9F9F9"/>

package/dist/esm/icon-list-hoz/settings/configs/uiV2.js

@@ -1 +1 @@
-let SettingUIV2=[{label:{en:"Item management"},controls:[{label:{en:"Order"},setting:{id:"childItem"},options:{fullWidth:!0}}]},{label:{en:"Item spacing"},controls:[{type:"control",label:{en:"Gap"},setting:{id:"horizontalSpacing"}}]},{label:{en:"Background"},controls:[{type:"control",setting:{id:"background"},layout:"vertical"}]},{label:{en:"Shape"},controls:[{label:{en:"Border"},setting:{id:"border",state:"normal"}},{label:{en:"Corner"},setting:{id:"rounded",state:"normal"}},{label:{en:"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:{en:"Align"},controls:[{type:"control",label:{en:"Horizontal"},setting:{id:"align"}},{type:"control",label:{en:"Vertical"},setting:{id:"verticalAlign"}}]}];export{SettingUIV2};
+let SettingUIV2=[{label:"Item management",controls:[{label:"Order",setting:{id:"childItem"},options:{fullWidth:!0}}]},{label:"Item spacing",controls:[{type:"control",label:"Gap",setting:{id:"horizontalSpacing"}}]},{label:"Background",controls:[{type:"control",setting:{id:"background"},layout:"vertical"}]},{label:"Shape",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:"Align",controls:[{type:"control",label:"Horizontal",setting:{id:"align"}},{type:"control",label:"Vertical",setting:{id:"verticalAlign"}}]}];export{SettingUIV2};

package/dist/esm/icon-list-v2/common/helpers.js

@@ -1 +1 @@
-import{DEVICES as t,composePositionLineHeight as o}from"@gem-sdk/core";import{getDynamicSourceLocales as e,getStaticLocale as n}from"../../helpers.js";let composeIconWith=t=>({...t,desktop:t?.desktop??0,tablet:t?.tablet??t?.desktop??0,mobile:t?.mobile??t?.tablet??t?.desktop??0}),getTextIconNotFound=t=>"react"===t?"Icons not found":n("IconList","icons_not_found"),getTextIconTranslations=({setting:t,builderProps:o,pageContext:n,key:i,type:s})=>{let{childItem:l,translate:c}=t??{};return"react"===s?l?.[i]:e({val:l?.[i],uid:o?.uid,settingId:`childItem_${i}`,pageContext:n,translate:c,isReplaceLocationOrigin:!0})},getvalueMap=({setting:t})=>{let{childConfig:o,iconType:e,iconSvg:n}=t??{};return e&&"matching"!==e?"different"===e?o:void 0:Array(o?.length).fill(n)},composePostionIconList=(e,n,i)=>{let s={...i,desktop:i?.desktop??0,tablet:i?.tablet??i?.desktop??0,mobile:i?.mobile??i?.tablet??i?.desktop??0},l={};return t.forEach(t=>{o({compose:l,lineHeight:e,device:t,position:n,iconWidth:s})}),l};export{composeIconWith,composePostionIconList,getTextIconNotFound,getTextIconTranslations,getvalueMap};
+import{DEVICES as t,composePositionLineHeight as e}from"@gem-sdk/core";import{getDynamicSourceLocales as o,createSettingId as n,getStaticLocale as i}from"../../helpers.js";import{IconListV2 as s}from"../settings/configs/translate.js";let composeIconWith=t=>({...t,desktop:t?.desktop??0,tablet:t?.tablet??t?.desktop??0,mobile:t?.mobile??t?.tablet??t?.desktop??0}),getTextIconNotFound=t=>"react"===t?"Icons not found":i("IconList","icons_not_found"),getTextIconTranslations=({setting:t,builderProps:e,pageContext:i,key:l,type:a})=>{let{childItem:c}=t??{};return"react"===a?c?.[l]:o({val:c?.[l],uid:e?.uid,settingId:n({id:s?.childItem?.id,index:l}),pageContext:i??{},isReplaceLocationOrigin:!0})},getvalueMap=({setting:t})=>{let{childConfig:e,iconType:o,iconSvg:n}=t??{};return o&&"matching"!==o?"different"===o?e:void 0:Array(e?.length).fill(n)},composePostionIconList=(o,n,i)=>{let s={...i,desktop:i?.desktop??0,tablet:i?.tablet??i?.desktop??0,mobile:i?.mobile??i?.tablet??i?.desktop??0},l={};return t.forEach(t=>{e({compose:l,lineHeight:o,device:t,position:n,iconWidth:s})}),l};export{composeIconWith,composePostionIconList,getTextIconNotFound,getTextIconTranslations,getvalueMap};

package/dist/esm/icon-list-v2/common/styles.js

@@ -1 +1 @@
-import{makeStyleResponsive as e,composeBorderResponsive as t,getResponsiveStyleShadowWithoutState as l,composeRadiusResponsive as o,getStyleBackgroundByDevice as r,getResponsiveStylePadding as b,getGradientBgrStyleByDevice as n,makeGlobalSize as i,makeStyle as a,getSingleColorVariable as s}from"@gem-sdk/core";let filterStyles=e=>{let t=["--mb","--mb-mobile","--mb-tablet"];return t.forEach(t=>{delete e?.[t]}),e},getStyleContainerIconlistMain=({styles:t,style:l,type:o,advanced:r})=>{let{align:b}=t??{};return{...l="react"===o?filterStyles(l):l,...e("jc",b),...e("d",{desktop:r?.d?.desktop?"flex":"none",tablet:r?.d?.tablet?"flex":"none",mobile:r?.d?.mobile?"flex":"none"})}},getStyleWraplistIcon=({styles:i})=>{let{panelAlign:a,contentBoxPadding:s,contentBoxWidth:p,background:c,contentBoxBorder:d,contentBoxRounded:y,contentBoxShadow:g}=i??{};return{...t(d),...l(g,"box-shadow",g),...o(y),...r(c),...b(s),...e("w",p),...e("jc",a),...n(c,{desktop:!0,tablet:!0,mobile:!0})}},getStyleColListIcon=({styles:t})=>{let{verticalSpacing:l}=t??{};return{...e("rg",l)}},getStyleWrapItemIcon=({styles:t})=>{let{horizontalSpacing:l,position:o}=t??{};return{...e("cg",l),...e("ai",{...o,mobile:o?.mobile=="baseline"?"flex-start":o?.mobile})}},getStyleWrapIcon=({styles:t,setting:l})=>{let{iconBorder:o,backgroundColor:r,iconRounded:b}=t??{},{globalSize:n}=l??{},p=i(n);return{...p.padding,...a({bs:o?.border,bw:o?.width,bc:s(o?.color),bg:s(r),bblr:b?.bblr,bbrr:b?.bbrr,btlr:b?.btlr,btrr:b?.btrr}),...e("top",{desktop:"unset",tablet:"unset",mobile:"unset"}),...e("pos",{desktop:"relative",tablet:"relative",mobile:"relative"})}},getStyleIcon=({styles:e,setting:t})=>{let{iconColor:l}=e||{},{iconWidth:o}=t??{};return{"--c":s(l),"--w":"100%","--h":"100%","--size-desktop":`${o?.desktop}px`,"--size-tablet":`${o?.tablet||o?.desktop}px`,"--size-mobile":`${o?.mobile||o?.tablet||o?.desktop}px`}},getStyleTypoText=({setting:e})=>({typo:e?.textTypo});export{getStyleColListIcon,getStyleContainerIconlistMain,getStyleIcon,getStyleTypoText,getStyleWrapIcon,getStyleWrapItemIcon,getStyleWraplistIcon};
+import{makeStyleResponsive as e,composeBorderResponsive as t,getResponsiveStyleShadowWithoutState as l,composeRadiusResponsive as o,getStyleBackgroundByDevice as r,getResponsiveStylePadding as b,getGradientBgrStyleByDevice as n,makeGlobalSize as i,makeStyle as a,getSingleColorVariable as s}from"@gem-sdk/core";import{getBackgroundTranslated as p}from"../../helpers.js";import{IconListV2 as c}from"../settings/configs/translate.js";let filterStyles=e=>{let t=["--mb","--mb-mobile","--mb-tablet"];return t.forEach(t=>{delete e?.[t]}),e},getStyleContainerIconlistMain=({styles:t,style:l,type:o,advanced:r})=>{let{align:b}=t??{};return{...l="react"===o?filterStyles(l):l,...e("jc",b),...e("d",{desktop:r?.d?.desktop?"flex":"none",tablet:r?.d?.tablet?"flex":"none",mobile:r?.d?.mobile?"flex":"none"})}},getStyleWraplistIcon=({styles:i,uid:a,pageContext:s,type:d="React"})=>{let{panelAlign:g,contentBoxPadding:m,contentBoxWidth:y,background:S,contentBoxBorder:I,contentBoxRounded:u,contentBoxShadow:x}=i??{},k="Liquid"===d?p({background:S,uid:a,enableTranslate:!!c?.background?.id,pageContext:s??{},isTranslateVideo:!1}):S;return{...t(I),...l(x,"box-shadow",x),...o(u),...r(k),...b(m),...e("w",y),...e("jc",g),...n(k,{desktop:!0,tablet:!0,mobile:!0})}},getStyleColListIcon=({styles:t})=>{let{verticalSpacing:l}=t??{};return{...e("rg",l)}},getStyleWrapItemIcon=({styles:t})=>{let{horizontalSpacing:l,position:o}=t??{};return{...e("cg",l),...e("ai",{...o,mobile:o?.mobile=="baseline"?"flex-start":o?.mobile})}},getStyleWrapIcon=({styles:t,setting:l})=>{let{iconBorder:o,backgroundColor:r,iconRounded:b}=t??{},{globalSize:n}=l??{},p=i(n);return{...p.padding,...a({bs:o?.border,bw:o?.width,bc:s(o?.color),bg:s(r),bblr:b?.bblr,bbrr:b?.bbrr,btlr:b?.btlr,btrr:b?.btrr}),...e("top",{desktop:"unset",tablet:"unset",mobile:"unset"}),...e("pos",{desktop:"relative",tablet:"relative",mobile:"relative"})}},getStyleIcon=({styles:e,setting:t})=>{let{iconColor:l}=e||{},{iconWidth:o}=t??{};return{"--c":s(l),"--w":"100%","--h":"100%","--size-desktop":`${o?.desktop}px`,"--size-tablet":`${o?.tablet||o?.desktop}px`,"--size-mobile":`${o?.mobile||o?.tablet||o?.desktop}px`}},getStyleTypoText=({setting:e})=>({typo:e?.textTypo});export{getStyleColListIcon,getStyleContainerIconlistMain,getStyleIcon,getStyleTypoText,getStyleWrapIcon,getStyleWrapItemIcon,getStyleWraplistIcon};

package/dist/esm/icon-list-v2/components/IconList.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useGetProductId as s}from"../../hooks/useGetProductId.js";import o from"../../text/components/Text.js";import{createClass as i,createStyle as r,createAttr as m,If as l}from"@gem-sdk/system";import{getClassWraplistIcon as n,getClassColListIcon as a,getClassWrapItemIcon as c,getClassWrapIcon as d,getClassIcon as p,getClassTextItem as h}from"../common/classes.js";import{getStyleContainerIconlistMain as u,getStyleWraplistIcon as f,getStyleColListIcon as y,getStyleIcon as g,getStyleWrapIcon as j,getStyleWrapItemIcon as v,getStyleTypoText as N}from"../common/styles.js";import{getvalueMap as x,composePostionIconList as I,getTextIconTranslations as L,getTextIconNotFound as k,composeIconWith as w}from"../common/helpers.js";import{useIconLineHeight as S}from"../hooks/useIconLineHeight.js";let IconListV2=T=>{let{builderProps:W,builderAttrs:$,style:H,setting:V,styles:_,pageContext:q,advanced:C}=T,G=i({[W?.uid??""]:!0}),M=i(n()),P=i(a()),b=i(c({builderProps:W})),z=i(d()),A=i(p()),B=i(h({setting:V})),D=r(u({styles:_,style:H,type:"react",advanced:C})),E=r(f({styles:_})),F=r(y({styles:_})),J=r(g({styles:_,setting:V})),K=N({setting:V}),O=m({...$}),Q=k("react"),R=x({setting:V}),{ref:U,lineHeight:X}=S({iconWidth:w(V?.iconWidth)}),Y=I(X,_?.position,V?.iconWidth),{refContainer:Z,productID:ee}=s(),et=r({...j({styles:_,setting:V}),...Y.content}),es=r({...v({styles:_}),...Y.wrapper});return e("div",{...O,...W,"data-id":W?.uid,style:D,className:G,ref:Z,children:l(!R||!R.length,e("div",{children:Q}),e("div",{className:M,style:E,children:e("div",{className:P,style:F,children:R?.map((s,i)=>{let r=L({setting:V,builderProps:W,pageContext:q,key:i,type:"react"});return t("div",{"data-index":i,className:b,style:es,children:[e("div",{className:z,style:et,children:e("span",{style:J,className:A,dangerouslySetInnerHTML:{__html:s}})}),e(o,{setting:{text:r?.toString(),htmlTag:"div",options:{useState:!0,uniqueId:`${W?.uid}-${i}-${ee}`,productID:ee,customClass:{wrapper:"gp-w-full"}}},styles:K,className:B,ref:U})]},i)})})}))})};export{IconListV2 as default};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useGetProductId as s}from"../../hooks/useGetProductId.js";import i from"../../text/components/Text.js";import{createClass as o,createStyle as r,createAttr as m,If as l}from"@gem-sdk/system";import{getClassWraplistIcon as n,getClassColListIcon as a,getClassWrapItemIcon as c,getClassWrapIcon as d,getClassIcon as p,getClassTextItem as u}from"../common/classes.js";import{getStyleContainerIconlistMain as h,getStyleWraplistIcon as f,getStyleColListIcon as y,getStyleIcon as g,getStyleWrapIcon as j,getStyleWrapItemIcon as v,getStyleTypoText as N}from"../common/styles.js";import{getvalueMap as x,composePostionIconList as I,getTextIconTranslations as L,getTextIconNotFound as k,composeIconWith as w}from"../common/helpers.js";import{useIconLineHeight as S}from"../hooks/useIconLineHeight.js";let IconListV2=T=>{let{builderProps:W,builderAttrs:$,style:H,setting:V,styles:_,pageContext:q,advanced:C}=T,G=o({[W?.uid??""]:!0}),M=o(n()),P=o(a()),b=o(c({builderProps:W})),z=o(d()),A=o(p()),B=o(u({setting:V})),D=r(h({styles:_,style:H,type:"react",advanced:C})),E=r(f({styles:_,uid:W?.uid??"",pageContext:q})),F=r(y({styles:_})),J=r(g({styles:_,setting:V})),K=N({setting:V}),O=m({...$}),Q=k("react"),R=x({setting:V}),{ref:U,lineHeight:X}=S({iconWidth:w(V?.iconWidth)}),Y=I(X,_?.position,V?.iconWidth),{refContainer:Z,productID:ee}=s(),et=r({...j({styles:_,setting:V}),...Y.content}),es=r({...v({styles:_}),...Y.wrapper});return e("div",{...O,...W,"data-id":W?.uid,style:D,className:G,ref:Z,children:l(!R||!R.length,e("div",{children:Q}),e("div",{className:M,style:E,children:e("div",{className:P,style:F,children:R?.map((s,o)=>{let r=L({setting:V,builderProps:W,pageContext:q,key:o,type:"react"});return t("div",{"data-index":o,className:b,style:es,children:[e("div",{className:z,style:et,children:e("span",{style:J,className:A,dangerouslySetInnerHTML:{__html:s}})}),e(i,{setting:{text:r?.toString(),htmlTag:"div",options:{useState:!0,uniqueId:`${W?.uid}-${o}-${ee}`,productID:ee,customClass:{wrapper:"gp-w-full"}}},styles:K,className:B,ref:U})]},o)})})}))})};export{IconListV2 as default};

package/dist/esm/icon-list-v2/components/IconList.liquid.js

@@ -1,21 +1,21 @@
-import{template as s,dataStringify as i,RenderIf as t,isLocalEnv as e,baseAssetURL as l}from"@gem-sdk/core";import{getSettingPreloadData as o}from"../../helpers.js";import r from"../../text/components/Text.liquid.js";import{createClass as a,createStyle as d,createAttr as p,If as c}from"@gem-sdk/system";import{getClassWraplistIcon as n,getClassColListIcon as m,getClassWrapItemIcon as $,getClassWrapIcon as g,getClassIcon as u,getClassTextItem as v}from"../common/classes.js";import{getStyleContainerIconlistMain as f,getStyleWraplistIcon as y,getStyleColListIcon as j,getStyleWrapIcon as h,getStyleWrapItemIcon as S,getStyleIcon as k,getStyleTypoText as q}from"../common/styles.js";import{getvalueMap as x,getTextIconTranslations as E,getTextIconNotFound as V}from"../common/helpers.js";let IconListV2=A=>{let{builderProps:I,builderAttrs:N,style:T,setting:_,styles:w,pageContext:G}=A,L=I?.builderData?.advanced,O=a({[I?.uid??""]:!0}),W=a(n()),b=a(m()),C=a($({builderProps:I})),D=a(g()),F=a(u()),M=a(v({setting:_})),P=d(f({styles:w,style:T,type:"liquid",advanced:L})),R=d(y({styles:w})),z=d(j({styles:w})),B=d(h({styles:w,setting:_})),H=d(S({styles:w})),J=d(k({styles:w,setting:_})),K=q({setting:_}),Q=p({...N}),U=V("liquid"),X=x({setting:_});return s`
+import{template as s,dataStringify as i,RenderIf as t,isLocalEnv as e,baseAssetURL as l}from"@gem-sdk/core";import{getSettingPreloadData as o}from"../../helpers.js";import r from"../../text/components/Text.liquid.js";import{createClass as a,createStyle as d,createAttr as p,If as n}from"@gem-sdk/system";import{getClassWraplistIcon as c,getClassColListIcon as m,getClassWrapItemIcon as $,getClassWrapIcon as u,getClassIcon as g,getClassTextItem as v}from"../common/classes.js";import{getStyleContainerIconlistMain as y,getStyleWraplistIcon as f,getStyleColListIcon as j,getStyleWrapIcon as h,getStyleWrapItemIcon as q,getStyleIcon as x,getStyleTypoText as S}from"../common/styles.js";import{getvalueMap as k,getTextIconTranslations as E,getTextIconNotFound as V}from"../common/helpers.js";let IconListV2=A=>{let{builderProps:I,builderAttrs:L,style:N,setting:T,styles:_,pageContext:w}=A,C=I?.builderData?.advanced,G=a({[I?.uid??""]:!0}),O=a(c()),W=a(m()),b=a($({builderProps:I})),D=a(u()),F=a(g()),M=a(v({setting:T})),P=d(y({styles:_,style:N,type:"liquid",advanced:C})),R=d(f({styles:_,uid:I?.uid??"",pageContext:w,type:"Liquid"})),z=d(j({styles:_,setting:T})),B=d(h({styles:_,setting:T})),H=d(q({styles:_})),J=d(x({styles:_,setting:T})),K=S({setting:T}),Q=p({...L}),U=V("liquid"),X=k({setting:T});return s`
     {% assign locationOrigin = request.origin | append: routes.root_url | split: '/' | join: '/' %}
     <gp-icon-list
       ${{...Q}}
       ${{...I}}
       data-id="${I?.uid}"
       style="${P}"
-      className="${O}"
-      gp-data='${i({position:w?.position,iconWidth:_?.iconWidth}).replaceAll("'","&#039;")}'
+      className="${G}"
+      gp-data='${i({position:_?.position,iconWidth:T?.iconWidth}).replaceAll("'","&#039;")}'
     >
-      ${c(!X||!X.length,s`<div>${U}</div>`,s`
-          <div class="${W}" style="${R}">
-            <div class="${b}" style="${z}">
-              ${X?.map((i,t)=>{let e=E({setting:_,builderProps:I,pageContext:G,key:t,type:"liquid"});return s`
+      ${n(!X||!X.length,s`<div>${U}</div>`,s`
+          <div class="${O}" style="${R}">
+            <div class="${W}" style="${z}">
+              ${X?.map((i,t)=>{let e=E({setting:T,builderProps:I,pageContext:w,key:t,type:"liquid"});return s`
                     <div
                       key="${t}"
                       data-index="${t}"
-                      class="${C}"
+                      class="${b}"
                       style="${H}"
                     >
                       <div class="${D}" style="${B}">

package/dist/esm/icon-list-v2/settings/IconList.js

@@ -1,4 +1,4 @@
-import{IconListSettings as e}from"./configs/settings.js";import{SettingUIV1 as t}from"./configs/ui-v1.js";import{SettingUIV2 as i}from"./configs/ui-v2.js";let config={tag:"IconListV2",label:"Item List",icon:`
+import{IconListSettings as e}from"./configs/settings.js";import{SettingUIV2 as t}from"./configs/ui-v2.js";let config={tag:"IconListV2",label:"Item List",icon:`
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M10.75 3.72656C10.3358 3.72656 10 4.06235 10 4.47656C10 4.89078 10.3358 5.22656 10.75 5.22656L21.75 5.22656C22.1642 5.22656 22.5 4.89078 22.5 4.47656C22.5 4.06235 22.1642 3.72656 21.75 3.72656H10.75Z" fill="white"/>
   <path d="M10.75 8.72656C10.3358 8.72656 10 9.06235 10 9.47656C10 9.89078 10.3358 10.2266 10.75 10.2266L21.75 10.2266C22.1642 10.2266 22.5 9.89078 22.5 9.47657C22.5 9.06235 22.1642 8.72657 21.75 8.72657L10.75 8.72656Z" fill="white"/>
@@ -8,7 +8,7 @@ import{IconListSettings as e}from"./configs/settings.js";import{SettingUIV1 as t
   <path d="M8.66954 5.06642C8.85917 4.69816 8.71437 4.24591 8.34611 4.05627C7.97786 3.86664 7.5256 4.01144 7.33596 4.3797L4.54463 9.80029L2.85555 7.48937C2.61113 7.15496 2.14189 7.08201 1.80748 7.32643C1.47307 7.57086 1.40013 8.0401 1.64455 8.37451L3.57244 11.0122C4.12091 11.7625 5.2674 11.6732 5.69292 10.8468L8.66954 5.06642Z" fill="white"/>
   </svg>
 
-  `,settings:e,ui:t,uiV2:i,editorConfigs:{slots:{children:!1},component:{validate:!0,excludeApplyStyle:!0}},presets:[{id:"icon-list-v2",name:{en:"Item List"},icon:{desktop:`
+  `,settings:e,ui:[],uiV2:t,editorConfigs:{slots:{children:!1},component:{validate:!0,excludeApplyStyle:!0}},presets:[{id:"icon-list-v2",name:"Item List",icon:{desktop:`
         <svg width="110" height="80" viewBox="0 0 110 80" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path fill-rule="evenodd" clip-rule="evenodd" d="M19.6348 17.7261C19.792 17.9121 19.7878 18.2089 19.6255 18.389L13.7118 24.9515C13.5531 25.1275 13.3012 25.1275 13.1425 24.9515L10.8745 22.4345C10.7122 22.2544 10.708 21.9576 10.8652 21.7717C11.0224 21.5857 11.2814 21.5809 11.4437 21.761L13.4272 23.9622L19.0563 17.7155C19.2186 17.5354 19.4776 17.5402 19.6348 17.7261Z" fill="#F9F9F9"/>
           <rect x="30" y="18.3335" width="72" height="6" rx="3" fill="#757575"/>

package/dist/esm/icon-list-v2/settings/configs/settings.js

@@ -1 +1 @@
-import{itemControlTemplate as e}from"./items.js";let IconListSettings=[{id:"setting",controls:[{id:"childItem",label:"Item management",type:"child-item",default:["Icon 1","Icon 2"],childTemplate:e,isDisabledDuplicateIncrease:!0},{id:"translate",type:"input",default:"childItem"},{id:"textTypo",type:"typography-v2",default:{type:"paragraph-1",attrs:{color:"#FEB91C"}},compoDefaultValue:{attrs:{color:"#FEB91C"}},ignoreReRender:!0,hiddenSetting:{textAlign:!0,textShadow:!0}},{id:"iconSvg",type:"icon",label:"Icon Parent",hideInput:!0,info:"Choose from list or paste any SVG icon",default:'<svg data-name="check-circle-filled" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" data-id="508414807831544168"><path fill="currentColor" strokelinecap="round" strokelinejoin="round" d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path></svg>'},{id:"iconWidth",type:"input:stepper",label:"Icon Width",devices:{desktop:{default:24}},min:0},{id:"childConfig",type:"child-icon",label:"",default:[,,,].fill('<svg height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" data-id="508414807831544168"><path fill="currentColor" strokelinecap="round" strokelinejoin="round" d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path></svg>')},{id:"globalSize",type:"size-setting",devices:{desktop:{default:{padding:{type:"custom",top:"0px",bottom:"0px",left:"0px",right:"0px"}}}},hiddenShowMore:!0,hiddenSettings:["shape","width","height","gap"]},{id:"iconType",type:"option:illustration",enableTooltip:!0,label:"Icon type",options:[{label:"Matching icons",value:"matching",svgName:"gp-item-list-matching-icon"},{label:"Different icons",value:"different",svgName:"gp-item-list-different-icon"}],default:"matching"}]},{id:"style",controls:[{id:"background",type:"background-media",ignoreReRender:!0,devices:{desktop:{default:{type:"color",color:"transparent",image:{src:"",width:0,height:0},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll"}}},compoDefaultValue:{desktop:{default:{type:"color",color:"#DDDDDD",image:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/background_settings.jpg",width:1200,height:480},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll"}}}},{id:"iconColor",type:"color-picker-v2",label:"Icon color",default:"text-1",compoDefaultValue:"text-1"},{id:"backgroundColor",type:"color-picker-v2",label:"Background color",default:"transparent",compoDefaultValue:"bg-1"},{id:"iconBorder",label:"Border",type:"border-v2",default:{},compoDefaultValue:{border:"solid",width:"1px 1px 1px 1px",position:"bottom",color:"line-3",isCustom:!0,borderWidth:"Mixed"}},{id:"iconRounded",type:"corner-v2",label:"Border Radius",default:{radiusType:"none"},compoDefaultValue:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}},{id:"horizontalSpacing",label:"Horizontal Spacing",type:"input:slider",units:["px"],min:0,max:40,ignoreMax:!0,devices:{desktop:{default:"8px"}}},{id:"position",type:"option:illustration",enableTooltip:!0,label:"Position",options:[{label:"Align center",value:"center",type:"align-pos",svgName:"gp-align-position-center"},{label:"Align top",value:"baseline",type:"align-pos",svgName:"gp-align-position-top"}],devices:{desktop:{default:"center"},tablet:{default:"center"},mobile:{default:"center"}}},{id:"contentBoxWidth",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,displayOptions:[{label:"Fit content",value:"Auto",showValue:!0},{label:"Full",value:"100%",showValue:!0}],devices:{desktop:{default:"100%"}}},{id:"contentBoxPadding",label:"Padding",type:"padding-v2",devices:{desktop:{}},compoDefaultValue:{desktop:{default:{top:"16px",bottom:"16px",left:"16px",right:"16px"}}}},{id:"contentBoxBorder",label:"Border",type:"border",devices:{desktop:{default:{}}},compoDefaultValue:{desktop:{default:{border:"solid",width:"1px 1px 1px 1px",position:"bottom",color:"line-3",isCustom:!0,borderWidth:"Mixed"}}}},{id:"contentBoxRounded",type:"corner-v2",label:"Border Radius",devices:{desktop:{default:{radiusType:"none"}}},compoDefaultValue:{desktop:{default:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}}}},{id:"contentBoxShadow",label:"Shadow",type:"shadow-v2",devices:{desktop:{default:{}}},compoDefaultValue:{desktop:{default:{type:"shadow-1",distance:"4px",blur:"4px",spread:"0px",color:"rgba(18, 18, 18, 0.2)",angle:45,enable:!0}}}},{id:"panelAlign",label:"Alignment",type:"option:value",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"left"}}},{id:"align",label:"Alignment",type:"option:value",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"left"}}},{id:"verticalSpacing",type:"input:slider",label:"Item gap",units:["px"],min:0,max:40,ignoreMax:!0,devices:{desktop:{default:"12px"}}}]}];export{IconListSettings};
+import{itemControlTemplate as e}from"./items.js";let IconListSettings=[{id:"setting",controls:[{id:"childItem",label:"Item management",type:"child-item",default:["Icon 1","Icon 2"],childTemplate:e,isDisabledDuplicateIncrease:!0},{id:"textTypo",type:"typography-v2",default:{type:"paragraph-1",attrs:{color:"#FEB91C"}},compoDefaultValue:{attrs:{color:"#FEB91C"}},ignoreReRender:!0,hiddenSetting:{textAlign:!0,textShadow:!0}},{id:"iconSvg",type:"icon",label:"Icon Parent",hideInput:!0,info:"Choose from list or paste any SVG icon",default:'<svg data-name="check-circle-filled" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" data-id="508414807831544168"><path fill="currentColor" strokelinecap="round" strokelinejoin="round" d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path></svg>'},{id:"iconWidth",type:"input:stepper",label:"Icon Width",devices:{desktop:{default:24}},min:0},{id:"childConfig",type:"child-icon",label:"",default:[,,,].fill('<svg height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" data-id="508414807831544168"><path fill="currentColor" strokelinecap="round" strokelinejoin="round" d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path></svg>')},{id:"globalSize",type:"size-setting",devices:{desktop:{default:{padding:{type:"custom",top:"0px",bottom:"0px",left:"0px",right:"0px"}}}},hiddenShowMore:!0,hiddenSettings:["shape","width","height","gap"]},{id:"iconType",type:"option:illustration",enableTooltip:!0,label:"Icon type",options:[{label:"Matching icons",value:"matching",svgName:"gp-item-list-matching-icon"},{label:"Different icons",value:"different",svgName:"gp-item-list-different-icon"}],default:"matching"}]},{id:"style",controls:[{id:"background",type:"background-media",ignoreReRender:!0,devices:{desktop:{default:{type:"color",color:"transparent",image:{src:"",width:0,height:0},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll"}}},compoDefaultValue:{desktop:{default:{type:"color",color:"#DDDDDD",image:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/background_settings.jpg",width:1200,height:480},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll"}}}},{id:"iconColor",type:"color-picker-v2",label:"Icon color",default:"text-1",compoDefaultValue:"text-1"},{id:"backgroundColor",type:"color-picker-v2",label:"Background color",default:"transparent",compoDefaultValue:"bg-1"},{id:"iconBorder",label:"Border",type:"border-v2",default:{},compoDefaultValue:{border:"solid",width:"1px 1px 1px 1px",position:"bottom",color:"line-3",isCustom:!0,borderWidth:"Mixed"}},{id:"iconRounded",type:"corner-v2",label:"Border Radius",default:{radiusType:"none"},compoDefaultValue:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}},{id:"horizontalSpacing",label:"Horizontal Spacing",type:"input:slider",units:["px"],min:0,max:40,ignoreMax:!0,devices:{desktop:{default:"8px"}}},{id:"position",type:"option:illustration",enableTooltip:!0,label:"Position",options:[{label:"Align center",value:"center",type:"align-pos",svgName:"gp-align-position-center"},{label:"Align top",value:"baseline",type:"align-pos",svgName:"gp-align-position-top"}],devices:{desktop:{default:"center"},tablet:{default:"center"},mobile:{default:"center"}}},{id:"contentBoxWidth",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,displayOptions:[{label:"Fit content",value:"Auto",showValue:!0},{label:"Full",value:"100%",showValue:!0}],devices:{desktop:{default:"100%"}}},{id:"contentBoxPadding",label:"Padding",type:"padding-v2",devices:{desktop:{}},compoDefaultValue:{desktop:{default:{top:"16px",bottom:"16px",left:"16px",right:"16px"}}}},{id:"contentBoxBorder",label:"Border",type:"border",devices:{desktop:{default:{}}},compoDefaultValue:{desktop:{default:{border:"solid",width:"1px 1px 1px 1px",position:"bottom",color:"line-3",isCustom:!0,borderWidth:"Mixed"}}}},{id:"contentBoxRounded",type:"corner-v2",label:"Border Radius",devices:{desktop:{default:{radiusType:"none"}}},compoDefaultValue:{desktop:{default:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}}}},{id:"contentBoxShadow",label:"Shadow",type:"shadow-v2",devices:{desktop:{default:{}}},compoDefaultValue:{desktop:{default:{type:"shadow-1",distance:"4px",blur:"4px",spread:"0px",color:"rgba(18, 18, 18, 0.2)",angle:45,enable:!0}}}},{id:"panelAlign",label:"Alignment",type:"option:value",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"left"}}},{id:"align",label:"Alignment",type:"option:value",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"left"}}},{id:"verticalSpacing",type:"input:slider",label:"Item gap",units:["px"],min:0,max:40,ignoreMax:!0,devices:{desktop:{default:"12px"}}}]}];export{IconListSettings};

package/dist/esm/icon-list-v2/settings/configs/translate.js

@@ -0,0 +1 @@
+let IconListV2={childItem:{id:"childItem"},background:{id:"background",fields:["image.src"]}};export{IconListV2};

package/dist/esm/icon-list-v2/settings/configs/ui-v2.js

@@ -1 +1 @@
-let SettingUIV2=[{label:{en:"Item management"},controls:[{label:{en:"Order"},setting:{id:"childItem"}}]},{label:{en:"Icon style"},controls:[{label:{en:"Icon type "},setting:{id:"iconType"}},{conditionDisplay:'iconType === "matching"',label:{en:"Icon"},setting:{id:"iconSvg"}},{conditionDisplay:'iconType === "different"',layout:"vertical",setting:{id:"childConfig"}},{label:{en:"Icon color"},setting:{id:"iconColor"}},{label:{en:"Icon size"},setting:{id:"iconWidth"}}],moreSettings:{type:"collapse",controls:[{label:{en:"Position"},setting:{id:"position"}},{label:{en:"Padding"},controlConfig:{id:"padding",type:"padding-v2",linkWithSetting:{name:"globalSize",field:"padding"},compoDefaultValue:{default:{top:"4px",right:"4px",bottom:"4px",left:"4px"}}}},{label:{en:"Background"},setting:{id:"backgroundColor"}},{label:{en:"Border"},setting:{id:"iconBorder"}},{label:{en:"Corner"},setting:{id:"iconRounded"}}]}},{label:{en:"Text"},controls:[{setting:{id:"textTypo"},layout:"vertical"}]},{label:{en:"Item spacing"},controls:[{label:{en:"Gap"},setting:{id:"verticalSpacing"}}]},{label:{en:"Item style"},controls:[{label:{en:"Icon & text gap"},setting:{id:"horizontalSpacing"}}]},{label:{en:"Background"},controls:[{setting:{id:"background"},layout:"vertical"}]},{label:{en:"Size"},controls:[{label:{en:"Width"},setting:{id:"contentBoxWidth"},layout:"horizontal"},{label:{en:"Padding"},setting:{id:"contentBoxPadding"},layout:"horizontal"},{label:{en:"Arrange"},setting:{id:"panelAlign"}}]},{label:{en:"Shape"},controls:[{label:{en:"Border"},setting:{id:"contentBoxBorder"}},{label:{en:"Corner"},setting:{id:"contentBoxRounded"}},{label:{en:"Shadow"},setting:{id:"contentBoxShadow"}}]},{controls:[{label:{en:"Align"},setting:{id:"align"},options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Horizontal alignment is disabled when the width is set to 100% or greater"},conditionEnable:'!contentBoxWidth?.includes("%") || (parseInt(contentBoxWidth) < 100 && contentBoxWidth?.includes("%"))'}]}];export{SettingUIV2};
+let SettingUIV2=[{label:"Item management",controls:[{label:"Order",setting:{id:"childItem"}}]},{label:"Icon style",controls:[{label:"Icon type ",setting:{id:"iconType"}},{conditionDisplay:'iconType === "matching"',label:"Icon",setting:{id:"iconSvg"}},{conditionDisplay:'iconType === "different"',layout:"vertical",setting:{id:"childConfig"}},{label:"Icon color",setting:{id:"iconColor"}},{label:"Icon size",setting:{id:"iconWidth"}}],moreSettings:{type:"collapse",controls:[{label:"Position",setting:{id:"position"}},{label:"Padding",controlConfig:{id:"padding",type:"padding-v2",linkWithSetting:{name:"globalSize",field:"padding"},compoDefaultValue:{default:{top:"4px",right:"4px",bottom:"4px",left:"4px"}}}},{label:"Background",setting:{id:"backgroundColor"}},{label:"Border",setting:{id:"iconBorder"}},{label:"Corner",setting:{id:"iconRounded"}}]}},{label:"Text",controls:[{setting:{id:"textTypo"},layout:"vertical"}]},{label:"Item spacing",controls:[{label:"Gap",setting:{id:"verticalSpacing"}}]},{label:"Item style",controls:[{label:"Icon & text gap",setting:{id:"horizontalSpacing"}}]},{label:"Background",controls:[{setting:{id:"background"},layout:"vertical"}]},{label:"Size",controls:[{label:"Width",setting:{id:"contentBoxWidth"},layout:"horizontal"},{label:"Padding",setting:{id:"contentBoxPadding"},layout:"horizontal"},{label:"Arrange",setting:{id:"panelAlign"}}]},{label:"Shape",controls:[{label:"Border",setting:{id:"contentBoxBorder"}},{label:"Corner",setting:{id:"contentBoxRounded"}},{label:"Shadow",setting:{id:"contentBoxShadow"}}]},{controls:[{label:"Align",setting:{id:"align"},options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Horizontal alignment is disabled when the width is set to 100% or greater"},conditionEnable:'!contentBoxWidth?.includes("%") || (parseInt(contentBoxWidth) < 100 && contentBoxWidth?.includes("%"))'}]}];export{SettingUIV2};

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

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

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

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

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

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

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

@@ -1,22 +1,22 @@
-let ImagePreset=[{id:"image",name:{en:"Image"},icon:{desktop:`
+let ImagePreset=[{id:"image",name:"Image",icon:{desktop:`
           <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
           <rect width="96" height="48" rx="3" fill="#424242"/>
           <circle cx="37" cy="17" r="3" fill="#D6D6D6"/>
           <path d="M32.42 30.9518L37.1407 25.1338C37.3005 24.9364 37.498 24.7768 37.7203 24.6653C37.9427 24.5538 38.1848 24.4929 38.431 24.4866C38.6772 24.4803 38.9218 24.5287 39.149 24.6287C39.3762 24.7288 39.5809 24.8781 39.7496 25.0671L41.957 27.5361L50.5857 16.6629C50.7546 16.4499 50.967 16.2797 51.2069 16.165C51.4469 16.0503 51.7083 15.9941 51.9718 16.0005C52.2352 16.0069 52.4939 16.0758 52.7285 16.202C52.9632 16.3283 53.1679 16.5086 53.3273 16.7297L63.6435 31.0236C63.8408 31.2976 63.9615 31.6242 63.9922 31.9666C64.0229 32.3089 63.9623 32.6535 63.8173 32.9616C63.6723 33.2697 63.4485 33.529 63.1712 33.7105C62.8939 33.8919 62.5741 33.9883 62.2476 33.9887L33.7537 34C33.4185 33.9999 33.0904 33.8986 32.8082 33.7082C32.526 33.5177 32.3014 33.2461 32.1611 32.9255C32.0208 32.6048 31.9706 32.2485 32.0165 31.8988C32.0624 31.549 32.2024 31.2204 32.42 30.9518Z" fill="#D6D6D6"/>
           </svg>
-        `},components:[{tag:"Image",styles:{shape:{desktop:{width:"100%"}}},advanced:{"spacing-setting":{desktop:{margin:{bottom:"var(--g-s-l)"}}},editorData:{cssPlaceholder:".{{rootClassName}} {\n\n}\n.{{rootClassName}} > figure > img {\n\n}"}}}],flowTagComponents:{Marquee:[{tag:"Image",styles:{shape:{desktop:{width:"auto",height:"auto"}},enableBorder:"none"},advanced:{"spacing-setting":{desktop:{margin:{bottom:"var(--g-s-l)"}}},editorData:{rootClassName:"{{rootClassName}}",css:".{{rootClassName}} {\n\n}\n.{{rootClassName}} > figure > img {\n\n}"}},settings:{isNotLazyload:!0}}]},rootOverride:{styles:{shape:{desktop:{shape:"original",shapeValue:"",width:"500px",shapeLinked:!0}},borderRadius:{btrr:"0px",bblr:"0px",bbrr:"0px",btlr:"0px",radiusType:"none"}},advanced:{"spacing-setting":{desktop:{margin:{bottom:0}}}}}},{id:"image-circle",name:{en:"Image"},icon:{desktop:`
+        `},components:[{tag:"Image",styles:{shape:{desktop:{width:"100%"}}},advanced:{"spacing-setting":{desktop:{margin:{bottom:"var(--g-s-l)"}}},editorData:{cssPlaceholder:".{{rootClassName}} {\n\n}\n.{{rootClassName}} > figure > img {\n\n}"}}}],flowTagComponents:{Marquee:[{tag:"Image",styles:{shape:{desktop:{width:"auto",height:"auto"}},enableBorder:"none"},advanced:{"spacing-setting":{desktop:{margin:{bottom:"var(--g-s-l)"}}},editorData:{rootClassName:"{{rootClassName}}",css:".{{rootClassName}} {\n\n}\n.{{rootClassName}} > figure > img {\n\n}"}},settings:{isNotLazyload:!0}}]},rootOverride:{styles:{shape:{desktop:{shape:"original",shapeValue:"",width:"500px",shapeLinked:!0}},borderRadius:{btrr:"0px",bblr:"0px",bbrr:"0px",btlr:"0px",radiusType:"none"}},advanced:{"spacing-setting":{desktop:{margin:{bottom:0}}}}}},{id:"image-circle",name:"Image",icon:{desktop:`
         <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect x="2" y="2" width="52" height="52" rx="26" fill="#424242"/>
         <ellipse cx="20.4375" cy="22.9688" rx="2.0625" ry="1.96875" fill="#F9F9F9"/>
         <path d="M17.2887 32.9997L20.5342 29.1816C20.6441 29.052 20.7799 28.9473 20.9327 28.8741C21.0856 28.8009 21.2521 28.761 21.4213 28.7568C21.5905 28.7527 21.7587 28.7845 21.915 28.8501C22.0712 28.9158 22.2118 29.0138 22.3278 29.1378L23.8454 30.758L29.7777 23.6225C29.8938 23.4827 30.0398 23.371 30.2048 23.2958C30.3697 23.2205 30.5495 23.1836 30.7306 23.1878C30.9117 23.192 31.0895 23.2372 31.2509 23.3201C31.4122 23.4029 31.5529 23.5213 31.6625 23.6663L38.7549 33.0467C38.8905 33.2266 38.9735 33.4409 38.9947 33.6656C39.0158 33.8902 38.9741 34.1164 38.8744 34.3186C38.7747 34.5207 38.6209 34.6909 38.4302 34.81C38.2396 34.9291 38.0197 34.9923 37.7952 34.9926L18.2057 35C17.9753 34.9999 17.7497 34.9334 17.5557 34.8085C17.3616 34.6835 17.2072 34.5053 17.1108 34.2948C17.0143 34.0844 16.9798 33.8506 17.0113 33.6211C17.0429 33.3915 17.1391 33.1759 17.2887 32.9997Z" fill="#F9F9F9"/>
         </svg>
-        `},components:[{tag:"Image",settings:{imageStyle:"circle"},styles:{shape:{desktop:{shape:"square",shapeValue:"1/1",width:"80px",shapeLinked:!0},tablet:{shape:"square",shapeValue:"1/1",width:"80px",shapeLinked:!0},mobile:{shape:"square",shapeValue:"1/1",width:"80px",shapeLinked:!0}},borderRadius:{btrr:"999999px",bblr:"999999px",bbrr:"999999px",btlr:"999999px",radiusType:"circle"},wrapperBorder:{borderType:"none",border:"none",width:"1px 1px 1px 1px",position:"all",borderWidth:"1px",color:"#000000",isCustom:!0}},advanced:{"spacing-setting":{desktop:{margin:{bottom:"var(--g-s-l)"}}},editorData:{cssplaceholder:".{{rootClassName}} {\n\n}\n.{{rootClassName}} > figure > img {\n\n}"}}}],rootOverride:{styles:{shape:{desktop:{shape:"square",shapeValue:"1/1",width:"80px",shapeLinked:!0}},borderRadius:{btrr:"999999px",bblr:"999999px",bbrr:"999999px",btlr:"999999px",radiusType:"circle"}},advanced:{"spacing-setting":{desktop:{margin:{bottom:0}}}}}},{id:"image-pre-sales-page",name:{en:"Image"},icon:{desktop:`
+        `},components:[{tag:"Image",settings:{imageStyle:"circle"},styles:{shape:{desktop:{shape:"square",shapeValue:"1/1",width:"80px",shapeLinked:!0},tablet:{shape:"square",shapeValue:"1/1",width:"80px",shapeLinked:!0},mobile:{shape:"square",shapeValue:"1/1",width:"80px",shapeLinked:!0}},borderRadius:{btrr:"999999px",bblr:"999999px",bbrr:"999999px",btlr:"999999px",radiusType:"circle"},wrapperBorder:{borderType:"none",border:"none",width:"1px 1px 1px 1px",position:"all",borderWidth:"1px",color:"#000000",isCustom:!0}},advanced:{"spacing-setting":{desktop:{margin:{bottom:"var(--g-s-l)"}}},editorData:{cssplaceholder:".{{rootClassName}} {\n\n}\n.{{rootClassName}} > figure > img {\n\n}"}}}],rootOverride:{styles:{shape:{desktop:{shape:"square",shapeValue:"1/1",width:"80px",shapeLinked:!0}},borderRadius:{btrr:"999999px",bblr:"999999px",bbrr:"999999px",btlr:"999999px",radiusType:"circle"}},advanced:{"spacing-setting":{desktop:{margin:{bottom:0}}}}}},{id:"image-pre-sales-page",name:"Image",icon:{desktop:`
           <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
           <rect width="96" height="48" rx="3" fill="#424242"/>
           <circle cx="37" cy="17" r="3" fill="#D6D6D6"/>
           <path d="M32.42 30.9518L37.1407 25.1338C37.3005 24.9364 37.498 24.7768 37.7203 24.6653C37.9427 24.5538 38.1848 24.4929 38.431 24.4866C38.6772 24.4803 38.9218 24.5287 39.149 24.6287C39.3762 24.7288 39.5809 24.8781 39.7496 25.0671L41.957 27.5361L50.5857 16.6629C50.7546 16.4499 50.967 16.2797 51.2069 16.165C51.4469 16.0503 51.7083 15.9941 51.9718 16.0005C52.2352 16.0069 52.4939 16.0758 52.7285 16.202C52.9632 16.3283 53.1679 16.5086 53.3273 16.7297L63.6435 31.0236C63.8408 31.2976 63.9615 31.6242 63.9922 31.9666C64.0229 32.3089 63.9623 32.6535 63.8173 32.9616C63.6723 33.2697 63.4485 33.529 63.1712 33.7105C62.8939 33.8919 62.5741 33.9883 62.2476 33.9887L33.7537 34C33.4185 33.9999 33.0904 33.8986 32.8082 33.7082C32.526 33.5177 32.3014 33.2461 32.1611 32.9255C32.0208 32.6048 31.9706 32.2485 32.0165 31.8988C32.0624 31.549 32.2024 31.2204 32.42 30.9518Z" fill="#D6D6D6"/>
           </svg>
-        `},components:[{tag:"Image",advanced:{"spacing-setting":{desktop:{margin:{bottom:"var(--g-s-l)"}}},editorData:{cssPlaceholder:".{{rootClassName}} {\n\n}\n.{{rootClassName}} > figure > img {\n\n}"}},settings:{imageLink:{type:"go-to-sales-page"}}}],flowTagComponents:{Marquee:[{tag:"Image",styles:{shape:{desktop:{width:"auto",height:"auto"}},enableBorder:"none"},advanced:{"spacing-setting":{desktop:{margin:{bottom:"var(--g-s-l)"}}},editorData:{rootClassName:"{{rootClassName}}",css:".{{rootClassName}} {\n\n}\n.{{rootClassName}} > figure > img {\n\n}"}},settings:{isNotLazyload:!0}}]}},{id:"image-circle-pre-sales-page",name:{en:"Image"},icon:{desktop:`
+        `},components:[{tag:"Image",advanced:{"spacing-setting":{desktop:{margin:{bottom:"var(--g-s-l)"}}},editorData:{cssPlaceholder:".{{rootClassName}} {\n\n}\n.{{rootClassName}} > figure > img {\n\n}"}},settings:{imageLink:{type:"go-to-sales-page"}}}],flowTagComponents:{Marquee:[{tag:"Image",styles:{shape:{desktop:{width:"auto",height:"auto"}},enableBorder:"none"},advanced:{"spacing-setting":{desktop:{margin:{bottom:"var(--g-s-l)"}}},editorData:{rootClassName:"{{rootClassName}}",css:".{{rootClassName}} {\n\n}\n.{{rootClassName}} > figure > img {\n\n}"}},settings:{isNotLazyload:!0}}]}},{id:"image-circle-pre-sales-page",name:"Image",icon:{desktop:`
         <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect x="2" y="2" width="52" height="52" rx="26" fill="#424242"/>
         <ellipse cx="20.4375" cy="22.9688" rx="2.0625" ry="1.96875" fill="#F9F9F9"/>

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

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

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

@@ -0,0 +1 @@
+let Image={srcSet:{id:"srcSet",fields:["src"]},alt:{id:"alt"},title:{id:"title"}};export{Image};

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

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

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

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

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

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

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

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