npm - @nyaruka/temba-components - Versions diffs - 0.129.3 → 0.129.4 - Mend

@nyaruka/temba-components 0.129.3 → 0.129.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (304) hide show

package/.github/workflows/coverage.yml DELETED Viewed

@@ -1,80 +0,0 @@
-name: 'Update Coverage Reports'
-on:
-  push:
-    branches: [main]
-permissions:
-  contents: write
-jobs:
-  coverage:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Set Timezone
-        uses: szenius/set-timezone@v2.0
-        with:
-          timezoneLinux: 'UTC'
-      - name: Checkout (GitHub)
-        uses: actions/checkout@v4
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          fetch-depth: 0
-      - run: docker network create --driver bridge textit_default
-      - name: Build and run tests with coverage
-        uses: devcontainers/ci@v0.3
-        with:
-          runCmd: yarn validate && ./generate-coverage-badge.sh
-          push: never
-          env: |
-            CI=true
-      - name: Copy coverage to temp
-        run: |
-          mkdir -p /tmp/coverage-copy
-          cp -r coverage /tmp/coverage-copy/
-      - name: Deploy coverage to coverage branch
-        run: |
-          git config --local user.email "action@github.com"
-          git config --local user.name "GitHub Action"
-          # Remove any coverage directory to avoid ambiguity with branch name
-          rm -rf coverage
-          # Create or checkout coverage branch
-          if git show-ref --verify --quiet refs/remotes/origin/coverage; then
-            git fetch origin coverage
-            git checkout coverage
-          else
-            git checkout --orphan coverage
-            git rm -rf . || true
-          fi
-          # Copy coverage report files from temp directly to root
-          cp -r /tmp/coverage-copy/coverage/lcov-report/* ./
-          rm -rf /tmp/coverage-copy
-          # Create .nojekyll for GitHub Pages
-          touch .nojekyll
-          # Create .gitignore to exclude build byproducts from coverage branch
-          echo "# Ignore build artifacts and local byproducts in coverage branch" > .gitignore
-          echo "dist/" >> .gitignore
-          echo "node_modules/" >> .gitignore
-          echo "out-tsc/" >> .gitignore
-          echo "screenshots/test/" >> .gitignore
-          echo "static/svg/work/" >> .gitignore
-          echo "# Add more patterns as needed" >> .gitignore
-          # Add all files
-          git add .
-          # Commit if there are changes
-          if ! git diff --staged --quiet; then
-            git commit -m "Update coverage reports [skip ci] - $(date)"
-            git push origin coverage
-          fi

package/demo/sticky-note-demo.html DELETED Viewed

@@ -1,155 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <title>Sticky Note Example</title>
-    <link
-      href="/static/css/temba-components.css"
-      rel="stylesheet"
-      type="text/css"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
-      rel="stylesheet"
-    />
-    <link href="../styles.css" rel="stylesheet" type="text/css" />
-    <script type="module" src="../src/flow/StickyNote.ts"></script>
-    <link href="/demo/static/css/prism.css" rel="stylesheet" />
-    <script type="module" src="/demo/static/js/prism-loader.js"></script>
-  </head>
-  <body>
-    <h1>Sticky Note Example</h1>
-    <p><a href="../index.html">← Back to main demo</a></p>
-    <table class="attr-table">
-      <thead>
-        <tr>
-          <th>Attribute</th>
-          <th>Description</th>
-          <th>Default</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>uuid</td>
-          <td>Unique identifier for the sticky note</td>
-          <td>None (required)</td>
-        </tr>
-        <tr>
-          <td>data</td>
-          <td>
-            Object containing position, title, body, and color properties.
-            Position: {left: number, top: number}, color: 'yellow' | 'blue' | 'pink' | 'green' | 'gray'
-          </td>
-          <td>None (required)</td>
-        </tr>
-      </tbody>
-    </table>
-    <section class="doc-section">
-      <h2>Events</h2>
-      <p>
-        The sticky note component fires events when its content is updated through the flow store system.
-        Updates to title and body content are automatically synchronized with the flow state.
-      </p>
-    </section>
-    <div class="example">
-      <h3>Basic Sticky Note</h3>
-      <p>A simple yellow sticky note with default positioning</p>
-      <pre class="example-html"><code class="language-markup">&lt;temba-sticky-note uuid="basic-note"&gt;&lt;/temba-sticky-note&gt;</code></pre>
-      <div class="demo-container">
-        <temba-sticky-note id="basic-note"></temba-sticky-note>
-      </div>
-    </div>
-    <div class="example">
-      <h3>Colored Sticky Notes</h3>
-      <p>Sticky notes with different color themes - click to edit the text, drag to move them around</p>
-      <pre class="example-html"><code class="language-markup">&lt;!-- Multiple colored sticky notes --&gt;
-&lt;temba-sticky-note uuid="yellow-note"&gt;&lt;/temba-sticky-note&gt;
-&lt;temba-sticky-note uuid="blue-note"&gt;&lt;/temba-sticky-note&gt;
-&lt;temba-sticky-note uuid="pink-note"&gt;&lt;/temba-sticky-note&gt;
-&lt;temba-sticky-note uuid="green-note"&gt;&lt;/temba-sticky-note&gt;
-&lt;temba-sticky-note uuid="gray-note"&gt;&lt;/temba-sticky-note&gt;</code></pre>
-      <div class="demo-container">
-        <temba-sticky-note id="yellow-note"></temba-sticky-note>
-        <temba-sticky-note id="blue-note"></temba-sticky-note>
-        <temba-sticky-note id="pink-note"></temba-sticky-note>
-        <temba-sticky-note id="green-note"></temba-sticky-note>
-        <temba-sticky-note id="gray-note"></temba-sticky-note>
-      </div>
-      <div class="expected">
-        <strong>How to use:</strong>
-        <ul>
-          <li>Click and drag the sticky notes to move them around</li>
-          <li>Click on the title or body text to edit it inline</li>
-          <li>Press Enter or Escape to finish editing</li>
-          <li>Notes snap to a 20px grid when you finish dragging</li>
-          <li>Each color has its own visual theme</li>
-        </ul>
-      </div>
-    </div>
-    <script type="module">
-      import '/out-tsc/temba-modules.js';
-      // Configure the sticky notes with sample data
-      document.addEventListener('DOMContentLoaded', () => {
-        const basicNote = document.getElementById('basic-note');
-        basicNote.uuid = 'basic-uuid';
-        basicNote.data = {
-          position: { left: 50, top: 50 },
-          title: 'Basic Note',
-          body: 'This is a basic sticky note example.',
-          color: 'yellow'
-        };
-        const yellowNote = document.getElementById('yellow-note');
-        yellowNote.uuid = 'yellow-uuid';
-        yellowNote.data = {
-          position: { left: 50, top: 50 },
-          title: 'Yellow Note',
-          body: 'This is a yellow sticky note! Click to edit me.',
-          color: 'yellow'
-        };
-        const blueNote = document.getElementById('blue-note');
-        blueNote.uuid = 'blue-uuid';
-        blueNote.data = {
-          position: { left: 300, top: 120 },
-          title: 'Blue Note',
-          body: 'Blue notes are cool and calm. Drag me around!',
-          color: 'blue'
-        };
-        const pinkNote = document.getElementById('pink-note');
-        pinkNote.uuid = 'pink-uuid';
-        pinkNote.data = {
-          position: { left: 550, top: 80 },
-          title: 'Pink Note',
-          body: 'Pink is vibrant and fun. Try editing my text!',
-          color: 'pink'
-        };
-        const greenNote = document.getElementById('green-note');
-        greenNote.uuid = 'green-uuid';
-        greenNote.data = {
-          position: { left: 100, top: 250 },
-          title: 'Green Note',
-          body: 'Green represents nature and growth. I can grow in height as you type more content in my body!',
-          color: 'green'
-        };
-        const grayNote = document.getElementById('gray-note');
-        grayNote.uuid = 'gray-uuid';
-        grayNote.data = {
-          position: { left: 400, top: 300 },
-          title: 'Gray Note',
-          body: 'Gray is neutral and professional.',
-          color: 'gray'
-        };
-      });
-    </script>
-  </body>
-</html>

package/out-tsc/src/flow/EditorNode.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"EditorNode.js","sourceRoot":"","sources":["../../../src/flow/EditorNode.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { EDITOR_CONFIG, UIConfig } from './config';\nimport { Action, Exit, Node, NodeUI, Router } from '../store/flow-definition';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { Plumber } from './Plumber';\nimport { getStore } from '../store/Store';\nimport { CustomEventType } from '../interfaces';\n\nexport class EditorNode extends RapidElement {\n createRenderRoot() {\n return this;\n }\n\n @property({ type: Object })\n private plumber: Plumber;\n\n @property({ type: Object })\n private node: Node;\n\n @property({ type: Object })\n private ui: NodeUI;\n\n // Track exits that are in \"removing\" state\n private exitRemovalTimeouts: Map<string, number> = new Map();\n\n // Set of exit UUIDs that are in the removing state\n private exitRemovingState: Set<string> = new Set();\n\n // Track actions that are in \"removing\" state\n private actionRemovalTimeouts: Map<string, number> = new Map();\n\n // Set of action UUIDs that are in the removing state\n private actionRemovingState: Set<string> = new Set();\n\n static get styles() {\n return css`\n\n .node {\n background-color: #fff;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n min-width: 200px;\n border-radius: var(--curvature);\n \n color: #333;\n cursor: move;\n user-select: none;\n\n }\n\n .node:hover {\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);\n }\n\n .node.dragging {\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);\n transform: scale(1.02);\n z-index: 1000;\n }\n\n .action {\n max-width: 200px;\n position: relative;\n }\n\n .action .remove-button {\n position: absolute;\n top: 5px;\n right: 5px;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: var(--color-error, #dc3545);\n color: white;\n border: none;\n cursor: pointer;\n display: none;\n align-items: center;\n justify-content: center;\n font-size: 10px;\n line-height: 1;\n z-index: 10;\n }\n\n .action:hover .remove-button {\n display: flex;\n }\n\n .action.removing .title {\n background-color: var(--color-error, #dc3545) !important;\n }\n\n .action.removing .title .name {\n color: white;\n }\n\n .action.sortable {\n display: flex;\n align-items: stretch;\n }\n\n .action .action-content {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n }\n\n .action .body {\n padding: 1em;\n }\n\n .action .drag-handle {\n opacity: 0;\n transition: all 200ms ease-in-out;\n cursor: move;\n background: rgba(0, 0, 0, 0.02);\n max-width:0px;\n position: absolute;\n }\n\n .action:hover .drag-handle {\n opacity: 0.5;\n padding: 0.25em;\n max-width: 20px;\n }\n\n .action .drag-handle:hover {\n opacity: 1;\n \n }\n\n .action .title,\n .router .title {\n display: flex;\n color: #fff;\n padding: 5px 1px;\n text-align: center;\n font-size: 1em;\n font-weight: normal;\n\n }\n\n .title .name {\n flex-grow: 1;\n }\n\n .quick-replies {\n margin-top: 0.5em;\n }\n\n .quick-reply {\n background-color: #f0f0f0;\n border: 1px solid #e0e0e0;\n border-radius: calc(var(--curvature) * 1.5);\n padding: 0.2em 1em;\n display: inline-block;\n font-size: 0.8em;\n margin: 0.2em;\n }\n\n .categories {\n display: flex;\n flex-direction: row;\n\n }\n\n .category {\n margin:-1px -0.5px;\n border: 1px solid #f3f3f3;\n padding: 0.75em;\n flex-grow:1;\n text-align: center;\n display: flex;\n flex-direction: column;\n }\n\n .action-exits {\n padding-bottom: 0.6em;\n margin-top: -0.8em;\n }\n\n .category .title {\n font-weight: normal;\n font-size: 1em;\n }\n\n .router .body {\n padding: 0.75em;\n }\n\n .result-name {\n font-weight: bold;\n display: inline-block;\n }\n \n .exit-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n margin-bottom: -1.2em;\n padding-top:0.2em;\n }\n\n .exit {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background-color: tomato;\n position: relative;\n box-shadow: 0 2px 2px rgba(0, 0, 0, .1);\n cursor: pointer;\n pointer-events: none;\n }\n\n .exit.jtk-connected {\n background: var(--color-connectors, #e6e6e6);\n }\n\n .exit.connected {\n background-color: #fff;\n pointer-events: all;\n }\n\n .exit.connected:hover {\n background-color: var(--color-connectors, #e6e6e6);\n }\n \n .exit.removing, .exit.removing:hover {\n background-color: var(--color-error);\n pointer-events: all;\n }\n \n .exit.removing::before {\n content: '✕';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 8px;\n color: white;\n line-height: 1;\n }\n \n /* Connector in removing state */\n :host {\n --color-connector-removing: var(--color-error);\n }\n \n body svg.plumb-connector.removing path {\n stroke: var(--color-connector-removing, tomato) !important;\n stroke-width: 3px;\n }\n \n body .plumb-connector.removing .plumb-arrow {\n fill: var(--color-connector-removing, tomato) !important;\n stroke: var(--color-connector-removing, transparent) !important;\n }\n\n .category:first-child {\n border-bottom-left-radius: var(--curvature);\n }\n\n .category:last-child {\n border-bottom-right-radius: var(--curvature);\n }\n\n .router .title {\n border-top-left-radius: var(--curvature);\n border-top-right-radius: var(--curvature);\n }\n\n .action{\n overflow: hidden;\n }\n\n .action:first-child .title {\n border-top-left-radius: var(--curvature);\n border-top-right-radius: var(--curvature);\n }\n }`;\n }\n\n constructor() {\n super();\n this.handleActionOrderChanged = this.handleActionOrderChanged.bind(this);\n }\n\n protected updated(\n changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n super.updated(changes);\n if (changes.has('node')) {\n // make our initial connections\n if (changes.get('node') === undefined) {\n for (const exit of this.node.exits) {\n if (!exit.destination_uuid) {\n this.plumber.makeSource(exit.uuid);\n } else {\n this.plumber.connectIds(\n this.node.uuid,\n exit.uuid,\n exit.destination_uuid\n );\n }\n }\n }\n\n const ele = this.parentElement;\n const rect = ele.getBoundingClientRect();\n\n getStore()\n ?.getState()\n .expandCanvas(\n this.ui.position.left + rect.width,\n this.ui.position.top + rect.height\n );\n }\n }\n\n disconnectedCallback() {\n // Remove the event listener when the component is removed\n super.disconnectedCallback();\n\n // Clear any pending exit removal timeouts\n this.exitRemovalTimeouts.forEach((timeoutId) => {\n clearTimeout(timeoutId);\n });\n this.exitRemovalTimeouts.clear();\n\n // Clear any pending action removal timeouts\n this.actionRemovalTimeouts.forEach((timeoutId) => {\n clearTimeout(timeoutId);\n });\n this.actionRemovalTimeouts.clear();\n\n // Clear the removing state\n this.exitRemovingState.clear();\n this.actionRemovingState.clear();\n }\n\n private handleExitClick(event: MouseEvent, exit: Exit) {\n event.preventDefault();\n event.stopPropagation();\n\n const exitId = exit.uuid;\n\n // If exit is not connected, do nothing\n if (!exit.destination_uuid) return;\n\n // If the exit is already in removing state, perform the disconnect\n if (this.exitRemovingState.has(exitId)) {\n this.disconnectExit(exit);\n return;\n }\n\n // Start removal UI state\n this.exitRemovingState.add(exitId);\n this.requestUpdate();\n\n // Set the connection to removing state\n this.plumber.setConnectionRemovingState(exitId, true);\n\n // Clear any existing timeout for this exit\n if (this.exitRemovalTimeouts.has(exitId)) {\n clearTimeout(this.exitRemovalTimeouts.get(exitId));\n }\n\n // Set timeout to reset UI if user doesn't click\n const timeoutId = window.setTimeout(() => {\n this.exitRemovingState.delete(exitId);\n this.exitRemovalTimeouts.delete(exitId);\n\n // Reset the connection to normal state\n this.plumber.setConnectionRemovingState(exitId, false);\n\n this.requestUpdate();\n }, 1500);\n\n this.exitRemovalTimeouts.set(exitId, timeoutId);\n }\n\n private disconnectExit(exit: Exit) {\n const exitId = exit.uuid;\n\n // Clear the UI state\n this.exitRemovingState.delete(exitId);\n\n // Reset the connection to normal state (this will be redundant as we're about to remove it,\n // but it's safer to do this in case there's any timing issue)\n this.plumber.setConnectionRemovingState(exitId, false);\n\n // Clear any timeout\n if (this.exitRemovalTimeouts.has(exitId)) {\n clearTimeout(this.exitRemovalTimeouts.get(exitId));\n this.exitRemovalTimeouts.delete(exitId);\n }\n\n // Remove the JSPlumb connection\n this.plumber.removeExitConnection(exitId);\n\n // Update the flow definition\n const updatedExit = { ...exit, destination_uuid: null };\n const updatedExits = this.node.exits.map((e) =>\n e.uuid === exitId ? updatedExit : e\n );\n\n // Update the node\n const updatedNode = { ...this.node, exits: updatedExits };\n getStore()?.getState().updateNode(this.node.uuid, updatedNode);\n\n // Request update to reflect changes\n this.requestUpdate();\n }\n\n private handleActionRemoveClick(\n event: MouseEvent,\n action: Action,\n index: number\n ) {\n event.preventDefault();\n event.stopPropagation();\n\n const actionId = action.uuid;\n\n // If the action is already in removing state, perform the removal\n if (this.actionRemovingState.has(actionId)) {\n this.removeAction(action, index);\n return;\n }\n\n // Start removal UI state\n this.actionRemovingState.add(actionId);\n this.requestUpdate();\n\n // Clear any existing timeout for this action\n if (this.actionRemovalTimeouts.has(actionId)) {\n clearTimeout(this.actionRemovalTimeouts.get(actionId));\n }\n\n // Set timeout to reset UI if user doesn't click\n const timeoutId = window.setTimeout(() => {\n this.actionRemovingState.delete(actionId);\n this.actionRemovalTimeouts.delete(actionId);\n this.requestUpdate();\n }, 1000); // 1 second as per requirements\n\n this.actionRemovalTimeouts.set(actionId, timeoutId);\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n private removeAction(action: Action, _index: number) {\n const actionId = action.uuid;\n\n // Clear the UI state\n this.actionRemovingState.delete(actionId);\n\n // Clear any timeout\n if (this.actionRemovalTimeouts.has(actionId)) {\n clearTimeout(this.actionRemovalTimeouts.get(actionId));\n this.actionRemovalTimeouts.delete(actionId);\n }\n\n // Remove the action from the node\n const updatedActions = this.node.actions.filter((a) => a.uuid !== actionId);\n\n // If no actions remain, remove the entire node\n if (updatedActions.length === 0) {\n this.fireCustomEvent(CustomEventType.NodeDeleted, {\n uuid: this.node.uuid\n });\n } else {\n // Update the node with remaining actions\n const updatedNode = { ...this.node, actions: updatedActions };\n getStore()?.getState().updateNode(this.node.uuid, updatedNode);\n\n // Request update to reflect changes\n this.requestUpdate();\n }\n }\n\n private handleActionOrderChanged(event: CustomEvent) {\n const [fromIdx, toIdx] = event.detail.swap;\n\n // swap our actions\n const newActions = [...this.node.actions];\n const movedAction = newActions.splice(fromIdx, 1)[0];\n newActions.splice(toIdx, 0, movedAction);\n\n // udate our internal reprensentation, this isn't strictly necessary\n // since the editor will update us from it's definition subscription\n // but it makes testing a lot easier\n this.node = { ...this.node, actions: newActions };\n\n getStore()\n ?.getState()\n .updateNode(this.node.uuid, { ...this.node, actions: newActions });\n }\n\n private renderTitle(config: UIConfig, isRemoving: boolean = false) {\n return html`<div class=\"title\" style=\"background:${config.color}\">\n ${this.node?.actions?.length > 1\n ? html`<temba-icon class=\"drag-handle\" name=\"sort\"></temba-icon>`\n : null}\n\n <div class=\"name\">${isRemoving ? 'Remove?' : config.name}</div>\n </div>`;\n }\n\n private renderAction(node: Node, action: Action, index: number) {\n const config = EDITOR_CONFIG[action.type];\n const isRemoving = this.actionRemovingState.has(action.uuid);\n\n if (config) {\n return html`<div\n class=\"action sortable ${action.type} ${isRemoving ? 'removing' : ''}\"\n id=\"action-${index}\"\n >\n <button\n class=\"remove-button\"\n @click=${(e: MouseEvent) =>\n this.handleActionRemoveClick(e, action, index)}\n title=\"Remove action\"\n >\n ✕\n </button>\n <div class=\"action-content\">\n ${this.renderTitle(config, isRemoving)}\n <div class=\"body\">\n ${config.render\n ? config.render(node, action)\n : html`<pre>${action.type}</pre>`}\n </div>\n </div>\n </div>`;\n }\n return html`<div\n class=\"action sortable ${isRemoving ? 'removing' : ''}\"\n id=\"action-${index}\"\n >\n <button\n class=\"remove-button\"\n @click=${(e: MouseEvent) =>\n this.handleActionRemoveClick(e, action, index)}\n title=\"Remove action\"\n >\n ✕\n </button>\n ${action.type}\n </div>`;\n }\n\n private renderRouter(router: Router, ui: NodeUI) {\n const config = EDITOR_CONFIG[ui.type];\n if (config) {\n return html`<div class=\"router\">\n ${this.renderTitle(config, false)}\n ${router.result_name\n ? html`<div class=\"body\">\n Save as\n <div class=\"result-name\">${router.result_name}</div>\n </div>`\n : null}\n </div>`;\n }\n }\n\n private renderCategories(node: Node) {\n if (!node.router || !node.router.categories) {\n return null;\n }\n const categories = node.router.categories.map((category) => {\n const exit = node.exits.find(\n (exit: Exit) => exit.uuid == category.exit_uuid\n );\n\n return html`<div class=\"category\">\n <div class=\"title\">${category.name}</div>\n ${this.renderExit(exit)}\n </div>`;\n });\n\n return html`<div class=\"categories\">${categories}</div>`;\n }\n\n private renderExit(exit: Exit): TemplateResult {\n return html`<div class=\"exit-wrapper\">\n <div\n id=\"${exit.uuid}\"\n class=${getClasses({\n exit: true,\n connected: !!exit.destination_uuid,\n removing: this.exitRemovingState.has(exit.uuid)\n })}\n @click=${(e: MouseEvent) => this.handleExitClick(e, exit)}\n ></div>\n </div>`;\n }\n\n public render() {\n if (!this.node || !this.ui) {\n return html`<div class=\"node\">Loading...</div>`;\n }\n\n return html`\n <div\n id=\"${this.node.uuid}\"\n class=\"node\"\n style=\"left:${this.ui.position.left}px;top:${this.ui.position.top}px\"\n >\n ${this.node.actions.length > 0\n ? html`<temba-sortable-list\n dragHandle=\"drag-handle\"\n @temba-order-changed=\"${this.handleActionOrderChanged}\"\n >\n ${this.node.actions.map((actionSpec, index) => {\n return this.renderAction(this.node, actionSpec, index);\n })}\n </temba-sortable-list>`\n : ''}\n ${this.node.router\n ? html` ${this.renderRouter(this.node.router, this.ui)}\n ${this.renderCategories(this.node)}`\n : html`<div class=\"action-exits\">\n ${this.node.exits.map((exit) => {\n return this.renderExit(exit);\n })}\n </div>`}\n </div>\n `;\n }\n}\n"]}

package/out-tsc/src/flow/render.js DELETED Viewed

@@ -1,358 +0,0 @@
-import { html } from 'lit-html';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-import { Icon } from '../Icons';
-// URN scheme mapping for user-friendly display
-const urnSchemeMap = {
-    tel: 'Phone Number',
-    email: 'Email',
-    twitter: 'Twitter',
-    facebook: 'Facebook',
-    telegram: 'Telegram',
-    whatsapp: 'WhatsApp',
-    viber: 'Viber',
-    line: 'Line',
-    discord: 'Discord',
-    slack: 'Slack',
-    external: 'External ID'
-};
-const renderLineItem = (name, icon) => {
-    return html `<div style="display:flex;items-align:center">
-    ${icon
-        ? html `<temba-icon name=${icon} style="margin-right:0.5em"></temba-icon>`
-        : null}
-    <div
-      style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
-    >
-      ${name}
-    </div>
-  </div>`;
-};
-const renderNamedObjects = (assets, icon) => {
-    const items = [];
-    const maxDisplay = 3;
-    // Show up to 3 items, or all 4 if exactly 4 items
-    const displayCount = assets.length === 4 ? 4 : Math.min(maxDisplay, assets.length);
-    for (let i = 0; i < displayCount; i++) {
-        const asset = assets[i];
-        items.push(renderLineItem(asset.name, icon));
-    }
-    // Add "+X more" if there are more than 3 items (and not exactly 4)
-    if (assets.length > maxDisplay && assets.length !== 4) {
-        const remainingCount = assets.length - maxDisplay;
-        items.push(html `<div style="display:flex;items-align:center; color: #666;">
-      ${icon
-            ? html `<div style="margin-right:0.5em; width: 1em;"></div>` // spacing placeholder
-            : null}
-      <div>+${remainingCount} more</div>
-    </div>`);
-    }
-    return items;
-};
-export const renderSendMsg = (node, action) => {
-    const text = action.text.replace(/\n/g, '<br>');
-    return html `
-    ${unsafeHTML(text)}
-    ${action.quick_replies.length > 0
-        ? html `<div class="quick-replies">
-          ${action.quick_replies.map((reply) => {
-            return html `<div class="quick-reply">${reply}</div>`;
-        })}
-        </div>`
-        : null}
-  `;
-};
-export const renderSetContactName = (node, action) => {
-    return html `<div>Set contact name to <b>${action.name}</b></div>`;
-};
-export const renderSetRunResult = (node, action) => {
-    return html `<div>Save ${action.value} as <b>${action.name}</b></div>`;
-};
-export const renderCallWebhook = (node, action) => {
-    return html `<div
-    style="word-break: break-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
-  >
-    ${action.url}
-  </div>`;
-};
-export const renderAddToGroups = (node, action) => {
-    return html `<div>${renderNamedObjects(action.groups, 'group')}</div>`;
-};
-export const renderRemoveFromGroups = (node, action) => {
-    return html `<div>${renderNamedObjects(action.groups, 'group')}</div>`;
-};
-export const renderSetContactField = (node, action) => {
-    return html `<div>
-    Set <b>${action.field.name}</b> to <b>${action.value}</b>
-  </div>`;
-};
-export const renderSetContactLanguage = (node, action) => {
-    return html `<div>Set contact language to <b>${action.language}</b></div>`;
-};
-export const renderSetContactStatus = (node, action) => {
-    return html `<div>Set contact status to <b>${action.status}</b></div>`;
-};
-export const renderSetContactChannel = (node, action) => {
-    return html `<div>Set contact channel to <b>${action.channel.name}</b></div>`;
-};
-export const renderAddContactUrn = (node, action) => {
-    const friendlyScheme = urnSchemeMap[action.scheme] || action.scheme;
-    return html `<div
-    style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis;"
-  >
-    Add ${friendlyScheme} <b>${action.path}</b>
-  </div>`;
-};
-export const renderSendEmail = (node, action) => {
-    const addressList = action.addresses.join(', ');
-    return html `<div>
-    <div
-      style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
-    >
-      <b>${addressList}</b>
-    </div>
-    <div style="margin-top: 0.5em">
-      <div
-        style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
-      >
-        ${action.subject}
-      </div>
-      <div
-        style="margin-top: 0.25em; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
-      >
-        ${action.body}
-      </div>
-    </div>
-  </div>`;
-};
-export const renderSendBroadcast = (node, action) => {
-    const hasGroups = action.groups && action.groups.length > 0;
-    const hasContacts = action.contacts && action.contacts.length > 0;
-    return html `<div>
-    <div style="word-wrap: break-word; margin-bottom: 0.5em">
-      ${action.text}
-    </div>
-    ${hasGroups
-        ? html `<div style="margin-bottom: 0.25em">
-          <div style="font-weight: bold; margin-bottom: 0.25em">Groups:</div>
-          ${renderNamedObjects(action.groups, 'group')}
-        </div>`
-        : null}
-    ${hasContacts
-        ? html `<div>
-          <div style="font-weight: bold; margin-bottom: 0.25em">Contacts:</div>
-          ${renderNamedObjects(action.contacts, 'contact')}
-        </div>`
-        : null}
-  </div>`;
-};
-export const renderEnterFlow = (node, action) => {
-    return html `<div>Enter flow <b>${action.flow.name}</b></div>`;
-};
-export const renderStartSession = (node, action) => {
-    const hasGroups = action.groups && action.groups.length > 0;
-    const hasContacts = action.contacts && action.contacts.length > 0;
-    return html `<div>
-    ${hasGroups
-        ? html `<div style="margin-top: 0.5em">
-          <div style="font-weight: bold; margin-bottom: 0.25em">Groups:</div>
-          ${renderNamedObjects(action.groups, 'group')}
-        </div>`
-        : null}
-    ${hasContacts
-        ? html `<div style="margin-top: 0.5em">
-          <div style="font-weight: bold; margin-bottom: 0.25em">Contacts:</div>
-          ${renderNamedObjects(action.contacts, 'contact')}
-        </div>`
-        : null}
-    ${action.create_contact
-        ? renderLineItem('Create contact', Icon.contact)
-        : null}
-    ${renderLineItem(action.flow.name, Icon.flow)}
-  </div>`;
-};
-export const renderTransferAirtime = (node, action) => {
-    const amounts = action.amounts.join(', ');
-    return html `<div>
-    Transfer airtime amounts: <b>${amounts}</b>
-    <div>Save result as <b>${action.result_name}</b></div>
-  </div>`;
-};
-export const renderCallClassifier = (node, action) => {
-    return html `<div>
-    <div>Call classifier <b>${action.classifier.name}</b></div>
-    <div style="margin-top: 0.25em; word-wrap: break-word">
-      Input: <b>${action.input}</b>
-    </div>
-    <div style="margin-top: 0.25em">
-      Save result as <b>${action.result_name}</b>
-    </div>
-  </div>`;
-};
-export const renderCallResthook = (node, action) => {
-    return html `<div>
-    <div>Call resthook <b>${action.resthook}</b></div>
-    <div style="margin-top: 0.25em">
-      Save result as <b>${action.result_name}</b>
-    </div>
-  </div>`;
-};
-export const renderCallLLM = (node, action) => {
-    return html `<div>
-    <div style="margin-top: 0.25em; display: flex; align-items: center;">
-      <temba-icon name="ai" style="margin-right: 0.5em"></temba-icon>
-      <span
-        style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
-      >
-        ${action.llm.name}
-      </span>
-    </div>
-    <div
-      style="margin-top: 0.25em; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
-    >
-      ${action.instructions}
-    </div>
-  </div>`;
-};
-export const renderOpenTicket = (node, action) => {
-    return html `<div>
-    <div
-      style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
-    >
-      ${action.body}
-    </div>
-    ${action.assignee
-        ? html `<div
-          style="margin-top: 0.25em; display: flex; align-items: center;"
-        >
-          <temba-icon name="user" style="margin-right: 0.5em"></temba-icon>
-          <span
-            style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
-          >
-            ${action.assignee.name}
-          </span>
-        </div>`
-        : null}
-    ${action.topic
-        ? html `<div
-          style="margin-top: 0.25em; display: flex; align-items: center;"
-        >
-          <temba-icon name="topic" style="margin-right: 0.5em"></temba-icon>
-          <span
-            style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
-          >
-            ${action.topic.name}
-          </span>
-        </div>`
-        : null}
-  </div>`;
-};
-export const renderRequestOptin = (node, action) => {
-    return html `<div>Request opt-in for <b>${action.optin.name}</b></div>`;
-};
-export const renderAddInputLabels = (node, action) => {
-    return html `<div>${renderNamedObjects(action.labels, 'label')}</div>`;
-};
-export const renderSayMsg = (node, action) => {
-    return html `<div>
-    <div
-      style="word-wrap: break-word; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
-    >
-      ${action.text}
-    </div>
-    ${action.audio_url
-        ? html `<div
-          style="margin-top: 0.5em; display: flex; align-items: center;"
-        >
-          <temba-icon name="audio" style="margin-right: 0.25em"></temba-icon>
-          <span
-            style="word-break: break-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
-            >${action.audio_url}</span
-          >
-        </div>`
-        : null}
-  </div>`;
-};
-export const renderPlayAudio = (node, action) => {
-    return html `<div style="display: flex; align-items: center;">
-    <temba-icon name="audio" style="margin-right: 0.25em"></temba-icon>
-    <span
-      style="word-break: break-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
-      >${action.audio_url}</span
-    >
-  </div>`;
-};
-export const renderWaitForResponse = (node, action) => {
-    return html `<div>
-    Wait for message response
-    ${action.timeout
-        ? html `<div style="margin-top: 0.25em">
-          Timeout after <b>${action.timeout}</b> seconds
-        </div>`
-        : null}
-  </div>`;
-};
-export const renderWaitForMenu = (node, action) => {
-    return html `<div>
-    Wait for menu selection: <b>${action.menu.name}</b>
-    ${action.timeout
-        ? html `<div style="margin-top: 0.25em">
-          Timeout after <b>${action.timeout}</b> seconds
-        </div>`
-        : null}
-  </div>`;
-};
-export const renderWaitForDigits = (node, action) => {
-    return html `<div>
-    Wait for <b>${action.count}</b> digit${action.count !== 1 ? 's' : ''}
-    ${action.timeout
-        ? html `<div style="margin-top: 0.25em">
-          Timeout after <b>${action.timeout}</b> seconds
-        </div>`
-        : null}
-  </div>`;
-};
-export const renderWaitForAudio = (node, action) => {
-    return html `<div>
-    <temba-icon name="audio" style="margin-right: 0.25em"></temba-icon>
-    Wait for audio recording
-    ${action.timeout
-        ? html `<div style="margin-top: 0.25em">
-          Timeout after <b>${action.timeout}</b> seconds
-        </div>`
-        : null}
-  </div>`;
-};
-export const renderWaitForVideo = (node, action) => {
-    return html `<div>
-    <temba-icon name="video" style="margin-right: 0.25em"></temba-icon>
-    Wait for video recording
-    ${action.timeout
-        ? html `<div style="margin-top: 0.25em">
-          Timeout after <b>${action.timeout}</b> seconds
-        </div>`
-        : null}
-  </div>`;
-};
-export const renderWaitForImage = (node, action) => {
-    return html `<div>
-    <temba-icon name="image" style="margin-right: 0.25em"></temba-icon>
-    Wait for image
-    ${action.timeout
-        ? html `<div style="margin-top: 0.25em">
-          Timeout after <b>${action.timeout}</b> seconds
-        </div>`
-        : null}
-  </div>`;
-};
-export const renderWaitForLocation = (node, action) => {
-    return html `<div>
-    <temba-icon name="location" style="margin-right: 0.25em"></temba-icon>
-    Wait for location
-    ${action.timeout
-        ? html `<div style="margin-top: 0.25em">
-          Timeout after <b>${action.timeout}</b> seconds
-        </div>`
-        : null}
-  </div>`;
-};
-//# sourceMappingURL=render.js.map