@watermarkinsights/ripple 5.7.0-8 → 5.7.0

package/dist/collection/components/wm-menuitem/wm-menuitem.spec.js

@@ -0,0 +1,54 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Menuitem } from "./wm-menuitem";
+describe("wm-menuitem", () => {
+    it("builds", async () => {
+        const comp = await newSpecPage({
+            components: [Menuitem],
+            html: "<wm-menuitem><wm-menuitem>",
+        });
+        expect(comp.root).toMatchSnapshot();
+    });
+    it("handles disabled onClick function", async () => {
+        const page = await newSpecPage({
+            components: [Menuitem],
+            html: "<wm-menuitem><wm-menuitem>",
+        });
+        const menuItem = page.root;
+        const onClickFunc = () => console.log("Message");
+        menuItem.onclick = onClickFunc;
+        expect(menuItem.onclick).toEqual(onClickFunc);
+        menuItem.disabled = true;
+        expect(menuItem.onclick).toBe(null);
+        menuItem.disabled = false;
+        expect(menuItem.onclick).toEqual(onClickFunc);
+    });
+    it("renders description if prop is present", async () => {
+        const page = await newSpecPage({
+            components: [Menuitem],
+            html: "<wm-menuitem description='Description here'><wm-menuitem>",
+        });
+        const descriptionEl = page.root.shadowRoot.querySelector(".description");
+        expect(descriptionEl === null || descriptionEl === void 0 ? void 0 : descriptionEl.textContent).toBe("Description here");
+    });
+    describe("error throwing", () => {
+        it("throws error when description is over character limit", async () => {
+            const mockFunc = jest.fn();
+            console.error = mockFunc;
+            const description = "q".repeat(200);
+            await newSpecPage({
+                components: [Menuitem],
+                html: `<wm-menuitem description='${description}'></wm-menuitem>`,
+            });
+            expect(mockFunc).toHaveBeenCalledWith("wm-menuitem description is above the character limit of 100");
+        });
+        it("throws error when description and icon props are used simultaneously", async () => {
+            const mockFunc = jest.fn();
+            console.error = mockFunc;
+            await newSpecPage({
+                components: [Menuitem],
+                html: `<wm-menuitem description='Example description' icon="f3eb"></wm-menuitem>`,
+            });
+            expect(mockFunc).toHaveBeenCalledWith("wm-menuitems with descriptions do not support the use of icons");
+        });
+    });
+});

package/dist/collection/components/wm-modal/wm-modal-footer.js

@@ -30,7 +30,7 @@ export class ModalFooter {
         }
     }
     render() {
-        return (h("div", { key: '38b6b1759d4bdb628259acbf229a1d634df2dbf5', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '4259692e664739723e3895e8ec8d00ef00ef79f0', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '6ffea66fdfd257e754a9012e9471848037e92a52', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '679eef458298304564cd365f15c8253796158ed8', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { key: 'a6e02b671dbfbacba79aa483b8d6ab8dc9232166', "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.primaryText))));
+        return (h("div", { class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.primaryText))));
     }
     static get is() { return "wm-modal-footer"; }
     static get originalStyleUrls() {

package/dist/collection/components/wm-modal/wm-modal-footer.spec.js

@@ -0,0 +1,11 @@
+import { ModalFooter } from "./wm-modal-footer";
+describe("wm-modal-footer", () => {
+    it("has the right props", () => {
+        const modal = new ModalFooter();
+        expect(modal).toHaveProperty("secondaryText");
+        expect(modal).toHaveProperty("primaryText");
+        expect(modal).toHaveProperty("infoText");
+        expect(modal).toHaveProperty("primaryActionDisabled");
+        expect(modal).toHaveProperty("deleteStyle");
+    });
+});

package/dist/collection/components/wm-modal/wm-modal-header.js

@@ -21,7 +21,7 @@ export class ModalHeader {
         parentModal.emitCloseEvent();
     }
     render() {
-        return (h(Host, { key: 'f178a3e4b95a12286b3364efbebe22b3a389f24c' }, h("div", { key: '8a6589a653e28aa5eb926f50695fe129c57548d6', class: "wm-wrapper" }, h("div", { key: '33ca649393f628c8ab5160c5e11e208812dad450' }, h("h2", { key: 'e171bcaa0424e97401db3002bbc3ebaf9c66458d', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: 'aacf128010d3416ca788d2110240991dcf36fd17', class: "subtitle" }, this.subheading))), h("wm-button", { key: '1a7342cd0ed7aa024b52af067ec9ed33c7a63b04', "button-type": "navigational", icon: "f156", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
+        return (h(Host, null, h("div", { class: "wm-wrapper" }, h("div", null, h("h2", { class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { class: "subtitle" }, this.subheading))), h("wm-button", { "button-type": "navigational", icon: "f156", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
     }
     static get is() { return "wm-modal-header"; }
     static get originalStyleUrls() {

package/dist/collection/components/wm-modal/wm-modal-header.spec.js

@@ -0,0 +1,8 @@
+import { ModalHeader } from "./wm-modal-header";
+describe("wm-modal-header", () => {
+    it("has the right props", () => {
+        const modal = new ModalHeader();
+        expect(modal).toHaveProperty("heading");
+        expect(modal).toHaveProperty("subheading");
+    });
+});

package/dist/collection/components/wm-modal/wm-modal.e2e.js

@@ -0,0 +1,104 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { AxePuppeteer } from "@axe-core/puppeteer";
+describe("wm-modal", () => {
+    let page, modal, 
+    // overlay: any,
+    closeButton;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+        <button onClick="showModal()" id="modal-trigger">Open Modal</button><wm-modal id="modal-test"><wm-modal-header heading="Modal Heading"></wm-modal-header><div>Modal Body</div><wm-modal-footer primary-text="Save" secondary-text="Discard"></wm-modal-footer></wm-modal><button>Filler</button></main></body><script>const dialog = document.getElementById("modal-test");
+
+        dialog.addEventListener("wmModalCloseTriggered", function() {
+          dialog.open = false;
+        });
+
+        dialog.addEventListener("wmModalSecondaryTriggered", function() {
+          dialog.open = false;
+        });
+        
+        dialog.addEventListener("wmModalPrimaryTriggered", function() {
+          dialog.open = false;
+        });
+        function showModal() {
+          dialog.open = true;
+        }
+        </script></html>`);
+        modal = await page.find("wm-modal");
+        closeButton = await page.find("wm-button#wm-modal-close-modal-test >>> button");
+    });
+    it("passes Axe checks", async () => {
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    // RENDER
+    it("renders", async () => {
+        expect(modal).toHaveClass("hydrated");
+    });
+    // DISPLAY AND HIDE
+    it("emits the proper event when the close (X) button is clicked", async () => {
+        const eventSpy = await modal.spyOnEvent("wmModalCloseTriggered");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(modal).toHaveAttribute("open");
+        closeButton.click();
+        await page.waitForChanges();
+        expect(eventSpy).toHaveReceivedEventTimes(1);
+    });
+    //ACCESSIBILITY
+    it("focuses the close button when the modal opens if no elementToFocus property is set", async () => {
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter"); // open popup
+        await page.waitForChanges();
+        const activeElId = await page.evaluate(() => document.activeElement.id);
+        expect(activeElId).toEqual("wm-modal-close-modal-test");
+    });
+    it("focuses the correct element when the elementToFocus property is set", async () => {
+        page = await newE2EPage();
+        //The elementToFocus prop isn't mutable, so "setProperty" doesn't work. Page content has to be reset.
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+        <button onClick="showModal()">Open Modal</button><wm-modal element-to-focus="modal-input" id="second-modal"><wm-modal-header heading="Modal Heading"></wm-modal-header><div>Modal Body<div><input id="modal-input"></input></div></div><wm-modal-footer></wm-modal-footer></wm-modal></main></body><script>const dialog = document.getElementById("second-modal");
+
+        dialog.addEventListener("wmModalCloseTriggered", function() {
+          dialog.open = false;
+        });
+
+        dialog.addEventListener("wmModalSecondaryTriggered", function() {
+          dialog.open = false;
+        });
+        
+        dialog.addEventListener("wmModalPrimaryTriggered", function() {
+          dialog.open = false;
+        });
+        
+        function showModal() {
+          dialog.open = true;
+        }
+        </script></html>`);
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const activeElId = await page.evaluate(() => document.activeElement.id);
+        expect(activeElId).toEqual("modal-input");
+    });
+    it("returns focus to the triggering element when the modal closes", async () => {
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const activeElId = await page.evaluate(() => document.activeElement.id);
+        expect(activeElId).toEqual("modal-trigger");
+    });
+    it("closes the modal when escape key is pressed", async () => {
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(modal).toHaveAttribute("open");
+        await page.keyboard.press("Escape");
+        await page.waitForChanges();
+        expect(modal).not.toHaveAttribute("open");
+    });
+});

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

@@ -108,11 +108,11 @@ export class Modal {
         }
     }
     render() {
-        return (h("dialog", { key: '013cab28a1dba3a63ab8c350bfac543520254e63', class: `${"wm-" + this.modalType}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '0bedae272d1154b61fbd7ebac59020d6c5b6b3b9', class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
+        return (h("dialog", { class: `${"wm-" + this.modalType}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
                 const focusedFromCloseButton = ev.relatedTarget && ev.relatedTarget == this.closeButtonEl;
                 // no related target means we're coming from outside the page (browser chrome), and first element should be focused instead
                 focusedFromCloseButton ? this.focusLastElement.emit() : this.focusFirstElement.emit();
-            } }), !this.hasBrowserPopoverSupport && h("div", { key: '732a9e8edb3302a2d17dd9af6c8bf65ce73fc5d1', class: "wm-tooltip" }), h("slot", { key: '0ee3e5372886db1eb3f814d3f72d422771bbce27' }), h("div", { key: '197477a1dd69b1f5d2cb910fd01e1b3b247bafda', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
+            } }), !this.hasBrowserPopoverSupport && h("div", { class: "wm-tooltip" }), h("slot", null), h("div", { class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
                 this.focusFirstElement.emit();
             } })));
     }

package/dist/collection/components/wm-modal/wm-modal.spec.js

@@ -0,0 +1,30 @@
+import { newSpecPage } from "@stencil/core/testing";
+jest.mock("../../global/functions");
+import { Modal } from "./wm-modal";
+import { ModalHeader } from "./wm-modal-header";
+import { ModalFooter } from "./wm-modal-footer";
+describe("wm-modal", () => {
+    it("builds", async () => {
+        const comp = await newSpecPage({
+            components: [Modal, ModalHeader, ModalFooter],
+            html: "<wm-modal open='false'><wm-modal-header heading='heading'></wm-modal-header><div>content</div><wm-modal-footer primary-text='primary-text'></wm-modal-footer></wm-modal>",
+        });
+        expect(comp.root).toMatchSnapshot();
+    });
+    it("watching open-- toggles the modal", () => {
+        //toggleModal
+        const component = new Modal();
+        const mockShowModal = (component.showModal = jest.fn());
+        const mockHideModal = (component.hideModal = jest.fn());
+        component.open = true;
+        component.toggleModal();
+        expect(mockShowModal).toHaveBeenCalledTimes(1);
+        expect(mockHideModal).toHaveBeenCalledTimes(0);
+        jest.resetAllMocks();
+        component.open = false;
+        component.toggleModal();
+        expect(mockShowModal).toHaveBeenCalledTimes(0);
+        expect(mockHideModal).toHaveBeenCalledTimes(1);
+        jest.resetAllMocks();
+    });
+});

package/dist/collection/components/wm-modal-pss/wm-modal-pss-footer.css

@@ -30,12 +30,24 @@
    (they can't be aligned on the baseline because of possible description text and error message)
    -------------------------------------- */
 wm-modal-pss-footer {
+  -webkit-border-radius: 0px 0px 5px 5px;
+  -moz-border-radius: 0px 0px 5px 5px;
+  -ms-border-radius: 0px 0px 5px 5px;
   border-radius: 0px 0px 5px 5px;
   margin-top: -1px;
 }
 wm-modal-pss-footer .wm-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  -webkit-justify-content: space-between;
   justify-content: space-between;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
 }
 @media only screen and (max-width: 650px) {

package/dist/collection/components/wm-modal-pss/wm-modal-pss-footer.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-export class ModalFooter {
+export class ModalPssFooter {
     constructor() {
         this.secondaryText = "";
         this.primaryText = "";
@@ -27,7 +27,7 @@ export class ModalFooter {
         parentModal.emitSecondaryEvent();
     }
     render() {
-        return (h("div", { key: '51a2d057d08fee9eb7cb20610b44b5bd9d3300a1', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '18b9805744abd577708add4f5c1d6bc0149927fb', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: 'a449547065cb247a50f859ca5a4a82f070c06399', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: 'd1733ed5fe143f2e65433a667a40694fd5dbad43', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), h("wm-button", { key: '2177e7af952bd16fa6cb4cf23dbf2acf18445ebc', "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.primaryText))));
+        return (h("div", { class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), h("wm-button", { "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.primaryText))));
     }
     static get is() { return "wm-modal-pss-footer"; }
     static get originalStyleUrls() {

package/dist/collection/components/wm-modal-pss/wm-modal-pss-header.css

@@ -30,12 +30,24 @@
    (they can't be aligned on the baseline because of possible description text and error message)
    -------------------------------------- */
 wm-modal-pss-header {
+  -webkit-border-radius: 5px 5px 0 0px;
+  -moz-border-radius: 5px 5px 0 0px;
+  -ms-border-radius: 5px 5px 0 0px;
   border-radius: 5px 5px 0 0px;
   margin-bottom: -1px;
 }
 wm-modal-pss-header .wm-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  -webkit-justify-content: space-between;
   justify-content: space-between;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
 }
 wm-modal-pss-header .wm-wrapper .title {

package/dist/collection/components/wm-modal-pss/wm-modal-pss-header.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
-export class ModalHeader {
+import { globalMessages } from "../../global/intl";
+export class ModalPssHeader {
     constructor() {
         this.heading = "";
         this.subheading = "";
@@ -24,7 +25,7 @@ export class ModalHeader {
     //   this.headingElement.focus();
     // }
     render() {
-        return (h(Host, { key: '2b2dda4dcd73e99ead055334998d5ef97ea60df4' }, h("div", { key: '8a1f05da81b4663558e962f7b540fac35e2bbfa3', class: "wm-wrapper" }, h("div", { key: '2948adf911680be5ba5a4beb317ddd57303a9a15' }, h("h2", { key: 'f1068bac6d9692a6368f5662bbcde1aad83c3317', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: '9452c69404d41425a2bce3fbe15e457fc773a640', class: "subtitle" }, this.subheading))), h("wm-button", { key: '1961750a256f7ad40f8d06345994479b0e3ed541', "button-type": "navigational", icon: "f156", tooltip: "Close", "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
+        return (h(Host, null, h("div", { class: "wm-wrapper" }, h("div", null, h("h2", { class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { class: "subtitle" }, this.subheading))), h("wm-button", { "button-type": "navigational", icon: "f156", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
     }
     static get is() { return "wm-modal-pss-header"; }
     static get originalStyleUrls() {

package/dist/collection/components/wm-modal-pss/wm-modal-pss.css

@@ -34,8 +34,17 @@ wm-modal-pss {
   --wmcolor-modal-border: var(--wmcolor-border);
   --wmcolor-modal-heading: var(--wmcolor-text);
   --wmcolor-modal-overlay: var(--wmcolor-overlay);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
   flex-direction: column;
   position: fixed;
@@ -46,6 +55,8 @@ wm-modal-pss {
   width: 80vw;
   max-width: 750px;
   max-height: 80vh;
+  -webkit-box-shadow: 0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);
+  -moz-box-shadow: 0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);
   box-shadow: 0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);
 }
 wm-modal-pss * {
@@ -61,7 +72,7 @@ wm-modal-pss > *:focus {
 }
 wm-modal-pss wm-modal-pss-header,
 wm-modal-pss wm-modal-pss-footer {
-  padding: 20px 30px;
+  padding: 1.25rem 1.875rem;
 }
 wm-modal-pss wm-modal-pss-header {
   z-index: 2003;
@@ -96,7 +107,7 @@ wm-modal-pss.wm-modal wm-modal-pss-footer {
   }
 }
 wm-modal-pss.wm-dialog > :not(wm-modal-pss-header):not(wm-modal-pss-footer) {
-  padding: 0 30px 20px 30px;
+  padding: 0 1.875rem 1.25rem 1.875rem;
   font-size: 0.875rem;
   border: none;
 }
@@ -112,6 +123,9 @@ wm-modal-pss .overlay {
   right: 1;
   transform: translate(0%, 0%);
   background-color: var(--wmcolor-modal-overlay);
+  -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;
   z-index: 2000;
 }

package/dist/collection/components/wm-modal-pss/wm-modal-pss.js

@@ -1,5 +1,7 @@
 import { h, Host } from "@stencil/core";
-export class Modal {
+import { checkForActiveElInShadow } from "../../global/functions";
+import { generateId } from "../../global/functions";
+export class ModalPss {
     constructor() {
         this.bodyFocusListener = () => this.redirectFocusFromBody();
         this.open = false;
@@ -24,6 +26,12 @@ export class Modal {
     toggleModal() {
         this.open ? this.showModal() : this.hideModal();
     }
+    //The below not implemented in light of the fact that the app does often need to keep track of the modal's state itself so that it can update the data displayed in the body:
+    //App can also open modal by emitting wmShowModal event. Event needs to include the modal's unique id as the event detail, or else all modals on the page will open when wmShowModal event is dispatched.
+    // @Listen("wmShowModal", { target: "window" })
+    // doesEventMatchId(ev: CustomEvent) {
+    //   ev.detail === this.uid && this.showModal();
+    // }
     handleClick(ev) {
         this.open && ev.target === this.overlayEl && this.focusOnOpenEl.focus();
     }
@@ -58,14 +66,13 @@ export class Modal {
     componentWillLoad() {
         if (this.elementToFocus === "primary" || this.elementToFocus === "secondary") {
             if (!this.el.id) {
-                console.error("For accessibility purposes, you need to set the modal content wrapper's id to 'content-[id of wm-modal-pss]'.");
+                console.error("You are telling the modal to focus an element in the footer when it opens. That's fine! But when you do that, you also need to give the wm-modal-wrapper an ID and set the ID of the modal body to 'content-[id of wm-modal-wrapper]. This is for accessibility purposes.");
             }
         }
         this.el.focus = () => {
             this.focusOnOpenEl.focus();
         };
-        const generatedId = "wmcl-" + Math.random().toString(36).substr(2, 10);
-        this.uid = this.el.id ? this.el.id : generatedId;
+        this.uid = this.el.id ? this.el.id : generateId();
     }
     componentDidLoad() {
         if (this.open) {
@@ -96,13 +103,7 @@ export class Modal {
             this.focusOnCloseEl = elToFocus.parentElement;
         }
         else {
-            let el;
-            while (elToFocus && elToFocus.shadowRoot) {
-                el = elToFocus.shadowRoot.activeElement;
-            }
-            if (el) {
-                this.focusOnCloseEl = el;
-            }
+            this.focusOnCloseEl = checkForActiveElInShadow(elToFocus);
         }
     }
     redirectFocusFromBody() {
@@ -111,9 +112,9 @@ export class Modal {
         }
     }
     render() {
-        return (h(Host, { key: '85e48c3a6876e546014d2100b5cf575ae0aa4eb8', class: `${this.open ? "" : "hide "}${"wm-" + this.modalType}`, role: "dialog", "aria-describedby": `wm-modal-heading-text-${this.uid}`, "aria-modal": "true", tabindex: this.open ? 0 : null, onFocus: () => {
+        return (h(Host, { class: `${this.open ? "" : "hide "}${"wm-" + this.modalType}`, role: "dialog", "aria-describedby": `wm-modal-heading-text-${this.uid}`, "aria-modal": "true", tabindex: this.open ? 0 : null, onFocus: () => {
                 this.focusLastElement.emit();
-            } }, h("div", { key: 'cf58003fbfc9ea4a013c3689aa93f45dca5a0358', class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { key: '59504e363659c2393c6b7f4a10f512485291b253', class: "sr-only", tabIndex: 0, onFocus: () => {
+            } }, h("div", { class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { class: "sr-only", tabIndex: 0, onFocus: () => {
                 this.focusFirstElement.emit();
             } })));
     }

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

@@ -34,7 +34,7 @@ export class NavigationHamburger {
         this.wmNavigationHamburgerClicked.emit();
     }
     render() {
-        return (h(Host, { key: '64106288d26853ec6dced8c379e308910d0fc241', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { key: 'f874ff163e409ae233521d4c089d8f28911fe051', "aria-expanded": this.open, "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", { key: 'd85220650c6728633ca27259b5a370bbc7d47e02', class: "icon" }))));
+        return (h(Host, { class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { "aria-expanded": this.open, "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 is() { return "wm-navigation-hamburger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ export class NavigationItem {
         this.active = undefined;
     }
     render() {
-        return (h(Host, { key: 'c4420b1e4396ac065b3674f52b124c0d25359435', role: "listitem" }, h("a", { key: 'ffd82c5f726e982e4418c8bd335c3c151ac1fbfd', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { key: 'fe1a4418452356a9811359ded2aac74694f9a3d2', class: "icon", "aria-hidden": "true" }, h("slot", { key: '9690f8cbfb21a229493b9b7585ccdb3e90691aa1' })), h("div", { key: 'e134a8b4ca4df635c460b87e7a87cb3909737903', class: "text" }, this.text))));
+        return (h(Host, { role: "listitem" }, h("a", { class: `link ${this.active ? "active" : ""}`, 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 is() { return "wm-navigation-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +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>
+      <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(0);
+    });
+    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
+});

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

@@ -96,9 +96,9 @@ export class Navigation {
             } }));
     }
     render() {
-        return (h(Host, { key: '4b46f2057cf47f6f2857a8c2fbd0113fbaa3d71b', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: 'fe2e1586827cdbc1d0de1813ca15e5dbd42d99c0', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: 'a65d6897042cadf2a43d99535c18ec314b6e1c54', class: "tray" }, h("div", { key: 'ff0242631c40b374c750e6377449d751ccc88d4c', class: "toggle-wrapper" }, h("wm-button", { key: 'e76ca281e2df25b9ab4169ff0aa9689ca3f71cae', ref: (el) => (this.toggleEl = el), class: "toggle", "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: () => {
+        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", "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", { key: 'd056d10575ad4aa3deb5cf00011d3469860625e0', class: "navlist" }, h("slot", { key: '5b4be146205fec5ffbd44970e60d7aa4e00c7fc1' }))), this.isCollapsible && (h("div", { key: 'dbba46d2e9e1c70a65cc968560197a56097775fe', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
+            } })), 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"; }