@watermarkinsights/ripple 0.0.0 → 0.0.1

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

@@ -1,220 +0,0 @@
-@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

@@ -1,302 +0,0 @@
-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

@@ -1,118 +0,0 @@
-/* --------------------------------------
-   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;
-}