@nyaruka/temba-components 0.156.10 → 0.156.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/dist/temba-components.js +21 -4
- package/dist/temba-components.js.map +1 -1
- package/package.json +1 -1
- package/src/flow/types.ts +1 -1
- package/src/form/Compose.ts +73 -3
- package/src/form/select/Select.ts +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -4,8 +4,15 @@ All notable changes to this project will be documented in this file. Dates are d
|
|
|
4
4
|
|
|
5
5
|
Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
|
|
6
6
|
|
|
7
|
+
#### [v0.156.11](https://github.com/nyaruka/temba-components/compare/v0.156.10...v0.156.11)
|
|
8
|
+
|
|
9
|
+
- Visualize translation status in Compose language selector [`#986`](https://github.com/nyaruka/temba-components/pull/986)
|
|
10
|
+
- Use distinct icon for Say Message canvas shortcut [`#985`](https://github.com/nyaruka/temba-components/pull/985)
|
|
11
|
+
|
|
7
12
|
#### [v0.156.10](https://github.com/nyaruka/temba-components/compare/v0.156.9...v0.156.10)
|
|
8
13
|
|
|
14
|
+
> 20 April 2026
|
|
15
|
+
|
|
9
16
|
- Apply code formatting [`#984`](https://github.com/nyaruka/temba-components/pull/984)
|
|
10
17
|
- Make canvas context menu shortcuts declarative per flow type [`#982`](https://github.com/nyaruka/temba-components/pull/982)
|
|
11
18
|
- Hide language selector dropdown for empty flows [`#983`](https://github.com/nyaruka/temba-components/pull/983)
|
package/dist/temba-components.js
CHANGED
|
@@ -1510,7 +1510,7 @@ class ml{constructor(){this.settled=!1,this.promise=new Promise((t,e)=>{this._re
|
|
|
1510
1510
|
color: var(--color-widget-text);
|
|
1511
1511
|
line-height: var(--temba-select-selected-line-height);
|
|
1512
1512
|
--icon-color: var(--color-text-dark);
|
|
1513
|
-
${this.isMultiMode?"vertical-align: middle; background: #fff; border: 1px solid rgba(100,100,100,0.3); user-select: none; border-radius: 2px; align-items: center; flex-direction: row; flex-wrap: nowrap; margin: 2px 2px;":""}
|
|
1513
|
+
${this.isMultiMode?"vertical-align: middle; background: #fff; border: 1px solid rgba(100,100,100,0.3); user-select: none; border-radius: 2px; align-items: center; flex-direction: row; flex-wrap: nowrap; margin: 2px 2px;":"flex: 1; min-width: 0;"}
|
|
1514
1514
|
${e===this.selectedIndex?"background: rgba(100,100,100,0.3);":""}
|
|
1515
1515
|
"
|
|
1516
1516
|
>
|
|
@@ -7173,13 +7173,30 @@ const{I:Oh}=rt,Ph=t=>t,Rh=()=>document.createComment(""),Nh=(t,e,i)=>{const o=t.
|
|
|
7173
7173
|
color: var(--color-text-dark);
|
|
7174
7174
|
background: rgba(0, 0, 0, 0.08);
|
|
7175
7175
|
}
|
|
7176
|
-
`}constructor(){super(),this.index=1,this.maxAttachments=3,this.maxLength=640,this.maxQuickReplies=10,this.templateSession=!1,this.minHeight=150,this.currentText="",this.initialText="",this.accept="",this.endpoint=ce,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,this.showShortcuts=!1,this.shortcutFilter=null,this.shortcutViaIcon=!1,this.lastCaretPosition=0,this.
|
|
7176
|
+
`}constructor(){super(),this.index=1,this.maxAttachments=3,this.maxLength=640,this.maxQuickReplies=10,this.templateSession=!1,this.minHeight=150,this.currentText="",this.initialText="",this.accept="",this.endpoint=ce,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,this.showShortcuts=!1,this.shortcutFilter=null,this.shortcutViaIcon=!1,this.lastCaretPosition=0,this.renderLanguageOption=t=>{const e="display:inline-flex; align-items:center; border-radius:999px; font-size:10px; font-weight:700; line-height:1;";let i;return i=this.languages.length>0&&t.iso===this.languages[0].iso?W`<span
|
|
7177
|
+
style="${e} background:rgba(47, 63, 82, 0.12); color:#2f3f52; padding:3px 7px;"
|
|
7178
|
+
>Original</span
|
|
7179
|
+
>`:this.hasTranslation(t.iso)?W`<span
|
|
7180
|
+
style="${e} background:rgba(26, 127, 55, 0.15); color:#1a7f37; padding:3px 7px;"
|
|
7181
|
+
>Translated</span
|
|
7182
|
+
>`:W`<span
|
|
7183
|
+
style="${e} background:transparent; color:#8a94a1; border:1px solid #c2c8d0; padding:2px 6px;"
|
|
7184
|
+
>Missing</span
|
|
7185
|
+
>`,W`
|
|
7186
|
+
<div
|
|
7187
|
+
style="display:flex; align-items:center; justify-content:space-between; gap:8px; flex:1; padding:2px 8px;"
|
|
7188
|
+
>
|
|
7189
|
+
<span>${t.name}</span>
|
|
7190
|
+
${i}
|
|
7191
|
+
</div>
|
|
7192
|
+
`},this.handleHostKeyDown=t=>{if("Escape"===t.key&&this.showShortcuts)return t.preventDefault(),t.stopPropagation(),void(this.showShortcuts=!1);if("Enter"===t.key&&!t.shiftKey){if(this.showShortcuts)return;const e=this.getMessageEditor();if(e){const t=e.getRichEditor();if(t&&t.hasVisibleOptions())return}t.preventDefault(),t.stopPropagation(),this.triggerSend()}}}isBaseLanguage(){return"und"==this.currentLanguage||this.currentLanguage==this.languages[0].iso}hasTranslation(t){var e;const i=null===(e=this.langValues)||void 0===e?void 0:e[t];return!!i&&!!(i.text&&i.text.trim().length>0||i.attachments&&i.attachments.length>0||i.quick_replies&&i.quick_replies.length>0)}getSortedLanguages(){if(0===this.languages.length)return[];const[t,...e]=this.languages,i=[...e].sort((t,e)=>{const i=this.hasTranslation(t.iso);return i!==this.hasTranslation(e.iso)?i?-1:1:0});return[t,...i]}willUpdate(t){var e,i;if(super.willUpdate(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),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]:[]}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.currentOptin.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.setValue(this.langValues)}}connectedCallback(){super.connectedCallback(),this.hasAttribute("tabindex")||this.setAttribute("tabindex","-1"),this.addEventListener("keydown",this.handleHostKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.handleHostKeyDown)}handleShortcutIconClick(){this.showShortcuts?this.showShortcuts=!1:(this.shortcutFilter="",this.shortcutViaIcon=!0,this.showShortcuts=!0,this.updateComplete.then(()=>{const t=this.shadowRoot.querySelector("temba-shortcuts");t&&(t.filter="",t.showSearch=!0,t.updateComplete.then(()=>{t.focusSearch()}))}))}firstUpdated(t){super.firstUpdated(t),this.setFocusOnEditor()}updated(t){if(super.updated(t),t.has("currentLanguage")&&this.langValues){this.setFocusOnEditor();const t=this.getMessageEditor();if(t){const e=t.getRichEditor();if(e){const t=this.initialText,i=this.currentLanguage;e.value=t;const o=e.inputElement;o&&window.setTimeout(()=>{this.currentLanguage===i&&hh(o,t.length)},0)}}}(this.langValues&&(t.has("currentText")||t.has("currentAttachments")||t.has("currentQuickReplies"))||t.has("currentOptin")||t.has("currentTemplate")||t.has("variables"))&&this.fireCustomEvent(Uo.ContentChanged,this.langValues)}handleLoading(t){this.uploading=t.detail.loading}handleAttachmentsChanged(t){t.detail&&t.detail.attachments&&(this.currentAttachments=t.detail.attachments),this.requestUpdate()}setFocusOnEditor(){const t=this.getMessageEditor();t&&window.setTimeout(()=>{t.focus()},0)}reset(){const t=this.getMessageEditor();if(t){const e=t.getRichEditor();if(e){e.getTextInput().updateValue(""),e.fireEvent("change")}this.initialText="",this.currentText="",this.currentQuickReplies=[],this.currentAttachments=[],this.showShortcuts=!1}}handleQuickReplyChange(){this.requestUpdate("currentQuickReplies")}handleOptInChange(t){this.currentOptin=t.target.values,this.requestUpdate("currentOptin")}handleEditorChange(t){const e=t.target.getRichEditor();if(e&&(this.currentText=e.value||"",this.hasPendingText=this.currentText.length>0,this.lastCaretPosition=e.getCaretPosition(),this.shortcuts)){const t=this.currentText,i=e.getCaretPosition(),o=t.lastIndexOf("\n",i-1)+1,n=t.substring(o,i);n.startsWith("/")?(this.showShortcuts||(this.shortcutViaIcon=!1),this.shortcutFilter=n.substring(1),this.showShortcuts=!0,this.updateComplete.then(()=>{const t=this.shadowRoot.querySelector("temba-shortcuts");t&&(t.showSearch=!1,t.filter=this.shortcutFilter)})):this.showShortcuts=!1}}checkIfEmpty(){const t=0===this.currentText.trim().length,e=0===this.currentAttachments.length;this.attachments?this.empty=t&&e:this.empty=t}handleKeyDown(t){if("Backspace"===t.key&&this.shortcuts&&this.showShortcuts){const t=this.getMessageEditor();if(t){const e=t.getRichEditor();if(e){const t=e.getText(),i=e.getCaretPosition(),o=t.lastIndexOf("\n",i-1)+1;"/"===t.substring(o,i)&&(this.showShortcuts=!1)}}}}triggerSend(){this.checkIfEmpty(),this.empty||this.fireCustomEvent(Uo.Submitted,{langValues:this.langValues})}handleLanguageChange(t){const e=t.target;this.currentLanguage=e.values[0].iso}getShortcutOverlayStyle(){var t;const e=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".container");if(!e)return"";const i=e.getBoundingClientRect(),o=window.innerHeight-i.top,n=i.top-16;return`left: ${i.left}px; bottom: ${o}px; width: ${i.width}px; max-height: ${n}px;`}getMessageEditor(){return this.shadowRoot.querySelector("temba-message-editor")}handleShortcutSelection(t){this.activeShortcut=t.detail.selected;const e=this.getMessageEditor();if(!e)return;const i=e.getRichEditor();if(!i)return;const o=i.getText(),n=i.getCaretPosition()||this.lastCaretPosition,s=o.lastIndexOf("\n",n-1)+1;let r=o.indexOf("\n",s);-1===r&&(r=o.length);let a,l;if(o.substring(s,r).startsWith("/")){const t=o.substring(0,s),e=o.substring(r);a=t+this.activeShortcut.text+e,l=s+this.activeShortcut.text.length}else a=o.substring(0,n)+this.activeShortcut.text+o.substring(n),l=n+this.activeShortcut.text.length;i.getTextInput().updateValue(a),i.fireEvent("change");const d=i.inputElement;d&&(d.focus(),hh(d,l)),this.showShortcuts=!1}handleTemplateChanged(t){var e;this.currentTemplate=t.detail.template,this.locale=null===(e=t.detail.translation)||void 0===e?void 0:e.locale,this.requestUpdate()}handleTemplateVariablesChanged(t){this.variables=[...t.detail.variables]}render(){return this.renderField()}renderWidget(){const t=this.optIns&&this.isBaseLanguage(),e=this.templates&&this.isBaseLanguage(),i=this.quickReplies||t||e;return W`
|
|
7177
7193
|
<div>
|
|
7178
7194
|
${this.languages.length>1?W`<temba-select
|
|
7179
7195
|
@change=${this.handleLanguageChange}
|
|
7180
7196
|
class="language"
|
|
7181
7197
|
name="language"
|
|
7182
|
-
.staticOptions=${this.
|
|
7198
|
+
.staticOptions=${this.getSortedLanguages()}
|
|
7199
|
+
.renderOption=${this.renderLanguageOption}
|
|
7183
7200
|
valueKey="iso"
|
|
7184
7201
|
>
|
|
7185
7202
|
</temba-select>`:null}
|
|
@@ -8838,7 +8855,7 @@ background: #ccc;
|
|
|
8838
8855
|
${this.renderUploader()}
|
|
8839
8856
|
</div>
|
|
8840
8857
|
</div>
|
|
8841
|
-
</div>`}}t([mt({type:String,attribute:!1})],lp.prototype,"endpoint",void 0),t([mt({type:Boolean})],lp.prototype,"pendingDrop",void 0),t([mt({type:Boolean})],lp.prototype,"ignoreDrops",void 0),t([mt({type:String})],lp.prototype,"icon",void 0),t([mt({type:String})],lp.prototype,"accept",void 0),t([mt({type:Number})],lp.prototype,"max",void 0),t([mt({type:Array})],lp.prototype,"attachments",void 0),t([mt({type:Boolean,attribute:!1})],lp.prototype,"uploading",void 0);let dp="dev";try{dp="0.156.
|
|
8858
|
+
</div>`}}t([mt({type:String,attribute:!1})],lp.prototype,"endpoint",void 0),t([mt({type:Boolean})],lp.prototype,"pendingDrop",void 0),t([mt({type:Boolean})],lp.prototype,"ignoreDrops",void 0),t([mt({type:String})],lp.prototype,"icon",void 0),t([mt({type:String})],lp.prototype,"accept",void 0),t([mt({type:Number})],lp.prototype,"max",void 0),t([mt({type:Array})],lp.prototype,"attachments",void 0),t([mt({type:Boolean,attribute:!1})],lp.prototype,"uploading",void 0);let dp="dev";try{dp="0.156.11"}catch(t){}const cp=dp,hp="message",up="voice",pp="background",mp={[hp]:[{type:"send_msg",name:"Send Message",icon:"send"},{type:"wait_for_response",name:"Wait for Response",icon:"message"}],[up]:[{type:"say_msg",name:"Say Message",icon:"recording"},{type:"wait_for_menu",name:"Wait for Menu",icon:"dots-grid"}],[pp]:[{type:"set_contact_field",name:"Update Contact",icon:"contact"}]},gp="ai",fp="airtime",vp={send:"send",contacts:"contacts",save:"save",services:"services",broadcast:"broadcast",trigger:"trigger"},bp={wait:"wait",split:"split"},yp={[vp.send]:{color:"#3498db",title:"Send",description:"Actions that send messages or content to contacts"},[vp.contacts]:{color:"#01c1af",title:"Contact",description:"Actions that update contact information"},[vp.save]:{color:"#1a777c",title:"Save",description:"Actions that save or store data"},[vp.services]:{color:"#f79035ff",title:"Services",description:"Call external services and APIs"},[vp.broadcast]:{color:"#8e5ea7",title:"Other People",description:"Actions that apply to others instead of the contact"},[vp.trigger]:{color:"#df419f",title:"Trigger",description:"Actions that trigger other behavior"}},xp={[bp.wait]:{color:"#4d7dad",title:"Wait",description:"Wait for user and split on their response"},[bp.split]:{color:"#aaaaaa",title:"Split",description:"Split the flow based on conditions"}},wp={name:"Add Input Labels",group:vp.save,flowTypes:[up,hp,pp],render:(t,e)=>{return W`<div>${i=e.labels,o="label",Fc(i.map(t=>t.name),o)}</div>`;var i,o},toFormData:t=>({labels:t.labels||null,uuid:t.uuid}),form:{labels:{type:"select",label:"Labels",helpText:"Select labels to add to the input. Type a new label name to create it.",required:!0,options:[],multi:!0,searchable:!0,endpoint:"/api/v2/labels.json",valueKey:"uuid",nameKey:"name",placeholder:"Search for labels or type to create new ones...",allowCreate:!0,createArbitraryOption:(t,e)=>!e.find(e=>e.name.toLowerCase().trim()===t.toLowerCase().trim())&&t.trim()?{name:t.trim(),arbitrary:!0}:null}},fromFormData:t=>({uuid:t.uuid,type:"add_input_labels",labels:(t.labels||[]).map(t=>({uuid:t.uuid,name:t.name}))})},_p={name:"Add URN",group:vp.contacts,flowTypes:[up,hp,pp],render:(t,e)=>{const i=Vc.find(t=>t.scheme===e.scheme),o=(null==i?void 0:i.path)||e.scheme;return Nc(W`Add ${o} ${Rc(e.path,!0)}`,`Add ${o} ${e.path}`)},toFormData:t=>{const e=Vc.find(e=>e.scheme===t.scheme);return{uuid:t.uuid,scheme:e?[{name:e.path,value:t.scheme}]:null,path:t.path||""}},fromFormData:t=>{const e=Array.isArray(t.scheme)&&t.scheme.length>0?t.scheme[0].value:"tel";return{uuid:t.uuid,type:"add_contact_urn",scheme:e,path:t.path||""}},form:{scheme:{type:"select",label:"URN Type",helpText:"Select the type of URN to add to the contact",required:!0,searchable:!1,multi:!1,options:Vc.map(t=>({name:t.path,value:t.scheme}))},path:{type:"text",label:"URN Value",helpText:"Enter the URN value (e.g., phone number, Facebook ID, etc.)",required:!0,placeholder:"Enter the URN value...",evaluated:!0}},validate:t=>{const e={};return t.scheme&&0!==t.scheme.length||(e.scheme="URN type is required"),t.path&&""!==t.path.trim()||(e.path="URN value is required"),{valid:0===Object.keys(e).length,errors:e}}},kp={name:"Update Field",group:vp.contacts,flowTypes:[up,hp,pp],render:(t,e)=>e.value?Nc(W`Set <strong>${e.field.name}</strong> to
|
|
8842
8859
|
${Rc(e.value,!0)}`,`Set ${e.field.name} to ${e.value}`):Nc(W`Clear <strong>${e.field.name}</strong>`,`Clear ${e.field.name}`),form:{field:{type:"select",label:"Field",required:!0,searchable:!0,clearable:!1,placeholder:"Search for contact fields...",nameKey:"name",valueKey:"key",endpoint:"/api/v2/fields.json",helpText:"Select the contact field to update",allowCreate:!0,createArbitraryOption:t=>({key:t,name:t,type:"text"})},value:{type:"textarea",label:"Value",placeholder:"Enter field value...",evaluated:!0,helpText:"The new value for the contact field. You can use expressions like @contact.name"}},toFormData:t=>({uuid:t.uuid,field:t.field?[t.field]:null,value:t.value}),fromFormData:t=>{const e=t.field[0];return{uuid:t.uuid,type:"set_contact_field",field:{name:e.name,key:e.key},value:t.value}},sanitize:t=>{t.value&&"string"==typeof t.value&&(t.value=t.value.trim())}},Cp={name:"Update Channel",group:vp.contacts,flowTypes:[up,hp,pp],render:(t,e)=>Nc(W`Set to <strong>${e.channel.name}</strong>`,`Set to ${e.channel.name}`),form:{channel:{type:"select",label:"Channel",required:!0,searchable:!0,clearable:!1,endpoint:"/api/v2/channels.json",valueKey:"uuid",nameKey:"name",placeholder:"Select channel",helpText:"Select the channel to set for the contact"}},toFormData:t=>({uuid:t.uuid,channel:t.channel?[t.channel]:null}),fromFormData:t=>{var e;const i=null===(e=t.channel)||void 0===e?void 0:e[0];return{uuid:t.uuid,type:"set_contact_channel",channel:{uuid:i.uuid||i.value,name:i.name}}}},Sp={name:"Update Language",group:vp.contacts,flowTypes:[up,hp,pp],render:(t,e)=>{const i=Tc(e.language);return Nc(W`Set to <strong>${i}</strong>`,`Set to ${i}`)},form:{language:{type:"select",label:"Language",required:!0,searchable:!0,clearable:!1,valueKey:"value",nameKey:"name",helpText:"Select the language to set for the contact",getDynamicOptions:()=>{const t=th(),e=null==t?void 0:t.getState().workspace;return(null==e?void 0:e.languages)&&Array.isArray(e.languages)?e.languages.map(t=>({value:t,name:Tc(t)})):[]}}},toFormData:t=>t.language?{language:[{value:t.language,name:Tc(t.language)}],uuid:t.uuid}:{language:null,uuid:t.uuid},fromFormData:t=>({uuid:t.uuid,type:"set_contact_language",language:t.language[0].value}),validate:t=>{const e={};return t.language||(e.language="Language is required"),{valid:0===Object.keys(e).length,errors:e}}},Ap={name:"Update Status",group:vp.contacts,flowTypes:[up,hp,pp],render:(t,e)=>Nc(W`Set to <strong>${We(e.status)}</strong>`,`Set to ${We(e.status)}`),toFormData:t=>({uuid:t.uuid,status:[{name:We(t.status||"active"),value:t.status||"active"}]}),fromFormData:t=>({status:t.status[0].value,type:"set_contact_status",uuid:t.uuid}),form:{status:{type:"select",label:"Status",required:!0,searchable:!1,clearable:!1,options:[{value:"active",name:"Active"},{value:"archived",name:"Archived"},{value:"stopped",name:"Stopped"},{value:"blocked",name:"Blocked"}],helpText:"Select the status to set for the contact"}}},Ep={name:"Send Broadcast",group:vp.broadcast,flowTypes:[up,hp,pp],render:(t,e)=>{const i=[...(e.groups||[]).map(t=>({name:t.name,icon:zo.group,uuid:t.uuid,eventType:Uo.GroupClicked})),...(e.contacts||[]).map(t=>({name:t.name,icon:zo.contacts,uuid:t.uuid,eventType:Uo.ContactClicked})),...(e.legacy_vars||[]).map(t=>({name:t,icon:zo.contacts,content:Rc(t,!0)}))];return W`<div>
|
|
8843
8860
|
<div>${qc(i)}</div>
|
|
8844
8861
|
<div style="margin-top: 0.5em">
|