@ptcwebops/ptcw-design 6.3.38 → 6.3.40-beta

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

@@ -1,16 +1,16 @@
-import { h, Host, } from "@stencil/core";
-import { getSeoTagType, CheckDarkFocusState } from "../../utils/utils";
+import { h, Host } from '@stencil/core';
+import { getSeoTagType, CheckDarkFocusState } from '../../utils/utils';
 export class PtcButton {
   constructor() {
     this.disabled = false;
     this.active = false;
-    this.type = "button";
-    this.color = "ptc-primary";
-    this.iconAnimation = "";
-    this.iconPosition = "icon-right";
+    this.type = 'button';
+    this.color = 'ptc-primary';
+    this.iconAnimation = '';
+    this.iconPosition = 'icon-right';
     this.linkHref = undefined;
     this.linkTitle = undefined;
-    this.target = "_self";
+    this.target = '_self';
     this.rel = undefined;
     this.tabNav = 0;
     this.styles = undefined;
@@ -18,12 +18,11 @@ export class PtcButton {
     this.enableAccessibilityAltStyle = false;
     this.size = undefined;
     this.buttonTitle = undefined;
-    this.ariaLabel = "";
+    this.ariaLabel = '';
     this.seoCompatibilityMode = false;
     this.maintainContent = false;
     this.trackerId = undefined;
     this.darkFocusState = false;
-    this.ctaWidth = "default";
   }
   clickEventHandler() {
     this.clickEvent.emit();
@@ -33,51 +32,23 @@ export class PtcButton {
   }
   seoCompRender() {
     const classMap = this.getCssClassMap();
-    const Tag = !!this.linkHref ? "a" : "button";
+    const Tag = !!this.linkHref ? 'a' : 'button';
     const [TagType, firstChild] = getSeoTagType(this.el, Tag);
     const html = firstChild && firstChild.innerHTML;
     if (this.el == firstChild) {
-      this.el.innerHTML = "";
+      this.el.innerHTML = '';
     }
     if (this.maintainContent) {
       this.el.innerHTML = html;
     }
-    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", Object.assign({ id: this.trackerId, class: "tracker-div mf-listen" }, (this.ctaWidth === "full-width"
-      ? { style: { display: "block" } }
-      : {})), h(TagType, Object.assign({ class: classMap, onClick: this.clickEventHandler.bind(this) }, (!!this.linkHref ? { href: this.linkHref } : {}), (!this.linkHref ? { type: this.type } : {}), (!!this.target && !!this.linkHref
-      ? { target: this.target }
-      : {}), (!!this.rel && !!this.linkHref
-      ? { rel: this.rel }
-      : {}), (!!this.linkHref
-      ? {
-        title: this.linkTitle
-          ? this.linkTitle
-          : this.linkHref,
-      }
-      : {}), (!!this.tabNav
-      ? { tabindex: -1 }
-      : { tabindex: 0 }), { title: this.buttonTitle }, (this.ariaLabel !== ""
-      ? { ariaLabel: this.ariaLabel }
-      : {})), h("span", { innerHTML: html, class: "cta-content-wrap" }, h("slot", { name: "slot-before-text" }), h("slot", { name: "slot-after-text" }))))));
+    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { id: this.trackerId, class: "tracker-div mf-listen" }, h(TagType, Object.assign({ class: classMap, onClick: this.clickEventHandler.bind(this) }, (!!this.linkHref ? { href: this.linkHref } : {}), (!this.linkHref ? { type: this.type } : {}), (!!this.target && !!this.linkHref ? { target: this.target } : {}), (!!this.rel && !!this.linkHref ? { rel: this.rel } : {}), (!!this.linkHref ? { title: this.linkTitle ? this.linkTitle : this.linkHref } : {}), (!!this.tabNav ? { tabindex: -1 } : { tabindex: 0 }), { title: this.buttonTitle }, (this.ariaLabel !== '' ? { ariaLabel: this.ariaLabel } : {})), h("span", { innerHTML: html }, h("slot", { name: "slot-before-text" }), h("slot", { name: "slot-after-text" }))))));
   }
   standardRender() {
     const classMap = this.getCssClassMap();
-    const Tag = !!this.linkHref ? "a" : "button";
-    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { id: this.trackerId, class: "tracker-div mf-listen" }, h(Tag, Object.assign({ class: classMap, onClick: this.clickEventHandler.bind(this) }, (!!this.linkHref ? { href: this.linkHref } : {}), (!this.linkHref ? { type: this.type } : {}), (!!this.target && !!this.linkHref
-      ? { target: this.target }
-      : {}), (!!this.rel && !!this.linkHref
-      ? { rel: this.rel }
-      : {}), (!!this.linkHref
-      ? {
-        title: this.linkTitle
-          ? this.linkTitle
-          : this.linkHref,
-      }
-      : {}), (!!this.tabNav
-      ? { tabindex: -1 }
-      : { tabindex: 0 }), { title: this.buttonTitle }, (this.ariaLabel !== ""
-      ? { ariaLabel: this.ariaLabel }
-      : {})), this.iconAnimation == "reveal-down" ? (h("span", null, h("div", { class: "content" }, h("slot", null)), h("div", { class: "icon-wrapper" }, h("div", { class: "icon" }, h("slot", { name: "slot-after-text" }))))) : (h("span", null, h("slot", { name: "slot-before-text" }), h("slot", null), h("slot", { name: "slot-after-text" })))))));
+    const Tag = !!this.linkHref ? 'a' : 'button';
+    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { id: this.trackerId, class: "tracker-div mf-listen" }, h(Tag, Object.assign({ class: classMap, onClick: this.clickEventHandler.bind(this) }, (!!this.linkHref ? { href: this.linkHref } : {}), (!this.linkHref ? { type: this.type } : {}), (!!this.target && !!this.linkHref ? { target: this.target } : {}), (!!this.rel && !!this.linkHref ? { rel: this.rel } : {}), (!!this.linkHref ? { title: this.linkTitle ? this.linkTitle : this.linkHref } : {}), (!!this.tabNav ? { tabindex: -1 } : { tabindex: 0 }), { title: this.buttonTitle }, (this.ariaLabel !== '' ? { ariaLabel: this.ariaLabel } : {})), this.iconAnimation == 'reveal-down' ?
+      h("span", null, h("div", { class: "content" }, h("slot", null)), h("div", { class: "icon-wrapper" }, h("div", { class: "icon" }, h("slot", { name: "slot-after-text" })))) :
+      h("span", null, h("slot", { name: "slot-before-text" }), h("slot", null), h("slot", { name: "slot-after-text" }))))));
   }
   render() {
     if (this.seoCompatibilityMode) {
@@ -92,13 +63,12 @@ export class PtcButton {
       [this.color]: true,
       [this.iconAnimation]: true,
       [this.iconPosition]: true,
-      ["disabled"]: this.disabled ? true : false,
-      ["active"]: this.active ? true : false,
+      ['disabled']: this.disabled ? true : false,
+      ['active']: this.active ? true : false,
       [this.textAlign]: true,
       [this.size]: true,
-      ["acc-alt-style"]: this.enableAccessibilityAltStyle,
-      ["focus-state-dark-background"]: this.darkFocusState,
-      [this.ctaWidth]: true,
+      ['acc-alt-style']: this.enableAccessibilityAltStyle,
+      ['focus-state-dark-background']: this.darkFocusState
     };
   }
   static get is() { return "ptc-button"; }
@@ -155,7 +125,7 @@ export class PtcButton {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"button\" | \"reset\" | \"submit\" | \"link\"",
+          "original": "'button' | 'reset' | 'submit' | 'link'",
           "resolved": "\"button\" | \"link\" | \"reset\" | \"submit\"",
           "references": {}
         },
@@ -167,14 +137,14 @@ export class PtcButton {
         },
         "attribute": "type",
         "reflect": false,
-        "defaultValue": "\"button\""
+        "defaultValue": "'button'"
       },
       "color": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "| \"offwhite\"\r\n\t\t| \"blackgrey\"\r\n\t\t| \"turtlegreen\"\r\n\t\t| \"nav\"\r\n\t\t| \"legacy-green\"\r\n\t\t| \"ptc-primary\"\r\n\t\t| \"ptc-secondary\"\r\n\t\t| \"ptc-tertiary\"\r\n\t\t| \"ptc-quaternary\"\r\n\t\t| \"icon-toggle\"\r\n\t\t| \"clear-search\"\r\n\t\t| \"primary-cta\"\r\n\t\t| \"secondary-cta-dark\"\r\n\t\t| \"secondary-cta-light\"",
-          "resolved": "\"blackgrey\" | \"clear-search\" | \"icon-toggle\" | \"legacy-green\" | \"nav\" | \"offwhite\" | \"primary-cta\" | \"ptc-primary\" | \"ptc-quaternary\" | \"ptc-secondary\" | \"ptc-tertiary\" | \"secondary-cta-dark\" | \"secondary-cta-light\" | \"turtlegreen\"",
+          "original": "'offwhite' | 'blackgrey' | 'turtlegreen' | 'nav' | 'legacy-green' | 'ptc-primary' | 'ptc-secondary' | 'ptc-tertiary' | 'ptc-quaternary' | 'icon-toggle' | 'clear-search'",
+          "resolved": "\"blackgrey\" | \"clear-search\" | \"icon-toggle\" | \"legacy-green\" | \"nav\" | \"offwhite\" | \"ptc-primary\" | \"ptc-quaternary\" | \"ptc-secondary\" | \"ptc-tertiary\" | \"turtlegreen\"",
           "references": {}
         },
         "required": false,
@@ -185,13 +155,13 @@ export class PtcButton {
         },
         "attribute": "color",
         "reflect": false,
-        "defaultValue": "\"ptc-primary\""
+        "defaultValue": "'ptc-primary'"
       },
       "iconAnimation": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "| \"animation-right\"\r\n\t\t| \"animation-down\"\r\n\t\t| \"reveal-down\"\r\n\t\t| \"\"",
+          "original": "'animation-right' | 'animation-down' | 'reveal-down' | ''",
           "resolved": "\"\" | \"animation-down\" | \"animation-right\" | \"reveal-down\"",
           "references": {}
         },
@@ -203,13 +173,13 @@ export class PtcButton {
         },
         "attribute": "icon-animation",
         "reflect": false,
-        "defaultValue": "\"\""
+        "defaultValue": "''"
       },
       "iconPosition": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"icon-left\" | \"icon-right\" | \"none\"",
+          "original": "'icon-left' | 'icon-right' | 'none'",
           "resolved": "\"icon-left\" | \"icon-right\" | \"none\"",
           "references": {}
         },
@@ -221,7 +191,7 @@ export class PtcButton {
         },
         "attribute": "icon-position",
         "reflect": false,
-        "defaultValue": "\"icon-right\""
+        "defaultValue": "'icon-right'"
       },
       "linkHref": {
         "type": "string",
@@ -275,7 +245,7 @@ export class PtcButton {
         },
         "attribute": "target",
         "reflect": false,
-        "defaultValue": "\"_self\""
+        "defaultValue": "'_self'"
       },
       "rel": {
         "type": "string",
@@ -334,7 +304,7 @@ export class PtcButton {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"left\" | \"right\" | \"center\"",
+          "original": "'left' | 'right' | 'center'",
           "resolved": "\"center\" | \"left\" | \"right\"",
           "references": {}
         },
@@ -369,7 +339,7 @@ export class PtcButton {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"small\" | \"medium\" | \"large\"",
+          "original": "'small' | 'medium' | 'large'",
           "resolved": "\"large\" | \"medium\" | \"small\"",
           "references": {}
         },
@@ -415,7 +385,7 @@ export class PtcButton {
         },
         "attribute": "aria-label",
         "reflect": false,
-        "defaultValue": "\"\""
+        "defaultValue": "''"
       },
       "seoCompatibilityMode": {
         "type": "boolean",
@@ -487,24 +457,6 @@ export class PtcButton {
         "attribute": "dark-focus-state",
         "reflect": false,
         "defaultValue": "false"
-      },
-      "ctaWidth": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"full-width\" | \"default\"",
-          "resolved": "\"default\" | \"full-width\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "cta-width",
-        "reflect": false,
-        "defaultValue": "\"default\""
       }
     };
   }

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

@@ -9,10 +9,8 @@ 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;
@@ -31,10 +29,8 @@ 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 */
@@ -1529,9 +1525,7 @@ ptc-footer {
   margin-bottom: 12px;
   margin-top: 0px;
 }
-:host(.events-card) .card-layout .card-body .events-date,
-:host(.events-card) .card-layout .card-body .events-type-class,
-:host(.events-card) .card-layout .card-body .language {
+:host(.events-card) .card-layout .card-body .events-date, :host(.events-card) .card-layout .card-body .events-type-class, :host(.events-card) .card-layout .card-body .language {
   display: flex;
   flex-direction: row;
   align-items: center;

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;
@@ -24,12 +24,11 @@ export class PtcCard {
     this.trackerId = "";
     this.isTabHidden = false;
     this.language = "";
-    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 +44,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,92 +61,45 @@ 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.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 } : {}), (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;
@@ -157,7 +109,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;
@@ -180,7 +132,7 @@ export class PtcCard {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "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\"",
+          "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'",
           "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": {}
         },
@@ -192,7 +144,7 @@ export class PtcCard {
         },
         "attribute": "card-type",
         "reflect": false,
-        "defaultValue": "\"custom-card\""
+        "defaultValue": "'custom-card'"
       },
       "cardHref": {
         "type": "string",
@@ -228,7 +180,7 @@ export class PtcCard {
         },
         "attribute": "target",
         "reflect": false,
-        "defaultValue": "\"_self\""
+        "defaultValue": "'_self'"
       },
       "rel": {
         "type": "string",
@@ -323,7 +275,7 @@ export class PtcCard {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "| \"uppercase\"\r\n\t\t| \"lowercase\"\r\n\t\t| \"capitalize\"\r\n\t\t| \"none\"",
+          "original": "'uppercase' | 'lowercase' | 'capitalize' | 'none'",
           "resolved": "\"capitalize\" | \"lowercase\" | \"none\" | \"uppercase\"",
           "references": {}
         },
@@ -335,7 +287,7 @@ export class PtcCard {
         },
         "attribute": "heading-transform",
         "reflect": false,
-        "defaultValue": "\"none\""
+        "defaultValue": "'none'"
       },
       "cardDate": {
         "type": "string",
@@ -494,7 +446,7 @@ export class PtcCard {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "| \"auto\"\r\n\t\t| \"hidden\"\r\n\t\t| \"visible\"\r\n\t\t| \"inherit\"\r\n\t\t| \"initial\"",
+          "original": "'auto' | 'hidden' | 'visible' | 'inherit' | 'initial'",
           "resolved": "\"auto\" | \"hidden\" | \"inherit\" | \"initial\" | \"visible\"",
           "references": {}
         },
@@ -578,24 +530,6 @@ export class PtcCard {
         "attribute": "language",
         "reflect": false,
         "defaultValue": "\"\""
-      },
-      "cardTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "card-title",
-        "reflect": false,
-        "defaultValue": "\"\""
       }
     };
   }

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

@@ -9,10 +9,8 @@ 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;
@@ -31,10 +29,8 @@ 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 */