@watermarkinsights/ripple 3.7.0-0 → 3.7.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.
Files changed (173) hide show
  1. package/README.md +3 -3
  2. package/dist/cjs/{functions-f0693632.js → functions-13b0e88e.js} +442 -442
  3. package/dist/cjs/{global-86d92ce3.js → global-c802d13c.js} +65 -65
  4. package/dist/cjs/{http-service-494d81de.js → http-service-9e8c4dd5.js} +49 -49
  5. package/dist/cjs/{interfaces-a3338581.js → interfaces-30a74c1f.js} +29 -29
  6. package/dist/cjs/loader.cjs.js +2 -2
  7. package/dist/cjs/priv-chart-popover.cjs.entry.js +78 -78
  8. package/dist/cjs/priv-datepicker.cjs.entry.js +667 -667
  9. package/dist/cjs/priv-navigator-button.cjs.entry.js +18 -18
  10. package/dist/cjs/priv-navigator-item.cjs.entry.js +23 -23
  11. package/dist/cjs/ripple.cjs.js +2 -2
  12. package/dist/cjs/wm-action-menu_2.cjs.entry.js +341 -341
  13. package/dist/cjs/wm-button.cjs.entry.js +236 -236
  14. package/dist/cjs/wm-chart-slice.cjs.entry.js +13 -13
  15. package/dist/cjs/wm-chart.cjs.entry.js +474 -474
  16. package/dist/cjs/wm-datepicker.cjs.entry.js +262 -262
  17. package/dist/cjs/wm-input.cjs.entry.js +134 -134
  18. package/dist/cjs/wm-modal-footer.cjs.entry.js +31 -31
  19. package/dist/cjs/wm-modal-header.cjs.entry.js +34 -34
  20. package/dist/cjs/wm-modal.cjs.entry.js +161 -161
  21. package/dist/cjs/wm-navigator.cjs.entry.js +268 -268
  22. package/dist/cjs/wm-network-uploader.cjs.entry.js +420 -420
  23. package/dist/cjs/wm-option_2.cjs.entry.js +494 -494
  24. package/dist/cjs/wm-pagination.cjs.entry.js +167 -167
  25. package/dist/cjs/wm-search.cjs.entry.js +232 -231
  26. package/dist/cjs/wm-snackbar.cjs.entry.js +170 -170
  27. package/dist/cjs/wm-tab-item_3.cjs.entry.js +296 -296
  28. package/dist/cjs/wm-tag-input.cjs.entry.js +570 -570
  29. package/dist/cjs/wm-timepicker.cjs.entry.js +380 -380
  30. package/dist/cjs/wm-toggletip.cjs.entry.js +124 -124
  31. package/dist/cjs/wm-uploader.cjs.entry.js +346 -346
  32. package/dist/cjs/wm-wrapper.cjs.entry.js +12 -12
  33. package/dist/collection/components/wm-action-menu/wm-action-menu.js +460 -460
  34. package/dist/collection/components/wm-button/wm-button.js +503 -503
  35. package/dist/collection/components/wm-chart/priv-chart-popover/priv-chart-popover.js +232 -232
  36. package/dist/collection/components/wm-chart/wm-chart-slice.js +64 -64
  37. package/dist/collection/components/wm-chart/wm-chart.js +718 -719
  38. package/dist/collection/components/wm-datepicker/priv-datepicker/priv-datepicker.js +1015 -1015
  39. package/dist/collection/components/wm-datepicker/wm-datepicker.js +468 -468
  40. package/dist/collection/components/wm-input/wm-input.js +423 -424
  41. package/dist/collection/components/wm-menuitem/wm-menuitem.js +444 -444
  42. package/dist/collection/components/wm-modal/wm-modal-footer.js +141 -141
  43. package/dist/collection/components/wm-modal/wm-modal-header.js +92 -92
  44. package/dist/collection/components/wm-modal/wm-modal.js +459 -459
  45. package/dist/collection/components/wm-navigator/priv-navigator-button/priv-navigator-button.js +97 -97
  46. package/dist/collection/components/wm-navigator/priv-navigator-item/priv-navigator-item.js +114 -114
  47. package/dist/collection/components/wm-navigator/wm-navigator.js +468 -468
  48. package/dist/collection/components/wm-option/wm-option.js +422 -422
  49. package/dist/collection/components/wm-pagination/wm-pagination.js +368 -368
  50. package/dist/collection/components/wm-search/wm-search.js +480 -479
  51. package/dist/collection/components/wm-select/wm-select.js +720 -720
  52. package/dist/collection/components/wm-snackbar/wm-snackbar.js +297 -297
  53. package/dist/collection/components/wm-tabs/wm-tab-item/wm-tab-item.js +216 -216
  54. package/dist/collection/components/wm-tabs/wm-tab-list/wm-tab-list.js +330 -330
  55. package/dist/collection/components/wm-tabs/wm-tab-panel/wm-tab-panel.js +104 -104
  56. package/dist/collection/components/wm-tag-input/wm-tag-input.js +801 -801
  57. package/dist/collection/components/wm-timepicker/wm-timepicker.js +580 -580
  58. package/dist/collection/components/wm-toggletip/wm-toggletip.js +241 -241
  59. package/dist/collection/components/wm-uploader/wm-network-uploader/wm-network-uploader.js +753 -753
  60. package/dist/collection/components/wm-uploader/wm-uploader.js +748 -748
  61. package/dist/collection/components/wm-wrapper/wm-wrapper.js +27 -27
  62. package/dist/collection/dev/scripts.js +20 -20
  63. package/dist/collection/global/__mocks__/functions.js +6 -6
  64. package/dist/collection/global/functions.js +445 -445
  65. package/dist/collection/global/global.js +72 -72
  66. package/dist/collection/global/interfaces.js +49 -49
  67. package/dist/collection/global/services/__mocks__/http-service.js +130 -130
  68. package/dist/collection/global/services/http-service.js +50 -50
  69. package/dist/collection/lang/lang.js +5 -5
  70. package/dist/collection/lang/missing.js +39 -39
  71. package/dist/collection/lang/piglatin.js +93 -93
  72. package/dist/esm/{functions-cbfc81d1.js → functions-6ddad20e.js} +442 -442
  73. package/dist/esm/{global-d2addbde.js → global-a4da88c7.js} +65 -65
  74. package/dist/esm/{http-service-3dc3b3e7.js → http-service-5d037e16.js} +49 -49
  75. package/dist/esm/{interfaces-2b97fab2.js → interfaces-61c6305b.js} +29 -29
  76. package/dist/esm/loader.js +2 -2
  77. package/dist/esm/polyfills/core-js.js +0 -0
  78. package/dist/esm/polyfills/dom.js +0 -0
  79. package/dist/esm/polyfills/es5-html-element.js +0 -0
  80. package/dist/esm/polyfills/index.js +0 -0
  81. package/dist/esm/polyfills/system.js +0 -0
  82. package/dist/esm/priv-chart-popover.entry.js +78 -78
  83. package/dist/esm/priv-datepicker.entry.js +667 -667
  84. package/dist/esm/priv-navigator-button.entry.js +18 -18
  85. package/dist/esm/priv-navigator-item.entry.js +23 -23
  86. package/dist/esm/ripple.js +2 -2
  87. package/dist/esm/wm-action-menu_2.entry.js +341 -341
  88. package/dist/esm/wm-button.entry.js +236 -236
  89. package/dist/esm/wm-chart-slice.entry.js +13 -13
  90. package/dist/esm/wm-chart.entry.js +474 -474
  91. package/dist/esm/wm-datepicker.entry.js +262 -262
  92. package/dist/esm/wm-input.entry.js +134 -134
  93. package/dist/esm/wm-modal-footer.entry.js +31 -31
  94. package/dist/esm/wm-modal-header.entry.js +34 -34
  95. package/dist/esm/wm-modal.entry.js +161 -161
  96. package/dist/esm/wm-navigator.entry.js +268 -268
  97. package/dist/esm/wm-network-uploader.entry.js +420 -420
  98. package/dist/esm/wm-option_2.entry.js +494 -494
  99. package/dist/esm/wm-pagination.entry.js +167 -167
  100. package/dist/esm/wm-search.entry.js +232 -231
  101. package/dist/esm/wm-snackbar.entry.js +170 -170
  102. package/dist/esm/wm-tab-item_3.entry.js +296 -296
  103. package/dist/esm/wm-tag-input.entry.js +570 -570
  104. package/dist/esm/wm-timepicker.entry.js +380 -380
  105. package/dist/esm/wm-toggletip.entry.js +124 -124
  106. package/dist/esm/wm-uploader.entry.js +346 -346
  107. package/dist/esm/wm-wrapper.entry.js +12 -12
  108. package/dist/ripple/{p-5585f23e.entry.js → p-0068e871.entry.js} +1 -1
  109. package/dist/ripple/{p-7d9c18b9.entry.js → p-00999aeb.entry.js} +1 -1
  110. package/dist/ripple/{p-cd466a5b.entry.js → p-08b273ba.entry.js} +1 -1
  111. package/dist/ripple/{p-266e4bc2.entry.js → p-196b4c55.entry.js} +1 -1
  112. package/dist/ripple/{p-e3765b8e.entry.js → p-1a3df227.entry.js} +1 -1
  113. package/dist/ripple/{p-30f13477.entry.js → p-3590a57f.entry.js} +1 -1
  114. package/dist/ripple/{p-8a4bac13.entry.js → p-3a178ac8.entry.js} +1 -1
  115. package/dist/ripple/p-46371fad.entry.js +1 -0
  116. package/dist/ripple/p-5548fc7c.js +1 -0
  117. package/dist/ripple/{p-da1435f1.entry.js → p-5c73fd59.entry.js} +1 -1
  118. package/dist/ripple/{p-0c488d9d.entry.js → p-66513af1.entry.js} +1 -1
  119. package/dist/ripple/{p-bd05632b.entry.js → p-828316d6.entry.js} +1 -1
  120. package/dist/ripple/{p-b5edcf38.js → p-857a0bc0.js} +0 -0
  121. package/dist/ripple/{p-43f1298b.js → p-888bec42.js} +0 -0
  122. package/dist/ripple/{p-2caeca6b.entry.js → p-9624967f.entry.js} +1 -1
  123. package/dist/ripple/{p-938a5ba4.entry.js → p-99e2c5f6.entry.js} +1 -1
  124. package/dist/ripple/{p-fd8070fb.js → p-a6d6eae7.js} +0 -0
  125. package/dist/ripple/{p-b9656d44.entry.js → p-b495e06c.entry.js} +1 -1
  126. package/dist/ripple/p-b8aa478f.entry.js +1 -0
  127. package/dist/ripple/{p-4414cb64.entry.js → p-bf985c5d.entry.js} +1 -1
  128. package/dist/ripple/{p-c0b0510a.entry.js → p-cd6de442.entry.js} +1 -1
  129. package/dist/ripple/{p-111f705a.entry.js → p-cfdf1a79.entry.js} +1 -1
  130. package/dist/ripple/{p-ad73d523.entry.js → p-d22c957d.entry.js} +1 -1
  131. package/dist/ripple/{p-f3569e91.entry.js → p-e43b4eda.entry.js} +1 -1
  132. package/dist/ripple/ripple.esm.js +1 -1
  133. package/dist/types/components/wm-action-menu/wm-action-menu.d.ts +48 -48
  134. package/dist/types/components/wm-button/wm-button.d.ts +44 -44
  135. package/dist/types/components/wm-chart/priv-chart-popover/priv-chart-popover.d.ts +23 -23
  136. package/dist/types/components/wm-chart/wm-chart-slice.d.ts +8 -8
  137. package/dist/types/components/wm-chart/wm-chart.d.ts +82 -82
  138. package/dist/types/components/wm-datepicker/priv-datepicker/priv-datepicker.d.ts +76 -76
  139. package/dist/types/components/wm-datepicker/wm-datepicker.d.ts +41 -41
  140. package/dist/types/components/wm-input/wm-input.d.ts +46 -46
  141. package/dist/types/components/wm-menuitem/wm-menuitem.d.ts +34 -34
  142. package/dist/types/components/wm-modal/wm-modal-footer.d.ts +15 -15
  143. package/dist/types/components/wm-modal/wm-modal-header.d.ts +12 -12
  144. package/dist/types/components/wm-modal/wm-modal.d.ts +41 -41
  145. package/dist/types/components/wm-navigator/priv-navigator-button/priv-navigator-button.d.ts +10 -10
  146. package/dist/types/components/wm-navigator/priv-navigator-item/priv-navigator-item.d.ts +13 -13
  147. package/dist/types/components/wm-navigator/wm-navigator.d.ts +61 -61
  148. package/dist/types/components/wm-option/wm-option.d.ts +32 -32
  149. package/dist/types/components/wm-pagination/wm-pagination.d.ts +32 -32
  150. package/dist/types/components/wm-search/wm-search.d.ts +86 -86
  151. package/dist/types/components/wm-select/wm-select.d.ts +66 -66
  152. package/dist/types/components/wm-snackbar/wm-snackbar.d.ts +35 -35
  153. package/dist/types/components/wm-tabs/wm-tab-item/wm-tab-item.d.ts +38 -38
  154. package/dist/types/components/wm-tabs/wm-tab-list/wm-tab-list.d.ts +53 -53
  155. package/dist/types/components/wm-tabs/wm-tab-panel/wm-tab-panel.d.ts +20 -20
  156. package/dist/types/components/wm-tag-input/wm-tag-input.d.ts +92 -92
  157. package/dist/types/components/wm-timepicker/wm-timepicker.d.ts +61 -61
  158. package/dist/types/components/wm-toggletip/wm-toggletip.d.ts +27 -27
  159. package/dist/types/components/wm-uploader/wm-network-uploader/wm-network-uploader.d.ts +85 -85
  160. package/dist/types/components/wm-uploader/wm-uploader.d.ts +80 -80
  161. package/dist/types/components/wm-wrapper/wm-wrapper.d.ts +7 -7
  162. package/dist/types/components.d.ts +24 -24
  163. package/dist/types/global/__mocks__/functions.d.ts +6 -6
  164. package/dist/types/global/functions.d.ts +40 -40
  165. package/dist/types/global/global.d.ts +1 -1
  166. package/dist/types/global/interfaces.d.ts +34 -34
  167. package/dist/types/global/services/__mocks__/http-service.d.ts +6 -6
  168. package/dist/types/global/services/http-service.d.ts +4 -4
  169. package/dist/types/lang/lang.d.ts +5 -5
  170. package/package.json +47 -47
  171. package/dist/ripple/p-9d6e4c64.entry.js +0 -1
  172. package/dist/ripple/p-d9c7e3d6.js +0 -1
  173. package/dist/ripple/p-f33f3f20.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\"\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
- }
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
+ }