https://barsys.com/_next/static/chunks/7114.e037bfafc52cb109.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7114],{47251:function(e,t,i){"use strict";var s=this&&this.__createBinding||(Object.create?function(e,t,i,s){void 0===s&&(s=i),Object.defineProperty(e,s,{enumerable:!0,get:function(){return t[i]}})}:function(e,t,i,s){void 0===s&&(s=i),e[s]=t[i]}),n=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),o=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)"default"!==i&&Object.prototype.hasOwnProperty.call(e,i)&&s(t,e,i);return n(t,e),t};Object.defineProperty(t,"__esModule",{value:!0}),t.ImgComparisonSlider=void 0;let r=i(2265);"undefined"!=typeof document&&Promise.resolve().then(()=>o(i(31749))),t.ImgComparisonSlider=(0,r.forwardRef)(({children:e,onSlide:t,value:i,className:s,...n},o)=>{let a=(0,r.useRef)();return(0,r.useEffect)(()=>{void 0!==i&&(a.current.value=parseFloat(i.toString()))},[i,a]),(0,r.useEffect)(()=>{t&&a.current.addEventListener("slide",t)},[]),(0,r.useImperativeHandle)(o,()=>a.current,[a]),(0,r.createElement)("img-comparison-slider",Object.assign({class:s?`${s} rendered`:"rendered",tabIndex:0,ref:a},n),e)})},31749:function(){(()=>{"use strict";var e={792:(e,t,i)=>{i.d(t,{Z:()=>o});var s=i(609),n=i.n(s)()(function(e){return e[1]});n.push([e.id,':host{--divider-width: 1px;--divider-color: #fff;--divider-shadow: none;--default-handle-width: 50px;--default-handle-color: #fff;--default-handle-opacity: 1;--default-handle-shadow: none;--handle-position-start: 50%;position:relative;display:inline-block;overflow:hidden;line-height:0;direction:ltr}@media screen and (-webkit-min-device-pixel-ratio: 0)and (min-resolution: 0.001dpcm){:host{outline-offset:1px}}:host(:focus){outline:2px solid -webkit-focus-ring-color}::slotted(*){-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.first{position:absolute;left:0;top:0;right:0;line-height:normal;font-size:100%;max-height:100%;height:100%;width:100%;--exposure: 50%;--keyboard-transition-time: 0ms;--default-transition-time: 0ms;--transition-time: var(--default-transition-time)}.first .first-overlay-container{position:relative;clip-path:inset(0 var(--exposure) 0 0);transition:clip-path var(--transition-time);height:100%}.first .first-overlay{overflow:hidden;height:100%}.first.focused{will-change:clip-path}.first.focused .first-overlay-container{will-change:clip-path}.second{position:relative}.handle-container{transform:translateX(50%);position:absolute;top:0;right:var(--exposure);height:100%;transition:right var(--transition-time),bottom var(--transition-time)}.focused .handle-container{will-change:right}.divider{position:absolute;height:100%;width:100%;left:0;top:0;display:flex;align-items:center;justify-content:center;flex-direction:column}.divider:after{content:" ";display:block;height:100%;border-left-width:var(--divider-width);border-left-style:solid;border-left-color:var(--divider-color);box-shadow:var(--divider-shadow)}.handle{position:absolute;top:var(--handle-position-start);pointer-events:none;box-sizing:border-box;margin-left:1px;transform:translate(calc(-50% - 0.5px), -50%);line-height:0}.default-handle{width:var(--default-handle-width);opacity:var(--default-handle-opacity);transition:all 1s;filter:drop-shadow(var(--default-handle-shadow))}.default-handle path{stroke:var(--default-handle-color)}.vertical .first-overlay-container{clip-path:inset(0 0 var(--exposure) 0)}.vertical .handle-container{transform:translateY(50%);height:auto;top:unset;bottom:var(--exposure);width:100%;left:0;flex-direction:row}.vertical .divider:after{height:1px;width:100%;border-top-width:var(--divider-width);border-top-style:solid;border-top-color:var(--divider-color);border-left:0}.vertical .handle{top:auto;left:var(--handle-position-start);transform:translate(calc(-50% - 0.5px), -50%) rotate(90deg)}',""]);let o=n},609:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var i=e(t);return t[2]?"@media ".concat(t[2]," {").concat(i,"}"):i}).join("")},t.i=function(e,i,s){"string"==typeof e&&(e=[[null,e,""]]);var n={};if(s)for(var o=0;o<this.length;o++){var r=this[o][0];null!=r&&(n[r]=!0)}for(var a=0;a<e.length;a++){var l=[].concat(e[a]);s&&n[l[0]]||(i&&(l[2]?l[2]="".concat(i," and ").concat(l[2]):l[2]=i),t.push(l))}},t}}},t={};function i(s){var n=t[s];if(void 0!==n)return n.exports;var o=t[s]={id:s,exports:{}};return e[s](o,o.exports,i),o.exports}i.n=e=>

1{var t=e&&e.__esModule?()=>e.default:()=>e;return i.d(t,{a:t}),t},i.d=(e,t)=>{for(var s in t)i.o(t,s)&&!i.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:t[s]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{let e;var t=i(792);let s="rendered",n=(e,t)=>{let i,s;let n=e.getBoundingClientRect();return"mousedown"===t.type?(i=t.clientX,s=t.clientY):(i=t.touches[0].clientX,s=t.touches[0].clientY),i>=n.x&&i<=n.x+n.width&&s>=n.y&&s<=n.y+n.height},o={ArrowLeft:-1,ArrowRight:1},r=["horizontal","vertical"],a=e=>({x:e.touches[0].pageX,y:e.touches[0].pageY}),l=e=>({x:e.pageX,y:e.pageY}),d="undefined"!=typeof window&&(null==window?void 0:window.HTMLElement);"undefined"!=typeof window&&(window.document&&((e=document.createElement("template")).innerHTML='<div class="second" id="second"> <slot name="second"><slot name="before"></slot></slot> </div> <div class="first" id="first"> <div class="first-overlay"> <div class="first-overlay-container" id="firstImageContainer"> <slot name="first"><slot name="after"></slot></slot> </div> </div> <div class="handle-container"> <div class="divider"></div> <div class="handle" id="handle"> <slot name="handle"> <svg xmlns="http://www.w3.org/2000/svg" class="default-handle" viewBox="-8 -3 16 6"> <path d="M -5 -2 L -7 0 L -5 2 M 5 -2 L 7 0 L 5 2" fill="none" vector-effect="non-scaling-stroke"/> </svg> </slot> </div> </div> </div> '),window.customElements.define("img-comparison-slider",class extends d{constructor(){super(),this.exposure=this.hasAttribute("value")?parseFloat(this.getAttribute("value")):50,this.slideOnHover=!1,this.slideDirection="horizontal",this.keyboard="enabled",this.isMouseDown=!1,this.animationDirection=0,this.isFocused=!1,this.dragByHandle=!1,this.onMouseMove=e=>{if(this.isMouseDown||this.slideOnHover){let t=l(e);this.slideToPage(t)}},this.bodyUserSelectStyle="",this.bodyWebkitUserSelectStyle="",this.onMouseDown=e=>{if(this.slideOnHover||this.handle&&!n(this.handleElement,e))return;e.preventDefault(),window.addEventListener("mousemove",this.onMouseMove),window.addEventListener("mouseup",this.onWindowMouseUp),this.isMouseDown=!0,this.enableTransition();let t=l(e);this.slideToPage(t),this.focus(),this.bodyUserSelectStyle=window.document.body.style.userSelect,this.bodyWebkitUserSelectStyle=window.document.body.style.webkitUserSelect,window.document.body.style.userSelect="none",window.document.body.style.webkitUserSelect="none"},this.onWindowMouseUp=()=>{this.isMouseDown=!1,window.document.body.style.userSelect=this.bodyUserSelectStyle,window.document.body.style.webkitUserSelect=this.bodyWebkitUserSelectStyle,window.removeEventListener("mousemove",this.onMouseMove),window.removeEventListener("mouseup",this.onWindowMouseUp)},this.touchStartPoint=null,this.isTouchComparing=!1,this.hasTouchMoved=!1,this.onTouchStart=e=>{this.dragByHandle&&!n(this.handleElement,e)||(this.touchStartPoint=a(e),this.isFocused&&(this.enableTransition(),this.slideToPage(this.touchStartPoint)))},this.onTouchMove=e=>{if(null===this.touchStartPoint)return;let t=a(e);if(this.isTouchComparing)return this.slideToPage(t),e.preventDefault(),!1;if(!this.hasTouchMoved){let i=Math.abs(t.y-this.touchStartPoint.y),s=Math.abs(t.x-this.touchStartPoint.x);if("horizontal"===this.slideDirection&&i<s||"vertical"===this.slideDirection&&i>s)return this.isTouchComparing=!0,this.focus(),this.slideToPage(t),e.preventDefault(),!1;this.hasTouchMoved=!0}},this.onTouchEnd=()=>{this.isTouchComparing=!1,this.hasTouchMoved=!1,this.touchStartPoint=null},this.onBlur=()=>{this.stopSlideAnimation(),this.isFocused=!1,this.firstElement.classList.remove("focused")},this.onFocus=()=>{this.isFocused=!0,this.firstElement.classList.add("focused")},this.onKeyDown=e=>{if("disabled"===this.keyboard)return;let t=o[e.key];this.animationDirection!==t&&void 0!==t&&(this.animationDirection=t,this.startSlideAnimation())},this.onKeyUp=e=>{if("disabled"===this.keyboard)return;let t=o[e.key];void 0!==t&&this.animationDirection===t&&this.stopSlideAnimation()},this.resetDimensions=()=>{this.imageWidth=this.offsetWidth,this.imageHeight=this.offsetHeight};let i=this.attachShadow({mode:"open"}),s=document.createElement("style");s.innerHTML=t.Z,this.getAttribute("nonce")&&s.setAttribute("nonce",this.getAttribute("nonce")),i.appendChild(s),i.appendChild(e.content.cloneNode(!0)),this.firstElement=i.getElementById("first"),this.handleElement=i.getElementById("handle")}set handle(e){this.dragByHandle="false"!==e.toString().toLowerCase()}get handle(){return this.dragByHandle}get value(){return this.exposure}set value(e){let t=parseFloat(e);t!==this.exposure&&(this.exposure=t,this.enableTransition(),this.setExposure())}get hover(){return this.slideOnHover}set hover(e){this.slideOnHover="false"!==e.toString().toLowerCase(),this.removeEventListener("mousemove",this.onMouseMove),this.slideOnHover&&this.addEventListener("mousemove",this.onMouseMove)}get direction(){return this.slideDirection}set direction(e){this.slideDirection=e.toString().toLowerCase(),this.slide(0),this.firstElement.classList.remove(...r),r.includes(this.slideDirection)&&this.firstElement.classList.add(this.slideDirection)}static get observedAttributes(){return["hover","direction"]}connectedCallback(){this.hasAttribute("tabindex")||(this.tabIndex=0),this.addEventListener("dragstart",e=>(e.preventDefault(),!1)),new ResizeObserver(this.resetDimensions).observe(this),this.setExposure(0),this.keyboard=this.hasAttribute("keyboard")&&"disabled"===this.getAttribute("keyboard")?"disabled":"enabled",this.addEventListener("keydown",this.onKeyDown),this.addEventListener("keyup",this.onKeyUp),this.addEventListener("focus",this.onFocus),this.addEventListener("blur",this.onBlur),this.addEventListener("touchstart",this.onTouchStart,{passive:!0}),this.addEventListener("touchmove",this.onTouchMove,{passive:!1}),this.addEventListener("touchend",this.onTouchEnd),this.addEventListener("mousedown",this.onMouseDown),this.handle=this.hasAttribute("handle")?this.getAttribute("handle"):this.dragByHandle,this.hover=this.hasAttribute("hover")?this.getAttribute("hover"):this.slideOnHover,this.direction=this.hasAttribute("direction")?this.getAttribute("direction"):this.slideDirection,this.resetDimensions(),this.classList.contains(s)||this.classList.add(s)}disconnectedCallback(){this.transitionTimer&&window.clearTimeout(this.transitionTimer)}attributeChangedCallback(e,t,i){"hover"===e&&(this.hover=i),"direction"===e&&(this.direction=i),"ke

1yboard"===e&&(this.keyboard="disabled"===i?"disabled":"enabled")}setExposure(e=0){var t;this.exposure=(t=this.exposure+e)<0?0:t>100?100:t,this.firstElement.style.setProperty("--exposure",100-this.exposure+"%")}slide(e=0){this.setExposure(e);let t=new Event("slide");this.dispatchEvent(t)}slideToPage(e){"horizontal"===this.slideDirection&&this.slideToPageX(e.x),"vertical"===this.slideDirection&&this.slideToPageY(e.y)}slideToPageX(e){let t=e-this.getBoundingClientRect().left-window.scrollX;this.exposure=t/this.imageWidth*100,this.slide(0)}slideToPageY(e){let t=e-this.getBoundingClientRect().top-window.scrollY;this.exposure=t/this.imageHeight*100,this.slide(0)}enableTransition(){this.firstElement.style.setProperty("--transition-time","100ms"),this.transitionTimer=window.setTimeout(()=>{this.firstElement.style.setProperty("--transition-time","var(--default-transition-time)"),this.transitionTimer=null},100)}startSlideAnimation(){let e=null,t=this.animationDirection;this.firstElement.style.setProperty("--transition-time","var(--keyboard-transition-time)");let i=s=>{if(0===this.animationDirection||t!==this.animationDirection)return;null===e&&(e=s);let n=(s-e)/16.666666666666668*this.animationDirection;this.slide(n),setTimeout(()=>window.requestAnimationFrame(i),0),e=s};window.requestAnimationFrame(i)}stopSlideAnimation(){this.animationDirection=0,this.firstElement.style.setProperty("--transition-time","var(--default-transition-time)")}}))})()})()},47114:function(e,t,i){"use strict";i.r(t);var s=i(48646),n=i(57437),o=i(2265),r=i(66648),a=i(89183),l=i(70958),d=i(47251),h=i(9818);function c(){let e=(0,s._)(["\n  background: linear-gradient(\n    90deg,\n    rgba(249, 197, 141, 1),\n    rgba(43, 43, 43, 1) 100%\n  );\n  -webkit-background-clip: text;\n  background-repeat: no-repeat;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-position: left 100%;\n  background-size: ",";\n  transition: background-size 0.7s cubic-bezier(0.7, 0, 0.3, 1);\n  line-height: normal;\n  font-style: normal !important;\n"]);return c=function(){return e},e}let u=a.ZP.em(c(),e=>e.animate?"100% 100%":"0 100%");t.default=()=>{let[e,t]=(0,o.useState)(!1),[i,s]=(0,o.useState)(!1),[a,c]=(0,o.useState)("false"),[m,f]=(0,o.useState)(!0),v=(0,o.useRef)(),p=(0,o.useRef)(),{title:g,desc:b,image1:w,image2:x,varient:y,varient2:k}=h.webData.home.colors;(0,o.useEffect)(()=>{(0,l.q9)(v.current,()=>E(!0))},[]);let E=e=>{e&&!a&&c("true"),e&&!i&&setTimeout(()=>{t(!0),s(!0),setTimeout(()=>{t(!1)},1e3)},1e3)};return(0,n.jsx)("div",{id:"shopify-section-template--15951546220625__image-comparison",className:"shopify-section",children:(0,n.jsx)("div",{className:"section section--padding",children:(0,n.jsxs)("div",{className:"page-width relative",children:[(0,n.jsx)("div",{className:"title-wrapper leading-none gap-4 lg:gap-8 flex flex-col text-center md:items-center md:justify-between relative z-1",children:(0,n.jsxs)("div",{className:"grid gap-4",children:[(0,n.jsx)("p",{className:"heading font-medium subtext-lg leading-none tracking-none",children:b}),(0,n.jsx)("h2",{className:"heading font-bold title-md",children:(0,n.jsx)(u,{ref:p,animate:a,children:g})})]})}),(0,n.jsx)("div",{ref:v,className:"page-width relative",children:(0,n.jsxs)(d.ImgComparisonSlider,{className:"imageSlider",onClick:()=>f(!1),onMouseLeave:()=>f(!0),children:[(0,n.jsxs)("figure",{slot:"first",className:"before",children:[(0,n.jsx)(r.default,{src:w,alt:"Barsys 360 - White color Cocktail Maker",width:3359,height:1326,style:{borderRadius:"25px"},loading:"lazy"}),m&&(0,n.jsx)("div",{className:"comparison__box comparison__box--end grid items-start absolute top-0 left-0 w-full h-full",children:(0,n.jsxs)("div",{className:"grid gap-1 md:gap-2",children:[(0,n.jsx)("p",{className:"text-xs md:text-base lg:text-lg text-medium leading-none",style:{color:"white"},children:"Barsys 360"}),(0,n.jsx)("p",{style:{color:"white"},className:"heading text-base md:text-2xl lg:text-3xl font-bold leading-none tracking-tight",children:y})]})})]}),(0,n.jsxs)("figure",{slot:"second",className:"after",children:[(0,n.jsx)(r.default,{src:x,alt:"Barsys 360 - Black color Cocktail Maker",width:3500,height:1382,style:{borderRadius:"25px"},loading:"lazy"}),m&&(0,n.jsx)("div",{className:"comparison__box comparison__box--end grid items-start absolute top-0 left-0 w-full h-full text-right",children:(0,n.jsxs)("div",{className:"grid gap-1 md:gap-2",children:[(0,n.jsx)("p",{className:"text-xs md:text-base lg:text-lg text-medium leading-none",style:{color:"white"},children:"Barsys 360"}),(0,n.jsx)("p",{style:{color:"white"},className:"heading text-base md:text-2xl lg:text-3xl font-bold leading-none tracking-tight",children:k})]})})]}),(0,n.jsx)("div",{className:"sliderHandle",slot:"handle",children:(0,n.jsxs)("svg",{className:"icon icon-drag icon-md",viewBox:"0 0 12 17",stroke:"currentColor",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,n.jsx)("path",{strokeLinecap:"round",strokeWidth:"1.5",d:"M1 1L0.999999 16"}),(0,n.jsx)("path",{strokeLinecap:"round",strokeWidth:"1.5",d:"M6 1L6 16"}),(0,n.jsx)("path",{strokeLinecap:"round",strokeWidth:"1.5",d:"M11 1L11 16"})]})})]})})]})})})}}}]);