@ptcwebops/ptcw-design 0.5.7 → 0.5.8

package/dist/collection/components/ptc-overlay/ptc-overlay.js

@@ -1,99 +1,99 @@
-import { Component, Host, h, Prop } from '@stencil/core';
-export class PtcOverlay {
-  constructor() {
-    /**
-     * Overlay z-index
-     */
-    this.overlayZIndex = 'z-index-auto';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return h(Host, { class: classMap });
-  }
-  getCssClassMap() {
-    return {
-      [this.filterColor]: !!this.filterColor ? true : false,
-      [this.borderRadius]: !!this.borderRadius ? true : false,
-      [this.overlayZIndex]: true
-    };
-  }
-  static get is() { return "ptc-overlay"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-overlay.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-overlay.css"]
-  }; }
-  static get properties() { return {
-    "filterColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'blue' | 'red' | 'orange' | 'green' | 'black-1' | 'black-2' | 'black-3' | 'slate-grey'",
-        "resolved": "\"black-1\" | \"black-2\" | \"black-3\" | \"blue\" | \"green\" | \"orange\" | \"red\" | \"slate-grey\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Filter Color"
-      },
-      "attribute": "filter-color",
-      "reflect": false
-    },
-    "borderRadius": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'radius-standard' | 'radius-large'",
-        "resolved": "\"radius-large\" | \"radius-standard\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Overlay border shape"
-      },
-      "attribute": "border-radius",
-      "reflect": false
-    },
-    "overlayZIndex": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'z-index-auto' | 'z-index-n-2' | 'z-index-n-1' | 'z-index-p-1' | 'z-index-p-2'",
-        "resolved": "\"z-index-auto\" | \"z-index-n-1\" | \"z-index-n-2\" | \"z-index-p-1\" | \"z-index-p-2\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Overlay z-index"
-      },
-      "attribute": "overlay-z-index",
-      "reflect": false,
-      "defaultValue": "'z-index-auto'"
-    },
-    "styles": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Injected Styles"
-      },
-      "attribute": "styles",
-      "reflect": false
-    }
-  }; }
-}
+import { Component, Host, h, Prop } from '@stencil/core';
+export class PtcOverlay {
+  constructor() {
+    /**
+     * Overlay z-index
+     */
+    this.overlayZIndex = 'z-index-auto';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return h(Host, { class: classMap });
+  }
+  getCssClassMap() {
+    return {
+      [this.filterColor]: !!this.filterColor ? true : false,
+      [this.borderRadius]: !!this.borderRadius ? true : false,
+      [this.overlayZIndex]: true
+    };
+  }
+  static get is() { return "ptc-overlay"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-overlay.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-overlay.css"]
+  }; }
+  static get properties() { return {
+    "filterColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'blue' | 'red' | 'orange' | 'green' | 'black-1' | 'black-2' | 'black-3' | 'slate-grey'",
+        "resolved": "\"black-1\" | \"black-2\" | \"black-3\" | \"blue\" | \"green\" | \"orange\" | \"red\" | \"slate-grey\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Filter Color"
+      },
+      "attribute": "filter-color",
+      "reflect": false
+    },
+    "borderRadius": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'radius-standard' | 'radius-large'",
+        "resolved": "\"radius-large\" | \"radius-standard\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Overlay border shape"
+      },
+      "attribute": "border-radius",
+      "reflect": false
+    },
+    "overlayZIndex": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'z-index-auto' | 'z-index-n-2' | 'z-index-n-1' | 'z-index-p-1' | 'z-index-p-2'",
+        "resolved": "\"z-index-auto\" | \"z-index-n-1\" | \"z-index-n-2\" | \"z-index-p-1\" | \"z-index-p-2\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Overlay z-index"
+      },
+      "attribute": "overlay-z-index",
+      "reflect": false,
+      "defaultValue": "'z-index-auto'"
+    },
+    "styles": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Injected Styles"
+      },
+      "attribute": "styles",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/ptc-pagenation/ptc-pagenation.css

@@ -0,0 +1,113 @@
+:host {
+  display: block;
+}
+
+.events-filter {
+  padding: 20px 32px 20px 0;
+  text-align: center;
+}
+@media (min-width: 992px) {
+  .events-filter {
+    padding: 10px 40px 10px 0px;
+  }
+}
+.events-filter .pagenation-arrow {
+  width: 40px;
+  height: 40px;
+  margin: 0 15px;
+  vertical-align: middle;
+}
+
+.show-page {
+  display: inline;
+}
+
+.hide-page {
+  display: none;
+}
+
+.prev-text {
+  display: none;
+}
+
+.last-text {
+  display: none;
+}
+
+@media (min-width: 992px) {
+  .prev-text {
+    display: inline;
+    cursor: pointer;
+  }
+
+  .last-text {
+    display: inline;
+    cursor: pointer;
+  }
+}
+.events-filter-item {
+  font-family: var(--ptc-font-latin);
+  font-size: var(--ptc-font-size-xx-small);
+  font-weight: var(--ptc-font-weight-semibold);
+  font-stretch: normal;
+  font-style: var(--ptc-font-style-normal);
+  line-height: var(--ptc-line-height-denser);
+  letter-spacing: var(--ptc-letter-spacing-normal);
+  text-align: left;
+  padding: 6px;
+  color: var(--color-gray-13);
+  text-decoration: none;
+}
+
+.events-filter .active {
+  font-family: var(--ptc-font-latin);
+  border-bottom: 2px solid var(--color-green-13);
+  font-weight: var(--ptc-font-weight-semibold);
+}
+
+.events-filter-item:hover, .events-filter-item:focus {
+  text-decoration: none;
+  outline: 0;
+  color: var(--color-green-14);
+}
+
+.events-filter .disabled {
+  color: var(--color-white-01);
+}
+
+.events-filter-dots {
+  padding: 0rem;
+  font-weight: var(--ptc-font-weight-extrabold);
+  font-family: var(--ptc-font-latin);
+  font-size: var(--ptc-font-size-xx-small);
+  font-stretch: normal;
+  font-style: var(--ptc-font-style-normal);
+  line-height: var(--ptc-line-height-denser);
+  letter-spacing: var(--ptc-letter-spacing-normal);
+  text-align: left;
+  color: var(--color-gray-13);
+  text-decoration: none;
+}
+
+.events-disable-arrows {
+  opacity: 0.35;
+}
+
+.events-enable-arrows {
+  opacity: 1;
+}
+
+.events-small-dots {
+  height: 60px;
+  margin-top: -25px;
+}
+@media (min-width: 992px) {
+  .events-small-dots {
+    height: 80px;
+    margin-top: -40px;
+  }
+}
+
+.last-page {
+  transform: rotate(180deg);
+}

package/dist/collection/components/ptc-pagenation/ptc-pagenation.js

@@ -0,0 +1,277 @@
+import { Component, State, h, Prop, Event } from '@stencil/core';
+export class PtcPagenation {
+  constructor() {
+    this.numberOfItems = 9; //page size
+    this.previousValue = "Previous";
+    this.lastValue = "Next";
+    this.pageNumbers = [];
+    this.minPageNumber = 1;
+    this.maxPageNumber = 4;
+    this.clickedPageNumber = 1;
+    this.appendArray = true;
+    this.handleClick = () => {
+      if (this.clickedPageNumber < this.getPageCount()) {
+        if (this.clickedPageNumber + 1 <= this.maxPageNumber) {
+          this.handleClickPage(this.clickedPageNumber + 1);
+        }
+        else {
+          this.minPageNumber = this.minPageNumber + 4;
+          this.clickedPageNumber = this.clickedPageNumber + 1;
+          this.appendArray = true;
+          this.pageNumbers = [...this.pageNumbers];
+        }
+      }
+    };
+    this.handleClickPrev = () => {
+      if (this.clickedPageNumber > 1) {
+        if (this.clickedPageNumber - 1 >= this.minPageNumber) {
+          this.handleClickPage(this.clickedPageNumber - 1);
+        }
+        else {
+          this.minPageNumber = this.minPageNumber - 4;
+          this.clickedPageNumber = this.clickedPageNumber - 1;
+          this.appendArray = true;
+          this.pageNumbers = [...this.pageNumbers];
+        }
+      }
+    };
+    this.getPageCount = () => {
+      let pageCount = 0;
+      if (this.totalCount != 0) {
+        if (this.totalCount % this.numberOfItems == 0) {
+          pageCount = this.totalCount / this.numberOfItems;
+        }
+        else {
+          pageCount = this.totalCount / this.numberOfItems + 1;
+        }
+      }
+      return pageCount;
+    };
+    this.getIndex = (appendarr) => {
+      //var games : string[] = [];
+      //let games : HTMLElement[] = [];
+      //let items: pageItem[] = [];
+      if (appendarr) {
+        let pageCountVal = this.getPageCount();
+        this.maxPageNumber = pageCountVal >= this.minPageNumber + 3 ? this.minPageNumber + 3 : pageCountVal;
+        this.pageNumbers = [];
+        for (let i = this.minPageNumber; i <= this.maxPageNumber; i++) {
+          let id = i + "Id";
+          let isItemActive = false;
+          if (i == this.clickedPageNumber) {
+            isItemActive = true;
+          }
+          // if (i > 4)
+          // {
+          //     hideShowPageClass = " hide-page";
+          // }
+          const newPageItem = {
+            id: id,
+            isActive: isItemActive,
+            dataPage: i
+          };
+          this.pageNumbers = [...this.pageNumbers, newPageItem];
+          //games.push(<a href="#" data-url={id} data-page={i} class={classValue}>i</a>);
+        }
+      }
+      return this.pageNumbers;
+    };
+  }
+  render() {
+    let pageCountValue = this.getPageCount();
+    this.pageNumbers = [...this.getIndex(this.appendArray)];
+    return (h("div", { class: "events-filter" },
+      h("span", { class: this.clickedPageNumber == 1 ? "events-filter-item disabled prev-text" : "events-filter-item prev-text" }, this.previousValue),
+      h("img", { src: "/dist/ptc/images/sidescroll-left-curved.svg", onClick: this.handleClickPrev, class: this.clickedPageNumber == 1 ? "pagenation-arrow prev-page events-disable-arrows" : "pagenation-arrow prev-page" }),
+      this.pageNumbers.map(anchoritem => {
+        return (h("a", { href: "#", "data-url": anchoritem.id, "data-page": anchoritem.dataPage, class: anchoritem.isActive ? "events-filter-item active" : "events-filter-item", onClick: () => this.handleClickPage(anchoritem.dataPage) }, anchoritem.dataPage));
+      }),
+      pageCountValue > this.maxPageNumber ? (h("span", { class: "events-filter-dots" }, ". . .")) : null,
+      h("img", { src: "/dist/ptc/images/sidescroll-right-curved.svg", onClick: this.handleClick, class: this.clickedPageNumber == pageCountValue ? "pagenation-arrow last-page events-disable-arrows" : "pagenation-arrow last-page" }),
+      h("span", { class: this.clickedPageNumber == pageCountValue ? "events-filter-item disabled last-text" : "events-filter-item last-text" }, this.lastValue)));
+  }
+  handleClickPage(clickedPage) {
+    this.clickedPageNumber = clickedPage;
+    let newArray = [];
+    this.appendArray = false;
+    newArray = [...this.pageNumbers];
+    newArray.map(item => {
+      item.dataPage == clickedPage ? item.isActive = true : item.isActive = false;
+    });
+    this.pageNumbers = null;
+    this.pageNumbers = [...newArray];
+    this.pageClicked.emit(clickedPage);
+  }
+  static get is() { return "ptc-pagenation"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-pagenation.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-pagenation.css"]
+  }; }
+  static get properties() { return {
+    "totalCount": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "total-count",
+      "reflect": false
+    },
+    "numberOfItems": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "number-of-items",
+      "reflect": false,
+      "defaultValue": "9"
+    },
+    "previousValue": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "previous-value",
+      "reflect": false,
+      "defaultValue": "\"Previous\""
+    },
+    "lastValue": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "last-value",
+      "reflect": false,
+      "defaultValue": "\"Next\""
+    },
+    "minPageNumber": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "min-page-number",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "maxPageNumber": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "max-page-number",
+      "reflect": false,
+      "defaultValue": "4"
+    },
+    "clickedPageNumber": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "clicked-page-number",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "appendArray": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "append-array",
+      "reflect": false,
+      "defaultValue": "true"
+    }
+  }; }
+  static get states() { return {
+    "pageNumbers": {}
+  }; }
+  static get events() { return [{
+      "method": "pageClicked",
+      "name": "pageClicked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
+    }]; }
+}