"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:t,builderProps:a,advanced:r,pageContext:s,...i})=>{let l=helpers.getSettingTranslatedImageComparisonAndSeo({setting:e,uid:a?.uid,pageContext:s??{}}),{imageLeft:m,altLeft:o,titleLeft:g,imageRight:n,altRight:p,titleRight:d,direction:c,defaultPercentage:u,leftImageLabel:I,rightImageLabel:C,sliderLineWidth:y,hoverToSlide:h,enableLabel:q,preload:f,qualityType:b,qualityPercent:v,enableSEOLeft:P,enableSEORight:S}=l??{},j=system.createClass(classes.getImageComparisonWrapperClasses()),x=system.createStyle(classes.getImageComparisonWrapperStyles());return core.template`
    <div class="${j}" style="${x}">
      ${CompareImage_liquid.default({...i,styles:t,preload:f,advanced:r,leftImage:m,leftImageAlt:P?o:"",leftImageTitle:P?g:"",rightImage:n,rightImageAlt:S?p:"",rightImageTitle:S?d:"",leftImageLabel:I??"Before",rightImageLabel:C??"After",sliderLineWidth:y,sliderPositionPercentage:helpers.getSliderPositionPercentage(u),vertical:"vertical"===c,hover:h,enableLabel:q,qualityType:b,qualityPercent:v,componentUid:a?.uid??"",builderData:a?.builderData,pageContext:s??{}})}
    </div>
  `};exports.default=ImageComparison;
