@nyaruka/temba-components 0.26.9 → 0.26.10

package/dist/{d0cc86be.js → cbffa348.js}

@@ -107,9 +107,7 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
         display: flex;
         flex-direction: row;
         align-items: stretch;
-
         box-shadow: var(--widget-box-shadow);
-
         caret-color: var(--input-caret);
       }
 
@@ -134,6 +132,8 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
         border-color: var(--color-focus);
         background: var(--color-widget-bg-focused);
         box-shadow: var(--widget-box-shadow-focused);
+        z-index: 10000;
+        position: relative;
       }
 
       .input-container:hover {
@@ -286,7 +286,7 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
           <slot></slot>
         </div>
       </temba-field>
-    `}}__decorate([e$2({type:Boolean})],TextInput.prototype,"textarea",void 0),__decorate([e$2({type:Boolean})],TextInput.prototype,"datepicker",void 0),__decorate([e$2({type:Boolean})],TextInput.prototype,"datetimepicker",void 0),__decorate([e$2({type:String})],TextInput.prototype,"placeholder",void 0),__decorate([e$2({type:String})],TextInput.prototype,"value",void 0),__decorate([e$2({type:String})],TextInput.prototype,"name",void 0),__decorate([e$2({type:Boolean})],TextInput.prototype,"password",void 0),__decorate([e$2({type:Number})],TextInput.prototype,"maxlength",void 0),__decorate([e$2({type:Object})],TextInput.prototype,"inputElement",void 0),__decorate([e$2({type:Object})],TextInput.prototype,"dateElement",void 0),__decorate([e$2({type:Boolean})],TextInput.prototype,"clearable",void 0),__decorate([e$2({type:Boolean})],TextInput.prototype,"gsm",void 0),__decorate([e$2({type:String})],TextInput.prototype,"counter",void 0),__decorate([e$2({type:Boolean})],TextInput.prototype,"loading",void 0),__decorate([e$2({type:Boolean})],TextInput.prototype,"submitOnEnter",void 0),__decorate([e$2()],TextInput.prototype,"onBlur",void 0),__decorate([e$2({type:Boolean})],TextInput.prototype,"disabled",void 0),__decorate([e$2({type:Boolean})],TextInput.prototype,"autogrow",void 0);const DATE_FORMAT=/(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d\.\d+([+-][0-2]\d:[0-5]\d|Z))|(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d([+-][0-2]\d:[0-5]\d|Z))|(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d([+-][0-2]\d:[0-5]\d|Z))/,getHTTPCookie=l=>{for(const n of document.cookie.split(";")){const e=n.indexOf("=");let t=n.substr(0,e),i=n.substr(e+1);if(t=t.trim(),i=i.trim(),t===l)return i}return null},getHeaders=(l={})=>{const n=getHTTPCookie("csrftoken"),e=n?{"X-CSRFToken":n}:{};return e["X-Requested-With"]="XMLHttpRequest",Object.keys(l).forEach((n=>{e[n]=l[n]})),e},getUrl=(l,n=null,e={})=>new Promise(((t,i)=>{const o={method:"GET",headers:getHeaders(e)};n&&(o.signal=n.signal),fetch(l,o).then((l=>{l.text().then((e=>{let i={};try{i=JSON.parse(e)}catch(l){}t({body:e,json:i,status:l.status,headers:l.headers,controller:n})}))})).catch((l=>{i(l)}))})),getClasses=l=>{const n=[];Object.keys(l).forEach((e=>{l[e]&&n.push(e)}));let e=n.join(" ");return e.trim().length>0&&(e=" "+e),e},fetchResultsPage=(l,n=null)=>new Promise(((e,t)=>{getUrl(l,n).then((l=>{e({results:l.json.results,next:l.json.next})})).catch((l=>t(l)))})),fetchResults=async l=>{if(!l)return new Promise((l=>l([])));let n=[],e=l;for(;e;){const l=await fetchResultsPage(e);l.results&&(n=n.concat(l.results)),e=l.next}return n},getAssetPage=l=>new Promise(((n,e)=>{getUrl(l).then((l=>{n({assets:l.json.results,next:l.json.next})})).catch((l=>e(l)))})),getAssets=async l=>{if(!l)return new Promise((l=>l([])));let n=[],e=l;for(;e;){const l=await getAssetPage(e);n=n.concat(l.assets),e=l.next}return n},postUrl=(l,n,e={},t=null)=>{const i=getHeaders(e);t&&(i["Content-Type"]=t);const o={method:"POST",headers:i,body:n};return new Promise(((n,e)=>{fetch(l,o).then((async l=>{l.text().then((e=>{let t={};try{t=JSON.parse(e)}catch(l){}n({body:e,json:t,status:l.status,headers:l.headers})}))})).catch((l=>{e(l)}))}))},postJSON=(l,n)=>postUrl(l,JSON.stringify(n),!1,"application/json"),range=(l,n)=>Array.from({length:n-l},((n,e)=>e+l)),serialize=function(l){const n=[];for(let e=0;e<l.elements.length;e++){const t=l.elements[e];if(t.name&&!t.disabled&&"file"!==t.type&&"reset"!==t.type&&"submit"!==t.type&&"button"!==t.type)if("select-multiple"===t.type)for(let l=0;l<t.options.length;l++)t.options[l].selected&&n.push(encodeURIComponent(t.name)+"="+encodeURIComponent(t.options[l].value));else("checkbox"!==t.type&&"radio"!==t.type||t.checked)&&n.push(encodeURIComponent(t.name)+"="+encodeURIComponent(t.value))}return n.join("&")},getScrollParent=l=>{const n=l.parentNode||l.host;if(n){const l=n instanceof HTMLElement&&window.getComputedStyle(n).overflowY,e=l&&!(l.includes("hidden")||l.includes("visible"));return n?e&&n.scrollHeight>=n.clientHeight?n:getScrollParent(n):null}return null},isElementVisible=(l,n)=>{n=n||document.body;const{top:e,bottom:t}=l.getBoundingClientRect(),i=n.getBoundingClientRect();return e<=i.top?t>i.top:t<i.bottom},HOUR=3600,DAY=24*HOUR,MONTH=30*DAY;class Stubbable{getCurrentDate(){return new Date}}const stubbable=new Stubbable,timeSince=(l,n={suffix:""})=>{const{compareDate:e,hideRecentText:t,suffix:i}=n,o=e||stubbable.getCurrentDate(),u=Math.floor((o.getTime()-l.getTime())/1e3);if(u<60)return e?u+"s"+i:!t&&i?i:"just now";if(u<HOUR)return Math.round(u/60)+"m"+i;if(u<=DAY)return Math.round(u/HOUR)+"h"+i;if(u<=MONTH)return Math.round(u/DAY)+"d"+i;if(u<6*MONTH)return Math.round(u/MONTH)+"mth"+i;return l.getDate()+" "+l.toDateString().match(/ [a-zA-Z]*/)[0].replace(" ","")+(l.getFullYear()==o.getFullYear()?"":" "+l.getFullYear())},isDate=l=>"[object Date]"===toString.call(l)||("function"==typeof l.replace&&l.replace(/^\s+|\s+$/gm,""),DATE_FORMAT.test(l)),throttle=(l,n)=>{let e=!0;return function(...t){e&&(e=!1,l.apply(this,t),setTimeout((()=>{e=!0}),n))}},truncate=(l,n)=>l.length>n?l.substring(0,n)+"...":l,oxford=(l,n="and")=>1===l.length?l[0]:2===l.length?"html"===l[0].type?$`${l[0]} ${n} ${l[1]}`:l.join(" "+n+" "):"html"===l[0].type?l.map(((e,t)=>t<l.length-1?$`${e}, `:$`${n} ${e}`)):l.join(", ")+n+l[l.length-1],oxfordFn=(l,n,e="and")=>oxford(l.map(n),e),oxfordNamed=(l,n="and")=>oxfordFn(l,(l=>l.name),n),setCookie=(l,n,e)=>{if(!e){const l=document.location.pathname;e=l.substring(0,l.indexOf("/",1))}const t=new Date;t.setTime(t.getTime()+2592e6),document.cookie=`${l}=${n};expires=${t.toUTCString()};path=${e}`},getCookie=l=>{let n=null;if(document.cookie&&""!=document.cookie){const e=document.cookie.split(";");for(let t=0;t<e.length;t++){const i=e[t].trim();if(i.substring(0,l.length+1)==l+"="){n=decodeURIComponent(i.substring(l.length+1));break}}}return n},getCookieBoolean=l=>"true"===(getCookie(l)||"");var COOKIE_KEYS,CustomEventType;!function(l){l.MENU_COLLAPSED="menu-collapsed",l.TICKET_SHOW_DETAILS="tickets.show-details"}(COOKIE_KEYS||(COOKIE_KEYS={})),function(l){l.Loaded="temba-loaded",l.Canceled="temba-canceled",l.CursorChanged="temba-cursor-changed",l.Refreshed="temba-refreshed",l.Selection="temba-selection",l.ButtonClicked="temba-button-clicked",l.DialogHidden="temba-dialog-hidden",l.ScrollThreshold="temba-scroll-threshold",l.ContentChanged="temba-content-changed",l.ContextChanged="temba-context-changed",l.FetchComplete="temba-fetch-complete",l.Submitted="temba-submitted",l.Redirected="temba-redirected",l.NoPath="temba-no-path",l.StoreUpdated="temba-store-updated"}(CustomEventType||(CustomEventType={}));class t{constructor(l=0,n=0){this.first=null,this.items=Object.create(null),this.last=null,this.max=l,this.size=0,this.ttl=n}has(l){return l in this.items}clear(){return this.first=null,this.items=Object.create(null),this.last=null,this.size=0,this}delete(l){if(this.has(l)){const n=this.items[l];delete this.items[l],this.size--,null!==n.prev&&(n.prev.next=n.next),null!==n.next&&(n.next.prev=n.prev),this.first===n&&(this.first=n.next),this.last===n&&(this.last=n.prev)}return this}evict(l=!1){if(l||this.size>0){const l=this.first;delete this.items[l.key],this.size--,0===this.size?(this.first=null,this.last=null):(this.first=l.next,this.first.prev=null)}return this}get(l){let n;if(this.has(l)){const e=this.items[l];this.ttl>0&&e.expiry<=(new Date).getTime()?this.delete(l):(n=e.value,this.set(l,n,!0))}return n}keys(){return Object.keys(this.items)}set(l,n,e=!1){let t;if(e||this.has(l)){if(t=this.items[l],t.value=n,this.last!==t){const l=this.last,n=t.next,e=t.prev;this.first===t&&(this.first=t.next),t.next=null,t.prev=this.last,l.next=t,null!==e&&(e.next=n),null!==n&&(n.prev=e)}}else this.max>0&&this.size===this.max&&this.evict(!0),t=this.items[l]={expiry:this.ttl>0?(new Date).getTime()+this.ttl:this.ttl,key:l,prev:this.last,next:null,value:n},1==++this.size?this.first=t:this.last.next=t;return this.last=t,this}}function s(l=1e3,n=0){if(isNaN(l)||l<0)throw new TypeError("Invalid max value");if(isNaN(n)||n<0)throw new TypeError("Invalid ttl value");return new t(l,n)}class Store extends RapidElement{constructor(){super(...arguments),this.ttl=6e4,this.max=20,this.keyedAssets={},this.fields={},this.groups={},this.pinnedFields=[],this.pendingResolves={},this.fetching={}}firstUpdated(){this.cache=s(this.max,this.ttl);const l=[];this.completionEndpoint&&l.push(getUrl(this.completionEndpoint).then((l=>{this.schema=l.json.context,this.fnOptions=l.json.functions}))),this.fieldsEndpoint&&l.push(getAssets(this.fieldsEndpoint).then((l=>{this.keyedAssets.fields=[],this.pinnedFields=[],l.forEach((l=>{this.keyedAssets.fields.push(l.key),this.fields[l.key]=l,l.pinned&&this.pinnedFields.push(l)})),this.pinnedFields.sort(((l,n)=>n.priority-l.priority))}))),this.globalsEndpoint&&l.push(getAssets(this.globalsEndpoint).then((l=>{this.keyedAssets.globals=l.map((l=>l.key))}))),this.groupsEndpoint&&l.push(getAssets(this.groupsEndpoint).then((l=>{l.forEach((l=>{this.groups[l.uuid]=l}))}))),this.httpComplete=Promise.all(l)}setKeyedAssets(l,n){this.keyedAssets[l]=n}updated(l){super.updated(l)}getCompletionSchema(){return this.schema}getFunctions(){return this.fnOptions}getKeyedAssets(){return this.keyedAssets}getContactField(l){return this.fields[l]}getPinnedFields(){return this.pinnedFields}isDynamicGroup(l){const n=this.groups[l];return!(!n||!n.query)}getUrl(l,n){return!(n=n||{}).force&&this.cache.has(l)?new Promise((n=>{n(this.cache.get(l))})):getUrl(l,n.controller,n.headers||{}).then((n=>new Promise(((e,t)=>{n.status>=200&&n.status<=300?(this.cache.set(l,n),e(n)):t("Status: "+n.status)}))))}getResults(l,n){n=n||{};const e="results_"+l,t=this.cache.get(e);return!n.force&&t?new Promise((l=>{l(t)})):new Promise((n=>{const t=this.pendingResolves[l]||[];t.push(n),this.pendingResolves[l]=t,t.length<=1&&fetchResults(l).then((n=>{this.cache.set(e,n);const t=this.pendingResolves[l]||[];for(;t.length>0;){t.pop()(n)}}))}))}makeRequest(l,n){const e=this.fetching[l],t=(new Date).getTime();if(e&&t-e<500)return;this.fetching[l]=t,n=n||{};const i=this.cache.get(l);i&&!n.force?this.fireCustomEvent(CustomEventType.StoreUpdated,{url:l,data:i}):fetchResults(l).then((e=>{e=n.prepareData?n.prepareData(e):e,this.cache.set(l,e),this.fireCustomEvent(CustomEventType.StoreUpdated,{url:l,data:e}),delete this.fetching[l]}))}}__decorate([e$2({type:Number})],Store.prototype,"ttl",void 0),__decorate([e$2({type:Number})],Store.prototype,"max",void 0),__decorate([e$2({type:String,attribute:"completion"})],Store.prototype,"completionEndpoint",void 0),__decorate([e$2({type:String,attribute:"fields"})],Store.prototype,"fieldsEndpoint",void 0),__decorate([e$2({type:String,attribute:"groups"})],Store.prototype,"groupsEndpoint",void 0),__decorate([e$2({type:String,attribute:"globals"})],Store.prototype,"globalsEndpoint",void 0),__decorate([e$2({type:Object,attribute:!1})],Store.prototype,"schema",void 0),__decorate([e$2({type:Object,attribute:!1})],Store.prototype,"fnOptions",void 0),__decorate([e$2({type:Object,attribute:!1})],Store.prototype,"keyedAssets",void 0);class Options extends RapidElement{constructor(){super(...arguments),this.marginHorizontal=0,this.marginVertical=7,this.scrollPct=75,this.cursorIndex=-1,this.nameKey="name",this.loading=!1,this.getName=function(l){return l[this.nameKey||"name"]},this.renderInputOption=function(){return null},this.scrollHeight=0,this.triggerScroll=!1,this.scrollParent=null,this.setCursor=throttle((function(l){l!==this.cursorIndex&&(this.cursorIndex=l)}),50)}static get styles(){return r$2`
+    `}}__decorate([e$2({type:Boolean})],TextInput.prototype,"textarea",void 0),__decorate([e$2({type:Boolean})],TextInput.prototype,"datepicker",void 0),__decorate([e$2({type:Boolean})],TextInput.prototype,"datetimepicker",void 0),__decorate([e$2({type:String})],TextInput.prototype,"placeholder",void 0),__decorate([e$2({type:String})],TextInput.prototype,"value",void 0),__decorate([e$2({type:String})],TextInput.prototype,"name",void 0),__decorate([e$2({type:Boolean})],TextInput.prototype,"password",void 0),__decorate([e$2({type:Number})],TextInput.prototype,"maxlength",void 0),__decorate([e$2({type:Object})],TextInput.prototype,"inputElement",void 0),__decorate([e$2({type:Object})],TextInput.prototype,"dateElement",void 0),__decorate([e$2({type:Boolean})],TextInput.prototype,"clearable",void 0),__decorate([e$2({type:Boolean})],TextInput.prototype,"gsm",void 0),__decorate([e$2({type:String})],TextInput.prototype,"counter",void 0),__decorate([e$2({type:Boolean})],TextInput.prototype,"loading",void 0),__decorate([e$2({type:Boolean})],TextInput.prototype,"submitOnEnter",void 0),__decorate([e$2()],TextInput.prototype,"onBlur",void 0),__decorate([e$2({type:Boolean})],TextInput.prototype,"disabled",void 0),__decorate([e$2({type:Boolean})],TextInput.prototype,"autogrow",void 0);const DATE_FORMAT=/(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d\.\d+([+-][0-2]\d:[0-5]\d|Z))|(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d([+-][0-2]\d:[0-5]\d|Z))|(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d([+-][0-2]\d:[0-5]\d|Z))/,getHTTPCookie=l=>{for(const n of document.cookie.split(";")){const e=n.indexOf("=");let t=n.substr(0,e),i=n.substr(e+1);if(t=t.trim(),i=i.trim(),t===l)return i}return null},getHeaders=(l={})=>{const n=getHTTPCookie("csrftoken"),e=n?{"X-CSRFToken":n}:{};return e["X-Requested-With"]="XMLHttpRequest",Object.keys(l).forEach((n=>{e[n]=l[n]})),e},getUrl=(l,n=null,e={})=>new Promise(((t,i)=>{const o={method:"GET",headers:getHeaders(e)};n&&(o.signal=n.signal),fetch(l,o).then((l=>{l.text().then((e=>{let i={};try{i=JSON.parse(e)}catch(l){}t({body:e,json:i,status:l.status,headers:l.headers,controller:n})}))})).catch((l=>{i(l)}))})),getClasses=l=>{const n=[];Object.keys(l).forEach((e=>{l[e]&&n.push(e)}));let e=n.join(" ");return e.trim().length>0&&(e=" "+e),e},fetchResultsPage=(l,n=null)=>new Promise(((e,t)=>{getUrl(l,n).then((l=>{e({results:l.json.results,next:l.json.next})})).catch((l=>t(l)))})),fetchResults=async l=>{if(!l)return new Promise((l=>l([])));let n=[],e=l;for(;e;){const l=await fetchResultsPage(e);l.results&&(n=n.concat(l.results)),e=l.next}return n},getAssetPage=l=>new Promise(((n,e)=>{getUrl(l).then((l=>{n({assets:l.json.results,next:l.json.next})})).catch((l=>e(l)))})),getAssets=async l=>{if(!l)return new Promise((l=>l([])));let n=[],e=l;for(;e;){const l=await getAssetPage(e);n=n.concat(l.assets),e=l.next}return n},postUrl=(l,n,e={},t=null)=>{const i=getHeaders(e);t&&(i["Content-Type"]=t);const o={method:"POST",headers:i,body:n};return new Promise(((n,e)=>{fetch(l,o).then((async l=>{l.text().then((e=>{let t={};try{t=JSON.parse(e)}catch(l){}n({body:e,json:t,status:l.status,headers:l.headers})}))})).catch((l=>{e(l)}))}))},postJSON=(l,n)=>postUrl(l,JSON.stringify(n),!1,"application/json"),range=(l,n)=>Array.from({length:n-l},((n,e)=>e+l)),serialize=function(l){const n=[];for(let e=0;e<l.elements.length;e++){const t=l.elements[e];if(t.name&&!t.disabled&&"file"!==t.type&&"reset"!==t.type&&"submit"!==t.type&&"button"!==t.type)if("select-multiple"===t.type)for(let l=0;l<t.options.length;l++)t.options[l].selected&&n.push(encodeURIComponent(t.name)+"="+encodeURIComponent(t.options[l].value));else("checkbox"!==t.type&&"radio"!==t.type||t.checked)&&n.push(encodeURIComponent(t.name)+"="+encodeURIComponent(t.value))}return n.join("&")},getScrollParent=l=>{const n=l.parentNode||l.host;if(n){const l=n instanceof HTMLElement&&window.getComputedStyle(n).overflowY,e=l&&!(l.includes("hidden")||l.includes("visible"));return n?e&&n.scrollHeight>=n.clientHeight?n:getScrollParent(n):null}return null},isElementVisible=(l,n)=>{n=n||document.body;const{top:e,bottom:t}=l.getBoundingClientRect(),i=n.getBoundingClientRect();return e<=i.top?t>i.top:t<i.bottom},HOUR=3600,DAY=24*HOUR,MONTH=30*DAY;class Stubbable{getCurrentDate(){return new Date}}const stubbable=new Stubbable,timeSince=(l,n={suffix:""})=>{const{compareDate:e,hideRecentText:t,suffix:i}=n,o=e||stubbable.getCurrentDate(),u=Math.floor((o.getTime()-l.getTime())/1e3);if(u<60)return e?u+"s"+i:!t&&i?i:"just now";if(u<HOUR)return Math.round(u/60)+"m"+i;if(u<=DAY)return Math.round(u/HOUR)+"h"+i;if(u<=MONTH)return Math.round(u/DAY)+"d"+i;if(u<6*MONTH)return Math.round(u/MONTH)+"mth"+i;return l.getDate()+" "+l.toDateString().match(/ [a-zA-Z]*/)[0].replace(" ","")+(l.getFullYear()==o.getFullYear()?"":" "+l.getFullYear())},isDate=l=>"[object Date]"===toString.call(l)||("function"==typeof l.replace&&l.replace(/^\s+|\s+$/gm,""),DATE_FORMAT.test(l)),throttle=(l,n)=>{let e=!0;return function(...t){e&&(e=!1,l.apply(this,t),setTimeout((()=>{e=!0}),n))}},truncate=(l,n)=>l.length>n?l.substring(0,n)+"...":l,oxford=(l,n="and")=>1===l.length?l[0]:2===l.length?"html"===l[0].type?$`${l[0]} ${n} ${l[1]}`:l.join(" "+n+" "):"html"===l[0].type?l.map(((e,t)=>t<l.length-1?$`${e}, `:$`${n} ${e}`)):l.join(", ")+n+l[l.length-1],oxfordFn=(l,n,e="and")=>oxford(l.map(n),e),oxfordNamed=(l,n="and")=>oxfordFn(l,(l=>l.name),n),setCookie=(l,n,e)=>{if(!e){const l=document.location.pathname;e=l.substring(0,l.indexOf("/",1))}const t=new Date;t.setTime(t.getTime()+2592e6),document.cookie=`${l}=${n};expires=${t.toUTCString()};path=${e}`},getCookie=l=>{let n=null;if(document.cookie&&""!=document.cookie){const e=document.cookie.split(";");for(let t=0;t<e.length;t++){const i=e[t].trim();if(i.substring(0,l.length+1)==l+"="){n=decodeURIComponent(i.substring(l.length+1));break}}}return n},getCookieBoolean=l=>"true"===(getCookie(l)||"");var COOKIE_KEYS,CustomEventType;!function(l){l.MENU_COLLAPSED="menu-collapsed",l.TICKET_SHOW_DETAILS="tickets.show-details"}(COOKIE_KEYS||(COOKIE_KEYS={})),function(l){l.Loaded="temba-loaded",l.Canceled="temba-canceled",l.CursorChanged="temba-cursor-changed",l.Refreshed="temba-refreshed",l.Selection="temba-selection",l.ButtonClicked="temba-button-clicked",l.DialogHidden="temba-dialog-hidden",l.ScrollThreshold="temba-scroll-threshold",l.ContentChanged="temba-content-changed",l.ContextChanged="temba-context-changed",l.FetchComplete="temba-fetch-complete",l.Submitted="temba-submitted",l.Redirected="temba-redirected",l.NoPath="temba-no-path",l.StoreUpdated="temba-store-updated"}(CustomEventType||(CustomEventType={}));class t{constructor(l=0,n=0){this.first=null,this.items=Object.create(null),this.last=null,this.max=l,this.size=0,this.ttl=n}has(l){return l in this.items}clear(){return this.first=null,this.items=Object.create(null),this.last=null,this.size=0,this}delete(l){if(this.has(l)){const n=this.items[l];delete this.items[l],this.size--,null!==n.prev&&(n.prev.next=n.next),null!==n.next&&(n.next.prev=n.prev),this.first===n&&(this.first=n.next),this.last===n&&(this.last=n.prev)}return this}evict(l=!1){if(l||this.size>0){const l=this.first;delete this.items[l.key],this.size--,0===this.size?(this.first=null,this.last=null):(this.first=l.next,this.first.prev=null)}return this}get(l){let n;if(this.has(l)){const e=this.items[l];this.ttl>0&&e.expiry<=(new Date).getTime()?this.delete(l):(n=e.value,this.set(l,n,!0))}return n}keys(){return Object.keys(this.items)}set(l,n,e=!1){let t;if(e||this.has(l)){if(t=this.items[l],t.value=n,this.last!==t){const l=this.last,n=t.next,e=t.prev;this.first===t&&(this.first=t.next),t.next=null,t.prev=this.last,l.next=t,null!==e&&(e.next=n),null!==n&&(n.prev=e)}}else this.max>0&&this.size===this.max&&this.evict(!0),t=this.items[l]={expiry:this.ttl>0?(new Date).getTime()+this.ttl:this.ttl,key:l,prev:this.last,next:null,value:n},1==++this.size?this.first=t:this.last.next=t;return this.last=t,this}}function s(l=1e3,n=0){if(isNaN(l)||l<0)throw new TypeError("Invalid max value");if(isNaN(n)||n<0)throw new TypeError("Invalid ttl value");return new t(l,n)}class Store extends RapidElement{constructor(){super(...arguments),this.ttl=6e4,this.max=20,this.keyedAssets={},this.fields={},this.groups={},this.languages={},this.pinnedFields=[],this.pendingResolves={},this.fetching={}}firstUpdated(){this.cache=s(this.max,this.ttl);const l=[];this.completionEndpoint&&l.push(getUrl(this.completionEndpoint).then((l=>{this.schema=l.json.context,this.fnOptions=l.json.functions}))),this.fieldsEndpoint&&l.push(getAssets(this.fieldsEndpoint).then((l=>{this.keyedAssets.fields=[],this.pinnedFields=[],l.forEach((l=>{this.keyedAssets.fields.push(l.key),this.fields[l.key]=l,l.pinned&&this.pinnedFields.push(l)})),this.pinnedFields.sort(((l,n)=>n.priority-l.priority))}))),this.globalsEndpoint&&l.push(getAssets(this.globalsEndpoint).then((l=>{this.keyedAssets.globals=l.map((l=>l.key))}))),this.languagesEndpoint&&l.push(getAssets(this.languagesEndpoint).then((l=>{this.languages=l.reduce((function(l,n){return l[n.value]=n.name,l}),{})}))),this.groupsEndpoint&&l.push(getAssets(this.groupsEndpoint).then((l=>{l.forEach((l=>{this.groups[l.uuid]=l}))}))),this.httpComplete=Promise.all(l)}setKeyedAssets(l,n){this.keyedAssets[l]=n}updated(l){super.updated(l)}getCompletionSchema(){return this.schema}getFunctions(){return this.fnOptions}getKeyedAssets(){return this.keyedAssets}getContactField(l){return this.fields[l]}getPinnedFields(){return this.pinnedFields}getLanguageName(l){return this.languages[l]}isDynamicGroup(l){const n=this.groups[l];return!(!n||!n.query)}getUrl(l,n){return!(n=n||{}).force&&this.cache.has(l)?new Promise((n=>{n(this.cache.get(l))})):getUrl(l,n.controller,n.headers||{}).then((n=>new Promise(((e,t)=>{n.status>=200&&n.status<=300?(this.cache.set(l,n),e(n)):t("Status: "+n.status)}))))}getResults(l,n){n=n||{};const e="results_"+l,t=this.cache.get(e);return!n.force&&t?new Promise((l=>{l(t)})):new Promise((n=>{const t=this.pendingResolves[l]||[];t.push(n),this.pendingResolves[l]=t,t.length<=1&&fetchResults(l).then((n=>{this.cache.set(e,n);const t=this.pendingResolves[l]||[];for(;t.length>0;){t.pop()(n)}}))}))}makeRequest(l,n){const e=this.fetching[l],t=(new Date).getTime();if(e&&t-e<500)return;this.fetching[l]=t,n=n||{};const i=this.cache.get(l);i&&!n.force?this.fireCustomEvent(CustomEventType.StoreUpdated,{url:l,data:i}):fetchResults(l).then((e=>{e=n.prepareData?n.prepareData(e):e,this.cache.set(l,e),this.fireCustomEvent(CustomEventType.StoreUpdated,{url:l,data:e}),delete this.fetching[l]}))}}__decorate([e$2({type:Number})],Store.prototype,"ttl",void 0),__decorate([e$2({type:Number})],Store.prototype,"max",void 0),__decorate([e$2({type:String,attribute:"completion"})],Store.prototype,"completionEndpoint",void 0),__decorate([e$2({type:String,attribute:"fields"})],Store.prototype,"fieldsEndpoint",void 0),__decorate([e$2({type:String,attribute:"groups"})],Store.prototype,"groupsEndpoint",void 0),__decorate([e$2({type:String,attribute:"globals"})],Store.prototype,"globalsEndpoint",void 0),__decorate([e$2({type:String,attribute:"languages"})],Store.prototype,"languagesEndpoint",void 0),__decorate([e$2({type:Object,attribute:!1})],Store.prototype,"schema",void 0),__decorate([e$2({type:Object,attribute:!1})],Store.prototype,"fnOptions",void 0),__decorate([e$2({type:Object,attribute:!1})],Store.prototype,"keyedAssets",void 0);class Options extends RapidElement{constructor(){super(...arguments),this.marginHorizontal=0,this.marginVertical=7,this.scrollPct=75,this.cursorIndex=-1,this.nameKey="name",this.loading=!1,this.getName=function(l){return l[this.nameKey||"name"]},this.renderInputOption=function(){return null},this.scrollHeight=0,this.triggerScroll=!1,this.scrollParent=null,this.setCursor=throttle((function(l){l!==this.cursorIndex&&(this.cursorIndex=l)}),50)}static get styles(){return r$2`
       .options-container {
         background: var(--color-widget-bg-focused);
         user-select: none;
@@ -3269,7 +3269,7 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
             units="4"
             style=${i$1(n)}
           ></temba-loading>`:this.summary?$` <div class="summary">${l}</div> `:null}
-    `}}__decorate([e$2({type:Boolean})],ContactSearch.prototype,"fetching",void 0),__decorate([e$2({type:Boolean})],ContactSearch.prototype,"expanded",void 0),__decorate([e$2({type:String})],ContactSearch.prototype,"endpoint",void 0),__decorate([e$2({type:String})],ContactSearch.prototype,"placeholder",void 0),__decorate([e$2({type:String})],ContactSearch.prototype,"name",void 0),__decorate([e$2({type:String})],ContactSearch.prototype,"query",void 0),__decorate([e$2({type:Number})],ContactSearch.prototype,"inactiveThreshold",void 0),__decorate([e$2({type:Number})],ContactSearch.prototype,"inactiveDays",void 0),__decorate([e$2({attribute:!1})],ContactSearch.prototype,"summary",void 0);const ICON_VERSION=8;class VectorIcon extends s$1{constructor(){super(),this.size=1,this.animationDuration=200,this.href="",this.steps=2,this.easing="cubic-bezier(0.68, -0.55, 0.265, 1.55)"}static get styles(){return r$2`
+    `}}__decorate([e$2({type:Boolean})],ContactSearch.prototype,"fetching",void 0),__decorate([e$2({type:Boolean})],ContactSearch.prototype,"expanded",void 0),__decorate([e$2({type:String})],ContactSearch.prototype,"endpoint",void 0),__decorate([e$2({type:String})],ContactSearch.prototype,"placeholder",void 0),__decorate([e$2({type:String})],ContactSearch.prototype,"name",void 0),__decorate([e$2({type:String})],ContactSearch.prototype,"query",void 0),__decorate([e$2({type:Number})],ContactSearch.prototype,"inactiveThreshold",void 0),__decorate([e$2({type:Number})],ContactSearch.prototype,"inactiveDays",void 0),__decorate([e$2({attribute:!1})],ContactSearch.prototype,"summary",void 0);const ICON_VERSION=12;class VectorIcon extends s$1{constructor(){super(),this.size=1,this.animationDuration=200,this.href="",this.steps=2,this.easing="cubic-bezier(0.68, -0.55, 0.265, 1.55)"}static get styles(){return r$2`
       :host {
         margin: auto;
         --color1: var(--icon-color);
@@ -3350,21 +3350,22 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
         margin: calc(-1 * var(--icon-circle-size));
         background: var(--icon-background);
       }
-    `}firstUpdated(l){super.firstUpdated(l),l.has("animateChange")&&(l.has("animationDuration")||(this.animationDuration=this.steps*this.animationDuration),"spin"===this.animateChange&&(this.steps=3,this.animationDuration=400,this.easing="linear"))}updated(l){super.updated(l),l.has("animationStep")&&(this.lastName&&this.animationStep>=this.steps/2&&(this.lastName=null,this.requestUpdate()),setTimeout((()=>{this.animationStep>0&&this.animationStep<this.steps?this.animationStep++:this.animationStep=0}),this.animationDuration/this.steps)),l.has("name")&&this.animateChange&&(this.lastName=l.get("name"),this.lastName&&this.animateChange&&(this.animationStep=1))}render(){return $`
+    `}firstUpdated(l){super.firstUpdated(l),l.has("animateChange")&&(l.has("animationDuration")||(this.animationDuration=this.steps*this.animationDuration),"spin"===this.animateChange&&(this.steps=3,this.animationDuration=400,this.easing="linear"))}handleClicked(){this.animateClick&&(this.animationStep=1)}updated(l){super.updated(l),l.has("animationStep")&&(this.lastName&&this.animationStep>=this.steps/2&&(this.lastName=null,this.requestUpdate()),setTimeout((()=>{this.animationStep>0&&this.animationStep<this.steps?this.animationStep++:this.animationStep=0}),this.animationDuration/this.steps)),l.has("name")&&this.animateChange&&(this.lastName=l.get("name"),this.lastName&&this.animateChange&&(this.animationStep=1))}render(){return $`
       <div
-        class="wrapper ${getClasses({clickable:this.clickable,circled:this.circled,animate:!!this.animateChange})}"
+        @click=${this.handleClicked}
+        class="wrapper ${getClasses({clickable:this.clickable,circled:this.circled,animate:!!this.animateChange||!!this.animateClick})}"
       >
         <svg
           style="height:${this.size}em;width:${this.size}em;transition:transform ${this.animationDuration/this.steps}ms
           ${this.easing}"
-          class="${getClasses({sheet:""===this.href,[this.animateChange]:!!this.animateChange,[this.animateChange+"-"+this.animationStep]:this.animationStep>0})}"
+          class="${getClasses({sheet:""===this.href,[this.animateChange]:!!this.animateChange,[this.animateChange+"-"+this.animationStep]:this.animationStep>0,[this.animateClick]:!!this.animateClick,[this.animateClick+"-"+this.animationStep]:this.animationStep>0})}"
         >
           <use
             href="${this.href?this.href:`${this.prefix||window.static_url||"/static/"}icons/symbol-defs.svg?v=${ICON_VERSION}#icon-${this.lastName||this.name||this.id}`}"
           />
         </svg>
       </div>
-    `}}var OmniType;__decorate([e$2({type:String})],VectorIcon.prototype,"name",void 0),__decorate([e$2({type:String})],VectorIcon.prototype,"prefix",void 0),__decorate([e$2({type:String})],VectorIcon.prototype,"id",void 0),__decorate([e$2({type:Number})],VectorIcon.prototype,"size",void 0),__decorate([e$2({type:Boolean})],VectorIcon.prototype,"clickable",void 0),__decorate([e$2({type:Boolean})],VectorIcon.prototype,"circled",void 0),__decorate([e$2({type:String})],VectorIcon.prototype,"animateChange",void 0),__decorate([e$2({type:Number})],VectorIcon.prototype,"animationDuration",void 0),__decorate([e$2({type:String})],VectorIcon.prototype,"href",void 0),__decorate([e$2({type:Number,attribute:!1})],VectorIcon.prototype,"steps",void 0),__decorate([e$2({type:Number,attribute:!1})],VectorIcon.prototype,"animationStep",void 0),__decorate([e$2({type:String})],VectorIcon.prototype,"easing",void 0),function(l){l.Group="group",l.Contact="contact",l.Urn="urn"}(OmniType||(OmniType={}));const postNameStyle={color:"var(--color-text-dark)",padding:"0px 6px",fontSize:"12px"};class Omnibox extends RapidElement{constructor(){super(...arguments),this.groups=!1,this.contacts=!1,this.urns=!1,this.value=[],this.placeholder="Select recipients",this.disabled=!1}static get styles(){return r$2`
+    `}}var OmniType;__decorate([e$2({type:String})],VectorIcon.prototype,"name",void 0),__decorate([e$2({type:String})],VectorIcon.prototype,"prefix",void 0),__decorate([e$2({type:String})],VectorIcon.prototype,"id",void 0),__decorate([e$2({type:Number})],VectorIcon.prototype,"size",void 0),__decorate([e$2({type:Boolean})],VectorIcon.prototype,"clickable",void 0),__decorate([e$2({type:Boolean})],VectorIcon.prototype,"circled",void 0),__decorate([e$2({type:String})],VectorIcon.prototype,"animateChange",void 0),__decorate([e$2({type:String})],VectorIcon.prototype,"animateClick",void 0),__decorate([e$2({type:Number})],VectorIcon.prototype,"animationDuration",void 0),__decorate([e$2({type:String})],VectorIcon.prototype,"href",void 0),__decorate([e$2({type:Number,attribute:!1})],VectorIcon.prototype,"steps",void 0),__decorate([e$2({type:Number,attribute:!1})],VectorIcon.prototype,"animationStep",void 0),__decorate([e$2({type:String})],VectorIcon.prototype,"easing",void 0),function(l){l.Group="group",l.Contact="contact",l.Urn="urn"}(OmniType||(OmniType={}));const postNameStyle={color:"var(--color-text-dark)",padding:"0px 6px",fontSize:"12px"};class Omnibox extends RapidElement{constructor(){super(...arguments),this.groups=!1,this.contacts=!1,this.urns=!1,this.value=[],this.placeholder="Select recipients",this.disabled=!1}static get styles(){return r$2`
       temba-select:focus {
         outline: none;
         box-shadow: none;
@@ -3905,7 +3906,7 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
         margin-left: 0.75em;
         margin-right: 0.75em;
       }
-    `}setBubble(l,n){const e=findItem(this.root.items,l);return!(!e||!e.item)&&(e.item.bubble=n,this.requestUpdate("root"),!0)}getMenuItemState(l){let n={};return l&&(n=this.state[l],n||(n={},this.state[l]=n)),n}updated(l){l.has("value")&&this.setSelection((this.value||"").split("/")),l.has("submenu")&&!l.has("value")&&this.setSelection([this.submenu]),l.has("endpoint")&&(this.root={level:-1,endpoint:this.endpoint},this.wait||this.loadItems(this.root))}refresh(l=null){l||(l=[...this.selection]);const n=this.getMenuItemForSelection(l);n.endpoint?this.loadItems(n,!1):(l.pop(),this.refresh(l))}fireNoPath(l){const n=this.getMenuItem(),e={item:n.id,selection:"/"+this.selection.join("/"),endpoint:n.endpoint,path:l+"/"+this.pending.join("/")+document.location.search},t=this.selection.join("/");t.replace(e.path,""),this.selection=t.split("/"),this.fireCustomEvent(CustomEventType.NoPath,e),this.pending=[],this.requestUpdate("root")}loadItems(l,n=!0){l&&l.endpoint&&(l.loading=!0,this.httpComplete=fetchResults(l.endpoint).then((e=>{if(e.forEach((n=>{n.level=l.level+1,n.items&&n.items.forEach((n=>{n.level=l.level+2}))})),l.items=e,l.loading=!1,this.requestUpdate("root"),this.scrollSelectedIntoView(),this.pending&&this.pending.length>0){const l=this.pending.shift();if(l&&e.length>0){const n=findItem(e,l);n.item?this.handleItemClicked(null,n.item):this.fireNoPath(l)}}else if(n&&e.length>0&&this.selection.length>=1&&!l.inline)for(const l of e)if(!l.type){this.handleItemClicked(null,l);break}})))}handleItemClicked(l,n,e=null){if(e&&e.inline&&this.handleItemClicked(null,e),this.collapsed&&(this.collapsed=!1),l&&(l.preventDefault(),l.stopPropagation()),"modax-button"!=n.type)if(n.trigger)new Function(n.trigger)();else if(n.level,n.level>=this.selection.length?this.selection.push(n.vanity_id||n.id):this.selection.splice(n.level,this.selection.length-n.level,n.vanity_id||n.id),n.endpoint)this.loadItems(n,!n.href),this.dispatchEvent(new Event("change"));else{if(this.pending&&this.pending.length>0){const l=this.pending.shift(),n=this.getMenuItem();if(l&&n&&n.items&&n.items.length>0){const e=findItem(n.items,l).item;e?this.handleItemClicked(null,e):this.fireNoPath(l)}else this.fireNoPath(l)}else this.dispatchEvent(new Event("change"));this.requestUpdate("root")}else this.fireCustomEvent(CustomEventType.ButtonClicked,{title:n.name,href:n.href,on_submit:n.on_submit})}scrollSelectedIntoView(){window.setTimeout((()=>{this.shadowRoot.querySelectorAll(".selected").forEach((l=>{l.scrollIntoView({block:"end",behavior:"smooth"})}))}),0)}clickItem(l){const n=[...this.selection];n.splice(n.length-1,1,l);const e=this.getMenuItemForSelection(n);return!!e&&(this.handleItemClicked(null,e),this.scrollSelectedIntoView(),!0)}getMenuItem(){return this.getMenuItemForSelection([...this.selection])}getMenuItemForSelection(l){const n=[...l];let e=this.root.items,t=null;for(;n.length>0;){const l=n.splice(0,1)[0];if(!e)break;if(t=findItem(e,l).item,!t)break;e=t.items}return t}getSelection(){return this.selection}setSelection(l){this.pending=[...l],this.selection=[],this.wait&&(this.wait=!1,this.loadItems(this.root))}setSelectionPath(l){const n=l.split("/").filter((l=>!!l));this.clickItem(n[n.length-1])||(this.wait=!0,this.setSelection(n))}async setFocusedItem(l){const n=l.split("/").filter((l=>!!l));if(n.length>0){if(!findItem(this.root.items,n[0]).item)return}const e=[];let t=this.root;for(;n.length>0;){const l=n.shift();l&&(t.items||(this.loadItems(t,!1),await this.httpComplete),t=findItem(t.items,l).item,t?e.push(l):n.splice(0,n.length))}this.selection=e,this.requestUpdate("root")}isSelected(l){if(l.level<this.selection.length){return this.selection[l.level]==(l.vanity_id||l.id)}return!1}isExpanded(l){return!!this.selection.find((n=>n===l.vanity_id||l.id))}render(){if(!this.root||!this.root.items)return $`<temba-loading
+    `}setBubble(l,n){const e=findItem(this.root.items,l);return!(!e||!e.item)&&(e.item.bubble=n,this.requestUpdate("root"),!0)}getMenuItemState(l){let n={};return l&&(n=this.state[l],n||(n={},this.state[l]=n)),n}updated(l){l.has("value")&&this.setSelection((this.value||"").split("/")),l.has("submenu")&&!l.has("value")&&this.setSelection([this.submenu]),l.has("endpoint")&&(this.root={level:-1,endpoint:this.endpoint},this.wait||this.loadItems(this.root))}refresh(l=null){l||(l=[...this.selection]);const n=this.getMenuItemForSelection(l);n&&(n.endpoint?this.loadItems(n,!1):(l.pop(),this.refresh(l)))}fireNoPath(l){const n=this.getMenuItem(),e={item:n.id,selection:"/"+this.selection.join("/"),endpoint:n.endpoint,path:l+"/"+this.pending.join("/")+document.location.search},t=this.selection.join("/");t.replace(e.path,""),this.selection=t.split("/"),this.fireCustomEvent(CustomEventType.NoPath,e),this.pending=[],this.requestUpdate("root")}loadItems(l,n=!0){l&&l.endpoint&&(l.loading=!0,this.httpComplete=fetchResults(l.endpoint).then((e=>{if(e.forEach((n=>{n.level=l.level+1,n.items&&n.items.forEach((n=>{n.level=l.level+2}))})),l.items=e,l.loading=!1,this.requestUpdate("root"),this.scrollSelectedIntoView(),this.pending&&this.pending.length>0){const l=this.pending.shift();if(l&&e.length>0){const n=findItem(e,l);n.item?this.handleItemClicked(null,n.item):this.fireNoPath(l)}}else if(n&&e.length>0&&this.selection.length>=1&&!l.inline)for(const l of e)if(!l.type){this.handleItemClicked(null,l);break}})))}handleItemClicked(l,n,e=null){if(e&&e.inline&&this.handleItemClicked(null,e),this.collapsed&&(this.collapsed=!1),l&&(l.preventDefault(),l.stopPropagation()),"modax-button"!=n.type)if(n.trigger)new Function(n.trigger)();else if(n.level,n.level>=this.selection.length?this.selection.push(n.vanity_id||n.id):this.selection.splice(n.level,this.selection.length-n.level,n.vanity_id||n.id),n.endpoint)this.loadItems(n,!n.href),this.dispatchEvent(new Event("change"));else{if(this.pending&&this.pending.length>0){const l=this.pending.shift(),n=this.getMenuItem();if(l&&n&&n.items&&n.items.length>0){const e=findItem(n.items,l).item;e?this.handleItemClicked(null,e):this.fireNoPath(l)}else this.fireNoPath(l)}else this.dispatchEvent(new Event("change"));this.requestUpdate("root")}else this.fireCustomEvent(CustomEventType.ButtonClicked,{title:n.name,href:n.href,on_submit:n.on_submit})}scrollSelectedIntoView(){window.setTimeout((()=>{this.shadowRoot.querySelectorAll(".selected").forEach((l=>{l.scrollIntoView({block:"end",behavior:"smooth"})}))}),0)}clickItem(l){const n=[...this.selection];n.splice(n.length-1,1,l);const e=this.getMenuItemForSelection(n);return!!e&&(this.handleItemClicked(null,e),this.scrollSelectedIntoView(),!0)}getMenuItem(){return this.getMenuItemForSelection([...this.selection])}getMenuItemForSelection(l){const n=[...l];let e=this.root.items,t=null;for(;n.length>0;){const l=n.splice(0,1)[0];if(!e)break;if(t=findItem(e,l).item,!t)break;e=t.items}return t}getSelection(){return this.selection}setSelection(l){this.pending=[...l],this.selection=[],this.wait&&(this.wait=!1,this.loadItems(this.root))}setSelectionPath(l){const n=l.split("/").filter((l=>!!l));this.clickItem(n[n.length-1])||(this.wait=!0,this.setSelection(n))}async setFocusedItem(l){const n=l.split("/").filter((l=>!!l));if(n.length>0){if(!findItem(this.root.items,n[0]).item)return}const e=[];let t=this.root;for(;n.length>0;){const l=n.shift();l&&(t.items||(this.loadItems(t,!1),await this.httpComplete),t=findItem(t.items,l).item,t?e.push(l):n.splice(0,n.length))}this.selection=e,this.requestUpdate("root")}isSelected(l){if(l.level<this.selection.length){return this.selection[l.level]==(l.vanity_id||l.id)}return!1}isExpanded(l){return!!this.selection.find((n=>n===l.vanity_id||l.id))}render(){if(!this.root||!this.root.items)return $`<temba-loading
         units="3"
         size="10"
         direction="column"
@@ -4003,6 +4004,7 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
         margin: 0em 0em;
         cursor: pointer;
         display: flex;
+        align-items: center;
         border-radius: var(--curvature);
         border-bottom-right-radius: 0px;
         border-bottom-left-radius: 0px;
@@ -4035,23 +4037,44 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
       .pane.first {
         border-top-left-radius: 0px;
       }
-    `}handleTabClick(l){this.index=parseInt(l.currentTarget.dataset.index),this.requestUpdate("index")}updated(l){if(super.updated(l),l.has("index")&&this.children.length>this.index)for(let l=0;l<this.children.length;l++){const n=this.children[l];n.selected=l==this.index,n.selected?n.style.display="flex":n.style.display="none"}}render(){const l=[];for(const n of this.children)l.push(n);return $`
+
+      .badge {
+        margin-left: 0.4em;
+      }
+
+      .count {
+        border-radius: 99px;
+        background: rgba(0, 0, 0, 0.05);
+        color: rgba(0, 0, 0, 0.5);
+        font-size: 0.7em;
+        font-weight: 400;
+        padding: 0.1em 0.4em;
+        min-width: 1em;
+        text-align: center;
+      }
+    `}handleTabClick(l){this.index=parseInt(l.currentTarget.dataset.index),this.requestUpdate("index"),this.fireEvent(CustomEventType.ContextChanged)}updated(l){if(super.updated(l),l.has("index")&&this.children.length>this.index)for(let l=0;l<this.children.length;l++){const n=this.children[l];n.selected=l==this.index,n.selected?n.style.display="flex":n.style.display="none"}}getTab(l){return this.children.item(l)}render(){const l=[];for(const n of this.children)l.push(n);return $`
       <div class="tabs">
         ${l.map(((l,n)=>$`
             <div
               @click=${this.handleTabClick}
               data-index=${n}
               class="tab ${n==this.index?"selected":""}"
+              style="${l.selectionColor&&n==this.index?`color:${l.selectionColor};--icon-color:${l.selectionColor};`:""} ${l.selectionBackground&&n==this.index?`background-color:${l.selectionBackground};`:""}"
             >
               ${l.icon?$`<temba-icon name=${l.icon} />`:null}
               ${l.name}
+              ${l.hasBadge()?$`
+                    <div class="badge">
+                      ${l.count>0?$`<div class="count">${l.count}</div>`:null}
+                    </div>
+                  `:null}
             </div>
           `))}
       </div>
       <div class="pane ${0===this.index?"first":null}">
         <slot></slot>
       </div>
-    `}}__decorate([e$2({type:Number})],TabPane.prototype,"index",void 0);class Tab extends RapidElement{constructor(){super(...arguments),this.selected=!1}static get styles(){return r$2`
+    `}}__decorate([e$2({type:Number})],TabPane.prototype,"index",void 0);class Tab extends RapidElement{constructor(){super(...arguments),this.selected=!1,this.count=0}static get styles(){return r$2`
       :host {
         display: flex;
         flex-direction: column;
@@ -4068,9 +4091,9 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
         // flex-direction: column;
         // flex-grow: 1;
       }
-    `}render(){return $`<slot
+    `}hasBadge(){return this.count>0}render(){return $`<slot
       class="${getClasses({selected:this.selected})}"
-    ></slot>`}}__decorate([e$2({type:String})],Tab.prototype,"name",void 0),__decorate([e$2({type:String})],Tab.prototype,"icon",void 0),__decorate([e$2({type:Boolean})],Tab.prototype,"selected",void 0);class Label extends s$1{static get styles(){return r$2`
+    ></slot> `}}__decorate([e$2({type:String})],Tab.prototype,"name",void 0),__decorate([e$2({type:String})],Tab.prototype,"icon",void 0),__decorate([e$2({type:String})],Tab.prototype,"selectionColor",void 0),__decorate([e$2({type:String})],Tab.prototype,"selectionBackground",void 0),__decorate([e$2({type:Boolean})],Tab.prototype,"selected",void 0),__decorate([e$2({type:Number})],Tab.prototype,"count",void 0);class Label extends s$1{static get styles(){return r$2`
       :host {
         display: inline-block;
       }
@@ -4115,6 +4138,27 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
         text-shadow: none;
       }
 
+      .tertiary {
+        background: var(--color-label-tertiary);
+        color: var(--color-label-tertiary-text);
+        --icon-color: var(--color-label-tertiary-text);
+        text-shadow: none;
+      }
+
+      .tertiary {
+        background: var(--color-label-tertiary);
+        color: var(--color-label-tertiary-text);
+        --icon-color: var(--color-label-tertiary-text);
+        text-shadow: none;
+      }
+
+      .tertiary {
+        background: var(--color-label-tertiary);
+        color: var(--color-label-tertiary-text);
+        --icon-color: var(--color-label-tertiary-text);
+        text-shadow: none;
+      }
+
       .light {
         background: var(--color-overlay-light);
         color: var(--color-overlay-light-text);
@@ -4138,7 +4182,7 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
       }
     `}render(){const l=this.backgroundColor&&this.textColor?{background:`${this.backgroundColor}`,color:`${this.textColor}`}:{};return $`
       <div
-        class="label ${getClasses({clickable:this.clickable,primary:this.primary,secondary:this.secondary,light:this.light,dark:this.dark,shadow:this.shadow})}"
+        class="label ${getClasses({clickable:this.clickable,primary:this.primary,secondary:this.secondary,tertiary:this.tertiary,light:this.light,dark:this.dark,shadow:this.shadow})}"
         style=${i$1(l)}
       >
         <div class="mask">
@@ -4146,31 +4190,7 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
           <slot></slot>
         </div>
       </div>
-    `}}__decorate([e$2({type:Boolean})],Label.prototype,"clickable",void 0),__decorate([e$2({type:Boolean})],Label.prototype,"primary",void 0),__decorate([e$2({type:Boolean})],Label.prototype,"secondary",void 0),__decorate([e$2({type:Boolean})],Label.prototype,"light",void 0),__decorate([e$2({type:Boolean})],Label.prototype,"dark",void 0),__decorate([e$2({type:Boolean})],Label.prototype,"shadow",void 0),__decorate([e$2({type:String})],Label.prototype,"icon",void 0),__decorate([e$2()],Label.prototype,"backgroundColor",void 0),__decorate([e$2()],Label.prototype,"textColor",void 0);class ContactGroups extends ContactStoreElement{static get styles(){return r$2`
-      .groups {
-        display: flex;
-        flex-wrap: wrap;
-      }
-
-      temba-label {
-        margin: 0.3em;
-      }
-    `}render(){return $`${this.data?$`
-          <div class="groups">
-            ${this.data.groups.map((l=>$`
-                <temba-label
-                  onclick="goto(event)"
-                  href="/contact/filter/${l.uuid}/"
-                  icon=${l.is_dynamic?"atom":"users"}
-                  clickable
-                  light
-                  shadow
-                >
-                  ${l.name}
-                </temba-label>
-              `))}
-          </div>
-        `:null}`}}class ContactName extends ContactStoreElement{constructor(){super(...arguments),this.size=20}static get styles(){return r$2`
+    `}}__decorate([e$2({type:Boolean})],Label.prototype,"clickable",void 0),__decorate([e$2({type:Boolean})],Label.prototype,"primary",void 0),__decorate([e$2({type:Boolean})],Label.prototype,"secondary",void 0),__decorate([e$2({type:Boolean})],Label.prototype,"tertiary",void 0),__decorate([e$2({type:Boolean})],Label.prototype,"light",void 0),__decorate([e$2({type:Boolean})],Label.prototype,"dark",void 0),__decorate([e$2({type:Boolean})],Label.prototype,"shadow",void 0),__decorate([e$2({type:String})],Label.prototype,"icon",void 0),__decorate([e$2()],Label.prototype,"backgroundColor",void 0),__decorate([e$2()],Label.prototype,"textColor",void 0);class ContactName extends ContactStoreElement{constructor(){super(...arguments),this.size=20}static get styles(){return r$2`
       :host {
         display: flex;
       }
@@ -4201,34 +4221,27 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
         height="${this.size}em"
         src="${this.prefix||window.static_url||"/static/"}img/schemes/${l}.svg"
       />
-    `}}__decorate([e$2({type:String})],ContactUrn.prototype,"urn",void 0),__decorate([e$2({type:Number})],ContactUrn.prototype,"size",void 0);class ContactFields extends ContactStoreElement{static get styles(){return r$2`
+    `}}__decorate([e$2({type:String})],ContactUrn.prototype,"urn",void 0),__decorate([e$2({type:Number})],ContactUrn.prototype,"size",void 0);const MIN_FOR_FILTER=10;class ContactFields extends ContactStoreElement{static get styles(){return r$2`
       :host {
-        display: flex;
-        flex-wrap: wrap;
-        flex-shrink: 1;
+        --curvature-widget: 0px;
+        border-radius: 6px;
       }
 
       .field {
         display: flex;
         margin: 0.3em 0.3em;
         box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.15);
-        border-radius: var(--curvature);
+        border-radius: 0px;
         align-items: center;
         overflow: hidden;
       }
 
-      .field.set {
-        background: #fff;
-      }
-
-      .field.unset {
-        opacity: 0.4;
-      }
-
-      .field.unset .label {
+      .show-all .unset {
+        display: block;
       }
 
-      .field:hover {
+      .unset {
+        display: none;
       }
 
       .field:hover {
@@ -4239,8 +4252,8 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
 
       .label {
         padding: 0.25em 1em;
-        border-top-left-radius: var(--curvature);
-        border-bottom-left-radius: var(--curvature);
+        border-top-left-radius: 0px;
+        border-bottom-left-radius: 0px;
         color: #777;
         font-size: 0.9em;
         font-weight: 400;
@@ -4254,30 +4267,51 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
         overflow: hidden;
         text-overflow: ellipsis;
         padding: 0.25em 1em;
-        border-top-right-radius: var(--curvature);
-        border-bottom-right-radius: var(--curvature);
+        border-top-right-radius: 0px;
+        border-bottom-right-radius: 0px;
         font-size: 0.9em;
       }
 
       temba-contact-field {
-        margin: 0.3em;
-        min-width: 320px;
-        flex-grow: 1;
       }
-    `}connectedCallback(){super.connectedCallback(),this.handleFieldChanged=this.handleFieldChanged.bind(this)}handleFieldChanged(l){const n=l.currentTarget;this.data.fields[n.key]=n.value,postJSON("/api/v2/contacts.json?uuid="+this.data.uuid,{fields:{[n.key]:n.value}}).then((()=>{this.refresh()}))}render(){const l=this.store.getPinnedFields().map((l=>{if(this.data){const n=this.data.fields[l.key];return $`<temba-contact-field
-          key=${l.key}
-          name=${l.label}
-          value=${n}
-          type=${l.value_type}
+
+      .footer {
+        margin-bottom: 0;
+        display: flex;
+        background: #fff;
+        align-items: center;
+        margin-top: 0.5em;
+      }
+    `}connectedCallback(){super.connectedCallback(),this.handleFieldChanged=this.handleFieldChanged.bind(this)}updated(l){super.updated(l),l.has("data")&&Object.keys(this.data.fields).length<=MIN_FOR_FILTER&&(this.showAll=!0)}handleFieldChanged(l){const n=l.currentTarget;this.data.fields[n.key]=n.value,postJSON("/api/v2/contacts.json?uuid="+this.data.uuid,{fields:{[n.key]:n.value}}).then((()=>{this.refresh()}))}handleToggle(l){const n=l.currentTarget;console.log(n.checked),this.showAll=n.checked}render(){if(this.data){const l=Object.entries(this.data.fields).filter((l=>this.pinned&&this.store.getContactField(l[0]).pinned||!this.pinned&&!this.store.getContactField(l[0]).pinned)).sort(((l,n)=>{const[e]=l,[t]=n;return e.localeCompare(t)})),n=l.map((l=>{const[n,e]=l,t=this.store.getContactField(n);return $`<temba-contact-field
+          class=${e?"set":"unset"}
+          key=${t.key}
+          name=${t.label}
+          value=${e}
+          type=${t.value_type}
           @change=${this.handleFieldChanged}
-        ></temba-contact-field>`}}));return $`${this.data?$` ${l} `:null}`}}__decorate([e$2({type:Boolean})],ContactFields.prototype,"dirty",void 0);class ContactFieldEditor extends RapidElement{constructor(){super(...arguments),this.icon=navigator.clipboard?"copy":"",this.iconClass=""}static get styles(){return r$2`
+        ></temba-contact-field>`}));return $`
+        <div class="${this.showAll||this.pinned?"show-all":""}">
+          ${n}
+        </div>
+
+        ${!this.pinned&&Object.keys(this.data.fields).length>=MIN_FOR_FILTER?$` <div class="footer">
+              <div style="flex-grow: 1"></div>
+              <div>
+                <temba-checkbox
+                  ?checked=${this.showAll}
+                  @change=${this.handleToggle}
+                  label="Show All"
+                />
+              </div>
+            </div>`:null}
+      `}return null}}__decorate([e$2({type:Boolean})],ContactFields.prototype,"pinned",void 0),__decorate([e$2({type:Boolean})],ContactFields.prototype,"system",void 0),__decorate([e$2({type:Boolean})],ContactFields.prototype,"dirty",void 0),__decorate([e$2({type:Boolean})],ContactFields.prototype,"showAll",void 0);class ContactFieldEditor extends RapidElement{constructor(){super(...arguments),this.icon=navigator.clipboard?"copy":"",this.iconClass=""}static get styles(){return r$2`
       .prefix {
         background: rgba(0, 0, 0, 0.05);
-        border-top-left-radius: 4px;
-        border-bottom-left-radius: 4px;
+        border-top-left-radius: var(--curvature-widget);
+        border-bottom-left-radius: var(--curvature-widget);
         color: #888;
         cursor: pointer;
-        width: 100px;
+        width: 200px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -4285,10 +4319,14 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
         padding: 0em 0.5em;
       }
 
+      .wrapper {
+        margin-bottom: -1px;
+      }
+
       .prefix .name {
         padding: 0.5em 0em;
         color: #888;
-        width: 80px;
+        width: 200px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -4302,8 +4340,8 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
       .popper {
         padding: 0.5em 0.75em;
         background: rgba(240, 240, 240, 1);
-        border-top-right-radius: 4px;
-        border-bottom-right-radius: 4px;
+        border-top-right-radius: var(--curvature-widget);
+        border-bottom-right-radius: var(--curvature-widget);
         --icon-color: #888;
         opacity: 0;
         cursor: default;
@@ -4314,47 +4352,34 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
         z-index: 1000;
       }
 
-      .postfix temba-icon[name='calendar'] {
-        --icon-color: #e3e3e3;
-      }
-
-      .popper.check {
-        background: rgba(90, 145, 86, 0.15);
-      }
-
-      .popper.none {
-        opacity: 0;
+      temba-icon[name='calendar'] {
+        --icon-color: rgba(0, 0, 0, 0.2);
       }
 
-      .popper.copy temba-icon:hover {
-        --icon-color: #555;
-      }
-
-      .popper.corner-down-left {
-        // background: var(--color-primary-dark);
-        // --icon-color: var(--color-text-light);
-        opacity: 1;
-        transform: scale(1);
+      temba-icon:hover {
+        --icon-color: rgba(0, 0, 0, 0.5);
       }
 
       temba-icon {
         cursor: pointer;
+        --icon-color: rgba(0, 0, 0, 0.3);
       }
 
-      temba-icon[name='check'] {
-        --icon-color: rgb(90, 145, 86);
-      }
-
-      temba-textinput:hover .popper.copy {
+      temba-textinput:hover .popper {
         opacity: 1;
         transform: scale(1);
       }
 
-      temba-textinput:focus .popper.copy {
+      temba-textinput:focus .popper {
         opacity: 1;
         transform: scale(1);
       }
 
+      .unset temba-textinput:focus .popper,
+      .unset temba-textinput:hover .popper {
+        opacity: 0;
+      }
+
       .copy.clicked temba-icon {
         transform: scale(1.2);
       }
@@ -4362,8 +4387,12 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
       temba-icon {
         transition: all 200ms ease-in-out;
       }
-    `}connectedCallback(){super.connectedCallback(),this.handleInput=this.handleInput.bind(this),this.handleSubmit=this.handleSubmit.bind(this)}handleIconClick(l){const n=l.target.getAttribute("name"),e=this.shadowRoot.querySelector("temba-textinput");"copy"===n&&navigator.clipboard&&(this.iconClass="clicked",navigator.clipboard.writeText(e.getDisplayValue()).then((()=>{window.setTimeout((()=>{this.iconClass=""}),300)}))),l.preventDefault(),l.stopPropagation()}handleSubmit(){const l=this.shadowRoot.querySelector("temba-textinput");l.value!==this.value&&(this.value=l.value,this.fireEvent("change")),this.icon=navigator.clipboard?"copy":""}handleChange(l){l.preventDefault(),l.stopPropagation()}handleInput(l){if("Enter"===l.key){l.currentTarget.blur()}}render(){return $`
-      <div>
+
+      temba-icon[name='search'] {
+        margin-right: 1em;
+      }
+    `}connectedCallback(){super.connectedCallback(),this.handleInput=this.handleInput.bind(this),this.handleSubmit=this.handleSubmit.bind(this)}handleIconClick(l){const n=l.target.getAttribute("name"),e=this.shadowRoot.querySelector("temba-textinput");"copy"===n&&navigator.clipboard&&(this.iconClass="clicked",navigator.clipboard.writeText(e.getDisplayValue()).then((()=>{window.setTimeout((()=>{this.iconClass=""}),300)}))),"search"===n&&this.fireCustomEvent(CustomEventType.ButtonClicked,{key:this.key,value:this.value}),l.preventDefault(),l.stopPropagation()}handleSubmit(){const l=this.shadowRoot.querySelector("temba-textinput");l.value!==this.value&&(this.value=l.value,this.fireEvent("change")),this.icon=navigator.clipboard?"copy":""}handleChange(l){l.preventDefault(),l.stopPropagation()}handleInput(l){if("Enter"===l.key){l.currentTarget.blur()}}render(){return $`
+      <div class="wrapper ${this.value?"set":"unset"}">
         <temba-textinput
           value="${this.value?this.value:""}"
           ?datetimepicker=${"datetime"===this.type}
@@ -4373,25 +4402,100 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
         >
           <div class="prefix" slot="prefix">
             <div class="name">${this.name}</div>
+            ${"datetime"===this.type?$`<div style="position: relative; padding-top: .75em;">
+                  <temba-icon name="calendar" animateclick="pulse" />
+                </div>`:null}
           </div>
 
           <div class="postfix">
-            ${"datetime"===this.type?$`<div
-                  style="position: absolute; padding-top: .75em; padding-left: .75em;"
-                >
-                  <temba-icon name="calendar" />
-                </div>`:null}
-
             <div
-              class="popper ${this.iconClass} ${this.icon?this.icon:"none"}"
+              class="popper ${this.iconClass}"
               @click=${this.handleIconClick}
             >
-              <temba-icon name="${this.icon}" animatechange="spin"></temba-icon>
+              ${this.value?$`
+                <temba-icon 
+                  name="search"
+                  animateclick="pulse"                  
+                ></temba-icon>
+                </div>
+              `:null}
+              <temba-icon
+                name="${this.icon}"
+                animatechange="spin"
+                animateclick="pulse"
+              ></temba-icon>
             </div>
           </div>
         </temba-textinput>
       </div>
-    `}}function addCustomElement(l,n){window.customElements.get(l)||window.customElements.define(l,n)}__decorate([e$2({type:String})],ContactFieldEditor.prototype,"key",void 0),__decorate([e$2({type:String})],ContactFieldEditor.prototype,"value",void 0),__decorate([e$2({type:String})],ContactFieldEditor.prototype,"name",void 0),__decorate([e$2({type:String})],ContactFieldEditor.prototype,"type",void 0),__decorate([e$2({type:String})],ContactFieldEditor.prototype,"icon",void 0),__decorate([e$2({type:String})],ContactFieldEditor.prototype,"iconClass",void 0),addCustomElement("temba-anchor",Anchor),addCustomElement("temba-alert",Alert),addCustomElement("temba-store",Store),addCustomElement("temba-textinput",TextInput),addCustomElement("temba-completion",Completion),addCustomElement("temba-checkbox",Checkbox),addCustomElement("temba-select",Select),addCustomElement("temba-options",Options),addCustomElement("temba-loading",Loading),addCustomElement("temba-button",Button),addCustomElement("temba-omnibox",Omnibox),addCustomElement("temba-tip",Tip),addCustomElement("temba-field",FormField),addCustomElement("temba-dialog",Dialog),addCustomElement("temba-modax",Modax),addCustomElement("temba-charcount",CharCount),addCustomElement("temba-contact-history",ContactHistory),addCustomElement("temba-contact-chat",ContactChat),addCustomElement("temba-contact-details",ContactDetails),addCustomElement("temba-ticket-list",TicketList),addCustomElement("temba-list",TembaList),addCustomElement("temba-label",Label),addCustomElement("temba-menu",TembaMenu),addCustomElement("temba-contact-search",ContactSearch),addCustomElement("temba-icon",VectorIcon),addCustomElement("temba-dropdown",Dropdown),addCustomElement("temba-tabs",TabPane),addCustomElement("temba-tab",Tab),addCustomElement("temba-contact-name",ContactName),addCustomElement("temba-contact-field",ContactFieldEditor),addCustomElement("temba-contact-fields",ContactFields),addCustomElement("temba-urn",ContactUrn),addCustomElement("temba-contact-groups",ContactGroups);class AliasEditor extends s$1{constructor(){super(),this.path=[]}static get styles(){return r$2`
+    `}}__decorate([e$2({type:String})],ContactFieldEditor.prototype,"key",void 0),__decorate([e$2({type:String})],ContactFieldEditor.prototype,"value",void 0),__decorate([e$2({type:String})],ContactFieldEditor.prototype,"name",void 0),__decorate([e$2({type:String})],ContactFieldEditor.prototype,"type",void 0),__decorate([e$2({type:String})],ContactFieldEditor.prototype,"icon",void 0),__decorate([e$2({type:String})],ContactFieldEditor.prototype,"iconClass",void 0);const STATUS={S:{name:"Stopped",icon:"x-octagon"},B:{name:"Blocked",icon:"slash"},V:{name:"Archived",icon:"archive"}};class ContactBadges extends ContactStoreElement{static get styles(){return r$2`
+      temba-label {
+        margin: 0.3em;
+      }
+
+      .badges {
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+      .flow {
+      }
+    `}render(){if(this.data){const l=STATUS[this.data.status];return $`
+        <div class="badges">
+          ${l&&"A"!==this.data.status?$`
+                <temba-label
+                  class="status"
+                  icon="${l.icon}"
+                  onclick="goto(event)"
+                  href="/contact/${l.name.toLowerCase()}"
+                  clickable
+                  secondary
+                  shadow
+                >
+                  ${l.name}
+                </temba-label>
+              `:null}
+          ${this.data.flow?$`
+                <temba-label
+                  class="flow"
+                  icon="flow"
+                  onclick="goto(event)"
+                  href="/contact/?search=flow+%3D+${encodeURIComponent('"'+this.data.flow.name+'"')}"
+                  clickable
+                  tertiary
+                  shadow
+                >
+                  ${this.data.flow.name}
+                </temba-label>
+              `:null}
+          ${this.data.language?$`
+                <temba-label
+                  class="language"
+                  icon="globe"
+                  onclick="goto(event)"
+                  href="/contact/?search=language+%3D+${encodeURIComponent('"'+this.data.language+'"')}"
+                  clickable
+                  primary
+                  shadow
+                >
+                  ${this.store.getLanguageName(this.data.language)}
+                </temba-label>
+              `:null}
+          ${this.data.groups.map((l=>$`
+              <temba-label
+                class="group"
+                onclick="goto(event)"
+                href="/contact/filter/${l.uuid}/"
+                icon=${l.is_dynamic?"atom":"users"}
+                clickable
+                light
+                shadow
+              >
+                ${l.name}
+              </temba-label>
+            `))}
+        </div>
+      `}return null}}function addCustomElement(l,n){window.customElements.get(l)||window.customElements.define(l,n)}addCustomElement("temba-anchor",Anchor),addCustomElement("temba-alert",Alert),addCustomElement("temba-store",Store),addCustomElement("temba-textinput",TextInput),addCustomElement("temba-completion",Completion),addCustomElement("temba-checkbox",Checkbox),addCustomElement("temba-select",Select),addCustomElement("temba-options",Options),addCustomElement("temba-loading",Loading),addCustomElement("temba-button",Button),addCustomElement("temba-omnibox",Omnibox),addCustomElement("temba-tip",Tip),addCustomElement("temba-contact-name",ContactName),addCustomElement("temba-contact-field",ContactFieldEditor),addCustomElement("temba-contact-fields",ContactFields),addCustomElement("temba-urn",ContactUrn),addCustomElement("temba-field",FormField),addCustomElement("temba-dialog",Dialog),addCustomElement("temba-modax",Modax),addCustomElement("temba-charcount",CharCount),addCustomElement("temba-contact-history",ContactHistory),addCustomElement("temba-contact-chat",ContactChat),addCustomElement("temba-contact-details",ContactDetails),addCustomElement("temba-ticket-list",TicketList),addCustomElement("temba-list",TembaList),addCustomElement("temba-label",Label),addCustomElement("temba-menu",TembaMenu),addCustomElement("temba-contact-search",ContactSearch),addCustomElement("temba-icon",VectorIcon),addCustomElement("temba-dropdown",Dropdown),addCustomElement("temba-tabs",TabPane),addCustomElement("temba-tab",Tab),addCustomElement("temba-contact-groups",ContactBadges);class AliasEditor extends s$1{constructor(){super(),this.path=[]}static get styles(){return r$2`
       :host {
         line-height: normal;
       }