@nyaruka/temba-components 0.127.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 (109) hide show
  1. package/CHANGELOG.md +25 -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/data/flows/sample-flow.json +127 -100
  6. package/demo/index.html +8 -0
  7. package/demo/static/css/prism.css +2 -0
  8. package/demo/static/js/prism-loader.js +12 -0
  9. package/demo/sticky-note-demo.html +152 -0
  10. package/demo/styles.css +71 -1
  11. package/dist/locales/es.js +5 -5
  12. package/dist/locales/es.js.map +1 -1
  13. package/dist/locales/fr.js +5 -5
  14. package/dist/locales/fr.js.map +1 -1
  15. package/dist/locales/locale-codes.js +11 -2
  16. package/dist/locales/locale-codes.js.map +1 -1
  17. package/dist/locales/pt.js +5 -5
  18. package/dist/locales/pt.js.map +1 -1
  19. package/dist/temba-components.js +509 -87
  20. package/dist/temba-components.js.map +1 -1
  21. package/out-tsc/src/chart/TembaChart.js +136 -62
  22. package/out-tsc/src/chart/TembaChart.js.map +1 -1
  23. package/out-tsc/src/datepicker/DatePicker.js +11 -1
  24. package/out-tsc/src/datepicker/DatePicker.js.map +1 -1
  25. package/out-tsc/src/datepicker/RangePicker.js +595 -0
  26. package/out-tsc/src/datepicker/RangePicker.js.map +1 -0
  27. package/out-tsc/src/flow/Editor.js +210 -1
  28. package/out-tsc/src/flow/Editor.js.map +1 -1
  29. package/out-tsc/src/flow/EditorNode.js +98 -139
  30. package/out-tsc/src/flow/EditorNode.js.map +1 -1
  31. package/out-tsc/src/flow/StickyNote.js +272 -0
  32. package/out-tsc/src/flow/StickyNote.js.map +1 -0
  33. package/out-tsc/src/interfaces.js +1 -0
  34. package/out-tsc/src/interfaces.js.map +1 -1
  35. package/out-tsc/src/list/RunList.js +2 -1
  36. package/out-tsc/src/list/RunList.js.map +1 -1
  37. package/out-tsc/src/list/SortableList.js +9 -0
  38. package/out-tsc/src/list/SortableList.js.map +1 -1
  39. package/out-tsc/src/locales/es.js +5 -5
  40. package/out-tsc/src/locales/es.js.map +1 -1
  41. package/out-tsc/src/locales/fr.js +5 -5
  42. package/out-tsc/src/locales/fr.js.map +1 -1
  43. package/out-tsc/src/locales/locale-codes.js +11 -2
  44. package/out-tsc/src/locales/locale-codes.js.map +1 -1
  45. package/out-tsc/src/locales/pt.js +5 -5
  46. package/out-tsc/src/locales/pt.js.map +1 -1
  47. package/out-tsc/src/store/AppState.js +33 -0
  48. package/out-tsc/src/store/AppState.js.map +1 -1
  49. package/out-tsc/src/vectoricon/index.js +2 -1
  50. package/out-tsc/src/vectoricon/index.js.map +1 -1
  51. package/out-tsc/temba-modules.js +5 -1
  52. package/out-tsc/temba-modules.js.map +1 -1
  53. package/out-tsc/test/temba-chart.test.js +36 -0
  54. package/out-tsc/test/temba-chart.test.js.map +1 -1
  55. package/out-tsc/test/temba-datepicker.test.js +1 -1
  56. package/out-tsc/test/temba-datepicker.test.js.map +1 -1
  57. package/out-tsc/test/temba-flow-editor-node.test.js +249 -5
  58. package/out-tsc/test/temba-flow-editor-node.test.js.map +1 -1
  59. package/out-tsc/test/temba-range-picker.test.js +123 -0
  60. package/out-tsc/test/temba-range-picker.test.js.map +1 -0
  61. package/out-tsc/test/temba-select.test.js +10 -16
  62. package/out-tsc/test/temba-select.test.js.map +1 -1
  63. package/out-tsc/test/temba-webchat.test.js +4 -0
  64. package/out-tsc/test/temba-webchat.test.js.map +1 -1
  65. package/out-tsc/test/utils.test.js +62 -0
  66. package/out-tsc/test/utils.test.js.map +1 -1
  67. package/package.json +1 -1
  68. package/screenshots/truth/datepicker/range-picker-all.png +0 -0
  69. package/screenshots/truth/datepicker/range-picker-button-states.png +0 -0
  70. package/screenshots/truth/datepicker/range-picker-default.png +0 -0
  71. package/screenshots/truth/datepicker/range-picker-editing-start.png +0 -0
  72. package/screenshots/truth/datepicker/range-picker-initial-values.png +0 -0
  73. package/screenshots/truth/datepicker/range-picker-min-max.png +0 -0
  74. package/screenshots/truth/datepicker/range-picker-week.png +0 -0
  75. package/screenshots/truth/datepicker/range-picker-year.png +0 -0
  76. package/screenshots/truth/sticky-note/blue.png +0 -0
  77. package/screenshots/truth/sticky-note/gray.png +0 -0
  78. package/screenshots/truth/sticky-note/green.png +0 -0
  79. package/screenshots/truth/sticky-note/pink.png +0 -0
  80. package/screenshots/truth/sticky-note/yellow.png +0 -0
  81. package/screenshots/truth/webchat/connected-state.png +0 -0
  82. package/src/chart/TembaChart.ts +144 -66
  83. package/src/datepicker/DatePicker.ts +9 -1
  84. package/src/datepicker/RangePicker.ts +602 -0
  85. package/src/flow/Editor.ts +252 -2
  86. package/src/flow/EditorNode.ts +98 -156
  87. package/src/flow/StickyNote.ts +284 -0
  88. package/src/interfaces.ts +2 -1
  89. package/src/list/RunList.ts +2 -1
  90. package/src/list/SortableList.ts +11 -0
  91. package/src/locales/es.ts +18 -13
  92. package/src/locales/fr.ts +18 -13
  93. package/src/locales/locale-codes.ts +11 -2
  94. package/src/locales/pt.ts +18 -13
  95. package/src/store/AppState.ts +51 -1
  96. package/src/store/flow-definition.d.ts +8 -0
  97. package/src/vectoricon/index.ts +2 -1
  98. package/static/svg/index.pdf +137 -0
  99. package/temba-modules.ts +5 -1
  100. package/test/temba-chart.test.ts +47 -0
  101. package/test/temba-datepicker.test.ts +1 -1
  102. package/test/temba-flow-editor-node.test.ts +322 -6
  103. package/test/temba-range-picker.test.ts +193 -0
  104. package/test/temba-select.test.ts +11 -19
  105. package/test/temba-webchat.test.ts +7 -0
  106. package/test/utils.test.ts +98 -0
  107. package/web-dev-server.config.mjs +30 -22
  108. package/web-test-runner.config.mjs +2 -0
  109. package/demo/datepicker/example.html +0 -69
package/CHANGELOG.md CHANGED
@@ -4,8 +4,33 @@ 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
+
17
+ #### [v0.128.0](https://github.com/nyaruka/temba-components/compare/v0.127.0...v0.128.0)
18
+
19
+ > 20 June 2025
20
+
21
+ - Clamp chart height [`#585`](https://github.com/nyaruka/temba-components/pull/585)
22
+ - Add vertical drag and drop sorting for actions in EditorNode [`#584`](https://github.com/nyaruka/temba-components/pull/584)
23
+ - Cleanup styles [`#582`](https://github.com/nyaruka/temba-components/pull/582)
24
+ - Add StickyNote component with drag/drop functionality to Flow Editor [`#578`](https://github.com/nyaruka/temba-components/pull/578)
25
+ - Fix intermittent build failures by improving async test handling and re-enabling disabled tests [`#581`](https://github.com/nyaruka/temba-components/pull/581)
26
+ - Add move handles for sticky notes [`c7bcc70`](https://github.com/nyaruka/temba-components/commit/c7bcc707323692eeb6e149a792813fe2a2ad1182)
27
+ - Make actions sortable [`f2a0c9a`](https://github.com/nyaruka/temba-components/commit/f2a0c9af32d34c2d1a26b58c32326eb43933f6b5)
28
+ - Remove drag mixin [`7724b30`](https://github.com/nyaruka/temba-components/commit/7724b30f77463d16fb0c738e6b3a00dcd0308738)
29
+
7
30
  #### [v0.127.0](https://github.com/nyaruka/temba-components/compare/v0.126.0...v0.127.0)
8
31
 
32
+ > 19 June 2025
33
+
9
34
  - Configure max ticks, add auto date format option [`#579`](https://github.com/nyaruka/temba-components/pull/579)
10
35
  - Only snap on drop [`#576`](https://github.com/nyaruka/temba-components/pull/576)
11
36
  - Configure max x ticks, some formatting [`af6ffe4`](https://github.com/nyaruka/temba-components/commit/af6ffe463cc3ef1c6b09e18eb5e515ccb8b66d95)
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>