@ptcwebops/ptcw-design 2.4.7 → 2.4.9

package/dist/cjs/ptc-pricing-table.cjs.entry.js

@@ -2,519 +2,519 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1662de74.js');
+const index = require('./index-dddc2aea.js');
 
 const ptcPricingTableCss = ":host{display:block;position:relative}:host #vertical-scroll-content-clipper{position:fixed;top:0;left:0;right:0;margin:auto;background-color:white;z-index:25;display:none}:host .last-column-tooltip .tooltip{right:-48px}:host #sticky-header-container{position:fixed;z-index:20;background-color:white;overflow-x:scroll;overflow-y:visible;-ms-overflow-style:none;scrollbar-width:none;visibility:hidden;border-top-left-radius:var(--ptc-border-radius-standard);border-top-right-radius:var(--ptc-border-radius-standard);box-shadow:var(--ptc-shadow-x-large)}:host #sticky-header-container::-webkit-scrollbar{display:none}:host #sticky-header-container th{background:var(--color-gray-10);color:white;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}:host #sticky-header-container th:not(:last-child){border-right:1px solid var(--color-gray-07)}:host #sticky-header-container th.desktop-header-first-cell{display:none}:host #sticky-header-container th.border-box-header-cell{box-sizing:border-box}:host #sticky-header-container th.table-filler-header-cell{width:99%;box-sizing:content-box}:host .scroll-buttons-container{position:absolute;top:0;right:0;display:flex;align-items:center;box-sizing:border-box}:host .scroll-buttons-container .scroll-buttons{z-index:15;position:absolute;display:inline-block;width:36px;width:fit-content;height:36px;background-color:white;box-shadow:var(--ptc-shadow-x-medium);display:flex;justify-content:center;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 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.next-button{z-index:15;right:0;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 #table-container{border-radius:var(--ptc-border-radius-standard);box-shadow:var(--ptc-shadow-x-small);overflow-x:scroll;position:relative}:host #table-container #horizontal-scroll-box-shadow{display:none}:host #table-container table{border-spacing:0}:host #table-container th{background:var(--color-gray-10);color:white;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)}:host #table-container th.desktop-header-first-cell{display:none}:host #table-container th.table-filler-header-cell{width:99%;display:none}:host #table-container tbody.mobile-table-body{display:contents;width:100%}:host #table-container tbody.desktop-table-body{display:none}:host #table-container tr{background-color:white;width:100%;overflow-x:scroll}:host #table-container tr:nth-child(odd){background-color:var(--color-gray-01)}:host #table-container tr:nth-child(even){background-color:white}: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: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)}:host #table-container td.table-filler-body-cell{width:99%;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}:host #table-container td:first-of-type{position:-webkit-sticky;position:sticky;left:0;z-index:5;background:inherit;min-width:275px}:host #table-container td:not(:first-child){text-align:center}:host #table-container td.first-column-cell.scroll-shadow{box-shadow:var(--ptc-shadow-x-large)}:host #table-container td.first-column-cell.no-shadow{box-shadow:none}:host #table-container td.table-filler-body-cell{width:99%;display:none}:host #table-container td.table-filler-button-cell{width:99%;display:none}}";
 
-const PtcPricingTable = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.scrollTopClipperHeightOptions = {
-      withSubNav: {
-        desktop: "104px",
-        mobile: "80px"
-      },
-      withoutSubNav: {
-        desktop: "40px",
-        mobile: "24px"
-      }
-    };
-    this.handleHorizontalScroll = () => {
-      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') {
-          this.targetElements["sticky-next-scroll-button"].style.visibility = 'hidden';
-        }
-      }
-      else {
-        this.targetElements["normal-next-scroll-button"].style.visibility = 'visible';
-        if (this.targetElements["sticky-header-container"].style.visibility === 'visible') {
-          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';
-        this.targetElements["normal-previous-scroll-button"].style.visibility = 'hidden';
-        if (this.targetElements["sticky-header-container"].style.visibility === 'visible') {
-          this.targetElements["sticky-previous-scroll-button"].style.visibility = 'hidden';
-        }
-      }
-      else {
-        this.targetElements["horizontal-scroll-box-shadow"].style.left = `${((_g = this.targetElements["table-container"]) === null || _g === void 0 ? void 0 : _g.scrollLeft) + this.desktopHeaderFirstCellWidth}px`;
-        this.targetElements["horizontal-scroll-box-shadow"].style.visibility = 'visible';
-        this.targetElements["normal-previous-scroll-button"].style.visibility = 'visible';
-        if (this.targetElements["sticky-header-container"].style.visibility === 'visible') {
-          this.targetElements["sticky-previous-scroll-button"].style.visibility = 'visible';
-        }
-      }
-    };
-    this.handleVerticalScroll = () => {
-      this.targetElements = this.getTargetElements();
-      const scrollTopPosition = window.scrollY || document.documentElement.scrollTop;
-      if (scrollTopPosition < this.lastScrollTop) {
-        // 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 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 {
-            // 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) {
-          // 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';
-          this.targetElements["vertical-scroll-content-clipper"].style.display = 'none';
-        }
-      }
-      else if (scrollTopPosition > this.lastScrollTop) {
-        // Scrolling down
-        if (this.targetElements["sticky-header-container"].getBoundingClientRect().bottom <= 0) {
-          // 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';
-          this.targetElements["vertical-scroll-content-clipper"].style.display = 'none';
-        }
-        else if (this.targetElements["table-header"].getBoundingClientRect().top <= this.targetElements["sticky-header-container"].getBoundingClientRect().top) {
-          if (this.targetElements["table-container"].getBoundingClientRect().bottom <= this.targetElements["sticky-header-container"].getBoundingClientRect().bottom) {
-            // Scroll the sticky header out of the window along with the table
-            this.targetElements["sticky-header-container"].style.top = `${(this.targetElements["table-container"].getBoundingClientRect().bottom - this.targetElements["sticky-header-container"].clientHeight)}px`;
-          }
-          else {
-            // 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';
-            this.targetElements["table-header"].style.visibility = 'hidden';
-            this.targetElements["sticky-previous-scroll-button"].style.visibility = this.targetElements["normal-previous-scroll-button"].style.visibility;
-            this.targetElements["sticky-next-scroll-button"].style.visibility = this.targetElements["normal-next-scroll-button"].style.visibility;
-            if (getComputedStyle(this.targetElements["sticky-next-scroll-button"]).visibility === "visible") {
-              this.targetElements["table-filler-sticky-header-cell"].style.boxSizing = "content-box";
-            }
-          }
-        }
-      }
-      this.lastScrollTop = scrollTopPosition <= 0 ? 0 : scrollTopPosition;
-    };
-    this.handleResize = () => {
-      this.targetElements["table-container"].scrollLeft = 0;
-      this.handleHorizontalScroll();
-      this.configureStickyHeader();
-      this.configureScrollButtonsContainers();
-      this.configureTableFillerCells();
-    };
-    this.pageWithSubnav = false;
-    this.tableTitle = undefined;
-    this.tableSubTitle = "";
-    this.tableDescription = "";
-    this.dataRows = undefined;
-    this.dataCols = undefined;
-    this.disclaimerCount = 0;
-    this.scrollTopClipperHeight = undefined;
-    this.desktopHeaderFirstCellWidth = 0;
-    this.targetElements = {};
-    this.columnHeaderLinks = [];
-    this.lastScrollTop = undefined;
-    this.scrollTimeInterval = 35;
-    this.scrollAmount = 5;
-    this.scrollLimit = 50;
-    this.mobileHeaderRowColSpan = this.dataCols;
-    this.showCtaButtonsRow = undefined;
-    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');
-    let tableContainer = pricingTable === null || pricingTable === void 0 ? void 0 : pricingTable.querySelector('#table-container');
-    let table = tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.querySelector('table');
-    let tableHeader = tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.querySelector('table thead');
-    let desktopHeaderFirstCell = tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.querySelector('.desktop-header-first-cell');
-    let tableHeaderCells = tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.querySelectorAll('th');
-    let desktopTableBody = tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.querySelector('.desktop-table-body');
-    let mobileTableBody = tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.querySelector('.mobile-table-body');
-    let stickyHeaderContainer = pricingTable === null || pricingTable === void 0 ? void 0 : pricingTable.querySelector('#sticky-header-container');
-    let stickyHeaderCells = stickyHeaderContainer === null || stickyHeaderContainer === void 0 ? void 0 : stickyHeaderContainer.querySelectorAll('th');
-    let verticalScrollBoxShadow = tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.querySelector("#vertical-scroll-box-shadow");
-    let tableFillerStickyHeaderCell = stickyHeaderContainer === null || stickyHeaderContainer === void 0 ? void 0 : stickyHeaderContainer.querySelector('.table-filler-header-cell');
-    let tableFillerHeaderCell = tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.querySelector('.table-filler-header-cell');
-    let tableFillerBodyCells = table === null || table === void 0 ? void 0 : table.querySelectorAll('.table-filler-body-cell');
-    let tableFillerButtonCell = table === null || table === void 0 ? void 0 : table.querySelector('.table-filler-button-cell');
-    let mobileTableRowHeaders = pricingTable === null || pricingTable === void 0 ? void 0 : pricingTable.querySelectorAll('.mobile-table-row-header');
-    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,
-      "pricing-table": pricingTable,
-      "table-container": tableContainer,
-      "table": table,
-      "table-header": tableHeader,
-      "desktop-header-first-cell": desktopHeaderFirstCell,
-      "table-header-cells": tableHeaderCells,
-      "desktop-table-body": desktopTableBody,
-      "mobile-table-body": mobileTableBody,
-      "sticky-header-container": stickyHeaderContainer,
-      "sticky-header-cells": stickyHeaderCells,
-      "vertical-scroll-box-shadow": verticalScrollBoxShadow,
-      "table-filler-sticky-header-cell": tableFillerStickyHeaderCell,
-      "table-filler-header-cell": tableFillerHeaderCell,
-      "table-filler-body-cells": tableFillerBodyCells,
-      "table-filler-button-cell": tableFillerButtonCell,
-      "mobile-table-row-headers": mobileTableRowHeaders,
-      "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') {
-        this.targetElements["sticky-previous-scroll-button"].style.visibility = 'hidden';
-      }
-    }
-    else {
-      this.targetElements["normal-previous-scroll-button"].style.visibility = 'visible';
-      if (this.targetElements["sticky-header-container"].style.visibility === 'visible') {
-        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') {
-        this.targetElements["sticky-next-scroll-button"].style.visibility = 'hidden';
-      }
-    }
-    else {
-      this.targetElements["normal-next-scroll-button"].style.visibility = 'visible';
-      if (this.targetElements["sticky-header-container"].style.visibility === 'visible') {
-        this.targetElements["sticky-next-scroll-button"].style.visibility = 'visible';
-      }
-    }
-  }
-  // Configures the sticky header based on the dimensions of the table header
-  configureStickyHeader() {
-    var _a, _b, _c, _d, _e, _f;
-    const targetElements = this.getTargetElements();
-    // 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)"  )) {
-      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;
-      }
-      else {
-        this.scrollTopClipperHeight = this.scrollTopClipperHeightOptions.withSubNav.mobile;
-      }
-    }
-    else {
-      if (window.innerWidth >= 1200) {
-        this.scrollTopClipperHeight = this.scrollTopClipperHeightOptions.withoutSubNav.desktop;
-      }
-      else {
-        this.scrollTopClipperHeight = this.scrollTopClipperHeightOptions.withoutSubNav.mobile;
-      }
-    }
-    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')) {
-        this.desktopHeaderFirstCellWidth = targetElements["table-header-cells"][i].getBoundingClientRect().width;
-      }
-    }
-    // Box-sizing
-    if (targetElements["table"].clientWidth <= targetElements["table-container"].clientWidth) {
-      if (targetElements["desktop-table-body"]) {
-        for (let i = 0; i < targetElements["sticky-header-cells"].length; i++) {
-          (_b = (_a = targetElements["sticky-header-cells"][i]) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add('border-box-header-cell');
-        }
-      }
-    }
-    else {
-      for (let i = 0; i < targetElements["sticky-header-cells"].length; i++) {
-        if ((_d = (_c = targetElements["sticky-header-cells"][i]) === null || _c === void 0 ? void 0 : _c.classList) === null || _d === void 0 ? void 0 : _d.contains('border-box-header-cell')) {
-          (_f = (_e = targetElements["sticky-header-cells"][i]) === null || _e === void 0 ? void 0 : _e.classList) === null || _f === void 0 ? void 0 : _f.remove('border-box-header-cell');
-        }
-      }
-    }
-  }
-  configureTableFillerCells() {
-    var _a, _b, _c, _d;
-    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) {
-      // 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++) {
-        this.targetElements["table-filler-body-cells"][i].style.display = 'table-cell';
-      }
-      if (this.targetElements["table-filler-button-cell"]) {
-        this.targetElements["table-filler-button-cell"].style.display = 'table-cell';
-      }
-      this.mobileHeaderRowColSpan = this.dataCols + 1;
-    }
-    else {
-      // 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++) {
-          if ((_b = (_a = this.targetElements["sticky-header-cells"][i]) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('border-box-header-cell')) {
-            (_d = (_c = this.targetElements["sticky-header-cells"][i]) === null || _c === void 0 ? void 0 : _c.classList) === null || _d === void 0 ? void 0 : _d.remove('border-box-header-cell');
-          }
-        }
-      }
-    }
-  }
-  handleStickyHeaderHorizontalScroll() {
-    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;
-      let tableContainerRight = this.targetElements["table-container"].getBoundingClientRect().right;
-      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;
-      let tableContainerLeft = this.targetElements["table-container"].getBoundingClientRect().left;
-      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);
-  }
-  componentWillLoad() {
-    let columnHeaders = this.el.querySelectorAll('[slot^="column-header"]');
-    for (let i = 0; i < this.dataCols; i++) {
-      let slotValue = columnHeaders[i].getAttribute('slot');
-      let headerText = columnHeaders[i].innerHTML;
-      this.el.insertAdjacentHTML('afterbegin', `<span slot="normal-${slotValue}">${headerText}</span><span slot="sticky-${slotValue}">${headerText}</span>`);
-      columnHeaders[i].remove();
-    }
-    let headerLinks = this.el.querySelectorAll('[slot^="header-link"]');
-    if (headerLinks.length > 0) {
-      for (let i = 0; i < this.dataCols; i++) {
-        let linkHref = headerLinks[i].getAttribute('href');
-        let linkText = headerLinks[i].innerHTML;
-        this.columnHeaderLinks.push({ linkHref, linkText });
-        headerLinks[i].remove();
-      }
-    }
-    let ctaButtons = this.el.querySelectorAll('[slot^="cta-button"]');
-    this.showCtaButtonsRow = (ctaButtons.length !== 0);
-    for (let i = 0; i < this.dataCols; i++) {
-      this.ctaButtons.push({
-        linkHref: ctaButtons[i].getAttribute('href'),
-        linkText: ctaButtons[i].innerHTML
-      });
-      ctaButtons[i].remove();
-    }
-    let disclaimers = this.el.querySelectorAll('[slot^="disclaimer"]');
-    for (let i = 0; i < this.disclaimerCount; i++) {
-      this.disclaimers.push(disclaimers[i].innerHTML);
-      disclaimers[i].remove();
-    }
-  }
-  componentDidLoad() {
-    this.configureTableFillerCells();
-    this.configureStickyHeader();
-    this.configureScrollButtonsContainers();
-    window.addEventListener('scroll', this.handleVerticalScroll);
-    window.addEventListener('resize', this.handleResize);
-  }
-  disconnectedCallback() {
-    window.removeEventListener('scroll', this.handleVerticalScroll);
-    window.removeEventListener('resize', this.handleResize);
-  }
-  render() {
-    const getTableTitle = () => {
-      return (this.tableTitle && index.h(index.Fragment, null, index.h("div", { class: "table-descriptor" }, index.h("ptc-title", { type: "h2", "text-align": "center", "title-size": "xx-large", upperline: "no-upperline", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-8" }, this.tableTitle)), (this.tableSubTitle)
-        ? index.h(index.Fragment, null, index.h("ptc-spacer", { breakpoint: "small", size: "x-small" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "small" }))
-        : (this.tableDescription)
-          ? index.h(index.Fragment, null, index.h("ptc-spacer", { breakpoint: "small", size: "small" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "medium" }))
-          : null));
-    };
-    const getTableSubTitle = () => {
-      return (this.tableSubTitle && index.h(index.Fragment, null, index.h("div", { class: "table-descriptor" }, index.h("ptc-title", { type: "h3", "text-align": "center", "title-size": "large", upperline: "no-upperline", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7" }, this.tableSubTitle)), index.h("ptc-spacer", { breakpoint: "small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "large" })));
-    };
-    const getTableDescription = () => {
-      return (this.tableDescription && index.h(index.Fragment, null, index.h("div", { class: "table-descriptor" }, index.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 : index.h("ptc-readmore", { "more-text": "See more" }, this.tableDescription)))));
-    };
-    const getScrollButtonsContainer = () => {
-      return index.h("div", { class: "scroll-buttons-container" }, index.h("div", { class: "scroll-buttons prev-button", "data-clicked": "false", onClick: () => this.handleScrollBackward(), onMouseOver: () => this.handleScrollBackwardHover(), onMouseOut: () => this.handleScrollBackwardHoverOut() }, index.h("icon-asset", { type: "solid", size: "medium", name: "chevron-left", color: "primary-gray" }), index.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")), index.h("div", { class: "scroll-buttons next-button", "data-clicked": "false", onClick: () => this.handleScrollForward(), onMouseOver: () => this.handleScrollForwardHover(), onMouseOut: () => this.handleScrollForwardHoverOut() }, index.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"), index.h("icon-asset", { type: "solid", size: "medium", name: "chevron-right", color: "primary-gray" })));
-    };
-    const getTableHeader = (headerType) => {
-      return index.h("thead", null, index.h("tr", null, index.h("th", { class: "desktop-header-first-cell" }, index.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 => {
-        return index.h("th", null, index.h("ptc-para", { "font-size": "medium", "font-weight": "w-7", "para-align": "center", "para-color": "white", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, index.h("slot", { name: `${headerType}-column-header-${col + 1}` })), (this.columnHeaderLinks.length === this.dataCols) ? index.h(index.Fragment, null, index.h("ptc-spacer", { breakpoint: 'small', size: "small" }), index.h("ptc-spacer", { breakpoint: 'x-small', size: "medium" }), index.h("ptc-link", { "font-size": "medium", "font-weight": "w-extrabold", href: `${this.columnHeaderLinks[col].linkHref}`, "link-area": "undefined", target: "_blank", theme: "d-green-underline" }, index.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" }))) : null);
-      }), index.h("th", { class: "table-filler-header-cell" })));
-    };
-    const getMobileTableBody = () => {
-      return index.h("tbody", { class: "mobile-table-body" }, ([...Array(this.dataRows).keys()]).map(row => {
-        return index.h(index.Fragment, null, index.h("tr", null, index.h("td", { colSpan: this.mobileHeaderRowColSpan }, index.h("div", { class: "mobile-table-row-header" }, index.h("ptc-para", { "font-size": "small", "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-1" }, index.h("slot", { name: `row-header-${row + 1}` }))))), index.h("tr", null, ([...Array(this.dataCols).keys()]).map(col => {
-          return index.h("td", null, index.h("slot", { name: `cell-r${row + 1}-c${col + 1}` }));
-        }), index.h("td", { class: "table-filler-body-cell" })));
-      }), (this.showCtaButtonsRow) ?
-        index.h("tr", { class: "table-button-row" }, ([...Array(this.dataCols).keys()]).map(col => {
-          return index.h("td", null, index.h("ptc-button", { type: "link", color: "ptc-tertiary", "link-href": this.ctaButtons[col].linkHref, target: "_blank" }, this.ctaButtons[col].linkText));
-        }), (this.mobileHeaderRowColSpan > this.dataCols) ? index.h("td", { class: "table-filler-button-cell" }) : null) : null);
-    };
-    const getDesktopTableBody = () => {
-      return index.h("tbody", { class: "desktop-table-body" }, ([...Array(this.dataRows).keys()]).map(row => {
-        return index.h("tr", null, index.h("td", { class: "first-column-cell" }, index.h("ptc-para", { "font-size": "small", "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-1" }, index.h("slot", { name: `row-header-${row + 1}` }))), ([...Array(this.dataCols).keys()]).map(col => {
-          return index.h("td", null, index.h("slot", { name: `cell-r${row + 1}-c${col + 1}` }));
-        }), index.h("td", { class: "table-filler-body-cell" }));
-      }), (this.showCtaButtonsRow) ?
-        index.h("tr", { class: "table-button-row" }, index.h("td", null), ([...Array(this.dataCols).keys()]).map(col => {
-          return index.h("td", null, index.h("ptc-button", { type: "link", color: "ptc-tertiary", "link-href": this.ctaButtons[col].linkHref, target: "_blank" }, index.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" })));
-        }), index.h("td", { class: "table-filler-button-cell" })) : null);
-    };
-    const getDisclaimers = () => {
-      return ((this.disclaimerCount > 0) && index.h(index.Fragment, null, index.h("ptc-spacer", { breakpoint: "small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "large" }), this.disclaimers.map((disclaimer, ind) => {
-        return index.h(index.Fragment, null, index.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)) ? index.h("ptc-spacer", { size: "xx-small" }) : null);
-      })));
-    };
-    return (index.h(index.Host, null, index.h("div", { id: "vertical-scroll-content-clipper" }), index.h("div", { id: "sticky-header-container", onScroll: () => this.handleStickyHeaderHorizontalScroll() }, getScrollButtonsContainer(), getTableHeader("sticky")), index.h("ptc-spacer", { breakpoint: "small", size: "xxx-large" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "xxxx-large" }), getTableTitle(), getTableSubTitle(), getTableDescription(), index.h("ptc-spacer", { breakpoint: "small", size: "xx-large" }), index.h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "xxx-large" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "xx-small" }), index.h("div", { id: "table-container", onScroll: () => this.handleHorizontalScroll() }, getScrollButtonsContainer(), index.h("table", null, index.h("div", { id: "horizontal-scroll-box-shadow" }), getTableHeader("normal"), (window.innerWidth >= 992)
-      ? getDesktopTableBody()
-      : getMobileTableBody())), getDisclaimers(), index.h("ptc-spacer", { breakpoint: "small", size: "xxx-large" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "xxxx-large" })));
-  }
-  get el() { return index.getElement(this); }
-};
+const PtcPricingTable = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.scrollTopClipperHeightOptions = {
+      withSubNav: {
+        desktop: "104px",
+        mobile: "80px"
+      },
+      withoutSubNav: {
+        desktop: "40px",
+        mobile: "24px"
+      }
+    };
+    this.handleHorizontalScroll = () => {
+      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') {
+          this.targetElements["sticky-next-scroll-button"].style.visibility = 'hidden';
+        }
+      }
+      else {
+        this.targetElements["normal-next-scroll-button"].style.visibility = 'visible';
+        if (this.targetElements["sticky-header-container"].style.visibility === 'visible') {
+          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';
+        this.targetElements["normal-previous-scroll-button"].style.visibility = 'hidden';
+        if (this.targetElements["sticky-header-container"].style.visibility === 'visible') {
+          this.targetElements["sticky-previous-scroll-button"].style.visibility = 'hidden';
+        }
+      }
+      else {
+        this.targetElements["horizontal-scroll-box-shadow"].style.left = `${((_g = this.targetElements["table-container"]) === null || _g === void 0 ? void 0 : _g.scrollLeft) + this.desktopHeaderFirstCellWidth}px`;
+        this.targetElements["horizontal-scroll-box-shadow"].style.visibility = 'visible';
+        this.targetElements["normal-previous-scroll-button"].style.visibility = 'visible';
+        if (this.targetElements["sticky-header-container"].style.visibility === 'visible') {
+          this.targetElements["sticky-previous-scroll-button"].style.visibility = 'visible';
+        }
+      }
+    };
+    this.handleVerticalScroll = () => {
+      this.targetElements = this.getTargetElements();
+      const scrollTopPosition = window.scrollY || document.documentElement.scrollTop;
+      if (scrollTopPosition < this.lastScrollTop) {
+        // 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 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 {
+            // 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) {
+          // 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';
+          this.targetElements["vertical-scroll-content-clipper"].style.display = 'none';
+        }
+      }
+      else if (scrollTopPosition > this.lastScrollTop) {
+        // Scrolling down
+        if (this.targetElements["sticky-header-container"].getBoundingClientRect().bottom <= 0) {
+          // 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';
+          this.targetElements["vertical-scroll-content-clipper"].style.display = 'none';
+        }
+        else if (this.targetElements["table-header"].getBoundingClientRect().top <= this.targetElements["sticky-header-container"].getBoundingClientRect().top) {
+          if (this.targetElements["table-container"].getBoundingClientRect().bottom <= this.targetElements["sticky-header-container"].getBoundingClientRect().bottom) {
+            // Scroll the sticky header out of the window along with the table
+            this.targetElements["sticky-header-container"].style.top = `${(this.targetElements["table-container"].getBoundingClientRect().bottom - this.targetElements["sticky-header-container"].clientHeight)}px`;
+          }
+          else {
+            // 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';
+            this.targetElements["table-header"].style.visibility = 'hidden';
+            this.targetElements["sticky-previous-scroll-button"].style.visibility = this.targetElements["normal-previous-scroll-button"].style.visibility;
+            this.targetElements["sticky-next-scroll-button"].style.visibility = this.targetElements["normal-next-scroll-button"].style.visibility;
+            if (getComputedStyle(this.targetElements["sticky-next-scroll-button"]).visibility === "visible") {
+              this.targetElements["table-filler-sticky-header-cell"].style.boxSizing = "content-box";
+            }
+          }
+        }
+      }
+      this.lastScrollTop = scrollTopPosition <= 0 ? 0 : scrollTopPosition;
+    };
+    this.handleResize = () => {
+      this.targetElements["table-container"].scrollLeft = 0;
+      this.handleHorizontalScroll();
+      this.configureStickyHeader();
+      this.configureScrollButtonsContainers();
+      this.configureTableFillerCells();
+    };
+    this.pageWithSubnav = false;
+    this.tableTitle = undefined;
+    this.tableSubTitle = "";
+    this.tableDescription = "";
+    this.dataRows = undefined;
+    this.dataCols = undefined;
+    this.disclaimerCount = 0;
+    this.scrollTopClipperHeight = undefined;
+    this.desktopHeaderFirstCellWidth = 0;
+    this.targetElements = {};
+    this.columnHeaderLinks = [];
+    this.lastScrollTop = undefined;
+    this.scrollTimeInterval = 35;
+    this.scrollAmount = 5;
+    this.scrollLimit = 50;
+    this.mobileHeaderRowColSpan = this.dataCols;
+    this.showCtaButtonsRow = undefined;
+    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');
+    let tableContainer = pricingTable === null || pricingTable === void 0 ? void 0 : pricingTable.querySelector('#table-container');
+    let table = tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.querySelector('table');
+    let tableHeader = tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.querySelector('table thead');
+    let desktopHeaderFirstCell = tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.querySelector('.desktop-header-first-cell');
+    let tableHeaderCells = tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.querySelectorAll('th');
+    let desktopTableBody = tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.querySelector('.desktop-table-body');
+    let mobileTableBody = tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.querySelector('.mobile-table-body');
+    let stickyHeaderContainer = pricingTable === null || pricingTable === void 0 ? void 0 : pricingTable.querySelector('#sticky-header-container');
+    let stickyHeaderCells = stickyHeaderContainer === null || stickyHeaderContainer === void 0 ? void 0 : stickyHeaderContainer.querySelectorAll('th');
+    let verticalScrollBoxShadow = tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.querySelector("#vertical-scroll-box-shadow");
+    let tableFillerStickyHeaderCell = stickyHeaderContainer === null || stickyHeaderContainer === void 0 ? void 0 : stickyHeaderContainer.querySelector('.table-filler-header-cell');
+    let tableFillerHeaderCell = tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.querySelector('.table-filler-header-cell');
+    let tableFillerBodyCells = table === null || table === void 0 ? void 0 : table.querySelectorAll('.table-filler-body-cell');
+    let tableFillerButtonCell = table === null || table === void 0 ? void 0 : table.querySelector('.table-filler-button-cell');
+    let mobileTableRowHeaders = pricingTable === null || pricingTable === void 0 ? void 0 : pricingTable.querySelectorAll('.mobile-table-row-header');
+    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,
+      "pricing-table": pricingTable,
+      "table-container": tableContainer,
+      "table": table,
+      "table-header": tableHeader,
+      "desktop-header-first-cell": desktopHeaderFirstCell,
+      "table-header-cells": tableHeaderCells,
+      "desktop-table-body": desktopTableBody,
+      "mobile-table-body": mobileTableBody,
+      "sticky-header-container": stickyHeaderContainer,
+      "sticky-header-cells": stickyHeaderCells,
+      "vertical-scroll-box-shadow": verticalScrollBoxShadow,
+      "table-filler-sticky-header-cell": tableFillerStickyHeaderCell,
+      "table-filler-header-cell": tableFillerHeaderCell,
+      "table-filler-body-cells": tableFillerBodyCells,
+      "table-filler-button-cell": tableFillerButtonCell,
+      "mobile-table-row-headers": mobileTableRowHeaders,
+      "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') {
+        this.targetElements["sticky-previous-scroll-button"].style.visibility = 'hidden';
+      }
+    }
+    else {
+      this.targetElements["normal-previous-scroll-button"].style.visibility = 'visible';
+      if (this.targetElements["sticky-header-container"].style.visibility === 'visible') {
+        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') {
+        this.targetElements["sticky-next-scroll-button"].style.visibility = 'hidden';
+      }
+    }
+    else {
+      this.targetElements["normal-next-scroll-button"].style.visibility = 'visible';
+      if (this.targetElements["sticky-header-container"].style.visibility === 'visible') {
+        this.targetElements["sticky-next-scroll-button"].style.visibility = 'visible';
+      }
+    }
+  }
+  // Configures the sticky header based on the dimensions of the table header
+  configureStickyHeader() {
+    var _a, _b, _c, _d, _e, _f;
+    const targetElements = this.getTargetElements();
+    // 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)"  )) {
+      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;
+      }
+      else {
+        this.scrollTopClipperHeight = this.scrollTopClipperHeightOptions.withSubNav.mobile;
+      }
+    }
+    else {
+      if (window.innerWidth >= 1200) {
+        this.scrollTopClipperHeight = this.scrollTopClipperHeightOptions.withoutSubNav.desktop;
+      }
+      else {
+        this.scrollTopClipperHeight = this.scrollTopClipperHeightOptions.withoutSubNav.mobile;
+      }
+    }
+    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')) {
+        this.desktopHeaderFirstCellWidth = targetElements["table-header-cells"][i].getBoundingClientRect().width;
+      }
+    }
+    // Box-sizing
+    if (targetElements["table"].clientWidth <= targetElements["table-container"].clientWidth) {
+      if (targetElements["desktop-table-body"]) {
+        for (let i = 0; i < targetElements["sticky-header-cells"].length; i++) {
+          (_b = (_a = targetElements["sticky-header-cells"][i]) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add('border-box-header-cell');
+        }
+      }
+    }
+    else {
+      for (let i = 0; i < targetElements["sticky-header-cells"].length; i++) {
+        if ((_d = (_c = targetElements["sticky-header-cells"][i]) === null || _c === void 0 ? void 0 : _c.classList) === null || _d === void 0 ? void 0 : _d.contains('border-box-header-cell')) {
+          (_f = (_e = targetElements["sticky-header-cells"][i]) === null || _e === void 0 ? void 0 : _e.classList) === null || _f === void 0 ? void 0 : _f.remove('border-box-header-cell');
+        }
+      }
+    }
+  }
+  configureTableFillerCells() {
+    var _a, _b, _c, _d;
+    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) {
+      // 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++) {
+        this.targetElements["table-filler-body-cells"][i].style.display = 'table-cell';
+      }
+      if (this.targetElements["table-filler-button-cell"]) {
+        this.targetElements["table-filler-button-cell"].style.display = 'table-cell';
+      }
+      this.mobileHeaderRowColSpan = this.dataCols + 1;
+    }
+    else {
+      // 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++) {
+          if ((_b = (_a = this.targetElements["sticky-header-cells"][i]) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('border-box-header-cell')) {
+            (_d = (_c = this.targetElements["sticky-header-cells"][i]) === null || _c === void 0 ? void 0 : _c.classList) === null || _d === void 0 ? void 0 : _d.remove('border-box-header-cell');
+          }
+        }
+      }
+    }
+  }
+  handleStickyHeaderHorizontalScroll() {
+    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;
+      let tableContainerRight = this.targetElements["table-container"].getBoundingClientRect().right;
+      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;
+      let tableContainerLeft = this.targetElements["table-container"].getBoundingClientRect().left;
+      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);
+  }
+  componentWillLoad() {
+    let columnHeaders = this.el.querySelectorAll('[slot^="column-header"]');
+    for (let i = 0; i < this.dataCols; i++) {
+      let slotValue = columnHeaders[i].getAttribute('slot');
+      let headerText = columnHeaders[i].innerHTML;
+      this.el.insertAdjacentHTML('afterbegin', `<span slot="normal-${slotValue}">${headerText}</span><span slot="sticky-${slotValue}">${headerText}</span>`);
+      columnHeaders[i].remove();
+    }
+    let headerLinks = this.el.querySelectorAll('[slot^="header-link"]');
+    if (headerLinks.length > 0) {
+      for (let i = 0; i < this.dataCols; i++) {
+        let linkHref = headerLinks[i].getAttribute('href');
+        let linkText = headerLinks[i].innerHTML;
+        this.columnHeaderLinks.push({ linkHref, linkText });
+        headerLinks[i].remove();
+      }
+    }
+    let ctaButtons = this.el.querySelectorAll('[slot^="cta-button"]');
+    this.showCtaButtonsRow = (ctaButtons.length !== 0);
+    for (let i = 0; i < this.dataCols; i++) {
+      this.ctaButtons.push({
+        linkHref: ctaButtons[i].getAttribute('href'),
+        linkText: ctaButtons[i].innerHTML
+      });
+      ctaButtons[i].remove();
+    }
+    let disclaimers = this.el.querySelectorAll('[slot^="disclaimer"]');
+    for (let i = 0; i < this.disclaimerCount; i++) {
+      this.disclaimers.push(disclaimers[i].innerHTML);
+      disclaimers[i].remove();
+    }
+  }
+  componentDidLoad() {
+    this.configureTableFillerCells();
+    this.configureStickyHeader();
+    this.configureScrollButtonsContainers();
+    window.addEventListener('scroll', this.handleVerticalScroll);
+    window.addEventListener('resize', this.handleResize);
+  }
+  disconnectedCallback() {
+    window.removeEventListener('scroll', this.handleVerticalScroll);
+    window.removeEventListener('resize', this.handleResize);
+  }
+  render() {
+    const getTableTitle = () => {
+      return (this.tableTitle && index.h(index.Fragment, null, index.h("div", { class: "table-descriptor" }, index.h("ptc-title", { type: "h2", "text-align": "center", "title-size": "xx-large", upperline: "no-upperline", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-8" }, this.tableTitle)), (this.tableSubTitle)
+        ? index.h(index.Fragment, null, index.h("ptc-spacer", { breakpoint: "small", size: "x-small" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "small" }))
+        : (this.tableDescription)
+          ? index.h(index.Fragment, null, index.h("ptc-spacer", { breakpoint: "small", size: "small" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "medium" }))
+          : null));
+    };
+    const getTableSubTitle = () => {
+      return (this.tableSubTitle && index.h(index.Fragment, null, index.h("div", { class: "table-descriptor" }, index.h("ptc-title", { type: "h3", "text-align": "center", "title-size": "large", upperline: "no-upperline", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7" }, this.tableSubTitle)), index.h("ptc-spacer", { breakpoint: "small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "large" })));
+    };
+    const getTableDescription = () => {
+      return (this.tableDescription && index.h(index.Fragment, null, index.h("div", { class: "table-descriptor" }, index.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 : index.h("ptc-readmore", { "more-text": "See more" }, this.tableDescription)))));
+    };
+    const getScrollButtonsContainer = () => {
+      return index.h("div", { class: "scroll-buttons-container" }, index.h("div", { class: "scroll-buttons prev-button", "data-clicked": "false", onClick: () => this.handleScrollBackward(), onMouseOver: () => this.handleScrollBackwardHover(), onMouseOut: () => this.handleScrollBackwardHoverOut() }, index.h("icon-asset", { type: "solid", size: "medium", name: "chevron-left", color: "primary-gray" }), index.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")), index.h("div", { class: "scroll-buttons next-button", "data-clicked": "false", onClick: () => this.handleScrollForward(), onMouseOver: () => this.handleScrollForwardHover(), onMouseOut: () => this.handleScrollForwardHoverOut() }, index.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"), index.h("icon-asset", { type: "solid", size: "medium", name: "chevron-right", color: "primary-gray" })));
+    };
+    const getTableHeader = (headerType) => {
+      return index.h("thead", null, index.h("tr", null, index.h("th", { class: "desktop-header-first-cell" }, index.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 => {
+        return index.h("th", null, index.h("ptc-para", { "font-size": "medium", "font-weight": "w-7", "para-align": "center", "para-color": "white", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, index.h("slot", { name: `${headerType}-column-header-${col + 1}` })), (this.columnHeaderLinks.length === this.dataCols) ? index.h(index.Fragment, null, index.h("ptc-spacer", { breakpoint: 'small', size: "small" }), index.h("ptc-spacer", { breakpoint: 'x-small', size: "medium" }), index.h("ptc-link", { "font-size": "medium", "font-weight": "w-extrabold", href: `${this.columnHeaderLinks[col].linkHref}`, "link-area": "undefined", target: "_blank", theme: "d-green-underline" }, index.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" }))) : null);
+      }), index.h("th", { class: "table-filler-header-cell" })));
+    };
+    const getMobileTableBody = () => {
+      return index.h("tbody", { class: "mobile-table-body" }, ([...Array(this.dataRows).keys()]).map(row => {
+        return index.h(index.Fragment, null, index.h("tr", null, index.h("td", { colSpan: this.mobileHeaderRowColSpan }, index.h("div", { class: "mobile-table-row-header" }, index.h("ptc-para", { "font-size": "small", "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-1" }, index.h("slot", { name: `row-header-${row + 1}` }))))), index.h("tr", null, ([...Array(this.dataCols).keys()]).map(col => {
+          return index.h("td", null, index.h("slot", { name: `cell-r${row + 1}-c${col + 1}` }));
+        }), index.h("td", { class: "table-filler-body-cell" })));
+      }), (this.showCtaButtonsRow) ?
+        index.h("tr", { class: "table-button-row" }, ([...Array(this.dataCols).keys()]).map(col => {
+          return index.h("td", null, index.h("ptc-button", { type: "link", color: "ptc-tertiary", "link-href": this.ctaButtons[col].linkHref, target: "_blank" }, this.ctaButtons[col].linkText));
+        }), (this.mobileHeaderRowColSpan > this.dataCols) ? index.h("td", { class: "table-filler-button-cell" }) : null) : null);
+    };
+    const getDesktopTableBody = () => {
+      return index.h("tbody", { class: "desktop-table-body" }, ([...Array(this.dataRows).keys()]).map(row => {
+        return index.h("tr", null, index.h("td", { class: "first-column-cell" }, index.h("ptc-para", { "font-size": "small", "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-1" }, index.h("slot", { name: `row-header-${row + 1}` }))), ([...Array(this.dataCols).keys()]).map(col => {
+          return index.h("td", null, index.h("slot", { name: `cell-r${row + 1}-c${col + 1}` }));
+        }), index.h("td", { class: "table-filler-body-cell" }));
+      }), (this.showCtaButtonsRow) ?
+        index.h("tr", { class: "table-button-row" }, index.h("td", null), ([...Array(this.dataCols).keys()]).map(col => {
+          return index.h("td", null, index.h("ptc-button", { type: "link", color: "ptc-tertiary", "link-href": this.ctaButtons[col].linkHref, target: "_blank" }, index.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" })));
+        }), index.h("td", { class: "table-filler-button-cell" })) : null);
+    };
+    const getDisclaimers = () => {
+      return ((this.disclaimerCount > 0) && index.h(index.Fragment, null, index.h("ptc-spacer", { breakpoint: "small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "large" }), this.disclaimers.map((disclaimer, ind) => {
+        return index.h(index.Fragment, null, index.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)) ? index.h("ptc-spacer", { size: "xx-small" }) : null);
+      })));
+    };
+    return (index.h(index.Host, null, index.h("div", { id: "vertical-scroll-content-clipper" }), index.h("div", { id: "sticky-header-container", onScroll: () => this.handleStickyHeaderHorizontalScroll() }, getScrollButtonsContainer(), getTableHeader("sticky")), index.h("ptc-spacer", { breakpoint: "small", size: "xxx-large" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "xxxx-large" }), getTableTitle(), getTableSubTitle(), getTableDescription(), index.h("ptc-spacer", { breakpoint: "small", size: "xx-large" }), index.h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "xxx-large" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "xx-small" }), index.h("div", { id: "table-container", onScroll: () => this.handleHorizontalScroll() }, getScrollButtonsContainer(), index.h("table", null, index.h("div", { id: "horizontal-scroll-box-shadow" }), getTableHeader("normal"), (window.innerWidth >= 992)
+      ? getDesktopTableBody()
+      : getMobileTableBody())), getDisclaimers(), index.h("ptc-spacer", { breakpoint: "small", size: "xxx-large" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "xxxx-large" })));
+  }
+  get el() { return index.getElement(this); }
+};
 PtcPricingTable.style = ptcPricingTableCss;
 
 exports.ptc_pricing_table = PtcPricingTable;