@nyaruka/temba-components 0.124.3 → 0.126.0

package/src/webchat/WebChat.ts

@@ -412,6 +412,7 @@ export class WebChat extends LitElement {
   private sendSockMessage(
     cmd: GetHistoryCmd | StartChatCmd | SendMsgCmd | Ack
   ) {
+    // eslint-disable-next-line no-console
     console.log('out', cmd);
     this.sock.send(JSON.stringify(cmd));
   }
@@ -447,6 +448,7 @@ export class WebChat extends LitElement {
     this.sock.onmessage = function (event: MessageEvent) {
       webChat.status = ChatStatus.CONNECTED;
       const msg = JSON.parse(event.data) as SockMsg;
+      // eslint-disable-next-line no-console
       console.log('in', msg);
       if (msg.type === 'chat_started') {
         const response = msg as StartChatResponse;

package/test/temba-chart.test.ts

@@ -61,11 +61,11 @@ describe('temba-chart', () => {
     const chart: TembaChart = await getChart();
 
     // Test that formatDuration property exists and defaults to false
-    expect(chart.formatDuration).to.equal(false);
+    expect(chart.yType).to.equal('count');
 
     // Test that we can set formatDuration to true
-    chart.formatDuration = true;
-    expect(chart.formatDuration).to.equal(true);
+    chart.yType = 'duration';
+    expect(chart.yType).to.equal('duration');
   });
 
   it('formats duration values correctly', async () => {
@@ -83,7 +83,7 @@ describe('temba-chart', () => {
       ]
     };
 
-    chart.formatDuration = true;
+    chart.yType = 'duration';
     chart.data = durationData;
     await chart.updateComplete;
 
@@ -91,7 +91,7 @@ describe('temba-chart', () => {
     await new Promise((resolve) => setTimeout(resolve, 100));
 
     // Test that the chart was created and has the duration formatting enabled
-    expect(chart.formatDuration).to.equal(true);
+    expect(chart.yType).to.equal('duration');
     expect(chart.chart).to.exist;
 
     // Test that the chart configuration includes the duration formatting
@@ -115,6 +115,7 @@ describe('temba-chart', () => {
       dataset: { label: 'Process Time' },
       parsed: { y: 68787 }
     };
+
     expect(tooltipCallback.call({}, mockContext)).to.equal(
       'Process Time: 19h 6m'
     );
@@ -122,7 +123,7 @@ describe('temba-chart', () => {
 
   it('formats various duration edge cases correctly', async () => {
     const chart: TembaChart = await getChart();
-    chart.formatDuration = true;
+    chart.yType = 'duration';
     chart.data = sampleData;
     await chart.updateComplete;
 
@@ -146,21 +147,40 @@ describe('temba-chart', () => {
     expect(tickCallback.call({}, 1209600, 10, [])).to.equal('14d'); // 2 weeks in seconds
   });
 
-  it('respects formatDuration property state', async () => {
-    const chart: TembaChart = await getChart();
+  it('applies xFormat when xType is time', async () => {
+    const chart: TembaChart = await getChart({
+      xType: 'time',
+      xFormat: 'DD'
+    });
+
+    chart.data = sampleData;
+    await chart.updateComplete;
+
+    // Wait for the chart to be created after data is set
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    expect(chart.chart).to.exist;
+    expect(chart.chart.options.scales.x.type).to.equal('time');
+    expect(
+      (chart.chart.options.scales.x as any).time.displayFormats.day
+    ).to.equal('DD');
+  });
 
-    // Test default state
-    expect(chart.formatDuration).to.equal(false);
+  it('does not include time config when xType is category', async () => {
+    const chart: TembaChart = await getChart({
+      xType: 'category',
+      xFormat: 'DD'
+    });
 
     chart.data = sampleData;
     await chart.updateComplete;
 
-    // Test that formatDuration property can be toggled
-    chart.formatDuration = true;
-    expect(chart.formatDuration).to.equal(true);
+    // Wait for the chart to be created after data is set
+    await new Promise((resolve) => setTimeout(resolve, 50));
 
-    chart.formatDuration = false;
-    expect(chart.formatDuration).to.equal(false);
+    expect(chart.chart).to.exist;
+    expect(chart.chart.options.scales.x.type).to.equal('category');
+    expect((chart.chart.options.scales.x as any).time).to.be.undefined;
   });
 });
 

package/test/temba-flow-node-drag.test.ts

@@ -0,0 +1,337 @@
+import { fixture, assert } from '@open-wc/testing';
+import { html } from 'lit';
+
+describe('temba-flow-node drag and drop functionality', () => {
+  it('should add drag styling and event listeners to elements', async () => {
+    // Create a simple div to test our drag functionality
+    const testElement = await fixture(html`
+      <div
+        class="node"
+        style="position: absolute; left: 100px; top: 100px; width: 200px; height: 100px; background: white; border: 1px solid #ccc; cursor: move;"
+      >
+        Test Node
+        <div class="exit" style="padding: 5px; background: red;">Exit</div>
+      </div>
+    `);
+
+    // Test that the node has the correct cursor style
+    const computedStyle = window.getComputedStyle(testElement);
+    assert.equal(computedStyle.cursor, 'move');
+
+    // Test drag event simulation
+    let dragStarted = false;
+    let dragEnded = false;
+    let newPosition = { left: 0, top: 0 };
+
+    // Simulate our drag implementation
+    let isDragging = false;
+    let dragStartPos = { x: 0, y: 0 };
+    let nodeStartPos = { left: 100, top: 100 };
+
+    const handleMouseDown = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      if (target.classList.contains('exit') || target.closest('.exit')) {
+        return;
+      }
+
+      isDragging = true;
+      dragStarted = true;
+      dragStartPos = { x: event.clientX, y: event.clientY };
+      nodeStartPos = { left: 100, top: 100 };
+      event.preventDefault();
+      event.stopPropagation();
+    };
+
+    const handleMouseMove = (event: MouseEvent) => {
+      if (!isDragging) return;
+
+      const deltaX = event.clientX - dragStartPos.x;
+      const deltaY = event.clientY - dragStartPos.y;
+
+      const newLeft = nodeStartPos.left + deltaX;
+      const newTop = nodeStartPos.top + deltaY;
+
+      // Update position
+      (testElement as HTMLElement).style.left = `${newLeft}px`;
+      (testElement as HTMLElement).style.top = `${newTop}px`;
+    };
+
+    const handleMouseUp = (event: MouseEvent) => {
+      if (!isDragging) return;
+
+      isDragging = false;
+      dragEnded = true;
+
+      const deltaX = event.clientX - dragStartPos.x;
+      const deltaY = event.clientY - dragStartPos.y;
+
+      newPosition = {
+        left: nodeStartPos.left + deltaX,
+        top: nodeStartPos.top + deltaY
+      };
+    };
+
+    // Add event listeners
+    testElement.addEventListener('mousedown', handleMouseDown);
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+
+    // Test drag from node (should work)
+    const mouseDownEvent = new MouseEvent('mousedown', {
+      clientX: 150,
+      clientY: 150,
+      bubbles: true
+    });
+    testElement.dispatchEvent(mouseDownEvent);
+
+    assert.isTrue(dragStarted, 'Drag should start when clicking on node');
+
+    const mouseMoveEvent = new MouseEvent('mousemove', {
+      clientX: 200,
+      clientY: 200,
+      bubbles: true
+    });
+    document.dispatchEvent(mouseMoveEvent);
+
+    const mouseUpEvent = new MouseEvent('mouseup', {
+      clientX: 200,
+      clientY: 200,
+      bubbles: true
+    });
+    document.dispatchEvent(mouseUpEvent);
+
+    assert.isTrue(dragEnded, 'Drag should end on mouse up');
+    assert.equal(
+      newPosition.left,
+      150,
+      'New left position should be calculated correctly'
+    );
+    assert.equal(
+      newPosition.top,
+      150,
+      'New top position should be calculated correctly'
+    );
+
+    // Test that position was visually updated
+    assert.equal((testElement as HTMLElement).style.left, '150px');
+    assert.equal((testElement as HTMLElement).style.top, '150px');
+
+    // Reset for next test
+    dragStarted = false;
+    dragEnded = false;
+
+    // Test drag from exit element (should not work)
+    const exitElement = testElement.querySelector('.exit') as HTMLElement;
+    const exitMouseDownEvent = new MouseEvent('mousedown', {
+      clientX: 150,
+      clientY: 150,
+      bubbles: true
+    });
+    exitElement.dispatchEvent(exitMouseDownEvent);
+
+    assert.isFalse(
+      dragStarted,
+      'Drag should not start when clicking on exit element'
+    );
+
+    // Clean up
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+  });
+
+  it('should snap node positions to 20px grid during drag and drop', async () => {
+    // Create a test node element
+    const testElement = await fixture(html`
+      <div
+        class="node"
+        style="position: absolute; left: 100px; top: 100px; width: 200px; height: 100px; background: white; border: 1px solid #ccc; cursor: move;"
+      >
+        Test Node for Grid Snapping
+      </div>
+    `);
+
+    // Helper function to snap values to 20px grid (same as implementation)
+    const snapToGrid = (value: number): number => {
+      return Math.round(value / 20) * 20;
+    };
+
+    // Simulate drag implementation with grid snapping
+    let isDragging = false;
+    let dragStartPos = { x: 0, y: 0 };
+    let nodeStartPos = { left: 100, top: 100 };
+    let finalPosition = { left: 0, top: 0 };
+
+    const handleMouseDown = (event: MouseEvent) => {
+      isDragging = true;
+      dragStartPos = { x: event.clientX, y: event.clientY };
+      // Get current position from element style
+      const currentLeft =
+        parseInt((testElement as HTMLElement).style.left) || 0;
+      const currentTop = parseInt((testElement as HTMLElement).style.top) || 0;
+      nodeStartPos = { left: currentLeft, top: currentTop };
+      event.preventDefault();
+      event.stopPropagation();
+    };
+
+    const handleMouseMove = (event: MouseEvent) => {
+      if (!isDragging) return;
+
+      const deltaX = event.clientX - dragStartPos.x;
+      const deltaY = event.clientY - dragStartPos.y;
+
+      const newLeft = nodeStartPos.left + deltaX;
+      const newTop = nodeStartPos.top + deltaY;
+
+      // Snap to 20px grid
+      const snappedLeft = snapToGrid(newLeft);
+      const snappedTop = snapToGrid(newTop);
+
+      // Update position with snapped values
+      (testElement as HTMLElement).style.left = `${snappedLeft}px`;
+      (testElement as HTMLElement).style.top = `${snappedTop}px`;
+    };
+
+    const handleMouseUp = (event: MouseEvent) => {
+      if (!isDragging) return;
+      isDragging = false;
+
+      const deltaX = event.clientX - dragStartPos.x;
+      const deltaY = event.clientY - dragStartPos.y;
+
+      const newLeft = nodeStartPos.left + deltaX;
+      const newTop = nodeStartPos.top + deltaY;
+
+      // Snap final position to grid
+      finalPosition = {
+        left: snapToGrid(newLeft),
+        top: snapToGrid(newTop)
+      };
+    };
+
+    // Add event listeners
+    testElement.addEventListener('mousedown', handleMouseDown);
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+
+    // Test Case 1: Drag to position that should snap to grid
+    // Starting at (100, 100), drag by (33, 27) pixels
+    // Should result in (133, 127) -> snapped to (140, 120)
+    const mouseDownEvent1 = new MouseEvent('mousedown', {
+      clientX: 150,
+      clientY: 150,
+      bubbles: true
+    });
+    testElement.dispatchEvent(mouseDownEvent1);
+
+    const mouseMoveEvent1 = new MouseEvent('mousemove', {
+      clientX: 183, // 150 + 33
+      clientY: 177, // 150 + 27
+      bubbles: true
+    });
+    document.dispatchEvent(mouseMoveEvent1);
+
+    // Check that position is snapped during drag
+    assert.equal((testElement as HTMLElement).style.left, '140px');
+    assert.equal((testElement as HTMLElement).style.top, '120px');
+
+    const mouseUpEvent1 = new MouseEvent('mouseup', {
+      clientX: 183,
+      clientY: 177,
+      bubbles: true
+    });
+    document.dispatchEvent(mouseUpEvent1);
+
+    // Check final snapped position
+    assert.equal(
+      finalPosition.left,
+      140,
+      'Final left position should be snapped to 140px'
+    );
+    assert.equal(
+      finalPosition.top,
+      120,
+      'Final top position should be snapped to 120px'
+    );
+
+    // Test Case 2: Test different snap scenarios
+    // Reset position
+    nodeStartPos = { left: 60, top: 80 };
+    (testElement as HTMLElement).style.left = '60px';
+    (testElement as HTMLElement).style.top = '80px';
+
+    const mouseDownEvent2 = new MouseEvent('mousedown', {
+      clientX: 100,
+      clientY: 100,
+      bubbles: true
+    });
+    testElement.dispatchEvent(mouseDownEvent2);
+
+    // Drag by (15, 25) -> should snap to nearest 20px grid
+    // (60 + 15, 80 + 25) = (75, 105) -> snapped to (80, 100)
+    const mouseMoveEvent2 = new MouseEvent('mousemove', {
+      clientX: 115, // 100 + 15
+      clientY: 125, // 100 + 25
+      bubbles: true
+    });
+    document.dispatchEvent(mouseMoveEvent2);
+
+    assert.equal((testElement as HTMLElement).style.left, '80px');
+    assert.equal((testElement as HTMLElement).style.top, '100px');
+
+    const mouseUpEvent2 = new MouseEvent('mouseup', {
+      clientX: 115,
+      clientY: 125,
+      bubbles: true
+    });
+    document.dispatchEvent(mouseUpEvent2);
+
+    assert.equal(
+      finalPosition.left,
+      80,
+      'Final left position should be snapped to 80px'
+    );
+    assert.equal(
+      finalPosition.top,
+      100,
+      'Final top position should be snapped to 100px'
+    );
+
+    // Test Case 3: Test exact grid positions remain unchanged
+    nodeStartPos = { left: 120, top: 160 }; // Already on grid
+    (testElement as HTMLElement).style.left = '120px';
+    (testElement as HTMLElement).style.top = '160px';
+
+    const mouseDownEvent3 = new MouseEvent('mousedown', {
+      clientX: 200,
+      clientY: 200,
+      bubbles: true
+    });
+    testElement.dispatchEvent(mouseDownEvent3);
+
+    // Small movement that should stay on same grid position
+    const mouseMoveEvent3 = new MouseEvent('mousemove', {
+      clientX: 202, // +2 pixels
+      clientY: 203, // +3 pixels
+      bubbles: true
+    });
+    document.dispatchEvent(mouseMoveEvent3);
+
+    // (120 + 2, 160 + 3) = (122, 163) -> snapped to (120, 160)
+    assert.equal((testElement as HTMLElement).style.left, '120px');
+    assert.equal((testElement as HTMLElement).style.top, '160px');
+
+    const mouseUpEvent3 = new MouseEvent('mouseup', {
+      clientX: 202,
+      clientY: 203,
+      bubbles: true
+    });
+    document.dispatchEvent(mouseUpEvent3);
+
+    assert.equal(finalPosition.left, 120, 'Position should remain on grid');
+    assert.equal(finalPosition.top, 160, 'Position should remain on grid');
+
+    // Clean up
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+  });
+});

package/test/temba-formfield.test.ts

@@ -0,0 +1,121 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import { FormField } from '../src/formfield/FormField';
+import { assertScreenshot, getClip } from './utils.test';
+
+describe('temba-field', () => {
+  it('renders field with plain text errors', async () => {
+    const formField: FormField = await fixture(html`
+      <temba-field
+        label="Test Field"
+        name="test"
+        .errors=${['This is a plain text error', 'Another error message']}
+      >
+        <input type="text" />
+      </temba-field>
+    `);
+
+    await formField.updateComplete;
+
+    // Check that errors are rendered
+    const errorElements = formField.shadowRoot.querySelectorAll('.alert-error');
+    expect(errorElements.length).to.equal(2);
+    expect(errorElements[0].textContent.trim()).to.equal(
+      'This is a plain text error'
+    );
+    expect(errorElements[1].textContent.trim()).to.equal(
+      'Another error message'
+    );
+
+    await assertScreenshot('formfield/plain-text-errors', getClip(formField));
+  });
+
+  it('renders field with markdown errors', async () => {
+    const formField: FormField = await fixture(html`
+      <temba-field
+        label="Test Field"
+        name="test"
+        .errors=${[
+          'This is **bold** text',
+          'This has a [link](https://example.com)',
+          'This is *italic* and **bold** with a [link](https://example.com)'
+        ]}
+      >
+        <input type="text" />
+      </temba-field>
+    `);
+
+    await formField.updateComplete;
+
+    // Check that errors are rendered
+    const errorElements = formField.shadowRoot.querySelectorAll('.alert-error');
+    expect(errorElements.length).to.equal(3);
+
+    // First error should have bold text
+    const firstError = errorElements[0];
+    const boldElement = firstError.querySelector('strong');
+    expect(boldElement).to.not.be.null;
+    expect(boldElement.textContent).to.equal('bold');
+
+    // Second error should have a link
+    const secondError = errorElements[1];
+    const linkElement = secondError.querySelector('a');
+    expect(linkElement).to.not.be.null;
+    expect(linkElement.getAttribute('href')).to.equal('https://example.com');
+    expect(linkElement.textContent).to.equal('link');
+
+    // Third error should have both bold, italic, and link
+    const thirdError = errorElements[2];
+    const thirdBoldElement = thirdError.querySelector('strong');
+    const thirdItalicElement = thirdError.querySelector('em');
+    const thirdLinkElement = thirdError.querySelector('a');
+    expect(thirdBoldElement).to.not.be.null;
+    expect(thirdItalicElement).to.not.be.null;
+    expect(thirdLinkElement).to.not.be.null;
+
+    await assertScreenshot('formfield/markdown-errors', getClip(formField));
+  });
+
+  it('renders field without errors', async () => {
+    const formField: FormField = await fixture(html`
+      <temba-field label="Test Field" name="test">
+        <input type="text" />
+      </temba-field>
+    `);
+
+    await formField.updateComplete;
+
+    // Check that no errors are rendered
+    const errorElements = formField.shadowRoot.querySelectorAll('.alert-error');
+    expect(errorElements.length).to.equal(0);
+
+    await assertScreenshot('formfield/no-errors', getClip(formField));
+  });
+
+  it('renders in widget-only mode with errors', async () => {
+    const formField: FormField = await fixture(html`
+      <temba-field
+        widget_only
+        .errors=${['Widget only **error** with [link](https://example.com)']}
+      >
+        <input type="text" />
+      </temba-field>
+    `);
+
+    await formField.updateComplete;
+
+    // Check that error is rendered in widget-only mode
+    const errorElements = formField.shadowRoot.querySelectorAll('.alert-error');
+    expect(errorElements.length).to.equal(1);
+
+    const errorElement = errorElements[0];
+    const boldElement = errorElement.querySelector('strong');
+    const linkElement = errorElement.querySelector('a');
+    expect(boldElement).to.not.be.null;
+    expect(linkElement).to.not.be.null;
+
+    await assertScreenshot(
+      'formfield/widget-only-markdown-errors',
+      getClip(formField)
+    );
+  });
+});

package/test/temba-integration-markdown.test.ts

@@ -0,0 +1,45 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import { Checkbox } from '../src/checkbox/Checkbox';
+import { assertScreenshot, getClip } from './utils.test';
+
+describe('FormElement markdown integration', () => {
+  it('renders checkbox with markdown errors', async () => {
+    const checkbox: Checkbox = await fixture(html`
+      <temba-checkbox
+        label="Accept Terms"
+        .errors=${[
+          'Please read the **terms and conditions** at [this link](https://example.com)',
+          'This field *requires* acceptance'
+        ]}
+      ></temba-checkbox>
+    `);
+
+    await checkbox.updateComplete;
+
+    // Check that errors are rendered with markdown
+    const errorElements = checkbox.shadowRoot
+      .querySelectorAll('temba-field')[0]
+      .shadowRoot.querySelectorAll('.alert-error');
+    expect(errorElements.length).to.equal(2);
+
+    // First error should have bold text and link
+    const firstError = errorElements[0];
+    const boldElement = firstError.querySelector('strong');
+    const linkElement = firstError.querySelector('a');
+    expect(boldElement).to.not.be.null;
+    expect(boldElement.textContent).to.equal('terms and conditions');
+    expect(linkElement).to.not.be.null;
+    expect(linkElement.getAttribute('href')).to.equal('https://example.com');
+
+    // Second error should have italic text
+    const secondError = errorElements[1];
+    const italicElement = secondError.querySelector('em');
+    expect(italicElement).to.not.be.null;
+    expect(italicElement.textContent).to.equal('requires');
+
+    await assertScreenshot(
+      'integration/checkbox-markdown-errors',
+      getClip(checkbox)
+    );
+  });
+});

package/test/temba-select.test.ts

@@ -5,6 +5,7 @@ import { Options } from '../src/options/Options';
 import { Select, SelectOption } from '../src/select/Select';
 import {
   assertScreenshot,
+  delay,
   getClip,
   getOptions,
   loadStore,
@@ -660,6 +661,22 @@ describe('temba-select', () => {
 
       await openSelect(clock, select);
 
+      // Wait for pagination to complete - keep checking until fetching is false
+      // and we have the expected number of results (15 = 3 pages * 5 items)
+      let attempts = 0;
+      const maxAttempts = 10;
+      while (select.fetching || select.visibleOptions.length < 15) {
+        if (attempts >= maxAttempts) {
+          throw new Error(
+            `Pagination did not complete after ${maxAttempts} attempts. fetching: ${select.fetching}, visibleOptions: ${select.visibleOptions.length}`
+          );
+        }
+        await select.updateComplete;
+        clock.runAll();
+        attempts++;
+        await delay(100);
+      }
+
       // should have all three pages visible right away
       assert.equal(select.visibleOptions.length, 15);
     });