{"version":3,"file":"Navigation-DfDaaZtO.js","sources":["../../src/components/Navigation/Navigation.vue"],"sourcesContent":["<template>\n  <!-- prettier-ignore -->\n  <div class=\"navigation\">\n    <div class=\"container\">\n      <template\n        v-for=\"(item, index) in items\"\n        :key=\"item.name\"\n      >\n        <div\n          v-if=\"index > 0\"\n          class=\"line\"\n          :class=\"getClasses(item, index, 'line')\"\n        />\n\n        <router-link\n          class=\"step\"\n          :class=\"getClasses(item, index, 'step')\"\n          :to=\"!item.disabled ? item.path : ''\"\n        >\n          <div class=\"step__icon\">\n            <the-icon\n              :art=\"item.disabled ? 'light' : 'solid'\"\n              name=\"circle\"\n            />\n          </div>\n          <div\n            class=\"step__nr body-3\"\n            v-text=\"index + 1\"\n          />\n          <div\n            class=\"step__text title-3\"\n            v-text=\"$t(`navigation.${item.name}`)\"\n          />\n        </router-link>\n      </template>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed } from 'vue'\nimport { useRoute } from 'vue-router'\n\nimport { getRoutes } from '@/helpers/Route'\nimport basketStore from '@/store/basket'\n\n// HOOKS\nconst route = useRoute()\n\n// INIT\nconst props = defineProps({\n  items: {\n    type: Array,\n    default: () => [],\n  },\n})\n\n// COMPUTED\nconst items = computed(() => {\n  // if offer already submitted => abort\n  if (basketStore.basket.submitted) return []\n\n  // if items are passed from the parent component\n  if (props.items.length) return props.items\n\n  // by default return non hidden items in the main header navigation\n  return getRoutes(route, basketStore.basket).filter(__route => !__route.hidden && __route.isInNavigation)\n})\n\nconst states = computed(() => {\n  return items.value.map((_r, index) => {\n    const prev = items.value[index - 1]\n    const next = items.value[index + 1]\n\n    return {\n      prevComplete: prev?.complete ?? false,\n      nextComplete: next?.complete ?? false,\n    }\n  })\n})\n\n// METHODS\nfunction getClasses(__route, index, prefix) {\n  return {\n    [`${prefix}--active`]: !!__route.match,\n    [`${prefix}--complete`]: !!__route.complete,\n    [`${prefix}--disabled`]: !!__route.disabled,\n    [`${prefix}--invalid`]: !!__route.invalid && !__route.disabled,\n\n    [`${prefix}--active-incomplete`]: !!__route.match && !__route.complete && !!states.value[index].nextComplete,\n    [`${prefix}--prev-incomplete`]: !__route.match && !states.value[index].prevComplete,\n    [`${prefix}--prev-complete`]: !!states.value[index].prevComplete,\n    [`${prefix}--next-complete`]: !!states.value[index].nextComplete,\n  }\n}\n</script>\n\n<style scoped>\n.navigation {\n  .container {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n\n    height: 60px;\n  }\n\n  /** all transitions **/\n  .step {\n    .step__icon {\n      transition-property: font-size, color;\n      transition-duration: 150ms;\n      transition-timing: linear;\n    }\n\n    .step__text {\n      transition-property: top, font-weight;\n      transition-duration: 150ms;\n      transition-timing: linear;\n      transition-delay: 100ms;\n    }\n  }\n\n  /** styling for a step (icon, number, text) **/\n  .step {\n    flex: 0 0 auto;\n\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    text-align: center;\n\n    &:focus-visible {\n      outline: 2px solid var(--dvp-btn-c-outline);\n      outline-offset: var(--fixed-spacing-fix-01);\n      border-radius: var(--fixed-border-radius-fix-02);\n    }\n\n    &__icon {\n      flex: 0 0 40px;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      text-align: center;\n      z-index: var(--dvp-stack-level-element);\n      color: var(--tertiary);\n      font-size: 22px;\n    }\n\n    &__nr {\n      display: none;\n      z-index: var(--dvp-stack-level-element);\n    }\n\n    &__text {\n      flex: 0 0 20px;\n      white-space: nowrap;\n      font-size: 0;\n    }\n\n    &:not(:last-child):after {\n      position: absolute;\n      content: '';\n      height: 2px;\n      top: 19px;\n      left: calc(50% + 10px);\n      right: 0;\n\n      background-color: var(--colors-neutral-a-700);\n    }\n\n    &:not(:first-child):before {\n      position: absolute;\n      content: '';\n      height: 2px;\n      top: 19px;\n      left: 0;\n      right: calc(50% + 10px);\n\n      background-color: var(--colors-neutral-a-700);\n    }\n\n    &.step--prev-incomplete:not(:first-child):before {\n      position: absolute;\n      content: '';\n      height: 2px;\n      top: 19px;\n      left: 0;\n      right: calc(50% + 10px);\n\n      background-color: var(--colors-neutral-a-700);\n    }\n\n    &.step--active {\n      .step__icon {\n        color: var(--surface);\n        font-size: 32px;\n        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.12));\n      }\n\n      &-incomplete::after {\n        position: absolute;\n        content: '';\n        height: 4px;\n        top: 18px;\n        right: 0;\n        left: calc(50% + 10px);\n\n        background-color: var(--tertiary);\n      }\n\n      .step__nr {\n        display: initial;\n        position: absolute;\n        left: calc(50% - 16px);\n        top: calc(50% - 20px);\n        text-align: center;\n        width: 32px;\n      }\n\n      .step__text {\n        font-weight: var(--font-weight-bold);\n        font-size: var(--font-size-bold-sm);\n        letter-spacing: var(--letter-spacing-bold-sm);\n      }\n    }\n\n    &.step--disabled {\n      cursor: default;\n      pointer-events: none;\n\n      .step__icon {\n        color: var(--colors-neutral-a-700);\n      }\n\n      .step__text {\n        color: var(--Interaction-States-disabled-default-label);\n      }\n    }\n\n    &.step--complete {\n      &:before {\n        height: 4px;\n        top: 18px;\n        right: calc(50% + 10px);\n        background-color: var(--tertiary);\n      }\n\n      &.step--next-complete:after {\n        height: 4px;\n        top: 18px;\n        left: calc(50% + 10px);\n        background-color: var(--tertiary);\n      }\n    }\n  }\n\n  /** styling for the lines between steps **/\n  .line {\n    flex: 1 0 auto;\n    position: relative;\n\n    &:after {\n      position: absolute;\n      content: '';\n      height: 2px;\n      top: 19px;\n      width: 100%;\n      background-color: var(--colors-neutral-a-700);\n    }\n\n    &.line--complete {\n      &:after {\n        height: 4px;\n        top: 18px;\n        background-color: var(--tertiary);\n      }\n    }\n  }\n}\n\n@media (--v-medium) {\n  .navigation {\n    .container {\n      height: 72px;\n    }\n\n    .step {\n      &__text {\n        font-weight: var(--font-weight-regular);\n        font-size: var(--font-size-regular-sm);\n        letter-spacing: var(--letter-spacing-regular-sm);\n      }\n\n      &.step--active {\n        gap: var(--spacing-san-spacing-03);\n\n        .step__icon {\n          font-size: 40px;\n        }\n\n        .step__nr {\n          top: calc(50% - 25px);\n        }\n      }\n    }\n  }\n}\n\n@media (--v-large) {\n}\n\n@media (--v-wide) {\n  .navigation {\n    .container {\n      height: 80px;\n    }\n\n    .step {\n      &__text {\n        font-weight: var(--font-weight-regular);\n        font-size: var(--font-size-regular-md);\n        letter-spacing: var(--letter-spacing-regular-md);\n      }\n\n      &.step--active {\n        gap: var(--spacing-san-spacing-04);\n\n        .step__nr {\n          top: calc(50% - 29px);\n        }\n\n        .step__text {\n          font-weight: var(--font-weight-bold);\n          font-size: var(--font-size-bold-md);\n          letter-spacing: var(--letter-spacing-bold-md);\n        }\n      }\n    }\n  }\n}\n\n@media (--v-ultra) {\n}\n\n@media (--v-max) {\n  .navigation {\n    .container {\n      height: 96px;\n    }\n\n    .step {\n      &.step--active {\n        gap: var(--spacing-san-spacing-06);\n\n        .step__icon {\n          font-size: 48px;\n        }\n\n        .step__nr {\n          top: calc(50% - 34px);\n        }\n      }\n    }\n  }\n}\n</style>\n"],"names":["route","useRoute","props","__props","items","computed","basketStore","getRoutes","__route","states","_r","index","prev","next","getClasses","prefix","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_openBlock","_createElementBlock","_createElementVNode","_Fragment","_renderList","$setup","item","_normalizeClass","_createCommentVNode","_createVNode","_component_router_link","_withCtx","_component_the_icon","_toDisplayString","_ctx"],"mappings":"wVA+CA,MAAMA,EAAQC,EAAU,EAGlBC,EAAQC,EAQRC,EAAQC,EAAS,IAEjBC,EAAY,OAAO,UAAkB,CAAE,EAGvCJ,EAAM,MAAM,OAAeA,EAAM,MAG9BK,EAAUP,EAAOM,EAAY,MAAM,EAAE,OAAOE,GAAW,CAACA,EAAQ,QAAUA,EAAQ,cAAc,CACxG,EAEKC,EAASJ,EAAS,IACfD,EAAM,MAAM,IAAI,CAACM,EAAIC,IAAU,CACpC,MAAMC,EAAOR,EAAM,MAAMO,EAAQ,CAAC,EAC5BE,EAAOT,EAAM,MAAMO,EAAQ,CAAC,EAElC,MAAO,CACL,aAAcC,GAAM,UAAY,GAChC,aAAcC,GAAM,UAAY,EACjC,CACL,CAAG,CACF,EAGD,SAASC,EAAWN,EAASG,EAAOI,EAAQ,CAC1C,MAAO,CACL,CAAC,GAAGA,CAAM,UAAU,EAAG,CAAC,CAACP,EAAQ,MACjC,CAAC,GAAGO,CAAM,YAAY,EAAG,CAAC,CAACP,EAAQ,SACnC,CAAC,GAAGO,CAAM,YAAY,EAAG,CAAC,CAACP,EAAQ,SACnC,CAAC,GAAGO,CAAM,WAAW,EAAG,CAAC,CAACP,EAAQ,SAAW,CAACA,EAAQ,SAEtD,CAAC,GAAGO,CAAM,qBAAqB,EAAG,CAAC,CAACP,EAAQ,OAAS,CAACA,EAAQ,UAAY,CAAC,CAACC,EAAO,MAAME,CAAK,EAAE,aAChG,CAAC,GAAGI,CAAM,mBAAmB,EAAG,CAACP,EAAQ,OAAS,CAACC,EAAO,MAAME,CAAK,EAAE,aACvE,CAAC,GAAGI,CAAM,iBAAiB,EAAG,CAAC,CAACN,EAAO,MAAME,CAAK,EAAE,aACpD,CAAC,GAAGI,CAAM,iBAAiB,EAAG,CAAC,CAACN,EAAO,MAAME,CAAK,EAAE,YACrD,CACH,kOA5FOK,EAAA,CAAA,MAAM,YAAY,EAChBC,EAAA,CAAA,MAAM,WAAW,EAgBXC,EAAA,CAAA,MAAM,YAAY,EAnBjCC,EAAA,CAAA,aAAA,EAAAC,EAAA,CAAA,aAAA,mEAEE,OAAAC,EAAA,EAAAC,EAkCM,MAlCNN,EAkCM,CAjCJO,EAgCM,MAhCNN,EAgCM,EA/BJI,EAAA,EAAA,EAAAC,EA8BWE,OAlCjBC,EAKgCC,EAAA,MALhC,CAKgBC,EAAMhB,KALtBU,EAAA,EAAAC,EAAAE,EAAA,CAAA,IAMcG,EAAK,OAGHhB,EAAK,OADbW,EAIE,MAAA,CAZV,IAAA,EAUU,MAVVM,GAUgB,OACEF,aAAWC,EAAMhB,EAAK,MAAA,CAAA,CAAA,YAXxCkB,EAAA,GAAA,EAAA,EAcQC,EAmBcC,EAAA,CAlBZ,MAfVH,GAegB,OACEF,aAAWC,EAAMhB,EAAK,MAAA,CAAA,CAAA,EAC7B,GAAKgB,EAAK,SAAoB,GAATA,EAAK,OAjBrC,QAAAK,EAmBU,IAKM,CALNT,EAKM,MALNL,EAKM,CAJJY,EAGEG,EAAA,CAFC,IAAKN,EAAK,SAAQ,QAAA,QACnB,KAAK,4BAGTJ,EAGE,MAAA,CAFA,MAAM,kBA1BlB,YA2BYW,EAAkBvB,EAAL,CAAA,CA3BzB,EAAA,KAAA,EAAAQ,CAAA,EA6BUI,EAGE,MAAA,CAFA,MAAM,qBA9BlB,YA+BYW,EAAsCC,EAA9B,GAAiB,cAAAR,EAAK,IAAI,EAAA,CAAA,CA/B9C,EAAA,KAAA,EAAAP,CAAA,IAAA,EAAA"}