@watermarkinsights/ripple 3.14.1 → 3.15.0-2

package/dist/collection/components/wm-navigation/wm-navigation-hamburger.js

@@ -1,162 +1,162 @@
-import { h, Component, Element, Host, Prop, Listen, Event, State } from "@stencil/core";
-import { intl } from "../../global/functions";
-export class NavigationHamburger {
-  constructor() {
-    this.tooltipVisible = false; // this is not part of the documented API but we need to expose as prop in order to change it from the focus method defined in WillLoad()
-    this.isTabbing = false;
-    this.open = false;
-    this.showNavMessage = intl.formatMessage({
-      id: "navigation.showNavigation",
-      defaultMessage: "Show navigation",
-      description: "For user interface element opening a navigation menu",
-    });
-  }
-  get tooltipEl() {
-    return document.getElementById("wm-tooltip");
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  // this also works on initial load because event is fired then
-  handleNavigationStateChanged(ev) {
-    this.open = ev.target.open;
-  }
-  componentWillLoad() {
-    this.el.focus = function () {
-      // if (!this.disabled) {
-      this.shadowRoot.querySelector("button").focus();
-      // prevent tooltip from showing on programmatic focus
-      requestAnimationFrame(() => {
-        this.tooltipVisible = false;
-      });
-      // }
-    };
-    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
-      this.toggleTabbingOn();
-    }
-    if (!this.navId) {
-      console.error("wm-navigation-hamburger: nav-id is a required prop");
-    }
-  }
-  showTooltip() {
-    this.tooltipEl.textContent = this.showNavMessage;
-    this.tooltipEl.style.top = "1.125rem";
-    this.tooltipEl.style.left = "2.75rem";
-    this.tooltipEl.style.transitionDelay = "500ms";
-    this.tooltipEl.style.opacity = "1";
-    // tooltip is only visible after the transition delay.
-    // This also fixes an issue for keyboard users:
-    // if they tab to a button out of screen bounds, the page scrolls
-    // and hideTooltip() would be triggered before the tooltip would show
-    setTimeout(() => {
-      this.tooltipVisible = true;
-    }, 500);
-  }
-  hideTooltip() {
-    this.tooltipEl.style.transitionDelay = "0s";
-    this.tooltipEl.style.opacity = "0";
-    this.tooltipVisible = false;
-  }
-  showTooltipForKeyboardUsers() {
-    if (this.isTabbing) {
-      this.showTooltip();
-    }
-  }
-  handleClick() {
-    this.hideTooltip();
-    this.wmNavigationHamburgerClicked.emit();
-  }
-  render() {
-    return (h(Host, { class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` },
-      h("button", { class: this.isTabbing ? "user-is-tabbing" : undefined, "aria-expanded": this.open, "aria-controls": this.navId, "aria-label": this.showNavMessage, onMouseEnter: () => this.showTooltip(), onMouseLeave: () => this.hideTooltip(), onFocus: () => this.showTooltipForKeyboardUsers(), onBlur: () => this.hideTooltip(), onClick: () => this.handleClick() },
-        h("span", { class: "icon" }))));
-  }
-  static get is() { return "wm-navigation-hamburger"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["wm-navigation-hamburger.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["wm-navigation-hamburger.css"]
-  }; }
-  static get properties() { return {
-    "navId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "nav-id",
-      "reflect": false
-    },
-    "tooltipVisible": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "tooltip-visible",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "isTabbing": {},
-    "open": {}
-  }; }
-  static get events() { return [{
-      "method": "wmNavigationHamburgerClicked",
-      "name": "wmNavigationHamburgerClicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "wmUserIsTabbing",
-      "method": "toggleTabbingOn",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "wmUserIsNotTabbing",
-      "method": "toggleTabbingOff",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "wmNavigationStateChanged",
-      "method": "handleNavigationStateChanged",
-      "target": "document",
-      "capture": false,
-      "passive": false
-    }]; }
-}
+import { h, Component, Element, Host, Prop, Listen, Event, State } from "@stencil/core";
+import { intl } from "../../global/functions";
+export class NavigationHamburger {
+  constructor() {
+    this.tooltipVisible = false; // this is not part of the documented API but we need to expose as prop in order to change it from the focus method defined in WillLoad()
+    this.isTabbing = false;
+    this.open = false;
+    this.showNavMessage = intl.formatMessage({
+      id: "navigation.showNavigation",
+      defaultMessage: "Show navigation",
+      description: "For user interface element opening a navigation menu",
+    });
+  }
+  get tooltipEl() {
+    return document.getElementById("wm-tooltip");
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  // this also works on initial load because event is fired then
+  handleNavigationStateChanged(ev) {
+    this.open = ev.target.open;
+  }
+  componentWillLoad() {
+    this.el.focus = function () {
+      // if (!this.disabled) {
+      this.shadowRoot.querySelector("button").focus();
+      // prevent tooltip from showing on programmatic focus
+      requestAnimationFrame(() => {
+        this.tooltipVisible = false;
+      });
+      // }
+    };
+    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+      this.toggleTabbingOn();
+    }
+    if (!this.navId) {
+      console.error("wm-navigation-hamburger: nav-id is a required prop");
+    }
+  }
+  showTooltip() {
+    this.tooltipEl.textContent = this.showNavMessage;
+    this.tooltipEl.style.top = "1.125rem";
+    this.tooltipEl.style.left = "2.75rem";
+    this.tooltipEl.style.transitionDelay = "500ms";
+    this.tooltipEl.style.opacity = "1";
+    // tooltip is only visible after the transition delay.
+    // This also fixes an issue for keyboard users:
+    // if they tab to a button out of screen bounds, the page scrolls
+    // and hideTooltip() would be triggered before the tooltip would show
+    setTimeout(() => {
+      this.tooltipVisible = true;
+    }, 500);
+  }
+  hideTooltip() {
+    this.tooltipEl.style.transitionDelay = "0s";
+    this.tooltipEl.style.opacity = "0";
+    this.tooltipVisible = false;
+  }
+  showTooltipForKeyboardUsers() {
+    if (this.isTabbing) {
+      this.showTooltip();
+    }
+  }
+  handleClick() {
+    this.hideTooltip();
+    this.wmNavigationHamburgerClicked.emit();
+  }
+  render() {
+    return (h(Host, { class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` },
+      h("button", { class: this.isTabbing ? "user-is-tabbing" : undefined, "aria-expanded": this.open, "aria-controls": this.navId, "aria-label": this.showNavMessage, onMouseEnter: () => this.showTooltip(), onMouseLeave: () => this.hideTooltip(), onFocus: () => this.showTooltipForKeyboardUsers(), onBlur: () => this.hideTooltip(), onClick: () => this.handleClick() },
+        h("span", { class: "icon" }))));
+  }
+  static get is() { return "wm-navigation-hamburger"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["wm-navigation-hamburger.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["wm-navigation-hamburger.css"]
+  }; }
+  static get properties() { return {
+    "navId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "nav-id",
+      "reflect": false
+    },
+    "tooltipVisible": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "tooltip-visible",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "isTabbing": {},
+    "open": {}
+  }; }
+  static get events() { return [{
+      "method": "wmNavigationHamburgerClicked",
+      "name": "wmNavigationHamburgerClicked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "wmUserIsTabbing",
+      "method": "toggleTabbingOn",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "wmUserIsNotTabbing",
+      "method": "toggleTabbingOff",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "wmNavigationStateChanged",
+      "method": "handleNavigationStateChanged",
+      "target": "document",
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/wm-navigation/wm-navigation-item.js

@@ -1,121 +1,121 @@
-import { h, Component, Prop, Element, Host, State, Listen, Event } from "@stencil/core";
-export class NavigationItem {
-  constructor() {
-    this.isTabbing = false;
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  componentWillLoad() {
-    this.el.focus = function () {
-      this.shadowRoot.querySelector(".link").focus();
-    };
-    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
-      this.toggleTabbingOn();
-    }
-  }
-  render() {
-    return (h(Host, { role: "listitem" },
-      h("a", { class: `link ${this.active ? "active" : ""} ${this.isTabbing ? "user-is-tabbing" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() },
-        h("div", { class: "icon", "aria-hidden": "true" },
-          h("slot", null)),
-        h("div", { class: "text" }, this.text))));
-  }
-  static get is() { return "wm-navigation-item"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["wm-navigation-item.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["wm-navigation-item.css"]
-  }; }
-  static get properties() { return {
-    "href": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "href",
-      "reflect": false
-    },
-    "text": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "text",
-      "reflect": false
-    },
-    "active": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "active",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "isTabbing": {}
-  }; }
-  static get events() { return [{
-      "method": "wmNavigationItemClicked",
-      "name": "wmNavigationItemClicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "wmUserIsTabbing",
-      "method": "toggleTabbingOn",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "wmUserIsNotTabbing",
-      "method": "toggleTabbingOff",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }]; }
-}
+import { h, Component, Prop, Element, Host, State, Listen, Event } from "@stencil/core";
+export class NavigationItem {
+  constructor() {
+    this.isTabbing = false;
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  componentWillLoad() {
+    this.el.focus = function () {
+      this.shadowRoot.querySelector(".link").focus();
+    };
+    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+      this.toggleTabbingOn();
+    }
+  }
+  render() {
+    return (h(Host, { role: "listitem" },
+      h("a", { class: `link ${this.active ? "active" : ""} ${this.isTabbing ? "user-is-tabbing" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() },
+        h("div", { class: "icon", "aria-hidden": "true" },
+          h("slot", null)),
+        h("div", { class: "text" }, this.text))));
+  }
+  static get is() { return "wm-navigation-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["wm-navigation-item.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["wm-navigation-item.css"]
+  }; }
+  static get properties() { return {
+    "href": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "href",
+      "reflect": false
+    },
+    "text": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "text",
+      "reflect": false
+    },
+    "active": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "active",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "isTabbing": {}
+  }; }
+  static get events() { return [{
+      "method": "wmNavigationItemClicked",
+      "name": "wmNavigationItemClicked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "wmUserIsTabbing",
+      "method": "toggleTabbingOn",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "wmUserIsNotTabbing",
+      "method": "toggleTabbingOff",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }]; }
+}