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 g=({setting:g,styles:s,builderProps:d,advanced:n,pageContext:p,...f})=>{let c=m({setting:g,uid:d?.uid,pageContext:p??{}}),{imageLeft:u,altLeft:I,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}=c??{},U=t(r()),W=i(a());return e`
    <div class="${U}" style="${W}">
      ${o({...f,styles:s,preload:T,advanced:n,leftImage:u,leftImageAlt:D?I:"",leftImageTitle:D?h:"",rightImage:b,rightImageAlt:B?v:"",rightImageTitle:B?y:"",leftImageLabel:j??"Before",rightImageLabel:q??"After",sliderLineWidth:x,sliderPositionPercentage:l(L),vertical:"vertical"===C,hover:A,enableLabel:P,qualityType:$,qualityPercent:k,componentUid:d?.uid??"",builderData:d?.builderData,pageContext:p??{}})}
    </div>
  `};export{g as default};
