@watermarkinsights/ripple 4.3.0 → 4.4.0-0

package/dist/cjs/wm-option_2.cjs.entry.js

@@ -2,741 +2,741 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fae02cd7.js');
-const functions = require('./functions-91da05e9.js');
-const intl = require('./intl-fa3bb4ae.js');
+const index = require('./index-f8ef86de.js');
+const functions = require('./functions-4208c444.js');
+const intl = require('./intl-3fafc6d1.js');
 
 const wmOptionCss = ":host(:not(:last-child)){border-bottom:2px solid;border-color:var(--wmcolor-select-option-border)}:host{display:block;cursor:pointer;position:relative;padding:1.25rem;background:var(--wmcolor-select-option-background);font-family:inherit;list-style:none;color:var(--wmcolor-select-option-text);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host:focus,:host.focus{outline:none;background:var(--wmcolor-select-option-background-focus)}:host.icon{color:var(--wmcolor-interactive)}:host .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.checkbox:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f131\";display:inline-block;margin-right:0.25rem;color:var(--wmcolor-interactive)}:host([aria-selected=true]){background:var(--wmcolor-select-option-background-selected);font-weight:500}:host([aria-selected=true]) .checkbox:before{content:\"\\f132\"}:host([aria-disabled=true]){font-style:italic;color:var(--wmcolor-select-option-text-disabled);cursor:default}:host([aria-disabled=true]) .checkbox:before{color:var(--wmcolor-select-option-text-disabled)}:host(.multi-option){background:unset}:host(.clone.last){border-bottom:12px solid;border-color:var(--wmcolor-select-option-border)}:host(.hassubinfo){display:-ms-flexbox;display:flex}:host(.hassubinfo) .option-wrapper{-ms-flex:1;flex:1}:host(.hassubinfo) .subinfo{-ms-flex:none;flex:none}:host(.hidden),:host(.filtered-out){display:none}.subinfo{font-style:italic}.option-wrapper{display:inline-block}::slotted{font-family:inherit}::slotted(i){font-size:0.875rem}::slotted(i):before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-block;margin-right:0.625rem;pointer-events:none}:host(:focus){outline:none;background:var(--wmcolor-select-option-background-hover)}:host(:hover){background:var(--wmcolor-select-option-background-hover);outline:none}";
 
 const Option = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.wmOptionSelected = index.createEvent(this, "wmOptionSelected", 7);
-    this.wmOptionDeselected = index.createEvent(this, "wmOptionDeselected", 7);
-    this.intCloneClicked = index.createEvent(this, "intCloneClicked", 7);
-    this.wmKeyUpPressed = index.createEvent(this, "wmKeyUpPressed", 7);
-    this.wmKeyDownPressed = index.createEvent(this, "wmKeyDownPressed", 7);
-    this.wmEscKeyPressed = index.createEvent(this, "wmEscKeyPressed", 7);
-    this.wmHomeKeyPressed = index.createEvent(this, "wmHomeKeyPressed", 7);
-    this.wmEndKeyPressed = index.createEvent(this, "wmEndKeyPressed", 7);
-    this.wmEnterKeyPressed = index.createEvent(this, "wmEnterKeyPressed", 7);
-    this.wmLetterPressed = index.createEvent(this, "wmLetterPressed", 7);
-    this.wmOptionBlurred = index.createEvent(this, "wmOptionBlurred", 7);
-    this.value = undefined;
-    this.subinfo = undefined;
-    this.disabled = false;
-    this.selected = false;
-    this.focused = false;
-    this.searchTerm = "";
-  }
-  get hostClasses() {
-    let classes = [];
-    if (this.subinfo) {
-      classes.push("hassubinfo");
-    }
-    if (this.parentSelectEl.multiple) {
-      classes.push("multi-option");
-    }
-    if (!this.el.textContent.toLowerCase().includes(this.searchTerm)) {
-      classes.push("filtered-out");
-    }
-    return classes.join(" ");
-  }
-  get parentSelectEl() {
-    var _a;
-    return ((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.nodeName) !== "WM-SELECT"
-      ? this.el.getRootNode().host
-      : this.el.parentElement;
-  }
-  handleKeydown(ev) {
-    switch (ev.key) {
-      case "ArrowUp":
-        ev.preventDefault();
-        this.wmKeyUpPressed.emit(this.el);
-        break;
-      case "ArrowDown":
-        ev.preventDefault();
-        this.wmKeyDownPressed.emit(this.el);
-        break;
-      case "Enter":
-        ev.preventDefault();
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.wmOptionSelected = index.createEvent(this, "wmOptionSelected", 7);
+        this.wmOptionDeselected = index.createEvent(this, "wmOptionDeselected", 7);
+        this.intCloneClicked = index.createEvent(this, "intCloneClicked", 7);
+        this.wmKeyUpPressed = index.createEvent(this, "wmKeyUpPressed", 7);
+        this.wmKeyDownPressed = index.createEvent(this, "wmKeyDownPressed", 7);
+        this.wmEscKeyPressed = index.createEvent(this, "wmEscKeyPressed", 7);
+        this.wmHomeKeyPressed = index.createEvent(this, "wmHomeKeyPressed", 7);
+        this.wmEndKeyPressed = index.createEvent(this, "wmEndKeyPressed", 7);
+        this.wmEnterKeyPressed = index.createEvent(this, "wmEnterKeyPressed", 7);
+        this.wmLetterPressed = index.createEvent(this, "wmLetterPressed", 7);
+        this.wmOptionBlurred = index.createEvent(this, "wmOptionBlurred", 7);
+        this.value = undefined;
+        this.subinfo = undefined;
+        this.disabled = false;
+        this.selected = false;
+        this.focused = false;
+        this.searchTerm = "";
+    }
+    get hostClasses() {
+        let classes = [];
+        if (this.subinfo) {
+            classes.push("hassubinfo");
+        }
+        if (this.parentSelectEl.multiple) {
+            classes.push("multi-option");
+        }
+        if (!this.el.textContent.toLowerCase().includes(this.searchTerm)) {
+            classes.push("filtered-out");
+        }
+        return classes.join(" ");
+    }
+    get parentSelectEl() {
+        var _a;
+        return ((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.nodeName) !== "WM-SELECT"
+            ? this.el.getRootNode().host
+            : this.el.parentElement;
+    }
+    handleKeydown(ev) {
+        switch (ev.key) {
+            case "ArrowUp":
+                ev.preventDefault();
+                this.wmKeyUpPressed.emit(this.el);
+                break;
+            case "ArrowDown":
+                ev.preventDefault();
+                this.wmKeyDownPressed.emit(this.el);
+                break;
+            case "Enter":
+                ev.preventDefault();
+                if (!this.disabled) {
+                    this.el.click();
+                    this.wmEnterKeyPressed.emit(this.el);
+                }
+                break;
+            case "Escape":
+                ev.preventDefault();
+                ev.stopPropagation(); // for instance if select is in a modal, esc should close the select but not the modal
+                this.wmEscKeyPressed.emit();
+                break;
+            case "Home":
+                ev.preventDefault();
+                this.wmHomeKeyPressed.emit();
+                break;
+            case "End":
+                ev.preventDefault();
+                this.wmEndKeyPressed.emit();
+                break;
+            default:
+                if (ev.key.length === 1) {
+                    ev.preventDefault();
+                    // emit for single characters ("a","l","5", etc), avoid others ("shift", "control", etc)
+                    this.wmLetterPressed.emit({ letter: ev.key, optionEl: this.el });
+                }
+        }
+    }
+    handleSelection() {
+        // using ev.detail because ev.target returns the wm-select for clone options
         if (!this.disabled) {
-          this.el.click();
-          this.wmEnterKeyPressed.emit(this.el);
-        }
-        break;
-      case "Escape":
-        ev.preventDefault();
-        ev.stopPropagation(); // for instance if select is in a modal, esc should close the select but not the modal
-        this.wmEscKeyPressed.emit();
-        break;
-      case "Home":
-        ev.preventDefault();
-        this.wmHomeKeyPressed.emit();
-        break;
-      case "End":
-        ev.preventDefault();
-        this.wmEndKeyPressed.emit();
-        break;
-      default:
-        if (ev.key.length === 1) {
-          ev.preventDefault();
-          // emit for single characters ("a","l","5", etc), avoid others ("shift", "control", etc)
-          this.wmLetterPressed.emit({ letter: ev.key, optionEl: this.el });
-        }
-    }
-  }
-  handleSelection() {
-    // using ev.detail because ev.target returns the wm-select for clone options
-    if (!this.disabled) {
-      if (this.el.classList.contains("clone")) {
-        this.intCloneClicked.emit(this.el); // used to then emit wmOptionSelected from the "real" wm-option
-      }
-      else {
-        this.selected
-          ? this.wmOptionDeselected.emit(this.el)
-          : this.wmOptionSelected.emit(this.el);
-      }
-    }
-  }
-  handleBlur(ev) {
-    this.wmOptionBlurred.emit({ relatedTarget: ev.relatedTarget });
-  }
-  syncAriaSelected() {
-    // this function only keeps the aria-selected attr in sync with the selected prop
-    // all the logic for selecting / deselecting happens in the parent wm-select
-    this.selected ? this.el.setAttribute("aria-selected", "true") : this.el.setAttribute("aria-selected", "false");
-  }
-  syncAriaDisabled() {
-    this.disabled ? this.el.setAttribute("aria-disabled", "true") : this.el.removeAttribute("aria-disabled");
-  }
-  updateDisabledOnClick() {
-    if (this.disabled && this.el.onclick) {
-      this.onClickFunc = this.el.onclick;
-      this.el.onclick = null;
-    }
-    else if (!this.disabled && this.onClickFunc) {
-      this.el.onclick = this.onClickFunc;
-    }
-  }
-  handleSearch(ev) {
-    // filter is case-insensitive, so
-    this.searchTerm = ev.detail.searchTerm.toLowerCase();
-    if (this.searchTerm) {
-      const regexp = new RegExp(`${this.searchTerm}`, "gi");
-      const boldedText = this.el.textContent.replace(regexp, (match) => `<strong>${match}</strong>`);
-      // for voiceover, text splitting is read as separate phrases. i.e. hel<b>lo</b> will be read as "hel lo"
-      // aria-hidden and sr-only is used to circumvent this
-      this.textEl.innerHTML = boldedText;
-    }
-    else {
-      this.textEl.innerHTML = this.el.textContent;
-    }
-  }
-  componentWillLoad() {
-    this.syncAriaSelected();
-    this.syncAriaDisabled();
-    this.updateDisabledOnClick();
-    this.parentSelectEl.addEventListener("wmSelectSearchChanged", (ev) => this.handleSearch(ev));
-  }
-  render() {
-    return (index.h(index.Host, { role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, index.h("div", { class: `option-wrapper ${this.parentSelectEl.multiple ? "checkbox" : ""}` }, index.h("span", { "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), index.h("span", { class: "sr-only" }, this.el.textContent)), index.h("div", { class: "subinfo" }, this.subinfo)));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "selected": ["syncAriaSelected"],
-    "disabled": ["syncAriaDisabled", "updateDisabledOnClick"]
-  }; }
+            if (this.el.classList.contains("clone")) {
+                this.intCloneClicked.emit(this.el); // used to then emit wmOptionSelected from the "real" wm-option
+            }
+            else {
+                this.selected
+                    ? this.wmOptionDeselected.emit(this.el)
+                    : this.wmOptionSelected.emit(this.el);
+            }
+        }
+    }
+    handleBlur(ev) {
+        this.wmOptionBlurred.emit({ relatedTarget: ev.relatedTarget });
+    }
+    syncAriaSelected() {
+        // this function only keeps the aria-selected attr in sync with the selected prop
+        // all the logic for selecting / deselecting happens in the parent wm-select
+        this.selected ? this.el.setAttribute("aria-selected", "true") : this.el.setAttribute("aria-selected", "false");
+    }
+    syncAriaDisabled() {
+        this.disabled ? this.el.setAttribute("aria-disabled", "true") : this.el.removeAttribute("aria-disabled");
+    }
+    updateDisabledOnClick() {
+        if (this.disabled && this.el.onclick) {
+            this.onClickFunc = this.el.onclick;
+            this.el.onclick = null;
+        }
+        else if (!this.disabled && this.onClickFunc) {
+            this.el.onclick = this.onClickFunc;
+        }
+    }
+    handleSearch(ev) {
+        // filter is case-insensitive, so
+        this.searchTerm = ev.detail.searchTerm.toLowerCase();
+        if (this.searchTerm) {
+            const regexp = new RegExp(`${this.searchTerm}`, "gi");
+            const boldedText = this.el.textContent.replace(regexp, (match) => `<strong>${match}</strong>`);
+            // for voiceover, text splitting is read as separate phrases. i.e. hel<b>lo</b> will be read as "hel lo"
+            // aria-hidden and sr-only is used to circumvent this
+            this.textEl.innerHTML = boldedText;
+        }
+        else {
+            this.textEl.innerHTML = this.el.textContent;
+        }
+    }
+    componentWillLoad() {
+        this.syncAriaSelected();
+        this.syncAriaDisabled();
+        this.updateDisabledOnClick();
+        this.parentSelectEl.addEventListener("wmSelectSearchChanged", (ev) => this.handleSearch(ev));
+    }
+    render() {
+        return (index.h(index.Host, { role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, index.h("div", { class: `option-wrapper ${this.parentSelectEl.multiple ? "checkbox" : ""}` }, index.h("span", { "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), index.h("span", { class: "sr-only" }, this.el.textContent)), index.h("div", { class: "subinfo" }, this.subinfo)));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "selected": ["syncAriaSelected"],
+        "disabled": ["syncAriaDisabled", "updateDisabledOnClick"]
+    }; }
 };
 Option.style = wmOptionCss;
 
 const wmSelectCss = ":host{--wmcolor-select-background:var(--wmcolor-background);--wmcolor-select-border:var(--wmcolor-input-border);--wmcolor-select-option-background-focus:var(--wmcolor-option-background-focus);--wmcolor-select-option-background-hover:var(--wmcolor-option-background-hover);--wmcolor-select-option-background-selected:var(--wmcolor-option-background-selected);--wmcolor-select-option-background:var(--wmcolor-option-background);--wmcolor-select-option-border:var(--wmcolor-option-border);--wmcolor-select-option-text-disabled:var(--wmcolor-option-text-disabled);--wmcolor-select-option-text:var(--wmcolor-option-text);--wmcolor-select-search-border:var(--wmcolor-input-border);--wmcolor-select-search-icon:var(--wmcolor-icon-accent);--wmcolor-select-searchresults-text:var(--wmcolor-text);--wmcolor-select-selectall-background:var(--wmcolor-select-option-background);--wmcolor-select-selectall-border:var(--wmcolor-select-option-border);--wmcolor-select-selectall-text:var(--wmcolor-interactive);--wmcolor-select-text:var(--wmcolor-interactive);position:relative;display:block;-webkit-box-sizing:border-box;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;-webkit-clip-path:inset(50%) !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;-ms-flex-direction:column;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:var(--wmcolor-text-required)}.wrapper.label-left{-ms-flex-direction:row;flex-direction:row}.wrapper.label-left .label-wrapper{line-height:2.5rem}.wrapper.label-left .label-wrapper .label{display:-ms-flexbox;display:flex;-ms-flex-align:center;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;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.wrapper.invalid .label{color:var(--wmcolor-text-error)}.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:\"\\f026\";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 .button-wrapper{position:relative;-ms-flex:1;flex:1;font-size:1.125rem;color:var(--wmcolor-select-text);min-width:8.75rem}.wrapper .button-wrapper .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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap;background:var(--wmcolor-select-background);width:100%;border:solid 1px;border-color:var(--wmcolor-select-border);padding:0 1.875rem 0 0.9375rem;cursor:pointer;height:2.5rem;line-height:normal;font-family:inherit;color:var(--wmcolor-select-text);font-weight:400;font-size:0.875rem;text-transform:none;text-align:left}@media only screen and (max-width: 768px){.wrapper .button-wrapper .displayedoption{height:2.75rem}}.wrapper .button-wrapper .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:\"\\f140\";position:absolute;right:0.5625rem;pointer-events:none;font-size:1.12rem}.wrapper .button-wrapper .displayedoption:hover:not(:disabled):not(.-disabled):not(.-raised){background:var(--wmcolor-select-background);text-decoration:none}.wrapper .button-wrapper .displayedoption:active{-ms-transform:scale(1, 1) !important;-webkit-transform:scale(1, 1) !important;transform:scale(1, 1) !important}.wrapper .button-wrapper .displayedoption:focus{outline:none}.wrapper .button-wrapper .displayedoption::-moz-focus-inner{border:0}.wrapper .button-wrapper .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 var(--wmcolor-interactive-focus);-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 var(--wmcolor-interactive-focus);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 var(--wmcolor-interactive-focus)}.wrapper .button-wrapper .displayedoption.user-is-tabbing:focus::-moz-focus-inner{border:0}.wrapper .button-wrapper .displayedoption .overflowcontrol{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-ms-flex:1;flex:1}.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo{display:-ms-flexbox;display:flex}.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo .button-text{-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;min-width:0}.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo .subinfo{-ms-flex:none;flex:none;font-style:italic}.wrapper .button-wrapper .displayedoption .overflow-counter{font-weight:bold;margin-left:0.5rem}.wrapper .button-wrapper>.displayedoption[disabled]{color:#6b6b6b;border-color:#8a8a8a;background:#f0f0f0;cursor:default}.wrapper .button-wrapper>.dropdown{-webkit-overflow-scrolling:touch;-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;-webkit-transition:-webkit-transform 0.25s ease;transition:-webkit-transform 0.25s ease;transition:transform 0.25s ease;transition:transform 0.25s ease, -webkit-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:var(--wmcolor-select-option-background);z-index:100;width:100%;font-size:0.875rem}.wrapper .button-wrapper>.dropdown.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 .button-wrapper>.dropdown.hidden{visibility:hidden}.wrapper .button-wrapper>.dropdown.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}.wrapper.invalid .button-wrapper .displayedoption{-webkit-box-shadow:0 0 0 1px var(--wmcolor-input-border-error);-moz-box-shadow:0 0 0 1px var(--wmcolor-input-border-error);box-shadow:0 0 0 1px var(--wmcolor-input-border-error);border-color:var(--wmcolor-input-border-error)}.wrapper .error-message{display:block;font-style:italic;color:var(--wmcolor-text-error);font-size:0.875rem;margin-top:0.25rem;margin-bottom:0.25rem;top:100%;left:0}.options-wrapper{max-height:12.5rem;overflow:auto}.select-all{width:100%;cursor:pointer;padding:1.25rem;border:none;margin:0;border-bottom:2px solid;border-color:var(--wmcolor-select-selectall-border);background:var(--wmcolor-select-selectall-background);font-family:inherit;font-size:inherit;text-align:left;text-align:start;font-weight:500;color:var(--wmcolor-select-selectall-text);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.select-all:hover,.select-all:focus{outline:none;background:#f4f4f4}.search{-webkit-box-sizing:border-box;box-sizing:border-box;border-bottom:2px solid;border-color:var(--wmcolor-select-option-border);padding:1.25rem}.search .searchfield-wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:2.75rem;width:100%;padding:0 0.75rem;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid;border-color:var(--wmcolor-select-search-border)}.search .searchfield-wrapper:focus,.search .searchfield-wrapper.focus{-webkit-box-shadow:0 0 0 1px var(--wmcolor-input-border-focus);-moz-box-shadow:0 0 0 1px var(--wmcolor-input-border-focus);box-shadow:0 0 0 1px var(--wmcolor-input-border-focus);outline:none;border-color:var(--wmcolor-input-border-focus)}.search .searchfield{width:100%;border:none;outline:none;font-family:inherit;font-size:0.875rem;margin-left:0.25rem}.search .icon: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:\"\\f349\";color:var(--wmcolor-select-search-icon);font-size:1.12rem}.search-results-message{padding:1.25rem;color:var(--wmcolor-select-searchresults-text);font-size:0.875rem;font-style:italic}.rtl>.dropdown{-ms-transform-origin:left top;-webkit-transform-origin:left top;-moz-transform-origin:left top;transform-origin:left top;left:0;right:auto}.rtl>.dropdown .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.wmSelectBlurred = index.createEvent(this, "wmSelectBlurred", 7);
-    this.wmSelectSearchChanged = index.createEvent(this, "wmSelectSearchChanged", 7);
-    this.wmSelectAllSelected = index.createEvent(this, "wmSelectAllSelected", 7);
-    this.wmSelectAllDeselected = index.createEvent(this, "wmSelectAllDeselected", 7);
-    this.selectAllMessage = functions.intl.formatMessage({
-      id: "select.selectAll",
-      defaultMessage: "Select All",
-    });
-    this.deselectAllMessage = functions.intl.formatMessage({
-      id: "select.deselectAll",
-      defaultMessage: "Deselect All",
-    });
-    this.allOptionsSelectedMessage = functions.intl.formatMessage({
-      id: "select.allOptionsSelected",
-      defaultMessage: "All options selected",
-    });
-    this.allOptionsDeselectedMessage = functions.intl.formatMessage({
-      id: "select.allOptionsDeselected",
-      defaultMessage: "All options deselected",
-    });
-    this.keysSoFar = "";
-    this.searchIndex = 0;
-    this.openUp = false;
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.wmSelectDidLoad = index.createEvent(this, "wmSelectDidLoad", 7);
+        this.wmSelectBlurred = index.createEvent(this, "wmSelectBlurred", 7);
+        this.wmSelectSearchChanged = index.createEvent(this, "wmSelectSearchChanged", 7);
+        this.wmSelectAllSelected = index.createEvent(this, "wmSelectAllSelected", 7);
+        this.wmSelectAllDeselected = index.createEvent(this, "wmSelectAllDeselected", 7);
+        this.selectAllMessage = functions.intl.formatMessage({
+            id: "select.selectAll",
+            defaultMessage: "Select All",
+        });
+        this.deselectAllMessage = functions.intl.formatMessage({
+            id: "select.deselectAll",
+            defaultMessage: "Deselect All",
+        });
+        this.allOptionsSelectedMessage = functions.intl.formatMessage({
+            id: "select.allOptionsSelected",
+            defaultMessage: "All options selected",
+        });
+        this.allOptionsDeselectedMessage = functions.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 = functions.debounce(() => {
+            this.keysSoFar = "";
+        }, 500);
+        this.debouncedSearch = functions.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 = functions.intl.formatMessage({
+            id: "select.multiPlaceholder",
+            defaultMessage: "Make a selection",
+            description: "Placeholder text. Use imperative",
+        });
+        this.searchPlaceholder = functions.intl.formatMessage({
+            id: "select.searchPlaceholder",
+            defaultMessage: "Search",
+            description: "Placeholder text. Use imperative",
+        });
+        this.allSelectedMessage = functions.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 functions.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 === "";
+    }
     //////////////////////////////////////
-    // for multiselect button text
-    this.overflowCount = 0;
-    this.displayedOptions = [];
-    this.debouncedClearKeysSoFar = functions.debounce(() => {
-      this.keysSoFar = "";
-    }, 500);
-    this.debouncedSearch = functions.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 = functions.intl.formatMessage({
-      id: "select.multiPlaceholder",
-      defaultMessage: "Make a selection",
-      description: "Placeholder text. Use imperative",
-    });
-    this.searchPlaceholder = functions.intl.formatMessage({
-      id: "select.searchPlaceholder",
-      defaultMessage: "Search",
-      description: "Placeholder text. Use imperative",
-    });
-    this.allSelectedMessage = functions.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 functions.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 functions.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 functions.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");
-    }
-    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
-      this.toggleTabbingOn();
-    }
-    functions.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();
-    index.forceUpdate(this.el);
-  }
-  componentDidLoad() {
-    this.wmSelectDidLoad.emit();
-    this.dropdownEl.classList.add("hidden");
-    index.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");
+    get resultsFoundMessage() {
+        return functions.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 functions.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();
         }
-        else {
-          option.classList.remove("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 = functions.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;
+    }
+    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");
+        }
+        if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+            this.toggleTabbingOn();
+        }
+        functions.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();
+        index.forceUpdate(this.el);
+    }
+    componentDidLoad() {
+        this.wmSelectDidLoad.emit();
+        this.dropdownEl.classList.add("hidden");
+        index.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");
+                }
+            });
+        }
+    }
+    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 = functions.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);
+        }
+    }
+    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 {
-              this.moveDown(this.visibleOptionEls.filter((x) => x.selected).slice(-1)[0]);
+                option.classList.remove("hidden");
+                cloneOption.classList.add("hidden");
             }
-            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]);
+        });
+    }
+    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;
-          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.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 if (this.selectedOptions.length > 0) {
-              this.focusOption(this.visibleOptionEls.filter((x) => x.selected)[0]);
+            if (nextMatch) {
+                // findMatchInRange still might have returned null, only focus if match found
+                this.focusOption(nextMatch);
             }
-            else {
-              this.focusOption(this.visibleOptionEls[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;
             }
-            break;
+        });
+        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 = functions.generateId();
+        this.errorContainer.id = `wm-errors-${newId}`;
+        this.buttonEl.setAttribute("aria-describedby", `wm-errors-${newId}`);
+    }
+    handleDisabledChange() {
+        functions.handleDisabledAttribute(this.el, this.isDisabled);
+    }
+    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(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();
         }
-      });
     }
-  }
-  close(returnFocus = true) {
-    if (this.isExpanded) {
-      this.isExpanded = false;
-      this.allOptionEls.map((i) => (i.focused = false));
-      window.setTimeout(() => {
-        this.dropdownEl.classList.add("hidden");
+    // 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;
+        }
+    }
+    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.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);
-    }
-  }
-  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 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 index.h("span", null, this.placeholder);
+        }
+        else if (this.multiple && this.allSelected && this.overflowCount > 0) {
+            return this.allSelectedMessage;
+        }
+        else {
+            return this.displayedOptions.map((x, idx) => (index.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 index.h("span", { class: "subinfo" }, this.selectedOptions[0].subinfo);
+        }
+    }
+    renderOverflowCount() {
+        if (this.overflowCount > 0 && !this.allSelected) {
+            return (index.h("span", null, index.h("span", { class: "overflow-counter" }, "+", this.overflowCount)));
+        }
+    }
+    renderSearchField() {
+        return (index.h("div", { class: "search" }, index.h("div", { class: "searchfield-wrapper", ref: (el) => (this.searchFieldWrapperEl = el) }, index.h("div", { class: "icon" }), index.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 index.h("div", { class: "search-results-message" }, this.noResultsFoundMessage);
+    }
+    renderSelectAllButton() {
+        return (index.h("button", { ref: (el) => (this.selectAllEl = el), class: "select-all", onClick: () => this.handleSelectAllClick(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: "-1" }, this.allSelected ? this.deselectAllMessage : this.selectAllMessage));
+    }
+    renderCloneOptions() {
+        return Array.from(this.el.children).map((option) => {
+            return (index.h("wm-option", { class: "clone", selected: option.selected }, option.textContent));
         });
-      }
-      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 = functions.generateId();
-    this.errorContainer.id = `wm-errors-${newId}`;
-    this.buttonEl.setAttribute("aria-describedby", `wm-errors-${newId}`);
-  }
-  handleDisabledChange() {
-    functions.handleDisabledAttribute(this.el, this.isDisabled);
-  }
-  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(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;
-    }
-  }
-  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 index.h("span", null, this.placeholder);
-    }
-    else if (this.multiple && this.allSelected && this.overflowCount > 0) {
-      return this.allSelectedMessage;
-    }
-    else {
-      return this.displayedOptions.map((x, idx) => (index.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 index.h("span", { class: "subinfo" }, this.selectedOptions[0].subinfo);
-    }
-  }
-  renderOverflowCount() {
-    if (this.overflowCount > 0 && !this.allSelected) {
-      return (index.h("span", null, index.h("span", { class: "overflow-counter" }, "+", this.overflowCount)));
-    }
-  }
-  renderSearchField() {
-    return (index.h("div", { class: "search" }, index.h("div", { class: "searchfield-wrapper", ref: (el) => (this.searchFieldWrapperEl = el) }, index.h("div", { class: "icon" }), index.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 index.h("div", { class: "search-results-message" }, this.noResultsFoundMessage);
-  }
-  renderSelectAllButton() {
-    return (index.h("button", { ref: (el) => (this.selectAllEl = el), class: "select-all", onClick: () => this.handleSelectAllClick(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: "-1" }, this.allSelected ? this.deselectAllMessage : this.selectAllMessage));
-  }
-  renderCloneOptions() {
-    return Array.from(this.el.children).map((option) => {
-      return (index.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 (index.h(index.Host, { onBlur: (ev) => this.handleComponentBlur(ev) }, index.h("div", { class: `wrapper ${functions.getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { class: "label-wrapper" }, index.h("label", { class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
-    // 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" }, intl.globalMessages.requiredField), index.h("span", { "aria-hidden": "true" }, "*"))) : (""))), index.h("div", { class: "button-wrapper" }, index.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() }), index.h("span", { class: this.selectedOptions.length > 0 && this.selectedOptions.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: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton(), index.h("div", { id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el) }, this.search && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), index.h("slot", null))), this.renderErrorContainer(), index.h("div", { id: "announcement", "aria-live": "polite", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
-  }
-  static get delegatesFocus() { return true; }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "errorMessage": ["exposeErrors"],
-    "disabled": ["handleDisabledChange"]
-  }; }
+    }
+    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 (index.h(index.Host, { onBlur: (ev) => this.handleComponentBlur(ev) }, index.h("div", { class: `wrapper ${functions.getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { class: "label-wrapper" }, index.h("label", { class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
+        // 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" }, intl.globalMessages.requiredField), index.h("span", { "aria-hidden": "true" }, "*"))) : (""))), index.h("div", { class: "button-wrapper" }, index.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() }), index.h("span", { class: this.selectedOptions.length > 0 && this.selectedOptions.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: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton(), index.h("div", { id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el) }, this.search && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), index.h("slot", null))), this.renderErrorContainer(), index.h("div", { id: "announcement", "aria-live": "polite", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+    }
+    static get delegatesFocus() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "errorMessage": ["exposeErrors"],
+        "disabled": ["handleDisabledChange"]
+    }; }
 };
 Select.style = wmSelectCss;