@nyaruka/temba-components 0.112.0 → 0.113.0

package/CHANGELOG.md

@@ -4,8 +4,14 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v0.113.0](https://github.com/nyaruka/temba-components/compare/v0.112.0...v0.113.0)
+
+- Ensure initial index doesn't fire without tabs [`#467`](https://github.com/nyaruka/temba-components/pull/467)
+
 #### [v0.112.0](https://github.com/nyaruka/temba-components/compare/v0.111.5...v0.112.0)
 
+> 23 November 2024
+
 - Rework TembaUser, active flows, and several bug fixes [`#466`](https://github.com/nyaruka/temba-components/pull/466)
 - Make configurable whether run list allows deletion [`#464`](https://github.com/nyaruka/temba-components/pull/464)
 - TembaUser as EndpointMonitor. Add active flow in chat. [`fbf6299`](https://github.com/nyaruka/temba-components/commit/fbf62996face5f8bb417c924ee18a4dc311a29f4)

package/dist/temba-components.js

@@ -4138,7 +4138,7 @@ let vr=Qs,br=!1;const yr=["es","fr","pt"],{setLocale:xr}=(t=>(function(t){if(br)
 
       .tab .name {
         margin-left: 0.4em;
-        max-width: 80px;
+        max-width: 200px;
         overflow: hidden;
         transition: max-width 500ms ease-in-out, margin 500ms ease-in-out;
         white-space: nowrap;
@@ -4334,7 +4334,7 @@ let vr=Qs,br=!1;const yr=["es","fr","pt"],{setLocale:xr}=(t=>(function(t){if(br)
       .pane {
         display: flex;
       }
-    `}handleTabClick(t){const e=parseInt(t.currentTarget.dataset.index);this.unselect&&this.index===e?this.index=-1:this.index=e,t.preventDefault(),t.stopPropagation(),this.requestUpdate("index")}handleSlotChange(){const t=[];for(const e of this.children)if("TEMBA-TAB"===e.tagName){const i=e;t.push(i)}this.tabs=t}firstUpdated(t){super.firstUpdated(t),this.shadowRoot.addEventListener("slotchange",this.handleSlotChange.bind(this))}updated(t){if(super.updated(t),(t.has("index")||t.has("tabs"))&&(this.tabs.forEach(((t,e)=>{t.selected=e==this.index})),this.fireEvent(Oe.ContextChanged)),this.index>this.tabs.length){const t=this.tabs[this.index];if(t&&t.hidden)for(let t=0;t<this.tabs.length;t++){const e=this.tabs[t];if(e&&!e.hidden)return void(this.index=t)}}}focusTab(t){const e=this.tabs.findIndex((e=>e.name===t));if(e>=0)return this.index=e,this.getTab(e)}setTabDetails(t,e){if(t<this.tabs.length){const i=this.tabs[t];i.count=e.count,i.hidden=e.hidden,this.requestUpdate()}else setTimeout((()=>{this.setTabDetails(t,e)}),100)}getCurrentTab(){return this.tabs[this.index]}getTab(t){return this.tabs[t]}handleTabContentChanged(){this.requestUpdate()}handleTabDetailsChanged(){this.requestUpdate()}render(){const t=this.tabs[this.index];return Z`
+    `}handleTabClick(t){const e=parseInt(t.currentTarget.dataset.index);this.unselect&&this.index===e?this.index=-1:this.index=e,t.preventDefault(),t.stopPropagation(),this.requestUpdate("index")}handleSlotChange(){const t=[];for(const e of this.children)if("TEMBA-TAB"===e.tagName){const i=e;t.push(i)}this.tabs=t,this.index=0}firstUpdated(t){super.firstUpdated(t),this.shadowRoot.addEventListener("slotchange",this.handleSlotChange.bind(this))}updated(t){if(super.updated(t),t.has("tabs")&&this.tabs.forEach(((t,e)=>{t.selected=e==this.index})),t.has("index")&&this.tabs.length>=0&&this.index!==t.get("index")&&(this.tabs.forEach(((t,e)=>{t.selected=e==this.index})),this.fireEvent(Oe.ContextChanged)),this.index>this.tabs.length){const t=this.tabs[this.index];if(t&&t.hidden)for(let t=0;t<this.tabs.length;t++){const e=this.tabs[t];if(e&&!e.hidden)return void(this.index=t)}}}focusTab(t){const e=this.tabs.findIndex((e=>e.name===t));if(e>=0)return this.index=e,this.getTab(e)}setTabDetails(t,e){if(t<this.tabs.length){const i=this.tabs[t];i.count=e.count,i.hidden=e.hidden,this.requestUpdate()}else setTimeout((()=>{this.setTabDetails(t,e)}),100)}getCurrentTab(){return this.tabs[this.index]}getTab(t){return this.tabs[t]}handleTabContentChanged(){this.requestUpdate()}handleTabDetailsChanged(){this.requestUpdate()}render(){const t=this.tabs[this.index];return Z`
       ${this.bottom?Z`<div
             class="pane ${jt({first:0==this.index,embedded:this.embedded,bottom:this.bottom})}"
           >
@@ -6407,7 +6407,7 @@ let vr=Qs,br=!1;const yr=["es","fr","pt"],{setLocale:xr}=(t=>(function(t){if(br)
       .quick-replies {
         background: #f9f9f9;
       }
-    `}constructor(){super(),this.index=1,this.maxAttachments=3,this.maxLength=640,this.currentText="",this.initialText="",this.accept="",this.endpoint=Rt,this.languages=[],this.currentAttachments=[],this.currentQuickReplies=[],this.currentOptin=[],this.variables=[],this.optinEndpoint="/api/v2/optins.json",this.templateEndpoint="/api/internal/templates.json",this.empty=!0,this.langValues={},this.currentLanguage="und",this.hasPendingText=!1}isBaseLanguage(){return"und"==this.currentLanguage||this.currentLanguage==this.languages[0].iso}handleTabChanged(){const t=this.shadowRoot.querySelector("temba-tabs");if(this.currentTab=t.getCurrentTab(),this.currentTab&&"Shortcuts"===this.currentTab.name){this.shadowRoot.querySelector("temba-shortcuts").filter=""}this.setFocusOnChatbox()}firstUpdated(t){var e,i;super.firstUpdated(t),t.has("languages")&&this.languages.length>0&&(this.currentLanguage=this.languages[0].iso),t.has("value")&&(this.langValues=this.getDeserializedValue()||{},this.variables=(null===(e=this.langValues[this.currentLanguage])||void 0===e?void 0:e.variables)||[],this.template=(null===(i=this.langValues[this.currentLanguage])||void 0===i?void 0:i.template)||null),this.setFocusOnChatbox()}updated(t){if(super.updated(t),t.has("currentLanguage")&&this.langValues){let t={text:"",attachments:[],quick_replies:[]};this.currentLanguage in this.langValues&&(t=this.langValues[this.currentLanguage]),this.currentText=t.text,this.initialText=t.text,this.currentAttachments=t.attachments,this.currentQuickReplies=(t.quick_replies||[]).map((t=>({name:t,value:t}))),this.currentOptin=t.optin?[t.optin]:[],this.setFocusOnChatbox();const e=this.shadowRoot.querySelector(".chatbox");e&&(e.value=this.initialText),this.resetTabs(),this.requestUpdate("currentAttachments")}if(this.langValues&&(t.has("currentText")||t.has("currentAttachments")||t.has("currentQuickReplies"))||t.has("currentOptin")||t.has("currentTemplate")||t.has("variables")){this.checkIfEmpty();const t=this.currentText?this.currentText.trim():"";t||(this.currentAttachments||[]).length>0||this.currentQuickReplies.length>0||this.variables.length>0?this.langValues[this.currentLanguage]={text:t,attachments:this.currentAttachments,quick_replies:this.currentQuickReplies.map((t=>t.value)),optin:this.currentOptin.length>0?this.currentOptin[0]:null,template:this.currentTemplate?this.currentTemplate.uuid:null,variables:this.variables,locale:this.locale}:delete this.langValues[this.currentLanguage],this.fireCustomEvent(Oe.ContentChanged,this.langValues),this.requestUpdate("langValues"),this.setValue(this.langValues)}}handleAttachmentsChanged(t){const e=t.target;this.currentAttachments=e.attachments,this.requestUpdate()}setFocusOnChatbox(){const t=this.shadowRoot.querySelector(".chatbox");t&&window.setTimeout((()=>{t.focus()}),0)}reset(){const t=this.shadowRoot.querySelector(".chatbox");t&&(t.textInputElement.value="",t.value="",this.initialText="",this.currentText="",this.currentQuickReplies=[],this.currentAttachments=[],this.resetTabs())}handleQuickReplyChange(){this.requestUpdate("currentQuickReplies")}handleOptInChange(t){this.currentOptin=t.target.values,this.requestUpdate("optIn")}handleChatboxChange(t){const e=t.target.getTextInput().inputElement;this.currentText=e.value,this.hasPendingText=e.value.length>0;const i=e.selectionStart,o=e.value,n=o.lastIndexOf("\n",i-1)+1,s=o.substring(n,i);if(s.startsWith("/")){this.shadowRoot.querySelector("temba-tabs").focusTab("Shortcuts");this.shadowRoot.querySelector("temba-shortcuts").filter=s.substring(1)}}checkIfEmpty(){const t=0===this.currentText.trim().length,e=0===this.currentAttachments.length;this.attachments?this.empty=t&&e:this.empty=t}getCurrentLine(){const t=this.shadowRoot.querySelector(".chatbox"),e=t.getTextInput().inputElement.selectionStart-1,i=t.value.substring(0,e).lastIndexOf("\n")+1;let o=t.value.indexOf("\n",i);return-1===o&&(o=t.value.length),{text:t.value.substring(i,o),index:i}}handleKeyDown(t){const e=this.shadowRoot.querySelector("temba-tabs"),i=parseInt(t.key);if(!Number.isNaN(i)&&i>0&&t.ctrlKey&&t.metaKey&&i<=e.tabs.length&&(e.index=i-1),"/"===t.key&&"Shortcuts"!==this.currentTab.name){1===this.getCurrentLine().text.trim().trim().length&&(t.preventDefault(),e.index=e.tabs.findIndex((t=>"Shortcuts"===t.name)))}else if("Backspace"===t.key){"/"===this.getCurrentLine().text&&(e.index=e.tabs.findIndex((t=>"Reply"===t.name)))}if(("Shortcuts"!==this.currentTab.name||"Enter"!==t.key||t.shiftKey)&&"Enter"===t.key&&!t.shiftKey)if(t.preventDefault(),this.completion){t.target.hasVisibleOptions()||this.triggerSend()}else this.triggerSend()}triggerSend(){this.empty||this.fireCustomEvent(Oe.Submitted,{langValues:this.langValues})}handleLanguageChange(t){const e=t.target;this.currentLanguage=e.values[0].iso}resetTabs(){this.shadowRoot.querySelector("temba-tabs").index=0}getTabs(){return this.shadowRoot.querySelector("temba-tabs")}render(){return Z`
+    `}constructor(){super(),this.index=1,this.maxAttachments=3,this.maxLength=640,this.currentText="",this.initialText="",this.accept="",this.endpoint=Rt,this.languages=[],this.currentAttachments=[],this.currentQuickReplies=[],this.currentOptin=[],this.variables=[],this.optinEndpoint="/api/v2/optins.json",this.templateEndpoint="/api/internal/templates.json",this.empty=!0,this.langValues={},this.currentLanguage="und",this.hasPendingText=!1}isBaseLanguage(){return"und"==this.currentLanguage||this.currentLanguage==this.languages[0].iso}handleTabChanged(){const t=this.shadowRoot.querySelector("temba-tabs");if(this.currentTab=t.getCurrentTab(),this.currentTab&&"Shortcuts"===this.currentTab.name){this.shadowRoot.querySelector("temba-shortcuts").filter=""}this.setFocusOnChatbox()}firstUpdated(t){var e,i;super.firstUpdated(t),t.has("languages")&&this.languages.length>0&&(this.currentLanguage=this.languages[0].iso),t.has("value")&&(this.langValues=this.getDeserializedValue()||{},this.variables=(null===(e=this.langValues[this.currentLanguage])||void 0===e?void 0:e.variables)||[],this.template=(null===(i=this.langValues[this.currentLanguage])||void 0===i?void 0:i.template)||null),this.setFocusOnChatbox()}updated(t){if(super.updated(t),t.has("currentLanguage")&&this.langValues){let t={text:"",attachments:[],quick_replies:[]};this.currentLanguage in this.langValues&&(t=this.langValues[this.currentLanguage]),this.currentText=t.text,this.initialText=t.text,this.currentAttachments=t.attachments,this.currentQuickReplies=(t.quick_replies||[]).map((t=>({name:t,value:t}))),this.currentOptin=t.optin?[t.optin]:[],this.setFocusOnChatbox();const e=this.shadowRoot.querySelector(".chatbox");e&&(e.value=this.initialText),this.resetTabs(),this.requestUpdate("currentAttachments")}if(this.langValues&&(t.has("currentText")||t.has("currentAttachments")||t.has("currentQuickReplies"))||t.has("currentOptin")||t.has("currentTemplate")||t.has("variables")){this.checkIfEmpty();const t=this.currentText?this.currentText.trim():"";t||(this.currentAttachments||[]).length>0||this.currentQuickReplies.length>0||this.variables.length>0?this.langValues[this.currentLanguage]={text:t,attachments:this.currentAttachments,quick_replies:this.currentQuickReplies.map((t=>t.value)),optin:this.currentOptin.length>0?this.currentOptin[0]:null,template:this.currentTemplate?this.currentTemplate.uuid:null,variables:this.variables,locale:this.locale}:delete this.langValues[this.currentLanguage],this.fireCustomEvent(Oe.ContentChanged,this.langValues),this.requestUpdate("langValues"),this.setValue(this.langValues)}}handleAttachmentsChanged(t){const e=t.target;this.currentAttachments=e.attachments,this.requestUpdate()}setFocusOnChatbox(){const t=this.shadowRoot.querySelector(".chatbox");t&&window.setTimeout((()=>{t.focus()}),0)}reset(){const t=this.shadowRoot.querySelector(".chatbox");t&&(t.textInputElement.value="",t.value="",this.initialText="",this.currentText="",this.currentQuickReplies=[],this.currentAttachments=[],this.resetTabs())}handleQuickReplyChange(){this.requestUpdate("currentQuickReplies")}handleOptInChange(t){this.currentOptin=t.target.values,this.requestUpdate("optIn")}handleChatboxChange(t){const e=t.target.getTextInput().inputElement;this.currentText=e.value,this.hasPendingText=e.value.length>0;const i=e.selectionStart,o=e.value,n=o.lastIndexOf("\n",i-1)+1,s=o.substring(n,i);if(s.startsWith("/")){"Shortcuts"!==this.currentTab.name&&this.getTabs().focusTab("Shortcuts");this.shadowRoot.querySelector("temba-shortcuts").filter=s.substring(1)}}checkIfEmpty(){const t=0===this.currentText.trim().length,e=0===this.currentAttachments.length;this.attachments?this.empty=t&&e:this.empty=t}getCurrentLine(){const t=this.shadowRoot.querySelector(".chatbox"),e=t.getTextInput().inputElement.selectionStart-1,i=t.value.substring(0,e).lastIndexOf("\n")+1;let o=t.value.indexOf("\n",i);return-1===o&&(o=t.value.length),{text:t.value.substring(i,o),index:i}}handleKeyDown(t){const e=this.shadowRoot.querySelector("temba-tabs"),i=parseInt(t.key);if(!Number.isNaN(i)&&i>0&&t.ctrlKey&&t.metaKey&&i<=e.tabs.length&&(e.index=i-1),"Backspace"===t.key){"/"===this.getCurrentLine().text&&e.focusTab("Reply")}if(("Shortcuts"!==this.currentTab.name||"Enter"!==t.key||t.shiftKey)&&"Enter"===t.key&&!t.shiftKey)if(t.preventDefault(),this.completion){t.target.hasVisibleOptions()||this.triggerSend()}else this.triggerSend()}triggerSend(){this.empty||this.fireCustomEvent(Oe.Submitted,{langValues:this.langValues})}handleLanguageChange(t){const e=t.target;this.currentLanguage=e.values[0].iso}resetTabs(){this.getTabs().focusTab("Reply")}getTabs(){return this.shadowRoot.querySelector("temba-tabs")}render(){return Z`
       <temba-field
         name=${this.name}
         .errors=${this.errors}
@@ -6431,7 +6431,6 @@ let vr=Qs,br=!1;const yr=["es","fr","pt"],{setLocale:xr}=(t=>(function(t){if(br)
       <temba-tabs
         embedded
         focusedname
-        index="0"
         @temba-context-changed=${this.handleTabChanged}
         refresh="${(this.currentAttachments||[]).length}|${this.index}|${this.currentQuickReplies.length}|${t}|${this.currentOptin}|${e}|${this.currentTemplate}"
       >