@ptcwebops/ptcw-design 6.3.37 → 6.3.38

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

@@ -1,15 +1,15 @@
-import { Host, h, Fragment } from '@stencil/core';
+import { Host, h, Fragment, } from "@stencil/core";
 export class PtcCard {
   constructor() {
-    this.cardType = 'custom-card';
+    this.cardType = "custom-card";
     this.cardHref = undefined;
-    this.target = '_self';
+    this.target = "_self";
     this.rel = undefined;
     this.hasImage = false;
     this.hasVideo = false;
     this.hasLottie = false;
     this.heading = undefined;
-    this.headingTransform = 'none';
+    this.headingTransform = "none";
     this.cardDate = undefined;
     this.country = undefined;
     this.styles = undefined;
@@ -27,9 +27,9 @@ export class PtcCard {
     this.cardTitle = "";
   }
   handleTabHiddenChange(newValue) {
-    const tabElement = this.el.shadowRoot.querySelector('.tab-tracker-news[tabindex]');
+    const tabElement = this.el.shadowRoot.querySelector(".tab-tracker-news[tabindex]");
     if (tabElement) {
-      tabElement.setAttribute('tabindex', newValue ? '-1' : '0');
+      tabElement.setAttribute("tabindex", newValue ? "-1" : "0");
     }
   }
   async hasAncestorWithClass(className) {
@@ -45,14 +45,14 @@ export class PtcCard {
   }
   componentWillLoad() {
     //this.checkAndSetTabState();
-    this.isTabHidden = this.el.classList.contains('tab-hidden');
+    this.isTabHidden = this.el.classList.contains("tab-hidden");
     // Set up a MutationObserver to detect changes to the `class` attribute
     this.observer = new MutationObserver(() => {
-      this.isTabHidden = this.el.classList.contains('tab-hidden');
+      this.isTabHidden = this.el.classList.contains("tab-hidden");
     });
     this.observer.observe(this.el, {
       attributes: true,
-      attributeFilter: ['class'],
+      attributeFilter: ["class"],
     });
   }
   disconnectedCallback() {
@@ -62,45 +62,92 @@ export class PtcCard {
     }
   }
   render() {
-    const Tag = (!!this.cardHref && this.cardType !== 'featured-horizontal-card') ? '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;
+    let cutOffTitleClass = "";
+    const BodyContainerTag = !!this.cardHref &&
+      !!this.cardType &&
+      this.cardType === "featured-horizontal-card"
+      ? "a"
+      : Fragment;
     if (this.titleLineCutOff && this.titleLineCutOff > 0) {
-      cutOffTitleClass = ' clamp-title';
+      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", { id: (this.cardType !== 'featured-horizontal-card') ? this.trackerId : "", class: "card-border mf-listen", 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 } : {}), (Tag === 'a' && !this.isTabHidden) ? { tabindex: 0 } : { tabindex: -1 }, (!!this.cardTitle ? { title: this.cardTitle } : {})), 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')
-      || (!!this.ribbonText && this.cardType == 'listing-card') || (!!this.ribbonText && this.cardType == 'events-card') ? (h("div", { class: "ribbon-text" }, `${this.ribbonText}`)) : null, h("div", { id: ((this.cardType === 'featured-horizontal-card' || this.cardType === 'related-card' || this.cardType == 'events-card')) ? this.trackerId : "", class: "card-body mf-listen", part: "body-wrapper" }, h(BodyContainerTag, Object.assign({ class: "link-wrapper mf-listen" }, (!!this.cardHref ? { href: this.cardHref } : {}), (!!this.target && !!this.cardHref ? { target: this.target } : {}), (!!this.rel && !!this.cardHref ? { rel: this.rel } : {}), (!!this.cardTitle ? { title: this.cardTitle } : {}), (BodyContainerTag === 'a') ? { tabIndex: 0 } : {}), !!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'
+        "creo-card-wrap": this.isCreoCard, // Add the cardType class conditionally
+      } }, this.styles && h("style", null, this.styles), h("slot", { name: "seo-content" }), h("div", { id: this.cardType !== "featured-horizontal-card"
+        ? this.trackerId
+        : "", class: "card-border mf-listen", 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 } : {}), (Tag === "a" && !this.isTabHidden
+      ? { tabindex: 0 }
+      : { tabindex: -1 }), (!!this.cardTitle ? { title: this.cardTitle } : {})), 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") ||
+      (!!this.ribbonText &&
+        this.cardType == "listing-card") ||
+      (!!this.ribbonText &&
+        this.cardType == "events-card") ? (h("div", { class: "ribbon-text" }, `${this.ribbonText}`)) : null, h("div", { id: this.cardType === "featured-horizontal-card" ||
+        this.cardType === "related-card" ||
+        this.cardType == "events-card"
+        ? this.trackerId
+        : "", class: "card-body mf-listen", part: "body-wrapper" }, h(BodyContainerTag, Object.assign({ class: "link-wrapper mf-listen" }, (!!this.cardHref
+      ? { href: this.cardHref }
+      : {}), (!!this.target && !!this.cardHref
+      ? { target: this.target }
+      : {}), (!!this.rel && !!this.cardHref
+      ? { rel: this.rel }
+      : {}), (!!this.cardTitle
+      ? { title: this.cardTitle }
+      : {}), (BodyContainerTag === "a"
+      ? { tabIndex: 0 }
+      : {})), !!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' || this.cardType == 'events-card' ? (h("h3", { class: `ptc-h3 ${this.headingTransform}${cutOffTitleClass}`, part: "card-heading" }, this.heading)) : this.cardType === 'hightlight-card' ? (h("h2", { class: `${this.headingTransform}${cutOffTitleClass}`, style: cutOff, part: "card-heading" }, this.heading)) : this.cardType === 'featured-horizontal-card' ? (h("ptc-title", { "seo-compatibility-mode": true, type: "h2", "title-size": "xx-large", upperline: "no-upperline", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-8", "is-plm-hub": "false" }, h("h2", null, this.heading))) : (h("h3", { class: `ptc-h3 ${this.headingTransform}${cutOffTitleClass}`, style: cutOff, part: "card-heading" }, this.heading)),
+        this.cardType === "listing-card" ||
+          this.cardType == "events-card" ? (h("h3", { class: `ptc-h3 ${this.headingTransform}${cutOffTitleClass}`, part: "card-heading" }, this.heading)) : this.cardType ===
+          "hightlight-card" ? (h("h2", { class: `${this.headingTransform}${cutOffTitleClass}`, style: cutOff, part: "card-heading" }, this.heading)) : this.cardType ===
+          "featured-horizontal-card" ? (h("ptc-title", { "seo-compatibility-mode": true, type: "h2", "title-size": "xx-large", upperline: "no-upperline", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-8", "is-plm-hub": "false" }, h("h2", null, this.heading))) : (h("h3", { class: `ptc-h3 ${this.headingTransform}${cutOffTitleClass}`, style: cutOff, part: "card-heading" }, this.heading)),
         h("slot", { name: "slot-after-heading" }),
       ]
-      : null, (!!this.cardDate && this.cardType == 'events-card' ? (h("div", { class: "events-date" }, h("svg", { class: "calendar-icon", width: "15", height: "17", viewBox: "0 0 15 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { id: "Group" }, h("path", { id: "Vector", d: "M4.62109 7.11804H3.12109V8.61804H4.62109V7.11804Z", fill: "#323B42" }), h("path", { id: "Vector_2", d: "M7.82129 7.11804H6.32129V8.61804H7.82129V7.11804Z", fill: "#323B42" }), h("path", { id: "Vector_3", d: "M11.1211 7.11804H9.62109V8.61804H11.1211V7.11804Z", fill: "#323B42" }), h("path", { id: "Vector_4", d: "M4.62109 9.51807H3.12109V11.0181H4.62109V9.51807Z", fill: "#323B42" }), h("path", { id: "Vector_5", d: "M7.82129 9.51807H6.32129V11.0181H7.82129V9.51807Z", fill: "#323B42" }), h("path", { id: "Vector_6", d: "M11.1211 9.51807H9.62109V11.0181H11.1211V9.51807Z", fill: "#323B42" }), h("path", { id: "Vector_7", d: "M7.82129 11.9181H6.32129V13.4181H7.82129V11.9181Z", fill: "#323B42" }), h("path", { id: "Vector_8", d: "M4.62109 11.9181H3.12109V13.4181H4.62109V11.9181Z", fill: "#323B42" }), h("g", { id: "Group_2" }, h("path", { id: "Vector_9", d: "M11.6211 2.11804V3.41804V3.91804H11.1211H9.12109H8.62109V3.41804V2.11804H5.32109V3.41804V3.91804H4.82109H2.82109H2.32109V3.41804V2.11804H0.121094V16.118H14.1211V2.11804H11.6211ZM12.6211 14.618H1.62109V5.81804H12.6211V14.618Z", fill: "#323B42" }), h("path", { id: "Vector_10", d: "M2.82129 0.118042V2.11804V3.41804H4.82129V2.11804V0.118042H2.82129Z", fill: "#323B42" }), h("path", { id: "Vector_11", d: "M9.12109 0.118042V2.11804V3.41804H11.1211V2.11804V0.118042H9.12109Z", fill: "#323B42" })))), h("span", { class: "events-item-text event-cards-date" }, `${this.cardDate}`)))
-      : null), !!this.eventType && this.cardType == 'events-card' ? (h("div", { class: "events-type-class" }, h("svg", { class: "in-person-icon", width: "17", height: "13", viewBox: "0 0 17 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { id: "Group" }, h("g", { id: "Group_2" }, h("path", { id: "Vector", d: "M16.0211 9.71804L15.3211 7.31804C15.3211 7.31804 15.2211 6.71804 14.4211 6.51804L12.7211 6.11804C12.5211 6.01804 12.4211 5.61804 12.4211 5.61804V5.11804C12.6211 4.91804 12.7211 4.61804 12.8211 4.41804L12.9211 4.31804C13.0211 4.21804 13.0211 4.11804 13.0211 4.11804C13.1211 4.01804 13.1211 3.81804 13.1211 3.71804L13.2211 3.31804C13.2211 3.11804 13.2211 2.91804 13.1211 2.81804L13.0211 2.71804C13.0211 2.01804 12.9211 1.41804 12.6211 1.01804C12.5211 0.518042 12.0211 0.218042 11.4211 0.118042C11.3211 0.118042 11.1211 0.118042 11.0211 0.118042C10.9211 0.118042 10.7211 0.118042 10.6211 0.118042C10.0211 0.218042 9.52109 0.518042 9.22109 1.01804C8.92109 1.41804 8.82109 2.01804 8.82109 2.71804L8.72109 2.81804C8.62109 2.91804 8.62109 3.01804 8.62109 3.31804L8.72109 3.71804C8.72109 3.81804 8.72109 4.01804 8.82109 4.11804C8.82109 4.21804 8.92109 4.31804 8.92109 4.31804C9.02109 4.31804 9.02109 4.41804 9.12109 4.41804C9.22109 4.71804 9.32109 4.91804 9.52109 5.11804V5.61804C9.52109 5.61804 9.42109 6.01804 9.22109 6.11804L8.12109 6.41804V6.51804C8.12109 6.61804 8.02109 6.91804 7.92109 7.11804C7.82109 7.21804 7.82109 7.41804 7.72109 7.51804C7.72109 7.51804 7.72109 7.61804 7.62109 7.61804C7.82109 7.61804 8.12109 7.71804 8.52109 7.81804C9.52109 7.91804 10.1211 8.81804 10.3211 9.71804H11.0211H16.0211Z", fill: "#323B42" })), h("path", { id: "Vector_2", d: "M9.42148 9.81807C9.42148 9.81807 9.32148 9.21807 8.52148 9.01807L6.82148 8.61807C6.62148 8.51807 6.52148 8.11807 6.52148 8.11807V7.61807C6.72148 7.41807 6.82148 7.11807 6.92148 6.91807L7.02148 6.81807C7.12148 6.71807 7.12148 6.61807 7.12148 6.61807C7.22148 6.31807 7.32148 6.21807 7.32148 6.11807L7.42148 5.71807C7.42148 5.51807 7.42148 5.31807 7.32148 5.21807L7.22148 5.11807C7.22148 4.41807 7.12148 3.81807 6.82148 3.41807C6.52148 3.01807 6.02148 2.61807 5.42148 2.51807C5.32148 2.51807 5.12148 2.51807 5.02148 2.51807C4.92148 2.51807 4.72148 2.51807 4.62148 2.51807C4.02148 2.61807 3.52148 3.01807 3.22148 3.41807C2.92148 3.91807 2.82148 4.51807 2.92148 5.11807L2.82148 5.21807C2.72148 5.31807 2.62148 5.51807 2.72148 5.71807L2.82148 6.11807C2.82148 6.21807 2.82148 6.41807 2.92148 6.51807C2.92148 6.61807 3.02148 6.71807 3.02148 6.71807C3.02148 6.81807 3.12148 6.81807 3.12148 6.81807C3.22148 7.11807 3.32148 7.41807 3.52148 7.61807V8.11807C3.52148 8.11807 3.42148 8.51807 3.22148 8.61807L1.52148 9.01807C0.721484 9.21807 0.621484 9.81807 0.621484 9.81807L0.0214844 12.2181H5.02148H10.0215L9.42148 9.81807Z", fill: "#323B42" }))), h("span", { class: "event-name events-item-text" }, `${this.eventType}`))) : null, !!this.language && this.cardType == 'events-card' ? (h("div", { class: "language" }, h("svg", { class: "language-icon", width: "17", height: "17", viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { id: "Group" }, h("g", { id: "Group_2" }, h("path", { id: "Vector", d: "M15.0219 3.31799H12.5219V11.118C12.5219 11.618 12.1219 12.118 11.5219 12.118H4.42188V12.318C4.42188 12.818 4.82187 13.318 5.42188 13.318H13.9219L16.0219 16.118V4.21799C16.0219 3.71799 15.6219 3.31799 15.0219 3.31799Z", fill: "#323B42" })), h("path", { id: "Vector_2", d: "M9.42148 0.118042H1.12148C0.521484 0.118042 0.0214844 0.618042 0.0214844 1.21804V13.018L2.12148 10.118H9.42148C10.0215 10.118 10.5215 9.61804 10.5215 9.01804V1.21804C10.5215 0.618042 10.0215 0.118042 9.42148 0.118042ZM6.12148 6.51804H1.72148V5.61804H6.12148V6.51804ZM8.82148 4.01804H1.72148V3.01804H8.82148V4.01804Z", fill: "#323B42" }))), h("span", { class: "language-name events-item-text" }, `${this.language}`))) : null, h("slot", { name: "slot-description" }), !!this.cardDate && this.cardType !== 'listing-card' && this.cardType !== 'listing-card-horizontal' && this.cardType !== 'hightlight-card' && this.cardType !== 'events-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, !!this.cardDate &&
+      this.cardType == "events-card" ? (h("div", { class: "events-date" }, h("svg", { class: "calendar-icon", width: "15", height: "17", viewBox: "0 0 15 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { id: "Group" }, h("path", { id: "Vector", d: "M4.62109 7.11804H3.12109V8.61804H4.62109V7.11804Z", fill: "#323B42" }), h("path", { id: "Vector_2", d: "M7.82129 7.11804H6.32129V8.61804H7.82129V7.11804Z", fill: "#323B42" }), h("path", { id: "Vector_3", d: "M11.1211 7.11804H9.62109V8.61804H11.1211V7.11804Z", fill: "#323B42" }), h("path", { id: "Vector_4", d: "M4.62109 9.51807H3.12109V11.0181H4.62109V9.51807Z", fill: "#323B42" }), h("path", { id: "Vector_5", d: "M7.82129 9.51807H6.32129V11.0181H7.82129V9.51807Z", fill: "#323B42" }), h("path", { id: "Vector_6", d: "M11.1211 9.51807H9.62109V11.0181H11.1211V9.51807Z", fill: "#323B42" }), h("path", { id: "Vector_7", d: "M7.82129 11.9181H6.32129V13.4181H7.82129V11.9181Z", fill: "#323B42" }), h("path", { id: "Vector_8", d: "M4.62109 11.9181H3.12109V13.4181H4.62109V11.9181Z", fill: "#323B42" }), h("g", { id: "Group_2" }, h("path", { id: "Vector_9", d: "M11.6211 2.11804V3.41804V3.91804H11.1211H9.12109H8.62109V3.41804V2.11804H5.32109V3.41804V3.91804H4.82109H2.82109H2.32109V3.41804V2.11804H0.121094V16.118H14.1211V2.11804H11.6211ZM12.6211 14.618H1.62109V5.81804H12.6211V14.618Z", fill: "#323B42" }), h("path", { id: "Vector_10", d: "M2.82129 0.118042V2.11804V3.41804H4.82129V2.11804V0.118042H2.82129Z", fill: "#323B42" }), h("path", { id: "Vector_11", d: "M9.12109 0.118042V2.11804V3.41804H11.1211V2.11804V0.118042H9.12109Z", fill: "#323B42" })))), h("span", { class: "events-item-text event-cards-date" }, `${this.cardDate}`))) : null, !!this.eventType &&
+      this.cardType == "events-card" ? (h("div", { class: "events-type-class" }, h("svg", { class: "in-person-icon", width: "17", height: "13", viewBox: "0 0 17 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { id: "Group" }, h("g", { id: "Group_2" }, h("path", { id: "Vector", d: "M16.0211 9.71804L15.3211 7.31804C15.3211 7.31804 15.2211 6.71804 14.4211 6.51804L12.7211 6.11804C12.5211 6.01804 12.4211 5.61804 12.4211 5.61804V5.11804C12.6211 4.91804 12.7211 4.61804 12.8211 4.41804L12.9211 4.31804C13.0211 4.21804 13.0211 4.11804 13.0211 4.11804C13.1211 4.01804 13.1211 3.81804 13.1211 3.71804L13.2211 3.31804C13.2211 3.11804 13.2211 2.91804 13.1211 2.81804L13.0211 2.71804C13.0211 2.01804 12.9211 1.41804 12.6211 1.01804C12.5211 0.518042 12.0211 0.218042 11.4211 0.118042C11.3211 0.118042 11.1211 0.118042 11.0211 0.118042C10.9211 0.118042 10.7211 0.118042 10.6211 0.118042C10.0211 0.218042 9.52109 0.518042 9.22109 1.01804C8.92109 1.41804 8.82109 2.01804 8.82109 2.71804L8.72109 2.81804C8.62109 2.91804 8.62109 3.01804 8.62109 3.31804L8.72109 3.71804C8.72109 3.81804 8.72109 4.01804 8.82109 4.11804C8.82109 4.21804 8.92109 4.31804 8.92109 4.31804C9.02109 4.31804 9.02109 4.41804 9.12109 4.41804C9.22109 4.71804 9.32109 4.91804 9.52109 5.11804V5.61804C9.52109 5.61804 9.42109 6.01804 9.22109 6.11804L8.12109 6.41804V6.51804C8.12109 6.61804 8.02109 6.91804 7.92109 7.11804C7.82109 7.21804 7.82109 7.41804 7.72109 7.51804C7.72109 7.51804 7.72109 7.61804 7.62109 7.61804C7.82109 7.61804 8.12109 7.71804 8.52109 7.81804C9.52109 7.91804 10.1211 8.81804 10.3211 9.71804H11.0211H16.0211Z", fill: "#323B42" })), h("path", { id: "Vector_2", d: "M9.42148 9.81807C9.42148 9.81807 9.32148 9.21807 8.52148 9.01807L6.82148 8.61807C6.62148 8.51807 6.52148 8.11807 6.52148 8.11807V7.61807C6.72148 7.41807 6.82148 7.11807 6.92148 6.91807L7.02148 6.81807C7.12148 6.71807 7.12148 6.61807 7.12148 6.61807C7.22148 6.31807 7.32148 6.21807 7.32148 6.11807L7.42148 5.71807C7.42148 5.51807 7.42148 5.31807 7.32148 5.21807L7.22148 5.11807C7.22148 4.41807 7.12148 3.81807 6.82148 3.41807C6.52148 3.01807 6.02148 2.61807 5.42148 2.51807C5.32148 2.51807 5.12148 2.51807 5.02148 2.51807C4.92148 2.51807 4.72148 2.51807 4.62148 2.51807C4.02148 2.61807 3.52148 3.01807 3.22148 3.41807C2.92148 3.91807 2.82148 4.51807 2.92148 5.11807L2.82148 5.21807C2.72148 5.31807 2.62148 5.51807 2.72148 5.71807L2.82148 6.11807C2.82148 6.21807 2.82148 6.41807 2.92148 6.51807C2.92148 6.61807 3.02148 6.71807 3.02148 6.71807C3.02148 6.81807 3.12148 6.81807 3.12148 6.81807C3.22148 7.11807 3.32148 7.41807 3.52148 7.61807V8.11807C3.52148 8.11807 3.42148 8.51807 3.22148 8.61807L1.52148 9.01807C0.721484 9.21807 0.621484 9.81807 0.621484 9.81807L0.0214844 12.2181H5.02148H10.0215L9.42148 9.81807Z", fill: "#323B42" }))), h("span", { class: "event-name events-item-text" }, `${this.eventType}`))) : null, !!this.language &&
+      this.cardType == "events-card" ? (h("div", { class: "language" }, h("svg", { class: "language-icon", width: "17", height: "17", viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { id: "Group" }, h("g", { id: "Group_2" }, h("path", { id: "Vector", d: "M15.0219 3.31799H12.5219V11.118C12.5219 11.618 12.1219 12.118 11.5219 12.118H4.42188V12.318C4.42188 12.818 4.82187 13.318 5.42188 13.318H13.9219L16.0219 16.118V4.21799C16.0219 3.71799 15.6219 3.31799 15.0219 3.31799Z", fill: "#323B42" })), h("path", { id: "Vector_2", d: "M9.42148 0.118042H1.12148C0.521484 0.118042 0.0214844 0.618042 0.0214844 1.21804V13.018L2.12148 10.118H9.42148C10.0215 10.118 10.5215 9.61804 10.5215 9.01804V1.21804C10.5215 0.618042 10.0215 0.118042 9.42148 0.118042ZM6.12148 6.51804H1.72148V5.61804H6.12148V6.51804ZM8.82148 4.01804H1.72148V3.01804H8.82148V4.01804Z", fill: "#323B42" }))), h("span", { class: "language-name events-item-text" }, `${this.language}`))) : null, h("slot", { name: "slot-description" }), !!this.cardDate &&
+      this.cardType !== "listing-card" &&
+      this.cardType !== "listing-card-horizontal" &&
+      this.cardType !== "hightlight-card" &&
+      this.cardType !== "events-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 {
-      ['card-layout']: true,
-      ['link-wrapper']: !!this.cardType ? true : false,
-      ['creo-card']: this.isCreoCard ? true : false,
-      ['mf-listen']: true,
-      ['tab-tracker-news']: true,
+      ["card-layout"]: true,
+      ["link-wrapper"]: !!this.cardType ? true : false,
+      ["creo-card"]: this.isCreoCard ? true : false,
+      ["mf-listen"]: true,
+      ["tab-tracker-news"]: true,
     };
   }
   getMediaSlot() {
     if (this.hasLottie) {
-      return 'slot-lottie';
+      return "slot-lottie";
     }
     else if (this.hasVideo) {
-      return 'slot-video';
+      return "slot-video";
     }
     else if (this.hasImage) {
-      return 'slot-image';
+      return "slot-image";
     }
     else {
       return null;
@@ -110,7 +157,7 @@ export class PtcCard {
     let result;
     if (this.titleLineCutOff && this.titleLineCutOff > 0) {
       result = {
-        ['-webkit-line-clamp']: `${this.titleLineCutOff}`,
+        ["-webkit-line-clamp"]: `${this.titleLineCutOff}`,
       };
     }
     return result;
@@ -133,7 +180,7 @@ export class PtcCard {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "| 'simple-card'\r\n    | 'lottie-card'\r\n    | 'custom-card'\r\n    | 'clip-edge-card'\r\n    | 'hightlight-card'\r\n    | 'listing-card'\r\n    | 'horizontal-card'\r\n    | 'listing-card-horizontal'\r\n    | 'resource-center-card'\r\n    | 'case-studies-card'\r\n    | 'featured-horizontal-card'\r\n    | 'related-card'\r\n    | 'events-card'",
+          "original": "| \"simple-card\"\r\n\t\t| \"lottie-card\"\r\n\t\t| \"custom-card\"\r\n\t\t| \"clip-edge-card\"\r\n\t\t| \"hightlight-card\"\r\n\t\t| \"listing-card\"\r\n\t\t| \"horizontal-card\"\r\n\t\t| \"listing-card-horizontal\"\r\n\t\t| \"resource-center-card\"\r\n\t\t| \"case-studies-card\"\r\n\t\t| \"featured-horizontal-card\"\r\n\t\t| \"related-card\"\r\n\t\t| \"events-card\"",
           "resolved": "\"case-studies-card\" | \"clip-edge-card\" | \"custom-card\" | \"events-card\" | \"featured-horizontal-card\" | \"hightlight-card\" | \"horizontal-card\" | \"listing-card\" | \"listing-card-horizontal\" | \"lottie-card\" | \"related-card\" | \"resource-center-card\" | \"simple-card\"",
           "references": {}
         },
@@ -145,7 +192,7 @@ export class PtcCard {
         },
         "attribute": "card-type",
         "reflect": false,
-        "defaultValue": "'custom-card'"
+        "defaultValue": "\"custom-card\""
       },
       "cardHref": {
         "type": "string",
@@ -181,7 +228,7 @@ export class PtcCard {
         },
         "attribute": "target",
         "reflect": false,
-        "defaultValue": "'_self'"
+        "defaultValue": "\"_self\""
       },
       "rel": {
         "type": "string",
@@ -276,7 +323,7 @@ export class PtcCard {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'uppercase' | 'lowercase' | 'capitalize' | 'none'",
+          "original": "| \"uppercase\"\r\n\t\t| \"lowercase\"\r\n\t\t| \"capitalize\"\r\n\t\t| \"none\"",
           "resolved": "\"capitalize\" | \"lowercase\" | \"none\" | \"uppercase\"",
           "references": {}
         },
@@ -288,7 +335,7 @@ export class PtcCard {
         },
         "attribute": "heading-transform",
         "reflect": false,
-        "defaultValue": "'none'"
+        "defaultValue": "\"none\""
       },
       "cardDate": {
         "type": "string",
@@ -447,7 +494,7 @@ export class PtcCard {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'auto' | 'hidden' | 'visible' | 'inherit' | 'initial'",
+          "original": "| \"auto\"\r\n\t\t| \"hidden\"\r\n\t\t| \"visible\"\r\n\t\t| \"inherit\"\r\n\t\t| \"initial\"",
           "resolved": "\"auto\" | \"hidden\" | \"inherit\" | \"initial\" | \"visible\"",
           "references": {}
         },

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

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

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

@@ -1,4 +1,4 @@
-import { Host, h } from '@stencil/core';
+import { Host, h, } from "@stencil/core";
 export class PtcCardBottom {
   constructor() {
     this.cardType = undefined;
@@ -7,37 +7,43 @@ export class PtcCardBottom {
   hoverEventHandler() {
     this.hoverEvent.emit();
     //if statement: the card type that doesn't need a hover event
-    if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist') && !this.el.classList.contains('extra-tall')) {
-      this.el.previousElementSibling.classList.add('mouse-hover');
-      this.el.classList.add('mouse-hover-card-bottom');
+    if (!this.el.classList.contains("card-video") &&
+      !this.el.classList.contains("card-playlist") &&
+      !this.el.classList.contains("extra-tall")) {
+      this.el.previousElementSibling.classList.add("mouse-hover");
+      this.el.classList.add("mouse-hover-card-bottom");
     }
-    if (this.el.classList.contains('event-podcast')) {
+    if (this.el.classList.contains("event-podcast")) {
       this.addClassOnDefaultSlot();
     }
   }
   leaveEventHandler() {
     this.hoverEvent.emit();
     //if statement: the card type that doesn't need a hover event
-    if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist') && !this.el.classList.contains('extra-tall')) {
-      this.el.previousElementSibling.classList.remove('mouse-hover');
-      this.el.classList.remove('mouse-hover-card-bottom');
+    if (!this.el.classList.contains("card-video") &&
+      !this.el.classList.contains("card-playlist") &&
+      !this.el.classList.contains("extra-tall")) {
+      this.el.previousElementSibling.classList.remove("mouse-hover");
+      this.el.classList.remove("mouse-hover-card-bottom");
     }
-    if (this.el.classList.contains('event-podcast')) {
+    if (this.el.classList.contains("event-podcast")) {
       this.removeClassOnDefaultSlot();
     }
   }
   async addClassOnDefaultSlot() {
-    const slot = this.el.shadowRoot.querySelector('slot:not([name])');
+    const slot = this.el.shadowRoot.querySelector("slot:not([name])");
     const assignedElements = slot.assignedElements();
     assignedElements.forEach((ele) => {
-      !ele.classList.contains('event-podcast') && ele.classList.add('event-podcast');
+      !ele.classList.contains("event-podcast") &&
+        ele.classList.add("event-podcast");
     });
   }
   async removeClassOnDefaultSlot() {
-    const slot = this.el.shadowRoot.querySelector('slot:not([name])');
+    const slot = this.el.shadowRoot.querySelector("slot:not([name])");
     const assignedElements = slot.assignedElements();
     assignedElements.forEach((ele) => {
-      ele.classList.contains('event-podcast') && ele.classList.remove('event-podcast');
+      ele.classList.contains("event-podcast") &&
+        ele.classList.remove("event-podcast");
     });
   }
   render() {
@@ -67,7 +73,7 @@ export class PtcCardBottom {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'card-video' | 'card-tall' | 'card-2up' | 'card-wide' | 'card-playlist' | 'extra-tall' | 'color-outlined'| 'most-popular'| 'event-podcast'",
+          "original": "| \"card-video\"\r\n\t\t| \"card-tall\"\r\n\t\t| \"card-2up\"\r\n\t\t| \"card-wide\"\r\n\t\t| \"card-playlist\"\r\n\t\t| \"extra-tall\"\r\n\t\t| \"color-outlined\"\r\n\t\t| \"most-popular\"\r\n\t\t| \"event-podcast\"",
           "resolved": "\"card-2up\" | \"card-playlist\" | \"card-tall\" | \"card-video\" | \"card-wide\" | \"color-outlined\" | \"event-podcast\" | \"extra-tall\" | \"most-popular\"",
           "references": {}
         },

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

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

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

@@ -1,4 +1,4 @@
-import { Host, h } from '@stencil/core';
+import { Host, h, } from "@stencil/core";
 export class PtcCardContent {
   constructor() {
     this.cardType = undefined;
@@ -7,51 +7,61 @@ export class PtcCardContent {
     this.isLoading = false;
   }
   hoverEventHandler() {
-    if (!this.el.classList.contains('speed-bump') &&
-      !this.el.classList.contains('card-video-intro') &&
-      !this.el.classList.contains('card-dynamic') &&
-      !this.el.classList.contains('extra-tall')) {
+    if (!this.el.classList.contains("speed-bump") &&
+      !this.el.classList.contains("card-video-intro") &&
+      !this.el.classList.contains("card-dynamic") &&
+      !this.el.classList.contains("extra-tall")) {
       this.hoverEvent.emit();
-      this.el.classList.add('mouse-hover');
-      if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist') && this.el.nextElementSibling) {
-        this.el.nextElementSibling.classList.add('mouse-hover-card-bottom');
+      this.el.classList.add("mouse-hover");
+      if (!this.el.classList.contains("card-video") &&
+        !this.el.classList.contains("card-playlist") &&
+        this.el.nextElementSibling) {
+        this.el.nextElementSibling.classList.add("mouse-hover-card-bottom");
       }
     }
-    if (this.el.classList.contains('event-podcast')) {
-      const bottomComponent = this.el.nextElementSibling;
+    if (this.el.classList.contains("event-podcast")) {
+      const bottomComponent = this.el
+        .nextElementSibling;
       bottomComponent.addClassOnDefaultSlot();
     }
   }
   leaveEventHandler() {
-    if (!this.el.classList.contains('speed-bump') &&
-      !this.el.classList.contains('card-video-intro') &&
-      !this.el.classList.contains('card-dynamic') &&
-      !this.el.classList.contains('extra-tall')) {
+    if (!this.el.classList.contains("speed-bump") &&
+      !this.el.classList.contains("card-video-intro") &&
+      !this.el.classList.contains("card-dynamic") &&
+      !this.el.classList.contains("extra-tall")) {
       this.hoverEvent.emit();
-      this.el.classList.remove('mouse-hover');
-      if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist') && this.el.nextElementSibling) {
-        this.el.nextElementSibling.classList.remove('mouse-hover-card-bottom');
+      this.el.classList.remove("mouse-hover");
+      if (!this.el.classList.contains("card-video") &&
+        !this.el.classList.contains("card-playlist") &&
+        this.el.nextElementSibling) {
+        this.el.nextElementSibling.classList.remove("mouse-hover-card-bottom");
       }
     }
-    if (this.el.classList.contains('event-podcast')) {
-      const bottomComponent = this.el.nextElementSibling;
+    if (this.el.classList.contains("event-podcast")) {
+      const bottomComponent = this.el
+        .nextElementSibling;
       bottomComponent.removeClassOnDefaultSlot();
     }
   }
   async setHeight(height) {
-    this.el.style.height = height + 'px';
-    const image = this.el.querySelector('ptc-picture');
-    image.style.height = height + 'px';
+    this.el.style.height = height + "px";
+    const image = this.el.querySelector("ptc-picture");
+    image.style.height = height + "px";
   }
   async removeInlineHeight() {
-    this.el.style.removeProperty('height');
-    const image = this.el.querySelector('ptc-picture');
+    this.el.style.removeProperty("height");
+    const image = this.el.querySelector("ptc-picture");
     if (image)
-      image.style.removeProperty('height');
+      image.style.removeProperty("height");
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, Object.assign({ part: "card-content", class: classMap }, (!this.isLoading ? { onMouseEnter: this.hoverEventHandler.bind(this) } : {}), (!this.isLoading ? { onMouseLeave: this.leaveEventHandler.bind(this) } : {})), this.styles && h("style", null, this.styles), h("slot", { name: "slot-content" }), h("div", { class: "ptc-card-content-wrapper" }, h("slot", null))));
+    return (h(Host, Object.assign({ part: "card-content", class: classMap }, (!this.isLoading
+      ? { onMouseEnter: this.hoverEventHandler.bind(this) }
+      : {}), (!this.isLoading
+      ? { onMouseLeave: this.leaveEventHandler.bind(this) }
+      : {})), this.styles && h("style", null, this.styles), h("slot", { name: "slot-content" }), h("div", { class: "ptc-card-content-wrapper" }, h("slot", null))));
   }
   getCssClassMap() {
     return {
@@ -77,7 +87,7 @@ export class PtcCardContent {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "| 'card-video'\r\n    | 'card-tall'\r\n    | 'card-2up'\r\n    | 'card-wide'\r\n    | 'speed-bump'\r\n    | 'card-playlist'\r\n    | 'card-video-intro'\r\n    | 'card-dynamic'\r\n    | 'extra-tall'\r\n    | 'color-outlined'\r\n    | 'thumbnail-video-preview'\r\n    | 'event-jumbotron-sub-card'\r\n    | 'event-podcast'",
+          "original": "| \"card-video\"\r\n\t\t| \"card-tall\"\r\n\t\t| \"card-2up\"\r\n\t\t| \"card-wide\"\r\n\t\t| \"speed-bump\"\r\n\t\t| \"card-playlist\"\r\n\t\t| \"card-video-intro\"\r\n\t\t| \"card-dynamic\"\r\n\t\t| \"extra-tall\"\r\n\t\t| \"color-outlined\"\r\n\t\t| \"thumbnail-video-preview\"\r\n\t\t| \"event-jumbotron-sub-card\"\r\n\t\t| \"event-podcast\"",
           "resolved": "\"card-2up\" | \"card-dynamic\" | \"card-playlist\" | \"card-tall\" | \"card-video\" | \"card-video-intro\" | \"card-wide\" | \"color-outlined\" | \"event-jumbotron-sub-card\" | \"event-podcast\" | \"extra-tall\" | \"speed-bump\" | \"thumbnail-video-preview\"",
           "references": {}
         },
@@ -94,7 +104,7 @@ export class PtcCardContent {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'o-red' | 'o-orange' | 'o-blue' | 'o-slate-grey' | 'o-green'",
+          "original": "| \"o-red\"\r\n\t\t| \"o-orange\"\r\n\t\t| \"o-blue\"\r\n\t\t| \"o-slate-grey\"\r\n\t\t| \"o-green\"",
           "resolved": "\"o-blue\" | \"o-green\" | \"o-orange\" | \"o-red\" | \"o-slate-grey\"",
           "references": {}
         },

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

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -227,7 +231,7 @@ ptc-link, ptc-square-card,
 }
 :host(.result-box) {
   width: 505px;
-  border: 1px solid #6A6A6A;
+  border: 1px solid #6a6a6a;
   padding-top: 56px;
   padding-bottom: 56px;
   border-radius: var(--ptc-border-radius-large);