@gem-sdk/components 12.0.0-dev.133 → 12.0.0-dev.139

package/dist/esm/image/next.js

@@ -1 +1 @@
-import m from"next/dynamic";import o from"../common/components/Loading.js";import"react/jsx-runtime";import"react";import"@gem-sdk/core";let Image=m(()=>import("./components/Image.js"),{loading:o});var image={Image};export{image as default};
+import o from"next/dynamic";import m from"../common/components/Loading.js";import"react/jsx-runtime";import"react";import"@gem-sdk/core";let t=o(()=>import("./components/Image.js"),{loading:m});var r={Image:t};export{r as default};

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

@@ -1,5 +1,5 @@
-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:`
+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 s={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:i,ui:[],uiV2:t,presets:o,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{s as default};

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

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

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:"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 e=[{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{e as ImageSettings};

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

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

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

@@ -1 +1 @@
-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};
+let e=[{label:"Style",controls:[{setting:{id:"imageStyle"},layout:"vertical",controlChangeTrigger:{settings:[{condition:'imageStyle==="circle"',source:["imageStyle"],action:{controlId:"shape",newValue:{shape:"square",shapeValue:"1/1",shapeLinked:!0,width:"80px"},groupType:"style",controlType:"style"}},{condition:'imageStyle==="circle"',source:["imageStyle"],action:{controlId:"borderRadius",newValue:{bblr:"9999px",btrr:"9999px",bbrr:"9999px",btlr:"9999px",radiusType:"circle"},groupType:"style",controlType:"style"}},{condition:'imageStyle==="circle"',source:["imageStyle"],action:{controlId:"wrapperBorder",newValue:{border:"none",color:"transparent",borderWidth:"0px"},groupType:"style",controlType:"style"}},{condition:'imageStyle==="rectangle"',source:["imageStyle"],action:{controlId:"wrapperBorder",newValue:{border:"none",color:"transparent",borderWidth:"0px"},groupType:"style",controlType:"style"}},{condition:'imageStyle==="circle"',source:["imageStyle"],action:{controlId:"shadow",newValue:{enable:!1},groupType:"style",controlType:"style"}},{condition:'imageStyle==="rectangle"',source:["imageStyle"],action:{controlId:"shadow",newValue:{enable:!1},groupType:"style",controlType:"style"}},{condition:'imageStyle==="rectangle"',source:["imageStyle"],action:{controlId:"shape",newValue:{shape:"original",shapeValue:"",width:"100%"},groupType:"style",controlType:"style"}},{condition:'imageStyle==="rectangle"',source:["imageStyle"],action:{controlId:"borderRadius",newValue:{bblr:"0px",btrr:"0px",bbrr:"0px",btlr:"0px",radiusType:"none"},groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}}]},{label:"Source",controls:[{conditionDisplay:"isAdaptive === false",setting:{id:"image"},layout:"vertical",options:{updateFields:[{field:"preload",settingId:"priority"},{field:"altText",settingId:"alt"},{field:"imageTitle",settingId:"title"}]},controlChangeTrigger:{settings:[{action:{controlId:"priority",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"alt",valueFromField:"altText",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"title",valueFromField:"imageTitle",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}},{conditionDisplay:"isAdaptive === true",setting:{id:"srcSet"},layout:"vertical",options:{updateFields:[{field:"preload",settingId:"priority"},{field:"altText",settingId:"alt"},{field:"imageTitle",settingId:"title"}]},controlChangeTrigger:{settings:[{action:{controlId:"priority",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"alt",valueFromField:"altText",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"title",valueFromField:"imageTitle",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"Scale",setting:{id:"objectFit"},conditionDisplay:'shape.shape !== "original"'}]},{label:"Size",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{e as 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=({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};
+let t=({label:t="",positionId:e="left",componentUid:a})=>({label:t,positionId:e,uid:a}),e=({pageContext:t,translateLabel:e})=>({pageContext:t,translateLabel:e}),a=({width:t=0,height:e=0})=>({src:"",width:t,height:e,"data-testid":"temp-image"}),r=({src:t,title:e=""})=>({src:t,title:e}),g=({id:t,src:e,title:a="",priority:g=!1,isDisableObjectFit:i=!1,isDisableAspectStyle:s=!1})=>({...r({src:e,title:a}),id:t,priority:g,isDisableObjectFit:i,isDisableAspectStyle:s}),i=({src:t,testId:e,width:a=0,height:g=0,title:i="",priority:s=!1})=>{let l=r({src:t,title:i});return{...l,...s?{fetchpriority:"high",loading:"eager"}:{loading:"lazy",fetchpriority:"low"},width:a,height:g,"data-testid":e,"base-src":s?"":l.src}};export{r as getBaseImageAttrs,g as getImageLiquidAttrs,a as getImagePlaceholderAttrs,i as getImageReactAttrs,t as getLabelAttrs,e as getLabelLiquidAttrs};

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

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

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

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

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

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

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

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import{createStyleReact as i,createClass as r,createAttr as l,If as s}from"@gem-sdk/system";import"react";import{getOuterWrapperStyles as o,getWrapperWidth as a,getContainerStyles as m,getLazyPlaceholderStyle as d,getImageStyles as h,getLabelStyles as n,getArrowStyles as g,getLineStyles as p,getHandleStyles as c,getHandleCustomStyles as y,getSliderStyles as f}from"../common/styles.js";import{getImageReactAttrs as w,getImagePlaceholderAttrs as C,getLabelAttrs as I}from"../common/attrs.js";import{getOuterWrapperClasses as S,getLabelClasses as j,getLabelContainerClasses as u}from"../common/classes.js";import b from"./Label.js";import L from"./SlideHandle.js";import{getData as v,getReactStyles as H}from"../common/helpers.js";import{useCompareImage as k}from"../hooks/useCompareImage.js";let CompareImage=x=>{let{leftImage:A,rightImage:W,builderData:$,advanced:N}=x,{hover:P,styles:R,handle:U,handleSize:q,leftImageAlt:z,leftImageTitle:B,leftImageLabel:D,rightImageAlt:E,rightImageTitle:F,rightImageLabel:G,sliderLineWidth:J,sliderLineColor:K,componentUid:M,tempImage:O,aspectRatio:Q,isHorizontal:T,hasLeftLabel:V,hasRightLabel:X,getLeftImageSrc:Y,getRightImageSrc:Z}=v(x),_=Y(),tt=Z(),{ref:te,priority:ti,sliderRef:tr,containerRef:tl,leftImageRef:ts,rightImageRef:to,sliderPosition:ta,containerWidth:tm,containerHeight:td,allImagesLoaded:th,setLeftImgLoaded:tn,setRightImgLoaded:tg}=k({props:x,aspectRatio:Q}),tp=H({handleSize:q,isHorizontal:T,containerWidth:tm,containerHeight:td,sliderPosition:ta}),tc=i({...o(R)}),ty=i({...a({width:R?.width,leftImageWidth:A?.width,rightImageWidth:W?.width})}),tf=i({...m({aspectRatio:Q,builderData:$,allImagesLoaded:th})}),tw=i({...d(Q)}),tC=i({...h({type:"right",props:x}),...tp.rightImageClip}),tI=i({...h({type:"left",props:x}),...tp.leftImageClip}),tS=i({...n({styles:R,type:"left",isHorizontal:T})}),tj=i({...n({styles:R,type:"right",isHorizontal:T})}),tu=i({...g({type:"left"})}),tb=i({...g({type:"right"})}),tL=i({...p({isHorizontal:T,sliderLineColor:K,sliderLineWidth:J})}),tv=i({...c({handleSize:q,isHorizontal:T,sliderLineColor:K,sliderLineWidth:J})}),tH=i({...y()}),tk=i({...f({hover:P,handleSize:q,isHorizontal:T}),...tp.sliderPosition}),tx=r({...S(N?.cssClass)}),tA=r({...j(R)}),tW=r({...u()}),t$=l({...w({testId:"right-image",src:tt,title:F,width:W?.width,height:W?.height,priority:ti})}),tN=l({...w({testId:"left-image",src:_,title:B,width:A?.width,height:A?.height,priority:ti})}),tP=I({componentUid:M,positionId:"left",label:D??""}),tR=I({componentUid:M,positionId:"right",label:G??""}),tU=l({...C({width:O?.width,height:O?.height})}),tq=()=>t("img",{alt:"",...tU,style:tw}),tz=()=>t("img",{alt:E,ref:to,...t$,style:tC,onLoad:()=>tg(!0)}),tB=()=>t("img",{alt:z,ref:ts,...tN,style:tI,onLoad:()=>tn(!0)}),tD=()=>t(L,{customHandle:U,componentUid:M,lineStyles:tL,sliderStyles:tk,handleStyles:tv,customHandleStyles:tH,leftArrowStyles:tu,rightArrowStyles:tb,sliderRef:tr}),tE=()=>t(b,{...tP,styles:R,childrenClass:tA,childrenStyle:tS,containerClass:tW,containerStyle:tp?.leftLabelContainer??{}}),tF=()=>t(b,{...tR,styles:R,childrenClass:tA,childrenStyle:tj,containerClass:tW,containerStyle:tp?.rightLabelContainer??{}});return t("div",{"data-id":M,className:tx,style:tc,children:t("div",{id:`img-comparison-wrapper-${M}`,style:ty,ref:te,children:e("div",{id:`img-comparison-container-${M}`,ref:tl,"data-testid":"container",style:tf,children:[tq(),tz(),tB(),tD(),s(V,tE()),s(X,tF())]})})})};export{CompareImage as default};
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import{createStyleReact as i,createClass as r,createAttr as l,If as s}from"@gem-sdk/system";import"react";import{getOuterWrapperStyles as o,getWrapperWidth as a,getContainerStyles as m,getLazyPlaceholderStyle as d,getImageStyles as h,getLabelStyles as n,getArrowStyles as c,getLineStyles as g,getHandleStyles as p,getHandleCustomStyles as y,getSliderStyles as f}from"../common/styles.js";import{getImageReactAttrs as w,getImagePlaceholderAttrs as C,getLabelAttrs as S}from"../common/attrs.js";import{getOuterWrapperClasses as I,getLabelClasses as j,getLabelContainerClasses as u}from"../common/classes.js";import b from"./Label.js";import L from"./SlideHandle.js";import{getData as v,getReactStyles as H}from"../common/helpers.js";import{useCompareImage as k}from"../hooks/useCompareImage.js";let x=x=>{let{leftImage:A,rightImage:W,builderData:$,advanced:N}=x,{hover:P,styles:R,handle:U,handleSize:q,leftImageAlt:z,leftImageTitle:B,leftImageLabel:D,rightImageAlt:E,rightImageTitle:F,rightImageLabel:G,sliderLineWidth:J,sliderLineColor:K,componentUid:M,tempImage:O,aspectRatio:Q,isHorizontal:T,hasLeftLabel:V,hasRightLabel:X,getLeftImageSrc:Y,getRightImageSrc:Z}=v(x),_=Y(),tt=Z(),{ref:te,priority:ti,sliderRef:tr,containerRef:tl,leftImageRef:ts,rightImageRef:to,sliderPosition:ta,containerWidth:tm,containerHeight:td,allImagesLoaded:th,setLeftImgLoaded:tn,setRightImgLoaded:tc}=k({props:x,aspectRatio:Q}),tg=H({handleSize:q,isHorizontal:T,containerWidth:tm,containerHeight:td,sliderPosition:ta}),tp=i({...o(R)}),ty=i({...a({width:R?.width,leftImageWidth:A?.width,rightImageWidth:W?.width})}),tf=i({...m({aspectRatio:Q,builderData:$,allImagesLoaded:th})}),tw=i({...d(Q)}),tC=i({...h({type:"right",props:x}),...tg.rightImageClip}),tS=i({...h({type:"left",props:x}),...tg.leftImageClip}),tI=i({...n({styles:R,type:"left",isHorizontal:T})}),tj=i({...n({styles:R,type:"right",isHorizontal:T})}),tu=i({...c({type:"left"})}),tb=i({...c({type:"right"})}),tL=i({...g({isHorizontal:T,sliderLineColor:K,sliderLineWidth:J})}),tv=i({...p({handleSize:q,isHorizontal:T,sliderLineColor:K,sliderLineWidth:J})}),tH=i({...y()}),tk=i({...f({hover:P,handleSize:q,isHorizontal:T}),...tg.sliderPosition}),tx=r({...I(N?.cssClass)}),tA=r({...j(R)}),tW=r({...u()}),t$=l({...w({testId:"right-image",src:tt,title:F,width:W?.width,height:W?.height,priority:ti})}),tN=l({...w({testId:"left-image",src:_,title:B,width:A?.width,height:A?.height,priority:ti})}),tP=S({componentUid:M,positionId:"left",label:D??""}),tR=S({componentUid:M,positionId:"right",label:G??""}),tU=l({...C({width:O?.width,height:O?.height})});return t("div",{"data-id":M,className:tx,style:tp,children:t("div",{id:`img-comparison-wrapper-${M}`,style:ty,ref:te,children:e("div",{id:`img-comparison-container-${M}`,ref:tl,"data-testid":"container",style:tf,children:[t("img",{alt:"",...tU,style:tw}),t("img",{alt:E,ref:to,...t$,style:tC,onLoad:()=>tc(!0)}),t("img",{alt:z,ref:ts,...tN,style:tS,onLoad:()=>tn(!0)}),t(L,{customHandle:U,componentUid:M,lineStyles:tL,sliderStyles:tk,handleStyles:tv,customHandleStyles:tH,leftArrowStyles:tu,rightArrowStyles:tb,sliderRef:tr}),s(V,t(b,{...tP,styles:R,childrenClass:tA,childrenStyle:tI,containerClass:tW,containerStyle:tg?.leftLabelContainer??{}})),s(X,t(b,{...tR,styles:R,childrenClass:tA,childrenStyle:tj,containerClass:tW,containerStyle:tg?.rightLabelContainer??{}}))]})})})};export{x as default};

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

@@ -1,6 +1,4 @@
-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 c,getContainerStyles as n,getLazyPlaceholderStyle as g,getImageStyles as y,getLabelStyles as h,getArrowStyles as f,getLineStyles as $,getHandleStyles as b,getHandleCustomStyles as j,getSliderStyles as L}from"../common/styles.js";import{getOuterWrapperClasses as S,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:tc}=q(z),tn=tp({isLiquid:!0}),tg=tc({isLiquid:!0}),ty=s({...p(_)}),th=s({...c({width:_?.width,leftImageWidth:D?.width,rightImageWidth:E?.width})}),tf=s({...n({aspectRatio:ts,builderData:x})}),t$=s({...g(ts)}),tb=s({...y({type:"right",props:z})}),tj=s({...y({type:"left",props:z})}),tL=s({...h({styles:_,type:"left",isHorizontal:tr})}),tS=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({...j()}),tA=s({...L({hover:W,handleSize:M,isHorizontal:tr})}),tq=a({...S(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:tg,title:K,isDisableObjectFit:!0,isDisableAspectStyle:!0,id:`right-image-${te}`})}),tO=r({...v({priority:G,src:tn,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:tj,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:tL,containerClass:tk,containerStyle:{}}),tR=()=>N({...tD,...tF,styles:_,childrenClass:tN,childrenStyle:tS,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`
+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 c,getContainerStyles as n,getLazyPlaceholderStyle as g,getImageStyles as y,getLabelStyles as h,getArrowStyles as f,getLineStyles as $,getHandleStyles as b,getHandleCustomStyles as j,getSliderStyles as L}from"../common/styles.js";import{getOuterWrapperClasses as S,getLabelClasses as u,getLabelContainerClasses as I}from"../common/classes.js";import{getImageLiquidAttrs as v,getImagePlaceholderAttrs as w,getLabelLiquidAttrs as A,getLabelAttrs as C}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 z=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:tc}=q(z),tn=tp({isLiquid:!0}),tg=tc({isLiquid:!0}),ty=s({...p(_)}),th=s({...c({width:_?.width,leftImageWidth:D?.width,rightImageWidth:E?.width})}),tf=s({...n({aspectRatio:ts,builderData:x})}),t$=s({...g(ts)}),tb=s({...y({type:"right",props:z})}),tj=s({...y({type:"left",props:z})}),tL=s({...h({styles:_,type:"left",isHorizontal:tr})}),tS=s({...h({styles:_,type:"right",isHorizontal:tr})}),tu=s({...f({type:"left"})}),tI=s({...f({type:"right"})}),tv=s({...$({isHorizontal:tr,sliderLineColor:Y,sliderLineWidth:X})}),tw=s({...b({handleSize:M,isHorizontal:tr,sliderLineColor:Y,sliderLineWidth:X})}),tA=s({...j()}),tC=s({...L({hover:W,handleSize:M,isHorizontal:tr})}),tq=a({...S(O?.cssClass)}),tN=a({...u(_)}),tk=a({...I()}),tz=C({componentUid:te,positionId:"left",label:V??""}),tD=C({componentUid:te,positionId:"right",label:U??""}),tE=r({...v({priority:G,src:tg,title:K,isDisableObjectFit:!0,isDisableAspectStyle:!0,id:`right-image-${te}`})}),tO=r({...v({priority:G,src:tn,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});return t`
     <gp-image-comparison
       data-id="${te}"
       style="${ty}"
@@ -13,14 +11,16 @@ import{template as t,isLocalEnv as e,baseAssetURL as i}from"@gem-sdk/core";impor
           data-testid="container"
           style="${tf}"
         >
-          ${tW()}
-          ${t_()}
-          ${tJ()}
-          ${tM()}
-          ${o(tl,tP(),"")}
-          ${o(to,tR(),"")}
+          ${t`
+      <img alt="" ${tG} style="${t$}" />
+    `}
+          ${d({...tE,alt:B,style:tb,setting:{qualityType:tm,qualityPercent:td},enableLazyLoadImage:!G,isNotLazyload:G,customAttrs:{"data-testid":"right-image"}})}
+          ${d({...tO,alt:P,style:tj,setting:{qualityType:tm,qualityPercent:td},enableLazyLoadImage:!G,isNotLazyload:G,customAttrs:{"data-testid":"left-image"}})}
+          ${k({componentUid:te,customHandle:J,lineStyles:tv,sliderStyles:tC,handleStyles:tw,customHandleStyles:tA,leftArrowStyles:tu,rightArrowStyles:tI})}
+          ${o(tl,N({...tz,...tx,styles:_,childrenClass:tN,childrenStyle:tL,containerClass:tk,containerStyle:{}}),"")}
+          ${o(to,N({...tD,...tF,styles:_,childrenClass:tN,childrenStyle:tS,containerClass:tk,containerStyle:{}}),"")}
         </div>
       </div>
     </gp-image-comparison>
-    ${tT()}
-  `};export{CompareImage as default};
+    ${`${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>`)}`}
+  `};export{z as default};

package/dist/esm/image-comparison/components/ImageComparison.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as e}from"react/jsx-runtime";import{createClass as a,createStyleReact as t}from"@gem-sdk/system";import{getImageComparisonWrapperClasses as m,getImageComparisonWrapperStyles as r}from"../common/classes.js";import{getSliderPositionPercentage as o}from"../common/helpers.js";import l from"./CompareImage.js";let ImageComparison=({setting:i,styles:s,builderProps:g,advanced:d,...n})=>{let{imageLeft:c,altLeft:f,titleLeft:p,imageRight:I,altRight:h,titleRight:u,direction:v,defaultPercentage:b,leftImageLabel:j,rightImageLabel:L,sliderLineWidth:y,hoverToSlide:A,enableLabel:C,preload:x,enableSEOLeft:D,enableSEORight:P}=i??{},T=a(m()),k=t(r());return e("div",{style:k,className:T,"data-allow-active-on-mousemove":!0,children:e(l,{...n,styles:s,preload:x,advanced:d,leftImage:c,leftImageAlt:D?f:"",leftImageTitle:D?p:"",rightImage:I,rightImageAlt:P?h:"",rightImageTitle:P?u:"",leftImageLabel:j??"Before",rightImageLabel:L??"After",sliderLineWidth:y,sliderPositionPercentage:o(b),vertical:"vertical"===v,hover:A,enableLabel:C,componentUid:g?.uid,builderData:g?.builderData})})};export{ImageComparison as default};
+import{jsx as e}from"react/jsx-runtime";import{createClass as t,createStyleReact as a}from"@gem-sdk/system";import{getImageComparisonWrapperClasses as r,getImageComparisonWrapperStyles as m}from"../common/classes.js";import{getSliderPositionPercentage as l}from"../common/helpers.js";import o from"./CompareImage.js";let i=({setting:i,styles:s,builderProps:g,advanced:d,...n})=>{let{imageLeft:c,altLeft:f,titleLeft:p,imageRight:I,altRight:h,titleRight:u,direction:v,defaultPercentage:b,leftImageLabel:j,rightImageLabel:L,sliderLineWidth:y,hoverToSlide:A,enableLabel:x,preload:C,enableSEOLeft:D,enableSEORight:P}=i??{},T=t(r()),k=a(m());return e("div",{style:k,className:T,"data-allow-active-on-mousemove":!0,children:e(o,{...n,styles:s,preload:C,advanced:d,leftImage:c,leftImageAlt:D?f:"",leftImageTitle:D?p:"",rightImage:I,rightImageAlt:P?h:"",rightImageTitle:P?u:"",leftImageLabel:j??"Before",rightImageLabel:L??"After",sliderLineWidth:y,sliderPositionPercentage:l(b),vertical:"vertical"===v,hover:A,enableLabel:x,componentUid:g?.uid,builderData:g?.builderData})})};export{i as default};

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

@@ -1,5 +1,5 @@
-import{template as e}from"@gem-sdk/core";import{createClass as t,createStyle as i}from"@gem-sdk/system";import{getImageComparisonWrapperClasses as r,getImageComparisonWrapperStyles as a}from"../common/classes.js";import{getSettingTranslatedImageComparisonAndSeo as m,getSliderPositionPercentage as l}from"../common/helpers.js";import o from"./CompareImage.liquid.js";let ImageComparison=({setting:s,styles:g,builderProps:d,advanced:n,pageContext:p,...f})=>{let I=m({setting:s,uid:d?.uid,pageContext:p}),{imageLeft:c,altLeft:u,titleLeft:h,imageRight:b,altRight:v,titleRight:y,direction:C,defaultPercentage:L,leftImageLabel:j,rightImageLabel:q,sliderLineWidth:A,hoverToSlide:P,enableLabel:T,preload:$,qualityType:k,qualityPercent:x,enableSEOLeft:D,enableSEORight:B}=I??{},U=t(r()),W=i(a());return e`
+import{template as e}from"@gem-sdk/core";import{createClass as t,createStyle as i}from"@gem-sdk/system";import{getImageComparisonWrapperClasses as r,getImageComparisonWrapperStyles as a}from"../common/classes.js";import{getSettingTranslatedImageComparisonAndSeo as m,getSliderPositionPercentage as l}from"../common/helpers.js";import o from"./CompareImage.liquid.js";let s=({setting:s,styles:g,builderProps:d,advanced:f,pageContext:n,...p})=>{let c=m({setting:s,uid:d?.uid,pageContext:n}),{imageLeft:u,altLeft:I,titleLeft:h,imageRight:b,altRight:v,titleRight:y,direction:L,defaultPercentage:j,leftImageLabel:q,rightImageLabel:A,sliderLineWidth:C,hoverToSlide:P,enableLabel:T,preload:$,qualityType:k,qualityPercent:x,enableSEOLeft:D,enableSEORight:B}=c??{},U=t(r()),W=i(a());return e`
     <div class="${U}" style="${W}">
-      ${o({...f,styles:g,preload:$,advanced:n,leftImage:c,leftImageAlt:D?u:"",leftImageTitle:D?h:"",rightImage:b,rightImageAlt:B?v:"",rightImageTitle:B?y:"",leftImageLabel:j??"Before",rightImageLabel:q??"After",sliderLineWidth:A,sliderPositionPercentage:l(L),vertical:"vertical"===C,hover:P,enableLabel:T,qualityType:k,qualityPercent:x,componentUid:d?.uid??"",builderData:d?.builderData})}
+      ${o({...p,styles:g,preload:$,advanced:f,leftImage:u,leftImageAlt:D?I:"",leftImageTitle:D?h:"",rightImage:b,rightImageAlt:B?v:"",rightImageTitle:B?y:"",leftImageLabel:q??"Before",rightImageLabel:A??"After",sliderLineWidth:C,sliderPositionPercentage:l(j),vertical:"vertical"===L,hover:P,enableLabel:T,qualityType:k,qualityPercent:x,componentUid:d?.uid??"",builderData:d?.builderData})}
     </div>
-  `};export{ImageComparison as default};
+  `};export{s as default};

package/dist/esm/image-comparison/components/Label.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import"react";import{getLabelCustomCss as r}from"../common/styles.js";let Label=a=>{let{uid:l,label:o,styles:s,positionId:i,childrenClass:m,childrenStyle:c,containerClass:p,containerStyle:n}=a,d=r(s,l??""),y=s?.typo?.attrs?.transform==="capitalize"?o?.toString().toLocaleLowerCase():o;return e("div",{id:`image-comparison-${i}-label-${l}`,style:n,className:p,children:[t("style",{children:d}),t("div",{className:m,style:c,children:y})]})};Label.propTypes={};export{Label as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import"react";import{getLabelCustomCss as r}from"../common/styles.js";let a=a=>{let{uid:l,label:o,styles:s,positionId:i,childrenClass:m,childrenStyle:c,containerClass:p,containerStyle:n}=a,d=r(s,l??""),y=s?.typo?.attrs?.transform==="capitalize"?o?.toString().toLocaleLowerCase():o;return e("div",{id:`image-comparison-${i}-label-${l}`,style:n,className:p,children:[t("style",{children:d}),t("div",{className:m,style:c,children:y})]})};a.propTypes={};export{a as default};

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

@@ -1,6 +1,6 @@
-import{template as t}from"@gem-sdk/core";import{getDynamicSourceLocales as s,createSettingId as e}from"../../helpers.js";import{getLabelCustomCss as i}from"../common/styles.js";import{ImageComparison as l}from"../settings/configs/translate.js";let Label=({uid:a,label:r,styles:o,positionId:m,pageContext:d,translateLabel:p,childrenStyle:n,childrenClass:$,containerStyle:c,containerClass:f})=>{let y=i(o,a??""),g=s({uid:a,val:r,pageContext:d,settingId:e({id:l?.[p]?.id}),isCapitalize:o?.typo?.attrs?.transform==="capitalize"});return t`
+import{template as t}from"@gem-sdk/core";import{getDynamicSourceLocales as s,createSettingId as e}from"../../helpers.js";import{getLabelCustomCss as i}from"../common/styles.js";import{ImageComparison as l}from"../settings/configs/translate.js";let r=({uid:r,label:a,styles:o,positionId:m,pageContext:d,translateLabel:p,childrenStyle:n,childrenClass:$,containerStyle:c,containerClass:f})=>{let y=i(o,r??""),g=s({uid:r,val:a,pageContext:d,settingId:e({id:l?.[p]?.id}),isCapitalize:o?.typo?.attrs?.transform==="capitalize"});return t`
     <div
-      id="image-comparison-${m}-label-${a}"
+      id="image-comparison-${m}-label-${r}"
       style="${c}"
       class="${f}"
     >
@@ -9,4 +9,4 @@ import{template as t}from"@gem-sdk/core";import{getDynamicSourceLocales as s,cre
         ${g}
       </div>
     </div>
-  `};export{Label as default};
+  `};export{r as default};

package/dist/esm/image-comparison/components/SlideHandle.js

@@ -1 +1 @@
-import{jsxs as e,jsx as i}from"react/jsx-runtime";import{If as l}from"@gem-sdk/system";import"react";let SlideHandle=({customHandle:t,componentUid:d,lineStyles:s,sliderStyles:r,handleStyles:h,customHandleStyles:n,leftArrowStyles:o,rightArrowStyles:w,sliderRef:m})=>e("div",{ref:m,id:`image-comparison-slider-${d}`,style:r,children:[i("div",{style:s}),l(!!t,i("div",{style:n,children:t}),e("div",{style:h,children:[i("svg",{style:o,width:"6",height:"12",viewBox:"0 0 6 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:i("path",{d:"M0 6L6 0V12L0 6Z",fill:"white"})}),i("svg",{style:w,width:"6",height:"12",viewBox:"0 0 6 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:i("path",{d:"M6 6L0 12V0L6 6Z",fill:"white"})})]})),i("div",{style:s})]});export{SlideHandle as default};
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import{If as t}from"@gem-sdk/system";import"react";let l=({customHandle:l,componentUid:d,lineStyles:s,sliderStyles:r,handleStyles:h,customHandleStyles:n,leftArrowStyles:o,rightArrowStyles:w,sliderRef:m})=>e("div",{ref:m,id:`image-comparison-slider-${d}`,style:r,children:[i("div",{style:s}),t(!!l,i("div",{style:n,children:l}),e("div",{style:h,children:[i("svg",{style:o,width:"6",height:"12",viewBox:"0 0 6 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:i("path",{d:"M0 6L6 0V12L0 6Z",fill:"white"})}),i("svg",{style:w,width:"6",height:"12",viewBox:"0 0 6 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:i("path",{d:"M6 6L0 12V0L6 6Z",fill:"white"})})]})),i("div",{style:s})]});export{l as default};

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

@@ -1,6 +1,6 @@
-import{template as i}from"@gem-sdk/core";import{If as e}from"@gem-sdk/system";let SlideHandle=({customHandle:t,componentUid:l,lineStyles:d,sliderStyles:s,handleStyles:v,customHandleStyles:o,leftArrowStyles:w,rightArrowStyles:g})=>i`
-    <div id="image-comparison-slider-${l}" style="${s}">
-      <div style="${d}"></div>
+import{template as i}from"@gem-sdk/core";import{If as e}from"@gem-sdk/system";let t=({customHandle:t,componentUid:l,lineStyles:s,sliderStyles:d,handleStyles:v,customHandleStyles:o,leftArrowStyles:w,rightArrowStyles:g})=>i`
+    <div id="image-comparison-slider-${l}" style="${d}">
+      <div style="${s}"></div>
       ${e(!!t,i`<div style="${o}">${t}</div>`,i`<div style="${v}">
           <svg
             style="${w}"
@@ -21,6 +21,6 @@ import{template as i}from"@gem-sdk/core";import{If as e}from"@gem-sdk/system";le
             <path d="M6 6L0 12V0L6 6Z" fill="white"/>
           </svg>
         </div>`)}
-      <div style="${d}"></div>
+      <div style="${s}"></div>
     </div>
-  `;export{SlideHandle as default};
+  `;export{t as default};

package/dist/esm/image-comparison/hooks/useCompareImage.js

@@ -1 +1 @@
-import{useRenderMode as e,usePageType as t,useInteraction as n}from"@gem-sdk/core";import{useState as o,useRef as r,useMemo as i,useEffect as u}from"react";let useCompareImage=({props:s,aspectRatio:m})=>{let{styles:v,leftImage:d,rightImage:a,hover:l=!1,vertical:c=!1,sliderLineWidth:p=2,sliderPositionPercentage:g=.5,onSliderPositionChange:w,preload:h}=s,E=!c,{isPreviewSharePageMode:L,isEditMode:f}=e(),R="STATIC"===t(),[b,C]=o(g),[B,I]=o(0),[O,X]=o(0),[Y,A]=o(!1),[N,T]=o(!1),U=r(null),k=r(null),x=r(null),z=r(null),{onListener:D,saveToElementInteractionData:M}=n(),P=r(null),S=i(()=>m,[d,a,v?.aspectRatio,v?.customAspectRadio]);u(()=>{let e=`[data-id="${s?.componentUid}"]`;D({event:"gp:change-ratio-original",selector:e,elementRef:P},e=>{let{data:t,isRollback:n,uniqueStorageKey:o}=e||{};if(!n||void 0!==t){if(n){C(Number(t));return}M(P.current,o,b),C(Number(t)/100)}})},[D,s?.componentUid,M,b]);let $=i(()=>p/2+21,[p]),j=i(()=>(E?B-p/2:O-p/2)-21,[E,B,p,O]),q=h||f||L||R;u(()=>{let e=U.current;if(!e)return;let t=new ResizeObserver(([e])=>{let t=e?.target.getBoundingClientRect().width??0;I(t)});return t.observe(e),()=>t.disconnect()},[]),u(()=>{let e=z?.current?.complete;return e&&A(!0),()=>{A(!1)}},[d]),u(()=>{let e=x?.current?.complete;return e&&T(!0),()=>{T(!1)}},[a]);let y=N&&Y;return u(()=>{let e=E?g*B:g*O;e<$?C(E?$/B:$/O):e>j?C(E?j/B:j/O):C(g)},[O,B,E,j,$,g]),u(()=>{let e=e=>{let t=e||window.event;if(t.stopPropagation(),t.button&&0!==t.button)return;let n="touches"in t?t?.touches?.[0]?.pageX??0:t.pageX,o="touches"in t?t?.touches?.[0]?.pageY??0:t.pageY,r=n-window.pageXOffset,i=o-window.pageYOffset,u=x.current?.getBoundingClientRect(),s=E?r-(u?.left??0):i-(u?.top??0);s<$&&(s=$),s>j&&(s=j),E?C(s/B):C(s/O),w&&(E?w(s/B):w(s/O))},t=t=>{t.preventDefault(),e(t),t.button&&0!==t.button||(window.addEventListener("mousemove",e),r.addEventListener("touchmove",e))},n=()=>{window.removeEventListener("mousemove",e),r.removeEventListener("touchmove",e)},o=U.current,r=k.current;if(y&&o&&r){r.addEventListener("touchstart",t),r.addEventListener("touchend",n),l?(o.addEventListener("mousemove",e),o.addEventListener("mouseleave",n)):(o.addEventListener("mousedown",t),window.addEventListener("mouseup",n));let i=z.current?.getBoundingClientRect(),u=x.current?.getBoundingClientRect(),s=(i?.height??0)/(i?.width??1),m=(u?.height??0)/(u?.width??1),v=Math.min(s,m),d=B*v;X(d)}return()=>{o&&r&&(r.removeEventListener("touchstart",t),r.removeEventListener("touchend",n),o.removeEventListener("mousemove",e),o.removeEventListener("mouseleave",n),o.removeEventListener("mousedown",t),window.removeEventListener("mouseup",n),window.removeEventListener("mousemove",e),r.removeEventListener("touchmove",e))}},[l,j,$,E,S,B,O,y,p,v?.aspectRatio,w]),{ref:P,priority:q,sliderRef:k,containerRef:U,leftImageRef:z,rightImageRef:x,sliderPosition:b,containerWidth:B,containerHeight:O,allImagesLoaded:y,setLeftImgLoaded:A,setRightImgLoaded:T}};export{useCompareImage};
+import{useRenderMode as e,usePageType as t,useInteraction as n}from"@gem-sdk/core";import{useState as o,useRef as r,useMemo as i,useEffect as u}from"react";let s=({props:s,aspectRatio:m})=>{let{styles:v,leftImage:d,rightImage:l,hover:c=!1,vertical:a=!1,sliderLineWidth:p=2,sliderPositionPercentage:g=.5,onSliderPositionChange:w,preload:h}=s,E=!a,{isPreviewSharePageMode:L,isEditMode:f}=e(),R="STATIC"===t(),[b,C]=o(g),[B,O]=o(0),[X,Y]=o(0),[A,I]=o(!1),[N,T]=o(!1),U=r(null),k=r(null),x=r(null),y=r(null),{onListener:z,saveToElementInteractionData:D}=n(),M=r(null),P=i(()=>m,[d,l,v?.aspectRatio,v?.customAspectRadio]);u(()=>{let e=`[data-id="${s?.componentUid}"]`;z({event:"gp:change-ratio-original",selector:e,elementRef:M},e=>{let{data:t,isRollback:n,uniqueStorageKey:o}=e||{};if(!n||void 0!==t){if(n){C(Number(t));return}D(M.current,o,b),C(Number(t)/100)}})},[z,s?.componentUid,D,b]);let S=i(()=>p/2+21,[p]),$=i(()=>(E?B-p/2:X-p/2)-21,[E,B,p,X]);u(()=>{let e=U.current;if(!e)return;let t=new ResizeObserver(([e])=>{let t=e?.target.getBoundingClientRect().width??0;O(t)});return t.observe(e),()=>t.disconnect()},[]),u(()=>{let e=y?.current?.complete;return e&&I(!0),()=>{I(!1)}},[d]),u(()=>{let e=x?.current?.complete;return e&&T(!0),()=>{T(!1)}},[l]);let j=N&&A;return u(()=>{let e=E?g*B:g*X;e<S?C(E?S/B:S/X):e>$?C(E?$/B:$/X):C(g)},[X,B,E,$,S,g]),u(()=>{let e=e=>{let t=e||window.event;if(t.stopPropagation(),t.button&&0!==t.button)return;let n="touches"in t?t?.touches?.[0]?.pageX??0:t.pageX,o="touches"in t?t?.touches?.[0]?.pageY??0:t.pageY,r=n-window.pageXOffset,i=o-window.pageYOffset,u=x.current?.getBoundingClientRect(),s=E?r-(u?.left??0):i-(u?.top??0);s<S&&(s=S),s>$&&(s=$),E?C(s/B):C(s/X),w&&(E?w(s/B):w(s/X))},t=t=>{t.preventDefault(),e(t),t.button&&0!==t.button||(window.addEventListener("mousemove",e),r.addEventListener("touchmove",e))},n=()=>{window.removeEventListener("mousemove",e),r.removeEventListener("touchmove",e)},o=U.current,r=k.current;if(j&&o&&r){r.addEventListener("touchstart",t),r.addEventListener("touchend",n),c?(o.addEventListener("mousemove",e),o.addEventListener("mouseleave",n)):(o.addEventListener("mousedown",t),window.addEventListener("mouseup",n));let i=y.current?.getBoundingClientRect(),u=x.current?.getBoundingClientRect(),s=(i?.height??0)/(i?.width??1),m=(u?.height??0)/(u?.width??1),v=B*Math.min(s,m);Y(v)}return()=>{o&&r&&(r.removeEventListener("touchstart",t),r.removeEventListener("touchend",n),o.removeEventListener("mousemove",e),o.removeEventListener("mouseleave",n),o.removeEventListener("mousedown",t),window.removeEventListener("mouseup",n),window.removeEventListener("mousemove",e),r.removeEventListener("touchmove",e))}},[c,$,S,E,P,B,X,j,p,v?.aspectRatio,w]),{ref:M,priority:h||f||L||R,sliderRef:k,containerRef:U,leftImageRef:y,rightImageRef:x,sliderPosition:b,containerWidth:B,containerHeight:X,allImagesLoaded:j,setLeftImgLoaded:I,setRightImgLoaded:T}};export{s as useCompareImage};

package/dist/esm/image-comparison/index.js

@@ -1 +1 @@
-import"react/jsx-runtime";import"@gem-sdk/system";import"@gem-sdk/core";import"react";import"next/link";import"./components/Label.js";import m from"./settings/ImageComparison.js";let imageComparisonSetting={ImageComparison:m};export{imageComparisonSetting};
+import"react/jsx-runtime";import"@gem-sdk/system";import"@gem-sdk/core";import"react";import"next/link";import"./components/Label.js";import m from"./settings/ImageComparison.js";let t={ImageComparison:m};export{t as imageComparisonSetting};

package/dist/esm/image-comparison/next.js

@@ -1 +1 @@
-import o from"next/dynamic";import m from"../common/components/Loading.js";import"react/jsx-runtime";import"react";import"@gem-sdk/core";let ImageComparison=o(()=>import("./components/ImageComparison.js"),{loading:m});var imageComparison={ImageComparison};export{imageComparison as default};
+import o from"next/dynamic";import m from"../common/components/Loading.js";import"react/jsx-runtime";import"react";import"@gem-sdk/core";let r=o(()=>import("./components/ImageComparison.js"),{loading:m});var t={ImageComparison:r};export{t as default};

package/dist/esm/image-comparison/settings/ImageComparison.js

@@ -1,4 +1,4 @@
-import{ImageComparisonSettings as i}from"./configs/settings.js";import{SettingUIV2 as t}from"./configs/ui-v2.js";let config={tag:"ImageComparison",label:"Image Comparison",icon:`
+import{ImageComparisonSettings as i}from"./configs/settings.js";import{SettingUIV2 as t}from"./configs/ui-v2.js";let o={tag:"ImageComparison",label:"Image Comparison",icon:`
   <div>ImageComparison</div>
   `,settings:i,ui:[],uiV2:t,presets:[{id:"image-comparison",name:"Image Comparison",icon:{desktop:`
          <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -9,4 +9,4 @@ import{ImageComparisonSettings as i}from"./configs/settings.js";import{SettingUI
           <path d="M40.2225 21.1928L42.7903 23.5376C43.0699 23.793 43.0699 24.207 42.7903 24.4624L40.2225 26.8072C39.7713 27.2191 39 26.9274 39 26.3448V21.6552C39 21.0726 39.7713 20.7809 40.2225 21.1928Z" fill="#424242"/>
           <rect x="37" width="1" height="48" fill="#D6D6D6"/>
           </svg>
-        `},components:[{tag:"ImageComparison",advanced:{margin:{desktop:{bottom:0}}}}]}],rootOverride:{styles:{fullWidth:{desktop:!1},width:{desktop:"600px"},align:{desktop:"center"}},advanced:{"spacing-setting":{desktop:{margin:{bottom:0}}}}}};export{config as default};
+        `},components:[{tag:"ImageComparison",advanced:{margin:{desktop:{bottom:0}}}}]}],rootOverride:{styles:{fullWidth:{desktop:!1},width:{desktop:"600px"},align:{desktop:"center"}},advanced:{"spacing-setting":{desktop:{margin:{bottom:0}}}}}};export{o as default};

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

@@ -1 +1 @@
-let ImageComparisonSettings=[{id:"setting",controls:[{id:"imageTab",label:"",type:"option:value",options:[{label:"First",value:"left"},{label:"Second",value:"right"}],default:"left"},{id:"imageLeft",label:"Left image",type:"group",controls:[{id:"imageLeft",type:"image",default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_compare_before.png",width:900,height:600},hiddenSetting:{seo:!0,optimizeLCP:!0}}]},{id:"imageRight",label:"Right Image",type:"group",controls:[{id:"imageRight",type:"image",default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_compare_after.png",width:900,height:600},hiddenSetting:{seo:!0,optimizeLCP:!0}}]},{id:"preload",type:"toggle",label:"Preload",default:!1},{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:["%"],min:100,max:400,step:50,useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0,devices:{desktop:{default:100}}},{id:"direction",label:"Layout",type:"layout-selector",iconViewBox:"0 0 72 72",enableItemBackground:!0,itemPerRow:2,itemSpacing:"large",options:[{label:"Horizontal",value:"horizontal",iconName:"gp-image-comparison-horizontal"},{label:"Vertical",value:"vertical",iconName:"gp-image-comparison-vertical"}],default:"horizontal"},{id:"slider-settings",type:"group",label:"Slider",controls:[{id:"hoverToSlide",type:"select",options:[{label:"Drag to move",value:!1},{label:"Hover to move",value:!0}],label:"Behavior",default:!1},{id:"defaultPercentage",label:"Default ratio",type:"input:slider",useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0,units:["%"],hide:!0,min:1,max:100,default:50}]},{id:"enableLabel",type:"toggle",default:!1},{id:"leftImageLabel",label:"First Description",type:"input",default:"Before"},{id:"rightImageLabel",label:"Second Description",type:"input",default:"After"},{id:"enableSEOLeft",type:"toggle",default:!1},{id:"enableSEORight",type:"toggle",default:!1},{id:"seo",type:"group",label:"SEO",controls:[{id:"seoTab",label:"",type:"option:value",options:[{label:"First",value:"left"},{label:"Second",value:"right"}],default:"left"},{id:"altLeft",label:"First image alt text",type:"textarea",minHeight:76,autoHeight:!0,placeholder:"E.g: image of an iphone",default:"Describes the appearance of the image"},{id:"altRight",label:"Second image alt text",type:"textarea",minHeight:76,autoHeight:!0,placeholder:"E.g: image of an iphone",default:"Describes the appearance of the image"},{id:"titleLeft",label:"First image title",info:"Show title when hover to first image",type:"input",placeholder:"E.g: iphone compare",default:"Title"},{id:"titleRight",label:"Second image title",info:"Show title when hover to second image",type:"input",placeholder:"E.g: iphone compare",default:"Title"}]}]},{id:"style",controls:[{id:"label-settings",type:"group",label:"Label",controls:[{id:"labelPadding",type:"padding-v2",devices:{desktop:{default:{top:"4px",left:"4px",bottom:"4px",right:"4px",linked:!0}}},compoDefaultValue:{desktop:{default:{top:"4px",left:"4px",bottom:"4px",right:"4px",linked:!0}}}},{id:"labelBackgroundColor",type:"color-picker-v2",devices:{desktop:{default:"rgba(0, 0, 0, 0.60)"}}},{id:"labelPositionHoz",label:"Position",type:"option:value",devices:{desktop:{default:"hoz-center"}},options:[{label:"Top",value:"top",iconName:"gp-justify-content-top"},{label:"Center",value:"hoz-center",iconName:"gp-justify-content-center"},{label:"Bottom",value:"bottom",iconName:"gp-justify-content-bottom"}]},{id:"labelPositionVer",label:"Position",type:"option:value",devices:{desktop:{default:"ver-center"}},options:[{label:"Left",value:"left",iconName:"gp-justify-content-left"},{label:"Center",value:"ver-center",iconName:"gp-justify-content-middle"},{label:"Right",value:"right",iconName:"gp-justify-content-right"}]},{id:"labelTextColor",type:"colorpicker",label:"Text Color",default:"#FFFFFF"},{id:"labelBorder",type:"border-v2",devices:{desktop:{default:{borderType:"none",border:"none",borderWidth:"1px",width:"1px 1px 1px 1px",color:"line-1",isCustom:!0}}},compoDefaultValue:{desktop:{default:{border:"solid",color:"line-1",width:"1px",borderWidth:"1px"}}}},{id:"labelRounded",type:"corner-v2",devices:{desktop:{default:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}}},compoDefaultValue:{desktop:{default:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}}}},{id:"labelShadow",type:"shadow-v2",devices:{desktop:{}},compoDefaultValue:{desktop:{default:{type:"shadow-1",distance:"4px",blur:"4px",spread:"0px",color:"rgba(18, 18, 18, 0.2)",angle:45,enable:!0}}}}]},{id:"size-settings",type:"group",label:"Size",controls:[{id:"aspectRatio",type:"select",label:"Aspect Ratio",options:[{label:"Original",value:"auto"},{label:"1:1",value:"1"},{label:"3:2",value:"3/2"},{label:"4:3",value:"4/3"},{label:"16:9",value:"16/9"},{label:"21:9",value:"21/9"},{label:"2:3",value:"2/3"},{label:"3:4",value:"3/4"},{label:"9:16",value:"9/16"},{label:"Custom",value:"custom"}],devices:{desktop:{default:"16/9"}}},{id:"customAspectRadio",type:"ratio",min:1,devices:{desktop:{default:{width:"1",height:"1"}}},hide:!0},{id:"imageScale",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:"fullWidth",label:"Full Width",type:"toggle",devices:{desktop:{default:!0}}},{id:"width",type:"input:unit",emptyOnClear:!0,placeholder:"Auto",min:0,units:["px","%"],hide:!0,devices:{desktop:{default:"100%"}}}]},{id:"typo",type:"typography-combo",default:{type:"paragraph-2"},ignoreReRender:!0,compoDefaultValue:{attrs:{color:"#FFFFFF"}},hiddenSetting:{textAlign:!0}},{id:"transform",label:"Text Transform",type:"select",options:[{value:"default",label:"None"},{value:"capitalize",label:"Capitalize"},{value:"uppercase",label:"Uppercase"},{value:"lowercase",label:"Lowercase"}],default:"default"},{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:"center"}}}]}];export{ImageComparisonSettings};
+let e=[{id:"setting",controls:[{id:"imageTab",label:"",type:"option:value",options:[{label:"First",value:"left"},{label:"Second",value:"right"}],default:"left"},{id:"imageLeft",label:"Left image",type:"group",controls:[{id:"imageLeft",type:"image",default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_compare_before.png",width:900,height:600},hiddenSetting:{seo:!0,optimizeLCP:!0}}]},{id:"imageRight",label:"Right Image",type:"group",controls:[{id:"imageRight",type:"image",default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_compare_after.png",width:900,height:600},hiddenSetting:{seo:!0,optimizeLCP:!0}}]},{id:"preload",type:"toggle",label:"Preload",default:!1},{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:["%"],min:100,max:400,step:50,useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0,devices:{desktop:{default:100}}},{id:"direction",label:"Layout",type:"layout-selector",iconViewBox:"0 0 72 72",enableItemBackground:!0,itemPerRow:2,itemSpacing:"large",options:[{label:"Horizontal",value:"horizontal",iconName:"gp-image-comparison-horizontal"},{label:"Vertical",value:"vertical",iconName:"gp-image-comparison-vertical"}],default:"horizontal"},{id:"slider-settings",type:"group",label:"Slider",controls:[{id:"hoverToSlide",type:"select",options:[{label:"Drag to move",value:!1},{label:"Hover to move",value:!0}],label:"Behavior",default:!1},{id:"defaultPercentage",label:"Default ratio",type:"input:slider",useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0,units:["%"],hide:!0,min:1,max:100,default:50}]},{id:"enableLabel",type:"toggle",default:!1},{id:"leftImageLabel",label:"First Description",type:"input",default:"Before"},{id:"rightImageLabel",label:"Second Description",type:"input",default:"After"},{id:"enableSEOLeft",type:"toggle",default:!1},{id:"enableSEORight",type:"toggle",default:!1},{id:"seo",type:"group",label:"SEO",controls:[{id:"seoTab",label:"",type:"option:value",options:[{label:"First",value:"left"},{label:"Second",value:"right"}],default:"left"},{id:"altLeft",label:"First image alt text",type:"textarea",minHeight:76,autoHeight:!0,placeholder:"E.g: image of an iphone",default:"Describes the appearance of the image"},{id:"altRight",label:"Second image alt text",type:"textarea",minHeight:76,autoHeight:!0,placeholder:"E.g: image of an iphone",default:"Describes the appearance of the image"},{id:"titleLeft",label:"First image title",info:"Show title when hover to first image",type:"input",placeholder:"E.g: iphone compare",default:"Title"},{id:"titleRight",label:"Second image title",info:"Show title when hover to second image",type:"input",placeholder:"E.g: iphone compare",default:"Title"}]}]},{id:"style",controls:[{id:"label-settings",type:"group",label:"Label",controls:[{id:"labelPadding",type:"padding-v2",devices:{desktop:{default:{top:"4px",left:"4px",bottom:"4px",right:"4px",linked:!0}}},compoDefaultValue:{desktop:{default:{top:"4px",left:"4px",bottom:"4px",right:"4px",linked:!0}}}},{id:"labelBackgroundColor",type:"color-picker-v2",devices:{desktop:{default:"rgba(0, 0, 0, 0.60)"}}},{id:"labelPositionHoz",label:"Position",type:"option:value",devices:{desktop:{default:"hoz-center"}},options:[{label:"Top",value:"top",iconName:"gp-justify-content-top"},{label:"Center",value:"hoz-center",iconName:"gp-justify-content-center"},{label:"Bottom",value:"bottom",iconName:"gp-justify-content-bottom"}]},{id:"labelPositionVer",label:"Position",type:"option:value",devices:{desktop:{default:"ver-center"}},options:[{label:"Left",value:"left",iconName:"gp-justify-content-left"},{label:"Center",value:"ver-center",iconName:"gp-justify-content-middle"},{label:"Right",value:"right",iconName:"gp-justify-content-right"}]},{id:"labelTextColor",type:"colorpicker",label:"Text Color",default:"#FFFFFF"},{id:"labelBorder",type:"border-v2",devices:{desktop:{default:{borderType:"none",border:"none",borderWidth:"1px",width:"1px 1px 1px 1px",color:"line-1",isCustom:!0}}},compoDefaultValue:{desktop:{default:{border:"solid",color:"line-1",width:"1px",borderWidth:"1px"}}}},{id:"labelRounded",type:"corner-v2",devices:{desktop:{default:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}}},compoDefaultValue:{desktop:{default:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}}}},{id:"labelShadow",type:"shadow-v2",devices:{desktop:{}},compoDefaultValue:{desktop:{default:{type:"shadow-1",distance:"4px",blur:"4px",spread:"0px",color:"rgba(18, 18, 18, 0.2)",angle:45,enable:!0}}}}]},{id:"size-settings",type:"group",label:"Size",controls:[{id:"aspectRatio",type:"select",label:"Aspect Ratio",options:[{label:"Original",value:"auto"},{label:"1:1",value:"1"},{label:"3:2",value:"3/2"},{label:"4:3",value:"4/3"},{label:"16:9",value:"16/9"},{label:"21:9",value:"21/9"},{label:"2:3",value:"2/3"},{label:"3:4",value:"3/4"},{label:"9:16",value:"9/16"},{label:"Custom",value:"custom"}],devices:{desktop:{default:"16/9"}}},{id:"customAspectRadio",type:"ratio",min:1,devices:{desktop:{default:{width:"1",height:"1"}}},hide:!0},{id:"imageScale",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:"fullWidth",label:"Full Width",type:"toggle",devices:{desktop:{default:!0}}},{id:"width",type:"input:unit",emptyOnClear:!0,placeholder:"Auto",min:0,units:["px","%"],hide:!0,devices:{desktop:{default:"100%"}}}]},{id:"typo",type:"typography-combo",default:{type:"paragraph-2"},ignoreReRender:!0,compoDefaultValue:{attrs:{color:"#FFFFFF"}},hiddenSetting:{textAlign:!0}},{id:"transform",label:"Text Transform",type:"select",options:[{value:"default",label:"None"},{value:"capitalize",label:"Capitalize"},{value:"uppercase",label:"Uppercase"},{value:"lowercase",label:"Lowercase"}],default:"default"},{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:"center"}}}]}];export{e as ImageComparisonSettings};

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

@@ -1 +1 @@
-let ImageComparison={altLeft:{id:"altLeft"},altRight:{id:"altRight"},titleLeft:{id:"titleLeft"},titleRight:{id:"titleRight"},rightImageLabel:{id:"rightImageLabel"},leftImageLabel:{id:"leftImageLabel"},imageLeft:{id:"imageLeft",fields:["src"]},imageRight:{id:"imageRight",fields:["src"]}};export{ImageComparison};
+let t={altLeft:{id:"altLeft"},altRight:{id:"altRight"},titleLeft:{id:"titleLeft"},titleRight:{id:"titleRight"},rightImageLabel:{id:"rightImageLabel"},leftImageLabel:{id:"leftImageLabel"},imageLeft:{id:"imageLeft",fields:["src"]},imageRight:{id:"imageRight",fields:["src"]}};export{t as ImageComparison};

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

@@ -1 +1 @@
-let SettingUIV2=[{label:"Layout",controls:[{setting:{id:"direction"},layout:"vertical",options:{fullWidth:!0}}]},{label:"Image",controls:[{label:"1st image",setting:{id:"imageLeft"},options:{updateFields:[{field:"preload",settingId:"preload"},{field:"altText",settingId:"altLeft"},{field:"imageTitle",settingId:"titleLeft"}]},controlChangeTrigger:{settings:[{action:{controlId:"preload",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"altLeft",valueFromField:"altText",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"titleLeft",valueFromField:"imageTitle",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"2nd image",setting:{id:"imageRight"},options:{updateFields:[{field:"preload",settingId:"preload"},{field:"altText",settingId:"altRight"},{field:"imageTitle",settingId:"titleRight"}]},controlChangeTrigger:{settings:[{action:{controlId:"preload",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"altRight",valueFromField:"altText",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"titleRight",valueFromField:"imageTitle",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"Scale",setting:{id:"imageScale"}}]},{label:"Slider",controls:[{label:"Behavior",setting:{id:"hoverToSlide"}},{label:"Default ratio",setting:{id:"defaultPercentage"}}]},{controls:[{label:"Badge",setting:{id:"enableLabel"},options:{labelVariant:"primary",toggleStyle:"switch"}},{label:"1st",conditionDisplay:"enableLabel === true",setting:{id:"leftImageLabel"}},{label:"2nd",conditionDisplay:"enableLabel === true",setting:{id:"rightImageLabel"}},{conditionDisplay:"enableLabel === true",label:"Text style",setting:{id:"typo"},options:{updateFields:[{field:"attrs.color",settingId:"labelTextColor"}]},controlChangeTrigger:{settings:[{action:{controlId:"labelTextColor",valueFromField:"attrs.color",groupType:"style",controlType:"style",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"Padding",conditionDisplay:"enableLabel === true",setting:{id:"labelPadding"}},{label:"Background",conditionDisplay:"enableLabel === true",setting:{id:"labelBackgroundColor"}},{label:"Border",conditionDisplay:"enableLabel === true",setting:{id:"labelBorder"}},{label:"Corner",conditionDisplay:"enableLabel === true",setting:{id:"labelRounded"}},{label:"Shadow",conditionDisplay:"enableLabel === true",setting:{id:"labelShadow"}},{label:"Position",setting:{id:"labelPositionHoz"},conditionDisplay:"enableLabel === true && direction === 'horizontal'"},{label:"Position",setting:{id:"labelPositionVer"},conditionDisplay:"enableLabel === true && direction === 'vertical'"}]},{label:"Size",controls:[{label:"Frame",setting:{id:"aspectRatio"}},{label:"Ratio",conditionDisplay:"aspectRatio === 'custom'",setting:{id:"customAspectRadio"}},{label:"Width",setting:{id:"width"}}]},{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:"Optimize LCP",controls:[{label:"Preload",setting:{id:"preload"}},{label:"Quality",conditionEnable:"((imageLeft.src || imageRight.src) && (imageLeft.src.includes('cdn.shopify.com') || imageRight.src.includes('cdn.shopify.com')))",conditionDisplay:"preload === false",setting:{id:"qualityType"},options:{fullWidth:!0,disableMessage:"This setting only works with images uploaded to Shopify"}},{layout:"horizontal",label:"Quality",conditionDisplay:'qualityType == "custom" && preload === false && ((imageLeft.src || imageRight.src) && (imageLeft.src.includes("cdn.shopify.com") || imageRight.src.includes("cdn.shopify.com"))) ',setting:{id:"qualityPercent"}}]},{label:"SEO",controls:[{label:"1st image",type:"combo",iconName:"polaris-text-title",fixedValue:"Edit",popoverLabel:"SEO",setting:{id:"enableSEOLeft"},controls:[{label:"Alt text",options:{labelAlign:"top"},setting:{id:"altLeft"}},{label:"Image title",options:{labelAlign:"top"},setting:{id:"titleLeft"}}]},{label:"2nd image",type:"combo",iconName:"polaris-text-title",fixedValue:"Edit",setting:{id:"enableSEORight"},popoverLabel:"SEO",controls:[{label:"Alt text",options:{labelAlign:"top"},setting:{id:"altRight"}},{label:"Image title",options:{labelAlign:"top"},setting:{id:"titleRight"}}]}]},{controls:[{label:"Align",conditionEnable:'!(width === "default" || (parseInt(width) >= 100 && width?.includes("%")))',setting:{id:"align"},options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Align is not supported when width is 100%"}}]}];export{SettingUIV2};
+let e=[{label:"Layout",controls:[{setting:{id:"direction"},layout:"vertical",options:{fullWidth:!0}}]},{label:"Image",controls:[{label:"1st image",setting:{id:"imageLeft"},options:{updateFields:[{field:"preload",settingId:"preload"},{field:"altText",settingId:"altLeft"},{field:"imageTitle",settingId:"titleLeft"}]},controlChangeTrigger:{settings:[{action:{controlId:"preload",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"altLeft",valueFromField:"altText",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"titleLeft",valueFromField:"imageTitle",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"2nd image",setting:{id:"imageRight"},options:{updateFields:[{field:"preload",settingId:"preload"},{field:"altText",settingId:"altRight"},{field:"imageTitle",settingId:"titleRight"}]},controlChangeTrigger:{settings:[{action:{controlId:"preload",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"altRight",valueFromField:"altText",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"titleRight",valueFromField:"imageTitle",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"Scale",setting:{id:"imageScale"}}]},{label:"Slider",controls:[{label:"Behavior",setting:{id:"hoverToSlide"}},{label:"Default ratio",setting:{id:"defaultPercentage"}}]},{controls:[{label:"Badge",setting:{id:"enableLabel"},options:{labelVariant:"primary",toggleStyle:"switch"}},{label:"1st",conditionDisplay:"enableLabel === true",setting:{id:"leftImageLabel"}},{label:"2nd",conditionDisplay:"enableLabel === true",setting:{id:"rightImageLabel"}},{conditionDisplay:"enableLabel === true",label:"Text style",setting:{id:"typo"},options:{updateFields:[{field:"attrs.color",settingId:"labelTextColor"}]},controlChangeTrigger:{settings:[{action:{controlId:"labelTextColor",valueFromField:"attrs.color",groupType:"style",controlType:"style",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"Padding",conditionDisplay:"enableLabel === true",setting:{id:"labelPadding"}},{label:"Background",conditionDisplay:"enableLabel === true",setting:{id:"labelBackgroundColor"}},{label:"Border",conditionDisplay:"enableLabel === true",setting:{id:"labelBorder"}},{label:"Corner",conditionDisplay:"enableLabel === true",setting:{id:"labelRounded"}},{label:"Shadow",conditionDisplay:"enableLabel === true",setting:{id:"labelShadow"}},{label:"Position",setting:{id:"labelPositionHoz"},conditionDisplay:"enableLabel === true && direction === 'horizontal'"},{label:"Position",setting:{id:"labelPositionVer"},conditionDisplay:"enableLabel === true && direction === 'vertical'"}]},{label:"Size",controls:[{label:"Frame",setting:{id:"aspectRatio"}},{label:"Ratio",conditionDisplay:"aspectRatio === 'custom'",setting:{id:"customAspectRadio"}},{label:"Width",setting:{id:"width"}}]},{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:"Optimize LCP",controls:[{label:"Preload",setting:{id:"preload"}},{label:"Quality",conditionEnable:"((imageLeft.src || imageRight.src) && (imageLeft.src.includes('cdn.shopify.com') || imageRight.src.includes('cdn.shopify.com')))",conditionDisplay:"preload === false",setting:{id:"qualityType"},options:{fullWidth:!0,disableMessage:"This setting only works with images uploaded to Shopify"}},{layout:"horizontal",label:"Quality",conditionDisplay:'qualityType == "custom" && preload === false && ((imageLeft.src || imageRight.src) && (imageLeft.src.includes("cdn.shopify.com") || imageRight.src.includes("cdn.shopify.com"))) ',setting:{id:"qualityPercent"}}]},{label:"SEO",controls:[{label:"1st image",type:"combo",iconName:"polaris-text-title",fixedValue:"Edit",popoverLabel:"SEO",setting:{id:"enableSEOLeft"},controls:[{label:"Alt text",options:{labelAlign:"top"},setting:{id:"altLeft"}},{label:"Image title",options:{labelAlign:"top"},setting:{id:"titleLeft"}}]},{label:"2nd image",type:"combo",iconName:"polaris-text-title",fixedValue:"Edit",setting:{id:"enableSEORight"},popoverLabel:"SEO",controls:[{label:"Alt text",options:{labelAlign:"top"},setting:{id:"altRight"}},{label:"Image title",options:{labelAlign:"top"},setting:{id:"titleRight"}}]}]},{controls:[{label:"Align",conditionEnable:'!(width === "default" || (parseInt(width) >= 100 && width?.includes("%")))',setting:{id:"align"},options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Align is not supported when width is 100%"}}]}];export{e as SettingUIV2};

package/dist/esm/image-detection/components/ImageDetection.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as p,useRef as r,useEffect as i}from"react";import l from"next/image";function getRandomArbitrary(e,t){return Math.random()*(t-e)+e}let ImageDetection=({setting:g,builderProps:a})=>{let[n,d]=p(!1),[o,s]=p(0),c=r(null);i(()=>(g?.loading?(d(!1),C()):d(!0),()=>{c.current&&clearInterval(c.current)}),[g?.loading]);let C=()=>{s(0),c.current=setInterval(()=>{s(e=>{let t=getRandomArbitrary(0,6);return e>=580?e:e+t})},100)};return e("div",{"data-toolbar-hide":"true",className:"gps-base-font-family gps-image-detection-section gp-relative gp-mb-[6px] gp-w-full gp-border gp-border-[#F4F4F4]",children:[e("div",{className:"gps-generating-actions gp-absolute gp-right-0 gp-top-0 gp-z-4 gp-hidden gp-h-[32px] gp-items-center gp-border gp-border-[#F4F4F4] gp-bg-white gp-px-[4px]",children:[e("svg",{className:"gp-ml-[16px]",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[t("path",{d:"M12.1455 2.78916C12.0859 2.60446 11.8246 2.60446 11.7649 2.78916L11.6155 3.25182C11.5178 3.554 11.2825 3.79186 10.9814 3.89269L10.5216 4.04667C10.3396 4.10761 10.3396 4.36503 10.5216 4.42597L10.9814 4.57995C11.2825 4.68078 11.5178 4.91864 11.6155 5.22082L11.7649 5.68348C11.8246 5.86818 12.0859 5.86818 12.1455 5.68348L12.295 5.22082C12.3926 4.91864 12.6279 4.68078 12.929 4.57995L13.3889 4.42597C13.5708 4.36503 13.5708 4.10761 13.3889 4.04667L12.929 3.89269C12.6279 3.79186 12.3926 3.554 12.295 3.25182L12.1455 2.78916Z",fill:`url(#paint0_linear_4588_15357_${a?.uid})`}),t("path",{d:"M8.14069 3.48376C8.0512 3.20671 7.65922 3.20671 7.56973 3.48376L6.95968 5.37244C6.66685 6.27898 5.96086 6.99256 5.0575 7.29506L3.20474 7.91548C2.93175 8.0069 2.93175 8.39302 3.20474 8.48443L5.0575 9.10485C5.96086 9.40735 6.66685 10.1209 6.95968 11.0275L7.56973 12.9162C7.65922 13.1932 8.0512 13.1932 8.14069 12.9162L8.75074 11.0275C9.04357 10.1209 9.74956 9.40735 10.6529 9.10485L12.5057 8.48443C12.7787 8.39302 12.7787 8.0069 12.5057 7.91548L10.6529 7.29506C9.74956 6.99256 9.04357 6.27898 8.75074 5.37243L8.14069 3.48376Z",fill:`url(#paint1_linear_4588_15357_${a?.uid})`}),e("defs",{children:[e("linearGradient",{id:`paint0_linear_4588_15357_${a?.uid}`,x1:"13.5254",y1:"10.6471",x2:"2.99977",y2:"10.6351",gradientUnits:"userSpaceOnUse",children:[t("stop",{stopColor:"#874CFD"}),t("stop",{offset:"1",stopColor:"#3C38E1"})]}),e("linearGradient",{id:`paint1_linear_4588_15357_${a?.uid}`,x1:"13.5254",y1:"10.6471",x2:"2.99977",y2:"10.6351",gradientUnits:"userSpaceOnUse",children:[t("stop",{stopColor:"#874CFD"}),t("stop",{offset:"1",stopColor:"#3C38E1"})]})]})]}),t("span",{className:"gps-generating-section-text gp-ml-[4px] gp-mr-[16px] gp-text-[12px] gp-font-medium",children:"Generating section"}),t("div",{className:"gp-mx-[4px] gp-h-[28px] gp-w-[1px] gp-bg-[#5B5B5B] gp-opacity-10"}),t("div",{"data-url":g?.imagePreviewUrl||"","data-uid":a?.uid,className:"gp-image-detection-generating-delete gp-relative gp-flex gp-h-[24px] gp-w-[24px] gp-cursor-pointer gp-items-center gp-justify-center gp-rounded-[3px] gp-text-[#212121] hover:gp-bg-[#F44336] hover:gp-text-white",children:e("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[t("path",{d:"M6.5 6C6.77614 6 7 6.22386 7 6.5V11.5C7 11.7761 6.77614 12 6.5 12C6.22386 12 6 11.7761 6 11.5V6.5C6 6.22386 6.22386 6 6.5 6Z",fill:"currentColor"}),t("path",{d:"M9.5 6C9.77614 6 10 6.22386 10 6.5V11.5C10 11.7761 9.77614 12 9.5 12C9.22386 12 9 11.7761 9 11.5V6.5C9 6.22386 9.22386 6 9.5 6Z",fill:"currentColor"}),t("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11 2.5V3H14C14.2761 3 14.5 3.22386 14.5 3.5C14.5 3.77614 14.2761 4 14 4H13V12.5C13 13.8807 11.8807 15 10.5 15H5.5C4.11929 15 3 13.8807 3 12.5V4H2C1.72386 4 1.5 3.77614 1.5 3.5C1.5 3.22386 1.72386 3 2 3H5V2.5C5 1.67157 5.67157 1 6.5 1H9.5C10.3284 1 11 1.67157 11 2.5ZM4 4V12.5C4 13.3284 4.67157 14 5.5 14H10.5C11.3284 14 12 13.3284 12 12.5V4H4ZM6 3V2.5C6 2.22386 6.22386 2 6.5 2H9.5C9.77614 2 10 2.22386 10 2.5V3H6Z",fill:"currentColor"})]})})]}),!!g?.imagePreviewUrl&&t(l,{className:"gp-h-auto gp-w-full gp-opacity-50",src:g?.imagePreviewUrl||"",alt:"",width:100,height:100}),t("div",{className:`gp-absolute gp-left-0 gp-top-0 gp-z-2 gp-flex gp-h-full gp-w-full   ${n?"gp-hidden":""}`,children:e("div",{className:"gp-relative gp-h-[2px] gp-w-full gp-overflow-hidden gp-rounded-md",children:[t("div",{className:"gp-absolute gp-h-full gp-w-full gp-rounded-md gp-bg-[#F4F4F4]"}),t("div",{className:"gps-image-to-layout-progress-bar gp-absolute gp-h-full gp-rounded-md gp-transition-all",style:{width:`${o/600*100}%`}})]})}),e("div",{className:`gp-absolute gp-left-[8px] gp-top-[8px] gp-z-[99] gp-flex gp-w-[calc(100%_-_16px)] gp-items-center gp-justify-between gp-rounded-[3px] gp-bg-[#FEE4E3] gp-pl-[4px] gp-pr-[16px] gp-h-[48px] ${n?"":"gp-hidden"}`,children:[e("div",{className:"gp-flex gp-items-center ",children:[t("div",{className:"gp-flex gp-h-[24px] gp-w-[24px] gp-items-center gp-justify-center",children:t("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8ZM8 10.5C7.58579 10.5 7.25 10.8358 7.25 11.25C7.25 11.6642 7.58579 12 8 12C8.41421 12 8.75 11.6642 8.75 11.25C8.75 10.8358 8.41421 10.5 8 10.5ZM8.5 4C8.5 3.72386 8.27614 3.5 8 3.5C7.72386 3.5 7.5 3.72386 7.5 4V9C7.5 9.27614 7.72386 9.5 8 9.5C8.27614 9.5 8.5 9.27614 8.5 9V4Z",fill:"#C3362B"})})}),t("span",{className:"gps-base-font-family gp-ml-[4px] gp-text-sm gp-font-medium gp-text-[#212121]",children:g?.error||"Sorry, we have trouble generate layout from this section. Try again or delete it to publish."})]}),e("div",{className:"gp-flex gp-items-center",children:[!g?.error&&t("div",{"data-url":g?.imagePreviewUrl||"","data-uid":a?.uid,className:"gp-image-detection-retry gp-cursor-pointer gp-text-sm gp-font-medium gp-text-[#3C67FF]",children:"Try again"}),t("div",{"data-url":g?.imagePreviewUrl||"","data-uid":a?.uid,className:"gp-image-detection-delete gp-relative gp-ml-[16px] gp-flex gp-h-[32px] gp-w-[32px] gp-cursor-pointer gp-items-center gp-justify-center gp-rounded-[3px] gp-text-[#F44336] hover:gp-bg-red-400 hover:gp-text-white",children:e("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[t("path",{d:"M6.5 6C6.77614 6 7 6.22386 7 6.5V11.5C7 11.7761 6.77614 12 6.5 12C6.22386 12 6 11.7761 6 11.5V6.5C6 6.22386 6.22386 6 6.5 6Z",fill:"currentColor"}),t("path",{d:"M9.5 6C9.77614 6 10 6.22386 10 6.5V11.5C10 11.7761 9.77614 12 9.5 12C9.22386 12 9 11.7761 9 11.5V6.5C9 6.22386 9.22386 6 9.5 6Z",fill:"currentColor"}),t("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11 2.5V3H14C14.2761 3 14.5 3.22386 14.5 3.5C14.5 3.77614 14.2761 4 14 4H13V12.5C13 13.8807 11.8807 15 10.5 15H5.5C4.11929 15 3 13.8807 3 12.5V4H2C1.72386 4 1.5 3.77614 1.5 3.5C1.5 3.22386 1.72386 3 2 3H5V2.5C5 1.67157 5.67157 1 6.5 1H9.5C10.3284 1 11 1.67157 11 2.5ZM4 4V12.5C4 13.3284 4.67157 14 5.5 14H10.5C11.3284 14 12 13.3284 12 12.5V4H4ZM6 3V2.5C6 2.22386 6.22386 2 6.5 2H9.5C9.77614 2 10 2.22386 10 2.5V3H6Z",fill:"currentColor"})]})})]})]})]})};export{ImageDetection as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as p,useRef as l,useEffect as i}from"react";import r from"next/image";let g=({setting:g,builderProps:a})=>{let[n,d]=p(!1),[o,s]=p(0),c=l(null);i(()=>(g?.loading?(d(!1),C()):d(!0),()=>{c.current&&clearInterval(c.current)}),[g?.loading]);let C=()=>{s(0),c.current=setInterval(()=>{s(e=>{let t=function(e,t){return Math.random()*(6-e)+e}(0,0);return e>=580?e:e+t})},100)};return e("div",{"data-toolbar-hide":"true",className:"gps-base-font-family gps-image-detection-section gp-relative gp-mb-[6px] gp-w-full gp-border gp-border-[#F4F4F4]",children:[e("div",{className:"gps-generating-actions gp-absolute gp-right-0 gp-top-0 gp-z-4 gp-hidden gp-h-[32px] gp-items-center gp-border gp-border-[#F4F4F4] gp-bg-white gp-px-[4px]",children:[e("svg",{className:"gp-ml-[16px]",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[t("path",{d:"M12.1455 2.78916C12.0859 2.60446 11.8246 2.60446 11.7649 2.78916L11.6155 3.25182C11.5178 3.554 11.2825 3.79186 10.9814 3.89269L10.5216 4.04667C10.3396 4.10761 10.3396 4.36503 10.5216 4.42597L10.9814 4.57995C11.2825 4.68078 11.5178 4.91864 11.6155 5.22082L11.7649 5.68348C11.8246 5.86818 12.0859 5.86818 12.1455 5.68348L12.295 5.22082C12.3926 4.91864 12.6279 4.68078 12.929 4.57995L13.3889 4.42597C13.5708 4.36503 13.5708 4.10761 13.3889 4.04667L12.929 3.89269C12.6279 3.79186 12.3926 3.554 12.295 3.25182L12.1455 2.78916Z",fill:`url(#paint0_linear_4588_15357_${a?.uid})`}),t("path",{d:"M8.14069 3.48376C8.0512 3.20671 7.65922 3.20671 7.56973 3.48376L6.95968 5.37244C6.66685 6.27898 5.96086 6.99256 5.0575 7.29506L3.20474 7.91548C2.93175 8.0069 2.93175 8.39302 3.20474 8.48443L5.0575 9.10485C5.96086 9.40735 6.66685 10.1209 6.95968 11.0275L7.56973 12.9162C7.65922 13.1932 8.0512 13.1932 8.14069 12.9162L8.75074 11.0275C9.04357 10.1209 9.74956 9.40735 10.6529 9.10485L12.5057 8.48443C12.7787 8.39302 12.7787 8.0069 12.5057 7.91548L10.6529 7.29506C9.74956 6.99256 9.04357 6.27898 8.75074 5.37243L8.14069 3.48376Z",fill:`url(#paint1_linear_4588_15357_${a?.uid})`}),e("defs",{children:[e("linearGradient",{id:`paint0_linear_4588_15357_${a?.uid}`,x1:"13.5254",y1:"10.6471",x2:"2.99977",y2:"10.6351",gradientUnits:"userSpaceOnUse",children:[t("stop",{stopColor:"#874CFD"}),t("stop",{offset:"1",stopColor:"#3C38E1"})]}),e("linearGradient",{id:`paint1_linear_4588_15357_${a?.uid}`,x1:"13.5254",y1:"10.6471",x2:"2.99977",y2:"10.6351",gradientUnits:"userSpaceOnUse",children:[t("stop",{stopColor:"#874CFD"}),t("stop",{offset:"1",stopColor:"#3C38E1"})]})]})]}),t("span",{className:"gps-generating-section-text gp-ml-[4px] gp-mr-[16px] gp-text-[12px] gp-font-medium",children:"Generating section"}),t("div",{className:"gp-mx-[4px] gp-h-[28px] gp-w-[1px] gp-bg-[#5B5B5B] gp-opacity-10"}),t("div",{"data-url":g?.imagePreviewUrl||"","data-uid":a?.uid,className:"gp-image-detection-generating-delete gp-relative gp-flex gp-h-[24px] gp-w-[24px] gp-cursor-pointer gp-items-center gp-justify-center gp-rounded-[3px] gp-text-[#212121] hover:gp-bg-[#F44336] hover:gp-text-white",children:e("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[t("path",{d:"M6.5 6C6.77614 6 7 6.22386 7 6.5V11.5C7 11.7761 6.77614 12 6.5 12C6.22386 12 6 11.7761 6 11.5V6.5C6 6.22386 6.22386 6 6.5 6Z",fill:"currentColor"}),t("path",{d:"M9.5 6C9.77614 6 10 6.22386 10 6.5V11.5C10 11.7761 9.77614 12 9.5 12C9.22386 12 9 11.7761 9 11.5V6.5C9 6.22386 9.22386 6 9.5 6Z",fill:"currentColor"}),t("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11 2.5V3H14C14.2761 3 14.5 3.22386 14.5 3.5C14.5 3.77614 14.2761 4 14 4H13V12.5C13 13.8807 11.8807 15 10.5 15H5.5C4.11929 15 3 13.8807 3 12.5V4H2C1.72386 4 1.5 3.77614 1.5 3.5C1.5 3.22386 1.72386 3 2 3H5V2.5C5 1.67157 5.67157 1 6.5 1H9.5C10.3284 1 11 1.67157 11 2.5ZM4 4V12.5C4 13.3284 4.67157 14 5.5 14H10.5C11.3284 14 12 13.3284 12 12.5V4H4ZM6 3V2.5C6 2.22386 6.22386 2 6.5 2H9.5C9.77614 2 10 2.22386 10 2.5V3H6Z",fill:"currentColor"})]})})]}),!!g?.imagePreviewUrl&&t(r,{className:"gp-h-auto gp-w-full gp-opacity-50",src:g?.imagePreviewUrl||"",alt:"",width:100,height:100}),t("div",{className:`gp-absolute gp-left-0 gp-top-0 gp-z-2 gp-flex gp-h-full gp-w-full   ${n?"gp-hidden":""}`,children:e("div",{className:"gp-relative gp-h-[2px] gp-w-full gp-overflow-hidden gp-rounded-md",children:[t("div",{className:"gp-absolute gp-h-full gp-w-full gp-rounded-md gp-bg-[#F4F4F4]"}),t("div",{className:"gps-image-to-layout-progress-bar gp-absolute gp-h-full gp-rounded-md gp-transition-all",style:{width:`${o/600*100}%`}})]})}),e("div",{className:`gp-absolute gp-left-[8px] gp-top-[8px] gp-z-[99] gp-flex gp-w-[calc(100%_-_16px)] gp-items-center gp-justify-between gp-rounded-[3px] gp-bg-[#FEE4E3] gp-pl-[4px] gp-pr-[16px] gp-h-[48px] ${n?"":"gp-hidden"}`,children:[e("div",{className:"gp-flex gp-items-center ",children:[t("div",{className:"gp-flex gp-h-[24px] gp-w-[24px] gp-items-center gp-justify-center",children:t("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8ZM8 10.5C7.58579 10.5 7.25 10.8358 7.25 11.25C7.25 11.6642 7.58579 12 8 12C8.41421 12 8.75 11.6642 8.75 11.25C8.75 10.8358 8.41421 10.5 8 10.5ZM8.5 4C8.5 3.72386 8.27614 3.5 8 3.5C7.72386 3.5 7.5 3.72386 7.5 4V9C7.5 9.27614 7.72386 9.5 8 9.5C8.27614 9.5 8.5 9.27614 8.5 9V4Z",fill:"#C3362B"})})}),t("span",{className:"gps-base-font-family gp-ml-[4px] gp-text-sm gp-font-medium gp-text-[#212121]",children:g?.error||"Sorry, we have trouble generate layout from this section. Try again or delete it to publish."})]}),e("div",{className:"gp-flex gp-items-center",children:[!g?.error&&t("div",{"data-url":g?.imagePreviewUrl||"","data-uid":a?.uid,className:"gp-image-detection-retry gp-cursor-pointer gp-text-sm gp-font-medium gp-text-[#3C67FF]",children:"Try again"}),t("div",{"data-url":g?.imagePreviewUrl||"","data-uid":a?.uid,className:"gp-image-detection-delete gp-relative gp-ml-[16px] gp-flex gp-h-[32px] gp-w-[32px] gp-cursor-pointer gp-items-center gp-justify-center gp-rounded-[3px] gp-text-[#F44336] hover:gp-bg-red-400 hover:gp-text-white",children:e("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[t("path",{d:"M6.5 6C6.77614 6 7 6.22386 7 6.5V11.5C7 11.7761 6.77614 12 6.5 12C6.22386 12 6 11.7761 6 11.5V6.5C6 6.22386 6.22386 6 6.5 6Z",fill:"currentColor"}),t("path",{d:"M9.5 6C9.77614 6 10 6.22386 10 6.5V11.5C10 11.7761 9.77614 12 9.5 12C9.22386 12 9 11.7761 9 11.5V6.5C9 6.22386 9.22386 6 9.5 6Z",fill:"currentColor"}),t("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11 2.5V3H14C14.2761 3 14.5 3.22386 14.5 3.5C14.5 3.77614 14.2761 4 14 4H13V12.5C13 13.8807 11.8807 15 10.5 15H5.5C4.11929 15 3 13.8807 3 12.5V4H2C1.72386 4 1.5 3.77614 1.5 3.5C1.5 3.22386 1.72386 3 2 3H5V2.5C5 1.67157 5.67157 1 6.5 1H9.5C10.3284 1 11 1.67157 11 2.5ZM4 4V12.5C4 13.3284 4.67157 14 5.5 14H10.5C11.3284 14 12 13.3284 12 12.5V4H4ZM6 3V2.5C6 2.22386 6.22386 2 6.5 2H9.5C9.77614 2 10 2.22386 10 2.5V3H6Z",fill:"currentColor"})]})})]})]})]})};export{g as default};

package/dist/esm/image-detection/index.js

@@ -1 +1 @@
-import"react/jsx-runtime";import"react";import"next/image";import t from"./settings/ImageDetection.js";let imageDetectionSetting={ImageDetection:t};export{imageDetectionSetting};
+import"react/jsx-runtime";import"react";import"next/image";import t from"./settings/ImageDetection.js";let e={ImageDetection:t};export{e as imageDetectionSetting};

package/dist/esm/image-detection/next.js

@@ -1 +1 @@
-import e from"next/dynamic";import t from"../common/components/Loading.js";import"react/jsx-runtime";import"react";import"@gem-sdk/core";let ImageDetection=e(()=>import("./components/ImageDetection.js"),{loading:t});var imageDetection={ImageDetection};export{imageDetection as default};
+import o from"next/dynamic";import t from"../common/components/Loading.js";import"react/jsx-runtime";import"react";import"@gem-sdk/core";let e=o(()=>import("./components/ImageDetection.js"),{loading:t});var m={ImageDetection:e};export{m as default};

package/dist/esm/image-detection/settings/ImageDetection.js

@@ -1,3 +1,3 @@
-import{ImageDetectionSettings as e}from"./configs/settings.js";let config={tag:"ImageDetection",label:"ImageDetection",icon:`
+import{ImageDetectionSettings as e}from"./configs/settings.js";let t={tag:"ImageDetection",label:"ImageDetection",icon:`
 
-  `,settings:e,presets:[{id:"image-detection",name:"ImageDetection",icon:{desktop:'<span style="font-size: 20px; line-height: 1.5; font-weight: 500;">ID</span>'},components:[{tag:"ImageDetection"}]}],editorConfigs:{component:{noSetting:!0,noDelete:!0,noDuplicate:!0,noDragDrop:!0},placeholder:{notAppendBeforeAfter:!0},toolbar:{hide:!0,parent:!0},sideBar:{hide:!0,tab:{setting:{hide:!0}}}}};export{config as default};
+  `,settings:e,presets:[{id:"image-detection",name:"ImageDetection",icon:{desktop:'<span style="font-size: 20px; line-height: 1.5; font-weight: 500;">ID</span>'},components:[{tag:"ImageDetection"}]}],editorConfigs:{component:{noSetting:!0,noDelete:!0,noDuplicate:!0,noDragDrop:!0},placeholder:{notAppendBeforeAfter:!0},toolbar:{hide:!0,parent:!0},sideBar:{hide:!0,tab:{setting:{hide:!0}}}}};export{t as default};