@ptcwebops/ptcw-design 6.2.25-beta → 6.2.27-beta

package/dist/collection/components/ptc-icon-minimize/ptc-icon-minimize.js

@@ -12,6 +12,7 @@ export class PtcIconMinimize {
     this.listType = "default";
     this.dataRefineValue = undefined;
     this.trackerId = undefined;
+    this.tabIndexValue = 0;
   }
   componentWillLoad() {
     this.timeStamp = Date.now().toString();
@@ -21,11 +22,20 @@ export class PtcIconMinimize {
     if (this.opened && !content.style.maxHeight) {
       content.style.maxHeight = content.scrollHeight + "px";
     }
+    if (!this.opened) {
+      this.setTabIndex();
+    }
   }
   dropdownToggle() {
     this.opened = !this.opened;
+    this.setTabIndex();
+  }
+  setTabIndex() {
     var checkList = this.host.querySelector(".fitler-check-list");
     var checkListModal = this.host.querySelector(".fitler-check-list-modal");
+    if (checkList == null) {
+      checkList = this.host.querySelector(".filter-checkbox-list");
+    }
     if (checkList) {
       var checkBoxesList = checkList.querySelectorAll("ptc-checkbox");
       if (checkBoxesList) {
@@ -35,6 +45,26 @@ export class PtcIconMinimize {
           }
         });
       }
+      var checkBoxesIconList = checkList.querySelectorAll("ptc-icon-minimize");
+      if (checkBoxesIconList) {
+        checkBoxesIconList.forEach(item => {
+          if (item.shadowRoot.querySelector(".icon")) {
+            this.opened ? item.shadowRoot.querySelector(".icon").setAttribute("tabindex", "0") :
+              item.shadowRoot.querySelector(".icon").setAttribute("tabindex", "-1");
+            var childrenCheckBoxesList = item.querySelectorAll("ptc-checkbox");
+            if (childrenCheckBoxesList) {
+              childrenCheckBoxesList.forEach(childitem => {
+                if (childitem.shadowRoot.querySelector("label")) {
+                  childitem.shadowRoot.querySelector("label").tabIndex = item.opened ? 0 : -1;
+                }
+              });
+            }
+          }
+        });
+      }
+    }
+    if (checkListModal == null) {
+      checkListModal = this.host.querySelector(".filter-check-list-modal");
     }
     if (checkListModal) {
       var checkBoxesListModal = checkListModal.querySelectorAll("ptc-checkbox");
@@ -45,6 +75,23 @@ export class PtcIconMinimize {
           }
         });
       }
+      var checkBoxesModelIconList = checkListModal.querySelectorAll("ptc-icon-minimize");
+      if (checkBoxesModelIconList) {
+        checkBoxesModelIconList.forEach(item => {
+          if (item.shadowRoot.querySelector(".icon")) {
+            this.opened ? item.shadowRoot.querySelector(".icon").setAttribute("tabindex", "0") :
+              item.shadowRoot.querySelector(".icon").setAttribute("tabindex", "-1");
+            var childrenCheckBoxesList = item.querySelectorAll("ptc-checkbox");
+            if (childrenCheckBoxesList) {
+              childrenCheckBoxesList.forEach(childitem => {
+                if (childitem.shadowRoot.querySelector("label")) {
+                  childitem.shadowRoot.querySelector("label").tabIndex = item.opened ? 0 : -1;
+                }
+              });
+            }
+          }
+        });
+      }
     }
   }
   getScrollHeight() {
@@ -91,9 +138,9 @@ export class PtcIconMinimize {
     let scrollHeight = this.getScrollHeight();
     let icon = this.opened ? 'minus' : 'plus';
     return (h("div", { class: 'ptc-icon-minimize' }, this.listType == "default" ?
-      h("div", { class: "header" }, h("div", { class: "title" }, this.heading), h("div", { class: "icon mf-listen", id: this.trackerId, onClick: () => this.dropdownToggle(), onKeyDown: this.handleKeyDown, tabIndex: 0 }, h("icon-asset", { type: "ptc", color: "black", size: "xxx-small", name: icon })))
+      h("div", { class: "header" }, h("div", { class: "title" }, this.heading), h("div", { class: "icon mf-listen", id: this.trackerId, onClick: () => this.dropdownToggle(), onKeyDown: this.handleKeyDown, tabIndex: this.tabIndexValue }, h("icon-asset", { type: "ptc", color: "black", size: "xxx-small", name: icon })))
       : this.listType == "checkbox" ?
-        h("div", { class: "header" }, h("div", { class: "title" }, h("ptc-checkbox", { checked: "unchecked", "data-refine": this.dataRefineValue, "input-name": "", value: this.heading }, this.heading)), h("div", { class: "icon mf-listen", id: this.trackerId, onClick: () => this.dropdownToggle(), onKeyDown: this.handleKeyDown, tabIndex: 0 }, h("icon-asset", { type: "ptc", color: "black", size: "xxx-small", name: icon })))
+        h("div", { class: "header" }, h("div", { class: "title" }, h("ptc-checkbox", { checked: "unchecked", "data-refine": this.dataRefineValue, "input-name": "", value: this.heading, tabIndex: this.tabIndexValue }, this.heading)), h("div", { class: "icon mf-listen", id: this.trackerId, onClick: () => this.dropdownToggle(), onKeyDown: this.handleKeyDown, tabIndex: this.tabIndexValue }, h("icon-asset", { type: "ptc", color: "black", size: "xxx-small", name: icon })))
         : null, h("div", { class: "content", style: scrollHeight }, h("slot", null))));
   }
   static get is() { return "ptc-icon-minimize"; }
@@ -196,6 +243,24 @@ export class PtcIconMinimize {
         },
         "attribute": "tracker-id",
         "reflect": false
+      },
+      "tabIndexValue": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tab-index-value",
+        "reflect": false,
+        "defaultValue": "0"
       }
     };
   }

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

@@ -1151,15 +1151,16 @@ ptc-preloader-section.min-height {
 }
 
 ptc-nav-submenu {
+  margin-top: 6px;
   border-left: 2px solid transparent;
   border-right: 2px solid transparent;
+  border-bottom: 2px solid transparent;
 }
 ptc-nav-submenu:focus-visible, ptc-nav-submenu:focus {
+  margin-top: 4px;
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);
-  margin-top: -2px;
-  margin-bottom: -2px;
 }
 
 a {

package/dist/collection/components/ptc-preloader-section/ptc-preloader-section.css

@@ -476,18 +476,18 @@ ptc-link, ptc-square-card,
   align-items: center;
   justify-content: space-between;
   flex-wrap: nowrap;
+  column-gap: 40px;
 }
 .skeleton-home-page .slide-container .skeleton-slides .slide {
   background: linear-gradient(to right, var(--color-gray-02) 25%, var(--color-gray-03) 50%, var(--color-gray-02) 75%);
   background-size: 200% 100%;
   animation: loading 2.5s linear infinite;
   border-radius: 4px;
-  width: 296px;
+  width: 100%;
   height: 140px;
 }
 @media only screen and (min-width: 992px) {
   .skeleton-home-page .slide-container .skeleton-slides .slide {
-    width: 356px;
     height: 116px;
   }
 }

package/dist/collection/components/ptc-pricing-tabs/ptc-pricing-tabs.css

@@ -1096,15 +1096,16 @@ ptc-preloader-section.min-height {
 }
 
 ptc-nav-submenu {
+  margin-top: 6px;
   border-left: 2px solid transparent;
   border-right: 2px solid transparent;
+  border-bottom: 2px solid transparent;
 }
 ptc-nav-submenu:focus-visible, ptc-nav-submenu:focus {
+  margin-top: 4px;
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);
-  margin-top: -2px;
-  margin-bottom: -2px;
 }
 
 :host {

package/dist/collection/components/subnav/ptc-nav-link/ptc-nav-link.css

@@ -104,7 +104,9 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 1200px) {
   :host a {
-    padding: 22px var(--ptc-element-spacing-03);
+    padding: 14px var(--ptc-element-spacing-03) 22px;
+    margin-top: 6px;
+    border-top: 2px solid transparent;
     margin-left: 0;
     display: flex;
     align-items: center;
@@ -150,7 +152,12 @@ ptc-link, ptc-square-card,
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);
-  padding: 20px 10px;
+  padding: 14px 10px 16px;
+}
+@media only screen and (min-width: 1200px) {
+  :host a:focus-visible {
+    padding: 14px 10px 20px;
+  }
 }
 :host ::slotted(icon-asset) {
   margin-top: 4px;

package/dist/collection/components/subnav/ptc-nav-slider/ptc-nav-slider.js

@@ -21,7 +21,7 @@ export class PtcNavSlider {
     const prevBtn = document.querySelector(`#${sliderId}`).shadowRoot.querySelector('#prevBtn');
     const nextBtn = document.querySelector(`#${sliderId}`).shadowRoot.querySelector('#nextBtn');
     let notDropdown = element.target.tagName.toLowerCase() != 'ptc-nav-submenu';
-    console.log(element.target.tagName);
+    //console.log(element.target.tagName)
     this.updateArrows(boxWrap, prevBtn, nextBtn, notDropdown);
   }
   updateArrows(boxWrap, prevBtn, nextBtn, isNotDropdown) {