16437891720

Committed 22 Jul 2025 07:38AM UTC coverage: 98.291% (+0.01%) from 98.28%

Build # 16437891720

Build Type

Pull #1786

github

Committed by

web-flow

Commit Message

Merge 0d250dfba into 7c83039bd

Pull Request Pull Request #1786: refactor: Form associated components validity behavior

Run Details

4946 of 5196 branches covered (95.19%)

Branch coverage included in aggregate %.

312 of 316 new or added lines in 20 files covered. (98.73%)

12 existing lines in 3 files now uncovered.

32268 of 32665 relevant lines covered (98.78%)

1720.88 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

98.56

/src/components/common/controllers/internals.ts

import type {
  LitElement,
  ReactiveController,
  ReactiveControllerHost,
} from 'lit';
import type { FormValueType } from '../mixins/forms/types.js';

/** Configuration for the ElementInternalsController. */
type ElementInternalsConfig<T extends keyof ARIAMixin = keyof ARIAMixin> = {
  /** Initial ARIA attributes to set on the element internals. */
  initialARIA: Partial<Record<T, ARIAMixin[T]>>;
};

/**
 * A Lit ReactiveController to manage `ElementInternals` for a host element.
 * Provides methods to interact with custom element states and ARIA attributes..
 */
class ElementInternalsController {
  private readonly _host: ReactiveControllerHost & LitElement;
  private readonly _internals: ElementInternals;

  /**
   * Gets the closest ancestor `<form>` element or `null`.
   *
   * @remarks
   * The host element must be form associated, that is should have
   * `static formAssociated = true` in order to return the parent form.
   */
  public get form(): HTMLFormElement | null {
    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
  ) {
    this._host = host;
    this._internals = this._host.attachInternals();

    if (config?.initialARIA) {
      this.setARIA(config.initialARIA);
    }

    host.addController(this as ReactiveController);
  }

  /** Sets ARIA attributes on the element's internals. */
  public setARIA<T extends keyof ARIAMixin = keyof ARIAMixin>(
    state: Partial<Record<T, ARIAMixin[T]>>
  ): void {
    Object.assign(this._internals, state);
  }

  /**
   * Adds or removes a custom state from the element's internals.
   * 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. */
export function addInternalsController(
  host: ReactiveControllerHost & LitElement,
  config?: ElementInternalsConfig
): ElementInternalsController {
  return new ElementInternalsController(host, config);
}

export type { ElementInternalsController };

1	import type {	64✔
2	LitElement,	64✔
3	ReactiveController,	64✔
4	ReactiveControllerHost,	64✔
5	} from 'lit';	64✔
6	import type { FormValueType } from '../mixins/forms/types.js';	64✔
7		64✔
8	/** Configuration for the ElementInternalsController. */	64✔
9	type ElementInternalsConfig<T extends keyof ARIAMixin = keyof ARIAMixin> = {	64✔
10	/** Initial ARIA attributes to set on the element internals. */	64✔
11	initialARIA: Partial<Record<T, ARIAMixin[T]>>;	64✔
12	};	64✔
13		64✔
14	/**	64✔
15	* A Lit ReactiveController to manage `ElementInternals` for a host element.	64✔
16	* Provides methods to interact with custom element states and ARIA attributes..	64✔
17	*/	64✔
18	class ElementInternalsController {	64✔
19	private readonly _host: ReactiveControllerHost & LitElement;	64✔
20	private readonly _internals: ElementInternals;	64✔
21		64✔
22	/**	64✔
23	* Gets the closest ancestor `<form>` element or `null`.	64✔
24	*	64✔
25	* @remarks	64✔
26	* The host element must be form associated, that is should have	64✔
27	* `static formAssociated = true` in order to return the parent form.	64✔
28	*/	64✔
29	public get form(): HTMLFormElement \| null {	64✔
30	return this._internals.form;	20✔
31	}	20✔
32		64✔
33	/**	64✔
34	* Returns a `ValidityState` object which represents the different validity states	64✔
35	* the element can be in, with respect to constraint validation.	64✔
36	*	64✔
37	* @remarks	64✔
38	* The host element must be form associated, that is should have	64✔
39	* `static formAssociated = true`.	64✔
40	*/	64✔
41	public get validity(): ValidityState {	64✔
42	return this._internals.validity;	14,509✔
43	}	14,509✔
44		64✔
45	/**	64✔
46	* Returns a string containing the validation message of this element.	64✔
47	*	64✔
48	* @remarks	64✔
49	* The host element must be form associated, that is should have	64✔
50	* `static formAssociated = true`.	64✔
51	*/	64✔
52	public get validationMessage(): string {	64✔
53	return this._internals.validationMessage;	10✔
54	}	10✔
55		64✔
56	/**	64✔
57	* Returns a boolean value which returns true if the element is a submittable element	64✔
58	* which is a candidate for constraint validation.	64✔
59	*	64✔
60	* @remarks	64✔
61	* The host element must be form associated, that is should have	64✔
62	* `static formAssociated = true`.	64✔
63	*/	64✔
64	public get willValidate(): boolean {	64✔
NEW 65	return this._internals.willValidate;	×
NEW 66	}	×
67		64✔
68	constructor(	64✔
69	host: ReactiveControllerHost & LitElement,	10,328✔
70	config?: ElementInternalsConfig	10,328✔
71	) {	10,328✔
72	this._host = host;	10,328✔
73	this._internals = this._host.attachInternals();	10,328✔
74		10,328✔
75	if (config?.initialARIA) {	10,328✔
76	this.setARIA(config.initialARIA);	6,413✔
77	}	6,413✔
78		10,328✔
79	host.addController(this as ReactiveController);	10,328✔
80	}	10,328✔
81		64✔
82	/** Sets ARIA attributes on the element's internals. */	64✔
83	public setARIA<T extends keyof ARIAMixin = keyof ARIAMixin>(	64✔
84	state: Partial<Record<T, ARIAMixin[T]>>	17,336✔
85	): void {	17,336✔
86	Object.assign(this._internals, state);	17,336✔
87	}	17,336✔
88		64✔
89	/**	64✔
90	* Adds or removes a custom state from the element's internals.	64✔
91	* Custom states can be styled via `:state()` selector in CSS.	64✔
92	*/	64✔
93	public setState(state: string, value: boolean): void {	64✔
94	value	4,603✔
95	? this._internals.states.add(state)	504✔
96	: this._internals.states.delete(state);	4,099✔
97	}	4,603✔
98		64✔
99	public setFormValue(value: FormValueType, state?: FormValueType): void {	64✔
100	this._internals.setFormValue(value, state);	3,184✔
101	}	3,184✔
102		64✔
103	public setValidity(flags?: ValidityStateFlags, message?: string): void {	64✔
104	this._internals.setValidity(flags, message);	7,580✔
105	}	7,580✔
106		64✔
107	public checkValidity(): boolean {	64✔
108	return this._internals.checkValidity();	7,848✔
109	}	7,848✔
110		64✔
111	public reportValidity(): boolean {	64✔
112	return this._internals.reportValidity();	85✔
113	}	85✔
114	}	64✔
115		64✔
116	/** Creates and adds a {@link ElementInternalsController} to a LitElement host. */	64✔
117	export function addInternalsController(	64✔
118	host: ReactiveControllerHost & LitElement,	10,328✔
119	config?: ElementInternalsConfig	10,328✔
120	): ElementInternalsController {	10,328✔
121	return new ElementInternalsController(host, config);	10,328✔
122	}	10,328✔
123		64✔
124	export type { ElementInternalsController };	64✔

IgniteUI / igniteui-webcomponents / 16437891720

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous