@watermarkinsights/ripple 3.25.0-2 → 3.25.0

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

@@ -1,223 +1,218 @@
-import { h, Host, forceUpdate, } from "@stencil/core";
-import { intl, throttle } from "../../global/functions";
-import { closeVerb } 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.openTooltipMessage = intl.formatMessage({
-      id: "global.openVerb",
-      defaultMessage: "Open",
-      description: "For a button, to open a user interface element",
-    });
-    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 ? closeVerb : this.openTooltipMessage, "tooltip-position": "left", 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
-      }];
-  }
-}
-//# sourceMappingURL=wm-navigation.js.map
+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": "left", 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
+      }];
+  }
+}
+//# sourceMappingURL=wm-navigation.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"wm-navigation.js","sourceRoot":"","sources":["../../../../src/components/wm-navigation/wm-navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  h,\r\n  Component,\r\n  Element,\r\n  Prop,\r\n  State,\r\n  Listen,\r\n  Host,\r\n  Watch,\r\n  Event,\r\n  EventEmitter,\r\n  forceUpdate,\r\n} from \"@stencil/core\";\r\nimport { intl, throttle } from \"../../global/functions\";\r\nimport { closeVerb } from \"../../global/intl\";\r\n\r\n@Component({\r\n  tag: \"wm-navigation\",\r\n  styleUrl: \"wm-navigation.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class Navigation {\r\n  @Element() el!: HTMLWmNavigationElement;\r\n  toggleEl!: HTMLWmButtonElement;\r\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\r\n\r\n  @State() isTabbing: boolean = false;\r\n  @Event() wmNavigationStateChanged!: EventEmitter;\r\n\r\n  private mainNavigationMessage: string = intl.formatMessage({\r\n    id: \"navigation.mainNavigation\",\r\n    defaultMessage: \"Main\",\r\n    description: \"Label describing the site navigation, for screen reader users\",\r\n  });\r\n\r\n  private openTooltipMessage: string = intl.formatMessage({\r\n    id: \"global.openVerb\",\r\n    defaultMessage: \"Open\",\r\n    description: \"For a button, to open a user interface element\",\r\n  });\r\n\r\n  get isCollapsible() {\r\n    return window.innerWidth < 1024;\r\n  }\r\n\r\n  get ariaExpanded() {\r\n    return this.isCollapsible\r\n      ? // if component is in collapsible mode, set aria-expanded according to expanded state\r\n        this.open.toString()\r\n      : // otherwise, do not render attr at all\r\n        undefined;\r\n  }\r\n\r\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\r\n  toggleTabbingOn() {\r\n    this.isTabbing = true;\r\n  }\r\n\r\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\r\n  toggleTabbingOff() {\r\n    this.isTabbing = false;\r\n  }\r\n\r\n  @Listen(\"keydown\")\r\n  closeOnEscape(ev: KeyboardEvent) {\r\n    if (ev.key === \"Escape\") {\r\n      this.open = false;\r\n    }\r\n  }\r\n\r\n  throttledRerender = throttle(() => forceUpdate(this.el), 50);\r\n\r\n  @Listen(\"resize\", { target: \"window\" })\r\n  handleWindowResize() {\r\n    // for component to react when breakpoint is crossed\r\n    // (doesn't rerender on window resize)\r\n    this.throttledRerender();\r\n  }\r\n\r\n  @Listen(\"wmNavigationHamburgerClicked\", { target: \"window\" })\r\n  handleHamburgerClicked() {\r\n    this.open = !this.open;\r\n  }\r\n\r\n  @Listen(\"wmNavigationItemClicked\")\r\n  handleClickOnItem() {\r\n    this.open = false;\r\n  }\r\n\r\n  @Watch(\"open\")\r\n  handleStateChange() {\r\n    if (this.isCollapsible) {\r\n      this.wmNavigationStateChanged.emit();\r\n      this.open ? this.expand() : this.collapse();\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\r\n      this.toggleTabbingOn();\r\n    }\r\n\r\n    this.el.focus = () => {\r\n      // in addition to delegatesFocus, we need to highjack the focus method to send focus to the appropriate element based on the navigation's state\r\n      const btn = this.open\r\n        ? (this.el.shadowRoot!.querySelector(\".toggle\")! as HTMLWmButtonElement)\r\n        : (document.querySelector(\"wm-navigation-hamburger\") as HTMLWmNavigationHamburgerElement);\r\n      const firstItem = this.el.querySelector(\"wm-navigation-item\")! as HTMLWmNavigationItemElement;\r\n      this.isCollapsible ? btn.focus() : firstItem.focus();\r\n    };\r\n\r\n    if (this.isCollapsible && this.open) {\r\n      // hamburger needs to know if open was initially set to true\r\n      this.wmNavigationStateChanged.emit();\r\n      this.expand();\r\n    }\r\n  }\r\n\r\n  redirectFocusFromBody(ev: FocusEvent) {\r\n    // the 2nd check excludes the case when user clicks on the page when the nav is open,\r\n    // which should not redirect focus\r\n    if ((document.activeElement as HTMLElement).tagName === \"BODY\" && !ev.relatedTarget) {\r\n      this.el.focus();\r\n    }\r\n  }\r\n\r\n  expand() {\r\n    // listen to focus on body and redirect to the component\r\n    // this is to handle trap focus when user has left the page (e.g. went to the address bar)\r\n    // and is tabbing back in\r\n    document.body.tabIndex = 0;\r\n    document.body.addEventListener(\"focus\", this.redirectFocusFromBody.bind(this), true);\r\n\r\n    // wait for nav to be expanded otherwise tooltip will be misplaced.\r\n    setTimeout(() => this.toggleEl.focus(), 250);\r\n    //document.querySelector(\"wm-navigation\")!.shadowRoot!.querySelector(\".toggle\")!.focus()\r\n  }\r\n\r\n  collapse() {\r\n    // rm event listener on body\r\n    document.body.tabIndex = -1;\r\n    document.body.removeEventListener(\"focus\", this.redirectFocusFromBody.bind(this));\r\n\r\n    const hamburgerBtn = document.querySelector(\"wm-navigation-hamburger\");\r\n    // should fail silently if el doesn't exist\r\n    // (dev may have chosen not to use the hamburger component)\r\n    if (hamburgerBtn) hamburgerBtn.focus();\r\n  }\r\n\r\n  focusLastItem() {\r\n    const items = this.el.querySelectorAll(\"wm-navigation-item\");\r\n    const lastItem = Array.from(items).pop() as HTMLWmNavigationItemElement;\r\n    lastItem.focus();\r\n  }\r\n\r\n  renderOverlay() {\r\n    return (\r\n      <div\r\n        class=\"overlay\"\r\n        onClick={() => {\r\n          this.open = false;\r\n        }}\r\n      ></div>\r\n    );\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host role=\"navigation\" aria-expanded={this.ariaExpanded} aria-label={this.mainNavigationMessage}>\r\n        {this.open ? this.renderOverlay() : \"\"}\r\n        {this.isCollapsible && (\r\n          <div class=\"trapfocus\" tabindex={this.open ? 0 : undefined} onFocus={() => this.focusLastItem()}></div>\r\n        )}\r\n        <div class=\"tray\">\r\n          <div class=\"toggle-wrapper\">\r\n            <wm-button\r\n              ref={(el) => (this.toggleEl = el as HTMLWmButtonElement)}\r\n              class={`toggle ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}\r\n              button-type=\"navigational\"\r\n              icon={this.open ? \"f156\" : \"f35c\"}\r\n              icon-size=\"2rem\"\r\n              tooltip={this.open ? closeVerb : this.openTooltipMessage}\r\n              tooltip-position=\"left\"\r\n              tabIndex={this.open ? undefined : -1}\r\n              onClick={() => {\r\n                this.open = !this.open;\r\n              }}\r\n            />\r\n          </div>\r\n          <ul class=\"navlist\">\r\n            <slot />\r\n          </ul>\r\n        </div>\r\n        {this.isCollapsible && (\r\n          <div class=\"trapfocus\" tabindex={this.open ? 0 : undefined} onFocus={() => this.toggleEl.focus()}></div>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"wm-navigation.js","sourceRoot":"","sources":["../../../../src/components/wm-navigation/wm-navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  h,\n  Component,\n  Element,\n  Prop,\n  State,\n  Listen,\n  Host,\n  Watch,\n  Event,\n  EventEmitter,\n  forceUpdate,\n} from \"@stencil/core\";\nimport { intl, throttle } from \"../../global/functions\";\nimport { globalMessages } from \"../../global/intl\";\n\n@Component({\n  tag: \"wm-navigation\",\n  styleUrl: \"wm-navigation.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class Navigation {\n  @Element() el!: HTMLWmNavigationElement;\n  toggleEl!: HTMLWmButtonElement;\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\n\n  @State() isTabbing: boolean = false;\n  @Event() wmNavigationStateChanged!: EventEmitter;\n\n  private mainNavigationMessage: string = intl.formatMessage({\n    id: \"navigation.mainNavigation\",\n    defaultMessage: \"Main\",\n    description: \"Label describing the site navigation, for screen reader users\",\n  });\n\n  get isCollapsible() {\n    return window.innerWidth < 1024;\n  }\n\n  get ariaExpanded() {\n    return this.isCollapsible\n      ? // if component is in collapsible mode, set aria-expanded according to expanded state\n        this.open.toString()\n      : // otherwise, do not render attr at all\n        undefined;\n  }\n\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\n  toggleTabbingOn() {\n    this.isTabbing = true;\n  }\n\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\n  toggleTabbingOff() {\n    this.isTabbing = false;\n  }\n\n  @Listen(\"keydown\")\n  closeOnEscape(ev: KeyboardEvent) {\n    if (ev.key === \"Escape\") {\n      this.open = false;\n    }\n  }\n\n  throttledRerender = throttle(() => forceUpdate(this.el), 50);\n\n  @Listen(\"resize\", { target: \"window\" })\n  handleWindowResize() {\n    // for component to react when breakpoint is crossed\n    // (doesn't rerender on window resize)\n    this.throttledRerender();\n  }\n\n  @Listen(\"wmNavigationHamburgerClicked\", { target: \"window\" })\n  handleHamburgerClicked() {\n    this.open = !this.open;\n  }\n\n  @Listen(\"wmNavigationItemClicked\")\n  handleClickOnItem() {\n    this.open = false;\n  }\n\n  @Watch(\"open\")\n  handleStateChange() {\n    if (this.isCollapsible) {\n      this.wmNavigationStateChanged.emit();\n      this.open ? this.expand() : this.collapse();\n    }\n  }\n\n  componentWillLoad() {\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\n      this.toggleTabbingOn();\n    }\n\n    this.el.focus = () => {\n      // in addition to delegatesFocus, we need to highjack the focus method to send focus to the appropriate element based on the navigation's state\n      const btn = this.open\n        ? (this.el.shadowRoot!.querySelector(\".toggle\")! as HTMLWmButtonElement)\n        : (document.querySelector(\"wm-navigation-hamburger\") as HTMLWmNavigationHamburgerElement);\n      const firstItem = this.el.querySelector(\"wm-navigation-item\")! as HTMLWmNavigationItemElement;\n      this.isCollapsible ? btn.focus() : firstItem.focus();\n    };\n\n    if (this.isCollapsible && this.open) {\n      // hamburger needs to know if open was initially set to true\n      this.wmNavigationStateChanged.emit();\n      this.expand();\n    }\n  }\n\n  redirectFocusFromBody(ev: FocusEvent) {\n    // the 2nd check excludes the case when user clicks on the page when the nav is open,\n    // which should not redirect focus\n    if ((document.activeElement as HTMLElement).tagName === \"BODY\" && !ev.relatedTarget) {\n      this.el.focus();\n    }\n  }\n\n  expand() {\n    // listen to focus on body and redirect to the component\n    // this is to handle trap focus when user has left the page (e.g. went to the address bar)\n    // and is tabbing back in\n    document.body.tabIndex = 0;\n    document.body.addEventListener(\"focus\", this.redirectFocusFromBody.bind(this), true);\n\n    // wait for nav to be expanded otherwise tooltip will be misplaced.\n    setTimeout(() => this.toggleEl.focus(), 250);\n    //document.querySelector(\"wm-navigation\")!.shadowRoot!.querySelector(\".toggle\")!.focus()\n  }\n\n  collapse() {\n    // rm event listener on body\n    document.body.tabIndex = -1;\n    document.body.removeEventListener(\"focus\", this.redirectFocusFromBody.bind(this));\n\n    const hamburgerBtn = document.querySelector(\"wm-navigation-hamburger\");\n    // should fail silently if el doesn't exist\n    // (dev may have chosen not to use the hamburger component)\n    if (hamburgerBtn) hamburgerBtn.focus();\n  }\n\n  focusLastItem() {\n    const items = this.el.querySelectorAll(\"wm-navigation-item\");\n    const lastItem = Array.from(items).pop() as HTMLWmNavigationItemElement;\n    lastItem.focus();\n  }\n\n  renderOverlay() {\n    return (\n      <div\n        class=\"overlay\"\n        onClick={() => {\n          this.open = false;\n        }}\n      ></div>\n    );\n  }\n\n  render() {\n    return (\n      <Host role=\"navigation\" aria-expanded={this.ariaExpanded} aria-label={this.mainNavigationMessage}>\n        {this.open ? this.renderOverlay() : \"\"}\n        {this.isCollapsible && (\n          <div class=\"trapfocus\" tabindex={this.open ? 0 : undefined} onFocus={() => this.focusLastItem()}></div>\n        )}\n        <div class=\"tray\">\n          <div class=\"toggle-wrapper\">\n            <wm-button\n              ref={(el) => (this.toggleEl = el as HTMLWmButtonElement)}\n              class={`toggle ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}\n              button-type=\"navigational\"\n              icon={this.open ? \"f156\" : \"f35c\"}\n              icon-size=\"2rem\"\n              tooltip={this.open ? globalMessages.close : globalMessages.open}\n              tooltip-position=\"left\"\n              tabIndex={this.open ? undefined : -1}\n              onClick={() => {\n                this.open = !this.open;\n              }}\n            />\n          </div>\n          <ul class=\"navlist\">\n            <slot />\n          </ul>\n        </div>\n        {this.isCollapsible && (\n          <div class=\"trapfocus\" tabindex={this.open ? 0 : undefined} onFocus={() => this.toggleEl.focus()}></div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}