{"version":3,"file":"elements-solutions.js","mappings":"yJAGAA,EAAAA,GAAKC,eAAeC,EAAAA,GAuEpBC,SAASC,iBAAiB,sBAAsBC,SAASC,IACnDC,OAAOC,WAAW,sBAAsBC,SAtElBH,KAC1B,MAAMI,EAAQJ,EAAGK,cAAc,kBACzBC,EAAmBF,EAAMC,cAAc,sBAEvCE,EADuBD,EAAiBE,wBACMC,OAC9CC,EAAkBN,EAAMC,cAAc,qBACtCM,EAAsBD,EAAgBF,wBACtCI,EAAeR,EAAMC,cAAc,kBACnCQ,EAAmBD,EAAaJ,wBAAwBC,OACxDK,EAAgBV,EAAMC,cAAc,mBACpCU,EAAoBD,EAAcN,wBAClCQ,EAAgBZ,EAAMN,iBAAiB,qBAEvCmB,EAAYb,EAAMC,cAAc,eAEtCY,EAAUC,aAAa,UAAY,SAAQP,EAAoBQ,SAASR,EAAoBF,UAE5F,MAAMW,EAAY,CAAE,IAAGT,EAAoBQ,WAG3CC,EAAUC,KAAM,OAChBD,EAAUC,KAAM,kBAChBD,EAAUC,KAAM,KAAGV,EAAoBF,OAAS,EAHtC,KAIVW,EAAUC,KACP,MAAKV,EAAoBF,OAAS,EAN3B,QAMsCE,EAAoBF,OAAS,QACzEE,EAAoBF,OAAS,KAGjCW,EAAUC,KAAM,KAAGV,EAAoBQ,MAT7B,KAWV,MAAMG,EAAWF,EAAUG,KAAK,IAEhCN,EAAUO,UAAa,YAAWF,uGAElC5B,EAAAA,GAAK+B,IAAIrB,EAAO,CAAEsB,QAAS,EAAGC,cAAe,OAAQlB,OAAQL,EAAMI,wBAAwBC,SAC3Ff,EAAAA,GAAK+B,IAAIrB,EAAMN,iBAAiB,kBAAmB,CAAE4B,QAAS,IAC9DhC,EAAAA,GAAK+B,IAAIX,EAAe,CAAEc,UAAY,GAAEb,EAAkBI,UAAWU,WAAY,IACjFnC,EAAAA,GAAK+B,IAAInB,EAAkB,CAAEG,OAAQ,EAAGiB,QAAS,IACjDhC,EAAAA,GAAK+B,IAAIf,EAAiB,CAAES,MAAON,IACnCnB,EAAAA,GAAK+B,IAAIb,EAAc,CAAEc,QAAS,IAClChC,EAAAA,GAAK+B,IAAIK,MAAMC,UAAUC,MAAMC,KAAKjB,EAAe,GAAI,CAAEU,QAAS,EAAGQ,UAAW,KAEhF,MAAMC,EAAWzC,EAAAA,GAAKyC,SAAS,CAC7BC,cAAe,CACbC,QAASrC,EACTsC,MAAOA,IAIG,OAFNC,SAASC,iBAAiB3C,SAAS4C,iBAAiBC,iBAAiB,+BAAiC,MAI1GC,MAAM,EACNC,SAAS,GAEXC,WAAYA,KACVnD,EAAAA,GAAK+B,IAAIrB,EAAO,CAAEuB,cAAe,OAAQlB,OAAQ,SACjDf,EAAAA,GAAKoD,GAAG7B,EAAUZ,cAAc,QAAS,CAAE0C,iBAAkB,EAAGC,SAAU,IAAM,IAIpFb,EAASW,GAAG1C,EAAO,CAAEsB,QAAS,EAAGsB,SAAU,KAC3Cb,EAASW,GAAGxC,EAAkB,CAAEG,OAAQF,EAAwByC,SAAU,KAC1Eb,EAASW,GAAGxC,EAAkB,CAAEoB,QAAS,EAAGsB,SAAU,IAAO,QAC7Db,EAASW,GAAG1C,EAAMN,iBAAiB,kBAAmB,CAAE4B,QAAS,EAAGsB,SAAU,IAAO,KACrFb,EAASW,GAAGpC,EAAiB,CAAES,MAAO,OAAQ6B,SAAU,KACxDb,EAASW,GAAG9B,EAAe,CAAEU,QAAS,EAAGQ,SAAU,EAAGc,SAAU,GAAKC,QAAS,IAAO,QACrFd,EAASW,GAAGlC,EAAc,CAAEc,QAAS,EAAGsB,SAAU,IAAM,EAKtDE,CAAmBlD,EACrB,G","sources":["webpack://silverstripe-base/./themes/app/src/elements/solutions.js"],"sourcesContent":["import { gsap } from \"gsap\";\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\";\n\ngsap.registerPlugin(ScrollTrigger);\n\nconst runDesktopTimeline = (el) => {\n const stage = el.querySelector(\".stage-desktop\");\n const solutionsWrapper = stage.querySelector(\".solutions-wrapper\");\n const solutionsWrapperRect = solutionsWrapper.getBoundingClientRect();\n const solutionsWrapperHeight = solutionsWrapperRect.height;\n const solutionsHolder = stage.querySelector(\".solutions-holder\");\n const solutionsHolderRect = solutionsHolder.getBoundingClientRect();\n const mainSolution = stage.querySelector(\".main-solution\");\n const mainSolutionSize = mainSolution.getBoundingClientRect().height;\n const solutionsList = stage.querySelector(\".solutions-list\");\n const solutionsListRect = solutionsList.getBoundingClientRect();\n const solutionItems = stage.querySelectorAll(\".solutions-list a\");\n\n const svgBorder = stage.querySelector(\".svg-border\");\n\n svgBorder.setAttribute(\"viewBox\", `-2 -2 ${solutionsHolderRect.width} ${solutionsHolderRect.height}`);\n\n const pathParts = [`M${solutionsHolderRect.width} 0`];\n const a = 22;\n const b = 22;\n pathParts.push(`H${b}`);\n pathParts.push(`C${a} 0 0 0 0 ${b}`);\n pathParts.push(`V${solutionsHolderRect.height - 4 - b}`);\n pathParts.push(\n `C0 ${solutionsHolderRect.height - 4 - a} 0 ${solutionsHolderRect.height - 4} ${b} ${\n solutionsHolderRect.height - 4\n }`,\n );\n pathParts.push(`H${solutionsHolderRect.width - b}`);\n\n const pathData = pathParts.join(\"\");\n\n svgBorder.innerHTML = ``;\n\n gsap.set(stage, { opacity: 0, pointerEvents: \"none\", height: stage.getBoundingClientRect().height });\n gsap.set(stage.querySelectorAll(\".solution-icon\"), { opacity: 0 });\n gsap.set(solutionsList, { flexBasis: `${solutionsListRect.width}px`, flexShrink: 0 });\n gsap.set(solutionsWrapper, { height: 0, opacity: 0 });\n gsap.set(solutionsHolder, { width: mainSolutionSize });\n gsap.set(mainSolution, { opacity: 0 });\n gsap.set(Array.prototype.slice.call(solutionItems, 1), { opacity: 0, xPercent: -10 });\n\n const timeline = gsap.timeline({\n scrollTrigger: {\n trigger: el,\n start: () => {\n const siteHeaderHeight =\n parseInt(getComputedStyle(document.documentElement).getPropertyValue(\"--site-header-stuck-height\")) + 2;\n\n return `top ${siteHeaderHeight}px`;\n },\n once: true,\n markers: false,\n },\n onComplete: () => {\n gsap.set(stage, { pointerEvents: \"auto\", height: \"auto\" });\n gsap.to(svgBorder.querySelector(\"path\"), { strokeDashoffset: 0, duration: 0.8 });\n },\n });\n\n timeline.to(stage, { opacity: 1, duration: 0.3 });\n timeline.to(solutionsWrapper, { height: solutionsWrapperHeight, duration: 0.3 });\n timeline.to(solutionsWrapper, { opacity: 1, duration: 0.3 }, \"<90%\");\n timeline.to(stage.querySelectorAll(\".solution-icon\"), { opacity: 1, duration: 0.5 }, \"<\");\n timeline.to(solutionsHolder, { width: \"100%\", duration: 0.5 });\n timeline.to(solutionItems, { opacity: 1, xPercent: 0, duration: 0.2, stagger: 0.2 }, \"<10%\");\n timeline.to(mainSolution, { opacity: 1, duration: 0.5 });\n};\n\ndocument.querySelectorAll(\".element-solutions\").forEach((el) => {\n if (window.matchMedia(\"(min-width: 768px)\").matches) {\n runDesktopTimeline(el);\n }\n});\n"],"names":["gsap","registerPlugin","ScrollTrigger","document","querySelectorAll","forEach","el","window","matchMedia","matches","stage","querySelector","solutionsWrapper","solutionsWrapperHeight","getBoundingClientRect","height","solutionsHolder","solutionsHolderRect","mainSolution","mainSolutionSize","solutionsList","solutionsListRect","solutionItems","svgBorder","setAttribute","width","pathParts","push","pathData","join","innerHTML","set","opacity","pointerEvents","flexBasis","flexShrink","Array","prototype","slice","call","xPercent","timeline","scrollTrigger","trigger","start","parseInt","getComputedStyle","documentElement","getPropertyValue","once","markers","onComplete","to","strokeDashoffset","duration","stagger","runDesktopTimeline"],"sourceRoot":""}