@watermarkinsights/ripple 5.13.0-alpha.11 → 5.13.0-alpha.12
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 +4 -3
- 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/package.json +2 -2
|
@@ -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: '35b5a920424ccf73ba6c0f8b073660bc55f11d13', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '4a6083fd7d7a37484a11f76e23b09b38c45c5efc', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'f04741975bfc4f279c599fce8c75d388b8c4cd1b', class: "label-wrapper" }, h("label", { key: 'a736b71a96766ddbc7a9117edc93a9c4f726cadc', 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: '3b7e545c988aa5632f6642724c014833626cab84', class: "button-wrapper" }, h("button", Object.assign({ key: '25b334f4ca5c404caa0c0247bf55b4f5b413095d' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: 'c4d56e83b6b4c89dc0e104593fa92b9ba2a8c21f', class: "overflowcontrol" }, h("span", { key: 'b760eef949e5253468f13baff83667ee434d1951', class: "button-text" }, this.renderButtonText())), h("div", { key: 'db5f385e8000f44b7b9766a64d5cee7705f454f0', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '25e7af8324bd62bad0e695a607ed250979c16b4a', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '7934c8d583cd0d55c71e2c48178e6068f3493717', class: `dropdown ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { key: 'aab0cff0d97a087612183e537d440f723fa227cc', 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: 'e232b3658388254d67f422d7c61cf5dd76b78b01', ref: (el) => (this.optListWrapperEl = el), class: "option-list-wrapper hidden" }, h("slot", { key: '21c9e76ac62b193033df6865b12554db5d6eecc9' }))), h("div", { key: '5f8031fb45f9db031883834330717dc59ef21720', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), h("div", { key: '102c6d80ad7424b8d306125f06632b4316101533', 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: 'bba30132f0e662bcfc6f9a4280558aa4426673f4' }, h("div", { key: '757e663ad18a9a451169f994f54faf8f9182e1d9', class: `list-wrapper` }, h("priv-option-list", { key: '1bfda628a518f2508084a2382cc7a2f19754859e', 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: 'd584feb13518107132003e262c5bcc818b677c5c' })))));
|
|
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: '613fb3ff6678fbe5793a432817705b46c502ae06', role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { key: '8f9e3e8a88bf839e6b5801f01e6b451d297bce55', class: `option-wrapper ${this.parentOptionList.multiple ? "checkbox" : ""}` }, this.parentOptionList.multiple && (h("div", { key: '82c0706404571fda0937308433b9def82f021666', class: `checkbox svg-icon ${this.selected ? "svg-checkbox-selected" : "svg-checkbox-blank"}` })), h("span", { key: '8c657048302620555e49630a4adc94171894b0a3', class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { key: '879fad664edef7a7188a8dfac862b29d7f78af42', class: "sr-only" }, this.el.textContent)), h("div", { key: 'bf5a1372a0daf05ef3cf8af196eddcaacd7ee049', 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: 'b560fdf7586a80ce3e117d74d264e56afd7de42e', "aria-label": `${this.navigationLabel} ${this.getCurrentPagesInView()}. ${this.currentPageAnnouncement(this.currentPage)}` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { key: '8d35b0f1049ac65751a14d96daef2cfcd5928765', 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: '05666b54ac54aa245610f80b91f44f15ab242b23', onBlur: () => exitChart.call(this) }, h("div", { key: '0bae0b3024cbf29cc8a6da5e68884004772c4380', 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: 'b43987a6beb4fb9526a59aefd5d7fb265fcff8f7', id: `label-${this.uid}`, class: "label", htmlFor: `graphic-${this.uid}` }, h("span", { key: 'ead5c96e6147c1461419914f46b3cc05b792b78d', 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: '502cd128a387accac34456f289bb78802a52a650', 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: '402d49cded01a03166bcf88d9a97116fe36d4586', class: this.mode === "doughnut" ? "row" : "column" }, this.modeInitialized && this.groupLegend && this.mode === "bar" && this.renderLegend(), this.modeInitialized && h("slot", { key: '137935e1ee1337a58d7b09412522e4ab0bdcdf4b' })));
|
|
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: '44fb666bb24ce19be5c1bb2b49da8e293d42f1de' }, h("div", { key: '134ffa5150ae4fbb63bffc6f2c34d42fad590205', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { key: 'ac167e75f10db71531d4b9beea9c9e2ff3e1bdb1', 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: '0c180be6082de7eddb06b2d15307fa85192915dc', class: "svg-icon svg-search" }), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { key: '794b85e73e667dabcf8c0004d8e44a16f7a4197d', 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: 'e37a1ce52a903991570fbf06cad2b17ccae703de', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '973d0197afb6fef37768c0ea86002b9be4a4e50e', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '7632bd4f20bc49fbfc3b4e7a9c8ed63d7a7a6f44', ref: (el) => (this.labelEl = el), class: "label-wrapper" }, h("label", { key: '20caf14eab2111ba2b8f86519e2ba99be2eee496', 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: 'a527d782f81eeeb771164cc0b7449b696f34196d', class: "button-wrapper" }, h("button", Object.assign({ key: '39ed454cbff5e73d98d36eefd6fb79320f0dc517' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: '658551325b10ae492b13018e57a7871497972f8f', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '425e8afaf12ee7921219e5b2076156459570fc72', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: 'c6bfe3c261ece6a4dfd6489fae77dd91b7730629', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: 'f9d3c5405c82d7724b074a197ca9c6f17acc1042', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '8452deceae0ecbcbf96a64c2d406aea66023b6ef', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'e5beb9e541348fe6127a058e60c4a292cbabb264', class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("priv-option-list", { key: '2ff10a32e89a597176a96ac852dd6e1fe118fc74', 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: '947c0114cae3a41d14f5d0ecfaf72a6e4c61f411' }))), h("div", { key: '50b156927292a726eac80a6035db6185483cdf35', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: 'de0b2e27d65056a691182397405c6eec7cb38fcf', 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: '23003d2dff16f54e3f8d9fcbe924058c0e23489c' }, h("div", { key: 'eafdca94ad9779b72e2576a210987408cdb5627e', 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: '948ddf12bec333b1a88cfc9f2baa68cf0936ff36', 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: '1711c11246e52e27e71f30e566ab41683ee23cd4', role: "presentation" }, h("li", { key: 'f57bc99f98ff481689a68889e81c5925aa68892c', class: "tab-item", role: "presentation" }, h("a", { key: '76e051b18c17ea8367f74cc9a2b7b2b84d2ef990', 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: 'e834ebba3c6c512ef7b1093d3c1ea298745fbf85' })))));
|
|
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: '457d95719d7ab99677336d44c5bff02f5780a6af', 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: '0b7f81b627ce53b1ce496c4babd16bf74c57275c', 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: '7d8c886c6c3e1222b5b75f39abc0675b6d3c6391', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '773290cfa1656ecf851131cb51a277f86c7958fe', class: "label-wrapper" }, h("label", { key: '1be0c47a321fb9b401e977595c1227e3f66df056', class: "label", htmlFor: "input" }, this.label, this.requiredField && (h("span", { key: 'fdb58e1f11e67c041961ea773880937f5c9595a4', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: 'a1c677b7cdd2f2462541ee54b3c9e2b8dbf8de04', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: 'ddf599d183d941327bed5e2fee01e7203d18b139', class: "upper-row" }, h("div", { key: '54d35cbfd2cdd5e6d18ed96391880ffcffdbd79b', class: "svg-icon svg-search" }), h("div", { key: '259e667e4b5597b8845d7d022b66dbaeac1a2862', class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { key: '67e003d45ed9c278626de2a95e4a0fb8acbdd194', 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: 'a0fdcf2f8f9f6b919e854ddcb3db5f2f47b781a0', 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: '18d2eae04010daa298a74f78f1b9518497a4479e', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: '5f4c1611560dedb1f1bf7b0ccdafd2034b64e308', id: "info", class: "info-text" }, this.info)), h("div", { key: '4e7a79722863aa2db7278bebe58dd1fbe76f6f3f', id: "error" }, this.errorMessage), h("div", { key: '10c7818043b3d9dc85341f9b0107cee9199aa780', 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: '51737864a8a2007cd82214adfb9917318eac76ae', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '5dd0a741e86fd626019c3ccfb25cb2741c405a65', class: "label-wrapper" }, h("label", { key: 'a3843d5240a623a31725bb94d73a80616a6c7f70', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { key: '5d9e488db01668a794bdaa1c0b8b2d29c94874b4', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { key: 'cfca0f1f18ddc808dd90d300d35de54918aaea80', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '3d91905f9dd67127c4f84ecc4d5bc8eb011a12e0', class: "inner-wrapper" }, h("div", { key: '603c2ed498216be12a757d1725c96d25a726f1fa', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: 'cdeaa4d4dd779682a7bcc9118119ce120d82489e', 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: '32e14b8d7bc414f4d75d6dbce66805c6c8658574', id: "info", class: "info" }, this.info)), h("div", { key: '6bb6d301754a4305704eab7db1285e60d6ebae91', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '9c01d2c255d163bc461cd8cffdf8530831b6858e', 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: '75c58eb3889b4608731626a626c3e258d0ec847f', onBlur: () => this.close(false) }, h("div", { key: 'ca41df7312aee146f9bba55a014db11a4bc7bdca', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: '9b23e549863796691cd801d1f7dc4aa2647cd500', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '0a2962b5f6012d7e574a7514c754fd50c6d799a3', id: "label", class: "label", htmlFor: "time-input" }, this.label, this.requiredField && (h("span", { key: '4dd27ce330c1576bcd95c414686504e843b7f383', class: "required", "aria-hidden": "true" }, "*"))))), h("div", { key: 'f25c696ee97660f53339083b8fd8350c6fef3709' }, h("div", { key: '09a6c2e7d95170af417bfb9ec25ba8a57532d666', class: "inner-wrapper" }, h("input", { key: 'c5ab576ef84f9909530fd0ab04f634019ce8ac9a', 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: '9669a42ba3897487e8c5ba2096ccbd69431ed6d0', 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: '1895dd0bb547ff6538c7c9c71ef908789cf0a063', class: "svg-icon svg-time" })), h("ul", { key: 'ff29ad47af475536ee5ff28b331d119a1a62d34f', 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: '1bfc84ec0632852c000dc94ef8e63ec55689174e', id: "error", class: "error" }, this.errorMessage)), h("div", { key: 'd7c1b581e3441cadeb547f29399aee7412011670', 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: 'c4f1f99b1b4991ef7bef8763f36cf684100e44ec', class: `size-${this.targetSize}` }, h("button", { key: '9ca73e3a4d53c58ed96c148a6c1c184d2360bd35', 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: '46e7410232d32cac61fe4cd29a195fcd689251d7', class: "svg-icon svg-info" })), h("div", { key: '9a689f66818b357e2729654099a52075a624f5f6', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip" }, this.tooltip), h("div", { key: 'd792b4e03c3628cd44978e63969cb780481d8003', 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: '526e31f28091186890b8f8e842dee071f989b064', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: '688b7d26a22a3c82b5cc1da35b139e9d76474aee', 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: '4a6478eacb3f63102d387bfd7e65190139a8636e', 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); }
|
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.12",
|
|
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": "9fac6479599dfabc7bad73bb4e96b697507aa8e0"
|
|
65
65
|
}
|