@nyaruka/temba-components 0.128.0 → 0.129.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/demo/chart/horizontal-demo.html +81 -0
  3. package/demo/components/datepicker/example.html +63 -0
  4. package/demo/components/datepicker/range-picker-demo.html +161 -0
  5. package/demo/index.html +8 -0
  6. package/demo/static/css/prism.css +2 -0
  7. package/demo/static/js/prism-loader.js +12 -0
  8. package/demo/styles.css +71 -1
  9. package/dist/temba-components.js +172 -10
  10. package/dist/temba-components.js.map +1 -1
  11. package/out-tsc/src/chart/TembaChart.js +116 -59
  12. package/out-tsc/src/chart/TembaChart.js.map +1 -1
  13. package/out-tsc/src/datepicker/DatePicker.js +11 -1
  14. package/out-tsc/src/datepicker/DatePicker.js.map +1 -1
  15. package/out-tsc/src/datepicker/RangePicker.js +595 -0
  16. package/out-tsc/src/datepicker/RangePicker.js.map +1 -0
  17. package/out-tsc/src/interfaces.js +1 -0
  18. package/out-tsc/src/interfaces.js.map +1 -1
  19. package/out-tsc/temba-modules.js +3 -1
  20. package/out-tsc/temba-modules.js.map +1 -1
  21. package/out-tsc/test/temba-chart.test.js +36 -0
  22. package/out-tsc/test/temba-chart.test.js.map +1 -1
  23. package/out-tsc/test/temba-datepicker.test.js +1 -1
  24. package/out-tsc/test/temba-datepicker.test.js.map +1 -1
  25. package/out-tsc/test/temba-range-picker.test.js +123 -0
  26. package/out-tsc/test/temba-range-picker.test.js.map +1 -0
  27. package/out-tsc/test/temba-select.test.js +1 -1
  28. package/out-tsc/test/temba-select.test.js.map +1 -1
  29. package/out-tsc/test/temba-webchat.test.js +4 -0
  30. package/out-tsc/test/temba-webchat.test.js.map +1 -1
  31. package/package.json +1 -1
  32. package/screenshots/truth/datepicker/range-picker-all.png +0 -0
  33. package/screenshots/truth/datepicker/range-picker-button-states.png +0 -0
  34. package/screenshots/truth/datepicker/range-picker-default.png +0 -0
  35. package/screenshots/truth/datepicker/range-picker-editing-start.png +0 -0
  36. package/screenshots/truth/datepicker/range-picker-initial-values.png +0 -0
  37. package/screenshots/truth/datepicker/range-picker-min-max.png +0 -0
  38. package/screenshots/truth/datepicker/range-picker-week.png +0 -0
  39. package/screenshots/truth/datepicker/range-picker-year.png +0 -0
  40. package/screenshots/truth/webchat/connected-state.png +0 -0
  41. package/src/chart/TembaChart.ts +124 -63
  42. package/src/datepicker/DatePicker.ts +9 -1
  43. package/src/datepicker/RangePicker.ts +602 -0
  44. package/src/interfaces.ts +2 -1
  45. package/temba-modules.ts +3 -1
  46. package/test/temba-chart.test.ts +47 -0
  47. package/test/temba-datepicker.test.ts +1 -1
  48. package/test/temba-range-picker.test.ts +193 -0
  49. package/test/temba-select.test.ts +1 -1
  50. package/test/temba-webchat.test.ts +7 -0
  51. package/web-test-runner.config.mjs +2 -0
  52. package/demo/datepicker/example.html +0 -69
package/CHANGELOG.md CHANGED
@@ -4,8 +4,20 @@ All notable changes to this project will be documented in this file. Dates are d
4
4
 
5
5
  Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
6
6
 
7
+ #### [v0.129.0](https://github.com/nyaruka/temba-components/compare/v0.128.0...v0.129.0)
8
+
9
+ - Smarter monthly paging [`#589`](https://github.com/nyaruka/temba-components/pull/589)
10
+ - Add horizontal chart option [`#588`](https://github.com/nyaruka/temba-components/pull/588)
11
+ - Add date range component [`#587`](https://github.com/nyaruka/temba-components/pull/587)
12
+ - Tweak idle time for tests [`#586`](https://github.com/nyaruka/temba-components/pull/586)
13
+ - Add temba-range-picker [`64710c6`](https://github.com/nyaruka/temba-components/commit/64710c669f2600f885159bb6a1225841976522cd)
14
+ - Update range picker demo and docs [`5bd29bc`](https://github.com/nyaruka/temba-components/commit/5bd29bc7a0ec7f6c04cd7e8d6725e8d96f038db7)
15
+ - Skip test [`88d8cb5`](https://github.com/nyaruka/temba-components/commit/88d8cb5203515b14ab5eb77e047d17109438a930)
16
+
7
17
  #### [v0.128.0](https://github.com/nyaruka/temba-components/compare/v0.127.0...v0.128.0)
8
18
 
19
+ > 20 June 2025
20
+
9
21
  - Clamp chart height [`#585`](https://github.com/nyaruka/temba-components/pull/585)
10
22
  - Add vertical drag and drop sorting for actions in EditorNode [`#584`](https://github.com/nyaruka/temba-components/pull/584)
11
23
  - Cleanup styles [`#582`](https://github.com/nyaruka/temba-components/pull/582)
package/demo/chart/horizontal-demo.html ADDED
@@ -0,0 +1,81 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Horizontal Chart Demo</title>
7
+
8
+ <link rel="stylesheet" href="../styles.css" />
9
+ </head>
10
+ <body>
11
+ <div class="demo-container">
12
+ <h1>Horizontal Bar Chart Demo</h1>
13
+
14
+ <div class="demo-section">
15
+ <h2>Regular Vertical Bar Chart</h2>
16
+ <temba-chart
17
+ type="bar"
18
+ header="Monthly Sales (Vertical)"
19
+ style="height: 300px; display: block"
20
+ ></temba-chart>
21
+ </div>
22
+
23
+ <div class="demo-section">
24
+ <h2>Horizontal Bar Chart</h2>
25
+ <temba-chart
26
+ type="bar"
27
+ horizontal
28
+ header="Monthly Sales (Horizontal)"
29
+ style="height: 300px; display: block"
30
+ ></temba-chart>
31
+ </div>
32
+
33
+ <div class="demo-section">
34
+ <h2>Horizontal Bar Chart with Percentages</h2>
35
+ <temba-chart
36
+ type="bar"
37
+ horizontal
38
+ percent
39
+ header="Monthly Sales with Percentages (Horizontal)"
40
+ style="height: 300px; display: block"
41
+ ></temba-chart>
42
+ </div>
43
+ </div>
44
+
45
+ <script>
46
+ // Sample data for the charts
47
+ const sampleData = {
48
+ labels: ['January', 'February', 'March', 'April', 'May', 'June'],
49
+ datasets: [
50
+ {
51
+ label: 'Product A',
52
+ data: [65, 59, 80, 81, 56, 55],
53
+ backgroundColor: 'rgba(54, 162, 235, 0.6)',
54
+ borderColor: 'rgba(54, 162, 235, 1)',
55
+ borderWidth: 1
56
+ },
57
+ {
58
+ label: 'Product B',
59
+ data: [28, 48, 40, 19, 86, 27],
60
+ backgroundColor: 'rgba(255, 99, 132, 0.6)',
61
+ borderColor: 'rgba(255, 99, 132, 1)',
62
+ borderWidth: 1
63
+ }
64
+ ]
65
+ };
66
+
67
+ // Wait for the DOM to be ready and charts to be defined
68
+ document.addEventListener('DOMContentLoaded', () => {
69
+ setTimeout(() => {
70
+ const charts = document.querySelectorAll('temba-chart');
71
+ charts.forEach((chart) => {
72
+ chart.data = sampleData;
73
+ });
74
+ }, 100);
75
+ });
76
+ </script>
77
+ <script type="module">
78
+ import '../../out-tsc/temba-modules.js';
79
+ </script>
80
+ </body>
81
+ </html>
package/demo/components/datepicker/example.html ADDED
@@ -0,0 +1,63 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-GB">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>Date Picker 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>Date Picker Examples</h1>
19
+ <p><a href="../../index.html">← Back to main demo</a></p>
20
+
21
+ <div class="example">
22
+ <h3>Date and Time Picker</h3>
23
+ <p>A date picker that includes time selection</p>
24
+ <temba-datepicker
25
+ time
26
+ value="2020-01-20T14:00+00:00"
27
+ timezone="UTC"
28
+ ></temba-datepicker>
29
+ </div>
30
+
31
+ <div class="example">
32
+ <h3>Date Only Picker</h3>
33
+ <p>A date picker without time selection</p>
34
+ <temba-datepicker value="2022-10-09"></temba-datepicker>
35
+ </div>
36
+
37
+ <div class="example">
38
+ <h3>Date Picker with Timezone</h3>
39
+ <p>A date picker with a specific timezone</p>
40
+ <temba-datepicker
41
+ time
42
+ value="2022-10-02 01:00:00+00:00"
43
+ timezone="Africa/Lagos"
44
+ ></temba-datepicker>
45
+ </div>
46
+
47
+ <div class="example">
48
+ <h3>Empty Date Picker</h3>
49
+ <p>A date picker with no initial value</p>
50
+ <temba-datepicker></temba-datepicker>
51
+ </div>
52
+
53
+ <script>
54
+ function handleDateChange(event) {
55
+ console.log('Date changed:', event.target.value);
56
+ }
57
+ </script>
58
+
59
+ <script type="module">
60
+ import '../../out-tsc/temba-modules.js';
61
+ </script>
62
+ </body>
63
+ </html>
package/demo/components/datepicker/range-picker-demo.html ADDED
@@ -0,0 +1,161 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-GB">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>Range Picker Example</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
+ <script type="module" src="../../../src/datepicker/RangePicker.ts"></script>
17
+ <link href="/demo/static/css/prism.css" rel="stylesheet" />
18
+ <script type="module" src="/demo/static/js/prism-loader.js"></script>
19
+ </head>
20
+ <body>
21
+ <h1>Range Picker 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>start</td>
35
+ <td>The ISO date string for the start of the range</td>
36
+ <td>(last month, today)</td>
37
+ </tr>
38
+ <tr>
39
+ <td>end</td>
40
+ <td>The ISO date string for the end of the range</td>
41
+ <td>(today)</td>
42
+ </tr>
43
+ <tr>
44
+ <td>min</td>
45
+ <td>The minimum selectable ISO date</td>
46
+ <td>2012-01-01</td>
47
+ </tr>
48
+ <tr>
49
+ <td>max</td>
50
+ <td>The maximum selectable ISO date</td>
51
+ <td>(today)</td>
52
+ </tr>
53
+ </tbody>
54
+ </table>
55
+
56
+ <section class="doc-section">
57
+ <h2>Event: <code>temba-date-range-changed</code></h2>
58
+ <p>
59
+ Fired when the selected date range changes in
60
+ <code>&lt;temba-range-picker&gt;</code>.<br />
61
+ </p>
62
+ <pre class="language-javascript"><code class="language-javascript">{
63
+ start: string, // ISO date string for the start of the range (e.g., "2024-12-01")
64
+ end: string, // ISO date string for the end of the range (e.g., "2025-01-30")
65
+ range?: string // (optional) Named range if selected, otherwise undefined or 'CUSTOM'
66
+ }</code></pre>
67
+ <div>
68
+ <pre
69
+ class="language-javascript"
70
+ ><code class="language-javascript">picker.addEventListener('temba-date-range-changed', (event) => {
71
+ const { start, end, range } = event.detail;
72
+ console.log('Selected range:', start, end, range);
73
+ });</code></pre>
74
+ </div>
75
+ </section>
76
+
77
+ <div class="example">
78
+ <h3>Date Range Picker</h3>
79
+ <p>
80
+ Select a start and end date using the range picker component. Default is
81
+ last month.
82
+ </p>
83
+ <pre
84
+ class="example-html"
85
+ ><code class="language-markup">&lt;temba-range-picker&gt;&lt;/temba-range-picker&gt;</code></pre>
86
+ <temba-range-picker></temba-range-picker>
87
+ </div>
88
+ <div class="example">
89
+ <h3>Initial values</h3>
90
+ <p>Use start and end for intial values</p>
91
+ <pre
92
+ class="example-html"
93
+ ><code class="language-markup">&lt;temba-range-picker
94
+ start="2024-12-01"
95
+ end="2025-01-30"
96
+ &gt;&lt;/temba-range-picker&gt;</code></pre>
97
+ <temba-range-picker
98
+ start="2024-12-01"
99
+ end="2025-01-30"
100
+ ></temba-range-picker>
101
+ </div>
102
+ <div class="example">
103
+ <h3>Min and max range</h3>
104
+ <p>Use min and max for acceptable ranges</p>
105
+ <pre
106
+ class="example-html"
107
+ ><code class="language-markup">&lt;temba-range-picker
108
+ start="2024-12-15"
109
+ end="2025-02-05"
110
+ min="2024-12-10"
111
+ max="2025-02-10"
112
+ &gt;&lt;/temba-range-picker&gt;</code></pre>
113
+ <temba-range-picker
114
+ start="2024-12-15"
115
+ end="2025-02-05"
116
+ min="2024-12-10"
117
+ max="2025-02-10"
118
+ ></temba-range-picker>
119
+ </div>
120
+ <div class="example">
121
+ <h3>Handling Range Change Event</h3>
122
+ <p>
123
+ This example shows how to listen for range changes and display the
124
+ selected dates.
125
+ </p>
126
+ <pre
127
+ class="example-html"
128
+ ><code class="language-markup">&lt;temba-range-picker id="event-demo"&gt;&lt;/temba-range-picker&gt;
129
+
130
+ &lt;script type="module"&gt;
131
+ const picker = document.getElementById('event-demo');
132
+
133
+ picker.addEventListener('temba-date-range-changed', (e) => {
134
+ const output = document.getElementById('range-output');
135
+ output.textContent = `Start: ${e.detail.start} | End: ${e.detail.end} | Range: ${e.detail.range || 'CUSTOM'}`;
136
+ });
137
+
138
+ &lt;/script&gt;</code></pre>
139
+ <temba-range-picker id="event-demo"></temba-range-picker>
140
+ <div id="range-output" class="demo-output">
141
+ Selected range will appear here...
142
+ </div>
143
+ </div>
144
+
145
+ <script type="module">
146
+ import '../../../out-tsc/temba-modules.js';
147
+
148
+ const picker = document.getElementById('event-demo');
149
+
150
+ // Listen for changes on the range picker
151
+ picker.addEventListener('temba-date-range-changed', (e) => {
152
+ // eslint-disable-next-line no-console
153
+ console.log('Range changed:', e.detail);
154
+ const output = document.getElementById('range-output');
155
+ output.textContent = `Start: ${e.detail.start} | End: ${
156
+ e.detail.end
157
+ } | Range: ${e.detail.range || 'CUSTOM'}`;
158
+ });
159
+ </script>
160
+ </body>
161
+ </html>
package/demo/index.html CHANGED
@@ -70,6 +70,14 @@
70
70
  <p>Text composition components with rich editing features</p>
71
71
  <a href="compose/example.html">Examples</a>
72
72
  </div>
73
+
74
+ <div class="component-card">
75
+ <h3>Range Picker</h3>
76
+ <p>Date range selection component</p>
77
+ <a href="components/datepicker/range-picker-demo.html"
78
+ >Range Picker Demo</a
79
+ >
80
+ </div>
73
81
  </div>
74
82
 
75
83
  <!-- Interactive Components -->
package/demo/static/css/prism.css ADDED
@@ -0,0 +1,2 @@
1
+ /* PrismJS 1.29.0 (minimized for HTML, JS, CSS) */
2
+ @import url('https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css');
package/demo/static/js/prism-loader.js ADDED
@@ -0,0 +1,12 @@
1
+ // PrismJS loader for demo HTML
2
+ import 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js';
3
+ import 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup.min.js';
4
+ import 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js';
5
+ import 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js';
6
+
7
+ window.addEventListener('DOMContentLoaded', () => {
8
+ document.querySelectorAll('pre.example-html').forEach((block) => {
9
+ block.classList.add('language-markup');
10
+ if (window.Prism) window.Prism.highlightElement(block);
11
+ });
12
+ });
package/demo/styles.css CHANGED
@@ -10,7 +10,7 @@ body {
10
10
  margin: 30px 0;
11
11
  padding: 20px;
12
12
  border: 1px solid #ddd;
13
- border-radius: 8px;
13
+ border-radius: var(--curvature);
14
14
  background: white;
15
15
  }
16
16
 
@@ -180,4 +180,74 @@ temba-tab * {
180
180
  temba-tabs:defined *,
181
181
  temba-tab:defined * {
182
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;
183
253
  }