@nyaruka/temba-components 0.164.0 → 0.165.0

package/src/list/SortableList.ts

@@ -92,6 +92,7 @@ export class SortableList extends RapidElement {
 
   draggingIdx = -1;
   draggingEle = null;
+  ghostOriginalDisplay = '';
   dropPlaceholder: HTMLDivElement = null;
   pendingDropIndex = -1;
   pendingTargetElement: HTMLElement = null;
@@ -729,8 +730,11 @@ export class SortableList extends RapidElement {
         this.isExternalDrag = true;
         this.hideDropPlaceholder();
 
-        // hide the ghost element when dragging externally
+        // hide the ghost element when dragging externally, remembering its
+        // display (inlined from the original's computed style) so re-entry
+        // can restore it - forcing 'block' would break flex-laid-out ghosts
         if (this.ghostElement) {
+          this.ghostOriginalDisplay = this.ghostElement.style.display;
           this.ghostElement.style.display = 'none';
         }
 
@@ -745,7 +749,8 @@ export class SortableList extends RapidElement {
 
         // show the ghost element again when dragging internally
         if (this.ghostElement) {
-          this.ghostElement.style.display = 'block';
+          this.ghostElement.style.display =
+            this.ghostOriginalDisplay || 'block';
         }
 
         this.fireCustomEvent(CustomEventType.DragInternal, {

package/src/list/TembaList.ts

@@ -220,6 +220,14 @@ export class TembaList extends RapidElement {
     return this.selected;
   }
 
+  /** Deselects without firing a change — e.g. mobile going back to the
+   *  list, so the same row can be selected again. */
+  public clearSelection() {
+    this.cursorIndex = -1;
+    this.selected = null;
+    this.value = null;
+  }
+
   public refresh(): void {
     this.refreshKey = 'requested_' + new Date().getTime();
   }

package/src/list/TembaMenu.ts

@@ -33,7 +33,6 @@ export interface MenuItem {
   avatar?: string;
   trigger?: boolean;
   event?: string;
-  mobile?: boolean;
   initial?: string;
 }
 
@@ -401,29 +400,13 @@ export class TembaMenu extends ResizeElement {
         flex-direction: row;
       }
 
-      .root.fully-collapsed.mobile .level.level-0 > .item {
+      /* when collapsed on mobile, the only thing in the header is the
+         hamburger — any new direct child of level-0 must opt in with
+         the .top class to stay visible here */
+      .root.fully-collapsed.mobile .level.level-0 > *:not(.top) {
         display: none;
       }
 
-      .root.fully-collapsed.mobile .level.level-0 > .empty {
-        display: block;
-        width: 100%;
-        min-width: inherit;
-        max-width: inherit;
-      }
-
-      .root .level.level-0 > .show-mobile {
-        display: none;
-      }
-
-      .root.mobile .level.level-0 > .show-mobile {
-        display: flex;
-      }
-
-      .root.fully-collapsed.mobile .level.level-0 > .show-mobile {
-        display: contents !important;
-      }
-
       .root.fully-collapsed.mobile .level.level-0 .expand-icon {
         max-height: 100%;
         padding: 1em;
@@ -455,27 +438,12 @@ export class TembaMenu extends ResizeElement {
         min-width: inherit;
       }
 
-      .mobile.fully-collapsed .item {
-      }
-
       .mobile .expand-icon {
         transition: none;
         transform: rotate(-90deg);
         align-self: center;
       }
 
-      .mobile.fully-collapsed .level-0 .empty {
-        flex-grow: 1;
-      }
-
-      .mobile.fully-collapsed .top-spacer {
-        flex-grow: 0;
-      }
-
-      .mobile.fully-collapsed #dd-workspace {
-        display: none;
-      }
-
       .mobile.fully-collapsed .expand-icon {
         transform: none;
       }
@@ -1203,8 +1171,7 @@ export class TembaMenu extends ResizeElement {
       expanding: this.expanding && this.expanding === menuItem.id,
       expanded: this.isExpanded(menuItem),
       iconless: !icon && !collapsedIcon && !menuItem.avatar,
-      pressed: this.pressedItem && this.pressedItem.id == menuItem.id,
-      'show-mobile': menuItem.mobile
+      pressed: this.pressedItem && this.pressedItem.id == menuItem.id
     });
 
     if (menuItem.avatar) {

package/src/live/CampaignEvents.ts

@@ -94,9 +94,6 @@ export class CampaignEvents extends EndpointMonitorElement {
   @property({ type: String })
   lang_scheduled_contacts = 'Contacts scheduled for this event';
 
-  @property({ type: String })
-  lang_okay = 'Okay';
-
   @property({ type: String })
   lang_send_message = 'Send Message';
 
@@ -494,14 +491,28 @@ export class CampaignEvents extends EndpointMonitorElement {
         line-height: 1.5;
       }
 
-      /* our own footer so the Okay button follows the same horizontal
-         padding as the header - its right edge lines up with Delete. A
-         full-bleed rule mirrors the header's. */
-      .detail-footer {
-        display: flex;
-        justify-content: flex-end;
-        padding: 1em;
-        border-top: 1px solid var(--border, #e4e7ec);
+      /* the close (✕) in the header's upper right - the square
+         hover-wash button treatment (the pager buttons'), sitting
+         just outboard of the action buttons */
+      .detail-close {
+        flex-shrink: 0;
+        margin-left: -4px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        border-radius: var(--r-sm);
+        color: var(--text-3, #7b8593);
+        cursor: pointer;
+        user-select: none;
+      }
+      .detail-close:hover {
+        background: var(--sunken);
+        color: var(--text-1);
+      }
+      .detail-close temba-icon {
+        --icon-color: currentColor;
       }
 
       .detail-section-title {
@@ -1017,6 +1028,17 @@ export class CampaignEvents extends EndpointMonitorElement {
                           : null}
                       </div>`
                     : null}
+                  <div
+                    class="detail-close"
+                    role="button"
+                    tabindex="0"
+                    aria-label="Close"
+                    @click=${this.handleDetailClosed}
+                    @keydown=${(e: KeyboardEvent) =>
+                      this.handleActivationKey(e, this.handleDetailClosed)}
+                  >
+                    <temba-icon name=${Icon.close} size="1.4"></temba-icon>
+                  </div>
                 </div>
 
                 <div class="detail-body">
@@ -1072,14 +1094,6 @@ export class CampaignEvents extends EndpointMonitorElement {
 
                   ${this.renderFires()}
                 </div>
-
-                <div class="detail-footer">
-                  <temba-button
-                    primary
-                    name=${this.lang_okay}
-                    @click=${this.handleDetailClosed}
-                  ></temba-button>
-                </div>
               </div>
             `
           : null}

package/src/live/ContactChat.ts

@@ -605,7 +605,13 @@ export class ContactChat extends ContactStoreElement {
     const channels = new Set<string>();
     if (this.isConnected && this.currentContact) {
       channels.add(`history:${this.currentContact.uuid}`);
-      if (this.currentTicket) {
+
+      // on a contact switch the new ticket is set before the new contact has
+      // finished fetching, so hold off on the ticket channel until they match
+      // - a ticket paired with another contact's channel is denied server-side
+      const contactPending =
+        this.contact && this.contact !== this.currentContact.uuid;
+      if (this.currentTicket && !contactPending) {
         channels.add(
           `history:${this.currentContact.uuid}:${this.currentTicket.uuid}`
         );

package/src/live/ContactDetails.ts

@@ -38,7 +38,7 @@ export class ContactDetails extends ContactStoreElement {
 
       .row .label {
         color: var(--text-2);
-        font-size: 12px;
+        font-size: 11px;
         font-weight: var(--w-medium);
         margin-top: 0.25em;
         margin-left: 0.25em;
@@ -46,7 +46,7 @@ export class ContactDetails extends ContactStoreElement {
 
       .row .value {
         margin-left: 0.25em;
-        margin-top: 0.1em;
+        margin-top: 0.35em;
         min-height: 1.75em;
         display: flex;
         flex-wrap: wrap;
@@ -55,6 +55,12 @@ export class ContactDetails extends ContactStoreElement {
 
       .group {
       }
+
+      /* the last row needs no separator — the card edge closes it off */
+      temba-contact-field.last-field {
+        --contact-field-separator: none;
+        margin-bottom: 0;
+      }
     `;
   }
 
@@ -70,6 +76,17 @@ export class ContactDetails extends ContactStoreElement {
 
     return html`
       <div class="wrapper">
+        ${this.data.urns.map((urn) => {
+          let scheme = SCHEMES[urn.scheme];
+          if (!scheme) {
+            scheme = capitalize(urn.scheme as any);
+          }
+          return html`<temba-contact-field
+            name=${scheme}
+            value=${urn.display || urn.path}
+            disabled
+          ></temba-contact-field>`;
+        })}
         ${this.data.groups.length > 0
           ? html` <div class="row">
               <div class="label">Groups</div>
@@ -89,17 +106,6 @@ export class ContactDetails extends ContactStoreElement {
               </div>
             </div>`
           : null}
-        ${this.data.urns.map((urn) => {
-          let scheme = SCHEMES[urn.scheme];
-          if (!scheme) {
-            scheme = capitalize(urn.scheme as any);
-          }
-          return html`<temba-contact-field
-            name=${scheme}
-            value=${urn.display || urn.path}
-            disabled
-          ></temba-contact-field>`;
-        })}
         ${this.data.ref
           ? html`<temba-contact-field
               name="Ref"
@@ -128,6 +134,7 @@ export class ContactDetails extends ContactStoreElement {
           disabled
         ></temba-contact-field>
         <temba-contact-field
+          class="last-field"
           name="Last Seen"
           value=${this.data.last_seen_on}
           type="datetime"

package/src/live/ContactFieldEditor.ts

@@ -61,7 +61,7 @@ export class ContactFieldEditor extends RapidElement {
         --color-widget-bg-focused: #fff;
         --widget-box-shadow: none;
         padding-bottom: 0.6em;
-        border-bottom: 1px solid #ececec;
+        border-bottom: var(--contact-field-separator, 1px solid #ececec);
       }
 
       .wrapper.disabled {
@@ -108,9 +108,12 @@ export class ContactFieldEditor extends RapidElement {
         text-overflow: ellipsis;
       }
 
+      /* read-only rows set the label clearly apart from the value — the
+         same quiet label treatment as .field-label on the editable rows,
+         a touch smaller, over a full-color value */
       .label .name {
         color: var(--text-2);
-        font-size: 12px;
+        font-size: 11px;
         font-weight: var(--w-medium);
       }
 
@@ -120,8 +123,9 @@ export class ContactFieldEditor extends RapidElement {
       }
 
       .disabled .value {
+        color: var(--text-1);
         margin-left: 0.25em;
-        margin-top: 0.1em;
+        margin-top: 0.35em;
         min-height: 1.75em;
       }
 

package/src/live/ContactStoreElement.ts

@@ -66,7 +66,8 @@ export class ContactStoreElement extends EndpointMonitorElement {
   }
 
   public willUpdate(changed: PropertyValues): void {
-    super.willUpdate(changed);
+    // derive our url before the base class runs so it sees the url change
+    // in this same pass (clearing stale data when the contact is unset)
     if (changed.has('contact') || changed.has('endpoint')) {
       if (this.contact) {
         this.url = `${this.endpoint}${this.contact}`;
@@ -74,5 +75,6 @@ export class ContactStoreElement extends EndpointMonitorElement {
         this.url = null;
       }
     }
+    super.willUpdate(changed);
   }
 }

package/src/live/ContactTimeline.ts

@@ -115,7 +115,9 @@ export class ContactTimeline extends EndpointMonitorElement {
         flex-direction: column;
         align-items: center;
         text-align: center;
-        padding: 7em 1em 4em;
+        /* a host card sets --empty-padding to compact this treatment —
+           the default suits a full-height tab pane */
+        padding: var(--empty-padding, 7em 1em 4em);
         color: var(--text-color);
       }
 
@@ -124,9 +126,17 @@ export class ContactTimeline extends EndpointMonitorElement {
         --icon-color: var(--text-3, #7b8593);
       }
 
+      /* the icon / blurb / link around the title — a host card hides
+         these so the empty card is just the stylized message */
+      .empty-extras {
+        display: var(--empty-extras-display, contents);
+      }
+
       .empty-title {
         font-weight: 600;
         margin-bottom: 0.4em;
+        font-size: var(--empty-title-size, inherit);
+        color: var(--empty-title-color, inherit);
       }
 
       .empty-help {
@@ -547,7 +557,14 @@ export class ContactTimeline extends EndpointMonitorElement {
             : Array.isArray(this.data.future)
               ? this.data.future.length
               : 0;
-        this.fireCustomEvent(CustomEventType.DetailsChanged, { count });
+        // empty mirrors the render()'s empty-state condition so a host
+        // card can drop its chrome entirely when there's nothing to show
+        const empty =
+          count === 0 &&
+          !(Array.isArray(this.data.campaigns) && this.data.campaigns.length) &&
+          !(Array.isArray(this.data.future) && this.data.future.length) &&
+          !(Array.isArray(this.data.past) && this.data.past.length);
+        this.fireCustomEvent(CustomEventType.DetailsChanged, { count, empty });
       }
     }
   }
@@ -810,12 +827,16 @@ export class ContactTimeline extends EndpointMonitorElement {
     ) {
       return html`<div class="empty">
         <slot name="empty">
-          <temba-icon name=${Icon.schedule} size="2"></temba-icon>
+          <div class="empty-extras">
+            <temba-icon name=${Icon.schedule} size="2"></temba-icon>
+          </div>
           <div class="empty-title">${this.lang_empty}</div>
-          <div class="empty-help">${this.lang_empty_help}</div>
-          <a class="empty-link" href="/campaign/" onclick="goto(event, this)"
-            >${this.lang_campaigns_link}</a
-          >
+          <div class="empty-extras">
+            <div class="empty-help">${this.lang_empty_help}</div>
+            <a class="empty-link" href="/campaign/" onclick="goto(event, this)"
+              >${this.lang_campaigns_link}</a
+            >
+          </div>
         </slot>
       </div>`;
     }

package/src/locales/es.ts

@@ -13,6 +13,10 @@
 's73b4d70c02f4b4e0': `No options`,
 'sbc913d7dc0f33877': `to add`,
 's81f17cfc89a04338': `Interrupt flow`,
+'s122d4de68bcfcdf4': `It's okay to restart`,
+'s3eb2567092b4d7c1': `from the beginning`,
+'s28f37776b3901438': `It's okay to interrupt`,
+'s6838d20b10f7512a': `and start this one`,
 '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

@@ -13,6 +13,10 @@
 'scf1453991c986b25': `Tab to complete, enter to select`,
 'sbc913d7dc0f33877': `to add`,
 's81f17cfc89a04338': `Interrupt flow`,
+'s122d4de68bcfcdf4': `It's okay to restart`,
+'s3eb2567092b4d7c1': `from the beginning`,
+'s28f37776b3901438': `It's okay to interrupt`,
+'s6838d20b10f7512a': `and start this one`,
 '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/pt.ts

@@ -13,6 +13,10 @@
 'scf1453991c986b25': `Tab to complete, enter to select`,
 'sbc913d7dc0f33877': `to add`,
 's81f17cfc89a04338': `Interrupt flow`,
+'s122d4de68bcfcdf4': `It's okay to restart`,
+'s3eb2567092b4d7c1': `from the beginning`,
+'s28f37776b3901438': `It's okay to interrupt`,
+'s6838d20b10f7512a': `and start this one`,
 '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`,