@nyaruka/temba-components 0.26.9 → 0.27.0

package/src/store/Store.ts

@@ -7,9 +7,15 @@ import {
   CompletionSchema,
   KeyedAssets,
   CustomEventType,
+  Workspace,
 } from '../interfaces';
 import { RapidElement } from '../RapidElement';
 import Lru from 'tiny-lru';
+import {
+  HumanizeDurationLanguage,
+  HumanizeDuration,
+} from 'humanize-duration-ts';
+import { DateTime } from 'luxon';
 
 export class Store extends RapidElement {
   @property({ type: Number })
@@ -30,6 +36,12 @@ export class Store extends RapidElement {
   @property({ type: String, attribute: 'globals' })
   globalsEndpoint: string;
 
+  @property({ type: String, attribute: 'languages' })
+  languagesEndpoint: string;
+
+  @property({ type: String, attribute: 'workspace' })
+  workspaceEndpoint: string;
+
   @property({ type: Object, attribute: false })
   private schema: CompletionSchema;
 
@@ -39,11 +51,17 @@ export class Store extends RapidElement {
   @property({ type: Object, attribute: false })
   private keyedAssets: KeyedAssets = {};
 
+  private locale = [...navigator.languages];
+
   private fields: { [key: string]: ContactField } = {};
   private groups: { [uuid: string]: ContactGroup } = {};
-
+  private languages: any = {};
+  private workspace: Workspace;
   private pinnedFields: ContactField[] = [];
 
+  private langService = new HumanizeDurationLanguage();
+  private humanizer = new HumanizeDuration(this.langService);
+
   // http promise to monitor for completeness
   public httpComplete: Promise<void | WebResponse[]>;
 
@@ -52,6 +70,21 @@ export class Store extends RapidElement {
   public firstUpdated() {
     this.cache = Lru(this.max, this.ttl);
 
+    /* 
+    // This will create a shorthand unit
+    this.humanizer.addLanguage("en", {
+      y: () => "y",
+      mo: () => "mo",
+      w: () => "w",
+      d: () => "d",
+      h: () => "h",
+      m: () => "m",
+      s: () => "s",
+      ms: () => "ms",
+      decimal: ".",
+    });
+    */
+
     const fetches = [];
     if (this.completionEndpoint) {
       fetches.push(
@@ -91,6 +124,22 @@ export class Store extends RapidElement {
       );
     }
 
+    if (this.languagesEndpoint) {
+      fetches.push(
+        getAssets(this.languagesEndpoint).then((results: any[]) => {
+          // convert array of objects to lookup
+          this.languages = results.reduce(function (
+            languages: any,
+            result: any
+          ) {
+            languages[result.value] = result.name;
+            return languages;
+          },
+          {});
+        })
+      );
+    }
+
     if (this.groupsEndpoint) {
       fetches.push(
         getAssets(this.groupsEndpoint).then((groups: any[]) => {
@@ -101,9 +150,40 @@ export class Store extends RapidElement {
       );
     }
 
+    if (this.workspaceEndpoint) {
+      fetches.push(
+        getUrl(this.workspaceEndpoint).then((response: WebResponse) => {
+          this.workspace = response.json;
+          const lang = response.headers.get('content-language');
+          if (lang) {
+            this.locale = [lang, ...this.locale];
+          }
+        })
+      );
+    }
+
     this.httpComplete = Promise.all(fetches);
   }
 
+  public getLanguageCode() {
+    if (this.locale.length > 0) {
+      return this.locale[0].split('-')[0];
+    }
+    return 'en';
+  }
+
+  public getShortDuration(isoDate: string) {
+    const scheduled = DateTime.fromISO(isoDate);
+    const now = DateTime.now();
+
+    const duration = scheduled.diff(now).valueOf();
+    return this.humanizer.humanize(duration, {
+      language: this.getLanguageCode(),
+      largest: 1,
+      round: false,
+    });
+  }
+
   public setKeyedAssets(name: string, values: string[]): void {
     this.keyedAssets[name] = values;
   }
@@ -132,6 +212,10 @@ export class Store extends RapidElement {
     return this.pinnedFields;
   }
 
+  public getLanguageName(iso: string) {
+    return this.languages[iso];
+  }
+
   public isDynamicGroup(uuid: string): boolean {
     const group = this.groups[uuid];
     if (group && group.query) {
@@ -140,6 +224,20 @@ export class Store extends RapidElement {
     return false;
   }
 
+  public getWorkspace(): Workspace {
+    return this.workspace;
+  }
+
+  public formatDate(dateString: string) {
+    return new Date(dateString).toLocaleString(this.locale, {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: 'numeric',
+    });
+  }
+
   public getUrl(
     url: string,
     options?: {
@@ -208,6 +306,11 @@ export class Store extends RapidElement {
 
   public fetching: { [url: string]: number } = {};
 
+  public updateCache(url: string, data: any) {
+    this.cache.set(url, data);
+    this.fireCustomEvent(CustomEventType.StoreUpdated, { url, data });
+  }
+
   public makeRequest(
     url: string,
     options?: { force?: boolean; prepareData?: (data: any) => any }

package/src/tabpane/Tab.ts

@@ -31,12 +31,25 @@ export class Tab extends RapidElement {
   @property({ type: String })
   icon: string;
 
+  @property({ type: String })
+  selectionColor: string;
+
+  @property({ type: String })
+  selectionBackground: string;
+
   @property({ type: Boolean })
   selected = false;
 
+  @property({ type: Number })
+  count = 0;
+
+  public hasBadge() {
+    return this.count > 0;
+  }
+
   public render(): TemplateResult {
     return html`<slot
       class="${getClasses({ selected: this.selected })}"
-    ></slot>`;
+    ></slot> `;
   }
 }

package/src/tabpane/TabPane.ts

@@ -1,5 +1,6 @@
 import { css, html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators';
+import { CustomEventType } from '../interfaces';
 import { RapidElement } from '../RapidElement';
 import { Tab } from './Tab';
 
@@ -21,6 +22,7 @@ export class TabPane extends RapidElement {
         margin: 0em 0em;
         cursor: pointer;
         display: flex;
+        align-items: center;
         border-radius: var(--curvature);
         border-bottom-right-radius: 0px;
         border-bottom-left-radius: 0px;
@@ -53,6 +55,21 @@ export class TabPane extends RapidElement {
       .pane.first {
         border-top-left-radius: 0px;
       }
+
+      .badge {
+        margin-left: 0.4em;
+      }
+
+      .count {
+        border-radius: 99px;
+        background: rgba(0, 0, 0, 0.05);
+        color: rgba(0, 0, 0, 0.5);
+        font-size: 0.7em;
+        font-weight: 400;
+        padding: 0.1em 0.4em;
+        min-width: 1em;
+        text-align: center;
+      }
     `;
   }
 
@@ -64,6 +81,7 @@ export class TabPane extends RapidElement {
       (event.currentTarget as HTMLDivElement).dataset.index
     );
     this.requestUpdate('index');
+    this.fireEvent(CustomEventType.ContextChanged);
   }
 
   public updated(changedProperties: Map<string, any>) {
@@ -84,6 +102,10 @@ export class TabPane extends RapidElement {
     }
   }
 
+  public getTab(index: number): Tab {
+    return this.children.item(index) as Tab;
+  }
+
   public render(): TemplateResult {
     const tabs: Tab[] = [];
     for (const tab of this.children) {
@@ -98,9 +120,23 @@ export class TabPane extends RapidElement {
               @click=${this.handleTabClick}
               data-index=${index}
               class="tab ${index == this.index ? 'selected' : ''}"
+              style="${tab.selectionColor && index == this.index
+                ? `color:${tab.selectionColor};--icon-color:${tab.selectionColor};`
+                : ''} ${tab.selectionBackground && index == this.index
+                ? `background-color:${tab.selectionBackground};`
+                : ''}"
             >
               ${tab.icon ? html`<temba-icon name=${tab.icon} />` : null}
               ${tab.name}
+              ${tab.hasBadge()
+                ? html`
+                    <div class="badge">
+                      ${tab.count > 0
+                        ? html`<div class="count">${tab.count}</div>`
+                        : null}
+                    </div>
+                  `
+                : null}
             </div>
           `
         )}

package/src/textinput/TextInput.ts

@@ -20,9 +20,7 @@ export class TextInput extends FormElement {
         display: flex;
         flex-direction: row;
         align-items: stretch;
-
         box-shadow: var(--widget-box-shadow);
-
         caret-color: var(--input-caret);
       }
 
@@ -47,6 +45,8 @@ export class TextInput extends FormElement {
         border-color: var(--color-focus);
         background: var(--color-widget-bg-focused);
         box-shadow: var(--widget-box-shadow-focused);
+        z-index: 10000;
+        position: relative;
       }
 
       .input-container:hover {

package/src/utils/index.ts

@@ -6,7 +6,8 @@ import { ContactField, Ticket } from '../interfaces';
 
 export type Asset = KeyedAsset & Ticket & ContactField;
 
-export const DATE_FORMAT = /(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d\.\d+([+-][0-2]\d:[0-5]\d|Z))|(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d([+-][0-2]\d:[0-5]\d|Z))|(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d([+-][0-2]\d:[0-5]\d|Z))/;
+export const DATE_FORMAT =
+  /(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d\.\d+([+-][0-2]\d:[0-5]\d|Z))|(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d([+-][0-2]\d:[0-5]\d|Z))|(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d([+-][0-2]\d:[0-5]\d|Z))/;
 
 interface KeyedAsset {
   key?: string;
@@ -77,11 +78,11 @@ export const getUrl = (
             // eslint-disable-next-line no-empty
           } catch (err) {}
           resolve({
+            controller,
             body,
             json,
-            status: response.status,
             headers: response.headers,
-            controller,
+            status: response.status,
           });
         });
       })
@@ -210,8 +211,8 @@ export const postUrl = (
           resolve({
             body,
             json,
-            status: response.status,
             headers: response.headers,
+            status: response.status,
           });
         });
       })
@@ -260,12 +261,11 @@ export const postForm = (
 
 /**
  */
-export const renderIf = (predicate: boolean | any) => (
-  then: () => TemplateResult,
-  otherwise?: () => TemplateResult
-) => {
-  return predicate ? then() : otherwise ? otherwise() : html``;
-};
+export const renderIf =
+  (predicate: boolean | any) =>
+  (then: () => TemplateResult, otherwise?: () => TemplateResult) => {
+    return predicate ? then() : otherwise ? otherwise() : html``;
+  };
 
 export const hexToRgb = (hex: string): { r: number; g: number; b: number } => {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);

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 = 8;
+const ICON_VERSION = 12;
 
 export class VectorIcon extends LitElement {
   @property({ type: String })
@@ -29,6 +29,9 @@ export class VectorIcon extends LitElement {
   @property({ type: String })
   animateChange: string;
 
+  @property({ type: String })
+  animateClick: string;
+
   @property({ type: Number })
   animationDuration = 200;
 
@@ -151,6 +154,12 @@ export class VectorIcon extends LitElement {
     }
   }
 
+  public handleClicked() {
+    if (this.animateClick) {
+      this.animationStep = 1;
+    }
+  }
+
   public updated(changes: Map<string, any>) {
     super.updated(changes);
 
@@ -183,10 +192,11 @@ export class VectorIcon extends LitElement {
   public render(): TemplateResult {
     return html`
       <div
+        @click=${this.handleClicked}
         class="wrapper ${getClasses({
           clickable: this.clickable,
           circled: this.circled,
-          animate: !!this.animateChange,
+          animate: !!this.animateChange || !!this.animateClick,
         })}"
       >
         <svg
@@ -199,6 +209,9 @@ export class VectorIcon extends LitElement {
             [this.animateChange]: !!this.animateChange,
             [this.animateChange + '-' + this.animationStep]:
               this.animationStep > 0,
+            [this.animateClick]: !!this.animateClick,
+            [this.animateClick + '-' + this.animationStep]:
+              this.animationStep > 0,
           })}"
         >
           <use

package/static/css/temba-components.css

@@ -84,6 +84,9 @@ html input {
     --color-label-primary-text: var(--color-text-light);
     --color-label-secondary: rgba(0, 0, 0, 0.2);
     --color-label-secondary-text: rgba(255, 255, 255, 0.9);
+    --color-label-tertiary: var(--color-tertiary);
+    --color-label-tertiary-text: var(--color-text-light);
+
   
     --color-nav-unselected: #fff;
     --color-nav-selected-bg: #fff;

package/static/icons/Read Me.txt

@@ -4,7 +4,7 @@ If you prefer using PNGs, PDFs, or CSS sprites, refer to the Preferences panel o
 
 *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-calendar"><use xlink:href="#icon-calendar"></use></svg>
+<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.
 

package/static/icons/SVG/bookmark-filled.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>bookmark-filled</title>
+<path d="M17.016 3q0.797 0 1.383 0.609t0.586 1.406v15.984l-6.984-3-6.984 3v-15.984q0-0.797 0.586-1.406t1.383-0.609h10.031z"></path>
+</svg>

package/static/icons/SVG/bookmark.svg

@@ -1,5 +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>bookmark</title>
-<path d="M18.419 21.814c0.161 0.116 0.363 0.186 0.581 0.186 0.552 0 1-0.448 1-1v-16c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-10c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v16c-0.001 0.199 0.060 0.404 0.186 0.581 0.321 0.449 0.946 0.554 1.395 0.232l6.419-4.584zM18 19.057l-5.419-3.871c-0.355-0.254-0.819-0.242-1.162 0l-5.419 3.871v-14.057c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h10c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707z"></path>
+<path d="M17.016 18v-12.984h-10.031v12.984l5.016-2.203zM17.016 3q0.797 0 1.383 0.609t0.586 1.406v15.984l-6.984-3-6.984 3v-15.984q0-0.797 0.586-1.406t1.383-0.609h10.031z"></path>
 </svg>

package/static/icons/SVG/external-link1.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>external-link1</title>
+<path d="M17 13v6c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-11c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-11c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h6c0.552 0 1-0.448 1-1s-0.448-1-1-1h-6c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v11c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h11c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM10.707 14.707l9.293-9.293v3.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.136-0.027-0.265-0.076-0.383s-0.121-0.228-0.216-0.323c-0.001-0.001-0.001-0.001-0.002-0.002-0.092-0.092-0.202-0.166-0.323-0.216-0.118-0.049-0.247-0.076-0.383-0.076h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1h3.586l-9.293 9.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z"></path>
+</svg>

package/static/icons/SVG/globe.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>globe</title>
+<path d="M16.951 11c-0.214-2.69-1.102-5.353-2.674-7.71 1.57 0.409 2.973 1.232 4.087 2.346 1.408 1.408 2.351 3.278 2.581 5.364zM14.279 20.709c1.483-2.226 2.437-4.853 2.669-7.709h3.997c-0.23 2.086-1.173 3.956-2.581 5.364-1.113 1.113-2.516 1.936-4.085 2.345zM7.049 13c0.214 2.69 1.102 5.353 2.674 7.71-1.57-0.409-2.973-1.232-4.087-2.346-1.408-1.408-2.351-3.278-2.581-5.364zM9.721 3.291c-1.482 2.226-2.436 4.853-2.669 7.709h-3.997c0.23-2.086 1.173-3.956 2.581-5.364 1.114-1.113 2.516-1.936 4.085-2.345zM12.004 1c0 0 0 0 0 0-3.044 0.001-5.794 1.233-7.782 3.222-1.99 1.989-3.222 4.741-3.222 7.778s1.232 5.789 3.222 7.778c1.988 1.989 4.738 3.221 7.774 3.222 0 0 0 0 0 0 3.044-0.001 5.793-1.233 7.782-3.222 1.99-1.989 3.222-4.741 3.222-7.778s-1.232-5.789-3.222-7.778c-1.988-1.989-4.738-3.221-7.774-3.222zM14.946 13c-0.252 2.788-1.316 5.36-2.945 7.451-1.729-2.221-2.706-4.818-2.945-7.451zM11.999 3.549c1.729 2.221 2.706 4.818 2.945 7.451h-5.89c0.252-2.788 1.316-5.36 2.945-7.451z"></path>
+</svg>

package/static/icons/SVG/language.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+<title>language</title>
+<path d="M19.753 10.909c-0.624-1.707-2.366-2.726-4.661-2.726-0.090 0-0.176 0.002-0.262 0.006l-0.016-2.063c0 0 3.41-0.588 3.525-0.607s0.133-0.119 0.109-0.231c-0.023-0.111-0.167-0.883-0.188-0.976-0.027-0.131-0.102-0.127-0.207-0.109s-3.25 0.461-3.25 0.461-0.012-1.953-0.013-2.078c-0.001-0.125-0.069-0.158-0.194-0.156s-0.92 0.014-1.025 0.016c-0.105 0.002-0.164 0.049-0.162 0.148s0.033 2.307 0.033 2.307-3.061 0.527-3.144 0.543c-0.084 0.014-0.17 0.053-0.151 0.143s0.19 1.094 0.208 1.172c0.018 0.080 0.072 0.129 0.188 0.107 0.115-0.019 2.924-0.504 2.924-0.504l0.035 2.018c-1.077 0.281-1.801 0.824-2.256 1.303-0.768 0.807-1.207 1.887-1.207 2.963 0 1.586 0.971 2.529 2.328 2.695 3.162 0.387 5.119-3.060 5.769-4.715 1.097 1.506 0.256 4.354-2.094 5.98-0.043 0.029-0.098 0.129-0.033 0.207s0.541 0.662 0.619 0.756c0.080 0.096 0.206 0.059 0.256 0.023 2.51-1.73 3.661-4.515 2.869-6.683zM12.367 14.097c-0.966-0.121-0.944-0.914-0.944-1.453 0-0.773 0.327-1.58 0.876-2.156 0.335-0.354 0.75-0.621 1.229-0.799l0.082 4.277c-0.385 0.131-0.799 0.185-1.243 0.131zM14.794 13.544l0.046-4.109c0.084-0.004 0.166-0.010 0.252-0.010 0.773 0 1.494 0.145 1.885 0.361s-1.023 2.713-2.183 3.758zM5.844 5.876c-0.030-0.094-0.103-0.145-0.196-0.145h-1.95c-0.093 0-0.165 0.051-0.194 0.144-0.412 1.299-3.48 10.99-3.496 11.041s-0.011 0.076 0.062 0.076h1.733c0.075 0 0.099-0.023 0.114-0.072 0.015-0.051 1.008-3.318 1.008-3.318h3.496c0 0 0.992 3.268 1.008 3.318s0.039 0.072 0.113 0.072h1.734c0.072 0 0.078-0.025 0.062-0.076-0.014-0.050-3.083-9.741-3.494-11.040zM3.226 12.194l1.447-5.25 1.447 5.25h-2.894z"></path>
+</svg>

package/static/icons/SVG/search.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>search</title>
+<path d="M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"></path>
+</svg>