@watermarkinsights/ripple 5.10.0-14 → 5.10.0-16

package/dist/collection/components/wm-navigator/priv-navigator-button/priv-navigator-button.css

@@ -58,7 +58,7 @@
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M15,14C12.33,14 7,15.33 7,18V20H23V18C23,15.33 17.67,14 15,14M6,10V7H4V10H1V12H4V15H6V12H9V10M15,12A4,4 0 0,0 19,8A4,4 0 0,0 15,4A4,4 0 0,0 11,8A4,4 0 0,0 15,12Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M15,14C12.33,14 7,15.33 7,18V20H23V18C23,15.33 17.67,14 15,14M6,10V7H4V10H1V12H4V15H6V12H9V10M15,12A4,4 0 0,0 19,8A4,4 0 0,0 15,4A4,4 0 0,0 11,8A4,4 0 0,0 15,12Z'/%3E%3C/svg%3E%0A");
 }
-.svg-icon.svg-add-tag:before {
+.svg-icon.svg-add-outline:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z'/%3E%3C/svg%3E%0A");
 }
@@ -74,10 +74,6 @@
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19.8 22.6L17.15 20H6.5Q4.2 20 2.6 18.4T1 14.5Q1 12.58 2.19 11.08 3.38 9.57 5.25 9.15 5.33 8.95 5.4 8.76 5.5 8.57 5.55 8.35L1.4 4.2L2.8 2.8L21.2 21.2M6.5 18H15.15L7.1 9.95Q7.05 10.23 7.03 10.5 7 10.73 7 11H6.5Q5.05 11 4.03 12.03 3 13.05 3 14.5 3 15.95 4.03 17 5.05 18 6.5 18M11.13 14M21.6 18.75L20.15 17.35Q20.58 17 20.79 16.54 21 16.08 21 15.5 21 14.45 20.27 13.73 19.55 13 18.5 13H17V11Q17 8.93 15.54 7.46 14.08 6 12 6 11.33 6 10.7 6.16 10.07 6.33 9.5 6.68L8.05 5.23Q8.93 4.63 9.91 4.31 10.9 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 16.5 22.63 17.31 22.25 18.15 21.6 18.75M14.83 12.03Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19.8 22.6L17.15 20H6.5Q4.2 20 2.6 18.4T1 14.5Q1 12.58 2.19 11.08 3.38 9.57 5.25 9.15 5.33 8.95 5.4 8.76 5.5 8.57 5.55 8.35L1.4 4.2L2.8 2.8L21.2 21.2M6.5 18H15.15L7.1 9.95Q7.05 10.23 7.03 10.5 7 10.73 7 11H6.5Q5.05 11 4.03 12.03 3 13.05 3 14.5 3 15.95 4.03 17 5.05 18 6.5 18M11.13 14M21.6 18.75L20.15 17.35Q20.58 17 20.79 16.54 21 16.08 21 15.5 21 14.45 20.27 13.73 19.55 13 18.5 13H17V11Q17 8.93 15.54 7.46 14.08 6 12 6 11.33 6 10.7 6.16 10.07 6.33 9.5 6.68L8.05 5.23Q8.93 4.63 9.91 4.31 10.9 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 16.5 22.63 17.31 22.25 18.15 21.6 18.75M14.83 12.03Z'/%3E%3C/svg%3E%0A");
 }
-.svg-icon.svg-apps:before {
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16,20H20V16H16M16,14H20V10H16M10,8H14V4H10M16,8H20V4H16M10,14H14V10H10M4,14H8V10H4M4,20H8V16H4M10,20H14V16H10M4,8H8V4H4V8Z'/%3E%3C/svg%3E%0A");
-  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16,20H20V16H16M16,14H20V10H16M10,8H14V4H10M16,8H20V4H16M10,14H14V10H10M4,14H8V10H4M4,20H8V16H4M10,20H14V16H10M4,8H8V4H4V8Z'/%3E%3C/svg%3E%0A");
-}
 .svg-icon.svg-attach:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.5,6V17.5A4,4 0 0,1 12.5,21.5A4,4 0 0,1 8.5,17.5V5A2.5,2.5 0 0,1 11,2.5A2.5,2.5 0 0,1 13.5,5V15.5A1,1 0 0,1 12.5,16.5A1,1 0 0,1 11.5,15.5V6H10V15.5A2.5,2.5 0 0,0 12.5,18A2.5,2.5 0 0,0 15,15.5V5A4,4 0 0,0 11,1A4,4 0 0,0 7,5V17.5A5.5,5.5 0 0,0 12.5,23A5.5,5.5 0 0,0 18,17.5V6H16.5Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.5,6V17.5A4,4 0 0,1 12.5,21.5A4,4 0 0,1 8.5,17.5V5A2.5,2.5 0 0,1 11,2.5A2.5,2.5 0 0,1 13.5,5V15.5A1,1 0 0,1 12.5,16.5A1,1 0 0,1 11.5,15.5V6H10V15.5A2.5,2.5 0 0,0 12.5,18A2.5,2.5 0 0,0 15,15.5V5A4,4 0 0,0 11,1A4,4 0 0,0 7,5V17.5A5.5,5.5 0 0,0 12.5,23A5.5,5.5 0 0,0 18,17.5V6H16.5Z'/%3E%3C/svg%3E%0A");
@@ -202,6 +198,10 @@
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z'/%3E%3C/svg%3E%0A");
 }
+.svg-icon.svg-reset:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,5V1L7,6L12,11V7A6,6 0 0,1 18,13A6,6 0 0,1 12,19A6,6 0 0,1 6,13H4A8,8 0 0,0 12,21A8,8 0 0,0 20,13A8,8 0 0,0 12,5Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,5V1L7,6L12,11V7A6,6 0 0,1 18,13A6,6 0 0,1 12,19A6,6 0 0,1 6,13H4A8,8 0 0,0 12,21A8,8 0 0,0 20,13A8,8 0 0,0 12,5Z'/%3E%3C/svg%3E%0A");
+}
 .svg-icon.svg-restore:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3'/%3E%3C/svg%3E%0A");

package/dist/collection/components/wm-navigator/priv-navigator-button/priv-navigator-button.e2e.js

@@ -0,0 +1,50 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("priv-navigator-button", () => {
+    let page, 
+    //navigator: any,
+    //navigatorList: any,
+    navigatorButton, button;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`
+    <html lang='en'>
+        <head>
+            <title>Page</title>
+        </head>
+        <body>
+            <main>
+                <h1>Title</h1>
+                <wm-navigator id="nav" selected-product="planning" user-name="Adrienne Johnson" email="ajohnson@watermarkinsights.com"></wm-navigator>
+                <script>window.onload = function getModules() {
+                  const navigator = document.getElementById("nav");
+                  const userModules = [{ "id": "aqua", "link_url": "", "saml_link_url": "" }, { "id": "dm", "link_url": "", "saml_link_url": "" }, { "id": "planning", "link_url": "", "saml_link_url": "" }, { "id": "livetext", "link_url": "", "saml_link_url": "" }];
+                  const stringifyModules = JSON.stringify(userModules);
+                  navigator.products = stringifyModules;
+                };</script>
+            </main>
+        </body>
+    </html>`);
+        // navigator = await page.find("wm-navigator");
+        // navigatorList = await page.find("wm-navigator >>> ul");
+        navigatorButton = await page.find("wm-navigator >>> priv-navigator-button");
+        button = await navigatorButton.shadowRoot.querySelector("button");
+    });
+    // RENDER
+    it("renders a button", async () => {
+        expect(button).not.toBeNull();
+    });
+    it("it has an aria-expanded attribute whose value updates when the menu opens and closes", async () => {
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        navigatorButton = await page.find("wm-navigator >>> priv-navigator-button");
+        button = await navigatorButton.shadowRoot.querySelector("button");
+        expect(button.getAttribute("aria-expanded")).toEqual("true");
+        await page.keyboard.press("Escape");
+        await page.waitForChanges();
+        navigatorButton = await page.find("wm-navigator >>> priv-navigator-button");
+        button = await navigatorButton.shadowRoot.querySelector("button");
+        expect(button.getAttribute("aria-expanded")).toEqual("false");
+    });
+});

package/dist/collection/components/wm-navigator/priv-navigator-button/priv-navigator-button.js

@@ -9,7 +9,7 @@ export class PrivNavigatorButton {
     }
     render() {
         const { handleClick, altText } = this;
-        return (h("button", { key: 'cda82c28e335018746ecbee5bc8bc1b71e61a598', "aria-expanded": this.expanded.toString(), class: "navigator", onClick: handleClick.bind(this), "aria-label": altText }));
+        return (h("button", { "aria-expanded": this.expanded.toString(), class: "navigator", onClick: handleClick.bind(this), "aria-label": altText }));
     }
     static get is() { return "priv-navigator-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-navigator/priv-navigator-item/priv-navigator-item.css

@@ -58,7 +58,7 @@
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M15,14C12.33,14 7,15.33 7,18V20H23V18C23,15.33 17.67,14 15,14M6,10V7H4V10H1V12H4V15H6V12H9V10M15,12A4,4 0 0,0 19,8A4,4 0 0,0 15,4A4,4 0 0,0 11,8A4,4 0 0,0 15,12Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M15,14C12.33,14 7,15.33 7,18V20H23V18C23,15.33 17.67,14 15,14M6,10V7H4V10H1V12H4V15H6V12H9V10M15,12A4,4 0 0,0 19,8A4,4 0 0,0 15,4A4,4 0 0,0 11,8A4,4 0 0,0 15,12Z'/%3E%3C/svg%3E%0A");
 }
-.svg-icon.svg-add-tag:before {
+.svg-icon.svg-add-outline:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z'/%3E%3C/svg%3E%0A");
 }
@@ -74,10 +74,6 @@
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19.8 22.6L17.15 20H6.5Q4.2 20 2.6 18.4T1 14.5Q1 12.58 2.19 11.08 3.38 9.57 5.25 9.15 5.33 8.95 5.4 8.76 5.5 8.57 5.55 8.35L1.4 4.2L2.8 2.8L21.2 21.2M6.5 18H15.15L7.1 9.95Q7.05 10.23 7.03 10.5 7 10.73 7 11H6.5Q5.05 11 4.03 12.03 3 13.05 3 14.5 3 15.95 4.03 17 5.05 18 6.5 18M11.13 14M21.6 18.75L20.15 17.35Q20.58 17 20.79 16.54 21 16.08 21 15.5 21 14.45 20.27 13.73 19.55 13 18.5 13H17V11Q17 8.93 15.54 7.46 14.08 6 12 6 11.33 6 10.7 6.16 10.07 6.33 9.5 6.68L8.05 5.23Q8.93 4.63 9.91 4.31 10.9 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 16.5 22.63 17.31 22.25 18.15 21.6 18.75M14.83 12.03Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19.8 22.6L17.15 20H6.5Q4.2 20 2.6 18.4T1 14.5Q1 12.58 2.19 11.08 3.38 9.57 5.25 9.15 5.33 8.95 5.4 8.76 5.5 8.57 5.55 8.35L1.4 4.2L2.8 2.8L21.2 21.2M6.5 18H15.15L7.1 9.95Q7.05 10.23 7.03 10.5 7 10.73 7 11H6.5Q5.05 11 4.03 12.03 3 13.05 3 14.5 3 15.95 4.03 17 5.05 18 6.5 18M11.13 14M21.6 18.75L20.15 17.35Q20.58 17 20.79 16.54 21 16.08 21 15.5 21 14.45 20.27 13.73 19.55 13 18.5 13H17V11Q17 8.93 15.54 7.46 14.08 6 12 6 11.33 6 10.7 6.16 10.07 6.33 9.5 6.68L8.05 5.23Q8.93 4.63 9.91 4.31 10.9 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 16.5 22.63 17.31 22.25 18.15 21.6 18.75M14.83 12.03Z'/%3E%3C/svg%3E%0A");
 }
-.svg-icon.svg-apps:before {
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16,20H20V16H16M16,14H20V10H16M10,8H14V4H10M16,8H20V4H16M10,14H14V10H10M4,14H8V10H4M4,20H8V16H4M10,20H14V16H10M4,8H8V4H4V8Z'/%3E%3C/svg%3E%0A");
-  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16,20H20V16H16M16,14H20V10H16M10,8H14V4H10M16,8H20V4H16M10,14H14V10H10M4,14H8V10H4M4,20H8V16H4M10,20H14V16H10M4,8H8V4H4V8Z'/%3E%3C/svg%3E%0A");
-}
 .svg-icon.svg-attach:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.5,6V17.5A4,4 0 0,1 12.5,21.5A4,4 0 0,1 8.5,17.5V5A2.5,2.5 0 0,1 11,2.5A2.5,2.5 0 0,1 13.5,5V15.5A1,1 0 0,1 12.5,16.5A1,1 0 0,1 11.5,15.5V6H10V15.5A2.5,2.5 0 0,0 12.5,18A2.5,2.5 0 0,0 15,15.5V5A4,4 0 0,0 11,1A4,4 0 0,0 7,5V17.5A5.5,5.5 0 0,0 12.5,23A5.5,5.5 0 0,0 18,17.5V6H16.5Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.5,6V17.5A4,4 0 0,1 12.5,21.5A4,4 0 0,1 8.5,17.5V5A2.5,2.5 0 0,1 11,2.5A2.5,2.5 0 0,1 13.5,5V15.5A1,1 0 0,1 12.5,16.5A1,1 0 0,1 11.5,15.5V6H10V15.5A2.5,2.5 0 0,0 12.5,18A2.5,2.5 0 0,0 15,15.5V5A4,4 0 0,0 11,1A4,4 0 0,0 7,5V17.5A5.5,5.5 0 0,0 12.5,23A5.5,5.5 0 0,0 18,17.5V6H16.5Z'/%3E%3C/svg%3E%0A");
@@ -202,6 +198,10 @@
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z'/%3E%3C/svg%3E%0A");
 }
+.svg-icon.svg-reset:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,5V1L7,6L12,11V7A6,6 0 0,1 18,13A6,6 0 0,1 12,19A6,6 0 0,1 6,13H4A8,8 0 0,0 12,21A8,8 0 0,0 20,13A8,8 0 0,0 12,5Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,5V1L7,6L12,11V7A6,6 0 0,1 18,13A6,6 0 0,1 12,19A6,6 0 0,1 6,13H4A8,8 0 0,0 12,21A8,8 0 0,0 20,13A8,8 0 0,0 12,5Z'/%3E%3C/svg%3E%0A");
+}
 .svg-icon.svg-restore:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3'/%3E%3C/svg%3E%0A");

package/dist/collection/components/wm-navigator/priv-navigator-item/priv-navigator-item.js

@@ -16,7 +16,7 @@ export class PrivNavigatorItem {
     render() {
         const selectedClass = this.selected ? "selected" : "";
         const focusedClass = this.focused ? "focused" : "";
-        return (h("div", { key: '45bc50a75d0316308b9898a95bbb96fe153fcffe', class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", { key: '7a9db30be9b3ccea16ab5592915463a8ed49a32c' })));
+        return (h("div", { class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", null)));
     }
     static get is() { return "priv-navigator-item"; }
     static get encapsulation() { return "shadow"; }
@@ -100,7 +100,7 @@ export class PrivNavigatorItem {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{\r\n    navItem: HTMLPrivNavigatorItemElement;\r\n    key: string;\r\n  }",
+                    "original": "{\n    navItem: HTMLPrivNavigatorItemElement;\n    key: string;\n  }",
                     "resolved": "{ navItem: HTMLPrivNavigatorItemElement; key: string; }",
                     "references": {
                         "HTMLPrivNavigatorItemElement": {

package/dist/collection/components/wm-navigator/wm-navigator.css

@@ -58,7 +58,7 @@
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M15,14C12.33,14 7,15.33 7,18V20H23V18C23,15.33 17.67,14 15,14M6,10V7H4V10H1V12H4V15H6V12H9V10M15,12A4,4 0 0,0 19,8A4,4 0 0,0 15,4A4,4 0 0,0 11,8A4,4 0 0,0 15,12Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M15,14C12.33,14 7,15.33 7,18V20H23V18C23,15.33 17.67,14 15,14M6,10V7H4V10H1V12H4V15H6V12H9V10M15,12A4,4 0 0,0 19,8A4,4 0 0,0 15,4A4,4 0 0,0 11,8A4,4 0 0,0 15,12Z'/%3E%3C/svg%3E%0A");
 }
-.svg-icon.svg-add-tag:before {
+.svg-icon.svg-add-outline:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z'/%3E%3C/svg%3E%0A");
 }
@@ -74,10 +74,6 @@
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19.8 22.6L17.15 20H6.5Q4.2 20 2.6 18.4T1 14.5Q1 12.58 2.19 11.08 3.38 9.57 5.25 9.15 5.33 8.95 5.4 8.76 5.5 8.57 5.55 8.35L1.4 4.2L2.8 2.8L21.2 21.2M6.5 18H15.15L7.1 9.95Q7.05 10.23 7.03 10.5 7 10.73 7 11H6.5Q5.05 11 4.03 12.03 3 13.05 3 14.5 3 15.95 4.03 17 5.05 18 6.5 18M11.13 14M21.6 18.75L20.15 17.35Q20.58 17 20.79 16.54 21 16.08 21 15.5 21 14.45 20.27 13.73 19.55 13 18.5 13H17V11Q17 8.93 15.54 7.46 14.08 6 12 6 11.33 6 10.7 6.16 10.07 6.33 9.5 6.68L8.05 5.23Q8.93 4.63 9.91 4.31 10.9 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 16.5 22.63 17.31 22.25 18.15 21.6 18.75M14.83 12.03Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19.8 22.6L17.15 20H6.5Q4.2 20 2.6 18.4T1 14.5Q1 12.58 2.19 11.08 3.38 9.57 5.25 9.15 5.33 8.95 5.4 8.76 5.5 8.57 5.55 8.35L1.4 4.2L2.8 2.8L21.2 21.2M6.5 18H15.15L7.1 9.95Q7.05 10.23 7.03 10.5 7 10.73 7 11H6.5Q5.05 11 4.03 12.03 3 13.05 3 14.5 3 15.95 4.03 17 5.05 18 6.5 18M11.13 14M21.6 18.75L20.15 17.35Q20.58 17 20.79 16.54 21 16.08 21 15.5 21 14.45 20.27 13.73 19.55 13 18.5 13H17V11Q17 8.93 15.54 7.46 14.08 6 12 6 11.33 6 10.7 6.16 10.07 6.33 9.5 6.68L8.05 5.23Q8.93 4.63 9.91 4.31 10.9 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 16.5 22.63 17.31 22.25 18.15 21.6 18.75M14.83 12.03Z'/%3E%3C/svg%3E%0A");
 }
-.svg-icon.svg-apps:before {
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16,20H20V16H16M16,14H20V10H16M10,8H14V4H10M16,8H20V4H16M10,14H14V10H10M4,14H8V10H4M4,20H8V16H4M10,20H14V16H10M4,8H8V4H4V8Z'/%3E%3C/svg%3E%0A");
-  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16,20H20V16H16M16,14H20V10H16M10,8H14V4H10M16,8H20V4H16M10,14H14V10H10M4,14H8V10H4M4,20H8V16H4M10,20H14V16H10M4,8H8V4H4V8Z'/%3E%3C/svg%3E%0A");
-}
 .svg-icon.svg-attach:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.5,6V17.5A4,4 0 0,1 12.5,21.5A4,4 0 0,1 8.5,17.5V5A2.5,2.5 0 0,1 11,2.5A2.5,2.5 0 0,1 13.5,5V15.5A1,1 0 0,1 12.5,16.5A1,1 0 0,1 11.5,15.5V6H10V15.5A2.5,2.5 0 0,0 12.5,18A2.5,2.5 0 0,0 15,15.5V5A4,4 0 0,0 11,1A4,4 0 0,0 7,5V17.5A5.5,5.5 0 0,0 12.5,23A5.5,5.5 0 0,0 18,17.5V6H16.5Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.5,6V17.5A4,4 0 0,1 12.5,21.5A4,4 0 0,1 8.5,17.5V5A2.5,2.5 0 0,1 11,2.5A2.5,2.5 0 0,1 13.5,5V15.5A1,1 0 0,1 12.5,16.5A1,1 0 0,1 11.5,15.5V6H10V15.5A2.5,2.5 0 0,0 12.5,18A2.5,2.5 0 0,0 15,15.5V5A4,4 0 0,0 11,1A4,4 0 0,0 7,5V17.5A5.5,5.5 0 0,0 12.5,23A5.5,5.5 0 0,0 18,17.5V6H16.5Z'/%3E%3C/svg%3E%0A");
@@ -202,6 +198,10 @@
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z'/%3E%3C/svg%3E%0A");
 }
+.svg-icon.svg-reset:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,5V1L7,6L12,11V7A6,6 0 0,1 18,13A6,6 0 0,1 12,19A6,6 0 0,1 6,13H4A8,8 0 0,0 12,21A8,8 0 0,0 20,13A8,8 0 0,0 12,5Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,5V1L7,6L12,11V7A6,6 0 0,1 18,13A6,6 0 0,1 12,19A6,6 0 0,1 6,13H4A8,8 0 0,0 12,21A8,8 0 0,0 20,13A8,8 0 0,0 12,5Z'/%3E%3C/svg%3E%0A");
+}
 .svg-icon.svg-restore:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3'/%3E%3C/svg%3E%0A");

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

@@ -0,0 +1,209 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { AxePuppeteer } from "@axe-core/puppeteer";
+describe("wm-navigator", () => {
+    let page, navigator, navigatorList, navigatorButton;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`
+    <html lang='en' mode='planning'>
+        <head>
+            <title>Page</title>
+        </head>
+        <body>
+            <main>
+                <h1>Title</h1>
+                <wm-navigator id="nav" base-logout-uri="https://www.dummy.wm/logout" user-name="Adrienne Johnson" email="ajohnson@watermarkinsights.wm" auth-type="2"></wm-navigator>
+                <script>window.onload = function getModules() {
+                  const navigator = document.getElementById("nav");
+                  const userModules = [{ "id": "aqua", "linkUrl": "https://www.dummy.wm/aqua", "samlLinkUrl": "https://www.dummy.wm/saml/aqua", "iconUrl": "/aqualogo.svg", "name": "Aqua" }, { "id": "dm", "linkUrl": "/dm", "samlLinkUrl": "/saml/dm", "iconUrl": "/dmlogo.svg", "name": "Digital Measures" }, { "id": "planning", "linkUrl": "/planning", "samlLinkUrl": "/saml/planning", "iconUrl": "/planlogo.svg", "name": "Planning & Self-Study" }];
+                  const stringifyModules = JSON.stringify(userModules);
+                  navigator.products = stringifyModules;
+                };</script>
+            </main>
+        </body>
+    </html>`);
+        navigator = await page.find("wm-navigator");
+        navigatorList = await page.find("wm-navigator >>> ul");
+        navigatorButton = await page.find("wm-navigator >>> priv-navigator-button");
+        const url = "https://dummy.wm";
+        Object.defineProperty(window, "location", {
+            value: {
+                href: url,
+            },
+            writable: true,
+        });
+    });
+    it("passes Axe checks", async () => {
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    // RENDER
+    it("renders", async () => {
+        expect(navigator).toHaveClass("hydrated");
+    });
+    // VIEW
+    it("opens the menu when clicked", async () => {
+        await navigatorButton.click();
+        await page.waitForChanges();
+        const wrapper = await page.find("wm-navigator >>> .wrapper");
+        expect(wrapper).not.toHaveClass("hide");
+    });
+    it("renders the products in the list if there is more than one, along with a logout option", async () => {
+        navigatorList = await page.find("wm-navigator >>> ul");
+        const listItems = await navigatorList.querySelectorAll("priv-navigator-item");
+        expect(listItems.length).toEqual(4);
+        expect(listItems[3].textContent).toEqual("Log Out");
+    });
+    it("renders just the logout option if there is one product in the list", async () => {
+        const newProducts = JSON.stringify([{ id: "planning", linkUrl: "", samlLinkUrl: "" }]);
+        navigator.setProperty("products", newProducts);
+        await page.waitForChanges();
+        const listItems = await page.findAll("wm-navigator >>> priv-navigator-item");
+        expect(listItems.length).toEqual(1);
+        expect(listItems[0].textContent).toEqual("Log Out");
+    });
+    it("sets the alt text on the button", async () => {
+        const label = await navigatorButton.shadowRoot.querySelector("button").getAttribute("aria-label");
+        const expectedText = "User information and product navigator";
+        expect(label).toEqual(expectedText);
+        const newProducts = JSON.stringify(["planning"]);
+        navigator.setProperty("products", newProducts);
+        await page.waitForChanges();
+        const newLabel = await navigatorButton.shadowRoot.querySelector("button").getAttribute("aria-label");
+        expect(newLabel).toEqual("User information");
+    });
+    //KEYBOARD NAVIGATION AND FOCUS
+    it("opens the menu when enter is pressed and closes it on escape", async () => {
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const wrapper = await page.find("wm-navigator >>> .wrapper");
+        expect(wrapper).not.toHaveClass("hide");
+        await page.keyboard.press("Escape"); // Previous btn
+        await page.waitForChanges();
+        expect(wrapper).toHaveClass("hide");
+        await page.keyboard.press("Space");
+        await page.waitForChanges();
+        expect(wrapper).not.toHaveClass("hide");
+    });
+    it("focuses the current product in use when the menu opens", async () => {
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const activeItem = await page.find("wm-navigator >>> priv-navigator-item#planning");
+        expect(activeItem.tabIndex).toEqual(0);
+        const activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toEqual("planning");
+    });
+    it("focuses the next product in the list when the down arrow is pressed", async () => {
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        let activeItem = await page.find("wm-navigator >>> priv-navigator-item#nav-logout");
+        expect(activeItem.tabIndex).toEqual(0);
+        let activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toEqual("nav-logout");
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        activeItem = await page.find("wm-navigator >>> priv-navigator-item#aqua");
+        expect(activeItem.tabIndex).toEqual(0);
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toEqual("aqua");
+    });
+    it("focuses the previous product in the list when the up arrow is pressed", async () => {
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        let activeItem = await page.find("wm-navigator >>> priv-navigator-item#dm");
+        expect(activeItem.tabIndex).toEqual(0);
+        let activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toEqual("dm");
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        activeItem = await page.find("wm-navigator >>> priv-navigator-item#nav-logout");
+        expect(activeItem.tabIndex).toEqual(0);
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toEqual("nav-logout");
+    });
+    //FUNCTIONALITY
+    // the next 3 tests are failing for unknown reasons (they used to pass)
+    // it("should change pages/products when a dropdown item is activated", async () => {
+    //   const browser = await puppeteer.launch();
+    //   const page = await browser.newPage();
+    //   await page.goto("http://localhost:3333/../src/components/wm-navigator/navigator.html", {
+    //     waitUntil: "networkidle2"
+    //   });
+    //   await page.evaluate(async () => {
+    //     const aquaNavItem = document!
+    //       .querySelector("#nav")!
+    //       .shadowRoot!.querySelector("priv-navigator-item");
+    //     aquaNavItem!.click();
+    //   });
+    //   await page.waitForNavigation();
+    //   await Promise.all([
+    //     expect(page.url()).toEqual(
+    //       "http://localhost:3333/aqua/?connection_name=test"
+    //     )
+    //   ]);
+    // });
+    // it("should redirect to a logout URL when the logout item is activated", async () => {
+    //   const browser = await puppeteer.launch();
+    //   const page = await browser.newPage();
+    //   await page.goto("http://localhost:3333/components/wm-navigator/navigator.html", {
+    //     waitUntil: "networkidle2"
+    //   });
+    //   await page.evaluate(async () => {
+    //     const logoutItem = document!
+    //       .querySelector("#nav")!
+    //       .shadowRoot!.querySelector("#nav-logout") as HTMLElement;
+    //     logoutItem!.click();
+    //   });
+    //   await page.waitForNavigation();
+    //   await Promise.all([
+    //     expect(page.url()).toEqual("http://localhost:3333/logout")
+    //   ]);
+    // });
+    // it("should redirect to a URL with a connection name when a dropdown item is activated and the user is a saml user", async () => {
+    //   const browser = await puppeteer.launch({
+    //     headless: true,
+    //     defaultViewport: {
+    //       width: 1100,
+    //       height: 1100
+    //     }
+    //   });
+    //   const page = await browser.newPage();
+    //   await page.goto("http://localhost:3333/devpages/navigator.html", {
+    //     waitUntil: "networkidle2"
+    //   });
+    //   // page.on("console", (msg: any) => console.log("PAGE LOG:", msg.text()));
+    //   await page.evaluate(async () => {
+    //     const aquaNavItem = document!
+    //       .querySelector("#nav-aqua")!
+    //       .shadowRoot!.querySelector("#ek") as HTMLElement;
+    //     aquaNavItem!.click();
+    //   });
+    //   await page.waitForNavigation();
+    //   await Promise.all([
+    //     expect(page.url()).toEqual(
+    //       "http://localhost:3333/saml/ek/?connection_name=something"
+    //     )
+    //   ]);
+    // });
+});
+// const page = await newSpecPage({
+//   html: `<wm-navigator id="nav" logout-uri="https://www.dummy.wm/logout" user-name="Adrienne Johnson" email="ajohnson@watermarkinsights.wm" auth-type="username_password_sso" products="[]"></wm-navigator>`,
+//   components: [Navigator]
+// });
+// const button = page.root!.querySelector("wm-navigator");
+// button!.click();
+// console.log("PAGE HREF", page.win.location.href);

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

@@ -0,0 +1,177 @@
+jest.mock("../../global/services/http-service");
+import { newSpecPage } from "@stencil/core/testing";
+//import { PrivNavigatorItem } from "./priv-navigator-item/priv-navigator-item";
+import { Navigator } from "./wm-navigator";
+describe("wm-navigator", () => {
+    it("builds (with props)", async () => {
+        const comp = await newSpecPage({
+            components: [Navigator],
+            html: `<wm-navigator
+      email="anna@user.com"
+      user-name="Anna User"
+      auth-type="3"
+      products='[{"samlLinkUrl":"https://aqua.taskstream.com/sso/samlLogin","linkUrl":"https://aqua.taskstream.com/sso/login","id":"aqua","iconUrl":"https://cdn.watermarkinsights.com/images/login/aqua.svg","name":"Aqua"},{"samlLinkUrl":"https://www.vialivetext.com/wm_sso/saml_login","linkUrl":"https://www.vialivetext.com/wm_sso/login","id":"via","iconUrl":"https://cdn.watermarkinsights.com/images/login/via.svg","name":"Via"},{"samlLinkUrl":"https://watermark.evaluationkit.com/Login/SAML","linkUrl":"https://watermark.evaluationkit.com/Login","id":"ek","iconUrl":"https://cdn.watermarkinsights.com/images/login/evaluationkit.svg","name":"Evaluation Kit"},{"samlLinkUrl":null,"linkUrl":"https://w.taskstream.com/WatermarkSSO/Authenticate/lat","id":"lat","iconUrl":"https://cdn.watermarkinsights.com/images/login/tslat.svg","name":"Taskstream LAT"},{"samlLinkUrl":null,"linkUrl":"https://w.taskstream.com/WatermarkSSO/Authenticate/ams","id":"ams","iconUrl":"https://cdn.watermarkinsights.com/images/login/tsams.svg","name":"Taskstream AMS"},{"samlLinkUrl":"https://www.digitalmeasures.com/login/sso/authenticate/saml","linkUrl":"https://www.digitalmeasures.com/login/sso/authenticate","id":"dm","iconUrl":"https://cdn.watermarkinsights.com/images/login/digitalmeasures.svg","name":"Digital Measures"},{"samlLinkUrl":"https://planning.watermarkinsights.com/login/sso/saml_login","linkUrl":"https://planning.watermarkinsights.com/login/sso","id":"planning","iconUrl":"https://cdn.watermarkinsights.com/images/login/planningselfstudy.svg","name":"Planning & Self-Study"}]'
+      ></wm-navigator>`,
+        });
+        expect(comp.root).toMatchSnapshot();
+    });
+    it("builds (endpoint)", async () => {
+        const comp = await newSpecPage({
+            components: [Navigator],
+            html: `<wm-navigator
+      user-name="Bettie User"
+      load-from-userinfo="true"
+      ></wm-navigator>`,
+        });
+        expect(comp.root).toMatchSnapshot();
+    });
+    it("returns the proper link", () => {
+        const nav = new Navigator();
+        nav.email = "a_user@company.com";
+        nav.userName = "Anna User";
+        nav.parsedProducts = [
+            {
+                name: "Aqua",
+                iconUrl: "aqua icon",
+                linkUrl: "aqua sso",
+                samlLinkUrl: "aqua saml",
+                id: "aqua",
+            },
+            {
+                name: "via",
+                iconUrl: "via icon",
+                linkUrl: "via sso",
+                samlLinkUrl: "via saml",
+                id: "via",
+            },
+            {
+                name: "ek",
+                iconUrl: "ek icon",
+                linkUrl: "ek sso",
+                samlLinkUrl: "ek saml",
+                id: "ek",
+            },
+            {
+                name: "lat",
+                iconUrl: "lat icon",
+                linkUrl: "lat sso",
+                samlLinkUrl: "lat saml",
+                id: "lat",
+            },
+            {
+                name: "ams",
+                iconUrl: "ams icon",
+                linkUrl: "ams sso",
+                samlLinkUrl: "ams saml",
+                id: "ams",
+            },
+            {
+                name: "dm",
+                iconUrl: "dm icon",
+                linkUrl: "dm sso",
+                samlLinkUrl: "dm saml",
+                id: "dm",
+            },
+            {
+                name: "planning",
+                iconUrl: "planning icon",
+                linkUrl: "planning sso",
+                samlLinkUrl: "planning saml",
+                id: "planning",
+            },
+        ];
+        nav.connectionName = "xoxo"; // connection name only appended for saml
+        nav.authType = 2; // = sso
+        // setProductOnClick returns the onClick function
+        // we invoke it to test the string
+        expect(nav.setProductOnClick("aqua")()).toBe("aqua sso");
+        expect(nav.setProductOnClick("via")()).toBe("via sso");
+        expect(nav.setProductOnClick("ek")()).toBe("ek sso");
+        expect(nav.setProductOnClick("lat")()).toBe("lat sso");
+        expect(nav.setProductOnClick("ams")()).toBe("ams sso");
+        expect(nav.setProductOnClick("dm")()).toBe("dm sso");
+        expect(nav.setProductOnClick("planning")()).toBe("planning sso");
+        nav.authType = 3; // = saml
+        expect(nav.setProductOnClick("aqua")()).toBe("aqua saml/?connection_name=xoxo");
+        // if connection_name is not set, nothing is appended
+        nav.connectionName = "";
+        expect(nav.setProductOnClick("aqua")()).toBe("aqua saml");
+    });
+    it("handles unknown products (props mode)", async () => {
+        // in props mode the component checks a hard-coded list of products
+        // if the product is not in the list, it ignores it altogether
+        // 2 exceptions: "c1" is converted to "livetext", and anything with the name "admin" (e.g. "system_admin_sit", "platform_admin") is converted to "platform_admin"
+        const comp = await newSpecPage({
+            components: [Navigator],
+            html: `<wm-navigator
+      email="anna@user.com"
+      user-name="Anna User"
+      auth-type="3"
+      products='[{"samlLinkUrl":"something_weird.fakeurl","linkUrl":"something_weird.fakeurl","id":"something_weird"},{"samlLinkUrl":"livetext.fakeurl","linkUrl":"livetext.fakeurl","id":"c1"},{"samlLinkUrl":"platform.fakeurl","linkUrl":"platform.fakeurl","id":"something_with_admin_in_it"}]'
+       ></wm-navigator>`,
+        });
+        expect(comp.root).toMatchSnapshot();
+    });
+    it("loads (userinfo mode)", async () => {
+        const page = await newSpecPage({
+            components: [Navigator],
+            html: `<wm-navigator user-name="User Name" load-from-userinfo="true"></wm-navigator>`,
+        });
+        expect(page.root).toMatchSnapshot();
+        const nav = page.body.querySelector("wm-navigator");
+        const items = nav.shadowRoot.querySelectorAll("priv-navigator-item");
+        expect(items.length).toBe(7);
+        items.forEach((i) => {
+            expect(i.id).not.toBeNull();
+            expect(i.onClick).not.toBeNull();
+        });
+    });
+    it("camel cases product keys", async () => {
+        const nav = new Navigator();
+        expect(nav.productKeysToCamelCase([
+            {
+                description: "desc1",
+                icon_url: "url1",
+                id: "id1",
+                link_url: "url1",
+                name: "name1",
+            },
+            {
+                description: "desc2",
+                icon_url: "url2",
+                id: "id2",
+                link_url: "url2",
+                name: "name2",
+            },
+            {
+                description: "desc3",
+                icon_url: "url3",
+                id: "id3",
+                link_url: "url3",
+                name: "name3",
+            },
+        ])).toStrictEqual([
+            {
+                description: "desc1",
+                iconUrl: "url1",
+                id: "id1",
+                linkUrl: "url1",
+                name: "name1",
+            },
+            {
+                description: "desc2",
+                iconUrl: "url2",
+                id: "id2",
+                linkUrl: "url2",
+                name: "name2",
+            },
+            {
+                description: "desc3",
+                iconUrl: "url3",
+                id: "id3",
+                linkUrl: "url3",
+                name: "name3",
+            },
+        ]);
+    });
+});