npm - @watermarkinsights/ripple - Versions diffs - 0.0.0 → 3.0.1-1 - Mend

@watermarkinsights/ripple 0.0.0 → 3.0.1-1

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 (282) hide show

package/dist/cjs/wm-search.cjs.entry.js DELETED Viewed

@@ -1,231 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-e5aef9f9.js');
-const functions = require('./functions-f2333f02.js');
-const wmSearchCss = ":host,wm-search{width:100%;font-size:0.875rem}:host *,wm-search *{box-sizing:border-box}:host .wm-search-wrapper,wm-search .wm-search-wrapper{border-radius:3px;position:relative;border:1px solid rgba(35, 35, 35, 0.6);display:flex;justify-content:space-between;align-items:center}:host .wm-search-wrapper .search-icon,wm-search .wm-search-wrapper .search-icon{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;font-size:1.0625rem;position:absolute;left:0.4375rem}:host .wm-search-wrapper input,wm-search .wm-search-wrapper input{border:none;height:40px;padding:0 1.75rem;background:transparent;overflow:visible;width:100%;flex:1;font-family:inherit}:host .wm-search-wrapper input:focus,wm-search .wm-search-wrapper input:focus{outline:none}:host .wm-search-wrapper.focus,wm-search .wm-search-wrapper.focus{box-shadow:0 0 0 1px #20cbd4;border-color:#20cbd4;border-radius:3px}:host .find,wm-search .find{min-height:3rem}:host .find input,wm-search .find input{padding:16px 8px 16px 28px}:host .find .wm-find-elements,wm-search .find .wm-find-elements{display:flex;align-items:center;justify-content:flex-start;padding-right:16px}:host .find .wm-find-elements wm-button+wm-button,wm-search .find .wm-find-elements wm-button+wm-button{margin-left:0.25rem}:host .find .wm-find-elements .results,wm-search .find .wm-find-elements .results{margin-right:0.5rem;font-style:italic}:host .sr-only,wm-search .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;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .show-for-tabbers,wm-search .show-for-tabbers{all:unset;color:#575195;text-decoration:none;font-weight:500;font-size:0.875rem;margin:10px 0}:host .show-for-tabbers:hover,wm-search .show-for-tabbers:hover{background:linear-gradient(#575195, #575195) no-repeat;background-size:100% 1px;background-position:0 1.2em;padding-bottom:0.2em}:host .show-for-tabbers:focus,wm-search .show-for-tabbers:focus{outline:none;background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1.2em;padding-bottom:0.2em}";
-const Search = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.wmBrowseSearchResults = index.createEvent(this, "wmBrowseSearchResults", 7);
-    this.searchType = "basic";
-    this.disabled = false;
-    /**
-     * Props required for both variants.
-     */
-    this.placeholder = "";
-    this.label = "";
-    this.numResults = 0;
-    /**
-     * This exposes the input's value on the host component so that the app can access it.
-     */
-    this.value = "";
-    /**
-     * If the user is tabbing, the search and find variant will display a link to jump to a search result.
-     */
-    this.isTabbing = false;
-    /**
-     * Prop specifically for the search and find variant. The id points to the id of the option currently highlighted,
-     * so that tabbing and screen reader users can jump to this option rather than tab through the list to find it.
-     */
-    this.highlightedId = "";
-    this.highlightedName = null;
-    /**
-     * Indicates which of the search results is currently highlighted. It will be displayed as "[highlightedNum] of [numResults]" next to the input in the search and find variant.
-     * This number updates as the user browses using the buttons.
-     */
-    this.highlightedNum = 0;
-    /**
-     * Element refs
-     */
-    this.resultsLiveRegion = null;
-    this.wrapperEl = null;
-    this.linkEl = null;
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-    this.linkEl && this.linkEl.classList.remove("sr-only");
-    this.linkEl && this.linkEl.classList.add("show-for-tabbers");
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-    this.linkEl && this.linkEl.classList.add("sr-only");
-    this.linkEl && this.linkEl.classList.remove("show-for-tabbers");
-  }
-  componentWillLoad() {
-    // replacing the prototype's focus event by our own
-    // to delegate focus to the appropriate el in the shadow root
-    // we could replace by ShadowRoot.delegatesFocus()
-    // when there's enough support for it
-    // @ts-ignore
-    this.el.focus = function () {
-      if (!this.disabled) {
-        this.shadowRoot.querySelector("#wm-search-input").focus();
-        // onFocus event doesn't run when focus is programmatic,
-        // so we reproduce this.addFocusStyle here
-        this.shadowRoot.querySelector("#wm-search-wrapper").classList.add("focus");
-      }
-    };
-    if (this.placeholder === "") {
-      console.error("You must set the placeholder property for the wm-search component.");
-    }
-    if (this.label === "") {
-      console.error("You must set the label property for the wm-search component.");
-    }
-    this.hookToModal();
-  }
-  hookToModal() {
-    // if the search is in a modal we want to clear the input when the modal closes
-    let el = this.el;
-    while (!!el) {
-      if (el.tagName === "WM-MODAL") {
-        this.parentModal = el;
-      }
-      el = el.parentElement;
-    }
-    if (this.parentModal) {
-      const events = ["wmCloseTriggered", "wmPrimaryTriggered", "wmSecondaryTriggered"];
-      events.map((event) => {
-        this.parentModal.addEventListener(event, () => {
-          this.updateValue("");
-        });
-      });
-    }
-  }
-  async updateValue(value) {
-    this.value = value;
-    //For search-and-find, the results should always restart at "[1 or 0] of ..." after any new input.
-    //Reset the highlight count here just in case the new value doesn't end up changing the number of results.
-    this.resetHighlightCountToStart();
-  }
-  resetHighlightCountToStart() {
-    if (this.searchType === "find") {
-      if (this.numResults) {
-        this.highlightedNum = 1;
-      }
-      else {
-        this.highlightedNum = 0;
-      }
-    }
-  }
-  /**
-   * Unfortunately, simply rendering the prop values for the number of results or highlighted option in the live regions, ideally so that the screen reader reads them when they change, does not work
-   * ---NVDA in Firefox only reads the specific letters that change in the prop value. The innerHTML of the live region must be explicitly changed in order for the screen reader to read the words in full, i.e., coherently.
-   *
-   * An update of the props triggers a re-render, so setting the live region in componentDidRender ensures the screen reader announces any changes to the number of results/highlighted option.
-   * Note: Updating the innerHTML of the live region does not cause the component to re-render so there's no performance hit here.
-   */
-  componentDidRender() {
-    this.announceChanges();
-  }
-  /**
-   * Set live region to blank and then update it with the message ensure the screen reader registers the changes.
-   */
-  announceChanges() {
-    let message = this.getResultsMessage();
-    if (this.searchType === "find" && this.highlightedName) {
-      message += `, ${this.highlightedName}`;
-    }
-    this.resultsLiveRegion && (this.resultsLiveRegion.innerHTML = "");
-    window.requestAnimationFrame(() => this.resultsLiveRegion && (this.resultsLiveRegion.innerHTML = message));
-  }
-  /**
-   * Creates the message that should be announced by the screen reader.
-   */
-  getResultsMessage() {
-    //If there's no text in the input, don't give any message
-    if (this.value) {
-      if (this.searchType === "basic") {
-        return functions.intl.formatMessage({
-          id: "search.resultsFound",
-          defaultMessage: "{numResults, plural, =0 {No results} one {1 result} other {# results}} found",
-        }, { numResults: this.numResults });
-      }
-      else {
-        return functions.intl.formatMessage({
-          id: "search.xOfYResults",
-          defaultMessage: "{numResults, plural, =0 {No results found} other {{current} of {numResults} results}}",
-        }, { numResults: this.numResults, current: this.highlightedNum });
-      }
-    }
-    else {
-      return "";
-    }
-  }
-  changeHighlightedNum(newNum) {
-    if (this.numResults) {
-      if (newNum < 1) {
-        // we were on the first item, going down: go to last item
-        this.highlightedNum = this.numResults;
-      }
-      else if (newNum > this.numResults) {
-        // we were on the last item, going up: go to first item
-        this.highlightedNum = 1;
-      }
-      else {
-        this.highlightedNum = newNum;
-      }
-      this.wmBrowseSearchResults.emit({ position: this.highlightedNum });
-    }
-  }
-  addFocusStyle() {
-    if (this.wrapperEl) {
-      this.wrapperEl.classList.add("focus");
-    }
-  }
-  removeFocusStyle() {
-    if (this.wrapperEl) {
-      this.wrapperEl.classList.remove("focus");
-    }
-  }
-  /**
-   * Functions that return elements specifically for search-and-find.
-   */
-  renderResultsAndBrowseButtons() {
-    return (index.h("div", { class: "wm-find-elements" }, index.h("div", { id: "results-display", class: "results" }, this.getResultsMessage()), index.h("div", { class: "wm-button-collection" }, index.h("wm-button", { "button-style": "icononly", icon: "f05d", tooltip: functions.intl.formatMessage({
-        id: "global.previous",
-        description: "button text",
-        defaultMessage: "previous",
-      }), "tooltip-position": "bottom", onClick: () => this.changeHighlightedNum(this.highlightedNum - 1), disabled: this.disabled || this.numResults < 2, "label-for-identical-buttons": functions.intl.formatMessage({
-        id: "search.previousResult",
-        defaultMessage: "Press to hear previous matching result",
-      }) }), index.h("wm-button", { "button-style": "icononly", icon: "f045", tooltip: functions.intl.formatMessage({
-        id: "global.next",
-        description: "button text",
-        defaultMessage: "next",
-      }), "tooltip-position": "bottom", onClick: () => this.changeHighlightedNum(this.highlightedNum + 1), disabled: this.disabled || this.numResults < 2, "label-for-identical-buttons": functions.intl.formatMessage({
-        id: "search.nextResult",
-        defaultMessage: "Press to hear next matching result",
-      }) }))));
-  }
-  renderJumpToLink() {
-    if (this.numResults && this.highlightedId) {
-      return (index.h("a", { ref: (el) => (this.linkEl = el), href: `#${this.highlightedId}`, class: "sr-only" }, functions.intl.formatMessage({
-        id: "search.jumpToResult",
-        defaultMessage: "Jump to search result in list",
-      })));
-    }
-    else {
-      return null;
-    }
-  }
-  /**
-   * End search and find render helpers
-   */
-  render() {
-    return (index.h(index.Host, null, index.h("div", { id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}`, ref: (el) => (this.wrapperEl = el) }, index.h("input", { disabled: this.disabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${functions.intl.formatMessage({
-        id: "search.typeToFilterResults",
-        defaultMessage: "Type to filter the results",
-      })}`, onInput: (ev) => this.updateValue(ev.target.value), onFocus: () => this.addFocusStyle(), onBlur: () => this.removeFocusStyle(), "aria-autocomplete": "none", autocomplete: "off", value: this.value }), index.h("span", { class: "mdi search-icon" }, String.fromCodePoint(parseInt(`0xf349`))), this.searchType === "find" && this.renderResultsAndBrowseButtons(), index.h("div", { id: "wm-search-live", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.resultsLiveRegion = el) })), this.searchType === "find" && this.renderJumpToLink()));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "numResults": ["resetHighlightCountToStart"]
-  }; }
-};
-Search.style = wmSearchCss;
-exports.wm_search = Search;

package/dist/cjs/wm-select.cjs.entry.js DELETED Viewed

@@ -1,366 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-298ebef1.js');
-const functions = require('./functions-65513c61.js');
-const wmSelectCss = "@charset \"UTF-8\";:host{position:relative;display:block;box-sizing:border-box;font-family:inherit}: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;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-direction:column;font-size:0.875rem}.wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}.wrapper .label .required{color:#c0392b}.wrapper.label-left{flex-direction:row}.wrapper.label-left .label-wrapper{line-height:2.5rem}.wrapper.label-left .label-wrapper .label{display:flex;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}.wrapper.label-none label{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;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.wrapper.invalid .label{color:#c0392b}.wrapper.invalid .label:after{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:\"\";margin-left:0.3125rem}[dir=RTL] .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}.wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}.wrapper .dropdown{position:relative;font-size:1.125rem;color:#575195;min-width:8.75rem}.wrapper .dropdown .displayedoption{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;display:flex;align-items:center;flex-wrap:nowrap;background:transparent;width:100%;border:solid 1px rgba(35, 35, 35, 0.6);padding:0 1.875rem 0 0.9375rem;cursor:pointer;height:2.5rem;line-height:normal;font-family:inherit;color:#575195;font-weight:400;font-size:0.875rem;text-transform:none;text-align:left}@media only screen and (max-width: 768px){.wrapper .dropdown .displayedoption{height:2.75rem}}.wrapper .dropdown .displayedoption: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:\"\";position:absolute;right:0.5625rem;pointer-events:none}.wrapper .dropdown .displayedoption:hover:not(:disabled):not(.-disabled):not(.-raised){background:transparent;text-decoration:none}.wrapper .dropdown .displayedoption:active{-ms-transform:scale(1, 1) !important;transform:scale(1, 1) !important}.wrapper .dropdown .displayedoption:focus{outline:none}.wrapper .dropdown .displayedoption::-moz-focus-inner{border:0}.wrapper .dropdown .displayedoption.user-is-tabbing:focus{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}.wrapper .dropdown .displayedoption.user-is-tabbing:focus::-moz-focus-inner{border:0}.wrapper .dropdown .displayedoption .overflowcontrol{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex:1}.wrapper .dropdown .displayedoption .overflowcontrol.hassubinfo{display:flex}.wrapper .dropdown .displayedoption .overflowcontrol.hassubinfo .button-text{flex:1;text-overflow:ellipsis;overflow:hidden;min-width:0}.wrapper .dropdown .displayedoption .overflowcontrol.hassubinfo .subinfo{flex:none;font-style:italic}.wrapper .dropdown .displayedoption .overflow-counter{font-weight:bold;margin-left:0.5rem}.wrapper .dropdown>.displayedoption[disabled]{color:#6b6b6b;border-color:#8a8a8a;background:#f0f0f0;cursor:default}.wrapper .dropdown>.options{-webkit-overflow-scrolling:touch;overflow:auto;max-height:12.5rem;-webkit-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;transition:transform 0.25s ease;-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0);-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;position:absolute;top:0;right:0;background:#fff;z-index:100;width:100%;font-size:0.875rem}.wrapper .dropdown>.options.upwards{top:unset;bottom:calc(100% - 2.5rem);-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;transform-origin:center bottom}.wrapper .dropdown>.options.hidden{visibility:hidden}.wrapper .dropdown>.options.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}.wrapper.invalid .dropdown .displayedoption{-webkit-box-shadow:0 0 0 1px #c0392b;-moz-box-shadow:0 0 0 1px #c0392b;box-shadow:0 0 0 1px #c0392b;border-color:#c0392b}.wrapper .error-message{color:#c0392b;font-size:0.875rem;margin-top:0.25rem;margin-bottom:0.25rem;display:block;top:100%;left:0;font-style:italic}.rtl>.options{-ms-transform-origin:left top;-webkit-transform-origin:left top;-moz-transform-origin:left top;transform-origin:left top;left:0;right:auto}.rtl>.options .option{padding-left:3rem;padding-right:1.25rem}.rtl>.displayedoption{padding:0 0.9375rem 0 1.875rem;text-align:right}.rtl>.displayedoption:before{right:auto;left:0.5625rem}";
-const Select = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.wmSelectDidLoad = index.createEvent(this, "wmSelectDidLoad", 7);
-    this.wmComponentBlurred = index.createEvent(this, "wmComponentBlurred", 7);
-    this.disabled = false;
-    this.invalid = false;
-    this.labelPosition = "top";
-    this.requiredField = false;
-    this.errorMessage = "";
-    this.multiple = false;
-    this.placeholder = functions.intl.formatMessage({
-      id: "select.multiPlaceholder",
-      defaultMessage: "Make a selection",
-    });
-    this.allSelectedMessage = functions.intl.formatMessage({
-      id: "select.allSelected",
-      defaultMessage: "All selected",
-    });
-    this.requiredMessage = functions.intl.formatMessage({
-      id: "global.requiredField",
-      defaultMessage: "required field",
-    });
-    this.isTabbing = false;
-    this.isExpanded = false;
-    this.keysSoFar = "";
-    this.searchIndex = 0;
-    this.keyClear = null;
-    this.openUp = false;
-    // for multiselect button text
-    this.overflowCount = 0;
-    this.displayedItems = [];
-    this.allSelected = false;
-  }
-  get childItems() {
-    return Array.from(this.el.querySelectorAll("wm-option"));
-  }
-  get selectedItems() {
-    return Array.from(this.el.querySelectorAll("wm-option")).filter((x) => x.selected);
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  handleOptionSelection(ev) {
-    if (!this.multiple) {
-      // ensure only one option is selected at a time
-      this.childItems
-        // remove selected on any other option
-        .filter((option) => option != ev.target && !!option.selected)
-        .map((option) => (option.selected = false));
-    }
-    this.focusItem(ev.target);
-    this.selectItem(ev.target);
-    if (!this.multiple) {
-      this.close();
-    }
-  }
-  handeChildEnter() {
-    // only occurs for multiselects. handle the click, then close
-    this.close();
-  }
-  handleChildUp(ev) {
-    this.moveUp(ev.target);
-  }
-  handleChildDown(ev) {
-    this.moveDown(ev.target);
-  }
-  moveToFirstItem() {
-    this.focusItem(this.childItems[0]);
-  }
-  moveToLastItem() {
-    this.focusItem(this.childItems[this.childItems.length - 1]);
-  }
-  handleTabKey() {
-    this.close(false);
-  }
-  closePopupOnEscape() {
-    this.close();
-  }
-  blurHandler(ev) {
-    const isElOrChild = ev.target === this.el || this.el.contains(ev.target);
-    if (!isElOrChild && this.isExpanded) {
-      this.close();
-    }
-  }
-  handleKey(ev) {
-    switch (ev.keyCode) {
-      // Arrow down
-      case 40:
-        if (this.isExpanded === false) {
-          ev.preventDefault();
-          this.open("next");
-        }
-        break;
-      // Arrow up
-      case 38:
-        if (this.isExpanded === false) {
-          ev.preventDefault();
-          this.open("previous");
-        }
-        break;
-    }
-  }
-  componentWillLoad() {
-    if (!this.label) {
-      console.error("For accessibility purposes, this component requires a label (even if `label-position` is set to `none`).");
-    }
-    this.el.focus = function () {
-      if (!this.disabled) {
-        this.shadowRoot.querySelector("button").focus();
-      }
-    };
-    this.uid = this.el.id ? this.el.id : functions.generateId();
-    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
-      this.toggleTabbingOn();
-    }
-  }
-  componentDidLoad() {
-    this.wmSelectDidLoad.emit();
-    if (!this.childItems.length) {
-      throw new Error("wm-select should have wm-option elements as children.");
-    }
-    if (this.multiple && this.childItems.filter((x) => x.subinfo).length > 0) {
-      throw new Error("wm-select with the multiple prop cannot have subinfo options");
-    }
-    if (this.multiple && !this.placeholder) {
-      throw new Error("wm-select with the multiple prop needs to also use the placeholder prop.");
-    }
-    // set initial selections / button text
-    if (this.selectedItems.length > 0) {
-      this.selectedItems.forEach((x) => this.displayedItems.push(x));
-      this.setButtonText();
-      // single Select only, pre-select if no default option from dev
-    }
-    else if (!this.multiple) {
-      this.selectItem(this.childItems[0]);
-    }
-    this.optionsEl.classList.add("hidden");
-    index.forceUpdate(this.el);
-    // Dev can overwrite the max-height rule set in the Sass file
-    if (this.maxHeight) {
-      this.optionsEl.style.maxHeight = this.maxHeight;
-    }
-  }
-  moveUp(el) {
-    const prevEl = el.previousElementSibling;
-    if (prevEl) {
-      // scroll option to top of dropdown if partially obscured / out of view
-      if (prevEl.getBoundingClientRect().top < this.optionsEl.getBoundingClientRect().top) {
-        this.optionsEl.scrollTop =
-          prevEl.getBoundingClientRect().top - this.optionsEl.getBoundingClientRect().top + this.optionsEl.scrollTop;
-      }
-      this.focusItem(prevEl);
-    }
-    else {
-      this.focusItem(this.childItems[this.childItems.length - 1]);
-    }
-  }
-  moveDown(el) {
-    const nextEl = el.nextElementSibling;
-    if (nextEl && nextEl.tagName !== "INPUT") {
-      // scroll option to bottom of dropdown if partially obscured / out of view
-      if (nextEl.getBoundingClientRect().bottom > this.optionsEl.getBoundingClientRect().bottom) {
-        this.optionsEl.scrollTop =
-          nextEl.getBoundingClientRect().bottom -
-            this.optionsEl.getBoundingClientRect().top +
-            this.optionsEl.scrollTop -
-            this.optionsEl.offsetHeight;
-      }
-      this.focusItem(nextEl);
-    }
-    else {
-      this.focusItem(this.childItems[0]);
-    }
-  }
-  open(itemToSelect) {
-    if (!this.disabled) {
-      const elHeight = this.el.clientHeight;
-      const buttonHeight = this.buttonEl.clientHeight;
-      this.openUp = functions.shouldOpenUp(this.el, this.optionsEl,
-      // when opening up, dropdown covers both label and button
-      elHeight,
-      // when opening down, dropdown covers only the button
-      buttonHeight);
-      this.isExpanded = true;
-      this.optionsEl.classList.remove("hidden");
-      window.requestAnimationFrame(() => {
-        if (this.selectedItems.length > 0) {
-          if (itemToSelect === "next") {
-            this.moveDown(this.selectedItems[this.selectedItems.length - 1]);
-          }
-          else if (itemToSelect === "previous") {
-            this.moveUp(this.selectedItems[0]);
-          }
-          else {
-            this.focusItem(this.selectedItems[0]);
-          }
-        }
-        else {
-          this.focusItem(this.childItems[0]);
-        }
-      });
-    }
-  }
-  close(returnFocus = true) {
-    this.isExpanded = false;
-    this.childItems.map((i) => (i.focused = false));
-    window.setTimeout(() => {
-      this.optionsEl.classList.add("hidden");
-      // Returns focus to button after popup closes (no need if user is tabbing)
-      // Delay is necessary for screenreader to get new expanded state before focus
-      // window.requestAnimationFrame is probably enough, but since we are already using setTimeout it may as well be here
-      // also UX wise, it makes sense for the button to only be focused after the animation is complete
-      if (returnFocus) {
-        this.el.focus();
-      }
-    }, 150);
-  }
-  focusItem(item) {
-    this.childItems.forEach((i) => (i.focused = i === item));
-  }
-  selectItem(item) {
-    if (this.multiple) {
-      item.selected = !item.selected;
-    }
-    else {
-      this.childItems.forEach((i) => (i.selected = i === item));
-    }
-    this.setButtonText();
-  }
-  findAndFocusItem(ev) {
-    const character = ev.detail.toUpperCase();
-    if (!this.keysSoFar) {
-      for (var i = 0; i < this.childItems.length; i++) {
-        if (this.childItems[i].focused) {
-          this.searchIndex = i;
-        }
-      }
-    }
-    this.keysSoFar += character;
-    this.clearKeysSoFarAfterDelay();
-    var nextMatch = this.findMatchInRange(this.childItems, this.searchIndex + 1, this.childItems.length);
-    if (!nextMatch) {
-      nextMatch = this.findMatchInRange(this.childItems, 0, this.searchIndex);
-    }
-    if (nextMatch) {
-      this.focusItem(nextMatch);
-    }
-  }
-  clearKeysSoFarAfterDelay() {
-    if (this.keyClear) {
-      window.clearTimeout(this.keyClear);
-      this.keyClear = null;
-    }
-    this.keyClear = window.setTimeout(function () {
-      this.keysSoFar = "";
-      this.keyClear = null;
-    }.bind(this), 500);
-  }
-  findMatchInRange(list, startIndex, endIndex) {
-    // Find the first item starting with the keysSoFar substring, searching in
-    // the specified range of items
-    for (var n = startIndex; n < endIndex; n++) {
-      var label = list[n].textContent;
-      if (label && label.toUpperCase().indexOf(this.keysSoFar) === 0) {
-        return list[n];
-      }
-    }
-    return null;
-  }
-  exposeErrors() {
-    // When the error changes, a new id is set for the error container and the button's aria-describedby attribute is updated accordingly. This is to make sure the screen reader announces teh updated errors in Firefox. See this longstanding bug: https://bugzilla.mozilla.org/show_bug.cgi?id=493683
-    const newId = functions.generateId();
-    this.errorContainer.id = `wm-errors-${newId}`;
-    this.buttonEl.setAttribute("aria-describedby", `wm-errors-${newId}`);
-  }
-  renderErrorContainer() {
-    return (index.h("div", { id: "wm-errors", class: this.errorMessage ? "error-message" : "", ref: (el) => (this.errorContainer = el), "aria-live": "assertive", "aria-atomic": "true" }, this.errorMessage));
-  }
-  handleComponentBlur() {
-    if (!this.isExpanded) {
-      this.wmComponentBlurred.emit();
-    }
-  }
-  setButtonText() {
-    this.displayedItems = this.childItems.filter((x) => x.selected);
-    this.allSelected = this.displayedItems.length === this.childItems.length;
-    // handle overflow + counter for multiselect
-    if (this.multiple) {
-      // this is a fixed measurement accounting for the max width of a 3 character overflow counter
-      const overflowCounterWidth = 38;
-      const computedStyle = window.getComputedStyle(this.buttonEl);
-      // there seems to be no quick way to get an elements width without padding, except for subtracting padding manually
-      const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
-      const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
-      const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
-      let optionsWidths = this.displayedItems.map((x) => x.shadowRoot.querySelector(".option-wrapper").clientWidth);
-      let optionsTotalWidth = optionsWidths.reduce((acc, x) => acc + x, 0);
-      this.overflowCount = 0;
-      while (optionsTotalWidth > availableSpace && this.displayedItems.length > 1) {
-        this.overflowCount++;
-        optionsTotalWidth -= optionsWidths[optionsWidths.length - 1];
-        optionsWidths.pop();
-        this.displayedItems.pop();
-      }
-    }
-  }
-  renderButtonText() {
-    if (this.multiple && this.displayedItems.length < 1) {
-      return index.h("span", null, this.placeholder);
-    }
-    else if (this.multiple && this.allSelected && this.overflowCount > 0) {
-      return this.allSelectedMessage;
-    }
-    else {
-      return this.displayedItems.map((x, idx) => (index.h("span", null, idx > 0 ? ", " : "", x.textContent)));
-    }
-  }
-  renderSubinfo() {
-    // multiselects cannot have subinfo for options
-    if (!this.multiple && this.selectedItems.length > 0 && this.selectedItems[0].subinfo) {
-      return index.h("span", { class: "subinfo" }, this.selectedItems[0].subinfo);
-    }
-  }
-  renderOverflowCount() {
-    if (this.overflowCount > 0 && !this.allSelected) {
-      return (index.h("span", null, index.h("span", { class: "overflow-counter" }, "+", this.overflowCount)));
-    }
-  }
-  render() {
-    const buttonProps = {
-      id: `selectbtn-${this.uid}`,
-      ["disabled"]: this.disabled,
-      ["aria-controls"]: `list-${this.uid}`,
-      ["aria-labelledby"]: `label-${this.uid} selectbtn-${this.uid}`,
-      ["aria-describedby"]: "wm-errors",
-      ["aria-expanded"]: this.isExpanded ? "true" : "false",
-      onClick: () => (this.isExpanded ? this.close() : this.open()),
-      onBlur: () => this.handleComponentBlur(),
-    };
-    return (index.h("div", { class: `wrapper ${functions.getTextDir()} label-${this.labelPosition} ${this.invalid || this.errorMessage ? "invalid" : ""}` }, index.h("div", { class: "label-wrapper" }, index.h("label", { class: "label", id: `label-${this.uid}`, htmlFor: `selectbtn-${this.uid}` }, this.label,
-    // we can't use aria-required or required attributes because it's invalid on the elements we're using (button controlling a listbox)
-    this.requiredField ? (index.h("span", { class: "required" }, index.h("span", { class: "sr-only" }, this.requiredMessage), index.h("span", { "aria-hidden": "true" }, "*"))) : (""))), index.h("div", { class: "dropdown" }, index.h("button", Object.assign({}, buttonProps, { class: `displayedoption ${this.isTabbing ? "user-is-tabbing" : ""}`, ref: (el) => (this.buttonEl = el) }), index.h("span", { class: this.selectedItems.length > 0 && this.selectedItems.filter((x) => x.subinfo).length > 0
-        ? "overflowcontrol hassubinfo"
-        : "overflowcontrol" }, index.h("span", { class: "button-text" }, this.renderButtonText()), this.renderSubinfo()), this.renderOverflowCount()), index.h("div", { class: `options ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, id: `list-${this.uid}`, tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": `label-${this.uid}`, ref: (el) => (this.optionsEl = el) }, index.h("slot", null)), this.renderErrorContainer())));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "errorMessage": ["exposeErrors"]
-  }; }
-};
-Select.style = wmSelectCss;
-exports.wm_select = Select;