@nyaruka/temba-components 0.131.2 → 0.132.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (232) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/demo/components/floating-tabs/example.html +400 -0
  3. package/demo/components/flow/index.html +1 -1
  4. package/demo/data/flows/sample-flow.json +41 -2
  5. package/demo/data/flows/voicemail.json +613 -0
  6. package/demo/index.html +6 -0
  7. package/dist/locales/es.js +5 -5
  8. package/dist/locales/es.js.map +1 -1
  9. package/dist/locales/fr.js +5 -5
  10. package/dist/locales/fr.js.map +1 -1
  11. package/dist/locales/locale-codes.js +11 -2
  12. package/dist/locales/locale-codes.js.map +1 -1
  13. package/dist/locales/pt.js +5 -5
  14. package/dist/locales/pt.js.map +1 -1
  15. package/dist/temba-components.js +1122 -548
  16. package/dist/temba-components.js.map +1 -1
  17. package/out-tsc/src/display/FloatingTab.js +167 -0
  18. package/out-tsc/src/display/FloatingTab.js.map +1 -0
  19. package/out-tsc/src/display/ProgressBar.js +22 -2
  20. package/out-tsc/src/display/ProgressBar.js.map +1 -1
  21. package/out-tsc/src/events.js.map +1 -1
  22. package/out-tsc/src/flow/CanvasNode.js +165 -31
  23. package/out-tsc/src/flow/CanvasNode.js.map +1 -1
  24. package/out-tsc/src/flow/Editor.js +870 -3
  25. package/out-tsc/src/flow/Editor.js.map +1 -1
  26. package/out-tsc/src/flow/NodeEditor.js +239 -19
  27. package/out-tsc/src/flow/NodeEditor.js.map +1 -1
  28. package/out-tsc/src/flow/NodeTypeSelector.js +51 -4
  29. package/out-tsc/src/flow/NodeTypeSelector.js.map +1 -1
  30. package/out-tsc/src/flow/StickyNote.js +12 -3
  31. package/out-tsc/src/flow/StickyNote.js.map +1 -1
  32. package/out-tsc/src/flow/actions/add_contact_groups.js +2 -1
  33. package/out-tsc/src/flow/actions/add_contact_groups.js.map +1 -1
  34. package/out-tsc/src/flow/actions/add_contact_urn.js +2 -1
  35. package/out-tsc/src/flow/actions/add_contact_urn.js.map +1 -1
  36. package/out-tsc/src/flow/actions/add_input_labels.js +2 -1
  37. package/out-tsc/src/flow/actions/add_input_labels.js.map +1 -1
  38. package/out-tsc/src/flow/actions/play_audio.js +2 -1
  39. package/out-tsc/src/flow/actions/play_audio.js.map +1 -1
  40. package/out-tsc/src/flow/actions/remove_contact_groups.js +2 -1
  41. package/out-tsc/src/flow/actions/remove_contact_groups.js.map +1 -1
  42. package/out-tsc/src/flow/actions/request_optin.js +1 -0
  43. package/out-tsc/src/flow/actions/request_optin.js.map +1 -1
  44. package/out-tsc/src/flow/actions/say_msg.js +2 -1
  45. package/out-tsc/src/flow/actions/say_msg.js.map +1 -1
  46. package/out-tsc/src/flow/actions/send_broadcast.js +2 -1
  47. package/out-tsc/src/flow/actions/send_broadcast.js.map +1 -1
  48. package/out-tsc/src/flow/actions/send_email.js +2 -1
  49. package/out-tsc/src/flow/actions/send_email.js.map +1 -1
  50. package/out-tsc/src/flow/actions/send_msg.js +93 -3
  51. package/out-tsc/src/flow/actions/send_msg.js.map +1 -1
  52. package/out-tsc/src/flow/actions/set_contact_channel.js +2 -1
  53. package/out-tsc/src/flow/actions/set_contact_channel.js.map +1 -1
  54. package/out-tsc/src/flow/actions/set_contact_field.js +2 -1
  55. package/out-tsc/src/flow/actions/set_contact_field.js.map +1 -1
  56. package/out-tsc/src/flow/actions/set_contact_language.js +2 -1
  57. package/out-tsc/src/flow/actions/set_contact_language.js.map +1 -1
  58. package/out-tsc/src/flow/actions/set_contact_name.js +2 -1
  59. package/out-tsc/src/flow/actions/set_contact_name.js.map +1 -1
  60. package/out-tsc/src/flow/actions/set_contact_status.js +2 -1
  61. package/out-tsc/src/flow/actions/set_contact_status.js.map +1 -1
  62. package/out-tsc/src/flow/actions/set_run_result.js +2 -1
  63. package/out-tsc/src/flow/actions/set_run_result.js.map +1 -1
  64. package/out-tsc/src/flow/actions/start_session.js +2 -1
  65. package/out-tsc/src/flow/actions/start_session.js.map +1 -1
  66. package/out-tsc/src/flow/config.js +19 -14
  67. package/out-tsc/src/flow/config.js.map +1 -1
  68. package/out-tsc/src/flow/nodes/shared.js +54 -0
  69. package/out-tsc/src/flow/nodes/shared.js.map +1 -1
  70. package/out-tsc/src/flow/nodes/split_by_airtime.js +9 -3
  71. package/out-tsc/src/flow/nodes/split_by_airtime.js.map +1 -1
  72. package/out-tsc/src/flow/nodes/split_by_contact_field.js +8 -3
  73. package/out-tsc/src/flow/nodes/split_by_contact_field.js.map +1 -1
  74. package/out-tsc/src/flow/nodes/split_by_expression.js +8 -3
  75. package/out-tsc/src/flow/nodes/split_by_expression.js.map +1 -1
  76. package/out-tsc/src/flow/nodes/split_by_groups.js +8 -3
  77. package/out-tsc/src/flow/nodes/split_by_groups.js.map +1 -1
  78. package/out-tsc/src/flow/nodes/split_by_intent.js +3 -2
  79. package/out-tsc/src/flow/nodes/split_by_intent.js.map +1 -1
  80. package/out-tsc/src/flow/nodes/split_by_llm.js +9 -2
  81. package/out-tsc/src/flow/nodes/split_by_llm.js.map +1 -1
  82. package/out-tsc/src/flow/nodes/split_by_llm_categorize.js +9 -2
  83. package/out-tsc/src/flow/nodes/split_by_llm_categorize.js.map +1 -1
  84. package/out-tsc/src/flow/nodes/split_by_random.js +8 -2
  85. package/out-tsc/src/flow/nodes/split_by_random.js.map +1 -1
  86. package/out-tsc/src/flow/nodes/split_by_resthook.js +8 -3
  87. package/out-tsc/src/flow/nodes/split_by_resthook.js.map +1 -1
  88. package/out-tsc/src/flow/nodes/split_by_run_result.js +14 -3
  89. package/out-tsc/src/flow/nodes/split_by_run_result.js.map +1 -1
  90. package/out-tsc/src/flow/nodes/split_by_scheme.js +8 -3
  91. package/out-tsc/src/flow/nodes/split_by_scheme.js.map +1 -1
  92. package/out-tsc/src/flow/nodes/split_by_subflow.js +8 -2
  93. package/out-tsc/src/flow/nodes/split_by_subflow.js.map +1 -1
  94. package/out-tsc/src/flow/nodes/split_by_ticket.js +8 -2
  95. package/out-tsc/src/flow/nodes/split_by_ticket.js.map +1 -1
  96. package/out-tsc/src/flow/nodes/split_by_webhook.js +8 -2
  97. package/out-tsc/src/flow/nodes/split_by_webhook.js.map +1 -1
  98. package/out-tsc/src/flow/nodes/wait_for_digits.js +3 -2
  99. package/out-tsc/src/flow/nodes/wait_for_digits.js.map +1 -1
  100. package/out-tsc/src/flow/nodes/wait_for_menu.js +3 -2
  101. package/out-tsc/src/flow/nodes/wait_for_menu.js.map +1 -1
  102. package/out-tsc/src/flow/nodes/wait_for_response.js +8 -3
  103. package/out-tsc/src/flow/nodes/wait_for_response.js.map +1 -1
  104. package/out-tsc/src/flow/types.js +15 -0
  105. package/out-tsc/src/flow/types.js.map +1 -1
  106. package/out-tsc/src/layout/FloatingWindow.js +346 -0
  107. package/out-tsc/src/layout/FloatingWindow.js.map +1 -0
  108. package/out-tsc/src/live/ContactChat.js +41 -49
  109. package/out-tsc/src/live/ContactChat.js.map +1 -1
  110. package/out-tsc/src/locales/es.js +5 -5
  111. package/out-tsc/src/locales/es.js.map +1 -1
  112. package/out-tsc/src/locales/fr.js +5 -5
  113. package/out-tsc/src/locales/fr.js.map +1 -1
  114. package/out-tsc/src/locales/locale-codes.js +11 -2
  115. package/out-tsc/src/locales/locale-codes.js.map +1 -1
  116. package/out-tsc/src/locales/pt.js +5 -5
  117. package/out-tsc/src/locales/pt.js.map +1 -1
  118. package/out-tsc/src/store/AppState.js +75 -1
  119. package/out-tsc/src/store/AppState.js.map +1 -1
  120. package/out-tsc/temba-modules.js +4 -0
  121. package/out-tsc/temba-modules.js.map +1 -1
  122. package/out-tsc/test/nodes/split_by_run_result.test.js +83 -0
  123. package/out-tsc/test/nodes/split_by_run_result.test.js.map +1 -1
  124. package/out-tsc/test/temba-backwards-compatibility.test.js +30 -0
  125. package/out-tsc/test/temba-backwards-compatibility.test.js.map +1 -0
  126. package/out-tsc/test/temba-contact-chat.test.js +27 -12
  127. package/out-tsc/test/temba-contact-chat.test.js.map +1 -1
  128. package/out-tsc/test/temba-floating-tab.test.js +91 -0
  129. package/out-tsc/test/temba-floating-tab.test.js.map +1 -0
  130. package/out-tsc/test/temba-floating-window.test.js +301 -0
  131. package/out-tsc/test/temba-floating-window.test.js.map +1 -0
  132. package/out-tsc/test/temba-flow-editor-node.test.js +117 -0
  133. package/out-tsc/test/temba-flow-editor-node.test.js.map +1 -1
  134. package/out-tsc/test/temba-localization.test.js +490 -0
  135. package/out-tsc/test/temba-localization.test.js.map +1 -0
  136. package/out-tsc/test/temba-node-type-selector.test.js +217 -0
  137. package/out-tsc/test/temba-node-type-selector.test.js.map +1 -1
  138. package/out-tsc/test/utils.test.js +18 -0
  139. package/out-tsc/test/utils.test.js.map +1 -1
  140. package/package.json +1 -1
  141. package/screenshots/truth/floating-tab/default.png +0 -0
  142. package/screenshots/truth/floating-tab/gray.png +0 -0
  143. package/screenshots/truth/floating-tab/green.png +0 -0
  144. package/screenshots/truth/floating-tab/hidden.png +0 -0
  145. package/screenshots/truth/floating-tab/hover.png +0 -0
  146. package/screenshots/truth/floating-tab/purple.png +0 -0
  147. package/screenshots/truth/floating-window/chromeless.png +0 -0
  148. package/screenshots/truth/floating-window/custom-size.png +0 -0
  149. package/screenshots/truth/floating-window/default.png +0 -0
  150. package/screenshots/truth/floating-window/with-header.png +0 -0
  151. package/screenshots/truth/node-type-selector/action-mode.png +0 -0
  152. package/screenshots/truth/node-type-selector/split-mode.png +0 -0
  153. package/screenshots/truth/nodes/split_by_llm_categorize/editor/feedback-categorization.png +0 -0
  154. package/src/display/FloatingTab.ts +174 -0
  155. package/src/display/ProgressBar.ts +22 -2
  156. package/src/events.ts +2 -4
  157. package/src/flow/CanvasNode.ts +190 -32
  158. package/src/flow/Editor.ts +1054 -4
  159. package/src/flow/NodeEditor.ts +317 -19
  160. package/src/flow/NodeTypeSelector.ts +54 -4
  161. package/src/flow/StickyNote.ts +12 -3
  162. package/src/flow/actions/add_contact_groups.ts +2 -1
  163. package/src/flow/actions/add_contact_urn.ts +3 -1
  164. package/src/flow/actions/add_input_labels.ts +2 -1
  165. package/src/flow/actions/play_audio.ts +2 -1
  166. package/src/flow/actions/remove_contact_groups.ts +3 -1
  167. package/src/flow/actions/request_optin.ts +1 -0
  168. package/src/flow/actions/say_msg.ts +2 -1
  169. package/src/flow/actions/send_broadcast.ts +2 -1
  170. package/src/flow/actions/send_email.ts +3 -1
  171. package/src/flow/actions/send_msg.ts +134 -3
  172. package/src/flow/actions/set_contact_channel.ts +2 -1
  173. package/src/flow/actions/set_contact_field.ts +2 -1
  174. package/src/flow/actions/set_contact_language.ts +3 -1
  175. package/src/flow/actions/set_contact_name.ts +2 -1
  176. package/src/flow/actions/set_contact_status.ts +2 -1
  177. package/src/flow/actions/set_run_result.ts +2 -1
  178. package/src/flow/actions/start_session.ts +3 -1
  179. package/src/flow/config.ts +24 -16
  180. package/src/flow/nodes/shared.ts +70 -1
  181. package/src/flow/nodes/split_by_airtime.ts +20 -3
  182. package/src/flow/nodes/split_by_contact_field.ts +13 -3
  183. package/src/flow/nodes/split_by_expression.ts +13 -3
  184. package/src/flow/nodes/split_by_groups.ts +13 -3
  185. package/src/flow/nodes/split_by_intent.ts +3 -2
  186. package/src/flow/nodes/split_by_llm.ts +19 -2
  187. package/src/flow/nodes/split_by_llm_categorize.ts +13 -2
  188. package/src/flow/nodes/split_by_random.ts +12 -2
  189. package/src/flow/nodes/split_by_resthook.ts +13 -3
  190. package/src/flow/nodes/split_by_run_result.ts +20 -3
  191. package/src/flow/nodes/split_by_scheme.ts +13 -3
  192. package/src/flow/nodes/split_by_subflow.ts +12 -2
  193. package/src/flow/nodes/split_by_ticket.ts +12 -2
  194. package/src/flow/nodes/split_by_webhook.ts +12 -2
  195. package/src/flow/nodes/wait_for_digits.ts +3 -2
  196. package/src/flow/nodes/wait_for_menu.ts +3 -2
  197. package/src/flow/nodes/wait_for_response.ts +13 -3
  198. package/src/flow/types.ts +49 -0
  199. package/src/layout/FloatingWindow.ts +386 -0
  200. package/src/live/ContactChat.ts +42 -49
  201. package/src/locales/es.ts +18 -13
  202. package/src/locales/fr.ts +18 -13
  203. package/src/locales/locale-codes.ts +11 -2
  204. package/src/locales/pt.ts +18 -13
  205. package/src/store/AppState.ts +116 -1
  206. package/static/api/llms.json +18 -0
  207. package/temba-modules.ts +4 -0
  208. package/test/nodes/split_by_run_result.test.ts +99 -0
  209. package/test/temba-backwards-compatibility.test.ts +37 -0
  210. package/test/temba-contact-chat.test.ts +27 -12
  211. package/test/temba-floating-tab.test.ts +110 -0
  212. package/test/temba-floating-window.test.ts +477 -0
  213. package/test/temba-flow-editor-node.test.ts +144 -0
  214. package/test/temba-localization.test.ts +635 -0
  215. package/test/temba-node-type-selector.test.ts +289 -0
  216. package/test/utils.test.ts +20 -0
  217. package/test-assets/contacts/history.json +5 -6
  218. package/test-assets/select/llms.json +2 -2
  219. package/web-dev-server.config.mjs +47 -1
  220. package/web-test-runner.config.mjs +0 -1
  221. package/out-tsc/src/flow/nodes/wait_for_audio.js +0 -7
  222. package/out-tsc/src/flow/nodes/wait_for_audio.js.map +0 -1
  223. package/out-tsc/src/flow/nodes/wait_for_image.js +0 -7
  224. package/out-tsc/src/flow/nodes/wait_for_image.js.map +0 -1
  225. package/out-tsc/src/flow/nodes/wait_for_location.js +0 -7
  226. package/out-tsc/src/flow/nodes/wait_for_location.js.map +0 -1
  227. package/out-tsc/src/flow/nodes/wait_for_video.js +0 -7
  228. package/out-tsc/src/flow/nodes/wait_for_video.js.map +0 -1
  229. package/src/flow/nodes/wait_for_audio.ts +0 -7
  230. package/src/flow/nodes/wait_for_image.ts +0 -7
  231. package/src/flow/nodes/wait_for_location.ts +0 -7
  232. package/src/flow/nodes/wait_for_video.ts +0 -7
@@ -0,0 +1 @@
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"]}
@@ -0,0 +1,301 @@
1
+ import { expect, assert } from '@open-wc/testing';
2
+ import { FloatingWindow } from '../src/layout/FloatingWindow';
3
+ import { assertScreenshot, getComponent } from './utils.test';
4
+ describe('temba-floating-window', () => {
5
+ it('can be created', async () => {
6
+ const window = (await getComponent('temba-floating-window', {
7
+ header: 'Phone Simulator',
8
+ width: 250,
9
+ maxHeight: 700,
10
+ top: 100
11
+ }, '<div style="padding: 20px;">Window content goes here</div>', 300, 750));
12
+ assert.instanceOf(window, FloatingWindow);
13
+ expect(window.header).to.equal('Phone Simulator');
14
+ expect(window.width).to.equal(250);
15
+ expect(window.maxHeight).to.equal(700);
16
+ expect(window.top).to.equal(100);
17
+ // show the window for screenshot
18
+ window.hidden = false;
19
+ await window.updateComplete;
20
+ expect(window.hidden).to.equal(false);
21
+ // use custom clip for fixed positioned element
22
+ const windowElement = window.shadowRoot.querySelector('.window');
23
+ const clip = {
24
+ x: window.left,
25
+ y: window.top,
26
+ width: window.width,
27
+ height: windowElement.offsetHeight
28
+ };
29
+ await assertScreenshot('floating-window/default', clip);
30
+ });
31
+ it('starts hidden by default', async () => {
32
+ const window = (await getComponent('temba-floating-window', {
33
+ header: 'Test Window'
34
+ }, '<div>Content</div>'));
35
+ expect(window.hidden).to.equal(true);
36
+ expect(window.classList.contains('hidden')).to.equal(true);
37
+ });
38
+ it('can be shown and hidden', async () => {
39
+ const window = (await getComponent('temba-floating-window', {
40
+ header: 'Test Window',
41
+ hidden: true
42
+ }, '<div>Content</div>'));
43
+ expect(window.hidden).to.equal(true);
44
+ window.show();
45
+ await window.updateComplete;
46
+ expect(window.hidden).to.equal(false);
47
+ expect(window.classList.contains('hidden')).to.equal(false);
48
+ window.hide();
49
+ await window.updateComplete;
50
+ expect(window.hidden).to.equal(true);
51
+ expect(window.classList.contains('hidden')).to.equal(true);
52
+ });
53
+ it('fires close event when close button clicked', async () => {
54
+ const window = (await getComponent('temba-floating-window', {
55
+ header: 'Test Window'
56
+ }, '<div>Content</div>', 300, 750));
57
+ // show the window first
58
+ window.hidden = false;
59
+ await window.updateComplete;
60
+ let closed = false;
61
+ window.addEventListener('temba-dialog-hidden', () => {
62
+ closed = true;
63
+ });
64
+ const closeButton = window.shadowRoot.querySelector('.close-button');
65
+ expect(closeButton).to.exist;
66
+ closeButton.click();
67
+ await window.updateComplete;
68
+ expect(closed).to.equal(true);
69
+ expect(window.hidden).to.equal(true);
70
+ });
71
+ it('displays header correctly', async () => {
72
+ const window = (await getComponent('temba-floating-window', {
73
+ header: 'Phone Simulator'
74
+ }, '<div>Content</div>', 300, 400));
75
+ window.hidden = false;
76
+ await window.updateComplete;
77
+ const titleElement = window.shadowRoot.querySelector('.title');
78
+ expect(titleElement).to.exist;
79
+ expect(titleElement.textContent).to.equal('Phone Simulator');
80
+ // use custom clip for fixed positioned element
81
+ const windowElement = window.shadowRoot.querySelector('.window');
82
+ const clip = {
83
+ x: window.left,
84
+ y: window.top,
85
+ width: window.width,
86
+ height: windowElement.offsetHeight
87
+ };
88
+ await assertScreenshot('floating-window/with-header', clip);
89
+ });
90
+ it('renders slot content', async () => {
91
+ const window = (await getComponent('temba-floating-window', {
92
+ header: 'Test'
93
+ }, '<div class="test-content">Custom content</div>', 300, 400));
94
+ window.hidden = false;
95
+ await window.updateComplete;
96
+ const slotContent = window.querySelector('.test-content');
97
+ expect(slotContent).to.exist;
98
+ expect(slotContent.textContent).to.equal('Custom content');
99
+ });
100
+ it('supports custom dimensions', async () => {
101
+ const window = (await getComponent('temba-floating-window', {
102
+ header: 'Custom Size',
103
+ width: 400,
104
+ maxHeight: 600,
105
+ top: 100,
106
+ left: 100
107
+ }, '<div>Content</div>', 450, 650));
108
+ window.show();
109
+ await window.updateComplete;
110
+ expect(window.width).to.equal(400);
111
+ expect(window.maxHeight).to.equal(600);
112
+ expect(window.top).to.equal(100);
113
+ expect(window.left).to.equal(100);
114
+ // use custom clip for fixed positioned element
115
+ const windowElement = window.shadowRoot.querySelector('.window');
116
+ const clip = {
117
+ x: window.left,
118
+ y: window.top,
119
+ width: window.width,
120
+ height: windowElement.offsetHeight
121
+ };
122
+ await assertScreenshot('floating-window/custom-size', clip);
123
+ });
124
+ it('can be dragged by header', async () => {
125
+ const window = (await getComponent('temba-floating-window', {
126
+ header: 'Draggable Window',
127
+ width: 250,
128
+ maxHeight: 400,
129
+ top: 100,
130
+ left: 100
131
+ }, '<div>Content</div>', 300, 450));
132
+ window.hidden = false;
133
+ await window.updateComplete;
134
+ const header = window.shadowRoot.querySelector('.header');
135
+ expect(header).to.exist;
136
+ // simulate drag by setting dragging state
137
+ window.dragging = true;
138
+ await window.updateComplete;
139
+ const windowElement = window.shadowRoot.querySelector('.window');
140
+ expect(windowElement.classList.contains('dragging')).to.equal(true);
141
+ });
142
+ it('respects viewport bounds when dragging', async () => {
143
+ const window = (await getComponent('temba-floating-window', {
144
+ header: 'Bounded Window',
145
+ width: 250,
146
+ maxHeight: 400,
147
+ top: 100,
148
+ left: 100
149
+ }, '<div style="height: 200px;">Content with specific height</div>', 300, 450));
150
+ window.hidden = false;
151
+ await window.updateComplete;
152
+ // get actual window height
153
+ const windowElement = window.shadowRoot.querySelector('.window');
154
+ const actualHeight = windowElement.offsetHeight;
155
+ // simulate dragging near bottom of viewport
156
+ const viewportHeight = window.ownerDocument.defaultView.innerHeight;
157
+ const maxAllowedTop = viewportHeight - actualHeight;
158
+ // try to drag below the viewport
159
+ window.top = viewportHeight + 100;
160
+ await window.updateComplete;
161
+ // the handleMouseMove should clamp this, but we'll test the logic exists
162
+ expect(actualHeight).to.be.greaterThan(0);
163
+ expect(maxAllowedTop).to.be.lessThan(viewportHeight);
164
+ });
165
+ it('maintains consistent starting position', async () => {
166
+ const window = (await getComponent('temba-floating-window', {
167
+ header: 'Test',
168
+ width: 250,
169
+ maxHeight: 400,
170
+ top: 100,
171
+ left: 100
172
+ }, '<div>Content</div>', 300, 450));
173
+ window.hidden = false;
174
+ await window.updateComplete;
175
+ // verify initial position matches properties
176
+ expect(window.top).to.equal(100);
177
+ expect(window.left).to.equal(100);
178
+ // change position (simulating drag)
179
+ window.top = 200;
180
+ window.left = 200;
181
+ await window.updateComplete;
182
+ // hide and show
183
+ window.hide();
184
+ await window.updateComplete;
185
+ window.show();
186
+ await window.updateComplete;
187
+ // position should remain at property values (100, 100) not dragged position
188
+ expect(window.top).to.equal(100);
189
+ expect(window.left).to.equal(100);
190
+ });
191
+ it('can disable chrome', async () => {
192
+ const window = (await getComponent('temba-floating-window', {
193
+ header: 'Test',
194
+ width: 250,
195
+ maxHeight: 400,
196
+ top: 100,
197
+ left: 100,
198
+ chromeless: true
199
+ }, '<div style="background: white; padding: 20px;">Chromeless content</div>', 300, 450));
200
+ expect(window.chromeless).to.equal(true);
201
+ window.hidden = false;
202
+ await window.updateComplete;
203
+ const windowElement = window.shadowRoot.querySelector('.window');
204
+ expect(windowElement.classList.contains('chromeless')).to.equal(true);
205
+ // header should not be rendered
206
+ const header = window.shadowRoot.querySelector('.header');
207
+ expect(header).to.not.exist;
208
+ // body should have no padding
209
+ const body = window.shadowRoot.querySelector('.body');
210
+ const bodyStyles = getComputedStyle(body);
211
+ expect(bodyStyles.padding).to.equal('0px');
212
+ // use custom clip for fixed positioned element
213
+ const clip = {
214
+ x: window.left,
215
+ y: window.top,
216
+ width: window.width,
217
+ height: windowElement.offsetHeight
218
+ };
219
+ await assertScreenshot('floating-window/chromeless', clip);
220
+ });
221
+ it('defaults to showing chrome', async () => {
222
+ const window = (await getComponent('temba-floating-window', {
223
+ header: 'Test'
224
+ }, '<div>Content</div>'));
225
+ expect(window.chromeless).to.equal(false);
226
+ });
227
+ it('can close via public close() method', async () => {
228
+ const window = (await getComponent('temba-floating-window', {
229
+ header: 'Test',
230
+ chromeless: true
231
+ }, '<div>Content</div>'));
232
+ window.hidden = false;
233
+ await window.updateComplete;
234
+ expect(window.hidden).to.equal(false);
235
+ let eventFired = false;
236
+ window.addEventListener('temba-dialog-hidden', () => {
237
+ eventFired = true;
238
+ });
239
+ // call public close() method
240
+ window.close();
241
+ await window.updateComplete;
242
+ expect(window.hidden).to.equal(true);
243
+ expect(eventFired).to.equal(true);
244
+ });
245
+ it('chromeless window has no borders or shadows', async () => {
246
+ const window = (await getComponent('temba-floating-window', {
247
+ header: 'Test',
248
+ width: 250,
249
+ maxHeight: 400,
250
+ chromeless: true
251
+ }, '<div>Content</div>', 300, 450));
252
+ window.hidden = false;
253
+ await window.updateComplete;
254
+ const windowElement = window.shadowRoot.querySelector('.window');
255
+ const styles = getComputedStyle(windowElement);
256
+ expect(styles.boxShadow).to.equal('none');
257
+ expect(styles.borderRadius).to.equal('0px');
258
+ expect(styles.background.includes('rgba(0, 0, 0, 0)')).to.be.true;
259
+ });
260
+ it('supports min and max height constraints', async () => {
261
+ const window = (await getComponent('temba-floating-window', {
262
+ header: 'Min/Max Test',
263
+ width: 300,
264
+ minHeight: 200,
265
+ maxHeight: 500
266
+ }, '<div style="padding: 20px;">Content that can vary in height</div>', 350, 550));
267
+ window.hidden = false;
268
+ await window.updateComplete;
269
+ expect(window.minHeight).to.equal(200);
270
+ expect(window.maxHeight).to.equal(500);
271
+ // verify the styles are applied
272
+ const windowElement = window.shadowRoot.querySelector('.window');
273
+ const styles = getComputedStyle(windowElement);
274
+ expect(styles.minHeight).to.equal('200px');
275
+ expect(styles.maxHeight).to.equal('500px');
276
+ });
277
+ it('stays on screen when browser is resized', async () => {
278
+ const window = (await getComponent('temba-floating-window', {
279
+ header: 'Resize Test',
280
+ width: 250,
281
+ maxHeight: 400,
282
+ top: 100,
283
+ left: 100
284
+ }, '<div style="height: 200px;">Content</div>', 300, 450));
285
+ window.hidden = false;
286
+ await window.updateComplete;
287
+ // position window near right edge
288
+ const originalViewportWidth = window.ownerDocument.defaultView.innerWidth;
289
+ window.left = originalViewportWidth - window.width - 30;
290
+ await window.updateComplete;
291
+ // simulate window resize event (the component should constrain position)
292
+ window.dispatchEvent(new Event('resize', { bubbles: true }));
293
+ await window.updateComplete;
294
+ // window should still be within viewport bounds with 20px padding
295
+ const padding = 20;
296
+ expect(window.left).to.be.at.least(padding);
297
+ expect(window.left).to.be.at.most(window.ownerDocument.defaultView.innerWidth - window.width - padding);
298
+ expect(window.top).to.be.at.least(padding);
299
+ });
300
+ });
301
+ //# sourceMappingURL=temba-floating-window.test.js.map
@@ -0,0 +1 @@
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"]}
@@ -1014,5 +1014,122 @@ describe('EditorNode', () => {
1014
1014
  expect(rendered).to.exist;
1015
1015
  });
1016
1016
  });
1017
+ describe('router section graying', () => {
1018
+ it('grays out split nodes when categories not included in translation', async () => {
1019
+ const mockNode = {
1020
+ uuid: 'split-node-1',
1021
+ actions: [],
1022
+ exits: [
1023
+ { uuid: 'exit-1', destination_uuid: null },
1024
+ { uuid: 'exit-2', destination_uuid: null }
1025
+ ],
1026
+ router: {
1027
+ type: 'switch',
1028
+ result_name: 'Response',
1029
+ categories: [
1030
+ { uuid: 'cat-1', name: 'Category 1', exit_uuid: 'exit-1' },
1031
+ { uuid: 'cat-2', name: 'Category 2', exit_uuid: 'exit-2' }
1032
+ ]
1033
+ }
1034
+ };
1035
+ const mockUI = {
1036
+ position: { left: 0, top: 0 },
1037
+ type: 'split_by_groups'
1038
+ };
1039
+ // Create node
1040
+ const editorNode = await fixture(html `<temba-flow-node
1041
+ .node=${mockNode}
1042
+ .ui=${mockUI}
1043
+ ></temba-flow-node>`);
1044
+ // Set fromStore properties directly
1045
+ editorNode.isTranslating = true;
1046
+ editorNode.includeCategoriesInTranslation = false;
1047
+ editorNode.languageCode = 'spa';
1048
+ // Force re-render
1049
+ editorNode.requestUpdate('isTranslating');
1050
+ editorNode.requestUpdate('includeCategoriesInTranslation');
1051
+ await editorNode.updateComplete;
1052
+ // Find the node element
1053
+ const nodeElement = editorNode.querySelector('.node');
1054
+ expect(nodeElement).to.exist;
1055
+ // Verify it has the non-localizable class
1056
+ expect(nodeElement === null || nodeElement === void 0 ? void 0 : nodeElement.classList.contains('non-localizable')).to.be.true;
1057
+ });
1058
+ it('does not gray out split nodes when categories are included in translation', async () => {
1059
+ const mockNode = {
1060
+ uuid: 'split-node-2',
1061
+ actions: [],
1062
+ exits: [
1063
+ { uuid: 'exit-1', destination_uuid: null },
1064
+ { uuid: 'exit-2', destination_uuid: null }
1065
+ ],
1066
+ router: {
1067
+ type: 'switch',
1068
+ result_name: 'Response',
1069
+ categories: [
1070
+ { uuid: 'cat-1', name: 'Category 1', exit_uuid: 'exit-1' },
1071
+ { uuid: 'cat-2', name: 'Category 2', exit_uuid: 'exit-2' }
1072
+ ]
1073
+ }
1074
+ };
1075
+ const mockUI = {
1076
+ position: { left: 0, top: 0 },
1077
+ type: 'split_by_groups'
1078
+ };
1079
+ // Create node
1080
+ const editorNode = await fixture(html `<temba-flow-node
1081
+ .node=${mockNode}
1082
+ .ui=${mockUI}
1083
+ ></temba-flow-node>`);
1084
+ // Set fromStore properties directly
1085
+ editorNode.isTranslating = true;
1086
+ editorNode.includeCategoriesInTranslation = true;
1087
+ editorNode.languageCode = 'spa';
1088
+ await editorNode.requestUpdate();
1089
+ await editorNode.updateComplete;
1090
+ // Find the node element
1091
+ const nodeElement = editorNode.querySelector('.node');
1092
+ expect(nodeElement).to.exist;
1093
+ // Verify it does NOT have the non-localizable class
1094
+ expect(nodeElement === null || nodeElement === void 0 ? void 0 : nodeElement.classList.contains('non-localizable')).to.be.false;
1095
+ });
1096
+ it('does not gray out split nodes when not translating', async () => {
1097
+ const mockNode = {
1098
+ uuid: 'split-node-3',
1099
+ actions: [],
1100
+ exits: [
1101
+ { uuid: 'exit-1', destination_uuid: null },
1102
+ { uuid: 'exit-2', destination_uuid: null }
1103
+ ],
1104
+ router: {
1105
+ type: 'switch',
1106
+ result_name: 'Response',
1107
+ categories: [
1108
+ { uuid: 'cat-1', name: 'Category 1', exit_uuid: 'exit-1' },
1109
+ { uuid: 'cat-2', name: 'Category 2', exit_uuid: 'exit-2' }
1110
+ ]
1111
+ }
1112
+ };
1113
+ const mockUI = {
1114
+ position: { left: 0, top: 0 },
1115
+ type: 'split_by_groups'
1116
+ };
1117
+ // Create node
1118
+ const editorNode = await fixture(html `<temba-flow-node
1119
+ .node=${mockNode}
1120
+ .ui=${mockUI}
1121
+ ></temba-flow-node>`);
1122
+ // Set fromStore properties directly
1123
+ editorNode.isTranslating = false;
1124
+ editorNode.languageCode = 'eng';
1125
+ await editorNode.requestUpdate();
1126
+ await editorNode.updateComplete;
1127
+ // Find the node element
1128
+ const nodeElement = editorNode.querySelector('.node');
1129
+ expect(nodeElement).to.exist;
1130
+ // Verify it does NOT have the non-localizable class
1131
+ expect(nodeElement === null || nodeElement === void 0 ? void 0 : nodeElement.classList.contains('non-localizable')).to.be.false;
1132
+ });
1133
+ });
1017
1134
  });
1018
1135
  //# sourceMappingURL=temba-flow-editor-node.test.js.map