@ptcwebops/ptcw-design 4.6.3 → 4.6.5

package/dist/cjs/homepage-clickable-tab.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-63ddc79c.js');
 
-const homepageClickableTabCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block;position:relative}.tab-item{cursor:pointer;color:#fff;border-radius:4px;background:var(--color-gray-11);display:flex;width:auto;min-height:72px;padding:24px;justify-content:center;align-items:center;gap:10px;align-self:stretch;color:#FFF;text-align:center;font-family:Raleway;font-size:20px;font-style:normal;font-weight:800}@media screen and (min-width: 1280px){.tab-item{width:160px}}@media only screen and (min-width: 1440px){.tab-item{width:172px}}.tab-item span{z-index:2}ptc-overlay{opacity:0;transition:opacity var(--ptc-transition-slower) var(--ptc-ease-inout)}.tab-item.active{color:#fff;position:relative}.tab-item.active::after{content:\"\";position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);width:0;height:0;border-top-width:30px;border-left:20px solid transparent;border-right:20px solid transparent}.tab-item.hp-blue.active{background:linear-gradient(180deg, #197BC0 0%, #4795CD 100%)}.tab-item.hp-blue.active::after{border-style:solid;border-top-color:var(--color-blue-06)}.tab-item.hp-blue:hover{background:linear-gradient(180deg, #197BC0 0%, #4795CD 100%)}.tab-item.hp-green.active{background:linear-gradient(180deg, #00890B 0%, #33A13C 100%)}.tab-item.hp-green.active::after{border-style:solid;border-top-color:var(--color-green-06)}.tab-item.hp-green:hover{background:linear-gradient(180deg, #00890B 0%, #33A13C 100%)}.tab-item.hp-red.active{background:linear-gradient(180deg, #D33E3E 0%, #DC6565 100%)}.tab-item.hp-red.active::after{border-style:solid;border-top-color:var(--color-red-06)}.tab-item.hp-red:hover{background:linear-gradient(180deg, #D33E3E 0%, #DC6565 100%)}.tab-item.hp-gray.active{background:linear-gradient(180deg, #617480 0%, #819099 100%)}.tab-item.hp-gray.active::after{border-style:solid;border-top-color:var(--color-gray-06)}.tab-item.hp-gray:hover{background:linear-gradient(180deg, #617480 0%, #819099 100%)}.tab-item.hp-orange.active{background:linear-gradient(180deg, #C37729 0%, #CF9254 100%)}.tab-item.hp-orange.active::after{border-style:solid;border-top-color:var(--color-orange-06)}.tab-item.hp-orange:hover{background:linear-gradient(180deg, #C37729 0%, #CF9254 100%)}";
+const homepageClickableTabCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block;position:relative}.tab-item{cursor:pointer;color:#fff;border-radius:4px;background:var(--color-gray-11);display:flex;width:auto;height:-webkit-fill-available;min-height:72px;padding:24px;justify-content:center;align-items:center;gap:10px;align-self:stretch;color:#FFF;text-align:center;font-family:Raleway;font-size:20px;font-style:normal;font-weight:800}@media screen and (min-width: 1280px){.tab-item{width:160px}}@media only screen and (min-width: 1440px){.tab-item{width:172px}}.tab-item span{z-index:2}ptc-overlay{opacity:0;transition:opacity var(--ptc-transition-slower) var(--ptc-ease-inout)}.tab-item.active{color:#fff;position:relative}.tab-item.active::after{content:\"\";position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);width:0;height:0;border-top-width:30px;border-left:20px solid transparent;border-right:20px solid transparent}.tab-item.hp-blue.active{background:linear-gradient(180deg, #197BC0 0%, #4795CD 100%)}.tab-item.hp-blue.active::after{border-style:solid;border-top-color:var(--color-blue-06)}.tab-item.hp-blue:hover{background:linear-gradient(180deg, #197BC0 0%, #4795CD 100%)}.tab-item.hp-green.active{background:linear-gradient(180deg, #00890B 0%, #33A13C 100%)}.tab-item.hp-green.active::after{border-style:solid;border-top-color:var(--color-green-06)}.tab-item.hp-green:hover{background:linear-gradient(180deg, #00890B 0%, #33A13C 100%)}.tab-item.hp-red.active{background:linear-gradient(180deg, #D33E3E 0%, #DC6565 100%)}.tab-item.hp-red.active::after{border-style:solid;border-top-color:var(--color-red-06)}.tab-item.hp-red:hover{background:linear-gradient(180deg, #D33E3E 0%, #DC6565 100%)}.tab-item.hp-gray.active{background:linear-gradient(180deg, #617480 0%, #819099 100%)}.tab-item.hp-gray.active::after{border-style:solid;border-top-color:var(--color-gray-06)}.tab-item.hp-gray:hover{background:linear-gradient(180deg, #617480 0%, #819099 100%)}.tab-item.hp-orange.active{background:linear-gradient(180deg, #C37729 0%, #CF9254 100%)}.tab-item.hp-orange.active::after{border-style:solid;border-top-color:var(--color-orange-06)}.tab-item.hp-orange:hover{background:linear-gradient(180deg, #C37729 0%, #CF9254 100%)}";
 
 const HomepageClickableTab = class {
   constructor(hostRef) {
@@ -14,6 +14,7 @@ const HomepageClickableTab = class {
     this.label = undefined;
     this.activeColor = 'hp-blue';
     this.isHovered = false;
+    this.styles = undefined;
   }
   handleClick() {
     this.tabSelected.emit();
@@ -25,7 +26,7 @@ const HomepageClickableTab = class {
     this.isHovered = false;
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: { 'tab-item': true, 'active': this.active, [this.activeColor]: true }, onClick: () => this.handleClick(), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, (this.active || this.isHovered) ? index.h("ptc-overlay", { class: "colored-tab", "filter-color": this.activeColor, "border-radius": "radius-standard" }) : index.h("ptc-overlay", { "filter-color": "transparent", "border-radius": "radius-standard" }), index.h("span", null, this.label))));
+    return (index.h(index.Host, null, this.styles && index.h("style", null, this.styles), index.h("div", { class: { 'tab-item': true, 'active': this.active, [this.activeColor]: true }, onClick: () => this.handleClick(), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, (this.active || this.isHovered) ? index.h("ptc-overlay", { class: "colored-tab", "filter-color": this.activeColor, "border-radius": "radius-standard" }) : index.h("ptc-overlay", { "filter-color": "transparent", "border-radius": "radius-standard" }), index.h("span", null, this.label))));
   }
 };
 HomepageClickableTab.style = homepageClickableTabCss;

package/dist/cjs/homepage-jumbotron.cjs.entry.js

@@ -13,7 +13,7 @@ const HomepageJumbotron = class {
     this.tileCount = 0;
     this.bgVideoSrc = '';
     this.bgSrc = 'https://images.unsplash.com/photo-1675285972028-45dc2add07be?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Nzc3ODk2NTE&ixlib=rb-4.0.3&q=80';
-    this.jumbotron = 'light';
+    this.jumbotron = 'dark';
     this.isIframe = false;
     this.playBtnText = 'play';
     this.pauseBtnText = 'pause';
@@ -24,6 +24,7 @@ const HomepageJumbotron = class {
     this.activeButton = undefined;
     this.tileElements = [];
     this.isTransitioning = undefined;
+    this.mediaTag = "VIDEO";
   }
   componentWillLoad() {
     this.updateDefaultContent();
@@ -90,9 +91,7 @@ const HomepageJumbotron = class {
     this.activeMainTitle = activeMainTitleElement ? activeMainTitleElement.innerHTML : '';
     this.activeSubTitle = activeSubTitleElement ? activeSubTitleElement.innerHTML : '';
     this.activeButton = activeButtonElement ? activeButtonElement.innerHTML : '';
-    //this.tileCount = this.el.querySelectorAll(`[slot^="jumbotron-tile-image-${this.activeTab}"]`).length;
-    //console.log('sub tile counts: ' + this.tileCount + '; this active tab: ' + this.activeTab);
-    //this.updateTileElements();
+    this.mediaTag = activeBgVideoElement.tagName;
   }
   updateTileElements() {
     const tiles = Array.from(this.el.querySelectorAll(`[slot^="jumbotron-tile-${this.activeTab}"]`));
@@ -107,7 +106,7 @@ const HomepageJumbotron = class {
     }, 250);
   }
   render() {
-    return (index.h(index.Host, null, index.h("ptc-jumbotron", Object.assign({ styles: ".parent{min-height:700px; max-height:1000px;}", "jumbotron-type": this.jumbotron }, (!!this.activeBgVideoSrc && { bgVideoSrc: this.activeBgVideoSrc }), (!this.bgVideoSrc && !!this.bgSrc && { bgSrc: this.bgSrc }), { "is-iframe": this.isIframe, "is-homepage": "true", "is-transitioning": this.isTransitioning, "sub-title": "" //sub title is coming from slot here
+    return (index.h(index.Host, null, index.h("ptc-jumbotron", Object.assign({ styles: ".parent{min-height:700px; max-height:1000px;}", "jumbotron-type": this.mediaTag === "VIDEO" ? 'dark-video' : 'dark' }, (!!this.activeBgVideoSrc && { bgVideoSrc: this.activeBgVideoSrc }), (!this.bgVideoSrc && !!this.bgSrc && { bgSrc: this.bgSrc }), { "is-iframe": this.isIframe, "is-homepage": "true", "is-transitioning": this.isTransitioning, "sub-title": "" //sub title is coming from slot here
       ,
       "play-button-title": this.playBtnText, "pause-button-title": this.pauseBtnText, "button-location": "allbp-bottom-right" }), index.h("slot", { name: "breadcrumb" }), index.h("h1", { slot: "main-title", class: "hp-h1" }, this.activeMainTitle), index.h("p", { slot: "hp-sub-title", class: "hp-sub-title" }, this.activeSubTitle), index.h("div", { slot: "j-cta", innerHTML: this.activeButton })), index.h("div", { class: "swiper-container", ref: el => (this.swiperContainerRef = el) }, index.h("div", { class: "swiper-wrapper" }, this.tileElements.map((tile, index$1) => (index.h("div", { class: "swiper-slide", key: index$1, innerHTML: tile.outerHTML })))), index.h("div", { class: "swiper-pagination" }))));
   }

package/dist/cjs/homepage-toggled-content.cjs.entry.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-63ddc79c.js');
+const utils = require('./utils-fe61106d.js');
 
-const homepageToggledContentCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}::slotted(.title){color:var(--color-gray-10) !important;font-family:Raleway !important;font-size:24px !important;font-style:normal !important;font-weight:700 !important;line-height:30px !important;margin-top:0px !important;margin-bottom:16px !important;}::slotted(.description){color:var(--color-gray-10) !important;font-family:Raleway !important;font-size:18px !important;font-style:normal !important;font-weight:400 !important;line-height:27px !important;margin-top:0px !important;margin-bottom:0px !important;}::slotted(.tab-slot-image){height:500px;width:auto;margin-bottom:32px}@media screen and (min-width: 992px){::slotted(.tab-slot-image){margin-bottom:unset;height:auto}}.header{text-align:center;margin-bottom:20px}@media only screen and (min-width: 992px){.header{width:70%}}.tabs{display:flex;justify-content:center;margin-bottom:64px;position:relative;z-index:99}.tabs-desktop{display:flex;gap:24px}.tabs-mobile{display:none;position:relative}.dropdown-button{color:white;padding:24px;border:none;border-radius:var(--ptc-border-radius-standard);cursor:pointer;display:flex;align-items:center;justify-content:space-between;width:100%;font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-extrabold);text-align:left}.dropdown-button.opened{border-radius:var(--ptc-border-radius-standard) var(--ptc-border-radius-standard) 0px 0px}.dropdown-button.hp-blue{background:linear-gradient(180deg, #197BC0 0%, #4795CD 100%)}.dropdown-button.hp-green{background:linear-gradient(180deg, #00890B 0%, #33A13C 100%)}.dropdown-button.hp-red{background:linear-gradient(180deg, #D33E3E 0%, #DC6565 100%)}.dropdown-button.hp-gray{background:linear-gradient(180deg, #617480 0%, #819099 100%)}.dropdown-button.hp-orange{background:linear-gradient(180deg, #C37729 0%, #CF9254 100%)}.dropdown-button .arrow{margin-left:24px}.dropdown-menu{position:absolute;width:calc(100% - 2px);background-color:var(--color-white);color:var(--color-gray-10);display:flex;flex-direction:column;border-radius:0px 0px var(--ptc-border-radius-standard) var(--ptc-border-radius-standard);border-top:0px;box-shadow:var(--ptc-shadow-medium)}.dropdown-menu .dropdown-item{color:var(--color-gray-10);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-regular)}.dropdown-item{padding:24px 24px 0px 24px;cursor:pointer}.dropdown-item:last-of-type{padding-bottom:24px}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover ::slotted(.tab-label){font-weight:var(--ptc-font-weight-bold)}@media (max-width: 992px){.tabs-desktop{display:none}.tabs-mobile{display:block;width:100%}}.content{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;overflow:hidden}.tab-content{display:none;opacity:0;flex-direction:column;width:100%;animation:fadeIn var(--ptc-transition-medium) ease-in-out forwards}.tab-content.active-tab{display:flex;opacity:1}@media only screen and (min-width: 992px){.tab-content{flex-wrap:nowrap;flex-direction:row;width:100%;justify-content:center;align-items:center;gap:56px}}.tab-content img{max-width:100%;width:100%;height:auto;margin-bottom:20px}@media only screen and (min-width: 992px){.tab-content img{width:580px;height:733px;flex-shrink:0}}.content-detail{text-align:left}@media only screen and (min-width: 992px){.content-detail{flex-grow:1;overflow:hidden;word-break:break-word}}.content-detail p,.content-detail h2{margin-block-start:unset;margin-block-end:unset}.content-detail h2{margin-bottom:16px}.content-detail p{margin-bottom:32px}.info-card-wrapper{margin-top:72px;display:flex;justify-content:center;align-items:center;width:100%}.card-section{display:flex;position:relative;flex-wrap:nowrap;flex-shrink:0;-ms-overflow-style:none;scrollbar-width:none;transition:box-shadow var(--ptc-transition-medium) var(--ptc-ease-out);justify-content:flex-start}.card-section::-webkit-scrollbar{display:none}.card-section .card-link{display:inline-flex;position:relative;text-decoration:none;z-index:10;align-items:center;gap:16px;margin-right:24px}.card-section .card-link .link-text{display:block;inline-size:190px;white-space:break-spaces}.card-section:before{position:absolute;width:32px;background:linear-gradient(85deg, rgba(255, 255, 255, 0) 0%, white 100.13%);top:16px;right:0;bottom:0;z-index:12}.card-section.scroll-st{box-shadow:inset 2px 0px 0px rgba(255, 255, 255, 0.3)}.card-section.scroll-ed{box-shadow:inset -2px 0px 0px rgba(255, 255, 255, 0.3)}.card-section.scroll-ed.scroll-st{box-shadow:inset 2px 0px 0px rgba(255, 255, 255, 0.3), inset -2px 0px 0px rgba(255, 255, 255, 0.3)}@media only screen and (min-width: 1200px){.card-section{align-items:flex-start;justify-content:flex-start;align-content:flex-start}.card-section.scroll-st,.card-section.scroll-ed,.card-section.scroll-ed.scroll-st{box-shadow:unset}.card-section .card-link{flex:unset}.card-section .card-link:first-child{margin-left:0}.card-section .card-link:last-child{margin-right:0}}.card-section{overflow:inherit;overflow-x:scroll;overflow-y:hidden;animation-duration:0ms;animation-delay:1000ms;animation-fill-mode:forwards}@media only screen and (min-width: 1200px){.card-section{overflow-x:scroll}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}";
+const homepageToggledContentCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}::slotted(.title){color:var(--color-gray-10) !important;font-family:Raleway !important;font-size:24px !important;font-style:normal !important;font-weight:700 !important;line-height:30px !important;margin-top:0px !important;margin-bottom:16px !important;}::slotted(.description){color:var(--color-gray-10) !important;font-family:Raleway !important;font-size:18px !important;font-style:normal !important;font-weight:400 !important;line-height:27px !important;margin-top:0px !important;margin-bottom:0px !important;}::slotted(.tab-slot-image){height:500px;width:auto;object-fit:contain;margin-bottom:32px}@media screen and (min-width: 992px){::slotted(.tab-slot-image){margin-bottom:unset;height:auto}}.header{text-align:center;margin-bottom:20px}@media only screen and (min-width: 992px){.header{width:70%}}.tabs{display:flex;justify-content:center;margin-bottom:64px;position:relative;z-index:99}.tabs-desktop{display:flex;gap:24px;flex:1}.tabs-desktop homepage-clickable-tab{flex:1 1 122px}.tabs-mobile{display:none;position:relative}.dropdown-button{color:white;padding:24px;border:none;border-radius:var(--ptc-border-radius-standard);cursor:pointer;display:flex;align-items:center;justify-content:space-between;width:100%;font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-extrabold);text-align:left}.dropdown-button.opened{border-radius:var(--ptc-border-radius-standard) var(--ptc-border-radius-standard) 0px 0px}.dropdown-button.hp-blue{background:linear-gradient(180deg, #197BC0 0%, #4795CD 100%)}.dropdown-button.hp-green{background:linear-gradient(180deg, #00890B 0%, #33A13C 100%)}.dropdown-button.hp-red{background:linear-gradient(180deg, #D33E3E 0%, #DC6565 100%)}.dropdown-button.hp-gray{background:linear-gradient(180deg, #617480 0%, #819099 100%)}.dropdown-button.hp-orange{background:linear-gradient(180deg, #C37729 0%, #CF9254 100%)}.dropdown-button .arrow{margin-left:24px}.dropdown-menu{position:absolute;width:calc(100% - 2px);background-color:var(--color-white);color:var(--color-gray-10);display:flex;flex-direction:column;border-radius:0px 0px var(--ptc-border-radius-standard) var(--ptc-border-radius-standard);border-top:0px;box-shadow:var(--ptc-shadow-medium)}.dropdown-menu .dropdown-item{color:var(--color-gray-10);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-regular)}.dropdown-menu .dropdown-item.active-tab ::slotted(.tab-label){font-weight:var(--ptc-font-weight-bold) !important}.dropdown-item{padding:24px 24px 0px 24px;cursor:pointer}.dropdown-item:last-of-type{padding-bottom:24px}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover ::slotted(.tab-label){font-weight:var(--ptc-font-weight-bold)}@media (max-width: 992px){.tabs-desktop{display:none}.tabs-mobile{display:block;width:100%}}.content{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;overflow:hidden}.tab-content{display:none;opacity:0;flex-direction:column;width:100%;animation:fadeIn var(--ptc-transition-medium) ease-in-out forwards}.tab-content.active-tab{display:flex;opacity:1}@media only screen and (min-width: 992px){.tab-content{flex-wrap:nowrap;flex-direction:row;width:100%;justify-content:center;align-items:center;gap:56px}}.tab-content img{max-width:100%;width:100%;height:auto;margin-bottom:20px}@media only screen and (min-width: 992px){.tab-content img{width:580px;height:733px;flex-shrink:0}}.content-detail{text-align:left}@media only screen and (min-width: 992px){.content-detail{flex-grow:1;overflow:hidden;word-break:break-word}}.content-detail p,.content-detail h2{margin-block-start:unset;margin-block-end:unset}.content-detail h2{margin-bottom:16px}.content-detail p{margin-bottom:32px}.info-card-wrapper{margin-top:72px;display:flex;justify-content:center;align-items:center;width:100%}.card-section{display:flex;position:relative;flex-wrap:nowrap;flex-shrink:0;-ms-overflow-style:none;scrollbar-width:none;transition:box-shadow var(--ptc-transition-medium) var(--ptc-ease-out);justify-content:flex-start}.card-section::-webkit-scrollbar{display:none}.card-section .card-link{display:inline-flex;position:relative;text-decoration:none;z-index:10;align-items:center;gap:16px;margin-right:24px}.card-section .card-link .link-text{display:block;inline-size:190px;white-space:break-spaces}.card-section:before{position:absolute;width:32px;background:linear-gradient(85deg, rgba(255, 255, 255, 0) 0%, white 100.13%);top:16px;right:0;bottom:0;z-index:12}.card-section.scroll-st{box-shadow:inset 2px 0px 0px rgba(255, 255, 255, 0.3)}.card-section.scroll-ed{box-shadow:inset -2px 0px 0px rgba(255, 255, 255, 0.3)}.card-section.scroll-ed.scroll-st{box-shadow:inset 2px 0px 0px rgba(255, 255, 255, 0.3), inset -2px 0px 0px rgba(255, 255, 255, 0.3)}@media only screen and (min-width: 1200px){.card-section{align-items:flex-start;justify-content:flex-start;align-content:flex-start}.card-section.scroll-st,.card-section.scroll-ed,.card-section.scroll-ed.scroll-st{box-shadow:unset}.card-section .card-link{flex:unset}.card-section .card-link:first-child{margin-left:0}.card-section .card-link:last-child{margin-right:0}}.card-section{overflow:inherit;overflow-x:scroll;overflow-y:hidden;animation-duration:0ms;animation-delay:1000ms;animation-fill-mode:forwards}@media only screen and (min-width: 1200px){.card-section{overflow-x:scroll}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}";
 
 const HomepageToggledContent = class {
   constructor(hostRef) {
@@ -31,6 +32,9 @@ const HomepageToggledContent = class {
     //this.onSliderScroll();
     //observeInView(this.el, '.card-section', true);
   }
+  componentDidRender() {
+    utils.equalizeHeightsWithinShadow('homepage-clickable-tab', this.el);
+  }
   handleTabSelected(tabIndex) {
     this.activeTab = tabIndex;
     this.dropdownOpen = false; // Close dropdown on selection
@@ -108,7 +112,7 @@ const HomepageToggledContent = class {
     const upArrow = (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "11", viewBox: "0 0 15 11", fill: "none" }, index.h("path", { d: "M13 8.5L7.34315 2.71178L1.68629 8.5", stroke: "white", "stroke-width": "3", "stroke-linecap": "round" })));
     const downArrow = (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "11", viewBox: "0 0 15 11", fill: "none" }, index.h("path", { d: "M13 2.5L7.34315 8.28822L1.68629 2.5", stroke: "white", "stroke-width": "3", "stroke-linecap": "round" })));
     const tabs = this.getTabs();
-    return (index.h("div", { class: "wrapper" }, index.h("div", { class: "header" }, index.h("h2", null, index.h("slot", { name: "title" })), index.h("p", null, index.h("slot", { name: "description" }))), index.h("div", { class: "tabs" }, index.h("div", { class: "tabs-desktop" }, tabs.map(tab => (index.h("homepage-clickable-tab", { label: tab.label, active: this.activeTab === tab.index, activeColor: this.colors[tab.index], onClick: () => this.handleTabSelected(tab.index) })))), index.h("div", { class: "tabs-mobile" }, index.h("button", { class: `dropdown-button ${this.colors[this.activeTab]} ${this.dropdownOpen ? 'opened' : ''}`, onClick: () => this.toggleDropdown() }, tabs[this.activeTab].label, index.h("span", { class: "arrow" }, this.dropdownOpen ? upArrow : downArrow)), this.dropdownOpen && (index.h("div", { class: "dropdown-menu" }, tabs.map(tab => (index.h("div", { class: "dropdown-item", onClick: () => this.handleTabSelected(tab.index) }, index.h("slot", { name: `tab-label-${tab.index}` })))))))), index.h("div", { class: "content" }, tabs.map((tab, index$1) => (index.h("div", { class: `tab-content ${this.activeTab === index$1 ? 'active-tab' : ''}` }, index.h("slot", { name: `tab-image-${index$1}` }), index.h("div", { class: "content-detail" }, index.h("div", { hidden: true }, tab.label), index.h("h2", null, index.h("slot", { name: `tab-title-${index$1}` })), index.h("p", null, index.h("slot", { name: `tab-content-${index$1}` })), index.h("slot", { name: `tab-button-${index$1}` }), this.activeTab === index$1 && this.tileElements.length > 0 ? (index.h("div", Object.assign({ class: "info-card-wrapper card-section" }, this.getSliderBindings()), this.tileElements.map((tile, index$1) => (index.h("div", { class: `swiper-slide card-link card-link-${index$1 + 1}`, "tab-index": index$1 + 1, key: index$1, innerHTML: tile.outerHTML, onMouseDown: e => this.onCardMouseDown(e), onMouseUp: e => this.onCardMouseUp(e), onMouseLeave: e => this.onCardMouseUp(e), onTouchEnd: e => {
+    return (index.h("div", { class: "wrapper" }, index.h("div", { class: "header" }, index.h("h2", null, index.h("slot", { name: "title" })), index.h("p", null, index.h("slot", { name: "description" }))), index.h("div", { class: "tabs" }, index.h("div", { class: "tabs-desktop" }, tabs.map(tab => (index.h("homepage-clickable-tab", { label: tab.label, active: this.activeTab === tab.index, activeColor: this.colors[tab.index], onClick: () => this.handleTabSelected(tab.index) })))), index.h("div", { class: "tabs-mobile" }, index.h("button", { class: `dropdown-button ${this.colors[this.activeTab]} ${this.dropdownOpen ? 'opened' : ''}`, onClick: () => this.toggleDropdown() }, tabs[this.activeTab].label, index.h("span", { class: "arrow" }, this.dropdownOpen ? upArrow : downArrow)), this.dropdownOpen && (index.h("div", { class: "dropdown-menu" }, tabs.map(tab => (index.h("div", { class: `dropdown-item ${tab.index === this.activeTab ? 'active-tab' : ''}`, onClick: () => this.handleTabSelected(tab.index) }, index.h("slot", { name: `tab-label-${tab.index}` })))))))), index.h("div", { class: "content" }, tabs.map((tab, index$1) => (index.h("div", { class: `tab-content ${this.activeTab === index$1 ? 'active-tab' : ''}` }, index.h("slot", { name: `tab-image-${index$1}` }), index.h("div", { class: "content-detail" }, index.h("div", { hidden: true }, tab.label), index.h("h2", null, index.h("slot", { name: `tab-title-${index$1}` })), index.h("p", null, index.h("slot", { name: `tab-content-${index$1}` })), index.h("slot", { name: `tab-button-${index$1}` }), this.activeTab === index$1 && this.tileElements.length > 0 ? (index.h("div", Object.assign({ class: "info-card-wrapper card-section" }, this.getSliderBindings()), this.tileElements.map((tile, index$1) => (index.h("div", { class: `swiper-slide card-link card-link-${index$1 + 1}`, "tab-index": index$1 + 1, key: index$1, innerHTML: tile.outerHTML, onMouseDown: e => this.onCardMouseDown(e), onMouseUp: e => this.onCardMouseUp(e), onMouseLeave: e => this.onCardMouseUp(e), onTouchEnd: e => {
         console.log('yes');
         this.onCardMouseUp(e);
       } }))))) : null)))))));