"use strict";(self.webpackChunk_genially_view_client=self.webpackChunk_genially_view_client||[]).push([[900],{91720:(e,t,i)=>{i.d(t,{Z:()=>c});var r=i(45992),n=i(62772),a=i(17588),o=i(97690);const s=e=>({transform:`${e.preTransforms.join(" ")} scale(${e.scale}) rotateX(${e.rotateX}deg) rotateY(${e.rotateY}deg) ${(0,o.Y)(e.rotateZ)}`,transition:e.transitions.join(", "),filter:e.filters.join(" ")});const l=e=>{const[t,i]=(0,a.useState)(null),[n,o]=(0,a.useState)(void 0),[l,d]=(0,a.useState)(void 0),[c,m]=(0,a.useState)(!1),p=(0,a.useRef)(null),f=(0,a.useCallback)((e=>{p.current=e,i(e)}),[]),g=(0,a.useCallback)((i=>{if(!t||e)return;m(!0);const r=t.getBoundingClientRect(),n=(i.clientX-r.left)/r.width,a=(i.clientY-r.top)/r.height,s={coords:{x:Math.min(Math.max(n,0),1),y:Math.min(Math.max(a,0),1)}};o(s),c||d(s)}),[t,c,e]),u=(0,a.useCallback)((()=>{o(void 0),m(!1)}),[]),{innerCardStyle:h,specialFxLayerStyles:b}=function(e){let{hoveringState:t}=e;const i={scale:1,rotateX:0,rotateY:0,rotateZ:0,preTransforms:[],transitions:[],filters:[]};i.rotateZ+=0;const r=[],n=e=>{var t;return null!==(t=r[e])&&void 0!==t||(r[e]={scale:1,rotateX:0,rotateY:0,rotateZ:0,preTransforms:[],transitions:[],filters:[]}),r[e]},a="perspective(1500px)",o=n(0),l=n(1),d="cubic-bezier(0.89, -0.3, 0.18, 1.37)";i.transitions.push(`transform 400ms ${d}`),o.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){i.preTransforms.push(a),o.preTransforms.push(a),l.filters.push(c(.3)),i.scale+=.05;const{coords:e}=t,r=20;o.rotateX+=r*-(e.y-.5),o.rotateY+=r*(e.x-.5)}else l.filters.push(c(0));return{specialFxLayerStyles:r.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(i))}}({hoveringState:!n&&c?l:n}),v=(e,t)=>0===t.length?e:(0,r.jsx)("div",{style:t[0],children:v(e,t.slice(1))});return{handleMouseEnterOrMove:g,handleMouseLeave:u,innerCardStyle:h,specialFxLayerStyles:b,setCardRef:f,wrapInsideStyledCard:v}};var d=i(11833);const c=e=>{let{title:t,frontImageSrc:i,coverImageSrc:a,fitImages:o,flipped:s,burned:c,flipAnimated:m,onClick:p,onAnimationEnd:f}=e;const g=Boolean(c),u=Boolean(s),{handleMouseEnterOrMove:h,handleMouseLeave:b,innerCardStyle:v,setCardRef:x,specialFxLayerStyles:$,wrapInsideStyledCard:y}=l(g);return y((0,r.jsxs)(d.Ox,{onMouseMove:h,onMouseEnter:h,onMouseLeave:b,role:"button",style:g?v:{},$burned:g,$flipped:u,$flipAnimated:m,ref:x,onClick:e=>{e.stopPropagation(),p&&p()},onAnimationEnd:f,"aria-label":`Card showing ${u?"front":"back"} side with title: ${t}`,"aria-disabled":g,tabIndex:g?-1:0,children:[(0,r.jsx)(d.$p,{$visible:u,$imageSrc:i,$fitImages:o,"aria-roledescription":"front-card",children:t&&(0,r.jsx)(d.aW,{hidden:!u,children:(0,r.jsx)(n.m_,{text:t,placement:n.m_.Position.TOP,fallbackPlacements:[n.m_.Position.TOP],renderReferencePortalNode:document.querySelector("body"),children:(0,r.jsx)(d.hE,{children:t})})})}),(0,r.jsx)(d.n$,{$visible:!u,$flipAnimated:m,$imageSrc:a,$fitImages:o,"aria-roledescription":"cover-card"})]}),$)}},11833:(e,t,i)=>{i.d(t,{$p:()=>g,Ox:()=>h,aW:()=>m,hE:()=>p,n$:()=>u,rl:()=>d});var r=i(37577);const n=(0,r.i7)({"0%":{transform:"rotateY(0)"},"100%":{transform:"rotateY(180deg)"}}),a=(0,r.i7)({"0%":{transform:"rotateY(180deg)"},"100%":{transform:"rotateY(0)"}}),o=(0,r.i7)({"0%":{transform:"rotateY(180deg) scale(1)"},"50%":{transform:"rotateY(0deg) scale(1)"},"62%":{transform:"rotateY(0) scale(1.05, 1.05)"},"72%":{transform:"rotateY(0) scale(1.05, 1.05)"},"100%":{transform:"rotateY(0) scale(1)"}}),s=(0,r.i7)({"0%":{transform:"scale(1)"},"50%":{transform:"scale(1)"},"62%":{transform:"scale(1.05, 1.05)"},"72%":{transform:"scale(1.05, 1.05)"},"100%":{transform:"scale(1)"}}),l=(0,r.i7)({"0%":{opacity:0},"100%":{opacity:.4}}),d=1e3,c=d/3.4,m=r.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)"}),p=r.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"}),f=r.Ay.div((e=>{let{$visible:t,$imageSrc:i,$fitImages:r}=e;return{width:"100%",height:t?"100%":0,transition:`height ${c}ms steps(1)`,backgroundImage:`url(${i})`,backgroundSize:r?"contain":"cover",backgroundPosition:"center",backgroundRepeat:"no-repeat",cursor:"default",[m]:{visibility:t?"initial":"hidden",transition:`visibility ${c}ms steps(1)`}}})),g=f,u=(0,r.Ay)(f)((e=>{let{$visible:t,$flipAnimated:i}=e;return i&&r.AH`
      animation-name: ${t?n:a};
      animation-duration: ${d}ms;
      animation-iteration-count: 1;
    `}),{cursor:"pointer"}),h=r.Ay.div((e=>{let{$flipped:t,$flipAnimated:i}=e;return i&&r.AH`
      animation-name: ${t?a:n};
      animation-duration: ${d}ms;
      animation-iteration-count: 1;
    `}),(e=>{let{$burned:t,$flipAnimated:i}=e;return t&&r.AH`
      animation-name: ${i?o:s};
      animation-duration: ${2*d}ms;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
      ${g} {
        &::before {
          animation-name: ${l};
          animation-duration: ${2*d}ms;
          animation-timing-function: steps(1);
          animation-fill-mode: forwards;
        }
      }
    `}),(e=>{let{theme:{color:t,borderRadius:i},$burned:r}=e;return Object.assign(Object.assign({position:"relative",borderRadius:i.large,border:"1px solid",borderColor:t.border.primary.default(),overflow:"hidden",flexShrink:0,width:"100%",height:"100%",filter:"drop-shadow(0px 1px 4px rgba(0, 15, 51, 0.20))",perspective:"1500px","&:hover":{filter:"drop-shadow(rgba(0, 15, 51, 0.3) 0px 1px 8px)",borderColor:t.border.primary.hover()}},r&&{borderColor:t.border.primary.disabled(),filter:"","&:hover":{filter:"",borderColor:t.border.primary.disabled()}}),{[g]:Object.assign({},r&&{"&::before":{content:'""',position:"absolute",top:0,left:0,width:"100%",height:"100%",backgroundColor:"white",pointerEvents:"none"}})})}))},63107:(e,t,i)=>{i.d(t,{V:()=>n,m:()=>a});var r=i(37577);const n=r.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;
`,a=r.Ay.canvas({width:"100%",height:"100%",pointerEvents:"none",position:"absolute",top:0,left:0,zIndex:3})},900:(e,t,i)=>{i.r(t),i.d(t,{geniallyFindThePairEditorScript:()=>f});var r=i(45992),n=i(54072),a=i(62772),o=i(57277),s=i(17588),l=i(37577),d=i(91720),c=i(63107);const m=e=>{let{theme:t,images:i,fitImages:n,forwardSetFlipped:a,coverImageSrc:o}=e;const[m,p]=(0,s.useState)(!1),[f,g]=(0,s.useState)(!0),u=(e=>e.map((e=>Object.assign(Object.assign({},e),{id:`${e.id}-pair`}))).reverse())(i),h=[...i,...u];(0,s.useEffect)((()=>{a(p)}),[a]),(0,s.useEffect)((()=>{g(!0)}),[m]);const b=()=>{g(!1)};return(0,r.jsx)(l.NP,{theme:t,children:(0,r.jsx)(c.V,{totalItems:h.length,children:h.map((e=>(0,r.jsx)("div",{style:{pointerEvents:"none"},"data-testid":`card-wrapper-${e.id}`,children:(0,r.jsx)(d.Z,{title:e.title,frontImageSrc:e.src,coverImageSrc:o,fitImages:n,flipped:m,flipAnimated:f,onAnimationEnd:b})},e.id)))})})},p=e=>null!==e,f=e=>{let{script:t,editor:i}=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:i}=e;if(!i)return;const{itemList:r}=t,{itemList:n}=i,a=r.length-n.length;if(0===a)return;const o=1/n.length;let l=1;a>0&&(l=1+o),a<0&&(l=1-o);const d=s.width*l;s.setSize(d,s.height)})),i.on("sidebarOpened",(e=>{let{isOpened:t}=e;l&&l(t)})),(0,o.x)({getTargetNodeItem:()=>t.item,renderApp:()=>{const{justCreatedFromSidebar:e}=i,{itemList:o,coverImage:s,fitImages:d}=t.getConfig(),c=o.map((e=>null===e.image.source?null:{src:e.image.source,title:e.title,id:(0,n.Ak)()})).filter(p);return(0,r.jsx)(m,{theme:a.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:i})}},57277:(e,t,i)=>{i.d(t,{x:()=>n});var r=i(70377);function n(e){let{getTargetNodeItem:t,renderApp:i,nodePrefix:n}=e;return e=>{let{script:a,editor:o}=e,s=null;function l(e){s&&(r.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&&r.render(i(),s)}function c(){const e=t(a.getConfig());if(!e)return;const i=`${n}-${e.id}`;"innerHtml"in e&&(e.innerHtml=`<div class="card-iframe"><div id="${i}" class="genially-widget-app" style="width: 100%; height: 100%;"></div></div>`),requestAnimationFrame((()=>{s="idOfFreeNode"in e?document.getElementById(e.idOfFreeNode):document.getElementById(i),d()}))}a.on("configChange",(e=>{let{config:i,prevConfig:r}=e;const n=t(i),a=r?t(r):void 0;a&&a!==n&&l(a),n&&(n!==a?c():d())})),a.on("dispose",(()=>{l(t(a.getConfig()))})),o.on("itemMount",(e=>{let{item:t}=e;t===a.item&&c()})),o.on("itemUnmount",(e=>{let{item:t}=e;t===a.item&&l()}))}}}}]);
//# sourceMappingURL=https://s3-static-genially.genially.com/view/static/js/900.9c74e825.chunk.js.map