@ptcwebops/ptcw-design 6.1.32 → 6.1.34

package/dist/collection/components/ptc-pricing-packaging-table/ptc-pricing-packaging-table.js

@@ -177,13 +177,54 @@ export class PtcPricingPackagingTable {
       this.handleScrollButtonsVisibility();
       this.handleFillEmptySpace();
     };
+    /**
+     * Handles automatic horizontal scroll when active element is hidden
+     */
+    this.handleAutoScrollOnFocus = (e) => {
+      let focusTarget = e.target;
+      let focusTargetParent = focusTarget.parentElement.getBoundingClientRect();
+      let scrollContainer = this.el.shadowRoot.querySelector("#table-body");
+      let leftScrollButton = this.el.shadowRoot.querySelector("#previous-scroll-button").getBoundingClientRect();
+      let rightScrollButton = this.el.shadowRoot.querySelector("#next-scroll-button").getBoundingClientRect();
+      let tableHeader = this.el.shadowRoot.querySelector('#table-header');
+      if (tableHeader) {
+        if (tableHeader.classList.contains('sticky')) {
+          scrollContainer.scrollIntoView(false);
+        }
+      }
+      // Scroll if at least 80% of the column with the focused target isn't visible
+      if ((focusTargetParent.left + (focusTargetParent.width * 0.2)) < leftScrollButton.left) {
+        scrollContainer.scrollLeft -= focusTargetParent.width;
+      }
+      if ((focusTargetParent.left + (focusTargetParent.width * 0.8)) > rightScrollButton.right) {
+        scrollContainer.scrollLeft += focusTargetParent.width;
+      }
+    };
+    /**
+     * Handles keyboard click events on table scroll buttons
+     * @direction -1: Backward Scroll | 1: Forward Scroll
+     */
+    this.handleScrollButtonClick = (e, direction) => {
+      switch (e.key) {
+        case "Enter": {
+          if (direction === -1) {
+            this.handleBackwardScroll();
+          }
+          else if (direction === 1) {
+            this.handleForwardScroll();
+          }
+          break;
+        }
+        default: break;
+      }
+    };
     this.preProcessTableDescription = () => {
       let tableDescription = this.el.querySelector('[slot="table-description"]');
       if (tableDescription) {
         this.tableDescription = tableDescription;
       }
     };
-    this.preProcessdesktopHeaderFirstCell = () => {
+    this.preProcessDesktopHeaderFirstCell = () => {
       let desktopHeaderFirstCellSlot = this.el.querySelector('[slot="desktop-header-first-cell"]');
       let desktopHeaderFirstCellText = desktopHeaderFirstCellSlot.innerHTML;
       this.el.insertAdjacentHTML('afterbegin', `<span slot="placeholder-desktop-header-first-cell">${desktopHeaderFirstCellText}</span>`);
@@ -268,6 +309,7 @@ export class PtcPricingPackagingTable {
     this.disclaimerCount = 0;
     this.moreText = "More";
     this.LessText = "Less";
+    this.sectionId = "";
     this.isDesktopView = undefined;
     this.hashKey = undefined;
     this.debouncedHashEnable = undefined;
@@ -324,7 +366,7 @@ export class PtcPricingPackagingTable {
   componentWillLoad() {
     this.setHashKey(false);
     this.preProcessTableDescription();
-    this.preProcessdesktopHeaderFirstCell();
+    this.preProcessDesktopHeaderFirstCell();
     this.preProcessColumnHeaders();
     this.preProcessHeaderLinks();
     this.preProcessRowHeaders();
@@ -365,8 +407,8 @@ export class PtcPricingPackagingTable {
     const TableHeader = () => {
       return h("div", { id: "table-header", class: this.headerType, onScroll: () => this.handleHorizontalScroll() }, h("div", { class: `desktop-header-first-cell` }, (this.isDesktopView) ?
         h("ptc-para", { "font-size": "medium", "font-weight": "w-7", "para-align": "left", "para-color": "white", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, h("slot", { name: "desktop-header-first-cell" }))
-        : null, h("div", { class: "scroll-button", id: "previous-scroll-button" }, h("div", { onClick: () => this.handleBackwardScroll() }, h("icon-asset", { type: "solid", size: "medium", name: "chevron-left", color: "primary-gray" }), h("ptc-para", { "font-size": "small", "font-weight": "w-6", "para-align": "justify", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, this.moreText))), h("div", { class: "scroll-button", id: "next-scroll-button" }, h("div", { onClick: () => this.handleForwardScroll() }, h("ptc-para", { "font-size": "small", "font-weight": "w-6", "para-align": "justify", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, this.moreText), h("icon-asset", { type: "solid", size: "medium", name: "chevron-right", color: "primary-gray" })))), ([...Array(this.dataCols).keys()]).map(col => {
-        return h("div", { class: `table-cell ${(col + 1) === this.dataCols ? "table-last-cell" : ""}` }, h("ptc-para", { "font-size": "medium", "font-weight": "w-7", "para-align": "center", "para-color": "white", "para-line-h": "line-height-densest", "para-margin": "margin-flush", "para-z-index": "z-1" }, h("slot", { name: `column-header-${col + 1}` })), ((this.columnHeaderLinks.length === this.dataCols) && (this.columnHeaderLinks[col])) ? h(Fragment, null, h("ptc-spacer", { breakpoint: 'small', size: "small" }), h("ptc-spacer", { breakpoint: 'x-small', size: "medium" }), h("ptc-link", { "font-size": "medium", "font-weight": "w-extrabold", href: `${this.columnHeaderLinks[col].linkHref}`, "link-area": "undefined", target: `${this.columnHeaderLinks[col].linkTarget}`, theme: "d-green-underline", styles: "a.ptc-link {line-height: var(--ptc-line-height-p);}", "link-title": this.columnHeaderLinks[col].linkTitle }, this.isDesktopView ?
+        : null, h("div", { class: "scroll-button mf-listen", id: "previous-scroll-button" }, h("div", { class: "mf-listen", onClick: () => this.handleBackwardScroll(), onKeyDown: e => this.handleScrollButtonClick(e, -1), tabIndex: 0, id: `previous-scroll-button-${this.sectionId}` }, h("icon-asset", { type: "solid", size: "medium", name: "chevron-left", color: "primary-gray" }), h("ptc-para", { "font-size": "small", "font-weight": "w-6", "para-align": "justify", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, this.moreText))), h("div", { class: "scroll-button mf-listen", id: "next-scroll-button" }, h("div", { class: "mf-listen", onClick: () => this.handleForwardScroll(), onKeyDown: e => this.handleScrollButtonClick(e, 1), tabIndex: 0, id: `next-scroll-button-${this.sectionId}` }, h("ptc-para", { "font-size": "small", "font-weight": "w-6", "para-align": "justify", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, this.moreText), h("icon-asset", { type: "solid", size: "medium", name: "chevron-right", color: "primary-gray" })))), ([...Array(this.dataCols).keys()]).map(col => {
+        return h("div", { class: `table-cell ${(col + 1) === this.dataCols ? "table-last-cell" : ""}` }, h("ptc-para", { "font-size": "medium", "font-weight": "w-7", "para-align": "center", "para-color": "white", "para-line-h": "line-height-densest", "para-margin": "margin-flush", "para-z-index": "z-1" }, h("slot", { name: `column-header-${col + 1}` })), ((this.columnHeaderLinks.length === this.dataCols) && (this.columnHeaderLinks[col])) ? h(Fragment, null, h("ptc-spacer", { breakpoint: 'small', size: "small" }), h("ptc-spacer", { breakpoint: 'x-small', size: "medium" }), h("ptc-link", { "font-size": "medium", "font-weight": "w-extrabold", href: `${this.columnHeaderLinks[col].linkHref}`, "link-area": "undefined", target: `${this.columnHeaderLinks[col].linkTarget}`, theme: "d-green-underline", styles: "a.ptc-link {line-height: var(--ptc-line-height-p);}", "link-title": this.columnHeaderLinks[col].linkTitle, onFocus: (e) => this.handleAutoScrollOnFocus(e), "tracker-id": `column-header-${col + 1}-link-${this.sectionId}` }, this.isDesktopView ?
           h("ptc-tooltip", { class: (col === (this.dataCols - 1)) ? "last-column-tooltip" : "", "text-display": "inline", "max-length": "30", "z-index": "z-2", description: this.columnHeaderLinks[col].linkText, position: "top" })
           : this.columnHeaderLinks[col].linkText)) : null);
       }), h("div", { class: `table-filler-cell ${this.showFillerCells ? "show" : ""}` }));
@@ -375,14 +417,14 @@ export class PtcPricingPackagingTable {
       return h("div", { id: "table-header-placeholder", class: this.headerType }, h("div", { class: `desktop-header-first-cell` }, (this.isDesktopView) ?
         h("ptc-para", { "font-size": "medium", "font-weight": "w-7", "para-align": "left", "para-color": "white", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, h("slot", { name: "placeholder-desktop-header-first-cell" }))
         : null), ([...Array(this.dataCols).keys()]).map(col => {
-        return h("div", { class: `table-cell ${(col + 1) === this.dataCols ? "table-last-cell" : ""}` }, h("ptc-para", { "font-size": "medium", "font-weight": "w-7", "para-align": "center", "para-color": "white", "para-line-h": "line-height-densest", "para-margin": "margin-flush", "para-z-index": "z-1" }, h("slot", { name: `placeholder-column-header-${col + 1}` })), ((this.columnHeaderLinks.length === this.dataCols) && (this.columnHeaderLinks[col])) ? h(Fragment, null, h("ptc-spacer", { breakpoint: 'small', size: "small" }), h("ptc-spacer", { breakpoint: 'x-small', size: "medium" }), h("ptc-link", { "font-size": "medium", "font-weight": "w-extrabold", href: `${this.columnHeaderLinks[col].linkHref}`, "link-area": "undefined", target: `${this.columnHeaderLinks[col].linkTarget}`, theme: "d-green-underline", styles: "a.ptc-link {line-height: var(--ptc-line-height-p);}", "link-title": this.columnHeaderLinks[col].linkTitle }, this.isDesktopView ?
+        return h("div", { class: `table-cell ${(col + 1) === this.dataCols ? "table-last-cell" : ""}` }, h("ptc-para", { "font-size": "medium", "font-weight": "w-7", "para-align": "center", "para-color": "white", "para-line-h": "line-height-densest", "para-margin": "margin-flush", "para-z-index": "z-1" }, h("slot", { name: `placeholder-column-header-${col + 1}` })), ((this.columnHeaderLinks.length === this.dataCols) && (this.columnHeaderLinks[col])) ? h(Fragment, null, h("ptc-spacer", { breakpoint: 'small', size: "small" }), h("ptc-spacer", { breakpoint: 'x-small', size: "medium" }), h("ptc-link", { "font-size": "medium", "font-weight": "w-extrabold", href: `${this.columnHeaderLinks[col].linkHref}`, "link-area": "undefined", target: `${this.columnHeaderLinks[col].linkTarget}`, theme: "d-green-underline", styles: "a.ptc-link {line-height: var(--ptc-line-height-p);}", "link-title": this.columnHeaderLinks[col].linkTitle, "tab-nav": "-1" }, this.isDesktopView ?
           h("ptc-tooltip", { class: (col === (this.dataCols - 1)) ? "last-column-tooltip" : "", "text-display": "inline", "max-length": "30", "z-index": "z-2", description: this.columnHeaderLinks[col].linkText, position: "top" })
           : this.columnHeaderLinks[col].linkText)) : null);
       }), h("div", { class: `table-filler-cell ${this.showFillerCells ? "show" : ""}` }));
     };
     const TableDataRows = () => {
       return ([...Array(this.dataRows).keys()]).map(row => {
-        return h(Fragment, null, h("div", { class: "mobile-sticky-row-header" }, h("slot", { name: `mobile-row-header-${row + 1}` })), h("div", { class: `table-row ${(this.isDesktopView && (row % 2 != 0)) ? "desktop-alternate-row" : ""}` }, (this.isDesktopView) ?
+        return h(Fragment, null, h("div", { class: "mobile-sticky-row-header" }, h("slot", { name: `mobile-row-header-${row + 1}` })), h("div", { class: `mf-listen table-row ${(this.isDesktopView && (row % 2 != 0)) ? "desktop-alternate-row" : ""}` }, (this.isDesktopView) ?
           h("div", { class: `desktop-sticky-row-header ${(this.isDesktopView && (row % 2 != 0)) ? "desktop-alternate-row" : ""}` }, h("slot", { name: `desktop-row-header-${row + 1}` })) : null, ([...Array(this.dataCols).keys()]).map(col => {
           return h("div", { class: `table-cell ${(col + 1) === this.dataCols ? "table-last-cell" : ""}` }, h("slot", { name: `cell-r${row + 1}-c${col + 1}` }));
         }), h("div", { class: `table-filler-cell ${this.showFillerCells ? "show" : ""}` })));
@@ -394,7 +436,7 @@ export class PtcPricingPackagingTable {
           h("div", { class: "desktop-sticky-row-header" })
           : null, ([...Array(this.dataCols).keys()]).map(col => {
           return h("div", { class: `table-cell ${(col + 1) === this.dataCols ? "table-last-cell" : ""}` }, (this.ctaButtons[col]) ?
-            h("ptc-button", { "tracker-id": `pricing-cta-${col}`, type: "link", color: "ptc-tertiary", "link-href": this.ctaButtons[col].linkHref, target: `${this.ctaButtons[col].linkTarget}`, "link-title": this.ctaButtons[col].linkTitle }, this.isDesktopView ?
+            h("ptc-button", { "tracker-id": `pricing-cta-${col}-${this.sectionId}`, type: "link", color: "ptc-tertiary", "link-href": this.ctaButtons[col].linkHref, target: `${this.ctaButtons[col].linkTarget}`, "link-title": this.ctaButtons[col].linkTitle, onFocus: this.handleAutoScrollOnFocus }, this.isDesktopView ?
               h("ptc-tooltip", { class: (col === (this.dataCols - 1)) ? "last-column-tooltip" : "", "text-display": "inline", "max-length": "30", "z-index": "z-2", description: this.ctaButtons[col].linkText, position: "top" })
               : this.ctaButtons[col].linkText) : null);
         }), h("div", { class: `table-filler-cell ${this.showFillerCells ? "show" : ""}` })) : null;
@@ -560,6 +602,24 @@ export class PtcPricingPackagingTable {
         "attribute": "less-text",
         "reflect": false,
         "defaultValue": "\"Less\""
+      },
+      "sectionId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Component ID for table uniqueness"
+        },
+        "attribute": "section-id",
+        "reflect": false,
+        "defaultValue": "\"\""
       }
     };
   }

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

@@ -1046,7 +1046,7 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 992px) {
   .u-3-col-grid .u-3-col {
-    width: calc(33.333333333333% - 10.66666666px);
+    width: calc(33.3333333333% - 10.66666666px);
   }
 }
 .u-3-col-grid.u-col-space-lg {
@@ -1063,7 +1063,7 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 992px) {
   .u-3-col-grid.u-col-space-lg .u-3-col {
-    width: calc(33.333333333333% - 21.3333333px);
+    width: calc(33.3333333333% - 21.3333333px);
   }
 }
 

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

@@ -2215,9 +2215,9 @@
 .iti__v-hide {
   visibility: hidden;
 }
-.iti input,
-.iti input[type=text],
-.iti input[type=tel] {
+.iti input.iti__tel-input,
+.iti input.iti__tel-input[type=text],
+.iti input.iti__tel-input[type=tel] {
   position: relative;
   z-index: 0;
   margin-top: 0 !important;
@@ -2256,26 +2256,35 @@
   border-top: none;
   border-bottom: 4px solid #555;
 }
-.iti__country-list {
+.iti__dropdown-content {
   position: absolute;
   z-index: 2;
-  list-style: none;
-  padding: 0;
-  margin: 0 0 0 -1px;
+  margin-left: -1px;
   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
   background-color: white;
   border: 1px solid #ccc;
-  white-space: nowrap;
   max-height: 200px;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
 }
-.iti__country-list--dropup {
+.iti__dropdown-content--dropup {
   bottom: 100%;
   margin-bottom: -1px;
 }
+.iti__search-input {
+  width: 100%;
+  border-width: 0;
+}
+.iti__country-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.iti--flexible-dropdown-width .iti__country-list {
+  white-space: nowrap;
+}
 @media (max-width: 500px) {
-  .iti__country-list {
+  .iti--flexible-dropdown-width .iti__country-list {
     white-space: normal;
   }
 }
@@ -2307,20 +2316,20 @@
   margin-right: 0;
   margin-left: 6px;
 }
-.iti--allow-dropdown input,
-.iti--allow-dropdown input[type=text],
-.iti--allow-dropdown input[type=tel], .iti--separate-dial-code input,
-.iti--separate-dial-code input[type=text],
-.iti--separate-dial-code input[type=tel] {
+.iti--allow-dropdown input.iti__tel-input,
+.iti--allow-dropdown input.iti__tel-input[type=text],
+.iti--allow-dropdown input.iti__tel-input[type=tel], .iti--separate-dial-code input.iti__tel-input,
+.iti--separate-dial-code input.iti__tel-input[type=text],
+.iti--separate-dial-code input.iti__tel-input[type=tel] {
   padding-right: 6px;
   padding-left: 52px;
   margin-left: 0;
 }
-[dir=rtl] .iti--allow-dropdown input,
-[dir=rtl] .iti--allow-dropdown input[type=text],
-[dir=rtl] .iti--allow-dropdown input[type=tel], [dir=rtl] .iti--separate-dial-code input,
-[dir=rtl] .iti--separate-dial-code input[type=text],
-[dir=rtl] .iti--separate-dial-code input[type=tel] {
+[dir=rtl] .iti--allow-dropdown input.iti__tel-input,
+[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=text],
+[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=tel], [dir=rtl] .iti--separate-dial-code input.iti__tel-input,
+[dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=text],
+[dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=tel] {
   padding-right: 52px;
   padding-left: 6px;
   margin-right: 0;
@@ -2339,12 +2348,12 @@
 .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
   background-color: rgba(0, 0, 0, 0.05);
 }
-.iti--allow-dropdown input[disabled] + .iti__flag-container:hover,
-.iti--allow-dropdown input[readonly] + .iti__flag-container:hover {
+.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover,
+.iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover {
   cursor: default;
 }
-.iti--allow-dropdown input[disabled] + .iti__flag-container:hover .iti__selected-flag,
-.iti--allow-dropdown input[readonly] + .iti__flag-container:hover .iti__selected-flag {
+.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover .iti__selected-flag,
+.iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover .iti__selected-flag {
   background-color: transparent;
 }
 .iti--separate-dial-code .iti__selected-flag {
@@ -2368,18 +2377,26 @@
   cursor: pointer;
 }
 
-.iti-mobile .iti--container {
-  top: 30px;
-  bottom: 30px;
-  left: 30px;
-  right: 30px;
+.iti--fullscreen-popup.iti--container {
+  background-color: rgba(0, 0, 0, 0.5);
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
   position: fixed;
+  padding: 30px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.iti--fullscreen-popup.iti--container.iti--country-search {
+  justify-content: flex-start;
 }
-.iti-mobile .iti__country-list {
+.iti--fullscreen-popup .iti__dropdown-content {
   max-height: 100%;
-  width: 100%;
+  position: relative;
 }
-.iti-mobile .iti__country {
+.iti--fullscreen-popup .iti__country {
   padding: 10px 10px;
   line-height: 1.5em;
 }
@@ -2405,7 +2422,7 @@
 .iti__flag.iti__va {
   width: 15px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 2x) {
   .iti__flag {
     background-size: 5762px 15px;
   }
@@ -3471,7 +3488,7 @@
   background-color: #dbdbdb;
   background-position: 20px 0;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 2x) {
   .iti__flag {
     background-image: url("../img/flags@2x.png?1");
   }