@watermarkinsights/ripple 0.0.0 → 0.1.0-alpha.0

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

@@ -1,162 +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(: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;
-}

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

@@ -1,394 +0,0 @@
-import { h, Component, Element, Event, Host, Listen, Prop, Watch } from "@stencil/core";
-export class Option {
-  constructor() {
-    this.subinfo = undefined;
-    this.disabled = false;
-    this.selected = false;
-    this.focused = false;
-  }
-  get isMultiChild() {
-    var _a;
-    return (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.multiple;
-  }
-  handleKeydown(ev) {
-    switch (ev.keyCode) {
-      // Arrow Up
-      case 38:
-        ev.preventDefault();
-        this.wmKeyUpPressed.emit();
-        break;
-      // Arrow Down
-      case 40:
-        ev.preventDefault();
-        this.wmKeyDownPressed.emit(this.el);
-        break;
-      // Enter
-      case 13:
-        ev.preventDefault();
-        if (!this.disabled) {
-          this.el.click();
-          this.wmEnterKeyPressed.emit(this.el);
-        }
-        break;
-      // Space
-      case 32:
-        ev.preventDefault();
-        this.el.click();
-        break;
-      // Escape
-      case 27:
-        ev.preventDefault();
-        ev.stopPropagation(); // for instance if select is in a modal, esc should close the select but not the modal
-        this.wmEscKeyPressed.emit();
-        break;
-      // Home
-      case 36:
-        ev.preventDefault();
-        this.wmHomeKeyPressed.emit();
-        break;
-      // End
-      case 35:
-        ev.preventDefault();
-        this.wmEndKeyPressed.emit();
-        break;
-      // Tab
-      case 9:
-        this.wmTabKeyPressed.emit();
-        break;
-      default:
-        this.wmLetterPressed.emit(ev.key);
-    }
-  }
-  handleSelection() {
-    if (!this.disabled) {
-      this.wmOptionSelected.emit();
-      // the parent wm-select is in charge of the actual selection
-    }
-  }
-  syncAriaSelected() {
-    // this function only keeps the aria-selected attr in sync with the selected prop
-    // all the logic for selecting / deselecting happens in the parent wm-select
-    this.selected ? this.el.setAttribute("aria-selected", "true") : this.el.removeAttribute("aria-selected");
-  }
-  syncAriaDisabled() {
-    this.disabled ? this.el.setAttribute("aria-disabled", "true") : this.el.removeAttribute("aria-disabled");
-  }
-  focusHandler(newValue) {
-    if (newValue)
-      this.el.focus();
-  }
-  updateDisabledOnClick() {
-    if (this.disabled && this.el.onclick) {
-      this.onClickFunc = this.el.onclick;
-      this.el.onclick = null;
-    }
-    else if (!this.disabled && this.onClickFunc) {
-      this.el.onclick = this.onClickFunc;
-    }
-  }
-  componentWillLoad() {
-    this.syncAriaSelected();
-    this.syncAriaDisabled();
-    this.updateDisabledOnClick();
-  }
-  render() {
-    return (h(Host, { role: "option", tabindex: this.focused ? 0 : -1, class: `${this.subinfo ? "hassubinfo" : ""} ${this.isMultiChild ? "multi-option" : ""}` },
-      h("div", { class: `option-wrapper ${this.isMultiChild ? "checkbox" : ""}` },
-        h("slot", null)),
-      h("div", { class: "subinfo" }, this.subinfo)));
-  }
-  static get is() { return "wm-option"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["wm-option.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["wm-option.css"]
-  }; }
-  static get properties() { return {
-    "value": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | null",
-        "resolved": "null | string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "value",
-      "reflect": false
-    },
-    "subinfo": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "subinfo",
-      "reflect": false,
-      "defaultValue": "undefined"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "selected": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "selected",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "focused": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "focused",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get events() { return [{
-      "method": "wmOptionSelected",
-      "name": "wmOptionSelected",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "HTMLWmOptionElement",
-        "resolved": "HTMLWmOptionElement",
-        "references": {
-          "HTMLWmOptionElement": {
-            "location": "global"
-          }
-        }
-      }
-    }, {
-      "method": "wmKeyUpPressed",
-      "name": "wmKeyUpPressed",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "HTMLWmOptionElement",
-        "resolved": "HTMLWmOptionElement",
-        "references": {
-          "HTMLWmOptionElement": {
-            "location": "global"
-          }
-        }
-      }
-    }, {
-      "method": "wmKeyDownPressed",
-      "name": "wmKeyDownPressed",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "HTMLWmOptionElement",
-        "resolved": "HTMLWmOptionElement",
-        "references": {
-          "HTMLWmOptionElement": {
-            "location": "global"
-          }
-        }
-      }
-    }, {
-      "method": "wmEscKeyPressed",
-      "name": "wmEscKeyPressed",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "HTMLWmOptionElement",
-        "resolved": "HTMLWmOptionElement",
-        "references": {
-          "HTMLWmOptionElement": {
-            "location": "global"
-          }
-        }
-      }
-    }, {
-      "method": "wmHomeKeyPressed",
-      "name": "wmHomeKeyPressed",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "HTMLWmOptionElement",
-        "resolved": "HTMLWmOptionElement",
-        "references": {
-          "HTMLWmOptionElement": {
-            "location": "global"
-          }
-        }
-      }
-    }, {
-      "method": "wmEndKeyPressed",
-      "name": "wmEndKeyPressed",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "HTMLWmOptionElement",
-        "resolved": "HTMLWmOptionElement",
-        "references": {
-          "HTMLWmOptionElement": {
-            "location": "global"
-          }
-        }
-      }
-    }, {
-      "method": "wmTabKeyPressed",
-      "name": "wmTabKeyPressed",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "HTMLWmOptionElement",
-        "resolved": "HTMLWmOptionElement",
-        "references": {
-          "HTMLWmOptionElement": {
-            "location": "global"
-          }
-        }
-      }
-    }, {
-      "method": "wmEnterKeyPressed",
-      "name": "wmEnterKeyPressed",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "HTMLWmOptionElement",
-        "resolved": "HTMLWmOptionElement",
-        "references": {
-          "HTMLWmOptionElement": {
-            "location": "global"
-          }
-        }
-      }
-    }, {
-      "method": "wmLetterPressed",
-      "name": "wmLetterPressed",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "selected",
-      "methodName": "syncAriaSelected"
-    }, {
-      "propName": "disabled",
-      "methodName": "syncAriaDisabled"
-    }, {
-      "propName": "focused",
-      "methodName": "focusHandler"
-    }, {
-      "propName": "disabled",
-      "methodName": "updateDisabledOnClick"
-    }]; }
-  static get listeners() { return [{
-      "name": "keydown",
-      "method": "handleKeydown",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "click",
-      "method": "handleSelection",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
-}