@fluentui/web-components 3.0.0-beta.13 → 3.0.0-beta.130

package/dist/esm/textarea/textarea.base.js

@@ -0,0 +1,502 @@
+import { __decorate } from "tslib";
+import { attr, FASTElement, nullableNumberConverter, observable } from '@microsoft/fast-element';
+import { whitespaceFilter } from '../utils/index.js';
+import { hasMatchingState, swapStates, toggleState } from '../utils/element-internals.js';
+import { TextAreaResize } from './textarea.options.js';
+/**
+ * A Text Area Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea | `<textarea>`} element.
+ *
+ * @slot - The default content/value of the component.
+ * @slot label - The content for the `<label>`, it should be a `<fluent-label>` element.
+ * @csspart label - The `<label>` element.
+ * @csspart root - The container element of the `<textarea>` element.
+ * @csspart control - The internal `<textarea>` element.
+ * @fires change - Fires after the control loses focus, if the content has changed.
+ * @fires select - Fires when the `select()` method is called.
+ *
+ * @public
+ */
+export class BaseTextArea extends FASTElement {
+    /**
+     * The form-associated flag.
+     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+     *
+     * @public
+     */
+    static { this.formAssociated = true; }
+    defaultSlottedNodesChanged() {
+        const next = this.getContent();
+        this.defaultValue = next;
+        this.value = next;
+    }
+    labelSlottedNodesChanged() {
+        this.filteredLabelSlottedNodes = this.labelSlottedNodes.filter(whitespaceFilter);
+        if (this.labelEl) {
+            this.labelEl.hidden = !this.filteredLabelSlottedNodes.length;
+        }
+        this.filteredLabelSlottedNodes.forEach(node => {
+            node.disabled = this.disabled;
+            node.required = this.required;
+        });
+    }
+    autoResizeChanged() {
+        this.maybeCreateAutoSizerEl();
+        toggleState(this.elementInternals, 'auto-resize', this.autoResize);
+    }
+    disabledChanged() {
+        this.setDisabledSideEffect(this.disabled);
+    }
+    /**
+     * The form element that’s associated to the element, or `null` if no form is associated.
+     *
+     * @public
+     */
+    get form() {
+        return this.elementInternals.form;
+    }
+    /**
+     * A `NodeList` of `<label>` element associated with the element.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/labels | `labels`} property
+     *
+     * @public
+     */
+    get labels() {
+        return this.elementInternals.labels;
+    }
+    readOnlyChanged() {
+        this.elementInternals.ariaReadOnly = `${!!this.readOnly}`;
+    }
+    requiredChanged() {
+        this.elementInternals.ariaRequired = `${!!this.required}`;
+        if (this.filteredLabelSlottedNodes?.length) {
+            this.filteredLabelSlottedNodes.forEach(node => (node.required = this.required));
+        }
+    }
+    resizeChanged(prev, next) {
+        swapStates(this.elementInternals, prev, next, TextAreaResize, 'resize-');
+        toggleState(this.elementInternals, 'resize', hasMatchingState(TextAreaResize, next) && next !== TextAreaResize.none);
+    }
+    /**
+     * The length of the current value.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement#textLength | 'textLength'} property
+     *
+     * @public
+     */
+    get textLength() {
+        return this.controlEl.textLength;
+    }
+    /**
+     * The type of the element, which is always "textarea".
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/type | `type`} property
+     *
+     * @public
+     */
+    get type() {
+        return 'textarea';
+    }
+    /**
+     * The element's validity state.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
+     */
+    get validity() {
+        return this.elementInternals.validity;
+    }
+    /**
+     * The validation message.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validationMessage | `ElementInternals.validationMessage`} property.
+     */
+    get validationMessage() {
+        return this.elementInternals.validationMessage || this.controlEl.validationMessage;
+    }
+    /**
+     * Determines if the control can be submitted for constraint validation.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/willValidate | `ElementInternals.willValidate`} property.
+     */
+    get willValidate() {
+        return this.elementInternals.willValidate;
+    }
+    /**
+     * The text content of the element before user interaction.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement#defaultvalue | `defaultValue`} property
+     *
+     * @public
+     * @remarks
+     * In order to set the initial/default value, an author should either add the default value in the HTML as the children
+     * of the component, or setting this property in JavaScript. Setting `innerHTML`, `innerText`, or `textContent` on this
+     * component will not change the default value or the content displayed inside the component.
+     */
+    get defaultValue() {
+        return this.controlEl?.defaultValue ?? this.preConnectControlEl.defaultValue;
+    }
+    set defaultValue(next) {
+        const controlEl = this.controlEl ?? this.preConnectControlEl;
+        controlEl.defaultValue = next;
+        if (this.controlEl && !this.userInteracted) {
+            this.controlEl.value = next;
+        }
+    }
+    /**
+     * The value of the element.
+     *
+     * @public
+     * @remarks
+     * Reflects the `value` property.
+     */
+    get value() {
+        return this.controlEl?.value ?? this.preConnectControlEl.value;
+    }
+    set value(next) {
+        const controlEl = this.controlEl ?? this.preConnectControlEl;
+        controlEl.value = next;
+        this.setFormValue(next);
+        this.setValidity();
+    }
+    constructor() {
+        super();
+        /**
+         * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+         *
+         * @internal
+         */
+        this.elementInternals = this.attachInternals();
+        this.filteredLabelSlottedNodes = [];
+        /**
+         * The list of nodes that are assigned to the `label` slot.
+         * @internal
+         */
+        this.labelSlottedNodes = [];
+        this.userInteracted = false;
+        this.preConnectControlEl = document.createElement('textarea');
+        /**
+         * Indicates whether the element’s block size (height) should be automatically changed based on the content.
+         * Note: When this property’s value is set to be `true`, the element should not have a fixed block-size
+         * defined in CSS. Instead, use `min-height` or `min-block-size`.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: `auto-resize`
+         */
+        this.autoResize = false;
+        /**
+         * Sets the element's disabled state.
+         * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/disabled | `disabled`} attribute
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: `disabled`
+         */
+        this.disabled = false;
+        /**
+         * Indicates whether the element displays a box shadow. This only has effect when `appearance` is set to be `filled-darker` or `filled-lighter`.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: `display-shadow`
+         */
+        this.displayShadow = false;
+        /**
+         * When true, the control will be immutable by user interaction.
+         * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/readonly | `readonly`} attribute
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: `readonly`
+         */
+        this.readOnly = false;
+        /**
+         * The element's required attribute.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: `required`
+         */
+        this.required = false;
+        /**
+         * Indicates whether the element can be resized by end users.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: `resize`
+         */
+        this.resize = TextAreaResize.none;
+        /**
+         * Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used.
+         * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Global_attributes/spellcheck | `spellcheck`} attribute
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: `spellcheck`
+         */
+        this.spellcheck = false;
+        // TODO: Re-enabled this when Reference Target is out.
+        // this.elementInternals.role = 'textbox';
+        // this.elementInternals.ariaMultiLine = 'true';
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.setDefaultValue();
+        this.maybeCreateAutoSizerEl();
+        this.bindEvents();
+        this.observeControlElAttrs();
+    }
+    /**
+     * @internal
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.autoSizerObserver?.disconnect();
+        this.controlElAttrObserver?.disconnect();
+    }
+    /**
+     * Resets the value to its initial value when the form is reset.
+     *
+     * @internal
+     */
+    formResetCallback() {
+        this.value = this.defaultValue;
+    }
+    /**
+     * @internal
+     */
+    formDisabledCallback(disabled) {
+        this.setDisabledSideEffect(disabled);
+        this.setValidity();
+    }
+    /**
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
+     *
+     * @internal
+     */
+    setFormValue(value, state) {
+        this.elementInternals.setFormValue(value, value ?? state);
+    }
+    /**
+     * Checks the validity of the element and returns the result.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
+     */
+    checkValidity() {
+        return this.elementInternals.checkValidity();
+    }
+    /**
+     * Reports the validity of the element.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/reportValidity | `HTMLInputElement.reportValidity()`} method.
+     */
+    reportValidity() {
+        return this.elementInternals.reportValidity();
+    }
+    /**
+     * Sets the custom validity message.
+     * @param message - The message to set
+     *
+     * @public
+     */
+    setCustomValidity(message) {
+        this.elementInternals.setValidity({ customError: !!message }, !!message ? message.toString() : undefined);
+        this.reportValidity();
+    }
+    /**
+     * Sets the validity of the control.
+     *
+     * @param flags - Validity flags. If not provided, the control's `validity` will be used.
+     * @param message - Optional message to supply. If not provided, the control's `validationMessage` will be used. If the control does not have a `validationMessage`, the message will be empty.
+     * @param anchor - Optional anchor to use for the validation message. If not provided, the control will be used.
+     *
+     * @internal
+     */
+    setValidity(flags, message, anchor) {
+        if (!this.$fastController.isConnected) {
+            return;
+        }
+        if (this.disabled || this.readOnly) {
+            this.elementInternals.setValidity({});
+        }
+        else {
+            this.elementInternals.setValidity(flags ?? this.controlEl.validity, message ?? this.controlEl.validationMessage, anchor ?? this.controlEl);
+        }
+        if (this.userInteracted) {
+            this.toggleUserValidityState();
+        }
+    }
+    /**
+     * Selects the content in the element.
+     *
+     * @public
+     */
+    select() {
+        this.controlEl.select();
+    }
+    setDefaultValue() {
+        this.defaultValue = this.innerHTML.trim() || this.preConnectControlEl.defaultValue || '';
+        this.value = this.preConnectControlEl.value || this.defaultValue;
+        this.setFormValue(this.value);
+        this.setValidity();
+        this.preConnectControlEl = null;
+    }
+    bindEvents() {
+        this.controlEl.addEventListener('input', () => (this.userInteracted = true), { once: true });
+    }
+    /**
+     * Gets the content inside the light DOM, if any HTML element is present, use its `outerHTML` value.
+     */
+    getContent() {
+        return (this.defaultSlottedNodes
+            .map(node => {
+            switch (node.nodeType) {
+                case Node.ELEMENT_NODE:
+                    return node.outerHTML;
+                case Node.TEXT_NODE:
+                    return node.textContent.trim();
+                default:
+                    return '';
+            }
+        })
+            .join('') || '');
+    }
+    observeControlElAttrs() {
+        this.controlElAttrObserver = new MutationObserver(() => {
+            this.setValidity();
+        });
+        this.controlElAttrObserver.observe(this.controlEl, {
+            attributes: true,
+            attributeFilter: ['disabled', 'required', 'readonly', 'maxlength', 'minlength'],
+        });
+    }
+    setDisabledSideEffect(disabled) {
+        this.elementInternals.ariaDisabled = `${disabled}`;
+        if (this.controlEl) {
+            this.controlEl.disabled = disabled;
+        }
+        if (this.filteredLabelSlottedNodes?.length) {
+            this.filteredLabelSlottedNodes.forEach(node => (node.disabled = this.disabled));
+        }
+    }
+    toggleUserValidityState() {
+        toggleState(this.elementInternals, 'user-invalid', !this.validity.valid);
+        toggleState(this.elementInternals, 'user-valid', this.validity.valid);
+    }
+    // Technique inspired by https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/
+    // TODO: This should be removed after `field-sizing: content` is widely supported
+    // https://caniuse.com/mdn-css_properties_field-sizing_content
+    maybeCreateAutoSizerEl() {
+        if (CSS.supports('field-sizing: content')) {
+            return;
+        }
+        if (!this.autoResize) {
+            this.autoSizerEl?.remove();
+            this.autoSizerObserver?.disconnect();
+            return;
+        }
+        if (!this.autoSizerEl) {
+            this.autoSizerEl = document.createElement('div');
+            this.autoSizerEl.classList.add('auto-sizer');
+            this.autoSizerEl.ariaHidden = 'true';
+        }
+        this.shadowRoot.prepend(this.autoSizerEl);
+        // The `ResizeObserver` is used to observe when the component gains
+        // explicit block size, when so, the `autoSizerEl` element should be
+        // removed to let the defined blocked size dictate the component’s block size.
+        if (!this.autoSizerObserver) {
+            this.autoSizerObserver = new ResizeObserver((_, observer) => {
+                const blockSizePropName = window.getComputedStyle(this).writingMode.startsWith('horizontal')
+                    ? 'height'
+                    : 'width';
+                if (this.style.getPropertyValue(blockSizePropName) !== '') {
+                    this.autoSizerEl?.remove();
+                    observer.disconnect();
+                }
+            });
+        }
+        this.autoSizerObserver.observe(this);
+    }
+    /**
+     * @internal
+     */
+    handleControlInput() {
+        if (this.autoResize && this.autoSizerEl) {
+            this.autoSizerEl.textContent = this.value + ' ';
+        }
+        this.setFormValue(this.value);
+        this.setValidity();
+    }
+    /**
+     * @internal
+     */
+    handleControlChange() {
+        this.toggleUserValidityState();
+        this.$emit('change');
+    }
+    /**
+     * @internal
+     */
+    handleControlSelect() {
+        this.$emit('select');
+    }
+}
+__decorate([
+    observable
+], BaseTextArea.prototype, "defaultSlottedNodes", void 0);
+__decorate([
+    observable
+], BaseTextArea.prototype, "labelSlottedNodes", void 0);
+__decorate([
+    attr
+], BaseTextArea.prototype, "autocomplete", void 0);
+__decorate([
+    attr({ attribute: 'auto-resize', mode: 'boolean' })
+], BaseTextArea.prototype, "autoResize", void 0);
+__decorate([
+    attr({ attribute: 'dirname' })
+], BaseTextArea.prototype, "dirName", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], BaseTextArea.prototype, "disabled", void 0);
+__decorate([
+    attr({ attribute: 'display-shadow', mode: 'boolean' })
+], BaseTextArea.prototype, "displayShadow", void 0);
+__decorate([
+    attr({ attribute: 'form' })
+], BaseTextArea.prototype, "initialForm", void 0);
+__decorate([
+    attr({ attribute: 'maxlength', converter: nullableNumberConverter })
+], BaseTextArea.prototype, "maxLength", void 0);
+__decorate([
+    attr({ attribute: 'minlength', converter: nullableNumberConverter })
+], BaseTextArea.prototype, "minLength", void 0);
+__decorate([
+    attr
+], BaseTextArea.prototype, "name", void 0);
+__decorate([
+    attr
+], BaseTextArea.prototype, "placeholder", void 0);
+__decorate([
+    attr({ attribute: 'readonly', mode: 'boolean' })
+], BaseTextArea.prototype, "readOnly", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], BaseTextArea.prototype, "required", void 0);
+__decorate([
+    attr({ mode: 'fromView' })
+], BaseTextArea.prototype, "resize", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], BaseTextArea.prototype, "spellcheck", void 0);
+//# sourceMappingURL=textarea.base.js.map

package/dist/esm/textarea/textarea.base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.base.js","sourceRoot":"","sources":["../../../src/textarea/textarea.base.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACjG,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC1F,OAAO,EAAwB,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE7E;;;;;;;;;;;;;GAaG;AACH,MAAM,OAAO,YAAa,SAAQ,WAAW;IAC3C;;;;;OAKG;aACa,mBAAc,GAAG,IAAI,AAAP,CAAQ;IAgC5B,0BAA0B;QAClC,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAC/B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;IACpB,CAAC;IAUS,wBAAwB;QAChC,IAAI,CAAC,yBAAyB,GAAG,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;QAEjF,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,yBAAyB,CAAC,MAAM,CAAC;QAC/D,CAAC;QAED,IAAI,CAAC,yBAAyB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAC5C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC9B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QAChC,CAAC,CAAC,CAAC;IACL,CAAC;IAgCS,iBAAiB;QACzB,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC9B,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,aAAa,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IACrE,CAAC;IAuBS,eAAe;QACvB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC5C,CAAC;IAsBD;;;;OAIG;IACH,IAAW,IAAI;QACb,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;IACpC,CAAC;IAED;;;;;OAKG;IACH,IAAW,MAAM;QACf,OAAO,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC;IACtC,CAAC;IAuDS,eAAe;QACvB,IAAI,CAAC,gBAAgB,CAAC,YAAY,GAAG,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC5D,CAAC;IAWS,eAAe;QACvB,IAAI,CAAC,gBAAgB,CAAC,YAAY,GAAG,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC1D,IAAI,IAAI,CAAC,yBAAyB,EAAE,MAAM,EAAE,CAAC;YAC3C,IAAI,CAAC,yBAAyB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QAClF,CAAC;IACH,CAAC;IAWS,aAAa,CAAC,IAAgC,EAAE,IAAgC;QACxF,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,SAAS,CAAC,CAAC;QAEzE,WAAW,CACT,IAAI,CAAC,gBAAgB,EACrB,QAAQ,EACR,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,IAAI,IAAI,KAAK,cAAc,CAAC,IAAI,CACvE,CAAC;IACJ,CAAC;IAaD;;;;;OAKG;IACH,IAAW,UAAU;QACnB,OAAO,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;IACnC,CAAC;IAED;;;;;OAKG;IACH,IAAW,IAAI;QACb,OAAO,UAAU,CAAC;IACpB,CAAC;IAED;;;;;;OAMG;IACH,IAAW,QAAQ;QACjB,OAAO,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC;IACxC,CAAC;IAED;;;;;;OAMG;IACH,IAAW,iBAAiB;QAC1B,OAAO,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,IAAI,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC;IACrF,CAAC;IAED;;;;;;OAMG;IACH,IAAW,YAAY;QACrB,OAAO,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC;IAC5C,CAAC;IAED;;;;;;;;;OASG;IACH,IAAW,YAAY;QACrB,OAAO,IAAI,CAAC,SAAS,EAAE,YAAY,IAAI,IAAI,CAAC,mBAAoB,CAAC,YAAY,CAAC;IAChF,CAAC;IAED,IAAW,YAAY,CAAC,IAAY;QAClC,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,mBAAmB,CAAC;QAC7D,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC;QAC9B,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;YAC3C,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC;QAC9B,CAAC;IACH,CAAC;IAED;;;;;;OAMG;IACH,IAAW,KAAK;QACd,OAAO,IAAI,CAAC,SAAS,EAAE,KAAK,IAAI,IAAI,CAAC,mBAAoB,CAAC,KAAK,CAAC;IAClE,CAAC;IAED,IAAW,KAAK,CAAC,IAAY;QAC3B,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,mBAAmB,CAAC;QAC7D,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACxB,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAjWV;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QA+B3D,8BAAyB,GAAY,EAAE,CAAC;QAEhD;;;WAGG;QAEI,sBAAiB,GAAY,EAAE,CAAC;QAc/B,mBAAc,GAAG,KAAK,CAAC;QAMvB,wBAAmB,GAA+B,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QAa7F;;;;;;;;WAQG;QAEI,eAAU,GAAG,KAAK,CAAC;QAiB1B;;;;;;;WAOG;QAEI,aAAQ,GAAG,KAAK,CAAC;QAKxB;;;;;;WAMG;QAEI,kBAAa,GAAG,KAAK,CAAC;QA0E7B;;;;;;;WAOG;QAEI,aAAQ,GAAG,KAAK,CAAC;QAKxB;;;;;;WAMG;QAEI,aAAQ,GAAG,KAAK,CAAC;QAQxB;;;;;;WAMG;QAEI,WAAM,GAAmB,cAAc,CAAC,IAAI,CAAC;QAWpD;;;;;;;WAOG;QAEI,eAAU,GAAG,KAAK,CAAC;QAkGxB,sDAAsD;QACtD,0CAA0C;QAC1C,gDAAgD;IAClD,CAAC;IAED;;OAEG;IACI,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAE9B,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAED;;OAEG;IACI,oBAAoB;QACzB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,IAAI,CAAC,iBAAiB,EAAE,UAAU,EAAE,CAAC;QACrC,IAAI,CAAC,qBAAqB,EAAE,UAAU,EAAE,CAAC;IAC3C,CAAC;IAED;;;;OAIG;IACI,iBAAiB;QACtB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;IACjC,CAAC;IAED;;OAEG;IACI,oBAAoB,CAAC,QAAiB;QAC3C,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,CAAC;QACrC,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED;;;;OAIG;IACI,YAAY,CAAC,KAAsC,EAAE,KAAuC;QACjG,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,CAAC,CAAC;IAC5D,CAAC;IAED;;;;;;OAMG;IACI,aAAa;QAClB,OAAO,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,CAAC;IAC/C,CAAC;IAED;;;;;;OAMG;IACI,cAAc;QACnB,OAAO,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,CAAC;IAChD,CAAC;IAED;;;;;OAKG;IACI,iBAAiB,CAAC,OAAsB;QAC7C,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QAC1G,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED;;;;;;;;OAQG;IACI,WAAW,CAAC,KAA8B,EAAE,OAAgB,EAAE,MAAoB;QACvF,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,CAAC;YACtC,OAAO;QACT,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnC,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QACxC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAC/B,KAAK,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,EAChC,OAAO,IAAI,IAAI,CAAC,SAAS,CAAC,iBAAiB,EAC3C,MAAM,IAAI,IAAI,CAAC,SAAS,CACzB,CAAC;QACJ,CAAC;QAED,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,IAAI,CAAC,uBAAuB,EAAE,CAAC;QACjC,CAAC;IACH,CAAC;IAED;;;;OAIG;IACI,MAAM;QACX,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC;IAC1B,CAAC;IAEO,eAAe;QACrB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,IAAI,CAAC,mBAAoB,CAAC,YAAY,IAAI,EAAE,CAAC;QAC1F,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,mBAAoB,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC;QAElE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,WAAW,EAAE,CAAC;QAEnB,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;IAClC,CAAC;IAEO,UAAU;QAChB,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IAC/F,CAAC;IAED;;OAEG;IACK,UAAU;QAChB,OAAO,CACL,IAAI,CAAC,mBAAmB;aACrB,GAAG,CAAC,IAAI,CAAC,EAAE;YACV,QAAQ,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACtB,KAAK,IAAI,CAAC,YAAY;oBACpB,OAAQ,IAAgB,CAAC,SAAS,CAAC;gBACrC,KAAK,IAAI,CAAC,SAAS;oBACjB,OAAO,IAAI,CAAC,WAAY,CAAC,IAAI,EAAE,CAAC;gBAClC;oBACE,OAAO,EAAE,CAAC;YACd,CAAC;QACH,CAAC,CAAC;aACD,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,CAClB,CAAC;IACJ,CAAC;IAEO,qBAAqB;QAC3B,IAAI,CAAC,qBAAqB,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YACrD,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE;YACjD,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,CAAC;SAChF,CAAC,CAAC;IACL,CAAC;IAEO,qBAAqB,CAAC,QAAiB;QAC7C,IAAI,CAAC,gBAAgB,CAAC,YAAY,GAAG,GAAG,QAAQ,EAAE,CAAC;QAEnD,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACrC,CAAC;QAED,IAAI,IAAI,CAAC,yBAAyB,EAAE,MAAM,EAAE,CAAC;YAC3C,IAAI,CAAC,yBAAyB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QAClF,CAAC;IACH,CAAC;IAEO,uBAAuB;QAC7B,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,cAAc,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QACzE,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxE,CAAC;IAED,6FAA6F;IAC7F,iFAAiF;IACjF,8DAA8D;IACtD,sBAAsB;QAC5B,IAAI,GAAG,CAAC,QAAQ,CAAC,uBAAuB,CAAC,EAAE,CAAC;YAC1C,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,IAAI,CAAC,WAAW,EAAE,MAAM,EAAE,CAAC;YAC3B,IAAI,CAAC,iBAAiB,EAAE,UAAU,EAAE,CAAC;YACrC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACtB,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACjD,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;YAC7C,IAAI,CAAC,WAAW,CAAC,UAAU,GAAG,MAAM,CAAC;QACvC,CAAC;QACD,IAAI,CAAC,UAAW,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAE3C,mEAAmE;QACnE,oEAAoE;QACpE,8EAA8E;QAC9E,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC5B,IAAI,CAAC,iBAAiB,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE;gBAC1D,MAAM,iBAAiB,GAAG,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,YAAY,CAAC;oBAC1F,CAAC,CAAC,QAAQ;oBACV,CAAC,CAAC,OAAO,CAAC;gBACZ,IAAI,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,KAAK,EAAE,EAAE,CAAC;oBAC1D,IAAI,CAAC,WAAW,EAAE,MAAM,EAAE,CAAC;oBAC3B,QAAQ,CAAC,UAAU,EAAE,CAAC;gBACxB,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;QACD,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC,CAAC;IAED;;OAEG;IACI,kBAAkB;QACvB,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACxC,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;QAClD,CAAC;QAED,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED;;OAEG;IACI,mBAAmB;QACxB,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACvB,CAAC;IAED;;OAEG;IACI,mBAAmB;QACxB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACvB,CAAC;;AA/jBM;IADN,UAAU;yDACyB;AAc7B;IADN,UAAU;uDAC4B;AA+BhC;IADN,IAAI;kDACsC;AAYpC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;gDAC1B;AAenB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;6CACP;AAWjB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CACF;AAajB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;mDAC1B;AAUtB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;iDACA;AA6BrB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;+CAC3C;AAWnB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;+CAC3C;AAUnB;IADN,IAAI;0CACgB;AAYd;IADN,IAAI;iDACuB;AAWrB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CACzB;AAajB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CACF;AAgBjB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;4CACyB;AAoB7C;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;gDACA"}

package/dist/esm/textarea/textarea.bench.d.ts

@@ -0,0 +1,3 @@
+declare const itemRenderer: () => HTMLElement;
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

package/dist/esm/textarea/textarea.bench.js

@@ -0,0 +1,10 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './textarea.definition.js';
+definition.define(FluentDesignSystem.registry);
+const itemRenderer = () => {
+    const textarea = document.createElement('fluent-textarea');
+    return textarea;
+};
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';
+//# sourceMappingURL=textarea.bench.js.map

package/dist/esm/textarea/textarea.bench.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.bench.js","sourceRoot":"","sources":["../../../src/textarea/textarea.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC3D,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/textarea/textarea.d.ts

@@ -0,0 +1,47 @@
+import { BaseTextArea } from './textarea.base.js';
+import { TextAreaAppearance, TextAreaSize } from './textarea.options.js';
+/**
+ * The Fluent TextArea Element.
+ *
+ * @tag fluent-text-area
+ *
+ */
+export declare class TextArea extends BaseTextArea {
+    protected labelSlottedNodesChanged(): void;
+    /**
+     * Indicates the visual appearance of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `appearance`
+     */
+    appearance: TextAreaAppearance;
+    /**
+     * Indicates whether the textarea should be a block-level element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `block`
+     */
+    block: boolean;
+    /**
+     * Sets the size of the control.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `size`
+     */
+    size?: TextAreaSize;
+    /**
+     * @internal
+     */
+    handleChange(_: any, propertyName: string): void;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+}

package/dist/esm/textarea/textarea.definition.d.ts

@@ -0,0 +1,9 @@
+import { TextArea } from './textarea.js';
+/**
+ * The Fluent Textarea Element definition.
+ *
+ * @public
+ * @remarks
+ * HTML Element: `<fluent-textarea>`
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof TextArea>;

package/dist/esm/textarea/textarea.definition.js

@@ -0,0 +1,20 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { TextArea } from './textarea.js';
+import { styles } from './textarea.styles.js';
+import { template } from './textarea.template.js';
+/**
+ * The Fluent Textarea Element definition.
+ *
+ * @public
+ * @remarks
+ * HTML Element: `<fluent-textarea>`
+ */
+export const definition = TextArea.compose({
+    name: `${FluentDesignSystem.prefix}-textarea`,
+    template,
+    styles,
+    shadowOptions: {
+        delegatesFocus: true,
+    },
+});
+//# sourceMappingURL=textarea.definition.js.map

package/dist/esm/textarea/textarea.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.definition.js","sourceRoot":"","sources":["../../../src/textarea/textarea.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC;IACzC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,WAAW;IAC7C,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;CACF,CAAC,CAAC"}