@nyaruka/temba-components 0.124.2 → 0.125.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 (51) hide show
  1. package/.eslintrc.js +3 -1
  2. package/CHANGELOG.md +20 -0
  3. package/demo/chart/example.html +346 -26
  4. package/demo/data/flows/sample-flow.json +1072 -0
  5. package/demo/data/server/opened-tickets.json +15 -3
  6. package/demo/data/server/sample-flow.json +0 -0
  7. package/demo/flow/example.html +46 -0
  8. package/demo/index.html +155 -144
  9. package/demo/webchat/example.html +71 -0
  10. package/dist/temba-components.js +255 -245
  11. package/dist/temba-components.js.map +1 -1
  12. package/out-tsc/src/chart/TembaChart.js +395 -65
  13. package/out-tsc/src/chart/TembaChart.js.map +1 -1
  14. package/out-tsc/src/flow/EditorNode.js +2 -1
  15. package/out-tsc/src/flow/EditorNode.js.map +1 -1
  16. package/out-tsc/src/flow/config.js +70 -20
  17. package/out-tsc/src/flow/config.js.map +1 -1
  18. package/out-tsc/src/formfield/FormField.js +4 -1
  19. package/out-tsc/src/formfield/FormField.js.map +1 -1
  20. package/out-tsc/src/store/Store.js +1 -0
  21. package/out-tsc/src/store/Store.js.map +1 -1
  22. package/out-tsc/src/utils/index.js +40 -0
  23. package/out-tsc/src/utils/index.js.map +1 -1
  24. package/out-tsc/src/webchat/WebChat.js +2 -0
  25. package/out-tsc/src/webchat/WebChat.js.map +1 -1
  26. package/out-tsc/test/temba-chart.test.js +6 -18
  27. package/out-tsc/test/temba-chart.test.js.map +1 -1
  28. package/out-tsc/test/temba-formfield.test.js +94 -0
  29. package/out-tsc/test/temba-formfield.test.js.map +1 -0
  30. package/out-tsc/test/temba-integration-markdown.test.js +36 -0
  31. package/out-tsc/test/temba-integration-markdown.test.js.map +1 -0
  32. package/out-tsc/test/temba-select.test.js +14 -1
  33. package/out-tsc/test/temba-select.test.js.map +1 -1
  34. package/package.json +2 -1
  35. package/screenshots/truth/formfield/markdown-errors.png +0 -0
  36. package/screenshots/truth/formfield/no-errors.png +0 -0
  37. package/screenshots/truth/formfield/plain-text-errors.png +0 -0
  38. package/screenshots/truth/formfield/widget-only-markdown-errors.png +0 -0
  39. package/screenshots/truth/integration/checkbox-markdown-errors.png +0 -0
  40. package/src/chart/TembaChart.ts +418 -71
  41. package/src/flow/EditorNode.ts +2 -1
  42. package/src/flow/config.ts +71 -20
  43. package/src/formfield/FormField.ts +4 -1
  44. package/src/store/Store.ts +1 -0
  45. package/src/utils/index.ts +43 -0
  46. package/src/webchat/WebChat.ts +2 -0
  47. package/test/temba-chart.test.ts +7 -23
  48. package/test/temba-formfield.test.ts +121 -0
  49. package/test/temba-integration-markdown.test.ts +45 -0
  50. package/test/temba-select.test.ts +17 -0
  51. package/web-dev-server.config.mjs +18 -0
package/.eslintrc.js CHANGED
@@ -17,6 +17,8 @@ module.exports = {
17
17
  '@typescript-eslint/explicit-function-return-type': 'off',
18
18
  '@typescript-eslint/no-non-null-assertion': 'off',
19
19
  'import/named': 'off',
20
- 'import/no-unresolved': 'off'
20
+ 'import/no-unresolved': 'off',
21
+ // Block console.log statements unless explicitly disabled
22
+ 'no-console': ['error', { allow: ['warn', 'error'] }]
21
23
  }
22
24
  };
package/CHANGELOG.md CHANGED
@@ -4,8 +4,28 @@ 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.125.0](https://github.com/nyaruka/temba-components/compare/v0.124.3...v0.125.0)
8
+
9
+ - Add percent support for charts [`#569`](https://github.com/nyaruka/temba-components/pull/569)
10
+ - Fix intermittent test failure in cursor pagination by adding proper wait logic [`#568`](https://github.com/nyaruka/temba-components/pull/568)
11
+ - Add ESLint rule to block console.log statements in commits [`#566`](https://github.com/nyaruka/temba-components/pull/566)
12
+ - Add flow example [`#563`](https://github.com/nyaruka/temba-components/pull/563)
13
+ - Add markdown support in form field errors [`#555`](https://github.com/nyaruka/temba-components/pull/555)
14
+ - Add webchat demo [`c62fe29`](https://github.com/nyaruka/temba-components/commit/c62fe29b00604b5b9e3c57275913acfac521ab68)
15
+ - Add pct support for charts [`dbed915`](https://github.com/nyaruka/temba-components/commit/dbed915ce935faf3fa0d93787dff3bf21edd7ae3)
16
+ - Add markdown support for form field errors with comprehensive tests [`73cc5ab`](https://github.com/nyaruka/temba-components/commit/73cc5ab1d0c36452c2eea29a156165b35dbe6f0c)
17
+
18
+ #### [v0.124.3](https://github.com/nyaruka/temba-components/compare/v0.124.2...v0.124.3)
19
+
20
+ > 12 June 2025
21
+
22
+ - Add some palette and styling options for charts [`#559`](https://github.com/nyaruka/temba-components/pull/559)
23
+ - Move darkeColor to utils [`cefd890`](https://github.com/nyaruka/temba-components/commit/cefd89012c0f66b0d107a05047db73293a6b3a41)
24
+
7
25
  #### [v0.124.2](https://github.com/nyaruka/temba-components/compare/v0.124.1...v0.124.2)
8
26
 
27
+ > 11 June 2025
28
+
9
29
  - Add showAll attribute for temba-chart [`#558`](https://github.com/nyaruka/temba-components/pull/558)
10
30
 
11
31
  #### [v0.124.1](https://github.com/nyaruka/temba-components/compare/v0.124.0...v0.124.1)
package/demo/chart/example.html CHANGED
@@ -1,6 +1,6 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en-GB">
3
- <head>
3
+ <head>
4
4
  <meta charset="utf-8" />
5
5
  <title>Chart Examples</title>
6
6
  <link
@@ -12,45 +12,365 @@
12
12
  href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
13
13
  rel="stylesheet"
14
14
  />
15
- <link
16
- href="../styles.css"
17
- rel="stylesheet"
18
- type="text/css"
19
- />
20
- </head>
21
- <body>
15
+ <link href="../styles.css" rel="stylesheet" type="text/css" />
16
+ <style>
17
+ .palette {
18
+ display: flex;
19
+ align-items: center;
20
+ margin-bottom: 12px;
21
+ }
22
+ .palette-label {
23
+ width: 200px;
24
+ text-align: right;
25
+ margin-right: 12px;
26
+ font-weight: bold;
27
+ font-size: 14px;
28
+ color: #333;
29
+ }
30
+ .color-box {
31
+ width: 32px;
32
+ height: 32px;
33
+ margin-right: 0px;
34
+ border-radius: 0px;
35
+ border: 0px solid #ccc;
36
+ }
37
+ .palette-row {
38
+ display: flex;
39
+ border-radius: 4px;
40
+ border: 1px solid rgba(0, 0, 0, 0.1);
41
+ overflow: hidden;
42
+ }
43
+ </style>
44
+ </head>
45
+ <body>
22
46
  <temba-store></temba-store>
23
47
  <h1>Chart Examples</h1>
24
48
  <p><a href="../index.html">← Back to main demo</a></p>
25
-
49
+
26
50
  <div class="example">
27
- <h3>Summation Chart</h3>
28
- <p>A basic chart, summing all datasets</p>
29
- <temba-chart url="../data/server/opened-tickets.json"></temba-chart>
51
+ <h3>Summation Chart</h3>
52
+ <p>A basic chart, summing all datasets</p>
53
+ <temba-chart url="../data/server/opened-tickets.json"></temba-chart>
30
54
  </div>
31
55
 
32
56
  <div class="example">
33
- <h3>Summation with Splits</h3>
34
- <p>Normal summation, but with optional splits in the config options </p>
35
- <temba-chart url="../data/server/opened-tickets.json" dataname="Tickets" config legend></temba-chart>
57
+ <h3>Summation with Splits</h3>
58
+ <p>Normal summation, but with optional splits in the config options</p>
59
+ <temba-chart
60
+ url="../data/server/opened-tickets.json"
61
+ dataname="Tickets"
62
+ config
63
+ legend
64
+ ></temba-chart>
36
65
  </div>
37
66
 
38
67
  <div class="example">
39
- <h3>Summation with Configured Splits</h3>
40
- <p>Normal summation, but with configured splits</p>
41
- <temba-chart url="../data/server/opened-tickets.json" dataname="Tickets" splits="Tracking,Orders" hideother legend></temba-chart>
68
+ <h3>Summation with Configured Splits</h3>
69
+ <p>Normal summation, but with configured splits</p>
70
+ <temba-chart
71
+ url="../data/server/opened-tickets.json"
72
+ dataname="Tickets"
73
+ splits="Tracking,Orders"
74
+ hideother
75
+ legend
76
+ ></temba-chart>
77
+ </div>
78
+ <div class="example">
79
+ <h3>Show all</h3>
80
+ <p>Shows all datasets without config</p>
81
+ <temba-chart
82
+ url="../data/server/opened-tickets.json"
83
+ dataname="Tickets"
84
+ showall
85
+ legend
86
+ ></temba-chart>
42
87
  </div>
43
88
 
44
89
  <div class="example">
45
- <h3>Duration Formatted Chart</h3>
46
- <p>This chart expects series data in seconds and displays them as durations on the y axis and in tooltips.</p>
47
- <temba-chart single dataname="Average Response" formatDuration header="Response Time" url="../data/server/response-time.json"></temba-chart>
48
- <p>Here is the same duration chart, but as a line chart</p>
49
- <temba-chart style="margin:2em" chartType="line" single dataName="Average Response" formatDuration url="../data/server/response-time.json"></temba-chart>
50
- </div>
90
+ <h3>Duration Formatted Chart</h3>
91
+ <p>
92
+ This chart expects series data in seconds and displays them as durations
93
+ on the y axis and in tooltips.
94
+ </p>
95
+ <temba-chart
96
+ single
97
+ dataname="Average Response"
98
+ formatDuration
99
+ header="Response Time"
100
+ url="../data/server/response-time.json"
101
+ ></temba-chart>
102
+ <p>Here is the same duration chart, but as a line chart</p>
103
+ <temba-chart
104
+ style="margin: 2em"
105
+ chartType="line"
106
+ single
107
+ dataName="Average Response"
108
+ formatDuration
109
+ url="../data/server/response-time.json"
110
+ ></temba-chart>
111
+ </div>
112
+ <div class="example">
113
+ <h3>Chart Palette</h3>
114
+ <p>Charts can be configured with the following palette choices.</p>
115
+ <div class="palette">
116
+ <div class="palette-label">qualitative-set1</div>
117
+ <div class="palette-row">
118
+ <div class="color-box" style="background: #5ea3db"></div>
119
+ <div class="color-box" style="background: #c186e3"></div>
120
+ <div class="color-box" style="background: #66c2a5"></div>
121
+ <div class="color-box" style="background: #fc8d62"></div>
122
+ <div class="color-box" style="background: #a6d854"></div>
123
+ <div class="color-box" style="background: #ffd92f"></div>
124
+ <div class="color-box" style="background: #e5c494"></div>
125
+ <div class="color-box" style="background: #b3b3b3"></div>
126
+ </div>
127
+ </div>
128
+ <div class="palette">
129
+ <div class="palette-label">qualitative-set2</div>
130
+ <div class="palette-row">
131
+ <div class="color-box" style="background: #377eb8"></div>
132
+ <div class="color-box" style="background: #984ea3"></div>
133
+ <div class="color-box" style="background: #4daf4a"></div>
134
+ <div class="color-box" style="background: #ff7f00"></div>
135
+ <div class="color-box" style="background: #e41a1c"></div>
136
+ <div class="color-box" style="background: #a65628"></div>
137
+ <div class="color-box" style="background: #f781bf"></div>
138
+ <div class="color-box" style="background: #ffff33"></div>
139
+ </div>
140
+ </div>
141
+ <div class="palette">
142
+ <div class="palette-label">qualitative-set3</div>
143
+ <div class="palette-row">
144
+ <div class="color-box" style="background: #1b9e77"></div>
145
+ <div class="color-box" style="background: #d95f02"></div>
146
+ <div class="color-box" style="background: #7570b3"></div>
147
+ <div class="color-box" style="background: #e7298a"></div>
148
+ <div class="color-box" style="background: #66a61e"></div>
149
+ <div class="color-box" style="background: #e6ab02"></div>
150
+ <div class="color-box" style="background: #a6761d"></div>
151
+ </div>
152
+ </div>
153
+ <div class="palette">
154
+ <div class="palette-label">qualitative-paired</div>
155
+ <div class="palette-row">
156
+ <div class="color-box" style="background: #1f78b4"></div>
157
+ <div class="color-box" style="background: #a6cee3"></div>
158
+ <div class="color-box" style="background: #6a3d9a"></div>
159
+ <div class="color-box" style="background: #cab2d6"></div>
160
+ <div class="color-box" style="background: #33a02c"></div>
161
+ <div class="color-box" style="background: #b2df8a"></div>
162
+ <div class="color-box" style="background: #e31a1c"></div>
163
+ <div class="color-box" style="background: #fb9a99"></div>
164
+ <div class="color-box" style="background: #ff7f00"></div>
165
+ <div class="color-box" style="background: #fdbf6f"></div>
166
+ </div>
167
+ </div>
168
+ <div class="palette">
169
+ <div class="palette-label">qualitative-accent</div>
170
+ <div class="palette-row">
171
+ <div class="color-box" style="background: #7fc97f"></div>
172
+ <div class="color-box" style="background: #beaed4"></div>
173
+ <div class="color-box" style="background: #fdc086"></div>
174
+ <div class="color-box" style="background: #ffff99"></div>
175
+ <div class="color-box" style="background: #386cb0"></div>
176
+ <div class="color-box" style="background: #f0027f"></div>
177
+ <div class="color-box" style="background: #bf5b17"></div>
178
+ <div class="color-box" style="background: #666666"></div>
179
+ </div>
180
+ </div>
181
+ <div class="palette">
182
+ <div class="palette-label">qualitative-pastel1</div>
183
+ <div class="palette-row">
184
+ <div class="color-box" style="background: #fbb4ae"></div>
185
+ <div class="color-box" style="background: #b3cde3"></div>
186
+ <div class="color-box" style="background: #ccebc5"></div>
187
+ <div class="color-box" style="background: #decbe4"></div>
188
+ <div class="color-box" style="background: #fed9a6"></div>
189
+ <div class="color-box" style="background: #ffffcc"></div>
190
+ <div class="color-box" style="background: #e5d8bd"></div>
191
+ <div class="color-box" style="background: #fddaec"></div>
192
+ </div>
193
+ </div>
194
+ <div class="palette">
195
+ <div class="palette-label">qualitative-pastel2</div>
196
+ <div class="palette-row">
197
+ <div class="color-box" style="background: #b3e2cd"></div>
198
+ <div class="color-box" style="background: #fdcdac"></div>
199
+ <div class="color-box" style="background: #cbd5e8"></div>
200
+ <div class="color-box" style="background: #f4cae4"></div>
201
+ <div class="color-box" style="background: #e6f5c9"></div>
202
+ <div class="color-box" style="background: #fff2ae"></div>
203
+ <div class="color-box" style="background: #f1e2cc"></div>
204
+ </div>
205
+ </div>
206
+ <div class="palette">
207
+ <div class="palette-label">diverging-prgn</div>
208
+ <div class="palette-row">
209
+ <div class="color-box" style="background: #40004b"></div>
210
+ <div class="color-box" style="background: #762a83"></div>
211
+ <div class="color-box" style="background: #9970ab"></div>
212
+ <div class="color-box" style="background: #c2a5cf"></div>
213
+ <div class="color-box" style="background: #e7d4e8"></div>
214
+ <div class="color-box" style="background: #f7f7f7"></div>
215
+ <div class="color-box" style="background: #d9f0d3"></div>
216
+ <div class="color-box" style="background: #a6dba0"></div>
217
+ <div class="color-box" style="background: #5aae61"></div>
218
+ <div class="color-box" style="background: #1b7837"></div>
219
+ <div class="color-box" style="background: #00441b"></div>
220
+ </div>
221
+ </div>
222
+ <div class="palette">
223
+ <div class="palette-label">diverging-spectral</div>
224
+ <div class="palette-row">
225
+ <div class="color-box" style="background: #9e0142"></div>
226
+ <div class="color-box" style="background: #d53e4f"></div>
227
+ <div class="color-box" style="background: #f46d43"></div>
228
+ <div class="color-box" style="background: #fdae61"></div>
229
+ <div class="color-box" style="background: #fee08b"></div>
230
+ <div class="color-box" style="background: #ffffbf"></div>
231
+ <div class="color-box" style="background: #e6f598"></div>
232
+ <div class="color-box" style="background: #abdda4"></div>
233
+ <div class="color-box" style="background: #66c2a5"></div>
234
+ <div class="color-box" style="background: #3288bd"></div>
235
+ <div class="color-box" style="background: #5e4fa2"></div>
236
+ </div>
237
+ </div>
238
+ <div class="palette">
239
+ <div class="palette-label">diverging-piyg</div>
240
+ <div class="palette-row">
241
+ <div class="color-box" style="background: #8e0152"></div>
242
+ <div class="color-box" style="background: #c51b7d"></div>
243
+ <div class="color-box" style="background: #de77ae"></div>
244
+ <div class="color-box" style="background: #f1b6da"></div>
245
+ <div class="color-box" style="background: #fde0ef"></div>
246
+ <div class="color-box" style="background: #f7f7f7"></div>
247
+ <div class="color-box" style="background: #e6f5d0"></div>
248
+ <div class="color-box" style="background: #b8e186"></div>
249
+ <div class="color-box" style="background: #7fbc41"></div>
250
+ <div class="color-box" style="background: #4d9221"></div>
251
+ <div class="color-box" style="background: #276419"></div>
252
+ </div>
253
+ </div>
254
+ <div class="palette">
255
+ <div class="palette-label">diverging-rdylgn</div>
256
+ <div class="palette-row">
257
+ <div class="color-box" style="background: #a50026"></div>
258
+ <div class="color-box" style="background: #d73027"></div>
259
+ <div class="color-box" style="background: #f46d43"></div>
260
+ <div class="color-box" style="background: #fdae61"></div>
261
+ <div class="color-box" style="background: #fee08b"></div>
262
+ <div class="color-box" style="background: #ffffbf"></div>
263
+ <div class="color-box" style="background: #d9ef8b"></div>
264
+ <div class="color-box" style="background: #a6d96a"></div>
265
+ <div class="color-box" style="background: #66bd63"></div>
266
+ <div class="color-box" style="background: #1a9850"></div>
267
+ <div class="color-box" style="background: #006837"></div>
268
+ </div>
269
+ </div>
270
+ <div class="palette">
271
+ <div class="palette-label">diverging-brbg</div>
272
+ <div class="palette-row">
273
+ <div class="color-box" style="background: #543005"></div>
274
+ <div class="color-box" style="background: #8c510a"></div>
275
+ <div class="color-box" style="background: #bf812d"></div>
276
+ <div class="color-box" style="background: #dfc27d"></div>
277
+ <div class="color-box" style="background: #f6e8c3"></div>
278
+ <div class="color-box" style="background: #f5f5f5"></div>
279
+ <div class="color-box" style="background: #c7eae5"></div>
280
+ <div class="color-box" style="background: #80cdc1"></div>
281
+ <div class="color-box" style="background: #35978f"></div>
282
+ <div class="color-box" style="background: #01665e"></div>
283
+ <div class="color-box" style="background: #003c30"></div>
284
+ </div>
285
+ </div>
286
+ <div class="palette">
287
+ <div class="palette-label">sequential-blues</div>
288
+ <div class="palette-row">
289
+ <div class="color-box" style="background: #f7fbff"></div>
290
+ <div class="color-box" style="background: #deebf7"></div>
291
+ <div class="color-box" style="background: #c6dbef"></div>
292
+ <div class="color-box" style="background: #9ecae1"></div>
293
+ <div class="color-box" style="background: #6baed6"></div>
294
+ <div class="color-box" style="background: #4292c6"></div>
295
+ <div class="color-box" style="background: #2171b5"></div>
296
+ <div class="color-box" style="background: #08519c"></div>
297
+ <div class="color-box" style="background: #08306b"></div>
298
+ </div>
299
+ </div>
300
+ <div class="palette">
301
+ <div class="palette-label">sequential-greens</div>
302
+ <div class="palette-row">
303
+ <div class="color-box" style="background: #f7fcf5"></div>
304
+ <div class="color-box" style="background: #e5f5e0"></div>
305
+ <div class="color-box" style="background: #c7e9c0"></div>
306
+ <div class="color-box" style="background: #a1d99b"></div>
307
+ <div class="color-box" style="background: #74c476"></div>
308
+ <div class="color-box" style="background: #41ab5d"></div>
309
+ <div class="color-box" style="background: #238b45"></div>
310
+ <div class="color-box" style="background: #006d2c"></div>
311
+ <div class="color-box" style="background: #00441b"></div>
312
+ </div>
313
+ </div>
314
+ <div class="palette">
315
+ <div class="palette-label">sequential-oranges</div>
316
+ <div class="palette-row">
317
+ <div class="color-box" style="background: #fff5eb"></div>
318
+ <div class="color-box" style="background: #fee6ce"></div>
319
+ <div class="color-box" style="background: #fdd0a2"></div>
320
+ <div class="color-box" style="background: #fdae6b"></div>
321
+ <div class="color-box" style="background: #fd8d3c"></div>
322
+ <div class="color-box" style="background: #f16913"></div>
323
+ <div class="color-box" style="background: #d94801"></div>
324
+ <div class="color-box" style="background: #a63603"></div>
325
+ <div class="color-box" style="background: #7f2704"></div>
326
+ </div>
327
+ </div>
328
+ <div class="palette">
329
+ <div class="palette-label">sequential-purples</div>
330
+ <div class="palette-row">
331
+ <div class="color-box" style="background: #fcfbfd"></div>
332
+ <div class="color-box" style="background: #efedf5"></div>
333
+ <div class="color-box" style="background: #dadaeb"></div>
334
+ <div class="color-box" style="background: #bcbddc"></div>
335
+ <div class="color-box" style="background: #9e9ac8"></div>
336
+ <div class="color-box" style="background: #807dba"></div>
337
+ <div class="color-box" style="background: #6a51a3"></div>
338
+ <div class="color-box" style="background: #54278f"></div>
339
+ <div class="color-box" style="background: #3f007d"></div>
340
+ </div>
341
+ </div>
342
+ <div class="palette">
343
+ <div class="palette-label">sequential-reds</div>
344
+ <div class="palette-row">
345
+ <div class="color-box" style="background: #fff5f0"></div>
346
+ <div class="color-box" style="background: #fee0d2"></div>
347
+ <div class="color-box" style="background: #fcbba1"></div>
348
+ <div class="color-box" style="background: #fc9272"></div>
349
+ <div class="color-box" style="background: #fb6a4a"></div>
350
+ <div class="color-box" style="background: #ef3b2c"></div>
351
+ <div class="color-box" style="background: #cb181d"></div>
352
+ <div class="color-box" style="background: #a50f15"></div>
353
+ <div class="color-box" style="background: #67000d"></div>
354
+ </div>
355
+ </div>
356
+ <div class="palette">
357
+ <div class="palette-label">sequential-ylgnbu</div>
358
+ <div class="palette-row">
359
+ <div class="color-box" style="background: #ffffd9"></div>
360
+ <div class="color-box" style="background: #edf8b1"></div>
361
+ <div class="color-box" style="background: #c7e9b4"></div>
362
+ <div class="color-box" style="background: #7fcdbb"></div>
363
+ <div class="color-box" style="background: #41b6c4"></div>
364
+ <div class="color-box" style="background: #1d91c0"></div>
365
+ <div class="color-box" style="background: #225ea8"></div>
366
+ <div class="color-box" style="background: #253494"></div>
367
+ <div class="color-box" style="background: #081d58"></div>
368
+ </div>
369
+ </div>
370
+ </div>
51
371
 
52
372
  <script type="module">
53
373
  import '../../out-tsc/temba-modules.js';
54
374
  </script>
55
- </body>
56
- </html>
375
+ </body>
376
+ </html>