@watermarkinsights/ripple 4.2.0-1 → 4.2.0

package/dist/collection/components/wm-select/wm-select.js

@@ -3,994 +3,993 @@ import { forceUpdate } from "@stencil/core";
 import { generateId, getTextDir, shouldOpenUp, intl, debounce, toBool, handleDisabledAttribute, } from "../../global/functions";
 import { globalMessages } from "../../global/intl";
 export class Select {
-    constructor() {
-        this.selectAllMessage = intl.formatMessage({
-            id: "select.selectAll",
-            defaultMessage: "Select All",
-        });
-        this.deselectAllMessage = intl.formatMessage({
-            id: "select.deselectAll",
-            defaultMessage: "Deselect All",
-        });
-        this.allOptionsSelectedMessage = intl.formatMessage({
-            id: "select.allOptionsSelected",
-            defaultMessage: "All options selected",
-        });
-        this.allOptionsDeselectedMessage = intl.formatMessage({
-            id: "select.allOptionsDeselected",
-            defaultMessage: "All options deselected",
-        });
-        this.keysSoFar = "";
-        this.searchIndex = 0;
-        this.openUp = false;
-        //////////////////////////////////////
-        //////////////////////////////////////
-        // for multiselect button text
-        this.overflowCount = 0;
-        this.displayedOptions = [];
-        this.debouncedClearKeysSoFar = debounce(() => {
-            this.keysSoFar = "";
-        }, 500);
-        this.debouncedSearch = debounce(() => {
-            this.wmSelectSearchChanged.emit({ searchTerm: this.searchTerm });
-            if (this.filteredOptions.length) {
-                this.announce(this.resultsFoundMessage);
-            }
-            else {
-                this.announce(this.noResultsFoundMessage);
-            }
-        }, 150);
-        this.disabled = false;
-        this.maxHeight = undefined;
-        this.label = undefined;
-        this.labelPosition = "top";
-        this.requiredField = false;
-        this.errorMessage = "";
-        this.multiple = false;
-        this.search = false;
-        this.selectAll = false;
-        this.placeholder = intl.formatMessage({
-            id: "select.multiPlaceholder",
-            defaultMessage: "Make a selection",
-            description: "Placeholder text. Use imperative",
-        });
-        this.searchPlaceholder = intl.formatMessage({
-            id: "select.searchPlaceholder",
-            defaultMessage: "Search",
-            description: "Placeholder text. Use imperative",
-        });
-        this.allSelectedMessage = intl.formatMessage({
-            id: "select.allSelected",
-            defaultMessage: "All selected",
-            description: "Text displayed when all options are selected",
-        });
-        this.isTabbing = false;
-        this.isExpanded = false;
-        this.announcement = "";
-    }
-    get childOptions() {
-        return Array.from(this.el.querySelectorAll("wm-option"));
-    }
-    get cloneOptions() {
-        return Array.from(this.el.shadowRoot.querySelectorAll("wm-option"));
-    }
-    get allOptionEls() {
-        // this includes both slotted wm-options and internally created wm-options
-        return this.cloneOptions.concat(this.childOptions);
-    }
-    get visibleOptionEls() {
-        return this.allOptionEls.filter((option) => !option.classList.contains("hidden") && !option.classList.contains("filtered-out"));
-    }
-    get isDisabled() {
-        // string "false" needs to be treated as bool False because react wrappers convert bool to string.
-        return toBool(this.disabled);
-    }
+  constructor() {
+    this.selectAllMessage = intl.formatMessage({
+      id: "select.selectAll",
+      defaultMessage: "Select All",
+    });
+    this.deselectAllMessage = intl.formatMessage({
+      id: "select.deselectAll",
+      defaultMessage: "Deselect All",
+    });
+    this.allOptionsSelectedMessage = intl.formatMessage({
+      id: "select.allOptionsSelected",
+      defaultMessage: "All options selected",
+    });
+    this.allOptionsDeselectedMessage = intl.formatMessage({
+      id: "select.allOptionsDeselected",
+      defaultMessage: "All options deselected",
+    });
+    this.keysSoFar = "";
+    this.searchIndex = 0;
+    this.openUp = false;
     //////////////////////////////////////
-    // for search variants
-    get searchTerm() {
-        return this.searchFieldEl ? this.searchFieldEl.value : "";
-    }
-    get filteredOptions() {
-        return this.childOptions.filter((option) => { var _a; return (_a = option.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(this.searchTerm.toLowerCase()); });
-    }
-    get selectedOptions() {
-        return Array.from(this.el.querySelectorAll("wm-option")).filter((x) => x.selected);
-    }
-    get allSelected() {
-        return this.childOptions.every((option) => option.selected);
-    }
-    get visibleSelectAllButton() {
-        return this.selectAll && this.multiple && this.searchTerm === "";
-    }
     //////////////////////////////////////
-    get resultsFoundMessage() {
-        return intl.formatMessage({
-            id: "select.searchResultsFound",
-            defaultMessage: "{numResults, plural, one {1 option found} other {# options found}}",
-            description: "The message read by the screen reader, indicating how many results a search returned",
-        }, { numResults: this.filteredOptions.length });
-    }
-    get noResultsFoundMessage() {
-        return intl.formatMessage({
-            id: "select.noSearchResults",
-            defaultMessage: "No results found. Please try your search again.",
-            description: "The message displayed when no options pass the search filter",
-        });
-    }
-    toggleTabbingOn() {
-        this.isTabbing = true;
-    }
-    toggleTabbingOff() {
-        this.isTabbing = false;
-    }
-    handleOptionSelection(ev) {
-        this.focusOption(ev.detail);
-        if (!this.multiple) {
-            this.close();
-        }
-    }
-    handleOptionCloneSelection(ev) {
-        const correspondingOption = this.findCorrespondingOption(ev.detail);
-        correspondingOption.click();
-    }
-    handleChildEnter() {
-        // only occurs for multiselects. handle the click, then close
-        this.close();
-    }
-    handleChildUp(ev) {
-        this.moveUp(ev.detail);
-    }
-    handleChildDown(ev) {
-        this.moveDown(ev.detail);
-    }
-    moveToFirstOption() {
-        this.focusOption(this.visibleOptionEls[0]);
-    }
-    moveToLastOption() {
-        this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length - 1]);
-    }
-    closePopupOnEscape() {
-        this.close();
-    }
-    handleOptionBlur(ev) {
-        // if the Option is blurred to something other than the component emit a blur event with the appropriate relatedTarget
-        // keeps our component's blur events accurate, and closes when focusing browser address bar
-        if (!this.isElOrChild(ev.detail.relatedTarget)) {
-            const event = new CustomEvent("blur");
-            // @ts-ignore
-            event.relatedTarget = ev.detail.relatedTarget;
-            this.el.dispatchEvent(event);
-        }
-    }
-    handleClick(ev) {
-        if (!this.isElOrChild(ev.target)) {
-            this.close();
-        }
-    }
-    handleSelectAllClick() {
-        this.allSelected ? this.deselectAllOptions() : this.selectAllOptions();
-    }
-    selectAllOptions() {
-        this.announce(this.allOptionsSelectedMessage);
-        this.wmSelectAllSelected.emit();
-    }
-    deselectAllOptions() {
-        this.announce(this.allOptionsDeselectedMessage);
-        this.wmSelectAllDeselected.emit();
-    }
-    handleButtonBlur(ev) {
-        if (this.isElOrChild(ev.relatedTarget)) {
-            // do not emit a blur event when opening the dropdown and focusing the Options
-            ev.stopPropagation();
-        }
-    }
-    handleSearchFieldBlur(ev) {
-        this.searchFieldWrapperEl.classList.remove("focus");
-        if (this.isElOrChild(ev.relatedTarget)) {
-            // do not emit a blur event when moving from searchfield to options
-            ev.stopPropagation();
-        }
-    }
-    handleKey(ev) {
-        switch (ev.key) {
-            case "ArrowDown":
-                if (this.isExpanded === false) {
-                    ev.preventDefault();
-                    this.open("next");
-                }
-                break;
-            case "ArrowUp":
-                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`).");
-        }
-        if (!this.multiple && this.selectedOptions.length === 0) {
-            console.error("wm-select should have one initial option selected");
+    // for multiselect button text
+    this.overflowCount = 0;
+    this.displayedOptions = [];
+    this.debouncedClearKeysSoFar = debounce(() => {
+      this.keysSoFar = "";
+    }, 500);
+    this.debouncedSearch = debounce(() => {
+      this.wmSelectSearchChanged.emit({ searchTerm: this.searchTerm });
+      if (this.filteredOptions.length) {
+        this.announce(this.resultsFoundMessage);
+      }
+      else {
+        this.announce(this.noResultsFoundMessage);
+      }
+    }, 150);
+    this.disabled = false;
+    this.maxHeight = undefined;
+    this.label = undefined;
+    this.labelPosition = "top";
+    this.requiredField = false;
+    this.errorMessage = "";
+    this.multiple = false;
+    this.search = false;
+    this.selectAll = false;
+    this.placeholder = intl.formatMessage({
+      id: "select.multiPlaceholder",
+      defaultMessage: "Make a selection",
+      description: "Placeholder text. Use imperative",
+    });
+    this.searchPlaceholder = intl.formatMessage({
+      id: "select.searchPlaceholder",
+      defaultMessage: "Search",
+      description: "Placeholder text. Use imperative",
+    });
+    this.allSelectedMessage = intl.formatMessage({
+      id: "select.allSelected",
+      defaultMessage: "All selected",
+      description: "Text displayed when all options are selected",
+    });
+    this.isTabbing = false;
+    this.isExpanded = false;
+    this.announcement = "";
+  }
+  get childOptions() {
+    return Array.from(this.el.querySelectorAll("wm-option"));
+  }
+  get cloneOptions() {
+    return Array.from(this.el.shadowRoot.querySelectorAll("wm-option"));
+  }
+  get allOptionEls() {
+    // this includes both slotted wm-options and internally created wm-options
+    return this.cloneOptions.concat(this.childOptions);
+  }
+  get visibleOptionEls() {
+    return this.allOptionEls.filter((option) => !option.classList.contains("hidden") && !option.classList.contains("filtered-out"));
+  }
+  get isDisabled() {
+    // string "false" needs to be treated as bool False because react wrappers convert bool to string.
+    return toBool(this.disabled);
+  }
+  //////////////////////////////////////
+  // for search variants
+  get searchTerm() {
+    return this.searchFieldEl ? this.searchFieldEl.value : "";
+  }
+  get filteredOptions() {
+    return this.childOptions.filter((option) => { var _a; return (_a = option.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(this.searchTerm.toLowerCase()); });
+  }
+  get selectedOptions() {
+    return Array.from(this.el.querySelectorAll("wm-option")).filter((x) => x.selected);
+  }
+  get allSelected() {
+    return this.childOptions.every((option) => option.selected);
+  }
+  get visibleSelectAllButton() {
+    return this.selectAll && this.multiple && this.searchTerm === "";
+  }
+  //////////////////////////////////////
+  get resultsFoundMessage() {
+    return intl.formatMessage({
+      id: "select.searchResultsFound",
+      defaultMessage: "{numResults, plural, one {1 option found} other {# options found}}",
+      description: "The message read by the screen reader, indicating how many results a search returned",
+    }, { numResults: this.filteredOptions.length });
+  }
+  get noResultsFoundMessage() {
+    return intl.formatMessage({
+      id: "select.noSearchResults",
+      defaultMessage: "No results found. Please try your search again.",
+      description: "The message displayed when no options pass the search filter",
+    });
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  handleOptionSelection(ev) {
+    this.focusOption(ev.detail);
+    if (!this.multiple) {
+      this.close();
+    }
+  }
+  handleOptionCloneSelection(ev) {
+    const correspondingOption = this.findCorrespondingOption(ev.detail);
+    correspondingOption.click();
+  }
+  handleChildEnter() {
+    // only occurs for multiselects. handle the click, then close
+    this.close();
+  }
+  handleChildUp(ev) {
+    this.moveUp(ev.detail);
+  }
+  handleChildDown(ev) {
+    this.moveDown(ev.detail);
+  }
+  moveToFirstOption() {
+    this.focusOption(this.visibleOptionEls[0]);
+  }
+  moveToLastOption() {
+    this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length - 1]);
+  }
+  closePopupOnEscape() {
+    this.close();
+  }
+  handleOptionBlur(ev) {
+    // if the Option is blurred to something other than the component emit a blur event with the appropriate relatedTarget
+    // keeps our component's blur events accurate, and closes when focusing browser address bar
+    if (!this.isElOrChild(ev.detail.relatedTarget)) {
+      const event = new CustomEvent("blur");
+      // @ts-ignore
+      event.relatedTarget = ev.detail.relatedTarget;
+      this.el.dispatchEvent(event);
+    }
+  }
+  handleClick(ev) {
+    if (!this.isElOrChild(ev.target)) {
+      this.close();
+    }
+  }
+  handleSelectAllClick() {
+    this.allSelected ? this.deselectAllOptions() : this.selectAllOptions();
+  }
+  selectAllOptions() {
+    this.announce(this.allOptionsSelectedMessage);
+    this.wmSelectAllSelected.emit();
+  }
+  deselectAllOptions() {
+    this.announce(this.allOptionsDeselectedMessage);
+    this.wmSelectAllDeselected.emit();
+  }
+  handleButtonBlur(ev) {
+    if (this.isElOrChild(ev.relatedTarget)) {
+      // do not emit a blur event when opening the dropdown and focusing the Options
+      ev.stopPropagation();
+    }
+  }
+  handleSearchFieldBlur(ev) {
+    this.searchFieldWrapperEl.classList.remove("focus");
+    if (this.isElOrChild(ev.relatedTarget)) {
+      // do not emit a blur event when moving from searchfield to options
+      ev.stopPropagation();
+    }
+  }
+  handleKey(ev) {
+    switch (ev.key) {
+      case "ArrowDown":
+        if (this.isExpanded === false) {
+          ev.preventDefault();
+          this.open("next");
         }
-        if (document.body.classList.contains("wmcl-user-is-tabbing")) {
-            this.toggleTabbingOn();
+        break;
+      case "ArrowUp":
+        if (this.isExpanded === false) {
+          ev.preventDefault();
+          this.open("previous");
         }
-        handleDisabledAttribute(this.el, this.isDisabled);
-        const mutationObserver = new MutationObserver((mutationRecordList) => mutationRecordList.forEach((mutationRecord) => this.handleChildChange(mutationRecord)));
-        mutationObserver.observe(this.el, {
-            childList: true,
-            attributes: true,
-            subtree: true,
-            attributeFilter: ["selected"],
-        });
-    }
-    handleChildChange(_) {
-        // on update of children or children selected state, reset button text and rerender
-        this.setButtonText();
-        forceUpdate(this.el);
-    }
-    componentDidLoad() {
-        this.wmSelectDidLoad.emit();
-        this.dropdownEl.classList.add("hidden");
-        forceUpdate(this.el);
-        // Dev can overwrite the max-height rule set in the Sass file
-        if (this.maxHeight) {
-            this.listboxEl.style.maxHeight = this.maxHeight;
-        }
-        if (this.multiple) {
-            this.updateOptionVisibility();
-        }
-        this.setButtonText();
-    }
-    componentWillUpdate() {
-        if (this.multiple) {
-            // find last visible clone option and apply .last class
-            const visibleCloneOptions = this.visibleOptionEls.filter((option) => option.classList.contains("clone"));
-            visibleCloneOptions.forEach((option, idx) => {
-                if (idx === visibleCloneOptions.length - 1) {
-                    option.classList.add("last");
-                }
-                else {
-                    option.classList.remove("last");
-                }
-            });
+        break;
+    }
+  }
+  componentWillLoad() {
+    if (!this.label) {
+      console.error("For accessibility purposes, this component requires a label (even if `label-position` is set to `none`).");
+    }
+    if (!this.multiple && this.selectedOptions.length === 0) {
+      console.error("wm-select should have one initial option selected");
+    }
+    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+      this.toggleTabbingOn();
+    }
+    handleDisabledAttribute(this.el, this.isDisabled);
+    const mutationObserver = new MutationObserver((mutationRecordList) => mutationRecordList.forEach((mutationRecord) => this.handleChildChange(mutationRecord)));
+    mutationObserver.observe(this.el, {
+      childList: true,
+      attributes: true,
+      subtree: true,
+      attributeFilter: ["selected"],
+    });
+  }
+  handleChildChange(_) {
+    // on update of children or children selected state, reset button text and rerender
+    this.setButtonText();
+    forceUpdate(this.el);
+  }
+  componentDidLoad() {
+    this.wmSelectDidLoad.emit();
+    this.dropdownEl.classList.add("hidden");
+    forceUpdate(this.el);
+    // Dev can overwrite the max-height rule set in the Sass file
+    if (this.maxHeight) {
+      this.listboxEl.style.maxHeight = this.maxHeight;
+    }
+    if (this.multiple) {
+      this.updateOptionVisibility();
+    }
+    this.setButtonText();
+  }
+  componentWillUpdate() {
+    if (this.multiple) {
+      // find last visible clone option and apply .last class
+      const visibleCloneOptions = this.visibleOptionEls.filter((option) => option.classList.contains("clone"));
+      visibleCloneOptions.forEach((option, idx) => {
+        if (idx === visibleCloneOptions.length - 1) {
+          option.classList.add("last");
         }
-    }
-    moveUp(el) {
-        const focusableEls = this.visibleOptionEls;
-        if (this.selectAllEl) {
-            focusableEls.unshift(this.selectAllEl);
-        }
-        if (this.searchFieldEl) {
-            focusableEls.unshift(this.searchFieldEl);
-        }
-        const prevEl = focusableEls[focusableEls.indexOf(el) - 1] || focusableEls[focusableEls.length - 1];
-        if (prevEl) {
-            this.focusOption(prevEl);
-        }
-    }
-    moveDown(el) {
-        const focusableEls = this.visibleOptionEls;
-        if (this.selectAllEl) {
-            focusableEls.unshift(this.selectAllEl);
-        }
-        if (this.searchFieldEl) {
-            focusableEls.unshift(this.searchFieldEl);
-        }
-        const nextEl = focusableEls[focusableEls.indexOf(el) + 1] || focusableEls[0];
-        if (nextEl) {
-            this.focusOption(nextEl);
-        }
-    }
-    open(optionToSelect) {
-        if (!this.isDisabled) {
-            const elHeight = this.el.clientHeight;
-            const buttonHeight = this.buttonEl.clientHeight;
-            this.openUp = shouldOpenUp(this.el, this.dropdownEl.clientHeight, 
-            // when opening up, dropdown covers both label and button
-            elHeight, 
-            // when opening down, dropdown covers only the button
-            buttonHeight);
-            this.isExpanded = true;
-            this.dropdownEl.classList.remove("hidden");
-            window.requestAnimationFrame(() => {
-                switch (optionToSelect) {
-                    case "next":
-                        // search variant focuses search field
-                        // all others focus option "after" last selected option  (this can be the first option)
-                        if (this.search) {
-                            this.searchFieldEl.focus();
-                            this.listboxEl.scrollTop = 0;
-                        }
-                        else {
-                            this.moveDown(this.visibleOptionEls.filter((x) => x.selected).slice(-1)[0]);
-                        }
-                        break;
-                    case "previous":
-                        // search variant focuses last option
-                        // all others focus option "above" first selected option (this can be the last option)
-                        if (this.search) {
-                            this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length - 1]);
-                        }
-                        else {
-                            this.moveUp(this.visibleOptionEls.filter((x) => x.selected)[0]);
-                        }
-                        break;
-                    default:
-                        // search variant focuses search field
-                        // all others focus the selected option
-                        // if no option is selected (empty multiselect), focuses first option
-                        if (this.search) {
-                            this.searchFieldEl.focus();
-                            this.listboxEl.scrollTop = 0;
-                        }
-                        else if (this.selectedOptions.length > 0) {
-                            this.focusOption(this.visibleOptionEls.filter((x) => x.selected)[0]);
-                        }
-                        else {
-                            this.focusOption(this.visibleOptionEls[0]);
-                        }
-                        break;
-                }
-            });
-        }
-    }
-    close(returnFocus = true) {
-        if (this.isExpanded) {
-            this.isExpanded = false;
-            this.allOptionEls.map((i) => (i.focused = false));
-            window.setTimeout(() => {
-                this.dropdownEl.classList.add("hidden");
-                if (this.multiple) {
-                    this.updateOptionVisibility();
-                }
-                // clear search field, reset filtered / bolded state of wm-options
-                if (this.search) {
-                    this.searchFieldEl.value = "";
-                    this.wmSelectSearchChanged.emit({ searchTerm: this.searchTerm });
-                }
-                // 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.buttonEl.focus();
-                }
-            }, 150);
+        else {
+          option.classList.remove("last");
         }
-    }
-    updateOptionVisibility() {
-        // this runs for search multiselects, where selected options are rendered at the top of the dropdown list
-        // slotted wm-options are hidden if selected, and clone wm-options are made visible if selected
-        this.childOptions.forEach((option, idx) => {
-            const cloneOption = this.cloneOptions[idx];
-            if (option.selected) {
-                option.classList.add("hidden");
-                cloneOption.classList.remove("hidden");
+      });
+    }
+  }
+  moveUp(el) {
+    const focusableEls = this.visibleOptionEls;
+    if (this.selectAllEl) {
+      focusableEls.unshift(this.selectAllEl);
+    }
+    if (this.searchFieldEl) {
+      focusableEls.unshift(this.searchFieldEl);
+    }
+    const prevEl = focusableEls[focusableEls.indexOf(el) - 1] || focusableEls[focusableEls.length - 1];
+    if (prevEl) {
+      this.focusOption(prevEl);
+    }
+  }
+  moveDown(el) {
+    const focusableEls = this.visibleOptionEls;
+    if (this.selectAllEl) {
+      focusableEls.unshift(this.selectAllEl);
+    }
+    if (this.searchFieldEl) {
+      focusableEls.unshift(this.searchFieldEl);
+    }
+    const nextEl = focusableEls[focusableEls.indexOf(el) + 1] || focusableEls[0];
+    if (nextEl) {
+      this.focusOption(nextEl);
+    }
+  }
+  open(optionToSelect) {
+    if (!this.isDisabled) {
+      const elHeight = this.el.clientHeight;
+      const buttonHeight = this.buttonEl.clientHeight;
+      this.openUp = shouldOpenUp(this.el, this.dropdownEl.clientHeight, 
+      // when opening up, dropdown covers both label and button
+      elHeight, 
+      // when opening down, dropdown covers only the button
+      buttonHeight);
+      this.isExpanded = true;
+      this.dropdownEl.classList.remove("hidden");
+      window.requestAnimationFrame(() => {
+        switch (optionToSelect) {
+          case "next":
+            // search variant focuses search field
+            // all others focus option "after" last selected option  (this can be the first option)
+            if (this.search) {
+              this.searchFieldEl.focus();
+              this.listboxEl.scrollTop = 0;
             }
             else {
-                option.classList.remove("hidden");
-                cloneOption.classList.add("hidden");
+              this.moveDown(this.visibleOptionEls.filter((x) => x.selected).slice(-1)[0]);
             }
-        });
-    }
-    focusOption(option) {
-        this.allOptionEls.forEach((i) => (i.focused = i === option));
-        // option must be scrolledIntoView before focused
-        // if focus is called first the option might be positioned incorrectly (in the center of the dropdown) and scrollIntoView will do nothing as the option will already be in view
-        option.scrollIntoView({ block: "nearest" });
-        // scrollIntoView does not work when the container of the element it's called on is not rendered to the page (in our case the dropdown is still closed and has transform: scaleY(0))
-        // when opening the dropdown, scrollIntoView must be delayed to a point where the browser recognizes content within it as able to be scrolled to
-        // in Safari in particular, the soonest this seems to happen is 20ms. The longest we can wait before any jumping in the open dropdown is noticeable is 60ms
-        window.setTimeout(() => option.scrollIntoView({ block: "nearest" }), 60);
-        option.focus();
-    }
-    findAndFocusOption(ev) {
-        const letterPressed = ev.detail.letter.toLowerCase();
-        const optionPressed = ev.detail.optionEl;
-        if (!this.keysSoFar && letterPressed == " ") {
-            // if the first key entered is space, treat as a click. Otherwise include in
-            optionPressed.click();
-        }
-        else {
-            if (!this.keysSoFar) {
-                // if first character entered, set currently focused option as the starting index for the search
-                this.visibleOptionEls.forEach((option, idx) => {
-                    if (option.focused) {
-                        this.searchIndex = idx;
-                    }
-                });
+            break;
+          case "previous":
+            // search variant focuses last option
+            // all others focus option "above" first selected option (this can be the last option)
+            if (this.search) {
+              this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length - 1]);
             }
-            this.keysSoFar += letterPressed;
-            let nextMatch = this.findMatchInRange(this.visibleOptionEls, this.searchIndex + 1, this.visibleOptionEls.length);
-            if (!nextMatch) {
-                // if match can't be found from starting option downwards, search from top
-                nextMatch = this.findMatchInRange(this.visibleOptionEls, 0, this.searchIndex);
+            else {
+              this.moveUp(this.visibleOptionEls.filter((x) => x.selected)[0]);
             }
-            if (nextMatch) {
-                // findMatchInRange still might have returned null, only focus if match found
-                this.focusOption(nextMatch);
+            break;
+          default:
+            // search variant focuses search field
+            // all others focus the selected option
+            // if no option is selected (empty multiselect), focuses first option
+            if (this.search) {
+              this.searchFieldEl.focus();
+              this.listboxEl.scrollTop = 0;
             }
-            this.debouncedClearKeysSoFar();
-        }
-    }
-    findMatchInRange(list, startIndex, endIndex) {
-        let match = null;
-        let optionsInRange = list.slice(startIndex, endIndex);
-        // Find the first option starting with the keysSoFar substring, searching in
-        // the specified range of options
-        optionsInRange.forEach((option) => {
-            const label = option.textContent;
-            if (!match && label && label.toLowerCase().startsWith(this.keysSoFar)) {
-                match = option;
+            else if (this.selectedOptions.length > 0) {
+              this.focusOption(this.visibleOptionEls.filter((x) => x.selected)[0]);
             }
-        });
-        return match;
-    }
-    findCorrespondingOption(el) {
-        // if clone, returns the child wm-option
-        // if child wm-option, returns clone
-        const isClone = el.classList.contains("clone");
-        return isClone
-            ? this.childOptions[this.cloneOptions.indexOf(el)]
-            : this.cloneOptions[this.childOptions.indexOf(el)];
-    }
-    isElOrChild(el) {
-        var _a;
-        // determines whether or not the element is the component, a child of the component, or exists within the component's shadowroot
-        return el === this.el || this.el.contains(el) || ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(el));
-    }
-    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 = generateId();
-        this.errorContainer.id = `wm-errors-${newId}`;
-        this.buttonEl.setAttribute("aria-describedby", `wm-errors-${newId}`);
-    }
-    handleDisabledChange() {
-        handleDisabledAttribute(this.el, this.isDisabled);
-    }
-    renderErrorContainer() {
-        return (h("div", { id: "wm-errors", class: this.errorMessage ? "error-message" : "", ref: (el) => (this.errorContainer = el), "aria-live": "assertive", "aria-atomic": "true" }, this.errorMessage));
-    }
-    handleComponentBlur(ev) {
-        // Do not close or emit custom blur event when blurring to an element inside (wm-option)
-        if (!this.el.contains(ev.relatedTarget)) {
-            this.close(false);
-            this.wmSelectBlurred.emit();
-        }
-    }
-    // on search field or select all. keydown on options is handled via events.
-    handleKeyDown(ev) {
-        const el = ev.target;
-        switch (ev.key) {
-            case "ArrowDown":
-                ev.preventDefault();
-                this.moveDown(ev.target);
-                break;
-            case "ArrowUp":
-                ev.preventDefault();
-                this.moveUp(ev.target);
-                break;
-            case "Escape":
-                ev.preventDefault();
-                this.close();
-                break;
-            case "Enter":
-                if (el === this.selectAllEl) {
-                    ev.preventDefault();
-                    this.handleSelectAllClick();
-                    this.close();
-                }
-                break;
-            case " ":
-                if (el === this.selectAllEl) {
-                    ev.preventDefault();
-                    this.handleSelectAllClick();
-                }
-                break;
+            else {
+              this.focusOption(this.visibleOptionEls[0]);
+            }
+            break;
         }
-    }
-    setButtonText() {
-        this.displayedOptions = this.childOptions
-            .filter((x) => x.selected)
-            .map((y) => (!y.classList.contains("hidden") ? y : this.findCorrespondingOption(y)));
-        // handle overflow + counter for multiselect
+      });
+    }
+  }
+  close(returnFocus = true) {
+    if (this.isExpanded) {
+      this.isExpanded = false;
+      this.allOptionEls.map((i) => (i.focused = false));
+      window.setTimeout(() => {
+        this.dropdownEl.classList.add("hidden");
         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.displayedOptions.map((x) => x.shadowRoot.querySelector(".option-wrapper").clientWidth);
-            let optionsTotalWidth = optionsWidths.reduce((acc, x) => acc + x, 0);
-            this.overflowCount = 0;
-            while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
-                this.overflowCount++;
-                optionsTotalWidth -= optionsWidths[optionsWidths.length - 1];
-                optionsWidths.pop();
-                this.displayedOptions.pop();
-            }
+          this.updateOptionVisibility();
         }
-    }
-    announce(message) {
-        // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
-        if (this.liveRegionEl.textContent === message) {
-            message += "\u00A0";
+        // clear search field, reset filtered / bolded state of wm-options
+        if (this.search) {
+          this.searchFieldEl.value = "";
+          this.wmSelectSearchChanged.emit({ searchTerm: this.searchTerm });
         }
-        this.announcement = message;
-    }
-    renderButtonText() {
-        if (this.multiple && this.displayedOptions.length < 1) {
-            return h("span", null, this.placeholder);
+        // 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.buttonEl.focus();
         }
-        else if (this.multiple && this.allSelected && this.overflowCount > 0) {
-            return this.allSelectedMessage;
+      }, 150);
+    }
+  }
+  updateOptionVisibility() {
+    // this runs for search multiselects, where selected options are rendered at the top of the dropdown list
+    // slotted wm-options are hidden if selected, and clone wm-options are made visible if selected
+    this.childOptions.forEach((option, idx) => {
+      const cloneOption = this.cloneOptions[idx];
+      if (option.selected) {
+        option.classList.add("hidden");
+        cloneOption.classList.remove("hidden");
+      }
+      else {
+        option.classList.remove("hidden");
+        cloneOption.classList.add("hidden");
+      }
+    });
+  }
+  focusOption(option) {
+    this.allOptionEls.forEach((i) => (i.focused = i === option));
+    // option must be scrolledIntoView before focused
+    // if focus is called first the option might be positioned incorrectly (in the center of the dropdown) and scrollIntoView will do nothing as the option will already be in view
+    option.scrollIntoView({ block: "nearest" });
+    // scrollIntoView does not work when the container of the element it's called on is not rendered to the page (in our case the dropdown is still closed and has transform: scaleY(0))
+    // when opening the dropdown, scrollIntoView must be delayed to a point where the browser recognizes content within it as able to be scrolled to
+    // in Safari in particular, the soonest this seems to happen is 20ms. The longest we can wait before any jumping in the open dropdown is noticeable is 60ms
+    window.setTimeout(() => option.scrollIntoView({ block: "nearest" }), 60);
+    option.focus();
+  }
+  findAndFocusOption(ev) {
+    const letterPressed = ev.detail.letter.toLowerCase();
+    const optionPressed = ev.detail.optionEl;
+    if (!this.keysSoFar && letterPressed == " ") {
+      // if the first key entered is space, treat as a click. Otherwise include in
+      optionPressed.click();
+    }
+    else {
+      if (!this.keysSoFar) {
+        // if first character entered, set currently focused option as the starting index for the search
+        this.visibleOptionEls.forEach((option, idx) => {
+          if (option.focused) {
+            this.searchIndex = idx;
+          }
+        });
+      }
+      this.keysSoFar += letterPressed;
+      let nextMatch = this.findMatchInRange(this.visibleOptionEls, this.searchIndex + 1, this.visibleOptionEls.length);
+      if (!nextMatch) {
+        // if match can't be found from starting option downwards, search from top
+        nextMatch = this.findMatchInRange(this.visibleOptionEls, 0, this.searchIndex);
+      }
+      if (nextMatch) {
+        // findMatchInRange still might have returned null, only focus if match found
+        this.focusOption(nextMatch);
+      }
+      this.debouncedClearKeysSoFar();
+    }
+  }
+  findMatchInRange(list, startIndex, endIndex) {
+    let match = null;
+    let optionsInRange = list.slice(startIndex, endIndex);
+    // Find the first option starting with the keysSoFar substring, searching in
+    // the specified range of options
+    optionsInRange.forEach((option) => {
+      const label = option.textContent;
+      if (!match && label && label.toLowerCase().startsWith(this.keysSoFar)) {
+        match = option;
+      }
+    });
+    return match;
+  }
+  findCorrespondingOption(el) {
+    // if clone, returns the child wm-option
+    // if child wm-option, returns clone
+    const isClone = el.classList.contains("clone");
+    return isClone
+      ? this.childOptions[this.cloneOptions.indexOf(el)]
+      : this.cloneOptions[this.childOptions.indexOf(el)];
+  }
+  isElOrChild(el) {
+    var _a;
+    // determines whether or not the element is the component, a child of the component, or exists within the component's shadowroot
+    return el === this.el || this.el.contains(el) || ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(el));
+  }
+  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 = generateId();
+    this.errorContainer.id = `wm-errors-${newId}`;
+    this.buttonEl.setAttribute("aria-describedby", `wm-errors-${newId}`);
+  }
+  handleDisabledChange() {
+    handleDisabledAttribute(this.el, this.isDisabled);
+  }
+  renderErrorContainer() {
+    return (h("div", { id: "wm-errors", class: this.errorMessage ? "error-message" : "", ref: (el) => (this.errorContainer = el), "aria-live": "assertive", "aria-atomic": "true" }, this.errorMessage));
+  }
+  handleComponentBlur(ev) {
+    // Do not close or emit custom blur event when blurring to an element inside (wm-option)
+    if (!this.el.contains(ev.relatedTarget)) {
+      this.close(false);
+      this.wmSelectBlurred.emit();
+    }
+  }
+  // on search field or select all. keydown on options is handled via events.
+  handleKeyDown(ev) {
+    const el = ev.target;
+    switch (ev.key) {
+      case "ArrowDown":
+        ev.preventDefault();
+        this.moveDown(ev.target);
+        break;
+      case "ArrowUp":
+        ev.preventDefault();
+        this.moveUp(ev.target);
+        break;
+      case "Escape":
+        ev.preventDefault();
+        this.close();
+        break;
+      case "Enter":
+        if (el === this.selectAllEl) {
+          ev.preventDefault();
+          this.handleSelectAllClick();
+          this.close();
         }
-        else {
-            return this.displayedOptions.map((x, idx) => (h("span", null, idx > 0 ? ", " : "", x.textContent)));
+        break;
+      case " ":
+        if (el === this.selectAllEl) {
+          ev.preventDefault();
+          this.handleSelectAllClick();
         }
-    }
-    renderSubinfo() {
-        // multiselects cannot have subinfo for options
-        if (!this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo) {
-            return h("span", { class: "subinfo" }, this.selectedOptions[0].subinfo);
+        break;
+    }
+  }
+  setButtonText() {
+    this.displayedOptions = this.childOptions
+      .filter((x) => x.selected)
+      .map((y) => (!y.classList.contains("hidden") ? y : this.findCorrespondingOption(y)));
+    // 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.displayedOptions.map((x) => x.shadowRoot.querySelector(".option-wrapper").clientWidth);
+      let optionsTotalWidth = optionsWidths.reduce((acc, x) => acc + x, 0);
+      this.overflowCount = 0;
+      while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
+        this.overflowCount++;
+        optionsTotalWidth -= optionsWidths[optionsWidths.length - 1];
+        optionsWidths.pop();
+        this.displayedOptions.pop();
+      }
+    }
+  }
+  announce(message) {
+    // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
+    if (this.liveRegionEl.textContent === message) {
+      message += "\u00A0";
+    }
+    this.announcement = message;
+  }
+  renderButtonText() {
+    if (this.multiple && this.displayedOptions.length < 1) {
+      return h("span", null, this.placeholder);
+    }
+    else if (this.multiple && this.allSelected && this.overflowCount > 0) {
+      return this.allSelectedMessage;
+    }
+    else {
+      return this.displayedOptions.map((x, idx) => (h("span", null, idx > 0 ? ", " : "", x.textContent)));
+    }
+  }
+  renderSubinfo() {
+    // multiselects cannot have subinfo for options
+    if (!this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo) {
+      return h("span", { class: "subinfo" }, this.selectedOptions[0].subinfo);
+    }
+  }
+  renderOverflowCount() {
+    if (this.overflowCount > 0 && !this.allSelected) {
+      return (h("span", null, h("span", { class: "overflow-counter" }, "+", this.overflowCount)));
+    }
+  }
+  renderSearchField() {
+    return (h("div", { class: "search" }, h("div", { class: "searchfield-wrapper", ref: (el) => (this.searchFieldWrapperEl = el) }, h("div", { class: "icon" }), h("input", { ref: (el) => (this.searchFieldEl = el), class: "searchfield", role: "combobox", "aria-controls": "list", "aria-expanded": this.isExpanded ? "true" : "false", onKeyDown: (ev) => this.handleKeyDown(ev), onFocus: () => this.searchFieldWrapperEl.classList.add("focus"), onBlur: (ev) => this.handleSearchFieldBlur(ev), onInput: () => this.debouncedSearch(), placeholder: this.searchPlaceholder }))));
+  }
+  renderSearchFailedMessage() {
+    return h("div", { class: "search-results-message" }, this.noResultsFoundMessage);
+  }
+  renderSelectAllButton() {
+    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));
+  }
+  renderCloneOptions() {
+    return Array.from(this.el.children).map((option) => {
+      return (h("wm-option", { class: "clone", selected: option.selected }, option.textContent));
+    });
+  }
+  render() {
+    const buttonProps = {
+      id: "selectbtn",
+      ["disabled"]: this.isDisabled,
+      ["aria-controls"]: "list",
+      ["aria-labelledby"]: "label selectbtn",
+      ["aria-describedby"]: "wm-errors",
+      ["aria-expanded"]: this.isExpanded ? "true" : "false",
+      onClick: () => (this.isExpanded ? this.close() : this.open()),
+    };
+    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, 
+    // 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 ? (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 ${this.isTabbing ? "user-is-tabbing" : ""}`, 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
+        ? "overflowcontrol hassubinfo"
+        : "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)))));
+  }
+  static get is() { return "wm-select"; }
+  static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["wm-select.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["wm-select.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "maxHeight": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-height",
+        "reflect": false
+      },
+      "label": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "labelPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"top\" | \"left\" | \"none\"",
+          "resolved": "\"left\" | \"none\" | \"top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label-position",
+        "reflect": false,
+        "defaultValue": "\"top\""
+      },
+      "requiredField": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required-field",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "errorMessage": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "error-message",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "multiple": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "multiple",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "search": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "search",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "selectAll": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "select-all",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false,
+        "defaultValue": "intl.formatMessage({\n    id: \"select.multiPlaceholder\",\n    defaultMessage: \"Make a selection\",\n    description: \"Placeholder text. Use imperative\",\n  })"
+      },
+      "searchPlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "search-placeholder",
+        "reflect": false,
+        "defaultValue": "intl.formatMessage({\n    id: \"select.searchPlaceholder\",\n    defaultMessage: \"Search\",\n    description: \"Placeholder text. Use imperative\",\n  })"
+      },
+      "allSelectedMessage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "all-selected-message",
+        "reflect": false,
+        "defaultValue": "intl.formatMessage({\n    id: \"select.allSelected\",\n    defaultMessage: \"All selected\",\n    description: \"Text displayed when all options are selected\",\n  })"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isTabbing": {},
+      "isExpanded": {},
+      "announcement": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "wmSelectDidLoad",
+        "name": "wmSelectDidLoad",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
         }
-    }
-    renderOverflowCount() {
-        if (this.overflowCount > 0 && !this.allSelected) {
-            return (h("span", null, h("span", { class: "overflow-counter" }, "+", this.overflowCount)));
+      }, {
+        "method": "wmSelectBlurred",
+        "name": "wmSelectBlurred",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
         }
-    }
-    renderSearchField() {
-        return (h("div", { class: "search" }, h("div", { class: "searchfield-wrapper", ref: (el) => (this.searchFieldWrapperEl = el) }, h("div", { class: "icon" }), h("input", { ref: (el) => (this.searchFieldEl = el), class: "searchfield", role: "combobox", "aria-controls": "list", "aria-expanded": this.isExpanded ? "true" : "false", onKeyDown: (ev) => this.handleKeyDown(ev), onFocus: () => this.searchFieldWrapperEl.classList.add("focus"), onBlur: (ev) => this.handleSearchFieldBlur(ev), onInput: () => this.debouncedSearch(), placeholder: this.searchPlaceholder }))));
-    }
-    renderSearchFailedMessage() {
-        return h("div", { class: "search-results-message" }, this.noResultsFoundMessage);
-    }
-    renderSelectAllButton() {
-        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));
-    }
-    renderCloneOptions() {
-        return Array.from(this.el.children).map((option) => {
-            return (h("wm-option", { class: "clone", selected: option.selected }, option.textContent));
-        });
-    }
-    render() {
-        const buttonProps = {
-            id: "selectbtn",
-            ["disabled"]: this.isDisabled,
-            ["aria-controls"]: "list",
-            ["aria-labelledby"]: "label selectbtn",
-            ["aria-describedby"]: "wm-errors",
-            ["aria-expanded"]: this.isExpanded ? "true" : "false",
-            onClick: () => (this.isExpanded ? this.close() : this.open()),
-        };
-        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, 
-        // 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 ? (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 ${this.isTabbing ? "user-is-tabbing" : ""}`, 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
-                ? "overflowcontrol hassubinfo"
-                : "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)))));
-    }
-    static get is() { return "wm-select"; }
-    static get encapsulation() { return "shadow"; }
-    static get delegatesFocus() { return true; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["wm-select.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["wm-select.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "disabled",
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "maxHeight": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "max-height",
-                "reflect": false
-            },
-            "label": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "label",
-                "reflect": false
-            },
-            "labelPosition": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "\"top\" | \"left\" | \"none\"",
-                    "resolved": "\"left\" | \"none\" | \"top\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "label-position",
-                "reflect": false,
-                "defaultValue": "\"top\""
-            },
-            "requiredField": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "required-field",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "errorMessage": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "error-message",
-                "reflect": false,
-                "defaultValue": "\"\""
-            },
-            "multiple": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "multiple",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "search": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "search",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "selectAll": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "select-all",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "placeholder": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "placeholder",
-                "reflect": false,
-                "defaultValue": "intl.formatMessage({\n    id: \"select.multiPlaceholder\",\n    defaultMessage: \"Make a selection\",\n    description: \"Placeholder text. Use imperative\",\n  })"
-            },
-            "searchPlaceholder": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "search-placeholder",
-                "reflect": false,
-                "defaultValue": "intl.formatMessage({\n    id: \"select.searchPlaceholder\",\n    defaultMessage: \"Search\",\n    description: \"Placeholder text. Use imperative\",\n  })"
-            },
-            "allSelectedMessage": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "all-selected-message",
-                "reflect": false,
-                "defaultValue": "intl.formatMessage({\n    id: \"select.allSelected\",\n    defaultMessage: \"All selected\",\n    description: \"Text displayed when all options are selected\",\n  })"
+      }, {
+        "method": "wmSelectSearchChanged",
+        "name": "wmSelectSearchChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Object",
+          "resolved": "Object",
+          "references": {
+            "Object": {
+              "location": "global"
             }
-        };
-    }
-    static get states() {
-        return {
-            "isTabbing": {},
-            "isExpanded": {},
-            "announcement": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "wmSelectDidLoad",
-                "name": "wmSelectDidLoad",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "wmSelectBlurred",
-                "name": "wmSelectBlurred",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "wmSelectSearchChanged",
-                "name": "wmSelectSearchChanged",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "Object",
-                    "resolved": "Object",
-                    "references": {
-                        "Object": {
-                            "location": "global",
-                            "id": "global::Object"
-                        }
-                    }
-                }
-            }, {
-                "method": "wmSelectAllSelected",
-                "name": "wmSelectAllSelected",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }, {
-                "method": "wmSelectAllDeselected",
-                "name": "wmSelectAllDeselected",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "errorMessage",
-                "methodName": "exposeErrors"
-            }, {
-                "propName": "disabled",
-                "methodName": "handleDisabledChange"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "wmUserIsTabbing",
-                "method": "toggleTabbingOn",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "wmUserIsNotTabbing",
-                "method": "toggleTabbingOff",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "wmOptionSelected",
-                "method": "handleOptionSelection",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "intCloneClicked",
-                "method": "handleOptionCloneSelection",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "wmEnterKeyPressed",
-                "method": "handleChildEnter",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "wmKeyUpPressed",
-                "method": "handleChildUp",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "wmKeyDownPressed",
-                "method": "handleChildDown",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "wmHomeKeyPressed",
-                "method": "moveToFirstOption",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "wmEndKeyPressed",
-                "method": "moveToLastOption",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "wmEscKeyPressed",
-                "method": "closePopupOnEscape",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "wmOptionBlurred",
-                "method": "handleOptionBlur",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "click",
-                "method": "handleClick",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }, {
-                "name": "keydown",
-                "method": "handleKey",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "wmLetterPressed",
-                "method": "findAndFocusOption",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
+          }
+        }
+      }, {
+        "method": "wmSelectAllSelected",
+        "name": "wmSelectAllSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "wmSelectAllDeselected",
+        "name": "wmSelectAllDeselected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "errorMessage",
+        "methodName": "exposeErrors"
+      }, {
+        "propName": "disabled",
+        "methodName": "handleDisabledChange"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "wmUserIsTabbing",
+        "method": "toggleTabbingOn",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "wmUserIsNotTabbing",
+        "method": "toggleTabbingOff",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "wmOptionSelected",
+        "method": "handleOptionSelection",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "intCloneClicked",
+        "method": "handleOptionCloneSelection",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "wmEnterKeyPressed",
+        "method": "handleChildEnter",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "wmKeyUpPressed",
+        "method": "handleChildUp",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "wmKeyDownPressed",
+        "method": "handleChildDown",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "wmHomeKeyPressed",
+        "method": "moveToFirstOption",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "wmEndKeyPressed",
+        "method": "moveToLastOption",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "wmEscKeyPressed",
+        "method": "closePopupOnEscape",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "wmOptionBlurred",
+        "method": "handleOptionBlur",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "click",
+        "method": "handleClick",
+        "target": "document",
+        "capture": true,
+        "passive": false
+      }, {
+        "name": "keydown",
+        "method": "handleKey",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "wmLetterPressed",
+        "method": "findAndFocusOption",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }