@nyaruka/temba-components 0.129.1 → 0.129.3

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 (583) hide show
  1. package/.github/workflows/build.yml +6 -5
  2. package/.github/workflows/coverage.yml +80 -0
  3. package/CHANGELOG.md +32 -0
  4. package/README.md +6 -0
  5. package/check-coverage.js +133 -0
  6. package/demo/components/alert/example.html +71 -0
  7. package/demo/components/button/example.html +167 -0
  8. package/demo/{chart → components/chart}/example.html +3 -3
  9. package/demo/components/chart/horizontal-demo.html +160 -0
  10. package/demo/components/checkbox/example.html +68 -0
  11. package/demo/components/compose/example.html +69 -0
  12. package/demo/components/datepicker/example.html +3 -3
  13. package/demo/components/datepicker/range-picker-demo.html +2 -2
  14. package/demo/{dialog → components/dialog}/example.html +3 -3
  15. package/demo/components/dropdown/example.html +95 -0
  16. package/demo/{flow → components/flow}/example.html +1 -1
  17. package/demo/{misc → components/misc}/example.html +3 -3
  18. package/demo/components/progress/example.html +62 -0
  19. package/demo/components/select/drag-and-drop.html +162 -0
  20. package/demo/components/select/example.html +76 -0
  21. package/demo/components/select/multi.html +72 -0
  22. package/demo/components/slider/example.html +55 -0
  23. package/demo/{sortable-list → components/sortable-list}/example.html +3 -3
  24. package/demo/components/tabs/example.html +91 -0
  25. package/demo/{textinput → components/textinput}/completion.html +3 -3
  26. package/demo/components/textinput/example.html +141 -0
  27. package/demo/{webchat → components/webchat}/example.html +3 -3
  28. package/demo/data/flows/sample-flow.json +107 -100
  29. package/demo/index.html +21 -21
  30. package/demo/static/css/styles.css +253 -0
  31. package/demo/sticky-note-demo.html +88 -85
  32. package/demo/styles.css +24 -0
  33. package/dist/locales/es.js +5 -5
  34. package/dist/locales/es.js.map +1 -1
  35. package/dist/locales/fr.js +5 -5
  36. package/dist/locales/fr.js.map +1 -1
  37. package/dist/locales/locale-codes.js +2 -11
  38. package/dist/locales/locale-codes.js.map +1 -1
  39. package/dist/locales/pt.js +5 -5
  40. package/dist/locales/pt.js.map +1 -1
  41. package/dist/temba-components.js +893 -476
  42. package/dist/temba-components.js.map +1 -1
  43. package/generate-coverage-badge.sh +69 -0
  44. package/out-tsc/src/{vectoricon/index.js → Icons.js} +1 -1
  45. package/out-tsc/src/Icons.js.map +1 -0
  46. package/out-tsc/src/display/Alert.js.map +1 -0
  47. package/out-tsc/src/display/Anchor.js.map +1 -0
  48. package/out-tsc/src/display/Button.js.map +1 -0
  49. package/out-tsc/src/{charcount → display}/CharCount.js +159 -2
  50. package/out-tsc/src/display/CharCount.js.map +1 -0
  51. package/out-tsc/src/display/Chat.js.map +1 -0
  52. package/out-tsc/src/display/ContactName.js.map +1 -0
  53. package/out-tsc/src/display/ContactUrn.js.map +1 -0
  54. package/out-tsc/src/display/Dropdown.js.map +1 -0
  55. package/out-tsc/src/{vectoricon/VectorIcon.js → display/Icon.js} +2 -2
  56. package/out-tsc/src/display/Icon.js.map +1 -0
  57. package/out-tsc/src/display/Label.js.map +1 -0
  58. package/out-tsc/src/{leafletmap → display}/LeafletMap.js +16 -1
  59. package/out-tsc/src/display/LeafletMap.js.map +1 -0
  60. package/out-tsc/src/display/Lightbox.js.map +1 -0
  61. package/out-tsc/src/{loading → display}/Loading.js.map +1 -1
  62. package/out-tsc/src/{options → display}/Options.js.map +1 -1
  63. package/out-tsc/src/display/ProgressBar.js.map +1 -0
  64. package/out-tsc/src/display/TembaDate.js.map +1 -0
  65. package/out-tsc/src/display/TembaUser.js.map +1 -0
  66. package/out-tsc/src/display/Thumbnail.js.map +1 -0
  67. package/out-tsc/src/{tip → display}/Tip.js +1 -2
  68. package/out-tsc/src/display/Tip.js.map +1 -0
  69. package/out-tsc/src/display/Toast.js.map +1 -0
  70. package/out-tsc/src/display/sms/gsmsplitter.js.map +1 -0
  71. package/out-tsc/src/display/sms/gsmvalidator.js.map +1 -0
  72. package/out-tsc/src/display/sms/index.js.map +1 -0
  73. package/out-tsc/src/display/sms/unicodesplitter.js.map +1 -0
  74. package/out-tsc/src/events.js +2 -0
  75. package/out-tsc/src/events.js.map +1 -0
  76. package/out-tsc/src/excellent/ExcellentParser.js.map +1 -0
  77. package/out-tsc/src/excellent/helpers.js.map +1 -0
  78. package/out-tsc/src/flow/Editor.js +533 -140
  79. package/out-tsc/src/flow/Editor.js.map +1 -1
  80. package/out-tsc/src/flow/EditorNode.js +287 -20
  81. package/out-tsc/src/flow/EditorNode.js.map +1 -1
  82. package/out-tsc/src/flow/Plumber.js +154 -74
  83. package/out-tsc/src/flow/Plumber.js.map +1 -1
  84. package/out-tsc/src/flow/StickyNote.js +153 -9
  85. package/out-tsc/src/flow/StickyNote.js.map +1 -1
  86. package/out-tsc/src/flow/config.js +88 -18
  87. package/out-tsc/src/flow/config.js.map +1 -1
  88. package/out-tsc/src/flow/render.js +327 -10
  89. package/out-tsc/src/flow/render.js.map +1 -1
  90. package/out-tsc/src/{checkbox → form}/Checkbox.js +2 -2
  91. package/out-tsc/src/form/Checkbox.js.map +1 -0
  92. package/out-tsc/src/{colorpicker → form}/ColorPicker.js +1 -1
  93. package/out-tsc/src/form/ColorPicker.js.map +1 -0
  94. package/out-tsc/src/{completion → form}/Completion.js +2 -2
  95. package/out-tsc/src/form/Completion.js.map +1 -0
  96. package/out-tsc/src/{compose → form}/Compose.js +1 -1
  97. package/out-tsc/src/form/Compose.js.map +1 -0
  98. package/out-tsc/src/{contactsearch → form}/ContactSearch.js +2 -2
  99. package/out-tsc/src/form/ContactSearch.js.map +1 -0
  100. package/out-tsc/src/form/CroppieCSS.js.map +1 -0
  101. package/out-tsc/src/{datepicker → form}/DatePicker.js +1 -1
  102. package/out-tsc/src/form/DatePicker.js.map +1 -0
  103. package/out-tsc/src/{FormElement.js → form/FormElement.js} +1 -1
  104. package/out-tsc/src/form/FormElement.js.map +1 -0
  105. package/out-tsc/src/form/FormField.js.map +1 -0
  106. package/out-tsc/src/{imagepicker → form}/ImagePicker.js +2 -2
  107. package/out-tsc/src/form/ImagePicker.js.map +1 -0
  108. package/out-tsc/src/{mediapicker → form}/MediaPicker.js +1 -1
  109. package/out-tsc/src/form/MediaPicker.js.map +1 -0
  110. package/out-tsc/src/{datepicker → form}/RangePicker.js +3 -2
  111. package/out-tsc/src/form/RangePicker.js.map +1 -0
  112. package/out-tsc/src/{slider → form}/TembaSlider.js +1 -1
  113. package/out-tsc/src/form/TembaSlider.js.map +1 -0
  114. package/out-tsc/src/{templates → form}/TemplateEditor.js +1 -1
  115. package/out-tsc/src/form/TemplateEditor.js.map +1 -0
  116. package/out-tsc/src/{textinput → form}/TextInput.js +3 -3
  117. package/out-tsc/src/form/TextInput.js.map +1 -0
  118. package/out-tsc/src/{omnibox → form/select}/Omnibox.js +2 -2
  119. package/out-tsc/src/form/select/Omnibox.js.map +1 -0
  120. package/out-tsc/src/{select → form/select}/PopupSelect.js +1 -1
  121. package/out-tsc/src/form/select/PopupSelect.js.map +1 -0
  122. package/out-tsc/src/{select → form/select}/Select.js +86 -87
  123. package/out-tsc/src/form/select/Select.js.map +1 -0
  124. package/out-tsc/src/{select → form/select}/UserSelect.js +1 -1
  125. package/out-tsc/src/form/select/UserSelect.js.map +1 -0
  126. package/out-tsc/src/{select → form/select}/WorkspaceSelect.js +1 -1
  127. package/out-tsc/src/form/select/WorkspaceSelect.js.map +1 -0
  128. package/out-tsc/src/interfaces.js +1 -0
  129. package/out-tsc/src/interfaces.js.map +1 -1
  130. package/out-tsc/src/layout/Dialog.js.map +1 -0
  131. package/out-tsc/src/layout/Mask.js.map +1 -0
  132. package/out-tsc/src/{dialog → layout}/Modax.js.map +1 -1
  133. package/out-tsc/src/layout/Resizer.js.map +1 -0
  134. package/out-tsc/src/layout/Tab.js.map +1 -0
  135. package/out-tsc/src/layout/TabPane.js.map +1 -0
  136. package/out-tsc/src/list/NotificationList.js +1 -1
  137. package/out-tsc/src/list/NotificationList.js.map +1 -1
  138. package/out-tsc/src/list/RunList.js +1 -1
  139. package/out-tsc/src/list/RunList.js.map +1 -1
  140. package/out-tsc/src/list/ShortcutList.js.map +1 -1
  141. package/out-tsc/src/list/TembaMenu.js +1 -1
  142. package/out-tsc/src/list/TembaMenu.js.map +1 -1
  143. package/out-tsc/src/list/TicketList.js +1 -1
  144. package/out-tsc/src/list/TicketList.js.map +1 -1
  145. package/out-tsc/src/{aliaseditor → live}/AliasEditor.js +1 -1
  146. package/out-tsc/src/live/AliasEditor.js.map +1 -0
  147. package/out-tsc/src/{contacts → live}/ContactBadges.js +1 -1
  148. package/out-tsc/src/live/ContactBadges.js.map +1 -0
  149. package/out-tsc/src/{contacts → live}/ContactChat.js +79 -3
  150. package/out-tsc/src/live/ContactChat.js.map +1 -0
  151. package/out-tsc/src/{contacts → live}/ContactDetails.js +1 -1
  152. package/out-tsc/src/live/ContactDetails.js.map +1 -0
  153. package/out-tsc/src/{contacts → live}/ContactFieldEditor.js +2 -2
  154. package/out-tsc/src/live/ContactFieldEditor.js.map +1 -0
  155. package/out-tsc/src/live/ContactFields.js.map +1 -0
  156. package/out-tsc/src/live/ContactNameFetch.js.map +1 -0
  157. package/out-tsc/src/{contacts → live}/ContactNotepad.js +1 -1
  158. package/out-tsc/src/{contacts → live}/ContactNotepad.js.map +1 -1
  159. package/out-tsc/src/{contacts → live}/ContactPending.js +1 -1
  160. package/out-tsc/src/live/ContactPending.js.map +1 -0
  161. package/out-tsc/src/live/ContactStoreElement.js.map +1 -0
  162. package/out-tsc/src/live/FieldManager.js.map +1 -0
  163. package/out-tsc/src/live/StartProgress.js.map +1 -0
  164. package/out-tsc/src/{chart → live}/TembaChart.js +5 -1
  165. package/out-tsc/src/live/TembaChart.js.map +1 -0
  166. package/out-tsc/src/locales/es.js +5 -5
  167. package/out-tsc/src/locales/es.js.map +1 -1
  168. package/out-tsc/src/locales/fr.js +5 -5
  169. package/out-tsc/src/locales/fr.js.map +1 -1
  170. package/out-tsc/src/locales/locale-codes.js +2 -11
  171. package/out-tsc/src/locales/locale-codes.js.map +1 -1
  172. package/out-tsc/src/locales/pt.js +5 -5
  173. package/out-tsc/src/locales/pt.js.map +1 -1
  174. package/out-tsc/src/store/AppState.js +54 -24
  175. package/out-tsc/src/store/AppState.js.map +1 -1
  176. package/out-tsc/src/store/Store.js +1 -1
  177. package/out-tsc/src/store/Store.js.map +1 -1
  178. package/out-tsc/src/{utils/index.js → utils.js} +22 -1
  179. package/out-tsc/src/utils.js.map +1 -0
  180. package/out-tsc/src/webchat/WebChat.js +1 -1
  181. package/out-tsc/src/webchat/WebChat.js.map +1 -1
  182. package/out-tsc/temba-components.js +2 -2
  183. package/out-tsc/temba-components.js.map +1 -1
  184. package/out-tsc/temba-modules.js +54 -54
  185. package/out-tsc/temba-modules.js.map +1 -1
  186. package/out-tsc/temba-webchat.js +2 -2
  187. package/out-tsc/temba-webchat.js.map +1 -1
  188. package/out-tsc/test/temba-alert.test.js +1 -1
  189. package/out-tsc/test/temba-alert.test.js.map +1 -1
  190. package/out-tsc/test/temba-appstate-language.test.js +90 -0
  191. package/out-tsc/test/temba-appstate-language.test.js.map +1 -1
  192. package/out-tsc/test/temba-charcount.test.js.map +1 -1
  193. package/out-tsc/test/temba-chart.test.js +1 -1
  194. package/out-tsc/test/temba-chart.test.js.map +1 -1
  195. package/out-tsc/test/temba-checkbox.test.js.map +1 -1
  196. package/out-tsc/test/temba-color-picker.test.js +1 -1
  197. package/out-tsc/test/temba-color-picker.test.js.map +1 -1
  198. package/out-tsc/test/temba-completion.test.js +1 -1
  199. package/out-tsc/test/temba-completion.test.js.map +1 -1
  200. package/out-tsc/test/temba-compose.test.js +1 -1
  201. package/out-tsc/test/temba-compose.test.js.map +1 -1
  202. package/out-tsc/test/temba-contact-badges.test.js +1 -1
  203. package/out-tsc/test/temba-contact-badges.test.js.map +1 -1
  204. package/out-tsc/test/temba-contact-chat.test.js +3 -1
  205. package/out-tsc/test/temba-contact-chat.test.js.map +1 -1
  206. package/out-tsc/test/temba-contact-details.test.js +1 -1
  207. package/out-tsc/test/temba-contact-details.test.js.map +1 -1
  208. package/out-tsc/test/temba-contact-fields.test.js +1 -1
  209. package/out-tsc/test/temba-contact-fields.test.js.map +1 -1
  210. package/out-tsc/test/temba-contact-search.test.js +1 -1
  211. package/out-tsc/test/temba-contact-search.test.js.map +1 -1
  212. package/out-tsc/test/temba-date.test.js +5 -1
  213. package/out-tsc/test/temba-date.test.js.map +1 -1
  214. package/out-tsc/test/temba-datepicker.test.js +1 -1
  215. package/out-tsc/test/temba-datepicker.test.js.map +1 -1
  216. package/out-tsc/test/temba-dialog.test.js +1 -1
  217. package/out-tsc/test/temba-dialog.test.js.map +1 -1
  218. package/out-tsc/test/temba-dropdown.test.js +1 -1
  219. package/out-tsc/test/temba-dropdown.test.js.map +1 -1
  220. package/out-tsc/test/temba-excellent-helpers.test.js +316 -0
  221. package/out-tsc/test/temba-excellent-helpers.test.js.map +1 -0
  222. package/out-tsc/test/temba-field-manager.test.js.map +1 -1
  223. package/out-tsc/test/temba-flow-editor-node.test.js +414 -1
  224. package/out-tsc/test/temba-flow-editor-node.test.js.map +1 -1
  225. package/out-tsc/test/temba-flow-editor.test.js +185 -0
  226. package/out-tsc/test/temba-flow-editor.test.js.map +1 -1
  227. package/out-tsc/test/temba-flow-plumber-connections.test.js +113 -0
  228. package/out-tsc/test/temba-flow-plumber-connections.test.js.map +1 -0
  229. package/out-tsc/test/temba-flow-plumber.test.js +73 -93
  230. package/out-tsc/test/temba-flow-plumber.test.js.map +1 -1
  231. package/out-tsc/test/temba-flow-render.test.js +624 -1
  232. package/out-tsc/test/temba-flow-render.test.js.map +1 -1
  233. package/out-tsc/test/temba-flow-self-routing.test.js +172 -0
  234. package/out-tsc/test/temba-flow-self-routing.test.js.map +1 -0
  235. package/out-tsc/test/temba-formfield.test.js.map +1 -1
  236. package/out-tsc/test/temba-icon.test.js +1 -1
  237. package/out-tsc/test/temba-icon.test.js.map +1 -1
  238. package/out-tsc/test/temba-integration-markdown.test.js.map +1 -1
  239. package/out-tsc/test/temba-label.test.js +1 -1
  240. package/out-tsc/test/temba-label.test.js.map +1 -1
  241. package/out-tsc/test/temba-lightbox.test.js +1 -1
  242. package/out-tsc/test/temba-lightbox.test.js.map +1 -1
  243. package/out-tsc/test/temba-markdown.test.js +127 -0
  244. package/out-tsc/test/temba-markdown.test.js.map +1 -0
  245. package/out-tsc/test/temba-menu.test.js +1 -1
  246. package/out-tsc/test/temba-menu.test.js.map +1 -1
  247. package/out-tsc/test/temba-modax.test.js +1 -1
  248. package/out-tsc/test/temba-modax.test.js.map +1 -1
  249. package/out-tsc/test/temba-modules.test.js +47 -0
  250. package/out-tsc/test/temba-modules.test.js.map +1 -0
  251. package/out-tsc/test/temba-omnibox.test.js +1 -1
  252. package/out-tsc/test/temba-omnibox.test.js.map +1 -1
  253. package/out-tsc/test/temba-options.test.js.map +1 -1
  254. package/out-tsc/test/temba-range-picker.test.js +9 -2
  255. package/out-tsc/test/temba-range-picker.test.js.map +1 -1
  256. package/out-tsc/test/temba-rapid-element.test.js +273 -0
  257. package/out-tsc/test/temba-rapid-element.test.js.map +1 -0
  258. package/out-tsc/test/temba-resize-element.test.js +85 -0
  259. package/out-tsc/test/temba-resize-element.test.js.map +1 -0
  260. package/out-tsc/test/temba-select.test.js +2 -2
  261. package/out-tsc/test/temba-select.test.js.map +1 -1
  262. package/out-tsc/test/temba-slider.test.js.map +1 -1
  263. package/out-tsc/test/temba-sticky-note.test.js +194 -0
  264. package/out-tsc/test/temba-sticky-note.test.js.map +1 -0
  265. package/out-tsc/test/temba-template-editor.test.js.map +1 -1
  266. package/out-tsc/test/temba-textinput.test.js +1 -1
  267. package/out-tsc/test/temba-textinput.test.js.map +1 -1
  268. package/out-tsc/test/temba-tip.test.js +1 -1
  269. package/out-tsc/test/temba-tip.test.js.map +1 -1
  270. package/out-tsc/test/temba-toast.test.js +1 -1
  271. package/out-tsc/test/temba-toast.test.js.map +1 -1
  272. package/out-tsc/test/temba-utils-index.test.js +1 -1
  273. package/out-tsc/test/temba-utils-index.test.js.map +1 -1
  274. package/out-tsc/test/temba-utils-uuid.test.js +38 -0
  275. package/out-tsc/test/temba-utils-uuid.test.js.map +1 -0
  276. package/out-tsc/test/temba-webchat.test.js +28 -12
  277. package/out-tsc/test/temba-webchat.test.js.map +1 -1
  278. package/out-tsc/test/utils.test.js +2 -6
  279. package/out-tsc/test/utils.test.js.map +1 -1
  280. package/package.json +18 -9
  281. package/rollup.components.mjs +1 -1
  282. package/screenshots/truth/datepicker/range-picker-all.png +0 -0
  283. package/screenshots/truth/datepicker/range-picker-button-states.png +0 -0
  284. package/screenshots/truth/datepicker/range-picker-default.png +0 -0
  285. package/screenshots/truth/datepicker/range-picker-editing-start.png +0 -0
  286. package/screenshots/truth/datepicker/range-picker-initial-values.png +0 -0
  287. package/screenshots/truth/datepicker/range-picker-week.png +0 -0
  288. package/screenshots/truth/datepicker/range-picker-year.png +0 -0
  289. package/screenshots/truth/sticky-note/blue-color.png +0 -0
  290. package/screenshots/truth/sticky-note/blue.png +0 -0
  291. package/screenshots/truth/sticky-note/color-picker-expanded.png +0 -0
  292. package/screenshots/truth/sticky-note/default.png +0 -0
  293. package/screenshots/truth/sticky-note/gray-color.png +0 -0
  294. package/screenshots/truth/sticky-note/gray.png +0 -0
  295. package/screenshots/truth/sticky-note/green-color.png +0 -0
  296. package/screenshots/truth/sticky-note/green.png +0 -0
  297. package/screenshots/truth/sticky-note/pink-color.png +0 -0
  298. package/screenshots/truth/sticky-note/pink.png +0 -0
  299. package/screenshots/truth/sticky-note/yellow-color.png +0 -0
  300. package/screenshots/truth/sticky-note/yellow.png +0 -0
  301. package/src/{charcount → display}/CharCount.ts +164 -2
  302. package/src/{vectoricon/VectorIcon.ts → display/Icon.ts} +1 -1
  303. package/src/{leafletmap → display}/LeafletMap.ts +19 -1
  304. package/src/{thumbnail → display}/Thumbnail.ts +1 -1
  305. package/src/{tip → display}/Tip.ts +1 -2
  306. package/src/{contacts/events.ts → events.ts} +1 -64
  307. package/src/flow/Editor.ts +655 -165
  308. package/src/flow/EditorNode.ts +337 -22
  309. package/src/flow/Plumber.ts +186 -79
  310. package/src/flow/StickyNote.ts +165 -9
  311. package/src/flow/config.ts +114 -18
  312. package/src/flow/render.ts +398 -11
  313. package/src/{checkbox → form}/Checkbox.ts +2 -2
  314. package/src/{colorpicker → form}/ColorPicker.ts +2 -2
  315. package/src/{completion → form}/Completion.ts +3 -3
  316. package/src/{compose → form}/Compose.ts +7 -7
  317. package/src/{contactsearch → form}/ContactSearch.ts +6 -6
  318. package/src/{datepicker → form}/DatePicker.ts +1 -1
  319. package/src/{FormElement.ts → form/FormElement.ts} +1 -1
  320. package/src/{imagepicker → form}/ImagePicker.ts +2 -2
  321. package/src/{mediapicker → form}/MediaPicker.ts +1 -1
  322. package/src/{datepicker → form}/RangePicker.ts +3 -2
  323. package/src/{slider → form}/TembaSlider.ts +1 -1
  324. package/src/{templates → form}/TemplateEditor.ts +2 -2
  325. package/src/{textinput → form}/TextInput.ts +5 -5
  326. package/src/{omnibox → form/select}/Omnibox.ts +2 -2
  327. package/src/{select → form/select}/PopupSelect.ts +1 -1
  328. package/src/{select → form/select}/Select.ts +124 -126
  329. package/src/{select → form/select}/UserSelect.ts +1 -1
  330. package/src/{select → form/select}/WorkspaceSelect.ts +1 -1
  331. package/src/interfaces.ts +2 -1
  332. package/src/{dialog → layout}/Dialog.ts +1 -1
  333. package/src/list/NotificationList.ts +2 -2
  334. package/src/list/RunList.ts +3 -3
  335. package/src/list/ShortcutList.ts +1 -1
  336. package/src/list/TembaMenu.ts +2 -2
  337. package/src/list/TicketList.ts +1 -1
  338. package/src/{aliaseditor → live}/AliasEditor.ts +3 -3
  339. package/src/{contacts → live}/ContactBadges.ts +1 -1
  340. package/src/{contacts → live}/ContactChat.ts +118 -8
  341. package/src/{contacts → live}/ContactDetails.ts +1 -1
  342. package/src/{contacts → live}/ContactFieldEditor.ts +4 -4
  343. package/src/{contacts → live}/ContactFields.ts +1 -1
  344. package/src/{contacts → live}/ContactNotepad.ts +1 -1
  345. package/src/{contacts → live}/ContactPending.ts +1 -1
  346. package/src/{chart → live}/TembaChart.ts +5 -2
  347. package/src/locales/es.ts +13 -18
  348. package/src/locales/fr.ts +13 -18
  349. package/src/locales/locale-codes.ts +2 -11
  350. package/src/locales/pt.ts +13 -18
  351. package/src/store/AppState.ts +75 -29
  352. package/src/store/Store.ts +1 -1
  353. package/src/store/flow-definition.d.ts +125 -0
  354. package/src/{utils/index.ts → utils.ts} +26 -10
  355. package/src/webchat/WebChat.ts +1 -1
  356. package/static/css/temba-components.css +1 -0
  357. package/svg.js +1 -4
  358. package/temba-components.ts +2 -2
  359. package/temba-modules.ts +54 -54
  360. package/temba-webchat.ts +2 -2
  361. package/test/temba-alert.test.ts +1 -1
  362. package/test/temba-appstate-language.test.ts +108 -0
  363. package/test/temba-charcount.test.ts +1 -1
  364. package/test/temba-chart.test.ts +1 -1
  365. package/test/temba-checkbox.test.ts +1 -1
  366. package/test/temba-color-picker.test.ts +1 -1
  367. package/test/temba-completion.test.ts +1 -1
  368. package/test/temba-compose.test.ts +1 -1
  369. package/test/temba-contact-badges.test.ts +1 -1
  370. package/test/temba-contact-chat.test.ts +6 -4
  371. package/test/temba-contact-details.test.ts +1 -1
  372. package/test/temba-contact-fields.test.ts +1 -1
  373. package/test/temba-contact-search.test.ts +2 -2
  374. package/test/temba-date.test.ts +8 -3
  375. package/test/temba-datepicker.test.ts +1 -1
  376. package/test/temba-dialog.test.ts +1 -1
  377. package/test/temba-dropdown.test.ts +1 -1
  378. package/test/temba-excellent-helpers.test.ts +417 -0
  379. package/test/temba-field-manager.test.ts +2 -2
  380. package/test/temba-flow-editor-node.test.ts +536 -1
  381. package/test/temba-flow-editor.test.ts +224 -0
  382. package/test/temba-flow-editor.test.ts.backup +563 -0
  383. package/test/temba-flow-plumber-connections.test.ts +142 -0
  384. package/test/temba-flow-plumber.test.ts +83 -120
  385. package/test/temba-flow-render.test.ts +787 -4
  386. package/test/temba-flow-self-routing.test.ts +215 -0
  387. package/test/temba-formfield.test.ts +1 -1
  388. package/test/temba-icon.test.ts +1 -1
  389. package/test/temba-integration-markdown.test.ts +1 -1
  390. package/test/temba-label.test.ts +1 -1
  391. package/test/temba-lightbox.test.ts +1 -1
  392. package/test/temba-markdown.test.ts +162 -0
  393. package/test/temba-menu.test.ts +1 -1
  394. package/test/temba-modax.test.ts +2 -2
  395. package/test/temba-modules.test.ts +56 -0
  396. package/test/temba-omnibox.test.ts +1 -1
  397. package/test/temba-options.test.ts +1 -1
  398. package/test/temba-range-picker.test.ts +17 -2
  399. package/test/temba-rapid-element.test.ts +341 -0
  400. package/test/temba-resize-element.test.ts +104 -0
  401. package/test/temba-select.test.ts +2 -2
  402. package/test/temba-slider.test.ts +1 -1
  403. package/test/temba-sticky-note.test.ts +281 -0
  404. package/test/temba-template-editor.test.ts +1 -1
  405. package/test/temba-textinput.test.ts +1 -1
  406. package/test/temba-tip.test.ts +1 -1
  407. package/test/temba-toast.test.ts +1 -1
  408. package/test/temba-utils-index.test.ts +1 -1
  409. package/test/temba-utils-index.test.ts.backup +1737 -0
  410. package/test/temba-utils-uuid.test.ts +48 -0
  411. package/test/temba-webchat.test.ts +30 -12
  412. package/test/utils.test.ts +5 -9
  413. package/web-dev-server.config.mjs +1 -1
  414. package/demo/alert/example.html +0 -65
  415. package/demo/button/example.html +0 -71
  416. package/demo/chart/horizontal-demo.html +0 -81
  417. package/demo/checkbox/example.html +0 -72
  418. package/demo/compose/example.html +0 -72
  419. package/demo/dropdown/example.html +0 -99
  420. package/demo/progress/example.html +0 -59
  421. package/demo/select/drag-and-drop.html +0 -142
  422. package/demo/select/example.html +0 -82
  423. package/demo/select/multi.html +0 -73
  424. package/demo/slider/example.html +0 -59
  425. package/demo/tabs/example.html +0 -91
  426. package/demo/textinput/example.html +0 -61
  427. package/out-tsc/src/FormElement.js.map +0 -1
  428. package/out-tsc/src/alert/Alert.js.map +0 -1
  429. package/out-tsc/src/aliaseditor/AliasEditor.js.map +0 -1
  430. package/out-tsc/src/anchor/Anchor.js.map +0 -1
  431. package/out-tsc/src/button/Button.js.map +0 -1
  432. package/out-tsc/src/charcount/CharCount.js.map +0 -1
  433. package/out-tsc/src/charcount/helpers.js +0 -159
  434. package/out-tsc/src/charcount/helpers.js.map +0 -1
  435. package/out-tsc/src/chart/TembaChart.js.map +0 -1
  436. package/out-tsc/src/chat/Chat.js.map +0 -1
  437. package/out-tsc/src/checkbox/Checkbox.js.map +0 -1
  438. package/out-tsc/src/colorpicker/ColorPicker.js.map +0 -1
  439. package/out-tsc/src/completion/Completion.js.map +0 -1
  440. package/out-tsc/src/completion/ExcellentParser.js.map +0 -1
  441. package/out-tsc/src/completion/helpers.js.map +0 -1
  442. package/out-tsc/src/compose/Compose.js.map +0 -1
  443. package/out-tsc/src/contacts/ContactBadges.js.map +0 -1
  444. package/out-tsc/src/contacts/ContactChat.js.map +0 -1
  445. package/out-tsc/src/contacts/ContactDetails.js.map +0 -1
  446. package/out-tsc/src/contacts/ContactFieldEditor.js.map +0 -1
  447. package/out-tsc/src/contacts/ContactFields.js.map +0 -1
  448. package/out-tsc/src/contacts/ContactName.js.map +0 -1
  449. package/out-tsc/src/contacts/ContactNameFetch.js.map +0 -1
  450. package/out-tsc/src/contacts/ContactPending.js.map +0 -1
  451. package/out-tsc/src/contacts/ContactStoreElement.js.map +0 -1
  452. package/out-tsc/src/contacts/ContactUrn.js.map +0 -1
  453. package/out-tsc/src/contacts/events.js +0 -65
  454. package/out-tsc/src/contacts/events.js.map +0 -1
  455. package/out-tsc/src/contacts/helpers.js +0 -77
  456. package/out-tsc/src/contacts/helpers.js.map +0 -1
  457. package/out-tsc/src/contactsearch/ContactSearch.js.map +0 -1
  458. package/out-tsc/src/date/TembaDate.js.map +0 -1
  459. package/out-tsc/src/datepicker/DatePicker.js.map +0 -1
  460. package/out-tsc/src/datepicker/RangePicker.js.map +0 -1
  461. package/out-tsc/src/dialog/Dialog.js.map +0 -1
  462. package/out-tsc/src/dropdown/Dropdown.js.map +0 -1
  463. package/out-tsc/src/fields/FieldManager.js.map +0 -1
  464. package/out-tsc/src/formfield/FormField.js.map +0 -1
  465. package/out-tsc/src/imagepicker/CroppieCSS.js.map +0 -1
  466. package/out-tsc/src/imagepicker/ImagePicker.js.map +0 -1
  467. package/out-tsc/src/label/Label.js.map +0 -1
  468. package/out-tsc/src/leafletmap/LeafletMap.js.map +0 -1
  469. package/out-tsc/src/leafletmap/helpers.js +0 -17
  470. package/out-tsc/src/leafletmap/helpers.js.map +0 -1
  471. package/out-tsc/src/lightbox/Lightbox.js.map +0 -1
  472. package/out-tsc/src/mask/Mask.js.map +0 -1
  473. package/out-tsc/src/mediapicker/MediaPicker.js.map +0 -1
  474. package/out-tsc/src/omnibox/Omnibox.js.map +0 -1
  475. package/out-tsc/src/options/helpers.js +0 -28
  476. package/out-tsc/src/options/helpers.js.map +0 -1
  477. package/out-tsc/src/progress/ProgressBar.js.map +0 -1
  478. package/out-tsc/src/progress/StartProgress.js.map +0 -1
  479. package/out-tsc/src/resizer/Resizer.js.map +0 -1
  480. package/out-tsc/src/select/PopupSelect.js.map +0 -1
  481. package/out-tsc/src/select/Select.js.map +0 -1
  482. package/out-tsc/src/select/UserSelect.js.map +0 -1
  483. package/out-tsc/src/select/WorkspaceSelect.js.map +0 -1
  484. package/out-tsc/src/select/helpers.js +0 -1
  485. package/out-tsc/src/select/helpers.js.map +0 -1
  486. package/out-tsc/src/shadowless/Shadowless.js +0 -33
  487. package/out-tsc/src/shadowless/Shadowless.js.map +0 -1
  488. package/out-tsc/src/slider/TembaSlider.js.map +0 -1
  489. package/out-tsc/src/sms/gsmsplitter.js.map +0 -1
  490. package/out-tsc/src/sms/gsmvalidator.js.map +0 -1
  491. package/out-tsc/src/sms/index.js.map +0 -1
  492. package/out-tsc/src/sms/unicodesplitter.js.map +0 -1
  493. package/out-tsc/src/tabpane/Tab.js.map +0 -1
  494. package/out-tsc/src/tabpane/TabPane.js.map +0 -1
  495. package/out-tsc/src/templates/TemplateEditor.js.map +0 -1
  496. package/out-tsc/src/textinput/TextInput.js.map +0 -1
  497. package/out-tsc/src/textinput/helpers.js +0 -12
  498. package/out-tsc/src/textinput/helpers.js.map +0 -1
  499. package/out-tsc/src/thumbnail/Thumbnail.js.map +0 -1
  500. package/out-tsc/src/tip/Tip.js.map +0 -1
  501. package/out-tsc/src/tip/helpers.js +0 -7
  502. package/out-tsc/src/tip/helpers.js.map +0 -1
  503. package/out-tsc/src/toast/Toast.js.map +0 -1
  504. package/out-tsc/src/user/TembaUser.js.map +0 -1
  505. package/out-tsc/src/utils/index.js.map +0 -1
  506. package/out-tsc/src/vectoricon/VectorIcon.js.map +0 -1
  507. package/out-tsc/src/vectoricon/index.js.map +0 -1
  508. package/src/charcount/helpers.ts +0 -162
  509. package/src/contacts/helpers.ts +0 -103
  510. package/src/leafletmap/helpers.ts +0 -18
  511. package/src/options/helpers.ts +0 -37
  512. package/src/select/helpers.ts +0 -0
  513. package/src/shadowless/Shadowless.ts +0 -32
  514. package/src/textinput/helpers.ts +0 -11
  515. package/src/tip/helpers.ts +0 -7
  516. /package/out-tsc/src/{alert → display}/Alert.js +0 -0
  517. /package/out-tsc/src/{anchor → display}/Anchor.js +0 -0
  518. /package/out-tsc/src/{button → display}/Button.js +0 -0
  519. /package/out-tsc/src/{chat → display}/Chat.js +0 -0
  520. /package/out-tsc/src/{contacts → display}/ContactName.js +0 -0
  521. /package/out-tsc/src/{contacts → display}/ContactUrn.js +0 -0
  522. /package/out-tsc/src/{dropdown → display}/Dropdown.js +0 -0
  523. /package/out-tsc/src/{label → display}/Label.js +0 -0
  524. /package/out-tsc/src/{lightbox → display}/Lightbox.js +0 -0
  525. /package/out-tsc/src/{loading → display}/Loading.js +0 -0
  526. /package/out-tsc/src/{options → display}/Options.js +0 -0
  527. /package/out-tsc/src/{progress → display}/ProgressBar.js +0 -0
  528. /package/out-tsc/src/{date → display}/TembaDate.js +0 -0
  529. /package/out-tsc/src/{user → display}/TembaUser.js +0 -0
  530. /package/out-tsc/src/{thumbnail → display}/Thumbnail.js +0 -0
  531. /package/out-tsc/src/{toast → display}/Toast.js +0 -0
  532. /package/out-tsc/src/{sms → display/sms}/gsmsplitter.js +0 -0
  533. /package/out-tsc/src/{sms → display/sms}/gsmvalidator.js +0 -0
  534. /package/out-tsc/src/{sms → display/sms}/index.js +0 -0
  535. /package/out-tsc/src/{sms → display/sms}/unicodesplitter.js +0 -0
  536. /package/out-tsc/src/{completion → excellent}/ExcellentParser.js +0 -0
  537. /package/out-tsc/src/{completion → excellent}/helpers.js +0 -0
  538. /package/out-tsc/src/{imagepicker → form}/CroppieCSS.js +0 -0
  539. /package/out-tsc/src/{formfield → form}/FormField.js +0 -0
  540. /package/out-tsc/src/{dialog → layout}/Dialog.js +0 -0
  541. /package/out-tsc/src/{mask → layout}/Mask.js +0 -0
  542. /package/out-tsc/src/{dialog → layout}/Modax.js +0 -0
  543. /package/out-tsc/src/{resizer → layout}/Resizer.js +0 -0
  544. /package/out-tsc/src/{tabpane → layout}/Tab.js +0 -0
  545. /package/out-tsc/src/{tabpane → layout}/TabPane.js +0 -0
  546. /package/out-tsc/src/{contacts → live}/ContactFields.js +0 -0
  547. /package/out-tsc/src/{contacts → live}/ContactNameFetch.js +0 -0
  548. /package/out-tsc/src/{contacts → live}/ContactStoreElement.js +0 -0
  549. /package/out-tsc/src/{fields → live}/FieldManager.js +0 -0
  550. /package/out-tsc/src/{progress → live}/StartProgress.js +0 -0
  551. /package/src/{vectoricon/index.ts → Icons.ts} +0 -0
  552. /package/src/{alert → display}/Alert.ts +0 -0
  553. /package/src/{anchor → display}/Anchor.ts +0 -0
  554. /package/src/{button → display}/Button.ts +0 -0
  555. /package/src/{chat → display}/Chat.ts +0 -0
  556. /package/src/{contacts → display}/ContactName.ts +0 -0
  557. /package/src/{contacts → display}/ContactUrn.ts +0 -0
  558. /package/src/{dropdown → display}/Dropdown.ts +0 -0
  559. /package/src/{label → display}/Label.ts +0 -0
  560. /package/src/{lightbox → display}/Lightbox.ts +0 -0
  561. /package/src/{loading → display}/Loading.ts +0 -0
  562. /package/src/{options → display}/Options.ts +0 -0
  563. /package/src/{progress → display}/ProgressBar.ts +0 -0
  564. /package/src/{date → display}/TembaDate.ts +0 -0
  565. /package/src/{user → display}/TembaUser.ts +0 -0
  566. /package/src/{toast → display}/Toast.ts +0 -0
  567. /package/src/{sms → display/sms}/gsmsplitter.ts +0 -0
  568. /package/src/{sms → display/sms}/gsmvalidator.ts +0 -0
  569. /package/src/{sms → display/sms}/index.ts +0 -0
  570. /package/src/{sms → display/sms}/unicodesplitter.ts +0 -0
  571. /package/src/{completion → excellent}/ExcellentParser.ts +0 -0
  572. /package/src/{completion → excellent}/helpers.ts +0 -0
  573. /package/src/{imagepicker → form}/CroppieCSS.ts +0 -0
  574. /package/src/{formfield → form}/FormField.ts +0 -0
  575. /package/src/{mask → layout}/Mask.ts +0 -0
  576. /package/src/{dialog → layout}/Modax.ts +0 -0
  577. /package/src/{resizer → layout}/Resizer.ts +0 -0
  578. /package/src/{tabpane → layout}/Tab.ts +0 -0
  579. /package/src/{tabpane → layout}/TabPane.ts +0 -0
  580. /package/src/{contacts → live}/ContactNameFetch.ts +0 -0
  581. /package/src/{contacts → live}/ContactStoreElement.ts +0 -0
  582. /package/src/{fields → live}/FieldManager.ts +0 -0
  583. /package/src/{progress → live}/StartProgress.ts +0 -0
@@ -0,0 +1,253 @@
1
+ body {
2
+ font-family: sans-serif;
3
+ padding: 20px;
4
+ max-width: 800px;
5
+ margin: 0 auto;
6
+ background: #f3f3f3;
7
+ }
8
+
9
+ .example {
10
+ margin: 30px 0;
11
+ padding: 20px;
12
+ border: 1px solid #ddd;
13
+ border-radius: var(--curvature);
14
+ background: white;
15
+ }
16
+
17
+ .example h3 {
18
+ margin-top: 0;
19
+ color: #333;
20
+ }
21
+
22
+ .example p {
23
+ color: #666;
24
+ margin-bottom: 15px;
25
+ }
26
+
27
+ .example label {
28
+ display: block;
29
+ margin-bottom: 5px;
30
+ font-weight: bold;
31
+ }
32
+
33
+ .expected {
34
+ background-color: #f0f8ff;
35
+ padding: 10px;
36
+ border-radius: 4px;
37
+ margin-top: 10px;
38
+ }
39
+
40
+ .expected strong {
41
+ color: #006400;
42
+ }
43
+
44
+ .header {
45
+ margin-bottom: 1em;
46
+ font-size: 2em;
47
+ font-weight: 400;
48
+ color: #777;
49
+ display: inline;
50
+ }
51
+
52
+ .nav {
53
+ margin: 20px 0;
54
+ padding: 20px;
55
+ background: white;
56
+ border-radius: 8px;
57
+ border: 1px solid #ddd;
58
+ }
59
+
60
+ .nav h2 {
61
+ margin-top: 0;
62
+ color: #333;
63
+ }
64
+
65
+ .nav ul {
66
+ list-style: none;
67
+ padding: 0;
68
+ }
69
+
70
+ .nav li {
71
+ margin: 10px 0;
72
+ }
73
+
74
+ .nav a {
75
+ color: #0066cc;
76
+ text-decoration: none;
77
+ font-size: 16px;
78
+ }
79
+
80
+ .nav a:hover {
81
+ text-decoration: underline;
82
+ }
83
+
84
+ .component-grid {
85
+ display: flex;
86
+ flex-direction: column;
87
+ gap: 30px;
88
+ margin: 20px 0;
89
+ }
90
+
91
+ .component-section {
92
+ background: white;
93
+ padding: 20px;
94
+ border-radius: 8px;
95
+ border: 1px solid #ddd;
96
+ justify-content: space-between;
97
+ }
98
+
99
+ .component-section h2 {
100
+ margin-top: 0;
101
+ margin-bottom: 20px;
102
+ color: #333;
103
+ border-bottom: 2px solid #0066cc;
104
+ padding-bottom: 10px;
105
+
106
+ }
107
+
108
+ .component-section .component-card {
109
+ display: inline-block;
110
+ width: calc(50% - 60px);
111
+ vertical-align: top;
112
+ margin:10px;
113
+
114
+ border: 1px solid #eee;
115
+ background: #f9f9f9;
116
+ }
117
+
118
+ .component-section .component-card:nth-child(even) {
119
+ margin-right: 0;
120
+ }
121
+
122
+ @media (max-width: 768px) {
123
+ .component-section .component-card {
124
+ width: 100%;
125
+ margin-right: 0;
126
+ }
127
+ }
128
+
129
+ .component-card {
130
+ background: white;
131
+ padding: 20px;
132
+ border-radius: 8px;
133
+ border: 1px solid #ddd;
134
+ text-align: center;
135
+ }
136
+
137
+ .component-card h3 {
138
+ margin-top: 0;
139
+ color: #333;
140
+ }
141
+
142
+ .component-card p {
143
+ color: #666;
144
+ margin-bottom: 15px;
145
+ }
146
+
147
+ .component-card a {
148
+ color: #0066cc;
149
+ text-decoration: none;
150
+ font-weight: bold;
151
+ }
152
+
153
+ .component-card a:hover {
154
+ text-decoration: underline;
155
+ }
156
+
157
+ /* Preserve some styling from original demo */
158
+ .linked {
159
+ text-decoration: underline;
160
+ color: blue;
161
+ cursor: pointer;
162
+ }
163
+
164
+ temba-dropdown {
165
+ position: relative;
166
+ display: inline-block;
167
+ margin: 0em 0.5em;
168
+ }
169
+
170
+ temba-slider {
171
+ margin-top: 1em;
172
+ }
173
+
174
+ /* Make components visible after they load */
175
+ temba-tabs *,
176
+ temba-tab * {
177
+ opacity: 0;
178
+ }
179
+
180
+ temba-tabs:defined *,
181
+ temba-tab:defined * {
182
+ opacity: 1;
183
+ }
184
+
185
+ /* Documentation section styles */
186
+ .doc-section {
187
+ margin: 2em 0 1em 0;
188
+ padding: 1em;
189
+ background: #fff;
190
+ border: 1px solid #e0e0e0;
191
+ border-radius: 6px;
192
+ }
193
+
194
+ .doc-section h2 {
195
+ margin-top: 0;
196
+ font-size: 1.1em;
197
+ }
198
+
199
+ .doc-section p {
200
+ font-size: 0.97em;
201
+ }
202
+
203
+ /* Code examples */
204
+ .example-html {
205
+ background: #f4f4f4;
206
+ padding: 0.7em;
207
+ border-radius: 4px;
208
+ margin-top: 0.7em;
209
+ font-size: 0.97em;
210
+ overflow-x: auto;
211
+ }
212
+
213
+ /* Output display */
214
+ .demo-output {
215
+ margin-top: 0.5em;
216
+ font-family: monospace;
217
+ background: #f7f7f7;
218
+ padding: 0.5em;
219
+ border-radius: 4px;
220
+ }
221
+
222
+ /* Attribute table - enhanced */
223
+ .attr-table {
224
+ width: 100%;
225
+ border-collapse: collapse;
226
+ background: #fff;
227
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
228
+ margin-top: 3em;
229
+ }
230
+
231
+ .attr-table th {
232
+ text-align: left;
233
+ padding: 8px;
234
+ border: 1px solid #ddd;
235
+ background-color: #f2f2f2;
236
+ }
237
+
238
+ .attr-table td {
239
+ padding: 8px;
240
+ border: 1px solid #ddd;
241
+ }
242
+
243
+ .attr-table td:first-child {
244
+ background: #edfdff;
245
+ }
246
+
247
+ /* Code highlighting improvements */
248
+ pre.language-javascript, pre.language-markup {
249
+ padding: 1em !important;
250
+ border-radius: var(--curvature);
251
+ background: #edfdff7e !important;
252
+ border: 1px solid #ddd !important;
253
+ }
@@ -1,100 +1,94 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en">
2
+ <html lang="en-GB">
3
3
  <head>
4
4
  <meta charset="utf-8" />
5
- <title>StickyNote Drag vs Edit Demo</title>
5
+ <title>Sticky Note Example</title>
6
6
  <link
7
7
  href="/static/css/temba-components.css"
8
8
  rel="stylesheet"
9
9
  type="text/css"
10
10
  />
11
- <style>
12
- body {
13
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
14
- sans-serif;
15
- padding: 20px;
16
- max-width: 1200px;
17
- margin: 0 auto;
18
- background-color: #f5f5f5;
19
- }
20
-
21
- .instructions {
22
- background: #e3f2fd;
23
- padding: 20px;
24
- border-radius: 8px;
25
- margin-bottom: 20px;
26
- border-left: 4px solid #1976d2;
27
- }
28
-
29
- .instructions h2 {
30
- margin-top: 0;
31
- color: #1976d2;
32
- }
33
-
34
- .instructions ul {
35
- margin-bottom: 0;
36
- }
37
-
38
- .instructions li {
39
- margin-bottom: 8px;
40
- }
41
-
42
- .demo-container {
43
- position: relative;
44
- background-color: #f9f9f9;
45
- height: 600px;
46
- border: 1px solid #ddd;
47
- margin: 20px 0;
48
- border-radius: 8px;
49
- overflow: hidden;
50
- }
51
- .demo-title {
52
- font-size: 18px;
53
- font-weight: bold;
54
- margin-bottom: 10px;
55
- }
56
- .instructions {
57
- background-color: #e6f3ff;
58
- padding: 15px;
59
- border-radius: 8px;
60
- margin-bottom: 20px;
61
- }
62
- .instructions ul {
63
- margin: 10px 0;
64
- padding-left: 20px;
65
- }
66
- </style>
11
+ <link
12
+ href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
13
+ rel="stylesheet"
14
+ />
15
+ <link href="../styles.css" rel="stylesheet" type="text/css" />
16
+ <script type="module" src="../src/flow/StickyNote.ts"></script>
17
+ <link href="/demo/static/css/prism.css" rel="stylesheet" />
18
+ <script type="module" src="/demo/static/js/prism-loader.js"></script>
67
19
  </head>
68
20
  <body>
69
- <h1>StickyNote Component Demo</h1>
70
-
71
- <div class="instructions">
72
- <strong>How to use StickyNotes:</strong>
73
- <ul>
74
- <li>Click and drag the sticky notes to move them around</li>
75
- <li>Click on the title or body text to edit it inline</li>
76
- <li>Press Enter or Escape to finish editing</li>
77
- <li>Notes snap to a 20px grid when you finish dragging</li>
78
- <li>Each color has its own visual theme</li>
79
- </ul>
21
+ <h1>Sticky Note Example</h1>
22
+ <p><a href="../index.html">← Back to main demo</a></p>
23
+
24
+ <table class="attr-table">
25
+ <thead>
26
+ <tr>
27
+ <th>Attribute</th>
28
+ <th>Description</th>
29
+ <th>Default</th>
30
+ </tr>
31
+ </thead>
32
+ <tbody>
33
+ <tr>
34
+ <td>uuid</td>
35
+ <td>Unique identifier for the sticky note</td>
36
+ <td>None (required)</td>
37
+ </tr>
38
+ <tr>
39
+ <td>data</td>
40
+ <td>
41
+ Object containing position, title, body, and color properties.
42
+ Position: {left: number, top: number}, color: 'yellow' | 'blue' | 'pink' | 'green' | 'gray'
43
+ </td>
44
+ <td>None (required)</td>
45
+ </tr>
46
+ </tbody>
47
+ </table>
48
+
49
+ <section class="doc-section">
50
+ <h2>Events</h2>
51
+ <p>
52
+ The sticky note component fires events when its content is updated through the flow store system.
53
+ Updates to title and body content are automatically synchronized with the flow state.
54
+ </p>
55
+ </section>
56
+
57
+ <div class="example">
58
+ <h3>Basic Sticky Note</h3>
59
+ <p>A simple yellow sticky note with default positioning</p>
60
+ <pre class="example-html"><code class="language-markup">&lt;temba-sticky-note uuid="basic-note"&gt;&lt;/temba-sticky-note&gt;</code></pre>
61
+ <div class="demo-container">
62
+ <temba-sticky-note id="basic-note"></temba-sticky-note>
63
+ </div>
80
64
  </div>
81
65
 
82
- <div class="demo-title">Interactive StickyNotes:</div>
83
- <div class="demo-container">
84
- <!-- Yellow sticky note -->
85
- <temba-sticky-note id="yellow-note"></temba-sticky-note>
86
-
87
- <!-- Blue sticky note -->
88
- <temba-sticky-note id="blue-note"></temba-sticky-note>
89
-
90
- <!-- Pink sticky note -->
91
- <temba-sticky-note id="pink-note"></temba-sticky-note>
92
-
93
- <!-- Green sticky note -->
94
- <temba-sticky-note id="green-note"></temba-sticky-note>
95
-
96
- <!-- Gray sticky note -->
97
- <temba-sticky-note id="gray-note"></temba-sticky-note>
66
+ <div class="example">
67
+ <h3>Colored Sticky Notes</h3>
68
+ <p>Sticky notes with different color themes - click to edit the text, drag to move them around</p>
69
+ <pre class="example-html"><code class="language-markup">&lt;!-- Multiple colored sticky notes --&gt;
70
+ &lt;temba-sticky-note uuid="yellow-note"&gt;&lt;/temba-sticky-note&gt;
71
+ &lt;temba-sticky-note uuid="blue-note"&gt;&lt;/temba-sticky-note&gt;
72
+ &lt;temba-sticky-note uuid="pink-note"&gt;&lt;/temba-sticky-note&gt;
73
+ &lt;temba-sticky-note uuid="green-note"&gt;&lt;/temba-sticky-note&gt;
74
+ &lt;temba-sticky-note uuid="gray-note"&gt;&lt;/temba-sticky-note&gt;</code></pre>
75
+ <div class="demo-container">
76
+ <temba-sticky-note id="yellow-note"></temba-sticky-note>
77
+ <temba-sticky-note id="blue-note"></temba-sticky-note>
78
+ <temba-sticky-note id="pink-note"></temba-sticky-note>
79
+ <temba-sticky-note id="green-note"></temba-sticky-note>
80
+ <temba-sticky-note id="gray-note"></temba-sticky-note>
81
+ </div>
82
+ <div class="expected">
83
+ <strong>How to use:</strong>
84
+ <ul>
85
+ <li>Click and drag the sticky notes to move them around</li>
86
+ <li>Click on the title or body text to edit it inline</li>
87
+ <li>Press Enter or Escape to finish editing</li>
88
+ <li>Notes snap to a 20px grid when you finish dragging</li>
89
+ <li>Each color has its own visual theme</li>
90
+ </ul>
91
+ </div>
98
92
  </div>
99
93
 
100
94
  <script type="module">
@@ -102,6 +96,15 @@
102
96
 
103
97
  // Configure the sticky notes with sample data
104
98
  document.addEventListener('DOMContentLoaded', () => {
99
+ const basicNote = document.getElementById('basic-note');
100
+ basicNote.uuid = 'basic-uuid';
101
+ basicNote.data = {
102
+ position: { left: 50, top: 50 },
103
+ title: 'Basic Note',
104
+ body: 'This is a basic sticky note example.',
105
+ color: 'yellow'
106
+ };
107
+
105
108
  const yellowNote = document.getElementById('yellow-note');
106
109
  yellowNote.uuid = 'yellow-uuid';
107
110
  yellowNote.data = {
package/demo/styles.css CHANGED
@@ -250,4 +250,28 @@ pre.language-javascript, pre.language-markup {
250
250
  border-radius: var(--curvature);
251
251
  background: #edfdff7e !important;
252
252
  border: 1px solid #ddd !important;
253
+ }
254
+
255
+ /* Demo container for sticky notes and interactive components */
256
+ .demo-container {
257
+ position: relative;
258
+ background-color: #f9f9f9;
259
+ height: 600px;
260
+ border: 1px solid #ddd;
261
+ margin: 20px 0;
262
+ border-radius: 8px;
263
+ overflow: hidden;
264
+ }
265
+
266
+ /* Button group layout for demo purposes */
267
+ .button-group {
268
+ display: flex;
269
+ gap: 10px;
270
+ flex-wrap: wrap;
271
+ max-width: 400px;
272
+ }
273
+
274
+ .button-group > div {
275
+ flex: 0 0 auto;
276
+ max-width: 100px;
253
277
  }
@@ -3,10 +3,10 @@
3
3
  /* eslint-disable no-irregular-whitespace */
4
4
  /* eslint-disable @typescript-eslint/no-explicit-any */
5
5
  export const templates = {
6
- 'scf1453991c986b25': `Tab para completar, enter para seleccionar`,
7
- 's73b4d70c02f4b4e0': `No options`,
8
- 's8f02e3a18ffc083a': `Are not currently in a flow`,
9
- 's638236250662c6b3': `Have sent a message in the last`,
10
- 's4788ee206c4570c7': `Have not started this flow in the last 90 days`,
6
+ scf1453991c986b25: `Tab para completar, enter para seleccionar`,
7
+ s73b4d70c02f4b4e0: `No options`,
8
+ s8f02e3a18ffc083a: `Are not currently in a flow`,
9
+ s638236250662c6b3: `Have sent a message in the last`,
10
+ s4788ee206c4570c7: `Have not started this flow in the last 90 days`
11
11
  };
12
12
  //# sourceMappingURL=es.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"es.js","sourceRoot":"","sources":["../../../src/locales/es.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,4CAA4C;IACvE,mBAAmB,EAAE,YAAY;IACjC,mBAAmB,EAAE,6BAA6B;IAClD,mBAAmB,EAAE,iCAAiC;IACtD,mBAAmB,EAAE,gDAAgD;CAChE,CAAC","sourcesContent":["\n // Do not modify this file by hand!\n // Re-generate this file by running lit-localize\n\n \n \n\n /* eslint-disable no-irregular-whitespace */\n /* eslint-disable @typescript-eslint/no-explicit-any */\n\n export const templates = {\n 'scf1453991c986b25': `Tab para completar, enter para seleccionar`,\n's73b4d70c02f4b4e0': `No options`,\n's8f02e3a18ffc083a': `Are not currently in a flow`,\n's638236250662c6b3': `Have sent a message in the last`,\n's4788ee206c4570c7': `Have not started this flow in the last 90 days`,\n };\n "]}
1
+ {"version":3,"file":"es.js","sourceRoot":"","sources":["../../../src/locales/es.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,gDAAgD;AAEhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,iBAAiB,EAAE,4CAA4C;IAC/D,iBAAiB,EAAE,YAAY;IAC/B,iBAAiB,EAAE,6BAA6B;IAChD,iBAAiB,EAAE,iCAAiC;IACpD,iBAAiB,EAAE,gDAAgD;CACpE,CAAC","sourcesContent":["// Do not modify this file by hand!\n// Re-generate this file by running lit-localize\n\n/* eslint-disable no-irregular-whitespace */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n\nexport const templates = {\n scf1453991c986b25: `Tab para completar, enter para seleccionar`,\n s73b4d70c02f4b4e0: `No options`,\n s8f02e3a18ffc083a: `Are not currently in a flow`,\n s638236250662c6b3: `Have sent a message in the last`,\n s4788ee206c4570c7: `Have not started this flow in the last 90 days`\n};\n"]}
@@ -3,10 +3,10 @@
3
3
  /* eslint-disable no-irregular-whitespace */
4
4
  /* eslint-disable @typescript-eslint/no-explicit-any */
5
5
  export const templates = {
6
- 's73b4d70c02f4b4e0': `No options`,
7
- 'scf1453991c986b25': `Tab to complete, enter to select`,
8
- 's8f02e3a18ffc083a': `Are not currently in a flow`,
9
- 's638236250662c6b3': `Have sent a message in the last`,
10
- 's4788ee206c4570c7': `Have not started this flow in the last 90 days`,
6
+ s73b4d70c02f4b4e0: `No options`,
7
+ scf1453991c986b25: `Tab to complete, enter to select`,
8
+ s8f02e3a18ffc083a: `Are not currently in a flow`,
9
+ s638236250662c6b3: `Have sent a message in the last`,
10
+ s4788ee206c4570c7: `Have not started this flow in the last 90 days`
11
11
  };
12
12
  //# sourceMappingURL=fr.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fr.js","sourceRoot":"","sources":["../../../src/locales/fr.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,YAAY;IACvC,mBAAmB,EAAE,kCAAkC;IACvD,mBAAmB,EAAE,6BAA6B;IAClD,mBAAmB,EAAE,iCAAiC;IACtD,mBAAmB,EAAE,gDAAgD;CAChE,CAAC","sourcesContent":["\n // Do not modify this file by hand!\n // Re-generate this file by running lit-localize\n\n \n \n\n /* eslint-disable no-irregular-whitespace */\n /* eslint-disable @typescript-eslint/no-explicit-any */\n\n export const templates = {\n 's73b4d70c02f4b4e0': `No options`,\n'scf1453991c986b25': `Tab to complete, enter to select`,\n's8f02e3a18ffc083a': `Are not currently in a flow`,\n's638236250662c6b3': `Have sent a message in the last`,\n's4788ee206c4570c7': `Have not started this flow in the last 90 days`,\n };\n "]}
1
+ {"version":3,"file":"fr.js","sourceRoot":"","sources":["../../../src/locales/fr.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,gDAAgD;AAEhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,iBAAiB,EAAE,YAAY;IAC/B,iBAAiB,EAAE,kCAAkC;IACrD,iBAAiB,EAAE,6BAA6B;IAChD,iBAAiB,EAAE,iCAAiC;IACpD,iBAAiB,EAAE,gDAAgD;CACpE,CAAC","sourcesContent":["// Do not modify this file by hand!\n// Re-generate this file by running lit-localize\n\n/* eslint-disable no-irregular-whitespace */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n\nexport const templates = {\n s73b4d70c02f4b4e0: `No options`,\n scf1453991c986b25: `Tab to complete, enter to select`,\n s8f02e3a18ffc083a: `Are not currently in a flow`,\n s638236250662c6b3: `Have sent a message in the last`,\n s4788ee206c4570c7: `Have not started this flow in the last 90 days`\n};\n"]}
@@ -8,18 +8,9 @@ export const sourceLocale = `en`;
8
8
  * The other locale codes that this application is localized into. Sorted
9
9
  * lexicographically.
10
10
  */
11
- export const targetLocales = [
12
- `es`,
13
- `fr`,
14
- `pt`,
15
- ];
11
+ export const targetLocales = [`es`, `fr`, `pt`];
16
12
  /**
17
13
  * All valid project locale codes. Sorted lexicographically.
18
14
  */
19
- export const allLocales = [
20
- `en`,
21
- `es`,
22
- `fr`,
23
- `pt`,
24
- ];
15
+ export const allLocales = [`en`, `es`, `fr`, `pt`];
25
16
  //# sourceMappingURL=locale-codes.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"locale-codes.js","sourceRoot":"","sources":["../../../src/locales/locale-codes.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,iDAAiD;AAEjD;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC;AAEjC;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,IAAI;IACJ,IAAI;IACJ,IAAI;CACI,CAAC;AAEX;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;CACI,CAAC","sourcesContent":["// Do not modify this file by hand!\n// Re-generate this file by running lit-localize.\n\n/**\n * The locale code that templates in this source code are written in.\n */\nexport const sourceLocale = `en`;\n\n/**\n * The other locale codes that this application is localized into. Sorted\n * lexicographically.\n */\nexport const targetLocales = [\n `es`,\n `fr`,\n `pt`,\n] as const;\n\n/**\n * All valid project locale codes. Sorted lexicographically.\n */\nexport const allLocales = [\n `en`,\n `es`,\n `fr`,\n `pt`,\n] as const;\n"]}
1
+ {"version":3,"file":"locale-codes.js","sourceRoot":"","sources":["../../../src/locales/locale-codes.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,iDAAiD;AAEjD;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC;AAEjC;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC;AAEzD;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC","sourcesContent":["// Do not modify this file by hand!\n// Re-generate this file by running lit-localize.\n\n/**\n * The locale code that templates in this source code are written in.\n */\nexport const sourceLocale = `en`;\n\n/**\n * The other locale codes that this application is localized into. Sorted\n * lexicographically.\n */\nexport const targetLocales = [`es`, `fr`, `pt`] as const;\n\n/**\n * All valid project locale codes. Sorted lexicographically.\n */\nexport const allLocales = [`en`, `es`, `fr`, `pt`] as const;\n"]}
@@ -3,10 +3,10 @@
3
3
  /* eslint-disable no-irregular-whitespace */
4
4
  /* eslint-disable @typescript-eslint/no-explicit-any */
5
5
  export const templates = {
6
- 's73b4d70c02f4b4e0': `No options`,
7
- 'scf1453991c986b25': `Tab to complete, enter to select`,
8
- 's8f02e3a18ffc083a': `Are not currently in a flow`,
9
- 's638236250662c6b3': `Have sent a message in the last`,
10
- 's4788ee206c4570c7': `Have not started this flow in the last 90 days`,
6
+ s73b4d70c02f4b4e0: `No options`,
7
+ scf1453991c986b25: `Tab to complete, enter to select`,
8
+ s8f02e3a18ffc083a: `Are not currently in a flow`,
9
+ s638236250662c6b3: `Have sent a message in the last`,
10
+ s4788ee206c4570c7: `Have not started this flow in the last 90 days`
11
11
  };
12
12
  //# sourceMappingURL=pt.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"pt.js","sourceRoot":"","sources":["../../../src/locales/pt.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,YAAY;IACvC,mBAAmB,EAAE,kCAAkC;IACvD,mBAAmB,EAAE,6BAA6B;IAClD,mBAAmB,EAAE,iCAAiC;IACtD,mBAAmB,EAAE,gDAAgD;CAChE,CAAC","sourcesContent":["\n // Do not modify this file by hand!\n // Re-generate this file by running lit-localize\n\n \n \n\n /* eslint-disable no-irregular-whitespace */\n /* eslint-disable @typescript-eslint/no-explicit-any */\n\n export const templates = {\n 's73b4d70c02f4b4e0': `No options`,\n'scf1453991c986b25': `Tab to complete, enter to select`,\n's8f02e3a18ffc083a': `Are not currently in a flow`,\n's638236250662c6b3': `Have sent a message in the last`,\n's4788ee206c4570c7': `Have not started this flow in the last 90 days`,\n };\n "]}
1
+ {"version":3,"file":"pt.js","sourceRoot":"","sources":["../../../src/locales/pt.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,gDAAgD;AAEhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,iBAAiB,EAAE,YAAY;IAC/B,iBAAiB,EAAE,kCAAkC;IACrD,iBAAiB,EAAE,6BAA6B;IAChD,iBAAiB,EAAE,iCAAiC;IACpD,iBAAiB,EAAE,gDAAgD;CACpE,CAAC","sourcesContent":["// Do not modify this file by hand!\n// Re-generate this file by running lit-localize\n\n/* eslint-disable no-irregular-whitespace */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n\nexport const templates = {\n s73b4d70c02f4b4e0: `No options`,\n scf1453991c986b25: `Tab to complete, enter to select`,\n s8f02e3a18ffc083a: `Are not currently in a flow`,\n s638236250662c6b3: `Have sent a message in the last`,\n s4788ee206c4570c7: `Have not started this flow in the last 90 days`\n};\n"]}