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