@nyaruka/temba-components 0.123.0 → 0.124.1

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 (146) hide show
  1. package/.github/copilot-instructions.md +22 -4
  2. package/CHANGELOG.md +21 -0
  3. package/TEST_OPTIMIZATION.md +158 -0
  4. package/demo/alert/example.html +65 -0
  5. package/demo/button/example.html +71 -0
  6. package/demo/chart/example.html +56 -0
  7. package/demo/checkbox/example.html +72 -0
  8. package/demo/compose/example.html +72 -0
  9. package/demo/data/images/gus.png +0 -0
  10. package/demo/data/images/purrington.jpg +0 -0
  11. package/demo/data/server/opened-tickets.json +40 -0
  12. package/demo/data/server/response-time.json +27 -0
  13. package/demo/datepicker/example.html +69 -0
  14. package/demo/dialog/example.html +107 -0
  15. package/demo/dropdown/example.html +99 -0
  16. package/demo/index.html +152 -430
  17. package/demo/misc/example.html +72 -0
  18. package/demo/progress/example.html +59 -0
  19. package/demo/select/drag-and-drop.html +142 -0
  20. package/demo/select/example.html +82 -0
  21. package/demo/select/multi.html +73 -0
  22. package/demo/slider/example.html +59 -0
  23. package/demo/sortable-list/example.html +99 -0
  24. package/demo/styles.css +183 -0
  25. package/demo/tabs/example.html +91 -0
  26. package/demo/textinput/completion.html +56 -0
  27. package/demo/textinput/example.html +61 -0
  28. package/dist/temba-components.js +323 -191
  29. package/dist/temba-components.js.map +1 -1
  30. package/out-tsc/src/chart/TembaChart.js +19 -16
  31. package/out-tsc/src/chart/TembaChart.js.map +1 -1
  32. package/out-tsc/src/fields/FieldManager.js +27 -34
  33. package/out-tsc/src/fields/FieldManager.js.map +1 -1
  34. package/out-tsc/src/flow/Editor.js +1 -1
  35. package/out-tsc/src/flow/Editor.js.map +1 -1
  36. package/out-tsc/src/list/SortableList.js +257 -60
  37. package/out-tsc/src/list/SortableList.js.map +1 -1
  38. package/out-tsc/src/omnibox/Omnibox.js +1 -1
  39. package/out-tsc/src/omnibox/Omnibox.js.map +1 -1
  40. package/out-tsc/src/select/Select.js +198 -38
  41. package/out-tsc/src/select/Select.js.map +1 -1
  42. package/out-tsc/src/thumbnail/Thumbnail.js +1 -1
  43. package/out-tsc/src/thumbnail/Thumbnail.js.map +1 -1
  44. package/out-tsc/src/webchat/WebChat.js +5 -2
  45. package/out-tsc/src/webchat/WebChat.js.map +1 -1
  46. package/out-tsc/test/temba-chart.test.js +1 -1
  47. package/out-tsc/test/temba-chart.test.js.map +1 -1
  48. package/out-tsc/test/temba-compose.test.js +6 -30
  49. package/out-tsc/test/temba-compose.test.js.map +1 -1
  50. package/out-tsc/test/temba-contact-chat.test.js +1 -2
  51. package/out-tsc/test/temba-contact-chat.test.js.map +1 -1
  52. package/out-tsc/test/temba-dropdown.test.js +1 -1
  53. package/out-tsc/test/temba-dropdown.test.js.map +1 -1
  54. package/out-tsc/test/temba-flow-editor-node.test.js +273 -0
  55. package/out-tsc/test/temba-flow-editor-node.test.js.map +1 -0
  56. package/out-tsc/test/temba-flow-editor.test.js +244 -0
  57. package/out-tsc/test/temba-flow-editor.test.js.map +1 -0
  58. package/out-tsc/test/temba-flow-plumber.test.js +145 -0
  59. package/out-tsc/test/temba-flow-plumber.test.js.map +1 -0
  60. package/out-tsc/test/temba-flow-render.test.js +171 -0
  61. package/out-tsc/test/temba-flow-render.test.js.map +1 -0
  62. package/out-tsc/test/temba-omnibox.test.js +6 -3
  63. package/out-tsc/test/temba-omnibox.test.js.map +1 -1
  64. package/out-tsc/test/temba-select.test.js +183 -53
  65. package/out-tsc/test/temba-select.test.js.map +1 -1
  66. package/out-tsc/test/temba-sortable-list.test.js +91 -15
  67. package/out-tsc/test/temba-sortable-list.test.js.map +1 -1
  68. package/out-tsc/test/temba-toast.test.js +1 -2
  69. package/out-tsc/test/temba-toast.test.js.map +1 -1
  70. package/out-tsc/test/temba-utils-index.test.js +2 -2
  71. package/out-tsc/test/temba-utils-index.test.js.map +1 -1
  72. package/out-tsc/test/temba-webchat-lightbox-fix.test.js +42 -0
  73. package/out-tsc/test/temba-webchat-lightbox-fix.test.js.map +1 -0
  74. package/out-tsc/test/utils.test.js +58 -0
  75. package/out-tsc/test/utils.test.js.map +1 -1
  76. package/package.json +2 -3
  77. package/screenshots/truth/flow/editor-basic.png +0 -0
  78. package/screenshots/truth/list/fields-dragging.png +0 -0
  79. package/screenshots/truth/list/sortable-dragging.png +0 -0
  80. package/screenshots/truth/list/sortable-dropped.png +0 -0
  81. package/screenshots/truth/list/sortable.png +0 -0
  82. package/screenshots/truth/omnibox/selected.png +0 -0
  83. package/screenshots/truth/select/disabled-multi-selection.png +0 -0
  84. package/screenshots/truth/select/disabled-selection.png +0 -0
  85. package/screenshots/truth/select/disabled.png +0 -0
  86. package/screenshots/truth/select/embedded.png +0 -0
  87. package/screenshots/truth/select/empty-options.png +0 -0
  88. package/screenshots/truth/select/expression-selected.png +0 -0
  89. package/screenshots/truth/select/expressions.png +0 -0
  90. package/screenshots/truth/select/functions.png +0 -0
  91. package/screenshots/truth/select/local-options.png +0 -0
  92. package/screenshots/truth/select/multi-reorder-final.png +0 -0
  93. package/screenshots/truth/select/multi-reorder-initial.png +0 -0
  94. package/screenshots/truth/select/multi-with-endpoint.png +0 -0
  95. package/screenshots/truth/select/multiple-initial-values.png +0 -0
  96. package/screenshots/truth/select/remote-options.png +0 -0
  97. package/screenshots/truth/select/search-enabled.png +0 -0
  98. package/screenshots/truth/select/search-multi-no-matches.png +0 -0
  99. package/screenshots/truth/select/search-selected-focus.png +0 -0
  100. package/screenshots/truth/select/search-selected.png +0 -0
  101. package/screenshots/truth/select/search-with-selected.png +0 -0
  102. package/screenshots/truth/select/searching.png +0 -0
  103. package/screenshots/truth/select/selected-multi-maxitems-reached.png +0 -0
  104. package/screenshots/truth/select/selected-multi.png +0 -0
  105. package/screenshots/truth/select/selected-single.png +0 -0
  106. package/screenshots/truth/select/selection-clearable.png +0 -0
  107. package/screenshots/truth/select/static-initial-value.png +0 -0
  108. package/screenshots/truth/select/static-initial-via-selected.png +0 -0
  109. package/screenshots/truth/select/truncated-selection.png +0 -0
  110. package/screenshots/truth/select/with-placeholder.png +0 -0
  111. package/screenshots/truth/select/without-placeholder.png +0 -0
  112. package/screenshots/truth/templates/default.png +0 -0
  113. package/screenshots/truth/templates/unapproved.png +0 -0
  114. package/screenshots/truth/webchat/connected-state.png +0 -0
  115. package/src/chart/TembaChart.ts +20 -16
  116. package/src/fields/FieldManager.ts +30 -38
  117. package/src/flow/Editor.ts +1 -1
  118. package/src/list/SortableList.ts +291 -67
  119. package/src/omnibox/Omnibox.ts +1 -1
  120. package/src/select/Select.ts +213 -42
  121. package/src/thumbnail/Thumbnail.ts +1 -1
  122. package/src/webchat/WebChat.ts +5 -2
  123. package/test/temba-chart.test.ts +1 -1
  124. package/test/temba-compose.test.ts +11 -38
  125. package/test/temba-contact-chat.test.ts +4 -6
  126. package/test/temba-dropdown.test.ts +1 -1
  127. package/test/temba-flow-editor-node.test.ts +344 -0
  128. package/test/temba-flow-editor.test.ts +301 -0
  129. package/test/temba-flow-plumber.test.ts +189 -0
  130. package/test/temba-flow-render.test.ts +220 -0
  131. package/test/temba-omnibox.test.ts +7 -3
  132. package/test/temba-select.test.ts +247 -79
  133. package/test/temba-sortable-list.test.ts +108 -15
  134. package/test/temba-toast.test.ts +2 -2
  135. package/test/temba-utils-index.test.ts +2 -2
  136. package/test/temba-webchat-lightbox-fix.test.ts +57 -0
  137. package/test/utils.test.ts +88 -0
  138. package/web-test-runner.config.mjs +4 -2
  139. package/.storybook/main.js +0 -14
  140. package/.storybook/preview-head.html +0 -1
  141. package/.storybook/preview.js +0 -17
  142. package/demo/agents.html +0 -147
  143. package/demo/old.html +0 -573
  144. package/demo/remote.html +0 -3
  145. package/screenshots/truth/compose/attachments-with-files-focused.png +0 -0
  146. package/stories/temba-checkbox.stories.md +0 -37
package/demo/styles.css ADDED
@@ -0,0 +1,183 @@
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: 8px;
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
+ }
package/demo/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
16
+ href="../styles.css"
17
+ rel="stylesheet"
18
+ type="text/css"
19
+ />
20
+ <style>
21
+ temba-tab > div {
22
+ padding: 20px;
23
+ }
24
+ </style>
25
+ </head>
26
+ <body>
27
+ <h1>Tabs Examples</h1>
28
+ <p><a href="../index.html">← Back to main demo</a></p>
29
+
30
+ <div class="example">
31
+ <h3>Basic Tabs</h3>
32
+ <p>A simple tab component</p>
33
+ <temba-tabs>
34
+ <temba-tab name="tab1" label="First Tab">
35
+ <div>This is the content of the first tab.</div>
36
+ </temba-tab>
37
+ <temba-tab name="tab2" label="Second Tab">
38
+ <div>This is the content of the second tab.</div>
39
+ </temba-tab>
40
+ <temba-tab name="tab3" label="Third Tab">
41
+ <div>This is the content of the third tab.</div>
42
+ </temba-tab>
43
+ </temba-tabs>
44
+ </div>
45
+
46
+ <div class="example">
47
+ <h3>Tabs with Default Selection</h3>
48
+ <p>Tabs with a pre-selected active tab</p>
49
+ <temba-tabs index="1">
50
+ <temba-tab name="overview" label="Overview">
51
+ <div>Overview content goes here.</div>
52
+ </temba-tab>
53
+ <temba-tab name="details" label="Details">
54
+ <div>Detailed information is displayed in this tab.</div>
55
+ </temba-tab>
56
+ <temba-tab name="settings" label="Settings">
57
+ <div>Configuration settings can be found here.</div>
58
+ </temba-tab>
59
+ </temba-tabs>
60
+ </div>
61
+
62
+ <div class="example">
63
+ <h3>Collapsible Tabs</h3>
64
+ <p>Tabs that can collapse on smaller screens</p>
65
+ <temba-tabs collapses>
66
+ <temba-tab name="info" label="Information">
67
+ <div>
68
+ <h4>Information Tab</h4>
69
+ <p>This tab contains important information about the current item.</p>
70
+ </div>
71
+ </temba-tab>
72
+ <temba-tab name="stats" label="Statistics">
73
+ <div>
74
+ <h4>Statistics Tab</h4>
75
+ <p>Statistical data and charts would be displayed here.</p>
76
+ </div>
77
+ </temba-tab>
78
+ <temba-tab name="history" label="History">
79
+ <div>
80
+ <h4>History Tab</h4>
81
+ <p>Historical records and activity logs are shown in this section.</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/completion.html ADDED
@@ -0,0 +1,56 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-GB">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>Completion 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="../styles.css" rel="stylesheet" type="text/css" />
16
+ </head>
17
+ <body>
18
+ <h1>Completion Examples</h1>
19
+
20
+ <p>
21
+ <a href="../index.html">← Back to main demo</a> |
22
+ <a href="example.html">Basic Text Input</a>
23
+ </p>
24
+
25
+ <h2 style="color: tomato">These examples aren't working yet..</h2>
26
+ <div class="example">
27
+ <h3>Basic Completion</h3>
28
+ <p>A text input with completion functionality</p>
29
+ <temba-completion value="you complete me @cont"></temba-completion>
30
+ </div>
31
+
32
+ <div class="example">
33
+ <h3>Completion with Character Counter</h3>
34
+ <p>A textarea completion with GSM character counter</p>
35
+ <temba-completion
36
+ counter="temba-charcount"
37
+ value="This is a GSM charcounter in a textarea"
38
+ gsm
39
+ textarea
40
+ ></temba-completion>
41
+ <temba-charcount text="count this text"></temba-charcount>
42
+ </div>
43
+
44
+ <div class="example">
45
+ <h3>Empty Completion</h3>
46
+ <p>An empty completion field</p>
47
+ <temba-completion
48
+ placeholder="Start typing to see completion..."
49
+ ></temba-completion>
50
+ </div>
51
+
52
+ <script type="module">
53
+ import '../../out-tsc/temba-modules.js';
54
+ </script>
55
+ </body>
56
+ </html>
package/demo/textinput/example.html ADDED
@@ -0,0 +1,61 @@
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
16
+ href="../styles.css"
17
+ rel="stylesheet"
18
+ type="text/css"
19
+ />
20
+ </head>
21
+ <body>
22
+ <h1>Text Input Examples</h1>
23
+ <p><a href="../index.html">← Back to main demo</a> | <a href="completion.html">Completion Examples</a></p>
24
+
25
+ <div class="example">
26
+ <h3>Basic Text Input</h3>
27
+ <p>A simple text input field</p>
28
+ <temba-textinput value="plain text"></temba-textinput>
29
+ </div>
30
+
31
+ <div class="example">
32
+ <h3>Text Input with Label and Help</h3>
33
+ <p>A text input with label, help text, and placeholder</p>
34
+ <temba-textinput
35
+ name="start"
36
+ label="Start Time"
37
+ help_text="This is something you should think long and hard about"
38
+ placeholder="Put something down, for real"
39
+ value="2020-11-28 15:03"
40
+ clearable
41
+ datetimepicker
42
+ ></temba-textinput>
43
+ </div>
44
+
45
+ <div class="example">
46
+ <h3>Empty Text Input</h3>
47
+ <p>A text input with just a placeholder</p>
48
+ <temba-textinput placeholder="Enter some text here"></temba-textinput>
49
+ </div>
50
+
51
+ <div class="example">
52
+ <h3>Clearable Text Input</h3>
53
+ <p>A text input that can be cleared</p>
54
+ <temba-textinput value="This can be cleared" clearable></temba-textinput>
55
+ </div>
56
+
57
+ <script type="module">
58
+ import '../../out-tsc/temba-modules.js';
59
+ </script>
60
+ </body>
61
+ </html>