@watermarkinsights/ripple 0.0.0 → 0.1.0-alpha.0

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

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

package/dist/cjs/wm-tab-item.cjs.entry.js

@@ -1,82 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-298ebef1.js');
-
-const wmTabItemCss = ":host{font-family:inherit;display:inline-block}:host *{box-sizing:border-box}:host .tab-item{list-style-type:none;height:100%;display:inline-block}:host .tab-item .tab{-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;border-radius:0;color:#575195;text-decoration:none;letter-spacing:0.7px;font-size:0.875rem;font-weight:500;opacity:1;position:relative;text-transform:uppercase;display:inline-block;height:3.3333333333em;line-height:3.3333333333em;padding-right:1.5rem;padding-left:1.5rem}:host .tab-item .tab[aria-selected=true]{font-weight:700;opacity:1;background:linear-gradient(currentColor, currentColor) bottom/0 0 no-repeat;background-size:calc(100% - 50px) 3px}:host .tab-item .tab[aria-selected=true].dark{color:#fff}:host .tab-item .tab,:host .tab-item .tab:hover,:host .tab-item .tab:active{outline:none}:host .tab-item .tab:focus{outline:none}:host .tab-item .tab.dark:not([aria-selected=true]){opacity:0.8;color:#fff}:host .tab-item .tab.user-is-tabbing:focus:not(:active){outline:none;-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}:host .tab-item .tab.user-is-tabbing:focus:not(:active)::-moz-focus-inner{border:0}:host.hide{display:none}";
-
-const TabItem = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.tabSelected = index.createEvent(this, "tabSelected", 7);
-    this.keydownOnTabItem = index.createEvent(this, "keydownOnTabItem", 7);
-    this.tabItemLoaded = index.createEvent(this, "tabItemLoaded", 7);
-    /**
-     * Indicates whether the tab is currently active
-     */
-    this.selected = false;
-    this.show = true;
-    /**
-     * The id of the tab, linked to a tab panel.
-     */
-    this.tabId = "";
-    this.tabClicked = (ev) => {
-      ev.preventDefault();
-      this.tabSelected.emit({ tabId: this.tabId });
-    };
-    this.tabPressed = (ev) => {
-      const key = ev.key;
-      if (key === "Enter" || key === " ") {
-        ev.preventDefault();
-        this.tabSelected.emit({ tabId: this.tabId });
-      }
-      else if (key === "Tab") {
-        this.keydownOnTabItem.emit({ tabItem: this.el, key: ev.key });
-      }
-      else {
-        ev.preventDefault();
-        this.keydownOnTabItem.emit({ tabItem: this.el, key: ev.key });
-      }
-    };
-  }
-  get parentTabList() {
-    return this.el.parentElement;
-  }
-  toggleTabbingOn() {
-    this.linkEl && this.linkEl.classList.add("user-is-tabbing");
-  }
-  toggleTabbingOff() {
-    this.linkEl && this.linkEl.classList.remove("user-is-tabbing");
-  }
-  componentWillLoad() {
-    // @ts-ignore
-    this.el.focus = function () {
-      const linkEl = this.shadowRoot.querySelector("a");
-      linkEl && linkEl.focus();
-    };
-  }
-  componentDidLoad() {
-    this.tabItemLoaded.emit();
-  }
-  render() {
-    let classes = this.show ? "" : "hide ";
-    classes += this.parentTabList && this.parentTabList.customBackground == "dark" ? "dark" : "";
-    let styles = {};
-    const padding = this.parentTabList && this.parentTabList.customPadding;
-    if (padding) {
-      const bkgSize = parseInt(padding, 10) * 2 || 0;
-      const units = padding.split(/([0-9]+)/).pop();
-      styles = {
-        "padding-left": this.parentTabList.customPadding,
-        "padding-right": this.parentTabList.customPadding,
-        "background-size": `calc(100% - ${bkgSize}${units}) 3px`,
-      };
-    }
-    return (index.h(index.Host, { role: "presentation" }, index.h("li", { class: "tab-item", role: "presentation" }, index.h("a", { class: `tab ${classes}`, style: styles, role: "tab", ref: (el) => (this.linkEl = el), onClick: this.tabClicked, id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1 }, index.h("slot", null)))));
-  }
-  get el() { return index.getElement(this); }
-};
-TabItem.style = wmTabItemCss;
-
-exports.wm_tab_item = TabItem;

package/dist/cjs/wm-tab-list.cjs.entry.js

@@ -1,205 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-298ebef1.js');
-const functions = require('./functions-65513c61.js');
-
-const wmTabListCss = ":host,wm-tab-list{position:relative;white-space:nowrap;height:100%;display:block}:host *,wm-tab-list *{box-sizing:border-box}:host .tabcontainer,wm-tab-list .tabcontainer{margin:0;margin-left:-24px;width:100%;height:4.0625rem;display:flex;flex-direction:row;align-items:center;padding:0}:host .tabcontainer.dark,wm-tab-list .tabcontainer.dark{background:#353b48;margin:0}:host wm-select,wm-tab-list wm-select{padding:0.375rem 0}";
-
-const TabList = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.tabSelected = index.createEvent(this, "tabSelected", 7);
-    /**
-     * Delegates control to the component, which will listen for the tabSelected event, update the display of the tab panels, and update the selected tab on display. When set to false, the app must listen for the event and update the selectedTab attribute. Offers more control for devs, who may want to control when data loads or run other functions when tabs are switched.
-     */
-    this.controllerEnabled = false;
-    this.getSelectedTabItem = () => this.tabItems.filter((t) => t.selected)[0];
-    this.debouncedSetLayout = functions.debounce(() => {
-      if (!this.listWidth) {
-        this.setListWidth();
-      }
-      index.forceUpdate(this.el);
-    }, 250);
-  }
-  /**
-   * Set to true when the tab list exceeds the parent width. Component will render the menu layout.
-   */
-  get menuLayout() {
-    if (this.listWidth) {
-      return this.el.offsetWidth < this.listWidth - 24; // to take into account the negative margin on the ul
-    }
-    else {
-      return false; // in case listWidth couldn't get computed, we render regular tabs
-    }
-  }
-  get tabItems() {
-    return Array.from(this.el.querySelectorAll("wm-tab-item"));
-  }
-  getLinkEl(tab) {
-    return tab.shadowRoot.querySelector("a");
-  }
-  get panels() {
-    const allPanels = Array.from(document.querySelectorAll("wm-tab-panel"));
-    const tabIds = this.tabItems.map((t) => t.tabId);
-    return allPanels.filter((p) => tabIds.includes(p.tabId));
-  }
-  getPanel(tabId) {
-    return this.panels.find((p) => p.tabId === tabId);
-  }
-  setListWidth() {
-    let newCalc = this.tabItems.reduce((sum, tab) => sum + tab.offsetWidth, 0);
-    this.listWidth = newCalc && newCalc > 0 ? newCalc : this.listWidth; // the function may return 0. In this case keep the previous value
-  }
-  setSelected(id) {
-    this.tabItems.map((tab) => (tab.selected = tab.tabId === id));
-    const singlePanel = this.panels.length === 1 && this.tabItems.length > 1;
-    if (singlePanel) {
-      /**
-       * If the app conditionally renders content in one single tab panel rather than allocating the content to discrete panels, then the tab panels aria references needs to update whenever a new tab item is selected.
-       */
-      const selected = this.getSelectedTabItem();
-      this.setAttributesOnPanel(this.panels[0], selected);
-      this.panels[0].active = true;
-    }
-    else {
-      this.panels.map((panel) => (panel.active = panel.tabId === id));
-    }
-  }
-  showItems() {
-    this.tabItems.map((t) => (t.show = true));
-  }
-  hideItems() {
-    this.tabItems.map((t) => (t.show = false));
-  }
-  componentWillLoad() {
-    // @ts-ignore
-    this.el.focus = function () {
-      const items = Array.from(this.querySelectorAll("wm-tab-item"));
-      const selectedItem = items.filter((t) => t.selected)[0];
-      selectedItem && selectedItem.focus();
-    };
-  }
-  componentDidLoad() {
-    this.setLayout(); // this require measurements of DOM elements so can't be done before first paint
-    const selectedTab = this.selectedTab || this.tabItems[0].tabId;
-    this.setSelected(selectedTab);
-  }
-  tabItemLoaded(ev) {
-    this.setAriaOnPanelAndTab(ev.target);
-  }
-  setAriaOnPanelAndTab(tab) {
-    const panel = this.getPanel(tab.tabId);
-    // If there's no panel, check for case where content is conditionally rendered in one panel, in which case attributes on all tabs should point to this single panel.
-    if (!panel) {
-      if (this.panels.length === 1) {
-        this.setAttributesOnTab(tab, this.panels[0]);
-      }
-    }
-    else {
-      // Otherwise, set attributes on each tab item that loads and its associated panel
-      this.setAttributesOnPanel(panel, tab);
-      this.setAttributesOnTab(tab, panel);
-    }
-  }
-  setAttributesOnTab(tab, panel) {
-    const link = this.getLinkEl(tab);
-    if (link) {
-      link.setAttribute("aria-controls", panel.id);
-      link.setAttribute("href", `#${panel.id}`);
-    }
-  }
-  removeAttributesOnTab(tab) {
-    const link = this.getLinkEl(tab);
-    if (link) {
-      link.removeAttribute("aria-controls");
-      link.removeAttribute("href");
-    }
-  }
-  setAttributesOnPanel(panel, tab) {
-    const link = this.getLinkEl(tab);
-    if (link) {
-      panel.setAttribute("aria-labelledby", link.id);
-      panel.setAttribute("tab-id", tab.tabId);
-    }
-  }
-  handleTabSelected(ev) {
-    if (this.controllerEnabled) {
-      this.setSelected(ev.detail.tabId);
-    }
-  }
-  handleKeydown(ev) {
-    const tabItem = ev.detail.tabItem;
-    const key = ev.detail.key;
-    const index = this.tabItems.indexOf(tabItem);
-    if (key === "ArrowLeft" || key === "ArrowRight") {
-      this.handleLeftRightArrow(index, key);
-    }
-    if (key === "ArrowDown" || key === "ArrowUp") {
-      this.handleUpDownArrow(key);
-    }
-  }
-  handleLeftRightArrow(index, key) {
-    if (key) {
-      index = key === "ArrowLeft" ? index - 1 : index + 1;
-    }
-    if (index < 0) {
-      index = this.tabItems.length - 1;
-    }
-    else if (index === this.tabItems.length) {
-      index = 0;
-    }
-    const tabToFocus = this.tabItems[index];
-    this.getLinkEl(tabToFocus).focus();
-  }
-  handleUpDownArrow(key) {
-    if (key === "ArrowDown") {
-      // Focus panel when arrow down is pressed
-      if (this.selectedTab) {
-        const tabPanel = this.getPanel(this.selectedTab); //Find the currently displayed tab panel
-        if (tabPanel) {
-          tabPanel.focus();
-        }
-      }
-    }
-  }
-  /**
-   * Change layout if parent size drops below tab list width
-   */
-  setLayout() {
-    this.debouncedSetLayout();
-  }
-  renderMenuOrTabs() {
-    if (this.menuLayout) {
-      this.hideItems();
-      return (index.h("wm-select", { label: "Tab Selection", "label-position": "none" }, this.renderOptions()));
-    }
-    else {
-      this.showItems();
-      let margins = {};
-      if (this.customPadding) {
-        margins = {
-          "margin-left": "-" + this.customPadding,
-        };
-      }
-      return (index.h("ul", { class: `tabcontainer ${this.customBackground || ""}`, style: margins, role: "tablist" }, index.h("slot", null)));
-    }
-  }
-  renderOptions() {
-    return this.tabItems.map((t) => (index.h("wm-option", { id: `tab-link-${t.tabId}`, selected: t.tabId === this.selectedTab, onClick: (ev) => {
-        ev.preventDefault();
-        this.tabSelected.emit({ tabId: t.tabId });
-      } }, t.textContent)));
-  }
-  render() {
-    return index.h(index.Host, { class: this.menuLayout ? "menu" : "" }, this.renderMenuOrTabs());
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "selectedTab": ["setSelected"]
-  }; }
-};
-TabList.style = wmTabListCss;
-
-exports.wm_tab_list = TabList;