@ptcwebops/ptcw-design 4.5.9 → 4.6.1

package/dist/collection/components/organism-bundles/homepage-toggled-content/homepage-toggled-content.js

@@ -1,13 +1,35 @@
 import { h } from '@stencil/core';
+//import { observeInView } from '../../../utils/utils';
+class SliderSettings {
+}
 export class HomepageToggledContent {
   constructor() {
-    this.colors = ['hp-blue', 'hp-green', 'hp-red', 'hp-gray', 'hp-orange'];
+    this.colors = ['hp-blue', 'hp-red', 'hp-gray', 'hp-green', 'hp-orange'];
     this.activeTab = 0;
     this.dropdownOpen = false;
+    this.tileElements = [];
+  }
+  componentWillLoad() {
+    this.updateTileElements(this.activeTab);
+    this.sliderSettings = {
+      IsMouseDown: false,
+      PreventAnchor: false,
+      Timeout: undefined,
+      StartX: 0,
+      ScrollLeft: 0,
+    };
+  }
+  componentDidLoad() {
+    this.slider = this.el.shadowRoot.querySelector('.card-section');
+    //this.slider.addEventListener('scroll', () => this.onSliderScroll());
+    //window.addEventListener('scroll', () => this.onSliderScroll());
+    //this.onSliderScroll();
+    //observeInView(this.el, '.card-section', true);
   }
   handleTabSelected(tabIndex) {
     this.activeTab = tabIndex;
     this.dropdownOpen = false; // Close dropdown on selection
+    this.updateTileElements(tabIndex);
   }
   toggleDropdown() {
     this.dropdownOpen = !this.dropdownOpen;
@@ -19,11 +41,80 @@ export class HomepageToggledContent {
       index,
     }));
   }
+  updateTileElements(tabIndex) {
+    this.tileElements = Array.from(this.el.querySelectorAll(`[slot^="tab-tile-${tabIndex}"]`));
+  }
+  onSliderScroll() {
+    if (this.slider.scrollLeft === 0 && this.slider.classList.contains('scroll-st')) {
+      this.slider.classList.remove('scroll-st');
+    }
+    else if (this.slider.scrollLeft !== 0 && !this.slider.classList.contains('scroll-st')) {
+      this.slider.classList.add('scroll-st');
+    }
+    if (this.slider.scrollLeft === this.slider.scrollWidth - this.slider.offsetWidth && this.slider.classList.contains('scroll-ed')) {
+      this.slider.classList.remove('scroll-ed');
+    }
+    else if (this.slider.scrollLeft !== this.slider.scrollWidth - this.slider.offsetWidth && !this.slider.classList.contains('scroll-ed')) {
+      this.slider.classList.add('scroll-ed');
+    }
+  }
+  onSliderMouseDown(e, slider) {
+    e.preventDefault();
+    this.sliderSettings.IsMouseDown = true;
+    slider.classList.add('active');
+    this.sliderSettings.StartX = e.pageX - slider.offsetLeft;
+    this.sliderSettings.ScrollLeft = slider.scrollLeft;
+    this.sliderSettings.PreventAnchor = false;
+    this.sliderSettings.Timeout = setTimeout(() => {
+      this.sliderSettings.PreventAnchor = true;
+    }, 80);
+  }
+  onSliderMouseExit(e, slider) {
+    e.preventDefault();
+    clearTimeout(this.sliderSettings.Timeout);
+    this.sliderSettings.IsMouseDown = false;
+    slider.classList.remove('active');
+  }
+  onSliderMouseDrag(e, slider) {
+    if (this.sliderSettings.IsMouseDown) {
+      e.preventDefault();
+      const x = e.pageX - slider.offsetLeft;
+      const walk = x - this.sliderSettings.StartX;
+      slider.scrollLeft = this.sliderSettings.ScrollLeft - walk;
+    }
+  }
+  onCardMouseDown(e) {
+    if (e && e.currentTarget) {
+      let anch = e.currentTarget;
+      if (anch) {
+        anch.classList.add('active');
+      }
+    }
+  }
+  onCardMouseUp(e) {
+    if (e && e.currentTarget) {
+      let anch = e.currentTarget;
+      if (anch) {
+        anch.classList.remove('active');
+      }
+    }
+  }
   render() {
     const upArrow = (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "11", viewBox: "0 0 15 11", fill: "none" }, h("path", { d: "M13 8.5L7.34315 2.71178L1.68629 8.5", stroke: "white", "stroke-width": "3", "stroke-linecap": "round" })));
     const downArrow = (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "11", viewBox: "0 0 15 11", fill: "none" }, 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 (h("div", null, h("div", { class: "header" }, h("h2", null, h("slot", { name: "title" })), h("p", null, h("slot", { name: "description" }))), h("div", { class: "tabs" }, h("div", { class: "tabs-desktop" }, tabs.map(tab => (h("homepage-clickable-tab", { label: tab.label, active: this.activeTab === tab.index, activeColor: this.colors[tab.index], onClick: () => this.handleTabSelected(tab.index) })))), h("div", { class: "tabs-mobile" }, h("button", { class: `dropdown-button ${this.colors[this.activeTab]} ${this.dropdownOpen ? "opened" : ""}`, onClick: () => this.toggleDropdown() }, tabs[this.activeTab].label, h("span", { class: "arrow" }, this.dropdownOpen ? upArrow : downArrow)), this.dropdownOpen && (h("div", { class: "dropdown-menu" }, tabs.map(tab => (h("div", { class: "dropdown-item", onClick: () => this.handleTabSelected(tab.index) }, h("slot", { name: `tab-label-${tab.index}` })))))))), h("div", { class: "content" }, tabs.map((tab, index) => (h("div", { style: { display: this.activeTab === index ? 'flex' : 'none' }, class: "tab-content" }, h("slot", { name: `tab-image-${index}` }), h("div", { class: "content-detail" }, h("div", { hidden: true }, tab.label), h("h2", null, h("slot", { name: `tab-title-${index}` })), h("p", null, h("slot", { name: `tab-content-${index}` })), h("slot", { name: `tab-button-${index}` }), Array.from(this.el.querySelectorAll(`[slot^="tab-tile-title-${index}"]`)).length > 0 ? (h("div", { class: "info-card-wrapper" }, h("ptc-info-tile", { variant: 'text' }, h("div", { slot: "tile-title" }, h("slot", { name: `tab-tile-title-${index}-0` })), h("div", { slot: "tile-description" }, h("slot", { name: `tab-tile-description-${index}-0` }))), h("ptc-info-tile", { variant: 'text' }, h("div", { slot: "tile-title" }, h("slot", { name: `tab-tile-title-${index}-1` })), h("div", { slot: "tile-description" }, h("slot", { name: `tab-tile-description-${index}-1` }))))) : null)))))));
+    return (h("div", { class: "wrapper" }, h("div", { class: "header" }, h("h2", null, h("slot", { name: "title" })), h("p", null, h("slot", { name: "description" }))), h("div", { class: "tabs" }, h("div", { class: "tabs-desktop" }, tabs.map(tab => (h("homepage-clickable-tab", { label: tab.label, active: this.activeTab === tab.index, activeColor: this.colors[tab.index], onClick: () => this.handleTabSelected(tab.index) })))), h("div", { class: "tabs-mobile" }, h("button", { class: `dropdown-button ${this.colors[this.activeTab]} ${this.dropdownOpen ? 'opened' : ''}`, onClick: () => this.toggleDropdown() }, tabs[this.activeTab].label, h("span", { class: "arrow" }, this.dropdownOpen ? upArrow : downArrow)), this.dropdownOpen && (h("div", { class: "dropdown-menu" }, tabs.map(tab => (h("div", { class: "dropdown-item", onClick: () => this.handleTabSelected(tab.index) }, h("slot", { name: `tab-label-${tab.index}` })))))))), h("div", { class: "content" }, tabs.map((tab, index) => (h("div", { class: `tab-content ${this.activeTab === index ? 'active-tab' : ''}` }, h("slot", { name: `tab-image-${index}` }), h("div", { class: "content-detail" }, h("div", { hidden: true }, tab.label), h("h2", null, h("slot", { name: `tab-title-${index}` })), h("p", null, h("slot", { name: `tab-content-${index}` })), h("slot", { name: `tab-button-${index}` }), this.activeTab === index && this.tileElements.length > 0 ? (h("div", Object.assign({ class: "info-card-wrapper card-section" }, this.getSliderBindings()), this.tileElements.map((tile, index) => (h("div", { class: `swiper-slide card-link card-link-${index + 1}`, "tab-index": index + 1, key: index, 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)))))));
+  }
+  getSliderBindings() {
+    return {
+      onMouseDown: (e) => { this.onSliderMouseDown(e, this.slider); },
+      onMouseUp: (e) => { this.onSliderMouseExit(e, this.slider); },
+      onMouseLeave: (e) => { this.onSliderMouseExit(e, this.slider); },
+      onMouseMove: (e) => { this.onSliderMouseDrag(e, this.slider); }
+    };
   }
   static get is() { return "homepage-toggled-content"; }
   static get encapsulation() { return "shadow"; }
@@ -40,7 +131,8 @@ export class HomepageToggledContent {
   static get states() {
     return {
       "activeTab": {},
-      "dropdownOpen": {}
+      "dropdownOpen": {},
+      "tileElements": {}
     };
   }
   static get elementRef() { return "el"; }

package/dist/collection/components/ptc-card/ptc-card.js

@@ -1,4 +1,4 @@
-import { Host, h } from '@stencil/core';
+import { Host, h, Fragment } from '@stencil/core';
 export class PtcCard {
   constructor() {
     this.cardType = 'custom-card';
@@ -23,23 +23,24 @@ export class PtcCard {
     this.isCreoCard = false;
   }
   render() {
-    const Tag = !!this.cardHref ? 'a' : 'div';
+    const Tag = (!!this.cardHref && this.cardType !== 'featured-horizontal-card') ? 'a' : 'div';
     const classMap = this.getCssClassMap();
     const cutOff = this.getLineCuttoff();
     let cutOffTitleClass = '';
+    const BodyContainerTag = (!!this.cardHref && !!this.cardType && this.cardType === 'featured-horizontal-card') ? 'a' : Fragment;
     if (this.titleLineCutOff && this.titleLineCutOff > 0) {
       cutOffTitleClass = ' clamp-title';
     }
     return (h(Host, { class: {
         [this.cardType]: !!this.cardType,
         'creo-card-wrap': this.isCreoCard, // Add the cardType class conditionally
-      } }, this.styles && h("style", null, this.styles), h("slot", { name: "seo-content" }), h("div", { class: "card-border", part: "border-wrapper", style: { overflow: this.cardOverflow } }, h(Tag, Object.assign({ class: classMap, part: "card-layout" }, (!!this.cardHref ? { href: this.cardHref } : {}), (!!this.target && !!this.cardHref ? { target: this.target } : {}), (!!this.rel && !!this.cardHref ? { rel: this.rel } : {}), (!!this.ribbonText ? { rel: this.ribbonText } : {})), this.hasImage || this.hasLottie || this.hasVideo ? (h("div", { class: "card-media", part: "media-wrapper" }, this.getMediaSlot ? h("slot", { name: this.getMediaSlot() }) : null)) : null, (!!this.ribbonText && this.cardType == 'resource-center-card') || (!!this.ribbonText && this.cardType == 'related-card') ? (h("div", { class: "ribbon-text" }, `${this.ribbonText}`)) : null, h("div", { class: "card-body", part: "body-wrapper" }, !!this.cardDate && (this.cardType === 'listing-card' || this.cardType === 'listing-card-horizontal') ? (h("div", { class: "card-date-text" }, !!this.eventType ? (h("span", { class: "small" }, `${this.cardDate}`, "\u00A0\u00A0\u00A0|\u00A0\u00A0\u00A0", `${this.eventType}`)) : (h("span", { class: "small" }, `${this.cardDate}`)))) : null, this.cardType === 'case-studies-card'
+      } }, this.styles && h("style", null, this.styles), h("slot", { name: "seo-content" }), h("div", { class: "card-border", part: "border-wrapper", style: { overflow: this.cardOverflow } }, h(Tag, Object.assign({ class: classMap, part: "card-layout" }, (!!this.cardHref ? { href: this.cardHref } : {}), (!!this.target && !!this.cardHref ? { target: this.target } : {}), (!!this.rel && !!this.cardHref ? { rel: this.rel } : {}), (!!this.ribbonText ? { rel: this.ribbonText } : {})), this.hasImage || this.hasLottie || this.hasVideo ? (h("div", { class: "card-media", part: "media-wrapper" }, this.getMediaSlot ? h("slot", { name: this.getMediaSlot() }) : null)) : null, (!!this.ribbonText && this.cardType == 'resource-center-card') || (!!this.ribbonText && this.cardType == 'related-card') ? (h("div", { class: "ribbon-text" }, `${this.ribbonText}`)) : null, h("div", { class: "card-body", part: "body-wrapper" }, h(BodyContainerTag, Object.assign({ class: "link-wrapper" }, (!!this.cardHref ? { href: this.cardHref } : {}), (!!this.target && !!this.cardHref ? { target: this.target } : {}), (!!this.rel && !!this.cardHref ? { rel: this.rel } : {})), !!this.cardDate && (this.cardType === 'listing-card' || this.cardType === 'listing-card-horizontal') ? (h("div", { class: "card-date-text" }, !!this.eventType ? (h("span", { class: "small" }, `${this.cardDate}`, "\u00A0\u00A0\u00A0|\u00A0\u00A0\u00A0", `${this.eventType}`)) : (h("span", { class: "small" }, `${this.cardDate}`)))) : null, this.cardType === 'case-studies-card'
       ? Object.assign({}, (!!this.cardLogo ? (h("div", { class: "card-logo-container" }, h("ptc-picture", { alt: "", "object-fit": "contain", src: this.cardLogo, height: "40" }))) : (h("div", { class: "card-logo-none" })))) : null, h("slot", { name: "slot-before-heading" }), !!this.heading
       ? [
         this.cardType === 'listing-card' ? (h("h3", { class: `ptc-h3 ${this.headingTransform}${cutOffTitleClass}`, part: "card-heading" }, h("ptc-tooltip", { "text-display": "inline", "text-lines": this.maxLines, "max-length": this.maxChars, description: this.heading, position: "bottom", width: "full-width", theme: "standard", "hide-on-mobile": "true", "no-overflow": "true" }))) : this.cardType === 'hightlight-card' ? (h("h2", { class: `${this.headingTransform}${cutOffTitleClass}`, style: cutOff, part: "card-heading" }, this.heading)) : (h("h3", { class: `ptc-h3 ${this.headingTransform}${cutOffTitleClass}`, style: cutOff, part: "card-heading" }, this.heading)),
         h("slot", { name: "slot-after-heading" }),
       ]
-      : null, h("slot", { name: "slot-description" }), !!this.cardDate && this.cardType !== 'listing-card' && this.cardType !== 'listing-card-horizontal' && this.cardType !== 'hightlight-card' ? (h("ptc-date", { "date-string": `${this.cardDate}`, "date-styles": "span{color:#40434a;font-size:var(--ptc-font-size-x-small);margin-top:var(--ptc-element-spacing-06);display:inline-block;}" })) : null, !!this.cardDate && this.cardType === 'hightlight-card' ? (h("ptc-date", { style: { marginBottom: '20px' }, "format-options": '{"year":"numeric","month":"long","day":"numeric"}', "date-string": `${this.cardDate}`, "date-styles": "span{color: #a3a3a3;font-family: Raleway;font-size: 1rem !important;font-stretch: normal;font-style: normal;font-weight: 400;letter-spacing: normal;line-height: 1.03;padding-top: 15px;text-align: left;}", country: this.country })) : null)))));
+      : null, h("slot", { name: "slot-description" }), !!this.cardDate && this.cardType !== 'listing-card' && this.cardType !== 'listing-card-horizontal' && this.cardType !== 'hightlight-card' ? (h("ptc-date", { "date-string": `${this.cardDate}`, "date-styles": "span{color:#40434a;font-size:var(--ptc-font-size-x-small);margin-top:var(--ptc-element-spacing-06);display:inline-block;}" })) : null, !!this.cardDate && this.cardType === 'hightlight-card' ? (h("ptc-date", { style: { marginBottom: '20px' }, "format-options": '{"year":"numeric","month":"long","day":"numeric"}', "date-string": `${this.cardDate}`, "date-styles": "span{color: #a3a3a3;font-family: Raleway;font-size: 1rem !important;font-stretch: normal;font-style: normal;font-weight: 400;letter-spacing: normal;line-height: 1.03;padding-top: 15px;text-align: left;}", country: this.country })) : null))))));
   }
   getCssClassMap() {
     return {

package/dist/collection/components/ptc-info-tile/ptc-info-tile.css

@@ -63,7 +63,6 @@ ptc-link, ptc-square-card,
   background-color: white;
   border-radius: 8px;
   overflow: hidden;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   cursor: pointer;
   transition: border 0.3s;
   max-width: 360px;
@@ -76,6 +75,7 @@ ptc-link, ptc-square-card,
   flex-direction: row;
   align-items: center;
   margin: 0 auto;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 .tile.image .tile-content {
   border-bottom: 2px solid var(--color-white);
@@ -98,6 +98,9 @@ ptc-link, ptc-square-card,
   width: 268px;
 }
 .tile.text:hover {
+  border: 1px solid var(--color-gray-07);
+}
+.tile.text:focus, .tile.text:active {
   background-color: var(--color-gray-01);
   border: 1px solid var(--color-gray-07);
 }
@@ -152,6 +155,7 @@ ptc-link, ptc-square-card,
   font-size: var(--ptc-font-size-xx-small) !important;
   font-weight: var(--ptc-font-weight-medium) !important;
   text-align: left !important;
+  margin: 0px !important;
 }
 
 ::slotted(p[slot=tile-description]) {

package/dist/collection/components/ptc-jumbotron/ptc-jumbotron.js

@@ -19,6 +19,7 @@ export class PtcJumbotron {
     this.textAlign = 'left';
     this.isMobile = undefined;
     this.isTransitioning = undefined;
+    this.styles = undefined;
     this.hasCtaSlot = undefined;
   }
   componentWillLoad() {
@@ -55,7 +56,7 @@ export class PtcJumbotron {
       default:
         mediaElement = h("ptc-img", { "img-url": this.bgSrc, styles: ".smart-bg{background-position:right !important;}" });
     }
-    return (h(Host, { class: classMap }, h("div", { class: { 'parent': true, 'light-links': this.jumbotronType === 'dark' || this.jumbotronType === 'dark-video', 'hp-adjustments': this.isHomepage, 'transitioning': this.isTransitioning } }, h("div", { class: `div1 image-container ${this.jumbotronType === 'text' ? 'hidden' : ''}` }, mediaElement), h("div", { class: "div2 content-container" }, h("div", { class: "bg-overlay", style: { background: this.contentBackground } }), h("div", { class: { "ptc-container": true, "content-layout": true, 'hp-container': this.isHomepage } }, h("max-width-container", { "max-width-p": "60", breakpoint: 992, "content-align": this.jumbotronType === 'text' ? 'center' : this.textAlign, styles: ":host{z-index: 999}" }, h("slot", { name: "breadcrumb" }), h("span", { class: "main-content-items" }, h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("slot", { name: "main-title" }), h("slot", { name: "hp-sub-title" }), (this.jumbotronType !== 'text' || (this.jumbotronType === 'text' && this.subTitle)) && (!this.isHomepage) && (h("div", null, h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }))), !this.isHomepage && (h("ptc-para", { "font-size": this.jumbotronType === 'text' && this.isMobile ? 'x-small' : 'small', "font-weight": "w-4", "para-margin": `${this.jumbotronType === 'text' ? 'margin-flush' : 'margin-bottom-6'}`, "para-color": "white", "para-line-h": "line-height-p", "para-align": this.jumbotronType === 'text' ? 'center' : 'left' }, h("ptc-tooltip", { "text-lines": "8", description: this.subTitle, position: "right", styles: `.ellipsis-by-line-boxing{color: ${this.contentColor};}` }))), this.hasCtaSlot && (h("div", { class: `u-flex u-flex-wrap gap-adjustment${this.jumbotronType === 'text' ? ' text-adjustment' : ''}` }, h("slot", { name: "j-cta" }))))), this.hasPopupVideo && this.jumbotronType !== 'png' ? h("slot", { name: "video" }) : null, this.jumbotronType === 'png' ? (h("div", { class: "desktop-media-image" }, h("div", { class: "media-image-wrapper" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc }), this.hasPopupVideo ? h("slot", { name: "video" }) : null))) : null, this.jumbotronType === 'gif' ? (h("div", { class: "desktop-media-image desk-gif-adjustment" }, h("img", { src: this.gifSrc }))) : null)))));
+    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: { 'parent': true, 'light-links': this.jumbotronType === 'dark' || this.jumbotronType === 'dark-video', 'hp-adjustments': this.isHomepage, 'transitioning': this.isTransitioning } }, h("div", { class: `div1 image-container ${this.jumbotronType === 'text' ? 'hidden' : ''}` }, mediaElement), h("div", { class: "div2 content-container" }, h("div", { class: "bg-overlay", style: { background: this.contentBackground } }), h("div", { class: { "ptc-container": true, "content-layout": true, 'hp-container': this.isHomepage } }, h("max-width-container", { "max-width-p": "60", breakpoint: 992, "content-align": this.jumbotronType === 'text' ? 'center' : this.textAlign, styles: ":host{z-index: 999}" }, h("slot", { name: "breadcrumb" }), h("span", { class: "main-content-items" }, h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("slot", { name: "main-title" }), h("slot", { name: "hp-sub-title" }), (this.jumbotronType !== 'text' || (this.jumbotronType === 'text' && this.subTitle)) && (!this.isHomepage) && (h("div", null, h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }))), !this.isHomepage && (h("ptc-para", { "font-size": this.jumbotronType === 'text' && this.isMobile ? 'x-small' : 'small', "font-weight": "w-4", "para-margin": `${this.jumbotronType === 'text' ? 'margin-flush' : 'margin-bottom-6'}`, "para-color": "white", "para-line-h": "line-height-p", "para-align": this.jumbotronType === 'text' ? 'center' : 'left' }, h("ptc-tooltip", { "text-lines": "8", description: this.subTitle, position: "right", styles: `.ellipsis-by-line-boxing{color: ${this.contentColor};}` }))), this.hasCtaSlot && (h("div", { class: `u-flex u-flex-wrap gap-adjustment${this.jumbotronType === 'text' ? ' text-adjustment' : ''}` }, h("slot", { name: "j-cta" }))))), this.hasPopupVideo && this.jumbotronType !== 'png' ? h("slot", { name: "video" }) : null, this.jumbotronType === 'png' ? (h("div", { class: "desktop-media-image" }, h("div", { class: "media-image-wrapper" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc }), this.hasPopupVideo ? h("slot", { name: "video" }) : null))) : null, this.jumbotronType === 'gif' ? (h("div", { class: "desktop-media-image desk-gif-adjustment" }, h("img", { src: this.gifSrc }))) : null)))));
   }
   getCssClassMap() {
     return {
@@ -369,6 +370,23 @@ export class PtcJumbotron {
         "attribute": "is-transitioning",
         "reflect": false
       },
+      "styles": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "(optional) Injected CSS styles"
+        },
+        "attribute": "styles",
+        "reflect": false
+      },
       "hasCtaSlot": {
         "type": "boolean",
         "mutable": true,

package/dist/collection/components/ptc-readmore/ptc-readmore.js

@@ -52,7 +52,7 @@ export class PtcReadmore {
     });
     this.enableAddTruncatedClass('tab-header');
     this.enableAddTruncatedClass('ptc-ellipsis-dropdown');
-    this.enableAddTruncatedClass('ptc-product-highlight-card');
+    this.enableAddTruncatedClass('ptc-product-card');
   }
   // click event handler
   handleClick(event) {

package/dist/custom-elements/index.d.ts

@@ -14,6 +14,12 @@ export const AuthorListingExample: {
   new (): AuthorListingExample;
 };
 
+interface BlogsSearchSection extends Components.BlogsSearchSection, HTMLElement {}
+export const BlogsSearchSection: {
+  prototype: BlogsSearchSection;
+  new (): BlogsSearchSection;
+};
+
 interface BundleExample extends Components.BundleExample, HTMLElement {}
 export const BundleExample: {
   prototype: BundleExample;