8599218710

Committed 08 Apr 2024 11:24AM UTC coverage: 97.618% (+0.01%) from 97.605%

Build # 8599218710

Build Type

push

github

Committed by

web-flow

Commit Message

fix(radio, checkbox, switch): Synchronous form validation (#1128)

Run Details

3307 of 3519 branches covered (93.98%)

Branch coverage included in aggregate %.

85 of 85 new or added lines in 8 files covered. (100.0%)

1 existing line in 1 file now uncovered.

20705 of 21079 relevant lines covered (98.23%)

426.58 hits per line

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

98.94

/src/components/radio/radio.ts

import { LitElement, html } from 'lit';
import { property, query, queryAssignedNodes, state } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { live } from 'lit/directives/live.js';

import { styles } from './themes/radio.base.css.js';
import { styles as shared } from './themes/shared/radio.common.css.js';
import { all } from './themes/themes.js';
import { getGroup } from './utils.js';
import { themes } from '../../theming/theming-decorator.js';
import {
  addKeybindings,
  arrowDown,
  arrowLeft,
  arrowRight,
  arrowUp,
} from '../common/controllers/key-bindings.js';
import { alternateName } from '../common/decorators/alternateName.js';
import { blazorTwoWayBind } from '../common/decorators/blazorTwoWayBind.js';
import { watch } from '../common/decorators/watch.js';
import { registerComponent } from '../common/definitions/register.js';
import messages from '../common/localization/validation-en.js';
import { Constructor } from '../common/mixins/constructor.js';
import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
import { FormAssociatedRequiredMixin } from '../common/mixins/form-associated-required.js';
import { createCounter, isLTR, partNameMap, wrap } from '../common/util.js';
import { Validator } from '../common/validators.js';

export interface IgcRadioEventMap {
  igcChange: CustomEvent<boolean>;
  igcFocus: CustomEvent<void>;
  igcBlur: CustomEvent<void>;
}

/**
 * @element igc-radio
 *
 * @slot - The radio label.
 *
 * @fires igcChange - Emitted when the control's checked state changes.
 * @fires igcFocus - Emitted when the control gains focus.
 * @fires igcBlur - Emitted when the control loses focus.
 *
 * @csspart base - The radio control base wrapper.
 * @csspart control - The radio control.
 * @csspart label - The radio control label.
 */
@themes(all)
export default class IgcRadioComponent extends FormAssociatedRequiredMixin(
  EventEmitterMixin<IgcRadioEventMap, Constructor<LitElement>>(LitElement)
) {
  public static readonly tagName = 'igc-radio';
  protected static styles = [styles, shared];

  /* blazorSuppress */
  public static register() {
    registerComponent(this);
  }

  private static readonly increment = createCounter();

  protected override validators: Validator<this>[] = [
    {
      key: 'valueMissing',
      message: messages.required,
      isValid: () => {
        const { radios, checked } = this.group;
        return radios.some((radio) => radio.required)
          ? checked.length > 0
          : true;
      },
    },
  ];

  private inputId = `radio-${IgcRadioComponent.increment()}`;
  private labelId = `radio-label-${this.inputId}`;

  protected _checked = false;
  protected _value!: string;

  @query('input[type="radio"]')
  protected input!: HTMLInputElement;

  @queryAssignedNodes({ flatten: true })
  protected label!: Array<Node>;

  @state()
  private _tabIndex = 0;

  @state()
  private focused = false;

  @state()
  protected hideLabel = false;

  private get group() {
    return getGroup(this);
  }

  protected override setDefaultValue(): void {
    this._defaultValue = this === this.group.checked[0];
  }

  /**
   * The value attribute of the control.
   * @attr
   */
  @property()
  public set value(value: string) {
    this._value = value;
    if (this._checked) {
      this.setFormValue(this._value || 'on');
    }
  }

  public get value(): string {
    return this._value;
  }

  /**
   * The checked state of the control.
   * @attr
   */
  @property({ type: Boolean })
  @blazorTwoWayBind('igcChange', 'detail')
  public set checked(value: boolean) {
    this._checked = Boolean(value);

    if (this.hasUpdated) {
      this._checked ? this._updateCheckedState() : this._updateUncheckedState();
    }
  }

  public get checked(): boolean {
    return this._checked;
  }

  /**
   * The label position of the radio control.
   * @attr label-position
   */
  @property({ reflect: true, attribute: 'label-position' })
  public labelPosition: 'before' | 'after' = 'after';

  constructor() {
    super();
    this.addEventListener('keyup', this.handleKeyUp);

    addKeybindings(this, {
      skip: () => this.disabled,
      bindingDefaults: { preventDefault: true, triggers: ['keydownRepeat'] },
    })
      .set(arrowLeft, () => this.navigate(isLTR(this) ? -1 : 1))
      .set(arrowRight, () => this.navigate(isLTR(this) ? 1 : -1))
      .set(arrowUp, () => this.navigate(-1))
      .set(arrowDown, () => this.navigate(1));
  }

  public override connectedCallback() {
    super.connectedCallback();

    this._checked = this === this.group.checked[0];
    this.updateValidity();
  }

  /** Simulates a click on the radio control. */
  public override click() {
    this.input.click();
  }

  /** Sets focus on the radio control. */
  @alternateName('focusComponent')
  public override focus(options?: FocusOptions) {
    this.input.focus(options);
  }

  /** Removes focus from the radio control. */
  @alternateName('blurComponent')
  public override blur() {
    this.input.blur();
  }

  /**
   * Sets a custom validation message for the control.
   * As long as `message` is not empty, the control is considered invalid.
   */
  public override setCustomValidity(message: string): void {
    const { radios } = this.group;

    for (const radio of radios) {
      radio.updateValidity(message);
      radio.setInvalidState();
    }
  }

  @watch('required', { waitUntilFirstUpdate: true })
  protected override requiredChange(): void {
    const { radios } = this.group;

    for (const radio of radios) {
      radio.updateValidity();
      radio.setInvalidState();
    }
  }

  private _updateCheckedState() {
    const { siblings } = this.group;

    this.setFormValue(this.value || 'on');
    this.updateValidity();
    this.setInvalidState();

    this._tabIndex = 0;
    this.input?.focus();

    for (const radio of siblings) {
      radio.checked = false;
      radio._tabIndex = -1;
      radio.updateValidity();
      radio.setInvalidState();
    }
  }

  private _updateUncheckedState() {
    const { siblings } = this.group;

    this.setFormValue(null);
    this.updateValidity();
    this.setInvalidState();

    if (this.hasUpdated) {
      this._tabIndex = -1;
    }

    for (const radio of siblings) {
      radio.updateValidity();
    }
  }

  protected handleMouseDown(event: PointerEvent) {
    event.preventDefault();
    this.input.focus();
    this.focused = false;
  }

  protected handleClick() {
    this.checked = true;
    this.emitEvent('igcChange', { detail: this.checked });
  }

  protected handleBlur() {
    this.emitEvent('igcBlur');
    this.focused = false;
  }

  protected handleFocus() {
    this.emitEvent('igcFocus');
  }

  protected handleKeyUp() {
    if (!this.focused) {
      this.focused = true;
    }
  }

  protected navigate(idx: number) {
    const { active } = this.group;
    const nextIdx = wrap(0, active.length - 1, active.indexOf(this) + idx);
    const radio = active[nextIdx];

    radio.focus();
    radio.checked = true;
    radio.emitEvent('igcChange', { detail: radio.checked });
  }

  protected handleSlotChange() {
    this.hideLabel = this.label.length < 1;
  }

  protected override render() {
    const labelledBy = this.getAttribute('aria-labelledby');

    return html`
      <label
        part=${partNameMap({
          base: true,
          checked: this.checked,
          focused: this.focused,
        })}
        for=${this.inputId}
        @pointerdown=${this.handleMouseDown}
      >
        <input
          id=${this.inputId}
          type="radio"
          name=${ifDefined(this.name)}
          value=${ifDefined(this.value)}
          .required=${this.required}
          .disabled=${this.disabled}
          .checked=${live(this.checked)}
          tabindex=${this._tabIndex}
          aria-checked=${this.checked ? 'true' : 'false'}
          aria-disabled=${this.disabled ? 'true' : 'false'}
          aria-labelledby=${labelledBy ? labelledBy : this.labelId}
          @click=${this.handleClick}
          @blur=${this.handleBlur}
          @focus=${this.handleFocus}
        />
        <span part=${partNameMap({ control: true, checked: this.checked })}>
          <span
            .hidden=${this.disabled}
            part=${partNameMap({ ripple: true, checked: this.checked })}
          ></span>
        </span>
        <span
          .hidden=${this.hideLabel}
          part=${partNameMap({ label: true, checked: this.checked })}
          id=${this.labelId}
        >
          <slot @slotchange=${this.handleSlotChange}></slot>
        </span>
      </label>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'igc-radio': IgcRadioComponent;
  }
}

1	import { LitElement, html } from 'lit';	24✔
2	import { property, query, queryAssignedNodes, state } from 'lit/decorators.js';	24✔
3	import { ifDefined } from 'lit/directives/if-defined.js';	24✔
4	import { live } from 'lit/directives/live.js';	24✔
5		24✔
6	import { styles } from './themes/radio.base.css.js';	24✔
7	import { styles as shared } from './themes/shared/radio.common.css.js';	24✔
8	import { all } from './themes/themes.js';	24✔
9	import { getGroup } from './utils.js';	24✔
10	import { themes } from '../../theming/theming-decorator.js';	24✔
11	import {	24✔
12	addKeybindings,	24✔
13	arrowDown,	24✔
14	arrowLeft,	24✔
15	arrowRight,	24✔
16	arrowUp,	24✔
17	} from '../common/controllers/key-bindings.js';	24✔
18	import { alternateName } from '../common/decorators/alternateName.js';	24✔
19	import { blazorTwoWayBind } from '../common/decorators/blazorTwoWayBind.js';	24✔
20	import { watch } from '../common/decorators/watch.js';	24✔
21	import { registerComponent } from '../common/definitions/register.js';	24✔
22	import messages from '../common/localization/validation-en.js';	24✔
23	import { Constructor } from '../common/mixins/constructor.js';	24✔
24	import { EventEmitterMixin } from '../common/mixins/event-emitter.js';	24✔
25	import { FormAssociatedRequiredMixin } from '../common/mixins/form-associated-required.js';	24✔
26	import { createCounter, isLTR, partNameMap, wrap } from '../common/util.js';	24✔
27	import { Validator } from '../common/validators.js';	24✔
28		24✔
29	export interface IgcRadioEventMap {	24✔
30	igcChange: CustomEvent<boolean>;	24✔
31	igcFocus: CustomEvent<void>;	24✔
32	igcBlur: CustomEvent<void>;	24✔
33	}	24✔
34		24✔
35	/**	24✔
36	* @element igc-radio	24✔
37	*	24✔
38	* @slot - The radio label.	24✔
39	*	24✔
40	* @fires igcChange - Emitted when the control's checked state changes.	24✔
41	* @fires igcFocus - Emitted when the control gains focus.	24✔
42	* @fires igcBlur - Emitted when the control loses focus.	24✔
43	*	24✔
44	* @csspart base - The radio control base wrapper.	24✔
45	* @csspart control - The radio control.	24✔
46	* @csspart label - The radio control label.	24✔
47	*/	24✔
48	@themes(all)	24✔
49	export default class IgcRadioComponent extends FormAssociatedRequiredMixin(	24✔
50	EventEmitterMixin<IgcRadioEventMap, Constructor<LitElement>>(LitElement)	24✔
51	) {	24✔
52	public static readonly tagName = 'igc-radio';	24✔
53	protected static styles = [styles, shared];	24✔
54		24✔
55	/* blazorSuppress */	24✔
56	public static register() {	24✔
57	registerComponent(this);	4✔
58	}	4✔
59		24✔
60	private static readonly increment = createCounter();	24✔
61		24✔
62	protected override validators: Validator<this>[] = [	24✔
63	{	24✔
64	key: 'valueMissing',	24✔
65	message: messages.required,	24✔
66	isValid: () => {	24✔
67	const { radios, checked } = this.group;	217✔
68	return radios.some((radio) => radio.required)	217✔
69	? checked.length > 0	217✔
70	: true;	217✔
71	},	24✔
72	},	24✔
73	];	24✔
74		24✔
75	private inputId = `radio-${IgcRadioComponent.increment()}`;	24✔
76	private labelId = `radio-label-${this.inputId}`;	24✔
77		24✔
78	protected _checked = false;	24✔
79	protected _value!: string;	24✔
80		24✔
81	@query('input[type="radio"]')	24✔
82	protected input!: HTMLInputElement;	24✔
83		24✔
84	@queryAssignedNodes({ flatten: true })	24✔
85	protected label!: Array<Node>;	24✔
86		24✔
87	@state()	24✔
88	private _tabIndex = 0;	24✔
89		24✔
90	@state()	24✔
91	private focused = false;	24✔
92		24✔
93	@state()	24✔
94	protected hideLabel = false;	24✔
95		24✔
96	private get group() {	24✔
97	return getGroup(this);	374✔
98	}	374✔
99		24✔
100	protected override setDefaultValue(): void {	24✔
101	this._defaultValue = this === this.group.checked[0];	59✔
102	}	59✔
103		24✔
104	/**	24✔
105	* The value attribute of the control.	24✔
106	* @attr	24✔
107	*/	24✔
108	@property()	24✔
109	public set value(value: string) {	24✔
110	this._value = value;	59✔
111	if (this._checked) {	59✔
112	this.setFormValue(this._value \|\| 'on');	1✔
113	}	1✔
114	}	59✔
115		24✔
116	public get value(): string {	24✔
117	return this._value;	276✔
118	}	276✔
119		24✔
120	/**	24✔
121	* The checked state of the control.	24✔
122	* @attr	24✔
123	*/	24✔
124	@property({ type: Boolean })	24✔
125	@blazorTwoWayBind('igcChange', 'detail')	24✔
126	public set checked(value: boolean) {	24✔
127	this._checked = Boolean(value);	47✔
128		47✔
129	if (this.hasUpdated) {	47✔
130	this._checked ? this._updateCheckedState() : this._updateUncheckedState();	47✔
131	}	47✔
132	}	47✔
133		24✔
134	public get checked(): boolean {	24✔
135	return this._checked;	1,884✔
136	}	1,884✔
137		24✔
138	/**	24✔
139	* The label position of the radio control.	24✔
140	* @attr label-position	24✔
141	*/	24✔
142	@property({ reflect: true, attribute: 'label-position' })	24✔
143	public labelPosition: 'before' \| 'after' = 'after';	24✔
144		24✔
145	constructor() {	24✔
146	super();	73✔
147	this.addEventListener('keyup', this.handleKeyUp);	73✔
148		73✔
149	addKeybindings(this, {	73✔
150	skip: () => this.disabled,	73✔
151	bindingDefaults: { preventDefault: true, triggers: ['keydownRepeat'] },	73✔
152	})	73✔
153	.set(arrowLeft, () => this.navigate(isLTR(this) ? -1 : 1))	73✔
154	.set(arrowRight, () => this.navigate(isLTR(this) ? 1 : -1))	73✔
155	.set(arrowUp, () => this.navigate(-1))	73✔
156	.set(arrowDown, () => this.navigate(1));	73✔
157	}	73✔
158		24✔
159	public override connectedCallback() {	24✔
160	super.connectedCallback();	59✔
161		59✔
162	this._checked = this === this.group.checked[0];	59✔
163	this.updateValidity();	59✔
164	}	59✔
165		24✔
166	/** Simulates a click on the radio control. */	24✔
167	public override click() {	24✔
168	this.input.click();	4✔
169	}	4✔
170		24✔
171	/** Sets focus on the radio control. */	24✔
172	@alternateName('focusComponent')	24✔
173	public override focus(options?: FocusOptions) {	24✔
174	this.input.focus(options);	6✔
175	}	6✔
176		24✔
177	/** Removes focus from the radio control. */	24✔
178	@alternateName('blurComponent')	24✔
179	public override blur() {	24✔
180	this.input.blur();	1✔
181	}	1✔
182		24✔
183	/**	24✔
184	* Sets a custom validation message for the control.	24✔
185	* As long as `message` is not empty, the control is considered invalid.	24✔
186	*/	24✔
187	public override setCustomValidity(message: string): void {	24✔
188	const { radios } = this.group;	2✔
189		2✔
190	for (const radio of radios) {	2✔
191	radio.updateValidity(message);	6✔
192	radio.setInvalidState();	6✔
193	}	6✔
194	}	2✔
195		24✔
196	@watch('required', { waitUntilFirstUpdate: true })	24✔
197	protected override requiredChange(): void {	24✔
198	const { radios } = this.group;	6✔
199		6✔
200	for (const radio of radios) {	6✔
201	radio.updateValidity();	6✔
202	radio.setInvalidState();	6✔
203	}	6✔
204	}	6✔
205		24✔
206	private _updateCheckedState() {	24✔
207	const { siblings } = this.group;	17✔
208		17✔
209	this.setFormValue(this.value \|\| 'on');	17✔
210	this.updateValidity();	17✔
211	this.setInvalidState();	17✔
212		17✔
213	this._tabIndex = 0;	17✔
214	this.input?.focus();	17✔
215		17✔
216	for (const radio of siblings) {	17✔
217	radio.checked = false;	24✔
218	radio._tabIndex = -1;	24✔
219	radio.updateValidity();	24✔
220	radio.setInvalidState();	24✔
221	}	24✔
222	}	17✔
223		24✔
224	private _updateUncheckedState() {	24✔
225	const { siblings } = this.group;	30✔
226		30✔
227	this.setFormValue(null);	30✔
228	this.updateValidity();	30✔
229	this.setInvalidState();	30✔
230		30✔
231	if (this.hasUpdated) {	30✔
232	this._tabIndex = -1;	30✔
233	}	30✔
234		30✔
235	for (const radio of siblings) {	30✔
236	radio.updateValidity();	54✔
237	}	54✔
238	}	30✔
239		24✔
240	protected handleMouseDown(event: PointerEvent) {	24✔
UNCOV 241	event.preventDefault();	×
242	this.input.focus();	×
243	this.focused = false;	×
244	}	×
245		24✔
246	protected handleClick() {	24✔
247	this.checked = true;	4✔
248	this.emitEvent('igcChange', { detail: this.checked });	4✔
249	}	4✔
250		24✔
251	protected handleBlur() {	24✔
252	this.emitEvent('igcBlur');	18✔
253	this.focused = false;	18✔
254	}	18✔
255		24✔
256	protected handleFocus() {	24✔
257	this.emitEvent('igcFocus');	18✔
258	}	18✔
259		24✔
260	protected handleKeyUp() {	24✔
261	if (!this.focused) {	5✔
262	this.focused = true;	5✔
263	}	5✔
264	}	5✔
265		24✔
266	protected navigate(idx: number) {	24✔
267	const { active } = this.group;	5✔
268	const nextIdx = wrap(0, active.length - 1, active.indexOf(this) + idx);	5✔
269	const radio = active[nextIdx];	5✔
270		5✔
271	radio.focus();	5✔
272	radio.checked = true;	5✔
273	radio.emitEvent('igcChange', { detail: radio.checked });	5✔
274	}	5✔
275		24✔
276	protected handleSlotChange() {	24✔
277	this.hideLabel = this.label.length < 1;	54✔
278	}	54✔
279		24✔
280	protected override render() {	24✔
281	const labelledBy = this.getAttribute('aria-labelledby');	120✔
282		120✔
283	return html`	120✔
284	<label	120✔
285	part=${partNameMap({	120✔
286	base: true,	120✔
287	checked: this.checked,	120✔
288	focused: this.focused,	120✔
289	})}	120✔
290	for=${this.inputId}	120✔
291	@pointerdown=${this.handleMouseDown}	120✔
292	>	120✔
293	<input	120✔
294	id=${this.inputId}	120✔
295	type="radio"	120✔
296	name=${ifDefined(this.name)}	120✔
297	value=${ifDefined(this.value)}	120✔
298	.required=${this.required}	120✔
299	.disabled=${this.disabled}	120✔
300	.checked=${live(this.checked)}	120✔
301	tabindex=${this._tabIndex}	120✔
302	aria-checked=${this.checked ? 'true' : 'false'}	120✔
303	aria-disabled=${this.disabled ? 'true' : 'false'}	120✔
304	aria-labelledby=${labelledBy ? labelledBy : this.labelId}	120✔
305	@click=${this.handleClick}	120✔
306	@blur=${this.handleBlur}	120✔
307	@focus=${this.handleFocus}	120✔
308	/>	120✔
309	<span part=${partNameMap({ control: true, checked: this.checked })}>	120✔
310	<span	120✔
311	.hidden=${this.disabled}	120✔
312	part=${partNameMap({ ripple: true, checked: this.checked })}	120✔
313	></span>	120✔
314	</span>	120✔
315	<span	120✔
316	.hidden=${this.hideLabel}	120✔
317	part=${partNameMap({ label: true, checked: this.checked })}	120✔
318	id=${this.labelId}	120✔
319	>	120✔
320	<slot @slotchange=${this.handleSlotChange}></slot>	120✔
321	</span>	120✔
322	</label>	120✔
323	`;	120✔
324	}	120✔
325	}	24✔
326		24✔
327	declare global {	24✔
328	interface HTMLElementTagNameMap {	24✔
329	'igc-radio': IgcRadioComponent;	24✔
330	}	24✔
331	}	24✔

IgniteUI / igniteui-webcomponents / 8599218710

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