@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
|
@@ -12,13 +12,13 @@
|
|
|
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>Completion Examples</h1>
|
|
19
19
|
|
|
20
20
|
<p>
|
|
21
|
-
<a href="
|
|
21
|
+
<a href="/demo/index.html">← Back to main demo</a> |
|
|
22
22
|
<a href="example.html">Basic Text Input</a>
|
|
23
23
|
</p>
|
|
24
24
|
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
</div>
|
|
51
51
|
|
|
52
52
|
<script type="module">
|
|
53
|
-
import '
|
|
53
|
+
import '/out-tsc/temba-modules.js';
|
|
54
54
|
</script>
|
|
55
55
|
</body>
|
|
56
56
|
</html>
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en-GB">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Text Input 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
|
+
<link href="/demo/static/css/prism.css" rel="stylesheet" />
|
|
17
|
+
<script type="module" src="/demo/static/js/prism-loader.js"></script>
|
|
18
|
+
</head>
|
|
19
|
+
<body>
|
|
20
|
+
<h1>Text Input Examples</h1>
|
|
21
|
+
<p>
|
|
22
|
+
<a href="/demo/index.html">← Back to main demo</a> |
|
|
23
|
+
<a href="completion.html">Completion Examples</a>
|
|
24
|
+
</p>
|
|
25
|
+
|
|
26
|
+
<table class="attr-table">
|
|
27
|
+
<thead>
|
|
28
|
+
<tr>
|
|
29
|
+
<th>Attribute</th>
|
|
30
|
+
<th>Description</th>
|
|
31
|
+
<th>Default</th>
|
|
32
|
+
</tr>
|
|
33
|
+
</thead>
|
|
34
|
+
<tbody>
|
|
35
|
+
<tr>
|
|
36
|
+
<td>value</td>
|
|
37
|
+
<td>The current text value of the input</td>
|
|
38
|
+
<td>''</td>
|
|
39
|
+
</tr>
|
|
40
|
+
<tr>
|
|
41
|
+
<td>placeholder</td>
|
|
42
|
+
<td>Placeholder text shown when input is empty</td>
|
|
43
|
+
<td>''</td>
|
|
44
|
+
</tr>
|
|
45
|
+
<tr>
|
|
46
|
+
<td>textarea</td>
|
|
47
|
+
<td>Renders as a multi-line textarea instead of single-line input</td>
|
|
48
|
+
<td>false</td>
|
|
49
|
+
</tr>
|
|
50
|
+
<tr>
|
|
51
|
+
<td>password</td>
|
|
52
|
+
<td>Renders as a password input with hidden text</td>
|
|
53
|
+
<td>false</td>
|
|
54
|
+
</tr>
|
|
55
|
+
<tr>
|
|
56
|
+
<td>maxlength</td>
|
|
57
|
+
<td>Maximum number of characters allowed</td>
|
|
58
|
+
<td>None</td>
|
|
59
|
+
</tr>
|
|
60
|
+
<tr>
|
|
61
|
+
<td>clearable</td>
|
|
62
|
+
<td>Shows a clear button to empty the input</td>
|
|
63
|
+
<td>false</td>
|
|
64
|
+
</tr>
|
|
65
|
+
<tr>
|
|
66
|
+
<td>autogrow</td>
|
|
67
|
+
<td>Automatically adjusts textarea height based on content</td>
|
|
68
|
+
<td>false</td>
|
|
69
|
+
</tr>
|
|
70
|
+
<tr>
|
|
71
|
+
<td>gsm</td>
|
|
72
|
+
<td>Enables GSM character validation for SMS messages</td>
|
|
73
|
+
<td>false</td>
|
|
74
|
+
</tr>
|
|
75
|
+
<tr>
|
|
76
|
+
<td>submitOnEnter</td>
|
|
77
|
+
<td>Whether pressing Enter submits the form</td>
|
|
78
|
+
<td>true</td>
|
|
79
|
+
</tr>
|
|
80
|
+
<tr>
|
|
81
|
+
<td>type</td>
|
|
82
|
+
<td>Input type (text, email, number, etc.)</td>
|
|
83
|
+
<td>'text'</td>
|
|
84
|
+
</tr>
|
|
85
|
+
</tbody>
|
|
86
|
+
</table>
|
|
87
|
+
|
|
88
|
+
<div class="example">
|
|
89
|
+
<h3>Basic Text Input</h3>
|
|
90
|
+
<p>A simple text input field</p>
|
|
91
|
+
<pre
|
|
92
|
+
class="example-html"
|
|
93
|
+
><code class="language-markup"><temba-textinput value="plain text"></temba-textinput></code></pre>
|
|
94
|
+
<temba-textinput value="plain text"></temba-textinput>
|
|
95
|
+
</div>
|
|
96
|
+
|
|
97
|
+
<div class="example">
|
|
98
|
+
<h3>Text Input with Label and Help</h3>
|
|
99
|
+
<p>A text input with label, help text, and placeholder</p>
|
|
100
|
+
<pre
|
|
101
|
+
class="example-html"
|
|
102
|
+
><code class="language-markup"><temba-textinput
|
|
103
|
+
name="start"
|
|
104
|
+
label="Start Time"
|
|
105
|
+
help_text="This is something you should think long and hard about"
|
|
106
|
+
placeholder="Put something down, for real"
|
|
107
|
+
value="2020-11-28 15:03"
|
|
108
|
+
clearable
|
|
109
|
+
datetimepicker
|
|
110
|
+
></temba-textinput></code></pre>
|
|
111
|
+
<temba-textinput
|
|
112
|
+
name="start"
|
|
113
|
+
label="Start Time"
|
|
114
|
+
help_text="This is something you should think long and hard about"
|
|
115
|
+
placeholder="Put something down, for real"
|
|
116
|
+
value="2020-11-28 15:03"
|
|
117
|
+
clearable
|
|
118
|
+
datetimepicker
|
|
119
|
+
></temba-textinput>
|
|
120
|
+
</div>
|
|
121
|
+
|
|
122
|
+
<div class="example">
|
|
123
|
+
<h3>Empty Text Input</h3>
|
|
124
|
+
<p>A text input with just a placeholder</p>
|
|
125
|
+
<pre
|
|
126
|
+
class="example-html"
|
|
127
|
+
><code class="language-markup"><temba-textinput placeholder="Enter some text here"></temba-textinput></code></pre>
|
|
128
|
+
<temba-textinput placeholder="Enter some text here"></temba-textinput>
|
|
129
|
+
</div>
|
|
130
|
+
|
|
131
|
+
<div class="example">
|
|
132
|
+
<h3>Clearable Text Input</h3>
|
|
133
|
+
<p>A text input that can be cleared</p>
|
|
134
|
+
<temba-textinput value="This can be cleared" clearable></temba-textinput>
|
|
135
|
+
</div>
|
|
136
|
+
|
|
137
|
+
<script type="module">
|
|
138
|
+
import '/out-tsc/temba-modules.js';
|
|
139
|
+
</script>
|
|
140
|
+
</body>
|
|
141
|
+
</html>
|
|
@@ -12,7 +12,7 @@
|
|
|
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
|
<script>
|
|
17
17
|
function handleOpen() {
|
|
18
18
|
const webchat = document.querySelector('temba-webchat');
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
</head>
|
|
38
38
|
<body>
|
|
39
39
|
<h1>WebChat example</h1>
|
|
40
|
-
<p><a href="
|
|
40
|
+
<p><a href="/demo/index.html">← Back to main demo</a></p>
|
|
41
41
|
|
|
42
42
|
<div style="margin: 0.5em">Channel UUID</div>
|
|
43
43
|
<div
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
<temba-webchat></temba-webchat>
|
|
66
66
|
|
|
67
67
|
<script type="module">
|
|
68
|
-
import '
|
|
68
|
+
import '/out-tsc/temba-modules.js';
|
|
69
69
|
</script>
|
|
70
70
|
</body>
|
|
71
71
|
</html>
|
package/demo/index.html
CHANGED
|
@@ -35,40 +35,40 @@
|
|
|
35
35
|
<p>
|
|
36
36
|
Text input components including completion and date/time pickers
|
|
37
37
|
</p>
|
|
38
|
-
<a href="textinput/example.html">Basic Examples</a> |
|
|
39
|
-
<a href="textinput/completion.html">Completion</a>
|
|
38
|
+
<a href="components/textinput/example.html">Basic Examples</a> |
|
|
39
|
+
<a href="components/textinput/completion.html">Completion</a>
|
|
40
40
|
</div>
|
|
41
41
|
|
|
42
42
|
<div class="component-card">
|
|
43
43
|
<h3>Select</h3>
|
|
44
44
|
<p>Dropdown selection components with various configurations</p>
|
|
45
|
-
<a href="select/example.html">Basic Examples</a> |
|
|
46
|
-
<a href="select/drag-and-drop.html">Drag & Drop</a> |
|
|
47
|
-
<a href="select/multi.html">Multi-Select</a>
|
|
45
|
+
<a href="components/select/example.html">Basic Examples</a> |
|
|
46
|
+
<a href="components/select/drag-and-drop.html">Drag & Drop</a> |
|
|
47
|
+
<a href="components/select/multi.html">Multi-Select</a>
|
|
48
48
|
</div>
|
|
49
49
|
|
|
50
50
|
<div class="component-card">
|
|
51
51
|
<h3>Checkbox</h3>
|
|
52
52
|
<p>Checkbox components with labels and help text</p>
|
|
53
|
-
<a href="checkbox/example.html">Examples</a>
|
|
53
|
+
<a href="components/checkbox/example.html">Examples</a>
|
|
54
54
|
</div>
|
|
55
55
|
|
|
56
56
|
<div class="component-card">
|
|
57
57
|
<h3>Date Picker</h3>
|
|
58
58
|
<p>Date and time selection components</p>
|
|
59
|
-
<a href="datepicker/example.html">Examples</a>
|
|
59
|
+
<a href="components/datepicker/example.html">Examples</a>
|
|
60
60
|
</div>
|
|
61
61
|
|
|
62
62
|
<div class="component-card">
|
|
63
63
|
<h3>Slider</h3>
|
|
64
64
|
<p>Range slider components</p>
|
|
65
|
-
<a href="slider/example.html">Examples</a>
|
|
65
|
+
<a href="components/slider/example.html">Examples</a>
|
|
66
66
|
</div>
|
|
67
67
|
|
|
68
68
|
<div class="component-card">
|
|
69
69
|
<h3>Compose</h3>
|
|
70
70
|
<p>Text composition components with rich editing features</p>
|
|
71
|
-
<a href="compose/example.html">Examples</a>
|
|
71
|
+
<a href="components/compose/example.html">Examples</a>
|
|
72
72
|
</div>
|
|
73
73
|
|
|
74
74
|
<div class="component-card">
|
|
@@ -87,31 +87,31 @@
|
|
|
87
87
|
<div class="component-card">
|
|
88
88
|
<h3>Button</h3>
|
|
89
89
|
<p>Interactive button components with various styles</p>
|
|
90
|
-
<a href="button/example.html">Examples</a>
|
|
90
|
+
<a href="components/button/example.html">Examples</a>
|
|
91
91
|
</div>
|
|
92
92
|
|
|
93
93
|
<div class="component-card">
|
|
94
94
|
<h3>Dialog</h3>
|
|
95
95
|
<p>Modal dialog components for user interactions</p>
|
|
96
|
-
<a href="dialog/example.html">Examples</a>
|
|
96
|
+
<a href="components/dialog/example.html">Examples</a>
|
|
97
97
|
</div>
|
|
98
98
|
|
|
99
99
|
<div class="component-card">
|
|
100
100
|
<h3>Dropdown</h3>
|
|
101
101
|
<p>Generic dropdown menu components</p>
|
|
102
|
-
<a href="dropdown/example.html">Examples</a>
|
|
102
|
+
<a href="components/dropdown/example.html">Examples</a>
|
|
103
103
|
</div>
|
|
104
104
|
|
|
105
105
|
<div class="component-card">
|
|
106
106
|
<h3>Tabs</h3>
|
|
107
107
|
<p>Tab navigation components with collapsible support</p>
|
|
108
|
-
<a href="tabs/example.html">Examples</a>
|
|
108
|
+
<a href="components/tabs/example.html">Examples</a>
|
|
109
109
|
</div>
|
|
110
110
|
|
|
111
111
|
<div class="component-card">
|
|
112
112
|
<h3>Sortable List</h3>
|
|
113
113
|
<p>Drag-and-drop sortable list components</p>
|
|
114
|
-
<a href="sortable-list/example.html">Examples</a>
|
|
114
|
+
<a href="components/sortable-list/example.html">Examples</a>
|
|
115
115
|
</div>
|
|
116
116
|
</div>
|
|
117
117
|
|
|
@@ -122,13 +122,13 @@
|
|
|
122
122
|
<div class="component-card">
|
|
123
123
|
<h3>Alert</h3>
|
|
124
124
|
<p>Alert and notification components with different levels</p>
|
|
125
|
-
<a href="alert/example.html">Examples</a>
|
|
125
|
+
<a href="components/alert/example.html">Examples</a>
|
|
126
126
|
</div>
|
|
127
127
|
|
|
128
128
|
<div class="component-card">
|
|
129
129
|
<h3>Progress</h3>
|
|
130
130
|
<p>Progress bar components</p>
|
|
131
|
-
<a href="progress/example.html">Examples</a>
|
|
131
|
+
<a href="components/progress/example.html">Examples</a>
|
|
132
132
|
</div>
|
|
133
133
|
</div>
|
|
134
134
|
|
|
@@ -139,7 +139,7 @@
|
|
|
139
139
|
<div class="component-card">
|
|
140
140
|
<h3>Chart</h3>
|
|
141
141
|
<p>Chart and data visualization components</p>
|
|
142
|
-
<a href="chart/example.html">Examples</a>
|
|
142
|
+
<a href="components/chart/example.html">Examples</a>
|
|
143
143
|
</div>
|
|
144
144
|
</div>
|
|
145
145
|
|
|
@@ -153,7 +153,7 @@
|
|
|
153
153
|
Small utility components: loading spinners, image thumbnails, and
|
|
154
154
|
tooltips
|
|
155
155
|
</p>
|
|
156
|
-
<a href="misc/example.html">Examples</a>
|
|
156
|
+
<a href="components/misc/example.html">Examples</a>
|
|
157
157
|
</div>
|
|
158
158
|
</div>
|
|
159
159
|
|
|
@@ -166,7 +166,7 @@
|
|
|
166
166
|
Small utility components: loading spinners, image thumbnails, and
|
|
167
167
|
tooltips
|
|
168
168
|
</p>
|
|
169
|
-
<a href="misc/example.html">Examples</a>
|
|
169
|
+
<a href="components/misc/example.html">Examples</a>
|
|
170
170
|
</div>
|
|
171
171
|
|
|
172
172
|
<div class="component-card">
|
|
@@ -175,13 +175,13 @@
|
|
|
175
175
|
A work in progress editor for RapidPro flows to replace existing
|
|
176
176
|
react editor.
|
|
177
177
|
</p>
|
|
178
|
-
<a href="flow/example.html">Example</a>
|
|
178
|
+
<a href="components/flow/example.html">Example</a>
|
|
179
179
|
</div>
|
|
180
180
|
|
|
181
181
|
<div class="component-card">
|
|
182
182
|
<h3>Web Chat</h3>
|
|
183
183
|
<p>A work in progress web chat client for RapidPro</p>
|
|
184
|
-
<a href="webchat/example.html">Example</a>
|
|
184
|
+
<a href="components/webchat/example.html">Example</a>
|
|
185
185
|
</div>
|
|
186
186
|
</div>
|
|
187
187
|
</div>
|
|
@@ -0,0 +1,253 @@
|
|
|
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: var(--curvature);
|
|
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
|
+
}
|
|
184
|
+
|
|
185
|
+
/* Documentation section styles */
|
|
186
|
+
.doc-section {
|
|
187
|
+
margin: 2em 0 1em 0;
|
|
188
|
+
padding: 1em;
|
|
189
|
+
background: #fff;
|
|
190
|
+
border: 1px solid #e0e0e0;
|
|
191
|
+
border-radius: 6px;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.doc-section h2 {
|
|
195
|
+
margin-top: 0;
|
|
196
|
+
font-size: 1.1em;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.doc-section p {
|
|
200
|
+
font-size: 0.97em;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
/* Code examples */
|
|
204
|
+
.example-html {
|
|
205
|
+
background: #f4f4f4;
|
|
206
|
+
padding: 0.7em;
|
|
207
|
+
border-radius: 4px;
|
|
208
|
+
margin-top: 0.7em;
|
|
209
|
+
font-size: 0.97em;
|
|
210
|
+
overflow-x: auto;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
/* Output display */
|
|
214
|
+
.demo-output {
|
|
215
|
+
margin-top: 0.5em;
|
|
216
|
+
font-family: monospace;
|
|
217
|
+
background: #f7f7f7;
|
|
218
|
+
padding: 0.5em;
|
|
219
|
+
border-radius: 4px;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
/* Attribute table - enhanced */
|
|
223
|
+
.attr-table {
|
|
224
|
+
width: 100%;
|
|
225
|
+
border-collapse: collapse;
|
|
226
|
+
background: #fff;
|
|
227
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
228
|
+
margin-top: 3em;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.attr-table th {
|
|
232
|
+
text-align: left;
|
|
233
|
+
padding: 8px;
|
|
234
|
+
border: 1px solid #ddd;
|
|
235
|
+
background-color: #f2f2f2;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.attr-table td {
|
|
239
|
+
padding: 8px;
|
|
240
|
+
border: 1px solid #ddd;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.attr-table td:first-child {
|
|
244
|
+
background: #edfdff;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
/* Code highlighting improvements */
|
|
248
|
+
pre.language-javascript, pre.language-markup {
|
|
249
|
+
padding: 1em !important;
|
|
250
|
+
border-radius: var(--curvature);
|
|
251
|
+
background: #edfdff7e !important;
|
|
252
|
+
border: 1px solid #ddd !important;
|
|
253
|
+
}
|