@watermarkinsights/ripple 4.7.0-8 → 4.7.0

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.
Files changed (48) hide show
  1. package/dist/cjs/{global-466ff2a7.js → global-9bb19c6b.js} +1 -1
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/ripple.cjs.js +1 -1
  4. package/dist/cjs/wm-chart.cjs.entry.js +3 -3
  5. package/dist/cjs/wm-option_2.cjs.entry.js +8 -14
  6. package/dist/cjs/wm-tag-input.cjs.entry.js +5 -9
  7. package/dist/collection/components/charts/wm-chart/wm-chart.js +3 -3
  8. package/dist/collection/components/wm-option/wm-option.css +1 -1
  9. package/dist/collection/components/wm-option/wm-option.js +1 -1
  10. package/dist/collection/components/wm-select/wm-select.js +6 -12
  11. package/dist/collection/components/wm-tag-input/wm-tag-input.js +5 -9
  12. package/dist/esm/{global-524aad82.js → global-65f8eb62.js} +1 -1
  13. package/dist/esm/loader.js +1 -1
  14. package/dist/esm/polyfills/core-js.js +0 -0
  15. package/dist/esm/polyfills/dom.js +0 -0
  16. package/dist/esm/polyfills/es5-html-element.js +0 -0
  17. package/dist/esm/polyfills/index.js +0 -0
  18. package/dist/esm/polyfills/system.js +0 -0
  19. package/dist/esm/ripple.js +1 -1
  20. package/dist/esm/wm-chart.entry.js +3 -3
  21. package/dist/esm/wm-option_2.entry.js +8 -14
  22. package/dist/esm/wm-tag-input.entry.js +5 -9
  23. package/dist/esm-es5/global-65f8eb62.js +1 -0
  24. package/dist/esm-es5/loader.js +1 -1
  25. package/dist/esm-es5/ripple.js +1 -1
  26. package/dist/esm-es5/wm-chart.entry.js +1 -1
  27. package/dist/esm-es5/wm-option_2.entry.js +1 -1
  28. package/dist/esm-es5/wm-tag-input.entry.js +1 -1
  29. package/dist/ripple/p-0ecd6b30.system.entry.js +1 -0
  30. package/dist/ripple/p-13cb8d77.entry.js +1 -0
  31. package/dist/ripple/{p-87c3c850.system.entry.js → p-469eb1e1.system.entry.js} +1 -1
  32. package/dist/ripple/p-65503186.js +1 -0
  33. package/dist/ripple/p-68a1f477.system.js +1 -0
  34. package/dist/ripple/{p-f59da268.system.js → p-af626ea0.system.js} +1 -1
  35. package/dist/ripple/p-bc873bf5.entry.js +1 -0
  36. package/dist/ripple/p-c0fdeb76.entry.js +1 -0
  37. package/dist/ripple/{p-c419cd76.system.entry.js → p-ed79058d.system.entry.js} +1 -1
  38. package/dist/ripple/ripple.esm.js +1 -1
  39. package/dist/ripple/ripple.js +1 -1
  40. package/dist/types/components/wm-select/wm-select.d.ts +0 -1
  41. package/package.json +1 -1
  42. package/dist/esm-es5/global-524aad82.js +0 -1
  43. package/dist/ripple/p-3cc558fa.js +0 -1
  44. package/dist/ripple/p-5d97b914.system.js +0 -1
  45. package/dist/ripple/p-7a4c9822.entry.js +0 -1
  46. package/dist/ripple/p-8c45e7c4.system.entry.js +0 -1
  47. package/dist/ripple/p-9490cc0b.entry.js +0 -1
  48. package/dist/ripple/p-f9b4763e.entry.js +0 -1
package/dist/cjs/{global-466ff2a7.js → global-9bb19c6b.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- const version = "4.7.0-8";
3
+ const version = "4.7.0";
4
4
 
5
5
  function injectDefaultTheme() {
6
6
  const style = `
package/dist/cjs/loader.cjs.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-f8ef86de.js');
6
- require('./global-466ff2a7.js');
6
+ require('./global-9bb19c6b.js');
7
7
 
8
8
  const defineCustomElements = (win, options) => {
9
9
  if (typeof window === 'undefined') return undefined;
package/dist/cjs/ripple.cjs.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-f8ef86de.js');
6
- require('./global-466ff2a7.js');
6
+ require('./global-9bb19c6b.js');
7
7
 
8
8
  /*
9
9
  Stencil Client Patch Browser v4.8.2 | MIT Licensed | https://stenciljs.com
package/dist/cjs/wm-chart.cjs.entry.js CHANGED
@@ -16,7 +16,7 @@ const Chart = class {
16
16
  // @ts-ignore-- TS warns this is unused, but its needed in chartFunctions
17
17
  this.slicesDetails = [];
18
18
  this.handleStackedBarResize = functions.debounce(async () => {
19
- // if any value text overlaps with another, hide it and display warning
19
+ // if any value text overlaps with another, except zeroes, hide it and display warning
20
20
  let hasHiddenBarValue = false;
21
21
  const textEls = this.el.shadowRoot.querySelectorAll(".value");
22
22
  if (textEls.length > 0) {
@@ -25,8 +25,8 @@ const Chart = class {
25
25
  textEls.forEach((textEl) => {
26
26
  textEl.classList.remove("hidden");
27
27
  const currentValue = parseInt(textEl.dataset.value);
28
- // only proceed if there are prevTextEls to check for overlap
29
- if (prevTextEls.length > 0) {
28
+ // only proceed if there are prevTextEls to check for overlap, and current value is not 0
29
+ if (prevTextEls.length > 0 && currentValue != 0) {
30
30
  const currentLeftEdge = textEl.getBoundingClientRect().left - margin;
31
31
  // check for overlap with all prevTextEls & hide the smaller value if overlap occurs
32
32
  prevTextEls.forEach((prevTextEl) => {
package/dist/cjs/wm-option_2.cjs.entry.js CHANGED
@@ -6,7 +6,7 @@ const index = require('./index-f8ef86de.js');
6
6
  const functions = require('./functions-f16c2df2.js');
7
7
  const intl = require('./intl-9a4babcf.js');
8
8
 
9
- const wmOptionCss = ":host(:not(:last-child)){border-bottom:2px solid;border-color:var(--wmcolor-select-option-border)}:host{display:block;cursor:pointer;position:relative;padding:1.25rem;background:var(--wmcolor-select-option-background);font-family:inherit;list-style:none;color:var(--wmcolor-select-option-text);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host:focus,:host.focus{outline:none;background:var(--wmcolor-select-option-background-focus)}:host.icon{color:var(--wmcolor-interactive)}:host .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.checkbox:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f131\";display:inline-block;margin-right:0.25rem;color:var(--wmcolor-interactive)}:host([aria-selected=true]){background:var(--wmcolor-select-option-background-selected);font-weight:500}:host([aria-selected=true]) .checkbox:before{content:\"\\f132\"}:host([aria-disabled=true]){font-style:italic;color:var(--wmcolor-select-option-text-disabled);cursor:default}:host([aria-disabled=true]) .checkbox:before{color:var(--wmcolor-select-option-text-disabled)}:host(.multi-option){background:unset}:host(.clone.last){border-bottom:12px solid;border-color:var(--wmcolor-select-option-border)}:host(.hassubinfo){display:-ms-flexbox;display:flex}:host(.hassubinfo) .option-wrapper{-ms-flex:1;flex:1}:host(.hassubinfo) .subinfo{-ms-flex:none;flex:none}:host(.hidden),:host(.filtered-out){display:none}.subinfo{font-style:italic}.option-wrapper{display:inline-block}::slotted{font-family:inherit}::slotted(i){font-size:0.875rem}::slotted(i):before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-block;margin-right:0.625rem;pointer-events:none}:host(:focus){outline:none;background:var(--wmcolor-select-option-background-hover)}:host(:hover){background:var(--wmcolor-select-option-background-hover);outline:none}";
9
+ const wmOptionCss = ":host(:not(:last-child)){border-bottom:2px solid;border-color:var(--wmcolor-select-option-border)}:host{display:block;cursor:pointer;position:relative;padding:1.25rem;background:var(--wmcolor-select-option-background);font-family:inherit;list-style:none;color:var(--wmcolor-select-option-text);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host:focus,:host.focus{outline:none;background:var(--wmcolor-select-option-background-focus)}:host.icon{color:var(--wmcolor-interactive)}:host .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.checkbox:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f131\";display:inline-block;margin-right:0.25rem;color:var(--wmcolor-interactive)}:host([aria-selected=true]){background:var(--wmcolor-select-option-background-selected);font-weight:500}:host([aria-selected=true]) .checkbox:before{content:\"\\f132\"}:host([aria-disabled=true]){font-style:italic;color:var(--wmcolor-select-option-text-disabled);cursor:default}:host([aria-disabled=true]) .checkbox:before{color:var(--wmcolor-select-option-text-disabled)}:host(.multi-option){background:unset}:host(.clone.last){border-bottom:12px solid;border-color:var(--wmcolor-select-option-border)}:host(.hassubinfo){display:-ms-flexbox;display:flex}:host(.hassubinfo) .option-wrapper{-ms-flex:1;flex:1}:host(.hassubinfo) .subinfo{-ms-flex:none;flex:none}:host(.hidden),:host(.filtered-out){display:none}.subinfo{font-style:italic}.option-text{display:inline-block}::slotted{font-family:inherit}::slotted(i){font-size:0.875rem}::slotted(i):before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-block;margin-right:0.625rem;pointer-events:none}:host(:focus){outline:none;background:var(--wmcolor-select-option-background-hover)}:host(:hover){background:var(--wmcolor-select-option-background-hover);outline:none}";
10
10
 
11
11
  const Option = class {
12
12
  constructor(hostRef) {
@@ -145,7 +145,7 @@ const Option = class {
145
145
  this.parentSelectEl.addEventListener("wmSelectSearchChanged", (ev) => this.handleSearch(ev));
146
146
  }
147
147
  render() {
148
- return (index.h(index.Host, { role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, index.h("div", { class: `option-wrapper ${this.parentSelectEl.multiple ? "checkbox" : ""}` }, index.h("span", { "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), index.h("span", { class: "sr-only" }, this.el.textContent)), index.h("div", { class: "subinfo" }, this.subinfo)));
148
+ return (index.h(index.Host, { role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, index.h("div", { class: `option-wrapper ${this.parentSelectEl.multiple ? "checkbox" : ""}` }, index.h("span", { class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), index.h("span", { class: "sr-only" }, this.el.textContent)), index.h("div", { class: "subinfo" }, this.subinfo)));
149
149
  }
150
150
  get el() { return index.getElement(this); }
151
151
  static get watchers() { return {
@@ -658,7 +658,7 @@ const Select = class {
658
658
  const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
659
659
  const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
660
660
  const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
661
- let optionsWidths = this.displayedOptions.map((x) => x.shadowRoot.querySelector(".option-wrapper").clientWidth);
661
+ let optionsWidths = this.displayedOptions.map((x) => x.shadowRoot.querySelector(".option-text").clientWidth);
662
662
  let optionsTotalWidth = optionsWidths.reduce((acc, x) => acc + x, 0);
663
663
  this.overflowCount = 0;
664
664
  while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
@@ -687,12 +687,6 @@ const Select = class {
687
687
  return this.displayedOptions.map((x, idx) => (index.h("span", null, idx > 0 ? ", " : "", x.textContent)));
688
688
  }
689
689
  }
690
- renderSubinfo() {
691
- // multiselects cannot have subinfo for options
692
- if (!this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo) {
693
- return index.h("span", { class: "subinfo" }, this.selectedOptions[0].subinfo);
694
- }
695
- }
696
690
  renderOverflowCount() {
697
691
  if (this.overflowCount > 0 && !this.allSelected) {
698
692
  return (index.h("span", null, index.h("span", { class: "overflow-counter" }, "+", this.overflowCount)));
@@ -708,11 +702,13 @@ const Select = class {
708
702
  return (index.h("button", { ref: (el) => (this.selectAllEl = el), class: "select-all", onClick: () => this.handleSelectAllClick(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: "-1" }, this.allSelected ? this.deselectAllMessage : this.selectAllMessage));
709
703
  }
710
704
  renderCloneOptions() {
711
- return Array.from(this.el.children).map((option) => {
712
- return (index.h("wm-option", { class: "clone", selected: option.selected }, option.textContent));
705
+ return Array.from(this.el.children).map((o) => {
706
+ const option = o;
707
+ return (index.h("wm-option", { class: "clone", subinfo: option.subinfo, selected: option.selected }, option.textContent));
713
708
  });
714
709
  }
715
710
  render() {
711
+ const showSubinfo = !this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo;
716
712
  const buttonProps = {
717
713
  id: "selectbtn",
718
714
  ["disabled"]: this.isDisabled,
@@ -724,9 +720,7 @@ const Select = class {
724
720
  };
725
721
  return (index.h(index.Host, { onBlur: (ev) => this.handleComponentBlur(ev) }, index.h("div", { class: `wrapper ${functions.getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { class: "label-wrapper" }, index.h("label", { class: "label", id: "label", htmlFor: "selectbtn" }, this.label,
726
722
  // we can't use aria-required or required attributes because it's invalid on the elements we're using (button controlling a listbox)
727
- this.requiredField ? (index.h("span", { class: "required" }, index.h("span", { class: "sr-only" }, intl.globalMessages.requiredField), index.h("span", { "aria-hidden": "true" }, "*"))) : (""))), index.h("div", { class: "button-wrapper" }, index.h("button", Object.assign({}, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), index.h("span", { class: this.selectedOptions.length > 0 && this.selectedOptions.filter((x) => x.subinfo).length > 0
728
- ? "overflowcontrol hassubinfo"
729
- : "overflowcontrol" }, index.h("span", { class: "button-text" }, this.renderButtonText()), this.renderSubinfo()), this.renderOverflowCount()), index.h("div", { class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton(), index.h("div", { id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el) }, this.search && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), index.h("slot", null))), this.renderErrorContainer(), index.h("div", { id: "announcement", "aria-live": "polite", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
723
+ this.requiredField ? (index.h("span", { class: "required" }, index.h("span", { class: "sr-only" }, intl.globalMessages.requiredField), index.h("span", { "aria-hidden": "true" }, "*"))) : (""))), index.h("div", { class: "button-wrapper" }, index.h("button", Object.assign({}, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), index.h("span", { class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, index.h("span", { class: "button-text" }, this.renderButtonText()), showSubinfo && index.h("span", { class: "subinfo" }, this.selectedOptions[0].subinfo)), this.renderOverflowCount()), index.h("div", { class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton(), index.h("div", { id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el) }, this.search && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), index.h("slot", null))), this.renderErrorContainer(), index.h("div", { id: "announcement", "aria-live": "polite", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
730
724
  }
731
725
  static get delegatesFocus() { return true; }
732
726
  get el() { return index.getElement(this); }
package/dist/cjs/wm-tag-input.cjs.entry.js CHANGED
@@ -283,12 +283,13 @@ const TagInput = class {
283
283
  this.announce(this.tagRemovedMessage(mutationRecord.removedNodes[0].textContent));
284
284
  }
285
285
  else if (mutationRecord.type == "attributes") {
286
+ const tagName = this.getTagName(tagOptionEl);
286
287
  // announce selection or deselection of all kinds of tags
287
288
  if (tagOptionEl.selected) {
288
- this.announce(this.tagAddedMessage(tagOptionEl.textContent));
289
+ this.announce(this.tagAddedMessage(tagName));
289
290
  }
290
291
  else {
291
- this.announce(this.tagRemovedMessage(tagOptionEl.textContent));
292
+ this.announce(this.tagRemovedMessage(tagName));
292
293
  }
293
294
  }
294
295
  }
@@ -710,6 +711,7 @@ const TagInput = class {
710
711
  message += "\u00A0";
711
712
  }
712
713
  this.liveRegionMessage = message;
714
+ console.log(message);
713
715
  }
714
716
  addTags(tagNames) {
715
717
  // covers both typing "," and pasting in text that includes ","
@@ -724,13 +726,7 @@ const TagInput = class {
724
726
  announceExistingOptions() {
725
727
  // request animation frame to wait for re-rendering of filtered options
726
728
  window.requestAnimationFrame(() => {
727
- let numResults = 0;
728
- if (this.isDropdown) {
729
- numResults = this.optionEls.length;
730
- }
731
- else if (this.isTable) {
732
- numResults = this.filteredOptionEls.length;
733
- }
729
+ const numResults = this.filteredOptionEls.length;
734
730
  const existingOptionsMessage = functions.intl.formatMessage({
735
731
  id: "tagInput.existingOptions",
736
732
  defaultMessage: "{num, plural, one {1 existing option.} other {# existing options.}}",
package/dist/collection/components/charts/wm-chart/wm-chart.js CHANGED
@@ -9,7 +9,7 @@ export class Chart {
9
9
  // @ts-ignore-- TS warns this is unused, but its needed in chartFunctions
10
10
  this.slicesDetails = [];
11
11
  this.handleStackedBarResize = debounce(async () => {
12
- // if any value text overlaps with another, hide it and display warning
12
+ // if any value text overlaps with another, except zeroes, hide it and display warning
13
13
  let hasHiddenBarValue = false;
14
14
  const textEls = this.el.shadowRoot.querySelectorAll(".value");
15
15
  if (textEls.length > 0) {
@@ -18,8 +18,8 @@ export class Chart {
18
18
  textEls.forEach((textEl) => {
19
19
  textEl.classList.remove("hidden");
20
20
  const currentValue = parseInt(textEl.dataset.value);
21
- // only proceed if there are prevTextEls to check for overlap
22
- if (prevTextEls.length > 0) {
21
+ // only proceed if there are prevTextEls to check for overlap, and current value is not 0
22
+ if (prevTextEls.length > 0 && currentValue != 0) {
23
23
  const currentLeftEdge = textEl.getBoundingClientRect().left - margin;
24
24
  // check for overlap with all prevTextEls & hide the smaller value if overlap occurs
25
25
  prevTextEls.forEach((prevTextEl) => {
package/dist/collection/components/wm-option/wm-option.css CHANGED
@@ -124,7 +124,7 @@
124
124
  font-style: italic;
125
125
  }
126
126
 
127
- .option-wrapper {
127
+ .option-text {
128
128
  display: inline-block;
129
129
  }
130
130
 
package/dist/collection/components/wm-option/wm-option.js CHANGED
@@ -124,7 +124,7 @@ export class Option {
124
124
  this.parentSelectEl.addEventListener("wmSelectSearchChanged", (ev) => this.handleSearch(ev));
125
125
  }
126
126
  render() {
127
- return (h(Host, { role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { class: `option-wrapper ${this.parentSelectEl.multiple ? "checkbox" : ""}` }, h("span", { "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { class: "sr-only" }, this.el.textContent)), h("div", { class: "subinfo" }, this.subinfo)));
127
+ return (h(Host, { role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { class: `option-wrapper ${this.parentSelectEl.multiple ? "checkbox" : ""}` }, h("span", { class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { class: "sr-only" }, this.el.textContent)), h("div", { class: "subinfo" }, this.subinfo)));
128
128
  }
129
129
  static get is() { return "wm-option"; }
130
130
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/wm-select/wm-select.js CHANGED
@@ -497,7 +497,7 @@ export class Select {
497
497
  const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
498
498
  const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
499
499
  const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
500
- let optionsWidths = this.displayedOptions.map((x) => x.shadowRoot.querySelector(".option-wrapper").clientWidth);
500
+ let optionsWidths = this.displayedOptions.map((x) => x.shadowRoot.querySelector(".option-text").clientWidth);
501
501
  let optionsTotalWidth = optionsWidths.reduce((acc, x) => acc + x, 0);
502
502
  this.overflowCount = 0;
503
503
  while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
@@ -526,12 +526,6 @@ export class Select {
526
526
  return this.displayedOptions.map((x, idx) => (h("span", null, idx > 0 ? ", " : "", x.textContent)));
527
527
  }
528
528
  }
529
- renderSubinfo() {
530
- // multiselects cannot have subinfo for options
531
- if (!this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo) {
532
- return h("span", { class: "subinfo" }, this.selectedOptions[0].subinfo);
533
- }
534
- }
535
529
  renderOverflowCount() {
536
530
  if (this.overflowCount > 0 && !this.allSelected) {
537
531
  return (h("span", null, h("span", { class: "overflow-counter" }, "+", this.overflowCount)));
@@ -547,11 +541,13 @@ export class Select {
547
541
  return (h("button", { ref: (el) => (this.selectAllEl = el), class: "select-all", onClick: () => this.handleSelectAllClick(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: "-1" }, this.allSelected ? this.deselectAllMessage : this.selectAllMessage));
548
542
  }
549
543
  renderCloneOptions() {
550
- return Array.from(this.el.children).map((option) => {
551
- return (h("wm-option", { class: "clone", selected: option.selected }, option.textContent));
544
+ return Array.from(this.el.children).map((o) => {
545
+ const option = o;
546
+ return (h("wm-option", { class: "clone", subinfo: option.subinfo, selected: option.selected }, option.textContent));
552
547
  });
553
548
  }
554
549
  render() {
550
+ const showSubinfo = !this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo;
555
551
  const buttonProps = {
556
552
  id: "selectbtn",
557
553
  ["disabled"]: this.isDisabled,
@@ -563,9 +559,7 @@ export class Select {
563
559
  };
564
560
  return (h(Host, { onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", id: "label", htmlFor: "selectbtn" }, this.label,
565
561
  // we can't use aria-required or required attributes because it's invalid on the elements we're using (button controlling a listbox)
566
- this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { class: "button-wrapper" }, h("button", Object.assign({}, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), h("span", { class: this.selectedOptions.length > 0 && this.selectedOptions.filter((x) => x.subinfo).length > 0
567
- ? "overflowcontrol hassubinfo"
568
- : "overflowcontrol" }, h("span", { class: "button-text" }, this.renderButtonText()), this.renderSubinfo()), this.renderOverflowCount()), h("div", { class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton(), h("div", { id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el) }, this.search && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", null))), this.renderErrorContainer(), h("div", { id: "announcement", "aria-live": "polite", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
562
+ this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { class: "button-wrapper" }, h("button", Object.assign({}, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), h("span", { class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { class: "subinfo" }, this.selectedOptions[0].subinfo)), this.renderOverflowCount()), h("div", { class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton(), h("div", { id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el) }, this.search && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", null))), this.renderErrorContainer(), h("div", { id: "announcement", "aria-live": "polite", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
569
563
  }
570
564
  static get is() { return "wm-select"; }
571
565
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/wm-tag-input/wm-tag-input.js CHANGED
@@ -274,12 +274,13 @@ export class TagInput {
274
274
  this.announce(this.tagRemovedMessage(mutationRecord.removedNodes[0].textContent));
275
275
  }
276
276
  else if (mutationRecord.type == "attributes") {
277
+ const tagName = this.getTagName(tagOptionEl);
277
278
  // announce selection or deselection of all kinds of tags
278
279
  if (tagOptionEl.selected) {
279
- this.announce(this.tagAddedMessage(tagOptionEl.textContent));
280
+ this.announce(this.tagAddedMessage(tagName));
280
281
  }
281
282
  else {
282
- this.announce(this.tagRemovedMessage(tagOptionEl.textContent));
283
+ this.announce(this.tagRemovedMessage(tagName));
283
284
  }
284
285
  }
285
286
  }
@@ -701,6 +702,7 @@ export class TagInput {
701
702
  message += "\u00A0";
702
703
  }
703
704
  this.liveRegionMessage = message;
705
+ console.log(message);
704
706
  }
705
707
  addTags(tagNames) {
706
708
  // covers both typing "," and pasting in text that includes ","
@@ -715,13 +717,7 @@ export class TagInput {
715
717
  announceExistingOptions() {
716
718
  // request animation frame to wait for re-rendering of filtered options
717
719
  window.requestAnimationFrame(() => {
718
- let numResults = 0;
719
- if (this.isDropdown) {
720
- numResults = this.optionEls.length;
721
- }
722
- else if (this.isTable) {
723
- numResults = this.filteredOptionEls.length;
724
- }
720
+ const numResults = this.filteredOptionEls.length;
725
721
  const existingOptionsMessage = intl.formatMessage({
726
722
  id: "tagInput.existingOptions",
727
723
  defaultMessage: "{num, plural, one {1 existing option.} other {# existing options.}}",
package/dist/esm/{global-524aad82.js → global-65f8eb62.js} RENAMED
@@ -1,4 +1,4 @@
1
- const version = "4.7.0-8";
1
+ const version = "4.7.0";
2
2
 
3
3
  function injectDefaultTheme() {
4
4
  const style = `
package/dist/esm/loader.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { b as bootstrapLazy } from './index-f164fbca.js';
2
2
  export { s as setNonce } from './index-f164fbca.js';
3
- import './global-524aad82.js';
3
+ import './global-65f8eb62.js';
4
4
 
5
5
  const defineCustomElements = (win, options) => {
6
6
  if (typeof window === 'undefined') return undefined;
package/dist/esm/polyfills/core-js.js CHANGED
File without changes
package/dist/esm/polyfills/dom.js CHANGED
File without changes
package/dist/esm/polyfills/es5-html-element.js CHANGED
File without changes
package/dist/esm/polyfills/index.js CHANGED
File without changes
package/dist/esm/polyfills/system.js CHANGED
File without changes
package/dist/esm/ripple.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { p as promiseResolve, b as bootstrapLazy } from './index-f164fbca.js';
2
2
  export { s as setNonce } from './index-f164fbca.js';
3
- import './global-524aad82.js';
3
+ import './global-65f8eb62.js';
4
4
 
5
5
  /*
6
6
  Stencil Client Patch Browser v4.8.2 | MIT Licensed | https://stenciljs.com
package/dist/esm/wm-chart.entry.js CHANGED
@@ -12,7 +12,7 @@ const Chart = class {
12
12
  // @ts-ignore-- TS warns this is unused, but its needed in chartFunctions
13
13
  this.slicesDetails = [];
14
14
  this.handleStackedBarResize = debounce(async () => {
15
- // if any value text overlaps with another, hide it and display warning
15
+ // if any value text overlaps with another, except zeroes, hide it and display warning
16
16
  let hasHiddenBarValue = false;
17
17
  const textEls = this.el.shadowRoot.querySelectorAll(".value");
18
18
  if (textEls.length > 0) {
@@ -21,8 +21,8 @@ const Chart = class {
21
21
  textEls.forEach((textEl) => {
22
22
  textEl.classList.remove("hidden");
23
23
  const currentValue = parseInt(textEl.dataset.value);
24
- // only proceed if there are prevTextEls to check for overlap
25
- if (prevTextEls.length > 0) {
24
+ // only proceed if there are prevTextEls to check for overlap, and current value is not 0
25
+ if (prevTextEls.length > 0 && currentValue != 0) {
26
26
  const currentLeftEdge = textEl.getBoundingClientRect().left - margin;
27
27
  // check for overlap with all prevTextEls & hide the smaller value if overlap occurs
28
28
  prevTextEls.forEach((prevTextEl) => {
package/dist/esm/wm-option_2.entry.js CHANGED
@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement,
2
2
  import { i as intl, d as debounce, t as toBool, a as handleDisabledAttribute, l as shouldOpenUp, g as generateId, v as getTextDir } from './functions-7c42e948.js';
3
3
  import { g as globalMessages } from './intl-4e076571.js';
4
4
 
5
- const wmOptionCss = ":host(:not(:last-child)){border-bottom:2px solid;border-color:var(--wmcolor-select-option-border)}:host{display:block;cursor:pointer;position:relative;padding:1.25rem;background:var(--wmcolor-select-option-background);font-family:inherit;list-style:none;color:var(--wmcolor-select-option-text);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host:focus,:host.focus{outline:none;background:var(--wmcolor-select-option-background-focus)}:host.icon{color:var(--wmcolor-interactive)}:host .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.checkbox:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f131\";display:inline-block;margin-right:0.25rem;color:var(--wmcolor-interactive)}:host([aria-selected=true]){background:var(--wmcolor-select-option-background-selected);font-weight:500}:host([aria-selected=true]) .checkbox:before{content:\"\\f132\"}:host([aria-disabled=true]){font-style:italic;color:var(--wmcolor-select-option-text-disabled);cursor:default}:host([aria-disabled=true]) .checkbox:before{color:var(--wmcolor-select-option-text-disabled)}:host(.multi-option){background:unset}:host(.clone.last){border-bottom:12px solid;border-color:var(--wmcolor-select-option-border)}:host(.hassubinfo){display:-ms-flexbox;display:flex}:host(.hassubinfo) .option-wrapper{-ms-flex:1;flex:1}:host(.hassubinfo) .subinfo{-ms-flex:none;flex:none}:host(.hidden),:host(.filtered-out){display:none}.subinfo{font-style:italic}.option-wrapper{display:inline-block}::slotted{font-family:inherit}::slotted(i){font-size:0.875rem}::slotted(i):before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-block;margin-right:0.625rem;pointer-events:none}:host(:focus){outline:none;background:var(--wmcolor-select-option-background-hover)}:host(:hover){background:var(--wmcolor-select-option-background-hover);outline:none}";
5
+ const wmOptionCss = ":host(:not(:last-child)){border-bottom:2px solid;border-color:var(--wmcolor-select-option-border)}:host{display:block;cursor:pointer;position:relative;padding:1.25rem;background:var(--wmcolor-select-option-background);font-family:inherit;list-style:none;color:var(--wmcolor-select-option-text);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host:focus,:host.focus{outline:none;background:var(--wmcolor-select-option-background-focus)}:host.icon{color:var(--wmcolor-interactive)}:host .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.checkbox:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f131\";display:inline-block;margin-right:0.25rem;color:var(--wmcolor-interactive)}:host([aria-selected=true]){background:var(--wmcolor-select-option-background-selected);font-weight:500}:host([aria-selected=true]) .checkbox:before{content:\"\\f132\"}:host([aria-disabled=true]){font-style:italic;color:var(--wmcolor-select-option-text-disabled);cursor:default}:host([aria-disabled=true]) .checkbox:before{color:var(--wmcolor-select-option-text-disabled)}:host(.multi-option){background:unset}:host(.clone.last){border-bottom:12px solid;border-color:var(--wmcolor-select-option-border)}:host(.hassubinfo){display:-ms-flexbox;display:flex}:host(.hassubinfo) .option-wrapper{-ms-flex:1;flex:1}:host(.hassubinfo) .subinfo{-ms-flex:none;flex:none}:host(.hidden),:host(.filtered-out){display:none}.subinfo{font-style:italic}.option-text{display:inline-block}::slotted{font-family:inherit}::slotted(i){font-size:0.875rem}::slotted(i):before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-block;margin-right:0.625rem;pointer-events:none}:host(:focus){outline:none;background:var(--wmcolor-select-option-background-hover)}:host(:hover){background:var(--wmcolor-select-option-background-hover);outline:none}";
6
6
 
7
7
  const Option = class {
8
8
  constructor(hostRef) {
@@ -141,7 +141,7 @@ const Option = class {
141
141
  this.parentSelectEl.addEventListener("wmSelectSearchChanged", (ev) => this.handleSearch(ev));
142
142
  }
143
143
  render() {
144
- return (h(Host, { role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { class: `option-wrapper ${this.parentSelectEl.multiple ? "checkbox" : ""}` }, h("span", { "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { class: "sr-only" }, this.el.textContent)), h("div", { class: "subinfo" }, this.subinfo)));
144
+ return (h(Host, { role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { class: `option-wrapper ${this.parentSelectEl.multiple ? "checkbox" : ""}` }, h("span", { class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { class: "sr-only" }, this.el.textContent)), h("div", { class: "subinfo" }, this.subinfo)));
145
145
  }
146
146
  get el() { return getElement(this); }
147
147
  static get watchers() { return {
@@ -654,7 +654,7 @@ const Select = class {
654
654
  const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
655
655
  const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
656
656
  const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
657
- let optionsWidths = this.displayedOptions.map((x) => x.shadowRoot.querySelector(".option-wrapper").clientWidth);
657
+ let optionsWidths = this.displayedOptions.map((x) => x.shadowRoot.querySelector(".option-text").clientWidth);
658
658
  let optionsTotalWidth = optionsWidths.reduce((acc, x) => acc + x, 0);
659
659
  this.overflowCount = 0;
660
660
  while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
@@ -683,12 +683,6 @@ const Select = class {
683
683
  return this.displayedOptions.map((x, idx) => (h("span", null, idx > 0 ? ", " : "", x.textContent)));
684
684
  }
685
685
  }
686
- renderSubinfo() {
687
- // multiselects cannot have subinfo for options
688
- if (!this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo) {
689
- return h("span", { class: "subinfo" }, this.selectedOptions[0].subinfo);
690
- }
691
- }
692
686
  renderOverflowCount() {
693
687
  if (this.overflowCount > 0 && !this.allSelected) {
694
688
  return (h("span", null, h("span", { class: "overflow-counter" }, "+", this.overflowCount)));
@@ -704,11 +698,13 @@ const Select = class {
704
698
  return (h("button", { ref: (el) => (this.selectAllEl = el), class: "select-all", onClick: () => this.handleSelectAllClick(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: "-1" }, this.allSelected ? this.deselectAllMessage : this.selectAllMessage));
705
699
  }
706
700
  renderCloneOptions() {
707
- return Array.from(this.el.children).map((option) => {
708
- return (h("wm-option", { class: "clone", selected: option.selected }, option.textContent));
701
+ return Array.from(this.el.children).map((o) => {
702
+ const option = o;
703
+ return (h("wm-option", { class: "clone", subinfo: option.subinfo, selected: option.selected }, option.textContent));
709
704
  });
710
705
  }
711
706
  render() {
707
+ const showSubinfo = !this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo;
712
708
  const buttonProps = {
713
709
  id: "selectbtn",
714
710
  ["disabled"]: this.isDisabled,
@@ -720,9 +716,7 @@ const Select = class {
720
716
  };
721
717
  return (h(Host, { onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", id: "label", htmlFor: "selectbtn" }, this.label,
722
718
  // we can't use aria-required or required attributes because it's invalid on the elements we're using (button controlling a listbox)
723
- this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { class: "button-wrapper" }, h("button", Object.assign({}, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), h("span", { class: this.selectedOptions.length > 0 && this.selectedOptions.filter((x) => x.subinfo).length > 0
724
- ? "overflowcontrol hassubinfo"
725
- : "overflowcontrol" }, h("span", { class: "button-text" }, this.renderButtonText()), this.renderSubinfo()), this.renderOverflowCount()), h("div", { class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton(), h("div", { id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el) }, this.search && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", null))), this.renderErrorContainer(), h("div", { id: "announcement", "aria-live": "polite", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
719
+ this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { class: "button-wrapper" }, h("button", Object.assign({}, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), h("span", { class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { class: "subinfo" }, this.selectedOptions[0].subinfo)), this.renderOverflowCount()), h("div", { class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton(), h("div", { id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el) }, this.search && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", null))), this.renderErrorContainer(), h("div", { id: "announcement", "aria-live": "polite", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
726
720
  }
727
721
  static get delegatesFocus() { return true; }
728
722
  get el() { return getElement(this); }
package/dist/esm/wm-tag-input.entry.js CHANGED
@@ -279,12 +279,13 @@ const TagInput = class {
279
279
  this.announce(this.tagRemovedMessage(mutationRecord.removedNodes[0].textContent));
280
280
  }
281
281
  else if (mutationRecord.type == "attributes") {
282
+ const tagName = this.getTagName(tagOptionEl);
282
283
  // announce selection or deselection of all kinds of tags
283
284
  if (tagOptionEl.selected) {
284
- this.announce(this.tagAddedMessage(tagOptionEl.textContent));
285
+ this.announce(this.tagAddedMessage(tagName));
285
286
  }
286
287
  else {
287
- this.announce(this.tagRemovedMessage(tagOptionEl.textContent));
288
+ this.announce(this.tagRemovedMessage(tagName));
288
289
  }
289
290
  }
290
291
  }
@@ -706,6 +707,7 @@ const TagInput = class {
706
707
  message += "\u00A0";
707
708
  }
708
709
  this.liveRegionMessage = message;
710
+ console.log(message);
709
711
  }
710
712
  addTags(tagNames) {
711
713
  // covers both typing "," and pasting in text that includes ","
@@ -720,13 +722,7 @@ const TagInput = class {
720
722
  announceExistingOptions() {
721
723
  // request animation frame to wait for re-rendering of filtered options
722
724
  window.requestAnimationFrame(() => {
723
- let numResults = 0;
724
- if (this.isDropdown) {
725
- numResults = this.optionEls.length;
726
- }
727
- else if (this.isTable) {
728
- numResults = this.filteredOptionEls.length;
729
- }
725
+ const numResults = this.filteredOptionEls.length;
730
726
  const existingOptionsMessage = intl.formatMessage({
731
727
  id: "tagInput.existingOptions",
732
728
  defaultMessage: "{num, plural, one {1 existing option.} other {# existing options.}}",
package/dist/esm-es5/global-65f8eb62.js ADDED
@@ -0,0 +1 @@
1
+ var version="4.7.0";function injectDefaultTheme(){var o="\n :root {\n /* Color Palette */\n --wmcolor-acidwashjeans: #9bb6d7;\n --wmcolor-asphalt: #353b48;\n --wmcolor-asphalt-light: #454b57;\n --wmcolor-blueberry: #667eed;\n --wmcolor-cement: #afadb1;\n --wmcolor-charcoal: #4a4a4a;\n --wmcolor-cowboyjeans: #18314E;\n --wmcolor-cyan: #19a1a9;\n --wmcolor-cyan-dark: #15868d;\n --wmcolor-cyan-darker: #116b71;\n --wmcolor-cyber: #ddf1f2;\n --wmcolor-dadjeans: #244974;\n --wmcolor-firetruck: #c0392b;\n --wmcolor-firetruck-dark: #9a2e22;\n --wmcolor-firetruck-darker: #73221a;\n --wmcolor-firetruck-light: #f6e1df;\n --wmcolor-forest: #088000;\n --wmcolor-forest-dark: #054d00;\n --wmcolor-forest-light: #daecd9;\n --wmcolor-gray: #6b6b6b;\n --wmcolor-gray-light: #A6A6A6;\n --wmcolor-lavender: #8B86CA;\n --wmcolor-linen: #E1E9F3;\n --wmcolor-meteorite: #454b57;\n --wmcolor-midnight: #2e1b46;\n --wmcolor-momjeans: #366dae;\n --wmcolor-orchid: #b36dcd;\n --wmcolor-palelilacgray: #e9e7ec;\n --wmcolor-palelilacgray-dark: #d2d0d4;\n --wmcolor-paleviolet: #eeedf7;\n --wmcolor-periwinkle: #575195;\n --wmcolor-periwinkle-dark: #464177;\n --wmcolor-salmon: #ff5f4e;\n --wmcolor-salmon-dark: #cc4c3e;\n --wmcolor-salmon-darker: #a33d32;\n --wmcolor-snow: #fafafa;\n --wmcolor-transparent: transparent;\n --wmcolor-white: #fff;\n --wmcolor-whitesmoke: #f4f4f4;\n\n /* Base Tokens */\n --wmcolor-background-dark-secondary: var(--wmcolor-meteorite);\n --wmcolor-background-dark: var(--wmcolor-asphalt);\n --wmcolor-background-disabled: var(--wmcolor-whitesmoke);\n --wmcolor-background-error: var(--wmcolor-firetruck-light);\n --wmcolor-background-highlight: var(--wmcolor-cyber);\n --wmcolor-background-positive: var(--wmcolor-forest-light);\n --wmcolor-background-readonly: var(--wmcolor-whitesmoke);\n --wmcolor-background-selected: var(--wmcolor-paleviolet);\n --wmcolor-background-transparent: var(--wmcolor-transparent);\n --wmcolor-background: var(--wmcolor-white);\n --wmcolor-border-dark: var(--wmcolor-charcoal);\n --wmcolor-border-error: var(--wmcolor-negative);\n --wmcolor-border-focus: var(--wmcolor-cyan);\n --wmcolor-border-light: var(--wmcolor-whitesmoke);\n --wmcolor-border: var(--wmcolor-palelilacgray-dark);\n --wmcolor-brand-dark: var(--wmcolor-midnight); \n --wmcolor-brand: var(--wmcolor-periwinkle);\n --wmcolor-card-background: var(--wmcolor-white);\n --wmcolor-icon: var(--wmcolor-charcoal);\n --wmcolor-icon-ondark: var(--wmcolor-text-ondark);\n --wmcolor-icon-accent: var(--wmcolor-gray);\n --wmcolor-interactive-background-focus: var(--wmcolor-palelilacgray);\n --wmcolor-interactive-background-hover: var(--wmcolor-whitesmoke);\n --wmcolor-interactive-delete-hover: var(--wmcolor-firetruck-dark);\n --wmcolor-interactive-delete: var(--wmcolor-firetruck);\n --wmcolor-interactive-disabled-ondark: var(--wmcolor-gray-light);\n --wmcolor-interactive-disabled: var(--wmcolor-gray);\n --wmcolor-interactive-focus-ondark: var(--wmcolor-interactive-focus); /* deprecated */\n --wmcolor-interactive-focus-textonly-ondark: var(--wmcolor-interactive-focus); /* deprecated */\n --wmcolor-interactive-focus-textonly: var(--wmcolor-interactive-focus); /* deprecated */\n --wmcolor-interactive-focus: var(--wmcolor-orchid);\n --wmcolor-interactive-hover-ondark: var(--wmcolor-palelilacgray);\n --wmcolor-interactive-hover: var(--wmcolor-periwinkle-dark);\n --wmcolor-interactive-negative-hover: var(--wmcolor-salmon-darker);\n --wmcolor-interactive-negative: var(--wmcolor-salmon-dark);\n --wmcolor-interactive-ondark: var(--wmcolor-white);\n --wmcolor-interactive-positive-hover: var(--wmcolor-cyan-darker);\n --wmcolor-interactive-positive: var(--wmcolor-cyan-dark);\n --wmcolor-interactive-text-disabled-ondark: var(--wmcolor-asphalt);\n --wmcolor-interactive-text-ondark: var(--wmcolor-brand);\n --wmcolor-interactive-text-selected: var(--wmcolor-interactive-text);\n --wmcolor-interactive-text: var(--wmcolor-white);\n --wmcolor-interactive: var(--wmcolor-brand);\n --wmcolor-link-text: var(--wmcolor-interactive);\n --wmcolor-negative: var(--wmcolor-firetruck);\n --wmcolor-option-background-focus: var(--wmcolor-palelilacgray); \n --wmcolor-option-background-hover: var(--wmcolor-interactive-background-hover);\n --wmcolor-option-background: var(--wmcolor-background);\n --wmcolor-option-background-selected: var(--wmcolor-background-selected);\n --wmcolor-option-border: var(--wmcolor-border-light);\n --wmcolor-option-text-disabled: var(--wmcolor-interactive-disabled);\n --wmcolor-option-text: var(--wmcolor-text);\n --wmcolor-overlay: rgba(25,25,25,0.4);\n --wmcolor-page-background: var(--wmcolor-snow);\n --wmcolor-positive-dark: var(--wmcolor-forest-dark);\n --wmcolor-positive: var(--wmcolor-forest);\n --wmcolor-progress: var(--wmcolor-cyan-dark);\n --wmcolor-table-altrow-background: var(--wmcolor-snow);\n --wmcolor-table-header-background: var(--wmcolor-palelilacgray);\n --wmcolor-table-row-background-selected: var(--wmcolor-background-highlight);\n --wmcolor-table-row-background: var(--wmcolor-white);\n --wmcolor-table-row-border-selected: var(--wmcolor-border-focus);\n --wmcolor-table-row-border: var(--wmcolor-border);\n --wmcolor-text-error: var(--wmcolor-negative);\n --wmcolor-text-negative: var(--wmcolor-firetruck);\n --wmcolor-text-ondark: var(--wmcolor-white);\n --wmcolor-text-positive: var(--wmcolor-positive);\n --wmcolor-text-required: var(--wmcolor-negative);\n --wmcolor-text: var(--wmcolor-charcoal);\n --wmcolor-tooltip-background: black; /* EXCEPTION */\n --wmcolor-tooltip-text: var(--wmcolor-text-ondark);\n\n /* Shared Tokens */\n --wmcolor-button-background-delete-disabled-ondark: var(--wmcolor-interactive-disabled-ondark);\n --wmcolor-button-background-delete-disabled: var(--wmcolor-interactive-disabled);\n --wmcolor-button-background-delete-hover: var(--wmcolor-interactive-delete-hover);\n --wmcolor-button-background-delete: var(--wmcolor-interactive-delete);\n --wmcolor-button-background-icononly-hover-ondark: var(--wmcolor-interactive-ondark);\n --wmcolor-button-background-icononly-hover: var(--wmcolor-interactive-hover);\n --wmcolor-button-background-icononly-ondark: var(--wmcolor-background-transparent);\n --wmcolor-button-background-icononly: var(--wmcolor-background);\n --wmcolor-button-background-navigational-hover-ondark: var(--wmcolor-interactive-ondark);\n --wmcolor-button-background-navigational-hover: var(--wmcolor-interactive-hover-ondark);\n --wmcolor-button-background-navigational-ondark: var(--wmcolor-background-transparent);\n --wmcolor-button-background-navigational: var(--wmcolor-background-transparent);\n --wmcolor-button-background-negative-disabled: var(--wmcolor-interactive-disabled);\n --wmcolor-button-background-negative-hover: var(--wmcolor-interactive-negative-hover);\n --wmcolor-button-background-negative: var(--wmcolor-interactive-negative);\n --wmcolor-button-background-positive-disabled: var(--wmcolor-interactive-disabled);\n --wmcolor-button-background-positive-hover: var(--wmcolor-interactive-positive-hover);\n --wmcolor-button-background-positive: var(--wmcolor-interactive-positive);\n --wmcolor-button-background-primary-disabled-ondark: var(--wmcolor-interactive-disabled-ondark);\n --wmcolor-button-background-primary-disabled: var(--wmcolor-interactive-disabled);\n --wmcolor-button-background-primary-hover-ondark: var(--wmcolor-interactive-hover-ondark);\n --wmcolor-button-background-primary-hover: var(--wmcolor-interactive-hover);\n --wmcolor-button-background-primary-ondark: var(--wmcolor-interactive-ondark);\n --wmcolor-button-background-primary: var(--wmcolor-interactive);\n --wmcolor-button-background-secondary-hover-ondark: var(--wmcolor-interactive-hover-ondark);\n --wmcolor-button-background-secondary-hover: var(--wmcolor-interactive-hover);\n --wmcolor-button-background-secondary-ondark: var(--wmcolor-background-transparent);\n --wmcolor-button-background-secondary: var(--wmcolor-background);\n --wmcolor-button-background-selector-hover-ondark: var(--wmcolor-interactive-hover-ondark);\n --wmcolor-button-background-selector-hover: var(--wmcolor-interactive-hover);\n --wmcolor-button-background-selector-ondark: var(--wmcolor-background-transparent);\n --wmcolor-button-background-selector: var(--wmcolor-background);\n --wmcolor-button-background-selectorprimary-disabled-ondark: var(--wmcolor-interactive-disabled-ondark);\n --wmcolor-button-background-selectorprimary-disabled: var(--wmcolor-interactive-disabled);\n --wmcolor-button-background-selectorprimary-hover-ondark: var(--wmcolor-interactive-hover-ondark);\n --wmcolor-button-background-selectorprimary-hover: var(--wmcolor-interactive-hover);\n --wmcolor-button-background-selectorprimary-ondark: var(--wmcolor-interactive-ondark);\n --wmcolor-button-background-selectorprimary: var(--wmcolor-interactive);\n --wmcolor-button-border-icononly-disabled-ondark: var(--wmcolor-interactive-disabled-ondark);\n --wmcolor-button-border-icononly-disabled: var(--wmcolor-interactive-disabled);\n --wmcolor-button-border-icononly-ondark: var(--wmcolor-interactive-ondark);\n --wmcolor-button-border-icononly: var(--wmcolor-interactive);\n --wmcolor-button-border-secondary-disabled-ondark: var(--wmcolor-interactive-disabled-ondark);\n --wmcolor-button-border-secondary-disabled: var(--wmcolor-interactive-disabled);\n --wmcolor-button-border-secondary-ondark: var(--wmcolor-interactive-ondark);\n --wmcolor-button-border-secondary: var(--wmcolor-interactive);\n --wmcolor-button-border-selector-disabled-ondark: var(--wmcolor-interactive-disabled-ondark);\n --wmcolor-button-border-selector-disabled: var(--wmcolor-interactive-disabled);\n --wmcolor-button-border-selector-ondark: var(--wmcolor-interactive-ondark);\n --wmcolor-button-border-selector: var(--wmcolor-interactive);\n --wmcolor-button-icon-icononly-disabled-ondark: var(--wmcolor-interactive-disabled-ondark);\n --wmcolor-button-icon-icononly-disabled: var(--wmcolor-interactive-disabled);\n --wmcolor-button-icon-icononly-hover-ondark: var(--wmcolor-interactive);\n --wmcolor-button-icon-icononly-hover: var(--wmcolor-interactive-ondark);\n --wmcolor-button-icon-icononly-ondark: var(--wmcolor-interactive-ondark);\n --wmcolor-button-icon-icononly: var(--wmcolor-interactive);\n --wmcolor-button-icon-navigational-disabled-ondark: var(--wmcolor-interactive-disabled-ondark);\n --wmcolor-button-icon-navigational-disabled: var(--wmcolor-interactive-disabled);\n --wmcolor-button-icon-navigational-hover-ondark: var(--wmcolor-interactive);\n --wmcolor-button-icon-navigational-hover: var(--wmcolor-interactive);\n --wmcolor-button-icon-navigational-ondark: var(--wmcolor-interactive-ondark);\n --wmcolor-button-icon-navigational: var(--wmcolor-interactive);\n --wmcolor-button-text-delete-disabled-ondark: var(--wmcolor-interactive-text-disabled-ondark);\n --wmcolor-button-text-delete-disabled: var(--wmcolor-interactive-text);\n --wmcolor-button-text-delete: var(--wmcolor-interactive-text);\n --wmcolor-button-text-negative-disabled: var(--wmcolor-interactive-text);\n --wmcolor-button-text-negative: var(--wmcolor-interactive-text);\n --wmcolor-button-text-positive-disabled: var(--wmcolor-interactive-text);\n --wmcolor-button-text-positive: var(--wmcolor-interactive-text);\n --wmcolor-button-text-primary-disabled-ondark: var(--wmcolor-interactive-text-disabled-ondark);\n --wmcolor-button-text-primary-disabled: var(--wmcolor-interactive-text);\n --wmcolor-button-text-primary-ondark: var(--wmcolor-interactive-text-ondark);\n --wmcolor-button-text-primary: var(--wmcolor-interactive-text);\n --wmcolor-button-text-secondary-disabled-ondark: var(--wmcolor-interactive-disabled-ondark);\n --wmcolor-button-text-secondary-disabled: var(--wmcolor-interactive-disabled);\n --wmcolor-button-text-secondary-hover-ondark: var(--wmcolor-interactive);\n --wmcolor-button-text-secondary-hover: var(--wmcolor-interactive-ondark);\n --wmcolor-button-text-secondary-ondark: var(--wmcolor-interactive-ondark);\n --wmcolor-button-text-secondary: var(--wmcolor-interactive);\n --wmcolor-button-text-selector-disabled-ondark: var(--wmcolor-interactive-disabled-ondark);\n --wmcolor-button-text-selector-disabled: var(--wmcolor-interactive-disabled);\n --wmcolor-button-text-selector-hover-ondark: var(--wmcolor-interactive);\n --wmcolor-button-text-selector-hover: var(--wmcolor-interactive-ondark);\n --wmcolor-button-text-selector-ondark: var(--wmcolor-interactive-ondark);\n --wmcolor-button-text-selector: var(--wmcolor-interactive);\n --wmcolor-button-text-selectorprimary-disabled-ondark: var(--wmcolor-interactive-text-disabled-ondark);\n --wmcolor-button-text-selectorprimary-disabled: var(--wmcolor-interactive-text);\n --wmcolor-button-text-selectorprimary-ondark: var(--wmcolor-interactive-text-ondark);\n --wmcolor-button-text-selectorprimary: var(--wmcolor-interactive-text);\n --wmcolor-button-text-textonly-disabled-ondark: var(--wmcolor-interactive-disabled-ondark);\n --wmcolor-button-text-textonly-disabled: var(--wmcolor-interactive-disabled);\n --wmcolor-button-text-textonly-ondark: var(--wmcolor-interactive-ondark);\n --wmcolor-button-text-textonly: var(--wmcolor-interactive);\n --wmcolor-chart-gridline: var(--wmcolor-border);\n --wmcolor-chart-popover-background: var(--wmcolor-background);\n --wmcolor-input-background-disabled: var(--wmcolor-background-disabled);\n --wmcolor-input-background: var(--wmcolor-background);\n --wmcolor-input-border-disabled: var(--wmcolor-interactive-disabled);\n --wmcolor-input-border-error: var(--wmcolor-border-error);\n --wmcolor-input-border-focus: var(--wmcolor-border-focus);\n --wmcolor-input-border: var(--wmcolor-border-dark);\n --wmcolor-input-charcount-background: var(--wmcolor-background-readonly);\n --wmcolor-input-text-disabled: var(--wmcolor-interactive-disabled);\n --wmcolor-input-text: var(--wmcolor-text);\n --wmcolor-input-unit-background: var(--wmcolor-background-readonly);\n }\n ";var r=document.createElement("style");r.textContent=o;document.head.appendChild(r)}function injectNeutralTheme(){var o='\n :root[wm-theme="neutral"] {\n --wmcolor-brand: var(--wmcolor-momjeans);\n --wmcolor-brand-dark: var(--wmcolor-cowboyjeans);\n --wmcolor-interactive-focus: var(--wmcolor-blueberry);\n --wmcolor-interactive-hover: var(--wmcolor-dadjeans);\n --wmcolor-background-selected: var(--wmcolor-linen);\n }\n ';var r=document.createElement("style");r.textContent=o;document.head.appendChild(r)}if(window.navigator.plugins.length>0){console.log("Ripple component library",version)}function wmComponentKeys(o){if(o.key=="Tab"){var r=new Event("wmUserIsTabbing");window.dispatchEvent(r);document.querySelector("body").classList.add("wmcl-user-is-tabbing")}if(o.key=="ArrowLeft"||o.key=="ArrowUp"||o.key=="ArrowRight"||o.key=="ArrowDown"){var r=new Event("wmUserIsKeying");window.dispatchEvent(r);document.querySelector("body").classList.add("wmcl-user-is-keying")}}function wmComponentMouseDownOnce(){var o=new Event("wmUserIsNotTabbing");window.dispatchEvent(o);document.querySelector("body").classList.remove("wmcl-user-is-tabbing");document.querySelector("body").classList.remove("wmcl-user-is-keying")}window.addEventListener("keydown",wmComponentKeys);window.addEventListener("mousedown",wmComponentMouseDownOnce);var tooltipContainer=document.createElement("div");tooltipContainer.id="wm-tooltip-container";var tooltipEl=document.createElement("div");tooltipEl.id="wm-tooltip";tooltipEl.classList.add("wm-tooltip");tooltipEl.setAttribute("popover","manual");tooltipEl.setAttribute("aria-hidden","true");var tooltipStyles=document.createElement("style");tooltipStyles.textContent="\n.wm-tooltip {\n position: fixed;\n overflow: hidden;\n pointer-events: none;\n line-height: normal;\n font-family: inherit;\n font-size: 0.875rem;\n text-transform: none;\n font-weight: normal;\n background: var(--wmcolor-tooltip-background);\n color: var(--wmcolor-tooltip-text);\n z-index: 999999;\n max-width: var(--wmTooltipMaxWidth, 13.75rem);\n margin-right: 1.5rem;\n padding: 0.375rem;\n transition-property: opacity;\n transition-delay: 0s;\n opacity: 0;\n inset: unset;\n top: 0;\n left: 0;\n transform: translateZ(0);\n will-change: transform;\n transform: translate(var(--wmTooltipLeft), var(--wmTooltipTop));\n border: none;\n}\n\n.wm-tooltip:popover-open {\n opacity: 0;\n}\n\n.wm-tooltip.show {\n transition-delay: 500ms;\n opacity: 1;\n}\n";document.head.appendChild(tooltipStyles);tooltipContainer.appendChild(tooltipEl);document.querySelector("body").appendChild(tooltipContainer);injectDefaultTheme();document.documentElement.getAttribute("wm-theme")=="neutral"&&injectNeutralTheme();