@ptcwebops/ptcw-design 6.0.12 → 6.1.0

package/dist/esm/ptc-filter-tag_2.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-0bf594c4.js';
 
-const ptcFilterTagCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{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,ptc-square-card,.hyphenate-text,ptc-footer{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}}.ptc-filter-tag{display:block;cursor:pointer;position:relative;margin:0.25rem}.ptc-filter-tag.bubble{margin:0 0.25rem;display:inline-block;color:var(--color-gray-12);font-family:Raleway;font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-semibold);letter-spacing:var(--ptc-letter-spacing-normal);line-height:1.125rem;text-align:left;align-items:center;transition:border-color ease-out 250ms;border:1px solid var(--color-gray-05);border-radius:999px;padding:0.375rem 1.875rem 0.375rem 0.875rem;background:var(--color-white)}.ptc-filter-tag.bubble:hover{border:1px solid var(--color-gray-12)}.ptc-filter-tag.bubble .cls{display:block;position:absolute;top:0.35rem;right:0.8rem}.ptc-filter-tag.link,.ptc-filter-tag.link-lg{display:inline-block;font-family:Raleway;color:var(--color-gray-12);font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-denser);letter-spacing:var(--ptc-letter-spacing-normal);text-align:right;border-bottom:1px solid transparent;background:var(--color-white)}.ptc-filter-tag.link:hover,.ptc-filter-tag.link-lg:hover{text-decoration:underline}.ptc-filter-tag.link .cls,.ptc-filter-tag.link-lg .cls{display:none}.ptc-filter-tag.link-lg{font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-bold)}.ptc-filter-tag.button{display:inline-block;background-color:var(--color-gray-12);border-radius:var(--ptc-border-radius-standard);padding:0.625rem 1rem;font-family:\"Raleway\";font-style:normal;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-semibold);line-height:var(--ptc-line-height-denser);color:var(--color-white);transition:border-color ease-out 250ms}.ptc-filter-tag.button:hover{background-color:var(--color-gray-10)}.ptc-filter-tag.button:active{transition:none;background-color:var(--color-black)}.ptc-filter-tag.button .cls{display:none}.ptc-filter-tag.standard{display:inline-flex;background:var(--color-gray-12);font-family:\"Raleway\";font-style:normal;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-denser);color:var(--color-green-07);background-color:transparent}.ptc-filter-tag.standard .cls{display:block;margin-left:0.25rem}.ptc-filter-tag.standard:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}";
+const ptcFilterTagCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{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,ptc-square-card,.hyphenate-text,ptc-footer{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}}.ptc-filter-tag{display:block;cursor:pointer;position:relative;margin:0.25rem}.ptc-filter-tag:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}.ptc-filter-tag.bubble{margin:0 0.25rem;display:inline-block;color:var(--color-gray-12);font-family:Raleway;font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-semibold);letter-spacing:var(--ptc-letter-spacing-normal);line-height:1.125rem;text-align:left;align-items:center;transition:border-color ease-out 250ms;border:1px solid var(--color-gray-05);border-radius:999px;padding:0.375rem 1.875rem 0.375rem 0.875rem;background:var(--color-white)}.ptc-filter-tag.bubble:hover{border:1px solid var(--color-gray-12)}.ptc-filter-tag.bubble .cls{display:block;position:absolute;top:0.35rem;right:0.8rem}.ptc-filter-tag.link,.ptc-filter-tag.link-lg{display:inline-block;font-family:Raleway;color:var(--color-gray-12);font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-denser);letter-spacing:var(--ptc-letter-spacing-normal);text-align:right;border-bottom:1px solid transparent;background:var(--color-white)}.ptc-filter-tag.link:hover,.ptc-filter-tag.link-lg:hover{text-decoration:underline}.ptc-filter-tag.link .cls,.ptc-filter-tag.link-lg .cls{display:none}.ptc-filter-tag.link-lg{font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-bold)}.ptc-filter-tag.button{display:inline-block;background-color:var(--color-gray-12);border-radius:var(--ptc-border-radius-standard);padding:0.625rem 1rem;font-family:\"Raleway\";font-style:normal;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-semibold);line-height:var(--ptc-line-height-denser);color:var(--color-white);transition:border-color ease-out 250ms}.ptc-filter-tag.button:hover{background-color:var(--color-gray-10)}.ptc-filter-tag.button:active{transition:none;background-color:var(--color-black)}.ptc-filter-tag.button .cls{display:none}.ptc-filter-tag.standard{display:inline-flex;background:var(--color-gray-12);font-family:\"Raleway\";font-style:normal;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-denser);color:var(--color-green-07);background-color:transparent}.ptc-filter-tag.standard .cls{display:block;margin-left:0.25rem}.ptc-filter-tag.standard:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}";
 
 const PtcFilterTag = class {
   constructor(hostRef) {
@@ -9,6 +9,14 @@ const PtcFilterTag = class {
     this.handleClick = () => {
       this.clicked.emit(this);
     };
+    this.handleKeyDown = (e) => {
+      switch (e.key) {
+        case "Enter": {
+          this.clicked.emit(this);
+          break;
+        }
+      }
+    };
     this.theme = 'bubble';
     this.iconColorMap = undefined;
     this.styles = undefined;
@@ -62,7 +70,7 @@ const PtcFilterTag = class {
 };
 PtcFilterTag.style = ptcFilterTagCss;
 
-const ptcPagenationCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{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,ptc-square-card,.hyphenate-text,ptc-footer{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;transition:none}.standard-filter .standard-filter-item.active{transition:none;background-color:var(--color-gray-12);color:var(--color-white)}.standard-filter .standard-filter-item.active:hover{transition:background-color var(--ptc-ease-out) var(--ptc-transition-medium);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{transition:none;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,ptc-square-card,.hyphenate-text,ptc-footer{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,ptc-square-card,.hyphenate-text,ptc-footer{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;border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}.standard-filter .standard-filter-item:active{background-color:var(--color-gray-05);text-decoration:none;transition:none}.standard-filter .standard-filter-item.active{transition:none;background-color:var(--color-gray-12);color:var(--color-white)}.standard-filter .standard-filter-item.active:hover{transition:background-color var(--ptc-ease-out) var(--ptc-transition-medium);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{transition:none;background-color:var(--color-gray-05);text-decoration:none}.standard-filter .next-button:focus,.standard-filter .previous-button:focus{text-decoration:none;border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}.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) {
@@ -278,19 +286,19 @@ const PtcPagenation = class {
     switch (this.theme) {
       case "standard":
         let allowSkip = pageCountValue > 6;
-        return (h("div", { class: "standard-filter" }, this.styles && h("style", null, this.styles), h("a", { href: "#", class: this.clickedPageNumber == 1 ? "previous-button disabled" : "previous-button", onClick: this.handleClickPrev }, h("icon-asset", { type: "ptc", name: "chevron-down", size: "xxx-small" })), allowSkip && this.clickedPageNumber > pageLength ? [
-          h("a", { href: "#", "data-url": "first", "data-page": 1, class: "standard-filter-item", onClick: (e) => this.handlePageSkip(e, 1) }, 1),
+        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: "#", "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));
+          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", "data-page": pageCountValue, class: "standard-filter-item", onClick: (e) => this.handlePageSkip(e, pageCountValue) }, pageCountValue)
-        ] : null, h("a", { href: "#", class: this.clickedPageNumber == pageCountValue ? "next-button disabled" : "next-button", onClick: this.handleClick }, h("icon-asset", { type: "ptc", name: "chevron-down", size: "xxx-small" }))));
+          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: "#", "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));
+          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)));
     }
   }