{"version":3,"file":"hma_oKqT.js","sources":["../../../../src/components/components/navigation/vdv/components/toggle-nav-item.vue","../../../../src/components/components/navigation/vdv/components/login.vue","../../../../src/components/components/navigation/vdv/components/toggle-nav.vue","../../../../src/components/components/navigation/vdv/components/hover-nav.vue","../../../../src/components/components/navigation/vdv/main-nav.vue","../../../../src/components/layout/header/vdv/components/header-links.vue","../../../../src/components/layout/header/vdv/header.vue","../../../../src/components/layout/footer/vdv/components/benefits.vue","../../../../src/components/layout/footer/vdv/components/newsletter-banner.vue","../../../../src/components/layout/footer/vdv/footer.vue","../../../../src/assets/images/ratingen_van_maren.jpg","../../../../src/components/components/widgets/vdv/inline-dialog.vue","../../../../src/components/components/widgets/vdv/contact-dialog.vue","../../../../src/components/components/widgets/vdv/widget-default.vue"],"sourcesContent":["<template>\n  <div\n    class=\"item\"\n    :class=\"[isParent ? '' : 'item--child', itemClass]\"\n    @click=\"itemClass.includes('nolink') ? '' : emit('itemClick')\"\n  >\n    <div class=\"itemIcon\">\n      <span v-if=\"navItem.icon && isParent && navItem.level === 0\">\n        <FaIcon :icon=\"navItem.icon\"\n      /></span>\n    </div>\n    <span\n      v-if=\"navItem.children.length > 0 && canShowChildren\"\n      class=\"flex flex-row items-center w-full flex-nowrap\"\n    >\n      <span\n        ><StyledMy\n          :key=\"userType.currCustomerTypeId\"\n          :font-size-px=\"20\"\n          :text=\"t(navItem.title)\"\n        ></StyledMy\n      ></span>\n      <FaIcon icon-class=\"fal fa-chevron-right\" classes=\"shrink-0 ml-auto \" />\n    </span>\n    <span v-else-if=\"navItem.level === 0\">\n      <span\n        ><StyledMy\n          :key=\"userType.currCustomerTypeId\"\n          :text=\"\n            navItem.id == 'myAccountTemp'\n              ? t(userType.linkText)\n              : t(navItem.title)\n          \"\n          :font-size-px=\"20\"\n        ></StyledMy\n      ></span>\n    </span>\n    <NuxtLink v-else :to=\"navItem.navUri\"\n      ><StyledMy\n        :key=\"userType.currCustomerTypeId\"\n        :font-size-px=\"20\"\n        :text=\"\n          navItem.id == MyAccountIds.MY_ACCOUNT\n            ? t(userType.linkText)\n            : t(navItem.title)\n        \"\n      ></StyledMy\n    ></NuxtLink>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { type LinkedNavItem } from '@/stores/useNav';\nimport FaIcon from '@/components/fa-icon.vue';\nimport StyledMy from '@/components/layout/header/components/styledMy/styledMy.vue';\nimport { MyAccountIds } from '~/@types/navigationIds';\nimport { useDashboardDynamicLink } from '@/composables/useDashboardDynamicLink';\nconst userType = useDashboardDynamicLink();\n\n/**\n * @CSS\n * Gets CSS via deep from parent (toggle-nav-v2)\n */\nconst props = defineProps({\n  navItem: {\n    type: Object as PropType<LinkedNavItem>,\n    required: true,\n  },\n  canShowChildren: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  isParent: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n});\n\nconst emit = defineEmits<{\n  (e: 'itemClick'): void;\n}>();\nconst { t } = useTrans();\n\nconst itemClass = getClass(props.navItem);\nfunction getClass(navItem: LinkedNavItem) {\n  if (navItem.level === 0 && navItem.slug) {\n    return 'item--level0';\n  } else if (navItem.level === 0 && (!navItem.slug || navItem.slug === '/')) {\n    return 'item--level0--nolink';\n  } else {\n    return '';\n  }\n}\n</script>\n","<template>\n  <div class=\"border-bot\">\n    <LoginStatus :full-width=\"true\" :testid=\"testid\" @click=\"$emit('close')\">\n      <div\n        v-if=\"userContext.initialized\"\n        class=\"flex flex-row px-md gap-sm py-md\"\n      >\n        <UserIcon :size=\"50\" />\n        <div data-test-id=\"userSalutation\">\n          <div>{{ t('user.loginStatus.salutation') }}</div>\n          <div class=\"font-bold\">\n            {{ userContext.userData?.name1 ?? 'error loading user data' }}\n          </div>\n        </div>\n      </div>\n    </LoginStatus>\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport { LoginStatus } from '@/complib';\nimport UserIcon from '@/components/user/userIcon/userIcon.vue';\nimport { useUserContext } from '~/stores/useUserContext';\ndefineEmits<{\n  (e: 'close'): void;\n}>();\ndefineProps({\n  testid: {\n    type: String,\n    required: false,\n    default: '',\n  },\n});\n\nconst { t } = useTrans();\nconst userContext = useUserContext();\n</script>\n<style scoped lang=\"postcss\">\n.border-bot {\n  @apply relative;\n  &::after {\n    content: '';\n    @apply border-b-[1px] absolute bottom-0 border-solid border-vdv-border-light h-[1px] ml-md w-[calc(100%-60px)];\n  }\n}\n</style>\n","<template>\n  <ClientOnly>\n    <div class=\"overflow-hidden toggleNav\">\n      <!--Background Overlay-->\n      <div\n        v-show=\"show\"\n        class=\"fixed z-40 top-0 left-0 sm:w-[100%] h-[100%] overlay overflow-hidden\"\n        @click=\"emit('close')\"\n      ></div>\n      <!--Nav-->\n      <div\n        :class=\"show ? 'w-full sm:w-[375px]' : '!-left-[25%] '\"\n        class=\"fixed z-50 top-0 left-0 transition-all h-[100%] bg-white shadow-lg flex flex-col overflow-hidden p-md md:py-xl md:px-md\"\n      >\n        <!--Nav Header-->\n        <div\n          v-if=\"state.activeNavItem !== null\"\n          class=\"absolute top-0 left-0 w-full h-full\"\n        >\n          <!--Logo-->\n          <div class=\"flex flex-row flex-nowrap\">\n            <NuxtLink to=\"/\">\n              <img\n                src=\"~/assets/images/van-der-ven-logo.svg\"\n                title=\"van der ven logo\"\n                alt=\"van der ven logo\"\n                class=\"h-[45px] w-[185px] my-3 ml-md\"\n              />\n            </NuxtLink>\n            <ButtonIcon\n              button-classes=\"Close Burger-Menu\"\n              icon=\"fas fa-xmark\"\n              classes=\"hover:cursor-pointer ml-auto my-auto mr-md shrink-0 fa-lg text-vdv-border-dark\"\n              :plain=\"true\"\n              testid=\"toggleNavMenuIcon\"\n              @click=\"emit('close')\"\n            />\n          </div>\n          <div\n            class=\"relative bottom-0 left-0 right-0 h-2 bg-activesection-alpha\"\n          />\n          <!-- login -->\n          <div v-if=\"shopIsEnabled\">\n            <Login testid=\"toggleNaviLoginButton\" @close=\"$emit('close')\" />\n          </div>\n\n          <!-- Shop & Home Nav-->\n          <div class=\"itemSection itemSection--border\">\n            <NuxtLink class=\"item item--child\" to=\"/\" @click=\"emit('close')\">\n              <div class=\"itemIcon\"></div>\n              <div>{{ t('toggleNav.startPage') }}</div>\n            </NuxtLink>\n            <NuxtLink\n              v-if=\"!shopIsEnabled\"\n              to=\"https://www.vshop.de/\"\n              class=\"item item--child\"\n              @click=\"emit('close')\"\n            >\n              <div class=\"itemIcon\">\n                <FaIcon icon-class=\"fal fa-cart-shopping\" />\n              </div>\n              <div>{{ t('toggleNav.shop') }}</div>\n            </NuxtLink>\n          </div>\n          <!-- Dynamic Navigation-->\n          <div\n            class=\"itemSection\"\n            :class=\"{\n              'itemSection--border':\n                (shopIsEnabled && session.isLoggedIn) ||\n                state.activeNavItem.level === 0,\n            }\"\n          >\n            <!-- Back Btn-->\n            <div\n              v-show=\"state.activeNavItem.level !== 0\"\n              class=\"item item--child\"\n              @click=\"setNavItemFromClick(state.activeNavItem.parent)\"\n            >\n              <div class=\"itemIcon\">\n                <FaIcon icon-class=\"fal fa-chevron-left\" />\n              </div>\n              <div>{{ t('toggleNav.back') }}</div>\n            </div>\n            <!-- MyProducts-->\n            <template v-if=\"state.activeNavItem.level === 0\">\n              <template\n                v-for=\"(navStructure, n) of extraToplevelNavMyProducts\"\n                :key=\"n\"\n              >\n                <!--Headline-->\n                <ToggleNavItem\n                  v-if=\"navStructure.headline && navStructure.navItems.length\"\n                  :key=\"navStructure.headline.id\"\n                  :nav-item=\"navStructure.headline\"\n                  :is-parent=\"true\"\n                  :class=\"{\n                    'item--active':\n                      state.activeNavItem.id ===\n                        activeNavStructure.activeItem.id &&\n                      state.activeNavItem.level !== 0,\n                  }\"\n                  @item-click=\"\n                    setNavItemFromClick(\n                      navStructure.headline,\n                      navStructure.headline.children?.length > 0,\n                    )\n                  \"\n                />\n                <!--NavItems-->\n                <template\n                  v-for=\"navItem of navStructure.navItems\"\n                  :key=\"navItem.id\"\n                >\n                  <ToggleNavItem\n                    v-show=\"showItem(navItem, state.activeNavItem.id)\"\n                    :nav-item=\"navItem\"\n                    :can-show-children=\"true\"\n                    :class=\"{\n                      'item--active':\n                        navItem.id === activeNavStructure.activeItem.id,\n                    }\"\n                    @item-click=\"\n                      setNavItemFromClick(\n                        navItem,\n                        navItem.children.length === 0,\n                      )\n                    \"\n                  />\n                </template>\n              </template>\n            </template>\n            <!-- Active Item-->\n            <ToggleNavItem\n              :key=\"state.activeNavItem.id\"\n              :nav-item=\"state.activeNavItem\"\n              :is-parent=\"true\"\n              :class=\"{\n                'item--active':\n                  state.activeNavItem.id === activeNavStructure.activeItem.id &&\n                  state.activeNavItem.level !== 0,\n              }\"\n              @item-click=\"setNavItemFromClick(state.activeNavItem, true)\"\n            />\n            <!-- Active Item Children-->\n            <ToggleNavItem\n              v-for=\"child in state.activeNavItem.children\"\n              v-show=\"showItem(child, state.activeNavItem.id)\"\n              :key=\"child.id\"\n              :nav-item=\"child\"\n              :can-show-children=\"true\"\n              :class=\"{\n                'item--active': child.id === activeNavStructure.activeItem.id,\n              }\"\n              @item-click=\"\n                setNavItemFromClick(child, child.children.length === 0)\n              \"\n            />\n            <div\n              v-if=\"state.activeNavItem.level === 0 && shopIsEnabled\"\n              class=\"h-sm\"\n            />\n            <!--MyAccount-->\n            <template v-if=\"state.activeNavItem.level === 0\">\n              <template\n                v-for=\"(navStructure, n) of extraToplevelNavMyAccount\"\n                :key=\"n\"\n              >\n                <!--Headline-->\n                <ToggleNavItem\n                  v-if=\"navStructure.headline && navStructure.navItems.length\"\n                  :key=\"navStructure.headline.id\"\n                  :nav-item=\"navStructure.headline\"\n                  :is-parent=\"true\"\n                  :class=\"{\n                    'item--active':\n                      state.activeNavItem.id ===\n                        activeNavStructure.activeItem.id &&\n                      state.activeNavItem.level !== 0,\n                  }\"\n                  @item-click=\"\n                    setNavItemFromClick(\n                      navStructure.headline,\n                      navStructure.headline.children?.length > 0,\n                    )\n                  \"\n                />\n                <!--NavItems-->\n                <template\n                  v-for=\"navItem of navStructure.navItems\"\n                  :key=\"navItem.id\"\n                >\n                  <ToggleNavItem\n                    v-show=\"showItem(navItem, state.activeNavItem.id)\"\n                    :nav-item=\"navItem\"\n                    :can-show-children=\"true\"\n                    :class=\"{\n                      'item--active':\n                        navItem.id === activeNavStructure.activeItem.id,\n                    }\"\n                    @item-click=\"\n                      setNavItemFromClick(\n                        navItem,\n                        navItem.children.length === 0,\n                      )\n                    \"\n                  />\n                </template>\n              </template>\n            </template>\n          </div>\n\n          <!-- Toggle Nav from CMS; Level 0 only-->\n          <div\n            v-show=\"state.activeNavItem.level === 0\"\n            class=\"itemSection\"\n            :class=\"{\n              'itemSection--border': shopIsEnabled && session.isLoggedIn,\n            }\"\n          >\n            <ToggleNavItem\n              v-for=\"extraItem in toggleNavItems.navItems.filter(\n                (x) => x.level !== 0,\n              )\"\n              :key=\"extraItem.id\"\n              :nav-item=\"extraItem\"\n              :can-show-children=\"false\"\n              :class=\"{\n                'item--active': extraItem.navUri === $route.path,\n              }\"\n              @item-click=\"\n                setNavItemFromClick(extraItem, extraItem.children.length === 0)\n              \"\n            />\n            <!--Social Media-->\n            <div class=\"flex flex-row item item--child item--iconRow !mt-sm\">\n              <div class=\"itemIcon\"></div>\n              <a\n                href=\"https://www.facebook.com/vanderVenDental\"\n                class=\"mr-sm\"\n                target=\"_blank\"\n                ><FaIcon\n                  classes=\"text-2xl text-vdv-border-dark\"\n                  icon-class=\"fab fa-square-facebook\"\n              /></a>\n              <a\n                href=\"https://de.linkedin.com/company/van-der-ven-dental\"\n                class=\"mr-sm\"\n                target=\"_blank\"\n              >\n                <FaIcon\n                  classes=\"text-2xl text-vdv-border-dark\"\n                  icon-class=\"fab fa-linkedin\"\n              /></a>\n              <a\n                href=\"https://www.instagram.com/vandervendental/\"\n                class=\"mr-sm\"\n                target=\"_blank\"\n              >\n                <FaIcon\n                  classes=\"text-2xl text-vdv-border-dark\"\n                  icon-class=\"fab fa-instagram-square\"\n              /></a>\n              <a\n                href=\"https://www.pinterest.de/vandervendental/\"\n                class=\"mr-sm\"\n                target=\"_blank\"\n              >\n                <FaIcon\n                  classes=\"text-2xl text-vdv-border-dark\"\n                  icon-class=\"fab fa-square-pinterest\"\n              /></a>\n            </div>\n          </div>\n          <div v-if=\"shopIsEnabled && session.isLoggedIn\" class=\"itemSection\">\n            <div\n              data-test-id=\"toggleNaviLogoutButton\"\n              class=\"item item--child\"\n              @click=\"session.logout()\"\n            >\n              <div class=\"itemIcon\">\n                <span class=\"text-minilu-border-dark\">\n                  <FaIcon icon-class=\"far arrow-right-from-bracket\" />\n                </span>\n              </div>\n              <span>\n                <span>{{ t('user.loginStatus.logout') }}</span>\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </ClientOnly>\n</template>\n<script setup lang=\"ts\">\nimport { useNav, type LinkedNavItem } from '@/stores/useNav';\nimport { storeToRefs } from 'pinia';\nimport ButtonIcon from '@/components/components/core/basicButtonIcon/basic-button-icon.vue';\nimport ToggleNavItem from './toggle-nav-item.vue';\nimport { mq_breakpointIsMobile } from '@/injectionSymbols';\nimport FaIcon from '@/components/fa-icon.vue';\nimport { showItem } from '../../utils';\nimport Login from './login.vue';\nimport { EStyleType as EStyleTypeStyledMy } from '@/components/layout/header/components/styledMy/useStyledMy';\nimport { getBgColor } from '@/components/layout/header/components/styledMy/vdv/utils';\nimport { MyAccountIds, MyProductIds } from '~/@types/navigationIds';\nimport { useSessionStore } from '~/stores/useSessionStore';\n\nconst navStore = useNav();\nconst session = useSessionStore();\nconst isMobile = inject(mq_breakpointIsMobile);\nconst shopIsEnabled = useShopEnabled();\nconst { t } = useTrans();\n\nconst {\n  mainNav_activeStructure: activeNavStructure,\n  toggleNav: toggleNavItems,\n  mainNav,\n} = storeToRefs(navStore);\n\nconst props = defineProps({\n  show: {\n    type: Boolean,\n    required: true,\n    default: false,\n  },\n});\n\nwatch(\n  () => props.show,\n  (newVal) => {\n    usePreventBodyScroll(newVal);\n  },\n);\n\nonUnmounted(() => {\n  usePreventBodyScroll(false);\n});\n\nconst state = reactive({\n  activeNavItem: null as LinkedNavItem,\n});\n\ninit();\n\nfunction setNavItemFromClick(navItem: LinkedNavItem, endOfStructure = false) {\n  if (!navItem.navUri) {\n    return;\n  } else if (endOfStructure || navItem.type === 'custom') {\n    emit('close');\n    useRouter().push(navItem.navUri);\n  } else if (!isMobile.value) {\n    useRouter().push(navItem.navUri);\n  } else {\n    state.activeNavItem = getNewActiveItem(navItem);\n  }\n\n  function getNewActiveItem(navItem: LinkedNavItem) {\n    /**\n     *  Exclude Toggle-Nav Root-Item in the search because the navigation should never show this\n     *  @TODO : Think about removing it from the toggle nav in useNav Store, if possible, or give it a unique ID?\n     */\n\n    if (\n      toggleNavItems.value.navItems.find(\n        (x) => x.id === navItem.id && x.id !== '0',\n      )\n    ) {\n      return activeNavStructure.value.activeItem;\n    } else {\n      return navItem.children.length > 0 ? navItem : navItem.parent;\n    }\n  }\n}\n\nfunction init() {\n  state.activeNavItem =\n    activeNavStructure.value.activeItem.children.length > 0\n      ? activeNavStructure.value.activeItem\n      : activeNavStructure.value.activeItem.parent;\n}\n\nwatch(activeNavStructure, async () => {\n  init();\n});\n\n/**\n * @workaround - fastest way to seperate myProducts and myAccount\n * */\nconst extraToplevelNavMyProducts = computed(() => {\n  const topLevelNavMap: {\n    headline: LinkedNavItem;\n    navItems: LinkedNavItem[];\n  }[] = [];\n\n  const myProduct = mainNav.value.navItems.filter(\n    (x) => x.level === 1 && x.id === MyProductIds.MY_PRODUCTS,\n  )[0];\n  if (myProduct) {\n    topLevelNavMap.push({\n      headline: getHeadlineItem(\n        'myProductTemp',\n        'navigation.myProducts.myProducts',\n        '/productlists',\n      ),\n      navItems: myProduct.children ?? [],\n    });\n  }\n\n  return topLevelNavMap;\n\n  function getHeadlineItem(\n    id: string,\n    title: string,\n    slug: string,\n    icon?: { label: string; iconSet: string },\n  ): LinkedNavItem {\n    return {\n      type: 'custom',\n      id: id,\n      title: title,\n      description: null,\n      url: slug,\n      uri: slug,\n      slug: slug,\n      navUri: slug,\n      ad: null,\n      openInNewWindow: false,\n      level: 0,\n      areaId: null,\n      icon: icon ?? null,\n      parentId: null,\n      childIds: [],\n      isHidden: false,\n      isShopItem: true,\n      parent: null,\n      children: [],\n      neighbours: [],\n    };\n  }\n});\n\n/**\n * @Info myAccount Links sollen unterhalb der Services stehen, daher müssen die Bereiche getrennt werden\n */\nconst extraToplevelNavMyAccount = computed(() => {\n  const topLevelNavMap: {\n    headline: LinkedNavItem;\n    navItems: LinkedNavItem[];\n  }[] = [];\n\n  const myAccount = mainNav.value.navItems.filter(\n    (x) => x.level === 1 && x.id === MyAccountIds.MY_ACCOUNT,\n  )[0];\n  if (myAccount) {\n    topLevelNavMap.push({\n      headline: getHeadlineItem(\n        'myAccountTemp',\n        'navigation.myAccount.myAccount',\n        '/account',\n        {\n          label: myAccount.icon.label,\n          iconSet: myAccount.icon.iconSet,\n        },\n      ),\n      navItems: myAccount.children ?? [],\n    });\n  }\n\n  return topLevelNavMap;\n\n  function getHeadlineItem(\n    id: string,\n    title: string,\n    slug: string,\n    icon: { label: string; iconSet: string },\n  ): LinkedNavItem {\n    return {\n      type: 'custom',\n      id: id,\n      title: title,\n      description: null,\n      url: slug,\n      uri: slug,\n      slug: slug,\n      navUri: slug,\n      ad: null,\n      openInNewWindow: false,\n      level: 0,\n      areaId: null,\n      icon: icon,\n      parentId: null,\n      childIds: [],\n      isHidden: false,\n      isShopItem: true,\n      parent: null,\n      children: [],\n      neighbours: [],\n    };\n  }\n});\n\nconst emit = defineEmits<{\n  (e: 'close'): void;\n}>();\n\nconst myDecoColorDefault = getBgColor(EStyleTypeStyledMy.default);\nconst myDecoColorLight = getBgColor(EStyleTypeStyledMy.light);\nconst myDecoColorLightAlt = getBgColor(EStyleTypeStyledMy.lightAlt);\n</script>\n\n<style scoped lang=\"postcss\">\n.toggleNav:deep(> *) {\n  @apply z-[640] overflow-auto overscroll-contain;\n  .item {\n    @apply flex flex-row cursor-pointer flex-nowrap text-md font-bold py-xs px-md hover:!bg-vdv-alpha hover:!text-vdv-font items-center;\n    & #styledMy {\n      @apply !fill-[v-bind('myDecoColorDefault')];\n    }\n    &:hover {\n      & #styledMy {\n        @apply !fill-[v-bind('myDecoColorLightAlt')];\n      }\n    }\n\n    &--child {\n      @apply font-normal;\n    }\n    &--iconRow {\n      @apply hover:!bg-transparent cursor-default;\n    }\n    &--level0 {\n      @apply text-vdv-font !text-lg;\n      &:hover {\n        & #styledMy {\n          @apply !fill-[v-bind('myDecoColorLightAlt')];\n        }\n      }\n    }\n    &--level0--nolink {\n      @apply !cursor-default hover:!bg-white text-vdv-font !text-lg;\n    }\n    &--active {\n      @apply bg-vdv-base text-white;\n\n      & #styledMy {\n        @apply !fill-[v-bind('myDecoColorLight')];\n      }\n\n      &:hover {\n        & #styledMy {\n          @apply !fill-[v-bind('myDecoColorLightAlt')];\n        }\n        & .itemIcon {\n          @apply !text-vdv-font;\n        }\n      }\n\n      & .itemIcon {\n        @apply !text-white;\n      }\n    }\n  }\n\n  .itemIcon {\n    @apply w-md mr-2xs shrink-0 text-vdv-border-dark;\n  }\n\n  .itemSection {\n    @apply py-sm relative overflow-hidden;\n    &--border {\n      &::after {\n        content: '';\n        @apply border-b-[1px] absolute bottom-0 border-solid border-vdv-border-light h-[1px] ml-md w-[calc(100%-60px)];\n      }\n    }\n  }\n}\n.overlay {\n  background: transparent linear-gradient(180deg, #000000 0%, #346d7300 100%) 0%\n    0%;\n  opacity: 0.2;\n}\n</style>\n","<template>\n  <!--If level 0-->\n  <Transition\n    v-if=\"state.navItems.length > 0 && state.show && showBigNav\"\n    name=\"fade\"\n    @mouseover=\"emit('hover')\"\n  >\n    <div\n      id=\"hovermenu\"\n      class=\"flex-row hoverNav\"\n      :style=\"\n        showBigNav\n          ? 'left:0px; padding-bottom:45px;'\n          : `left:${state.x_pos}px; width:${state.width}px; height:auto; padding-bottom:15px;`\n      \"\n      @click=\"emit('close')\"\n    >\n      <div\n        class=\"flex flex-row w-full max-w-screen-xl mx-auto item-start flex-nowrap\"\n      >\n        <div\n          class=\"flex flex-col flex-nowrap content-start h-[370px]\"\n          :class=\"state.hoveredItem.ad ? 'w-[500px]' : 'w-full'\"\n        >\n          <!-- Nav Item Overview Link; Only if Level 0-->\n          <NuxtLink\n            :to=\"navParent.navUri\"\n            class=\"w-full max-w-[500px] font-bold item\"\n            @click=\"emit('linkClick')\"\n          >\n            <span v-if=\"navParent.icon\" :key=\"navParent.id\" class=\"mr-xs\">\n              <FaIcon :icon=\"navParent.icon\" classes=\"fa-fw\" /></span\n            ><span\n              >{{ t('toggleNav.overview') }}\n              {{ t(state.navItems[0]?.parent.title) }}</span\n            >\n          </NuxtLink>\n          <div\n            class=\"border-b-[1px] max-w-[500px] bottom-0 border-solid border-vdv-border-light h-[1px] w-full ml-xs mt-xs mb-sm\"\n          ></div>\n          <div class=\"w-[450px] h-[100%] flex flex-col flex-wrap\">\n            <!-- Nav Items-->\n            <div v-for=\"navitem of state.navItems\" :key=\"navitem.id\">\n              <NuxtLink\n                class=\"item\"\n                :to=\"navitem.navUri\"\n                :data-test-id=\"generateTestIdFromUrl(navitem.navUri)\"\n                :class=\"{\n                  'bg-vdv-base text-white': navitem === state.hoveredItem,\n                  'font-bold w-[210px]': navitem.children.length,\n                  'font-bold mb-sm w-[210px]': !navitem.children.length,\n                }\"\n                @click=\"emit('linkClick')\"\n              >\n                {{ t(navitem.title) }}\n              </NuxtLink>\n              <NuxtLink\n                v-for=\"child of getChildrenOfNavItem(navitem)\"\n                :key=\"child.id\"\n                class=\"item font-normal w-[210px] last:mb-sm !py-[8px] leading-[22px]\"\n                :to=\"child.navUri\"\n                :data-test-id=\"generateTestIdFromUrl(child.navUri)\"\n                @click=\"emit('linkClick')\"\n              >\n                <span>{{ t(child.title) }}</span>\n              </NuxtLink>\n\n              <div\n                v-if=\"\n                  navitem.children.length > maxChildItems && navitem.isShopItem\n                \"\n                class=\"w-[210px] text-md text-vdv-base my-xs pl-xs\"\n              >\n                <NuxtLink\n                  :to=\"navitem.navUri\"\n                  :data-test-id=\"generateTestIdFromUrl(navitem.navUri)\"\n                  target=\"_self\"\n                  class=\"hover:underline vdv-anim-link\"\n                >\n                  <span v-if=\"navitem.showAllBtnText\">{{\n                    t(navitem.showAllBtnText)\n                  }}</span\n                  ><span v-else>{{\n                    t('header.navigation.showMoreCategories', {\n                      category: t(navitem.title),\n                    })\n                  }}</span\n                  ><span class=\"whitespace-nowrap\"\n                    >&nbsp;<FaIcon icon-class=\"fas fa-chevron-right\" />\n                  </span>\n                </NuxtLink>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          v-show=\"state.hoveredItem.ad\"\n          class=\"w-full h-full ml-md py-md mt-[20px]\"\n        >\n          <template v-if=\"assignedBanners.length\">\n            <div v-if=\"assignedBanners[0]\" :key=\"assignedBanners[0]?.banner.id\">\n              <Banner\n                :key=\"assignedBanners[0].banner.id\"\n                :banner-data=\"assignedBanners[0].banner\"\n              />\n            </div>\n          </template>\n          <template v-else>\n            <NuxtLink\n              v-if=\"state.hoveredItem.ad && state.hoveredItem.ad.link\"\n              :to=\"state.hoveredItem.ad.link\"\n              class=\"h-full\"\n            >\n              <ImageBasic\n                :image-data=\"state.hoveredItem.ad.image\"\n                classes=\"max-h-full\"\n              ></ImageBasic>\n            </NuxtLink>\n            <div v-else-if=\"state.hoveredItem.ad\" class=\"h-full\">\n              <ImageBasic\n                :image-data=\"state.hoveredItem.ad.image\"\n                classes=\"max-h-full\"\n              ></ImageBasic>\n            </div>\n          </template>\n        </div>\n      </div>\n    </div>\n  </Transition>\n  <!--If Not level 0-->\n  <Transition\n    v-else-if=\"state.navItems.length > 0 && state.show && !state.isLevel_0\"\n    name=\"fade\"\n    @mouseover=\"emit('hover')\"\n  >\n    <div\n      id=\"hovermenu\"\n      class=\"flex-col hoverNav flex-nowrap\"\n      :style=\"`left:${state.x_pos}px; width:${state.width}px; height:auto; padding-bottom:15px;`\"\n      @click=\"emit('close')\"\n    >\n      <div v-for=\"navitem of state.navItems\" :key=\"navitem.id\">\n        <NuxtLink\n          class=\"item\"\n          :to=\"navitem.navUri\"\n          :class=\"{\n            'bg-vdv-base text-white': navitem === state.hoveredItem,\n            'font-bold w-[210px]': state.isLevel_0 && navitem.children.length,\n            'font-bold mb-sm w-[210px]':\n              state.isLevel_0 && !navitem.children.length,\n          }\"\n          @click=\"emit('linkClick')\"\n        >\n          {{\n            navitem.id == 'myAccount' ? t(userType.linkText) : t(navitem.title)\n          }}\n        </NuxtLink>\n      </div>\n    </div>\n  </Transition>\n</template>\n\n<script setup lang=\"ts\">\nimport { type LinkedNavItem } from '@/stores/useNav';\nimport ImageBasic from '@/components/components/core/basicImage/image-basic.vue';\nimport FaIcon from '@/components/fa-icon.vue';\nimport { useDashboardDynamicLink } from '@/composables/useDashboardDynamicLink';\nimport { useBannerStore } from '~/stores/useBannerStore';\nimport { BannerPositions } from '~/@types/bannerPositions';\nimport { resolveBannerAssignment } from '~/composables/banner/resolver/resolveAssignment';\nimport { useSessionStore } from '~/stores/useSessionStore';\nimport Banner from '@/components/banner/banner.vue';\n\nconst userType = useDashboardDynamicLink();\n\nconst props = defineProps({\n  state: {\n    type: Object as PropType<{\n      isHovered: boolean;\n      show: boolean;\n      hoveredItem: LinkedNavItem;\n      navItems: LinkedNavItem[];\n      isLevel_0: boolean;\n      x_pos: number;\n      width: number;\n    }>,\n    required: true,\n  },\n});\n\nconst maxChildItems = 6;\n\nfunction generateTestIdFromUrl(url: string) {\n  if (url[0] === '/') {\n    url = url.slice(1, url.length);\n  }\n  if (url.includes('/')) {\n    const urlParts1 = url.split('/').map((part) => {\n      const part11 = part[0].toUpperCase() + part.substring(1, part.length);\n      return part11;\n    });\n    url = urlParts1.join('');\n  }\n  if (url.includes('-')) {\n    const urlParts = url.split('-').map((part) => {\n      const part1 = part[0].toUpperCase() + part.substring(1, part.length);\n      return part1;\n    });\n    url = urlParts.join('');\n  }\n  return `navItem${url}`;\n}\n\nconst emit = defineEmits<{\n  (e: 'hover'): void;\n  (e: 'linkClick'): void;\n  (e: 'close'): void;\n}>();\n\n//const navStore = useNav();\nconst bannerStore = useBannerStore();\n\nconst navParent = computed(() => {\n  return props.state.navItems.length > 0\n    ? props.state.navItems[0]?.parent\n    : null;\n});\n\nconst showBigNav = computed(() => {\n  return true;\n  /**\n   * @INFO workaround for showing only the toplevel navItems\n   */\n  //return (\n  //  props.state.isLevel_0 ||\n  //  (navStore.mainNav.activeItem.children.length === 0 &&\n  //    navStore.mainNav.activeItem.parent.level === 0)\n  //);\n});\n\nfunction getChildrenOfNavItem(navitem: LinkedNavItem) {\n  if (navitem.children.length > maxChildItems && navitem.isShopItem) {\n    return navitem.children.slice(0, maxChildItems);\n  }\n\n  return navitem.children;\n}\n\nconst assignments = await bannerStore.getBannerAssignments(\n  BannerPositions.NAV_FLYOUT,\n);\n\nconst assignedBanners = computed(() => {\n  const uri = props.state.hoveredItem.navUri.replace('/', '');\n  return resolveBannerAssignment(assignments, BannerPositions.NAV_FLYOUT, {\n    uri: uri ? uri : 'startseite',\n    isLoggedIn: useSessionStore().isLoggedIn,\n  });\n});\n\nconst { t } = useTrans();\n</script>\n<style scoped lang=\"postcss\">\n.hoverNav {\n  @apply absolute overflow-hidden flex h-[480px] pt-sm pb-lg top-[60px] min-w-[250px] left-0 w-[100%] bg-white z-[530] shadow-lg opacity-100;\n  box-shadow: 0px 8px 10px 0px rgb(0, 0, 0, 0.1);\n}\n.item {\n  @apply flex py-xs p-xs hover:bg-vdv-alpha hover:text-vdv-font transition-colors;\n}\n\n.fade-enter-active,\n.fade-leave-active {\n  @apply duration-200 opacity-100;\n  transition-property: color, background-color, opacity, height;\n}\n\n.fade-enter-from,\n.fade-leave-to {\n  transition-property: color, background-color, height;\n  @apply transition-none h-0 py-0 opacity-0;\n}\n</style>\n","<template>\n  <div\n    data-test-id=\"nav\"\n    class=\"relative w-full h-[60px] bg-vdv-light print:hidden\"\n    @mouseleave=\"hoverMenuUnhover()\"\n  >\n    <div\n      class=\"relative w-full h-[60px] flex flex-row flex-nowrap bg-vdv-light pl-sm max-w-screen-2xl mx-auto\"\n    >\n      <div\n        class=\"flex flex-row items-center w-full md:w-[120px] xl:w-[180px] justify-between\"\n      >\n        <div\n          class=\"flex flex-row items-center w-auto font-bold cursor-pointer ml-xs md:ml-sm flex-nowrap\"\n          data-test-id=\"menuToggleButton\"\n          @click=\"toggleMenuClick()\"\n        >\n          <FaIcon icon-class=\"fas fa-bars\" classes=\"mr-2\" />\n          {{ t('header.menuToggleButton') }}\n        </div>\n        <div class=\"visible md:hidden\" :class=\"{ grow: shopIsEnabled }\">\n          <LinkBasic\n            v-if=\"!shopIsEnabled\"\n            :label=\"t('header.vShopLink')\"\n            :link=\"config.vShopUrl\"\n            target=\"_blank\"\n            icon=\"far fa-chevron-right\"\n            icon-position=\"right\"\n            classes=\"text-vdv-base font-semibold mr-md right-0 ml-auto\"\n          />\n\n          <div v-if=\"shopIsEnabled\" class=\"px-sm\">\n            <SearchbarMobile />\n          </div>\n        </div>\n      </div>\n\n      <div\n        v-if=\"!isMobileScreen\"\n        :key=\"activeNavStructureComputed.activeItem?.id\"\n        class=\"relative flex flex-row overflow-hidden\"\n      >\n        <HorizontalScroll\n          :key=\"activeNavStructureComputed.activeItem.id\"\n          arrow-class=\"bg-vdv-base\"\n        >\n          <template v-for=\"link in mainNavLinks\" :key=\"link.navItem.id\">\n            <NuxtLink\n              v-if=\"!link.noLink\"\n              :data-test-id=\"generateTestIdFromUrl(link.navItem.navUri)\"\n              :to=\"link.navItem.navUri\"\n              :target=\"link.navItem.openInNewWindow ? '_blank' : '_self'\"\n              :class=\"[\n                link.cssClass,\n                link.navItem === state.hoverNav.hoveredItem\n                  ? '!bg-white !text-vdv-font after:!border-white'\n                  : '',\n                {\n                  'item--active':\n                    activeNavStructureComputed.activeNavItem?.id ===\n                      link.navItem?.id ||\n                    activeNavStructureFromStore.activeItem?.id ===\n                      link.navItem?.id,\n                },\n              ]\"\n              class=\"snap-end\"\n              @mouseenter=\"mouseEnter($event, link)\"\n              @mouseleave=\"mouseLeave\"\n              @click=\"navItemUnhover\"\n            >\n              <span @mouseover.stop>\n                <StyledMy\n                  :key=\"userType.currCustomerTypeId\"\n                  :text=\"\n                    link.navItem.id == MyAccountIds.MY_ACCOUNT\n                      ? t(userType.linkText)\n                      : t(link.navItem.title)\n                  \"\n                  :font-size-px=\"20\"\n                  :style-type=\"\n                    getMyNavStyle(\n                      link.cssClass,\n                      link.navItem.id === state.hoverNav.hoveredItem?.id,\n                    )\n                  \"\n                />\n              </span>\n              <span v-if=\"linkShowsDropdownIcon(link.cssClass)\" @mouseover.stop>\n                <span\n                  v-show=\"link.navItem.id === state.hoverNav.hoveredItem?.id\"\n                >\n                  <FaIcon\n                    icon-class=\"far fa-chevron-up\"\n                    classes=\"text-sm ml-xs\"\n                  />\n                </span>\n                <span\n                  v-show=\"link.navItem.id !== state.hoverNav.hoveredItem?.id\"\n                >\n                  <FaIcon\n                    icon-class=\"far fa-chevron-down\"\n                    classes=\"text-sm ml-xs\"\n                  />\n                </span>\n              </span>\n            </NuxtLink>\n            <div\n              v-else\n              :class=\"[\n                link.cssClass,\n                link.navItem === state.hoverNav.hoveredItem\n                  ? '!bg-white !text-vdv-font after:!border-white'\n                  : '',\n                'snap-end',\n                'js-nav-item',\n              ]\"\n              :data-test-id=\"generateTestIdFromUrl(link.navItem.navUri)\"\n              @click=\"touchClick($event, link)\"\n            >\n              <span>{{ t(link.navItem.title) }}</span>\n              <span v-if=\"linkShowsDropdownIcon(link.cssClass)\">\n                <span\n                  v-show=\"link.navItem.id === state.hoverNav.hoveredItem?.id\"\n                >\n                  <FaIcon\n                    icon-class=\"far fa-chevron-up\"\n                    classes=\"text-sm ml-xs\"\n                  />\n                </span>\n                <span\n                  v-show=\"link.navItem.id !== state.hoverNav.hoveredItem?.id\"\n                >\n                  <FaIcon\n                    icon-class=\"far fa-chevron-down\"\n                    classes=\"text-sm ml-xs\"\n                  />\n                </span>\n              </span>\n            </div>\n          </template>\n        </HorizontalScroll>\n      </div>\n    </div>\n    <ToggleNavV2\n      :show=\"state.toggleNav.show\"\n      @close=\"toggleMenuClick()\"\n    ></ToggleNavV2>\n    <HoverNavV2\n      :state=\"state.hoverNav\"\n      @hover=\"hoverMenuHover()\"\n      @link-click=\"hoverMenuUnhover()\"\n      @close=\"hoverMenuUnhover()\"\n    ></HoverNavV2>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useNav } from '@/stores/useNav';\nimport { storeToRefs } from 'pinia';\n\nimport ToggleNavV2 from './components/toggle-nav.vue';\nimport HoverNavV2 from './components/hover-nav.vue';\nimport HorizontalScroll from '@/components/helper/horizontal-scroll.vue';\nimport LinkBasic from '@/components/components/core/basicLink/basic-link.vue';\nimport StyledMy from '@/components/layout/header/components/styledMy/styledMy.vue';\nimport SearchbarMobile from '@/components/layout/header/components/searchbar/searchbarMobile.vue';\nimport config from '@/mixins/configProvider';\nimport { mq_breakpointIsMobile } from '@/injectionSymbols';\nimport useMainMavState from '../composables/useMainNavState';\nimport FaIcon from '@/components/fa-icon.vue';\nimport { MyAccountIds } from '~/@types/navigationIds';\nimport { generateTestIdFromUrl } from '@/helpers/e2eTestes';\n\nimport { useDashboardDynamicLink } from '@/composables/useDashboardDynamicLink';\nconst userType = useDashboardDynamicLink();\n\nconst {\n  state,\n  touchClick,\n  mainNavLinks,\n  mouseEnter,\n  mouseLeave,\n  navItemUnhover,\n  linkShowsDropdownIcon,\n  toggleMenuClick,\n  hoverMenuHover,\n  hoverMenuUnhover,\n  getMyNavStyle,\n  activeNavStructureComputed,\n} = useMainMavState();\nconst { t } = useTrans();\nconst isMobileScreen = inject(mq_breakpointIsMobile);\nconst shopIsEnabled = useShopEnabled();\n\nconst navStore = useNav();\nconst { mainNav_activeStructure: activeNavStructureFromStore } =\n  storeToRefs(navStore);\n</script>\n<style scoped lang=\"postcss\">\n.item {\n  @apply h-[60px] px-[20px] text-lg relative hover:bg-white hover:text-vdv-font flex flex-row items-center flex-nowrap whitespace-nowrap;\n  &--parent {\n    @apply breadcrumb-arrow pr-[20px];\n    & + * {\n      @apply pl-[30px];\n    }\n    &:hover {\n      @apply breadcrumb-arrow--hover;\n    }\n  }\n  &--activeParent {\n    @apply breadcrumb-arrow breadcrumb-arrow--active bg-vdv-base text-white;\n    &:hover {\n      @apply breadcrumb-arrow--hover;\n    }\n    & + * {\n      @apply pl-md;\n    }\n  }\n  &--active {\n    @apply bg-vdv-base text-white;\n  }\n  &--hidden {\n    @apply hidden;\n  }\n}\n\n.breadcrumb-arrow {\n  &::after {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    margin-left: 30px;\n    bottom: -38px;\n    right: -32px;\n    box-sizing: border-box;\n    z-index: 5;\n    border: 17px solid black;\n    border-color: transparent transparent var(--vdv-light) var(--vdv-light);\n    transform-origin: 0 0;\n    transform: rotate(225deg) skew(25deg, 25deg);\n    box-shadow: -4px 5px 3px 0 rgb(0 0 0 / 13%);\n  }\n  &--active {\n    &::after {\n      border-color: transparent transparent var(--vdv-base) var(--vdv-base) !important;\n    }\n  }\n  &--hover {\n    &::after {\n      border-color: transparent transparent white white !important;\n    }\n  }\n}\n</style>\n","<template>\n  <!-- @info messages will be implemented in a later release\n  <Hotlink icon=\"far fa-bell\" :notifications=\"3\" ident=\"notifications\">\n    <template #default>{{ t('header.links.messages') }}</template>\n    <template #dropdown>\n      {{ 'messages' }}\n    </template>\n  </Hotlink>\n  -->\n  <Hotlink\n    to=\"/account\"\n    :is-active-page=\"$route.path.toLowerCase() === '/account'\"\n    icon=\"far fa-user\"\n    :notifications=\"null\"\n    testid=\"headerLinkAcount\"\n    ident=\"user\"\n    :show-overlay=\"false\"\n    :active-mobile-hover-ident=\"currentMobileHover\"\n    @set-active-hover=\"(val) => toggleCurrentHoverIdent(val)\"\n  >\n    <template #default=\"{ isActive }\"\n      ><StyledMy\n        :key=\"userType.currCustomerTypeId\"\n        :style-type=\"\n          getMyNavStyle($route.path.toLowerCase() === '/account', isActive)\n        \"\n        :text=\"t(userType.linkText)\"\n    /></template>\n    <template #dropdown=\"{ closeCb }\">\n      <MyPraxis @close=\"closeCb\" />\n    </template>\n  </Hotlink>\n  <Hotlink\n    :is-active-page=\"$route.path.toLowerCase() === '/productlists'\"\n    to=\"/productlists\"\n    icon=\"far fa-heart\"\n    :notifications=\"null\"\n    ident=\"products\"\n    testid=\"headerLinkProducts\"\n    :show-overlay=\"false\"\n    :active-mobile-hover-ident=\"currentMobileHover\"\n    @set-active-hover=\"(val) => toggleCurrentHoverIdent(val)\"\n  >\n    <template #default=\"{ isActive }\"\n      ><StyledMy\n        :style-type=\"\n          getMyNavStyle($route.path.toLowerCase() === '/productlists', isActive)\n        \"\n        :text=\"t('header.links.products')\"\n    /></template>\n    <template #dropdown=\"{ closeCb }\"><MyProducts @close=\"closeCb\" /></template>\n  </Hotlink>\n  <Hotlink\n    to=\"/checkout/basket\"\n    :is-active-page=\"$route.path.toLowerCase() === '/checkout/basket'\"\n    icon=\"far fa-cart-shopping\"\n    :notifications=\"cart.cartItemAmount || null\"\n    ident=\"cart\"\n    :width=\"HotlinkWidth.wide\"\n    :height=\"HotlinkHeight.full\"\n    :notification-key=\"UseStateKeys.HOTLINK_BASKET_NOTIFICATION\"\n    :mobile-notification-name=\"t('header.links.cart')\"\n    :show-overlay=\"false\"\n    :touch-link-only=\"true\"\n    testid=\"headerCartLink\"\n    :active-mobile-hover-ident=\"currentMobileHover\"\n    @set-active-hover=\"(val) => toggleCurrentHoverIdent(val)\"\n  >\n    <template #default> {{ t('header.links.cart') }}</template>\n    <template #dropdown=\"{ closeCb }\"><MyCart @close=\"closeCb\" /></template>\n  </Hotlink>\n</template>\n<script setup lang=\"ts\">\nimport StyledMy from '@/components/layout/header/components/styledMy/styledMy.vue';\nimport Hotlink from '@/components/layout/header/components/hotlink/hotlink.vue';\nimport MyPraxis from '@/components/layout/header/components/hotlink/components/myPraxis.vue';\nimport MyProducts from '@/components/layout/header/components/hotlink/components/productlists.vue';\nimport MyCart from '@/components/layout/header/components/hotlink/components/myCart/myCart.vue';\nimport { UseStateKeys } from '@/useStateKeys';\nimport { useCartStore } from '~/stores/useCart';\nimport { useDashboardDynamicLink } from '@/composables/useDashboardDynamicLink';\nimport {\n  HotlinkWidth,\n  HotlinkHeight,\n} from '@/components/layout/header/components/hotlink/useHotlink';\nimport { EStyleType as EStyleTypeStyledMy } from '@/components/layout/header/components/styledMy/useStyledMy';\n\nconst { t } = useTrans();\nconst userType = useDashboardDynamicLink();\nconst cart = useCartStore();\n\nfunction getMyNavStyle(isActiveRoute: boolean, isHovered: boolean) {\n  switch (true) {\n    case !isActiveRoute && !isHovered:\n      return EStyleTypeStyledMy.default;\n    case isActiveRoute && !isHovered:\n      return EStyleTypeStyledMy.light;\n    default:\n      return EStyleTypeStyledMy.lightAlt;\n  }\n}\n\nconst currentMobileHover = ref('');\n\nfunction toggleCurrentHoverIdent(value: string) {\n  value ? (currentMobileHover.value = value) : '';\n}\n</script>\n","<!-- eslint-disable vue/v-on-event-hyphenation -->\n<template>\n  <client-only>\n    <InfoBanner\n      v-if=\"injected?.showInfobanner && infobannerStorage && shopIsEnabled\"\n      @closeInfobanner=\"hideInfobanner\"\n    />\n  </client-only>\n  <div\n    class=\"top-0 left-0 right-0 bg-white z-[600] shrink-0\"\n    :class=\"{\n      sticky: hasStickyHeader && !isFixed,\n      fixed: hasStickyHeader && isFixed,\n    }\"\n  >\n    <div\n      v-if=\"!shopIsEnabled\"\n      class=\"flex mx-auto max-w-screen-2xl place-content-between place-items-center flex-nowrap pl-sm sm:px-sm z-100 print:max-w-[720px] print:!px-0\"\n    >\n      <NuxtLink to=\"/\">\n        <img\n          src=\"~/assets/images/van-der-ven-logo.svg\"\n          title=\"van der ven logo\"\n          alt=\"van der ven logo\"\n          class=\"h-[45px] w-[185px] my-3\"\n          data-test-id=\"linkVDVLogo\"\n        />\n      </NuxtLink>\n      <LinkBasic\n        v-if=\"!shopIsEnabled\"\n        :label=\"t('header.vShopLink')\"\n        :link=\"config.vShopUrl\"\n        target=\"_blank\"\n        icon=\"far fa-chevron-right\"\n        icon-position=\"right\"\n        classes=\"text-vdv-base font-semibold invisible md:visible print:hidden\"\n      />\n    </div>\n    <div\n      v-else\n      class=\"flex mx-auto max-w-screen-2xl place-content-between place-items-center flex-nowrap px-sm sm:px-sm z-100 print:max-w-[720px] print:!px-0 gap-[50px] sm:gap-0 max-h-[72px]\"\n    >\n      <div class=\"max-w-[165px] min-w-[100px] w-full\">\n        <NuxtLink to=\"/\">\n          <img\n            src=\"~/assets/images/van-der-ven-logo.svg\"\n            title=\"van der ven logo\"\n            alt=\"van der ven logo\"\n            data-test-id=\"linkVDVLogo\"\n            class=\"h-[45px] w-[185px] my-3\"\n          />\n        </NuxtLink>\n      </div>\n\n      <Searchbar />\n\n      <div\n        class=\"flex flex-row text-minilu-font print:hidden md:gap-[8px] touch:md:gap-0 desktop:lg:gap-0\"\n      >\n        <HeaderLinks />\n      </div>\n    </div>\n    <div\n      data-print=\"header-line\"\n      class=\"relative bottom-0 left-0 right-0 h-2 bg-activesection-alpha print:h-[1px] print:max-w-[720px] mx-auto\"\n    />\n  </div>\n  <div\n    class=\"hidden fixedPlaceholder shrink-0\"\n    :class=\"{\n      '!block': hasStickyHeader && isFixed,\n    }\"\n  />\n  <MainNav />\n  <BannerPosition :position=\"BannerPositions.NOTIFICATION\" />\n  <BannerPosition :position=\"BannerPositions.SALES_BAR\" />\n</template>\n<script setup lang=\"ts\">\nimport config from '@/mixins/configProvider';\nimport InfoBanner from '../components/infoBanner/info-banner.vue';\nimport MainNav from '@/components/components/navigation/vdv/main-nav.vue';\nimport LinkBasic from '@/components/components/core/basicLink/basic-link.vue';\nimport { useStorage } from '@vueuse/core';\nimport { componentVisibilitySettings as componentVisibilitySettings_IK } from '@/injectionSymbols';\nimport HeaderLinks from './components/header-links.vue';\nimport Searchbar from '../components/searchbar/searchbar.vue';\nimport BannerPosition from '~/components/banner/bannerPosition.vue';\nimport { BannerPositions } from '~/@types/bannerPositions';\n\nconst { t } = useTrans();\nconst injected = inject(componentVisibilitySettings_IK);\nconst shopIsEnabled = useShopEnabled();\nconst infobannerStorage = useStorage('infobannerVdv', true);\n\nfunction hideInfobanner(showBanner: boolean) {\n  infobannerStorage.value = showBanner;\n}\n\nconst hasStickyHeader = shopIsEnabled;\n\nconst { y } = useWindowScroll();\n\nconst isFixed = computed(() => y.value > 200);\n</script>\n<style lang=\"postcss\" scoped>\n.fixedPlaceholder {\n  @apply w-full shrink-0;\n  height: var(--sticky-header-height);\n}\n</style>\n","<template>\n  <div class=\"w-full bg-vdv-bg-base\">\n    <div\n      class=\"grid max-w-full mx-auto touch:md:flex lg:flex md:max-w-screen-xl touch:md:justify-around lg:justify-around sm:grid sm:grid-cols-2 gap-sm px-md md:px-sm py-sm\"\n    >\n      <div\n        v-for=\"(benefit, index) in footerItems\"\n        :key=\"index\"\n        class=\"flex flex-row items-center\"\n      >\n        <FaIcon :icon=\"benefit.icon\" classes=\"fa-lg mr-xs fa-fw\" />\n        <p class=\"\">{{ benefit.title }}</p>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport FaIcon from '@/components/fa-icon.vue';\nconst footerItems = [\n  {\n    id: '1011',\n    title: 'Rundum-Service',\n    icon: {\n      iconSet: 'fal-icons',\n      label: 'arrow-rotate-left',\n    },\n  },\n  {\n    id: '1022',\n    title: 'Persönliche Fachberatung',\n    icon: {\n      iconSet: 'fal-icons',\n      label: 'user-tie',\n    },\n  },\n  {\n    id: '1033',\n    title: 'Sicheres Onlineshopping',\n    icon: {\n      iconSet: 'fal-icons',\n      label: 'shield-check',\n    },\n  },\n  {\n    id: '1044',\n    title: 'Hochwertige Fortbildungen',\n    icon: {\n      iconSet: 'fal-icons',\n      label: 'graduation-cap',\n    },\n  },\n];\n</script>\n","<template>\n  <ContainerBasic\n    container-type=\"FULL_WIDTH\"\n    class=\"h-[680px] touch:md:h-[320px] lg:h-[320px]\"\n  >\n    <ClientOnly>\n      <div\n        v-if=\"!isDesktopView\"\n        class=\"h-[140px] flex items-center bg-vdv-base bg-center bg-no-repeat bg-cover\"\n      >\n        <img\n          src=\"@/assets/images/newsletter-mobile.svg\"\n          class=\"relative z-0 object-cover w-full h-full\"\n          alt=\"Newsletter Banner\"\n        />\n        <img\n          src=\"@/assets/images/letter.svg\"\n          class=\"absolute h-[80px] pl-2xl z-10\"\n          alt=\"Newsletter Banner Icon\"\n        />\n      </div>\n      <img\n        v-if=\"isDesktopView\"\n        src=\"@/assets/images/newsletter.svg\"\n        class=\"h-[140] touch:md:h-[320px] lg:h-[320px] absolute z-[-10] min-w-full object-cover object-center\"\n        :style=\"`background-color: ${setColorByDefaultArea()}`\"\n        alt=\"Newsletter Banner\"\n      />\n      <ContainerBasic\n        ref=\"bannerNode\"\n        container-type=\"PAGE\"\n        class=\"relative flex touch:md:h-full lg:h-full h-max\"\n      >\n        <img\n          v-if=\"!isDesktopView\"\n          src=\"@/assets/images/rechteck_transparent.svg\"\n          class=\"absolute z-0 object-cover min-w-full overflow-hidden bg-vdv-base\"\n          alt=\"Newsletter Banner\"\n          :style=\"{ height: 'inherit' }\"\n        />\n        <div\n          class=\"flex flex-col items-center h-full touch:md:justify-between touch:md:flex-row lg:justify-between lg:flex-row p-md\"\n        >\n          <div\n            class=\"relative z-20 flex flex-col touch:md:flex-row lg:flex-row\"\n          >\n            <div class=\"lg:mb-sm\">\n              <img\n                v-if=\"isDesktopView\"\n                src=\"@/assets/images/letter.svg\"\n                class=\"lg:mr-2xl touch:md:mr-2xl h-[80px] pl-2xl touch:md:pl-0 touch:md:h-full touch:md:mb-sm lg:pl-0 lg:h-full lg:mb-sm\"\n                alt=\"Newsletter Banner Icon\"\n              />\n            </div>\n            <div>\n              <h2 class=\"text-2xl touch:md:text-3xl lg:text-3xl\">\n                {{ t('newsletter.title') }}\n              </h2>\n              <ul class=\"mt-xs\">\n                <li\n                  v-for=\"(value, key) in enumList\"\n                  :key=\"key\"\n                  class=\"flex align-middle mb-xs\"\n                >\n                  <div\n                    class=\"rounded-[16px] border-2 border-dotted w-[32px] h-[32px] mr-xs\"\n                    :style=\"`border-color: ${setColorByDefaultArea()}`\"\n                  >\n                    <div\n                      class=\"w-[24px] h-[24px] rounded-xl m-[2px] text-white flex place-items-center justify-center\"\n                      :style=\"`background-color: ${setColorByDefaultArea()}`\"\n                    >\n                      <FaIcon classes=\"text-white\" :icon-class=\"iconClass\" />\n                    </div>\n                  </div>\n                  <span class=\"mt-[5px]\">\n                    {{ t(`newsletter.${value}`) }}\n                  </span>\n                </li>\n              </ul>\n            </div>\n          </div>\n          <div class=\"w-[330px] mt-sm touch:md:mt-0 lg:mt-0 z-20\">\n            <FormKit\n              id=\"paywallForm\"\n              type=\"form\"\n              class=\"max-w-md\"\n              spellcheck=\"false\"\n              :actions=\"false\"\n              :incomplete-message=\"false\"\n              :config=\"{ validationVisibility: 'blur' }\"\n              @submit=\"\n                onNewsletterSubmit(\n                  getActionUrlBySiteIdent(useSiteIdent()),\n                  form,\n                  'Default',\n                )\n              \"\n              @node=\"watchForm\"\n            >\n              <FormKit\n                type=\"text\"\n                name=\"EMAIL\"\n                label=\"Ihre E-Mail-Adresse\"\n                placeholder=\"max@mustermann.de\"\n                validation=\"required|email\"\n                validation-visibility=\"blur\"\n                input-class=\"w-full input\"\n                inner-class=\"relative pt-[5px]\"\n                label-class=\"text-md !leading-[19px] font-bold\"\n                :validation-messages=\"{\n                  email: 'E-Mail-Adresse ist ungültig.',\n                }\"\n              />\n\n              <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->\n              <FormKit\n                type=\"hidden\"\n                name=\"b_a8780ef3529534dbe1b892a2a_da0d21a119\"\n                value=\"\"\n              />\n\n              <ButtonBasic\n                classes=\"w-full my-sm px-0\"\n                label=\"Anmelden\"\n                bg-color=\"#555555\"\n                :type=\"EButtonType.SUBMIT\"\n                :btn-style=\"EButtonStyle.CTA\"\n                :show-dialog=\"showDialog\"\n                :dialog-content=\"dialogContent\"\n                :full-width=\"true\"\n                @close-dialog=\"onDialogWindowClosed\"\n              />\n\n              <p class=\"text-[14px] leading-5\">\n                <Trans keypath=\"forms.termsDescription\" tag=\"label\">\n                  <a\n                    :href=\"t('forms.agb.slug')\"\n                    rel=\"noopener\"\n                    target=\"_blank\"\n                    class=\"font-bold text-vdv-base\"\n                  >\n                    {{ t('forms.agb') }}\n                  </a>\n                  <a\n                    :href=\"t('forms.privacy.slug')\"\n                    rel=\"noopener\"\n                    target=\"_blank\"\n                    class=\"font-bold text-vdv-base\"\n                  >\n                    {{ t('forms.privacy') }}\n                  </a>\n                </Trans>\n              </p>\n            </FormKit>\n          </div>\n        </div>\n      </ContainerBasic>\n    </ClientOnly>\n  </ContainerBasic>\n</template>\n\n<script setup lang=\"ts\">\nimport { EButtonStyle, EButtonType } from '@/@types/basic-button';\nimport ButtonBasic from '~~/src/components/components/core/basic-button/vdv/basic-button.vue';\nimport { reset } from '@formkit/core';\nimport { useAreaStore } from '@/stores/useArea';\nimport ContainerBasic from '@/components/components/container-basic.vue';\nimport FaIcon from '@/components/fa-icon.vue';\nimport Trans from '@/components/Trans.vue';\nimport { FormKit } from '@formkit/vue';\nimport {\n  onNewsletterSubmit,\n  getActionUrlBySiteIdent,\n} from '~/composables/newsletterMailchimp';\n\nconst { t } = useTrans();\nconst bannerNode = ref(null);\nconst form = ref(null);\nconst iconClass = 'fas fa-check';\nconst areaStore = useAreaStore();\n\nconst enumList = ['listItem1', 'listItem2', 'listItem3'];\n\nconst showDialog = ref(false);\nconst dialogContent = ref({\n  dialogHeadline: '',\n  dialogText: '',\n});\nconst dialogContentSuccess = {\n  dialogHeadline: t('forms.dialogContent.successHeader'),\n  dialogText: t('forms.dialogContent.successBody'),\n};\nconst dialogContentError = {\n  dialogHeadline: t('forms.dialogContent.errorHeader'),\n  dialogText: '',\n  dialogType: 'error',\n};\n\nfunction setColorByDefaultArea() {\n  return areaStore.defaultArea.color;\n}\n\nconst isDesktopView = useIsDesktopView();\n\nfunction onDialogWindowClosed() {\n  showDialog.value = false;\n  reset('paywallForm');\n}\n\nif (import.meta.client) {\n  (window as any).mcNewsletterDefault = {\n    validateResponse: function (response: any) {\n      dialogContent.value = {\n        dialogHeadline: '',\n        dialogText: '',\n      };\n      if (response.result === 'success') {\n        dialogContent.value = dialogContentSuccess;\n        if (response.msg.startsWith('Danke')) {\n          //override the text when email already subscribed to newsletter\n          dialogContent.value.dialogText = t(\n            'forms.dialogContent.successThankYou',\n          );\n        }\n        showDialog.value = true;\n      } else {\n        dialogContentError.dialogText =\n          t('forms.dialogContent.errorBody') +\n          '<br />' +\n          '<span class=\"italic\">' +\n          response.msg +\n          '</span>';\n        dialogContent.value = dialogContentError;\n        showDialog.value = true;\n      }\n    },\n  };\n}\n\nfunction watchForm(n: any) {\n  form.value = n;\n}\n</script>\n","<template>\n  <FooterBanner />\n  <section class=\"w-full print:hidden shrink-0\">\n    <NewsletterBanner class=\"mb-sm\" />\n    <!-- Benefits & AreaColor-Bar -->\n    <Benefits />\n    <div class=\"w-full h-2 mb-xl bg-activesection-alpha\" />\n    <!-- Desktop-Nav-->\n    <div\n      v-if=\"isDesktopView\"\n      class=\"grid w-full max-w-screen-xl grid-cols-12 mx-auto mb-md md:mb-lg gap-md px-sm\"\n    >\n      <div\n        v-for=\"(navigationItem, index) in footerNavItems\"\n        :key=\"navigationItem.id\"\n        :class=\"getClassesForMainCols(index)\"\n      >\n        <div class=\"flex flex-col\">\n          <div\n            v-if=\"index !== 0\"\n            class=\"truncate h-[24px] !overflow-visible mb-[25px] w-fit text-xl\"\n          >\n            {{ navigationItem.title }}\n          </div>\n          <!-- First entry gets VDV Logo as headline-->\n          <div v-else class=\"leading-xl h-[24px] !overflow-visible mb-[25px]\">\n            <NuxtLink to=\"/\">\n              <img\n                title=\"van der ven logo\"\n                alt=\"van der ven logo\"\n                src=\"~/assets/images/van-der-ven-logo.svg\"\n                class=\"h-lg -mt-xs\"\n                loading=\"lazy\"\n              />\n            </NuxtLink>\n          </div>\n          <hr class=\"w-full h-2 border-t-2 mb-[25px]\" />\n          <div v-if=\"index !== 4\" class=\"-mt-2xs\">\n            <ul\n              v-for=\"(\n                navigationItem_children, index_navigationItem_children\n              ) in navigationItem.children\"\n              :key=\"index_navigationItem_children\"\n              class=\"flex list-none\"\n            >\n              <li class=\"text-md mb-[12px] decoration-vdv-base\">\n                <LinkBasic\n                  :link=\"navigationItem_children.navUri\"\n                  :label=\"navigationItem_children.title\"\n                  :target=\"\n                    navigationItem_children.openInNewWindow ? '_blank' : '_self'\n                  \"\n                />\n              </li>\n            </ul>\n          </div>\n          <!-- Last entries children get rendered in two columns-->\n          <div v-else-if=\"index === 4\" class=\"grid grid-cols-2 gap-x-sm\">\n            <div\n              v-for=\"(\n                navigationItem_children, index_navigationItem_children\n              ) in navigationItem.children\"\n              :key=\"index_navigationItem_children\"\n              class=\"col-span-1\"\n            >\n              <div class=\"text-md mb-[12px] decoration-vdv-base\">\n                <LinkBasic\n                  :link=\"navigationItem_children.navUri\"\n                  :label=\"navigationItem_children.title\"\n                  :target=\"\n                    navigationItem_children.openInNewWindow ? '_blank' : '_self'\n                  \"\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <!-- Mobile-Nav => Accordions-->\n    <div\n      v-if=\"!isDesktopView\"\n      class=\"grid max-w-screen-xl grid-rows-1 mx-auto gap-sm px-md md:px-sm mb-lg\"\n    >\n      <NuxtLink to=\"/\">\n        <img\n          title=\"van der ven logo\"\n          alt=\"van der ven logo\"\n          src=\"~/assets/images/van-der-ven-logo.svg\"\n          class=\"h-lg\"\n          loading=\"lazy\"\n        />\n      </NuxtLink>\n      <AccordionMulti :accordion-items=\"accordion\"></AccordionMulti>\n    </div>\n    <!--Lower Footer => Language-select, Social Media, Slogan-->\n    <div class=\"w-full bg-vdv-base\">\n      <div\n        class=\"flex flex-col items-center max-w-screen-xl grid-cols-12 mx-auto text-white md:flex-row gap-md px-md md:px-sm py-lg md:justify-end\"\n      >\n        <div class=\"flex flex-row items-center justify-center md:justify-end\">\n          <p class=\"mr-xs\">Folgen Sie uns</p>\n          <a\n            href=\"https://www.facebook.com/vanderVenDental\"\n            target=\"_blank\"\n            title=\"Facebook Page\"\n            ><FaIcon classes=\"fa-2x mr-xs\" icon-class=\"fab fa-square-facebook\"\n          /></a>\n          <a\n            title=\"LinkedIn Page\"\n            href=\"https://de.linkedin.com/company/van-der-ven-dental\"\n            target=\"_blank\"\n          >\n            <FaIcon classes=\"fa-2x mr-xs\" icon-class=\"fab fa-linkedin\"\n          /></a>\n          <a\n            title=\"Instagram Page\"\n            href=\"https://www.instagram.com/vandervendental/\"\n            target=\"_blank\"\n          >\n            <FaIcon classes=\"fa-2x mr-xs\" icon-class=\"fab fa-instagram-square\"\n          /></a>\n        </div>\n        <div class=\"flex items-center justify-center md:justify-start\">\n          <img\n            title=\"van der ven logo\"\n            alt=\"van der ven logo\"\n            src=\"~/assets/images/vdv-v-bubble-inverse.svg\"\n            class=\"h-[36px] mr-xs\"\n            loading=\"lazy\"\n          />\n          <img\n            title=\"van der ven logo\"\n            alt=\"van der ven logo\"\n            src=\"~/assets/images/vdv_footer_menschzumensch_claim_white.svg\"\n            class=\"h-[13px]\"\n            loading=\"lazy\"\n          />\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n\n<script setup lang=\"ts\">\nimport { storeToRefs } from 'pinia';\nimport { useNav } from '@/stores/useNav';\nimport AccordionMulti from '@/components/components/core/accordion/vdv/accordion-multi.vue';\nimport LinkBasic from '@/components/components/core/basicLink/basic-link.vue';\nimport Benefits from './components/benefits.vue';\nimport NewsletterBanner from './components/newsletter-banner.vue';\nimport FaIcon from '@/components/fa-icon.vue';\nimport FooterBanner from '../components/footerBanner.vue';\n\nconst navStore = useNav();\nconst { footerNav: footerNavData } = storeToRefs(navStore);\n\nconst footerNavItems = computed(() => {\n  return footerNavData.value.navItems.filter((x) => x.level === 1);\n});\n\nconst isDesktopView = useIsDesktopView();\n\nfunction getClassesForMainCols(index: number): string {\n  if (index == 0) {\n    return 'sm:col-span-6 desktop:md:col-span-4 touch:md:col-span-2 desktop:lg:col-span-2 mb-md';\n  } else if (index % 4 == 0) {\n    return 'sm:col-span-12 desktop:md:col-span-8 touch:md:col-span-4 desktop:lg:col-span-4 mb-md';\n  } else if (index >= 1 && index <= 3) {\n    return 'sm:col-span-6 desktop:md:col-span-4 touch:md:col-span-2 desktop:lg:col-span-2 mb-md';\n  } else {\n    //Hidden because for now we only want one full row of footer items\n    return 'hidden sm:col-span-6 desktop:md:col-span-4 touch:md:col-span-2 desktop:lg:col-span-2 mb-md';\n  }\n}\n\nconst accordion = computed(() => {\n  const accordionItems = [];\n\n  for (const navItem of footerNavItems.value) {\n    const accordionItem = {\n      titleSlot: `${navItem.title}`,\n      classes: 'mb-sm',\n      activeBarTextColor: 'text-white',\n      contentSlot: '',\n    };\n\n    for (const navItemChild of navItem.children) {\n      const link = navItemChild.navUri;\n      const title = navItemChild.title;\n      const openInNewWindow = navItemChild.openInNewWindow;\n\n      const content = `\n      <div class=\"w-full mb-sm !text-vdv-font [&_*]:!text-vdv-font\">\n        <a href=\"${link}\" target=\"${openInNewWindow ? '_blank' : '_self'}\">\n          ${title}\n        </a>\n      </div>\n      `;\n\n      accordionItem.contentSlot += content;\n    }\n    accordionItems.push(accordionItem);\n  }\n  return accordionItems;\n});\n</script>\n","export default \"__VITE_ASSET__4C1IyvAJ__\"","<template>\n  <div\n    class=\"relative w-full mb-sm\"\n    :class=\"[isMobile ? 'h-full' : 'h-[85vh]']\"\n  >\n    <transition-group name=\"slide\">\n      <div\n        v-for=\"(view, index) in views\"\n        v-show=\"activeView.toString() == index\"\n        :key=\"view.title\"\n        class=\"absolute min-h-[300px] bottom-0 left-0 w-full flex flex-col max-h-full overflow-x-hidden overflow-y-auto shadow-md\"\n      >\n        <div\n          v-if=\"view.title\"\n          :class=\"[\n            'text-white bg-vdv-btn-base py-sm px-sm md:px-md flex justify-between items-center',\n            {\n              [view.bgColor]: view.bgColor,\n              'sticky left-0 right-0 top-0': isMobile,\n            },\n          ]\"\n        >\n          <span\n            class=\"text-ellipsis overflow-hidden w-auto md:w-[300px] shrink-0\"\n            >{{ t('globalWidgets.notificationLabel') }}</span\n          >\n          <div class=\"text-right text-white closeBtn\">\n            <FaIcon\n              icon-class=\"far fa-xmark\"\n              class=\"cursor-pointer\"\n              @click=\"closeContactView\"\n            />\n          </div>\n        </div>\n\n        <slot :name=\"`view_${view.id}`\" :goto=\"goto\" :next=\"next\" :prev=\"prev\">\n          <pre>No content found</pre>\n        </slot>\n      </div>\n    </transition-group>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n/** Imports */\nimport { mq_breakpointIsMobile } from '@/injectionSymbols';\nimport FaIcon from '@/components/fa-icon.vue';\n\n/** Props */\nconst props = defineProps({\n  views: {\n    //Resolves to :property-foo=\"\"\n    type: Object,\n    required: true,\n  },\n});\n\nconst { t } = useTrans();\n\nconst isMobile = inject(mq_breakpointIsMobile);\n\nconst forward = ref(true);\n\nconst activeView = ref(0);\n\nconst emit = defineEmits<{\n  (e: 'handleClosingFromInline'): void;\n}>();\n\nfunction closeContactView(): void {\n  emit('handleClosingFromInline');\n  forward.value = false;\n  window.setTimeout(() => {\n    activeView.value = 99;\n  }, 550);\n}\n\nfunction next() {\n  forward.value = true;\n  if (props.views.length == activeView.value + 1) {\n    return;\n  }\n  activeView.value++;\n}\n\nfunction prev() {\n  forward.value = false;\n  if (activeView.value == 0) {\n    return;\n  }\n  activeView.value--;\n}\n\nfunction goto(viewId: string) {\n  forward.value = true;\n  activeView.value = parseInt(viewId);\n}\n</script>\n\n<style scoped>\n.dialog-slider {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  overflow: hidden;\n}\n\n.slide-leave-active,\n.slide-enter-active {\n  transition: 0.3s;\n}\n\n.slide-enter-active {\n  left: 100%;\n  right: auto;\n}\n\n.slide-enter-to {\n  transform: translate(-100%, 0);\n}\n.slide-leave-to {\n  transform: translate(-100%, 0);\n}\n\n.slide-reverse-leave-active,\n.slide-reverse-enter-active {\n  transition: 0.3s;\n}\n\n.slide-reverse-enter-active {\n  left: -100%;\n  right: auto;\n}\n.slide-reverse-enter-to {\n  transform: translate(100%, 0);\n}\n.slide-reverse-leave-to {\n  transform: translate(100%, 0);\n}\n</style>\n","<template>\n  <div class=\"w-full h-full\">\n    <template v-if=\"dialog == EContactView.CONTACT\">\n      <DialogInline\n        :views=\"contactViews\"\n        @handle-closing-from-inline=\"handleClosingWidgetFromInlineDialog\"\n      >\n        <template #view_1>\n          <div\n            class=\"flex-1 overflow-y-auto text-sm p-sm md:p-md bg-vdv-bg-full sm:text-md\"\n          >\n            <div class=\"flex w-full pb-md gap-md\">\n              <img\n                v-if=\"!showSalesPerson\"\n                src=\"@/assets/images/ratingen_van_maren.jpg\"\n                class=\"w-[80px] h-[80px] object-cover\"\n                loading=\"lazy\"\n              />\n              <img\n                v-else\n                :src=\"salesPerson.image.mobile.url\"\n                class=\"w-[80px] h-[80px] object-cover object-top\"\n                loading=\"lazy\"\n              />\n              <div>\n                <div v-if=\"showSalesPerson\">\n                  <b>{{ salesPerson.jobPosition }}</b>\n                  <p class=\"pt-[5px]\">\n                    {{ salesPerson.firstName }} {{ salesPerson.lastName }}\n                  </p>\n                  <div v-if=\"salesPerson.phone\">\n                    <p>\n                      <FaIcon classes=\"mr-2\" icon-class=\"fal fa-phone\" />\n                      <a :href=\"`tel:${salesPerson.phone}`\">\n                        {{ salesPerson.phone }}\n                      </a>\n                    </p>\n                  </div>\n                  <p v-if=\"salesPerson.email\">\n                    <LinkBasic\n                      label=\"Nachricht schreiben\"\n                      :link=\"`mailto:${salesPerson.email}`\"\n                      target=\"_blank\"\n                      icon=\"fas fa-chevron-right\"\n                      class=\"text-primary-base\"\n                    />\n                  </p>\n                </div>\n                <p :class=\"showSalesPerson ? 'pt-sm' : ''\"><b>Empfang</b></p>\n                <div class=\"pt-[5px] pb-sm\">\n                  <p>\n                    <FaIcon classes=\"mr-2\" icon-class=\"fal fa-phone\" />\n                    <a href=\"tel:0210213380\">02102 1338-0</a>\n                  </p>\n                </div>\n                <b>Materialbestellung </b>\n                <div class=\"pt-[5px] pb-sm\">\n                  <p>\n                    <FaIcon classes=\"mr-2\" icon-class=\"fal fa-phone\" />\n                    <a href=\"tel:0210213384949\">02102 1338-4949</a>\n                  </p>\n                </div>\n                <b>Technischer Service</b>\n                <div class=\"pt-[5px] pb-sm\">\n                  <p>\n                    <FaIcon classes=\"mr-2\" icon-class=\"fal fa-phone\" />\n                    <a href=\"tel:021021338275\">02102 1338-275</a>\n                  </p>\n                </div>\n                <b>Servicecenter für Werkstatt</b>\n                <div class=\"pt-[5px] pb-sm\">\n                  <p>\n                    <FaIcon classes=\"mr-2\" icon-class=\"fal fa-phone\" />\n                    <a href=\"tel:021021338375\">02102 1338-375</a>\n                  </p>\n                </div>\n                <b>Buchhaltung</b>\n                <div class=\"pt-[5px] pb-sm\">\n                  <p>\n                    <FaIcon classes=\"mr-2\" icon-class=\"fal fa-phone\" />\n                    <a href=\"tel:0210213384955\">02102 1338-4955</a>\n                  </p>\n                </div>\n                <b class=\"block mt-md\">Servicezeiten</b>\n                <div class=\"table pt-sm\">\n                  <div class=\"table-row\">\n                    <div class=\"table-cell pr-3 leading-7\">Mo - Do</div>\n                    <div class=\"table-cell leading-7 text-right\">\n                      8:00 - 16:45 Uhr\n                    </div>\n                  </div>\n                  <div class=\"table-row\">\n                    <div class=\"table-cell pr-3 leading-7\">Freitag</div>\n                    <div class=\"table-cell leading-7 text-right\">\n                      8:00 - 15:15 Uhr\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <ButtonBasic\n              :full-width=\"true\"\n              :type=\"EButtonType.ROUTERLINK\"\n              label=\"Zum Kontaktformular\"\n              class=\"mb-md h-9\"\n              :btn-style=\"EButtonStyle.LIGHT\"\n              target=\"/kontakt\"\n              :testid=\"contactButtonTestId\"\n              @click=\"emit('close')\"\n            />\n            <p class=\"leading-7\">\n              Auf unserer\n              <LinkBasic\n                label=\"FAQ-Seite\"\n                link=\"/faq\"\n                target=\"_self\"\n                class=\"font-bold text-vdv-base\"\n                @click=\"emit('close')\"\n              />\n              beantworten wir Ihnen häufig gestellte Fragen.\n            </p>\n          </div>\n        </template>\n      </DialogInline>\n    </template>\n    <template v-if=\"dialog == EContactView.ERROR\">\n      <DialogInline\n        :views=\"errorViews\"\n        :dialog=\"dialog\"\n        @handle-closing-from-inline=\"handleClosingWidgetFromInlineDialog\"\n      >\n        <template #view_1>\n          <div class=\"flex-1 h-full p-md bg-vdv-bg-full\">\n            <b>Der schnellste Weg zur Hilfe</b>\n            <p class=\"pt-sm\">\n              Nutzen Sie unser Online-Formular, um eine Störung an einem Gerät\n              zu melden.\n            </p>\n\n            <BulletList\n              :list-type=\"EListType.CheckMarksDarkGreen\"\n              :list-items=\"list\"\n              class=\"pt-md\"\n            />\n            <ButtonBasic\n              :full-width=\"true\"\n              :type=\"EButtonType.ROUTERLINK\"\n              label=\"Zum Störungsformular\"\n              class=\"mt-md h-9\"\n              :btn-style=\"EButtonStyle.LIGHT\"\n              target=\"/technischer-service/reparatur/stoerungsmelder\"\n              @click=\"emit('close')\"\n            />\n          </div>\n        </template>\n      </DialogInline>\n    </template>\n    <template v-if=\"dialog == EContactView.BANNER\">\n      <DialogInline\n        :views=\"bannerViews\"\n        :dialog=\"dialog\"\n        @handle-closing-from-inline=\"handleClosingWidgetFromInlineDialog\"\n      >\n        <template #view_1>\n          <WidgetNotificationBanner\n            :banner-data=\"\n              assignedBanners[0].banner as WidgetNotificationBannerData\n            \"\n            class=\"overflow-y-auto\"\n          />\n        </template>\n      </DialogInline>\n    </template>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { EContactView } from '@/@types/contactview-type';\nimport { EButtonStyle, EButtonType } from '@/@types/basic-button';\nimport { EListType } from '@/@types/bullet-list';\nimport type { IListItem } from '@/@types/bullet-list';\nimport DialogInline from '~~/src/components/components/widgets/vdv/inline-dialog.vue';\nimport BulletList from '@/components/components/core/bullet-list/bullet-list.vue';\nimport ButtonBasic from '~~/src/components/components/core/basic-button/vdv/basic-button.vue';\nimport LinkBasic from '@/components/components/core/basicLink/basic-link.vue';\nimport FaIcon from '@/components/fa-icon.vue';\nimport { useAssignedBanners } from '~/composables/banner/useAssignedBanners';\nimport { BannerPositions } from '~/@types/bannerPositions';\nimport { BannerTypeHandle } from '~/components/banner/types';\nimport type { WidgetNotificationBannerData } from '~/components/banner/components/banners/widgetNotification/type';\nimport WidgetNotificationBanner from '~/components/banner/components/banners/widgetNotification/widgetNotificationBanner.vue';\nimport { useUserContext } from '~/stores/useUserContext';\nimport { useSessionStore } from '~/stores/useSessionStore';\nimport type { PersonData } from '~/server/transformers/EntityTransformers/personTransformer';\nimport { useSessionGet } from '~/composables/dataFetching/genericFetchers';\n\nconst userContext = useUserContext();\nconst sessionStore = useSessionStore();\nconst showSalesPerson = ref();\nconst salesPerson = ref();\n\nwatch(\n  [() => sessionStore.isLoggedIn, () => userContext.accountData?.salesPersonId],\n  async ([isLoggedIn, salesPersonId]) => {\n    if (isLoggedIn && salesPersonId) {\n      salesPerson.value = await useSessionGet<PersonData>(\n        `/api/${useSiteIdent()}/content/salesPerson/${salesPersonId}`,\n      );\n      if (salesPerson.value) showSalesPerson.value = true;\n    } else {\n      showSalesPerson.value = false;\n    }\n  },\n  { immediate: true },\n);\n\ndefineProps({\n  dialog: {\n    type: String as PropType<EContactView>,\n    default: () => {\n      [\n        {\n          id: '1',\n          title: 'Kontakt',\n        },\n      ];\n    },\n  },\n  contactButtonTestId: {\n    type: String,\n    required: false,\n    default: '',\n  },\n});\n\nconst list = ref([\n  {\n    text: 'Direkte Hilfestellung zu Ihrem konkreten Problem',\n  },\n  {\n    text: 'Umgehende persönliche Betreuung bei akuten Problemen innerhalb unserer Servicezeiten',\n  },\n] as IListItem[]);\n\n/** Emits */\nconst emit = defineEmits<{\n  (e: 'close'): void;\n  (e: 'handleClosing'): void;\n}>();\n\nfunction handleClosingWidgetFromInlineDialog(): void {\n  emit('handleClosing');\n}\n\nconst contactViews = ref([\n  {\n    id: '1',\n    title: 'Kontakt',\n  },\n]);\n\nconst { assignedBanners } = await useAssignedBanners(\n  BannerPositions.WIDGET_NOTIFICATION,\n);\n\nconst errorViews = ref([\n  {\n    id: '1',\n    title: 'Störung melden',\n    bgColor: ' bg-sign-yellow',\n  },\n]);\n\nconst bannerViews = computed(() => {\n  const banner = assignedBanners.value?.[0]\n    ?.banner as WidgetNotificationBannerData;\n  if (banner && banner.typeHandle === BannerTypeHandle.WIDGET_NOTIFICATION) {\n    return [\n      {\n        id: '1',\n        title: banner.headline,\n        bgColor: ' !bg-status-danger-base',\n      },\n    ];\n  }\n  return [];\n});\n</script>\n","<template>\n  <div\n    ref=\"widgetWrapper\"\n    class=\"fixed widgetPos flex content-end transition-all duration-300 z-[531] print:hidden z-5\"\n    :class=\"[\n      isMobile ? 'top-md h-[calc(100%-60px)]' : 'bottom-xl',\n      showFlyout ? '!right-0' : '',\n    ]\"\n  >\n    <div class=\"flex flex-col mt-auto bottom-md gap-y-[1px] mb-xl w-0\">\n      <transition name=\"fade\">\n        <button\n          v-show=\"y > 300\"\n          id=\"pagetop\"\n          ref=\"scrollToTopButton\"\n          title=\"Scroll up\"\n          class=\"rounded-l w-[3.125rem] h-[3.125rem] bg-vdv-btn-base flex justify-center items-center default right-[50px] relative ml-auto\"\n          :class=\"{\n            'w-[9rem] right-[9rem] text-white': scrollToTopButtonIsHovered,\n          }\"\n          @click=\"toTop()\"\n        >\n          <FaIcon icon-class=\"fal fa-angles-up\" />\n          <div\n            v-show=\"scrollToTopButtonIsHovered\"\n            class=\"ml-xs whitespace-nowrap\"\n          >\n            {{ t('globalWidget.toTopLabel') }}\n          </div>\n        </button>\n      </transition>\n      <button\n        ref=\"contactButton\"\n        title=\"Contact Information\"\n        data-test-id=\"contactInfoButton\"\n        class=\"rounded-l w-[3.125rem] h-[3.125rem] bg-vdv-btn-base flex justify-center items-center default right-[50px] relative ml-auto\"\n        :class=\"{ '!w-[8rem] !right-[8rem] text-white': showContact }\"\n        @click=\"openContactView(EContactView.CONTACT)\"\n      >\n        <FaIcon icon-class=\"far fa-phone-plus\" />\n        <div v-show=\"showContact\" class=\"ml-xs whitespace-nowrap\">\n          {{ t('globalWidget.contactLabel') }}\n        </div>\n      </button>\n      <button\n        v-if=\"areaStore.getActiveArea?.id.toString() === '134662'\"\n        id=\"pagetop\"\n        ref=\"errorButton\"\n        :title=\"t('globalWidget.errorLabel')\"\n        class=\"rounded-l w-[3.125rem] h-[3.125rem] bg-sign-yellow flex justify-center items-center default right-[50px] relative ml-auto\"\n        :class=\"{ '!w-[10rem] !right-[10rem] text-white': showError }\"\n        @click=\"openContactView(EContactView.ERROR)\"\n      >\n        <FaIcon icon-class=\"fal fa-triangle-exclamation\" />\n        <div v-show=\"showError\" class=\"ml-xs whitespace-nowrap\">\n          {{ t('globalWidget.errorLabel') }}\n        </div>\n      </button>\n      <button\n        v-if=\"\n          assignedBanners.length > 0 &&\n          assignedBanners[0].banner.typeHandle ===\n            BannerTypeHandle.WIDGET_NOTIFICATION\n        \"\n        id=\"pagetop\"\n        ref=\"widgetButton\"\n        :title=\"\n          (assignedBanners[0].banner as WidgetNotificationBannerData).headline\n        \"\n        class=\"rounded-l w-[3.125rem] h-[3.125rem] bg-status-danger-base flex justify-center items-center default right-[50px] relative ml-auto\"\n        :class=\"{ '!w-[8rem] !right-[8rem] text-white': showWidget }\"\n        @click=\"openContactView(EContactView.BANNER)\"\n      >\n        <FaIcon icon-class=\"fal fa-bell-on\" class=\"shrink-0\" />\n        <div\n          v-show=\"showWidget\"\n          class=\"overflow-hidden ml-xs whitespace-nowrap text-ellipsis w-[calc(100%-60px)]\"\n        >\n          {{ t('globalWidgets.notificationLabel') }}\n        </div>\n      </button>\n    </div>\n    <div class=\"flex flex-col overflow-hidden widgetWidth\">\n      <ContactDialog\n        :dialog=\"activeContactView\"\n        contact-button-test-id=\"contactButton\"\n        @close=\"closeContactView()\"\n        @handle-closing=\"handleClosingWidgetFromContactDialog\"\n      />\n    </div>\n\n    <div\n      v-show=\"showFlyout && isMobile\"\n      class=\"fixed inset-0 overflow-hidden -z-1 vdv-toggleNav__overlay\"\n      @click=\"closeContactView()\"\n    ></div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n/** Imports */\nimport { EContactView } from '@/@types/contactview-type';\nimport {\n  useWindowScroll,\n  useElementHover,\n  onClickOutside,\n  useTimeout,\n  promiseTimeout,\n} from '@vueuse/core';\nimport { useAreaStore } from '@/stores/useArea';\nimport ContactDialog from '~~/src/components/components/widgets/vdv/contact-dialog.vue';\nimport { mq_breakpointIsMobile } from '@/injectionSymbols';\nimport FaIcon from '@/components/fa-icon.vue';\nimport { BannerPositions } from '~/@types/bannerPositions';\nimport { useAssignedBanners } from '~/composables/banner/useAssignedBanners';\nimport { BannerTypeHandle } from '~/components/banner/types';\nimport type { WidgetNotificationBannerData } from '~/components/banner/components/banners/widgetNotification/type';\n\nconst areaStore = useAreaStore();\n\nconst { t } = useTrans();\n\nconst isMobile = inject(mq_breakpointIsMobile);\n\n/** Component data */\nconst { y } = useWindowScroll();\nconst widgetWrapper = ref();\nconst scrollToTopButton = ref();\nconst contactButton = ref();\nconst errorButton = ref();\nconst widgetButton = ref();\nconst showFlyout = ref(false);\nconst activeContactView = ref();\n\nconst { assignedBanners } = await useAssignedBanners(\n  BannerPositions.WIDGET_NOTIFICATION,\n);\n\nwatch(\n  () => showFlyout.value && isMobile.value,\n  (newVal) => {\n    usePreventBodyScroll(newVal);\n  },\n);\n\nconst emit = defineEmits<{\n  (e: 'handleClosing'): void;\n}>();\n\nfunction handleClosingWidgetFromContactDialog(): void {\n  emit('handleClosing');\n  closeContactView();\n}\n\nconst scrollToTopButtonIsHovered = useElementHover(scrollToTopButton);\nconst contactButtonIsHovered = useElementHover(contactButton);\nconst errorButtonIsHovered = useElementHover(errorButton);\nconst widgetButtonIsHovered = useElementHover(widgetButton);\n\nconst { ready } = useTimeout(5000, { controls: true });\nconst showContact = computed(() => {\n  return (contactButtonIsHovered.value && !isMobile.value) || !ready.value;\n});\nconst showError = computed(() => {\n  return (errorButtonIsHovered.value && !isMobile.value) || !ready.value;\n});\nconst showWidget = computed(() => {\n  return (widgetButtonIsHovered.value && !isMobile.value) || !ready.value;\n});\n\n/** Methods */\nfunction openContactView(contactView: EContactView) {\n  activeContactView.value = contactView;\n  showFlyout.value = true;\n}\n\nfunction closeContactView() {\n  showFlyout.value = false;\n  window.setTimeout(() => {\n    activeContactView.value = null;\n  }, 550);\n}\n\nasync function toTop(): Promise<void> {\n  if (import.meta.client) {\n    window.scrollTo({\n      top: 0,\n      behavior: 'smooth',\n    });\n    await promiseTimeout(1200);\n    scrollToTopButtonIsHovered.value = false;\n  }\n}\n\nonClickOutside(widgetWrapper, () => closeContactView());\n</script>\n\n<style scoped>\n.default {\n  transition: left 0.25s width 0.25s ease-out;\n  transition-duration: 0.25s;\n  color: #ffffff;\n}\n.vdv-toggleNav__overlay {\n  background: transparent linear-gradient(180deg, #000000 0%, #346d7300 100%) 0%\n    0%;\n  opacity: 0.2;\n}\n.fade-enter-active,\n.fade-leave-active {\n  transition: opacity 0.5s ease;\n}\n\n.fade-enter-from,\n.fade-leave-to {\n  opacity: 0;\n}\n\n.slide-enter-active,\n.slide-leave-active {\n  transition: all 0.5s ease;\n}\n\n.slide-enter-from,\n.slide-leave-to {\n  right: 0;\n}\n\n.widgetWidth {\n  width: 390px;\n}\n.widgetPos {\n  right: -390px;\n}\n\n@media screen and (max-width: 600px) {\n  .widgetWidth {\n    width: calc(100vw - 50px);\n  }\n  .widgetPos {\n    right: calc(-100vw + 50px);\n  }\n}\n</style>\n"],"names":["userType","useDashboardDynamicLink","props","__props","emit","__emit","t","useTrans","itemClass","getClass","navItem","userContext","useUserContext","navStore","useNav","session","useSessionStore","isMobile","inject","mq_breakpointIsMobile","shopIsEnabled","useShopEnabled","activeNavStructure","toggleNavItems","mainNav","storeToRefs","watch","newVal","usePreventBodyScroll","onUnmounted","state","reactive","init","setNavItemFromClick","endOfStructure","useRouter","getNewActiveItem","x","extraToplevelNavMyProducts","computed","topLevelNavMap","myProduct","MyProductIds","getHeadlineItem","id","title","slug","icon","extraToplevelNavMyAccount","myAccount","MyAccountIds","myDecoColorDefault","getBgColor","EStyleTypeStyledMy","myDecoColorLight","myDecoColorLightAlt","maxChildItems","generateTestIdFromUrl","url","part","bannerStore","useBannerStore","navParent","_a","showBigNav","getChildrenOfNavItem","navitem","assignments","__temp","__restore","_withAsyncContext","BannerPositions","assignedBanners","uri","resolveBannerAssignment","touchClick","mainNavLinks","mouseEnter","mouseLeave","navItemUnhover","linkShowsDropdownIcon","toggleMenuClick","hoverMenuHover","hoverMenuUnhover","getMyNavStyle","activeNavStructureComputed","useMainMavState","isMobileScreen","activeNavStructureFromStore","cart","useCartStore","isActiveRoute","isHovered","currentMobileHover","ref","toggleCurrentHoverIdent","value","injected","componentVisibilitySettings_IK","infobannerStorage","useStorage","hideInfobanner","showBanner","hasStickyHeader","y","useWindowScroll","isFixed","footerItems","iconClass","bannerNode","form","areaStore","useAreaStore","enumList","showDialog","dialogContent","dialogContentSuccess","dialogContentError","setColorByDefaultArea","isDesktopView","useIsDesktopView","onDialogWindowClosed","reset","response","watchForm","n","footerNavData","footerNavItems","getClassesForMainCols","index","accordion","accordionItems","accordionItem","navItemChild","link","openInNewWindow","content","_imports_0","forward","activeView","closeContactView","next","prev","goto","viewId","sessionStore","showSalesPerson","salesPerson","isLoggedIn","salesPersonId","useSessionGet","useSiteIdent","list","handleClosingWidgetFromInlineDialog","contactViews","useAssignedBanners","errorViews","bannerViews","banner","_b","BannerTypeHandle","widgetWrapper","scrollToTopButton","contactButton","errorButton","widgetButton","showFlyout","activeContactView","handleClosingWidgetFromContactDialog","scrollToTopButtonIsHovered","useElementHover","contactButtonIsHovered","errorButtonIsHovered","widgetButtonIsHovered","ready","useTimeout","showContact","showError","showWidget","openContactView","contactView","toTop","promiseTimeout","onClickOutside"],"mappings":"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"}