@nyaruka/temba-components 0.162.0 → 0.164.0

package/src/layout/Dialog.ts

@@ -20,6 +20,9 @@ export class DialogButton {
 }
 
 export class Dialog extends ResizeElement {
+  public static readonly UNSAVED_CHANGES_MESSAGE =
+    'You have unsaved changes. Are you sure you want to discard them?';
+
   static get widths(): { [size: string]: string } {
     return {
       small: '400px',
@@ -273,12 +276,29 @@ export class Dialog extends ResizeElement {
   @property({ attribute: false })
   onButtonClicked: (button: Button) => void;
 
+  // when set, consulted instead of the built-in edit tracking to decide
+  // whether escape should confirm before dismissing — for owners that can
+  // compare actual values (and so ignore edits that were reverted)
+  @property({ attribute: false })
+  checkForChanges?: () => boolean;
+
   @property({ type: Number })
   originX: number | null = null;
 
   @property({ type: Number })
   originY: number | null = null;
 
+  // whether any input/change has bubbled from our content since opening;
+  // the default signal that escape would discard the user's edits
+  private contentEdited = false;
+
+  // elements the user has actually interacted with (pointer or key) since the
+  // dialog opened; components fire synthetic change events on programmatic
+  // value changes (initialization of preset values, async option resolution),
+  // so an input/change only counts as an edit when it originates from an
+  // element the user has touched
+  private interactedElements = new WeakSet<EventTarget>();
+
   scrollOffset: any = 0;
 
   public constructor() {
@@ -322,6 +342,8 @@ export class Dialog extends ResizeElement {
     super.updated(changes);
 
     if (changes.has('open')) {
+      this.contentEdited = false;
+      this.interactedElements = new WeakSet<EventTarget>();
       const body = document.querySelector('body');
 
       if (this.open) {
@@ -457,8 +479,33 @@ export class Dialog extends ResizeElement {
     return this.shadowRoot.querySelector(`temba-button[primary]`);
   }
 
+  public hasUnsavedChanges(): boolean {
+    return this.checkForChanges ? this.checkForChanges() : this.contentEdited;
+  }
+
+  private handleContentInteraction(event: Event) {
+    // the path covers the interacted element and its ancestors, so a change
+    // fired later by a containing component (e.g. a select whose inner input
+    // was clicked) still matches
+    event.composedPath().forEach((el) => this.interactedElements.add(el));
+  }
+
+  private handleContentEdited(event: Event) {
+    // only the originating element is checked (not its ancestors, which the
+    // paths of unrelated interactions also pass through)
+    if (this.interactedElements.has(event.composedPath()[0])) {
+      this.contentEdited = true;
+    }
+  }
+
   private handleKeyUp(event: KeyboardEvent) {
     if (event.key === 'Escape') {
+      if (
+        this.hasUnsavedChanges() &&
+        !window.confirm(Dialog.UNSAVED_CHANGES_MESSAGE)
+      ) {
+        return;
+      }
       this.clickCancel();
     }
   }
@@ -528,11 +575,16 @@ export class Dialog extends ResizeElement {
         </div>
 
         <div class="flex">
-          <div class="grow-top" style="${
-            this.isMobile() ? 'flex-grow:0' : ''
-          }"></div>
+          <div
+            class="grow-top"
+            style="${this.isMobile() ? 'flex-grow:0' : ''}"
+          ></div>
           <div
             @keyup=${this.handleKeyUp}
+            @keydown=${this.handleContentInteraction}
+            @pointerdown=${this.handleContentInteraction}
+            @input=${this.handleContentEdited}
+            @change=${this.handleContentEdited}
             style=${styleMap(dialogStyle)}
             class="dialog-container"
           >
@@ -542,28 +594,36 @@ export class Dialog extends ResizeElement {
               <temba-loading units="6" size="8"></temba-loading>
             </div>
 
-            <div class="dialog-footer">
-              <div class="flex-grow">
-                <slot name="gutter"></slot>
-              </div>
-              ${this.buttons.map(
-                (button: DialogButton, index) => html`
-                  <temba-button
-                    name=${button.name}
-                    ?destructive=${button.type == 'primary' && this.destructive}
-                    ?primary=${button.type == 'primary' && !this.destructive}
-                    ?secondary=${button.type == 'secondary'}
-                    ?submitting=${this.submitting && button.type == 'primary'}
-                    ?disabled=${this.disabled && !button.closes}
-                    index=${index}
-                    @click=${this.handleClick}
-                  ></temba-button>
-                `
-              )}
-              </div>
-            </div>
-            <div class="grow-bottom"></div>
+            ${
+              // the gutter check is render-time only (not reactive) - fine
+              // while consumers slot gutter content declaratively up front
+              this.buttons.length > 0 || this.querySelector('[slot="gutter"]')
+                ? html`<div class="dialog-footer">
+                    <div class="flex-grow">
+                      <slot name="gutter"></slot>
+                    </div>
+                    ${this.buttons.map(
+                      (button: DialogButton, index) => html`
+                        <temba-button
+                          name=${button.name}
+                          ?destructive=${button.type == 'primary' &&
+                          this.destructive}
+                          ?primary=${button.type == 'primary' &&
+                          !this.destructive}
+                          ?secondary=${button.type == 'secondary'}
+                          ?submitting=${this.submitting &&
+                          button.type == 'primary'}
+                          ?disabled=${this.disabled && !button.closes}
+                          index=${index}
+                          @click=${this.handleClick}
+                        ></temba-button>
+                      `
+                    )}
+                  </div>`
+                : null
+            }
           </div>
+          <div class="grow-bottom"></div>
         </div>
       </div>
     `;

package/src/layout/HeaderBar.ts

@@ -0,0 +1,38 @@
+import { css, html, TemplateResult } from 'lit';
+import { RapidElement } from '../RapidElement';
+import { designTokens } from '../styles/designTokens';
+
+/**
+ * A fixed-height header strip with a full-bleed rule under it, for the
+ * chat + cards pages (contact read, tickets). Pages can use several side
+ * by side (e.g. one over a list column, one over the chat) — the shared
+ * height and surface make them read as one continuous control.
+ */
+export class HeaderBar extends RapidElement {
+  static get styles() {
+    return css`
+      ${designTokens}
+
+      :host {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+        /* 52px strip plus the 1px rule */
+        height: 53px;
+        box-sizing: border-box;
+        padding: 0 8px;
+        background: var(--surface);
+        border-bottom: 1px solid var(--border);
+      }
+
+      ::slotted(*) {
+        flex-grow: 1;
+        min-width: 0;
+      }
+    `;
+  }
+
+  public render(): TemplateResult {
+    return html`<slot></slot>`;
+  }
+}

package/src/layout/PageHeader.ts

@@ -70,6 +70,8 @@ export class PageHeader extends RapidElement {
       }
       .title {
         font-size: 15.5px;
+        /* slotted contact names render at the title's size */
+        --contact-name-font-size: 15.5px;
         font-weight: var(--w-semibold);
         color: var(--text-1);
         line-height: 1.25;
@@ -139,10 +141,6 @@ export class PageHeader extends RapidElement {
       .menu-button.primary:hover {
         background: var(--accent-700);
       }
-      .menu-button[disabled] {
-        opacity: 0.45;
-        cursor: not-allowed;
-      }
 
       /* Overflow toggle — the trailing ⋮ that opens the rest of the
          menu items. Plain icon button, matches the list's Search. */
@@ -282,7 +280,9 @@ export class PageHeader extends RapidElement {
    * origin — same payload the standalone content menu emits, so the
    * host's existing menu handling keeps working. */
   private handleItemClicked(item: ContentMenuItem, event: MouseEvent): void {
-    if (item.disabled) return;
+    // note: item.disabled does NOT make the item inert — in the content
+    // menu contract it means the opened modal starts with its submit
+    // disabled (hosts pass it through to showModax)
     const el = event.currentTarget as Element;
     const rect = el?.getBoundingClientRect();
     this.fireCustomEvent(CustomEventType.Selection, {
@@ -300,7 +300,6 @@ export class PageHeader extends RapidElement {
         (button) => html`
           <div
             class="menu-button ${button.primary ? 'primary' : ''}"
-            ?disabled=${button.disabled}
             @click=${(e: MouseEvent) => this.handleItemClicked(button, e)}
           >
             ${button.label}

package/src/layout/Resizer.ts

@@ -10,6 +10,9 @@ export class Resizer extends ResizeElement {
       display: block;
       position: relative;
       width: var(--box-width, 200px);
+      /* hold the drag-clamp floor against flex compression too, so
+         shrinking the browser can't squeeze us below minWidth */
+      min-width: var(--box-min-width, 200px);
       --resizer-handle-size: 15px;
     }
 
@@ -69,6 +72,20 @@ export class Resizer extends ResizeElement {
     this.stopResize = this.stopResize.bind(this);
   }
 
+  protected willUpdate(
+    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    super.willUpdate(changes);
+    // clamp programmatic width sets (e.g. a stored width restored on
+    // load) the same way drags are clamped
+    if (changes.has('currentWidth') && this.currentWidth != null) {
+      this.currentWidth = Math.min(
+        Math.max(this.currentWidth, this.minWidth),
+        this.maxWidth
+      );
+    }
+  }
+
   protected updated(
     _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
   ): void {
@@ -76,6 +93,9 @@ export class Resizer extends ResizeElement {
     if (_changedProperties.has('currentWidth')) {
       this.style.setProperty('--box-width', `${this.currentWidth}px`);
     }
+    if (_changedProperties.has('minWidth')) {
+      this.style.setProperty('--box-min-width', `${this.minWidth}px`);
+    }
   }
 
   public setWidth(width: number) {

package/src/list/CampaignList.ts

@@ -0,0 +1,144 @@
+import { css, html, TemplateResult } from 'lit';
+import { ContentList, ContentListColumn } from './ContentList';
+import { Icon } from '../Icons';
+import { Campaign, CustomEventType, ObjectReference } from '../interfaces';
+
+/**
+ * Campaign CRUDL list — drop-in replacement for the rapidpro
+ * `campaigns/campaign_list.html` table. Every row leads with the
+ * campaign clock icon (from the styleguide's campaign list), then
+ * name, the group pill the campaign schedules against, contact /
+ * event counts, and the last-updated date.
+ */
+export class CampaignList extends ContentList<Campaign> {
+  static get styles() {
+    return css`
+      ${ContentList.styles}
+      .campaign-name {
+        color: inherit;
+        font-weight: var(--w-medium);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .num {
+        font-variant-numeric: tabular-nums;
+        color: inherit;
+      }
+    `;
+  }
+
+  constructor() {
+    super();
+    this.valueKey = 'uuid';
+    this.emptyMessage = 'No campaigns';
+    this.searchPlaceholder = 'Search campaigns';
+    this.columns = [
+      {
+        key: 'name',
+        label: 'Name',
+        sortable: true,
+        minWidth: '160px',
+        maxWidth: '280px',
+        pinned: true
+      },
+      {
+        key: 'group',
+        label: 'Group',
+        minWidth: '120px',
+        maxWidth: '220px'
+      },
+      {
+        key: 'contacts',
+        label: 'Contacts',
+        sortable: true,
+        minWidth: '72px',
+        align: 'right'
+      },
+      {
+        key: 'events',
+        label: 'Events',
+        sortable: true,
+        minWidth: '64px',
+        align: 'right'
+      },
+      {
+        key: 'modified_on',
+        label: 'Updated',
+        sortable: true,
+        minWidth: '96px',
+        maxWidth: '150px',
+        align: 'right'
+      }
+    ];
+    this.bulkActions = [
+      { key: 'archive', label: 'Archive', icon: Icon.archive }
+    ];
+  }
+
+  protected getRowIcon(_item: Campaign): string | null {
+    return Icon.campaign;
+  }
+
+  protected getRowHref(item: Campaign): string | null {
+    return item?.uuid ? `/campaign/read/${item.uuid}/` : null;
+  }
+
+  /** Clicking the group pill opens that group's contact list rather
+   * than falling through to the row click (which opens the campaign). */
+  private handleGroupClick(group: ObjectReference, event: MouseEvent): void {
+    // Stop the click from bubbling to the row's navigation handler.
+    event.stopPropagation();
+    if (!group?.uuid) return;
+    const href = `/contact/group/${group.uuid}/`;
+    // Guard the JSON-driven href against open-redirect, same as the
+    // row-click path in ContentList.handleRowClick.
+    if (!this.isSafeHref(href)) return;
+    // Meta/ctrl-click opens a new tab, matching ordinary links and the
+    // row-click behavior.
+    if (event.metaKey || event.ctrlKey) {
+      window.open(href, '_blank');
+      return;
+    }
+    this.fireCustomEvent(CustomEventType.Redirected, { url: href });
+  }
+
+  protected renderCell(
+    item: Campaign,
+    column: ContentListColumn
+  ): TemplateResult | string {
+    switch (column.key) {
+      case 'name':
+        return html`<span class="campaign-name" title=${item.name || ''}
+          >${item.name || ''}</span
+        >`;
+      case 'group':
+        return item.group
+          ? html`<temba-label
+              type="group"
+              icon=${Icon.group}
+              clickable
+              @click=${(e: MouseEvent) => this.handleGroupClick(item.group, e)}
+              >${item.group.name}</temba-label
+            >`
+          : '';
+      case 'events':
+        return html`<span class="num"
+          >${(item.events ?? 0).toLocaleString()}</span
+        >`;
+      case 'contacts':
+        return html`<span class="num"
+          >${(item.contacts ?? 0).toLocaleString()}</span
+        >`;
+      case 'modified_on':
+        return item.modified_on
+          ? html`<temba-date
+              value=${item.modified_on}
+              display="timedate"
+            ></temba-date>`
+          : '';
+      default:
+        return super.renderCell(item, column);
+    }
+  }
+}

package/src/list/ContactList.ts

@@ -284,7 +284,9 @@ export class ContactList extends ContentList<Contact> {
     if (i.urn) return i.urn;
     if (Array.isArray(i.urns) && i.urns.length > 0) {
       const u = i.urns[0];
-      return typeof u === 'string' ? u.split(':')[1] || u : u?.display || '';
+      return typeof u === 'string'
+        ? u.split(':')[1] || u
+        : u?.display || u?.path || '';
     }
     return '';
   }

package/src/list/FlowList.ts

@@ -14,23 +14,38 @@ export class FlowList extends ContentList<Flow> {
   static get styles() {
     return css`
       ${ContentList.styles}
+      /* The name cell is a flex row (name text, issue icon, label
+         chips) that fills the grow column. When space runs out the
+         text spans ellipsize — the flex items shrink instead of the
+         cell hard-clipping them mid-glyph, which is what happens to
+         an inline-flex atomic inline under .cell-inner's ellipsis. */
       .flow-name {
         color: inherit;
         font-weight: var(--w-medium);
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        min-width: 0;
+      }
+      .flow-name .name {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
       }
       .flow-labels {
-        display: inline-flex;
+        display: flex;
         align-items: center;
         gap: 4px;
-        margin-left: 4px;
+        min-width: 0;
+      }
+      /* Chips shrink with the row and ellipsize internally (the
+         label's own slot handles that) rather than being clipped
+         mid-chip at the column edge. */
+      .flow-labels temba-label {
+        min-width: 0;
       }
       .issue-icon {
+        flex: none;
         --icon-color: var(--warning);
       }
       .num {
@@ -84,13 +99,20 @@ export class FlowList extends ContentList<Flow> {
     this.valueKey = 'uuid';
     this.emptyMessage = 'No flows';
     this.searchPlaceholder = 'Search flows';
+    // The name column is a `grow` column — it pools the table's
+    // leftover width so long names (and their label chips) get all
+    // available space before truncating, instead of clipping against
+    // a fixed cap while slack sits in the spacer. minTableWidth arms
+    // a horizontal scroll once the container is too narrow to keep
+    // the columns usable, rather than clipping anything.
+    this.minTableWidth = '640px';
     this.columns = [
       {
         key: 'name',
         label: 'Name',
         sortable: true,
         minWidth: '160px',
-        maxWidth: '280px',
+        grow: true,
         pinned: true
       },
       {
@@ -174,7 +196,9 @@ export class FlowList extends ContentList<Flow> {
       case 'name': {
         const labels = item.labels || [];
         return html`<span class="flow-name"
-          >${item.name || ''}
+          ><span class="name" title="${item.name || ''}"
+            >${item.name || ''}</span
+          >
           ${item.has_issues
             ? html`<temba-icon
                 class="issue-icon"

package/src/list/MsgList.ts

@@ -2,6 +2,7 @@ import { css, html, TemplateResult } from 'lit';
 import { ContentList, ContentListColumn } from './ContentList';
 import { Icon } from '../Icons';
 import { Msg } from '../interfaces';
+import { attachmentAsString } from '../utils';
 
 /**
  * Message CRUDL list — drop-in replacement for the rapidpro
@@ -14,9 +15,9 @@ export class MsgList extends ContentList<Msg> {
   static get styles() {
     return css`
       ${ContentList.styles}
-      /* The message cell holds the body text with its attachment
-         thumbnails right after it, and the flow / label pills pushed
-         to the trailing edge. The text sizes to content and
+      /* The message cell holds the body text on the leading edge, with
+         its attachment thumbnails and the flow / label pills grouped
+         and pushed to the trailing edge. The text sizes to content and
          ellipsizes when squeezed — resolved per row, so a busy row
          doesn't widen a column for all of them. */
       .msg-cell {
@@ -34,7 +35,7 @@ export class MsgList extends ContentList<Msg> {
         text-overflow: ellipsis;
         white-space: nowrap;
       }
-      /* Attachment thumbnails sit immediately after the text. */
+      /* Attachment thumbnails, immediately after the message text. */
       .msg-attachments {
         flex: 0 0 auto;
         display: flex;
@@ -44,10 +45,10 @@ export class MsgList extends ContentList<Msg> {
       /* Flow + label pills, pushed to the trailing edge of the cell. */
       .cell-pills {
         flex: 0 0 auto;
+        margin-left: auto;
         display: flex;
         align-items: center;
         gap: 6px;
-        margin-left: auto;
       }
       /* Attachment thumbnails are sized well below the 44px row so
          they never grow its height — a small square preview rather
@@ -160,13 +161,18 @@ export class MsgList extends ContentList<Msg> {
     }
   }
 
-  /** The message cell — body text, its attachment thumbnails, then
-   * the trailing flow / label pills. Each piece sizes to content, so
-   * the split is resolved independently for every row. */
+  /** The message cell — body text on the leading edge with its
+   * attachment thumbnails immediately after it, and the flow / label
+   * pills pushed to the trailing edge. Each piece sizes to content, so
+   * the split is resolved independently for every row. A message with
+   * no text renders no text span at all — otherwise its min-width
+   * would strand an attachment-only row's thumbnails away from the
+   * leading edge. */
   private renderMessageCell(item: Msg): TemplateResult {
+    const text = this.renderMessageText(item);
     return html`
       <div class="msg-cell">
-        <span class="msg-text">${this.renderMessageText(item)}</span>
+        ${text ? html`<span class="msg-text">${text}</span>` : ''}
         ${this.renderAttachments(item)}${this.renderPills(item)}
       </div>
     `;
@@ -208,8 +214,8 @@ export class MsgList extends ContentList<Msg> {
     return item.text || '';
   }
 
-  /** Attachment thumbnails for a row, sitting immediately after the
-   * message text, or '' when the row carries none. */
+  /** Attachment thumbnails for a row, immediately after the message
+   * text, or '' when the row carries none. */
   private renderAttachments(item: Msg): TemplateResult | string {
     const attachments = item.attachments || [];
     if (!attachments.length) return '';
@@ -219,7 +225,7 @@ export class MsgList extends ContentList<Msg> {
           (a) => html`
             <temba-thumbnail
               class="msg-thumb"
-              attachment=${a}
+              attachment=${attachmentAsString(a)}
             ></temba-thumbnail>
           `
         )}

package/src/list/SortableList.ts

@@ -111,9 +111,11 @@ export class SortableList extends RapidElement {
   }
 
   private getSortableElements(): Element[] {
+    // flatten so wrapper components can forward their host's children
+    // through a nested <slot>
     const eles = this.shadowRoot
       .querySelector('slot')
-      .assignedElements()
+      .assignedElements({ flatten: true })
       .filter(
         (ele) =>
           ele.classList.contains('sortable') &&
@@ -539,11 +541,38 @@ export class SortableList extends RapidElement {
   private beginDrag(
     target: HTMLElement,
     clientX: number,
-    clientY: number
+    clientY: number,
+    path: EventTarget[] = []
   ): boolean {
-    // if we have a drag handle, only allow dragging from that element
+    // if we have a drag handle, only allow dragging from that element. The
+    // handle may live inside a sortable child's shadow DOM (where event
+    // retargeting hides it from event.target), so walk the composed path up
+    // to the first .sortable host looking for it — and require that host to
+    // actually be one of ours, so a same-named class elsewhere in the path
+    // can't start a drag.
     if (this.dragHandle) {
-      if (!target.classList.contains(this.dragHandle)) {
+      const searchPath = path.length > 0 ? path : [target];
+      let onHandle = false;
+      let handleHost: Element = null;
+      for (const hop of searchPath) {
+        // shadow roots appear as non-Element hops mid-path (e.g. an icon
+        // inside the handle) — skip them rather than giving up
+        if (!(hop instanceof Element)) {
+          continue;
+        }
+        if (!onHandle && hop.classList.contains(this.dragHandle)) {
+          onHandle = true;
+        }
+        if (hop.classList.contains('sortable')) {
+          handleHost = onHandle ? hop : null;
+          break;
+        }
+      }
+      if (
+        !onHandle ||
+        !handleHost ||
+        !this.getSortableElements().includes(handleHost)
+      ) {
         return false;
       }
     }
@@ -572,7 +601,12 @@ export class SortableList extends RapidElement {
 
   private handleMouseDown(event: MouseEvent) {
     if (
-      this.beginDrag(event.target as HTMLElement, event.clientX, event.clientY)
+      this.beginDrag(
+        event.target as HTMLElement,
+        event.clientX,
+        event.clientY,
+        event.composedPath()
+      )
     ) {
       event.preventDefault();
       event.stopPropagation();
@@ -586,7 +620,12 @@ export class SortableList extends RapidElement {
     const touch = event.touches[0];
     if (!touch) return;
     if (
-      this.beginDrag(event.target as HTMLElement, touch.clientX, touch.clientY)
+      this.beginDrag(
+        event.target as HTMLElement,
+        touch.clientX,
+        touch.clientY,
+        event.composedPath()
+      )
     ) {
       event.stopPropagation();
       document.addEventListener('touchmove', this.handleTouchMove, {