@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
package/demo/components/select/drag-and-drop.html ADDED
@@ -0,0 +1,162 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-GB">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>Multi-Select Drag and Drop Demo</title>
6
+ <link
7
+ href="/static/css/temba-components.css"
8
+ rel="stylesheet"
9
+ type="text/css"
10
+ />
11
+ <style>
12
+ body {
13
+ font-family: sans-serif;
14
+ padding: 20px;
15
+ max-width: 800px;
16
+ margin: 0 auto;
17
+ }
18
+ .example {
19
+ margin: 30px 0;
20
+ padding: 20px;
21
+ border: 1px solid #ddd;
22
+ border-radius: 8px;
23
+ }
24
+ .example h3 {
25
+ margin-top: 0;
26
+ color: #333;
27
+ }
28
+ .example p {
29
+ color: #666;
30
+ margin-bottom: 15px;
31
+ }
32
+ .expected {
33
+ background-color: #f0f8ff;
34
+ padding: 10px;
35
+ border-radius: 4px;
36
+ margin-top: 10px;
37
+ }
38
+ .expected strong {
39
+ color: #006400;
40
+ }
41
+ </style>
42
+ </head>
43
+ <body>
44
+ <h1>Multi-Select Drag and Drop Demo</h1>
45
+ <p>
46
+ <a href="/demo/index.html">← Back to main demo</a> |
47
+ <a href="example.html">Basic Examples</a> |
48
+ <a href="multi.html">Multi-Select</a>
49
+ </p>
50
+ <p>
51
+ This demo shows the drag and drop reordering functionality for
52
+ multi-select components.
53
+ </p>
54
+
55
+ <div class="example">
56
+ <h3>With 3 items (drag and drop enabled)</h3>
57
+ <p>
58
+ This multi-select has 3 pre-selected items. You should be able to drag
59
+ and drop to reorder them.
60
+ </p>
61
+ <temba-select multi searchable id="test3" placeholder="Select colors">
62
+ <temba-option name="Red" value="0" selected></temba-option>
63
+ <temba-option name="Green" value="1" selected></temba-option>
64
+ <temba-option name="Blue" value="2" selected></temba-option>
65
+ </temba-select>
66
+ <div class="expected">
67
+ <strong>Expected behavior:</strong>
68
+ <ul>
69
+ <li>Items should be wrapped in a sortable container</li>
70
+ <li>Drag an item to see a ghost element following the mouse</li>
71
+ <li>Drop on another item to swap their positions</li>
72
+ <li>Drop outside to cancel the operation</li>
73
+ <li>Items should maintain cursor style when hovering</li>
74
+ </ul>
75
+ </div>
76
+ </div>
77
+
78
+ <div class="example">
79
+ <h3>With 2 items (drag and drop enabled)</h3>
80
+ <p>
81
+ This multi-select has 2 pre-selected items. You should be able to drag
82
+ and drop to reorder them.
83
+ </p>
84
+ <temba-select multi id="test2" placeholder="Select fruits">
85
+ <temba-option name="Apple" value="apple" selected></temba-option>
86
+ <temba-option name="Banana" value="banana" selected></temba-option>
87
+ </temba-select>
88
+ <div class="expected">
89
+ <strong>Expected behavior:</strong>
90
+ <ul>
91
+ <li>Same drag and drop functionality as above</li>
92
+ <li>Swapping the two items should work</li>
93
+ </ul>
94
+ </div>
95
+ </div>
96
+
97
+ <div class="example">
98
+ <h3>With 1 item (no drag and drop)</h3>
99
+ <p>
100
+ This multi-select has only 1 pre-selected item. Drag and drop should not
101
+ be enabled.
102
+ </p>
103
+ <temba-select multi id="test1" placeholder="Select an item">
104
+ <temba-option name="Solo" value="solo" selected></temba-option>
105
+ </temba-select>
106
+ <div class="expected">
107
+ <strong>Expected behavior:</strong>
108
+ <ul>
109
+ <li>No sortable container should be present</li>
110
+ <li>Normal multi-select appearance and behavior</li>
111
+ </ul>
112
+ </div>
113
+ </div>
114
+
115
+ <div class="example">
116
+ <h3>Regular single select (no drag and drop)</h3>
117
+ <p>
118
+ This is a regular single-select. Drag and drop should not be enabled.
119
+ </p>
120
+ <temba-select id="single">
121
+ <temba-option name="Option 1" value="1" selected></temba-option>
122
+ </temba-select>
123
+ <div class="expected">
124
+ <strong>Expected behavior:</strong>
125
+ <ul>
126
+ <li>Normal single-select appearance and behavior</li>
127
+ <li>No sortable functionality</li>
128
+ </ul>
129
+ </div>
130
+ </div>
131
+
132
+ <script>
133
+ // Add event listeners to monitor changes
134
+ document.querySelectorAll('temba-select[multi]').forEach((select) => {
135
+ select.addEventListener('change', () => {
136
+ console.log(`${select.id} values changed:`, select.values);
137
+ });
138
+ });
139
+
140
+ // Log initial state after components load
141
+ window.addEventListener('load', () => {
142
+ setTimeout(() => {
143
+ console.log('=== Initial State ===');
144
+ document.querySelectorAll('temba-select').forEach((select) => {
145
+ const sortableList = select.shadowRoot?.querySelector(
146
+ 'temba-sortable-list'
147
+ );
148
+ console.log(`${select.id}:`, {
149
+ values: select.values,
150
+ hasSortableList: !!sortableList,
151
+ isMulti: select.hasAttribute('multi')
152
+ });
153
+ });
154
+ }, 500);
155
+ });
156
+ </script>
157
+
158
+ <script type="module">
159
+ import '/out-tsc/temba-modules.js';
160
+ </script>
161
+ </body>
162
+ </html>
package/demo/components/select/example.html ADDED
@@ -0,0 +1,76 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-GB">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>Select Component Examples</title>
6
+ <link
7
+ href="/static/css/temba-components.css"
8
+ rel="stylesheet"
9
+ type="text/css"
10
+ />
11
+ <link
12
+ href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
13
+ rel="stylesheet"
14
+ />
15
+ <link href="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
16
+ </head>
17
+ <body>
18
+ <h1>Select Component Examples</h1>
19
+ <p><a href="/demo/index.html">← Back to main demo</a></p>
20
+
21
+ <div class="example">
22
+ <h3>Basic Select</h3>
23
+ <p>A simple dropdown selection with info text</p>
24
+ <temba-select
25
+ placeholder="Select a color"
26
+ info_text="Some colors are very dangerous, choose wisely"
27
+ >
28
+ <temba-option name="Red" value="0"></temba-option>
29
+ <temba-option name="Green" value="1"></temba-option>
30
+ <temba-option name="Blue" value="2"></temba-option>
31
+ </temba-select>
32
+ </div>
33
+
34
+ <div class="example">
35
+ <h3>Clearable Select</h3>
36
+ <p>A select that can be cleared after selection</p>
37
+ <temba-select placeholder="Select a color" clearable>
38
+ <temba-option name="Red" value="0"></temba-option>
39
+ <temba-option name="Green" value="1"></temba-option>
40
+ <temba-option name="Blue" value="2"></temba-option>
41
+ </temba-select>
42
+ </div>
43
+
44
+ <div class="example">
45
+ <h3>Empty Select</h3>
46
+ <p>A select with no options to show empty state</p>
47
+ <temba-select placeholder="Click to see empty state"> </temba-select>
48
+ </div>
49
+
50
+ <div class="example">
51
+ <h3>Empty Searchable Select</h3>
52
+ <p>A searchable select with no options</p>
53
+ <temba-select placeholder="Search for options" searchable> </temba-select>
54
+ </div>
55
+
56
+ <div class="example">
57
+ <h3>Pre-selected Option</h3>
58
+ <p>A select with a pre-selected value</p>
59
+ <temba-select placeholder="Select a color" clearable>
60
+ <temba-option name="Red" value="0"></temba-option>
61
+ <temba-option name="Green" value="1" selected></temba-option>
62
+ <temba-option name="Blue" value="2"></temba-option>
63
+ </temba-select>
64
+ </div>
65
+
66
+ <script>
67
+ function handleColorChange(event) {
68
+ console.log('Color changed:', event.target.value);
69
+ }
70
+ </script>
71
+
72
+ <script type="module">
73
+ import '/out-tsc/temba-modules.js';
74
+ </script>
75
+ </body>
76
+ </html>
package/demo/components/select/multi.html ADDED
@@ -0,0 +1,72 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-GB">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>Multi-Select Examples</title>
6
+ <link
7
+ href="/static/css/temba-components.css"
8
+ rel="stylesheet"
9
+ type="text/css"
10
+ />
11
+ <link
12
+ href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
13
+ rel="stylesheet"
14
+ />
15
+ <link href="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
16
+ </head>
17
+ <body>
18
+ <h1>Multi-Select Examples</h1>
19
+ <p>
20
+ <a href="/demo/index.html">← Back to main demo</a> |
21
+ <a href="example.html">Basic Examples</a> |
22
+ <a href="drag-and-drop.html">Drag & Drop</a>
23
+ </p>
24
+
25
+ <div class="example">
26
+ <h3>Multi-Select with Expressions</h3>
27
+ <p>A multi-select that supports expressions and is searchable</p>
28
+ <temba-select
29
+ placeholder="Select a color"
30
+ expressions="message"
31
+ values='[{"name":"Red","value":"0"}]'
32
+ searchable
33
+ multi
34
+ >
35
+ <temba-option name="Red" value="0"></temba-option>
36
+ <temba-option name="Green" value="1"></temba-option>
37
+ <temba-option name="Blue" value="2"></temba-option>
38
+ </temba-select>
39
+ </div>
40
+
41
+ <div class="example">
42
+ <h3>Limited Multi-Select</h3>
43
+ <p>A multi-select with a maximum number of items (2)</p>
44
+ <temba-select
45
+ placeholder="Select 2 colors"
46
+ name="Color2"
47
+ label="Select up to 2 colors"
48
+ expressions="message"
49
+ maxItems="2"
50
+ values='[{"name":"Red","value":"0"}]'
51
+ searchable
52
+ multi
53
+ >
54
+ <temba-option name="Red" value="0"></temba-option>
55
+ <temba-option name="Green" value="1"></temba-option>
56
+ <temba-option name="Blue" value="2"></temba-option>
57
+ <temba-option name="Yellow" value="3"></temba-option>
58
+ <temba-option name="Purple" value="4"></temba-option>
59
+ </temba-select>
60
+ </div>
61
+
62
+ <div class="example">
63
+ <h3>Empty Multi-Select</h3>
64
+ <p>A multi-select with no options to show empty state</p>
65
+ <temba-select placeholder="Select multiple options" multi> </temba-select>
66
+ </div>
67
+
68
+ <script type="module">
69
+ import '/out-tsc/temba-modules.js';
70
+ </script>
71
+ </body>
72
+ </html>
package/demo/components/slider/example.html ADDED
@@ -0,0 +1,55 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-GB">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>Slider Examples</title>
6
+ <link
7
+ href="/static/css/temba-components.css"
8
+ rel="stylesheet"
9
+ type="text/css"
10
+ />
11
+ <link
12
+ href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
13
+ rel="stylesheet"
14
+ />
15
+ <link href="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
16
+ </head>
17
+ <body>
18
+ <h1>Slider Examples</h1>
19
+ <p><a href="/demo/index.html">← Back to main demo</a></p>
20
+
21
+ <div class="example">
22
+ <h3>Slider with Range</h3>
23
+ <p>A slider that shows the full range</p>
24
+ <temba-slider value="50" min="0" max="100" range></temba-slider>
25
+ </div>
26
+
27
+ <div class="example">
28
+ <h3>Slider without Range</h3>
29
+ <p>A slider that only shows the selected value</p>
30
+ <temba-slider value="50" min="0" max="100"></temba-slider>
31
+ </div>
32
+
33
+ <div class="example">
34
+ <h3>Slider with Different Range</h3>
35
+ <p>A slider with a different min/max range</p>
36
+ <temba-slider value="25" min="10" max="50" range></temba-slider>
37
+ </div>
38
+
39
+ <div class="example">
40
+ <h3>Slider at Minimum</h3>
41
+ <p>A slider set to its minimum value</p>
42
+ <temba-slider value="0" min="0" max="100" range></temba-slider>
43
+ </div>
44
+
45
+ <div class="example">
46
+ <h3>Slider at Maximum</h3>
47
+ <p>A slider set to its maximum value</p>
48
+ <temba-slider value="100" min="0" max="100" range></temba-slider>
49
+ </div>
50
+
51
+ <script type="module">
52
+ import '/out-tsc/temba-modules.js';
53
+ </script>
54
+ </body>
55
+ </html>
package/demo/{sortable-list → components/sortable-list}/example.html RENAMED
@@ -12,11 +12,11 @@
12
12
  href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
13
13
  rel="stylesheet"
14
14
  />
15
- <link href="../styles.css" rel="stylesheet" type="text/css" />
15
+ <link href="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
16
16
  </head>
17
17
  <body>
18
18
  <h1>Sortable List Examples</h1>
19
- <p><a href="../index.html">← Back to main demo</a></p>
19
+ <p><a href="/demo/index.html">← Back to main demo</a></p>
20
20
 
21
21
  <h2>
22
22
  This component relies on a consumer component that manages the actual
@@ -93,7 +93,7 @@
93
93
  </style>
94
94
 
95
95
  <script type="module">
96
- import '../../out-tsc/temba-modules.js';
96
+ import '/out-tsc/temba-modules.js';
97
97
  </script>
98
98
  </body>
99
99
  </html>
package/demo/components/tabs/example.html ADDED
@@ -0,0 +1,91 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-GB">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>Tabs Examples</title>
6
+ <link
7
+ href="/static/css/temba-components.css"
8
+ rel="stylesheet"
9
+ type="text/css"
10
+ />
11
+ <link
12
+ href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
13
+ rel="stylesheet"
14
+ />
15
+ <link href="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
16
+ <style>
17
+ temba-tab > div {
18
+ padding: 20px;
19
+ }
20
+ </style>
21
+ </head>
22
+ <body>
23
+ <h1>Tabs Examples</h1>
24
+ <p><a href="/demo/index.html">← Back to main demo</a></p>
25
+
26
+ <div class="example">
27
+ <h3>Basic Tabs</h3>
28
+ <p>A simple tab component</p>
29
+ <temba-tabs>
30
+ <temba-tab name="tab1" label="First Tab">
31
+ <div>This is the content of the first tab.</div>
32
+ </temba-tab>
33
+ <temba-tab name="tab2" label="Second Tab">
34
+ <div>This is the content of the second tab.</div>
35
+ </temba-tab>
36
+ <temba-tab name="tab3" label="Third Tab">
37
+ <div>This is the content of the third tab.</div>
38
+ </temba-tab>
39
+ </temba-tabs>
40
+ </div>
41
+
42
+ <div class="example">
43
+ <h3>Tabs with Default Selection</h3>
44
+ <p>Tabs with a pre-selected active tab</p>
45
+ <temba-tabs index="1">
46
+ <temba-tab name="overview" label="Overview">
47
+ <div>Overview content goes here.</div>
48
+ </temba-tab>
49
+ <temba-tab name="details" label="Details">
50
+ <div>Detailed information is displayed in this tab.</div>
51
+ </temba-tab>
52
+ <temba-tab name="settings" label="Settings">
53
+ <div>Configuration settings can be found here.</div>
54
+ </temba-tab>
55
+ </temba-tabs>
56
+ </div>
57
+
58
+ <div class="example">
59
+ <h3>Collapsible Tabs</h3>
60
+ <p>Tabs that can collapse on smaller screens</p>
61
+ <temba-tabs collapses>
62
+ <temba-tab name="info" label="Information">
63
+ <div>
64
+ <h4>Information Tab</h4>
65
+ <p>
66
+ This tab contains important information about the current item.
67
+ </p>
68
+ </div>
69
+ </temba-tab>
70
+ <temba-tab name="stats" label="Statistics">
71
+ <div>
72
+ <h4>Statistics Tab</h4>
73
+ <p>Statistical data and charts would be displayed here.</p>
74
+ </div>
75
+ </temba-tab>
76
+ <temba-tab name="history" label="History">
77
+ <div>
78
+ <h4>History Tab</h4>
79
+ <p>
80
+ Historical records and activity logs are shown in this section.
81
+ </p>
82
+ </div>
83
+ </temba-tab>
84
+ </temba-tabs>
85
+ </div>
86
+
87
+ <script type="module">
88
+ import '/out-tsc/temba-modules.js';
89
+ </script>
90
+ </body>
91
+ </html>
package/demo/{textinput → components/textinput}/completion.html RENAMED
@@ -12,13 +12,13 @@
12
12
  href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
13
13
  rel="stylesheet"
14
14
  />
15
- <link href="../styles.css" rel="stylesheet" type="text/css" />
15
+ <link href="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
16
16
  </head>
17
17
  <body>
18
18
  <h1>Completion Examples</h1>
19
19
 
20
20
  <p>
21
- <a href="../index.html">← Back to main demo</a> |
21
+ <a href="/demo/index.html">← Back to main demo</a> |
22
22
  <a href="example.html">Basic Text Input</a>
23
23
  </p>
24
24
 
@@ -50,7 +50,7 @@
50
50
  </div>
51
51
 
52
52
  <script type="module">
53
- import '../../out-tsc/temba-modules.js';
53
+ import '/out-tsc/temba-modules.js';
54
54
  </script>
55
55
  </body>
56
56
  </html>
package/demo/components/textinput/example.html ADDED
@@ -0,0 +1,141 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-GB">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>Text Input Examples</title>
6
+ <link
7
+ href="/static/css/temba-components.css"
8
+ rel="stylesheet"
9
+ type="text/css"
10
+ />
11
+ <link
12
+ href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
13
+ rel="stylesheet"
14
+ />
15
+ <link href="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
16
+ <link href="/demo/static/css/prism.css" rel="stylesheet" />
17
+ <script type="module" src="/demo/static/js/prism-loader.js"></script>
18
+ </head>
19
+ <body>
20
+ <h1>Text Input Examples</h1>
21
+ <p>
22
+ <a href="/demo/index.html">← Back to main demo</a> |
23
+ <a href="completion.html">Completion Examples</a>
24
+ </p>
25
+
26
+ <table class="attr-table">
27
+ <thead>
28
+ <tr>
29
+ <th>Attribute</th>
30
+ <th>Description</th>
31
+ <th>Default</th>
32
+ </tr>
33
+ </thead>
34
+ <tbody>
35
+ <tr>
36
+ <td>value</td>
37
+ <td>The current text value of the input</td>
38
+ <td>''</td>
39
+ </tr>
40
+ <tr>
41
+ <td>placeholder</td>
42
+ <td>Placeholder text shown when input is empty</td>
43
+ <td>''</td>
44
+ </tr>
45
+ <tr>
46
+ <td>textarea</td>
47
+ <td>Renders as a multi-line textarea instead of single-line input</td>
48
+ <td>false</td>
49
+ </tr>
50
+ <tr>
51
+ <td>password</td>
52
+ <td>Renders as a password input with hidden text</td>
53
+ <td>false</td>
54
+ </tr>
55
+ <tr>
56
+ <td>maxlength</td>
57
+ <td>Maximum number of characters allowed</td>
58
+ <td>None</td>
59
+ </tr>
60
+ <tr>
61
+ <td>clearable</td>
62
+ <td>Shows a clear button to empty the input</td>
63
+ <td>false</td>
64
+ </tr>
65
+ <tr>
66
+ <td>autogrow</td>
67
+ <td>Automatically adjusts textarea height based on content</td>
68
+ <td>false</td>
69
+ </tr>
70
+ <tr>
71
+ <td>gsm</td>
72
+ <td>Enables GSM character validation for SMS messages</td>
73
+ <td>false</td>
74
+ </tr>
75
+ <tr>
76
+ <td>submitOnEnter</td>
77
+ <td>Whether pressing Enter submits the form</td>
78
+ <td>true</td>
79
+ </tr>
80
+ <tr>
81
+ <td>type</td>
82
+ <td>Input type (text, email, number, etc.)</td>
83
+ <td>'text'</td>
84
+ </tr>
85
+ </tbody>
86
+ </table>
87
+
88
+ <div class="example">
89
+ <h3>Basic Text Input</h3>
90
+ <p>A simple text input field</p>
91
+ <pre
92
+ class="example-html"
93
+ ><code class="language-markup">&lt;temba-textinput value="plain text"&gt;&lt;/temba-textinput&gt;</code></pre>
94
+ <temba-textinput value="plain text"></temba-textinput>
95
+ </div>
96
+
97
+ <div class="example">
98
+ <h3>Text Input with Label and Help</h3>
99
+ <p>A text input with label, help text, and placeholder</p>
100
+ <pre
101
+ class="example-html"
102
+ ><code class="language-markup">&lt;temba-textinput
103
+ name="start"
104
+ label="Start Time"
105
+ help_text="This is something you should think long and hard about"
106
+ placeholder="Put something down, for real"
107
+ value="2020-11-28 15:03"
108
+ clearable
109
+ datetimepicker
110
+ &gt;&lt;/temba-textinput&gt;</code></pre>
111
+ <temba-textinput
112
+ name="start"
113
+ label="Start Time"
114
+ help_text="This is something you should think long and hard about"
115
+ placeholder="Put something down, for real"
116
+ value="2020-11-28 15:03"
117
+ clearable
118
+ datetimepicker
119
+ ></temba-textinput>
120
+ </div>
121
+
122
+ <div class="example">
123
+ <h3>Empty Text Input</h3>
124
+ <p>A text input with just a placeholder</p>
125
+ <pre
126
+ class="example-html"
127
+ ><code class="language-markup">&lt;temba-textinput placeholder="Enter some text here"&gt;&lt;/temba-textinput&gt;</code></pre>
128
+ <temba-textinput placeholder="Enter some text here"></temba-textinput>
129
+ </div>
130
+
131
+ <div class="example">
132
+ <h3>Clearable Text Input</h3>
133
+ <p>A text input that can be cleared</p>
134
+ <temba-textinput value="This can be cleared" clearable></temba-textinput>
135
+ </div>
136
+
137
+ <script type="module">
138
+ import '/out-tsc/temba-modules.js';
139
+ </script>
140
+ </body>
141
+ </html>
package/demo/{webchat → components/webchat}/example.html RENAMED
@@ -12,7 +12,7 @@
12
12
  href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
13
13
  rel="stylesheet"
14
14
  />
15
- <link href="../styles.css" rel="stylesheet" type="text/css" />
15
+ <link href="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
16
16
  <script>
17
17
  function handleOpen() {
18
18
  const webchat = document.querySelector('temba-webchat');
@@ -37,7 +37,7 @@
37
37
  </head>
38
38
  <body>
39
39
  <h1>WebChat example</h1>
40
- <p><a href="../index.html">← Back to main demo</a></p>
40
+ <p><a href="/demo/index.html">← Back to main demo</a></p>
41
41
 
42
42
  <div style="margin: 0.5em">Channel UUID</div>
43
43
  <div
@@ -65,7 +65,7 @@
65
65
  <temba-webchat></temba-webchat>
66
66
 
67
67
  <script type="module">
68
- import '../../out-tsc/temba-modules.js';
68
+ import '/out-tsc/temba-modules.js';
69
69
  </script>
70
70
  </body>
71
71
  </html>