@nyaruka/temba-components 0.124.0 → 0.124.2

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 (79) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/TEST_OPTIMIZATION.md +158 -0
  3. package/demo/alert/example.html +65 -0
  4. package/demo/button/example.html +71 -0
  5. package/demo/chart/example.html +56 -0
  6. package/demo/checkbox/example.html +72 -0
  7. package/demo/compose/example.html +72 -0
  8. package/demo/data/images/gus.png +0 -0
  9. package/demo/data/images/purrington.jpg +0 -0
  10. package/demo/data/server/opened-tickets.json +40 -0
  11. package/demo/data/server/response-time.json +27 -0
  12. package/demo/datepicker/example.html +69 -0
  13. package/demo/dialog/example.html +107 -0
  14. package/demo/dropdown/example.html +99 -0
  15. package/demo/index.html +152 -445
  16. package/demo/misc/example.html +72 -0
  17. package/demo/progress/example.html +59 -0
  18. package/demo/{drag-drop-demo.html → select/drag-and-drop.html} +2 -1
  19. package/demo/select/example.html +82 -0
  20. package/demo/select/multi.html +73 -0
  21. package/demo/slider/example.html +59 -0
  22. package/demo/sortable-list/example.html +99 -0
  23. package/demo/styles.css +183 -0
  24. package/demo/tabs/example.html +91 -0
  25. package/demo/textinput/completion.html +56 -0
  26. package/demo/textinput/example.html +61 -0
  27. package/dist/temba-components.js +23 -26
  28. package/dist/temba-components.js.map +1 -1
  29. package/out-tsc/src/chart/TembaChart.js +27 -22
  30. package/out-tsc/src/chart/TembaChart.js.map +1 -1
  31. package/out-tsc/src/flow/Editor.js +1 -1
  32. package/out-tsc/src/flow/Editor.js.map +1 -1
  33. package/out-tsc/src/select/Select.js +1 -1
  34. package/out-tsc/src/select/Select.js.map +1 -1
  35. package/out-tsc/src/thumbnail/Thumbnail.js +1 -1
  36. package/out-tsc/src/thumbnail/Thumbnail.js.map +1 -1
  37. package/out-tsc/test/temba-chart.test.js +1 -1
  38. package/out-tsc/test/temba-chart.test.js.map +1 -1
  39. package/out-tsc/test/temba-compose.test.js +6 -30
  40. package/out-tsc/test/temba-compose.test.js.map +1 -1
  41. package/out-tsc/test/temba-contact-chat.test.js +1 -2
  42. package/out-tsc/test/temba-contact-chat.test.js.map +1 -1
  43. package/out-tsc/test/temba-dropdown.test.js +1 -1
  44. package/out-tsc/test/temba-dropdown.test.js.map +1 -1
  45. package/out-tsc/test/temba-omnibox.test.js +4 -0
  46. package/out-tsc/test/temba-omnibox.test.js.map +1 -1
  47. package/out-tsc/test/temba-select.test.js +49 -0
  48. package/out-tsc/test/temba-select.test.js.map +1 -1
  49. package/out-tsc/test/temba-toast.test.js +1 -2
  50. package/out-tsc/test/temba-toast.test.js.map +1 -1
  51. package/out-tsc/test/temba-utils-index.test.js +2 -2
  52. package/out-tsc/test/temba-utils-index.test.js.map +1 -1
  53. package/out-tsc/test/utils.test.js +31 -3
  54. package/out-tsc/test/utils.test.js.map +1 -1
  55. package/package.json +2 -3
  56. package/screenshots/truth/webchat/connected-state.png +0 -0
  57. package/src/chart/TembaChart.ts +29 -22
  58. package/src/flow/Editor.ts +1 -1
  59. package/src/select/Select.ts +1 -1
  60. package/src/thumbnail/Thumbnail.ts +1 -1
  61. package/test/temba-chart.test.ts +1 -1
  62. package/test/temba-compose.test.ts +11 -38
  63. package/test/temba-contact-chat.test.ts +4 -6
  64. package/test/temba-dropdown.test.ts +1 -1
  65. package/test/temba-omnibox.test.ts +5 -0
  66. package/test/temba-select.test.ts +67 -0
  67. package/test/temba-toast.test.ts +2 -2
  68. package/test/temba-utils-index.test.ts +2 -2
  69. package/test/utils.test.ts +39 -3
  70. package/web-test-runner.config.mjs +4 -2
  71. package/.storybook/main.js +0 -14
  72. package/.storybook/preview-head.html +0 -1
  73. package/.storybook/preview.js +0 -17
  74. package/demo/agents.html +0 -147
  75. package/demo/old.html +0 -573
  76. package/demo/remote.html +0 -3
  77. package/demo/test-drag-drop.html +0 -94
  78. package/screenshots/truth/compose/attachments-with-files-focused.png +0 -0
  79. package/stories/temba-checkbox.stories.md +0 -37
package/demo/agents.html DELETED
@@ -1,147 +0,0 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8">
5
- <link
6
- href="/sitestatic/css/temba-components.css"
7
- rel="stylesheet"
8
- type="text/css"
9
- />
10
-
11
- <link
12
- href="/sitestatic/css/tailwind.css"
13
- rel="stylesheet"
14
- type="text/css"
15
- />
16
-
17
- <link
18
- href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
19
- rel="stylesheet"
20
- />
21
-
22
- <style>
23
- html {
24
- --color-text-dark: #555 !important;
25
- }
26
-
27
- temba-select[name='ticket-filter'] {
28
- margin-bottom: 0.5em;
29
- margin-top: -0.4em;
30
- }
31
-
32
- .ticket-list {
33
- flex-basis: 300px;
34
- flex-grow: 0;
35
- flex-shrink: 0;
36
- transition: all 200ms ease-in;
37
- }
38
-
39
- @media only screen and (max-width: 1024px) {
40
- .ticket-list {
41
- flex-basis: 200px;
42
- }
43
- }
44
-
45
- @media only screen and (max-width: 768px) {
46
- .ticket-list {
47
- flex-basis: 125px;
48
- }
49
- }
50
-
51
- </style>
52
- <script type="module">
53
- import '../out-tsc/temba-modules.js';
54
- </script>
55
-
56
- <script language="javascript">
57
-
58
- function handleContactChange(event) {
59
- const ticket = event.target.value;
60
- const chat = document.querySelector("temba-contact-chat");
61
- chat.ticket = ticket;
62
- }
63
-
64
- function handleContactHistoryUpdate(event) {
65
- // tell our list to refresh since we know things happened
66
- const tickets = document.querySelector("temba-tickets");
67
- tickets.refresh();
68
- }
69
-
70
- function handleTicketsRefreshed(event) {
71
- // tell our chat to refresh since we know things are new in our list
72
- const chat = document.querySelector("temba-contact-chat");
73
- chat.refresh();
74
- }
75
-
76
- function handleFilterChanged(event) {
77
- const tickets = document.querySelector("temba-tickets");
78
- const chat = document.querySelector("temba-contact-chat");
79
-
80
- // if we have auto selecting, don't clear the chat
81
- if (!tickets.nextSelection) {
82
- chat.ticket = null;
83
- }
84
-
85
- const filter = event.target.values[0].value;
86
- if (filter === "O") {
87
- tickets.endpoint = "/contact/tickets/?_format=json&folder=open"
88
- } else {
89
- tickets.endpoint = "/contact/tickets/?_format=json&folder=closed"
90
- }
91
- }
92
-
93
- function handleTicketChanged(event) {
94
- const ticket = event.detail.ticket;
95
- const focus = event.detail.focus;
96
-
97
- const filter = document.querySelector('temba-select[name="ticket-filter"]');
98
- const tickets = document.querySelector("temba-tickets");
99
-
100
- if (focus) {
101
- tickets.setNextSelection(ticket.uuid);
102
- filter.setSelection(ticket.status);
103
- } else {
104
- // no focus, just refresh
105
- tickets.refresh();
106
- }
107
- }
108
-
109
- </script>
110
-
111
-
112
- </head>
113
- <body>
114
-
115
- <temba-store
116
- completions="/mr/docs/en-us/completion.json"
117
- functions="/mr/docs/en-us/functions.json"
118
- fields="/api/v2/fields.json"
119
- globals="/api/v2/globals.json"
120
- groups="/api/v2/groups.json"
121
- ></temba-store>
122
-
123
- <div class="flex-col">
124
- <div class="flex" style="height:100vh">
125
-
126
- <div class="ticket-list m-4 mr-2 flex flex-col">
127
-
128
- <temba-select name="ticket-filter" onchange="handleFilterChanged(event)">
129
- <temba-option name="Open" value="O" icon="inbox"></temba-option>
130
- <temba-option name="Closed" value="C" icon="check"></temba-option>
131
- </temba-select>
132
-
133
-
134
- <div class="flex flex-grow">
135
- <temba-tickets endpoint="/contact/tickets/?_format=json&folder=open" @temba-refreshed="handleTicketsRefreshed(event)" onchange="handleContactChange(event)"></temba-tickets>
136
- </div>
137
-
138
- </div>
139
-
140
- <div class="flex-grow flex-col h-full py-4 pb-4 pr-4">
141
- <temba-contact-chat @temba-refreshed="handleContactHistoryUpdate(event)" @temba-content-changed="handleTicketChanged(event)"></temba-contact-chat>
142
- </div>
143
-
144
- </div>
145
- </div>
146
- </body>
147
- </html>