@nyaruka/temba-components 0.126.0 → 0.128.0

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

@@ -0,0 +1,272 @@
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { RapidElement } from '../RapidElement';
+import { getStore } from '../store/Store';
+export class StickyNote extends RapidElement {
+    constructor() {
+        super(...arguments);
+        this.dragging = false;
+    }
+    static get styles() {
+        return css `
+      :host {
+        --sticky-color: #fef08a;
+        --sticky-border-color: #facc15;
+        --sticky-text-color: #451a03;
+        --curvature: 8px;
+      }
+
+      .sticky-note {
+        width: 200px;
+        background-color: var(--sticky-color);
+        border: 1px solid var(--sticky-border-color);
+        border-radius: var(--curvature);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+          sans-serif;
+        font-size: 12px;
+        overflow: hidden;
+        transition: transform 0.1s ease, box-shadow 0.2s ease;
+        color: var(--sticky-text-color);
+      }
+
+      .sticky-note.dragging {
+        opacity: 0.5;
+        z-index: 1000;
+        transform: rotate(0deg);
+        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
+      }
+
+      .sticky-note:hover {
+        transform: translateY(0px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+      }
+
+      /* Color themes */
+      .sticky-note.yellow {
+        --sticky-color: #fef08a;
+        --sticky-border-color: #facc15;
+        --sticky-text-color: #451a03;
+      }
+      .sticky-note.blue {
+        --sticky-color: #bfdbfe;
+        --sticky-border-color: #3b82f6;
+        --sticky-text-color: #1e3a8a;
+      }
+      .sticky-note.pink {
+        --sticky-color: #fce7f3;
+        --sticky-border-color: #ec4899;
+        --sticky-text-color: #831843;
+      }
+      .sticky-note.green {
+        --sticky-color: #d1fae5;
+        --sticky-border-color: #10b981;
+        --sticky-text-color: #064e3b;
+      }
+      .sticky-note.gray {
+        --sticky-color: #f3f4f6;
+        --sticky-border-color: #6b7280;
+        --sticky-text-color: #374151;
+      }
+
+      /* Title and body containers */
+      .sticky-title-container {
+        position: relative;
+        border-bottom: 1px solid var(--sticky-border-color);
+        background-color: rgba(255, 255, 255, 0.5);
+        display: flex;
+        align-items: center;
+      }
+      .sticky-body-container {
+        position: relative;
+      }
+
+      /* Editable fields */
+      [contenteditable='true'] {
+        margin: 2px;
+        padding: 4px 8px;
+        outline: none;
+        border-radius: var(--curvature);
+        transition: background 0.2s;
+      }
+      [contenteditable='true']:focus {
+        background-color: rgba(255, 255, 255, 0.8);
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        outline-color: var(--sticky-border-color);
+      }
+
+      /* Title */
+      .sticky-title {
+        font-weight: 600;
+        font-size: 13px;
+        color: var(--sticky-text-color);
+        min-height: 20px;
+        line-height: 20px;
+        border-top-left-radius: var(--curvature);
+        border-top-right-radius: var(--curvature);
+        flex-grow: 1;
+        padding-left: 8px;
+      }
+      .sticky-title:empty::before {
+        content: 'Click to add title';
+        opacity: 0.5;
+        font-style: italic;
+      }
+      .sticky-title:focus {
+        border-bottom-left-radius: 0px;
+        border-bottom-right-radius: 0px;
+      }
+
+      /* Body */
+      .sticky-body {
+        padding: 8px 10px;
+        color: var(--sticky-text-color);
+        line-height: 1.4;
+        min-height: 48px;
+        word-wrap: break-word;
+        white-space: pre-wrap;
+      }
+      .sticky-body:empty::before {
+        content: 'Click to add note';
+        opacity: 0.5;
+        font-style: italic;
+      }
+      .sticky-body:focus {
+        border-top-left-radius: 0px;
+        border-top-right-radius: 0px;
+      }
+
+      /* Drag icon */
+      .sticky-title-container > .drag-handle {
+        --icon-color: var(--sticky-border-color);
+        cursor: move;
+        max-width: 0px;
+        overflow: hidden;
+        transition: all 0.2s ease;
+        padding-left: 0;
+      }
+
+      .sticky-note:hover .drag-handle {
+        max-width: 20px;
+        padding-left: 8px;
+      }
+
+      .sticky-note:focus-within .sticky-title-container > .drag-handle {
+        max-width: 0px;
+        padding-left: 0px;
+      }
+
+      /* Focus/active states */
+      .sticky-note:focus-within {
+        box-shadow: 0 0 0 1px var(--sticky-border-color),
+          0 10px 20px rgba(0, 0, 0, 0.3);
+      }
+
+      .sticky-note:focus-within .drag-handle {
+        max-width: 0px;
+      }
+    `;
+    }
+    updated(changes) {
+        super.updated(changes);
+        if (changes.has('data') || changes.has('uuid')) {
+            this.updateCanvasSize();
+        }
+    }
+    updateCanvasSize() {
+        if (!this.data) {
+            return;
+        }
+        const element = this.querySelector('.sticky-note');
+        if (element) {
+            const rect = element.getBoundingClientRect();
+            getStore()
+                .getState()
+                .expandCanvas(this.data.position.left + rect.width, this.data.position.top + rect.height);
+        }
+    }
+    handleTitleBlur(event) {
+        const target = event.target;
+        const newTitle = target.textContent || '';
+        if (this.data && newTitle !== this.data.title) {
+            getStore()
+                .getState()
+                .updateStickyNote(this.uuid, {
+                ...this.data,
+                title: newTitle
+            });
+        }
+        this.requestUpdate();
+    }
+    handleBodyBlur(event) {
+        const target = event.target;
+        const newBody = target.textContent || '';
+        if (this.data && newBody !== this.data.body) {
+            getStore()
+                .getState()
+                .updateStickyNote(this.uuid, {
+                ...this.data,
+                body: newBody
+            });
+        }
+        this.requestUpdate();
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            event.target.blur();
+        }
+        if (event.key === 'Escape') {
+            event.target.blur();
+        }
+    }
+    render() {
+        if (!this.data) {
+            return html `<div class="sticky-note" style="display: none;"></div>`;
+        }
+        const style = `left: ${this.data.position.left}px; top: ${this.data.position.top}px;`;
+        return html `
+      <div
+        class="sticky-note ${this.data.color} ${this.dragging
+            ? 'dragging'
+            : ''}"
+        style="${style}"
+        data-uuid="${this.uuid}"
+      >
+        <div class="sticky-title-container">
+          <temba-icon name="drag" class="drag-handle"></temba-icon>
+          <div
+            class="sticky-title"
+            contenteditable="true"
+            @blur="${this.handleTitleBlur}"
+            @keydown="${this.handleKeyDown}"
+            @mousedown="${(e) => e.stopPropagation()}"
+            .textContent="${this.data.title}"
+          ></div>
+        </div>
+        <div class="sticky-body-container">
+          <div
+            class="sticky-body"
+            contenteditable="true"
+            @blur="${this.handleBodyBlur}"
+            @keydown="${this.handleKeyDown}"
+            @mousedown="${(e) => e.stopPropagation()}"
+            .textContent="${this.data.body}"
+          ></div>
+          <div class="edit-icon" title="Edit note"></div>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], StickyNote.prototype, "uuid", void 0);
+__decorate([
+    property({ type: Object })
+], StickyNote.prototype, "data", void 0);
+__decorate([
+    property({ type: Boolean })
+], StickyNote.prototype, "dragging", void 0);
+//# sourceMappingURL=StickyNote.js.map

package/out-tsc/src/flow/StickyNote.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StickyNote.js","sourceRoot":"","sources":["../../../src/flow/StickyNote.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 { StickyNote as StickyNoteData } from '../store/flow-definition';\nimport { getStore } from '../store/Store';\n\nexport class StickyNote extends RapidElement {\n  @property({ type: String })\n  public uuid: string;\n\n  @property({ type: Object })\n  public data: StickyNoteData;\n\n  @property({ type: Boolean })\n  private dragging = false;\n\n  static get styles() {\n    return css`\n      :host {\n        --sticky-color: #fef08a;\n        --sticky-border-color: #facc15;\n        --sticky-text-color: #451a03;\n        --curvature: 8px;\n      }\n\n      .sticky-note {\n        width: 200px;\n        background-color: var(--sticky-color);\n        border: 1px solid var(--sticky-border-color);\n        border-radius: var(--curvature);\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,\n          sans-serif;\n        font-size: 12px;\n        overflow: hidden;\n        transition: transform 0.1s ease, box-shadow 0.2s ease;\n        color: var(--sticky-text-color);\n      }\n\n      .sticky-note.dragging {\n        opacity: 0.5;\n        z-index: 1000;\n        transform: rotate(0deg);\n        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);\n      }\n\n      .sticky-note:hover {\n        transform: translateY(0px);\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\n      }\n\n      /* Color themes */\n      .sticky-note.yellow {\n        --sticky-color: #fef08a;\n        --sticky-border-color: #facc15;\n        --sticky-text-color: #451a03;\n      }\n      .sticky-note.blue {\n        --sticky-color: #bfdbfe;\n        --sticky-border-color: #3b82f6;\n        --sticky-text-color: #1e3a8a;\n      }\n      .sticky-note.pink {\n        --sticky-color: #fce7f3;\n        --sticky-border-color: #ec4899;\n        --sticky-text-color: #831843;\n      }\n      .sticky-note.green {\n        --sticky-color: #d1fae5;\n        --sticky-border-color: #10b981;\n        --sticky-text-color: #064e3b;\n      }\n      .sticky-note.gray {\n        --sticky-color: #f3f4f6;\n        --sticky-border-color: #6b7280;\n        --sticky-text-color: #374151;\n      }\n\n      /* Title and body containers */\n      .sticky-title-container {\n        position: relative;\n        border-bottom: 1px solid var(--sticky-border-color);\n        background-color: rgba(255, 255, 255, 0.5);\n        display: flex;\n        align-items: center;\n      }\n      .sticky-body-container {\n        position: relative;\n      }\n\n      /* Editable fields */\n      [contenteditable='true'] {\n        margin: 2px;\n        padding: 4px 8px;\n        outline: none;\n        border-radius: var(--curvature);\n        transition: background 0.2s;\n      }\n      [contenteditable='true']:focus {\n        background-color: rgba(255, 255, 255, 0.8);\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        outline-color: var(--sticky-border-color);\n      }\n\n      /* Title */\n      .sticky-title {\n        font-weight: 600;\n        font-size: 13px;\n        color: var(--sticky-text-color);\n        min-height: 20px;\n        line-height: 20px;\n        border-top-left-radius: var(--curvature);\n        border-top-right-radius: var(--curvature);\n        flex-grow: 1;\n        padding-left: 8px;\n      }\n      .sticky-title:empty::before {\n        content: 'Click to add title';\n        opacity: 0.5;\n        font-style: italic;\n      }\n      .sticky-title:focus {\n        border-bottom-left-radius: 0px;\n        border-bottom-right-radius: 0px;\n      }\n\n      /* Body */\n      .sticky-body {\n        padding: 8px 10px;\n        color: var(--sticky-text-color);\n        line-height: 1.4;\n        min-height: 48px;\n        word-wrap: break-word;\n        white-space: pre-wrap;\n      }\n      .sticky-body:empty::before {\n        content: 'Click to add note';\n        opacity: 0.5;\n        font-style: italic;\n      }\n      .sticky-body:focus {\n        border-top-left-radius: 0px;\n        border-top-right-radius: 0px;\n      }\n\n      /* Drag icon */\n      .sticky-title-container > .drag-handle {\n        --icon-color: var(--sticky-border-color);\n        cursor: move;\n        max-width: 0px;\n        overflow: hidden;\n        transition: all 0.2s ease;\n        padding-left: 0;\n      }\n\n      .sticky-note:hover .drag-handle {\n        max-width: 20px;\n        padding-left: 8px;\n      }\n\n      .sticky-note:focus-within .sticky-title-container > .drag-handle {\n        max-width: 0px;\n        padding-left: 0px;\n      }\n\n      /* Focus/active states */\n      .sticky-note:focus-within {\n        box-shadow: 0 0 0 1px var(--sticky-border-color),\n          0 10px 20px rgba(0, 0, 0, 0.3);\n      }\n\n      .sticky-note:focus-within .drag-handle {\n        max-width: 0px;\n      }\n    `;\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('data') || changes.has('uuid')) {\n      this.updateCanvasSize();\n    }\n  }\n\n  private updateCanvasSize(): void {\n    if (!this.data) {\n      return;\n    }\n\n    const element = this.querySelector('.sticky-note');\n    if (element) {\n      const rect = element.getBoundingClientRect();\n      getStore()\n        .getState()\n        .expandCanvas(\n          this.data.position.left + rect.width,\n          this.data.position.top + rect.height\n        );\n    }\n  }\n\n  private handleTitleBlur(event: FocusEvent): void {\n    const target = event.target as HTMLElement;\n    const newTitle = target.textContent || '';\n\n    if (this.data && newTitle !== this.data.title) {\n      getStore()\n        .getState()\n        .updateStickyNote(this.uuid, {\n          ...this.data,\n          title: newTitle\n        });\n    }\n    this.requestUpdate();\n  }\n\n  private handleBodyBlur(event: FocusEvent): void {\n    const target = event.target as HTMLElement;\n    const newBody = target.textContent || '';\n\n    if (this.data && newBody !== this.data.body) {\n      getStore()\n        .getState()\n        .updateStickyNote(this.uuid, {\n          ...this.data,\n          body: newBody\n        });\n    }\n    this.requestUpdate();\n  }\n\n  private handleKeyDown(event: KeyboardEvent): void {\n    if (event.key === 'Enter' && !event.shiftKey) {\n      event.preventDefault();\n      (event.target as HTMLElement).blur();\n    }\n    if (event.key === 'Escape') {\n      (event.target as HTMLElement).blur();\n    }\n  }\n\n  public render(): TemplateResult {\n    if (!this.data) {\n      return html`<div class=\"sticky-note\" style=\"display: none;\"></div>`;\n    }\n\n    const style = `left: ${this.data.position.left}px; top: ${this.data.position.top}px;`;\n\n    return html`\n      <div\n        class=\"sticky-note ${this.data.color} ${this.dragging\n          ? 'dragging'\n          : ''}\"\n        style=\"${style}\"\n        data-uuid=\"${this.uuid}\"\n      >\n        <div class=\"sticky-title-container\">\n          <temba-icon name=\"drag\" class=\"drag-handle\"></temba-icon>\n          <div\n            class=\"sticky-title\"\n            contenteditable=\"true\"\n            @blur=\"${this.handleTitleBlur}\"\n            @keydown=\"${this.handleKeyDown}\"\n            @mousedown=\"${(e: MouseEvent) => e.stopPropagation()}\"\n            .textContent=\"${this.data.title}\"\n          ></div>\n        </div>\n        <div class=\"sticky-body-container\">\n          <div\n            class=\"sticky-body\"\n            contenteditable=\"true\"\n            @blur=\"${this.handleBodyBlur}\"\n            @keydown=\"${this.handleKeyDown}\"\n            @mousedown=\"${(e: MouseEvent) => e.stopPropagation()}\"\n            .textContent=\"${this.data.body}\"\n          ></div>\n          <div class=\"edit-icon\" title=\"Edit note\"></div>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/list/RunList.js

@@ -175,7 +175,8 @@ export class RunList extends TembaList {
                   placeholder="Result Preview"
                   valueKey="key"
                   @change=${this.handleColumnChanged}
-                />
+                  style="z-index: 10;"
+                ></temba-select>
               `
             : null}
         </div>

package/out-tsc/src/list/RunList.js.map

@@ -1 +1 @@
-{"version":3,"file":"RunList.js","sourceRoot":"","sources":["../../../src/list/RunList.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Checkbox } from '../checkbox/Checkbox';\nimport { Select } from '../select/Select';\nimport { capitalize } from '../utils';\nimport { Icon } from '../vectoricon';\nimport { TembaList } from './TembaList';\n\nconst FLOW_COLOR = 'rgb(223, 65, 159)';\n\nexport class RunList extends TembaList {\n  @property({ type: String })\n  flow: string;\n\n  @property({ type: Object, attribute: false })\n  results: any[];\n\n  @property({ type: Boolean })\n  responses = true;\n\n  @property({ type: Object })\n  resultPreview: any;\n\n  @property({ type: Object })\n  selectedRun: any;\n\n  @property({ type: Boolean })\n  allowDelete = false;\n\n  private resultKeys = {};\n\n  static get styles() {\n    return css`\n      :host {\n        overflow-y: auto !important;\n        --contact-name-font-size: 1em;\n      }\n\n      @media only screen and (max-height: 768px) {\n        temba-options {\n          max-height: 20vh;\n        }\n      }\n\n      temba-options {\n        display: block;\n        width: 100%;\n        flex-grow: 1;\n      }\n    `;\n  }\n\n  public firstUpdated(changedProperties: Map<string, any>) {\n    super.firstUpdated(changedProperties);\n  }\n\n  public updated(changedProperties: Map<string, any>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('responses') || changedProperties.has('flow')) {\n      if (this.flow) {\n        this.endpoint = `/api/v2/runs.json?flow=${this.flow}${\n          this.responses ? '&responded=1' : ''\n        }`;\n      }\n    }\n\n    if (changedProperties.has('resultPreview')) {\n      this.createRenderOption();\n    }\n\n    if (changedProperties.has('results')) {\n      if (this.results) {\n        const select = this.shadowRoot.querySelector(\n          'temba-select'\n        ) as Select<any>;\n        select.setOptions(this.results);\n        this.resultKeys = this.results.reduce(\n          (current, result) => ({ ...current, [result.key]: result }),\n          {}\n        );\n      }\n    }\n  }\n\n  public renderResultPreview(run: any) {\n    if (this.resultPreview) {\n      const runResult = run.values[this.resultPreview.key];\n      if (runResult) {\n        if (this.resultPreview.categories.length > 1) {\n          if (runResult.category) {\n            return runResult.category;\n          }\n        } else {\n          return runResult.value;\n        }\n      }\n    }\n    return null;\n  }\n\n  public removeRun(id: number) {\n    this.items = this.items.filter((run) => run.id !== id);\n    this.cursorIndex = Math.min(this.cursorIndex, this.items.length);\n    this.requestUpdate('cursorIndex');\n  }\n\n  public getIcon(run: any): TemplateResult {\n    let icon = null;\n    if (run.exit_type == 'completed') {\n      icon = html`<temba-icon\n        name=\"check\"\n        style=\"--icon-color:#666;margin-left:0.5em\"\n      />`;\n    } else if (run.exit_type == 'interrupted') {\n      icon = html`<temba-icon\n        name=\"x-octagon\"\n        style=\"--icon-color:${FLOW_COLOR};margin-left:0.5em\"\n      />`;\n    } else if (run.exit_type == 'expired') {\n      icon = html`<temba-icon\n        name=\"clock\"\n        style=\"--icon-color:${FLOW_COLOR};margin-left:0.5em\"\n      />`;\n    } else if (!run.exit_type) {\n      if (run.responded) {\n        icon = html`<temba-icon\n          name=\"activity\"\n          style=\"--icon-color:var(--color-primary-dark);margin-left:0.5em\"\n        />`;\n      } else {\n        icon = html`<temba-icon\n          name=\"hourglass\"\n          style=\"--icon-color:var(--color-primary-dark);margin-left:0.5em\"\n        />`;\n      }\n    }\n    return icon;\n  }\n\n  public createRenderOption() {\n    this.renderOption = (run: any): TemplateResult => {\n      let statusStyle = '';\n\n      if (!run.exited_on) {\n        statusStyle = 'font-weight:400;';\n      }\n\n      if (!run.responded) {\n        statusStyle += '';\n      }\n\n      return html`\n        <div class=\"row\" style=\"${statusStyle}display:flex;align-items:center\">\n          <div\n            style=\"width:16em;white-space:nowrap;overflow: hidden; text-overflow: ellipsis;\"\n          >\n            <temba-contact-name\n              name=${run.contact?.name || run.contact?.anon_display || ''}\n              urn=${run.contact?.urn || ''}\n              icon-size=\"15\"\n            />\n          </div>\n\n          <div\n            style=\"margin: 0em 1em;flex:1;white-space:nowrap; overflow:hidden; text-overflow: ellipsis;\"\n          >\n            ${this.renderResultPreview(run)}\n          </div>\n\n          <div style=\"flex-shrink:1\">\n            <temba-date value=\"${run.modified_on}\" display=\"duration\" />\n          </div>\n          ${this.getIcon(run)}\n        </div>\n      `;\n    };\n  }\n\n  public getRefreshEndpoint() {\n    if (this.items.length > 0) {\n      const modifiedOn = this.items[0].modified_on;\n      return this.endpoint + '&after=' + modifiedOn;\n    }\n    return this.endpoint;\n  }\n\n  public toggleResponded() {\n    this.responses = (\n      this.shadowRoot.querySelector('#responded') as Checkbox\n    ).checked;\n  }\n\n  public handleColumnChanged(event: any) {\n    if (event.target.values.length > 0) {\n      this.resultPreview = event.target.values[0];\n    } else {\n      this.resultPreview = null;\n    }\n  }\n\n  public handleSelected(selected: any) {\n    this.selectedRun = selected;\n  }\n\n  public getListStyle(): string {\n    return '';\n  }\n\n  public renderHeader(): TemplateResult {\n    return html`\n      <div style=\"display:flex;width:100%;margin-bottom: 1em;\">\n        <div style=\"flex-grow:1\">\n          ${this.results\n            ? html`\n                <temba-select\n                  clearable\n                  placeholder=\"Result Preview\"\n                  valueKey=\"key\"\n                  @change=${this.handleColumnChanged}\n                />\n              `\n            : null}\n        </div>\n        <div style=\"margin-left:1em;\">\n          <temba-checkbox\n            id=\"responded\"\n            label=\"Responses Only\"\n            checked=\"true\"\n            @click=${this.toggleResponded}\n          />\n        </div>\n      </div>\n      <div\n        style=\"\n        font-size:0.8em;\n        color:rgba(0,0,0,.4);\n        text-align:right;\n        background:#f9f9f9;\n        border: 1px solid var(--color-widget-border);\n        margin-bottom:-0.5em; \n        padding-bottom: 0.6em;\n        padding-top: 0.3em;\n        padding-right: 4.5em;\n        border-top-right-radius: var(--curvature);\n        border-top-left-radius: var(--curvature)\n    \"\n      >\n        Last Updated\n      </div>\n    `;\n  }\n\n  public renderFooter(): TemplateResult {\n    if (!this.selectedRun || !this.resultKeys) {\n      return null;\n    }\n\n    const resultKeys = Object.keys(this.selectedRun.values || {});\n\n    return html` <div\n      style=\"margin-top: 1.5em; margin-bottom:0.5em;flex-grow:1;border-radius:var(--curvature); border: 1px solid var(--color-widget-border);\"\n    >\n      <div style=\"display:flex;flex-direction:column;\">\n        <div\n          style=\"font-size:1.5em;background:#f9f9f9;padding:.75em;padding-top:.35em;display:flex;align-items:center;border-top-right-radius:var(--curvature);border-top-left-radius:var(--curvature)\"\n        >\n          <div>\n            <temba-contact-name\n              style=\"cursor:pointer\"\n              name=${this.selectedRun.contact?.name ||\n              this.selectedRun.contact?.anon_display ||\n              ''}\n              urn=${this.selectedRun.contact?.urn || ''}\n              onclick=\"goto(event, this)\"\n              href=\"/contact/read/${this.selectedRun.contact?.uuid || ''}/\"\n            ></temba-contact-name>\n            <div\n              style=\"display:flex;margin-left:-0.2em;margin-top:0.25em;font-size: 0.65em\"\n            >\n              ${this.selectedRun.exit_type\n                ? html`\n                    <div style=\"margin-left:2em;flex-grow:1;display:flex\">\n                      ${this.getIcon(this.selectedRun)}\n                      <div style=\"margin-left:0.5em\">\n                        ${capitalize(this.selectedRun.exit_type)}&nbsp;\n                      </div>\n                      <temba-date\n                        value=\"${this.selectedRun.exited_on}\"\n                        compare=\"${this.selectedRun.created_on}\"\n                        display=\"duration\"\n                      />\n                    </div>\n                  `\n                : html`${this.getIcon(this.selectedRun)}\n                    <div style=\"margin-left:1.5em;flex-grow:1;display:flex\">\n                      <div>Started&nbsp;</div>\n                      <temba-date\n                        value=\"${this.selectedRun.created_on}\"\n                        display=\"duration\"\n                      ></temba-date>\n                    </div>`}\n            </div>\n          </div>\n          <div style=\"flex-grow:1\"></div>\n          <div style=\"display:flex;flex-direction: column\">\n            <div style=\"font-size:0.75em\">\n              ${this.selectedRun.created_on\n                ? new Date(this.selectedRun.created_on).toLocaleString()\n                : ''}\n            </div>\n            <div\n              style=\"font-size:0.6em;align-self:flex-end;color:#888;line-height:0.75em\"\n            >\n              Started\n            </div>\n          </div>\n          ${this.allowDelete\n            ? html` <temba-icon\n                clickable\n                style=\"margin-left:0.75em;\"\n                name=${Icon.delete}\n                onclick=\"deleteRun(${this.selectedRun.id});\"\n              ></temba-icon>`\n            : null}\n        </div>\n\n        ${resultKeys.length > 0\n          ? html`\n              <div style=\"padding:1em;\">\n                <div\n                  style=\"display:flex;font-size:1.2em;position:relative;right:0px\"\n                >\n                  <div style=\"flex-grow:1\"></div>\n                </div>\n\n                <table width=\"100%\">\n                  <tr>\n                    <th style=\"text-align:left\" width=\"25%\">Result</th>\n                    <th style=\"text-align:left\" width=\"25%\">Category</th>\n                    <th style=\"text-align:left\">Value</th>\n                  </tr>\n\n                  ${Object.keys(this.selectedRun.values).map((key: string) => {\n                    const result = this.selectedRun.values[key];\n                    const meta = this.resultKeys[key];\n\n                    // if our result is no longer represented in the flow, skip it\n                    if (meta) {\n                      return html`<tr>\n                        <td>${result.name}</td>\n                        <td>\n                          ${meta.categories.length > 1 ? result.category : '--'}\n                        </td>\n                        <td>${result.value}</td>\n                      </tr>`;\n                    }\n                    return null;\n                  })}\n                </table>\n              </div>\n            `\n          : null}\n      </div>\n    </div>`;\n  }\n\n  constructor() {\n    super();\n    this.reverseRefresh = false;\n    this.valueKey = 'uuid';\n    this.hideShadow = true;\n    this.createRenderOption();\n  }\n}\n"]}
+{"version":3,"file":"RunList.js","sourceRoot":"","sources":["../../../src/list/RunList.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Checkbox } from '../checkbox/Checkbox';\nimport { Select } from '../select/Select';\nimport { capitalize } from '../utils';\nimport { Icon } from '../vectoricon';\nimport { TembaList } from './TembaList';\n\nconst FLOW_COLOR = 'rgb(223, 65, 159)';\n\nexport class RunList extends TembaList {\n  @property({ type: String })\n  flow: string;\n\n  @property({ type: Object, attribute: false })\n  results: any[];\n\n  @property({ type: Boolean })\n  responses = true;\n\n  @property({ type: Object })\n  resultPreview: any;\n\n  @property({ type: Object })\n  selectedRun: any;\n\n  @property({ type: Boolean })\n  allowDelete = false;\n\n  private resultKeys = {};\n\n  static get styles() {\n    return css`\n      :host {\n        overflow-y: auto !important;\n        --contact-name-font-size: 1em;\n      }\n\n      @media only screen and (max-height: 768px) {\n        temba-options {\n          max-height: 20vh;\n        }\n      }\n\n      temba-options {\n        display: block;\n        width: 100%;\n        flex-grow: 1;\n      }\n    `;\n  }\n\n  public firstUpdated(changedProperties: Map<string, any>) {\n    super.firstUpdated(changedProperties);\n  }\n\n  public updated(changedProperties: Map<string, any>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('responses') || changedProperties.has('flow')) {\n      if (this.flow) {\n        this.endpoint = `/api/v2/runs.json?flow=${this.flow}${\n          this.responses ? '&responded=1' : ''\n        }`;\n      }\n    }\n\n    if (changedProperties.has('resultPreview')) {\n      this.createRenderOption();\n    }\n\n    if (changedProperties.has('results')) {\n      if (this.results) {\n        const select = this.shadowRoot.querySelector(\n          'temba-select'\n        ) as Select<any>;\n        select.setOptions(this.results);\n        this.resultKeys = this.results.reduce(\n          (current, result) => ({ ...current, [result.key]: result }),\n          {}\n        );\n      }\n    }\n  }\n\n  public renderResultPreview(run: any) {\n    if (this.resultPreview) {\n      const runResult = run.values[this.resultPreview.key];\n      if (runResult) {\n        if (this.resultPreview.categories.length > 1) {\n          if (runResult.category) {\n            return runResult.category;\n          }\n        } else {\n          return runResult.value;\n        }\n      }\n    }\n    return null;\n  }\n\n  public removeRun(id: number) {\n    this.items = this.items.filter((run) => run.id !== id);\n    this.cursorIndex = Math.min(this.cursorIndex, this.items.length);\n    this.requestUpdate('cursorIndex');\n  }\n\n  public getIcon(run: any): TemplateResult {\n    let icon = null;\n    if (run.exit_type == 'completed') {\n      icon = html`<temba-icon\n        name=\"check\"\n        style=\"--icon-color:#666;margin-left:0.5em\"\n      />`;\n    } else if (run.exit_type == 'interrupted') {\n      icon = html`<temba-icon\n        name=\"x-octagon\"\n        style=\"--icon-color:${FLOW_COLOR};margin-left:0.5em\"\n      />`;\n    } else if (run.exit_type == 'expired') {\n      icon = html`<temba-icon\n        name=\"clock\"\n        style=\"--icon-color:${FLOW_COLOR};margin-left:0.5em\"\n      />`;\n    } else if (!run.exit_type) {\n      if (run.responded) {\n        icon = html`<temba-icon\n          name=\"activity\"\n          style=\"--icon-color:var(--color-primary-dark);margin-left:0.5em\"\n        />`;\n      } else {\n        icon = html`<temba-icon\n          name=\"hourglass\"\n          style=\"--icon-color:var(--color-primary-dark);margin-left:0.5em\"\n        />`;\n      }\n    }\n    return icon;\n  }\n\n  public createRenderOption() {\n    this.renderOption = (run: any): TemplateResult => {\n      let statusStyle = '';\n\n      if (!run.exited_on) {\n        statusStyle = 'font-weight:400;';\n      }\n\n      if (!run.responded) {\n        statusStyle += '';\n      }\n\n      return html`\n        <div class=\"row\" style=\"${statusStyle}display:flex;align-items:center\">\n          <div\n            style=\"width:16em;white-space:nowrap;overflow: hidden; text-overflow: ellipsis;\"\n          >\n            <temba-contact-name\n              name=${run.contact?.name || run.contact?.anon_display || ''}\n              urn=${run.contact?.urn || ''}\n              icon-size=\"15\"\n            />\n          </div>\n\n          <div\n            style=\"margin: 0em 1em;flex:1;white-space:nowrap; overflow:hidden; text-overflow: ellipsis;\"\n          >\n            ${this.renderResultPreview(run)}\n          </div>\n\n          <div style=\"flex-shrink:1\">\n            <temba-date value=\"${run.modified_on}\" display=\"duration\" />\n          </div>\n          ${this.getIcon(run)}\n        </div>\n      `;\n    };\n  }\n\n  public getRefreshEndpoint() {\n    if (this.items.length > 0) {\n      const modifiedOn = this.items[0].modified_on;\n      return this.endpoint + '&after=' + modifiedOn;\n    }\n    return this.endpoint;\n  }\n\n  public toggleResponded() {\n    this.responses = (\n      this.shadowRoot.querySelector('#responded') as Checkbox\n    ).checked;\n  }\n\n  public handleColumnChanged(event: any) {\n    if (event.target.values.length > 0) {\n      this.resultPreview = event.target.values[0];\n    } else {\n      this.resultPreview = null;\n    }\n  }\n\n  public handleSelected(selected: any) {\n    this.selectedRun = selected;\n  }\n\n  public getListStyle(): string {\n    return '';\n  }\n\n  public renderHeader(): TemplateResult {\n    return html`\n      <div style=\"display:flex;width:100%;margin-bottom: 1em;\">\n        <div style=\"flex-grow:1\">\n          ${this.results\n            ? html`\n                <temba-select\n                  clearable\n                  placeholder=\"Result Preview\"\n                  valueKey=\"key\"\n                  @change=${this.handleColumnChanged}\n                  style=\"z-index: 10;\"\n                ></temba-select>\n              `\n            : null}\n        </div>\n        <div style=\"margin-left:1em;\">\n          <temba-checkbox\n            id=\"responded\"\n            label=\"Responses Only\"\n            checked=\"true\"\n            @click=${this.toggleResponded}\n          />\n        </div>\n      </div>\n      <div\n        style=\"\n        font-size:0.8em;\n        color:rgba(0,0,0,.4);\n        text-align:right;\n        background:#f9f9f9;\n        border: 1px solid var(--color-widget-border);\n        margin-bottom:-0.5em; \n        padding-bottom: 0.6em;\n        padding-top: 0.3em;\n        padding-right: 4.5em;\n        border-top-right-radius: var(--curvature);\n        border-top-left-radius: var(--curvature)\n    \"\n      >\n        Last Updated\n      </div>\n    `;\n  }\n\n  public renderFooter(): TemplateResult {\n    if (!this.selectedRun || !this.resultKeys) {\n      return null;\n    }\n\n    const resultKeys = Object.keys(this.selectedRun.values || {});\n\n    return html` <div\n      style=\"margin-top: 1.5em; margin-bottom:0.5em;flex-grow:1;border-radius:var(--curvature); border: 1px solid var(--color-widget-border);\"\n    >\n      <div style=\"display:flex;flex-direction:column;\">\n        <div\n          style=\"font-size:1.5em;background:#f9f9f9;padding:.75em;padding-top:.35em;display:flex;align-items:center;border-top-right-radius:var(--curvature);border-top-left-radius:var(--curvature)\"\n        >\n          <div>\n            <temba-contact-name\n              style=\"cursor:pointer\"\n              name=${this.selectedRun.contact?.name ||\n              this.selectedRun.contact?.anon_display ||\n              ''}\n              urn=${this.selectedRun.contact?.urn || ''}\n              onclick=\"goto(event, this)\"\n              href=\"/contact/read/${this.selectedRun.contact?.uuid || ''}/\"\n            ></temba-contact-name>\n            <div\n              style=\"display:flex;margin-left:-0.2em;margin-top:0.25em;font-size: 0.65em\"\n            >\n              ${this.selectedRun.exit_type\n                ? html`\n                    <div style=\"margin-left:2em;flex-grow:1;display:flex\">\n                      ${this.getIcon(this.selectedRun)}\n                      <div style=\"margin-left:0.5em\">\n                        ${capitalize(this.selectedRun.exit_type)}&nbsp;\n                      </div>\n                      <temba-date\n                        value=\"${this.selectedRun.exited_on}\"\n                        compare=\"${this.selectedRun.created_on}\"\n                        display=\"duration\"\n                      />\n                    </div>\n                  `\n                : html`${this.getIcon(this.selectedRun)}\n                    <div style=\"margin-left:1.5em;flex-grow:1;display:flex\">\n                      <div>Started&nbsp;</div>\n                      <temba-date\n                        value=\"${this.selectedRun.created_on}\"\n                        display=\"duration\"\n                      ></temba-date>\n                    </div>`}\n            </div>\n          </div>\n          <div style=\"flex-grow:1\"></div>\n          <div style=\"display:flex;flex-direction: column\">\n            <div style=\"font-size:0.75em\">\n              ${this.selectedRun.created_on\n                ? new Date(this.selectedRun.created_on).toLocaleString()\n                : ''}\n            </div>\n            <div\n              style=\"font-size:0.6em;align-self:flex-end;color:#888;line-height:0.75em\"\n            >\n              Started\n            </div>\n          </div>\n          ${this.allowDelete\n            ? html` <temba-icon\n                clickable\n                style=\"margin-left:0.75em;\"\n                name=${Icon.delete}\n                onclick=\"deleteRun(${this.selectedRun.id});\"\n              ></temba-icon>`\n            : null}\n        </div>\n\n        ${resultKeys.length > 0\n          ? html`\n              <div style=\"padding:1em;\">\n                <div\n                  style=\"display:flex;font-size:1.2em;position:relative;right:0px\"\n                >\n                  <div style=\"flex-grow:1\"></div>\n                </div>\n\n                <table width=\"100%\">\n                  <tr>\n                    <th style=\"text-align:left\" width=\"25%\">Result</th>\n                    <th style=\"text-align:left\" width=\"25%\">Category</th>\n                    <th style=\"text-align:left\">Value</th>\n                  </tr>\n\n                  ${Object.keys(this.selectedRun.values).map((key: string) => {\n                    const result = this.selectedRun.values[key];\n                    const meta = this.resultKeys[key];\n\n                    // if our result is no longer represented in the flow, skip it\n                    if (meta) {\n                      return html`<tr>\n                        <td>${result.name}</td>\n                        <td>\n                          ${meta.categories.length > 1 ? result.category : '--'}\n                        </td>\n                        <td>${result.value}</td>\n                      </tr>`;\n                    }\n                    return null;\n                  })}\n                </table>\n              </div>\n            `\n          : null}\n      </div>\n    </div>`;\n  }\n\n  constructor() {\n    super();\n    this.reverseRefresh = false;\n    this.valueKey = 'uuid';\n    this.hideShadow = true;\n    this.createRenderOption();\n  }\n}\n"]}

package/out-tsc/src/list/SortableList.js

@@ -220,6 +220,12 @@ export class SortableList extends RapidElement {
     }
     handleMouseDown(event) {
         let ele = event.target;
+        // if we have a drag handle, only allow dragging from that element
+        if (this.dragHandle) {
+            if (!ele.classList.contains(this.dragHandle)) {
+                return;
+            }
+        }
         ele = ele.closest('.sortable');
         if (ele) {
             event.preventDefault();
@@ -384,6 +390,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], SortableList.prototype, "dropTargetId", void 0);
+__decorate([
+    property({ type: String })
+], SortableList.prototype, "dragHandle", void 0);
 __decorate([
     property({ attribute: false })
 ], SortableList.prototype, "prepareGhost", void 0);

package/out-tsc/src/list/SortableList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableList.js","sourceRoot":"","sources":["../../../src/list/SortableList.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\n\n/**\n * A simple list that can be sorted by dragging\n */\n\n// how far we have to drag before it starts\nconst DRAG_THRESHOLD = 2;\nexport class SortableList extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        margin: auto;\n      }\n\n      .container {\n        user-select: none;\n        position: relative;\n      }\n\n      .container.horizontal {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n      }\n\n      .dragging {\n        background: var(--color-selection);\n      }\n\n      .dragged-item {\n        opacity: 0;\n        pointer-events: none;\n      }\n\n      .sortable {\n        transition: all 300ms ease-in-out;\n        display: flex;\n        padding: 0.4em 0;\n      }\n\n      .container.horizontal .sortable {\n        padding: 0;\n        margin-right: 0.25em;\n        margin-bottom: 0.25em;\n      }\n\n      .drop-indicator {\n        position: absolute;\n        background: var(--color-primary-dark, #1c7cd6);\n        z-index: 1000;\n        pointer-events: none;\n      }\n\n      .container.horizontal .drop-indicator {\n        width: 2px;\n        margin-top: -5px;\n        padding-bottom: 10px;\n      }\n\n      .container:not(.horizontal) .drop-indicator {\n        height: 2px;\n        left: 0;\n      }\n\n      .sortable:hover temba-icon {\n        opacity: 1;\n        cursor: move;\n      }\n\n      .ghost {\n        position: absolute;\n        opacity: 0.7;\n        transition: none;\n        background: var(--color-background, white);\n        border: 1px solid var(--color-primary, #1c7cd6);\n        border-radius: 4px;\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n        pointer-events: none;\n        z-index: 999;\n      }\n\n      .slot {\n        flex-grow: 1;\n      }\n\n      slot > * {\n        user-select: none;\n      }\n\n      temba-icon {\n        opacity: 0.1;\n        padding: 0.2em 0.5em;\n        transition: all 300ms ease-in-out;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  draggingId: string;\n\n  @property({ type: Boolean })\n  horizontal: boolean = false;\n\n  @property({ type: String })\n  dropTargetId: string;\n\n  /**\n   * Optional callback to allow parent components to customize the ghost node.\n   * Called after the ghost node is cloned but before it is appended to the DOM.\n   */\n  @property({ attribute: false })\n  prepareGhost?: (ghost: HTMLElement) => void;\n\n  ghostElement: HTMLDivElement = null;\n  downEle: HTMLDivElement = null;\n  xOffset = 0;\n  yOffset = 0;\n  yDown = 0;\n  xDown = 0;\n\n  draggingIdx = -1;\n  draggingEle = null;\n  dropIndicator: HTMLDivElement = null;\n  pendingDropIndex = -1;\n  pendingTargetElement: HTMLElement = null;\n\n  private clickBlocker: ((e: MouseEvent) => void) | null = null;\n\n  public constructor() {\n    super();\n    this.handleMouseMove = this.handleMouseMove.bind(this);\n    this.handleMouseUp = this.handleMouseUp.bind(this);\n    this.handleMouseDown = this.handleMouseDown.bind(this);\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(_changedProperties);\n  }\n\n  private getSortableElements(): Element[] {\n    return this.shadowRoot\n      .querySelector('slot')\n      .assignedElements()\n      .filter((ele) => ele.classList.contains('sortable'));\n  }\n\n  public getIds() {\n    return this.getSortableElements().map((ele) => ele.id);\n  }\n\n  private getRowIndex(id: string): number {\n    return this.getSortableElements().findIndex((ele) => ele.id === id);\n  }\n\n  private getDropTargetInfo(\n    mouseX: number,\n    mouseY: number\n  ): { element: HTMLDivElement; insertAfter: boolean } | null {\n    const elements = this.getSortableElements().filter(\n      (ele) => ele.id !== this.draggingEle?.id\n    );\n\n    if (elements.length === 0) return null;\n\n    if (this.horizontal) {\n      // For horizontal layout, find the insertion point based on mouse X position\n      for (let i = 0; i < elements.length; i++) {\n        const ele = elements[i];\n        const rect = ele.getBoundingClientRect();\n        const centerX = rect.left + rect.width / 2;\n\n        if (mouseX < centerX) {\n          // Insert before this element\n          return { element: ele as HTMLDivElement, insertAfter: false };\n        }\n      }\n      // If we're past all elements, insert after the last one\n      return {\n        element: elements[elements.length - 1] as HTMLDivElement,\n        insertAfter: true\n      };\n    } else {\n      // For vertical layout, find the insertion point based on mouse Y position\n      for (let i = 0; i < elements.length; i++) {\n        const ele = elements[i];\n        const rect = ele.getBoundingClientRect();\n        const centerY = rect.top + rect.height / 2;\n\n        if (mouseY < centerY) {\n          // Insert before this element\n          return { element: ele as HTMLDivElement, insertAfter: false };\n        }\n      }\n      // If we're past all elements, insert after the last one\n      return {\n        element: elements[elements.length - 1] as HTMLDivElement,\n        insertAfter: true\n      };\n    }\n  }\n\n  private showDropIndicator(targetElement: HTMLElement, insertAfter: boolean) {\n    this.hideDropIndicator();\n\n    if (!targetElement) return;\n\n    const container = this.shadowRoot.querySelector('.container');\n    this.dropIndicator = document.createElement('div');\n    this.dropIndicator.className = 'drop-indicator';\n\n    const targetRect = targetElement.getBoundingClientRect();\n    const containerRect = container.getBoundingClientRect();\n\n    if (this.horizontal) {\n      // For horizontal layout, show vertical line\n      this.dropIndicator.style.height = targetRect.height + 'px';\n      this.dropIndicator.style.top = targetRect.top - containerRect.top + 'px';\n\n      if (insertAfter) {\n        // Show line after target\n        this.dropIndicator.style.left =\n          targetRect.right - containerRect.left + 'px';\n      } else {\n        // Show line before target\n        this.dropIndicator.style.left =\n          targetRect.left - containerRect.left + 'px';\n      }\n    } else {\n      // For vertical layout, show horizontal line\n      this.dropIndicator.style.width = targetRect.width + 'px';\n      this.dropIndicator.style.left =\n        targetRect.left - containerRect.left + 'px';\n\n      if (insertAfter) {\n        // Show line after target\n        this.dropIndicator.style.top =\n          targetRect.bottom - containerRect.top + 'px';\n      } else {\n        // Show line before target\n        this.dropIndicator.style.top =\n          targetRect.top - containerRect.top + 'px';\n      }\n    }\n\n    container.appendChild(this.dropIndicator);\n  }\n\n  private hideDropIndicator() {\n    if (this.dropIndicator) {\n      this.dropIndicator.remove();\n      this.dropIndicator = null;\n    }\n  }\n\n  private handleMouseDown(event: MouseEvent) {\n    let ele = event.target as HTMLDivElement;\n    ele = ele.closest('.sortable');\n    if (ele) {\n      event.preventDefault();\n      event.stopPropagation();\n\n      this.downEle = ele;\n      this.draggingId = ele.id;\n      this.draggingIdx = this.getRowIndex(ele.id);\n      this.draggingEle = ele;\n\n      // Use getBoundingClientRect for accurate offsets\n      const rect = ele.getBoundingClientRect();\n      this.xOffset = event.clientX - rect.left;\n      this.yOffset = event.clientY - rect.top;\n      this.yDown = event.clientY;\n      this.xDown = event.clientX;\n\n      document.addEventListener('mousemove', this.handleMouseMove);\n      document.addEventListener('mouseup', this.handleMouseUp);\n    }\n  }\n\n  private handleMouseMove(event: MouseEvent) {\n    if (\n      !this.ghostElement &&\n      this.downEle &&\n      (Math.abs(event.clientY - this.yDown) > DRAG_THRESHOLD ||\n        Math.abs(event.clientX - this.xDown) > DRAG_THRESHOLD)\n    ) {\n      this.fireCustomEvent(CustomEventType.DragStart, {\n        id: this.downEle.id\n      });\n\n      this.ghostElement = this.downEle.cloneNode(true) as HTMLDivElement;\n      this.ghostElement.classList.add('ghost');\n\n      // dim the original element while dragging\n      this.downEle.style.pointerEvents = 'none';\n      this.downEle.style.opacity = '0.5';\n\n      const rect = this.downEle.getBoundingClientRect();\n      this.ghostElement.style.transition = 'transform 300ms linear';\n\n      this.ghostElement.style.width = rect.width + 'px';\n      this.ghostElement.style.height = rect.height + 'px';\n      this.ghostElement.style.position = 'fixed';\n      this.ghostElement.style.left = event.clientX - this.xOffset + 'px';\n      this.ghostElement.style.top = event.clientY - this.yOffset + 'px';\n      this.ghostElement.style.pointerEvents = 'none';\n      this.ghostElement.style.border =\n        '1px solid var(--color-primary, #1c7cd6)';\n      this.ghostElement.style.zIndex = '99999';\n      this.ghostElement.style.background = '#fff';\n      this.ghostElement.style.opacity = '0.7';\n      this.ghostElement.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.2)';\n      this.ghostElement.style.borderRadius = 'var(--curvature)';\n\n      // allow component to customize the ghost node\n      if (this.prepareGhost) {\n        this.prepareGhost(this.ghostElement);\n      }\n\n      document.body.appendChild(this.ghostElement);\n\n      // this.downEle = null;\n\n      // Add global click blocker when drag starts\n      if (!this.clickBlocker) {\n        this.clickBlocker = (e: MouseEvent) => {\n          e.stopPropagation();\n          e.preventDefault();\n        };\n        // Use capture phase to intercept clicks before they reach any elements\n        document.addEventListener('click', this.clickBlocker, true);\n      }\n    }\n\n    if (this.ghostElement) {\n      this.ghostElement.style.left = event.clientX - this.xOffset + 'px';\n      this.ghostElement.style.top = event.clientY - this.yOffset + 'px';\n\n      const targetInfo = this.getDropTargetInfo(event.clientX, event.clientY);\n      if (targetInfo) {\n        const { element: targetElement, insertAfter } = targetInfo;\n        const targetIdx = this.getRowIndex(targetElement.id);\n        const originalDragIdx = this.getRowIndex(this.draggingEle.id);\n\n        // Calculate the intended drop index\n        let dropIdx = targetIdx;\n        if (insertAfter) {\n          dropIdx += 1;\n        }\n\n        // Adjust dropIdx if dragging forward in the list\n        if (originalDragIdx < dropIdx) {\n          dropIdx -= 1;\n        }\n\n        // Store pending drop info but don't fire event yet\n        this.dropTargetId = targetElement.id;\n        this.pendingDropIndex = dropIdx;\n        this.pendingTargetElement = targetElement;\n\n        // Show drop indicator\n        this.showDropIndicator(targetElement, insertAfter);\n      } else {\n        this.hideDropIndicator();\n        this.dropTargetId = null;\n        this.pendingDropIndex = -1;\n        this.pendingTargetElement = null;\n      }\n    }\n  }\n\n  private handleMouseUp(evt: MouseEvent) {\n    if (this.draggingId && this.ghostElement) {\n      evt.preventDefault();\n      evt.stopPropagation();\n\n      // restore visibility of the dragged item\n\n      if (this.downEle) {\n        this.downEle.style.pointerEvents = '';\n        this.downEle.style.opacity = '1';\n      }\n\n      // fire the order changed event only when dropped if we have a valid drop position\n      if (this.pendingDropIndex >= 0 && this.pendingTargetElement) {\n        const originalDragIdx = this.getRowIndex(this.draggingEle.id);\n\n        // use swap-based logic - report which indexes need to be swapped\n        const fromIdx = originalDragIdx;\n        const toIdx = this.pendingDropIndex;\n\n        // only fire if the position actually changed\n        if (fromIdx !== toIdx) {\n          this.fireCustomEvent(CustomEventType.OrderChanged, {\n            swap: [fromIdx, toIdx]\n          });\n        }\n      }\n\n      this.fireCustomEvent(CustomEventType.DragStop, {\n        id: this.draggingId\n      });\n\n      this.draggingId = null;\n      this.dropTargetId = null;\n      this.downEle = null;\n      this.pendingDropIndex = -1;\n      this.pendingTargetElement = null;\n\n      if (this.ghostElement) {\n        // Remove from body if present\n        if (this.ghostElement.parentNode) {\n          this.ghostElement.parentNode.removeChild(this.ghostElement);\n        }\n        this.ghostElement = null;\n      }\n\n      this.hideDropIndicator();\n\n      // Keep the click blocker active for a short time after drop\n      if (this.clickBlocker) {\n        // We'll clean it up after a timeout\n        setTimeout(() => {\n          if (this.clickBlocker) {\n            document.removeEventListener('click', this.clickBlocker, true);\n            this.clickBlocker = null;\n          }\n        }, 100);\n      }\n    }\n    document.removeEventListener('mousemove', this.handleMouseMove);\n    document.removeEventListener('mouseup', this.handleMouseUp);\n    this.dispatchEvent(new Event('change'));\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"container ${this.horizontal ? 'horizontal' : ''}\">\n        <slot @mousedown=${this.handleMouseDown}></slot>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"SortableList.js","sourceRoot":"","sources":["../../../src/list/SortableList.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\n\n/**\n * A simple list that can be sorted by dragging\n */\n\n// how far we have to drag before it starts\nconst DRAG_THRESHOLD = 2;\nexport class SortableList extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        margin: auto;\n      }\n\n      .container {\n        user-select: none;\n        position: relative;\n      }\n\n      .container.horizontal {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n      }\n\n      .dragging {\n        background: var(--color-selection);\n      }\n\n      .dragged-item {\n        opacity: 0;\n        pointer-events: none;\n      }\n\n      .sortable {\n        transition: all 300ms ease-in-out;\n        display: flex;\n        padding: 0.4em 0;\n      }\n\n      .container.horizontal .sortable {\n        padding: 0;\n        margin-right: 0.25em;\n        margin-bottom: 0.25em;\n      }\n\n      .drop-indicator {\n        position: absolute;\n        background: var(--color-primary-dark, #1c7cd6);\n        z-index: 1000;\n        pointer-events: none;\n      }\n\n      .container.horizontal .drop-indicator {\n        width: 2px;\n        margin-top: -5px;\n        padding-bottom: 10px;\n      }\n\n      .container:not(.horizontal) .drop-indicator {\n        height: 2px;\n        left: 0;\n      }\n\n      .sortable:hover temba-icon {\n        opacity: 1;\n        cursor: move;\n      }\n\n      .ghost {\n        position: absolute;\n        opacity: 0.7;\n        transition: none;\n        background: var(--color-background, white);\n        border: 1px solid var(--color-primary, #1c7cd6);\n        border-radius: 4px;\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n        pointer-events: none;\n        z-index: 999;\n      }\n\n      .slot {\n        flex-grow: 1;\n      }\n\n      slot > * {\n        user-select: none;\n      }\n\n      temba-icon {\n        opacity: 0.1;\n        padding: 0.2em 0.5em;\n        transition: all 300ms ease-in-out;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  draggingId: string;\n\n  @property({ type: Boolean })\n  horizontal: boolean = false;\n\n  @property({ type: String })\n  dropTargetId: string;\n\n  @property({ type: String })\n  dragHandle: string;\n\n  /**\n   * Optional callback to allow parent components to customize the ghost node.\n   * Called after the ghost node is cloned but before it is appended to the DOM.\n   */\n  @property({ attribute: false })\n  prepareGhost?: (ghost: HTMLElement) => void;\n\n  ghostElement: HTMLDivElement = null;\n  downEle: HTMLDivElement = null;\n  xOffset = 0;\n  yOffset = 0;\n  yDown = 0;\n  xDown = 0;\n\n  draggingIdx = -1;\n  draggingEle = null;\n  dropIndicator: HTMLDivElement = null;\n  pendingDropIndex = -1;\n  pendingTargetElement: HTMLElement = null;\n\n  private clickBlocker: ((e: MouseEvent) => void) | null = null;\n\n  public constructor() {\n    super();\n    this.handleMouseMove = this.handleMouseMove.bind(this);\n    this.handleMouseUp = this.handleMouseUp.bind(this);\n    this.handleMouseDown = this.handleMouseDown.bind(this);\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(_changedProperties);\n  }\n\n  private getSortableElements(): Element[] {\n    return this.shadowRoot\n      .querySelector('slot')\n      .assignedElements()\n      .filter((ele) => ele.classList.contains('sortable'));\n  }\n\n  public getIds() {\n    return this.getSortableElements().map((ele) => ele.id);\n  }\n\n  private getRowIndex(id: string): number {\n    return this.getSortableElements().findIndex((ele) => ele.id === id);\n  }\n\n  private getDropTargetInfo(\n    mouseX: number,\n    mouseY: number\n  ): { element: HTMLDivElement; insertAfter: boolean } | null {\n    const elements = this.getSortableElements().filter(\n      (ele) => ele.id !== this.draggingEle?.id\n    );\n\n    if (elements.length === 0) return null;\n\n    if (this.horizontal) {\n      // For horizontal layout, find the insertion point based on mouse X position\n      for (let i = 0; i < elements.length; i++) {\n        const ele = elements[i];\n        const rect = ele.getBoundingClientRect();\n        const centerX = rect.left + rect.width / 2;\n\n        if (mouseX < centerX) {\n          // Insert before this element\n          return { element: ele as HTMLDivElement, insertAfter: false };\n        }\n      }\n      // If we're past all elements, insert after the last one\n      return {\n        element: elements[elements.length - 1] as HTMLDivElement,\n        insertAfter: true\n      };\n    } else {\n      // For vertical layout, find the insertion point based on mouse Y position\n      for (let i = 0; i < elements.length; i++) {\n        const ele = elements[i];\n        const rect = ele.getBoundingClientRect();\n        const centerY = rect.top + rect.height / 2;\n\n        if (mouseY < centerY) {\n          // Insert before this element\n          return { element: ele as HTMLDivElement, insertAfter: false };\n        }\n      }\n      // If we're past all elements, insert after the last one\n      return {\n        element: elements[elements.length - 1] as HTMLDivElement,\n        insertAfter: true\n      };\n    }\n  }\n\n  private showDropIndicator(targetElement: HTMLElement, insertAfter: boolean) {\n    this.hideDropIndicator();\n\n    if (!targetElement) return;\n\n    const container = this.shadowRoot.querySelector('.container');\n    this.dropIndicator = document.createElement('div');\n    this.dropIndicator.className = 'drop-indicator';\n\n    const targetRect = targetElement.getBoundingClientRect();\n    const containerRect = container.getBoundingClientRect();\n\n    if (this.horizontal) {\n      // For horizontal layout, show vertical line\n      this.dropIndicator.style.height = targetRect.height + 'px';\n      this.dropIndicator.style.top = targetRect.top - containerRect.top + 'px';\n\n      if (insertAfter) {\n        // Show line after target\n        this.dropIndicator.style.left =\n          targetRect.right - containerRect.left + 'px';\n      } else {\n        // Show line before target\n        this.dropIndicator.style.left =\n          targetRect.left - containerRect.left + 'px';\n      }\n    } else {\n      // For vertical layout, show horizontal line\n      this.dropIndicator.style.width = targetRect.width + 'px';\n      this.dropIndicator.style.left =\n        targetRect.left - containerRect.left + 'px';\n\n      if (insertAfter) {\n        // Show line after target\n        this.dropIndicator.style.top =\n          targetRect.bottom - containerRect.top + 'px';\n      } else {\n        // Show line before target\n        this.dropIndicator.style.top =\n          targetRect.top - containerRect.top + 'px';\n      }\n    }\n\n    container.appendChild(this.dropIndicator);\n  }\n\n  private hideDropIndicator() {\n    if (this.dropIndicator) {\n      this.dropIndicator.remove();\n      this.dropIndicator = null;\n    }\n  }\n\n  private handleMouseDown(event: MouseEvent) {\n    let ele = event.target as HTMLDivElement;\n\n    // if we have a drag handle, only allow dragging from that element\n    if (this.dragHandle) {\n      if (!ele.classList.contains(this.dragHandle)) {\n        return;\n      }\n    }\n\n    ele = ele.closest('.sortable');\n    if (ele) {\n      event.preventDefault();\n      event.stopPropagation();\n\n      this.downEle = ele;\n      this.draggingId = ele.id;\n      this.draggingIdx = this.getRowIndex(ele.id);\n      this.draggingEle = ele;\n\n      // Use getBoundingClientRect for accurate offsets\n      const rect = ele.getBoundingClientRect();\n      this.xOffset = event.clientX - rect.left;\n      this.yOffset = event.clientY - rect.top;\n      this.yDown = event.clientY;\n      this.xDown = event.clientX;\n\n      document.addEventListener('mousemove', this.handleMouseMove);\n      document.addEventListener('mouseup', this.handleMouseUp);\n    }\n  }\n\n  private handleMouseMove(event: MouseEvent) {\n    if (\n      !this.ghostElement &&\n      this.downEle &&\n      (Math.abs(event.clientY - this.yDown) > DRAG_THRESHOLD ||\n        Math.abs(event.clientX - this.xDown) > DRAG_THRESHOLD)\n    ) {\n      this.fireCustomEvent(CustomEventType.DragStart, {\n        id: this.downEle.id\n      });\n\n      this.ghostElement = this.downEle.cloneNode(true) as HTMLDivElement;\n      this.ghostElement.classList.add('ghost');\n\n      // dim the original element while dragging\n      this.downEle.style.pointerEvents = 'none';\n      this.downEle.style.opacity = '0.5';\n\n      const rect = this.downEle.getBoundingClientRect();\n      this.ghostElement.style.transition = 'transform 300ms linear';\n\n      this.ghostElement.style.width = rect.width + 'px';\n      this.ghostElement.style.height = rect.height + 'px';\n      this.ghostElement.style.position = 'fixed';\n      this.ghostElement.style.left = event.clientX - this.xOffset + 'px';\n      this.ghostElement.style.top = event.clientY - this.yOffset + 'px';\n      this.ghostElement.style.pointerEvents = 'none';\n      this.ghostElement.style.border =\n        '1px solid var(--color-primary, #1c7cd6)';\n      this.ghostElement.style.zIndex = '99999';\n      this.ghostElement.style.background = '#fff';\n      this.ghostElement.style.opacity = '0.7';\n      this.ghostElement.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.2)';\n      this.ghostElement.style.borderRadius = 'var(--curvature)';\n\n      // allow component to customize the ghost node\n      if (this.prepareGhost) {\n        this.prepareGhost(this.ghostElement);\n      }\n\n      document.body.appendChild(this.ghostElement);\n\n      // this.downEle = null;\n\n      // Add global click blocker when drag starts\n      if (!this.clickBlocker) {\n        this.clickBlocker = (e: MouseEvent) => {\n          e.stopPropagation();\n          e.preventDefault();\n        };\n        // Use capture phase to intercept clicks before they reach any elements\n        document.addEventListener('click', this.clickBlocker, true);\n      }\n    }\n\n    if (this.ghostElement) {\n      this.ghostElement.style.left = event.clientX - this.xOffset + 'px';\n      this.ghostElement.style.top = event.clientY - this.yOffset + 'px';\n\n      const targetInfo = this.getDropTargetInfo(event.clientX, event.clientY);\n      if (targetInfo) {\n        const { element: targetElement, insertAfter } = targetInfo;\n        const targetIdx = this.getRowIndex(targetElement.id);\n        const originalDragIdx = this.getRowIndex(this.draggingEle.id);\n\n        // Calculate the intended drop index\n        let dropIdx = targetIdx;\n        if (insertAfter) {\n          dropIdx += 1;\n        }\n\n        // Adjust dropIdx if dragging forward in the list\n        if (originalDragIdx < dropIdx) {\n          dropIdx -= 1;\n        }\n\n        // Store pending drop info but don't fire event yet\n        this.dropTargetId = targetElement.id;\n        this.pendingDropIndex = dropIdx;\n        this.pendingTargetElement = targetElement;\n\n        // Show drop indicator\n        this.showDropIndicator(targetElement, insertAfter);\n      } else {\n        this.hideDropIndicator();\n        this.dropTargetId = null;\n        this.pendingDropIndex = -1;\n        this.pendingTargetElement = null;\n      }\n    }\n  }\n\n  private handleMouseUp(evt: MouseEvent) {\n    if (this.draggingId && this.ghostElement) {\n      evt.preventDefault();\n      evt.stopPropagation();\n\n      // restore visibility of the dragged item\n\n      if (this.downEle) {\n        this.downEle.style.pointerEvents = '';\n        this.downEle.style.opacity = '1';\n      }\n\n      // fire the order changed event only when dropped if we have a valid drop position\n      if (this.pendingDropIndex >= 0 && this.pendingTargetElement) {\n        const originalDragIdx = this.getRowIndex(this.draggingEle.id);\n\n        // use swap-based logic - report which indexes need to be swapped\n        const fromIdx = originalDragIdx;\n        const toIdx = this.pendingDropIndex;\n\n        // only fire if the position actually changed\n        if (fromIdx !== toIdx) {\n          this.fireCustomEvent(CustomEventType.OrderChanged, {\n            swap: [fromIdx, toIdx]\n          });\n        }\n      }\n\n      this.fireCustomEvent(CustomEventType.DragStop, {\n        id: this.draggingId\n      });\n\n      this.draggingId = null;\n      this.dropTargetId = null;\n      this.downEle = null;\n      this.pendingDropIndex = -1;\n      this.pendingTargetElement = null;\n\n      if (this.ghostElement) {\n        // Remove from body if present\n        if (this.ghostElement.parentNode) {\n          this.ghostElement.parentNode.removeChild(this.ghostElement);\n        }\n        this.ghostElement = null;\n      }\n\n      this.hideDropIndicator();\n\n      // Keep the click blocker active for a short time after drop\n      if (this.clickBlocker) {\n        // We'll clean it up after a timeout\n        setTimeout(() => {\n          if (this.clickBlocker) {\n            document.removeEventListener('click', this.clickBlocker, true);\n            this.clickBlocker = null;\n          }\n        }, 100);\n      }\n    }\n    document.removeEventListener('mousemove', this.handleMouseMove);\n    document.removeEventListener('mouseup', this.handleMouseUp);\n    this.dispatchEvent(new Event('change'));\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"container ${this.horizontal ? 'horizontal' : ''}\">\n        <slot @mousedown=${this.handleMouseDown}></slot>\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/locales/es.js

@@ -3,10 +3,10 @@
 /* eslint-disable no-irregular-whitespace */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 export const templates = {
-    scf1453991c986b25: `Tab para completar, enter para seleccionar`,
-    s73b4d70c02f4b4e0: `No options`,
-    s8f02e3a18ffc083a: `Are not currently in a flow`,
-    s638236250662c6b3: `Have sent a message in the last`,
-    s4788ee206c4570c7: `Have not started this flow in the last 90 days`
+    'scf1453991c986b25': `Tab para completar, enter para seleccionar`,
+    's73b4d70c02f4b4e0': `No options`,
+    's8f02e3a18ffc083a': `Are not currently in a flow`,
+    's638236250662c6b3': `Have sent a message in the last`,
+    's4788ee206c4570c7': `Have not started this flow in the last 90 days`,
 };
 //# sourceMappingURL=es.js.map

package/out-tsc/src/locales/es.js.map

@@ -1 +1 @@
-{"version":3,"file":"es.js","sourceRoot":"","sources":["../../../src/locales/es.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,gDAAgD;AAEhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,iBAAiB,EAAE,4CAA4C;IAC/D,iBAAiB,EAAE,YAAY;IAC/B,iBAAiB,EAAE,6BAA6B;IAChD,iBAAiB,EAAE,iCAAiC;IACpD,iBAAiB,EAAE,gDAAgD;CACpE,CAAC","sourcesContent":["// Do not modify this file by hand!\n// Re-generate this file by running lit-localize\n\n/* eslint-disable no-irregular-whitespace */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n\nexport const templates = {\n  scf1453991c986b25: `Tab para completar, enter para seleccionar`,\n  s73b4d70c02f4b4e0: `No options`,\n  s8f02e3a18ffc083a: `Are not currently in a flow`,\n  s638236250662c6b3: `Have sent a message in the last`,\n  s4788ee206c4570c7: `Have not started this flow in the last 90 days`\n};\n"]}
+{"version":3,"file":"es.js","sourceRoot":"","sources":["../../../src/locales/es.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,4CAA4C;IACvE,mBAAmB,EAAE,YAAY;IACjC,mBAAmB,EAAE,6BAA6B;IAClD,mBAAmB,EAAE,iCAAiC;IACtD,mBAAmB,EAAE,gDAAgD;CAChE,CAAC","sourcesContent":["\n    // Do not modify this file by hand!\n    // Re-generate this file by running lit-localize\n\n    \n    \n\n    /* eslint-disable no-irregular-whitespace */\n    /* eslint-disable @typescript-eslint/no-explicit-any */\n\n    export const templates = {\n      'scf1453991c986b25': `Tab para completar, enter para seleccionar`,\n's73b4d70c02f4b4e0': `No options`,\n's8f02e3a18ffc083a': `Are not currently in a flow`,\n's638236250662c6b3': `Have sent a message in the last`,\n's4788ee206c4570c7': `Have not started this flow in the last 90 days`,\n    };\n  "]}

package/out-tsc/src/locales/fr.js

@@ -3,10 +3,10 @@
 /* eslint-disable no-irregular-whitespace */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 export const templates = {
-    s73b4d70c02f4b4e0: `No options`,
-    scf1453991c986b25: `Tab to complete, enter to select`,
-    s8f02e3a18ffc083a: `Are not currently in a flow`,
-    s638236250662c6b3: `Have sent a message in the last`,
-    s4788ee206c4570c7: `Have not started this flow in the last 90 days`
+    's73b4d70c02f4b4e0': `No options`,
+    'scf1453991c986b25': `Tab to complete, enter to select`,
+    's8f02e3a18ffc083a': `Are not currently in a flow`,
+    's638236250662c6b3': `Have sent a message in the last`,
+    's4788ee206c4570c7': `Have not started this flow in the last 90 days`,
 };
 //# sourceMappingURL=fr.js.map

package/out-tsc/src/locales/fr.js.map

@@ -1 +1 @@
-{"version":3,"file":"fr.js","sourceRoot":"","sources":["../../../src/locales/fr.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,gDAAgD;AAEhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,iBAAiB,EAAE,YAAY;IAC/B,iBAAiB,EAAE,kCAAkC;IACrD,iBAAiB,EAAE,6BAA6B;IAChD,iBAAiB,EAAE,iCAAiC;IACpD,iBAAiB,EAAE,gDAAgD;CACpE,CAAC","sourcesContent":["// Do not modify this file by hand!\n// Re-generate this file by running lit-localize\n\n/* eslint-disable no-irregular-whitespace */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n\nexport const templates = {\n  s73b4d70c02f4b4e0: `No options`,\n  scf1453991c986b25: `Tab to complete, enter to select`,\n  s8f02e3a18ffc083a: `Are not currently in a flow`,\n  s638236250662c6b3: `Have sent a message in the last`,\n  s4788ee206c4570c7: `Have not started this flow in the last 90 days`\n};\n"]}
+{"version":3,"file":"fr.js","sourceRoot":"","sources":["../../../src/locales/fr.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,YAAY;IACvC,mBAAmB,EAAE,kCAAkC;IACvD,mBAAmB,EAAE,6BAA6B;IAClD,mBAAmB,EAAE,iCAAiC;IACtD,mBAAmB,EAAE,gDAAgD;CAChE,CAAC","sourcesContent":["\n    // Do not modify this file by hand!\n    // Re-generate this file by running lit-localize\n\n    \n    \n\n    /* eslint-disable no-irregular-whitespace */\n    /* eslint-disable @typescript-eslint/no-explicit-any */\n\n    export const templates = {\n      's73b4d70c02f4b4e0': `No options`,\n'scf1453991c986b25': `Tab to complete, enter to select`,\n's8f02e3a18ffc083a': `Are not currently in a flow`,\n's638236250662c6b3': `Have sent a message in the last`,\n's4788ee206c4570c7': `Have not started this flow in the last 90 days`,\n    };\n  "]}

package/out-tsc/src/locales/locale-codes.js

@@ -8,9 +8,18 @@ export const sourceLocale = `en`;
  * The other locale codes that this application is localized into. Sorted
  * lexicographically.
  */
-export const targetLocales = [`es`, `fr`, `pt`];
+export const targetLocales = [
+    `es`,
+    `fr`,
+    `pt`,
+];
 /**
  * All valid project locale codes. Sorted lexicographically.
  */
-export const allLocales = [`en`, `es`, `fr`, `pt`];
+export const allLocales = [
+    `en`,
+    `es`,
+    `fr`,
+    `pt`,
+];
 //# sourceMappingURL=locale-codes.js.map

package/out-tsc/src/locales/locale-codes.js.map

@@ -1 +1 @@
-{"version":3,"file":"locale-codes.js","sourceRoot":"","sources":["../../../src/locales/locale-codes.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,iDAAiD;AAEjD;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC;AAEjC;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC;AAEzD;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC","sourcesContent":["// Do not modify this file by hand!\n// Re-generate this file by running lit-localize.\n\n/**\n * The locale code that templates in this source code are written in.\n */\nexport const sourceLocale = `en`;\n\n/**\n * The other locale codes that this application is localized into. Sorted\n * lexicographically.\n */\nexport const targetLocales = [`es`, `fr`, `pt`] as const;\n\n/**\n * All valid project locale codes. Sorted lexicographically.\n */\nexport const allLocales = [`en`, `es`, `fr`, `pt`] as const;\n"]}
+{"version":3,"file":"locale-codes.js","sourceRoot":"","sources":["../../../src/locales/locale-codes.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,iDAAiD;AAEjD;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC;AAEjC;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,IAAI;IACJ,IAAI;IACJ,IAAI;CACI,CAAC;AAEX;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;CACI,CAAC","sourcesContent":["// Do not modify this file by hand!\n// Re-generate this file by running lit-localize.\n\n/**\n * The locale code that templates in this source code are written in.\n */\nexport const sourceLocale = `en`;\n\n/**\n * The other locale codes that this application is localized into. Sorted\n * lexicographically.\n */\nexport const targetLocales = [\n  `es`,\n  `fr`,\n  `pt`,\n] as const;\n\n/**\n * All valid project locale codes. Sorted lexicographically.\n */\nexport const allLocales = [\n  `en`,\n  `es`,\n  `fr`,\n  `pt`,\n] as const;\n"]}