npm - @watermarkinsights/ripple - Versions diffs - 4.3.0 → 4.4.0-0 - Mend

@watermarkinsights/ripple 4.3.0 → 4.4.0-0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (371) hide show

package/dist/collection/components/wm-navigation/wm-navigation.e2e.js CHANGED Viewed

@@ -1,102 +1,102 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { AxePuppeteer } from "@axe-core/puppeteer";
 describe("wm-navigation", () => {
-  let page, nav, hamburger, items;
-  beforeEach(async () => {
-    page = await newE2EPage();
-    await page.setContent(`<html lang='en'><head><title>Page</title></head><body>
+    let page, nav, hamburger, items;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body>
       <wm-navigation-hamburger nav-id="mynav"></wm-navigation-hamburger>
       <wm-navigation id="mynav">
       <wm-navigation-item href="/home" text="Home" active>Home</wm-navigation-item>
       <wm-navigation-item href="/things" text="Things">Things</wm-navigation-item>
       </wm-navigation><main><h1>Title</h1><button>something tabbable here</button>
       </main></body></html>`);
-    nav = await page.find("wm-navigation");
-    hamburger = await page.find("wm-navigation-hamburger");
-    items = await page.find("wm-navigation-item");
-  });
-  it("passes Axe checks", async () => {
-    const results = await new AxePuppeteer(page).analyze();
-    expect(results.violations.length).toBe(1); // there's an false error about aria-controls having a wrong value
-  });
-  it("renders the component", async () => {
-    expect(nav).not.toBeNull();
-    expect(hamburger).not.toBeNull();
-    expect(items).not.toBeNull();
-  });
-  it("traps focus when collapsible", async () => {
-    // small screen, trap focus
-    page.setViewport({ width: 1023, height: 800 });
-    page.waitForChanges();
-    await page.keyboard.press("Tab"); // focus on hamburger
-    await page.keyboard.press("Enter"); // open. focus on close btn
-    await page.waitForTimeout(250); // wait for animation to complete and focus to be called
-    await page.keyboard.press("Tab"); // focus on 1st nav item
-    await page.keyboard.press("Tab"); // focus on 2nd nav item
-    await page.keyboard.press("Tab"); // with trap focus we circle back within the nav (on close btn)
-    let activeEl = await page.evaluate(() => document.activeElement.tagName);
-    expect(activeEl).toEqual("WM-NAVIGATION");
-  });
-  it("doesn't trap focus when persistent", async () => {
-    // wide screen, no trap focus
-    page.setViewport({ width: 1024, height: 800 });
-    await page.waitForChanges(); // test fails randomly without this
-    await page.keyboard.press("Tab"); // focus on 1st nav item
-    await page.keyboard.press("Tab"); // focus on 2nd nav item
-    await page.keyboard.press("Tab"); // focus on the button in main
-    let activeEl = await page.evaluate(() => document.activeElement.tagName);
-    expect(activeEl).toEqual("BUTTON");
-  });
-  it("handles focus method when collapsible and closed", async () => {
-    page.setViewport({ width: 1023, height: 800 });
-    let activeEl = await page.evaluate(() => document.activeElement.tagName);
-    expect(activeEl).toEqual("BODY");
-    nav.focus();
-    activeEl = await page.evaluate(() => document.activeElement.tagName);
-    expect(activeEl).toEqual("WM-NAVIGATION-HAMBURGER");
-  });
-  it("handles focus method when collapsible and open", async () => {
-    page.setViewport({ width: 1023, height: 800 });
-    let activeEl = await page.evaluate(() => document.activeElement.tagName);
-    expect(activeEl).toEqual("BODY");
-    expect(nav.getAttribute("aria-expanded")).toBe("false");
-    hamburger.click();
-    await page.waitForChanges();
-    expect(nav.getAttribute("aria-expanded")).toBe("true");
-    nav.focus();
-    activeEl = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.tagName);
-    expect(activeEl).toEqual("WM-BUTTON"); // the close button
-  });
-  it("handles focus method when persistent", async () => {
-    page.setViewport({ width: 1024, height: 800 });
-    let activeEl = await page.evaluate(() => document.activeElement.tagName);
-    expect(activeEl).toEqual("BODY");
-    expect(nav.getAttribute("aria-expanded")).toBeUndefined;
-    nav.focus();
-    expect(nav.getAttribute("aria-expanded")).toBeUndefined; // should still be undefined
-    activeEl = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.textContent);
-    expect(activeEl).toEqual("Home"); // first item
-  });
-  it("is open on load if open prop is set to true", async () => {
-    page = await newE2EPage();
-    await page.setContent(`<html lang='en'><head><title>Page</title></head><body>
+        nav = await page.find("wm-navigation");
+        hamburger = await page.find("wm-navigation-hamburger");
+        items = await page.find("wm-navigation-item");
+    });
+    it("passes Axe checks", async () => {
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(1); // there's an false error about aria-controls having a wrong value
+    });
+    it("renders the component", async () => {
+        expect(nav).not.toBeNull();
+        expect(hamburger).not.toBeNull();
+        expect(items).not.toBeNull();
+    });
+    it("traps focus when collapsible", async () => {
+        // small screen, trap focus
+        page.setViewport({ width: 1023, height: 800 });
+        page.waitForChanges();
+        await page.keyboard.press("Tab"); // focus on hamburger
+        await page.keyboard.press("Enter"); // open. focus on close btn
+        await page.waitForTimeout(250); // wait for animation to complete and focus to be called
+        await page.keyboard.press("Tab"); // focus on 1st nav item
+        await page.keyboard.press("Tab"); // focus on 2nd nav item
+        await page.keyboard.press("Tab"); // with trap focus we circle back within the nav (on close btn)
+        let activeEl = await page.evaluate(() => document.activeElement.tagName);
+        expect(activeEl).toEqual("WM-NAVIGATION");
+    });
+    it("doesn't trap focus when persistent", async () => {
+        // wide screen, no trap focus
+        page.setViewport({ width: 1024, height: 800 });
+        await page.waitForChanges(); // test fails randomly without this
+        await page.keyboard.press("Tab"); // focus on 1st nav item
+        await page.keyboard.press("Tab"); // focus on 2nd nav item
+        await page.keyboard.press("Tab"); // focus on the button in main
+        let activeEl = await page.evaluate(() => document.activeElement.tagName);
+        expect(activeEl).toEqual("BUTTON");
+    });
+    it("handles focus method when collapsible and closed", async () => {
+        page.setViewport({ width: 1023, height: 800 });
+        let activeEl = await page.evaluate(() => document.activeElement.tagName);
+        expect(activeEl).toEqual("BODY");
+        nav.focus();
+        activeEl = await page.evaluate(() => document.activeElement.tagName);
+        expect(activeEl).toEqual("WM-NAVIGATION-HAMBURGER");
+    });
+    it("handles focus method when collapsible and open", async () => {
+        page.setViewport({ width: 1023, height: 800 });
+        let activeEl = await page.evaluate(() => document.activeElement.tagName);
+        expect(activeEl).toEqual("BODY");
+        expect(nav.getAttribute("aria-expanded")).toBe("false");
+        hamburger.click();
+        await page.waitForChanges();
+        expect(nav.getAttribute("aria-expanded")).toBe("true");
+        nav.focus();
+        activeEl = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.tagName);
+        expect(activeEl).toEqual("WM-BUTTON"); // the close button
+    });
+    it("handles focus method when persistent", async () => {
+        page.setViewport({ width: 1024, height: 800 });
+        let activeEl = await page.evaluate(() => document.activeElement.tagName);
+        expect(activeEl).toEqual("BODY");
+        expect(nav.getAttribute("aria-expanded")).toBeUndefined;
+        nav.focus();
+        expect(nav.getAttribute("aria-expanded")).toBeUndefined; // should still be undefined
+        activeEl = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.textContent);
+        expect(activeEl).toEqual("Home"); // first item
+    });
+    it("is open on load if open prop is set to true", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body>
       <wm-navigation-hamburger nav-id="mynav"></wm-navigation-hamburger>
       <wm-navigation open id="mynav">
       <wm-navigation-item href="/home" text="Home" active>Home</wm-navigation-item>
       <wm-navigation-item href="/things" text="Things">Things</wm-navigation-item>
       </wm-navigation><main><h1>Title</h1><button>something tabbable here</button>
       </main></body></html>`);
-    await page.waitForTimeout(500);
-    const nav = await page.find("wm-navigation");
-    expect(nav.getAttribute("aria-expanded")).toBe("true");
-  });
-  it("programatically associates hamburger and nav and properly announces to SR", async () => {
-    const hamburgerAriaControls = hamburger.shadowRoot.querySelector("button").getAttribute("aria-controls");
-    const hamburgerAriaLabel = hamburger.shadowRoot.querySelector("button").getAttribute("aria-label");
-    const navAriaLabel = nav.getAttribute("aria-label");
-    expect(hamburgerAriaControls).toBe(nav.id);
-    expect(hamburgerAriaLabel).toBe("Show navigation");
-    expect(navAriaLabel).toBe("Main");
-  });
-  // when closed, focus returns to hamburger
+        await page.waitForTimeout(500);
+        const nav = await page.find("wm-navigation");
+        expect(nav.getAttribute("aria-expanded")).toBe("true");
+    });
+    it("programatically associates hamburger and nav and properly announces to SR", async () => {
+        const hamburgerAriaControls = hamburger.shadowRoot.querySelector("button").getAttribute("aria-controls");
+        const hamburgerAriaLabel = hamburger.shadowRoot.querySelector("button").getAttribute("aria-label");
+        const navAriaLabel = nav.getAttribute("aria-label");
+        expect(hamburgerAriaControls).toBe(nav.id);
+        expect(hamburgerAriaLabel).toBe("Show navigation");
+        expect(navAriaLabel).toBe("Main");
+    });
+    // when closed, focus returns to hamburger
 });

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

@@ -2,216 +2,216 @@ 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;
-    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: () => {
+    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;
-      } }));
-  }
-  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.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;
-      } })), h("ul", { class: "navlist" }, h("slot", null))), this.isCollapsible && (h("div", { 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 states() {
-    return {
-      "isTabbing": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "wmNavigationStateChanged",
-        "name": "wmNavigationStateChanged",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+    }
+    handleClickOnItem() {
+        this.open = false;
+    }
+    handleStateChange() {
+        if (this.isCollapsible) {
+            this.wmNavigationStateChanged.emit();
+            this.open ? this.expand() : this.collapse();
         }
-      }];
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "open",
-        "methodName": "handleStateChange"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "wmUserIsTabbing",
-        "method": "toggleTabbingOn",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "wmUserIsNotTabbing",
-        "method": "toggleTabbingOff",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "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
-      }];
-  }
+    }
+    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 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 states() {
+        return {
+            "isTabbing": {}
+        };
+    }
+    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": "wmUserIsTabbing",
+                "method": "toggleTabbingOn",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmUserIsNotTabbing",
+                "method": "toggleTabbingOff",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "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
+            }];
+    }
 }