{"version":3,"sources":["webpack://@verndale/toolkit/./src/js/modules/marketoForm.ts"],"names":["MarketoForm","Component","el","__publicField","url","instanceId","formId","shouldLoad","mutationsList","mutation","handler","handleAutoComplete","events","input","textarea","fieldWrap","field","label","e","textArea","element","event","checkboxField","isTextarea","marketoButton","span","buttonText","row","checkbox","_a","item"],"mappings":"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","file":"scripts/9117.121e9d4a17515bef425e.js","sourcesContent":["import { Component } from '@verndale/core';\ndeclare const MktoForms2: any;\n\nclass MarketoForm extends Component {\n  mutationObserver: MutationObserver;\n  oberverInitialized = false;\n\n  constructor(el: HTMLElement) {\n    super(el);\n    const url = this.el.dataset.formUrl;\n    const instanceId = this.el.dataset.instanceId;\n    const formId = this.el.dataset.formId;\n    const shouldLoad = this.el.dataset.shouldLoad;\n\n    this.mutationObserver = new MutationObserver((mutationsList) => {\n      const isRelevantMutation = mutationsList.some(mutation =>\n        mutation.type === 'childList' && mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0\n      );\n\n      if (isRelevantMutation) {\n        this.customizeMarketoButton();\n      }\n    });\n\n    if (shouldLoad === 'true') {\n      MktoForms2.loadForm(url, instanceId, formId);\n      MktoForms2.whenReady(() => {\n        this.setupDefaults();\n        this.addListeners();\n      });\n    }\n  }\n\n  setupDefaults() {\n    this.dom = {\n      inputs: this.el.querySelectorAll('.mktoFieldWrap input'),\n      textareas: this.el.querySelectorAll('.mktoFieldWrap textarea'),\n      checkboxes: this.el.querySelectorAll(\n        '.mktoLogicalField.mktoCheckboxList'\n      ),\n      marketoRows: this.el.querySelectorAll('.mktoFormRow'),\n      button: this.el.querySelector('.mktoButtonWrap button') as HTMLElement\n    };\n\n    this.customizeMarketoButton();\n    this.markTwoColumnRows();\n    this.markCheckboxContainers();\n    this.applyInitialInputsStyle();\n  }\n\n  addListeners() {\n    const handler = this.setLabelAsPlaceholder.bind(this);\n    const handleAutoComplete = this.updateLabelsForAutoComplete.bind(this);\n    const events = ['focus', 'blur', 'input'];\n\n    if (this.dom.inputs) {\n      (this.dom.inputs as NodeListOf<HTMLElement>).forEach(input => {\n        this.addMultipleListeners(input, events, handler);\n      });\n    }\n\n    if (this.dom.textareas) {\n      (this.dom.textareas as NodeListOf<HTMLElement>).forEach(textarea => {\n        this.addMultipleListeners(textarea, events, handler);\n        textarea.addEventListener('input', this.resizeTextarea.bind(this));\n      });\n    }\n\n    document.addEventListener(\n      'clearbit-forms-marketo-enrichment-complete',\n      handleAutoComplete\n    );\n  }\n\n  updateLabelsForAutoComplete() {\n    const fieldWraps = Array.from(this.el.querySelectorAll('.mktoFieldWrap'));\n    const inputFields = fieldWraps.filter(fieldWrap =>\n      fieldWrap.querySelector('input:not([type=\"checkbox\"])')\n    );\n    inputFields.forEach(field => {\n      const label = field.querySelector('label');\n      label?.classList.add('is-active');\n    });\n  }\n\n  resizeTextarea(e: Event) {\n    if (e.target) {\n      const textArea = e.target as HTMLElement;\n      textArea.style.height = 'auto';\n      textArea.style.height = `${textArea.scrollHeight}px`;\n    }\n  }\n\n  addMultipleListeners(\n    element: HTMLElement,\n    events: string[],\n    handler: (event: Event) => void\n  ) {\n    events.forEach(event => element.addEventListener(event, handler));\n  }\n\n  setLabelAsPlaceholder(e: Event) {\n    const input = e.target as HTMLInputElement;\n    const fieldWrap = input?.closest('.mktoFieldWrap');\n    const label = fieldWrap?.querySelector('label') as HTMLElement;\n    if (!label) return;\n\n    const checkboxField = fieldWrap?.closest('.checkbox-field');\n    const checkboxLabel = checkboxField?.querySelector('label') as HTMLElement;\n    if (checkboxLabel === label) return;\n\n    const isTextarea = input.tagName.toLowerCase() === 'textarea';\n    const isActive = input.value || input === document.activeElement;\n\n    if (isActive) {\n      if (isTextarea) label.classList.add('textarea-active');\n      label.classList.add('is-active');\n    } else {\n      label.classList.remove('is-active');\n    }\n  }\n\n  customizeMarketoButton() {\n    const marketoButton = this.dom.button as HTMLElement;\n    console.log(marketoButton);\n    if (marketoButton) {\n      if (!this.oberverInitialized) {\n        this.mutationObserver.observe(this.dom.button as HTMLElement, { childList: true, subtree: true });\n        this.oberverInitialized = true;\n      }\n\n      if (marketoButton.querySelector('span')) return;\n\n      const span = document.createElement('span');\n      const buttonText = marketoButton.textContent;\n      marketoButton.textContent = '';\n      span.textContent = buttonText;\n      marketoButton.appendChild(span);\n    }\n  }\n\n  markTwoColumnRows() {\n    const twoColumnRows = Array.from(\n      this.dom.marketoRows as NodeListOf<HTMLElement>\n    ).filter(\n      (row: HTMLElement) => row.querySelectorAll('.mktoFormCol').length === 2\n    );\n    twoColumnRows.forEach((row: HTMLElement) =>\n      row.classList.add('two-column')\n    );\n  }\n\n  markCheckboxContainers() {\n    (this.dom.checkboxes as NodeListOf<HTMLElement>).forEach(\n      (checkbox: HTMLElement) => {\n        checkbox.closest('.mktoFieldWrap')?.classList.add('checkbox-field');\n      }\n    );\n  }\n\n  applyInitialInputsStyle() {\n    Array.from(\n      this.el.querySelectorAll('.mktoFieldWrap') as NodeListOf<HTMLElement>\n    )\n      .filter(item => {\n        return item.querySelector(\n          'input[type=\"text\"], input[type=\"email\"], input[type=\"tel\"], textarea'\n        );\n      })\n      .forEach(item => {\n        const label = item.querySelector('.mktoLabel') as HTMLElement;\n        const textarea = item.querySelector('textarea') as HTMLElement;\n\n        if (textarea) {\n          label.style.paddingTop = '0';\n          textarea.style.height = '40px';\n        }\n\n        label.style.insetBlockEnd = '30px';\n        label.style.position = 'absolute';\n      });\n\n    Array.from(\n      this.el.querySelectorAll('.mktoFieldWrap') as NodeListOf<HTMLElement>\n    )\n      .filter(item => {\n        return item.querySelector('select');\n      })\n      .forEach(item => {\n        const label = item.querySelector('.mktoLabel') as HTMLElement;\n        label.style.fontSize = '12px';\n      });\n\n    if (this.dom.textareas)\n      (this.dom.textareas as NodeListOf<HTMLElement>).forEach(textarea => {\n        textarea.style.height = `${textarea.scrollHeight}px`;\n        textarea.style.overflowY = 'hidden';\n      });\n  }\n\n  public componentWillUnmount() {\n    if (this.oberverInitialized) this.mutationObserver.disconnect();\n  }\n}\n\nexport default MarketoForm;\n"],"sourceRoot":""}