form-associated-helpers/internal/form-associated-getters.d.ts

A collection of reusable mixins + helpers for working with form associated custom elements.

/**
 * This file is purely for adding getters to `VanillaFormAssociatedMixin`. It's a hacky workaround until this gets resolved in TypeScript:
 * <https://github.com/microsoft/TypeScript/issues/58790>
 */
import type { Validator } from "../exports/types.js";
/**
 * Defines getters for VanillaFormAssociated.
 */
export type AbstractGetters<T extends typeof HTMLElement> = {
    get allValidators(): Array<Validator<HTMLElement & InstanceType<T>>>;
    get labels(): NodeListOf<HTMLLabelElement>;
    get validity(): ElementInternals["validity"];
    get validationMessage(): ElementInternals["validationMessage"];
    get willValidate(): ElementInternals["willValidate"];
    /**
      * `validationTarget` is used for displaying native validation popups as the "anchor".
      * override this to choose what to "anchor" your validation popups from.
      */
    get validationTarget(): null | undefined | HTMLElement;
    /**
     * Returns the form element attached to the element
     */
    get form(): ElementInternals["form"];
    /**
      * Tracks whether or not an element meets custom criteria for `:user-invalid`. NOTE: this will not set `:user-invalid`, but instead set `:state(user-invalid)`. `:user-invalid` is inconsistent and has not been specced for Form Associated Custom Elements.
      *    By default this getter will always returns false. It is up to you to add logic.
      */
    get isUserInvalid(): boolean;
    /**
      * We use a `isDisabled` that checks both `matches(":disabled")` and `this.disabled` which
      *   accounts for if the element is wrapped in a `<fieldset disabled>`
      */
    get isDisabled(): boolean;
};