@nyaruka/temba-components 0.61.0 → 0.62.0
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/.devcontainer/devcontainer.json +0 -1
- package/CHANGELOG.md +14 -0
- package/demo/index.html +262 -316
- package/dist/{aa86c096.js → 5ca3af22.js} +32 -14
- package/dist/index.js +32 -14
- package/dist/static/svg/index.svg +1 -1
- package/dist/sw.js +1 -1
- package/dist/sw.js.map +1 -1
- package/dist/templates/components-body.html +1 -1
- package/dist/templates/components-head.html +1 -1
- package/out-tsc/src/completion/Completion.js +5 -0
- package/out-tsc/src/completion/Completion.js.map +1 -1
- package/out-tsc/src/compose/Compose.js +111 -47
- package/out-tsc/src/compose/Compose.js.map +1 -1
- package/out-tsc/src/interfaces.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/textinput/TextInput.js +2 -0
- package/out-tsc/src/textinput/TextInput.js.map +1 -1
- package/out-tsc/src/vectoricon/index.js +3 -1
- package/out-tsc/src/vectoricon/index.js.map +1 -1
- package/out-tsc/test/temba-compose.test.js +7 -5
- package/out-tsc/test/temba-compose.test.js.map +1 -1
- package/package.json +1 -1
- package/screenshots/truth/contacts/compose-attachments-no-text-failure.png +0 -0
- package/screenshots/truth/contacts/compose-text-and-attachments-failure-attachments.png +0 -0
- package/screenshots/truth/contacts/compose-text-and-attachments-failure-text-and-attachments.png +0 -0
- package/src/completion/Completion.ts +4 -0
- package/src/compose/Compose.ts +124 -51
- package/src/interfaces.ts +5 -0
- package/src/select/Select.ts +1 -1
- package/src/textinput/TextInput.ts +2 -0
- package/src/vectoricon/index.ts +3 -1
- package/static/svg/index.svg +1 -1
- package/static/svg/work/traced/users-check.svg +1 -0
- package/static/svg/work/traced/users-x.svg +1 -0
- package/static/svg/work/used/users-check.svg +3 -0
- package/static/svg/work/used/users-x.svg +3 -0
- package/test/temba-compose.test.ts +7 -5
package/CHANGELOG.md
CHANGED
|
@@ -4,8 +4,22 @@ All notable changes to this project will be documented in this file. Dates are d
|
|
|
4
4
|
|
|
5
5
|
Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
|
|
6
6
|
|
|
7
|
+
#### [v0.62.0](https://github.com/nyaruka/temba-components/compare/v0.61.1...v0.62.0)
|
|
8
|
+
|
|
9
|
+
- Localized compose [`#373`](https://github.com/nyaruka/temba-components/pull/373)
|
|
10
|
+
- Add localization to compose [`26ea436`](https://github.com/nyaruka/temba-components/commit/26ea436e117a601d19fcb7161630287073db8727)
|
|
11
|
+
- Update compose tests [`5ae09aa`](https://github.com/nyaruka/temba-components/commit/5ae09aa8423d38b661975ecd8bdf4fab07774471)
|
|
12
|
+
|
|
13
|
+
#### [v0.61.1](https://github.com/nyaruka/temba-components/compare/v0.61.0...v0.61.1)
|
|
14
|
+
|
|
15
|
+
> 10 October 2023
|
|
16
|
+
|
|
17
|
+
- Add icons for group inclusion and exclusion [`#372`](https://github.com/nyaruka/temba-components/pull/372)
|
|
18
|
+
|
|
7
19
|
#### [v0.61.0](https://github.com/nyaruka/temba-components/compare/v0.60.1...v0.61.0)
|
|
8
20
|
|
|
21
|
+
> 5 October 2023
|
|
22
|
+
|
|
9
23
|
- Update icons [`#371`](https://github.com/nyaruka/temba-components/pull/371)
|
|
10
24
|
- More icons [`2524f69`](https://github.com/nyaruka/temba-components/commit/2524f69dddea91a20c6e7098ca7b3a2e8ee634d3)
|
|
11
25
|
- Update icon alignment [`307065b`](https://github.com/nyaruka/temba-components/commit/307065b89c8973a57dcc934f11842c30bf34d9cb)
|
package/demo/index.html
CHANGED
|
@@ -1,357 +1,303 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en-GB">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8" />
|
|
5
|
-
<link
|
|
6
|
-
href="/sitestatic/css/temba-components.css"
|
|
7
|
-
rel="stylesheet"
|
|
8
|
-
type="text/css"
|
|
9
|
-
/>
|
|
10
|
-
|
|
11
|
-
<link
|
|
12
|
-
href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
|
|
13
|
-
rel="stylesheet"
|
|
14
|
-
/>
|
|
15
|
-
|
|
16
|
-
<style>
|
|
17
|
-
|
|
18
|
-
.linked {
|
|
19
|
-
text-decoration: underline;
|
|
20
|
-
color: blue;
|
|
21
|
-
cursor: pointer;
|
|
22
|
-
}
|
|
23
3
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8" />
|
|
6
|
+
<link href="/sitestatic/css/temba-components.css" rel="stylesheet" type="text/css" />
|
|
7
|
+
|
|
8
|
+
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500" rel="stylesheet" />
|
|
9
|
+
|
|
10
|
+
<style>
|
|
11
|
+
.linked {
|
|
12
|
+
text-decoration: underline;
|
|
13
|
+
color: blue;
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.example {
|
|
18
|
+
border: 0px solid gray;
|
|
19
|
+
padding: 10px;
|
|
20
|
+
max-width: 500px;
|
|
21
|
+
--temba-select-selected-font-size: 1em;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
temba-dropdown.open {
|
|
25
|
+
--icon-background: rgb(241, 241, 241);
|
|
26
|
+
--icon-circle-size: 0.35em;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.more {
|
|
30
|
+
background: rgba(0, 0, 0, .1);
|
|
31
|
+
padding: 0.5em
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.open .more,
|
|
35
|
+
.more:hover {
|
|
36
|
+
background: rgba(0, 0, 0, .3);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
body {
|
|
40
|
+
background: #f3f3f3;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
temba-tabs {
|
|
44
|
+
margin: 2em;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
temba-tabs *,
|
|
48
|
+
temba-tab * {
|
|
49
|
+
opacity: 0;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
temba-tabs:defined *,
|
|
53
|
+
temba-tab:defined * {
|
|
54
|
+
opacity: 1;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
temba-tab {
|
|
58
|
+
padding: 1em;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.dropdown {
|
|
62
|
+
padding: 2em;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.dropdown .title {
|
|
66
|
+
font-weight: 400;
|
|
67
|
+
margin-bottom: 0.5em;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.dropdown .item {
|
|
71
|
+
padding: 0.5em;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.header {
|
|
75
|
+
margin-bottom: 1em;
|
|
76
|
+
font-size: 2em;
|
|
77
|
+
font-weight: 400;
|
|
78
|
+
color: #777;
|
|
79
|
+
display: inline;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
temba-dropdown {
|
|
83
|
+
position: relative;
|
|
84
|
+
display: inline-block;
|
|
85
|
+
margin: 0em 0.5em;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
temba-slider {
|
|
89
|
+
margin-top: 1em;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
temba-datepicker,
|
|
93
|
+
temba-select,
|
|
94
|
+
temba-textinput,
|
|
95
|
+
temba-completion {
|
|
96
|
+
margin: 0.5em;
|
|
97
|
+
flex-grow: 1;
|
|
98
|
+
}
|
|
99
|
+
</style>
|
|
100
|
+
<script type="module">
|
|
101
|
+
import '../out-tsc/temba-modules.js';
|
|
102
|
+
</script>
|
|
103
|
+
<script>
|
|
104
|
+
|
|
105
|
+
function handleDateChange(event) {
|
|
106
|
+
console.log("Changed!", event.target.value);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
// var static_url = '/static/';
|
|
110
|
+
function handleColorChange(event) {
|
|
111
|
+
var color = event.target.values[0].name;
|
|
112
|
+
if (color == 'Green') {
|
|
113
|
+
event.target.infoText = 'Green is super dangerous!';
|
|
114
|
+
} else {
|
|
115
|
+
event.target.infoText = null;
|
|
29
116
|
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
function storeTest() {
|
|
120
|
+
var store = document.querySelector("temba-store");
|
|
121
|
+
store.getResults("http://localhost.textit.in:8888/api/v2/fields.json", { force: true }).then(function (response) {
|
|
122
|
+
console.log(response);
|
|
123
|
+
})
|
|
124
|
+
}
|
|
125
|
+
</script>
|
|
126
|
+
</head>
|
|
127
|
+
|
|
128
|
+
<body>
|
|
129
|
+
<temba-store completion="/static/api/completion.json" functions="/static/api/functions.json"
|
|
130
|
+
fields="/static/api/fields.json" globals="/static/api/globals.json" groups="/static/api/groups.json"></temba-store>
|
|
131
|
+
|
|
132
|
+
<temba-dropdown>
|
|
133
|
+
<div style="display:inline-block; margin-bottom:1em;" slot="toggle">
|
|
134
|
+
<temba-icon name="menu" size="1.3" clickable></temba-icon>
|
|
135
|
+
</div>
|
|
136
|
+
<div slot="dropdown" class="dropdown" style="width:250px; padding:0.5em 1em;">
|
|
137
|
+
<div class="item">
|
|
138
|
+
<div class="title">Check this out!</div>
|
|
139
|
+
<div class="details">temba-dropdown lets you do little popup menus like this.</div>
|
|
140
|
+
</div>
|
|
141
|
+
</div>
|
|
142
|
+
</temba-dropdown>
|
|
30
143
|
|
|
31
|
-
|
|
32
|
-
--icon-background: rgb(241,241,241);
|
|
33
|
-
--icon-circle-size: 0.35em;
|
|
34
|
-
}
|
|
144
|
+
<div class="header">temba-components</div>
|
|
35
145
|
|
|
36
|
-
|
|
37
|
-
background: rgba(0,0,0,.1);
|
|
38
|
-
padding: 0.5em
|
|
39
|
-
}
|
|
146
|
+
<temba-tabs collapses>
|
|
40
147
|
|
|
41
|
-
|
|
42
|
-
background: rgba(0,0,0,.3);
|
|
43
|
-
}
|
|
148
|
+
<temba-tab name="Color Picker" icon="colors">
|
|
44
149
|
|
|
45
|
-
body {
|
|
46
|
-
background: #f3f3f3;
|
|
47
|
-
}
|
|
48
|
-
temba-tabs {
|
|
49
|
-
margin: 2em;
|
|
50
|
-
}
|
|
51
150
|
|
|
52
|
-
temba-
|
|
53
|
-
|
|
54
|
-
}
|
|
151
|
+
<temba-compose chatbox attachments counter
|
|
152
|
+
languages="[{"name":"English", "iso":"eng"}, {"name":"Spanish", "iso":"esp"}]"></temba-compose>
|
|
55
153
|
|
|
56
|
-
temba-tabs:defined *, temba-tab:defined * {
|
|
57
|
-
opacity: 1;
|
|
58
|
-
}
|
|
59
154
|
|
|
60
|
-
temba-tab {
|
|
61
|
-
padding: 1em;
|
|
62
|
-
}
|
|
63
155
|
|
|
64
|
-
|
|
65
|
-
padding: 2em;
|
|
66
|
-
}
|
|
156
|
+
</temba-tab>
|
|
67
157
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
.header {
|
|
78
|
-
margin-bottom:1em;
|
|
79
|
-
font-size: 2em;
|
|
80
|
-
font-weight: 400;
|
|
81
|
-
color: #777;
|
|
82
|
-
display: inline;
|
|
83
|
-
}
|
|
158
|
+
<temba-tab name="Overview" icon="default">
|
|
159
|
+
<div style="display:flex;flex-wrap: wrap;">
|
|
160
|
+
<temba-checkbox label="Check this out" checked></temba-checkbox>
|
|
161
|
+
<temba-select placeholder="Select a color" clearable>
|
|
162
|
+
<temba-option name="Red" value="0"></temba-option>
|
|
163
|
+
<temba-option name="Green" value="1"></temba-option>
|
|
164
|
+
<temba-option name="Blue" value="2"></temba-option>
|
|
165
|
+
</temba-select>
|
|
84
166
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
display:inline-block;
|
|
88
|
-
margin:0em 0.5em;
|
|
89
|
-
}
|
|
167
|
+
<temba-datepicker time value="2022-10-02 01:00:00+00:00" timezone="Africa/Lagos"
|
|
168
|
+
onChange="handleDateChange(event)"></temba-datepicker>
|
|
90
169
|
|
|
91
|
-
temba-slider{
|
|
92
|
-
margin-top: 1em;
|
|
93
|
-
}
|
|
94
170
|
|
|
95
|
-
|
|
96
|
-
margin: 0.5em;
|
|
97
|
-
flex-grow: 1;
|
|
98
|
-
}
|
|
171
|
+
</div>
|
|
99
172
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
</
|
|
104
|
-
|
|
173
|
+
<temba-slider style="margin-bottom: 1em" value="50" min="0" max="100" range></temba-slider>
|
|
174
|
+
<temba-textinput value="plain text"></temba-textinput>
|
|
175
|
+
<temba-completion value="you complete me @cont"></temba-completion>
|
|
176
|
+
</temba-tab>
|
|
177
|
+
|
|
178
|
+
<temba-tab name="datepicker" icon="datepicker">
|
|
179
|
+
<div style="display:flex;flex-wrap: wrap;">
|
|
180
|
+
<temba-datepicker time value="2020-01-20T14:00+00:00" timezone="UTC"
|
|
181
|
+
onChange="handleDateChange(event)"></temba-datepicker>
|
|
182
|
+
<temba-datepicker value="2022-10-09" onChange="handleDateChange(event)"></temba-datepicker>
|
|
183
|
+
<temba-datepicker time timezone="" value="2022-09-29T20:20:00.000000Z"></temba-datepicker>
|
|
184
|
+
<temba-datepicker time onChange="handleDateChange(event)"></temba-datepicker>
|
|
185
|
+
<temba-datepicker time value="2022-10-03 01:00:00+00:00" onChange="handleDateChange(event)"></temba-datepicker>
|
|
186
|
+
<temba-datepicker time value="2022-10-04 01:00:00+00:00" timezone="Africa/Nairobi"
|
|
187
|
+
onChange="handleDateChange(event)"></temba-datepicker>
|
|
188
|
+
<temba-datepicker time value="2022-10-05 01:00:00+00:00" timezone="Africa/Lagos"
|
|
189
|
+
onChange="handleDateChange(event)"></temba-datepicker>
|
|
190
|
+
<temba-datepicker time value="2022-10-06 01:00:00+00:00" timezone="America/Phoenix"
|
|
191
|
+
onChange="handleDateChange(event)"></temba-datepicker>
|
|
192
|
+
<temba-datepicker time value="2022-10-07 01:00:00+00:00" timezone="America/Phoenix"
|
|
193
|
+
onChange="handleDateChange(event)"></temba-datepicker>
|
|
105
194
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
}
|
|
195
|
+
</div>
|
|
196
|
+
<div style="display:flex;margin-top:0.5em">
|
|
109
197
|
|
|
110
|
-
// var static_url = '/static/';
|
|
111
|
-
function handleColorChange(event) {
|
|
112
|
-
var color = event.target.values[0].name;
|
|
113
|
-
if (color == 'Green') {
|
|
114
|
-
event.target.infoText = 'Green is super dangerous!';
|
|
115
|
-
} else {
|
|
116
|
-
event.target.infoText = null;
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
198
|
|
|
120
|
-
function storeTest() {
|
|
121
|
-
var store = document.querySelector("temba-store");
|
|
122
|
-
store.getResults("http://localhost.textit.in:8888/api/v2/fields.json", { force: true }).then(function(response){
|
|
123
|
-
console.log(response);
|
|
124
|
-
})
|
|
125
|
-
}
|
|
126
|
-
</script>
|
|
127
|
-
</head>
|
|
128
|
-
<body>
|
|
129
|
-
<temba-store
|
|
130
|
-
completion="/static/api/completion.json"
|
|
131
|
-
functions="/static/api/functions.json"
|
|
132
|
-
fields="/static/api/fields.json"
|
|
133
|
-
globals="/static/api/globals.json"
|
|
134
|
-
groups="/static/api/groups.json"
|
|
135
|
-
></temba-store>
|
|
136
|
-
|
|
137
|
-
<temba-dropdown>
|
|
138
|
-
<div style="display:inline-block; margin-bottom:1em;" slot="toggle">
|
|
139
|
-
<temba-icon name="menu" size="1.3" clickable></temba-icon>
|
|
140
|
-
</div>
|
|
141
|
-
<div slot="dropdown" class="dropdown" style="width:250px; padding:0.5em 1em;">
|
|
142
|
-
<div class="item">
|
|
143
|
-
<div class="title">Check this out!</div>
|
|
144
|
-
<div class="details">temba-dropdown lets you do little popup menus like this.</div>
|
|
145
|
-
</div>
|
|
146
199
|
</div>
|
|
147
|
-
</temba-dropdown>
|
|
148
|
-
|
|
149
|
-
<div class="header">temba-components</div>
|
|
150
|
-
|
|
151
|
-
<temba-tabs collapses>
|
|
152
|
-
|
|
153
|
-
<temba-tab name="Color Picker" icon="colors">
|
|
154
|
-
<div style="display:flex;flex-wrap: wrap;">
|
|
155
|
-
<div style="width:400px">
|
|
156
|
-
<temba-color-picker
|
|
157
|
-
style="margin-bottom:1em"
|
|
158
|
-
name="primary"
|
|
159
|
-
label="Primary Color"
|
|
160
|
-
help_text="Choose a color that looks good under white text"
|
|
161
|
-
value="#2387ca"
|
|
162
|
-
>
|
|
163
|
-
</temba-color-picker>
|
|
164
|
-
|
|
165
|
-
<temba-color-picker
|
|
166
|
-
name="secondary"
|
|
167
|
-
label="Secondary Color"
|
|
168
|
-
value="#8c338c"
|
|
169
|
-
>
|
|
170
|
-
</temba-color-picker>
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
</div>
|
|
174
|
-
</div>
|
|
175
|
-
</temba-tab>
|
|
176
200
|
|
|
177
|
-
|
|
178
|
-
<div style="display:flex;flex-wrap: wrap;">
|
|
179
|
-
<temba-checkbox label="Check this out" checked></temba-checkbox>
|
|
180
|
-
<temba-select placeholder="Select a color" clearable>
|
|
181
|
-
<temba-option name="Red" value="0"></temba-option>
|
|
182
|
-
<temba-option name="Green" value="1"></temba-option>
|
|
183
|
-
<temba-option name="Blue" value="2"></temba-option>
|
|
184
|
-
</temba-select>
|
|
201
|
+
</temba-tab>
|
|
185
202
|
|
|
186
|
-
|
|
203
|
+
<temba-tab name="slider" icon="slider">
|
|
187
204
|
|
|
188
205
|
|
|
189
|
-
|
|
206
|
+
<div class="example">
|
|
207
|
+
With Range
|
|
208
|
+
<temba-slider value="50" min="0" max="100" range></temba-slider>
|
|
209
|
+
</div>
|
|
190
210
|
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
<temba-
|
|
194
|
-
</
|
|
195
|
-
|
|
196
|
-
<temba-tab name="datepicker" icon="datepicker">
|
|
197
|
-
<div style="display:flex;flex-wrap: wrap;">
|
|
198
|
-
<temba-datepicker time value="2020-01-20T14:00+00:00" timezone="UTC" onChange="handleDateChange(event)"></temba-datepicker>
|
|
199
|
-
<temba-datepicker value="2022-10-09" onChange="handleDateChange(event)"></temba-datepicker>
|
|
200
|
-
<temba-datepicker time timezone="" value="2022-09-29T20:20:00.000000Z"></temba-datepicker>
|
|
201
|
-
<temba-datepicker time onChange="handleDateChange(event)"></temba-datepicker>
|
|
202
|
-
<temba-datepicker time value="2022-10-03 01:00:00+00:00" onChange="handleDateChange(event)"></temba-datepicker>
|
|
203
|
-
<temba-datepicker time value="2022-10-04 01:00:00+00:00" timezone="Africa/Nairobi" onChange="handleDateChange(event)"></temba-datepicker>
|
|
204
|
-
<temba-datepicker time value="2022-10-05 01:00:00+00:00" timezone="Africa/Lagos" onChange="handleDateChange(event)"></temba-datepicker>
|
|
205
|
-
<temba-datepicker time value="2022-10-06 01:00:00+00:00" timezone="America/Phoenix" onChange="handleDateChange(event)"></temba-datepicker>
|
|
206
|
-
<temba-datepicker time value="2022-10-07 01:00:00+00:00" timezone="America/Phoenix" onChange="handleDateChange(event)"></temba-datepicker>
|
|
207
|
-
|
|
208
|
-
</div>
|
|
209
|
-
<div style="display:flex;margin-top:0.5em">
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
</div>
|
|
211
|
+
<div class="example">
|
|
212
|
+
Without Range
|
|
213
|
+
<temba-slider value="50" min="0" max="100"></temba-slider>
|
|
214
|
+
</div>
|
|
213
215
|
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
<temba-tab name="slider" icon="slider">
|
|
216
|
+
</temba-tab>
|
|
217
217
|
|
|
218
|
+
<temba-tab name="select" icon="select">
|
|
218
219
|
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
220
|
+
<div class="example">
|
|
221
|
+
<temba-select placeholder="Select a color" info_text="Some colors are very dangerous, choose wisely"
|
|
222
|
+
onchange="handleColorChange(event)">
|
|
223
|
+
<temba-option name="Red" value="0"></temba-option>
|
|
224
|
+
<temba-option name="Green" value="1"></temba-option>
|
|
225
|
+
<temba-option name="Blue" value="2"></temba-option>
|
|
226
|
+
</temba-select>
|
|
227
|
+
</div>
|
|
223
228
|
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
<temba-
|
|
227
|
-
|
|
229
|
+
<div class="example">
|
|
230
|
+
<temba-select placeholder="Select a color" clearable>
|
|
231
|
+
<temba-option name="Red" value="0"></temba-option>
|
|
232
|
+
<temba-option name="Green" value="1"></temba-option>
|
|
233
|
+
<temba-option name="Blue" value="2"></temba-option>
|
|
234
|
+
</temba-select>
|
|
235
|
+
</div>
|
|
228
236
|
|
|
229
|
-
|
|
237
|
+
<div class="example">
|
|
238
|
+
<temba-select placeholder="Select a color" expressions="message" values='[{"name":"Red","value":"0"}]'
|
|
239
|
+
searchable multi>
|
|
240
|
+
<temba-option name="Red" value="0"></temba-option>
|
|
241
|
+
<temba-option name="Green" value="1"></temba-option>
|
|
242
|
+
<temba-option name="Blue" value="2"></temba-option>
|
|
243
|
+
</temba-select>
|
|
244
|
+
</div>
|
|
230
245
|
|
|
231
|
-
<
|
|
246
|
+
<div class="example">
|
|
247
|
+
<temba-select name="Color" label="Color" help_text="I'm not really enabled at the moment"
|
|
248
|
+
placeholder="Select a color" expressions="message" values='[{"name":"Red","value":"0"}]' searchable multi
|
|
249
|
+
disabled>
|
|
250
|
+
<temba-option name="Red" value="0"></temba-option>
|
|
251
|
+
<temba-option name="Green" value="1"></temba-option>
|
|
252
|
+
<temba-option name="Blue" value="2"></temba-option>
|
|
253
|
+
</temba-select>
|
|
254
|
+
</div>
|
|
232
255
|
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
</div>
|
|
244
|
-
|
|
245
|
-
<div class="example">
|
|
246
|
-
<temba-select placeholder="Select a color" clearable>
|
|
247
|
-
<temba-option name="Red" value="0"></temba-option>
|
|
248
|
-
<temba-option name="Green" value="1"></temba-option>
|
|
249
|
-
<temba-option name="Blue" value="2"></temba-option>
|
|
250
|
-
</temba-select>
|
|
251
|
-
</div>
|
|
252
|
-
|
|
253
|
-
<div class="example">
|
|
254
|
-
<temba-select
|
|
255
|
-
placeholder="Select a color"
|
|
256
|
-
expressions="message"
|
|
257
|
-
values='[{"name":"Red","value":"0"}]'
|
|
258
|
-
searchable
|
|
259
|
-
multi
|
|
260
|
-
>
|
|
261
|
-
<temba-option name="Red" value="0"></temba-option>
|
|
262
|
-
<temba-option name="Green" value="1"></temba-option>
|
|
263
|
-
<temba-option name="Blue" value="2"></temba-option>
|
|
264
|
-
</temba-select>
|
|
265
|
-
</div>
|
|
266
|
-
|
|
267
|
-
<div class="example">
|
|
268
|
-
<temba-select
|
|
269
|
-
name="Color"
|
|
270
|
-
label="Color"
|
|
271
|
-
help_text="I'm not really enabled at the moment"
|
|
272
|
-
placeholder="Select a color"
|
|
273
|
-
expressions="message"
|
|
274
|
-
values='[{"name":"Red","value":"0"}]'
|
|
275
|
-
searchable
|
|
276
|
-
multi
|
|
277
|
-
disabled
|
|
278
|
-
>
|
|
256
|
+
<div class="example">
|
|
257
|
+
<script>
|
|
258
|
+
function toggleSelect(evt) {
|
|
259
|
+
document.getElementById('select-toggle').disabled = !evt.currentTarget
|
|
260
|
+
.checked;
|
|
261
|
+
}
|
|
262
|
+
</script>
|
|
263
|
+
<div style="display: flex; align-items: center">
|
|
264
|
+
<temba-checkbox onchange="toggleSelect(event)" checked></temba-checkbox>
|
|
265
|
+
<temba-select style="margin-left: 10px" id="select-toggle" placeholder="Select a color" expressions="message">
|
|
279
266
|
<temba-option name="Red" value="0"></temba-option>
|
|
280
267
|
<temba-option name="Green" value="1"></temba-option>
|
|
281
268
|
<temba-option name="Blue" value="2"></temba-option>
|
|
282
269
|
</temba-select>
|
|
283
270
|
</div>
|
|
284
|
-
|
|
285
|
-
<div class="example">
|
|
286
|
-
<script>
|
|
287
|
-
function toggleSelect(evt) {
|
|
288
|
-
document.getElementById('select-toggle').disabled = !evt.currentTarget
|
|
289
|
-
.checked;
|
|
290
|
-
}
|
|
291
|
-
</script>
|
|
292
|
-
<div style="display: flex; align-items: center">
|
|
293
|
-
<temba-checkbox onchange="toggleSelect(event)" checked></temba-checkbox>
|
|
294
|
-
<temba-select
|
|
295
|
-
style="margin-left: 10px"
|
|
296
|
-
id="select-toggle"
|
|
297
|
-
placeholder="Select a color"
|
|
298
|
-
expressions="message"
|
|
299
|
-
>
|
|
300
|
-
<temba-option name="Red" value="0"></temba-option>
|
|
301
|
-
<temba-option name="Green" value="1"></temba-option>
|
|
302
|
-
<temba-option name="Blue" value="2"></temba-option>
|
|
303
|
-
</temba-select>
|
|
304
|
-
</div>
|
|
305
|
-
</div>
|
|
306
|
-
|
|
307
|
-
</temba-tab>
|
|
271
|
+
</div>
|
|
308
272
|
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
<div class="example">
|
|
312
|
-
<temba-textinput value="plain text"></temba-textinput>
|
|
313
|
-
</div>
|
|
314
|
-
|
|
315
|
-
<div class="example">
|
|
316
|
-
<temba-completion value="you complete me @cont"></temba-completion>
|
|
317
|
-
</div>
|
|
318
|
-
|
|
319
|
-
<div class="example">
|
|
320
|
-
<temba-textinput
|
|
321
|
-
name="start"
|
|
322
|
-
label="Start Time"
|
|
323
|
-
help_text="This is something you should think long and hard about"
|
|
324
|
-
placeholder="Put something down, for real"
|
|
325
|
-
value="2020-11-28 15:03"
|
|
326
|
-
clearable
|
|
327
|
-
datetimepicker
|
|
328
|
-
></temba-textinput>
|
|
329
|
-
</div>
|
|
273
|
+
</temba-tab>
|
|
330
274
|
|
|
331
|
-
|
|
332
|
-
<temba-completion counter="temba-charcount" value="This is a GSM charcounter in a textarea" gsm textarea></temba-completion>
|
|
333
|
-
<temba-charcount text='count this text'></temba-charcount>
|
|
334
|
-
</div>
|
|
335
|
-
</temba-tab>
|
|
275
|
+
<temba-tab name="textinput" icon="edit-05">
|
|
336
276
|
|
|
337
|
-
<
|
|
338
|
-
<
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
277
|
+
<div class="example">
|
|
278
|
+
<temba-textinput value="plain text"></temba-textinput>
|
|
279
|
+
</div>
|
|
280
|
+
|
|
281
|
+
<div class="example">
|
|
282
|
+
<temba-completion value="you complete me @cont"></temba-completion>
|
|
283
|
+
</div>
|
|
284
|
+
|
|
285
|
+
<div class="example">
|
|
286
|
+
<temba-textinput name="start" label="Start Time"
|
|
287
|
+
help_text="This is something you should think long and hard about" placeholder="Put something down, for real"
|
|
288
|
+
value="2020-11-28 15:03" clearable datetimepicker></temba-textinput>
|
|
289
|
+
</div>
|
|
290
|
+
|
|
291
|
+
<div class="example">
|
|
292
|
+
<temba-completion counter="temba-charcount" value="This is a GSM charcounter in a textarea" gsm
|
|
293
|
+
textarea></temba-completion>
|
|
294
|
+
<temba-charcount text='count this text'></temba-charcount>
|
|
295
|
+
</div>
|
|
296
|
+
</temba-tab>
|
|
297
|
+
|
|
298
|
+
|
|
299
|
+
|
|
300
|
+
</temba-tabs>
|
|
301
|
+
</body>
|
|
302
|
+
|
|
303
|
+
</html>
|