@nyaruka/temba-components 0.29.3 → 0.30.0

package/src/list/TembaList.ts

@@ -2,6 +2,7 @@ import { css, html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators';
 import { CustomEventType } from '../interfaces';
 import { RapidElement } from '../RapidElement';
+import { Store } from '../store/Store';
 import { fetchResultsPage, ResultsPage } from '../utils';
 
 const DEFAULT_REFRESH = 10000;
@@ -37,6 +38,9 @@ export class TembaList extends RapidElement {
   @property({ type: Boolean })
   collapsed: boolean;
 
+  @property({ type: Boolean })
+  hideShadow: boolean;
+
   @property({ attribute: false })
   getNextRefresh: (firstOption: any) => any;
 
@@ -56,6 +60,8 @@ export class TembaList extends RapidElement {
   @property({ type: String })
   refreshKey = '0';
 
+  reverseRefresh = true;
+
   // our next page from our endpoint
   nextPage: string = null;
 
@@ -63,6 +69,8 @@ export class TembaList extends RapidElement {
   clearRefreshTimeout: any;
   pending: AbortController[] = [];
 
+  store: Store;
+
   // used for testing only
   preserve: boolean;
 
@@ -72,9 +80,6 @@ export class TembaList extends RapidElement {
   static get styles() {
     return css`
       :host {
-        display: block;
-        height: 100%;
-        width: 100%;
       }
 
       temba-options {
@@ -82,18 +87,12 @@ export class TembaList extends RapidElement {
         width: 100%;
         flex-grow: 1;
       }
-
-      .wrapper {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        align-items: center;
-      }
     `;
   }
 
   constructor() {
     super();
+    this.store = document.querySelector('temba-store') as Store;
     this.handleSelection.bind(this);
   }
 
@@ -139,7 +138,9 @@ export class TembaList extends RapidElement {
     }
 
     if (changedProperties.has('mostRecentItem')) {
-      this.fireCustomEvent(CustomEventType.Refreshed);
+      if (this.mostRecentItem) {
+        this.fireCustomEvent(CustomEventType.Refreshed);
+      }
     }
 
     if (changedProperties.has('cursorIndex')) {
@@ -221,6 +222,11 @@ export class TembaList extends RapidElement {
    * Refreshes the first page, updating any found items in our list
    */
   private async refreshTop(): Promise<void> {
+    const refreshEndpoint = this.getRefreshEndpoint();
+    if (!refreshEndpoint) {
+      return;
+    }
+
     // cancel any outstanding requests
     while (this.pending.length > 0) {
       const pending = this.pending.pop();
@@ -256,7 +262,19 @@ export class TembaList extends RapidElement {
         });
 
         // insert our new items at the front
-        const newItems = [...page.results.reverse(), ...items];
+        let results = page.results;
+        if (this.reverseRefresh) {
+          results = page.results.reverse();
+        }
+        const newItems = [...results, ...items];
+
+        const topItem = newItems[0];
+        if (
+          !this.mostRecentItem ||
+          JSON.stringify(this.mostRecentItem) !== JSON.stringify(topItem)
+        ) {
+          this.mostRecentItem = topItem;
+        }
 
         if (prevItem) {
           const newItem = newItems[this.cursorIndex];
@@ -324,6 +342,8 @@ export class TembaList extends RapidElement {
       } catch (error) {
         // aborted
         this.reset();
+
+        console.log('error, resetting');
         return;
       }
 
@@ -410,6 +430,18 @@ export class TembaList extends RapidElement {
     }
   }
 
+  public renderHeader(): TemplateResult {
+    return null;
+  }
+
+  public renderFooter(): TemplateResult {
+    return null;
+  }
+
+  public getListStyle() {
+    return '';
+  }
+
   private handleSelection(event: CustomEvent) {
     const { selected, index } = event.detail;
 
@@ -421,10 +453,13 @@ export class TembaList extends RapidElement {
   }
 
   public render(): TemplateResult {
-    return html`<div class="wrapper">
+    return html`
+      ${this.renderHeader()}
       <temba-options
+        style="${this.getListStyle()}"
         ?visible=${true}
         ?block=${true}
+        ?hideShadow=${this.hideShadow}
         ?collapsed=${this.collapsed}
         ?loading=${this.loading}
         .renderOption=${this.renderOption}
@@ -436,6 +471,7 @@ export class TembaList extends RapidElement {
       >
         <slot></slot>
       </temba-options>
-    </div>`;
+      ${this.renderFooter()}
+    `;
   }
 }

package/src/options/Options.ts

@@ -16,7 +16,6 @@ export class Options extends RapidElement {
       .options-container {
         background: var(--color-widget-bg-focused);
         user-select: none;
-        box-shadow: var(--options-shadow);
         border-radius: var(--curvature-widget);
         overflow: hidden;
         margin-top: var(--options-margin-top);
@@ -32,6 +31,10 @@ export class Options extends RapidElement {
         border: 1px transparent;
       }
 
+      .shadow {
+        box-shadow: var(--options-shadow);
+      }
+
       .anchored {
         position: fixed;
       }
@@ -52,12 +55,19 @@ export class Options extends RapidElement {
       }
 
       :host([block]) {
-        box-shadow: var(--options-block-shadow);
         border-radius: var(--curvature);
         display: block;
         height: 100%;
       }
 
+      :host([block]) .shadow {
+        box-shadow: var(--options-block-shadow);
+      }
+
+      .bordered {
+        border: 1px solid var(--color-widget-border) !important;
+      }
+
       :host([block]) .options {
         margin-bottom: 1.5em;
       }
@@ -218,6 +228,9 @@ export class Options extends RapidElement {
   @property({ type: Boolean })
   collapsed: boolean;
 
+  @property({ type: Boolean })
+  hideShadow = false;
+
   @property({ attribute: false })
   getName: { (option: any): string } = function (option: any) {
     return option[this.nameKey || 'name'];
@@ -589,6 +602,8 @@ export class Options extends RapidElement {
       top: this.poppedTop,
       anchored: !this.block,
       loading: this.loading,
+      shadow: !this.hideShadow,
+      bordered: this.hideShadow,
     });
 
     const classesInner = getClasses({

package/src/store/Store.ts

@@ -179,11 +179,28 @@ export class Store extends RapidElement {
     return 'en';
   }
 
-  public getShortDuration(isoDate: string) {
-    const scheduled = DateTime.fromISO(isoDate);
-    const now = DateTime.now();
+  public getShortDuration(
+    isoDateA: string,
+    isoDateB: string = null,
+    showSeconds = false
+  ) {
+    const scheduled = DateTime.fromISO(isoDateA);
+    const now = isoDateB ? DateTime.fromISO(isoDateB) : DateTime.now();
 
     const duration = scheduled.diff(now).valueOf();
+
+    if (showSeconds) {
+      return this.humanizer.humanize(duration, {
+        language: this.getLanguageCode(),
+        largest: 1,
+        round: true,
+      });
+    }
+
+    if (Math.abs(duration) < 60000) {
+      return 'just now';
+    }
+
     return this.humanizer.humanize(duration, {
       language: this.getLanguageCode(),
       largest: 1,

package/src/tabpane/TabPane.ts

@@ -177,7 +177,9 @@ export class TabPane extends RapidElement {
                 ? html`
                     <div class="badge">
                       ${tab.count > 0
-                        ? html`<div class="count">${tab.count}</div>`
+                        ? html`<div class="count">
+                            ${tab.count.toLocaleString()}
+                          </div>`
                         : null}
                     </div>
                   `

package/src/utils/index.ts

@@ -599,3 +599,6 @@ export enum COOKIE_KEYS {
   MENU_COLLAPSED = 'menu-collapsed',
   TICKET_SHOW_DETAILS = 'tickets.show-details',
 }
+
+export const capitalize = ([first, ...rest], locale = navigator.language) =>
+  first === undefined ? '' : first.toLocaleUpperCase(locale) + rest.join('');

package/src/vectoricon/VectorIcon.ts

@@ -4,7 +4,7 @@ import { property } from 'lit/decorators';
 import { getClasses } from '../utils';
 
 // for cache busting, increase whenever the icon set changes
-const ICON_VERSION = 12;
+const ICON_VERSION = 13;
 
 export class VectorIcon extends LitElement {
   @property({ type: String })
@@ -36,7 +36,7 @@ export class VectorIcon extends LitElement {
   animationDuration = 200;
 
   @property({ type: String })
-  href = '';
+  src = '';
 
   @property({ type: Number, attribute: false })
   steps = 2;
@@ -200,7 +200,7 @@ export class VectorIcon extends LitElement {
           this.steps}ms
           ${this.easing}"
           class="${getClasses({
-            sheet: this.href === '',
+            sheet: this.src === '',
             [this.animateChange]: !!this.animateChange,
             [this.animateChange + '-' + this.animationStep]:
               this.animationStep > 0,
@@ -210,8 +210,8 @@ export class VectorIcon extends LitElement {
           })}"
         >
           <use
-            href="${this.href
-              ? this.href
+            href="${this.src
+              ? this.src
               : `${
                   this.prefix || (window as any).static_url || '/static/'
                 }icons/symbol-defs.svg?v=${ICON_VERSION}#icon-${

package/static/css/temba-components.css

@@ -104,7 +104,7 @@
 
     --icon-color: var(--text-color);
     --icon-color-hover: var(--icon-color);
-    --icon-color-circle-hover: rgb(245, 245, 245);
+    --icon-color-circle-hover: rgba(245, 245, 245, .8);
 
     --transition-speed: 250ms;
     --event-padding: 0.5em 1em;

package/static/icons/Read Me.txt

@@ -1,15 +1,15 @@
-The *SVG* folder contains the icons you selected as separate SVG files.
-
-If you prefer using PNGs, PDFs, or CSS sprites, refer to the Preferences panel of the IcoMoon app before downloading your zip pack.
-
-*demo.html* lists the icons that you selected. To insert your icons as inline SVGs (with the <use> element), copy the <svg> element (that contains symbol definitions) from the source of the demo.html file, below your own HTML's <body> tag. After copying this SVG, you can reference your glyphs like the following:
-
-<svg class="icon icon-language"><use xlink:href="#icon-language"></use></svg>
-
-You can get this code from the SVG tab of the IcoMoon app, or by referring to the source of the demo.html file. To see how you can change the color/size of your icons using CSS, refer to the example provided in the *style.css* file.
-
-If you prefer to reference an external SVG (containing <defs>) instead of embedding it in HTML, you will need to use *svgxuse.js* in order to support IE 9+. In browsers that don't support referencing external SVGs (such as IE 9), this polyfill sends one HTTP request to fetch and cache all symbol definitions. See *demo-external-svg.html* for this approach. This demo references the *symbol-defs.svg* file and uses the aforementioned polyfill. Note that it must be hosted on a web server to work
-properly. Learn more about this polyfill here: https://github.com/Keyamoon/svgxuse
-
-You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.
-
+The *SVG* folder contains the icons you selected as separate SVG files.
+
+If you prefer using PNGs, PDFs, or CSS sprites, refer to the Preferences panel of the IcoMoon app before downloading your zip pack.
+
+*demo.html* lists the icons that you selected. To insert your icons as inline SVGs (with the <use> element), copy the <svg> element (that contains symbol definitions) from the source of the demo.html file, below your own HTML's <body> tag. After copying this SVG, you can reference your glyphs like the following:
+
+<svg class="icon icon-hourglass"><use xlink:href="#icon-hourglass"></use></svg>
+
+You can get this code from the SVG tab of the IcoMoon app, or by referring to the source of the demo.html file. To see how you can change the color/size of your icons using CSS, refer to the example provided in the *style.css* file.
+
+If you prefer to reference an external SVG (containing <defs>) instead of embedding it in HTML, you will need to use *svgxuse.js* in order to support IE 9+. In browsers that don't support referencing external SVGs (such as IE 9), this polyfill sends one HTTP request to fetch and cache all symbol definitions. See *demo-external-svg.html* for this approach. This demo references the *symbol-defs.svg* file and uses the aforementioned polyfill. Note that it must be hosted on a web server to work
+properly. Learn more about this polyfill here: https://github.com/Keyamoon/svgxuse
+
+You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.
+

package/static/icons/SVG/hourglass.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<title>hourglass</title>
+<path d="M12 11.484l3.984-3.984v-3.516h-7.969v3.516zM15.984 16.5l-3.984-3.984-3.984 3.984v3.516h7.969v-3.516zM6 2.016h12v6l-3.984 3.984 3.984 3.984v6h-12v-6l3.984-3.984-3.984-3.984v-6z"></path>
+</svg>