9640733744

Committed 24 Jun 2024 06:36AM UTC coverage: 98.08% (+0.2%) from 97.86%

Build # 9640733744

Build Type

Pull #1254

github

Committed by

web-flow

Commit Message

Merge 6e5a78a1a into 1d12ad684

Pull Request Pull Request #1254: feat: Render validation messages for FACE

Run Details

3627 of 3846 branches covered (94.31%)

Branch coverage included in aggregate %.

430 of 434 new or added lines in 23 files covered. (99.08%)

1 existing line in 1 file now uncovered.

22631 of 22926 relevant lines covered (98.71%)

453.19 hits per line

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

97.27

/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 { themeSymbol, themes } from '../../theming/theming-decorator.js';
import type { Theme } from '../../theming/types.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 Validator,
  maxLengthValidator,
  minLengthValidator,
  requiredValidator,
} from '../common/validators.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';

export interface IgcTextareaEventMap {
  igcInput: CustomEvent<string>;
  igcChange: CustomEvent<string>;
  igcFocus: CustomEvent<void>;
  igcBlur: CustomEvent<void>;
}

/**
 * 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.
 * @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.
 */
@themes(all, 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);
  }

  private declare readonly [themeSymbol]: Theme;
  protected override validators: Validator<this>[] = [
    requiredValidator,
    minLengthValidator,
    maxLengthValidator,
  ];

  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,
    };
  }

  /**
   * 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.emitEvent('igcFocus');
    });
    this.addEventListener('blur', () => {
      this.updateValidity();
      this.setInvalidState();
      this.emitEvent('igcBlur');
    });
  }

  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: 'backward' | 'forward' | 'none' = 'none'
  ) {
    this.input.setSelectionRange(start, end, direction);
  }

  /** Replaces the selected text in the control. */
  public setRangeText(
    replacement: string,
    start: number,
    end: number,
    selectMode: 'select' | 'start' | 'end' | 'preserve' = '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() {
    const isMaterial = this[themeSymbol] === 'material';
    return isMaterial ? this.renderMaterial() : this.renderStandard();
  }
}

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

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

IgniteUI / igniteui-webcomponents / 9640733744

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