@nyaruka/temba-components 0.107.0 → 0.107.1

package/CHANGELOG.md

@@ -4,8 +4,15 @@ 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.107.1](https://github.com/nyaruka/temba-components/compare/v0.107.0...v0.107.1)
+
+- 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,7 @@
 
   <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

@@ -7961,33 +7961,42 @@ 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
+      </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">
+      <div class="meter ${this.done?"done":""}">
+        <span class="complete" style="flex-basis: ${this.pct}%"></span>
+        <div class="incomplete"></div>
+      </div>
+
+      ${this.showPercentage||this.showEstimatedCompletion?j`<div class="etc">
+            ${this.estimatedCompletionDate&&this.showEstimatedCompletion&&!this.done?j`<temba-date
                   value="${this.estimatedCompletionDate.toISOString()}"
                   display="countdown"
                 ></temba-date>`:j`${this.pct}%`}
           </div>`:null}
     </div>`}}Tc.styles=r`
+    .wrapper {
+      display: flex;
+      box-sizing: content-box;
+      background: #f1f1f1;
+      border-radius: var(--curvature);
+      box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.05);
+    }
+
     .meter {
+      flex-grow: 1;
       display: flex;
       box-sizing: content-box;
-      height: 8px;
       position: relative;
-      background: #f1f1f1;
       border-radius: var(--curvature);
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
       padding: 4px;
-      box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.05);
+      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: var(--curvature);
       background-color: var(--color-primary-dark);
       background-image: linear-gradient(
         center bottom,
@@ -7997,7 +8006,9 @@ const{I:gc}=rt,fc=()=>document.createComment(""),vc=(t,e,i)=>{const o=t._$AA.par
 
       position: relative;
       overflow: hidden;
+      min-width: 3px;
     }
+
     .meter > span:after,
     .animate > span > span {
       content: '';
@@ -8049,17 +8060,14 @@ const{I:gc}=rt,fc=()=>document.createComment(""),vc=(t,e,i)=>{const o=t._$AA.par
 
     .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;
       background: rgba(0, 0, 0, 0.07);
       font-weight: bold;
       white-space: nowrap;
+      border-top-right-radius: var(--curvature);
+      border-bottom-right-radius: var(--curvature);
+      color: rgba(0, 0, 0, 0.5);
+      align-self: center;
+      padding: 2px 6px;
     }
 
     .meter.done > span:after,
@@ -8070,7 +8078,7 @@ 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);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,n=new Date((new Date).getTime()+(this.total-this.started)/o),s=new Date;s.setMonth(s.getMonth()+2),this.eta=n>s?null:n.toISOString(),this.started<this.total&&setTimeout((()=>{this.refresh()}),Math.min(1e3*this.refreshes,6e4))}}))}render(){return j`<temba-progress
       total=${this.total}
       current=${this.started}
       eta=${this.eta}