@nyaruka/temba-components 0.131.1 → 0.131.3

package/out-tsc/test/temba-action-drag-between-nodes.test.js

@@ -0,0 +1,252 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import '../temba-modules';
+describe('Drag actions between nodes', () => {
+    let node1;
+    let node1UI;
+    let node2;
+    let node2UI;
+    beforeEach(() => {
+        // Create test nodes
+        node1 = {
+            uuid: 'node-1',
+            actions: [
+                {
+                    type: 'send_msg',
+                    uuid: 'action-1',
+                    text: 'First message',
+                    quick_replies: []
+                },
+                {
+                    type: 'send_msg',
+                    uuid: 'action-2',
+                    text: 'Second message',
+                    quick_replies: []
+                }
+            ],
+            exits: [{ uuid: 'exit-1', destination_uuid: null }]
+        };
+        node1UI = {
+            position: { left: 100, top: 100 },
+            type: 'execute_actions',
+            config: {}
+        };
+        node2 = {
+            uuid: 'node-2',
+            actions: [
+                {
+                    type: 'send_msg',
+                    uuid: 'action-3',
+                    text: 'Third message',
+                    quick_replies: []
+                }
+            ],
+            exits: [{ uuid: 'exit-2', destination_uuid: null }]
+        };
+        node2UI = {
+            position: { left: 400, top: 100 },
+            type: 'execute_actions',
+            config: {}
+        };
+    });
+    it('should render execute_actions node with sortable list', async () => {
+        const node1Element = await fixture(html `
+      <temba-flow-node .node=${node1} .ui=${node1UI}></temba-flow-node>
+    `);
+        await node1Element.updateComplete;
+        // Verify node renders with sortable list
+        const sortableList = node1Element.querySelector('temba-sortable-list');
+        expect(sortableList).to.exist;
+        // Verify actions are rendered
+        const actions = node1Element.querySelectorAll('.action.sortable');
+        expect(actions.length).to.equal(2);
+    });
+    it('should show placeholder in target node during drag', async () => {
+        const node2Element = await fixture(html `
+      <temba-flow-node .node=${node2} .ui=${node2UI}></temba-flow-node>
+    `);
+        await node2Element.updateComplete;
+        // Simulate action-drag-over event from Editor
+        const dragOverEvent = new CustomEvent('action-drag-over', {
+            detail: {
+                action: node1.actions[0],
+                sourceNodeUuid: 'node-1',
+                actionIndex: 0,
+                mouseY: 150
+            },
+            bubbles: false
+        });
+        node2Element.dispatchEvent(dragOverEvent);
+        await node2Element.updateComplete;
+        // Check that placeholder is rendered
+        const placeholder = node2Element.querySelector('.drop-placeholder');
+        expect(placeholder).to.exist;
+    });
+    it('should handle drag-over event and store external drag info', async () => {
+        const node2Element = await fixture(html `
+      <temba-flow-node .node=${node2} .ui=${node2UI}></temba-flow-node>
+    `);
+        await node2Element.updateComplete;
+        // Simulate drag over
+        const dragOverEvent = new CustomEvent('action-drag-over', {
+            detail: {
+                action: node1.actions[0],
+                sourceNodeUuid: 'node-1',
+                actionIndex: 0,
+                mouseY: 150
+            },
+            bubbles: false
+        });
+        node2Element.dispatchEvent(dragOverEvent);
+        await node2Element.updateComplete;
+        // Verify that external drag info is stored (check internal state)
+        const externalDragInfo = node2Element.externalDragInfo;
+        expect(externalDragInfo).to.exist;
+        expect(externalDragInfo.action.uuid).to.equal('action-1');
+        expect(externalDragInfo.sourceNodeUuid).to.equal('node-1');
+    });
+    it('should calculate correct drop index based on mouse position', async () => {
+        const node2Element = await fixture(html `
+      <temba-flow-node .node=${node2} .ui=${node2UI}></temba-flow-node>
+    `);
+        await node2Element.updateComplete;
+        // Get action element bounds to calculate positions
+        const actionElement = node2Element.querySelector('.action.sortable');
+        expect(actionElement).to.exist;
+        const rect = actionElement.getBoundingClientRect();
+        const topY = rect.top + 5; // Near top of first action
+        const bottomY = rect.bottom + 5; // Below first action
+        // Drag over at top
+        const dragOverEventTop = new CustomEvent('action-drag-over', {
+            detail: {
+                action: node1.actions[0],
+                sourceNodeUuid: 'node-1',
+                actionIndex: 0,
+                mouseY: topY
+            },
+            bubbles: false
+        });
+        node2Element.dispatchEvent(dragOverEventTop);
+        await node2Element.updateComplete;
+        // Check drop index is at beginning
+        let externalDragInfo = node2Element.externalDragInfo;
+        expect(externalDragInfo.dropIndex).to.equal(0);
+        // Drag over at bottom
+        const dragOverEventBottom = new CustomEvent('action-drag-over', {
+            detail: {
+                action: node1.actions[0],
+                sourceNodeUuid: 'node-1',
+                actionIndex: 0,
+                mouseY: bottomY
+            },
+            bubbles: false
+        });
+        node2Element.dispatchEvent(dragOverEventBottom);
+        await node2Element.updateComplete;
+        // Check drop index is at end
+        externalDragInfo = node2Element.externalDragInfo;
+        expect(externalDragInfo.dropIndex).to.equal(1);
+    });
+    it('should not accept drops from the same node', async () => {
+        const node1Element = await fixture(html `
+      <temba-flow-node .node=${node1} .ui=${node1UI}></temba-flow-node>
+    `);
+        await node1Element.updateComplete;
+        // Try to drop action from node-1 onto node-1
+        const dragOverEvent = new CustomEvent('action-drag-over', {
+            detail: {
+                action: node1.actions[0],
+                sourceNodeUuid: 'node-1', // Same as target
+                actionIndex: 0,
+                mouseY: 150
+            },
+            bubbles: false
+        });
+        node1Element.dispatchEvent(dragOverEvent);
+        await node1Element.updateComplete;
+        // Verify external drag info was NOT stored (rejected due to same source)
+        const externalDragInfo = node1Element.externalDragInfo;
+        expect(externalDragInfo).to.be.null;
+    });
+    it('should clear external drag state and hide placeholder', async () => {
+        const node2Element = await fixture(html `
+      <temba-flow-node .node=${node2} .ui=${node2UI}></temba-flow-node>
+    `);
+        await node2Element.updateComplete;
+        // Simulate drag over
+        const dragOverEvent = new CustomEvent('action-drag-over', {
+            detail: {
+                action: node1.actions[0],
+                sourceNodeUuid: 'node-1',
+                actionIndex: 0,
+                mouseY: 150
+            },
+            bubbles: false
+        });
+        node2Element.dispatchEvent(dragOverEvent);
+        await node2Element.updateComplete;
+        // Verify placeholder exists
+        let placeholder = node2Element.querySelector('.drop-placeholder');
+        expect(placeholder).to.exist;
+        // Clear the external drag state (simulating drag leaving the node)
+        node2Element.externalDragInfo = null;
+        // Trigger re-render
+        node2Element.requestUpdate();
+        await node2Element.updateComplete;
+        // Verify placeholder is gone
+        placeholder = node2Element.querySelector('.drop-placeholder');
+        expect(placeholder).to.not.exist;
+    });
+    it('should have sortable list for internal drag support', async () => {
+        const node1Element = await fixture(html `
+      <temba-flow-node .node=${node1} .ui=${node1UI}></temba-flow-node>
+    `);
+        await node1Element.updateComplete;
+        // Verify sortable list exists for internal drag (reordering within same node)
+        const sortableList = node1Element.querySelector('temba-sortable-list');
+        expect(sortableList).to.exist;
+        // Verify it has external drag enabled
+        expect(sortableList.hasAttribute('externaldrag')).to.be.true;
+    });
+    it('should only accept drops on execute_actions nodes', async () => {
+        const routerNodeUI = {
+            position: { left: 100, top: 100 },
+            type: 'split_by_expression', // Not execute_actions
+            config: {}
+        };
+        const routerNode = {
+            uuid: 'router-node',
+            actions: [],
+            exits: [{ uuid: 'exit-1', destination_uuid: null }],
+            router: {
+                type: 'switch',
+                operand: '@input',
+                cases: [],
+                categories: [],
+                default_category_uuid: 'cat-1'
+            }
+        };
+        const routerElement = await fixture(html `
+      <temba-flow-node
+        .node=${routerNode}
+        .ui=${routerNodeUI}
+      ></temba-flow-node>
+    `);
+        await routerElement.updateComplete;
+        // Try to drag over a non-execute_actions node
+        const dragOverEvent = new CustomEvent('action-drag-over', {
+            detail: {
+                action: node1.actions[0],
+                sourceNodeUuid: 'node-1',
+                actionIndex: 0,
+                mouseY: 150
+            },
+            bubbles: false
+        });
+        routerElement.dispatchEvent(dragOverEvent);
+        await routerElement.updateComplete;
+        // Verify external drag info was NOT stored (rejected due to wrong node type)
+        const externalDragInfo = routerElement.externalDragInfo;
+        expect(externalDragInfo).to.be.null;
+    });
+});
+//# sourceMappingURL=temba-action-drag-between-nodes.test.js.map

package/out-tsc/test/temba-action-drag-between-nodes.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"temba-action-drag-between-nodes.test.js","sourceRoot":"","sources":["../../test/temba-action-drag-between-nodes.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, fixture, html } from '@open-wc/testing';\nimport { CanvasNode } from '../src/flow/CanvasNode';\nimport { Node, NodeUI, SendMsg } from '../src/store/flow-definition';\nimport '../temba-modules';\n\ndescribe('Drag actions between nodes', () => {\n  let node1: Node;\n  let node1UI: NodeUI;\n  let node2: Node;\n  let node2UI: NodeUI;\n\n  beforeEach(() => {\n    // Create test nodes\n    node1 = {\n      uuid: 'node-1',\n      actions: [\n        {\n          type: 'send_msg',\n          uuid: 'action-1',\n          text: 'First message',\n          quick_replies: []\n        } as SendMsg,\n        {\n          type: 'send_msg',\n          uuid: 'action-2',\n          text: 'Second message',\n          quick_replies: []\n        } as SendMsg\n      ],\n      exits: [{ uuid: 'exit-1', destination_uuid: null }]\n    };\n\n    node1UI = {\n      position: { left: 100, top: 100 },\n      type: 'execute_actions',\n      config: {}\n    };\n\n    node2 = {\n      uuid: 'node-2',\n      actions: [\n        {\n          type: 'send_msg',\n          uuid: 'action-3',\n          text: 'Third message',\n          quick_replies: []\n        } as SendMsg\n      ],\n      exits: [{ uuid: 'exit-2', destination_uuid: null }]\n    };\n\n    node2UI = {\n      position: { left: 400, top: 100 },\n      type: 'execute_actions',\n      config: {}\n    };\n  });\n\n  it('should render execute_actions node with sortable list', async () => {\n    const node1Element = await fixture<CanvasNode>(html`\n      <temba-flow-node .node=${node1} .ui=${node1UI}></temba-flow-node>\n    `);\n\n    await node1Element.updateComplete;\n\n    // Verify node renders with sortable list\n    const sortableList = node1Element.querySelector('temba-sortable-list');\n    expect(sortableList).to.exist;\n\n    // Verify actions are rendered\n    const actions = node1Element.querySelectorAll('.action.sortable');\n    expect(actions.length).to.equal(2);\n  });\n\n  it('should show placeholder in target node during drag', async () => {\n    const node2Element = await fixture<CanvasNode>(html`\n      <temba-flow-node .node=${node2} .ui=${node2UI}></temba-flow-node>\n    `);\n\n    await node2Element.updateComplete;\n\n    // Simulate action-drag-over event from Editor\n    const dragOverEvent = new CustomEvent('action-drag-over', {\n      detail: {\n        action: node1.actions[0],\n        sourceNodeUuid: 'node-1',\n        actionIndex: 0,\n        mouseY: 150\n      },\n      bubbles: false\n    });\n\n    node2Element.dispatchEvent(dragOverEvent);\n    await node2Element.updateComplete;\n\n    // Check that placeholder is rendered\n    const placeholder = node2Element.querySelector('.drop-placeholder');\n    expect(placeholder).to.exist;\n  });\n\n  it('should handle drag-over event and store external drag info', async () => {\n    const node2Element = await fixture<CanvasNode>(html`\n      <temba-flow-node .node=${node2} .ui=${node2UI}></temba-flow-node>\n    `);\n\n    await node2Element.updateComplete;\n\n    // Simulate drag over\n    const dragOverEvent = new CustomEvent('action-drag-over', {\n      detail: {\n        action: node1.actions[0],\n        sourceNodeUuid: 'node-1',\n        actionIndex: 0,\n        mouseY: 150\n      },\n      bubbles: false\n    });\n    node2Element.dispatchEvent(dragOverEvent);\n    await node2Element.updateComplete;\n\n    // Verify that external drag info is stored (check internal state)\n    const externalDragInfo = (node2Element as any).externalDragInfo;\n    expect(externalDragInfo).to.exist;\n    expect(externalDragInfo.action.uuid).to.equal('action-1');\n    expect(externalDragInfo.sourceNodeUuid).to.equal('node-1');\n  });\n\n  it('should calculate correct drop index based on mouse position', async () => {\n    const node2Element = await fixture<CanvasNode>(html`\n      <temba-flow-node .node=${node2} .ui=${node2UI}></temba-flow-node>\n    `);\n\n    await node2Element.updateComplete;\n\n    // Get action element bounds to calculate positions\n    const actionElement = node2Element.querySelector(\n      '.action.sortable'\n    ) as HTMLElement;\n    expect(actionElement).to.exist;\n\n    const rect = actionElement.getBoundingClientRect();\n    const topY = rect.top + 5; // Near top of first action\n    const bottomY = rect.bottom + 5; // Below first action\n\n    // Drag over at top\n    const dragOverEventTop = new CustomEvent('action-drag-over', {\n      detail: {\n        action: node1.actions[0],\n        sourceNodeUuid: 'node-1',\n        actionIndex: 0,\n        mouseY: topY\n      },\n      bubbles: false\n    });\n    node2Element.dispatchEvent(dragOverEventTop);\n    await node2Element.updateComplete;\n\n    // Check drop index is at beginning\n    let externalDragInfo = (node2Element as any).externalDragInfo;\n    expect(externalDragInfo.dropIndex).to.equal(0);\n\n    // Drag over at bottom\n    const dragOverEventBottom = new CustomEvent('action-drag-over', {\n      detail: {\n        action: node1.actions[0],\n        sourceNodeUuid: 'node-1',\n        actionIndex: 0,\n        mouseY: bottomY\n      },\n      bubbles: false\n    });\n    node2Element.dispatchEvent(dragOverEventBottom);\n    await node2Element.updateComplete;\n\n    // Check drop index is at end\n    externalDragInfo = (node2Element as any).externalDragInfo;\n    expect(externalDragInfo.dropIndex).to.equal(1);\n  });\n\n  it('should not accept drops from the same node', async () => {\n    const node1Element = await fixture<CanvasNode>(html`\n      <temba-flow-node .node=${node1} .ui=${node1UI}></temba-flow-node>\n    `);\n\n    await node1Element.updateComplete;\n\n    // Try to drop action from node-1 onto node-1\n    const dragOverEvent = new CustomEvent('action-drag-over', {\n      detail: {\n        action: node1.actions[0],\n        sourceNodeUuid: 'node-1', // Same as target\n        actionIndex: 0,\n        mouseY: 150\n      },\n      bubbles: false\n    });\n    node1Element.dispatchEvent(dragOverEvent);\n    await node1Element.updateComplete;\n\n    // Verify external drag info was NOT stored (rejected due to same source)\n    const externalDragInfo = (node1Element as any).externalDragInfo;\n    expect(externalDragInfo).to.be.null;\n  });\n\n  it('should clear external drag state and hide placeholder', async () => {\n    const node2Element = await fixture<CanvasNode>(html`\n      <temba-flow-node .node=${node2} .ui=${node2UI}></temba-flow-node>\n    `);\n\n    await node2Element.updateComplete;\n\n    // Simulate drag over\n    const dragOverEvent = new CustomEvent('action-drag-over', {\n      detail: {\n        action: node1.actions[0],\n        sourceNodeUuid: 'node-1',\n        actionIndex: 0,\n        mouseY: 150\n      },\n      bubbles: false\n    });\n    node2Element.dispatchEvent(dragOverEvent);\n    await node2Element.updateComplete;\n\n    // Verify placeholder exists\n    let placeholder = node2Element.querySelector('.drop-placeholder');\n    expect(placeholder).to.exist;\n\n    // Clear the external drag state (simulating drag leaving the node)\n    (node2Element as any).externalDragInfo = null;\n    // Trigger re-render\n    node2Element.requestUpdate();\n    await node2Element.updateComplete;\n\n    // Verify placeholder is gone\n    placeholder = node2Element.querySelector('.drop-placeholder');\n    expect(placeholder).to.not.exist;\n  });\n\n  it('should have sortable list for internal drag support', async () => {\n    const node1Element = await fixture<CanvasNode>(html`\n      <temba-flow-node .node=${node1} .ui=${node1UI}></temba-flow-node>\n    `);\n\n    await node1Element.updateComplete;\n\n    // Verify sortable list exists for internal drag (reordering within same node)\n    const sortableList = node1Element.querySelector('temba-sortable-list');\n    expect(sortableList).to.exist;\n\n    // Verify it has external drag enabled\n    expect(sortableList.hasAttribute('externaldrag')).to.be.true;\n  });\n\n  it('should only accept drops on execute_actions nodes', async () => {\n    const routerNodeUI: NodeUI = {\n      position: { left: 100, top: 100 },\n      type: 'split_by_expression', // Not execute_actions\n      config: {}\n    };\n\n    const routerNode: Node = {\n      uuid: 'router-node',\n      actions: [],\n      exits: [{ uuid: 'exit-1', destination_uuid: null }],\n      router: {\n        type: 'switch',\n        operand: '@input',\n        cases: [],\n        categories: [],\n        default_category_uuid: 'cat-1'\n      }\n    };\n\n    const routerElement = await fixture<CanvasNode>(html`\n      <temba-flow-node\n        .node=${routerNode}\n        .ui=${routerNodeUI}\n      ></temba-flow-node>\n    `);\n\n    await routerElement.updateComplete;\n\n    // Try to drag over a non-execute_actions node\n    const dragOverEvent = new CustomEvent('action-drag-over', {\n      detail: {\n        action: node1.actions[0],\n        sourceNodeUuid: 'node-1',\n        actionIndex: 0,\n        mouseY: 150\n      },\n      bubbles: false\n    });\n    routerElement.dispatchEvent(dragOverEvent);\n    await routerElement.updateComplete;\n\n    // Verify external drag info was NOT stored (rejected due to wrong node type)\n    const externalDragInfo = (routerElement as any).externalDragInfo;\n    expect(externalDragInfo).to.be.null;\n  });\n});\n"]}

package/out-tsc/test/temba-canvas-menu.test.js

@@ -0,0 +1,122 @@
+import { expect, assert } from '@open-wc/testing';
+import { CanvasMenu } from '../src/flow/CanvasMenu';
+import { assertScreenshot, getClip, getComponent } from './utils.test';
+describe('temba-canvas-menu', () => {
+    const createCanvasMenu = async () => {
+        const component = (await getComponent('temba-canvas-menu', {}, '', 250, 250));
+        await component.updateComplete;
+        return component;
+    };
+    it('can be created', async () => {
+        const menu = await createCanvasMenu();
+        assert.instanceOf(menu, CanvasMenu);
+        expect(menu.open).to.be.false;
+    });
+    it('is not visible when closed', async () => {
+        var _a;
+        const menu = await createCanvasMenu();
+        expect(menu.open).to.be.false;
+        // verify no menu is rendered
+        const menuElement = (_a = menu.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.menu');
+        expect(menuElement).to.be.null;
+    });
+    it('shows menu when opened', async () => {
+        var _a;
+        const menu = await createCanvasMenu();
+        // open the menu
+        menu.show(100, 100, { x: 50, y: 50 });
+        await menu.updateComplete;
+        expect(menu.open).to.be.true;
+        expect(menu.x).to.equal(100);
+        expect(menu.y).to.equal(100);
+        // verify menu is rendered
+        const menuElement = (_a = menu.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.menu');
+        expect(menuElement).to.not.be.null;
+        await assertScreenshot('canvas-menu/open', getClip(menu));
+    });
+    it('has three menu items', async () => {
+        var _a;
+        const menu = await createCanvasMenu();
+        menu.show(100, 100, { x: 50, y: 50 });
+        await menu.updateComplete;
+        const menuItems = (_a = menu.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.menu-item');
+        expect(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length).to.equal(3);
+        // check menu item titles
+        const titles = Array.from(menuItems || []).map((item) => { var _a; return (_a = item.querySelector('.menu-item-title')) === null || _a === void 0 ? void 0 : _a.textContent; });
+        expect(titles).to.deep.equal([
+            'Add Action',
+            'Add Split',
+            'Add Sticky Note'
+        ]);
+    });
+    it('closes when close() is called', async () => {
+        const menu = await createCanvasMenu();
+        menu.show(100, 100, { x: 50, y: 50 });
+        await menu.updateComplete;
+        expect(menu.open).to.be.true;
+        menu.close();
+        await menu.updateComplete;
+        expect(menu.open).to.be.false;
+    });
+    it('fires selection event when menu item is clicked', async () => {
+        var _a;
+        const menu = await createCanvasMenu();
+        menu.show(100, 100, { x: 50, y: 50 });
+        await menu.updateComplete;
+        let selectionFired = false;
+        let selectionDetail = null;
+        menu.addEventListener('temba-selection', (event) => {
+            selectionFired = true;
+            selectionDetail = event.detail;
+        });
+        // click on sticky note option (now the third item)
+        const menuItems = (_a = menu.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.menu-item');
+        const stickyItem = menuItems === null || menuItems === void 0 ? void 0 : menuItems[2];
+        stickyItem.click();
+        await menu.updateComplete;
+        expect(selectionFired).to.be.true;
+        expect(selectionDetail).to.deep.equal({
+            action: 'sticky',
+            position: { x: 50, y: 50 }
+        });
+        expect(menu.open).to.be.false;
+    });
+    it('adjusts position to stay within viewport bounds', async () => {
+        var _a, _b;
+        const menu = await createCanvasMenu();
+        // open menu at position that would go off screen
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const margin = 10; // matches the margin in CanvasMenu
+        // position that would go off the right and bottom edges
+        menu.show(viewportWidth - 50, viewportHeight - 50, {
+            x: 100,
+            y: 100
+        });
+        await menu.updateComplete;
+        // wait for position adjustment
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        await menu.updateComplete;
+        const menuElement = (_a = menu.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.menu');
+        expect(menuElement).to.not.be.null;
+        const menuRect = menuElement.getBoundingClientRect();
+        // verify menu stays within viewport with margin
+        expect(menuRect.right).to.be.at.most(viewportWidth - margin);
+        expect(menuRect.bottom).to.be.at.most(viewportHeight - margin);
+        // verify click position is preserved (not adjusted)
+        let selectionFired = false;
+        let selectionDetail = null;
+        menu.addEventListener('temba-selection', (event) => {
+            selectionFired = true;
+            selectionDetail = event.detail;
+        });
+        const menuItems = (_b = menu.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('.menu-item');
+        const actionItem = menuItems === null || menuItems === void 0 ? void 0 : menuItems[0];
+        actionItem.click();
+        await menu.updateComplete;
+        expect(selectionFired).to.be.true;
+        // click position should remain unchanged
+        expect(selectionDetail.position).to.deep.equal({ x: 100, y: 100 });
+    });
+});
+//# sourceMappingURL=temba-canvas-menu.test.js.map

package/out-tsc/test/temba-canvas-menu.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"temba-canvas-menu.test.js","sourceRoot":"","sources":["../../test/temba-canvas-menu.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, assert } from '@open-wc/testing';\nimport { CanvasMenu } from '../src/flow/CanvasMenu';\nimport { assertScreenshot, getClip, getComponent } from './utils.test';\n\ndescribe('temba-canvas-menu', () => {\n  const createCanvasMenu = async () => {\n    const component = (await getComponent(\n      'temba-canvas-menu',\n      {},\n      '',\n      250,\n      250\n    )) as CanvasMenu;\n    await component.updateComplete;\n    return component;\n  };\n\n  it('can be created', async () => {\n    const menu = await createCanvasMenu();\n    assert.instanceOf(menu, CanvasMenu);\n    expect(menu.open).to.be.false;\n  });\n\n  it('is not visible when closed', async () => {\n    const menu = await createCanvasMenu();\n    expect(menu.open).to.be.false;\n\n    // verify no menu is rendered\n    const menuElement = menu.shadowRoot?.querySelector('.menu');\n    expect(menuElement).to.be.null;\n  });\n\n  it('shows menu when opened', async () => {\n    const menu = await createCanvasMenu();\n\n    // open the menu\n    menu.show(100, 100, { x: 50, y: 50 });\n    await menu.updateComplete;\n\n    expect(menu.open).to.be.true;\n    expect(menu.x).to.equal(100);\n    expect(menu.y).to.equal(100);\n\n    // verify menu is rendered\n    const menuElement = menu.shadowRoot?.querySelector('.menu');\n    expect(menuElement).to.not.be.null;\n\n    await assertScreenshot('canvas-menu/open', getClip(menu));\n  });\n\n  it('has three menu items', async () => {\n    const menu = await createCanvasMenu();\n    menu.show(100, 100, { x: 50, y: 50 });\n    await menu.updateComplete;\n\n    const menuItems = menu.shadowRoot?.querySelectorAll('.menu-item');\n    expect(menuItems?.length).to.equal(3);\n\n    // check menu item titles\n    const titles = Array.from(menuItems || []).map(\n      (item) => item.querySelector('.menu-item-title')?.textContent\n    );\n    expect(titles).to.deep.equal([\n      'Add Action',\n      'Add Split',\n      'Add Sticky Note'\n    ]);\n  });\n\n  it('closes when close() is called', async () => {\n    const menu = await createCanvasMenu();\n    menu.show(100, 100, { x: 50, y: 50 });\n    await menu.updateComplete;\n\n    expect(menu.open).to.be.true;\n\n    menu.close();\n    await menu.updateComplete;\n\n    expect(menu.open).to.be.false;\n  });\n\n  it('fires selection event when menu item is clicked', async () => {\n    const menu = await createCanvasMenu();\n    menu.show(100, 100, { x: 50, y: 50 });\n    await menu.updateComplete;\n\n    let selectionFired = false;\n    let selectionDetail = null;\n\n    menu.addEventListener('temba-selection', (event: any) => {\n      selectionFired = true;\n      selectionDetail = event.detail;\n    });\n\n    // click on sticky note option (now the third item)\n    const menuItems = menu.shadowRoot?.querySelectorAll('.menu-item');\n    const stickyItem = menuItems?.[2] as HTMLElement;\n    stickyItem.click();\n    await menu.updateComplete;\n\n    expect(selectionFired).to.be.true;\n    expect(selectionDetail).to.deep.equal({\n      action: 'sticky',\n      position: { x: 50, y: 50 }\n    });\n    expect(menu.open).to.be.false;\n  });\n\n  it('adjusts position to stay within viewport bounds', async () => {\n    const menu = await createCanvasMenu();\n\n    // open menu at position that would go off screen\n    const viewportWidth = window.innerWidth;\n    const viewportHeight = window.innerHeight;\n    const margin = 10; // matches the margin in CanvasMenu\n\n    // position that would go off the right and bottom edges\n    menu.show(viewportWidth - 50, viewportHeight - 50, {\n      x: 100,\n      y: 100\n    });\n    await menu.updateComplete;\n\n    // wait for position adjustment\n    await new Promise((resolve) => setTimeout(resolve, 100));\n    await menu.updateComplete;\n\n    const menuElement = menu.shadowRoot?.querySelector('.menu') as HTMLElement;\n    expect(menuElement).to.not.be.null;\n\n    const menuRect = menuElement.getBoundingClientRect();\n\n    // verify menu stays within viewport with margin\n    expect(menuRect.right).to.be.at.most(viewportWidth - margin);\n    expect(menuRect.bottom).to.be.at.most(viewportHeight - margin);\n\n    // verify click position is preserved (not adjusted)\n    let selectionFired = false;\n    let selectionDetail = null;\n\n    menu.addEventListener('temba-selection', (event: any) => {\n      selectionFired = true;\n      selectionDetail = event.detail;\n    });\n\n    const menuItems = menu.shadowRoot?.querySelectorAll('.menu-item');\n    const actionItem = menuItems?.[0] as HTMLElement;\n    actionItem.click();\n    await menu.updateComplete;\n\n    expect(selectionFired).to.be.true;\n    // click position should remain unchanged\n    expect(selectionDetail.position).to.deep.equal({ x: 100, y: 100 });\n  });\n});\n"]}

package/out-tsc/test/temba-floating-tab.test.js

@@ -0,0 +1,91 @@
+import { expect, assert } from '@open-wc/testing';
+import { FloatingTab } from '../src/display/FloatingTab';
+import { assertScreenshot, getClip, getComponent } from './utils.test';
+describe('temba-floating-tab', () => {
+    it('can be created', async () => {
+        const tab = (await getComponent('temba-floating-tab', {
+            icon: 'phone',
+            label: 'Phone Simulator',
+            color: '#10b981',
+            top: 100
+        }));
+        assert.instanceOf(tab, FloatingTab);
+        expect(tab.icon).to.equal('phone');
+        expect(tab.label).to.equal('Phone Simulator');
+        expect(tab.color).to.equal('#10b981');
+        expect(tab.top).to.equal(100);
+        expect(tab.hidden).to.equal(false);
+        await assertScreenshot('floating-tab/default', getClip(tab));
+    });
+    it('can be hidden', async () => {
+        const tab = (await getComponent('temba-floating-tab', {
+            icon: 'phone',
+            label: 'Phone Simulator',
+            color: '#10b981',
+            hidden: true
+        }));
+        expect(tab.hidden).to.equal(true);
+        expect(tab.classList.contains('hidden')).to.equal(true);
+        await assertScreenshot('floating-tab/hidden', getClip(tab));
+    });
+    it('shows label on hover', async () => {
+        const tab = (await getComponent('temba-floating-tab', {
+            icon: 'phone',
+            label: 'Phone Simulator',
+            color: '#6366f1'
+        }));
+        const tabElement = tab.shadowRoot.querySelector('.tab');
+        expect(tabElement).to.exist;
+        // simulate hover state
+        const labelElement = tab.shadowRoot.querySelector('.label');
+        expect(labelElement).to.exist;
+        await assertScreenshot('floating-tab/hover', getClip(tab));
+    });
+    it('fires click event', async () => {
+        const tab = (await getComponent('temba-floating-tab', {
+            icon: 'clock',
+            label: 'History',
+            color: '#8b5cf6'
+        }));
+        let clicked = false;
+        tab.addEventListener('temba-button-clicked', () => {
+            clicked = true;
+        });
+        const tabElement = tab.shadowRoot.querySelector('.tab');
+        tabElement.click();
+        expect(clicked).to.equal(true);
+    });
+    it('supports different colors', async () => {
+        const tab1 = (await getComponent('temba-floating-tab', {
+            icon: 'phone',
+            label: 'Phone',
+            color: '#10b981',
+            top: 100
+        }));
+        const tab2 = (await getComponent('temba-floating-tab', {
+            icon: 'globe',
+            label: 'Translation',
+            color: '#6b7280',
+            top: 200
+        }));
+        const tab3 = (await getComponent('temba-floating-tab', {
+            icon: 'clock',
+            label: 'History',
+            color: '#8b5cf6',
+            top: 300
+        }));
+        await assertScreenshot('floating-tab/green', getClip(tab1));
+        await assertScreenshot('floating-tab/gray', getClip(tab2));
+        await assertScreenshot('floating-tab/purple', getClip(tab3));
+    });
+    it('supports custom positioning', async () => {
+        const tab = (await getComponent('temba-floating-tab', {
+            icon: 'phone',
+            label: 'Phone Simulator',
+            color: '#10b981',
+            top: 250
+        }));
+        expect(tab.top).to.equal(250);
+    });
+});
+//# sourceMappingURL=temba-floating-tab.test.js.map

package/out-tsc/test/temba-floating-tab.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"temba-floating-tab.test.js","sourceRoot":"","sources":["../../test/temba-floating-tab.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, assert } from '@open-wc/testing';\nimport { FloatingTab } from '../src/display/FloatingTab';\nimport { assertScreenshot, getClip, getComponent } from './utils.test';\n\ndescribe('temba-floating-tab', () => {\n  it('can be created', async () => {\n    const tab = (await getComponent('temba-floating-tab', {\n      icon: 'phone',\n      label: 'Phone Simulator',\n      color: '#10b981',\n      top: 100\n    })) as FloatingTab;\n\n    assert.instanceOf(tab, FloatingTab);\n    expect(tab.icon).to.equal('phone');\n    expect(tab.label).to.equal('Phone Simulator');\n    expect(tab.color).to.equal('#10b981');\n    expect(tab.top).to.equal(100);\n    expect(tab.hidden).to.equal(false);\n\n    await assertScreenshot('floating-tab/default', getClip(tab));\n  });\n\n  it('can be hidden', async () => {\n    const tab = (await getComponent('temba-floating-tab', {\n      icon: 'phone',\n      label: 'Phone Simulator',\n      color: '#10b981',\n      hidden: true\n    })) as FloatingTab;\n\n    expect(tab.hidden).to.equal(true);\n    expect(tab.classList.contains('hidden')).to.equal(true);\n\n    await assertScreenshot('floating-tab/hidden', getClip(tab));\n  });\n\n  it('shows label on hover', async () => {\n    const tab = (await getComponent('temba-floating-tab', {\n      icon: 'phone',\n      label: 'Phone Simulator',\n      color: '#6366f1'\n    })) as FloatingTab;\n\n    const tabElement = tab.shadowRoot.querySelector('.tab') as HTMLElement;\n    expect(tabElement).to.exist;\n\n    // simulate hover state\n    const labelElement = tab.shadowRoot.querySelector('.label') as HTMLElement;\n    expect(labelElement).to.exist;\n\n    await assertScreenshot('floating-tab/hover', getClip(tab));\n  });\n\n  it('fires click event', async () => {\n    const tab = (await getComponent('temba-floating-tab', {\n      icon: 'clock',\n      label: 'History',\n      color: '#8b5cf6'\n    })) as FloatingTab;\n\n    let clicked = false;\n    tab.addEventListener('temba-button-clicked', () => {\n      clicked = true;\n    });\n\n    const tabElement = tab.shadowRoot.querySelector('.tab') as HTMLElement;\n    tabElement.click();\n\n    expect(clicked).to.equal(true);\n  });\n\n  it('supports different colors', async () => {\n    const tab1 = (await getComponent('temba-floating-tab', {\n      icon: 'phone',\n      label: 'Phone',\n      color: '#10b981',\n      top: 100\n    })) as FloatingTab;\n\n    const tab2 = (await getComponent('temba-floating-tab', {\n      icon: 'globe',\n      label: 'Translation',\n      color: '#6b7280',\n      top: 200\n    })) as FloatingTab;\n\n    const tab3 = (await getComponent('temba-floating-tab', {\n      icon: 'clock',\n      label: 'History',\n      color: '#8b5cf6',\n      top: 300\n    })) as FloatingTab;\n\n    await assertScreenshot('floating-tab/green', getClip(tab1));\n    await assertScreenshot('floating-tab/gray', getClip(tab2));\n    await assertScreenshot('floating-tab/purple', getClip(tab3));\n  });\n\n  it('supports custom positioning', async () => {\n    const tab = (await getComponent('temba-floating-tab', {\n      icon: 'phone',\n      label: 'Phone Simulator',\n      color: '#10b981',\n      top: 250\n    })) as FloatingTab;\n\n    expect(tab.top).to.equal(250);\n  });\n});\n"]}