{"version":3,"sources":["webpack:///./assets/javascripts/modules/components/DropdownComponent.js"],"names":["DropdownComponent","compEl","_classCallCheck","this","_this","_possibleConstructorReturn","__proto__","Object","getPrototypeOf","call","dropdownTrigger","$component","querySelectorAll","SELECTORS","Component","accordion","item","items","_get","prototype","dom","readDOM","bindEvents","querySelector","_this2","forEach","trigger","i","addEventListener","handleDropdownTrigger","setAttribute","slideToggle","window","matchMedia","matches","bindAccordion","_this3","prepend","event","preventDefault","classList","toggle","element","box","nextSibling","style","display","_this4","contents","length","content","contains","remove","add","hasAttribute","dropdownOthers","getAttribute","id","dataset"],"mappings":"wWAEqBA,cAWnB,SAAAA,EAAYC,gGAAQC,CAAAC,KAAAH,GAAA,IAAAI,mKAAAC,CAAAF,MAAAH,EAAAM,WAAAC,OAAAC,eAAAR,IAAAS,KAAAN,KACZF,IADY,OAElBG,EAAKM,gBAAkBN,EAAKO,WAAWC,iBAAiBR,EAAKS,UAAUH,iBAFrDN,qUAXyBU,6CAG3C,OACEC,UAAW,sBACXC,KAAM,0BACNC,MAAO,4BACPP,gBAAiB,8TAUnBQ,CAAAlB,EAAAmB,UAAAb,WAAAC,OAAAC,eAAAR,EAAAmB,WAAA,SAAAhB,MAAAM,KAAAN,MACAA,KAAKiB,IAAMjB,KAAKkB,UAChBlB,KAAKmB,+CAIL,OACEP,UAAWZ,KAAKQ,WAAWY,cAAcpB,KAAKU,UAAUE,WACxDC,KAAMb,KAAKQ,WAAWY,cAAcpB,KAAKU,UAAUG,MACnDC,MAAOd,KAAKQ,WAAWC,iBAAiBT,KAAKU,UAAUI,6CAI9C,IAAAO,EAAArB,KAEXA,KAAKO,gBAAgBe,QAAQ,SAACC,EAASC,GACrCD,EAAQE,iBAAiB,QAAS,kBAChCJ,EAAKK,sBAAsBH,KAE7BA,EAAQI,aAAa,wBAAyB,oBAAsBH,GACpEH,EAAKO,YAAYL,KAGhBM,OAAOC,WAAW,uBAAuBC,SAC1C/B,KAAKgC,wDAIO,IAAAC,EAAAjC,KACXA,KAAKiB,IAAIL,YACVZ,KAAKiB,IAAIL,UAAUsB,QAAQlC,KAAKiB,IAAIJ,MACpCb,KAAKiB,IAAIJ,KAAKY,iBAAiB,QAAS,SAACU,GACvCA,EAAMC,iBACNH,EAAKhB,IAAIJ,KAAKwB,UAAUC,OAAO,YAC/BL,EAAKhB,IAAIH,MAAMQ,QAAQ,SAACT,GACtBA,EAAKwB,UAAUC,OAAO,iDAMlBC,GACV,IAAIC,EAAMD,EAAQE,YACR,MAAPD,IACwB,KAAtBA,EAAIE,MAAMC,QACXH,EAAIE,MAAMC,QAAU,OAEQ,SAAtBH,EAAIE,MAAMC,QAChBH,EAAIE,MAAMC,QAAU,QAGpBH,EAAIE,MAAMC,QAAU,sDAKJpB,GAAS,IAAAqB,EAAA5C,KAC7BuB,EAAQc,UAAUC,OAAO,QAEzBtC,KAAK4B,YAAYL,GAGjB,IAAIsB,EAAW7C,KAAKQ,WAAWC,iBAAiB,qBAC7CoC,EAASC,QAAU,IACpBD,EAASvB,QAAQ,SAAAyB,GACZA,EAAQV,UAAUW,SAAS,aAAeD,EAAQV,UAAUW,SAAS,UACtED,EAAQV,UAAUC,OAAO,QACzBS,EAAQV,UAAUY,OAAO,YACzBL,EAAKhB,YAAYmB,GACjBA,EAAQ3B,cAAc,QAAQiB,UAAUY,OAAO,sBAGnD1B,EAAQc,UAAUC,OAAO,aAGvBf,EAAQH,cAAc,QAAQiB,UAAUW,SAAS,mBAGnDzB,EAAQH,cAAc,QAAQiB,UAAUY,OAAO,mBAF/C1B,EAAQH,cAAc,QAAQiB,UAAUa,IAAI,mBAK3ClD,KAAKQ,WAAW2C,aAAa,yBAC9BnD,KAAKoD,eAAe7B,EAAQ8B,aAAa,iEAK9BC,GACbtD,KAAKO,gBAAgBe,QAAQ,SAACC,GAC5B,GAAGA,EAAQgC,QAAQhD,kBAAoB+C,EAAI,CACzC,IAAId,EAAMjB,EAAQkB,YACR,MAAPD,IAAaA,EAAIE,MAAMC,QAAU,QACpCpB,EAAQc,UAAUY,OAAO,QACzB1B,EAAQH,cAAc,QAAQiB,UAAUY,OAAO,+BA9GlCpD","file":"component-DropdownComponent.chunks.js","sourcesContent":["import Component from '../abstracts/Component';\n\nexport default class DropdownComponent extends Component {\n\n  get SELECTORS() {\n    return {\n      accordion: '[data-js-accordion]',\n      item: '[data-js-item=\"active\"]',\n      items: '[data-js-item=\"inactive\"]',\n      dropdownTrigger: '[data-dropdown-trigger]',\n    };\n  }\n\n  constructor(compEl) {\n    super(compEl);\n    this.dropdownTrigger = this.$component.querySelectorAll(this.SELECTORS.dropdownTrigger);\n  }\n\n  render() {\n    super.render();\n    this.dom = this.readDOM();\n    this.bindEvents();\n  }\n\n  readDOM() {\n    return {\n      accordion: this.$component.querySelector(this.SELECTORS.accordion),\n      item: this.$component.querySelector(this.SELECTORS.item),\n      items: this.$component.querySelectorAll(this.SELECTORS.items),\n    }\n  }\n\n  bindEvents() {\n    //Utilities dropdown : cart, checkout, my account mobile navigation\n    this.dropdownTrigger.forEach((trigger, i) => {\n      trigger.addEventListener('click', () =>\n        this.handleDropdownTrigger(trigger)\n      );\n      trigger.setAttribute('data-dropdown-trigger', 'dropdown-service-' + i);\n      this.slideToggle(trigger);\n    });\n\n    if(window.matchMedia('(max-width: 1279px)').matches) {\n      this.bindAccordion();\n    }\n  }\n\n  bindAccordion() {\n    if(this.dom.accordion) {\n      this.dom.accordion.prepend(this.dom.item);\n      this.dom.item.addEventListener('click', (event) => {\n        event.preventDefault();\n        this.dom.item.classList.toggle('selected'),\n        this.dom.items.forEach((item) => {\n          item.classList.toggle('open');\n        });\n      });\n    }\n  }\n\n  slideToggle(element) {\n    let box = element.nextSibling;\n    if(box != null) {\n      if(box.style.display === '') {\n        box.style.display = 'none';\n      }\n      else if(box.style.display === 'none') {\n        box.style.display = 'block';\n      }\n      else {\n        box.style.display = 'none';\n      }\n    }\n  }\n\n  handleDropdownTrigger(trigger) {\n    trigger.classList.toggle('open');\n\n    this.slideToggle(trigger);\n\n    //closes other dropdown(s) when a new one is opened\n    let contents = this.$component.querySelectorAll('.sizes-subsection');\n    if(contents.length >= 1) {\n      contents.forEach(content => {\n        if(content.classList.contains('selected') && content.classList.contains('open')) {\n          content.classList.toggle('open');\n          content.classList.remove('selected');\n          this.slideToggle(content);\n          content.querySelector('span').classList.remove('icon-chevron-up');\n          }\n        });\n      trigger.classList.toggle('selected');\n    }\n\n    if(!trigger.querySelector('span').classList.contains('icon-chevron-up')) {\n      trigger.querySelector('span').classList.add('icon-chevron-up');\n    } else {\n      trigger.querySelector('span').classList.remove('icon-chevron-up');\n    }\n\n    if(this.$component.hasAttribute('data-dropdown-others')) {\n      this.dropdownOthers(trigger.getAttribute('data-dropdown-trigger'));\n    }\n  }\n\n  //leaves only the last selected accordion open\n  dropdownOthers(id) {\n    this.dropdownTrigger.forEach((trigger) => {\n      if(trigger.dataset.dropdownTrigger !== id) {\n        let box = trigger.nextSibling;\n        if(box != null) box.style.display = 'none';\n        trigger.classList.remove('open');\n        trigger.querySelector('span').classList.remove('icon-chevron-up');\n      }\n    });\n  }\n}\n"],"sourceRoot":""}