@watermarkinsights/ripple 5.14.0-alpha.0 → 5.14.0-alpha.2

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

@@ -0,0 +1,190 @@
+import { h, Host, forceUpdate } from "@stencil/core";
+import { intl, throttle } from "../../global/functions";
+import { globalMessages } from "../../global/intl";
+export class Navigation {
+    constructor() {
+        this.mainNavigationMessage = intl.formatMessage({
+            id: "navigation.mainNavigation",
+            defaultMessage: "Main",
+            description: "Label describing the site navigation, for screen reader users",
+        });
+        this.throttledRerender = throttle(() => forceUpdate(this.el), 50);
+        this.open = false;
+    }
+    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;
+    }
+    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() {
+        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, { key: '2814317e9df5355d6aa44cc1df266dfd3f2b3590', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: '70c9225e6199aed113b4728f34afabf3c151ddb1', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: '07ee2a1c4de3577e03969f7b1090524eb828044f', class: "tray" }, h("div", { key: 'fafec1a0a6b8b56cfc9c90f03e3b78ac068537cd', class: "toggle-wrapper" }, h("wm-button", { key: 'ebc0b699a4ffa1076f0e6bd73d47d216876192d0', ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "#close" : "#menu", "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", { key: '718647b0231b179e00c36545e8bc630535c15c41', class: "navlist" }, h("slot", { key: 'fcefea770f648abb858777aab111063e04bf6aac' }))), this.isCollapsible && (h("div", { key: '62559136e2753cbbe613f7e23d9914af090b0f1f', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
+    }
+    static get is() { return "wm-navigation"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-navigation.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-navigation.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "open",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmNavigationStateChanged",
+                "name": "wmNavigationStateChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleStateChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "closeOnEscape",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "resize",
+                "method": "handleWindowResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "wmNavigationHamburgerClicked",
+                "method": "handleHamburgerClicked",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmNavigationItemClicked",
+                "method": "handleClickOnItem",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}