@watermarkinsights/ripple 5.13.0-alpha.3 → 5.13.0-alpha.4

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

@@ -1,192 +0,0 @@
-import { h, Host, forceUpdate } from "@stencil/core";
-import { intl, throttle } from "../../global/functions";
-import { globalMessages } from "../../global/intl";
-export class Navigation {
-    constructor() {
-        this.open = false;
-        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);
-    }
-    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: '07715708e3ce55d682922a541a2eb3ebc344e3f8', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: 'dc1605e10718db381d62277212075d66c449203a', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: '5eac009e3b8ca72758876ba2854f08c0b628272e', class: "tray" }, h("div", { key: 'e55a956593076b1256dc2f9b5afff29bbb6ee02a', class: "toggle-wrapper" }, h("wm-button", { key: '87206deed2d58e192644a29f79b7e43c62cd9527', 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: 'd556f415a4e448737cdd4330ee3b491bdb92406d', class: "navlist" }, h("slot", { key: '4afb84723d83cff39fba23769f84cfc03ee0b83d' }))), this.isCollapsible && (h("div", { key: '2b28fde2e59ffe93d48173f30682ace5297b9266', 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",
-                "attribute": "open",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "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
-            }];
-    }
-}