@watermarkinsights/ripple 3.6.0 → 3.7.0-3

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

@@ -1,219 +1,216 @@
-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.wmTabSelected.emit({ tabId: this.tabId });
-      this.tabSelected.emit({ tabId: this.tabId }); // deprecated
-    };
-    this.tabPressed = (ev) => {
-      const key = ev.key;
-      if (key === "Enter" || key === " ") {
-        ev.preventDefault();
-        this.wmTabSelected.emit({ tabId: this.tabId });
-        this.tabSelected.emit({ tabId: this.tabId }); // deprecated
-      }
-      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": "wmTabSelected",
-      "name": "wmTabSelected",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "{ tabId: string }",
-        "resolved": "{ tabId: string; }",
-        "references": {}
-      }
-    }, {
-      "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
-    }]; }
-}
+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.wmTabSelected.emit({ tabId: this.tabId });
+      this.tabSelected.emit({ tabId: this.tabId }); // deprecated
+    };
+    this.tabPressed = (ev) => {
+      const key = ev.key;
+      if (key === "Enter" || key === " ") {
+        ev.preventDefault();
+        this.wmTabSelected.emit({ tabId: this.tabId });
+        this.tabSelected.emit({ tabId: this.tabId }); // deprecated
+      }
+      else if (key.includes("Arrow")) {
+        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": "wmTabSelected",
+      "name": "wmTabSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{ tabId: string }",
+        "resolved": "{ tabId: string; }",
+        "references": {}
+      }
+    }, {
+      "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
+    }]; }
+}