@watermarkinsights/ripple 3.0.1-0 → 3.0.2-0

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

@@ -0,0 +1,202 @@
+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": "{\n    tabItem: HTMLWmTabItemElement;\n    key: string;\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

@@ -0,0 +1,73 @@
+/* --------------------------------------
+   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/{ripple/wm-tab-list.entry.js → collection/components/wm-tabs/wm-tab-list/wm-tab-list.js}

@@ -1,12 +1,7 @@
-import { r as registerInstance, e as createEvent, i as forceUpdate, h, f as Host, g as getElement } from './index-20b65f86.js';
-import { d as debounce } from './functions-316c1b23.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) {
-    registerInstance(this, hostRef);
-    this.tabSelected = createEvent(this, "tabSelected", 7);
+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.
      */
@@ -179,7 +174,8 @@ const TabList = class {
           "margin-left": "-" + this.customPadding,
         };
       }
-      return (h("ul", { class: `tabcontainer ${this.customBackground || ""}`, style: margins, role: "tablist" }, h("slot", null)));
+      return (h("ul", { class: `tabcontainer ${this.customBackground || ""}`, style: margins, role: "tablist" },
+        h("slot", null)));
     }
   }
   renderOptions() {
@@ -191,11 +187,129 @@ const TabList = class {
   render() {
     return h(Host, { class: this.menuLayout ? "menu" : "" }, this.renderMenuOrTabs());
   }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "selectedTab": ["setSelected"]
+  static get is() { return "wm-tab-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["wm-tab-list.scss"]
   }; }
-};
-TabList.style = wmTabListCss;
-
-export { TabList as wm_tab_list };
+  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

@@ -0,0 +1,57 @@
+/* --------------------------------------
+   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;
+}

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

@@ -0,0 +1,104 @@
+import { Component, Element, Prop, Host, h, Event, Listen } from "@stencil/core";
+import { generateId } from "../../../global/functions";
+export class TabPanel {
+  constructor() {
+    /**
+     * Indicates whether the panel should be displayed or not.
+     */
+    this.active = false;
+    /**
+     * The id of the panel, linked to a tabItem in the tablist.
+     */
+    this.tabId = "";
+  }
+  componentWillLoad() {
+    !this.el.id && this.el.setAttribute("id", generateId());
+  }
+  componentDidLoad() {
+    this.tabPanelLoaded.emit({ tabId: this.tabId });
+  }
+  toggleTabbingOn() {
+    this.el.classList.add("user-is-tabbing");
+  }
+  toggleTabbingOff() {
+    this.el.classList.remove("user-is-tabbing");
+  }
+  render() {
+    return (h(Host, { role: "tabpanel", "aria-hidden": this.active ? "false" : "true", class: { "tab-hidden": !this.active }, onBlur: () => (this.el.tabIndex = -1), tabIndex: -1 }));
+  }
+  static get is() { return "wm-tab-panel"; }
+  static get originalStyleUrls() { return {
+    "$": ["wm-tab-panel.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["wm-tab-panel.css"]
+  }; }
+  static get properties() { return {
+    "active": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates whether the panel should be displayed or not."
+      },
+      "attribute": "active",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "tabId": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The id of the panel, linked to a tabItem in the tablist."
+      },
+      "attribute": "tab-id",
+      "reflect": false,
+      "defaultValue": "\"\""
+    }
+  }; }
+  static get events() { return [{
+      "method": "tabPanelLoaded",
+      "name": "tabPanelLoaded",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{ tabId: string }",
+        "resolved": "{ tabId: string; }",
+        "references": {}
+      }
+    }]; }
+  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
+    }]; }
+}