{"version":3,"sources":["webpack://@verndale/toolkit/./src/js/modules/marketoForm.ts"],"names":["MarketoForm","Component","el","__publicField","url","instanceId","formId","shouldLoad","prefillForm","mutationsList","mutation","form","handler","handleAutoComplete","events","input","textarea","data","result","response","key","fieldWrap","field","label","textArea","element","event","checkboxField","isTextarea","marketoButton","span","buttonText","row","checkbox","_a","item"],"mappings":"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","file":"scripts/9117.e811ad0ab83ad236ac4c.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    const prefillForm = this.mapPrefill(this.el.dataset.prefillForm);\n\n    this.mutationObserver = new MutationObserver(mutationsList => {\n      const isRelevantMutation = mutationsList.some(\n        mutation =>\n          (mutation.type === 'childList' && mutation.addedNodes.length > 0) ||\n          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((form: { vals: (arg0: any) => void }) => {\n        if (prefillForm) {\n          form.vals(prefillForm);\n        }\n\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<HTMLInputElement>).forEach(input => {\n        this.checkInputValue(input);\n        this.addMultipleListeners(input, events, handler);\n      });\n    }\n\n    if (this.dom.textareas) {\n      (this.dom.textareas as NodeListOf<HTMLTextAreaElement>).forEach(\n        textarea => {\n          this.addMultipleListeners(textarea, events, handler);\n          this.checkInputValue(textarea);\n          textarea.addEventListener('input', this.resizeTextarea.bind(this));\n        }\n      );\n    }\n\n    document.addEventListener(\n      'clearbit-forms-marketo-enrichment-complete',\n      handleAutoComplete\n    );\n  }\n\n  mapPrefill(data?: string) {\n    const result = data ? JSON.parse(data).result : [{}];\n    const response: { [key: string]: string } = {};\n\n    if (result.length) {\n      Object.keys(result[0]).forEach(key => {\n        switch (key.toLowerCase()) {\n          case 'firstname':\n            response.FirstName = result[0][key];\n            break;\n          case 'lastname':\n            response.LastName = result[0][key];\n            break;\n          case 'email':\n            response.Email = result[0][key];\n            break;\n          case 'company':\n            response.Company = result[0][key];\n            break;\n          case 'phone':\n            response.Phone = result[0][key];\n            break;\n          case 'title':\n            response.Title = result[0][key];\n            break;\n          case 'country':\n            response.Country = result[0][key];\n            break;\n          default:\n            break;\n        }\n      });\n    }\n\n    return response;\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  checkInputValue(input: HTMLInputElement | HTMLTextAreaElement) {\n    const fieldWrap = input?.closest('.mktoFieldWrap');\n    const label = fieldWrap?.querySelector('label') as HTMLElement;\n    if (input.value && !fieldWrap?.closest('.checkbox-field')) {\n      if (input.tagName.toLowerCase() === 'textarea') {\n        label.classList.add('textarea-active');\n      }\n\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, {\n          childList: true,\n          subtree: true\n        });\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\"], input[type=\"url\"], input[type=\"number\"], 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        this.checkInputValue(\n          item.querySelector('input, textarea') as HTMLInputElement\n        );\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":""}