@cbpds/web-components
Version:
Web components for the CBP Design System.
110 lines (109 loc) • 3.89 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
export class CbpForm {
constructor() {
this.enhancedFileInputs = [];
this.files = {};
this.preventSubmit = undefined;
}
handleReset() {
const SpecialCases = this.form.querySelectorAll('cbp-dropdown,cbp-slider,cbp-segmented-button-group,cbp-checkbox,cbp-radio,cbp-toggle,cbp-file-input');
SpecialCases.forEach(item => {
item.reset();
});
Object.keys(this.files).forEach(key => {
this.files[key] = [];
});
}
handleSubmit(e) {
const form = e.srcElement;
let formData = new FormData(form);
e.preventDefault();
formData = this.addFiles(formData);
console.log('cbp-form - Resulting formData (array spread): ', [...formData]);
if (this.preventSubmit) {
this.suppressedSubmit.emit({
host: this.host,
form: form,
formData: formData,
nativeEvent: e
});
}
else
form.submit();
}
addFiles(formData) {
Object.keys(this.files).forEach(key => {
var _a, _b, _c;
if (((_b = (_a = this.files) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.length) > 0) {
formData.delete(key);
(_c = this.files) === null || _c === void 0 ? void 0 : _c[key].forEach(file => {
formData.append(key, file);
});
}
formData[key] = this.files[key];
});
return formData;
}
handleEnhancedFileInput(e) {
const { name, value } = e.detail;
if (!!name)
this.files[name] = value;
}
componentWillLoad() {
this.form = this.host.querySelector('form');
this.form.addEventListener('submit', e => this.handleSubmit(e));
this.form.addEventListener('reset', () => this.handleReset());
this.enhancedFileInputs = Array.from(this.host.querySelectorAll('cbp-file-input[multiple]'));
this.enhancedFileInputs.forEach(item => {
item.addEventListener('valueChange', e => this.handleEnhancedFileInput(e));
});
}
render() {
return (h(Host, { key: '6b59b5c464f29f67bc5d42ac4a99f677c2794066' }, h("slot", { key: '08b872acb835a10399316a9c3f6f8e7637b0cb18' })));
}
static get is() { return "cbp-form"; }
static get properties() {
return {
"preventSubmit": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When specified, applies preventDefault() to the submit event and emits a custom event with the formData to hand off to the application."
},
"attribute": "prevent-submit",
"reflect": false
}
};
}
static get events() {
return [{
"method": "suppressedSubmit",
"name": "suppressedSubmit",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "host"; }
}
//# sourceMappingURL=cbp-form.js.map