@watermarkinsights/ripple 3.8.0-2 → 3.8.0-5

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

@@ -1,275 +1,275 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-cd8f9ae2.js';
-import { a as getWmMode } from './interfaces-61c6305b.js';
-import { s as snakeCaseToCamelCase, k as getNewIndexToFocus, i as intl } from './functions-6cd52dcf.js';
-import { g as getRequest } from './http-service-5d037e16.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-66f8130e.js';
+import { a as getWmMode } from './interfaces-2b97fab2.js';
+import { s as snakeCaseToCamelCase, k as getNewIndexToFocus, i as intl } from './functions-7eebdc16.js';
+import { g as getRequest } from './http-service-3dc3b3e7.js';
 
 const wmNavigatorCss = ":host,wm-navigator{height:100%;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}";
 
-let Navigator = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.wmNavigatorLogout = createEvent(this, "wmNavigatorLogout", 7);
-    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 = [];
-    /**
-     * Event emitted from child wm-navigator-button updates the state, which is then passed down as a prop by wm-navigator.
-     */
-    this.isOpen = false;
-    this.openRight = false; // whether the menu should open on the right side
-    this.isTabbing = false;
-    /**
-     * 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.
-     */
-    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()))) : ("");
-  }
-  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);
+    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 = [];
+    /**
+     * Event emitted from child wm-navigator-button updates the state, which is then passed down as a prop by wm-navigator.
+     */
+    this.isOpen = false;
+    this.openRight = false; // whether the menu should open on the right side
+    this.isTabbing = false;
+    /**
+     * 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.
+     */
+    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()))) : ("");
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "products": ["parseData"]
+  }; }
+};
 Navigator.style = wmNavigatorCss;
 
 export { Navigator as wm_navigator };