@ni/ok-components 0.2.12 → 0.2.13

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

@@ -15799,6 +15799,7 @@ const m0=f0.compose({baseName:"chat-conversation",template:u0,styles:h0})
 Mi.getOrCreate().withPrefix("spright").register(m0())
 const g0=Mt`
     ${d0("flex")}
+    ${qg}
 
     :host {
         width: 100%;
@@ -15840,6 +15841,22 @@ const g0=Mt`
         border-bottom-color: ${oc};
     }
 
+    :host([error-visible]) .container::after {
+        border-bottom-color: ${tc};
+    }
+        
+    :host([error-visible]) .container {
+        border-bottom-color: ${tc};
+    }
+
+    :host([error-visible]:hover) .container::after {
+        border-bottom-color: ${tc};
+    }
+
+    :host([error-visible]:focus-within) .container {
+        border-bottom-color: ${tc};
+    }
+
     @media (prefers-reduced-motion) {
         .container::after {
             transition-duration: 0s;
@@ -15866,6 +15883,17 @@ const g0=Mt`
         color: ${dd};
     }
 
+    :host([error-visible]) .error-icon {
+        display: none;
+    }
+
+    :host([error-visible]) .error-icon.scrollbar-width-calculated {
+        display: inline-flex;
+        position: absolute;
+        top: ${yc};
+        right: var(--ni-private-scrollbar-width);
+    }
+
     .action-button {
         align-self: flex-end;
         width: 80px;
@@ -15895,10 +15923,16 @@ const g0=Mt`
         ${t=>t.processing?t.stopButtonLabel:t.sendButtonLabel}
         ${Ut((t=>t.processing),Q`<${Vv} slot="start"></${Vv}>`,Q`<${zv} slot="start"></${zv}>`)}
     </${uh}>
+    <${_g}
+        severity="error"
+        class="error-icon ${t=>t.scrollbarWidth>=0?"scrollbar-width-calculated":""}"
+        style="--ni-private-scrollbar-width: ${t=>t.scrollbarWidth}px;"
+    ></${_g}>
+    ${Zg}
 </div>`
-class b0 extends Ve{constructor(){super(...arguments),this.value="",this.maxLength=-1,this.processing=!1,this.disableSendButton=!0}textAreaKeydownHandler(t){return!(t.key===sn&&!t.shiftKey)||(this.processing||this.sendButtonClickHandler(),!1)}textAreaInputHandler(){this.value=this.textArea.value,this.disableSendButton=this.shouldDisableSendButton()}valueChanged(){this.textArea&&(this.textArea.value=this.value,this.disableSendButton=this.shouldDisableSendButton())}connectedCallback(){super.connectedCallback(),this.textArea.value=this.value,this.disableSendButton=this.shouldDisableSendButton()}sendButtonClickHandler(){if(this.shouldDisableSendButton())return
+class b0 extends(Kg(Ve)){constructor(){super(...arguments),this.value="",this.maxLength=-1,this.processing=!1,this.disableSendButton=!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.disableSendButton=this.shouldDisableSendButton(),this.queueUpdateScrollbarWidth()}placeholderChanged(){this.queueUpdateScrollbarWidth()}valueChanged(){this.textArea&&(this.textArea.value=this.value,this.disableSendButton=this.shouldDisableSendButton(),this.queueUpdateScrollbarWidth())}connectedCallback(){super.connectedCallback(),this.textArea.value=this.value,this.disableSendButton=this.shouldDisableSendButton(),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.disableSendButton=!0,this.textArea&&(this.textArea.value="",this.textArea.focus())}}t([ft],b0.prototype,"placeholder",void 0),t([ft({attribute:"send-button-label"})],b0.prototype,"sendButtonLabel",void 0),t([ft({attribute:"stop-button-label"})],b0.prototype,"stopButtonLabel",void 0),t([ft],b0.prototype,"value",void 0),t([ft({attribute:"tabindex",converter:ut})],b0.prototype,"tabIndex",void 0),t([ft({attribute:"maxlength",converter:ut})],b0.prototype,"maxLength",void 0),t([ft({attribute:"processing",mode:"boolean"})],b0.prototype,"processing",void 0),t([C],b0.prototype,"textArea",void 0),t([C],b0.prototype,"disableSendButton",void 0)
+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.disableSendButton=!0,this.textArea&&(this.textArea.value="",this.textArea.focus())}onResize(){this.scrollbarWidth=this.textArea.offsetWidth-this.textArea.clientWidth}queueUpdateScrollbarWidth(){this.$fastController.isConnected&&(this.updateScrollbarWidthQueued||(this.updateScrollbarWidthQueued=!0,b.queueUpdate((()=>this.updateScrollbarWidth()))))}updateScrollbarWidth(){this.updateScrollbarWidthQueued=!1,this.scrollbarWidth=this.textArea.offsetWidth-this.textArea.clientWidth}}t([ft],b0.prototype,"placeholder",void 0),t([ft({attribute:"send-button-label"})],b0.prototype,"sendButtonLabel",void 0),t([ft({attribute:"stop-button-label"})],b0.prototype,"stopButtonLabel",void 0),t([ft],b0.prototype,"value",void 0),t([ft({attribute:"tabindex",converter:ut})],b0.prototype,"tabIndex",void 0),t([ft({attribute:"maxlength",converter:ut})],b0.prototype,"maxLength",void 0),t([ft({attribute:"processing",mode:"boolean"})],b0.prototype,"processing",void 0),t([C],b0.prototype,"textArea",void 0),t([C],b0.prototype,"disableSendButton",void 0),t([C],b0.prototype,"scrollbarWidth",void 0)
 const y0=b0.compose({baseName:"chat-input",template:v0,styles:g0,shadowOptions:{delegatesFocus:!0}})
 Mi.getOrCreate().withPrefix("spright").register(y0())
 const w0={system:void 0,outbound:"outbound",inbound:"inbound"},x0=Mt`