@nyaruka/temba-components 0.26.8 → 0.26.9

package/src/contacts/events.ts

@@ -436,6 +436,10 @@ export const getEventStyles = () => {
     .assigned .attn {
       color: #777;
     }
+
+    .attachments {
+      margin-top: 1em;
+    }
   `;
 };
 
@@ -674,12 +678,45 @@ export const renderAttachment = (attachment: string): TemplateResult => {
     inner = html`<div class="linked" onclick="goto(event)" href="${url}"><img src="${url}" style="width:100%;height:auto;display:block"></img></a>`;
   } else if (ext === 'pdf') {
     return html`<div
-    style="width:100%;height:300px;border-radius:var(--curvature);box-shadow:0px 0px 10px -1px rgb(160 160 160);overflow:hidden"
-  ><embed src="${url}#view=Fit" type="application/pdf" frameBorder="0" scrolling="auto" height="100%" width="100%"></embed></div>`;
+      style="width:100%;height:300px;border-radius:var(--curvature);box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);overflow:hidden"
+    ><embed src="${url}#view=Fit" type="application/pdf" frameBorder="0" scrolling="auto" height="100%" width="100%"></embed></div>`;
   } else if (mediaType === 'video') {
-    return html`<video max-width="400px" height="auto" controls="controls">
+    return html`<video
+      style="border-radius:var(--curvature);box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);"
+      max-width="400px"
+      height="auto"
+      controls="controls"
+    >
       <source src="${url}" type="video/mp4" />
     </video> `;
+  } else if (mediaType === 'audio') {
+    return html`<audio
+      style="border-radius: 99px; box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);"
+      src="${url}"
+      type="${attType}"
+      controls
+    >
+      <a target="_" href="${url}">${url}</a>
+    </audio>`;
+  } else if (attType === 'geo') {
+    const [lat, long] = url.split(',');
+    const latFloat = parseFloat(lat);
+    const longFloat = parseFloat(long);
+    const geo = `${lat}000000%2C${long}000000`;
+
+    return html` <iframe
+      style="border-radius: var(--curvature);box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);"
+      width="300"
+      height="300"
+      frameborder="0"
+      scrolling="no"
+      marginheight="0"
+      marginwidth="0"
+      src="https://www.openstreetmap.org/export/embed.html?bbox=${longFloat -
+      0.005}000000%2C${latFloat - 0.005}%2C${longFloat +
+      0.005}000000%2C${latFloat +
+      0.005}000000&amp;layer=mapnik&amp;marker=${geo}"
+    ></iframe>`;
   } else {
     return html`<div style="display:flex">
       <temba-icon name="download"></temba-icon>
@@ -688,7 +725,7 @@ export const renderAttachment = (attachment: string): TemplateResult => {
   }
 
   return html`<div
-    style="width:100%;max-width:300px;border-radius:var(--curvature); box-shadow:0px 0px 10px -1px rgb(160 160 160);overflow:hidden"
+    style="width:100%;max-width:300px;border-radius:var(--curvature); box-shadow:0px 0px 6px 0px rgba(0,0,0,.15);overflow:hidden"
   >
     ${inner}
   </div>`;

package/src/interfaces.ts

@@ -43,6 +43,7 @@ export interface ContactField {
   label: string;
   value_type: string;
   pinned: boolean;
+  priority: number;
 }
 
 export interface ContactGroup {
@@ -178,4 +179,5 @@ export enum CustomEventType {
   Submitted = 'temba-submitted',
   Redirected = 'temba-redirected',
   NoPath = 'temba-no-path',
+  StoreUpdated = 'temba-store-updated',
 }

package/src/label/Label.ts

@@ -1,9 +1,8 @@
 import { LitElement, TemplateResult, html, css } from 'lit';
-import { property, customElement } from 'lit/decorators';
+import { property } from 'lit/decorators';
 import { getClasses } from '../utils';
 import { styleMap } from 'lit-html/directives/style-map';
 
-@customElement('temba-label')
 export default class Label extends LitElement {
   static get styles() {
     return css`
@@ -11,9 +10,18 @@ export default class Label extends LitElement {
         display: inline-block;
       }
 
+      slot {
+        white-space: nowrap;
+      }
+
       .mask {
-        padding: 3px 6px;
-        border-radius: var(--curvature);
+        padding: 3px 8px;
+        border-radius: 12px;
+        display: flex;
+      }
+
+      temba-icon {
+        margin-right: 0.3em;
       }
 
       .label.clickable .mask:hover {
@@ -21,10 +29,9 @@ export default class Label extends LitElement {
       }
 
       .label {
-        border-radius: 2px;
-        font-size: 80%;
+        font-size: 0.8em;
         font-weight: 400;
-        border-radius: var(--curvature);
+        border-radius: 12px;
         background: tomato;
         color: #fff;
         text-shadow: 0 0.04em 0.04em rgba(0, 0, 0, 0.35);
@@ -33,29 +40,37 @@ export default class Label extends LitElement {
       .primary {
         background: var(--color-label-primary);
         color: var(--color-label-primary-text);
+        --icon-color: var(--color-label-primary-text);
       }
 
       .secondary {
         background: var(--color-label-secondary);
         color: var(--color-label-secondary-text);
+        --icon-color: var(--color-label-secondary-text);
         text-shadow: none;
       }
 
       .light {
         background: var(--color-overlay-light);
         color: var(--color-overlay-light-text);
+        --icon-color: var(--color-overlay-light-text);
         text-shadow: none;
       }
 
       .dark {
         background: var(--color-overlay-dark);
         color: var(--color-overlay-dark-text);
+        --icon-color: var(--color-overlay-dark-text);
         text-shadow: none;
       }
 
       .clickable {
         cursor: pointer;
       }
+
+      .shadow {
+        box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);
+      }
     `;
   }
 
@@ -74,6 +89,12 @@ export default class Label extends LitElement {
   @property({ type: Boolean })
   dark: boolean;
 
+  @property({ type: Boolean })
+  shadow: boolean;
+
+  @property({ type: String })
+  icon: string;
+
   @property()
   backgroundColor: string;
 
@@ -97,10 +118,12 @@ export default class Label extends LitElement {
           secondary: this.secondary,
           light: this.light,
           dark: this.dark,
+          shadow: this.shadow,
         })}"
         style=${styleMap(labelStyle)}
       >
         <div class="mask">
+          ${this.icon ? html`<temba-icon name=${this.icon} />` : null}
           <slot></slot>
         </div>
       </div>

package/src/select/Select.ts

@@ -12,7 +12,7 @@ import '../options/Options';
 import { EventHandler } from '../RapidElement';
 import { FormElement } from '../FormElement';
 
-import flru from 'flru';
+import Lru from 'tiny-lru';
 import { CompletionOption, CustomEventType, Position } from '../interfaces';
 import {
   renderCompletionOption,
@@ -497,7 +497,7 @@ export class Select extends FormElement {
 
   private removingSelection: boolean;
 
-  private lruCache = flru(20);
+  private lruCache = Lru(20, 60000);
 
   // http promise to monitor for completeness
   public httpComplete: Promise<void | WebResponse>;
@@ -507,7 +507,7 @@ export class Select extends FormElement {
 
     // if our cache key changes, clear it out
     if (changedProperties.has('cacheKey')) {
-      this.lruCache.clear(false);
+      this.lruCache.clear();
     }
 
     if (
@@ -594,7 +594,7 @@ export class Select extends FormElement {
       postJSON(this.endpoint, selected).then(response => {
         if (response.status >= 200 && response.status < 300) {
           this.setSelectedOption(response.json);
-          this.lruCache = flru(20);
+          this.lruCache = Lru(20, 60000);
         } else {
           // TODO: find a way to share inline errors
           this.blur();

package/src/store/Store.ts

@@ -1,15 +1,23 @@
-import { LitElement } from 'lit';
 import { property } from 'lit/decorators';
-import { getUrl, getAssets, Asset, WebResponse } from '../utils';
+import { fetchResults, getUrl, getAssets, Asset, WebResponse } from '../utils';
 import {
   ContactField,
   ContactGroup,
   CompletionOption,
   CompletionSchema,
   KeyedAssets,
+  CustomEventType,
 } from '../interfaces';
+import { RapidElement } from '../RapidElement';
+import Lru from 'tiny-lru';
+
+export class Store extends RapidElement {
+  @property({ type: Number })
+  ttl = 60000;
+
+  @property({ type: Number })
+  max = 20;
 
-export class Store extends LitElement {
   @property({ type: String, attribute: 'completion' })
   completionEndpoint: string;
 
@@ -34,10 +42,16 @@ export class Store extends LitElement {
   private fields: { [key: string]: ContactField } = {};
   private groups: { [uuid: string]: ContactGroup } = {};
 
+  private pinnedFields: ContactField[] = [];
+
   // http promise to monitor for completeness
   public httpComplete: Promise<void | WebResponse[]>;
 
+  private cache: any;
+
   public firstUpdated() {
+    this.cache = Lru(this.max, this.ttl);
+
     const fetches = [];
     if (this.completionEndpoint) {
       fetches.push(
@@ -52,9 +66,18 @@ export class Store extends LitElement {
       fetches.push(
         getAssets(this.fieldsEndpoint).then((assets: Asset[]) => {
           this.keyedAssets['fields'] = [];
+          this.pinnedFields = [];
+
           assets.forEach((field: ContactField) => {
             this.keyedAssets['fields'].push(field.key);
             this.fields[field.key] = field;
+            if (field.pinned) {
+              this.pinnedFields.push(field);
+            }
+          });
+
+          this.pinnedFields.sort((a, b) => {
+            return b.priority - a.priority;
           });
         })
       );
@@ -105,6 +128,10 @@ export class Store extends LitElement {
     return this.fields[key];
   }
 
+  public getPinnedFields(): ContactField[] {
+    return this.pinnedFields;
+  }
+
   public isDynamicGroup(uuid: string): boolean {
     const group = this.groups[uuid];
     if (group && group.query) {
@@ -112,4 +139,98 @@ export class Store extends LitElement {
     }
     return false;
   }
+
+  public getUrl(
+    url: string,
+    options?: {
+      force?: boolean;
+      controller?: AbortController;
+      headers?: { [key: string]: string };
+    }
+  ): Promise<WebResponse> {
+    options = options || {};
+    if (!options.force && this.cache.has(url)) {
+      return new Promise<WebResponse>(resolve => {
+        resolve(this.cache.get(url));
+      });
+    }
+
+    return getUrl(url, options.controller, options.headers || {}).then(
+      (response: WebResponse) => {
+        return new Promise<WebResponse>((resolve, reject) => {
+          if (response.status >= 200 && response.status <= 300) {
+            this.cache.set(url, response);
+            resolve(response);
+          } else {
+            reject('Status: ' + response.status);
+          }
+        });
+      }
+    );
+  }
+
+  private pendingResolves = {};
+
+  /**
+   * Fetches all of the results for a given API endpoint with caching
+   * @param url
+   */
+  public getResults(
+    url: string,
+    options?: { force?: boolean }
+  ): Promise<any[]> {
+    options = options || {};
+    const key = 'results_' + url;
+    const results = this.cache.get(key);
+
+    if (!options.force && results) {
+      return new Promise<any[]>(resolve => {
+        resolve(results);
+      });
+    }
+
+    return new Promise<any[]>(resolve => {
+      const pending = this.pendingResolves[url] || [];
+      pending.push(resolve);
+      this.pendingResolves[url] = pending;
+      if (pending.length <= 1) {
+        fetchResults(url).then((results: any[]) => {
+          this.cache.set(key, results);
+          const pending = this.pendingResolves[url] || [];
+          while (pending.length > 0) {
+            const resolve = pending.pop();
+            resolve(results);
+          }
+        });
+      }
+    });
+  }
+
+  public fetching: { [url: string]: number } = {};
+
+  public makeRequest(
+    url: string,
+    options?: { force?: boolean; prepareData?: (data: any) => any }
+  ) {
+    const previousRequest = this.fetching[url];
+    const now = new Date().getTime();
+    // if the request was recently made, don't do anything
+    if (previousRequest && now - previousRequest < 500) {
+      return;
+    }
+
+    this.fetching[url] = now;
+    options = options || {};
+    const cached = this.cache.get(url);
+    if (cached && !options.force) {
+      this.fireCustomEvent(CustomEventType.StoreUpdated, { url, data: cached });
+    } else {
+      fetchResults(url).then(data => {
+        data = options.prepareData ? options.prepareData(data) : data;
+        this.cache.set(url, data);
+        this.fireCustomEvent(CustomEventType.StoreUpdated, { url, data });
+        delete this.fetching[url];
+      });
+    }
+  }
 }

package/src/store/StoreElement.ts

@@ -0,0 +1,71 @@
+import { PropertyValueMap } from 'lit';
+import { property } from 'lit/decorators';
+import { CustomEventType } from '../interfaces';
+import { RapidElement } from '../RapidElement';
+import { Store } from './Store';
+
+/**
+ * StoreElement is a listener for a given endpoint that re-renders
+ * when the underlying store element changes
+ */
+export class StoreElement extends RapidElement {
+  @property({ type: String })
+  url: string;
+
+  @property({ type: Object, attribute: false })
+  data: any;
+
+  store: Store;
+
+  prepareData(data: any): any {
+    return data;
+  }
+
+  public refresh() {
+    this.store.makeRequest(this.url, {
+      prepareData: this.prepareData,
+      force: true,
+    });
+  }
+
+  private handleStoreUpdated(event: CustomEvent) {
+    if (event.detail.url === this.url) {
+      this.data = event.detail.data;
+      this.fireCustomEvent(CustomEventType.Refreshed, { data: this.data });
+    }
+  }
+
+  protected updated(
+    properties: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    super.updated(properties);
+    if (properties.has('url')) {
+      if (this.url) {
+        this.store.makeRequest(this.url, { prepareData: this.prepareData });
+      }
+    }
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.store = document.querySelector('temba-store') as Store;
+    this.handleStoreUpdated = this.handleStoreUpdated.bind(this);
+    this.prepareData = this.prepareData.bind(this);
+    if (this.store) {
+      this.store.addEventListener(
+        CustomEventType.StoreUpdated,
+        this.handleStoreUpdated
+      );
+    }
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    if (this.store) {
+      this.store.removeEventListener(
+        CustomEventType.StoreUpdated,
+        this.handleStoreUpdated
+      );
+    }
+  }
+}

package/src/textinput/TextInput.ts

@@ -186,6 +186,8 @@ export class TextInput extends FormElement {
   cursorStart = -1;
   cursorEnd = -1;
 
+  isoFormattedDate: string;
+
   public constructor() {
     super();
   }
@@ -197,6 +199,7 @@ export class TextInput extends FormElement {
     if (this.dateElement) {
       this.onDateUpdated = this.onDateUpdated.bind(this);
       this.onDateReady = this.onDateReady.bind(this);
+      this.onDateClose = this.onDateClose.bind(this);
     }
 
     this.inputElement = this.shadowRoot.querySelector('.textinput');
@@ -216,51 +219,67 @@ export class TextInput extends FormElement {
 
   public updated(changes: Map<string, any>) {
     super.updated(changes);
-    if (changes.has('value')) {
-      this.setValues([this.value]);
-      this.fireEvent('change');
-
-      if (this.textarea && this.autogrow) {
-        const autogrow = this.shadowRoot.querySelector(
-          '.grow-wrap > div'
-        ) as HTMLDivElement;
-        autogrow.innerText = this.value + String.fromCharCode(10);
-      }
 
-      if (this.cursorStart > -1 && this.cursorEnd > -1) {
-        this.inputElement.setSelectionRange(this.cursorStart, this.cursorEnd);
-        this.cursorStart = -1;
-        this.cursorEnd = -1;
+    if (changes.has('value')) {
+      if (this.datepicker || this.datetimepicker) {
+        this.onDateReady();
+      } else {
+        this.setValues([this.value]);
+        this.fireEvent('change');
+
+        if (this.textarea && this.autogrow) {
+          const autogrow = this.shadowRoot.querySelector(
+            '.grow-wrap > div'
+          ) as HTMLDivElement;
+          autogrow.innerText = this.value + String.fromCharCode(10);
+        }
+
+        if (this.cursorStart > -1 && this.cursorEnd > -1) {
+          this.inputElement.setSelectionRange(this.cursorStart, this.cursorEnd);
+          this.cursorStart = -1;
+          this.cursorEnd = -1;
+        }
       }
     }
   }
 
-  private onDateUpdated(dates: Date[], formattedDate: string) {
+  private onDateUpdated(dates: Date[], isoFormatDate: string) {
     if (dates.length > 0) {
+      this.isoFormattedDate = isoFormatDate;
       this.inputElement.value = this.dateElement.formatDate(
         dates[0],
         this.dateElement.altFormat
       );
-
-      this.setValue(formattedDate);
-      this.inputElement.blur();
     }
   }
 
+  public getDisplayValue() {
+    return this.inputElement.value;
+  }
+
   private onDateReady() {
     window.setTimeout(() => {
-      if (this.value) {
-        this.inputElement.value = this.dateElement.formatDate(
-          this.dateElement.parseDate(this.value),
-          this.dateElement.altFormat
-        );
-        this.dateElement.setDate(this.value);
+      if (this.dateElement) {
+        if (this.value) {
+          this.inputElement.value = this.dateElement.formatDate(
+            this.dateElement.parseDate(this.value),
+            this.dateElement.altFormat
+          );
+          this.dateElement.setDate(this.value);
+        }
+
+        this.loading = false;
       }
-
-      this.loading = false;
     }, 0);
   }
 
+  private onDateClose() {
+    if (this.isoFormattedDate) {
+      this.setValue(this.isoFormattedDate);
+      this.fireEvent('blur');
+    }
+  }
+
   private handleClear(event: any): void {
     event.stopPropagation();
     event.preventDefault();
@@ -502,9 +521,10 @@ export class TextInput extends FormElement {
           class="datepicker hidden"
           altInput
           altFormat="${this.datepicker ? 'F j, Y' : 'F j, Y h:i K'}"
-          dateFormat="${this.datepicker ? 'Y-m-d' : 'Y-m-d H:i'}"
+          dateFormat="${this.datepicker ? 'Y-m-d' : 'Z'}"
           .onValueUpdate=${this.onDateUpdated}
           .onReady=${this.onDateReady}
+          .onClose=${this.onDateClose}
           ?enableTime=${this.datetimepicker}
         ></lit-flatpickr>
       `;
@@ -525,6 +545,7 @@ export class TextInput extends FormElement {
           style=${styleMap(containerStyle)}
           @click=${this.handleContainerClick}
         >
+          <slot name="prefix"></slot>
           ${input} ${clear}
           <slot></slot>
         </div>

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 = 6;
+const ICON_VERSION = 8;
 
 export class VectorIcon extends LitElement {
   @property({ type: String })
@@ -32,6 +32,9 @@ export class VectorIcon extends LitElement {
   @property({ type: Number })
   animationDuration = 200;
 
+  @property({ type: String })
+  href = '';
+
   @property({ type: Number, attribute: false })
   steps = 2;
 
@@ -53,7 +56,7 @@ export class VectorIcon extends LitElement {
         padding-bottom: 0.2em;
       }
 
-      svg {
+      .sheet {
         fill: var(--icon-color);
         transform: scale(1);
         transition: fill 100ms ease-in-out,
@@ -62,28 +65,28 @@ export class VectorIcon extends LitElement {
           margin 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
       }
 
-      svg.spin {
+      .sheet.spin {
         transform: rotate(0deg);
       }
 
-      svg.spin-1 {
+      .sheet.spin-1 {
         transform: rotate(180deg);
       }
 
-      svg.spin-2 {
+      .sheet.spin-2 {
         transform: rotate(360deg);
       }
 
-      svg.spin-3 {
+      .sheet.spin-3 {
         transform: rotate(0deg);
         transition-duration: 0ms !important;
       }
 
-      svg.pulse {
+      .sheet.pulse {
         transform: scale(1);
       }
 
-      svg.pulse-1 {
+      .sheet.pulse-1 {
         transform: scale(1.2);
       }
 
@@ -192,18 +195,20 @@ export class VectorIcon extends LitElement {
           this.steps}ms
           ${this.easing}"
           class="${getClasses({
+            sheet: this.href === '',
             [this.animateChange]: !!this.animateChange,
             [this.animateChange + '-' + this.animationStep]:
               this.animationStep > 0,
           })}"
         >
           <use
-            href="${this.prefix ||
-            (window as any).static_url ||
-            '/static/'}icons/symbol-defs.svg?v=${ICON_VERSION}#icon-${this
-              .lastName ||
-            this.name ||
-            this.id}"
+            href="${this.href
+              ? this.href
+              : `${
+                  this.prefix || (window as any).static_url || '/static/'
+                }icons/symbol-defs.svg?v=${ICON_VERSION}#icon-${
+                  this.lastName || this.name || this.id
+                }`}"
           />
         </svg>
       </div>