@watermarkinsights/ripple 0.0.0 → 0.1.0-alpha.0

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

@@ -1,468 +1,503 @@
-import { Component, Element, h, Host, Prop, State, Listen, Event, Watch, } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { getWmMode } from "../../global/interfaces";
-import { intl, snakeCaseToCamelCase, getNewIndexToFocus, } from "../../global/functions";
+import { intl, snakeCaseToCamelCase, getNewIndexToFocus } from "../../global/functions";
 import { getRequest } from "../../global/services/http-service";
 export class Navigator {
-  constructor() {
-    this.authType = 1; // 1: none or off, 2: username-password or username_password_sso, 3: saml or saml_sso
-    // The new way is to retrieve user info from an endpoint
-    // dev needs to opt-in by setting loadFromUserinfo to true
-    this.loadFromUserinfo = false;
-    // comp can check whether the info was successfully retrieved with:
-    this.retrievedInfo = !this.loadFromUserinfo; // when in endpoint mode, only render after get request completed
-    // used either way to store the products
-    this.parsedProducts = [];
+    constructor() {
+        // comp can check whether the info was successfully retrieved with:
+        this.retrievedInfo = !this.loadFromUserinfo; // when in endpoint mode, only render after get request completed
+        // used either way to store the products
+        this.parsedProducts = [];
+        this.openRight = false; // whether the menu should open on the right side
+        this.userName = undefined;
+        this.email = undefined;
+        this.authType = 1;
+        this.connectionName = undefined;
+        this.logoutUrl = undefined;
+        this.products = undefined;
+        this.loadFromUserinfo = false;
+        this.isOpen = false;
+        this.itemIndexToFocus = 0;
+    }
+    isSafeUrl(url) {
+        let isSafe = false;
+        const whitelist = [
+            "digitalmeasures\\.com",
+            "evalkit\\.info",
+            "evaluationkit\\.com",
+            "evaluationkit\\.info",
+            "lat_ams\\.com",
+            "livetext\\.com",
+            "smartcatalogiq\\.com",
+            "smartcatalogiq\\.net",
+            "smartcatalogiq\\.us",
+            "taskstream\\.com",
+            "vialivetext\\.com",
+            "watermarkinsights\\.com",
+        ];
+        whitelist.forEach((tld) => {
+            const knownTLD = `^https:\/\/(.*\.)?${tld}(\/.*)?$`;
+            if (!!url && url.match(knownTLD)) {
+                isSafe = true;
+            }
+        });
+        return isSafe;
+    }
+    async componentWillLoad() {
+        if (!this.userName) {
+            console.error("wm-navigator: user-name is a required property.");
+        }
+        await this.parseData();
+        this.setFocusIndex();
+    }
+    // async because we need the http request to complete before proceeding
+    async parseData() {
+        if (!!this.loadFromUserinfo) {
+            await getRequest("/platform/navigator/userinfo")
+                .then((response) => {
+                this.email = response.email;
+                this.currentProductId = response.current_product_id;
+                this.parsedProducts = this.productKeysToCamelCase(response.products);
+                this.logoutUrl = this.logoutUrl ? this.logoutUrl : response.logout_url;
+                this.connectionName = this.connectionName ? this.connectionName : response.connection_name;
+                if (!!this.email && !!this.currentProductId) {
+                    this.retrievedInfo = true;
+                }
+            })
+                .catch((errStatus) => {
+                console.error(errStatus);
+            });
+        }
+        else {
+            this.currentProductId = getWmMode(this.el);
+            if (!!this.products) {
+                if (typeof this.products === "string") {
+                    this.parsedProducts = JSON.parse(this.products);
+                }
+                else {
+                    this.parsedProducts = this.products;
+                }
+                this.parsedProducts = this.productKeysToCamelCase(this.parsedProducts);
+            }
+        }
+        // products is initialized as empty array in case nothing is passed
+        this.parsedProducts.sort((a, b) => (a.name < b.name ? -1 : 1));
+    }
+    productKeysToCamelCase(products) {
+        products = products.map((product) => {
+            const keys = Object.keys(product);
+            let newProduct = {};
+            keys.forEach((key) => {
+                newProduct[snakeCaseToCamelCase(key)] = product[key];
+            });
+            return newProduct;
+        });
+        return products;
+    }
     /**
-     * Event emitted from child wm-navigator-button updates the state, which is then passed down as a prop by wm-navigator.
+     * Sets index to focus on open to the selected product. This index resets it when the menu closes.
      */
-    this.isOpen = false;
-    this.openRight = false; // whether the menu should open on the right side
-    this.isTabbing = false;
+    setFocusIndex() {
+        if (this.parsedProducts.length > 1) {
+            const currentProduct = this.getProduct(this.currentProductId);
+            if (currentProduct) {
+                this.itemIndexToFocus = this.parsedProducts.indexOf(currentProduct);
+            }
+        }
+    }
+    handleKeys(ev) {
+        switch (ev.key) {
+            case "Escape":
+                ev.preventDefault();
+                this.closeMenu();
+                break;
+            case "ArrowDown":
+            case "ArrowUp":
+                ev.preventDefault();
+                if (!this.isOpen) {
+                    this.itemIndexToFocus = getNewIndexToFocus(this.itemIndexToFocus, ev.key, this.navigatorItems.length);
+                    this.openMenu();
+                }
+                break;
+        }
+    }
+    handleKeydown(ev) {
+        const key = ev.detail.key;
+        const item = ev.detail.navItem;
+        switch (key) {
+            case "Tab":
+                this.closeMenu(false);
+                break;
+            case "Enter":
+            case " ":
+                item.click();
+                break;
+            case "ArrowDown":
+            case "ArrowUp":
+                const oldIndex = this.itemIndexToFocus;
+                this.itemIndexToFocus = getNewIndexToFocus(this.itemIndexToFocus, key, this.navigatorItems.length);
+                this.focusItem();
+                this.unfocusItem(oldIndex);
+                break;
+        }
+    }
+    handleClick(ev) {
+        const isElOrChild = ev.target === this.el || this.el.contains(ev.target);
+        if (!isElOrChild && this.isOpen) {
+            this.closeMenu(false);
+        }
+    }
+    handleButtonClick() {
+        this.isOpen ? this.closeMenu() : this.openMenu();
+    }
+    openMenu() {
+        if (this.wrapperEl) {
+            const wrapperWidth = this.wrapperEl.clientWidth;
+            const spaceLeft = this.el.getBoundingClientRect().left;
+            const spaceRight = document.documentElement.clientWidth - this.el.getBoundingClientRect().right;
+            this.openRight = wrapperWidth > spaceLeft && spaceRight > spaceLeft;
+        }
+        this.isOpen = true;
+        // delay focus to allow 250ms animation to complete
+        this.focusItem(250);
+    }
+    closeMenu(returnFocus = true) {
+        this.isOpen = false;
+        window.requestAnimationFrame(() => {
+            this.unfocusItem(this.itemIndexToFocus);
+            this.setFocusIndex();
+            if (returnFocus) {
+                this.buttonFocusHandler();
+            }
+        });
+    }
+    focusItem(delayMs = 0) {
+        const newSelection = this.navigatorItems[this.itemIndexToFocus];
+        newSelection.tabIndex = 0;
+        newSelection.focused = true;
+        if (delayMs > 0) {
+            // wait for animation to complete before sending focus to option
+            setTimeout(() => newSelection.focus(), delayMs);
+        }
+        else {
+            // immediate focus for keyboard navigation
+            window.requestAnimationFrame(() => newSelection.focus());
+        }
+    }
+    unfocusItem(index) {
+        const oldSelection = this.navigatorItems[index];
+        oldSelection.tabIndex = -1;
+        oldSelection.focused = false;
+    }
+    buttonFocusHandler() {
+        const hostButton = this.el.shadowRoot.querySelector("priv-navigator-button");
+        const button = hostButton.shadowRoot.querySelector("button");
+        button.focus();
+    }
     /**
-     * Value is set to the index of the current product on load.
-     * Keyboard navigation updates the state to keep track of focus in the dropdown.
-     * State resets to the index of the current product when the dropdown closes.
+     * HELPERS FOR RENDER
      */
-    this.itemIndexToFocus = 0;
-  }
-  async componentWillLoad() {
-    if (!this.userName) {
-      console.error("wm-navigator: user-name is a required property.");
-    }
-    await this.parseData();
-    this.setFocusIndex();
-  }
-  // async because we need the http request to complete before proceeding
-  async parseData() {
-    if (!!this.loadFromUserinfo) {
-      await getRequest("/platform/navigator/userinfo")
-        .then((response) => {
-        this.email = response.email;
-        this.currentProductId = response.current_product_id;
-        this.parsedProducts = this.productKeysToCamelCase(response.products);
-        this.logoutUrl = this.logoutUrl ? this.logoutUrl : response.logout_url;
-        this.connectionName = this.connectionName ? this.connectionName : response.connection_name;
-        if (!!this.email && !!this.currentProductId) {
-          this.retrievedInfo = true;
-        }
-      })
-        .catch((errStatus) => {
-        console.error(errStatus);
-      });
-    }
-    else {
-      this.currentProductId = getWmMode(this.el);
-      if (!!this.products) {
-        if (typeof this.products === "string") {
-          this.parsedProducts = JSON.parse(this.products);
+    renderUserInfo() {
+        return (h("div", { class: "user", id: "wm-nav-user", "aria-label": intl.formatMessage({
+                id: "navigator.userinfoLabel",
+                defaultMessage: "for {name}, email {email}",
+            }, { name: this.userName, email: this.email }) }, h("p", null, this.userName), h("p", null, this.email)));
+    }
+    setAltText() {
+        if (this.parsedProducts.length > 1) {
+            return intl.formatMessage({
+                id: "navigator.userinfoAndProductNavigator",
+                defaultMessage: "User information and product navigator",
+            });
         }
         else {
-          this.parsedProducts = this.products;
+            return intl.formatMessage({
+                id: "navigator.userinfo",
+                defaultMessage: "User information",
+            });
+        }
+    }
+    renderHeading() {
+        return (h("h2", null, intl.formatMessage({
+            id: "navigator.watermarkApps",
+            defaultMessage: "Watermark Apps",
+            description: "Applications made by Watermark Insights",
+        })));
+    }
+    renderList() {
+        return (h("ul", { role: "listbox", "aria-label": `${intl.formatMessage({
+                id: "navigator.WatermarkAppNavigation",
+                defaultMessage: "Watermark App Navigation",
+                description: "list of applications by Watermark Insights",
+            })}`, "aria-describedby": "wm-nav-user" }, this.parsedProducts.length > 1 && this.renderProductOptions(), this.renderLogoutOption()));
+    }
+    renderProductOptions() {
+        return this.parsedProducts.map((product) => {
+            let name, icon, isSelected, clickRedirect;
+            name = product.name;
+            icon = product.iconUrl;
+            clickRedirect = this.setProductOnClick(product.id);
+            if (!!name && !!icon) {
+                isSelected = this.currentProductId === product.id;
+                return (h("priv-navigator-item", { selected: isSelected, id: product.id, onClick: () => {
+                        isSelected ? this.closeMenu() : clickRedirect();
+                    }, role: "option", "aria-label": name, "aria-selected": isSelected ? "true" : "false" }, h("img", { src: icon, alt: name })));
+            }
+        });
+    }
+    setProductOnClick(productId) {
+        const product = this.getProduct(productId);
+        if (this.currentProductId === productId) {
+            return () => { };
         }
-        this.parsedProducts = this.productKeysToCamelCase(this.parsedProducts);
-      }
-    }
-    // products is initialized as empty array in case nothing is passed
-    this.parsedProducts.sort((a, b) => (a.name < b.name ? -1 : 1));
-  }
-  productKeysToCamelCase(products) {
-    products = products.map((product) => {
-      const keys = Object.keys(product);
-      let newProduct = {};
-      keys.forEach((key) => {
-        newProduct[snakeCaseToCamelCase(key)] = product[key];
-      });
-      return newProduct;
-    });
-    return products;
-  }
-  /**
-   * Sets index to focus on open to the selected product. This index resets it when the menu closes.
-   */
-  setFocusIndex() {
-    if (this.parsedProducts.length > 1) {
-      const currentProduct = this.getProduct(this.currentProductId);
-      if (currentProduct) {
-        this.itemIndexToFocus = this.parsedProducts.indexOf(currentProduct);
-      }
-    }
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  handleKeys(ev) {
-    switch (ev.key) {
-      case "Escape":
-        ev.preventDefault();
-        this.closeMenu();
-        break;
-      case "ArrowDown":
-      case "ArrowUp":
-        ev.preventDefault();
-        if (!this.isOpen) {
-          this.itemIndexToFocus = getNewIndexToFocus(this.itemIndexToFocus, ev.key, this.navigatorItems.length);
-          this.openMenu();
+        else if (product) {
+            if (!!this.loadFromUserinfo || this.authType === 2) {
+                const url = product.linkUrl;
+                if (this.isSafeUrl(url)) {
+                    return () => (window.location.href = url);
+                }
+                else {
+                    console.error(`"${url}" is not a safe url`);
+                    return;
+                }
+            }
+            else if (this.authType === 3) {
+                // products passed as prop, saml
+                const connName = this.connectionName ? `/?connection_name=${this.connectionName}` : "";
+                const url = product.samlLinkUrl;
+                if (this.isSafeUrl(url)) {
+                    return () => (window.location.href = url + connName);
+                }
+                else {
+                    console.error(`"${url}" is not a safe url`);
+                    return;
+                }
+            }
         }
-        break;
-    }
-  }
-  handleKeydown(ev) {
-    const key = ev.detail.key;
-    const item = ev.detail.navItem;
-    switch (key) {
-      case "Tab":
-        this.closeMenu();
-        break;
-      case "Enter":
-      case " ":
-        item.click();
-        break;
-      case "ArrowDown":
-      case "ArrowUp":
-        const oldIndex = this.itemIndexToFocus;
-        this.itemIndexToFocus = getNewIndexToFocus(this.itemIndexToFocus, key, this.navigatorItems.length);
-        this.focusItem();
-        this.unfocusItem(oldIndex);
-        break;
-    }
-  }
-  handleClick(ev) {
-    const isElOrChild = ev.target === this.el || this.el.contains(ev.target);
-    if (!isElOrChild && this.isOpen) {
-      this.closeMenu();
-    }
-  }
-  handleButtonClick() {
-    this.isOpen ? this.closeMenu() : this.openMenu();
-  }
-  openMenu() {
-    if (this.wrapperEl) {
-      const wrapperWidth = this.wrapperEl.clientWidth;
-      const spaceLeft = this.el.getBoundingClientRect().left;
-      const spaceRight = document.documentElement.clientWidth - this.el.getBoundingClientRect().right;
-      this.openRight = wrapperWidth > spaceLeft && spaceRight > spaceLeft;
-    }
-    this.isOpen = true;
-    this.focusItem();
-  }
-  closeMenu() {
-    this.isOpen = false;
-    this.buttonFocusHandler();
-    this.unfocusItem(this.itemIndexToFocus);
-    this.setFocusIndex();
-  }
-  focusItem() {
-    const newSelection = this.navigatorItems[this.itemIndexToFocus];
-    newSelection.tabIndex = 0;
-    newSelection.focused = true;
-    window.requestAnimationFrame(() => newSelection.focus());
-  }
-  unfocusItem(index) {
-    const oldSelection = this.navigatorItems[index];
-    oldSelection.tabIndex = -1;
-    oldSelection.focused = false;
-  }
-  buttonFocusHandler() {
-    const hostButton = this.el.shadowRoot.querySelector("priv-navigator-button");
-    const button = hostButton.shadowRoot.querySelector("button");
-    window.requestAnimationFrame(() => button.focus());
-  }
-  /**
-   * HELPERS FOR RENDER
-   */
-  renderUserInfo() {
-    return (h("div", { class: "user", id: "wm-nav-user", "aria-label": intl.formatMessage({
-        id: "navigator.userinfoLabel",
-        defaultMessage: "for {name}, email {email}",
-      }, { name: this.userName, email: this.email }) },
-      h("p", null, this.userName),
-      h("p", null, this.email)));
-  }
-  setAltText() {
-    if (this.parsedProducts.length > 1) {
-      return intl.formatMessage({
-        id: "navigator.userinfoAndProductNavigator",
-        defaultMessage: "User information and product navigator",
-      });
-    }
-    else {
-      return intl.formatMessage({
-        id: "navigator.userinfo",
-        defaultMessage: "User information",
-      });
-    }
-  }
-  renderHeading() {
-    return (h("h2", null, intl.formatMessage({
-      id: "navigator.watermarkApps",
-      defaultMessage: "Watermark Apps",
-      description: "Applications made by Watermark Insights",
-    })));
-  }
-  renderList() {
-    return (h("ul", { role: "listbox", "aria-label": `${intl.formatMessage({
-        id: "navigator.WatermarkAppNavigation",
-        defaultMessage: "Watermark App Navigation",
-        description: "list of applications by Watermark Insights",
-      })}`, "aria-describedby": "wm-nav-user" },
-      this.parsedProducts.length > 1 && this.renderProductOptions(),
-      this.renderLogoutOption()));
-  }
-  renderProductOptions() {
-    return this.parsedProducts.map((product) => {
-      let name, icon, isSelected, clickRedirect;
-      name = product.name;
-      icon = product.iconUrl;
-      clickRedirect = this.setProductOnClick(product.id);
-      if (!!name && !!icon) {
-        isSelected = this.currentProductId === product.id;
-        return (h("priv-navigator-item", { selected: isSelected, id: product.id, onClick: clickRedirect, role: "option", "aria-label": name },
-          h("img", { src: icon, alt: name })));
-      }
-    });
-  }
-  setProductOnClick(productId) {
-    const product = this.getProduct(productId);
-    if (this.currentProductId === productId) {
-      return () => { };
-    }
-    else if (product) {
-      if (!!this.loadFromUserinfo || this.authType === 2) {
-        return () => (window.location.href = product.linkUrl);
-      }
-      else if (this.authType === 3) {
-        // products passed as prop, saml
-        const connName = this.connectionName ? `/?connection_name=${this.connectionName}` : "";
-        return () => (window.location.href = product.samlLinkUrl + connName);
-      }
-    }
-  }
-  renderLogoutOption() {
-    return (h("priv-navigator-item", { class: "logout", selected: !(this.parsedProducts.length > 1), id: "nav-logout", onClick: this.setLogoutOnclick(), role: "option" },
-      h("span", { class: "logout" }, intl.formatMessage({
-        id: "navigator.logout",
-        defaultMessage: "Log Out",
-      }))));
-  }
-  setLogoutOnclick() {
-    // The logout item will always emit a custom event on click so that the dev can run any business logic specific to the app on logout (e.g., clearing local storage).
-    // It will only redirect if the dev has set the logoutUrl. If some sort of custom redirect is needed, the logoutUrl should not be set.
-    return () => {
-      this.wmNavigatorLogout.emit();
-      if (this.logoutUrl) {
-        window.location.href = this.logoutUrl;
-      }
-    };
-  }
-  get navigatorItems() {
-    return Array.from(this.el.shadowRoot.querySelectorAll("priv-navigator-item"));
-  }
-  getProduct(id) {
-    return this.parsedProducts.find((product) => product.id === id);
-  }
-  render() {
-    return this.retrievedInfo ? (h(Host, { class: this.isTabbing ? "user-is-tabbing" : "" },
-      h("priv-navigator-button", { expanded: this.isOpen, altText: this.setAltText(), isTabbing: this.isTabbing }),
-      h("div", { class: `wrapper ${this.isOpen ? "" : "hide"} ${this.openRight ? "right" : ""}`, ref: (el) => (this.wrapperEl = el) },
-        this.renderUserInfo(),
-        this.parsedProducts.length > 1 && this.renderHeading(),
-        this.renderList()))) : ("");
-  }
-  static get is() { return "wm-navigator"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["wm-navigator.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["wm-navigator.css"]
-  }; }
-  static get properties() { return {
-    "userName": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "user-name",
-      "reflect": false
-    },
-    "email": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "email",
-      "reflect": false
-    },
-    "authType": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "auth-type",
-      "reflect": false,
-      "defaultValue": "1"
-    },
-    "connectionName": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "connection-name",
-      "reflect": false
-    },
-    "logoutUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "logout-url",
-      "reflect": false
-    },
-    "products": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | []",
-        "resolved": "[] | string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "products",
-      "reflect": false
-    },
-    "loadFromUserinfo": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "load-from-userinfo",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "isOpen": {},
-    "isTabbing": {},
-    "itemIndexToFocus": {}
-  }; }
-  static get events() { return [{
-      "method": "wmNavigatorLogout",
-      "name": "wmNavigatorLogout",
-      "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": "products",
-      "methodName": "parseData"
-    }]; }
-  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": "handleKeys",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "keydownOnNavItem",
-      "method": "handleKeydown",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "click",
-      "method": "handleClick",
-      "target": "document",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "buttonActivated",
-      "method": "handleButtonClick",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+    }
+    renderLogoutOption() {
+        return (h("priv-navigator-item", { class: "logout", selected: !(this.parsedProducts.length > 1), id: "nav-logout", onClick: this.setLogoutOnclick(), role: "option", "aria-selected": "false" }, h("span", { class: "logout" }, intl.formatMessage({
+            id: "navigator.logout",
+            defaultMessage: "Log Out",
+        }))));
+    }
+    setLogoutOnclick() {
+        // The logout item will always emit a custom event on click so that the dev can run any business logic specific to the app on logout (e.g., clearing local storage).
+        // It will only redirect if the dev has set the logoutUrl. If some sort of custom redirect is needed, the logoutUrl should not be set.
+        return () => {
+            this.wmNavigatorLogout.emit();
+            const url = this.logoutUrl;
+            if (this.isSafeUrl(url)) {
+                window.location.href = url;
+            }
+            else {
+                console.error(`"${url}" is not a safe url`);
+            }
+        };
+    }
+    get navigatorItems() {
+        return Array.from(this.el.shadowRoot.querySelectorAll("priv-navigator-item"));
+    }
+    getProduct(id) {
+        return this.parsedProducts.find((product) => product.id === id);
+    }
+    render() {
+        return this.retrievedInfo ? (h(Host, null, h("priv-navigator-button", { expanded: this.isOpen, altText: this.setAltText() }), h("div", { class: `wrapper ${this.isOpen ? "" : "hide"} ${this.openRight ? "right" : ""}`, ref: (el) => (this.wrapperEl = el) }, this.renderUserInfo(), this.parsedProducts.length > 1 && this.renderHeading(), this.renderList()))) : ("");
+    }
+    static get is() { return "wm-navigator"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-navigator.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-navigator.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "userName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "user-name",
+                "reflect": false
+            },
+            "email": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "email",
+                "reflect": false
+            },
+            "authType": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "auth-type",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "connectionName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "connection-name",
+                "reflect": false
+            },
+            "logoutUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "logout-url",
+                "reflect": false
+            },
+            "products": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | []",
+                    "resolved": "[] | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "products",
+                "reflect": false
+            },
+            "loadFromUserinfo": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "load-from-userinfo",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "itemIndexToFocus": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmNavigatorLogout",
+                "name": "wmNavigatorLogout",
+                "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": "products",
+                "methodName": "parseData"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeys",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydownOnNavItem",
+                "method": "handleKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "buttonActivated",
+                "method": "handleButtonClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }