{"version":3,"file":"webcomponent.mjs","sources":["../src/lib/webcomponent/index.mts"],"sourcesContent":["import { createForm } from '../form/form.mjs';\nimport { eventsWithFormKeys } from './lib.mjs';\n\nimport type { FormulaOptions } from '../shared/types.mjs';\nimport type { Formula, FormulaForm } from '../form/form.mjs';\n\n/**\n * The FormulaWebComponent is a web component that can be used to wrap any existing\n * form to make it dynamic. It can be used in any framework or without a framework.\n */\nexport class FormulaWebComponent extends HTMLElement {\n  handleSubmit = true;\n  rootSelector: string | undefined = undefined;\n  formulaOptions: FormulaOptions | undefined = undefined;\n  options: FormulaOptions | undefined = undefined;\n  formula!: Formula;\n  form!: FormulaForm;\n  formEl!: HTMLElement;\n  eventNames!: Map<string, string>;\n\n  #subscriptions: Array<() => void> = [];\n\n  constructor() {\n    super();\n  }\n\n  connectedCallback() {\n    window.requestAnimationFrame(() => this.#connectFormula());\n  }\n\n  disconnectedCallback() {\n    if (this.handleSubmit && this.formEl) {\n      this.formEl.removeEventListener('submit', this.#onHandleSubmit);\n    }\n    this.#subscriptions.forEach((unsub) => unsub());\n    this.#subscriptions = [];\n    if (this.form) {\n      this.form.destroy();\n    }\n  }\n\n  #getComponentOptions() {\n    this.options = this.hasAttribute('formula-options') ? JSON.parse(this.getAttribute('formula-options')!) : undefined;\n\n    this.rootSelector = this.getAttribute('root-selector') ?? undefined;\n  }\n\n  #connectForm() {\n    this.formEl = this.rootSelector ? ((document ?? this).querySelector(this.rootSelector)! as HTMLElement) : (this.firstElementChild as HTMLElement);\n\n    if (this.getAttribute('handle-submit') === 'true') {\n      this.formEl.addEventListener('submit', this.#onHandleSubmit.bind(this));\n    }\n  }\n\n  #connectFormula() {\n    this.#getComponentOptions();\n    this.#connectForm();\n\n    this.formula = createForm(this.options || {}, undefined, undefined, {});\n    this.eventNames = eventsWithFormKeys(this.formula.stores);\n    this.dispatchEvent(new CustomEvent('form:init', { bubbles: true, detail: this.formula }));\n\n    this.form = this.formula.init(this.formEl);\n    this.dispatchEvent(new CustomEvent('form:connect', { bubbles: true, detail: this.form }));\n\n    Object.entries(this.formula.stores).forEach(([key, store]) => {\n      const unsub = store.subscribe((value: unknown) =>\n        this.dispatchEvent(\n          new CustomEvent(this.eventNames.get(key)!, {\n            bubbles: true,\n            detail: value,\n          }),\n        ),\n      );\n      this.#subscriptions.push(unsub);\n    });\n  }\n\n  #onHandleSubmit = (e: Event) => {\n    e.preventDefault();\n    e.stopPropagation();\n    this.dispatchEvent(\n      new CustomEvent('form:submit', {\n        bubbles: true,\n        detail: this.formula.stores.formValues.get(),\n      }),\n    );\n  };\n}\n\ncustomElements.define('formula-form', FormulaWebComponent);\n"],"names":["FormulaWebComponent","#subscriptions","#connectFormula","#onHandleSubmit","unsub","#getComponentOptions","#connectForm","createForm","eventsWithFormKeys","key","store","value","e"],"mappings":";;AAUO,MAAMA,UAA4B,YAAY;AAAA,EACnD,eAAe;AAAA,EACf,eAAmC;AAAA,EACnC,iBAA6C;AAAA,EAC7C,UAAsC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEAC,KAAoC,CAAA;AAAA,EAEpC,cAAc;AACZ,UAAA;AAAA,EACF;AAAA,EAEA,oBAAoB;AAClB,WAAO,sBAAsB,MAAM,KAAKC,GAAA,CAAiB;AAAA,EAC3D;AAAA,EAEA,uBAAuB;AACrB,IAAI,KAAK,gBAAgB,KAAK,UAC5B,KAAK,OAAO,oBAAoB,UAAU,KAAKC,EAAe,GAEhE,KAAKF,GAAe,QAAQ,CAACG,MAAUA,GAAO,GAC9C,KAAKH,KAAiB,CAAA,GAClB,KAAK,QACP,KAAK,KAAK,QAAA;AAAA,EAEd;AAAA,EAEAI,KAAuB;AACrB,SAAK,UAAU,KAAK,aAAa,iBAAiB,IAAI,KAAK,MAAM,KAAK,aAAa,iBAAiB,CAAE,IAAI,QAE1G,KAAK,eAAe,KAAK,aAAa,eAAe,KAAK;AAAA,EAC5D;AAAA,EAEAC,KAAe;AACb,SAAK,SAAS,KAAK,gBAAiB,YAAY,MAAM,cAAc,KAAK,YAAY,IAAsB,KAAK,mBAE5G,KAAK,aAAa,eAAe,MAAM,UACzC,KAAK,OAAO,iBAAiB,UAAU,KAAKH,GAAgB,KAAK,IAAI,CAAC;AAAA,EAE1E;AAAA,EAEAD,KAAkB;AAChB,SAAKG,GAAA,GACL,KAAKC,GAAA,GAEL,KAAK,UAAUC,EAAW,KAAK,WAAW,IAAI,QAAW,QAAW,EAAE,GACtE,KAAK,aAAaC,EAAmB,KAAK,QAAQ,MAAM,GACxD,KAAK,cAAc,IAAI,YAAY,aAAa,EAAE,SAAS,IAAM,QAAQ,KAAK,QAAA,CAAS,CAAC,GAExF,KAAK,OAAO,KAAK,QAAQ,KAAK,KAAK,MAAM,GACzC,KAAK,cAAc,IAAI,YAAY,gBAAgB,EAAE,SAAS,IAAM,QAAQ,KAAK,KAAA,CAAM,CAAC,GAExF,OAAO,QAAQ,KAAK,QAAQ,MAAM,EAAE,QAAQ,CAAC,CAACC,GAAKC,CAAK,MAAM;AAC5D,YAAMN,IAAQM,EAAM;AAAA,QAAU,CAACC,MAC7B,KAAK;AAAA,UACH,IAAI,YAAY,KAAK,WAAW,IAAIF,CAAG,GAAI;AAAA,YACzC,SAAS;AAAA,YACT,QAAQE;AAAA,UAAA,CACT;AAAA,QAAA;AAAA,MACH;AAEF,WAAKV,GAAe,KAAKG,CAAK;AAAA,IAChC,CAAC;AAAA,EACH;AAAA,EAEAD,KAAkB,CAACS,MAAa;AAC9B,IAAAA,EAAE,eAAA,GACFA,EAAE,gBAAA,GACF,KAAK;AAAA,MACH,IAAI,YAAY,eAAe;AAAA,QAC7B,SAAS;AAAA,QACT,QAAQ,KAAK,QAAQ,OAAO,WAAW,IAAA;AAAA,MAAI,CAC5C;AAAA,IAAA;AAAA,EAEL;AACF;AAEA,eAAe,OAAO,gBAAgBZ,CAAmB;"}