@nyaruka/temba-components 0.35.0 → 0.35.2

package/out-tsc/test/utils.test.js

@@ -1,4 +1,6 @@
 import '../temba-modules';
+import { DateTime } from 'luxon';
+import * as sinon from 'sinon';
 import { stub } from 'sinon';
 import { expect, fixture, html, assert } from '@open-wc/testing';
 import MouseHelper from './MouseHelper';
@@ -160,4 +162,11 @@ export const loadStore = async () => {
     await store.httpComplete;
     return store;
 };
+export const mockNow = (isodate) => {
+    const now = DateTime.fromISO(isodate);
+    // mock the current time
+    sinon.replace(DateTime, 'now', () => {
+        return now;
+    });
+};
 //# sourceMappingURL=utils.test.js.map

package/out-tsc/test/utils.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.test.js","sourceRoot":"","sources":["../../test/utils.test.ts"],"names":[],"mappings":"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","sourcesContent":["import '../temba-modules';\n\ninterface Clip {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\nimport { stub } from 'sinon';\nimport { expect, fixture, html, assert } from '@open-wc/testing';\nimport MouseHelper from './MouseHelper';\nimport { Store } from '../src/store/Store';\n\nexport interface CodeMock {\n  endpoint: RegExp;\n  body: string;\n  headers: any;\n}\n\nconst gets: CodeMock[] = [];\nconst posts: CodeMock[] = [];\nlet normalFetch;\n\nexport const showMouse = async () => {\n  const mouse = await fixture(html`<mouse-helper />`);\n  assert.instanceOf(mouse, MouseHelper);\n};\n\nexport const getAttributes = (attrs: any = {}) => {\n  return `${Object.keys(attrs)\n    .map((name: string) => {\n      if (typeof attrs[name] === 'boolean' && attrs[name]) {\n        return name;\n      }\n      return `${name}='${attrs[name]}'`;\n    })\n    .join(' ')}`;\n};\n\nexport const getComponent = async (\n  tag,\n  attrs: any = {},\n  slot = '',\n  width = 250,\n  height = 0,\n  style = ''\n) => {\n  const spec = `<${tag} ${getAttributes(attrs)}>${slot}</${tag}>`;\n  const parentNode = document.createElement('div');\n  const styleAttribute = `\n    ${width > 0 ? `width:${width}px;` : ``} \n    ${height > 0 ? `height:${height}px;` : ``}\n    ${style ? style : ``}\n  `;\n\n  parentNode.setAttribute('style', styleAttribute);\n  return await fixture(spec, { parentNode });\n};\n\nconst createResponse = mocked => {\n  const mockResponse = new window.Response(mocked.body, {\n    status: 200,\n    headers: {\n      'Content-type': 'text/html',\n      ...mocked.headers,\n    },\n  });\n\n  return Promise.resolve(mockResponse);\n};\n\nconst createJSONResponse = mocked => {\n  const mockResponse = new window.Response(JSON.stringify(mocked.body), {\n    status: 200,\n    headers: {\n      'Content-type': 'application/json',\n      ...mocked.headers,\n    },\n  });\n\n  return Promise.resolve(mockResponse);\n};\n\nconst getResponse = (endpoint: string, options) => {\n  // check if our path has been mocked in code\n  const mocks = options.method === 'GET' ? gets : posts;\n  const codeMock = mocks.find(mock => mock.endpoint.test(endpoint));\n\n  if (codeMock) {\n    if (typeof codeMock.body === 'string') {\n      // see if we are being mocked to a file\n      if (codeMock.body.startsWith('/')) {\n        endpoint = codeMock.body;\n      } else {\n        return createResponse(codeMock);\n      }\n    } else {\n      return createJSONResponse(codeMock);\n    }\n  }\n\n  // otherwise fetch over http\n  return normalFetch(endpoint, options);\n};\n\nbefore(async () => {\n  normalFetch = window.fetch;\n  stub(window, 'fetch').callsFake(getResponse);\n  await setViewport({ width: 1024, height: 768, deviceScaleFactor: 2 });\n});\n\nafter(() => {\n  (window.fetch as any).restore();\n});\n\nexport const mockGET = (endpoint: RegExp, body: any, headers: any = {}) => {\n  gets.push({ endpoint, body, headers });\n};\n\nexport const mockPOST = (endpoint: RegExp, body: any, headers: any = {}) => {\n  posts.push({ endpoint, body, headers });\n};\n\nexport const checkTimers = (clock: any) => {\n  expect(\n    Object.keys(clock.timers).length,\n    `Timers still to be run ${JSON.stringify(clock.timers)}`\n  ).to.equal(0);\n};\n\nexport const delay = (millis: number) => {\n  return new Promise(function (resolve) {\n    setTimeout(resolve, millis);\n  });\n};\n\nexport const assertScreenshot = async (\n  filename: string,\n  clip: Clip,\n  threshold = 0.1,\n  exclude: Clip[] = []\n) => {\n  // const screenShotsEnabled = !!__karma__.config.args.find(\n  // (option: string) => option === '--screenshots'\n  // );\n\n  await (window as any).waitFor(200);\n\n  // console.log((window as any).watched);\n  if ((window as any).watched) {\n    // return;\n  }\n\n  const mochaUI = document.querySelector('#mocha');\n  mochaUI.classList.add('screenshots');\n\n  try {\n    await (window as any).matchPageSnapshot(\n      `${filename}.png`,\n      clip,\n      exclude,\n      threshold\n    );\n  } catch (error) {\n    if (error.message) {\n      throw new Error(\n        `${error.message} ${\n          error.expected\n            ? `Expected ${error.expected} but got ${error.actual}`\n            : ''\n        } ${error.files ? `\\n${error.files.join('\\n')}` : ''}`\n      );\n    }\n    throw new Error(error);\n  } finally {\n    mochaUI.classList.remove('screenshots');\n  }\n};\n\nexport const getClip = (ele: HTMLElement) => {\n  let clip: any = ele.getBoundingClientRect();\n  if (!clip.width || !clip.height) {\n    clip = ele.shadowRoot.firstElementChild.getBoundingClientRect();\n  }\n\n  const padding = 10;\n  const width = clip.width + padding * 2;\n  const height = clip.height + padding * 2;\n  const y = clip.y - padding;\n  const x = clip.x - padding;\n\n  const newClip = {\n    x,\n    y,\n    width,\n    height,\n    bottom: y + height,\n    right: x + width,\n    top: y,\n    left: x,\n  };\n\n  return newClip;\n};\n\nexport const getHTMLAttrs = (attrs: any = {}) => {\n  return Object.keys(attrs)\n    .map((name: string) => `${name}='${attrs[name]}'`)\n    .join(' ');\n};\n\nexport const getHTML = (tag: string, attrs: any = {}) => {\n  return `<${tag} ${getHTMLAttrs(attrs)}></${tag}>`;\n};\n\nexport const loadStore = async () => {\n  const store: Store = await fixture(\n    `<temba-store \n      completion='/test-assets/store/editor.json'\n      groups='/test-assets/store/groups.json'\n      languages='/test-assets/store/languages.json'\n      fields='/test-assets/store/fields.json'\n    />`\n  );\n  await store.httpComplete;\n  await store.httpComplete;\n\n  return store;\n};\n"]}
+{"version":3,"file":"utils.test.js","sourceRoot":"","sources":["../../test/utils.test.ts"],"names":[],"mappings":"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","sourcesContent":["import '../temba-modules';\nimport { DateTime } from 'luxon';\nimport * as sinon from 'sinon';\ninterface Clip {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\nimport { stub } from 'sinon';\nimport { expect, fixture, html, assert } from '@open-wc/testing';\nimport MouseHelper from './MouseHelper';\nimport { Store } from '../src/store/Store';\n\nexport interface CodeMock {\n  endpoint: RegExp;\n  body: string;\n  headers: any;\n}\n\nconst gets: CodeMock[] = [];\nconst posts: CodeMock[] = [];\nlet normalFetch;\n\nexport const showMouse = async () => {\n  const mouse = await fixture(html`<mouse-helper />`);\n  assert.instanceOf(mouse, MouseHelper);\n};\n\nexport const getAttributes = (attrs: any = {}) => {\n  return `${Object.keys(attrs)\n    .map((name: string) => {\n      if (typeof attrs[name] === 'boolean' && attrs[name]) {\n        return name;\n      }\n      return `${name}='${attrs[name]}'`;\n    })\n    .join(' ')}`;\n};\n\nexport const getComponent = async (\n  tag,\n  attrs: any = {},\n  slot = '',\n  width = 250,\n  height = 0,\n  style = ''\n) => {\n  const spec = `<${tag} ${getAttributes(attrs)}>${slot}</${tag}>`;\n  const parentNode = document.createElement('div');\n  const styleAttribute = `\n    ${width > 0 ? `width:${width}px;` : ``} \n    ${height > 0 ? `height:${height}px;` : ``}\n    ${style ? style : ``}\n  `;\n\n  parentNode.setAttribute('style', styleAttribute);\n  return await fixture(spec, { parentNode });\n};\n\nconst createResponse = mocked => {\n  const mockResponse = new window.Response(mocked.body, {\n    status: 200,\n    headers: {\n      'Content-type': 'text/html',\n      ...mocked.headers,\n    },\n  });\n\n  return Promise.resolve(mockResponse);\n};\n\nconst createJSONResponse = mocked => {\n  const mockResponse = new window.Response(JSON.stringify(mocked.body), {\n    status: 200,\n    headers: {\n      'Content-type': 'application/json',\n      ...mocked.headers,\n    },\n  });\n\n  return Promise.resolve(mockResponse);\n};\n\nconst getResponse = (endpoint: string, options) => {\n  // check if our path has been mocked in code\n  const mocks = options.method === 'GET' ? gets : posts;\n  const codeMock = mocks.find(mock => mock.endpoint.test(endpoint));\n\n  if (codeMock) {\n    if (typeof codeMock.body === 'string') {\n      // see if we are being mocked to a file\n      if (codeMock.body.startsWith('/')) {\n        endpoint = codeMock.body;\n      } else {\n        return createResponse(codeMock);\n      }\n    } else {\n      return createJSONResponse(codeMock);\n    }\n  }\n\n  // otherwise fetch over http\n  return normalFetch(endpoint, options);\n};\n\nbefore(async () => {\n  normalFetch = window.fetch;\n  stub(window, 'fetch').callsFake(getResponse);\n  await setViewport({ width: 1024, height: 768, deviceScaleFactor: 2 });\n});\n\nafter(() => {\n  (window.fetch as any).restore();\n});\n\nexport const mockGET = (endpoint: RegExp, body: any, headers: any = {}) => {\n  gets.push({ endpoint, body, headers });\n};\n\nexport const mockPOST = (endpoint: RegExp, body: any, headers: any = {}) => {\n  posts.push({ endpoint, body, headers });\n};\n\nexport const checkTimers = (clock: any) => {\n  expect(\n    Object.keys(clock.timers).length,\n    `Timers still to be run ${JSON.stringify(clock.timers)}`\n  ).to.equal(0);\n};\n\nexport const delay = (millis: number) => {\n  return new Promise(function (resolve) {\n    setTimeout(resolve, millis);\n  });\n};\n\nexport const assertScreenshot = async (\n  filename: string,\n  clip: Clip,\n  threshold = 0.1,\n  exclude: Clip[] = []\n) => {\n  // const screenShotsEnabled = !!__karma__.config.args.find(\n  // (option: string) => option === '--screenshots'\n  // );\n\n  await (window as any).waitFor(200);\n\n  // console.log((window as any).watched);\n  if ((window as any).watched) {\n    // return;\n  }\n\n  const mochaUI = document.querySelector('#mocha');\n  mochaUI.classList.add('screenshots');\n\n  try {\n    await (window as any).matchPageSnapshot(\n      `${filename}.png`,\n      clip,\n      exclude,\n      threshold\n    );\n  } catch (error) {\n    if (error.message) {\n      throw new Error(\n        `${error.message} ${\n          error.expected\n            ? `Expected ${error.expected} but got ${error.actual}`\n            : ''\n        } ${error.files ? `\\n${error.files.join('\\n')}` : ''}`\n      );\n    }\n    throw new Error(error);\n  } finally {\n    mochaUI.classList.remove('screenshots');\n  }\n};\n\nexport const getClip = (ele: HTMLElement) => {\n  let clip: any = ele.getBoundingClientRect();\n  if (!clip.width || !clip.height) {\n    clip = ele.shadowRoot.firstElementChild.getBoundingClientRect();\n  }\n\n  const padding = 10;\n  const width = clip.width + padding * 2;\n  const height = clip.height + padding * 2;\n  const y = clip.y - padding;\n  const x = clip.x - padding;\n\n  const newClip = {\n    x,\n    y,\n    width,\n    height,\n    bottom: y + height,\n    right: x + width,\n    top: y,\n    left: x,\n  };\n\n  return newClip;\n};\n\nexport const getHTMLAttrs = (attrs: any = {}) => {\n  return Object.keys(attrs)\n    .map((name: string) => `${name}='${attrs[name]}'`)\n    .join(' ');\n};\n\nexport const getHTML = (tag: string, attrs: any = {}) => {\n  return `<${tag} ${getHTMLAttrs(attrs)}></${tag}>`;\n};\n\nexport const loadStore = async () => {\n  const store: Store = await fixture(\n    `<temba-store \n      completion='/test-assets/store/editor.json'\n      groups='/test-assets/store/groups.json'\n      languages='/test-assets/store/languages.json'\n      fields='/test-assets/store/fields.json'\n    />`\n  );\n  await store.httpComplete;\n  await store.httpComplete;\n\n  return store;\n};\n\nexport const mockNow = (isodate: string) => {\n  const now = DateTime.fromISO(isodate);\n  // mock the current time\n  sinon.replace(DateTime, 'now', () => {\n    return now;\n  });\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.35.0",
+  "version": "0.35.2",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/src/contacts/ContactPending.ts

@@ -1,6 +1,10 @@
 import { css, html, PropertyValueMap, TemplateResult } from 'lit';
 import { property } from 'lit/decorators';
-import { ScheduledEvent, ScheduledEventType } from '../interfaces';
+import {
+  CustomEventType,
+  ScheduledEvent,
+  ScheduledEventType,
+} from '../interfaces';
 import { StoreElement } from '../store/StoreElement';
 import { Icon } from '../vectoricon';
 
@@ -92,6 +96,12 @@ export class ContactPending extends StoreElement {
           0 0 0px 1px rgba(0, 0, 0, 0.02);
       }
 
+      .event:hover {
+        cursor: pointer;
+        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),
+          0 0 0px 2px var(--color-link-primary);
+      }
+
       .time {
         white-space: nowrap;
         background: rgba(0, 0, 0, 0.02);
@@ -128,18 +138,17 @@ export class ContactPending extends StoreElement {
         margin-right: 0.25em;
       }
 
-      .campaign_event .scheduled-by:hover {
-        color: var(--color-link-primary);
-        --icon-color: var(--color-link-primary);
-        cursor: pointer;
-      }
-
       .scheduled-by .name {
         flex-grow: 1;
       }
     `;
   }
 
+  constructor() {
+    super();
+    this.handleEventClicked = this.handleEventClicked.bind(this);
+  }
+
   protected updated(
     changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
   ): void {
@@ -153,52 +162,47 @@ export class ContactPending extends StoreElement {
     }
   }
 
-  public renderEvent(event: ScheduledEvent) {
+  public handleEventClicked(event: ScheduledEvent) {
+    this.fireCustomEvent(CustomEventType.Selection, event);
+  }
+
+  public renderEvent(scheduledEvent: ScheduledEvent) {
     return html`
-      <div class="event ${event.type}">
+      <div
+        class="event ${scheduledEvent.type}"
+        @click="${() => this.handleEventClicked(scheduledEvent)}"
+      >
         <div class="type">
           <temba-icon
             size="2"
-            name="${event.message ? Icon.message : Icon.flow}"
+            name="${scheduledEvent.message ? Icon.message : Icon.flow}"
           ></temba-icon>
         </div>
 
         <div class="details">
           <div>
-            ${event.flow
-              ? html`
-                  <div
-                    class="flow linked"
-                    href="/flow/editor/${event.flow.uuid}/"
-                    onclick="goto(event)"
-                  >
-                    ${event.flow.name}
-                  </div>
-                `
+            ${scheduledEvent.flow
+              ? html` Start ${scheduledEvent.flow.name}`
               : null}
-            ${event.message
-              ? html` <div class="message">${event.message}</div> `
+            ${scheduledEvent.message
+              ? html` <div class="message">${scheduledEvent.message}</div> `
               : null}
           </div>
 
           <div class="scheduled-by">
-            ${event.campaign
-              ? html`<div
-                  style="display:flex"
-                  href="/campaign/read/${event.campaign.uuid}/"
-                  onclick="goto(event, this)"
-                >
+            ${scheduledEvent.campaign
+              ? html`<div style="display:flex">
                   <temba-icon name="${Icon.campaign}"></temba-icon>
-                  <div class="name">${event.campaign.name}</div>
+                  <div class="name">${scheduledEvent.campaign.name}</div>
                 </div>`
               : html`
-                  ${event.type === ScheduledEventType.ScheduledTrigger
+                  ${scheduledEvent.type === ScheduledEventType.ScheduledTrigger
                     ? html`<temba-icon
-                        name="${ICONS[event.type]}"
+                        name="${ICONS[scheduledEvent.type]}"
                       ></temba-icon>`
                     : null}
                   <div class="name">
-                    ${this.REPEAT_PERIOD[event.repeat_period]}
+                    ${this.REPEAT_PERIOD[scheduledEvent.repeat_period]}
                   </div>
                 `}
           </div>
@@ -207,10 +211,10 @@ export class ContactPending extends StoreElement {
         <div class="time">
           <div class="duration">
             <temba-tip
-              text=${this.store.formatDate(event.scheduled)}
+              text=${this.store.formatDate(scheduledEvent.scheduled)}
               position="left"
             >
-              ${this.store.getShortDurationFromIso(event.scheduled)}
+              ${this.store.getShortDurationFromIso(scheduledEvent.scheduled)}
             </temba-tip>
           </div>
         </div>

package/src/contacts/events.ts

@@ -239,8 +239,8 @@ export const getEventStyles = () => {
     .tickets .note-summary {
       display: flex;
       flex-direction: row;
-      line-height: 0.5;
-      font-size: 80%;
+      font-size: 85%;
+      margin-top: -0.5em;
       color: rgba(0, 0, 0, 0.6);
       padding: 8px 3px;
     }
@@ -310,12 +310,11 @@ export const getEventStyles = () => {
 
     .msg-summary {
       display: flex;
-      line-height: 0.5;
-
-      font-size: 80%;
+      font-size: 85%;
       color: rgba(0, 0, 0, 0.6);
       padding: 6px 3px;
       margin-bottom: 0.5em;
+      margin-top: -0.5em;
     }
 
     .msg-summary temba-icon.log {
@@ -776,7 +775,11 @@ export const renderMsgEvent = (
       <div class="separator">•</div>`);
   }
   summary.push(
-    html`<div class="time">${timeSince(new Date(event.created_on))}</div>`
+    html`<temba-date
+      class="time"
+      value="${event.created_on}"
+      display="duration"
+    ></temba-date>`
   );
 
   return html`<div style="display:flex;align-items:flex-start">
@@ -938,7 +941,11 @@ export const renderNoteCreated = (
       <div class="description">${event.note}</div>
       <div class="note-summary">
         <div style="flex-grow:1"></div>
-        <div class="time">${timeSince(new Date(event.created_on))}</div>
+        <temba-date
+          class="time"
+          value="${event.created_on}"
+          display="duration"
+        ></temba-date>
       </div>
     </div>
     <div style="margin-left:0.8em;margin-top:0.3em;font-size:0.8em">
@@ -986,14 +993,17 @@ export const renderTicketAction = (
         ${getDisplayName(event.created_by)} ${action} this ticket
       </div>
       <div class="subtext" style="justify-content:center">
-        ${timeSince(reopened, { hideRecentText: true, suffix: ' ago' })}
+        <temba-date
+          class="time"
+          value="${reopened}"
+          display="duration"
+        ></temba-date>
       </div>
     </div>
   `;
 };
 
 export const renderTicketAssigned = (event: TicketEvent): TemplateResult => {
-  const created = new Date(event.created_on);
   return html`
     <div class="assigned active">
       <div style="text-align:center">
@@ -1005,7 +1015,11 @@ export const renderTicketAssigned = (event: TicketEvent): TemplateResult => {
           : html`${getDisplayName(event.created_by)} unassigned this ticket`}
       </div>
       <div class="subtext" style="justify-content:center">
-        ${timeSince(created, { hideRecentText: true, suffix: ' ago' })}
+        <temba-date
+          class="time"
+          value="${event.created_on}"
+          display="duration"
+        ></temba-date>
       </div>
     </div>
   `;

package/src/date/TembaDate.ts

@@ -7,7 +7,11 @@ import { DateTime } from 'luxon';
 export const Display = {
   date: DateTime.DATE_SHORT,
   datetime: DateTime.DATETIME_SHORT,
+  time: DateTime.TIME_SIMPLE,
+  timedate: 'timedate',
   duration: 'duration',
+  relative: 'relative',
+  day: 'LLL d',
 };
 
 export class TembaDate extends RapidElement {
@@ -48,19 +52,44 @@ export class TembaDate extends RapidElement {
   }
 
   public render(): TemplateResult {
-    if (this.datetime) {
-      if (this.display === Display.duration) {
-        return html`<div class="date">
-          ${this.store.getShortDuration(this.datetime)}
-        </div>`;
+    if (this.datetime && this.store) {
+      this.datetime.setLocale(this.store.getLocale());
+
+      let formatted = '';
+      if (this.display === Display.timedate) {
+        const hours = Math.abs(
+          this.datetime.diffNow().milliseconds / 1000 / 60 / 60
+        );
+        if (hours < 24) {
+          formatted = this.datetime.toLocaleString(Display.time);
+        } else if (hours < 24 * 365) {
+          formatted = this.datetime.toFormat(Display.day);
+        } else {
+          formatted = this.datetime.toLocaleString(Display.date);
+        }
+      } else if (this.display === Display.relative) {
+        const minutes = Math.abs(
+          this.datetime.diffNow().milliseconds / 1000 / 60
+        );
+        if (minutes < 1) {
+          return html`<div class="date">just now</div>`;
+        }
+
+        formatted = this.store.getShortDuration(this.datetime);
+      } else if (this.display === Display.duration) {
+        const minutes = Math.abs(
+          this.datetime.diffNow().milliseconds / 1000 / 60
+        );
+        if (minutes < 1) {
+          return html`<div class="date">just now</div>`;
+        }
+        formatted = this.store.getShortDuration(this.datetime);
+      } else if (this.display === Display.day) {
+        formatted = this.datetime.toLocaleString(Display.day);
       } else {
-        return html`
-          <div class="date">
-            ${this.datetime.toLocaleString(Display[this.display])}
-          </div>
-        `;
+        formatted = this.datetime.toLocaleString(Display[this.display]);
       }
+      return html`<div class="date">${formatted}</div>`;
     }
-    return null;
   }
 }

package/src/dropdown/Dropdown.ts

@@ -5,10 +5,19 @@ import { RapidElement } from '../RapidElement';
 export class Dropdown extends RapidElement {
   static get styles() {
     return css`
+      .wrapper {
+        position: relative;
+      }
+
       .toggle {
         cursor: pointer;
       }
 
+      .dropdown-wrapper {
+        position: relative;
+        overflow: auto;
+      }
+
       .dropdown {
         position: absolute;
         opacity: 0;
@@ -52,6 +61,9 @@ export class Dropdown extends RapidElement {
   @property({ type: Boolean })
   open = false;
 
+  @property({ type: String, attribute: 'drop_align' })
+  dropAlign = 'left';
+
   @property({ type: Number })
   arrowSize = 6;
 
@@ -96,6 +108,8 @@ export class Dropdown extends RapidElement {
       // a better way to deal with this
       window.setTimeout(() => {
         this.open = false;
+        // blur our host element too
+        (this.shadowRoot.host as HTMLDivElement).blur();
       }, 200);
     });
   }
@@ -111,7 +125,7 @@ export class Dropdown extends RapidElement {
     }
   }
 
-  public handleOpen(): void {
+  public handleToggleClicked(): void {
     if (!this.open) {
       this.open = true;
 
@@ -124,11 +138,21 @@ export class Dropdown extends RapidElement {
 
   public render(): TemplateResult {
     return html`
-      <div class=${this.open ? 'open' : ''}>
-        <slot name="toggle" class="toggle" @click="${this.handleOpen}"></slot>
-        <div class="dropdown" tabindex="0">
+      <div class="wrapper ${this.open ? 'open' : ''}">
+        <slot
+          name="toggle"
+          class="toggle"
+          @click="${this.handleToggleClicked}"
+        ></slot>
+        <div
+          class="dropdown"
+          tabindex="0"
+          style="${this.dropAlign == 'right' ? 'right:0' : ''}"
+        >
           <div class="arrow"></div>
-          <slot name="dropdown"></slot>
+          <div class="dropdown-wrapper">
+            <slot name="dropdown" tabindex="1"></slot>
+          </div>
         </div>
       </div>
     `;

package/src/list/RunList.ts

@@ -141,7 +141,7 @@ export class RunList extends TembaList {
           </div>
 
           <div style="flex-shrink:1">
-            ${this.store.getShortDurationFromIso(run.modified_on)}
+            <temba-date value="${run.modified_on}" display="duration" />
           </div>
           ${this.getIcon(run)}
         </div>
@@ -227,7 +227,6 @@ export class RunList extends TembaList {
       return null;
     }
 
-    const exitType = this.selectedRun.exit_type;
     const resultKeys = Object.keys(this.selectedRun.values);
 
     return html` <div
@@ -251,35 +250,25 @@ export class RunList extends TembaList {
             >
               ${this.selectedRun.exit_type
                 ? html`
-                    ${this.getIcon(this.selectedRun)}
-                    <div style="margin-left:0.5em;flex-grow:1">
-                      ${capitalize(this.selectedRun.exit_type)}
-                      ${exitType == 'completed'
-                        ? html` in
-                          ${this.store.getShortDurationFromIso(
-                            this.selectedRun.created_on,
-                            this.selectedRun.exited_on,
-                            true
-                          )}`
-                        : null}
-                      ${exitType == 'interrupted' || exitType == 'expired'
-                        ? html` after
-                          ${this.store.getShortDurationFromIso(
-                            this.selectedRun.created_on,
-                            this.selectedRun.exited_on,
-                            true
-                          )}`
-                        : null}
+                    <div style="margin-left:2em;flex-grow:1;display:flex">
+                      ${this.getIcon(this.selectedRun)}
+                      <div style="margin-left:0.5em">
+                        ${capitalize(this.selectedRun.exit_type)}&nbsp;
+                      </div>
+                      <temba-date
+                        value="${this.selectedRun.exited_on}"
+                        compare="${this.selectedRun.created_on}"
+                        display="duration"
+                      />
                     </div>
                   `
                 : html`${this.getIcon(this.selectedRun)}
-                    <div style="margin-left:0.5em;flex-grow:1">
-                      Active for
-                      ${this.store.getShortDurationFromIso(
-                        this.selectedRun.created_on,
-                        null,
-                        true
-                      )}
+                    <div style="margin-left:1.5em;flex-grow:1;display:flex">
+                      <div>Started&nbsp;</div>
+                      <temba-date
+                        value="${this.selectedRun.created_on}"
+                        display="duration"
+                      />
                     </div>`}
             </div>
           </div>

package/src/store/Store.ts

@@ -74,6 +74,10 @@ export class Store extends RapidElement {
 
   private cache: any;
 
+  public getLocale() {
+    return this.locale[0];
+  }
+
   public reset() {
     this.cache = Lru(this.max, this.ttl);
 
@@ -192,41 +196,17 @@ export class Store extends RapidElement {
     });
   }
 
-  public getShortDuration(
-    scheduled: DateTime,
-    compareDate: DateTime = null,
-    showSeconds = false
-  ) {
+  public getShortDuration(scheduled: DateTime, compareDate: DateTime = null) {
     const now = compareDate || 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,
-      round: false,
-    });
+    return scheduled
+      .setLocale(this.locale[0])
+      .toRelative({ base: now, style: 'long' });
   }
 
-  public getShortDurationFromIso(
-    isoDateA: string,
-    isoDateB: string = null,
-    showSeconds = false
-  ) {
+  public getShortDurationFromIso(isoDateA: string, isoDateB: string = null) {
     const scheduled = DateTime.fromISO(isoDateA);
     const now = isoDateB ? DateTime.fromISO(isoDateB) : DateTime.now();
-    return this.getShortDuration(scheduled, now, showSeconds);
+    return this.getShortDuration(scheduled, now);
   }
 
   public setKeyedAssets(name: string, values: string[]): void {
@@ -278,13 +258,9 @@ export class Store extends RapidElement {
   }
 
   public formatDate(dateString: string) {
-    return new Date(dateString).toLocaleString(this.locale, {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-      hour: 'numeric',
-      minute: 'numeric',
-    });
+    return DateTime.fromISO(dateString)
+      .setLocale(this.getLocale())
+      .toLocaleString(DateTime.DATETIME_SHORT);
   }
 
   public postUrl(

package/src/vectoricon/index.ts

@@ -1,4 +1,5 @@
 export enum Icon {
+  analytics = 'bar-chart-01',
   account = 'user-01',
   active = 'play',
   add_note = 'file-02',
@@ -55,9 +56,11 @@ export enum Icon {
   org_new = 'stars-02',
   org_suspended = 'slash-circle-01',
   org_verified = 'check-verified-02',
+  overview = 'pie-chart-01',
   featured = 'star-01',
   resthooks = 'share-07',
   restore = 'play',
+  runs = 'rows-03',
   search = 'search-refraction',
   select_open = 'chevron-down',
   select_clear = 'x',