@nyaruka/temba-components 0.167.0 → 0.168.0

package/src/display/Dropdown.ts

@@ -70,6 +70,10 @@ export class Dropdown extends RapidElement {
         transform: translateY(0.5em) scale(1);
       }
 
+      .open .dropdown.up {
+        transform: translateY(-0.5em) scale(1);
+      }
+
       .mask {
         position: absolute;
         left: 0;
@@ -109,10 +113,22 @@ export class Dropdown extends RapidElement {
   @property({ type: Boolean })
   mask = false;
 
+  // prefer opening above the toggle, falling back to below if there's no room
+  @property({ type: Boolean })
+  up = false;
+
+  // optional selector for the element inside the toggle slot to position
+  // against, e.g. the visible button rather than its padded wrapper
+  @property({ type: String })
+  anchor = '';
+
   dropdownStyle: Record<string, string> = {};
 
   arrowStyle: Record<string, string> = {};
 
+  // whether the last position calculation opened us above the toggle
+  private openedUp = false;
+
   constructor() {
     super();
     this.calculatePosition = this.calculatePosition.bind(this);
@@ -150,6 +166,7 @@ export class Dropdown extends RapidElement {
     // reset position so calculatePosition() sees the natural bounds
     this.dropdownStyle = {};
     this.arrowStyle = {};
+    this.openedUp = this.up;
 
     this.open = true;
     this.dormant = false;
@@ -175,6 +192,12 @@ export class Dropdown extends RapidElement {
     this.blur();
   }
 
+  public close() {
+    if (this.open) {
+      this.closeDropdown();
+    }
+  }
+
   public updated(changedProperties: Map<string, any>) {
     super.updated(changedProperties);
 
@@ -191,19 +214,14 @@ export class Dropdown extends RapidElement {
     ) as HTMLDivElement;
     const toggle = this.querySelector('*[slot="toggle"]');
 
-    const arrow = this.shadowRoot.querySelector('.arrow') as HTMLDivElement;
-
     let bumpedUp = false;
     let bumpedLeft = false;
 
     if (dropdown && toggle) {
+      const anchor =
+        (this.anchor && toggle.querySelector(this.anchor)) || toggle;
       const dropdownBounds = dropdown.getBoundingClientRect();
-      const toggleBounds = toggle.getBoundingClientRect();
-      const arrowBounds = arrow.getBoundingClientRect();
-
-      if (!toggle) {
-        return;
-      }
+      const toggleBounds = anchor.getBoundingClientRect();
 
       // Anchor the dropdown to the toggle's viewport coordinates.
       // The dropdown is `position: fixed`, so viewport coords are
@@ -223,20 +241,24 @@ export class Dropdown extends RapidElement {
       if (toggleBounds.left + dropdownBounds.width > window.innerWidth) {
         dropdownStyle['left'] =
           toggleBounds.right - dropdownBounds.width + 'px';
-        delete dropdownStyle['right'];
         bumpedLeft = true;
       }
 
-      // if off to the bottom, bump it up
-      if (toggleBounds.bottom + dropdownBounds.height > window.innerHeight) {
-        dropdownStyle['top'] = toggleBounds.top - dropdownBounds.height + 'px';
-        dropdownStyle['marginTop'] = '-0.5em';
+      // if preferred up and there's room, or we'd fall off the bottom, bump
+      // it up, leaving room for the arrow to point at the top of the toggle
+      if (
+        (this.up &&
+          toggleBounds.top > dropdownBounds.height + this.arrowSize) ||
+        toggleBounds.bottom + dropdownBounds.height > window.innerHeight
+      ) {
+        dropdownStyle['top'] =
+          toggleBounds.top - dropdownBounds.height - this.arrowSize + 'px';
         bumpedUp = true;
       }
 
       // if our arrow is aligned with the left of the dropdown, scootch
       // the dropdown left a pinch so our arrow still overlaps properly
-      let arrowLeft = toggleBounds.width / 2 - arrowBounds.width / 2;
+      let arrowLeft = toggleBounds.width / 2 - this.arrowSize;
       if (arrowLeft <= 0) {
         dropdownStyle['marginLeft'] = '-10px';
         arrowLeft = 10;
@@ -272,13 +294,13 @@ export class Dropdown extends RapidElement {
       }
 
       if (bumpedLeft) {
-        arrowStyle['right'] =
-          toggleBounds.width / 2 - arrowBounds.width / 2 + 'px';
+        arrowStyle['right'] = toggleBounds.width / 2 - this.arrowSize + 'px';
         delete arrowStyle['left'];
       }
 
       this.arrowStyle = arrowStyle;
       this.dropdownStyle = dropdownStyle;
+      this.openedUp = bumpedUp;
     }
     this.requestUpdate();
   }
@@ -310,7 +332,8 @@ export class Dropdown extends RapidElement {
         <div
           class="${getClasses({
             dropdown: true,
-            dormant: this.dormant
+            dormant: this.dormant,
+            up: this.openedUp
           })}"
           style=${styleMap(this.dropdownStyle)}
           tabindex="0"

package/src/display/Label.ts

@@ -22,6 +22,12 @@ export default class Label extends LitElement {
            rather than overflowing. The slot/mask below have the
            min-width:0 needed to let the ellipsis engage. */
         max-width: 100%;
+        /* As a flex item the host's automatic minimum size is its
+           full nowrap text width, which refuses to shrink and
+           stretches content-sized ancestors (e.g. the Next Up card)
+           instead of ellipsizing. min-width:0 lets the pill shrink
+           to its container so the slot ellipsis can engage. */
+        min-width: 0;
       }
 
       slot {
@@ -29,10 +35,13 @@ export default class Label extends LitElement {
         overflow-x: hidden;
         text-overflow: ellipsis;
         display: block;
-        /* Without min-width:0 the slot — as a flex item inside .mask —
-           refuses to shrink below its content size, defeating the
-           overflow/ellipsis. */
-        min-width: 0;
+        /* min-width:0 lets the slot — as a flex item inside .mask —
+           shrink below its content size so the overflow/ellipsis can
+           engage. The default is 0 so every label can collapse fully;
+           a consumer that wants a squeezed pill to keep a couple of
+           characters visible (rather than collapsing to bare chrome)
+           opts in by setting --label-min-width (e.g. 2em). */
+        min-width: var(--label-min-width, 0);
       }
 
       .mask {
@@ -198,6 +207,15 @@ export default class Label extends LitElement {
   @property({ type: String })
   icon: string;
 
+  /**
+   * An additional icon rendered ahead of the main icon — e.g. a +/−
+   * qualifier on a group pill ("added to" vs "removed from"). Unlike
+   * `icon` it never falls back to the type's default, so it only
+   * renders when explicitly set.
+   */
+  @property({ type: String, attribute: 'prefix-icon' })
+  prefixIcon: string;
+
   /**
    * Design-system pill variant — `flow`, `group`, `contact`, `field`,
    * `keyword`, `label`, or `neutral`. When set, switches the chrome to
@@ -290,6 +308,9 @@ export default class Label extends LitElement {
                 <temba-icon name="x" size="0.85"></temba-icon>
               </button>`
             : null}
+          ${this.prefixIcon
+            ? html`<temba-icon name=${this.prefixIcon} />`
+            : null}
           ${resolvedIcon ? html`<temba-icon name=${resolvedIcon} />` : null}
           <slot></slot>
         </div>

package/src/display/TembaDate.ts

@@ -92,8 +92,17 @@ export class TembaDate extends RapidElement {
         formatted = this.store.getShortDuration(this.datetime);
       } else if (this.display === Display.countdown) {
         formatted = this.store.getCountdown(this.datetime);
-      } else if (this.display === Display.day) {
-        formatted = this.datetime.toLocaleString(Display.day);
+      } else if (this.display === 'day') {
+        // the display attribute carries the key ('day'), and Display.day
+        // is a luxon format string ('LLL d') rather than an Intl options
+        // object, so it must go through toFormat — matching how the
+        // timedate branch renders the same format above. The short
+        // month-day form is only unambiguous for dates in the current
+        // year; anything else falls back to the locale date with year.
+        formatted =
+          this.datetime.year === DateTime.now().year
+            ? this.datetime.toFormat(Display.day)
+            : this.datetime.toLocaleString(Display.date);
       } else {
         formatted = this.datetime.toLocaleString(Display[this.display]);
       }

package/src/display/Tip.ts

@@ -8,7 +8,9 @@ export class Tip extends RapidElement {
   static get styles() {
     return css`
       .tip {
-        transition: opacity 120ms cubic-bezier(0.2, 0, 0, 1);
+        transition:
+          opacity 120ms cubic-bezier(0.2, 0, 0, 1),
+          transform 120ms cubic-bezier(0.2, 0, 0, 1);
         margin: 0px;
         position: fixed;
         opacity: 0;
@@ -44,11 +46,40 @@ export class Tip extends RapidElement {
         transition: none;
       }
 
+      /* hidden tips sit a few px toward their anchor so showing slides
+         them into position — up, down, or over based on the side */
+      .tip,
+      .tip.side-top {
+        transform: translateY(6px);
+      }
+
+      .tip.side-bottom {
+        transform: translateY(-6px);
+      }
+
+      .tip.side-left {
+        transform: translateX(6px);
+      }
+
+      .tip.side-right {
+        transform: translateX(-6px);
+      }
+
       .show {
         opacity: 1;
         z-index: 2147483647;
       }
 
+      .tip.show {
+        transform: translate(0, 0);
+      }
+
+      /* interactive tips accept the mouse while shown so their
+         contents can be selected or clicked */
+      .tip.interactive.show {
+        pointer-events: auto;
+      }
+
       .slot {
         display: flex;
         flex-direction: column;
@@ -61,20 +92,27 @@ export class Tip extends RapidElement {
         line-height: 0px;
       }
 
+      /* squash the glyphs along their pointing axis (and widen the
+         base a touch) so the arrows read fat and stubby rather than
+         long and pointy */
       .◀ {
         text-shadow: -1px 2px 2px rgba(0, 0, 0, 0.1);
+        transform: scale(0.6, 1.15);
       }
 
       .▶ {
         text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
+        transform: scale(0.6, 1.15);
       }
 
       .▼ {
         text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
+        transform: scale(1.15, 0.6);
       }
 
       .▲ {
         text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.1);
+        transform: scale(1.15, 0.6);
       }
     `;
   }
@@ -91,6 +129,20 @@ export class Tip extends RapidElement {
   @property({ type: String })
   position = 'auto';
 
+  // gap in px between the anchor and the tip edge; when unset, each
+  // side keeps its historical default (10-12px)
+  @property({ type: Number })
+  distance: number = null;
+
+  // font-size of the arrow glyph; offsets scale with it
+  @property({ type: Number, attribute: 'arrow-size' })
+  arrowSize = 10;
+
+  // interactive tips stay open while the mouse is over them so their
+  // contents can be selected or clicked
+  @property({ type: Boolean })
+  interactive = false;
+
   @property({ type: Boolean })
   hideOnChange: boolean;
 
@@ -114,6 +166,10 @@ export class Tip extends RapidElement {
   arrowLeft: number;
   arrowDirection: string;
 
+  // the side the tip last popped on, driving which direction it
+  // slides in from
+  side: string;
+
   showTimer = 0;
   hideTimer = 0;
 
@@ -122,6 +178,50 @@ export class Tip extends RapidElement {
     if (changed.has('text') && this.hideOnChange) {
       this.visible = false;
     }
+
+    // stamp the placement side before the show transition starts so
+    // the very first pop already slides in from the correct direction
+    if (changed.has('visible') && this.visible) {
+      this.prepareSide();
+    }
+  }
+
+  /**
+   * Measures where the tip will pop and applies the matching side-*
+   * class while the tip is still hidden, flushing styles so the slide
+   * animation starts from that side's offset rather than the default.
+   */
+  private prepareSide() {
+    const tipEl = this.getDiv('.tip') as HTMLElement;
+    const anchorEl = this.getDiv('.slot') as HTMLElement;
+    if (!tipEl || !anchorEl) {
+      return;
+    }
+
+    const side = this.chooseSide(
+      this.position,
+      anchorEl.getBoundingClientRect(),
+      tipEl.getBoundingClientRect(),
+      8
+    );
+
+    if (side !== this.side) {
+      this.side = side;
+      // snap (not animate) the hidden tip to the new side's offset so
+      // the show transition starts from there — without suppressing
+      // the transition, the class swap itself animates and the show
+      // retargets from the old offset mid-flight
+      tipEl.style.transition = 'none';
+      tipEl.classList.remove(
+        'side-top',
+        'side-bottom',
+        'side-left',
+        'side-right'
+      );
+      tipEl.classList.add(`side-${side}`);
+      void tipEl.offsetWidth;
+      tipEl.style.transition = '';
+    }
   }
 
   public updated(changed: Map<string, any>) {
@@ -144,38 +244,46 @@ export class Tip extends RapidElement {
         tipBounds,
         viewportPadding
       );
+      this.side = side;
 
       this.arrowLeft = 0;
       this.arrowTop = 0;
 
+      // arrow offsets scale with the glyph size; the constants
+      // reproduce the historical values at the default size of 10
+      const arrow = this.arrowSize;
+
       if (side === 'left') {
-        this.left = anchorBounds.left - tipBounds.width - 10;
+        this.left = anchorBounds.left - tipBounds.width - (this.distance ?? 10);
         this.top = getMiddle(anchorBounds, tipBounds);
 
-        // position our arrow
+        // center the glyph box on the tip edge so the arrow always
+        // touches the tip regardless of glyph metrics
         this.arrowTop = tipBounds.height / 2;
-        this.arrowLeft = tipBounds.width + 2;
+        this.arrowLeft = tipBounds.width - arrow * 0.5;
         this.arrow = '▶';
       } else if (side === 'right') {
-        this.left = anchorBounds.right + 12;
+        this.left = anchorBounds.right + (this.distance ?? 12);
         this.top = getMiddle(anchorBounds, tipBounds);
 
         this.arrowTop = tipBounds.height / 2;
-        this.arrowLeft = -8;
+        this.arrowLeft = -arrow * 0.5;
         this.arrow = '◀';
       } else if (side === 'top') {
-        this.top = anchorBounds.top - tipBounds.height - 12;
+        this.top = anchorBounds.top - tipBounds.height - (this.distance ?? 12);
         this.left = getCenter(anchorBounds, tipBounds);
 
-        this.arrowTop = tipBounds.height + 2;
-        this.arrowLeft = tipBounds.width / 2 - 4;
+        // tucked in slightly so the squashed glyph's base stays
+        // buried under the tip edge
+        this.arrowTop = tipBounds.height + arrow * 0.1;
+        this.arrowLeft = tipBounds.width / 2 - arrow * 0.4;
         this.arrow = '▼';
       } else if (side === 'bottom') {
-        this.top = anchorBounds.bottom + 10;
+        this.top = anchorBounds.bottom + (this.distance ?? 10);
         this.left = getCenter(anchorBounds, tipBounds);
 
-        this.arrowTop = -2;
-        this.arrowLeft = tipBounds.width / 2 - 3;
+        this.arrowTop = -arrow * 0.1;
+        this.arrowLeft = tipBounds.width / 2 - arrow * 0.3;
         this.arrow = '▲';
       }
 
@@ -194,7 +302,11 @@ export class Tip extends RapidElement {
 
       if (side === 'top' || side === 'bottom') {
         this.arrowLeft -= leftDelta;
-        this.arrowLeft = this.clamp(this.arrowLeft, 8, tipBounds.width - 14);
+        this.arrowLeft = this.clamp(
+          this.arrowLeft,
+          8,
+          tipBounds.width - (arrow + 4)
+        );
       } else {
         this.arrowTop -= topDelta;
         this.arrowTop = this.clamp(this.arrowTop, 8, tipBounds.height - 8);
@@ -207,6 +319,13 @@ export class Tip extends RapidElement {
       this.arrowLeft = Math.round(this.arrowLeft);
 
       // directly update DOM to avoid scheduling another update
+      tipEl.classList.remove(
+        'side-top',
+        'side-bottom',
+        'side-left',
+        'side-right'
+      );
+      tipEl.classList.add(`side-${side}`);
       tipEl.style.top = `${this.top}px`;
       tipEl.style.left = `${this.left}px`;
       arrowEl.style.top = `${this.arrowTop}px`;
@@ -291,15 +410,27 @@ export class Tip extends RapidElement {
   private handleMouseLeave() {
     window.clearTimeout(this.showTimer);
     window.clearTimeout(this.hideTimer);
-    if (this.hideDelay > 0) {
+
+    // interactive tips linger long enough for the mouse to travel from
+    // the anchor into the tip itself
+    const hideDelay = this.interactive
+      ? Math.max(this.hideDelay, 300)
+      : this.hideDelay;
+
+    if (hideDelay > 0) {
       this.hideTimer = window.setTimeout(() => {
         this.visible = false;
-      }, this.hideDelay);
+      }, hideDelay);
       return;
     }
     this.visible = false;
   }
 
+  private handleTipMouseEnter() {
+    // the mouse made it into the tip — cancel any pending hide
+    window.clearTimeout(this.hideTimer);
+  }
+
   public render(): TemplateResult {
     const tipStyle: any = {
       top: this.top ? `${this.top}px` : '0px',
@@ -308,7 +439,8 @@ export class Tip extends RapidElement {
 
     const arrowStyle: any = {
       top: this.arrowTop ? `${this.arrowTop}px` : '0px',
-      left: this.arrowLeft ? `${this.arrowLeft}px` : '0px'
+      left: this.arrowLeft ? `${this.arrowLeft}px` : '0px',
+      fontSize: `${this.arrowSize}px`
     };
 
     if (this.width) {
@@ -319,7 +451,9 @@ export class Tip extends RapidElement {
       tip: true,
       show: this.visible,
       top: this.poppedTop,
-      'hide-on-change': this.hideOnChange
+      interactive: this.interactive,
+      'hide-on-change': this.hideOnChange,
+      [`side-${this.side}`]: !!this.side
     });
 
     return html`
@@ -331,7 +465,12 @@ export class Tip extends RapidElement {
       >
         <slot></slot>
       </div>
-      <div class="${classes}" style=${styleMap(tipStyle)}>
+      <div
+        class="${classes}"
+        style=${styleMap(tipStyle)}
+        @mouseenter=${this.handleTipMouseEnter}
+        @mouseleave=${this.handleMouseLeave}
+      >
         ${this.content ?? this.text}
         <div class="arrow" style=${styleMap(arrowStyle)}></div>
       </div>