@ptcwebops/ptcw-design 5.9.0 → 5.9.1

package/dist/esm/ptc-ellipsis-dropdown.entry.js

@@ -1,11 +1,14 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-c83db688.js';
 
-const ptcEllipsisDropdownCss = "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}}.ellipsis-icon{box-sizing:border-box;border:1px solid var(--color-gray-08);border-radius:2px;vertical-align:middle;height:18px;width:18px;text-align:center;display:flex;align-items:center;justify-content:center;transition:background-color var(--ptc-ease-out) var(--ptc-transition-medium), border-color var(--ptc-ease-out) var(--ptc-transition-medium)}.ellipsis-icon:hover{background-color:var(--color-gray-04);border-color:var(--color-gray-04)}.ellipsis-icon icon-asset{display:inline-block}.ellipsis-icon icon-asset svg{margin:0 auto;display:block;width:10px !important;height:10px !important}.ellipsis-icon.active{background-color:var(--color-green-07);border-color:var(--color-green-07)}.ellipsis-icon.active::after{content:\"\";width:32px;height:2px;display:inline-block;background-color:var(--color-green-07);position:absolute;bottom:-11px}@media only screen and (min-width: 1440px){.ellipsis-icon.active::after{bottom:-17px}}.ptc-ellipsis-dropdown{position:relative;display:inline-block;cursor:pointer;padding:2px 0 14px 0;border-bottom:2px solid var(--color-green-07);margin:0 1rem -1px 1rem;box-sizing:border-box}@media only screen and (min-width: 768px){.ptc-ellipsis-dropdown.default{padding:0px;border-bottom:none;margin:0;height:44px;width:44px;display:flex;justify-content:center;align-content:center;flex-wrap:wrap}}.ptc-ellipsis-dropdown.tab-with-banner{padding:0px 0 16px 0;margin:0 1rem -2.5px 1rem}@media only screen and (min-width: 992px){.ptc-ellipsis-dropdown.tab-with-banner{padding:0px 0px 1rem 0px;border-bottom:none;margin:0;height:100%;width:44px;display:flex;justify-content:center;align-content:center;flex-wrap:wrap}}.ptc-ellipsis-dropdown.tab-with-banner .ellipsis-icon.active::after{bottom:-2px}.ptc-ellipsis-dropdown.tab-with-banner .dropdown-container{display:none;margin-top:16px;box-shadow:0 6px 16px rgba(0, 0, 0, 0.24);border-radius:4px;position:absolute;z-index:1010;background:var(--color-white);padding:0.8rem 0;right:auto;left:0;min-width:max-content;width:100%}@media only screen and (min-width: 992px){.ptc-ellipsis-dropdown.tab-with-banner .dropdown-container{right:0;left:auto;top:50%;margin-top:22px}}.ptc-ellipsis-dropdown.tab-with-banner.show .dropdown-container{display:inline-block}@media only screen and (min-width: 1440px){.ptc-ellipsis-dropdown{height:34px;width:34px}}.ptc-ellipsis-dropdown .mob-drop{color:var(--color-gray-10);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-p);font-family:\"Raleway\";font-style:normal;display:flex;align-items:center}.ptc-ellipsis-dropdown .mob-drop svg{display:inline-block;vertical-align:middle;margin:4px 0px 0px 12px;min-width:12px}.dropdown-container{display:none;margin-top:16px;box-shadow:0 6px 16px rgba(0, 0, 0, 0.24);border-radius:4px;position:absolute;z-index:1010;background:var(--color-white);padding:0.8rem 0;right:auto;left:0;min-width:max-content;width:100%}@media only screen and (min-width: 768px){.dropdown-container{right:0;left:auto;margin-top:48px}}@media only screen and (min-width: 1440px){.dropdown-container{margin-top:45px}}.dropdown-container .selected-drop .dropdown-item span{position:relative;font-weight:var(--ptc-font-weight-bold)}.dropdown-container .selected-drop .dropdown-item span::before{content:\"\";width:2px;height:60%;background:var(--color-green-07);display:block;left:16px;position:absolute;top:20%}.show .dropdown-container{display:inline-block}";
+const ptcEllipsisDropdownCss = "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}}.ellipsis-icon{box-sizing:border-box;border:1px solid var(--color-gray-08);border-radius:2px;vertical-align:middle;height:18px;width:18px;text-align:center;display:flex;align-items:center;justify-content:center;transition:background-color var(--ptc-ease-out) var(--ptc-transition-medium), border-color var(--ptc-ease-out) var(--ptc-transition-medium)}.ellipsis-icon:hover{background-color:var(--color-gray-04);border-color:var(--color-gray-04)}.ellipsis-icon icon-asset{display:inline-block}.ellipsis-icon icon-asset svg{margin:0 auto;display:block;width:10px !important;height:10px !important}.ellipsis-icon.active{background-color:var(--color-green-07);border-color:var(--color-green-07)}.ellipsis-icon.active::after{content:\"\";width:32px;height:2px;display:inline-block;background-color:var(--color-green-07);position:absolute;bottom:-11px}@media only screen and (min-width: 1440px){.ellipsis-icon.active::after{bottom:-17px}}.ptc-ellipsis-dropdown{position:relative;display:inline-block;cursor:pointer;padding:2px 0 14px 0;border-bottom:2px solid var(--color-green-07);margin:0 1rem -1px 1rem;box-sizing:border-box}@media only screen and (min-width: 768px){.ptc-ellipsis-dropdown.default{padding:0px;border-bottom:none;margin:0;height:44px;width:44px;display:flex;justify-content:center;align-content:center;flex-wrap:wrap}}.ptc-ellipsis-dropdown.tab-with-banner{padding:0px 0 16px 0;margin:0 1rem -2.5px 1rem}@media only screen and (min-width: 992px){.ptc-ellipsis-dropdown.tab-with-banner{padding:0px 0px 1rem 0px;border-bottom:none;margin:0;height:100%;width:44px;display:flex;justify-content:center;align-content:center;flex-wrap:wrap}}.ptc-ellipsis-dropdown.tab-with-banner .ellipsis-icon.active::after{bottom:-2px}.ptc-ellipsis-dropdown.tab-with-banner .dropdown-container{display:none;margin-top:16px;box-shadow:0 6px 16px rgba(0, 0, 0, 0.24);border-radius:4px;position:absolute;z-index:1010;background:var(--color-white);padding:0.8rem 0;right:auto;left:0;min-width:max-content;width:100%}@media only screen and (min-width: 992px){.ptc-ellipsis-dropdown.tab-with-banner .dropdown-container{right:0;left:auto;top:50%;margin-top:22px}}.ptc-ellipsis-dropdown.tab-with-banner.show .dropdown-container{display:inline-block}@media only screen and (min-width: 1440px){.ptc-ellipsis-dropdown{height:34px;width:34px}}.ptc-ellipsis-dropdown .mob-drop{color:var(--color-gray-10);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-p);font-family:\"Raleway\";font-style:normal;display:flex;align-items:center}.ptc-ellipsis-dropdown .mob-drop svg{display:inline-block;vertical-align:middle;margin:4px 0px 0px 12px;min-width:12px}.dropdown-container{display:none;margin-top:16px;box-shadow:0 6px 16px rgba(0, 0, 0, 0.24);border-radius:4px;position:absolute;z-index:1010;background:var(--color-white);padding:0.8rem 0;right:auto;left:0;min-width:max-content;width:100%}@media only screen and (min-width: 768px){.dropdown-container{right:0;left:auto;margin-top:48px}}@media only screen and (min-width: 1440px){.dropdown-container{margin-top:45px}}.dropdown-container .selected-drop .dropdown-item span{position:relative;font-weight:var(--ptc-font-weight-bold)}.dropdown-container .selected-drop .dropdown-item span::before{content:\"\";width:2px;height:60%;background:var(--color-green-07);display:block;left:16px;position:absolute;top:20%}.show .dropdown-container{display:inline-block}dropdown-item:focus-visible{outline:none}dropdown-item:focus-visible .dropdown-item{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}";
 
 const PtcEllipsisDropdown = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.itemSelected = createEvent(this, "itemSelected", 7);
+    this.menuitemNodes = [];
+    this.firstMenuitem = false;
+    this.lastMenuitem = false;
     this.dataItems = [];
     this.selectedTab = undefined;
     this.isDropdownOpen = false;
@@ -13,6 +16,7 @@ const PtcEllipsisDropdown = class {
     this.isIPad = undefined;
     this.dropdownType = "default";
   }
+  //firstChars = [];
   dropdownToggle(e) {
     e.currentTarget.classList.toggle("show");
     this.isDropdownOpen = e.currentTarget.classList.contains("show");
@@ -31,20 +35,141 @@ const PtcEllipsisDropdown = class {
     this.isMobile = window.innerWidth < 768;
     this.isIPad = window.innerWidth < 992 || screen.width < 992;
   }
+  onEscClicked() {
+    var _a;
+    let container = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ptc-ellipsis-dropdown');
+    //this.host.focus();
+    if (container) {
+      container.classList.remove('show');
+      this.isDropdownOpen = false;
+    }
+  }
   componentWillLoad() {
     this.isMobile = window.innerWidth < 768;
     this.isIPad = window.innerWidth < 992 || screen.width < 992;
   }
+  onMenuitemKeydown(event) {
+    var tgt = event.currentTarget, key = event.key, flag = false;
+    if (event.ctrlKey || event.altKey || event.metaKey) {
+      return;
+    }
+    if (event.shiftKey) ;
+    else {
+      switch (key) {
+        case 'Up':
+        case 'ArrowUp':
+          this.setFocusToPreviousMenuitem(tgt);
+          flag = true;
+          break;
+        case 'ArrowDown':
+        case 'Down':
+          this.setFocusToNextMenuitem(tgt);
+          flag = true;
+          break;
+        case 'Home':
+        case 'PageUp':
+          this.setFocusToFirstMenuitem();
+          flag = true;
+          break;
+        case 'End':
+        case 'PageDown':
+          this.setFocusToLastMenuitem();
+          flag = true;
+          break;
+        case 'Tab':
+          this.onEscClicked();
+          break;
+      }
+    }
+    if (flag) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
+  setFocusToMenuitem(newMenuitem) {
+    this.menuitemNodes.forEach(function (item) {
+      if (item === newMenuitem) {
+        item.tabIndex = 0;
+        newMenuitem.focus();
+      }
+      else {
+        item.tabIndex = -1;
+      }
+    });
+  }
+  setFocusToFirstMenuitem() {
+    this.setFocusToMenuitem(this.firstMenuitem);
+  }
+  setFocusToLastMenuitem() {
+    this.setFocusToMenuitem(this.lastMenuitem);
+  }
+  setFocusToPreviousMenuitem(currentMenuitem) {
+    var newMenuitem, index;
+    if (currentMenuitem === this.firstMenuitem) {
+      newMenuitem = this.lastMenuitem;
+    }
+    else {
+      index = this.menuitemNodes.indexOf(currentMenuitem);
+      newMenuitem = this.menuitemNodes[index - 1];
+    }
+    this.setFocusToMenuitem(newMenuitem);
+    return newMenuitem;
+  }
+  setFocusToNextMenuitem(currentMenuitem) {
+    var newMenuitem, index;
+    if (currentMenuitem === this.lastMenuitem) {
+      newMenuitem = this.firstMenuitem;
+    }
+    else {
+      index = this.menuitemNodes.indexOf(currentMenuitem);
+      newMenuitem = this.menuitemNodes[index + 1];
+    }
+    this.setFocusToMenuitem(newMenuitem);
+    return newMenuitem;
+  }
+  componentDidLoad() {
+    setTimeout(() => {
+      this.menuitems = this.host.shadowRoot.querySelectorAll('dropdown-item');
+      for (var i = 0; i < this.menuitems.length; i++) {
+        var menuitem = this.menuitems[i];
+        this.menuitemNodes.push(menuitem);
+        menuitem.tabIndex = -1;
+        menuitem.addEventListener('keydown', this.onMenuitemKeydown.bind(this));
+        if (!this.firstMenuitem) {
+          this.firstMenuitem = menuitem;
+        }
+        this.lastMenuitem = menuitem;
+      }
+    }, 100);
+    const ellp = this.host.shadowRoot.querySelector('.ptc-ellipsis-dropdown');
+    this.host.addEventListener('keydown', (event) => {
+      // Open dropdown on 'Enter' key press
+      if (event.key === 'Enter') {
+        ellp.click();
+      }
+      if (event.key === 'ArrowDown') {
+        this.host.shadowRoot.querySelectorAll('dropdown-item')[0].focus();
+      }
+    });
+    if (this.isMobile || (this.isIPad && this.dropdownType === 'tab-with-banner')) {
+      this.host.setAttribute('tabindex', '0');
+    }
+  }
   render() {
     let activeTab = this.dataItems.find(z => z.isSelected == true);
     let isActive = false;
     if (activeTab) {
       isActive = true;
     }
-    return (h("div", { class: this.dropdownType == 'tab-with-banner' ? "ptc-ellipsis-dropdown tab-with-banner" : "ptc-ellipsis-dropdown default", onClick: (e) => this.dropdownToggle(e) }, (this.isMobile || (this.isIPad && this.dropdownType === 'tab-with-banner')) ? (h("div", { class: 'mob-drop' }, h("span", { class: 'opt-name' }, this.dataItems.map((item) => item.isSelected ? item.text : '')), h("svg", { width: "12", height: "9", viewBox: "0 0 12 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1 1.65723L5.94975 6.60697L10.8995 1.65723", stroke: "#00890B", "stroke-width": "2", "stroke-linecap": "round" })))) : (h("div", { class: isActive || this.isDropdownOpen ? "ellipsis-icon active" : "ellipsis-icon" }, h("icon-asset", { type: "ptc", size: "xxx-small", name: "ellipsis", color: isActive || this.isDropdownOpen ? 'white' : 'black' }))), h("div", { class: "dropdown-container" }, h("slot", { name: "dropdown" }), this.dataItems.map(dataItem => {
+    return (h("div", { class: this.dropdownType == 'tab-with-banner' ? "ptc-ellipsis-dropdown tab-with-banner" : "ptc-ellipsis-dropdown default", onClick: (e) => this.dropdownToggle(e) }, (this.isMobile || (this.isIPad && this.dropdownType === 'tab-with-banner')) ? (h("div", { class: 'mob-drop' }, h("span", { class: 'opt-name' }, this.dataItems.map((item) => item.isSelected ? item.text : '')), h("svg", { width: "12", height: "9", viewBox: "0 0 12 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1 1.65723L5.94975 6.60697L10.8995 1.65723", stroke: "#00890B", "stroke-width": "2", "stroke-linecap": "round" })))) : (h("div", { class: isActive || this.isDropdownOpen ? "ellipsis-icon active" : "ellipsis-icon" }, h("icon-asset", { type: "ptc", size: "xxx-small", name: "ellipsis", color: isActive || this.isDropdownOpen ? 'white' : 'black' }))), h("div", { class: "dropdown-container", role: "menu", "aria-labelledby": "menubutton1" }, h("slot", { name: "dropdown" }), this.dataItems.map((dataItem) => {
       let activeClass = dataItem.value == this.selectedTab ? 'active' : '';
       let activeDropdown = dataItem.isSelected ? 'selected-drop' : '';
-      return (h("dropdown-item", { class: activeClass + activeDropdown + 'mf-listen' }, h("span", { onClick: (e) => {
+      return (h("dropdown-item", { role: "menuitem", class: activeClass + activeDropdown + 'mf-listen', onKeyDown: (e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            this.onItemSelected(dataItem);
+          }
+        } }, h("span", { onClick: (e) => {
           e.preventDefault();
           this.onItemSelected(dataItem);
         } }, dataItem.text)));

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) {