{"version":3,"file":"desktopHeader-b31f6798.js","sources":["../../../../../../src/scripts/modules/desktopHeader.ts"],"sourcesContent":["import { Component } from '@verndale/core';\n\nclass DesktopHeader extends Component {\n  setupDefaults() {\n    this.dom = {\n      subItems: this.el.querySelectorAll('.has-submenu'),\n      subItemWithSubmenu: this.el.querySelectorAll('.has-inner-submenu'),\n      productsCard: this.el.querySelector<HTMLElement>('.desktop-header__card'),\n      accordionBtns: this.el.querySelectorAll(\n        '.desktop-header__nav__submenu-item__accordion-button'\n      ),\n      languageBtn: this.el.querySelector<HTMLElement>(\n        '.desktop-header__nav__utility-nav-item--language'\n      ),\n      loginBtn: this.el.querySelector<HTMLElement>(\n        '.desktop-header__nav__utility-nav-item--login'\n      ),\n      cartBtn: this.el.querySelector<HTMLElement>('.desktop-header__nav__utility-nav-item--cart'),\n      cartContainer: document.querySelector<HTMLElement>(\n        '.cart__container'\n      ),\n      closeCartBtn: document.querySelector<HTMLElement>(\n        '.cart__item__close-button'\n      ),\n      keepBrowsingBtn: document.querySelector<HTMLElement>('.cart__view-basket-button--keep-browsing')\n    };\n  }\n\n  addListeners() {\n    (this.dom.subItems as NodeList).forEach(item => {\n      item.addEventListener('mouseenter', this.toggleSubMenu.bind(this));\n      item.addEventListener('mouseleave', this.toggleSubMenu.bind(this));\n    });\n\n    (this.dom.subItemWithSubmenu as NodeList).forEach(item => {\n      item.addEventListener('mouseenter', this.toggleInnerMenu.bind(this));\n      item.addEventListener('mouseleave', this.toggleInnerMenu.bind(this));\n    });\n\n    (this.dom.accordionBtns as NodeList).forEach(btn => {\n      btn.addEventListener('click', this.toggleAccordion.bind(this));\n    });\n\n    (this.dom.languageBtn as HTMLElement).addEventListener(\n      'click',\n      this.toggleLanguage.bind(this)\n    );\n\n    if (this.dom.loginBtn) {\n      (this.dom.loginBtn as HTMLElement).addEventListener('click', this.toggleLogin.bind(this));\n    }\n\n    (this.dom.cartBtn as HTMLElement)?.addEventListener('click', this.toggleCart.bind(this));\n    (this.dom.closeCartBtn as HTMLElement)?.addEventListener('click', this.closeCartNav.bind(this));\n    (this.dom.keepBrowsingBtn as HTMLElement)?.addEventListener('click', this.closeCartNav.bind(this));\n  }\n\n  closeCartNav() {\n    (this.dom.cartContainer as HTMLElement).setAttribute('hidden', \"true\");\n    (this.dom.cartBtn as HTMLElement).classList.remove('is-active');\n    document.body.style.overflow = 'auto';\n  }\n\n  toggleCart() {\n    (this.dom.cartBtn as HTMLElement).classList.toggle('is-active');\n\n    if ((this.dom.cartContainer as HTMLElement).hidden) {\n      (this.dom.cartContainer as HTMLElement).removeAttribute('hidden');\n      document.body.style.overflow = 'hidden';\n    } else {\n      (this.dom.cartContainer as HTMLElement).setAttribute('hidden', \"true\");\n      document.body.style.overflow = 'auto';\n    }\n  }\n\n  closeAllAccordions(currentBtn: HTMLElement) {\n    (this.dom.accordionBtns as NodeList).forEach(btn => {\n      if (btn !== currentBtn) {\n        const ariaControls = (btn as HTMLElement).getAttribute('aria-controls');\n        if (ariaControls) {\n          const accordionContent = document.getElementById(ariaControls);\n          const minusIcon = (btn as HTMLElement).querySelector('.minus-icon');\n          const plusIcon = (btn as HTMLElement).querySelector('.plus-icon');\n\n          (accordionContent as HTMLElement).setAttribute('hidden', 'true');\n          (minusIcon as HTMLElement).setAttribute('hidden', 'true');\n          (plusIcon as HTMLElement).removeAttribute('hidden');\n        }\n      }\n    });\n  }\n\n  hideOnClickOutside(element: HTMLElement, anchor: HTMLElement, arrowIcon?: HTMLElement) {\n    const outsideClickListener = (event: Event) => {\n      const target = event.target as HTMLElement;\n      if (element !== target && !element.contains(target)) {\n        const ariaControls = anchor.getAttribute('aria-controls');\n\n        if (ariaControls) {\n          const submenu = document.getElementById(ariaControls) as HTMLElement;\n\n          if (!submenu.contains(target)) {\n            anchor.classList.remove('is-active');\n            submenu.hidden = true;\n            if (arrowIcon) {\n              arrowIcon.style.transform = 'rotate(0deg)';\n            }\n            removeClickListener();\n          }\n        }\n      }\n    };\n\n    const removeClickListener = () => {\n      document.removeEventListener('click', outsideClickListener);\n    };\n\n    document.addEventListener('click', outsideClickListener);\n  }\n\n  toggleLogin(e: Event) {\n    const target = e.target as HTMLElement;\n    const parent = target.parentElement as HTMLElement;\n    const anchor = target.closest('a');\n    if (!anchor) return;\n    const ariaControls = anchor.getAttribute('aria-controls');\n\n    if (ariaControls) {\n      const loginContent = document.getElementById(ariaControls);\n      this.hideOnClickOutside(parent, anchor);\n\n      if (!loginContent) return;\n      if (loginContent.hidden) {\n        loginContent.removeAttribute('hidden');\n        anchor.classList.add('is-active');\n      } else {\n        loginContent.setAttribute('hidden', \"true\");\n        anchor.classList.remove('is-active');\n      }\n    }\n  }\n\n  toggleLanguage(e: Event) {\n    const target = e.target as HTMLElement;\n    const parent = target.parentElement as HTMLElement;\n    const anchor = target.closest('a');\n    if (!anchor) return;\n    const ariaControls = anchor.getAttribute('aria-controls');\n\n    if (ariaControls) {\n      const languageContent = document.getElementById(ariaControls);\n      const arrowIcon = anchor.querySelector('.down-icon');\n\n      this.hideOnClickOutside(parent, anchor, arrowIcon as HTMLElement);\n\n      if (!languageContent) return;\n      if (languageContent.hidden) {\n        languageContent.removeAttribute('hidden');\n        (arrowIcon as HTMLElement).style.transform = 'rotate(180deg)';\n        anchor.classList.add('is-active');\n      } else {\n        languageContent.setAttribute('hidden', \"true\");\n        (arrowIcon as HTMLElement).style.transform = 'rotate(0deg)';\n        anchor.classList.remove('is-active');\n      }\n    }\n  }\n\n  toggleAccordion(e: Event) {\n    const target = e.target as HTMLElement;\n    const button = target.closest('button');\n    if (!button) return;\n    const ariaControls = button.getAttribute('aria-controls');\n\n    if (ariaControls) {\n      const accordionContent = document.getElementById(ariaControls);\n      const minusIcon = button.querySelector('.minus-icon');\n      const plusIcon = button.querySelector('.plus-icon');\n\n      this.closeAllAccordions(button);\n\n      if ((accordionContent as HTMLElement).hidden) {\n        (accordionContent as HTMLElement).removeAttribute('hidden');\n        (minusIcon as HTMLElement).removeAttribute('hidden');\n        (plusIcon as HTMLElement).setAttribute('hidden', \"true\");\n      } else {\n        (accordionContent as HTMLElement).setAttribute('hidden', \"true\");\n        (minusIcon as HTMLElement).setAttribute('hidden', \"true\");\n        (plusIcon as HTMLElement).removeAttribute('hidden');\n      }\n    }\n  }\n\n  toggleInnerMenu(e: Event) {\n    const li = e.target as HTMLElement;\n    const parent = li.parentElement;\n    const anchor = li.querySelector('.desktop-header__nav-link') as HTMLElement;\n    const ariaControls = (anchor as HTMLElement).getAttribute('aria-controls');\n\n    if (ariaControls) {\n      const submenu = document.getElementById(ariaControls) as HTMLElement;\n      const list = (submenu as HTMLElement).querySelector('.desktop-header__nav-list') as HTMLElement;\n\n      if (e.type === 'mouseenter' && submenu) {\n        anchor.classList.add('is-active');\n        submenu.style.top = '0';\n        submenu.removeAttribute('hidden');\n        this.calculatePosition((parent as HTMLElement).parentElement as HTMLElement, submenu);\n\n        if (list.offsetHeight > (parent as HTMLElement).offsetHeight)\n          (parent as HTMLElement).style.height = `${list.offsetHeight}px`;\n      }\n\n      if (e.type === 'mouseleave' && submenu) {\n        anchor.classList.remove('is-active');\n        submenu.setAttribute('hidden', \"true\");\n        submenu.removeAttribute('style');\n        (parent as HTMLElement).removeAttribute('style');\n        (parent as HTMLElement).parentElement?.removeAttribute('style');\n      }\n    }\n  }\n\n  toggleSubMenu(e: Event) {\n    const target = e.target as HTMLElement;\n    const anchor = target.querySelector('.desktop-header__nav-link');\n    if (!anchor) return;\n    const ariaControls = anchor.getAttribute('aria-controls');\n\n    if(ariaControls) {\n      const submenu = document.getElementById(ariaControls);\n\n      if (e.type === 'mouseenter' && submenu) {\n        anchor.classList.add('is-active');\n        submenu.removeAttribute('hidden');\n        this.calculatePosition(submenu);\n      }\n\n      if (e.type === 'mouseleave' && submenu) {\n        anchor.classList.remove('is-active');\n        submenu.setAttribute('hidden', \"true\");\n      }\n    }\n  }\n\n  calculatePosition(element: HTMLElement, innerMenu?: HTMLElement) {\n    if (innerMenu) {\n      element.style.width = `${element.offsetWidth + innerMenu.offsetWidth}px`;\n    }\n\n    const mainWrapper = document.querySelector('.main-header') as HTMLElement;\n\n    const elementPosition = element.getBoundingClientRect();\n    const wrapperPosition = mainWrapper.getBoundingClientRect();\n    const elementWidth = element.offsetWidth;\n    const wrapperWidth = mainWrapper.offsetWidth;\n    const elementRight = elementPosition.right;\n    const elementLeft = elementPosition.left;\n\n    if (elementRight > wrapperPosition.left + wrapperWidth) {\n      element.classList.add('desktop-header__submenu--right');\n    } else if (elementLeft < elementWidth) {\n      element.classList.add('desktop-header__submenu--left');\n    }\n  }\n}\n\nexport default DesktopHeader;\n"],"names":["DesktopHeader","Component","item","btn","_a","_b","_c","currentBtn","ariaControls","accordionContent","minusIcon","plusIcon","element","anchor","arrowIcon","outsideClickListener","event","target","submenu","removeClickListener","e","parent","loginContent","languageContent","button","li","list","innerMenu","mainWrapper","elementPosition","wrapperPosition","elementWidth","wrapperWidth","elementRight","elementLeft"],"mappings":"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"}