@watermarkinsights/ripple 3.5.0-3 → 3.5.1

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

@@ -1,717 +1,718 @@
-import { h, Component, Element, Event, Listen, Prop, State, Watch, Host } from "@stencil/core";
-import { forceUpdate } from "@stencil/core";
-import { generateId, getTextDir, shouldOpenUp, intl } from "../../global/functions";
-export class Select {
-  constructor() {
-    this.disabled = false;
-    this.invalid = false;
-    this.labelPosition = "top";
-    this.requiredField = false;
-    this.errorMessage = "";
-    this.multiple = false;
-    this.placeholder = intl.formatMessage({
-      id: "select.multiPlaceholder",
-      defaultMessage: "Make a selection",
-    });
-    this.allSelectedMessage = intl.formatMessage({
-      id: "select.allSelected",
-      defaultMessage: "All selected",
-    });
-    this.requiredMessage = intl.formatMessage({
-      id: "global.requiredField",
-      defaultMessage: "required field",
-    });
-    this.isTabbing = false;
-    this.isExpanded = false;
-    this.keysSoFar = "";
-    this.searchIndex = 0;
-    this.keyClear = null;
-    this.openUp = false;
-    // for multiselect button text
-    this.overflowCount = 0;
-    this.displayedItems = [];
-    this.allSelected = false;
-  }
-  get childItems() {
-    return Array.from(this.el.querySelectorAll("wm-option"));
-  }
-  get selectedItems() {
-    return Array.from(this.el.querySelectorAll("wm-option")).filter((x) => x.selected);
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  handleOptionSelection(ev) {
-    if (!this.multiple) {
-      // ensure only one option is selected at a time
-      this.childItems
-        // remove selected on any other option
-        .filter((option) => option != ev.target && !!option.selected)
-        .map((option) => (option.selected = false));
-    }
-    this.focusItem(ev.target);
-    this.selectItem(ev.target);
-    if (!this.multiple) {
-      this.close();
-    }
-  }
-  handeChildEnter() {
-    // only occurs for multiselects. handle the click, then close
-    this.close();
-  }
-  handleChildUp(ev) {
-    this.moveUp(ev.target);
-  }
-  handleChildDown(ev) {
-    this.moveDown(ev.target);
-  }
-  moveToFirstItem() {
-    this.focusItem(this.childItems[0]);
-  }
-  moveToLastItem() {
-    this.focusItem(this.childItems[this.childItems.length - 1]);
-  }
-  handleTabKey() {
-    this.close(false);
-  }
-  closePopupOnEscape() {
-    this.close();
-  }
-  handleOptionBlur(ev) {
-    const toElOrChild = ev.detail.relatedTarget === this.el || this.el.contains(ev.detail.relatedTarget);
-    // 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 (!toElOrChild) {
-      const event = new CustomEvent("blur");
-      // @ts-ignore
-      event.relatedTarget = ev.detail.relatedTarget;
-      this.el.dispatchEvent(event);
-    }
-  }
-  handleClick(ev) {
-    const isElOrChild = ev.target === this.el || this.el.contains(ev.target);
-    if (!isElOrChild && this.isExpanded) {
-      this.close();
-    }
-  }
-  handleButtonBlur(ev) {
-    const toElOrChild = ev.relatedTarget === this.el || this.el.contains(ev.relatedTarget);
-    if (toElOrChild) {
-      // do not emit a blur event when opening the dropdown and focusing the Options
-      ev.stopPropagation();
-    }
-  }
-  handleKey(ev) {
-    switch (ev.keyCode) {
-      // Arrow down
-      case 40:
-        if (this.isExpanded === false) {
-          ev.preventDefault();
-          this.open("next");
-        }
-        break;
-      // Arrow up
-      case 38:
-        if (this.isExpanded === false) {
-          ev.preventDefault();
-          this.open("previous");
-        }
-        break;
-    }
-  }
-  componentWillLoad() {
-    if (!this.label) {
-      console.error("For accessibility purposes, this component requires a label (even if `label-position` is set to `none`).");
-    }
-    this.el.focus = function () {
-      if (!this.disabled) {
-        this.shadowRoot.querySelector("button").focus();
-      }
-    };
-    this.uid = this.el.id ? this.el.id : generateId();
-    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
-      this.toggleTabbingOn();
-    }
-  }
-  componentDidLoad() {
-    this.wmSelectDidLoad.emit();
-    if (!this.childItems.length) {
-      throw new Error("wm-select should have wm-option elements as children.");
-    }
-    if (this.multiple && this.childItems.filter((x) => x.subinfo).length > 0) {
-      throw new Error("wm-select with the multiple prop cannot have subinfo options");
-    }
-    if (this.multiple && !this.placeholder) {
-      throw new Error("wm-select with the multiple prop needs to also use the placeholder prop.");
-    }
-    // set initial selections / button text
-    if (this.selectedItems.length > 0) {
-      this.selectedItems.forEach((x) => this.displayedItems.push(x));
-      this.setButtonText();
-      // single Select only, pre-select if no default option from dev
-    }
-    else if (!this.multiple) {
-      this.selectItem(this.childItems[0]);
-    }
-    this.optionsEl.classList.add("hidden");
-    forceUpdate(this.el);
-    // Dev can overwrite the max-height rule set in the Sass file
-    if (this.maxHeight) {
-      this.optionsEl.style.maxHeight = this.maxHeight;
-    }
-  }
-  moveUp(el) {
-    const prevEl = el.previousElementSibling;
-    if (prevEl) {
-      // scroll option to top of dropdown if partially obscured / out of view
-      if (prevEl.getBoundingClientRect().top < this.optionsEl.getBoundingClientRect().top) {
-        this.optionsEl.scrollTop =
-          prevEl.getBoundingClientRect().top - this.optionsEl.getBoundingClientRect().top + this.optionsEl.scrollTop;
-      }
-      this.focusItem(prevEl);
-    }
-    else {
-      this.focusItem(this.childItems[this.childItems.length - 1]);
-    }
-  }
-  moveDown(el) {
-    const nextEl = el.nextElementSibling;
-    if (nextEl && nextEl.tagName !== "INPUT") {
-      // scroll option to bottom of dropdown if partially obscured / out of view
-      if (nextEl.getBoundingClientRect().bottom > this.optionsEl.getBoundingClientRect().bottom) {
-        this.optionsEl.scrollTop =
-          nextEl.getBoundingClientRect().bottom -
-            this.optionsEl.getBoundingClientRect().top +
-            this.optionsEl.scrollTop -
-            this.optionsEl.offsetHeight;
-      }
-      this.focusItem(nextEl);
-    }
-    else {
-      this.focusItem(this.childItems[0]);
-    }
-  }
-  open(itemToSelect) {
-    if (!this.disabled) {
-      const elHeight = this.el.clientHeight;
-      const buttonHeight = this.buttonEl.clientHeight;
-      this.openUp = shouldOpenUp(this.el, this.optionsEl, 
-      // when opening up, dropdown covers both label and button
-      elHeight, 
-      // when opening down, dropdown covers only the button
-      buttonHeight);
-      this.isExpanded = true;
-      this.optionsEl.classList.remove("hidden");
-      window.requestAnimationFrame(() => {
-        if (this.selectedItems.length > 0) {
-          if (itemToSelect === "next") {
-            this.moveDown(this.selectedItems[this.selectedItems.length - 1]);
-          }
-          else if (itemToSelect === "previous") {
-            this.moveUp(this.selectedItems[0]);
-          }
-          else {
-            this.focusItem(this.selectedItems[0]);
-          }
-        }
-        else {
-          this.focusItem(this.childItems[0]);
-        }
-      });
-    }
-  }
-  close(returnFocus = true) {
-    this.isExpanded = false;
-    this.childItems.map((i) => (i.focused = false));
-    window.setTimeout(() => {
-      this.optionsEl.classList.add("hidden");
-      // Returns focus to button after popup closes (no need if user is tabbing)
-      // Delay is necessary for screenreader to get new expanded state before focus
-      // window.requestAnimationFrame is probably enough, but since we are already using setTimeout it may as well be here
-      // also UX wise, it makes sense for the button to only be focused after the animation is complete
-      if (returnFocus) {
-        this.el.focus();
-      }
-    }, 150);
-  }
-  focusItem(item) {
-    this.childItems.forEach((i) => (i.focused = i === item));
-  }
-  selectItem(item) {
-    if (this.multiple) {
-      item.selected = !item.selected;
-    }
-    else {
-      this.childItems.forEach((i) => (i.selected = i === item));
-    }
-    this.setButtonText();
-  }
-  findAndFocusItem(ev) {
-    const character = ev.detail.toUpperCase();
-    if (!this.keysSoFar) {
-      for (var i = 0; i < this.childItems.length; i++) {
-        if (this.childItems[i].focused) {
-          this.searchIndex = i;
-        }
-      }
-    }
-    this.keysSoFar += character;
-    this.clearKeysSoFarAfterDelay();
-    var nextMatch = this.findMatchInRange(this.childItems, this.searchIndex + 1, this.childItems.length);
-    if (!nextMatch) {
-      nextMatch = this.findMatchInRange(this.childItems, 0, this.searchIndex);
-    }
-    if (nextMatch) {
-      this.focusItem(nextMatch);
-    }
-  }
-  clearKeysSoFarAfterDelay() {
-    if (this.keyClear) {
-      window.clearTimeout(this.keyClear);
-      this.keyClear = null;
-    }
-    this.keyClear = window.setTimeout(function () {
-      this.keysSoFar = "";
-      this.keyClear = null;
-    }.bind(this), 500);
-  }
-  findMatchInRange(list, startIndex, endIndex) {
-    // Find the first item starting with the keysSoFar substring, searching in
-    // the specified range of items
-    for (var n = startIndex; n < endIndex; n++) {
-      var label = list[n].textContent;
-      if (label && label.toUpperCase().indexOf(this.keysSoFar) === 0) {
-        return list[n];
-      }
-    }
-    return null;
-  }
-  exposeErrors() {
-    // When the error changes, a new id is set for the error container and the button's aria-describedby attribute is updated accordingly. This is to make sure the screen reader announces teh updated errors in Firefox. See this longstanding bug: https://bugzilla.mozilla.org/show_bug.cgi?id=493683
-    const newId = generateId();
-    this.errorContainer.id = `wm-errors-${newId}`;
-    this.buttonEl.setAttribute("aria-describedby", `wm-errors-${newId}`);
-  }
-  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() {
-    if (!this.isExpanded) {
-      this.wmSelectBlurred.emit();
-      this.wmComponentBlurred.emit(); // deprecated
-    }
-  }
-  setButtonText() {
-    this.displayedItems = this.childItems.filter((x) => x.selected);
-    this.allSelected = this.displayedItems.length === this.childItems.length;
-    // handle overflow + counter for multiselect
-    if (this.multiple) {
-      // this is a fixed measurement accounting for the max width of a 3 character overflow counter
-      const overflowCounterWidth = 38;
-      const computedStyle = window.getComputedStyle(this.buttonEl);
-      // there seems to be no quick way to get an elements width without padding, except for subtracting padding manually
-      const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
-      const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
-      const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
-      let optionsWidths = this.displayedItems.map((x) => x.shadowRoot.querySelector(".option-wrapper").clientWidth);
-      let optionsTotalWidth = optionsWidths.reduce((acc, x) => acc + x, 0);
-      this.overflowCount = 0;
-      while (optionsTotalWidth > availableSpace && this.displayedItems.length > 1) {
-        this.overflowCount++;
-        optionsTotalWidth -= optionsWidths[optionsWidths.length - 1];
-        optionsWidths.pop();
-        this.displayedItems.pop();
-      }
-    }
-  }
-  renderButtonText() {
-    if (this.multiple && this.displayedItems.length < 1) {
-      return h("span", null, this.placeholder);
-    }
-    else if (this.multiple && this.allSelected && this.overflowCount > 0) {
-      return this.allSelectedMessage;
-    }
-    else {
-      return this.displayedItems.map((x, idx) => (h("span", null,
-        idx > 0 ? ", " : "",
-        x.textContent)));
-    }
-  }
-  renderSubinfo() {
-    // multiselects cannot have subinfo for options
-    if (!this.multiple && this.selectedItems.length > 0 && this.selectedItems[0].subinfo) {
-      return h("span", { class: "subinfo" }, this.selectedItems[0].subinfo);
-    }
-  }
-  renderOverflowCount() {
-    if (this.overflowCount > 0 && !this.allSelected) {
-      return (h("span", null,
-        h("span", { class: "overflow-counter" },
-          "+",
-          this.overflowCount)));
-    }
-  }
-  render() {
-    const buttonProps = {
-      id: `selectbtn-${this.uid}`,
-      ["disabled"]: this.disabled,
-      ["aria-controls"]: `list-${this.uid}`,
-      ["aria-labelledby"]: `label-${this.uid} selectbtn-${this.uid}`,
-      ["aria-describedby"]: "wm-errors",
-      ["aria-expanded"]: this.isExpanded ? "true" : "false",
-      onClick: () => (this.isExpanded ? this.close() : this.open()),
-      onBlur: () => this.handleComponentBlur(),
-    };
-    return (h(Host, { onBlur: () => this.close(false) },
-      h("div", { class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.invalid || this.errorMessage ? "invalid" : ""}` },
-        h("div", { class: "label-wrapper" },
-          h("label", { class: "label", id: `label-${this.uid}`, htmlFor: `selectbtn-${this.uid}` },
-            this.label,
-            // we can't use aria-required or required attributes because it's invalid on the elements we're using (button controlling a listbox)
-            this.requiredField ? (h("span", { class: "required" },
-              h("span", { class: "sr-only" }, this.requiredMessage),
-              h("span", { "aria-hidden": "true" }, "*"))) : (""))),
-        h("div", { class: "dropdown" },
-          h("button", Object.assign({}, buttonProps, { class: `displayedoption ${this.isTabbing ? "user-is-tabbing" : ""}`, ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }),
-            h("span", { class: this.selectedItems.length > 0 && this.selectedItems.filter((x) => x.subinfo).length > 0
-                ? "overflowcontrol hassubinfo"
-                : "overflowcontrol" },
-              h("span", { class: "button-text" }, this.renderButtonText()),
-              this.renderSubinfo()),
-            this.renderOverflowCount()),
-          h("div", { class: `options ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, id: `list-${this.uid}`, tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": `label-${this.uid}`, ref: (el) => (this.optionsEl = el) },
-            h("slot", null)),
-          this.renderErrorContainer()))));
-  }
-  static get is() { return "wm-select"; }
-  static get encapsulation() { return "shadow"; }
-  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"
-    },
-    "invalid": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "invalid",
-      "reflect": false,
-      "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"
-    },
-    "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({\r\n    id: \"select.multiPlaceholder\",\r\n    defaultMessage: \"Make a selection\",\r\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({\r\n    id: \"select.allSelected\",\r\n    defaultMessage: \"All selected\",\r\n  })"
-    }
-  }; }
-  static get states() { return {
-    "isTabbing": {},
-    "isExpanded": {}
-  }; }
-  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": "wmComponentBlurred",
-      "name": "wmComponentBlurred",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "errorMessage",
-      "methodName": "exposeErrors"
-    }]; }
-  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": "wmEnterKeyPressed",
-      "method": "handeChildEnter",
-      "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": "moveToFirstItem",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "wmEndKeyPressed",
-      "method": "moveToLastItem",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "wmTabKeyPressed",
-      "method": "handleTabKey",
-      "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": "findAndFocusItem",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
-}
+import { h, Component, Element, Event, Listen, Prop, State, Watch, Host } from "@stencil/core";
+import { forceUpdate } from "@stencil/core";
+import { generateId, getTextDir, shouldOpenUp, intl } from "../../global/functions";
+export class Select {
+  constructor() {
+    this.disabled = false;
+    this.invalid = false;
+    this.labelPosition = "top";
+    this.requiredField = false;
+    this.errorMessage = "";
+    this.multiple = false;
+    this.placeholder = intl.formatMessage({
+      id: "select.multiPlaceholder",
+      defaultMessage: "Make a selection",
+    });
+    this.allSelectedMessage = intl.formatMessage({
+      id: "select.allSelected",
+      defaultMessage: "All selected",
+    });
+    this.requiredMessage = intl.formatMessage({
+      id: "global.requiredField",
+      defaultMessage: "required field",
+    });
+    this.isTabbing = false;
+    this.isExpanded = false;
+    this.keysSoFar = "";
+    this.searchIndex = 0;
+    this.keyClear = null;
+    this.openUp = false;
+    // for multiselect button text
+    this.overflowCount = 0;
+    this.displayedItems = [];
+    this.allSelected = false;
+  }
+  get childItems() {
+    return Array.from(this.el.querySelectorAll("wm-option"));
+  }
+  get selectedItems() {
+    return Array.from(this.el.querySelectorAll("wm-option")).filter((x) => x.selected);
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  handleOptionSelection(ev) {
+    if (!this.multiple) {
+      // ensure only one option is selected at a time
+      this.childItems
+        // remove selected on any other option
+        .filter((option) => option != ev.target && !!option.selected)
+        .map((option) => (option.selected = false));
+    }
+    this.focusItem(ev.target);
+    this.selectItem(ev.target);
+    if (!this.multiple) {
+      this.close();
+    }
+  }
+  handleChildEnter() {
+    // only occurs for multiselects. handle the click, then close
+    this.close();
+  }
+  handleChildUp(ev) {
+    this.moveUp(ev.target);
+  }
+  handleChildDown(ev) {
+    this.moveDown(ev.target);
+  }
+  moveToFirstItem() {
+    this.focusItem(this.childItems[0]);
+  }
+  moveToLastItem() {
+    this.focusItem(this.childItems[this.childItems.length - 1]);
+  }
+  handleTabKey() {
+    this.close(false);
+  }
+  closePopupOnEscape() {
+    this.close();
+  }
+  handleOptionBlur(ev) {
+    const toElOrChild = ev.detail.relatedTarget === this.el || this.el.contains(ev.detail.relatedTarget);
+    // 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 (!toElOrChild) {
+      const event = new CustomEvent("blur");
+      // @ts-ignore
+      event.relatedTarget = ev.detail.relatedTarget;
+      this.el.dispatchEvent(event);
+    }
+  }
+  handleClick(ev) {
+    const isElOrChild = ev.target === this.el || this.el.contains(ev.target);
+    if (!isElOrChild && this.isExpanded) {
+      this.close();
+    }
+  }
+  handleButtonBlur(ev) {
+    const toElOrChild = ev.relatedTarget === this.el || this.el.contains(ev.relatedTarget);
+    if (toElOrChild) {
+      // do not emit a blur event when opening the dropdown and focusing the Options
+      ev.stopPropagation();
+    }
+  }
+  handleKey(ev) {
+    switch (ev.keyCode) {
+      // Arrow down
+      case 40:
+        if (this.isExpanded === false) {
+          ev.preventDefault();
+          this.open("next");
+        }
+        break;
+      // Arrow up
+      case 38:
+        if (this.isExpanded === false) {
+          ev.preventDefault();
+          this.open("previous");
+        }
+        break;
+    }
+  }
+  componentWillLoad() {
+    if (!this.label) {
+      console.error("For accessibility purposes, this component requires a label (even if `label-position` is set to `none`).");
+    }
+    this.el.focus = function () {
+      if (!this.disabled) {
+        this.shadowRoot.querySelector("button").focus();
+      }
+    };
+    this.uid = this.el.id ? this.el.id : generateId();
+    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+      this.toggleTabbingOn();
+    }
+  }
+  componentDidLoad() {
+    this.wmSelectDidLoad.emit();
+    if (!this.childItems.length) {
+      throw new Error("wm-select should have wm-option elements as children.");
+    }
+    if (this.multiple && this.childItems.filter((x) => x.subinfo).length > 0) {
+      throw new Error("wm-select with the multiple prop cannot have subinfo options");
+    }
+    if (this.multiple && !this.placeholder) {
+      throw new Error("wm-select with the multiple prop needs to also use the placeholder prop.");
+    }
+    // set initial selections / button text
+    if (this.selectedItems.length > 0) {
+      this.selectedItems.forEach((x) => this.displayedItems.push(x));
+      this.setButtonText();
+      // single Select only, pre-select if no default option from dev
+    }
+    else if (!this.multiple) {
+      this.selectItem(this.childItems[0]);
+    }
+    this.optionsEl.classList.add("hidden");
+    forceUpdate(this.el);
+    // Dev can overwrite the max-height rule set in the Sass file
+    if (this.maxHeight) {
+      this.optionsEl.style.maxHeight = this.maxHeight;
+    }
+  }
+  moveUp(el) {
+    const prevEl = el.previousElementSibling;
+    if (prevEl) {
+      // scroll option to top of dropdown if partially obscured / out of view
+      if (prevEl.getBoundingClientRect().top < this.optionsEl.getBoundingClientRect().top) {
+        this.optionsEl.scrollTop =
+          prevEl.getBoundingClientRect().top - this.optionsEl.getBoundingClientRect().top + this.optionsEl.scrollTop;
+      }
+      this.focusItem(prevEl);
+    }
+    else {
+      this.focusItem(this.childItems[this.childItems.length - 1]);
+    }
+  }
+  moveDown(el) {
+    const nextEl = el.nextElementSibling;
+    if (nextEl && nextEl.tagName !== "INPUT") {
+      // scroll option to bottom of dropdown if partially obscured / out of view
+      if (nextEl.getBoundingClientRect().bottom > this.optionsEl.getBoundingClientRect().bottom) {
+        this.optionsEl.scrollTop =
+          nextEl.getBoundingClientRect().bottom -
+            this.optionsEl.getBoundingClientRect().top +
+            this.optionsEl.scrollTop -
+            this.optionsEl.offsetHeight;
+      }
+      this.focusItem(nextEl);
+    }
+    else {
+      this.focusItem(this.childItems[0]);
+    }
+  }
+  open(itemToSelect) {
+    if (!this.disabled) {
+      const elHeight = this.el.clientHeight;
+      const buttonHeight = this.buttonEl.clientHeight;
+      this.openUp = shouldOpenUp(this.el, this.optionsEl, 
+      // when opening up, dropdown covers both label and button
+      elHeight, 
+      // when opening down, dropdown covers only the button
+      buttonHeight);
+      this.isExpanded = true;
+      this.optionsEl.classList.remove("hidden");
+      window.requestAnimationFrame(() => {
+        if (this.selectedItems.length > 0) {
+          if (itemToSelect === "next") {
+            this.moveDown(this.selectedItems[this.selectedItems.length - 1]);
+          }
+          else if (itemToSelect === "previous") {
+            this.moveUp(this.selectedItems[0]);
+          }
+          else {
+            this.focusItem(this.selectedItems[0]);
+          }
+        }
+        else {
+          this.focusItem(this.childItems[0]);
+        }
+      });
+    }
+  }
+  close(returnFocus = true) {
+    this.isExpanded = false;
+    this.childItems.map((i) => (i.focused = false));
+    window.setTimeout(() => {
+      this.optionsEl.classList.add("hidden");
+      // Returns focus to button after popup closes (no need if user is tabbing)
+      // Delay is necessary for screenreader to get new expanded state before focus
+      // window.requestAnimationFrame is probably enough, but since we are already using setTimeout it may as well be here
+      // also UX wise, it makes sense for the button to only be focused after the animation is complete
+      if (returnFocus) {
+        this.el.focus();
+      }
+    }, 150);
+  }
+  focusItem(item) {
+    this.childItems.forEach((i) => (i.focused = i === item));
+  }
+  selectItem(item) {
+    if (this.multiple) {
+      item.selected = !item.selected;
+    }
+    else {
+      this.childItems.forEach((i) => (i.selected = i === item));
+    }
+    this.setButtonText();
+  }
+  findAndFocusItem(ev) {
+    const character = ev.detail.toUpperCase();
+    if (!this.keysSoFar) {
+      for (var i = 0; i < this.childItems.length; i++) {
+        if (this.childItems[i].focused) {
+          this.searchIndex = i;
+        }
+      }
+    }
+    this.keysSoFar += character;
+    this.clearKeysSoFarAfterDelay();
+    var nextMatch = this.findMatchInRange(this.childItems, this.searchIndex + 1, this.childItems.length);
+    if (!nextMatch) {
+      nextMatch = this.findMatchInRange(this.childItems, 0, this.searchIndex);
+    }
+    if (nextMatch) {
+      this.focusItem(nextMatch);
+    }
+  }
+  clearKeysSoFarAfterDelay() {
+    if (this.keyClear) {
+      window.clearTimeout(this.keyClear);
+      this.keyClear = null;
+    }
+    this.keyClear = window.setTimeout(function () {
+      this.keysSoFar = "";
+      this.keyClear = null;
+    }.bind(this), 500);
+  }
+  findMatchInRange(list, startIndex, endIndex) {
+    // Find the first item starting with the keysSoFar substring, searching in
+    // the specified range of items
+    for (var n = startIndex; n < endIndex; n++) {
+      var label = list[n].textContent;
+      if (label && label.toUpperCase().indexOf(this.keysSoFar) === 0) {
+        return list[n];
+      }
+    }
+    return null;
+  }
+  exposeErrors() {
+    // When the error changes, a new id is set for the error container and the button's aria-describedby attribute is updated accordingly. This is to make sure the screen reader announces teh updated errors in Firefox. See this longstanding bug: https://bugzilla.mozilla.org/show_bug.cgi?id=493683
+    const newId = generateId();
+    this.errorContainer.id = `wm-errors-${newId}`;
+    this.buttonEl.setAttribute("aria-describedby", `wm-errors-${newId}`);
+  }
+  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();
+      this.wmComponentBlurred.emit(); // deprecated
+    }
+  }
+  setButtonText() {
+    this.displayedItems = this.childItems.filter((x) => x.selected);
+    this.allSelected = this.displayedItems.length === this.childItems.length;
+    // handle overflow + counter for multiselect
+    if (this.multiple) {
+      // this is a fixed measurement accounting for the max width of a 3 character overflow counter
+      const overflowCounterWidth = 38;
+      const computedStyle = window.getComputedStyle(this.buttonEl);
+      // there seems to be no quick way to get an elements width without padding, except for subtracting padding manually
+      const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
+      const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
+      const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
+      let optionsWidths = this.displayedItems.map((x) => x.shadowRoot.querySelector(".option-wrapper").clientWidth);
+      let optionsTotalWidth = optionsWidths.reduce((acc, x) => acc + x, 0);
+      this.overflowCount = 0;
+      while (optionsTotalWidth > availableSpace && this.displayedItems.length > 1) {
+        this.overflowCount++;
+        optionsTotalWidth -= optionsWidths[optionsWidths.length - 1];
+        optionsWidths.pop();
+        this.displayedItems.pop();
+      }
+    }
+  }
+  renderButtonText() {
+    if (this.multiple && this.displayedItems.length < 1) {
+      return h("span", null, this.placeholder);
+    }
+    else if (this.multiple && this.allSelected && this.overflowCount > 0) {
+      return this.allSelectedMessage;
+    }
+    else {
+      return this.displayedItems.map((x, idx) => (h("span", null,
+        idx > 0 ? ", " : "",
+        x.textContent)));
+    }
+  }
+  renderSubinfo() {
+    // multiselects cannot have subinfo for options
+    if (!this.multiple && this.selectedItems.length > 0 && this.selectedItems[0].subinfo) {
+      return h("span", { class: "subinfo" }, this.selectedItems[0].subinfo);
+    }
+  }
+  renderOverflowCount() {
+    if (this.overflowCount > 0 && !this.allSelected) {
+      return (h("span", null,
+        h("span", { class: "overflow-counter" },
+          "+",
+          this.overflowCount)));
+    }
+  }
+  render() {
+    const buttonProps = {
+      id: `selectbtn-${this.uid}`,
+      ["disabled"]: this.disabled,
+      ["aria-controls"]: `list-${this.uid}`,
+      ["aria-labelledby"]: `label-${this.uid} selectbtn-${this.uid}`,
+      ["aria-describedby"]: "wm-errors",
+      ["aria-expanded"]: this.isExpanded ? "true" : "false",
+      onClick: () => (this.isExpanded ? this.close() : this.open()),
+    };
+    return (h(Host, { onBlur: (ev) => this.handleComponentBlur(ev) },
+      h("div", { class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.invalid || this.errorMessage ? "invalid" : ""}` },
+        h("div", { class: "label-wrapper" },
+          h("label", { class: "label", id: `label-${this.uid}`, htmlFor: `selectbtn-${this.uid}` },
+            this.label,
+            // we can't use aria-required or required attributes because it's invalid on the elements we're using (button controlling a listbox)
+            this.requiredField ? (h("span", { class: "required" },
+              h("span", { class: "sr-only" }, this.requiredMessage),
+              h("span", { "aria-hidden": "true" }, "*"))) : (""))),
+        h("div", { class: "dropdown" },
+          h("button", Object.assign({}, buttonProps, { class: `displayedoption ${this.isTabbing ? "user-is-tabbing" : ""}`, ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }),
+            h("span", { class: this.selectedItems.length > 0 && this.selectedItems.filter((x) => x.subinfo).length > 0
+                ? "overflowcontrol hassubinfo"
+                : "overflowcontrol" },
+              h("span", { class: "button-text" }, this.renderButtonText()),
+              this.renderSubinfo()),
+            this.renderOverflowCount()),
+          h("div", { class: `options ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, id: `list-${this.uid}`, tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": `label-${this.uid}`, ref: (el) => (this.optionsEl = el) },
+            h("slot", null)),
+          this.renderErrorContainer()))));
+  }
+  static get is() { return "wm-select"; }
+  static get encapsulation() { return "shadow"; }
+  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"
+    },
+    "invalid": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "invalid",
+      "reflect": false,
+      "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"
+    },
+    "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  })"
+    },
+    "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  })"
+    }
+  }; }
+  static get states() { return {
+    "isTabbing": {},
+    "isExpanded": {}
+  }; }
+  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": "wmComponentBlurred",
+      "name": "wmComponentBlurred",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "errorMessage",
+      "methodName": "exposeErrors"
+    }]; }
+  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": "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": "moveToFirstItem",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "wmEndKeyPressed",
+      "method": "moveToLastItem",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "wmTabKeyPressed",
+      "method": "handleTabKey",
+      "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": "findAndFocusItem",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}