@watermarkinsights/ripple 3.9.1 → 3.10.0-2

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

@@ -1,235 +1,242 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, f as forceUpdate } from './index-7603f98e.js';
-import { i as intl, r as throttle } from './functions-e552a8b5.js';
+import { i as intl, r as throttle } from './functions-61c7bb1f.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}}";
 
-let Navigation = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.wmNavigationStateChanged = createEvent(this, "wmNavigationStateChanged", 7);
-    this.open = false;
-    this.isTabbing = false;
-    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);
-  }
-  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 = function () {
-      this.shadowRoot.querySelector(".toggle").focus();
-    };
-    if (this.isCollapsible && this.open) {
-      // hamburger needs to know if open was initially set to true
-      this.wmNavigationStateChanged.emit();
-      this.expand();
-    }
-  }
-  componentDidLoad() {
-    // Should fail silently if not found as devs may decide not to use the hamburger component.
-    this.hamburgerBtn = document.querySelector("wm-navigation-hamburger");
-  }
-  redirectFocusFromBody() {
-    if (document.activeElement.tagName === "BODY") {
-      this.el.focus();
-    }
-  }
-  expand() {
-    // listen to focus on body and redirect to the component
-    document.body.tabIndex = 0;
-    document.body.addEventListener("focus", this.redirectFocusFromBody.bind(this), true);
-    // wait for nav to be expanded otherwise tooltip will be misplaced.
-    setTimeout(() => this.toggleEl.focus(), 250);
-  }
-  collapse() {
-    // rm event listener on body
-    document.body.tabIndex = -1;
-    document.body.removeEventListener("focus", this.redirectFocusFromBody.bind(this));
-    // should fail silently if el doesn't exist
-    // (dev may have chosen not to use the hamburger component)
-    this.hamburgerBtn && this.hamburgerBtn.focus();
-  }
-  focusLastItem() {
-    const items = this.el.querySelectorAll("wm-navigation-item");
-    const lastItem = Array.from(items).pop();
-    lastItem.focus();
-  }
-  renderOverlay() {
-    return (h("div", { class: "overlay", onClick: () => {
-        this.open = false;
-      } }));
-  }
-  render() {
-    return (h(Host, { 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() }))));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "open": ["handleStateChange"]
-  }; }
-};
+let Navigation = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wmNavigationStateChanged = createEvent(this, "wmNavigationStateChanged", 7);
+    this.open = false;
+    this.isTabbing = false;
+    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);
+  }
+  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 = () => {
+      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() }))));
+  }
+  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}}";
 
-let NavigationHamburger = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.wmNavigationHamburgerClicked = createEvent(this, "wmNavigationHamburgerClicked", 7);
-    this.tooltipVisible = false; // this is not part of the documented API but we need to expose as prop in order to change it from the focus method defined in WillLoad()
-    this.isTabbing = false;
-    this.open = false;
-    this.showNavMessage = intl.formatMessage({
-      id: "navigation.showNavigation",
-      defaultMessage: "Show navigation",
-      description: "For user interface element opening a navigation menu",
-    });
-  }
-  get tooltipEl() {
-    return document.getElementById("wm-tooltip");
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  // this also works on initial load because event is fired then
-  handleNavigationStateChanged(ev) {
-    this.open = ev.target.open;
-  }
-  componentWillLoad() {
-    this.el.focus = function () {
-      // if (!this.disabled) {
-      this.shadowRoot.querySelector("button").focus();
-      // prevent tooltip from showing on programmatic focus
-      requestAnimationFrame(() => {
-        this.tooltipVisible = false;
-      });
-      // }
-    };
-    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
-      this.toggleTabbingOn();
-    }
-    if (!this.navId) {
-      console.error("wm-navigation-hamburger: nav-id is a required prop");
-    }
-  }
-  showTooltip() {
-    this.tooltipEl.textContent = this.showNavMessage;
-    this.tooltipEl.style.top = "1.125rem";
-    this.tooltipEl.style.left = "2.75rem";
-    this.tooltipEl.style.transitionDelay = "500ms";
-    this.tooltipEl.style.opacity = "1";
-    // tooltip is only visible after the transition delay.
-    // This also fixes an issue for keyboard users:
-    // if they tab to a button out of screen bounds, the page scrolls
-    // and hideTooltip() would be triggered before the tooltip would show
-    setTimeout(() => {
-      this.tooltipVisible = true;
-    }, 500);
-  }
-  hideTooltip() {
-    this.tooltipEl.style.transitionDelay = "0s";
-    this.tooltipEl.style.opacity = "0";
-    this.tooltipVisible = false;
-  }
-  showTooltipForKeyboardUsers() {
-    if (this.isTabbing) {
-      this.showTooltip();
-    }
-  }
-  handleClick() {
-    this.hideTooltip();
-    this.wmNavigationHamburgerClicked.emit();
-  }
-  render() {
-    return (h(Host, { class: 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" }))));
-  }
-  get el() { return getElement(this); }
-};
+let NavigationHamburger = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wmNavigationHamburgerClicked = createEvent(this, "wmNavigationHamburgerClicked", 7);
+    this.tooltipVisible = false; // this is not part of the documented API but we need to expose as prop in order to change it from the focus method defined in WillLoad()
+    this.isTabbing = false;
+    this.open = false;
+    this.showNavMessage = intl.formatMessage({
+      id: "navigation.showNavigation",
+      defaultMessage: "Show navigation",
+      description: "For user interface element opening a navigation menu",
+    });
+  }
+  get tooltipEl() {
+    return document.getElementById("wm-tooltip");
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  // this also works on initial load because event is fired then
+  handleNavigationStateChanged(ev) {
+    this.open = ev.target.open;
+  }
+  componentWillLoad() {
+    this.el.focus = function () {
+      // if (!this.disabled) {
+      this.shadowRoot.querySelector("button").focus();
+      // prevent tooltip from showing on programmatic focus
+      requestAnimationFrame(() => {
+        this.tooltipVisible = false;
+      });
+      // }
+    };
+    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+      this.toggleTabbingOn();
+    }
+    if (!this.navId) {
+      console.error("wm-navigation-hamburger: nav-id is a required prop");
+    }
+  }
+  showTooltip() {
+    this.tooltipEl.textContent = this.showNavMessage;
+    this.tooltipEl.style.top = "1.125rem";
+    this.tooltipEl.style.left = "2.75rem";
+    this.tooltipEl.style.transitionDelay = "500ms";
+    this.tooltipEl.style.opacity = "1";
+    // tooltip is only visible after the transition delay.
+    // This also fixes an issue for keyboard users:
+    // if they tab to a button out of screen bounds, the page scrolls
+    // and hideTooltip() would be triggered before the tooltip would show
+    setTimeout(() => {
+      this.tooltipVisible = true;
+    }, 500);
+  }
+  hideTooltip() {
+    this.tooltipEl.style.transitionDelay = "0s";
+    this.tooltipEl.style.opacity = "0";
+    this.tooltipVisible = false;
+  }
+  showTooltipForKeyboardUsers() {
+    if (this.isTabbing) {
+      this.showTooltip();
+    }
+  }
+  handleClick() {
+    this.hideTooltip();
+    this.wmNavigationHamburgerClicked.emit();
+  }
+  render() {
+    return (h(Host, { class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { class: this.isTabbing ? "user-is-tabbing" : undefined, "aria-expanded": this.open, "aria-controls": this.navId, "aria-label": this.showNavMessage, onMouseEnter: () => this.showTooltip(), onMouseLeave: () => this.hideTooltip(), onFocus: () => this.showTooltipForKeyboardUsers(), onBlur: () => this.hideTooltip(), onClick: () => this.handleClick() }, h("span", { class: "icon" }))));
+  }
+  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}";
 
-let NavigationItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.wmNavigationItemClicked = createEvent(this, "wmNavigationItemClicked", 7);
-    this.isTabbing = false;
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  componentWillLoad() {
-    this.el.focus = function () {
-      this.shadowRoot.querySelector(".link").focus();
-    };
-    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
-      this.toggleTabbingOn();
-    }
-  }
-  render() {
-    return (h(Host, { role: "listitem" }, h("a", { class: `link ${this.active ? "active" : ""} ${this.isTabbing ? "user-is-tabbing" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { class: "icon", "aria-hidden": "true" }, h("slot", null)), h("div", { class: "text" }, this.text))));
-  }
-  get el() { return getElement(this); }
-};
+let NavigationItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wmNavigationItemClicked = createEvent(this, "wmNavigationItemClicked", 7);
+    this.isTabbing = false;
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  componentWillLoad() {
+    this.el.focus = function () {
+      this.shadowRoot.querySelector(".link").focus();
+    };
+    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+      this.toggleTabbingOn();
+    }
+  }
+  render() {
+    return (h(Host, { role: "listitem" }, h("a", { class: `link ${this.active ? "active" : ""} ${this.isTabbing ? "user-is-tabbing" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { class: "icon", "aria-hidden": "true" }, h("slot", null)), h("div", { class: "text" }, this.text))));
+  }
+  get el() { return getElement(this); }
+};
 NavigationItem.style = wmNavigationItemCss;
 
 export { Navigation as wm_navigation, NavigationHamburger as wm_navigation_hamburger, NavigationItem as wm_navigation_item };