@watermarkinsights/ripple 5.29.0-alpha.8 → 5.29.0-alpha.9
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-aeed0e41.js → app-globals-3f72d25c.js} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/ripple.cjs.js +1 -1
- package/dist/cjs/wm-button.cjs.entry.js +1 -1
- package/dist/cjs/wm-date-range.cjs.entry.js +28 -9
- package/dist/cjs/wm-datepicker.cjs.entry.js +28 -9
- package/dist/collection/components/datepickers/wm-date-range.js +28 -9
- package/dist/collection/components/datepickers/wm-datepicker.js +28 -9
- package/dist/collection/components/wm-button/wm-button.js +1 -1
- package/dist/esm/{app-globals-37937c54.js → app-globals-d586ffcf.js} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/ripple.js +1 -1
- package/dist/esm/wm-button.entry.js +1 -1
- package/dist/esm/wm-date-range.entry.js +28 -9
- package/dist/esm/wm-datepicker.entry.js +28 -9
- package/dist/esm-es5/{app-globals-37937c54.js → app-globals-d586ffcf.js} +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/ripple.js +1 -1
- package/dist/esm-es5/wm-button.entry.js +1 -1
- package/dist/esm-es5/wm-date-range.entry.js +1 -1
- package/dist/esm-es5/wm-datepicker.entry.js +1 -1
- package/dist/ripple/{p-72039f11.system.js → p-5d872c60.system.js} +1 -1
- package/dist/ripple/p-6711165b.entry.js +1 -0
- package/dist/ripple/p-821f2384.entry.js +1 -0
- package/dist/ripple/{p-7e361924.entry.js → p-82913757.entry.js} +1 -1
- package/dist/ripple/{p-b7f54fed.system.entry.js → p-a951445f.system.entry.js} +1 -1
- package/dist/ripple/{p-1cab0596.js → p-abbc4bfe.js} +1 -1
- package/dist/ripple/{p-bf699317.system.entry.js → p-c106b6cc.system.entry.js} +1 -1
- package/dist/ripple/{p-bcaa3198.system.entry.js → p-c39e9f51.system.entry.js} +1 -1
- package/dist/ripple/{p-f6a19e4b.system.js → p-d7cc59a7.system.js} +1 -1
- package/dist/ripple/ripple.esm.js +1 -1
- package/dist/ripple/ripple.js +1 -1
- package/dist/types/components/datepickers/wm-date-range.d.ts +2 -0
- package/dist/types/components/datepickers/wm-datepicker.d.ts +2 -0
- package/package.json +2 -2
- package/dist/ripple/p-60bcc9f1.entry.js +0 -1
- package/dist/ripple/p-aece07d2.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-bb947bd5.js');
|
|
6
|
-
const appGlobals = require('./app-globals-
|
|
6
|
+
const appGlobals = require('./app-globals-3f72d25c.js');
|
|
7
7
|
|
|
8
8
|
const defineCustomElements = async (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-bb947bd5.js');
|
|
6
|
-
const appGlobals = require('./app-globals-
|
|
6
|
+
const appGlobals = require('./app-globals-3f72d25c.js');
|
|
7
7
|
|
|
8
8
|
/*
|
|
9
9
|
Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com
|
|
@@ -255,7 +255,7 @@ const Button = class {
|
|
|
255
255
|
}
|
|
256
256
|
}
|
|
257
257
|
render() {
|
|
258
|
-
return (index.h(index.Host, { key: '
|
|
258
|
+
return (index.h(index.Host, { key: '7cfb3bc7bc5f2c0e00c3cb38de71ac1b5465055c', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, index.h("button", { key: '9010f68296e4250cdf85fa21bfeb7b3a725fa072', id: this.id, class: `${this.buttonClasses}`, disabled: this.isDisabled, ref: (el) => (this.buttonEl = el), "aria-label": this.getAriaLabel(), "aria-hasPopup": this.ariaPopup ? "menu" : null, onMouseEnter: (ev) => this.handleMouseEnter(ev), onMouseLeave: () => functions.hideTooltip(), onFocus: (ev) => this.handleFocus(ev), onBlur: () => functions.hideTooltip(), onClick: () => functions.hideTooltip() }, this.icon && this.renderIcon(), (!this.buttonType.startsWith("navigational") && !this.buttonType.startsWith("icononly")) && (index.h("span", { key: '5167fea2767e091408e0b452ecca6d70bce711c6', class: "button-text" }, index.h("slot", { key: '3a9a85455a00434c1112c6070c83469d15640e31' }))), (this.buttonType == "selector" || this.buttonType == "selector-primary") && (index.h("div", { key: 'b9f5481cf0bb9fb56be6821127609eea72c788bc', class: "selector-icon svg-icon svg-expand-more" })))));
|
|
259
259
|
}
|
|
260
260
|
static get delegatesFocus() { return true; }
|
|
261
261
|
get el() { return index.getElement(this); }
|
|
@@ -24,6 +24,17 @@ const DateRange = class {
|
|
|
24
24
|
return; // bail if the component was unmounted before the debounce fired
|
|
25
25
|
this.canOpen = this.measureFit() !== null;
|
|
26
26
|
}, 100);
|
|
27
|
+
this.pf_repositionRAF = null;
|
|
28
|
+
this.pf_reposition = () => {
|
|
29
|
+
// rAF-throttle: native anchor() re-resolves on every frame; this matches that cadence
|
|
30
|
+
// without thrashing layout when scroll fires many times per frame.
|
|
31
|
+
if (this.pf_repositionRAF !== null)
|
|
32
|
+
return;
|
|
33
|
+
this.pf_repositionRAF = requestAnimationFrame(() => {
|
|
34
|
+
this.pf_repositionRAF = null;
|
|
35
|
+
this.pf_positionDropdown();
|
|
36
|
+
});
|
|
37
|
+
};
|
|
27
38
|
this.formats = { "mm/dd/yyyy": "US", "dd/mm/yyyy": "INT", "yyyy/mm/dd": "ISO" };
|
|
28
39
|
this.dateFormat = "mm/dd/yyyy";
|
|
29
40
|
this.disabled = false;
|
|
@@ -223,6 +234,9 @@ const DateRange = class {
|
|
|
223
234
|
}
|
|
224
235
|
if (!this.hasAnchor) {
|
|
225
236
|
this.pf_positionDropdown();
|
|
237
|
+
// capture: true catches scroll from any ancestor (scroll events don't bubble).
|
|
238
|
+
window.addEventListener("scroll", this.pf_reposition, { passive: true, capture: true });
|
|
239
|
+
window.addEventListener("resize", this.pf_reposition, { passive: true });
|
|
226
240
|
}
|
|
227
241
|
requestAnimationFrame(() => {
|
|
228
242
|
var _a, _b;
|
|
@@ -253,12 +267,17 @@ const DateRange = class {
|
|
|
253
267
|
if (scrollAmount > 0)
|
|
254
268
|
(_b = this.findScrollable(scrollAmount)) === null || _b === void 0 ? void 0 : _b.scrollBy({ top: scrollAmount, behavior: "smooth" });
|
|
255
269
|
}
|
|
256
|
-
else {
|
|
257
|
-
this.startCalEl.scrollIntoView({ behavior: "smooth", block: "nearest" });
|
|
258
|
-
}
|
|
259
270
|
});
|
|
260
271
|
}
|
|
261
272
|
else {
|
|
273
|
+
if (!this.hasAnchor) {
|
|
274
|
+
window.removeEventListener("scroll", this.pf_reposition, { capture: true });
|
|
275
|
+
window.removeEventListener("resize", this.pf_reposition);
|
|
276
|
+
if (this.pf_repositionRAF !== null) {
|
|
277
|
+
cancelAnimationFrame(this.pf_repositionRAF);
|
|
278
|
+
this.pf_repositionRAF = null;
|
|
279
|
+
}
|
|
280
|
+
}
|
|
262
281
|
this.fit = null;
|
|
263
282
|
// reset
|
|
264
283
|
// clearing these in case the user closes without finishing the process
|
|
@@ -517,25 +536,25 @@ const DateRange = class {
|
|
|
517
536
|
}
|
|
518
537
|
render() {
|
|
519
538
|
var _a, _b, _c, _d;
|
|
520
|
-
return (index.h(index.Host, { key: '
|
|
539
|
+
return (index.h(index.Host, { key: 'f082b7224cab15202ebc1222288eb1c1b054ee26', "aria-busy": "false" }, index.h("div", { key: '65e1bc3240fa4e9116a7ebfb89d0edbd59966ab2', ref: (d) => (this.wrapperEl = d), class: "wrapper" }, index.h("div", { key: '5736b31108d7cb360035e4a5f03c7a770a45bf14', class: "range-wrapper cal", ref: (el) => (this.anchorEl = el) }, index.h("div", { key: '1ebfc8b64211589b9726bf015c5a6d919c5049d5', class: "label-wrapper", id: "start-label-wrapper" }, index.h("label", { key: '1ba9b573bc1a53132dd75483c9efaa224ca64414', id: "startlabel", htmlFor: "start-date-input", class: "label", title: `${this.labelStart} (${this.dateFormat})` }, this.labelStart, this.requiredField && (index.h("span", { key: 'c849c11b482192a916815c55df7a7668f0d643e0', "aria-hidden": "true", class: "required" }, "*")))), index.h("div", { key: 'd41334efe0f909cb6c304e21ecf219a1425e49b8', class: "label-wrapper", id: "end-label-wrapper" }, index.h("label", { key: 'aa44f11eb5e06244f529c0ca1340e6af4177da82', id: "endlabel", htmlFor: "end-date-input", class: "label", title: `${this.labelEnd} (${this.dateFormat})` }, this.labelEnd, this.requiredField && (index.h("span", { key: '72f856d870e55929e4651d104b48a2a713e94411', "aria-hidden": "true", class: "required" }, "*")))), index.h("input", { key: '2579fee89010ce00cf2bfc37711939b53b53d027', disabled: this._disabled, type: "text", id: "start-date-input", class: `date-input input ${this.invalidStart ? "invalid" : ""}`, name: "start-date", placeholder: this.dateFormat, value: this.valueStart, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleStartInput(ev), onBlur: () => this.handleStartInputBlur(), ref: (input) => (this.startInputEl = input), "aria-describedby": "error", "aria-label": this.labelStart, "aria-required": this.requiredField ? "true" : null }), index.h("div", { key: '223b38400c6dfdd3b0d41ce2f90714c499abacc4', id: "hyphen" }, "\u00A0-\u00A0"), index.h("input", { key: 'f6ee7e06e6783720a3bb6b9cbc4eda6697ead014', disabled: this._disabled, type: "text", id: "end-date-input", class: `date-input input ${this.invalidEnd ? "invalid" : ""}`, name: "end-date", placeholder: this.dateFormat, value: this.valueEnd, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleEndInput(ev), onBlur: () => this.handleEndInputBlur(), ref: (input) => (this.endInputEl = input), "aria-describedby": "error", "aria-label": this.labelEnd, "aria-required": this.requiredField ? "true" : null }), index.h("div", { key: '433ae77f3fc4ee804da2c6e29a07ed1a405611f0', class: "toggle-wrapper", id: "toggle-wrapper" }, this.canOpen && (index.h("button", { key: '7708429eb69ab2653e392ad047583553e223a7f4', disabled: this.disabled, "aria-describedby": "start-date-input end-date-input", "aria-label": functions.intl.formatMessage({
|
|
521
540
|
id: "date.selectRange",
|
|
522
541
|
defaultMessage: "Select range",
|
|
523
542
|
description: "Button text for screen readers.",
|
|
524
|
-
}), ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle", popoverTarget: "popup-wrapper", popoverTargetAction: "toggle" }, index.h("span", { key: '
|
|
543
|
+
}), ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle", popoverTarget: "popup-wrapper", popoverTargetAction: "toggle" }, index.h("span", { key: '0fc1f2ac2c495dcf3beb188c23e1128cbe276c2d', class: "svg-icon svg-date" }), index.h("span", { key: '443a03b03efdcde3bdbfc20da4f7d43f74fce060', class: "calendar", title: functions.intl.formatMessage({
|
|
525
544
|
id: "date.calendarView",
|
|
526
545
|
defaultMessage: "Calendar View",
|
|
527
546
|
description: "Calendar button",
|
|
528
|
-
}) })))), index.h("div", { key: '
|
|
547
|
+
}) })))), index.h("div", { key: 'de856abe8acfef402870bc0bee557ad735f70c5c', class: `popup-wrapper popup-range ${this.startCalEl && this.startCalEl.view}-view ${this.isExpanded ? "is-open" : ""} ${!this.hasAnchor && !this.isExpanded ? "hidden" : ""} ${(_b = (_a = this.fit) === null || _a === void 0 ? void 0 : _a.vertical) !== null && _b !== void 0 ? _b : ""} ${(_d = (_c = this.fit) === null || _c === void 0 ? void 0 : _c.horizontal) !== null && _d !== void 0 ? _d : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), popover: "auto",
|
|
529
548
|
// @ts-ignore -- onToggle is a valid ToggleEvent listener for popover elements
|
|
530
|
-
onToggle: (ev) => this.handleToggle(ev) }, index.h("div", { key: '
|
|
549
|
+
onToggle: (ev) => this.handleToggle(ev) }, index.h("div", { key: 'f09c0cfb16e1d22061ca3b071f3c4c4028c2134c', class: "trapfocus", tabIndex: this.isExpanded ? 0 : undefined, onFocus: () => this.endCalEl.focusLastFocusable() }), index.h("priv-calendar", { key: 'e597ab635744082d8e1cc995f17388aaa8c32567', ref: (el) => (this.startCalEl = el), onDateFocus: (ev) => this.handleDateFocus(ev) }), index.h("priv-calendar", { key: '7cc2f6d1e2fd875337d27b14047eecb4c548b10c', ref: (el) => (this.endCalEl = el), onDateFocus: (ev) => this.handleDateFocus(ev) }), index.h("div", { key: 'fb48a129bb023cc4ee1e7b9ec0118a75c73e9a3b', class: "trapfocus", tabIndex: this.isExpanded ? 0 : undefined, onFocus: () => this.startCalEl.focusFirstFocusable() }))), index.h("div", { key: 'cbb77ea4a3536636ee81a1c8ef54b258bf7be7fa' }, index.h("div", { key: '069d6dfb9f05e3098fd877a6497b6c419c39a76d', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), index.h("div", { key: 'e9f3ed922577cfb6fe3ae001589074fcab8edf7a', id: "month-title", class: "sr-only" }, functions.intl.formatMessage({
|
|
531
550
|
id: "date.selectMonth",
|
|
532
551
|
defaultMessage: "Activate to select a month.",
|
|
533
552
|
description: "Calendar button",
|
|
534
|
-
})), index.h("div", { key: '
|
|
553
|
+
})), index.h("div", { key: 'c62e4d195394da08b91d6358521c2f21b5d3898b', id: "year-title", class: "sr-only" }, functions.intl.formatMessage({
|
|
535
554
|
id: "date.selectYear",
|
|
536
555
|
defaultMessage: "Activate to select a year.",
|
|
537
556
|
description: "Calendar button",
|
|
538
|
-
}))), index.h("div", { key: '
|
|
557
|
+
}))), index.h("div", { key: '07743caf440aa658df6d22cdca611c1c73f62351', id: "error", class: "error" }, this.errorMessage), index.h("div", { key: '85248a82b66f6db0005e27a03a4a7c4d8572a404', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }))));
|
|
539
558
|
}
|
|
540
559
|
static get delegatesFocus() { return true; }
|
|
541
560
|
get el() { return index.getElement(this); }
|
|
@@ -23,6 +23,17 @@ const DatePicker = class {
|
|
|
23
23
|
return; // bail if the component was unmounted before the debounce fired
|
|
24
24
|
this.canOpen = this.measureFit() !== null;
|
|
25
25
|
}, 100);
|
|
26
|
+
this.pf_repositionRAF = null;
|
|
27
|
+
this.pf_reposition = () => {
|
|
28
|
+
// rAF-throttle: native anchor() re-resolves on every frame; this matches that cadence
|
|
29
|
+
// without thrashing layout when scroll fires many times per frame.
|
|
30
|
+
if (this.pf_repositionRAF !== null)
|
|
31
|
+
return;
|
|
32
|
+
this.pf_repositionRAF = requestAnimationFrame(() => {
|
|
33
|
+
this.pf_repositionRAF = null;
|
|
34
|
+
this.pf_positionDropdown();
|
|
35
|
+
});
|
|
36
|
+
};
|
|
26
37
|
this.value = "";
|
|
27
38
|
this.disabled = false;
|
|
28
39
|
this.dateFormat = "mm/dd/yyyy";
|
|
@@ -164,6 +175,9 @@ const DatePicker = class {
|
|
|
164
175
|
}
|
|
165
176
|
if (!this.hasAnchor) {
|
|
166
177
|
this.pf_positionDropdown();
|
|
178
|
+
// capture: true catches scroll from any ancestor (scroll events don't bubble).
|
|
179
|
+
window.addEventListener("scroll", this.pf_reposition, { passive: true, capture: true });
|
|
180
|
+
window.addEventListener("resize", this.pf_reposition, { passive: true });
|
|
167
181
|
}
|
|
168
182
|
requestAnimationFrame(() => {
|
|
169
183
|
var _a, _b;
|
|
@@ -176,12 +190,17 @@ const DatePicker = class {
|
|
|
176
190
|
if (scrollAmount > 0)
|
|
177
191
|
(_b = this.findScrollable(scrollAmount)) === null || _b === void 0 ? void 0 : _b.scrollBy({ top: scrollAmount, behavior: "smooth" });
|
|
178
192
|
}
|
|
179
|
-
else {
|
|
180
|
-
this.calEl.scrollIntoView({ behavior: "smooth", block: "nearest" });
|
|
181
|
-
}
|
|
182
193
|
});
|
|
183
194
|
}
|
|
184
195
|
else {
|
|
196
|
+
if (!this.hasAnchor) {
|
|
197
|
+
window.removeEventListener("scroll", this.pf_reposition, { capture: true });
|
|
198
|
+
window.removeEventListener("resize", this.pf_reposition);
|
|
199
|
+
if (this.pf_repositionRAF !== null) {
|
|
200
|
+
cancelAnimationFrame(this.pf_repositionRAF);
|
|
201
|
+
this.pf_repositionRAF = null;
|
|
202
|
+
}
|
|
203
|
+
}
|
|
185
204
|
this.fit = null;
|
|
186
205
|
this.isExpanded = false;
|
|
187
206
|
this.calEl.view = "day";
|
|
@@ -316,25 +335,25 @@ const DatePicker = class {
|
|
|
316
335
|
}
|
|
317
336
|
render() {
|
|
318
337
|
var _a, _b, _c, _d;
|
|
319
|
-
return (index.h(index.Host, { key: '
|
|
338
|
+
return (index.h(index.Host, { key: '7ffa8d1d3c09bfaebf46a1ab8b130db3e6ebd5d1', "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '036c05d1ae4ee77b517b8d43fe383f7be6825bf6', ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '614c58233013db6f63a556a0b7a33566da3b333e', class: "label-wrapper" }, this.labelPosition !== "none" && (index.h("label", { key: '371f28fdcf49c3e44624a07321506ff53d884b95', id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})`, onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (index.h("div", { key: 'd2c7877c8fab8db02004f5ba13232cc724f6e010', "aria-hidden": "true", class: "required" }, "*"))), index.h("div", { key: '8ba1157d7c2978f853cc764b3aa848db38eb218d' }, index.h("div", { key: 'af846f4900d77f77d4029dcc9488847ca6768630', class: "single-wrapper input", ref: (el) => (this.anchorEl = el) }, index.h("input", { key: 'a4595b61a3c91d55124c7a1f93b238f78ca515a5', disabled: this.isDisabled, type: "text", id: "single-date-input", class: "date-input", name: "date", placeholder: this.dateFormat, value: this.value, onFocus: () => this.handleInputFocus(), onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleInputBlur(), onChange: () => this.handleInputChange(), ref: (input) => (this.inputEl = input), "aria-describedby": "error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), index.h("div", { key: 'd796e37f9c7946227b7b9c0cbc7d22515fb3c93a', class: "container", id: "wm-container" }, this.canOpen && (index.h("button", { key: 'e8b8704d0138af2768a83fdbd1915562408cd55e', disabled: this.disabled, "aria-label": functions.intl.formatMessage({
|
|
320
339
|
id: "date.selectDate",
|
|
321
340
|
defaultMessage: "Select date",
|
|
322
341
|
description: "Button text for screen readers.",
|
|
323
|
-
}), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle", popoverTarget: "popup-wrapper", popoverTargetAction: "toggle" }, index.h("span", { key: '
|
|
342
|
+
}), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle", popoverTarget: "popup-wrapper", popoverTargetAction: "toggle" }, index.h("span", { key: '79b8dda7f1d9aa19d62f50274302d9b4ce169ea5', class: "svg-icon svg-date" }), index.h("span", { key: 'df52b9ca12607162ee448ac19f015627b90afbf6', class: "calendar", title: functions.intl.formatMessage({
|
|
324
343
|
id: "date.calendarView",
|
|
325
344
|
defaultMessage: "Calendar View",
|
|
326
345
|
description: "Calendar button",
|
|
327
|
-
}) }))), index.h("div", { key: '
|
|
346
|
+
}) }))), index.h("div", { key: 'aba1bef22da9727a29de77aaf8ba4a039a82d793', class: `popup-wrapper ${this.calEl && this.calEl.view}-view ${this.isExpanded ? "is-open" : ""} ${!this.hasAnchor && !this.isExpanded ? "hidden" : ""} ${(_b = (_a = this.fit) === null || _a === void 0 ? void 0 : _a.vertical) !== null && _b !== void 0 ? _b : ""} ${(_d = (_c = this.fit) === null || _c === void 0 ? void 0 : _c.horizontal) !== null && _d !== void 0 ? _d : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), popover: "auto",
|
|
328
347
|
// @ts-ignore -- onToggle is a valid ToggleEvent listener for popover elements
|
|
329
|
-
onToggle: (ev) => this.handleToggle(ev) }, index.h("div", { key: '
|
|
348
|
+
onToggle: (ev) => this.handleToggle(ev) }, index.h("div", { key: 'a748ed6c4ed43f1bd8475217fee7dba224a661b2', tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), index.h("priv-calendar", { key: 'ad1e6c0d9ef1de2a2104de952256e18f7abce6fc', ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), index.h("div", { key: '3d27bef5891d01c0c36c8a05510724c78e0340c0', tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), index.h("div", { key: '262ea6a8a13ee42d2efb49b642720762dd5bcf08', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), index.h("div", { key: '23b56fdf73f13e0f5ee06c854d7d2541d84a3220', id: "month-title", class: "sr-only" }, functions.intl.formatMessage({
|
|
330
349
|
id: "date.selectMonth",
|
|
331
350
|
defaultMessage: "Activate to select a month.",
|
|
332
351
|
description: "Calendar button",
|
|
333
|
-
})), index.h("div", { key: '
|
|
352
|
+
})), index.h("div", { key: '878bfc3e64c6d49ae178f5e57e5bb802fefd6fb9', id: "year-title", class: "sr-only" }, functions.intl.formatMessage({
|
|
334
353
|
id: "date.selectYear",
|
|
335
354
|
defaultMessage: "Activate to select a year.",
|
|
336
355
|
description: "Calendar button",
|
|
337
|
-
})))), index.h("div", { key: '
|
|
356
|
+
})))), index.h("div", { key: '809561d58dd226d0bf05a3678a793a4aaa6813a5', id: "error", class: "error" }, this.errorMessage), index.h("div", { key: '252bf955bc3885fece7219dad0b1819a33a29bf7', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" })))));
|
|
338
357
|
}
|
|
339
358
|
static get delegatesFocus() { return true; }
|
|
340
359
|
get el() { return index.getElement(this); }
|
|
@@ -12,6 +12,17 @@ export class DateRange {
|
|
|
12
12
|
return; // bail if the component was unmounted before the debounce fired
|
|
13
13
|
this.canOpen = this.measureFit() !== null;
|
|
14
14
|
}, 100);
|
|
15
|
+
this.pf_repositionRAF = null;
|
|
16
|
+
this.pf_reposition = () => {
|
|
17
|
+
// rAF-throttle: native anchor() re-resolves on every frame; this matches that cadence
|
|
18
|
+
// without thrashing layout when scroll fires many times per frame.
|
|
19
|
+
if (this.pf_repositionRAF !== null)
|
|
20
|
+
return;
|
|
21
|
+
this.pf_repositionRAF = requestAnimationFrame(() => {
|
|
22
|
+
this.pf_repositionRAF = null;
|
|
23
|
+
this.pf_positionDropdown();
|
|
24
|
+
});
|
|
25
|
+
};
|
|
15
26
|
this.formats = { "mm/dd/yyyy": "US", "dd/mm/yyyy": "INT", "yyyy/mm/dd": "ISO" };
|
|
16
27
|
this.dateFormat = "mm/dd/yyyy";
|
|
17
28
|
this.disabled = false;
|
|
@@ -211,6 +222,9 @@ export class DateRange {
|
|
|
211
222
|
}
|
|
212
223
|
if (!this.hasAnchor) {
|
|
213
224
|
this.pf_positionDropdown();
|
|
225
|
+
// capture: true catches scroll from any ancestor (scroll events don't bubble).
|
|
226
|
+
window.addEventListener("scroll", this.pf_reposition, { passive: true, capture: true });
|
|
227
|
+
window.addEventListener("resize", this.pf_reposition, { passive: true });
|
|
214
228
|
}
|
|
215
229
|
requestAnimationFrame(() => {
|
|
216
230
|
var _a, _b;
|
|
@@ -241,12 +255,17 @@ export class DateRange {
|
|
|
241
255
|
if (scrollAmount > 0)
|
|
242
256
|
(_b = this.findScrollable(scrollAmount)) === null || _b === void 0 ? void 0 : _b.scrollBy({ top: scrollAmount, behavior: "smooth" });
|
|
243
257
|
}
|
|
244
|
-
else {
|
|
245
|
-
this.startCalEl.scrollIntoView({ behavior: "smooth", block: "nearest" });
|
|
246
|
-
}
|
|
247
258
|
});
|
|
248
259
|
}
|
|
249
260
|
else {
|
|
261
|
+
if (!this.hasAnchor) {
|
|
262
|
+
window.removeEventListener("scroll", this.pf_reposition, { capture: true });
|
|
263
|
+
window.removeEventListener("resize", this.pf_reposition);
|
|
264
|
+
if (this.pf_repositionRAF !== null) {
|
|
265
|
+
cancelAnimationFrame(this.pf_repositionRAF);
|
|
266
|
+
this.pf_repositionRAF = null;
|
|
267
|
+
}
|
|
268
|
+
}
|
|
250
269
|
this.fit = null;
|
|
251
270
|
// reset
|
|
252
271
|
// clearing these in case the user closes without finishing the process
|
|
@@ -505,25 +524,25 @@ export class DateRange {
|
|
|
505
524
|
}
|
|
506
525
|
render() {
|
|
507
526
|
var _a, _b, _c, _d;
|
|
508
|
-
return (h(Host, { key: '
|
|
527
|
+
return (h(Host, { key: 'f082b7224cab15202ebc1222288eb1c1b054ee26', "aria-busy": "false" }, h("div", { key: '65e1bc3240fa4e9116a7ebfb89d0edbd59966ab2', ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { key: '5736b31108d7cb360035e4a5f03c7a770a45bf14', class: "range-wrapper cal", ref: (el) => (this.anchorEl = el) }, h("div", { key: '1ebfc8b64211589b9726bf015c5a6d919c5049d5', class: "label-wrapper", id: "start-label-wrapper" }, h("label", { key: '1ba9b573bc1a53132dd75483c9efaa224ca64414', id: "startlabel", htmlFor: "start-date-input", class: "label", title: `${this.labelStart} (${this.dateFormat})` }, this.labelStart, this.requiredField && (h("span", { key: 'c849c11b482192a916815c55df7a7668f0d643e0', "aria-hidden": "true", class: "required" }, "*")))), h("div", { key: 'd41334efe0f909cb6c304e21ecf219a1425e49b8', class: "label-wrapper", id: "end-label-wrapper" }, h("label", { key: 'aa44f11eb5e06244f529c0ca1340e6af4177da82', id: "endlabel", htmlFor: "end-date-input", class: "label", title: `${this.labelEnd} (${this.dateFormat})` }, this.labelEnd, this.requiredField && (h("span", { key: '72f856d870e55929e4651d104b48a2a713e94411', "aria-hidden": "true", class: "required" }, "*")))), h("input", { key: '2579fee89010ce00cf2bfc37711939b53b53d027', disabled: this._disabled, type: "text", id: "start-date-input", class: `date-input input ${this.invalidStart ? "invalid" : ""}`, name: "start-date", placeholder: this.dateFormat, value: this.valueStart, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleStartInput(ev), onBlur: () => this.handleStartInputBlur(), ref: (input) => (this.startInputEl = input), "aria-describedby": "error", "aria-label": this.labelStart, "aria-required": this.requiredField ? "true" : null }), h("div", { key: '223b38400c6dfdd3b0d41ce2f90714c499abacc4', id: "hyphen" }, "\u00A0-\u00A0"), h("input", { key: 'f6ee7e06e6783720a3bb6b9cbc4eda6697ead014', disabled: this._disabled, type: "text", id: "end-date-input", class: `date-input input ${this.invalidEnd ? "invalid" : ""}`, name: "end-date", placeholder: this.dateFormat, value: this.valueEnd, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleEndInput(ev), onBlur: () => this.handleEndInputBlur(), ref: (input) => (this.endInputEl = input), "aria-describedby": "error", "aria-label": this.labelEnd, "aria-required": this.requiredField ? "true" : null }), h("div", { key: '433ae77f3fc4ee804da2c6e29a07ed1a405611f0', class: "toggle-wrapper", id: "toggle-wrapper" }, this.canOpen && (h("button", { key: '7708429eb69ab2653e392ad047583553e223a7f4', disabled: this.disabled, "aria-describedby": "start-date-input end-date-input", "aria-label": intl.formatMessage({
|
|
509
528
|
id: "date.selectRange",
|
|
510
529
|
defaultMessage: "Select range",
|
|
511
530
|
description: "Button text for screen readers.",
|
|
512
|
-
}), ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle", popoverTarget: "popup-wrapper", popoverTargetAction: "toggle" }, h("span", { key: '
|
|
531
|
+
}), ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle", popoverTarget: "popup-wrapper", popoverTargetAction: "toggle" }, h("span", { key: '0fc1f2ac2c495dcf3beb188c23e1128cbe276c2d', class: "svg-icon svg-date" }), h("span", { key: '443a03b03efdcde3bdbfc20da4f7d43f74fce060', class: "calendar", title: intl.formatMessage({
|
|
513
532
|
id: "date.calendarView",
|
|
514
533
|
defaultMessage: "Calendar View",
|
|
515
534
|
description: "Calendar button",
|
|
516
|
-
}) })))), h("div", { key: '
|
|
535
|
+
}) })))), h("div", { key: 'de856abe8acfef402870bc0bee557ad735f70c5c', class: `popup-wrapper popup-range ${this.startCalEl && this.startCalEl.view}-view ${this.isExpanded ? "is-open" : ""} ${!this.hasAnchor && !this.isExpanded ? "hidden" : ""} ${(_b = (_a = this.fit) === null || _a === void 0 ? void 0 : _a.vertical) !== null && _b !== void 0 ? _b : ""} ${(_d = (_c = this.fit) === null || _c === void 0 ? void 0 : _c.horizontal) !== null && _d !== void 0 ? _d : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), popover: "auto",
|
|
517
536
|
// @ts-ignore -- onToggle is a valid ToggleEvent listener for popover elements
|
|
518
|
-
onToggle: (ev) => this.handleToggle(ev) }, h("div", { key: '
|
|
537
|
+
onToggle: (ev) => this.handleToggle(ev) }, h("div", { key: 'f09c0cfb16e1d22061ca3b071f3c4c4028c2134c', class: "trapfocus", tabIndex: this.isExpanded ? 0 : undefined, onFocus: () => this.endCalEl.focusLastFocusable() }), h("priv-calendar", { key: 'e597ab635744082d8e1cc995f17388aaa8c32567', ref: (el) => (this.startCalEl = el), onDateFocus: (ev) => this.handleDateFocus(ev) }), h("priv-calendar", { key: '7cc2f6d1e2fd875337d27b14047eecb4c548b10c', ref: (el) => (this.endCalEl = el), onDateFocus: (ev) => this.handleDateFocus(ev) }), h("div", { key: 'fb48a129bb023cc4ee1e7b9ec0118a75c73e9a3b', class: "trapfocus", tabIndex: this.isExpanded ? 0 : undefined, onFocus: () => this.startCalEl.focusFirstFocusable() }))), h("div", { key: 'cbb77ea4a3536636ee81a1c8ef54b258bf7be7fa' }, h("div", { key: '069d6dfb9f05e3098fd877a6497b6c419c39a76d', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: 'e9f3ed922577cfb6fe3ae001589074fcab8edf7a', id: "month-title", class: "sr-only" }, intl.formatMessage({
|
|
519
538
|
id: "date.selectMonth",
|
|
520
539
|
defaultMessage: "Activate to select a month.",
|
|
521
540
|
description: "Calendar button",
|
|
522
|
-
})), h("div", { key: '
|
|
541
|
+
})), h("div", { key: 'c62e4d195394da08b91d6358521c2f21b5d3898b', id: "year-title", class: "sr-only" }, intl.formatMessage({
|
|
523
542
|
id: "date.selectYear",
|
|
524
543
|
defaultMessage: "Activate to select a year.",
|
|
525
544
|
description: "Calendar button",
|
|
526
|
-
}))), h("div", { key: '
|
|
545
|
+
}))), h("div", { key: '07743caf440aa658df6d22cdca611c1c73f62351', id: "error", class: "error" }, this.errorMessage), h("div", { key: '85248a82b66f6db0005e27a03a4a7c4d8572a404', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }))));
|
|
527
546
|
}
|
|
528
547
|
static get is() { return "wm-date-range"; }
|
|
529
548
|
static get encapsulation() { return "shadow"; }
|
|
@@ -12,6 +12,17 @@ export class DatePicker {
|
|
|
12
12
|
return; // bail if the component was unmounted before the debounce fired
|
|
13
13
|
this.canOpen = this.measureFit() !== null;
|
|
14
14
|
}, 100);
|
|
15
|
+
this.pf_repositionRAF = null;
|
|
16
|
+
this.pf_reposition = () => {
|
|
17
|
+
// rAF-throttle: native anchor() re-resolves on every frame; this matches that cadence
|
|
18
|
+
// without thrashing layout when scroll fires many times per frame.
|
|
19
|
+
if (this.pf_repositionRAF !== null)
|
|
20
|
+
return;
|
|
21
|
+
this.pf_repositionRAF = requestAnimationFrame(() => {
|
|
22
|
+
this.pf_repositionRAF = null;
|
|
23
|
+
this.pf_positionDropdown();
|
|
24
|
+
});
|
|
25
|
+
};
|
|
15
26
|
this.value = "";
|
|
16
27
|
this.disabled = false;
|
|
17
28
|
this.dateFormat = "mm/dd/yyyy";
|
|
@@ -153,6 +164,9 @@ export class DatePicker {
|
|
|
153
164
|
}
|
|
154
165
|
if (!this.hasAnchor) {
|
|
155
166
|
this.pf_positionDropdown();
|
|
167
|
+
// capture: true catches scroll from any ancestor (scroll events don't bubble).
|
|
168
|
+
window.addEventListener("scroll", this.pf_reposition, { passive: true, capture: true });
|
|
169
|
+
window.addEventListener("resize", this.pf_reposition, { passive: true });
|
|
156
170
|
}
|
|
157
171
|
requestAnimationFrame(() => {
|
|
158
172
|
var _a, _b;
|
|
@@ -165,12 +179,17 @@ export class DatePicker {
|
|
|
165
179
|
if (scrollAmount > 0)
|
|
166
180
|
(_b = this.findScrollable(scrollAmount)) === null || _b === void 0 ? void 0 : _b.scrollBy({ top: scrollAmount, behavior: "smooth" });
|
|
167
181
|
}
|
|
168
|
-
else {
|
|
169
|
-
this.calEl.scrollIntoView({ behavior: "smooth", block: "nearest" });
|
|
170
|
-
}
|
|
171
182
|
});
|
|
172
183
|
}
|
|
173
184
|
else {
|
|
185
|
+
if (!this.hasAnchor) {
|
|
186
|
+
window.removeEventListener("scroll", this.pf_reposition, { capture: true });
|
|
187
|
+
window.removeEventListener("resize", this.pf_reposition);
|
|
188
|
+
if (this.pf_repositionRAF !== null) {
|
|
189
|
+
cancelAnimationFrame(this.pf_repositionRAF);
|
|
190
|
+
this.pf_repositionRAF = null;
|
|
191
|
+
}
|
|
192
|
+
}
|
|
174
193
|
this.fit = null;
|
|
175
194
|
this.isExpanded = false;
|
|
176
195
|
this.calEl.view = "day";
|
|
@@ -305,25 +324,25 @@ export class DatePicker {
|
|
|
305
324
|
}
|
|
306
325
|
render() {
|
|
307
326
|
var _a, _b, _c, _d;
|
|
308
|
-
return (h(Host, { key: '
|
|
327
|
+
return (h(Host, { key: '7ffa8d1d3c09bfaebf46a1ab8b130db3e6ebd5d1', "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '036c05d1ae4ee77b517b8d43fe383f7be6825bf6', ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '614c58233013db6f63a556a0b7a33566da3b333e', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '371f28fdcf49c3e44624a07321506ff53d884b95', id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})`, onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: 'd2c7877c8fab8db02004f5ba13232cc724f6e010', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: '8ba1157d7c2978f853cc764b3aa848db38eb218d' }, h("div", { key: 'af846f4900d77f77d4029dcc9488847ca6768630', class: "single-wrapper input", ref: (el) => (this.anchorEl = el) }, h("input", { key: 'a4595b61a3c91d55124c7a1f93b238f78ca515a5', disabled: this.isDisabled, type: "text", id: "single-date-input", class: "date-input", name: "date", placeholder: this.dateFormat, value: this.value, onFocus: () => this.handleInputFocus(), onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleInputBlur(), onChange: () => this.handleInputChange(), ref: (input) => (this.inputEl = input), "aria-describedby": "error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), h("div", { key: 'd796e37f9c7946227b7b9c0cbc7d22515fb3c93a', class: "container", id: "wm-container" }, this.canOpen && (h("button", { key: 'e8b8704d0138af2768a83fdbd1915562408cd55e', disabled: this.disabled, "aria-label": intl.formatMessage({
|
|
309
328
|
id: "date.selectDate",
|
|
310
329
|
defaultMessage: "Select date",
|
|
311
330
|
description: "Button text for screen readers.",
|
|
312
|
-
}), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle", popoverTarget: "popup-wrapper", popoverTargetAction: "toggle" }, h("span", { key: '
|
|
331
|
+
}), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle", popoverTarget: "popup-wrapper", popoverTargetAction: "toggle" }, h("span", { key: '79b8dda7f1d9aa19d62f50274302d9b4ce169ea5', class: "svg-icon svg-date" }), h("span", { key: 'df52b9ca12607162ee448ac19f015627b90afbf6', class: "calendar", title: intl.formatMessage({
|
|
313
332
|
id: "date.calendarView",
|
|
314
333
|
defaultMessage: "Calendar View",
|
|
315
334
|
description: "Calendar button",
|
|
316
|
-
}) }))), h("div", { key: '
|
|
335
|
+
}) }))), h("div", { key: 'aba1bef22da9727a29de77aaf8ba4a039a82d793', class: `popup-wrapper ${this.calEl && this.calEl.view}-view ${this.isExpanded ? "is-open" : ""} ${!this.hasAnchor && !this.isExpanded ? "hidden" : ""} ${(_b = (_a = this.fit) === null || _a === void 0 ? void 0 : _a.vertical) !== null && _b !== void 0 ? _b : ""} ${(_d = (_c = this.fit) === null || _c === void 0 ? void 0 : _c.horizontal) !== null && _d !== void 0 ? _d : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), popover: "auto",
|
|
317
336
|
// @ts-ignore -- onToggle is a valid ToggleEvent listener for popover elements
|
|
318
|
-
onToggle: (ev) => this.handleToggle(ev) }, h("div", { key: '
|
|
337
|
+
onToggle: (ev) => this.handleToggle(ev) }, h("div", { key: 'a748ed6c4ed43f1bd8475217fee7dba224a661b2', tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), h("priv-calendar", { key: 'ad1e6c0d9ef1de2a2104de952256e18f7abce6fc', ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), h("div", { key: '3d27bef5891d01c0c36c8a05510724c78e0340c0', tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), h("div", { key: '262ea6a8a13ee42d2efb49b642720762dd5bcf08', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: '23b56fdf73f13e0f5ee06c854d7d2541d84a3220', id: "month-title", class: "sr-only" }, intl.formatMessage({
|
|
319
338
|
id: "date.selectMonth",
|
|
320
339
|
defaultMessage: "Activate to select a month.",
|
|
321
340
|
description: "Calendar button",
|
|
322
|
-
})), h("div", { key: '
|
|
341
|
+
})), h("div", { key: '878bfc3e64c6d49ae178f5e57e5bb802fefd6fb9', id: "year-title", class: "sr-only" }, intl.formatMessage({
|
|
323
342
|
id: "date.selectYear",
|
|
324
343
|
defaultMessage: "Activate to select a year.",
|
|
325
344
|
description: "Calendar button",
|
|
326
|
-
})))), h("div", { key: '
|
|
345
|
+
})))), h("div", { key: '809561d58dd226d0bf05a3678a793a4aaa6813a5', id: "error", class: "error" }, this.errorMessage), h("div", { key: '252bf955bc3885fece7219dad0b1819a33a29bf7', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" })))));
|
|
327
346
|
}
|
|
328
347
|
static get is() { return "wm-datepicker"; }
|
|
329
348
|
static get encapsulation() { return "shadow"; }
|
|
@@ -246,7 +246,7 @@ export class Button {
|
|
|
246
246
|
}
|
|
247
247
|
}
|
|
248
248
|
render() {
|
|
249
|
-
return (h(Host, { key: '
|
|
249
|
+
return (h(Host, { key: '7cfb3bc7bc5f2c0e00c3cb38de71ac1b5465055c', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: '9010f68296e4250cdf85fa21bfeb7b3a725fa072', id: this.id, class: `${this.buttonClasses}`, disabled: this.isDisabled, ref: (el) => (this.buttonEl = el), "aria-label": this.getAriaLabel(), "aria-hasPopup": this.ariaPopup ? "menu" : null, onMouseEnter: (ev) => this.handleMouseEnter(ev), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.handleFocus(ev), onBlur: () => hideTooltip(), onClick: () => hideTooltip() }, this.icon && this.renderIcon(), (!this.buttonType.startsWith("navigational") && !this.buttonType.startsWith("icononly")) && (h("span", { key: '5167fea2767e091408e0b452ecca6d70bce711c6', class: "button-text" }, h("slot", { key: '3a9a85455a00434c1112c6070c83469d15640e31' }))), (this.buttonType == "selector" || this.buttonType == "selector-primary") && (h("div", { key: 'b9f5481cf0bb9fb56be6821127609eea72c788bc', class: "selector-icon svg-icon svg-expand-more" })))));
|
|
250
250
|
}
|
|
251
251
|
static get is() { return "wm-button"; }
|
|
252
252
|
static get encapsulation() { return "shadow"; }
|
package/dist/esm/loader.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { b as bootstrapLazy } from './index-3425d80d.js';
|
|
2
2
|
export { s as setNonce } from './index-3425d80d.js';
|
|
3
|
-
import { g as globalScripts } from './app-globals-
|
|
3
|
+
import { g as globalScripts } from './app-globals-d586ffcf.js';
|
|
4
4
|
|
|
5
5
|
const defineCustomElements = async (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-3425d80d.js';
|
|
2
2
|
export { s as setNonce } from './index-3425d80d.js';
|
|
3
|
-
import { g as globalScripts } from './app-globals-
|
|
3
|
+
import { g as globalScripts } from './app-globals-d586ffcf.js';
|
|
4
4
|
|
|
5
5
|
/*
|
|
6
6
|
Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com
|
|
@@ -251,7 +251,7 @@ const Button = class {
|
|
|
251
251
|
}
|
|
252
252
|
}
|
|
253
253
|
render() {
|
|
254
|
-
return (h(Host, { key: '
|
|
254
|
+
return (h(Host, { key: '7cfb3bc7bc5f2c0e00c3cb38de71ac1b5465055c', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: '9010f68296e4250cdf85fa21bfeb7b3a725fa072', id: this.id, class: `${this.buttonClasses}`, disabled: this.isDisabled, ref: (el) => (this.buttonEl = el), "aria-label": this.getAriaLabel(), "aria-hasPopup": this.ariaPopup ? "menu" : null, onMouseEnter: (ev) => this.handleMouseEnter(ev), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.handleFocus(ev), onBlur: () => hideTooltip(), onClick: () => hideTooltip() }, this.icon && this.renderIcon(), (!this.buttonType.startsWith("navigational") && !this.buttonType.startsWith("icononly")) && (h("span", { key: '5167fea2767e091408e0b452ecca6d70bce711c6', class: "button-text" }, h("slot", { key: '3a9a85455a00434c1112c6070c83469d15640e31' }))), (this.buttonType == "selector" || this.buttonType == "selector-primary") && (h("div", { key: 'b9f5481cf0bb9fb56be6821127609eea72c788bc', class: "selector-icon svg-icon svg-expand-more" })))));
|
|
255
255
|
}
|
|
256
256
|
static get delegatesFocus() { return true; }
|
|
257
257
|
get el() { return getElement(this); }
|