{"version":3,"file":"legalAreaLayout-v2.js","sources":["../../../../layouts/legalAreaLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { SIDEBAR_IDS } from '@design-system/data/sidebarIds'\n\nconst topHeader = ref<HTMLElement | null>(null)\nconst tabContainer = ref<HTMLElement | null>(null)\nconst slider = ref<HTMLElement | null>(null)\nconst { height } = useElementSize(topHeader)\nconst { currentWebsite } = useWebsite()\nconst { tabs } = await useLegalArea('legal-area-pages')\nconst error = useError()\nconst { legalSection, getCanonicalUrl } = useRouteHelper()\n\nconst { data: items } = await useMarketingStrip(\n  `${currentWebsite.value}-marketing-strips`\n)\nconst { topHeaderHeight: topHeaderHeightState } = useHeaderAndNavbarHeight()\nconst { menuStatus } = useMenu()\n\nconst { isDialogOpen: isDialogOpenMiniCart } = useDialog(\n  SIDEBAR_IDS.headerSideCart\n)\nconst { isDialogOpen: isDialogOpenLogin } = useDialog(SIDEBAR_IDS.loginSidebar)\n\nconst route = useRoute()\nconst router = useRouter().currentRoute\n\nconst currentPagePath = ref<string>('')\n\nconst messages = computed(() => items.value?.content.messages)\n\nconst pageLabel = computed(() => {\n  const currentPath = router.value.path\n  const activeTab = tabs.value?.find(tab =>\n    currentPath.endsWith(getCanonicalUrl(tab.url?.target?.target ?? ''))\n  )\n  return activeTab?.name ?? ''\n})\n\nconst updateTabSliderPosition = (index: number) => {\n  if (!tabContainer.value || !slider.value) return\n\n  const tabElements = tabContainer.value.querySelectorAll('.shortcut-element')\n  if (!tabElements[index]) return\n\n  const tab = tabElements[index] as HTMLElement\n  const container = tabContainer.value\n  const sliderElement = slider.value\n\n  // Update slider position and width\n  sliderElement.style.transform = `translateX(${tab.offsetLeft}px)`\n  sliderElement.style.width = `${tab.offsetWidth}px`\n\n  // Calculate scroll position\n  const scrollLeft = container.scrollLeft\n  const containerWidth = container.offsetWidth\n  const tabLeft = tab.offsetLeft\n  const tabWidth = tab.offsetWidth\n\n  // Scroll into view if needed\n  if (tabLeft < scrollLeft) {\n    container.scrollTo({\n      left: tabLeft,\n      behavior: 'smooth',\n    })\n  } else if (tabLeft + tabWidth > scrollLeft + containerWidth) {\n    container.scrollTo({\n      left: tabLeft + tabWidth - containerWidth,\n      behavior: 'smooth',\n    })\n  }\n}\n\nconst handleTabClick = (index: number) => {\n  updateTabSliderPosition(index)\n}\n\nwatch(\n  route,\n  () => {\n    currentPagePath.value = router.value.path\n  },\n  { immediate: true }\n)\n\nwatch(\n  height,\n  (val, oldVal) => {\n    if (val !== oldVal) {\n      topHeaderHeightState.value = val\n    }\n  },\n  { immediate: true }\n)\n\nwatch(\n  () => router.value.path,\n  () => {\n    const activeIndex = tabs.value?.findIndex(tab =>\n      router.value.path.endsWith(getCanonicalUrl(tab.url?.target?.target ?? ''))\n    )\n    if (activeIndex !== -1) {\n      nextTick(() => {\n        updateTabSliderPosition(activeIndex)\n      })\n    }\n  },\n  { immediate: true }\n)\n\nonMounted(() => {\n  const activeIndex = tabs.value?.findIndex(tab =>\n    router.value.path.endsWith(getCanonicalUrl(tab.url?.target?.target ?? ''))\n  )\n  if (activeIndex !== -1) {\n    nextTick(() => {\n      updateTabSliderPosition(activeIndex)\n    })\n  }\n})\n</script>\n\n<template>\n  <div class=\"theme-global relative\">\n    <div ref=\"topHeader\" class=\"top-header z-40 print:hidden\">\n      <HeaderStripWrapper\n        :is-hidden=\"\n          menuStatus?.isActive || isDialogOpenMiniCart || isDialogOpenLogin\n        \"\n      >\n        <MarketingStrip :messages=\"messages\" />\n      </HeaderStripWrapper>\n    </div>\n\n    <HeaderWrapperLogic>\n      <template #header=\"props\">\n        <HeaderDefault\n          v-bind=\"{\n            ...props,\n            currentBrand: 'global',\n            deferredCurrentBrand: 'global',\n            staticOnMobile: true,\n          }\"\n        />\n      </template>\n      <template #navigation=\"props\">\n        <HeaderNavigationBar v-bind=\"props\" />\n      </template>\n    </HeaderWrapperLogic>\n\n    <div class=\"h-full w-full md:mb-0\">\n      <div\n        class=\"grid-standard bg-primitives-off-white py-lg md:py-xl lg:py-4xl print:py-0\"\n      >\n        <main id=\"main\" class=\"col-span-12 md:col-span-10 md:col-start-2\">\n          <div\n            class=\"gap-md md:gap-xxl bg-primitives-off-white m-auto flex flex-col\"\n          >\n            <div\n              v-if=\"!error?.statusCode\"\n              class=\"gap-md md:gap-xxl flex flex-col\"\n            >\n              <h1 class=\"text-link-4 md:text-link-3\">\n                {{ $ts('legalArea.area') }}\n                <span v-if=\"pageLabel\" class=\"text-book-4 md:text-book-3\">\n                  / {{ pageLabel }}\n                </span>\n              </h1>\n\n              <div v-if=\"tabs?.length\" class=\"relative\">\n                <div\n                  ref=\"tabContainer\"\n                  class=\"gap-xxs md:gap-xs slider-tab scrollbar-hide scroll-smoot flex touch-pan-x overflow-x-auto\"\n                >\n                  <div class=\"gap-xxs md:gap-xs flex\">\n                    <AtomsShortcut\n                      v-for=\"(shortcut, index) in tabs\"\n                      :key=\"shortcut.name\"\n                      :link=\"legalSection(shortcut.url?.target?.target ?? '')\"\n                      size=\"M\"\n                      class=\"shortcut-element w-40 flex-shrink-0 md:w-40\"\n                      bg-color=\"white\"\n                      :underline=\"\n                        shortcut.url?.target?.target\n                          ? router.path.endsWith(\n                              getCanonicalUrl(shortcut.url?.target?.target)\n                            )\n                          : false\n                      \"\n                      :shortcut-index=\"index\"\n                      @link-click=\"handleTabClick(index)\"\n                    >\n                      <template #text>\n                        <span>\n                          {{ shortcut.name }}\n                        </span>\n                      </template>\n                    </AtomsShortcut>\n                  </div>\n                  <div\n                    ref=\"slider\"\n                    class=\"slider-tab-border bg-neutral-black absolute bottom-0 hidden h-0.5 transition-all duration-300 md:block\"\n                  />\n                </div>\n              </div>\n            </div>\n            <slot />\n          </div>\n        </main>\n      </div>\n    </div>\n\n    <div class=\"mb-[var(--navbar-height)] lg:mb-0 print:hidden\">\n      <FooterMain />\n    </div>\n    <GlobalSlides />\n  </div>\n</template>\n"],"names":["_hoisted_8","_hoisted_10","_hoisted_11","__props","__temp","__restore","topHeader","ref","tabContainer","slider","height","useElementSize","currentWebsite","useWebsite","tabs","_withAsyncContext","useLegalArea","error","legalSection","getCanonicalUrl","useRouteHelper","items","useMarketingStrip","topHeaderHeightState","useHeaderAndNavbarHeight","menuStatus","useMenu","isDialogOpenMiniCart","useDialog","SIDEBAR_IDS","isDialogOpenLogin","route","useRoute","router","useRouter","currentPagePath","messages","computed","_a","pageLabel","currentPath","activeTab","tab","_b","updateTabSliderPosition","index","tabElements","container","sliderElement","scrollLeft","containerWidth","tabLeft","tabWidth","handleTabClick","watch","val","oldVal"],"mappings":"qwHACAA,GAA4B,+CAEtB,IAAA,EACA,MAAA,UACN,EACAC,GAAmB,CACb,MAAA,wBACN,EACAC,GAAuB,CACvB,MAAA,gDAEA,SAGA,OAAM,kBACA,MAAA,MAAaC,GAAA,CAEb,IAAAC,EAAgBC,EAAyB,MACjCC,EAAAC,EAAA,IAAA,EACdC,EAAAD,EAAA,IAAA,EACME,EAAgBF,EAAA,IAAA,EAEhB,CACA,OAAAG,CAEN,EAAMC,GAAAL,CAA8B,EAE9B,CAEA,eAAAM,CACE,EAAAC,GAAA,EACA,CAA6B,KAAAC,CAEnC,GAAA,CAAAV,EAAAC,CAAA,EAAAU,EAAA,IAAAC,GAAA,kBAAA,CAAA,EAAAZ,EAAA,MAAAA,EAAAC,EAAA,EAAAD,GACAa,KAA0B,EAC3B,CAEK,aAAAC,EACJ,gBAAAC,CAEA,EAAAC,GAAoB,EAChB,CAEE,KAAAC,CACN,GAAA,CAAAjB,GAA+B,EAAAW,EAAA,IAAAO,GAAA,GAAAV,EAAA,KAAA,mBAAA,CAAA,EAAAR,EAAA,MAAAA,EAAAC,EAAA,EAAAD,GAC/B,CAGA,gBAAoBmB,CACpB,EAAAC,GAA4B,EAG5B,CACA,WAAAC,CACA,EAAAC,KACA,CAGA,aAAcC,EACZ,EAAAC,EAAUC,EAAS,cAAA,EACjB,CAAM,aACIC,EAAA,EACZF,EAACC,EAAA,YAAA,EACQE,GAAAC,GAAqB,EAC9BC,EAAmBC,GAAA,EAAA,aACjBC,GAA2B5B,EAAA,EAAA,EAC3B6B,GAAUC,EAAA,IAAA,OAAA,OAAAC,EAAAjB,EAAA,QAAA,YAAAiB,EAAA,QAAA,SAAA,EACXC,EAAAF,EAAA,IAAA,OACH,MAAAG,EAAAP,EAAA,MAAA,KACFQ,GAAAH,EAAAxB,EAAA,QAAA,YAAAwB,EAAA,KAAAI,GAAA,SAAA,OAAAF,EAAA,SAAArB,IAAAwB,GAAAL,EAAAI,EAAA,MAAA,YAAAJ,EAAA,SAAA,YAAAK,EAAA,SAAA,EAAA,CAAA,IAEM,OAAAF,GAAA,YAAAA,EAAA,OAAoC,EACxC,CAAA,EACFG,EAAAC,GAAA,CAEA,GAAA,CAAArC,EAAA,OAAA,CAAAC,EAAA,MAAA,OACE,MAAAqC,EAAAtC,EAAA,MAAA,iBAAA,mBAAA,EACA,GAAM,CAAAsC,EAAAD,CAAA,EAAA,OACY,MAAAH,EAAAI,EAAAD,GAClBE,EAAAvC,EAAA,QACkBC,EAAA,MACpBuC,EAAA,MAAA,UAAA,cAAAN,EAAA,UAAA,MAEAM,EAAA,MAAA,MAAA,GAAAN,EAAA,WAAA,KACE,MAAAO,EAAAF,EAAA,WACMG,EAAWH,EAAA,YACXI,EAAgBT,EAAA,WAClBU,EAAAV,EAAA,YACFS,EAAAF,EACFF,EAAA,SAAA,QAEF,SAAA,QAEA,CAAA,IACqBK,EAAAH,EAAAC,GACbH,EAAA,SAAA,CACE,KAAAI,EAAAC,EAA0BF,EAAU,SACjC,QAAkE,CAC3E,CAEE,EACEG,GAAAR,GAAwB,CAAWD,EACpCC,CAAA,CACH,EACF,OAAAS,EAAAvB,GAAA,IAAA,CACAI,GAAkB,MAAAF,EAAA,MAAA,IAAA,EACpB,CAEA,UAAgB,EACd,CAAM,EAAoCqB,EAAA5C,EACjC,CAAA6C,EAAAC,IAAW,CACpBD,IAAAC,IACAjC,EAAwB,MAAAgC,EAEpB,EAAA,CAAmC,UACpC,EAAA,CACH,EACFD,EAAC,IAAArB,EAAA,MAAA,KAAA,IAAA"}