@watermarkinsights/ripple 5.19.0-alpha.14 → 5.19.0-alpha.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{app-globals-b7025caf.js → app-globals-f3086de8.js} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/ripple.cjs.js +1 -1
- package/dist/cjs/wm-tag-input.cjs.entry.js +20 -11
- package/dist/cjs/wm-textarea.cjs.entry.js +1 -1
- package/dist/cjs/wm-timepicker.cjs.entry.js +2 -2
- package/dist/cjs/wm-toggletip.cjs.entry.js +3 -3
- package/dist/cjs/wm-uploader.cjs.entry.js +2 -2
- package/dist/collection/components/wm-tag-input/wm-tag-input.css +9 -8
- package/dist/collection/components/wm-tag-input/wm-tag-input.js +19 -10
- package/dist/collection/components/wm-textarea/wm-textarea.js +1 -1
- package/dist/collection/components/wm-timepicker/wm-timepicker.js +2 -2
- package/dist/collection/components/wm-toggletip/wm-toggletip.js +3 -3
- package/dist/collection/components/wm-uploader/wm-uploader.js +2 -2
- package/dist/esm/{app-globals-edff5d27.js → app-globals-2efc7f7e.js} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/ripple.js +1 -1
- package/dist/esm/wm-tag-input.entry.js +20 -11
- package/dist/esm/wm-textarea.entry.js +1 -1
- package/dist/esm/wm-timepicker.entry.js +2 -2
- package/dist/esm/wm-toggletip.entry.js +3 -3
- package/dist/esm/wm-uploader.entry.js +2 -2
- package/dist/esm-es5/{app-globals-edff5d27.js → app-globals-2efc7f7e.js} +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/ripple.js +1 -1
- package/dist/esm-es5/wm-tag-input.entry.js +1 -1
- package/dist/esm-es5/wm-textarea.entry.js +1 -1
- package/dist/esm-es5/wm-timepicker.entry.js +1 -1
- package/dist/esm-es5/wm-toggletip.entry.js +1 -1
- package/dist/esm-es5/wm-uploader.entry.js +1 -1
- package/dist/ripple/{p-4496888c.entry.js → p-0a46b050.entry.js} +1 -1
- package/dist/ripple/{p-830cbcb9.system.entry.js → p-2f82bfb9.system.entry.js} +1 -1
- package/dist/ripple/p-374f46f4.entry.js +1 -0
- package/dist/ripple/{p-c5ec6fa0.system.entry.js → p-3d8754ba.system.entry.js} +1 -1
- package/dist/ripple/{p-9ba75821.system.entry.js → p-63233a4b.system.entry.js} +1 -1
- package/dist/ripple/p-6f38976c.entry.js +1 -0
- package/dist/ripple/{p-2773d645.entry.js → p-700ca4a0.entry.js} +1 -1
- package/dist/ripple/{p-98445d43.system.entry.js → p-85830dbc.system.entry.js} +1 -1
- package/dist/ripple/{p-dd56e6b5.js → p-a16ee361.js} +1 -1
- package/dist/ripple/{p-ee1bb3a1.system.js → p-a531b4f7.system.js} +1 -1
- package/dist/ripple/{p-a593d847.entry.js → p-be87d02c.entry.js} +1 -1
- package/dist/ripple/{p-d746b9c2.system.entry.js → p-ce9bb8ac.system.entry.js} +1 -1
- package/dist/ripple/{p-93ad859e.system.js → p-f6a9fe1d.system.js} +1 -1
- package/dist/ripple/ripple.esm.js +1 -1
- package/dist/ripple/ripple.js +1 -1
- package/dist/types/components/wm-tag-input/wm-tag-input.d.ts +3 -1
- package/package.json +2 -2
- package/dist/ripple/p-bc7e26c4.entry.js +0 -1
- package/dist/ripple/p-d5f154f8.entry.js +0 -1
|
@@ -292,13 +292,13 @@ const Timepicker = class {
|
|
|
292
292
|
return this.times.map((time, index$1) => (index.h("li", { id: `option${index$1 + 1}`, "data-time": time, role: "option", onClick: () => this.handleOptionClick(time) }, this.reformatTimeInternal("12", time))));
|
|
293
293
|
}
|
|
294
294
|
render() {
|
|
295
|
-
return (index.h(index.Host, { key: '
|
|
295
|
+
return (index.h(index.Host, { key: 'e05ceac51a9193466dff7a488803f09ae91c837a', onBlur: () => this.close(false) }, index.h("div", { key: '4bdd4087ff1b8c4956623571dc168d761646ce4e', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, index.h("div", { key: 'c64a7486a1c3b74f61c94ce0b3f59c45e96b639e', class: "label-wrapper" }, this.labelPosition !== "none" && (index.h("label", { key: 'cce428cf638a5932b1c157794e646f0b8026e1db', id: "label", class: "label", htmlFor: "time-input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (index.h("div", { key: '655e1585ffdb70eed624eeec16aa270f3f6584b6', "aria-hidden": "true", class: "required" }, "*"))), index.h("div", { key: '85bf657eff58d0774a25d20c0eba53d7deadd98d' }, index.h("div", { key: '0152b10359dcb69a47275ee88e0a5c0b8cacf051', class: "inner-wrapper" }, index.h("input", { key: '32a55fbfebecafa786cafafc540016f52fcbf38a', 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") }), index.h("button", { key: '4c77218b291d0d3858c456c816a608b6d2e6d8c6', 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()),
|
|
296
296
|
// This addresses an issue in Safari, where clicking buttons does not focus them
|
|
297
297
|
// if the button does not receive focus when clicked, Timepicker incorrectly emits a blur event
|
|
298
298
|
onMouseDown: (ev) => {
|
|
299
299
|
ev.preventDefault();
|
|
300
300
|
this.buttonEl.focus();
|
|
301
|
-
} }, index.h("span", { key: '
|
|
301
|
+
} }, index.h("span", { key: '0211abd0a1e89e3fd48278022f45572a8696a8de', class: "svg-icon svg-time" })), index.h("ul", { key: 'e7db5d8e3853b0c64099996064c17e361f3f0119', 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())), index.h("div", { key: 'bb587cbf052b2b54ff5cd54cd1ee26e1015adf86', id: "error", class: "error" }, this.errorMessage)), index.h("div", { key: 'bf8d0736ecbd1c987b0d5c15a87537be665812d7', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
|
|
302
302
|
}
|
|
303
303
|
static get delegatesFocus() { return true; }
|
|
304
304
|
get el() { return index.getElement(this); }
|
|
@@ -238,11 +238,11 @@ const Toggletip = class {
|
|
|
238
238
|
}
|
|
239
239
|
}
|
|
240
240
|
render() {
|
|
241
|
-
return (index.h(index.Host, { key: '
|
|
241
|
+
return (index.h(index.Host, { key: '2127bc9c0e5bebbf58fce82b7ea772a3b6fe2ada', class: `size-${this.targetSize}` }, index.h("button", { key: '55335d84975af0a4e6928b71d08745050454d4e4', ref: (el) => (this.buttonEl = el), class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => this.open(),
|
|
242
242
|
// In order to position the tooltip identically to the toggletip, its presence is determined by these four events
|
|
243
|
-
onMouseEnter: () => !this.isOpen && functions.showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => functions.hideTooltip(), onFocus: () => !this.isOpen && functions.showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), index.h("div", { key: '
|
|
243
|
+
onMouseEnter: () => !this.isOpen && functions.showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => functions.hideTooltip(), onFocus: () => !this.isOpen && functions.showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), index.h("div", { key: 'de52ea584962f47a035c900af10e31951ec49ef6', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip",
|
|
244
244
|
// @ts-ignore - despite what Typescript says, this is a valid event for popover elements
|
|
245
|
-
onToggle: (ev) => this.handlePopoverToggle(ev) }, this.tooltip), index.h("div", { key: '
|
|
245
|
+
onToggle: (ev) => this.handlePopoverToggle(ev) }, this.tooltip), index.h("div", { key: '88e8da7742e5aa390fd17be1efd6067d25f71209', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
|
|
246
246
|
}
|
|
247
247
|
static get delegatesFocus() { return true; }
|
|
248
248
|
get el() { return index.getElement(this); }
|
|
@@ -323,9 +323,9 @@ const Uploader = class {
|
|
|
323
323
|
return (index.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" && (index.h("div", { ref: (el) => (this.dropOverlayEl = el), class: "drop-overlay", popover: "manual" }, index.h("span", { class: "upload-arrow" }), index.h("span", null, "Drop to Upload")))));
|
|
324
324
|
}
|
|
325
325
|
render() {
|
|
326
|
-
return (index.h(index.Host, { key: '
|
|
326
|
+
return (index.h(index.Host, { key: '480a7275b0ebb68564f92433c8c522769ce60bc3', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), index.h("div", { key: 'b2cec25d91186e5c8a8b7b851fe116bdfdd8c174', 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
|
|
327
327
|
,
|
|
328
|
-
"aria-atomic": "true" }), index.h("div", { key: '
|
|
328
|
+
"aria-atomic": "true" }), index.h("div", { key: 'eeb50c37630ba08df7e6be89ec30a55cefeafd9a', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
|
|
329
329
|
}
|
|
330
330
|
static get delegatesFocus() { return true; }
|
|
331
331
|
get el() { return index.getElement(this); }
|
|
@@ -882,13 +882,13 @@
|
|
|
882
882
|
--wmcolor-taginput-option-text-selected: var(--wmcolor-option-text-disabled);
|
|
883
883
|
--wmcolor-taginput-option-text: var(--wmcolor-interactive);
|
|
884
884
|
--wmcolor-taginput-row-background-hover: var(--wmcolor-interactive-background-hover);
|
|
885
|
-
--wmcolor-taginput-row-background-focus: var(--wmcolor-
|
|
885
|
+
--wmcolor-taginput-row-background-focus: var(--wmcolor-background-selected);
|
|
886
886
|
--wmcolor-taginput-row-background-selected: var(--wmcolor-table-row-background-selected);
|
|
887
887
|
--wmcolor-taginput-row-background-table: var(--wmcolor-table-row-background);
|
|
888
888
|
--wmcolor-taginput-row-border-selected: var(--wmcolor-table-row-border-selected);
|
|
889
889
|
--wmcolor-taginput-tag-background-highlight: var(--wmcolor-interactive-background-highlight);
|
|
890
890
|
--wmcolor-taginput-tag-background-locked: var(--wmcolor-interactive-disabled);
|
|
891
|
-
--wmcolor-taginput-tag-background: var(--wmcolor-
|
|
891
|
+
--wmcolor-taginput-tag-background: var(--wmcolor-lilacgray-30); /* EXCEPTION */
|
|
892
892
|
--wmcolor-taginput-tag-text-locked: var(--wmcolor-text-ondark);
|
|
893
893
|
--wmcolor-taginput-tag-text: var(--wmcolor-text);
|
|
894
894
|
--wmcolor-taginput-tagbutton-background-hover: var(--wmcolor-interactive-hover);
|
|
@@ -1218,11 +1218,12 @@
|
|
|
1218
1218
|
outline: none;
|
|
1219
1219
|
background: var(--wmcolor-taginput-option-background-hover);
|
|
1220
1220
|
}
|
|
1221
|
-
:host .dropdown-wrapper li.option.focused, :host .dropdown-wrapper li.add-new-btn.focused,
|
|
1222
|
-
:host .dropdown-wrapper div.option.focused,
|
|
1223
|
-
:host .dropdown-wrapper div.add-new-btn.focused {
|
|
1221
|
+
:host .dropdown-wrapper li.option.focused:not(:hover), :host .dropdown-wrapper li.add-new-btn.focused:not(:hover),
|
|
1222
|
+
:host .dropdown-wrapper div.option.focused:not(:hover),
|
|
1223
|
+
:host .dropdown-wrapper div.add-new-btn.focused:not(:hover) {
|
|
1224
1224
|
outline: none;
|
|
1225
1225
|
background: var(--wmcolor-taginput-option-background-focus);
|
|
1226
|
+
color: var(--wmcolor-interactive-text);
|
|
1226
1227
|
}
|
|
1227
1228
|
:host .dropdown-wrapper li.help-text,
|
|
1228
1229
|
:host .dropdown-wrapper div.help-text {
|
|
@@ -1245,9 +1246,6 @@
|
|
|
1245
1246
|
overflow: auto;
|
|
1246
1247
|
margin-block-start: 1.5rem;
|
|
1247
1248
|
}
|
|
1248
|
-
:host .table-wrapper:focus {
|
|
1249
|
-
outline: none;
|
|
1250
|
-
}
|
|
1251
1249
|
:host .table-wrapper #table {
|
|
1252
1250
|
width: 100%;
|
|
1253
1251
|
border-spacing: 0px;
|
|
@@ -1266,6 +1264,9 @@
|
|
|
1266
1264
|
text-transform: uppercase;
|
|
1267
1265
|
padding: 0 1.5rem;
|
|
1268
1266
|
}
|
|
1267
|
+
:host .table-wrapper #table:focus {
|
|
1268
|
+
outline: none;
|
|
1269
|
+
}
|
|
1269
1270
|
:host .table-wrapper tr:nth-child(even) {
|
|
1270
1271
|
background-color: var(--wmcolor-taginput-altrow-background-table);
|
|
1271
1272
|
}
|
|
@@ -634,7 +634,7 @@ export class TagInput {
|
|
|
634
634
|
}
|
|
635
635
|
}
|
|
636
636
|
}
|
|
637
|
-
|
|
637
|
+
handleTableFocus() {
|
|
638
638
|
// Forward focus to first focusable table row when container receives focus
|
|
639
639
|
// First try filtered options, then fall back to all options
|
|
640
640
|
let targetOptions = this.filteredOptionEls;
|
|
@@ -717,6 +717,14 @@ export class TagInput {
|
|
|
717
717
|
// innerText is necessary vs textContent, as innerText ignores sr-only / display: none text
|
|
718
718
|
showTooltip("bottom", this._focusedOption, this._focusedOption.innerText);
|
|
719
719
|
}
|
|
720
|
+
const tableEl = this.el.shadowRoot.querySelector("#table");
|
|
721
|
+
if (!(this.el.shadowRoot.activeElement == tableEl)) {
|
|
722
|
+
tableEl.focus();
|
|
723
|
+
}
|
|
724
|
+
if (this.filteredOptionEls.length > 0 && this.focusedOption == this.filteredOptionEls[0]) {
|
|
725
|
+
// When the focused option is the first option, scroll to the top of the table so headers are visible
|
|
726
|
+
this.el.shadowRoot.querySelector(".table-wrapper").scrollTop = 0;
|
|
727
|
+
}
|
|
720
728
|
}
|
|
721
729
|
optionToFocus.scrollIntoView({ block: "nearest" });
|
|
722
730
|
}
|
|
@@ -815,6 +823,12 @@ export class TagInput {
|
|
|
815
823
|
handleTagMouseEnter(ev) {
|
|
816
824
|
this.showTooltipIfTruncated(ev.target);
|
|
817
825
|
}
|
|
826
|
+
renderDropdownInput() {
|
|
827
|
+
return (h("input", { id: "input", class: "input", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": "dropdown", "aria-describedby": `help-text ${this.errorMessage ? "error " : ""} max-tags`, "aria-label": `${this.label} ${globalMessages.getCharacterLimit(this.characterLimit)}`, "aria-expanded": this.isExpanded.toString(), "aria-activedescendant": this.inputActiveDescendantId, placeholder: this.placeholder, maxLength: this.characterLimit, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => this.handleBlur(ev), onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) }));
|
|
828
|
+
}
|
|
829
|
+
renderTableInput() {
|
|
830
|
+
return (h("input", { id: "input", class: "input", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": "table", "aria-describedby": `help-text ${this.errorMessage ? "error " : ""} max-tags`, "aria-label": this.label, placeholder: this.placeholder, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => this.handleBlur(ev), onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) }));
|
|
831
|
+
}
|
|
818
832
|
renderDropdown() {
|
|
819
833
|
return (h("div", { class: `dropdown-wrapper ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { id: "help-text", class: "help-text" }, this.renderHelpText()), h("ul", { class: "dropdown", id: "dropdown", role: "listbox", "aria-multiselectable": "true", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.label, tabindex: -1 }, this.inputEl && this.renderAddNewButton(), this.filteredOptionEls.map((o) => this.renderListItem(o)))));
|
|
820
834
|
}
|
|
@@ -841,11 +855,8 @@ export class TagInput {
|
|
|
841
855
|
renderTable() {
|
|
842
856
|
return (h("div", { class: `table-wrapper ${this.isKeying ? "user-is-keying" : ""}`, onScroll: () => this.dismissTooltip(),
|
|
843
857
|
// browsers will make this container tabbable if it scrolls
|
|
844
|
-
//
|
|
845
|
-
onFocus: () => this.
|
|
846
|
-
// ...and for consistency, the table, whether it scrolls or not, should be tabbable
|
|
847
|
-
// as long as it's not empty
|
|
848
|
-
tabindex: this.filteredOptionEls.length ? "0" : undefined, onKeyDown: (ev) => this.handleTableWrapperKeyDown(ev) }, h("table", { id: "table", role: "grid", class: `${this.colWidths ? "fixed-widths" : ""}`, "aria-label": this.label, "aria-multiselectable": "true" }, this.renderTableHeaders(), this.filteredOptionEls.length ? (this.filteredOptionEls.map((o) => this.renderTableRow(o))) : (h("div", { class: "no-results" }, this.noResultsMessage)))));
|
|
858
|
+
// we need to proactively set tabindex to -1 to avoid user focus. This is okay, because the table provides behavior that allows scrolling its content
|
|
859
|
+
tabindex: -1, onKeyDown: (ev) => this.handleTableWrapperKeyDown(ev) }, h("table", { id: "table", role: "grid", class: `${this.colWidths ? "fixed-widths" : ""}`, "aria-label": this.label, "aria-multiselectable": "true", onFocus: () => this.handleTableFocus(), "aria-activedescendant": this._focusedCell ? this._focusedCell.id : undefined, tabindex: this.filteredOptionEls.length ? "0" : undefined }, this.renderTableHeaders(), this.filteredOptionEls.length ? (this.filteredOptionEls.map((o) => this.renderTableRow(o))) : (h("div", { class: "no-results" }, this.noResultsMessage)))));
|
|
849
860
|
}
|
|
850
861
|
renderTableHeaders() {
|
|
851
862
|
return (h("tr", { class: "headers", role: "row" }, csvToArray(this.colHeaders).map((header, idx) => (h("th", { class: "header-cell", role: "columnheader",
|
|
@@ -916,12 +927,10 @@ export class TagInput {
|
|
|
916
927
|
}
|
|
917
928
|
}
|
|
918
929
|
render() {
|
|
919
|
-
return (h("div", { key: '
|
|
930
|
+
return (h("div", { key: 'a605a67a736cfced28788202c713c9a471829815', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '2b6e16b5779bfe055260370775e3517378917636', class: "label-wrapper" }, h("label", { key: 'b47147159b09e53988dba0f360665853ef522167', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), this.requiredField && (h("div", { key: '06afe2cbaf6a32989ee70fd50725adb875d9a8b3', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: 'ba9a1ed7545a2f0b3b72ebdf23231de7df9abf20', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '03b6ba86a93df334ba0af0e5759cb0834f5e002e', class: "upper-row" }, h("div", { key: '5a4b29d9cdcc228426a29524d51e47be84728da8', class: "svg-icon svg-search" }), h("div", { key: 'ddd1831f74b7a5204b9ee0077bfe475e5782369c', class: `tags-and-input-wrapper` }, h("ul", { key: '0f561a33d4fd7dc683d04bc6c47f0e0f6c096f0a', 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) => {
|
|
920
931
|
this.focusedTagIndex = undefined;
|
|
921
932
|
this.handleBlur(ev);
|
|
922
|
-
}, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("
|
|
923
|
-
this.handleBlur(ev);
|
|
924
|
-
}, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.isDropdown && (h("div", { key: '418f93ca2ea86a1fa46a6d2f601c84e309c32a2f', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: 'a4a98937151304e2d9357f0522d445b6f841eb02', id: "info", class: "info-text" }, this.info)), h("div", { key: 'b6ac66b1e5a056503da95df5b1eec2bcba259b76', id: "error" }, this.errorMessage), h("div", { key: '5f7e12833cadb8961f850aa47a8e61262e6d3779', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
|
|
933
|
+
}, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (h("div", { key: 'cd62e6627ab5932fb436f333cfb4a33ba3404adc', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: '7cc8c9ba718417cbea5b26b15f7f671b5ad2ee06', id: "info", class: "info-text" }, this.info)), h("div", { key: 'a8be5ef2c7f945226f9136c0009a9ce3bcc33686', id: "error" }, this.errorMessage), h("div", { key: '3159070da0e032545bf5e3b2ae1e7d8eb6917e69', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
|
|
925
934
|
}
|
|
926
935
|
static get is() { return "wm-tag-input"; }
|
|
927
936
|
static get encapsulation() { return "shadow"; }
|
|
@@ -71,7 +71,7 @@ export class Textarea {
|
|
|
71
71
|
this.announcement = message;
|
|
72
72
|
}
|
|
73
73
|
render() {
|
|
74
|
-
return (h("div", { key: '
|
|
74
|
+
return (h("div", { key: 'c2bdf3a833b32103d85e4d19572985dde836aeb8', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '61f16420145b5289639728f06f7a7e9c90ecb220', class: "label-wrapper" }, h("label", { key: 'cf3a1d2dbe614498ce76f7d10252ddabe591ffc7', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: 'ed53aebd7ba2338ba9a34db8ed84f86266fb01a0', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.requiredField && (h("span", { key: 'c91d58aa6d531d19ca62227f1f9ae6776dc2e6eb', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: 'abbd117e4231de2ee3d696216d869a3ac3078240', class: "inner-wrapper" }, h("div", { key: 'e94b2f9f8bbf6d5e374e68555ac266789283b280', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: '908e5bb512ed6253d5f1c9cb593f74cf5766ef8c', 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: '51239b18371da181395d159315d280e1993383cd', id: "info", class: "info" }, this.info)), h("div", { key: 'dd678537871b6ac6efeec23995a1c8bb5a9c3fbb', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '54e35dfe321a05965fc555814cdd3235457a0871', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
|
|
75
75
|
}
|
|
76
76
|
static get is() { return "wm-textarea"; }
|
|
77
77
|
static get encapsulation() { return "shadow"; }
|
|
@@ -281,13 +281,13 @@ export class Timepicker {
|
|
|
281
281
|
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))));
|
|
282
282
|
}
|
|
283
283
|
render() {
|
|
284
|
-
return (h(Host, { key: '
|
|
284
|
+
return (h(Host, { key: 'e05ceac51a9193466dff7a488803f09ae91c837a', onBlur: () => this.close(false) }, h("div", { key: '4bdd4087ff1b8c4956623571dc168d761646ce4e', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: 'c64a7486a1c3b74f61c94ce0b3f59c45e96b639e', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: 'cce428cf638a5932b1c157794e646f0b8026e1db', id: "label", class: "label", htmlFor: "time-input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '655e1585ffdb70eed624eeec16aa270f3f6584b6', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: '85bf657eff58d0774a25d20c0eba53d7deadd98d' }, h("div", { key: '0152b10359dcb69a47275ee88e0a5c0b8cacf051', class: "inner-wrapper" }, h("input", { key: '32a55fbfebecafa786cafafc540016f52fcbf38a', 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: '4c77218b291d0d3858c456c816a608b6d2e6d8c6', 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()),
|
|
285
285
|
// This addresses an issue in Safari, where clicking buttons does not focus them
|
|
286
286
|
// if the button does not receive focus when clicked, Timepicker incorrectly emits a blur event
|
|
287
287
|
onMouseDown: (ev) => {
|
|
288
288
|
ev.preventDefault();
|
|
289
289
|
this.buttonEl.focus();
|
|
290
|
-
} }, h("span", { key: '
|
|
290
|
+
} }, h("span", { key: '0211abd0a1e89e3fd48278022f45572a8696a8de', class: "svg-icon svg-time" })), h("ul", { key: 'e7db5d8e3853b0c64099996064c17e361f3f0119', 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: 'bb587cbf052b2b54ff5cd54cd1ee26e1015adf86', id: "error", class: "error" }, this.errorMessage)), h("div", { key: 'bf8d0736ecbd1c987b0d5c15a87537be665812d7', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
|
|
291
291
|
}
|
|
292
292
|
static get is() { return "wm-timepicker"; }
|
|
293
293
|
static get encapsulation() { return "shadow"; }
|
|
@@ -229,11 +229,11 @@ export class Toggletip {
|
|
|
229
229
|
}
|
|
230
230
|
}
|
|
231
231
|
render() {
|
|
232
|
-
return (h(Host, { key: '
|
|
232
|
+
return (h(Host, { key: '2127bc9c0e5bebbf58fce82b7ea772a3b6fe2ada', class: `size-${this.targetSize}` }, h("button", { key: '55335d84975af0a4e6928b71d08745050454d4e4', ref: (el) => (this.buttonEl = el), class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => this.open(),
|
|
233
233
|
// In order to position the tooltip identically to the toggletip, its presence is determined by these four events
|
|
234
|
-
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() }, this.renderIcon()), h("div", { key: '
|
|
234
|
+
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() }, this.renderIcon()), h("div", { key: 'de52ea584962f47a035c900af10e31951ec49ef6', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip",
|
|
235
235
|
// @ts-ignore - despite what Typescript says, this is a valid event for popover elements
|
|
236
|
-
onToggle: (ev) => this.handlePopoverToggle(ev) }, this.tooltip), h("div", { key: '
|
|
236
|
+
onToggle: (ev) => this.handlePopoverToggle(ev) }, this.tooltip), h("div", { key: '88e8da7742e5aa390fd17be1efd6067d25f71209', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
|
|
237
237
|
}
|
|
238
238
|
static get is() { return "wm-toggletip"; }
|
|
239
239
|
static get encapsulation() { return "shadow"; }
|
|
@@ -313,9 +313,9 @@ export class Uploader {
|
|
|
313
313
|
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")))));
|
|
314
314
|
}
|
|
315
315
|
render() {
|
|
316
|
-
return (h(Host, { key: '
|
|
316
|
+
return (h(Host, { key: '480a7275b0ebb68564f92433c8c522769ce60bc3', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: 'b2cec25d91186e5c8a8b7b851fe116bdfdd8c174', 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
|
|
317
317
|
,
|
|
318
|
-
"aria-atomic": "true" }), h("div", { key: '
|
|
318
|
+
"aria-atomic": "true" }), h("div", { key: 'eeb50c37630ba08df7e6be89ec30a55cefeafd9a', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
|
|
319
319
|
}
|
|
320
320
|
static get is() { return "wm-uploader"; }
|
|
321
321
|
static get encapsulation() { return "shadow"; }
|
package/dist/esm/loader.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { b as bootstrapLazy } from './index-130e07bb.js';
|
|
2
2
|
export { s as setNonce } from './index-130e07bb.js';
|
|
3
|
-
import { g as globalScripts } from './app-globals-
|
|
3
|
+
import { g as globalScripts } from './app-globals-2efc7f7e.js';
|
|
4
4
|
|
|
5
5
|
const defineCustomElements = async (win, options) => {
|
|
6
6
|
if (typeof window === 'undefined') return undefined;
|
package/dist/esm/ripple.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as promiseResolve, b as bootstrapLazy } from './index-130e07bb.js';
|
|
2
2
|
export { s as setNonce } from './index-130e07bb.js';
|
|
3
|
-
import { g as globalScripts } from './app-globals-
|
|
3
|
+
import { g as globalScripts } from './app-globals-2efc7f7e.js';
|
|
4
4
|
|
|
5
5
|
/*
|
|
6
6
|
Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com
|