@nyaruka/temba-components 0.131.1 → 0.131.3

package/out-tsc/test/temba-omnibox.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"temba-omnibox.test.js","sourceRoot":"","sources":["../../test/temba-omnibox.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, assert } from '@open-wc/testing';\nimport { Omnibox } from '../src/form/select/Omnibox';\nimport { assertScreenshot, getClip, openAndClick } from './utils.test';\nimport { useFakeTimers, spy } from 'sinon';\n\nexport const getHTML = (attrs: any = { name: 'recipients' }): string => {\n  const selectHTML = `\n  <temba-omnibox${Object.keys(attrs)\n    .map((name: string) => {\n      // check if it's a string attribute\n      if (typeof attrs[name] === 'string') {\n        return ` ${name}=\"${attrs[name].replace(/\"/g, '&quot;')}\"`;\n      }\n      return ` ${name}=\"${attrs[name]}\"`;\n    })\n    .join(' ')}>\n  </temba-select>`;\n  return selectHTML;\n};\n\nexport const createOmnibox = async (\n  clock: any,\n  attrs: any = {}\n): Promise<Omnibox> => {\n  const parentNode = document.createElement('div');\n  parentNode.setAttribute('style', 'width: 400px;');\n\n  const omnibox: Omnibox = await fixture(getHTML(attrs), { parentNode });\n  clock.runAll();\n  await omnibox.updateComplete;\n  return omnibox;\n};\n\ndescribe('temba-omnibox', () => {\n  let clock: any;\n  beforeEach(function () {\n    clock = useFakeTimers();\n    setViewport({ width: 500, height: 1000, deviceScaleFactor: 2 });\n  });\n\n  afterEach(function () {\n    clock.restore();\n  });\n\n  it('can be created', async () => {\n    const omnibox: Omnibox = await fixture(\n      getHTML({ endpoint: '/test-assets/select/omnibox.json' })\n    );\n    assert.instanceOf(omnibox, Omnibox);\n  });\n\n  it('fires change events on selection', async () => {\n    const omnibox: Omnibox = await createOmnibox(clock, {\n      endpoint: '/test-assets/select/omnibox.json'\n    });\n\n    const changeEvent = spy();\n    omnibox.addEventListener('change', changeEvent);\n\n    clock.runAll();\n    await omnibox.updateComplete;\n    clock.runAll();\n\n    await openAndClick(clock, omnibox, 0);\n    clock.runAll();\n    assert(changeEvent.called, 'change event not fired');\n\n    await assertScreenshot('omnibox/selected', getClip(omnibox));\n  });\n});\n"]}
+{"version":3,"file":"temba-omnibox.test.js","sourceRoot":"","sources":["../../test/temba-omnibox.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, assert } from '@open-wc/testing';\nimport { Omnibox } from '../src/form/select/Omnibox';\nimport { assertScreenshot, getClip, openAndClick } from './utils.test';\nimport { useFakeTimers, spy } from 'sinon';\n\nexport const getHTML = (attrs: any = { name: 'recipients' }): string => {\n  const selectHTML = `\n  <temba-omnibox${Object.keys(attrs)\n    .map((name: string) => {\n      // check if it's a string attribute\n      if (typeof attrs[name] === 'string') {\n        return ` ${name}=\"${attrs[name].replace(/\"/g, '&quot;')}\"`;\n      }\n      return ` ${name}=\"${attrs[name]}\"`;\n    })\n    .join(' ')}>\n  </temba-select>`;\n  return selectHTML;\n};\n\nexport const createOmnibox = async (\n  clock: any,\n  attrs: any = {}\n): Promise<Omnibox> => {\n  const parentNode = document.createElement('div');\n  parentNode.setAttribute('style', 'width: 400px;');\n\n  const omnibox: Omnibox = await fixture(getHTML(attrs), { parentNode });\n  clock.runAll();\n  await omnibox.updateComplete;\n  return omnibox;\n};\n\ndescribe('temba-omnibox', () => {\n  let clock: any;\n  beforeEach(function () {\n    clock = useFakeTimers();\n    setViewport({ width: 500, height: 1000, deviceScaleFactor: 2 });\n  });\n\n  afterEach(function () {\n    clock.restore();\n  });\n\n  it('can be created', async () => {\n    const omnibox: Omnibox = await fixture(\n      getHTML({ endpoint: '/test-assets/select/omnibox.json' })\n    );\n    assert.instanceOf(omnibox, Omnibox);\n  });\n\n  // TODO: make this pass reliably on CI\n  xit('fires change events on selection', async () => {\n    const omnibox: Omnibox = await createOmnibox(clock, {\n      endpoint: '/test-assets/select/omnibox.json'\n    });\n\n    const changeEvent = spy();\n    omnibox.addEventListener('change', changeEvent);\n\n    clock.runAll();\n    await omnibox.updateComplete;\n    clock.runAll();\n\n    await openAndClick(clock, omnibox, 0);\n    clock.runAll();\n    assert(changeEvent.called, 'change event not fired');\n\n    await assertScreenshot('omnibox/selected', getClip(omnibox));\n  });\n});\n"]}

package/out-tsc/test/temba-sortable-list.test.js

@@ -120,5 +120,56 @@ describe('temba-sortable-list', () => {
         const changeEvent = await updated;
         expect(changeEvent.type).to.equal('change');
     });
+    it('detects external drag when dragging outside container', async () => {
+        const list = await createSorter(BORING_LIST);
+        list.externalDrag = true;
+        await list.updateComplete;
+        const bounds = list.getBoundingClientRect();
+        // track external drag events
+        let externalDragFired = false;
+        let internalDragFired = false;
+        list.addEventListener(CustomEventType.DragExternal, () => {
+            externalDragFired = true;
+        });
+        list.addEventListener(CustomEventType.DragInternal, () => {
+            internalDragFired = true;
+        });
+        // start dragging an item
+        await moveMouse(bounds.left + 20, bounds.bottom - 10);
+        await mouseDown();
+        // drag outside the container (far to the right)
+        await moveMouse(bounds.right + 100, bounds.top + 10);
+        clock.runAll();
+        // should have fired external drag event
+        expect(externalDragFired).to.be.true;
+        // drag back inside
+        externalDragFired = false; // reset
+        await moveMouse(bounds.left + 20, bounds.top + 10);
+        clock.runAll();
+        // should have fired internal drag event
+        expect(internalDragFired).to.be.true;
+        // clean up
+        await mouseUp();
+        clock.runAll();
+    });
+    it('fires DragStop with isExternal=true when dropped outside container', async () => {
+        const list = await createSorter(BORING_LIST);
+        list.externalDrag = true;
+        await list.updateComplete;
+        const bounds = list.getBoundingClientRect();
+        // start dragging an item
+        await moveMouse(bounds.left + 20, bounds.bottom - 10);
+        await mouseDown();
+        // drag outside the container
+        await moveMouse(bounds.right + 100, bounds.top + 10);
+        clock.runAll();
+        // listen for drag stop event
+        const dragStop = oneEvent(list, CustomEventType.DragStop, false);
+        // drop outside
+        await mouseUp();
+        clock.runAll();
+        const dragStopEvent = await dragStop;
+        expect(dragStopEvent.detail.isExternal).to.be.true;
+    });
 });
 //# sourceMappingURL=temba-sortable-list.test.js.map

package/out-tsc/test/temba-sortable-list.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"temba-sortable-list.test.js","sourceRoot":"","sources":["../../test/temba-sortable-list.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, fixture, oneEvent } from '@open-wc/testing';\nimport { html, TemplateResult } from 'lit';\nimport { CustomEventType } from '../src/interfaces';\nimport { SortableList } from '../src/list/SortableList';\nimport { assertScreenshot, getClip } from './utils.test';\nimport Sinon, { useFakeTimers } from 'sinon';\n\nconst BORING_LIST = html`\n  <temba-sortable-list>\n    <style>\n      .sortable {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        text-align: center;\n        height: 20px;\n      }\n    </style>\n    <div class=\"sortable\" id=\"chicken\" style=\"\">Chicken</div>\n    <div class=\"sortable\" id=\"fish\">Fish</div>\n  </temba-sortable-list>\n`;\n\nconst HORIZONTAL_LIST = html`\n  <temba-sortable-list horizontal>\n    <style>\n      .sortable {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        text-align: center;\n        height: 20px;\n        width: 50px;\n      }\n    </style>\n    <div class=\"sortable\" id=\"red\">Red</div>\n    <div class=\"sortable\" id=\"blue\">Blue</div>\n    <div class=\"sortable\" id=\"green\">Green</div>\n  </temba-sortable-list>\n`;\n\nconst createSorter = async (def: TemplateResult) => {\n  const parentNode = document.createElement('div');\n  parentNode.setAttribute('style', 'width: 100px;');\n  return (await fixture(def, { parentNode })) as SortableList;\n};\n\ndescribe('temba-sortable-list', () => {\n  let clock: Sinon.SinonFakeTimers;\n  beforeEach(function () {\n    clock = useFakeTimers();\n    clock.runAll();\n  });\n\n  afterEach(function () {\n    clock.restore();\n  });\n\n  it('renders default', async () => {\n    const list: SortableList = await createSorter(BORING_LIST);\n    await assertScreenshot('list/sortable', getClip(list));\n  });\n\n  it('can get ids of sortable elements', async () => {\n    const list: SortableList = await createSorter(BORING_LIST);\n    await list.updateComplete;\n\n    const ids = list.getIds();\n    expect(ids).to.deep.equal(['chicken', 'fish']);\n  });\n\n  it('works with horizontal layout', async () => {\n    const list: SortableList = await createSorter(HORIZONTAL_LIST);\n    await list.updateComplete;\n\n    const ids = list.getIds();\n    expect(ids).to.deep.equal(['red', 'blue', 'green']);\n\n    // Test horizontal drag behavior\n    const bounds = list.getBoundingClientRect();\n    const orderChanged = oneEvent(list, CustomEventType.OrderChanged, false);\n\n    // Drag the first item (red) to after the second item (blue)\n    await moveMouse(bounds.left + 10, bounds.top + 10);\n    await mouseDown();\n    await moveMouse(bounds.left + 80, bounds.top + 10);\n    await mouseUp();\n    clock.runAll();\n\n    const orderEvent = await orderChanged;\n    expect(orderEvent.detail).to.deep.equal({\n      swap: [0, 2]\n    });\n  });\n\n  it('handles prepareGhost callback', async () => {\n    const list: SortableList = await createSorter(BORING_LIST);\n    let ghostPrepared = false;\n\n    list.prepareGhost = (ghost: HTMLElement) => {\n      ghostPrepared = true;\n      ghost.style.backgroundColor = 'red';\n    };\n\n    const bounds = list.getBoundingClientRect();\n\n    // Start dragging to trigger ghost creation\n    await moveMouse(bounds.left + 20, bounds.bottom - 10);\n    await mouseDown();\n    await moveMouse(bounds.left + 30, bounds.bottom - 10);\n\n    expect(ghostPrepared).to.be.true;\n\n    // Clean up\n    await mouseUp();\n    clock.runAll();\n  });\n\n  it('drags', async () => {\n    const list: SortableList = await createSorter(BORING_LIST);\n    const updated = oneEvent(list, 'change', false);\n\n    const bounds = list.getBoundingClientRect();\n\n    await moveMouse(bounds.left + 20, bounds.bottom - 10);\n    await mouseDown();\n    await moveMouse(bounds.left + 20, bounds.top + 5);\n\n    // should be hovered\n    await assertScreenshot('list/sortable-dragging', getClip(list));\n\n    // now lets drop - this will fire the order changed event\n    const orderChanged = oneEvent(list, CustomEventType.OrderChanged, false);\n    await mouseUp();\n    clock.runAll();\n    await list.updateComplete;\n    clock.runAll();\n\n    // we should fire an order changed event on drop\n    const orderEvent = await orderChanged;\n    expect(orderEvent.detail).to.deep.equal({\n      swap: [1, 0]\n    });\n\n    await assertScreenshot('list/sortable-dropped', getClip(list));\n\n    // we should fire a change event\n    const changeEvent = await updated;\n    expect(changeEvent.type).to.equal('change');\n  });\n});\n"]}
+{"version":3,"file":"temba-sortable-list.test.js","sourceRoot":"","sources":["../../test/temba-sortable-list.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACzD,OAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE7C,MAAM,WAAW,GAAG,IAAI,CAAA;;;;;;;;;;;;;;CAcvB,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;CAgB3B,CAAC;AAEF,MAAM,YAAY,GAAG,KAAK,EAAE,GAAmB,EAAE,EAAE;IACjD,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACjD,UAAU,CAAC,YAAY,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;IAClD,OAAO,CAAC,MAAM,OAAO,CAAC,GAAG,EAAE,EAAE,UAAU,EAAE,CAAC,CAAiB,CAAC;AAC9D,CAAC,CAAC;AAEF,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,IAAI,KAA4B,CAAC;IACjC,UAAU,CAAC;QACT,KAAK,GAAG,aAAa,EAAE,CAAC;QACxB,KAAK,CAAC,MAAM,EAAE,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC;QACR,KAAK,CAAC,OAAO,EAAE,CAAC;IAClB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iBAAiB,EAAE,KAAK,IAAI,EAAE;QAC/B,MAAM,IAAI,GAAiB,MAAM,YAAY,CAAC,WAAW,CAAC,CAAC;QAC3D,MAAM,gBAAgB,CAAC,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;IACzD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,IAAI,GAAiB,MAAM,YAAY,CAAC,WAAW,CAAC,CAAC;QAC3D,MAAM,IAAI,CAAC,cAAc,CAAC;QAE1B,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAC1B,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,IAAI,GAAiB,MAAM,YAAY,CAAC,eAAe,CAAC,CAAC;QAC/D,MAAM,IAAI,CAAC,cAAc,CAAC;QAE1B,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAC1B,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;QAEpD,gCAAgC;QAChC,MAAM,MAAM,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC5C,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,EAAE,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;QAEzE,4DAA4D;QAC5D,MAAM,SAAS,CAAC,MAAM,CAAC,IAAI,GAAG,EAAE,EAAE,MAAM,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC;QACnD,MAAM,SAAS,EAAE,CAAC;QAClB,MAAM,SAAS,CAAC,MAAM,CAAC,IAAI,GAAG,EAAE,EAAE,MAAM,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC;QACnD,MAAM,OAAO,EAAE,CAAC;QAChB,KAAK,CAAC,MAAM,EAAE,CAAC;QAEf,MAAM,UAAU,GAAG,MAAM,YAAY,CAAC;QACtC,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC;YACtC,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;SACb,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;QAC7C,MAAM,IAAI,GAAiB,MAAM,YAAY,CAAC,WAAW,CAAC,CAAC;QAC3D,IAAI,aAAa,GAAG,KAAK,CAAC;QAE1B,IAAI,CAAC,YAAY,GAAG,CAAC,KAAkB,EAAE,EAAE;YACzC,aAAa,GAAG,IAAI,CAAC;YACrB,KAAK,CAAC,KAAK,CAAC,eAAe,GAAG,KAAK,CAAC;QACtC,CAAC,CAAC;QAEF,MAAM,MAAM,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAE5C,2CAA2C;QAC3C,MAAM,SAAS,CAAC,MAAM,CAAC,IAAI,GAAG,EAAE,EAAE,MAAM,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;QACtD,MAAM,SAAS,EAAE,CAAC;QAClB,MAAM,SAAS,CAAC,MAAM,CAAC,IAAI,GAAG,EAAE,EAAE,MAAM,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;QAEtD,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QAEjC,WAAW;QACX,MAAM,OAAO,EAAE,CAAC;QAChB,KAAK,CAAC,MAAM,EAAE,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,OAAO,EAAE,KAAK,IAAI,EAAE;QACrB,MAAM,IAAI,GAAiB,MAAM,YAAY,CAAC,WAAW,CAAC,CAAC;QAC3D,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;QAEhD,MAAM,MAAM,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAE5C,MAAM,SAAS,CAAC,MAAM,CAAC,IAAI,GAAG,EAAE,EAAE,MAAM,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;QACtD,MAAM,SAAS,EAAE,CAAC;QAClB,MAAM,SAAS,CAAC,MAAM,CAAC,IAAI,GAAG,EAAE,EAAE,MAAM,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;QAElD,oBAAoB;QACpB,MAAM,gBAAgB,CAAC,wBAAwB,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;QAEhE,yDAAyD;QACzD,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,EAAE,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;QACzE,MAAM,OAAO,EAAE,CAAC;QAChB,KAAK,CAAC,MAAM,EAAE,CAAC;QACf,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,KAAK,CAAC,MAAM,EAAE,CAAC;QAEf,gDAAgD;QAChD,MAAM,UAAU,GAAG,MAAM,YAAY,CAAC;QACtC,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC;YACtC,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;SACb,CAAC,CAAC;QAEH,MAAM,gBAAgB,CAAC,uBAAuB,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;QAE/D,gCAAgC;QAChC,MAAM,WAAW,GAAG,MAAM,OAAO,CAAC;QAClC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uDAAuD,EAAE,KAAK,IAAI,EAAE;QACrE,MAAM,IAAI,GAAiB,MAAM,YAAY,CAAC,WAAW,CAAC,CAAC;QAC3D,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,MAAM,IAAI,CAAC,cAAc,CAAC;QAE1B,MAAM,MAAM,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAE5C,6BAA6B;QAC7B,IAAI,iBAAiB,GAAG,KAAK,CAAC;QAC9B,IAAI,iBAAiB,GAAG,KAAK,CAAC;QAE9B,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,YAAY,EAAE,GAAG,EAAE;YACvD,iBAAiB,GAAG,IAAI,CAAC;QAC3B,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,YAAY,EAAE,GAAG,EAAE;YACvD,iBAAiB,GAAG,IAAI,CAAC;QAC3B,CAAC,CAAC,CAAC;QAEH,yBAAyB;QACzB,MAAM,SAAS,CAAC,MAAM,CAAC,IAAI,GAAG,EAAE,EAAE,MAAM,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;QACtD,MAAM,SAAS,EAAE,CAAC;QAElB,gDAAgD;QAChD,MAAM,SAAS,CAAC,MAAM,CAAC,KAAK,GAAG,GAAG,EAAE,MAAM,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC;QACrD,KAAK,CAAC,MAAM,EAAE,CAAC;QAEf,wCAAwC;QACxC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QAErC,mBAAmB;QACnB,iBAAiB,GAAG,KAAK,CAAC,CAAC,QAAQ;QACnC,MAAM,SAAS,CAAC,MAAM,CAAC,IAAI,GAAG,EAAE,EAAE,MAAM,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC;QACnD,KAAK,CAAC,MAAM,EAAE,CAAC;QAEf,wCAAwC;QACxC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QAErC,WAAW;QACX,MAAM,OAAO,EAAE,CAAC;QAChB,KAAK,CAAC,MAAM,EAAE,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oEAAoE,EAAE,KAAK,IAAI,EAAE;QAClF,MAAM,IAAI,GAAiB,MAAM,YAAY,CAAC,WAAW,CAAC,CAAC;QAC3D,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,MAAM,IAAI,CAAC,cAAc,CAAC;QAE1B,MAAM,MAAM,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAE5C,yBAAyB;QACzB,MAAM,SAAS,CAAC,MAAM,CAAC,IAAI,GAAG,EAAE,EAAE,MAAM,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;QACtD,MAAM,SAAS,EAAE,CAAC;QAElB,6BAA6B;QAC7B,MAAM,SAAS,CAAC,MAAM,CAAC,KAAK,GAAG,GAAG,EAAE,MAAM,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC;QACrD,KAAK,CAAC,MAAM,EAAE,CAAC;QAEf,6BAA6B;QAC7B,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,EAAE,eAAe,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QAEjE,eAAe;QACf,MAAM,OAAO,EAAE,CAAC;QAChB,KAAK,CAAC,MAAM,EAAE,CAAC;QAEf,MAAM,aAAa,GAAG,MAAM,QAAQ,CAAC;QACrC,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IACrD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect, fixture, oneEvent } from '@open-wc/testing';\nimport { html, TemplateResult } from 'lit';\nimport { CustomEventType } from '../src/interfaces';\nimport { SortableList } from '../src/list/SortableList';\nimport { assertScreenshot, getClip } from './utils.test';\nimport Sinon, { useFakeTimers } from 'sinon';\n\nconst BORING_LIST = html`\n  <temba-sortable-list>\n    <style>\n      .sortable {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        text-align: center;\n        height: 20px;\n      }\n    </style>\n    <div class=\"sortable\" id=\"chicken\" style=\"\">Chicken</div>\n    <div class=\"sortable\" id=\"fish\">Fish</div>\n  </temba-sortable-list>\n`;\n\nconst HORIZONTAL_LIST = html`\n  <temba-sortable-list horizontal>\n    <style>\n      .sortable {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        text-align: center;\n        height: 20px;\n        width: 50px;\n      }\n    </style>\n    <div class=\"sortable\" id=\"red\">Red</div>\n    <div class=\"sortable\" id=\"blue\">Blue</div>\n    <div class=\"sortable\" id=\"green\">Green</div>\n  </temba-sortable-list>\n`;\n\nconst createSorter = async (def: TemplateResult) => {\n  const parentNode = document.createElement('div');\n  parentNode.setAttribute('style', 'width: 100px;');\n  return (await fixture(def, { parentNode })) as SortableList;\n};\n\ndescribe('temba-sortable-list', () => {\n  let clock: Sinon.SinonFakeTimers;\n  beforeEach(function () {\n    clock = useFakeTimers();\n    clock.runAll();\n  });\n\n  afterEach(function () {\n    clock.restore();\n  });\n\n  it('renders default', async () => {\n    const list: SortableList = await createSorter(BORING_LIST);\n    await assertScreenshot('list/sortable', getClip(list));\n  });\n\n  it('can get ids of sortable elements', async () => {\n    const list: SortableList = await createSorter(BORING_LIST);\n    await list.updateComplete;\n\n    const ids = list.getIds();\n    expect(ids).to.deep.equal(['chicken', 'fish']);\n  });\n\n  it('works with horizontal layout', async () => {\n    const list: SortableList = await createSorter(HORIZONTAL_LIST);\n    await list.updateComplete;\n\n    const ids = list.getIds();\n    expect(ids).to.deep.equal(['red', 'blue', 'green']);\n\n    // Test horizontal drag behavior\n    const bounds = list.getBoundingClientRect();\n    const orderChanged = oneEvent(list, CustomEventType.OrderChanged, false);\n\n    // Drag the first item (red) to after the second item (blue)\n    await moveMouse(bounds.left + 10, bounds.top + 10);\n    await mouseDown();\n    await moveMouse(bounds.left + 80, bounds.top + 10);\n    await mouseUp();\n    clock.runAll();\n\n    const orderEvent = await orderChanged;\n    expect(orderEvent.detail).to.deep.equal({\n      swap: [0, 2]\n    });\n  });\n\n  it('handles prepareGhost callback', async () => {\n    const list: SortableList = await createSorter(BORING_LIST);\n    let ghostPrepared = false;\n\n    list.prepareGhost = (ghost: HTMLElement) => {\n      ghostPrepared = true;\n      ghost.style.backgroundColor = 'red';\n    };\n\n    const bounds = list.getBoundingClientRect();\n\n    // Start dragging to trigger ghost creation\n    await moveMouse(bounds.left + 20, bounds.bottom - 10);\n    await mouseDown();\n    await moveMouse(bounds.left + 30, bounds.bottom - 10);\n\n    expect(ghostPrepared).to.be.true;\n\n    // Clean up\n    await mouseUp();\n    clock.runAll();\n  });\n\n  it('drags', async () => {\n    const list: SortableList = await createSorter(BORING_LIST);\n    const updated = oneEvent(list, 'change', false);\n\n    const bounds = list.getBoundingClientRect();\n\n    await moveMouse(bounds.left + 20, bounds.bottom - 10);\n    await mouseDown();\n    await moveMouse(bounds.left + 20, bounds.top + 5);\n\n    // should be hovered\n    await assertScreenshot('list/sortable-dragging', getClip(list));\n\n    // now lets drop - this will fire the order changed event\n    const orderChanged = oneEvent(list, CustomEventType.OrderChanged, false);\n    await mouseUp();\n    clock.runAll();\n    await list.updateComplete;\n    clock.runAll();\n\n    // we should fire an order changed event on drop\n    const orderEvent = await orderChanged;\n    expect(orderEvent.detail).to.deep.equal({\n      swap: [1, 0]\n    });\n\n    await assertScreenshot('list/sortable-dropped', getClip(list));\n\n    // we should fire a change event\n    const changeEvent = await updated;\n    expect(changeEvent.type).to.equal('change');\n  });\n\n  it('detects external drag when dragging outside container', async () => {\n    const list: SortableList = await createSorter(BORING_LIST);\n    list.externalDrag = true;\n    await list.updateComplete;\n\n    const bounds = list.getBoundingClientRect();\n\n    // track external drag events\n    let externalDragFired = false;\n    let internalDragFired = false;\n\n    list.addEventListener(CustomEventType.DragExternal, () => {\n      externalDragFired = true;\n    });\n\n    list.addEventListener(CustomEventType.DragInternal, () => {\n      internalDragFired = true;\n    });\n\n    // start dragging an item\n    await moveMouse(bounds.left + 20, bounds.bottom - 10);\n    await mouseDown();\n\n    // drag outside the container (far to the right)\n    await moveMouse(bounds.right + 100, bounds.top + 10);\n    clock.runAll();\n\n    // should have fired external drag event\n    expect(externalDragFired).to.be.true;\n\n    // drag back inside\n    externalDragFired = false; // reset\n    await moveMouse(bounds.left + 20, bounds.top + 10);\n    clock.runAll();\n\n    // should have fired internal drag event\n    expect(internalDragFired).to.be.true;\n\n    // clean up\n    await mouseUp();\n    clock.runAll();\n  });\n\n  it('fires DragStop with isExternal=true when dropped outside container', async () => {\n    const list: SortableList = await createSorter(BORING_LIST);\n    list.externalDrag = true;\n    await list.updateComplete;\n\n    const bounds = list.getBoundingClientRect();\n\n    // start dragging an item\n    await moveMouse(bounds.left + 20, bounds.bottom - 10);\n    await mouseDown();\n\n    // drag outside the container\n    await moveMouse(bounds.right + 100, bounds.top + 10);\n    clock.runAll();\n\n    // listen for drag stop event\n    const dragStop = oneEvent(list, CustomEventType.DragStop, false);\n\n    // drop outside\n    await mouseUp();\n    clock.runAll();\n\n    const dragStopEvent = await dragStop;\n    expect(dragStopEvent.detail.isExternal).to.be.true;\n  });\n});\n"]}

package/out-tsc/test/temba-utils-index.test.js

@@ -1,6 +1,6 @@
 import { expect, fixture, html } from '@open-wc/testing';
 import { stub } from 'sinon';
-import { log, getHTTPCookie, getHeaders, getClasses, plural, range, hexToRgb, truncate, oxford, oxfordFn, oxfordNamed, capitalize, formatFileType, formatFileSize, isImageAttachment, stopEvent, hslToHex, hashCode, showModax, debounce, throttle, timeSince, isDate, getCookie, getCookieBoolean, setCookie, serialize, renderIf, getElementOffset, isElementVisible, getScrollParent, stubbable, renderAvatar, fillTemplate, spreadAttributes, getUrl, postUrl, postJSON, postFormData, postForm, fetchResultsPage, fetchResults, getAssetPage, getAssets, getDialog, DEFAULT_MEDIA_ENDPOINT, Color, COOKIE_KEYS } from '../src/utils';
+import { log, getHTTPCookie, getHeaders, getClasses, plural, range, hexToRgb, truncate, oxford, oxfordFn, oxfordNamed, capitalize, formatFileType, formatFileSize, isImageAttachment, stopEvent, hslToHex, hashCode, showModax, debounce, throttle, timeSince, isDate, getCookie, getCookieBoolean, setCookie, serialize, renderIf, getElementOffset, isElementVisible, getScrollParent, stubbable, renderAvatar, fillTemplate, getUrl, postUrl, postJSON, postFormData, postForm, fetchResultsPage, fetchResults, getAssetPage, getAssets, getDialog, DEFAULT_MEDIA_ENDPOINT, Color, COOKIE_KEYS } from '../src/utils';
 import { mockGET, mockPOST, clearMockPosts } from './utils.test';
 describe('utils/index', () => {
     describe('constants', () => {
@@ -822,32 +822,6 @@ describe('utils/index', () => {
             expect(result.strings).to.exist;
         });
     });
-    describe('spreadAttributes', () => {
-        it('spreads regular attributes', () => {
-            const attrs = { id: 'test', class: 'example' };
-            const result = spreadAttributes(attrs);
-            expect(Array.isArray(result)).to.be.true;
-            expect(result.length).to.equal(2);
-        });
-        it('handles event attributes with @', () => {
-            const attrs = { '@click': 'handleClick' };
-            const result = spreadAttributes(attrs);
-            expect(Array.isArray(result)).to.be.true;
-            expect(result.length).to.equal(1);
-        });
-        it('handles property attributes with .', () => {
-            const attrs = { '.value': 'test' };
-            const result = spreadAttributes(attrs);
-            expect(Array.isArray(result)).to.be.true;
-            expect(result.length).to.equal(1);
-        });
-        it('handles mixed attribute types', () => {
-            const attrs = { id: 'test', '@click': 'handler', '.prop': 'value' };
-            const result = spreadAttributes(attrs);
-            expect(Array.isArray(result)).to.be.true;
-            expect(result.length).to.equal(3);
-        });
-    });
     describe('renderAvatar', () => {
         it('renders avatar with name only', () => {
             const result = renderAvatar({ name: 'John Doe' });