import { ZuiBaseElement } from './zui-base.js'; import type { PropertyValues } from 'lit'; /** * @attr {string} name - The name of this element that is associated with form submission * @attr {boolean} disabled - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission * @attr {boolean} readonly - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission * @attr {boolean} autofocus - If true, this element will be focused when connected to the document * * @prop {string} name - The name of this element that is associated with form submission * @prop {boolean} disabled - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission * @prop {boolean} readOnly - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission * @prop {boolean} autofocus - If true, this element will be focused when connected to the document */ export declare abstract class ZuiFormAssociatedElement extends ZuiBaseElement { #private; static shadowRootOptions: ShadowRootInit; /** * Necessary workaround to https://issues.chromium.org/issues/389587444 and purely needed for validation */ protected get _focusControlSelector(): string; /** * Tells the browser that this is a form-associated custom element: https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example */ protected static get formAssociated(): boolean; get form(): HTMLFormElement | null; /** * The name of this element that is associated with form submission */ get name(): string | null; /** * Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission */ disabled: boolean; /** * Represents whether a user can make changes to this element; the value of this element will still be included in the form submission */ readOnly: boolean; /** * If true, this element will be focused when connected to the document */ autofocus: boolean; /** * Returns true if the element will be validated when the form is submitted */ get willValidate(): boolean; /** * Returns a ValidityState object that represents the validity states of an element. * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/ValidityState} */ get validity(): ValidityState; /** * Returns the error message that would be displayed if the element was to be checked for validity */ get validationMessage(): string; /** * TODO(pat): Temporary hack for zui-select-dropdown; focus should be refactored in that component */ protected _deferFocus: boolean; protected _deferClick: boolean; protected get _formSubmitButton(): HTMLButtonElement | HTMLInputElement | null; constructor(); firstUpdated(changedProps: PropertyValues): void; protected formResetCallback(): void; checkValidity(): boolean; reportValidity(): boolean; /** * Sets a custom error message to be displayed when the element is checked for validity. Set to empty string to remove the custom error. Note: consumers must clear the custom error; the component will not automatically clear it. * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity | setCustomValidity} * @param message - The error message to be displayed when the element is checked for validity */ setCustomValidity(message: string): void; protected _setFormValue(value: FormValueType): void; protected _setValidity(validity: ValidityStateFlags, message: string): void; protected _mapValidationMessage(message: string, validityState: ValidityStateFlags, validationMessageMap: ValidationMessageMap): string; } export type FormValueType = string | string[] | File | FileList | null; export type ValidationMessageMap = { [K in keyof ValidityState]?: string; };