@fabric-msft/copilot-web 7.0.0

package/esm/components/textarea/index.js

@@ -0,0 +1,6 @@
+export { Textarea } from "./textarea.js";
+export { definition as TextareaDefinition } from "./textarea.definition.js";
+export { template as TextareaTemplate } from "./textarea.template.js";
+export { styles as TextareaStyles } from "./textarea.styles.js";
+export { DEFAULT_MAX_CHARS, DEFAULT_CHARACTER_OVERFLOW_BUFFER, DEFAULT_ERROR_MESSAGE, ERROR_EXCEEDS_CHAR_LIMIT_ATTRIBUTE, TextareaEventNames } from "./textarea.options.js";
+//# sourceMappingURL=index.js.map

package/esm/components/textarea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/textarea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EAAE,QAAQ,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EACL,iBAAiB,EACjB,iCAAiC,EACjC,qBAAqB,EACrB,kCAAkC,EAClC,kBAAkB,EACnB,MAAM,uBAAuB,CAAC"}

package/esm/components/textarea/textarea.definition.js

@@ -0,0 +1,22 @@
+import { DesignSystem } from '../design-system.js';
+import { Textarea } from './textarea.js';
+import { styles } from './textarea.styles.js';
+import { template } from './textarea.template.js';
+
+/**
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fabric-textarea\>
+ */
+const definition = Textarea.compose({
+  name: `${DesignSystem.prefix}-textarea`,
+  template,
+  styles,
+  shadowOptions: {
+    delegatesFocus: true,
+    mode: DesignSystem.shadowRootMode
+  }
+});
+
+export { definition };

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.definition.js","sourceRoot":"","sources":["../../../../src/components/textarea/textarea.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC;IACzC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,WAAW;IACvC,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;QACpB,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}

package/esm/components/textarea/textarea.js

@@ -0,0 +1,507 @@
+import { __decorate, __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
+import { colorNeutralForeground4, colorNeutralForegroundDisabled, spacingVerticalXS } from '@fluentui/web-components';
+import { attr, nullableNumberConverter, observable, FASTElement, Updates } from '@microsoft/fast-element';
+import { DEFAULT_MAX_CHARS, DEFAULT_CHARACTER_OVERFLOW_BUFFER, ERROR_EXCEEDS_CHAR_LIMIT_ATTRIBUTE, TextareaEventNames } from './textarea.options.js';
+import { isActionModifierKey } from '@fabric-msft/fabric-web';
+
+var _Textarea_instances, _Textarea_eventController, _Textarea__value, _Textarea_handleTextareaInput, _Textarea_removeErrorMessage, _Textarea_setExceedsCharLimit, _Textarea_handleErrorRendering, _Textarea_handleInput, _Textarea_attachListeners, _Textarea_attachTextareaEventListeners, _Textarea_detachTextareaEventListeners, _Textarea_handleTextareaHeight, _Textarea_emitSubmitEvent, _Textarea_handleSelectEvent, _Textarea_handleFocusEvent, _Textarea_handleBlurEvent, _Textarea_handleChangeEvent, _Textarea_emitSelectEvent, _Textarea_emitFocusEvent, _Textarea_emitBlurEvent, _Textarea_emitChangeEvent, _Textarea_handleSubmitButton, _Textarea_handleKeydown, _Textarea_attachKeyEventListeners, _Textarea_detachKeyEventListeners;
+/**
+ * Textarea
+ * @summary A comprehensive textarea component that provides rich text input functionality with character counting, error states, and customizable UI elements. Designed for AI chat features with keyboard navigation, accessibility support, and dynamic height adjustment.
+ *
+ * @example
+ * ```html
+ * <fabric-textarea placeholder="Type your message here" max-length="500">
+ *   <div slot="messages">Error message here</div>
+ *   <button slot="buttons">Attach</button>
+ *   <button slot="submit-button">Send</button>
+ *   <div slot="attachments">Attached file here</div>
+ * </fabric-textarea>
+ * ```
+ *
+ * @attr {boolean} disabled - Whether the textarea is disabled
+ * @attr {number} max-length - Maximum character limit for the text area
+ * @attr {number} character-overflow-length - Character overflow buffer for the text area
+ * @attr {string} placeholder - Placeholder text for the text area
+ * @attr {boolean} hide-character-count - Controls visibility of character count
+ * @attr {string} name - DOM name attribute
+ * @attr {string} data-value - The current value of the textarea (internal)
+ * @attr {boolean} data-exceeds-char-limit - Set when character limit is exceeded (internal)
+ *
+ * @prop {string} svgColor - The color of the SVG icon
+ * @prop {string} svgColorDisabled - The color of the SVG icon when disabled
+ * @prop {boolean} disabled - Puts the send button into a disabled state, where user input can still be inputed, but cannot be sent
+ * @prop {number} maxLength - Sets the max allowed character count of the text area
+ * @prop {number} characterOverflowLength - Sets the character overflow buffer for the text area
+ * @prop {string} placeholder - Sets a placeholder text to queue the user for typing
+ * @prop {boolean} hideCharacterCount - Controls visibility of character count
+ * @prop {string} name - DOM name attribute
+ * @prop {boolean} exceedsMaxCharLimit - True when the max character limit has been reached
+ * @prop {number} characterCount - The number of characters currently inputted into the text input (readonly)
+ * @prop {HTMLElement[]} submitButton - The submit button slotted into the submit-button slot
+ * @prop {HTMLElement[]} buttons - An array of HTML elements that have been slotted into the buttons slot
+ * @prop {HTMLElement[]} messages - An array of HTML elements that have been slotted into the messages area
+ * @prop {boolean} hasAttachments - True when attachments have been slotted into the attachments slot
+ * @prop {HTMLElement[]} attachments - An array of HTML elements slotted into the attachments area
+ * @prop {HTMLTextAreaElement} inputRef - A reference to the fluent text input
+ * @prop {string} value - The value of the current user input
+ *
+ * @slot messages - Content for the messages row, typically used for error or warning messages
+ * @slot buttons - Buttons for the interactions row, such as attachment or menu buttons
+ * @slot attachments - Content for the attachments row, showing attached files or content
+ * @slot submit-button - The submit button slot
+ * @slot end - Content displayed at the end of the textarea
+ *
+ * @csspart textarea-root - Styles the textarea root
+ * @csspart textarea-element - Styles the textarea element
+ * @csspart messages-row - Styles the messages row
+ * @csspart error-message-container - Styles the error message container
+ * @csspart error-message - Styles the error message
+ * @csspart attachments-row - Styles the attachments row
+ * @csspart interactions-row - Styles the interactions row
+ * @csspart interactions-left-col - Styles the interactions left column
+ * @csspart interactions-center-col - Styles the interactions center column
+ * @csspart interactions-right-col - Styles the interactions right column
+ * @csspart character-count - Styles the character count
+ * @csspart divider - Styles the divider element
+ * @csspart submit-button - Styles the submit button
+ *
+ * @method buttonsChanged - Called when the buttons property changes
+ * @method messagesChanged - Called when the messages property changes
+ * @method attachmentsChanged - Called when the attachments property changes
+ * @method submitButtonChanged - Called when the submit button property changes
+ * @method exceedsMaxCharLimitChanged - Called when the exceeds max char limit property changes
+ * @method handleInput - Handles input events and updates character count
+ * @method handleTextareaHeight - Resizes the textarea to accommodate more rows of text
+ * @method handleSelectEvent - Handles text selection events
+ * @method handleFocusEvent - Handles focus events
+ * @method handleBlurEvent - Handles blur events
+ * @method handleChangeEvent - Handles change events
+ * @method handleSubmitButton - Handles submit button events
+ * @method emitSubmitEvent - Emits submit event with current value
+ * @method emitSelectEvent - Emits select event
+ * @method emitFocusEvent - Emits focus event
+ * @method emitBlurEvent - Emits blur event
+ * @method emitChangeEvent - Emits change event
+ * @method connectedCallback - Lifecycle callback when component is connected to DOM
+ * @method disconnectedCallback - Lifecycle callback when component is disconnected from DOM
+ *
+ * @fires change - Fires when the textarea value changes
+ * @fires select - Fires when text is selected
+ * @fires focus - Fires when the textarea gains focus
+ * @fires blur - Fires when the textarea loses focus
+ * @fires textarea-submit - Fires when content is submitted
+ *
+ * @extends FASTElement
+ * @tagname fabric-textarea
+ * @public
+ */
+class Textarea extends FASTElement {
+  constructor() {
+    super(...arguments);
+    _Textarea_instances.add(this);
+    _Textarea_eventController.set(this, null);
+    this.svgColor = colorNeutralForeground4;
+    this.svgColorDisabled = colorNeutralForegroundDisabled;
+    /**
+     * ## disabled
+     *
+     * Puts the send button into a disabled state, where user input can still be inputed, but cannot be sent.
+     */
+    this.disabled = false;
+    /**
+     * ## maxLength
+     *
+     * sets the max allowed character count of the text area
+     */
+    this.maxLength = DEFAULT_MAX_CHARS;
+    /**
+     * ## characterOverflowBuffer
+     *
+     * sets the character overflow buffer for the text area
+     */
+    this.characterOverflowLength = DEFAULT_CHARACTER_OVERFLOW_BUFFER;
+    /**
+     * 33 showCharacterCount
+     *
+     * @public boolean
+     */
+    this.hideCharacterCount = false;
+    /**
+     * ## _characterCount
+     *
+     *
+     * the number of characters currently inputed into the text input
+     */
+    this.characterCount = 0;
+    /**
+     * ## buttons
+     *
+     * An array of html elements that have been slotted into the buttons slot
+     */
+    this.buttons = [];
+    /**
+     * ## messages
+     *
+     * An array of html elements that have been slotted into the messges area.
+     *
+     * When messages are slotted in, the hasMessages boolean is set to true and class names are added in the html template.
+     */
+    this.messages = [];
+    /**
+     * ## attachments
+     *
+     * An array of html elements slotted into the attachments area
+     */
+    this.attachments = [];
+    /**
+     * ## value
+     *
+     * The value of the current user input.
+     */
+    _Textarea__value.set(this, void 0);
+    /**
+     * ## handleTextareaKeydown
+     *
+     * @param inputRef to FluentTextField which is actually FASTTextField
+     *
+     */
+    _Textarea_handleTextareaInput.set(this, inputRef => {
+      if (inputRef) {
+        this.value = inputRef.value;
+      }
+    });
+    _Textarea_handleErrorRendering.set(this, exceedsCharLimit => {
+      if (exceedsCharLimit || this.hasAttribute(ERROR_EXCEEDS_CHAR_LIMIT_ATTRIBUTE)) {
+        __classPrivateFieldGet(this, _Textarea_instances, "m", _Textarea_setExceedsCharLimit).call(this, false);
+      } else if (this.exceedsMaxCharLimit) {
+        __classPrivateFieldGet(this, _Textarea_instances, "m", _Textarea_setExceedsCharLimit).call(this, true);
+      }
+    });
+    /**
+     * ## handleInput
+     *
+     * Handles input events for the textarea control that's nested inside the fabric-textarea
+     *
+     * @param event - Event
+     * @private
+     */
+    _Textarea_handleInput.set(this, () => {
+      __classPrivateFieldGet(this, _Textarea_handleTextareaInput, "f").call(this, this.inputRef);
+    });
+    /**
+     * ## attachTextareaEvents
+     *
+     * adds event handlers for the DOM textarea in the shadowRoot
+     */
+    _Textarea_attachTextareaEventListeners.set(this, signal => {
+      var _a, _b, _c, _d, _e;
+      (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.addEventListener("blur", __classPrivateFieldGet(this, _Textarea_handleBlurEvent, "f"), signal ? {
+        signal
+      } : undefined);
+      (_b = this.inputRef) === null || _b === void 0 ? void 0 : _b.addEventListener("change", __classPrivateFieldGet(this, _Textarea_handleChangeEvent, "f"), signal ? {
+        signal
+      } : undefined);
+      (_c = this.inputRef) === null || _c === void 0 ? void 0 : _c.addEventListener("focus", __classPrivateFieldGet(this, _Textarea_handleFocusEvent, "f"), signal ? {
+        signal
+      } : undefined);
+      (_d = this.inputRef) === null || _d === void 0 ? void 0 : _d.addEventListener("select", __classPrivateFieldGet(this, _Textarea_handleSelectEvent, "f"), signal ? {
+        signal
+      } : undefined);
+      (_e = this.inputRef) === null || _e === void 0 ? void 0 : _e.addEventListener("input", __classPrivateFieldGet(this, _Textarea_handleInput, "f"), signal ? {
+        signal
+      } : undefined);
+    });
+    /**
+     * ## removeTextareaEvents
+     */
+    _Textarea_detachTextareaEventListeners.set(this, () => {
+      var _a;
+      (_a = __classPrivateFieldGet(this, _Textarea_eventController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+      __classPrivateFieldSet(this, _Textarea_eventController, null, "f");
+    });
+    /**
+     * ## emitSubmitEvent
+     *
+     * Emits a TextareaSubmitEvent
+     */
+    _Textarea_emitSubmitEvent.set(this, () => {
+      this.dispatchEvent(new CustomEvent(TextareaEventNames.submit, {
+        detail: {
+          target: this,
+          value: this.value || ""
+        },
+        bubbles: true,
+        composed: true
+      }));
+    });
+    /**
+     * ## handleSelectEvent
+     *
+     * Handles select events for the textarea control that's nested inside the fabric-textarea
+     *
+     * @public
+     */
+    _Textarea_handleSelectEvent.set(this, () => {
+      __classPrivateFieldGet(this, _Textarea_emitSelectEvent, "f").call(this);
+    });
+    /**
+     * ## handleFocusEvent
+     *
+     * Handles focus events for the textarea control that's nested inside the fabric-textarea
+     *
+     * @public
+     */
+    _Textarea_handleFocusEvent.set(this, () => {
+      __classPrivateFieldGet(this, _Textarea_instances, "m", _Textarea_removeErrorMessage).call(this);
+      __classPrivateFieldGet(this, _Textarea_emitFocusEvent, "f").call(this);
+    });
+    /**
+     * ## handleBlurEvent
+     *
+     * Handles blur events for the textarea control that's nested inside the fabric-textarea
+     *
+     * @public
+     */
+    _Textarea_handleBlurEvent.set(this, () => {
+      __classPrivateFieldGet(this, _Textarea_instances, "m", _Textarea_removeErrorMessage).call(this);
+      __classPrivateFieldGet(this, _Textarea_emitBlurEvent, "f").call(this);
+    });
+    /**
+     * ## handleChangeEvent
+     *
+     * Handles change events for the textarea control that's nested inside the fabric-textarea
+     *
+     * @public
+     */
+    _Textarea_handleChangeEvent.set(this, () => {
+      __classPrivateFieldGet(this, _Textarea_emitChangeEvent, "f").call(this);
+    });
+    /**
+     * ## emitSelectEvent
+     *
+     * Emits a focus event
+     */
+    _Textarea_emitSelectEvent.set(this, () => {
+      this.dispatchEvent(new CustomEvent("select", {
+        detail: {
+          target: this,
+          value: this.value || ""
+        },
+        bubbles: true,
+        composed: true
+      }));
+    });
+    /**
+     * ## emitFocusEvent
+     *
+     * Emits a focus event
+     */
+    _Textarea_emitFocusEvent.set(this, () => {
+      this.dispatchEvent(new CustomEvent("focus", {
+        detail: {
+          target: this,
+          value: this.value || ""
+        },
+        bubbles: true,
+        composed: true
+      }));
+    });
+    /**
+     * ## emitBlurEvent
+     *
+     * Emits a blur event
+     */
+    _Textarea_emitBlurEvent.set(this, () => {
+      this.dispatchEvent(new CustomEvent("blur", {
+        detail: {
+          target: this,
+          value: this.value || ""
+        },
+        bubbles: true,
+        composed: true
+      }));
+    });
+    /**
+     * ## emitChangeEvent
+     * Emits a change event
+     */
+    _Textarea_emitChangeEvent.set(this, () => {
+      this.dispatchEvent(new CustomEvent("change", {
+        detail: {
+          target: this,
+          value: this.value || ""
+        },
+        bubbles: true,
+        composed: true
+      }));
+    });
+    /**
+     *
+     * ## handleSubmitButton
+     *
+     * called when the submit button is pressed
+     *
+     * @param event
+     */
+    _Textarea_handleSubmitButton.set(this, () => {
+      if (this.disabled) return;
+      __classPrivateFieldGet(this, _Textarea_emitSubmitEvent, "f").call(this);
+      this.blur();
+    });
+    /**
+     * ## handleKeydown
+     *
+     * handles keydown events for the root textarea element
+     */
+    _Textarea_handleKeydown.set(this, event => {
+      if (this.disabled) {
+        return;
+      }
+      // blur on escape
+      if (event.key === "Escape") {
+        this.blur();
+      }
+      // send message on ctrl/cmd enter
+      if (isActionModifierKey(event) && event.key === "Enter") {
+        __classPrivateFieldGet(this, _Textarea_handleSubmitButton, "f").call(this);
+      }
+    });
+  }
+  disabledChanged() {
+    var _a;
+    (_a = this.submitButton) === null || _a === void 0 ? void 0 : _a.forEach(button => {
+      button.disabled = this.disabled;
+    });
+  }
+  exceedsMaxCharLimitChanged(next, prev) {
+    if (next !== prev) {
+      __classPrivateFieldGet(this, _Textarea_handleErrorRendering, "f").call(this, next);
+    }
+  }
+  submitButtonChanged(_prev, next) {
+    var _a;
+    const signal = (_a = __classPrivateFieldGet(this, _Textarea_eventController, "f")) === null || _a === void 0 ? void 0 : _a.signal;
+    (next !== null && next !== void 0 ? next : []).forEach(button => {
+      button.addEventListener("click", __classPrivateFieldGet(this, _Textarea_handleSubmitButton, "f"), signal ? {
+        signal
+      } : undefined);
+    });
+  }
+  buttonsChanged() {
+    Updates.enqueue(() => {
+      if (!this.buttons || this.buttons.length === 0) {
+        this.style.setProperty("--divider-visibility", "none");
+      } else {
+        this.style.setProperty("--divider-visibility", "visible");
+      }
+    });
+  }
+  messagesChanged() {
+    Updates.enqueue(() => {
+      if (this.messages && this.messages.length > 0 && !this.hasAttachments) {
+        this.style.setProperty("--messages-row-margin-bottom", `${spacingVerticalXS}`);
+      }
+    });
+  }
+  attachmentsChanged() {
+    this.hasAttachments = this.attachments.length > 0;
+  }
+  get value() {
+    return __classPrivateFieldGet(this, _Textarea__value, "f");
+  }
+  set value(newValue) {
+    if (__classPrivateFieldGet(this, _Textarea__value, "f") === newValue) {
+      return;
+    }
+    __classPrivateFieldSet(this, _Textarea__value, newValue || "", "f");
+    this.setAttribute("data-value", newValue || "");
+    this.characterCount = (newValue === null || newValue === void 0 ? void 0 : newValue.length) || 0;
+    if (this.inputRef) {
+      this.inputRef.value = newValue || "";
+    }
+    Updates.enqueue(() => {
+      var _a;
+      if (((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) && this.value.length > this.maxLength) {
+        this.exceedsMaxCharLimit = true;
+      } else {
+        this.exceedsMaxCharLimit = false;
+        __classPrivateFieldGet(this, _Textarea_instances, "m", _Textarea_removeErrorMessage).call(this);
+      }
+    });
+    __classPrivateFieldGet(this, _Textarea_handleChangeEvent, "f").call(this);
+    // resize text area height when height changes due to more characters
+    __classPrivateFieldGet(this, _Textarea_instances, "m", _Textarea_handleTextareaHeight).call(this);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    __classPrivateFieldGet(this, _Textarea_instances, "m", _Textarea_attachListeners).call(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __classPrivateFieldGet(this, _Textarea_detachTextareaEventListeners, "f").call(this);
+    __classPrivateFieldGet(this, _Textarea_instances, "m", _Textarea_detachKeyEventListeners).call(this);
+  }
+}
+_Textarea_eventController = new WeakMap(), _Textarea__value = new WeakMap(), _Textarea_handleTextareaInput = new WeakMap(), _Textarea_handleErrorRendering = new WeakMap(), _Textarea_handleInput = new WeakMap(), _Textarea_attachTextareaEventListeners = new WeakMap(), _Textarea_detachTextareaEventListeners = new WeakMap(), _Textarea_emitSubmitEvent = new WeakMap(), _Textarea_handleSelectEvent = new WeakMap(), _Textarea_handleFocusEvent = new WeakMap(), _Textarea_handleBlurEvent = new WeakMap(), _Textarea_handleChangeEvent = new WeakMap(), _Textarea_emitSelectEvent = new WeakMap(), _Textarea_emitFocusEvent = new WeakMap(), _Textarea_emitBlurEvent = new WeakMap(), _Textarea_emitChangeEvent = new WeakMap(), _Textarea_handleSubmitButton = new WeakMap(), _Textarea_handleKeydown = new WeakMap(), _Textarea_instances = new WeakSet(), _Textarea_removeErrorMessage = function _Textarea_removeErrorMessage() {
+  if (!this.exceedsMaxCharLimit) {
+    __classPrivateFieldGet(this, _Textarea_instances, "m", _Textarea_setExceedsCharLimit).call(this, false);
+  }
+}, _Textarea_setExceedsCharLimit = function _Textarea_setExceedsCharLimit(exceeds) {
+  if (exceeds) {
+    this.setAttribute(ERROR_EXCEEDS_CHAR_LIMIT_ATTRIBUTE, "true");
+  } else {
+    this.removeAttribute(ERROR_EXCEEDS_CHAR_LIMIT_ATTRIBUTE);
+  }
+}, _Textarea_attachListeners = function _Textarea_attachListeners() {
+  var _a;
+  (_a = __classPrivateFieldGet(this, _Textarea_eventController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+  __classPrivateFieldSet(this, _Textarea_eventController, new AbortController(), "f");
+  const signal = __classPrivateFieldGet(this, _Textarea_eventController, "f").signal;
+  __classPrivateFieldGet(this, _Textarea_attachTextareaEventListeners, "f").call(this, signal);
+  __classPrivateFieldGet(this, _Textarea_instances, "m", _Textarea_attachKeyEventListeners).call(this, signal);
+}, _Textarea_handleTextareaHeight = function _Textarea_handleTextareaHeight() {
+  if (this.inputRef) {
+    if (this.inputRef.style.height !== "20px") {
+      this.inputRef.style.height = "20px";
+    }
+    const newHeight = `${this.inputRef.scrollHeight}px`;
+    if (this.inputRef.style.height !== newHeight) {
+      this.inputRef.style.height = newHeight;
+    }
+  }
+}, _Textarea_attachKeyEventListeners = function _Textarea_attachKeyEventListeners(signal) {
+  this.addEventListener("keydown", __classPrivateFieldGet(this, _Textarea_handleKeydown, "f"), signal ? {
+    signal
+  } : undefined);
+}, _Textarea_detachKeyEventListeners = function _Textarea_detachKeyEventListeners() {
+  var _a;
+  (_a = __classPrivateFieldGet(this, _Textarea_eventController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+  __classPrivateFieldSet(this, _Textarea_eventController, null, "f");
+};
+__decorate([attr({
+  mode: "boolean"
+})], Textarea.prototype, "disabled", void 0);
+__decorate([attr({
+  attribute: "max-length",
+  converter: nullableNumberConverter
+})], Textarea.prototype, "maxLength", void 0);
+__decorate([attr({
+  attribute: "character-overflow-length",
+  converter: nullableNumberConverter
+})], Textarea.prototype, "characterOverflowLength", void 0);
+__decorate([attr], Textarea.prototype, "placeholder", void 0);
+__decorate([attr({
+  attribute: "hide-character-count",
+  mode: "boolean"
+})], Textarea.prototype, "hideCharacterCount", void 0);
+__decorate([attr], Textarea.prototype, "name", void 0);
+__decorate([observable], Textarea.prototype, "exceedsMaxCharLimit", void 0);
+__decorate([observable], Textarea.prototype, "characterCount", void 0);
+__decorate([observable], Textarea.prototype, "submitButton", void 0);
+__decorate([observable], Textarea.prototype, "buttons", void 0);
+__decorate([observable], Textarea.prototype, "messages", void 0);
+__decorate([observable], Textarea.prototype, "hasAttachments", void 0);
+__decorate([observable], Textarea.prototype, "attachments", void 0);
+
+export { Textarea };

package/esm/components/textarea/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../../src/components/textarea/textarea.ts"],"names":[],"mappings":"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"}

package/esm/components/textarea/textarea.options.js

@@ -0,0 +1,32 @@
+import '@fluentui/web-components';
+import './textarea.js';
+
+/**
+ * Default maximum number of characters allowed in the textarea
+ * @public
+ */
+const DEFAULT_MAX_CHARS = 500;
+/**
+ * Default overflow characters allowed in the textarea
+ * @public
+ */
+const DEFAULT_CHARACTER_OVERFLOW_BUFFER = DEFAULT_MAX_CHARS * 0.2;
+/**
+ * Default error message shown when character limit is exceeded
+ * @public
+ */
+const DEFAULT_ERROR_MESSAGE = "You've exceeded the maximum number of words we can process. Try reducing your text.";
+/**
+ * Attribute to show error when character limit is exceeded
+ * @public
+ */
+const ERROR_EXCEEDS_CHAR_LIMIT_ATTRIBUTE = "data-exceeds-char-limit";
+/**
+ * Textarea event names
+ * @public
+ */
+const TextareaEventNames = {
+  submit: "textarea-submit"
+};
+
+export { DEFAULT_CHARACTER_OVERFLOW_BUFFER, DEFAULT_ERROR_MESSAGE, DEFAULT_MAX_CHARS, ERROR_EXCEEDS_CHAR_LIMIT_ATTRIBUTE, TextareaEventNames };

package/esm/components/textarea/textarea.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.options.js","sourceRoot":"","sources":["../../../../src/components/textarea/textarea.options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAC;AAErC;;;GAGG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG,iBAAiB,GAAG,GAAG,CAAC;AAEzE;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAChC,qFAAqF,CAAC;AAExF;;;GAGG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,yBAAyB,CAAC;AAY5E;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,MAAM,EAAE,iBAAiB;CACjB,CAAC"}

package/esm/components/textarea/textarea.styles.js

@@ -0,0 +1,13 @@
+import { fontFamilyBase, fontSizeBase300, fontWeightRegular, lineHeightBase300, fontSizeBase100, lineHeightBase100, spacingVerticalXS, colorNeutralBackground1, colorNeutralStroke1, borderRadiusLarge, spacingVerticalM, spacingHorizontalS, spacingVerticalSNudge, colorNeutralForeground1, colorNeutralForeground2, colorNeutralBackground5, colorNeutralForegroundDisabled, colorNeutralStrokeDisabled, colorNeutralForeground4, spacingHorizontalXS, colorPaletteRedForeground1, spacingVerticalS, colorNeutralStroke2, colorNeutralStroke1Hover, colorNeutralStrokeAccessibleHover, colorNeutralStroke1Pressed, durationNormal, curveDecelerateMid, colorCompoundBrandStrokePressed, colorCompoundBrandStroke, durationUltraFast, curveAccelerateMid, display } from '@fluentui/web-components';
+import { sizeVerticalXL, sizeHorizontalM, sizeVerticalXXXL, sizeHorizontalXXXL, sizeVerticalXXL } from '@fabric-msft/theme';
+import { css } from '@microsoft/fast-element';
+
+const styles = css`
+  ${display("flex")}
+
+  :host{width:100%;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300}}:host .textarea-container{width:100%;min-width:288px;max-width:587px;max-height:272px;}:host .messages-row{font-size:${fontSizeBase100};line-height:${lineHeightBase100};font-weight:${fontWeightRegular};display:inline-block;flex:0 0 auto;width:100%;margin-bottom:var(--messages-row-margin-bottom);margin-top:${spacingVerticalXS}}:host .textarea-root{display:flex;flex-direction:row;position:relative;flex-wrap:wrap;flex:0 0 auto;width:100%;padding-inline-start:0px;gap:0;font-family:${fontFamilyBase};background-color:${colorNeutralBackground1};border:1px solid ${colorNeutralStroke1};max-width:unset;min-height:76px;border-radius:${borderRadiusLarge};padding:${spacingVerticalM} ${spacingHorizontalS} ${spacingVerticalSNudge};box-sizing:border-box}:host .labels{flex:0 0 auto;width:100%}:host textarea.textarea{font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};color:${colorNeutralForeground1};border:none;outline:none;padding:0;margin:0;resize:none;background-color:transparent;width:100%;height:${sizeVerticalXL};max-height:252px;padding:0px ${spacingVerticalXS};margin-bottom:${spacingVerticalXS};scrollbar-color:${colorNeutralForeground2} ${colorNeutralBackground5};scrollbar-width:thin}:host([disabled]),:host([disabled]) .interactions-row .interactions-left-col .character-count{pointer-events:none;color:${colorNeutralForegroundDisabled}}:host([disabled]) textarea{pointer-events:none}:host([disabled]) textarea.textarea::placeholder,:host([disabled]) textarea.textarea{border-color:${colorNeutralStrokeDisabled};color:${colorNeutralForegroundDisabled}}:host textarea.textarea::placeholder{color:${colorNeutralForeground4}}:host .interactions-row .interactions-left-col .character-count,:host .messages-row .messages,:host ::slotted([slot="end"]){font-size:${fontSizeBase100};line-height:${lineHeightBase100};font-weight:${fontWeightRegular};display:inline-block}:host .interactions-row .interactions-left-col .character-count{margin:0px ${spacingHorizontalXS};color:${colorNeutralForeground4}}:host([hide-character-count])
+    .interactions-row
+    .interactions-left-col
+    .character-count{display:none}:host(:not([data-exceeds-char-limit])) .error-message-container{display:none}:host .error-message-container{display:flex;justify-content:space-between;align-items:flex-start}:host .error-message-container svg{min-width:${sizeHorizontalM};margin-inline-end:2px;padding-top:1px}:host .error-message-container .error-message{display:block;color:${colorPaletteRedForeground1}}:host .attachments-row{display:flex;width:100%;padding:0px ${spacingHorizontalXS}}:host ::slotted([slot="end"]){color:${colorNeutralForeground4};margin-top:${spacingVerticalS};display:block}:host .interactions-row{display:flex;width:100%}:host .interactions-row .interactions-center-col,:host .interactions-row .interactions-right-col,:host .interactions-row .interactions-left-col{height:${sizeVerticalXXXL};min-width:${sizeHorizontalXXXL};flex-grow:0;display:flex;align-items:center;flex-direction:row}:host .interactions-row .interactions-left-col{flex-grow:1}:host .interactions-row .interactions-right-col fabric-button::part(control){min-width:unset;padding:${spacingVerticalSNudge}}:host .interactions-right-col .divider{margin:0px 4px;border-inline-end:1px solid ${colorNeutralStroke2};height:${sizeVerticalXXL};display:var(--divider-visibility)}:host(:not([disabled]):hover) .textarea-root{border-color:${colorNeutralStroke1Hover};border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(:not([disabled]):active) .textarea-root{border-color:${colorNeutralStroke1Pressed}}:host(:not([disabled]):focus-within) .textarea-root{outline:transparent solid 2px;border-bottom:0}:host(:not([disabled]):focus-within) .textarea-root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host(:not([disabled]):focus-within:active) .textarea-root::after{border-bottom-color:${colorCompoundBrandStrokePressed}}:host(:not([disabled])) .textarea-root::after{box-sizing:border-box;content:"";position:absolute;inset-inline-start:-1px;bottom:0px;inset-inline-end:-1px;height:max(2px,${borderRadiusLarge});border-radius:0 0 ${borderRadiusLarge} ${borderRadiusLarge};border-bottom:2px solid ${colorCompoundBrandStroke};clip-path:inset(calc(100% - 2px) 1px 0px);transform:scaleX(0);transition-property:transform;transition-duration:${durationUltraFast};transition-delay:${curveAccelerateMid};pointer-events:none}:host(:not([disabled]),:focus-within) .textarea-root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}`;
+
+export { styles };

package/esm/components/textarea/textarea.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.styles.js","sourceRoot":"","sources":["../../../../src/components/textarea/textarea.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,mBAAmB,EACnB,0BAA0B,EAC1B,cAAc,EACd,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,gBAAgB,EAChB,gBAAgB,EAChB,qBAAqB,EACrB,iBAAiB,EACjB,OAAO,EACP,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,wBAAwB,EACxB,kBAAkB,EAClB,cAAc,EACd,+BAA+B,EAC/B,0BAA0B,EAC1B,iCAAiC,EACjC,wBAAwB,EACxB,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,0BAA0B,EAC1B,8BAA8B,EAC/B,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,eAAe,EACf,gBAAgB,EACjB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;mBAIA,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;;;;;;;iBAWnB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;kBAKlB,iBAAiB;;;;;;;;;;;;mBAYhB,cAAc;wBACT,uBAAuB;wBACvB,mBAAmB;;;qBAGtB,iBAAiB;eACvB,gBAAgB,IAAI,kBAAkB,IAAI,qBAAqB;;;;;;;;;;mBAU3D,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;aACvB,uBAAuB;;;;;;;;cAQtB,cAAc;;mBAET,iBAAiB;qBACf,iBAAiB;uBACf,uBAAuB,IAAI,uBAAuB;;;;;;;aAO5D,8BAA8B;;;;;;;;;oBASvB,0BAA0B;aACjC,8BAA8B;;;;aAI9B,uBAAuB;;;;;;iBAMnB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;kBAKlB,mBAAmB;aACxB,uBAAuB;;;;;;;;;;;;;;;;;;;;;iBAqBnB,eAAe;;;;;;;aAOnB,0BAA0B;;;;;;mBAMpB,mBAAmB;;;;aAIzB,uBAAuB;kBAClB,gBAAgB;;;;;;;;;;;;cAYpB,gBAAgB;iBACb,kBAAkB;;;;;;;;;;;;;eAapB,qBAAqB;;;;;mCAKD,mBAAmB;cACxC,eAAe;;;;;oBAKT,wBAAwB;2BACjB,iCAAiC;;;oBAGxC,0BAA0B;;;;;;;;;;2BAUnB,cAAc;wBACjB,kBAAkB;;;2BAGf,+BAA+B;;;;;;;;;;uBAUnC,iBAAiB;yBACf,iBAAiB,IAAI,iBAAiB;+BAChC,wBAAwB;;;;2BAI5B,iBAAiB;wBACpB,kBAAkB;;;;;;;2BAOf,cAAc;wBACjB,kBAAkB;;CAEzC,CAAC"}

package/esm/components/textarea/textarea.template.js

@@ -0,0 +1,20 @@
+import { html, ref, slotted } from '@microsoft/fast-element';
+import { staticallyCompose } from '@fabric-msft/fabric-web';
+import { DEFAULT_ERROR_MESSAGE } from './textarea.options.js';
+
+const errorCircleSVG = html`<svg xmlns="http://www.w3.org/2000/svg" width="13" height="12" viewBox="0 0 13 12" fill="none"><path d="M6.66675 11C9.42817 11 11.6667 8.76142 11.6667 6C11.6667 3.23858 9.42817 1 6.66675 1C3.90532 1 1.66675 3.23858 1.66675 6C1.66675 8.76142 3.90532 11 6.66675 11ZM5.91675 8.25C5.91675 7.83579 6.25253 7.5 6.66675 7.5C7.08096 7.5 7.41675 7.83579 7.41675 8.25C7.41675 8.66421 7.08096 9 6.66675 9C6.25253 9 5.91675 8.66421 5.91675 8.25ZM6.1748 3.41012C6.21714 3.17688 6.42129 3 6.66675 3C6.91221 3 7.11636 3.17688 7.15869 3.41012L7.16675 3.5V6L7.15869 6.08988C7.11636 6.32312 6.91221 6.5 6.66675 6.5C6.42129 6.5 6.21714 6.32312 6.1748 6.08988L6.16675 6V3.5L6.1748 3.41012Z" fill="currentColor" /></svg>`;
+/**
+ * The template for the Textarea component.
+ * @public
+ */
+function TextareaTemplate(options = {}) {
+  return html`<template role="group"><div class="textarea-container"><div class="textarea-root" part="textarea-root"><textarea ${ref("inputRef")} class="textarea" maxlength="${x => x.maxLength + x.characterOverflowLength}" placeholder="${x => x.placeholder}" ?disabled="${x => x.disabled}" part="textarea-element" :value="${x => x.value || ""}" name="${x => {
+    var _a;
+    return (_a = x.name) !== null && _a !== void 0 ? _a : "";
+  }}" aria-invalid="${x => x.exceedsMaxCharLimit ? "true" : "false"}"></textarea><div class="messages-row" part="messages-row"><slot name="messages" part="messages" ${slotted("messages")}></slot><div class="error-message-container">${errorCircleSVG}<slot class="error-message" name="error-message">${staticallyCompose(options.errorMessage)}</slot></div></div><div class="attachments-row" part="attachments-row" aria-expanded="${x => x.hasAttachments}"><slot name="attachments" ${slotted("attachments")}></slot></div><div class="interactions-row" part="interactions-row"><div class="interactions-left-col" part="interactions-left-col"><div part="character-count" class="character-count">${x => x.characterCount}/${x => x.maxLength}</div></div><div class="interactions-center-col" part="interactions-center-col"><slot name="buttons" ${slotted("buttons")}></slot></div><div class="interactions-right-col" part="interactions-right-col"><div class="divider" part="divider"></div><slot name="submit-button" ${slotted("submitButton")}></slot></div></div></div><slot name="end"></slot></div></template>`;
+}
+const template = TextareaTemplate({
+  errorMessage: DEFAULT_ERROR_MESSAGE
+});
+
+export { TextareaTemplate, template };

package/esm/components/textarea/textarea.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.template.js","sourceRoot":"","sources":["../../../../src/components/textarea/textarea.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAI7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,MAAM,cAAc,GAAG,IAAI,CAAA;;;;;;;;;;;;;CAa1B,CAAC;AAEF;;;GAGG;AACH,MAAM,UAAU,gBAAgB,CAC9B,UAA2B,EAAE;IAE7B,OAAO,IAAI,CAAG;;;;;cAKF,GAAG,CAAC,UAAU,CAAC;;yBAEJ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,GAAG,CAAC,CAAC,uBAAuB;2BAC5C,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW;yBACtB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;;sBAEpB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE;oBACtB,CAAC,CAAC,EAAE,EAAE,WAAC,OAAA,MAAA,CAAC,CAAC,IAAI,mCAAI,EAAE,CAAA,EAAA;4BACX,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;;;oDAGzB,OAAO,CAAC,UAAU,CAAC;;gBAEvD,cAAc;;kBAEZ,iBAAiB,CAAC,OAAO,CAAC,YAAY,CAAC;;;;;;;;6BAQ5B,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc;;uCAEb,OAAO,CAAC,aAAa,CAAC;;;;;;kBAM3C,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS;;;;;qCAK1B,OAAO,CAAC,SAAS,CAAC;;;;;2CAKZ,OAAO,CAAC,cAAc,CAAC;;;;;;;GAO/D,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAkC,gBAAgB,CAAC;IACtE,YAAY,EAAE,qBAAqB;CACpC,CAAC,CAAC"}