refactor(associated-mixin): Incorporated internals controller

Author: rkaraivanov

src/components/common/controllers/internals.ts

@@ -3,6 +3,7 @@ import type {
   ReactiveController,
   ReactiveControllerHost,
 } from 'lit';
+import type { FormValueType } from '../mixins/forms/types.js';
 
 /** Configuration for the ElementInternalsController. */
 type ElementInternalsConfig<T extends keyof ARIAMixin = keyof ARIAMixin> = {
@@ -29,6 +30,41 @@ class ElementInternalsController {
     return this._internals.form;
   }
 
+  /**
+   * Returns a `ValidityState` object which represents the different validity states
+   * the element can be in, with respect to constraint validation.
+   *
+   * @remarks
+   * The host element must be form associated, that is should have
+   * `static formAssociated = true`.
+   */
+  public get validity(): ValidityState {
+    return this._internals.validity;
+  }
+
+  /**
+   * Returns a string containing the validation message of this element.
+   *
+   * @remarks
+   * The host element must be form associated, that is should have
+   * `static formAssociated = true`.
+   */
+  public get validationMessage(): string {
+    return this._internals.validationMessage;
+  }
+
+  /**
+   * Returns a boolean value which returns true if the element is a submittable element
+   * which is a candidate for constraint validation.
+   *
+   * @remarks
+   * The host element must be form associated, that is should have
+   * `static formAssociated = true`.
+   */
+  public get willValidate(): boolean {
+    return this._internals.willValidate;
+  }
+
   constructor(
     host: ReactiveControllerHost & LitElement,
     config?: ElementInternalsConfig
@@ -52,13 +88,29 @@ class ElementInternalsController {
 
   /**
    * Adds or removes a custom state from the element's internals.
-   * Custom states can be styled via `:state()` pseudo-class in CSS.
+   * Custom states can be styled via `:state()` selector in CSS.
    */
   public setState(state: string, value: boolean): void {
     value
       ? this._internals.states.add(state)
       : this._internals.states.delete(state);
   }
+
+  public setFormValue(value: FormValueType, state?: FormValueType): void {
+    this._internals.setFormValue(value, state);
+  }
+
+  public setValidity(flags?: ValidityStateFlags, message?: string): void {
+    this._internals.setValidity(flags, message);
+  }
+
+  public checkValidity(): boolean {
+    return this._internals.checkValidity();
+  }
+
+  public reportValidity(): boolean {
+    return this._internals.reportValidity();
+  }
 }
 
 /** Creates and adds a {@link ElementInternalsController} to a LitElement host. */

src/components/common/mixins/forms/associated.ts

@@ -1,5 +1,6 @@
 import type { LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { addInternalsController } from '../../controllers/internals.js';
 import { addSafeEventListener, isFunction, isString } from '../../util.js';
 import type { Validator } from '../../validators.js';
 import type { Constructor } from '../constructor.js';
@@ -13,6 +14,8 @@ import {
   InternalResetEvent,
 } from './types.js';
 
+const INVALID_STATE = 'ig-invalid';
+
 const eventOptions = {
   bubbles: false,
   composed: false,
@@ -30,8 +33,8 @@ function BaseFormAssociated<T extends Constructor<LitElement>>(base: T) {
   class BaseFormAssociatedElement extends base {
     public static readonly formAssociated = true;
 
-    private __internals: ElementInternals;
-    protected _formValue!: FormValue<unknown>;
+    private readonly __internals = addInternalsController(this);
+    protected readonly _formValue!: FormValue<unknown>;
 
     protected _disabled = false;
     protected _invalid = false;
@@ -122,8 +125,6 @@ function BaseFormAssociated<T extends Constructor<LitElement>>(base: T) {
 
     constructor(...args: any[]) {
       super(args);
-      this.__internals = this.attachInternals();
-
       addSafeEventListener(this, 'invalid', this._handleInvalid);
     }
 
@@ -137,6 +138,7 @@ function BaseFormAssociated<T extends Constructor<LitElement>>(base: T) {
     }
 
     private _setInvalidStyles(): void {
+      this.__internals.setState(INVALID_STATE, this._shouldApplyStyles);
       this.toggleAttribute('invalid', this._shouldApplyStyles);
       this.requestUpdate();
     }
@@ -157,9 +159,7 @@ function BaseFormAssociated<T extends Constructor<LitElement>>(base: T) {
     }
 
     protected _handleBlur(): void {
-      if (!this._touched) {
-        this._touched = true;
-      }
+      this._setTouchedState();
       this._validate();
     }
 

src/components/common/mixins/forms/types.ts

@@ -1,4 +1,5 @@
 import type { LitElement } from 'lit';
+import type { ElementInternalsController } from '../../controllers/internals.js';
 import type { Validator } from '../../validators.js';
 
 export type FormRestoreMode = 'autocomplete' | 'restore';
@@ -9,10 +10,10 @@ export type IgcFormControl = LitElement &
 declare class BaseFormAssociatedElement {
   public static readonly formAssociated: boolean;
 
-  private __internals: ElementInternals;
+  private readonly __internals: ElementInternalsController;
+  protected readonly _formValue: unknown;
 
   // Properties
-  protected _formValue: unknown;
   protected _pristine: boolean;
   protected _disabled: boolean;
   protected _invalid: boolean;