{"version":3,"file":"shingle-comparison-table-ad2b9d84.js","sources":["../../../../src/scripts/modules/shingle-comparison-table.ts"],"sourcesContent":["import { Component } from '@verndale/core';\n\nclass ShingleComparisonTable extends Component {\n  private scrollInterval: object | null = null;\n  private viewportWidth = 0;\n\n  constructor(el: HTMLElement) {\n    super(el);\n    this.viewportWidth = window.innerWidth;\n\n    const columns = this.dom.columns as NodeListOf<HTMLElement>;\n    if (columns && columns.length <= 5 && this.dom.controls) {\n      (this.dom.controls as HTMLDivElement).remove();\n    }\n  }\n\n  setupDefaults() {\n    this.dom = {\n      columnLists: this.el.querySelectorAll(\n        '.shingle-comparison-table__column-list'\n      ),\n      sliderContainer: this.el.querySelector(\n        '.shingle-comparison-table__wrapper--slider'\n      ) as HTMLElement,\n      container: this.el.querySelector(\n        '.shingle-comparison-table__wrapper'\n      ) as HTMLElement,\n      prevButton: this.el.querySelector(\n        '.swiper-button-prev'\n      ) as HTMLButtonElement,\n      nextButton: this.el.querySelector(\n        '.swiper-button-next'\n      ) as HTMLButtonElement,\n      columns: this.el.querySelectorAll(\n        '.shingle-comparison-table__column-list'\n      ),\n      controls: this.el.querySelector(\n        '.shingle-comparison-table__slider-controls'\n      ) as HTMLElement\n    };\n    //wait for the dom to be ready and then set max height to equalize the rows height\n    setTimeout(() => {\n      this.setMaxHeight();\n    }, 65);\n  }\n\n  addListeners() {\n    if (this.dom.columns instanceof NodeList && Array.from(this.dom.columns).length <= 4) {\n      (this.dom.container as HTMLElement).classList.remove('shingle-comparison-table__wrapper--slider');\n      (this.dom.container as HTMLElement).classList.add('shingle-comparison-table__wrapper--no-slider');\n    }\n    if (this.dom.sliderContainer) {\n      (this.dom.sliderContainer as HTMLElement)?.addEventListener(\n        'scroll',\n        this.handleSliderContainerHorizontalScroll.bind(this)\n      );\n      (this.dom.sliderContainer as HTMLElement)?.addEventListener(\n        'keydown',\n        this.handleKeyDown.bind(this)\n      );\n      (this.dom.prevButton as HTMLButtonElement)?.addEventListener(\n        'click',\n        this.handlePrevButtonClick.bind(this)\n      );\n      (this.dom.nextButton as HTMLButtonElement)?.addEventListener(\n        'click',\n        this.handleNextButtonClick.bind(this)\n      );\n      window.addEventListener('resize', this.handleResize.bind(this));\n    }\n  }\n\n  handleResize() {\n    const newViewportWidth = window.innerWidth;\n\n    setTimeout(() => {\n      this.setMaxHeight();\n    }, 65);\n\n    if (newViewportWidth !== this.viewportWidth) {\n      this.handlePrevButtonClick();\n      this.viewportWidth = newViewportWidth;\n    }\n  }\n\n  handleSliderContainerHorizontalScroll() {\n    //detect if the slider container is scrolled to the right\n    const slider = this.dom.sliderContainer as HTMLElement;\n    const prevButton = this.dom.prevButton as HTMLButtonElement;\n    const nextButton = this.dom.nextButton as HTMLButtonElement;\n\n    if (slider && prevButton && nextButton) {\n      if (slider.scrollLeft > 0) {\n        slider.classList.add('shingle-comparison-table__wrapper--scrolled');\n        prevButton.disabled = false;\n        prevButton.classList.remove('swiper-button-disabled');\n        nextButton.disabled = true;\n        nextButton.classList.add('swiper-button-disabled');\n      } else {\n        slider.classList.remove('shingle-comparison-table__wrapper--scrolled');\n        prevButton.disabled = true;\n        prevButton.classList.add('swiper-button-disabled');\n        nextButton.disabled = false;\n        nextButton.classList.remove('swiper-button-disabled');\n      }\n    }\n  }\n\n  handlePrevButtonClick() {\n    const slider = this.dom.sliderContainer as HTMLElement;\n    this.sideScroll(slider, 'left', 25, 1000, 25);\n  }\n\n  handleNextButtonClick() {\n    const slider = this.dom.sliderContainer as HTMLElement;\n\n    this.sideScroll(slider, 'right', 25, 1000, 25);\n  }\n\n  sideScroll(\n    element: HTMLElement,\n    direction: string,\n    speed: number,\n    distance: number,\n    step: number\n  ) {\n    if (this.scrollInterval) {\n      clearInterval(this.scrollInterval as unknown as string);\n    }\n\n    let scrollAmount = 0;\n    const slideTimer = setInterval(() => {\n      if (direction == 'left') {\n        element.scrollLeft -= step;\n      } else {\n        element.scrollLeft += step;\n      }\n      scrollAmount += step;\n      if (scrollAmount >= distance) {\n        clearInterval(slideTimer);\n      }\n    }, speed);\n\n    this.scrollInterval = slideTimer;\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'ArrowLeft') {\n      this.handlePrevButtonClick();\n    } else if (event.key === 'ArrowRight') {\n      this.handleNextButtonClick();\n    }\n  }\n\n  setMaxHeight() {\n    const columnLists = this.dom.columnLists;\n\n    if (columnLists instanceof NodeList) {\n      const itemsArray: HTMLElement[][] = Array.from(columnLists).map(\n        columnList =>\n          Array.from(\n            columnList.querySelectorAll(\n              '.shingle-comparison-table__column-item'\n            )\n          )\n      );\n\n      for (let i = 0; i < itemsArray[0].length; i++) {\n        let maxHeight = 0;\n\n        // Compare items at the same position in different columns\n        itemsArray.forEach(columnItems => {\n          const item = columnItems[i];\n          if (item instanceof HTMLElement) {\n            item.style.height = 'auto';\n            const itemHeight = item.getBoundingClientRect().height;\n            maxHeight = Math.max(maxHeight, itemHeight);\n          }\n        });\n\n        // Set the maximum height for items at the same position in different columns\n        itemsArray.forEach(columnItems => {\n          const item = columnItems[i];\n          if (item instanceof HTMLElement) {\n            item.style.height = `${maxHeight}px`;\n          }\n        });\n      }\n    }\n  }\n}\n\nexport default ShingleComparisonTable;\n"],"names":["ShingleComparisonTable","Component","el","__publicField","columns","_a","_b","_c","_d","newViewportWidth","slider","prevButton","nextButton","element","direction","speed","distance","step","scrollAmount","slideTimer","event","columnLists","itemsArray","columnList","maxHeight","columnItems","item","itemHeight"],"mappings":"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"}