8277311192

Committed 14 Mar 2024 08:03AM UTC coverage: 97.599%. Remained the same

Build # 8277311192

Build Type

push

github

Committed by

web-flow

Commit Message

chore: CS suppress case-only renamed deprecated props (#1101)

* chore: CS suppress case-only renamed deprecated props
* docs: reformat deprecated notes for consistency
* chore(dropdown): suppress the targeted toggle/show overrides for analyzer
* chore(date-time-input): reorder deprecated accessors

Run Details

3286 of 3499 branches covered (93.91%)

Branch coverage included in aggregate %.

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

3 existing lines in 2 files now uncovered.

20615 of 20990 relevant lines covered (98.21%)

430.4 hits per line

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

97.79

/src/components/input/input.ts

import { html } from 'lit';
import { property } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { live } from 'lit/directives/live.js';

import { IgcInputBaseComponent } from './input-base.js';
import { alternateName } from '../common/decorators/alternateName.js';
import { blazorSuppress } from '../common/decorators/blazorSuppress.js';
import { blazorTwoWayBind } from '../common/decorators/blazorTwoWayBind.js';
import { watch } from '../common/decorators/watch.js';
import { registerComponent } from '../common/definitions/register.js';
import { partNameMap } from '../common/util.js';
import {
  Validator,
  emailValidator,
  maxLengthValidator,
  maxValidator,
  minLengthValidator,
  minValidator,
  patternValidator,
  requiredNumberValidator,
  requiredValidator,
  stepValidator,
  urlValidator,
} from '../common/validators.js';

/**
 * @element igc-input
 *
 * @slot prefix - Renders content before the input.
 * @slot suffix - Renders content after input.
 * @slot helper-text - Renders content below the input.
 *
 * @fires igcInput - Emitted when the control input receives user input.
 * @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 container - The main wrapper that holds all main input elements.
 * @csspart input - The native input element.
 * @csspart label - The native label element.
 * @csspart prefix - The prefix wrapper.
 * @csspart suffix - The suffix wrapper.
 * @csspart helper-text - The helper text wrapper.
 */
export default class IgcInputComponent extends IgcInputBaseComponent {
  public static readonly tagName = 'igc-input';

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

  private get isStringType() {
    return this.type !== 'number';
  }

  protected override validators: Validator<this>[] = [
    {
      ...requiredValidator,
      isValid: () =>
        this.isStringType
          ? requiredValidator.isValid(this)
          : requiredNumberValidator.isValid(this),
    },
    {
      ...minLengthValidator,
      isValid: () =>
        this.isStringType ? minLengthValidator.isValid(this) : true,
    },
    {
      ...maxLengthValidator,
      isValid: () =>
        this.isStringType ? maxLengthValidator.isValid(this) : true,
    },
    {
      ...minValidator,
      isValid: () => (this.isStringType ? true : minValidator.isValid(this)),
    },
    {
      ...maxValidator,
      isValid: () => (this.isStringType ? true : maxValidator.isValid(this)),
    },
    {
      ...stepValidator,
      isValid: () => (this.isStringType ? true : stepValidator.isValid(this)),
    },
    {
      ...patternValidator,
      isValid: () =>
        this.isStringType ? patternValidator.isValid(this) : true,
    },
    {
      key: 'typeMismatch',
      isValid: () => {
        switch (this.type) {
          case 'email':
            return emailValidator.isValid(this);
          case 'url':
            return urlValidator.isValid(this);
          default:
            return true;
        }
      },
      message: () =>
        (this.type === 'email'
          ? emailValidator.message
          : urlValidator.message) as string,
    },
  ];

  protected _value = '';

  /**
   * The value of the control.
   * @attr
   */
  @property()
  @blazorTwoWayBind('igcChange', 'detail')
  public set value(value: string) {
    this._value = value;
    this.setFormValue(value ? value : null);
    this.updateValidity();
    this.setInvalidState();
  }

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

  /**
   * The type attribute of the control.
   * @attr
   */
  @alternateName('displayType')
  @property({ reflect: true })
  public type:
    | 'email'
    | 'number'
    | 'password'
    | 'search'
    | 'tel'
    | 'text'
    | 'url' = 'text';

  // TODO: Deprecate
  /**
   * The input mode attribute of the control.
   * @attr
   */
  @property()
  public inputmode!:
    | 'none'
    | 'txt'
    | 'decimal'
    | 'numeric'
    | 'tel'
    | 'search'
    | 'email'
    | 'url';

  /**
   * The pattern attribute of the control.
   * @attr
   */
  @property()
  public pattern!: string;

  /**
   * The minimum string length required by the control.
   * @attr minlength
   */
  @property({ type: Number, attribute: 'minlength' })
  public minLength!: number;

  /* blazorCSSuppress */
  /**
   * The minlength attribute of the control.
   * @prop
   *
   * @deprecated since v4.4.0. Use the `minLength` property instead.
   */
  @property({ attribute: false })
  public set minlength(value: number) {
    this.minLength = value;
  }

  public get minlength() {
    return this.minLength;
  }

  /**
   * The maximum string length of the control.
   * @attr maxlength
   */
  @property({ type: Number, attribute: 'maxlength' })
  public maxLength!: number;

  /* blazorCSSuppress */
  /**
   * The maxlength attribute of the control.
   * @prop
   *
   * @deprecated since v4.4.0. Use the `maxLength` property instead.
   */
  @property({ attribute: false })
  public set maxlength(value: number) {
    this.maxLength = value;
  }

  public get maxlength() {
    return this.maxLength;
  }

  /**
   * The min attribute of the control.
   * @attr
   */
  @property()
  public min!: number | string;

  /**
   * The max attribute of the control.
   * @attr
   */
  @property()
  public max!: number | string;

  /**
   * The step attribute of the control.
   * @attr
   */
  @property({ type: Number })
  public step!: number;

  /**
   * The autofocus attribute of the control.
   * @attr
   */
  @property({ type: Boolean })
  public override autofocus!: boolean;

  /**
   * The autocomplete attribute of the control.
   * @attr
   */
  @property()
  public autocomplete!: string;

  /**
   * @internal
   */
  @property({ type: Number })
  public override tabIndex = 0;

  @watch('min', { waitUntilFirstUpdate: true })
  @watch('max', { waitUntilFirstUpdate: true })
  @watch('minLength', { waitUntilFirstUpdate: true })
  @watch('maxLength', { waitUntilFirstUpdate: true })
  @watch('pattern', { waitUntilFirstUpdate: true })
  @watch('step', { waitUntilFirstUpdate: true })
  protected constraintsChanged() {
    this.updateValidity();
  }

  /** @hidden */
  public override connectedCallback() {
    super.connectedCallback();
    this.setFormValue(this._value ? this._value : null);
    this.updateValidity();
  }

  /** Replaces the selected text in the input. */
  @blazorSuppress()
  public override setRangeText(
    replacement: string,
    start: number,
    end: number,
    selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'
  ) {
    super.setRangeText(replacement, start, end, selectMode);
    this.value = this.input.value;
  }

  /** Selects all text within the input. */
  public select() {
    return this.input.select();
  }

  /** Increments the numeric value of the input by one or more steps. */
  public stepUp(n?: number) {
    this.input.stepUp(n);
    this.value = this.input.value;
  }

  /** Decrements the numeric value of the input by one or more steps. */
  public stepDown(n?: number) {
    this.input.stepDown(n);
    this.value = this.input.value;
  }

  private handleInput() {
    this.value = this.input.value;
    this.emitEvent('igcInput', { detail: this.value });
  }

  private handleChange() {
    this.value = this.input.value;
    this.emitEvent('igcChange', { detail: this.value });
  }

  protected override handleFocus(): void {
    this._dirty = true;
    super.handleFocus();
  }

  protected override handleBlur(): void {
    this.checkValidity();
    super.handleBlur();
  }

  protected renderInput() {
    return html`
      <input
        id=${this.inputId}
        part=${partNameMap(this.resolvePartNames('input'))}
        name=${ifDefined(this.name)}
        type=${ifDefined(this.type)}
        pattern=${ifDefined(this.pattern)}
        placeholder=${ifDefined(this.placeholder)}
        .value=${live(this.value)}
        ?readonly=${this.readOnly}
        ?disabled=${this.disabled}
        ?required=${this.required}
        ?autofocus=${this.autofocus}
        tabindex=${this.tabIndex}
        autocomplete=${ifDefined(this.autocomplete as any)}
        inputmode=${ifDefined(this.inputmode)}
        min=${ifDefined(this.min)}
        max=${ifDefined(this.max)}
        minlength=${ifDefined(this.minLength)}
        maxlength=${ifDefined(this.maxLength)}
        step=${ifDefined(this.step)}
        aria-invalid=${this.invalid ? 'true' : 'false'}
        @change=${this.handleChange}
        @input=${this.handleInput}
        @focus=${this.handleFocus}
        @blur=${this.handleBlur}
      />
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'igc-input': IgcInputComponent;
  }
}

1	import { html } from 'lit';	27✔
2	import { property } from 'lit/decorators.js';	27✔
3	import { ifDefined } from 'lit/directives/if-defined.js';	27✔
4	import { live } from 'lit/directives/live.js';	27✔
5		27✔
6	import { IgcInputBaseComponent } from './input-base.js';	27✔
7	import { alternateName } from '../common/decorators/alternateName.js';	27✔
8	import { blazorSuppress } from '../common/decorators/blazorSuppress.js';	27✔
9	import { blazorTwoWayBind } from '../common/decorators/blazorTwoWayBind.js';	27✔
10	import { watch } from '../common/decorators/watch.js';	27✔
11	import { registerComponent } from '../common/definitions/register.js';	27✔
12	import { partNameMap } from '../common/util.js';	27✔
13	import {	27✔
14	Validator,	27✔
15	emailValidator,	27✔
16	maxLengthValidator,	27✔
17	maxValidator,	27✔
18	minLengthValidator,	27✔
19	minValidator,	27✔
20	patternValidator,	27✔
21	requiredNumberValidator,	27✔
22	requiredValidator,	27✔
23	stepValidator,	27✔
24	urlValidator,	27✔
25	} from '../common/validators.js';	27✔
26		27✔
27	/**	27✔
28	* @element igc-input	27✔
29	*	27✔
30	* @slot prefix - Renders content before the input.	27✔
31	* @slot suffix - Renders content after input.	27✔
32	* @slot helper-text - Renders content below the input.	27✔
33	*	27✔
34	* @fires igcInput - Emitted when the control input receives user input.	27✔
35	* @fires igcChange - Emitted when the control's checked state changes.	27✔
36	* @fires igcFocus - Emitted when the control gains focus.	27✔
37	* @fires igcBlur - Emitted when the control loses focus.	27✔
38	*	27✔
39	* @csspart container - The main wrapper that holds all main input elements.	27✔
40	* @csspart input - The native input element.	27✔
41	* @csspart label - The native label element.	27✔
42	* @csspart prefix - The prefix wrapper.	27✔
43	* @csspart suffix - The suffix wrapper.	27✔
44	* @csspart helper-text - The helper text wrapper.	27✔
45	*/	27✔
46	export default class IgcInputComponent extends IgcInputBaseComponent {	255✔
47	public static readonly tagName = 'igc-input';	255✔
48		255✔
49	/* blazorSuppress */	255✔
50	public static register() {	255✔
51	registerComponent(this);	6✔
52	}	6✔
53		255✔
54	private get isStringType() {	255✔
55	return this.type !== 'number';	3,297✔
56	}	3,297✔
57		255✔
58	protected override validators: Validator<this>[] = [	255✔
59	{	255✔
60	...requiredValidator,	255✔
61	isValid: () =>	255✔
62	this.isStringType	471✔
63	? requiredValidator.isValid(this)	471✔
64	: requiredNumberValidator.isValid(this),	255✔
65	},	255✔
66	{	255✔
67	...minLengthValidator,	255✔
68	isValid: () =>	255✔
69	this.isStringType ? minLengthValidator.isValid(this) : true,	255✔
70	},	255✔
71	{	255✔
72	...maxLengthValidator,	255✔
73	isValid: () =>	255✔
74	this.isStringType ? maxLengthValidator.isValid(this) : true,	255✔
75	},	255✔
76	{	255✔
77	...minValidator,	255✔
78	isValid: () => (this.isStringType ? true : minValidator.isValid(this)),	255✔
79	},	255✔
80	{	255✔
81	...maxValidator,	255✔
82	isValid: () => (this.isStringType ? true : maxValidator.isValid(this)),	255✔
83	},	255✔
84	{	255✔
85	...stepValidator,	255✔
86	isValid: () => (this.isStringType ? true : stepValidator.isValid(this)),	255✔
87	},	255✔
88	{	255✔
89	...patternValidator,	255✔
90	isValid: () =>	255✔
91	this.isStringType ? patternValidator.isValid(this) : true,	255✔
92	},	255✔
93	{	255✔
94	key: 'typeMismatch',	255✔
95	isValid: () => {	255✔
96	switch (this.type) {	471✔
97	case 'email':	471✔
98	return emailValidator.isValid(this);	8✔
99	case 'url':	471!
100	return urlValidator.isValid(this);	×
101	default:	471✔
102	return true;	463✔
103	}	471✔
104	},	255✔
105	message: () =>	255✔
106	(this.type === 'email'	6✔
107	? emailValidator.message	6✔
108	: urlValidator.message) as string,	255✔
109	},	255✔
110	];	255✔
111		255✔
112	protected _value = '';	255✔
113		255✔
114	/**	255✔
115	* The value of the control.	255✔
116	* @attr	255✔
117	*/	255✔
118	@property()	255✔
119	@blazorTwoWayBind('igcChange', 'detail')	255✔
120	public set value(value: string) {	255✔
121	this._value = value;	193✔
122	this.setFormValue(value ? value : null);	193✔
123	this.updateValidity();	193✔
124	this.setInvalidState();	193✔
125	}	193✔
126		255✔
127	public get value() {	255✔
128	return this._value;	4,687✔
129	}	4,687✔
130		255✔
131	/**	255✔
132	* The type attribute of the control.	255✔
133	* @attr	255✔
134	*/	255✔
135	@alternateName('displayType')	255✔
136	@property({ reflect: true })	255✔
137	public type:	255✔
138	\| 'email'	255✔
139	\| 'number'	255✔
140	\| 'password'	255✔
141	\| 'search'	255✔
142	\| 'tel'	255✔
143	\| 'text'	255✔
144	\| 'url' = 'text';	255✔
145		255✔
146	// TODO: Deprecate	255✔
147	/**	255✔
148	* The input mode attribute of the control.	255✔
149	* @attr	255✔
150	*/	255✔
151	@property()	255✔
152	public inputmode!:	255✔
153	\| 'none'	255✔
154	\| 'txt'	255✔
155	\| 'decimal'	255✔
156	\| 'numeric'	255✔
157	\| 'tel'	255✔
158	\| 'search'	255✔
159	\| 'email'	255✔
160	\| 'url';	255✔
161		255✔
162	/**	255✔
163	* The pattern attribute of the control.	255✔
164	* @attr	255✔
165	*/	255✔
166	@property()	255✔
167	public pattern!: string;	255✔
168		255✔
169	/**	255✔
170	* The minimum string length required by the control.	255✔
171	* @attr minlength	255✔
172	*/	255✔
173	@property({ type: Number, attribute: 'minlength' })	255✔
174	public minLength!: number;	255✔
175		255✔
176	/* blazorCSSuppress */	255✔
177	/**	255✔
178	* The minlength attribute of the control.	255✔
179	* @prop	255✔
180	*	255✔
181	* @deprecated since v4.4.0. Use the `minLength` property instead.	255✔
182	*/	255✔
183	@property({ attribute: false })	255✔
184	public set minlength(value: number) {	255✔
UNCOV 185	this.minLength = value;	×
186	}	×
187		255✔
188	public get minlength() {	255✔
189	return this.minLength;	255✔
190	}	255✔
191		255✔
192	/**	255✔
193	* The maximum string length of the control.	255✔
194	* @attr maxlength	255✔
195	*/	255✔
196	@property({ type: Number, attribute: 'maxlength' })	255✔
197	public maxLength!: number;	255✔
198		255✔
199	/* blazorCSSuppress */	255✔
200	/**	255✔
201	* The maxlength attribute of the control.	255✔
202	* @prop	255✔
203	*	255✔
204	* @deprecated since v4.4.0. Use the `maxLength` property instead.	255✔
205	*/	255✔
206	@property({ attribute: false })	255✔
207	public set maxlength(value: number) {	255✔
UNCOV 208	this.maxLength = value;	×
209	}	×
210		255✔
211	public get maxlength() {	255✔
212	return this.maxLength;	255✔
213	}	255✔
214		255✔
215	/**	255✔
216	* The min attribute of the control.	255✔
217	* @attr	255✔
218	*/	255✔
219	@property()	255✔
220	public min!: number \| string;	255✔
221		255✔
222	/**	255✔
223	* The max attribute of the control.	255✔
224	* @attr	255✔
225	*/	255✔
226	@property()	255✔
227	public max!: number \| string;	255✔
228		255✔
229	/**	255✔
230	* The step attribute of the control.	255✔
231	* @attr	255✔
232	*/	255✔
233	@property({ type: Number })	255✔
234	public step!: number;	255✔
235		255✔
236	/**	255✔
237	* The autofocus attribute of the control.	255✔
238	* @attr	255✔
239	*/	255✔
240	@property({ type: Boolean })	255✔
241	public override autofocus!: boolean;	255✔
242		255✔
243	/**	255✔
244	* The autocomplete attribute of the control.	255✔
245	* @attr	255✔
246	*/	255✔
247	@property()	255✔
248	public autocomplete!: string;	255✔
249		255✔
250	/**	255✔
251	* @internal	255✔
252	*/	255✔
253	@property({ type: Number })	255✔
254	public override tabIndex = 0;	255✔
255		255✔
256	@watch('min', { waitUntilFirstUpdate: true })	255✔
257	@watch('max', { waitUntilFirstUpdate: true })	255✔
258	@watch('minLength', { waitUntilFirstUpdate: true })	255✔
259	@watch('maxLength', { waitUntilFirstUpdate: true })	255✔
260	@watch('pattern', { waitUntilFirstUpdate: true })	255✔
261	@watch('step', { waitUntilFirstUpdate: true })	255✔
262	protected constraintsChanged() {	255✔
263	this.updateValidity();	12✔
264	}	12✔
265		255✔
266	/** @hidden */	255✔
267	public override connectedCallback() {	255✔
268	super.connectedCallback();	255✔
269	this.setFormValue(this._value ? this._value : null);	255✔
270	this.updateValidity();	255✔
271	}	255✔
272		255✔
273	/** Replaces the selected text in the input. */	255✔
274	@blazorSuppress()	255✔
275	public override setRangeText(	255✔
276	replacement: string,	1✔
277	start: number,	1✔
278	end: number,	1✔
279	selectMode: 'select' \| 'start' \| 'end' \| 'preserve' = 'preserve'	1✔
280	) {	1✔
281	super.setRangeText(replacement, start, end, selectMode);	1✔
282	this.value = this.input.value;	1✔
283	}	1✔
284		255✔
285	/** Selects all text within the input. */	255✔
286	public select() {	255✔
287	return this.input.select();	6✔
288	}	6✔
289		255✔
290	/** Increments the numeric value of the input by one or more steps. */	255✔
291	public stepUp(n?: number) {	255✔
292	this.input.stepUp(n);	2✔
293	this.value = this.input.value;	2✔
294	}	2✔
295		255✔
296	/** Decrements the numeric value of the input by one or more steps. */	255✔
297	public stepDown(n?: number) {	255✔
298	this.input.stepDown(n);	2✔
299	this.value = this.input.value;	2✔
300	}	2✔
301		255✔
302	private handleInput() {	255✔
303	this.value = this.input.value;	4✔
304	this.emitEvent('igcInput', { detail: this.value });	4✔
305	}	4✔
306		255✔
307	private handleChange() {	255✔
308	this.value = this.input.value;	×
309	this.emitEvent('igcChange', { detail: this.value });	×
310	}	×
311		255✔
312	protected override handleFocus(): void {	255✔
313	this._dirty = true;	38✔
314	super.handleFocus();	38✔
315	}	38✔
316		255✔
317	protected override handleBlur(): void {	255✔
318	this.checkValidity();	38✔
319	super.handleBlur();	38✔
320	}	38✔
321		255✔
322	protected renderInput() {	255✔
323	return html`	548✔
324	<input	548✔
325	id=${this.inputId}	548✔
326	part=${partNameMap(this.resolvePartNames('input'))}	548✔
327	name=${ifDefined(this.name)}	548✔
328	type=${ifDefined(this.type)}	548✔
329	pattern=${ifDefined(this.pattern)}	548✔
330	placeholder=${ifDefined(this.placeholder)}	548✔
331	.value=${live(this.value)}	548✔
332	?readonly=${this.readOnly}	548✔
333	?disabled=${this.disabled}	548✔
334	?required=${this.required}	548✔
335	?autofocus=${this.autofocus}	548✔
336	tabindex=${this.tabIndex}	548✔
337	autocomplete=${ifDefined(this.autocomplete as any)}	548✔
338	inputmode=${ifDefined(this.inputmode)}	548✔
339	min=${ifDefined(this.min)}	548✔
340	max=${ifDefined(this.max)}	548✔
341	minlength=${ifDefined(this.minLength)}	548✔
342	maxlength=${ifDefined(this.maxLength)}	548✔
343	step=${ifDefined(this.step)}	548✔
344	aria-invalid=${this.invalid ? 'true' : 'false'}	548✔
345	@change=${this.handleChange}	548✔
346	@input=${this.handleInput}	548✔
347	@focus=${this.handleFocus}	548✔
348	@blur=${this.handleBlur}	548✔
349	/>	548✔
350	`;	548✔
351	}	548✔
352	}	255✔
353		27✔
354	declare global {	27✔
355	interface HTMLElementTagNameMap {	27✔
356	'igc-input': IgcInputComponent;	27✔
357	}	27✔
358	}	27✔

IgniteUI / igniteui-webcomponents / 8277311192

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