@nyaruka/temba-components 0.107.0 → 0.108.0

package/CHANGELOG.md

@@ -4,8 +4,24 @@ 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.108.0](https://github.com/nyaruka/temba-components/compare/v0.107.1...v0.108.0)
+
+- Switch to generic StartProgress widget [`#456`](https://github.com/nyaruka/temba-components/pull/456)
+- Honor status over total count for progress [`409608a`](https://github.com/nyaruka/temba-components/commit/409608a8519974502c5b97b8ddc210af3575f294)
+- Soften progress curvature [`a848a5d`](https://github.com/nyaruka/temba-components/commit/a848a5d1515787e4e6c03e28c428f5a9ae352f63)
+- Use Queued status for waiting message [`bbf9684`](https://github.com/nyaruka/temba-components/commit/bbf9684577cbd86762976262e87072d85bb496aa)
+
+#### [v0.107.1](https://github.com/nyaruka/temba-components/compare/v0.107.0...v0.107.1)
+
+> 16 September 2024
+
+- Fix widths for large pcts on progress bar [`#454`](https://github.com/nyaruka/temba-components/pull/454)
+- Better handling for empty case [`25bcf3b`](https://github.com/nyaruka/temba-components/commit/25bcf3bdf76cc616f22d9bfc0f66dd6e18d91e5f)
+
 #### [v0.107.0](https://github.com/nyaruka/temba-components/compare/v0.106.0...v0.107.0)
 
+> 14 September 2024
+
 - Add flow start progress [`#453`](https://github.com/nyaruka/temba-components/pull/453)
 - Calculate a naiive eta [`fc2d480`](https://github.com/nyaruka/temba-components/commit/fc2d480aba07bf5267844a0d370423893d03d009)
 

package/demo/index.html

@@ -144,8 +144,6 @@
   </temba-dropdown>
 
   <div class="header">temba-components</div>
-
-
   <!--temba-image-picker name="avatar" label="Profile Picture" shape="circle"></temba-image-picker-->
   <!--temba-webchat channel="9e6b37a8-c649-48b3-92d1-dfa7c00b85dc"></temba-webchat-->
   <!-- temba-template-editor url="/static/api/templates.json" lang="eng" template="580b124f-32cb-4003-b9e5-9eb783e29101"
@@ -154,6 +152,8 @@
 
   <temba-tabs collapses index="0">
     <temba-tab name="Overview" icon="default">
+      <temba-progress style="margin-bottom:8px" total="100" current="25" eta="2030-09-17T07:00:00.000Z"></temba-progress>
+      
       <div style="display:flex;flex-wrap: wrap;">
         <temba-checkbox label="Check this out" checked></temba-checkbox>
         <temba-select placeholder="Select a color" clearable>

package/dist/temba-components.js

@@ -1424,7 +1424,7 @@ let br=Ks,yr=!1;const _r=["es","fr","pt"],{setLocale:xr}=(t=>(function(t){if(yr)
         flex-direction: row;
         margin-left: 0.6em;
       }
-    `}handleSlotClicked(){this.open=!0}updated(t){if(super.updated(t),t.has("open")&&(this.open?this.fetchForm():void 0!==t.get("open")&&(this.open?window.setTimeout((()=>{this.body=this.getLoading(),this.submitting=!1}),500):this.setBody(""))),t.has("body")&&this.open&&this.body&&!this.fetching){this.shadowRoot.querySelector("temba-dialog").focusFirstInput()}}getLoading(){return j`<temba-loading units="6" size="8"></temba-loading>`}updatePrimaryButton(){const t=this.shadowRoot.querySelector("#wizard-form");t&&(this.wizardStep=parseInt(t.dataset.step),this.wizardStepCount=parseInt(t.dataset.steps)),this.noSubmit||this.updateComplete.then((()=>{const t=this.shadowRoot.querySelector("input[type='submit'],button[type='submit']");this.buttons=t?[{type:ml.SECONDARY,name:"Cancel",closes:!0},{type:ml.PRIMARY,name:t.value}]:[{type:ml.SECONDARY,name:"Ok",closes:!0}],this.submitting=!1}))}setBody(t){const e=this.shadowRoot.querySelector(".scripts");for(const t of e.children)t.remove();const i=this.ownerDocument.createElement("div");i.innerHTML=t;const o=i.getElementsByTagName("script"),n=[];for(let t=o.length-1;t>=0;t--){const e=this.ownerDocument.createElement("script"),i=o[t].innerText;o[t].src&&-1===o[t].src.indexOf("web-dev-server")?(e.src=o[t].src,e.type="text/javascript",e.async=!0,e.onload=function(){},n.push(e)):i&&(e.appendChild(this.ownerDocument.createTextNode(i)),n.push(e)),o[t].remove()}const s=!!i.querySelector(".success-script");return s||(this.body=$r(i.innerHTML)),this.updateComplete.then((()=>{for(const t of n)e.appendChild(t)})),!s}getHeaders(){const t=this.headers;return t["X-PJAX"]=1,t}fetchForm(){this.fetching=!0,this.body=this.getLoading(),jt(this.endpoint,null,this.getHeaders()).then((t=>{0==t.body.indexOf("<!DOCTYPE HTML>")?document.location=t.url:(this.setBody(t.body),this.fetching=!1,this.updateComplete.then((()=>{this.updatePrimaryButton(),this.fireCustomEvent(Le.Loaded,{body:this.getBody()})})))}))}submit(t={}){this.submitting=!0;const e=this.shadowRoot.querySelector("form");let i=e?function(t){const e=[];for(let i=0;i<t.elements.length;i++){const o=t.elements[i];if(o.name&&!o.disabled&&"file"!==o.type&&"reset"!==o.type&&"submit"!==o.type&&"button"!==o.type)if("select-multiple"===o.type)for(let t=0;t<o.options.length;t++)o.options[t].selected&&o.options[t].value&&e.push(encodeURIComponent(o.name)+"="+encodeURIComponent(o.options[t].value));else if("checkbox"!==o.type&&"radio"!==o.type||o.checked){let t=o.value;!t&&o.checked&&(t="1"),t&&e.push(encodeURIComponent(o.name)+"="+encodeURIComponent(t))}}return e.join("&")}(e):"";t&&Object.keys(t).forEach((e=>{i+=(i.length>1?"&":"")+encodeURIComponent(e)+"="+encodeURIComponent(t[e])})),Qt(this.endpoint,i,this.getHeaders(),"application/x-www-form-urlencoded").then((t=>{window.setTimeout((()=>{let e=t.headers.get("temba-success");!e&&t.url&&-1===t.url.indexOf(this.endpoint)&&(e=t.url),e?"hide"===e?this.updateComplete.then((()=>{this.open=!1,this.fireCustomEvent(Le.Submitted)})):(this.fireCustomEvent(Le.Redirected,{url:e}),this.open=!1):this.setBody(t.body)&&this.updateComplete.then((()=>{this.updatePrimaryButton()}))}),1e3)})).catch((t=>{console.error(t)}))}handleDialogClick(t){const e=t.detail.button,i=t.detail.detail;e.disabled||e.submitting||(e.primary||e.destructive)&&(this.suspendSubmit||this.submit()),i.closes&&(this.open=!1,this.fetching=!1,this.cancelName=void 0)}handleDialogHidden(){this.open=!1,this.fetching=!1}isDestructive(){return this.endpoint&&this.endpoint.indexOf("delete")>-1}handleGotoStep(t){const e=t.target.dataset.gotoStep;e&&this.submit({wizard_goto_step:e})}getBody(){return this.shadowRoot.querySelector(".modax-body")}render(){const t=[],e=this.shadowRoot.querySelector("#wizard-form");if(e){const i=(e.getAttribute("data-completed")||"").split(",").filter((t=>t.length>0));for(let e=0;e<this.wizardStepCount;e++)t.push(j`<div
+    `}handleSlotClicked(){this.open=!0}updated(t){if(super.updated(t),t.has("open")&&(this.open?this.fetchForm():void 0!==t.get("open")&&(this.open?window.setTimeout((()=>{this.body=this.getLoading(),this.submitting=!1}),500):this.setBody(""))),t.has("body")&&this.open&&this.body&&!this.fetching){this.shadowRoot.querySelector("temba-dialog").focusFirstInput()}}getLoading(){return j`<temba-loading units="6" size="8"></temba-loading>`}updatePrimaryButton(){const t=this.shadowRoot.querySelector("#wizard-form");t&&(this.wizardStep=parseInt(t.dataset.step),this.wizardStepCount=parseInt(t.dataset.steps)),this.noSubmit||this.updateComplete.then((()=>{const t=this.shadowRoot.querySelector("input[type='submit'],button[type='submit']");this.buttons=t?[{type:ml.SECONDARY,name:"Cancel",closes:!0},{type:ml.PRIMARY,name:t.value}]:[{type:ml.SECONDARY,name:"Ok",closes:!0}],this.submitting=!1}))}setBody(t){const e=this.shadowRoot.querySelector(".scripts");for(const t of e.children)t.remove();const i=this.ownerDocument.createElement("div");i.innerHTML=t;const o=i.getElementsByTagName("script"),n=[];for(let t=o.length-1;t>=0;t--){const e=this.ownerDocument.createElement("script"),i=o[t].innerText;o[t].src&&-1===o[t].src.indexOf("web-dev-server")?(e.src=o[t].src,e.type="text/javascript",e.async=!0,e.onload=function(){},n.push(e)):i&&(e.appendChild(this.ownerDocument.createTextNode(i)),n.push(e)),o[t].remove()}const s=!!i.querySelector(".success-script");return s||(this.body=$r(i.innerHTML)),this.updateComplete.then((()=>{for(const t of n)e.appendChild(t)})),!s}getHeaders(){const t=this.headers;return t["X-PJAX"]=1,t}fetchForm(){this.fetching=!0,this.body=this.getLoading(),jt(this.endpoint,null,this.getHeaders()).then((t=>{0==t.body.indexOf("<!DOCTYPE HTML>")?document.location=t.url:(this.setBody(t.body),this.fetching=!1,this.updateComplete.then((()=>{this.updatePrimaryButton(),this.fireCustomEvent(Le.Loaded,{body:this.getBody()})})))}))}submit(t={}){this.submitting=!0;const e=this.shadowRoot.querySelector("form");let i=e?function(t){const e=[];for(let i=0;i<t.elements.length;i++){const o=t.elements[i];if(o.name&&!o.disabled&&"file"!==o.type&&"reset"!==o.type&&"submit"!==o.type&&"button"!==o.type)if("select-multiple"===o.type)for(let t=0;t<o.options.length;t++)o.options[t].selected&&o.options[t].value&&e.push(encodeURIComponent(o.name)+"="+encodeURIComponent(o.options[t].value));else if("checkbox"!==o.type&&"radio"!==o.type||o.checked){let t=o.value;!t&&o.checked&&(t="1"),t&&e.push(encodeURIComponent(o.name)+"="+encodeURIComponent(t))}}return e.join("&")}(e):"";t&&Object.keys(t).forEach((e=>{i+=(i.length>1?"&":"")+encodeURIComponent(e)+"="+encodeURIComponent(t[e])})),Qt(this.endpoint,i,this.getHeaders(),"application/x-www-form-urlencoded").then((t=>{window.setTimeout((()=>{let e=t.headers.get("temba-success");!e&&t.url&&-1===t.url.indexOf(this.endpoint)&&(e=t.url),e?"hide"===e?this.updateComplete.then((()=>{this.open=!1,this.fireCustomEvent(Le.Submitted)})):(this.fireCustomEvent(Le.Redirected,{url:e}),this.open=!1):this.setBody(t.body)&&this.updateComplete.then((()=>{this.updatePrimaryButton()}))}),1e3)})).catch((t=>{console.error(t)}))}handleDialogClick(t){const e=t.detail.button,i=t.detail.detail;e.disabled||e.submitting||(e.primary||e.destructive)&&(this.suspendSubmit||this.submit()),i.closes&&(this.open=!1,this.fetching=!1,this.cancelName=void 0)}handleDialogHidden(){this.open=!1,this.fetching=!1}isDestructive(){return this.endpoint&&(this.endpoint.indexOf("delete")>-1||this.endpoint.indexOf("interrupt")>-1)}handleGotoStep(t){const e=t.target.dataset.gotoStep;e&&this.submit({wizard_goto_step:e})}getBody(){return this.shadowRoot.querySelector(".modax-body")}render(){const t=[],e=this.shadowRoot.querySelector("#wizard-form");if(e){const i=(e.getAttribute("data-completed")||"").split(",").filter((t=>t.length>0));for(let e=0;e<this.wizardStepCount;e++)t.push(j`<div
             data-goto-step=${i[e]}
             @click=${this.handleGotoStep.bind(this)}
             class="${Vt({"step-ball":!0,active:this.wizardStep-1===e,complete:e<i.length})}"
@@ -7961,33 +7961,53 @@ const{I:gc}=rt,fc=()=>document.createComment(""),vc=(t,e,i)=>{const o=t._$AA.par
             >.
           </div></temba-alert
         >
-      </div>`:null}}t([ge({type:Number})],Ec.prototype,"backlogSize",void 0),t([ge({type:String})],Ec.prototype,"endpoint",void 0),t([ge({type:Object})],Ec.prototype,"firstFetch",void 0),t([ge({type:Object})],Ec.prototype,"lastFetch",void 0),t([ge({type:Number})],Ec.prototype,"fetches",void 0),t([ge({type:Number})],Ec.prototype,"msgsPerSecond",void 0),t([ge({type:Object})],Ec.prototype,"estimatedCompletionDate",void 0);class Tc extends ue{constructor(){super(...arguments),this.total=100,this.current=0,this.pct=0,this.done=!1,this.showEstimatedCompletion=!1}updated(t){t.has("eta")&&this.eta&&(this.estimatedCompletionDate=new Date(this.eta),this.showEstimatedCompletion=this.estimatedCompletionDate>new Date),t.has("current")&&(this.pct=Math.floor(Math.min(this.current/this.total*100,100)),this.done=this.pct>=100)}render(){return j`<div class="meter ${this.done?"done":""}">
-      <span class="complete" style="width: ${this.pct}%"></span>
-      <div class="incomplete"></div>
-      ${this.pct>=0||this.estimatedCompletionDate?j` <div class="etc">
-            ${this.estimatedCompletionDate?j`<temba-date
-                  value="${this.estimatedCompletionDate.toISOString()}"
-                  display="countdown"
-                ></temba-date>`:j`${this.pct}%`}
+      </div>`:null}}t([ge({type:Number})],Ec.prototype,"backlogSize",void 0),t([ge({type:String})],Ec.prototype,"endpoint",void 0),t([ge({type:Object})],Ec.prototype,"firstFetch",void 0),t([ge({type:Object})],Ec.prototype,"lastFetch",void 0),t([ge({type:Number})],Ec.prototype,"fetches",void 0),t([ge({type:Number})],Ec.prototype,"msgsPerSecond",void 0),t([ge({type:Object})],Ec.prototype,"estimatedCompletionDate",void 0);class Tc extends ue{constructor(){super(...arguments),this.total=100,this.current=0,this.pct=0,this.done=!1,this.showEstimatedCompletion=!1,this.showPercentage=!1}updated(t){if(t.has("eta")&&this.eta&&(this.estimatedCompletionDate=new Date(this.eta),this.showEstimatedCompletion=this.estimatedCompletionDate>new Date),t.has("current")){const t=Math.floor(Math.min(this.current/this.total*100,100));Number.isNaN(t)?this.showPercentage=!1:(this.pct=t,this.showPercentage=!0),this.done=this.pct>=100}}render(){return j`<div class="wrapper ${this.done?"complete":""}">
+      <div class="meter ${this.done?"done":""}">
+        ${this.message?j`<div class="message">${this.message}</div>`:null}
+        <span class="complete" style="flex-basis: ${this.pct}%"></span>
+        <div class="incomplete"></div>
+      </div>
+
+      ${this.showPercentage||this.showEstimatedCompletion?j`<div class="etc">
+            <div>
+              ${this.estimatedCompletionDate&&this.showEstimatedCompletion&&!this.done?j`<temba-date
+                    value="${this.estimatedCompletionDate.toISOString()}"
+                    display="countdown"
+                  ></temba-date>`:j`${this.pct}%`}
+            </div>
           </div>`:null}
+
+      <slot></slot>
     </div>`}}Tc.styles=r`
-    .meter {
+    .wrapper {
       display: flex;
       box-sizing: content-box;
-      height: 8px;
-      position: relative;
       background: #f1f1f1;
       border-radius: var(--curvature);
-      padding: 4px;
       box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.05);
+      overflow: hidden;
+      min-height: 1.5rem;
+    }
+
+    .message {
+      padding: 0 0.25rem;
+      color: rgba(0, 0, 0, 0.4);
+    }
+
+    .meter {
+      flex-grow: 1;
+      display: flex;
+      box-sizing: content-box;
+      position: relative;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      padding: 4px;
+      min-height: 6px;
     }
     .meter > span {
       display: block;
       height: 100%;
-      border-top-right-radius: var(--curvature);
-      border-bottom-right-radius: var(--curvature);
-      border-top-left-radius: var(--curvature);
-      border-bottom-left-radius: var(--curvature);
+      border-radius: calc(var(--curvature) * 0.8);
       background-color: var(--color-primary-dark);
       background-image: linear-gradient(
         center bottom,
@@ -7998,6 +8018,7 @@ const{I:gc}=rt,fc=()=>document.createComment(""),vc=(t,e,i)=>{const o=t._$AA.par
       position: relative;
       overflow: hidden;
     }
+
     .meter > span:after,
     .animate > span > span {
       content: '';
@@ -8018,7 +8039,7 @@ const{I:gc}=rt,fc=()=>document.createComment(""),vc=(t,e,i)=>{const o=t._$AA.par
       );
       z-index: 1;
       background-size: 50px 50px;
-      animation: move 16s linear infinite;
+      animation: move 8s linear infinite;
       border-top-right-radius: var(--curvature);
       border-bottom-right-radius: var(--curvature);
       border-top-left-radius: var(--curvature);
@@ -8039,27 +8060,35 @@ const{I:gc}=rt,fc=()=>document.createComment(""),vc=(t,e,i)=>{const o=t._$AA.par
       }
     }
 
-    .complete {
-      transition: width 2s;
+    .meter .complete {
+      transition: flex-basis 2s;
     }
 
-    .incomplete {
+    .meter .incomplete {
       flex-grow: 1;
     }
 
     .etc {
-      font-size: 0.7em;
-      padding: 4px;
-      padding-top: 1px;
-      padding-left: 8px;
-      padding-right: 8px;
-      margin-top: -4px;
-      margin-bottom: -4px;
-      margin-right: -4px;
-      margin-left: 0.5em;
+      display: flex;
+      flex-direction: row;
       background: rgba(0, 0, 0, 0.07);
       font-weight: bold;
       white-space: nowrap;
+      color: rgba(0, 0, 0, 0.5);
+      align-self: center;
+      padding: 0px 6px;
+      align-self: stretch;
+      align-items: center;
+    }
+
+    .etc > div {
+      font-size: 0.7em;
+    }
+
+    .wrapper *::last-child {
+      border-top-right-radius: var(--curvature);
+      border-bottom-right-radius: var(--curvature);
+      overflow: hidden;
     }
 
     .meter.done > span:after,
@@ -8070,11 +8099,26 @@ const{I:gc}=rt,fc=()=>document.createComment(""),vc=(t,e,i)=>{const o=t._$AA.par
     .meter.done > span {
       background: rgb(var(--success-rgb));
     }
-  `,t([ge({type:Number})],Tc.prototype,"total",void 0),t([ge({type:Number})],Tc.prototype,"current",void 0),t([ge({type:Number})],Tc.prototype,"pct",void 0),t([ge({type:Boolean})],Tc.prototype,"done",void 0),t([ge({type:String})],Tc.prototype,"eta",void 0),t([ge({type:String,attribute:!1})],Tc.prototype,"estimatedCompletionDate",void 0),t([ge({type:Boolean})],Tc.prototype,"showEstimatedCompletion",void 0);class $c extends ue{constructor(){super(...arguments),this.refreshes=0}updated(t){super.updated(t),t.has("uuid")&&this.refresh()}refresh(){Wt(`/api/v2/flow_starts.json?uuid=${this.uuid}`).then((t=>{if(t.length>0){this.refreshes++;const e=t[0];this.started=e.progress.started,this.total=e.progress.total;const i=(new Date).getTime()-new Date(e.created_on).getTime(),o=this.started/(i/1e3);this.eta=new Date((new Date).getTime()+(this.total-this.started)/o*1e3).toISOString(),this.started<this.total&&setTimeout((()=>{this.refresh()}),Math.min(1e3*this.refreshes,6e4))}}))}render(){return j`<temba-progress
+  `,t([ge({type:Number})],Tc.prototype,"total",void 0),t([ge({type:Number})],Tc.prototype,"current",void 0),t([ge({type:Number})],Tc.prototype,"pct",void 0),t([ge({type:Boolean})],Tc.prototype,"done",void 0),t([ge({type:String})],Tc.prototype,"eta",void 0),t([ge({type:String,attribute:!1})],Tc.prototype,"estimatedCompletionDate",void 0),t([ge({type:Boolean})],Tc.prototype,"showEstimatedCompletion",void 0),t([ge({type:Boolean})],Tc.prototype,"showPercentage",void 0),t([ge({type:String})],Tc.prototype,"message",void 0);class $c extends ue{constructor(){super(...arguments),this.refreshes=0,this.complete=!1,this.running=!1}updated(t){super.updated(t),t.has("id")&&this.refresh()}interruptStart(){var t,e;t=this.interruptTitle,e=this.interruptEndpoint,window.showModax(t,e)}refresh(){Wt(this.statusEndpoint).then((t=>{if(t.length>0){this.refreshes++;const e=t[0];if(this.current=e.progress.current,this.total=e.progress.total,this.complete="Completed"==e.status||"Failed"==e.status||"Interrupted"==e.status,this.running="Started"===e.status,"Pending"===e.status?this.message="Preparing to start..":"Queued"===e.status?this.message="Waiting..":this.message=null,"Started"===e.status){const t=(new Date).getTime()-new Date(e.modified_on).getTime(),i=this.current/t;if(i>.1){const t=new Date((new Date).getTime()+(this.total-this.current)/i),e=new Date;e.setMonth(e.getMonth()+2),this.eta=t>e?null:t.toISOString()}}!this.complete&&this.current<this.total&&setTimeout((()=>{this.refresh()}),Math.min(1e3*this.refreshes,6e4)),this.complete&&this.scheduleRemoval()}}))}scheduleRemoval(){setTimeout((()=>{this.remove()}),5e3)}render(){return j`<temba-progress
       total=${this.total}
-      current=${this.started}
+      current=${this.current}
       eta=${this.eta}
-    ></temba-progress>`}}function Oc(t,e){window.customElements.get(t)||window.customElements.define(t,e)}t([ge({type:String})],$c.prototype,"uuid",void 0),t([ge({type:Number})],$c.prototype,"started",void 0),t([ge({type:Number})],$c.prototype,"total",void 0),t([ge({type:Number})],$c.prototype,"refreshes",void 0),t([ge({type:String})],$c.prototype,"eta",void 0),Oc("temba-anchor",wh),Oc("temba-alert",dh),Oc("temba-store",wr),Oc("temba-textinput",ze),Oc("temba-datepicker",Uh),Oc("temba-date",Kh),Oc("temba-completion",ul),Oc("temba-checkbox",be),Oc("temba-select",dl),Oc("temba-options",kr),Oc("temba-loading",yl),Oc("temba-lightbox",ic),Oc("temba-button",vl),Oc("temba-omnibox",fh),Oc("temba-tip",yh),Oc("temba-contact-name",Eh),Oc("temba-contact-name-fetch",Fh),Oc("temba-contact-field",Lh),Oc("temba-contact-fields",$h),Oc("temba-field-manager",Vh),Oc("temba-urn",Th),Oc("temba-content-menu",Yh),Oc("temba-field",bl),Oc("temba-dialog",gl),Oc("temba-modax",fl),Oc("temba-charcount",Tl),Oc("temba-contact-chat",rh),Oc("temba-contact-details",class extends Ll{static get styles(){return r`
+      message=${this.message}
+    >
+      ${this.running?j`<temba-icon
+            name="close"
+            @click=${this.interruptStart}
+          ></temba-icon>`:null}
+    </temba-progress>`}}function Oc(t,e){window.customElements.get(t)||window.customElements.define(t,e)}$c.styles=r`
+    temba-icon[name='close'] {
+      cursor: pointer;
+      margin: 0 4px;
+    }
+
+    temba-icon[name='close']:hover {
+      color: var(--color-primary-dark);
+    }
+  `,t([ge({type:String})],$c.prototype,"id",void 0),t([ge({type:Number})],$c.prototype,"current",void 0),t([ge({type:Number})],$c.prototype,"total",void 0),t([ge({type:Number})],$c.prototype,"refreshes",void 0),t([ge({type:String})],$c.prototype,"eta",void 0),t([ge({type:Boolean})],$c.prototype,"complete",void 0),t([ge({type:Boolean})],$c.prototype,"running",void 0),t([ge({type:String})],$c.prototype,"message",void 0),t([ge({type:String})],$c.prototype,"statusEndpoint",void 0),t([ge({type:String})],$c.prototype,"interruptTitle",void 0),t([ge({type:String})],$c.prototype,"interruptEndpoint",void 0),Oc("temba-anchor",wh),Oc("temba-alert",dh),Oc("temba-store",wr),Oc("temba-textinput",ze),Oc("temba-datepicker",Uh),Oc("temba-date",Kh),Oc("temba-completion",ul),Oc("temba-checkbox",be),Oc("temba-select",dl),Oc("temba-options",kr),Oc("temba-loading",yl),Oc("temba-lightbox",ic),Oc("temba-button",vl),Oc("temba-omnibox",fh),Oc("temba-tip",yh),Oc("temba-contact-name",Eh),Oc("temba-contact-name-fetch",Fh),Oc("temba-contact-field",Lh),Oc("temba-contact-fields",$h),Oc("temba-field-manager",Vh),Oc("temba-urn",Th),Oc("temba-content-menu",Yh),Oc("temba-field",bl),Oc("temba-dialog",gl),Oc("temba-modax",fl),Oc("temba-charcount",Tl),Oc("temba-contact-chat",rh),Oc("temba-contact-details",class extends Ll{static get styles(){return r`
       .urn {
         display: flex;
         padding: 0.4em 1em 0.8em 1em;
@@ -8193,7 +8237,7 @@ const{I:gc}=rt,fc=()=>document.createComment(""),vc=(t,e,i)=>{const o=t._$AA.par
       </div>`}}renderHeader(){return j`<div class="header">
       <temba-icon name="notification"></temba-icon>
       <div class="title">Notifications</div>
-    </div>`}handleSelection(t){super.handleSelected(t)}scrollToTop(){window.setTimeout((()=>{this.shadowRoot.querySelector("temba-options").scrollToTop()}),1e3)}}),Oc("temba-list",ah),Oc("temba-sortable-list",Hh),Oc("temba-run-list",Rh),Oc("temba-flow-details",qh),Oc("temba-label",Sh),Oc("temba-menu",xh),Oc("temba-remote",tc),Oc("temba-contact-search",uh),Oc("temba-icon",ph),Oc("temba-dropdown",kh),Oc("temba-tabs",Ah),Oc("temba-tab",Ch),Oc("temba-contact-badges",Mh),Oc("temba-contact-pending",Dh),Oc("temba-contact-tickets",Ph),Oc("temba-slider",Nh),Oc("temba-content-menu",Yh),Oc("temba-compose",ec),Oc("temba-color-picker",oc),Oc("temba-resizer",nc),Oc("temba-thumbnail",rc),Oc("temba-webchat",hc),Oc("temba-image-picker",dc),Oc("temba-mask",uc),Oc("temba-user",pc),Oc("temba-template-editor",mc),Oc("temba-toast",kc),Oc("temba-chat",ql),Oc("temba-media-picker",Cc),Oc("temba-contact-notepad",Sc),Oc("temba-outbox-monitor",Ec),Oc("temba-progress",Tc),Oc("temba-flowstart-progress",$c);class Lc extends lt{static get styles(){return r`
+    </div>`}handleSelection(t){super.handleSelected(t)}scrollToTop(){window.setTimeout((()=>{this.shadowRoot.querySelector("temba-options").scrollToTop()}),1e3)}}),Oc("temba-list",ah),Oc("temba-sortable-list",Hh),Oc("temba-run-list",Rh),Oc("temba-flow-details",qh),Oc("temba-label",Sh),Oc("temba-menu",xh),Oc("temba-remote",tc),Oc("temba-contact-search",uh),Oc("temba-icon",ph),Oc("temba-dropdown",kh),Oc("temba-tabs",Ah),Oc("temba-tab",Ch),Oc("temba-contact-badges",Mh),Oc("temba-contact-pending",Dh),Oc("temba-contact-tickets",Ph),Oc("temba-slider",Nh),Oc("temba-content-menu",Yh),Oc("temba-compose",ec),Oc("temba-color-picker",oc),Oc("temba-resizer",nc),Oc("temba-thumbnail",rc),Oc("temba-webchat",hc),Oc("temba-image-picker",dc),Oc("temba-mask",uc),Oc("temba-user",pc),Oc("temba-template-editor",mc),Oc("temba-toast",kc),Oc("temba-chat",ql),Oc("temba-media-picker",Cc),Oc("temba-contact-notepad",Sc),Oc("temba-outbox-monitor",Ec),Oc("temba-progress",Tc),Oc("temba-start-progress",$c);class Lc extends lt{static get styles(){return r`
       :host {
         line-height: normal;
       }