@ni/spright-components 5.5.0 → 5.5.2

package/dist/all-components-bundle.js

@@ -16000,6 +16000,7 @@
       dividerBackgroundColor: 'divider-background-color',
       headerBackgroundColor: 'header-background-color',
       sectionBackgroundColor: 'section-background-color',
+      sectionBackgroundImage: 'section-background-image',
       buttonFillPrimaryColor: 'button-fill-primary-color',
       buttonPrimaryFontColor: 'button-primary-font-color',
       buttonFillAccentColor: 'button-fill-accent-color',
@@ -16032,6 +16033,7 @@
       largePadding: 'large-padding',
       labelHeight: 'label-height',
       borderWidth: 'border-width',
+      dividerWidth: 'divider-width',
       iconSize: 'icon-size',
       groupHeaderTextTransform: 'group-header-text-transform',
       drawerWidth: 'drawer-width',
@@ -16250,7 +16252,12 @@
   const applicationBackgroundColor = DesignToken.create(styleNameFromTokenName(tokenNames.applicationBackgroundColor)).withDefault((element) => getColorForTheme(element, White, Black85, ForestGreen));
   DesignToken.create(styleNameFromTokenName(tokenNames.headerBackgroundColor)).withDefault((element) => getColorForTheme(element, Black7, Black88, ForestGreen));
   DesignToken.create(styleNameFromTokenName(tokenNames.sectionBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
-  DesignToken.create(styleNameFromTokenName(tokenNames.dividerBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
+  const sectionBackgroundImage = DesignToken.create(styleNameFromTokenName(tokenNames.sectionBackgroundImage)).withDefault((element) => {
+      const start = getColorForTheme(element, Black15, Black82, ForestGreen);
+      const end = getColorForTheme(element, hexToRgbaCssColor(Black15, 0), hexToRgbaCssColor(Black82, 0), hexToRgbaCssColor(ForestGreen, 0));
+      return `linear-gradient(${start}, ${end})`;
+  });
+  DesignToken.create(styleNameFromTokenName(tokenNames.dividerBackgroundColor)).withDefault((element) => getColorForTheme(element, hexToRgbaCssColor(Black91, 0.2), hexToRgbaCssColor(Black15, 0.2), hexToRgbaCssColor(White, 0.2)));
   const fillSelectedColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedColor)).withDefault((element) => hexToRgbaCssColor(getFillSelectedColorForTheme(element), 0.2));
   const fillSelectedRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedRgbPartialColor)).withDefault((element) => hexToRgbPartial(getFillSelectedColorForTheme(element)));
   const fillHoverSelectedColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillHoverSelectedColor)).withDefault((element) => hexToRgbaCssColor(getFillSelectedColorForTheme(element), 0.15));
@@ -16313,6 +16320,7 @@
   const largePadding = DesignToken.create(styleNameFromTokenName(tokenNames.largePadding)).withDefault('24px');
   DesignToken.create(styleNameFromTokenName(tokenNames.labelHeight)).withDefault('16px');
   const borderWidth = DesignToken.create(styleNameFromTokenName(tokenNames.borderWidth)).withDefault('1px');
+  DesignToken.create(styleNameFromTokenName(tokenNames.dividerWidth)).withDefault('2px');
   const iconSize = DesignToken.create(styleNameFromTokenName(tokenNames.iconSize)).withDefault('16px');
   const drawerWidth = DesignToken.create(styleNameFromTokenName(tokenNames.drawerWidth)).withDefault('784px');
   const dialogSmallWidth = DesignToken.create(styleNameFromTokenName(tokenNames.dialogSmallWidth)).withDefault('400px');
@@ -93482,6 +93490,8 @@ focus outline in that case.
 
     :host {
         flex-direction: column;
+        background: ${applicationBackgroundColor};
+        border: ${borderWidth} solid ${applicationBackgroundColor};
     }
 
     .messages {
@@ -93490,24 +93500,52 @@ focus outline in that case.
         flex-direction: column;
         justify-content: flex-start;
         row-gap: 32px;
-        padding: ${mediumPadding};
-        background: ${applicationBackgroundColor};
+        padding: ${mediumPadding} ${standardPadding} ${mediumPadding}
+            ${standardPadding};
+        background: ${sectionBackgroundImage};
         overflow-y: auto;
     }
+
+    .input {
+        padding: ${borderWidth} ${standardPadding} ${standardPadding}
+            ${standardPadding};
+    }
+
+    .input.input-empty {
+        padding: 0px ${standardPadding} 0px ${standardPadding};
+    }
 `;
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
   const template$3 = html `
 <div class="messages"><slot></slot></div>
-<div class="input"><slot name="input"></slot></div>`;
+<div class="input ${x => (x.inputEmpty ? 'input-empty' : '')}">
+    <slot name="input" ${slotted({ property: 'slottedInputElements' })}>
+    </slot>
+</div>
+`;
   /* eslint-enable @typescript-eslint/indent */
 
   /**
    * A Spright component for displaying a series of chat messages
    */
   class ChatConversation extends FoundationElement {
+      constructor() {
+          super(...arguments);
+          /** @internal */
+          this.inputEmpty = true;
+      }
+      slottedInputElementsChanged(_prev, next) {
+          this.inputEmpty = !next?.length;
+      }
   }
+  __decorate([
+      observable
+  ], ChatConversation.prototype, "inputEmpty", void 0);
+  __decorate([
+      observable
+  ], ChatConversation.prototype, "slottedInputElements", void 0);
   const sprightChatConversation = ChatConversation.compose({
       baseName: 'chat-conversation',
       template: template$3,
@@ -93576,6 +93614,7 @@ focus outline in that case.
         ${ref('textArea')}
         placeholder="${x => x.placeholder}"
         rows="1"
+        tabindex="${x => x.tabIndex}"
         @keydown="${(x, c) => x.textAreaKeydownHandler(c.event)}"
         @input="${x => x.textAreaInputHandler()}"
     ></textarea>
@@ -93585,6 +93624,7 @@ focus outline in that case.
         appearance-variant="accent"
         ?disabled=${x => x.disableSendButton}
         @click=${x => x.sendButtonClickHandler()}
+        tabindex="${x => x.tabIndex}"
         title=${x => x.sendButtonLabel}
         content-hidden
     >
@@ -93676,6 +93716,9 @@ focus outline in that case.
   __decorate([
       attr
   ], ChatInput.prototype, "value", void 0);
+  __decorate([
+      attr({ attribute: 'tabindex', converter: nullableNumberConverter })
+  ], ChatInput.prototype, "tabIndex", void 0);
   __decorate([
       observable
   ], ChatInput.prototype, "textArea", void 0);
@@ -93685,7 +93728,10 @@ focus outline in that case.
   const sprightChatInput = ChatInput.compose({
       baseName: 'chat-input',
       template: template$2,
-      styles: styles$2
+      styles: styles$2,
+      shadowOptions: {
+          delegatesFocus: true
+      }
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatInput());