{"version":3,"names":["serialize","form","formData","FormData","object","forEach","value","key","scFormCss","ScFormStyle0","ScForm","getFormData","this","formElement","getFormJson","handleChange","scFormChange","emit","submit","submitForm","getFormControls","querySelectorAll","validate","formControls","formControlsThatReport","filter","el","reportValidity","novalidate","offsetWidth","offsetHeight","getClientRects","length","isValid","button","document","createElement","type","style","position","width","height","clip","clipPath","overflow","whiteSpace","append","click","remove","render","h","part","class","role","ref","onSubmit","async","e","preventDefault","scSubmit","scFormSubmit"],"sources":["src/functions/form.ts","src/components/ui/form/sc-form.scss?tag=sc-form&encapsulation=shadow","src/components/ui/form/sc-form.tsx"],"sourcesContent":["/**\n * Serializes a form and returns a plain object. If a form control with the same name appears more than once, the\n * property will be converted to an array.\n */\nexport function serialize(form: HTMLFormElement) {\n  const formData = new FormData(form);\n  const object: Record<string, unknown> = {};\n\n  formData.forEach((value, key) => {\n    object[key] = value;\n  });\n\n  return object;\n}\n",":host {\n  display: block;\n}\n\n::slotted(*:not(:last-child)) {\n  margin-bottom: var(--sc-form-row-spacing, 0.75em);\n\n  &.wp-block-spacer {\n    margin-bottom: 0;\n  }\n}\n::slotted(*:focus-within),\n::slotted(*:active) {\n  position: relative;\n  z-index: var(--sc-form-focus-within-z-index, auto); /* Handle sc-drawer opening: Give default z-index, but allow it to be overridden */\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop } from '@stencil/core';\n\nimport { serialize } from '../../../functions/form';\n\n@Component({\n  tag: 'sc-form',\n  styleUrl: 'sc-form.scss',\n  shadow: true,\n})\nexport class ScForm {\n  @Element() form: HTMLElement;\n  private formElement: HTMLFormElement;\n\n  /** Prevent the form from validating inputs before submitting. */\n  @Prop({ reflect: true, mutable: true }) novalidate: boolean = false;\n\n  /**\n   * Emitted when the form is submitted. This event will not be emitted if any form control inside of\n   * it is in an invalid state, unless the form has the `novalidate` attribute. Note that there is never a need to prevent\n   * this event, since it doen't send a GET or POST request like native forms. To \"prevent\" submission, use a conditional\n   * around the XHR request you use to submit the form's data with.\n   */\n  @Event({ bubbles: true }) scSubmit: EventEmitter<void>;\n\n  /**\n   * Backwards compat.\n   */\n  @Event() scFormSubmit: EventEmitter<void>;\n\n  /**\n   * Emitted when the form is submitted. This event will not be emitted if any form control inside of\n   * it is in an invalid state, unless the form has the `novalidate` attribute. Note that there is never a need to prevent\n   * this event, since it doen't send a GET or POST request like native forms. To \"prevent\" submission, use a conditional\n   * around the XHR request you use to submit the form's data with.\n   */\n  @Event() scFormChange: EventEmitter<Object>;\n\n  /** Serializes all form controls elements and returns a `FormData` object. */\n  @Method('getFormData')\n  async getFormData() {\n    return new FormData(this.formElement);\n  }\n\n  @Method('getFormJson')\n  async getFormJson() {\n    return serialize(this.formElement);\n  }\n\n  @Listen('scChange')\n  async handleChange() {\n    this.scFormChange.emit(serialize(this.formElement));\n  }\n\n  @Method('submit')\n  async submit() {\n    return this.submitForm();\n  }\n\n  /** Gets all form control elements (native and custom). */\n  getFormControls() {\n    return [...this.form.querySelectorAll('*')] as HTMLElement[];\n  }\n\n  @Method('validate')\n  async validate() {\n    const formControls = this.getFormControls();\n    const formControlsThatReport = formControls.filter((el: any) => typeof el.reportValidity === 'function') as any;\n\n    if (!this.novalidate) {\n      for (const el of formControlsThatReport) {\n        // element is hidden, don't client-side validate.\n        if (!(el.offsetWidth || el.offsetHeight || el.getClientRects().length)) {\n          continue;\n        }\n\n        const isValid = await el.reportValidity();\n\n        if (!isValid) {\n          return false;\n        }\n      }\n    }\n\n    return true;\n  }\n\n  submitForm() {\n    // Calling form.submit() seems to bypass the submit event and constraint validation. Instead, we can inject a\n    // native submit button into the form, click it, then remove it to simulate a standard form submission.\n    const button = document.createElement('button');\n    if (this.formElement) {\n      button.type = 'submit';\n      button.style.position = 'absolute';\n      button.style.width = '0';\n      button.style.height = '0';\n      button.style.clip = 'rect(0 0 0 0)';\n      button.style.clipPath = 'inset(50%)';\n      button.style.overflow = 'hidden';\n      button.style.whiteSpace = 'nowrap';\n      this.formElement.append(button);\n      button.click();\n      button.remove();\n    }\n  }\n\n  render() {\n    return (\n      <div part=\"base\" class=\"form\" role=\"form\">\n        <form\n          part=\"form\"\n          ref={el => (this.formElement = el as HTMLFormElement)}\n          class=\"test\"\n          onSubmit={async e => {\n            e.preventDefault();\n            const isValid = await this.validate();\n            if (!isValid) {\n              return false;\n            }\n            this.scSubmit.emit();\n            this.scFormSubmit.emit();\n          }}\n          novalidate={this.novalidate}\n        >\n          <slot />\n        </form>\n      </div>\n    );\n  }\n}\n"],"mappings":"kEAIgBA,EAAUC,GACxB,MAAMC,EAAW,IAAIC,SAASF,GAC9B,MAAMG,EAAkC,GAExCF,EAASG,SAAQ,CAACC,EAAOC,KACvBH,EAAOG,GAAOD,CAAK,IAGrB,OAAOF,CACT,CCbA,MAAMI,EAAY,uRAClB,MAAAC,EAAeD,E,MCQFE,EAAM,M,kKAK6C,K,CAyB9D,iBAAMC,GACJ,OAAO,IAAIR,SAASS,KAAKC,Y,CAI3B,iBAAMC,GACJ,OAAOd,EAAUY,KAAKC,Y,CAIxB,kBAAME,GACJH,KAAKI,aAAaC,KAAKjB,EAAUY,KAAKC,a,CAIxC,YAAMK,GACJ,OAAON,KAAKO,Y,CAId,eAAAC,GACE,MAAO,IAAIR,KAAKX,KAAKoB,iBAAiB,K,CAIxC,cAAMC,GACJ,MAAMC,EAAeX,KAAKQ,kBAC1B,MAAMI,EAAyBD,EAAaE,QAAQC,UAAmBA,EAAGC,iBAAmB,aAE7F,IAAKf,KAAKgB,WAAY,CACpB,IAAK,MAAMF,KAAMF,EAAwB,CAEvC,KAAME,EAAGG,aAAeH,EAAGI,cAAgBJ,EAAGK,iBAAiBC,QAAS,CACtE,Q,CAGF,MAAMC,QAAgBP,EAAGC,iBAEzB,IAAKM,EAAS,CACZ,OAAO,K,GAKb,OAAO,I,CAGT,UAAAd,GAGE,MAAMe,EAASC,SAASC,cAAc,UACtC,GAAIxB,KAAKC,YAAa,CACpBqB,EAAOG,KAAO,SACdH,EAAOI,MAAMC,SAAW,WACxBL,EAAOI,MAAME,MAAQ,IACrBN,EAAOI,MAAMG,OAAS,IACtBP,EAAOI,MAAMI,KAAO,gBACpBR,EAAOI,MAAMK,SAAW,aACxBT,EAAOI,MAAMM,SAAW,SACxBV,EAAOI,MAAMO,WAAa,SAC1BjC,KAAKC,YAAYiC,OAAOZ,GACxBA,EAAOa,QACPb,EAAOc,Q,EAIX,MAAAC,GACE,OACEC,EAAA,OAAA3C,IAAA,2CAAK4C,KAAK,OAAOC,MAAM,OAAOC,KAAK,QACjCH,EAAA,QAAA3C,IAAA,2CACE4C,KAAK,OACLG,IAAK5B,GAAOd,KAAKC,YAAca,EAC/B0B,MAAM,OACNG,SAAUC,MAAMC,IACdA,EAAEC,iBACF,MAAMzB,QAAgBrB,KAAKU,WAC3B,IAAKW,EAAS,CACZ,OAAO,K,CAETrB,KAAK+C,SAAS1C,OACdL,KAAKgD,aAAa3C,MAAM,EAE1BW,WAAYhB,KAAKgB,YAEjBsB,EAAA,QAAA3C,IAAA,8C","ignoreList":[]}