@quartzds/core 1.0.0-beta.13 → 1.0.0-beta.130

package/components/qds-textarea.js

@@ -1,208 +1,367 @@
 /*!
- * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * SPDX-FileCopyrightText: © 2026 Schneider Electric
  * 
- * SPDX-License-Identifier: LGPL-2.1-only
+ * SPDX-License-Identifier: Apache-2.0
  */
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { p as pickFocusEventAttributes, a as invariant, e as pickInputEventAttributes, i as inheritAriaAttributes, b as inheritAttributes } from './helpers.js';
+import { p as proxyCustomElement, H, c as createEvent, h, e as Host } from './p-D2489VzR.js';
+import { a as invariant, p as pickFocusEventAttributes, j as pickInputEventAttributes, g as inheritAriaAttributes } from './p-eUDNu0SE.js';
+import { V as VALID_STATE, C as CUSTOM_ERROR_FLAGS, N as NO_ERROR_FLAGS } from './p-CZRW1LV_.js';
 
-const textareaCss = ".sc-qds-textarea-h{box-sizing:border-box}[hidden].sc-qds-textarea-h{display:none !important}.sc-qds-textarea-h *.sc-qds-textarea,.sc-qds-textarea-h *.sc-qds-textarea::before,.sc-qds-textarea-h *.sc-qds-textarea::after{box-sizing:inherit}.sc-qds-textarea-h{display:inline-block;resize:both}.textarea.sc-qds-textarea{background-color:var(--qds-theme-control-input-background);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-border-radius);color:var(--qds-theme-control-text-standard);padding-inline:var(--qds-control-input-padding-horizontal);resize:inherit;width:100%;height:100%}.textarea[aria-invalid='true'].sc-qds-textarea:not(:focus){border-color:var(--qds-theme-feedback-result-failure)}.textarea.sc-qds-textarea:disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.textarea.sc-qds-textarea:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.textarea.sc-qds-textarea:placeholder-shown{color:var(--qds-theme-control-text-placeholder)}[data-size='small'].sc-qds-textarea{font:var(--qds-control-small-text);padding-block:var(--qds-control-small-padding-auto-height)}[data-size='standard'].sc-qds-textarea{font:var(--qds-control-standard-text);padding-block:var(--qds-control-standard-padding-auto-height)}[data-size='large'].sc-qds-textarea{font:var(--qds-control-large-text);padding-block:var(--qds-control-large-padding-auto-height)}";
+const textareaCss = ":host([hidden]){display:none!important}:host{display:inline-block;resize:both}slot{display:none}.qds-textarea{background-color:var(--qds-theme-form-input-background-active);border:var(--qds-form-input-border-width-default) solid var(--qds-theme-form-input-border-default);border-radius:var(--qds-form-input-border-radius);box-sizing:border-box;color:var(--qds-theme-form-input-text-active);height:100%;letter-spacing:inherit;padding-inline:var(--qds-control-input-padding-horizontal);resize:inherit;width:100%;word-spacing:inherit}.qds-textarea:hover{background-color:var(--qds-theme-form-input-background-hover);border-color:var(--qds-theme-form-input-border-hover)}.qds-textarea:disabled{background-color:var(--qds-theme-form-input-background-default);opacity:var(--qds-theme-disabled);pointer-events:none}.qds-textarea:read-only{background-color:var(--qds-theme-form-input-background-read-only);border-color:var(--qds-theme-form-input-border-disabled)}.qds-textarea:focus-visible{box-shadow:0 0 0 var(--qds-focus-heavy-border-width) var(--qds-theme-focus-border);outline:var(--qds-theme-focus-border-contrast) solid var(--qds-focus-light-border-width);outline-offset:0}.qds-textarea::placeholder{color:var(--qds-theme-form-input-text-placeholder)}.qds-textarea:not(:focus):user-invalid{border-color:var(--qds-theme-form-input-border-error)}.qds-textarea[data-status]{border-width:var(--qds-form-input-border-width-status) var(\n        --qds-form-input-border-width-inline-end,var(--qds-form-input-border-width-status)\n      ) var(\n        --qds-form-input-border-width-block-end,var(--qds-form-input-border-width-status)\n      ) var(--qds-form-input-border-width-status)}.qds-textarea[data-status=success]{border-color:var(--qds-theme-form-input-border-success)}.qds-textarea[data-status=warning]{border-color:var(--qds-theme-form-input-border-warning)}.qds-textarea[data-status=error]{border-color:var(--qds-theme-form-input-border-error)}[data-size=small]{font:var(--qds-control-small-text);padding-block:var(--qds-control-small-padding-auto-height)}[data-size=standard]{font:var(--qds-control-standard-text);padding-block:var(--qds-control-standard-padding-auto-height)}[data-size=large]{font:var(--qds-control-large-text);padding-block:var(--qds-control-large-padding-auto-height)}";
 
-let autoIncrementingId = 1;
-const TextArea = /*@__PURE__*/ proxyCustomElement(class TextArea extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.blurEmitter = createEvent(this, "qdsBlur", 2);
-    this.changeEmitter = createEvent(this, "qdsChange", 6);
-    this.focusEmitter = createEvent(this, "qdsFocus", 2);
-    this.inputEmitter = createEvent(this, "qdsInput", 6);
-    this.inheritedAttributes = {};
-    this.ref = (textarea) => {
-      this.textarea = textarea;
-    };
-    this.onBlur = (event) => {
-      this.blurEmitter.emit(pickFocusEventAttributes(event));
-    };
-    this.onChange = () => {
-      invariant(this.textarea);
-      this.value = this.textarea.value;
-      this.changeEmitter.emit();
-    };
-    this.onClick = (event) => {
-      if (this.computedDisabled) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    };
-    this.onFocus = (event) => {
-      this.focusEmitter.emit(pickFocusEventAttributes(event));
-    };
-    this.onInput = (event) => {
-      invariant(this.textarea);
-      this.value = this.textarea.value;
-      this.inputEmitter.emit(pickInputEventAttributes(event));
-    };
-    this.onInvalid = () => {
-      this.invalid = true;
-    };
-    this.invalid = undefined;
-    this.size = 'standard';
-    this.autoCapitalize = undefined;
-    this.autoComplete = undefined;
-    this.autoFocus = undefined;
-    this.cols = undefined;
-    this.disabled = undefined;
-    this.enterkeyhint = undefined;
-    this.form = undefined;
-    this.inputmode = undefined;
-    this.maxLength = undefined;
-    this.minLength = undefined;
-    this.name = `qds-textarea-${autoIncrementingId}`;
-    this.placeholder = undefined;
-    this.readOnly = undefined;
-    this.required = undefined;
-    this.rows = undefined;
-    this.spellCheck = undefined;
-    this.value = undefined;
-    this.wrap = undefined;
-  }
-  get computedDisabled() {
-    return this.disabled ?? false;
-  }
-  /**
-   * Returns true if the element's value passes validity checks; otherwise,
-   * returns false, fires an invalid event at the element, and (if the event
-   * isn't canceled) reports the problem to the user.
-   */
-  async reportValidity() {
-    invariant(this.textarea);
-    return this.textarea.reportValidity();
-  }
-  /**
-   * Selects the entire content of the `<qds-textarea>` element if the
-   * element's content is selectable.
-   */
-  async select() {
-    invariant(this.textarea);
-    this.textarea.select();
-  }
-  /**
-   * Sets a custom validity message for the textarea. If this message is not
-   * the empty string, then the element is considered invalid.
-   */
-  async setCustomValidity(message) {
-    invariant(this.textarea);
-    this.textarea.setCustomValidity(message);
-    this.invalid = !this.textarea.checkValidity();
-  }
-  /**
-   * Sets the contents of the specified range of characters in the textarea
-   * element to a given string.
-   *
-   * @param replacement The string to insert.
-   * @param start The 0-based index of the first character to replace. Defaults to the current selectionStart value (the start of the user's current selection).
-   * @param end The 0-based index of the character _after_ the last character to replace. Defaults to the current selectionEnd value (the end of the user's current selection).
-   * @param selectionMode A string defining how the selection should be set after the text has been replaced. Possible values:
-   *
-   * - `"select"` selects the newly inserted text.
-   * - `"start"` moves the selection to just before the inserted text.
-   * - `"end"` moves the selection to just after the inserted text.
-   * - `"preserve"` attempts to preserve the selection.
-   */
-  async setRangeText(replacement, start, end, selectionMode = 'preserve') {
-    invariant(this.textarea);
-    this.textarea.setRangeText(replacement, start, end, selectionMode);
-    if (this.value !== this.textarea.value) {
-      this.value = this.textarea.value;
-      this.inputEmitter.emit();
-      this.changeEmitter.emit();
+// SPDX-FileCopyrightText: © 2024 Schneider Electric
+//
+// SPDX-License-Identifier: Apache-2.0
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _TextArea_instances, _TextArea_inheritedAttributes, _TextArea_textarea, _TextArea_computedDisabled_get, _TextArea_computedValue_get, _TextArea_computedStatus_get, _TextArea_getSelectionDirection, _TextArea_getSelectionStart, _TextArea_getSelectionEnd, _TextArea_ref, _TextArea_onBlur, _TextArea_onChange, _TextArea_onFocus, _TextArea_onInput, _TextArea_onSlotchange, _TextArea_defineGetter;
+const TextArea = /*@__PURE__*/ proxyCustomElement(class TextArea extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.blurEmitter = createEvent(this, "qdsBlur", 2);
+        this.changeEmitter = createEvent(this, "qdsChange", 6);
+        this.focusEmitter = createEvent(this, "qdsFocus", 2);
+        this.inputEmitter = createEvent(this, "qdsInput", 6);
+        this.internals = this.attachInternals();
+        _TextArea_instances.add(this);
+        /**
+         * The textarea's size.
+         *
+         * > **_NOTE:_** The native [`size` HTML attribute][] is not supported. CSS
+         * `width` should be used instead if this functionality is needed.
+         *
+         * [`size` HTML attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/size
+         */
+        this.size = 'standard';
+        /**
+         * The [`<form>`][] element to associate the input with (its form owner).
+         *
+         * The value of this attribute must be the id of a `<form>` in the same
+         * document. If this attribute is not set, the `<qds-textarea>` is associated
+         * with its ancestor `<form>` element, if any.
+         *
+         * This attribute lets you associate `<qds-textarea>` elements to `<form>`s
+         * anywhere in the document, not just inside a `<form>`. It can also override
+         * an ancestor `<form>` element.
+         *
+         * [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form
+         *
+         * @readonly
+         * @webnative
+         */
+        // eslint-disable-next-line unicorn/no-null
+        this.form = null;
+        /**
+         * Returns a list of the [`<label>`][] elements associated with the
+         * `qds-textarea` element.
+         *
+         * [`<label>`]: https://developer.mozilla.org/docs/Web/HTML/Element/label
+         *
+         * @readonly
+         * @webnative
+         */
+        this.labels = {};
+        /**
+         * Get or set the selection direction of a text selection.
+         *
+         * > **_NOTE:_** This property has no effect when used as an attribute.
+         *
+         * @webnative
+         */
+        this.selectionDirection = null;
+        /**
+         * Get or set the ending position or offset of a text selection.
+         *
+         * > **_NOTE:_** This property has no effect when used as an attribute.
+         *
+         * @webnative
+         */
+        this.selectionEnd = null;
+        /**
+         * Get or set the starting position or offset of a text selection.
+         *
+         * > **_NOTE:_** This property has no effect when used as an attribute.
+         *
+         * @webnative
+         */
+        this.selectionStart = null;
+        /**
+         * The error message that would be shown to the user if the `<qds-select>`
+         * was to be checked for validity.
+         *
+         * @readonly
+         * @webnative
+         */
+        this.validationMessage = '';
+        /**
+         * The [`ValidityState`][] object for this `<qds-select>`.
+         *
+         * [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState
+         *
+         * @readonly
+         * @webnative
+         */
+        this.validity = VALID_STATE;
+        /**
+         * True if `<qds-textarea>` will be validated when the form is submitted;
+         * false otherwise.
+         *
+         * @readonly
+         * @webnative
+         */
+        this.willValidate = false;
+        _TextArea_inheritedAttributes.set(this, {});
+        _TextArea_textarea.set(this, void 0);
+        this.checkValidity = () => this.internals.checkValidity();
+        this.reportValidity = () => this.internals.reportValidity();
+        this.setCustomValidity = (error) => {
+            invariant(__classPrivateFieldGet(this, _TextArea_textarea, "f"));
+            __classPrivateFieldGet(this, _TextArea_textarea, "f").setCustomValidity(error);
+            if (error)
+                this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, __classPrivateFieldGet(this, _TextArea_textarea, "f"));
+            else
+                this.internals.setValidity(NO_ERROR_FLAGS);
+        };
+        this.select = () => {
+            invariant(__classPrivateFieldGet(this, _TextArea_textarea, "f"));
+            __classPrivateFieldGet(this, _TextArea_textarea, "f").select();
+        };
+        this.setRangeText = (replacement, start, end, selectionMode) => {
+            invariant(__classPrivateFieldGet(this, _TextArea_textarea, "f"));
+            __classPrivateFieldGet(this, _TextArea_textarea, "f").setRangeText(replacement, start, end, selectionMode);
+            if (this.value !== __classPrivateFieldGet(this, _TextArea_textarea, "f").value) {
+                this.value = __classPrivateFieldGet(this, _TextArea_textarea, "f").value;
+                this.inputEmitter.emit();
+                this.changeEmitter.emit();
+            }
+        };
+        this.setSelectionRange = (start, end, direction) => {
+            invariant(__classPrivateFieldGet(this, _TextArea_textarea, "f"));
+            __classPrivateFieldGet(this, _TextArea_textarea, "f").setSelectionRange(start, end, direction);
+        };
+        _TextArea_getSelectionDirection.set(this, () => {
+            invariant(__classPrivateFieldGet(this, _TextArea_textarea, "f"));
+            return __classPrivateFieldGet(this, _TextArea_textarea, "f").selectionDirection;
+        });
+        _TextArea_getSelectionStart.set(this, () => {
+            invariant(__classPrivateFieldGet(this, _TextArea_textarea, "f"));
+            return __classPrivateFieldGet(this, _TextArea_textarea, "f").selectionStart;
+        });
+        _TextArea_getSelectionEnd.set(this, () => {
+            invariant(__classPrivateFieldGet(this, _TextArea_textarea, "f"));
+            return __classPrivateFieldGet(this, _TextArea_textarea, "f").selectionEnd;
+        });
+        _TextArea_ref.set(this, (textarea) => {
+            __classPrivateFieldSet(this, _TextArea_textarea, textarea, "f");
+        });
+        _TextArea_onBlur.set(this, (event) => {
+            this.blurEmitter.emit(pickFocusEventAttributes(event));
+        });
+        _TextArea_onChange.set(this, () => {
+            this.changeEmitter.emit();
+        });
+        _TextArea_onFocus.set(this, (event) => {
+            this.focusEmitter.emit(pickFocusEventAttributes(event));
+        });
+        _TextArea_onInput.set(this, (event) => {
+            invariant(__classPrivateFieldGet(this, _TextArea_textarea, "f"));
+            this.value = __classPrivateFieldGet(this, _TextArea_textarea, "f").value;
+            this.inputEmitter.emit(pickInputEventAttributes(event));
+        });
+        _TextArea_onSlotchange.set(this, () => {
+            invariant(__classPrivateFieldGet(this, _TextArea_textarea, "f"));
+            __classPrivateFieldGet(this, _TextArea_textarea, "f").innerHTML = this.host.innerHTML;
+        });
     }
-  }
-  /**
-   * Selects the specified range of characters within the textarea.
-   *
-   * @param start The offset into the input for the start of the selection.
-   * @param end The offset into the input for the end of the selection.
-   * @param direction The direction in which the selection is performed.
-   */
-  async setSelectionRange(start, end, direction) {
-    invariant(this.textarea);
-    this.textarea.setSelectionRange(start, end, direction);
-  }
-  disabledChanged() {
-    invariant(this.textarea);
-    // Disabled inputs are always valid, so we need to recheck validity when
-    // the state changes.
-    this.textarea.disabled = this.computedDisabled;
-    this.invalid = !this.textarea.checkValidity();
-  }
-  valueChanged() {
-    invariant(this.textarea);
-    this.invalid = !this.textarea.checkValidity();
-  }
-  componentWillLoad() {
-    autoIncrementingId += 1;
-    this.inheritedAttributes = {
-      ...inheritAriaAttributes(this.element),
-      ...inheritAttributes(this.element, ['tabindex']),
-    };
-  }
-  render() {
-    return (h("textarea", { "aria-invalid": this.invalid ?? false ? 'true' : 'false', autoCapitalize: this.autoCapitalize, autoComplete: this.autoComplete,
-      // eslint-disable-next-line jsx-a11y/no-autofocus
-      autoFocus: this.autoFocus, class: "textarea", cols: this.cols, "data-size": this.size, disabled: this.disabled, enterKeyHint: this.enterkeyhint, form: this.form, inputMode: this.inputmode, maxLength: this.maxLength, minLength: this.minLength, name: this.name, onBlur: this.onBlur, onChange: this.onChange, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, onInvalid: this.onInvalid, placeholder: this.placeholder, readOnly: this.readOnly, ref: this.ref, required: this.required, rows: this.rows, spellcheck: this.spellCheck, value: this.value ?? undefined, wrap: this.wrap, ...this.inheritedAttributes }));
-  }
-  get element() { return this; }
-  static get watchers() { return {
-    "disabled": ["disabledChanged"],
-    "value": ["valueChanged"]
-  }; }
-  static get style() { return textareaCss; }
-}, [2, "qds-textarea", {
-    "invalid": [1540],
-    "size": [513],
-    "autoCapitalize": [1, "autocapitalize"],
-    "autoComplete": [1, "autocomplete"],
-    "autoFocus": [4, "autofocus"],
-    "cols": [1026],
-    "disabled": [1540],
-    "enterkeyhint": [1],
-    "form": [1],
-    "inputmode": [1],
-    "maxLength": [2, "maxlength"],
-    "minLength": [2, "minlength"],
-    "name": [1],
-    "placeholder": [1],
-    "readOnly": [4, "readonly"],
-    "required": [4],
-    "rows": [1026],
-    "spellCheck": [4, "spellcheck"],
-    "value": [1032],
-    "wrap": [1025],
-    "reportValidity": [64],
-    "select": [64],
-    "setCustomValidity": [64],
-    "setRangeText": [64],
-    "setSelectionRange": [64]
-  }]);
+    onClick(event) {
+        if (__classPrivateFieldGet(this, _TextArea_instances, "a", _TextArea_computedDisabled_get))
+            event.stopImmediatePropagation();
+    }
+    disabledChanged() {
+        if (__classPrivateFieldGet(this, _TextArea_instances, "a", _TextArea_computedDisabled_get))
+            // eslint-disable-next-line unicorn/no-null
+            this.internals.setFormValue(null);
+        else
+            this.internals.setFormValue(__classPrivateFieldGet(this, _TextArea_instances, "a", _TextArea_computedValue_get));
+    }
+    selectionDirectionChanged() {
+        invariant(__classPrivateFieldGet(this, _TextArea_textarea, "f"));
+        // @ts-expect-error: `null` is a valid value according to the HTML spec.
+        __classPrivateFieldGet(this, _TextArea_textarea, "f").selectionDirection = this.selectionDirection;
+    }
+    selectionEndChanged() {
+        invariant(__classPrivateFieldGet(this, _TextArea_textarea, "f"));
+        // @ts-expect-error: `null` is a valid value according to the HTML spec.
+        __classPrivateFieldGet(this, _TextArea_textarea, "f").selectionEnd = this.selectionEnd;
+    }
+    selectionStartChanged() {
+        invariant(__classPrivateFieldGet(this, _TextArea_textarea, "f"));
+        // @ts-expect-error: `null` is a valid value according to the HTML spec.
+        __classPrivateFieldGet(this, _TextArea_textarea, "f").selectionStart = this.selectionStart;
+    }
+    tabindexChanged(newValue) {
+        const parsedValue = Number.parseInt(newValue, 10);
+        this.tabIndex =
+            parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue;
+    }
+    validationChanged() {
+        invariant(__classPrivateFieldGet(this, _TextArea_textarea, "f"));
+        if (this.maxLength !== undefined)
+            __classPrivateFieldGet(this, _TextArea_textarea, "f").maxLength = this.maxLength;
+        if (this.minLength !== undefined)
+            __classPrivateFieldGet(this, _TextArea_textarea, "f").minLength = this.minLength;
+        __classPrivateFieldGet(this, _TextArea_textarea, "f").required = this.required ?? false;
+        // eslint-disable-next-line unicorn/no-null
+        if (this.value != null)
+            __classPrivateFieldGet(this, _TextArea_textarea, "f").value = this.value.toString();
+        const { valid } = __classPrivateFieldGet(this, _TextArea_textarea, "f").validity;
+        if (valid)
+            this.internals.setValidity(NO_ERROR_FLAGS, undefined, __classPrivateFieldGet(this, _TextArea_textarea, "f"));
+        else
+            this.internals.setValidity(__classPrivateFieldGet(this, _TextArea_textarea, "f").validity, __classPrivateFieldGet(this, _TextArea_textarea, "f").validationMessage, __classPrivateFieldGet(this, _TextArea_textarea, "f"));
+    }
+    valueChanged() {
+        if (!__classPrivateFieldGet(this, _TextArea_instances, "a", _TextArea_computedDisabled_get))
+            this.internals.setFormValue(__classPrivateFieldGet(this, _TextArea_instances, "a", _TextArea_computedValue_get));
+    }
+    statusChanged() {
+        this.internals.ariaInvalid = (__classPrivateFieldGet(this, _TextArea_instances, "a", _TextArea_computedStatus_get) === 'error').toString();
+    }
+    componentWillLoad() {
+        __classPrivateFieldGet(this, _TextArea_instances, "m", _TextArea_defineGetter).call(this, 'form', () => this.internals.form);
+        __classPrivateFieldGet(this, _TextArea_instances, "m", _TextArea_defineGetter).call(this, 'willValidate', () => this.internals.willValidate);
+        __classPrivateFieldGet(this, _TextArea_instances, "m", _TextArea_defineGetter).call(this, 'validity', () => this.internals.validity);
+        __classPrivateFieldGet(this, _TextArea_instances, "m", _TextArea_defineGetter).call(this, 'validationMessage', () => this.internals.validationMessage);
+        __classPrivateFieldGet(this, _TextArea_instances, "m", _TextArea_defineGetter).call(this, 'labels', () => this.internals.labels);
+        __classPrivateFieldGet(this, _TextArea_instances, "m", _TextArea_defineGetter).call(this, 'selectionDirection', __classPrivateFieldGet(this, _TextArea_getSelectionDirection, "f"));
+        __classPrivateFieldGet(this, _TextArea_instances, "m", _TextArea_defineGetter).call(this, 'selectionStart', __classPrivateFieldGet(this, _TextArea_getSelectionStart, "f"));
+        __classPrivateFieldGet(this, _TextArea_instances, "m", _TextArea_defineGetter).call(this, 'selectionEnd', __classPrivateFieldGet(this, _TextArea_getSelectionEnd, "f"));
+        __classPrivateFieldSet(this, _TextArea_inheritedAttributes, inheritAriaAttributes(this.host), "f");
+        this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0');
+        this.statusChanged();
+    }
+    componentDidLoad() {
+        invariant(__classPrivateFieldGet(this, _TextArea_textarea, "f"));
+        this.validationChanged();
+        this.valueChanged();
+    }
+    render() {
+        return (h(Host, { key: 'e4a8c71dc44612152518e44ea1dec9f2a60ddb80' }, h("textarea", { key: '42d5da43e4a033e62d9438cba9319f5a1bf3e76c', autoCapitalize: this.host.autocapitalize, autoComplete: this.autoComplete,
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus: this.host.autofocus, class: "qds-textarea", cols: this.cols, "data-size": this.size ?? 'standard', "data-status": __classPrivateFieldGet(this, _TextArea_instances, "a", _TextArea_computedStatus_get), disabled: this.disabled, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, maxLength: this.maxLength, minLength: this.minLength, onBlur: __classPrivateFieldGet(this, _TextArea_onBlur, "f"), onChange: __classPrivateFieldGet(this, _TextArea_onChange, "f"), onFocus: __classPrivateFieldGet(this, _TextArea_onFocus, "f"), onInput: __classPrivateFieldGet(this, _TextArea_onInput, "f"), placeholder: this.placeholder, ref: __classPrivateFieldGet(this, _TextArea_ref, "f"), readOnly: this.readonly, rows: this.rows, spellcheck: this.host.spellcheck, tabIndex: __classPrivateFieldGet(this, _TextArea_instances, "a", _TextArea_computedDisabled_get) ? undefined : this.tabIndex, wrap: this.wrap, ...__classPrivateFieldGet(this, _TextArea_inheritedAttributes, "f") }), h("slot", { key: '1f7a23defc50ec60b1d292306c205cf34ddef9ee', onSlotchange: __classPrivateFieldGet(this, _TextArea_onSlotchange, "f") })));
+    }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    get host() { return this; }
+    static get watchers() { return {
+        "disabled": ["disabledChanged"],
+        "selectionDirection": ["selectionDirectionChanged"],
+        "selectionEnd": ["selectionEndChanged"],
+        "selectionStart": ["selectionStartChanged"],
+        "tabindex": ["tabindexChanged"],
+        "maxLength": ["validationChanged"],
+        "minLength": ["validationChanged"],
+        "required": ["validationChanged"],
+        "value": ["validationChanged", "valueChanged"],
+        "status": ["statusChanged"]
+    }; }
+    static get style() { return textareaCss; }
+}, [337, "qds-textarea", {
+        "size": [1],
+        "status": [1],
+        "autoComplete": [1, "autocomplete"],
+        "cols": [2],
+        "disabled": [4],
+        "readonly": [4],
+        "enterkeyhint": [1],
+        "form": [1],
+        "inputmode": [1],
+        "labels": [16],
+        "maxLength": [2, "maxlength"],
+        "minLength": [2, "minlength"],
+        "name": [1],
+        "placeholder": [1],
+        "required": [4],
+        "rows": [2],
+        "selectionDirection": [1025, "selection-direction"],
+        "selectionEnd": [1026, "selection-end"],
+        "selectionStart": [1026, "selection-start"],
+        "validationMessage": [1, "validation-message"],
+        "validity": [16],
+        "value": [1032],
+        "willValidate": [4, "will-validate"],
+        "wrap": [1],
+        "tabIndex": [32]
+    }, [[0, "click", "onClick"]], {
+        "disabled": ["disabledChanged"],
+        "selectionDirection": ["selectionDirectionChanged"],
+        "selectionEnd": ["selectionEndChanged"],
+        "selectionStart": ["selectionStartChanged"],
+        "tabindex": ["tabindexChanged"],
+        "maxLength": ["validationChanged"],
+        "minLength": ["validationChanged"],
+        "required": ["validationChanged"],
+        "value": ["validationChanged", "valueChanged"],
+        "status": ["statusChanged"]
+    }]);
+_TextArea_inheritedAttributes = new WeakMap(), _TextArea_textarea = new WeakMap(), _TextArea_getSelectionDirection = new WeakMap(), _TextArea_getSelectionStart = new WeakMap(), _TextArea_getSelectionEnd = new WeakMap(), _TextArea_ref = new WeakMap(), _TextArea_onBlur = new WeakMap(), _TextArea_onChange = new WeakMap(), _TextArea_onFocus = new WeakMap(), _TextArea_onInput = new WeakMap(), _TextArea_onSlotchange = new WeakMap(), _TextArea_instances = new WeakSet(), _TextArea_computedDisabled_get = function _TextArea_computedDisabled_get() {
+    return ((this.host.matches(':disabled') || (this.disabled ?? false)) &&
+        this.host.getAttribute('disabled') !== 'false');
+}, _TextArea_computedValue_get = function _TextArea_computedValue_get() {
+    if (typeof this.value === 'number')
+        return this.value.toString();
+    // eslint-disable-next-line unicorn/no-null
+    return this.value === undefined ? null : this.value;
+}, _TextArea_computedStatus_get = function _TextArea_computedStatus_get() {
+    switch (this.status) {
+        case 'error':
+        case 'success':
+        case 'warning': {
+            return this.status;
+        }
+        default: {
+            return undefined;
+        }
+    }
+}, _TextArea_defineGetter = function _TextArea_defineGetter(p, get) {
+    Object.defineProperty(this.host, p, { enumerable: true, get });
+};
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["qds-textarea"];
-  components.forEach(tagName => { switch (tagName) {
-    case "qds-textarea":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TextArea);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["qds-textarea"];
+    components.forEach(tagName => { switch (tagName) {
+        case "qds-textarea":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TextArea);
+            }
+            break;
+    } });
 }
 
 const QdsTextarea = TextArea;
 const defineCustomElement = defineCustomElement$1;
 
 export { QdsTextarea, defineCustomElement };
+//# sourceMappingURL=qds-textarea.js.map
 
 //# sourceMappingURL=qds-textarea.js.map