@watermarkinsights/ripple 5.7.0-6 → 5.7.0-8
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/{app-globals-b78b1f4d.js → app-globals-1f689ab3.js} +1 -1
- package/dist/cjs/index-788526f5.js +8 -12
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/priv-navigator-button.cjs.entry.js +1 -1
- package/dist/cjs/priv-navigator-item.cjs.entry.js +1 -1
- package/dist/cjs/ripple.cjs.js +2 -2
- package/dist/cjs/wm-modal-pss_3.cjs.entry.js +216 -0
- package/dist/cjs/{wm-modal.cjs.entry.js → wm-modal_3.cjs.entry.js} +75 -0
- package/dist/cjs/wm-navigation_3.cjs.entry.js +4 -4
- package/dist/cjs/wm-nested-select.cjs.entry.js +37 -13
- package/dist/cjs/wm-option_2.cjs.entry.js +1 -1
- package/dist/cjs/wm-pagination.cjs.entry.js +1 -1
- package/dist/cjs/wm-search.cjs.entry.js +2 -2
- package/dist/cjs/wm-snackbar.cjs.entry.js +2 -2
- package/dist/cjs/wm-tab-item_3.cjs.entry.js +3 -3
- package/dist/cjs/wm-tag-input.cjs.entry.js +3 -3
- package/dist/cjs/wm-textarea.cjs.entry.js +1 -1
- package/dist/cjs/wm-timepicker.cjs.entry.js +2 -2
- package/dist/cjs/wm-toggletip.cjs.entry.js +2 -2
- package/dist/cjs/wm-uploader.cjs.entry.js +2 -2
- package/dist/collection/collection-manifest.json +17 -5
- package/dist/collection/components/selects/wm-nested-select/wm-nested-select.css +1 -1
- package/dist/collection/components/selects/wm-nested-select/wm-nested-select.js +43 -13
- package/dist/collection/components/selects/wm-option/wm-option.css +1 -1
- package/dist/collection/components/wm-modal-pss/wm-modal-pss-footer.css +61 -0
- package/dist/collection/components/wm-modal-pss/wm-modal-pss-footer.js +138 -0
- package/dist/collection/components/wm-modal-pss/wm-modal-pss-header.css +55 -0
- package/dist/collection/components/wm-modal-pss/wm-modal-pss-header.js +81 -0
- package/dist/collection/components/wm-modal-pss/wm-modal-pss.css +134 -0
- package/dist/collection/components/wm-modal-pss/wm-modal-pss.js +361 -0
- package/dist/collection/components/wm-navigation/wm-navigation-hamburger.js +1 -1
- package/dist/collection/components/wm-navigation/wm-navigation-item.js +1 -1
- package/dist/collection/components/wm-navigation/wm-navigation.js +2 -2
- package/dist/collection/components/wm-navigator/priv-navigator-button/priv-navigator-button.js +1 -1
- package/dist/collection/components/wm-navigator/priv-navigator-item/priv-navigator-item.js +1 -1
- package/dist/collection/components/wm-pagination/wm-pagination.js +1 -1
- package/dist/collection/components/wm-search/wm-search.js +2 -2
- package/dist/collection/components/wm-snackbar/wm-snackbar.js +2 -2
- package/dist/collection/components/wm-tabs/wm-tab-item/wm-tab-item.js +1 -1
- package/dist/collection/components/wm-tabs/wm-tab-list/wm-tab-list.js +1 -1
- package/dist/collection/components/wm-tabs/wm-tab-panel/wm-tab-panel.js +1 -1
- package/dist/collection/components/wm-tag-input/wm-tag-input.js +3 -3
- package/dist/collection/components/wm-textarea/wm-textarea.js +1 -1
- package/dist/collection/components/wm-timepicker/wm-timepicker.js +2 -2
- package/dist/collection/components/wm-toggletip/wm-toggletip.js +2 -2
- package/dist/collection/components/wm-uploader/wm-uploader.js +2 -2
- package/dist/esm/{app-globals-079cb2f3.js → app-globals-0f27630e.js} +1 -1
- package/dist/esm/index-130e07bb.js +8 -12
- package/dist/esm/loader.js +2 -2
- package/dist/esm/priv-navigator-button.entry.js +1 -1
- package/dist/esm/priv-navigator-item.entry.js +1 -1
- package/dist/esm/ripple.js +2 -2
- package/dist/esm/wm-modal-pss_3.entry.js +210 -0
- package/dist/esm/{wm-modal.entry.js → wm-modal_3.entry.js} +75 -2
- package/dist/esm/wm-navigation_3.entry.js +4 -4
- package/dist/esm/wm-nested-select.entry.js +37 -13
- package/dist/esm/wm-option_2.entry.js +1 -1
- package/dist/esm/wm-pagination.entry.js +1 -1
- package/dist/esm/wm-search.entry.js +2 -2
- package/dist/esm/wm-snackbar.entry.js +2 -2
- package/dist/esm/wm-tab-item_3.entry.js +3 -3
- package/dist/esm/wm-tag-input.entry.js +3 -3
- package/dist/esm/wm-textarea.entry.js +1 -1
- package/dist/esm/wm-timepicker.entry.js +2 -2
- package/dist/esm/wm-toggletip.entry.js +2 -2
- package/dist/esm/wm-uploader.entry.js +2 -2
- package/dist/esm-es5/{app-globals-079cb2f3.js → app-globals-0f27630e.js} +1 -1
- package/dist/esm-es5/index-130e07bb.js +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/priv-navigator-button.entry.js +1 -1
- package/dist/esm-es5/priv-navigator-item.entry.js +1 -1
- package/dist/esm-es5/ripple.js +1 -1
- package/dist/esm-es5/wm-modal-pss_3.entry.js +1 -0
- package/dist/esm-es5/wm-modal_3.entry.js +1 -0
- package/dist/esm-es5/wm-navigation_3.entry.js +1 -1
- package/dist/esm-es5/wm-nested-select.entry.js +1 -1
- package/dist/esm-es5/wm-option_2.entry.js +1 -1
- package/dist/esm-es5/wm-pagination.entry.js +1 -1
- package/dist/esm-es5/wm-search.entry.js +1 -1
- package/dist/esm-es5/wm-snackbar.entry.js +1 -1
- package/dist/esm-es5/wm-tab-item_3.entry.js +1 -1
- package/dist/esm-es5/wm-tag-input.entry.js +1 -1
- package/dist/esm-es5/wm-textarea.entry.js +1 -1
- package/dist/esm-es5/wm-timepicker.entry.js +1 -1
- package/dist/esm-es5/wm-toggletip.entry.js +1 -1
- package/dist/esm-es5/wm-uploader.entry.js +1 -1
- package/dist/ripple/{p-68434694.system.entry.js → p-0ba0c194.system.entry.js} +1 -1
- package/dist/ripple/{p-76df7747.system.entry.js → p-1073ab75.system.entry.js} +1 -1
- package/dist/ripple/{p-bf033357.entry.js → p-1344f4d2.entry.js} +1 -1
- package/dist/ripple/{p-4d0daa27.system.js → p-202cc2fe.system.js} +1 -1
- package/dist/ripple/{p-17825edb.entry.js → p-2300c07b.entry.js} +1 -1
- package/dist/ripple/{p-e1a3db79.system.entry.js → p-236ee735.system.entry.js} +1 -1
- package/dist/ripple/{p-506a85c0.system.entry.js → p-26e42263.system.entry.js} +1 -1
- package/dist/ripple/{p-45393c61.system.entry.js → p-2716532e.system.entry.js} +1 -1
- package/dist/ripple/{p-16eb5075.entry.js → p-30f148a7.entry.js} +1 -1
- package/dist/ripple/{p-772db278.entry.js → p-4b29da45.entry.js} +1 -1
- package/dist/ripple/{p-6b84c512.entry.js → p-4fae07d6.entry.js} +1 -1
- package/dist/ripple/{p-fc04e749.entry.js → p-524f0531.entry.js} +1 -1
- package/dist/ripple/{p-4f2be0ea.entry.js → p-563f37e8.entry.js} +1 -1
- package/dist/ripple/{p-f6752b25.system.entry.js → p-5a2431e1.system.entry.js} +1 -1
- package/dist/ripple/{p-b5276c34.entry.js → p-60cb3adc.entry.js} +1 -1
- package/dist/ripple/p-618b27e6.entry.js +1 -0
- package/dist/ripple/{p-2a3d94a9.system.entry.js → p-62bb8827.system.entry.js} +1 -1
- package/dist/ripple/{p-580a6225.system.entry.js → p-695391a9.system.entry.js} +1 -1
- package/dist/ripple/{p-6028695a.system.entry.js → p-6bb9402a.system.entry.js} +1 -1
- package/dist/ripple/{p-ba2fe2c3.system.entry.js → p-6d9acebc.system.entry.js} +1 -1
- package/dist/ripple/p-7136efd0.entry.js +1 -0
- package/dist/ripple/{p-c83bc1e9.entry.js → p-79979fb1.entry.js} +1 -1
- package/dist/ripple/{p-19c85f03.system.entry.js → p-89a862ae.system.entry.js} +1 -1
- package/dist/ripple/p-8ef8c943.system.entry.js +1 -0
- package/dist/ripple/{p-f3aa0c90.entry.js → p-9062cb9a.entry.js} +1 -1
- package/dist/ripple/p-9511f0c3.entry.js +1 -0
- package/dist/ripple/p-b8e97d05.system.js +1 -0
- package/dist/ripple/p-b9a8d85b.entry.js +1 -0
- package/dist/ripple/{p-b8dbae16.entry.js → p-bbcc61cf.entry.js} +1 -1
- package/dist/ripple/p-c94976c8.system.entry.js +1 -0
- package/dist/ripple/{p-43598413.js → p-e4c40125.js} +1 -1
- package/dist/ripple/{p-fde96980.system.entry.js → p-eaf16578.system.entry.js} +1 -1
- package/dist/ripple/p-f9df9765.system.entry.js +1 -0
- package/dist/ripple/p-fada6923.entry.js +1 -0
- package/dist/ripple/p-ff74ec46.system.entry.js +1 -0
- package/dist/ripple/ripple.esm.js +1 -1
- package/dist/ripple/ripple.js +1 -1
- package/dist/types/components/selects/wm-nested-select/wm-nested-select.d.ts +2 -2
- package/dist/types/components/wm-modal-pss/wm-modal-pss-footer.d.ts +14 -0
- package/dist/types/components/wm-modal-pss/wm-modal-pss-header.d.ts +10 -0
- package/dist/types/components/wm-modal-pss/wm-modal-pss.d.ts +33 -0
- package/dist/types/components.d.ts +88 -0
- package/package.json +1 -1
- package/dist/cjs/wm-modal-footer.cjs.entry.js +0 -48
- package/dist/cjs/wm-modal-header.cjs.entry.js +0 -40
- package/dist/esm/wm-modal-footer.entry.js +0 -44
- package/dist/esm/wm-modal-header.entry.js +0 -36
- package/dist/esm-es5/wm-modal-footer.entry.js +0 -1
- package/dist/esm-es5/wm-modal-header.entry.js +0 -1
- package/dist/esm-es5/wm-modal.entry.js +0 -1
- package/dist/ripple/p-3eae2cff.system.entry.js +0 -1
- package/dist/ripple/p-43c7c26e.entry.js +0 -1
- package/dist/ripple/p-54ee24ab.system.entry.js +0 -1
- package/dist/ripple/p-6e50bb9a.entry.js +0 -1
- package/dist/ripple/p-81ce5578.entry.js +0 -1
- package/dist/ripple/p-8933fa3d.system.entry.js +0 -1
- package/dist/ripple/p-aa52069c.entry.js +0 -1
- package/dist/ripple/p-baca1589.entry.js +0 -1
- package/dist/ripple/p-bae209b8.system.entry.js +0 -1
- package/dist/ripple/p-db706578.system.js +0 -1
- package/dist/ripple/p-e27dcd81.system.entry.js +0 -1
- package/dist/ripple/p-e6e1cd8b.entry.js +0 -1
|
@@ -0,0 +1,361 @@
|
|
|
1
|
+
import { h, Host } from "@stencil/core";
|
|
2
|
+
export class Modal {
|
|
3
|
+
constructor() {
|
|
4
|
+
this.bodyFocusListener = () => this.redirectFocusFromBody();
|
|
5
|
+
this.open = false;
|
|
6
|
+
this.elementToFocus = "";
|
|
7
|
+
this.modalType = "modal";
|
|
8
|
+
this.uid = undefined;
|
|
9
|
+
}
|
|
10
|
+
get focusOnOpenEl() {
|
|
11
|
+
let customElementToFocus = null;
|
|
12
|
+
if (this.elementToFocus === "primary" || this.elementToFocus === "secondary") {
|
|
13
|
+
customElementToFocus = this.el.querySelector(`#wm-${this.elementToFocus}-${this.uid}`);
|
|
14
|
+
}
|
|
15
|
+
else if (this.elementToFocus) {
|
|
16
|
+
customElementToFocus = this.el.querySelector("#" + this.elementToFocus);
|
|
17
|
+
!customElementToFocus &&
|
|
18
|
+
console.warn("Ripple Component Library: The modal component couldn't find an element matching the id you passed for 'elementToFocus'. It will fall back to the default and focus the close button when the modal opens.");
|
|
19
|
+
}
|
|
20
|
+
const closeButtonEl = this.el.querySelector(`#wm-modal-close-${this.uid}`);
|
|
21
|
+
return customElementToFocus ? customElementToFocus : closeButtonEl;
|
|
22
|
+
}
|
|
23
|
+
//App can open modal by toggling the prop
|
|
24
|
+
toggleModal() {
|
|
25
|
+
this.open ? this.showModal() : this.hideModal();
|
|
26
|
+
}
|
|
27
|
+
handleClick(ev) {
|
|
28
|
+
this.open && ev.target === this.overlayEl && this.focusOnOpenEl.focus();
|
|
29
|
+
}
|
|
30
|
+
closeModalOnEscape(ev) {
|
|
31
|
+
if (ev.key === "Escape") {
|
|
32
|
+
// stops propagation prevents nested modal from closing all at once
|
|
33
|
+
ev.stopPropagation();
|
|
34
|
+
this.wmModalCloseTriggered.emit();
|
|
35
|
+
this.open = false;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
showModal() {
|
|
39
|
+
this.setAriaDescribedbyOnModal();
|
|
40
|
+
this.setElToFocusOnClose(); //Record where the user was before the modal opened so that focus can return to it when the modal closes
|
|
41
|
+
document.body.style.overflow = "hidden"; //Keeps the page below the modal from scrolling
|
|
42
|
+
//Focus listeners as a general catch for keeping focus in case of errors in finding element with id passed in by dev (element is removed from DOM, etc.) or other scenarios
|
|
43
|
+
document.body.tabIndex = 0;
|
|
44
|
+
document.body.removeEventListener("focus", this.bodyFocusListener, true);
|
|
45
|
+
document.body.addEventListener("focus", this.bodyFocusListener, true);
|
|
46
|
+
window.requestAnimationFrame(() => {
|
|
47
|
+
// nested requestAnimationFrames allow all elements to become visible on page before assigning focus
|
|
48
|
+
window.requestAnimationFrame(() => this.focusOnOpenEl.focus()); //Bring focus to element inside modal
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
//Close the modal and focus the triggering element when the modal buttons emit their events
|
|
52
|
+
hideModal() {
|
|
53
|
+
document.body.style.overflow = "visible";
|
|
54
|
+
document.body.tabIndex = -1;
|
|
55
|
+
document.body.removeEventListener("focus", this.bodyFocusListener, true);
|
|
56
|
+
window.requestAnimationFrame(() => this.focusOnCloseEl.focus()); //Return focus
|
|
57
|
+
}
|
|
58
|
+
componentWillLoad() {
|
|
59
|
+
if (this.elementToFocus === "primary" || this.elementToFocus === "secondary") {
|
|
60
|
+
if (!this.el.id) {
|
|
61
|
+
console.error("For accessibility purposes, you need to set the modal content wrapper's id to 'content-[id of wm-modal-pss]'.");
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
this.el.focus = () => {
|
|
65
|
+
this.focusOnOpenEl.focus();
|
|
66
|
+
};
|
|
67
|
+
const generatedId = "wmcl-" + Math.random().toString(36).substr(2, 10);
|
|
68
|
+
this.uid = this.el.id ? this.el.id : generatedId;
|
|
69
|
+
}
|
|
70
|
+
componentDidLoad() {
|
|
71
|
+
if (this.open) {
|
|
72
|
+
this.showModal();
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
async emitCloseEvent() {
|
|
76
|
+
this.wmModalCloseTriggered.emit();
|
|
77
|
+
}
|
|
78
|
+
async emitPrimaryEvent() {
|
|
79
|
+
this.wmModalPrimaryTriggered.emit();
|
|
80
|
+
}
|
|
81
|
+
async emitSecondaryEvent() {
|
|
82
|
+
this.wmModalSecondaryTriggered.emit();
|
|
83
|
+
}
|
|
84
|
+
setAriaDescribedbyOnModal() {
|
|
85
|
+
const modalBody = document.getElementById(`content-${this.uid}`);
|
|
86
|
+
if (!modalBody) {
|
|
87
|
+
console.warn("Ripple Component Library: The element containing the body of the modal must include an id in the format 'content-[id of modal]' for accessibility purposes.");
|
|
88
|
+
}
|
|
89
|
+
else {
|
|
90
|
+
this.el.setAttribute("aria-describedby", `wm-modal-heading-text-${this.uid} content-${this.uid}`);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
setElToFocusOnClose() {
|
|
94
|
+
const elToFocus = document.activeElement;
|
|
95
|
+
if (elToFocus.tagName === "WM-MENUITEM") {
|
|
96
|
+
this.focusOnCloseEl = elToFocus.parentElement;
|
|
97
|
+
}
|
|
98
|
+
else {
|
|
99
|
+
let el;
|
|
100
|
+
while (elToFocus && elToFocus.shadowRoot) {
|
|
101
|
+
el = elToFocus.shadowRoot.activeElement;
|
|
102
|
+
}
|
|
103
|
+
if (el) {
|
|
104
|
+
this.focusOnCloseEl = el;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
redirectFocusFromBody() {
|
|
109
|
+
if (document.activeElement.tagName === "BODY") {
|
|
110
|
+
this.focusOnOpenEl.focus();
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
render() {
|
|
114
|
+
return (h(Host, { key: '85e48c3a6876e546014d2100b5cf575ae0aa4eb8', class: `${this.open ? "" : "hide "}${"wm-" + this.modalType}`, role: "dialog", "aria-describedby": `wm-modal-heading-text-${this.uid}`, "aria-modal": "true", tabindex: this.open ? 0 : null, onFocus: () => {
|
|
115
|
+
this.focusLastElement.emit();
|
|
116
|
+
} }, h("div", { key: 'cf58003fbfc9ea4a013c3689aa93f45dca5a0358', class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { key: '59504e363659c2393c6b7f4a10f512485291b253', class: "sr-only", tabIndex: 0, onFocus: () => {
|
|
117
|
+
this.focusFirstElement.emit();
|
|
118
|
+
} })));
|
|
119
|
+
}
|
|
120
|
+
static get is() { return "wm-modal-pss"; }
|
|
121
|
+
static get originalStyleUrls() {
|
|
122
|
+
return {
|
|
123
|
+
"$": ["wm-modal-pss.scss"]
|
|
124
|
+
};
|
|
125
|
+
}
|
|
126
|
+
static get styleUrls() {
|
|
127
|
+
return {
|
|
128
|
+
"$": ["wm-modal-pss.css"]
|
|
129
|
+
};
|
|
130
|
+
}
|
|
131
|
+
static get properties() {
|
|
132
|
+
return {
|
|
133
|
+
"open": {
|
|
134
|
+
"type": "boolean",
|
|
135
|
+
"mutable": true,
|
|
136
|
+
"complexType": {
|
|
137
|
+
"original": "boolean",
|
|
138
|
+
"resolved": "boolean",
|
|
139
|
+
"references": {}
|
|
140
|
+
},
|
|
141
|
+
"required": false,
|
|
142
|
+
"optional": false,
|
|
143
|
+
"docs": {
|
|
144
|
+
"tags": [],
|
|
145
|
+
"text": ""
|
|
146
|
+
},
|
|
147
|
+
"attribute": "open",
|
|
148
|
+
"reflect": true,
|
|
149
|
+
"defaultValue": "false"
|
|
150
|
+
},
|
|
151
|
+
"elementToFocus": {
|
|
152
|
+
"type": "string",
|
|
153
|
+
"mutable": true,
|
|
154
|
+
"complexType": {
|
|
155
|
+
"original": "\"primary\" | \"secondary\" | string",
|
|
156
|
+
"resolved": "string",
|
|
157
|
+
"references": {}
|
|
158
|
+
},
|
|
159
|
+
"required": false,
|
|
160
|
+
"optional": false,
|
|
161
|
+
"docs": {
|
|
162
|
+
"tags": [],
|
|
163
|
+
"text": ""
|
|
164
|
+
},
|
|
165
|
+
"attribute": "element-to-focus",
|
|
166
|
+
"reflect": false,
|
|
167
|
+
"defaultValue": "\"\""
|
|
168
|
+
},
|
|
169
|
+
"modalType": {
|
|
170
|
+
"type": "string",
|
|
171
|
+
"mutable": false,
|
|
172
|
+
"complexType": {
|
|
173
|
+
"original": "\"modal\" | \"dialog\"",
|
|
174
|
+
"resolved": "\"dialog\" | \"modal\"",
|
|
175
|
+
"references": {}
|
|
176
|
+
},
|
|
177
|
+
"required": false,
|
|
178
|
+
"optional": false,
|
|
179
|
+
"docs": {
|
|
180
|
+
"tags": [],
|
|
181
|
+
"text": ""
|
|
182
|
+
},
|
|
183
|
+
"attribute": "modal-type",
|
|
184
|
+
"reflect": true,
|
|
185
|
+
"defaultValue": "\"modal\""
|
|
186
|
+
},
|
|
187
|
+
"uid": {
|
|
188
|
+
"type": "string",
|
|
189
|
+
"mutable": true,
|
|
190
|
+
"complexType": {
|
|
191
|
+
"original": "string",
|
|
192
|
+
"resolved": "string",
|
|
193
|
+
"references": {}
|
|
194
|
+
},
|
|
195
|
+
"required": true,
|
|
196
|
+
"optional": false,
|
|
197
|
+
"docs": {
|
|
198
|
+
"tags": [],
|
|
199
|
+
"text": ""
|
|
200
|
+
},
|
|
201
|
+
"attribute": "uid",
|
|
202
|
+
"reflect": true
|
|
203
|
+
}
|
|
204
|
+
};
|
|
205
|
+
}
|
|
206
|
+
static get events() {
|
|
207
|
+
return [{
|
|
208
|
+
"method": "focusLastElement",
|
|
209
|
+
"name": "focusLastElement",
|
|
210
|
+
"bubbles": false,
|
|
211
|
+
"cancelable": true,
|
|
212
|
+
"composed": true,
|
|
213
|
+
"docs": {
|
|
214
|
+
"tags": [],
|
|
215
|
+
"text": ""
|
|
216
|
+
},
|
|
217
|
+
"complexType": {
|
|
218
|
+
"original": "any",
|
|
219
|
+
"resolved": "any",
|
|
220
|
+
"references": {}
|
|
221
|
+
}
|
|
222
|
+
}, {
|
|
223
|
+
"method": "focusFirstElement",
|
|
224
|
+
"name": "focusFirstElement",
|
|
225
|
+
"bubbles": false,
|
|
226
|
+
"cancelable": true,
|
|
227
|
+
"composed": true,
|
|
228
|
+
"docs": {
|
|
229
|
+
"tags": [],
|
|
230
|
+
"text": ""
|
|
231
|
+
},
|
|
232
|
+
"complexType": {
|
|
233
|
+
"original": "any",
|
|
234
|
+
"resolved": "any",
|
|
235
|
+
"references": {}
|
|
236
|
+
}
|
|
237
|
+
}, {
|
|
238
|
+
"method": "wmModalCloseTriggered",
|
|
239
|
+
"name": "wmModalCloseTriggered",
|
|
240
|
+
"bubbles": false,
|
|
241
|
+
"cancelable": true,
|
|
242
|
+
"composed": true,
|
|
243
|
+
"docs": {
|
|
244
|
+
"tags": [],
|
|
245
|
+
"text": ""
|
|
246
|
+
},
|
|
247
|
+
"complexType": {
|
|
248
|
+
"original": "any",
|
|
249
|
+
"resolved": "any",
|
|
250
|
+
"references": {}
|
|
251
|
+
}
|
|
252
|
+
}, {
|
|
253
|
+
"method": "wmModalPrimaryTriggered",
|
|
254
|
+
"name": "wmModalPrimaryTriggered",
|
|
255
|
+
"bubbles": true,
|
|
256
|
+
"cancelable": true,
|
|
257
|
+
"composed": true,
|
|
258
|
+
"docs": {
|
|
259
|
+
"tags": [],
|
|
260
|
+
"text": ""
|
|
261
|
+
},
|
|
262
|
+
"complexType": {
|
|
263
|
+
"original": "any",
|
|
264
|
+
"resolved": "any",
|
|
265
|
+
"references": {}
|
|
266
|
+
}
|
|
267
|
+
}, {
|
|
268
|
+
"method": "wmModalSecondaryTriggered",
|
|
269
|
+
"name": "wmModalSecondaryTriggered",
|
|
270
|
+
"bubbles": true,
|
|
271
|
+
"cancelable": true,
|
|
272
|
+
"composed": true,
|
|
273
|
+
"docs": {
|
|
274
|
+
"tags": [],
|
|
275
|
+
"text": ""
|
|
276
|
+
},
|
|
277
|
+
"complexType": {
|
|
278
|
+
"original": "any",
|
|
279
|
+
"resolved": "any",
|
|
280
|
+
"references": {}
|
|
281
|
+
}
|
|
282
|
+
}];
|
|
283
|
+
}
|
|
284
|
+
static get methods() {
|
|
285
|
+
return {
|
|
286
|
+
"emitCloseEvent": {
|
|
287
|
+
"complexType": {
|
|
288
|
+
"signature": "() => Promise<void>",
|
|
289
|
+
"parameters": [],
|
|
290
|
+
"references": {
|
|
291
|
+
"Promise": {
|
|
292
|
+
"location": "global",
|
|
293
|
+
"id": "global::Promise"
|
|
294
|
+
}
|
|
295
|
+
},
|
|
296
|
+
"return": "Promise<void>"
|
|
297
|
+
},
|
|
298
|
+
"docs": {
|
|
299
|
+
"text": "",
|
|
300
|
+
"tags": []
|
|
301
|
+
}
|
|
302
|
+
},
|
|
303
|
+
"emitPrimaryEvent": {
|
|
304
|
+
"complexType": {
|
|
305
|
+
"signature": "() => Promise<void>",
|
|
306
|
+
"parameters": [],
|
|
307
|
+
"references": {
|
|
308
|
+
"Promise": {
|
|
309
|
+
"location": "global",
|
|
310
|
+
"id": "global::Promise"
|
|
311
|
+
}
|
|
312
|
+
},
|
|
313
|
+
"return": "Promise<void>"
|
|
314
|
+
},
|
|
315
|
+
"docs": {
|
|
316
|
+
"text": "",
|
|
317
|
+
"tags": []
|
|
318
|
+
}
|
|
319
|
+
},
|
|
320
|
+
"emitSecondaryEvent": {
|
|
321
|
+
"complexType": {
|
|
322
|
+
"signature": "() => Promise<void>",
|
|
323
|
+
"parameters": [],
|
|
324
|
+
"references": {
|
|
325
|
+
"Promise": {
|
|
326
|
+
"location": "global",
|
|
327
|
+
"id": "global::Promise"
|
|
328
|
+
}
|
|
329
|
+
},
|
|
330
|
+
"return": "Promise<void>"
|
|
331
|
+
},
|
|
332
|
+
"docs": {
|
|
333
|
+
"text": "",
|
|
334
|
+
"tags": []
|
|
335
|
+
}
|
|
336
|
+
}
|
|
337
|
+
};
|
|
338
|
+
}
|
|
339
|
+
static get elementRef() { return "el"; }
|
|
340
|
+
static get watchers() {
|
|
341
|
+
return [{
|
|
342
|
+
"propName": "open",
|
|
343
|
+
"methodName": "toggleModal"
|
|
344
|
+
}];
|
|
345
|
+
}
|
|
346
|
+
static get listeners() {
|
|
347
|
+
return [{
|
|
348
|
+
"name": "click",
|
|
349
|
+
"method": "handleClick",
|
|
350
|
+
"target": undefined,
|
|
351
|
+
"capture": false,
|
|
352
|
+
"passive": false
|
|
353
|
+
}, {
|
|
354
|
+
"name": "keydown",
|
|
355
|
+
"method": "closeModalOnEscape",
|
|
356
|
+
"target": undefined,
|
|
357
|
+
"capture": false,
|
|
358
|
+
"passive": false
|
|
359
|
+
}];
|
|
360
|
+
}
|
|
361
|
+
}
|
|
@@ -34,7 +34,7 @@ export class NavigationHamburger {
|
|
|
34
34
|
this.wmNavigationHamburgerClicked.emit();
|
|
35
35
|
}
|
|
36
36
|
render() {
|
|
37
|
-
return (h(Host, { key: '
|
|
37
|
+
return (h(Host, { key: '64106288d26853ec6dced8c379e308910d0fc241', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { key: 'f874ff163e409ae233521d4c089d8f28911fe051', "aria-expanded": this.open, "aria-label": this.showNavMessage, onMouseEnter: () => showTooltip("right", this.el, this.showNavMessage), onMouseLeave: () => hideTooltip(), onFocus: () => this.isTabbing && showTooltip("right", this.el, this.showNavMessage), onBlur: () => hideTooltip(), onClick: () => this.handleClick() }, h("span", { key: 'd85220650c6728633ca27259b5a370bbc7d47e02', class: "icon" }))));
|
|
38
38
|
}
|
|
39
39
|
static get is() { return "wm-navigation-hamburger"; }
|
|
40
40
|
static get encapsulation() { return "shadow"; }
|
|
@@ -6,7 +6,7 @@ export class NavigationItem {
|
|
|
6
6
|
this.active = undefined;
|
|
7
7
|
}
|
|
8
8
|
render() {
|
|
9
|
-
return (h(Host, { key: '
|
|
9
|
+
return (h(Host, { key: 'c4420b1e4396ac065b3674f52b124c0d25359435', role: "listitem" }, h("a", { key: 'ffd82c5f726e982e4418c8bd335c3c151ac1fbfd', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { key: 'fe1a4418452356a9811359ded2aac74694f9a3d2', class: "icon", "aria-hidden": "true" }, h("slot", { key: '9690f8cbfb21a229493b9b7585ccdb3e90691aa1' })), h("div", { key: 'e134a8b4ca4df635c460b87e7a87cb3909737903', class: "text" }, this.text))));
|
|
10
10
|
}
|
|
11
11
|
static get is() { return "wm-navigation-item"; }
|
|
12
12
|
static get encapsulation() { return "shadow"; }
|
|
@@ -96,9 +96,9 @@ export class Navigation {
|
|
|
96
96
|
} }));
|
|
97
97
|
}
|
|
98
98
|
render() {
|
|
99
|
-
return (h(Host, { key: '
|
|
99
|
+
return (h(Host, { key: '4b46f2057cf47f6f2857a8c2fbd0113fbaa3d71b', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: 'fe2e1586827cdbc1d0de1813ca15e5dbd42d99c0', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: 'a65d6897042cadf2a43d99535c18ec314b6e1c54', class: "tray" }, h("div", { key: 'ff0242631c40b374c750e6377449d751ccc88d4c', class: "toggle-wrapper" }, h("wm-button", { key: 'e76ca281e2df25b9ab4169ff0aa9689ca3f71cae', ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "f156" : "f35c", "icon-size": "2rem", tooltip: this.open ? globalMessages.close : globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
|
|
100
100
|
this.open = !this.open;
|
|
101
|
-
} })), h("ul", { key: '
|
|
101
|
+
} })), h("ul", { key: 'd056d10575ad4aa3deb5cf00011d3469860625e0', class: "navlist" }, h("slot", { key: '5b4be146205fec5ffbd44970e60d7aa4e00c7fc1' }))), this.isCollapsible && (h("div", { key: 'dbba46d2e9e1c70a65cc968560197a56097775fe', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
|
|
102
102
|
}
|
|
103
103
|
static get is() { return "wm-navigation"; }
|
|
104
104
|
static get encapsulation() { return "shadow"; }
|
package/dist/collection/components/wm-navigator/priv-navigator-button/priv-navigator-button.js
CHANGED
|
@@ -9,7 +9,7 @@ export class PrivNavigatorButton {
|
|
|
9
9
|
}
|
|
10
10
|
render() {
|
|
11
11
|
const { handleClick, altText } = this;
|
|
12
|
-
return (h("button", { key: '
|
|
12
|
+
return (h("button", { key: '3ca7d2b0ff21d4b914876030af5cd167535b746e', "aria-expanded": this.expanded.toString(), class: "navigator", onClick: handleClick.bind(this), "aria-label": altText }));
|
|
13
13
|
}
|
|
14
14
|
static get is() { return "priv-navigator-button"; }
|
|
15
15
|
static get encapsulation() { return "shadow"; }
|
|
@@ -16,7 +16,7 @@ export class PrivNavigatorItem {
|
|
|
16
16
|
render() {
|
|
17
17
|
const selectedClass = this.selected ? "selected" : "";
|
|
18
18
|
const focusedClass = this.focused ? "focused" : "";
|
|
19
|
-
return (h("div", { key: '
|
|
19
|
+
return (h("div", { key: '42153239d733a5f9fdf0e968cdff02f77fe5d1a1', class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", { key: '2e924f14d849e7ba04e18f66637463f3d4d2b44c' })));
|
|
20
20
|
}
|
|
21
21
|
static get is() { return "priv-navigator-item"; }
|
|
22
22
|
static get encapsulation() { return "shadow"; }
|
|
@@ -151,7 +151,7 @@ export class Pagination {
|
|
|
151
151
|
render() {
|
|
152
152
|
return (
|
|
153
153
|
// do not render the component if there's only one page
|
|
154
|
-
this.totalItems > this.itemsPerPage && (h("nav", { key: '
|
|
154
|
+
this.totalItems > this.itemsPerPage && (h("nav", { key: 'ed11c99e89b41b3f6e9565525eb4a7e542355612', "aria-label": `Pagination Navigation. ${this.getCurrentPagesInView()}. Current page, ${this.currentPage}.` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { key: '7e0cd5a74588a0e64c44874552dbcfcb2a66f2a1', id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
|
|
155
155
|
}
|
|
156
156
|
static get is() { return "wm-pagination"; }
|
|
157
157
|
static get encapsulation() { return "shadow"; }
|
|
@@ -166,10 +166,10 @@ export class Search {
|
|
|
166
166
|
* End search and find render helpers
|
|
167
167
|
*/
|
|
168
168
|
render() {
|
|
169
|
-
return (h(Host, { key: '
|
|
169
|
+
return (h(Host, { key: 'e8fadea4ee156b4a7271c8713669e189adf32d34' }, h("div", { key: '6d4290bd32864cc38c4b12e57f3baeb08819f049', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { key: '2e2ef180f33db89d3aba91719b3db6ea454cfc6f', disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${intl.formatMessage({
|
|
170
170
|
id: "search.typeToFilterResults",
|
|
171
171
|
defaultMessage: "Type to filter the results",
|
|
172
|
-
})}`, onInput: (ev) => this.updateValue(ev.target.value), onBlur: () => this.handleBlur(), "aria-autocomplete": "none", autocomplete: "off", value: this.value }), h("span", { key: '
|
|
172
|
+
})}`, onInput: (ev) => this.updateValue(ev.target.value), onBlur: () => this.handleBlur(), "aria-autocomplete": "none", autocomplete: "off", value: this.value }), h("span", { key: '986eb365407500b246627f493a7e7e02361ceb23', class: "mdi search-icon" }, String.fromCodePoint(parseInt(`0xf349`))), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { key: '7b5d9a8c230e0a5c5138190ca845bd478b75d891', id: "wm-search-live", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.resultsLiveRegion = el) }, this.announcement)), this.searchType === "find" && this.renderJumpToLink()));
|
|
173
173
|
}
|
|
174
174
|
static get is() { return "wm-search"; }
|
|
175
175
|
static get encapsulation() { return "shadow"; }
|
|
@@ -150,11 +150,11 @@ export class Snackbar {
|
|
|
150
150
|
}, 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) })))));
|
|
151
151
|
}
|
|
152
152
|
render() {
|
|
153
|
-
return (h(Host, { key: '
|
|
153
|
+
return (h(Host, { key: '33c5774f24dcedb900c37712612fe410faed84ab' }, h("div", { key: 'ffa02798ded28138c9bbe7a6c2f571f30bba1475', ref: (el) => (this.snackAreaEl = el), class: {
|
|
154
154
|
"list-wrapper": true,
|
|
155
155
|
"user-is-tabbing": this.isTabbing,
|
|
156
156
|
empty: this.parsedNotifications.length == 0,
|
|
157
|
-
} }, this.renderSnackbars()), h("div", { key: '
|
|
157
|
+
} }, this.renderSnackbars()), h("div", { key: '93adbefa63a40797446084f6ceb109b0fe896436', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
|
|
158
158
|
}
|
|
159
159
|
static get is() { return "wm-snackbar"; }
|
|
160
160
|
static get encapsulation() { return "shadow"; }
|
|
@@ -40,7 +40,7 @@ export class TabItem {
|
|
|
40
40
|
"background-size": `calc(100% - ${bkgSize}${units}) 3px`,
|
|
41
41
|
};
|
|
42
42
|
}
|
|
43
|
-
return (h(Host, { key: '
|
|
43
|
+
return (h(Host, { key: '95738f3913118c776e26a990cb63e41f22e7f352', role: "presentation" }, h("li", { key: 'a57605c203990a0dcc23d8dcba547f294cafe8ee', class: "tab-item", role: "presentation" }, h("a", { key: 'd299ee8e5d94f0aa5e9aea031f32ccab98a88bf9', class: `tab ${classes}`, style: styles, role: "tab", ref: (el) => (this.linkEl = el), onClick: this.tabClicked, id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1 }, h("slot", { key: '85a2b7d56187a7ca6d7e99efd3214cd2f9cad09d' })))));
|
|
44
44
|
}
|
|
45
45
|
static get is() { return "wm-tab-item"; }
|
|
46
46
|
static get encapsulation() { return "shadow"; }
|
|
@@ -155,7 +155,7 @@ export class TabList {
|
|
|
155
155
|
} }, t.textContent)));
|
|
156
156
|
}
|
|
157
157
|
render() {
|
|
158
|
-
return h(Host, { key: '
|
|
158
|
+
return h(Host, { key: '9b1573d576177c3eeb42fd811118567743ee0c23', class: this.menuLayout ? "menu" : "" }, this.renderMenuOrTabs());
|
|
159
159
|
}
|
|
160
160
|
static get is() { return "wm-tab-list"; }
|
|
161
161
|
static get encapsulation() { return "shadow"; }
|
|
@@ -12,7 +12,7 @@ export class TabPanel {
|
|
|
12
12
|
this.tabPanelLoaded.emit({ tabId: this.tabId });
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
|
-
return h(Host, { key: '
|
|
15
|
+
return h(Host, { key: 'dac02ce55774d3d4520999a92766d4488f36cf39', role: "tabpanel", class: { "tab-hidden": !this.active } });
|
|
16
16
|
}
|
|
17
17
|
static get is() { return "wm-tab-panel"; }
|
|
18
18
|
static get originalStyleUrls() {
|
|
@@ -858,12 +858,12 @@ export class TagInput {
|
|
|
858
858
|
}
|
|
859
859
|
}
|
|
860
860
|
render() {
|
|
861
|
-
return (h("div", { key: '
|
|
861
|
+
return (h("div", { key: '2aeb57973cca66667e40249f1853b0532e039972', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'dca159804772027ce49a3f6d6c68e841a9b320c2', class: "label-wrapper" }, h("label", { key: '897e559fbb81a0ede815f45a226d8d8f67990b1b', class: "label", htmlFor: "input" }, this.label, this.requiredField && (h("span", { key: 'cdf63bc1dd5cf072f91d94746056675a5aed04d6', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '9370a03b002e7ccb4ff6ebfe47b9bfeaf9f262f6', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '81d03e7ea3116818dc234ec49f21a7ac24aca7b7', class: "upper-row" }, h("div", { key: 'c156c15343943a3be5e2267dfe956049da564c5e', class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { key: '3a66fab9e68db26b13f9500771c875315665afdb', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-label": `${this.label} ${this.tagAreaInstructions}`, tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
|
|
862
862
|
this.focusedTagIndex = undefined;
|
|
863
863
|
this.handleBlur(ev);
|
|
864
|
-
}, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("input", { key: '
|
|
864
|
+
}, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("input", { key: 'dc8c31e93a6cb229320eeeaa68cf38f11c568498', id: "input", class: "input", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": this.tagInputType, "aria-describedby": `help-text${this.errorMessage ? " error " : ""} max-tags`, "aria-label": `${this.label} ${this.isDropdown ? globalMessages.getCharacterLimit(this.characterLimit) : ""}`, "aria-expanded": this.isDropdown ? this.isExpanded.toString() : null, "aria-activedescendant": this.inputActiveDescendantId, placeholder: this.placeholder, maxLength: this.isDropdown ? this.characterLimit : undefined, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => {
|
|
865
865
|
this.handleBlur(ev);
|
|
866
|
-
}, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.isDropdown && (h("div", { key: '
|
|
866
|
+
}, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.isDropdown && (h("div", { key: '3984d2faaeff36f5f2a3a6bd09be94ff4122e373', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: 'ddf352301e9d9c90f7766d2f9ad3d6368d03c179', id: "info", class: "info-text" }, this.info)), h("div", { key: 'f24b06ad36ee1577dbac2b5e6ccfa488533bcdf3', id: "error" }, this.errorMessage), h("div", { key: 'ff7aafe467e6ba49e3ce4b066619d8c577b3a304', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
|
|
867
867
|
}
|
|
868
868
|
static get is() { return "wm-tag-input"; }
|
|
869
869
|
static get encapsulation() { return "shadow"; }
|
|
@@ -65,7 +65,7 @@ export class Textarea {
|
|
|
65
65
|
this.announcement = message;
|
|
66
66
|
}
|
|
67
67
|
render() {
|
|
68
|
-
return (h("div", { key: '
|
|
68
|
+
return (h("div", { key: 'f2771c26fe46e837b4ff57ea9f922c1ded455901', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '97219e918f72ba4b439fe97b1ffe1ad4b05344b0', class: "label-wrapper" }, h("label", { key: '3682c7ec2bcf6060b230f69f6815a7fbcb1631bb', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { key: 'ac07a0a0946a53f8947a388c44757109c70ea77e', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { key: 'beb4e904098a3691983a2ad4d1f539611ce8688d', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: 'f9d914ad58aca33fa3626fc8f19e0854762a1e9a', class: "inner-wrapper" }, h("div", { key: '241c56641abb90c00ec7d220f732835f107ff9ce', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: 'affce2792cec06d20290995d0cf9631ef6943358', id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (h("div", { key: 'ecb77aa2f1ec8bf0adc46ee68bf04d517a673bb6', id: "info", class: "info" }, this.info)), h("div", { key: 'a3e9ef2cc8d20a29411887b72aa3e1a6c9538bc9', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '86cef4053bdc750a5cd3e272bbfe50ace94aca03', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
|
|
69
69
|
}
|
|
70
70
|
static get is() { return "wm-textarea"; }
|
|
71
71
|
static get encapsulation() { return "shadow"; }
|
|
@@ -275,13 +275,13 @@ export class Timepicker {
|
|
|
275
275
|
return this.times.map((time, index) => (h("li", { id: `option${index + 1}`, "data-time": time, role: "option", onClick: () => this.handleOptionClick(time) }, this.reformatTimeInternal("12", time))));
|
|
276
276
|
}
|
|
277
277
|
render() {
|
|
278
|
-
return (h(Host, { key: '
|
|
278
|
+
return (h(Host, { key: '6bc7678c9d7ebdb700cb285cf84e06bab254cf30', onBlur: () => this.close(false) }, h("div", { key: 'e65c6b8869ab2c45ffa7d763971e315f989c6cbc', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: '7aab143d7bc8078e873bdcb0d65a43e059b1fc6b', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '18ad9a6109f0a79ac64fe14f0b2b62d58d41ce1a', id: "label", class: "label", htmlFor: "time-input" }, this.label, this.requiredField && (h("span", { key: '7d41c7ea552094b3ec38e8ea16c17efdcb18ffca', class: "required", "aria-hidden": "true" }, "*"))))), h("div", { key: 'aed930cc20ce7199f6bbfa833608183173ffe29f' }, h("div", { key: 'c9d9e20b0241ef6e2c89d15fcaa29318839a9e46', class: "inner-wrapper" }, h("input", { key: 'f3d3140ff49fb9d125993c9c8aeae1f27103846e', id: "time-input", "aria-label": this.label, "aria-describedby": "error", ref: (el) => (this.inputEl = el), onBlur: () => this.handleInputBlur(), onInput: () => (this.value = this.inputEl.value), disabled: this.isDisabled, "aria-required": this.requiredField ? "true" : null, placeholder: this.timeFormat, autocomplete: "off", value: this.value, onFocus: () => this.tpWrapper.classList.add("focus") }), h("button", { key: '7d201c36f8dc9aded13eb38ff1646edb3bf3573c', id: "btn", ref: (el) => (this.buttonEl = el), disabled: this.isDisabled, "aria-controls": "list", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.buttonAriaLabel, "aria-describedby": "time-input", onClick: () => (this.isExpanded ? this.close() : this.open()),
|
|
279
279
|
// This addresses an issue in Safari, where clicking buttons does not focus them
|
|
280
280
|
// if the button does not receive focus when clicked, Timepicker incorrectly emits a blur event
|
|
281
281
|
onMouseDown: (ev) => {
|
|
282
282
|
ev.preventDefault();
|
|
283
283
|
this.buttonEl.focus();
|
|
284
|
-
} }, h("span", { key: '
|
|
284
|
+
} }, h("span", { key: '895dd2c39f5b8e6503f56aa9987bc254992aca23', class: "clock" })), h("ul", { key: 'c908487a11edac0b973209922f969d5c2d6aa016', class: `options ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, id: "list", role: "listbox", "aria-labelledby": "label", "aria-describedby": this.isExpanded ? "collapsed" : null, tabindex: -1, ref: (el) => (this.optionsEl = el) }, this.renderOptions())), h("div", { key: '4924844ae5eebf2e06672014d418bd52cfdbbbf8', id: "error", class: "error" }, this.errorMessage)), h("div", { key: '7db7953b34467bb276c6b606415e988a230841b4', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
|
|
285
285
|
}
|
|
286
286
|
static get is() { return "wm-timepicker"; }
|
|
287
287
|
static get encapsulation() { return "shadow"; }
|
|
@@ -97,9 +97,9 @@ export class Toggletip {
|
|
|
97
97
|
}
|
|
98
98
|
}
|
|
99
99
|
render() {
|
|
100
|
-
return (h(Host, { key: '
|
|
100
|
+
return (h(Host, { key: '3649c97b6ed097b840c0fbfaca36233f5c153e98', class: `size-${this.targetSize}` }, h("button", { key: '7245bb050268a782fe5ba7dbe5a72b57c5fbb4e8', class: "button", type: "button", "aria-label": this.label, onClick: () => this.open(),
|
|
101
101
|
// In order to position the tooltip identically to the toggletip, it's presence is determined by these four events
|
|
102
|
-
onMouseEnter: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }), h("div", { key: '
|
|
102
|
+
onMouseEnter: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }), h("div", { key: '6617109efb830c025bdf8af64144c47e48d851ac', ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.isOpen ? "" : "hidden"} ${this.tooltipPosition}` }, this.tooltip), h("div", { key: '305954841b7f92772c778c02907b4740bafdc4d1', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
|
|
103
103
|
}
|
|
104
104
|
static get is() { return "wm-toggletip"; }
|
|
105
105
|
static get encapsulation() { return "shadow"; }
|
|
@@ -195,9 +195,9 @@ export class Uploader {
|
|
|
195
195
|
return (h("div", { class: `wrapper ${this.errorMessage ? "invalid" : ""}` }, h("div", { id: "label", class: `label` }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))));
|
|
196
196
|
}
|
|
197
197
|
render() {
|
|
198
|
-
return (h(Host, { key: '
|
|
198
|
+
return (h(Host, { key: 'd058c5c04f6a22125c54fa4cf076c23bc358b36e' }, this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: 'efa1a3c0b1a6258121356a41975b3599b6b575f9', ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
|
|
199
199
|
,
|
|
200
|
-
"aria-atomic": "true" }), h("div", { key: '
|
|
200
|
+
"aria-atomic": "true" }), h("div", { key: 'c601d1a1a22c4cc77eb0d7af79dda540f8f14940', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
|
|
201
201
|
}
|
|
202
202
|
static get is() { return "wm-uploader"; }
|
|
203
203
|
static get encapsulation() { return "shadow"; }
|