@nyaruka/temba-components 0.156.3 → 0.156.5

package/src/flow/EditorToolbar.ts

@@ -0,0 +1,566 @@
+import { css, html, TemplateResult } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { RapidElement } from '../RapidElement';
+import { CustomEventType } from '../interfaces';
+import { Icon } from '../Icons';
+
+export interface LanguageOption {
+  name: string;
+  value: string;
+  percent?: number;
+}
+
+export const PRIMARY_LANGUAGE_OPTION_VALUE = '__primary_language__';
+
+export class EditorToolbar extends RapidElement {
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+
+      .editor-toolbar {
+        --toolbar-control-height: 28px;
+        --toolbar-translation-control-height: 28px;
+        display: flex;
+        align-items: center;
+        padding: 6px 12px;
+        background: #fff;
+        border-bottom: 1px solid #e8e8e8;
+        flex-shrink: 0;
+        gap: 8px;
+      }
+
+      .toolbar-left {
+        display: flex;
+        align-items: center;
+        gap: 2px;
+      }
+
+      .toolbar-right {
+        display: flex;
+        align-items: center;
+        gap: 2px;
+        margin-left: auto;
+      }
+
+      .toolbar-btn {
+        width: var(--toolbar-control-height);
+        height: var(--toolbar-control-height);
+        border: none;
+        background: transparent;
+        border-radius: var(--curvature);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        color: #888;
+        font-size: 16px;
+        line-height: 1;
+        outline: none;
+      }
+
+      .toolbar-btn:focus {
+        outline: none;
+      }
+
+      .toolbar-btn:focus-visible {
+        outline: 2px solid #0064c8;
+        outline-offset: 2px;
+      }
+
+      .toolbar-btn:hover {
+        background: rgba(0, 0, 0, 0.06);
+        color: #555;
+      }
+
+      .toolbar-btn:disabled {
+        opacity: 0.3;
+        cursor: default;
+        background: transparent;
+      }
+
+      .toolbar-btn.active {
+        background: rgba(0, 100, 200, 0.1);
+        color: #0064c8;
+      }
+
+      .toolbar-btn.active:hover {
+        background: rgba(0, 100, 200, 0.15);
+      }
+
+      .toolbar-tip {
+        display: flex;
+        align-items: center;
+      }
+
+      .toolbar-divider {
+        width: 1px;
+        height: 16px;
+        background: #e0e0e0;
+        margin: 0 4px;
+      }
+
+      .toolbar-group {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        height: var(--toolbar-control-height);
+        box-sizing: border-box;
+        padding: 0 3px;
+        border: 1px solid #d7dce2;
+        border-radius: calc(var(--curvature) + 2px);
+        background: #f7f9fb;
+      }
+
+      .toolbar-group-divider {
+        width: 1px;
+        height: 18px;
+        background: #d7dce2;
+        margin: 0 2px;
+      }
+
+      .toolbar-language {
+        position: relative;
+        display: flex;
+        align-items: center;
+      }
+
+      .toolbar-language-group {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin-left: 2px;
+      }
+
+      .toolbar-zoom-group {
+        gap: 2px;
+      }
+
+      .language-pill {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        background: #e9eef4;
+        color: #0064c8;
+        height: var(--toolbar-translation-control-height);
+        padding: 0 8px;
+        border-radius: var(--curvature);
+        box-sizing: border-box;
+        font-size: 13px;
+        font-weight: 400;
+        white-space: nowrap;
+        cursor: pointer;
+        --icon-color: #0064c8;
+        --icon-size: 16px;
+        border: none;
+        outline: none;
+      }
+
+      .language-pill:hover {
+        filter: brightness(1.04);
+      }
+
+      .language-pill.primary {
+        background: #fff;
+        border: 1px solid #d7dce2;
+      }
+
+      .language-pill.complete {
+        background: #d4f5e0;
+        color: #1a7f37;
+        --icon-color: #1a7f37;
+      }
+
+      .language-pill-caret {
+        margin-left: 1px;
+        --icon-color: currentColor;
+        --icon-size: 12px;
+      }
+
+      .language-percent {
+        display: inline-block;
+        font-size: 12px;
+        font-weight: 700;
+        line-height: 1;
+        color: #0064c8;
+        white-space: nowrap;
+      }
+
+      .language-pill.complete .language-percent {
+        color: #1a7f37;
+      }
+
+      .toolbar-zoom-level {
+        font-size: 12px;
+        min-width: 40px;
+        text-align: center;
+        color: #555;
+        font-weight: 500;
+      }
+
+      .toolbar-translation {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      .toolbar-btn.language-tool {
+        width: var(--toolbar-translation-control-height);
+        height: var(--toolbar-translation-control-height);
+      }
+    `;
+  }
+
+  @property({ type: Boolean, attribute: 'message-view' })
+  messageView = false;
+
+  @property({ type: Number })
+  zoom = 1.0;
+
+  @property({ type: Boolean, attribute: 'zoom-initialized' })
+  zoomInitialized = false;
+
+  @property({ type: Boolean, attribute: 'zoom-fitted' })
+  zoomFitted = false;
+
+  @property({ type: Boolean, attribute: 'revisions-active' })
+  revisionsActive = false;
+
+  @property({ type: Boolean, attribute: 'is-saving' })
+  isSaving = false;
+
+  @property({ type: Boolean, attribute: 'search-disabled' })
+  searchDisabled = false;
+
+  @property({ type: Array })
+  languageOptions: LanguageOption[] = [];
+
+  @property({ type: String, attribute: 'current-language-name' })
+  currentLanguageName = '';
+
+  @property({ type: Boolean, attribute: 'is-base-language' })
+  isBaseLanguage = true;
+
+  @property({ type: Number, attribute: 'language-percent' })
+  languagePercent = 0;
+
+  @property({ type: Boolean, attribute: 'show-localization-tools' })
+  showLocalizationTools = false;
+
+  @state()
+  private showLanguageOptions = false;
+
+  private fireToolbarAction(action: string, detail: any = {}): void {
+    this.fireCustomEvent(CustomEventType.ButtonClicked, { action, ...detail });
+  }
+
+  private handleLanguageIconClick(): void {
+    if (this.showLanguageOptions) {
+      this.showLanguageOptions = false;
+      return;
+    }
+    this.showLanguageOptions = true;
+    requestAnimationFrame(() => {
+      const close = () => {
+        this.showLanguageOptions = false;
+        document.removeEventListener('click', close);
+      };
+      document.addEventListener('click', close, { once: true });
+    });
+  }
+
+  private handleLanguageOptionSelected(event: CustomEvent): void {
+    if (!this.showLanguageOptions) return;
+    const selected = event.detail?.selected;
+    if (selected?.value === PRIMARY_LANGUAGE_OPTION_VALUE) {
+      this.fireToolbarAction('language-change', { isPrimary: true });
+    } else if (selected?.value) {
+      this.fireToolbarAction('language-change', {
+        languageCode: selected.value
+      });
+    }
+    this.showLanguageOptions = false;
+  }
+
+  private isMacPlatform(): boolean {
+    return (
+      typeof navigator !== 'undefined' &&
+      /Mac|iPod|iPhone|iPad/.test(navigator.platform)
+    );
+  }
+
+  private getSearchShortcutLabel(): string {
+    return this.isMacPlatform() ? '⌘F' : 'Ctrl+F';
+  }
+
+  private renderTip(
+    text: string | TemplateResult,
+    content: TemplateResult
+  ): TemplateResult {
+    return html`
+      <temba-tip
+        class="toolbar-tip"
+        .text=${typeof text === 'string' ? text : ''}
+        .content=${typeof text === 'string' ? null : text}
+        position="top"
+      >
+        ${content}
+      </temba-tip>
+    `;
+  }
+
+  private renderShortcutLabel(
+    label: string,
+    shortcut: string
+  ): TemplateResult {
+    return html`<span style="display:inline-flex; align-items:center; gap:8px;">
+      <span>${label}</span>
+      <kbd>${shortcut}</kbd>
+    </span>`;
+  }
+
+  private renderLanguageOption(
+    option: LanguageOption,
+    selected: boolean
+  ): TemplateResult {
+    if (option.value === PRIMARY_LANGUAGE_OPTION_VALUE) {
+      const primaryBackground = selected ? '#e1e8ef' : '#edf1f5';
+      return html`
+        <div
+          style="display:flex; align-items:center; justify-content:space-between; gap:8px; background:${primaryBackground}; color:#2f3f52; border-radius:4px; padding:6px 10px;"
+        >
+          <span>${option.name}</span>
+          <span
+            style="display:inline-flex; align-items:center; border-radius:999px; background:rgba(47, 63, 82, 0.12); color:#2f3f52; font-size:10px; font-weight:700; line-height:1; padding:3px 7px;"
+            >Original</span
+          >
+        </div>
+      `;
+    }
+
+    const isComplete = option.percent === 100;
+    const optionBg = isComplete ? '#d4f5e0' : '';
+    const optionHoverBg = isComplete ? '#c0edce' : '';
+    const optionRadius = isComplete ? 'border-radius:4px;' : '';
+    const percentColor = isComplete ? 'color:#1a7f37;' : 'color:#5f6b7a;';
+
+    return html`
+      <div
+        style="display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 10px; ${optionBg ? `background:${optionBg};` : ''} ${optionRadius}"
+        @mouseenter=${isComplete
+          ? (e: MouseEvent) => {
+              (e.currentTarget as HTMLElement).style.background = optionHoverBg;
+            }
+          : null}
+        @mouseleave=${isComplete
+          ? (e: MouseEvent) => {
+              (e.currentTarget as HTMLElement).style.background = optionBg;
+            }
+          : null}
+      >
+        <span style="${isComplete ? 'color:#1a7f37;' : ''}"
+          >${option.name}</span
+        >
+        <span style="font-size:11px; font-weight:600; ${percentColor}"
+          >${option.percent ?? 0}%</span
+        >
+      </div>
+    `;
+  }
+
+  public render(): TemplateResult {
+    const showLanguageControls = this.languageOptions.length > 1;
+    const searchTargetLabel = this.messageView
+      ? 'Search table'
+      : 'Search flow';
+
+    return html`
+      <div class="editor-toolbar">
+        <div class="toolbar-left">
+          ${this.renderTip(
+            'Flow View',
+            html`
+              <button
+                class="toolbar-btn ${!this.messageView ? 'active' : ''}"
+                @click=${() => this.fireToolbarAction('view-change', { view: 'flow' })}
+                aria-label="Flow View"
+              >
+                <temba-icon name="flow" size="1"></temba-icon>
+              </button>
+            `
+          )}
+          ${this.renderTip(
+            'Table View',
+            html`
+              <button
+                class="toolbar-btn ${this.messageView ? 'active' : ''}"
+                @click=${() => this.fireToolbarAction('view-change', { view: 'table' })}
+                aria-label="Table View"
+              >
+                <temba-icon name=${Icon.quick_replies} size="1"></temba-icon>
+              </button>
+            `
+          )}
+          ${showLanguageControls
+            ? html`
+                <div class="toolbar-divider"></div>
+                <div class="toolbar-language-group">
+                  <div class="toolbar-language">
+                    ${this.renderTip(
+                      'Change language',
+                      html`
+                        <button
+                          class="language-pill ${this.isBaseLanguage ? 'primary' : this.languagePercent === 100 ? 'complete' : ''}"
+                          id="language-btn"
+                          @click=${this.handleLanguageIconClick}
+                          aria-label="Change language"
+                        >
+                          <temba-icon name=${Icon.language}></temba-icon>
+                          <span>${this.currentLanguageName}</span>
+                          ${!this.isBaseLanguage
+                            ? html`<span class="language-percent"
+                                >${this.languagePercent}%</span
+                              >`
+                            : ''}
+                          <temba-icon
+                            class="language-pill-caret"
+                            name=${this.showLanguageOptions
+                              ? Icon.arrow_up
+                              : Icon.arrow_down}
+                          ></temba-icon>
+                        </button>
+                      `
+                    )}
+                    <temba-options
+                      .anchorTo=${this.shadowRoot?.querySelector('#language-btn') as HTMLElement}
+                      .options=${this.languageOptions}
+                      .renderOption=${this.renderLanguageOption}
+                      ?visible=${this.showLanguageOptions}
+                      @temba-selection=${this.handleLanguageOptionSelected}
+                      style="--temba-options-option-margin:4px; --temba-options-option-padding:0; --temba-options-option-radius:4px;"
+                      min-width="230"
+                    ></temba-options>
+                  </div>
+                  ${this.showLocalizationTools
+                    ? this.renderTranslationTools()
+                    : ''}
+                </div>
+              `
+            : ''}
+        </div>
+        <div class="toolbar-right">
+          ${!this.messageView
+            ? html`
+                ${this.renderTip(
+                  'Zoom to fit',
+                  html`
+                    <button
+                      class="toolbar-btn"
+                      @click=${() => this.fireToolbarAction('zoom-to-fit')}
+                      ?disabled=${!this.zoomInitialized || this.zoomFitted}
+                      aria-label="Zoom to fit"
+                    >
+                      <temba-icon
+                        name=${Icon.zoom_fit}
+                        size="1"
+                      ></temba-icon>
+                    </button>
+                  `
+                )}
+                <div class="toolbar-divider"></div>
+                ${this.renderTip(
+                  'Zoom out',
+                  html`
+                    <button
+                      class="toolbar-btn"
+                      @click=${() => this.fireToolbarAction('zoom-out')}
+                      ?disabled=${!this.zoomInitialized || this.zoom <= 0.3}
+                      aria-label="Zoom out"
+                    >
+                      −
+                    </button>
+                  `
+                )}
+                <span class="toolbar-zoom-level"
+                  >${this.zoomInitialized
+                    ? `${Math.round(this.zoom * 100)}%`
+                    : ''}</span
+                >
+                ${this.renderTip(
+                  'Zoom in',
+                  html`
+                    <button
+                      class="toolbar-btn"
+                      @click=${() => this.fireToolbarAction('zoom-in')}
+                      ?disabled=${!this.zoomInitialized || this.zoom >= 1.0}
+                      aria-label="Zoom in"
+                    >
+                      +
+                    </button>
+                  `
+                )}
+                <div class="toolbar-divider"></div>
+                ${this.renderTip(
+                  'Zoom to 100%',
+                  html`
+                    <button
+                      class="toolbar-btn"
+                      @click=${() => this.fireToolbarAction('zoom-to-full')}
+                      ?disabled=${!this.zoomInitialized || this.zoom >= 1.0}
+                      aria-label="Zoom to 100%"
+                    >
+                      <temba-icon
+                        name=${Icon.zoom_in}
+                        size="1"
+                      ></temba-icon>
+                    </button>
+                  `
+                )}
+                <div class="toolbar-divider"></div>
+              `
+            : ''}
+          ${this.renderTip(
+            'Revisions',
+            html`
+              <button
+                class="toolbar-btn ${this.revisionsActive ? 'active' : ''}"
+                @click=${() => this.fireToolbarAction('revisions')}
+                aria-label="Revisions"
+              >
+                <temba-icon
+                  name=${this.isSaving ? 'progress_spinner' : 'revisions'}
+                  size="1"
+                  ?spin=${this.isSaving}
+                ></temba-icon>
+              </button>
+            `
+          )}
+          <div class="toolbar-divider"></div>
+          ${this.renderTip(
+            this.renderShortcutLabel(
+              searchTargetLabel,
+              this.getSearchShortcutLabel()
+            ),
+            html`
+              <button
+                class="toolbar-btn"
+                @click=${() => this.fireToolbarAction('search')}
+                ?disabled=${this.searchDisabled}
+                aria-label=${searchTargetLabel}
+              >
+                <temba-icon name=${Icon.search} size="1"></temba-icon>
+              </button>
+            `
+          )}
+        </div>
+      </div>
+    `;
+  }
+
+  private renderTranslationTools(): TemplateResult {
+    // auto translate button hidden pending backend changes
+    return html``;
+  }
+}

package/src/flow/StickyNote.ts

@@ -26,9 +26,13 @@ export class StickyNote extends RapidElement {
   @property({ type: Boolean })
   private removing = false;
 
-  // On touch devices, contenteditable starts false to prevent Apple Pencil
-  // Scribble from hijacking touches. It is set to true on explicit tap.
-  private isTouchDevice = navigator.maxTouchPoints > 0;
+  // On Apple touch devices, contenteditable starts false to prevent Apple
+  // Pencil Scribble from hijacking touches. It is set to true on explicit tap.
+  // Only Apple platforms have Scribble, so we avoid disabling contenteditable
+  // on Windows touchscreen laptops where it would block mouse-based editing.
+  private isTouchDevice =
+    navigator.maxTouchPoints > 0 &&
+    /iPad|iPhone|Macintosh/.test(navigator.userAgent);
   private editingField: HTMLElement | null = null;
   private removalTimeout: number | null = null;
 
@@ -88,6 +92,24 @@ export class StickyNote extends RapidElement {
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
       }
 
+      :host(.drag-copy) .sticky-note {
+        outline: 3px dashed var(--color-primary, #3b82f6);
+        outline-offset: 2px;
+        opacity: 0.7;
+      }
+
+      .sticky-note.selected {
+        cursor: var(--shift-held-cursor, move) !important;
+      }
+
+      .sticky-note.selected .remove-button {
+        cursor: pointer !important;
+      }
+
+      .sticky-note.selected [contenteditable] {
+        cursor: text !important;
+      }
+
       /* Color themes */
       .sticky-note.yellow {
         --sticky-color: #fef08a;
@@ -191,7 +213,7 @@ export class StickyNote extends RapidElement {
       /* Drag icon */
       .sticky-title-container > .drag-handle {
         --icon-color: var(--sticky-border-color);
-        cursor: move;
+        cursor: var(--shift-held-cursor, move);
         max-width: 20px;
         padding-left: 8px;
         padding-top: 10px;
@@ -769,7 +791,9 @@ export class StickyNote extends RapidElement {
       <div
         class="sticky-note ${this.data.color} ${this.dragging
           ? 'dragging'
-          : ''} ${this.removing ? 'removing' : ''}"
+          : ''} ${this.removing ? 'removing' : ''} ${this.selected
+          ? 'selected'
+          : ''}"
         style="${style}"
         data-uuid="${this.uuid}"
       >

package/src/flow/actions/set_contact_language.ts

@@ -8,17 +8,14 @@ import {
 } from '../types';
 import { Node, SetContactLanguage } from '../../store/flow-definition';
 import { getStore } from '../../store/Store';
-import { renderClamped } from '../utils';
+import { getLanguageDisplayName, renderClamped } from '../utils';
 
 export const set_contact_language: ActionConfig = {
   name: 'Update Language',
   group: ACTION_GROUPS.contacts,
   flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: SetContactLanguage) => {
-    const languageNames = new Intl.DisplayNames(['en'], {
-      type: 'language'
-    });
-    const name = languageNames.of(action.language) || action.language;
+    const name = getLanguageDisplayName(action.language);
     return renderClamped(
       html`Set to <strong>${name}</strong>`,
       `Set to ${name}`
@@ -38,12 +35,9 @@ export const set_contact_language: ActionConfig = {
         const store = getStore();
         const workspace = store?.getState().workspace;
         if (workspace?.languages && Array.isArray(workspace.languages)) {
-          const languageNames = new Intl.DisplayNames(['en'], {
-            type: 'language'
-          });
           return workspace.languages.map((languageCode: string) => ({
             value: languageCode,
-            name: languageNames.of(languageCode) || languageCode
+            name: getLanguageDisplayName(languageCode)
           }));
         }
         return [];
@@ -53,14 +47,11 @@ export const set_contact_language: ActionConfig = {
   toFormData: (action: SetContactLanguage) => {
     // Convert the language code back to the option object format expected by the form
     if (action.language) {
-      const languageNames = new Intl.DisplayNames(['en'], {
-        type: 'language'
-      });
       return {
         language: [
           {
             value: action.language,
-            name: languageNames.of(action.language) || action.language
+            name: getLanguageDisplayName(action.language)
           }
         ],
         uuid: action.uuid

package/src/flow/utils.ts

@@ -6,6 +6,17 @@ import { tokenize, TokenType } from '../excellent/tokenizer';
 import { TOKEN_COLORS } from '../excellent/token-styles';
 import { messageParser, sessionParser } from '../excellent/helpers';
 
+const languageNames = new Intl.DisplayNames(['en'], { type: 'language' });
+
+export function getLanguageDisplayName(code: string): string {
+  if (code === 'und') return 'Unknown';
+  try {
+    return languageNames.of(code) || code;
+  } catch {
+    return code;
+  }
+}
+
 const IS_MAC =
   typeof navigator !== 'undefined' &&
   /Mac|iPod|iPhone|iPad/.test(navigator.platform);

package/src/form/select/Select.ts

@@ -168,6 +168,7 @@ export class Select<T extends SelectOption> extends FieldElement {
       }
 
       .selected {
+        flex: 1;
         display: flex;
         flex-direction: row;
         align-items: stretch;