import { type IFormAssociated } from '../../../Forms/Behaviors/FormAssociated'; import type { FormRestoreReason } from '../../../Forms/FormRestoreReason'; import type { FormRestoreState } from '../../../Forms/FormRestoreState'; import { CustomElement } from './CustomElement'; import type { ICustomFormElement } from './Interfaces/ICustomFormElement'; declare const CustomFormElement_base: import("../../../Index").ControlBehaviorReturn; /** * Custom Form Element - The base class for all form-associated Mosaik components. * * @description * CustomFormElement extends CustomElement with form association capabilities, enabling components * to participate in HTML form submission and validation. It implements the Form-Associated Custom * Elements API, providing built-in form integration, validation state management, and lifecycle * callbacks for form interactions. This class uses the FormAssociated behavior mixin to provide * standard form element capabilities like value management, constraint validation, and form reset * handling. All Mosaik form controls (inputs, selects, textareas, etc.) inherit from this base class. * * @remarks * This class leverages the Element Internals API (`attachInternals()`) to integrate with native * HTML form behavior, ensuring seamless interaction with `
` elements, automatic validation, * and accessibility features like ARIA live regions for validation messages. * * @name CustomFormElement * @category Abstract Elements * * @slot style - Custom styles injection slot for shadow DOM styling escape hatch * * @fires connected {ConnectedEvent} - Emitted when the element is connected to the DOM * @fires disconnected {DisconnectedEvent} - Emitted when the element is disconnected from the DOM * @fires changed {PropertyChangedEvent} - Emitted when any attribute changes before update * @fires invalid {Event} - Emitted when validation fails (native form validation event) * * @example * Creating a form-associated custom element: * ```typescript * export class CustomInputElement extends CustomFormElement { * constructor() { * super(); * } * * public override formResetCallback(): void { * this.value = this.defaultValue; * } * * public override formDisabledCallback(disabled: boolean): void { * this.disabled = disabled; * } * } * ``` * * @example * Using in HTML forms: * ```html * * * *
* ``` * * @example * Validating form data: * ```typescript * const input = document.querySelector('custom-input'); * if (input.checkValidity()) { * console.log('Input is valid'); * } else { * console.log('Validation error:', input.validationMessage); * } * ``` * * @example * Handling form state restoration: * ```typescript * public override formStateRestoreCallback(state: string | null, reason: 'restore' | 'autocomplete'): void { * if (reason === 'restore') { * this.value = state ?? ''; * } * } * ``` * * @abstract * @public */ export declare abstract class CustomFormElement extends CustomFormElement_base implements ICustomFormElement, IFormAssociated { private _form; /** * Constructs a new instance of the `CustomFormElement` class. * * @protected */ constructor(); /** * Gets or sets the `form` property. * * @public * @override */ get form(): HTMLFormElement | null; set form(value: HTMLFormElement | null); /** * @public * @readonly */ get validity(): ValidityState; /** * @public * @readonly */ get validationMessage(): string; /** * @public * @readonly */ get willValidate(): boolean; /** * A callback that is invoked when the element disabled state changes. * * @public * @abstract * @param disabled - The disabled state. */ abstract formDisabledCallback?(disabled: boolean): void; /** * A callback that is invoked when the element will be reseted. * * @public * @abstract */ abstract formResetCallback?(): void; /** * A callback that is invoked when the element will be restored. * * @public * @abstract * @param state - The restore state. * @param reason - The restore reason. */ abstract formStateRestoreCallback?(state: FormRestoreState | null, reason: FormRestoreReason): void; /** * Returns true if internals's target element has no validity problems; false otherwise. * Fires an invalid event at the element in the latter case. * * @public */ checkValidity(): boolean; /** * Returns true if internals's target element has no validity problems; otherwise, returns false. * Fires an invalid event at the element, and (if the event isn't canceled) reports the problem to the user. * * @public */ reportValidity(): boolean; /** * A callback that is invoked when the element is associated with a form. * * @param error - The error message. * @public */ formAssociatedCallback?(form: HTMLFormElement | null): void; /** * @public * @override */ connectedCallback(): void; } export {}; //# sourceMappingURL=CustomFormElement.d.ts.map