@gem-sdk/components 15.0.4 → 16.0.0

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

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

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

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

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

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

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

@@ -1,26 +1,26 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),helpers$1=require("../../helpers.js"),NextImage_liquid=require("../../image/components/NextImage.liquid.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),attrs=require("../common/attrs.js"),helpers=require("../common/helpers.js"),Label_liquid=require("./Label.liquid.js"),SlideHandle_liquid=require("./SlideHandle.liquid.js");const CompareImage=e=>{let{leftImage:t,rightImage:s,advanced:a,translate:l,builderData:r,pageContext:i,preload:y=!1,onSliderPositionChange:d}=e,{hover:m,styles:g,handle:c,handleSize:o,leftImageAlt:n,leftImageTitle:p,leftImageCss:S,leftImageLabel:u,rightImageAlt:h,rightImageTitle:L,rightImageCss:b,rightImageLabel:q,sliderLineWidth:$,sliderLineColor:f,sliderPositionPercentage:I,vertical:A,componentUid:C,tempImage:j,aspectRatio:_,defaultRatio:v,isHorizontal:w,hasLeftLabel:N,hasRightLabel:O,qualityType:x,qualityPercent:D,getLeftImageSrc:H,getRightImageSrc:P}=helpers.getData(e),W=H({isLiquid:!0}),z=P({isLiquid:!0}),E=system.createStyle({...styles.getOuterWrapperStyles(g)}),k=system.createStyle({...styles.getWrapperWidth({width:g?.width,leftImageWidth:t?.width,rightImageWidth:s?.width})}),F=system.createStyle({...styles.getContainerStyles({aspectRatio:_,builderData:r})}),G=system.createStyle({...styles.getLazyPlaceholderStyle(_)}),M=system.createStyle({...styles.getImageStyles({type:"right",props:e})}),R=system.createStyle({...styles.getImageStyles({type:"left",props:e})}),J=system.createStyle({...styles.getLabelStyles({styles:g,type:"left",isHorizontal:w})}),T=system.createStyle({...styles.getLabelStyles({styles:g,type:"right",isHorizontal:w})}),U=system.createStyle({...styles.getArrowStyles({type:"left"})}),V=system.createStyle({...styles.getArrowStyles({type:"right"})}),B=system.createStyle({...styles.getLineStyles({isHorizontal:w,sliderLineColor:f,sliderLineWidth:$})}),K=system.createStyle({...styles.getHandleStyles({handleSize:o,isHorizontal:w,sliderLineColor:f,sliderLineWidth:$})}),Q=system.createStyle({...styles.getHandleCustomStyles()}),X=system.createStyle({...styles.getSliderStyles({hover:m,handleSize:o,isHorizontal:w})}),Y=system.createClass({...classes.getOuterWrapperClasses(a?.cssClass)}),Z=system.createClass({...classes.getLabelClasses(g)}),ee=system.createClass({...classes.getLabelContainerClasses()}),et=attrs.getLabelAttrs({componentUid:C,positionId:"left",label:u??""}),es=attrs.getLabelAttrs({componentUid:C,positionId:"right",label:q??""}),ea=system.createAttr({...attrs.getImageLiquidAttrs({priority:y,src:z,title:L,isDisableObjectFit:!0,isDisableAspectStyle:!0,id:`right-image-${C}`})}),el=system.createAttr({...attrs.getImageLiquidAttrs({priority:y,src:W,title:p,isDisableObjectFit:!0,isDisableAspectStyle:!0,id:`left-image-${C}`})}),er=attrs.getLabelLiquidAttrs({translate:l,pageContext:i,translateLabel:"leftImageLabel"}),ei=attrs.getLabelLiquidAttrs({translate:l,pageContext:i,translateLabel:"rightImageLabel"}),ey=system.createAttr({...attrs.getImagePlaceholderAttrs({width:j?.width,height:j?.height})}),ed=system.createStateOrContext({hover:m,handle:c,vertical:A,leftImage:t,rightImage:s,handleSize:o,aspectRatio:_,defaultRatio:v,componentUid:C,leftImageCss:S,rightImageCss:b,sliderLineColor:f,sliderLineWidth:$,sliderPositionPercentage:I,onSliderPositionChange:d}),em=()=>core.template`
-      <img alt="" ${ey} style="${G}" />
-    `,eg=()=>NextImage_liquid.default({...ea,alt:h,style:M,setting:{qualityType:x,qualityPercent:D},enableLazyLoadImage:!y,isNotLazyload:y,customAttrs:{"data-testid":"right-image"}}),ec=()=>NextImage_liquid.default({...el,alt:n,style:R,setting:{qualityType:x,qualityPercent:D},enableLazyLoadImage:!y,isNotLazyload:y,customAttrs:{"data-testid":"left-image"}}),eo=()=>SlideHandle_liquid.default({componentUid:C,customHandle:c,lineStyles:B,sliderStyles:X,handleStyles:K,customHandleStyles:Q,leftArrowStyles:U,rightArrowStyles:V}),en=()=>Label_liquid.default({...et,...er,styles:g,childrenClass:Z,childrenStyle:J,containerClass:ee,containerStyle:{}}),ep=()=>Label_liquid.default({...es,...ei,styles:g,childrenClass:Z,childrenStyle:T,containerClass:ee,containerStyle:{}}),eS=()=>`${system.If(core.isLocalEnv,`<script ${helpers$1.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-image-comparison-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${helpers$1.getSettingPreloadData('class="gps-link" delay',"src")}="${core.baseAssetURL}/assets-v2/gp-image-comparison-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}`;return core.template`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),helpers$1=require("../../helpers.js"),NextImage_liquid=require("../../image/components/NextImage.liquid.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),attrs=require("../common/attrs.js"),helpers=require("../common/helpers.js"),Label_liquid=require("./Label.liquid.js"),SlideHandle_liquid=require("./SlideHandle.liquid.js");const CompareImage=e=>{let{leftImage:t,rightImage:s,advanced:a,builderData:l,pageContext:r,preload:i=!1,onSliderPositionChange:y}=e,{hover:d,styles:m,handle:g,handleSize:c,leftImageAlt:o,leftImageTitle:n,leftImageCss:p,leftImageLabel:S,rightImageAlt:u,rightImageTitle:h,rightImageCss:L,rightImageLabel:b,sliderLineWidth:q,sliderLineColor:$,sliderPositionPercentage:f,vertical:I,componentUid:A,tempImage:C,aspectRatio:j,defaultRatio:_,isHorizontal:v,hasLeftLabel:w,hasRightLabel:N,qualityType:O,qualityPercent:x,getLeftImageSrc:D,getRightImageSrc:H}=helpers.getData(e),P=D({isLiquid:!0}),W=H({isLiquid:!0}),z=system.createStyle({...styles.getOuterWrapperStyles(m)}),E=system.createStyle({...styles.getWrapperWidth({width:m?.width,leftImageWidth:t?.width,rightImageWidth:s?.width})}),k=system.createStyle({...styles.getContainerStyles({aspectRatio:j,builderData:l})}),F=system.createStyle({...styles.getLazyPlaceholderStyle(j)}),G=system.createStyle({...styles.getImageStyles({type:"right",props:e})}),M=system.createStyle({...styles.getImageStyles({type:"left",props:e})}),R=system.createStyle({...styles.getLabelStyles({styles:m,type:"left",isHorizontal:v})}),J=system.createStyle({...styles.getLabelStyles({styles:m,type:"right",isHorizontal:v})}),T=system.createStyle({...styles.getArrowStyles({type:"left"})}),U=system.createStyle({...styles.getArrowStyles({type:"right"})}),V=system.createStyle({...styles.getLineStyles({isHorizontal:v,sliderLineColor:$,sliderLineWidth:q})}),B=system.createStyle({...styles.getHandleStyles({handleSize:c,isHorizontal:v,sliderLineColor:$,sliderLineWidth:q})}),K=system.createStyle({...styles.getHandleCustomStyles()}),Q=system.createStyle({...styles.getSliderStyles({hover:d,handleSize:c,isHorizontal:v})}),X=system.createClass({...classes.getOuterWrapperClasses(a?.cssClass)}),Y=system.createClass({...classes.getLabelClasses(m)}),Z=system.createClass({...classes.getLabelContainerClasses()}),ee=attrs.getLabelAttrs({componentUid:A,positionId:"left",label:S??""}),et=attrs.getLabelAttrs({componentUid:A,positionId:"right",label:b??""}),es=system.createAttr({...attrs.getImageLiquidAttrs({priority:i,src:W,title:h,isDisableObjectFit:!0,isDisableAspectStyle:!0,id:`right-image-${A}`})}),ea=system.createAttr({...attrs.getImageLiquidAttrs({priority:i,src:P,title:n,isDisableObjectFit:!0,isDisableAspectStyle:!0,id:`left-image-${A}`})}),el=attrs.getLabelLiquidAttrs({pageContext:r,translateLabel:"leftImageLabel"}),er=attrs.getLabelLiquidAttrs({pageContext:r,translateLabel:"rightImageLabel"}),ei=system.createAttr({...attrs.getImagePlaceholderAttrs({width:C?.width,height:C?.height})}),ey=system.createStateOrContext({hover:d,handle:g,vertical:I,leftImage:t,rightImage:s,handleSize:c,aspectRatio:j,defaultRatio:_,componentUid:A,leftImageCss:p,rightImageCss:L,sliderLineColor:$,sliderLineWidth:q,sliderPositionPercentage:f,onSliderPositionChange:y}),ed=()=>core.template`
+      <img alt="" ${ei} style="${F}" />
+    `,em=()=>NextImage_liquid.default({...es,alt:u,style:G,setting:{qualityType:O,qualityPercent:x},enableLazyLoadImage:!i,isNotLazyload:i,customAttrs:{"data-testid":"right-image"}}),eg=()=>NextImage_liquid.default({...ea,alt:o,style:M,setting:{qualityType:O,qualityPercent:x},enableLazyLoadImage:!i,isNotLazyload:i,customAttrs:{"data-testid":"left-image"}}),ec=()=>SlideHandle_liquid.default({componentUid:A,customHandle:g,lineStyles:V,sliderStyles:Q,handleStyles:B,customHandleStyles:K,leftArrowStyles:T,rightArrowStyles:U}),eo=()=>Label_liquid.default({...ee,...el,styles:m,childrenClass:Y,childrenStyle:R,containerClass:Z,containerStyle:{}}),en=()=>Label_liquid.default({...et,...er,styles:m,childrenClass:Y,childrenStyle:J,containerClass:Z,containerStyle:{}}),ep=()=>`${system.If(core.isLocalEnv,`<script ${helpers$1.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-image-comparison-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${helpers$1.getSettingPreloadData('class="gps-link" delay',"src")}="${core.baseAssetURL}/assets-v2/gp-image-comparison-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}`;return core.template`
     <gp-image-comparison
-      data-id="${C}"
-      style="${E}"
-      class="${Y}"
-      gp-data='${JSON.stringify(ed)}'
+      data-id="${A}"
+      style="${z}"
+      class="${X}"
+      gp-data='${JSON.stringify(ey)}'
     >
-      <div id="img-comparison-wrapper-${C}" style="${k}">
+      <div id="img-comparison-wrapper-${A}" style="${E}">
         <div
-          id="img-comparison-container-${C}"
+          id="img-comparison-container-${A}"
           data-testid="container"
-          style="${F}"
+          style="${k}"
         >
+          ${ed()}
           ${em()}
           ${eg()}
           ${ec()}
-          ${eo()}
+          ${system.If(w,eo(),"")}
           ${system.If(N,en(),"")}
-          ${system.If(O,ep(),"")}
         </div>
       </div>
     </gp-image-comparison>
-    ${eS()}
+    ${ep()}
   `};exports.default=CompareImage;

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

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

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

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers=require("../../helpers.js"),styles=require("../common/styles.js");const Label=({uid:e,label:s,styles:t,translate:l,positionId:r,pageContext:a,translateLabel:i,childrenStyle:o,childrenClass:c,containerStyle:d,containerClass:p})=>{let u=styles.getLabelCustomCss(t,e??""),y=helpers.getDynamicSourceLocales({uid:e,translate:l,val:s,pageContext:a,settingId:i,isCapitalize:t?.typo?.attrs?.transform==="capitalize"});return core.template`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers=require("../../helpers.js"),styles=require("../common/styles.js"),translate=require("../settings/configs/translate.js");const Label=({uid:e,label:s,styles:t,positionId:r,pageContext:a,translateLabel:l,childrenStyle:i,childrenClass:o,containerStyle:c,containerClass:n})=>{let d=styles.getLabelCustomCss(t,e??""),p=helpers.getDynamicSourceLocales({uid:e,val:s,pageContext:a??{},settingId:helpers.createSettingId({id:translate.ImageComparison?.[l]?.id}),isCapitalize:t?.typo?.attrs?.transform==="capitalize"});return core.template`
     <div
       id="image-comparison-${r}-label-${e}"
-      style="${d}"
-      class="${p}"
+      style="${c}"
+      class="${n}"
     >
-      <style>${u}</style>
-      <div class="${c}" style="${o}">
-        ${y}
+      <style>${d}</style>
+      <div class="${o}" style="${i}">
+        ${p}
       </div>
     </div>
   `};exports.default=Label;

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

@@ -1 +1 @@
-"use strict";require("react/jsx-runtime"),require("@gem-sdk/system"),require("@gem-sdk/core"),require("react"),require("./components/Label.js");var ImageComparison$1=require("./settings/ImageComparison.js");const imageComparisonSetting={ImageComparison:ImageComparison$1.default};exports.imageComparisonSetting=imageComparisonSetting;
+"use strict";require("react/jsx-runtime"),require("@gem-sdk/system"),require("@gem-sdk/core"),require("react"),require("next/link"),require("./components/Label.js");var ImageComparison$1=require("./settings/ImageComparison.js");const imageComparisonSetting={ImageComparison:ImageComparison$1.default};exports.imageComparisonSetting=imageComparisonSetting;

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

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var settings=require("./configs/settings.js"),uiV1=require("./configs/ui-v1.js"),uiV2=require("./configs/ui-v2.js");const config={tag:"ImageComparison",label:"Image Comparison",icon:`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var settings=require("./configs/settings.js"),uiV2=require("./configs/ui-v2.js");const config={tag:"ImageComparison",label:"Image Comparison",icon:`
   <div>ImageComparison</div>
-  `,settings:settings.ImageComparisonSettings,ui:uiV1.SettingUIV1,uiV2:uiV2.SettingUIV2,presets:[{id:"image-comparison",name:{en:"Image Comparison"},icon:{desktop:`
+  `,settings:settings.ImageComparisonSettings,ui:[],uiV2:uiV2.SettingUIV2,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">
           <path d="M0 3C0 1.34315 1.34315 0 3 0H37V48H3C1.34315 48 0 46.6569 0 45V3Z" fill="#757575"/>
           <path d="M37 0H93C94.6569 0 96 1.34315 96 3V45C96 46.6569 94.6569 48 93 48H37V0Z" fill="#424242"/>

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

@@ -1 +1 @@
-"use strict";const 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:"translate",type:"input",default:"leftImageLabel,rightImageLabel"},{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"}}}]}];exports.ImageComparisonSettings=ImageComparisonSettings;
+"use strict";const 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"}}}]}];exports.ImageComparisonSettings=ImageComparisonSettings;

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

@@ -0,0 +1 @@
+"use strict";const 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"]}};exports.ImageComparison=ImageComparison;

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

@@ -1 +1 @@
-"use strict";const SettingUIV2=[{label:{en:"Layout"},controls:[{setting:{id:"direction"},layout:"vertical",options:{fullWidth:!0}}]},{label:{en:"Image"},controls:[{label:{en:"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:{en:"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:{en:"Scale"},setting:{id:"imageScale"}}]},{label:{en:"Slider"},controls:[{label:{en:"Behavior"},setting:{id:"hoverToSlide"}},{label:{en:"Default ratio"},setting:{id:"defaultPercentage"}}]},{controls:[{label:{en:"Badge"},setting:{id:"enableLabel"},options:{labelVariant:"primary",toggleStyle:"switch"}},{label:{en:"1st"},conditionDisplay:"enableLabel === true",setting:{id:"leftImageLabel"}},{label:{en:"2nd"},conditionDisplay:"enableLabel === true",setting:{id:"rightImageLabel"}},{conditionDisplay:"enableLabel === true",label:{en:"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:{en:"Padding"},conditionDisplay:"enableLabel === true",setting:{id:"labelPadding"}},{label:{en:"Background"},conditionDisplay:"enableLabel === true",setting:{id:"labelBackgroundColor"}},{label:{en:"Border"},conditionDisplay:"enableLabel === true",setting:{id:"labelBorder"}},{label:{en:"Corner"},conditionDisplay:"enableLabel === true",setting:{id:"labelRounded"}},{label:{en:"Shadow"},conditionDisplay:"enableLabel === true",setting:{id:"labelShadow"}},{label:{en:"Position"},setting:{id:"labelPositionHoz"},conditionDisplay:"enableLabel === true && direction === 'horizontal'"},{label:{en:"Position"},setting:{id:"labelPositionVer"},conditionDisplay:"enableLabel === true && direction === 'vertical'"}]},{label:{en:"Size"},controls:[{label:{en:"Frame"},setting:{id:"aspectRatio"}},{label:{en:"Ratio"},conditionDisplay:"aspectRatio === 'custom'",setting:{id:"customAspectRadio"}},{label:{en:"Width"},setting:{id:"width"}}]},{label:{en:"Shape"},controls:[{label:{en:"Border"},setting:{id:"border",state:"normal"}},{label:{en:"Corner"},setting:{id:"rounded",state:"normal"}},{label:{en:"Shadow"},setting:{id:"boxShadow",state:"normal"},options:{updateFields:[{field:"normal.enable",settingId:"hasBoxShadow",state:"normal"}]},controlChangeTrigger:{settings:[{condition:"boxShadow.normal.enable === true",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!0}},{condition:"boxShadow.normal.enable === false",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!1}}],options:{noRecordHistory:!0}}}]},{label:{en:"Optimize LCP"},controls:[{label:{en:"Preload"},setting:{id:"preload"}},{label:{en:"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:{en:"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:{en:"SEO"},controls:[{label:{en:"1st image"},type:"combo",iconName:"polaris-text-title",fixedValue:"Edit",popoverLabel:{en:"SEO"},setting:{id:"enableSEOLeft"},controls:[{label:{en:"Alt text"},options:{labelAlign:"top"},setting:{id:"altLeft"}},{label:{en:"Image title"},options:{labelAlign:"top"},setting:{id:"titleLeft"}}]},{label:{en:"2nd image"},type:"combo",iconName:"polaris-text-title",fixedValue:"Edit",setting:{id:"enableSEORight"},popoverLabel:{en:"SEO"},controls:[{label:{en:"Alt text"},options:{labelAlign:"top"},setting:{id:"altRight"}},{label:{en:"Image title"},options:{labelAlign:"top"},setting:{id:"titleRight"}}]}]},{controls:[{label:{en:"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%"}}]}];exports.SettingUIV2=SettingUIV2;
+"use strict";const 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%"}}]}];exports.SettingUIV2=SettingUIV2;

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

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),React=require("react"),Image=require("next/image");function getRandomArbitrary(e,t){return Math.random()*(t-e)+e}const ImageDetection=({setting:e,builderProps:t})=>{let[i,s]=React.useState(!1),[p,r]=React.useState(0),l=React.useRef(null);React.useEffect(()=>(e?.loading?(s(!1),n()):s(!0),()=>{l.current&&clearInterval(l.current)}),[e?.loading]);let n=()=>{r(0),l.current=setInterval(()=>{r(e=>{let t=getRandomArbitrary(0,6);return e>=580?e:e+t})},100)};return jsxRuntime.jsxs("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:[jsxRuntime.jsxs("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:[jsxRuntime.jsxs("svg",{className:"gp-ml-[16px]",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[jsxRuntime.jsx("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_${t?.uid})`}),jsxRuntime.jsx("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_${t?.uid})`}),jsxRuntime.jsxs("defs",{children:[jsxRuntime.jsxs("linearGradient",{id:`paint0_linear_4588_15357_${t?.uid}`,x1:"13.5254",y1:"10.6471",x2:"2.99977",y2:"10.6351",gradientUnits:"userSpaceOnUse",children:[jsxRuntime.jsx("stop",{stopColor:"#874CFD"}),jsxRuntime.jsx("stop",{offset:"1",stopColor:"#3C38E1"})]}),jsxRuntime.jsxs("linearGradient",{id:`paint1_linear_4588_15357_${t?.uid}`,x1:"13.5254",y1:"10.6471",x2:"2.99977",y2:"10.6351",gradientUnits:"userSpaceOnUse",children:[jsxRuntime.jsx("stop",{stopColor:"#874CFD"}),jsxRuntime.jsx("stop",{offset:"1",stopColor:"#3C38E1"})]})]})]}),jsxRuntime.jsx("span",{className:"gps-generating-section-text gp-ml-[4px] gp-mr-[16px] gp-text-[12px] gp-font-medium",children:"Generating section"}),jsxRuntime.jsx("div",{className:"gp-mx-[4px] gp-h-[28px] gp-w-[1px] gp-bg-[#5B5B5B] gp-opacity-10"}),jsxRuntime.jsx("div",{"data-url":e?.imagePreviewUrl||"","data-uid":t?.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:jsxRuntime.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[jsxRuntime.jsx("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"}),jsxRuntime.jsx("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"}),jsxRuntime.jsx("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"})]})})]}),!!e?.imagePreviewUrl&&jsxRuntime.jsx(Image,{className:"gp-h-auto gp-w-full gp-opacity-50",src:e?.imagePreviewUrl||"",alt:"",width:100,height:100}),jsxRuntime.jsx("div",{className:`gp-absolute gp-left-0 gp-top-0 gp-z-2 gp-flex gp-h-full gp-w-full   ${i?"gp-hidden":""}`,children:jsxRuntime.jsxs("div",{className:"gp-relative gp-h-[2px] gp-w-full gp-overflow-hidden gp-rounded-md",children:[jsxRuntime.jsx("div",{className:"gp-absolute gp-h-full gp-w-full gp-rounded-md gp-bg-[#F4F4F4]"}),jsxRuntime.jsx("div",{className:"gps-image-to-layout-progress-bar gp-absolute gp-h-full gp-rounded-md gp-transition-all",style:{width:`${p/600*100}%`}})]})}),jsxRuntime.jsxs("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] ${i?"":"gp-hidden"}`,children:[jsxRuntime.jsxs("div",{className:"gp-flex gp-items-center ",children:[jsxRuntime.jsx("div",{className:"gp-flex gp-h-[24px] gp-w-[24px] gp-items-center gp-justify-center",children:jsxRuntime.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:jsxRuntime.jsx("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"})})}),jsxRuntime.jsx("span",{className:"gps-base-font-family gp-ml-[4px] gp-text-sm gp-font-medium gp-text-[#212121]",children:e?.error||"Sorry, we have trouble generate layout from this section. Try again or delete it to publish."})]}),jsxRuntime.jsxs("div",{className:"gp-flex gp-items-center",children:[!e?.error&&jsxRuntime.jsx("div",{"data-url":e?.imagePreviewUrl||"","data-uid":t?.uid,className:"gp-image-detection-retry gp-cursor-pointer gp-text-sm gp-font-medium gp-text-[#3C67FF]",children:"Try again"}),jsxRuntime.jsx("div",{"data-url":e?.imagePreviewUrl||"","data-uid":t?.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:jsxRuntime.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[jsxRuntime.jsx("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"}),jsxRuntime.jsx("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"}),jsxRuntime.jsx("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"})]})})]})]})]})};exports.default=ImageDetection;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),React=require("react"),Image=require("next/image"),core=require("@gem-sdk/core");function getRandomArbitrary(e,t){return Math.random()*(t-e)+e}const ImageDetection=({setting:e,builderProps:t})=>{let[i,s]=React.useState(!1),[p,r]=React.useState(0),l=React.useRef(null),{t:n}=core.useI18nStore();React.useEffect(()=>(e?.loading?(s(!1),g()):s(!0),()=>{l.current&&clearInterval(l.current)}),[e?.loading]);let g=()=>{r(0),l.current=setInterval(()=>{r(e=>{let t=getRandomArbitrary(0,6);return e>=580?e:e+t})},100)};return jsxRuntime.jsxs("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:[jsxRuntime.jsxs("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:[jsxRuntime.jsxs("svg",{className:"gp-ml-[16px]",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[jsxRuntime.jsx("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_${t?.uid})`}),jsxRuntime.jsx("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_${t?.uid})`}),jsxRuntime.jsxs("defs",{children:[jsxRuntime.jsxs("linearGradient",{id:`paint0_linear_4588_15357_${t?.uid}`,x1:"13.5254",y1:"10.6471",x2:"2.99977",y2:"10.6351",gradientUnits:"userSpaceOnUse",children:[jsxRuntime.jsx("stop",{stopColor:"#874CFD"}),jsxRuntime.jsx("stop",{offset:"1",stopColor:"#3C38E1"})]}),jsxRuntime.jsxs("linearGradient",{id:`paint1_linear_4588_15357_${t?.uid}`,x1:"13.5254",y1:"10.6471",x2:"2.99977",y2:"10.6351",gradientUnits:"userSpaceOnUse",children:[jsxRuntime.jsx("stop",{stopColor:"#874CFD"}),jsxRuntime.jsx("stop",{offset:"1",stopColor:"#3C38E1"})]})]})]}),jsxRuntime.jsx("span",{className:"gps-generating-section-text gp-ml-[4px] gp-mr-[16px] gp-text-[12px] gp-font-medium",children:n("Generating section")}),jsxRuntime.jsx("div",{className:"gp-mx-[4px] gp-h-[28px] gp-w-[1px] gp-bg-[#5B5B5B] gp-opacity-10"}),jsxRuntime.jsx("div",{"data-url":e?.imagePreviewUrl||"","data-uid":t?.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:jsxRuntime.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[jsxRuntime.jsx("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"}),jsxRuntime.jsx("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"}),jsxRuntime.jsx("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"})]})})]}),!!e?.imagePreviewUrl&&jsxRuntime.jsx(Image,{className:"gp-h-auto gp-w-full gp-opacity-50",src:e?.imagePreviewUrl||"",alt:"",width:100,height:100}),jsxRuntime.jsx("div",{className:`gp-absolute gp-left-0 gp-top-0 gp-z-2 gp-flex gp-h-full gp-w-full   ${i?"gp-hidden":""}`,children:jsxRuntime.jsxs("div",{className:"gp-relative gp-h-[2px] gp-w-full gp-overflow-hidden gp-rounded-md",children:[jsxRuntime.jsx("div",{className:"gp-absolute gp-h-full gp-w-full gp-rounded-md gp-bg-[#F4F4F4]"}),jsxRuntime.jsx("div",{className:"gps-image-to-layout-progress-bar gp-absolute gp-h-full gp-rounded-md gp-transition-all",style:{width:`${p/600*100}%`}})]})}),jsxRuntime.jsxs("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] ${i?"":"gp-hidden"}`,children:[jsxRuntime.jsxs("div",{className:"gp-flex gp-items-center ",children:[jsxRuntime.jsx("div",{className:"gp-flex gp-h-[24px] gp-w-[24px] gp-items-center gp-justify-center",children:jsxRuntime.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:jsxRuntime.jsx("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"})})}),jsxRuntime.jsx("span",{className:"gps-base-font-family gp-ml-[4px] gp-text-sm gp-font-medium gp-text-[#212121]",children:e?.error||n("Sorry, we have trouble generate layout from this section. Try again or delete it to publish.")})]}),jsxRuntime.jsxs("div",{className:"gp-flex gp-items-center",children:[!e?.error&&jsxRuntime.jsx("div",{"data-url":e?.imagePreviewUrl||"","data-uid":t?.uid,className:"gp-image-detection-retry gp-cursor-pointer gp-text-sm gp-font-medium gp-text-[#3C67FF]",children:n("Try again")}),jsxRuntime.jsx("div",{"data-url":e?.imagePreviewUrl||"","data-uid":t?.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:jsxRuntime.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[jsxRuntime.jsx("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"}),jsxRuntime.jsx("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"}),jsxRuntime.jsx("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"})]})})]})]})]})};exports.default=ImageDetection;

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

@@ -1 +1 @@
-"use strict";require("react/jsx-runtime"),require("react"),require("next/image");var ImageDetection$1=require("./settings/ImageDetection.js");const imageDetectionSetting={ImageDetection:ImageDetection$1.default};exports.imageDetectionSetting=imageDetectionSetting;
+"use strict";require("react/jsx-runtime"),require("react"),require("next/image"),require("@gem-sdk/core");var ImageDetection$1=require("./settings/ImageDetection.js");const imageDetectionSetting={ImageDetection:ImageDetection$1.default};exports.imageDetectionSetting=imageDetectionSetting;

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

@@ -1,3 +1,3 @@
 "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var settings=require("./configs/settings.js");const config={tag:"ImageDetection",label:"ImageDetection",icon:`
 
-  `,settings:settings.ImageDetectionSettings,presets:[{id:"image-detection",name:{en:"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}}}}};exports.default=config;
+  `,settings:settings.ImageDetectionSettings,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}}}}};exports.default=config;