{"version":3,"file":"Header.IJgVA5ZJ.js","sources":["../../../../../../packages/shared/images/misc/header-close.svg?component","../../../../../../packages/shared/images/misc/burger.svg?component","../../../../components/mop/header/Header.vue"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nconst _hoisted_1 = {\n  xmlns: \"http://www.w3.org/2000/svg\",\n  fill: \"currentColor\",\n  stroke: \"currentColor\",\n  viewBox: \"0 0 24 24\"\n}\nconst _hoisted_2 = /*#__PURE__*/_createElementVNode(\"path\", {\n  fill: \"none\",\n  \"fill-rule\": \"evenodd\",\n  \"stroke-linecap\": \"square\",\n  \"stroke-width\": \"2\",\n  d: \"m6.692 6.782 10.606 10.606m.001-10.606L6.692 17.388\",\n  \"shape-rendering\": \"geometricPrecision\"\n}, null, -1)\nconst _hoisted_3 = [\n  _hoisted_2\n]\n\nexport function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", _hoisted_1, [..._hoisted_3]))\n}\nexport default { render: render }","import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nconst _hoisted_1 = {\n  xmlns: \"http://www.w3.org/2000/svg\",\n  \"xml:space\": \"preserve\",\n  fill: \"currentColor\",\n  viewBox: \"0 0 30 19\"\n}\nconst _hoisted_2 = /*#__PURE__*/_createElementVNode(\"path\", { d: \"M3 15.04h24v1.6H3zm0-6.29h24v1.6H3zm0-6.39h24v1.6H3z\" }, null, -1)\nconst _hoisted_3 = [\n  _hoisted_2\n]\n\nexport function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", _hoisted_1, [..._hoisted_3]))\n}\nexport default { render: render }","<script setup lang=\"ts\">\nimport SVGClose from '@mop/shared/images/misc/header-close.svg?component';\nimport SVGMopLogo from '@mop/shared/images/logo/logo_mop.svg?component';\nimport SVGMopLogoSignet from '@mop/shared/images/logo/logo_mop_signet.svg?component';\nimport SVGSearch from '@mop/shared/images/misc/search.svg?component';\nimport SVGBurger from '@mop/shared/images/misc/burger.svg?component';\nimport SVGHeart from '@mop/shared/images/misc/header-heart.svg?component';\nimport type { NavigationModel } from '@/types/navigationModel';\n\ndefineOptions({\n  name: 'MopHeader',\n});\n\nconst { $gtm, $breakpoint } = useNuxtApp();\nconst headerOverlay = useMopOverlay();\nconst { activePathRef } = useMopNavigation();\nconst { wishlistItemsRef, init: initWishlist } = useMopWishlist();\n\nconst isSearchSuggestionOpenRef = ref(false);\nconst isMobileMenuOpenRef = ref(false);\nconst componentNames = {\n  mobileMenu: 'MopHeaderMobileMenuOverlay',\n  menu: 'MopHeaderMenuOverlay',\n  search: 'MopHeaderSearchSuggestionsOverlay',\n};\nconst lastOpenedCategoryRef: Ref<NavigationModel | undefined> = ref();\nlet closeTimer: any;\n\nonMounted(initWishlist);\n\nwatch(activePathRef, resetLastOpenedCategory);\nwatch($breakpoint.currentRef, (viewport) => {\n  if (headerOverlay?.activeOverlayRef?.value?.componentName === componentNames.menu && ['xs', 's'].includes(viewport)) {\n    resetLastOpenedCategory();\n    headerOverlay.closeAll();\n  } else if (\n    headerOverlay?.activeOverlayRef?.value?.componentName === componentNames.mobileMenu &&\n    !['xs', 's'].includes(viewport)\n  ) {\n    headerOverlay.closeAll();\n  }\n});\n\nasync function handleSearchClick() {\n  if (isSearchSuggestionOpenRef.value) {\n    return await headerOverlay.closeAll();\n  }\n  isSearchSuggestionOpenRef.value = true;\n\n  await headerOverlay.open({\n    type: 'top',\n    componentName: componentNames.search,\n    overrideParams: {\n      showClose: false,\n      forceRender: true,\n      lockScroll: '.search-suggest__scroll',\n    },\n    onClose() {\n      isSearchSuggestionOpenRef.value = false;\n    },\n  });\n\n  $gtm.trackEvent({\n    eventName: 'site_search_start',\n    parameters: [$gtm.getCurrentPageType()],\n  });\n}\n\nfunction trackJobButtonClick() {\n  $gtm.trackEvent({\n    eventName: 'our_jobs_button',\n    parameters: ['click', document.location.pathname],\n  });\n}\n\nasync function handleMobileMenuClick() {\n  isMobileMenuOpenRef.value = !isMobileMenuOpenRef.value;\n\n  if (!isMobileMenuOpenRef.value) {\n    return await headerOverlay.closeAll();\n  }\n\n  await headerOverlay.open({\n    componentName: componentNames?.mobileMenu,\n    type: 'left',\n    overrideParams: {\n      forceRender: true,\n      lockScroll: '.mobile-menu',\n    },\n    onClose() {\n      isMobileMenuOpenRef.value = false;\n    },\n  });\n}\n\nfunction resetLastOpenedCategory() {\n  lastOpenedCategoryRef.value = undefined;\n}\n\nfunction handleMouseLeave() {\n  if (headerOverlay?.activeOverlayRef?.value?.isOpen) {\n    return;\n  }\n  resetLastOpenedCategory();\n}\n\nasync function handleMouseOver(category: NavigationModel) {\n  clearTimeout(closeTimer);\n  if (lastOpenedCategoryRef.value?.getUid() === category.getUid()) {\n    return;\n  }\n\n  if (!category.hasChildren()) {\n    return await headerOverlay.closeAll();\n  }\n\n  closeTimer = setTimeout(() => {\n    headerOverlay.open({\n      componentName: componentNames.menu,\n      type: 'left',\n      overrideParams: {\n        forceRender: true,\n        shadowColor: 'dark',\n        mouseLeaveTimeout: 2000,\n        closeOnMouseLeave: true,\n      },\n      props: {\n        category,\n      },\n      onOpen() {\n        lastOpenedCategoryRef.value = category;\n      },\n      onClose() {\n        resetLastOpenedCategory();\n      },\n    });\n  }, 150);\n}\n</script>\n\n<template>\n  <header\n    :class=\"[\n      'header',\n      {\n        'header--inactive': isSearchSuggestionOpenRef,\n      },\n    ]\"\n  >\n    <button class=\"header__mobile-navbar-button header__icon mobile-only\" @click=\"handleMobileMenuClick\">\n      <SVGClose v-show=\"isMobileMenuOpenRef\" class=\"header__icon-close-svg\" width=\"30\" height=\"19\" />\n      <SVGBurger v-show=\"!isMobileMenuOpenRef\" width=\"30\" height=\"19\" />\n    </button>\n    <NuxtLink class=\"header__small-logo desktop-only\" :to=\"$mopI18n.localePath('')\" no-prefetch>\n      <SVGMopLogoSignet class=\"header__breadcrumb-logo-svg\" width=\"40\" height=\"40\" />\n    </NuxtLink>\n\n    <nav\n      :class=\"[\n        'header__nav desktop-only',\n        {\n          'header__nav--active': lastOpenedCategoryRef !== undefined,\n        },\n      ]\"\n      @mouseleave=\"handleMouseLeave\"\n    >\n      <div v-for=\"item in $navigationList\" :key=\"item.getUid()\">\n        <UiNuxtLink\n          v-bind=\"item.getLink()\"\n          :class=\"[\n            'header__link',\n            {\n              'header__link--hover': lastOpenedCategoryRef && lastOpenedCategoryRef.getUid() === item.getUid(),\n              'header__link--active':\n                item.getLink().isLink && activePathRef.length > 0 ? activePathRef[0].getUid() === item.getUid() : false,\n            },\n          ]\"\n          @mouseenter=\"() => handleMouseOver(item)\"\n        >\n          {{ item.getName() }}\n        </UiNuxtLink>\n      </div>\n    </nav>\n    <div class=\"header__logo lock-scroll-padding\">\n      <NuxtLink\n        :title=\"$mopI18n.t('locale.brandName')\"\n        class=\"header__logo-link\"\n        :to=\"$mopI18n.localePath('')\"\n        no-prefetch\n      >\n        <SVGMopLogo class=\"header__logo-image header__filled-svg\" width=\"190\" height=\"40\" />\n      </NuxtLink>\n    </div>\n    <div class=\"header__actions\">\n      <NuxtLink\n        class=\"header__actions-job-search\"\n        :to=\"$mopI18n.localePath(`${$urls.CAREER_PAGE}`)\"\n        :style=\"{ '--bg-color': $mopConfig.getHeaderJobButtonColor() }\"\n        no-prefetch\n        @click=\"trackJobButtonClick\"\n      >\n        {{ $mopI18n.t('locale.jobs.search_button') }}\n      </NuxtLink>\n      <button class=\"header__icon\" @click=\"handleSearchClick\">\n        <SVGClose v-show=\"isSearchSuggestionOpenRef\" width=\"30\" height=\"19\" />\n        <SVGSearch v-show=\"!isSearchSuggestionOpenRef\" width=\"30\" height=\"19\" />\n      </button>\n      <NuxtLink\n        class=\"header__icon header__icon--wishlist\"\n        :to=\"$mopI18n.localePath(`${$urls.WISHLIST_PAGE}`)\"\n        no-prefetch\n      >\n        <SVGHeart width=\"30\" height=\"19\" />\n        <span class=\"header__wishlist-count\">\n          {{ wishlistItemsRef.length || '' }}\n        </span>\n      </NuxtLink>\n    </div>\n  </header>\n</template>\n\n<style lang=\"scss\" scoped>\nheader {\n  @include z(layers, above-layer);\n\n  position: sticky;\n  top: 0;\n  width: 100%;\n  display: flex;\n  background: $white;\n  color: $black;\n  align-items: center;\n  justify-content: space-between;\n  height: $header-height;\n  padding: 0 $global-padding;\n\n  @include apply-upto(small) {\n    height: $mobile-header-height;\n  }\n\n  @include apply-only-touch-device {\n    height: $mobile-header-height;\n  }\n}\n\n.header__nav {\n  display: flex;\n}\n\n.header__small-logo {\n  display: none;\n}\n\n.header__link {\n  @include link-not-underlined(0);\n  @include text-style(strong);\n\n  text-transform: uppercase;\n  margin-right: $space15;\n}\n\n.header__icon {\n  @include link-neutral($space10);\n\n  border: 0;\n  line-height: 0;\n  background: transparent;\n  cursor: pointer;\n  color: inherit;\n  width: $header-icon-width;\n  overflow: hidden;\n  margin-right: -10px;\n\n  &::after {\n    color: inherit;\n  }\n}\n\n.header__mobile-navbar-button {\n  margin-left: -6px;\n}\n\n.header__logo {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.header__logo-image {\n  @include apply-upto(small) {\n    height: 26px;\n    width: auto;\n  }\n\n  @include apply-only-touch-device {\n    height: 26px;\n    width: auto;\n  }\n}\n\n.desktop-only {\n  @include apply-upto(small) {\n    display: none;\n  }\n\n  @include apply-only-touch-device {\n    display: none;\n  }\n}\n\n.mobile-only {\n  @include apply-from(medium) {\n    display: none;\n  }\n\n  @include apply-only-touch-device {\n    display: initial;\n  }\n}\n\n.header__nav--active {\n  .header__link {\n    opacity: $disabled-opacity;\n\n    &::after {\n      border: 0;\n    }\n  }\n\n  .header__link--hover {\n    opacity: 1;\n  }\n}\n\n.header--inactive {\n  .header__link {\n    opacity: $disabled-opacity;\n  }\n}\n\n// exceptions\n\n@media (min-width: 768px) and (max-width: 1100px) and (hover: hover) and (pointer: fine) {\n  header {\n    justify-content: flex-start;\n\n    .header__small-logo {\n      display: inline-flex;\n    }\n\n    .header__nav {\n      flex-grow: 1;\n      padding-left: $space40;\n    }\n\n    .header__logo {\n      display: none;\n    }\n  }\n}\n\n.header__actions {\n  display: flex;\n}\n\n.header__actions-job-search {\n  @include text-style(strong);\n\n  background: var(--bg-color, $black);\n  color: $white;\n  text-transform: uppercase;\n  padding: 8px $space15;\n  margin-right: $space30;\n  align-self: center;\n\n  @include apply-upto(small) {\n    display: none;\n  }\n\n  @include apply-only-touch-device {\n    display: none;\n  }\n}\n\n.header__icon--wishlist {\n  margin-left: $space10;\n  margin-right: -$space5;\n  position: relative;\n\n  @include apply-upto(small) {\n    margin-left: $space5;\n  }\n}\n\n.header__wishlist-count {\n  position: absolute;\n  display: block;\n  top: 4px;\n  right: 5px;\n  height: 15px;\n  font-size: 10px;\n  padding-left: $space5;\n  text-decoration: none;\n}\n</style>\n"],"names":["_hoisted_1","_hoisted_2","_createElementVNode","_hoisted_3","render","_ctx","_cache","_openBlock","_createElementBlock","SVGClose","SVGBurger","$gtm","$breakpoint","useNuxtApp","headerOverlay","useMopOverlay","activePathRef","useMopNavigation","wishlistItemsRef","initWishlist","useMopWishlist","isSearchSuggestionOpenRef","ref","isMobileMenuOpenRef","componentNames","lastOpenedCategoryRef","closeTimer","onMounted","watch","resetLastOpenedCategory","viewport","_b","_a","_d","_c","handleSearchClick","trackJobButtonClick","handleMobileMenuClick","handleMouseLeave","handleMouseOver","category"],"mappings":"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"}