@nyaruka/temba-components 0.124.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 (79) hide show
  1. package/CHANGELOG.md +10 -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 +5 -5
  28. package/dist/temba-components.js.map +1 -1
  29. package/out-tsc/src/chart/TembaChart.js +19 -16
  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 +20 -16
  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/index.html CHANGED
@@ -1,467 +1,174 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en-GB">
3
- <head>
3
+ <head>
4
4
  <meta charset="utf-8" />
5
+ <title>Temba Components Demo</title>
5
6
  <link
6
7
  href="/static/css/temba-components.css"
7
8
  rel="stylesheet"
8
9
  type="text/css"
9
10
  />
10
-
11
11
  <link
12
12
  href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
13
13
  rel="stylesheet"
14
14
  />
15
-
16
- <style>
17
-
18
- body {
19
- overflow-x: hidden;
20
- }
21
-
22
- .linked {
23
- text-decoration: underline;
24
- color: blue;
25
- cursor: pointer;
26
- }
27
-
28
- .example {
29
- border: 0px solid gray;
30
- padding: 10px;
31
- max-width: 500px;
32
- --temba-select-selected-font-size: 1em;
33
- }
34
-
35
- temba-dropdown.open {
36
- --icon-background: rgb(241, 241, 241);
37
- --icon-circle-size: 0.35em;
38
- }
39
-
40
- .more {
41
- background: rgba(0, 0, 0, 0.1);
42
- padding: 0.5em;
43
- }
44
-
45
- .open .more,
46
- .more:hover {
47
- background: rgba(0, 0, 0, 0.3);
48
- }
49
-
50
- body {
51
- background: #f3f3f3;
52
- }
53
-
54
- temba-tabs {
55
- margin: 2em;
56
- }
57
-
58
- temba-tabs *,
59
- temba-tab * {
60
- opacity: 0;
61
- }
62
-
63
- temba-tabs:defined *,
64
- temba-tab:defined * {
65
- opacity: 1;
66
- }
67
-
68
- temba-tab {
69
- padding: 1em;
70
- }
71
-
72
- .dropdown {
73
- padding: 2em;
74
- }
75
-
76
- .dropdown .title {
77
- font-weight: 400;
78
- margin-bottom: 0.5em;
79
- }
80
-
81
- .dropdown .item {
82
- padding: 0.5em;
83
- }
84
-
85
- .header {
86
- margin-bottom: 1em;
87
- font-size: 2em;
88
- font-weight: 400;
89
- color: #777;
90
- display: inline;
91
- }
92
-
93
- temba-dropdown {
94
- position: relative;
95
- display: inline-block;
96
- margin: 0em 0.5em;
97
- }
98
-
99
- temba-slider {
100
- margin-top: 1em;
101
- }
102
-
103
- temba-datepicker,
104
- temba-select,
105
- temba-textinput,
106
- temba-completion {
107
- margin: 0.5em;
108
- flex-grow: 1;
109
- }
110
- </style>
111
- <script type="module">
112
- import '../out-tsc/temba-modules.js';
113
- </script>
114
- <script>
115
- function handleDateChange(event) {}
116
-
117
- // var static_url = '/static/';
118
- function handleColorChange(event) {
119
- var color = event.target.values[0].name;
120
- if (color == 'Green') {
121
- event.target.infoText = 'Green is super dangerous!';
122
- } else {
123
- event.target.infoText = null;
124
- }
125
- }
126
-
127
- function storeTest() {
128
- var store = document.querySelector('temba-store');
129
- store
130
- .getResults('http://localhost.textit.in:8888/api/v2/fields.json', {
131
- force: true
132
- })
133
- .then(function (response) {
134
- console.log(response);
135
- });
136
- }
137
- </script>
138
- </head>
139
-
140
- <body>
141
- <script>
142
- // Initialize duration chart when DOM is loaded
143
- document.addEventListener('DOMContentLoaded', function() {
144
- const durationChart = document.getElementById('duration-chart');
145
- if (durationChart) {
146
- // Sample data with durations in seconds from the issue examples
147
- durationChart.data = {
148
- labels: ['Process A', 'Process B', 'Process C', 'Process D', 'Process E'],
149
- datasets: [{
150
- label: 'Processing Time',
151
- data: [68787, 958000, 3661, 120, 86400] // seconds: 19h6m, 11d2h, 1h1m, 2m, 1d
152
- }]
153
- };
154
- console.log('Duration chart initialized with formatDuration:', durationChart.formatDuration);
155
- }
156
- });
157
- </script>
158
- <temba-webchat
159
- channel="967cd415-8616-4b11-b38f-60f70e0999f4"
160
- ></temba-webchat>
161
- <temba-store
162
- completion="/static/api/completion.json"
163
- functions="/static/api/functions.json"
164
- fields="/static/api/fields.json"
165
- globals="/static/api/globals.json"
166
- groups="/static/api/groups.json"
167
- ></temba-store>
168
-
169
- <temba-dropdown>
170
- <div style="display: inline-block; margin-bottom: 1em" slot="toggle">
171
- <temba-icon name="menu" size="1.3" clickable></temba-icon>
172
- </div>
173
- <div
174
- slot="dropdown"
175
- class="dropdown"
176
- style="width: 250px; padding: 0.5em 1em"
177
- >
178
- <div class="item">
179
- <div class="title">Check this out!</div>
180
- <div class="details">
181
- temba-dropdown lets you do little popup menus like this.
182
- </div>
183
- </div>
184
- </div>
185
- </temba-dropdown>
186
-
187
- <div class="header">temba-components</div>
188
- <!--temba-image-picker name="avatar" label="Profile Picture" shape="circle"></temba-image-picker-->
189
- <temba-webchat channel="3c475f82-fe6d-4c33-af35-954d1adbce03"></temba-webchat>
190
- <!-- temba-template-editor url="/static/api/templates.json" lang="eng" template="580b124f-32cb-4003-b9e5-9eb783e29101"
191
- params="{&quot;body&quot;:[&quot;this&quot;, &quot;&quot;, &quot;that&quot;]}">
192
- </temba-template-editor-->
193
-
194
- <temba-tabs collapses index="0">
195
- <temba-tab name="Overview" icon="default">
196
- <temba-chart style="margin-bottom:8px"></temba-chart>
197
-
198
- <!-- Chart with duration formatting -->
199
- <div style="margin: 20px 0;">
200
- <h3>Duration Formatted Chart</h3>
201
- <temba-chart id="duration-chart" style="margin-bottom:8px" format-duration header="Process Times"></temba-chart>
202
- </div>
203
-
204
- <temba-progress style="margin-bottom:8px" total="100" current="25" eta="2030-09-17T07:00:00.000Z"></temba-progress>
205
- <temba-checkbox label="Check this out" checked></temba-checkbox>
15
+ <link
16
+ href="styles.css"
17
+ rel="stylesheet"
18
+ type="text/css"
19
+ />
20
+ </head>
21
+ <body>
22
+ <div class="header">temba-components</div>
23
+
24
+ <div class="nav">
25
+ <h2>Component Demos</h2>
26
+ <p>Interactive demos for all Temba web components. Each component has its own dedicated demo page.</p>
27
+ </div>
28
+
29
+ <div class="component-grid">
30
+ <!-- Form & Input Components -->
31
+ <div class="component-section">
32
+ <h2>Form & Input Components</h2>
33
+
34
+ <div class="component-card">
35
+ <h3>Text Input</h3>
36
+ <p>Text input components including completion and date/time pickers</p>
37
+ <a href="textinput/example.html">Basic Examples</a> |
38
+ <a href="textinput/completion.html">Completion</a>
39
+ </div>
40
+
41
+ <div class="component-card">
42
+ <h3>Select</h3>
43
+ <p>Dropdown selection components with various configurations</p>
44
+ <a href="select/example.html">Basic Examples</a> |
45
+ <a href="select/drag-and-drop.html">Drag & Drop</a> |
46
+ <a href="select/multi.html">Multi-Select</a>
47
+ </div>
48
+
49
+ <div class="component-card">
50
+ <h3>Checkbox</h3>
51
+ <p>Checkbox components with labels and help text</p>
52
+ <a href="checkbox/example.html">Examples</a>
53
+ </div>
54
+
55
+ <div class="component-card">
56
+ <h3>Date Picker</h3>
57
+ <p>Date and time selection components</p>
58
+ <a href="datepicker/example.html">Examples</a>
59
+ </div>
60
+
61
+ <div class="component-card">
62
+ <h3>Slider</h3>
63
+ <p>Range slider components</p>
64
+ <a href="slider/example.html">Examples</a>
65
+ </div>
66
+
67
+ <div class="component-card">
68
+ <h3>Compose</h3>
69
+ <p>Text composition components with rich editing features</p>
70
+ <a href="compose/example.html">Examples</a>
71
+ </div>
72
+ </div>
73
+
74
+ <!-- Interactive Components -->
75
+ <div class="component-section">
76
+ <h2>Interactive Components</h2>
77
+
78
+ <div class="component-card">
79
+ <h3>Button</h3>
80
+ <p>Interactive button components with various styles</p>
81
+ <a href="button/example.html">Examples</a>
82
+ </div>
83
+
84
+ <div class="component-card">
85
+ <h3>Dialog</h3>
86
+ <p>Modal dialog components for user interactions</p>
87
+ <a href="dialog/example.html">Examples</a>
88
+ </div>
89
+
90
+ <div class="component-card">
91
+ <h3>Dropdown</h3>
92
+ <p>Generic dropdown menu components</p>
93
+ <a href="dropdown/example.html">Examples</a>
94
+ </div>
95
+
96
+ <div class="component-card">
97
+ <h3>Tabs</h3>
98
+ <p>Tab navigation components with collapsible support</p>
99
+ <a href="tabs/example.html">Examples</a>
100
+ </div>
101
+
102
+ <div class="component-card">
103
+ <h3>Sortable List</h3>
104
+ <p>Drag-and-drop sortable list components</p>
105
+ <a href="sortable-list/example.html">Examples</a>
106
+ </div>
107
+ </div>
108
+
109
+ <!-- Feedback Components -->
110
+ <div class="component-section">
111
+ <h2>Feedback Components</h2>
112
+
113
+ <div class="component-card">
114
+ <h3>Alert</h3>
115
+ <p>Alert and notification components with different levels</p>
116
+ <a href="alert/example.html">Examples</a>
117
+ </div>
118
+
119
+ <div class="component-card">
120
+ <h3>Progress</h3>
121
+ <p>Progress bar components</p>
122
+ <a href="progress/example.html">Examples</a>
123
+ </div>
124
+ </div>
125
+
126
+ <!-- Data Visualization -->
127
+ <div class="component-section">
128
+ <h2>Data Visualization</h2>
129
+
130
+ <div class="component-card">
131
+ <h3>Chart</h3>
132
+ <p>Chart and data visualization components</p>
133
+ <a href="chart/example.html">Examples</a>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Miscellaneous Components -->
138
+ <div class="component-section">
139
+ <h2>Miscellaneous Components</h2>
140
+
141
+ <div class="component-card">
142
+ <h3>Loading, Thumbnail & Tip</h3>
143
+ <p>Small utility components: loading spinners, image thumbnails, and tooltips</p>
144
+ <a href="misc/example.html">Examples</a>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <div class="example">
150
+ <h3>Quick Overview</h3>
151
+ <p>Here's a quick preview of some components working together:</p>
152
+
206
153
  <temba-select placeholder="Select a color" clearable>
207
- <temba-option name="Red" value="0"></temba-option>
208
- <temba-option name="Green" value="1"></temba-option>
209
- <temba-option name="Blue" value="2"></temba-option>
210
- </temba-select>
211
-
212
- <div style="display: flex; flex-wrap: wrap">
213
- <temba-checkbox label="Check this out" checked></temba-checkbox>
214
- <temba-select placeholder="Select a color" clearable>
215
154
  <temba-option name="Red" value="0"></temba-option>
216
155
  <temba-option name="Green" value="1"></temba-option>
217
156
  <temba-option name="Blue" value="2"></temba-option>
218
- </temba-select>
219
-
220
- <temba-datepicker
221
- time
222
- value="2022-10-02 01:00:00+00:00"
223
- timezone="Africa/Lagos"
224
- onChange="handleDateChange(event)"
225
- ></temba-datepicker>
226
- </div>
227
-
228
- <temba-slider
229
- style="margin-bottom: 1em"
230
- value="50"
231
- min="0"
232
- max="100"
233
- range
234
- ></temba-slider>
235
- <temba-textinput value="plain text"></temba-textinput>
236
- <temba-completion value="you complete me @cont"></temba-completion>
237
- </temba-tab>
238
-
239
- <temba-tab name="datepicker" icon="datepicker">
240
- <div style="display: flex; flex-wrap: wrap">
241
- <temba-datepicker
242
- time
243
- value="2020-01-20T14:00+00:00"
244
- timezone="UTC"
245
- onChange="handleDateChange(event)"
246
- ></temba-datepicker>
247
- <temba-datepicker
248
- value="2022-10-09"
249
- onChange="handleDateChange(event)"
250
- ></temba-datepicker>
251
- <temba-datepicker
252
- time
253
- timezone=""
254
- value="2022-09-29T20:20:00.000000Z"
255
- ></temba-datepicker>
256
- <temba-datepicker
257
- time
258
- onChange="handleDateChange(event)"
259
- ></temba-datepicker>
260
- <temba-datepicker
261
- time
262
- value="2022-10-03 01:00:00+00:00"
263
- onChange="handleDateChange(event)"
264
- ></temba-datepicker>
265
- <temba-datepicker
266
- time
267
- value="2022-10-04 01:00:00+00:00"
268
- timezone="Africa/Nairobi"
269
- onChange="handleDateChange(event)"
270
- ></temba-datepicker>
271
- <temba-datepicker
272
- time
273
- value="2022-10-05 01:00:00+00:00"
274
- timezone="Africa/Lagos"
275
- onChange="handleDateChange(event)"
276
- ></temba-datepicker>
277
- <temba-datepicker
278
- time
279
- value="2022-10-06 01:00:00+00:00"
280
- timezone="America/Phoenix"
281
- onChange="handleDateChange(event)"
282
- ></temba-datepicker>
283
- <temba-datepicker
284
- time
285
- value="2022-10-07 01:00:00+00:00"
286
- timezone="America/Phoenix"
287
- onChange="handleDateChange(event)"
288
- ></temba-datepicker>
289
- </div>
290
- <div style="display: flex; margin-top: 0.5em"></div>
291
- </temba-tab>
292
-
293
- <temba-tab name="slider" icon="slider">
294
- <div class="example">
295
- With Range
296
- <temba-slider value="50" min="0" max="100" range></temba-slider>
297
- </div>
298
-
299
- <div class="example">
300
- Without Range
301
- <temba-slider value="50" min="0" max="100"></temba-slider>
302
- </div>
303
- </temba-tab>
304
-
305
- <temba-tab name="select" icon="select">
306
- <div class="example">
307
- <temba-select
308
- placeholder="Select a color"
309
- info_text="Some colors are very dangerous, choose wisely"
310
- onchange="handleColorChange(event)"
311
- >
312
- <temba-option name="Red" value="0"></temba-option>
313
- <temba-option name="Green" value="1"></temba-option>
314
- <temba-option name="Blue" value="2"></temba-option>
315
- </temba-select>
316
- </div>
317
-
318
- <div class="example">
319
- <temba-select placeholder="Select a color" clearable>
320
- <temba-option name="Red" value="0"></temba-option>
321
- <temba-option name="Green" value="1"></temba-option>
322
- <temba-option name="Blue" value="2"></temba-option>
323
- </temba-select>
324
- </div>
325
-
326
- <div class="example">
327
- <temba-select
328
- placeholder="Select a color"
329
- expressions="message"
330
- values='[{"name":"Red","value":"0"}]'
331
- searchable
332
- multi
333
- >
334
- <temba-option name="Red" value="0"></temba-option>
335
- <temba-option name="Green" value="1"></temba-option>
336
- <temba-option name="Blue" value="2"></temba-option>
337
- </temba-select>
338
- </div>
339
-
340
- <div class="example">
341
- <temba-select
342
- placeholder="Select 2 colors"
343
- name="Color2"
344
- label="Select up to 2 colors"
345
- expressions="message"
346
- maxItems="2"
347
- values='[{"name":"Red","value":"0"}]'
348
- searchable
349
- multi
350
- >
351
- <temba-option name="Red" value="0"></temba-option>
352
- <temba-option name="Green" value="1"></temba-option>
353
- <temba-option name="Blue" value="2"></temba-option>
354
- </temba-select>
355
- </div>
356
-
357
- <div class="example">
358
- <temba-select
359
- name="Color"
360
- label="Color"
361
- help_text="I'm not really enabled at the moment"
362
- placeholder="Select a color"
363
- expressions="message"
364
- values='[{"name":"Red","value":"0"}]'
365
- searchable
366
- multi
367
- disabled
368
- >
369
- <temba-option name="Red" value="0"></temba-option>
370
- <temba-option name="Green" value="1"></temba-option>
371
- <temba-option name="Blue" value="2"></temba-option>
372
- </temba-select>
373
- </div>
374
-
375
- <div class="example">
376
- <h3>Multi-select with 3 items (Drag and Drop Test)</h3>
377
- <temba-select
378
- placeholder="Select colors"
379
- values='[{"name":"Red","value":"0"},{"name":"Green","value":"1"},{"name":"Blue","value":"2"}]'
380
- multi
381
- >
382
- <temba-option name="Red" value="0"></temba-option>
383
- <temba-option name="Green" value="1"></temba-option>
384
- <temba-option name="Blue" value="2"></temba-option>
385
- <temba-option name="Yellow" value="3"></temba-option>
386
- <temba-option name="Purple" value="4"></temba-option>
387
- </temba-select>
388
- </div>
389
-
390
- <div class="example">
391
- <script>
392
- function toggleSelect(evt) {
393
- document.getElementById('select-toggle').disabled =
394
- !evt.currentTarget.checked;
395
- }
396
- </script>
397
- <div style="display: flex; align-items: center">
398
- <temba-checkbox
399
- onchange="toggleSelect(event)"
400
- checked
401
- ></temba-checkbox>
402
- <temba-select
403
- style="margin-left: 10px"
404
- id="select-toggle"
405
- placeholder="Select a color"
406
- expressions="message"
407
- >
408
- <temba-option name="Red" value="0"></temba-option>
409
- <temba-option name="Green" value="1"></temba-option>
410
- <temba-option name="Blue" value="2"></temba-option>
411
- </temba-select>
412
- </div>
413
- </div>
414
-
415
- <div class="example">
416
- <label style="display: block; margin-bottom: 5px; font-weight: bold;">Empty Select (No Options)</label>
417
- <temba-select placeholder="Click to see empty state">
418
- </temba-select>
419
- </div>
420
-
421
- <div class="example">
422
- <label style="display: block; margin-bottom: 5px; font-weight: bold;">Empty Searchable Select</label>
423
- <temba-select placeholder="Search for options" searchable>
424
- </temba-select>
425
- </div>
157
+ </temba-select>
426
158
 
427
- <div class="example">
428
- <label style="display: block; margin-bottom: 5px; font-weight: bold;">Empty Multi Select</label>
429
- <temba-select placeholder="Select multiple options" multi>
430
- </temba-select>
159
+ <div style="margin: 20px 0;">
160
+ <temba-checkbox label="Check this out" checked></temba-checkbox>
431
161
  </div>
432
- </temba-tab>
433
162
 
434
- <temba-tab name="textinput" icon="edit-05">
435
- <div class="example">
436
- <temba-textinput value="plain text"></temba-textinput>
437
- </div>
163
+ <temba-textinput value="plain text" placeholder="Enter some text"></temba-textinput>
438
164
 
439
- <div class="example">
440
- <temba-completion value="you complete me @cont"></temba-completion>
165
+ <div style="margin: 20px 0;">
166
+ <temba-slider value="50" min="0" max="100" range></temba-slider>
441
167
  </div>
168
+ </div>
442
169
 
443
- <div class="example">
444
- <temba-textinput
445
- name="start"
446
- label="Start Time"
447
- help_text="This is something you should think long and hard about"
448
- placeholder="Put something down, for real"
449
- value="2020-11-28 15:03"
450
- clearable
451
- datetimepicker
452
- ></temba-textinput>
453
- </div>
454
-
455
- <div class="example">
456
- <temba-completion
457
- counter="temba-charcount"
458
- value="This is a GSM charcounter in a textarea"
459
- gsm
460
- textarea
461
- ></temba-completion>
462
- <temba-charcount text="count this text"></temba-charcount>
463
- </div>
464
- </temba-tab>
465
- </temba-tabs>
466
- </body>
467
- </html>
170
+ <script type="module">
171
+ import '../out-tsc/temba-modules.js';
172
+ </script>
173
+ </body>
174
+ </html>