@nyaruka/temba-components 0.131.1 → 0.131.3

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

@@ -0,0 +1,301 @@
+import { expect, assert } from '@open-wc/testing';
+import { FloatingWindow } from '../src/layout/FloatingWindow';
+import { assertScreenshot, getComponent } from './utils.test';
+describe('temba-floating-window', () => {
+    it('can be created', async () => {
+        const window = (await getComponent('temba-floating-window', {
+            header: 'Phone Simulator',
+            width: 250,
+            maxHeight: 700,
+            top: 100
+        }, '<div style="padding: 20px;">Window content goes here</div>', 300, 750));
+        assert.instanceOf(window, FloatingWindow);
+        expect(window.header).to.equal('Phone Simulator');
+        expect(window.width).to.equal(250);
+        expect(window.maxHeight).to.equal(700);
+        expect(window.top).to.equal(100);
+        // show the window for screenshot
+        window.hidden = false;
+        await window.updateComplete;
+        expect(window.hidden).to.equal(false);
+        // use custom clip for fixed positioned element
+        const windowElement = window.shadowRoot.querySelector('.window');
+        const clip = {
+            x: window.left,
+            y: window.top,
+            width: window.width,
+            height: windowElement.offsetHeight
+        };
+        await assertScreenshot('floating-window/default', clip);
+    });
+    it('starts hidden by default', async () => {
+        const window = (await getComponent('temba-floating-window', {
+            header: 'Test Window'
+        }, '<div>Content</div>'));
+        expect(window.hidden).to.equal(true);
+        expect(window.classList.contains('hidden')).to.equal(true);
+    });
+    it('can be shown and hidden', async () => {
+        const window = (await getComponent('temba-floating-window', {
+            header: 'Test Window',
+            hidden: true
+        }, '<div>Content</div>'));
+        expect(window.hidden).to.equal(true);
+        window.show();
+        await window.updateComplete;
+        expect(window.hidden).to.equal(false);
+        expect(window.classList.contains('hidden')).to.equal(false);
+        window.hide();
+        await window.updateComplete;
+        expect(window.hidden).to.equal(true);
+        expect(window.classList.contains('hidden')).to.equal(true);
+    });
+    it('fires close event when close button clicked', async () => {
+        const window = (await getComponent('temba-floating-window', {
+            header: 'Test Window'
+        }, '<div>Content</div>', 300, 750));
+        // show the window first
+        window.hidden = false;
+        await window.updateComplete;
+        let closed = false;
+        window.addEventListener('temba-dialog-hidden', () => {
+            closed = true;
+        });
+        const closeButton = window.shadowRoot.querySelector('.close-button');
+        expect(closeButton).to.exist;
+        closeButton.click();
+        await window.updateComplete;
+        expect(closed).to.equal(true);
+        expect(window.hidden).to.equal(true);
+    });
+    it('displays header correctly', async () => {
+        const window = (await getComponent('temba-floating-window', {
+            header: 'Phone Simulator'
+        }, '<div>Content</div>', 300, 400));
+        window.hidden = false;
+        await window.updateComplete;
+        const titleElement = window.shadowRoot.querySelector('.title');
+        expect(titleElement).to.exist;
+        expect(titleElement.textContent).to.equal('Phone Simulator');
+        // use custom clip for fixed positioned element
+        const windowElement = window.shadowRoot.querySelector('.window');
+        const clip = {
+            x: window.left,
+            y: window.top,
+            width: window.width,
+            height: windowElement.offsetHeight
+        };
+        await assertScreenshot('floating-window/with-header', clip);
+    });
+    it('renders slot content', async () => {
+        const window = (await getComponent('temba-floating-window', {
+            header: 'Test'
+        }, '<div class="test-content">Custom content</div>', 300, 400));
+        window.hidden = false;
+        await window.updateComplete;
+        const slotContent = window.querySelector('.test-content');
+        expect(slotContent).to.exist;
+        expect(slotContent.textContent).to.equal('Custom content');
+    });
+    it('supports custom dimensions', async () => {
+        const window = (await getComponent('temba-floating-window', {
+            header: 'Custom Size',
+            width: 400,
+            maxHeight: 600,
+            top: 100,
+            left: 100
+        }, '<div>Content</div>', 450, 650));
+        window.show();
+        await window.updateComplete;
+        expect(window.width).to.equal(400);
+        expect(window.maxHeight).to.equal(600);
+        expect(window.top).to.equal(100);
+        expect(window.left).to.equal(100);
+        // use custom clip for fixed positioned element
+        const windowElement = window.shadowRoot.querySelector('.window');
+        const clip = {
+            x: window.left,
+            y: window.top,
+            width: window.width,
+            height: windowElement.offsetHeight
+        };
+        await assertScreenshot('floating-window/custom-size', clip);
+    });
+    it('can be dragged by header', async () => {
+        const window = (await getComponent('temba-floating-window', {
+            header: 'Draggable Window',
+            width: 250,
+            maxHeight: 400,
+            top: 100,
+            left: 100
+        }, '<div>Content</div>', 300, 450));
+        window.hidden = false;
+        await window.updateComplete;
+        const header = window.shadowRoot.querySelector('.header');
+        expect(header).to.exist;
+        // simulate drag by setting dragging state
+        window.dragging = true;
+        await window.updateComplete;
+        const windowElement = window.shadowRoot.querySelector('.window');
+        expect(windowElement.classList.contains('dragging')).to.equal(true);
+    });
+    it('respects viewport bounds when dragging', async () => {
+        const window = (await getComponent('temba-floating-window', {
+            header: 'Bounded Window',
+            width: 250,
+            maxHeight: 400,
+            top: 100,
+            left: 100
+        }, '<div style="height: 200px;">Content with specific height</div>', 300, 450));
+        window.hidden = false;
+        await window.updateComplete;
+        // get actual window height
+        const windowElement = window.shadowRoot.querySelector('.window');
+        const actualHeight = windowElement.offsetHeight;
+        // simulate dragging near bottom of viewport
+        const viewportHeight = window.ownerDocument.defaultView.innerHeight;
+        const maxAllowedTop = viewportHeight - actualHeight;
+        // try to drag below the viewport
+        window.top = viewportHeight + 100;
+        await window.updateComplete;
+        // the handleMouseMove should clamp this, but we'll test the logic exists
+        expect(actualHeight).to.be.greaterThan(0);
+        expect(maxAllowedTop).to.be.lessThan(viewportHeight);
+    });
+    it('maintains consistent starting position', async () => {
+        const window = (await getComponent('temba-floating-window', {
+            header: 'Test',
+            width: 250,
+            maxHeight: 400,
+            top: 100,
+            left: 100
+        }, '<div>Content</div>', 300, 450));
+        window.hidden = false;
+        await window.updateComplete;
+        // verify initial position matches properties
+        expect(window.top).to.equal(100);
+        expect(window.left).to.equal(100);
+        // change position (simulating drag)
+        window.top = 200;
+        window.left = 200;
+        await window.updateComplete;
+        // hide and show
+        window.hide();
+        await window.updateComplete;
+        window.show();
+        await window.updateComplete;
+        // position should remain at property values (100, 100) not dragged position
+        expect(window.top).to.equal(100);
+        expect(window.left).to.equal(100);
+    });
+    it('can disable chrome', async () => {
+        const window = (await getComponent('temba-floating-window', {
+            header: 'Test',
+            width: 250,
+            maxHeight: 400,
+            top: 100,
+            left: 100,
+            chromeless: true
+        }, '<div style="background: white; padding: 20px;">Chromeless content</div>', 300, 450));
+        expect(window.chromeless).to.equal(true);
+        window.hidden = false;
+        await window.updateComplete;
+        const windowElement = window.shadowRoot.querySelector('.window');
+        expect(windowElement.classList.contains('chromeless')).to.equal(true);
+        // header should not be rendered
+        const header = window.shadowRoot.querySelector('.header');
+        expect(header).to.not.exist;
+        // body should have no padding
+        const body = window.shadowRoot.querySelector('.body');
+        const bodyStyles = getComputedStyle(body);
+        expect(bodyStyles.padding).to.equal('0px');
+        // use custom clip for fixed positioned element
+        const clip = {
+            x: window.left,
+            y: window.top,
+            width: window.width,
+            height: windowElement.offsetHeight
+        };
+        await assertScreenshot('floating-window/chromeless', clip);
+    });
+    it('defaults to showing chrome', async () => {
+        const window = (await getComponent('temba-floating-window', {
+            header: 'Test'
+        }, '<div>Content</div>'));
+        expect(window.chromeless).to.equal(false);
+    });
+    it('can close via public close() method', async () => {
+        const window = (await getComponent('temba-floating-window', {
+            header: 'Test',
+            chromeless: true
+        }, '<div>Content</div>'));
+        window.hidden = false;
+        await window.updateComplete;
+        expect(window.hidden).to.equal(false);
+        let eventFired = false;
+        window.addEventListener('temba-dialog-hidden', () => {
+            eventFired = true;
+        });
+        // call public close() method
+        window.close();
+        await window.updateComplete;
+        expect(window.hidden).to.equal(true);
+        expect(eventFired).to.equal(true);
+    });
+    it('chromeless window has no borders or shadows', async () => {
+        const window = (await getComponent('temba-floating-window', {
+            header: 'Test',
+            width: 250,
+            maxHeight: 400,
+            chromeless: true
+        }, '<div>Content</div>', 300, 450));
+        window.hidden = false;
+        await window.updateComplete;
+        const windowElement = window.shadowRoot.querySelector('.window');
+        const styles = getComputedStyle(windowElement);
+        expect(styles.boxShadow).to.equal('none');
+        expect(styles.borderRadius).to.equal('0px');
+        expect(styles.background.includes('rgba(0, 0, 0, 0)')).to.be.true;
+    });
+    it('supports min and max height constraints', async () => {
+        const window = (await getComponent('temba-floating-window', {
+            header: 'Min/Max Test',
+            width: 300,
+            minHeight: 200,
+            maxHeight: 500
+        }, '<div style="padding: 20px;">Content that can vary in height</div>', 350, 550));
+        window.hidden = false;
+        await window.updateComplete;
+        expect(window.minHeight).to.equal(200);
+        expect(window.maxHeight).to.equal(500);
+        // verify the styles are applied
+        const windowElement = window.shadowRoot.querySelector('.window');
+        const styles = getComputedStyle(windowElement);
+        expect(styles.minHeight).to.equal('200px');
+        expect(styles.maxHeight).to.equal('500px');
+    });
+    it('stays on screen when browser is resized', async () => {
+        const window = (await getComponent('temba-floating-window', {
+            header: 'Resize Test',
+            width: 250,
+            maxHeight: 400,
+            top: 100,
+            left: 100
+        }, '<div style="height: 200px;">Content</div>', 300, 450));
+        window.hidden = false;
+        await window.updateComplete;
+        // position window near right edge
+        const originalViewportWidth = window.ownerDocument.defaultView.innerWidth;
+        window.left = originalViewportWidth - window.width - 30;
+        await window.updateComplete;
+        // simulate window resize event (the component should constrain position)
+        window.dispatchEvent(new Event('resize', { bubbles: true }));
+        await window.updateComplete;
+        // window should still be within viewport bounds with 20px padding
+        const padding = 20;
+        expect(window.left).to.be.at.least(padding);
+        expect(window.left).to.be.at.most(window.ownerDocument.defaultView.innerWidth - window.width - padding);
+        expect(window.top).to.be.at.least(padding);
+    });
+});
+//# sourceMappingURL=temba-floating-window.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"temba-floating-window.test.js","sourceRoot":"","sources":["../../test/temba-floating-window.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, assert } from '@open-wc/testing';\nimport { FloatingWindow } from '../src/layout/FloatingWindow';\nimport { assertScreenshot, getComponent } from './utils.test';\n\ndescribe('temba-floating-window', () => {\n  it('can be created', async () => {\n    const window = (await getComponent(\n      'temba-floating-window',\n      {\n        header: 'Phone Simulator',\n        width: 250,\n        maxHeight: 700,\n        top: 100\n      },\n      '<div style=\"padding: 20px;\">Window content goes here</div>',\n      300,\n      750\n    )) as FloatingWindow;\n\n    assert.instanceOf(window, FloatingWindow);\n    expect(window.header).to.equal('Phone Simulator');\n    expect(window.width).to.equal(250);\n    expect(window.maxHeight).to.equal(700);\n    expect(window.top).to.equal(100);\n\n    // show the window for screenshot\n    window.hidden = false;\n    await window.updateComplete;\n    expect(window.hidden).to.equal(false);\n\n    // use custom clip for fixed positioned element\n    const windowElement = window.shadowRoot.querySelector(\n      '.window'\n    ) as HTMLElement;\n    const clip = {\n      x: window.left,\n      y: window.top,\n      width: window.width,\n      height: windowElement.offsetHeight\n    };\n    await assertScreenshot('floating-window/default', clip);\n  });\n\n  it('starts hidden by default', async () => {\n    const window = (await getComponent(\n      'temba-floating-window',\n      {\n        header: 'Test Window'\n      },\n      '<div>Content</div>'\n    )) as FloatingWindow;\n\n    expect(window.hidden).to.equal(true);\n    expect(window.classList.contains('hidden')).to.equal(true);\n  });\n\n  it('can be shown and hidden', async () => {\n    const window = (await getComponent(\n      'temba-floating-window',\n      {\n        header: 'Test Window',\n        hidden: true\n      },\n      '<div>Content</div>'\n    )) as FloatingWindow;\n\n    expect(window.hidden).to.equal(true);\n\n    window.show();\n    await window.updateComplete;\n    expect(window.hidden).to.equal(false);\n    expect(window.classList.contains('hidden')).to.equal(false);\n\n    window.hide();\n    await window.updateComplete;\n    expect(window.hidden).to.equal(true);\n    expect(window.classList.contains('hidden')).to.equal(true);\n  });\n\n  it('fires close event when close button clicked', async () => {\n    const window = (await getComponent(\n      'temba-floating-window',\n      {\n        header: 'Test Window'\n      },\n      '<div>Content</div>',\n      300,\n      750\n    )) as FloatingWindow;\n\n    // show the window first\n    window.hidden = false;\n    await window.updateComplete;\n\n    let closed = false;\n    window.addEventListener('temba-dialog-hidden', () => {\n      closed = true;\n    });\n\n    const closeButton = window.shadowRoot.querySelector(\n      '.close-button'\n    ) as HTMLElement;\n    expect(closeButton).to.exist;\n\n    closeButton.click();\n    await window.updateComplete;\n\n    expect(closed).to.equal(true);\n    expect(window.hidden).to.equal(true);\n  });\n\n  it('displays header correctly', async () => {\n    const window = (await getComponent(\n      'temba-floating-window',\n      {\n        header: 'Phone Simulator'\n      },\n      '<div>Content</div>',\n      300,\n      400\n    )) as FloatingWindow;\n\n    window.hidden = false;\n    await window.updateComplete;\n\n    const titleElement = window.shadowRoot.querySelector('.title');\n    expect(titleElement).to.exist;\n    expect(titleElement.textContent).to.equal('Phone Simulator');\n\n    // use custom clip for fixed positioned element\n    const windowElement = window.shadowRoot.querySelector(\n      '.window'\n    ) as HTMLElement;\n    const clip = {\n      x: window.left,\n      y: window.top,\n      width: window.width,\n      height: windowElement.offsetHeight\n    };\n    await assertScreenshot('floating-window/with-header', clip);\n  });\n\n  it('renders slot content', async () => {\n    const window = (await getComponent(\n      'temba-floating-window',\n      {\n        header: 'Test'\n      },\n      '<div class=\"test-content\">Custom content</div>',\n      300,\n      400\n    )) as FloatingWindow;\n\n    window.hidden = false;\n    await window.updateComplete;\n\n    const slotContent = window.querySelector('.test-content');\n    expect(slotContent).to.exist;\n    expect(slotContent.textContent).to.equal('Custom content');\n  });\n\n  it('supports custom dimensions', async () => {\n    const window = (await getComponent(\n      'temba-floating-window',\n      {\n        header: 'Custom Size',\n        width: 400,\n        maxHeight: 600,\n        top: 100,\n        left: 100\n      },\n      '<div>Content</div>',\n      450,\n      650\n    )) as FloatingWindow;\n\n    window.show();\n    await window.updateComplete;\n    expect(window.width).to.equal(400);\n    expect(window.maxHeight).to.equal(600);\n    expect(window.top).to.equal(100);\n    expect(window.left).to.equal(100);\n\n    // use custom clip for fixed positioned element\n    const windowElement = window.shadowRoot.querySelector(\n      '.window'\n    ) as HTMLElement;\n    const clip = {\n      x: window.left,\n      y: window.top,\n      width: window.width,\n      height: windowElement.offsetHeight\n    };\n\n    await assertScreenshot('floating-window/custom-size', clip);\n  });\n\n  it('can be dragged by header', async () => {\n    const window = (await getComponent(\n      'temba-floating-window',\n      {\n        header: 'Draggable Window',\n        width: 250,\n        maxHeight: 400,\n        top: 100,\n        left: 100\n      },\n      '<div>Content</div>',\n      300,\n      450\n    )) as FloatingWindow;\n\n    window.hidden = false;\n    await window.updateComplete;\n\n    const header = window.shadowRoot.querySelector('.header') as HTMLElement;\n    expect(header).to.exist;\n\n    // simulate drag by setting dragging state\n    window.dragging = true;\n    await window.updateComplete;\n\n    const windowElement = window.shadowRoot.querySelector('.window');\n    expect(windowElement.classList.contains('dragging')).to.equal(true);\n  });\n\n  it('respects viewport bounds when dragging', async () => {\n    const window = (await getComponent(\n      'temba-floating-window',\n      {\n        header: 'Bounded Window',\n        width: 250,\n        maxHeight: 400,\n        top: 100,\n        left: 100\n      },\n      '<div style=\"height: 200px;\">Content with specific height</div>',\n      300,\n      450\n    )) as FloatingWindow;\n\n    window.hidden = false;\n    await window.updateComplete;\n\n    // get actual window height\n    const windowElement = window.shadowRoot.querySelector(\n      '.window'\n    ) as HTMLElement;\n    const actualHeight = windowElement.offsetHeight;\n\n    // simulate dragging near bottom of viewport\n    const viewportHeight = window.ownerDocument.defaultView.innerHeight;\n    const maxAllowedTop = viewportHeight - actualHeight;\n\n    // try to drag below the viewport\n    window.top = viewportHeight + 100;\n    await window.updateComplete;\n\n    // the handleMouseMove should clamp this, but we'll test the logic exists\n    expect(actualHeight).to.be.greaterThan(0);\n    expect(maxAllowedTop).to.be.lessThan(viewportHeight);\n  });\n\n  it('maintains consistent starting position', async () => {\n    const window = (await getComponent(\n      'temba-floating-window',\n      {\n        header: 'Test',\n        width: 250,\n        maxHeight: 400,\n        top: 100,\n        left: 100\n      },\n      '<div>Content</div>',\n      300,\n      450\n    )) as FloatingWindow;\n\n    window.hidden = false;\n    await window.updateComplete;\n\n    // verify initial position matches properties\n    expect(window.top).to.equal(100);\n    expect(window.left).to.equal(100);\n\n    // change position (simulating drag)\n    window.top = 200;\n    window.left = 200;\n    await window.updateComplete;\n\n    // hide and show\n    window.hide();\n    await window.updateComplete;\n    window.show();\n    await window.updateComplete;\n\n    // position should remain at property values (100, 100) not dragged position\n    expect(window.top).to.equal(100);\n    expect(window.left).to.equal(100);\n  });\n\n  it('can disable chrome', async () => {\n    const window = (await getComponent(\n      'temba-floating-window',\n      {\n        header: 'Test',\n        width: 250,\n        maxHeight: 400,\n        top: 100,\n        left: 100,\n        chromeless: true\n      },\n      '<div style=\"background: white; padding: 20px;\">Chromeless content</div>',\n      300,\n      450\n    )) as FloatingWindow;\n\n    expect(window.chromeless).to.equal(true);\n\n    window.hidden = false;\n    await window.updateComplete;\n\n    const windowElement = window.shadowRoot.querySelector(\n      '.window'\n    ) as HTMLElement;\n    expect(windowElement.classList.contains('chromeless')).to.equal(true);\n\n    // header should not be rendered\n    const header = window.shadowRoot.querySelector('.header');\n    expect(header).to.not.exist;\n\n    // body should have no padding\n    const body = window.shadowRoot.querySelector('.body') as HTMLElement;\n    const bodyStyles = getComputedStyle(body);\n    expect(bodyStyles.padding).to.equal('0px');\n\n    // use custom clip for fixed positioned element\n    const clip = {\n      x: window.left,\n      y: window.top,\n      width: window.width,\n      height: windowElement.offsetHeight\n    };\n    await assertScreenshot('floating-window/chromeless', clip);\n  });\n\n  it('defaults to showing chrome', async () => {\n    const window = (await getComponent(\n      'temba-floating-window',\n      {\n        header: 'Test'\n      },\n      '<div>Content</div>'\n    )) as FloatingWindow;\n\n    expect(window.chromeless).to.equal(false);\n  });\n\n  it('can close via public close() method', async () => {\n    const window = (await getComponent(\n      'temba-floating-window',\n      {\n        header: 'Test',\n        chromeless: true\n      },\n      '<div>Content</div>'\n    )) as FloatingWindow;\n\n    window.hidden = false;\n    await window.updateComplete;\n    expect(window.hidden).to.equal(false);\n\n    let eventFired = false;\n    window.addEventListener('temba-dialog-hidden', () => {\n      eventFired = true;\n    });\n\n    // call public close() method\n    window.close();\n    await window.updateComplete;\n\n    expect(window.hidden).to.equal(true);\n    expect(eventFired).to.equal(true);\n  });\n\n  it('chromeless window has no borders or shadows', async () => {\n    const window = (await getComponent(\n      'temba-floating-window',\n      {\n        header: 'Test',\n        width: 250,\n        maxHeight: 400,\n        chromeless: true\n      },\n      '<div>Content</div>',\n      300,\n      450\n    )) as FloatingWindow;\n\n    window.hidden = false;\n    await window.updateComplete;\n\n    const windowElement = window.shadowRoot.querySelector(\n      '.window'\n    ) as HTMLElement;\n    const styles = getComputedStyle(windowElement);\n\n    expect(styles.boxShadow).to.equal('none');\n    expect(styles.borderRadius).to.equal('0px');\n    expect(styles.background.includes('rgba(0, 0, 0, 0)')).to.be.true;\n  });\n\n  it('supports min and max height constraints', async () => {\n    const window = (await getComponent(\n      'temba-floating-window',\n      {\n        header: 'Min/Max Test',\n        width: 300,\n        minHeight: 200,\n        maxHeight: 500\n      },\n      '<div style=\"padding: 20px;\">Content that can vary in height</div>',\n      350,\n      550\n    )) as FloatingWindow;\n\n    window.hidden = false;\n    await window.updateComplete;\n\n    expect(window.minHeight).to.equal(200);\n    expect(window.maxHeight).to.equal(500);\n\n    // verify the styles are applied\n    const windowElement = window.shadowRoot.querySelector(\n      '.window'\n    ) as HTMLElement;\n    const styles = getComputedStyle(windowElement);\n    expect(styles.minHeight).to.equal('200px');\n    expect(styles.maxHeight).to.equal('500px');\n  });\n\n  it('stays on screen when browser is resized', async () => {\n    const window = (await getComponent(\n      'temba-floating-window',\n      {\n        header: 'Resize Test',\n        width: 250,\n        maxHeight: 400,\n        top: 100,\n        left: 100\n      },\n      '<div style=\"height: 200px;\">Content</div>',\n      300,\n      450\n    )) as FloatingWindow;\n\n    window.hidden = false;\n    await window.updateComplete;\n\n    // position window near right edge\n    const originalViewportWidth = window.ownerDocument.defaultView.innerWidth;\n    window.left = originalViewportWidth - window.width - 30;\n    await window.updateComplete;\n\n    // simulate window resize event (the component should constrain position)\n    window.dispatchEvent(new Event('resize', { bubbles: true }));\n    await window.updateComplete;\n\n    // window should still be within viewport bounds with 20px padding\n    const padding = 20;\n    expect(window.left).to.be.at.least(padding);\n    expect(window.left).to.be.at.most(\n      window.ownerDocument.defaultView.innerWidth - window.width - padding\n    );\n    expect(window.top).to.be.at.least(padding);\n  });\n});\n"]}

package/out-tsc/test/temba-flow-editor-node.test.js

@@ -3,6 +3,7 @@ import { html, fixture, expect } from '@open-wc/testing';
 import { CanvasNode } from '../src/flow/CanvasNode';
 import { stub, restore, useFakeTimers } from 'sinon';
 import { CustomEventType } from '../src/interfaces';
+import { ACTION_GROUPS } from '../src/flow/types';
 describe('EditorNode', () => {
     let editorNode;
     let mockPlumber;
@@ -177,7 +178,7 @@ describe('EditorNode', () => {
             var _a;
             const config = {
                 name: 'Test Action',
-                color: '#ff0000'
+                group: ACTION_GROUPS.send // Uses 'send' group which has color '#3498db'
             };
             const mockAction = {
                 type: 'send_msg',
@@ -189,7 +190,8 @@ describe('EditorNode', () => {
             expect(title).to.exist;
             const nameElement = title === null || title === void 0 ? void 0 : title.querySelector('.name');
             expect((_a = nameElement === null || nameElement === void 0 ? void 0 : nameElement.textContent) === null || _a === void 0 ? void 0 : _a.trim()).to.equal('Test Action');
-            expect(title === null || title === void 0 ? void 0 : title.getAttribute('style')).to.contain('background:#ff0000');
+            // The 'send' group has color '#3498db' from ACTION_GROUP_METADATA
+            expect(title === null || title === void 0 ? void 0 : title.getAttribute('style')).to.contain('background:#3498db');
         });
     });
     describe('updated lifecycle', () => {
@@ -931,5 +933,203 @@ describe('EditorNode', () => {
             // This sequence ensures JSPlumb visuals stay in sync with the flow definition
         });
     });
+    describe('add action button', () => {
+        beforeEach(async () => {
+            editorNode = new CanvasNode();
+            editorNode['plumber'] = mockPlumber;
+        });
+        it('handleAddActionClick fires AddActionRequested event', () => {
+            const mockNode = {
+                uuid: 'test-node',
+                actions: [
+                    {
+                        type: 'send_msg',
+                        uuid: 'action-1',
+                        text: 'Hello',
+                        quick_replies: []
+                    }
+                ],
+                exits: [{ uuid: 'exit-1', destination_uuid: null }]
+            };
+            editorNode['node'] = mockNode;
+            let eventFired = false;
+            let eventDetail = null;
+            editorNode.addEventListener(CustomEventType.AddActionRequested, (e) => {
+                eventFired = true;
+                eventDetail = e.detail;
+            });
+            const mockEvent = {
+                preventDefault: stub(),
+                stopPropagation: stub()
+            };
+            // Call the add action click handler
+            editorNode.handleAddActionClick(mockEvent);
+            // Verify the event was fired with correct detail
+            expect(eventFired).to.be.true;
+            expect(eventDetail).to.exist;
+            expect(eventDetail.nodeUuid).to.equal('test-node');
+            // Verify event handlers were called
+            expect(mockEvent.preventDefault).to.have.been.called;
+            expect(mockEvent.stopPropagation).to.have.been.called;
+        });
+        it('renders add action button for execute_actions nodes', () => {
+            const mockNode = {
+                uuid: 'test-node',
+                actions: [
+                    {
+                        type: 'send_msg',
+                        uuid: 'action-1',
+                        text: 'Hello',
+                        quick_replies: []
+                    }
+                ],
+                exits: [{ uuid: 'exit-1', destination_uuid: null }]
+            };
+            const mockUI = {
+                position: { left: 0, top: 0 },
+                type: 'execute_actions'
+            };
+            editorNode['node'] = mockNode;
+            editorNode['ui'] = mockUI;
+            const rendered = editorNode.render();
+            expect(rendered).to.exist;
+        });
+        it('renders correctly for non-execute_actions nodes', () => {
+            const mockNode = {
+                uuid: 'test-node',
+                actions: [],
+                exits: [{ uuid: 'exit-1', destination_uuid: null }],
+                router: {
+                    type: 'switch',
+                    categories: []
+                }
+            };
+            const mockUI = {
+                position: { left: 0, top: 0 },
+                type: 'wait_for_response'
+            };
+            editorNode['node'] = mockNode;
+            editorNode['ui'] = mockUI;
+            const rendered = editorNode.render();
+            expect(rendered).to.exist;
+        });
+    });
+    describe('router section graying', () => {
+        it('grays out split nodes when categories not included in translation', async () => {
+            const mockNode = {
+                uuid: 'split-node-1',
+                actions: [],
+                exits: [
+                    { uuid: 'exit-1', destination_uuid: null },
+                    { uuid: 'exit-2', destination_uuid: null }
+                ],
+                router: {
+                    type: 'switch',
+                    result_name: 'Response',
+                    categories: [
+                        { uuid: 'cat-1', name: 'Category 1', exit_uuid: 'exit-1' },
+                        { uuid: 'cat-2', name: 'Category 2', exit_uuid: 'exit-2' }
+                    ]
+                }
+            };
+            const mockUI = {
+                position: { left: 0, top: 0 },
+                type: 'split_by_groups'
+            };
+            // Create node
+            const editorNode = await fixture(html `<temba-flow-node
+          .node=${mockNode}
+          .ui=${mockUI}
+        ></temba-flow-node>`);
+            // Set fromStore properties directly
+            editorNode.isTranslating = true;
+            editorNode.includeCategoriesInTranslation = false;
+            editorNode.languageCode = 'spa';
+            // Force re-render
+            editorNode.requestUpdate('isTranslating');
+            editorNode.requestUpdate('includeCategoriesInTranslation');
+            await editorNode.updateComplete;
+            // Find the node element
+            const nodeElement = editorNode.querySelector('.node');
+            expect(nodeElement).to.exist;
+            // Verify it has the non-localizable class
+            expect(nodeElement === null || nodeElement === void 0 ? void 0 : nodeElement.classList.contains('non-localizable')).to.be.true;
+        });
+        it('does not gray out split nodes when categories are included in translation', async () => {
+            const mockNode = {
+                uuid: 'split-node-2',
+                actions: [],
+                exits: [
+                    { uuid: 'exit-1', destination_uuid: null },
+                    { uuid: 'exit-2', destination_uuid: null }
+                ],
+                router: {
+                    type: 'switch',
+                    result_name: 'Response',
+                    categories: [
+                        { uuid: 'cat-1', name: 'Category 1', exit_uuid: 'exit-1' },
+                        { uuid: 'cat-2', name: 'Category 2', exit_uuid: 'exit-2' }
+                    ]
+                }
+            };
+            const mockUI = {
+                position: { left: 0, top: 0 },
+                type: 'split_by_groups'
+            };
+            // Create node
+            const editorNode = await fixture(html `<temba-flow-node
+          .node=${mockNode}
+          .ui=${mockUI}
+        ></temba-flow-node>`);
+            // Set fromStore properties directly
+            editorNode.isTranslating = true;
+            editorNode.includeCategoriesInTranslation = true;
+            editorNode.languageCode = 'spa';
+            await editorNode.requestUpdate();
+            await editorNode.updateComplete;
+            // Find the node element
+            const nodeElement = editorNode.querySelector('.node');
+            expect(nodeElement).to.exist;
+            // Verify it does NOT have the non-localizable class
+            expect(nodeElement === null || nodeElement === void 0 ? void 0 : nodeElement.classList.contains('non-localizable')).to.be.false;
+        });
+        it('does not gray out split nodes when not translating', async () => {
+            const mockNode = {
+                uuid: 'split-node-3',
+                actions: [],
+                exits: [
+                    { uuid: 'exit-1', destination_uuid: null },
+                    { uuid: 'exit-2', destination_uuid: null }
+                ],
+                router: {
+                    type: 'switch',
+                    result_name: 'Response',
+                    categories: [
+                        { uuid: 'cat-1', name: 'Category 1', exit_uuid: 'exit-1' },
+                        { uuid: 'cat-2', name: 'Category 2', exit_uuid: 'exit-2' }
+                    ]
+                }
+            };
+            const mockUI = {
+                position: { left: 0, top: 0 },
+                type: 'split_by_groups'
+            };
+            // Create node
+            const editorNode = await fixture(html `<temba-flow-node
+          .node=${mockNode}
+          .ui=${mockUI}
+        ></temba-flow-node>`);
+            // Set fromStore properties directly
+            editorNode.isTranslating = false;
+            editorNode.languageCode = 'eng';
+            await editorNode.requestUpdate();
+            await editorNode.updateComplete;
+            // Find the node element
+            const nodeElement = editorNode.querySelector('.node');
+            expect(nodeElement).to.exist;
+            // Verify it does NOT have the non-localizable class
+            expect(nodeElement === null || nodeElement === void 0 ? void 0 : nodeElement.classList.contains('non-localizable')).to.be.false;
+        });
+    });
 });
 //# sourceMappingURL=temba-flow-editor-node.test.js.map