@nyaruka/temba-components 0.164.0 → 0.165.0

package/src/interfaces.ts

@@ -192,6 +192,58 @@ export interface Trigger {
   created_on?: string;
 }
 
+/** A single row in the broadcast CRUDL lists — both the scheduled
+ * list (`msgs/broadcast_scheduled.html`) and the sent list
+ * (`msgs/broadcast_list.html`). Broadcasts key off the numeric id;
+ * content fields carry the base-language translation. */
+export interface Broadcast {
+  id: number;
+  /** Server status slug — `pending`, `queued`, `started`,
+   * `completed`, `failed` or `interrupted`. Scheduled broadcasts
+   * that haven't fired yet sit at `pending`. */
+  status?: string;
+  /** Send progress for an in-flight broadcast — total recipients
+   * (-1 until the org's contact count resolves) and messages
+   * created so far. */
+  progress?: { total: number; started: number };
+  /** Base-language message text. */
+  text?: string;
+  /** Base-language attachments (`{content_type, url}` objects or
+   * `contentType:url` strings). */
+  attachments?: (string | Attachment)[];
+  /** Base-language quick replies. */
+  quick_replies?: string[];
+  /** The opt-in the broadcast requests, when it is one. */
+  optin?: ObjectReference | null;
+  /** The WhatsApp template the broadcast sends, when it uses one. */
+  template?: ObjectReference | null;
+  /** Recipient groups. */
+  groups?: ObjectReference[];
+  /** Recipient contacts. */
+  contacts?: ObjectReference[];
+  /** Raw recipient URNs (editors/admins only). */
+  urns?: string[];
+  /** Recipient contact query, for query-addressed broadcasts. */
+  query?: string | null;
+  /** Human-readable exclusion descriptions ("Skip inactive
+   * contacts", ...) rendered in the detail view. */
+  exclusions?: string[];
+  /** Scheduled broadcasts only — `display` is the server-rendered
+   * human repeat ("each week on Monday, Wednesday"); `next_fire` is
+   * null once the schedule is exhausted or paused. */
+  schedule?: {
+    repeat_period?: string;
+    display?: string;
+    next_fire?: string | null;
+  } | null;
+  /** Messages created by a sent broadcast. */
+  msg_count?: number;
+  created_on?: string;
+  /** Email of the user who created the broadcast. */
+  created_by?: string | null;
+  modified_on?: string;
+}
+
 export interface Msg {
   /** Numeric id — present on persisted messages (the CRUDL list
    * keys rows off it); absent on outbound drafts. */

package/src/layout/Card.ts

@@ -20,6 +20,12 @@ export class Card extends RapidElement {
         display: block;
       }
 
+      /* an empty panel drops its card entirely — in tab (plain) mode the
+         pane still renders so the tab keeps working */
+      :host([empty]:not([plain])) {
+        display: none;
+      }
+
       /* The chrome lives on an inner frame rather than the host so
          document-level universal rules (e.g. tailwind's preflight
          border-color) can't override it. */
@@ -130,6 +136,16 @@ export class Card extends RapidElement {
         padding: 0 10px 10px;
       }
 
+      /* card chrome bounds the panel tightly — slotted panels scale their
+         empty-state treatment down from the roomy tab-pane default to a
+         single quiet line */
+      :host(:not([plain])) .content ::slotted(*) {
+        --empty-padding: 1em;
+        --empty-extras-display: none;
+        --empty-title-size: 0.9em;
+        --empty-title-color: var(--text-3);
+      }
+
       /* bleed mode: the body content runs edge-to-edge so a panel with its
          own surface (e.g. the notepad) fills the card, clipped to the card
          radius. The footer of such content sits on the card's bottom edge. */
@@ -210,6 +226,12 @@ export class Card extends RapidElement {
   @property({ type: Boolean, reflect: true })
   bleed = false;
 
+  // the slotted panel reported (via temba-details-changed) that it has
+  // nothing to show — the card hides entirely in card mode, though its
+  // tab remains available in narrow mode
+  @property({ type: Boolean, reflect: true })
+  empty = false;
+
   // named surface treatments, e.g. "note" for the sticky-note look
   @property({ type: String, reflect: true })
   variant = '';
@@ -252,6 +274,9 @@ export class Card extends RapidElement {
     if ('count' in event.detail) {
       this.count = event.detail.count;
     }
+    if ('empty' in event.detail) {
+      this.empty = event.detail.empty;
+    }
   }
 
   public render(): TemplateResult {

package/src/layout/CardLayout.ts

@@ -88,13 +88,13 @@ export class CardLayout extends RapidElement {
         /* the column soaks up whatever the main view doesn't take. Its
            scrollport runs the full height (the host supplies no vertical
            padding) so the scrollbar bleeds top to bottom, while the inner
-           padding aligns the first card with the main view and doubles as
-           room for card shadows. */
+           padding aligns the cards with the main view — including below,
+           so the last card scrolls to rest level with the bottom of the
+           main view — and doubles as room for card shadows. */
         flex: 1 0 var(--card-column-width, 360px);
         min-height: 0;
         overflow-y: auto;
         padding: var(--layout-spacing, 8px);
-        padding-bottom: 0;
       }
 
       temba-tabs {

package/src/layout/HeaderBar.ts

@@ -22,7 +22,10 @@ export class HeaderBar extends RapidElement {
         box-sizing: border-box;
         padding: 0 8px;
         background: var(--surface);
-        border-bottom: 1px solid var(--border);
+        /* the rule is a box-shadow, not a border — host pages (tailwind
+           preflight) reset border-width on every element, and outer-scope
+           element styles beat :host */
+        box-shadow: inset 0 -1px 0 0 var(--border);
       }
 
       ::slotted(*) {