@ni/ok-components 1.0.0 → 1.0.1

package/dist/all-components-bundle.js

@@ -98696,10 +98696,57 @@ focus outline in that case.
         width: 80px;
         margin: ${mediumPadding};
     }
+
+    .attachments {
+        display: none;
+    }
+
+    .attachments.has-content {
+        display: flex;
+        flex-wrap: wrap;
+        gap: ${mediumPadding};
+        padding: ${mediumPadding};
+        max-height: calc(${controlSlimHeight} * 3 + ${mediumPadding} * 4 );
+        overflow-y: auto;
+    }
+
+    .attachments ::slotted(*) {
+        height: ${controlSlimHeight};
+    }
+
+    .footer {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-end;
+        justify-content: flex-end;
+    }
+
+    .footer-actions {
+        display: none;
+        flex: 1;
+    }
+
+    .footer-actions.has-content {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        column-gap: ${mediumPadding};
+        margin: ${mediumPadding};
+    }
+
+    .footer-actions ::slotted(*) {
+        height: ${controlSlimHeight};
+    }
 `;
 
   const template$a = html `
 <div class="container">
+    <section class="attachments ${x => (x.attachmentsIsEmpty ? '' : 'has-content')}">
+        <slot
+            name="attachments"
+            ${slotted({ property: 'slottedAttachmentsElements' })}
+        ></slot>
+    </section>
     <textarea
         ${ref('textArea')}
         placeholder="${x => x.placeholder}"
@@ -98709,19 +98756,27 @@ focus outline in that case.
         @keydown="${(x, c) => x.textAreaKeydownHandler(c.event)}"
         @input="${x => x.textAreaInputHandler()}"
     ></textarea>
-    <${buttonTag}
-        class="action-button"
-        appearance="block"
-        appearance-variant="${x => (x.processing ? 'primary' : 'accent')}"
-        ?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)}
-        content-hidden
-    >
-        ${x => (x.processing ? x.stopButtonLabel : x.sendButtonLabel)}
-        ${when(x => x.processing, html `<${iconStopSquareTag} slot="start"></${iconStopSquareTag}>`, html `<${iconPaperPlaneTag} slot="start"></${iconPaperPlaneTag}>`)}
-    </${buttonTag}>
+    <section class="footer">
+        <section class="footer-actions ${x => (x.footerActionsIsEmpty ? '' : 'has-content')}">
+            <slot
+                name="footer-actions"
+                ${slotted({ property: 'slottedFooterActionsElements' })}
+            ></slot>
+        </section>
+        <${buttonTag}
+            class="action-button"
+            appearance="block"
+            appearance-variant="${x => (x.processing ? 'primary' : 'accent')}"
+            ?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)}
+            content-hidden
+        >
+            ${x => (x.processing ? x.stopButtonLabel : x.sendButtonLabel)}
+            ${when(x => x.processing, html `<${iconStopSquareTag} slot="start"></${iconStopSquareTag}>`, html `<${iconPaperPlaneTag} slot="start"></${iconPaperPlaneTag}>`)}
+        </${buttonTag}>
+    </section>
     <${iconExclamationMarkTag}
         severity="error"
         class="error-icon ${x => (x.scrollbarWidth >= 0 ? 'scrollbar-width-calculated' : '')}"
@@ -98750,8 +98805,18 @@ focus outline in that case.
            * @internal
            */
           this.scrollbarWidth = -1;
+          /** @internal */
+          this.footerActionsIsEmpty = true;
+          /** @internal */
+          this.attachmentsIsEmpty = true;
           this.updateScrollbarWidthQueued = false;
       }
+      slottedFooterActionsElementsChanged(_prev, next) {
+          this.footerActionsIsEmpty = next === undefined || next.length === 0;
+      }
+      slottedAttachmentsElementsChanged(_prev, next) {
+          this.attachmentsIsEmpty = next === undefined || next.length === 0;
+      }
       /**
        * @internal
        */
@@ -98912,6 +98977,18 @@ focus outline in that case.
   __decorate([
       observable
   ], ChatInput.prototype, "scrollbarWidth", void 0);
+  __decorate([
+      observable
+  ], ChatInput.prototype, "footerActionsIsEmpty", void 0);
+  __decorate([
+      observable
+  ], ChatInput.prototype, "slottedFooterActionsElements", void 0);
+  __decorate([
+      observable
+  ], ChatInput.prototype, "attachmentsIsEmpty", void 0);
+  __decorate([
+      observable
+  ], ChatInput.prototype, "slottedAttachmentsElements", void 0);
   const sprightChatInput = ChatInput.compose({
       baseName: 'chat-input',
       template: template$a,