@nyaruka/temba-components 0.26.0 → 0.26.3

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 (186) hide show
  1. package/.github/workflows/build.yml +1 -1
  2. package/CHANGELOG.md +28 -0
  3. package/demo/index.html +59 -1
  4. package/dist/51fa8c26.js +4292 -0
  5. package/dist/index.js +4292 -1
  6. package/dist/static/icons/symbol-defs.svg +29 -20
  7. package/dist/sw.js +1 -1
  8. package/dist/sw.js.map +1 -1
  9. package/dist/templates/components-body.html +1 -1
  10. package/dist/templates/components-head.html +1 -1
  11. package/out-tsc/src/FormElement.js +1 -1
  12. package/out-tsc/src/FormElement.js.map +1 -1
  13. package/out-tsc/src/RapidElement.js +1 -1
  14. package/out-tsc/src/RapidElement.js.map +1 -1
  15. package/out-tsc/src/alert/Alert.js +3 -3
  16. package/out-tsc/src/alert/Alert.js.map +1 -1
  17. package/out-tsc/src/aliaseditor/AliasEditor.js +2 -1
  18. package/out-tsc/src/aliaseditor/AliasEditor.js.map +1 -1
  19. package/out-tsc/src/anchor/Anchor.js +2 -1
  20. package/out-tsc/src/anchor/Anchor.js.map +1 -1
  21. package/out-tsc/src/button/Button.js +2 -1
  22. package/out-tsc/src/button/Button.js.map +1 -1
  23. package/out-tsc/src/charcount/CharCount.js +2 -1
  24. package/out-tsc/src/charcount/CharCount.js.map +1 -1
  25. package/out-tsc/src/checkbox/Checkbox.js +3 -1
  26. package/out-tsc/src/checkbox/Checkbox.js.map +1 -1
  27. package/out-tsc/src/completion/Completion.js +2 -1
  28. package/out-tsc/src/completion/Completion.js.map +1 -1
  29. package/out-tsc/src/completion/helpers.js +27 -4
  30. package/out-tsc/src/completion/helpers.js.map +1 -1
  31. package/out-tsc/src/contacts/ContactChat.js +101 -86
  32. package/out-tsc/src/contacts/ContactChat.js.map +1 -1
  33. package/out-tsc/src/contacts/ContactDetails.js +2 -1
  34. package/out-tsc/src/contacts/ContactDetails.js.map +1 -1
  35. package/out-tsc/src/contacts/ContactHistory.js +32 -37
  36. package/out-tsc/src/contacts/ContactHistory.js.map +1 -1
  37. package/out-tsc/src/contacts/events.js +62 -76
  38. package/out-tsc/src/contacts/events.js.map +1 -1
  39. package/out-tsc/src/contactsearch/ContactSearch.js +2 -1
  40. package/out-tsc/src/contactsearch/ContactSearch.js.map +1 -1
  41. package/out-tsc/src/datepicker/DatePicker.js +2 -1
  42. package/out-tsc/src/datepicker/DatePicker.js.map +1 -1
  43. package/out-tsc/src/dialog/Dialog.js +2 -2
  44. package/out-tsc/src/dialog/Dialog.js.map +1 -1
  45. package/out-tsc/src/dialog/Modax.js +3 -6
  46. package/out-tsc/src/dialog/Modax.js.map +1 -1
  47. package/out-tsc/src/dropdown/Dropdown.js +133 -0
  48. package/out-tsc/src/dropdown/Dropdown.js.map +1 -0
  49. package/out-tsc/src/formfield/FormField.js +2 -1
  50. package/out-tsc/src/formfield/FormField.js.map +1 -1
  51. package/out-tsc/src/label/Label.js +2 -1
  52. package/out-tsc/src/label/Label.js.map +1 -1
  53. package/out-tsc/src/leafletmap/LeafletMap.js +2 -1
  54. package/out-tsc/src/leafletmap/LeafletMap.js.map +1 -1
  55. package/out-tsc/src/list/TembaList.js +7 -5
  56. package/out-tsc/src/list/TembaList.js.map +1 -1
  57. package/out-tsc/src/list/TembaMenu.js +81 -91
  58. package/out-tsc/src/list/TembaMenu.js.map +1 -1
  59. package/out-tsc/src/list/TicketList.js +2 -1
  60. package/out-tsc/src/list/TicketList.js.map +1 -1
  61. package/out-tsc/src/loading/Loading.js +2 -1
  62. package/out-tsc/src/loading/Loading.js.map +1 -1
  63. package/out-tsc/src/omnibox/Omnibox.js +2 -1
  64. package/out-tsc/src/omnibox/Omnibox.js.map +1 -1
  65. package/out-tsc/src/options/Options.js +3 -2
  66. package/out-tsc/src/options/Options.js.map +1 -1
  67. package/out-tsc/src/remote/Remote.js +2 -1
  68. package/out-tsc/src/remote/Remote.js.map +1 -1
  69. package/out-tsc/src/select/Select.js +8 -10
  70. package/out-tsc/src/select/Select.js.map +1 -1
  71. package/out-tsc/src/shadowless/Shadowless.js +2 -2
  72. package/out-tsc/src/shadowless/Shadowless.js.map +1 -1
  73. package/out-tsc/src/store/Store.js +2 -1
  74. package/out-tsc/src/store/Store.js.map +1 -1
  75. package/out-tsc/src/tabpane/Tab.js +46 -0
  76. package/out-tsc/src/tabpane/Tab.js.map +1 -0
  77. package/out-tsc/src/tabpane/TabPane.js +109 -0
  78. package/out-tsc/src/tabpane/TabPane.js.map +1 -0
  79. package/out-tsc/src/textinput/TextInput.js +3 -2
  80. package/out-tsc/src/textinput/TextInput.js.map +1 -1
  81. package/out-tsc/src/tip/Tip.js +2 -2
  82. package/out-tsc/src/tip/Tip.js.map +1 -1
  83. package/out-tsc/src/vectoricon/VectorIcon.js +12 -5
  84. package/out-tsc/src/vectoricon/VectorIcon.js.map +1 -1
  85. package/out-tsc/temba-modules.js +6 -0
  86. package/out-tsc/temba-modules.js.map +1 -1
  87. package/out-tsc/test/temba-contact-history.test.js +9 -6
  88. package/out-tsc/test/temba-contact-history.test.js.map +1 -1
  89. package/out-tsc/test/temba-dialog.test.js +3 -3
  90. package/out-tsc/test/temba-dialog.test.js.map +1 -1
  91. package/package.json +9 -8
  92. package/screenshots/truth/alert/error.png +0 -0
  93. package/screenshots/truth/alert/info.png +0 -0
  94. package/screenshots/truth/alert/warning.png +0 -0
  95. package/screenshots/truth/contacts/history-expanded.png +0 -0
  96. package/screenshots/truth/contacts/history.png +0 -0
  97. package/screenshots/truth/counter/summary.png +0 -0
  98. package/screenshots/truth/counter/unicode-variables.png +0 -0
  99. package/screenshots/truth/counter/unicode.png +0 -0
  100. package/screenshots/truth/dialog/focused.png +0 -0
  101. package/screenshots/truth/list/items-selected.png +0 -0
  102. package/screenshots/truth/list/items-updated.png +0 -0
  103. package/screenshots/truth/list/items.png +0 -0
  104. package/screenshots/truth/list/menu-root.png +0 -0
  105. package/screenshots/truth/list/menu-submenu.png +0 -0
  106. package/screenshots/truth/modax/form.png +0 -0
  107. package/screenshots/truth/modax/simple.png +0 -0
  108. package/screenshots/truth/options/block.png +0 -0
  109. package/screenshots/truth/select/embedded.png +0 -0
  110. package/screenshots/truth/select/expression-selected.png +0 -0
  111. package/screenshots/truth/select/expressions.png +0 -0
  112. package/screenshots/truth/select/functions.png +0 -0
  113. package/screenshots/truth/select/local-options.png +0 -0
  114. package/screenshots/truth/select/remote-options.png +0 -0
  115. package/screenshots/truth/select/search-enabled.png +0 -0
  116. package/screenshots/truth/select/search-selected-focus.png +0 -0
  117. package/screenshots/truth/select/search-selected.png +0 -0
  118. package/screenshots/truth/select/search-with-selected.png +0 -0
  119. package/screenshots/truth/select/searching.png +0 -0
  120. package/screenshots/truth/select/selected-multi.png +0 -0
  121. package/screenshots/truth/select/selected-single.png +0 -0
  122. package/screenshots/truth/select/selection-clearable.png +0 -0
  123. package/screenshots/truth/select/with-placeholder.png +0 -0
  124. package/screenshots/truth/select/without-placeholder.png +0 -0
  125. package/screenshots/truth/textinput/date-initialized.png +0 -0
  126. package/screenshots/truth/textinput/input-focused.png +0 -0
  127. package/screenshots/truth/textinput/textarea-focused.png +0 -0
  128. package/screenshots/truth/tip/bottom.png +0 -0
  129. package/screenshots/truth/tip/left.png +0 -0
  130. package/screenshots/truth/tip/right.png +0 -0
  131. package/screenshots/truth/tip/top.png +0 -0
  132. package/src/FormElement.ts +1 -1
  133. package/src/RapidElement.ts +1 -1
  134. package/src/alert/Alert.ts +3 -3
  135. package/src/aliaseditor/AliasEditor.ts +3 -1
  136. package/src/anchor/Anchor.ts +2 -1
  137. package/src/button/Button.ts +3 -1
  138. package/src/charcount/CharCount.ts +2 -1
  139. package/src/checkbox/Checkbox.ts +3 -1
  140. package/src/completion/Completion.ts +2 -1
  141. package/src/completion/helpers.ts +30 -4
  142. package/src/contacts/ContactChat.ts +115 -95
  143. package/src/contacts/ContactDetails.ts +2 -1
  144. package/src/contacts/ContactHistory.ts +64 -67
  145. package/src/contacts/events.ts +62 -77
  146. package/src/contactsearch/ContactSearch.ts +2 -1
  147. package/src/datepicker/DatePicker.ts +2 -7
  148. package/src/dialog/Dialog.ts +2 -2
  149. package/src/dialog/Modax.ts +4 -6
  150. package/src/dropdown/Dropdown.ts +136 -0
  151. package/src/formfield/FormField.ts +2 -1
  152. package/src/label/Label.ts +2 -8
  153. package/src/leafletmap/LeafletMap.ts +2 -2
  154. package/src/list/TembaList.ts +8 -5
  155. package/src/list/TembaMenu.ts +91 -98
  156. package/src/list/TicketList.ts +2 -1
  157. package/src/loading/Loading.ts +2 -1
  158. package/src/omnibox/Omnibox.ts +2 -1
  159. package/src/options/Options.ts +3 -2
  160. package/src/remote/Remote.ts +2 -7
  161. package/src/select/Select.ts +11 -10
  162. package/src/shadowless/Shadowless.ts +2 -2
  163. package/src/store/Store.ts +2 -1
  164. package/src/tabpane/Tab.ts +42 -0
  165. package/src/tabpane/TabPane.ts +113 -0
  166. package/src/textinput/TextInput.ts +3 -2
  167. package/src/tip/Tip.ts +2 -2
  168. package/src/vectoricon/VectorIcon.ts +12 -5
  169. package/static/css/temba-components.css +11 -0
  170. package/static/icons/Read Me.txt +1 -1
  171. package/static/icons/SVG/pause.svg +5 -0
  172. package/static/icons/SVG/play.svg +5 -0
  173. package/static/icons/SVG/{upload-cloud.svg → publish.svg} +1 -1
  174. package/static/icons/SVG/user-x.svg +5 -0
  175. package/static/icons/demo-external-svg.html +157 -142
  176. package/static/icons/demo-files/demo.css +3 -3
  177. package/static/icons/demo.html +186 -162
  178. package/static/icons/selection.json +390 -318
  179. package/static/icons/symbol-defs.svg +29 -20
  180. package/temba-modules.ts +6 -0
  181. package/test/temba-contact-history.test.ts +10 -6
  182. package/test/temba-dialog.test.ts +5 -6
  183. package/test-assets/modax/form.html +1 -1
  184. package/test-assets/style.css +7 -0
  185. package/web-test-runner.config.mjs +4 -1
  186. package/dist/b5b37a88.js +0 -1
package/src/textinput/TextInput.ts CHANGED
@@ -1,4 +1,5 @@
1
- import { TemplateResult, html, css, property } from 'lit-element';
1
+ import { TemplateResult, html, css } from 'lit';
2
+ import { property } from 'lit/decorators';
2
3
  import { ifDefined } from 'lit-html/directives/if-defined';
3
4
  import { styleMap } from 'lit-html/directives/style-map';
4
5
  import { FormElement } from '../FormElement';
@@ -15,7 +16,7 @@ export class TextInput extends FormElement {
15
16
  cursor: text;
16
17
  background: var(--color-widget-bg);
17
18
  border: 1px solid var(--color-widget-border);
18
- transition: all ease-in-out 200ms;
19
+ transition: all ease-in-out var(--transition-speed);
19
20
  display: flex;
20
21
  flex-direction: row;
21
22
  align-items: stretch;
package/src/tip/Tip.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { css, property } from 'lit-element';
2
- import { html, TemplateResult } from 'lit-html';
1
+ import { css, html, TemplateResult } from 'lit';
2
+ import { property } from 'lit/decorators';
3
3
  import { styleMap } from 'lit-html/directives/style-map';
4
4
  import { RapidElement } from '../RapidElement';
5
5
  import { getClasses } from '../utils';
package/src/vectoricon/VectorIcon.ts CHANGED
@@ -1,9 +1,10 @@
1
- import { property, LitElement, TemplateResult, html, css } from 'lit-element';
1
+ import { LitElement, TemplateResult, html, css } from 'lit';
2
+ import { property } from 'lit/decorators';
2
3
 
3
4
  import { getClasses } from '../utils';
4
5
 
5
6
  // for cache busting, increase whenever the icon set changes
6
- const ICON_VERSION = 5;
7
+ const ICON_VERSION = 6;
7
8
 
8
9
  export class VectorIcon extends LitElement {
9
10
  @property({ type: String })
@@ -103,7 +104,7 @@ export class VectorIcon extends LitElement {
103
104
  display: flex;
104
105
  flex-direction: column;
105
106
  border-radius: 999px;
106
- transition: background 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
107
+ transition: background 200ms linear,
107
108
  transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
108
109
  padding 150ms linear, margin 150ms linear;
109
110
  }
@@ -113,8 +114,14 @@ export class VectorIcon extends LitElement {
113
114
  }
114
115
 
115
116
  .wrapper.clickable:hover {
116
- padding: 0.35em;
117
- margin: -0.35em;
117
+ --icon-circle-size: 0.35em;
118
+ --icon-background: var(--icon-color-circle-hover);
119
+ }
120
+
121
+ .wrapper.clickable {
122
+ padding: var(--icon-circle-size);
123
+ margin: calc(-1 * var(--icon-circle-size));
124
+ background: var(--icon-background);
118
125
  }
119
126
  `;
120
127
  }
package/static/css/temba-components.css CHANGED
@@ -99,6 +99,8 @@ html input {
99
99
 
100
100
  --icon-color: var(--text-color);
101
101
  --icon-color-hover: var(--icon-color);
102
+ --icon-color-circle-hover: rgb(245, 245, 245);
103
+
102
104
  --transition-speed: 250ms;
103
105
  --event-padding: 0.5em 1em;
104
106
  --temba-select-selected-padding: 9px;
@@ -116,6 +118,7 @@ html input {
116
118
 
117
119
  --options-block-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
118
120
  --options-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
121
+ --dropdown-shadow: rgb(0 0 0 / 30%) 0px 0px 60px, rgb(0 0 0 / 12%) 0px 6px 12px;
119
122
 
120
123
  --label-size: 14px;
121
124
 
@@ -174,4 +177,12 @@ html input {
174
177
  margin-top: 28px;
175
178
  margin-bottom: 28px;
176
179
  margin-left: -13px;
180
+ }
181
+
182
+ temba-dropdown {
183
+ opacity: 0;
184
+ }
185
+
186
+ temba-dropdown:defined {
187
+ opacity: 1;
177
188
  }
package/static/icons/Read Me.txt CHANGED
@@ -4,7 +4,7 @@ If you prefer using PNGs, PDFs, or CSS sprites, refer to the Preferences panel o
4
4
 
5
5
  *demo.html* lists the icons that you selected. To insert your icons as inline SVGs (with the <use> element), copy the <svg> element (that contains symbol definitions) from the source of the demo.html file, below your own HTML's <body> tag. After copying this SVG, you can reference your glyphs like the following:
6
6
 
7
- <svg class="icon icon-zapier"><use xlink:href="#icon-zapier"></use></svg>
7
+ <svg class="icon icon-pause"><use xlink:href="#icon-pause"></use></svg>
8
8
 
9
9
  You can get this code from the SVG tab of the IcoMoon app, or by referring to the source of the demo.html file. To see how you can change the color/size of your icons using CSS, refer to the example provided in the *style.css* file.
10
10
 
package/static/icons/SVG/pause.svg ADDED
@@ -0,0 +1,5 @@
1
+ <!-- Generated by IcoMoon.io -->
2
+ <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
3
+ <title>pause</title>
4
+ <path d="M6 3c-0.552 0-1 0.448-1 1v16c0 0.552 0.448 1 1 1h4c0.552 0 1-0.448 1-1v-16c0-0.552-0.448-1-1-1zM7 5h2v14h-2zM14 3c-0.552 0-1 0.448-1 1v16c0 0.552 0.448 1 1 1h4c0.552 0 1-0.448 1-1v-16c0-0.552-0.448-1-1-1zM15 5h2v14h-2z"></path>
5
+ </svg>
package/static/icons/SVG/play.svg ADDED
@@ -0,0 +1,5 @@
1
+ <!-- Generated by IcoMoon.io -->
2
+ <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
3
+ <title>play</title>
4
+ <path d="M5.541 2.159c-0.153-0.1-0.34-0.159-0.541-0.159-0.552 0-1 0.448-1 1v18c-0.001 0.182 0.050 0.372 0.159 0.541 0.299 0.465 0.917 0.599 1.382 0.3l14-9c0.114-0.072 0.219-0.174 0.3-0.3 0.299-0.465 0.164-1.083-0.3-1.382zM6 4.832l11.151 7.168-11.151 7.168z"></path>
5
+ </svg>
package/static/icons/SVG/{upload-cloud.svg → publish.svg} RENAMED
@@ -1,5 +1,5 @@
1
1
  <!-- Generated by IcoMoon.io -->
2
2
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
3
- <title>upload-cloud</title>
3
+ <title>publish</title>
4
4
  <path d="M11 14.414v6.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-6.586l2.293 2.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-4-4c-0.092-0.092-0.202-0.166-0.324-0.217s-0.253-0.076-0.383-0.076c-0.256 0-0.512 0.098-0.707 0.293l-4 4c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0zM20.869 19.268c1.454-0.793 2.451-2.102 2.884-3.574s0.305-3.112-0.488-4.566c-0.679-1.245-1.737-2.155-2.959-2.663-0.724-0.301-1.505-0.46-2.299-0.465h-0.527c-0.725-2.057-2.144-3.708-3.917-4.752-1.983-1.168-4.415-1.581-6.821-0.959s-4.333 2.162-5.502 4.145-1.581 4.415-0.959 6.821c0.372 1.437 1.073 2.709 1.975 3.713 0.369 0.411 1.002 0.444 1.412 0.075s0.444-1.002 0.075-1.412c-0.688-0.765-1.235-1.75-1.526-2.877-0.484-1.872-0.164-3.761 0.746-5.305s2.407-2.74 4.279-3.224 3.761-0.164 5.305 0.746 2.74 2.407 3.224 4.279c0.116 0.435 0.506 0.75 0.969 0.75h1.253c0.536 0.004 1.061 0.111 1.545 0.312 0.815 0.339 1.517 0.943 1.97 1.773 0.529 0.97 0.615 2.061 0.325 3.044s-0.953 1.854-1.923 2.382c-0.485 0.264-0.664 0.872-0.399 1.357s0.872 0.664 1.357 0.399z"></path>
5
5
  </svg>
package/static/icons/SVG/user-x.svg ADDED
@@ -0,0 +1,5 @@
1
+ <!-- Generated by IcoMoon.io -->
2
+ <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
3
+ <title>user-x</title>
4
+ <path d="M17 21v-2c0-1.38-0.561-2.632-1.464-3.536s-2.156-1.464-3.536-1.464h-7c-1.38 0-2.632 0.561-3.536 1.464s-1.464 2.156-1.464 3.536v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2c0-0.829 0.335-1.577 0.879-2.121s1.292-0.879 2.121-0.879h7c0.829 0 1.577 0.335 2.121 0.879s0.879 1.292 0.879 2.121v2c0 0.552 0.448 1 1 1s1-0.448 1-1zM13.5 7c0-1.38-0.561-2.632-1.464-3.536s-2.156-1.464-3.536-1.464-2.632 0.561-3.536 1.464-1.464 2.156-1.464 3.536 0.561 2.632 1.464 3.536 2.156 1.464 3.536 1.464 2.632-0.561 3.536-1.464 1.464-2.156 1.464-3.536zM11.5 7c0 0.829-0.335 1.577-0.879 2.121s-1.292 0.879-2.121 0.879-1.577-0.335-2.121-0.879-0.879-1.292-0.879-2.121 0.335-1.577 0.879-2.121 1.292-0.879 2.121-0.879 1.577 0.335 2.121 0.879 0.879 1.292 0.879 2.121zM22.293 7.293l-1.793 1.793-1.793-1.793c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l1.793 1.793-1.793 1.793c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l1.793-1.793 1.793 1.793c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-1.793-1.793 1.793-1.793c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0z"></path>
5
+ </svg>