@nyaruka/temba-components 0.101.0 → 0.102.0

package/CHANGELOG.md

@@ -4,8 +4,14 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v0.102.0](https://github.com/nyaruka/temba-components/compare/v0.101.0...v0.102.0)
+
+- Add nicer menu buttons [`#445`](https://github.com/nyaruka/temba-components/pull/445)
+
 #### [v0.101.0](https://github.com/nyaruka/temba-components/compare/v0.100.0...v0.101.0)
 
+> 17 July 2024
+
 - Switch template field  initialization to updated() [`9701746`](https://github.com/nyaruka/temba-components/commit/97017460746df49432b630c803aa14d120da9004)
 
 #### [v0.100.0](https://github.com/nyaruka/temba-components/compare/v0.99.0...v0.100.0)

package/dist/temba-components.js

@@ -58,7 +58,7 @@ let lt=class extends w{constructor(){super(...arguments),this.renderOptions={hos
      * @license
      * Copyright 2017 Google LLC
      * SPDX-License-Identifier: BSD-3-Clause
-     */function ge(t){return(e,i)=>"object"==typeof i?me(t,e,i):((t,e,i)=>{const o=e.hasOwnProperty(i);return e.constructor.createProperty(i,o?{...t,wrapped:!0}:t),o?Object.getOwnPropertyDescriptor(e,i):void 0})(t,e,i)}class fe extends ue{constructor(){super(),this.name="",this.value=null,this.inputRoot=this,this.disabled=!1,this.internals=this.attachInternals()}updated(t){super.updated(t),t.has("value")&&this.internals.setFormValue(this.value)}get form(){return this.internals.form}setValue(t){this.value=this.serializeValue(t)}getDeserializedValue(){return JSON.parse(this.value)}serializeValue(t){return JSON.stringify(t)}}fe.formAssociated=!0,t([ge({type:String})],fe.prototype,"name",void 0),t([ge({type:String,attribute:"help_text"})],fe.prototype,"helpText",void 0),t([ge({type:Boolean,attribute:"help_always"})],fe.prototype,"helpAlways",void 0),t([ge({type:Boolean,attribute:"widget_only"})],fe.prototype,"widgetOnly",void 0),t([ge({type:Boolean,attribute:"hide_label"})],fe.prototype,"hideLabel",void 0),t([ge({type:String})],fe.prototype,"label",void 0),t([ge({type:Array})],fe.prototype,"errors",void 0),t([ge({type:String})],fe.prototype,"value",void 0),t([ge({attribute:!1})],fe.prototype,"inputRoot",void 0),t([ge({type:Boolean})],fe.prototype,"disabled",void 0);var ve;!function(t){t.alert_warning="alert-square",t.account="user-01",t.active="play",t.add="plus",t.add_note="file-02",t.airtime="bank-note-01",t.analytics="bar-chart-01",t.archive="archive",t.arrow_up="chevron-up",t.arrow_down="chevron-down",t.arrow_left="chevron-left",t.arrow_right="chevron-right",t.attachment="paperclip",t.attachment_audio="volume-min",t.attachment_document="file-06",t.attachment_image="image-01",t.attachment_location="marker-pin-01",t.attachment_video="video-recorder",t.branding="brush-02",t.branding_hostname="server-05",t.branding_notifications="mail-01",t.branding_styling="palette",t.branding_raw="pencil-01",t.broadcast="announcement-01",t.call="phone-call-01",t.call_missed="phone-call-02",t.campaign="clock-refresh",t.campaign_active="play",t.campaign_archived="archive",t.campaigns="clock-refresh",t.channel="zap",t.children="git-branch-01",t.check="check",t.checkbox="square",t.checkbox_checked="check-square",t.checkbox_partial="stop-square",t.classifier_wit="classifier-wit",t.classifier_luis="classifier-luis",t.classifier_bothub="classifier-bothub",t.close="x",t.compose="send-01",t.contact="user-01",t.contact_archived="archive",t.contact_blocked="message-x-square",t.contact_export="download-cloud-01",t.contact_import="upload-cloud-01",t.contact_stopped="slash-octagon",t.contact_updated="user-edit",t.contacts="user-01",t.copy="copy-04",t.dashboard="pie-chart-01",t.definitions_export="download-cloud-01",t.delete="trash-03",t.delete_small="x",t.down="chevron-down",t.download="download-01",t.edit="edit-03",t.email="mail-01",t.error="alert-circle",t.event="zap",t.expressions="at-sign",t.fields="user-edit",t.filter="filter-funnel-01",t.flow="flow",t.flow_background="layers-two-01",t.flow_interrupted="x-close",t.flow_ivr="phone",t.flow_message="message-square-02",t.flow_surveyor="tablet-01",t.flow_user="hard-drive",t.flows="flow",t.global="at-sign",t.grid="dots-grid",t.group="users-01",t.group_exclude="users-x",t.group_include="users-check",t.group_smart="atom-01",t.help="help-circle",t.hide="eye-off",t.home="settings-02",t.image="image-01",t.inbox="inbox-01",t.incidents="alert-square",t.incoming_call="phone-incoming-01",t.integrations="layers-three-01",t.info="user-square",t.issue="alert-square",t.label="tag-01",t.language="translate-01",t.link="link-external-01",t.location="marker-pin-01",t.log="file-02",t.logout="log-out-04",t.menu="menu-01",t.menu_collapse="chevron-left-double",t.message="message-square-02",t.message_export="download-cloud-01",t.messages="message-square-02",t.missing="maximize-02",t.missed_call="phone-x",t.new="plus",t.next_schedule="alarm-clock",t.notification="bell-01",t.number="hash-01",t.optin_requested="message-notification-circle",t.optin="message-check-circle",t.optout="message-x-circle",t.org_active="credit-card-02",t.org_anonymous="glasses-01",t.org_bulk="credit-card-plus",t.org_flagged="flag-01",t.org_new="stars-02",t.org_suspended="slash-circle-01",t.org_verified="check-verified-02",t.overview="pie-chart-01",t.prometheus="prometheus",t.progress_spinner="refresh-cw-04",t.featured="star-01",t.quick_replies="dotpoints-01",t.recording="microphone-01",t.resend="refresh-cw-05",t.reset="flip-backward",t.resthooks="share-07",t.restore="play",t.results_export="download-cloud-01",t.retry="refresh-cw-05",t.revisions="clock-rewind",t.rocketchat="rocketchat",t.runs="rows-03",t.schedule="calendar",t.search="search-refraction",t.select_open="chevron-down",t.select_clear="x",t.send="send-03",t.service="magic-wand-01",t.service_end="log-out-04",t.settings="settings-02",t.show="eye",t.simulator="phone-02",t.sort="chevron-selector-vertical",t.sort_down="sort-arrow-down",t.sort_up="sort-arrow-up",t.staff="hard-drive",t.submit="check",t.success="check",t.template_approved="check-circle",t.template_pending="hourglass-01",t.template_rejected="alert-circle",t.tickets="agent",t.tickets_all="archive",t.tickets_closed="check",t.tickets_mine="coffee",t.tickets_open="inbox-01",t.tickets_export="download-cloud-01",t.tickets_unassigned="inbox-01",t.topic="message-text-circle-02",t.two_factor_enabled="shield-02",t.two_factor_disabled="shield-01",t.trigger="signal-01",t.trigger_active="play",t.trigger_archived="archive",t.trigger_new="plus",t.trigger_keyword="message-check-square",t.trigger_catch_all="message-question-square",t.trigger_inbound_call="phone-incoming-01",t.trigger_missed_call="phone-hang-up",t.trigger_schedule="calendar",t.trigger_new_conversation="message-chat-square",t.trigger_referral="user-right-01",t.trigger_closed_ticket="agent",t.trigger_opt_in="message-check-circle",t.trigger_opt_out="message-x-circle",t.triggers="signal-01",t.updated="edit-02",t.up="chevron-up",t.upload="upload-cloud-01",t.upload_image="camera-01",t.usages="link-04",t.user="users-01",t.users="users-01",t.user_beta="shield-zap",t.video="video-recorder",t.webhook="link-external-01",t.wit="wit",t.workspace="folder",t.zapier="zapier",t.zendesk="zendesk",t.channel_a="channel-android",t.channel_ac="zap",t.channel_at="zap",t.channel_bs="zap",t.channel_bw="zap",t.channel_cs="zap",t.channel_ct="channel-clickatell",t.channel_d3="channel-whatsapp",t.channel_d3c="channel-whatsapp",t.channel_da="zap",t.channel_ds="channel-discord",t.channel_ex="zap",t.channel_fb="channel-facebook",t.channel_fba="channel-facebook",t.channel_fc="channel-freshchat",t.channel_fcm="channel-firebase",t.channel_hm="zap",t.channel_ib="zap",t.channel_ig="channel-instagram",t.channel_jc="channel-jiochat",t.channel_kn="channel-kannel",t.channel_kwa="channel-whatsapp",t.channel_ln="channel-line",t.channel_mt="channel-mtarget",t.channel_mtn="zap",t.channel_nx="channel-vonage",t.channel_pl="channel-plivo",t.channel_rc="channel-rocketchat",t.channel_sl="channel-slack",t.channel_sq="zap",t.channel_st="zap",t.channel_sw="channel-signalwire",t.channel_t="channel-twilio",t.channel_tg="channel-telegram",t.channel_tms="channel-twilio",t.channel_tq="channel-thinq",t.channel_tw="zap",t.channel_twa="channel-whatsapp",t.channel_twc="zap",t.channel_twt="channel-twitter",t.channel_vk="channel-vk",t.channel_vp="channel-viber",t.channel_wa="channel-whatsapp",t.channel_wac="channel-whatsapp",t.channel_wc="channel-wechat",t.channel_yo="zap",t.channel_zvw="channel-whatsapp",t.bothub="bothub",t.chatbase="chatbase",t.dtone="dtone",t.default="list",t.datepicker="calendar",t.slider="sliders-02",t.select="browser",t.input="edit-05"}(ve||(ve={}));class be extends fe{constructor(){super(...arguments),this.name="",this.disabled=!1,this.size=1.2,this.animateChange="pulse"}static get styles(){return r`
+     */function ge(t){return(e,i)=>"object"==typeof i?me(t,e,i):((t,e,i)=>{const o=e.hasOwnProperty(i);return e.constructor.createProperty(i,o?{...t,wrapped:!0}:t),o?Object.getOwnPropertyDescriptor(e,i):void 0})(t,e,i)}class fe extends ue{constructor(){super(),this.name="",this.value=null,this.inputRoot=this,this.disabled=!1,this.internals=this.attachInternals()}updated(t){super.updated(t),t.has("value")&&this.internals.setFormValue(this.value)}get form(){return this.internals.form}setValue(t){this.value=this.serializeValue(t)}getDeserializedValue(){return JSON.parse(this.value)}serializeValue(t){return JSON.stringify(t)}}fe.formAssociated=!0,t([ge({type:String})],fe.prototype,"name",void 0),t([ge({type:String,attribute:"help_text"})],fe.prototype,"helpText",void 0),t([ge({type:Boolean,attribute:"help_always"})],fe.prototype,"helpAlways",void 0),t([ge({type:Boolean,attribute:"widget_only"})],fe.prototype,"widgetOnly",void 0),t([ge({type:Boolean,attribute:"hide_label"})],fe.prototype,"hideLabel",void 0),t([ge({type:String})],fe.prototype,"label",void 0),t([ge({type:Array})],fe.prototype,"errors",void 0),t([ge({type:String})],fe.prototype,"value",void 0),t([ge({attribute:!1})],fe.prototype,"inputRoot",void 0),t([ge({type:Boolean})],fe.prototype,"disabled",void 0);var ve;!function(t){t.alert_warning="alert-square",t.account="user-01",t.active="play",t.add="plus",t.add_note="file-02",t.airtime="bank-note-01",t.analytics="bar-chart-01",t.archive="archive",t.arrow_up="chevron-up",t.arrow_down="chevron-down",t.arrow_left="chevron-left",t.arrow_right="chevron-right",t.attachment="paperclip",t.attachment_audio="volume-min",t.attachment_document="file-06",t.attachment_image="image-01",t.attachment_location="marker-pin-01",t.attachment_video="video-recorder",t.branding="brush-02",t.branding_hostname="server-05",t.branding_notifications="mail-01",t.branding_styling="palette",t.branding_raw="pencil-01",t.broadcast="announcement-01",t.call="phone-call-01",t.call_missed="phone-call-02",t.campaign="clock-refresh",t.campaign_active="play",t.campaign_archived="archive",t.campaigns="clock-refresh",t.channel="zap",t.children="git-branch-01",t.check="check",t.checkbox="square",t.checkbox_checked="check-square",t.checkbox_partial="stop-square",t.classifier_wit="classifier-wit",t.classifier_luis="classifier-luis",t.classifier_bothub="classifier-bothub",t.close="x",t.compose="send-01",t.contact="user-01",t.contact_archived="archive",t.contact_blocked="message-x-square",t.contact_export="download-cloud-01",t.contact_import="upload-cloud-01",t.contact_stopped="slash-octagon",t.contact_updated="user-edit",t.contacts="user-01",t.copy="copy-04",t.dashboard="pie-chart-01",t.definitions_export="download-cloud-01",t.delete="trash-03",t.delete_small="x",t.down="chevron-down",t.download="download-01",t.edit="edit-03",t.email="mail-01",t.error="alert-circle",t.event="zap",t.export="download-cloud-01",t.expressions="at-sign",t.fields="user-edit",t.filter="filter-funnel-01",t.flow="flow",t.flow_background="layers-two-01",t.flow_interrupted="x-close",t.flow_ivr="phone",t.flow_message="message-square-02",t.flow_surveyor="tablet-01",t.flow_user="hard-drive",t.flows="flow",t.global="at-sign",t.grid="dots-grid",t.group="users-01",t.group_exclude="users-x",t.group_include="users-check",t.group_smart="atom-01",t.help="help-circle",t.hide="eye-off",t.home="settings-02",t.image="image-01",t.inbox="inbox-01",t.incidents="alert-square",t.incoming_call="phone-incoming-01",t.integrations="layers-three-01",t.info="user-square",t.issue="alert-square",t.label="tag-01",t.language="translate-01",t.link="link-external-01",t.location="marker-pin-01",t.log="file-02",t.logout="log-out-04",t.menu="menu-01",t.menu_collapse="chevron-left-double",t.message="message-square-02",t.message_export="download-cloud-01",t.messages="message-square-02",t.missing="maximize-02",t.missed_call="phone-x",t.new="plus",t.next_schedule="alarm-clock",t.notification="bell-01",t.number="hash-01",t.optin_requested="message-notification-circle",t.optin="message-check-circle",t.optout="message-x-circle",t.org_active="credit-card-02",t.org_anonymous="glasses-01",t.org_bulk="credit-card-plus",t.org_flagged="flag-01",t.org_new="stars-02",t.org_suspended="slash-circle-01",t.org_verified="check-verified-02",t.overview="pie-chart-01",t.prometheus="prometheus",t.progress_spinner="refresh-cw-04",t.featured="star-01",t.quick_replies="dotpoints-01",t.recording="microphone-01",t.resend="refresh-cw-05",t.reset="flip-backward",t.resthooks="share-07",t.restore="play",t.results_export="download-cloud-01",t.retry="refresh-cw-05",t.revisions="clock-rewind",t.rocketchat="rocketchat",t.runs="rows-03",t.schedule="calendar",t.search="search-refraction",t.select_open="chevron-down",t.select_clear="x",t.send="send-03",t.service="magic-wand-01",t.service_end="log-out-04",t.settings="settings-02",t.show="eye",t.simulator="phone-02",t.sort="chevron-selector-vertical",t.sort_down="sort-arrow-down",t.sort_up="sort-arrow-up",t.staff="hard-drive",t.submit="check",t.success="check",t.template_approved="check-circle",t.template_pending="hourglass-01",t.template_rejected="alert-circle",t.tickets="agent",t.tickets_all="archive",t.tickets_closed="check",t.tickets_mine="coffee",t.tickets_open="inbox-01",t.tickets_export="download-cloud-01",t.tickets_unassigned="inbox-01",t.topic="message-text-circle-02",t.two_factor_enabled="shield-02",t.two_factor_disabled="shield-01",t.trigger="signal-01",t.trigger_active="play",t.trigger_archived="archive",t.trigger_new="plus",t.trigger_keyword="message-check-square",t.trigger_catch_all="message-question-square",t.trigger_inbound_call="phone-incoming-01",t.trigger_missed_call="phone-hang-up",t.trigger_schedule="calendar",t.trigger_new_conversation="message-chat-square",t.trigger_referral="user-right-01",t.trigger_closed_ticket="agent",t.trigger_opt_in="message-check-circle",t.trigger_opt_out="message-x-circle",t.triggers="signal-01",t.updated="edit-02",t.up="chevron-up",t.upload="upload-cloud-01",t.upload_image="camera-01",t.usages="link-04",t.user="users-01",t.users="users-01",t.user_beta="shield-zap",t.video="video-recorder",t.webhook="link-external-01",t.wit="wit",t.workspace="folder",t.zapier="zapier",t.zendesk="zendesk",t.channel_a="channel-android",t.channel_ac="zap",t.channel_at="zap",t.channel_bs="zap",t.channel_bw="zap",t.channel_cs="zap",t.channel_ct="channel-clickatell",t.channel_d3="channel-whatsapp",t.channel_d3c="channel-whatsapp",t.channel_da="zap",t.channel_ds="channel-discord",t.channel_ex="zap",t.channel_fb="channel-facebook",t.channel_fba="channel-facebook",t.channel_fc="channel-freshchat",t.channel_fcm="channel-firebase",t.channel_hm="zap",t.channel_ib="zap",t.channel_ig="channel-instagram",t.channel_jc="channel-jiochat",t.channel_kn="channel-kannel",t.channel_kwa="channel-whatsapp",t.channel_ln="channel-line",t.channel_mt="channel-mtarget",t.channel_mtn="zap",t.channel_nx="channel-vonage",t.channel_pl="channel-plivo",t.channel_rc="channel-rocketchat",t.channel_sl="channel-slack",t.channel_sq="zap",t.channel_st="zap",t.channel_sw="channel-signalwire",t.channel_t="channel-twilio",t.channel_tg="channel-telegram",t.channel_tms="channel-twilio",t.channel_tq="channel-thinq",t.channel_tw="zap",t.channel_twa="channel-whatsapp",t.channel_twc="zap",t.channel_twt="channel-twitter",t.channel_vk="channel-vk",t.channel_vp="channel-viber",t.channel_wa="channel-whatsapp",t.channel_wac="channel-whatsapp",t.channel_wc="channel-wechat",t.channel_yo="zap",t.channel_zvw="channel-whatsapp",t.bothub="bothub",t.chatbase="chatbase",t.dtone="dtone",t.default="list",t.datepicker="calendar",t.slider="sliders-02",t.select="browser",t.input="edit-05"}(ve||(ve={}));class be extends fe{constructor(){super(...arguments),this.name="",this.disabled=!1,this.size=1.2,this.animateChange="pulse"}static get styles(){return r`
       :host {
         color: var(--color-text);
         display: inline-block;
@@ -1519,6 +1519,7 @@ let ir=Ps,or=!1;const nr=["es","fr","pt"],{setLocale:sr}=(t=>(function(t){if(or)
         border: 1px solid transparent;
         transition: var(--transition-speed);
         background: var(--button-mask);
+        display: flex;
       }
 
       .button-container.disabled-button {
@@ -1563,6 +1564,25 @@ let ir=Ps,or=!1;const nr=["es","fr","pt"],{setLocale:sr}=(t=>(function(t){if(or)
         color: var(--color-button-light-text);
       }
 
+      .lined-button {
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        color: rgba(0, 0, 0, 0.7);
+        background: transparent;
+      }
+
+      .lined-button .button-mask:hover {
+        background: rgba(0, 0, 0, 0.03);
+      }
+
+      .icon-button {
+        --button-y: 0.2em;
+        --button-x: 0em;
+      }
+
+      .icon-button temba-icon {
+        padding: 0 0.5em;
+      }
+
       .attention-button {
         background: var(--color-button-attention);
         color: var(--color-button-primary-text);
@@ -1600,7 +1620,7 @@ let ir=Ps,or=!1;const nr=["es","fr","pt"],{setLocale:sr}=(t=>(function(t){if(or)
       <div
         class="button-container 
           v-${this.v}
-          ${Vt({"primary-button":this.primary||!this.primary&&!this.secondary&&!this.attention&&1==this.v,"secondary-button":this.secondary,"disabled-button":this.disabled,"active-button":this.active,"attention-button":this.attention,"destructive-button":this.destructive,"light-button":this.light,small:this.small})}"
+          ${Vt({"primary-button":this.primary||!this.primary&&!this.secondary&&!this.attention&&1==this.v,"secondary-button":this.secondary,"disabled-button":this.disabled,"active-button":this.active,"attention-button":this.attention,"destructive-button":this.destructive,"light-button":this.light,"lined-button":this.lined,"icon-button":!!this.icon,small:this.small})}"
         tabindex="0"
         @mousedown=${this.handleMouseDown}
         @mouseup=${this.handleMouseUp}
@@ -1609,10 +1629,11 @@ let ir=Ps,or=!1;const nr=["es","fr","pt"],{setLocale:sr}=(t=>(function(t){if(or)
         @click=${this.handleClick}
       >
         <div class="button-mask">
+          ${this.icon?j`<temba-icon name="${this.icon}"></temba-icon>`:null}
           <div class="button-name"><slot name="name">${t}</slot></div>
         </div>
       </div>
-    `}}t([ge({type:Boolean})],el.prototype,"primary",void 0),t([ge({type:Boolean})],el.prototype,"secondary",void 0),t([ge({type:Boolean})],el.prototype,"attention",void 0),t([ge({type:Number})],el.prototype,"v",void 0),t([ge({type:Boolean})],el.prototype,"destructive",void 0),t([ge({type:Boolean})],el.prototype,"light",void 0),t([ge()],el.prototype,"name",void 0),t([ge({type:Boolean})],el.prototype,"disabled",void 0),t([ge({type:Boolean})],el.prototype,"submitting",void 0),t([ge({type:Boolean})],el.prototype,"active",void 0),t([ge({type:Boolean})],el.prototype,"small",void 0),t([ge({type:String})],el.prototype,"href",void 0),t([ge({type:Number})],el.prototype,"index",void 0);class il extends lt{constructor(){super(...arguments),this.hideLabel=!1,this.widgetOnly=!1,this.errors=[],this.hideErrors=!1,this.helpText="",this.helpAlways=!0,this.label="",this.name="",this.disabled=!1}static get styles(){return r`
+    `}}t([ge({type:Boolean})],el.prototype,"primary",void 0),t([ge({type:Boolean})],el.prototype,"secondary",void 0),t([ge({type:Boolean})],el.prototype,"attention",void 0),t([ge({type:Number})],el.prototype,"v",void 0),t([ge({type:Boolean})],el.prototype,"destructive",void 0),t([ge({type:Boolean})],el.prototype,"light",void 0),t([ge()],el.prototype,"name",void 0),t([ge({type:Boolean})],el.prototype,"disabled",void 0),t([ge({type:Boolean})],el.prototype,"submitting",void 0),t([ge({type:Boolean})],el.prototype,"active",void 0),t([ge({type:Boolean})],el.prototype,"small",void 0),t([ge({type:Boolean})],el.prototype,"lined",void 0),t([ge({type:String})],el.prototype,"href",void 0),t([ge({type:Number})],el.prototype,"index",void 0),t([ge({type:String})],el.prototype,"icon",void 0);class il extends lt{constructor(){super(...arguments),this.hideLabel=!1,this.widgetOnly=!1,this.errors=[],this.hideErrors=!1,this.helpText="",this.helpAlways=!0,this.label="",this.name="",this.disabled=!1}static get styles(){return r`
       :host {
         font-family: var(--font-family);
       }
@@ -2320,7 +2341,7 @@ let ir=Ps,or=!1;const nr=["es","fr","pt"],{setLocale:sr}=(t=>(function(t){if(or)
           class="${this.fetching?"":"hidden"}"
         ></temba-loading>
       </div>
-    </div>`}}var Cl;t([ge({type:Array})],Al.prototype,"messageGroups",void 0),t([ge({type:Boolean})],Al.prototype,"fetching",void 0),t([ge({type:Boolean,attribute:!1})],Al.prototype,"hideTopScroll",void 0),t([ge({type:Boolean,attribute:!1})],Al.prototype,"hideBottomScroll",void 0),t([ge({type:String,attribute:"avatar"})],Al.prototype,"defaultAvatar",void 0),t([ge({type:Boolean})],Al.prototype,"agent",void 0),function(t){t.send="send-03",t.attachment="paperclip",t.attachment_audio="volume-min",t.attachment_document="file-06",t.attachment_image="image-01",t.attachment_location="marker-pin-01",t.attachment_video="video-recorder"}(Cl||(Cl={}));var Sl;!function(t){t.MESSAGE_CREATED="msg_created",t.MESSAGE_RECEIVED="msg_received",t.BROADCAST_CREATED="broadcast_created",t.IVR_CREATED="ivr_created",t.FLOW_ENTERED="flow_entered",t.FLOW_EXITED="flow_exited",t.RUN_RESULT_CHANGED="run_result_changed",t.CONTACT_FIELD_CHANGED="contact_field_changed",t.CONTACT_GROUPS_CHANGED="contact_groups_changed",t.CONTACT_NAME_CHANGED="contact_name_changed",t.CONTACT_URNS_CHANGED="contact_urns_changed",t.CAMPAIGN_FIRED="campaign_fired",t.CHANNEL_EVENT="channel_event",t.CONTACT_LANGUAGE_CHANGED="contact_language_changed",t.WEBHOOK_CALLED="webhook_called",t.AIRTIME_TRANSFERRED="airtime_transferred",t.CALL_STARTED="call_started",t.EMAIL_SENT="email_sent",t.INPUT_LABELS_ADDED="input_labels_added",t.NOTE_CREATED="note_created",t.TICKET_ASSIGNED="ticket_assigned",t.TICKET_NOTE_ADDED="ticket_note_added",t.TICKET_CLOSED="ticket_closed",t.TICKET_OPENED="ticket_opened",t.TICKET_REOPENED="ticket_reopened",t.OPTIN_REQUESTED="optin_requested",t.ERROR="error",t.FAILURE="failure"}(Sl||(Sl={}));const El=(t,e,i)=>{if(1===i.length)return`${t} **${i[0].name}**`;{const t=i.map((t=>`**${t.name}**`));if(2===t.length)return`${e} ${t.join(" and ")}`;{const i=t.pop();return`${e} ${t.join(", ")}, and ${i}`}}},Tl=t=>{var e,i;return"mt_miss"===t.event.type?"Missed outgoing call":"mo_miss"===t.event.type?"Missed incoming call":"new_conversation"===t.event.type?"Started conversation":"welcome_message"===t.channel_event_type?"Welcome Message Sent":"referral"===t.event.type?"Referred":"follow"===t.event.type?"Followed":"stop_contact"===t.event.type?"Stopped":"mt_call"===t.event.type?"Outgoing Phone Call":"mo_call"==t.event.type?"Incoming Phone call":"optin"==t.event.type?`Opted in to **${null===(e=t.event.optin)||void 0===e?void 0:e.name}**`:"optout"==t.event.type?`Opted out of **${null===(i=t.event.optin)||void 0===i?void 0:i.name}**`:void 0},$l=t=>{let e="Interrupted";return"I"!==t.status&&(e=t.type===Sl.FLOW_ENTERED?"Started":"Completed"),`${e} [**${t.flow.name}**](/flow/editor/${t.flow.uuid}/)`},Ol=t=>{if(!t.name.startsWith("_")&&t.value)return`Updated flow result **${t.name}** to **${t.value}**`},Ll=t=>t.value?`Updated **${t.field.name}** to **${t.value.text}**`:`Cleared **${t.field.name}**`,Ml=t=>`Updated **Contact Name** to **${t.name}**`,zl=t=>`Updated **URNs** to ${((t,e,i="and")=>ie(t.map(e),i))(t.urns,(t=>`**${t.split(":")[1].split("?")[0]}**`))}`,Il=t=>`Email sent to **${ie(t.to,"and")}** with subject **${t.subject}**`,Pl=t=>`Applied ${El("label","labels",t.labels)}`,Dl=(t,e)=>t.created_by?`**${(t=>{if(t)return t.first_name&&t.last_name?`${t.first_name} ${t.last_name}`:t.first_name?t.first_name:t.email})(t.created_by)}** ${e} a **[ticket](/ticket/all/closed/${t.ticket.uuid}/)**`:`A **[ticket](/ticket/all/closed/${t.ticket.uuid}/)** was **${e}**`,Nl=t=>t.assignee?t.assignee.id===t.created_by.id?`**${bl(t.created_by)}** took this ticket`:`${bl(t.created_by)} assigned this ticket to **${bl(t.assignee)}**`:`**${bl(t.created_by)}** unassigned this ticket`,Bl=t=>{const e=t;return e.groups_added?El("Added to group","Added to groups",e.groups_added):e.groups_removed?El("Removed from group","Removed from groups",e.groups_removed):void 0},Rl=t=>`Campaign ${t.campaign.name}\n      ${"S"===t.fired_result?"skipped":"triggered"}\n      ${t.campaign_event.offset_display}\n      ${t.campaign_event.relative_to.name}`,ql=t=>"success"===t.status?`Successfully called ${t.url}`:`Failed to call ${t.url}`,Ul=t=>0===parseFloat(t.actual_amount)?"Airtime transfer failed":`Transferred **${t.actual_amount}** ${t.currency} of airtime`,Fl=t=>`Language updated to **${t.language}**`,Zl=t=>`Requested opt-in for ${t.optin.name}`;class jl extends gl{static get styles(){return r`
+    </div>`}}var Cl;t([ge({type:Array})],Al.prototype,"messageGroups",void 0),t([ge({type:Boolean})],Al.prototype,"fetching",void 0),t([ge({type:Boolean,attribute:!1})],Al.prototype,"hideTopScroll",void 0),t([ge({type:Boolean,attribute:!1})],Al.prototype,"hideBottomScroll",void 0),t([ge({type:String,attribute:"avatar"})],Al.prototype,"defaultAvatar",void 0),t([ge({type:Boolean})],Al.prototype,"agent",void 0),function(t){t.send="send-03",t.attachment="paperclip",t.attachment_audio="volume-min",t.attachment_document="file-06",t.attachment_image="image-01",t.attachment_location="marker-pin-01",t.attachment_video="video-recorder"}(Cl||(Cl={}));var Sl;!function(t){t.MESSAGE_CREATED="msg_created",t.MESSAGE_RECEIVED="msg_received",t.BROADCAST_CREATED="broadcast_created",t.IVR_CREATED="ivr_created",t.FLOW_ENTERED="flow_entered",t.FLOW_EXITED="flow_exited",t.RUN_RESULT_CHANGED="run_result_changed",t.CONTACT_FIELD_CHANGED="contact_field_changed",t.CONTACT_GROUPS_CHANGED="contact_groups_changed",t.CONTACT_NAME_CHANGED="contact_name_changed",t.CONTACT_URNS_CHANGED="contact_urns_changed",t.CAMPAIGN_FIRED="campaign_fired",t.CHANNEL_EVENT="channel_event",t.CONTACT_LANGUAGE_CHANGED="contact_language_changed",t.WEBHOOK_CALLED="webhook_called",t.AIRTIME_TRANSFERRED="airtime_transferred",t.CALL_STARTED="call_started",t.EMAIL_SENT="email_sent",t.INPUT_LABELS_ADDED="input_labels_added",t.NOTE_CREATED="note_created",t.TICKET_ASSIGNED="ticket_assigned",t.TICKET_NOTE_ADDED="ticket_note_added",t.TICKET_CLOSED="ticket_closed",t.TICKET_OPENED="ticket_opened",t.TICKET_REOPENED="ticket_reopened",t.TICKET_TOPIC_CHANGED="ticket_topic_changed",t.OPTIN_REQUESTED="optin_requested",t.ERROR="error",t.FAILURE="failure"}(Sl||(Sl={}));const El=(t,e,i)=>{if(1===i.length)return`${t} **${i[0].name}**`;{const t=i.map((t=>`**${t.name}**`));if(2===t.length)return`${e} ${t.join(" and ")}`;{const i=t.pop();return`${e} ${t.join(", ")}, and ${i}`}}},Tl=t=>{var e,i;return"mt_miss"===t.event.type?"Missed outgoing call":"mo_miss"===t.event.type?"Missed incoming call":"new_conversation"===t.event.type?"Started conversation":"welcome_message"===t.channel_event_type?"Welcome Message Sent":"referral"===t.event.type?"Referred":"follow"===t.event.type?"Followed":"stop_contact"===t.event.type?"Stopped":"mt_call"===t.event.type?"Outgoing Phone Call":"mo_call"==t.event.type?"Incoming Phone call":"optin"==t.event.type?`Opted in to **${null===(e=t.event.optin)||void 0===e?void 0:e.name}**`:"optout"==t.event.type?`Opted out of **${null===(i=t.event.optin)||void 0===i?void 0:i.name}**`:void 0},$l=t=>{let e="Interrupted";return"I"!==t.status&&(e=t.type===Sl.FLOW_ENTERED?"Started":"Completed"),`${e} [**${t.flow.name}**](/flow/editor/${t.flow.uuid}/)`},Ol=t=>{if(!t.name.startsWith("_")&&t.value)return`Updated flow result **${t.name}** to **${t.value}**`},Ll=t=>t.value?`Updated **${t.field.name}** to **${t.value.text}**`:`Cleared **${t.field.name}**`,Ml=t=>`Updated **Contact Name** to **${t.name}**`,zl=t=>`Updated **URNs** to ${((t,e,i="and")=>ie(t.map(e),i))(t.urns,(t=>`**${t.split(":")[1].split("?")[0]}**`))}`,Il=t=>`Email sent to **${ie(t.to,"and")}** with subject **${t.subject}**`,Pl=t=>`Applied ${El("label","labels",t.labels)}`,Dl=(t,e)=>t.created_by?`**${(t=>{if(t)return t.first_name&&t.last_name?`${t.first_name} ${t.last_name}`:t.first_name?t.first_name:t.email})(t.created_by)}** ${e} a **[ticket](/ticket/all/closed/${t.ticket.uuid}/)**`:`A **[ticket](/ticket/all/closed/${t.ticket.uuid}/)** was **${e}**`,Nl=t=>t.assignee?t.assignee.id===t.created_by.id?`**${bl(t.created_by)}** took this ticket`:`${bl(t.created_by)} assigned this ticket to **${bl(t.assignee)}**`:`**${bl(t.created_by)}** unassigned this ticket`,Bl=t=>{const e=t;return e.groups_added?El("Added to group","Added to groups",e.groups_added):e.groups_removed?El("Removed from group","Removed from groups",e.groups_removed):void 0},Rl=t=>`Campaign ${t.campaign.name}\n      ${"S"===t.fired_result?"skipped":"triggered"}\n      ${t.campaign_event.offset_display}\n      ${t.campaign_event.relative_to.name}`,ql=t=>"success"===t.status?`Successfully called ${t.url}`:`Failed to call ${t.url}`,Ul=t=>0===parseFloat(t.actual_amount)?"Airtime transfer failed":`Transferred **${t.actual_amount}** ${t.currency} of airtime`,Fl=t=>`Language updated to **${t.language}**`,Zl=t=>`Requested opt-in for ${t.optin.name}`;class jl extends gl{static get styles(){return r`
       :host {
         flex-grow: 1;
         display: flex;
@@ -2397,7 +2418,7 @@ let ir=Ps,or=!1;const nr=["es","fr","pt"],{setLocale:sr}=(t=>(function(t){if(or)
       }
     `}constructor(){super(),this.contactsEndpoint="/api/v2/contacts.json",this.currentNote="",this.showDetails=!0,this.currentTicket=null,this.currentContact=null,this.agent="",this.blockFetching=!1,this.avatar=yl,this.ticket=null,this.lastEventTime=null,this.newestEventTime=null,this.refreshId=null,this.polling=!1}firstUpdated(t){super.firstUpdated(t)}connectedCallback(){super.connectedCallback(),this.chat=this.shadowRoot.querySelector("temba-chat")}disconnectedCallback(){this.refreshId&&clearInterval(this.refreshId)}updated(t){super.updated(t),(t.has("data")||t.has("currentContact"))&&(this.currentContact=this.data),t.has("currentContact")&&(this.chat=this.shadowRoot.querySelector("temba-chat"),this.reset(),this.fetchPreviousMessages())}reset(){this.chat&&this.chat.reset(),this.blockFetching=!1,this.ticket=null,this.lastEventTime=null,this.newestEventTime=null,this.refreshId=null,this.polling=!1}refresh(){this.checkForNewMessages()}handleSend(t){const e=t.detail.name;if("Send"===e){const i={contact:this.currentContact.uuid},o=t.currentTarget;if(o){const t=o.currentText;t&&t.length>0&&(i.text=t);const e=o.currentAttachments;if(e&&e.length>0){const t=e.map((t=>t.uuid));i.attachments=t}}this.currentTicket&&(i.ticket=this.currentTicket.uuid);const n=e+" failed, please try again.";Kt("/api/v2/messages.json",i).then((t=>{if(t.status<400)this.checkForNewMessages(),o.reset(),this.fireCustomEvent(Le.MessageSent,{msg:i});else if(t.status<500)if(t.json.text&&t.json.text.length>0&&t.json.text[0].length>0){let e=t.json.text[0];e=e.replace("Ensure this field has no more than","Maximum allowed text is"),o.buttonError=e}else if(t.json.attachments&&t.json.attachments.length>0&&t.json.attachments[0].length>0){let e=t.json.attachments[0];e=e.replace("Ensure this field has no more than","Maximum allowed attachments is").replace("elements","files"),o.buttonError=e}else o.buttonError=n;else o.buttonError=n})).catch((t=>{console.error(t),o.buttonError=n}))}}render(){const t=this.currentContact?this.getTembaContactHistory():null,e=this.currentContact?this.getTembaChatbox():null,i=j`
       <div class="chat-wrapper">${t} ${e}</div>
-    `;return j`${i}`}getEndpoint(){return`/contact/history/${this.currentContact.uuid}/?_format=json`}scheduleRefresh(){let t=(new Date).getTime()-this.newestEventTime/1e3-5e3;this.refreshId&&(clearTimeout(this.refreshId),this.refreshId=null),t=Math.min(t,15e3),t=Math.max(t,2e3),this.refreshId=setTimeout((()=>{this.checkForNewMessages()}),t)}getEventMessage(t){let e=null;switch(t.type){case Sl.ERROR:case Sl.FAILURE:e={type:xl.Inline,text:`Error during flow: ${i=t.text,i.charAt(0).toUpperCase()+i.slice(1)}`};break;case Sl.TICKET_OPENED:e={type:xl.Inline,text:Dl(t,"opened")};break;case Sl.TICKET_ASSIGNED:e={type:xl.Inline,text:Nl(t)};break;case Sl.TICKET_REOPENED:e={type:xl.Inline,text:Dl(t,"reopened")};break;case Sl.TICKET_CLOSED:e={type:xl.Inline,text:Dl(t,"closed")};break;case Sl.FLOW_ENTERED:case Sl.FLOW_EXITED:e={type:xl.Inline,text:$l(t)};break;case Sl.RUN_RESULT_CHANGED:e={type:xl.Inline,text:Ol(t)};break;case Sl.CONTACT_FIELD_CHANGED:e={type:xl.Inline,text:Ll(t)};break;case Sl.CONTACT_NAME_CHANGED:e={type:xl.Inline,text:Ml(t)};break;case Sl.CONTACT_URNS_CHANGED:e={type:xl.Inline,text:zl(t)};break;case Sl.EMAIL_SENT:e={type:xl.Inline,text:Il(t)};break;case Sl.INPUT_LABELS_ADDED:e={type:xl.Inline,text:Pl(t)};break;case Sl.CONTACT_GROUPS_CHANGED:e={type:xl.Inline,text:Bl(t)};break;case Sl.WEBHOOK_CALLED:e={type:xl.Inline,text:ql(t)};break;case Sl.AIRTIME_TRANSFERRED:e={type:xl.Inline,text:Ul(t)};break;case Sl.CALL_STARTED:e={type:xl.Inline,text:"Call Started"};break;case Sl.CAMPAIGN_FIRED:e={type:xl.Inline,text:Rl(t)};break;case Sl.CHANNEL_EVENT:e={type:xl.Inline,text:Tl(t)};break;case Sl.CONTACT_LANGUAGE_CHANGED:e={type:xl.Inline,text:Fl(t)};break;case Sl.OPTIN_REQUESTED:e={type:xl.Inline,text:Zl(t)}}var i;return e&&t.created_on?e.date=new Date(t.created_on):console.error("Unknown event type",t),e}getUserForEvent(t){let e=null;if(t.created_by){const i=this.store.getUser(t.created_by.email);i&&(e={email:t.created_by.email,name:[i.first_name,i.last_name].join(" "),avatar:i.avatar})}else"msg_received"===t.type&&(e={name:this.currentContact.name});return e}createMessages(t){if(t.events){let e=t.events.map((t=>{const e=1e3*new Date(t.created_on).getTime();if(e>this.newestEventTime&&(this.newestEventTime=e),"ticket_note_added"===t.type){const e=t;return{type:xl.Note,id:t.created_on+t.type,user:this.getUserForEvent(e),date:new Date(e.created_on),text:e.note}}if("msg_created"===t.type||"msg_received"===t.type||"broadcast_created"===t.type){const e=t;return{type:"msg_received"===e.type?"msg_in":"msg_out",id:e.msg.id+"",user:this.getUserForEvent(e),date:new Date(e.created_on),attachments:e.msg.attachments,text:e.msg.text,sendError:"E"===e.status||"F"===e.status,popup:j`<div
+    `;return j`${i}`}getEndpoint(){return`/contact/history/${this.currentContact.uuid}/?_format=json`}scheduleRefresh(){let t=(new Date).getTime()-this.newestEventTime/1e3-5e3;this.refreshId&&(clearTimeout(this.refreshId),this.refreshId=null),t=Math.min(t,15e3),t=Math.max(t,2e3),this.refreshId=setTimeout((()=>{this.checkForNewMessages()}),t)}getEventMessage(t){let e=null;switch(t.type){case Sl.ERROR:case Sl.FAILURE:e={type:xl.Inline,text:`Error during flow: ${i=t.text,i.charAt(0).toUpperCase()+i.slice(1)}`};break;case Sl.TICKET_OPENED:e={type:xl.Inline,text:Dl(t,"opened")};break;case Sl.TICKET_ASSIGNED:e={type:xl.Inline,text:Nl(t)};break;case Sl.TICKET_REOPENED:e={type:xl.Inline,text:Dl(t,"reopened")};break;case Sl.TICKET_CLOSED:e={type:xl.Inline,text:Dl(t,"closed")};break;case Sl.TICKET_TOPIC_CHANGED:e={type:xl.Inline,text:`Topic changed to **${t.topic.name}**`};break;case Sl.FLOW_ENTERED:case Sl.FLOW_EXITED:e={type:xl.Inline,text:$l(t)};break;case Sl.RUN_RESULT_CHANGED:e={type:xl.Inline,text:Ol(t)};break;case Sl.CONTACT_FIELD_CHANGED:e={type:xl.Inline,text:Ll(t)};break;case Sl.CONTACT_NAME_CHANGED:e={type:xl.Inline,text:Ml(t)};break;case Sl.CONTACT_URNS_CHANGED:e={type:xl.Inline,text:zl(t)};break;case Sl.EMAIL_SENT:e={type:xl.Inline,text:Il(t)};break;case Sl.INPUT_LABELS_ADDED:e={type:xl.Inline,text:Pl(t)};break;case Sl.CONTACT_GROUPS_CHANGED:e={type:xl.Inline,text:Bl(t)};break;case Sl.WEBHOOK_CALLED:e={type:xl.Inline,text:ql(t)};break;case Sl.AIRTIME_TRANSFERRED:e={type:xl.Inline,text:Ul(t)};break;case Sl.CALL_STARTED:e={type:xl.Inline,text:"Call Started"};break;case Sl.CAMPAIGN_FIRED:e={type:xl.Inline,text:Rl(t)};break;case Sl.CHANNEL_EVENT:e={type:xl.Inline,text:Tl(t)};break;case Sl.CONTACT_LANGUAGE_CHANGED:e={type:xl.Inline,text:Fl(t)};break;case Sl.OPTIN_REQUESTED:e={type:xl.Inline,text:Zl(t)}}var i;return e&&t.created_on?e.date=new Date(t.created_on):console.error("Unknown event type",t),e}getUserForEvent(t){let e=null;if(t.created_by){const i=this.store.getUser(t.created_by.email);i&&(e={email:t.created_by.email,name:[i.first_name,i.last_name].join(" "),avatar:i.avatar})}else"msg_received"===t.type&&(e={name:this.currentContact.name});return e}createMessages(t){if(t.events){let e=t.events.map((t=>{const e=1e3*new Date(t.created_on).getTime();if(e>this.newestEventTime&&(this.newestEventTime=e),"ticket_note_added"===t.type){const e=t;return{type:xl.Note,id:t.created_on+t.type,user:this.getUserForEvent(e),date:new Date(e.created_on),text:e.note}}if("msg_created"===t.type||"msg_received"===t.type||"broadcast_created"===t.type){const e=t;return{type:"msg_received"===e.type?"msg_in":"msg_out",id:e.msg.id+"",user:this.getUserForEvent(e),date:new Date(e.created_on),attachments:e.msg.attachments,text:e.msg.text,sendError:"E"===e.status||"F"===e.status,popup:j`<div
               style="display: flex; flex-direction: row; align-items:center; justify-content: space-between;font-size:0.9em;line-height:1em;min-width:10em"
             >
               <div style="justify-content:left;text-align:left">
@@ -3647,6 +3668,10 @@ let ir=Ps,or=!1;const nr=["es","fr","pt"],{setLocale:sr}=(t=>(function(t){if(or)
         margin-right: 0.75em;
       }
 
+      temba-button[lined] {
+        margin: 0.2em 0;
+      }
+
       .expand-icon {
         transform: rotate(180deg);
         --icon-color: rgba(255, 255, 255, 0.5);
@@ -3712,6 +3737,8 @@ let ir=Ps,or=!1;const nr=["es","fr","pt"],{setLocale:sr}=(t=>(function(t){if(or)
         endpoint=${t.href}
       ></temba-notification-list>`;if("space"===t.type)return j`<div class="space"></div>`;if("section"===t.type||t.inline)return j`<div class="sub-section">${t.name}</div>`;if("modax-button"===t.type)return j`<temba-button
         name=${t.name}
+        lined
+        icon=${t.icon}
         @click=${e=>{this.handleItemClicked(e,t)}}
       />`;const i=this.isSelected(t),o=i&&this.selection.length>t.level+1;let n=t.icon?j`<div class="icon-wrapper">
           <temba-icon
@@ -3777,7 +3804,7 @@ let ir=Ps,or=!1;const nr=["es","fr","pt"],{setLocale:sr}=(t=>(function(t){if(or)
             </div>
           </div>
         </temba-dropdown>
-      `:a},this.doRefresh=this.doRefresh.bind(this),this.addEventListener("blur",(()=>{this.shadowRoot.querySelectorAll("temba-list, temba-notification-list").forEach((t=>{t.scrollToTop()}))}))}setBubble(t,e){const i=nh(this.root.items,t);return!(!i||!i.item)&&(i.item.bubble=e,this.requestUpdate("root"),!0)}getMenuItemState(t){let e={};return t&&(e=this.state[t],e||(e={},this.state[t]=e)),e}updated(t){t.has("endpoint")&&(this.root={level:-1,endpoint:this.endpoint},this.wait?this.fireCustomEvent(Le.Ready):this.loadItems(this.root)),t.has("root")&&this.value&&(this.setFocusedItem(this.value),this.value=null)}reset(){this.loadItems(this.root)}async doRefresh(){const t=[...this.selection];let e=this.root;for(;t.length>0;){this.loadItems(e),await this.httpComplete;const i=t.shift();e=(e.items||[]).find((t=>t.id==i))}this.loadItems(e),this.shadowRoot.querySelectorAll("temba-notification-list").forEach((t=>{t.refresh()}))}loadItems(t,e=null){t&&t.endpoint&&(t.loading=!0,this.httpComplete=Wt(t.endpoint).then((i=>{if(i.forEach((e=>{if(!e.items){const i=(t.items||[]).find((t=>t.id==e.id));i&&i.items&&(e.items=i.items)}})),i.forEach((e=>{e.level=t.level+1,e.items&&e.items.forEach((e=>{e.level=t.level+2}))})),t.items=i,t.loading=!1,this.submenu&&0==this.selection.length){const t=this.getMenuItemForSelection([this.submenu]);this.handleItemClicked(e,t)}this.wait||(this.fireCustomEvent(Le.Ready),this.wait=!0),this.requestUpdate("root"),this.scrollSelectedIntoView()})))}handleItemClicked(t,e,i=null){if(i&&i.popup){const o=this.shadowRoot.querySelector("temba-dropdown");return o&&o.blur(),void(t&&this.fireCustomEvent(Le.ButtonClicked,{item:e,selection:this.getSelection(),parent:i}))}if(e.popup)t&&this.fireCustomEvent(Le.ButtonClicked,{item:e,selection:this.getSelection(),parent:i});else if(t&&(t.preventDefault(),t.stopPropagation(),t.metaKey&&e.href))window.open(e.href,"_blank");else if(i&&i.inline&&this.handleItemClicked(null,i),this.collapsed&&!this.isMobile()&&(this.collapsed=!1),this.isMobile()&&(this.collapsed=!0),e.trigger||e.event)this.fireCustomEvent(Le.ButtonClicked,{item:e,selection:this.getSelection(),parent:i});else{if(e.level>=this.selection.length?this.selection.push(e.vanity_id||e.id):this.selection.splice(e.level,this.selection.length-e.level,e.vanity_id||e.id),e.endpoint){if(this.loadItems(e,t),!e.href)return}else this.requestUpdate();e.href&&this.dispatchEvent(new Event("change")),this.fireCustomEvent(Le.ButtonClicked,{item:e,selection:this.getSelection(),parent:i})}}scrollSelectedIntoView(){window.setTimeout((()=>{this.shadowRoot.querySelectorAll(".selected").forEach((t=>{t.scrollIntoView({block:"end",behavior:"smooth"})}))}),0)}clickItem(t){const e=[...this.selection];e.splice(e.length-1,1,t);const i=this.getMenuItemForSelection(e);return!!i&&(this.handleItemClicked(null,i),this.scrollSelectedIntoView(),!0)}getMenuItem(){return this.getMenuItemForSelection([...this.selection])}getMenuItemForSelection(t){const e=[...t];let i=this.root.items,o=null;for(;e.length>0;){const t=e.splice(0,1)[0];if(!i)break;if(o=nh(i,t).item,!o)break;i=o.items}return o}getSelection(){return this.selection}handleExpand(){this.collapsed=!1}handleCollapse(){this.collapsed=!0}async setFocusedItem(t){const e=t.split("/").filter((t=>!!t));if(!this.root)return;if(e.length>0){if(!nh(this.root.items,e[0]).item)return}const i=[];let o=this.root;for(;e.length>0;){const t=e.shift();t&&(o.items||(this.loadItems(o),await this.httpComplete),o=nh(o.items,t).item,o?i.push(t):e.splice(0,e.length))}this.selection=i,this.refresh(),this.requestUpdate("root")}isSelected(t){if(t.level<this.selection.length){return this.selection[t.level]==(t.vanity_id||t.id)}return!1}isExpanded(t){return!!this.selection.find((e=>e===t.vanity_id||t.id))}render(){if(!this.root||!this.root.items)return null;let t=this.root.items||[];const e=[],i=this.isMobile()?ve.menu:ve.menu_collapse;e.push(j`<div class="level level-0 ${this.submenu?"hidden":""}">
+      `:a},this.doRefresh=this.doRefresh.bind(this),this.addEventListener("blur",(()=>{this.shadowRoot.querySelectorAll("temba-list, temba-notification-list").forEach((t=>{t.scrollToTop()}))}))}setBubble(t,e){const i=nh(this.root.items,t);return!(!i||!i.item)&&(i.item.bubble=e,this.requestUpdate("root"),!0)}getMenuItemState(t){let e={};return t&&(e=this.state[t],e||(e={},this.state[t]=e)),e}updated(t){t.has("endpoint")&&(this.root={level:-1,endpoint:this.endpoint},this.wait?this.fireCustomEvent(Le.Ready):this.loadItems(this.root)),t.has("root")&&this.value&&(this.setFocusedItem(this.value),this.value=null)}reset(){this.loadItems(this.root)}async doRefresh(){const t=[...this.selection];let e=this.root;for(;t.length>0;){this.loadItems(e),await this.httpComplete;const i=t.shift();e=(e.items||[]).find((t=>t.id==i))}this.loadItems(e),this.shadowRoot.querySelectorAll("temba-notification-list").forEach((t=>{t.refresh()}))}loadItems(t,e=null){t&&t.endpoint&&(t.loading=!0,this.httpComplete=Wt(t.endpoint).then((i=>{if(i.forEach((e=>{if(!e.items){const i=(t.items||[]).find((t=>t.id==e.id));i&&i.items&&(e.items=i.items)}})),i.forEach((e=>{e.level=t.level+1,e.items&&e.items.forEach((e=>{e.level=t.level+2}))})),t.items=i,t.loading=!1,this.submenu&&0==this.selection.length){const t=this.getMenuItemForSelection([this.submenu]);this.handleItemClicked(e,t)}this.wait||(this.fireCustomEvent(Le.Ready),this.wait=!0),this.requestUpdate("root"),this.scrollSelectedIntoView()})))}handleItemClicked(t,e,i=null){if(i&&i.popup){const o=this.shadowRoot.querySelector("temba-dropdown");return o&&o.blur(),void(t&&this.fireCustomEvent(Le.ButtonClicked,{item:e,selection:this.getSelection(),parent:i}))}if(e.popup)t&&this.fireCustomEvent(Le.ButtonClicked,{item:e,selection:this.getSelection(),parent:i});else if("modax-button"!==e.type){if(t&&t.metaKey&&e.href)return t.preventDefault(),t.stopPropagation(),void window.open(e.href,"_blank");if(i&&i.inline&&this.handleItemClicked(null,i),this.collapsed&&!this.isMobile()&&(this.collapsed=!1),this.isMobile()&&(this.collapsed=!0),e.trigger||e.event)this.fireCustomEvent(Le.ButtonClicked,{item:e,selection:this.getSelection(),parent:i});else{if(e.level>=this.selection.length?this.selection.push(e.vanity_id||e.id):this.selection.splice(e.level,this.selection.length-e.level,e.vanity_id||e.id),e.endpoint){if(this.loadItems(e,t),!e.href)return}else this.requestUpdate();e.href?this.dispatchEvent(new Event("change")):this.fireCustomEvent(Le.ButtonClicked,{item:e,selection:this.getSelection(),parent:i})}}else this.fireCustomEvent(Le.ButtonClicked,{item:e,selection:this.getSelection(),parent:i})}scrollSelectedIntoView(){window.setTimeout((()=>{this.shadowRoot.querySelectorAll(".selected").forEach((t=>{t.scrollIntoView({block:"end",behavior:"smooth"})}))}),0)}clickItem(t){const e=[...this.selection];e.splice(e.length-1,1,t);const i=this.getMenuItemForSelection(e);return!!i&&(this.handleItemClicked(null,i),this.scrollSelectedIntoView(),!0)}getMenuItem(){return this.getMenuItemForSelection([...this.selection])}getMenuItemForSelection(t){const e=[...t];let i=this.root.items,o=null;for(;e.length>0;){const t=e.splice(0,1)[0];if(!i)break;if(o=nh(i,t).item,!o)break;i=o.items}return o}getSelection(){return this.selection}handleExpand(){this.collapsed=!1}handleCollapse(){this.collapsed=!0}async setFocusedItem(t){const e=t.split("/").filter((t=>!!t));if(!this.root)return;if(e.length>0){if(!nh(this.root.items,e[0]).item)return}const i=[];let o=this.root;for(;e.length>0;){const t=e.shift();t&&(o.items||(this.loadItems(o),await this.httpComplete),o=nh(o.items,t).item,o?i.push(t):e.splice(0,e.length))}this.selection=i,this.refresh(),this.requestUpdate("root")}isSelected(t){if(t.level<this.selection.length){return this.selection[t.level]==(t.vanity_id||t.id)}return!1}isExpanded(t){return!!this.selection.find((e=>e===t.vanity_id||t.id))}render(){if(!this.root||!this.root.items)return null;let t=this.root.items||[];const e=[],i=this.isMobile()?ve.menu:ve.menu_collapse;e.push(j`<div class="level level-0 ${this.submenu?"hidden":""}">
         <div class="top">
           <div class="expand-icon" @click=${this.handleExpand}>
             <temba-icon
@@ -6014,7 +6041,7 @@ let ir=Ps,or=!1;const nr=["es","fr","pt"],{setLocale:sr}=(t=>(function(t){if(or)
           </temba-button>`))}
         ${this.items&&this.items.length>0?j`<temba-dropdown
               arrowsize="8"
-              arrowoffset="-12"
+              arrowoffset="${this.arrowTopLeft?"12":"-12"}"
               offsety="6"
               bottom
             >
@@ -6032,7 +6059,7 @@ let ir=Ps,or=!1;const nr=["es","fr","pt"],{setLocale:sr}=(t=>(function(t){if(or)
               </div>
             </temba-dropdown>`:null}
       </div>
-    `}}t([ge({type:String})],zh.prototype,"endpoint",void 0),t([ge({type:Number})],zh.prototype,"legacy",void 0),t([ge({type:Array,attribute:!1})],zh.prototype,"buttons",void 0),t([ge({type:Array,attribute:!1})],zh.prototype,"items",void 0);const Ih={date:Ms.DATE_SHORT,datetime:Ms.DATETIME_SHORT,time:Ms.TIME_SIMPLE,timedate:"timedate",duration:"duration",relative:"relative",day:"LLL d"};class Ph extends ue{constructor(){super(...arguments),this.display="date"}static get styles(){return r`
+    `}}t([ge({type:String})],zh.prototype,"endpoint",void 0),t([ge({type:Number})],zh.prototype,"legacy",void 0),t([ge({type:Array,attribute:!1})],zh.prototype,"buttons",void 0),t([ge({type:Array,attribute:!1})],zh.prototype,"items",void 0),t([ge({type:Boolean})],zh.prototype,"arrowTopLeft",void 0);const Ih={date:Ms.DATE_SHORT,datetime:Ms.DATETIME_SHORT,time:Ms.TIME_SIMPLE,timedate:"timedate",duration:"duration",relative:"relative",day:"LLL d"};class Ph extends ue{constructor(){super(...arguments),this.display="date"}static get styles(){return r`
       .date {
         display: inline;
       }
@@ -7477,7 +7504,7 @@ background: #ccc;
         color: #777;
         margin-left: 0.25em;
       }
-    `}updated(t){super.updated(t),t.has("template")&&(this.textInputAttachments={},this.currentVariables=this.variables,this.currentVariables.length>0&&this.currentVariables.forEach(((t,e)=>{const i=t.split(":");i.length>1&&-1===i[0].indexOf("/")&&(this.textInputAttachments[e]=!0)})))}handleTemplateChanged(t){const e=this.selectedTemplate;this.selectedTemplate=t.target.values[0],e&&(this.currentVariables=[],this.textInputAttachments={}),this.selectedTemplate?(this.translation=this.selectedTemplate.base_translation,this.translation?this.variables=new Array((this.translation.variables||[]).length).fill(""):this.variables=[]):(this.translation=null,this.variables=[]),this.fireCustomEvent(Le.ContextChanged,{template:this.selectedTemplate,translation:this.translation,variables:this.currentVariables})}handleAttachmentLoading(t){const e=t.target,i=parseInt(e.getAttribute("index"));this.pickersLoading[i]=t.detail.loading,this.requestUpdate()}handleAttachmentsChanged(t){const e=t.target,i=parseInt(e.getAttribute("index"));if(0===e.attachments.length)this.currentVariables[i]="";else{const t=e.attachments[0];t.url&&t.content_type?this.currentVariables[i]=`${t.content_type}:${t.url}`:this.currentVariables[i]=""}this.fireContentChange(),this.requestUpdate("currentVariables")}handleVariableChanged(t){const e=t.target,i=parseInt(e.getAttribute("index")),o=e.getAttribute("prefix")||"";let n=e.value;n&&(n=o+n),this.currentVariables[i]=n,this.fireContentChange()}fireContentChange(){this.fireCustomEvent(Le.ContentChanged,{template:this.selectedTemplate,translation:this.translation,variables:this.currentVariables})}renderVariables(t){var e;const i=new RegExp(`{{(${Object.keys(t.variables||[]).join("|")})}}`,"g");let o=null,n=[];t.content&&t.content.trim().length>0&&(n=(null===(e=t.content)||void 0===e?void 0:e.split(i))||[]);const s=this.currentVariables||[];return o=n.length>0?n.map(((e,i)=>{if(i%2==0)return j`<span class="text">${e}</span>`;const o=t.variables[e];return j`<temba-completion
+    `}updated(t){super.updated(t),t.has("template")&&(this.textInputAttachments={},this.currentVariables=this.variables||[],this.currentVariables.length>0&&this.currentVariables.forEach(((t,e)=>{const i=t.split(":");i.length>1&&-1===i[0].indexOf("/")&&(this.textInputAttachments[e]=!0)})))}handleTemplateChanged(t){const e=this.selectedTemplate;this.selectedTemplate=t.target.values[0],e&&(this.currentVariables=[],this.textInputAttachments={}),this.selectedTemplate?(this.translation=this.selectedTemplate.base_translation,this.translation?this.variables=new Array((this.translation.variables||[]).length).fill(""):this.variables=[]):(this.translation=null,this.variables=[]),this.fireCustomEvent(Le.ContextChanged,{template:this.selectedTemplate,translation:this.translation,variables:this.currentVariables})}handleAttachmentLoading(t){const e=t.target,i=parseInt(e.getAttribute("index"));this.pickersLoading[i]=t.detail.loading,this.requestUpdate()}handleAttachmentsChanged(t){const e=t.target,i=parseInt(e.getAttribute("index"));if(0===e.attachments.length)this.currentVariables[i]="";else{const t=e.attachments[0];t.url&&t.content_type?this.currentVariables[i]=`${t.content_type}:${t.url}`:this.currentVariables[i]=""}this.fireContentChange(),this.requestUpdate("currentVariables")}handleVariableChanged(t){const e=t.target,i=parseInt(e.getAttribute("index")),o=e.getAttribute("prefix")||"";let n=e.value;n&&(n=o+n),this.currentVariables[i]=n,this.fireContentChange()}fireContentChange(){this.fireCustomEvent(Le.ContentChanged,{template:this.selectedTemplate,translation:this.translation,variables:this.currentVariables})}renderVariables(t){var e;const i=new RegExp(`{{(${Object.keys(t.variables||[]).join("|")})}}`,"g");let o=null,n=[];t.content&&t.content.trim().length>0&&(n=(null===(e=t.content)||void 0===e?void 0:e.split(i))||[]);const s=this.currentVariables||[];return o=n.length>0?n.map(((e,i)=>{if(i%2==0)return j`<span class="text">${e}</span>`;const o=t.variables[e];return j`<temba-completion
           class="variable"
           type="text"
           value=${o<s.length?s[o]:null}