@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.
- package/CHANGELOG.md +10 -0
- package/TEST_OPTIMIZATION.md +158 -0
- package/demo/alert/example.html +65 -0
- package/demo/button/example.html +71 -0
- package/demo/chart/example.html +56 -0
- package/demo/checkbox/example.html +72 -0
- package/demo/compose/example.html +72 -0
- package/demo/data/images/gus.png +0 -0
- package/demo/data/images/purrington.jpg +0 -0
- package/demo/data/server/opened-tickets.json +40 -0
- package/demo/data/server/response-time.json +27 -0
- package/demo/datepicker/example.html +69 -0
- package/demo/dialog/example.html +107 -0
- package/demo/dropdown/example.html +99 -0
- package/demo/index.html +152 -445
- package/demo/misc/example.html +72 -0
- package/demo/progress/example.html +59 -0
- package/demo/{drag-drop-demo.html → select/drag-and-drop.html} +2 -1
- package/demo/select/example.html +82 -0
- package/demo/select/multi.html +73 -0
- package/demo/slider/example.html +59 -0
- package/demo/sortable-list/example.html +99 -0
- package/demo/styles.css +183 -0
- package/demo/tabs/example.html +91 -0
- package/demo/textinput/completion.html +56 -0
- package/demo/textinput/example.html +61 -0
- package/dist/temba-components.js +5 -5
- package/dist/temba-components.js.map +1 -1
- package/out-tsc/src/chart/TembaChart.js +19 -16
- package/out-tsc/src/chart/TembaChart.js.map +1 -1
- package/out-tsc/src/flow/Editor.js +1 -1
- package/out-tsc/src/flow/Editor.js.map +1 -1
- package/out-tsc/src/select/Select.js +1 -1
- package/out-tsc/src/select/Select.js.map +1 -1
- package/out-tsc/src/thumbnail/Thumbnail.js +1 -1
- package/out-tsc/src/thumbnail/Thumbnail.js.map +1 -1
- package/out-tsc/test/temba-chart.test.js +1 -1
- package/out-tsc/test/temba-chart.test.js.map +1 -1
- package/out-tsc/test/temba-compose.test.js +6 -30
- package/out-tsc/test/temba-compose.test.js.map +1 -1
- package/out-tsc/test/temba-contact-chat.test.js +1 -2
- package/out-tsc/test/temba-contact-chat.test.js.map +1 -1
- package/out-tsc/test/temba-dropdown.test.js +1 -1
- package/out-tsc/test/temba-dropdown.test.js.map +1 -1
- package/out-tsc/test/temba-omnibox.test.js +4 -0
- package/out-tsc/test/temba-omnibox.test.js.map +1 -1
- package/out-tsc/test/temba-select.test.js +49 -0
- package/out-tsc/test/temba-select.test.js.map +1 -1
- package/out-tsc/test/temba-toast.test.js +1 -2
- package/out-tsc/test/temba-toast.test.js.map +1 -1
- package/out-tsc/test/temba-utils-index.test.js +2 -2
- package/out-tsc/test/temba-utils-index.test.js.map +1 -1
- package/out-tsc/test/utils.test.js +31 -3
- package/out-tsc/test/utils.test.js.map +1 -1
- package/package.json +2 -3
- package/screenshots/truth/webchat/connected-state.png +0 -0
- package/src/chart/TembaChart.ts +20 -16
- package/src/flow/Editor.ts +1 -1
- package/src/select/Select.ts +1 -1
- package/src/thumbnail/Thumbnail.ts +1 -1
- package/test/temba-chart.test.ts +1 -1
- package/test/temba-compose.test.ts +11 -38
- package/test/temba-contact-chat.test.ts +4 -6
- package/test/temba-dropdown.test.ts +1 -1
- package/test/temba-omnibox.test.ts +5 -0
- package/test/temba-select.test.ts +67 -0
- package/test/temba-toast.test.ts +2 -2
- package/test/temba-utils-index.test.ts +2 -2
- package/test/utils.test.ts +39 -3
- package/web-test-runner.config.mjs +4 -2
- package/.storybook/main.js +0 -14
- package/.storybook/preview-head.html +0 -1
- package/.storybook/preview.js +0 -17
- package/demo/agents.html +0 -147
- package/demo/old.html +0 -573
- package/demo/remote.html +0 -3
- package/demo/test-drag-drop.html +0 -94
- package/screenshots/truth/compose/attachments-with-files-focused.png +0 -0
- package/stories/temba-checkbox.stories.md +0 -37
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en-GB">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Dialog 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>Dialog Examples</h1>
|
|
19
|
+
<p><a href="../index.html">← Back to main demo</a></p>
|
|
20
|
+
|
|
21
|
+
<div class="example">
|
|
22
|
+
<h3>Basic Dialog</h3>
|
|
23
|
+
<p>A simple dialog component</p>
|
|
24
|
+
<temba-button
|
|
25
|
+
onclick="document.querySelector('#basic-dialog').open = true"
|
|
26
|
+
name="Open Dialog"
|
|
27
|
+
></temba-button>
|
|
28
|
+
<temba-dialog id="basic-dialog">
|
|
29
|
+
<div slot="header">Basic Dialog</div>
|
|
30
|
+
<div style="padding: 20px">
|
|
31
|
+
This is a basic dialog with some content.
|
|
32
|
+
</div>
|
|
33
|
+
<div slot="buttons">
|
|
34
|
+
<temba-button
|
|
35
|
+
onclick="document.querySelector('#basic-dialog').open = false"
|
|
36
|
+
>Close</temba-button
|
|
37
|
+
>
|
|
38
|
+
</div>
|
|
39
|
+
</temba-dialog>
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
<div class="example">
|
|
43
|
+
<h3>Confirmation Dialog</h3>
|
|
44
|
+
<p>A dialog for user confirmation</p>
|
|
45
|
+
<temba-button
|
|
46
|
+
onclick="document.querySelector('#confirm-dialog').open = true"
|
|
47
|
+
name="Delete Item"
|
|
48
|
+
destructive
|
|
49
|
+
></temba-button>
|
|
50
|
+
<temba-dialog
|
|
51
|
+
id="confirm-dialog"
|
|
52
|
+
primaryButtonName="Delete"
|
|
53
|
+
header="Confirm Deletion"
|
|
54
|
+
destructive
|
|
55
|
+
>
|
|
56
|
+
<div style="padding: 20px">
|
|
57
|
+
Are you sure you want to delete this item? This action cannot be
|
|
58
|
+
undone.
|
|
59
|
+
</div>
|
|
60
|
+
<div slot="buttons">
|
|
61
|
+
<temba-button
|
|
62
|
+
secondary
|
|
63
|
+
onclick="document.querySelector('#confirm-dialog').open = false"
|
|
64
|
+
>Cancel</temba-button
|
|
65
|
+
>
|
|
66
|
+
<temba-button
|
|
67
|
+
primary
|
|
68
|
+
onclick="document.querySelector('#confirm-dialog').open = false"
|
|
69
|
+
>Delete</temba-button
|
|
70
|
+
>
|
|
71
|
+
</div>
|
|
72
|
+
</temba-dialog>
|
|
73
|
+
</div>
|
|
74
|
+
|
|
75
|
+
<div class="example">
|
|
76
|
+
<h3>Form Dialog</h3>
|
|
77
|
+
<p>A dialog containing form elements</p>
|
|
78
|
+
<temba-button
|
|
79
|
+
onclick="document.querySelector('#form-dialog').open = true"
|
|
80
|
+
name="Add User"
|
|
81
|
+
></temba-button>
|
|
82
|
+
<temba-dialog
|
|
83
|
+
id="form-dialog"
|
|
84
|
+
primaryButtonName="Add User"
|
|
85
|
+
header="Add User"
|
|
86
|
+
>
|
|
87
|
+
<div style="padding: 20px">
|
|
88
|
+
<div style="display: flex; flex-direction: column; gap: 15px">
|
|
89
|
+
<temba-textinput
|
|
90
|
+
placeholder="Enter name"
|
|
91
|
+
label="Name"
|
|
92
|
+
></temba-textinput>
|
|
93
|
+
<temba-textinput
|
|
94
|
+
placeholder="Enter email"
|
|
95
|
+
label="Email"
|
|
96
|
+
></temba-textinput>
|
|
97
|
+
<temba-checkbox label="Send welcome email"></temba-checkbox>
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
</temba-dialog>
|
|
101
|
+
</div>
|
|
102
|
+
|
|
103
|
+
<script type="module">
|
|
104
|
+
import '../../out-tsc/temba-modules.js';
|
|
105
|
+
</script>
|
|
106
|
+
</body>
|
|
107
|
+
</html>
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en-GB">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Dropdown 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-dropdown {
|
|
22
|
+
position: relative;
|
|
23
|
+
display: inline-block;
|
|
24
|
+
margin: 0em 0.5em;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.dropdown {
|
|
28
|
+
padding: 2em;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.dropdown .title {
|
|
32
|
+
font-weight: 400;
|
|
33
|
+
margin-bottom: 0.5em;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.dropdown .item {
|
|
37
|
+
padding: 0.5em;
|
|
38
|
+
}
|
|
39
|
+
</style>
|
|
40
|
+
</head>
|
|
41
|
+
<body>
|
|
42
|
+
<h1>Dropdown Examples</h1>
|
|
43
|
+
<p><a href="../index.html">← Back to main demo</a></p>
|
|
44
|
+
|
|
45
|
+
<div class="example">
|
|
46
|
+
<h3>Basic Dropdown</h3>
|
|
47
|
+
<p>A dropdown menu with custom content</p>
|
|
48
|
+
<temba-dropdown>
|
|
49
|
+
<div style="display: inline-block; margin-bottom: 1em" slot="toggle">
|
|
50
|
+
<temba-icon name="menu" size="1.3" clickable></temba-icon>
|
|
51
|
+
</div>
|
|
52
|
+
<div
|
|
53
|
+
slot="dropdown"
|
|
54
|
+
class="dropdown"
|
|
55
|
+
style="width: 250px; padding: 0.5em 1em"
|
|
56
|
+
>
|
|
57
|
+
<div class="item">
|
|
58
|
+
<div class="title">Check this out!</div>
|
|
59
|
+
<div class="details">
|
|
60
|
+
temba-dropdown lets you do little popup menus like this.
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</temba-dropdown>
|
|
65
|
+
</div>
|
|
66
|
+
|
|
67
|
+
<div class="example">
|
|
68
|
+
<h3>Dropdown with Multiple Items</h3>
|
|
69
|
+
<p>A dropdown with multiple menu items</p>
|
|
70
|
+
<temba-dropdown>
|
|
71
|
+
<div style="display: inline-block; margin-bottom: 1em" slot="toggle">
|
|
72
|
+
<temba-icon name="menu" size="1.3" clickable></temba-icon>
|
|
73
|
+
</div>
|
|
74
|
+
<div
|
|
75
|
+
slot="dropdown"
|
|
76
|
+
class="dropdown"
|
|
77
|
+
style="width: 200px; padding: 0.5em 1em"
|
|
78
|
+
>
|
|
79
|
+
<div class="item">
|
|
80
|
+
<div class="title">Option 1</div>
|
|
81
|
+
<div class="details">First menu option</div>
|
|
82
|
+
</div>
|
|
83
|
+
<div class="item">
|
|
84
|
+
<div class="title">Option 2</div>
|
|
85
|
+
<div class="details">Second menu option</div>
|
|
86
|
+
</div>
|
|
87
|
+
<div class="item">
|
|
88
|
+
<div class="title">Option 3</div>
|
|
89
|
+
<div class="details">Third menu option</div>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
</temba-dropdown>
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<script type="module">
|
|
96
|
+
import '../../out-tsc/temba-modules.js';
|
|
97
|
+
</script>
|
|
98
|
+
</body>
|
|
99
|
+
</html>
|