9659149517

Committed 25 Jun 2024 08:33AM UTC coverage: 97.842% (-0.007%) from 97.849%

Build # 9659149517

Build Type

Pull #1176

github

Committed by

web-flow

Commit Message

Merge 8c0a3b5c0 into 640670a35

Pull Request Pull Request #1176: deprecate(input): inputmode property

Run Details

3578 of 3798 branches covered (94.21%)

Branch coverage included in aggregate %.

18 of 20 new or added lines in 1 file covered. (90.0%)

3 existing lines in 1 file now uncovered.

22405 of 22758 relevant lines covered (98.45%)

423.5 hits per line

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

97.19

/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 { watch } from '../common/decorators/watch.js';
import { registerComponent } from '../common/definitions/register.js';
import { partNameMap } from '../common/util.js';
import {
  type Validator,
  emailValidator,
  maxLengthValidator,
  maxValidator,
  minLengthValidator,
  minValidator,
  patternValidator,
  requiredNumberValidator,
  requiredValidator,
  stepValidator,
  urlValidator,
} from '../common/validators.js';
import { IgcInputBaseComponent } from './input-base.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(IgcInputComponent);
  }

  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 = '';

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

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

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

  /**
   * The input mode attribute of the control.
   * @prop
   *
   * @deprecated since v4.9.0. Use `inputMode` property instead.
   */
  @property({ attribute: false })
  public set inputmode(value: string) {
    this.inputMode = value;
  }

  public get inputmode(): string {
    return this.inputMode;
  }

  /**
   * The input mode attribute of the control.
   * See [relevant MDN article](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)
   * @attr inputmode
   */
  @property({ attribute: 'inputmode' })
  public override inputMode!: string;

  /**
   * 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;

  /**
   * Enables validation rules to be evaluated without restricting user input. This applies to the `maxLength` property for
   * string-type inputs or allows spin buttons to exceed the predefined `min/max` limits for number-type inputs.
   *
   * @attr validate-only
   */
  @property({ type: Boolean, reflect: true, attribute: 'validate-only' })
  public validateOnly = false;

  /**
   * @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();
  }

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

IgniteUI / igniteui-webcomponents / 9659149517

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