@nyaruka/temba-components 0.84.0 → 0.85.0

package/CHANGELOG.md

@@ -4,8 +4,16 @@ 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.85.0](https://github.com/nyaruka/temba-components/compare/v0.84.0...v0.85.0)
+
+- Switched to indexed template variables [`#419`](https://github.com/nyaruka/temba-components/pull/419)
+- Update template editor tests to match new format [`c81422a`](https://github.com/nyaruka/temba-components/commit/c81422a4ca59c66c96d8f809f255febda8cfe63d)
+- Switch to indexed template variables [`2401b74`](https://github.com/nyaruka/temba-components/commit/2401b74e3fea5c5a415c96d25470575c4fcfbd46)
+
 #### [v0.84.0](https://github.com/nyaruka/temba-components/compare/v0.83.0...v0.84.0)
 
+> 25 April 2024
+
 - Set selected option by value [`#418`](https://github.com/nyaruka/temba-components/pull/418)
 - Allow selecting text from contacts history events [`#417`](https://github.com/nyaruka/temba-components/pull/417)
 - Remove logging [`1b7272d`](https://github.com/nyaruka/temba-components/commit/1b7272d3d93eac7b13e1a1b2284f2c3544751460)

package/dist/temba-components.js

@@ -7839,15 +7839,15 @@ background: #ccc;
         padding: 1em;
         line-height: 2.2em;
       }
-    `}firstUpdated(t){super.firstUpdated(t)}updated(t){super.updated(t)}handleTemplateChanged(t){this.selectedTemplate=t.target.values[0];const[e,i]=this.lang.split("-"),o={};this.selectedTemplate?this.selectedTemplate.translations.forEach((t=>{if(t.locale===this.lang||!i&&t.locale.split("-")[0]===e){this.translation=t;for(const e of t.components){const t=e.params||[];t.length>0&&(o[e.name]=new Array(t.length).fill(""))}if(this.template===this.selectedTemplate.uuid)for(const t of Object.keys(this.params||{}))if(o[t])for(let e=0;e<this.params[t].length;e++)o[t][e]=this.params[t][e]}})):this.translation=null,this.params=o,this.fireCustomEvent(Ae.ContextChanged,{template:this.selectedTemplate,translation:this.translation,params:this.params})}handleVariableChanged(t){const e=t.target,i=parseInt(e.getAttribute("index"));this.params[e.name][i-1]=e.value,this.fireCustomEvent(Ae.ContentChanged,{template:this.selectedTemplate,translation:this.translation,params:this.params})}renderVariables(t){const e=t.content.split(/{{(\d+)}}/g);if(e.length>0){const i=e.map(((e,i)=>{const o=Math.round(i/2);return i%2==0?Z`<span class="text">${e}</span>`:Z`<temba-completion
+    `}firstUpdated(t){super.firstUpdated(t)}updated(t){super.updated(t)}handleTemplateChanged(t){const e=this.selectedTemplate;this.selectedTemplate=t.target.values[0];const[i,o]=this.lang.split("-");this.selectedTemplate?this.selectedTemplate.translations.forEach((t=>{if(t.locale===this.lang||!o&&t.locale.split("-")[0]===i){this.translation=t;const i=new Array((t.variables||[]).length).fill("");e||this.variables&&this.variables.forEach(((t,e)=>{i[e]=t})),this.variables=i}})):this.translation=null,this.fireCustomEvent(Ae.ContextChanged,{template:this.selectedTemplate,translation:this.translation,variables:this.variables})}handleVariableChanged(t){const e=t.target,i=parseInt(e.getAttribute("index"));this.variables[i]=e.value,this.fireCustomEvent(Ae.ContentChanged,{template:this.selectedTemplate,translation:this.translation,variables:this.variables})}renderVariables(t){const e=new RegExp(`{{(${Object.keys(t.variables||[]).join("|")})}}`,"g"),i=t.content.split(e);if(i.length>0){const e=i.map(((e,i)=>{if(i%2==0)return Z`<span class="text">${e}</span>`;const o=t.variables[e];return Z`<temba-completion
           class="variable"
           type="text"
-          value=${this.params[t.name][o-1]}
-          @change=${this.handleVariableChanged}
+          value=${o<this.variables.length?this.variables[o]:null}
+          @keyup=${this.handleVariableChanged}
           name="${t.name}"
           index="${o}"
-          placeholder="variable.."
-        ></temba-completion>`}));return Z`<div class="content">${i}</div>`}}renderComponents(t){const e=t.filter((t=>!t.type.startsWith("button/"))).map((t=>Z`<div class="${t.name}">
+          placeholder="{{${e}}}"
+        ></temba-completion>`}));return Z`<div class="content">${e}</div>`}}renderComponents(t){const e=t.filter((t=>!t.type.startsWith("button/"))).map((t=>Z`<div class="${t.name}">
             ${this.renderVariables(t)}
           </div>`)),i=t.filter((t=>t.type.startsWith("button/"))),o=i.length>0?this.renderButtons(i):null;return Z`<div class="main">${e}</div>
       <div class="buttons">
@@ -7884,7 +7884,7 @@ background: #ccc;
 
         ${this.template?Z` <div class="template">${t}</div>`:null}
       </div>
-    `}}function zh(t,e){window.customElements.get(t)||window.customElements.define(t,e)}t([pe({type:String})],Mh.prototype,"url",void 0),t([pe({type:String})],Mh.prototype,"template",void 0),t([pe({type:Object})],Mh.prototype,"selectedTemplate",void 0),t([pe({type:String})],Mh.prototype,"lang",void 0),t([pe({type:Object})],Mh.prototype,"params",void 0),t([pe({type:Object,attribute:!1})],Mh.prototype,"translation",void 0),t([pe({type:Boolean})],Mh.prototype,"translating",void 0),zh("temba-anchor",ql),zh("temba-alert",Al),zh("temba-store",nr),zh("temba-textinput",Le),zh("temba-datepicker",rh),zh("temba-date",gh),zh("temba-completion",Ga),zh("temba-checkbox",fe),zh("temba-select",Wa),zh("temba-options",sr),zh("temba-loading",el),zh("temba-lightbox",_h),zh("temba-button",Qa),zh("temba-omnibox",Pl),zh("temba-tip",Nl),zh("temba-contact-name",jl),zh("temba-contact-name-fetch",sh),zh("temba-contact-field",Kl),zh("temba-contact-fields",Wl),zh("temba-field-manager",hh),zh("temba-urn",Hl),zh("temba-content-menu",ph),zh("temba-field",tl),zh("temba-dialog",Ja),zh("temba-modax",Xa),zh("temba-charcount",cl),zh("temba-contact-history",Sl),zh("temba-contact-chat",ml),zh("temba-contact-details",class extends pl{static get styles(){return r`
+    `}}function zh(t,e){window.customElements.get(t)||window.customElements.define(t,e)}Mh.shadowRootOptions={...rt.shadowRootOptions,delegatesFocus:!0},t([pe({type:String})],Mh.prototype,"url",void 0),t([pe({type:String})],Mh.prototype,"template",void 0),t([pe({type:Object})],Mh.prototype,"selectedTemplate",void 0),t([pe({type:String})],Mh.prototype,"lang",void 0),t([pe({type:Array})],Mh.prototype,"variables",void 0),t([pe({type:Object,attribute:!1})],Mh.prototype,"translation",void 0),t([pe({type:Boolean})],Mh.prototype,"translating",void 0),zh("temba-anchor",ql),zh("temba-alert",Al),zh("temba-store",nr),zh("temba-textinput",Le),zh("temba-datepicker",rh),zh("temba-date",gh),zh("temba-completion",Ga),zh("temba-checkbox",fe),zh("temba-select",Wa),zh("temba-options",sr),zh("temba-loading",el),zh("temba-lightbox",_h),zh("temba-button",Qa),zh("temba-omnibox",Pl),zh("temba-tip",Nl),zh("temba-contact-name",jl),zh("temba-contact-name-fetch",sh),zh("temba-contact-field",Kl),zh("temba-contact-fields",Wl),zh("temba-field-manager",hh),zh("temba-urn",Hl),zh("temba-content-menu",ph),zh("temba-field",tl),zh("temba-dialog",Ja),zh("temba-modax",Xa),zh("temba-charcount",cl),zh("temba-contact-history",Sl),zh("temba-contact-chat",ml),zh("temba-contact-details",class extends pl{static get styles(){return r`
       .urn {
         display: flex;
         padding: 0.4em 1em 0.8em 1em;