@watermarkinsights/ripple 3.4.0 → 3.5.0-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 (203) hide show
  1. package/README.md +3 -3
  2. package/dist/cjs/functions-653e695c.js +6164 -0
  3. package/dist/cjs/{global-caec45e5.js → global-ee710089.js} +65 -65
  4. package/dist/cjs/{http-service-9e8c4dd5.js → http-service-494d81de.js} +49 -49
  5. package/dist/cjs/{index-921ef454.js → index-cd179539.js} +157 -103
  6. package/dist/cjs/{interfaces-30a74c1f.js → interfaces-a3338581.js} +29 -29
  7. package/dist/cjs/loader.cjs.js +3 -3
  8. package/dist/cjs/priv-chart-popover.cjs.entry.js +79 -79
  9. package/dist/cjs/priv-datepicker.cjs.entry.js +668 -668
  10. package/dist/cjs/priv-navigator-button.cjs.entry.js +19 -19
  11. package/dist/cjs/priv-navigator-item.cjs.entry.js +24 -24
  12. package/dist/cjs/ripple.cjs.js +5 -5
  13. package/dist/cjs/wm-action-menu_2.cjs.entry.js +342 -342
  14. package/dist/cjs/wm-button.cjs.entry.js +219 -219
  15. package/dist/cjs/wm-chart-slice.cjs.entry.js +14 -14
  16. package/dist/cjs/wm-chart.cjs.entry.js +475 -517
  17. package/dist/cjs/wm-datepicker.cjs.entry.js +257 -257
  18. package/dist/cjs/wm-input.cjs.entry.js +134 -134
  19. package/dist/cjs/wm-modal-footer.cjs.entry.js +32 -32
  20. package/dist/cjs/wm-modal-header.cjs.entry.js +35 -35
  21. package/dist/cjs/wm-modal.cjs.entry.js +162 -162
  22. package/dist/cjs/wm-navigator.cjs.entry.js +269 -269
  23. package/dist/cjs/wm-network-uploader.cjs.entry.js +421 -421
  24. package/dist/cjs/wm-option_2.cjs.entry.js +492 -492
  25. package/dist/cjs/wm-pagination.cjs.entry.js +168 -168
  26. package/dist/cjs/wm-search.cjs.entry.js +232 -232
  27. package/dist/cjs/wm-snackbar.cjs.entry.js +171 -171
  28. package/dist/cjs/wm-tab-item_3.cjs.entry.js +301 -301
  29. package/dist/cjs/wm-tag-input.cjs.entry.js +557 -557
  30. package/dist/cjs/wm-timepicker.cjs.entry.js +384 -384
  31. package/dist/cjs/wm-toggletip.cjs.entry.js +125 -125
  32. package/dist/cjs/wm-uploader.cjs.entry.js +347 -347
  33. package/dist/cjs/wm-wrapper.cjs.entry.js +13 -13
  34. package/dist/collection/collection-manifest.json +2 -2
  35. package/dist/collection/components/wm-action-menu/wm-action-menu.js +460 -460
  36. package/dist/collection/components/wm-button/wm-button.js +485 -485
  37. package/dist/collection/components/wm-chart/priv-chart-popover/priv-chart-popover.js +232 -232
  38. package/dist/collection/components/wm-chart/wm-chart-slice.js +64 -64
  39. package/dist/collection/components/wm-chart/wm-chart.css +71 -84
  40. package/dist/collection/components/wm-chart/wm-chart.js +718 -765
  41. package/dist/collection/components/wm-datepicker/priv-datepicker/priv-datepicker.js +1015 -1015
  42. package/dist/collection/components/wm-datepicker/wm-datepicker.js +462 -462
  43. package/dist/collection/components/wm-input/wm-input.js +423 -423
  44. package/dist/collection/components/wm-menuitem/wm-menuitem.js +444 -444
  45. package/dist/collection/components/wm-modal/wm-modal-footer.js +141 -141
  46. package/dist/collection/components/wm-modal/wm-modal-header.js +92 -92
  47. package/dist/collection/components/wm-modal/wm-modal.js +459 -459
  48. package/dist/collection/components/wm-navigator/priv-navigator-button/priv-navigator-button.js +97 -97
  49. package/dist/collection/components/wm-navigator/priv-navigator-item/priv-navigator-item.js +114 -114
  50. package/dist/collection/components/wm-navigator/wm-navigator.js +468 -468
  51. package/dist/collection/components/wm-option/wm-option.js +422 -422
  52. package/dist/collection/components/wm-pagination/wm-pagination.js +368 -368
  53. package/dist/collection/components/wm-search/wm-search.js +479 -479
  54. package/dist/collection/components/wm-select/wm-select.js +717 -717
  55. package/dist/collection/components/wm-snackbar/wm-snackbar.js +297 -297
  56. package/dist/collection/components/wm-tabs/wm-tab-item/wm-tab-item.js +219 -219
  57. package/dist/collection/components/wm-tabs/wm-tab-list/wm-tab-list.js +331 -331
  58. package/dist/collection/components/wm-tabs/wm-tab-panel/wm-tab-panel.js +104 -104
  59. package/dist/collection/components/wm-tag-input/wm-tag-input.js +787 -787
  60. package/dist/collection/components/wm-timepicker/wm-timepicker.js +589 -589
  61. package/dist/collection/components/wm-toggletip/wm-toggletip.js +241 -241
  62. package/dist/collection/components/wm-uploader/wm-network-uploader/wm-network-uploader.js +753 -753
  63. package/dist/collection/components/wm-uploader/wm-uploader.js +748 -748
  64. package/dist/collection/components/wm-wrapper/wm-wrapper.js +27 -27
  65. package/dist/collection/dev/scripts.js +20 -20
  66. package/dist/collection/global/__mocks__/functions.js +6 -6
  67. package/dist/collection/global/functions.js +445 -445
  68. package/dist/collection/global/global.js +72 -72
  69. package/dist/collection/global/interfaces.js +49 -49
  70. package/dist/collection/global/services/__mocks__/http-service.js +130 -130
  71. package/dist/collection/global/services/http-service.js +50 -50
  72. package/dist/collection/lang/lang.js +5 -5
  73. package/dist/collection/lang/piglatin.js +93 -93
  74. package/dist/esm/functions-e528c934.js +6144 -0
  75. package/dist/esm/{global-08ca269c.js → global-b94f59e6.js} +65 -65
  76. package/dist/esm/{http-service-5d037e16.js → http-service-3dc3b3e7.js} +49 -49
  77. package/dist/esm/{index-f8b130b6.js → index-66f8130e.js} +157 -103
  78. package/dist/esm/{interfaces-61c6305b.js → interfaces-2b97fab2.js} +29 -29
  79. package/dist/esm/loader.js +3 -3
  80. package/dist/esm/polyfills/core-js.js +0 -0
  81. package/dist/esm/polyfills/dom.js +0 -0
  82. package/dist/esm/polyfills/es5-html-element.js +0 -0
  83. package/dist/esm/polyfills/index.js +2 -2
  84. package/dist/esm/polyfills/system.js +0 -0
  85. package/dist/esm/priv-chart-popover.entry.js +79 -79
  86. package/dist/esm/priv-datepicker.entry.js +668 -668
  87. package/dist/esm/priv-navigator-button.entry.js +19 -19
  88. package/dist/esm/priv-navigator-item.entry.js +24 -24
  89. package/dist/esm/ripple.js +5 -5
  90. package/dist/esm/wm-action-menu_2.entry.js +342 -342
  91. package/dist/esm/wm-button.entry.js +219 -219
  92. package/dist/esm/wm-chart-slice.entry.js +14 -14
  93. package/dist/esm/wm-chart.entry.js +475 -517
  94. package/dist/esm/wm-datepicker.entry.js +257 -257
  95. package/dist/esm/wm-input.entry.js +134 -134
  96. package/dist/esm/wm-modal-footer.entry.js +32 -32
  97. package/dist/esm/wm-modal-header.entry.js +35 -35
  98. package/dist/esm/wm-modal.entry.js +162 -162
  99. package/dist/esm/wm-navigator.entry.js +269 -269
  100. package/dist/esm/wm-network-uploader.entry.js +421 -421
  101. package/dist/esm/wm-option_2.entry.js +492 -492
  102. package/dist/esm/wm-pagination.entry.js +168 -168
  103. package/dist/esm/wm-search.entry.js +232 -232
  104. package/dist/esm/wm-snackbar.entry.js +171 -171
  105. package/dist/esm/wm-tab-item_3.entry.js +301 -301
  106. package/dist/esm/wm-tag-input.entry.js +557 -557
  107. package/dist/esm/wm-timepicker.entry.js +384 -384
  108. package/dist/esm/wm-toggletip.entry.js +125 -125
  109. package/dist/esm/wm-uploader.entry.js +347 -347
  110. package/dist/esm/wm-wrapper.entry.js +13 -13
  111. package/dist/ripple/p-092b01f3.entry.js +1 -0
  112. package/dist/ripple/{p-c995acbc.entry.js → p-0c58f50d.entry.js} +1 -1
  113. package/dist/ripple/p-11c09317.entry.js +1 -0
  114. package/dist/ripple/p-1e0c41a9.entry.js +1 -0
  115. package/dist/ripple/p-3003d26d.entry.js +1 -0
  116. package/dist/ripple/p-33524565.entry.js +1 -0
  117. package/dist/ripple/{p-888bec42.js → p-43f1298b.js} +0 -0
  118. package/dist/ripple/{p-5e49aba7.entry.js → p-4cc71463.entry.js} +1 -1
  119. package/dist/ripple/p-588b4475.js +16 -0
  120. package/dist/ripple/p-65e3a656.entry.js +1 -0
  121. package/dist/ripple/p-7a96bb97.js +1 -0
  122. package/dist/ripple/p-83b8aaaf.entry.js +1 -0
  123. package/dist/ripple/p-8923b7d0.entry.js +1 -0
  124. package/dist/ripple/{p-d52033d5.entry.js → p-8b0eb05e.entry.js} +1 -1
  125. package/dist/ripple/p-8cd1396e.entry.js +1 -0
  126. package/dist/ripple/{p-22a1a636.entry.js → p-99db8501.entry.js} +1 -1
  127. package/dist/ripple/p-9baa3039.js +1 -0
  128. package/dist/ripple/p-aa973691.entry.js +1 -0
  129. package/dist/ripple/{p-a61977b2.entry.js → p-b3d5ea85.entry.js} +1 -1
  130. package/dist/ripple/{p-7d009793.entry.js → p-b5189f72.entry.js} +1 -1
  131. package/dist/ripple/p-bc27b604.entry.js +1 -0
  132. package/dist/ripple/p-bc9ca97b.entry.js +1 -0
  133. package/dist/ripple/{p-bba99fcd.entry.js → p-cd58a15c.entry.js} +1 -1
  134. package/dist/ripple/p-dc9c9fda.entry.js +1 -0
  135. package/dist/ripple/p-e7616311.entry.js +1 -0
  136. package/dist/ripple/p-e9e8334e.entry.js +1 -0
  137. package/dist/ripple/p-ec9697db.entry.js +1 -0
  138. package/dist/ripple/p-efdaf3b6.entry.js +1 -0
  139. package/dist/ripple/p-fcdc6395.entry.js +1 -0
  140. package/dist/ripple/{p-a6d6eae7.js → p-fd8070fb.js} +0 -0
  141. package/dist/ripple/ripple.esm.js +1 -1
  142. package/dist/types/components/wm-action-menu/wm-action-menu.d.ts +48 -48
  143. package/dist/types/components/wm-button/wm-button.d.ts +44 -44
  144. package/dist/types/components/wm-chart/priv-chart-popover/priv-chart-popover.d.ts +23 -23
  145. package/dist/types/components/wm-chart/wm-chart-slice.d.ts +8 -8
  146. package/dist/types/components/wm-chart/wm-chart.d.ts +81 -80
  147. package/dist/types/components/wm-datepicker/priv-datepicker/priv-datepicker.d.ts +76 -76
  148. package/dist/types/components/wm-datepicker/wm-datepicker.d.ts +41 -41
  149. package/dist/types/components/wm-input/wm-input.d.ts +46 -46
  150. package/dist/types/components/wm-menuitem/wm-menuitem.d.ts +34 -34
  151. package/dist/types/components/wm-modal/wm-modal-footer.d.ts +15 -15
  152. package/dist/types/components/wm-modal/wm-modal-header.d.ts +12 -12
  153. package/dist/types/components/wm-modal/wm-modal.d.ts +41 -41
  154. package/dist/types/components/wm-navigator/priv-navigator-button/priv-navigator-button.d.ts +10 -10
  155. package/dist/types/components/wm-navigator/priv-navigator-item/priv-navigator-item.d.ts +13 -13
  156. package/dist/types/components/wm-navigator/wm-navigator.d.ts +61 -61
  157. package/dist/types/components/wm-option/wm-option.d.ts +32 -32
  158. package/dist/types/components/wm-pagination/wm-pagination.d.ts +32 -32
  159. package/dist/types/components/wm-search/wm-search.d.ts +86 -86
  160. package/dist/types/components/wm-select/wm-select.d.ts +66 -66
  161. package/dist/types/components/wm-snackbar/wm-snackbar.d.ts +35 -35
  162. package/dist/types/components/wm-tabs/wm-tab-item/wm-tab-item.d.ts +38 -38
  163. package/dist/types/components/wm-tabs/wm-tab-list/wm-tab-list.d.ts +53 -53
  164. package/dist/types/components/wm-tabs/wm-tab-panel/wm-tab-panel.d.ts +20 -20
  165. package/dist/types/components/wm-tag-input/wm-tag-input.d.ts +91 -91
  166. package/dist/types/components/wm-timepicker/wm-timepicker.d.ts +62 -62
  167. package/dist/types/components/wm-toggletip/wm-toggletip.d.ts +27 -27
  168. package/dist/types/components/wm-uploader/wm-network-uploader/wm-network-uploader.d.ts +85 -85
  169. package/dist/types/components/wm-uploader/wm-uploader.d.ts +80 -80
  170. package/dist/types/components/wm-wrapper/wm-wrapper.d.ts +7 -7
  171. package/dist/types/components.d.ts +24 -24
  172. package/dist/types/global/__mocks__/functions.d.ts +6 -6
  173. package/dist/types/global/functions.d.ts +40 -0
  174. package/dist/types/global/global.d.ts +1 -1
  175. package/dist/types/global/interfaces.d.ts +34 -34
  176. package/dist/types/global/services/__mocks__/http-service.d.ts +6 -6
  177. package/dist/types/global/services/http-service.d.ts +4 -4
  178. package/dist/types/lang/lang.d.ts +5 -5
  179. package/dist/types/stencil-public-runtime.d.ts +194 -186
  180. package/package.json +46 -46
  181. package/dist/cjs/functions-a6491ba8.js +0 -7943
  182. package/dist/esm/functions-5aebd578.js +0 -7923
  183. package/dist/ripple/p-0865e7cf.js +0 -16
  184. package/dist/ripple/p-0f663e59.entry.js +0 -1
  185. package/dist/ripple/p-1b790a7d.entry.js +0 -1
  186. package/dist/ripple/p-3b4c01b8.entry.js +0 -1
  187. package/dist/ripple/p-54c1f704.entry.js +0 -1
  188. package/dist/ripple/p-76c615e9.entry.js +0 -1
  189. package/dist/ripple/p-7d993d52.js +0 -1
  190. package/dist/ripple/p-8198cc9c.entry.js +0 -1
  191. package/dist/ripple/p-839d35bd.entry.js +0 -1
  192. package/dist/ripple/p-8708b8cb.entry.js +0 -1
  193. package/dist/ripple/p-8bd66955.entry.js +0 -1
  194. package/dist/ripple/p-957e3a05.entry.js +0 -1
  195. package/dist/ripple/p-af6eb4d5.entry.js +0 -1
  196. package/dist/ripple/p-b3f9f575.entry.js +0 -1
  197. package/dist/ripple/p-cd30198d.entry.js +0 -1
  198. package/dist/ripple/p-d9d6bf11.js +0 -1
  199. package/dist/ripple/p-e097c562.entry.js +0 -1
  200. package/dist/ripple/p-e9db6122.entry.js +0 -1
  201. package/dist/ripple/p-eabbd1e9.entry.js +0 -1
  202. package/dist/ripple/p-ec496b8b.entry.js +0 -1
  203. package/dist/ripple/p-fc8ec142.entry.js +0 -1
@@ -1,460 +1,460 @@
1
- import { h, Component, Element, Listen, Prop, State, Event, Host } from "@stencil/core";
2
- import { generateId, getTextDir, shouldOpenUp, shouldShiftRight } from "../../global/functions";
3
- export class ActionMenu {
4
- constructor() {
5
- this.openUp = false;
6
- this.isExpanded = false;
7
- this.actionMenuType = null;
8
- this.buttonType = null; // deprecated in favor of actionMenuType
9
- this.disabled = false;
10
- this.keysSoFar = "";
11
- this.searchIndex = 0;
12
- this.keyClear = null;
13
- }
14
- get horizontalPosition() {
15
- return !!this.el && !!this.itemsEl && shouldShiftRight(this.el, this.itemsEl) ? "right" : "left";
16
- }
17
- get childItems() {
18
- return Array.from(this.el.querySelectorAll("wm-menuitem"));
19
- }
20
- get tempActionMenuType() {
21
- // uses of this getter should be replaced with this.actionMenuType when buttonType is fully phased out
22
- // don't forget to reset this.actionMenuTypes's default value to icon
23
- return this.actionMenuType || this.buttonType || "icon";
24
- }
25
- handleClickedItem() {
26
- this.close();
27
- }
28
- handleKeyUp(ev) {
29
- this.moveUp(ev.target);
30
- }
31
- handleKeyDown(ev) {
32
- this.moveDown(ev.detail);
33
- }
34
- handleHomeKey() {
35
- this.focusFirstItem();
36
- }
37
- handleEndKey() {
38
- this.focusLastItem();
39
- }
40
- handleTabKey() {
41
- if (this.isExpanded) {
42
- this.close();
43
- }
44
- }
45
- handleEscKey() {
46
- this.close();
47
- this.wmButtonEl.focus();
48
- }
49
- handleClick(ev) {
50
- const isElOrChild = ev.target === this.el || this.el.contains(ev.target);
51
- if (!isElOrChild && this.isExpanded) {
52
- this.close();
53
- }
54
- }
55
- handleKey(ev) {
56
- switch (ev.key) {
57
- case "ArrowDown":
58
- if (!this.isExpanded) {
59
- ev.preventDefault();
60
- this.open();
61
- window.requestAnimationFrame(() => this.focusFirstItem());
62
- }
63
- break;
64
- case "ArrowUp":
65
- if (!this.isExpanded) {
66
- ev.preventDefault();
67
- this.open();
68
- window.requestAnimationFrame(() => this.focusLastItem());
69
- }
70
- break;
71
- }
72
- }
73
- handleMenuitemBlur(ev) {
74
- const toElOrChild = ev.detail.relatedTarget === this.el || this.el.contains(ev.detail.relatedTarget);
75
- // if the Menuitem is blurred to something other than the component, emit a blur event with the appropriate relatedTarget
76
- // keeps our component's blur events accurate, and closes when focusing browser address bar
77
- if (!toElOrChild) {
78
- const event = new CustomEvent("blur");
79
- // @ts-ignore
80
- event.relatedTarget = ev.detail.relatedTarget;
81
- this.el.dispatchEvent(event);
82
- }
83
- }
84
- handleButtonBlur(ev) {
85
- const toElOrChild = ev.relatedTarget === this.el || this.el.contains(ev.relatedTarget);
86
- if (toElOrChild) {
87
- // do not emit a blur event when opening the dropdown and focusing the Menuitems
88
- ev.stopPropagation();
89
- }
90
- }
91
- componentWillLoad() {
92
- this.uid = this.el.id ? this.el.id : generateId();
93
- this.el.focus = function () {
94
- if (!this.disabled) {
95
- const button = this.shadowRoot.querySelector("wm-button");
96
- button && button.focus();
97
- }
98
- };
99
- if (this.buttonType) {
100
- console.warn("wm-action-menu: button-type has been deprecated as of v3.1.0. Please use action-menu-type instead.");
101
- }
102
- }
103
- componentDidLoad() {
104
- if (this.childItems.length === 0) {
105
- console.error("wm-action-menu should have wm-menuitem elements as children");
106
- }
107
- else {
108
- this.focusFirstItem();
109
- }
110
- if (this.tempActionMenuType !== "icon" && !this.buttonText) {
111
- console.error("wm-action-menu should have a valid button-text property when button-type is set to 'text' or 'selector'");
112
- }
113
- if (this.tempActionMenuType === "icon" && !this.tooltip) {
114
- console.error("wm-action-menu should have a valid tooltip when button-type is set to 'icon'");
115
- }
116
- this.wmActionMenuLoaded.emit();
117
- this.menuLoaded.emit(); // deprecated
118
- }
119
- moveUp(el) {
120
- const index = this.childItems.indexOf(el);
121
- if (index === 0) {
122
- this.focusLastItem();
123
- }
124
- else {
125
- this.focusItem(this.childItems[index - 1]);
126
- }
127
- }
128
- moveDown(el) {
129
- const index = this.childItems.indexOf(el);
130
- if (index === this.childItems.length - 1) {
131
- this.focusFirstItem();
132
- }
133
- else {
134
- this.focusItem(this.childItems[index + 1]);
135
- }
136
- }
137
- open() {
138
- if (!this.disabled) {
139
- this.openUp = shouldOpenUp(this.el, this.itemsEl);
140
- // action menu usually is on the right side of the screen,
141
- // so dropdown opens to the left (is anchored on the right corner)
142
- // if there is not enough space on the left and enough on the right though,
143
- // it will open on the right side
144
- this.isExpanded = true;
145
- this.itemsEl.classList.remove("hidden");
146
- window.requestAnimationFrame(() => this.focusFirstItem());
147
- }
148
- }
149
- close(returnFocus = true) {
150
- this.isExpanded = false;
151
- this.childItems.forEach((i) => (i.focused = false));
152
- window.setTimeout(() => {
153
- this.itemsEl.classList.add("hidden");
154
- }, 150);
155
- window.setTimeout(() => {
156
- // if dev omits to assign focus after an action is triggered,
157
- // the component brings the focus back on the button
158
- // Focus will only be lost (and go to the body) once the menuitem
159
- // is not visible anymore, so we need to wait for the transition to
160
- // finish and the hidden class to be applied.
161
- // also checking if focus stayed on the menuitem
162
- if (returnFocus &&
163
- (document.activeElement.tagName === "BODY" || document.activeElement.tagName === "WM-MENUITEM")) {
164
- this.wmButtonEl.focus();
165
- }
166
- }, 250);
167
- }
168
- focusItem(item) {
169
- this.childItems.map((i) => (i.focused = i === item));
170
- item.focus && item.focus();
171
- }
172
- focusFirstItem() {
173
- this.focusItem(this.childItems[0]);
174
- }
175
- focusLastItem() {
176
- this.focusItem(this.childItems[this.childItems.length - 1]);
177
- }
178
- findAndFocusItem(ev) {
179
- const character = ev.detail.toUpperCase();
180
- this.focusFirstItem();
181
- if (!this.keysSoFar) {
182
- for (var i = 0; i < this.childItems.length; i++) {
183
- if (this.childItems[i] === document.activeElement) {
184
- this.searchIndex = i;
185
- }
186
- }
187
- }
188
- this.keysSoFar += character;
189
- this.clearKeysSoFarAfterDelay();
190
- var nextMatch = this.findMatchInRange(this.childItems, this.searchIndex + 1, this.childItems.length);
191
- if (!nextMatch) {
192
- nextMatch = this.findMatchInRange(this.childItems, 0, this.searchIndex);
193
- }
194
- if (nextMatch) {
195
- this.focusItem(nextMatch);
196
- }
197
- }
198
- clearKeysSoFarAfterDelay() {
199
- if (this.keyClear) {
200
- window.clearTimeout(this.keyClear);
201
- this.keyClear = null;
202
- }
203
- this.keyClear = window.setTimeout(function () {
204
- this.keysSoFar = "";
205
- this.keyClear = null;
206
- }.bind(this), 500);
207
- }
208
- findMatchInRange(list, startIndex, endIndex) {
209
- // Find the first item starting with the keysSoFar substring, searching in
210
- // the specified range of items
211
- for (var n = startIndex; n < endIndex; n++) {
212
- var label = list[n].innerText;
213
- if (label && label.toUpperCase().indexOf(this.keysSoFar) === 0) {
214
- return list[n];
215
- }
216
- }
217
- return null;
218
- }
219
- render() {
220
- return (h(Host, { onBlur: () => this.close(false) },
221
- h("div", { class: getTextDir() },
222
- h("wm-button", { "button-type": `${this.tempActionMenuType}only`, tooltip: this.tooltip, "label-for-identical-buttons": this.labelForIdenticalButtons, icon: this.tempActionMenuType === "icon" ? "f1d9" : "", id: `menubtn-${this.uid}`, onClick: () => (this.isExpanded ? this.close() : this.open()), onBlur: (ev) => this.handleButtonBlur(ev), disabled: this.disabled, ref: (el) => (this.wmButtonEl = el), "tooltip-position": this.tooltipPosition || this.horizontalPosition, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? "true" : "false", "aria-controls": `menu-${this.uid}` }, this.buttonText),
223
- h("div", { class: `dropdown ${this.openUp ? "open-up" : ""} ${this.horizontalPosition} ${this.isExpanded ? "open" : ""} hidden`, id: `menu-${this.uid}`, tabindex: -1, role: "menu", ref: (el) => (this.itemsEl = el) },
224
- h("slot", null)))));
225
- }
226
- static get is() { return "wm-action-menu"; }
227
- static get encapsulation() { return "shadow"; }
228
- static get originalStyleUrls() { return {
229
- "$": ["wm-action-menu.scss"]
230
- }; }
231
- static get styleUrls() { return {
232
- "$": ["wm-action-menu.css"]
233
- }; }
234
- static get properties() { return {
235
- "tooltipPosition": {
236
- "type": "string",
237
- "mutable": false,
238
- "complexType": {
239
- "original": "| \"top\"\n | \"bottom\"\n | \"left\"\n | \"right\"\n | \"bottom-left\"\n | \"bottom-right\"\n | \"top-right\"\n | \"top-left\"",
240
- "resolved": "\"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"right\" | \"top\" | \"top-left\" | \"top-right\" | undefined",
241
- "references": {}
242
- },
243
- "required": false,
244
- "optional": true,
245
- "docs": {
246
- "tags": [],
247
- "text": ""
248
- },
249
- "attribute": "tooltip-position",
250
- "reflect": false
251
- },
252
- "actionMenuType": {
253
- "type": "string",
254
- "mutable": false,
255
- "complexType": {
256
- "original": "\"icon\" | \"text\" | \"selector\" | null",
257
- "resolved": "\"icon\" | \"selector\" | \"text\" | null",
258
- "references": {}
259
- },
260
- "required": false,
261
- "optional": false,
262
- "docs": {
263
- "tags": [],
264
- "text": ""
265
- },
266
- "attribute": "action-menu-type",
267
- "reflect": false,
268
- "defaultValue": "null"
269
- },
270
- "buttonType": {
271
- "type": "string",
272
- "mutable": false,
273
- "complexType": {
274
- "original": "\"icon\" | \"text\" | \"selector\" | null",
275
- "resolved": "\"icon\" | \"selector\" | \"text\" | null",
276
- "references": {}
277
- },
278
- "required": false,
279
- "optional": false,
280
- "docs": {
281
- "tags": [],
282
- "text": ""
283
- },
284
- "attribute": "button-type",
285
- "reflect": false,
286
- "defaultValue": "null"
287
- },
288
- "buttonText": {
289
- "type": "string",
290
- "mutable": false,
291
- "complexType": {
292
- "original": "string",
293
- "resolved": "string | undefined",
294
- "references": {}
295
- },
296
- "required": false,
297
- "optional": true,
298
- "docs": {
299
- "tags": [],
300
- "text": ""
301
- },
302
- "attribute": "button-text",
303
- "reflect": false
304
- },
305
- "disabled": {
306
- "type": "boolean",
307
- "mutable": false,
308
- "complexType": {
309
- "original": "boolean",
310
- "resolved": "boolean",
311
- "references": {}
312
- },
313
- "required": false,
314
- "optional": false,
315
- "docs": {
316
- "tags": [],
317
- "text": ""
318
- },
319
- "attribute": "disabled",
320
- "reflect": true,
321
- "defaultValue": "false"
322
- },
323
- "tooltip": {
324
- "type": "string",
325
- "mutable": false,
326
- "complexType": {
327
- "original": "string",
328
- "resolved": "string | undefined",
329
- "references": {}
330
- },
331
- "required": false,
332
- "optional": true,
333
- "docs": {
334
- "tags": [],
335
- "text": ""
336
- },
337
- "attribute": "tooltip",
338
- "reflect": false
339
- },
340
- "labelForIdenticalButtons": {
341
- "type": "string",
342
- "mutable": false,
343
- "complexType": {
344
- "original": "string",
345
- "resolved": "string | undefined",
346
- "references": {}
347
- },
348
- "required": false,
349
- "optional": true,
350
- "docs": {
351
- "tags": [],
352
- "text": ""
353
- },
354
- "attribute": "label-for-identical-buttons",
355
- "reflect": false
356
- }
357
- }; }
358
- static get states() { return {
359
- "isExpanded": {}
360
- }; }
361
- static get events() { return [{
362
- "method": "wmActionMenuLoaded",
363
- "name": "wmActionMenuLoaded",
364
- "bubbles": true,
365
- "cancelable": true,
366
- "composed": true,
367
- "docs": {
368
- "tags": [],
369
- "text": ""
370
- },
371
- "complexType": {
372
- "original": "any",
373
- "resolved": "any",
374
- "references": {}
375
- }
376
- }, {
377
- "method": "menuLoaded",
378
- "name": "menuLoaded",
379
- "bubbles": true,
380
- "cancelable": true,
381
- "composed": true,
382
- "docs": {
383
- "tags": [],
384
- "text": ""
385
- },
386
- "complexType": {
387
- "original": "any",
388
- "resolved": "any",
389
- "references": {}
390
- }
391
- }]; }
392
- static get elementRef() { return "el"; }
393
- static get listeners() { return [{
394
- "name": "wmMenuitemClicked",
395
- "method": "handleClickedItem",
396
- "target": undefined,
397
- "capture": false,
398
- "passive": false
399
- }, {
400
- "name": "wmKeyUpPressed",
401
- "method": "handleKeyUp",
402
- "target": undefined,
403
- "capture": false,
404
- "passive": false
405
- }, {
406
- "name": "wmKeyDownPressed",
407
- "method": "handleKeyDown",
408
- "target": undefined,
409
- "capture": false,
410
- "passive": false
411
- }, {
412
- "name": "wmHomeKeyPressed",
413
- "method": "handleHomeKey",
414
- "target": undefined,
415
- "capture": false,
416
- "passive": false
417
- }, {
418
- "name": "wmEndKeyPressed",
419
- "method": "handleEndKey",
420
- "target": undefined,
421
- "capture": false,
422
- "passive": false
423
- }, {
424
- "name": "wmTabKeyPressed",
425
- "method": "handleTabKey",
426
- "target": undefined,
427
- "capture": false,
428
- "passive": false
429
- }, {
430
- "name": "wmEscKeyPressed",
431
- "method": "handleEscKey",
432
- "target": undefined,
433
- "capture": false,
434
- "passive": false
435
- }, {
436
- "name": "click",
437
- "method": "handleClick",
438
- "target": "document",
439
- "capture": false,
440
- "passive": false
441
- }, {
442
- "name": "keydown",
443
- "method": "handleKey",
444
- "target": undefined,
445
- "capture": false,
446
- "passive": false
447
- }, {
448
- "name": "wmMenuitemBlurred",
449
- "method": "handleMenuitemBlur",
450
- "target": undefined,
451
- "capture": false,
452
- "passive": false
453
- }, {
454
- "name": "wmLetterPressed",
455
- "method": "findAndFocusItem",
456
- "target": undefined,
457
- "capture": false,
458
- "passive": false
459
- }]; }
460
- }
1
+ import { h, Component, Element, Listen, Prop, State, Event, Host } from "@stencil/core";
2
+ import { generateId, getTextDir, shouldOpenUp, shouldShiftRight } from "../../global/functions";
3
+ export class ActionMenu {
4
+ constructor() {
5
+ this.openUp = false;
6
+ this.isExpanded = false;
7
+ this.actionMenuType = null;
8
+ this.buttonType = null; // deprecated in favor of actionMenuType
9
+ this.disabled = false;
10
+ this.keysSoFar = "";
11
+ this.searchIndex = 0;
12
+ this.keyClear = null;
13
+ }
14
+ get horizontalPosition() {
15
+ return !!this.el && !!this.itemsEl && shouldShiftRight(this.el, this.itemsEl) ? "right" : "left";
16
+ }
17
+ get childItems() {
18
+ return Array.from(this.el.querySelectorAll("wm-menuitem"));
19
+ }
20
+ get tempActionMenuType() {
21
+ // uses of this getter should be replaced with this.actionMenuType when buttonType is fully phased out
22
+ // don't forget to reset this.actionMenuTypes's default value to icon
23
+ return this.actionMenuType || this.buttonType || "icon";
24
+ }
25
+ handleClickedItem() {
26
+ this.close();
27
+ }
28
+ handleKeyUp(ev) {
29
+ this.moveUp(ev.target);
30
+ }
31
+ handleKeyDown(ev) {
32
+ this.moveDown(ev.detail);
33
+ }
34
+ handleHomeKey() {
35
+ this.focusFirstItem();
36
+ }
37
+ handleEndKey() {
38
+ this.focusLastItem();
39
+ }
40
+ handleTabKey() {
41
+ if (this.isExpanded) {
42
+ this.close();
43
+ }
44
+ }
45
+ handleEscKey() {
46
+ this.close();
47
+ this.wmButtonEl.focus();
48
+ }
49
+ handleClick(ev) {
50
+ const isElOrChild = ev.target === this.el || this.el.contains(ev.target);
51
+ if (!isElOrChild && this.isExpanded) {
52
+ this.close();
53
+ }
54
+ }
55
+ handleKey(ev) {
56
+ switch (ev.key) {
57
+ case "ArrowDown":
58
+ if (!this.isExpanded) {
59
+ ev.preventDefault();
60
+ this.open();
61
+ window.requestAnimationFrame(() => this.focusFirstItem());
62
+ }
63
+ break;
64
+ case "ArrowUp":
65
+ if (!this.isExpanded) {
66
+ ev.preventDefault();
67
+ this.open();
68
+ window.requestAnimationFrame(() => this.focusLastItem());
69
+ }
70
+ break;
71
+ }
72
+ }
73
+ handleMenuitemBlur(ev) {
74
+ const toElOrChild = ev.detail.relatedTarget === this.el || this.el.contains(ev.detail.relatedTarget);
75
+ // if the Menuitem is blurred to something other than the component, emit a blur event with the appropriate relatedTarget
76
+ // keeps our component's blur events accurate, and closes when focusing browser address bar
77
+ if (!toElOrChild) {
78
+ const event = new CustomEvent("blur");
79
+ // @ts-ignore
80
+ event.relatedTarget = ev.detail.relatedTarget;
81
+ this.el.dispatchEvent(event);
82
+ }
83
+ }
84
+ handleButtonBlur(ev) {
85
+ const toElOrChild = ev.relatedTarget === this.el || this.el.contains(ev.relatedTarget);
86
+ if (toElOrChild) {
87
+ // do not emit a blur event when opening the dropdown and focusing the Menuitems
88
+ ev.stopPropagation();
89
+ }
90
+ }
91
+ componentWillLoad() {
92
+ this.uid = this.el.id ? this.el.id : generateId();
93
+ this.el.focus = function () {
94
+ if (!this.disabled) {
95
+ const button = this.shadowRoot.querySelector("wm-button");
96
+ button && button.focus();
97
+ }
98
+ };
99
+ if (this.buttonType) {
100
+ console.warn("wm-action-menu: button-type has been deprecated as of v3.1.0. Please use action-menu-type instead.");
101
+ }
102
+ }
103
+ componentDidLoad() {
104
+ if (this.childItems.length === 0) {
105
+ console.error("wm-action-menu should have wm-menuitem elements as children");
106
+ }
107
+ else {
108
+ this.focusFirstItem();
109
+ }
110
+ if (this.tempActionMenuType !== "icon" && !this.buttonText) {
111
+ console.error("wm-action-menu should have a valid button-text property when button-type is set to 'text' or 'selector'");
112
+ }
113
+ if (this.tempActionMenuType === "icon" && !this.tooltip) {
114
+ console.error("wm-action-menu should have a valid tooltip when button-type is set to 'icon'");
115
+ }
116
+ this.wmActionMenuLoaded.emit();
117
+ this.menuLoaded.emit(); // deprecated
118
+ }
119
+ moveUp(el) {
120
+ const index = this.childItems.indexOf(el);
121
+ if (index === 0) {
122
+ this.focusLastItem();
123
+ }
124
+ else {
125
+ this.focusItem(this.childItems[index - 1]);
126
+ }
127
+ }
128
+ moveDown(el) {
129
+ const index = this.childItems.indexOf(el);
130
+ if (index === this.childItems.length - 1) {
131
+ this.focusFirstItem();
132
+ }
133
+ else {
134
+ this.focusItem(this.childItems[index + 1]);
135
+ }
136
+ }
137
+ open() {
138
+ if (!this.disabled) {
139
+ this.openUp = shouldOpenUp(this.el, this.itemsEl);
140
+ // action menu usually is on the right side of the screen,
141
+ // so dropdown opens to the left (is anchored on the right corner)
142
+ // if there is not enough space on the left and enough on the right though,
143
+ // it will open on the right side
144
+ this.isExpanded = true;
145
+ this.itemsEl.classList.remove("hidden");
146
+ window.requestAnimationFrame(() => this.focusFirstItem());
147
+ }
148
+ }
149
+ close(returnFocus = true) {
150
+ this.isExpanded = false;
151
+ this.childItems.forEach((i) => (i.focused = false));
152
+ window.setTimeout(() => {
153
+ this.itemsEl.classList.add("hidden");
154
+ }, 150);
155
+ window.setTimeout(() => {
156
+ // if dev omits to assign focus after an action is triggered,
157
+ // the component brings the focus back on the button
158
+ // Focus will only be lost (and go to the body) once the menuitem
159
+ // is not visible anymore, so we need to wait for the transition to
160
+ // finish and the hidden class to be applied.
161
+ // also checking if focus stayed on the menuitem
162
+ if (returnFocus &&
163
+ (document.activeElement.tagName === "BODY" || document.activeElement.tagName === "WM-MENUITEM")) {
164
+ this.wmButtonEl.focus();
165
+ }
166
+ }, 250);
167
+ }
168
+ focusItem(item) {
169
+ this.childItems.map((i) => (i.focused = i === item));
170
+ item.focus && item.focus();
171
+ }
172
+ focusFirstItem() {
173
+ this.focusItem(this.childItems[0]);
174
+ }
175
+ focusLastItem() {
176
+ this.focusItem(this.childItems[this.childItems.length - 1]);
177
+ }
178
+ findAndFocusItem(ev) {
179
+ const character = ev.detail.toUpperCase();
180
+ this.focusFirstItem();
181
+ if (!this.keysSoFar) {
182
+ for (var i = 0; i < this.childItems.length; i++) {
183
+ if (this.childItems[i] === document.activeElement) {
184
+ this.searchIndex = i;
185
+ }
186
+ }
187
+ }
188
+ this.keysSoFar += character;
189
+ this.clearKeysSoFarAfterDelay();
190
+ var nextMatch = this.findMatchInRange(this.childItems, this.searchIndex + 1, this.childItems.length);
191
+ if (!nextMatch) {
192
+ nextMatch = this.findMatchInRange(this.childItems, 0, this.searchIndex);
193
+ }
194
+ if (nextMatch) {
195
+ this.focusItem(nextMatch);
196
+ }
197
+ }
198
+ clearKeysSoFarAfterDelay() {
199
+ if (this.keyClear) {
200
+ window.clearTimeout(this.keyClear);
201
+ this.keyClear = null;
202
+ }
203
+ this.keyClear = window.setTimeout(function () {
204
+ this.keysSoFar = "";
205
+ this.keyClear = null;
206
+ }.bind(this), 500);
207
+ }
208
+ findMatchInRange(list, startIndex, endIndex) {
209
+ // Find the first item starting with the keysSoFar substring, searching in
210
+ // the specified range of items
211
+ for (var n = startIndex; n < endIndex; n++) {
212
+ var label = list[n].innerText;
213
+ if (label && label.toUpperCase().indexOf(this.keysSoFar) === 0) {
214
+ return list[n];
215
+ }
216
+ }
217
+ return null;
218
+ }
219
+ render() {
220
+ return (h(Host, { onBlur: () => this.close(false) },
221
+ h("div", { class: getTextDir() },
222
+ h("wm-button", { "button-type": `${this.tempActionMenuType}only`, tooltip: this.tooltip, "label-for-identical-buttons": this.labelForIdenticalButtons, icon: this.tempActionMenuType === "icon" ? "f1d9" : "", id: `menubtn-${this.uid}`, onClick: () => (this.isExpanded ? this.close() : this.open()), onBlur: (ev) => this.handleButtonBlur(ev), disabled: this.disabled, ref: (el) => (this.wmButtonEl = el), "tooltip-position": this.tooltipPosition || this.horizontalPosition, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? "true" : "false", "aria-controls": `menu-${this.uid}` }, this.buttonText),
223
+ h("div", { class: `dropdown ${this.openUp ? "open-up" : ""} ${this.horizontalPosition} ${this.isExpanded ? "open" : ""} hidden`, id: `menu-${this.uid}`, tabindex: -1, role: "menu", ref: (el) => (this.itemsEl = el) },
224
+ h("slot", null)))));
225
+ }
226
+ static get is() { return "wm-action-menu"; }
227
+ static get encapsulation() { return "shadow"; }
228
+ static get originalStyleUrls() { return {
229
+ "$": ["wm-action-menu.scss"]
230
+ }; }
231
+ static get styleUrls() { return {
232
+ "$": ["wm-action-menu.css"]
233
+ }; }
234
+ static get properties() { return {
235
+ "tooltipPosition": {
236
+ "type": "string",
237
+ "mutable": false,
238
+ "complexType": {
239
+ "original": "| \"top\"\r\n | \"bottom\"\r\n | \"left\"\r\n | \"right\"\r\n | \"bottom-left\"\r\n | \"bottom-right\"\r\n | \"top-right\"\r\n | \"top-left\"",
240
+ "resolved": "\"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"right\" | \"top\" | \"top-left\" | \"top-right\" | undefined",
241
+ "references": {}
242
+ },
243
+ "required": false,
244
+ "optional": true,
245
+ "docs": {
246
+ "tags": [],
247
+ "text": ""
248
+ },
249
+ "attribute": "tooltip-position",
250
+ "reflect": false
251
+ },
252
+ "actionMenuType": {
253
+ "type": "string",
254
+ "mutable": false,
255
+ "complexType": {
256
+ "original": "\"icon\" | \"text\" | \"selector\" | null",
257
+ "resolved": "\"icon\" | \"selector\" | \"text\" | null",
258
+ "references": {}
259
+ },
260
+ "required": false,
261
+ "optional": false,
262
+ "docs": {
263
+ "tags": [],
264
+ "text": ""
265
+ },
266
+ "attribute": "action-menu-type",
267
+ "reflect": false,
268
+ "defaultValue": "null"
269
+ },
270
+ "buttonType": {
271
+ "type": "string",
272
+ "mutable": false,
273
+ "complexType": {
274
+ "original": "\"icon\" | \"text\" | \"selector\" | null",
275
+ "resolved": "\"icon\" | \"selector\" | \"text\" | null",
276
+ "references": {}
277
+ },
278
+ "required": false,
279
+ "optional": false,
280
+ "docs": {
281
+ "tags": [],
282
+ "text": ""
283
+ },
284
+ "attribute": "button-type",
285
+ "reflect": false,
286
+ "defaultValue": "null"
287
+ },
288
+ "buttonText": {
289
+ "type": "string",
290
+ "mutable": false,
291
+ "complexType": {
292
+ "original": "string",
293
+ "resolved": "string | undefined",
294
+ "references": {}
295
+ },
296
+ "required": false,
297
+ "optional": true,
298
+ "docs": {
299
+ "tags": [],
300
+ "text": ""
301
+ },
302
+ "attribute": "button-text",
303
+ "reflect": false
304
+ },
305
+ "disabled": {
306
+ "type": "boolean",
307
+ "mutable": false,
308
+ "complexType": {
309
+ "original": "boolean",
310
+ "resolved": "boolean",
311
+ "references": {}
312
+ },
313
+ "required": false,
314
+ "optional": false,
315
+ "docs": {
316
+ "tags": [],
317
+ "text": ""
318
+ },
319
+ "attribute": "disabled",
320
+ "reflect": true,
321
+ "defaultValue": "false"
322
+ },
323
+ "tooltip": {
324
+ "type": "string",
325
+ "mutable": false,
326
+ "complexType": {
327
+ "original": "string",
328
+ "resolved": "string | undefined",
329
+ "references": {}
330
+ },
331
+ "required": false,
332
+ "optional": true,
333
+ "docs": {
334
+ "tags": [],
335
+ "text": ""
336
+ },
337
+ "attribute": "tooltip",
338
+ "reflect": false
339
+ },
340
+ "labelForIdenticalButtons": {
341
+ "type": "string",
342
+ "mutable": false,
343
+ "complexType": {
344
+ "original": "string",
345
+ "resolved": "string | undefined",
346
+ "references": {}
347
+ },
348
+ "required": false,
349
+ "optional": true,
350
+ "docs": {
351
+ "tags": [],
352
+ "text": ""
353
+ },
354
+ "attribute": "label-for-identical-buttons",
355
+ "reflect": false
356
+ }
357
+ }; }
358
+ static get states() { return {
359
+ "isExpanded": {}
360
+ }; }
361
+ static get events() { return [{
362
+ "method": "wmActionMenuLoaded",
363
+ "name": "wmActionMenuLoaded",
364
+ "bubbles": true,
365
+ "cancelable": true,
366
+ "composed": true,
367
+ "docs": {
368
+ "tags": [],
369
+ "text": ""
370
+ },
371
+ "complexType": {
372
+ "original": "any",
373
+ "resolved": "any",
374
+ "references": {}
375
+ }
376
+ }, {
377
+ "method": "menuLoaded",
378
+ "name": "menuLoaded",
379
+ "bubbles": true,
380
+ "cancelable": true,
381
+ "composed": true,
382
+ "docs": {
383
+ "tags": [],
384
+ "text": ""
385
+ },
386
+ "complexType": {
387
+ "original": "any",
388
+ "resolved": "any",
389
+ "references": {}
390
+ }
391
+ }]; }
392
+ static get elementRef() { return "el"; }
393
+ static get listeners() { return [{
394
+ "name": "wmMenuitemClicked",
395
+ "method": "handleClickedItem",
396
+ "target": undefined,
397
+ "capture": false,
398
+ "passive": false
399
+ }, {
400
+ "name": "wmKeyUpPressed",
401
+ "method": "handleKeyUp",
402
+ "target": undefined,
403
+ "capture": false,
404
+ "passive": false
405
+ }, {
406
+ "name": "wmKeyDownPressed",
407
+ "method": "handleKeyDown",
408
+ "target": undefined,
409
+ "capture": false,
410
+ "passive": false
411
+ }, {
412
+ "name": "wmHomeKeyPressed",
413
+ "method": "handleHomeKey",
414
+ "target": undefined,
415
+ "capture": false,
416
+ "passive": false
417
+ }, {
418
+ "name": "wmEndKeyPressed",
419
+ "method": "handleEndKey",
420
+ "target": undefined,
421
+ "capture": false,
422
+ "passive": false
423
+ }, {
424
+ "name": "wmTabKeyPressed",
425
+ "method": "handleTabKey",
426
+ "target": undefined,
427
+ "capture": false,
428
+ "passive": false
429
+ }, {
430
+ "name": "wmEscKeyPressed",
431
+ "method": "handleEscKey",
432
+ "target": undefined,
433
+ "capture": false,
434
+ "passive": false
435
+ }, {
436
+ "name": "click",
437
+ "method": "handleClick",
438
+ "target": "document",
439
+ "capture": false,
440
+ "passive": false
441
+ }, {
442
+ "name": "keydown",
443
+ "method": "handleKey",
444
+ "target": undefined,
445
+ "capture": false,
446
+ "passive": false
447
+ }, {
448
+ "name": "wmMenuitemBlurred",
449
+ "method": "handleMenuitemBlur",
450
+ "target": undefined,
451
+ "capture": false,
452
+ "passive": false
453
+ }, {
454
+ "name": "wmLetterPressed",
455
+ "method": "findAndFocusItem",
456
+ "target": undefined,
457
+ "capture": false,
458
+ "passive": false
459
+ }]; }
460
+ }