@nyaruka/temba-components 0.122.0 → 0.123.0

package/src/chart/TembaChart.ts

@@ -6,35 +6,66 @@ import { Select, SelectOption } from '../select/Select';
 import { getClasses } from '../utils';
 import { getStore } from '../store/Store';
 
+// eslint-disable-next-line import/no-named-as-default
 import Chart, { ChartType } from 'chart.js/auto';
 import 'chartjs-adapter-luxon';
 
 const colors = [
+  'rgba(54, 162, 235, 0.2)',
   'rgba(255, 159, 64, 0.2)',
   'rgba(75, 192, 192, 0.2)',
-  'rgba(54, 162, 235, 0.2)',
   'rgba(153, 102, 255, 0.2)',
   'rgba(255, 205, 86, 0.2)',
-  'rgba(255, 99, 132, 0.2)',
-  'rgba(201, 203, 207, 0.2)'
+  'rgba(255, 99, 132, 0.2)'
 ];
 
 const colorsBorder = [
+  'rgb(54, 162, 235)',
   'rgb(255, 159, 64)',
   'rgb(75, 192, 192)',
-  'rgb(54, 162, 235)',
   'rgb(153, 102, 255)',
   'rgb(255, 205, 86)',
-  'rgb(255, 99, 132)',
-  'rgb(201, 203, 207)'
+  'rgb(255, 99, 132)'
 ];
 
-const allBorderColor = 'rgb(54, 162, 235)';
-const allBackgroundColor = 'rgba(54, 162, 235, 0.2)';
-
 const otherBackgroundColor = 'rgba(201, 203, 207, 0.2)';
 const otherBorderColor = 'rgb(201, 203, 207)';
 
+/**
+ * Formats a duration in seconds to a human-readable string showing the two largest units.
+ * Examples: 68787 -> "19h 6m", 958000 -> "11d 2h", 3661 -> "1h 1m"
+ */
+export function formatDurationFromSeconds(seconds: number): string {
+  if (seconds === 0) {
+    return '0s';
+  }
+
+  const totalDays = Math.floor(seconds / 86400);
+  const remainingAfterDays = seconds % 86400;
+  const remainingHours = Math.floor(remainingAfterDays / 3600);
+  const remainingAfterHours = remainingAfterDays % 3600;
+  const remainingMinutes = Math.floor(remainingAfterHours / 60);
+  const remainingSeconds = remainingAfterHours % 60;
+
+  const units = [];
+
+  if (totalDays > 0) {
+    units.push(`${totalDays}d`);
+  }
+  if (remainingHours > 0) {
+    units.push(`${remainingHours}h`);
+  }
+  if (remainingMinutes > 0 && units.length < 2) {
+    units.push(`${remainingMinutes}m`);
+  }
+  if (remainingSeconds > 0 && units.length < 2) {
+    units.push(`${remainingSeconds}s`);
+  }
+
+  // Return the first two most significant units
+  return units.slice(0, 2).join(' ');
+}
+
 export interface RapidChartData {
   labels: string[];
   datasets: { label: string; data: number[] }[];
@@ -68,9 +99,21 @@ export class TembaChart extends RapidElement {
   @property({ type: String })
   dataname = 'Counts';
 
+  @property({ type: Boolean })
+  single: boolean = false;
+
+  @property({ type: Boolean })
+  legend: boolean = false;
+
   @property({ type: Boolean })
   config: boolean = false;
 
+  @property({ type: Boolean })
+  formatDuration: boolean = false;
+
+  @property({ type: Number })
+  colorIndex: number = 0;
+
   @state()
   showConfig: boolean = false;
 
@@ -180,8 +223,12 @@ export class TembaChart extends RapidElement {
         } else {
           datasets.push({
             ...dataset,
-            backgroundColor: colors[datasets.length % colors.length],
-            borderColor: colorsBorder[datasets.length % colorsBorder.length],
+            backgroundColor:
+              colors[(datasets.length + this.colorIndex) % colors.length],
+            borderColor:
+              colorsBorder[
+                (datasets.length + this.colorIndex) % colorsBorder.length
+              ],
             borderWidth: 1
           });
         }
@@ -189,10 +236,10 @@ export class TembaChart extends RapidElement {
 
       if (datasets.length === 0) {
         datasets.push({
-          label: `All ${this.dataname}`,
+          label: this.single ? this.dataname : `All ${this.dataname}`,
           data: sums,
-          backgroundColor: allBackgroundColor,
-          borderColor: allBorderColor,
+          backgroundColor: colors[this.colorIndex % colors.length],
+          borderColor: colorsBorder[this.colorIndex % colorsBorder.length],
           borderWidth: 1
         });
       } else {
@@ -222,6 +269,23 @@ export class TembaChart extends RapidElement {
             datasets: this.datasets
           },
           options: {
+            plugins: {
+              legend: {
+                display: this.legend
+              },
+              ...(this.formatDuration && {
+                tooltip: {
+                  callbacks: {
+                    label: (context: any) => {
+                      const label = context.dataset.label || '';
+                      const value = context.parsed.y;
+                      const formattedValue = formatDurationFromSeconds(value);
+                      return `${label}: ${formattedValue}`;
+                    }
+                  }
+                }
+              })
+            },
             responsive: true,
             maintainAspectRatio: false,
             animation: {
@@ -240,7 +304,14 @@ export class TembaChart extends RapidElement {
             scales: {
               y: {
                 min: 0,
-                stacked: true
+                stacked: true,
+                ...(this.formatDuration && {
+                  ticks: {
+                    callback: (value: any) => {
+                      return formatDurationFromSeconds(value);
+                    }
+                  }
+                })
               },
               x: {
                 type: 'time',

package/src/list/RunList.ts

@@ -155,8 +155,8 @@ export class RunList extends TembaList {
             style="width:16em;white-space:nowrap;overflow: hidden; text-overflow: ellipsis;"
           >
             <temba-contact-name
-              name=${run.contact.name || run.contact.anon_display}
-              urn=${run.contact.urn}
+              name=${run.contact?.name || run.contact?.anon_display || ''}
+              urn=${run.contact?.urn || ''}
               icon-size="15"
             />
           </div>
@@ -255,7 +255,7 @@ export class RunList extends TembaList {
       return null;
     }
 
-    const resultKeys = Object.keys(this.selectedRun.values);
+    const resultKeys = Object.keys(this.selectedRun.values || {});
 
     return html` <div
       style="margin-top: 1.5em; margin-bottom:0.5em;flex-grow:1;border-radius:var(--curvature); border: 1px solid var(--color-widget-border);"
@@ -267,11 +267,12 @@ export class RunList extends TembaList {
           <div>
             <temba-contact-name
               style="cursor:pointer"
-              name=${this.selectedRun.contact.name ||
-              this.selectedRun.contact.anon_display}
-              urn=${this.selectedRun.contact.urn}
+              name=${this.selectedRun.contact?.name ||
+              this.selectedRun.contact?.anon_display ||
+              ''}
+              urn=${this.selectedRun.contact?.urn || ''}
               onclick="goto(event, this)"
-              href="/contact/read/${this.selectedRun.contact.uuid}/"
+              href="/contact/read/${this.selectedRun.contact?.uuid || ''}/"
             ></temba-contact-name>
             <div
               style="display:flex;margin-left:-0.2em;margin-top:0.25em;font-size: 0.65em"
@@ -303,7 +304,9 @@ export class RunList extends TembaList {
           <div style="flex-grow:1"></div>
           <div style="display:flex;flex-direction: column">
             <div style="font-size:0.75em">
-              ${new Date(this.selectedRun.created_on).toLocaleString()}
+              ${this.selectedRun.created_on
+                ? new Date(this.selectedRun.created_on).toLocaleString()
+                : ''}
             </div>
             <div
               style="font-size:0.6em;align-self:flex-end;color:#888;line-height:0.75em"

package/src/locales/es.ts

@@ -6,6 +6,7 @@
 
 export const templates = {
   scf1453991c986b25: `Tab para completar, enter para seleccionar`,
+  s73b4d70c02f4b4e0: `No options`,
   s8f02e3a18ffc083a: `Are not currently in a flow`,
   s638236250662c6b3: `Have sent a message in the last`,
   s4788ee206c4570c7: `Have not started this flow in the last 90 days`

package/src/locales/fr.ts

@@ -5,6 +5,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 export const templates = {
+  s73b4d70c02f4b4e0: `No options`,
   scf1453991c986b25: `Tab to complete, enter to select`,
   s8f02e3a18ffc083a: `Are not currently in a flow`,
   s638236250662c6b3: `Have sent a message in the last`,

package/src/locales/pt.ts

@@ -5,6 +5,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 export const templates = {
+  s73b4d70c02f4b4e0: `No options`,
   scf1453991c986b25: `Tab to complete, enter to select`,
   s8f02e3a18ffc083a: `Are not currently in a flow`,
   s638236250662c6b3: `Have sent a message in the last`,

package/src/options/Options.ts

@@ -4,6 +4,7 @@ import { CustomEventType } from '../interfaces';
 import { RapidElement, EventHandler } from '../RapidElement';
 import { styleMap } from 'lit-html/directives/style-map.js';
 import { getClasses, getScrollParent, throttle } from '../utils';
+import { msg } from '@lit/localize';
 
 export class Options extends RapidElement {
   static get styles() {
@@ -177,6 +178,15 @@ export class Options extends RapidElement {
         background: var(--color-selection);
         color: var(--color-text-dark);
       }
+
+      .option.no-options {
+        pointer-events: none;
+      }
+
+      .option.no-options:hover {
+        background: transparent;
+        color: var(--color-text-dark-secondary);
+      }
     `;
   }
 
@@ -276,6 +286,9 @@ export class Options extends RapidElement {
   @property({ type: Boolean })
   triggerScroll = false;
 
+  @property({ type: Boolean })
+  showEmptyMessage = false;
+
   scrollParent: HTMLElement = null;
 
   resolvedRenderOption: { (option: any, selected: boolean): TemplateResult };
@@ -675,19 +688,31 @@ export class Options extends RapidElement {
       <div class=${classes} style=${styleMap(containerStyle)}>
         <div class="options-scroll" @scroll=${this.handleInnerScroll}>
           <div class="${classesInner}" style=${styleMap(optionsStyle)}>
-            ${options.map((option, index) => {
-              return html`<div
-                data-option-index="${index}"
-                @mousemove=${this.handleMouseMove}
-                @mousedown=${this.handleOptionClick}
-                class="option ${index === this.cursorIndex &&
-                !this.internalFocusDisabled
-                  ? 'focused'
-                  : ''}"
-              >
-                ${this.resolvedRenderOption(option, index === this.cursorIndex)}
-              </div>`;
-            })}
+            ${options.length > 0
+              ? options.map((option, index) => {
+                  return html`<div
+                    data-option-index="${index}"
+                    @mousemove=${this.handleMouseMove}
+                    @mousedown=${this.handleOptionClick}
+                    class="option ${index === this.cursorIndex &&
+                    !this.internalFocusDisabled
+                      ? 'focused'
+                      : ''}"
+                  >
+                    ${this.resolvedRenderOption(
+                      option,
+                      index === this.cursorIndex
+                    )}
+                  </div>`;
+                })
+              : this.visible && this.showEmptyMessage
+              ? html`<div
+                  class="option no-options"
+                  style="color: var(--color-text-dark-secondary); cursor: default;"
+                >
+                  ${msg('No options')}
+                </div>`
+              : null}
             ${this.block ? html`<div style="height:0.1em"></div>` : null}
           </div>
           <slot></slot>

package/src/select/Select.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 import { TemplateResult, html, css, CSSResult, CSSResultArray } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import {
   getUrl,
   getClasses,
@@ -410,6 +410,9 @@ export class Select<T extends SelectOption> extends FormElement {
   @property({ type: Boolean })
   disabled = false;
 
+  @state()
+  attemptedOpen = false;
+
   @property({ attribute: false })
   selectedIndex = -1;
 
@@ -863,6 +866,7 @@ export class Select<T extends SelectOption> extends FormElement {
     }
 
     this.visibleOptions = [];
+    this.attemptedOpen = false;
     this.input = '';
     this.next = null;
     this.complete = true;
@@ -955,7 +959,9 @@ export class Select<T extends SelectOption> extends FormElement {
   }
 
   public isOpen(): boolean {
-    return this.visibleOptions.length > 0;
+    return (
+      this.visibleOptions.length > 0 || (this.attemptedOpen && this.focused)
+    );
   }
 
   public setOptions(options: any[]): void {
@@ -1212,6 +1218,7 @@ export class Select<T extends SelectOption> extends FormElement {
 
   private handleBlur() {
     this.focused = false;
+    this.attemptedOpen = false;
     if (this.visibleOptions.length > 0) {
       this.input = '';
       this.next = null;
@@ -1285,8 +1292,10 @@ export class Select<T extends SelectOption> extends FormElement {
     ) {
       if (
         this.visibleOptions.length === 0 &&
-        this.completionOptions.length === 0
+        this.completionOptions.length === 0 &&
+        !this.input
       ) {
+        this.attemptedOpen = true;
         this.requestUpdate('input');
         return;
       }
@@ -1322,6 +1331,7 @@ export class Select<T extends SelectOption> extends FormElement {
 
   private handleCancel() {
     this.visibleOptions = [];
+    this.attemptedOpen = false;
   }
 
   private handleCursorChanged(event: CustomEvent) {
@@ -1340,10 +1350,15 @@ export class Select<T extends SelectOption> extends FormElement {
         return;
       }
 
-      if (this.visibleOptions.length > 0) {
+      // Check if dropdown is currently open (either with options or showing "No options")
+      if (this.isOpen()) {
         this.visibleOptions = [];
+        this.attemptedOpen = false;
       } else {
+        this.attemptedOpen = true;
         this.requestUpdate('input');
+        // Also trigger an immediate update to show empty dropdown
+        this.requestUpdate();
       }
     }
   }
@@ -1461,6 +1476,17 @@ export class Select<T extends SelectOption> extends FormElement {
     this.requestUpdate('values', oldValues);
   }
 
+  private shouldShowEmptyMessage(): boolean {
+    return (
+      this.attemptedOpen &&
+      this.focused &&
+      this.visibleOptions.length === 0 &&
+      !this.input &&
+      this.staticOptions.length === 0 &&
+      !this.endpoint
+    );
+  }
+
   public render(): TemplateResult {
     const placeholder = this.values.length === 0 ? this.placeholder : '';
     const placeholderDiv = html`
@@ -1620,7 +1646,8 @@ export class Select<T extends SelectOption> extends FormElement {
     .getName=${this.getNameInternal}
     ?static-width=${this.optionWidth}
     ?anchor-right=${this.anchorRight}
-    ?visible=${this.visibleOptions.length > 0}
+    ?visible=${this.visibleOptions.length > 0 || this.shouldShowEmptyMessage()}
+    ?showEmptyMessage=${this.shouldShowEmptyMessage()}
     ></temba-options>
 
     <temba-options

package/src/store/AppState.ts

@@ -157,11 +157,11 @@ export const zustand = createStore<AppState>()(
       setFlowContents: (flow: FlowContents) => {
         set((state: AppState) => {
           const flowLang = flow.definition.language;
-          const languageCode = state.languageCode || flowLang;
           state.flowDefinition = flow.definition;
           state.flowInfo = flow.info;
-          state.isTranslating = flowLang !== languageCode;
-          state.languageCode = languageCode || flowLang;
+          // Reset to the flow's default language when loading a new flow
+          state.languageCode = flowLang;
+          state.isTranslating = false;
         });
       },
 

package/src/utils/index.ts

@@ -494,7 +494,7 @@ export const getScrollParent = (node: any): any => {
   return null;
 };
 
-export const isElementVisible = (el: any, holder: any) => {
+export const isElementVisible = (el: any, holder?: any) => {
   holder = holder || document.body;
   const { top, bottom } = el.getBoundingClientRect();
   const holderRect = holder.getBoundingClientRect();
@@ -575,7 +575,7 @@ export const timeSince = (
   }
 };
 
-export const isDate = (value: string): boolean => {
+export const isDate = (value: any): boolean => {
   if (toString.call(value) === '[object Date]') {
     return true;
   }
@@ -635,6 +635,10 @@ export const truncate = (input: string, max: number): string => {
 };
 
 export const oxford = (items: any[], joiner = 'and'): any => {
+  if (items.length === 0) {
+    return '';
+  }
+
   if (items.length === 1) {
     return items[0];
   }
@@ -657,7 +661,9 @@ export const oxford = (items: any[], joiner = 'and'): any => {
     });
   }
 
-  return items.join(', ') + joiner + items[items.length - 1];
+  const allButLast = items.slice(0, -1);
+  const last = items[items.length - 1];
+  return allButLast.join(', ') + ', ' + joiner + ' ' + last;
 };
 
 export const oxfordFn = (
@@ -713,13 +719,19 @@ export enum COOKIE_KEYS {
   TICKET_SHOW_DETAILS = 'tickets.show-details'
 }
 
-export const capitalize = ([first, ...rest], locale = navigator.language) =>
+export const capitalize = (
+  [first, ...rest]: string[] | string,
+  locale = navigator.language
+) =>
   first === undefined ? '' : first.toLocaleUpperCase(locale) + rest.join('');
 
 export const formatFileType = (type: string): string => {
   return type.split('/')[1];
 };
-export const formatFileSize = (bytes: number, decimalPoint: number): string => {
+export const formatFileSize = (
+  bytes: number,
+  decimalPoint?: number
+): string => {
   if (bytes == 0) return '0 KB';
   const k = 1024,
     dm = decimalPoint || 2,

package/src/vectoricon/VectorIcon.ts

@@ -127,9 +127,10 @@ export class VectorIcon extends LitElement {
 
       .spin-forever {
         animation-name: spin;
-        animation-duration: 2000ms;
+        animation-duration: var(--test-animation-duration, 2000ms);
         animation-iteration-count: infinite;
         animation-timing-function: linear;
+        animation-play-state: var(--test-animation-play-state, running);
       }
 
       @keyframes spin {

package/temba-modules.ts

@@ -58,7 +58,6 @@ import { MediaPicker } from './src/mediapicker/MediaPicker';
 import { Editor } from './src/flow/Editor';
 import { EditorNode } from './src/flow/EditorNode';
 import { ContactNotepad } from './src/contacts/ContactNotepad';
-import { OutboxMonitor } from './src/outboxmonitor/OutboxMonitor';
 import { ProgressBar } from './src/progress/ProgressBar';
 import { StartProgress } from './src/progress/StartProgress';
 import { ShortcutList } from './src/list/ShortcutList';
@@ -134,7 +133,6 @@ addCustomElement('temba-media-picker', MediaPicker);
 addCustomElement('temba-flow-editor', Editor);
 addCustomElement('temba-flow-node', EditorNode);
 addCustomElement('temba-contact-notepad', ContactNotepad);
-addCustomElement('temba-outbox-monitor', OutboxMonitor);
 addCustomElement('temba-progress', ProgressBar);
 addCustomElement('temba-start-progress', StartProgress);
 addCustomElement('temba-shortcuts', ShortcutList);