@watermarkinsights/ripple 0.0.0 → 0.0.1

package/dist/collection/components/wm-tabs/wm-tab-item/wm-tab-item.js

@@ -1,202 +0,0 @@
-import { Component, Element, h, Prop, Event, Listen, Host } from "@stencil/core";
-export class TabItem {
-  constructor() {
-    /**
-     * 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 (h(Host, { role: "presentation" },
-      h("li", { class: "tab-item", role: "presentation" },
-        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 },
-          h("slot", null)))));
-  }
-  static get is() { return "wm-tab-item"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["wm-tab-item.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["wm-tab-item.css"]
-  }; }
-  static get properties() { return {
-    "selected": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates whether the tab is currently active"
-      },
-      "attribute": "selected",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "show": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "show",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "tabId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The id of the tab, linked to a tab panel."
-      },
-      "attribute": "tab-id",
-      "reflect": false,
-      "defaultValue": "\"\""
-    }
-  }; }
-  static get events() { return [{
-      "method": "tabSelected",
-      "name": "tabSelected",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "{ tabId: string }",
-        "resolved": "{ tabId: string; }",
-        "references": {}
-      }
-    }, {
-      "method": "keydownOnTabItem",
-      "name": "keydownOnTabItem",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "{\r\n    tabItem: HTMLWmTabItemElement;\r\n    key: string;\r\n  }",
-        "resolved": "{ tabItem: HTMLWmTabItemElement; key: string; }",
-        "references": {
-          "HTMLWmTabItemElement": {
-            "location": "global"
-          }
-        }
-      }
-    }, {
-      "method": "tabItemLoaded",
-      "name": "tabItemLoaded",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "{ tab: HTMLWmTabItemElement }",
-        "resolved": "{ tab: HTMLWmTabItemElement; }",
-        "references": {
-          "HTMLWmTabItemElement": {
-            "location": "global"
-          }
-        }
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "keydown",
-      "method": "toggleTabbingOn",
-      "target": "document",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "click",
-      "method": "toggleTabbingOff",
-      "target": "document",
-      "capture": false,
-      "passive": false
-    }]; }
-}

package/dist/collection/components/wm-tabs/wm-tab-list/wm-tab-list.css

@@ -1,73 +0,0 @@
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   6. Button Hover
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
-/********************************************************************************************/
-/* DO NOT USE THESE DIRECTLY, ASSIGN THEM TO VARIABLES NAMED AFTER FUNCTIONALITY, SEE BELOW */
-/********************************************************************************************/
-/* USAGE */
-/* BELOW IS BEFORE WE HAD THE COLOR PALETTE FROM UI */
-/* TODO: replace with vars above whenever possible */
-/* Buttons */
-/* VIA */
-: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;
-}

package/dist/collection/components/wm-tabs/wm-tab-list/wm-tab-list.js

@@ -1,315 +0,0 @@
-import { forceUpdate, Component, Prop, Element, h, Watch, Listen, Host, Event } from "@stencil/core";
-import { debounce } from "../../../global/functions";
-export class TabList {
-  constructor() {
-    /**
-     * 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 = debounce(() => {
-      if (!this.listWidth) {
-        this.setListWidth();
-      }
-      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 (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 (h("ul", { class: `tabcontainer ${this.customBackground || ""}`, style: margins, role: "tablist" },
-        h("slot", null)));
-    }
-  }
-  renderOptions() {
-    return this.tabItems.map((t) => (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 h(Host, { class: this.menuLayout ? "menu" : "" }, this.renderMenuOrTabs());
-  }
-  static get is() { return "wm-tab-list"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["wm-tab-list.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["wm-tab-list.css"]
-  }; }
-  static get properties() { return {
-    "customBackground": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"dark\" | \"\"",
-        "resolved": "\"\" | \"dark\" | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "custom-background",
-      "reflect": false
-    },
-    "customPadding": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "custom-padding",
-      "reflect": false
-    },
-    "selectedTab": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "selected-tab",
-      "reflect": false
-    },
-    "controllerEnabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "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."
-      },
-      "attribute": "controller-enabled",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get events() { return [{
-      "method": "tabSelected",
-      "name": "tabSelected",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted by wm-select options when tabs have the menu format"
-      },
-      "complexType": {
-        "original": "{ tabId: string }",
-        "resolved": "{ tabId: string; }",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "selectedTab",
-      "methodName": "setSelected"
-    }]; }
-  static get listeners() { return [{
-      "name": "tabItemLoaded",
-      "method": "tabItemLoaded",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "tabSelected",
-      "method": "handleTabSelected",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "keydownOnTabItem",
-      "method": "handleKeydown",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "resize",
-      "method": "setLayout",
-      "target": "window",
-      "capture": false,
-      "passive": true
-    }]; }
-}

package/dist/collection/components/wm-tabs/wm-tab-panel/wm-tab-panel.css

@@ -1,57 +0,0 @@
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   6. Button Hover
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
-/********************************************************************************************/
-/* DO NOT USE THESE DIRECTLY, ASSIGN THEM TO VARIABLES NAMED AFTER FUNCTIONALITY, SEE BELOW */
-/********************************************************************************************/
-/* USAGE */
-/* BELOW IS BEFORE WE HAD THE COLOR PALETTE FROM UI */
-/* TODO: replace with vars above whenever possible */
-/* Buttons */
-/* VIA */
-wm-tab-panel {
-  visibility: inherit;
-}
-wm-tab-panel.tab-hidden {
-  display: none;
-}
-wm-tab-panel:active {
-  outline: none;
-}
-wm-tab-panel:focus {
-  outline: none;
-}
-wm-tab-panel.user-is-tabbing:focus {
-  outline: -webkit-focus-ring-color auto 5px;
-}