@watermarkinsights/ripple 3.0.1-0 → 3.0.2-0

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

@@ -0,0 +1,468 @@
+import { Component, Element, h, Host, Prop, State, Listen, Event, Watch, } from "@stencil/core";
+import { getWmMode } from "../../global/interfaces";
+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 = [];
+    /**
+     * 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()))) : ("");
+  }
+  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
+    }]; }
+}

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

@@ -0,0 +1,162 @@
+@charset "UTF-8";
+/* --------------------------------------
+   1. Box-shadow
+   -------------------------------------- */
+/* --------------------------------------
+   2. Border-radius
+   -------------------------------------- */
+/* --------------------------------------
+   3. Transforms
+   -------------------------------------- */
+/* --------------------------------------
+   4. Button Focus
+   -------------------------------------- */
+/* --------------------------------------
+   5. Flex
+   -------------------------------------- */
+/* --------------------------------------
+   6. Button Hover
+   -------------------------------------- */
+/* --------------------------------------
+   7. Screen Reader Only
+   -------------------------------------- */
+/* --------------------------------------
+   8. Label styles
+   this mixin includes all the styles for the label
+   + flex rules on the parent container to switch between top and left position
+   + srOnly when label is hidden
+   Assumes the following markup:
+   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
+   .wrapper is for the flex rules
+   .label-wrapper is to set the height of the label when positioned left so it's the same height as
+   the input. It can't be done directly on .label because of possible line wrapping.
+   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
+   (they can't be aligned on the baseline because of possible description text and error message)
+   -------------------------------------- */
+/********************************************************************************************/
+/* DO NOT USE THESE DIRECTLY, ASSIGN THEM TO VARIABLES NAMED AFTER FUNCTIONALITY, SEE BELOW */
+/********************************************************************************************/
+/* USAGE */
+/* BELOW IS BEFORE WE HAD THE COLOR PALETTE FROM UI */
+/* TODO: replace with vars above whenever possible */
+/* Buttons */
+/* VIA */
+:host(:not(:last-child)),
+wm-option:not(:last-child) {
+  border-bottom: 2px solid rgba(46, 27, 70, 0.05);
+}
+
+:host,
+wm-option {
+  display: block;
+  cursor: pointer;
+  position: relative;
+  padding: 1.25rem;
+  background: #fff;
+  font-family: inherit;
+  list-style: none;
+  color: #4a4a4a;
+  user-select: none;
+}
+:host:focus, :host.focus,
+wm-option:focus,
+wm-option.focus {
+  outline: none;
+  background: #f4f4f4;
+}
+:host.icon,
+wm-option.icon {
+  color: #575195;
+}
+
+.checkbox:before {
+  display: inline-block;
+  font: normal normal normal 24px/1 "Material Design Icons";
+  font-size: inherit;
+  text-rendering: auto;
+  line-height: inherit;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "";
+  display: inline;
+  margin-right: 0.25rem;
+  color: #575195;
+}
+
+:host([aria-selected=true]),
+wm-option[aria-selected=true] {
+  background: rgba(46, 27, 70, 0.05);
+  font-weight: 500;
+}
+:host([aria-selected=true]) .checkbox:before,
+wm-option[aria-selected=true] .checkbox:before {
+  content: "";
+}
+
+:host([aria-disabled=true]),
+wm-option[aria-disabled=true] {
+  font-style: italic;
+  color: #6b6b6b;
+  cursor: default;
+}
+:host([aria-disabled=true]) .checkbox:before,
+wm-option[aria-disabled=true] .checkbox:before {
+  color: #6b6b6b;
+}
+
+:host(.multi-option),
+wm-option.multi-option {
+  background: unset;
+}
+
+:host(.hassubinfo),
+wm-option.hassubinfo {
+  display: flex;
+}
+:host(.hassubinfo) .option-wrapper,
+wm-option.hassubinfo .option-wrapper {
+  flex: 1;
+}
+:host(.hassubinfo) .subinfo,
+wm-option.hassubinfo .subinfo {
+  flex: none;
+}
+
+.subinfo {
+  font-style: italic;
+}
+
+.option-wrapper {
+  display: inline-block;
+}
+
+::slotted {
+  font-family: inherit;
+}
+
+::slotted(i) {
+  font-size: 0.875rem;
+}
+::slotted(i):before {
+  display: inline-block;
+  font: normal normal normal 24px/1 "Material Design Icons";
+  font-size: inherit;
+  text-rendering: auto;
+  line-height: inherit;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: inline-block;
+  margin-right: 0.625rem;
+  pointer-events: none;
+}
+
+:host(:focus),
+wm-option:focus {
+  outline: none;
+  background: #f4f4f4;
+}
+
+:host(:hover) {
+  background: #f4f4f4;
+  outline: none;
+}