@watermarkinsights/ripple 3.25.0-2 → 3.25.0

package/dist/esm/wm-navigator.entry.js

@@ -1,271 +1,271 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-84a6ae22.js';
-import { a as getWmMode } from './interfaces-2b97fab2.js';
-import { k as snakeCaseToCamelCase, l as getNewIndexToFocus, i as intl } from './functions-bb1309d0.js';
-import { g as getRequest } from './http-service-3dc3b3e7.js';
+import { a as getWmMode } from './interfaces-61c6305b.js';
+import { k as snakeCaseToCamelCase, l as getNewIndexToFocus, i as intl } from './functions-dc9964aa.js';
+import { g as getRequest } from './http-service-5d037e16.js';
 
 const wmNavigatorCss = ":host,wm-navigator{min-width:0;position:relative;display:inline-block}:host .wrapper,wm-navigator .wrapper{overflow:auto;font-size:1.125rem;min-width:13.125rem;width:auto;max-height:80vh;text-align:left;position:absolute;z-index:50;top:100%;right:20px;left:auto;background:#fff;letter-spacing:normal;-webkit-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;-webkit-transition:-webkit-transform 0.25s ease;transition:-webkit-transform 0.25s ease;transition:transform 0.25s ease;transition:transform 0.25s ease, -webkit-transform 0.25s ease;-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}:host .wrapper .user,wm-navigator .wrapper .user{background:#f4f4f4;padding:0.625rem 1.25rem;font-size:0.875rem}:host .wrapper .user p,wm-navigator .wrapper .user p{margin:0}:host .wrapper .user p:first-child,wm-navigator .wrapper .user p:first-child{font-weight:700;text-transform:capitalize}:host .wrapper h2,wm-navigator .wrapper h2{background:#2e1b46;color:#fff;font-weight:700;margin:0;padding:0.625rem 1.25rem;font-size:0.875rem}:host .wrapper [role=listbox],wm-navigator .wrapper [role=listbox]{list-style:none;margin:0;padding-left:0}:host .wrapper.hide,wm-navigator .wrapper.hide{-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0)}:host .wrapper.right,wm-navigator .wrapper.right{right:auto;left:20px}:host img,wm-navigator img{-webkit-transform:scale(0.8);transform:scale(0.8);-webkit-transform-origin:left center;transform-origin:left center;display:block}:host .logout,wm-navigator .logout{text-align:center;text-transform:capitalize}priv-navigator-item:focus{outline:none}";
 
-const Navigator = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.wmNavigatorLogout = createEvent(this, "wmNavigatorLogout", 7);
-    // 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.isTabbing = false;
-    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);
-        }
-        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;
-  }
-  /**
-   * 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();
-        }
-        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 delegatesFocus() { return true; }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "products": ["parseData"]
-  }; }
-};
+const Navigator = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wmNavigatorLogout = createEvent(this, "wmNavigatorLogout", 7);
+    // 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.isTabbing = false;
+    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);
+        }
+        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;
+  }
+  /**
+   * 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();
+        }
+        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 delegatesFocus() { return true; }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "products": ["parseData"]
+  }; }
+};
 Navigator.style = wmNavigatorCss;
 
 export { Navigator as wm_navigator };

package/dist/esm/wm-navigator.entry.js.map

@@ -1 +1 @@
-{"file":"wm-navigator.entry.js","mappings":";;;;;AAAA,MAAM,cAAc,GAAG,49DAA49D;;MCUt+D,SAAS;;;;;IAgBZ,kBAAa,GAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC;;IAGxD,mBAAc,GAAmB,EAAE,CAAC;IAM5B,cAAS,GAAY,KAAK,CAAC;;;oBAlBR,CAAC;;;;4BAOQ,KAAK;kBAUd,KAAK;qBAGF,KAAK;4BAOC,CAAC;;EAMrC,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,OAAO,CAAC,KAAK,CAAC,iDAAiD,CAAC,CAAC;KAClE;IAED,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;IACvB,IAAI,CAAC,aAAa,EAAE,CAAC;GACtB;;EAID,MAAM,SAAS;IACb,IAAI,CAAC,CAAC,IAAI,CAAC,gBAAgB,EAAE;MAC3B,MAAM,UAAU,CAAC,8BAA8B,CAAC;SAC7C,IAAI,CAAC,CAAC,QAA0B;QAC/B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC;QAC5B,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC,kBAAkB,CAAC;QACpD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,sBAAsB,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACrE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,UAAU,CAAC;QACvE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC,eAAe,CAAC;QAC3F,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,IAAI,CAAC,gBAAgB,EAAE;UAC3C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;SAC3B;OACF,CAAC;SACD,KAAK,CAAC,CAAC,SAAS;QACf,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;OAC1B,CAAC,CAAC;KACN;SAAM;MACL,IAAI,CAAC,gBAAgB,GAAG,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;MAC3C,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE;QACnB,IAAI,OAAO,IAAI,CAAC,QAAQ,KAAK,QAAQ,EAAE;UACrC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACjD;aAAM;UACL,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,QAAQ,CAAC;SACrC;QACD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;OACxE;KACF;;IAED,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;GAChE;EAED,sBAAsB,CAAC,QAAkB;IACvC,QAAQ,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAY;MACnC,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;MAClC,IAAI,UAAU,GAA8B,EAAE,CAAC;MAC/C,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG;QACf,UAAU,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC;OACtD,CAAC,CAAC;MACH,OAAO,UAAU,CAAC;KACnB,CAAC,CAAC;IACH,OAAO,QAAqB,CAAC;GAC9B;;;;EAKD,aAAa;IACX,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE;MAClC,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;MAE9D,IAAI,cAAc,EAAE;QAClB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;OACrE;KACF;GACF;EAGD,eAAe;IACb,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;GACvB;EAGD,gBAAgB;IACd,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;GACxB;EAGD,UAAU,CAAC,EAAiB;IAC1B,QAAQ,EAAE,CAAC,GAAG;MACZ,KAAK,QAAQ;QACX,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,MAAM;MACR,KAAK,WAAW,CAAC;MACjB,KAAK,SAAS;QACZ,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;UAChB,IAAI,CAAC,gBAAgB,GAAG,kBAAkB,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAE,CAAC,GAAG,EAAE,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;UACtG,IAAI,CAAC,QAAQ,EAAE,CAAC;SACjB;QACD,MAAM;KACT;GACF;EAGD,aAAa,CAAC,EAAe;IAC3B,MAAM,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;IAC1B,MAAM,IAAI,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC;IAC/B,QAAQ,GAAG;MACT,KAAK,KAAK;QACR,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,MAAM;MACR,KAAK,OAAO,CAAC;MACb,KAAK,GAAG;QACN,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,MAAM;MACR,KAAK,WAAW,CAAC;MACjB,KAAK,SAAS;QACZ,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC;QACvC,IAAI,CAAC,gBAAgB,GAAG,kBAAkB,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,EAAE,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;QACnG,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAC3B,MAAM;KACT;GACF;EAGD,WAAW,CAAC,EAAc;IACxB,MAAM,WAAW,GAAG,EAAE,CAAC,MAAM,KAAK,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAc,CAAC,CAAC;IAEjF,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,MAAM,EAAE;MAC/B,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;GACF;EAGD,iBAAiB;IACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;GAClD;EAED,QAAQ;IACN,IAAI,IAAI,CAAC,SAAS,EAAE;MAClB,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC;MAChD,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,qBAAqB,EAAE,CAAC,IAAI,CAAC;MACvD,MAAM,UAAU,GAAG,QAAQ,CAAC,eAAe,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;MAChG,IAAI,CAAC,SAAS,GAAG,YAAY,GAAG,SAAS,IAAI,UAAU,GAAG,SAAS,CAAC;KACrE;IACD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACnB,IAAI,CAAC,SAAS,EAAE,CAAC;GAClB;EAED,SAAS;IACP,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACpB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACxC,IAAI,CAAC,aAAa,EAAE,CAAC;GACtB;EAED,SAAS;IACP,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAChE,YAAY,CAAC,QAAQ,GAAG,CAAC,CAAC;IAC1B,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;IAC5B,MAAM,CAAC,qBAAqB,CAAC,MAAM,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC;GAC1D;EAED,WAAW,CAAC,KAAa;IACvB,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAChD,YAAY,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;IAC3B,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC;GAC9B;EAED,kBAAkB;IAChB,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IAC7E,MAAM,MAAM,GAAG,UAAU,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC7D,MAAM,CAAC,qBAAqB,CAAC,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;GACpD;;;;EAKD,cAAc;IACZ,QACE,WACE,KAAK,EAAC,MAAM,EACZ,EAAE,EAAC,aAAa,gBACJ,IAAI,CAAC,aAAa,CAC5B;QACE,EAAE,EAAE,yBAAyB;QAC7B,cAAc,EAAE,2BAA2B;OAC5C,EACD,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAC3C,IAED,aAAI,IAAI,CAAC,QAAQ,CAAK,EACtB,aAAI,IAAI,CAAC,KAAK,CAAK,CACf,EACN;GACH;EAED,UAAU;IACR,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE;MAClC,OAAO,IAAI,CAAC,aAAa,CAAC;QACxB,EAAE,EAAE,uCAAuC;QAC3C,cAAc,EAAE,wCAAwC;OACzD,CAAC,CAAC;KACJ;SAAM;MACL,OAAO,IAAI,CAAC,aAAa,CAAC;QACxB,EAAE,EAAE,oBAAoB;QACxB,cAAc,EAAE,kBAAkB;OACnC,CAAC,CAAC;KACJ;GACF;EAED,aAAa;IACX,QACE,cACG,IAAI,CAAC,aAAa,CAAC;MAClB,EAAE,EAAE,yBAAyB;MAC7B,cAAc,EAAE,gBAAgB;MAChC,WAAW,EAAE,yCAAyC;KACvD,CAAC,CACC,EACL;GACH;EAED,UAAU;IACR,QACE,UACE,IAAI,EAAC,SAAS,gBACF,GAAG,IAAI,CAAC,aAAa,CAAC;QAChC,EAAE,EAAE,kCAAkC;QACtC,cAAc,EAAE,0BAA0B;QAC1C,WAAW,EAAE,4CAA4C;OAC1D,CAAC,EAAE,sBACa,aAAa,IAE7B,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,oBAAoB,EAAE,EAC7D,IAAI,CAAC,kBAAkB,EAAE,CACvB,EACL;GACH;EAED,oBAAoB;IAClB,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,OAAgB;MAC9C,IAAI,IAAwB,EAAE,IAAwB,EAAE,UAAmB,EAAE,aAAkB,CAAC;MAEhG,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;MACpB,IAAI,GAAI,OAAmB,CAAC,OAAO,CAAC;MAEpC,aAAa,GAAG,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;MAEnD,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,EAAE;QACpB,UAAU,GAAG,IAAI,CAAC,gBAAgB,KAAK,OAAO,CAAC,EAAE,CAAC;QAElD,QACE,2BACE,QAAQ,EAAE,UAAU,EACpB,EAAE,EAAE,OAAO,CAAC,EAAE,EACd,OAAO,EAAE,aAAa,EACtB,IAAI,EAAC,QAAQ,gBACD,IAAI,IAEhB,WAAK,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,GAAI,CACT,EACtB;OACH;KACF,CAAC,CAAC;GACJ;EAED,iBAAiB,CAAC,SAAiB;IACjC,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;IAE3C,IAAI,IAAI,CAAC,gBAAgB,KAAK,SAAS,EAAE;MACvC,OAAO,SAAQ,CAAC;KACjB;SAAM,IAAI,OAAO,EAAE;MAClB,IAAI,CAAC,CAAC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,QAAQ,KAAK,CAAC,EAAE;QAClD,OAAO,OAAO,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAI,OAAmB,CAAC,OAAO,CAAC,CAAC;OACpE;WAAM,IAAI,IAAI,CAAC,QAAQ,KAAK,CAAC,EAAE;;QAE9B,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,GAAG,qBAAqB,IAAI,CAAC,cAAc,EAAE,GAAG,EAAE,CAAC;QACvF,OAAO,OAAO,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAI,OAAmB,CAAC,WAAW,GAAG,QAAQ,CAAC,CAAC;OACnF;KACF;GACF;EAED,kBAAkB;IAChB,QACE,2BACE,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAE,EAAE,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,EAC3C,EAAE,EAAC,YAAY,EACf,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,EAChC,IAAI,EAAC,QAAQ,IAEb,YAAM,KAAK,EAAC,QAAQ,IACjB,IAAI,CAAC,aAAa,CAAC;MAClB,EAAE,EAAE,kBAAkB;MACtB,cAAc,EAAE,SAAS;KAC1B,CAAC,CACG,CACa,EACtB;GACH;EAED,gBAAgB;;;IAGd,OAAO;MACL,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;MAC9B,IAAI,IAAI,CAAC,SAAS,EAAE;QAClB,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC;OACvC;KACF,CAAC;GACH;EAED,IAAY,cAAc;IACxB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC,CAAC;GAC/E;EAEO,UAAU,CAAC,EAAU;IAC3B,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;GACjE;EAED,MAAM;IACJ,OAAO,IAAI,CAAC,aAAa,IACvB,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,iBAAiB,GAAG,EAAE,IAClD,6BAAuB,QAAQ,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,GAAI,EACvG,WACE,KAAK,EAAE,WAAW,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,MAAM,IAAI,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,EAAE,EAAE,EAC9E,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAoB,CAAC,IAEnD,IAAI,CAAC,cAAc,EAAE,EACrB,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE,EACtD,IAAI,CAAC,UAAU,EAAE,CACd,CACD,KAEP,EAAE,CACH,CAAC;GACH;;;;;;;;;;;","names":[],"sources":["./src/components/wm-navigator/wm-navigator.scss?tag=wm-navigator&encapsulation=shadow","./src/components/wm-navigator/wm-navigator.tsx"],"sourcesContent":[":host,\r\nwm-navigator {\r\n  min-width: 0;\r\n  position: relative;\r\n  display: inline-block;\r\n\r\n  .wrapper {\r\n    overflow: auto;\r\n    font-size: rem-calc(18);\r\n    min-width: rem-calc(210);\r\n    width: auto;\r\n    max-height: 80vh;\r\n    text-align: left;\r\n    position: absolute;\r\n    z-index: 50;\r\n    top: 100%;\r\n    right: 20px;\r\n    left: auto;\r\n    background: #fff;\r\n    letter-spacing: normal;\r\n    @include box-shadow(0 4px 15px 0 rgba(0, 0, 0, 0.2));\r\n    @include transition(transform 0.25s ease);\r\n    @include transformOrigin(center top);\r\n    @include scale($xVal: 1, $yVal: 1);\r\n\r\n    .user {\r\n      background: $background;\r\n      padding: rem-calc(10 20);\r\n      font-size: rem-calc(14);\r\n\r\n      p {\r\n        margin: 0;\r\n      }\r\n      p:first-child {\r\n        font-weight: 700;\r\n        text-transform: capitalize;\r\n      }\r\n    }\r\n\r\n    h2 {\r\n      background: #2e1b46;\r\n      color: #fff;\r\n      font-weight: 700;\r\n      margin: 0;\r\n      padding: rem-calc(10 20);\r\n      font-size: rem-calc(14);\r\n    }\r\n\r\n    [role=\"listbox\"] {\r\n      list-style: none;\r\n      margin: 0;\r\n      padding-left: 0;\r\n    }\r\n\r\n    &.hide {\r\n      @include scale($xVal: 1, $yVal: 0);\r\n    }\r\n\r\n    &.right {\r\n      right: auto;\r\n      left: 20px;\r\n    }\r\n  }\r\n\r\n  img {\r\n    transform: scale(0.8);\r\n    transform-origin: left center;\r\n    display: block;\r\n  }\r\n\r\n  .logout {\r\n    text-align: center;\r\n    text-transform: capitalize;\r\n  }\r\n}\r\n\r\npriv-navigator-item:focus {\r\n  outline: none;\r\n}\r\n","import { Component, Element, h, Host, Prop, State, Listen, EventEmitter, Event, Watch } from \"@stencil/core\";\r\nimport { getWmMode, Product, NavigatorPayload } from \"../../global/interfaces\";\r\nimport { intl, snakeCaseToCamelCase, getNewIndexToFocus } from \"../../global/functions\";\r\nimport { getRequest } from \"../../global/services/http-service\";\r\n\r\n@Component({\r\n  tag: \"wm-navigator\",\r\n  styleUrl: \"wm-navigator.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class Navigator {\r\n  @Element() el!: any;\r\n  private wrapperEl?: HTMLDivElement;\r\n\r\n  // Component can receive user info and products as props (this is how it worked before)\r\n  @Prop() userName?: string;\r\n  @Prop() email?: string;\r\n  @Prop() authType: number = 1; // 1: none or off, 2: username-password or username_password_sso, 3: saml or saml_sso\r\n  @Prop() connectionName?: string;\r\n  @Prop() logoutUrl?: string;\r\n  @Prop() products?: string | []; // products as JSON string, parsed on load\r\n\r\n  // The new way is to retrieve user info from an endpoint\r\n  // dev needs to opt-in by setting loadFromUserinfo to true\r\n  @Prop() loadFromUserinfo: boolean = false;\r\n  // comp can check whether the info was successfully retrieved with:\r\n  private retrievedInfo: boolean = !this.loadFromUserinfo; // when in endpoint mode, only render after get request completed\r\n\r\n  // used either way to store the products\r\n  parsedProducts: Array<Product> = [];\r\n\r\n  /**\r\n   * Event emitted from child wm-navigator-button updates the state, which is then passed down as a prop by wm-navigator.\r\n   */\r\n  @State() isOpen: boolean = false;\r\n  private openRight: boolean = false; // whether the menu should open on the right side\r\n\r\n  @State() isTabbing: boolean = false;\r\n\r\n  /**\r\n   * Value is set to the index of the current product on load.\r\n   * Keyboard navigation updates the state to keep track of focus in the dropdown.\r\n   * State resets to the index of the current product when the dropdown closes.\r\n   */\r\n  @State() itemIndexToFocus: number = 0;\r\n\r\n  @Event() wmNavigatorLogout!: EventEmitter;\r\n\r\n  private currentProductId!: string;\r\n\r\n  async componentWillLoad() {\r\n    if (!this.userName) {\r\n      console.error(\"wm-navigator: user-name is a required property.\");\r\n    }\r\n\r\n    await this.parseData();\r\n    this.setFocusIndex();\r\n  }\r\n\r\n  // async because we need the http request to complete before proceeding\r\n  @Watch(\"products\")\r\n  async parseData() {\r\n    if (!!this.loadFromUserinfo) {\r\n      await getRequest(\"/platform/navigator/userinfo\")\r\n        .then((response: NavigatorPayload) => {\r\n          this.email = response.email;\r\n          this.currentProductId = response.current_product_id;\r\n          this.parsedProducts = this.productKeysToCamelCase(response.products);\r\n          this.logoutUrl = this.logoutUrl ? this.logoutUrl : response.logout_url;\r\n          this.connectionName = this.connectionName ? this.connectionName : response.connection_name;\r\n          if (!!this.email && !!this.currentProductId) {\r\n            this.retrievedInfo = true;\r\n          }\r\n        })\r\n        .catch((errStatus) => {\r\n          console.error(errStatus);\r\n        });\r\n    } else {\r\n      this.currentProductId = getWmMode(this.el);\r\n      if (!!this.products) {\r\n        if (typeof this.products === \"string\") {\r\n          this.parsedProducts = JSON.parse(this.products);\r\n        } else {\r\n          this.parsedProducts = this.products;\r\n        }\r\n        this.parsedProducts = this.productKeysToCamelCase(this.parsedProducts);\r\n      }\r\n    }\r\n    // products is initialized as empty array in case nothing is passed\r\n    this.parsedProducts.sort((a, b) => (a.name < b.name ? -1 : 1));\r\n  }\r\n\r\n  productKeysToCamelCase(products: object[]): Product[] {\r\n    products = products.map((product: any) => {\r\n      const keys = Object.keys(product);\r\n      let newProduct: { [key: string]: string } = {};\r\n      keys.forEach((key) => {\r\n        newProduct[snakeCaseToCamelCase(key)] = product[key];\r\n      });\r\n      return newProduct;\r\n    });\r\n    return products as Product[];\r\n  }\r\n\r\n  /**\r\n   * Sets index to focus on open to the selected product. This index resets it when the menu closes.\r\n   */\r\n  setFocusIndex() {\r\n    if (this.parsedProducts.length > 1) {\r\n      const currentProduct = this.getProduct(this.currentProductId);\r\n\r\n      if (currentProduct) {\r\n        this.itemIndexToFocus = this.parsedProducts.indexOf(currentProduct);\r\n      }\r\n    }\r\n  }\r\n\r\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\r\n  toggleTabbingOn() {\r\n    this.isTabbing = true;\r\n  }\r\n\r\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\r\n  toggleTabbingOff() {\r\n    this.isTabbing = false;\r\n  }\r\n\r\n  @Listen(\"keydown\")\r\n  handleKeys(ev: KeyboardEvent) {\r\n    switch (ev.key) {\r\n      case \"Escape\":\r\n        ev.preventDefault();\r\n        this.closeMenu();\r\n        break;\r\n      case \"ArrowDown\":\r\n      case \"ArrowUp\":\r\n        ev.preventDefault();\r\n        if (!this.isOpen) {\r\n          this.itemIndexToFocus = getNewIndexToFocus(this.itemIndexToFocus, ev.key, this.navigatorItems.length);\r\n          this.openMenu();\r\n        }\r\n        break;\r\n    }\r\n  }\r\n\r\n  @Listen(\"keydownOnNavItem\")\r\n  handleKeydown(ev: CustomEvent) {\r\n    const key = ev.detail.key;\r\n    const item = ev.detail.navItem;\r\n    switch (key) {\r\n      case \"Tab\":\r\n        this.closeMenu();\r\n        break;\r\n      case \"Enter\":\r\n      case \" \":\r\n        item.click();\r\n        break;\r\n      case \"ArrowDown\":\r\n      case \"ArrowUp\":\r\n        const oldIndex = this.itemIndexToFocus;\r\n        this.itemIndexToFocus = getNewIndexToFocus(this.itemIndexToFocus, key, this.navigatorItems.length);\r\n        this.focusItem();\r\n        this.unfocusItem(oldIndex);\r\n        break;\r\n    }\r\n  }\r\n\r\n  @Listen(\"click\", { target: \"document\" })\r\n  handleClick(ev: MouseEvent) {\r\n    const isElOrChild = ev.target === this.el || this.el.contains(ev.target as Node);\r\n\r\n    if (!isElOrChild && this.isOpen) {\r\n      this.closeMenu();\r\n    }\r\n  }\r\n\r\n  @Listen(\"buttonActivated\")\r\n  handleButtonClick() {\r\n    this.isOpen ? this.closeMenu() : this.openMenu();\r\n  }\r\n\r\n  openMenu() {\r\n    if (this.wrapperEl) {\r\n      const wrapperWidth = this.wrapperEl.clientWidth;\r\n      const spaceLeft = this.el.getBoundingClientRect().left;\r\n      const spaceRight = document.documentElement.clientWidth - this.el.getBoundingClientRect().right;\r\n      this.openRight = wrapperWidth > spaceLeft && spaceRight > spaceLeft;\r\n    }\r\n    this.isOpen = true;\r\n    this.focusItem();\r\n  }\r\n\r\n  closeMenu() {\r\n    this.isOpen = false;\r\n    this.buttonFocusHandler();\r\n    this.unfocusItem(this.itemIndexToFocus);\r\n    this.setFocusIndex();\r\n  }\r\n\r\n  focusItem() {\r\n    const newSelection = this.navigatorItems[this.itemIndexToFocus];\r\n    newSelection.tabIndex = 0;\r\n    newSelection.focused = true;\r\n    window.requestAnimationFrame(() => newSelection.focus());\r\n  }\r\n\r\n  unfocusItem(index: number) {\r\n    const oldSelection = this.navigatorItems[index];\r\n    oldSelection.tabIndex = -1;\r\n    oldSelection.focused = false;\r\n  }\r\n\r\n  buttonFocusHandler() {\r\n    const hostButton = this.el.shadowRoot.querySelector(\"priv-navigator-button\");\r\n    const button = hostButton.shadowRoot.querySelector(\"button\");\r\n    window.requestAnimationFrame(() => button.focus());\r\n  }\r\n\r\n  /**\r\n   * HELPERS FOR RENDER\r\n   */\r\n  renderUserInfo() {\r\n    return (\r\n      <div\r\n        class=\"user\"\r\n        id=\"wm-nav-user\"\r\n        aria-label={intl.formatMessage(\r\n          {\r\n            id: \"navigator.userinfoLabel\",\r\n            defaultMessage: \"for {name}, email {email}\",\r\n          },\r\n          { name: this.userName, email: this.email }\r\n        )}\r\n      >\r\n        <p>{this.userName}</p>\r\n        <p>{this.email}</p>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  setAltText(): string {\r\n    if (this.parsedProducts.length > 1) {\r\n      return intl.formatMessage({\r\n        id: \"navigator.userinfoAndProductNavigator\",\r\n        defaultMessage: \"User information and product navigator\",\r\n      });\r\n    } else {\r\n      return intl.formatMessage({\r\n        id: \"navigator.userinfo\",\r\n        defaultMessage: \"User information\",\r\n      });\r\n    }\r\n  }\r\n\r\n  renderHeading() {\r\n    return (\r\n      <h2>\r\n        {intl.formatMessage({\r\n          id: \"navigator.watermarkApps\",\r\n          defaultMessage: \"Watermark Apps\",\r\n          description: \"Applications made by Watermark Insights\",\r\n        })}\r\n      </h2>\r\n    );\r\n  }\r\n\r\n  renderList() {\r\n    return (\r\n      <ul\r\n        role=\"listbox\"\r\n        aria-label={`${intl.formatMessage({\r\n          id: \"navigator.WatermarkAppNavigation\",\r\n          defaultMessage: \"Watermark App Navigation\",\r\n          description: \"list of applications by Watermark Insights\",\r\n        })}`}\r\n        aria-describedby=\"wm-nav-user\"\r\n      >\r\n        {this.parsedProducts.length > 1 && this.renderProductOptions()}\r\n        {this.renderLogoutOption()}\r\n      </ul>\r\n    );\r\n  }\r\n\r\n  renderProductOptions(): Array<HTMLPrivNavigatorItemElement> {\r\n    return this.parsedProducts.map((product: Product) => {\r\n      let name: string | undefined, icon: string | undefined, isSelected: boolean, clickRedirect: any;\r\n\r\n      name = product.name;\r\n      icon = (product as Product).iconUrl;\r\n\r\n      clickRedirect = this.setProductOnClick(product.id);\r\n\r\n      if (!!name && !!icon) {\r\n        isSelected = this.currentProductId === product.id;\r\n\r\n        return (\r\n          <priv-navigator-item\r\n            selected={isSelected}\r\n            id={product.id}\r\n            onClick={clickRedirect}\r\n            role=\"option\"\r\n            aria-label={name}\r\n          >\r\n            <img src={icon} alt={name} />\r\n          </priv-navigator-item>\r\n        );\r\n      }\r\n    });\r\n  }\r\n\r\n  setProductOnClick(productId: string) {\r\n    const product = this.getProduct(productId);\r\n\r\n    if (this.currentProductId === productId) {\r\n      return () => {};\r\n    } else if (product) {\r\n      if (!!this.loadFromUserinfo || this.authType === 2) {\r\n        return () => (window.location.href = (product as Product).linkUrl);\r\n      } else if (this.authType === 3) {\r\n        // products passed as prop, saml\r\n        const connName = this.connectionName ? `/?connection_name=${this.connectionName}` : \"\";\r\n        return () => (window.location.href = (product as Product).samlLinkUrl + connName);\r\n      }\r\n    }\r\n  }\r\n\r\n  renderLogoutOption() {\r\n    return (\r\n      <priv-navigator-item\r\n        class=\"logout\"\r\n        selected={!(this.parsedProducts.length > 1)}\r\n        id=\"nav-logout\"\r\n        onClick={this.setLogoutOnclick()}\r\n        role=\"option\"\r\n      >\r\n        <span class=\"logout\">\r\n          {intl.formatMessage({\r\n            id: \"navigator.logout\",\r\n            defaultMessage: \"Log Out\",\r\n          })}\r\n        </span>\r\n      </priv-navigator-item>\r\n    );\r\n  }\r\n\r\n  setLogoutOnclick() {\r\n    // 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).\r\n    // 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.\r\n    return () => {\r\n      this.wmNavigatorLogout.emit();\r\n      if (this.logoutUrl) {\r\n        window.location.href = this.logoutUrl;\r\n      }\r\n    };\r\n  }\r\n\r\n  private get navigatorItems(): Array<HTMLPrivNavigatorItemElement> {\r\n    return Array.from(this.el.shadowRoot.querySelectorAll(\"priv-navigator-item\"));\r\n  }\r\n\r\n  private getProduct(id: string): Product | undefined {\r\n    return this.parsedProducts.find((product) => product.id === id);\r\n  }\r\n\r\n  render() {\r\n    return this.retrievedInfo ? (\r\n      <Host class={this.isTabbing ? \"user-is-tabbing\" : \"\"}>\r\n        <priv-navigator-button expanded={this.isOpen} altText={this.setAltText()} isTabbing={this.isTabbing} />\r\n        <div\r\n          class={`wrapper ${this.isOpen ? \"\" : \"hide\"} ${this.openRight ? \"right\" : \"\"}`}\r\n          ref={(el) => (this.wrapperEl = el as HTMLDivElement)}\r\n        >\r\n          {this.renderUserInfo()}\r\n          {this.parsedProducts.length > 1 && this.renderHeading()}\r\n          {this.renderList()}\r\n        </div>\r\n      </Host>\r\n    ) : (\r\n      \"\"\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"wm-navigator.entry.js","mappings":"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","names":[],"sources":["./src/components/wm-navigator/wm-navigator.scss?tag=wm-navigator&encapsulation=shadow","./src/components/wm-navigator/wm-navigator.tsx"],"sourcesContent":[":host,\nwm-navigator {\n  min-width: 0;\n  position: relative;\n  display: inline-block;\n\n  .wrapper {\n    overflow: auto;\n    font-size: rem-calc(18);\n    min-width: rem-calc(210);\n    width: auto;\n    max-height: 80vh;\n    text-align: left;\n    position: absolute;\n    z-index: 50;\n    top: 100%;\n    right: 20px;\n    left: auto;\n    background: #fff;\n    letter-spacing: normal;\n    @include box-shadow(0 4px 15px 0 rgba(0, 0, 0, 0.2));\n    @include transition(transform 0.25s ease);\n    @include transformOrigin(center top);\n    @include scale($xVal: 1, $yVal: 1);\n\n    .user {\n      background: $background;\n      padding: rem-calc(10 20);\n      font-size: rem-calc(14);\n\n      p {\n        margin: 0;\n      }\n      p:first-child {\n        font-weight: 700;\n        text-transform: capitalize;\n      }\n    }\n\n    h2 {\n      background: #2e1b46;\n      color: #fff;\n      font-weight: 700;\n      margin: 0;\n      padding: rem-calc(10 20);\n      font-size: rem-calc(14);\n    }\n\n    [role=\"listbox\"] {\n      list-style: none;\n      margin: 0;\n      padding-left: 0;\n    }\n\n    &.hide {\n      @include scale($xVal: 1, $yVal: 0);\n    }\n\n    &.right {\n      right: auto;\n      left: 20px;\n    }\n  }\n\n  img {\n    transform: scale(0.8);\n    transform-origin: left center;\n    display: block;\n  }\n\n  .logout {\n    text-align: center;\n    text-transform: capitalize;\n  }\n}\n\npriv-navigator-item:focus {\n  outline: none;\n}\n","import { Component, Element, h, Host, Prop, State, Listen, EventEmitter, Event, Watch } from \"@stencil/core\";\nimport { getWmMode, Product, NavigatorPayload } from \"../../global/interfaces\";\nimport { intl, snakeCaseToCamelCase, getNewIndexToFocus } from \"../../global/functions\";\nimport { getRequest } from \"../../global/services/http-service\";\n\n@Component({\n  tag: \"wm-navigator\",\n  styleUrl: \"wm-navigator.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class Navigator {\n  @Element() el!: any;\n  private wrapperEl?: HTMLDivElement;\n\n  // Component can receive user info and products as props (this is how it worked before)\n  @Prop() userName?: string;\n  @Prop() email?: string;\n  @Prop() authType: number = 1; // 1: none or off, 2: username-password or username_password_sso, 3: saml or saml_sso\n  @Prop() connectionName?: string;\n  @Prop() logoutUrl?: string;\n  @Prop() products?: string | []; // products as JSON string, parsed on load\n\n  // The new way is to retrieve user info from an endpoint\n  // dev needs to opt-in by setting loadFromUserinfo to true\n  @Prop() loadFromUserinfo: boolean = false;\n  // comp can check whether the info was successfully retrieved with:\n  private retrievedInfo: boolean = !this.loadFromUserinfo; // when in endpoint mode, only render after get request completed\n\n  // used either way to store the products\n  parsedProducts: Array<Product> = [];\n\n  /**\n   * Event emitted from child wm-navigator-button updates the state, which is then passed down as a prop by wm-navigator.\n   */\n  @State() isOpen: boolean = false;\n  private openRight: boolean = false; // whether the menu should open on the right side\n\n  @State() isTabbing: boolean = false;\n\n  /**\n   * Value is set to the index of the current product on load.\n   * Keyboard navigation updates the state to keep track of focus in the dropdown.\n   * State resets to the index of the current product when the dropdown closes.\n   */\n  @State() itemIndexToFocus: number = 0;\n\n  @Event() wmNavigatorLogout!: EventEmitter;\n\n  private currentProductId!: string;\n\n  async componentWillLoad() {\n    if (!this.userName) {\n      console.error(\"wm-navigator: user-name is a required property.\");\n    }\n\n    await this.parseData();\n    this.setFocusIndex();\n  }\n\n  // async because we need the http request to complete before proceeding\n  @Watch(\"products\")\n  async parseData() {\n    if (!!this.loadFromUserinfo) {\n      await getRequest(\"/platform/navigator/userinfo\")\n        .then((response: NavigatorPayload) => {\n          this.email = response.email;\n          this.currentProductId = response.current_product_id;\n          this.parsedProducts = this.productKeysToCamelCase(response.products);\n          this.logoutUrl = this.logoutUrl ? this.logoutUrl : response.logout_url;\n          this.connectionName = this.connectionName ? this.connectionName : response.connection_name;\n          if (!!this.email && !!this.currentProductId) {\n            this.retrievedInfo = true;\n          }\n        })\n        .catch((errStatus) => {\n          console.error(errStatus);\n        });\n    } else {\n      this.currentProductId = getWmMode(this.el);\n      if (!!this.products) {\n        if (typeof this.products === \"string\") {\n          this.parsedProducts = JSON.parse(this.products);\n        } else {\n          this.parsedProducts = this.products;\n        }\n        this.parsedProducts = this.productKeysToCamelCase(this.parsedProducts);\n      }\n    }\n    // products is initialized as empty array in case nothing is passed\n    this.parsedProducts.sort((a, b) => (a.name < b.name ? -1 : 1));\n  }\n\n  productKeysToCamelCase(products: object[]): Product[] {\n    products = products.map((product: any) => {\n      const keys = Object.keys(product);\n      let newProduct: { [key: string]: string } = {};\n      keys.forEach((key) => {\n        newProduct[snakeCaseToCamelCase(key)] = product[key];\n      });\n      return newProduct;\n    });\n    return products as Product[];\n  }\n\n  /**\n   * Sets index to focus on open to the selected product. This index resets it when the menu closes.\n   */\n  setFocusIndex() {\n    if (this.parsedProducts.length > 1) {\n      const currentProduct = this.getProduct(this.currentProductId);\n\n      if (currentProduct) {\n        this.itemIndexToFocus = this.parsedProducts.indexOf(currentProduct);\n      }\n    }\n  }\n\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\n  toggleTabbingOn() {\n    this.isTabbing = true;\n  }\n\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\n  toggleTabbingOff() {\n    this.isTabbing = false;\n  }\n\n  @Listen(\"keydown\")\n  handleKeys(ev: KeyboardEvent) {\n    switch (ev.key) {\n      case \"Escape\":\n        ev.preventDefault();\n        this.closeMenu();\n        break;\n      case \"ArrowDown\":\n      case \"ArrowUp\":\n        ev.preventDefault();\n        if (!this.isOpen) {\n          this.itemIndexToFocus = getNewIndexToFocus(this.itemIndexToFocus, ev.key, this.navigatorItems.length);\n          this.openMenu();\n        }\n        break;\n    }\n  }\n\n  @Listen(\"keydownOnNavItem\")\n  handleKeydown(ev: CustomEvent) {\n    const key = ev.detail.key;\n    const item = ev.detail.navItem;\n    switch (key) {\n      case \"Tab\":\n        this.closeMenu();\n        break;\n      case \"Enter\":\n      case \" \":\n        item.click();\n        break;\n      case \"ArrowDown\":\n      case \"ArrowUp\":\n        const oldIndex = this.itemIndexToFocus;\n        this.itemIndexToFocus = getNewIndexToFocus(this.itemIndexToFocus, key, this.navigatorItems.length);\n        this.focusItem();\n        this.unfocusItem(oldIndex);\n        break;\n    }\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  handleClick(ev: MouseEvent) {\n    const isElOrChild = ev.target === this.el || this.el.contains(ev.target as Node);\n\n    if (!isElOrChild && this.isOpen) {\n      this.closeMenu();\n    }\n  }\n\n  @Listen(\"buttonActivated\")\n  handleButtonClick() {\n    this.isOpen ? this.closeMenu() : this.openMenu();\n  }\n\n  openMenu() {\n    if (this.wrapperEl) {\n      const wrapperWidth = this.wrapperEl.clientWidth;\n      const spaceLeft = this.el.getBoundingClientRect().left;\n      const spaceRight = document.documentElement.clientWidth - this.el.getBoundingClientRect().right;\n      this.openRight = wrapperWidth > spaceLeft && spaceRight > spaceLeft;\n    }\n    this.isOpen = true;\n    this.focusItem();\n  }\n\n  closeMenu() {\n    this.isOpen = false;\n    this.buttonFocusHandler();\n    this.unfocusItem(this.itemIndexToFocus);\n    this.setFocusIndex();\n  }\n\n  focusItem() {\n    const newSelection = this.navigatorItems[this.itemIndexToFocus];\n    newSelection.tabIndex = 0;\n    newSelection.focused = true;\n    window.requestAnimationFrame(() => newSelection.focus());\n  }\n\n  unfocusItem(index: number) {\n    const oldSelection = this.navigatorItems[index];\n    oldSelection.tabIndex = -1;\n    oldSelection.focused = false;\n  }\n\n  buttonFocusHandler() {\n    const hostButton = this.el.shadowRoot.querySelector(\"priv-navigator-button\");\n    const button = hostButton.shadowRoot.querySelector(\"button\");\n    window.requestAnimationFrame(() => button.focus());\n  }\n\n  /**\n   * HELPERS FOR RENDER\n   */\n  renderUserInfo() {\n    return (\n      <div\n        class=\"user\"\n        id=\"wm-nav-user\"\n        aria-label={intl.formatMessage(\n          {\n            id: \"navigator.userinfoLabel\",\n            defaultMessage: \"for {name}, email {email}\",\n          },\n          { name: this.userName, email: this.email }\n        )}\n      >\n        <p>{this.userName}</p>\n        <p>{this.email}</p>\n      </div>\n    );\n  }\n\n  setAltText(): string {\n    if (this.parsedProducts.length > 1) {\n      return intl.formatMessage({\n        id: \"navigator.userinfoAndProductNavigator\",\n        defaultMessage: \"User information and product navigator\",\n      });\n    } else {\n      return intl.formatMessage({\n        id: \"navigator.userinfo\",\n        defaultMessage: \"User information\",\n      });\n    }\n  }\n\n  renderHeading() {\n    return (\n      <h2>\n        {intl.formatMessage({\n          id: \"navigator.watermarkApps\",\n          defaultMessage: \"Watermark Apps\",\n          description: \"Applications made by Watermark Insights\",\n        })}\n      </h2>\n    );\n  }\n\n  renderList() {\n    return (\n      <ul\n        role=\"listbox\"\n        aria-label={`${intl.formatMessage({\n          id: \"navigator.WatermarkAppNavigation\",\n          defaultMessage: \"Watermark App Navigation\",\n          description: \"list of applications by Watermark Insights\",\n        })}`}\n        aria-describedby=\"wm-nav-user\"\n      >\n        {this.parsedProducts.length > 1 && this.renderProductOptions()}\n        {this.renderLogoutOption()}\n      </ul>\n    );\n  }\n\n  renderProductOptions(): Array<HTMLPrivNavigatorItemElement> {\n    return this.parsedProducts.map((product: Product) => {\n      let name: string | undefined, icon: string | undefined, isSelected: boolean, clickRedirect: any;\n\n      name = product.name;\n      icon = (product as Product).iconUrl;\n\n      clickRedirect = this.setProductOnClick(product.id);\n\n      if (!!name && !!icon) {\n        isSelected = this.currentProductId === product.id;\n\n        return (\n          <priv-navigator-item\n            selected={isSelected}\n            id={product.id}\n            onClick={clickRedirect}\n            role=\"option\"\n            aria-label={name}\n          >\n            <img src={icon} alt={name} />\n          </priv-navigator-item>\n        );\n      }\n    });\n  }\n\n  setProductOnClick(productId: string) {\n    const product = this.getProduct(productId);\n\n    if (this.currentProductId === productId) {\n      return () => {};\n    } else if (product) {\n      if (!!this.loadFromUserinfo || this.authType === 2) {\n        return () => (window.location.href = (product as Product).linkUrl);\n      } else if (this.authType === 3) {\n        // products passed as prop, saml\n        const connName = this.connectionName ? `/?connection_name=${this.connectionName}` : \"\";\n        return () => (window.location.href = (product as Product).samlLinkUrl + connName);\n      }\n    }\n  }\n\n  renderLogoutOption() {\n    return (\n      <priv-navigator-item\n        class=\"logout\"\n        selected={!(this.parsedProducts.length > 1)}\n        id=\"nav-logout\"\n        onClick={this.setLogoutOnclick()}\n        role=\"option\"\n      >\n        <span class=\"logout\">\n          {intl.formatMessage({\n            id: \"navigator.logout\",\n            defaultMessage: \"Log Out\",\n          })}\n        </span>\n      </priv-navigator-item>\n    );\n  }\n\n  setLogoutOnclick() {\n    // 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).\n    // 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.\n    return () => {\n      this.wmNavigatorLogout.emit();\n      if (this.logoutUrl) {\n        window.location.href = this.logoutUrl;\n      }\n    };\n  }\n\n  private get navigatorItems(): Array<HTMLPrivNavigatorItemElement> {\n    return Array.from(this.el.shadowRoot.querySelectorAll(\"priv-navigator-item\"));\n  }\n\n  private getProduct(id: string): Product | undefined {\n    return this.parsedProducts.find((product) => product.id === id);\n  }\n\n  render() {\n    return this.retrievedInfo ? (\n      <Host class={this.isTabbing ? \"user-is-tabbing\" : \"\"}>\n        <priv-navigator-button expanded={this.isOpen} altText={this.setAltText()} isTabbing={this.isTabbing} />\n        <div\n          class={`wrapper ${this.isOpen ? \"\" : \"hide\"} ${this.openRight ? \"right\" : \"\"}`}\n          ref={(el) => (this.wrapperEl = el as HTMLDivElement)}\n        >\n          {this.renderUserInfo()}\n          {this.parsedProducts.length > 1 && this.renderHeading()}\n          {this.renderList()}\n        </div>\n      </Host>\n    ) : (\n      \"\"\n    );\n  }\n}\n"],"version":3}