@cbpds/web-components/dist/esm/cbp-form.entry.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-31e2d0a8.js';

const CbpForm = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.suppressedSubmit = createEvent(this, "suppressedSubmit", 7);
        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' })));
    }
    get host() { return getElement(this); }
};

export { CbpForm as cbp_form };

//# sourceMappingURL=cbp-form.entry.js.map