@ptcwebops/ptcw-design 6.3.37 → 6.3.38

package/dist/esm/ptc-container.entry.js

@@ -5,10 +5,10 @@ const ptcContainerCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-l
 const PtcContainer = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.backgroundColor = 'white';
-    this.elevation = 'small';
-    this.containerType = '';
-    this.spacing = 'xxx-large';
+    this.backgroundColor = "white";
+    this.elevation = "small";
+    this.containerType = "";
+    this.spacing = "xxx-large";
     this.styles = undefined;
   }
   render() {
@@ -17,21 +17,21 @@ const PtcContainer = class {
   }
   getContainerClass() {
     switch (this.containerType) {
-      case 'large':
-        return 'ptc-container-lg';
-      case 'none':
+      case "large":
+        return "ptc-container-lg";
+      case "none":
         return undefined;
       default:
-        return 'ptc-container';
+        return "ptc-container";
     }
   }
   getCssClassMap() {
     const spacing = `spacing-${this.spacing}`;
     return {
-      ['content-wrapper']: true,
+      ["content-wrapper"]: true,
       [this.backgroundColor]: true,
       [this.elevation]: true,
-      [spacing]: true
+      [spacing]: true,
     };
   }
 };

package/dist/esm/ptc-countdown.entry.js

@@ -17,14 +17,14 @@ dayjs_min.extend(utc);
 const PtcCountdown = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.countdownTitle = '';
-    this.eventTime = '';
-    this.eventTimeZone = 'EST';
-    this.expiredText = 'This event has started on';
-    this.daysText = 'days';
-    this.hoursText = 'hours';
-    this.minutesText = 'minutes';
-    this.secondsText = 'seconds';
+    this.countdownTitle = "";
+    this.eventTime = "";
+    this.eventTimeZone = "EST";
+    this.expiredText = "This event has started on";
+    this.daysText = "days";
+    this.hoursText = "hours";
+    this.minutesText = "minutes";
+    this.secondsText = "seconds";
     this.useHourFormat = true;
     this.timeLeft = {
       days: 0,
@@ -33,11 +33,11 @@ const PtcCountdown = class {
       seconds: 0,
     };
     this.isExpired = false;
-    this.displayLocale = 'en';
+    this.displayLocale = "en";
   }
   componentWillLoad() {
     if (!this.eventTime || !this.eventTimeZone) {
-      console.error('Both eventTime and eventTimeZone are required.');
+      console.error("Both eventTime and eventTimeZone are required.");
       return;
     }
     this.detectLocaleFromURL();
@@ -49,48 +49,48 @@ const PtcCountdown = class {
   // Map time zone abbreviations to their offset in minutes.
   getOffsetFromAbbr(abbr) {
     const tzMapping = {
-      'PST': -480,
-      'PDT': -420,
-      'MST': -420,
-      'MDT': -360,
-      'CST': -360,
-      'CDT': -300,
-      'UTC': 0,
-      'BST': 60,
-      'GST': 240,
-      'KST': 540,
-      'ACST': 570,
-      'ACDT': 630,
-      'EST': -300,
-      'EDT': -240,
-      'CET': 60,
-      'CEST': 120,
-      'IST': 330,
-      'CST_CN': 480,
-      'JST': 540,
+      PST: -480,
+      PDT: -420,
+      MST: -420,
+      MDT: -360,
+      CST: -360,
+      CDT: -300,
+      UTC: 0,
+      BST: 60,
+      GST: 240,
+      KST: 540,
+      ACST: 570,
+      ACDT: 630,
+      EST: -300,
+      EDT: -240,
+      CET: 60,
+      CEST: 120,
+      IST: 330,
+      CST_CN: 480,
+      JST: 540,
       //Above shows the existing timezones in SC
-      'ADT': -180,
-      'AEDT': 660,
-      'AEST': 600,
-      'AKDT': -480,
-      'AKST': -540,
-      'AST': -240,
-      'AWST': 480,
-      'EEST': 180,
-      'EET': 120,
-      'GMT': 0,
-      'HKT': 480,
+      ADT: -180,
+      AEDT: 660,
+      AEST: 600,
+      AKDT: -480,
+      AKST: -540,
+      AST: -240,
+      AWST: 480,
+      EEST: 180,
+      EET: 120,
+      GMT: 0,
+      HKT: 480,
     };
     return tzMapping[abbr] !== undefined ? tzMapping[abbr] : 0;
   }
   // Convert the provided date to ISO 8601 if needed.
   transformDate(contentDate) {
     // If contentDate includes a 'T', assume it’s ISO 8601.
-    if (contentDate.includes('T')) {
+    if (contentDate.includes("T")) {
       return contentDate;
     }
     // Otherwise, assume the original format "M/D/YYYY h:mm:ss A"
-    return dayjs_min(contentDate, 'M/D/YYYY h:mm:ss A').format('YYYY-MM-DDTHH:mm:ss');
+    return dayjs_min(contentDate, "M/D/YYYY h:mm:ss A").format("YYYY-MM-DDTHH:mm:ss");
   }
   calculateTimeLeft() {
     const offset = this.getOffsetFromAbbr(this.eventTimeZone);
@@ -125,29 +125,29 @@ const PtcCountdown = class {
   // }
   detectLocaleFromURL() {
     const url = window.location.href;
-    if (url.includes('/cn/')) {
-      this.displayLocale = 'zh-CN';
+    if (url.includes("/cn/")) {
+      this.displayLocale = "zh-CN";
     }
-    else if (url.includes('/tw/')) {
-      this.displayLocale = 'zh-TW';
+    else if (url.includes("/tw/")) {
+      this.displayLocale = "zh-TW";
     }
-    else if (url.includes('/fr/')) {
-      this.displayLocale = 'fr';
+    else if (url.includes("/fr/")) {
+      this.displayLocale = "fr";
     }
-    else if (url.includes('/de/')) {
-      this.displayLocale = 'de';
+    else if (url.includes("/de/")) {
+      this.displayLocale = "de";
     }
-    else if (url.includes('/it/')) {
-      this.displayLocale = 'it';
+    else if (url.includes("/it/")) {
+      this.displayLocale = "it";
     }
-    else if (url.includes('/ja/')) {
-      this.displayLocale = 'ja';
+    else if (url.includes("/ja/")) {
+      this.displayLocale = "ja";
     }
-    else if (url.includes('/ko/')) {
-      this.displayLocale = 'ko';
+    else if (url.includes("/ko/")) {
+      this.displayLocale = "ko";
     }
     else {
-      this.displayLocale = 'en';
+      this.displayLocale = "en";
     }
   }
   render() {
@@ -155,16 +155,16 @@ const PtcCountdown = class {
     // Format the event time in 24-hour ISO 8601 style, applying the eventTimeZone offset.
     const formattedEventTime = dayjs_min(this.transformDate(this.eventTime))
       .utcOffset(this.getOffsetFromAbbr(this.eventTimeZone), true)
-      .format('YYYY-MM-DD HH:mm');
+      .format("YYYY-MM-DD HH:mm");
     //const hour12 = this.shouldUse12HourFormat();
-    return (h("div", { class: "countdown-outer" }, this.countdownTitle && h("div", { class: "event-name" }, this.countdownTitle), !this.isExpired ? (h("div", { id: "CDOutput", class: "countdown" }, h("div", { class: "day" }, h("div", null, days), h("span", null, this.daysText)), h("div", { class: "hours" }, h("div", null, hours), h("span", null, this.hoursText)), h("div", { class: "minutes" }, h("div", null, minutes), h("span", null, this.minutesText)), h("div", { class: "seconds" }, h("div", null, seconds), h("span", null, this.secondsText)))) : (h("div", { class: "expired" }, `${this.expiredText} ${formattedEventTime} ${this.eventTimeZone}`)), h("div", { class: "cd-event-date" }, new Date(this.eventTime).toLocaleDateString(this.displayLocale, {
-      month: 'long',
-      day: 'numeric',
-      year: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit',
+    return (h("div", { class: "countdown-outer" }, this.countdownTitle && (h("div", { class: "event-name" }, this.countdownTitle)), !this.isExpired ? (h("div", { id: "CDOutput", class: "countdown" }, h("div", { class: "day" }, h("div", null, days), h("span", null, this.daysText)), h("div", { class: "hours" }, h("div", null, hours), h("span", null, this.hoursText)), h("div", { class: "minutes" }, h("div", null, minutes), h("span", null, this.minutesText)), h("div", { class: "seconds" }, h("div", null, seconds), h("span", null, this.secondsText)))) : (h("div", { class: "expired" }, `${this.expiredText} ${formattedEventTime} ${this.eventTimeZone}`)), h("div", { class: "cd-event-date" }, new Date(this.eventTime).toLocaleDateString(this.displayLocale, {
+      month: "long",
+      day: "numeric",
+      year: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
       hour12: this.useHourFormat,
-    }), ' ', "(", this.eventTimeZone, ")")));
+    }), " ", "(", this.eventTimeZone, ")")));
   }
 };
 PtcCountdown.style = ptcCountdownCss;

package/dist/esm/ptc-data-lookup.entry.js

@@ -537,11 +537,11 @@ const PtcDataLookup = class {
     this.elqRecipientIdLookupKey = undefined;
     this.elqContactLookupKey = undefined;
     this.elqSubscriptionLookupKey = undefined;
-    this.elqFieldEmailRecId = 'V_EmailRecipientID';
-    this.elqFieldContactEmail = 'C_EmailAddress';
-    this.elqFieldVisitorEmail = 'V_Email_Address';
-    this.elqFieldVisitorFirstname = 'C_FirstName';
-    this.elqFieldVisitorLastname = 'C_LastName';
+    this.elqFieldEmailRecId = "V_EmailRecipientID";
+    this.elqFieldContactEmail = "C_EmailAddress";
+    this.elqFieldVisitorEmail = "V_Email_Address";
+    this.elqFieldVisitorFirstname = "C_FirstName";
+    this.elqFieldVisitorLastname = "C_LastName";
     this.notmeLinkId = undefined;
     this.notmeFieldsClass = undefined;
     this.notmeMessage = undefined;
@@ -578,25 +578,61 @@ const PtcDataLookup = class {
     this.isInitialized = true;
   }
   populateBlindField() {
-    this.elqLib.add_field_mapping({ elementId: 'contact-phone', elqFieldName: 'C_BusPhone' });
-    this.elqLib.add_field_mapping({ elementId: 'contact-email', elqFieldName: 'C_EmailAddress' });
-    this.elqLib.add_field_mapping({ elementId: 'contact-firstname', elqFieldName: 'C_FirstName' });
-    this.elqLib.add_field_mapping({ elementId: 'contact-lastname', elqFieldName: 'C_LastName' });
-    this.elqLib.add_field_mapping({ elementId: 'contact-country', elqFieldName: 'C_Country' });
-    this.elqLib.add_field_mapping({ elementId: 'contact-phone', elqFieldName: 'C_BusPhone' });
-    this.elqLib.add_field_mapping({ elementId: 'company', elqFieldName: 'C_Company' });
-    this.elqLib.add_field_mapping({ elementId: 'contact-state', elqFieldName: 'C_State_Prov' });
-    this.elqLib.add_field_mapping({ elementId: 'contact-zipcode', elqFieldName: 'C_Zip_Postal' });
-    this.elqLib.add_field_mapping({ elementId: 'contact-job-category', elqFieldName: 'C_Job_Role1' });
-    this.elqLib.add_field_mapping({ elementId: 'contact-job-function', elqFieldName: 'C_Job_Function1' });
-    this.elqLib.add_field_mapping({ elementId: 'contact-jp-job-title', elqFieldName: 'C_Title' });
+    this.elqLib.add_field_mapping({
+      elementId: "contact-phone",
+      elqFieldName: "C_BusPhone",
+    });
+    this.elqLib.add_field_mapping({
+      elementId: "contact-email",
+      elqFieldName: "C_EmailAddress",
+    });
+    this.elqLib.add_field_mapping({
+      elementId: "contact-firstname",
+      elqFieldName: "C_FirstName",
+    });
+    this.elqLib.add_field_mapping({
+      elementId: "contact-lastname",
+      elqFieldName: "C_LastName",
+    });
+    this.elqLib.add_field_mapping({
+      elementId: "contact-country",
+      elqFieldName: "C_Country",
+    });
+    this.elqLib.add_field_mapping({
+      elementId: "contact-phone",
+      elqFieldName: "C_BusPhone",
+    });
+    this.elqLib.add_field_mapping({
+      elementId: "company",
+      elqFieldName: "C_Company",
+    });
+    this.elqLib.add_field_mapping({
+      elementId: "contact-state",
+      elqFieldName: "C_State_Prov",
+    });
+    this.elqLib.add_field_mapping({
+      elementId: "contact-zipcode",
+      elqFieldName: "C_Zip_Postal",
+    });
+    this.elqLib.add_field_mapping({
+      elementId: "contact-job-category",
+      elqFieldName: "C_Job_Role1",
+    });
+    this.elqLib.add_field_mapping({
+      elementId: "contact-job-function",
+      elqFieldName: "C_Job_Function1",
+    });
+    this.elqLib.add_field_mapping({
+      elementId: "contact-jp-job-title",
+      elqFieldName: "C_Title",
+    });
   }
   getCookie(name) {
     let cookieValue = null;
     if (document.cookie) {
-      const cookies = document.cookie.split(';');
+      const cookies = document.cookie.split(";");
       for (let cookie of cookies) {
-        const [key, value] = cookie.trim().split('=');
+        const [key, value] = cookie.trim().split("=");
         if (key === name) {
           cookieValue = decodeURIComponent(value);
           break;
@@ -606,22 +642,22 @@ const PtcDataLookup = class {
     return cookieValue;
   }
   init_notme() {
-    const topAdditional = document.getElementById('not-me-additional-top');
-    const bottomAdditional = document.getElementById('not-me-additional-bottom');
+    const topAdditional = document.getElementById("not-me-additional-top");
+    const bottomAdditional = document.getElementById("not-me-additional-bottom");
     if (topAdditional)
-      topAdditional.style.display = 'none';
+      topAdditional.style.display = "none";
     if (bottomAdditional)
-      bottomAdditional.style.display = 'none';
+      bottomAdditional.style.display = "none";
   }
   async performDataLookup() {
     if (this.isInitialized) {
-      this.elqLib.user_elq_email = this.getCookie('elq-uid');
+      this.elqLib.user_elq_email = this.getCookie("elq-uid");
       this.elqLib.find_eloqua_contact();
     }
   }
   async performSubscriptionLookup() {
     if (this.isInitialized) {
-      this.elqLib.user_elq_email = this.getCookie('elq-uid');
+      this.elqLib.user_elq_email = this.getCookie("elq-uid");
       this.elqLib.find_eloqua_subscription_info();
     }
   }

package/dist/esm/ptc-date.entry.js

@@ -8,11 +8,11 @@ const PtcDate = class {
     this.year = 1900;
     this.month = 0;
     this.day = 1;
-    this.country = 'en-US';
+    this.country = "en-US";
     this.dateString = undefined;
     this.dateColor = undefined;
     this.dateStyles = undefined;
-    this.dataSize = 'small';
+    this.dataSize = "small";
     this.formatOptions = undefined;
   }
   render() {
@@ -27,7 +27,7 @@ const PtcDate = class {
     };
   }
   getOptions() {
-    let result = { year: 'numeric', month: 'short', day: 'numeric' };
+    let result = { year: "numeric", month: "short", day: "numeric" };
     if (this.formatOptions) {
       try {
         var json = JSON.parse(this.formatOptions);
@@ -44,7 +44,7 @@ const PtcDate = class {
   }
   getDate() {
     if (this.dateString) {
-      let newDate = new Date(this.dateString.replace(/-/g, '/'));
+      let newDate = new Date(this.dateString.replace(/-/g, "/"));
       return newDate;
     }
     else {

package/dist/esm/ptc-dropdown.entry.js

@@ -7,7 +7,7 @@ const PtcDropdown = class {
     registerInstance(this, hostRef);
     this.clickedItem = createEvent(this, "clickedItem", 7);
     this.handleClick = (item) => {
-      this.listItems.forEach((item) => item.selected = undefined);
+      this.listItems.forEach((item) => (item.selected = undefined));
       item.selected = true;
       this.selectedItem = item;
       this.toggle = !this.toggle;
@@ -16,7 +16,7 @@ const PtcDropdown = class {
     this.toggleList = () => {
       this.toggle = !this.toggle;
     };
-    this.theme = 'sort';
+    this.theme = "sort";
     this.label = undefined;
     this.listItems = undefined;
     this.toggle = false;
@@ -29,20 +29,20 @@ const PtcDropdown = class {
     }
   }
   componentWillLoad() {
-    let items = this.host.querySelectorAll('item');
+    let items = this.host.querySelectorAll("item");
     if (!this.listItems) {
       this.listItems = [];
     }
-    items.forEach(item => {
-      if (item && item.getAttribute('label')) {
+    items.forEach((item) => {
+      if (item && item.getAttribute("label")) {
         let listItem = {
           element: item,
-          label: item.getAttribute('label'),
-          value: item.getAttribute('value'),
-          selected: item.hasAttribute('selected')
+          label: item.getAttribute("label"),
+          value: item.getAttribute("value"),
+          selected: item.hasAttribute("selected"),
         };
         this.listItems.push(listItem);
-        if (item.hasAttribute('selected')) {
+        if (item.hasAttribute("selected")) {
           this.selectedItem = listItem;
         }
       }
@@ -50,19 +50,22 @@ const PtcDropdown = class {
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h("div", { class: classMap }, h("header", { id: this.trackerId, class: "dropdown__header mf-listen", onClick: this.toggleList, tabindex: "0", onKeyPress: this.toggleList }, h("label", null, h("b", null, this.label), " ", this.selectedItem ? this.selectedItem.label : "Select Option"), h("icon-asset", { type: "solid", size: "x-small", name: "chevron-down" })), this.toggle &&
-      h("ul", { id: this.trackerId + `ul`, tabIndex: -1, class: "dropdown__list mf-listen", onBlur: () => { this.toggle = false; } }, this.listItems.map((item) => {
-        let cssClass = "dropdown__item mf-listen";
-        if (item.selected) {
-          cssClass += " selected";
-        }
-        return (h("li", { class: cssClass, id: item.label + this.trackerId, onClick: () => this.handleClick(item), tabindex: "0", onKeyPress: () => this.handleClick(item) }, item.label));
-      }))));
+    return (h("div", { class: classMap }, h("header", { id: this.trackerId, class: "dropdown__header mf-listen", onClick: this.toggleList, tabindex: "0", onKeyPress: this.toggleList }, h("label", null, h("b", null, this.label), " ", this.selectedItem
+      ? this.selectedItem.label
+      : "Select Option"), h("icon-asset", { type: "solid", size: "x-small", name: "chevron-down" })), this.toggle && (h("ul", { id: this.trackerId + `ul`, tabIndex: -1, class: "dropdown__list mf-listen", onBlur: () => {
+        this.toggle = false;
+      } }, this.listItems.map((item) => {
+      let cssClass = "dropdown__item mf-listen";
+      if (item.selected) {
+        cssClass += " selected";
+      }
+      return (h("li", { class: cssClass, id: item.label + this.trackerId, onClick: () => this.handleClick(item), tabindex: "0", onKeyPress: () => this.handleClick(item) }, item.label));
+    })))));
   }
   getCssClassMap() {
     return {
-      ['ptc-dropdown']: true,
-      [this.theme]: true
+      ["ptc-dropdown"]: true,
+      [this.theme]: true,
     };
   }
   get host() { return getElement(this); }

package/dist/esm/ptc-dynamic-card.entry.js

@@ -21,18 +21,18 @@ const PtcDynamicCard = class {
      */
     this.handleKeyDown = (event) => {
       switch (event.key) {
-        case 'Enter':
+        case "Enter":
           //event.preventDefault();
           this.openCard();
           break;
       }
     };
-    this.dotSvg = getAssetPath('./media/nav-active-dotslick.svg');
-    this.cardType = 'sequential';
-    this.cardTitle = 'Card Title Goes Here';
+    this.dotSvg = getAssetPath("./media/nav-active-dotslick.svg");
+    this.cardType = "sequential";
+    this.cardTitle = "Card Title Goes Here";
     this.cardImgSrc = undefined;
     this.cardImgAlt = undefined;
-    this.cardScreen = 'desktop';
+    this.cardScreen = "desktop";
     this.isExpanded = false;
     this.overlayExists = true;
     this.styles = undefined;
@@ -40,8 +40,8 @@ const PtcDynamicCard = class {
   }
   componentDidLoad() {
     // Handle mouse enter and leave for overlay
-    this.el.addEventListener('mouseenter', () => (this.overlayExists = false));
-    this.el.addEventListener('mouseleave', () => (this.overlayExists = true));
+    this.el.addEventListener("mouseenter", () => (this.overlayExists = false));
+    this.el.addEventListener("mouseleave", () => (this.overlayExists = true));
   }
   /**
    * Listen for 'cardOpened' events on the document to close other cards
@@ -56,7 +56,7 @@ const PtcDynamicCard = class {
    * Focus the card-wrapper element
    */
   async focusCardWrapper() {
-    const cardWrapper = this.el.querySelector('.card-wrapper');
+    const cardWrapper = this.el.querySelector(".card-wrapper");
     if (cardWrapper) {
       cardWrapper.focus();
     }
@@ -122,7 +122,12 @@ const PtcDynamicCard = class {
   // }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: "card-wrapper mf-listen", role: "button", tabindex: "0", "aria-expanded": this.isExpanded, onClick: this.openCard, onKeyDown: this.handleKeyDown }, this.cardScreen === 'mobile' ? (h("div", { class: "card card-mobile mf-listen", id: this.trackerId }, h("ptc-picture", { height: "287", "is-full-width": true, alt: this.cardImgAlt, src: this.cardImgSrc }), h("ptc-card-content", { "card-type": "card-dynamic", styles: ":host(.card-dynamic){height: auto;}" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))))) : (h("div", null, h("div", Object.assign({}, !this.isExpanded && { hidden: 'until-found' }, { onBeforeMatch: this.openCard.bind(this), class: `card mf-listen ${this.isExpanded && 'card-dt-open'}`, id: this.trackerId }), h("ptc-card-content", { "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))), h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "is-full-width": "true", "is-full-height": "true", "image-alignment": "center" })), h("div", { class: `card card-dt-closed mf-listen ${this.isExpanded ? 'hide' : 'show'}`, id: this.trackerId }, h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "image-position": "relative", "is-full-width": true, height: "424" }, this.overlayExists ? (h("ptc-overlay", { "filter-color": "solid-black-1" })) : (h("ptc-overlay", { "filter-color": "solid-black-2" }))), h("div", { class: "closed-content", "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h2", null, this.cardTitle))))))), this.cardScreen === 'desktop' && (h("div", { hidden: true }, h("svg", null, h("use", { href: `${this.dotSvg}` }))))));
+    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: "card-wrapper mf-listen", role: "button", tabindex: "0", "aria-expanded": this.isExpanded, onClick: this.openCard, onKeyDown: this.handleKeyDown }, this.cardScreen === "mobile" ? (h("div", { class: "card card-mobile mf-listen", id: this.trackerId }, h("ptc-picture", { height: "287", "is-full-width": true, alt: this.cardImgAlt, src: this.cardImgSrc }), h("ptc-card-content", { "card-type": "card-dynamic", styles: ":host(.card-dynamic){height: auto;}" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))))) : (h("div", null, h("div", Object.assign({}, (!this.isExpanded && {
+      hidden: "until-found",
+    }), {
+      /* @ts-ignore */
+      onBeforeMatch: this.openCard.bind(this), class: `card mf-listen ${this.isExpanded && "card-dt-open"}`, id: this.trackerId
+    }), h("ptc-card-content", { "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))), h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "is-full-width": "true", "is-full-height": "true", "image-alignment": "center" })), h("div", { class: `card card-dt-closed mf-listen ${this.isExpanded ? "hide" : "show"}`, id: this.trackerId }, h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "image-position": "relative", "is-full-width": true, height: "424" }, this.overlayExists ? (h("ptc-overlay", { "filter-color": "solid-black-1" })) : (h("ptc-overlay", { "filter-color": "solid-black-2" }))), h("div", { class: "closed-content", "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h2", null, this.cardTitle))))))), this.cardScreen === "desktop" && (h("div", { hidden: true }, h("svg", null, h("use", { href: `${this.dotSvg}` }))))));
   }
   static get assetsDirs() { return ["media"]; }
   get el() { return getElement(this); }