@nyaruka/temba-components 0.129.1 → 0.129.2
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/demo/components/alert/example.html +71 -0
- package/demo/components/button/example.html +167 -0
- package/demo/{chart → components/chart}/example.html +3 -3
- package/demo/components/chart/horizontal-demo.html +160 -0
- package/demo/components/checkbox/example.html +68 -0
- package/demo/components/compose/example.html +69 -0
- package/demo/components/datepicker/example.html +3 -3
- package/demo/components/datepicker/range-picker-demo.html +2 -2
- package/demo/{dialog → components/dialog}/example.html +3 -3
- package/demo/components/dropdown/example.html +95 -0
- package/demo/{flow → components/flow}/example.html +1 -1
- package/demo/{misc → components/misc}/example.html +3 -3
- package/demo/components/progress/example.html +62 -0
- package/demo/components/select/drag-and-drop.html +162 -0
- package/demo/components/select/example.html +76 -0
- package/demo/components/select/multi.html +72 -0
- package/demo/components/slider/example.html +55 -0
- package/demo/{sortable-list → components/sortable-list}/example.html +3 -3
- package/demo/components/tabs/example.html +91 -0
- package/demo/{textinput → components/textinput}/completion.html +3 -3
- package/demo/components/textinput/example.html +141 -0
- package/demo/{webchat → components/webchat}/example.html +3 -3
- package/demo/index.html +21 -21
- package/demo/static/css/styles.css +253 -0
- package/demo/sticky-note-demo.html +88 -85
- package/demo/styles.css +24 -0
- package/dist/locales/es.js +5 -5
- package/dist/locales/es.js.map +1 -1
- package/dist/locales/fr.js +5 -5
- package/dist/locales/fr.js.map +1 -1
- package/dist/locales/locale-codes.js +2 -11
- package/dist/locales/locale-codes.js.map +1 -1
- package/dist/locales/pt.js +5 -5
- package/dist/locales/pt.js.map +1 -1
- package/dist/temba-components.js +2 -2
- package/dist/temba-components.js.map +1 -1
- package/out-tsc/src/chart/TembaChart.js +5 -1
- package/out-tsc/src/chart/TembaChart.js.map +1 -1
- package/out-tsc/src/datepicker/RangePicker.js +3 -2
- package/out-tsc/src/datepicker/RangePicker.js.map +1 -1
- package/out-tsc/src/locales/es.js +5 -5
- package/out-tsc/src/locales/es.js.map +1 -1
- package/out-tsc/src/locales/fr.js +5 -5
- package/out-tsc/src/locales/fr.js.map +1 -1
- package/out-tsc/src/locales/locale-codes.js +2 -11
- package/out-tsc/src/locales/locale-codes.js.map +1 -1
- package/out-tsc/src/locales/pt.js +5 -5
- package/out-tsc/src/locales/pt.js.map +1 -1
- package/package.json +1 -1
- package/screenshots/truth/datepicker/range-picker-all.png +0 -0
- package/screenshots/truth/datepicker/range-picker-button-states.png +0 -0
- package/screenshots/truth/datepicker/range-picker-default.png +0 -0
- package/screenshots/truth/datepicker/range-picker-editing-start.png +0 -0
- package/screenshots/truth/datepicker/range-picker-week.png +0 -0
- package/screenshots/truth/datepicker/range-picker-year.png +0 -0
- package/src/chart/TembaChart.ts +4 -1
- package/src/datepicker/RangePicker.ts +3 -2
- package/src/locales/es.ts +13 -18
- package/src/locales/fr.ts +13 -18
- package/src/locales/locale-codes.ts +2 -11
- package/src/locales/pt.ts +13 -18
- package/demo/alert/example.html +0 -65
- package/demo/button/example.html +0 -71
- package/demo/chart/horizontal-demo.html +0 -81
- package/demo/checkbox/example.html +0 -72
- package/demo/compose/example.html +0 -72
- package/demo/dropdown/example.html +0 -99
- package/demo/progress/example.html +0 -59
- package/demo/select/drag-and-drop.html +0 -142
- package/demo/select/example.html +0 -82
- package/demo/select/multi.html +0 -73
- package/demo/slider/example.html +0 -59
- package/demo/tabs/example.html +0 -91
- package/demo/textinput/example.html +0 -61
|
@@ -0,0 +1,95 @@
|
|
|
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 href="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
|
|
16
|
+
<style>
|
|
17
|
+
temba-dropdown {
|
|
18
|
+
position: relative;
|
|
19
|
+
display: inline-block;
|
|
20
|
+
margin: 0em 0.5em;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.dropdown {
|
|
24
|
+
padding: 2em;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.dropdown .title {
|
|
28
|
+
font-weight: 400;
|
|
29
|
+
margin-bottom: 0.5em;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.dropdown .item {
|
|
33
|
+
padding: 0.5em;
|
|
34
|
+
}
|
|
35
|
+
</style>
|
|
36
|
+
</head>
|
|
37
|
+
<body>
|
|
38
|
+
<h1>Dropdown Examples</h1>
|
|
39
|
+
<p><a href="/demo/index.html">← Back to main demo</a></p>
|
|
40
|
+
|
|
41
|
+
<div class="example">
|
|
42
|
+
<h3>Basic Dropdown</h3>
|
|
43
|
+
<p>A dropdown menu with custom content</p>
|
|
44
|
+
<temba-dropdown>
|
|
45
|
+
<div style="display: inline-block; margin-bottom: 1em" slot="toggle">
|
|
46
|
+
<temba-icon name="menu" size="1.3" clickable></temba-icon>
|
|
47
|
+
</div>
|
|
48
|
+
<div
|
|
49
|
+
slot="dropdown"
|
|
50
|
+
class="dropdown"
|
|
51
|
+
style="width: 250px; padding: 0.5em 1em"
|
|
52
|
+
>
|
|
53
|
+
<div class="item">
|
|
54
|
+
<div class="title">Check this out!</div>
|
|
55
|
+
<div class="details">
|
|
56
|
+
temba-dropdown lets you do little popup menus like this.
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
</temba-dropdown>
|
|
61
|
+
</div>
|
|
62
|
+
|
|
63
|
+
<div class="example">
|
|
64
|
+
<h3>Dropdown with Multiple Items</h3>
|
|
65
|
+
<p>A dropdown with multiple menu items</p>
|
|
66
|
+
<temba-dropdown>
|
|
67
|
+
<div style="display: inline-block; margin-bottom: 1em" slot="toggle">
|
|
68
|
+
<temba-icon name="menu" size="1.3" clickable></temba-icon>
|
|
69
|
+
</div>
|
|
70
|
+
<div
|
|
71
|
+
slot="dropdown"
|
|
72
|
+
class="dropdown"
|
|
73
|
+
style="width: 200px; padding: 0.5em 1em"
|
|
74
|
+
>
|
|
75
|
+
<div class="item">
|
|
76
|
+
<div class="title">Option 1</div>
|
|
77
|
+
<div class="details">First menu option</div>
|
|
78
|
+
</div>
|
|
79
|
+
<div class="item">
|
|
80
|
+
<div class="title">Option 2</div>
|
|
81
|
+
<div class="details">Second menu option</div>
|
|
82
|
+
</div>
|
|
83
|
+
<div class="item">
|
|
84
|
+
<div class="title">Option 3</div>
|
|
85
|
+
<div class="details">Third menu option</div>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
</temba-dropdown>
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
<script type="module">
|
|
92
|
+
import '/out-tsc/temba-modules.js';
|
|
93
|
+
</script>
|
|
94
|
+
</body>
|
|
95
|
+
</html>
|
|
@@ -12,12 +12,12 @@
|
|
|
12
12
|
href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
|
|
13
13
|
rel="stylesheet"
|
|
14
14
|
/>
|
|
15
|
-
<link href="
|
|
15
|
+
<link href="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
|
|
16
16
|
</head>
|
|
17
17
|
<body>
|
|
18
18
|
<temba-lightbox> </temba-lightbox>
|
|
19
19
|
<h1>Miscellaneous Components</h1>
|
|
20
|
-
<p><a href="
|
|
20
|
+
<p><a href="/demo/index.html">← Back to main demo</a></p>
|
|
21
21
|
|
|
22
22
|
<div class="example">
|
|
23
23
|
<h3>Loading Component</h3>
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
</div>
|
|
67
67
|
|
|
68
68
|
<script type="module">
|
|
69
|
-
import '
|
|
69
|
+
import '/out-tsc/temba-modules.js';
|
|
70
70
|
</script>
|
|
71
71
|
</body>
|
|
72
72
|
</html>
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en-GB">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Progress 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="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
|
|
16
|
+
</head>
|
|
17
|
+
<body>
|
|
18
|
+
<h1>Progress Examples</h1>
|
|
19
|
+
<p><a href="/demo/index.html">← Back to main demo</a></p>
|
|
20
|
+
|
|
21
|
+
<div class="example">
|
|
22
|
+
<h3>Progress with ETA</h3>
|
|
23
|
+
<p>
|
|
24
|
+
A progress bar showing current progress with an estimated completion
|
|
25
|
+
time
|
|
26
|
+
</p>
|
|
27
|
+
<temba-progress
|
|
28
|
+
total="100"
|
|
29
|
+
current="25"
|
|
30
|
+
eta="2030-09-17T07:00:00.000Z"
|
|
31
|
+
></temba-progress>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
<div class="example">
|
|
35
|
+
<h3>Progress 50%</h3>
|
|
36
|
+
<p>A progress bar at 50% completion</p>
|
|
37
|
+
<temba-progress total="100" current="50"></temba-progress>
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<div class="example">
|
|
41
|
+
<h3>Progress 75%</h3>
|
|
42
|
+
<p>A progress bar at 75% completion</p>
|
|
43
|
+
<temba-progress total="100" current="75"></temba-progress>
|
|
44
|
+
</div>
|
|
45
|
+
|
|
46
|
+
<div class="example">
|
|
47
|
+
<h3>Progress Complete</h3>
|
|
48
|
+
<p>A completed progress bar</p>
|
|
49
|
+
<temba-progress total="100" current="100"></temba-progress>
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
<div class="example">
|
|
53
|
+
<h3>Progress with Different Scale</h3>
|
|
54
|
+
<p>A progress bar using a different total value</p>
|
|
55
|
+
<temba-progress total="200" current="150"></temba-progress>
|
|
56
|
+
</div>
|
|
57
|
+
|
|
58
|
+
<script type="module">
|
|
59
|
+
import '/out-tsc/temba-modules.js';
|
|
60
|
+
</script>
|
|
61
|
+
</body>
|
|
62
|
+
</html>
|
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en-GB">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Multi-Select Drag and Drop Demo</title>
|
|
6
|
+
<link
|
|
7
|
+
href="/static/css/temba-components.css"
|
|
8
|
+
rel="stylesheet"
|
|
9
|
+
type="text/css"
|
|
10
|
+
/>
|
|
11
|
+
<style>
|
|
12
|
+
body {
|
|
13
|
+
font-family: sans-serif;
|
|
14
|
+
padding: 20px;
|
|
15
|
+
max-width: 800px;
|
|
16
|
+
margin: 0 auto;
|
|
17
|
+
}
|
|
18
|
+
.example {
|
|
19
|
+
margin: 30px 0;
|
|
20
|
+
padding: 20px;
|
|
21
|
+
border: 1px solid #ddd;
|
|
22
|
+
border-radius: 8px;
|
|
23
|
+
}
|
|
24
|
+
.example h3 {
|
|
25
|
+
margin-top: 0;
|
|
26
|
+
color: #333;
|
|
27
|
+
}
|
|
28
|
+
.example p {
|
|
29
|
+
color: #666;
|
|
30
|
+
margin-bottom: 15px;
|
|
31
|
+
}
|
|
32
|
+
.expected {
|
|
33
|
+
background-color: #f0f8ff;
|
|
34
|
+
padding: 10px;
|
|
35
|
+
border-radius: 4px;
|
|
36
|
+
margin-top: 10px;
|
|
37
|
+
}
|
|
38
|
+
.expected strong {
|
|
39
|
+
color: #006400;
|
|
40
|
+
}
|
|
41
|
+
</style>
|
|
42
|
+
</head>
|
|
43
|
+
<body>
|
|
44
|
+
<h1>Multi-Select Drag and Drop Demo</h1>
|
|
45
|
+
<p>
|
|
46
|
+
<a href="/demo/index.html">← Back to main demo</a> |
|
|
47
|
+
<a href="example.html">Basic Examples</a> |
|
|
48
|
+
<a href="multi.html">Multi-Select</a>
|
|
49
|
+
</p>
|
|
50
|
+
<p>
|
|
51
|
+
This demo shows the drag and drop reordering functionality for
|
|
52
|
+
multi-select components.
|
|
53
|
+
</p>
|
|
54
|
+
|
|
55
|
+
<div class="example">
|
|
56
|
+
<h3>With 3 items (drag and drop enabled)</h3>
|
|
57
|
+
<p>
|
|
58
|
+
This multi-select has 3 pre-selected items. You should be able to drag
|
|
59
|
+
and drop to reorder them.
|
|
60
|
+
</p>
|
|
61
|
+
<temba-select multi searchable id="test3" placeholder="Select colors">
|
|
62
|
+
<temba-option name="Red" value="0" selected></temba-option>
|
|
63
|
+
<temba-option name="Green" value="1" selected></temba-option>
|
|
64
|
+
<temba-option name="Blue" value="2" selected></temba-option>
|
|
65
|
+
</temba-select>
|
|
66
|
+
<div class="expected">
|
|
67
|
+
<strong>Expected behavior:</strong>
|
|
68
|
+
<ul>
|
|
69
|
+
<li>Items should be wrapped in a sortable container</li>
|
|
70
|
+
<li>Drag an item to see a ghost element following the mouse</li>
|
|
71
|
+
<li>Drop on another item to swap their positions</li>
|
|
72
|
+
<li>Drop outside to cancel the operation</li>
|
|
73
|
+
<li>Items should maintain cursor style when hovering</li>
|
|
74
|
+
</ul>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
|
|
78
|
+
<div class="example">
|
|
79
|
+
<h3>With 2 items (drag and drop enabled)</h3>
|
|
80
|
+
<p>
|
|
81
|
+
This multi-select has 2 pre-selected items. You should be able to drag
|
|
82
|
+
and drop to reorder them.
|
|
83
|
+
</p>
|
|
84
|
+
<temba-select multi id="test2" placeholder="Select fruits">
|
|
85
|
+
<temba-option name="Apple" value="apple" selected></temba-option>
|
|
86
|
+
<temba-option name="Banana" value="banana" selected></temba-option>
|
|
87
|
+
</temba-select>
|
|
88
|
+
<div class="expected">
|
|
89
|
+
<strong>Expected behavior:</strong>
|
|
90
|
+
<ul>
|
|
91
|
+
<li>Same drag and drop functionality as above</li>
|
|
92
|
+
<li>Swapping the two items should work</li>
|
|
93
|
+
</ul>
|
|
94
|
+
</div>
|
|
95
|
+
</div>
|
|
96
|
+
|
|
97
|
+
<div class="example">
|
|
98
|
+
<h3>With 1 item (no drag and drop)</h3>
|
|
99
|
+
<p>
|
|
100
|
+
This multi-select has only 1 pre-selected item. Drag and drop should not
|
|
101
|
+
be enabled.
|
|
102
|
+
</p>
|
|
103
|
+
<temba-select multi id="test1" placeholder="Select an item">
|
|
104
|
+
<temba-option name="Solo" value="solo" selected></temba-option>
|
|
105
|
+
</temba-select>
|
|
106
|
+
<div class="expected">
|
|
107
|
+
<strong>Expected behavior:</strong>
|
|
108
|
+
<ul>
|
|
109
|
+
<li>No sortable container should be present</li>
|
|
110
|
+
<li>Normal multi-select appearance and behavior</li>
|
|
111
|
+
</ul>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
|
|
115
|
+
<div class="example">
|
|
116
|
+
<h3>Regular single select (no drag and drop)</h3>
|
|
117
|
+
<p>
|
|
118
|
+
This is a regular single-select. Drag and drop should not be enabled.
|
|
119
|
+
</p>
|
|
120
|
+
<temba-select id="single">
|
|
121
|
+
<temba-option name="Option 1" value="1" selected></temba-option>
|
|
122
|
+
</temba-select>
|
|
123
|
+
<div class="expected">
|
|
124
|
+
<strong>Expected behavior:</strong>
|
|
125
|
+
<ul>
|
|
126
|
+
<li>Normal single-select appearance and behavior</li>
|
|
127
|
+
<li>No sortable functionality</li>
|
|
128
|
+
</ul>
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
|
|
132
|
+
<script>
|
|
133
|
+
// Add event listeners to monitor changes
|
|
134
|
+
document.querySelectorAll('temba-select[multi]').forEach((select) => {
|
|
135
|
+
select.addEventListener('change', () => {
|
|
136
|
+
console.log(`${select.id} values changed:`, select.values);
|
|
137
|
+
});
|
|
138
|
+
});
|
|
139
|
+
|
|
140
|
+
// Log initial state after components load
|
|
141
|
+
window.addEventListener('load', () => {
|
|
142
|
+
setTimeout(() => {
|
|
143
|
+
console.log('=== Initial State ===');
|
|
144
|
+
document.querySelectorAll('temba-select').forEach((select) => {
|
|
145
|
+
const sortableList = select.shadowRoot?.querySelector(
|
|
146
|
+
'temba-sortable-list'
|
|
147
|
+
);
|
|
148
|
+
console.log(`${select.id}:`, {
|
|
149
|
+
values: select.values,
|
|
150
|
+
hasSortableList: !!sortableList,
|
|
151
|
+
isMulti: select.hasAttribute('multi')
|
|
152
|
+
});
|
|
153
|
+
});
|
|
154
|
+
}, 500);
|
|
155
|
+
});
|
|
156
|
+
</script>
|
|
157
|
+
|
|
158
|
+
<script type="module">
|
|
159
|
+
import '/out-tsc/temba-modules.js';
|
|
160
|
+
</script>
|
|
161
|
+
</body>
|
|
162
|
+
</html>
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en-GB">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Select Component 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="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
|
|
16
|
+
</head>
|
|
17
|
+
<body>
|
|
18
|
+
<h1>Select Component Examples</h1>
|
|
19
|
+
<p><a href="/demo/index.html">← Back to main demo</a></p>
|
|
20
|
+
|
|
21
|
+
<div class="example">
|
|
22
|
+
<h3>Basic Select</h3>
|
|
23
|
+
<p>A simple dropdown selection with info text</p>
|
|
24
|
+
<temba-select
|
|
25
|
+
placeholder="Select a color"
|
|
26
|
+
info_text="Some colors are very dangerous, choose wisely"
|
|
27
|
+
>
|
|
28
|
+
<temba-option name="Red" value="0"></temba-option>
|
|
29
|
+
<temba-option name="Green" value="1"></temba-option>
|
|
30
|
+
<temba-option name="Blue" value="2"></temba-option>
|
|
31
|
+
</temba-select>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
<div class="example">
|
|
35
|
+
<h3>Clearable Select</h3>
|
|
36
|
+
<p>A select that can be cleared after selection</p>
|
|
37
|
+
<temba-select placeholder="Select a color" clearable>
|
|
38
|
+
<temba-option name="Red" value="0"></temba-option>
|
|
39
|
+
<temba-option name="Green" value="1"></temba-option>
|
|
40
|
+
<temba-option name="Blue" value="2"></temba-option>
|
|
41
|
+
</temba-select>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<div class="example">
|
|
45
|
+
<h3>Empty Select</h3>
|
|
46
|
+
<p>A select with no options to show empty state</p>
|
|
47
|
+
<temba-select placeholder="Click to see empty state"> </temba-select>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<div class="example">
|
|
51
|
+
<h3>Empty Searchable Select</h3>
|
|
52
|
+
<p>A searchable select with no options</p>
|
|
53
|
+
<temba-select placeholder="Search for options" searchable> </temba-select>
|
|
54
|
+
</div>
|
|
55
|
+
|
|
56
|
+
<div class="example">
|
|
57
|
+
<h3>Pre-selected Option</h3>
|
|
58
|
+
<p>A select with a pre-selected value</p>
|
|
59
|
+
<temba-select placeholder="Select a color" clearable>
|
|
60
|
+
<temba-option name="Red" value="0"></temba-option>
|
|
61
|
+
<temba-option name="Green" value="1" selected></temba-option>
|
|
62
|
+
<temba-option name="Blue" value="2"></temba-option>
|
|
63
|
+
</temba-select>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<script>
|
|
67
|
+
function handleColorChange(event) {
|
|
68
|
+
console.log('Color changed:', event.target.value);
|
|
69
|
+
}
|
|
70
|
+
</script>
|
|
71
|
+
|
|
72
|
+
<script type="module">
|
|
73
|
+
import '/out-tsc/temba-modules.js';
|
|
74
|
+
</script>
|
|
75
|
+
</body>
|
|
76
|
+
</html>
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en-GB">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Multi-Select 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="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
|
|
16
|
+
</head>
|
|
17
|
+
<body>
|
|
18
|
+
<h1>Multi-Select Examples</h1>
|
|
19
|
+
<p>
|
|
20
|
+
<a href="/demo/index.html">← Back to main demo</a> |
|
|
21
|
+
<a href="example.html">Basic Examples</a> |
|
|
22
|
+
<a href="drag-and-drop.html">Drag & Drop</a>
|
|
23
|
+
</p>
|
|
24
|
+
|
|
25
|
+
<div class="example">
|
|
26
|
+
<h3>Multi-Select with Expressions</h3>
|
|
27
|
+
<p>A multi-select that supports expressions and is searchable</p>
|
|
28
|
+
<temba-select
|
|
29
|
+
placeholder="Select a color"
|
|
30
|
+
expressions="message"
|
|
31
|
+
values='[{"name":"Red","value":"0"}]'
|
|
32
|
+
searchable
|
|
33
|
+
multi
|
|
34
|
+
>
|
|
35
|
+
<temba-option name="Red" value="0"></temba-option>
|
|
36
|
+
<temba-option name="Green" value="1"></temba-option>
|
|
37
|
+
<temba-option name="Blue" value="2"></temba-option>
|
|
38
|
+
</temba-select>
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
<div class="example">
|
|
42
|
+
<h3>Limited Multi-Select</h3>
|
|
43
|
+
<p>A multi-select with a maximum number of items (2)</p>
|
|
44
|
+
<temba-select
|
|
45
|
+
placeholder="Select 2 colors"
|
|
46
|
+
name="Color2"
|
|
47
|
+
label="Select up to 2 colors"
|
|
48
|
+
expressions="message"
|
|
49
|
+
maxItems="2"
|
|
50
|
+
values='[{"name":"Red","value":"0"}]'
|
|
51
|
+
searchable
|
|
52
|
+
multi
|
|
53
|
+
>
|
|
54
|
+
<temba-option name="Red" value="0"></temba-option>
|
|
55
|
+
<temba-option name="Green" value="1"></temba-option>
|
|
56
|
+
<temba-option name="Blue" value="2"></temba-option>
|
|
57
|
+
<temba-option name="Yellow" value="3"></temba-option>
|
|
58
|
+
<temba-option name="Purple" value="4"></temba-option>
|
|
59
|
+
</temba-select>
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
<div class="example">
|
|
63
|
+
<h3>Empty Multi-Select</h3>
|
|
64
|
+
<p>A multi-select with no options to show empty state</p>
|
|
65
|
+
<temba-select placeholder="Select multiple options" multi> </temba-select>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<script type="module">
|
|
69
|
+
import '/out-tsc/temba-modules.js';
|
|
70
|
+
</script>
|
|
71
|
+
</body>
|
|
72
|
+
</html>
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en-GB">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Slider 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="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
|
|
16
|
+
</head>
|
|
17
|
+
<body>
|
|
18
|
+
<h1>Slider Examples</h1>
|
|
19
|
+
<p><a href="/demo/index.html">← Back to main demo</a></p>
|
|
20
|
+
|
|
21
|
+
<div class="example">
|
|
22
|
+
<h3>Slider with Range</h3>
|
|
23
|
+
<p>A slider that shows the full range</p>
|
|
24
|
+
<temba-slider value="50" min="0" max="100" range></temba-slider>
|
|
25
|
+
</div>
|
|
26
|
+
|
|
27
|
+
<div class="example">
|
|
28
|
+
<h3>Slider without Range</h3>
|
|
29
|
+
<p>A slider that only shows the selected value</p>
|
|
30
|
+
<temba-slider value="50" min="0" max="100"></temba-slider>
|
|
31
|
+
</div>
|
|
32
|
+
|
|
33
|
+
<div class="example">
|
|
34
|
+
<h3>Slider with Different Range</h3>
|
|
35
|
+
<p>A slider with a different min/max range</p>
|
|
36
|
+
<temba-slider value="25" min="10" max="50" range></temba-slider>
|
|
37
|
+
</div>
|
|
38
|
+
|
|
39
|
+
<div class="example">
|
|
40
|
+
<h3>Slider at Minimum</h3>
|
|
41
|
+
<p>A slider set to its minimum value</p>
|
|
42
|
+
<temba-slider value="0" min="0" max="100" range></temba-slider>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
<div class="example">
|
|
46
|
+
<h3>Slider at Maximum</h3>
|
|
47
|
+
<p>A slider set to its maximum value</p>
|
|
48
|
+
<temba-slider value="100" min="0" max="100" range></temba-slider>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
<script type="module">
|
|
52
|
+
import '/out-tsc/temba-modules.js';
|
|
53
|
+
</script>
|
|
54
|
+
</body>
|
|
55
|
+
</html>
|
|
@@ -12,11 +12,11 @@
|
|
|
12
12
|
href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
|
|
13
13
|
rel="stylesheet"
|
|
14
14
|
/>
|
|
15
|
-
<link href="
|
|
15
|
+
<link href="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
|
|
16
16
|
</head>
|
|
17
17
|
<body>
|
|
18
18
|
<h1>Sortable List Examples</h1>
|
|
19
|
-
<p><a href="
|
|
19
|
+
<p><a href="/demo/index.html">← Back to main demo</a></p>
|
|
20
20
|
|
|
21
21
|
<h2>
|
|
22
22
|
This component relies on a consumer component that manages the actual
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
</style>
|
|
94
94
|
|
|
95
95
|
<script type="module">
|
|
96
|
-
import '
|
|
96
|
+
import '/out-tsc/temba-modules.js';
|
|
97
97
|
</script>
|
|
98
98
|
</body>
|
|
99
99
|
</html>
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en-GB">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Tabs 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="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
|
|
16
|
+
<style>
|
|
17
|
+
temba-tab > div {
|
|
18
|
+
padding: 20px;
|
|
19
|
+
}
|
|
20
|
+
</style>
|
|
21
|
+
</head>
|
|
22
|
+
<body>
|
|
23
|
+
<h1>Tabs Examples</h1>
|
|
24
|
+
<p><a href="/demo/index.html">← Back to main demo</a></p>
|
|
25
|
+
|
|
26
|
+
<div class="example">
|
|
27
|
+
<h3>Basic Tabs</h3>
|
|
28
|
+
<p>A simple tab component</p>
|
|
29
|
+
<temba-tabs>
|
|
30
|
+
<temba-tab name="tab1" label="First Tab">
|
|
31
|
+
<div>This is the content of the first tab.</div>
|
|
32
|
+
</temba-tab>
|
|
33
|
+
<temba-tab name="tab2" label="Second Tab">
|
|
34
|
+
<div>This is the content of the second tab.</div>
|
|
35
|
+
</temba-tab>
|
|
36
|
+
<temba-tab name="tab3" label="Third Tab">
|
|
37
|
+
<div>This is the content of the third tab.</div>
|
|
38
|
+
</temba-tab>
|
|
39
|
+
</temba-tabs>
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
<div class="example">
|
|
43
|
+
<h3>Tabs with Default Selection</h3>
|
|
44
|
+
<p>Tabs with a pre-selected active tab</p>
|
|
45
|
+
<temba-tabs index="1">
|
|
46
|
+
<temba-tab name="overview" label="Overview">
|
|
47
|
+
<div>Overview content goes here.</div>
|
|
48
|
+
</temba-tab>
|
|
49
|
+
<temba-tab name="details" label="Details">
|
|
50
|
+
<div>Detailed information is displayed in this tab.</div>
|
|
51
|
+
</temba-tab>
|
|
52
|
+
<temba-tab name="settings" label="Settings">
|
|
53
|
+
<div>Configuration settings can be found here.</div>
|
|
54
|
+
</temba-tab>
|
|
55
|
+
</temba-tabs>
|
|
56
|
+
</div>
|
|
57
|
+
|
|
58
|
+
<div class="example">
|
|
59
|
+
<h3>Collapsible Tabs</h3>
|
|
60
|
+
<p>Tabs that can collapse on smaller screens</p>
|
|
61
|
+
<temba-tabs collapses>
|
|
62
|
+
<temba-tab name="info" label="Information">
|
|
63
|
+
<div>
|
|
64
|
+
<h4>Information Tab</h4>
|
|
65
|
+
<p>
|
|
66
|
+
This tab contains important information about the current item.
|
|
67
|
+
</p>
|
|
68
|
+
</div>
|
|
69
|
+
</temba-tab>
|
|
70
|
+
<temba-tab name="stats" label="Statistics">
|
|
71
|
+
<div>
|
|
72
|
+
<h4>Statistics Tab</h4>
|
|
73
|
+
<p>Statistical data and charts would be displayed here.</p>
|
|
74
|
+
</div>
|
|
75
|
+
</temba-tab>
|
|
76
|
+
<temba-tab name="history" label="History">
|
|
77
|
+
<div>
|
|
78
|
+
<h4>History Tab</h4>
|
|
79
|
+
<p>
|
|
80
|
+
Historical records and activity logs are shown in this section.
|
|
81
|
+
</p>
|
|
82
|
+
</div>
|
|
83
|
+
</temba-tab>
|
|
84
|
+
</temba-tabs>
|
|
85
|
+
</div>
|
|
86
|
+
|
|
87
|
+
<script type="module">
|
|
88
|
+
import '/out-tsc/temba-modules.js';
|
|
89
|
+
</script>
|
|
90
|
+
</body>
|
|
91
|
+
</html>
|