@watermarkinsights/ripple 3.8.0-2 → 3.8.0-5

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

@@ -1,142 +1,193 @@
-import { h, Component, Element, Prop, State, Listen, Host, Watch, Event } from "@stencil/core";
-import { intl } from "../../global/functions";
-export class Navigation {
-  constructor() {
-    this.open = false;
-    this.isTabbing = false;
-    this.openTooltipMessage = intl.formatMessage({
-      id: "global.openVerb",
-      defaultMessage: "Open",
-      description: "For a button, to open a user interface element",
-    });
-    this.closeTooltipMessage = intl.formatMessage({
-      id: "global.closeVerb",
-      defaultMessage: "Close",
-      description: "For a button, to close a user interface element",
-    });
-  }
-  get ariaExpanded() {
-    return window.innerWidth < 1024
-      ? // if component is in collapsible mode, set aria-expanded according to expanded state
-        this.open.toString()
-      : // otherwise, do not render attr at all
-        undefined;
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  componentWillLoad() {
-    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
-      this.toggleTabbingOn();
-    }
-    this.el.focus = function () {
-      this.shadowRoot.querySelector(".toggle").focus();
-      /*
-      // prevent tooltip from showing on programmatic focus
-      requestAnimationFrame(() => {
-        this.tooltipVisible = false;
-      });
-       */
-    };
-  }
-  componentDidLoad() {
-    // Should fail silently if not found as devs may decide not to use the hamburger component.
-    this.hamburgerBtn = document.querySelector("wm-navigation-hamburger");
-  }
-  updateHamburgerState() {
-    this.wmNavigationStateChanged.emit({ open: this.open });
-    if (this.open) {
-      // wait for nav to be expanded otherwise tooltip will be misplaced.
-      // also btn can't be focused right away.
-      setTimeout(() => this.toggleEl.focus(), 250);
-    }
-    else {
-      // should fail silently if el doesn't exist
-      this.hamburgerBtn && this.hamburgerBtn.focus();
-    }
-  }
-  renderOverlay() {
-    return (h("div", { class: "overlay", onClick: () => {
-        this.open = false;
-      } }));
-  }
-  render() {
-    return (h(Host, null,
-      this.open ? this.renderOverlay() : "",
-      h("nav", { class: "nav", "aria-expanded": this.ariaExpanded },
-        h("div", { class: "toggle-wrapper" },
-          h("wm-button", { ref: (el) => (this.toggleEl = el), class: `toggle ${this.isTabbing ? "user-is-tabbing" : ""}`, "button-type": "navigational", icon: this.open ? "f156" : "f35c", "icon-size": "2rem", tooltip: this.open ? this.closeTooltipMessage : this.openTooltipMessage, "tooltip-position": "left", tabIndex: this.open ? undefined : -1, onClick: () => {
-              this.open = !this.open;
-            } })),
-        h("ul", { class: "navlist" },
-          h("slot", null)))));
-  }
-  static get is() { return "wm-navigation"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["wm-navigation.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["wm-navigation.css"]
-  }; }
-  static get properties() { return {
-    "open": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "open",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "isTabbing": {}
-  }; }
-  static get events() { return [{
-      "method": "wmNavigationStateChanged",
-      "name": "wmNavigationStateChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "open",
-      "methodName": "updateHamburgerState"
-    }]; }
-  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, Element, Prop, State, Listen, Host, Watch, Event, forceUpdate, } from "@stencil/core";
+import { intl, throttle } from "../../global/functions";
+export class Navigation {
+  constructor() {
+    this.open = false;
+    this.isTabbing = false;
+    this.mainNavigationMessage = intl.formatMessage({
+      id: "navigation.mainNavigation",
+      defaultMessage: "Main navigation",
+      description: "Label describing the site navigation, for screen reader users",
+    });
+    this.openTooltipMessage = intl.formatMessage({
+      id: "global.openVerb",
+      defaultMessage: "Open",
+      description: "For a button, to open a user interface element",
+    });
+    this.closeTooltipMessage = intl.formatMessage({
+      id: "global.closeVerb",
+      defaultMessage: "Close",
+      description: "For a button, to close a user interface element",
+    });
+    this.throttledRerender = throttle(() => forceUpdate(this.el), 50);
+  }
+  get isCollapsible() {
+    return window.innerWidth < 1024;
+  }
+  get ariaExpanded() {
+    return this.isCollapsible
+      ? // if component is in collapsible mode, set aria-expanded according to expanded state
+        this.open.toString()
+      : // otherwise, do not render attr at all
+        undefined;
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  closeOnEscape(ev) {
+    if (ev.key === "Escape") {
+      this.open = false;
+    }
+  }
+  handleWindowResize() {
+    // for component to react when breakpoint is crossed
+    // (doesn't rerender on window resize)
+    this.throttledRerender();
+  }
+  handleStateChange() {
+    if (this.isCollapsible) {
+      this.wmNavigationStateChanged.emit();
+      this.open ? this.expand() : this.collapse();
+    }
+  }
+  componentWillLoad() {
+    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+      this.toggleTabbingOn();
+    }
+    this.el.focus = function () {
+      this.shadowRoot.querySelector(".toggle").focus();
+    };
+    if (this.isCollapsible && this.open) {
+      // hamburger needs to know if open was initially set to true
+      this.wmNavigationStateChanged.emit();
+      this.expand();
+    }
+  }
+  componentDidLoad() {
+    // Should fail silently if not found as devs may decide not to use the hamburger component.
+    this.hamburgerBtn = document.querySelector("wm-navigation-hamburger");
+  }
+  redirectFocusFromBody() {
+    if (document.activeElement.tagName === "BODY") {
+      this.el.focus();
+    }
+  }
+  expand() {
+    // listen to focus on body and redirect to the component
+    document.body.tabIndex = 0;
+    document.body.addEventListener("focus", this.redirectFocusFromBody.bind(this), true);
+    // wait for nav to be expanded otherwise tooltip will be misplaced.
+    setTimeout(() => this.toggleEl.focus(), 250);
+  }
+  collapse() {
+    // rm event listener on body
+    document.body.tabIndex = -1;
+    document.body.removeEventListener("focus", this.redirectFocusFromBody.bind(this));
+    // should fail silently if el doesn't exist
+    // (dev may have chosen not to use the hamburger component)
+    this.hamburgerBtn && this.hamburgerBtn.focus();
+  }
+  focusLastItem() {
+    const items = this.el.querySelectorAll("wm-navigation-item");
+    const lastItem = Array.from(items).pop();
+    lastItem.focus();
+  }
+  renderOverlay() {
+    return (h("div", { class: "overlay", onClick: () => {
+        this.open = false;
+      } }));
+  }
+  render() {
+    return (h(Host, { class: this.isCollapsible ? "collapsible" : undefined },
+      this.open ? this.renderOverlay() : "",
+      h("div", { class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() }),
+      h("nav", { class: "nav", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage },
+        h("div", { class: "toggle-wrapper" },
+          h("wm-button", { ref: (el) => (this.toggleEl = el), class: `toggle ${this.isTabbing ? "user-is-tabbing" : ""}`, "button-type": "navigational", icon: this.open ? "f156" : "f35c", "icon-size": "2rem", tooltip: this.open ? this.closeTooltipMessage : this.openTooltipMessage, "tooltip-position": "left", tabIndex: this.open ? undefined : -1, onClick: () => {
+              this.open = !this.open;
+            } })),
+        h("ul", { class: "navlist" },
+          h("slot", null))),
+      h("div", { class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() })));
+  }
+  static get is() { return "wm-navigation"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["wm-navigation.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["wm-navigation.css"]
+  }; }
+  static get properties() { return {
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "isTabbing": {}
+  }; }
+  static get events() { return [{
+      "method": "wmNavigationStateChanged",
+      "name": "wmNavigationStateChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "open",
+      "methodName": "handleStateChange"
+    }]; }
+  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": "keydown",
+      "method": "closeOnEscape",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "resize",
+      "method": "handleWindowResize",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }]; }
+}

package/dist/collection/components/wm-navigator/priv-navigator-button/priv-navigator-button.js

@@ -1,97 +1,97 @@
-import { Component, Element, h, Prop, Event } from "@stencil/core";
-export class PrivNavigatorButton {
-  constructor() {
-    this.expanded = false;
-    this.altText = "";
-    this.isTabbing = false;
-  }
-  handleClick() {
-    this.buttonActivated.emit();
-  }
-  render() {
-    const { handleClick, altText } = this;
-    const tabbingClass = this.isTabbing ? "user-is-tabbing" : "";
-    return (h("button", { "aria-expanded": this.expanded.toString(), class: `navigator ${tabbingClass}`, onClick: handleClick.bind(this), "aria-label": altText }));
-  }
-  static get is() { return "priv-navigator-button"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["priv-navigator-button.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["priv-navigator-button.css"]
-  }; }
-  static get properties() { return {
-    "expanded": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "expanded",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "altText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "alt-text",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "isTabbing": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-tabbing",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get events() { return [{
-      "method": "buttonActivated",
-      "name": "buttonActivated",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-}
+import { Component, Element, h, Prop, Event } from "@stencil/core";
+export class PrivNavigatorButton {
+  constructor() {
+    this.expanded = false;
+    this.altText = "";
+    this.isTabbing = false;
+  }
+  handleClick() {
+    this.buttonActivated.emit();
+  }
+  render() {
+    const { handleClick, altText } = this;
+    const tabbingClass = this.isTabbing ? "user-is-tabbing" : "";
+    return (h("button", { "aria-expanded": this.expanded.toString(), class: `navigator ${tabbingClass}`, onClick: handleClick.bind(this), "aria-label": altText }));
+  }
+  static get is() { return "priv-navigator-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["priv-navigator-button.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["priv-navigator-button.css"]
+  }; }
+  static get properties() { return {
+    "expanded": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "expanded",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "altText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "alt-text",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "isTabbing": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-tabbing",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "buttonActivated",
+      "name": "buttonActivated",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+}