@watermarkinsights/ripple 3.0.1-0 → 3.0.2-0

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

@@ -0,0 +1,220 @@
+@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,
+wm-input {
+  font-family: inherit;
+  width: 100%;
+}
+:host *,
+wm-input * {
+  box-sizing: border-box;
+}
+:host .wrapper,
+wm-input .wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  flex-direction: column;
+  font-size: 0.875rem;
+}
+:host .wrapper .label,
+wm-input .wrapper .label {
+  display: block;
+  line-height: normal;
+  font-weight: 600;
+  white-space: nowrap;
+  margin-bottom: 0.25rem;
+}
+:host .wrapper .label .required,
+wm-input .wrapper .label .required {
+  color: #c0392b;
+}
+:host .wrapper.label-left,
+wm-input .wrapper.label-left {
+  flex-direction: row;
+}
+:host .wrapper.label-left .label-wrapper,
+wm-input .wrapper.label-left .label-wrapper {
+  line-height: 2.5rem;
+}
+:host .wrapper.label-left .label-wrapper .label,
+wm-input .wrapper.label-left .label-wrapper .label {
+  display: flex;
+  align-items: center;
+  min-height: 2.5rem;
+  white-space: normal;
+  margin-bottom: 0;
+  margin-right: 0.75rem;
+}
+:host .wrapper.label-none label,
+wm-input .wrapper.label-none label {
+  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;
+}
+:host .wrapper.invalid .label,
+wm-input .wrapper.invalid .label {
+  color: #c0392b;
+}
+:host .wrapper.invalid .label:after,
+wm-input .wrapper.invalid .label:after {
+  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: "";
+  margin-left: 0.3125rem;
+}
+[dir=RTL] :host .wrapper.invalid .label:after,
+[dir=RTL] wm-input .wrapper.invalid .label:after {
+  margin-left: 0;
+  margin-right: 0.3125rem;
+}
+:host .wrapper.rtl.label-left .label,
+wm-input .wrapper.rtl.label-left .label {
+  margin-right: 0;
+  margin-left: 0.75rem;
+}
+:host .wrapper .inner-wrapper,
+wm-input .wrapper .inner-wrapper {
+  width: 100%;
+}
+:host .wrapper .inputfield-wrapper,
+wm-input .wrapper .inputfield-wrapper {
+  height: 2.5rem;
+  border: 1px solid #4a4a4a;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  border-radius: 3px;
+  display: flex;
+}
+:host .wrapper .character-count,
+wm-input .wrapper .character-count {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 5rem;
+  background-color: rgba(74, 74, 74, 0.05);
+  font-size: 0.875rem;
+  font-weight: 500;
+  align-self: stretch;
+}
+:host .wrapper input,
+wm-input .wrapper input {
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  border-radius: 3px;
+  border: none;
+  font-family: inherit;
+  font-size: 0.875rem;
+  height: 100%;
+  flex: 1;
+  padding: 0.75rem 1rem;
+  width: 100%;
+}
+:host .wrapper input:disabled,
+wm-input .wrapper input:disabled {
+  background-color: #f0f0f0;
+  color: #737373;
+}
+:host .wrapper input:focus,
+wm-input .wrapper input:focus {
+  outline: none;
+}
+:host .wrapper .info,
+wm-input .wrapper .info {
+  font-style: italic;
+  line-height: 100%;
+  margin: 4px 0;
+}
+:host .wrapper.invalid .inputfield-wrapper,
+wm-input .wrapper.invalid .inputfield-wrapper {
+  -webkit-box-shadow: 0 0 0 1px #c0392b;
+  -moz-box-shadow: 0 0 0 1px #c0392b;
+  box-shadow: 0 0 0 1px #c0392b;
+  border-color: #c0392b;
+}
+:host .wrapper.invalid .error-message,
+wm-input .wrapper.invalid .error-message {
+  color: #c0392b;
+  margin: 4px 0;
+  display: block;
+  font-style: italic;
+  line-height: 100%;
+}
+:host .wrapper:focus .inputfield-wrapper, :host .wrapper.focus .inputfield-wrapper,
+wm-input .wrapper:focus .inputfield-wrapper,
+wm-input .wrapper.focus .inputfield-wrapper {
+  -webkit-box-shadow: 0 0 0 1px #20cbd4;
+  -moz-box-shadow: 0 0 0 1px #20cbd4;
+  box-shadow: 0 0 0 1px #20cbd4;
+  outline: none;
+  border-color: #20cbd4;
+}
+:host .sr-only,
+wm-input .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;
+}

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

@@ -0,0 +1,302 @@
+import { h, Component, Element, Host, Prop, State } from "@stencil/core";
+import { intl, generateId, isRelatedTarget } from "../../global/functions";
+export class Input {
+  constructor() {
+    this.labelPosition = "top";
+    this.value = "";
+    this.disabled = false;
+    this.placeholder = "";
+    this.requiredField = false;
+    this.charCount = 0;
+    this.announcement = "";
+    this.uid = "";
+    this.requiredErrorMessage = intl.formatMessage({
+      id: "global.requiredError",
+      defaultMessage: "This field is required.",
+    });
+  }
+  componentWillLoad() {
+    this.uid = this.el.id ? this.el.id : generateId();
+    this.el.focus = function () {
+      if (!this.disabled) {
+        this.shadowRoot.querySelector("input").focus();
+      }
+    };
+    if (!this.label) {
+      console.error("wm-input requires the label property");
+    }
+  }
+  componentDidLoad() {
+    if (this.value) {
+      this.inputEl.value = this.value;
+    }
+  }
+  handleKeyDown(ev) {
+    // in most browsers, onInput doesn't fire if the input's maxLength is reached
+    // to handle the case where a user continues to type after reaching the character limit, the keyDown event must be used
+    const isModifierKey = ev.ctrlKey || ev.metaKey || ev.altKey;
+    const isCharacter = /^.$/.test(ev.key) && !isModifierKey;
+    const hasReachedCharacterLimit = isCharacter && this.characterLimit && this.inputEl.value.length >= this.characterLimit;
+    if (hasReachedCharacterLimit) {
+      this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
+    }
+  }
+  handleBlur(ev) {
+    // do not validate if clicking to an element that should prevent validation (e.g. close button on modal)
+    const shouldPreventValidation = this.preventValidation && isRelatedTarget(ev, this.preventValidation);
+    if (this.requiredField && !shouldPreventValidation) {
+      this.errorMessage = this.updateRequiredError(this.errorMessage, this.requiredErrorMessage, this.value);
+    }
+    this.inputWrapperEl.classList.remove("focus");
+  }
+  handleInput(ev) {
+    this.value = ev.target.value;
+    this.charCount = this.value.length;
+    if (this.characterLimit && this.charCount >= this.characterLimit - 5) {
+      this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
+    }
+  }
+  handleFocus() {
+    this.inputWrapperEl.classList.add("focus");
+  }
+  updateRequiredError(errorMessage, requiredErrorMessage, value) {
+    const errorPresent = !!errorMessage && errorMessage !== "";
+    let newErrorMessage = errorMessage || "";
+    // no error and empty value generates required error message
+    if (!errorPresent && value === "") {
+      newErrorMessage = requiredErrorMessage;
+    }
+    // if there is an error and a value, clear error message
+    // unless it's a custom error set by the dev
+    else if (errorPresent && value !== "") {
+      if (errorMessage === requiredErrorMessage) {
+        newErrorMessage = "";
+      }
+    }
+    return newErrorMessage;
+  }
+  announce(message) {
+    if (this.liveRegionEl.textContent === message) {
+      message += "\u00A0";
+    }
+    this.announcement = message;
+  }
+  generateCharacterLimitWarning(charCount, charLimit) {
+    const charactersEnteredMessage = intl.formatMessage({
+      id: "input.charactersEntered",
+      defaultMessage: "{x, number} of {y, number} characters entered.",
+    }, { x: charCount, y: charLimit });
+    const characterLimitReachedMessage = intl.formatMessage({
+      id: "input.characterLimitReached",
+      defaultMessage: "No additional characters will be entered.",
+    });
+    return `${charactersEnteredMessage}${charCount >= charLimit ? " " + characterLimitReachedMessage : ""}`;
+  }
+  render() {
+    return (h(Host, { id: this.uid },
+      h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) },
+        h("div", { class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { htmlFor: `inputfield-${this.uid}`, class: "label" },
+          this.label,
+          this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*"))))),
+        h("div", { class: "inner-wrapper" },
+          h("div", { class: "inputfield-wrapper" },
+            h("input", { ref: (el) => (this.inputEl = el), id: `inputfield-${this.uid}`, disabled: this.disabled, "aria-label": this.label, "aria-describedby": `info-${this.uid} error-${this.uid}`, onInput: (ev) => this.handleInput(ev), onKeyDown: (ev) => this.handleKeyDown(ev), onBlur: (ev) => this.handleBlur(ev), onFocus: this.handleFocus.bind(this), placeholder: this.placeholder, autocomplete: "off", required: this.requiredField, maxLength: this.characterLimit || undefined }),
+            this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: "character-count" },
+              this.charCount,
+              "/",
+              this.characterLimit)) : ("")),
+          this.info && (h("div", { id: `info-${this.uid}`, class: "info" }, this.info)),
+          h("div", { id: `error-${this.uid}`, "aria-live": "assertive", class: "error-message", "aria-atomic": "true" }, this.errorMessage),
+          h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+  }
+  static get is() { return "wm-input"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["wm-input.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["wm-input.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "labelPosition": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"top\" | \"left\" | \"none\"",
+        "resolved": "\"left\" | \"none\" | \"top\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label-position",
+      "reflect": false,
+      "defaultValue": "\"top\""
+    },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": true,
+      "defaultValue": "\"\""
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "info": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "info",
+      "reflect": false
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "placeholder",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "requiredField": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "required-field",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "errorMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "error-message",
+      "reflect": true
+    },
+    "characterLimit": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "character-limit",
+      "reflect": false
+    },
+    "preventValidation": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "prevent-validation",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "charCount": {},
+    "announcement": {}
+  }; }
+  static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,118 @@
+/* --------------------------------------
+   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,
+wm-menuitem {
+  contain: content;
+  font-family: inherit;
+}
+:host .wrapper,
+wm-menuitem .wrapper {
+  display: block;
+  min-width: 8.75rem;
+  cursor: pointer;
+  padding: 1.25rem;
+  border-radius: 0px 0px 0px 0px;
+  background: #fff;
+  font-family: inherit;
+  font-weight: 500;
+  list-style: none;
+  border-bottom: 2px solid rgba(46, 27, 70, 0.05);
+  color: #575195;
+  font-weight: 700;
+}
+:host .wrapper:focus, :host .wrapper.focus,
+wm-menuitem .wrapper:focus,
+wm-menuitem .wrapper.focus {
+  outline: none;
+  background: #f4f3f6;
+}
+:host .wrapper:hover,
+wm-menuitem .wrapper:hover {
+  background: #f4f3f6;
+  outline: none;
+}
+:host .wrapper .description,
+wm-menuitem .wrapper .description {
+  color: #4a4a4a;
+  font-size: 0.875rem;
+  padding-top: 0.5rem;
+  white-space: normal;
+  font-weight: 400;
+}
+:host .wrapper[aria-disabled=true],
+wm-menuitem .wrapper[aria-disabled=true] {
+  font-style: italic;
+  color: #6b6b6b;
+}
+:host .wrapper:not(:last-child),
+wm-menuitem .wrapper:not(:last-child) {
+  border-bottom: 2px solid rgba(46, 27, 70, 0.05);
+}
+:host ::slotted,
+wm-menuitem ::slotted {
+  font-family: inherit;
+}
+:host .mdi,
+wm-menuitem .mdi {
+  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-menuitem:focus {
+  outline: none;
+  background: #f4f3f6;
+}
+
+:host([aria-disabled=true]),
+wm-menuitem[aria-disabled=true] {
+  pointer-events: none;
+}