@ptcwebops/ptcw-design 3.7.0 → 3.7.2

package/dist/cjs/ptc-pagenation.cjs.entry.js

@@ -2,316 +2,316 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-cd9a1b1a.js');
+const index = require('./index-4b85b38a.js');
 
-const ptcPagenationCss = "h1,h2,h3,h4,h5,h6,p,ul,li{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}: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}.standard-filter{font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-semibold);text-align:center}.standard-filter .standard-filter-item{height:2.5rem;width:2.5rem;display:inline-flex;align-items:center;justify-content:center;margin-right:0.5rem;transition:background-color var(--ptc-ease-out) var(--ptc-transition-medium);background-color:transparent;border-radius:var(--ptc-border-radius-standard);color:var(--color-gray-10);text-decoration:none}.standard-filter .standard-filter-item:hover{background-color:var(--color-gray-02);text-decoration:none}.standard-filter .standard-filter-item:focus{text-decoration:none;outline:3px solid var(--color-blue-07);outline-offset:2px}.standard-filter .standard-filter-item:active{background-color:var(--color-gray-05);text-decoration:none}.standard-filter .standard-filter-item.active{background-color:var(--color-gray-12);color:var(--color-white)}.standard-filter .standard-filter-item.active:hover{background-color:var(--color-gray-12);cursor:default}.standard-filter .standard-filter-item[data-url=last]{margin-right:1.25rem}.standard-filter .next-button,.standard-filter .previous-button{font-size:var(--ptc-font-size-x-small);font-weight:normal;display:inline-flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;border:1px solid var(--color-gray-10);border-radius:calc(var(--ptc-border-radius-standard) / 2);transition:background-color var(--ptc-ease-out) var(--ptc-transition-medium), fill var(--ptc-ease-out) var(--ptc-transition-medium), border-color var(--ptc-ease-out) var(--ptc-transition-medium)}.standard-filter .next-button:hover,.standard-filter .previous-button:hover{background-color:var(--color-gray-02);text-decoration:none}.standard-filter .next-button:active,.standard-filter .previous-button:active{background-color:var(--color-gray-05);text-decoration:none}.standard-filter .next-button:focus,.standard-filter .previous-button:focus{text-decoration:none;outline:3px solid var(--color-blue-07);outline-offset:2px}.standard-filter .next-button.disabled,.standard-filter .previous-button.disabled{cursor:default;border-color:var(--color-gray-04);color:var(--color-gray-04);fill:var(--color-gray-04)}.standard-filter .next-button.disabled:hover,.standard-filter .next-button.disabled:active,.standard-filter .previous-button.disabled:hover,.standard-filter .previous-button.disabled:active{background-color:transparent}.standard-filter .previous-button{margin-right:1.25rem}.standard-filter .previous-button icon-asset{transform:rotate(90deg);position:relative;right:2px}.standard-filter .next-button icon-asset{transform:rotate(-90deg);position:relative;left:1px}.standard-filter .standard-filter-dots{margin:0.125rem 0.5rem 0.125rem 0.125rem}@media (768px){.standard-filter .standard-filter-dots{margin:0.125rem 0.5rem 0.125rem 0.125rem}}.show-page{display:inline}.hide-page{display:none}.prev-text{display:none}.last-text{display:none}@media (min-width: 992px){.prev-text{display:inline}.last-text{display:inline}}.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-10);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)}span.events-filter-item:hover,span.events-filter-item:focus{text-decoration:none;outline:0;color:var(--color-gray-10)}span.events-filter-item.disabled{color:var(--color-white-01)}.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-10);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)}";
+const ptcPagenationCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}: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}.standard-filter{font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-semibold);text-align:center}.standard-filter .standard-filter-item{height:2.5rem;width:2.5rem;display:inline-flex;align-items:center;justify-content:center;margin-right:0.5rem;transition:background-color var(--ptc-ease-out) var(--ptc-transition-medium);background-color:transparent;border-radius:var(--ptc-border-radius-standard);color:var(--color-gray-10);text-decoration:none}.standard-filter .standard-filter-item:hover{background-color:var(--color-gray-02);text-decoration:none}.standard-filter .standard-filter-item:focus{text-decoration:none;outline:3px solid var(--color-blue-07);outline-offset:2px}.standard-filter .standard-filter-item:active{background-color:var(--color-gray-05);text-decoration:none}.standard-filter .standard-filter-item.active{background-color:var(--color-gray-12);color:var(--color-white)}.standard-filter .standard-filter-item.active:hover{background-color:var(--color-gray-12);cursor:default}.standard-filter .standard-filter-item[data-url=last]{margin-right:1.25rem}.standard-filter .next-button,.standard-filter .previous-button{font-size:var(--ptc-font-size-x-small);font-weight:normal;display:inline-flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;border:1px solid var(--color-gray-10);border-radius:calc(var(--ptc-border-radius-standard) / 2);transition:background-color var(--ptc-ease-out) var(--ptc-transition-medium), fill var(--ptc-ease-out) var(--ptc-transition-medium), border-color var(--ptc-ease-out) var(--ptc-transition-medium)}.standard-filter .next-button:hover,.standard-filter .previous-button:hover{background-color:var(--color-gray-02);text-decoration:none}.standard-filter .next-button:active,.standard-filter .previous-button:active{background-color:var(--color-gray-05);text-decoration:none}.standard-filter .next-button:focus,.standard-filter .previous-button:focus{text-decoration:none;outline:3px solid var(--color-blue-07);outline-offset:2px}.standard-filter .next-button.disabled,.standard-filter .previous-button.disabled{cursor:default;border-color:var(--color-gray-04);color:var(--color-gray-04);fill:var(--color-gray-04)}.standard-filter .next-button.disabled:hover,.standard-filter .next-button.disabled:active,.standard-filter .previous-button.disabled:hover,.standard-filter .previous-button.disabled:active{background-color:transparent}.standard-filter .previous-button{margin-right:1.25rem}.standard-filter .previous-button icon-asset{transform:rotate(90deg);position:relative;right:2px}.standard-filter .next-button icon-asset{transform:rotate(-90deg);position:relative;left:1px}.standard-filter .standard-filter-dots{margin:0.125rem 0.5rem 0.125rem 0.125rem}@media (768px){.standard-filter .standard-filter-dots{margin:0.125rem 0.5rem 0.125rem 0.125rem}}.show-page{display:inline}.hide-page{display:none}.prev-text{display:none}.last-text{display:none}@media (min-width: 992px){.prev-text{display:inline}.last-text{display:inline}}.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-10);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)}span.events-filter-item:hover,span.events-filter-item:focus{text-decoration:none;outline:0;color:var(--color-gray-10)}span.events-filter-item.disabled{color:var(--color-white-01)}.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-10);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)}";
 
-const PtcPagenation = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.pageClicked = index.createEvent(this, "pageClicked", 7);
-    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();
-    }
-  }
-  setupStandardPresets() {
-    if (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) {
-      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 (index.h("div", { class: "standard-filter" }, this.styles && index.h("style", null, this.styles), index.h("a", { href: "#", class: this.clickedPageNumber == 1 ? "previous-button disabled" : "previous-button", onClick: this.handleClickPrev }, index.h("icon-asset", { type: "ptc", name: "chevron-down", size: "xxx-small" })), allowSkip && this.clickedPageNumber > pageLength ? [
-          index.h("a", { href: "#", "data-url": "first", "data-page": 1, class: "standard-filter-item", onClick: (e) => this.handlePageSkip(e, 1) }, 1),
-          index.h("span", { class: "standard-filter-dots" }, "...")
-        ] : null, this.pageNumbers.map(anchoritem => {
-          return (index.h("a", { href: "#", "data-url": anchoritem.id, "data-page": anchoritem.dataPage, class: anchoritem.isActive ? "standard-filter-item active" : "standard-filter-item", onClick: (e) => this.handleClickPage(e, anchoritem.dataPage) }, anchoritem.dataPage));
-        }), allowSkip && pageCountValue > this.maxPageNumber ? [
-          index.h("span", { class: "standard-filter-dots" }, "..."),
-          index.h("a", { href: "#", "data-url": "last", "data-page": pageCountValue, class: "standard-filter-item", onClick: (e) => this.handlePageSkip(e, pageCountValue) }, pageCountValue)
-        ] : null, index.h("a", { href: "#", class: this.clickedPageNumber == pageCountValue ? "next-button disabled" : "next-button", onClick: this.handleClick }, index.h("icon-asset", { type: "ptc", name: "chevron-down", size: "xxx-small" }))));
-      case "events":
-      default:
-        return (index.h("div", { class: "events-filter" }, this.styles && index.h("style", null, this.styles), index.h("span", { class: this.clickedPageNumber == 1 ? "events-filter-item disabled prev-text" : "events-filter-item prev-text" }, this.previousValue), index.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 (index.h("a", { href: "#", "data-url": anchoritem.id, "data-page": anchoritem.dataPage, class: anchoritem.isActive ? "events-filter-item active" : "events-filter-item", onClick: (e) => this.handleClickPage(e, anchoritem.dataPage) }, anchoritem.dataPage));
-        }), pageCountValue > this.maxPageNumber ? (index.h("span", { class: "events-filter-dots" }, ". . .")) : null, index.h("img", { src: this.nextArrowImg, onClick: this.handleClick, class: this.clickedPageNumber == pageCountValue ? "pagenation-arrow last-page events-disable-arrows" : "pagenation-arrow last-page" }), index.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;
-  }
-};
+const PtcPagenation = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.pageClicked = index.createEvent(this, "pageClicked", 7);
+    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();
+    }
+  }
+  setupStandardPresets() {
+    if (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) {
+      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 (index.h("div", { class: "standard-filter" }, this.styles && index.h("style", null, this.styles), index.h("a", { href: "#", class: this.clickedPageNumber == 1 ? "previous-button disabled" : "previous-button", onClick: this.handleClickPrev }, index.h("icon-asset", { type: "ptc", name: "chevron-down", size: "xxx-small" })), allowSkip && this.clickedPageNumber > pageLength ? [
+          index.h("a", { href: "#", "data-url": "first", "data-page": 1, class: "standard-filter-item", onClick: (e) => this.handlePageSkip(e, 1) }, 1),
+          index.h("span", { class: "standard-filter-dots" }, "...")
+        ] : null, this.pageNumbers.map(anchoritem => {
+          return (index.h("a", { href: "#", "data-url": anchoritem.id, "data-page": anchoritem.dataPage, class: anchoritem.isActive ? "standard-filter-item active" : "standard-filter-item", onClick: (e) => this.handleClickPage(e, anchoritem.dataPage) }, anchoritem.dataPage));
+        }), allowSkip && pageCountValue > this.maxPageNumber ? [
+          index.h("span", { class: "standard-filter-dots" }, "..."),
+          index.h("a", { href: "#", "data-url": "last", "data-page": pageCountValue, class: "standard-filter-item", onClick: (e) => this.handlePageSkip(e, pageCountValue) }, pageCountValue)
+        ] : null, index.h("a", { href: "#", class: this.clickedPageNumber == pageCountValue ? "next-button disabled" : "next-button", onClick: this.handleClick }, index.h("icon-asset", { type: "ptc", name: "chevron-down", size: "xxx-small" }))));
+      case "events":
+      default:
+        return (index.h("div", { class: "events-filter" }, this.styles && index.h("style", null, this.styles), index.h("span", { class: this.clickedPageNumber == 1 ? "events-filter-item disabled prev-text" : "events-filter-item prev-text" }, this.previousValue), index.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 (index.h("a", { href: "#", "data-url": anchoritem.id, "data-page": anchoritem.dataPage, class: anchoritem.isActive ? "events-filter-item active" : "events-filter-item", onClick: (e) => this.handleClickPage(e, anchoritem.dataPage) }, anchoritem.dataPage));
+        }), pageCountValue > this.maxPageNumber ? (index.h("span", { class: "events-filter-dots" }, ". . .")) : null, index.h("img", { src: this.nextArrowImg, onClick: this.handleClick, class: this.clickedPageNumber == pageCountValue ? "pagenation-arrow last-page events-disable-arrows" : "pagenation-arrow last-page" }), index.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;
+  }
+};
 PtcPagenation.style = ptcPagenationCss;
 
 exports.ptc_pagenation = PtcPagenation;