{"version":3,"file":"menu-slideout.e7cbabaf.js","sources":["../modules/menu-slideout/menu-slideout.js"],"sourcesContent":["import DynamicSectionElement from '@/scripts/dynamic-section-element.js'\nimport { trapFocus, removeTrapFocus } from '@shopify/theme-a11y'\nimport { handleLinksClick } from '@/scripts/datalayer'\nimport { decode } from '@/scripts/utils'\n\nclass MenuSlideout extends DynamicSectionElement {\n  constructor () {\n    super()\n    this.openMenuSlideoutEl = document.querySelector('.js-open-menu-slideout')\n    this.closeMenuSlideoutEl = document.querySelector('.js-close-menu-slideout')\n\n    this.addEventListener('keyup', event => event.code.toUpperCase() === 'ESCAPE' && this.closeDrawer())\n  }\n\n  openDrawer (event) {\n    if (event && event.preventDefault) {\n      if (event.metaKey) {\n        return\n      }\n      event.preventDefault()\n    }\n\n    if (this.openMenuSlideoutEl && !this.openMenuSlideoutEl.classList.contains('hidden')) {\n      this.openMenuSlideoutEl.classList.add('hidden')\n    }\n\n    if (this.closeMenuSlideoutEl && this.closeMenuSlideoutEl.classList.contains('hidden')) {\n      this.closeMenuSlideoutEl.classList.remove('hidden')\n    }\n\n    this.classList.add('open-slideout')\n    document.body.classList.add('overflow-hidden', 'is-open-slideout', 'is-open-menu-slideout' )\n    if (event && event.currentTarget) {\n      const activeHandle = this.querySelector(`[data-handle=\"${event.currentTarget.dataset.handle}\"]`)\n      this.openChildMenu(activeHandle)\n    }\n  }\n\n  closeDrawer () {\n    if (this.closeMenuSlideoutEl && !this.closeMenuSlideoutEl.classList.contains('hidden')) {\n      this.closeMenuSlideoutEl.classList.add('hidden')\n    }\n\n    if (this.openMenuSlideoutEl && this.openMenuSlideoutEl.classList.contains('hidden')) {\n      this.openMenuSlideoutEl.classList.remove('hidden')\n    }\n\n    this.classList.remove('open-slideout')\n    document.body.classList.remove('overflow-hidden', 'is-open-slideout', 'is-open-menu-slideout', 'is-open-menu-level-2', 'is-open-menu-level-3' )\n    document.querySelector('.js-data-predictive-search').classList.add('hidden')\n\n    removeTrapFocus()\n  }\n\n  openChildMenu (element) {\n    if (!element) return\n\n    this.hiddenMenuLevel('is-open-menu-level-3')\n    this.hiddenMenuLevel2()\n\n    const currentActiveMenu = element.parentElement.querySelector('.js-menu-item.active')\n    if (currentActiveMenu === element) {\n      this.resetAllActiveMenuLevel('.js-menu-item')\n      return\n    }\n\n    if (element && element.dataset.links) {\n      const data = JSON.parse(decode(element.dataset.links))\n      const current = data[0].current\n      document.querySelector('.js-selected-menu-level-2').textContent = current\n      const contentEl = document.querySelector('.js-content-menu-level-2')\n      let htmlItem = []\n\n      data.forEach(item => {\n        const openNewTab = item.openNewTab ? 'target=\"_blank\"' : ''\n        const dataMenu = item.links.data.length > 0 ? `data-links='${JSON.stringify(item)}'` : ''\n        const jsClass = item.links.data.length > 0 ? 'js-open-menu-level-3' : ''\n        const icon = item.links.data.length > 0 ? `<div class=\"icon w-2 h-[13px] text-white cursor-pointer ${jsClass}\" ${dataMenu}>\n            <svg viewBox=\"0 0 8 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0.113175 0.879678L0.143921 0.851562H2.79761L7.39957 5.88407L7.99969 6.54033L7.41802 7.21299L2.73427 12.6295H0.100746L0.0947266 12.6243L5.32352 6.57748L0.113175 0.879678Z\" fill=\"currentColor\"/>\n            </svg>\n          </div>` : ''\n          let menuItem = `<li class=\"js-menu-item js-menu-item-level-2 menu-slideout-item relative flex justify-between items-center py-3 first:mt-3\">\n              <a href=\"${item.link}\" ${openNewTab} class=\"caption menu-text header-link flex w-fit justify-between js-open-menu-level-3 menu-slideout-subitem ${jsClass}\" ${dataMenu} data-component=\"Left Hand Nav\" data-position=\"Secondary\">\n                <span>${item.title}</span>\n              </a>\n              ${icon}\n          </li>`\n        htmlItem.push(menuItem)\n      })\n\n      const dataMenuHTML = `<div class=\"flex flex-col w-full\">${htmlItem.join('')}</div>`\n      contentEl.innerHTML = dataMenuHTML\n\n      this.resetAllActiveMenuLevel('.js-menu-item')\n      element.classList.add('active')\n      this.openMenuLevel('is-open-menu-level-2')\n      this.openChildMenuLevel3()\n    }\n  }\n\n  openChildMenuLevel3 () {\n    const menuItemLevel3Els = document.querySelectorAll('.js-open-menu-level-3')\n\n    handleLinksClick(menuItemLevel3Els)\n\n    menuItemLevel3Els.forEach(item => {\n      item.addEventListener('mouseover', () => {\n        if (!item.dataset.links) {\n          this.hiddenMenuLevel('is-open-menu-level-3')\n          return\n        }\n        const data = JSON.parse(item.dataset.links)\n        const current = data.links.current\n        document.querySelector('.js-selected-menu-level-3').textContent = current\n        const contentEl = document.querySelector('.js-content-menu-level-3')\n\n        let htmlItem = []\n\n        data.links.data.forEach(item => {\n          const openNewTab = item.openNewTab ? 'target=\"_blank\"' : ''\n          let icon = item.type === 'collection_link' && item.icon ? `<img width=\"20px\" height=\"20px\" src=\"${item.icon}\" alt=\"${item.title}\">` : ''\n          let menuItem = `<li class=\"flex justify-between items-center mt-6\">\n            <a href=\"${item.link}\" ${openNewTab} class=\"caption menu-text header-link w-fit js-datalayer-menu-item-level-3 menu-slideout-subitem\" data-component=\"Left Hand Nav\" data-position=\"Tertiary\"><span>${item.title}</span></a>\n            ${icon}\n            </li>`\n          htmlItem.push(menuItem)\n        })\n\n        const dataMenuHTML = `<div class=\"flex flex-col w-full\">${htmlItem.join('')}</div>`\n        contentEl.innerHTML = dataMenuHTML\n\n        this.resetAllActiveMenuLevel('.js-menu-item-level-2')\n        const parentEl = item.parentElement\n        parentEl.classList.add('active')\n        this.openMenuLevel('is-open-menu-level-3')\n\n        const menuItemLevel3 = document.querySelectorAll('.js-datalayer-menu-item-level-3')\n        handleLinksClick(menuItemLevel3)\n      })\n    })\n  }\n\n  resetAllActiveMenuLevel (className) {\n    const menuItemEls = document.querySelectorAll(className)\n    menuItemEls.forEach(item => {\n      if (item.classList.contains('active')) {\n        item.classList.remove('active')\n      }\n    })\n  }\n\n  openMenuLevel(className) {\n    const body = document.body\n    if (!body.classList.contains(className)) {\n      body.classList.add(className)\n    }\n  }\n\n  hiddenMenuLevel2(inactiveParentMenu) {\n    this.hiddenMenuLevel('is-open-menu-level-3')\n    this.hiddenMenuLevel('is-open-menu-level-2')\n\n    if (inactiveParentMenu) {\n      const currentActiveMenu = this.querySelector('.js-menu-item.active')\n      currentActiveMenu.classList.remove('active')\n    }\n  }\n\n  hiddenMenuLevel(className) {\n    const body = document.body\n    if (body.classList.contains(className)) {\n      body.classList.remove(className)\n    }\n  }\n}\n\ncustomElements.define('menu-slideout', MenuSlideout)\n"],"names":["MenuSlideout","DynamicSectionElement","constructor","openMenuSlideoutEl","document","querySelector","closeMenuSlideoutEl","addEventListener","event","code","toUpperCase","closeDrawer","openDrawer","preventDefault","metaKey","classList","contains","add","remove","body","currentTarget","activeHandle","dataset","handle","openChildMenu","removeTrapFocus","element","hiddenMenuLevel","hiddenMenuLevel2","parentElement","resetAllActiveMenuLevel","links","data","JSON","parse","decode","current","textContent","contentEl","htmlItem","forEach","item","openNewTab","dataMenu","length","stringify","jsClass","icon","menuItem","link","title","push","dataMenuHTML","join","innerHTML","openMenuLevel","openChildMenuLevel3","menuItemLevel3Els","querySelectorAll","handleLinksClick","type","menuItemLevel3","className","inactiveParentMenu","customElements","define"],"mappings":"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"}