"use strict";(self.webpackChunk_genially_view_client=self.webpackChunk_genially_view_client||[]).push([[900],{91720:(e,t,i)=>{i.d(t,{Z:()=>d});var r=i(45992),n=i(17588),o=i(97690);const a=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 s=e=>{const[t,i]=(0,n.useState)(null),[o,s]=(0,n.useState)(void 0),[l,d]=(0,n.useState)(void 0),[c,m]=(0,n.useState)(!1),p=(0,n.useRef)(null),f=(0,n.useCallback)((e=>{p.current=e,i(e)}),[]),u=(0,n.useCallback)((i=>{if(!t||e)return;m(!0);const r=t.getBoundingClientRect(),n=(i.clientX-r.left)/r.width,o=(i.clientY-r.top)/r.height,a={coords:{x:Math.min(Math.max(n,0),1),y:Math.min(Math.max(o,0),1)}};s(a),c||d(a)}),[t,c,e]),g=(0,n.useCallback)((()=>{s(void 0),m(!1)}),[]),{innerCardStyle:h,specialFxLayerStyles:v}=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]},o="perspective(1500px)",s=n(0),l=n(1),d="cubic-bezier(0.89, -0.3, 0.18, 1.37)";i.transitions.push(`transform 400ms ${d}`),s.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(o),s.preTransforms.push(o),l.filters.push(c(.3)),i.scale+=.05;const{coords:e}=t,r=20;s.rotateX+=r*-(e.y-.5),s.rotateY+=r*(e.x-.5)}else l.filters.push(c(0));return{specialFxLayerStyles:r.filter((e=>!!e)).map((e=>Object.assign(Object.assign({},a(e)),{top:0,bottom:0,left:0,right:0,width:"100%",height:"100%"}))),innerCardStyle:Object.assign({},a(i))}}({hoveringState:!o&&c?l:o}),b=(e,t)=>0===t.length?e:(0,r.jsx)("div",{style:t[0],children:b(e,t.slice(1))});return{handleMouseEnterOrMove:u,handleMouseLeave:g,innerCardStyle:h,specialFxLayerStyles:v,setCardRef:f,wrapInsideStyledCard:b}};var l=i(11833);const d=e=>{let{title:t,frontImageSrc:i,coverImageSrc:n,flipped:o,burned:a,flipAnimated:d,onClick:c,onAnimationEnd:m}=e;const p=Boolean(a),f=Boolean(o),{handleMouseEnterOrMove:u,handleMouseLeave:g,innerCardStyle:h,setCardRef:v,specialFxLayerStyles:b,wrapInsideStyledCard:x}=s(p);return x((0,r.jsxs)(l.Ox,{onMouseMove:u,onMouseEnter:u,onMouseLeave:g,role:"button",style:p?h:{},$burned:p,$flipped:f,$flipAnimated:d,ref:v,onClick:c,onAnimationEnd:m,"aria-label":`Card showing ${f?"front":"back"} side with title: ${t}`,"aria-disabled":p,tabIndex:p?-1:0,children:[(0,r.jsx)(l.$p,{$visible:f,$imageSrc:i,"aria-roledescription":"front-card",children:t&&(0,r.jsx)(l.aW,{hidden:!f,children:(0,r.jsx)(l.hE,{children:t})})}),(0,r.jsx)(l.n$,{$visible:!f,$flipAnimated:d,$imageSrc:n,"aria-roledescription":"cover-card"})]}),b)}},11833:(e,t,i)=>{i.d(t,{$p:()=>u,Ox:()=>h,aW:()=>m,hE:()=>p,n$:()=>g,rl:()=>d});var r=i(37577);const n=(0,r.i7)({"0%":{transform:"rotateY(0)"},"100%":{transform:"rotateY(180deg)"}}),o=(0,r.i7)({"0%":{transform:"rotateY(180deg)"},"100%":{transform:"rotateY(0)"}}),a=(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}=e;return{width:"100%",height:t?"100%":0,transition:`height ${c}ms steps(1)`,backgroundImage:`url(${i})`,backgroundSize:"cover",backgroundPosition:"center",cursor:"default",[m]:{visibility:t?"initial":"hidden",transition:`visibility ${c}ms steps(1)`}}})),u=f,g=(0,r.Ay)(f)((e=>{let{$visible:t,$flipAnimated:i}=e;return i&&r.AH`
      animation-name: ${t?n:o};
      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?o:n};
      animation-duration: ${d}ms;
      animation-iteration-count: 1;
    `}),(e=>{let{$burned:t,$flipAnimated:i}=e;return t&&r.AH`
      animation-name: ${i?a:s};
      animation-duration: ${2*d}ms;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
      ${u} {
        &::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()}}),{[u]: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:()=>o});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;
`,o=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),o=i(62772),a=i(57277),s=i(17588),l=i(37577),d=i(91720),c=i(63107);const m=e=>{let{theme:t,images:i,forwardSetFlipped:n,coverImageSrc:o}=e;const[a,m]=(0,s.useState)(!1),[p,f]=(0,s.useState)(!0),u=(e=>e.map((e=>Object.assign(Object.assign({},e),{id:`${e.id}-pair`}))).reverse())(i),g=[...i,...u];(0,s.useEffect)((()=>{n(m)}),[n]),(0,s.useEffect)((()=>{f(!0)}),[a]);const h=()=>{f(!1)};return(0,r.jsx)(l.NP,{theme:t,children:(0,r.jsx)(c.V,{totalItems:g.length,children:g.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,flipped:a,flipAnimated:p,onAnimationEnd:h})},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,o=r.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)})),i.on("sidebarOpened",(e=>{let{isOpened:t}=e;l&&l(t)})),(0,a.x)({getTargetNodeItem:()=>t.item,renderApp:()=>{const{justCreatedFromSidebar:e}=i,{itemList:a,coverImage:s}=t.getConfig(),d=a.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:o.iF.themes.newPrimary,images:d,coverImageSrc:String(s.source),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:o,editor:a}=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(o.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()}))}o.on("configChange",(e=>{let{config:i,prevConfig:r}=e;const n=t(i),o=r?t(r):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.741a016f.chunk.js.map