@ptcwebops/ptcw-design 2.1.6 → 2.1.7

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

@@ -0,0 +1,581 @@
+import { Host, h, Fragment } from '@stencil/core';
+export class PtcPricingTable {
+  constructor() {
+    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;
+      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`;
+      }
+      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`;
+        }
+      }
+      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';
+        }
+      }
+      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 the window 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
+            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
+          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 on top once it scrolls out 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 {
+            // Hide the normal header and show 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 = [];
+  }
+  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 stickyPreviousScrollButton = stickyScrollButtonsContainer === null || stickyScrollButtonsContainer === void 0 ? void 0 : stickyScrollButtonsContainer.querySelector('.prev-button');
+    let normalNextScrollButton = normalScrollButtonsContainer === null || normalScrollButtonsContainer === void 0 ? void 0 : normalScrollButtonsContainer.querySelector('.next-button');
+    let stickyNextScrollButton = stickyScrollButtonsContainer === null || stickyScrollButtonsContainer === void 0 ? void 0 : stickyScrollButtonsContainer.querySelector('.next-button');
+    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,
+      "sticky-previous-scroll-button": stickyPreviousScrollButton,
+      "normal-next-scroll-button": normalNextScrollButton,
+      "sticky-next-scroll-button": stickyNextScrollButton,
+      "horizontal-scroll-box-shadow": horizontalScrollBoxShadow,
+    };
+    return targetElements;
+  }
+  configureScrollButtonsContainers() {
+    this.targetElements = this.getTargetElements();
+    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`;
+    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`;
+    }
+    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';
+      }
+    }
+    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';
+      }
+    }
+  }
+  configureStickyHeader() {
+    var _a, _b, _c, _d, _e, _f;
+    const targetElements = this.getTargetElements();
+    // Dimensions
+    targetElements["vertical-scroll-content-clipper"].style.width = `${targetElements["table-container"].clientWidth + 20}px`;
+    targetElements["sticky-header-container"].style.width = `${targetElements["table-container"].clientWidth}px`;
+    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;
+    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) {
+      // Table smaller than 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 {
+      // Table equal to or bigger than 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;
+  }
+  handleScrollForward() {
+    this.targetElements = this.getTargetElements();
+    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["table-container"].scrollLeft += scrollAdded;
+    }, this.scrollTimeInterval);
+  }
+  handleScrollBackward() {
+    this.targetElements = this.getTargetElements();
+    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["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 && h(Fragment, null, h("div", { class: "table-descriptor" }, 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)
+        ? h(Fragment, null, h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("ptc-spacer", { breakpoint: "x-small", size: "small" }))
+        : (this.tableDescription)
+          ? h(Fragment, null, h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }))
+          : null));
+    };
+    const getTableSubTitle = () => {
+      return (this.tableSubTitle && h(Fragment, null, h("div", { class: "table-descriptor" }, 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)), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" })));
+    };
+    const getTableDescription = () => {
+      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" })));
+    };
+    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 => {
+        return h("th", null, 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" }, h("slot", { name: `${headerType}-column-header-${col + 1}` })), (this.columnHeaderLinks.length === this.dataCols) ? h(Fragment, null, h("ptc-spacer", { breakpoint: 'small', size: "small" }), h("ptc-spacer", { breakpoint: 'x-small', size: "medium" }), h("ptc-link", { "font-size": "medium", "font-weight": "w-extrabold", href: `${this.columnHeaderLinks[col].linkHref}`, "link-area": "undefined", target: "_blank", theme: "d-green-underline" }, 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);
+      }), h("th", { class: "table-filler-header-cell" })));
+    };
+    const getMobileTableBody = () => {
+      return h("tbody", { class: "mobile-table-body" }, ([...Array(this.dataRows).keys()]).map(row => {
+        return h(Fragment, null, h("tr", null, h("td", { colSpan: this.mobileHeaderRowColSpan }, h("div", { class: "mobile-table-row-header" }, 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" }, h("slot", { name: `row-header-${row + 1}` }))))), h("tr", null, ([...Array(this.dataCols).keys()]).map(col => {
+          return h("td", null, h("slot", { name: `cell-r${row + 1}-c${col + 1}` }));
+        }), h("td", { class: "table-filler-body-cell" })));
+      }), (this.showCtaButtonsRow) ?
+        h("tr", { class: "table-button-row" }, ([...Array(this.dataCols).keys()]).map(col => {
+          return h("td", null, h("ptc-button", { type: "link", color: "ptc-tertiary", "link-href": this.ctaButtons[col].linkHref, target: "_blank" }, this.ctaButtons[col].linkText));
+        }), (this.mobileHeaderRowColSpan > this.dataCols) ? h("td", { class: "table-filler-button-cell" }) : null) : null);
+    };
+    const getDesktopTableBody = () => {
+      return h("tbody", { class: "desktop-table-body" }, ([...Array(this.dataRows).keys()]).map(row => {
+        return h("tr", null, h("td", { class: "first-column-cell" }, 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" }, h("slot", { name: `row-header-${row + 1}` }))), ([...Array(this.dataCols).keys()]).map(col => {
+          return h("td", null, h("slot", { name: `cell-r${row + 1}-c${col + 1}` }));
+        }), h("td", { class: "table-filler-body-cell" }));
+      }), (this.showCtaButtonsRow) ?
+        h("tr", { class: "table-button-row" }, h("td", null), ([...Array(this.dataCols).keys()]).map(col => {
+          return h("td", null, h("ptc-button", { type: "link", color: "ptc-tertiary", "link-href": this.ctaButtons[col].linkHref, target: "_blank" }, 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" })));
+        }), h("td", { class: "table-filler-button-cell" })) : null);
+    };
+    const getDisclaimers = () => {
+      return ((this.disclaimerCount > 0) && h(Fragment, null, h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), this.disclaimers.map((disclaimer, ind) => {
+        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)
+      ? getDesktopTableBody()
+      : getMobileTableBody())), getDisclaimers(), h("ptc-spacer", { breakpoint: "small", size: "xxx-large" }), h("ptc-spacer", { breakpoint: "x-small", size: "xxxx-large" })));
+  }
+  static get is() { return "ptc-pricing-table"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-pricing-table.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-pricing-table.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "pageWithSubnav": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[True/False] If the page containing this table has a sticky sub-nav"
+        },
+        "attribute": "page-with-subnav",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "tableTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Table title (H2)"
+        },
+        "attribute": "table-title",
+        "reflect": false
+      },
+      "tableSubTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Table title (H3)"
+        },
+        "attribute": "table-sub-title",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "tableDescription": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Table description"
+        },
+        "attribute": "table-description",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "dataRows": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Number of data rows in the table"
+        },
+        "attribute": "data-rows",
+        "reflect": false
+      },
+      "dataCols": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Number of data columns in the table"
+        },
+        "attribute": "data-cols",
+        "reflect": false
+      },
+      "disclaimerCount": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Number of disclaimers below the table"
+        },
+        "attribute": "disclaimer-count",
+        "reflect": false,
+        "defaultValue": "0"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "scrollTopClipperHeight": {},
+      "desktopHeaderFirstCellWidth": {},
+      "targetElements": {},
+      "columnHeaderLinks": {},
+      "lastScrollTop": {},
+      "scrollTimeInterval": {},
+      "scrollAmount": {},
+      "scrollLimit": {},
+      "mobileHeaderRowColSpan": {},
+      "showCtaButtonsRow": {},
+      "ctaButtons": {},
+      "disclaimers": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/ptc-square-card/ptc-square-card.css

@@ -35,15 +35,33 @@
   vertical-align: middle;
 }
 :host .number {
-  display: inline;
+  display: inline-block;
   line-height: var(--ptc-line-height-denser);
   font-size: var(--ptc-font-size-xx-large);
   font-weight: var(--ptc-font-weight-semibold);
   vertical-align: middle;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 160px;
 }
 :host slot[name=before-icon], :host slot[name=after-icon] {
   text-align: center;
   line-height: var(--ptc-line-height-densest);
   font-size: var(--ptc-font-size-x-small);
   font-weight: var(--ptc-font-weight-semibold);
+}
+:host slot[name=before-icon] {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+:host slot[name=after-icon] {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }