@watermarkinsights/ripple 3.0.1-0 → 3.0.2-0

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

@@ -0,0 +1,394 @@
+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
+    }]; }
+}

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

@@ -0,0 +1,217 @@
+/* --------------------------------------
+   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 */
+nav .largescreen,
+nav .smallscreen {
+  margin-bottom: 0.625rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: flex-end;
+  -ms-flex-pack: flex-end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+  font-size: 0.875rem;
+}
+nav .largescreen .pageview,
+nav .smallscreen .pageview {
+  font-size: 0.875rem;
+  margin: 0 0.625rem;
+}
+nav .largescreen .paginationbtn,
+nav .smallscreen .paginationbtn {
+  position: relative;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  -ms-transition: none;
+  -webkit-transition: none;
+  -moz-transition: none;
+  transition: none;
+  border: none;
+  color: #575195;
+  background-color: transparent;
+  margin: 0;
+  padding: 0;
+  height: 2.5rem;
+  width: 2.5rem;
+  font-family: inherit;
+  letter-spacing: 0.3px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  text-transform: none;
+}
+nav .largescreen .paginationbtn svg *,
+nav .smallscreen .paginationbtn svg * {
+  fill: #565397;
+}
+nav .largescreen .paginationbtn:hover:not([aria-current=page]):not([disabled]),
+nav .smallscreen .paginationbtn:hover:not([aria-current=page]):not([disabled]) {
+  text-decoration: underline;
+}
+nav .largescreen .paginationbtn:focus,
+nav .smallscreen .paginationbtn:focus {
+  outline: none;
+}
+nav .largescreen .paginationbtn::-moz-focus-inner,
+nav .smallscreen .paginationbtn::-moz-focus-inner {
+  border: 0;
+  outline: none;
+}
+nav .largescreen .paginationbtn[disabled],
+nav .smallscreen .paginationbtn[disabled] {
+  color: #9f9f9f;
+  pointer-events: none;
+}
+nav .largescreen .paginationbtn[disabled] svg *,
+nav .smallscreen .paginationbtn[disabled] svg * {
+  fill: #9f9f9f;
+}
+nav .largescreen .previousbtn,
+nav .smallscreen .previousbtn {
+  margin-right: 0.625rem;
+  width: auto !important;
+}
+nav .largescreen .nextbtn,
+nav .smallscreen .nextbtn {
+  margin-left: 0.625rem;
+  margin-right: 0;
+  width: auto !important;
+}
+nav .largescreen .previousbtn,
+nav .largescreen .nextbtn,
+nav .smallscreen .previousbtn,
+nav .smallscreen .nextbtn {
+  -ms-transition: none;
+  -webkit-transition: none;
+  -moz-transition: none;
+  transition: none;
+}
+nav .largescreen .ellipsis,
+nav .smallscreen .ellipsis {
+  display: inline-block;
+  width: 2.5rem;
+  text-align: center;
+}
+nav .largescreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]),
+nav .smallscreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]) {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+nav .largescreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]):before,
+nav .smallscreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]):before {
+  position: absolute;
+  content: "";
+  height: auto;
+  width: 16px;
+  top: 0;
+  bottom: 0;
+  left: 12px;
+  right: 0;
+  background: linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;
+  background-size: 6px 2px;
+  background-position: 0 2em;
+  border-radius: 0;
+  line-height: normal;
+}
+nav .largescreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]).previousbtn:focus:before,
+nav .smallscreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]).previousbtn:focus:before {
+  left: 0 !important;
+}
+nav .largescreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]).nextbtn:focus:before,
+nav .smallscreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]).nextbtn:focus:before {
+  left: 0 !important;
+}
+nav .largescreen .pagebtncontainer.user-is-tabbing [aria-current=page]:focus,
+nav .smallscreen .pagebtncontainer.user-is-tabbing [aria-current=page]:focus {
+  -webkit-box-shadow: 0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;
+  -moz-box-shadow: 0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;
+  box-shadow: 0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;
+}
+nav .largescreen .pagebtncontainer.user-is-tabbing [aria-current=page]:focus::-moz-focus-inner,
+nav .smallscreen .pagebtncontainer.user-is-tabbing [aria-current=page]:focus::-moz-focus-inner {
+  border: 0;
+}
+
+nav .largescreen .user-is-tabbing :focus:not(.-disabled):not([aria-current=page]).previousbtn:focus:before {
+  width: 56px !important;
+}
+nav .largescreen .user-is-tabbing :focus:not(.-disabled):not([aria-current=page]).nextbtn:focus:before {
+  width: 32px !important;
+}
+nav .largescreen .paginationbtn[aria-current=page] {
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  -ms-border-radius: 50%;
+  border-radius: 50%;
+  -webkit-box-shadow: 0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
+  background-color: #575195;
+  color: #fff;
+}
+nav .largescreen .paginationbtn[aria-current=page]:hover {
+  -webkit-box-shadow: 0 4px 2px 0 rgba(87, 81, 149, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0 4px 2px 0 rgba(87, 81, 149, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 0 4px 2px 0 rgba(87, 81, 149, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
+  background: #4e4986;
+}
+
+.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;
+}