"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;
