@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.
- package/dist/cjs/{global-ccb9500c.js → global-1e540de6.js} +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/priv-datepicker.cjs.entry.js +1 -1
- package/dist/cjs/ripple.cjs.js +2 -2
- package/dist/cjs/wm-datepicker.cjs.entry.js +25 -30
- package/dist/collection/components/wm-datepicker/priv-datepicker/priv-datepicker.css +9 -0
- package/dist/collection/components/wm-datepicker/wm-datepicker.js +26 -32
- package/dist/esm/{global-4f914bb2.js → global-d6b49e98.js} +1 -1
- package/dist/esm/loader.js +2 -2
- package/dist/esm/priv-datepicker.entry.js +1 -1
- package/dist/esm/ripple.js +2 -2
- package/dist/esm/wm-datepicker.entry.js +25 -30
- package/dist/ripple/p-129d94fa.entry.js +1 -0
- package/dist/ripple/{p-454ad552.entry.js → p-c0fe5201.entry.js} +1 -1
- package/dist/ripple/{p-69a73e86.js → p-e3843249.js} +1 -1
- package/dist/ripple/ripple.esm.js +1 -1
- package/dist/types/components/wm-datepicker/wm-datepicker.d.ts +3 -3
- package/package.json +1 -1
- package/dist/cjs/app-globals-a07327ae.js +0 -47
- package/dist/cjs/css-shim-a7379e2b.js +0 -6
- package/dist/cjs/dom-3e7d9c3b.js +0 -75
- package/dist/cjs/functions-65513c61.js +0 -8360
- package/dist/cjs/global-06317e3f.js +0 -36
- package/dist/cjs/global-f6930bb0.js +0 -38
- package/dist/cjs/index-8dea8c13.js +0 -2976
- package/dist/cjs/shadow-css-09555044.js +0 -391
- package/dist/esm/app-globals-f62991a4.js +0 -45
- package/dist/esm/css-shim-bbdf0cc6.js +0 -4
- package/dist/esm/dom-1f98a75f.js +0 -73
- package/dist/esm/functions-316c1b23.js +0 -8340
- package/dist/esm/global-03372f70.js +0 -34
- package/dist/esm/global-fedbc323.js +0 -36
- package/dist/esm/index-e34aa595.js +0 -2938
- package/dist/esm/shadow-css-67b66845.js +0 -389
- package/dist/ripple/app-globals-b5693c90.js +0 -45
- package/dist/ripple/app-globals-d72c2d3c.js +0 -45
- package/dist/ripple/app-globals-f62991a4.js +0 -45
- package/dist/ripple/css-shim-bbdf0cc6.js +0 -4
- package/dist/ripple/dom-1f98a75f.js +0 -73
- package/dist/ripple/functions-316c1b23.js +0 -8340
- package/dist/ripple/http-service-5d037e16.js +0 -52
- package/dist/ripple/index-20b65f86.js +0 -2938
- package/dist/ripple/index-e34aa595.js +0 -2938
- package/dist/ripple/interfaces-50753346.js +0 -51
- package/dist/ripple/p-0c2498f4.js +0 -1
- package/dist/ripple/p-42ca2e15.entry.js +0 -1
- package/dist/ripple/p-e91befe3.js +0 -1
- package/dist/ripple/priv-chart-popover.entry.js +0 -85
- package/dist/ripple/priv-datepicker.entry.js +0 -668
- package/dist/ripple/priv-navigator-button.entry.js +0 -25
- package/dist/ripple/priv-navigator-item.entry.js +0 -30
- package/dist/ripple/ripple.css +0 -84
- package/dist/ripple/shadow-css-67b66845.js +0 -389
- package/dist/ripple/wm-action-menu.entry.js +0 -202
- package/dist/ripple/wm-button.entry.js +0 -148
- package/dist/ripple/wm-chart-slice.entry.js +0 -18
- package/dist/ripple/wm-chart.entry.js +0 -504
- package/dist/ripple/wm-datepicker.entry.js +0 -258
- package/dist/ripple/wm-input.entry.js +0 -106
- package/dist/ripple/wm-menuitem.entry.js +0 -114
- package/dist/ripple/wm-modal-footer.entry.js +0 -39
- package/dist/ripple/wm-modal-header.entry.js +0 -41
- package/dist/ripple/wm-modal.entry.js +0 -145
- package/dist/ripple/wm-navigator.entry.js +0 -275
- package/dist/ripple/wm-network-uploader.entry.js +0 -427
- package/dist/ripple/wm-option.entry.js +0 -119
- package/dist/ripple/wm-pagination.entry.js +0 -172
- package/dist/ripple/wm-search.entry.js +0 -227
- package/dist/ripple/wm-select.entry.js +0 -362
- package/dist/ripple/wm-snackbar.entry.js +0 -156
- package/dist/ripple/wm-tab-item.entry.js +0 -78
- package/dist/ripple/wm-tab-list.entry.js +0 -201
- package/dist/ripple/wm-tab-panel.entry.js +0 -38
- package/dist/ripple/wm-tag-input.entry.js +0 -534
- package/dist/ripple/wm-timepicker.entry.js +0 -382
- package/dist/ripple/wm-toggletip.entry.js +0 -124
- package/dist/ripple/wm-uploader.entry.js +0 -338
- package/dist/ripple/wm-wrapper.entry.js +0 -17
- package/dist/types/components/wm-tag-input/wm-tag-input.d.ts~ds312_tagInputMaxTags +0 -87
- package/dist/types/components.d.ts~ds312_tagInputMaxTags +0 -879
- 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 };
|