import{template as e}from"@gem-sdk/core";import{createClass as t,createStyle as a}from"@gem-sdk/system";import{getImageComparisonWrapperClasses as i,getImageComparisonWrapperStyles as r}from"../common/classes.js";import{getSettingTranslatedImageComparisonAndSeo as m,getSliderPositionPercentage as o}from"../common/helpers.js";import l from"./CompareImage.liquid.js";let ImageComparison=({setting:g,styles:s,builderProps:d,advanced:n,pageContext:p,...f})=>{let I=m({setting:g,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:x,hoverToSlide:A,enableLabel:P,preload:T,qualityType:$,qualityPercent:k,enableSEOLeft:D,enableSEORight:B}=I??{},U=t(i()),W=a(r());return e`
    <div class="${U}" style="${W}">
      ${l({...f,styles:s,preload:T,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:x,sliderPositionPercentage:o(L),vertical:"vertical"===C,hover:A,enableLabel:P,qualityType:$,qualityPercent:k,componentUid:d?.uid??"",builderData:d?.builderData,pageContext:p??{}})}
    </div>
  `};export{ImageComparison as default};
