@watermarkinsights/ripple 5.13.0-alpha.12 → 5.13.0-alpha.13
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/ripple/priv-calendar.entry.js +2 -2
- package/dist/ripple/priv-chart-popover.entry.js +2 -2
- package/dist/ripple/priv-navigator-button.entry.js +1 -1
- package/dist/ripple/priv-navigator-item.entry.js +1 -1
- package/dist/ripple/priv-option-list.entry.js +1 -1
- package/dist/ripple/wm-action-menu.entry.js +1 -1
- package/dist/ripple/wm-button.entry.js +1 -1
- package/dist/ripple/wm-chart.entry.js +1 -1
- package/dist/ripple/wm-date-range.entry.js +5 -5
- package/dist/ripple/wm-datepicker.entry.js +5 -5
- package/dist/ripple/wm-file-list.entry.js +1 -1
- package/dist/ripple/wm-file.entry.js +1 -1
- package/dist/ripple/wm-flyout.entry.js +5 -2
- package/dist/ripple/wm-input.entry.js +1 -1
- package/dist/ripple/wm-line-chart.entry.js +2 -2
- package/dist/ripple/wm-menuitem.entry.js +1 -1
- package/dist/ripple/wm-modal-footer.entry.js +1 -1
- package/dist/ripple/wm-modal-header.entry.js +1 -1
- package/dist/ripple/wm-modal-pss-footer.entry.js +1 -1
- package/dist/ripple/wm-modal-pss-header.entry.js +1 -1
- package/dist/ripple/wm-modal-pss.entry.js +2 -2
- package/dist/ripple/wm-modal.entry.js +2 -2
- package/dist/ripple/wm-navigation-hamburger.entry.js +1 -1
- package/dist/ripple/wm-navigation-item.entry.js +1 -1
- package/dist/ripple/wm-navigation.entry.js +2 -2
- package/dist/ripple/wm-nested-select.entry.js +3 -3
- package/dist/ripple/wm-optgroup.entry.js +1 -1
- package/dist/ripple/wm-option.entry.js +1 -1
- package/dist/ripple/wm-pagination.entry.js +1 -1
- package/dist/ripple/wm-progress-indicator.entry.js +1 -1
- package/dist/ripple/wm-progress-monitor.entry.js +1 -1
- package/dist/ripple/wm-search.entry.js +2 -2
- package/dist/ripple/wm-select.entry.js +2 -2
- package/dist/ripple/wm-snackbar.entry.js +2 -2
- package/dist/ripple/wm-tab-item.entry.js +1 -1
- package/dist/ripple/wm-tab-list.entry.js +1 -1
- package/dist/ripple/wm-tab-panel.entry.js +1 -1
- package/dist/ripple/wm-tag-input.entry.js +3 -3
- package/dist/ripple/wm-textarea.entry.js +1 -1
- package/dist/ripple/wm-timepicker.entry.js +2 -2
- package/dist/ripple/wm-toggletip.entry.js +2 -2
- package/dist/ripple/wm-uploader.entry.js +2 -2
- package/dist/types/components/wm-flyout/wm-flyout.d.ts +1 -0
- package/dist/types/components.d.ts +2 -2
- package/package.json +2 -2
|
@@ -550,11 +550,11 @@ const PrivCalendar = class {
|
|
|
550
550
|
}), class: "header-btn arw-btn" }, h("span", { class: "svg-icon svg-next" }))), h("div", { "aria-labelledby": "popup-title-year", role: "grid", class: "months" }, h("div", { role: "row", class: "month-row" }, calendar_months.slice(0, 3).map((month, index) => this.renderMonth(month, index))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(3, 6).map((month, index) => this.renderMonth(month, index + 3))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(6, 9).map((month, index) => this.renderMonth(month, index + 6))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(9).map((month, index) => this.renderMonth(month, index + 9))))));
|
|
551
551
|
}
|
|
552
552
|
render() {
|
|
553
|
-
return (h(Host, { key: '
|
|
553
|
+
return (h(Host, { key: '09b77ca0f93d811c3f4af9bf54d1b133d88a91dc', onMouseOut: (ev) => {
|
|
554
554
|
// @ts-ignore
|
|
555
555
|
if (!this.el.parentElement.contains(ev.toElement))
|
|
556
556
|
this.outOfCal.emit();
|
|
557
|
-
}, role: "application", "aria-describedby": "application" }, this.view === "day" ? this.renderDayView() : this.renderMonthView(), h("div", { key: '
|
|
557
|
+
}, role: "application", "aria-describedby": "application" }, this.view === "day" ? this.renderDayView() : this.renderMonthView(), h("div", { key: 'e7c0db398da5de26a24f16220e5e97d97fb9b715', id: "application", class: "sr-only" }, this.calName, this.calInstructions)));
|
|
558
558
|
}
|
|
559
559
|
get el() { return getElement(this); }
|
|
560
560
|
static get watchers() { return {
|
|
@@ -117,11 +117,11 @@ const ChartPopover = class {
|
|
|
117
117
|
const titleAffordance = this.sliceDetails &&
|
|
118
118
|
this.sliceDetails.title &&
|
|
119
119
|
(this.sliceDetails.title[0] === "-" ? "negative" : this.sliceDetails.title[0] === "+" ? "positive" : "");
|
|
120
|
-
return (h(Host, { key: '
|
|
120
|
+
return (h(Host, { key: 'd28c1cd332179d1dee13e056675aeba9d6968886' }, !!this.open && this.sliceDetails ? (h("div", { "aria-hidden": "true", class: "popover" }, h("h1", { class: `title ${titleAffordance}` }, this.sliceDetails.title), h("p", { class: "text" }, this.sliceDetails.text), this.sliceDetails.buttonText ? (
|
|
121
121
|
// @ts-ignore
|
|
122
122
|
h("button", { tabindex: "-1",
|
|
123
123
|
// @ts-ignore
|
|
124
|
-
focusable: "false", class: "popover-button", onClick: () => this.handleButtonClick() }, h("svg", { class: "btn-icon", height: "9", width: "9" }, h("path", { fill: "#575195", d: "M0 3.38v2.25h9V3.38H0zM0 0v2.25h4.5V0H0zm6.19 6.75H0V9h6.19V6.75z" })), h("span", { class: "button-text" }, this.sliceDetails.buttonText))) : (""))) : (""), h("div", { key: '
|
|
124
|
+
focusable: "false", class: "popover-button", onClick: () => this.handleButtonClick() }, h("svg", { class: "btn-icon", height: "9", width: "9" }, h("path", { fill: "#575195", d: "M0 3.38v2.25h9V3.38H0zM0 0v2.25h4.5V0H0zm6.19 6.75H0V9h6.19V6.75z" })), h("span", { class: "button-text" }, this.sliceDetails.buttonText))) : (""))) : (""), h("div", { key: 'd6487a3360b7818e537d885999320b33b3467b40', ref: (el) => (this.liveRegion = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" }, this.open && this.renderLiveRegion())));
|
|
125
125
|
}
|
|
126
126
|
get el() { return getElement(this); }
|
|
127
127
|
static get watchers() { return {
|
|
@@ -14,7 +14,7 @@ const PrivNavigatorButton = class {
|
|
|
14
14
|
}
|
|
15
15
|
render() {
|
|
16
16
|
const { handleClick, altText } = this;
|
|
17
|
-
return (h("button", { key: '
|
|
17
|
+
return (h("button", { key: 'f41ac3acbbdb1464b876a7a9376ab07bab07978c', "aria-expanded": this.expanded.toString(), class: "navigator", onClick: handleClick.bind(this), "aria-label": altText }));
|
|
18
18
|
}
|
|
19
19
|
static get delegatesFocus() { return true; }
|
|
20
20
|
get el() { return getElement(this); }
|
|
@@ -21,7 +21,7 @@ const PrivNavigatorItem = class {
|
|
|
21
21
|
render() {
|
|
22
22
|
const selectedClass = this.selected ? "selected" : "";
|
|
23
23
|
const focusedClass = this.focused ? "focused" : "";
|
|
24
|
-
return (h("div", { key: '
|
|
24
|
+
return (h("div", { key: 'af0aed77cb15c4c796f0ed3ce930bf4b0663be85', class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", { key: '828fe027718c6f50f1fdb8c6eff286b052dc2573' })));
|
|
25
25
|
}
|
|
26
26
|
get el() { return getElement(this); }
|
|
27
27
|
};
|
|
@@ -376,7 +376,7 @@ const PrivOptionList = class {
|
|
|
376
376
|
return (h("div", { class: "non-options-wrapper" }, this.isInNestedSelect && this.renderReturnBtn(), this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton()));
|
|
377
377
|
}
|
|
378
378
|
render() {
|
|
379
|
-
return (h("div", { key: '
|
|
379
|
+
return (h("div", { key: '648560e102bd239a9e24bd76bfeafc957b2bf538', class: "list-wrapper" }, (this.isInNestedSelect || this.search || this.visibleSelectAllButton) && this.renderNonOptions(), h("div", { key: '8099f3d5dcacc4d7f9b5adb32742a26f72e63b45', id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el), style: { "--max-height": this.effectiveMaxHeight } }, this.searchTerm && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", { key: '173b94d637b8dff72b75a4233ba1f4ec5d70e401' })), h("div", { key: 'eec5d8766d16f5f5ddd25c1eaff8313c7bb638e0', id: "optionlist-announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
|
|
380
380
|
}
|
|
381
381
|
get el() { return getElement(this); }
|
|
382
382
|
};
|
|
@@ -191,7 +191,7 @@ const ActionMenu = class {
|
|
|
191
191
|
return null;
|
|
192
192
|
}
|
|
193
193
|
render() {
|
|
194
|
-
return (h(Host, { key: '
|
|
194
|
+
return (h(Host, { key: '8a9e5b3cda9c94ece695c5744a7a52724bf29ce7', onBlur: () => this.close(false) }, h("div", { key: '26e303c4f67936eb389a24371f90523b96c1c85c', class: getTextDir() }, h("wm-button", { key: 'd227414d89c3e3ce6b8b0078dbd3abc971eec6bf', "button-type": this.internalButtonType, tooltip: this.tooltip, "custom-background": this.darkMode ? "dark" : undefined, "label-for-identical-buttons": this.labelForIdenticalButtons, icon: this.actionMenuType === "icon" ? "#more-options" : "", iconSize: this.actionMenuType === "icon" ? "24px" : undefined, id: "menubtn", onClick: () => (this.isExpanded ? this.close() : this.open()), onBlur: (ev) => this.handleButtonBlur(ev), disabled: this.disabled, ref: (el) => (this.wmButtonEl = el), "tooltip-position": this.tooltipPosition || this.horizontalPosition, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? "true" : "false", "aria-controls": "menu" }, this.buttonText), h("div", { key: '3e1959b170b0671583ada02b5d4ae1c94ae81296', class: `dropdown ${this.openUp ? "open-up" : ""} ${this.horizontalPosition} ${this.isExpanded ? "open" : ""} hidden`, id: "menu", tabindex: -1, role: "menu", ref: (el) => (this.itemsEl = el) }, h("slot", { key: 'ee8b997c0842fb7754f97b855eb2e818e58aae56' })))));
|
|
195
195
|
}
|
|
196
196
|
static get delegatesFocus() { return true; }
|
|
197
197
|
get el() { return getElement(this); }
|
|
@@ -182,7 +182,7 @@ const Button = class {
|
|
|
182
182
|
}
|
|
183
183
|
}
|
|
184
184
|
render() {
|
|
185
|
-
return (h(Host, { key: '
|
|
185
|
+
return (h(Host, { key: 'c4fba4761d1c693a8d0f13d4e1c3832e4232d23e', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: 'a196efa19aca3bb770d3348b9ba065b1a5d5600b', 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(), h("span", { key: '568589ff063226492a78f39ad068060e3859bb4d', class: "button-text" }, h("slot", { key: '6d2da4243d545e3e9624b8a56295b0b5a511f9ca' })), (this.buttonType == "selector" || this.buttonType == "selector-primary") && (h("div", { key: 'cccf7bd4a451d04ad89eca770e8a67815f1108bf', class: "selector-icon svg-icon svg-expand-more" })))));
|
|
186
186
|
}
|
|
187
187
|
static get delegatesFocus() { return true; }
|
|
188
188
|
get el() { return getElement(this); }
|
|
@@ -147,7 +147,7 @@ const Chart = class {
|
|
|
147
147
|
}
|
|
148
148
|
}
|
|
149
149
|
render() {
|
|
150
|
-
return (h(Host, { key: '
|
|
150
|
+
return (h(Host, { key: 'c3fc44f18a5e1b51abf66da51a5fc71486315c98', onBlur: () => exitChart.call(this) }, h("div", { key: '08bf7e98f8348cdefe82f16b9a0a159122fbcce6', ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.currentChartType} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""} ${this.labelPosition === "left" && this.currentChartType === "bar4" ? "left-label" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: 0, "aria-roledescription": chartMessages.interactiveChart, "aria-describedby": "chart-instructions" }, h("label", { key: '4a53a06ae2e003405e0c380e1b57d4e20c643bdb', id: `label-${this.uid}`, class: `label --${this.labelPosition}`, htmlFor: `graphic-${this.uid}` }, h("span", { key: '0fee4d7da220e51f563087af19e85b78ba28e3bf', class: "label-text" }, this.label), this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""), this.isBar && renderLegend.call(this, this.currentChartType), this.renderChart(), this.isDoughnut && renderLegend.call(this, this.currentChartType), h("priv-chart-popover", { key: '099d045aa3aaefc1f71c1f83525bab46298ca5d3', class: this.isTabbing ? "user-is-tabbing" : "", onIntChartPopoverOpenChanged: (ev) => this.handlePopoverOpenChanged(ev) }), this.isBar && !this.printMode && renderHiddenValuesMessage()), renderInstructionsText()));
|
|
151
151
|
}
|
|
152
152
|
static get delegatesFocus() { return true; }
|
|
153
153
|
get el() { return getElement(this); }
|
|
@@ -445,23 +445,23 @@ const DateRange = class {
|
|
|
445
445
|
}
|
|
446
446
|
}
|
|
447
447
|
render() {
|
|
448
|
-
return (h(Host, { key: '
|
|
448
|
+
return (h(Host, { key: '21c75aea3b6672f9cc1a8fe8b625d9dc5f8addf2', "aria-busy": "false" }, h("div", { key: '23de6ef9b35306f80fbc7d901d36416667fcb88c', ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { key: '32d3dacdf9bf1846490f9b83db570c0de798b2fe', class: `range-wrapper ${this.calWidth <= this.availSpace ? "cal" : ""}` }, h("div", { key: 'a8edcff82410ecefd4f1cea570e2fa711a2a36da', class: "label-wrapper", id: "start-label-wrapper" }, h("label", { key: 'e4bb3359ce44ccf275d68d2cb42b29292480f112', ref: (e) => (this.labelEl = e), id: "startlabel", htmlFor: "start-date-input", class: "label", title: `${this.labelStart} (${this.dateFormat})` }, this.labelStart, this.requiredField && (h("span", { key: '1d68eceb46327dd2ca5a5d5f9c85cc9afcbd8454', "aria-hidden": "true", class: "required" }, "*")))), h("div", { key: 'ab3ef6c28659edb9fb224780f0cb9e5c48f7fa63', class: "label-wrapper", id: "end-label-wrapper" }, h("label", { key: '467c8bdbed97f2b45816c2129a723ebdb86ec5c4', id: "endlabel", htmlFor: "end-date-input", class: "label", title: `${this.labelEnd} (${this.dateFormat})` }, this.labelEnd, this.requiredField && (h("span", { key: 'd2002e0e8a2946f0513aa3ce235bc24d083980bc', "aria-hidden": "true", class: "required" }, "*")))), h("input", { key: 'c53e0af568d47090be10188b9b9c68baae1b2b31', 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: 'a8c200b60af7bd4391d1fed6dfc4be046c95e8dc', id: "hyphen" }, "\u00A0-\u00A0"), h("input", { key: '50dad2843b80210d4e4fef60797842e19d1146ad', 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: '82d5a90d5607c4b2088362f6c0f07655b78e803e', class: "toggle-wrapper", id: "toggle-wrapper" }, this.calWidth <= this.availSpace && (h("button", { key: '48595059b20006a6c33dc6499269f5a58fcd9cfd', disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-describedby": "start-date-input end-date-input", "aria-label": intl.formatMessage({
|
|
449
449
|
id: "date.selectRange",
|
|
450
450
|
defaultMessage: "Select range",
|
|
451
451
|
description: "Button text for screen readers.",
|
|
452
|
-
}), ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { key: '
|
|
452
|
+
}), ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { key: 'ffda24876ccbd2cece1c1d8b4deed85cf5fbf42f', class: "svg-icon svg-date" }), h("span", { key: 'f130e1551e7d470d9242ca1ebc17a7ba24389e06', class: "calendar", title: intl.formatMessage({
|
|
453
453
|
id: "date.calendarView",
|
|
454
454
|
defaultMessage: "Calendar View",
|
|
455
455
|
description: "Calendar button",
|
|
456
|
-
}) })))), this.renderCalendars()), h("div", { key: '
|
|
456
|
+
}) })))), this.renderCalendars()), h("div", { key: '283548120b07fbe101053699bbcb115608d3002c' }, h("div", { key: '2fc7c5f23d7cca693fc0b84eeead10a7f7d032eb', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: '369945573c413c2f7a085754e8b4cb274e9197e4', id: "month-title", class: "sr-only" }, intl.formatMessage({
|
|
457
457
|
id: "date.selectMonth",
|
|
458
458
|
defaultMessage: "Activate to select a month.",
|
|
459
459
|
description: "Calendar button",
|
|
460
|
-
})), h("div", { key: '
|
|
460
|
+
})), h("div", { key: '3498090e97394d1ae449f07bd1d4b950cd92a201', id: "year-title", class: "sr-only" }, intl.formatMessage({
|
|
461
461
|
id: "date.selectYear",
|
|
462
462
|
defaultMessage: "Activate to select a year.",
|
|
463
463
|
description: "Calendar button",
|
|
464
|
-
}))), h("div", { key: '
|
|
464
|
+
}))), h("div", { key: '30737a4c79f593561eb8f3c4574e2e739c9a5ab8', id: "error", class: "error" }, this.errorMessage), h("div", { key: 'e4c19b5892d6ffd773d991a64223b5f4d02b941d', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }))));
|
|
465
465
|
}
|
|
466
466
|
static get delegatesFocus() { return true; }
|
|
467
467
|
get el() { return getElement(this); }
|
|
@@ -216,23 +216,23 @@ const DatePicker = class {
|
|
|
216
216
|
this.liveRegionEl.textContent = message;
|
|
217
217
|
}
|
|
218
218
|
render() {
|
|
219
|
-
return (h(Host, { key: '
|
|
219
|
+
return (h(Host, { key: '6595e06ea24dc87d904fac527742f805943693d3', "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '44f6ad29e99a450a110ccd2a1811e75292f086d5', ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '2f777c699710664bcb2a98efcf4ffb9cd673c120', class: "label-wrapper", ref: (e) => (this.labelWrapperEl = e) }, this.labelPosition !== "none" && (h("label", { key: '8dedfdba21bb6a86eea6f169e483267eb9c26c2b', id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})` }, this.label, this.requiredField && (h("span", { key: 'dd4843662c3c9da154349243cd28bb7a7c6a29a0', "aria-hidden": "true", class: "required" }, "*"))))), h("div", { key: 'bbe041529dda076a8744be66838e98602a219e98' }, h("div", { key: 'aaab7ac1ab3b2bc5f3727f92974331c096a5e2e8', class: "single-wrapper input" }, h("input", { key: 'baa7f5724a1ee42632e13e87b5065a25101e2cbe', 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: 'f72afc3d9d9f258ca3cad9e50362375b1d70f6f9', class: "container", id: "wm-container" }, h("button", { key: 'a7da9b5a363b63764ee1d09ce2446bd96031a160', disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-label": intl.formatMessage({
|
|
220
220
|
id: "date.selectDate",
|
|
221
221
|
defaultMessage: "Select date",
|
|
222
222
|
description: "Button text for screen readers.",
|
|
223
|
-
}), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { key: '
|
|
223
|
+
}), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { key: '2d0dd1ca118d65329947af616a28b3bb4bc9e512', class: "svg-icon svg-date" }), h("span", { key: 'b7d28e193a6392d269f65e2821907d1a56889322', class: "calendar", title: intl.formatMessage({
|
|
224
224
|
id: "date.calendarView",
|
|
225
225
|
defaultMessage: "Calendar View",
|
|
226
226
|
description: "Calendar button",
|
|
227
|
-
}) })), h("div", { key: '
|
|
227
|
+
}) })), h("div", { key: '877a0bef7870d089cf1af89267ad9889efaf8f38', class: `popup-wrapper ${this.calEl && this.calEl.view}-view ${this.openUp ? "expand-upwards" : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), onClick: () => (this.popupClicked = true) }, h("div", { key: '39b99fe660d521b22b8ee0aebeabb3c716d7cb6c', tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), h("priv-calendar", { key: '76db1d16acb6b3b87090797e65cb60165dac3559', ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), h("div", { key: '575e36c03da1bfce6b9329d3cad304ea1fc8826a', tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), h("div", { key: 'd3851fa91b296cb13f87fb9c012f6d1e8216f45c', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: '1cf20f69a8b5a0308870c516ee3a5d2272a533bd', id: "month-title", class: "sr-only" }, intl.formatMessage({
|
|
228
228
|
id: "date.selectMonth",
|
|
229
229
|
defaultMessage: "Activate to select a month.",
|
|
230
230
|
description: "Calendar button",
|
|
231
|
-
})), h("div", { key: '
|
|
231
|
+
})), h("div", { key: '54e36920fb115fe58a9a0627a49fa7443b281631', id: "year-title", class: "sr-only" }, intl.formatMessage({
|
|
232
232
|
id: "date.selectYear",
|
|
233
233
|
defaultMessage: "Activate to select a year.",
|
|
234
234
|
description: "Calendar button",
|
|
235
|
-
})))), h("div", { key: '
|
|
235
|
+
})))), h("div", { key: 'f171b0af084c0aec2a17c1bbc9326a8a7cf08430', id: "error", class: "error" }, this.errorMessage), h("div", { key: 'ed136f9fe2cd3a6d0ff5fbe18630003294dac529', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" })))));
|
|
236
236
|
}
|
|
237
237
|
static get delegatesFocus() { return true; }
|
|
238
238
|
get el() { return getElement(this); }
|
|
@@ -8,7 +8,7 @@ const FileList = class {
|
|
|
8
8
|
this.showInfo = "last-updated";
|
|
9
9
|
}
|
|
10
10
|
render() {
|
|
11
|
-
return (h("div", { key: '
|
|
11
|
+
return (h("div", { key: '22f79a6282af505af3b05a649e3ad99ce6c99573', role: "list", class: "list-wrapper" }, h("slot", { key: 'b8f5b5068bba5cff11bd4c32fdf6a3f5c6755fd2' })));
|
|
12
12
|
}
|
|
13
13
|
static get delegatesFocus() { return true; }
|
|
14
14
|
get el() { return getElement(this); }
|
|
@@ -172,7 +172,7 @@ const File = class {
|
|
|
172
172
|
return (h("div", { class: `file-wrapper` }, h("div", { class: `file ${this.errorMessage ? "--error" : ""} ${this.isCondensed ? "condensed" : ""}` }, this.renderFileName(), !this.errorMessage && (h("div", { class: "right-group" }, this.renderFileInfo(), this.fileActions !== "" && this.renderFileControls())), this.errorMessage && (h("wm-button", { "permanently-delete": true, "button-type": "textonly", "label-for-identical-buttons": this.generateClearButtonLabel(this.name), onClick: () => this.wmFileErrorCleared.emit() }, this.clearButtonText)), this.progress == 100 && h("span", { class: "svg-icon svg-success" })), this.errorMessage && h("div", { class: "error-message" }, this.errorMessage)));
|
|
173
173
|
}
|
|
174
174
|
render() {
|
|
175
|
-
return h(Host, { key: '
|
|
175
|
+
return h(Host, { key: '6330ae54b834dc04436450533bb27648fa22424a', role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
|
|
176
176
|
}
|
|
177
177
|
static get delegatesFocus() { return true; }
|
|
178
178
|
get el() { return getElement(this); }
|
|
@@ -139,7 +139,10 @@ const Flyout = class {
|
|
|
139
139
|
}
|
|
140
140
|
}
|
|
141
141
|
renderBreadcrumb(breadcrumbName, isLast) {
|
|
142
|
-
return (h("span", { class: "breadcrumb-item" }, isLast ? (h("span", { class: "current" }, breadcrumbName)) : (h("wm-button", { class: "breadcrumb-button", "button-type": "textonly", onClick: () => this.wmFlyoutBreadcrumbClicked.emit({
|
|
142
|
+
return (h("span", { class: "breadcrumb-item" }, isLast ? (h("span", { class: "current" }, breadcrumbName)) : (h("wm-button", { class: "breadcrumb-button", "button-type": "textonly", onClick: () => this.wmFlyoutBreadcrumbClicked.emit({
|
|
143
|
+
breadcrumb: breadcrumbName,
|
|
144
|
+
index: csvToArray(this.breadcrumb).indexOf(breadcrumbName),
|
|
145
|
+
}) }, breadcrumbName)), !isLast && h("span", { class: "separator" }, ">")));
|
|
143
146
|
}
|
|
144
147
|
renderHeader() {
|
|
145
148
|
return (h("div", { class: "flyout-header" }, h("div", { class: "header-left" }, this.renderBreadcrumbList(), this.eyebrow && h("div", { class: "eyebrow" }, this.eyebrow), h("h2", { class: "heading", tabIndex: -1, ref: (el) => (this.headingEl = el) }, this.heading), this.subheading && h("p", { class: "subheading" }, this.subheading)), h("div", { class: "header-right" }, h("wm-button", { ref: (el) => (this.closeButtonEl = el), class: "close-button", "button-type": "navigational", icon: "#close", tooltip: globalMessages.close, onClick: () => this.wmFlyoutCloseTriggered.emit() }))));
|
|
@@ -151,7 +154,7 @@ const Flyout = class {
|
|
|
151
154
|
}
|
|
152
155
|
}
|
|
153
156
|
render() {
|
|
154
|
-
return (h(Host, { key: '
|
|
157
|
+
return (h(Host, { key: 'de23142be87d48770982e82dd7bd58df327c9c1d' }, h("dialog", { key: '1bfb704bcb15365320ae594e2961079288d380f2', ref: (el) => (this.dialogEl = el), class: "flyout", onClose: () => this.wmFlyoutCloseTriggered.emit(), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: 'b92885cc72a59368139e0ba862ad7423be8b4546', tabindex: "0", class: "focus-trap", onFocus: () => this.lastFocusableEl.focus(), "aria-hidden": "true" }), this.renderHeader(), h("div", { key: '6971f7428abc0d02070930439a889e4d8ce91e0f', class: "flyout-content" }, h("slot", { key: 'b44c401a5de7d7b2441390d9018c3ce24d3f37ca' })), this.renderFooter(), h("div", { key: '26547ebb7d72ce6453bd49e8fae069f78694754a', tabindex: "0", class: "focus-trap", onFocus: () => this.handleEndBookendFocus(), "aria-hidden": "true" }))));
|
|
155
158
|
}
|
|
156
159
|
get el() { return getElement(this); }
|
|
157
160
|
static get watchers() { return {
|
|
@@ -97,7 +97,7 @@ const Input = class {
|
|
|
97
97
|
: `info error`;
|
|
98
98
|
}
|
|
99
99
|
render() {
|
|
100
|
-
return (h("div", { key: '
|
|
100
|
+
return (h("div", { key: '1089119df66c4260effb6a3d3e2812a2d8fc9333', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { key: '7770dc057eaf102e5644c6048088c7927f12476c', class: "label-wrapper" }, h("label", { key: '7490afd8836ca971047985c65f7e3101ba48be59', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { key: 'cf9838633fce67ceb23c7c6bca60d08068b04ff2', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { key: '036efe27c07fe3544c0173a22f1135abf2e789f0', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: 'a6e72302979e7c3805227983e9b7f53174734e9d', class: "inner-wrapper" }, h("div", { key: '2484c6e13f2e1fd63b46005cddcb3a2100536fd4', class: "text-after-wrapper" }, h("div", { key: 'b6b1da3a7c6f4114bd4b1874a11e410c2cb63e6b', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { key: '4e90d3b39352a2095e5367097a113ba8cea54561', class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { key: '3ea8ad583b0bfe7385681468d15e897e63ec8072', ref: (el) => (this.inputEl = el), id: "inputfield", disabled: this.isDisabled, "aria-describedby": this.descriptors(), onInput: (ev) => this.handleInput(ev), onKeyDown: (ev) => this.handleKeyDown(ev), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, maxLength: this.characterLimit || undefined, type: this.type, step: this.step, max: this.max, min: this.min, value: this.el.value }), this.symbolAfter && (h("span", { key: '66e8370d20c4ff4571b234bed69d96ab445edd43', class: "symbol", id: "symbol-after" }, this.symbolAfter)), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.textAfter && (h("span", { key: 'e8bd1674d571902e71587f721130f3d27bdaf500', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { key: 'f05ce38c98a0a30763179006bdd7d39e6033536a', id: "info", class: "info" }, this.info)), h("div", { key: 'b191f2595af3ee79a57ea5884ce1afb2a563606e', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '3065352f12912db4cf6f36f382cf787dcd0cce4f', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
|
|
101
101
|
}
|
|
102
102
|
static get delegatesFocus() { return true; }
|
|
103
103
|
get el() { return getElement(this); }
|
|
@@ -434,9 +434,9 @@ const LineChart = class {
|
|
|
434
434
|
return h("div", { class: "highlight", style: highlightStyle });
|
|
435
435
|
}
|
|
436
436
|
render() {
|
|
437
|
-
return (h(Host, { key: '
|
|
437
|
+
return (h(Host, { key: 'd464ca2f8b90f8412f0440e2bb31bd5dfb958933', onBlur: () => this.resetDataPointFocus(), onMouseLeave: () => (this.popoverIndex = -1) }, h("div", { key: '1e4f374154b2ad78d1ec7e1632fc9ae942c40aba', class: "component-wrapper", role: "application", "aria-roledescription": chartMessages.interactiveChart, "aria-label": this.label, "aria-describedby": "chart-description" }, this.renderLegend(), h("div", { key: 'fc81862601053f75605c0507b3293e71aa570f2e', class: "chart-wrapper" }, h("div", { key: '6dc0967df68897f0d99ad2178fde34972a82c4d3', class: "chart-label --y-axis", style: { "--labelWidth": this.labelWidth } }, this.yAxisLabel, this.parsedUnits[1] && ` (${this.parsedUnits[1]})`), this.renderYIntervals(), h("div", { key: '1a0301fdae16425685ed194ebe1a0e64b42ec444', ref: (el) => (this.plotAreaEl = el), class: `plot-area ${this.hasPartialInterval ? "" : "right-border"}`, style: {
|
|
438
438
|
"--backgroundSize": `${this.dataPointMatrix[0][this.xIntervals.indexOf(this.displayedXIntervals[1])].xPositionPercent}%`,
|
|
439
|
-
} }, this.highlightStart && this.renderHighlight(), this.renderData(), this.renderHoverAreas()), this.popoverIndex !== -1 && this.renderHoverIndicator(), this.popoverIndex !== -1 && this.renderPopover(), this.renderXIntervals(), h("div", { key: '
|
|
439
|
+
} }, this.highlightStart && this.renderHighlight(), this.renderData(), this.renderHoverAreas()), this.popoverIndex !== -1 && this.renderHoverIndicator(), this.popoverIndex !== -1 && this.renderPopover(), this.renderXIntervals(), h("div", { key: 'de340f457599fc7941989131e34a2aad48640fa2', class: "chart-label --x-axis" }, this.xAxisLabel, this.parsedUnits[0] && ` (${this.parsedUnits[0]})`)), h("div", { key: 'd2cf3a1c6516bbb2e9cbcf9c432f7803c8534e54', id: "chart-description", class: "sr-only" }, `${lineChartMessages.instructions} ${this.description}`), h("div", { key: 'e2d22f31c37b75b9016151e74caac1ba04e05708', ref: (el) => (this.liveRegionEl = el), "aria-live": "polite", class: "sr-only" }, this.announcement))));
|
|
440
440
|
}
|
|
441
441
|
get el() { return getElement(this); }
|
|
442
442
|
static get watchers() { return {
|
|
@@ -113,7 +113,7 @@ const Menuitem = class {
|
|
|
113
113
|
}
|
|
114
114
|
}
|
|
115
115
|
render() {
|
|
116
|
-
return (h(Host, { key: '
|
|
116
|
+
return (h(Host, { key: '040a28630345fc16232fc7d325ad4c3fd81dfcca', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: '4dcb2ef69e85cf11e25be1836e2b85fd798c7ee4', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, this.icon && this.renderIcon(), this.el.textContent, this.description ? h("div", { class: "description" }, this.description) : "")));
|
|
117
117
|
}
|
|
118
118
|
get el() { return getElement(this); }
|
|
119
119
|
static get watchers() { return {
|
|
@@ -35,7 +35,7 @@ const ModalFooter = class {
|
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
render() {
|
|
38
|
-
return (h("div", { key: '
|
|
38
|
+
return (h("div", { key: '0817c2539d0b0990f235cacf7f646418687ead57', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: 'dc034d58bfb8876bd84703fc561f8eae67b00c6b', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: 'c23175639a07f7bc3dd084abf99848919196c4f2', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: 'a4996c0ee27d91cb52139356dc8c133a2b31bdbc', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { key: '4acd187f0972f8f4348bc9631381eade7b6d6802', "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.primaryText))));
|
|
39
39
|
}
|
|
40
40
|
get el() { return getElement(this); }
|
|
41
41
|
};
|
|
@@ -27,7 +27,7 @@ const ModalHeader = class {
|
|
|
27
27
|
parentModal.emitCloseEvent();
|
|
28
28
|
}
|
|
29
29
|
render() {
|
|
30
|
-
return (h(Host, { key: '
|
|
30
|
+
return (h(Host, { key: 'f8507bec2a2e2ff9de8adb280de4483618f91014' }, h("div", { key: '87dcb3fca2a5763858c9a5038421cf916a915eec', class: "wm-wrapper" }, h("div", { key: '7171fb0ccddde51f5f59c4373bad851dc3b2897d' }, h("h2", { key: '85b465087cafcd6bd42aff6375d42793e9d6a97e', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: '340d9e40ac8e33681a55a27fb9079702fa0a0669', class: "subtitle" }, this.subheading))), h("wm-button", { key: '97501f490a1e9942bdc9ca269d743105e9b93d1e', "button-type": "navigational", icon: "#close", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
|
|
31
31
|
}
|
|
32
32
|
get el() { return getElement(this); }
|
|
33
33
|
};
|
|
@@ -31,7 +31,7 @@ const ModalPssFooter = class {
|
|
|
31
31
|
parentModal.emitSecondaryEvent();
|
|
32
32
|
}
|
|
33
33
|
render() {
|
|
34
|
-
return (h("div", { key: '
|
|
34
|
+
return (h("div", { key: '2fbff1a3b12ccedb83ae6767c4eda8cbf37e1de3', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: 'df6723cfd8c166f1e6784c6e22a2e8f2fd44c258', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '00c8e5dca58b23235d9ed4ef57f2d7ce992cb333', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '670b1fb0273c366a4ee58768514ec150e36c6a8f', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), h("wm-button", { key: 'e4df8d785327497d894a51614f52c73d7e1d10d8', "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.primaryText))));
|
|
35
35
|
}
|
|
36
36
|
get el() { return getElement(this); }
|
|
37
37
|
};
|
|
@@ -30,7 +30,7 @@ const ModalPssHeader = class {
|
|
|
30
30
|
// this.headingElement.focus();
|
|
31
31
|
// }
|
|
32
32
|
render() {
|
|
33
|
-
return (h(Host, { key: '
|
|
33
|
+
return (h(Host, { key: 'adb34ccf0e077a2a4970324c307a39dcaa79c33e' }, h("div", { key: '08094d7cfad4e1f1542ab2efdf935ba2693cce38', class: "wm-wrapper" }, h("div", { key: 'fedf04ea465f10f40502abb4b2e4231c2a72faa7' }, h("h2", { key: '65f9d5a03f42554ddc205a3313f0f061952b35eb', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: 'c1c86c028ff7537c50a1a798f634a44d3b204c2a', class: "subtitle" }, this.subheading))), h("wm-button", { key: 'b9b693d39bbb42cf7b6732ea87b9cbfb7764ea88', "button-type": "navigational", icon: "f156", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
|
|
34
34
|
}
|
|
35
35
|
get el() { return getElement(this); }
|
|
36
36
|
};
|
|
@@ -119,9 +119,9 @@ const ModalPss = class {
|
|
|
119
119
|
}
|
|
120
120
|
}
|
|
121
121
|
render() {
|
|
122
|
-
return (h(Host, { key: '
|
|
122
|
+
return (h(Host, { key: '95f903625cf909acf98b6b14c9f421056d18efeb', 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: () => {
|
|
123
123
|
this.focusLastElement.emit();
|
|
124
|
-
} }, h("div", { key: '
|
|
124
|
+
} }, h("div", { key: '68d75e55e0e897e7faa0f002db3f17f54a14ae77', class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { key: 'd81e2281a25270854d488692647ff691b37209ee', class: "sr-only", tabIndex: 0, onFocus: () => {
|
|
125
125
|
this.focusFirstElement.emit();
|
|
126
126
|
} })));
|
|
127
127
|
}
|
|
@@ -115,11 +115,11 @@ const Modal = class {
|
|
|
115
115
|
}
|
|
116
116
|
}
|
|
117
117
|
render() {
|
|
118
|
-
return (h("dialog", { key: '
|
|
118
|
+
return (h("dialog", { key: '350f65ba3d25b614dbf884d21a1f651fdb1b1de6', class: `${"wm-" + this.modalType}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: 'a8fbf9169a43b73aab70573e5986a8fa20accfa8', class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
|
|
119
119
|
const focusedFromCloseButton = ev.relatedTarget && ev.relatedTarget == this.closeButtonEl;
|
|
120
120
|
// no related target means we're coming from outside the page (browser chrome), and first element should be focused instead
|
|
121
121
|
focusedFromCloseButton ? this.focusLastElement.emit() : this.focusFirstElement.emit();
|
|
122
|
-
} }), !this.hasBrowserPopoverSupport && h("div", { key: '
|
|
122
|
+
} }), !this.hasBrowserPopoverSupport && h("div", { key: '4603e83913fb549a176cd85dd5a4da7e76daa209', class: "wm-tooltip" }), h("slot", { key: '1274a77f9bb31b270db9d3b578e0d3515fb1944f' }), h("div", { key: '902771d937f4bc10d271999ddfef7eb560f4c542', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
|
|
123
123
|
this.focusFirstElement.emit();
|
|
124
124
|
} })));
|
|
125
125
|
}
|
|
@@ -38,7 +38,7 @@ const NavigationHamburger = class {
|
|
|
38
38
|
this.wmNavigationHamburgerClicked.emit();
|
|
39
39
|
}
|
|
40
40
|
render() {
|
|
41
|
-
return (h(Host, { key: '
|
|
41
|
+
return (h(Host, { key: '2fe88cb0a2de891fd610a92a222bbf312fcdecf6', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { key: '0fc19d69f2634fa44b80b779d53625eefc80f906', "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: '1a539c4fca38bcc4910043b0fdd45f15c4024650', class: "svg-icon svg-menu" }))));
|
|
42
42
|
}
|
|
43
43
|
static get delegatesFocus() { return true; }
|
|
44
44
|
get el() { return getElement(this); }
|
|
@@ -8,7 +8,7 @@ const NavigationItem = class {
|
|
|
8
8
|
this.wmNavigationItemClicked = createEvent(this, "wmNavigationItemClicked", 7);
|
|
9
9
|
}
|
|
10
10
|
render() {
|
|
11
|
-
return (h(Host, { key: '
|
|
11
|
+
return (h(Host, { key: 'a7271dc88ab31f751dc43c16bff601132ba6e609', role: "listitem" }, h("a", { key: '239856bd6e2fd5a1ccce2d5b24c9c4fde3e5e817', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { key: '9da6247eac283c289981d490e1e4fe87911738b8', class: "icon", "aria-hidden": "true" }, h("slot", { key: '17dc50d5012d3a2d12f706cca37e52e03b2668b9' })), h("div", { key: '8caa9a56db4bab12326d745ce87d5bdeb43db7d0', class: "text" }, this.text))));
|
|
12
12
|
}
|
|
13
13
|
static get delegatesFocus() { return true; }
|
|
14
14
|
get el() { return getElement(this); }
|
|
@@ -101,9 +101,9 @@ const Navigation = class {
|
|
|
101
101
|
} }));
|
|
102
102
|
}
|
|
103
103
|
render() {
|
|
104
|
-
return (h(Host, { key: '
|
|
104
|
+
return (h(Host, { key: '13caaa25b9250dd7b407cb0f17e37462fc5001f3', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: '174e3a0ac159d659bfbaa77a07057b41b3fd9d34', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: '6a8e4a22c0a8dcbe48124f99ffbc79eded30ff5a', class: "tray" }, h("div", { key: '68930e4d4d2cdcc3a61b87ae92efe5a89da47e8f', class: "toggle-wrapper" }, h("wm-button", { key: '93985e4b1762b2a416b3589411c7d95864945805', ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "#close" : "#menu", "icon-size": "2rem", tooltip: this.open ? globalMessages.close : globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
|
|
105
105
|
this.open = !this.open;
|
|
106
|
-
} })), h("ul", { key: '
|
|
106
|
+
} })), h("ul", { key: 'fe65c069a8dc5c58d1747f556edfbeb8655b38d5', class: "navlist" }, h("slot", { key: 'ddae91dc4933b7f7bfc280eaa80baf214dd268c7' }))), this.isCollapsible && (h("div", { key: '3cde242e49e71dcae56b907416732bc63e0589c0', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
|
|
107
107
|
}
|
|
108
108
|
static get delegatesFocus() { return true; }
|
|
109
109
|
get el() { return getElement(this); }
|
|
@@ -289,16 +289,16 @@ const NestedSelect = class {
|
|
|
289
289
|
this.isExpanded ? this.close() : this.open();
|
|
290
290
|
},
|
|
291
291
|
};
|
|
292
|
-
return (h(Host, { key: '
|
|
292
|
+
return (h(Host, { key: 'db01356ecbfcf212405c2bee375d2e4d1ee5a03f', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '64c596db0bfcf7c188e6a30c7264c79c52779b1c', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '338c6f9a239abac7ddde51a4b1bc3d554a76195b', class: "label-wrapper" }, h("label", { key: 'a9a465e50e6530a070d4911e9941d44dc25f1949', class: "label", id: "label", htmlFor: "selectbtn" }, this.label,
|
|
293
293
|
// we can't use aria-required because the listbox is in a sub-component and it is not announced
|
|
294
|
-
this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { key: '
|
|
294
|
+
this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { key: 'e9cb13f1dd2240a1339bdc9c18f8de6b0629f33c', class: "button-wrapper" }, h("button", Object.assign({ key: 'abc64ab87885c811e705b22749683fd458782ba7' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: '1131b4b62ebac39e3b4381ddafde892f87af63b5', class: "overflowcontrol" }, h("span", { key: '590897d8aaa494b2e0bf0c972eb581920c3b5003', class: "button-text" }, this.renderButtonText())), h("div", { key: '0423489acbcfb1e422ba8c691da5a97ea18afa18', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: 'bcb0b9ece154e607f3f27c2bbcec35034eb74b1c', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '53e48fb906cf68f1ba718fdf0cfb4927227d9658', class: `dropdown ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { key: '88d34f549955aff2a01d2023fc4c2891816ac79c', ref: (el) => (this.menuEl = el), class: "menu", style: { "--max-height": this.constrainedMaxHeight }, tabIndex: -1 }, this.renderClearSelectionButton(), this.optgroupEls.map((optgroupEl) => {
|
|
295
295
|
return (h("button", { class: `menuitem group-btn ${optgroupEl.disabled ? "disabled" : ""}`, role: "menuitem", "data-label": optgroupEl.label, tabindex: -1, "aria-disabled": optgroupEl.disabled, onClick: () => {
|
|
296
296
|
if (!optgroupEl.disabled) {
|
|
297
297
|
optgroupEl.isExpanded = !optgroupEl.isExpanded;
|
|
298
298
|
forceUpdate(this.el);
|
|
299
299
|
}
|
|
300
300
|
}, onKeyDown: (ev) => this.handleMenuitemKeydown(ev) }, h("span", null, optgroupEl.label), this.renderSelectionCount(optgroupEl), optgroupEl.disabled && h("div", { class: "disabled-indication" }, "Disabled"), h("div", { class: "svg-icon svg-next" })));
|
|
301
|
-
})), h("div", { key: '
|
|
301
|
+
})), h("div", { key: '8f80f00b251d20cf0aae7c26ff39cf682cb620db', ref: (el) => (this.optListWrapperEl = el), class: "option-list-wrapper hidden" }, h("slot", { key: '46df95298b278a4efa2a200b1aa1bd425611e465' }))), h("div", { key: '3309ec5388c081f1c79a4e8f3abdc1578968ee6a', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), h("div", { key: '4359af96fd331b2f5742accc5f2a3ec60b4304b9', id: "nestedselect-announcement", "aria-live": "assertive", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
|
|
302
302
|
}
|
|
303
303
|
static get delegatesFocus() { return true; }
|
|
304
304
|
get el() { return getElement(this); }
|
|
@@ -55,7 +55,7 @@ const Optgroup = class {
|
|
|
55
55
|
handleDisabledAttribute(this.el, this.isDisabled);
|
|
56
56
|
}
|
|
57
57
|
render() {
|
|
58
|
-
return (h(Host, { key: '
|
|
58
|
+
return (h(Host, { key: '708e8dd91644ea81bc1e94c0c1cbd78e46ebe231' }, h("div", { key: 'e3ba8915a3814f4fd311bbaeba2bd8dae4baec38', class: `list-wrapper` }, h("priv-option-list", { key: '5057fbd10bb6d50dbb687b3db516d31cdc35c1ca', ref: (el) => (this.optionListEl = el), multiple: this.parentNestedSelect.multiple, search: this.parentNestedSelect.search, maxHeight: this.parentNestedSelect.constrainedMaxHeight, searchPlaceholder: this.parentNestedSelect.searchPlaceholder, optgroupLabel: this.label, selectAll: this.parentNestedSelect.selectAll, onOptionListAllSelected: () => this.wmOptgroupAllSelected.emit(), onOptionListAllDeselected: () => this.wmOptgroupAllDeselected.emit() }, h("slot", { key: '56d61c57ec4956b27e81c68f1f814ac89a494911' })))));
|
|
59
59
|
}
|
|
60
60
|
static get delegatesFocus() { return true; }
|
|
61
61
|
get el() { return getElement(this); }
|
|
@@ -158,7 +158,7 @@ const Option = class {
|
|
|
158
158
|
this.parentOptionList.addEventListener("optionListSearchChanged", (ev) => this.handleSearch(ev));
|
|
159
159
|
}
|
|
160
160
|
render() {
|
|
161
|
-
return (h(Host, { key: '
|
|
161
|
+
return (h(Host, { key: 'fc6f21ef2f027e6e741350d745541f97ebb224c6', role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { key: '248572bfc3028fc38f2e338a5faa81a5dcc45696', class: `option-wrapper ${this.parentOptionList.multiple ? "checkbox" : ""}` }, this.parentOptionList.multiple && (h("div", { key: '8df2243c9a7b180b11f3753a9a3826bb57fa525c', class: `checkbox svg-icon ${this.selected ? "svg-checkbox-selected" : "svg-checkbox-blank"}` })), h("span", { key: 'a83038716262d805625fdd0784e53caaee4bb6ca', class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { key: '90ed5ce8684a3fdd555a93601832bbcdc17cd68e', class: "sr-only" }, this.el.textContent)), h("div", { key: 'b445078dddebe488a8a8ca6b1b6a0b90c2a3555f', class: "subinfo" }, this.subinfo)));
|
|
162
162
|
}
|
|
163
163
|
get el() { return getElement(this); }
|
|
164
164
|
static get watchers() { return {
|
|
@@ -209,7 +209,7 @@ const Pagination = class {
|
|
|
209
209
|
render() {
|
|
210
210
|
return (
|
|
211
211
|
// do not render the component if there's only one page
|
|
212
|
-
this.totalItems > this.itemsPerPage && (h("nav", { key: '
|
|
212
|
+
this.totalItems > this.itemsPerPage && (h("nav", { key: 'd1a36e52f3aa204a8eff673738ff7c1ebd5585d1', "aria-label": `${this.navigationLabel} ${this.getCurrentPagesInView()}. ${this.currentPageAnnouncement(this.currentPage)}` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { key: '66a0a6cd146dfda7e77825aa47324cbffdcd9f12', id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
|
|
213
213
|
}
|
|
214
214
|
static get delegatesFocus() { return true; }
|
|
215
215
|
get el() { return getElement(this); }
|
|
@@ -94,7 +94,7 @@ const ProgressIndicator = class {
|
|
|
94
94
|
}
|
|
95
95
|
}
|
|
96
96
|
render() {
|
|
97
|
-
return (h(Host, { key: '
|
|
97
|
+
return (h(Host, { key: 'bf7ce3daf7e0b36df590b3407ef6e165e8547b0b', onBlur: () => exitChart.call(this) }, h("div", { key: '3f0668884bf5c612802abfa9a3c7c8f7d1e7621d', ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.mode} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: "0", "aria-roledescription": this.chartRoleDescription, "aria-describedby": `chart-instructions` }, h("label", { key: '92dfbec3c01ad3ba3cd13ed180644664a0a7c271', id: `label-${this.uid}`, class: "label", htmlFor: `graphic-${this.uid}` }, h("span", { key: '023e02506ed2167539499221698164b38aa983e0', class: "label-text" }, this.label), this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""), this.mode && this.renderBarOrDoughnut(), this.mode === "doughnut" ? renderLegend.call(this, this.mode) : "", h("priv-chart-popover", { key: '6a453e05e16eff49e657e49e381080edf59534c4', class: this.isTabbing ? "user-is-tabbing" : "", onIntChartPopoverOpenChanged: (ev) => this.handlePopoverOpenChanged(ev) }), this.mode === "doughnut" ? renderCompletionMessage.call(this) : ""), renderInstructionsText()));
|
|
98
98
|
}
|
|
99
99
|
static get delegatesFocus() { return true; }
|
|
100
100
|
get el() { return getElement(this); }
|
|
@@ -61,7 +61,7 @@ const ProgressMonitor = class {
|
|
|
61
61
|
}))));
|
|
62
62
|
}
|
|
63
63
|
render() {
|
|
64
|
-
return (h(Host, { key: '
|
|
64
|
+
return (h(Host, { key: 'd7d2e9633d5755c0ea2df06d1f78c865cea42580', class: this.mode === "doughnut" ? "row" : "column" }, this.modeInitialized && this.groupLegend && this.mode === "bar" && this.renderLegend(), this.modeInitialized && h("slot", { key: '61378cceebbd20ca04207a849933d97bfc6e872a' })));
|
|
65
65
|
}
|
|
66
66
|
static get delegatesFocus() { return true; }
|
|
67
67
|
get el() { return getElement(this); }
|
|
@@ -191,10 +191,10 @@ const Search = class {
|
|
|
191
191
|
* End search and find render helpers
|
|
192
192
|
*/
|
|
193
193
|
render() {
|
|
194
|
-
return (h(Host, { key: '
|
|
194
|
+
return (h(Host, { key: '76aa086f87fd11a886852b825028be6690366876' }, h("div", { key: '6a7013b6d09816c9d5b76baededa6062caaaa6c3', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { key: '276bfb594c4ad82ee3a48871f1976cc84d45da48', disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${intl.formatMessage({
|
|
195
195
|
id: "search.typeToFilterResults",
|
|
196
196
|
defaultMessage: "Type to filter the results",
|
|
197
|
-
})}`, onInput: (ev) => this.updateValue(ev.target.value), onBlur: () => this.handleBlur(), "aria-autocomplete": "none", autocomplete: "off", value: this.value }), h("span", { key: '
|
|
197
|
+
})}`, onInput: (ev) => this.updateValue(ev.target.value), onBlur: () => this.handleBlur(), "aria-autocomplete": "none", autocomplete: "off", value: this.value }), h("span", { key: '1f68a4970ddca8394e6aa7dfdba02330c33cae95', class: "svg-icon svg-search" }), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { key: 'ecf4d93a8657957d48eb4a161dcd8e56f5b5901a', 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()));
|
|
198
198
|
}
|
|
199
199
|
static get delegatesFocus() { return true; }
|
|
200
200
|
get el() { return getElement(this); }
|
|
@@ -233,9 +233,9 @@ const Select = class {
|
|
|
233
233
|
["aria-expanded"]: this.isExpanded ? "true" : "false",
|
|
234
234
|
onClick: () => (this.isExpanded ? this.close() : this.open()),
|
|
235
235
|
};
|
|
236
|
-
return (h(Host, { key: '
|
|
236
|
+
return (h(Host, { key: 'fa575a1a3e63a5b400f07e5b342e2ef700d7dd68', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'baa4a47cbdccf5fd94472bfdcc31f16e3eb97845', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '52fe7e4efda1d5c61f71d83ea9bed610bf0ff7d0', ref: (el) => (this.labelEl = el), class: "label-wrapper" }, h("label", { key: '98d645b5f7ecf22fc223f6d8bafe95dbbfea01e8', class: "label", id: "label", htmlFor: "selectbtn" }, this.label,
|
|
237
237
|
// we can't use aria-required because the listbox is in a sub-component and it is not announced
|
|
238
|
-
this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { key: '
|
|
238
|
+
this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { key: '6920615666eea2b8a61af7b9b64b448eb65bf7cd', class: "button-wrapper" }, h("button", Object.assign({ key: 'c385e83a0c57892035238e460d1078df41ac89a1' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: '1d35604ecda7a0d1ef62f6f9af430748391604c1', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: 'c179bcae48ea1b8735e81de0b2aa1cad8fb9e5be', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: '3b51f7ffc08659adf56857c4c0414aef3ba66e86', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: 'b26a9e0108b55df4c23dfd2342abe22e917232e1', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '66364b66791fbd943d31b74888a812c67cb6d282', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '1850af252cd9fc96e8d877bf13af19aecf1709c0', class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("priv-option-list", { key: '61bf8a45afd02dfb629249eddfa345ca39df2512', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => this.close(), onOptionListAllSelected: () => this.wmSelectAllSelected.emit(), onOptionListAllDeselected: () => this.wmSelectAllDeselected.emit() }, h("slot", { key: 'acb94468f563f07e9a04c894fccd1d9253a3f727' }))), h("div", { key: '376cee397212ea358c6f50f1b9933f18a2e129aa', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: 'a11c915809ba4ca0949ece8228aec56bc3b27de8', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
|
|
239
239
|
}
|
|
240
240
|
static get delegatesFocus() { return true; }
|
|
241
241
|
get el() { return getElement(this); }
|
|
@@ -162,11 +162,11 @@ const Snackbar = class {
|
|
|
162
162
|
}, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, h("span", { "aria-hidden": "true" }, notification.link), notification.newWindow && h("div", { class: "svg-icon svg-open-in-new" })))), h("button", { id: `close-button-${notification.id}`, "aria-label": this.closeSnackMessage, 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: "svg-icon svg-close" }))), h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
|
|
163
163
|
}
|
|
164
164
|
render() {
|
|
165
|
-
return (h(Host, { key: '
|
|
165
|
+
return (h(Host, { key: '84f79309931ac4e3cad0155444af89f72ae3d211' }, h("div", { key: 'e0631cbac4313083f06fe2f3588a4ed94bc021ae', ref: (el) => (this.snackAreaEl = el), class: {
|
|
166
166
|
"list-wrapper": true,
|
|
167
167
|
"user-is-tabbing": this.isTabbing,
|
|
168
168
|
empty: this.parsedNotifications.length == 0,
|
|
169
|
-
} }, this.renderSnackbars()), h("div", { key: '
|
|
169
|
+
} }, this.renderSnackbars()), h("div", { key: '72f132ccfca3f12122535086d474d70c5013808a', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
|
|
170
170
|
}
|
|
171
171
|
get el() { return getElement(this); }
|
|
172
172
|
static get watchers() { return {
|
|
@@ -53,7 +53,7 @@ const TabItem = class {
|
|
|
53
53
|
"background-size": `calc(100% - ${bkgSize}${units}) 3px`,
|
|
54
54
|
};
|
|
55
55
|
}
|
|
56
|
-
return (h(Host, { key: '
|
|
56
|
+
return (h(Host, { key: 'd081db92266699841e3610a165247b7487dfd8b4', role: "presentation" }, h("li", { key: '7ea4b7e540272beeb97918453d3b650477acda82', class: "tab-item", role: "presentation" }, h("a", { key: '0df0562785099db106bdbbc3eb5f41a773c9f4af', 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: '14c99b96a2cdb7099246fa3aa54a8b24cc0eb444' })))));
|
|
57
57
|
}
|
|
58
58
|
static get delegatesFocus() { return true; }
|
|
59
59
|
get el() { return getElement(this); }
|
|
@@ -162,7 +162,7 @@ const TabList = class {
|
|
|
162
162
|
} }, t.textContent)));
|
|
163
163
|
}
|
|
164
164
|
render() {
|
|
165
|
-
return h(Host, { key: '
|
|
165
|
+
return h(Host, { key: '0d7838830fb150ebcc09abe4ef02af87046edf21', class: this.menuLayout ? "menu" : "" }, this.renderMenuOrTabs());
|
|
166
166
|
}
|
|
167
167
|
static get delegatesFocus() { return true; }
|
|
168
168
|
get el() { return getElement(this); }
|
|
@@ -23,7 +23,7 @@ const TabPanel = class {
|
|
|
23
23
|
this.tabPanelLoaded.emit({ tabId: this.tabId });
|
|
24
24
|
}
|
|
25
25
|
render() {
|
|
26
|
-
return h(Host, { key: '
|
|
26
|
+
return h(Host, { key: 'd49da17a1d082afda8da6520a2d716b2afe71df2', role: "tabpanel", class: { "tab-hidden": !this.active } });
|
|
27
27
|
}
|
|
28
28
|
get el() { return getElement(this); }
|
|
29
29
|
};
|
|
@@ -859,12 +859,12 @@ const TagInput = class {
|
|
|
859
859
|
}
|
|
860
860
|
}
|
|
861
861
|
render() {
|
|
862
|
-
return (h("div", { key: '
|
|
862
|
+
return (h("div", { key: '5179924285975bf64a80b56a0e9b4e53b18299c0', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '5a3aaec32372af105c38fff7ad93e3d8dece9a15', class: "label-wrapper" }, h("label", { key: '704114528b0667261afbb6eb260f31d73e71d581', class: "label", htmlFor: "input" }, this.label, this.requiredField && (h("span", { key: 'a8742c9a4cd01b099e1fdef2e6b5762e8a0e75d9', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '907d43bafec224f7b6cd0f98b593385ff2402421', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: 'bf638fd4c4052f1cbe079d96c3f38887bc2b4c34', class: "upper-row" }, h("div", { key: 'eb3cf680184eae70c6f4c8743c65c4515a333176', class: "svg-icon svg-search" }), h("div", { key: 'ef49c390852f237d641ffc0c99aa7299c496552a', class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { key: '3d73ccff4129ef44bb4661622fb8910133c9088d', 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) => {
|
|
863
863
|
this.focusedTagIndex = undefined;
|
|
864
864
|
this.handleBlur(ev);
|
|
865
|
-
}, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("input", { key: '
|
|
865
|
+
}, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("input", { key: '3639405da24d1f0cfce1f3f0a4a26bb21f9e215b', 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) => {
|
|
866
866
|
this.handleBlur(ev);
|
|
867
|
-
}, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.isDropdown && (h("div", { key: '
|
|
867
|
+
}, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.isDropdown && (h("div", { key: '8df41aafe164bb32c480c39a9b9a880b1fa9736f', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: 'fd610c005e09f0c71cbb75d05b819e876f1c911d', id: "info", class: "info-text" }, this.info)), h("div", { key: '379595c3ab805d4f85b2c1fd3d368cd3a1c7f495', id: "error" }, this.errorMessage), h("div", { key: 'e2874814e79b66e71b7c4f9adea0556d05e2087f', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
|
|
868
868
|
}
|
|
869
869
|
static get delegatesFocus() { return true; }
|
|
870
870
|
get el() { return getElement(this); }
|
|
@@ -66,7 +66,7 @@ const Textarea = class {
|
|
|
66
66
|
this.announcement = message;
|
|
67
67
|
}
|
|
68
68
|
render() {
|
|
69
|
-
return (h("div", { key: '
|
|
69
|
+
return (h("div", { key: '19d230dd662aecc8daecb8b530bbdb6cc015e59d', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '4713ca6aee901db128ade16321a5175ab090dde0', class: "label-wrapper" }, h("label", { key: '9430f4e8713a7b1b9aaacec68d6e7436b8db9774', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { key: 'aa8ae624c56a914d46d98b17b82f08c4984d87ce', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { key: '81ff5aca08b028e7807b40e862f35a8f664d7c3b', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: 'c95b5e3565514eb08499673120fafc1a301045c4', class: "inner-wrapper" }, h("div", { key: '6415935ccc7733c609529c01012769fa1af474c6', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: '7ecb61c91cd14a467007adc79f1c38f305dd05a8', 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: '19e1832bbf934e9ac9e00c37b429ce84e24aa2af', id: "info", class: "info" }, this.info)), h("div", { key: '324aa176b69408cf9a646352b55a0b3e6a2aa4c0', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: 'e748738dbdc657433bcac62bff476a589e90988e', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
|
|
70
70
|
}
|
|
71
71
|
get el() { return getElement(this); }
|
|
72
72
|
static get watchers() { return {
|
|
@@ -279,13 +279,13 @@ const Timepicker = class {
|
|
|
279
279
|
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))));
|
|
280
280
|
}
|
|
281
281
|
render() {
|
|
282
|
-
return (h(Host, { key: '
|
|
282
|
+
return (h(Host, { key: 'b54b5e2742d0ea7f6310a62227b7d6bee91e5c5c', onBlur: () => this.close(false) }, h("div", { key: '6a6e385b5de2dfd0d158fe97243cae5fb3a7f418', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: '0285d6cd59e8bc1d5c3a9c99c5d983fb9b2c4a8f', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '43fde16d53cc5deee936c4df28fd864d5350f9ef', id: "label", class: "label", htmlFor: "time-input" }, this.label, this.requiredField && (h("span", { key: '3670aa56d5f04f475183a26e2fc23e1687e509a2', class: "required", "aria-hidden": "true" }, "*"))))), h("div", { key: 'd6f7f136153a4f6fe0e275cd783fb0395a8d02a4' }, h("div", { key: 'eb5e00c4992c9045eeae3b1dcdb515e35c36df90', class: "inner-wrapper" }, h("input", { key: '6e75a7c134ef9bb3097b9ed2146ba50b3adcd1af', 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: '0aa7b64120fc225be4d7a9c655111a982a662fa1', 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()),
|
|
283
283
|
// This addresses an issue in Safari, where clicking buttons does not focus them
|
|
284
284
|
// if the button does not receive focus when clicked, Timepicker incorrectly emits a blur event
|
|
285
285
|
onMouseDown: (ev) => {
|
|
286
286
|
ev.preventDefault();
|
|
287
287
|
this.buttonEl.focus();
|
|
288
|
-
} }, h("span", { key: '
|
|
288
|
+
} }, h("span", { key: 'c1ab58c07d4189fb306216802b76c50f97edfad0', class: "svg-icon svg-time" })), h("ul", { key: 'c6c2e1b64a92ba180ff631ef870a80d49855c978', 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: 'a8123a4be3a3750c2ca20e3e93ef100e865d1388', id: "error", class: "error" }, this.errorMessage)), h("div", { key: '1856982b7ff516a98bab9233d8b444237f231ee8', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
|
|
289
289
|
}
|
|
290
290
|
static get delegatesFocus() { return true; }
|
|
291
291
|
get el() { return getElement(this); }
|
|
@@ -164,9 +164,9 @@ const Toggletip = class {
|
|
|
164
164
|
}, 10);
|
|
165
165
|
}
|
|
166
166
|
render() {
|
|
167
|
-
return (h(Host, { key: '
|
|
167
|
+
return (h(Host, { key: 'd9137cf9c5a744f3dfb869531af1dac8ae8c391e', class: `size-${this.targetSize}` }, h("button", { key: '886773ab9c83d516009d170b319c3b0e8d43ffba', class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => this.open(),
|
|
168
168
|
// In order to position the tooltip identically to the toggletip, its presence is determined by these four events
|
|
169
|
-
onMouseEnter: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, h("div", { key: '
|
|
169
|
+
onMouseEnter: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, h("div", { key: '198f5122261b7deb1dff29e93293f2ce1761c3ce', class: "svg-icon svg-info" })), h("div", { key: '5eb07951485df634ca6a6865ecefaa728567de67', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip" }, this.tooltip), h("div", { key: '3c00527e595ccde7e4a394468f048cb057b84a92', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
|
|
170
170
|
}
|
|
171
171
|
static get delegatesFocus() { return true; }
|
|
172
172
|
get el() { return getElement(this); }
|
|
@@ -298,9 +298,9 @@ const Uploader = class {
|
|
|
298
298
|
return (h("div", { class: `drop-area -${this.dropArea}`, ref: (el) => (this.dropAreaEl = el), onDragEnter: (ev) => this.handleDragEnter(ev), onDragOver: (ev) => this.handleDragOver(ev), onDragLeave: (ev) => this.handleDragLeave(ev), onDrop: (ev) => this.handleDrop(ev) }, this.dropArea == "page" && (h("div", { ref: (el) => (this.dropOverlayEl = el), class: "drop-overlay", popover: "manual" }, h("span", { class: "upload-arrow" }), h("span", null, "Drop to Upload")))));
|
|
299
299
|
}
|
|
300
300
|
render() {
|
|
301
|
-
return (h(Host, { key: '
|
|
301
|
+
return (h(Host, { key: '87d9f84e904424e7ec58db69397bc4481fbdcbb7', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: 'c51507ef1f945ac2609d3f491918462e33b0ed47', 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
|
|
302
302
|
,
|
|
303
|
-
"aria-atomic": "true" }), h("div", { key: '
|
|
303
|
+
"aria-atomic": "true" }), h("div", { key: '3398c15b3a5ecb849cbe46447845a06251a1f21c', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
|
|
304
304
|
}
|
|
305
305
|
static get delegatesFocus() { return true; }
|
|
306
306
|
get el() { return getElement(this); }
|
|
@@ -807,7 +807,7 @@ declare global {
|
|
|
807
807
|
"wmFlyoutCloseTriggered": void;
|
|
808
808
|
"wmFlyoutPrimaryTriggered": void;
|
|
809
809
|
"wmFlyoutSecondaryTriggered": void;
|
|
810
|
-
"wmFlyoutBreadcrumbClicked": { breadcrumb: string };
|
|
810
|
+
"wmFlyoutBreadcrumbClicked": { breadcrumb: string; index: number };
|
|
811
811
|
}
|
|
812
812
|
interface HTMLWmFlyoutElement extends Components.WmFlyout, HTMLStencilElement {
|
|
813
813
|
addEventListener<K extends keyof HTMLWmFlyoutElementEventMap>(type: K, listener: (this: HTMLWmFlyoutElement, ev: WmFlyoutCustomEvent<HTMLWmFlyoutElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
@@ -1562,7 +1562,7 @@ declare namespace LocalJSX {
|
|
|
1562
1562
|
"flyoutWidth"?: string;
|
|
1563
1563
|
"heading": string;
|
|
1564
1564
|
"infoText"?: string;
|
|
1565
|
-
"onWmFlyoutBreadcrumbClicked"?: (event: WmFlyoutCustomEvent<{ breadcrumb: string }>) => void;
|
|
1565
|
+
"onWmFlyoutBreadcrumbClicked"?: (event: WmFlyoutCustomEvent<{ breadcrumb: string; index: number }>) => void;
|
|
1566
1566
|
"onWmFlyoutCloseTriggered"?: (event: WmFlyoutCustomEvent<void>) => void;
|
|
1567
1567
|
"onWmFlyoutPrimaryTriggered"?: (event: WmFlyoutCustomEvent<void>) => void;
|
|
1568
1568
|
"onWmFlyoutSecondaryTriggered"?: (event: WmFlyoutCustomEvent<void>) => void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@watermarkinsights/ripple",
|
|
3
|
-
"version": "5.13.0-alpha.
|
|
3
|
+
"version": "5.13.0-alpha.13",
|
|
4
4
|
"description": "Ripple Component Library",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"main": "dist/index.cjs.js",
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"@types/jest": "^29.5.12",
|
|
62
62
|
"jest": "^29.7.0"
|
|
63
63
|
},
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "762941dba6a826849eb42fafc94b2f915a501231"
|
|
65
65
|
}
|