@watermarkinsights/ripple 4.2.0-1 → 4.2.0

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

@@ -1,200 +1,200 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, f as forceUpdate } from './index-f164fbca.js';
-import { i as intl, x as throttle, h as hideTooltip, s as showTooltip } from './functions-d0e70094.js';
-import { g as globalMessages } from './intl-05c9e0c9.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, f as forceUpdate } from './index-7e11ea42.js';
+import { i as intl, x as throttle, h as hideTooltip, s as showTooltip } from './functions-5afd09f4.js';
+import { g as globalMessages } from './intl-e2da750a.js';
 
 const wmNavigationCss = ":host{--wmcolor-navigation-background-hover:var(--wmcolor-interactive-background-hover);--wmcolor-navigation-background-selected:var(--wmcolor-background-selected);--wmcolor-navigation-background:var(--wmcolor-background);--wmcolor-navigation-border-selected:var(--wmcolor-interactive);--wmcolor-navigation-focus:var(--wmcolor-interactive-focus);--wmcolor-navigation-icon-selected:var(--wmcolor-interactive);--wmcolor-navigation-icon:var(--wmcolor-icon);--wmcolor-navigation-text-selected:var(--wmcolor-interactive);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:var(--wmcolor-navigation-background);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.throttledRerender = throttle(() => forceUpdate(this.el), 50);
+  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.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;
-        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() {
+      } }));
+  }
+  render() {
+    return (h(Host, { role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { class: "tray" }, h("div", { class: "toggle-wrapper" }, h("wm-button", { ref: (el) => (this.toggleEl = el), class: `toggle ${this.isTabbing ? "user-is-tabbing" : ""}`, "button-type": "navigational", icon: this.open ? "f156" : "f35c", "icon-size": "2rem", tooltip: this.open ? globalMessages.close : globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
         this.open = !this.open;
-    }
-    handleClickOnItem() {
-        this.open = false;
-    }
-    handleStateChange() {
-        if (this.isCollapsible) {
-            this.wmNavigationStateChanged.emit();
-            this.open ? this.expand() : this.collapse();
-        }
-    }
-    componentWillLoad() {
-        if (document.body.classList.contains("wmcl-user-is-tabbing")) {
-            this.toggleTabbingOn();
-        }
-        this.el.focus = () => {
-            // in addition to delegatesFocus, we need to highjack the focus method to send focus to the appropriate element based on the navigation's state
-            const btn = this.open
-                ? this.el.shadowRoot.querySelector(".toggle")
-                : document.querySelector("wm-navigation-hamburger");
-            const firstItem = this.el.querySelector("wm-navigation-item");
-            this.isCollapsible ? btn.focus() : firstItem.focus();
-        };
-        if (this.isCollapsible && this.open) {
-            // hamburger needs to know if open was initially set to true
-            this.wmNavigationStateChanged.emit();
-            this.expand();
-        }
-    }
-    redirectFocusFromBody(ev) {
-        // the 2nd check excludes the case when user clicks on the page when the nav is open,
-        // which should not redirect focus
-        if (document.activeElement.tagName === "BODY" && !ev.relatedTarget) {
-            this.el.focus();
-        }
-    }
-    expand() {
-        // listen to focus on body and redirect to the component
-        // this is to handle trap focus when user has left the page (e.g. went to the address bar)
-        // and is tabbing back in
-        document.body.tabIndex = 0;
-        document.body.addEventListener("focus", this.redirectFocusFromBody.bind(this), true);
-        // wait for nav to be expanded otherwise tooltip will be misplaced.
-        setTimeout(() => this.toggleEl.focus(), 250);
-        //document.querySelector("wm-navigation")!.shadowRoot!.querySelector(".toggle")!.focus()
-    }
-    collapse() {
-        // rm event listener on body
-        document.body.tabIndex = -1;
-        document.body.removeEventListener("focus", this.redirectFocusFromBody.bind(this));
-        const hamburgerBtn = document.querySelector("wm-navigation-hamburger");
-        // should fail silently if el doesn't exist
-        // (dev may have chosen not to use the hamburger component)
-        if (hamburgerBtn)
-            hamburgerBtn.focus();
-    }
-    focusLastItem() {
-        const items = this.el.querySelectorAll("wm-navigation-item");
-        const lastItem = Array.from(items).pop();
-        lastItem.focus();
-    }
-    renderOverlay() {
-        return (h("div", { class: "overlay", onClick: () => {
-                this.open = false;
-            } }));
-    }
-    render() {
-        return (h(Host, { role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { class: "tray" }, h("div", { class: "toggle-wrapper" }, h("wm-button", { ref: (el) => (this.toggleEl = el), class: `toggle ${this.isTabbing ? "user-is-tabbing" : ""}`, "button-type": "navigational", icon: this.open ? "f156" : "f35c", "icon-size": "2rem", tooltip: this.open ? globalMessages.close : globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
-                this.open = !this.open;
-            } })), h("ul", { class: "navlist" }, h("slot", null))), this.isCollapsible && (h("div", { class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
-    }
-    static get delegatesFocus() { return true; }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "open": ["handleStateChange"]
-    }; }
+      } })), 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{--wmcolor-navigation-hamburger-background-hover:var(--wmcolor-interactive-background-hover);--wmcolor-navigation-hamburger-icon:var(--wmcolor-interactive);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 var(--wmcolor-interactive-focus);-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 var(--wmcolor-interactive-focus);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 var(--wmcolor-interactive-focus)}button.user-is-tabbing:focus::-moz-focus-inner{border:0}button:hover{background-color:var(--wmcolor-navigation-hamburger-background-hover)}.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:var(--wmcolor-navigation-hamburger-icon)}@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.isTabbing = false;
-        this.open = false;
-    }
-    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");
-        }
-    }
-    handleClick() {
-        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: () => showTooltip("right", this.el, this.showNavMessage), onMouseLeave: () => hideTooltip(), onFocus: () => this.isTabbing && showTooltip("right", this.el, this.showNavMessage), onBlur: () => hideTooltip(), onClick: () => this.handleClick() }, h("span", { class: "icon" }))));
-    }
-    static get delegatesFocus() { return true; }
-    get el() { return getElement(this); }
+  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.isTabbing = false;
+    this.open = false;
+  }
+  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");
+    }
+  }
+  handleClick() {
+    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: () => showTooltip("right", this.el, this.showNavMessage), onMouseLeave: () => hideTooltip(), onFocus: () => this.isTabbing && showTooltip("right", this.el, this.showNavMessage), onBlur: () => 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;background:var(--wmcolor-navigation-background)}.link:hover{background-color:var(--wmcolor-navigation-background-hover)}.link .icon{font-size:1.375rem;color:var(--wmcolor-navigation-icon)}.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 var(--wmcolor-navigation-focus);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 var(--wmcolor-navigation-focus)}.link.active{background-color:var(--wmcolor-navigation-background-selected)}.link.active:before{content:\"\";background-color:var(--wmcolor-navigation-border-selected);position:absolute;height:100%;width:5px;left:0}.link.active .text{color:var(--wmcolor-navigation-text-selected)}.link.active .icon{color:var(--wmcolor-navigation-icon-selected)}";
 
 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); }
+  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;