@ptcwebops/ptcw-design 5.8.9 → 5.9.1

package/dist/collection/components/ptc-jumbotron/ptc-jumbotron.css

@@ -1259,6 +1259,13 @@ a:focus-visible {
 
 .hp-adjustments {
   background-color: var(--color-black);
+  height: auto;
+  min-height: 640px !important;
+}
+@media (min-height: 640px) {
+  .hp-adjustments {
+    min-height: 72vh !important;
+  }
 }
 .hp-adjustments .div1 {
   grid-area: 1/1/3/2;
@@ -1292,11 +1299,6 @@ a:focus-visible {
   opacity: 0;
 }
 
-@media screen and (min-width: 992.01px) {
-  .hp-adjustments {
-    height: 90vh;
-  }
-}
 .div1 {
   grid-area: 1/1/2/2;
   min-height: 300px;

package/dist/collection/components/ptc-tab-list/ptc-tab-list.css

@@ -193,7 +193,11 @@ ptc-tab-list.tab-with-banner .tabs-header-container {
   }
 }
 .ellipsis-btn.active {
-  display: block;
+  display: inline-block;
+}
+.ellipsis-btn:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
 }
 
 tab-header {

package/dist/collection/components/ptc-tab-list/ptc-tab-list.js

@@ -6,6 +6,10 @@ export class PtcTabList {
     this.isMobile = undefined;
     this.isMobileTabWithBanner = undefined;
     this.selectedValue = undefined;
+    this.dropdownItemsCount = 0;
+  }
+  closeDropdown() {
+    this.escClicked.emit();
   }
   componentWillLoad() {
     this.isMobile = window.innerWidth < 768;
@@ -16,6 +20,14 @@ export class PtcTabList {
     this.calculateHeaderTabsRendering();
     /*const [group] = this.tabGroup;
     this.selectGroup(group);*/
+    this.ellipsisDropdown = this.host.querySelector('ptc-ellipsis-dropdown');
+    this.ellipsisDropdown.addEventListener('keydown', this.onKeydown.bind(this));
+    const tabsHeaderEl = Array.from(this.host.querySelectorAll('tab-header'));
+    tabsHeaderEl.forEach((tab, i) => {
+      if ((tabsHeaderEl.length - this.dropdownItemsCount) == (i + 1)) {
+        this.lastVisibleTab = tab;
+      }
+    });
   }
   onSelectedTab(event) {
     let self = this;
@@ -23,6 +35,14 @@ export class PtcTabList {
       event.detail.then(res => {
         if (group.header.name === res.name) {
           self.selectGroup(group);
+          // Set the selected tab's tabindex to 0
+          group.header.el.setAttribute('tabindex', '0');
+          // Focus the selected tab
+          group.header.el.focus();
+        }
+        else {
+          // Set other tabs' tabindex to -1
+          group.header.el.setAttribute('tabindex', '-1');
         }
       });
     });
@@ -70,6 +90,7 @@ export class PtcTabList {
     if (activateDropDown) {
       dropdown.classList.add('active');
       dropdown.dataItems = hiddenTabs.reverse();
+      this.dropdownItemsCount = dropdown.dataItems.length;
     }
     else {
       dropdown.classList.remove('active');
@@ -90,7 +111,7 @@ export class PtcTabList {
       if (headerCount === tabsHeaderEl.length) {
         headerComplete = true;
       }
-      headerData.push(res);
+      headerData.push(Object.assign(Object.assign({}, res), { el }));
     }));
     this.tabsHeader = headerData;
     const tabsContentEl = Array.from(this.host.querySelectorAll('tab-content'));
@@ -116,6 +137,92 @@ export class PtcTabList {
         self.selectGroup(group);
       }
     }, 3100); // Increased time interval from 100 to 3100 to fix the preload skeleton issue
+    tabsHeaderEl.forEach((header, index) => {
+      //  console.log(header);
+      header.setAttribute('id', 'tab-' + (index + 1));
+      header.setAttribute('role', 'tab');
+      header.setAttribute('aria-selected', index === 0 ? 'true' : 'false');
+      header.setAttribute('tabindex', index === 0 ? '0' : '-1'); // Set tabindex based on index
+      header.setAttribute('aria-controls', 'tab-panel-' + (index + 1));
+      header.addEventListener('keydown', this.onKeydown.bind(this));
+      if (!this.firstTab) {
+        this.firstTab = header;
+      }
+      this.lastTab = header;
+    });
+    tabsContentEl.forEach((panel, index) => {
+      panel.setAttribute('id', 'tabpanel-' + (index + 1));
+      panel.setAttribute('role', 'tabpanel');
+      panel.setAttribute('aria-labelledby', 'tab-' + (index + 1));
+    });
+  }
+  moveFocusToTab(currentTab) {
+    currentTab.focus();
+  }
+  moveFocusToPreviousTab(currentTab) {
+    if (currentTab === this.firstTab || currentTab == this.ellipsisDropdown) {
+      this.ellipsisDropdown.setAttribute('tabindex', '-1');
+      if (this.dropdownItemsCount == 0) {
+        this.moveFocusToTab(this.lastTab);
+      }
+      else if (currentTab == this.ellipsisDropdown) {
+        this.moveFocusToTab(this.lastVisibleTab);
+      }
+      else {
+        this.ellipsisDropdown.setAttribute('tabindex', '0');
+        this.ellipsisDropdown.focus();
+      }
+    }
+    else {
+      const index = this.tabsHeader.findIndex(tab => tab.el === currentTab);
+      this.moveFocusToTab(this.tabsHeader[index - 1].el);
+    }
+  }
+  moveFocusToNextTab(currentTab) {
+    this.ellipsisDropdown.setAttribute('tabindex', '-1');
+    if (currentTab === this.lastTab || currentTab === this.lastVisibleTab) {
+      if (this.dropdownItemsCount == 0) {
+        this.moveFocusToTab(this.firstTab);
+      }
+      else {
+        this.ellipsisDropdown.setAttribute('tabindex', '0');
+        this.ellipsisDropdown.focus();
+      }
+    }
+    else {
+      const index = this.tabsHeader.findIndex(tab => tab.el === currentTab);
+      this.moveFocusToTab(this.tabsHeader[index + 1].el);
+    }
+  }
+  onKeydown(event) {
+    const currentTab = event.currentTarget;
+    let flag = false;
+    switch (event.key) {
+      case 'ArrowLeft':
+        this.moveFocusToPreviousTab(currentTab);
+        flag = true;
+        break;
+      case 'ArrowRight':
+        this.moveFocusToNextTab(currentTab);
+        flag = true;
+        break;
+      case 'Escape':
+        this.closeDropdown();
+        flag = true;
+        break;
+    }
+    if (flag) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
+  async toggleTabGroup(name) {
+    let self = this;
+    this.tabGroup.forEach(group => {
+      if (group.header.name === name) {
+        self.selectGroup(group);
+      }
+    });
   }
   selectGroup(group) {
     let self = this;
@@ -178,7 +285,8 @@ export class PtcTabList {
     return {
       "isMobile": {},
       "isMobileTabWithBanner": {},
-      "selectedValue": {}
+      "selectedValue": {},
+      "dropdownItemsCount": {}
     };
   }
   static get events() {
@@ -197,8 +305,46 @@ export class PtcTabList {
           "resolved": "any",
           "references": {}
         }
+      }, {
+        "method": "escClicked",
+        "name": "escClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
       }];
   }
+  static get methods() {
+    return {
+      "toggleTabGroup": {
+        "complexType": {
+          "signature": "(name: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "host"; }
   static get listeners() {
     return [{

package/dist/collection/components/ptc-value-led-layout/ptc-value-led-layout.js

@@ -46,12 +46,13 @@ export class PtcValueLedLayout {
       }
     });
   }
-  handleScroll() {
-    const activeListItem = this.hostElement.shadowRoot.querySelector('.vl-list-wrap ul li.active');
-    if (activeListItem) {
-      activeListItem.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
-    }
-  }
+  // @Listen('scroll', { target: 'window' })
+  // handleScroll() {
+  //   const activeListItem = this.hostElement.shadowRoot.querySelector('.vl-list-wrap ul li.active');
+  //   if (activeListItem) {
+  //     activeListItem.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+  //   }
+  // }
   handleWheel( /*event: WheelEvent*/) {
     //console.log(event);
     this.setActiveItem();
@@ -275,12 +276,6 @@ export class PtcValueLedLayout {
   static get elementRef() { return "hostElement"; }
   static get listeners() {
     return [{
-        "name": "scroll",
-        "method": "handleScroll",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }, {
         "name": "wheel",
         "method": "handleWheel",
         "target": "window",

package/dist/collection/components/tab-content/tab-content.css

@@ -54,18 +54,11 @@ ptc-link, ptc-square-card,
   }
 }
 
-.tab-content {
-  display: none;
-}
 .tab-content p, .tab-content ul, .tab-content ol, .tab-content span, .tab-content h1, .tab-content h2, .tab-content h3, .tab-content h4, .tab-content h5, .tab-content h6 {
   max-width: 720px;
   font-weight: var(--ptc-font-weight-normal);
 }
 
-.tab-content-selected {
-  display: block;
-}
-
 .tab-content h3 {
   font-size: var(--ptc-font-size-medium);
   font-weight: var(--ptc-font-weight-bold);

package/dist/collection/components/tab-content/tab-content.js

@@ -4,6 +4,9 @@ export class TabContent {
     this.name = undefined;
     this.isSelected = false;
   }
+  componentWillLoad() {
+    this.parentReference = this.el.closest('ptc-tab-list');
+  }
   async getChild() {
     return {
       select: this.select.bind(this),
@@ -17,12 +20,18 @@ export class TabContent {
   select() {
     this.isSelected = true;
   }
+  beforeMatch() {
+    this.parentReference.toggleTabGroup(this.name);
+  }
   render() {
     const classes = {
       'tab-content': true,
       'tab-content-selected': this.isSelected
     };
-    return (h("div", { class: classes }, h("slot", null)));
+    const hidden = (this.isSelected ? false : 'until-found');
+    return (
+    //@ts-ignore
+    h("div", { class: classes, hidden: hidden, onBeforeMatch: () => { this.beforeMatch(); } }, h("slot", null)));
   }
   static get is() { return "tab-content"; }
   static get originalStyleUrls() {
@@ -81,4 +90,5 @@ export class TabContent {
       }
     };
   }
+  static get elementRef() { return "el"; }
 }

package/dist/collection/components/tab-header/tab-header.css

@@ -93,6 +93,18 @@ ptc-link, ptc-square-card,
   color: var(--color-gray-10);
 }
 
+tab-header:focus-visible {
+  outline: none;
+}
+tab-header:focus-visible .tab-header {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+  transition: none;
+}
+tab-header:focus-visible .tab-header::after {
+  background-color: var(--keyboard-nav-outline);
+}
+
 .tab-header-selected {
   color: var(--color-gray-10);
   font-weight: var(--ptc-font-weight-bold);

package/dist/collection/components/tab-header/tab-header.js

@@ -51,6 +51,11 @@ export class TabHeader {
   }
   componentDidLoad() {
     this.updateMaxLength(window.innerWidth);
+    this.el.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter') {
+        this.onClick();
+      }
+    });
   }
   render() {
     const classes = {
@@ -171,6 +176,7 @@ export class TabHeader {
       }
     };
   }
+  static get elementRef() { return "el"; }
   static get listeners() {
     return [{
         "name": "resize",