@watermarkinsights/ripple 3.0.1-0 → 3.0.2-0

package/dist/collection/components/wm-modal/wm-modal-header.css

@@ -0,0 +1,78 @@
+/* --------------------------------------
+   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 */
+wm-modal-header {
+  -webkit-border-radius: 5px 5px 0 0px;
+  -moz-border-radius: 5px 5px 0 0px;
+  -ms-border-radius: 5px 5px 0 0px;
+  border-radius: 5px 5px 0 0px;
+  margin-bottom: -1px;
+}
+wm-modal-header .wm-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+wm-modal-header .wm-wrapper .title {
+  margin: 0;
+  font-weight: 600;
+  font-size: 1.125rem;
+  color: #4a4a4a;
+  line-height: normal;
+}
+wm-modal-header .wm-wrapper .title .subtitle {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: normal;
+}
+wm-modal-header .wm-wrapper .title:focus {
+  outline: none;
+}

package/dist/collection/components/wm-modal/wm-modal-header.js

@@ -0,0 +1,109 @@
+import { h, Component, Element, Prop, Host, Listen } from "@stencil/core";
+import { intl, checkForFocusableElInShadow } from "../../global/functions";
+export class ModalHeader {
+  constructor() {
+    this.heading = "";
+    this.subheading = "";
+    this.closeTooltip = intl.formatMessage({
+      id: "global.closeVerb",
+      defaultMessage: "Close",
+      description: "For a button, to close a user interface element",
+    });
+  }
+  //Trap focus when user tabs past last element in modal
+  focusFirstEl() {
+    checkForFocusableElInShadow(this.firstElement).focus();
+  }
+  componentWillLoad() {
+    this.uid = this.el.parentElement.uid;
+  }
+  emitParentCloseEvent() {
+    const parentModal = this.el.parentElement;
+    //@ts-ignore
+    parentModal.emitCloseEvent();
+  }
+  // @Listen("click")
+  // directFocusOnClick() {
+  //   this.headingElement.tabIndex = 0;
+  //   this.headingElement.focus();
+  // }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "wm-wrapper" },
+        h("div", null,
+          h("h2", { class: "title", id: `wm-modal-heading-text-${this.uid}` },
+            this.heading,
+            h("span", { class: "subtitle" }, this.subheading))),
+        h("wm-button", { "button-style": "navigational", icon: "f156", tooltip: this.closeTooltip, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.firstElement = el), onClick: () => this.emitParentCloseEvent() }))));
+  }
+  static get is() { return "wm-modal-header"; }
+  static get originalStyleUrls() { return {
+    "$": ["wm-modal-header.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["wm-modal-header.css"]
+  }; }
+  static get properties() { return {
+    "uid": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "uid",
+      "reflect": false
+    },
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "heading",
+      "reflect": true,
+      "defaultValue": "\"\""
+    },
+    "subheading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "subheading",
+      "reflect": true,
+      "defaultValue": "\"\""
+    }
+  }; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "focusFirstElement",
+      "method": "focusFirstEl",
+      "target": "document",
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -0,0 +1,155 @@
+/* --------------------------------------
+   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 */
+wm-modal {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  flex-direction: column;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2001;
+  width: 80vw;
+  max-width: 750px;
+  max-height: 80vh;
+  -webkit-box-shadow: 0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);
+  -moz-box-shadow: 0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);
+  box-shadow: 0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);
+}
+wm-modal * {
+  box-sizing: border-box;
+}
+wm-modal > * {
+  width: 80vw;
+  max-width: 750px;
+  background: #fff;
+}
+wm-modal > *:focus {
+  outline: none;
+}
+wm-modal wm-modal-header,
+wm-modal wm-modal-footer {
+  padding: 1.25rem 1.875rem;
+}
+wm-modal wm-modal-header {
+  z-index: 2003;
+}
+wm-modal wm-modal-footer {
+  z-index: 2003;
+}
+wm-modal > :not(wm-modal-header):not(wm-modal-footer) {
+  max-height: calc(80vh - 166px);
+  z-index: 2002;
+}
+wm-modal.wm-modal wm-modal-header {
+  border-bottom: 1px solid #f4f3f6;
+}
+wm-modal.wm-modal wm-modal-footer {
+  border-top: 1px solid #f4f3f6;
+}
+@media only screen and (max-width: 768px) {
+  wm-modal.wm-modal {
+    height: 100%;
+    max-height: none;
+    max-width: none;
+    width: 100vw;
+  }
+  wm-modal.wm-modal > * {
+    max-width: none;
+    width: 100vw;
+  }
+  wm-modal.wm-modal > *:not(wm-modal-header):not(wm-modal-footer) {
+    max-height: none;
+    height: calc(100vh - 166px);
+  }
+}
+wm-modal.wm-dialog > :not(wm-modal-header):not(wm-modal-footer) {
+  padding: 0 1.875rem 1.25rem 1.875rem;
+  font-size: 0.875rem;
+  border: none;
+}
+wm-modal .overlay {
+  width: 100vw;
+  height: 100vh;
+  max-width: none;
+  max-height: none;
+  position: fixed !important;
+  top: -1;
+  bottom: 1;
+  left: -1;
+  right: 1;
+  transform: translate(0%, 0%);
+  background-color: rgba(25, 25, 25, 0.4);
+  -ms-transition: opacity 0.5s ease-out;
+  -webkit-transition: opacity 0.5s ease-out;
+  -moz-transition: opacity 0.5s ease-out;
+  transition: opacity 0.5s ease-out;
+  z-index: 2000;
+}
+wm-modal.hide {
+  visibility: hidden;
+}
+wm-modal .sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  border: 0 !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  clip-path: inset(50%) !important;
+  white-space: nowrap !important;
+  margin: -1px !important;
+  top: 0;
+  left: 0;
+}

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

@@ -0,0 +1,356 @@
+import { h, Component, Element, Listen, Host, Prop, Watch, Event, Method } from "@stencil/core";
+import { getFirstFocusableDescendant, checkForActiveElInShadow } from "../../global/functions";
+import { generateId } from "../../global/functions";
+export class Modal {
+  constructor() {
+    this.isOpen = false;
+    this.elementToFocus = "";
+    this.isTypeDialog = false;
+    this.bodyFocusListener = () => this.redirectFocusOnBody();
+  }
+  //App can open modal by toggling the prop
+  toggleModal() {
+    this.isOpen ? this.showModal() : this.hideModal();
+  }
+  //The below not implemented in light of the fact that the app does often need to keep track of the modal's state itself so that it can update the data displayed in the body:
+  //App can also open modal by emitting wmShowModal event. Event needs to include the modal's unique id as the event detail, or else all modals on the page will open when wmShowModal event is dispatched.
+  // @Listen("wmShowModal", { target: "window" })
+  // doesEventMatchId(ev: CustomEvent) {
+  //   ev.detail === this.uid && this.showModal();
+  // }
+  showModal() {
+    this.setElToFocusOnClose(); //Record where the user was before the modal opened so that focus can return to it when the modal closes
+    document.body.style.overflow = "hidden"; //Keeps the page below the modal from scrolling
+    //Focus listeners as a general catch for keeping focus in case of errors in finding element with id passed in by dev (element is removed from DOM, etc.) or other scenarios
+    document.body.tabIndex = 0;
+    document.body.removeEventListener("focus", this.bodyFocusListener, true);
+    document.body.addEventListener("focus", this.bodyFocusListener, true);
+    window.requestAnimationFrame(() => {
+      this.setElToFocusOnOpen();
+      window.requestAnimationFrame(() => this.focusOnOpen.focus()); //Bring focus to element inside modal
+    });
+  }
+  handleClick(ev) {
+    this.isOpen && ev.target === this.overlayEl && this.focusOnOpen.focus();
+  }
+  closeModalOnEscape(ev) {
+    if (ev.key === "Escape") {
+      this.wmCloseTriggered.emit();
+      this.isOpen = false;
+    }
+  }
+  //Close the modal and focus the triggering element when the modal buttons emit their events
+  hideModal() {
+    document.body.style.overflow = "visible";
+    document.body.tabIndex = -1;
+    document.body.removeEventListener("focus", this.bodyFocusListener, true);
+    window.requestAnimationFrame(() => this.focusOnClose.focus()); //Return focus
+  }
+  componentWillLoad() {
+    if (this.elementToFocus === "primary" || this.elementToFocus === "secondary") {
+      if (!this.el.id) {
+        throw new Error("You are telling the modal to focus an element in the footer when it opens. That's fine! But when you do that, you also need to give the wm-modal-wrapper an ID and set the ID of the modal body to 'content-[id of wm-modal-wrapper]. This is for accessibility purposes.");
+      }
+    }
+    this.uid = this.el.id ? this.el.id : generateId();
+  }
+  componentDidLoad() {
+    if (this.isOpen) {
+      this.showModal();
+    }
+  }
+  async emitCloseEvent() {
+    this.wmCloseTriggered.emit();
+  }
+  async emitPrimaryEvent() {
+    this.wmPrimaryTriggered.emit();
+  }
+  async emitSecondaryEvent() {
+    this.wmSecondaryTriggered.emit();
+  }
+  //If the dev hasn't specified an element to focus, element to focus first will be the close (X) button
+  setElToFocusOnOpen() {
+    const closeBtn = getFirstFocusableDescendant(this.el.querySelector(`#wm-modal-close-${this.uid}`));
+    if (this.elementToFocus) {
+      if (this.elementToFocus === "primary" || this.elementToFocus === "secondary") {
+        this.setAriaDescribedbyOnModal();
+        this.elementToFocus = `wm-${this.elementToFocus}-${this.uid}`;
+      }
+      const elToFocus = this.el.querySelector(`#${this.elementToFocus}`);
+      if (elToFocus) {
+        const firstEl = getFirstFocusableDescendant(elToFocus);
+        if (firstEl) {
+          this.focusOnOpen = firstEl;
+        }
+        else {
+          console.warn("Ripple Component Library: The modal component couldn't find an element matching the value you passed for 'elementToFocus'. It will fall back to the default and focus the close button when the modal opens.");
+          this.focusOnOpen = closeBtn;
+        }
+      }
+      else {
+        console.warn("Ripple Component Library: The modal component couldn't find an element matching the value you passed for 'elementToFocus'. It will fall back to the default and focus the close button when the modal opens.");
+        this.focusOnOpen = closeBtn;
+      }
+    }
+    else {
+      this.focusOnOpen = closeBtn;
+    }
+  }
+  setAriaDescribedbyOnModal() {
+    const modalBody = document.getElementById(`content-${this.uid}`);
+    if (!modalBody) {
+      console.warn("Ripple Component Library: The element containing the body of the modal must include an id in the format 'content-[id of modal]' for accessibility purposes.");
+    }
+    else {
+      this.el.setAttribute("aria-describedby", `wm-modal-heading-text-${this.uid} content-${this.uid}`);
+    }
+  }
+  setElToFocusOnClose() {
+    const elToFocus = document.activeElement;
+    if (elToFocus.tagName === "WM-MENUITEM") {
+      this.focusOnClose = elToFocus.parentElement;
+    }
+    else {
+      this.focusOnClose = checkForActiveElInShadow(elToFocus);
+    }
+  }
+  redirectFocusOnBody() {
+    if (document.activeElement.tagName === "BODY") {
+      this.setElToFocusOnOpen();
+      this.focusOnOpen.focus();
+    }
+  }
+  render() {
+    return (h(Host, { class: (this.isOpen ? "" : "hide ") + (this.isTypeDialog ? "wm-dialog" : "wm-modal"), role: "dialog", "aria-describedby": `wm-modal-heading-text-${this.uid}`, "aria-modal": "true", tabindex: this.isOpen ? 0 : null, onFocus: () => {
+        this.focusLastElement.emit();
+      } },
+      h("div", { class: "overlay", ref: (el) => (this.overlayEl = el) }),
+      h("div", { class: "sr-only", tabIndex: 0, onFocus: () => {
+          this.focusFirstElement.emit();
+        } })));
+  }
+  static get is() { return "wm-modal"; }
+  static get originalStyleUrls() { return {
+    "$": ["wm-modal.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["wm-modal.css"]
+  }; }
+  static get properties() { return {
+    "isOpen": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-open",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "elementToFocus": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "element-to-focus",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "isTypeDialog": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-type-dialog",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "uid": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "uid",
+      "reflect": true
+    }
+  }; }
+  static get events() { return [{
+      "method": "focusLastElement",
+      "name": "focusLastElement",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "focusFirstElement",
+      "name": "focusFirstElement",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "wmCloseTriggered",
+      "name": "wmCloseTriggered",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "wmPrimaryTriggered",
+      "name": "wmPrimaryTriggered",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "wmSecondaryTriggered",
+      "name": "wmSecondaryTriggered",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "emitCloseEvent": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "emitPrimaryEvent": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "emitSecondaryEvent": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "isOpen",
+      "methodName": "toggleModal"
+    }]; }
+  static get listeners() { return [{
+      "name": "click",
+      "method": "handleClick",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "keydown",
+      "method": "closeModalOnEscape",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}