"use strict";(self.webpackChunk_genially_view_client=self.webpackChunk_genially_view_client||[]).push([[2991],{17841:(e,t,i)=>{i.d(t,{q:()=>F});var n=i(45992),a=i(37577),r=i(23119),o=i(17588),s=i(17442);const l=(e,t,i,n)=>{const a=e.getBoundingClientRect();if(n){const e=(t-a.left)/a.width*100;return Math.max(0,Math.min(100,e))}const r=100-(i-a.top)/a.height*100;return Math.max(0,Math.min(100,r))};var d=i(34968);const c="4000ms",u=(0,a.i7)({"0%":{transform:"translateX(0)"},"2%":{transform:"translateX(-6px) rotateY(-9deg)"},"5%":{transform:"translateX(5px) rotateY(-7deg)"},"8%":{transform:"translateX(-3px) rotateY(-5deg)"},"11%":{transform:"translateX(-2px) rotateY(-3deg)"},"13%":{transform:"translateX(0)"}}),p=(0,a.i7)({"0%":{transform:"translateY(0)"},"2%":{transform:"translateY(-6px) rotateX(-9deg)"},"5%":{transform:"translateY(5px) rotateX(-7deg)"},"8%":{transform:"translateY(-3px) rotateX(-5deg)"},"11%":{transform:"translateY(-2px) rotateX(-3deg)"},"13%":{transform:"translateY(0)"}}),h="100ms",{color:g}=d.iF.themes.newPrimary,m=(e,t,i)=>Object.assign({},t===s.Rh.HORIZONTAL?{left:`${e}%`,top:i?"50%":0}:{top:`calc(100% - ${e}%)`,left:i?"50%":0}),v=a.Ay.div({position:"absolute",width:0,height:0,zIndex:1,touchAction:"none",userSelect:"none",pointerEvents:"none"}),f=a.Ay.div((e=>{let{$variant:t,$sliderValue:i,$withTransition:n,$disabled:r}=e;return a.AH`
    position: absolute;
    z-index: 1;
    ${o=t===s.Rh.HORIZONTAL,{width:o?4:"100%",height:o?"100%":4}};
    ${m(i,t,!1)};
    background-color: white;
    cursor: pointer;
    box-shadow: 0px 1px 4px 0px rgba(0, 15, 51, 0.2);
    ${n&&{transition:`all ${h}`}};
    animation-name: ${t===s.Rh.HORIZONTAL?u:p};
    animation-duration: ${c};
    animation-iteration-count: infinite;
    animation-play-state: ${r?"paused":"running"};
    animation-delay: ${c};

    ${[v]} {
      ${m(i,t,!0)};
    }
  `;var o})),x=a.Ay.svg({position:"absolute",transform:"scale(1)",fill:g.content.reversed.default(),transition:"top 0.2s, left 0.2s",filter:"drop-shadow(0 1px 4px rgba(0, 15, 51, 0.2))"}),b=(0,a.Ay)(x)((e=>{let{$variant:t}=e;return Object.assign({left:-32,top:-16},t===s.Rh.VERTICAL&&{transform:"rotate(90deg)",top:-32,left:-16})})),w=(0,a.Ay)(x)((e=>{let{$variant:t}=e;return Object.assign({left:0,top:-16},t===s.Rh.VERTICAL&&{transform:"rotate(90deg)",top:0,left:-16})})),y=e=>{let{variant:t,sliderValue:i,withTransition:a,disabled:r}=e;return(0,n.jsx)(f,{$variant:t,$sliderValue:i,$withTransition:a,$disabled:r,children:(0,n.jsxs)(v,{$variant:t,$sliderValue:i,children:[(0,n.jsx)(b,{xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 16 16",fill:"none",$variant:t,children:(0,n.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M10.0002 14.0002C9.74425 14.0002 9.48825 13.9022 9.29325 13.7072L4.29325 8.70725C3.90225 8.31625 3.90225 7.68425 4.29325 7.29325L9.29325 2.29325C9.68425 1.90225 10.3163 1.90225 10.7073 2.29325C11.0982 2.68425 11.0982 3.31625 10.7073 3.70725L6.41425 8.00025L10.7073 12.2933C11.0982 12.6842 11.0982 13.3162 10.7073 13.7072C10.5122 13.9022 10.2562 14.0002 10.0002 14.0002Z"})}),(0,n.jsx)(w,{xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 16 16",fill:"none",$variant:t,children:(0,n.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M6.00025 2C6.25625 2 6.51225 2.098 6.70725 2.293L11.7073 7.293C12.0982 7.684 12.0982 8.316 11.7073 8.707L6.70725 13.707C6.31625 14.098 5.68425 14.098 5.29325 13.707C4.90225 13.316 4.90225 12.684 5.29325 12.293L9.58625 8L5.29325 3.707C4.90225 3.316 4.90225 2.684 5.29325 2.293C5.48825 2.098 5.74425 2 6.00025 2Z"})})]})})},$=a.Ay.div((e=>{let{$index:t,$isHorizontal:i,$opacity:n,$withTransition:a}=e;return Object.assign(Object.assign({position:"absolute",bottom:0,left:0,zIndex:111,opacity:n,transition:"opacity 0.2s"+(a?", width 0.2s":""),userSelect:"none"},1===t&&i&&{left:"unset",right:0}),0===t&&!i&&{top:0,bottom:"unset"})})),j=a.Ay.p(Object.assign({color:"white",backgroundColor:"rgba(18,18,18,0.5)",fontSize:16,lineHeight:"20px",fontWeight:"400",overflow:"hidden",textOverflow:"ellipsis",textAlign:"center",wordWrap:"break-word",whiteSpace:"nowrap",pointerEvents:"none",transform:"translate3d(0, 0, 0)",transitionProperty:"opacity, width",transitionDuration:"0.2s",transitionTimingFunction:"linear"},d.iF.mixins.increaseSpecificity({padding:16}))),T=a.Ay.img({width:"100%",height:"100%",objectFit:"cover"}),A=a.Ay.div({position:"relative",width:"100%"}),R=e=>{let{index:t,image:i,sliderValue:a,isHorizontal:r,withTransition:o}=e;const s=r?0===t?`${a}%`:`calc(${100-a}% - 4px)`:"100%",l=((e,t,i)=>{const n={horizontal:[0===e&&t>10,1===e&&t<90],vertical:[0===e&&t<90,1===e&&t>10]};return i?n.horizontal.some(Boolean):n.vertical.some(Boolean)})(t,a,r),d=(0,n.jsx)($,{$index:t,style:{width:s},$isHorizontal:r,$opacity:l?1:0,$withTransition:o,children:(0,n.jsx)(j,{children:i.title})});return(0,n.jsxs)(A,{children:[(0,n.jsx)(T,{src:i.image,alt:i.altText}),i.title&&d]})},L=(0,a.i7)({"0%":{clipPath:"polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%)"},"2%":{clipPath:"polygon(calc(50% - 6px) 0%, 100% 0%, 100% 100%, calc(50% - 6px) 100%)"},"5%":{clipPath:"polygon(calc(50% + 5px) 0%, 100% 0%, 100% 100%, calc(50% + 5px) 100%)"},"8%":{clipPath:"polygon(calc(50% - 3px) 0%, 100% 0%, 100% 100%, calc(50% - 3px) 100%)"},"11%":{clipPath:"polygon(calc(50% - 2px) 0%, 100% 0%, 100% 100%, calc(50% - 2px) 100%)"},"13%":{clipPath:"polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%)"}}),C=(0,a.i7)({"0%":{clipPath:"polygon(0% 100%, 0% 50%, 100% 50%, 100% 100%)"},"2%":{clipPath:"polygon(0% 100%, 0% calc(50% - 6px), 100% calc(50% - 6px), 100% 100%)"},"5%":{clipPath:"polygon(0% 100%, 0% calc(50% + 5px), 100% calc(50% + 5px), 100% 100%)"},"8%":{clipPath:"polygon(0% 100%, 0% calc(50% - 3px), 100% calc(50% - 3px), 100% 100%)"},"11%":{clipPath:"polygon(0% 100%, 0% calc(50% - 2px), 100% calc(50% - 2px), 100% 100%)"},"13%":{clipPath:"polygon(0% 100%, 0% 50%, 100% 50%, 100% 100%)"}}),O=a.Ay.div((e=>{let{$withTransition:t,$variant:i,$disabled:n}=e;return a.AH`
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    ${t&&{transition:`clip-path ${h}`}};

    &:nth-child(2) {
      animation-name: ${i===s.Rh.HORIZONTAL?L:C};
      animation-duration: ${n?"unset":c};
      animation-iteration-count: infinite;
      animation-play-state: ${n?"paused":"running"};
      animation-delay: ${c};
    }

    & > * {
      height: 100%;
    }

    > *:not(style) + * {
      height: unset;
    }
  `})),E=e=>{let{images:t,sliderValue:i,isDragging:a,isHorizontal:r,variant:o,disabled:s}=e;const l=r?`polygon(${i}% 0%, 100% 0%, 100% 100%, ${i}% 100%)`:`polygon(0% 100%, 0% ${100-i}%, 100% ${100-i}%, 100% 100%)`,d=r?`polygon(0% 0%, ${i}% 0%, ${i}% 100%, 0% 100%)`:`polygon(0% 0%, 0% ${100-i}%, 100% ${100-i}%, 100% 0%)`,c=i>50&&!r?0:1,u=!a;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(O,{style:{clipPath:d,zIndex:0===c?1:0},$variant:o,$withTransition:u,children:(0,n.jsx)(R,{index:0,image:t[0],sliderValue:i,isHorizontal:r,withTransition:u})}),(0,n.jsx)(O,{style:{clipPath:l},$withTransition:u,$variant:o,$disabled:s,children:(0,n.jsx)(R,{index:1,image:t[1],sliderValue:i,isHorizontal:r,withTransition:u})})]})};var I=i(82157);const{color:V}=d.iF.themes.newPrimary,P=a.Ay.input((e=>{let{$variant:t,disabled:i}=e;return Object.assign(Object.assign({width:"100%",height:"100%",opacity:0,cursor:"col-resize",touchAction:"none"},t===s.Rh.VERTICAL&&{writingMode:"vertical-lr",direction:"rtl",verticalAlign:"bottom",cursor:"row-resize"}),i&&Object.assign({},d.iF.mixins.increaseSpecificity({cursor:"move"})))})),N=a.Ay.div((e=>{let{$variant:t,$disabled:i}=e;return Object.assign({position:"relative",height:"100%",overflow:"hidden",borderRadius:8,[P]:{position:"absolute",top:0,left:0,zIndex:I.T}},!i&&{"&:hover":{[f]:{animationPlayState:"paused"},[O]:{animationPlayState:"paused"},[x]:{fill:V.content.reversed.hover()},[b]:Object.assign({left:-37},t===s.Rh.VERTICAL&&{top:-37,left:-16}),[w]:Object.assign({left:5},t===s.Rh.VERTICAL&&{top:5,left:-16})}})})),S=a.Ay.p({position:"absolute",width:1,height:1,padding:0,margin:-1,overflow:"hidden",clip:"rect(0, 0, 0, 0)",border:0}),H=e=>{let{images:t,disabled:i=!1,defaultValue:a=50,variant:d=s.Rh.HORIZONTAL}=e;const[c,u]=(0,o.useState)(a),[p,h]=(0,o.useState)(!1),g=(0,o.useRef)(!1),m=d===s.Rh.HORIZONTAL,{t:v}=(0,o.useContext)(r.i),{sliderRef:f}=(e=>{let{isHorizontal:t,disabled:i,isDragging:n,wasInteracted:a,setWasInteracted:r,setSliderValue:s}=e;const d=(0,o.useRef)(null),c=(0,o.useRef)(a);c.current=a;const u=(0,o.useCallback)((e=>{e.preventDefault(),e.stopPropagation(),n.current=!0,c.current||r(!0);const i=e.touches[0],a=l(d.current,i.clientX,i.clientY,t);s(a)}),[r,s,n,t]),p=(0,o.useCallback)((e=>{e.preventDefault(),e.stopPropagation();const i=e.touches[0],n=l(d.current,i.clientX,i.clientY,t);s(n)}),[s,t]),h=(0,o.useCallback)((()=>{n.current=!1}),[n]);return(0,o.useEffect)((()=>{const e=d.current;if(e&&!i)return e.addEventListener("touchstart",u,{passive:!1}),e.addEventListener("touchmove",p,{passive:!1}),e.addEventListener("touchend",h),()=>{e.removeEventListener("touchstart",u),e.removeEventListener("touchmove",p),e.removeEventListener("touchend",h)}}),[i,u,p,h]),{sliderRef:d}})({isHorizontal:m,disabled:i,isDragging:g,wasInteracted:p,setWasInteracted:h,setSliderValue:u});return(0,n.jsxs)(N,{"data-testid":"aspect-ratio-container",$disabled:i,$variant:d,role:"application","aria-describedby":"juxtapose-instructions","aria-live":"polite",children:[(0,n.jsx)("p",{id:"juxtapose-instructions",style:{display:"none"},hidden:!0,children:v("__new.shared.widget.comparison.accessibilityDescription")}),(0,n.jsx)(S,{id:"juxtapose-status","aria-live":"polite",children:v("__new.shared.widget.comparison.accesibilitySecondImage",{sliderValue:c.toString()})}),(0,n.jsx)(E,{images:t,sliderValue:c,isDragging:g.current,isHorizontal:m,variant:d,disabled:i||p}),(0,n.jsx)(y,{disabled:i||p,variant:d,sliderValue:c,withTransition:!g.current}),!i&&(0,n.jsx)(P,{ref:f,$variant:d,$sliderValue:c,disabled:i,type:"range",defaultValue:c,"aria-label":v("__new.shared.widget.comparison.accesibilitySlider"),"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":c,onMouseDown:()=>{g.current=!1;const e=()=>{p||h(!0),g.current=!0};document.addEventListener("mousemove",e),document.addEventListener("mouseup",(()=>{document.removeEventListener("mousemove",e)}),{once:!0})},onChange:e=>{p||h(!0),u(e.target.valueAsNumber)}})]})},z=e=>{let{images:t,disabled:i=!1}=e;return(0,n.jsx)(H,{disabled:i,variant:s.Rh.HORIZONTAL,images:t})},M=e=>{let{images:t,disabled:i=!1}=e;return(0,n.jsx)(H,{disabled:i,variant:s.Rh.VERTICAL,images:t})},F=e=>{let{images:t,variant:i,disabled:o,theme:l,t:d}=e;const c=i===s.Rh.VERTICAL?M:z;return(0,n.jsx)(r.i.Provider,{value:{t:d},children:(0,n.jsx)(a.NP,{theme:l,children:(0,n.jsx)(c,{images:t,disabled:o})})})}},42870:(e,t,i)=>{i.d(t,{M:()=>r});var n=i(45992),a=i(17841);const r=e=>{let{images:t,variant:i,theme:r,t:o}=e;return(0,n.jsx)(a.q,{images:t,variant:i,disabled:!0,theme:r,t:o})}},2991:(e,t,i)=>{i.r(t),i.d(t,{geniallyJuxtaposeViewScript:()=>d});var n=i(45992),a=i(54072),r=i(41381),o=i(17841),s=i(42870);const l=e=>null!==e,d=(e,t)=>{(0,r.p)({getTargetNodeItem:()=>e.item,initialState:void 0,renderApp:()=>{const{slideList:i,variant:r}=e.config,s=i.map((e=>null===e.image.source?null:{image:e.image.source,title:e.title,id:(0,a.Ak)(),altText:e.image.altText})).filter(l);return()=>(0,n.jsx)(o.q,{images:s,variant:r,theme:t.theme,t:t.t})},renderThumbnailApp:()=>{const{slideList:i,variant:r}=e.config,o=i.map((e=>null===e.image.source?null:{image:e.image.source,title:e.title,id:(0,a.Ak)()})).filter(l);return(0,n.jsx)(s.M,{images:o,variant:r,theme:t.theme,t:t.t})}})(e,t)}},41381:(e,t,i)=>{i.d(t,{p:()=>o});var n=i(70377),a=i(66264),r=i(60708);function o(e){let{getTargetNodeItem:t,renderApp:i,renderThumbnailApp:o,initialState:s}=e,l=!1;const d=[],c=e=>{d.push(e)};return e=>{const u=t(e.config),p=null===u||void 0===u?void 0:u.parentSlide;function h(){if(!u)return;let e=null;if("idOfFreeNode"in u)e=document.getElementById(u.idOfFreeNode);else{const t=document.createElement("div");t.innerHTML=u.source;let i=t.getElementsByClassName("genially-widget-app");i.length||(i=t.getElementsByClassName("genially-widget-gallery"));const{id:n}=i[0];if(!n)return;e=document.getElementById(n)}if(e){let t;const a=i=>{l&&t?n.render(t(i),e):console.warn('"rerender" was called when the widget was already unmounted. This is a no-op. Did you forget to dispose of an event handler with "onUnmount"?')};t=i({setState:a,onUnmount:c}),l=!0,a(s),d.push((()=>{n.unmountComponentAtNode(e)}))}}function g(){l=!1,d.forEach((e=>{e()})),d.length=0}function m(){if(!u||!("idOfThumbnailFreeNode"in u))return[];const e=document.getElementsByClassName(u.idOfThumbnailFreeNode);return Array.from(e).filter((e=>e instanceof HTMLElement))}const v=u&&"isTransversal"in u&&u.isTransversal,f=()=>{null===u||void 0===u||u.on(a.q.Mount,(()=>{h()})),null===u||void 0===u||u.on(a.q.Unmount,(()=>{g()}))};v?f():(null===p||void 0===p||p.on(r.m.Entering,(()=>{l||(h(),l||f())})),null===p||void 0===p||p.on(r.m.Exited,(()=>{l&&g()}))),null===p||void 0===p||p.on(r.m.ThumbnailMount,(()=>{!function(){if(!o||!u||!("idOfThumbnailFreeNode"in u))return;m().forEach((e=>{n.unmountComponentAtNode(e)}))}(),function(){if(!o||!u||!("idOfThumbnailFreeNode"in u))return;m().forEach((e=>{const{renderingSlideId:t}=e.dataset;n.render(o({renderingSlideId:t}),e)}))}()}))}}}}]);
//# sourceMappingURL=https://s3-static-genially.genially.com/view/static/js/2991.be6a5cd7.chunk.js.map