"use strict";(self.webpackChunk_genially_view_client=self.webpackChunk_genially_view_client||[]).push([[900],{91720:(e,t,r)=>{r.d(t,{Z:()=>c});var i=r(45992),n=r(62772),o=r(17588),a=r(97690);const s=e=>({transform:`${e.preTransforms.join(" ")} scale(${e.scale}) rotateX(${e.rotateX}deg) rotateY(${e.rotateY}deg) ${(0,a.Y)(e.rotateZ)}`,transition:e.transitions.join(", "),filter:e.filters.join(" ")});const l=e=>{const[t,r]=(0,o.useState)(null),[n,a]=(0,o.useState)(void 0),[l,d]=(0,o.useState)(void 0),[c,p]=(0,o.useState)(!1),m=(0,o.useRef)(null),u=(0,o.useCallback)((e=>{m.current=e,r(e)}),[]);(0,o.useEffect)((()=>{e&&(a(void 0),d(void 0),p(!1))}),[e]);const f=(0,o.useCallback)((r=>{if(!t||e)return;p(!0);const i=t.getBoundingClientRect(),n=(r.clientX-i.left)/i.width,o=(r.clientY-i.top)/i.height,s={coords:{x:Math.min(Math.max(n,0),1),y:Math.min(Math.max(o,0),1)}};a(s),c||d(s)}),[t,c,e]),g=(0,o.useCallback)((()=>{a(void 0),p(!1)}),[]),{innerCardStyle:h,specialFxLayerStyles:b}=function(e){let{hoveringState:t}=e;const r={scale:1,rotateX:0,rotateY:0,rotateZ:0,preTransforms:[],transitions:[],filters:[]};r.rotateZ+=0;const i=[],n=e=>{var t;return null!==(t=i[e])&&void 0!==t||(i[e]={scale:1,rotateX:0,rotateY:0,rotateZ:0,preTransforms:[],transitions:[],filters:[]}),i[e]},o="perspective(1500px)",a=n(0),l=n(1),d="cubic-bezier(0.89, -0.3, 0.18, 1.37)";r.transitions.push(`transform 400ms ${d}`),a.transitions.push("transform 100ms linear"),l.transitions.push(`filter 400ms ${d}`);const c=e=>`drop-shadow(rgba(0, 15, 51, ${e}) 0px 1px 8px)`;if(t){r.preTransforms.push(o),a.preTransforms.push(o),l.filters.push(c(.3)),r.scale+=.05;const{coords:e}=t,i=20;a.rotateX+=i*-(e.y-.5),a.rotateY+=i*(e.x-.5)}else l.filters.push(c(0));return{specialFxLayerStyles:i.filter((e=>!!e)).map((e=>Object.assign(Object.assign({},s(e)),{top:0,bottom:0,left:0,right:0,width:"100%",height:"100%"}))),innerCardStyle:Object.assign({},s(r))}}({hoveringState:!n&&c?l:n}),v=(e,t)=>0===t.length?e:(0,i.jsx)("div",{style:t[0],children:v(e,t.slice(1))});return{handleMouseEnterOrMove:f,handleMouseLeave:g,innerCardStyle:h,specialFxLayerStyles:b,setCardRef:u,wrapInsideStyledCard:v}};var d=r(11833);const c=e=>{let{title:t,frontImageSrc:r,coverImageSrc:o,fitImages:a,flipped:s,burned:c,onClick:p}=e;const m=Boolean(c),u=Boolean(s),{handleMouseEnterOrMove:f,handleMouseLeave:g,innerCardStyle:h,setCardRef:b,specialFxLayerStyles:v,wrapInsideStyledCard:y}=l(u);return y((0,i.jsxs)(d.Ox,{onMouseMove:f,onMouseEnter:f,onMouseLeave:g,role:"button",style:u?h:{},$burned:m,$flipped:u,ref:b,onClick:e=>{e.stopPropagation(),p&&p()},"aria-label":`Card showing ${u?"front":"back"} side with title: ${t}`,"aria-disabled":m,tabIndex:m?-1:0,$imageSrc:r,$coverImageSrc:o,$fitImages:a,children:[(0,i.jsx)("img",{style:{opacity:u?1:0,position:"absolute",top:0,left:0,width:"100%",height:"100%",transition:`opacity ${d.uD}ms steps(1)`},src:r,alt:"front"}),(0,i.jsx)("img",{style:{opacity:u?0:1,position:"absolute",top:0,left:0,width:"100%",height:"100%",transition:`opacity ${d.uD}ms steps(1)`},src:o,alt:"cover"}),t&&(0,i.jsx)(d.aW,{hidden:!u,children:(0,i.jsx)(n.m_,{text:t,placement:n.m_.Position.TOP,fallbackPlacements:[n.m_.Position.TOP],renderReferencePortalNode:document.querySelector("body"),children:(0,i.jsx)(d.hE,{"data-testid":"card-title",children:t})})})]}),v)}},11833:(e,t,r)=>{r.d(t,{Ox:()=>l,aW:()=>a,hE:()=>s,rl:()=>n,uD:()=>o});var i=r(37577);const n=1e3,o=n/3.4,a=i.Ay.div({display:"flex",justifyContent:"center",alignItems:"center",flexShrink:0,position:"absolute",paddingLeft:"12px",paddingRight:"12px",bottom:0,left:0,userSelect:"none",minHeight:"25%",top:"75%",width:"100%",backgroundColor:"rgba(18,18,18,0.5)"}),s=i.Ay.p({color:"white",fontSize:12,textAlign:"center",fontStyle:"normal",fontWeight:400,lineHeight:"16px",overflow:"hidden",textOverflow:"ellipsis",wordWrap:"break-word",whiteSpace:"nowrap",pointerEvents:"none"}),l=i.Ay.div`
  @keyframes rotate-out {
    0% {
      transform: rotateY(180deg);
    }
    100% {
      transform: rotateY(0deg);
    }
  }

  @keyframes rotate-in {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(180deg);
    }
  }

  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    12% {
      transform: scale(1.05, 1.05);
    }
    40% {
      transform: scale(1.05, 1.05);
    }
    100% {
      transform: scale(1);
    }
  }

  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  width: 100%;
  height: 100%;

  cursor: ${e=>{let{$flipped:t,$burned:r}=e;return t||r?"default":"pointer"}};

  animation-name: ${e=>{let{$flipped:t}=e;return t?"rotate-out":"rotate-in"}}
    ${e=>{let{$burned:t}=e;return t?",pulse":""}};
  animation-duration: ${n}ms;
  animation-delay: 0ms, ${n}ms;
  animation-iteration-count: 1;
  perspective: 1500px;

  background-image: url(${e=>{let{$flipped:t,$imageSrc:r,$coverImageSrc:i}=e;return t?r:i}});
  transition: background-image ${o}ms steps(1);

  background-size: ${e=>{let{$fitImages:t}=e;return t?"contain":"cover"}};
  background-position: center;
  background-repeat: no-repeat;

  border-radius: ${e=>{let{theme:t}=e;return t.borderRadius.large}};

  /* HACK: We need to set border as important because .genially-embed is reseting our borders in the View */
  border: 1px solid
    ${e=>{let{theme:t,$flipped:r}=e;return r?t.color.border.primary.disabled():t.color.border.primary.default()}} !important;
  outline: 1px white solid;

  filter: ${e=>{let{$flipped:t}=e;return t?"":"drop-shadow(0px 1px 4px rgba(0, 15, 51, 0.2))"}};

  &:hover {
    filter: ${e=>{let{$flipped:t}=e;return t?"":"drop-shadow(rgba(0, 15, 51, 0.3) 0px 1px 8px)"}};
    border-color: ${e=>{let{theme:t,$flipped:r}=e;return r?t.color.border.primary.disabled():t.color.border.primary.hover()}} !important;
  }

  ${a} {
    visibility: ${e=>{let{$flipped:t}=e;return t?"initial":"hidden"}};
    transition: visibility ${o}ms steps(1);
    z-index: 1;
  }

  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: ${e=>{let{$burned:t}=e;return t?"0.4":"0"}};
    transition: opacity ${n}ms steps(1);
    transition-delay: ${n}ms;
    background-color: white;
    pointer-events: none;
  }
`},63107:(e,t,r)=>{r.d(t,{V:()=>n,m:()=>o});var i=r(37577);const n=i.Ay.div`
  display: grid;
  grid-template-columns: repeat(${e=>e.totalItems/2}, minmax(0, 1fr));
  grid-template-rows: repeat(2, 1fr);
  height: 100%;
  gap: 16px;
  padding: 8px;
`,o=i.Ay.canvas({width:"100%",height:"100%",pointerEvents:"none",position:"absolute",top:0,left:0,zIndex:3})},900:(e,t,r)=>{r.r(t),r.d(t,{geniallyFindThePairEditorScript:()=>u});var i=r(45992),n=r(54072),o=r(62772),a=r(57277),s=r(17588),l=r(37577),d=r(91720),c=r(63107);const p=e=>{let{theme:t,images:r,fitImages:n,forwardSetFlipped:o,coverImageSrc:a}=e;const[p,m]=(0,s.useState)(!1),u=(e=>e.map((e=>Object.assign(Object.assign({},e),{id:`${e.id}-pair`}))).reverse())(r),f=[...r,...u];return(0,s.useEffect)((()=>{o(m)}),[o]),(0,i.jsx)(l.NP,{theme:t,children:(0,i.jsx)(c.V,{totalItems:f.length,children:f.map((e=>(0,i.jsx)("div",{style:{pointerEvents:"none"},"data-testid":`card-wrapper-${e.id}`,children:(0,i.jsx)(d.Z,{title:e.title,frontImageSrc:e.src,coverImageSrc:a,fitImages:n,flipped:p})},e.id)))})})},m=e=>null!==e,u=e=>{let{script:t,editor:r}=e;const s=t.item;if(!s)return;let l;s.thumbnail="https://static.genially.com/widgets/find-the-pair-thumbnail",t.on("configChange",(e=>{let{config:t,prevConfig:r}=e;if(!r)return;const{itemList:i}=t,{itemList:n}=r,o=i.length-n.length;if(0===o)return;const a=1/n.length;let l=1;o>0&&(l=1+a),o<0&&(l=1-a);const d=s.width*l;s.setSize(d,s.height)})),r.on("sidebarOpened",(e=>{let{isOpened:t}=e;l&&l(t)})),(0,a.x)({getTargetNodeItem:()=>t.item,renderApp:()=>{const{justCreatedFromSidebar:e}=r,{itemList:a,coverImage:s,fitImages:d}=t.getConfig(),c=a.map((e=>null===e.image.source?null:{src:e.image.source,title:e.title,id:(0,n.Ak)()})).filter(m);return(0,i.jsx)(p,{theme:o.iF.themes.newPrimary,images:c,coverImageSrc:String(s.source),fitImages:d,forwardSetFlipped:t=>{e&&t(!0),l=t}})},nodePrefix:"find-the-pair"})({script:t,editor:r})}},57277:(e,t,r)=>{r.d(t,{x:()=>n});var i=r(70377);function n(e){let{getTargetNodeItem:t,renderApp:r,nodePrefix:n}=e;return e=>{let{script:o,editor:a}=e,s=null;function l(e){s&&(i.unmountComponentAtNode(s),s=null),e&&"innerHtml"in e&&(e.innerHtml='<div class="card-iframe"><div style="width: 100%; height: 100%; background: #FF0000; color: #FFFFFF;">Deleted</div><script><\/script></div>')}function d(){s&&i.render(r(),s)}function c(){const e=t(o.getConfig());if(!e)return;const r=`${n}-${e.id}`;"innerHtml"in e&&(e.innerHtml=`<div class="card-iframe"><div id="${r}" class="genially-widget-app" style="width: 100%; height: 100%;"></div></div>`),requestAnimationFrame((()=>{s="idOfFreeNode"in e?document.getElementById(e.idOfFreeNode):document.getElementById(r),d()}))}o.on("configChange",(e=>{let{config:r,prevConfig:i}=e;const n=t(r),o=i?t(i):void 0;o&&o!==n&&l(o),n&&(n!==o?c():d())})),o.on("dispose",(()=>{l(t(o.getConfig()))})),a.on("itemMount",(e=>{let{item:t}=e;t===o.item&&c()})),a.on("itemUnmount",(e=>{let{item:t}=e;t===o.item&&l()}))}}}}]);
//# sourceMappingURL=https://s3-static-genially.genially.com/view/static/js/900.11997f5d.chunk.js.map