@ni/ok-components 0.2.12 → 0.2.13

package/dist/all-components-bundle.js

@@ -96975,6 +96975,7 @@ focus outline in that case.
 
   const styles$7 = css `
     ${display$1('flex')}
+    ${styles$Y}
 
     :host {
         width: 100%;
@@ -97016,6 +97017,22 @@ focus outline in that case.
         border-bottom-color: ${borderHoverColor};
     }
 
+    :host([error-visible]) .container::after {
+        border-bottom-color: ${failColor};
+    }
+        
+    :host([error-visible]) .container {
+        border-bottom-color: ${failColor};
+    }
+
+    :host([error-visible]:hover) .container::after {
+        border-bottom-color: ${failColor};
+    }
+
+    :host([error-visible]:focus-within) .container {
+        border-bottom-color: ${failColor};
+    }
+
     @media (prefers-reduced-motion) {
         .container::after {
             transition-duration: 0s;
@@ -97042,6 +97059,17 @@ focus outline in that case.
         color: ${controlLabelFontColor};
     }
 
+    :host([error-visible]) .error-icon {
+        display: none;
+    }
+
+    :host([error-visible]) .error-icon.scrollbar-width-calculated {
+        display: inline-flex;
+        position: absolute;
+        top: ${mediumPadding};
+        right: var(--ni-private-scrollbar-width);
+    }
+
     .action-button {
         align-self: flex-end;
         width: 80px;
@@ -97073,12 +97101,18 @@ focus outline in that case.
         ${x => (x.processing ? x.stopButtonLabel : x.sendButtonLabel)}
         ${when(x => x.processing, html `<${iconStopSquareTag} slot="start"></${iconStopSquareTag}>`, html `<${iconPaperPlaneTag} slot="start"></${iconPaperPlaneTag}>`)}
     </${buttonTag}>
+    <${iconExclamationMarkTag}
+        severity="error"
+        class="error-icon ${x => (x.scrollbarWidth >= 0 ? 'scrollbar-width-calculated' : '')}"
+        style="--ni-private-scrollbar-width: ${x => x.scrollbarWidth}px;"
+    ></${iconExclamationMarkTag}>
+    ${errorTextTemplate}
 </div>`;
 
   /**
    * A Spright component for composing and sending a chat message
    */
-  class ChatInput extends FoundationElement {
+  class ChatInput extends mixinErrorPattern(FoundationElement) {
       constructor() {
           super(...arguments);
           this.value = '';
@@ -97088,6 +97122,12 @@ focus outline in that case.
            * @internal
            */
           this.disableSendButton = true;
+          /**
+           * The width of the vertical scrollbar, if displayed.
+           * @internal
+           */
+          this.scrollbarWidth = -1;
+          this.updateScrollbarWidthQueued = false;
       }
       /**
        * @internal
@@ -97108,6 +97148,19 @@ focus outline in that case.
       textAreaInputHandler() {
           this.value = this.textArea.value;
           this.disableSendButton = this.shouldDisableSendButton();
+          this.queueUpdateScrollbarWidth();
+      }
+      // If a property can affect whether a scrollbar is visible, we need to
+      // call queueUpdateScrollbarWidth() when it changes. The exceptions are
+      // properties that affect size (e.g. height, width, cols, rows), because
+      // we already have a ResizeObserver handling those changes. Also,
+      // a change to errorVisible cannot cause scrollbar visibility to change,
+      // because we always reserve space for the error icon.
+      /**
+       * @internal
+       */
+      placeholderChanged() {
+          this.queueUpdateScrollbarWidth();
       }
       /**
        * @internal
@@ -97116,6 +97169,7 @@ focus outline in that case.
           if (this.textArea) {
               this.textArea.value = this.value;
               this.disableSendButton = this.shouldDisableSendButton();
+              this.queueUpdateScrollbarWidth();
           }
       }
       /**
@@ -97125,6 +97179,15 @@ focus outline in that case.
           super.connectedCallback();
           this.textArea.value = this.value;
           this.disableSendButton = this.shouldDisableSendButton();
+          this.resizeObserver = new ResizeObserver(() => this.onResize());
+          this.resizeObserver.observe(this);
+      }
+      /**
+       * @internal
+       */
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          this.resizeObserver?.disconnect();
       }
       /**
        * @internal
@@ -97160,6 +97223,22 @@ focus outline in that case.
               this.textArea.focus();
           }
       }
+      onResize() {
+          this.scrollbarWidth = this.textArea.offsetWidth - this.textArea.clientWidth;
+      }
+      queueUpdateScrollbarWidth() {
+          if (!this.$fastController.isConnected) {
+              return;
+          }
+          if (!this.updateScrollbarWidthQueued) {
+              this.updateScrollbarWidthQueued = true;
+              DOM.queueUpdate(() => this.updateScrollbarWidth());
+          }
+      }
+      updateScrollbarWidth() {
+          this.updateScrollbarWidthQueued = false;
+          this.scrollbarWidth = this.textArea.offsetWidth - this.textArea.clientWidth;
+      }
   }
   __decorate([
       attr
@@ -97188,6 +97267,9 @@ focus outline in that case.
   __decorate([
       observable
   ], ChatInput.prototype, "disableSendButton", void 0);
+  __decorate([
+      observable
+  ], ChatInput.prototype, "scrollbarWidth", void 0);
   const sprightChatInput = ChatInput.compose({
       baseName: 'chat-input',
       template: template$7,