@ni/ok-components 1.0.0 → 1.0.1

package/dist/all-components-bundle.min.js

@@ -16874,8 +16874,55 @@ const i1=_t`
         width: 80px;
         margin: ${Ec};
     }
+
+    .attachments {
+        display: none;
+    }
+
+    .attachments.has-content {
+        display: flex;
+        flex-wrap: wrap;
+        gap: ${Ec};
+        padding: ${Ec};
+        max-height: calc(${Mc} * 3 + ${Ec} * 4 );
+        overflow-y: auto;
+    }
+
+    .attachments ::slotted(*) {
+        height: ${Mc};
+    }
+
+    .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: ${Ec};
+        margin: ${Ec};
+    }
+
+    .footer-actions ::slotted(*) {
+        height: ${Mc};
+    }
 `,o1=J`
 <div class="container">
+    <section class="attachments ${t=>t.attachmentsIsEmpty?"":"has-content"}">
+        <slot
+            name="attachments"
+            ${Qt({property:"slottedAttachmentsElements"})}
+        ></slot>
+    </section>
     <textarea
         ${Pt("textArea")}
         placeholder="${t=>t.placeholder}"
@@ -16885,19 +16932,27 @@ const i1=_t`
         @keydown="${(t,e)=>t.textAreaKeydownHandler(e.event)}"
         @input="${t=>t.textAreaInputHandler()}"
     ></textarea>
-    <${Vg}
-        class="action-button"
-        appearance="block"
-        appearance-variant="${t=>t.processing?"primary":"accent"}"
-        ?disabled=${t=>!t.processing&&(t.sendDisabled||t.isInputEmpty)}
-        @click=${t=>t.processing?t.stopButtonClickHandler():t.sendButtonClickHandler()}
-        tabindex="${t=>t.tabIndex}"
-        title=${t=>t.processing?t.stopButtonLabel:t.sendButtonLabel}
-        content-hidden
-    >
-        ${t=>t.processing?t.stopButtonLabel:t.sendButtonLabel}
-        ${Ut(t=>t.processing,J`<${xb} slot="start"></${xb}>`,J`<${wb} slot="start"></${wb}>`)}
-    </${Vg}>
+    <section class="footer">
+        <section class="footer-actions ${t=>t.footerActionsIsEmpty?"":"has-content"}">
+            <slot
+                name="footer-actions"
+                ${Qt({property:"slottedFooterActionsElements"})}
+            ></slot>
+        </section>
+        <${Vg}
+            class="action-button"
+            appearance="block"
+            appearance-variant="${t=>t.processing?"primary":"accent"}"
+            ?disabled=${t=>!t.processing&&(t.sendDisabled||t.isInputEmpty)}
+            @click=${t=>t.processing?t.stopButtonClickHandler():t.sendButtonClickHandler()}
+            tabindex="${t=>t.tabIndex}"
+            title=${t=>t.processing?t.stopButtonLabel:t.sendButtonLabel}
+            content-hidden
+        >
+            ${t=>t.processing?t.stopButtonLabel:t.sendButtonLabel}
+            ${Ut(t=>t.processing,J`<${xb} slot="start"></${xb}>`,J`<${wb} slot="start"></${wb}>`)}
+        </${Vg}>
+    </section>
     <${Jm}
         severity="error"
         class="error-icon ${t=>t.scrollbarWidth>=0?"scrollbar-width-calculated":""}"
@@ -16905,11 +16960,11 @@ const i1=_t`
     ></${Jm}>
     ${xv}
 </div>`
-class r1 extends(Cv(He)){constructor(){super(...arguments),this.value="",this.maxLength=-1,this.processing=!1,this.sendDisabled=!1,this.isInputEmpty=!0,this.scrollbarWidth=-1,this.updateScrollbarWidthQueued=!1}textAreaKeydownHandler(t){return!(t.key===sn&&!t.shiftKey)||(this.processing||this.sendButtonClickHandler(),!1)}textAreaInputHandler(){this.value=this.textArea.value,this.isInputEmpty=this.shouldDisableSendButton(),this.adjustTextAreaHeight(),this.queueUpdateScrollbarWidth()}placeholderChanged(){this.queueUpdateScrollbarWidth()}valueChanged(){this.textArea&&(this.textArea.value=this.value,this.isInputEmpty=this.shouldDisableSendButton(),this.adjustTextAreaHeight(),this.queueUpdateScrollbarWidth())}connectedCallback(){super.connectedCallback(),this.textArea.value=this.value,this.isInputEmpty=this.shouldDisableSendButton(),this.adjustTextAreaHeight(),this.resizeObserver=new ResizeObserver(()=>this.onResize()),this.resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver?.disconnect()}sendButtonClickHandler(){if(this.shouldDisableSendButton())return
+class r1 extends(Cv(He)){constructor(){super(...arguments),this.value="",this.maxLength=-1,this.processing=!1,this.sendDisabled=!1,this.isInputEmpty=!0,this.scrollbarWidth=-1,this.footerActionsIsEmpty=!0,this.attachmentsIsEmpty=!0,this.updateScrollbarWidthQueued=!1}slottedFooterActionsElementsChanged(t,e){this.footerActionsIsEmpty=void 0===e||0===e.length}slottedAttachmentsElementsChanged(t,e){this.attachmentsIsEmpty=void 0===e||0===e.length}textAreaKeydownHandler(t){return!(t.key===sn&&!t.shiftKey)||(this.processing||this.sendButtonClickHandler(),!1)}textAreaInputHandler(){this.value=this.textArea.value,this.isInputEmpty=this.shouldDisableSendButton(),this.adjustTextAreaHeight(),this.queueUpdateScrollbarWidth()}placeholderChanged(){this.queueUpdateScrollbarWidth()}valueChanged(){this.textArea&&(this.textArea.value=this.value,this.isInputEmpty=this.shouldDisableSendButton(),this.adjustTextAreaHeight(),this.queueUpdateScrollbarWidth())}connectedCallback(){super.connectedCallback(),this.textArea.value=this.value,this.isInputEmpty=this.shouldDisableSendButton(),this.adjustTextAreaHeight(),this.resizeObserver=new ResizeObserver(()=>this.onResize()),this.resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver?.disconnect()}sendButtonClickHandler(){if(this.shouldDisableSendButton())return
 const t={text:this.textArea.value}
 this.resetInput(),this.$emit("send",t)}stopButtonClickHandler(){this.processing&&(this.$emit("stop"),this.textArea?.blur())}shouldDisableSendButton(){return 0===this.textArea.value.length}resetInput(){this.value="",this.isInputEmpty=!0,this.textArea&&(this.textArea.value="",this.adjustTextAreaHeight(),this.textArea.focus())}onResize(){this.adjustTextAreaHeight(),this.scrollbarWidth=this.textArea.offsetWidth-this.textArea.clientWidth}queueUpdateScrollbarWidth(){this.$fastController.isConnected&&(this.updateScrollbarWidthQueued||(this.updateScrollbarWidthQueued=!0,b.queueUpdate(()=>this.updateScrollbarWidth())))}adjustTextAreaHeight(){if(r1.fieldSizingSupported||!this.textArea)return
 const t=this.textArea
-t.style.height="auto",t.style.height=`${t.scrollHeight}px`}updateScrollbarWidth(){this.updateScrollbarWidthQueued=!1,this.scrollbarWidth=this.textArea.offsetWidth-this.textArea.clientWidth}}r1.fieldSizingSupported=CSS.supports("field-sizing","content"),t([pt],r1.prototype,"placeholder",void 0),t([pt({attribute:"send-button-label"})],r1.prototype,"sendButtonLabel",void 0),t([pt({attribute:"stop-button-label"})],r1.prototype,"stopButtonLabel",void 0),t([pt],r1.prototype,"value",void 0),t([pt({attribute:"tabindex",converter:ht})],r1.prototype,"tabIndex",void 0),t([pt({attribute:"maxlength",converter:ht})],r1.prototype,"maxLength",void 0),t([pt({attribute:"processing",mode:"boolean"})],r1.prototype,"processing",void 0),t([pt({attribute:"send-disabled",mode:"boolean"})],r1.prototype,"sendDisabled",void 0),t([C],r1.prototype,"textArea",void 0),t([C],r1.prototype,"isInputEmpty",void 0),t([C],r1.prototype,"scrollbarWidth",void 0)
+t.style.height="auto",t.style.height=`${t.scrollHeight}px`}updateScrollbarWidth(){this.updateScrollbarWidthQueued=!1,this.scrollbarWidth=this.textArea.offsetWidth-this.textArea.clientWidth}}r1.fieldSizingSupported=CSS.supports("field-sizing","content"),t([pt],r1.prototype,"placeholder",void 0),t([pt({attribute:"send-button-label"})],r1.prototype,"sendButtonLabel",void 0),t([pt({attribute:"stop-button-label"})],r1.prototype,"stopButtonLabel",void 0),t([pt],r1.prototype,"value",void 0),t([pt({attribute:"tabindex",converter:ht})],r1.prototype,"tabIndex",void 0),t([pt({attribute:"maxlength",converter:ht})],r1.prototype,"maxLength",void 0),t([pt({attribute:"processing",mode:"boolean"})],r1.prototype,"processing",void 0),t([pt({attribute:"send-disabled",mode:"boolean"})],r1.prototype,"sendDisabled",void 0),t([C],r1.prototype,"textArea",void 0),t([C],r1.prototype,"isInputEmpty",void 0),t([C],r1.prototype,"scrollbarWidth",void 0),t([C],r1.prototype,"footerActionsIsEmpty",void 0),t([C],r1.prototype,"slottedFooterActionsElements",void 0),t([C],r1.prototype,"attachmentsIsEmpty",void 0),t([C],r1.prototype,"slottedAttachmentsElements",void 0)
 const s1=r1.compose({baseName:"chat-input",template:o1,styles:i1,shadowOptions:{delegatesFocus:!0}})
 Mi.getOrCreate().withPrefix("spright").register(s1())
 const a1={system:void 0,outbound:"outbound",inbound:"inbound"},l1=_t`