@ptcwebops/ptcw-design 2.4.2 → 2.4.4

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

@@ -2,12 +2,6 @@
   display: block;
   position: relative;
 }
-@media only screen and (min-width: 768px) {
-  :host .table-descriptor {
-    width: 768px;
-    margin: auto;
-  }
-}
 :host #vertical-scroll-content-clipper {
   position: fixed;
   top: 0;
@@ -39,15 +33,10 @@
 :host #sticky-header-container::-webkit-scrollbar {
   display: none;
 }
-@media only screen and (min-width: 768px) {
-  :host #sticky-header-container {
-    box-shadow: none;
-  }
-}
 :host #sticky-header-container th {
   background: var(--color-gray-10);
   color: white;
-  padding: 16px 24px 16px 24px;
+  padding: var(--ptc-element-spacing-04) var(--ptc-element-spacing-06) var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);
   min-width: 168px;
   max-width: 180px;
   vertical-align: middle;
@@ -65,28 +54,6 @@
   width: 99%;
   box-sizing: content-box;
 }
-@media only screen and (min-width: 768px) {
-  :host #sticky-header-container th {
-    max-width: 275px;
-  }
-  :host #sticky-header-container th.desktop-header-first-cell {
-    display: table-cell;
-    min-width: 275px;
-    box-sizing: content-box;
-  }
-  :host #sticky-header-container th:first-of-type {
-    position: -webkit-sticky;
-    position: sticky;
-    left: 0;
-    z-index: 5;
-  }
-  :host #sticky-header-container th.table-filler-header-cell {
-    width: 99%;
-    display: none;
-    max-width: fit-content;
-    box-sizing: border-box;
-  }
-}
 :host .scroll-buttons-container {
   position: absolute;
   top: 0;
@@ -99,6 +66,7 @@
   z-index: 15;
   position: absolute;
   display: inline-block;
+  width: 36px;
   width: fit-content;
   height: 36px;
   background-color: white;
@@ -108,39 +76,33 @@
   align-items: center;
 }
 :host .scroll-buttons-container .scroll-buttons icon-asset {
+  z-index: 15;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 36px;
+  height: 100%;
 }
 :host .scroll-buttons-container .scroll-buttons.prev-button {
+  z-index: 15;
   left: 0;
-  border-radius: 0px 4px 4px 0px;
+  border-radius: 0px var(--ptc-element-spacing-01) var(--ptc-element-spacing-01) 0px;
 }
 :host .scroll-buttons-container .scroll-buttons.prev-button ptc-para {
+  z-index: 15;
+  margin-right: var(--ptc-element-spacing-04);
   display: none;
 }
-:host .scroll-buttons-container .scroll-buttons.prev-button:hover {
-  cursor: pointer;
-}
-:host .scroll-buttons-container .scroll-buttons.prev-button:hover ptc-para {
-  margin-right: 16px;
-  display: block;
-}
 :host .scroll-buttons-container .scroll-buttons.next-button {
+  z-index: 15;
   right: 0;
-  border-radius: 4px 0px 0px 4px;
+  border-radius: var(--ptc-element-spacing-01) 0px 0px var(--ptc-element-spacing-01);
 }
 :host .scroll-buttons-container .scroll-buttons.next-button ptc-para {
+  z-index: 15;
+  margin-left: var(--ptc-element-spacing-04);
   display: none;
 }
-:host .scroll-buttons-container .scroll-buttons.next-button:hover {
-  cursor: pointer;
-}
-:host .scroll-buttons-container .scroll-buttons.next-button:hover ptc-para {
-  margin-left: 16px;
-  display: block;
-}
 :host #table-container {
   border-radius: var(--ptc-border-radius-standard);
   box-shadow: var(--ptc-shadow-x-small);
@@ -150,26 +112,13 @@
 :host #table-container #horizontal-scroll-box-shadow {
   display: none;
 }
-@media only screen and (min-width: 768px) {
-  :host #table-container #horizontal-scroll-box-shadow {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 24px;
-    background: linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 100%);
-    z-index: 10;
-    visibility: hidden;
-  }
-}
 :host #table-container table {
   border-spacing: 0;
 }
 :host #table-container th {
   background: var(--color-gray-10);
   color: white;
-  padding: 16px 24px 16px 24px;
+  padding: var(--ptc-element-spacing-04) var(--ptc-element-spacing-06) var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);
 }
 :host #table-container th:not(:last-child) {
   border-right: 1px solid var(--color-gray-07);
@@ -181,25 +130,6 @@
   width: 99%;
   display: none;
 }
-@media only screen and (min-width: 768px) {
-  :host #table-container th {
-    max-width: 275px;
-  }
-  :host #table-container th.desktop-header-first-cell {
-    display: table-cell;
-    min-width: 275px;
-  }
-  :host #table-container th:first-of-type {
-    position: -webkit-sticky;
-    position: sticky;
-    left: 0;
-    z-index: 5;
-  }
-  :host #table-container th.table-filler-header-cell {
-    width: 99%;
-    display: none;
-  }
-}
 :host #table-container tbody.mobile-table-body {
   display: contents;
   width: 100%;
@@ -207,15 +137,6 @@
 :host #table-container tbody.desktop-table-body {
   display: none;
 }
-@media only screen and (min-width: 768px) {
-  :host #table-container tbody.mobile-table-body {
-    display: none;
-  }
-  :host #table-container tbody.desktop-table-body {
-    display: contents;
-    width: 100%;
-  }
-}
 :host #table-container tr {
   background-color: white;
   width: 100%;
@@ -233,25 +154,14 @@
 :host #table-container tr.table-button-row td {
   border-top: 1px solid var(--color-gray-02);
 }
-@media only screen and (min-width: 768px) {
-  :host #table-container tr:nth-child(odd) {
-    background-color: white;
-  }
-  :host #table-container tr:nth-child(even) {
-    background-color: var(--color-gray-01);
-  }
-  :host #table-container tr.table-button-row {
-    background-color: white;
-  }
-  :host #table-container tr.table-button-row td {
-    border-top: 1px solid var(--color-gray-02);
-  }
+:host #table-container tr.table-button-row td ptc-tooltip .text-ellipsis {
+  font-size: var(--ptc-font-size-x-small);
 }
 :host #table-container td {
   text-align: center;
   min-width: 168px;
   max-width: 180px;
-  padding: 16px 24px 16px 24px;
+  padding: var(--ptc-element-spacing-04) var(--ptc-element-spacing-06) var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);
 }
 :host #table-container td:not(:last-child) {
   border-right: 1px solid var(--color-gray-02);
@@ -261,6 +171,82 @@
   display: none;
 }
 @media only screen and (min-width: 768px) {
+  :host .table-descriptor {
+    width: 768px;
+    margin: auto;
+  }
+}
+@media only screen and (min-width: 992px) {
+  :host #sticky-header-container {
+    box-shadow: none;
+  }
+  :host #sticky-header-container th {
+    max-width: 275px;
+  }
+  :host #sticky-header-container th.desktop-header-first-cell {
+    display: table-cell;
+    min-width: 275px;
+    box-sizing: content-box;
+  }
+  :host #sticky-header-container th:first-of-type {
+    position: -webkit-sticky;
+    position: sticky;
+    left: 0;
+    z-index: 5;
+  }
+  :host #sticky-header-container th.table-filler-header-cell {
+    width: 99%;
+    display: none;
+    max-width: fit-content;
+    box-sizing: border-box;
+  }
+  :host #table-container #horizontal-scroll-box-shadow {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: var(--ptc-element-spacing-06);
+    background: linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 100%);
+    z-index: 10;
+    visibility: hidden;
+  }
+  :host #table-container th {
+    max-width: 275px;
+  }
+  :host #table-container th.desktop-header-first-cell {
+    display: table-cell;
+    min-width: 275px;
+  }
+  :host #table-container th:first-of-type {
+    position: -webkit-sticky;
+    position: sticky;
+    left: 0;
+    z-index: 5;
+  }
+  :host #table-container th.table-filler-header-cell {
+    width: 99%;
+    display: none;
+  }
+  :host #table-container tbody.mobile-table-body {
+    display: none;
+  }
+  :host #table-container tbody.desktop-table-body {
+    display: contents;
+    width: 100%;
+  }
+  :host #table-container tr:nth-child(odd) {
+    background-color: white;
+  }
+  :host #table-container tr:nth-child(even) {
+    background-color: var(--color-gray-01);
+  }
+  :host #table-container tr.table-button-row {
+    background-color: white;
+  }
+  :host #table-container tr.table-button-row td {
+    border-top: 1px solid var(--color-gray-02);
+  }
   :host #table-container td {
     max-width: 275px;
   }

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

@@ -15,15 +15,18 @@ export class PtcPricingTable {
       var _a, _b, _c, _d, _e, _f, _g;
       this.targetElements = this.getTargetElements();
       this.targetElements["sticky-header-container"].scrollLeft = (_a = this.targetElements["table-container"]) === null || _a === void 0 ? void 0 : _a.scrollLeft;
+      // Scroll the button containers in sync with the table's scrolling
       if (((_b = this.targetElements["table-container"]) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().right) <= ((_c = this.targetElements["table"]) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().right)) {
         this.targetElements["normal-scroll-buttons-container"].style.left = `${((_d = this.targetElements["table-container"]) === null || _d === void 0 ? void 0 : _d.scrollLeft) + this.desktopHeaderFirstCellWidth}px`;
         this.targetElements["sticky-scroll-buttons-container"].style.left = `${((_e = this.targetElements["table-container"]) === null || _e === void 0 ? void 0 : _e.scrollLeft) + this.desktopHeaderFirstCellWidth}px`;
       }
+      // Scroll the mobile row headers along with the table in the mobile view
       if (this.targetElements["mobile-table-row-headers"].length > 0) {
         for (let i = 0; i < this.dataRows; i++) {
           this.targetElements["mobile-table-row-headers"][i].style.paddingLeft = `${(_f = this.targetElements["table-container"]) === null || _f === void 0 ? void 0 : _f.scrollLeft}px`;
         }
       }
+      // Managing the visibility of the next scroll buttons in both the sticky and normal headers, depending on whether the table can scroll further to the right or not
       if (Math.trunc(this.targetElements["table-container"].getBoundingClientRect().right) >= Math.trunc(this.targetElements["table"].getBoundingClientRect().right)) {
         this.targetElements["normal-next-scroll-button"].style.visibility = 'hidden';
         if (this.targetElements["sticky-header-container"].style.visibility === 'visible') {
@@ -36,6 +39,7 @@ export class PtcPricingTable {
           this.targetElements["sticky-next-scroll-button"].style.visibility = 'visible';
         }
       }
+      // Adjusting the visibility of the previous scroll buttons in both the sticky and normal headers, as well as the box shadow in desktop view, depending on whether the table can scroll further to the left or not
       if (this.targetElements["table-container"].scrollLeft === 0) {
         this.targetElements["horizontal-scroll-box-shadow"].style.left = '0';
         this.targetElements["horizontal-scroll-box-shadow"].style.visibility = 'hidden';
@@ -60,19 +64,19 @@ export class PtcPricingTable {
         // Scrolling Up
         if (this.targetElements["table-container"].getBoundingClientRect().bottom > 0) {
           if (this.targetElements["sticky-header-container"].getBoundingClientRect().top < 0) {
-            // Scroll the sticky header back into the window along with the table
+            // Scroll the sticky header back into view along with the table
             this.targetElements["vertical-scroll-content-clipper"].style.display = 'block';
             this.targetElements["sticky-scroll-buttons-container"].style.opacity = '1';
             this.targetElements["sticky-header-container"].style.visibility = 'visible';
             this.targetElements["sticky-header-container"].style.top = `${this.targetElements["table-container"].getBoundingClientRect().bottom - this.targetElements["sticky-header-container"].getBoundingClientRect().height}px`;
           }
           else {
-            // Fix the sticky header once it is completely inside the window
+            // Make the sticky header fixed once it is entirely within the window
             this.targetElements["sticky-header-container"].style.top = this.scrollTopClipperHeight;
           }
         }
         if (this.targetElements["table-header"].getBoundingClientRect().top > this.targetElements["sticky-header-container"].getBoundingClientRect().top) {
-          // Hide the sticky header and show the normal header
+          // Conceal the sticky header and reveal the normal header
           this.targetElements["sticky-scroll-buttons-container"].style.opacity = '0';
           this.targetElements["sticky-header-container"].style.visibility = 'hidden';
           this.targetElements["table-header"].style.visibility = 'visible';
@@ -82,7 +86,7 @@ export class PtcPricingTable {
       else if (scrollTopPosition > this.lastScrollTop) {
         // Scrolling down
         if (this.targetElements["sticky-header-container"].getBoundingClientRect().bottom <= 0) {
-          // Reset and hide the sticky header on top once it scrolls out of the window
+          // Reset and hide the sticky header when it scrolls out of the top of the window
           this.targetElements["sticky-header-container"].style.top = `${-this.targetElements["sticky-header-container"].getBoundingClientRect().height}px`;
           this.targetElements["sticky-scroll-buttons-container"].style.opacity = '0';
           this.targetElements["sticky-header-container"].style.visibility = 'hidden';
@@ -94,7 +98,7 @@ export class PtcPricingTable {
             this.targetElements["sticky-header-container"].style.top = `${(this.targetElements["table-container"].getBoundingClientRect().bottom - this.targetElements["sticky-header-container"].clientHeight)}px`;
           }
           else {
-            // Hide the normal header and show the sticky header
+            // Conceal the normal header and reveal the sticky header
             this.targetElements["vertical-scroll-content-clipper"].style.display = 'block';
             this.targetElements["sticky-scroll-buttons-container"].style.opacity = '1';
             this.targetElements["sticky-header-container"].style.visibility = 'visible';
@@ -136,6 +140,7 @@ export class PtcPricingTable {
     this.ctaButtons = [];
     this.disclaimers = [];
   }
+  // Provides an object containing frequently accessed HTML elements for table-related operations
   getTargetElements() {
     let pricingTable = this.el.shadowRoot;
     let verticalScrollContentClipper = pricingTable === null || pricingTable === void 0 ? void 0 : pricingTable.querySelector('#vertical-scroll-content-clipper');
@@ -157,9 +162,13 @@ export class PtcPricingTable {
     let normalScrollButtonsContainer = tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.querySelector('.scroll-buttons-container');
     let stickyScrollButtonsContainer = stickyHeaderContainer === null || stickyHeaderContainer === void 0 ? void 0 : stickyHeaderContainer.querySelector('.scroll-buttons-container');
     let normalPreviousScrollButton = normalScrollButtonsContainer === null || normalScrollButtonsContainer === void 0 ? void 0 : normalScrollButtonsContainer.querySelector('.prev-button');
+    let normalPreviousScrollButtonText = normalPreviousScrollButton === null || normalPreviousScrollButton === void 0 ? void 0 : normalPreviousScrollButton.querySelector('ptc-para');
     let stickyPreviousScrollButton = stickyScrollButtonsContainer === null || stickyScrollButtonsContainer === void 0 ? void 0 : stickyScrollButtonsContainer.querySelector('.prev-button');
+    let stickyPreviousScrollButtonText = stickyPreviousScrollButton === null || stickyPreviousScrollButton === void 0 ? void 0 : stickyPreviousScrollButton.querySelector('ptc-para');
     let normalNextScrollButton = normalScrollButtonsContainer === null || normalScrollButtonsContainer === void 0 ? void 0 : normalScrollButtonsContainer.querySelector('.next-button');
+    let normalNextScrollButtonText = normalNextScrollButton === null || normalNextScrollButton === void 0 ? void 0 : normalNextScrollButton.querySelector('ptc-para');
     let stickyNextScrollButton = stickyScrollButtonsContainer === null || stickyScrollButtonsContainer === void 0 ? void 0 : stickyScrollButtonsContainer.querySelector('.next-button');
+    let stickyNextScrollButtonText = stickyNextScrollButton === null || stickyNextScrollButton === void 0 ? void 0 : stickyNextScrollButton.querySelector('ptc-para');
     let horizontalScrollBoxShadow = tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.querySelector('#horizontal-scroll-box-shadow');
     let targetElements = {
       "vertical-scroll-content-clipper": verticalScrollContentClipper,
@@ -182,23 +191,31 @@ export class PtcPricingTable {
       "normal-scroll-buttons-container": normalScrollButtonsContainer,
       "sticky-scroll-buttons-container": stickyScrollButtonsContainer,
       "normal-previous-scroll-button": normalPreviousScrollButton,
+      "normal-previous-scroll-button-text": normalPreviousScrollButtonText,
       "sticky-previous-scroll-button": stickyPreviousScrollButton,
+      "sticky-previous-scroll-button-text": stickyPreviousScrollButtonText,
       "normal-next-scroll-button": normalNextScrollButton,
+      "normal-next-scroll-button-text": normalNextScrollButtonText,
       "sticky-next-scroll-button": stickyNextScrollButton,
+      "sticky-next-scroll-button-text": stickyNextScrollButtonText,
       "horizontal-scroll-box-shadow": horizontalScrollBoxShadow,
     };
     return targetElements;
   }
+  // Sets up the scroll buttons container for both the sticky and normal headers
   configureScrollButtonsContainers() {
     this.targetElements = this.getTargetElements();
+    // Defines the dimensions
     this.targetElements["normal-scroll-buttons-container"].style.width = `${this.targetElements["table-container"].clientWidth}px`;
     this.targetElements["normal-scroll-buttons-container"].style.height = `${this.targetElements["table-header"].clientHeight}px`;
     this.targetElements["sticky-scroll-buttons-container"].style.width = `${this.targetElements["table-container"].clientWidth}px`;
     this.targetElements["sticky-scroll-buttons-container"].style.height = `${this.targetElements["table-header"].clientHeight}px`;
+    // For desktop screens, scroll buttons are positioned after the first column of the table
     if (this.targetElements["desktop-header-first-cell"]) {
       this.targetElements["normal-scroll-buttons-container"].style.width = `${this.targetElements["normal-scroll-buttons-container"].getBoundingClientRect().width - this.desktopHeaderFirstCellWidth}px`;
       this.targetElements["sticky-scroll-buttons-container"].style.width = `${this.targetElements["sticky-scroll-buttons-container"].getBoundingClientRect().width - this.desktopHeaderFirstCellWidth}px`;
     }
+    // Controlling the visibility of the previous scroll buttons, of the sticky and normal headers, based on whether table can scroll further to the left or not
     if (this.targetElements["table-container"].scrollLeft === 0) {
       this.targetElements["normal-previous-scroll-button"].style.visibility = 'hidden';
       if (this.targetElements["sticky-header-container"].style.visibility === 'visible') {
@@ -211,6 +228,7 @@ export class PtcPricingTable {
         this.targetElements["sticky-previous-scroll-button"].style.visibility = 'visible';
       }
     }
+    // Managing the visibility of the next scroll buttons in both the sticky and normal headers, depending on whether the table can be scrolled further to the right or not
     if (this.targetElements["table-container"].getBoundingClientRect().width >= this.targetElements["table"].getBoundingClientRect().width) {
       this.targetElements["normal-next-scroll-button"].style.visibility = 'hidden';
       if (this.targetElements["sticky-header-container"].style.visibility === 'visible') {
@@ -224,12 +242,23 @@ export class PtcPricingTable {
       }
     }
   }
+  // Configures the sticky header based on the dimensions of the table header
   configureStickyHeader() {
     var _a, _b, _c, _d, _e, _f;
     const targetElements = this.getTargetElements();
-    // Dimensions
+    // Expanding the content clipper by an additional 10px on each side to accommodate the table's box-shadow
     targetElements["vertical-scroll-content-clipper"].style.width = `${targetElements["table-container"].clientWidth + 20}px`;
+    // Aligns the background color of the element with the body's background color
+    const bodyBackgroundColor = window.getComputedStyle(document.body, null).getPropertyValue('background-color');
+    if (bodyBackgroundColor === ("rgba(0, 0, 0, 0)" || "transparent" || "white")) {
+      targetElements["vertical-scroll-content-clipper"].style.backgroundColor = "white";
+    }
+    else {
+      targetElements["vertical-scroll-content-clipper"].style.backgroundColor = bodyBackgroundColor;
+    }
+    // Establishing the width of the sticky header to be in line with the table's width
     targetElements["sticky-header-container"].style.width = `${targetElements["table-container"].clientWidth}px`;
+    // Adjusts the table's sticky behavior, making it adhere at varying positions below the top, contingent on factors like the device type (mobile or desktop) and the presence of a subnav in the page
     if (this.pageWithSubnav) {
       if (window.innerWidth >= 1200) {
         this.scrollTopClipperHeight = this.scrollTopClipperHeightOptions.withSubNav.desktop;
@@ -248,6 +277,7 @@ export class PtcPricingTable {
     }
     targetElements["vertical-scroll-content-clipper"].style.height = this.scrollTopClipperHeight;
     targetElements["sticky-header-container"].style.top = this.scrollTopClipperHeight;
+    // Align the widths of sticky header cells with those of the normal header cells
     for (let i = 0; i < targetElements["table-header-cells"].length; i++) {
       targetElements["sticky-header-cells"][i].style.width = `${targetElements["table-header-cells"][i].getBoundingClientRect().width}px`;
       if (targetElements["table-header-cells"][i].classList.contains('desktop-header-first-cell')) {
@@ -275,7 +305,7 @@ export class PtcPricingTable {
     this.targetElements = this.getTargetElements();
     this.targetElements["table-filler-sticky-header-cell"].style.width = this.targetElements["table-filler-header-cell"].getBoundingClientRect().width;
     if (this.targetElements['table'].getBoundingClientRect().width < this.targetElements['table-container'].getBoundingClientRect().width) {
-      // Table smaller than container - Insert fillers
+      // If the table is smaller than the container, insert fillers
       this.targetElements["table-filler-sticky-header-cell"].style.display = 'table-cell';
       this.targetElements["table-filler-header-cell"].style.display = 'table-cell';
       for (let i = 0; i < this.dataRows; i++) {
@@ -287,7 +317,7 @@ export class PtcPricingTable {
       this.mobileHeaderRowColSpan = this.dataCols + 1;
     }
     else {
-      // Table equal to or bigger than container - Remove fillers
+      // If the table is equal to or larger than the container, remove fillers
       this.targetElements["table-filler-sticky-header-cell"].style.width = '99%';
       if (getComputedStyle(this.targetElements["sticky-next-scroll-button"]).visibility === 'hidden') {
         for (let i = 0; i < this.targetElements["sticky-header-cells"].length + 1; i++) {
@@ -302,8 +332,27 @@ export class PtcPricingTable {
     var _a;
     this.targetElements["table-container"].scrollLeft = (_a = this.targetElements["sticky-header-container"]) === null || _a === void 0 ? void 0 : _a.scrollLeft;
   }
+  handleScrollForwardHover() {
+    if (this.targetElements["normal-next-scroll-button"].getAttribute("data-clicked") !== "true") {
+      document.body.style.cursor = 'pointer';
+      this.targetElements["normal-next-scroll-button-text"].style.display = "block";
+      this.targetElements["sticky-next-scroll-button-text"].style.display = "block";
+    }
+  }
+  handleScrollForwardHoverOut() {
+    if (this.targetElements["normal-next-scroll-button"].getAttribute("data-clicked") !== "true") {
+      document.body.style.cursor = 'auto';
+      this.targetElements["normal-next-scroll-button-text"].style.display = "none";
+      this.targetElements["sticky-next-scroll-button-text"].style.display = "none";
+    }
+  }
   handleScrollForward() {
     this.targetElements = this.getTargetElements();
+    // Display the "See more" text when clicked
+    document.body.style.cursor = 'pointer';
+    this.targetElements["normal-next-scroll-button"].setAttribute("data-clicked", "true");
+    this.targetElements["normal-next-scroll-button-text"].style.display = "block";
+    this.targetElements["sticky-next-scroll-button-text"].style.display = "block";
     let scrollAdded = 0;
     let intervalId = setInterval(() => {
       scrollAdded += this.scrollAmount;
@@ -311,12 +360,38 @@ export class PtcPricingTable {
       let tableRight = this.targetElements["table"].getBoundingClientRect().right;
       if ((scrollAdded == this.scrollLimit) || (tableContainerRight >= tableRight)) {
         clearInterval(intervalId);
+        this.targetElements["normal-next-scroll-button"].setAttribute("data-clicked", "false");
+        // Remove the "See more" text if the mouse is not hovering over the button after scrolling
+        if (!this.targetElements["normal-next-scroll-button"].matches(':hover') && !this.targetElements["sticky-next-scroll-button"].matches(':hover')) {
+          document.body.style.cursor = 'auto';
+          this.targetElements["normal-next-scroll-button-text"].style.display = "none";
+          this.targetElements["sticky-next-scroll-button-text"].style.display = "none";
+        }
       }
       this.targetElements["table-container"].scrollLeft += scrollAdded;
     }, this.scrollTimeInterval);
   }
+  handleScrollBackwardHover() {
+    document.body.style.cursor = 'pointer';
+    if (this.targetElements["normal-previous-scroll-button"].getAttribute("data-clicked") !== "true") {
+      this.targetElements["normal-previous-scroll-button-text"].style.display = "block";
+      this.targetElements["sticky-previous-scroll-button-text"].style.display = "block";
+    }
+  }
+  handleScrollBackwardHoverOut() {
+    document.body.style.cursor = 'auto';
+    if (this.targetElements["normal-previous-scroll-button"].getAttribute("data-clicked") !== "true") {
+      this.targetElements["normal-previous-scroll-button-text"].style.display = "none";
+      this.targetElements["sticky-previous-scroll-button-text"].style.display = "none";
+    }
+  }
   handleScrollBackward() {
     this.targetElements = this.getTargetElements();
+    // Display the "See more" text when clicked
+    document.body.style.cursor = 'pointer';
+    this.targetElements["normal-previous-scroll-button"].setAttribute("data-clicked", "true");
+    this.targetElements["normal-previous-scroll-button-text"].style.display = "block";
+    this.targetElements["sticky-previous-scroll-button-text"].style.display = "block";
     let scrollReduced = 0;
     let intervalId = setInterval(() => {
       scrollReduced += this.scrollAmount;
@@ -324,6 +399,14 @@ export class PtcPricingTable {
       let tableLeft = this.targetElements["table"].getBoundingClientRect().left;
       if ((scrollReduced == this.scrollLimit) || (tableContainerLeft <= tableLeft)) {
         clearInterval(intervalId);
+        this.targetElements["normal-previous-scroll-button"].setAttribute("data-clicked", "false");
+        // Remove the "See more" text if the mouse is not hovering over the button after scrolling
+        if (!this.targetElements["normal-previous-scroll-button"].matches(':hover') && !this.targetElements["sticky-previous-scroll-button"].matches(':hover')) {
+          document.body.style.cursor = 'auto';
+          this.targetElements["normal-previous-scroll-button-text"].style.display = "none";
+          this.targetElements["sticky-previous-scroll-button-text"].style.display = "none";
+        }
+        return;
       }
       this.targetElements["table-container"].scrollLeft -= scrollReduced;
     }, this.scrollTimeInterval);
@@ -386,7 +469,7 @@ export class PtcPricingTable {
       return (this.tableDescription && h(Fragment, null, h("div", { class: "table-descriptor" }, h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-align": "center", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, (this.tableDescription.length <= 500) ? this.tableDescription : h("ptc-readmore", { "more-text": "See more" }, this.tableDescription)))));
     };
     const getScrollButtonsContainer = () => {
-      return h("div", { class: "scroll-buttons-container" }, h("div", { class: "scroll-buttons prev-button", onClick: () => this.handleScrollBackward() }, 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" }, "See More")), h("div", { class: "scroll-buttons next-button", onClick: () => this.handleScrollForward() }, 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" }, "See More"), h("icon-asset", { type: "solid", size: "medium", name: "chevron-right", color: "primary-gray" })));
+      return h("div", { class: "scroll-buttons-container" }, h("div", { class: "scroll-buttons prev-button", "data-clicked": "false", onClick: () => this.handleScrollBackward(), onMouseOver: () => this.handleScrollBackwardHover(), onMouseOut: () => this.handleScrollBackwardHoverOut() }, 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" }, "See More")), h("div", { class: "scroll-buttons next-button", "data-clicked": "false", onClick: () => this.handleScrollForward(), onMouseOver: () => this.handleScrollForwardHover(), onMouseOut: () => this.handleScrollForwardHoverOut() }, 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" }, "See More"), h("icon-asset", { type: "solid", size: "medium", name: "chevron-right", color: "primary-gray" })));
     };
     const getTableHeader = (headerType) => {
       return h("thead", null, h("tr", null, h("th", { class: "desktop-header-first-cell" }, 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" }, "Package Options")), ([...Array(this.dataCols).keys()]).map(col => {
@@ -418,7 +501,7 @@ export class PtcPricingTable {
         return h(Fragment, null, h("ptc-para", { "font-size": "xx-small", "font-weight": "w-6", "para-align": "center", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, disclaimer), (ind != (this.disclaimerCount - 1)) ? h("ptc-spacer", { size: "xx-small" }) : null);
       })));
     };
-    return (h(Host, null, h("div", { id: "vertical-scroll-content-clipper" }), h("div", { id: "sticky-header-container", onScroll: () => this.handleStickyHeaderHorizontalScroll() }, getScrollButtonsContainer(), getTableHeader("sticky")), h("ptc-spacer", { breakpoint: "small", size: "xxx-large" }), h("ptc-spacer", { breakpoint: "x-small", size: "xxxx-large" }), getTableTitle(), getTableSubTitle(), getTableDescription(), h("ptc-spacer", { breakpoint: "small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("ptc-spacer", { breakpoint: "x-small", size: "xxx-large" }), h("ptc-spacer", { breakpoint: "x-small", size: "xx-small" }), h("div", { id: "table-container", onScroll: () => this.handleHorizontalScroll() }, getScrollButtonsContainer(), h("table", null, h("div", { id: "horizontal-scroll-box-shadow" }), getTableHeader("normal"), (window.innerWidth >= 768)
+    return (h(Host, null, h("div", { id: "vertical-scroll-content-clipper" }), h("div", { id: "sticky-header-container", onScroll: () => this.handleStickyHeaderHorizontalScroll() }, getScrollButtonsContainer(), getTableHeader("sticky")), h("ptc-spacer", { breakpoint: "small", size: "xxx-large" }), h("ptc-spacer", { breakpoint: "x-small", size: "xxxx-large" }), getTableTitle(), getTableSubTitle(), getTableDescription(), h("ptc-spacer", { breakpoint: "small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("ptc-spacer", { breakpoint: "x-small", size: "xxx-large" }), h("ptc-spacer", { breakpoint: "x-small", size: "xx-small" }), h("div", { id: "table-container", onScroll: () => this.handleHorizontalScroll() }, getScrollButtonsContainer(), h("table", null, h("div", { id: "horizontal-scroll-box-shadow" }), getTableHeader("normal"), (window.innerWidth >= 992)
       ? getDesktopTableBody()
       : getMobileTableBody())), getDisclaimers(), h("ptc-spacer", { breakpoint: "small", size: "xxx-large" }), h("ptc-spacer", { breakpoint: "x-small", size: "xxxx-large" })));
   }