{"version":3,"sources":["webpack://@verndale/toolkit/./src/js/modules/ExpandSelectBox.js"],"names":[],"mappings":"6JAGA,eAA8B,KAAU,CACtC,eAAgB,CACd,KAAK,IAAM,CACT,QAAS,KAAK,GAAG,cAAc,iBAC/B,QAAS,KAAK,GAAG,cAAc,mBAC/B,OAAQ,CACN,GAAG,KAAK,GAAG,iBAAiB,2BAC5B,GAAG,KAAK,GAAG,iBAAiB,0BAKlC,cAAe,CACb,KAAK,IAAI,QAAQ,iBAAiB,QAAS,KAAK,cAAc,KAAK,OACnE,KAAK,IAAI,OAAO,QAAQ,GAAS,CAC/B,EAAM,iBAAiB,SAAU,KAAK,iBAAiB,KAAK,SAE9D,SAAS,iBAAiB,QAAS,KAAK,mBAAmB,KAAK,YAG5D,gBAAgB,CACpB,KAAS,IAAI,QAAQ,UAAU,SAAS,QACtC,MAAM,QAAQ,KAAK,IAAI,QAAS,CAAE,QAAS,CAAC,EAAG,KAAM,SACrD,KAAK,IAAI,QAAQ,UAAU,OAAO,SAElC,MAAK,IAAI,QAAQ,UAAU,IAAI,QAC/B,QAAQ,KAAK,IAAI,QAAS,CAAE,QAAS,CAAC,EAAG,MAI7C,iBAAiB,EAAG,CAClB,KAAM,CAAE,UAAW,EACb,EAAU,EAAO,WAAW,cAAc,cAEhD,GACM,GAAO,QACT,EAAQ,MAAM,QAAU,QAExB,MAAK,gBAAgB,GACrB,EAAQ,MAAM,QAAU,SAK9B,mBAAmB,EAAG,CACpB,KAAU,GAAG,SAAS,EAAE,SACtB,KAAK,IAAI,QAAQ,UAAU,OAAO,QAItC,gBAAgB,EAAG,CACjB,KAAM,CAAE,UAAW,EACb,EAAU,EAAO,WAAW,cAAc,cAEhD,GAME,CAJE,GAAG,EAAQ,iBAAiB,2BAC5B,GAAG,EAAQ,iBAAiB,yBAGnB,QAAQ,GAAQ,CACzB,KAAM,GAAQ,GAAI,OAAM,UACxB,EAAK,QAAU,GACf,EAAK,cAAc,MAM3B,UAAe","file":"scripts/252.bundle.js","sourcesContent":["import { Component } from '@verndale/core';\nimport { animate } from 'motion';\n\nclass ExpandSelectBox extends Component {\n  setupDefaults() {\n    this.dom = {\n      trigger: this.el.querySelector('.expand-title'),\n      content: this.el.querySelector('.expand-content'),\n      stacks: [\n        ...this.el.querySelectorAll('.checkbox-stack > input'),\n        ...this.el.querySelectorAll('.radio-stack > input')\n      ]\n    };\n  }\n\n  addListeners() {\n    this.dom.trigger.addEventListener('click', this.toggleContent.bind(this));\n    this.dom.stacks.forEach(stack => {\n      stack.addEventListener('change', this.handleStackClick.bind(this));\n    });\n    document.addEventListener('click', this.handleClickOutside.bind(this));\n  }\n\n  async toggleContent() {\n    if (this.dom.content.classList.contains('open')) {\n      await animate(this.dom.content, { opacity: [1, 0] }).finished;\n      this.dom.content.classList.remove('open');\n    } else {\n      this.dom.content.classList.add('open');\n      animate(this.dom.content, { opacity: [0, 1] });\n    }\n  }\n\n  handleStackClick(e) {\n    const { target } = e;\n    const submenu = target.parentNode.querySelector('.sub-items');\n\n    if (submenu) {\n      if (target.checked) {\n        submenu.style.display = 'block';\n      } else {\n        this.uncheckChildren(e);\n        submenu.style.display = 'none';\n      }\n    }\n  }\n\n  handleClickOutside(e) {\n    if (!this.el.contains(e.target)) {\n      this.dom.content.classList.remove('open');\n    }\n  }\n\n  uncheckChildren(e) {\n    const { target } = e;\n    const submenu = target.parentNode.querySelector('.sub-items');\n\n    if (submenu) {\n      const childItems = [\n        ...submenu.querySelectorAll('.checkbox-stack > input'),\n        ...submenu.querySelectorAll('.radio-stack > input')\n      ];\n\n      childItems.forEach(item => {\n        const event = new Event('change');\n        item.checked = false;\n        item.dispatchEvent(event);\n      });\n    }\n  }\n}\n\nexport default ExpandSelectBox;\n"],"sourceRoot":""}