@watermarkinsights/ripple 3.27.0 → 3.27.1

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

@@ -1,217 +1,217 @@
-import { h, Host, forceUpdate, } from "@stencil/core";
-import { intl, throttle } from "../../global/functions";
-import { globalMessages } from "../../global/intl";
-export class Navigation {
-  constructor() {
-    this.mainNavigationMessage = intl.formatMessage({
-      id: "navigation.mainNavigation",
-      defaultMessage: "Main",
-      description: "Label describing the site navigation, for screen reader users",
-    });
-    this.throttledRerender = throttle(() => forceUpdate(this.el), 50);
-    this.open = false;
-    this.isTabbing = false;
-  }
-  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();
-  }
-  handleHamburgerClicked() {
-    this.open = !this.open;
-  }
-  handleClickOnItem() {
-    this.open = false;
-  }
-  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 = () => {
-      // in addition to delegatesFocus, we need to highjack the focus method to send focus to the appropriate element based on the navigation's state
-      const btn = this.open
-        ? this.el.shadowRoot.querySelector(".toggle")
-        : document.querySelector("wm-navigation-hamburger");
-      const firstItem = this.el.querySelector("wm-navigation-item");
-      this.isCollapsible ? btn.focus() : firstItem.focus();
-    };
-    if (this.isCollapsible && this.open) {
-      // hamburger needs to know if open was initially set to true
-      this.wmNavigationStateChanged.emit();
-      this.expand();
-    }
-  }
-  redirectFocusFromBody(ev) {
-    // the 2nd check excludes the case when user clicks on the page when the nav is open,
-    // which should not redirect focus
-    if (document.activeElement.tagName === "BODY" && !ev.relatedTarget) {
-      this.el.focus();
-    }
-  }
-  expand() {
-    // listen to focus on body and redirect to the component
-    // this is to handle trap focus when user has left the page (e.g. went to the address bar)
-    // and is tabbing back in
-    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);
-    //document.querySelector("wm-navigation")!.shadowRoot!.querySelector(".toggle")!.focus()
-  }
-  collapse() {
-    // rm event listener on body
-    document.body.tabIndex = -1;
-    document.body.removeEventListener("focus", this.redirectFocusFromBody.bind(this));
-    const hamburgerBtn = document.querySelector("wm-navigation-hamburger");
-    // should fail silently if el doesn't exist
-    // (dev may have chosen not to use the hamburger component)
-    if (hamburgerBtn)
-      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, { role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { class: "tray" }, 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 ? globalMessages.close : globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
-        this.open = !this.open;
-      } })), h("ul", { class: "navlist" }, h("slot", null))), this.isCollapsible && (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 delegatesFocus() { return true; }
-  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
-      }, {
-        "name": "wmNavigationHamburgerClicked",
-        "method": "handleHamburgerClicked",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "wmNavigationItemClicked",
-        "method": "handleClickOnItem",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
+import { h, Host, forceUpdate, } from "@stencil/core";
+import { intl, throttle } from "../../global/functions";
+import { globalMessages } from "../../global/intl";
+export class Navigation {
+  constructor() {
+    this.mainNavigationMessage = intl.formatMessage({
+      id: "navigation.mainNavigation",
+      defaultMessage: "Main",
+      description: "Label describing the site navigation, for screen reader users",
+    });
+    this.throttledRerender = throttle(() => forceUpdate(this.el), 50);
+    this.open = false;
+    this.isTabbing = false;
+  }
+  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();
+  }
+  handleHamburgerClicked() {
+    this.open = !this.open;
+  }
+  handleClickOnItem() {
+    this.open = false;
+  }
+  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 = () => {
+      // in addition to delegatesFocus, we need to highjack the focus method to send focus to the appropriate element based on the navigation's state
+      const btn = this.open
+        ? this.el.shadowRoot.querySelector(".toggle")
+        : document.querySelector("wm-navigation-hamburger");
+      const firstItem = this.el.querySelector("wm-navigation-item");
+      this.isCollapsible ? btn.focus() : firstItem.focus();
+    };
+    if (this.isCollapsible && this.open) {
+      // hamburger needs to know if open was initially set to true
+      this.wmNavigationStateChanged.emit();
+      this.expand();
+    }
+  }
+  redirectFocusFromBody(ev) {
+    // the 2nd check excludes the case when user clicks on the page when the nav is open,
+    // which should not redirect focus
+    if (document.activeElement.tagName === "BODY" && !ev.relatedTarget) {
+      this.el.focus();
+    }
+  }
+  expand() {
+    // listen to focus on body and redirect to the component
+    // this is to handle trap focus when user has left the page (e.g. went to the address bar)
+    // and is tabbing back in
+    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);
+    //document.querySelector("wm-navigation")!.shadowRoot!.querySelector(".toggle")!.focus()
+  }
+  collapse() {
+    // rm event listener on body
+    document.body.tabIndex = -1;
+    document.body.removeEventListener("focus", this.redirectFocusFromBody.bind(this));
+    const hamburgerBtn = document.querySelector("wm-navigation-hamburger");
+    // should fail silently if el doesn't exist
+    // (dev may have chosen not to use the hamburger component)
+    if (hamburgerBtn)
+      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, { role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { class: "tray" }, 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 ? globalMessages.close : globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
+        this.open = !this.open;
+      } })), h("ul", { class: "navlist" }, h("slot", null))), this.isCollapsible && (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 delegatesFocus() { return true; }
+  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
+      }, {
+        "name": "wmNavigationHamburgerClicked",
+        "method": "handleHamburgerClicked",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "wmNavigationItemClicked",
+        "method": "handleClickOnItem",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -1,106 +1,106 @@
-import { h } 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 delegatesFocus() { return true; }
-  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 { h } 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 delegatesFocus() { return true; }
+  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"; }
+}