@ni/ok-components 0.2.17 → 0.2.19

package/dist/all-components-bundle.js

@@ -14768,6 +14768,7 @@
       actionRgbPartialColor: 'action-rgb-partial-color',
       applicationBackgroundColor: 'application-background-color',
       dividerBackgroundColor: 'divider-background-color',
+      dividerBackgroundDynamicColor: 'divider-background-dynamic-color',
       headerBackgroundColor: 'header-background-color',
       sectionBackgroundColor: 'section-background-color',
       sectionBackgroundImage: 'section-background-image',
@@ -16162,7 +16163,9 @@
   const BannerFail100DarkUi = "#d63434";
   const Warning100LightUi = "#ff4b00";
   const Black91V10 = "#e8e8e8";
+  const Black30 = "#d3d5d6";
   const Black82V100 = "#6e6f70";
+  const Black77V100 = "#6f7073";
   const DigitalGreenDark = "#008557";
   const DigitalGreenDark105 = "#00734b";
   const DigitalGreenDark110 = "#00613f";
@@ -16305,6 +16308,7 @@
       sectionBackgroundColor: createThemeColor(Black15, Black80, ForestGreen),
       sectionBackgroundImage: createThemeColor(`linear-gradient(${Black15}, ${hexToRgbaCssColor(Black15, 0)})`, `linear-gradient(${Black82}, ${hexToRgbaCssColor(Black82, 0)})`, `linear-gradient(${ForestGreen}, ${hexToRgbaCssColor(ForestGreen, 0)})`),
       dividerBackgroundColor: createThemeColor(Black15, Black80, ForestGreen),
+      dividerBackgroundDynamicColor: createThemeColor(Black30, Black77V100, ForestGreen),
       fillSelectedColor: hexToRgbaCssThemeColor(alias.fillSelectedColor, 0.2, 0.2, 0.2),
       fillSelectedRgbPartialColor: hexToRgbPartialThemeColor(alias.fillSelectedColor),
       fillHoverSelectedColor: hexToRgbaCssThemeColor(alias.fillSelectedColor, 0.15, 0.15, 0.15),
@@ -16477,6 +16481,7 @@
   createThemeColorToken(tokenNames.sectionBackgroundColor, tokenValues.sectionBackgroundColor);
   const sectionBackgroundImage = createThemeColorToken(tokenNames.sectionBackgroundImage, tokenValues.sectionBackgroundImage);
   createThemeColorToken(tokenNames.dividerBackgroundColor, tokenValues.dividerBackgroundColor);
+  createThemeColorToken(tokenNames.dividerBackgroundDynamicColor, tokenValues.dividerBackgroundDynamicColor);
   const fillSelectedColor = createThemeColorToken(tokenNames.fillSelectedColor, tokenValues.fillSelectedColor);
   const fillSelectedRgbPartialColor = createThemeColorToken(tokenNames.fillSelectedRgbPartialColor, tokenValues.fillSelectedRgbPartialColor);
   const fillHoverSelectedColor = createThemeColorToken(tokenNames.fillHoverSelectedColor, tokenValues.fillHoverSelectedColor);
@@ -97956,7 +97961,7 @@ focus outline in that case.
         class="action-button"
         appearance="block"
         appearance-variant="${x => (x.processing ? 'primary' : 'accent')}"
-        ?disabled=${x => (x.processing ? false : x.disableSendButton)}
+        ?disabled=${x => (x.processing ? false : (x.sendDisabled || x.isInputEmpty))}
         @click=${x => (x.processing ? x.stopButtonClickHandler() : x.sendButtonClickHandler())}
         tabindex="${x => x.tabIndex}"
         title=${x => (x.processing ? x.stopButtonLabel : x.sendButtonLabel)}
@@ -97982,10 +97987,12 @@ focus outline in that case.
           this.value = '';
           this.maxLength = -1;
           this.processing = false;
+          this.sendDisabled = false;
           /**
+           * Tracks whether the send button should be disabled based on input value
            * @internal
            */
-          this.disableSendButton = true;
+          this.isInputEmpty = true;
           /**
            * The width of the vertical scrollbar, if displayed.
            * @internal
@@ -98011,7 +98018,7 @@ focus outline in that case.
        */
       textAreaInputHandler() {
           this.value = this.textArea.value;
-          this.disableSendButton = this.shouldDisableSendButton();
+          this.isInputEmpty = this.shouldDisableSendButton();
           this.queueUpdateScrollbarWidth();
       }
       // If a property can affect whether a scrollbar is visible, we need to
@@ -98032,7 +98039,7 @@ focus outline in that case.
       valueChanged() {
           if (this.textArea) {
               this.textArea.value = this.value;
-              this.disableSendButton = this.shouldDisableSendButton();
+              this.isInputEmpty = this.shouldDisableSendButton();
               this.queueUpdateScrollbarWidth();
           }
       }
@@ -98042,7 +98049,7 @@ focus outline in that case.
       connectedCallback() {
           super.connectedCallback();
           this.textArea.value = this.value;
-          this.disableSendButton = this.shouldDisableSendButton();
+          this.isInputEmpty = this.shouldDisableSendButton();
           this.resizeObserver = new ResizeObserver(() => this.onResize());
           this.resizeObserver.observe(this);
       }
@@ -98081,7 +98088,7 @@ focus outline in that case.
       }
       resetInput() {
           this.value = '';
-          this.disableSendButton = true;
+          this.isInputEmpty = true;
           if (this.textArea) {
               this.textArea.value = '';
               this.textArea.focus();
@@ -98125,12 +98132,15 @@ focus outline in that case.
   __decorate([
       attr({ attribute: 'processing', mode: 'boolean' })
   ], ChatInput.prototype, "processing", void 0);
+  __decorate([
+      attr({ attribute: 'send-disabled', mode: 'boolean' })
+  ], ChatInput.prototype, "sendDisabled", void 0);
   __decorate([
       observable
   ], ChatInput.prototype, "textArea", void 0);
   __decorate([
       observable
-  ], ChatInput.prototype, "disableSendButton", void 0);
+  ], ChatInput.prototype, "isInputEmpty", void 0);
   __decorate([
       observable
   ], ChatInput.prototype, "scrollbarWidth", void 0);