@watermarkinsights/ripple 3.0.1-0 → 3.0.2-0

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

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

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

@@ -0,0 +1,176 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d930307d.js');
+const functions = require('./functions-e3f5ae65.js');
+
+const wmPaginationCss = "nav .largescreen,nav .smallscreen{margin-bottom:0.625rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:flex-end;-ms-flex-pack:flex-end;-webkit-justify-content:flex-end;justify-content:flex-end;font-size:0.875rem}nav .largescreen .pageview,nav .smallscreen .pageview{font-size:0.875rem;margin:0 0.625rem}nav .largescreen .paginationbtn,nav .smallscreen .paginationbtn{position:relative;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-ms-transition:none;-webkit-transition:none;-moz-transition:none;transition:none;border:none;color:#575195;background-color:transparent;margin:0;padding:0;height:2.5rem;width:2.5rem;font-family:inherit;letter-spacing:0.3px;font-size:0.875rem;font-weight:500;cursor:pointer;text-transform:none}nav .largescreen .paginationbtn svg *,nav .smallscreen .paginationbtn svg *{fill:#565397}nav .largescreen .paginationbtn:hover:not([aria-current=page]):not([disabled]),nav .smallscreen .paginationbtn:hover:not([aria-current=page]):not([disabled]){text-decoration:underline}nav .largescreen .paginationbtn:focus,nav .smallscreen .paginationbtn:focus{outline:none}nav .largescreen .paginationbtn::-moz-focus-inner,nav .smallscreen .paginationbtn::-moz-focus-inner{border:0;outline:none}nav .largescreen .paginationbtn[disabled],nav .smallscreen .paginationbtn[disabled]{color:#9f9f9f;pointer-events:none}nav .largescreen .paginationbtn[disabled] svg *,nav .smallscreen .paginationbtn[disabled] svg *{fill:#9f9f9f}nav .largescreen .previousbtn,nav .smallscreen .previousbtn{margin-right:0.625rem;width:auto !important}nav .largescreen .nextbtn,nav .smallscreen .nextbtn{margin-left:0.625rem;margin-right:0;width:auto !important}nav .largescreen .previousbtn,nav .largescreen .nextbtn,nav .smallscreen .previousbtn,nav .smallscreen .nextbtn{-ms-transition:none;-webkit-transition:none;-moz-transition:none;transition:none}nav .largescreen .ellipsis,nav .smallscreen .ellipsis{display:inline-block;width:2.5rem;text-align:center}nav .largescreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]),nav .smallscreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]){-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}nav .largescreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]):before,nav .smallscreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]):before{position:absolute;content:\"\";height:auto;width:16px;top:0;bottom:0;left:12px;right:0;background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 2px;background-position:0 2em;border-radius:0;line-height:normal}nav .largescreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]).previousbtn:focus:before,nav .smallscreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]).previousbtn:focus:before{left:0 !important}nav .largescreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]).nextbtn:focus:before,nav .smallscreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]).nextbtn:focus:before{left:0 !important}nav .largescreen .pagebtncontainer.user-is-tabbing [aria-current=page]:focus,nav .smallscreen .pagebtncontainer.user-is-tabbing [aria-current=page]:focus{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}nav .largescreen .pagebtncontainer.user-is-tabbing [aria-current=page]:focus::-moz-focus-inner,nav .smallscreen .pagebtncontainer.user-is-tabbing [aria-current=page]:focus::-moz-focus-inner{border:0}nav .largescreen .user-is-tabbing :focus:not(.-disabled):not([aria-current=page]).previousbtn:focus:before{width:56px !important}nav .largescreen .user-is-tabbing :focus:not(.-disabled):not([aria-current=page]).nextbtn:focus:before{width:32px !important}nav .largescreen .paginationbtn[aria-current=page]{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;-webkit-box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);background-color:#575195;color:#fff}nav .largescreen .paginationbtn[aria-current=page]:hover{-webkit-box-shadow:0 4px 2px 0 rgba(87, 81, 149, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 2px 0 rgba(87, 81, 149, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 2px 0 rgba(87, 81, 149, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);background:#4e4986}.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}";
+
+const Pagination = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.pageClicked = index.createEvent(this, "pageClicked", 7);
+    this.focusCurrentPage = index.createEvent(this, "focusCurrentPage", 7);
+    this.currentPage = 1;
+    this.totalItems = undefined;
+    this.itemsPerPage = undefined;
+    this.value = 1;
+    this.isLargeViewport = window.innerWidth > 600;
+    this.isTabbing = false;
+    this.srAnnouncement = "";
+    this.totalPages = 0;
+    this.debouncedResize = functions.debounce(() => {
+      this.isLargeViewport = window.innerWidth > 600;
+    }, 250);
+    this.getMiddlePageNums = () => {
+      let coreBtns;
+      // if pg is 1, 2 or 3
+      if (this.currentPage < 4) {
+        coreBtns = [2, 3, 4];
+      }
+      else if (this.currentPage > this.totalPages - 3) {
+        coreBtns = [this.totalPages - 3, this.totalPages - 2, this.totalPages - 1];
+      }
+      else {
+        coreBtns = [this.currentPage - 1, this.currentPage, this.currentPage + 1];
+      }
+      return coreBtns;
+    };
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  maintainFocusOnNumberChange(el) {
+    window.requestAnimationFrame(() => {
+      switch (el) {
+        case "previous":
+          this.currentPage === 1 && this.el.shadowRoot.querySelector(`button#wm-1`).focus(); //Only shift focus from previous button to page 1 if page 1 is reached, which disables previous button. Otherwise, maintain focus on previous button.
+          break;
+        case "next":
+          this.currentPage === this.totalPages &&
+            this.el.shadowRoot.querySelector(`button#wm-${this.totalPages}`).focus(); //Only shift focus from next button if last page is reached, disabling next button. Otherwise, maintain focus on next button.
+          break;
+        case "prev-arrow":
+          this.currentPage === 1 && this.el.shadowRoot.querySelector("#next-arw").focus(); //Only shift focus if page 1 is reached, disabling previous buttons. Otherwise, maintain focus on previous buttons.
+          break;
+        case "next-arrow":
+          this.currentPage === this.totalPages && this.el.shadowRoot.querySelector("#previous-arw").focus(); //Only shift focus if last page is reached, disabling next buttons. Otherwise, maintain focus on next buttons.
+          break;
+        case "page":
+          this.el.shadowRoot.querySelector(`button#wm-${this.currentPage}`).focus();
+        default:
+          return;
+      }
+    });
+  }
+  handleResize() {
+    this.debouncedResize();
+  }
+  calculateTotalPages() {
+    this.totalPages = Math.ceil(this.totalItems / this.itemsPerPage);
+  }
+  componentWillLoad() {
+    if (!this.totalItems || !this.itemsPerPage || !this.currentPage) {
+      throw new Error("Please check the required attributes");
+    }
+    this.calculateTotalPages();
+    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+      this.toggleTabbingOn();
+    }
+  }
+  updatePageDisplayed(pageNum) {
+    this.value = pageNum;
+    this.pageClicked.emit();
+    this.srAnnouncement = `Current page, ${this.currentPage}. ${this.getCurrentPagesInView()}`;
+  }
+  displayShortPagination() {
+    let pages = [];
+    for (let i = 1; i <= this.totalPages; i++) {
+      pages.push(this.displayPageNumber(i));
+    }
+    return pages;
+  }
+  displayLongPagination() {
+    let view = [
+      this.displayPageNumber(1),
+      this.currentPage > 3 && this.displayEllipsis(),
+      ...this.getMiddlePageNums().map((page) => this.displayPageNumber(page)),
+      this.currentPage + 2 < this.totalPages && this.displayEllipsis(),
+      this.displayPageNumber(this.totalPages),
+    ];
+    return view;
+  }
+  displayPageNumber(pageNum) {
+    return (index.h("button", { id: `wm-${pageNum}`, class: "paginationbtn", onClick: () => {
+        this.currentPage = pageNum;
+        this.updatePageDisplayed(pageNum);
+        this.maintainFocusOnNumberChange("page");
+      }, value: pageNum, "aria-label": this.currentPage !== pageNum ? `Go to page ${pageNum}` : "", "aria-current": this.currentPage === pageNum ? "page" : undefined }, pageNum));
+  }
+  displayEllipsis() {
+    return index.h("span", { class: "ellipsis" }, "...");
+  }
+  // displayPageView = () => {
+  //   // let end = this.itemsPerPage! * this.currentPage;
+  //   // const begin = end - this.itemsPerPage! + 1;
+  //   // if (end > this.totalItems!) {
+  //   //   end = this.totalItems!;
+  //   // }
+  //   return <div class="pageview">{this.getCurrentView()}</div>;
+  // };
+  getCurrentPagesInView() {
+    let end = this.itemsPerPage * this.currentPage;
+    const begin = end - this.itemsPerPage + 1;
+    if (end > this.totalItems) {
+      end = this.totalItems;
+    }
+    return "Viewing " + (begin === end ? `${begin}` : `${begin}–${end} of ${this.totalItems}`);
+  }
+  renderLarge() {
+    return (index.h("div", { class: "largescreen" }, index.h("div", { class: "pageview" }, this.getCurrentPagesInView()), index.h("div", { class: `pagebtncontainer ${this.isTabbing ? "user-is-tabbing" : ""}` }, index.h("button", { id: "previous", class: "paginationbtn previousbtn", onClick: () => {
+        this.currentPage = this.currentPage - 1;
+        this.updatePageDisplayed(this.currentPage);
+        this.maintainFocusOnNumberChange("previous");
+      }, disabled: this.currentPage === 1, "aria-label": "Go to previous page", "aria-controls": "status" }, "Previous"), this.totalPages < 6 ? this.displayShortPagination() : this.displayLongPagination(), index.h("button", { id: "next", class: "paginationbtn nextbtn", onClick: () => {
+        this.currentPage = this.currentPage + 1;
+        this.updatePageDisplayed(this.currentPage);
+        this.maintainFocusOnNumberChange("next");
+      }, disabled: this.currentPage === this.totalPages, "aria-label": "Go to next page", "aria-controls": "status" }, "Next"))));
+  }
+  renderSmall() {
+    return (index.h("div", { class: "smallscreen" }, index.h("div", { class: `pagebtncontainer ${this.isTabbing ? "user-is-tabbing" : ""}` }, index.h("button", { id: `wm-1-arw`, class: "paginationbtn", onClick: () => {
+        this.currentPage = 1;
+        this.updatePageDisplayed(1);
+        this.maintainFocusOnNumberChange("prev-arrow");
+      }, value: 1, "aria-current": this.currentPage === 1 ? "page" : undefined, "aria-label": `Go to page 1`, "aria-controls": "status", disabled: this.currentPage === 1 }, index.h("svg", { width: "16", height: "12", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6zM15.41 10.59L10.83 6l4.58-4.59L14 0 8 6l6 6z" }))), index.h("button", { id: "previous-arw", class: "paginationbtn previousbtn", onClick: () => {
+        this.currentPage -= 1;
+        this.updatePageDisplayed(this.currentPage);
+        this.maintainFocusOnNumberChange("prev-arrow");
+      }, disabled: this.currentPage === 1, "aria-label": "Go to previous page" }, index.h("svg", { width: "8", height: "12", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6z" }))), "Page ", this.currentPage, " of ", this.totalPages, index.h("button", { id: "next-arw", class: "paginationbtn nextbtn", onClick: () => {
+        this.currentPage += 1;
+        this.updatePageDisplayed(this.currentPage);
+        this.maintainFocusOnNumberChange("next-arrow");
+      }, disabled: this.currentPage === this.totalPages, "aria-label": "Go to next page" }, index.h("svg", { width: "8", height: "12", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6z" }))), index.h("button", { id: `wm-${this.totalPages}-arw`, class: "paginationbtn", onClick: () => {
+        this.currentPage = this.totalPages;
+        this.updatePageDisplayed(this.totalPages);
+        this.maintainFocusOnNumberChange("next-arrow");
+      }, value: this.totalPages, "aria-current": this.currentPage === this.totalPages ? "page" : undefined, "aria-label": `Go to last page, page ${this.totalPages}`, "aria-controls": "status", disabled: this.currentPage === this.totalPages }, index.h("svg", { width: "17", height: "12", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6zM9.59 10.59L14.17 6 9.59 1.41 11 0l6 6-6 6z" }))))));
+  }
+  render() {
+    return (
+    // do not render the component if there's only one page
+    this.totalItems > this.itemsPerPage && (index.h("nav", { "aria-label": `Pagination Navigation. ${this.getCurrentPagesInView()}. Current page, ${this.currentPage}.` }, this.isLargeViewport ? this.renderLarge() : this.renderSmall(), index.h("div", { id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "totalItems": ["calculateTotalPages"],
+    "itemsPerPage": ["calculateTotalPages"]
+  }; }
+};
+Pagination.style = wmPaginationCss;
+
+exports.wm_pagination = Pagination;