{"version":3,"file":"dropdown-Fyhlu80G.js","sources":["../../src/scripts/modules/dropdown.ts"],"sourcesContent":["import { Component } from '@verndale/core';\n\nclass Dropdown extends Component {\n  customOptsList: HTMLElement[];\n  optionChecked: string = '';\n  optionHoveredIndex: number = -1;\n\n  constructor(el: HTMLElement) {\n    super(el);\n    this.dom.elSelectCustom = document.querySelectorAll('.js-select-custom')[0] as HTMLElement;\n    this.dom.elSelectCustomBox = this.dom.elSelectCustom.querySelector(\n      '.select-custom-trigger'\n    ) as HTMLElement;\n    this.dom.elSelectCustomOpts = this.dom.elSelectCustom.children[1] as HTMLElement;\n    this.dom.svg = this.el.querySelector<HTMLElement>('.select-custom-trigger-wrapper svg');\n    this.customOptsList = Array.from(this.dom.elSelectCustomOpts.children) as HTMLElement[];\n  }\n\n  setupDefaults() {\n    this.dom = {\n      el: this.el,\n      elSelectNative: this.el.querySelector<HTMLSelectElement>('.js-select-native'),\n      elSelectCustom: this.el.querySelector<HTMLElement>('.js-select-custom'),\n      elSelectCustomBox:\n        (this.el.querySelector<HTMLElement>('.js-select-custom')?.children[0] as HTMLElement) ||\n        null,\n      elSelectCustomOpts:\n        (this.el.querySelector<HTMLElement>('.js-select-custom')?.children[1] as HTMLElement) ||\n        null\n    };\n\n    this.customOptsList = Array.from(\n      (this.dom.elSelectCustomOpts as HTMLElement).children\n    ) as HTMLElement[];\n    this.optionHoveredIndex = this.customOptsList.length - 1;\n  }\n\n  addListeners() {\n    (this.dom.elSelectCustomBox as HTMLElement).addEventListener(\n      'click',\n      this.toggleCustomSelect.bind(this)\n    );\n    (this.dom.elSelectNative as HTMLInputElement).addEventListener(\n      'change',\n      this.syncNativeSelect.bind(this)\n    );\n\n    this.customOptsList.forEach((elOption, index) => {\n      (elOption as HTMLElement).addEventListener('click', e => this.optionClickHandler(e));\n      (elOption as HTMLElement).addEventListener('mouseenter', () =>\n        this.updateCustomSelectHovered(index)\n      );\n    });\n\n    document.addEventListener('click', this.watchClickOutside.bind(this));\n    document.addEventListener('keydown', this.supportKeyboardNavigation.bind(this));\n  }\n\n  toggleCustomSelect() {\n    const isClosed = !(this.dom.elSelectCustom as HTMLElement).classList.contains('isActive');\n\n    if (isClosed) {\n      this.openSelectCustom();\n    } else {\n      this.closeSelectCustom();\n    }\n  }\n\n  openSelectCustom() {\n    (this.dom.elSelectCustom as HTMLElement).classList.add('isActive');\n    (this.dom.elSelectCustom as HTMLElement).setAttribute('aria-hidden', 'false');\n\n    if (this.optionChecked) {\n      const optionCheckedIndex = this.customOptsList.findIndex(\n        el => el.getAttribute('data-value') === this.optionChecked\n      );\n      this.updateCustomSelectHovered(optionCheckedIndex);\n    }\n\n    (this.dom.svg as HTMLElement).style.transform = 'rotate(180deg)';\n  }\n\n  closeSelectCustom(): void {\n    (this.dom.elSelectCustom as HTMLElement).classList.remove('isActive');\n    (this.dom.elSelectCustom as HTMLElement).setAttribute('aria-hidden', 'true');\n    this.updateCustomSelectHovered(-1);\n\n    (this.dom.svg as HTMLElement).style.transform = 'rotate(0deg)';\n  }\n\n  updateCustomSelectHovered(newIndex: number): void {\n    const prevOption = (this.dom.elSelectCustomOpts as HTMLElement).children[\n      this.optionHoveredIndex\n    ];\n    const option = (this.dom.elSelectCustomOpts as HTMLElement).children[newIndex];\n\n    if (prevOption) {\n      prevOption.classList.remove('isHover');\n    }\n    if (option) {\n      option.classList.add('isHover');\n    }\n\n    this.optionHoveredIndex = newIndex;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  optionClickHandler(e: MouseEvent) {\n    const target = e.target as HTMLElement;\n    const value = target.getAttribute('data-value') || '';\n\n    (this.dom.elSelectNative as HTMLInputElement).value = value;\n    (this.dom.elSelectNative as HTMLInputElement).dispatchEvent(\n      new Event('change', { bubbles: true })\n    );\n    this.updateCustomSelectChecked(value, target.textContent || '');\n    this.closeSelectCustom();\n  }\n\n  syncNativeSelect(e: Event) {\n    const target = e.target as HTMLSelectElement;\n    const value = target.value;\n    const elRespectiveCustomOption = (this.dom.elSelectCustomOpts as HTMLElement).querySelector(\n      `[data-value=\"${value}\"]`\n    ) as HTMLElement;\n\n    this.updateCustomSelectChecked(value, elRespectiveCustomOption.textContent || '');\n  }\n\n  updateCustomSelectChecked(value: string, text: string) {\n    const prevValue = this.optionChecked;\n    const elPrevOption = (this.dom.elSelectCustomOpts as HTMLElement).querySelector(\n      `[data-value=\"${prevValue}\"]`\n    ) as HTMLElement;\n    const elOption = (this.dom.elSelectCustomOpts as HTMLElement).querySelector(\n      `[data-value=\"${value}\"]`\n    ) as HTMLElement;\n\n    if (elPrevOption) {\n      elPrevOption.classList.remove('isActive');\n    }\n\n    if (elOption) {\n      elOption.classList.add('isActive');\n    }\n\n    (this.dom.elSelectCustomBox as HTMLElement).dataset.state = 'slide-in';\n    (this.dom.elSelectCustomBox as HTMLElement).textContent = text;\n    this.optionChecked = value;\n\n    setTimeout(() => {\n      (this.dom.elSelectCustomBox as HTMLElement).dataset.state = 'active';\n    }, 1000);\n  }\n\n  watchClickOutside(e: MouseEvent) {\n    if (!(this.dom.elSelectCustom as HTMLElement).contains(e.target as Node)) {\n      this.closeSelectCustom();\n    }\n  }\n\n  supportKeyboardNavigation(e: KeyboardEvent) {\n    switch (e.keyCode) {\n      case 40: // Arrow Down\n        if (this.optionHoveredIndex >= 0) {\n          e.preventDefault();\n          this.updateCustomSelectHovered(this.optionHoveredIndex + 1);\n        }\n        break;\n      case 38: // Arrow Up\n        if (this.optionHoveredIndex > 0) {\n          e.preventDefault();\n          this.updateCustomSelectHovered(this.optionHoveredIndex - 1);\n        }\n        break;\n      case 13: // Enter\n        if (this.optionHoveredIndex !== -1) {\n          const option = (this.dom.elSelectCustomOpts as HTMLElement).children[\n            this.optionHoveredIndex\n          ] as HTMLElement;\n          const value = option.getAttribute('data-value') || '';\n          (this.dom.elSelectNative as HTMLInputElement).value = value;\n          (this.dom.elSelectNative as HTMLInputElement).dispatchEvent(\n            new Event('change', { bubbles: true })\n          );\n          this.updateCustomSelectChecked(value, option.textContent || '');\n          this.closeSelectCustom();\n        }\n        break;\n      case 32: // Space\n        if ((this.dom.elSelectCustom as HTMLElement).classList.contains('isActive')) {\n          e.preventDefault();\n          if (this.optionHoveredIndex !== -1) {\n            const option = (this.dom.elSelectCustomOpts as HTMLElement).children[\n              this.optionHoveredIndex\n            ] as HTMLElement;\n            const value = option.getAttribute('data-value') || '';\n            (this.dom.elSelectNative as HTMLInputElement).value = value;\n            (this.dom.elSelectNative as HTMLInputElement).dispatchEvent(\n              new Event('change', { bubbles: true })\n            );\n            this.updateCustomSelectChecked(value, option.textContent || '');\n            this.closeSelectCustom();\n          }\n        }\n        break;\n      case 27: // Escape\n        this.closeSelectCustom();\n        break;\n    }\n  }\n}\n\nexport default Dropdown;\n"],"names":["Dropdown","Component","el","__publicField","_a","_b","elOption","index","e","optionCheckedIndex","newIndex","prevOption","option","target","value","elRespectiveCustomOption","text","prevValue","elPrevOption"],"mappings":"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"}