@watermarkinsights/ripple 3.0.1-0 → 3.0.2-0

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

@@ -0,0 +1,348 @@
+import { h, Component, Prop, Watch, Event, Element, Listen, State } from "@stencil/core";
+import { debounce } from "../../global/functions";
+export class Pagination {
+  constructor() {
+    this.currentPage = 1;
+    this.totalItems = undefined;
+    this.itemsPerPage = undefined;
+    this.value = 1;
+    this.isLargeViewport = window.innerWidth > 600;
+    this.isTabbing = false;
+    this.srAnnouncement = "";
+    this.totalPages = 0;
+    this.debouncedResize = debounce(() => {
+      this.isLargeViewport = window.innerWidth > 600;
+    }, 250);
+    this.getMiddlePageNums = () => {
+      let coreBtns;
+      // if pg is 1, 2 or 3
+      if (this.currentPage < 4) {
+        coreBtns = [2, 3, 4];
+      }
+      else if (this.currentPage > this.totalPages - 3) {
+        coreBtns = [this.totalPages - 3, this.totalPages - 2, this.totalPages - 1];
+      }
+      else {
+        coreBtns = [this.currentPage - 1, this.currentPage, this.currentPage + 1];
+      }
+      return coreBtns;
+    };
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  maintainFocusOnNumberChange(el) {
+    window.requestAnimationFrame(() => {
+      switch (el) {
+        case "previous":
+          this.currentPage === 1 && this.el.shadowRoot.querySelector(`button#wm-1`).focus(); //Only shift focus from previous button to page 1 if page 1 is reached, which disables previous button. Otherwise, maintain focus on previous button.
+          break;
+        case "next":
+          this.currentPage === this.totalPages &&
+            this.el.shadowRoot.querySelector(`button#wm-${this.totalPages}`).focus(); //Only shift focus from next button if last page is reached, disabling next button. Otherwise, maintain focus on next button.
+          break;
+        case "prev-arrow":
+          this.currentPage === 1 && this.el.shadowRoot.querySelector("#next-arw").focus(); //Only shift focus if page 1 is reached, disabling previous buttons. Otherwise, maintain focus on previous buttons.
+          break;
+        case "next-arrow":
+          this.currentPage === this.totalPages && this.el.shadowRoot.querySelector("#previous-arw").focus(); //Only shift focus if last page is reached, disabling next buttons. Otherwise, maintain focus on next buttons.
+          break;
+        case "page":
+          this.el.shadowRoot.querySelector(`button#wm-${this.currentPage}`).focus();
+        default:
+          return;
+      }
+    });
+  }
+  handleResize() {
+    this.debouncedResize();
+  }
+  calculateTotalPages() {
+    this.totalPages = Math.ceil(this.totalItems / this.itemsPerPage);
+  }
+  componentWillLoad() {
+    if (!this.totalItems || !this.itemsPerPage || !this.currentPage) {
+      throw new Error("Please check the required attributes");
+    }
+    this.calculateTotalPages();
+    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+      this.toggleTabbingOn();
+    }
+  }
+  updatePageDisplayed(pageNum) {
+    this.value = pageNum;
+    this.pageClicked.emit();
+    this.srAnnouncement = `Current page, ${this.currentPage}. ${this.getCurrentPagesInView()}`;
+  }
+  displayShortPagination() {
+    let pages = [];
+    for (let i = 1; i <= this.totalPages; i++) {
+      pages.push(this.displayPageNumber(i));
+    }
+    return pages;
+  }
+  displayLongPagination() {
+    let view = [
+      this.displayPageNumber(1),
+      this.currentPage > 3 && this.displayEllipsis(),
+      ...this.getMiddlePageNums().map((page) => this.displayPageNumber(page)),
+      this.currentPage + 2 < this.totalPages && this.displayEllipsis(),
+      this.displayPageNumber(this.totalPages),
+    ];
+    return view;
+  }
+  displayPageNumber(pageNum) {
+    return (h("button", { id: `wm-${pageNum}`, class: "paginationbtn", onClick: () => {
+        this.currentPage = pageNum;
+        this.updatePageDisplayed(pageNum);
+        this.maintainFocusOnNumberChange("page");
+      }, value: pageNum, "aria-label": this.currentPage !== pageNum ? `Go to page ${pageNum}` : "", "aria-current": this.currentPage === pageNum ? "page" : undefined }, pageNum));
+  }
+  displayEllipsis() {
+    return h("span", { class: "ellipsis" }, "...");
+  }
+  // displayPageView = () => {
+  //   // let end = this.itemsPerPage! * this.currentPage;
+  //   // const begin = end - this.itemsPerPage! + 1;
+  //   // if (end > this.totalItems!) {
+  //   //   end = this.totalItems!;
+  //   // }
+  //   return <div class="pageview">{this.getCurrentView()}</div>;
+  // };
+  getCurrentPagesInView() {
+    let end = this.itemsPerPage * this.currentPage;
+    const begin = end - this.itemsPerPage + 1;
+    if (end > this.totalItems) {
+      end = this.totalItems;
+    }
+    return "Viewing " + (begin === end ? `${begin}` : `${begin}–${end} of ${this.totalItems}`);
+  }
+  renderLarge() {
+    return (h("div", { class: "largescreen" },
+      h("div", { class: "pageview" }, this.getCurrentPagesInView()),
+      h("div", { class: `pagebtncontainer ${this.isTabbing ? "user-is-tabbing" : ""}` },
+        h("button", { id: "previous", class: "paginationbtn previousbtn", onClick: () => {
+            this.currentPage = this.currentPage - 1;
+            this.updatePageDisplayed(this.currentPage);
+            this.maintainFocusOnNumberChange("previous");
+          }, disabled: this.currentPage === 1, "aria-label": "Go to previous page", "aria-controls": "status" }, "Previous"),
+        this.totalPages < 6 ? this.displayShortPagination() : this.displayLongPagination(),
+        h("button", { id: "next", class: "paginationbtn nextbtn", onClick: () => {
+            this.currentPage = this.currentPage + 1;
+            this.updatePageDisplayed(this.currentPage);
+            this.maintainFocusOnNumberChange("next");
+          }, disabled: this.currentPage === this.totalPages, "aria-label": "Go to next page", "aria-controls": "status" }, "Next"))));
+  }
+  renderSmall() {
+    return (h("div", { class: "smallscreen" },
+      h("div", { class: `pagebtncontainer ${this.isTabbing ? "user-is-tabbing" : ""}` },
+        h("button", { id: `wm-1-arw`, class: "paginationbtn", onClick: () => {
+            this.currentPage = 1;
+            this.updatePageDisplayed(1);
+            this.maintainFocusOnNumberChange("prev-arrow");
+          }, value: 1, "aria-current": this.currentPage === 1 ? "page" : undefined, "aria-label": `Go to page 1`, "aria-controls": "status", disabled: this.currentPage === 1 },
+          h("svg", { width: "16", height: "12", xmlns: "http://www.w3.org/2000/svg" },
+            h("path", { d: "M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6zM15.41 10.59L10.83 6l4.58-4.59L14 0 8 6l6 6z" }))),
+        h("button", { id: "previous-arw", class: "paginationbtn previousbtn", onClick: () => {
+            this.currentPage -= 1;
+            this.updatePageDisplayed(this.currentPage);
+            this.maintainFocusOnNumberChange("prev-arrow");
+          }, disabled: this.currentPage === 1, "aria-label": "Go to previous page" },
+          h("svg", { width: "8", height: "12", xmlns: "http://www.w3.org/2000/svg" },
+            h("path", { d: "M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6z" }))),
+        "Page ",
+        this.currentPage,
+        " of ",
+        this.totalPages,
+        h("button", { id: "next-arw", class: "paginationbtn nextbtn", onClick: () => {
+            this.currentPage += 1;
+            this.updatePageDisplayed(this.currentPage);
+            this.maintainFocusOnNumberChange("next-arrow");
+          }, disabled: this.currentPage === this.totalPages, "aria-label": "Go to next page" },
+          h("svg", { width: "8", height: "12", xmlns: "http://www.w3.org/2000/svg" },
+            h("path", { d: "M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6z" }))),
+        h("button", { id: `wm-${this.totalPages}-arw`, class: "paginationbtn", onClick: () => {
+            this.currentPage = this.totalPages;
+            this.updatePageDisplayed(this.totalPages);
+            this.maintainFocusOnNumberChange("next-arrow");
+          }, value: this.totalPages, "aria-current": this.currentPage === this.totalPages ? "page" : undefined, "aria-label": `Go to last page, page ${this.totalPages}`, "aria-controls": "status", disabled: this.currentPage === this.totalPages },
+          h("svg", { width: "17", height: "12", xmlns: "http://www.w3.org/2000/svg" },
+            h("path", { d: "M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6zM9.59 10.59L14.17 6 9.59 1.41 11 0l6 6-6 6z" }))))));
+  }
+  render() {
+    return (
+    // do not render the component if there's only one page
+    this.totalItems > this.itemsPerPage && (h("nav", { "aria-label": `Pagination Navigation. ${this.getCurrentPagesInView()}. Current page, ${this.currentPage}.` },
+      this.isLargeViewport ? this.renderLarge() : this.renderSmall(),
+      h("div", { id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
+  }
+  static get is() { return "wm-pagination"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["wm-pagination.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["wm-pagination.css"]
+  }; }
+  static get properties() { return {
+    "currentPage": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "current-page",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "totalItems": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "total-items",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "itemsPerPage": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "items-per-page",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "value": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "isLargeViewport": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-large-viewport",
+      "reflect": false,
+      "defaultValue": "window.innerWidth > 600"
+    }
+  }; }
+  static get states() { return {
+    "isTabbing": {},
+    "srAnnouncement": {}
+  }; }
+  static get events() { return [{
+      "method": "pageClicked",
+      "name": "pageClicked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "String",
+        "resolved": "String",
+        "references": {
+          "String": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "focusCurrentPage",
+      "name": "focusCurrentPage",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "totalItems",
+      "methodName": "calculateTotalPages"
+    }, {
+      "propName": "itemsPerPage",
+      "methodName": "calculateTotalPages"
+    }]; }
+  static get listeners() { return [{
+      "name": "wmUserIsTabbing",
+      "method": "toggleTabbingOn",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "wmUserIsNotTabbing",
+      "method": "toggleTabbingOff",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "resize",
+      "method": "handleResize",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }]; }
+}

package/dist/collection/components/wm-search/wm-search.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 */
+:host,
+wm-search {
+  width: 100%;
+  font-size: 0.875rem;
+}
+:host *,
+wm-search * {
+  box-sizing: border-box;
+}
+:host .wm-search-wrapper,
+wm-search .wm-search-wrapper {
+  border-radius: 3px;
+  position: relative;
+  border: 1px solid rgba(35, 35, 35, 0.6);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+:host .wm-search-wrapper .search-icon,
+wm-search .wm-search-wrapper .search-icon {
+  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;
+  font-size: 1.0625rem;
+  position: absolute;
+  left: 0.4375rem;
+}
+:host .wm-search-wrapper input,
+wm-search .wm-search-wrapper input {
+  border: none;
+  height: 40px;
+  padding: 0 1.75rem;
+  background: transparent;
+  overflow: visible;
+  width: 100%;
+  flex: 1;
+  font-family: inherit;
+}
+:host .wm-search-wrapper input:focus,
+wm-search .wm-search-wrapper input:focus {
+  outline: none;
+}
+:host .wm-search-wrapper.focus,
+wm-search .wm-search-wrapper.focus {
+  box-shadow: 0 0 0 1px #20cbd4;
+  border-color: #20cbd4;
+  border-radius: 3px;
+}
+:host .find,
+wm-search .find {
+  min-height: 3rem;
+}
+:host .find input,
+wm-search .find input {
+  padding: 16px 8px 16px 28px;
+}
+:host .find .wm-find-elements,
+wm-search .find .wm-find-elements {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding-right: 16px;
+}
+:host .find .wm-find-elements wm-button + wm-button,
+wm-search .find .wm-find-elements wm-button + wm-button {
+  margin-left: 0.25rem;
+}
+:host .find .wm-find-elements .results,
+wm-search .find .wm-find-elements .results {
+  margin-right: 0.5rem;
+  font-style: italic;
+}
+:host .sr-only,
+wm-search .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;
+}
+:host .show-for-tabbers,
+wm-search .show-for-tabbers {
+  all: unset;
+  color: #575195;
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 0.875rem;
+  margin: 10px 0;
+}
+:host .show-for-tabbers:hover,
+wm-search .show-for-tabbers:hover {
+  background: linear-gradient(#575195, #575195) no-repeat;
+  background-size: 100% 1px;
+  background-position: 0 1.2em;
+  padding-bottom: 0.2em;
+}
+:host .show-for-tabbers:focus,
+wm-search .show-for-tabbers:focus {
+  outline: none;
+  background: linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;
+  background-size: 6px 3px;
+  background-position: 0 1.2em;
+  padding-bottom: 0.2em;
+}