@nyaruka/temba-components 0.131.2 → 0.131.3

package/out-tsc/src/display/FloatingTab.js

@@ -0,0 +1,167 @@
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { RapidElement } from '../RapidElement';
+import { CustomEventType } from '../interfaces';
+import { getClasses } from '../utils';
+export class FloatingTab extends RapidElement {
+    constructor() {
+        super(...arguments);
+        this.color = '#6B7280';
+        this.top = -1; // -1 means auto-calculate position
+        this.hidden = false;
+    }
+    static get styles() {
+        return css `
+      .tab.hidden {
+        transform: translateX(100%);
+      }
+      .tab {
+        position: fixed;
+        right: 0;
+        z-index: 9998;
+        transition: transform var(--transition-duration, 300ms) ease-in-out;
+        display: flex;
+        align-items: center;
+        padding: 12px;
+        border-top-left-radius: 8px;
+        border-bottom-left-radius: 8px;
+        cursor: pointer;
+        box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.2);
+        transition: all calc(var(--transition-duration, 300ms) * 0.7)
+          ease-in-out;
+        user-select: none;
+      }
+
+      .tab:hover {
+        padding-right: 16px;
+        box-shadow: -4px 4px 12px rgba(0, 0, 0, 0.3);
+      }
+
+      .icon-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+      }
+
+      temba-icon {
+        --icon-color: white;
+      }
+
+      .label {
+        color: white;
+        font-weight: 500;
+        font-size: 16px;
+        max-width: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        margin-left: 0;
+        opacity: 0;
+        transition: all var(--transition-duration, 300ms) ease-in-out;
+      }
+
+      .tab:hover .label {
+        max-width: 200px;
+        margin-left: 12px;
+        opacity: 1;
+      }
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        FloatingTab.allTabs.push(this);
+        this.updatePosition();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        const index = FloatingTab.allTabs.indexOf(this);
+        if (index > -1) {
+            FloatingTab.allTabs.splice(index, 1);
+        }
+        // update positions of remaining tabs
+        FloatingTab.allTabs.forEach((tab) => tab.updatePosition());
+    }
+    updatePosition() {
+        // if top is manually set, use it
+        if (this.top !== -1) {
+            return;
+        }
+        // auto-calculate position based on index
+        const index = FloatingTab.allTabs.indexOf(this);
+        if (index === -1) {
+            this.top = 100; // default fallback
+        }
+        else {
+            // start at 100px and stack with 10px gap between tabs
+            this.top = 100 + index * (FloatingTab.TAB_HEIGHT + 10);
+        }
+    }
+    updated(changes) {
+        super.updated(changes);
+        if (changes.has('hidden')) {
+            this.classList.toggle('hidden', this.hidden);
+        }
+        if (changes.has('top')) {
+            this.updatePosition();
+        }
+    }
+    handleClick() {
+        // hide all tabs when one is clicked
+        FloatingTab.allTabs.forEach((tab) => {
+            tab.hidden = true;
+        });
+        this.fireCustomEvent(CustomEventType.ButtonClicked, {
+            action: 'toggle'
+        });
+    }
+    static showAllTabs() {
+        FloatingTab.allTabs.forEach((tab) => {
+            tab.hidden = false;
+        });
+    }
+    static hideAllTabs() {
+        FloatingTab.allTabs.forEach((tab) => {
+            tab.hidden = true;
+        });
+    }
+    render() {
+        const tabStyle = `
+      background-color: ${this.color};
+      top: ${this.top}px;
+    `;
+        const classes = getClasses({
+            tab: true,
+            hidden: this.hidden
+        });
+        return html `
+      <div class="${classes}" style="${tabStyle}" @click=${this.handleClick}>
+        <div class="icon-container">
+          ${this.icon
+            ? html `<temba-icon size="2" name="${this.icon}"></temba-icon>`
+            : ''}
+        </div>
+        <div class="label">${this.label}</div>
+      </div>
+    `;
+    }
+}
+FloatingTab.TAB_HEIGHT = 56; // height of tab for auto-stacking
+FloatingTab.allTabs = [];
+__decorate([
+    property({ type: String })
+], FloatingTab.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], FloatingTab.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], FloatingTab.prototype, "color", void 0);
+__decorate([
+    property({ type: Number })
+], FloatingTab.prototype, "top", void 0);
+__decorate([
+    property({ type: Boolean })
+], FloatingTab.prototype, "hidden", void 0);
+//# sourceMappingURL=FloatingTab.js.map

package/out-tsc/src/display/FloatingTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingTab.js","sourceRoot":"","sources":["../../../src/display/FloatingTab.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { CustomEventType } from '../interfaces';\nimport { getClasses } from '../utils';\n\nexport class FloatingTab extends RapidElement {\n  static get styles() {\n    return css`\n      .tab.hidden {\n        transform: translateX(100%);\n      }\n      .tab {\n        position: fixed;\n        right: 0;\n        z-index: 9998;\n        transition: transform var(--transition-duration, 300ms) ease-in-out;\n        display: flex;\n        align-items: center;\n        padding: 12px;\n        border-top-left-radius: 8px;\n        border-bottom-left-radius: 8px;\n        cursor: pointer;\n        box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.2);\n        transition: all calc(var(--transition-duration, 300ms) * 0.7)\n          ease-in-out;\n        user-select: none;\n      }\n\n      .tab:hover {\n        padding-right: 16px;\n        box-shadow: -4px 4px 12px rgba(0, 0, 0, 0.3);\n      }\n\n      .icon-container {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 32px;\n        height: 32px;\n      }\n\n      temba-icon {\n        --icon-color: white;\n      }\n\n      .label {\n        color: white;\n        font-weight: 500;\n        font-size: 16px;\n        max-width: 0;\n        overflow: hidden;\n        white-space: nowrap;\n        margin-left: 0;\n        opacity: 0;\n        transition: all var(--transition-duration, 300ms) ease-in-out;\n      }\n\n      .tab:hover .label {\n        max-width: 200px;\n        margin-left: 12px;\n        opacity: 1;\n      }\n    `;\n  }\n\n  static TAB_HEIGHT = 56; // height of tab for auto-stacking\n  static allTabs: FloatingTab[] = [];\n\n  @property({ type: String })\n  icon: string;\n\n  @property({ type: String })\n  label: string;\n\n  @property({ type: String })\n  color = '#6B7280';\n\n  @property({ type: Number })\n  top = -1; // -1 means auto-calculate position\n\n  @property({ type: Boolean })\n  hidden = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    FloatingTab.allTabs.push(this);\n    this.updatePosition();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    const index = FloatingTab.allTabs.indexOf(this);\n    if (index > -1) {\n      FloatingTab.allTabs.splice(index, 1);\n    }\n    // update positions of remaining tabs\n    FloatingTab.allTabs.forEach((tab) => tab.updatePosition());\n  }\n\n  private updatePosition() {\n    // if top is manually set, use it\n    if (this.top !== -1) {\n      return;\n    }\n\n    // auto-calculate position based on index\n    const index = FloatingTab.allTabs.indexOf(this);\n    if (index === -1) {\n      this.top = 100; // default fallback\n    } else {\n      // start at 100px and stack with 10px gap between tabs\n      this.top = 100 + index * (FloatingTab.TAB_HEIGHT + 10);\n    }\n  }\n\n  public updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('hidden')) {\n      this.classList.toggle('hidden', this.hidden);\n    }\n    if (changes.has('top')) {\n      this.updatePosition();\n    }\n  }\n\n  private handleClick() {\n    // hide all tabs when one is clicked\n    FloatingTab.allTabs.forEach((tab) => {\n      tab.hidden = true;\n    });\n\n    this.fireCustomEvent(CustomEventType.ButtonClicked, {\n      action: 'toggle'\n    });\n  }\n\n  public static showAllTabs() {\n    FloatingTab.allTabs.forEach((tab) => {\n      tab.hidden = false;\n    });\n  }\n\n  public static hideAllTabs() {\n    FloatingTab.allTabs.forEach((tab) => {\n      tab.hidden = true;\n    });\n  }\n\n  public render(): TemplateResult {\n    const tabStyle = `\n      background-color: ${this.color};\n      top: ${this.top}px;\n    `;\n\n    const classes = getClasses({\n      tab: true,\n      hidden: this.hidden\n    });\n\n    return html`\n      <div class=\"${classes}\" style=\"${tabStyle}\" @click=${this.handleClick}>\n        <div class=\"icon-container\">\n          ${this.icon\n            ? html`<temba-icon size=\"2\" name=\"${this.icon}\"></temba-icon>`\n            : ''}\n        </div>\n        <div class=\"label\">${this.label}</div>\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/display/ProgressBar.js

@@ -11,13 +11,14 @@ export class ProgressBar extends RapidElement {
         this.done = false;
         this.showEstimatedCompletion = false;
         this.showPercentage = false;
+        this.animated = true;
     }
     updated(changes) {
         if (changes.has('eta') && this.eta) {
             this.estimatedCompletionDate = new Date(this.eta);
             this.showEstimatedCompletion = this.estimatedCompletionDate > new Date();
         }
-        if (changes.has('current')) {
+        if (changes.has('current') || changes.has('total')) {
             const pct = Math.floor(Math.min((this.current / this.total) * 100, 100));
             if (Number.isNaN(pct)) {
                 this.showPercentage = false;
@@ -30,8 +31,15 @@ export class ProgressBar extends RapidElement {
         }
     }
     render() {
+        const meterClasses = [
+            'meter',
+            this.done ? 'done' : '',
+            this.animated ? '' : 'static'
+        ]
+            .filter(Boolean)
+            .join(' ');
         return html `<div class="wrapper ${this.done ? 'complete' : ''}">
-      <div class="meter ${this.done ? 'done' : ''}">
+      <div class="${meterClasses}">
         ${this.message
             ? html `<div class="message">${this.message}</div>`
             : null}
@@ -132,6 +140,15 @@ ProgressBar.styles = css `
       display: none;
     }
 
+    .meter.static > span:after {
+      display: none;
+      animation: none;
+    }
+
+    .meter.static > span {
+      background-image: none;
+    }
+
     @keyframes move {
       0% {
         background-position: 0 0;
@@ -208,4 +225,7 @@ __decorate([
 __decorate([
     property({ type: String })
 ], ProgressBar.prototype, "message", void 0);
+__decorate([
+    property({ type: Boolean })
+], ProgressBar.prototype, "animated", void 0);
 //# sourceMappingURL=ProgressBar.js.map

package/out-tsc/src/display/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../src/display/ProgressBar.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { RapidElement } from '../RapidElement';\nimport { property } from 'lit/decorators.js';\n\nexport class ProgressBar extends RapidElement {\n  static styles = css`\n    .wrapper {\n      display: flex;\n      box-sizing: content-box;\n      background: #f1f1f1;\n      border-radius: var(--curvature);\n      box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.05);\n      overflow: hidden;\n      min-height: 1.5rem;\n    }\n\n    .message {\n      padding: 0 0.5rem;\n      color: rgba(0, 0, 0, 0.4);\n      white-space: nowrap;\n    }\n\n    .meter {\n      flex-grow: 1;\n      display: flex;\n      box-sizing: content-box;\n      position: relative;\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n      padding: 4px;\n      min-height: 6px;\n    }\n    .meter > span {\n      display: block;\n      height: 100%;\n      border-radius: calc(var(--curvature) * 0.8);\n      background-color: var(--color-primary-dark);\n      background-image: linear-gradient(\n        center bottom,\n        rgb(43, 194, 83) 37%,\n        rgb(84, 240, 83) 69%\n      );\n\n      position: relative;\n      overflow: hidden;\n    }\n\n    .meter > span:after,\n    .animate > span > span {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      background-image: linear-gradient(\n        -45deg,\n        rgba(255, 255, 255, 0.2) 25%,\n        transparent 25%,\n        transparent 50%,\n        rgba(255, 255, 255, 0.2) 50%,\n        rgba(255, 255, 255, 0.2) 75%,\n        transparent 75%,\n        transparent\n      );\n      z-index: 1;\n      background-size: 50px 50px;\n      animation: move 8s linear infinite;\n      border-top-right-radius: var(--curvature);\n      border-bottom-right-radius: var(--curvature);\n      border-top-left-radius: var(--curvature);\n      border-bottom-left-radius: var(--curvature);\n      overflow: hidden;\n    }\n\n    .animate > span:after {\n      display: none;\n    }\n\n    @keyframes move {\n      0% {\n        background-position: 0 0;\n      }\n      100% {\n        background-position: 50px 50px;\n      }\n    }\n\n    .meter .complete {\n      transition: flex-basis 2s;\n    }\n\n    .meter .incomplete {\n      flex-grow: 1;\n    }\n\n    .etc {\n      display: flex;\n      flex-direction: row;\n      background: rgba(0, 0, 0, 0.07);\n      font-weight: bold;\n      white-space: nowrap;\n      color: rgba(0, 0, 0, 0.5);\n      align-self: center;\n      padding: 0px 6px;\n      align-self: stretch;\n      align-items: center;\n    }\n\n    .etc > div {\n      font-size: 0.7em;\n    }\n\n    .wrapper *::last-child {\n      border-top-right-radius: var(--curvature);\n      border-bottom-right-radius: var(--curvature);\n      overflow: hidden;\n    }\n\n    .meter.done > span:after,\n    .done .animate > span > span {\n      display: none;\n    }\n\n    .meter.done > span {\n      background: rgb(var(--success-rgb));\n    }\n  `;\n\n  @property({ type: Number })\n  total = 100;\n\n  @property({ type: Number })\n  current = 0;\n\n  @property({ type: Number })\n  pct = 0;\n\n  @property({ type: Boolean })\n  done = false;\n\n  @property({ type: String })\n  eta: string;\n\n  @property({ type: String, attribute: false })\n  estimatedCompletionDate: Date;\n\n  @property({ type: Boolean })\n  showEstimatedCompletion = false;\n\n  @property({ type: Boolean })\n  showPercentage = false;\n\n  @property({ type: String })\n  message: string;\n\n  public updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    if (changes.has('eta') && this.eta) {\n      this.estimatedCompletionDate = new Date(this.eta);\n      this.showEstimatedCompletion = this.estimatedCompletionDate > new Date();\n    }\n\n    if (changes.has('current')) {\n      const pct = Math.floor(Math.min((this.current / this.total) * 100, 100));\n      if (Number.isNaN(pct)) {\n        this.showPercentage = false;\n      } else {\n        this.pct = pct;\n        this.showPercentage = true;\n      }\n\n      this.done = this.pct >= 100;\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`<div class=\"wrapper ${this.done ? 'complete' : ''}\">\n      <div class=\"meter ${this.done ? 'done' : ''}\">\n        ${this.message\n          ? html`<div class=\"message\">${this.message}</div>`\n          : null}\n        <span class=\"complete\" style=\"flex-basis: ${this.pct}%\"></span>\n        <div class=\"incomplete\"></div>\n      </div>\n\n      ${this.showPercentage || this.showEstimatedCompletion\n        ? html`<div class=\"etc\">\n            <div>\n              ${this.estimatedCompletionDate &&\n              this.showEstimatedCompletion &&\n              !this.done\n                ? html`<temba-date\n                    value=\"${this.estimatedCompletionDate.toISOString()}\"\n                    display=\"countdown\"\n                  ></temba-date>`\n                : html`${this.pct}%`}\n            </div>\n          </div>`\n        : null}\n\n      <slot></slot>\n    </div>`;\n  }\n}\n"]}
+{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../src/display/ProgressBar.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { RapidElement } from '../RapidElement';\nimport { property } from 'lit/decorators.js';\n\nexport class ProgressBar extends RapidElement {\n  static styles = css`\n    .wrapper {\n      display: flex;\n      box-sizing: content-box;\n      background: #f1f1f1;\n      border-radius: var(--curvature);\n      box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.05);\n      overflow: hidden;\n      min-height: 1.5rem;\n    }\n\n    .message {\n      padding: 0 0.5rem;\n      color: rgba(0, 0, 0, 0.4);\n      white-space: nowrap;\n    }\n\n    .meter {\n      flex-grow: 1;\n      display: flex;\n      box-sizing: content-box;\n      position: relative;\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n      padding: 4px;\n      min-height: 6px;\n    }\n    .meter > span {\n      display: block;\n      height: 100%;\n      border-radius: calc(var(--curvature) * 0.8);\n      background-color: var(--color-primary-dark);\n      background-image: linear-gradient(\n        center bottom,\n        rgb(43, 194, 83) 37%,\n        rgb(84, 240, 83) 69%\n      );\n\n      position: relative;\n      overflow: hidden;\n    }\n\n    .meter > span:after,\n    .animate > span > span {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      background-image: linear-gradient(\n        -45deg,\n        rgba(255, 255, 255, 0.2) 25%,\n        transparent 25%,\n        transparent 50%,\n        rgba(255, 255, 255, 0.2) 50%,\n        rgba(255, 255, 255, 0.2) 75%,\n        transparent 75%,\n        transparent\n      );\n      z-index: 1;\n      background-size: 50px 50px;\n      animation: move 8s linear infinite;\n      border-top-right-radius: var(--curvature);\n      border-bottom-right-radius: var(--curvature);\n      border-top-left-radius: var(--curvature);\n      border-bottom-left-radius: var(--curvature);\n      overflow: hidden;\n    }\n\n    .animate > span:after {\n      display: none;\n    }\n\n    .meter.static > span:after {\n      display: none;\n      animation: none;\n    }\n\n    .meter.static > span {\n      background-image: none;\n    }\n\n    @keyframes move {\n      0% {\n        background-position: 0 0;\n      }\n      100% {\n        background-position: 50px 50px;\n      }\n    }\n\n    .meter .complete {\n      transition: flex-basis 2s;\n    }\n\n    .meter .incomplete {\n      flex-grow: 1;\n    }\n\n    .etc {\n      display: flex;\n      flex-direction: row;\n      background: rgba(0, 0, 0, 0.07);\n      font-weight: bold;\n      white-space: nowrap;\n      color: rgba(0, 0, 0, 0.5);\n      align-self: center;\n      padding: 0px 6px;\n      align-self: stretch;\n      align-items: center;\n    }\n\n    .etc > div {\n      font-size: 0.7em;\n    }\n\n    .wrapper *::last-child {\n      border-top-right-radius: var(--curvature);\n      border-bottom-right-radius: var(--curvature);\n      overflow: hidden;\n    }\n\n    .meter.done > span:after,\n    .done .animate > span > span {\n      display: none;\n    }\n\n    .meter.done > span {\n      background: rgb(var(--success-rgb));\n    }\n  `;\n\n  @property({ type: Number })\n  total = 100;\n\n  @property({ type: Number })\n  current = 0;\n\n  @property({ type: Number })\n  pct = 0;\n\n  @property({ type: Boolean })\n  done = false;\n\n  @property({ type: String })\n  eta: string;\n\n  @property({ type: String, attribute: false })\n  estimatedCompletionDate: Date;\n\n  @property({ type: Boolean })\n  showEstimatedCompletion = false;\n\n  @property({ type: Boolean })\n  showPercentage = false;\n\n  @property({ type: String })\n  message: string;\n\n  @property({ type: Boolean })\n  animated = true;\n\n  public updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    if (changes.has('eta') && this.eta) {\n      this.estimatedCompletionDate = new Date(this.eta);\n      this.showEstimatedCompletion = this.estimatedCompletionDate > new Date();\n    }\n\n    if (changes.has('current') || changes.has('total')) {\n      const pct = Math.floor(Math.min((this.current / this.total) * 100, 100));\n      if (Number.isNaN(pct)) {\n        this.showPercentage = false;\n      } else {\n        this.pct = pct;\n        this.showPercentage = true;\n      }\n\n      this.done = this.pct >= 100;\n    }\n  }\n\n  public render(): TemplateResult {\n    const meterClasses = [\n      'meter',\n      this.done ? 'done' : '',\n      this.animated ? '' : 'static'\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return html`<div class=\"wrapper ${this.done ? 'complete' : ''}\">\n      <div class=\"${meterClasses}\">\n        ${this.message\n          ? html`<div class=\"message\">${this.message}</div>`\n          : null}\n        <span class=\"complete\" style=\"flex-basis: ${this.pct}%\"></span>\n        <div class=\"incomplete\"></div>\n      </div>\n\n      ${this.showPercentage || this.showEstimatedCompletion\n        ? html`<div class=\"etc\">\n            <div>\n              ${this.estimatedCompletionDate &&\n              this.showEstimatedCompletion &&\n              !this.done\n                ? html`<temba-date\n                    value=\"${this.estimatedCompletionDate.toISOString()}\"\n                    display=\"countdown\"\n                  ></temba-date>`\n                : html`${this.pct}%`}\n            </div>\n          </div>`\n        : null}\n\n      <slot></slot>\n    </div>`;\n  }\n}\n"]}

package/out-tsc/src/events.js.map

@@ -1 +1 @@
-{"version":3,"file":"events.js","sourceRoot":"","sources":["../../src/events.ts"],"names":[],"mappings":"","sourcesContent":["import { Msg, ObjectReference, User } from './interfaces';\n\nexport interface EventGroup {\n  type: string;\n  events: ContactEvent[];\n  open: boolean;\n}\n\nexport interface ContactEvent {\n  uuid?: string;\n  type: string;\n  created_on: string;\n  _user?: ObjectReference;\n}\n\nexport interface ChannelEvent extends ContactEvent {\n  channel_event_type: string;\n  duration: number;\n\n  event: {\n    type: string;\n    channel: { uuid: string; name: string };\n    duration?: number;\n    optin?: {\n      uuid: string;\n      name: string;\n    };\n  };\n}\n\nexport interface ContactLanguageChangedEvent extends ContactEvent {\n  language: string;\n}\n\nexport interface ContactStatusChangedEvent extends ContactEvent {\n  status: string;\n}\n\nexport interface OptInEvent extends ContactEvent {\n  optin: {\n    uuid: string;\n    name: string;\n  };\n}\n\nexport interface CallEvent extends ContactEvent {\n  call?: {\n    uuid: string;\n    urn: string;\n  };\n}\n\nexport interface ChatStartedEvent extends ContactEvent {\n  params?: object;\n}\n\nexport interface MsgEvent extends ContactEvent {\n  msg: Msg;\n  optin?: ObjectReference;\n  _status?: string | { status: string; changed_on: string; reason: string };\n  _failed_reason?: string; // deprecated\n  _logs_url?: string;\n}\n\nexport interface RunEvent extends ContactEvent {\n  flow: ObjectReference;\n  status: string;\n}\n\nexport interface URNsChangedEvent extends ContactEvent {\n  urns: string[];\n}\n\nexport interface TicketEvent extends ContactEvent {\n  ticket: {\n    // ticket_opened\n    uuid: string;\n    topic?: ObjectReference;\n  };\n  ticket_uuid?: string; // all other event types\n  assignee?: User;\n  note?: string;\n  topic?: ObjectReference;\n}\n\nexport interface NameChangedEvent extends ContactEvent {\n  name: string;\n}\n\nexport interface UpdateFieldEvent extends ContactEvent {\n  field: { key: string; name: string };\n  value: { text: string };\n}\n\nexport interface ContactGroupsEvent extends ContactEvent {\n  groups_added: ObjectReference[];\n  groups_removed: ObjectReference[];\n}\n\nexport interface AirtimeTransferredEvent extends ContactEvent {\n  sender: string;\n  recipient: string;\n  currency: string;\n  amount: string;\n}\n\nexport type CallStartedEvent = ContactEvent;\n\nexport interface ContactHistoryPage {\n  has_older: boolean;\n  recent_only: boolean;\n  next_before: number;\n  next_after: number;\n  start_date: Date;\n  events: ContactEvent[];\n}\n"]}
+{"version":3,"file":"events.js","sourceRoot":"","sources":["../../src/events.ts"],"names":[],"mappings":"","sourcesContent":["import { Msg, ObjectReference, User } from './interfaces';\n\nexport interface EventGroup {\n  type: string;\n  events: ContactEvent[];\n  open: boolean;\n}\n\nexport interface ContactEvent {\n  uuid?: string;\n  type: string;\n  created_on: string;\n  _user?: ObjectReference;\n}\n\nexport interface ChannelEvent extends ContactEvent {\n  channel_event_type: string;\n  duration: number;\n\n  event: {\n    type: string;\n    channel: { uuid: string; name: string };\n    duration?: number;\n    optin?: {\n      uuid: string;\n      name: string;\n    };\n  };\n}\n\nexport interface ContactLanguageChangedEvent extends ContactEvent {\n  language: string;\n}\n\nexport interface ContactStatusChangedEvent extends ContactEvent {\n  status: string;\n}\n\nexport interface OptInEvent extends ContactEvent {\n  optin: {\n    uuid: string;\n    name: string;\n  };\n}\n\nexport interface CallEvent extends ContactEvent {\n  call?: {\n    uuid: string;\n    urn: string;\n  };\n}\n\nexport interface ChatStartedEvent extends ContactEvent {\n  params?: object;\n}\n\nexport interface MsgEvent extends ContactEvent {\n  msg: Msg;\n  optin?: ObjectReference;\n  _status?: { created_on: string; status: string; reason: string };\n  _logs_url?: string;\n}\n\nexport interface RunEvent extends ContactEvent {\n  flow: ObjectReference;\n  status: string;\n}\n\nexport interface URNsChangedEvent extends ContactEvent {\n  urns: string[];\n}\n\nexport interface TicketEvent extends ContactEvent {\n  ticket: {\n    // ticket_opened\n    uuid: string;\n    topic?: ObjectReference;\n  };\n  ticket_uuid?: string; // all other event types\n  assignee?: User;\n  note?: string;\n  topic?: ObjectReference;\n}\n\nexport interface NameChangedEvent extends ContactEvent {\n  name: string;\n}\n\nexport interface UpdateFieldEvent extends ContactEvent {\n  field: { key: string; name: string };\n  value: { text: string };\n}\n\nexport interface ContactGroupsEvent extends ContactEvent {\n  groups_added: ObjectReference[];\n  groups_removed: ObjectReference[];\n}\n\nexport interface AirtimeTransferredEvent extends ContactEvent {\n  sender: string;\n  recipient: string;\n  currency: string;\n  amount: string;\n}\n\nexport type CallStartedEvent = ContactEvent;\n\nexport interface ContactHistoryPage {\n  events: ContactEvent[];\n  has_older: boolean;\n  recent_only: boolean;\n  next_before: number;\n  next_after: number;\n}\n"]}

package/out-tsc/src/flow/CanvasNode.js

@@ -8,6 +8,7 @@ import { RapidElement } from '../RapidElement';
 import { getClasses } from '../utils';
 import { getStore } from '../store/Store';
 import { CustomEventType } from '../interfaces';
+import { fromStore, zustand } from '../store/AppState';
 const DRAG_THRESHOLD = 5;
 export class CanvasNode extends RapidElement {
     createRenderRoot() {
@@ -114,6 +115,20 @@ export class CanvasNode extends RapidElement {
 
       .node.execute-actions temba-sortable-list .action:last-child .body {
         padding-bottom: 1.5em;
+      }
+
+      /* Localization indicators */
+      .action.localizable:not(.has-localization) .action-content {
+        background: #fff8dc !important; /* Light yellow background for localizable but not yet localized */
+      }
+
+      .non-localizable {
+        opacity: 0.25;
+        pointer-events: none;
+      }
+
+      .action.non-localizable .action-content {
+        cursor: not-allowed;
       }      
 
       .action .drag-handle {
@@ -182,6 +197,10 @@ export class CanvasNode extends RapidElement {
         margin: 0.2em;
       }
 
+      .router-section {
+        /* Container for router and categories */
+      }
+
       .categories {
         display: flex;
         flex-direction: row;
@@ -198,6 +217,11 @@ export class CanvasNode extends RapidElement {
         flex-direction: column;
       }
 
+      /* Localizable category - yellow background */
+      .category.localizable {
+        background-color: #fff8dc;
+      }
+
       .action-exits {
         padding-bottom: 0.7em;
         margin-top: -0.7em;
@@ -946,18 +970,20 @@ export class CanvasNode extends RapidElement {
             ? (_b = ACTION_GROUP_METADATA[config.group]) === null || _b === void 0 ? void 0 : _b.color
             : '#aaaaaa';
         return html `<div class="cn-title" style="background:${color}">
-      ${((_d = (_c = this.node) === null || _c === void 0 ? void 0 : _c.actions) === null || _d === void 0 ? void 0 : _d.length) > 1
+      ${!this.isTranslating && ((_d = (_c = this.node) === null || _c === void 0 ? void 0 : _c.actions) === null || _d === void 0 ? void 0 : _d.length) > 1
             ? html `<temba-icon class="drag-handle" name="sort"></temba-icon>`
             : html `<div class="title-spacer"></div>`}
 
       <div class="name">${isRemoving ? 'Remove?' : config.name}</div>
-      <div
-        class="remove-button"
-        @click=${(e) => this.handleActionRemoveClick(e, action, index)}
-        title="Remove action"
-      >
-        ✕
-      </div>
+      ${!this.isTranslating
+            ? html `<div
+            class="remove-button"
+            @click=${(e) => this.handleActionRemoveClick(e, action, index)}
+            title="Remove action"
+          >
+            ✕
+          </div>`
+            : html `<div class="title-spacer"></div>`}
     </div>`;
     }
     renderNodeTitle(config, node, ui, isRemoving = false) {
@@ -979,13 +1005,15 @@ export class CanvasNode extends RapidElement {
                 ? config.renderTitle(node, ui)
                 : html `${config.name}`}
       </div>
-      <div
-        class="remove-button"
-        @click=${(e) => this.handleNodeRemoveClick(e)}
-        title="Remove node"
-      >
-        ✕
-      </div>
+      ${!this.isTranslating
+            ? html `<div
+            class="remove-button"
+            @click=${(e) => this.handleNodeRemoveClick(e)}
+            title="Remove node"
+          >
+            ✕
+          </div>`
+            : html `<div class="title-spacer"></div>`}
     </div>`;
     }
     renderDropPlaceholder() {
@@ -996,24 +1024,80 @@ export class CanvasNode extends RapidElement {
       style="height: ${height}px; background: #f3f4f6; border: 2px dashed #d1d5db; border-radius: var(--curvature);"
     ></div>`;
     }
+    /**
+     * Get the localized version of an action if translating, otherwise return the original action.
+     * Falls back to base language values if no localization exists for a field.
+     */
+    getLocalizedAction(action) {
+        var _b, _c, _d;
+        // If not translating or no flow definition, return original action
+        if (!this.isTranslating ||
+            !this.flowDefinition ||
+            !this.languageCode ||
+            this.languageCode === this.flowDefinition.language) {
+            return action;
+        }
+        // Check if there's localization for this action
+        const localization = (_d = (_c = (_b = this.flowDefinition) === null || _b === void 0 ? void 0 : _b.localization) === null || _c === void 0 ? void 0 : _c[this.languageCode]) === null || _d === void 0 ? void 0 : _d[action.uuid];
+        if (!localization) {
+            // No localization available, return original action
+            return action;
+        }
+        // Create a new action with localized values, falling back to base language
+        const localizedAction = { ...action };
+        // Apply localized values for each field
+        Object.keys(localization).forEach((field) => {
+            const localizedValue = localization[field];
+            if (Array.isArray(localizedValue)) {
+                // Localized values are stored as arrays
+                if (localizedValue.length > 0) {
+                    // For single-value fields like 'text', take the first element
+                    // For array fields like 'quick_replies', use the whole array
+                    if (Array.isArray(action[field])) {
+                        localizedAction[field] = localizedValue;
+                    }
+                    else {
+                        localizedAction[field] = localizedValue[0];
+                    }
+                }
+            }
+        });
+        return localizedAction;
+    }
     renderAction(node, action, index) {
+        var _b, _c, _d;
         const config = ACTION_CONFIG[action.type];
         const isRemoving = this.actionRemovingState.has(action.uuid);
+        const isLocalizable = (config === null || config === void 0 ? void 0 : config.localizable) && config.localizable.length > 0;
+        const isDisabled = this.isTranslating && !isLocalizable;
+        // Check if this action has localization data
+        const hasLocalization = this.isTranslating &&
+            ((_d = (_c = (_b = this.flowDefinition) === null || _b === void 0 ? void 0 : _b.localization) === null || _c === void 0 ? void 0 : _c[this.languageCode]) === null || _d === void 0 ? void 0 : _d[action.uuid]);
+        // Get the localized action if translating
+        const displayAction = this.getLocalizedAction(action);
         if (config) {
-            return html `<div
-        class="action sortable ${action.type} ${isRemoving ? 'removing' : ''}"
-        id="action-${index}"
-      >
+            const classes = [
+                'action',
+                'sortable',
+                action.type,
+                isRemoving ? 'removing' : '',
+                isLocalizable && this.isTranslating ? 'localizable' : '',
+                hasLocalization ? 'has-localization' : '',
+                isDisabled ? 'non-localizable' : ''
+            ]
+                .filter(Boolean)
+                .join(' ');
+            return html `<div class="${classes}" id="action-${index}">
         <div
           class="action-content"
-          @mousedown=${(e) => this.handleActionMouseDown(e, action)}
-          @mouseup=${(e) => this.handleActionMouseUp(e, action)}
-          style="cursor: pointer; background: #fff"
+          @mousedown=${(e) => !isDisabled && this.handleActionMouseDown(e, action)}
+          @mouseup=${(e) => !isDisabled && this.handleActionMouseUp(e, action)}
+          style="cursor: ${isDisabled ? 'not-allowed' : 'pointer'}"
         >
           ${this.renderTitle(config, action, index, isRemoving)}
           <div class="body">
             ${config.render
-                ? config.render(node, action)
+                ? config.render(node, displayAction)
                 : html `<pre>${action.type}</pre>`}
           </div>
         </div>
@@ -1071,19 +1155,48 @@ export class CanvasNode extends RapidElement {
         }
     }
     renderCategories(node) {
+        var _b;
         if (!node.router || !node.router.categories) {
             return null;
         }
+        // Check if this node type supports category localization
+        const nodeConfig = NODE_CONFIG[(_b = this.ui) === null || _b === void 0 ? void 0 : _b.type];
+        const supportsLocalization = (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.localizable) === 'categories';
         return html `<div class="categories">
       ${repeat(node.router.categories, (category) => category.uuid, (category) => {
+            var _b, _c;
             const exit = node.exits.find((exit) => exit.uuid == category.exit_uuid);
+            // Get localized category name if translating
+            let displayName = category.name;
+            let isLocalized = false;
+            if (this.isTranslating &&
+                this.languageCode !== 'eng' &&
+                supportsLocalization) {
+                const localization = (_c = (_b = this.flowDefinition) === null || _b === void 0 ? void 0 : _b.localization) === null || _c === void 0 ? void 0 : _c[this.languageCode];
+                if (localization && localization[category.uuid]) {
+                    const categoryLocalization = localization[category.uuid];
+                    if (categoryLocalization.name && categoryLocalization.name[0]) {
+                        displayName = categoryLocalization.name[0];
+                        isLocalized = true;
+                    }
+                }
+            }
+            // Category is localizable if: translating, supports localization, categories enabled, and not base language
+            const isLocalizable = this.isTranslating &&
+                this.languageCode !== 'eng' &&
+                supportsLocalization &&
+                this.includeCategoriesInTranslation &&
+                !isLocalized;
             return html `<div
-            class="category"
+            class=${getClasses({
+                category: true,
+                localizable: isLocalizable
+            })}
             @mousedown=${(e) => this.handleNodeMouseDown(e)}
             @mouseup=${(e) => this.handleNodeMouseUp(e)}
             style="cursor: pointer;"
           >
-            <div class="cn-title">${category.name}</div>
+            <div class="cn-title">${displayName}</div>
             ${this.renderExit(exit)}
           </div>`;
         })}
@@ -1107,12 +1220,19 @@ export class CanvasNode extends RapidElement {
             return html `<div class="node">Loading...</div>`;
         }
         const nodeConfig = NODE_CONFIG[this.ui.type];
+        // Check if this node should be disabled (grayed out)
+        const supportsLocalization = (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.localizable) === 'categories';
+        const isNodeDisabled = this.isTranslating &&
+            supportsLocalization &&
+            !this.includeCategoriesInTranslation;
         return html `
       <div
         id="${this.node.uuid}"
-        class="node ${this.ui.type === 'execute_actions'
-            ? 'execute-actions'
-            : ''}"
+        class=${getClasses({
+            node: true,
+            'execute-actions': this.ui.type === 'execute_actions',
+            'non-localizable': isNodeDisabled
+        })}
         style="left:${this.ui.position.left}px;top:${this.ui.position.top}px"
       >
         ${nodeConfig && nodeConfig.type !== 'execute_actions'
@@ -1144,12 +1264,14 @@ export class CanvasNode extends RapidElement {
                     : html `${this.node.actions.map((action, index) => this.renderAction(this.node, action, index))}`
                 : ''}
         ${this.node.router
-            ? html ` ${this.renderRouter(this.node.router, this.ui)}
-            ${this.renderCategories(this.node)}`
+            ? html `<div class="router-section">
+              ${this.renderRouter(this.node.router, this.ui)}
+              ${this.renderCategories(this.node)}
+            </div>`
             : html `<div class="action-exits">
               ${repeat(this.node.exits, (exit) => exit.uuid, (exit) => this.renderExit(exit))}
             </div>`}
-        ${this.ui.type === 'execute_actions'
+        ${this.ui.type === 'execute_actions' && !this.isTranslating
             ? html `<div
               class="add-action-button"
               @click=${(e) => this.handleAddActionClick(e)}
@@ -1171,4 +1293,16 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], CanvasNode.prototype, "ui", void 0);
+__decorate([
+    fromStore(zustand, (state) => state.isTranslating)
+], CanvasNode.prototype, "isTranslating", void 0);
+__decorate([
+    fromStore(zustand, (state) => state.languageCode)
+], CanvasNode.prototype, "languageCode", void 0);
+__decorate([
+    fromStore(zustand, (state) => state.flowDefinition)
+], CanvasNode.prototype, "flowDefinition", void 0);
+__decorate([
+    fromStore(zustand, (state) => { var _b, _c, _d; return ((_d = (_c = (_b = state.flowDefinition) === null || _b === void 0 ? void 0 : _b._ui) === null || _c === void 0 ? void 0 : _c.translation_filters) === null || _d === void 0 ? void 0 : _d.categories) || false; })
+], CanvasNode.prototype, "includeCategoriesInTranslation", void 0);
 //# sourceMappingURL=CanvasNode.js.map