text: var VueCompareTwoImagesComponent=function(e){"use strict";var t={name:"compareTwoImages",mounted:function(){this.addImagesOnWrapper(),this.setDividerPositionFromRelative(),window.addEventListener("resize",this.changeWrapperHeightOnResizeEvent)},destroyed:function(){window.addEventListener("resize",this.changeWrapperHeightOnResizeEvent)},data:function(){return{mouseMoveReady:!1,currentdividerPosition:0,dividerRelativePosition:this.$props.dividerPosition,rationWrapperWH:0,ratioWH:0,rightLabelClipSize:0,animateRightLabel:!1}},props:{leftImage:{type:String,default:null},rightImage:{type:String,default:null},leftImageOpacity:{type:Number,default:1},labelsEnable:{type:Boolean,default:!0},leftLabel:{type:String,default:"Left image"},rightLabel:{type:String,default:"Right image"},labelsPosition:{type:String,default:"top"},labelsBackgroundColor:{type:String,default:"rgba(37, 34, 29, 0.58)"},labelsTextColor:{type:String,default:"rgb(253, 253, 253)"},labelsFontSize:{type:String,default:"inherit"},labelsUppercase:{type:Boolean,default:!1},labelsPaddings:{type:String,default:"15px"},dividerWidth:{type:String,default:"2px"},dividerWidthOnHover:{type:String,default:"20px"},dividerPosition:{type:Number,default:50},dividerColor:{type:String,default:"rgb(253, 253, 253)"},showAnimateArrows:{type:Boolean,default:!0},arrowsColor:{type:String,default:"rgb(253, 253, 253)"},arrowsWidth:{type:String,default:"20px"},adaptiveHeight:{type:Boolean,default:!0}},methods:{mouseDownEventHandler:function(e){if(2==e.button)return!1;e.target.parentElement.classList.contains("divider-wrapper")?(this.mouseMoveReady=!0,this.$refs.divider.classList.contains("animated")&&this.$refs.divider.classList.remove("animated")):(this.$refs.divider.classList.add("animated"),this.changeDividerPosition(e),this.$refs.leftImageWrapper.classList.add("animated"))},mouseUpEventHandler:function(e){this.mouseMoveReady&&(this.mouseMoveReady=!1)},mouseMoveEventHandler:function(e){this.mouseMoveReady&&(this.changeDividerPosition(e),this.slideLeftImageWrapper())},touchMoveEventHandler:function(e){e.target.parentElement.classList.contains("divider-wrapper")&&(this.$refs.divider.classList.contains("animated")&&this.$refs.divider.classList.remove("animated"),this.changeDividerPosition(e),this.slideLeftImageWrapper())},changeDividerPosition:function(e){var t=this.$refs.wrapper.getBoundingClientRect(),i="touchmove"==e.type?e.touches[0].clientX-t.left:e.clientX-t.left;if(i>=-1&&i<=t.width&&(this.currentdividerPosition=i,this.dividerRelativePosition=i/t.width*100),1!=this.$props.leftImageOpacity&&this.$props.labelsEnable){var r=this.$refs.rightLabel.offsetLeft;this.currentdividerPosition>r?(this.animateRightLabel=!!this.$refs.divider.classList.contains("animated"),this.rightLabelClipSize=this.currentdividerPosition-r):this.rightLabelClipSize=0}},slideLeftImageWrapper:function(){this.$refs.leftImageWrapper.classList.contains("animated")&&this.$refs.leftImageWrapper.classList.remove("animated")},addImagesOnWrapper:function(){var e=this,t=this.$refs.wrapper.getBoundingClientRect().width,i=-1,r=0;["leftImage","rightImage"].forEach((function(a){var s=new Image;s.src=e.$props[a],s.onload=function(){if(e.$refs[a].src=s.src,e.$props.adaptiveHeight){var n=s.width/s.height;i=t/n<i||-1==i?t/n:i,e.$refs.wrapper.style.height=i+"px",e.ratioWH=e.$refs.wrapper.getBoundingClientRect().width/i}else r=s.height<r||!r?s.height:r,e.$refs.wrapper.style.height=r+"px"}}))},changeWrapperHeightOnResizeEvent:function(){var e=this.$refs.wrapper;if(this.$props.adaptiveHeight){var t=e.getBoundingClientRect().width/this.ratioWH;e.style.height=t+"px"}this.setDividerPositionFromRelative(),this.$refs.divider.classList.remove("animated"),this.$refs.leftImageWrapper.classList.remove("animated")},setDividerPositionFromRelative:function(){var e=this.$refs.dividerHR.getBoundingClientRect().width/2;this.currentdividerPosition=this.$refs.wrapper.getBoundingClientRect().width/100*this.dividerRelativePosition-e},changeDividerClassAndWidth:function(e){if("svg"==e.target.tagName.toLowerCase()||"path"==e.target.tagName.toLowerCase()||e.target.classList.contains("arrow"))return!1;var t=this.$refs.divider.querySelector(".divider");t.classList.add("hovered"),t.style.width=this.$props.dividerWidthOnHover},removeHoveredClass:function(e){var t=this.$refs.divider.querySelector(".divider");t.style.width=this.$props.dividerWidth,t.classList.remove("hovered")}},computed:{dividerWrapperStyle:function(){return{left:this.currentdividerPosition+"px"}},hrElementsStyle:function(){return{width:this.$props.dividerWidth,backgroundColor:this.$props.dividerColor}},dividerElementsStyle:function(){return{width:this.$props.dividerWidth,backgroundColor:this.$props.dividerColor,marginLeft:"calc(-50% + ("+this.$props.dividerWidth+" / 2))"}},dividerArrowStyle:function(){return{fill:this.$props.dividerColor}},leftArrowStyle:function(){return{left:"calc(-10px - "+this.$props.arrowsWidth+" - "+this.$props.dividerWidth+")",animation:"animateLeftArrow 1.5s infinite",width:this.$props.arrowsWidth}},rightArrowStyle:function(){return{right:"calc(-10px - "+this.$props.arrowsWidth+" - "+this.$props.dividerWidth+")",animation:"animateRightArrow 1.5s infinite",width:this.$props.arrowsWidth}},leftImageWrapperStyle:function(){return{clip:"rect(auto, "+(this.currentdividerPosition+2)+"px, auto, auto)"}},leftImgStyle:function(){return{opacity:this.$props.leftImageOpacity}},labelsPositionClass:function(){return"bottom"===this.$props.labelsPosition?"bottom":"top"},leftLabelStyle:function(){return{display:this.$props.labelsEnable?"initial":"none",backgroundColor:this.$props.labelsBackgroundColor,color:this.$props.labelsTextColor,fontSize:this.$props.labelsFontSize,textTransform:this.$props.labelsUppercase?"uppercase":"none",padding:this.$props.labelsPaddings}},rightLabelStyle:function(e){return this.$props.leftImageOpacity&&this.$props.labelsEnable?{display:this.$props.labelsEnable?"initial":"none",backgroundColor:this.$props.labelsBackgroundColor,color:this.$props.labelsTextColor,fontSize:this.$props.labelsFontSize,textTransform:this.$props.labelsUppercase?"uppercase":"none",padding:this.$props.labelsPaddings,clip:"rect(auto, auto, auto, "+this.rightLabelClipSize+"px)",transition:this.animateRightLabel?"all 0.5s ease 0.16s":"unset"}:{display:this.$props.labelsEnable?"initial":"none",backgroundColor:this.$props.labelsBackgroundColor,color:this.$props.labelsTextColor,fontSize:this.$props.labelsFontSize,textTransform:this.$props.labelsUppercase?"uppercase":"none",padding:this.$props.labelsPaddings}}}};var i,r="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var a={};var s=function(e,t,i,r,a,s,n,o,l,p){"boolean"!=typeof n&&(l=o,o=n,n=!1);var d,m="function"==typeof i?i.options:i;if(e&&e.render&&(m.render=e.render,m.staticRenderFns=e.staticRenderFns,m._compiled=!0,a&&(m.functional=!0)),r&&(m._scopeId=r),s?(d=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(s)},m._ssrRegister=d):t&&(d=n?function(e){t.call(this,p(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,o(e))}),d)if(m.functional){var g=m.render;m.render=function(e,t){return d.call(t),g(e,t)}}else{var h=m.beforeCreate;m.beforeCreate=h?[].concat(h,d):[d]}return i}({render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{ref:"wrapper",staticClass:"compare-image-wrapper",on:{mousedown:function(t){return e.mouseDownEventHandler(t)},mouseup:function(t){return e.mouseUpEventHandler(t)},mouseleave:function(t){return e.mouseUpEventHandler(t)},mousemove:function(t){return e.mouseMoveEventHandler(t)},touchmove:function(t){return e.touchMoveEventHandler(t)}}},[i("div",{staticClass:"images-wrapper"},[i("div",{ref:"leftImageWrapper",staticClass:"left-image",style:e.leftImageWrapperStyle},[i("div",{staticClass:"label",class:e.labelsPositionClass,style:e.leftLabelStyle},[e._v(e._s(e.leftLabel))]),e._v(" "),i("img",{ref:"leftImage",style:e.leftImgStyle,attrs:{alt:"Left side image",draggable:"false"}})]),e._v(" "),i("div",{staticClass:"right-image"},[i("div",{ref:"rightLabel",staticClass:"label",class:e.labelsPositionClass,style:e.rightLabelStyle},[e._v(e._s(e.rightLabel))]),e._v(" "),i("img",{ref:"rightImage",attrs:{alt:"Right side image",draggable:"false"}})])]),e._v(" "),i("div",{ref:"divider",staticClass:"divider-wrapper",style:e.dividerWrapperStyle,on:{mouseover:function(t){return e.changeDividerClassAndWidth(t)},mouseleave:function(t){return e.removeHoveredClass(t)}}},[i("hr",{ref:"dividerHR",style:e.hrElementsStyle}),e._v(" "),i("div",{staticClass:"divider",style:e.dividerElementsStyle},[e.showAnimateArrows?i("div",{staticClass:"arrow",style:e.leftArrowStyle},[i("svg",{staticStyle:{"enable-background":"new 0 0 492 492"},style:e.dividerArrowStyle,attrs:{version:"1.1",id:"Layer_1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",x:"0px",y:"0px",viewBox:"0 0 492 492","xml:space":"preserve"}},[i("g",[i("g",[i("path",{attrs:{d:"M198.608,246.104L382.664,62.04c5.068-5.056,7.856-11.816,7.856-19.024c0-7.212-2.788-13.968-7.856-19.032l-16.128-16.12\n\t\t\tC361.476,2.792,354.712,0,347.504,0s-13.964,2.792-19.028,7.864L109.328,227.008c-5.084,5.08-7.868,11.868-7.848,19.084\n\t\t\tc-0.02,7.248,2.76,14.028,7.848,19.112l218.944,218.932c5.064,5.072,11.82,7.864,19.032,7.864c7.208,0,13.964-2.792,19.032-7.864\n\t\t\tl16.124-16.12c10.492-10.492,10.492-27.572,0-38.06L198.608,246.104z"}})])]),e._v(" "),i("g"),e._v(" "),i("g"),e._v(" "),i("g"),e._v(" "),i("g"),e._v(" "),i("g"),e._v(" "),i("g"),e._v(" "),i("g"),e._v(" "),i("g"),e._v(" "),i("g"),e._v(" "),i("g"),e._v(" "),i("g"),e._v(" "),i("g"),e._v(" "),i("g"),e._v(" "),i("g"),e._v(" "),i("g")])]):e._e(),e._v(" "),e.showAnimateArrows?i("div",{staticClass:"arrow",style:e.rightArrowStyle},[i("svg",{staticStyle:{"enable-background":"new 0 0 492.004 492.004"},style:e.dividerArrowStyle,attrs:{version:"1.1",id:"Layer_1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",x:"0px",y:"0px",viewBox:"0 0 492.004 492.004","xml:space":"preserve"}},[i("g",[i("g",[i("path",{attrs:{d:"M382.678,226.804L163.73,7.86C158.666,2.792,151.906,0,144.698,0s-13.968,2.792-19.032,7.86l-16.124,16.12\n\t\t\tc-10.492,10.504-10.492,27.576,0,38.064L293.398,245.9l-184.06,184.06c-5.064,5.068-7.86,11.824-7.86,19.028\n\t\t\tc0,7.212,2.796,13.968,7.86,19.04l16.124,16.116c5.068,5.068,11.824,7.86,19.032,7.86s13.968-2.792,19.032-7.86L382.678,265\n\t\t\tc5.076-5.084,7.864-11.872,7.848-19.088C390.542,238.668,387.754,231.884,382.678,226.804z"}})])]),e._v(" "),i("g"),e._v(" "),i("g"),e._v(" "),i("g"),e._v(" "),i("g"),e._v(" "),i("g"),e._v(" "),i("g"),e._v(" "),i("g"),e._v(" "),i("g"),e._v(" "),i("g"),e._v(" "),i("g"),e._v(" "),i("g"),e._v(" "),i("g"),e._v(" "),i("g"),e._v(" "),i("g"),e._v(" "),i("g")])]):e._e()]),e._v(" "),i("hr",{style:e.hrElementsStyle})])])},staticRenderFns:[]},(function(e){e&&e("data-v-76c43131_0",{source:".compare-image-wrapper{position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;height:100%;overflow-x:hidden}.compare-image-wrapper .images-wrapper{overflow:hidden}.compare-image-wrapper .images-wrapper .left-image,.compare-image-wrapper .images-wrapper .right-image{height:100%;position:absolute;overflow:hidden}.compare-image-wrapper .images-wrapper .left-image img,.compare-image-wrapper .images-wrapper .right-image img{object-fit:cover;width:100%;height:100%}.compare-image-wrapper .images-wrapper .right-image{width:100%;z-index:1}.compare-image-wrapper .images-wrapper .right-image .label{right:0}.compare-image-wrapper .images-wrapper .left-image{width:100%;z-index:2}.compare-image-wrapper .images-wrapper .left-image .label{z-index:1}.compare-image-wrapper .images-wrapper .label{position:absolute}.compare-image-wrapper .images-wrapper .label.top{top:0}.compare-image-wrapper .images-wrapper .label.bottom{bottom:0}.compare-image-wrapper .divider-wrapper{position:absolute;top:0;display:flex;flex-direction:column;height:100%;z-index:3}.compare-image-wrapper .divider-wrapper .divider:hover,.compare-image-wrapper .divider-wrapper hr:hover{cursor:pointer}.compare-image-wrapper .divider-wrapper hr{margin:0;border:none;height:40%}.compare-image-wrapper .divider-wrapper .divider{height:20%;position:relative;transition:width .5s ease-in}.compare-image-wrapper .divider-wrapper .divider .arrow{position:absolute;top:calc(50% - 15px);transition:opacity 1.5s ease-in}.compare-image-wrapper .divider-wrapper .divider.hovered .arrow{animation-play-state:paused;transition:opacity .1s ease-in;opacity:0}.compare-image-wrapper .divider-wrapper.animated,.compare-image-wrapper .left-image.animated{transition:.5s ease}@-webkit-keyframes animateLeftArrow{0%{transform:translateX(0)}100%{transform:translateX(-5px)}}@-moz-keyframes animateLeftArrow{0%{transform:translateX(0)}100%{transform:translateX(-5px)}}@-o-keyframes animateLeftArrow{0%{transform:translateX(0)}100%{transform:translateX(-5px)}}@keyframes animateLeftArrow{0%{transform:translateX(0)}100%{transform:translateX(-5px)}}@-webkit-keyframes animateRightArrow{0%{transform:translateX(0)}100%{transform:translateX(5px)}}@-moz-keyframes animateRightArrow{0%{transform:translateX(0)}100%{transform:translateX(5px)}}@-o-keyframes animateRightArrow{0%{transform:translateX(0)}100%{transform:translateX(5px)}}@keyframes animateRightArrow{0%{transform:translateX()}100%{transform:translateX(5px)}}",map:void 0,media:void 0})}),t,void 0,!1,void 0,!1,(function(e){return function(e,t){return function(e,t){var s=r?t.media||"default":e,n=a[s]||(a[s]={ids:new Set,styles:[]});if(!n.ids.has(e)){n.ids.add(e);var o=t.source;if(t.map&&(o+="\n/*# sourceURL="+t.map.sources[0]+" */",o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),n.element||(n.element=document.createElement("style"),n.element.type="text/css",t.media&&n.element.setAttribute("media",t.media),void 0===i&&(i=document.head||document.getElementsByTagName("head")[0]),i.appendChild(n.element)),"styleSheet"in n.element)n.styles.push(o),n.element.styleSheet.cssText=n.styles.filter(Boolean).join("\n");else{var l=n.ids.size-1,p=document.createTextNode(o),d=n.element.childNodes;d[l]&&n.element.removeChild(d[l]),d.length?n.element.insertBefore(p,d[l]):n.element.appendChild(p)}}}(e,t)}}),void 0,void 0);function n(e){n.installed||(n.installed=!0,e.component("CompareTwoImages",s))}var o={install:n},l=null;return"undefined"!=typeof window?l=window.Vue:"undefined"!=typeof global&&(l=global.Vue),l&&l.use(o),s.install=n,e.default=s,e}({});