@ptcwebops/ptcw-design 5.7.9 → 5.8.1

package/dist/esm/ptc-dynamic-card.entry.js

@@ -1,52 +1,95 @@
-import { r as registerInstance, a as getAssetPath, h, H as Host, g as getElement } from './index-c83db688.js';
+import { r as registerInstance, c as createEvent, a as getAssetPath, h, H as Host, g as getElement } from './index-c83db688.js';
 
-const ptcDynamicCardCss = "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}:host(.sequential) .card-wrapper{position:relative;cursor:pointer}:host(.sequential) .card{background-color:var(--color-gray-12);overflow:hidden}:host(.sequential) .card:focus-visible{transition:none;border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host(.sequential) .card-mobile,:host(.sequential) .card-dt-open{display:block}:host(.sequential) .card-mobile ptc-card-content,:host(.sequential) .card-dt-open ptc-card-content{display:flex;flex-basis:38%;justify-content:flex-start;align-items:center;padding:var(--ptc-element-spacing-06)}@media only screen and (min-width: 1200px){:host(.sequential) .card-mobile ptc-card-content,:host(.sequential) .card-dt-open ptc-card-content{height:unset;flex:0 0 310px}}:host(.sequential) .card-mobile ptc-picture,:host(.sequential) .card-dt-open ptc-picture{flex:1 1 auto}:host(.sequential) .card-mobile .card-title h3,:host(.sequential) .card-dt-open .card-title h3{color:var(--color-white);font-size:var(--ptc-font-size-medium);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-densest);margin-bottom:0rem;margin-block-start:0rem;letter-spacing:var(--ptc-letter-spacing-normal)}@media only screen and (min-width: 768px){:host(.sequential) .card-mobile .card-title h3,:host(.sequential) .card-dt-open .card-title h3{font-size:var(--ptc-font-size-large)}}:host(.sequential) .card-mobile .card-content,:host(.sequential) .card-dt-open .card-content{margin-top:var(--ptc-element-spacing-03)}:host(.sequential) .card-mobile{max-width:320px;min-width:226px;position:relative}@media only screen and (min-width: 480px){:host(.sequential) .card-mobile{max-width:350px}}:host(.sequential) .card-mobile::before{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:5px;transition:background-color var(--ptc-transition-medium) var(--ptc-ease-out);background-color:transparent}:host(.sequential) .card-mobile ptc-card-content{align-items:flex-start}:host(.sequential) .card-mobile:focus-visible{transition:none;border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host(.sequential) .card-dt-closed{width:135px;height:424px;position:relative}:host(.sequential) .card-dt-closed .closed-content{position:absolute;width:100%;height:100%;top:0;display:flex;align-items:center;justify-content:center}:host(.sequential) .card-dt-closed .card-title{text-align:center}:host(.sequential) .card-dt-closed .card-title h2{color:var(--color-white);font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-densest);margin-bottom:0rem;margin-block-start:0rem;letter-spacing:var(--ptc-letter-spacing-normal);padding-left:var(--ptc-element-spacing-02);padding-right:var(--ptc-element-spacing-02)}@media only screen and (min-width: 1440px){:host(.sequential) .card-dt-closed .card-title h2{font-size:var(--ptc-font-size-small)}}:host(.sequential) .card-dt-closed:focus-visible{transition:none;border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline);z-index:1}:host(.sequential) .card-dt-open{border-top:5px solid var(--color-green-05);display:flex;max-width:790px;height:480px;transition:width var(--ptc-transition-x-fast) var(--ptc-ease-out)}@media only screen and (min-width: 1440px){:host(.sequential) .card-dt-open{max-width:825px}}:host(.sequential) .card-dt-open:focus-visible{transition:none;border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline);z-index:1}:host(.sequential):host(.active) .card-mobile::before{background-color:var(--color-green-05)}";
+const ptcDynamicCardCss = "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}:host(.sequential) .card-wrapper{position:relative;cursor:pointer;outline:none}:host(.sequential) .card-wrapper:focus-visible{transition:none;border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline);z-index:1}:host(.sequential) .card{background-color:var(--color-gray-12);overflow:hidden}:host(.sequential) .card-mobile,:host(.sequential) .card-dt-open{display:block}:host(.sequential) .card-mobile ptc-card-content,:host(.sequential) .card-dt-open ptc-card-content{display:flex;flex-basis:38%;justify-content:flex-start;align-items:center;padding:var(--ptc-element-spacing-06)}@media only screen and (min-width: 1200px){:host(.sequential) .card-mobile ptc-card-content,:host(.sequential) .card-dt-open ptc-card-content{height:unset;flex:0 0 310px}}:host(.sequential) .card-mobile ptc-picture,:host(.sequential) .card-dt-open ptc-picture{flex:1 1 auto}:host(.sequential) .card-mobile .card-title h3,:host(.sequential) .card-dt-open .card-title h3{color:var(--color-white);font-size:var(--ptc-font-size-medium);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-densest);margin-bottom:0rem;margin-block-start:0rem;letter-spacing:var(--ptc-letter-spacing-normal)}@media only screen and (min-width: 768px){:host(.sequential) .card-mobile .card-title h3,:host(.sequential) .card-dt-open .card-title h3{font-size:var(--ptc-font-size-large)}}:host(.sequential) .card-mobile .card-content,:host(.sequential) .card-dt-open .card-content{margin-top:var(--ptc-element-spacing-03)}:host(.sequential) .card-mobile{max-width:320px;min-width:226px;position:relative}@media only screen and (min-width: 480px){:host(.sequential) .card-mobile{max-width:350px}}:host(.sequential) .card-mobile::before{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:5px;transition:background-color var(--ptc-transition-medium) var(--ptc-ease-out);background-color:transparent}:host(.sequential) .card-mobile ptc-card-content{align-items:flex-start}:host(.sequential) .card-dt-closed{width:135px;height:424px;position:relative}:host(.sequential) .card-dt-closed .closed-content{position:absolute;width:100%;height:100%;top:0;display:flex;align-items:center;justify-content:center}:host(.sequential) .card-dt-closed .card-title{text-align:center}:host(.sequential) .card-dt-closed .card-title h2{color:var(--color-white);font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-densest);margin-bottom:0rem;margin-block-start:0rem;letter-spacing:var(--ptc-letter-spacing-normal);padding-left:var(--ptc-element-spacing-02);padding-right:var(--ptc-element-spacing-02)}@media only screen and (min-width: 1440px){:host(.sequential) .card-dt-closed .card-title h2{font-size:var(--ptc-font-size-small)}}:host(.sequential) .card-dt-open{border-top:5px solid var(--color-green-05);display:flex;max-width:790px;height:480px;transition:width var(--ptc-transition-x-fast) var(--ptc-ease-out)}@media only screen and (min-width: 1440px){:host(.sequential) .card-dt-open{max-width:825px}}:host(.sequential):host(.active) .card-mobile::before{background-color:var(--color-green-05)}";
 
 const PtcDynamicCard = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.cardOpened = createEvent(this, "cardOpened", 7);
+    /**
+     * Open the card
+     */
+    this.openCard = () => {
+      if (!this.isExpanded) {
+        this.isExpanded = true;
+        this.cardOpened.emit(this.trackerId);
+      }
+      // If already expanded, do nothing to ensure at least one card remains open
+    };
+    /**
+     * Handle keyboard interactions
+     */
+    this.handleKeyDown = (event) => {
+      switch (event.key) {
+        case 'Enter':
+          //event.preventDefault();
+          this.openCard();
+          break;
+      }
+    };
     this.dotSvg = getAssetPath('./media/nav-active-dotslick.svg');
     this.cardType = 'sequential';
     this.cardTitle = 'Card Title Goes Here';
     this.cardImgSrc = undefined;
     this.cardImgAlt = undefined;
     this.cardScreen = 'desktop';
-    this.isExpanded = undefined;
+    this.isExpanded = false;
     this.overlayExists = true;
     this.styles = undefined;
     this.trackerId = undefined;
   }
-  // handleClick() {
-  //   this.isExpanded = !this.isExpanded;
-  // }
+  componentDidLoad() {
+    // Handle mouse enter and leave for overlay
+    this.el.addEventListener('mouseenter', () => (this.overlayExists = false));
+    this.el.addEventListener('mouseleave', () => (this.overlayExists = true));
+  }
+  /**
+   * Listen for 'cardOpened' events on the document to close other cards
+   */
+  handleCardOpened(event) {
+    const openedTrackerId = event.detail;
+    if (openedTrackerId !== this.trackerId && this.isExpanded) {
+      this.isExpanded = false;
+    }
+  }
+  /**
+   * Focus the card-wrapper element
+   */
+  async focusCardWrapper() {
+    const cardWrapper = this.el.querySelector('.card-wrapper');
+    if (cardWrapper) {
+      cardWrapper.focus();
+    }
+  }
+  /**
+   * Get CSS class map
+   */
+  getCssClassMap() {
+    return {
+      [this.cardType]: true,
+    };
+  }
+  /**
+   * Get desktop card based on expansion state
+   */
   getDesktopCard() {
     if (this.cardScreen === 'desktop' && this.isExpanded) {
       return [
-        h("div", { class: "card card-dt-open mf-listen", id: this.trackerId, tabindex: "0", role: "button", "aria-expanded": this.isExpanded }, h("ptc-card-content", { "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))), h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "is-full-width": "true", "is-full-height": "true", "image-alignment": "center" })),
+        h("div", { class: "card card-dt-open mf-listen", id: this.trackerId }, h("ptc-card-content", { "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))), h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "is-full-width": "true", "is-full-height": "true", "image-alignment": "center" })),
       ];
     }
     else if (this.cardScreen === 'desktop' && !this.isExpanded) {
       return [
-        h("div", { class: "card card-dt-closed mf-listen", id: this.trackerId, role: "button", tabindex: "0", "aria-expanded": this.isExpanded }, h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "image-position": "relative", "is-full-width": true, height: "424" }, this.overlayExists ? h("ptc-overlay", { "filter-color": "solid-black-1" }) : h("ptc-overlay", { "filter-color": "solid-black-2" })), h("div", { class: "closed-content", "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h2", null, this.cardTitle)))),
+        h("div", { class: "card card-dt-closed mf-listen", id: this.trackerId }, h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "image-position": "relative", "is-full-width": true, height: "424" }, this.overlayExists ? (h("ptc-overlay", { "filter-color": "solid-black-1" })) : (h("ptc-overlay", { "filter-color": "solid-black-2" }))), h("div", { class: "closed-content", "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h2", null, this.cardTitle)))),
       ];
     }
     else {
       return null;
     }
   }
-  componentDidLoad() {
-    // this.handleResize();
-    this.el.addEventListener('mouseenter', () => (this.overlayExists = false));
-    this.el.addEventListener('mouseleave', () => (this.overlayExists = true));
-  }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: "card-wrapper" }, this.cardScreen == 'mobile' ? (h("div", { class: "card card-mobile mf-listen", id: this.trackerId, role: "button", "aria-expanded": this.isExpanded }, h("ptc-picture", { height: '287', "is-full-width": true, alt: this.cardImgAlt, src: this.cardImgSrc }), h("ptc-card-content", { "card-type": "card-dynamic", styles: ":host(.card-dynamic){height: auto;}" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))))) : (this.getDesktopCard())), this.cardScreen === 'desktop' && (h("div", { hidden: true }, h("svg", null, h("use", { href: `${this.dotSvg}` }))))));
-  }
-  getCssClassMap() {
-    return {
-      [this.cardType]: true,
-    };
+    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: "card-wrapper", role: "button", tabindex: "0", "aria-expanded": this.isExpanded, onClick: this.openCard, onKeyDown: this.handleKeyDown }, this.cardScreen === 'mobile' ? (h("div", { class: "card card-mobile mf-listen", id: this.trackerId }, h("ptc-picture", { height: "287", "is-full-width": true, alt: this.cardImgAlt, src: this.cardImgSrc }), h("ptc-card-content", { "card-type": "card-dynamic", styles: ":host(.card-dynamic){height: auto;}" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))))) : (this.getDesktopCard())), this.cardScreen === 'desktop' && (h("div", { hidden: true }, h("svg", null, h("use", { href: `${this.dotSvg}` }))))));
   }
   static get assetsDirs() { return ["media"]; }
   get el() { return getElement(this); }

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

@@ -62,7 +62,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;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 PtcPagenation = class {
   constructor(hostRef) {