{"version":3,"file":"forms-block.js","sources":["../../FrontEnd/PDP-FE/src/scripts/modules/forms-block.ts"],"sourcesContent":["import { Component } from '@verndale/core';\nimport '../../scss/modules/_forms-block.scss';\n\nclass FormsBlock extends Component {\n  tabs!: Node[];\n  firstTab!: HTMLElement;\n  lastTab!: HTMLElement;\n  tabpanels!: Node[];\n  handleIsOnViewportBound: () => void;\n\n  constructor(el: HTMLElement) {\n    super(el);\n    this.setupDefaults();\n    this.addListeners();\n    this.handleIsOnViewportBound = this.handleIsOnViewport.bind(this);\n    this.addFormListeners();\n  }\n\n  setupDefaults() {\n    this.dom = {\n      el: this.el,\n      tabList: this.el.querySelectorAll('[role=tab]'),\n      tabPanels: this.el.querySelectorAll('[role=tabpanel]'),\n      closeBtnForms: this.el.querySelector<HTMLElement>('.close-btn-forms'),\n      rightContainer: document.querySelector<HTMLElement>('.main-block__container-right'),\n      formsBlockHeader: this.el.querySelector<HTMLElement>('.forms-block__header'),\n      contactUsSitecoreForm: this.el.querySelector<HTMLElement>('.contact-us__sitecore-form'),\n      priceEl: this.el.querySelector<HTMLElement>('.forms-block__title'),\n      mobilePriceEl: document.querySelector<HTMLElement>('.form-block-btn__price'),\n      navPriceEl: document.querySelector<HTMLElement>('.sticky-nav__price'),\n      loanCalculatorSection: document.querySelector<HTMLElement>('.loan-calculator'),\n    };\n    this.tabs = Array.from(this.dom.tabList as NodeList);\n    this.firstTab = this.tabs[0] as HTMLElement;\n    this.lastTab = this.tabs[this.tabs.length - 1] as HTMLElement;\n    this.tabpanels = Array.from(this.dom.tabPanels as NodeList);\n    this.initializeTabs();\n  }\n\n  initializeTabs() {\n    this.tabs.forEach((tab, index) => {\n      if (index === 0) {\n        (tab as HTMLElement).setAttribute('aria-selected', 'true');\n        (tab as HTMLElement).setAttribute('tabindex', '0');\n      } else {\n        (tab as HTMLElement).setAttribute('aria-selected', 'false');\n        (tab as HTMLElement).setAttribute('tabindex', '-1');\n      }\n    });\n    this.tabpanels.forEach(panel => {\n      (panel as HTMLElement).setAttribute('aria-hidden', 'true');\n    });\n    // Optionally show the first tab content on load\n    const firstPanel = this.el.querySelector(`#${this.firstTab.getAttribute('aria-controls')}`);\n    if (firstPanel) {\n      firstPanel.setAttribute('aria-hidden', 'false');\n    }\n  }\n\n  addListeners() {\n    this.tabs.forEach(tab => {\n      tab.addEventListener('click', e => this.handleSelectedTab(e));\n      tab.addEventListener('keydown', e => this.handleArrowNavigation(e));\n    });\n    (this.dom.closeBtnForms as HTMLElement).addEventListener(\n      'click',\n      this.handleCloseForms.bind(this)\n    );\n    window.addEventListener('scroll', this.handleIsOnViewport.bind(this));\n  }\n\n  addFormListeners() {\n    // if (this.dom.contactUsSitecoreForm) {\n    //   (this.dom.contactUsSitecoreForm as HTMLElement).addEventListener('submit', this.handleContactUsFormSubmit.bind(this));\n    // }\n\n    const formResponseObserver = new MutationObserver((mutationsList, observer) => {\n      \n      for (const mutation of mutationsList) {\n        if (mutation.type === 'childList') {\n          const formResponseEl = document.querySelector('.contact-us__form .form__response');\n          if (formResponseEl) {\n            this.unlockPrice();\n            observer.disconnect();\n            break;\n          }\n        }\n      }\n    });\n\n    formResponseObserver.observe(document.body, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  isLargeDesktop() {\n    return window.matchMedia(`(min-width: 1024px`).matches;\n  };\n\n  unlockPrice() {\n    const unlockedPrice = this.el.dataset.unlockedPrice;\n\n    const contactButtonContainer = document.querySelector('.sticky-nav__right-container') as HTMLElement;\n\n    if (unlockedPrice) {\n      const hideElements = document.querySelectorAll('.hide-after-unlock');\n      const showElements = document.querySelectorAll('.show-after-unlock');\n\n      hideElements.forEach(el => {\n        (el as HTMLElement).style.display = 'none';\n      });\n\n      showElements.forEach(el => {\n        (el as HTMLElement).style.display = 'block';\n      });\n\n      if (this.dom.navPriceEl) {\n        (this.dom.navPriceEl as HTMLElement).innerText = unlockedPrice;\n      }\n\n      if (contactButtonContainer) {\n        const contactButton = contactButtonContainer.querySelector('.btn') as HTMLElement;\n        if (contactButton) {\n          contactButton.style.display = 'none';\n        }\n      }\n\n      if (this.dom.loanCalculatorSection) {\n        (this.dom.loanCalculatorSection as HTMLElement).style.display = 'block';\n      }\n\n      // const headerHeight = (document.querySelector('header') as HTMLElement).offsetHeight || 0;\n      // const elementPosition = (this.dom.loanCalculatorSection as HTMLElement).getBoundingClientRect().top + window.scrollY;\n      // const offsetPosition = elementPosition - headerHeight - 100 - 40;\n\n      // if (this.isLargeDesktop()) {\n      //   setTimeout(() => {\n      //     window.scrollTo({\n      //       top: offsetPosition,\n      //       behavior: 'smooth'\n      //     });\n      //   }, 200)\n      // }\n    }\n  }\n\n  handleCloseForms() {\n    (this.dom.el as HTMLElement).classList.remove('pop-up');\n    (this.dom.rightContainer as HTMLElement).style.removeProperty('display');\n    document.body.style.removeProperty('overflow');\n  }\n\n  handleSelectedTab(e: Event) {\n    const tab = e.target as HTMLElement;\n    const tabId = tab.getAttribute('aria-controls');\n    const tabpanel = this.el.querySelector(`#${tabId}`);\n\n    this.tabs.forEach(t => {\n      (t as HTMLElement).setAttribute('aria-selected', 'false');\n      (t as HTMLElement).setAttribute('tabindex', '-1');\n    });\n\n    this.tabpanels.forEach(panel => {\n      (panel as HTMLElement).setAttribute('aria-hidden', 'true');\n    });\n\n    tab.setAttribute('aria-selected', 'true');\n    tab.setAttribute('tabindex', '0');\n    (tabpanel as HTMLElement).setAttribute('aria-hidden', 'false');\n    this.handleIsOnViewport();\n  }\n\n  handleArrowNavigation(e: Event) {\n    const key = (e as KeyboardEvent).which || (e as KeyboardEvent).keyCode;\n    if (key === 37 || key === 39) {\n      e.preventDefault();\n      const currentIndex = (this.tabs as Array<HTMLElement>).indexOf(e.target as HTMLElement);\n      if (key === 37) {\n        // left\n        const prevIndex = currentIndex > 0 ? currentIndex - 1 : this.tabs.length - 1;\n        (this.tabs[prevIndex] as HTMLElement).focus();\n      } else if (key === 39) {\n        // right\n        const nextIndex = currentIndex < this.tabs.length - 1 ? currentIndex + 1 : 0;\n        (this.tabs[nextIndex] as HTMLElement).focus();\n      }\n    }\n  }\n\n  handleIsOnViewport() {\n    const rect = this.el.getBoundingClientRect();\n    const titleRect = (this.dom.formsBlockHeader as HTMLElement).getBoundingClientRect();\n\n    if (titleRect.top <= 100) {\n      return;\n    }\n\n    if (\n      rect.top >= 0 &&\n      rect.left >= 0 &&\n      rect.bottom <= ((window.innerHeight || document.documentElement.clientHeight)) &&\n      rect.right <= (window.innerWidth || document.documentElement.clientWidth)\n    ) {\n      if (this.el.classList.contains('no-sticky')) {\n        this.el.classList.remove('no-sticky');\n      }\n    } else {\n      this.el.classList.add('no-sticky');\n    }\n  }\n}\n\nexport default FormsBlock;\n"],"names":["FormsBlock","Component","el","__publicField","tab","index","panel","firstPanel","mutationsList","observer","mutation","unlockedPrice","contactButtonContainer","hideElements","showElements","contactButton","e","tabId","tabpanel","t","key","currentIndex","prevIndex","nextIndex","rect"],"mappings":"wMAGA,MAAMA,UAAmBC,CAAU,CAOjC,YAAYC,EAAiB,CAC3B,MAAMA,CAAE,EAPVC,EAAA,aACAA,EAAA,iBACAA,EAAA,gBACAA,EAAA,kBACAA,EAAA,gCAIE,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,wBAA0B,KAAK,mBAAmB,KAAK,IAAI,EAChE,KAAK,iBAAiB,CACxB,CAEA,eAAgB,CACd,KAAK,IAAM,CACT,GAAI,KAAK,GACT,QAAS,KAAK,GAAG,iBAAiB,YAAY,EAC9C,UAAW,KAAK,GAAG,iBAAiB,iBAAiB,EACrD,cAAe,KAAK,GAAG,cAA2B,kBAAkB,EACpE,eAAgB,SAAS,cAA2B,8BAA8B,EAClF,iBAAkB,KAAK,GAAG,cAA2B,sBAAsB,EAC3E,sBAAuB,KAAK,GAAG,cAA2B,4BAA4B,EACtF,QAAS,KAAK,GAAG,cAA2B,qBAAqB,EACjE,cAAe,SAAS,cAA2B,wBAAwB,EAC3E,WAAY,SAAS,cAA2B,oBAAoB,EACpE,sBAAuB,SAAS,cAA2B,kBAAkB,CAAA,EAE/E,KAAK,KAAO,MAAM,KAAK,KAAK,IAAI,OAAmB,EAC9C,KAAA,SAAW,KAAK,KAAK,CAAC,EAC3B,KAAK,QAAU,KAAK,KAAK,KAAK,KAAK,OAAS,CAAC,EAC7C,KAAK,UAAY,MAAM,KAAK,KAAK,IAAI,SAAqB,EAC1D,KAAK,eAAe,CACtB,CAEA,gBAAiB,CACf,KAAK,KAAK,QAAQ,CAACC,EAAKC,IAAU,CAC5BA,IAAU,GACXD,EAAoB,aAAa,gBAAiB,MAAM,EACxDA,EAAoB,aAAa,WAAY,GAAG,IAEhDA,EAAoB,aAAa,gBAAiB,OAAO,EACzDA,EAAoB,aAAa,WAAY,IAAI,EACpD,CACD,EACI,KAAA,UAAU,QAAiBE,GAAA,CAC7BA,EAAsB,aAAa,cAAe,MAAM,CAAA,CAC1D,EAEK,MAAAC,EAAa,KAAK,GAAG,cAAc,IAAI,KAAK,SAAS,aAAa,eAAe,CAAC,EAAE,EACtFA,GACSA,EAAA,aAAa,cAAe,OAAO,CAElD,CAEA,cAAe,CACR,KAAA,KAAK,QAAeH,GAAA,CACvBA,EAAI,iBAAiB,QAAS,GAAK,KAAK,kBAAkB,CAAC,CAAC,EAC5DA,EAAI,iBAAiB,UAAW,GAAK,KAAK,sBAAsB,CAAC,CAAC,CAAA,CACnE,EACA,KAAK,IAAI,cAA8B,iBACtC,QACA,KAAK,iBAAiB,KAAK,IAAI,CAAA,EAEjC,OAAO,iBAAiB,SAAU,KAAK,mBAAmB,KAAK,IAAI,CAAC,CACtE,CAEA,kBAAmB,CAKY,IAAI,iBAAiB,CAACI,EAAeC,IAAa,CAE7E,UAAWC,KAAYF,EACjB,GAAAE,EAAS,OAAS,aACG,SAAS,cAAc,mCAAmC,EAC7D,CAClB,KAAK,YAAY,EACjBD,EAAS,WAAW,EACpB,KACF,CAEJ,CACD,EAEoB,QAAQ,SAAS,KAAM,CAC1C,UAAW,GACX,QAAS,EAAA,CACV,CACH,CAEA,gBAAiB,CACR,OAAA,OAAO,WAAW,oBAAoB,EAAE,OACjD,CAEA,aAAc,CACN,MAAAE,EAAgB,KAAK,GAAG,QAAQ,cAEhCC,EAAyB,SAAS,cAAc,8BAA8B,EAEpF,GAAID,EAAe,CACX,MAAAE,EAAe,SAAS,iBAAiB,oBAAoB,EAC7DC,EAAe,SAAS,iBAAiB,oBAAoB,EAcnE,GAZAD,EAAa,QAAcX,GAAA,CACxBA,EAAmB,MAAM,QAAU,MAAA,CACrC,EAEDY,EAAa,QAAcZ,GAAA,CACxBA,EAAmB,MAAM,QAAU,OAAA,CACrC,EAEG,KAAK,IAAI,aACV,KAAK,IAAI,WAA2B,UAAYS,GAG/CC,EAAwB,CACpB,MAAAG,EAAgBH,EAAuB,cAAc,MAAM,EAC7DG,IACFA,EAAc,MAAM,QAAU,OAElC,CAEI,KAAK,IAAI,wBACV,KAAK,IAAI,sBAAsC,MAAM,QAAU,QAepE,CACF,CAEA,kBAAmB,CAChB,KAAK,IAAI,GAAmB,UAAU,OAAO,QAAQ,EACrD,KAAK,IAAI,eAA+B,MAAM,eAAe,SAAS,EAC9D,SAAA,KAAK,MAAM,eAAe,UAAU,CAC/C,CAEA,kBAAkBC,EAAU,CAC1B,MAAMZ,EAAMY,EAAE,OACRC,EAAQb,EAAI,aAAa,eAAe,EACxCc,EAAW,KAAK,GAAG,cAAc,IAAID,CAAK,EAAE,EAE7C,KAAA,KAAK,QAAaE,GAAA,CACpBA,EAAkB,aAAa,gBAAiB,OAAO,EACvDA,EAAkB,aAAa,WAAY,IAAI,CAAA,CACjD,EAEI,KAAA,UAAU,QAAiBb,GAAA,CAC7BA,EAAsB,aAAa,cAAe,MAAM,CAAA,CAC1D,EAEGF,EAAA,aAAa,gBAAiB,MAAM,EACpCA,EAAA,aAAa,WAAY,GAAG,EAC/Bc,EAAyB,aAAa,cAAe,OAAO,EAC7D,KAAK,mBAAmB,CAC1B,CAEA,sBAAsBF,EAAU,CACxB,MAAAI,EAAOJ,EAAoB,OAAUA,EAAoB,QAC3D,GAAAI,IAAQ,IAAMA,IAAQ,GAAI,CAC5BJ,EAAE,eAAe,EACjB,MAAMK,EAAgB,KAAK,KAA4B,QAAQL,EAAE,MAAqB,EACtF,GAAII,IAAQ,GAAI,CAEd,MAAME,EAAYD,EAAe,EAAIA,EAAe,EAAI,KAAK,KAAK,OAAS,EAC1E,KAAK,KAAKC,CAAS,EAAkB,MAAM,CAAA,SACnCF,IAAQ,GAAI,CAErB,MAAMG,EAAYF,EAAe,KAAK,KAAK,OAAS,EAAIA,EAAe,EAAI,EAC1E,KAAK,KAAKE,CAAS,EAAkB,MAAM,CAC9C,CACF,CACF,CAEA,oBAAqB,CACb,MAAAC,EAAO,KAAK,GAAG,sBAAsB,EACxB,KAAK,IAAI,iBAAiC,sBAAsB,EAErE,KAAO,MAKnBA,EAAK,KAAO,GACZA,EAAK,MAAQ,GACbA,EAAK,SAAY,OAAO,aAAe,SAAS,gBAAgB,eAChEA,EAAK,QAAU,OAAO,YAAc,SAAS,gBAAgB,aAEzD,KAAK,GAAG,UAAU,SAAS,WAAW,GACnC,KAAA,GAAG,UAAU,OAAO,WAAW,EAGjC,KAAA,GAAG,UAAU,IAAI,WAAW,EAErC,CACF"}