@nyaruka/temba-components 0.24.0 → 0.25.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.
Files changed (47) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/demo/index.html +136 -97
  3. package/dist/56e0e480.js +356 -0
  4. package/dist/index.js +1 -1
  5. package/dist/sw.js +1 -1
  6. package/dist/sw.js.map +1 -1
  7. package/dist/templates/components-body.html +1 -1
  8. package/dist/templates/components-head.html +1 -1
  9. package/out-tsc/src/contactsearch/ContactSearch.js +38 -39
  10. package/out-tsc/src/contactsearch/ContactSearch.js.map +1 -1
  11. package/out-tsc/src/dialog/Dialog.js +1 -1
  12. package/out-tsc/src/dialog/Dialog.js.map +1 -1
  13. package/out-tsc/src/options/Options.js +41 -7
  14. package/out-tsc/src/options/Options.js.map +1 -1
  15. package/out-tsc/src/select/Select.js +79 -34
  16. package/out-tsc/src/select/Select.js.map +1 -1
  17. package/out-tsc/test/temba-select.test.js +2 -1
  18. package/out-tsc/test/temba-select.test.js.map +1 -1
  19. package/package.json +1 -1
  20. package/screenshots/truth/select/disabled-multi-selection.png +0 -0
  21. package/screenshots/truth/select/disabled-selection.png +0 -0
  22. package/screenshots/truth/select/disabled.png +0 -0
  23. package/screenshots/truth/select/embedded.png +0 -0
  24. package/screenshots/truth/select/expression-selected.png +0 -0
  25. package/screenshots/truth/select/expressions.png +0 -0
  26. package/screenshots/truth/select/functions.png +0 -0
  27. package/screenshots/truth/select/local-options.png +0 -0
  28. package/screenshots/truth/select/remote-options.png +0 -0
  29. package/screenshots/truth/select/search-enabled.png +0 -0
  30. package/screenshots/truth/select/search-multi-no-matches.png +0 -0
  31. package/screenshots/truth/select/search-selected-focus.png +0 -0
  32. package/screenshots/truth/select/search-selected.png +0 -0
  33. package/screenshots/truth/select/search-with-selected.png +0 -0
  34. package/screenshots/truth/select/searching.png +0 -0
  35. package/screenshots/truth/select/selected-multi.png +0 -0
  36. package/screenshots/truth/select/selected-single.png +0 -0
  37. package/screenshots/truth/select/selection-clearable.png +0 -0
  38. package/screenshots/truth/select/with-placeholder.png +0 -0
  39. package/screenshots/truth/select/without-placeholder.png +0 -0
  40. package/src/contactsearch/ContactSearch.ts +51 -52
  41. package/src/dialog/Dialog.ts +1 -1
  42. package/src/options/Options.ts +46 -11
  43. package/src/select/Select.ts +82 -36
  44. package/static/css/temba-components.css +1 -2
  45. package/test/temba-select.test.ts +3 -1
  46. package/test-assets/style.css +1 -1
  47. package/dist/ef1b57e2.js +0 -356
package/CHANGELOG.md CHANGED
@@ -4,6 +4,33 @@ 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.25.2](https://github.com/nyaruka/temba-components/compare/v0.25.1...v0.25.2)
8
+
9
+ > 5 February 2022
10
+
11
+ - Capture mouse down on option scroll [`2767d53`](https://github.com/nyaruka/temba-components/commit/2767d534267d810cd6cc1ed4ab7b1268c1eb2c47)
12
+
13
+ #### [v0.25.1](https://github.com/nyaruka/temba-components/compare/v0.25.0...v0.25.1)
14
+
15
+ > 4 February 2022
16
+
17
+ - Hold focus on options until mouse up [`#151`](https://github.com/nyaruka/temba-components/pull/151)
18
+ - Select format [`#150`](https://github.com/nyaruka/temba-components/pull/150)
19
+ - Pixel pushing on the select widget [`fb57486`](https://github.com/nyaruka/temba-components/commit/fb57486cc65e682809968815420fd717bd1489bc)
20
+ - Update screenshots [`c2b4223`](https://github.com/nyaruka/temba-components/commit/c2b4223d286531797315309323f2f67a7858751b)
21
+
22
+ #### [v0.25.0](https://github.com/nyaruka/temba-components/compare/v0.24.1...v0.25.0)
23
+
24
+ > 26 January 2022
25
+
26
+ - Add info text to select widget, animate open and close [`#148`](https://github.com/nyaruka/temba-components/pull/148)
27
+
28
+ #### [v0.24.1](https://github.com/nyaruka/temba-components/compare/v0.24.0...v0.24.1)
29
+
30
+ > 15 January 2022
31
+
32
+ - Remove spurious div [`4897f25`](https://github.com/nyaruka/temba-components/commit/4897f258fa5bdb3f2974afbb12dee1b38156aeaa)
33
+
7
34
  #### [v0.24.0](https://github.com/nyaruka/temba-components/compare/v0.23.0...v0.24.0)
8
35
 
9
36
  > 14 January 2022
package/demo/index.html CHANGED
@@ -1,117 +1,156 @@
1
- <!doctype html>
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
- />
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
10
 
11
- <link
12
- href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
13
- rel="stylesheet"
14
- />
11
+ <link
12
+ href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
13
+ rel="stylesheet"
14
+ />
15
15
 
16
- <style>
17
- .example {
18
- border: 0px solid gray;
19
- padding: 10px;
20
- max-width: 500px;
21
- }
16
+ <style>
17
+ .example {
18
+ border: 0px solid gray;
19
+ padding: 10px;
20
+ max-width: 500px;
22
21
 
23
- </style>
24
- <script type="module">
25
- import '../out-tsc/temba-modules.js';
26
- </script>
27
-
28
- </head>
29
- <body>
30
- <temba-store
22
+ --temba-select-selected-font-size: 1em;
23
+ }
24
+ </style>
25
+ <script type="module">
26
+ import '../out-tsc/temba-modules.js';
27
+ </script>
28
+ <script>
29
+ function handleColorChange(event) {
30
+ var color = event.target.values[0].name;
31
+ if (color == 'Green') {
32
+ event.target.infoText = 'Green is super dangerous!';
33
+ } else {
34
+ event.target.infoText = null;
35
+ }
36
+ }
37
+ </script>
38
+ </head>
39
+ <body>
40
+ <temba-store
31
41
  completion="/static/api/completion.json"
32
42
  functions="/static/api/functions.json"
33
43
  fields="/static/api/fields.json"
34
44
  globals="/static/api/globals.json"
35
45
  groups="/static/api/groups.json"
36
- ></temba-store>
37
-
38
- <div class="example">
39
- <temba-omnibox
40
- placeholder='Contacts or Groups'
41
- label="Recipients"
42
- help_text="This is the helpful friendly book"
43
- endpoint="/contact/omnibox/?v=2"
44
- groups
45
- contacts
46
- ></temba-omnibox>
47
- </div>
48
- <div class="example">
49
- <temba-checkbox label="you betcha" checked></temba-checkbox>
50
- </div>
51
-
52
- <div class="example">
53
- <temba-textinput value="plain text"></temba-textinput>
54
- </div>
55
-
56
- <div class="example">
57
- <temba-completion value="you complete me @cont"></temba-completion>
58
- </div>
59
-
46
+ ></temba-store>
60
47
 
48
+ <div class="example">
49
+ <temba-omnibox
50
+ placeholder="Contacts or Groups"
51
+ label="Recipients"
52
+ help_text="This is the helpful friendly book"
53
+ endpoint="/contact/omnibox/?v=2"
54
+ groups
55
+ contacts
56
+ ></temba-omnibox>
57
+ </div>
58
+ <div class="example">
59
+ <temba-checkbox label="you betcha" checked></temba-checkbox>
60
+ </div>
61
61
 
62
- <div class="example">
63
- <temba-select placeholder='Select a color' clearable>
64
- <temba-option name="Red" value="0"></temba-option>
65
- <temba-option name="Green" value="1"></temba-option>
66
- <temba-option name="Blue" value="2"></temba-option>
67
- </temba-select>
68
- </div>
62
+ <div class="example">
63
+ <temba-textinput value="plain text"></temba-textinput>
64
+ </div>
69
65
 
70
- <div class="example">
71
- <temba-select placeholder='Select a color' expressions="message" values='[{"name":"Red","value":"0"}]' searchable multi disabled>
72
- <temba-option name="Red" value="0"></temba-option>
73
- <temba-option name="Green" value="1"></temba-option>
74
- <temba-option name="Blue" value="2"></temba-option>
75
- </temba-select>
76
- </div>
66
+ <div class="example">
67
+ <temba-completion value="you complete me @cont"></temba-completion>
68
+ </div>
77
69
 
70
+ <div class="example">
71
+ <temba-select
72
+ placeholder="Select a color"
73
+ info_text="Some colors are very dangerous, choose wisely"
74
+ onchange="handleColorChange(event)"
75
+ >
76
+ <temba-option name="Red" value="0"></temba-option>
77
+ <temba-option name="Green" value="1"></temba-option>
78
+ <temba-option name="Blue" value="2"></temba-option>
79
+ </temba-select>
80
+ </div>
78
81
 
79
- <div class="example">
80
- <temba-select name="Color" label="Color" help_text="I'm not really enabled at the moment" placeholder='Select a color' expressions="message" values='[{"name":"Red","value":"0"}]' searchable multi disabled>
81
- <temba-option name="Red" value="0"></temba-option>
82
- <temba-option name="Green" value="1"></temba-option>
83
- <temba-option name="Blue" value="2"></temba-option>
84
- </temba-select>
85
- </div>
82
+ <div class="example">
83
+ <temba-select placeholder="Select a color" clearable>
84
+ <temba-option name="Red" value="0"></temba-option>
85
+ <temba-option name="Green" value="1"></temba-option>
86
+ <temba-option name="Blue" value="2"></temba-option>
87
+ </temba-select>
88
+ </div>
86
89
 
87
- <div class="example">
88
- <script>
89
- function toggleSelect(evt) {
90
- document.getElementById("select-toggle").disabled = !evt.currentTarget.checked;
91
- }
92
- </script>
93
- <div style="display:flex;align-items: center;">
94
- <temba-checkbox onchange="toggleSelect(event)" checked></temba-checkbox>
95
- <temba-select style="margin-left:10px" id="select-toggle" placeholder='Select a color' expressions="message">
96
- <temba-option name="Red" value="0"></temba-option>
97
- <temba-option name="Green" value="1"></temba-option>
98
- <temba-option name="Blue" value="2"></temba-option>
99
- </temba-select>
90
+ <div class="example">
91
+ <temba-select
92
+ placeholder="Select a color"
93
+ expressions="message"
94
+ values='[{"name":"Red","value":"0"}]'
95
+ searchable
96
+ multi
97
+ >
98
+ <temba-option name="Red" value="0"></temba-option>
99
+ <temba-option name="Green" value="1"></temba-option>
100
+ <temba-option name="Blue" value="2"></temba-option>
101
+ </temba-select>
100
102
  </div>
101
- </div>
102
103
 
103
- <div class="example">
104
- <temba-textinput
105
- name="start"
106
- label="Start Time"
107
- help_text="This is something you should think long and hard about"
108
- placeholder="Put something down, for real"
109
- value="2020-11-28 15:03"
110
- clearable
111
- datetimepicker
112
- ></temba-textinput>
113
- </div>
104
+ <div class="example">
105
+ <temba-select
106
+ name="Color"
107
+ label="Color"
108
+ help_text="I'm not really enabled at the moment"
109
+ placeholder="Select a color"
110
+ expressions="message"
111
+ values='[{"name":"Red","value":"0"}]'
112
+ searchable
113
+ multi
114
+ disabled
115
+ >
116
+ <temba-option name="Red" value="0"></temba-option>
117
+ <temba-option name="Green" value="1"></temba-option>
118
+ <temba-option name="Blue" value="2"></temba-option>
119
+ </temba-select>
120
+ </div>
114
121
 
122
+ <div class="example">
123
+ <script>
124
+ function toggleSelect(evt) {
125
+ document.getElementById('select-toggle').disabled = !evt.currentTarget
126
+ .checked;
127
+ }
128
+ </script>
129
+ <div style="display: flex; align-items: center">
130
+ <temba-checkbox onchange="toggleSelect(event)" checked></temba-checkbox>
131
+ <temba-select
132
+ style="margin-left: 10px"
133
+ id="select-toggle"
134
+ placeholder="Select a color"
135
+ expressions="message"
136
+ >
137
+ <temba-option name="Red" value="0"></temba-option>
138
+ <temba-option name="Green" value="1"></temba-option>
139
+ <temba-option name="Blue" value="2"></temba-option>
140
+ </temba-select>
141
+ </div>
142
+ </div>
115
143
 
116
- </body>
144
+ <div class="example">
145
+ <temba-textinput
146
+ name="start"
147
+ label="Start Time"
148
+ help_text="This is something you should think long and hard about"
149
+ placeholder="Put something down, for real"
150
+ value="2020-11-28 15:03"
151
+ clearable
152
+ datetimepicker
153
+ ></temba-textinput>
154
+ </div>
155
+ </body>
117
156
  </html>