@watermarkinsights/ripple 5.3.0-1 → 5.3.0-2
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-b5387be9.js → global-6b1a23e9.js} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/ripple.cjs.js +1 -1
- package/dist/cjs/wm-snackbar.cjs.entry.js +48 -46
- package/dist/collection/components/wm-snackbar/wm-snackbar.css +37 -43
- package/dist/collection/components/wm-snackbar/wm-snackbar.js +48 -46
- package/dist/collection/dev/snackbar.js +10 -9
- package/dist/esm/{global-01680477.js → global-b3bbb95e.js} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/ripple.js +1 -1
- package/dist/esm/wm-snackbar.entry.js +49 -47
- package/dist/esm-es5/{global-01680477.js → global-b3bbb95e.js} +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/ripple.js +1 -1
- package/dist/esm-es5/wm-snackbar.entry.js +1 -1
- package/dist/ripple/{p-b9ba6546.system.js → p-6dc3ee86.system.js} +1 -1
- package/dist/ripple/p-d325a37b.entry.js +1 -0
- package/dist/ripple/p-d7c47dc0.system.entry.js +1 -0
- package/dist/ripple/{p-8fafbba1.js → p-d88d806e.js} +1 -1
- package/dist/ripple/{p-bbdfb1ec.system.js → p-eb649319.system.js} +1 -1
- package/dist/ripple/ripple.esm.js +1 -1
- package/dist/ripple/ripple.js +1 -1
- package/dist/types/components/wm-snackbar/wm-snackbar.d.ts +5 -4
- package/package.json +1 -1
- package/dist/ripple/p-1cb98f64.entry.js +0 -1
- package/dist/ripple/p-4ed2e910.system.entry.js +0 -1
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-f8ef86de.js');
|
|
6
|
-
require('./global-
|
|
6
|
+
require('./global-6b1a23e9.js');
|
|
7
7
|
|
|
8
8
|
const defineCustomElements = (win, options) => {
|
|
9
9
|
if (typeof window === 'undefined') return undefined;
|
package/dist/cjs/ripple.cjs.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-f8ef86de.js');
|
|
6
|
-
require('./global-
|
|
6
|
+
require('./global-6b1a23e9.js');
|
|
7
7
|
|
|
8
8
|
/*
|
|
9
9
|
Stencil Client Patch Browser v4.8.2 | MIT Licensed | https://stenciljs.com
|
|
@@ -6,7 +6,7 @@ const index = require('./index-f8ef86de.js');
|
|
|
6
6
|
const functions = require('./functions-be4156cf.js');
|
|
7
7
|
const intl = require('./intl-a13884e8.js');
|
|
8
8
|
|
|
9
|
-
const wmSnackbarCss = ":host{--wmcolor-snackbar-background:var(--wmcolor-background-dark);--wmcolor-snackbar-close-background-hover:var(--wmcolor-button-background-navigational-hover-ondark);--wmcolor-snackbar-close-background:var(--wmcolor-button-background-navigational-ondark);--wmcolor-snackbar-close-icon-hover:var(--wmcolor-button-icon-navigational-hover-ondark);--wmcolor-snackbar-close-icon:var(--wmcolor-button-icon-navigational-ondark);--wmcolor-snackbar-text:var(--wmcolor-text-ondark)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box;margin:unset}:host .
|
|
9
|
+
const wmSnackbarCss = ":host{--wmcolor-snackbar-background:var(--wmcolor-background-dark);--wmcolor-snackbar-close-background-hover:var(--wmcolor-button-background-navigational-hover-ondark);--wmcolor-snackbar-close-background:var(--wmcolor-button-background-navigational-ondark);--wmcolor-snackbar-close-icon-hover:var(--wmcolor-button-icon-navigational-hover-ondark);--wmcolor-snackbar-close-icon:var(--wmcolor-button-icon-navigational-ondark);--wmcolor-snackbar-text:var(--wmcolor-text-ondark);position:fixed;bottom:0;left:1.25rem;right:1.25rem;z-index:2001}:host *{-webkit-box-sizing:border-box;box-sizing:border-box;margin:unset}:host .list-wrapper{-webkit-overflow-scrolling:touch;max-width:35.5rem;max-height:17.5rem;overflow:auto;padding:0.25rem 0.625rem 1.875rem;display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse;gap:1.25rem}:host .wm-snack-wrapper{width:100%;height:100%}:host .wm-snack-wrapper .wm-snackbar{-webkit-box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-ms-transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);-webkit-transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);-moz-transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);font-size:0.875rem;color:var(--wmcolor-snackbar-text);padding:4px 16px;min-height:3.75rem;background:var(--wmcolor-snackbar-background);opacity:0;left:0;position:relative;font-family:inherit}:host .wm-snack-wrapper .wm-snackbar.grow{-webkit-animation:grow 0.25s;animation:grow 0.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes grow{0%{opacity:0;-webkit-transform:scale(0.9);transform:scale(0.9)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes grow{0%{opacity:0;-webkit-transform:scale(0.9);transform:scale(0.9)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}:host .wm-snack-wrapper .wm-snackbar .link{letter-spacing:0;text-transform:none;font-size:0.875rem;border:none;padding-left:0;padding-right:0;height:auto;border-radius:0;line-height:1;margin-right:1rem;text-decoration:none;font-weight:600;cursor:pointer}:host .wm-snack-wrapper .wm-snackbar .link.new-window::after{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;display:inline;content:\"\\f3cc\";margin-left:0.25rem}:host .wm-snack-wrapper .wm-snackbar .link:hover{text-decoration:underline}:host .wm-snack-wrapper .wm-snackbar .link:focus{outline:none;border:none}:host .wm-snack-wrapper .wm-snackbar .link::-moz-focus-inner{border:0;outline:none}:host .wm-snack-wrapper .wm-snackbar:not(:last-child){margin-bottom:1.25rem}:host .wm-snack-wrapper .wm-snackbar.active:not(button){opacity:1}:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:100%;position:relative;padding:0}:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:12px;width:100%;-ms-flex-align:center;align-items:center}:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext .msg{display:block;-ms-flex:0 0 0px;flex:0 0 0;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext .msg.long{min-width:216px;-ms-flex:1 0 0px;flex:1 0 0}:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext .link{display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto}:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext .link span{display:block;white-space:nowrap}:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;background-color:var(--wmcolor-snackbar-close-background);color:var(--wmcolor-snackbar-close-icon);cursor:pointer;border:none;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-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack: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:\"\\f156\";font-size:1.12rem}:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover{background-color:var(--wmcolor-snackbar-close-background-hover);color:var(--wmcolor-snackbar-close-icon-hover)}:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus{outline:none}:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack::-moz-focus-inner{border:0;outline:none}:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:active{-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-snack-wrapper .wm-snackbar .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;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important;top:0;left:0}: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;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important;top:0;left:0}.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active){outline:3px solid var(--wmcolor-interactive-focus);outline-offset:0}.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active)>.tooltip{clip:auto;width:auto;height:auto;opacity:1;-webkit-transition:opacity 500ms 500ms;transition:opacity 500ms 500ms;padding:0.375rem;top:2.75rem;left:2.75rem;white-space:nowrap;-webkit-transform:translateX(-50%);transform:translateX(-50%)}@media screen and (min-width: 48rem){.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active)>.tooltip{top:2.0625rem;left:auto}}.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .link:focus:not(:active){outline:3px solid var(--wmcolor-interactive-focus);outline-offset:2px}";
|
|
10
10
|
|
|
11
11
|
const Snackbar = class {
|
|
12
12
|
constructor(hostRef) {
|
|
@@ -21,28 +21,16 @@ const Snackbar = class {
|
|
|
21
21
|
this.isTabbing = false;
|
|
22
22
|
this.announcement = "";
|
|
23
23
|
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
const updatedNotification = this.parsedNotifications.filter((n) => n.id == updatedID)[0];
|
|
35
|
-
const notifEl = this.el.shadowRoot.querySelector(`#snack-${updatedID}`);
|
|
36
|
-
if (notifEl) {
|
|
37
|
-
notifEl.classList.remove("grow");
|
|
38
|
-
window.requestAnimationFrame(() => {
|
|
39
|
-
notifEl.classList.add("grow");
|
|
40
|
-
});
|
|
41
|
-
}
|
|
42
|
-
this.stopTimer(updatedNotification);
|
|
43
|
-
const newTimer = window.setTimeout(() => this.snackExpired(updatedNotification.id), 6000);
|
|
44
|
-
this.timers = Object.assign({ [updatedNotification.id]: newTimer }, this.timers);
|
|
45
|
-
});
|
|
24
|
+
componentDidLoad() {
|
|
25
|
+
const snackObserver = new MutationObserver((snackMutations) => snackMutations.forEach((mutationRecord) => this.handleSnackMutation(mutationRecord)));
|
|
26
|
+
snackObserver.observe(this.snackAreaEl, { childList: true });
|
|
27
|
+
}
|
|
28
|
+
handleSnackMutation(mutationRecord) {
|
|
29
|
+
const addedSnacks = Array.from(mutationRecord.addedNodes);
|
|
30
|
+
if (addedSnacks.length > 0) {
|
|
31
|
+
addedSnacks.forEach((s) => s.querySelector(".wm-snackbar").classList.add("grow"));
|
|
32
|
+
addedSnacks[0].scrollIntoView();
|
|
33
|
+
}
|
|
46
34
|
}
|
|
47
35
|
updateSnacks(newValue) {
|
|
48
36
|
const prevParsedNotifications = [...this.parsedNotifications];
|
|
@@ -64,23 +52,38 @@ const Snackbar = class {
|
|
|
64
52
|
});
|
|
65
53
|
}
|
|
66
54
|
}
|
|
67
|
-
this.
|
|
55
|
+
this.setMinWidths();
|
|
68
56
|
}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
57
|
+
refreshUpdatedNotifications(prevNotifications) {
|
|
58
|
+
let updatedNotifications = [];
|
|
59
|
+
prevNotifications.forEach((prevNotification) => {
|
|
60
|
+
this.parsedNotifications.forEach((newNotification) => {
|
|
61
|
+
if (newNotification.id == prevNotification.id && newNotification.message != prevNotification.message) {
|
|
62
|
+
updatedNotifications.push(newNotification);
|
|
63
|
+
}
|
|
64
|
+
});
|
|
65
|
+
});
|
|
66
|
+
updatedNotifications.forEach((updatedNotification) => {
|
|
67
|
+
const notifEl = this.el.shadowRoot.querySelector(`#snack-${updatedNotification.id}`);
|
|
68
|
+
if (notifEl) {
|
|
69
|
+
notifEl.classList.remove("grow");
|
|
70
|
+
window.requestAnimationFrame(() => notifEl.classList.add("grow"));
|
|
71
|
+
}
|
|
72
|
+
this.stopTimer(updatedNotification);
|
|
73
|
+
const newTimer = window.setTimeout(() => this.snackExpired(updatedNotification.id), 6000);
|
|
74
|
+
this.timers = Object.assign({ [updatedNotification.id]: newTimer }, this.timers);
|
|
75
|
+
this.announce(`${updatedNotification.message} ${this.isTabbing ? "" : updatedNotification.link}`);
|
|
76
|
+
});
|
|
74
77
|
}
|
|
75
78
|
checkForTabbing(ev) {
|
|
76
79
|
if (ev.key === "Tab") {
|
|
77
|
-
this.
|
|
80
|
+
this.isTabbing = true;
|
|
78
81
|
}
|
|
79
82
|
}
|
|
80
83
|
// Workaround for screenreader's triggering click event on "enter"
|
|
81
84
|
// This is why we manually handle this.isTabbing instead of listening to wmUserIsTabbing
|
|
82
85
|
handleMouse() {
|
|
83
|
-
this.
|
|
86
|
+
this.isTabbing = false;
|
|
84
87
|
}
|
|
85
88
|
snackDismissed(notification) {
|
|
86
89
|
this.endSnack(notification);
|
|
@@ -92,9 +95,9 @@ const Snackbar = class {
|
|
|
92
95
|
}
|
|
93
96
|
//Remove snack from notification list once timer runs out
|
|
94
97
|
snackExpired(expiredID) {
|
|
95
|
-
const
|
|
96
|
-
if (
|
|
97
|
-
this.endSnack(
|
|
98
|
+
const expiredNotification = this.parsedNotifications.find((n) => n.id == expiredID);
|
|
99
|
+
if (expiredNotification) {
|
|
100
|
+
this.endSnack(expiredNotification);
|
|
98
101
|
}
|
|
99
102
|
}
|
|
100
103
|
endSnack(notification) {
|
|
@@ -124,13 +127,7 @@ const Snackbar = class {
|
|
|
124
127
|
delete this.timers[notification.id];
|
|
125
128
|
}
|
|
126
129
|
}
|
|
127
|
-
|
|
128
|
-
if (this.liveRegionEl.textContent === message) {
|
|
129
|
-
message += "\u00A0";
|
|
130
|
-
}
|
|
131
|
-
this.announcement = message;
|
|
132
|
-
}
|
|
133
|
-
sizeMessage() {
|
|
130
|
+
setMinWidths() {
|
|
134
131
|
// wait for render to get updated scrollWidth
|
|
135
132
|
requestAnimationFrame(() => {
|
|
136
133
|
const msgEls = this.el.shadowRoot.querySelectorAll(".msg");
|
|
@@ -142,17 +139,22 @@ const Snackbar = class {
|
|
|
142
139
|
});
|
|
143
140
|
});
|
|
144
141
|
}
|
|
142
|
+
announce(message) {
|
|
143
|
+
if (this.liveRegionEl.textContent === message) {
|
|
144
|
+
message += "\u00A0";
|
|
145
|
+
}
|
|
146
|
+
this.announcement = message;
|
|
147
|
+
}
|
|
145
148
|
renderSnackbars() {
|
|
146
|
-
return this.parsedNotifications.map((notification) => (index.h("div", { class: "wm-snack-wrapper" }, index.h("div", { id: `snack-${notification.id}`, class: "wm-snackbar active neutral
|
|
149
|
+
return [...this.parsedNotifications].reverse().map((notification) => (index.h("div", { class: "wm-snack-wrapper" }, index.h("div", { id: `snack-${notification.id}`, class: "wm-snackbar active neutral" }, index.h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) }), index.h("div", { class: "wm-snackbarmsg" }, index.h("div", { class: "msgtext" }, index.h("span", { class: "msg" }, notification.message), notification.link && (index.h("a", { id: `action-${notification.id}`, class: `link ${notification.newWindow ? "new-window" : ""}`, "aria-label": `Click to ${notification.link}...${notification.newWindow ? " " + intl.globalMessages.newWindow : ""}`, tabindex: 0, onClick: () => {
|
|
147
150
|
this.snackLinkClicked(notification);
|
|
148
151
|
}, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, index.h("span", { "aria-hidden": "true" }, notification.link)))), index.h("button", { id: `close-button-${notification.id}`, "aria-label": "Close this notification", class: "closesnack", tabindex: notification.link ? 0 : -1, onClick: () => this.snackDismissed(notification), onMouseEnter: (ev) => functions.showTooltip("bottom", ev.target, intl.globalMessages.close), onMouseLeave: () => functions.hideTooltip(), onFocus: (ev) => this.isTabbing && functions.showTooltip("bottom", ev.target, intl.globalMessages.close), onBlur: () => functions.hideTooltip() })), index.h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
|
|
149
152
|
}
|
|
150
153
|
render() {
|
|
151
|
-
return (index.h("div", { class: {
|
|
152
|
-
"
|
|
153
|
-
empty: this.parsedNotifications.length === 0,
|
|
154
|
+
return (index.h(index.Host, null, index.h("div", { ref: (el) => (this.snackAreaEl = el), class: {
|
|
155
|
+
"list-wrapper": true,
|
|
154
156
|
"user-is-tabbing": this.isTabbing,
|
|
155
|
-
} }, index.h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)
|
|
157
|
+
} }, this.renderSnackbars()), index.h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
|
|
156
158
|
}
|
|
157
159
|
get el() { return index.getElement(this); }
|
|
158
160
|
static get watchers() { return {
|
|
@@ -36,39 +36,31 @@
|
|
|
36
36
|
--wmcolor-snackbar-close-icon-hover: var(--wmcolor-button-icon-navigational-hover-ondark);
|
|
37
37
|
--wmcolor-snackbar-close-icon: var(--wmcolor-button-icon-navigational-ondark);
|
|
38
38
|
--wmcolor-snackbar-text: var(--wmcolor-text-ondark);
|
|
39
|
-
}
|
|
40
|
-
:host * {
|
|
41
|
-
box-sizing: border-box;
|
|
42
|
-
margin: unset;
|
|
43
|
-
}
|
|
44
|
-
:host .wm-snackbars {
|
|
45
39
|
position: fixed;
|
|
46
40
|
bottom: 0;
|
|
47
41
|
left: 1.25rem;
|
|
48
42
|
right: 1.25rem;
|
|
49
|
-
padding: 0.25rem 0.625rem 1.875rem;
|
|
50
43
|
z-index: 2001;
|
|
44
|
+
}
|
|
45
|
+
:host * {
|
|
46
|
+
box-sizing: border-box;
|
|
47
|
+
margin: unset;
|
|
48
|
+
}
|
|
49
|
+
:host .list-wrapper {
|
|
50
|
+
-webkit-overflow-scrolling: touch;
|
|
51
51
|
max-width: 35.5rem;
|
|
52
52
|
max-height: 17.5rem;
|
|
53
|
-
-webkit-overflow-scrolling: touch;
|
|
54
53
|
overflow: auto;
|
|
54
|
+
padding: 0.25rem 0.625rem 1.875rem;
|
|
55
|
+
display: flex;
|
|
56
|
+
flex-direction: column-reverse;
|
|
57
|
+
gap: 1.25rem;
|
|
55
58
|
}
|
|
56
|
-
:host .wm-
|
|
57
|
-
-ms-transition: all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);
|
|
58
|
-
-webkit-transition: all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);
|
|
59
|
-
-moz-transition: all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);
|
|
60
|
-
transition: all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);
|
|
61
|
-
padding-top: 0;
|
|
62
|
-
padding-bottom: 0;
|
|
63
|
-
}
|
|
64
|
-
:host .wm-snackbars .wm-snack-wrapper {
|
|
59
|
+
:host .wm-snack-wrapper {
|
|
65
60
|
width: 100%;
|
|
66
61
|
height: 100%;
|
|
67
62
|
}
|
|
68
|
-
:host .wm-
|
|
69
|
-
margin-bottom: 1.25rem;
|
|
70
|
-
}
|
|
71
|
-
:host .wm-snackbars .wm-snack-wrapper .wm-snackbar {
|
|
63
|
+
:host .wm-snack-wrapper .wm-snackbar {
|
|
72
64
|
-webkit-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);
|
|
73
65
|
-moz-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);
|
|
74
66
|
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);
|
|
@@ -86,15 +78,17 @@
|
|
|
86
78
|
transition: all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);
|
|
87
79
|
font-size: 0.875rem;
|
|
88
80
|
color: var(--wmcolor-snackbar-text);
|
|
89
|
-
padding:
|
|
81
|
+
padding: 4px 16px;
|
|
82
|
+
min-height: 3.75rem;
|
|
90
83
|
background: var(--wmcolor-snackbar-background);
|
|
91
84
|
opacity: 0;
|
|
92
85
|
left: 0;
|
|
93
86
|
position: relative;
|
|
94
87
|
font-family: inherit;
|
|
95
88
|
}
|
|
96
|
-
:host .wm-
|
|
89
|
+
:host .wm-snack-wrapper .wm-snackbar.grow {
|
|
97
90
|
animation: grow 0.25s;
|
|
91
|
+
animation-fill-mode: forwards;
|
|
98
92
|
animation-timing-function: ease-in-out;
|
|
99
93
|
}
|
|
100
94
|
@keyframes grow {
|
|
@@ -107,7 +101,7 @@
|
|
|
107
101
|
transform: scale(1);
|
|
108
102
|
}
|
|
109
103
|
}
|
|
110
|
-
:host .wm-
|
|
104
|
+
:host .wm-snack-wrapper .wm-snackbar .link {
|
|
111
105
|
letter-spacing: 0;
|
|
112
106
|
text-transform: none;
|
|
113
107
|
font-size: 0.875rem;
|
|
@@ -122,7 +116,7 @@
|
|
|
122
116
|
font-weight: 600;
|
|
123
117
|
cursor: pointer;
|
|
124
118
|
}
|
|
125
|
-
:host .wm-
|
|
119
|
+
:host .wm-snack-wrapper .wm-snackbar .link.new-window::after {
|
|
126
120
|
display: inline-block;
|
|
127
121
|
font: normal normal normal 24px/1 "Material Design Icons";
|
|
128
122
|
font-size: inherit;
|
|
@@ -134,24 +128,24 @@
|
|
|
134
128
|
content: "\f3cc";
|
|
135
129
|
margin-left: 0.25rem;
|
|
136
130
|
}
|
|
137
|
-
:host .wm-
|
|
131
|
+
:host .wm-snack-wrapper .wm-snackbar .link:hover {
|
|
138
132
|
text-decoration: underline;
|
|
139
133
|
}
|
|
140
|
-
:host .wm-
|
|
134
|
+
:host .wm-snack-wrapper .wm-snackbar .link:focus {
|
|
141
135
|
outline: none;
|
|
142
136
|
border: none;
|
|
143
137
|
}
|
|
144
|
-
:host .wm-
|
|
138
|
+
:host .wm-snack-wrapper .wm-snackbar .link::-moz-focus-inner {
|
|
145
139
|
border: 0;
|
|
146
140
|
outline: none;
|
|
147
141
|
}
|
|
148
|
-
:host .wm-
|
|
142
|
+
:host .wm-snack-wrapper .wm-snackbar:not(:last-child) {
|
|
149
143
|
margin-bottom: 1.25rem;
|
|
150
144
|
}
|
|
151
|
-
:host .wm-
|
|
145
|
+
:host .wm-snack-wrapper .wm-snackbar.active:not(button) {
|
|
152
146
|
opacity: 1;
|
|
153
147
|
}
|
|
154
|
-
:host .wm-
|
|
148
|
+
:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg {
|
|
155
149
|
display: -webkit-box;
|
|
156
150
|
display: -webkit-flex;
|
|
157
151
|
display: -ms-flexbox;
|
|
@@ -168,31 +162,31 @@
|
|
|
168
162
|
position: relative;
|
|
169
163
|
padding: 0;
|
|
170
164
|
}
|
|
171
|
-
:host .wm-
|
|
165
|
+
:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext {
|
|
172
166
|
display: flex;
|
|
173
167
|
flex-wrap: wrap;
|
|
174
168
|
gap: 12px;
|
|
175
169
|
width: 100%;
|
|
176
170
|
align-items: center;
|
|
177
171
|
}
|
|
178
|
-
:host .wm-
|
|
172
|
+
:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext .msg {
|
|
179
173
|
display: block;
|
|
180
174
|
flex: 0 0 0;
|
|
181
175
|
min-width: fit-content;
|
|
182
176
|
}
|
|
183
|
-
:host .wm-
|
|
177
|
+
:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext .msg.long {
|
|
184
178
|
min-width: 216px;
|
|
185
179
|
flex: 1 0 0;
|
|
186
180
|
}
|
|
187
|
-
:host .wm-
|
|
181
|
+
:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext .link {
|
|
188
182
|
display: flex;
|
|
189
183
|
flex: 0 0 auto;
|
|
190
184
|
}
|
|
191
|
-
:host .wm-
|
|
185
|
+
:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext .link span {
|
|
192
186
|
display: block;
|
|
193
187
|
white-space: nowrap;
|
|
194
188
|
}
|
|
195
|
-
:host .wm-
|
|
189
|
+
:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack {
|
|
196
190
|
-webkit-box-shadow: none;
|
|
197
191
|
-moz-box-shadow: none;
|
|
198
192
|
box-shadow: none;
|
|
@@ -213,7 +207,7 @@
|
|
|
213
207
|
text-align: center;
|
|
214
208
|
letter-spacing: normal;
|
|
215
209
|
}
|
|
216
|
-
:host .wm-
|
|
210
|
+
:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:before {
|
|
217
211
|
display: inline-block;
|
|
218
212
|
font: normal normal normal 24px/1 "Material Design Icons";
|
|
219
213
|
font-size: inherit;
|
|
@@ -224,24 +218,24 @@
|
|
|
224
218
|
content: "\f156";
|
|
225
219
|
font-size: 1.12rem;
|
|
226
220
|
}
|
|
227
|
-
:host .wm-
|
|
221
|
+
:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover {
|
|
228
222
|
background-color: var(--wmcolor-snackbar-close-background-hover);
|
|
229
223
|
color: var(--wmcolor-snackbar-close-icon-hover);
|
|
230
224
|
}
|
|
231
|
-
:host .wm-
|
|
225
|
+
:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus {
|
|
232
226
|
outline: none;
|
|
233
227
|
}
|
|
234
|
-
:host .wm-
|
|
228
|
+
:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack::-moz-focus-inner {
|
|
235
229
|
border: 0;
|
|
236
230
|
outline: none;
|
|
237
231
|
}
|
|
238
|
-
:host .wm-
|
|
232
|
+
:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:active {
|
|
239
233
|
-ms-transform: scale(0.9, 0.9);
|
|
240
234
|
-webkit-transform: scale(0.9, 0.9);
|
|
241
235
|
-moz-transform: scale(0.9, 0.9);
|
|
242
236
|
transform: scale(0.9, 0.9);
|
|
243
237
|
}
|
|
244
|
-
:host .wm-
|
|
238
|
+
:host .wm-snack-wrapper .wm-snackbar .sr-only {
|
|
245
239
|
position: absolute !important;
|
|
246
240
|
width: 1px !important;
|
|
247
241
|
height: 1px !important;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { h } from "@stencil/core";
|
|
1
|
+
import { h, Host } from "@stencil/core";
|
|
2
2
|
import { generateId, hideTooltip, showTooltip } from "../../global/functions";
|
|
3
3
|
import { globalMessages } from "../../global/intl";
|
|
4
4
|
export class Snackbar {
|
|
@@ -11,28 +11,16 @@ export class Snackbar {
|
|
|
11
11
|
this.isTabbing = false;
|
|
12
12
|
this.announcement = "";
|
|
13
13
|
}
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
const updatedNotification = this.parsedNotifications.filter((n) => n.id == updatedID)[0];
|
|
25
|
-
const notifEl = this.el.shadowRoot.querySelector(`#snack-${updatedID}`);
|
|
26
|
-
if (notifEl) {
|
|
27
|
-
notifEl.classList.remove("grow");
|
|
28
|
-
window.requestAnimationFrame(() => {
|
|
29
|
-
notifEl.classList.add("grow");
|
|
30
|
-
});
|
|
31
|
-
}
|
|
32
|
-
this.stopTimer(updatedNotification);
|
|
33
|
-
const newTimer = window.setTimeout(() => this.snackExpired(updatedNotification.id), 6000);
|
|
34
|
-
this.timers = Object.assign({ [updatedNotification.id]: newTimer }, this.timers);
|
|
35
|
-
});
|
|
14
|
+
componentDidLoad() {
|
|
15
|
+
const snackObserver = new MutationObserver((snackMutations) => snackMutations.forEach((mutationRecord) => this.handleSnackMutation(mutationRecord)));
|
|
16
|
+
snackObserver.observe(this.snackAreaEl, { childList: true });
|
|
17
|
+
}
|
|
18
|
+
handleSnackMutation(mutationRecord) {
|
|
19
|
+
const addedSnacks = Array.from(mutationRecord.addedNodes);
|
|
20
|
+
if (addedSnacks.length > 0) {
|
|
21
|
+
addedSnacks.forEach((s) => s.querySelector(".wm-snackbar").classList.add("grow"));
|
|
22
|
+
addedSnacks[0].scrollIntoView();
|
|
23
|
+
}
|
|
36
24
|
}
|
|
37
25
|
updateSnacks(newValue) {
|
|
38
26
|
const prevParsedNotifications = [...this.parsedNotifications];
|
|
@@ -54,23 +42,38 @@ export class Snackbar {
|
|
|
54
42
|
});
|
|
55
43
|
}
|
|
56
44
|
}
|
|
57
|
-
this.
|
|
45
|
+
this.setMinWidths();
|
|
58
46
|
}
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
47
|
+
refreshUpdatedNotifications(prevNotifications) {
|
|
48
|
+
let updatedNotifications = [];
|
|
49
|
+
prevNotifications.forEach((prevNotification) => {
|
|
50
|
+
this.parsedNotifications.forEach((newNotification) => {
|
|
51
|
+
if (newNotification.id == prevNotification.id && newNotification.message != prevNotification.message) {
|
|
52
|
+
updatedNotifications.push(newNotification);
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
});
|
|
56
|
+
updatedNotifications.forEach((updatedNotification) => {
|
|
57
|
+
const notifEl = this.el.shadowRoot.querySelector(`#snack-${updatedNotification.id}`);
|
|
58
|
+
if (notifEl) {
|
|
59
|
+
notifEl.classList.remove("grow");
|
|
60
|
+
window.requestAnimationFrame(() => notifEl.classList.add("grow"));
|
|
61
|
+
}
|
|
62
|
+
this.stopTimer(updatedNotification);
|
|
63
|
+
const newTimer = window.setTimeout(() => this.snackExpired(updatedNotification.id), 6000);
|
|
64
|
+
this.timers = Object.assign({ [updatedNotification.id]: newTimer }, this.timers);
|
|
65
|
+
this.announce(`${updatedNotification.message} ${this.isTabbing ? "" : updatedNotification.link}`);
|
|
66
|
+
});
|
|
64
67
|
}
|
|
65
68
|
checkForTabbing(ev) {
|
|
66
69
|
if (ev.key === "Tab") {
|
|
67
|
-
this.
|
|
70
|
+
this.isTabbing = true;
|
|
68
71
|
}
|
|
69
72
|
}
|
|
70
73
|
// Workaround for screenreader's triggering click event on "enter"
|
|
71
74
|
// This is why we manually handle this.isTabbing instead of listening to wmUserIsTabbing
|
|
72
75
|
handleMouse() {
|
|
73
|
-
this.
|
|
76
|
+
this.isTabbing = false;
|
|
74
77
|
}
|
|
75
78
|
snackDismissed(notification) {
|
|
76
79
|
this.endSnack(notification);
|
|
@@ -82,9 +85,9 @@ export class Snackbar {
|
|
|
82
85
|
}
|
|
83
86
|
//Remove snack from notification list once timer runs out
|
|
84
87
|
snackExpired(expiredID) {
|
|
85
|
-
const
|
|
86
|
-
if (
|
|
87
|
-
this.endSnack(
|
|
88
|
+
const expiredNotification = this.parsedNotifications.find((n) => n.id == expiredID);
|
|
89
|
+
if (expiredNotification) {
|
|
90
|
+
this.endSnack(expiredNotification);
|
|
88
91
|
}
|
|
89
92
|
}
|
|
90
93
|
endSnack(notification) {
|
|
@@ -114,13 +117,7 @@ export class Snackbar {
|
|
|
114
117
|
delete this.timers[notification.id];
|
|
115
118
|
}
|
|
116
119
|
}
|
|
117
|
-
|
|
118
|
-
if (this.liveRegionEl.textContent === message) {
|
|
119
|
-
message += "\u00A0";
|
|
120
|
-
}
|
|
121
|
-
this.announcement = message;
|
|
122
|
-
}
|
|
123
|
-
sizeMessage() {
|
|
120
|
+
setMinWidths() {
|
|
124
121
|
// wait for render to get updated scrollWidth
|
|
125
122
|
requestAnimationFrame(() => {
|
|
126
123
|
const msgEls = this.el.shadowRoot.querySelectorAll(".msg");
|
|
@@ -132,17 +129,22 @@ export class Snackbar {
|
|
|
132
129
|
});
|
|
133
130
|
});
|
|
134
131
|
}
|
|
132
|
+
announce(message) {
|
|
133
|
+
if (this.liveRegionEl.textContent === message) {
|
|
134
|
+
message += "\u00A0";
|
|
135
|
+
}
|
|
136
|
+
this.announcement = message;
|
|
137
|
+
}
|
|
135
138
|
renderSnackbars() {
|
|
136
|
-
return this.parsedNotifications.map((notification) => (h("div", { class: "wm-snack-wrapper" }, h("div", { id: `snack-${notification.id}`, class: "wm-snackbar active neutral
|
|
139
|
+
return [...this.parsedNotifications].reverse().map((notification) => (h("div", { class: "wm-snack-wrapper" }, h("div", { id: `snack-${notification.id}`, class: "wm-snackbar active neutral" }, h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) }), h("div", { class: "wm-snackbarmsg" }, h("div", { class: "msgtext" }, h("span", { class: "msg" }, notification.message), notification.link && (h("a", { id: `action-${notification.id}`, class: `link ${notification.newWindow ? "new-window" : ""}`, "aria-label": `Click to ${notification.link}...${notification.newWindow ? " " + globalMessages.newWindow : ""}`, tabindex: 0, onClick: () => {
|
|
137
140
|
this.snackLinkClicked(notification);
|
|
138
141
|
}, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, h("span", { "aria-hidden": "true" }, notification.link)))), h("button", { id: `close-button-${notification.id}`, "aria-label": "Close this notification", class: "closesnack", tabindex: notification.link ? 0 : -1, onClick: () => this.snackDismissed(notification), onMouseEnter: (ev) => showTooltip("bottom", ev.target, globalMessages.close), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.isTabbing && showTooltip("bottom", ev.target, globalMessages.close), onBlur: () => hideTooltip() })), h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
|
|
139
142
|
}
|
|
140
143
|
render() {
|
|
141
|
-
return (h("div", { class: {
|
|
142
|
-
"
|
|
143
|
-
empty: this.parsedNotifications.length === 0,
|
|
144
|
+
return (h(Host, null, h("div", { ref: (el) => (this.snackAreaEl = el), class: {
|
|
145
|
+
"list-wrapper": true,
|
|
144
146
|
"user-is-tabbing": this.isTabbing,
|
|
145
|
-
} }, h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)
|
|
147
|
+
} }, this.renderSnackbars()), h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
|
|
146
148
|
}
|
|
147
149
|
static get is() { return "wm-snackbar"; }
|
|
148
150
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
let notifications = [];
|
|
2
|
+
|
|
1
3
|
function generateSnackbar(isDefault = false) {
|
|
2
|
-
const randomId = Math.floor(Math.random() * 100) + 1;
|
|
4
|
+
const randomId = (Math.floor(Math.random() * 100) + 1).toString();
|
|
3
5
|
const id = isDefault
|
|
4
6
|
? randomId
|
|
5
7
|
: document.getElementById("custom-id").value
|
|
@@ -17,9 +19,8 @@ function generateSnackbar(isDefault = false) {
|
|
|
17
19
|
};
|
|
18
20
|
|
|
19
21
|
const snackbar = document.getElementById("snackbar");
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
snackbar.notifications = JSON.stringify(updatedNotifications);
|
|
22
|
+
notifications = [newNotification, ...notifications];
|
|
23
|
+
snackbar.notifications = JSON.stringify(notifications);
|
|
23
24
|
}
|
|
24
25
|
|
|
25
26
|
document.querySelector("#snack-basic").addEventListener("click", () => generateSnackbar(true));
|
|
@@ -28,8 +29,9 @@ document.querySelector("#snack-update").addEventListener("click", () => updateSn
|
|
|
28
29
|
|
|
29
30
|
document.addEventListener("wmSnackbarSnackFinished", function (ev) {
|
|
30
31
|
const snackbar = document.getElementById("snackbar");
|
|
31
|
-
let newSnacks =
|
|
32
|
-
|
|
32
|
+
let newSnacks = notifications.filter((snack) => snack.id !== ev.detail.id);
|
|
33
|
+
notifications = newSnacks;
|
|
34
|
+
snackbar.notifications = JSON.stringify(notifications);
|
|
33
35
|
});
|
|
34
36
|
|
|
35
37
|
document.addEventListener("wmSnackbarActionTriggered", function (ev) {
|
|
@@ -43,11 +45,10 @@ document.addEventListener("wmSnackbarActionTriggered", function (ev) {
|
|
|
43
45
|
|
|
44
46
|
function updateSnackText() {
|
|
45
47
|
const snackbar = document.querySelector("#snackbar");
|
|
46
|
-
|
|
47
|
-
parsedNotifications.forEach((notif) => {
|
|
48
|
+
notifications.forEach((notif) => {
|
|
48
49
|
if (notif.id == "11") {
|
|
49
50
|
notif.message = Date.now().toLocaleString();
|
|
50
51
|
}
|
|
51
52
|
});
|
|
52
|
-
snackbar.notifications = JSON.stringify(
|
|
53
|
+
snackbar.notifications = JSON.stringify(notifications);
|
|
53
54
|
}
|
package/dist/esm/loader.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { b as bootstrapLazy } from './index-f164fbca.js';
|
|
2
2
|
export { s as setNonce } from './index-f164fbca.js';
|
|
3
|
-
import './global-
|
|
3
|
+
import './global-b3bbb95e.js';
|
|
4
4
|
|
|
5
5
|
const defineCustomElements = (win, options) => {
|
|
6
6
|
if (typeof window === 'undefined') return undefined;
|
package/dist/esm/ripple.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as promiseResolve, b as bootstrapLazy } from './index-f164fbca.js';
|
|
2
2
|
export { s as setNonce } from './index-f164fbca.js';
|
|
3
|
-
import './global-
|
|
3
|
+
import './global-b3bbb95e.js';
|
|
4
4
|
|
|
5
5
|
/*
|
|
6
6
|
Stencil Client Patch Browser v4.8.2 | MIT Licensed | https://stenciljs.com
|