// #region Imports
import { FormAssociated } from '../../../Forms/Behaviors/FormAssociated';
import { CustomElement } from './CustomElement';
// #endregion
/**
 * 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 `<form>` 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
 * <form id="myForm">
 *   <custom-input name="username" required></custom-input>
 *   <button type="submit">Submit</button>
 * </form>
 * ```
 *
 * @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 class CustomFormElement extends FormAssociated(CustomElement) {
    // #region Fields
    _form;
    // #endregion
    // #region Ctor
    /**
     * Constructs a new instance of the `CustomFormElement` class.
     *
     * @protected
     */
    constructor() {
        super();
        this._form = null;
    }
    // #endregion
    // #region Properties
    /**
     * Gets or sets the `form` property.
     *
     * @public
     * @override
     */
    get form() {
        return this._form;
    }
    set form(value) {
        this._form = value;
    }
    /**
     * @public
     * @readonly
     */
    get validity() {
        return this.internals.validity;
    }
    /**
     * @public
     * @readonly
     */
    get validationMessage() {
        return this.internals.validationMessage;
    }
    /**
     * @public
     * @readonly
     */
    get willValidate() {
        return this.internals.willValidate;
    }
    /**
     * 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() {
        return this.internals.checkValidity();
    }
    /**
     * 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() {
        return this.internals.reportValidity();
    }
    /**
     * A callback that is invoked when the element is associated with a form.
     *
     * @param error - The error message.
     * @public
     */
    formAssociatedCallback(form) {
        this._form = form;
    }
    /**
     * @public
     * @override
     */
    connectedCallback() {
        super.connectedCallback();
        this._form = this.internals.form;
    }
}
//# sourceMappingURL=CustomFormElement.js.map