@ptcwebops/ptcw-design 6.4.36-beta → 6.5.0-upgrade

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

@@ -1,627 +0,0 @@
-import { h, } from "@stencil/core";
-export class PtcPagenation {
-  constructor() {
-    this.handleClick = (e) => {
-      if (e) {
-        e.preventDefault();
-      }
-      let pageLength = this.getPageLength(); //this.theme == "events" ? 3 : 2;
-      if (this.clickedPageNumber < this.getPageCount()) {
-        if (this.clickedPageNumber + 1 <= this.maxPageNumber) {
-          this.handleClickPage(e, this.clickedPageNumber + 1);
-        }
-        else {
-          this.minPageNumber = this.minPageNumber + pageLength;
-          this.clickedPageNumber = this.clickedPageNumber + 1;
-          this.appendArray = true;
-          this.pageNumbers = [...this.pageNumbers];
-          this.pageClicked.emit(this.clickedPageNumber);
-        }
-      }
-    };
-    this.handleClickPrev = (e) => {
-      if (e) {
-        e.preventDefault();
-      }
-      let pageLength = this.getPageLength(); // this.theme == "events" ? 3 : 2;
-      if (this.clickedPageNumber > 1) {
-        if (this.clickedPageNumber - 1 >= this.minPageNumber) {
-          this.handleClickPage(e, this.clickedPageNumber - 1);
-        }
-        else {
-          this.minPageNumber = this.minPageNumber - pageLength;
-          if (this.minPageNumber < 1) {
-            this.minPageNumber = 1;
-          }
-          this.clickedPageNumber = this.clickedPageNumber - 1;
-          this.appendArray = true;
-          this.pageNumbers = [...this.pageNumbers];
-          this.pageClicked.emit(this.clickedPageNumber);
-        }
-      }
-    };
-    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 Math.floor(pageCount);
-    };
-    this.getIndex = () => {
-      //var games : string[] = [];
-      //let games : HTMLElement[] = [];
-      //let items: pageItem[] = [];
-      let pageLength = this.getPageLength(); //this.theme == "events" ? 3 : 2;
-      if (this.appendArray) {
-        let pageCountVal = this.getPageCount();
-        if (this.theme == "standard") {
-          if (this.isSmallScreen) {
-            if (this.getPageCount() <= 5) {
-              this.minPageNumber = 1;
-              this.maxPageNumber = this.getPageCount();
-            }
-            else {
-              if (pageLength == 1) {
-                this.minPageNumber = this.clickedPageNumber;
-                this.maxPageNumber = this.clickedPageNumber;
-              }
-              else {
-                if (this.clickedPageNumber < pageLength) {
-                  this.minPageNumber = 1;
-                }
-                if (this.clickedPageNumber < pageCountVal - 2) {
-                  this.maxPageNumber = this.minPageNumber + 1;
-                  if (this.maxPageNumber > pageCountVal) {
-                    this.maxPageNumber = pageCountVal;
-                  }
-                }
-                else {
-                  this.maxPageNumber = pageCountVal;
-                }
-              }
-            }
-          }
-          else {
-            if (this.getPageCount() <= 6) {
-              this.minPageNumber = 1;
-              this.maxPageNumber = this.getPageCount();
-            }
-            else {
-              if (pageLength == 2) {
-                this.minPageNumber = this.clickedPageNumber - 1;
-                this.maxPageNumber = this.clickedPageNumber + 1;
-              }
-              else {
-                if (this.clickedPageNumber < pageLength) {
-                  this.minPageNumber = 1;
-                }
-                if (this.clickedPageNumber < pageCountVal - 2) {
-                  this.maxPageNumber = this.minPageNumber + 3;
-                  if (this.maxPageNumber > pageCountVal) {
-                    this.maxPageNumber = pageCountVal;
-                  }
-                }
-                else {
-                  this.maxPageNumber = pageCountVal;
-                }
-              }
-            }
-          }
-        }
-        else {
-          this.maxPageNumber =
-            pageCountVal >= this.minPageNumber + pageLength
-              ? this.minPageNumber + pageLength
-              : 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 == this.getPageCount()) {
-            id = "last";
-          }
-          // 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;
-    };
-    this.totalCount = undefined;
-    this.numberOfItems = 9;
-    this.previousValue = "Previous";
-    this.lastValue = "Next";
-    this.pageNumbers = [];
-    this.isSmallScreen = undefined;
-    this.minPageNumber = 1;
-    this.maxPageNumber = 4;
-    this.clickedPageNumber = 1;
-    this.appendArray = true;
-    this.prevArrowImg = "/dist/ptc/images/sidescroll-left-curved.svg";
-    this.nextArrowImg = "/dist/ptc/images/sidescroll-right-curved.svg";
-    this.theme = "events";
-    this.styles = undefined;
-  }
-  componentWillLoad() {
-    this.verifiyScreenSize();
-    if (this.theme == "standard") {
-      this.setupStandardPresets();
-    }
-    else {
-      this.setupEventPresets();
-    }
-  }
-  componentDidLoad() {
-    const filterContainer = this.el.shadowRoot.querySelector(".standard-filter");
-    if (!filterContainer)
-      return;
-    filterContainer.addEventListener("keydown", (event) => {
-      if (event.key === "Enter") {
-        const target = event.target;
-        if (target.tagName === "A") {
-          this.paginationItemKeydown.emit();
-        }
-      }
-    });
-  }
-  setupStandardPresets() {
-    if (this.clickedPageNumber < 1) {
-      this.clickedPageNumber == 1;
-    }
-    else if (this.clickedPageNumber > this.getPageCount()) {
-      this.clickedPageNumber = this.getPageCount();
-    }
-    if (this.isSmallScreen) {
-      if (this.clickedPageNumber == 1) {
-        this.minPageNumber = 1;
-        this.maxPageNumber = this.maxPageNumber + 1;
-      }
-      else {
-        this.maxPageNumber = this.clickedPageNumber;
-        this.minPageNumber = this.maxPageNumber - 1;
-      }
-    }
-    else {
-      if (this.clickedPageNumber == 1) {
-        this.minPageNumber = 1;
-        this.maxPageNumber = this.maxPageNumber + 3;
-      }
-      else {
-        this.maxPageNumber = this.clickedPageNumber;
-        this.minPageNumber = this.maxPageNumber - 3;
-      }
-    }
-  }
-  setupEventPresets() {
-    if (this.clickedPageNumber < 1) {
-      this.clickedPageNumber == 1;
-    }
-    if (this.clickedPageNumber > 1) {
-      if (this.clickedPageNumber > this.getPageCount()) {
-        this.clickedPageNumber = this.getPageCount();
-        this.maxPageNumber = this.getPageCount();
-        this.minPageNumber = this.clickedPageNumber - 2;
-      }
-      else {
-        this.maxPageNumber = this.clickedPageNumber + 1;
-        this.minPageNumber = this.clickedPageNumber - 1;
-      }
-    }
-  }
-  render() {
-    let pageCountValue = this.getPageCount();
-    let pageLength = this.getPageLength();
-    this.pageNumbers = [...this.getIndex()];
-    switch (this.theme) {
-      case "standard":
-        let allowSkip = pageCountValue > 6;
-        return (h("div", { class: "standard-filter" }, this.styles && h("style", null, this.styles), h("a", { id: "lastPageArrowId", href: "#", class: this.clickedPageNumber == 1
-            ? "previous-button mf-listen disabled"
-            : "previous-button mf-listen", onClick: this.handleClickPrev }, h("icon-asset", { type: "ptc", name: "chevron-down", size: "xxx-small" })), allowSkip && this.clickedPageNumber > pageLength
-          ? [
-            h("a", { href: "#", id: "pagebtn1Id", "data-url": "first", "data-page": 1, class: "standard-filter-item mf-listen", onClick: (e) => this.handlePageSkip(e, 1) }, 1),
-            h("span", { class: "standard-filter-dots" }, "..."),
-          ]
-          : null, this.pageNumbers.map((anchoritem) => {
-          return (h("a", { href: "#", id: `pagebtn` + anchoritem.dataPage + `id`, "data-url": anchoritem.id, "data-page": anchoritem.dataPage, class: anchoritem.isActive
-              ? "standard-filter-item  mf-listen active"
-              : "standard-filter-item mf-listen", onClick: (e) => this.handleClickPage(e, anchoritem.dataPage) }, anchoritem.dataPage));
-        }), allowSkip && pageCountValue > this.maxPageNumber
-          ? [
-            h("span", { class: "standard-filter-dots" }, "..."),
-            h("a", { href: "#", "data-url": "last", id: `pagebtn` + pageCountValue + `id`, "data-page": pageCountValue, class: "mf-listen standard-filter-item", onClick: (e) => this.handlePageSkip(e, pageCountValue) }, pageCountValue),
-          ]
-          : null, h("a", { id: "nextPageArrowId", href: "#", class: this.clickedPageNumber == pageCountValue
-            ? "next-button mf-listen disabled"
-            : "next-button mf-listen", onClick: this.handleClick }, h("icon-asset", { type: "ptc", name: "chevron-down", size: "xxx-small" }))));
-      case "events":
-      default:
-        return (h("div", { class: "events-filter" }, this.styles && h("style", null, this.styles), h("span", { class: this.clickedPageNumber == 1
-            ? "events-filter-item disabled prev-text"
-            : "events-filter-item prev-text" }, this.previousValue), h("img", { src: this.prevArrowImg, 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: "#", id: `pagebtn` + anchoritem.dataPage + `id`, "data-url": anchoritem.id, "data-page": anchoritem.dataPage, class: anchoritem.isActive
-              ? "events-filter-item mf-listen active"
-              : "events-filter-item mf-listen", onClick: (e) => this.handleClickPage(e, anchoritem.dataPage) }, anchoritem.dataPage));
-        }), pageCountValue > this.maxPageNumber ? (h("span", { class: "events-filter-dots" }, ". . .")) : null, h("img", { src: this.nextArrowImg, 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)));
-    }
-  }
-  handlePageSkip(e, clickedPage) {
-    if (e) {
-      e.preventDefault();
-    }
-    if (this.isSmallScreen) {
-      if (clickedPage == 1) {
-        this.minPageNumber = 1;
-        this.maxPageNumber = this.maxPageNumber + 1;
-      }
-      else {
-        this.maxPageNumber = clickedPage;
-        this.minPageNumber = this.maxPageNumber - 1;
-      }
-    }
-    else {
-      if (clickedPage == 1) {
-        this.minPageNumber = 1;
-        this.maxPageNumber = this.maxPageNumber + 3;
-      }
-      else {
-        this.maxPageNumber = clickedPage;
-        this.minPageNumber = this.maxPageNumber - 3;
-      }
-    }
-    this.clickedPageNumber = clickedPage;
-    this.appendArray = true;
-    this.pageClicked.emit(clickedPage);
-  }
-  handleClickPage(e, clickedPage) {
-    if (e) {
-      e.preventDefault();
-    }
-    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);
-  }
-  getPageLength() {
-    if (this.theme == "standard") {
-      this.appendArray = true;
-      if (this.isSmallScreen) {
-        if (this.clickedPageNumber > 2 &&
-          this.clickedPageNumber < this.getPageCount() - 1) {
-          return 1;
-        }
-        else {
-          return 2;
-        }
-      }
-      else {
-        if (this.clickedPageNumber > 3 &&
-          this.clickedPageNumber < this.getPageCount() - 1) {
-          return 2;
-        }
-        else {
-          return 4;
-        }
-      }
-    }
-    else {
-      return 3;
-    }
-  }
-  windowResize() {
-    this.verifiyScreenSize();
-  }
-  verifiyScreenSize() {
-    this.isSmallScreen = window.innerWidth <= 479;
-  }
-  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"
-      },
-      "prevArrowImg": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "prev-arrow-img",
-        "reflect": false,
-        "defaultValue": "\"/dist/ptc/images/sidescroll-left-curved.svg\""
-      },
-      "nextArrowImg": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "next-arrow-img",
-        "reflect": false,
-        "defaultValue": "\"/dist/ptc/images/sidescroll-right-curved.svg\""
-      },
-      "theme": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"events\" | \"standard\"",
-          "resolved": "\"events\" | \"standard\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "theme",
-        "reflect": false,
-        "defaultValue": "\"events\""
-      },
-      "styles": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "(optional) Injected CSS styles"
-        },
-        "attribute": "styles",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "pageNumbers": {},
-      "isSmallScreen": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "paginationItemKeydown",
-        "name": "paginationItemKeydown",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        }
-      }, {
-        "method": "pageClicked",
-        "name": "pageClicked",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "windowResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
-}