10578472235

Committed 27 Aug 2024 12:50PM UTC coverage: 98.206% (+0.2%) from 97.986%

Build # 10578472235

Build Type

Pull #1254

github

Committed by

web-flow

Commit Message

Merge 5ec7ba127 into 556bad3c1

Pull Request Pull Request #1254: feat: Render validation messages for Form associated custom elements

Run Details

3605 of 3803 branches covered (94.79%)

Branch coverage included in aggregate %.

410 of 414 new or added lines in 15 files covered. (99.03%)

12 existing lines in 2 files now uncovered.

22781 of 23065 relevant lines covered (98.77%)

475.52 hits per line

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

97.25

/src/components/textarea/textarea.ts

import { LitElement, type TemplateResult, html, nothing } from 'lit';
import {
  property,
  query,
  queryAssignedElements,
  queryAssignedNodes,
} from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { live } from 'lit/directives/live.js';
import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';

import { getThemeController, themes } from '../../theming/theming-decorator.js';
import { watch } from '../common/decorators/watch.js';
import { registerComponent } from '../common/definitions/register.js';
import type { Constructor } from '../common/mixins/constructor.js';
import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
import { FormAssociatedRequiredMixin } from '../common/mixins/form-associated-required.js';
import { asNumber, createCounter, partNameMap } from '../common/util.js';
import type { RangeTextSelectMode, SelectionRangeDirection } from '../types.js';
import IgcValidationContainerComponent from '../validation-container/validation-container.js';
import { styles as shared } from './themes/shared/textarea.common.css.js';
import { styles } from './themes/textarea.base.css.js';
import { all } from './themes/themes.js';
import { textAreaValidators } from './validators.js';

export interface IgcTextareaEventMap {
  igcInput: CustomEvent<string>;
  igcChange: CustomEvent<string>;
  // For analyzer meta only:
  /* skipWCPrefix */
  focus: FocusEvent;
  /* skipWCPrefix */
  blur: FocusEvent;
}

/**
 * This element represents a multi-line plain-text editing control,
 * useful when you want to allow users to enter a sizeable amount of free-form text,
 * for example a comment on a review or feedback form.
 *
 * @element igc-textarea
 *
 * @slot - Text content from the default slot will be used as the value of the component.
 * @slot prefix - Renders content before the input.
 * @slot suffix - Renders content after input.
 * @slot helper-text - Renders content below the input.
 * @slot value-missing - Renders content when the required validation fails.
 * @slot too-long - Renders content when the maxlength validation fails.
 * @slot too-short - Renders content when the minlength validation fails.
 * @slot custom-error - Renders content when setCustomValidity(message) is set.
 * @slot invalid - Renders content when the component is in invalid state (validity.valid = false).
 *
 * @fires igcInput - Emitted when the control receives user input.
 * @fires igcChange - Emitted when the a change to the control value is committed by the user.
 *
 * @csspart container - The main wrapper that holds all main input elements of the textarea.
 * @csspart input - The native input element of the igc-textarea.
 * @csspart label - The native label element of the igc-textarea.
 * @csspart prefix - The prefix wrapper of the igc-textarea.
 * @csspart suffix - The suffix wrapper of the igc-textarea.
 * @csspart helper-text - The helper text wrapper of the igc-textarea.
 */
@themes(all, { exposeController: true })
export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
  EventEmitterMixin<IgcTextareaEventMap, Constructor<LitElement>>(LitElement)
) {
  public static readonly tagName = 'igc-textarea';
  public static styles = [styles, shared];

  /* blazorSuppress */
  public static register() {
    registerComponent(IgcTextareaComponent, IgcValidationContainerComponent);
  }

  protected override get __validators() {
    return textAreaValidators;
  }

  private static readonly increment = createCounter();
  protected inputId = `textarea-${IgcTextareaComponent.increment()}`;

  protected static shadowRootOptions = {
    ...LitElement.shadowRootOptions,
    delegatesFocus: true,
  };

  private _value = '';
  private observer!: ResizeObserver;

  @queryAssignedNodes({ flatten: true })
  private projected!: Array<Node>;

  @queryAssignedElements({ slot: 'prefix' })
  protected prefixes!: Array<HTMLElement>;

  @queryAssignedElements({ slot: 'suffix' })
  protected suffixes!: Array<HTMLElement>;

  @query('textarea', true)
  private input!: HTMLTextAreaElement;

  private get resizeStyles(): StyleInfo {
    return {
      resize: this.resize === 'auto' ? 'none' : this.resize,
    };
  }

  protected get _isMaterial() {
    return getThemeController(this)?.theme === 'material';
  }

  /**
   * Specifies what if any permission the browser has to provide for automated assistance in filling out form field values,
   * as well as guidance to the browser as to the type of information expected in the field.
   * Refer to [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for additional information.
   *
   * @attr
   */
  @property()
  public autocomplete!: string;

  /**
   * Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
   *
   * [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize).
   *
   * @attr
   */
  @property()
  public override autocapitalize!:
    | 'off'
    | 'none'
    | 'on'
    | 'sentences'
    | 'words'
    | 'characters';

  /**
   * Hints at the type of data that might be entered by the user while editing the element or its contents.
   * This allows a browser to display an appropriate virtual keyboard.
   *
   * [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)
   *
   * @attr inputmode
   */
  @property({ attribute: 'inputmode' })
  public override inputMode!:
    | 'none'
    | 'text'
    | 'decimal'
    | 'numeric'
    | 'tel'
    | 'search'
    | 'email'
    | 'url';

  /**
   * The label for the control.
   *
   * @attr
   */
  @property()
  public label!: string;

  /**
   * The maximum number of characters (UTF-16 code units) that the user can enter.
   * If this value isn't specified, the user can enter an unlimited number of characters.
   *
   * @attr maxlength
   */
  @property({ type: Number, attribute: 'maxlength' })
  public maxLength!: number;

  /**
   * The minimum number of characters (UTF-16 code units) required that the user should enter.
   *
   * @attr minlength
   */
  @property({ type: Number, attribute: 'minlength' })
  public minLength!: number;

  /**
   * Whether the control will have outlined appearance.
   * @attr
   */
  @property({ reflect: true, type: Boolean })
  public outlined = false;

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

  /**
   * Makes the control a readonly field.
   *
   * @attr readonly
   */
  @property({ type: Boolean, reflect: true, attribute: 'readonly' })
  public readOnly = false;

  /**
   * Controls whether the control can be resized.
   * When `auto` is set, the control will try to expand and fit its content.
   *
   * @attr
   */
  @property()
  public resize: 'auto' | 'vertical' | 'none' = 'vertical';

  /**
   * The number of visible text lines for the control. If it is specified, it must be a positive integer.
   * If it is not specified, the default value is 2.
   *
   * @attr
   */
  @property({ type: Number })
  public rows = 2;

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

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

  /**
   * Controls whether the element may be checked for spelling errors.
   *
   * @attr
   */
  @property({
    type: Boolean,
    converter: {
      fromAttribute: (value) => !(!value || value === 'false'),
      toAttribute: (value) => (value ? 'true' : 'false'),
    },
  })
  public override spellcheck = true;

  /**
   * Indicates how the control should wrap the value for form submission.
   * Refer to [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes)
   * for explanation of the available values.
   *
   * @attr
   */
  @property()
  public wrap: 'hard' | 'soft' | 'off' = 'soft';

  /**
   * Enables validation rules to be evaluated without restricting user input. This applies to the `maxLength` property
   * when it is defined.
   *
   * @attr validate-only
   */
  @property({ type: Boolean, reflect: true, attribute: 'validate-only' })
  public validateOnly = false;

  constructor() {
    super();
    this.addEventListener('focus', () => {
      this._dirty = true;
    });
    this.addEventListener('blur', () => {
      this.updateValidity();
      this.setInvalidState();
    });
  }

  public override async connectedCallback() {
    super.connectedCallback();
    this.updateValidity();

    await this.updateComplete;

    this.setAreaHeight();
    this.observer = new ResizeObserver(() => this.setAreaHeight());
    this.observer.observe(this.input);
  }

  public override disconnectedCallback(): void {
    this.observer.disconnect();
    super.disconnectedCallback();
  }

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

  /** Sets the text selection range of the control */
  public setSelectionRange(
    start: number,
    end: number,
    direction: SelectionRangeDirection = 'none'
  ) {
    this.input.setSelectionRange(start, end, direction);
  }

  /** Replaces the selected text in the control. */
  public setRangeText(
    replacement: string,
    start: number,
    end: number,
    selectMode: RangeTextSelectMode = 'preserve'
  ) {
    this.input.setRangeText(replacement, start, end, selectMode);
    this.value = this.input.value;
  }

  /* blazorSuppress */
  public override scrollTo(options?: ScrollToOptions | undefined): void;
  /* blazorSuppress */
  public override scrollTo(x: number, y: number): void;
  public override scrollTo(x?: unknown, y?: unknown): void {
    x !== undefined && y !== undefined
      ? this.input.scrollTo(x as number, y as number)
      : this.input.scrollTo(x as ScrollToOptions);
  }

  protected resolvePartNames(base: string) {
    return {
      [base]: true,
      prefixed: this.prefixes.length > 0,
      suffixed: this.suffixes.length > 0,
      filled: !!this.value,
    };
  }

  protected override async firstUpdated() {
    await this.updateComplete;
    this._defaultValue = this.value;
  }

  @watch('value')
  protected async valueChanged() {
    await this.updateComplete;
    this.setAreaHeight();
  }

  @watch('rows', { waitUntilFirstUpdate: true })
  @watch('resize', { waitUntilFirstUpdate: true })
  protected setAreaHeight() {
    if (this.resize === 'auto') {
      this.input.style.height = 'auto';
      this.input.style.height = `${this.setAutoHeight()}px`;
    } else {
      Object.assign(this.input.style, { height: undefined });
    }
  }

  private setAutoHeight() {
    const computed = getComputedStyle(this.input);
    const [top, bottom] = [
      asNumber(computed.getPropertyValue('border-top-width')),
      asNumber(computed.getPropertyValue('border-bottom-width')),
    ];
    return this.input.scrollHeight + top + bottom;
  }

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

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

  protected valueSlotChange() {
    const value = [];

    for (const node of this.projected) {
      const text = node.textContent?.trim();
      if (text) {
        value.push(text);
      }
    }

    if (value.length) {
      this.value = value.join('\r\n');
    }
  }

  protected slotChange() {
    this.requestUpdate();
  }

  protected renderValueSlot() {
    return html`<slot
      style="display: none"
      @slotchange=${this.valueSlotChange}
    ></slot>`;
  }

  protected renderValidationContainer(): TemplateResult {
    return IgcValidationContainerComponent.create(this);
  }

  protected renderPrefix() {
    return html`<div part="prefix" .hidden=${this.prefixes.length < 1}>
      <slot name="prefix" @slotchange=${this.slotChange}></slot>
    </div>`;
  }

  protected renderSuffix() {
    return html`<div part="suffix" .hidden=${this.suffixes.length < 1}>
      <slot name="suffix" @slotchange=${this.slotChange}></slot>
    </div>`;
  }

  protected renderLabel() {
    return this.label
      ? html`<label part="label" for=${this.id || this.inputId}
          >${this.label}</label
        >`
      : nothing;
  }

  protected renderStandard() {
    return html`
      ${this.renderLabel()}
      <div part=${partNameMap(this.resolvePartNames('container'))}>
        ${this.renderPrefix()} ${this.renderInput()} ${this.renderSuffix()}
      </div>
      ${this.renderValidationContainer()}
    `;
  }

  protected renderMaterial() {
    return html`
      <div
        part=${partNameMap({
          ...this.resolvePartNames('container'),
          labelled: this.label,
        })}
      >
        <div part="start">${this.renderPrefix()}</div>
        <div part="notch">${this.renderLabel()}</div>
        ${this.renderInput()}
        <div part="filler"></div>
        <div part="end">${this.renderSuffix()}</div>
      </div>
      ${this.renderValidationContainer()}
    `;
  }

  protected renderInput() {
    return html`${this.renderValueSlot()}
      <textarea
        id=${this.id || this.inputId}
        part="input"
        style=${styleMap(this.resizeStyles)}
        @input=${this.handleInput}
        @change=${this.handleChange}
        placeholder=${ifDefined(this.placeholder)}
        .rows=${this.rows}
        .value=${live(this.value)}
        .wrap=${this.wrap}
        autocomplete=${ifDefined(this.autocomplete as any)}
        autocapitalize=${ifDefined(this.autocapitalize)}
        inputmode=${ifDefined(this.inputMode)}
        spellcheck=${ifDefined(this.spellcheck)}
        minlength=${ifDefined(this.minLength)}
        maxlength=${ifDefined(this.validateOnly ? undefined : this.maxLength)}
        ?disabled=${this.disabled}
        ?required=${this.required}
        ?readonly=${this.readOnly}
        aria-invalid=${this.invalid ? 'true' : 'false'}
      ></textarea>`;
  }

  protected override render() {
    return this._isMaterial ? this.renderMaterial() : this.renderStandard();
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'igc-textarea': IgcTextareaComponent;
  }
}

1	import { LitElement, type TemplateResult, html, nothing } from 'lit';	12✔
2	import {	12✔
3	property,	12✔
4	query,	12✔
5	queryAssignedElements,	12✔
6	queryAssignedNodes,	12✔
7	} from 'lit/decorators.js';	12✔
8	import { ifDefined } from 'lit/directives/if-defined.js';	12✔
9	import { live } from 'lit/directives/live.js';	12✔
10	import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';	12✔
11		12✔
12	import { getThemeController, themes } from '../../theming/theming-decorator.js';	12✔
13	import { watch } from '../common/decorators/watch.js';	12✔
14	import { registerComponent } from '../common/definitions/register.js';	12✔
15	import type { Constructor } from '../common/mixins/constructor.js';	12✔
16	import { EventEmitterMixin } from '../common/mixins/event-emitter.js';	12✔
17	import { FormAssociatedRequiredMixin } from '../common/mixins/form-associated-required.js';	12✔
18	import { asNumber, createCounter, partNameMap } from '../common/util.js';	12✔
19	import type { RangeTextSelectMode, SelectionRangeDirection } from '../types.js';	12✔
20	import IgcValidationContainerComponent from '../validation-container/validation-container.js';	12✔
21	import { styles as shared } from './themes/shared/textarea.common.css.js';	12✔
22	import { styles } from './themes/textarea.base.css.js';	12✔
23	import { all } from './themes/themes.js';	12✔
24	import { textAreaValidators } from './validators.js';	12✔
25		12✔
26	export interface IgcTextareaEventMap {	12✔
27	igcInput: CustomEvent<string>;	12✔
28	igcChange: CustomEvent<string>;	12✔
29	// For analyzer meta only:	12✔
30	/* skipWCPrefix */	12✔
31	focus: FocusEvent;	12✔
32	/* skipWCPrefix */	12✔
33	blur: FocusEvent;	12✔
34	}	12✔
35		12✔
36	/**	12✔
37	* This element represents a multi-line plain-text editing control,	12✔
38	* useful when you want to allow users to enter a sizeable amount of free-form text,	12✔
39	* for example a comment on a review or feedback form.	12✔
40	*	12✔
41	* @element igc-textarea	12✔
42	*	12✔
43	* @slot - Text content from the default slot will be used as the value of the component.	12✔
44	* @slot prefix - Renders content before the input.	12✔
45	* @slot suffix - Renders content after input.	12✔
46	* @slot helper-text - Renders content below the input.	12✔
47	* @slot value-missing - Renders content when the required validation fails.	12✔
48	* @slot too-long - Renders content when the maxlength validation fails.	12✔
49	* @slot too-short - Renders content when the minlength validation fails.	12✔
50	* @slot custom-error - Renders content when setCustomValidity(message) is set.	12✔
51	* @slot invalid - Renders content when the component is in invalid state (validity.valid = false).	12✔
52	*	12✔
53	* @fires igcInput - Emitted when the control receives user input.	12✔
54	* @fires igcChange - Emitted when the a change to the control value is committed by the user.	12✔
55	*	12✔
56	* @csspart container - The main wrapper that holds all main input elements of the textarea.	12✔
57	* @csspart input - The native input element of the igc-textarea.	12✔
58	* @csspart label - The native label element of the igc-textarea.	12✔
59	* @csspart prefix - The prefix wrapper of the igc-textarea.	12✔
60	* @csspart suffix - The suffix wrapper of the igc-textarea.	12✔
61	* @csspart helper-text - The helper text wrapper of the igc-textarea.	12✔
62	*/	12✔
63	@themes(all, { exposeController: true })	12✔
64	export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(	12✔
65	EventEmitterMixin<IgcTextareaEventMap, Constructor<LitElement>>(LitElement)	12✔
66	) {	12✔
67	public static readonly tagName = 'igc-textarea';	12✔
68	public static styles = [styles, shared];	12✔
69		12✔
70	/* blazorSuppress */	12✔
71	public static register() {	12✔
72	registerComponent(IgcTextareaComponent, IgcValidationContainerComponent);	1✔
73	}	1✔
74		12✔
75	protected override get __validators() {	12✔
76	return textAreaValidators;	63✔
77	}	63✔
78		12✔
79	private static readonly increment = createCounter();	12✔
80	protected inputId = `textarea-${IgcTextareaComponent.increment()}`;	12✔
81		12✔
82	protected static shadowRootOptions = {	12✔
83	...LitElement.shadowRootOptions,	12✔
84	delegatesFocus: true,	12✔
85	};	12✔
86		12✔
87	private _value = '';	12✔
88	private observer!: ResizeObserver;	12✔
89		12✔
90	@queryAssignedNodes({ flatten: true })	12✔
91	private projected!: Array<Node>;	12✔
92		12✔
93	@queryAssignedElements({ slot: 'prefix' })	12✔
94	protected prefixes!: Array<HTMLElement>;	12✔
95		12✔
96	@queryAssignedElements({ slot: 'suffix' })	12✔
97	protected suffixes!: Array<HTMLElement>;	12✔
98		12✔
99	@query('textarea', true)	12✔
100	private input!: HTMLTextAreaElement;	12✔
101		12✔
102	private get resizeStyles(): StyleInfo {	12✔
103	return {	63✔
104	resize: this.resize === 'auto' ? 'none' : this.resize,	63!
105	};	63✔
106	}	63✔
107		12✔
108	protected get _isMaterial() {	12✔
109	return getThemeController(this)?.theme === 'material';	63✔
110	}	63✔
111		12✔
112	/**	12✔
113	* Specifies what if any permission the browser has to provide for automated assistance in filling out form field values,	12✔
114	* as well as guidance to the browser as to the type of information expected in the field.	12✔
115	* Refer to [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for additional information.	12✔
116	*	12✔
117	* @attr	12✔
118	*/	12✔
119	@property()	12✔
120	public autocomplete!: string;	12✔
121		12✔
122	/**	12✔
123	* Controls whether and how text input is automatically capitalized as it is entered/edited by the user.	12✔
124	*	12✔
125	* [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize).	12✔
126	*	12✔
127	* @attr	12✔
128	*/	12✔
129	@property()	12✔
130	public override autocapitalize!:	12✔
131	\| 'off'	12✔
132	\| 'none'	12✔
133	\| 'on'	12✔
134	\| 'sentences'	12✔
135	\| 'words'	12✔
136	\| 'characters';	12✔
137		12✔
138	/**	12✔
139	* Hints at the type of data that might be entered by the user while editing the element or its contents.	12✔
140	* This allows a browser to display an appropriate virtual keyboard.	12✔
141	*	12✔
142	* [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)	12✔
143	*	12✔
144	* @attr inputmode	12✔
145	*/	12✔
146	@property({ attribute: 'inputmode' })	12✔
147	public override inputMode!:	12✔
148	\| 'none'	12✔
149	\| 'text'	12✔
150	\| 'decimal'	12✔
151	\| 'numeric'	12✔
152	\| 'tel'	12✔
153	\| 'search'	12✔
154	\| 'email'	12✔
155	\| 'url';	12✔
156		12✔
157	/**	12✔
158	* The label for the control.	12✔
159	*	12✔
160	* @attr	12✔
161	*/	12✔
162	@property()	12✔
163	public label!: string;	12✔
164		12✔
165	/**	12✔
166	* The maximum number of characters (UTF-16 code units) that the user can enter.	12✔
167	* If this value isn't specified, the user can enter an unlimited number of characters.	12✔
168	*	12✔
169	* @attr maxlength	12✔
170	*/	12✔
171	@property({ type: Number, attribute: 'maxlength' })	12✔
172	public maxLength!: number;	12✔
173		12✔
174	/**	12✔
175	* The minimum number of characters (UTF-16 code units) required that the user should enter.	12✔
176	*	12✔
177	* @attr minlength	12✔
178	*/	12✔
179	@property({ type: Number, attribute: 'minlength' })	12✔
180	public minLength!: number;	12✔
181		12✔
182	/**	12✔
183	* Whether the control will have outlined appearance.	12✔
184	* @attr	12✔
185	*/	12✔
186	@property({ reflect: true, type: Boolean })	12✔
187	public outlined = false;	12✔
188		12✔
189	/**	12✔
190	* The placeholder attribute of the control.	12✔
191	*	12✔
192	* @attr	12✔
193	*/	12✔
194	@property()	12✔
195	public placeholder!: string;	12✔
196		12✔
197	/**	12✔
198	* Makes the control a readonly field.	12✔
199	*	12✔
200	* @attr readonly	12✔
201	*/	12✔
202	@property({ type: Boolean, reflect: true, attribute: 'readonly' })	12✔
203	public readOnly = false;	12✔
204		12✔
205	/**	12✔
206	* Controls whether the control can be resized.	12✔
207	* When `auto` is set, the control will try to expand and fit its content.	12✔
208	*	12✔
209	* @attr	12✔
210	*/	12✔
211	@property()	12✔
212	public resize: 'auto' \| 'vertical' \| 'none' = 'vertical';	12✔
213		12✔
214	/**	12✔
215	* The number of visible text lines for the control. If it is specified, it must be a positive integer.	12✔
216	* If it is not specified, the default value is 2.	12✔
217	*	12✔
218	* @attr	12✔
219	*/	12✔
220	@property({ type: Number })	12✔
221	public rows = 2;	12✔
222		12✔
223	/* @tsTwoWayProperty(true, "igcChange", "detail", false) */	12✔
224	/**	12✔
225	* The value of the component	12✔
226	*	12✔
227	* @attr	12✔
228	*/	12✔
229	@property()	12✔
230	public set value(value: string) {	12✔
231	this._value = value ?? '';	27✔
232	this.setFormValue(this._value ? this._value : null);	27✔
233	this.updateValidity();	27✔
234	this.setInvalidState();	27✔
235	}	27✔
236		12✔
237	public get value(): string {	12✔
238	return this._value;	550✔
239	}	550✔
240		12✔
241	/**	12✔
242	* Controls whether the element may be checked for spelling errors.	12✔
243	*	12✔
244	* @attr	12✔
245	*/	12✔
246	@property({	12✔
247	type: Boolean,	12✔
248	converter: {	12✔
249	fromAttribute: (value) => !(!value \|\| value === 'false'),	12✔
250	toAttribute: (value) => (value ? 'true' : 'false'),	12✔
251	},	12✔
252	})	12✔
253	public override spellcheck = true;	12✔
254		12✔
255	/**	12✔
256	* Indicates how the control should wrap the value for form submission.	12✔
257	* Refer to [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes)	12✔
258	* for explanation of the available values.	12✔
259	*	12✔
260	* @attr	12✔
261	*/	12✔
262	@property()	12✔
263	public wrap: 'hard' \| 'soft' \| 'off' = 'soft';	12✔
264		12✔
265	/**	12✔
266	* Enables validation rules to be evaluated without restricting user input. This applies to the `maxLength` property	12✔
267	* when it is defined.	12✔
268	*	12✔
269	* @attr validate-only	12✔
270	*/	12✔
271	@property({ type: Boolean, reflect: true, attribute: 'validate-only' })	12✔
272	public validateOnly = false;	12✔
273		12✔
274	constructor() {	12✔
275	super();	29✔
276	this.addEventListener('focus', () => {	29✔
277	this._dirty = true;	3✔
278	});	29✔
279	this.addEventListener('blur', () => {	29✔
280	this.updateValidity();	3✔
281	this.setInvalidState();	3✔
282	});	29✔
283	}	29✔
284		12✔
285	public override async connectedCallback() {	12✔
286	super.connectedCallback();	29✔
287	this.updateValidity();	29✔
288		29✔
289	await this.updateComplete;	29✔
290		29✔
291	this.setAreaHeight();	29✔
292	this.observer = new ResizeObserver(() => this.setAreaHeight());	29✔
293	this.observer.observe(this.input);	29✔
294	}	29✔
295		12✔
296	public override disconnectedCallback(): void {	12✔
297	this.observer.disconnect();	29✔
298	super.disconnectedCallback();	29✔
299	}	29✔
300		12✔
301	/** Selects all text within the control. */	12✔
302	public select() {	12✔
303	this.input.select();	1✔
304	}	1✔
305		12✔
306	/** Sets the text selection range of the control */	12✔
307	public setSelectionRange(	12✔
308	start: number,	1✔
309	end: number,	1✔
310	direction: SelectionRangeDirection = 'none'	1✔
311	) {	1✔
312	this.input.setSelectionRange(start, end, direction);	1✔
313	}	1✔
314		12✔
315	/** Replaces the selected text in the control. */	12✔
316	public setRangeText(	12✔
317	replacement: string,	1✔
318	start: number,	1✔
319	end: number,	1✔
320	selectMode: RangeTextSelectMode = 'preserve'	1✔
321	) {	1✔
322	this.input.setRangeText(replacement, start, end, selectMode);	1✔
323	this.value = this.input.value;	1✔
324	}	1✔
325		12✔
326	/* blazorSuppress */	12✔
327	public override scrollTo(options?: ScrollToOptions \| undefined): void;	12✔
328	/* blazorSuppress */	12✔
329	public override scrollTo(x: number, y: number): void;	12✔
330	public override scrollTo(x?: unknown, y?: unknown): void {	12✔
331	x !== undefined && y !== undefined	2✔
332	? this.input.scrollTo(x as number, y as number)	2!
333	: this.input.scrollTo(x as ScrollToOptions);	2✔
334	}	2✔
335		12✔
336	protected resolvePartNames(base: string) {	12✔
337	return {	63✔
338	[base]: true,	63✔
339	prefixed: this.prefixes.length > 0,	63✔
340	suffixed: this.suffixes.length > 0,	63✔
341	filled: !!this.value,	63✔
342	};	63✔
343	}	63✔
344		12✔
345	protected override async firstUpdated() {	12✔
346	await this.updateComplete;	29✔
347	this._defaultValue = this.value;	29✔
348	}	29✔
349		12✔
350	@watch('value')	12✔
351	protected async valueChanged() {	12✔
352	await this.updateComplete;	27✔
353	this.setAreaHeight();	27✔
354	}	27✔
355		12✔
356	@watch('rows', { waitUntilFirstUpdate: true })	12✔
357	@watch('resize', { waitUntilFirstUpdate: true })	12✔
358	protected setAreaHeight() {	12✔
359	if (this.resize === 'auto') {	75!
NEW 360	this.input.style.height = 'auto';	×
NEW 361	this.input.style.height = `${this.setAutoHeight()}px`;	×
362	} else {	75✔
363	Object.assign(this.input.style, { height: undefined });	75✔
364	}	75✔
365	}	75✔
366		12✔
367	private setAutoHeight() {	12✔
UNCOV 368	const computed = getComputedStyle(this.input);	×
UNCOV 369	const [top, bottom] = [	×
UNCOV 370	asNumber(computed.getPropertyValue('border-top-width')),	×
UNCOV 371	asNumber(computed.getPropertyValue('border-bottom-width')),	×
UNCOV 372	];	×
UNCOV 373	return this.input.scrollHeight + top + bottom;	×
NEW 374	}	×
375		12✔
376	protected handleInput() {	12✔
377	this.value = this.input.value;	1✔
378	this.emitEvent('igcInput', { detail: this.value });	1✔
379	}	1✔
380		12✔
381	protected handleChange() {	12✔
382	this.value = this.input.value;	1✔
383	this.emitEvent('igcChange', { detail: this.value });	1✔
384	}	1✔
385		12✔
386	protected valueSlotChange() {	12✔
387	const value = [];	16✔
388		16✔
389	for (const node of this.projected) {	16✔
390	const text = node.textContent?.trim();	24✔
391	if (text) {	24✔
392	value.push(text);	15✔
393	}	15✔
394	}	24✔
395		16✔
396	if (value.length) {	16✔
397	this.value = value.join('\r\n');	12✔
398	}	12✔
399	}	16✔
400		12✔
401	protected slotChange() {	12✔
NEW 402	this.requestUpdate();	×
UNCOV 403	}	×
404		12✔
405	protected renderValueSlot() {	12✔
406	return html`<slot	63✔
407	style="display: none"	63✔
408	@slotchange=${this.valueSlotChange}	63✔
409	></slot>`;	63✔
410	}	63✔
411		12✔
412	protected renderValidationContainer(): TemplateResult {	12✔
413	return IgcValidationContainerComponent.create(this);	63✔
414	}	63✔
415		12✔
416	protected renderPrefix() {	12✔
417	return html`<div part="prefix" .hidden=${this.prefixes.length < 1}>	63✔
418	<slot name="prefix" @slotchange=${this.slotChange}></slot>	63✔
419	</div>`;	63✔
420	}	63✔
421		12✔
422	protected renderSuffix() {	12✔
423	return html`<div part="suffix" .hidden=${this.suffixes.length < 1}>	63✔
424	<slot name="suffix" @slotchange=${this.slotChange}></slot>	63✔
425	</div>`;	63✔
426	}	63✔
427		12✔
428	protected renderLabel() {	12✔
429	return this.label	63✔
430	? html`<label part="label" for=${this.id \|\| this.inputId}	63✔
431	>${this.label}</label	1✔
432	>`	1✔
433	: nothing;	63✔
434	}	63✔
435		12✔
436	protected renderStandard() {	12✔
437	return html`	62✔
438	${this.renderLabel()}	62✔
439	<div part=${partNameMap(this.resolvePartNames('container'))}>	62✔
440	${this.renderPrefix()} ${this.renderInput()} ${this.renderSuffix()}	62✔
441	</div>	62✔
442	${this.renderValidationContainer()}	62✔
443	`;	62✔
444	}	62✔
445		12✔
446	protected renderMaterial() {	12✔
447	return html`	1✔
448	<div	1✔
449	part=${partNameMap({	1✔
450	...this.resolvePartNames('container'),	1✔
451	labelled: this.label,	1✔
452	})}	1✔
453	>	1✔
454	<div part="start">${this.renderPrefix()}</div>	1✔
455	<div part="notch">${this.renderLabel()}</div>	1✔
456	${this.renderInput()}	1✔
457	<div part="filler"></div>	1✔
458	<div part="end">${this.renderSuffix()}</div>	1✔
459	</div>	1✔
460	${this.renderValidationContainer()}	1✔
461	`;	1✔
462	}	1✔
463		12✔
464	protected renderInput() {	12✔
465	return html`${this.renderValueSlot()}	63✔
466	<textarea	63✔
467	id=${this.id \|\| this.inputId}	63✔
468	part="input"	63✔
469	style=${styleMap(this.resizeStyles)}	63✔
470	@input=${this.handleInput}	63✔
471	@change=${this.handleChange}	63✔
472	placeholder=${ifDefined(this.placeholder)}	63✔
473	.rows=${this.rows}	63✔
474	.value=${live(this.value)}	63✔
475	.wrap=${this.wrap}	63✔
476	autocomplete=${ifDefined(this.autocomplete as any)}	63✔
477	autocapitalize=${ifDefined(this.autocapitalize)}	63✔
478	inputmode=${ifDefined(this.inputMode)}	63✔
479	spellcheck=${ifDefined(this.spellcheck)}	63✔
480	minlength=${ifDefined(this.minLength)}	63✔
481	maxlength=${ifDefined(this.validateOnly ? undefined : this.maxLength)}	63!
482	?disabled=${this.disabled}	63✔
483	?required=${this.required}	63✔
484	?readonly=${this.readOnly}	63✔
485	aria-invalid=${this.invalid ? 'true' : 'false'}	63✔
486	></textarea>`;	63✔
487	}	63✔
488		12✔
489	protected override render() {	12✔
490	return this._isMaterial ? this.renderMaterial() : this.renderStandard();	63✔
491	}	63✔
492	}	12✔
493		12✔
494	declare global {	12✔
495	interface HTMLElementTagNameMap {	12✔
496	'igc-textarea': IgcTextareaComponent;	12✔
497	}	12✔
498	}	12✔

IgniteUI / igniteui-webcomponents / 10578472235

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