"use strict";(self.webpackChunk_genially_view_client=self.webpackChunk_genially_view_client||[]).push([[5630],{3336:(t,e,i)=>{i.d(e,{q:()=>S});var n=i(45992),a=i(37577),r=i(23119),o=i(17588),l=i(13847);const s="4000ms",d=(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)"}}),c=(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)"}});var p=i(17442);const h="100ms",{color:g}=l.iF.themes.newPrimary,u=(t,e,i)=>Object.assign({},e===p.Rh.HORIZONTAL?{left:`${t}%`,top:i?"50%":0}:{top:`calc(100% - ${t}%)`,left:i?"50%":0}),m=a.Ay.div({position:"absolute",width:0,height:0,zIndex:1,touchAction:"none",userSelect:"none",pointerEvents:"none"}),v=a.Ay.div((t=>{let{$variant:e,$sliderValue:i,$withTransition:n,$disabled:r}=t;return a.AH`
    position: absolute;
    z-index: 1;
    ${o=e===p.Rh.HORIZONTAL,{width:o?4:"100%",height:o?"100%":4}};
    ${u(i,e,!1)};
    background-color: white;
    cursor: pointer;
    box-shadow: 0px 1px 4px 0px rgba(0, 15, 51, 0.2);
    ${n&&{transition:`all ${h}`}};
    animation-name: ${e===p.Rh.HORIZONTAL?d:c};
    animation-duration: ${s};
    animation-iteration-count: infinite;
    animation-play-state: ${r?"paused":"running"};
    animation-delay: ${s};

    ${[m]} {
      ${u(i,e,!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))"}),f=(0,a.Ay)(x)((t=>{let{$variant:e}=t;return Object.assign({left:-32,top:-16},e===p.Rh.VERTICAL&&{transform:"rotate(90deg)",top:-32,left:-16})})),$=(0,a.Ay)(x)((t=>{let{$variant:e}=t;return Object.assign({left:0,top:-16},e===p.Rh.VERTICAL&&{transform:"rotate(90deg)",top:0,left:-16})})),b=t=>{let{variant:e,sliderValue:i,withTransition:a,disabled:r}=t;return(0,n.jsx)(v,{$variant:e,$sliderValue:i,$withTransition:a,$disabled:r,children:(0,n.jsxs)(m,{$variant:e,$sliderValue:i,children:[(0,n.jsx)(f,{xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 16 16",fill:"none",$variant:e,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)($,{xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 16 16",fill:"none",$variant:e,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"})})]})})},y=a.Ay.div((t=>{let{$index:e,$isHorizontal:i,$opacity:n,$withTransition:a}=t;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===e&&i&&{left:"unset",right:0}),0===e&&!i&&{top:0,bottom:"unset"})})),w=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"},l.iF.mixins.increaseSpecificity({padding:16}))),j=a.Ay.img({width:"100%",height:"100%",objectFit:"cover"}),A=a.Ay.div({position:"relative",width:"100%"}),C=t=>{let{index:e,image:i,sliderValue:a,isHorizontal:r,withTransition:o}=t;const l=r?0===e?`${a}%`:`calc(${100-a}% - 4px)`:"100%",s=((t,e,i)=>{const n={horizontal:[0===t&&e>10,1===t&&e<90],vertical:[0===t&&e<90,1===t&&e>10]};return i?n.horizontal.some(Boolean):n.vertical.some(Boolean)})(e,a,r),d=(0,n.jsx)(y,{$index:e,style:{width:l},$isHorizontal:r,$opacity:s?1:0,$withTransition:o,children:(0,n.jsx)(w,{children:i.title})});return(0,n.jsxs)(A,{children:[(0,n.jsx)(j,{src:i.image,alt:i.altText}),i.title&&d]})},R=(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%)"}}),T=(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((t=>{let{$withTransition:e,$variant:i,$disabled:n}=t;return a.AH`
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    ${e&&{transition:`clip-path ${h}`}};

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

    & > * {
      height: 100%;
    }

    > *:not(style) + * {
      height: unset;
    }
  `})),L=t=>{let{images:e,sliderValue:i,isDragging:a,isHorizontal:r,variant:o,disabled:l}=t;const s=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,p=!a;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(O,{style:{clipPath:d,zIndex:0===c?1:0},$variant:o,$withTransition:p,children:(0,n.jsx)(C,{index:0,image:e[0],sliderValue:i,isHorizontal:r,withTransition:p})}),(0,n.jsx)(O,{style:{clipPath:s},$withTransition:p,$variant:o,$disabled:l,children:(0,n.jsx)(C,{index:1,image:e[1],sliderValue:i,isHorizontal:r,withTransition:p})})]})};var I=i(82157);const{color:P}=l.iF.themes.newPrimary,V=a.Ay.input((t=>{let{$variant:e,disabled:i}=t;return Object.assign(Object.assign({width:"100%",height:"100%",opacity:0,cursor:"col-resize"},e===p.Rh.VERTICAL&&{writingMode:"vertical-lr",direction:"rtl",verticalAlign:"bottom",cursor:"row-resize"}),i&&Object.assign({},l.iF.mixins.increaseSpecificity({cursor:"move"})))})),F=a.Ay.div((t=>{let{$variant:e,$disabled:i}=t;return Object.assign({position:"relative",height:"100%",overflow:"hidden",borderRadius:8,[V]:{position:"absolute",top:0,left:0,zIndex:I.T}},!i&&{"&:hover":{[v]:{animationPlayState:"paused"},[O]:{animationPlayState:"paused"},[x]:{fill:P.content.reversed.hover()},[f]:Object.assign({left:-37},e===p.Rh.VERTICAL&&{top:-37,left:-16}),[$]:Object.assign({left:5},e===p.Rh.VERTICAL&&{top:5,left:-16})}})})),H=a.Ay.p({position:"absolute",width:1,height:1,padding:0,margin:-1,overflow:"hidden",clip:"rect(0, 0, 0, 0)",border:0}),z=t=>{let{images:e,disabled:i=!1,defaultValue:a=50,variant:l=p.Rh.HORIZONTAL}=t;const[s,d]=(0,o.useState)(a),[c,h]=(0,o.useState)(!1),g=(0,o.useRef)(!1),u=l===p.Rh.HORIZONTAL,{t:m}=(0,o.useContext)(r.i);return(0,n.jsxs)(F,{"data-testid":"aspect-ratio-container",$disabled:i,$variant:l,role:"application","aria-describedby":"juxtapose-instructions","aria-live":"polite",children:[(0,n.jsx)("p",{id:"juxtapose-instructions",style:{display:"none"},hidden:!0,children:m("__new.shared.widget.comparison.accessibilityDescription")}),(0,n.jsx)(H,{id:"juxtapose-status","aria-live":"polite",children:m("__new.shared.widget.comparison.accesibilitySecondImage",{sliderValue:s.toString()})}),(0,n.jsx)(L,{images:e,sliderValue:s,isDragging:g.current,isHorizontal:u,variant:l,disabled:i||c}),(0,n.jsx)(b,{disabled:i||c,variant:l,sliderValue:s,withTransition:!g.current}),!i&&(0,n.jsx)(V,{$variant:l,$sliderValue:s,disabled:i,type:"range",defaultValue:s,"aria-label":m("__new.shared.widget.comparison.accesibilitySlider"),"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":s,onMouseDown:()=>{g.current=!1;const t=()=>{c||h(!0),g.current=!0};document.addEventListener("mousemove",t),document.addEventListener("mouseup",(()=>{document.removeEventListener("mousemove",t)}),{once:!0})},onChange:t=>{c||h(!0),d(t.target.valueAsNumber)}})]})},E=t=>{let{images:e,disabled:i=!1}=t;return(0,n.jsx)(z,{disabled:i,variant:p.Rh.HORIZONTAL,images:e})},N=t=>{let{images:e,disabled:i=!1}=t;return(0,n.jsx)(z,{disabled:i,variant:p.Rh.VERTICAL,images:e})},S=t=>{let{images:e,variant:i,disabled:o,theme:l,t:s}=t;const d=i===p.Rh.VERTICAL?N:E;return(0,n.jsx)(r.i.Provider,{value:{t:s},children:(0,n.jsx)(a.NP,{theme:l,children:(0,n.jsx)(d,{images:e,disabled:o})})})}},5630:(t,e,i)=>{i.r(e),i.d(e,{geniallyJuxtaposeEditorScript:()=>c});var n=i(45992),a=i(54072),r=i(57277),o=i(3336),l=i(17442);var s=i(5425);const d=t=>null!==t,c=t=>{let{script:e,editor:i}=t;const c=e.item;c&&("preserveAspectRatio"in c&&(c.preserveAspectRatio=!0),e.on("configChange",(t=>{let{config:e,prevConfig:n}=t;var a;const{variant:r}=e;n&&r!==n.variant&&(null===(a=i.trackWidgetPresetChange)||void 0===a||a.call(i,`${s.S.scriptId};${r}`),((t,e)=>{const{width:i,height:n,x:a,y:r}=t,o=t.parentSlide.size,s=o.width>=o.height,d=l.d0[e],c=s?n*d:i,p=s?n:i/d,h=a-(c-i)/2,g=r-(p-n)/2;t.setSize(c,p),t.setPosition(h,g)})(c,r));const o=l.IV[r];c.thumbnail!==o&&(c.thumbnail=o)})),(0,r.x)({getTargetNodeItem:()=>e.item,renderApp:()=>{const{slideList:t,variant:r}=e.getConfig(),l=t.map((t=>null===t.image.source?null:{image:t.image.source,title:t.title,id:(0,a.Ak)()})).filter(d);return(0,n.jsx)(o.q,{images:l,variant:r,disabled:!0,theme:i.theme,t:i.t})},nodePrefix:"juxtapose"})({script:e,editor:i}))}},57277:(t,e,i)=>{i.d(e,{x:()=>a});var n=i(70377);function a(t){let{getTargetNodeItem:e,renderApp:i,renderThumbnailApp:a,nodePrefix:r}=t;return t=>{let{script:o,editor:l}=t,s=null,d=[];function c(t){s&&(n.unmountComponentAtNode(s),s=null),t&&"innerHtml"in t&&(t.innerHtml='<div class="card-iframe"><div style="width: 100%; height: 100%; background: #FF0000; color: #FFFFFF;">Deleted</div><script><\/script></div>')}function p(){s&&n.render(i(),s)}function h(){const t=e(o.getConfig());if(!t)return;const i=`${r}-${t.id}`;"innerHtml"in t&&(t.innerHtml=`<div class="card-iframe"><div id="${i}" class="genially-widget-app" style="width: 100%; height: 100%;"></div></div>`),requestAnimationFrame((()=>{s="idOfFreeNode"in t?document.getElementById(t.idOfFreeNode)||null:document.getElementById(i)||null,p()}))}function g(){a&&d.length&&d.forEach((t=>{n.render(a(),t)}))}function u(){const t=e(o.getConfig());t&&"idOfThumbnailFreeNode"in t&&requestAnimationFrame((()=>{const e=document.getElementsByClassName(t.idOfThumbnailFreeNode);d=Array.from(e),g()}))}o.on("configChange",(t=>{let{config:i,prevConfig:n}=t;const a=e(i),r=n?e(n):void 0;r&&r!==a&&c(r),a&&(a!==r?(h(),u()):(p(),g()))})),o.on("dispose",(()=>{c(e(o.getConfig()))})),l.on("itemMount",(t=>{let{item:e}=t;e===o.item&&h()})),l.on("slideChange",(()=>{p()})),l.on("itemUnmount",(t=>{let{item:e}=t;e===o.item&&c()})),l.on("itemThumbnailMount",(t=>{let{item:e}=t;e===o.item&&u()}))}}}}]);
//# sourceMappingURL=https://s3-static-genially.genially.com/view/static/js/5630.7d3f901e.chunk.js.map