@watermarkinsights/ripple 3.0.1 → 3.0.2-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 (81) hide show
  1. package/dist/cjs/{global-ccb9500c.js → global-1e540de6.js} +1 -1
  2. package/dist/cjs/loader.cjs.js +2 -2
  3. package/dist/cjs/priv-datepicker.cjs.entry.js +1 -1
  4. package/dist/cjs/ripple.cjs.js +2 -2
  5. package/dist/cjs/wm-datepicker.cjs.entry.js +25 -30
  6. package/dist/collection/components/wm-datepicker/priv-datepicker/priv-datepicker.css +9 -0
  7. package/dist/collection/components/wm-datepicker/wm-datepicker.js +26 -32
  8. package/dist/esm/{global-4f914bb2.js → global-d6b49e98.js} +1 -1
  9. package/dist/esm/loader.js +2 -2
  10. package/dist/esm/priv-datepicker.entry.js +1 -1
  11. package/dist/esm/ripple.js +2 -2
  12. package/dist/esm/wm-datepicker.entry.js +25 -30
  13. package/dist/ripple/p-129d94fa.entry.js +1 -0
  14. package/dist/ripple/{p-454ad552.entry.js → p-c0fe5201.entry.js} +1 -1
  15. package/dist/ripple/{p-69a73e86.js → p-e3843249.js} +1 -1
  16. package/dist/ripple/ripple.esm.js +1 -1
  17. package/dist/types/components/wm-datepicker/wm-datepicker.d.ts +3 -3
  18. package/package.json +1 -1
  19. package/dist/cjs/app-globals-a07327ae.js +0 -47
  20. package/dist/cjs/css-shim-a7379e2b.js +0 -6
  21. package/dist/cjs/dom-3e7d9c3b.js +0 -75
  22. package/dist/cjs/functions-65513c61.js +0 -8360
  23. package/dist/cjs/global-06317e3f.js +0 -36
  24. package/dist/cjs/global-f6930bb0.js +0 -38
  25. package/dist/cjs/index-8dea8c13.js +0 -2976
  26. package/dist/cjs/shadow-css-09555044.js +0 -391
  27. package/dist/esm/app-globals-f62991a4.js +0 -45
  28. package/dist/esm/css-shim-bbdf0cc6.js +0 -4
  29. package/dist/esm/dom-1f98a75f.js +0 -73
  30. package/dist/esm/functions-316c1b23.js +0 -8340
  31. package/dist/esm/global-03372f70.js +0 -34
  32. package/dist/esm/global-fedbc323.js +0 -36
  33. package/dist/esm/index-e34aa595.js +0 -2938
  34. package/dist/esm/shadow-css-67b66845.js +0 -389
  35. package/dist/ripple/app-globals-b5693c90.js +0 -45
  36. package/dist/ripple/app-globals-d72c2d3c.js +0 -45
  37. package/dist/ripple/app-globals-f62991a4.js +0 -45
  38. package/dist/ripple/css-shim-bbdf0cc6.js +0 -4
  39. package/dist/ripple/dom-1f98a75f.js +0 -73
  40. package/dist/ripple/functions-316c1b23.js +0 -8340
  41. package/dist/ripple/http-service-5d037e16.js +0 -52
  42. package/dist/ripple/index-20b65f86.js +0 -2938
  43. package/dist/ripple/index-e34aa595.js +0 -2938
  44. package/dist/ripple/interfaces-50753346.js +0 -51
  45. package/dist/ripple/p-0c2498f4.js +0 -1
  46. package/dist/ripple/p-42ca2e15.entry.js +0 -1
  47. package/dist/ripple/p-e91befe3.js +0 -1
  48. package/dist/ripple/priv-chart-popover.entry.js +0 -85
  49. package/dist/ripple/priv-datepicker.entry.js +0 -668
  50. package/dist/ripple/priv-navigator-button.entry.js +0 -25
  51. package/dist/ripple/priv-navigator-item.entry.js +0 -30
  52. package/dist/ripple/ripple.css +0 -84
  53. package/dist/ripple/shadow-css-67b66845.js +0 -389
  54. package/dist/ripple/wm-action-menu.entry.js +0 -202
  55. package/dist/ripple/wm-button.entry.js +0 -148
  56. package/dist/ripple/wm-chart-slice.entry.js +0 -18
  57. package/dist/ripple/wm-chart.entry.js +0 -504
  58. package/dist/ripple/wm-datepicker.entry.js +0 -258
  59. package/dist/ripple/wm-input.entry.js +0 -106
  60. package/dist/ripple/wm-menuitem.entry.js +0 -114
  61. package/dist/ripple/wm-modal-footer.entry.js +0 -39
  62. package/dist/ripple/wm-modal-header.entry.js +0 -41
  63. package/dist/ripple/wm-modal.entry.js +0 -145
  64. package/dist/ripple/wm-navigator.entry.js +0 -275
  65. package/dist/ripple/wm-network-uploader.entry.js +0 -427
  66. package/dist/ripple/wm-option.entry.js +0 -119
  67. package/dist/ripple/wm-pagination.entry.js +0 -172
  68. package/dist/ripple/wm-search.entry.js +0 -227
  69. package/dist/ripple/wm-select.entry.js +0 -362
  70. package/dist/ripple/wm-snackbar.entry.js +0 -156
  71. package/dist/ripple/wm-tab-item.entry.js +0 -78
  72. package/dist/ripple/wm-tab-list.entry.js +0 -201
  73. package/dist/ripple/wm-tab-panel.entry.js +0 -38
  74. package/dist/ripple/wm-tag-input.entry.js +0 -534
  75. package/dist/ripple/wm-timepicker.entry.js +0 -382
  76. package/dist/ripple/wm-toggletip.entry.js +0 -124
  77. package/dist/ripple/wm-uploader.entry.js +0 -338
  78. package/dist/ripple/wm-wrapper.entry.js +0 -17
  79. package/dist/types/components/wm-tag-input/wm-tag-input.d.ts~ds312_tagInputMaxTags +0 -87
  80. package/dist/types/components.d.ts~ds312_tagInputMaxTags +0 -879
  81. package/dist/types/stencil-public-runtime.d.ts~ds312_tagInputMaxTags +0 -1555
@@ -1,202 +0,0 @@
1
- import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-e34aa595.js';
2
- import { s as shouldShiftRight, g as generateId, a as shouldOpenUp, b as getTextDir } from './functions-316c1b23.js';
3
-
4
- const wmActionMenuCss = ":host{position:relative;display:inline-block;width:-moz-fit-content;width:fit-content;color:#575195;font-family:inherit}:host .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host(:focus){outline:none}wm-action-menu:focus{outline:none}.dropdown{position:absolute;padding:0;margin:0.25rem 0;border-radius:3px 3px 3px 3px;min-width:11.4375rem;-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;transition:transform 0.25s ease;-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;visibility:hidden;-webkit-box-shadow:0 3px 14px 3px rgba(5, 3, 3, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 3px 14px 3px rgba(5, 3, 3, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 3px 14px 3px rgba(5, 3, 3, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);background:#fff;z-index:10;text-align:left;white-space:nowrap}.dropdown:focus{outline:none}.dropdown.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1);visibility:visible}.dropdown.open-up{bottom:2.5rem;top:auto;-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;transform-origin:center bottom}.dropdown.right{left:0}.dropdown.left{right:0}";
5
-
6
- const ActionMenu = class {
7
- constructor(hostRef) {
8
- registerInstance(this, hostRef);
9
- this.menuLoaded = createEvent(this, "menuLoaded", 7);
10
- this.openUp = false;
11
- this.isExpanded = false;
12
- this.buttonType = "icon";
13
- this.disabled = false;
14
- this.keysSoFar = "";
15
- this.searchIndex = 0;
16
- this.keyClear = null;
17
- }
18
- get horizontalPosition() {
19
- return !!this.el && !!this.itemsEl && shouldShiftRight(this.el, this.itemsEl) ? "right" : "left";
20
- }
21
- get childItems() {
22
- return Array.from(this.el.querySelectorAll("wm-menuitem"));
23
- }
24
- handleClickedItem() {
25
- this.close();
26
- }
27
- handleKeyUp(ev) {
28
- this.moveUp(ev.target);
29
- }
30
- handleKeyDown(ev) {
31
- this.moveDown(ev.detail);
32
- }
33
- handleHomeKey() {
34
- this.focusFirstItem();
35
- }
36
- handleEndKey() {
37
- this.focusLastItem();
38
- }
39
- handleTabKey() {
40
- if (this.isExpanded) {
41
- this.close();
42
- }
43
- }
44
- handleEscKey() {
45
- this.close();
46
- this.wmButtonEl.focus();
47
- }
48
- blurHandler(ev) {
49
- const isElOrChild = ev.target === this.el || this.el.contains(ev.target);
50
- if (!isElOrChild && this.isExpanded) {
51
- this.close();
52
- }
53
- }
54
- handleKey(ev) {
55
- switch (ev.key) {
56
- case "ArrowDown":
57
- if (!this.isExpanded) {
58
- ev.preventDefault();
59
- this.open();
60
- window.requestAnimationFrame(() => this.focusFirstItem());
61
- }
62
- break;
63
- case "ArrowUp":
64
- if (!this.isExpanded) {
65
- ev.preventDefault();
66
- this.open();
67
- window.requestAnimationFrame(() => this.focusLastItem());
68
- }
69
- break;
70
- }
71
- }
72
- componentWillLoad() {
73
- this.uid = this.el.id ? this.el.id : generateId();
74
- this.el.focus = function () {
75
- if (!this.disabled) {
76
- const button = this.shadowRoot.querySelector("wm-button");
77
- button && button.focus();
78
- }
79
- };
80
- }
81
- componentDidLoad() {
82
- if (this.childItems.length === 0) {
83
- console.error("wm-action-menu should have wm-menuitem elements as children");
84
- }
85
- else {
86
- this.focusFirstItem();
87
- }
88
- if (this.buttonType !== "icon" && !this.buttonText) {
89
- console.error("wm-action-menu should have a valid button-text property when button-type is set to 'text' or 'selector'");
90
- }
91
- if (this.buttonType === "icon" && !this.tooltip) {
92
- console.error("wm-action-menu should have a valid tooltip when button-type is set to 'icon'");
93
- }
94
- this.menuLoaded.emit();
95
- }
96
- moveUp(el) {
97
- const index = this.childItems.indexOf(el);
98
- if (index === 0) {
99
- this.focusLastItem();
100
- }
101
- else {
102
- this.focusItem(this.childItems[index - 1]);
103
- }
104
- }
105
- moveDown(el) {
106
- const index = this.childItems.indexOf(el);
107
- if (index === this.childItems.length - 1) {
108
- this.focusFirstItem();
109
- }
110
- else {
111
- this.focusItem(this.childItems[index + 1]);
112
- }
113
- }
114
- open() {
115
- if (!this.disabled) {
116
- this.openUp = shouldOpenUp(this.el, this.itemsEl);
117
- // action menu usually is on the right side of the screen,
118
- // so dropdown opens to the left (is anchored on the right corner)
119
- // if there is not enough space on the left and enough on the right though,
120
- // it will open on the right side
121
- this.isExpanded = true;
122
- this.itemsEl.classList.remove("hidden");
123
- window.requestAnimationFrame(() => this.focusFirstItem());
124
- }
125
- }
126
- close() {
127
- this.isExpanded = false;
128
- this.childItems.forEach((i) => (i.focused = false));
129
- window.setTimeout(() => {
130
- this.itemsEl.classList.add("hidden");
131
- }, 150);
132
- window.setTimeout(() => {
133
- // if dev omits to assign focus after an action is triggered,
134
- // the component brings the focus back on the button
135
- // Focus will only be lost (and go to the body) once the menuitem
136
- // is not visible anymore, so we need to wait for the transition to
137
- // finish and the hidden class to be applied.
138
- // also checking if focus stayed on the menuitem
139
- if (document.activeElement.tagName === "BODY" || document.activeElement.tagName === "WM-MENUITEM") {
140
- this.wmButtonEl.focus();
141
- }
142
- }, 250);
143
- }
144
- focusItem(item) {
145
- this.childItems.map((i) => (i.focused = i === item));
146
- item.focus && item.focus();
147
- }
148
- focusFirstItem() {
149
- this.focusItem(this.childItems[0]);
150
- }
151
- focusLastItem() {
152
- this.focusItem(this.childItems[this.childItems.length - 1]);
153
- }
154
- findAndFocusItem(ev) {
155
- const character = ev.detail.toUpperCase();
156
- this.focusFirstItem();
157
- if (!this.keysSoFar) {
158
- for (var i = 0; i < this.childItems.length; i++) {
159
- if (this.childItems[i] === document.activeElement) {
160
- this.searchIndex = i;
161
- }
162
- }
163
- }
164
- this.keysSoFar += character;
165
- this.clearKeysSoFarAfterDelay();
166
- var nextMatch = this.findMatchInRange(this.childItems, this.searchIndex + 1, this.childItems.length);
167
- if (!nextMatch) {
168
- nextMatch = this.findMatchInRange(this.childItems, 0, this.searchIndex);
169
- }
170
- if (nextMatch) {
171
- this.focusItem(nextMatch);
172
- }
173
- }
174
- clearKeysSoFarAfterDelay() {
175
- if (this.keyClear) {
176
- window.clearTimeout(this.keyClear);
177
- this.keyClear = null;
178
- }
179
- this.keyClear = window.setTimeout(function () {
180
- this.keysSoFar = "";
181
- this.keyClear = null;
182
- }.bind(this), 500);
183
- }
184
- findMatchInRange(list, startIndex, endIndex) {
185
- // Find the first item starting with the keysSoFar substring, searching in
186
- // the specified range of items
187
- for (var n = startIndex; n < endIndex; n++) {
188
- var label = list[n].innerText;
189
- if (label && label.toUpperCase().indexOf(this.keysSoFar) === 0) {
190
- return list[n];
191
- }
192
- }
193
- return null;
194
- }
195
- render() {
196
- return (h(Host, null, h("div", { class: getTextDir() }, h("wm-button", { "button-style": `${this.buttonType}only`, tooltip: this.tooltip, "label-for-identical-buttons": this.labelForIdenticalButtons, icon: this.buttonType === "icon" ? "f1d9" : "", id: `menubtn-${this.uid}`, onClick: () => (this.isExpanded ? this.close() : this.open()), 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), 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) }, h("slot", null)))));
197
- }
198
- get el() { return getElement(this); }
199
- };
200
- ActionMenu.style = wmActionMenuCss;
201
-
202
- export { ActionMenu as wm_action_menu };
@@ -1,148 +0,0 @@
1
- import { r as registerInstance, i as forceUpdate, h, f as Host, g as getElement } from './index-e34aa595.js';
2
- import { g as getIconCodeFromName } from './interfaces-50753346.js';
3
- import { r as adjustTooltipPosition, g as generateId } from './functions-316c1b23.js';
4
-
5
- const wmButtonCss = "@charset \"UTF-8\";:host .wm-button,wm-button .wm-button{-ms-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;width:inherit;border:2px solid #575195;color:#575195;font-size:0.75rem;font-weight:700;height:2.75rem;padding:0 1.3333333333em;cursor:pointer;position:relative;background:#fff;display:flex;justify-content:center;align-items:center;text-decoration:none;text-transform:uppercase;letter-spacing:0.01875rem;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}@media screen and (min-width: 48rem){:host .wm-button,wm-button .wm-button{height:3.3333333333em}}:host .wm-button.nowrap,wm-button .wm-button.nowrap{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .wm-button:focus,wm-button .wm-button:focus{outline:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button::-moz-focus-inner,wm-button .wm-button::-moz-focus-inner{border:0;outline:none}:host .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled):not(.-primary):not(.-secondary):not(.-secondary):not(.-selectoronly) .button-text,wm-button .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled):not(.-primary):not(.-secondary):not(.-secondary):not(.-selectoronly) .button-text{background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled),wm-button .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled){-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark),wm-button .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark){-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark)::-moz-focus-inner,wm-button .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark)::-moz-focus-inner{border:0}:host .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled),wm-button .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled){background:transparent;border:2px solid #fff;color:#fff}:host .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled):hover,wm-button .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled):hover{color:#575195;background:#e6e6e6;border:2px solid #e6e6e6}:host .wm-button.dark.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled).dark,wm-button .wm-button.dark.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled).dark{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;outline:none}:host .wm-button:active:not(:disabled):not(.disabled):not(.-textonly):not(.-actionbutton):not(.displayedoption),wm-button .wm-button:active:not(:disabled):not(.disabled):not(.-textonly):not(.-actionbutton):not(.displayedoption){-ms-transform:scale(0.9, 0.9);-webkit-transform:scale(0.9, 0.9);-moz-transform:scale(0.9, 0.9);transform:scale(0.9, 0.9)}:host .wm-button:hover,wm-button .wm-button:hover{background:#464177;color:#fff}:host .wm-button .mdi,wm-button .wm-button .mdi{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host .wm-button:not(.-icononly):not(.-navigational) .mdi,wm-button .wm-button:not(.-icononly):not(.-navigational) .mdi{margin-right:0.3125rem}:host .wm-button[dir=RTL] :not(.-icononly) .mdi,wm-button .wm-button[dir=RTL] :not(.-icononly) .mdi{margin-left:0.3125rem;margin-right:0}:host .wm-button.-primary:not(.-textonly),wm-button .wm-button.-primary:not(.-textonly){background:#575195;color:#fff}:host .wm-button.-primary:not(.-textonly):not(:focus),wm-button .wm-button.-primary:not(.-textonly):not(:focus){-webkit-box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2)}:host .wm-button.-primary:not(.-textonly):hover,wm-button .wm-button.-primary:not(.-textonly):hover{background:#464177}:host .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled),wm-button .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled){color:#575195;background:#fff;border:2px solid #fff}:host .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled):hover,wm-button .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled):hover{color:#575195;background:#e6e6e6;border:2px solid #e6e6e6}:host .wm-button.-textonly,wm-button .wm-button.-textonly{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;display:inline-block;letter-spacing:0;text-transform:none;text-align:initial;font-size:0.875rem;border:none;background:transparent;padding-left:0;padding-right:0;height:auto;border-radius:0;line-height:1}:host .wm-button.-textonly+.-textonly,wm-button .wm-button.-textonly+.-textonly{margin-left:0.3125rem}:host .wm-button.-textonly:focus,wm-button .wm-button.-textonly:focus{outline:none}:host .wm-button.-textonly::-moz-focus-inner,wm-button .wm-button.-textonly::-moz-focus-inner{border:0;outline:none}:host .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled) .button-text,wm-button .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled) .button-text{background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled).dark .button-text,wm-button .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled).dark .button-text{background:linear-gradient(90deg, #fff 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.-textonly.small,wm-button .wm-button.-textonly.small{font-size:0.625rem}:host .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete),wm-button .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete){text-decoration:underline;color:#454077}:host .wm-button.-textonly.-permanentlydelete,wm-button .wm-button.-textonly.-permanentlydelete{color:#c0392b}:host .wm-button.-textonly.-permanentlydelete:hover,wm-button .wm-button.-textonly.-permanentlydelete:hover{text-decoration:underline;color:#c0392b !important}:host .wm-button.-textonly.dark,wm-button .wm-button.-textonly.dark{color:#fff}:host .wm-button.-textonly.dark:hover,wm-button .wm-button.-textonly.dark:hover{text-decoration:underline;color:#fff !important}:host .wm-button.-icononly,wm-button .wm-button.-icononly,:host .wm-button.-navigational,wm-button .wm-button.-navigational{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;font-size:1rem;padding:0;height:auto;line-height:1;min-width:2.75rem;min-height:2.75rem;text-align:center;letter-spacing:normal}:host .wm-button.-icononly:not(:focus),wm-button .wm-button.-icononly:not(:focus),:host .wm-button.-navigational:not(:focus),wm-button .wm-button.-navigational:not(:focus){-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}@media screen and (min-width: 48rem){:host .wm-button.-icononly,wm-button .wm-button.-icononly,:host .wm-button.-navigational,wm-button .wm-button.-navigational{min-width:2.5rem;min-height:2.5rem}}:host .wm-button.-icononly,wm-button .wm-button.-icononly{border-width:1px !important}:host .wm-button.-icononly:before,wm-button .wm-button.-icononly:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host .wm-button.-navigational,wm-button .wm-button.-navigational{border:none !important;background-color:transparent}:host .wm-button.-navigational:not(.dark):not(:disabled),wm-button .wm-button.-navigational:not(.dark):not(:disabled){color:#575195}:host .wm-button.-navigational:not(.dark):not(:disabled):hover,wm-button .wm-button.-navigational:not(.dark):not(:disabled):hover,:host .wm-button.-navigational:not(.dark):not(:disabled).selected,wm-button .wm-button.-navigational:not(.dark):not(:disabled).selected{background-color:#d7d6d9}:host .wm-button.-navigational:before,wm-button .wm-button.-navigational:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host .wm-button.-permanentlydelete:not(.-textonly),wm-button .wm-button.-permanentlydelete:not(.-textonly){background:#c0392b;border-color:#c0392b;color:#fff}:host .wm-button.-selectoronly,wm-button .wm-button.-selectoronly{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;display:block;background:transparent;border:1px solid #575195;border-radius:3px 3px 3px 3px;height:2.75rem;min-width:11.4375rem;padding:0 1.875rem 0 0.9375rem;line-height:normal;font-family:inherit;color:#575195;font-weight:500;font-size:0.875rem;text-transform:none;letter-spacing:0.01875rem;text-align:left}@media screen and (min-width: 48rem){:host .wm-button.-selectoronly,wm-button .wm-button.-selectoronly{height:2.5rem}}:host .wm-button.-selectoronly:before,wm-button .wm-button.-selectoronly:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\";position:absolute;right:0.5625rem;top:50%;transform:translateY(-50%);pointer-events:none}:host .wm-button.-selectoronly:hover:not(:disabled):not(.disabled),wm-button .wm-button.-selectoronly:hover:not(:disabled):not(.disabled){background:transparent;text-decoration:none}:host .wm-button.-selectoronly:active,wm-button .wm-button.-selectoronly:active{-ms-transform:scale(1, 1) !important;transform:scale(1, 1) !important}:host .wm-button.-selectoronly::-moz-focus-inner,wm-button .wm-button.-selectoronly::-moz-focus-inner{border:0}:host .wm-button.-selectoronly .overflowcontrol,wm-button .wm-button.-selectoronly .overflowcontrol{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:visible}:host .wm-button:disabled,wm-button .wm-button:disabled,:host .wm-button.disabled,wm-button .wm-button.disabled{background:inherit;border-color:#737373;color:#737373;cursor:default;pointer-events:none}:host .wm-button:disabled.dark,wm-button .wm-button:disabled.dark,:host .wm-button.disabled.dark,wm-button .wm-button.disabled.dark{color:#a6a6a6;border-color:#a6a6a6}:host .wm-button:disabled.-primary,wm-button .wm-button:disabled.-primary,:host .wm-button:disabled.-permanentlydelete,wm-button .wm-button:disabled.-permanentlydelete,:host .wm-button.disabled.-primary,wm-button .wm-button.disabled.-primary,:host .wm-button.disabled.-permanentlydelete,wm-button .wm-button.disabled.-permanentlydelete{background:#737373;color:#fff;border-color:#737373}:host .wm-button:disabled.-primary.dark,wm-button .wm-button:disabled.-primary.dark,:host .wm-button.disabled.-primary.dark,wm-button .wm-button.disabled.-primary.dark{background:#a6a6a6;border-color:#a6a6a6;color:#353b48}:host .wm-button:disabled.-secondary,wm-button .wm-button:disabled.-secondary,:host .wm-button.disabled.-secondary,wm-button .wm-button.disabled.-secondary{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button:disabled.-selectoronly,wm-button .wm-button:disabled.-selectoronly,:host .wm-button.disabled.-selectoronly,wm-button .wm-button.disabled.-selectoronly{color:#737373}:host .wm-button:disabled.-textonly,wm-button .wm-button:disabled.-textonly,:host .wm-button.disabled.-textonly,wm-button .wm-button.disabled.-textonly{color:#6b6b6b;background:transparent}:host a.wm-button,wm-button a.wm-button,:host label.wm-button,wm-button label.wm-button{height:auto;padding-top:0.75rem;padding-bottom:0.75rem}:host([disabled]),:host(.button-disabled){pointer-events:none}:host,wm-button{display:inline-block;position:relative;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .sr-only,wm-button .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .tooltip,wm-button .tooltip{position:absolute;overflow:hidden;pointer-events:none;line-height:normal;font-family:inherit;font-size:0.875rem;text-transform:none;font-weight:normal;background:black;color:#fff;z-index:999999999;white-space:nowrap;opacity:1;transition:opacity 500ms 500ms;padding:0.375rem}:host .tooltip.hidden,wm-button .tooltip.hidden{opacity:0;transition-delay:0s}:host .tooltip.top,wm-button .tooltip.top{right:auto;left:50%;transform:translateX(-50%);bottom:2.9375rem}:host .tooltip.bottom,wm-button .tooltip.bottom{right:auto;left:50%;transform:translateX(-50%);top:2.9375rem}:host .tooltip.left,wm-button .tooltip.left{top:0.375rem;right:3rem}:host .tooltip.right,wm-button .tooltip.right{top:0.375rem;left:3rem}:host .tooltip.bottom-left,wm-button .tooltip.bottom-left{left:auto;right:2.75rem}:host .tooltip.bottom-right,wm-button .tooltip.bottom-right{top:2.75rem;left:2.75rem}:host .tooltip.top-right,wm-button .tooltip.top-right{bottom:2.75rem;left:2.75rem}:host .tooltip.top-left,wm-button .tooltip.top-left{bottom:2.75rem;left:auto;right:2.75rem}";
6
-
7
- const Button = class {
8
- constructor(hostRef) {
9
- registerInstance(this, hostRef);
10
- // icon and tooltip have reflect set to true. Without reflect, the react wrappers don't expose the attribute
11
- // and the component throws errors when they are required (when buttonStyle is icononly or navigational)
12
- this.disabled = false;
13
- this.buttonStyle = "secondary";
14
- this.tooltipPosition = "bottom-right";
15
- this.adjustedTooltipPosition = this.tooltipPosition;
16
- this.permanentlyDelete = false;
17
- this.textWrap = true;
18
- this.isTabbing = false;
19
- this.clickFunc = null;
20
- this.ariaPopup = false;
21
- }
22
- get isTruncated() {
23
- return !!this.buttonEl && this.buttonEl.offsetWidth < this.buttonEl.scrollWidth;
24
- }
25
- toggleTabbingOn() {
26
- this.isTabbing = true;
27
- }
28
- toggleTabbingOff() {
29
- this.isTabbing = false;
30
- }
31
- handleOnClick() {
32
- // remove the onlick function when the component is disabled,
33
- // to handle a bug in Edge 42 where the function would run
34
- this.el.onclick = this.disabled ? null : this.clickFunc;
35
- }
36
- validateStyle(newValue) {
37
- const valid = ["primary", "secondary", "textonly", "icononly", "navigational", "selectoronly"].includes(newValue);
38
- if (!valid) {
39
- this.buttonStyle = "secondary";
40
- }
41
- this.validateIcon();
42
- }
43
- updateIcon() {
44
- this.icon = getIconCodeFromName(this.icon);
45
- }
46
- validateIcon() {
47
- // if the style is icononly or navigational...
48
- if (this.buttonStyle === "icononly" || this.buttonStyle === "navigational") {
49
- // - an icon must be provided
50
- if (!this.icon) {
51
- console.error("wm-button should have a valid 'icon' property when button-style is set to 'icononly' or 'navigational'.");
52
- }
53
- // - if no tooltip text was passed and we couldn't generate one, throw an error
54
- if (!this.tooltip) {
55
- console.error("wm-button should have a valid 'tooltip' property when button-style is set to 'icononly' or 'navigational'.");
56
- }
57
- }
58
- }
59
- handleKeydown(ev) {
60
- switch (ev.key) {
61
- case "Enter":
62
- ev.preventDefault();
63
- if (!this.disabled) {
64
- this.el.click();
65
- }
66
- break;
67
- }
68
- }
69
- componentWillLoad() {
70
- this.validateStyle(this.buttonStyle);
71
- // replacing the prototype's focus event by our own
72
- // to delegate focus to the appropriate el in the shadow root
73
- // we could replace by ShadowRoot.delegatesFocus()
74
- // when there's enough support for it
75
- // @ts-ignore
76
- this.el.focus = function () {
77
- if (!this.disabled) {
78
- this.shadowRoot.querySelector("button").focus();
79
- }
80
- };
81
- if (this.icon) {
82
- this.icon = this.icon = getIconCodeFromName(this.icon);
83
- }
84
- }
85
- componentDidLoad() {
86
- // store a reference of the onclick function if there is one
87
- // so we can remove it when the button is disabled
88
- // (to handle a bug in Edge 42)
89
- if (this.el.onclick) {
90
- this.clickFunc = this.el.onclick;
91
- }
92
- // this.handleOnClick();
93
- if (document.body.classList.contains("wmcl-user-is-tabbing")) {
94
- this.toggleTabbingOn();
95
- }
96
- this.ariaPopup = !!this.el.getAttribute("aria-haspopup");
97
- forceUpdate(this.el); // originally here to renderTooltip(), now necessary to pass text-truncation tooltip test
98
- }
99
- showTooltip() {
100
- // Because a :hover pseudoclass would apply before the tooltip is repositioned, hover styles must be applied through a class
101
- // Otherwise, the tooltip will flash on-screen and possibly create scrollbars
102
- if (!!this.tooltipEl) {
103
- this.adjustedTooltipPosition = adjustTooltipPosition(this.tooltipPosition, this.el, this.tooltipEl);
104
- this.tooltipEl.classList.remove("hidden");
105
- }
106
- }
107
- hideTooltip() {
108
- if (!!this.tooltipEl) {
109
- this.tooltipEl.classList.add("hidden");
110
- }
111
- }
112
- renderTooltip() {
113
- // tooltip is only rendered for icononly and navigational types, or if the button text is truncated
114
- if (this.buttonStyle === "icononly" || this.buttonStyle === "navigational" || this.isTruncated) {
115
- return (h("div", { ref: (el) => (this.tooltipEl = el), "aria-hidden": "true", class: `tooltip hidden ${this.adjustedTooltipPosition}` }, this.isTruncated ? this.el.textContent : this.tooltip));
116
- }
117
- }
118
- getClasses() {
119
- let classes = "wm-button";
120
- classes += this.permanentlyDelete ? " -permanentlydelete" : "";
121
- classes += this.buttonStyle ? " -" + this.buttonStyle : " -secondary";
122
- classes += this.textWrap ? "" : " nowrap";
123
- classes += this.isTabbing ? " user-is-tabbing" : "";
124
- classes += this.isTruncated ? " -truncated" : "";
125
- classes += this.customBackground === "dark" ? " dark" : "";
126
- return classes;
127
- }
128
- getAriaLabel() {
129
- if (this.buttonStyle === "icononly" || this.buttonStyle === "navigational") {
130
- return this.labelForIdenticalButtons ? this.labelForIdenticalButtons : this.tooltip;
131
- }
132
- if (this.labelForIdenticalButtons) {
133
- return this.labelForIdenticalButtons;
134
- }
135
- }
136
- render() {
137
- return (h(Host, { class: this.disabled ? "button-disabled" : "" }, h("button", { id: generateId(), class: `${this.getClasses()}`, disabled: this.disabled, ref: (el) => (this.buttonEl = el), "aria-label": this.getAriaLabel(), "aria-hasPopup": this.ariaPopup ? "menu" : null, onMouseEnter: () => this.showTooltip(), onMouseLeave: () => this.hideTooltip(), onFocus: () => this.showTooltip(), onBlur: () => this.hideTooltip(), onClick: () => this.hideTooltip() }, this.icon && (h("span", { class: "mdi", style: this.iconSize ? { fontSize: this.iconSize } : {} }, String.fromCodePoint(parseInt(`0x${this.icon}`)))), h("span", { class: "button-text" }, h("slot", null))), this.renderTooltip()));
138
- }
139
- get el() { return getElement(this); }
140
- static get watchers() { return {
141
- "disabled": ["handleOnClick"],
142
- "buttonStyle": ["validateStyle"],
143
- "icon": ["updateIcon"]
144
- }; }
145
- };
146
- Button.style = wmButtonCss;
147
-
148
- export { Button as wm_button };
@@ -1,18 +0,0 @@
1
- import { r as registerInstance, e as createEvent } from './index-e34aa595.js';
2
-
3
- const ChartSlice = class {
4
- constructor(hostRef) {
5
- registerInstance(this, hostRef);
6
- this.wmChartSliceUpdated = createEvent(this, "wmChartSliceUpdated", 7);
7
- }
8
- componentDidLoad() {
9
- if (parseInt(this.amount) > 0 && !this.legend) {
10
- throw new Error("wm-chart-slice was provided an amount value without a legend. The legend is required unless the amount is 0 or left empty. For more information see https://components.watermarkinsights.com/chart");
11
- }
12
- }
13
- componentDidUpdate() {
14
- this.wmChartSliceUpdated.emit();
15
- }
16
- };
17
-
18
- export { ChartSlice as wm_chart_slice };