@ni/spright-components 6.2.0 → 6.3.0

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

@@ -15201,6 +15201,11 @@ const SJ=t=>`${Hs(t)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host
         border: ${Vl} solid ${dl};
     }
 
+    :host([appearance='overlay']) {
+        background: none;
+        border-color: transparent;
+    }
+
     .messages {
         flex: 1;
         display: flex;
@@ -15213,6 +15218,10 @@ const SJ=t=>`${Hs(t)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host
         overflow-y: auto;
     }
 
+    :host([appearance='overlay']) .messages {
+        background: none;
+    }
+
     .input {
         padding: ${Vl} ${Bl} ${Bl}
             ${Bl};
@@ -15227,22 +15236,24 @@ const SJ=t=>`${Hs(t)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host
     <slot name="input" ${ie({property:"slottedInputElements"})}>
     </slot>
 </div>
-`
-class MJ extends je{constructor(){super(...arguments),this.inputEmpty=!0}slottedInputElementsChanged(t,e){this.inputEmpty=!e?.length}}t([C],MJ.prototype,"inputEmpty",void 0),t([C],MJ.prototype,"slottedInputElements",void 0)
-const $J=MJ.compose({baseName:"chat-conversation",template:IJ,styles:_J})
-Di.getOrCreate().withPrefix("spright").register($J())
-const DJ=Mt`
+`,MJ={default:void 0}
+class $J extends je{constructor(){super(...arguments),this.appearance=MJ.default,this.inputEmpty=!0}slottedInputElementsChanged(t,e){this.inputEmpty=!e?.length}}t([ft],$J.prototype,"appearance",void 0),t([C],$J.prototype,"inputEmpty",void 0),t([C],$J.prototype,"slottedInputElements",void 0)
+const DJ=$J.compose({baseName:"chat-conversation",template:IJ,styles:_J})
+Di.getOrCreate().withPrefix("spright").register(DJ())
+const EJ=Mt`
     ${SJ("flex")}
 
     :host {
         width: 100%;
         height: auto;
+        outline: none;
+        --ni-private-hover-indicator-width: calc(${Vl} + 1px);
     }
 
     .container {
-        display: grid;
-        grid-template-rows: auto 1fr;
-        grid-template-columns: 1fr auto;
+        display: flex;
+        flex-direction: column;
+        position: relative;
         width: 100%;
         height: 100%;
 
@@ -15251,10 +15262,34 @@ const DJ=Mt`
         box-shadow: ${Kl};
     }
 
-    textarea {
-        grid-row: 1;
-        grid-column: 1 / 3;
+    .container::after {
+        content: '';
+        position: absolute;
+        bottom: calc(-1 * ${Vl});
+        width: 0px;
+        height: 0px;
+        align-self: center;
+        border-bottom: ${Cl}
+            var(--ni-private-hover-indicator-width) solid;
+        transition: width ${nh} ease-in;
+    }
 
+    :host(:hover) .container::after {
+        width: 100%;
+        transition: width ${nh} ease-in;
+    }
+
+    :host(:focus-within) .container {
+        border-bottom-color: ${Cl};
+    }
+
+    @media (prefers-reduced-motion) {
+        .container::after {
+            transition-duration: 0s;
+        }
+    }
+
+    textarea {
         font: ${Qc};
         color: ${td};
         background-color: transparent;
@@ -15275,12 +15310,11 @@ const DJ=Mt`
     }
 
     .send-button {
-        grid-row: 2;
-        grid-column: 2;
+        align-self: flex-end;
         width: 80px;
         margin: ${Ll};
     }
-`,EJ=Q`
+`,AJ=Q`
 <div class="container">
     <textarea
         ${Ut("textArea")}
@@ -15304,12 +15338,12 @@ const DJ=Mt`
         <${ob} slot="start"><${ob}/>
     </${zh}>    
 </div>`
-class AJ extends je{constructor(){super(...arguments),this.value="",this.disableSendButton=!0}textAreaKeydownHandler(t){return!(t.key===dn&&!t.shiftKey)||(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 OJ extends je{constructor(){super(...arguments),this.value="",this.disableSendButton=!0}textAreaKeydownHandler(t){return!(t.key===dn&&!t.shiftKey)||(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
 const t={text:this.textArea.value}
-this.resetInput(),this.$emit("send",t)}shouldDisableSendButton(){return 0===this.textArea.value.length}resetInput(){this.value="",this.disableSendButton=!0,this.textArea&&(this.textArea.value="",this.textArea.focus())}}t([ft],AJ.prototype,"placeholder",void 0),t([ft({attribute:"send-button-label"})],AJ.prototype,"sendButtonLabel",void 0),t([ft],AJ.prototype,"value",void 0),t([ft({attribute:"tabindex",converter:ut})],AJ.prototype,"tabIndex",void 0),t([C],AJ.prototype,"textArea",void 0),t([C],AJ.prototype,"disableSendButton",void 0)
-const OJ=AJ.compose({baseName:"chat-input",template:EJ,styles:DJ,shadowOptions:{delegatesFocus:!0}})
-Di.getOrCreate().withPrefix("spright").register(OJ())
-const TJ={system:void 0,outbound:"outbound",inbound:"inbound"},RJ=Mt`
+this.resetInput(),this.$emit("send",t)}shouldDisableSendButton(){return 0===this.textArea.value.length}resetInput(){this.value="",this.disableSendButton=!0,this.textArea&&(this.textArea.value="",this.textArea.focus())}}t([ft],OJ.prototype,"placeholder",void 0),t([ft({attribute:"send-button-label"})],OJ.prototype,"sendButtonLabel",void 0),t([ft],OJ.prototype,"value",void 0),t([ft({attribute:"tabindex",converter:ut})],OJ.prototype,"tabIndex",void 0),t([C],OJ.prototype,"textArea",void 0),t([C],OJ.prototype,"disableSendButton",void 0)
+const TJ=OJ.compose({baseName:"chat-input",template:AJ,styles:EJ,shadowOptions:{delegatesFocus:!0}})
+Di.getOrCreate().withPrefix("spright").register(TJ())
+const RJ={system:void 0,outbound:"outbound",inbound:"inbound"},FJ=Mt`
     ${SJ("flex")}
 
     :host {
@@ -15323,11 +15357,11 @@ const TJ={system:void 0,outbound:"outbound",inbound:"inbound"},RJ=Mt`
         color: ${td};
     }
 
-    :host([message-type='${TJ.outbound}']) {
+    :host([message-type='${RJ.outbound}']) {
         justify-content: flex-end;
     }
 
-    :host([message-type='${TJ.inbound}']) {
+    :host([message-type='${RJ.inbound}']) {
         justify-content: flex-start;
     }
 
@@ -15347,7 +15381,7 @@ const TJ={system:void 0,outbound:"outbound",inbound:"inbound"},RJ=Mt`
         overflow-x: auto;
     }
 
-    :host([message-type='${TJ.outbound}']) .message-content {
+    :host([message-type='${RJ.outbound}']) .message-content {
         background: ${ul};
         border: ${Vl} solid ${Cl};
         border-radius: ${Ll} ${Ll} 0px ${Ll};
@@ -15358,7 +15392,7 @@ const TJ={system:void 0,outbound:"outbound",inbound:"inbound"},RJ=Mt`
         display: none;
     }
 
-    :host([message-type='${TJ.inbound}'])
+    :host([message-type='${RJ.inbound}'])
         .footer-actions.has-content {
         display: flex;
         column-gap: ${Bl};
@@ -15376,14 +15410,14 @@ const TJ={system:void 0,outbound:"outbound",inbound:"inbound"},RJ=Mt`
         display: none;
     }
 
-    :host([message-type='${TJ.inbound}']) .end {
+    :host([message-type='${RJ.inbound}']) .end {
         display: flex;
         column-gap: ${Bl};
         margin-top: ${zl};
     }
 `
-class FJ extends je{constructor(){super(...arguments),this.messageType=TJ.system,this.footerActionsIsEmpty=!0}slottedFooterActionsElementsChanged(t,e){this.footerActionsIsEmpty=!e?.length}}t([ft({attribute:"message-type"})],FJ.prototype,"messageType",void 0),t([C],FJ.prototype,"footerActionsIsEmpty",void 0),t([C],FJ.prototype,"slottedFooterActionsElements",void 0),Ze(FJ,re)
-const NJ=FJ.compose({baseName:"chat-message",template:(t,e)=>Q`
+class NJ extends je{constructor(){super(...arguments),this.messageType=RJ.system,this.footerActionsIsEmpty=!0}slottedFooterActionsElementsChanged(t,e){this.footerActionsIsEmpty=!e?.length}}t([ft({attribute:"message-type"})],NJ.prototype,"messageType",void 0),t([C],NJ.prototype,"footerActionsIsEmpty",void 0),t([C],NJ.prototype,"slottedFooterActionsElements",void 0),Ze(NJ,re)
+const LJ=NJ.compose({baseName:"chat-message",template:(t,e)=>Q`
     <div class="container">
         ${le(0,e)}
         <section class="message-content">
@@ -15397,9 +15431,9 @@ const NJ=FJ.compose({baseName:"chat-message",template:(t,e)=>Q`
         </section>
         ${ae(0,e)}
     </div>
-`,styles:RJ})
-Di.getOrCreate().withPrefix("spright").register(NJ())
-const LJ=Mt`
+`,styles:FJ})
+Di.getOrCreate().withPrefix("spright").register(LJ())
+const BJ=Mt`
     ${SJ("inline-block")}
 
     :host {
@@ -15422,7 +15456,7 @@ const LJ=Mt`
     :host([disabled]) slot {
         color: ${ed};
     }
-`,BJ=Q`<slot></slot>`
-const zJ=class extends je{}.compose({baseName:"rectangle",template:BJ,styles:LJ})
-Di.getOrCreate().withPrefix("spright").register(zJ())}()
+`,zJ=Q`<slot></slot>`
+const VJ=class extends je{}.compose({baseName:"rectangle",template:zJ,styles:BJ})
+Di.getOrCreate().withPrefix("spright").register(VJ())}()
 //# sourceMappingURL=all-components-bundle.min.js.map