@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 2.08 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{p as t,H as s,d as e,h as i,c as n}from"./p-e7f1ba21.js";const o=t(class t extends s{constructor(){super();this.__registerHost();this.suppressedSubmit=e(this,"suppressedSubmit",7);this.enhancedFileInputs=[];this.files={};this.preventSubmit=undefined}handleReset(){const t=this.form.querySelectorAll("cbp-dropdown,cbp-slider,cbp-segmented-button-group,cbp-checkbox,cbp-radio,cbp-toggle,cbp-file-input");t.forEach((t=>{t.reset()}));Object.keys(this.files).forEach((t=>{this.files[t]=[]}))}handleSubmit(t){const s=t.srcElement;let e=new FormData(s);t.preventDefault();e=this.addFiles(e);console.log("cbp-form - Resulting formData (array spread): ",[...e]);if(this.preventSubmit){this.suppressedSubmit.emit({host:this.host,form:s,formData:e,nativeEvent:t})}else s.submit()}addFiles(t){Object.keys(this.files).forEach((s=>{var e,i,n;if(((i=(e=this.files)===null||e===void 0?void 0:e[s])===null||i===void 0?void 0:i.length)>0){t.delete(s);(n=this.files)===null||n===void 0?void 0:n[s].forEach((e=>{t.append(s,e)}))}t[s]=this.files[s]}));return t}handleEnhancedFileInput(t){const{name:s,value:e}=t.detail;if(!!s)this.files[s]=e}componentWillLoad(){this.form=this.host.querySelector("form");this.form.addEventListener("submit",(t=>this.handleSubmit(t)));this.form.addEventListener("reset",(()=>this.handleReset()));this.enhancedFileInputs=Array.from(this.host.querySelectorAll("cbp-file-input[multiple]"));this.enhancedFileInputs.forEach((t=>{t.addEventListener("valueChange",(t=>this.handleEnhancedFileInput(t)))}))}render(){return i(n,{key:"6b59b5c464f29f67bc5d42ac4a99f677c2794066"},i("slot",{key:"08b872acb835a10399316a9c3f6f8e7637b0cb18"}))}get host(){return this}},[4,"cbp-form",{preventSubmit:[4,"prevent-submit"]}]);function c(){if(typeof customElements==="undefined"){return}const t=["cbp-form"];t.forEach((t=>{switch(t){case"cbp-form":if(!customElements.get(t)){customElements.define(t,o)}break}}))}const r=o;const h=c;export{r as CbpForm,h as defineCustomElement};
//# sourceMappingURL=cbp-form.js.map