@watermarkinsights/ripple 3.24.0 → 3.24.1

package/dist/esm/wm-navigation_3.entry.js

@@ -1,249 +1,249 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, f as forceUpdate } from './index-84a6ae22.js';
-import { i as intl, w as throttle } from './functions-c58046f2.js';
+import { i as intl, w as throttle } from './functions-1c41e984.js';
 
 const wmNavigationCss = ":host{z-index:10}:host([aria-expanded=true]){z-index:5000}.tray{-webkit-box-shadow:0 0 14px 0 rgba(0, 0, 0, 0.14);-moz-box-shadow:0 0 14px 0 rgba(0, 0, 0, 0.14);box-shadow:0 0 14px 0 rgba(0, 0, 0, 0.14);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:7.5625rem;background-color:#fff;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;font-size:0.875rem;height:100%}.navlist{margin:0;padding:0}.toggle-wrapper{display:none}@media screen and (max-width: 1023px){.tray{-ms-transition:transform 0.33s ease;-webkit-transition:transform 0.33s ease;-moz-transition:transform 0.33s ease;-webkit-transition:-webkit-transform 0.33s ease;transition:-webkit-transform 0.33s ease;transition:transform 0.33s ease;transition:transform 0.33s ease, -webkit-transform 0.33s ease;position:fixed;top:0;bottom:0;left:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.tray ul{visibility:hidden}.tray .toggle-wrapper{display:inline-block;min-height:5rem;width:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host([aria-expanded=true]) .tray{-webkit-transform:translateX(0);transform:translateX(0)}:host([aria-expanded=true]) .tray ul{visibility:visible}.overlay{width:100vw;height:100vh;max-width:none;max-height:none;position:fixed !important;top:0;bottom:0;left:0;right:0;-webkit-transform:translate(0%, 0%);transform:translate(0%, 0%);background-color:rgba(25, 25, 25, 0.4);-ms-transition:opacity 0.5s ease-out;-webkit-transition:opacity 0.5s ease-out;-moz-transition:opacity 0.5s ease-out;transition:opacity 0.5s ease-out}}";
 
-const Navigation = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.wmNavigationStateChanged = createEvent(this, "wmNavigationStateChanged", 7);
-    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.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);
-    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 ? this.closeTooltipMessage : 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 delegatesFocus() { return true; }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "open": ["handleStateChange"]
-  }; }
-};
+const Navigation = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wmNavigationStateChanged = createEvent(this, "wmNavigationStateChanged", 7);
+    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.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);
+    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 ? this.closeTooltipMessage : 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 delegatesFocus() { return true; }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "open": ["handleStateChange"]
+  }; }
+};
 Navigation.style = wmNavigationCss;
 
 const wmNavigationHamburgerCss = "button{display:none;width:100%;height:100%;border:none;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);background-color:transparent;outline:none;padding:0}button.user-is-tabbing:focus{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}button.user-is-tabbing:focus::-moz-focus-inner{border:0}button:hover{background-color:#d7d6d9}.icon:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f35c\";font-size:1.5rem;color:#575195}@media screen and (max-width: 1023px){:host{width:3.75rem;height:3.75rem}button{display:initial}}";
 
-const NavigationHamburger = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.wmNavigationHamburgerClicked = createEvent(this, "wmNavigationHamburgerClicked", 7);
-    this.showNavMessage = intl.formatMessage({
-      id: "navigation.showNavigation",
-      defaultMessage: "Show navigation",
-      description: "For user interface element opening a navigation menu",
-    });
-    this.navId = undefined;
-    this.tooltipVisible = false;
-    this.isTabbing = false;
-    this.open = false;
-  }
-  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() {
-    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() {
-    const tooltipText = this.showNavMessage;
-    this.tooltipEl.textContent = tooltipText;
-    this.tooltipEl.style.setProperty("--wmTooltipTop", "1.125rem");
-    this.tooltipEl.style.setProperty("--wmTooltipLeft", "2.75rem");
-    this.tooltipEl.style.transitionDelay = "500ms";
-    this.tooltipEl.style.opacity = "1";
-    // tooltip only has a maxWidth if it contains whitespace and can break
-    const hasNoWhitespace = tooltipText.match(/^[^\s]+$/);
-    if (hasNoWhitespace) {
-      this.tooltipEl.classList.add("single-word");
-      this.tooltipEl.style.setProperty("--wmTooltipMaxWidth", "none");
-    }
-    else {
-      this.tooltipEl.classList.remove("single-word");
-      this.tooltipEl.style.removeProperty("--wmTooltipMaxWidth");
-    }
-    // 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 delegatesFocus() { return true; }
-  get el() { return getElement(this); }
-};
+const NavigationHamburger = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wmNavigationHamburgerClicked = createEvent(this, "wmNavigationHamburgerClicked", 7);
+    this.showNavMessage = intl.formatMessage({
+      id: "navigation.showNavigation",
+      defaultMessage: "Show navigation",
+      description: "For user interface element opening a navigation menu",
+    });
+    this.navId = undefined;
+    this.tooltipVisible = false;
+    this.isTabbing = false;
+    this.open = false;
+  }
+  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() {
+    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() {
+    const tooltipText = this.showNavMessage;
+    this.tooltipEl.textContent = tooltipText;
+    this.tooltipEl.style.setProperty("--wmTooltipTop", "1.125rem");
+    this.tooltipEl.style.setProperty("--wmTooltipLeft", "2.75rem");
+    this.tooltipEl.style.transitionDelay = "500ms";
+    this.tooltipEl.style.opacity = "1";
+    // tooltip only has a maxWidth if it contains whitespace and can break
+    const hasNoWhitespace = tooltipText.match(/^[^\s]+$/);
+    if (hasNoWhitespace) {
+      this.tooltipEl.classList.add("single-word");
+      this.tooltipEl.style.setProperty("--wmTooltipMaxWidth", "none");
+    }
+    else {
+      this.tooltipEl.classList.remove("single-word");
+      this.tooltipEl.style.removeProperty("--wmTooltipMaxWidth");
+    }
+    // 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 delegatesFocus() { return true; }
+  get el() { return getElement(this); }
+};
 NavigationHamburger.style = wmNavigationHamburgerCss;
 
 const wmNavigationItemCss = ".link{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;color:inherit;text-decoration:none;min-height:4.5rem;text-align:center;padding:1.25rem 0.5rem;font-weight:500;outline:none;position:relative}.link:hover{background-color:#f2f2f2}.link .icon{font-size:1.375rem;color:#6b6b6b}.link .text{font-size:0.875rem}.link.user-is-tabbing:focus{-webkit-box-shadow:inset 0 2px 2px 0 rgba(244, 243, 246, 0.2), inset 0 2px 2px 0 rgba(0, 0, 0, 0.1), inset 0 0 4px 3px #61279e;box-shadow:inset 0 2px 2px 0 rgba(244, 243, 246, 0.2), inset 0 2px 2px 0 rgba(0, 0, 0, 0.1), inset 0 0 4px 3px #61279e}.link.active{background-color:#e9e7ec}.link.active:before{content:\"\";background-color:#575195;position:absolute;height:100%;width:5px;left:0}.link.active .text{color:#575195}.link.active .icon{color:#575195}";
 
-const NavigationItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.wmNavigationItemClicked = createEvent(this, "wmNavigationItemClicked", 7);
-    this.href = undefined;
-    this.text = undefined;
-    this.active = undefined;
-    this.isTabbing = false;
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  componentWillLoad() {
-    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 delegatesFocus() { return true; }
-  get el() { return getElement(this); }
-};
+const NavigationItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wmNavigationItemClicked = createEvent(this, "wmNavigationItemClicked", 7);
+    this.href = undefined;
+    this.text = undefined;
+    this.active = undefined;
+    this.isTabbing = false;
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  componentWillLoad() {
+    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 delegatesFocus() { return true; }
+  get el() { return getElement(this); }
+};
 NavigationItem.style = wmNavigationItemCss;
 
 export { Navigation as wm_navigation, NavigationHamburger as wm_navigation_hamburger, NavigationItem as wm_navigation_item };

package/dist/esm/wm-navigation_3.entry.js.map

@@ -1 +1 @@
-{"file":"wm-navigation.wm-navigation-hamburger.wm-navigation-item.entry.js","mappings":"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","names":[],"sources":["./src/components/wm-navigation/wm-navigation.scss?tag=wm-navigation&encapsulation=shadow","./src/components/wm-navigation/wm-navigation.tsx","./src/components/wm-navigation/wm-navigation-hamburger.scss?tag=wm-navigation-hamburger&encapsulation=shadow","./src/components/wm-navigation/wm-navigation-hamburger.tsx","./src/components/wm-navigation/wm-navigation-item.scss?tag=wm-navigation-item&encapsulation=shadow","./src/components/wm-navigation/wm-navigation-item.tsx"],"sourcesContent":[":host {\n  z-index: 10;\n}\n\n:host([aria-expanded=\"true\"]) {\n  z-index: 5000;\n}\n\n.tray {\n  @include box-shadow(0 0 14px 0 rgba(0, 0, 0, 0.14));\n  display: flex;\n  flex-direction: column;\n  width: rem-calc(121);\n  background-color: $light-background;\n  overflow-x: hidden;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n  font-size: rem-calc(14);\n  height: 100%;\n}\n\n.navlist {\n  margin: 0;\n  padding: 0;\n}\n\n.toggle-wrapper {\n  display: none;\n}\n\n/* COLLAPSIBLE STYLES */\n@media screen and (max-width: 1023px) {\n  .tray {\n    @include transition(transform 0.33s ease);\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    transform: translateX(-100%);\n\n    ul {\n      visibility: hidden;\n    }\n\n    .toggle-wrapper {\n      display: inline-block;\n      min-height: 5rem;\n      width: 100%;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n  }\n\n  :host([aria-expanded=\"true\"]) {\n    .tray {\n      transform: translateX(0);\n\n      ul {\n        visibility: visible;\n      }\n    }\n  }\n\n  .overlay {\n    width: 100vw;\n    height: 100vh;\n    max-width: none;\n    max-height: none;\n    position: fixed !important;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    transform: translate(0%, 0%);\n    background-color: rgba(25, 25, 25, 0.4);\n    @include transition(opacity 0.5s ease-out);\n  }\n}\n","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\";\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  private openTooltipMessage: string = intl.formatMessage({\n    id: \"global.openVerb\",\n    defaultMessage: \"Open\",\n    description: \"For a button, to open a user interface element\",\n  });\n\n  private closeTooltipMessage: string = intl.formatMessage({\n    id: \"global.closeVerb\",\n    defaultMessage: \"Close\",\n    description: \"For a button, to close a user interface element\",\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 ? this.closeTooltipMessage : this.openTooltipMessage}\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","button {\n  display: none;\n  width: 100%;\n  height: 100%;\n  border: none;\n  box-shadow: none;\n  transition: background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);\n  background-color: transparent;\n  outline: none;\n  padding: 0;\n\n  &.user-is-tabbing:focus {\n    @include focus-style;\n  }\n\n  &:hover {\n    background-color: $button-default-hover;\n  }\n}\n\n.icon {\n  &:before {\n    @include mdi-icon;\n    content: \"\\f35c\";\n    font-size: rem-calc(24);\n    color: $button-default-text;\n  }\n}\n\n@media screen and (max-width: 1023px) {\n  :host {\n    width: rem-calc(60);\n    height: rem-calc(60);\n  }\n\n  button {\n    display: initial;\n  }\n}\n","import { h, Component, Element, Host, Prop, Listen, Event, EventEmitter, State } from \"@stencil/core\";\nimport { intl } from \"../../global/functions\";\n\n@Component({\n  tag: \"wm-navigation-hamburger\",\n  styleUrl: \"wm-navigation-hamburger.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class NavigationHamburger {\n  @Element() el!: HTMLWmNavigationHamburgerElement;\n  nav!: HTMLWmNavigationElement;\n\n  @Prop() navId?: string;\n  @Prop({ mutable: true }) 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()\n\n  @State() isTabbing?: boolean = false;\n  @State() open: boolean = false;\n\n  @Event() wmNavigationHamburgerClicked!: EventEmitter;\n\n  showNavMessage = intl.formatMessage({\n    id: \"navigation.showNavigation\",\n    defaultMessage: \"Show navigation\",\n    description: \"For user interface element opening a navigation menu\",\n  });\n\n  get tooltipEl(): HTMLElement {\n    return document.getElementById(\"wm-tooltip\")!;\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  // this also works on initial load because event is fired then\n  @Listen(\"wmNavigationStateChanged\", { target: \"document\" })\n  handleNavigationStateChanged(ev: CustomEvent) {\n    this.open = (ev.target! as HTMLWmNavigationElement).open;\n  }\n\n  componentWillLoad() {\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\n      this.toggleTabbingOn();\n    }\n    if (!this.navId) {\n      console.error(\"wm-navigation-hamburger: nav-id is a required prop\");\n    }\n  }\n\n  showTooltip() {\n    const tooltipText = this.showNavMessage;\n    this.tooltipEl.textContent = tooltipText;\n    this.tooltipEl.style.setProperty(\"--wmTooltipTop\", \"1.125rem\");\n    this.tooltipEl.style.setProperty(\"--wmTooltipLeft\", \"2.75rem\");\n    this.tooltipEl.style.transitionDelay = \"500ms\";\n    this.tooltipEl.style.opacity = \"1\";\n\n    // tooltip only has a maxWidth if it contains whitespace and can break\n    const hasNoWhitespace = tooltipText!.match(/^[^\\s]+$/);\n    if (hasNoWhitespace) {\n      this.tooltipEl.classList.add(\"single-word\");\n      this.tooltipEl.style.setProperty(\"--wmTooltipMaxWidth\", \"none\");\n    } else {\n      this.tooltipEl.classList.remove(\"single-word\");\n      this.tooltipEl.style.removeProperty(\"--wmTooltipMaxWidth\");\n    }\n\n    // tooltip is only visible after the transition delay.\n    // This also fixes an issue for keyboard users:\n    // if they tab to a button out of screen bounds, the page scrolls\n    // and hideTooltip() would be triggered before the tooltip would show\n    setTimeout(() => {\n      this.tooltipVisible = true;\n    }, 500);\n  }\n\n  hideTooltip() {\n    this.tooltipEl.style.transitionDelay = \"0s\";\n    this.tooltipEl.style.opacity = \"0\";\n    this.tooltipVisible = false;\n  }\n\n  showTooltipForKeyboardUsers() {\n    if (this.isTabbing) {\n      this.showTooltip();\n    }\n  }\n\n  handleClick() {\n    this.hideTooltip();\n    this.wmNavigationHamburgerClicked.emit();\n  }\n\n  render() {\n    return (\n      <Host class={`hamburger ${this.open ? \"nav-open\" : \"nav-closed\"}`}>\n        <button\n          class={this.isTabbing ? \"user-is-tabbing\" : undefined}\n          aria-expanded={this.open}\n          aria-controls={this.navId}\n          aria-label={this.showNavMessage}\n          onMouseEnter={() => this.showTooltip()}\n          onMouseLeave={() => this.hideTooltip()}\n          onFocus={() => this.showTooltipForKeyboardUsers()}\n          onBlur={() => this.hideTooltip()}\n          onClick={() => this.handleClick()}\n        >\n          <span class=\"icon\"></span>\n        </button>\n      </Host>\n    );\n  }\n}\n",".link {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  color: inherit;\n  text-decoration: none;\n  min-height: rem-calc(72);\n  text-align: center;\n  padding: 1.25rem 0.5rem;\n  font-weight: 500;\n  outline: none;\n  position: relative;\n\n  &:hover {\n    background-color: $light-background-hover;\n  }\n\n  .icon {\n    font-size: rem-calc(22);\n    color: $sidenav-icon;\n  }\n\n  .text {\n    font-size: rem-calc(14);\n  }\n\n  &.user-is-tabbing:focus {\n    // from P&SS\n    box-shadow: inset 0 2px 2px 0 rgb(244 243 246 / 20%), inset 0 2px 2px 0 rgb(0 0 0 / 10%), inset 0 0 4px 3px #61279e;\n  }\n}\n\n.link.active {\n  background-color: $pale-lilac-gray;\n  &:before {\n    content: \"\";\n    // link to or create semantic name\n    background-color: $periwinkle;\n    position: absolute;\n    height: 100%;\n    width: 5px;\n    left: 0;\n  }\n\n  .text {\n    // link to or create semantic name\n    color: $periwinkle;\n  }\n\n  .icon {\n    // link to or create semantic name\n    color: $periwinkle;\n  }\n}\n","import { h, Component, Prop, Element, Host, State, Listen, Event, EventEmitter } from \"@stencil/core\";\n\n@Component({\n  tag: \"wm-navigation-item\",\n  styleUrl: \"wm-navigation-item.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class NavigationItem {\n  @Element() el!: HTMLWmNavigationItemElement;\n  @Prop() href?: string;\n  @Prop() text?: string;\n  @Prop() active?: boolean;\n\n  @State() isTabbing?: boolean = false;\n  @Event() wmNavigationItemClicked!: EventEmitter;\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  componentWillLoad() {\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\n      this.toggleTabbingOn();\n    }\n  }\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <a\n          class={`link ${this.active ? \"active\" : \"\"} ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}\n          href={this.href}\n          onClick={() => this.wmNavigationItemClicked.emit()}\n        >\n          <div class=\"icon\" aria-hidden=\"true\">\n            <slot />\n          </div>\n          <div class=\"text\">{this.text}</div>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"wm-navigation.wm-navigation-hamburger.wm-navigation-item.entry.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,snDAAsnD;;MCoBjoD,UAAU;;;;IAQb,0BAAqB,GAAW,IAAI,CAAC,aAAa,CAAC;MACzD,EAAE,EAAE,2BAA2B;MAC/B,cAAc,EAAE,MAAM;MACtB,WAAW,EAAE,+DAA+D;KAC7E,CAAC,CAAC;IAEK,uBAAkB,GAAW,IAAI,CAAC,aAAa,CAAC;MACtD,EAAE,EAAE,iBAAiB;MACrB,cAAc,EAAE,MAAM;MACtB,WAAW,EAAE,gDAAgD;KAC9D,CAAC,CAAC;IAEK,wBAAmB,GAAW,IAAI,CAAC,aAAa,CAAC;MACvD,EAAE,EAAE,kBAAkB;MACtB,cAAc,EAAE,OAAO;MACvB,WAAW,EAAE,iDAAiD;KAC/D,CAAC,CAAC;IA+BH,sBAAiB,GAAG,QAAQ,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;gBApDL,KAAK;qBAE/B,KAAK;;EAqBnC,IAAI,aAAa;IACf,OAAO,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC;GACjC;EAED,IAAI,YAAY;IACd,OAAO,IAAI,CAAC,aAAa;;QAErB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;;QAEpB,SAAS,CAAC;GACf;EAGD,eAAe;IACb,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;GACvB;EAGD,gBAAgB;IACd,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;GACxB;EAGD,aAAa,CAAC,EAAiB;IAC7B,IAAI,EAAE,CAAC,GAAG,KAAK,QAAQ,EAAE;MACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;GACF;EAKD,kBAAkB;;;IAGhB,IAAI,CAAC,iBAAiB,EAAE,CAAC;GAC1B;EAGD,sBAAsB;IACpB,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;GACxB;EAGD,iBAAiB;IACf,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;GACnB;EAGD,iBAAiB;IACf,IAAI,IAAI,CAAC,aAAa,EAAE;MACtB,IAAI,CAAC,wBAAwB,CAAC,IAAI,EAAE,CAAC;MACrC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;KAC7C;GACF;EAED,iBAAiB;IACf,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,sBAAsB,CAAC,EAAE;MAC5D,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,IAAI,CAAC,EAAE,CAAC,KAAK,GAAG;;MAEd,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI;UAChB,IAAI,CAAC,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,SAAS,CAA0B;UACrE,QAAQ,CAAC,aAAa,CAAC,yBAAyB,CAAsC,CAAC;MAC5F,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,oBAAoB,CAAiC,CAAC;MAC9F,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC,KAAK,EAAE,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;KACtD,CAAC;IAEF,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,EAAE;;MAEnC,IAAI,CAAC,wBAAwB,CAAC,IAAI,EAAE,CAAC;MACrC,IAAI,CAAC,MAAM,EAAE,CAAC;KACf;GACF;EAED,qBAAqB,CAAC,EAAc;;;IAGlC,IAAK,QAAQ,CAAC,aAA6B,CAAC,OAAO,KAAK,MAAM,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE;MACnF,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;KACjB;GACF;EAED,MAAM;;;;IAIJ,QAAQ,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IAC3B,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;;IAGrF,UAAU,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,EAAE,GAAG,CAAC,CAAC;;GAE9C;EAED,QAAQ;;IAEN,QAAQ,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;IAC5B,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAElF,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC;;;IAGvE,IAAI,YAAY;MAAE,YAAY,CAAC,KAAK,EAAE,CAAC;GACxC;EAED,aAAa;IACX,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;IAC7D,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,EAAiC,CAAC;IACxE,QAAQ,CAAC,KAAK,EAAE,CAAC;GAClB;EAED,aAAa;IACX,QACE,WACE,KAAK,EAAC,SAAS,EACf,OAAO,EAAE;QACP,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;OACnB,GACI,EACP;GACH;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,YAAY,mBAAgB,IAAI,CAAC,YAAY,gBAAc,IAAI,CAAC,qBAAqB,IAC7F,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,EAAE,EACrC,IAAI,CAAC,aAAa,KACjB,WAAK,KAAK,EAAC,WAAW,EAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,SAAS,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,GAAQ,CACxG,EACD,WAAK,KAAK,EAAC,MAAM,IACf,WAAK,KAAK,EAAC,gBAAgB,IACzB,iBACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAyB,CAAC,EACxD,KAAK,EAAE,UAAU,IAAI,CAAC,SAAS,GAAG,iBAAiB,GAAG,EAAE,EAAE,iBAC9C,cAAc,EAC1B,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,MAAM,eACvB,MAAM,EAChB,OAAO,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,kBAAkB,sBACtD,MAAM,EACvB,QAAQ,EAAE,IAAI,CAAC,IAAI,GAAG,SAAS,GAAG,CAAC,CAAC,EACpC,OAAO,EAAE;QACP,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;OACxB,GACD,CACE,EACN,UAAI,KAAK,EAAC,SAAS,IACjB,eAAQ,CACL,CACD,EACL,IAAI,CAAC,aAAa,KACjB,WAAK,KAAK,EAAC,WAAW,EAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,SAAS,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,GAAQ,CACzG,CACI,EACP;GACH;;;;;;;;;AC3MH,MAAM,wBAAwB,GAAG,ikCAAikC;;MCQrlC,mBAAmB;;;;IAY9B,mBAAc,GAAG,IAAI,CAAC,aAAa,CAAC;MAClC,EAAE,EAAE,2BAA2B;MAC/B,cAAc,EAAE,iBAAiB;MACjC,WAAW,EAAE,sDAAsD;KACpE,CAAC,CAAC;;0BAXuC,KAAK;qBAEhB,KAAK;gBACX,KAAK;;EAU9B,IAAI,SAAS;IACX,OAAO,QAAQ,CAAC,cAAc,CAAC,YAAY,CAAE,CAAC;GAC/C;EAGD,eAAe;IACb,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;GACvB;EAGD,gBAAgB;IACd,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;GACxB;;EAID,4BAA4B,CAAC,EAAe;IAC1C,IAAI,CAAC,IAAI,GAAI,EAAE,CAAC,MAAmC,CAAC,IAAI,CAAC;GAC1D;EAED,iBAAiB;IACf,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,sBAAsB,CAAC,EAAE;MAC5D,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IACD,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACf,OAAO,CAAC,KAAK,CAAC,oDAAoD,CAAC,CAAC;KACrE;GACF;EAED,WAAW;IACT,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC;IACxC,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;IACzC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;IAC/D,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC;IAC/D,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,eAAe,GAAG,OAAO,CAAC;IAC/C,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;;IAGnC,MAAM,eAAe,GAAG,WAAY,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;IACvD,IAAI,eAAe,EAAE;MACnB,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;MAC5C,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,qBAAqB,EAAE,MAAM,CAAC,CAAC;KACjE;SAAM;MACL,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;MAC/C,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC;KAC5D;;;;;IAMD,UAAU,CAAC;MACT,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B,EAAE,GAAG,CAAC,CAAC;GACT;EAED,WAAW;IACT,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,eAAe,GAAG,IAAI,CAAC;IAC5C,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;IACnC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;GAC7B;EAED,2BAA2B;IACzB,IAAI,IAAI,CAAC,SAAS,EAAE;MAClB,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;GACF;EAED,WAAW;IACT,IAAI,CAAC,WAAW,EAAE,CAAC;IACnB,IAAI,CAAC,4BAA4B,CAAC,IAAI,EAAE,CAAC;GAC1C;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,aAAa,IAAI,CAAC,IAAI,GAAG,UAAU,GAAG,YAAY,EAAE,IAC/D,cACE,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,iBAAiB,GAAG,SAAS,mBACtC,IAAI,CAAC,IAAI,mBACT,IAAI,CAAC,KAAK,gBACb,IAAI,CAAC,cAAc,EAC/B,YAAY,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACtC,YAAY,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACtC,OAAO,EAAE,MAAM,IAAI,CAAC,2BAA2B,EAAE,EACjD,MAAM,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAChC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IAEjC,YAAM,KAAK,EAAC,MAAM,GAAQ,CACnB,CACJ,EACP;GACH;;;;;;ACrHH,MAAM,mBAAmB,GAAG,s2BAAs2B;;MCOr3B,cAAc;;;;;;;qBAMM,KAAK;;EAIpC,eAAe;IACb,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;GACvB;EAGD,gBAAgB;IACd,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;GACxB;EAED,iBAAiB;IACf,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,sBAAsB,CAAC,EAAE;MAC5D,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,IACnB,SACE,KAAK,EAAE,QAAQ,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,IAAI,IAAI,CAAC,SAAS,GAAG,iBAAiB,GAAG,EAAE,EAAE,EACvF,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,MAAM,IAAI,CAAC,uBAAuB,CAAC,IAAI,EAAE,IAElD,WAAK,KAAK,EAAC,MAAM,iBAAa,MAAM,IAClC,eAAQ,CACJ,EACN,WAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAO,CACjC,CACC,EACP;GACH;;;;;;;;","names":[],"sources":["./src/components/wm-navigation/wm-navigation.scss?tag=wm-navigation&encapsulation=shadow","./src/components/wm-navigation/wm-navigation.tsx","./src/components/wm-navigation/wm-navigation-hamburger.scss?tag=wm-navigation-hamburger&encapsulation=shadow","./src/components/wm-navigation/wm-navigation-hamburger.tsx","./src/components/wm-navigation/wm-navigation-item.scss?tag=wm-navigation-item&encapsulation=shadow","./src/components/wm-navigation/wm-navigation-item.tsx"],"sourcesContent":[":host {\r\n  z-index: 10;\r\n}\r\n\r\n:host([aria-expanded=\"true\"]) {\r\n  z-index: 5000;\r\n}\r\n\r\n.tray {\r\n  @include box-shadow(0 0 14px 0 rgba(0, 0, 0, 0.14));\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: rem-calc(121);\r\n  background-color: $light-background;\r\n  overflow-x: hidden;\r\n  overflow-y: auto;\r\n  -webkit-overflow-scrolling: touch;\r\n  font-size: rem-calc(14);\r\n  height: 100%;\r\n}\r\n\r\n.navlist {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.toggle-wrapper {\r\n  display: none;\r\n}\r\n\r\n/* COLLAPSIBLE STYLES */\r\n@media screen and (max-width: 1023px) {\r\n  .tray {\r\n    @include transition(transform 0.33s ease);\r\n    position: fixed;\r\n    top: 0;\r\n    bottom: 0;\r\n    left: 0;\r\n    transform: translateX(-100%);\r\n\r\n    ul {\r\n      visibility: hidden;\r\n    }\r\n\r\n    .toggle-wrapper {\r\n      display: inline-block;\r\n      min-height: 5rem;\r\n      width: 100%;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n    }\r\n  }\r\n\r\n  :host([aria-expanded=\"true\"]) {\r\n    .tray {\r\n      transform: translateX(0);\r\n\r\n      ul {\r\n        visibility: visible;\r\n      }\r\n    }\r\n  }\r\n\r\n  .overlay {\r\n    width: 100vw;\r\n    height: 100vh;\r\n    max-width: none;\r\n    max-height: none;\r\n    position: fixed !important;\r\n    top: 0;\r\n    bottom: 0;\r\n    left: 0;\r\n    right: 0;\r\n    transform: translate(0%, 0%);\r\n    background-color: rgba(25, 25, 25, 0.4);\r\n    @include transition(opacity 0.5s ease-out);\r\n  }\r\n}\r\n","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\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  private closeTooltipMessage: string = intl.formatMessage({\r\n    id: \"global.closeVerb\",\r\n    defaultMessage: \"Close\",\r\n    description: \"For a button, to close 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 ? this.closeTooltipMessage : 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","button {\r\n  display: none;\r\n  width: 100%;\r\n  height: 100%;\r\n  border: none;\r\n  box-shadow: none;\r\n  transition: background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);\r\n  background-color: transparent;\r\n  outline: none;\r\n  padding: 0;\r\n\r\n  &.user-is-tabbing:focus {\r\n    @include focus-style;\r\n  }\r\n\r\n  &:hover {\r\n    background-color: $button-default-hover;\r\n  }\r\n}\r\n\r\n.icon {\r\n  &:before {\r\n    @include mdi-icon;\r\n    content: \"\\f35c\";\r\n    font-size: rem-calc(24);\r\n    color: $button-default-text;\r\n  }\r\n}\r\n\r\n@media screen and (max-width: 1023px) {\r\n  :host {\r\n    width: rem-calc(60);\r\n    height: rem-calc(60);\r\n  }\r\n\r\n  button {\r\n    display: initial;\r\n  }\r\n}\r\n","import { h, Component, Element, Host, Prop, Listen, Event, EventEmitter, State } from \"@stencil/core\";\r\nimport { intl } from \"../../global/functions\";\r\n\r\n@Component({\r\n  tag: \"wm-navigation-hamburger\",\r\n  styleUrl: \"wm-navigation-hamburger.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class NavigationHamburger {\r\n  @Element() el!: HTMLWmNavigationHamburgerElement;\r\n  nav!: HTMLWmNavigationElement;\r\n\r\n  @Prop() navId?: string;\r\n  @Prop({ mutable: true }) 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()\r\n\r\n  @State() isTabbing?: boolean = false;\r\n  @State() open: boolean = false;\r\n\r\n  @Event() wmNavigationHamburgerClicked!: EventEmitter;\r\n\r\n  showNavMessage = intl.formatMessage({\r\n    id: \"navigation.showNavigation\",\r\n    defaultMessage: \"Show navigation\",\r\n    description: \"For user interface element opening a navigation menu\",\r\n  });\r\n\r\n  get tooltipEl(): HTMLElement {\r\n    return document.getElementById(\"wm-tooltip\")!;\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  // this also works on initial load because event is fired then\r\n  @Listen(\"wmNavigationStateChanged\", { target: \"document\" })\r\n  handleNavigationStateChanged(ev: CustomEvent) {\r\n    this.open = (ev.target! as HTMLWmNavigationElement).open;\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    if (!this.navId) {\r\n      console.error(\"wm-navigation-hamburger: nav-id is a required prop\");\r\n    }\r\n  }\r\n\r\n  showTooltip() {\r\n    const tooltipText = this.showNavMessage;\r\n    this.tooltipEl.textContent = tooltipText;\r\n    this.tooltipEl.style.setProperty(\"--wmTooltipTop\", \"1.125rem\");\r\n    this.tooltipEl.style.setProperty(\"--wmTooltipLeft\", \"2.75rem\");\r\n    this.tooltipEl.style.transitionDelay = \"500ms\";\r\n    this.tooltipEl.style.opacity = \"1\";\r\n\r\n    // tooltip only has a maxWidth if it contains whitespace and can break\r\n    const hasNoWhitespace = tooltipText!.match(/^[^\\s]+$/);\r\n    if (hasNoWhitespace) {\r\n      this.tooltipEl.classList.add(\"single-word\");\r\n      this.tooltipEl.style.setProperty(\"--wmTooltipMaxWidth\", \"none\");\r\n    } else {\r\n      this.tooltipEl.classList.remove(\"single-word\");\r\n      this.tooltipEl.style.removeProperty(\"--wmTooltipMaxWidth\");\r\n    }\r\n\r\n    // tooltip is only visible after the transition delay.\r\n    // This also fixes an issue for keyboard users:\r\n    // if they tab to a button out of screen bounds, the page scrolls\r\n    // and hideTooltip() would be triggered before the tooltip would show\r\n    setTimeout(() => {\r\n      this.tooltipVisible = true;\r\n    }, 500);\r\n  }\r\n\r\n  hideTooltip() {\r\n    this.tooltipEl.style.transitionDelay = \"0s\";\r\n    this.tooltipEl.style.opacity = \"0\";\r\n    this.tooltipVisible = false;\r\n  }\r\n\r\n  showTooltipForKeyboardUsers() {\r\n    if (this.isTabbing) {\r\n      this.showTooltip();\r\n    }\r\n  }\r\n\r\n  handleClick() {\r\n    this.hideTooltip();\r\n    this.wmNavigationHamburgerClicked.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host class={`hamburger ${this.open ? \"nav-open\" : \"nav-closed\"}`}>\r\n        <button\r\n          class={this.isTabbing ? \"user-is-tabbing\" : undefined}\r\n          aria-expanded={this.open}\r\n          aria-controls={this.navId}\r\n          aria-label={this.showNavMessage}\r\n          onMouseEnter={() => this.showTooltip()}\r\n          onMouseLeave={() => this.hideTooltip()}\r\n          onFocus={() => this.showTooltipForKeyboardUsers()}\r\n          onBlur={() => this.hideTooltip()}\r\n          onClick={() => this.handleClick()}\r\n        >\r\n          <span class=\"icon\"></span>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n",".link {\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  color: inherit;\r\n  text-decoration: none;\r\n  min-height: rem-calc(72);\r\n  text-align: center;\r\n  padding: 1.25rem 0.5rem;\r\n  font-weight: 500;\r\n  outline: none;\r\n  position: relative;\r\n\r\n  &:hover {\r\n    background-color: $light-background-hover;\r\n  }\r\n\r\n  .icon {\r\n    font-size: rem-calc(22);\r\n    color: $sidenav-icon;\r\n  }\r\n\r\n  .text {\r\n    font-size: rem-calc(14);\r\n  }\r\n\r\n  &.user-is-tabbing:focus {\r\n    // from P&SS\r\n    box-shadow: inset 0 2px 2px 0 rgb(244 243 246 / 20%), inset 0 2px 2px 0 rgb(0 0 0 / 10%), inset 0 0 4px 3px #61279e;\r\n  }\r\n}\r\n\r\n.link.active {\r\n  background-color: $pale-lilac-gray;\r\n  &:before {\r\n    content: \"\";\r\n    // link to or create semantic name\r\n    background-color: $periwinkle;\r\n    position: absolute;\r\n    height: 100%;\r\n    width: 5px;\r\n    left: 0;\r\n  }\r\n\r\n  .text {\r\n    // link to or create semantic name\r\n    color: $periwinkle;\r\n  }\r\n\r\n  .icon {\r\n    // link to or create semantic name\r\n    color: $periwinkle;\r\n  }\r\n}\r\n","import { h, Component, Prop, Element, Host, State, Listen, Event, EventEmitter } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"wm-navigation-item\",\r\n  styleUrl: \"wm-navigation-item.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class NavigationItem {\r\n  @Element() el!: HTMLWmNavigationItemElement;\r\n  @Prop() href?: string;\r\n  @Prop() text?: string;\r\n  @Prop() active?: boolean;\r\n\r\n  @State() isTabbing?: boolean = false;\r\n  @Event() wmNavigationItemClicked!: EventEmitter;\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  componentWillLoad() {\r\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\r\n      this.toggleTabbingOn();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host role=\"listitem\">\r\n        <a\r\n          class={`link ${this.active ? \"active\" : \"\"} ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}\r\n          href={this.href}\r\n          onClick={() => this.wmNavigationItemClicked.emit()}\r\n        >\r\n          <div class=\"icon\" aria-hidden=\"true\">\r\n            <slot />\r\n          </div>\r\n          <div class=\"text\">{this.text}</div>\r\n        </a>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}