@nyaruka/temba-components 0.172.0 → 0.173.0

package/package.json

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

package/src/Icons.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-duplicate-enum-values */
 // for cache busting we dynamically generate a fingerprint, use bun run svg to update
-export const SVG_FINGERPRINT = '27198f759c371df944f8ec5de0a29dd6';
+export const SVG_FINGERPRINT = '132907abcfa6a4611ba27470e2c5c2c0';
 
 // only icons below are included in the sprite sheet
 export enum Icon {
@@ -58,6 +58,7 @@ export enum Icon {
   delete = 'trash-03',
   delete_small = 'x',
   docs = 'file-02',
+  documents = 'folder',
   down = 'chevron-down',
   down_double = 'chevron-down-double',
   download = 'download-01',
@@ -97,6 +98,7 @@ export enum Icon {
   integrations = 'layers-three-01',
   invitations = 'user-plus-01',
   issue = 'alert-square',
+  knowledge = 'book-open-01',
   label = 'tag-01',
   language = 'translate-01',
   language_default = 'switch-horizontal-01',
@@ -210,6 +212,7 @@ export enum Icon {
   users = 'users-01',
   video = 'video-recorder',
   webhook = 'link-external-01',
+  website = 'layout-alt-03',
   workspace = 'folder',
   zoom_fit = 'maximize-02',
   zoom_in = 'expand-06',

package/src/interfaces.ts

@@ -525,6 +525,8 @@ export enum CustomEventType {
   RevisionReverted = 'temba-revision-reverted',
   RevisionsClosed = 'temba-revisions-closed',
   RowClick = 'temba-row-click',
+  ShortcutEdit = 'temba-shortcut-edit',
+  ShortcutDelete = 'temba-shortcut-delete',
   SelectionChange = 'temba-selection-change',
   BulkAction = 'temba-bulk-action',
   /** The label dropdown's "New Label…" row was clicked — detail

package/src/layout/HeaderBar.ts

@@ -14,13 +14,19 @@ export class HeaderBar extends RapidElement {
       ${designTokens}
 
       :host {
+        /* The single source for the bar's inset — it sets the horizontal
+           padding here and, for fit-content bars, the vertical padding the
+           slotted page header inherits. Both axes move together by
+           construction, so the surround can't drift. */
+        --header-bar-inset: 8px;
+
         flex: 0 0 auto;
         display: flex;
         align-items: center;
         /* 52px strip plus the 1px rule */
-        height: 53px;
+        height: var(--header-h);
         box-sizing: border-box;
-        padding: 0 8px;
+        padding: 0 var(--header-bar-inset);
         background: var(--surface);
         /* the rule is a box-shadow, not a border — host pages (tailwind
            preflight) reset border-width on every element, and outer-scope
@@ -28,6 +34,26 @@ export class HeaderBar extends RapidElement {
         box-shadow: inset 0 -1px 0 0 var(--border);
       }
 
+      /* Standalone page headers keep the strip height as a floor but grow
+         for taller content (a subtitle), with the same surround on every
+         side either way.
+
+         The inset is solved for rather than picked: it's the padding that
+         makes inset + one title line + inset come out at exactly the strip
+         height, so a single-line title fills the strip with balanced
+         spacing. That's why the floor is expressed as height, not as a
+         min-height the padding has to fight — with the inset derived this
+         way the content already meets the floor, so there's never slack for
+         flex centering to absorb into an uneven gap above and below. */
+      :host([fit-content]) {
+        --header-bar-inset: calc((var(--header-h) - var(--title-line)) / 2);
+        --page-header-padding: var(--header-bar-inset) 0;
+
+        align-items: stretch;
+        height: auto;
+        min-height: var(--header-h);
+      }
+
       ::slotted(*) {
         flex-grow: 1;
         min-width: 0;

package/src/layout/PageHeader.ts

@@ -49,14 +49,19 @@ export class PageHeader extends RapidElement {
       /* One row: the title/subtitle block on the left and the
          actions/content-menu on the right, vertically centered against
          each other. The title block is the flexing column so the
-         actions hold their size. The vertical padding matches the
-         horizontal inset the host supplies (the list panel's 20px) so
-         the whole header is wrapped in even, consistent padding. */
+         actions hold their size. Hosts tune the vertical padding to match
+         their own horizontal inset — list panels use the default, header
+         bars pass down theirs — so the header always ends up with an even
+         surround. The height follows from that padding plus the content; a
+         host wanting a taller strip should raise the padding rather than
+         impose a height, which would be absorbed into the gap around the
+         title instead of growing the box. */
       .header {
+        box-sizing: border-box;
         display: flex;
         align-items: center;
         gap: var(--gap);
-        padding: 12px 0;
+        padding: var(--page-header-padding, 12px 0);
       }
       /* Title + subtitle stacked tight, sharing the left column. It
          flexes and clips so a long subtitle truncates against the
@@ -68,13 +73,15 @@ export class PageHeader extends RapidElement {
         flex-direction: column;
         gap: 1px;
       }
+      /* Sized from the shared tokens — temba-header-bar solves its inset
+         against --title-line, so the two stay in step. */
       .title {
-        font-size: 15.5px;
+        font-size: var(--title-size);
         /* slotted contact names render at the title's size */
-        --contact-name-font-size: 15.5px;
+        --contact-name-font-size: var(--title-size);
         font-weight: var(--w-semibold);
         color: var(--text-1);
-        line-height: 1.25;
+        line-height: var(--title-leading);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;

package/src/list/ShortcutContentList.ts

@@ -0,0 +1,347 @@
+import { css, html, TemplateResult } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { Icon } from '../Icons';
+import { CustomEventType, Shortcut } from '../interfaces';
+import { ContentList, ContentListColumn } from './ContentList';
+
+/**
+ * Shortcut management list used by the Tickets knowledge page. This is
+ * intentionally separate from `temba-shortcuts`, which is the compact picker
+ * shown while composing a ticket reply.
+ */
+export class ShortcutContentList extends ContentList<Shortcut> {
+  static get styles() {
+    return css`
+      ${ContentList.styles}
+
+      tr.row {
+        cursor: pointer;
+      }
+
+      .table-frame {
+        margin-left: -20px;
+      }
+
+      tr.header th:first-child,
+      tr.row td:first-child {
+        padding-left: 20px;
+      }
+
+      tr.header th:last-child,
+      tr.row td:last-child {
+        padding-right: 20px;
+      }
+
+      .shortcut-name {
+        font-weight: var(--w-medium);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .shortcut-text {
+        color: var(--text-2);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .detail {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .detail-header {
+        align-items: center;
+        border-bottom: 1px solid var(--border);
+        display: flex;
+        gap: 12px;
+        padding: 1em;
+      }
+
+      .detail-title-block {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        gap: 4px;
+        min-width: 0;
+      }
+
+      .detail-title {
+        color: var(--text-1);
+        font-size: 15.5px;
+        font-weight: var(--w-semibold);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .detail-meta {
+        color: var(--text-3);
+        font-size: 0.9em;
+      }
+
+      .detail-actions {
+        align-items: center;
+        display: flex;
+        flex-shrink: 0;
+        gap: 8px;
+      }
+
+      .menu-button {
+        align-items: center;
+        background: var(--surface);
+        border: 1px solid var(--border-strong);
+        border-radius: var(--r-sm);
+        box-sizing: border-box;
+        color: var(--text-1);
+        cursor: pointer;
+        display: inline-flex;
+        font-size: 12.5px;
+        height: 26px;
+        padding: 0 10px;
+        white-space: nowrap;
+      }
+
+      .menu-button:hover {
+        background: var(--sunken);
+      }
+
+      .menu-button.destructive {
+        color: var(--danger);
+      }
+
+      .menu-button.destructive:hover {
+        border-color: var(--danger);
+        background: color-mix(in srgb, var(--danger) 6%, var(--surface));
+      }
+
+      .detail-close {
+        align-items: center;
+        border-radius: var(--r-sm);
+        color: var(--text-3);
+        cursor: pointer;
+        display: inline-flex;
+        flex-shrink: 0;
+        height: 28px;
+        justify-content: center;
+        user-select: none;
+        width: 28px;
+      }
+
+      .detail-close:hover {
+        background: var(--sunken);
+        color: var(--text-1);
+      }
+
+      .detail-close temba-icon {
+        --icon-color: currentColor;
+      }
+
+      .detail-body {
+        max-height: calc(100vh - 300px);
+        overflow-y: auto;
+        padding: 1.25em 1.75em;
+      }
+
+      .detail-response {
+        background: color-mix(in srgb, var(--sunken) 45%, var(--surface));
+        border: 1px solid var(--border);
+        border-radius: var(--r);
+        color: var(--text-1);
+        line-height: 1.5;
+        padding: 0.9em 1em 1em;
+      }
+
+      /* pre-wrap lives on the text node's own element so the template's
+         indentation around the interpolation isn't rendered as leading
+         whitespace */
+      .detail-text {
+        overflow-wrap: anywhere;
+        white-space: pre-wrap;
+      }
+
+      .detail-section-title {
+        color: var(--text-3);
+        font-size: 0.75em;
+        font-weight: var(--w-semibold);
+        letter-spacing: 0.05em;
+        margin-bottom: 0.6em;
+        text-transform: uppercase;
+      }
+    `;
+  }
+
+  @property({ type: Boolean })
+  editable = false;
+
+  @property({ type: Boolean })
+  deletable = false;
+
+  @state()
+  private detailShortcut: Shortcut = null;
+
+  constructor() {
+    super();
+    this.valueKey = 'uuid';
+    this.emptyMessage = 'No shortcuts';
+    this.searchPlaceholder = 'Search shortcuts';
+    this.columns = [
+      {
+        key: 'name',
+        label: 'Name',
+        minWidth: '140px',
+        maxWidth: '240px'
+      },
+      { key: 'text', label: 'Text', minWidth: '240px', grow: true }
+    ];
+  }
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+    this.addEventListener(
+      CustomEventType.RowClick,
+      this.handleRowClickEvent as EventListener
+    );
+  }
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener(
+      CustomEventType.RowClick,
+      this.handleRowClickEvent as EventListener
+    );
+  }
+
+  private handleRowClickEvent = (event: CustomEvent): void => {
+    const shortcut = event.detail?.item as Shortcut;
+    if (shortcut) {
+      this.detailShortcut = shortcut;
+    }
+  };
+
+  private handleDetailClosed = (): void => {
+    this.detailShortcut = null;
+  };
+
+  private handleEditClicked(): void {
+    const shortcut = this.detailShortcut;
+    this.detailShortcut = null;
+    this.fireCustomEvent(CustomEventType.ShortcutEdit, { item: shortcut });
+  }
+
+  private handleDeleteClicked(): void {
+    const shortcut = this.detailShortcut;
+    this.detailShortcut = null;
+    this.fireCustomEvent(CustomEventType.ShortcutDelete, { item: shortcut });
+  }
+
+  private handleActivationKey(event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this.handleDetailClosed();
+    }
+  }
+
+  protected renderCell(
+    shortcut: Shortcut,
+    column: ContentListColumn
+  ): TemplateResult | string {
+    switch (column.key) {
+      case 'name':
+        return html`<span class="shortcut-name" title=${shortcut.name || ''}
+          >${shortcut.name || ''}</span
+        >`;
+      case 'text':
+        return html`<span class="shortcut-text" title=${shortcut.text || ''}
+          >${shortcut.text || ''}</span
+        >`;
+      default:
+        return super.renderCell(shortcut, column);
+    }
+  }
+
+  private renderDetail(): TemplateResult {
+    const shortcut = this.detailShortcut;
+
+    return html`
+      <temba-dialog
+        size="xlarge"
+        variant="flat"
+        primaryButtonName=""
+        cancelButtonName=""
+        hideOnClick
+        ?open=${!!shortcut}
+        @temba-dialog-hidden=${this.handleDetailClosed}
+        @keyup=${(event: KeyboardEvent) => {
+          if (event.key === 'Escape') {
+            this.handleDetailClosed();
+          }
+        }}
+      >
+        ${shortcut
+          ? html`
+              <div class="detail">
+                <div class="detail-header">
+                  <div class="detail-title-block">
+                    <div class="detail-title">${shortcut.name}</div>
+                    ${shortcut.modified_on
+                      ? html`<div class="detail-meta">
+                          Modified
+                          <temba-date
+                            value=${shortcut.modified_on}
+                            display="datetime"
+                          ></temba-date>
+                        </div>`
+                      : null}
+                  </div>
+                  ${this.editable || this.deletable
+                    ? html`<div class="detail-actions">
+                        ${this.editable
+                          ? html`<button
+                              type="button"
+                              class="menu-button"
+                              @click=${this.handleEditClicked}
+                            >
+                              Edit
+                            </button>`
+                          : null}
+                        ${this.deletable
+                          ? html`<button
+                              type="button"
+                              class="menu-button destructive"
+                              @click=${this.handleDeleteClicked}
+                            >
+                              Delete
+                            </button>`
+                          : null}
+                      </div>`
+                    : null}
+                  <div
+                    class="detail-close"
+                    role="button"
+                    tabindex="0"
+                    aria-label="Close"
+                    @click=${this.handleDetailClosed}
+                    @keydown=${this.handleActivationKey}
+                  >
+                    <temba-icon name=${Icon.close} size="1.4"></temba-icon>
+                  </div>
+                </div>
+                <div class="detail-body">
+                  <div class="detail-response">
+                    <div class="detail-section-title">Response</div>
+                    <div class="detail-text">${shortcut.text}</div>
+                  </div>
+                </div>
+              </div>
+            `
+          : null}
+      </temba-dialog>
+    `;
+  }
+
+  public render(): TemplateResult {
+    return html`${super.render()}${this.renderDetail()}`;
+  }
+}

package/src/styles/designTokens.ts

@@ -103,6 +103,17 @@ export const designTokens = css`
     --pad: 10px;
     --gap: 14px;
 
+    /* Page header strip. --header-h is the height of a header bar over a
+       single-line title (the tickets / contact chat strip). --title-line is
+       one line of that title, declared here rather than inside
+       temba-page-header because temba-header-bar derives its balanced inset
+       from it — keeping both on one definition means restyling the title
+       can't silently unbalance the strip. */
+    --header-h: 53px;
+    --title-size: 15.5px;
+    --title-leading: 1.25;
+    --title-line: calc(var(--title-size) * var(--title-leading));
+
     /* shadows */
     --shadow-1:
       0 1px 1px rgba(15, 22, 36, 0.04), 0 1px 2px rgba(15, 22, 36, 0.04);