@ptcwebops/ptcw-design 7.1.0 → 7.1.2

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

@@ -341,6 +341,12 @@ const PtcPricingPackagingTable = class {
             }
         }
     };
+    isSlotEmpty = (slotName) => {
+        let isEmpty = true;
+        const slotElement = this.el.querySelector(`[slot="${slotName}"]`);
+        isEmpty = slotElement && !!!slotElement.innerText;
+        return isEmpty;
+    };
     preProcessTableDescription = () => {
         let tableDescription = this.el.querySelector('[slot="table-description"]');
         if (tableDescription) {
@@ -493,24 +499,18 @@ const PtcPricingPackagingTable = class {
             return (index.h("div", { id: "table-header", class: this.headerType, onScroll: () => this.handleHorizontalScroll() }, index.h("div", { class: `desktop-header-first-cell` }, this.isDesktopView ? (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" }, index.h("slot", { name: "desktop-header-first-cell" }))) : null, index.h("div", { class: "scroll-button mf-listen", id: "previous-scroll-button" }, index.h("div", { class: "mf-listen", onClick: () => this.handleBackwardScroll(), onKeyDown: (e) => this.handleScrollButtonClick(e, -1), tabIndex: 0, id: `previous-scroll-button-${this.sectionId}` }, 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" }, this.moreText))), index.h("div", { class: "scroll-button mf-listen", id: "next-scroll-button" }, index.h("div", { class: "mf-listen", onClick: () => this.handleForwardScroll(), onKeyDown: (e) => this.handleScrollButtonClick(e, 1), tabIndex: 0, id: `next-scroll-button-${this.sectionId}` }, 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" }, this.moreText), index.h("icon-asset", { type: "solid", size: "medium", name: "chevron-right", color: "primary-gray" })))), [...Array(this.dataCols).keys()].map((col) => {
                 return (index.h("div", { class: `table-cell ${col + 1 === this.dataCols ? "table-last-cell" : ""}` }, index.h("ptc-para", { "font-size": "medium", "font-weight": "w-7", "para-align": "center", "para-color": "white", "para-line-h": "line-height-densest", "para-margin": "margin-flush", "para-z-index": "z-1" }, index.h("slot", { name: `column-header-${col + 1}` })), this.columnHeaderLinks.length ===
                     this.dataCols &&
-                    this.columnHeaderLinks[col] ? (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", { "dark-focus-state": true, "font-size": "medium", "font-weight": "w-extrabold", href: `${this.columnHeaderLinks[col].linkHref}`, "link-area": "undefined", target: `${this.columnHeaderLinks[col].linkTarget}`, theme: "d-green-underline", styles: "a.ptc-link {line-height: var(--ptc-line-height-p);}", "link-title": this.columnHeaderLinks[col]
-                        .linkTitle, onFocus: (e) => this.handleAutoScrollOnFocus(e), "tracker-id": `column-header-${col + 1}-link-${this.sectionId}` }, this.isDesktopView ? (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" })) : (this.columnHeaderLinks[col]
-                    .linkText)))) : null));
+                    this.columnHeaderLinks[col] ? (index.h(index.Fragment, null, this.isSlotEmpty(`column-header-${col + 1}`) ? null : (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", { "dark-focus-state": true, "font-size": "medium", "font-weight": "w-extrabold", href: `${this.columnHeaderLinks[col].linkHref}`, "link-area": "undefined", target: `${this.columnHeaderLinks[col].linkTarget}`, theme: "d-green-underline", styles: "a.ptc-link {line-height: var(--ptc-line-height-p);}", "link-title": this.columnHeaderLinks[col]
+                        .linkTitle, onFocus: (e) => this.handleAutoScrollOnFocus(e), "tracker-id": `column-header-${col + 1}-link-${this.sectionId}` }, this.columnHeaderLinks[col]
+                    .linkText))) : null));
             }), index.h("div", { class: `table-filler-cell ${this.showFillerCells ? "show" : ""}` })));
         };
         const TableHeaderPlaceholder = () => {
             return (index.h("div", { id: "table-header-placeholder", class: this.headerType }, index.h("div", { class: `desktop-header-first-cell` }, this.isDesktopView ? (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" }, index.h("slot", { name: "placeholder-desktop-header-first-cell" }))) : null), [...Array(this.dataCols).keys()].map((col) => {
                 return (index.h("div", { class: `table-cell ${col + 1 === this.dataCols ? "table-last-cell" : ""}` }, index.h("ptc-para", { "font-size": "medium", "font-weight": "w-7", "para-align": "center", "para-color": "white", "para-line-h": "line-height-densest", "para-margin": "margin-flush", "para-z-index": "z-1" }, index.h("slot", { name: `placeholder-column-header-${col + 1}` })), this.columnHeaderLinks.length ===
                     this.dataCols &&
-                    this.columnHeaderLinks[col] ? (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: `${this.columnHeaderLinks[col].linkTarget}`, theme: "d-green-underline", styles: "a.ptc-link {line-height: var(--ptc-line-height-p);}", "link-title": this.columnHeaderLinks[col]
-                        .linkTitle, "tab-nav": "-1" }, this.isDesktopView ? (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" })) : (this.columnHeaderLinks[col]
-                    .linkText)))) : null));
+                    this.columnHeaderLinks[col] ? (index.h(index.Fragment, null, this.isSlotEmpty(`placeholder-column-header-${col + 1}`) ? null : (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: `${this.columnHeaderLinks[col].linkTarget}`, theme: "d-green-underline", styles: "a.ptc-link {line-height: var(--ptc-line-height-p);}", "link-title": this.columnHeaderLinks[col]
+                        .linkTitle, "tab-nav": "-1" }, this.columnHeaderLinks[col]
+                    .linkText))) : null));
             }), index.h("div", { class: `table-filler-cell ${this.showFillerCells ? "show" : ""}` })));
         };
         const TableDataRows = () => {

package/dist/collection/components/molecules/buying-option-card/buying-option-card.css

@@ -10,8 +10,6 @@ buying-option-card {
   border-radius: var(--ptc-border-radius-standard);
   color: var(--ptc-color-white);
   background-blend-mode: normal, soft-light, hard-light, normal;
-  /* Drop Shadow (X-Large) */
-  box-shadow: var(--ptc-shadow-x-large);
 }
 buying-option-card .card-header {
   display: flex;

package/dist/collection/components/molecules/buying-option-cards-slider/buying-option-cards-slider.css

@@ -760,21 +760,27 @@ ptc-footer {
 buying-option-cards-slider {
   position: relative;
 }
+buying-option-cards-slider .bo-slider .swiper-slide {
+  height: auto;
+}
+buying-option-cards-slider .bo-slider .swiper-slide buying-option-card {
+  height: 100%;
+}
 buying-option-cards-slider .bo-slider.swiper-horizontal {
   display: flex;
   flex-direction: column;
   align-items: center;
-  overflow-x: visible;
+  clip-path: inset(0px -12px -6px -16px);
   padding-bottom: 1rem;
   position: relative;
 }
 buying-option-cards-slider .bo-slider.swiper-horizontal.scrollbar-present {
-  padding-bottom: 2.875rem;
+  padding-bottom: 60px;
 }
 buying-option-cards-slider .bo-slider.swiper-horizontal .swiper-scrollbar {
   position: absolute;
   left: auto;
-  bottom: -1.6px;
+  bottom: 13.5px;
   top: auto;
   z-index: 50;
   width: 209px;
@@ -809,6 +815,17 @@ buying-option-cards-slider .bo-slider.swiper-horizontal .swiper-scrollbar .swipe
   border-radius: 999px;
   background: var(--color-gray-10);
 }
+buying-option-cards-slider .bo-slider.swiper-horizontal buying-option-card::after {
+  border-radius: var(--ptc-border-radius-standard);
+  bottom: 0;
+  box-shadow: var(--ptc-shadow-large);
+  content: "";
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: -1;
+}
 buying-option-cards-slider .swiper-button-prev:after,
 buying-option-cards-slider .swiper-button-next:after {
   content: none;
@@ -820,11 +837,11 @@ buying-option-cards-slider .swiper-button-next img {
 buying-option-cards-slider .swiper-button-prev,
 buying-option-cards-slider .swiper-rtl .swiper-button-next {
   top: auto;
-  bottom: -19px;
+  bottom: 0;
   left: auto;
   right: calc(50% + 126.5px);
-  height: 40px;
-  width: 40px;
+  height: 36px;
+  width: 36px;
   border-radius: 4px;
 }
 buying-option-cards-slider .swiper-button-prev:hover,
@@ -869,11 +886,11 @@ buying-option-cards-slider .swiper-rtl .swiper-button-next svg {
 buying-option-cards-slider .swiper-button-next,
 buying-option-cards-slider .swiper-rtl .swiper-button-prev {
   top: auto;
-  bottom: -19px;
+  bottom: 0;
   right: auto;
   left: calc(50% + 126.5px);
-  height: 40px;
-  width: 40px;
+  height: 36px;
+  width: 36px;
   border-radius: var(--ptc-border-radius-standard);
 }
 buying-option-cards-slider .swiper-button-next:hover,

package/dist/collection/components/molecules/buying-option-cards-slider/buying-option-cards-slider.js

@@ -29,6 +29,10 @@ export class BuyingOptionCardsSlider {
         this.listSwp = new Swiper(list, {
             // Customize options here
             modules: [Navigation, Pagination, Scrollbar, Mousewheel],
+            // Ensure CTA links work on first click
+            preventClicks: false,
+            preventClicksPropagation: false,
+            noSwipingSelector: "ptc-button, a",
             allowTouchMove: shouldEnableTouchMove(),
             slidesPerView: 1,
             initialSlide: 0,
@@ -86,17 +90,10 @@ export class BuyingOptionCardsSlider {
             },
         });
         function toggleNav(swiper) {
-            if (!swiper)
-                return;
-            const totalSlides = Array.isArray(swiper.slides)
-                ? swiper.slides.length
-                : (swiper.slides && swiper.slides.length) || 0;
-            const spv = swiper.params && swiper.params.slidesPerView;
-            const slidesPerView = typeof spv === "number" ? spv : 1;
-            const nextBtn = swiper.navigation && swiper.navigation.nextEl;
-            const prevBtn = swiper.navigation && swiper.navigation.prevEl;
-            if (!nextBtn || !prevBtn)
-                return;
+            const totalSlides = swiper.slides.length;
+            const slidesPerView = swiper.params.slidesPerView;
+            const nextBtn = swiper.navigation.nextEl;
+            const prevBtn = swiper.navigation.prevEl;
             if (totalSlides <= slidesPerView) {
                 nextBtn.style.display = "none";
                 prevBtn.style.display = "none";
@@ -107,16 +104,14 @@ export class BuyingOptionCardsSlider {
             }
         }
         function setEqualHeights(swiper) {
-            if (!swiper || !swiper.slides || swiper.destroyed)
+            // Check if swiper and slides exist
+            if (!swiper || !swiper.slides || swiper.slides.length === 0) {
                 return;
-            let maxSlideHeight = 0;
+            }
             let maxCardDetailsHeight = 0;
-            const slidesArr = Array.from(swiper.slides || []);
-            if (slidesArr.length === 0)
-                return;
             // Reset all heights first
-            slidesArr.forEach((slide) => {
-                // Reset slide heights
+            swiper.slides.forEach((slide) => {
+                // Reset slide heights so flexbox can take over
                 slide.style.height = "";
                 slide.style.minHeight = "";
                 // Reset card-details heights
@@ -127,40 +122,23 @@ export class BuyingOptionCardsSlider {
                 }
             });
             // Calculate card-details heights immediately
-            slidesArr.forEach((slide) => {
+            swiper.slides.forEach((slide) => {
                 const cardDetails = slide.querySelector(".card-details");
                 if (cardDetails) {
-                    maxCardDetailsHeight = Math.max(maxCardDetailsHeight, cardDetails.offsetHeight);
+                    const rect = cardDetails.getBoundingClientRect();
+                    maxCardDetailsHeight = Math.max(maxCardDetailsHeight, rect.height);
                 }
             });
             // Apply card-details heights immediately
-            slidesArr.forEach((slide) => {
+            swiper.slides.forEach((slide) => {
                 const cardDetails = slide.querySelector(".card-details");
                 if (cardDetails) {
                     cardDetails.style.height = `${maxCardDetailsHeight}px`;
                 }
             });
-            // Add delay for slide height calculation
-            setTimeout(() => {
-                if (!swiper || !swiper.slides || swiper.destroyed)
-                    return;
-                const slidesLater = Array.from(swiper.slides || []);
-                if (slidesLater.length === 0)
-                    return;
-                // Calculate max slide height
-                slidesLater.forEach((slide) => {
-                    maxSlideHeight = Math.max(maxSlideHeight, slide.offsetHeight);
-                });
-                // Apply slide heights
-                slidesLater.forEach((slide) => {
-                    slide.style.height = `${maxSlideHeight}px`;
-                });
-            }, 100);
         }
         function toggleScrollbarClass(swiper) {
-            if (!swiper)
-                return;
-            const scrollbar = swiper.scrollbar && swiper.scrollbar.el;
+            const scrollbar = swiper.scrollbar.el;
             const boSlider = swiper.el;
             if (scrollbar && boSlider) {
                 const computedStyle = window.getComputedStyle(scrollbar);
@@ -172,7 +150,7 @@ export class BuyingOptionCardsSlider {
                     boSlider.classList.add("scrollbar-present");
                 }
                 // Check if we need to reinitialize based on current allowTouchMove state
-                const currentAllowTouchMove = swiper.params && swiper.params.allowTouchMove;
+                const currentAllowTouchMove = swiper.params.allowTouchMove;
                 const shouldAllowTouchMove = !isDisplayNone;
                 if (currentAllowTouchMove !== shouldAllowTouchMove) {
                     // Reinitialize swiper with correct allowTouchMove setting
@@ -184,7 +162,7 @@ export class BuyingOptionCardsSlider {
         }
     }
     render() {
-        return (h(Host, { key: 'eb4fe1962135c00f65c69ebfc0e5651a624533be' }, h("div", { key: '41dd0f0690e9da0d4e88982951cc322e96f694d2', class: "bo-slider" }, h("div", { key: '4d2f6e5bba058f4957505422840513879cf37bfb', class: "swiper-wrapper" }, h("slot", { key: '7a007d6c342cd2db48010390421ced1eaf00e291' })), h("div", { key: 'e4d84bdae5334aaa58682252a489e5b7b4c0f1b6', class: "swiper-scrollbar", ref: (el) => (this.swiperPaginationRef = el) }), h("div", { key: '924f5beb3e8c9ae1fa7f8c75c43c6b280be1f351', class: "swiper-button-next", ref: (el) => (this.swiperButtonNextRef = el) }, h("svg", { key: '6ba7c535b94f0b609400a93216e530ab9b01d193', width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '7c9fd5f9f0e400eeb8b376cad796b6393bc0cd17', d: "M0.75 17.25L8 10L0.75 2.75L3.375 0.125L13.25 10L3.375 19.875L0.75 17.25Z", fill: "#323B42" }))), h("div", { key: 'f39143956444ecbe972082c3e504f96edc9fa71a', class: "swiper-button-prev", ref: (el) => (this.swiperButtonPrevRef = el) }, h("svg", { key: 'b26df5f3ce31670a35fa924b7a70716fae9c1b60', width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '313179a7e8d6a2c11e1364bf099b4e7b58d5f5e6', d: "M13.25 2.75L6 10L13.25 17.25L10.625 19.875L0.749999 10L10.625 0.125L13.25 2.75Z", fill: "#323B42" }))))));
+        return (h(Host, { key: 'ced0541beddb7cff423042091e274aa282cfeb06' }, h("div", { key: 'ac1ea7b6ce282a9d0b522d63d5bd1ed498beb9a5', class: "bo-slider" }, h("div", { key: 'a1194d95f238b32be3f2653ff9c30bc1c04c66b1', class: "swiper-wrapper" }, h("slot", { key: 'bc0646a0cb933d1c90b1828684f675f71be89b3c' })), h("div", { key: 'b3057aa2aa15db2141a93029c2e9e3abfa8b1b68', class: "swiper-scrollbar", ref: (el) => (this.swiperPaginationRef = el) }), h("div", { key: 'e4a18f78ca4c4e89f61481b4e827703d99b1faac', class: "swiper-button-next", ref: (el) => (this.swiperButtonNextRef = el) }, h("svg", { key: 'ca9137b18ab127b9b572ead72cebedbed43ebfc2', width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '4c94dd4aa6c7f82fa3b454bc6b8831d9fa7105ff', d: "M0.75 17.25L8 10L0.75 2.75L3.375 0.125L13.25 10L3.375 19.875L0.75 17.25Z", fill: "#323B42" }))), h("div", { key: 'e319ff9da0d098e58b8cb9e07de7d706f46ef057', class: "swiper-button-prev", ref: (el) => (this.swiperButtonPrevRef = el) }, h("svg", { key: 'e3efa1da93f06eebcffffe9f890bba4667ba3fe9', width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '55980a2d4a4bd6072d6a5ad4bd7ac9af3a8cba17', d: "M13.25 2.75L6 10L13.25 17.25L10.625 19.875L0.749999 10L10.625 0.125L13.25 2.75Z", fill: "#323B42" }))))));
     }
     static get is() { return "buying-option-cards-slider"; }
     static get originalStyleUrls() {

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

@@ -8394,16 +8394,13 @@ ptc-footer {
   margin: 0 5px;
 }
 
-.preloader-store-detail-page .jumbotron {
-  margin-bottom: 48px;
-}
 .preloader-store-detail-page .jumbotron .jumbotron-bg {
-  height: 262px;
+  height: 300px;
   background-color: var(--color-gray-03);
   position: relative;
 }
 .preloader-store-detail-page .div-body {
-  top: -172px;
+  top: -100px;
   position: relative;
 }
 @media only screen and (min-width: 768px) {
@@ -8411,6 +8408,16 @@ ptc-footer {
     text-align: -webkit-center;
   }
 }
+@media only screen and (min-width: 480px) {
+  .preloader-store-detail-page .div-body {
+    top: -125px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .preloader-store-detail-page .div-body {
+    top: -148px;
+  }
+}
 .preloader-store-detail-page .div-body .div-grid-block {
   position: relative;
   z-index: 3;

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

@@ -338,6 +338,12 @@ export class PtcPricingPackagingTable {
                 break;
         }
     };
+    isSlotEmpty = (slotName) => {
+        let isEmpty = true;
+        const slotElement = this.el.querySelector(`[slot="${slotName}"]`);
+        isEmpty = slotElement && !!!slotElement.innerText;
+        return isEmpty;
+    };
     preProcessTableDescription = () => {
         let tableDescription = this.el.querySelector('[slot="table-description"]');
         if (tableDescription) {
@@ -490,24 +496,18 @@ export class PtcPricingPackagingTable {
             return (h("div", { id: "table-header", class: this.headerType, onScroll: () => this.handleHorizontalScroll() }, h("div", { class: `desktop-header-first-cell` }, this.isDesktopView ? (h("ptc-para", { "font-size": "medium", "font-weight": "w-7", "para-align": "left", "para-color": "white", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, h("slot", { name: "desktop-header-first-cell" }))) : null, h("div", { class: "scroll-button mf-listen", id: "previous-scroll-button" }, h("div", { class: "mf-listen", onClick: () => this.handleBackwardScroll(), onKeyDown: (e) => this.handleScrollButtonClick(e, -1), tabIndex: 0, id: `previous-scroll-button-${this.sectionId}` }, h("icon-asset", { type: "solid", size: "medium", name: "chevron-left", color: "primary-gray" }), h("ptc-para", { "font-size": "small", "font-weight": "w-6", "para-align": "justify", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, this.moreText))), h("div", { class: "scroll-button mf-listen", id: "next-scroll-button" }, h("div", { class: "mf-listen", onClick: () => this.handleForwardScroll(), onKeyDown: (e) => this.handleScrollButtonClick(e, 1), tabIndex: 0, id: `next-scroll-button-${this.sectionId}` }, h("ptc-para", { "font-size": "small", "font-weight": "w-6", "para-align": "justify", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, this.moreText), h("icon-asset", { type: "solid", size: "medium", name: "chevron-right", color: "primary-gray" })))), [...Array(this.dataCols).keys()].map((col) => {
                 return (h("div", { class: `table-cell ${col + 1 === this.dataCols ? "table-last-cell" : ""}` }, h("ptc-para", { "font-size": "medium", "font-weight": "w-7", "para-align": "center", "para-color": "white", "para-line-h": "line-height-densest", "para-margin": "margin-flush", "para-z-index": "z-1" }, h("slot", { name: `column-header-${col + 1}` })), this.columnHeaderLinks.length ===
                     this.dataCols &&
-                    this.columnHeaderLinks[col] ? (h(Fragment, null, h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-link", { "dark-focus-state": true, "font-size": "medium", "font-weight": "w-extrabold", href: `${this.columnHeaderLinks[col].linkHref}`, "link-area": "undefined", target: `${this.columnHeaderLinks[col].linkTarget}`, theme: "d-green-underline", styles: "a.ptc-link {line-height: var(--ptc-line-height-p);}", "link-title": this.columnHeaderLinks[col]
-                        .linkTitle, onFocus: (e) => this.handleAutoScrollOnFocus(e), "tracker-id": `column-header-${col + 1}-link-${this.sectionId}` }, this.isDesktopView ? (h("ptc-tooltip", { class: col ===
-                        this.dataCols - 1
-                        ? "last-column-tooltip"
-                        : "", "text-display": "inline", "max-length": "30", "z-index": "z-2", description: this.columnHeaderLinks[col].linkText, position: "top" })) : (this.columnHeaderLinks[col]
-                    .linkText)))) : null));
+                    this.columnHeaderLinks[col] ? (h(Fragment, null, this.isSlotEmpty(`column-header-${col + 1}`) ? null : (h(Fragment, null, h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }))), h("ptc-link", { "dark-focus-state": true, "font-size": "medium", "font-weight": "w-extrabold", href: `${this.columnHeaderLinks[col].linkHref}`, "link-area": "undefined", target: `${this.columnHeaderLinks[col].linkTarget}`, theme: "d-green-underline", styles: "a.ptc-link {line-height: var(--ptc-line-height-p);}", "link-title": this.columnHeaderLinks[col]
+                        .linkTitle, onFocus: (e) => this.handleAutoScrollOnFocus(e), "tracker-id": `column-header-${col + 1}-link-${this.sectionId}` }, this.columnHeaderLinks[col]
+                    .linkText))) : null));
             }), h("div", { class: `table-filler-cell ${this.showFillerCells ? "show" : ""}` })));
         };
         const TableHeaderPlaceholder = () => {
             return (h("div", { id: "table-header-placeholder", class: this.headerType }, h("div", { class: `desktop-header-first-cell` }, this.isDesktopView ? (h("ptc-para", { "font-size": "medium", "font-weight": "w-7", "para-align": "left", "para-color": "white", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, h("slot", { name: "placeholder-desktop-header-first-cell" }))) : null), [...Array(this.dataCols).keys()].map((col) => {
                 return (h("div", { class: `table-cell ${col + 1 === this.dataCols ? "table-last-cell" : ""}` }, h("ptc-para", { "font-size": "medium", "font-weight": "w-7", "para-align": "center", "para-color": "white", "para-line-h": "line-height-densest", "para-margin": "margin-flush", "para-z-index": "z-1" }, h("slot", { name: `placeholder-column-header-${col + 1}` })), this.columnHeaderLinks.length ===
                     this.dataCols &&
-                    this.columnHeaderLinks[col] ? (h(Fragment, null, h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-link", { "font-size": "medium", "font-weight": "w-extrabold", href: `${this.columnHeaderLinks[col].linkHref}`, "link-area": "undefined", target: `${this.columnHeaderLinks[col].linkTarget}`, theme: "d-green-underline", styles: "a.ptc-link {line-height: var(--ptc-line-height-p);}", "link-title": this.columnHeaderLinks[col]
-                        .linkTitle, "tab-nav": "-1" }, this.isDesktopView ? (h("ptc-tooltip", { class: col ===
-                        this.dataCols - 1
-                        ? "last-column-tooltip"
-                        : "", "text-display": "inline", "max-length": "30", "z-index": "z-2", description: this.columnHeaderLinks[col].linkText, position: "top" })) : (this.columnHeaderLinks[col]
-                    .linkText)))) : null));
+                    this.columnHeaderLinks[col] ? (h(Fragment, null, this.isSlotEmpty(`placeholder-column-header-${col + 1}`) ? null : (h(Fragment, null, h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }))), h("ptc-link", { "font-size": "medium", "font-weight": "w-extrabold", href: `${this.columnHeaderLinks[col].linkHref}`, "link-area": "undefined", target: `${this.columnHeaderLinks[col].linkTarget}`, theme: "d-green-underline", styles: "a.ptc-link {line-height: var(--ptc-line-height-p);}", "link-title": this.columnHeaderLinks[col]
+                        .linkTitle, "tab-nav": "-1" }, this.columnHeaderLinks[col]
+                    .linkText))) : null));
             }), h("div", { class: `table-filler-cell ${this.showFillerCells ? "show" : ""}` })));
         };
         const TableDataRows = () => {