@nyaruka/temba-components 0.171.0 → 0.172.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.171.0",
+  "version": "0.172.0",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/src/RapidElement.ts

@@ -40,6 +40,34 @@ export interface EventHandler {
   isWindow?: boolean;
 }
 
+/**
+ * Inline handlers compiled from an element's -<event-type> attribute, keyed
+ * by their source. Page authors write a finite set of these, so compiling
+ * each one once keeps dispatch off the Function constructor entirely.
+ */
+const inlineHandlers = new Map<string, (event: Event) => any>();
+
+const compileInlineHandler = (source: string): ((event: Event) => any) => {
+  let compiled = inlineHandlers.get(source);
+  if (!compiled) {
+    compiled = new Function(
+      'event',
+      `
+        with(document) {
+          with(this) {
+            let handler = ${source};
+            if(typeof handler === 'function') {
+              handler(event);
+            }
+          }
+        }
+      `
+    ) as (event: Event) => any;
+    inlineHandlers.set(source, compiled);
+  }
+  return compiled;
+};
+
 export class RapidElement extends LitElement {
   DEBUG = false;
   DEBUG_UPDATES = false;
@@ -49,34 +77,50 @@ export class RapidElement extends LitElement {
   service: string;
 
   private eles: { [selector: string]: HTMLDivElement } = {};
+
+  // teardowns for the listeners we installed, so disconnecting removes the
+  // exact functions we added
+  private listenerTeardowns: (() => void)[] = [];
+
   public getEventHandlers(): EventHandler[] {
     return [];
   }
 
+  /**
+   * Adds a listener this element owns the teardown for - it is bound to this
+   * element and removed automatically when we disconnect. Use this instead of
+   * addEventListener for anything on document or window, where a listener
+   * that outlives its element keeps the whole element alive.
+   */
+  public listenTo(
+    target: EventTarget,
+    event: string,
+    method: EventListener,
+    options?: AddEventListenerOptions
+  ): void {
+    const bound = method.bind(this);
+    target.addEventListener(event, bound, options);
+    this.listenerTeardowns.push(() =>
+      target.removeEventListener(event, bound, options)
+    );
+  }
+
   connectedCallback() {
     super.connectedCallback();
 
     for (const handler of this.getEventHandlers()) {
-      if (handler.isDocument) {
-        document.addEventListener(handler.event, handler.method.bind(this));
-      } else if (handler.isWindow) {
-        window.addEventListener(handler.event, handler.method.bind(this));
-      } else {
-        this.addEventListener(handler.event, handler.method.bind(this));
-      }
+      const target = handler.isDocument
+        ? document
+        : handler.isWindow
+          ? window
+          : this;
+      this.listenTo(target, handler.event, handler.method);
     }
   }
 
   disconnectedCallback() {
-    for (const handler of this.getEventHandlers()) {
-      if (handler.isDocument) {
-        document.removeEventListener(handler.event, handler.method);
-      } else if (handler.isWindow) {
-        window.removeEventListener(handler.event, handler.method);
-      } else {
-        this.removeEventListener(handler.event, handler.method);
-      }
-    }
+    this.listenerTeardowns.forEach((teardown) => teardown());
+    this.listenerTeardowns = [];
     super.disconnectedCallback();
   }
 
@@ -121,9 +165,7 @@ export class RapidElement extends LitElement {
   }
 
   public fireCustomEvent(type: CustomEventType, detail: any = {}): any {
-    if (this['DEBUG_EVENTS']) {
-      showEvent(this, type, detail);
-    }
+    showEvent(this, type, detail);
 
     const event = new CustomEvent(type, {
       detail,
@@ -135,30 +177,30 @@ export class RapidElement extends LitElement {
   }
 
   public dispatchEvent(event: any): any {
-    super.dispatchEvent(event);
+    const dispatched = super.dispatchEvent(event);
+
+    // the page can hang a handler off the target for any of our events, as a
+    // -<event-type> property or an attribute of the same name
     const ele = event.target;
-    if (ele) {
-      // lookup events with - prefix and try to invoke them
-      const eventFire = (ele as any)['-' + event.type];
-      if (eventFire) {
-        return eventFire(event);
-      } else {
-        const func = new Function(
-          'event',
-          `
-          with(document) {
-            with(this) {
-              let handler = ${ele.getAttribute('-' + event.type)};
-              if(typeof handler === 'function') { 
-                handler(event);
-              }
-            }
-          }
-        `
-        );
-        return func.call(ele, event);
-      }
+    if (!ele) {
+      return dispatched;
+    }
+
+    const eventFire = (ele as any)['-' + event.type];
+    if (eventFire) {
+      return eventFire(event);
     }
+
+    const inline = ele.getAttribute ? ele.getAttribute('-' + event.type) : null;
+    if (!inline) {
+      return dispatched;
+    }
+
+    // the compiled handler has no return value of its own, so handing its
+    // undefined back would read as a cancelled event - what the caller wants
+    // to know is whether anything called preventDefault
+    compileInlineHandler(inline).call(ele, event);
+    return dispatched;
   }
 
   public closestElement(selector: string, base: Element = this) {

package/src/display/Button.ts

@@ -101,9 +101,11 @@ export class Button extends LitElement {
         background: var(--success, #16a34a);
         color: #fff;
       }
+      /* Hover darkening: static pre-mixed values first for browsers
+         without color-mix(), re-derived from the token below. */
       .attention-button:hover,
       .affirmative:hover {
-        background: color-mix(in srgb, var(--success, #16a34a) 88%, black);
+        background: #138f41;
       }
 
       /* DS .btn-danger — flat danger fill (no lift). */
@@ -112,7 +114,17 @@ export class Button extends LitElement {
         color: #fff;
       }
       .destructive-button:hover {
-        background: color-mix(in srgb, var(--danger, #d03f3f) 88%, black);
+        background: #b73737;
+      }
+
+      @supports (color: color-mix(in srgb, red, red)) {
+        .attention-button:hover,
+        .affirmative:hover {
+          background: color-mix(in srgb, var(--success, #16a34a) 88%, black);
+        }
+        .destructive-button:hover {
+          background: color-mix(in srgb, var(--danger, #d03f3f) 88%, black);
+        }
       }
 
       /* DS .btn-ghost — text-only, hover fills with sunken */

package/src/display/Chat.ts

@@ -518,19 +518,15 @@ export class Chat extends RapidElement {
          same theme vars the flat fills used — color-mix keeps host
          re-theming working — with a whisper of shadow for depth and
          a hairline border mixed just darker than the fill so bubbles
-         hold their edge against the background. */
+         hold their edge against the background. Base rules carry flat
+         fills and pre-mixed borders for browsers without color-mix()
+         (pre-Chrome 111); the @supports block below layers the
+         gradients on top. */
       .bubble {
         padding: 10px 14px;
-        background: linear-gradient(
-          180deg,
-          color-mix(in srgb, var(--color-chat-in, #e5e5ea) 62%, white) 0%,
-          var(--color-chat-in, #e5e5ea) 100%
-        );
+        background: var(--color-chat-in, #e5e5ea);
         border-radius: 18px;
-        border: var(
-          --chat-border-in,
-          1px solid color-mix(in srgb, var(--color-chat-in, #e5e5ea) 93%, black)
-        );
+        border: var(--chat-border-in, 1px solid #d5d5da);
         box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
       }
 
@@ -550,20 +546,40 @@ export class Chat extends RapidElement {
       }
 
       .incoming .bubble {
-        background: linear-gradient(
-          180deg,
-          color-mix(in srgb, var(--color-chat-out, #007aff) 90%, white) 0%,
-          var(--color-chat-out, #007aff) 58%,
-          color-mix(in srgb, var(--color-chat-out, #007aff) 95%, black) 100%
-        );
-        border: var(
-          --chat-border-out,
-          1px solid
-            color-mix(in srgb, var(--color-chat-out, #007aff) 90%, black)
-        );
+        background: var(--color-chat-out, #007aff);
+        border: var(--chat-border-out, 1px solid #006ee6);
         color: white;
       }
 
+      @supports (color: color-mix(in srgb, red, red)) {
+        .bubble {
+          background: linear-gradient(
+            180deg,
+            color-mix(in srgb, var(--color-chat-in, #e5e5ea) 62%, white) 0%,
+            var(--color-chat-in, #e5e5ea) 100%
+          );
+          border: var(
+            --chat-border-in,
+            1px solid
+              color-mix(in srgb, var(--color-chat-in, #e5e5ea) 93%, black)
+          );
+        }
+
+        .incoming .bubble {
+          background: linear-gradient(
+            180deg,
+            color-mix(in srgb, var(--color-chat-out, #007aff) 90%, white) 0%,
+            var(--color-chat-out, #007aff) 58%,
+            color-mix(in srgb, var(--color-chat-out, #007aff) 95%, black) 100%
+          );
+          border: var(
+            --chat-border-out,
+            1px solid
+              color-mix(in srgb, var(--color-chat-out, #007aff) 90%, black)
+          );
+        }
+      }
+
       .incoming .latest .bubble {
         border-bottom-right-radius: 4px;
       }
@@ -573,8 +589,11 @@ export class Chat extends RapidElement {
       }
 
       /* Notes get the same top-lit gradient treatment as message
-         bubbles, derived from their sticky-note yellow. */
+         bubbles, derived from their sticky-note yellow. The flat fill
+         first is the fallback for browsers without color-mix() — all
+         literals here, so the invalid gradient drops at parse time. */
       .note .bubble {
+        background: #fffac3;
         background: linear-gradient(
           180deg,
           color-mix(in srgb, #fffac3 62%, white) 0%,

package/src/display/Label.ts

@@ -100,7 +100,10 @@ export default class Label extends LitElement {
          dark variant shade), so flow stays bluish, group stays purplish,
          etc. — no grey wash. */
       .label[class*='pill-'].clickable .mask:hover {
-        background: color-mix(in oklab, currentColor 10%, transparent);
+        /* Neutral wash first for browsers without color-mix() — the
+           currentColor mix can't fall back per-declaration because
+           currentColor keeps it valid until computed-value time. */
+        background: rgba(0, 0, 0, 0.06);
       }
       .label[class*='pill-'] temba-icon {
         margin-right: 0;
@@ -121,14 +124,26 @@ export default class Label extends LitElement {
         margin: 0;
         border: 0;
         border-radius: 999px;
-        background: color-mix(in oklab, currentColor 25%, transparent);
+        background: rgba(0, 0, 0, 0.12);
         color: inherit;
         opacity: 0.8;
         --icon-color: currentColor;
       }
       .label[class*='pill-'] .remove:hover {
         opacity: 1;
-        background: color-mix(in oklab, currentColor 45%, transparent);
+        background: rgba(0, 0, 0, 0.22);
+      }
+
+      @supports (color: color-mix(in srgb, red, red)) {
+        .label[class*='pill-'].clickable .mask:hover {
+          background: color-mix(in oklab, currentColor 10%, transparent);
+        }
+        .label[class*='pill-'] .remove {
+          background: color-mix(in oklab, currentColor 25%, transparent);
+        }
+        .label[class*='pill-'] .remove:hover {
+          background: color-mix(in oklab, currentColor 45%, transparent);
+        }
       }
 
       /* When a removable X is present, tighten the mask's left padding

package/src/events/eventRenderers.ts

@@ -59,6 +59,10 @@ export enum Events {
   TICKET_OPENED = 'ticket_opened',
   TICKET_REOPENED = 'ticket_reopened',
   TICKET_TOPIC_CHANGED = 'ticket_topic_changed',
+  // ephemeral, drives the chat's typing indicator instead of recording
+  // history - published by agents as they compose and never persisted
+  TYPING_STARTED = 'typing_started',
+  TYPING_STOPPED = 'typing_stopped',
   WARNING = 'warning',
   WEBHOOK_CALLED = 'webhook_called'
 }