https://takeit.agency/_nuxt/AnimatedTabs.3c489241.js

1import{d as R,v as t,U as A,o as c,c as m,e as q,f as $,a as s,F as z,h as M,V as N,b as P,H as E,C as u,g as b,N as h,t as L,m as F}from"./entry.31552642.js";import{_ as H}from"./TextColumnItem.vue.9c739942.js";import{_ as U}from"./SectionHead.vue.75fe6c46.js";import{S as W}from"./ScrollToPlugin.2ab0bb77.js";import{S as f}from"./ScrollTrigger.f140b901.js";const G={class:"md:grid mx-16 lg:mx-auto md:gap-x-8 xl:gap-x-32 gap-y-8 md:grid-cols-2 lg:grid-cols-4"},J=R({__name:"TabItem",props:{blok:{type:Object,required:!0}},setup(n,{expose:a}){const p=t([]);return a({textColumnItem:p}),(v,w)=>{const o=A("editable");return c(),m("div",null,[n.blok.head&&n.blok.head[0]?(c(),q(U,{key:0,blok:n.blok.head[0],class:"mb-12 px-6 md:px-0"},null,8,["blok"])):$("",!0),s("div",null,[s("ul",G,[(c(!0),m(z,null,M(n.blok.items,(g,y)=>N((c(),m("li",{key:y,class:"mb-16 md:mb-0 tab-column md:opacity-0",ref_for:!0,ref_key:"textColumnItem",ref:p},[P(H,{blok:g,i:y},null,8,["blok","i"])])),[[o,g]])),128))])])])}}}),K={key:0,class:"flex items-center justify-center gap-2 p-2 mx-auto mb-12 rounded-md bg-background-neutral-light-04 w-fit"},Q={class:"whitespace-nowrap text-label-m-strong py-4 px-6 block z-[1]"},X={class:"whitespace-nowrap text-label-m-strong py-4 px-6 block z-[1]"},lt=R({__name:"AnimatedTabs",props:{blok:{type:Object,required:!0}},setup(n){const a=t([]),p=t(),v=t(),w=t(),o=t([]),g=t(),y=t(),k=t(!1),x=t(!1),{isMobile:_,isTablet:V}=F(),C=t(),B=t(),I=t(),T=t(),S=()=>{k.value=!0,x.value=!1},j=()=>{k.value=!1,x.value=!0},D=()=>{var i,e,l;(i=C.value)==null||i.clear(),(e=B.value)==null||e.clear(),(l=T.value)==null||l.clear(),_.value||(I.value=u.timeline({onStart:()=>{var r,d;S(),(r=f.getById("tabTrigger"))==null||r.kill(),(d=f.getById("wrapperTrigger"))==null||d.kill()}}).set(a.value[0],{opacity:0}).set(a.value[0],{y:0}).set(o.value[0].textColumnItem,{opacity:0}).set(a.value[1],{opacity:0}).set(o.value[1].textColumnItem,{opacity:0}).to(a.value[0],{opacity:1,duration:.3}).to(o.value[0].textColumnItem,{opacity:1,duration:.5}))},O=()=>{var i,e,l;(i=C.value)==null||i.clear(),(e=B.value)==null||e.clear(),(l=I.value)==null||l.clear(),_.value||(T.value=u.timeline({onStart:()=>{var r,d;j(),(r=f.getById("tabTrigger"))==null||r.kill(),(d=f.getById("wrapperTrigger"))==null||d.kill()}}).set(a.value[0],{opacity:0}).set(o.value[0].textColumnItem,{opacity:0}).set(a.value[1],{opacity:0}).set(o.value[1].textColumnItem,{opacity:0}).set(p.value,{height:V.value?600:430}).set(a.value[1],{y:0}).to(a.value[1],{opacity:1,duration:.3}).to(o.value[1].textColumnItem,{opacity:1,duration:.5}))};return E(()=>{var i,e;try{u.registerPlugin(W,f),(i=I.value)==null||i.clear(),(e=T.value)==null||e.clear(),S();const l=u.matchMedia();l.add("(min-width: 768px)",()=>{u.to(o.value[0].textColumnItem,{stagger:.1,opacity:0}),C.value=u.timeline({scrollTrigger:{id:"tabTrigger",invalidateOnRefresh:!0,trigger:v.value,start:"top bottom-=25%",once:!0}}).fromTo(a.value[0],{opacity:0,y:30},{opacity:1,y:0,duration:.3}).fromTo(o.value[0].textColumnItem,{opacity:0,y:"30%"},{stagger:.1,opacity:1,duration:.3,y:0,delay:.1})}),l.add("(max-width: 767px)",()=>{u.set(v.value,{clearProps:"all"}),u.set(p.value,{clearProps:"all"})})}catch(l){console.error("Error in AnimatedTabs.vue | onMounted: ",l)}}),(i,e)=>{const l=A("editable");return c(),m("div",{class:"container",ref_key:"container",ref:p},[s("div",{class:"relative",ref_key:"wrapper",ref:v},[b(_)?$("",!0):(c(),m("div",K,[s("button",{ref_key:"buttonLeft",ref:g,onClick:e[0]||(e[0]=r=>D()),class:h(["relative h-12 transition-all duration-300",[b(k)?"text-foreground-dark-inverted":"text-foreground-light"]])},[s("div",{class:h(["absolute top-0 left-0 w-full h-full text-foreground-dark-inverted py-4 px-6 transition-all duration-300 z-[-1]",[b(k)?"bg-background-primary translate-x-0 opacity-1":"bg-transparent translate-x-[100%] opacity-0"]])},null,2),s("span",Q,L(n.blok.tabs[0].button_title),1)],2),s("button",{ref_key:"buttonRight",ref:y,onClick:e[1]||(e[1]=r=>O()),class:h(["relative h-12 transition-all duration-300",[b(x)?"text-foreground-dark-inverted":"text-foreground-light"]])},[s("div",{class:h(["absolute top-0 left-0 w-full h-full text-foreground-dark-inverted py-4 px-6 transition-all duration-300 z-[-1]",[b(x)?"bg-foreground-storyblok-brand translate-x-0 opacity-1":"bg-transparent translate-x-[-100%] opacity-0"]])}

1,null,2),s("span",X,L(n.blok.tabs[1].button_title),1)],2)])),s("ul",{ref_key:"tabsList",ref:w,class:"grid gap-32 md:block"},[(c(!0),m(z,null,M(n.blok.tabs,(r,d)=>N((c(),m("li",{key:d,class:"md:absolute first:md:relative first:md:top-0 md:top-28 md:left-0 md:opacity-0",ref_for:!0,ref_key:"tabsRef",ref:a},[P(J,{blok:r,ref_for:!0,ref_key:"tabs",ref:o},null,8,["blok"])])),[[l,r]])),128))],512)],512)],512)}}});export{lt as default};