@nyaruka/temba-components 0.131.1 → 0.131.3

package/src/display/FloatingTab.ts

@@ -0,0 +1,174 @@
+import { css, html, PropertyValueMap, TemplateResult } from 'lit';
+import { property } from 'lit/decorators.js';
+import { RapidElement } from '../RapidElement';
+import { CustomEventType } from '../interfaces';
+import { getClasses } from '../utils';
+
+export class FloatingTab extends RapidElement {
+  static get styles() {
+    return css`
+      .tab.hidden {
+        transform: translateX(100%);
+      }
+      .tab {
+        position: fixed;
+        right: 0;
+        z-index: 9998;
+        transition: transform var(--transition-duration, 300ms) ease-in-out;
+        display: flex;
+        align-items: center;
+        padding: 12px;
+        border-top-left-radius: 8px;
+        border-bottom-left-radius: 8px;
+        cursor: pointer;
+        box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.2);
+        transition: all calc(var(--transition-duration, 300ms) * 0.7)
+          ease-in-out;
+        user-select: none;
+      }
+
+      .tab:hover {
+        padding-right: 16px;
+        box-shadow: -4px 4px 12px rgba(0, 0, 0, 0.3);
+      }
+
+      .icon-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+      }
+
+      temba-icon {
+        --icon-color: white;
+      }
+
+      .label {
+        color: white;
+        font-weight: 500;
+        font-size: 16px;
+        max-width: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        margin-left: 0;
+        opacity: 0;
+        transition: all var(--transition-duration, 300ms) ease-in-out;
+      }
+
+      .tab:hover .label {
+        max-width: 200px;
+        margin-left: 12px;
+        opacity: 1;
+      }
+    `;
+  }
+
+  static TAB_HEIGHT = 56; // height of tab for auto-stacking
+  static allTabs: FloatingTab[] = [];
+
+  @property({ type: String })
+  icon: string;
+
+  @property({ type: String })
+  label: string;
+
+  @property({ type: String })
+  color = '#6B7280';
+
+  @property({ type: Number })
+  top = -1; // -1 means auto-calculate position
+
+  @property({ type: Boolean })
+  hidden = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    FloatingTab.allTabs.push(this);
+    this.updatePosition();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    const index = FloatingTab.allTabs.indexOf(this);
+    if (index > -1) {
+      FloatingTab.allTabs.splice(index, 1);
+    }
+    // update positions of remaining tabs
+    FloatingTab.allTabs.forEach((tab) => tab.updatePosition());
+  }
+
+  private updatePosition() {
+    // if top is manually set, use it
+    if (this.top !== -1) {
+      return;
+    }
+
+    // auto-calculate position based on index
+    const index = FloatingTab.allTabs.indexOf(this);
+    if (index === -1) {
+      this.top = 100; // default fallback
+    } else {
+      // start at 100px and stack with 10px gap between tabs
+      this.top = 100 + index * (FloatingTab.TAB_HEIGHT + 10);
+    }
+  }
+
+  public updated(
+    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    super.updated(changes);
+    if (changes.has('hidden')) {
+      this.classList.toggle('hidden', this.hidden);
+    }
+    if (changes.has('top')) {
+      this.updatePosition();
+    }
+  }
+
+  private handleClick() {
+    // hide all tabs when one is clicked
+    FloatingTab.allTabs.forEach((tab) => {
+      tab.hidden = true;
+    });
+
+    this.fireCustomEvent(CustomEventType.ButtonClicked, {
+      action: 'toggle'
+    });
+  }
+
+  public static showAllTabs() {
+    FloatingTab.allTabs.forEach((tab) => {
+      tab.hidden = false;
+    });
+  }
+
+  public static hideAllTabs() {
+    FloatingTab.allTabs.forEach((tab) => {
+      tab.hidden = true;
+    });
+  }
+
+  public render(): TemplateResult {
+    const tabStyle = `
+      background-color: ${this.color};
+      top: ${this.top}px;
+    `;
+
+    const classes = getClasses({
+      tab: true,
+      hidden: this.hidden
+    });
+
+    return html`
+      <div class="${classes}" style="${tabStyle}" @click=${this.handleClick}>
+        <div class="icon-container">
+          ${this.icon
+            ? html`<temba-icon size="2" name="${this.icon}"></temba-icon>`
+            : ''}
+        </div>
+        <div class="label">${this.label}</div>
+      </div>
+    `;
+  }
+}

package/src/display/ProgressBar.ts

@@ -77,6 +77,15 @@ export class ProgressBar extends RapidElement {
       display: none;
     }
 
+    .meter.static > span:after {
+      display: none;
+      animation: none;
+    }
+
+    .meter.static > span {
+      background-image: none;
+    }
+
     @keyframes move {
       0% {
         background-position: 0 0;
@@ -154,6 +163,9 @@ export class ProgressBar extends RapidElement {
   @property({ type: String })
   message: string;
 
+  @property({ type: Boolean })
+  animated = true;
+
   public updated(
     changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
   ): void {
@@ -162,7 +174,7 @@ export class ProgressBar extends RapidElement {
       this.showEstimatedCompletion = this.estimatedCompletionDate > new Date();
     }
 
-    if (changes.has('current')) {
+    if (changes.has('current') || changes.has('total')) {
       const pct = Math.floor(Math.min((this.current / this.total) * 100, 100));
       if (Number.isNaN(pct)) {
         this.showPercentage = false;
@@ -176,8 +188,16 @@ export class ProgressBar extends RapidElement {
   }
 
   public render(): TemplateResult {
+    const meterClasses = [
+      'meter',
+      this.done ? 'done' : '',
+      this.animated ? '' : 'static'
+    ]
+      .filter(Boolean)
+      .join(' ');
+
     return html`<div class="wrapper ${this.done ? 'complete' : ''}">
-      <div class="meter ${this.done ? 'done' : ''}">
+      <div class="${meterClasses}">
         ${this.message
           ? html`<div class="message">${this.message}</div>`
           : null}

package/src/events.ts

@@ -10,7 +10,6 @@ export interface ContactEvent {
   uuid?: string;
   type: string;
   created_on: string;
-  created_by?: User; // deprecated
   _user?: ObjectReference;
 }
 
@@ -58,12 +57,8 @@ export interface ChatStartedEvent extends ContactEvent {
 export interface MsgEvent extends ContactEvent {
   msg: Msg;
   optin?: ObjectReference;
-  _status?: string;
-  _failed_reason?: string;
+  _status?: { created_on: string; status: string; reason: string };
   _logs_url?: string;
-  status?: string; // deprecated
-  failed_reason_display?: string; // deprecated
-  logs_url?: string; // deprecated
 }
 
 export interface RunEvent extends ContactEvent {
@@ -111,10 +106,9 @@ export interface AirtimeTransferredEvent extends ContactEvent {
 export type CallStartedEvent = ContactEvent;
 
 export interface ContactHistoryPage {
+  events: ContactEvent[];
   has_older: boolean;
   recent_only: boolean;
   next_before: number;
   next_after: number;
-  start_date: Date;
-  events: ContactEvent[];
 }

package/src/flow/CanvasMenu.ts

@@ -0,0 +1,217 @@
+import { css, html, PropertyValueMap, TemplateResult } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { RapidElement } from '../RapidElement';
+import { CustomEventType } from '../interfaces';
+
+/**
+ * Event detail for canvas menu selection
+ */
+export interface CanvasMenuSelection {
+  action: 'sticky' | 'action' | 'split';
+  position: { x: number; y: number };
+}
+
+/**
+ * CanvasMenu - A popup menu for adding items to the flow canvas
+ * Displayed when double-clicking on empty canvas space
+ */
+export class CanvasMenu extends RapidElement {
+  static get styles() {
+    return css`
+      :host {
+        position: fixed;
+        z-index: 10000;
+        display: block;
+        pointer-events: none;
+      }
+
+      .menu {
+        position: fixed;
+        background: white;
+        border-radius: var(--curvature);
+        box-shadow: var(--dropdown-shadow);
+        padding: 0.5em 0;
+        width: 265px;
+        pointer-events: auto;
+      }
+
+      .menu-item {
+        padding: 0.75em 1.5em;
+        cursor: pointer;
+        display: flex;
+        align-items: flex-start;
+        gap: 0.75em;
+        transition: background-color 0.15s ease;
+      }
+
+      .menu-item:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+      }
+
+      .menu-item temba-icon {
+        --icon-color: var(--color-text);
+        margin-top: 0.15em;
+      }
+
+      .menu-item-content {
+        display: flex;
+        flex-direction: column;
+        gap: 0.15em;
+      }
+
+      .menu-item-title {
+        font-weight: 500;
+        font-size: 1rem;
+        color: var(--color-text-dark);
+      }
+
+      .menu-item-description {
+        font-size: 0.85rem;
+        color: var(--color-text);
+      }
+
+      .divider {
+        height: 1px;
+        background: rgba(0, 0, 0, 0.1);
+        margin: 0.5em 0;
+      }
+    `;
+  }
+
+  @property({ type: Number })
+  public x = 0;
+
+  @property({ type: Number })
+  public y = 0;
+
+  @property({ type: Boolean })
+  public open = false;
+
+  @state()
+  private clickPosition = { x: 0, y: 0 };
+
+  protected firstUpdated(
+    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    super.firstUpdated(_changedProperties);
+
+    // Close menu when clicking outside
+    const handleClickOutside = (e: MouseEvent) => {
+      if (this.open && !this.contains(e.target as Node)) {
+        this.close();
+      }
+    };
+
+    document.addEventListener('click', handleClickOutside);
+
+    // Store cleanup function
+    (this as any)._clickOutsideHandler = handleClickOutside;
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    if ((this as any)._clickOutsideHandler) {
+      document.removeEventListener('click', (this as any)._clickOutsideHandler);
+    }
+  }
+
+  public show(x: number, y: number, clickPosition: { x: number; y: number }) {
+    this.x = x;
+    this.y = y;
+    this.clickPosition = clickPosition;
+    this.open = true;
+
+    // Adjust position after menu renders to ensure it fits on screen
+    requestAnimationFrame(() => {
+      this.adjustPosition();
+    });
+  }
+
+  private adjustPosition(): void {
+    const menuElement = this.shadowRoot?.querySelector('.menu') as HTMLElement;
+    if (!menuElement) return;
+
+    const menuRect = menuElement.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const margin = 10; // margin from viewport edges
+
+    let adjustedX = this.x;
+    let adjustedY = this.y;
+
+    // Check if menu goes off the right edge
+    if (this.x + menuRect.width + margin > viewportWidth) {
+      adjustedX = viewportWidth - menuRect.width - margin;
+    }
+
+    // Check if menu goes off the bottom edge
+    if (this.y + menuRect.height + margin > viewportHeight) {
+      adjustedY = viewportHeight - menuRect.height - margin;
+    }
+
+    // Update position if needed
+    if (adjustedX !== this.x || adjustedY !== this.y) {
+      this.x = adjustedX;
+      this.y = adjustedY;
+    }
+  }
+
+  public close() {
+    this.open = false;
+  }
+
+  private handleMenuItemClick(action: 'sticky' | 'action' | 'split') {
+    this.fireCustomEvent(CustomEventType.Selection, {
+      action,
+      position: this.clickPosition
+    } as CanvasMenuSelection);
+    this.close();
+  }
+
+  public render(): TemplateResult {
+    if (!this.open) {
+      return html``;
+    }
+
+    return html`
+      <div class="menu" style="left: ${this.x}px; top: ${this.y}px;">
+        <div
+          class="menu-item"
+          @click=${() => this.handleMenuItemClick('action')}
+        >
+          <temba-icon name="action" size="1.25"></temba-icon>
+          <div class="menu-item-content">
+            <div class="menu-item-title">Add Action</div>
+            <div class="menu-item-description">
+              Send messages, update contacts
+            </div>
+          </div>
+        </div>
+
+        <div
+          class="menu-item"
+          @click=${() => this.handleMenuItemClick('split')}
+        >
+          <temba-icon name="split" size="1.25"></temba-icon>
+          <div class="menu-item-content">
+            <div class="menu-item-title">Add Split</div>
+            <div class="menu-item-description">Branch based on conditions</div>
+          </div>
+        </div>
+
+        <div class="divider"></div>
+
+        <div
+          class="menu-item"
+          @click=${() => this.handleMenuItemClick('sticky')}
+        >
+          <temba-icon name="note" size="1.25"></temba-icon>
+          <div class="menu-item-content">
+            <div class="menu-item-title">Add Sticky Note</div>
+            <div class="menu-item-description">Add a note to the canvas</div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}