{"version":3,"file":"audienceQuestionnarie-JAMPAZZG.js","sources":["../../src/scripts/modules/audienceQuestionnarie.ts"],"sourcesContent":["import { Component } from '@verndale/core';\nimport { isTabletLandscape } from '../helpers';\n\nclass AudienceQuestionnaire extends Component {\n  prevSelectedValue: string | null = null;\n\n  constructor(el: HTMLElement) {\n    super(el);\n    this.initCards();\n    this.prevSelectedValue = (this.dom.audienceSelector as HTMLSelectElement).value;\n    this.initResizeObserver();\n  }\n\n  setupDefaults() {\n    this.dom = {\n      el: this.el,\n      audienceSelector: this.el.querySelector<HTMLElement>('.audience-selector'),\n      audiencePanels: this.el.querySelectorAll<HTMLElement>(\n        '.audience-questionnaire__card-container'\n      ),\n      audienceCard: this.el.querySelectorAll<HTMLElement>('.audience-questionnaire__card'),\n      audienceCardWrapper: this.el.querySelector<HTMLElement>(\n        '.audience-questionnaire__container-wrapper'\n      )\n    };\n  }\n\n  addListeners() {\n    (this.dom.audienceSelector as HTMLSelectElement).addEventListener(\n      'change',\n      this.handleAudienceSelector.bind(this)\n    );\n    (this.dom.audienceCard as NodeList).forEach(card => {\n      (card as HTMLElement).addEventListener('click', this.handleAudienceCardClick.bind(this));\n      (card as HTMLElement).addEventListener('keydown', e => {\n        if (e.key === 'Enter') {\n          this.handleAudienceCardClick(e);\n        }\n      });\n    });\n  }\n\n  initResizeObserver() {\n    const resizeObserver = new ResizeObserver(entries => {\n      if (entries && entries[0]) {\n        const target = entries[0].target as HTMLElement;\n        const activePanel = target.querySelector('[data-active=\"true\"]');\n        const activePanelHeight = activePanel?.clientHeight;\n        target.style.height = `${activePanelHeight}px`;\n      }\n    });\n\n    if (this.dom.audienceCardWrapper) {\n      resizeObserver.observe(this.dom.audienceCardWrapper as HTMLElement);\n    }\n\n    const mutationObserver = new MutationObserver(mutations => {\n      mutations.forEach(mutation => {\n        if (mutation.type === 'attributes') {\n          (this.dom.audienceCardWrapper as HTMLElement).style.height = '';\n          const target = this.dom.audienceCardWrapper as HTMLElement;\n          const activePanel = target.querySelector('[data-active=\"true\"]');\n          const activePanelHeight = activePanel?.clientHeight;\n          setTimeout(() => {\n            target.style.height = `${activePanelHeight}px`;\n          }, 100);\n        }\n      });\n    });\n\n    if (this.dom.audienceCard) {\n      [...(this.dom.audienceCard as NodeList)].forEach(card => {\n        mutationObserver.observe(card as HTMLElement, { attributes: true });\n      });\n    }\n  }\n\n  handleAudienceSelector(e: Event) {\n    const target = e.target as HTMLSelectElement;\n    const selectedValue = target.value;\n\n    (this.dom.audienceCard as NodeList).forEach(card => {\n      (card as HTMLElement).classList.remove('active');\n    });\n\n    (this.dom.audiencePanels as NodeList).forEach(panel => {\n      if ((panel as HTMLElement).id === `${selectedValue}-panel`) {\n        (panel as HTMLElement).dataset.state = 'slide-in';\n        (panel as HTMLElement).dataset.active = 'true';\n      } else {\n        (panel as HTMLElement).dataset.state = 'slide-out';\n        delete (panel as HTMLElement).dataset.active;\n      }\n    });\n  }\n\n  initCards() {\n    (this.dom.audiencePanels as NodeList).forEach(panel => {\n      const cards = (panel as HTMLElement).querySelectorAll('.audience-questionnaire__card');\n\n      if (cards.length) {\n        cards.forEach((card, i) => {\n          const index = i + 1;\n          (card as HTMLElement).style.setProperty('--index', `${index}`);\n        });\n\n        [...cards].reverse().forEach((card, i) => {\n          const index = i + 1;\n          (card as HTMLElement).style.setProperty('--index-reversed', `${index}`);\n        });\n      }\n\n      (panel as HTMLElement).style.setProperty('--total', `${(cards.length * 0.4) / 2}s`);\n    });\n  }\n\n  handleAudienceCardClick(e: Event) {\n    const target = e.target as HTMLElement;\n    const audienceCard = target.closest('.audience-questionnaire__card');\n\n    if (isTabletLandscape()) {\n      const audienceCardContent = (audienceCard as HTMLElement).querySelector(\n        '.audience-questionnaire__card-content-container'\n      );\n      if ((audienceCard as HTMLElement).classList.contains('active')) {\n        (audienceCardContent as HTMLElement).style.display = 'none';\n      } else {\n        (audienceCardContent as HTMLElement).style.display = 'flex';\n      }\n    }\n\n    requestAnimationFrame(() => {\n      (audienceCard as HTMLElement).classList.toggle('active');\n    });\n\n    this.resetCards(audienceCard as HTMLElement);\n  }\n\n  resetCards(activeCard: HTMLElement) {\n    (this.dom.audienceCard as NodeList).forEach(card => {\n      if (card !== activeCard) {\n        (card as HTMLElement).classList.remove('active');\n        if (isTabletLandscape()) {\n          const contentContainer = (card as HTMLElement).querySelector(\n            '.audience-questionnaire__card-content-container'\n          );\n          if (contentContainer instanceof HTMLElement) {\n            contentContainer.style.display = 'none';\n          }\n        }\n      }\n    });\n  }\n}\n\nexport default AudienceQuestionnaire;\n"],"names":["AudienceQuestionnaire","Component","el","__publicField","card","e","resizeObserver","entries","target","activePanel","activePanelHeight","mutationObserver","mutations","mutation","selectedValue","panel","cards","index","audienceCard","isTabletLandscape","audienceCardContent","activeCard","contentContainer"],"mappings":"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"}