@diax-js/form-element/dist/src/base-form-element.js

Simple implementation of Form Associated Custom Elements.

import { useElement, useSupplier } from '@diax-js/context';
import { BaseElement } from '@diax-js/custom-element';
export class BaseFormElement extends BaseElement {
    static get formAssociated() {
        return true;
    }
    #internals;
    constructor() {
        super();
        useElement(this, () => {
            this.#internals = useSupplier(ElementInternals, () => this.attachInternals());
        });
    }
    get name() {
        return this.getAttribute('name') ?? '';
    }
    get type() {
        return this.localName;
    }
    get form() {
        return this.#internals.form;
    }
    get validity() {
        return this.#internals.validity;
    }
    get validationMessage() {
        return this.#internals.validationMessage;
    }
    get willValidate() {
        return this.#internals.willValidate;
    }
    checkValidity() {
        return this.#internals.checkValidity();
    }
    reportValidity() {
        return this.#internals.reportValidity();
    }
    formAssociatedCallback(form) {
        useElement(this, () => {
            this.instance.formAssociatedCallback?.(form);
        });
    }
    formDisabledCallback(disabled) {
        useElement(this, () => {
            this.instance.formDisabledCallback?.(disabled);
        });
    }
    formResetCallback() {
        useElement(this, () => {
            this.instance.formResetCallback?.();
        });
    }
    formStateRestoreCallback(state, reason) {
        useElement(this, () => {
            this.instance.formStateRestoreCallback?.(state, reason);
        });
    }
}
export function getFormElementClass(target) {
    return class extends BaseFormElement {
        static get observedAttributes() {
            return target.observedAttributes;
        }
        static get target() {
            return target;
        }
    };
}
//# sourceMappingURL=base-form-element.js.map