9674196343

Committed 26 Jun 2024 05:41AM UTC coverage: 97.839% (-0.003%) from 97.842%

Build # 9674196343

Build Type

Pull #1198

github

Committed by

web-flow

Commit Message

Merge 9a347d8d1 into af394c16f

Pull Request Pull Request #1198: refactor: Removed blazor decorators

Run Details

3572 of 3792 branches covered (94.2%)

Branch coverage included in aggregate %.

63 of 63 new or added lines in 14 files covered. (100.0%)

10 existing lines in 2 files now uncovered.

22368 of 22721 relevant lines covered (98.45%)

424.07 hits per line

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

89.54

/src/components/form/form.ts

import { LitElement, css, html } from 'lit';
import { property } from 'lit/decorators.js';

import { registerComponent } from '../common/definitions/register.js';
import type { Constructor } from '../common/mixins/constructor.js';
import { EventEmitterMixin } from '../common/mixins/event-emitter.js';

export interface IgcFormEventMap {
  igcSubmit: CustomEvent<FormData>;
  igcReset: CustomEvent;
}

/**
 * The form is a component used to collect user input from
 * interactive controls.
 *
 * @element igc-form
 *
 * @slot - Default slot for the form.
 *
 * @fires igcSubmit - Emitted when the form is submitted.
 * @fires igcReset - Emitted when the form is reset.
 *
 * @deprecated since version 4.4.0. Use the native `<form>` element instead.
 */
export default class IgcFormComponent extends EventEmitterMixin<
  IgcFormEventMap,
  Constructor<LitElement>
>(LitElement) {
  public static readonly tagName = 'igc-form';

  public static styles = css`
    :host {
      display: block;
    }
  `;

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

  private _controlsWithChecked = [
    'input',
    'radio',
    'igc-radio',
    'igc-switch',
    'igc-checkbox',
  ];
  private _controlsWithValue = [
    'input',
    'igc-input',
    'igc-mask-input',
    'textarea',
    'igc-rating',
    'igc-select',
    'igc-combo',
    'igc-date-time-input',
  ];
  private _controlsThatSubmit = [
    'input',
    'button',
    'igc-button',
    'igc-icon-button',
  ];

  /** Specifies if form data validation should be skipped on submit. */
  @property({ type: Boolean, reflect: true }) public novalidate = false;

  constructor() {
    super();

    this.addEventListener('click', this.handleClick);
  }

  /* alternateName: performSubmit */
  /** Submits the form. */
  public submit(): boolean {
    const formData = this.getFormData();
    if (!this.novalidate && !this.reportValidity()) {
      return false;
    }

    this.emitEvent('igcSubmit', { detail: formData });
    return true;
  }

  /* alternateName: performReset */
  /** Resets the form. */
  public reset() {
    const formElements = this.getFormElements();
    formElements.forEach((element) => {
      const tagName = element.tagName.toLowerCase();
      if (tagName === 'select') {
        for (let i = 0; i < element.options.length; i++) {
          const option = element.options[i];
          option.selected = option.defaultSelected;
        }
      } else if (
        (tagName === 'input' &&
          (element.type === 'checkbox' || element.type === 'radio')) ||
        (tagName !== 'input' && this._controlsWithChecked.includes(tagName))
      ) {
        element.checked = element.hasAttribute('checked');
      } else if (
        tagName === 'igc-input' ||
        tagName === 'igc-rating' ||
        tagName === 'igc-mask-input' ||
        tagName === 'igc-date-time-input'
      ) {
        element.value = element.getAttribute('value');
      } else if (this._controlsWithValue.includes(tagName)) {
        element.value = element.defaultValue;
      }
    });

    this.emitEvent('igcReset');
  }

  private getFormElements(): any[] {
    const slot = this.shadowRoot?.querySelector('slot');
    const assignedElements = slot?.assignedElements({ flatten: true });
    const formElements: any[] = [];
    assignedElements?.forEach((element: any) => {
      if (!element.disabled) {
        formElements.push(element);
      }
      const children = Array.from(element.getElementsByTagName('*')).filter(
        (element: any) => !element.disabled
      );
      formElements.push(...children);
    });

    return formElements;
  }

  /* blazorSuppress */
  /** Retrieves the data from the form in the format of a FormData object. */
  public getFormData() {
    const formData = new FormData();

    const formElements = this.getFormElements();
    formElements.forEach((element) => {
      const tagName = element.tagName.toLowerCase();
      if (tagName === 'select') {
        for (let i = 0; i < element.options.length; i++) {
          const option = element.options[i];
          if (option.selected) {
            formData.append(element.name, option.value);
          }
        }
      } else if (
        this._controlsWithChecked.includes(tagName) &&
        element.checked
      ) {
        formData.append(element.name, element.value || 'on');
      } else if (
        this._controlsWithValue.includes(tagName) &&
        element.type !== 'checkbox' &&
        element.type !== 'radio' &&
        element.type !== 'submit'
      ) {
        formData.append(element.name, element.value);
      }
    });

    return formData;
  }

  /** Checks for validity of the form. */
  public reportValidity(): boolean {
    const formElements = this.getFormElements();
    return !formElements.some(
      (element) =>
        typeof element.reportValidity === 'function' &&
        element.reportValidity() === false
    );
  }

  private handleClick(event: MouseEvent) {
    const targetElement: any = event.target as HTMLElement;
    if (
      this._controlsThatSubmit.includes(targetElement.tagName.toLowerCase()) &&
      targetElement.type?.toLowerCase() === 'submit'
    ) {
      this.submit();
    } else if (targetElement.type?.toLowerCase() === 'reset') {
      this.reset();
    }

    return true;
  }

  protected override render() {
    return html`<slot></slot>`;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'igc-form': IgcFormComponent;
  }
}

1	import { LitElement, css, html } from 'lit';	21✔
2	import { property } from 'lit/decorators.js';	21✔
3		21✔
4	import { registerComponent } from '../common/definitions/register.js';	21✔
5	import type { Constructor } from '../common/mixins/constructor.js';	21✔
6	import { EventEmitterMixin } from '../common/mixins/event-emitter.js';	21✔
7		21✔
8	export interface IgcFormEventMap {	21✔
9	igcSubmit: CustomEvent<FormData>;	21✔
10	igcReset: CustomEvent;	21✔
11	}	21✔
12		21✔
13	/**	21✔
14	* The form is a component used to collect user input from	21✔
15	* interactive controls.	21✔
16	*	21✔
17	* @element igc-form	21✔
18	*	21✔
19	* @slot - Default slot for the form.	21✔
20	*	21✔
21	* @fires igcSubmit - Emitted when the form is submitted.	21✔
22	* @fires igcReset - Emitted when the form is reset.	21✔
23	*	21✔
24	* @deprecated since version 4.4.0. Use the native `<form>` element instead.	21✔
25	*/	21✔
26	export default class IgcFormComponent extends EventEmitterMixin<	21✔
27	IgcFormEventMap,	21✔
28	Constructor<LitElement>	21✔
29	>(LitElement) {	21✔
30	public static readonly tagName = 'igc-form';	21✔
31		21✔
32	public static styles = css`	21✔
33	:host {	21✔
34	display: block;	21✔
35	}	21✔
36	`;	21✔
37		21✔
38	/* blazorSuppress */	21✔
39	public static register() {	21✔
40	registerComponent(IgcFormComponent);	2✔
41	}	2✔
42		21✔
43	private _controlsWithChecked = [	21✔
44	'input',	21✔
45	'radio',	21✔
46	'igc-radio',	21✔
47	'igc-switch',	21✔
48	'igc-checkbox',	21✔
49	];	21✔
50	private _controlsWithValue = [	21✔
51	'input',	21✔
52	'igc-input',	21✔
53	'igc-mask-input',	21✔
54	'textarea',	21✔
55	'igc-rating',	21✔
56	'igc-select',	21✔
57	'igc-combo',	21✔
58	'igc-date-time-input',	21✔
59	];	21✔
60	private _controlsThatSubmit = [	21✔
61	'input',	21✔
62	'button',	21✔
63	'igc-button',	21✔
64	'igc-icon-button',	21✔
65	];	21✔
66		21✔
67	/** Specifies if form data validation should be skipped on submit. */	21✔
68	@property({ type: Boolean, reflect: true }) public novalidate = false;	21✔
69		21✔
70	constructor() {	21✔
71	super();	15✔
72		15✔
73	this.addEventListener('click', this.handleClick);	15✔
74	}	15✔
75		21✔
76	/* alternateName: performSubmit */	21✔
77	/** Submits the form. */	21✔
78	public submit(): boolean {	21✔
79	const formData = this.getFormData();	6✔
80	if (!this.novalidate && !this.reportValidity()) {	6✔
81	return false;	3✔
82	}	3✔
83		3✔
84	this.emitEvent('igcSubmit', { detail: formData });	3✔
85	return true;	3✔
86	}	3✔
87		21✔
88	/* alternateName: performReset */	21✔
89	/** Resets the form. */	21✔
90	public reset() {	21✔
91	const formElements = this.getFormElements();	2✔
92	formElements.forEach((element) => {	2✔
93	const tagName = element.tagName.toLowerCase();	8✔
94	if (tagName === 'select') {	8!
UNCOV 95	for (let i = 0; i < element.options.length; i++) {	×
UNCOV 96	const option = element.options[i];	×
97	option.selected = option.defaultSelected;	×
98	}	×
99	} else if (	8✔
100	(tagName === 'input' &&	8✔
101	(element.type === 'checkbox' \|\| element.type === 'radio')) \|\|	8✔
102	(tagName !== 'input' && this._controlsWithChecked.includes(tagName))	7✔
103	) {	8✔
104	element.checked = element.hasAttribute('checked');	2✔
105	} else if (	8✔
106	tagName === 'igc-input' \|\|	6✔
107	tagName === 'igc-rating' \|\|	6✔
108	tagName === 'igc-mask-input' \|\|	6✔
109	tagName === 'igc-date-time-input'	4✔
110	) {	6✔
111	element.value = element.getAttribute('value');	3✔
112	} else if (this._controlsWithValue.includes(tagName)) {	3✔
113	element.value = element.defaultValue;	2✔
114	}	2✔
115	});	2✔
116		2✔
117	this.emitEvent('igcReset');	2✔
118	}	2✔
119		21✔
120	private getFormElements(): any[] {	21✔
121	const slot = this.shadowRoot?.querySelector('slot');	16✔
122	const assignedElements = slot?.assignedElements({ flatten: true });	16✔
123	const formElements: any[] = [];	16✔
124	assignedElements?.forEach((element: any) => {	16✔
125	if (!element.disabled) {	57✔
126	formElements.push(element);	57✔
127	}	57✔
128	const children = Array.from(element.getElementsByTagName('*')).filter(	57✔
129	(element: any) => !element.disabled	57✔
130	);	57✔
131	formElements.push(...children);	57✔
132	});	16✔
133		16✔
134	return formElements;	16✔
135	}	16✔
136		21✔
137	/* blazorSuppress */	21✔
138	/** Retrieves the data from the form in the format of a FormData object. */	21✔
139	public getFormData() {	21✔
140	const formData = new FormData();	9✔
141		9✔
142	const formElements = this.getFormElements();	9✔
143	formElements.forEach((element) => {	9✔
144	const tagName = element.tagName.toLowerCase();	37✔
145	if (tagName === 'select') {	37!
UNCOV 146	for (let i = 0; i < element.options.length; i++) {	×
UNCOV 147	const option = element.options[i];	×
UNCOV 148	if (option.selected) {	×
149	formData.append(element.name, option.value);	×
150	}	×
151	}	×
152	} else if (	37✔
153	this._controlsWithChecked.includes(tagName) &&	37✔
154	element.checked	14✔
155	) {	37✔
156	formData.append(element.name, element.value \|\| 'on');	2!
157	} else if (	37✔
158	this._controlsWithValue.includes(tagName) &&	35✔
159	element.type !== 'checkbox' &&	35✔
160	element.type !== 'radio' &&	35✔
161	element.type !== 'submit'	25✔
162	) {	35✔
163	formData.append(element.name, element.value);	25✔
164	}	25✔
165	});	9✔
166		9✔
167	return formData;	9✔
168	}	9✔
169		21✔
170	/** Checks for validity of the form. */	21✔
171	public reportValidity(): boolean {	21✔
172	const formElements = this.getFormElements();	5✔
173	return !formElements.some(	5✔
174	(element) =>	5✔
175	typeof element.reportValidity === 'function' &&	12✔
176	element.reportValidity() === false	11✔
177	);	5✔
178	}	5✔
179		21✔
180	private handleClick(event: MouseEvent) {	21✔
UNCOV 181	const targetElement: any = event.target as HTMLElement;	×
UNCOV 182	if (	×
UNCOV 183	this._controlsThatSubmit.includes(targetElement.tagName.toLowerCase()) &&	×
184	targetElement.type?.toLowerCase() === 'submit'	×
185	) {	×
186	this.submit();	×
187	} else if (targetElement.type?.toLowerCase() === 'reset') {	×
188	this.reset();	×
189	}	×
190		×
191	return true;	×
192	}	×
193		21✔
194	protected override render() {	21✔
195	return html`<slot></slot>`;	15✔
196	}	15✔
197	}	21✔
198		21✔
199	declare global {	21✔
200	interface HTMLElementTagNameMap {	21✔
201	'igc-form': IgcFormComponent;	21✔
202	}	21✔
203	}	21✔

IgniteUI / igniteui-webcomponents / 9674196343

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