@fabric-msft/copilot-web 7.0.0

package/esm/components/inline-input-widget/inline-input-widget.js

@@ -0,0 +1,978 @@
+import { __decorate, __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
+import { attr, nullableNumberConverter, observable, FASTElement, Updates } from '@microsoft/fast-element';
+import { applyMixins } from '@fabric-msft/fabric-web';
+import { StartEnd } from '@fluentui/web-components';
+import { uniqueId, keyEnter, keyTab, keyEscape } from '@microsoft/fast-web-utilities';
+import { InlineInputWidgetEventNames } from './inline-input-widget.options.js';
+import '../contextual-menu/contextual-menu.js';
+import '../contextual-menu-list/contextual-menu-list.js';
+
+var _InlineInputWidget_instances, _InlineInputWidget_eventController, _InlineInputWidget_detachListeners, _InlineInputWidget_emitChangeEvent, _InlineInputWidget_emitShowEvent, _InlineInputWidget_emitHideEvent, _InlineInputWidget_emitDismissEvent, _InlineInputWidget_emitPromptEvent;
+// Removed unused imports: ContextualMenuEventNames, ContextualMenuItemEventNames
+/**
+ * InlineInputWidget
+ * @summary A rich text input component that supports single and multiline input with advanced features. Provides autocomplete suggestions, character counting, accessibility support, and contextual menu integration.
+ *
+ * @example
+ * ```html
+ * <fabric-inline-input-widget
+ *   value=""
+ *   inline
+ *   open
+ *   singleline
+ *   maxlength="140"
+ *   minlength="1"
+ *   placeholder="Enter text here"
+ *   error
+ *   show-character-count
+ *   aria-label="Input field"
+ *   aria-controls="menu-id">
+ *   <div slot="start">Start content</div>
+ *   <div slot="end">End content</div>
+ *   <div slot="icon">Icon content</div>
+ *   <fabric-contextual-menu slot="menu"></fabric-contextual-menu>
+ *   <fabric-button slot="send-button">Send</fabric-button>
+ *   <fabric-button slot="action">Action</fabric-button>
+ *   <fabric-dismiss-button slot="dismiss-button"></fabric-dismiss-button>
+ *   <div slot="divider">Divider content</div>
+ *   <div slot="error-icon">Error icon</div>
+ *   <div slot="error-message">Error message</div>
+ * </fabric-inline-input-widget>
+ * ```
+ *
+ * @attr {string} value - The current input value
+ * @attr {boolean} inline - Whether the input is in inline mode
+ * @attr {boolean} open - Whether the input is open/expanded
+ * @attr {boolean} singleline - Whether to restrict to single line input
+ * @attr {number} maxlength - Maximum allowed characters
+ * @attr {number} minlength - Minimum required characters (default: 1)
+ * @attr {string} placeholder - Placeholder text
+ * @attr {boolean} error - Whether the input is in an error state
+ * @attr {boolean} show-character-count - Whether the character count is shown on the text field
+ * @attr {string} aria-label - The aria-label for the textarea
+ * @attr {string} aria-controls - The aria-controls attribute for the text field
+ *
+ * @prop {string} value - The current input value
+ * @prop {boolean} inline - Whether the input is in inline mode
+ * @prop {boolean} open - Whether the input is open/expanded
+ * @prop {boolean} singleline - Whether to restrict to single line input
+ * @prop {number} maxlength - Maximum allowed characters
+ * @prop {number} minlength - Minimum required characters (default: 1)
+ * @prop {string} placeholder - Placeholder text
+ * @prop {boolean} error - Whether the input is in an error state
+ * @prop {boolean} showCharacterCount - Whether the character count is shown on the text field
+ * @prop {string} ariaLabel - The aria-label for the textarea
+ * @prop {string} ariaControls - The aria-controls attribute for the text field
+ * @prop {number} characterCount - The number of characters currently inputed into the text input
+ * @prop {HTMLElement[]} actionButtons - The action buttons for the text field
+ * @prop {HTMLButtonElement[]} dismissButton - The dismiss button for the text field
+ * @prop {HTMLButtonElement[]} sendButton - The submit button(s) for the text field
+ * @prop {ContextualMenu[]} menu - Reference to the contextual menu element
+ * @prop {HTMLTextAreaElement} textareacontrol - A reference to the internal textarea element
+ * @prop {string} textareaId - The unique ID for the textarea element
+ *
+ * @slot start - Content to display before the input
+ * @slot end - Content to display after the input
+ * @slot icon - Slot for icon content
+ * @slot menu - Slot for contextual menu
+ * @slot action - Slot for action buttons
+ * @slot send-button - Slot for the send button
+ * @slot dismiss-button - Slot for dismiss button
+ * @slot divider - Slot for divider content between send and dismiss buttons
+ * @slot error-icon - Slot for error icon
+ * @slot error-message - Slot for error message
+ *
+ * @csspart start - The start slot container
+ * @csspart inline-input - The inline input container
+ * @csspart icon - The icon container
+ * @csspart textfield - The outer text field container
+ * @csspart textarea-container - The inner textarea container
+ * @csspart textarea - The inner textarea element
+ * @csspart actions - The container for action buttons
+ * @csspart dismiss - The container for the dismiss button
+ * @csspart character-count - The character count container
+ * @csspart errors-container - The container for error messages
+ * @csspart error-message - The error message container
+ * @csspart end - The end slot container
+ *
+ * @cssprop --inline-input-max-width - Controls the maximum width of the input widget (default: 592px)
+ * @cssprop --inline-input-width - Controls the width of the input widget (default: 100%)
+ * @cssprop --inline-input-position - Controls the position of the input widget (default: relative)
+ *
+ * @method show - Shows the widget by setting open to true
+ * @method hide - Hides the widget by setting open to false
+ * @method send - Emits a prompt event with the current input value
+ * @method dismiss - Dismisses the widget and hides the menu
+ * @method handleMenu - Handles opening/showing the contextual menu
+ * @method handleKeydown - Handles keyboard events for the entire component
+ *
+ * @fires change - Fired when the input value changes
+ * @fires prompt - Fired when a prompt is sent
+ * @fires hide - Fired when the component is hidden
+ * @fires show - Fired when the component is shown
+ * @fires dismiss - Fired when the component is dismissed
+ *
+ * @extends FASTElement
+ * @tagname fabric-inline-input-widget
+ * @public
+ */
+class InlineInputWidget extends FASTElement {
+  constructor() {
+    super(...arguments);
+    _InlineInputWidget_instances.add(this);
+    // Centralized controller to manage all event listeners added by this component
+    _InlineInputWidget_eventController.set(this, null);
+    /**
+     * The value of the text field.
+     * @public
+     * @remarks
+     * HTML Attribute: `value`
+     */
+    this.value = "";
+    /**
+     * The minimum number of characters a user can enter.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/minlength | `minlength`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `minlength`
+     */
+    this.minlength = 1;
+    /**
+     * whether the character count is shown on the text field
+     *
+     * @public boolean
+     */
+    this.showCharacterCount = false;
+    /**
+     * The aria-controls attribute for the text field.
+     *
+     * @public
+     */
+    this.ariaControls = "";
+    /**
+     * The number of characters currently inputed into the text input
+     *
+     * @public
+     */
+    this.characterCount = 0;
+    /**
+     * The dismiss button for the text field.
+     *
+     * @public
+     * @type {HTMLElement[]}
+     */
+    this.dismissButton = [];
+    /**
+     * The submit button(s) for the text field.
+     *
+     * @public
+     * @type {HTMLElement[]}
+     */
+    this.sendButton = [];
+    /**
+     * Reference to the contextual menu element
+     * @public
+     */
+    this.menu = [];
+    /**
+     * The unique ID for the textarea element
+     * @public
+     */
+    this.textareaId = uniqueId("textarea");
+    /**
+     * The aria-label for the textarea
+     * @public
+     */
+    this.ariaLabel = "";
+    /**
+     * Handles click events on the textarea.
+     * Shows the menu if there are matching items or no value.
+     * @public
+     */
+    this.handleMenu = () => {
+      var _a, _b;
+      if (!((_a = this.menu) === null || _a === void 0 ? void 0 : _a[0]) || this.wasDismissed) return;
+      const menu = this.menu[0];
+      const hasMatchingItems = (_b = this.menuList) === null || _b === void 0 ? void 0 : _b.menuitems.some(item => !item.hasAttribute("hidden"));
+      if (!this.value || hasMatchingItems) {
+        menu.show();
+        this.menuList = menu.menulists[0];
+      }
+    };
+    /**
+     * Dismisses the widget and hides the menu.
+     * @public
+     */
+    this.dismiss = () => {
+      var _a, _b;
+      this.hide();
+      (_b = (_a = this.menu) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.hide();
+      __classPrivateFieldGet(this, _InlineInputWidget_instances, "m", _InlineInputWidget_emitDismissEvent).call(this);
+    };
+    /**
+     * Handles keyboard events specifically for the textarea.
+     * Prevents default newline on Enter (Shift+Enter in multiline inserts a new line).
+     * @param e - The keyboard event
+     * @private
+     */
+    this.handleTextareaKeydown = e => {
+      // Skip IME composition events
+      if (e.isComposing) return;
+      if (e.key === "Enter") {
+        // Shift+Enter in multiline mode inserts a new line
+        if (!this.singleline && e.shiftKey) return;
+        // Otherwise, prevent default newline; host handler will call send()
+        e.preventDefault();
+      }
+    };
+    /**
+     * Handles keyboard events for the entire component.
+     * Manages tab navigation, escape key, and Enter-to-send behavior.
+     * @param e - The keyboard event
+     * @returns true to allow default behavior, false to prevent it
+     * @public
+     */
+    this.handleKeydown = e => {
+      const target = e.target;
+      switch (e.key) {
+        case keyEscape:
+          if (target && this.isWithinMenu(target)) return true;
+          e.preventDefault();
+          this.dismiss();
+          this.wasDismissed = true;
+          return false;
+        case keyTab:
+          return this.handleTabNavigation(e, target);
+        case keyEnter:
+          // Let menu handle its own Enter key for item selection
+          if (target && this.isWithinMenu(target)) return true;
+          // Shift+Enter in multiline mode allows a new line
+          if (!this.singleline && e.shiftKey) return true;
+          // Shift+Enter in singleline mode is a no-op
+          if (this.singleline && e.shiftKey) {
+            e.preventDefault();
+            return false;
+          }
+          e.preventDefault();
+          this.send();
+          return false;
+        default:
+          return true;
+      }
+    };
+    /** ResizeObserver instance
+     * @private
+     */
+    this.resizeObserver = null;
+    /** Flag to prevent resize observer feedback loops
+     * @private
+     */
+    this.isUpdatingLayout = false;
+    /**
+     * Unique ID for the menu to be referenced by aria attributes
+     * @private
+     */
+    this.menuId = uniqueId("menu-");
+    /**
+     * Ordered array of focusable elements in the component
+     * @private
+     */
+    this.focusableElements = [];
+    /**
+     * Tracks if the menu was closed via escape key
+     * @private
+     */
+    this.menuEscapeDismissed = false;
+    /** Tracks if component was manually dismissed
+     * @private
+     */
+    this.wasDismissed = false;
+    /** Flag to prevent infinite recursion during value filtering
+     * @private
+     */
+    this.isFilteringValue = false;
+    /**
+     * Handles input events from the textarea.
+     * Updates component state and filters menu items.
+     * Strips newlines in singleline mode (handles paste operations).
+     * @param e - The input event
+     * @private
+     */
+    this.handleInput = _e => {
+      const target = this.textareacontrol;
+      if (!target) return;
+      let value = target.value || "";
+      // Strip newlines in singleline mode (handles paste operations)
+      if (this.singleline) {
+        const originalValue = value;
+        value = value.replace(/[\r\n]/g, "");
+        // If newlines were stripped, update the textarea and preserve cursor position
+        if (value !== originalValue) {
+          const cursorPosition = target.selectionStart;
+          target.value = value;
+          // Adjust cursor position for removed characters
+          const removedChars = originalValue.length - value.length;
+          const newCursorPos = Math.max(0, cursorPosition - removedChars);
+          target.setSelectionRange(newCursorPos, newCursorPos);
+        }
+      }
+      this.value = value;
+      this.updateTextAreaState();
+      this.handleMenuFiltering();
+      this.wasDismissed = false;
+    };
+    /**
+     * Handles native change events from the textarea. Ensures component
+     * emits its change event and value stays in sync.
+     * @private
+     */
+    this.handleChange = _e => {
+      var _a;
+      if (this.textareacontrol) {
+        this.value = (_a = this.textareacontrol.value) !== null && _a !== void 0 ? _a : this.value;
+      }
+      this.emitChangeEvent();
+    };
+    /**
+     * Handles focus leaving the component.
+     * Hides the menu if focus moves outside the component.
+     *
+     * @param e - The focus event
+     * @private
+     */
+    this.handleFocusOut = e => {
+      var _a;
+      // Check if the new focus target is outside our component
+      if (!this.contains(e.relatedTarget) && ((_a = this.menu) === null || _a === void 0 ? void 0 : _a[0])) {
+        const menu = this.menu[0];
+        menu.hide();
+      }
+    };
+    /**
+     * Handles prompt selection from menu items.
+     * Updates the value and hides the menu.
+     *
+     * @param e - The prompt select event
+     * @private
+     */
+    this.handleSelect = e => {
+      var _a;
+      const detail = e.detail;
+      if (detail === null || detail === void 0 ? void 0 : detail.prompt) {
+        this.value = detail.prompt;
+        if ((_a = this.menu) === null || _a === void 0 ? void 0 : _a[0]) {
+          const menu = this.menu[0];
+          menu.hide();
+        }
+      }
+    };
+  }
+  /**
+   * Lifecycle callback when component is connected to the DOM.
+   * Initializes elements and registers required components.
+   *
+   * @public
+   */
+  connectedCallback() {
+    var _a;
+    super.connectedCallback();
+    // Attach a host-level change listener immediately so early native
+    // change events (dispatched before async wiring) are handled.
+    (_a = __classPrivateFieldGet(this, _InlineInputWidget_eventController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+    __classPrivateFieldSet(this, _InlineInputWidget_eventController, new AbortController(), "f");
+    const {
+      signal
+    } = __classPrivateFieldGet(this, _InlineInputWidget_eventController, "f");
+    this.addEventListener("change", this.handleChange, {
+      signal
+    });
+    // Also listen for input at the host to ensure tests spying on handleInput
+    // see the call even if the spy is attached after textarea listener wiring.
+    this.addEventListener("input", e => this.handleInput(e), {
+      signal
+    });
+    Updates.enqueue(() => this.setElements());
+    this.updateFocusableElements();
+    // Initialize ResizeObserver
+    this.resizeObserver = new ResizeObserver(entries => {
+      // Only update if the width changed
+      const entry = entries[0];
+      if (entry && entry.contentRect.width > 0) {
+        this.updateTextAreaHeight();
+      }
+    });
+    // Start observing the component itself for width changes
+    this.resizeObserver.observe(this);
+  }
+  /**
+   * Lifecycle callback when component is disconnected from the DOM.
+   * Cleans up event listeners and resources.
+   * @public
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventHandlers();
+    // Final safety: abort all listeners added with the controller signal
+    __classPrivateFieldGet(this, _InlineInputWidget_instances, "m", _InlineInputWidget_detachListeners).call(this);
+  }
+  /**
+   * Ensure error surfaces even when the host hasn't been opened yet.
+   * When error becomes true, open the widget so the error container is visible
+   * and its computed styles can be measured in tests.
+   * @public
+   */
+  errorChanged(_prev, next) {
+    if (next) {
+      this.open = true;
+    }
+  }
+  /**
+   * Shows the widget by setting open to true.
+   * @public
+   */
+  show() {
+    this.open = true;
+  }
+  /**
+   * Hides the widget by setting open to false.
+   * @public
+   */
+  hide() {
+    this.open = false;
+  }
+  /**
+   * Listens to changes to the open property and emits show hide events respectively
+   * @public
+   */
+  openChanged(prev, next) {
+    if (prev !== next) {
+      if (next) {
+        __classPrivateFieldGet(this, _InlineInputWidget_instances, "m", _InlineInputWidget_emitShowEvent).call(this);
+      } else {
+        __classPrivateFieldGet(this, _InlineInputWidget_instances, "m", _InlineInputWidget_emitHideEvent).call(this);
+      }
+    }
+  }
+  /**
+   * Handles runtime changes to the singleline attribute.
+   * Updates textarea wrap attribute and re-filters existing value.
+   * @param prev - Previous singleline state
+   * @param next - New singleline state
+   * @public
+   */
+  singlelineChanged(_prev, next) {
+    if (!this.textareacontrol) return;
+    // Update textarea wrap attribute
+    if (next) {
+      this.textareacontrol.setAttribute("wrap", "off");
+      // Singleline never uses multiline grid layout
+      this.removeAttribute("data-multiline");
+      // Re-filter any existing newlines when enabling singleline mode
+      if (this.value && /[\r\n]/.test(this.value)) {
+        this.value = this.value; // Trigger valueChanged to filter newlines
+      }
+    } else {
+      this.textareacontrol.removeAttribute("wrap");
+    }
+  }
+  send() {
+    // Always emit prompt when send() is invoked; UI should prevent invalid submits
+    __classPrivateFieldGet(this, _InlineInputWidget_instances, "m", _InlineInputWidget_emitPromptEvent).call(this);
+  }
+  // Note: most handlers are arrow properties bound to 'this' already.
+  /**
+   * Attaches all event listeners to the component and its children.
+   * Called during component initialization.
+   * @private
+   */
+  attachEventListeners() {
+    var _a;
+    // Reset and create a new controller for this wiring pass
+    (_a = __classPrivateFieldGet(this, _InlineInputWidget_eventController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+    __classPrivateFieldSet(this, _InlineInputWidget_eventController, new AbortController(), "f");
+    const {
+      signal
+    } = __classPrivateFieldGet(this, _InlineInputWidget_eventController, "f");
+    // Route input events via the host so spies on handleInput see the call
+    // even if attached after listener registration. The target will still be
+    // the textarea when bubbling up.
+    this.addEventListener("input", e => this.handleInput(e), {
+      signal
+    });
+    this.textareacontrol.addEventListener("focus", this.handleMenu, {
+      signal
+    });
+    this.textareacontrol.addEventListener("keydown", this.handleTextareaKeydown, {
+      signal
+    });
+    this.textareacontrol.addEventListener("change", this.handleChange, {
+      signal
+    });
+    this.addEventListener("dismiss", this.dismiss, {
+      signal
+    });
+    this.addEventListener("focusout", this.handleFocusOut, {
+      signal
+    });
+    this.addEventListener("select", this.handleSelect, {
+      signal
+    });
+    this.addEventListener("keydown", this.handleKeydown, {
+      signal
+    });
+    this.addEventListener("send", this.send, {
+      signal
+    });
+    this.addEventListener("close", this.handleMenuClose, {
+      signal
+    });
+  }
+  /**
+   * Removes all event listeners from the component and its children.
+   * Called during component cleanup.
+   * @private
+   */
+  removeEventHandlers() {
+    // Abort controller removes all listeners that were attached with { signal }
+    __classPrivateFieldGet(this, _InlineInputWidget_instances, "m", _InlineInputWidget_detachListeners).call(this);
+  }
+  /**
+   * Updates the internal list of focusable elements.
+   * This list is used for keyboard navigation and focus management.
+   * @private
+   */
+  updateFocusableElements() {
+    var _a, _b, _c, _d, _f, _g, _h;
+    this.focusableElements = [];
+    // Always add textarea as it's always present and focusable
+    if (this.textareacontrol) {
+      this.focusableElements.push(this.textareacontrol);
+    }
+    // Add menu list if it exists and has visible items
+    if (this.menuList && ((_b = (_a = this.menu) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.open)) {
+      const hasVisibleItems = this.menuList.menuitems.some(item => !item.hasAttribute("hidden"));
+      if (hasVisibleItems) {
+        this.focusableElements.push(this.menuList);
+      }
+    }
+    // Add action buttons if they exist and are not disabled/hidden
+    if ((_c = this.actionButtons) === null || _c === void 0 ? void 0 : _c.length) {
+      const focusableActions = this.actionButtons.filter(button => !button.hasAttribute("disabled") && button.getAttribute("aria-hidden") !== "true");
+      this.focusableElements.push(...focusableActions);
+    }
+    // Add send button if it exists and is enabled
+    if ((_d = this.sendButton) === null || _d === void 0 ? void 0 : _d.length) {
+      const sendButton = this.sendButton[0];
+      if (!sendButton.disabled) {
+        const button = (_f = sendButton.shadowRoot) === null || _f === void 0 ? void 0 : _f.querySelector(`[role="button"]`);
+        this.focusableElements.push(button instanceof HTMLElement ? button : sendButton);
+      }
+    }
+    // Add dismiss button if it exists and is not hidden
+    if ((_g = this.dismissButton) === null || _g === void 0 ? void 0 : _g.length) {
+      const dismissButton = this.dismissButton[0];
+      if (!dismissButton.hasAttribute("hidden")) {
+        const dismissFabric = (_h = dismissButton.shadowRoot) === null || _h === void 0 ? void 0 : _h.querySelector(`[role="button"]`);
+        this.focusableElements.push(dismissFabric instanceof HTMLElement ? dismissFabric : dismissButton);
+      }
+    }
+  }
+  /**
+   * Finds the next focusable element in the tab sequence.
+   * @param currentElement - The currently focused element
+   * @returns The next focusable element or null if none found
+   * @private
+   */
+  getNextFocusableElement(currentElement) {
+    this.updateFocusableElements();
+    const currentIndex = this.focusableElements.findIndex(el => el === currentElement || el.contains(currentElement));
+    if (currentIndex === -1) return null;
+    const nextElement = this.focusableElements[currentIndex + 1];
+    return nextElement || null;
+  }
+  /**
+   * Finds the previous focusable element in the tab sequence.
+   * @param currentElement - The currently focused element
+   * @returns The previous focusable element or null if none found
+   * @private
+   */
+  getPreviousFocusableElement(currentElement) {
+    this.updateFocusableElements();
+    const currentIndex = this.focusableElements.findIndex(el => el === currentElement || el.contains(currentElement));
+    if (currentIndex === -1) return null;
+    const prevElement = this.focusableElements[currentIndex - 1];
+    return prevElement || null;
+  }
+  /**
+   * Handles changes to the input value.
+   * Updates the textarea, send button state, and emits change event.
+   * Filters newlines in singleline mode to ensure consistent state.
+   * @param prev - Previous value
+   * @param next - New value
+   * @protected
+   */
+  valueChanged(prev, next) {
+    if (this.maxlength && next.length > this.maxlength) {
+      this.value = prev;
+      return;
+    }
+    if (this.isFilteringValue) return;
+    // Filter newlines in singleline mode to maintain consistent state
+    // Both model (this.value) and view (textarea) should be filtered
+    let filteredValue = next;
+    if (this.singleline && /[\r\n]/.test(next)) {
+      filteredValue = next.replace(/[\r\n]/g, "");
+      // Update the model to match filtered value (prevent recursion with flag)
+      if (filteredValue !== next) {
+        this.isFilteringValue = true;
+        // Update the internal value without relying on a second change cycle
+        this.value = filteredValue;
+        this.isFilteringValue = false;
+      }
+    }
+    // Ensure the textarea and related state reflect the filtered value
+    if (this.textareacontrol) {
+      this.textareacontrol.value = filteredValue;
+      this.updateTextAreaState();
+    } else {
+      // Update character count even if textarea isn't wired yet
+      this.characterCount = filteredValue.length;
+    }
+    this.updateSubmitButtonState();
+    __classPrivateFieldGet(this, _InlineInputWidget_instances, "m", _InlineInputWidget_emitChangeEvent).call(this);
+  }
+  /**
+   * Updates the send button's enabled/disabled state based on input length.
+   * @private
+   */
+  updateSubmitButtonState() {
+    var _a, _b, _c, _d;
+    // Prefer the slotted reference, but fall back to querying the light DOM
+    const btn = (_b = (_a = this.sendButton) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : this.querySelector('[slot="send-button"]');
+    if (!btn) return;
+    const shouldEnable = this.value.length >= this.minlength;
+    const prevDisabled = !!btn.disabled;
+    const nextDisabled = !shouldEnable;
+    // Set both property and attribute for robustness even before upgrade
+    btn.disabled = nextDisabled;
+    if (nextDisabled) {
+      (_c = btn.setAttribute) === null || _c === void 0 ? void 0 : _c.call(btn, "disabled", "");
+    } else {
+      (_d = btn.removeAttribute) === null || _d === void 0 ? void 0 : _d.call(btn, "disabled");
+    }
+    // Only refresh focusables if the disabled state actually changed
+    if (prevDisabled !== nextDisabled) {
+      this.updateFocusableElements();
+    }
+  }
+  /**
+   * Updates the textarea's state including character count and height.
+   * @private
+   */
+  updateTextAreaState() {
+    this.characterCount = this.textareacontrol.value.length;
+    this.updateTextAreaHeight();
+  }
+  /**
+   * Adjusts the textarea height based on content.
+   * Handles transition between single and multiline states.
+   * @private
+   */
+  updateTextAreaHeight() {
+    if (!this.textareacontrol || this.isUpdatingLayout) return;
+    this.isUpdatingLayout = true;
+    // Reset height to get accurate scrollHeight
+    this.textareacontrol.style.height = `${InlineInputWidget.MIN_TEXTAREA_HEIGHT}px`;
+    // Force layout calculation
+    void this.textareacontrol.offsetHeight;
+    // Calculate available width for textarea
+    const componentWidth = this.getBoundingClientRect().width;
+    const availableWidth = componentWidth - InlineInputWidget.TEXTAREA_WIDTH_OFFSET;
+    // Create a temporary span to measure text width
+    const span = document.createElement("span");
+    span.style.font = window.getComputedStyle(this.textareacontrol).font;
+    span.style.visibility = "hidden";
+    span.style.position = "absolute";
+    span.style.whiteSpace = "pre";
+    span.textContent = this.textareacontrol.value;
+    document.body.appendChild(span);
+    // Get the actual text width
+    const textWidth = span.getBoundingClientRect().width;
+    document.body.removeChild(span);
+    // Singleline mode never uses the multiline grid layout
+    const isMultiline = !this.singleline && textWidth > availableWidth;
+    if (isMultiline !== this.hasAttribute("data-multiline")) {
+      this.toggleAttribute("data-multiline", isMultiline);
+    }
+    // Set final height based on content
+    this.textareacontrol.style.height = `${this.textareacontrol.scrollHeight}px`;
+    this.isUpdatingLayout = false;
+  }
+  /**
+   * Checks if an element is within the component's menu.
+   * @param element - The element to check
+   * @returns true if the element is within the menu
+   * @private
+   */
+  isWithinMenu(element) {
+    return !!(element.closest("fabric-contextual-menu-list") || element.closest("fabric-contextual-menu"));
+  }
+  /**
+   * Handles tab key navigation within the component.
+   * @param e - The keyboard event
+   * @param target - The current target element
+   * @returns true to allow default behavior, false to prevent it
+   * @private
+   */
+  handleTabNavigation(e, target) {
+    const nextElement = e.shiftKey ? this.getPreviousFocusableElement(target) : this.getNextFocusableElement(target);
+    if (nextElement) {
+      e.preventDefault();
+      nextElement.focus();
+      return false;
+    }
+    return true;
+  }
+  /**
+   * Filters menu items based on the current input value and updates the menu state.
+   * Shows the menu if there are matching items after an escape dismissal.
+   * Announces available suggestions to screen readers.
+   * @private
+   */
+  handleMenuFiltering() {
+    var _a;
+    if (!this.menuList) return;
+    const searchTerm = this.value.toLowerCase();
+    this.menuList.filterMenuItems(searchTerm);
+    const hasMatchingItems = this.hasVisibleMenuItems();
+    if (hasMatchingItems && this.menuEscapeDismissed && ((_a = this.menu) === null || _a === void 0 ? void 0 : _a[0])) {
+      this.menu[0].show();
+      this.menuEscapeDismissed = false;
+    }
+    this.announceAvailableSuggestions();
+    this.updateFocusableElements();
+  }
+  /**
+   * @returns {boolean} True if there are visible menu items, false otherwise
+   * @private
+   */
+  hasVisibleMenuItems() {
+    var _a, _b;
+    return (_b = (_a = this.menuList) === null || _a === void 0 ? void 0 : _a.menuitems.some(item => !item.hasAttribute("hidden"))) !== null && _b !== void 0 ? _b : false;
+  }
+  /**
+   * Announces the number of available suggestions to screen readers.
+   * Uses the announce method to create a temporary ARIA live region.
+   * @private
+   */
+  announceAvailableSuggestions() {
+    if (!this.menuList) return;
+    const visibleCount = this.menuList.menuitems.filter(item => !item.hasAttribute("hidden")).length;
+    this.announce(`${visibleCount} suggestions available`);
+  }
+  /**
+   * Sets initial state of elements in the text field.
+   * Initializes buttons, IDs, and event listeners.
+   *
+   * @protected
+   */
+  setElements() {
+    this.initializeSubmitButton();
+    this.initializeTextArea();
+    this.initializeMenu();
+    this.attachEventListeners();
+  }
+  /**
+   * Initializes the send button by setting its initial disabled state.
+   * The send button is disabled by default until valid input is provided.
+   * @private
+   */
+  initializeSubmitButton() {
+    var _a, _b, _c, _d;
+    const btn = (_b = (_a = this.sendButton) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : this.querySelector('[slot="send-button"]');
+    if (!btn) return;
+    // Reflect current validity on first render
+    const shouldEnable = this.value.length >= this.minlength;
+    const nextDisabled = !shouldEnable;
+    btn.disabled = nextDisabled;
+    if (nextDisabled) {
+      (_c = btn.setAttribute) === null || _c === void 0 ? void 0 : _c.call(btn, "disabled", "");
+    } else {
+      (_d = btn.removeAttribute) === null || _d === void 0 ? void 0 : _d.call(btn, "disabled");
+    }
+    this.updateFocusableElements();
+  }
+  /**
+   * React to changes in the slotted send button collection.
+   * Ensure disabled state is correct even if value was set before slotting.
+   * @param _prev
+   * @param _next
+   * @internal
+   */
+  sendButtonChanged(_prev, _next) {
+    this.initializeSubmitButton();
+    this.updateSubmitButtonState();
+  }
+  /**
+   * Initializes the textarea control by setting its ID and wrapping behavior.
+   * If singleline mode is enabled, text wrapping is disabled.
+   * @private
+   */
+  initializeTextArea() {
+    this.textareacontrol.id = this.textareaId;
+    if (this.singleline) {
+      this.textareacontrol.setAttribute("wrap", "off");
+    }
+  }
+  /**
+   * Initializes the menu component by setting its ID if it exists.
+   * The menu is used for displaying suggestions and autocomplete options.
+   * @private
+   */
+  initializeMenu() {
+    var _a, _b;
+    if (((_a = this.menu) === null || _a === void 0 ? void 0 : _a[0]) && !((_b = this.menu) === null || _b === void 0 ? void 0 : _b[0].id)) {
+      this.menu[0].id = this.menuId;
+      this.ariaControls = this.menuId;
+    }
+  }
+  /**
+   * Public wrapper so tests can spy on the method name and native change
+   * events can call into the same emission logic.
+   * @internal
+   */
+  emitChangeEvent() {
+    __classPrivateFieldGet(this, _InlineInputWidget_instances, "m", _InlineInputWidget_emitChangeEvent).call(this);
+  }
+  /**
+   * Announces a message to screen readers using ARIA live region
+   * @param message - The message to announce
+   * @private
+   */
+  announce(message) {
+    const announcer = document.createElement("div");
+    announcer.style.position = "absolute";
+    announcer.style.width = "1px";
+    announcer.style.height = "1px";
+    announcer.style.padding = "0";
+    announcer.style.overflow = "hidden";
+    announcer.style.clip = "rect(0, 0, 0, 0)";
+    announcer.style.whiteSpace = "nowrap";
+    announcer.style.border = "0";
+    announcer.setAttribute("role", "status");
+    announcer.setAttribute("aria-live", "polite");
+    announcer.setAttribute("aria-atomic", "true");
+    document.body.appendChild(announcer);
+    announcer.textContent = message;
+    setTimeout(() => {
+      document.body.removeChild(announcer);
+    }, InlineInputWidget.ANNOUNCEMENT_TIMEOUT);
+  }
+  /**
+   * Handles menu close events.
+   * @param e - The menu close event
+   * @private
+   */
+  handleMenuClose(e) {
+    var _a;
+    this.updateFocusableElements();
+    const customEvent = e;
+    if (((_a = customEvent.detail) === null || _a === void 0 ? void 0 : _a.reason) === "escape") {
+      this.menuEscapeDismissed = true;
+      this.textareacontrol.focus();
+    }
+  }
+}
+_InlineInputWidget_eventController = new WeakMap(), _InlineInputWidget_instances = new WeakSet(), _InlineInputWidget_detachListeners = function _InlineInputWidget_detachListeners() {
+  var _a, _b;
+  (_a = __classPrivateFieldGet(this, _InlineInputWidget_eventController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+  __classPrivateFieldSet(this, _InlineInputWidget_eventController, null, "f");
+  // Clean up ResizeObserver if present
+  (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+  this.resizeObserver = null;
+}, _InlineInputWidget_emitChangeEvent = function _InlineInputWidget_emitChangeEvent() {
+  this.dispatchEvent(new CustomEvent(InlineInputWidgetEventNames.change, {
+    bubbles: true,
+    composed: true,
+    detail: {
+      value: this.value
+    }
+  }));
+}, _InlineInputWidget_emitShowEvent = function _InlineInputWidget_emitShowEvent() {
+  this.dispatchEvent(new CustomEvent(InlineInputWidgetEventNames.show, {
+    bubbles: true,
+    composed: true,
+    detail: {
+      loading: true
+    }
+  }));
+}, _InlineInputWidget_emitHideEvent = function _InlineInputWidget_emitHideEvent() {
+  this.dispatchEvent(new CustomEvent(InlineInputWidgetEventNames.hide, {
+    bubbles: true,
+    composed: true
+  }));
+}, _InlineInputWidget_emitDismissEvent = function _InlineInputWidget_emitDismissEvent() {
+  this.dispatchEvent(new CustomEvent(InlineInputWidgetEventNames.dismiss, {
+    bubbles: true,
+    composed: true
+  }));
+}, _InlineInputWidget_emitPromptEvent = function _InlineInputWidget_emitPromptEvent() {
+  this.dispatchEvent(new CustomEvent(InlineInputWidgetEventNames.prompt, {
+    bubbles: true,
+    composed: true,
+    detail: {
+      prompt: this.value
+    }
+  }));
+};
+/** Minimum height of the textarea in pixels
+ * @private
+ */
+InlineInputWidget.MIN_TEXTAREA_HEIGHT = 20;
+/** Fixed width offset for textarea in pixels
+ * @private
+ */
+InlineInputWidget.TEXTAREA_WIDTH_OFFSET = 156;
+/** Timeout in milliseconds for accessibility announcements
+ * @private
+ */
+InlineInputWidget.ANNOUNCEMENT_TIMEOUT = 1000;
+__decorate([attr], InlineInputWidget.prototype, "value", void 0);
+__decorate([attr({
+  mode: "boolean"
+})], InlineInputWidget.prototype, "inline", void 0);
+__decorate([attr({
+  mode: "boolean"
+})], InlineInputWidget.prototype, "open", void 0);
+__decorate([attr({
+  mode: "boolean"
+})], InlineInputWidget.prototype, "singleline", void 0);
+__decorate([attr({
+  converter: nullableNumberConverter
+})], InlineInputWidget.prototype, "maxlength", void 0);
+__decorate([attr({
+  converter: nullableNumberConverter
+})], InlineInputWidget.prototype, "minlength", void 0);
+__decorate([attr], InlineInputWidget.prototype, "placeholder", void 0);
+__decorate([attr({
+  mode: "boolean"
+})], InlineInputWidget.prototype, "error", void 0);
+__decorate([attr({
+  attribute: "show-character-count",
+  mode: "boolean"
+})], InlineInputWidget.prototype, "showCharacterCount", void 0);
+__decorate([attr({
+  attribute: "aria-controls"
+})], InlineInputWidget.prototype, "ariaControls", void 0);
+__decorate([observable], InlineInputWidget.prototype, "characterCount", void 0);
+__decorate([observable], InlineInputWidget.prototype, "actionButtons", void 0);
+__decorate([observable], InlineInputWidget.prototype, "dismissButton", void 0);
+__decorate([observable], InlineInputWidget.prototype, "sendButton", void 0);
+__decorate([observable], InlineInputWidget.prototype, "menu", void 0);
+__decorate([attr({
+  attribute: "aria-label"
+})], InlineInputWidget.prototype, "ariaLabel", void 0);
+applyMixins(InlineInputWidget, StartEnd);
+
+export { InlineInputWidget };