@ni/ok-components 0.4.4 → 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,
@@ -99833,21 +99910,21 @@ focus outline in that case.
   /**
    * Base class for dynamic icons. Not intended to be used directly, instead use to register dynamic icons:
    * ```
-   * customElements.get('ok-icon-dynamic').registerIconDynamic('ok-icon-dynamic-awesome', '<img data uri or arbitrary url>');
+   * customElements.get('ok-ts-icon-dynamic').registerIconDynamic('ok-ts-icon-dynamic-awesome', '<img data uri or arbitrary url>');
    * ```
    * After calling successfully, the icon can be used like any other icon:
    * ```
-   * <ok-icon-dynamic-awesome></ok-icon-dynamic-awesome>
-   * <nimble-mapping-icon icon="ok-icon-dynamic-awesome"></nimble-mapping-icon>
+   * <ok-ts-icon-dynamic-awesome></ok-ts-icon-dynamic-awesome>
+   * <nimble-mapping-icon icon="ok-ts-icon-dynamic-awesome"></nimble-mapping-icon>
    * ```
    */
-  class IconDynamic extends Icon {
+  class TsIconDynamic extends Icon {
       constructor(/** @internal */ url) {
           super();
           this.url = url;
       }
       static registerIconDynamic(tagName, url) {
-          const tagPrefix = 'ok-icon-dynamic-';
+          const tagPrefix = 'ok-ts-icon-dynamic-';
           if (!tagName.startsWith(tagPrefix)) {
               throw new Error(`Icon tag name must start with '${tagPrefix}', provided name: ${tagName}`);
           }
@@ -99855,17 +99932,17 @@ focus outline in that case.
           if (!/^[a-z][a-z]+$/.test(name)) {
               throw new Error(`Icon name must be lowercase [a-z] and at least two characters long, provided name: ${name}`);
           }
-          const iconClassName = `IconDynamic${name.charAt(0).toUpperCase() + name.slice(1)}`;
+          const iconClassName = `TsIconDynamic${name.charAt(0).toUpperCase() + name.slice(1)}`;
           const iconClassContainer = {
               // Class name for expression should come object literal assignment, helpful for stack traces, etc.
-              [iconClassName]: class extends IconDynamic {
+              [iconClassName]: class extends TsIconDynamic {
                   constructor() {
                       super(url);
                   }
               }
           };
           const iconClass = iconClassContainer[iconClassName];
-          const baseName = `icon-dynamic-${name}`;
+          const baseName = `ts-icon-dynamic-${name}`;
           const composedIcon = iconClass.compose({
               baseName,
               template,
@@ -99874,12 +99951,12 @@ focus outline in that case.
           DesignSystem.getOrCreate().withPrefix('ok').register(composedIcon());
       }
   }
-  const okIconDynamic = IconDynamic.compose({
-      baseName: 'icon-dynamic',
+  const okTsIconDynamic = TsIconDynamic.compose({
+      baseName: 'ts-icon-dynamic',
       template: html `<template></template>`,
       styles: css `${display('none')}`
   });
-  DesignSystem.getOrCreate().withPrefix('ok').register(okIconDynamic());
+  DesignSystem.getOrCreate().withPrefix('ok').register(okTsIconDynamic());
 
 })();
 //# sourceMappingURL=all-components-bundle.js.map