@nyaruka/temba-components 0.124.0 → 0.124.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 +16 -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 +23 -26
- package/dist/temba-components.js.map +1 -1
- package/out-tsc/src/chart/TembaChart.js +27 -22
- 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 +29 -22
- 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,72 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en-GB">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Miscellaneous Components</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
|
+
<temba-lightbox> </temba-lightbox>
|
|
19
|
+
<h1>Miscellaneous Components</h1>
|
|
20
|
+
<p><a href="../index.html">← Back to main demo</a></p>
|
|
21
|
+
|
|
22
|
+
<div class="example">
|
|
23
|
+
<h3>Loading Component</h3>
|
|
24
|
+
<p>A loading spinner for async operations</p>
|
|
25
|
+
<temba-loading></temba-loading>
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
<div class="example">
|
|
29
|
+
<h3>Thumbnail Component</h3>
|
|
30
|
+
<p>Image thumbnails with autozooming and downloading</p>
|
|
31
|
+
<div style="display: flex; gap: 15px; align-items: center">
|
|
32
|
+
<!-- normally a server would provide the content type, but our demo doesn't so we do it manually-->
|
|
33
|
+
<temba-thumbnail
|
|
34
|
+
url="../data/images/gus.png"
|
|
35
|
+
size="small"
|
|
36
|
+
contentType="image"
|
|
37
|
+
></temba-thumbnail>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
<div class="example">
|
|
42
|
+
<h3>Tip Component</h3>
|
|
43
|
+
<p>Tooltip components for additional information</p>
|
|
44
|
+
<div style="display: flex; gap: 20px; flex-wrap: wrap">
|
|
45
|
+
<div>
|
|
46
|
+
<temba-tip text="This is a basic tooltip"
|
|
47
|
+
><span>Hover me</span></temba-tip
|
|
48
|
+
>
|
|
49
|
+
</div>
|
|
50
|
+
<div>
|
|
51
|
+
<temba-tip text="This tooltip appears above" position="top">
|
|
52
|
+
<span>Top tip</span></temba-tip
|
|
53
|
+
>
|
|
54
|
+
</div>
|
|
55
|
+
<div>
|
|
56
|
+
<temba-tip text="This tooltip appears to the right" position="right"
|
|
57
|
+
><span>Right tip</span></temba-tip
|
|
58
|
+
>
|
|
59
|
+
</div>
|
|
60
|
+
<div>
|
|
61
|
+
<temba-tip text="This tooltip appears to the bottom" position="bottom"
|
|
62
|
+
><span>Bottom tip</span></temba-tip
|
|
63
|
+
>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<script type="module">
|
|
69
|
+
import '../../out-tsc/temba-modules.js';
|
|
70
|
+
</script>
|
|
71
|
+
</body>
|
|
72
|
+
</html>
|
|
@@ -0,0 +1,59 @@
|
|
|
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
|
|
16
|
+
href="../styles.css"
|
|
17
|
+
rel="stylesheet"
|
|
18
|
+
type="text/css"
|
|
19
|
+
/>
|
|
20
|
+
</head>
|
|
21
|
+
<body>
|
|
22
|
+
<h1>Progress Examples</h1>
|
|
23
|
+
<p><a href="../index.html">← Back to main demo</a></p>
|
|
24
|
+
|
|
25
|
+
<div class="example">
|
|
26
|
+
<h3>Progress with ETA</h3>
|
|
27
|
+
<p>A progress bar showing current progress with an estimated completion time</p>
|
|
28
|
+
<temba-progress total="100" current="25" eta="2030-09-17T07:00:00.000Z"></temba-progress>
|
|
29
|
+
</div>
|
|
30
|
+
|
|
31
|
+
<div class="example">
|
|
32
|
+
<h3>Progress 50%</h3>
|
|
33
|
+
<p>A progress bar at 50% completion</p>
|
|
34
|
+
<temba-progress total="100" current="50"></temba-progress>
|
|
35
|
+
</div>
|
|
36
|
+
|
|
37
|
+
<div class="example">
|
|
38
|
+
<h3>Progress 75%</h3>
|
|
39
|
+
<p>A progress bar at 75% completion</p>
|
|
40
|
+
<temba-progress total="100" current="75"></temba-progress>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<div class="example">
|
|
44
|
+
<h3>Progress Complete</h3>
|
|
45
|
+
<p>A completed progress bar</p>
|
|
46
|
+
<temba-progress total="100" current="100"></temba-progress>
|
|
47
|
+
</div>
|
|
48
|
+
|
|
49
|
+
<div class="example">
|
|
50
|
+
<h3>Progress with Different Scale</h3>
|
|
51
|
+
<p>A progress bar using a different total value</p>
|
|
52
|
+
<temba-progress total="200" current="150"></temba-progress>
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
<script type="module">
|
|
56
|
+
import '../../out-tsc/temba-modules.js';
|
|
57
|
+
</script>
|
|
58
|
+
</body>
|
|
59
|
+
</html>
|
|
@@ -42,6 +42,7 @@
|
|
|
42
42
|
</head>
|
|
43
43
|
<body>
|
|
44
44
|
<h1>Multi-Select Drag and Drop Demo</h1>
|
|
45
|
+
<p><a href="../index.html">← Back to main demo</a> | <a href="example.html">Basic Examples</a> | <a href="multi.html">Multi-Select</a></p>
|
|
45
46
|
<p>This demo shows the drag and drop reordering functionality for multi-select components.</p>
|
|
46
47
|
|
|
47
48
|
<div class="example">
|
|
@@ -135,7 +136,7 @@
|
|
|
135
136
|
</script>
|
|
136
137
|
|
|
137
138
|
<script type="module">
|
|
138
|
-
import '
|
|
139
|
+
import '../../out-tsc/temba-modules.js';
|
|
139
140
|
</script>
|
|
140
141
|
</body>
|
|
141
142
|
</html>
|
|
@@ -0,0 +1,82 @@
|
|
|
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
|
|
16
|
+
href="../styles.css"
|
|
17
|
+
rel="stylesheet"
|
|
18
|
+
type="text/css"
|
|
19
|
+
/>
|
|
20
|
+
</head>
|
|
21
|
+
<body>
|
|
22
|
+
<h1>Select Component Examples</h1>
|
|
23
|
+
<p><a href="../index.html">← Back to main demo</a></p>
|
|
24
|
+
|
|
25
|
+
<div class="example">
|
|
26
|
+
<h3>Basic Select</h3>
|
|
27
|
+
<p>A simple dropdown selection with info text</p>
|
|
28
|
+
<temba-select
|
|
29
|
+
placeholder="Select a color"
|
|
30
|
+
info_text="Some colors are very dangerous, choose wisely"
|
|
31
|
+
>
|
|
32
|
+
<temba-option name="Red" value="0"></temba-option>
|
|
33
|
+
<temba-option name="Green" value="1"></temba-option>
|
|
34
|
+
<temba-option name="Blue" value="2"></temba-option>
|
|
35
|
+
</temba-select>
|
|
36
|
+
</div>
|
|
37
|
+
|
|
38
|
+
<div class="example">
|
|
39
|
+
<h3>Clearable Select</h3>
|
|
40
|
+
<p>A select that can be cleared after selection</p>
|
|
41
|
+
<temba-select placeholder="Select a color" clearable>
|
|
42
|
+
<temba-option name="Red" value="0"></temba-option>
|
|
43
|
+
<temba-option name="Green" value="1"></temba-option>
|
|
44
|
+
<temba-option name="Blue" value="2"></temba-option>
|
|
45
|
+
</temba-select>
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
<div class="example">
|
|
49
|
+
<h3>Empty Select</h3>
|
|
50
|
+
<p>A select with no options to show empty state</p>
|
|
51
|
+
<temba-select placeholder="Click to see empty state">
|
|
52
|
+
</temba-select>
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
<div class="example">
|
|
56
|
+
<h3>Empty Searchable Select</h3>
|
|
57
|
+
<p>A searchable select with no options</p>
|
|
58
|
+
<temba-select placeholder="Search for options" searchable>
|
|
59
|
+
</temba-select>
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
<div class="example">
|
|
63
|
+
<h3>Pre-selected Option</h3>
|
|
64
|
+
<p>A select with a pre-selected value</p>
|
|
65
|
+
<temba-select placeholder="Select a color" clearable>
|
|
66
|
+
<temba-option name="Red" value="0"></temba-option>
|
|
67
|
+
<temba-option name="Green" value="1" selected></temba-option>
|
|
68
|
+
<temba-option name="Blue" value="2"></temba-option>
|
|
69
|
+
</temba-select>
|
|
70
|
+
</div>
|
|
71
|
+
|
|
72
|
+
<script>
|
|
73
|
+
function handleColorChange(event) {
|
|
74
|
+
console.log('Color changed:', event.target.value);
|
|
75
|
+
}
|
|
76
|
+
</script>
|
|
77
|
+
|
|
78
|
+
<script type="module">
|
|
79
|
+
import '../../out-tsc/temba-modules.js';
|
|
80
|
+
</script>
|
|
81
|
+
</body>
|
|
82
|
+
</html>
|
|
@@ -0,0 +1,73 @@
|
|
|
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
|
|
16
|
+
href="../styles.css"
|
|
17
|
+
rel="stylesheet"
|
|
18
|
+
type="text/css"
|
|
19
|
+
/>
|
|
20
|
+
</head>
|
|
21
|
+
<body>
|
|
22
|
+
<h1>Multi-Select Examples</h1>
|
|
23
|
+
<p><a href="../index.html">← Back to main demo</a> | <a href="example.html">Basic Examples</a> | <a href="drag-and-drop.html">Drag & Drop</a></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>
|
|
66
|
+
</temba-select>
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
<script type="module">
|
|
70
|
+
import '../../out-tsc/temba-modules.js';
|
|
71
|
+
</script>
|
|
72
|
+
</body>
|
|
73
|
+
</html>
|
|
@@ -0,0 +1,59 @@
|
|
|
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
|
|
16
|
+
href="../styles.css"
|
|
17
|
+
rel="stylesheet"
|
|
18
|
+
type="text/css"
|
|
19
|
+
/>
|
|
20
|
+
</head>
|
|
21
|
+
<body>
|
|
22
|
+
<h1>Slider Examples</h1>
|
|
23
|
+
<p><a href="../index.html">← Back to main demo</a></p>
|
|
24
|
+
|
|
25
|
+
<div class="example">
|
|
26
|
+
<h3>Slider with Range</h3>
|
|
27
|
+
<p>A slider that shows the full range</p>
|
|
28
|
+
<temba-slider value="50" min="0" max="100" range></temba-slider>
|
|
29
|
+
</div>
|
|
30
|
+
|
|
31
|
+
<div class="example">
|
|
32
|
+
<h3>Slider without Range</h3>
|
|
33
|
+
<p>A slider that only shows the selected value</p>
|
|
34
|
+
<temba-slider value="50" min="0" max="100"></temba-slider>
|
|
35
|
+
</div>
|
|
36
|
+
|
|
37
|
+
<div class="example">
|
|
38
|
+
<h3>Slider with Different Range</h3>
|
|
39
|
+
<p>A slider with a different min/max range</p>
|
|
40
|
+
<temba-slider value="25" min="10" max="50" range></temba-slider>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<div class="example">
|
|
44
|
+
<h3>Slider at Minimum</h3>
|
|
45
|
+
<p>A slider set to its minimum value</p>
|
|
46
|
+
<temba-slider value="0" min="0" max="100" range></temba-slider>
|
|
47
|
+
</div>
|
|
48
|
+
|
|
49
|
+
<div class="example">
|
|
50
|
+
<h3>Slider at Maximum</h3>
|
|
51
|
+
<p>A slider set to its maximum value</p>
|
|
52
|
+
<temba-slider value="100" min="0" max="100" range></temba-slider>
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
<script type="module">
|
|
56
|
+
import '../../out-tsc/temba-modules.js';
|
|
57
|
+
</script>
|
|
58
|
+
</body>
|
|
59
|
+
</html>
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en-GB">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Sortable List 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>Sortable List Examples</h1>
|
|
19
|
+
<p><a href="../index.html">← Back to main demo</a></p>
|
|
20
|
+
|
|
21
|
+
<h2>
|
|
22
|
+
This component relies on a consumer component that manages the actual
|
|
23
|
+
order of things. So this demo doesn't do anything after you drag items.
|
|
24
|
+
</h2>
|
|
25
|
+
<div class="example">
|
|
26
|
+
<h3>Basic Sortable List</h3>
|
|
27
|
+
<p>A list where items can be reordered by dragging</p>
|
|
28
|
+
<temba-sortable-list>
|
|
29
|
+
<div class="sortable">First Item</div>
|
|
30
|
+
<div class="sortable">Second Item</div>
|
|
31
|
+
<div class="sortable">Third Item</div>
|
|
32
|
+
<div class="sortable">Fourth Item</div>
|
|
33
|
+
</temba-sortable-list>
|
|
34
|
+
</div>
|
|
35
|
+
|
|
36
|
+
<div class="example">
|
|
37
|
+
<h3>Sortable List with Complex Items</h3>
|
|
38
|
+
<p>A sortable list containing more complex content</p>
|
|
39
|
+
<temba-sortable-list>
|
|
40
|
+
<div class="sortable">
|
|
41
|
+
<h4>Task 1</h4>
|
|
42
|
+
<p>Complete the user interface design</p>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="sortable">
|
|
45
|
+
<h4>Task 2</h4>
|
|
46
|
+
<p>Implement backend API endpoints</p>
|
|
47
|
+
</div>
|
|
48
|
+
<div class="sortable">
|
|
49
|
+
<h4>Task 3</h4>
|
|
50
|
+
<p>Write comprehensive tests</p>
|
|
51
|
+
</div>
|
|
52
|
+
<div class="sortable">
|
|
53
|
+
<h4>Task 4</h4>
|
|
54
|
+
<p>Deploy to production environment</p>
|
|
55
|
+
</div>
|
|
56
|
+
</temba-sortable-list>
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
<div class="example">
|
|
60
|
+
<h3>Disabled Sortable List</h3>
|
|
61
|
+
<p>A list that cannot be reordered</p>
|
|
62
|
+
<temba-sortable-list disabled>
|
|
63
|
+
<div class="sortable">Fixed Item 1</div>
|
|
64
|
+
<div class="sortable">Fixed Item 2</div>
|
|
65
|
+
<div class="sortable">Fixed Item 3</div>
|
|
66
|
+
</temba-sortable-list>
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
<style>
|
|
70
|
+
.sortable {
|
|
71
|
+
padding: 12px;
|
|
72
|
+
margin: 4px 4px;
|
|
73
|
+
background: #f5f5f5;
|
|
74
|
+
border: 1px solid #ddd;
|
|
75
|
+
border-radius: 4px;
|
|
76
|
+
cursor: grab;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.sortable:active {
|
|
80
|
+
cursor: grabbing;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.sortable h4 {
|
|
84
|
+
margin: 0 0 8px 0;
|
|
85
|
+
color: #333;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.sortable p {
|
|
89
|
+
margin: 0;
|
|
90
|
+
color: #666;
|
|
91
|
+
font-size: 0.9em;
|
|
92
|
+
}
|
|
93
|
+
</style>
|
|
94
|
+
|
|
95
|
+
<script type="module">
|
|
96
|
+
import '../../out-tsc/temba-modules.js';
|
|
97
|
+
</script>
|
|
98
|
+
</body>
|
|
99
|
+
</html>
|
package/demo/styles.css
ADDED
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
body {
|
|
2
|
+
font-family: sans-serif;
|
|
3
|
+
padding: 20px;
|
|
4
|
+
max-width: 800px;
|
|
5
|
+
margin: 0 auto;
|
|
6
|
+
background: #f3f3f3;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.example {
|
|
10
|
+
margin: 30px 0;
|
|
11
|
+
padding: 20px;
|
|
12
|
+
border: 1px solid #ddd;
|
|
13
|
+
border-radius: 8px;
|
|
14
|
+
background: white;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.example h3 {
|
|
18
|
+
margin-top: 0;
|
|
19
|
+
color: #333;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.example p {
|
|
23
|
+
color: #666;
|
|
24
|
+
margin-bottom: 15px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.example label {
|
|
28
|
+
display: block;
|
|
29
|
+
margin-bottom: 5px;
|
|
30
|
+
font-weight: bold;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.expected {
|
|
34
|
+
background-color: #f0f8ff;
|
|
35
|
+
padding: 10px;
|
|
36
|
+
border-radius: 4px;
|
|
37
|
+
margin-top: 10px;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.expected strong {
|
|
41
|
+
color: #006400;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.header {
|
|
45
|
+
margin-bottom: 1em;
|
|
46
|
+
font-size: 2em;
|
|
47
|
+
font-weight: 400;
|
|
48
|
+
color: #777;
|
|
49
|
+
display: inline;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.nav {
|
|
53
|
+
margin: 20px 0;
|
|
54
|
+
padding: 20px;
|
|
55
|
+
background: white;
|
|
56
|
+
border-radius: 8px;
|
|
57
|
+
border: 1px solid #ddd;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.nav h2 {
|
|
61
|
+
margin-top: 0;
|
|
62
|
+
color: #333;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.nav ul {
|
|
66
|
+
list-style: none;
|
|
67
|
+
padding: 0;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.nav li {
|
|
71
|
+
margin: 10px 0;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.nav a {
|
|
75
|
+
color: #0066cc;
|
|
76
|
+
text-decoration: none;
|
|
77
|
+
font-size: 16px;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.nav a:hover {
|
|
81
|
+
text-decoration: underline;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.component-grid {
|
|
85
|
+
display: flex;
|
|
86
|
+
flex-direction: column;
|
|
87
|
+
gap: 30px;
|
|
88
|
+
margin: 20px 0;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.component-section {
|
|
92
|
+
background: white;
|
|
93
|
+
padding: 20px;
|
|
94
|
+
border-radius: 8px;
|
|
95
|
+
border: 1px solid #ddd;
|
|
96
|
+
justify-content: space-between;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.component-section h2 {
|
|
100
|
+
margin-top: 0;
|
|
101
|
+
margin-bottom: 20px;
|
|
102
|
+
color: #333;
|
|
103
|
+
border-bottom: 2px solid #0066cc;
|
|
104
|
+
padding-bottom: 10px;
|
|
105
|
+
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.component-section .component-card {
|
|
109
|
+
display: inline-block;
|
|
110
|
+
width: calc(50% - 60px);
|
|
111
|
+
vertical-align: top;
|
|
112
|
+
margin:10px;
|
|
113
|
+
|
|
114
|
+
border: 1px solid #eee;
|
|
115
|
+
background: #f9f9f9;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.component-section .component-card:nth-child(even) {
|
|
119
|
+
margin-right: 0;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
@media (max-width: 768px) {
|
|
123
|
+
.component-section .component-card {
|
|
124
|
+
width: 100%;
|
|
125
|
+
margin-right: 0;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.component-card {
|
|
130
|
+
background: white;
|
|
131
|
+
padding: 20px;
|
|
132
|
+
border-radius: 8px;
|
|
133
|
+
border: 1px solid #ddd;
|
|
134
|
+
text-align: center;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.component-card h3 {
|
|
138
|
+
margin-top: 0;
|
|
139
|
+
color: #333;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.component-card p {
|
|
143
|
+
color: #666;
|
|
144
|
+
margin-bottom: 15px;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.component-card a {
|
|
148
|
+
color: #0066cc;
|
|
149
|
+
text-decoration: none;
|
|
150
|
+
font-weight: bold;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.component-card a:hover {
|
|
154
|
+
text-decoration: underline;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/* Preserve some styling from original demo */
|
|
158
|
+
.linked {
|
|
159
|
+
text-decoration: underline;
|
|
160
|
+
color: blue;
|
|
161
|
+
cursor: pointer;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
temba-dropdown {
|
|
165
|
+
position: relative;
|
|
166
|
+
display: inline-block;
|
|
167
|
+
margin: 0em 0.5em;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
temba-slider {
|
|
171
|
+
margin-top: 1em;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
/* Make components visible after they load */
|
|
175
|
+
temba-tabs *,
|
|
176
|
+
temba-tab * {
|
|
177
|
+
opacity: 0;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
temba-tabs:defined *,
|
|
181
|
+
temba-tab:defined * {
|
|
182
|
+
opacity: 1;
|
|
183
|
+
}
|