@ni/ok-components 0.2.10 → 0.2.11

package/dist/all-components-bundle.js

@@ -24932,6 +24932,7 @@ so this becomes the fallback color for the slot */ ''}
       }
   }
   registerIconSvg('icon-stop-square', IconStopSquare);
+  const iconStopSquareTag = 'nimble-icon-stop-square';
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
@@ -96961,7 +96962,7 @@ focus outline in that case.
         color: ${controlLabelFontColor};
     }
 
-    .send-button {
+    .action-button {
         align-self: flex-end;
         width: 80px;
         margin: ${mediumPadding};
@@ -96980,18 +96981,18 @@ focus outline in that case.
         @input="${x => x.textAreaInputHandler()}"
     ></textarea>
     <${buttonTag}
-        class="send-button"
+        class="action-button"
         appearance="block"
-        appearance-variant="accent"
-        ?disabled=${x => x.disableSendButton}
-        @click=${x => x.sendButtonClickHandler()}
+        appearance-variant="${x => (x.processing ? 'primary' : 'accent')}"
+        ?disabled=${x => (x.processing ? false : x.disableSendButton)}
+        @click=${x => (x.processing ? x.stopButtonClickHandler() : x.sendButtonClickHandler())}
         tabindex="${x => x.tabIndex}"
-        title=${x => x.sendButtonLabel}
+        title=${x => (x.processing ? x.stopButtonLabel : x.sendButtonLabel)}
         content-hidden
     >
-        ${x => x.sendButtonLabel}
-        <${iconPaperPlaneTag} slot="start"><${iconPaperPlaneTag}/>
-    </${buttonTag}>    
+        ${x => (x.processing ? x.stopButtonLabel : x.sendButtonLabel)}
+        ${when(x => x.processing, html `<${iconStopSquareTag} slot="start"></${iconStopSquareTag}>`, html `<${iconPaperPlaneTag} slot="start"></${iconPaperPlaneTag}>`)}
+    </${buttonTag}>
 </div>`;
 
   /**
@@ -97002,6 +97003,7 @@ focus outline in that case.
           super(...arguments);
           this.value = '';
           this.maxLength = -1;
+          this.processing = false;
           /**
            * @internal
            */
@@ -97012,6 +97014,9 @@ focus outline in that case.
        */
       textAreaKeydownHandler(e) {
           if (e.key === keyEnter && !e.shiftKey) {
+              if (this.processing) {
+                  return false;
+              }
               this.sendButtonClickHandler();
               return false;
           }
@@ -97054,6 +97059,16 @@ focus outline in that case.
           this.resetInput();
           this.$emit('send', eventDetail);
       }
+      /**
+       * @internal
+       */
+      stopButtonClickHandler() {
+          if (!this.processing) {
+              return;
+          }
+          this.$emit('stop');
+          this.textArea?.blur();
+      }
       shouldDisableSendButton() {
           return this.textArea.value.length === 0;
       }
@@ -97072,6 +97087,9 @@ focus outline in that case.
   __decorate([
       attr({ attribute: 'send-button-label' })
   ], ChatInput.prototype, "sendButtonLabel", void 0);
+  __decorate([
+      attr({ attribute: 'stop-button-label' })
+  ], ChatInput.prototype, "stopButtonLabel", void 0);
   __decorate([
       attr
   ], ChatInput.prototype, "value", void 0);
@@ -97081,6 +97099,9 @@ focus outline in that case.
   __decorate([
       attr({ attribute: 'maxlength', converter: nullableNumberConverter })
   ], ChatInput.prototype, "maxLength", void 0);
+  __decorate([
+      attr({ attribute: 'processing', mode: 'boolean' })
+  ], ChatInput.prototype, "processing", void 0);
   __decorate([
       observable
   ], ChatInput.prototype, "textArea", void 0);