@salesforcedevs/dx-components 1.3.322 → 1.3.323

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.322",
+    "version": "1.3.323",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -45,6 +45,5 @@
     },
     "volta": {
         "node": "16.19.1"
-    },
-    "gitHead": "489fc5c1b1cc01080269de7a82f462e12fca8966"
+    }
 }

package/src/modules/dx/agenda/agenda.html

@@ -1,6 +1,6 @@
 <template>
     <div class="container">
-        <h2 class="detail-list-title dx-text-display-4">{title}</h2>
+        <h2 class="detail-list-title dx-text-display-4">{header}</h2>
         <div class="detail-list-content-container">
             <ul class="detail-list-content" part="content">
                 <template for:each={items} for:item="item">

package/src/modules/dx/agenda/agenda.ts

@@ -10,7 +10,7 @@ export interface AgendaItem {
 }
 
 export default class Agenda extends LightningElement {
-    @api title: string = "Agenda";
+    @api header: string = "Agenda";
     @api flourish?: string;
     @api flourishAlt?: string;
 

package/src/modules/dx/breadcrumbs/breadcrumbs.html

@@ -1,7 +1,7 @@
 <template>
     <nav class={className} role="navigation" aria-label={ariaLabel}>
         <template if:true={logo}>
-            <dx-logo href={baseHref} label={title}></dx-logo>
+            <dx-logo href={baseHref} label={header}></dx-logo>
             <span if:false={breadcrumbsEmpty}>/</span>
         </template>
         <dx-dropdown

package/src/modules/dx/breadcrumbs/breadcrumbs.ts

@@ -21,7 +21,7 @@ export default class Breadcrumbs extends LightningElement {
     @api baseHref: string = "/";
     @api navItems: OptionWithNested[] = [];
     @api pathname: string = window.location.pathname;
-    @api title: string = "Salesforce";
+    @api header: string = "Salesforce";
     @api logo: boolean = false;
     @api truncate = false;
     @api hideCurrentLocation = false;
@@ -85,16 +85,14 @@ export default class Breadcrumbs extends LightningElement {
         breadcrumbs: Breadcrumb[]
     ): NormalizedBreadcrumb[] {
         const { length } = breadcrumbs;
-        return breadcrumbs.map(
-            (breadcrumb, i): NormalizedBreadcrumb => {
-                const last = i === length - 1;
-                return {
-                    ...breadcrumb,
-                    asLink: this.hideCurrentLocation || !last,
-                    last
-                };
-            }
-        );
+        return breadcrumbs.map((breadcrumb, i): NormalizedBreadcrumb => {
+            const last = i === length - 1;
+            return {
+                ...breadcrumb,
+                asLink: this.hideCurrentLocation || !last,
+                last
+            };
+        });
     }
 
     private get breadcrumbDropdownOptions() {

package/src/modules/dx/cardBlogPost/cardBlogPost.html

@@ -9,7 +9,7 @@
         img-src={imgSrc}
         label={label}
         target={target}
-        title={title}
+        header={header}
         content-type="blogs"
     >
         <dx-formatted-date-time

package/src/modules/dx/cardBlogPost/cardBlogPost.ts

@@ -11,7 +11,7 @@ export default class CardBlogPost extends LightningElement {
     @api imgSrc?: string | null;
     @api label?: string;
     @api target?: string | null = null;
-    @api title!: string;
+    @api header!: string;
     @api authors?: Array<any> | null = null;
     @api origin?: string = "wordpress";
     @api clickEvent?: () => void;
@@ -28,9 +28,9 @@ export default class CardBlogPost extends LightningElement {
         }
 
         const payload = {
-            click_text: this.title,
+            click_text: this.header,
             click_url: `${window.location.origin}${this.href}`,
-            element_title: this.title,
+            element_title: this.header,
             element_type: "card",
             content_category: "link",
             recommendation_type: this.origin
@@ -38,7 +38,7 @@ export default class CardBlogPost extends LightningElement {
         track(event.target!, "custEv_blogCardClick", {
             ...payload,
             blog_author: this.authors,
-            blog_title: this.title
+            blog_title: this.header
         });
         track(event.target!, "custEv_linkClick", payload);
     }

package/src/modules/dx/cardCallout/cardCallout.html

@@ -6,7 +6,7 @@
         style={style}
         onclick={sendGtm}
     >
-        <h3 class="dx-text-display-4">{title}</h3>
+        <h3 class="dx-text-display-4">{header}</h3>
         <span class="dx-text-button-light">
             {label}
             <dx-icon symbol="forward"></dx-icon>

package/src/modules/dx/cardCallout/cardCallout.ts

@@ -11,7 +11,7 @@ export default class CardCallout extends LightningElement {
     @api href!: string;
     @api label: string = "";
     @api target?: string;
-    @api title!: string;
+    @api header!: string;
 
     private get style(): string {
         const background = `background-color: ${toDxColor(
@@ -31,9 +31,9 @@ export default class CardCallout extends LightningElement {
 
     private sendGtm(e: PointerEvent) {
         track(e.currentTarget!, "custEv_ctaLinkClick", {
-            click_text: this.title,
+            click_text: this.header,
             click_url: `${window.location.origin}${this.href}`,
-            element_title: this.title,
+            element_title: this.header,
             element_type: "link",
             content_category: "cta"
         });

package/src/modules/dx/cardClickthrough/cardClickthrough.html

@@ -12,7 +12,7 @@
                     {label}
                 </span>
                 <dx-card-title
-                    title={title}
+                    header={header}
                     target={target}
                     onclick={handleLinkClick}
                 ></dx-card-title>

package/src/modules/dx/cardClickthrough/cardClickthrough.ts

@@ -40,7 +40,7 @@ export default class CardClickthrough<
     @api imgAlt?: string = "";
     @api imgSrc?: string | null = null;
     @api label!: string;
-    @api title!: string;
+    @api header!: string;
     @api target?: string | null = null;
     @api showMobileImg?: boolean = false;
 
@@ -127,8 +127,8 @@ export default class CardClickthrough<
             return;
         }
         const payloadCardInfo = {
-            click_text: this.title,
-            element_title: this.title,
+            click_text: this.header,
+            element_title: this.header,
             click_url: this.href,
             element_type: "link",
             content_category: "cta"

package/src/modules/dx/cardContent/cardContent.html

@@ -34,7 +34,7 @@
                 onclick={handleClick}
                 onmouseenter={setLinkHovered}
                 onmouseleave={setLinkInactive}
-                title={title}
+                header={header}
             ></dx-card-title>
             <span
                 class="subtitle dx-text-label-1-dark"

package/src/modules/dx/cardContent/cardContent.ts

@@ -17,7 +17,7 @@ export default class CardContent extends LightningElement {
     @api layout: "vertical" | "horizontal" = "vertical";
     @api subtitle?: string | null = null;
     @api target?: string | null = null;
-    @api title!: string;
+    @api header!: string;
     @api hrefClick: any = null;
     @api contentType: string | null = null;
     @api
@@ -56,7 +56,7 @@ export default class CardContent extends LightningElement {
     }
 
     private get imgLinkAriaLabel() {
-        return `Read More About ${this.title}`;
+        return `Read More About ${this.header}`;
     }
 
     private get className(): string {

package/src/modules/dx/cardDemo/cardDemo.html

@@ -7,6 +7,6 @@
         img-src={imgSrc}
         label="Demo"
         target={target}
-        title={title}
+        header={header}
     ></dx-card-content>
 </template>

package/src/modules/dx/cardDemo/cardDemo.ts

@@ -7,5 +7,5 @@ export default class CardDemo extends LightningElement {
     @api imgAlt?: string;
     @api imgSrc?: string | null;
     @api target?: string | null = null;
-    @api title!: string;
+    @api header!: string;
 }

package/src/modules/dx/cardDocs/cardDocs.html

@@ -11,11 +11,17 @@
         >
             <span class="dx-text-label-3" part="label">{label}</span>
             <dx-card-title
-                title={title}
+                header={header}
                 target={target}
                 onclick={handleLinkClick}
             ></dx-card-title>
-            <span lwc:if={body} class="dx-text-body-2" onclick={handleTextClick}>{body}</span>
+            <span
+                lwc:if={body}
+                class="dx-text-body-2"
+                onclick={handleTextClick}
+            >
+                {body}
+            </span>
         </div>
         <div class="dx-card-base_section-vertical dx-card-base_ctas">
             <slot onslotchange={onSlotChange}></slot>

package/src/modules/dx/cardDocs/cardDocs.ts

@@ -10,7 +10,7 @@ export default class CardDocs extends LightningElement {
     @api imgAlt?: string = "";
     @api imgSrc?: string | null = null;
     @api label!: string;
-    @api title!: string;
+    @api header!: string;
     @api target?: string | null = null;
     @api showMobileImg?: boolean = false;
 
@@ -37,13 +37,13 @@ export default class CardDocs extends LightningElement {
             slotElement?.addEventListener("click", (event: Event) => {
                 track(event.currentTarget!, "custEv_cardClick", {
                     ...payloadInnerButton,
-                    element_title: this.title,
+                    element_title: this.header,
                     click_text: slotElement.innerText,
                     click_url: `${window.location.origin}${slotElement.href}`
                 });
                 track(event.currentTarget!, "custEv_linkClick", {
                     ...payloadInnerButton,
-                    element_title: this.title,
+                    element_title: this.header,
                     click_text: slotElement.innerText,
                     click_url: `${window.location.origin}${slotElement.href}`
                 });
@@ -54,8 +54,8 @@ export default class CardDocs extends LightningElement {
 
     private handleLinkClick(event: PointerEvent) {
         const payloadCardInfo = {
-            click_text: this.title,
-            element_title: this.title,
+            click_text: this.header,
+            element_title: this.header,
             click_url: `${window.location.origin}${this.href}`,
             element_type: "link",
             content_category: "cta"
@@ -67,7 +67,7 @@ export default class CardDocs extends LightningElement {
     private handleTextClick(event: PointerEvent) {
         const payloadCardTextInfo = {
             click_text: this.body,
-            element_title: this.title,
+            element_title: this.header,
             click_url: `${window.location.origin}${this.href}`,
             element_type: "tile",
             content_category: "cta"

package/src/modules/dx/cardEvent/cardEvent.html

@@ -42,7 +42,7 @@
                     onmouseenter={setLinkHovered}
                     onmouseleave={setLinkInactive}
                     target={target}
-                    title={title}
+                    header={header}
                 ></dx-card-title>
                 <div class="subtitle-container" if:true={showSubtitle}>
                     <span class="subtitle dx-text-label-1-dark" part="subtitle">

package/src/modules/dx/cardEvent/cardEvent.ts

@@ -11,7 +11,7 @@ export default class CardEvent extends LightningElement {
     @api location?: string | null = null;
     @api startDatetime!: string;
     @api target: string = "_blank";
-    @api title!: string;
+    @api header!: string;
     @api shortDescription?: string;
     @api type?: string;
 

package/src/modules/dx/cardExpanded/cardExpanded.html

@@ -2,10 +2,10 @@
     <div class={containerClass}>
         <dx-type-badge variant={contentType} size={badgeSize}></dx-type-badge>
         <dx-card-title
-            if:true={title}
+            if:true={header}
             href={href}
             target={target}
-            title={title}
+            header={header}
         ></dx-card-title>
         <div class="card-extra-info dx-text-label-1-dark">
             <div class="authors" if:true={renderAuthor}>

package/src/modules/dx/cardGrid/cardGrid.html

@@ -8,7 +8,7 @@
                 img-alt={card.imgAlt}
                 img-src={card.imgSrc}
                 label={card.label}
-                title={card.title}
+                header={card.title}
                 target={card.target}
                 show-mobile-img={card.showMobileImg}
                 widget-config={card.widgetConfig}

package/src/modules/dx/cardGridDocs/cardGridDocs.html

@@ -29,7 +29,7 @@
                     img-alt={card.imgAlt}
                     img-src={card.imgSrc}
                     label={card.label}
-                    title={card.title}
+                    header={card.title}
                     target={card.target}
                     show-mobile-img={card.showMobileImg}
                 >
@@ -60,7 +60,7 @@
         </div>
     </div>
     <dx-empty-state
-        title="Beep boop. That did not compute."
+        header="Beep boop. That did not compute."
         subtitle={emptyStateSubtitle}
         if:true={showEmptyState}
     ></dx-empty-state>

package/src/modules/dx/cardMinimal/cardMinimal.html

@@ -1,7 +1,7 @@
 <template>
     <div class="card-container">
         <a class="dx-text-truncate" href={href} target={target}>
-            <h4>{title}</h4>
+            <h4>{header}</h4>
         </a>
         <dx-type-badge variant={contentType} size={badgeSize}></dx-type-badge>
     </div>

package/src/modules/dx/cardNews/cardNews.html

@@ -9,7 +9,7 @@
     >
         <div class={textContainerClassName}>
             <h3 class="dx-text-display-4">
-                <dx-formatted-rich-text value={title}></dx-formatted-rich-text>
+                <dx-formatted-rich-text value={header}></dx-formatted-rich-text>
             </h3>
             <p>{body}</p>
             <div class="cta">

package/src/modules/dx/cardNews/cardNews.ts

@@ -13,7 +13,7 @@ import { track } from "dxUtils/analytics";
 
 export default class CardNews extends LightningElement {
     @api backgroundColor: string = "indigo-vibrant-40";
-    @api title!: string;
+    @api header!: string;
     @api body!: string;
     @api buttonText?: string = "";
     @api buttonType!: CardNewsButtonType;
@@ -70,7 +70,7 @@ export default class CardNews extends LightningElement {
             click_url: this.href.includes("http")
                 ? this.href
                 : `${window.location.origin}${this.href}`,
-            element_title: this.title,
+            element_title: this.header,
             element_type: "link",
             content_category: "cta"
         };

package/src/modules/dx/cardPodcastEpisode/cardPodcastEpisode.html

@@ -23,7 +23,7 @@
                 target={target}
                 onmouseenter={setLinkHovered}
                 onmouseleave={setLinkInactive}
-                title={title}
+                header={header}
             ></dx-card-title>
             <span class="datetime dx-text-label-1-dark">
                 <dx-relative-date-time

package/src/modules/dx/cardPodcastEpisode/cardPodcastEpisode.ts

@@ -8,7 +8,7 @@ export default class CardPodcastEpisode extends LightningElement {
     @api href!: string;
     @api length!: string;
     @api target?: string | null = null;
-    @api title!: string;
+    @api header!: string;
 
     private isLinkHovered: boolean = false;
 

package/src/modules/dx/cardSmall/cardSmall.html

@@ -13,7 +13,7 @@
             <dx-card-title
                 href={href}
                 target={target}
-                title={title}
+                header={header}
             ></dx-card-title>
             <span class="dx-text-body-2">{body}</span>
             <div if:false={isSlotEmpty} class="dx-card-base_ctas">
@@ -32,7 +32,7 @@
             ></dx-icon-badge>
         </div>
         <div class="dx-card-base_section-horizontal dx-card-base_column">
-            <dx-card-title target={target} title={title}></dx-card-title>
+            <dx-card-title target={target} header={header}></dx-card-title>
             <span class="dx-text-body-2">{body}</span>
             <div if:false={isSlotEmpty} class="dx-card-base_ctas">
                 <slot onslotchange={onSlotChange}></slot>

package/src/modules/dx/cardSmall/cardSmall.ts

@@ -18,7 +18,7 @@ export default class CardSmall extends LightningElement {
     @api borderless?: boolean = false;
     @api href!: string;
     @api target?: string | null = null;
-    @api title!: string;
+    @api header!: string;
 
     private isSlotEmpty: boolean = false;
 

package/src/modules/dx/cardTitle/cardTitle.ts

@@ -3,7 +3,7 @@ import { LightningElement, api } from "lwc";
 export default class CardTitle extends LightningElement {
     @api href!: string;
     @api target?: string | null = null;
-    @api title!: string;
+    @api header!: string;
 
     private get isExternal() {
         return this.target === "_blank";
@@ -11,8 +11,8 @@ export default class CardTitle extends LightningElement {
 
     private get titleToWrap() {
         return this.isExternal
-            ? this.title.substring(0, this.title.lastIndexOf(" "))
-            : this.title;
+            ? this.header.substring(0, this.header.lastIndexOf(" "))
+            : this.header;
     }
 
     private get needsSpace() {
@@ -21,7 +21,7 @@ export default class CardTitle extends LightningElement {
 
     private get titleNoWrap() {
         return this.isExternal
-            ? this.title.substring(this.title.lastIndexOf(" ") + 1)
+            ? this.header.substring(this.header.lastIndexOf(" ") + 1)
             : null;
     }
 }

package/src/modules/dx/cardTrailheadModule/cardTrailheadModule.html

@@ -7,7 +7,7 @@
         label={label}
         subtitle={subtitle}
         target={target}
-        title={title}
+        header={header}
     >
         <img
             class="badge"

package/src/modules/dx/cardTrailheadModule/cardTrailheadModule.ts

@@ -10,7 +10,7 @@ export default class CardTrailheadModule extends LightningElement {
     @api length!: string;
     @api points!: string | number;
     @api target?: string | null = null;
-    @api title!: string;
+    @api header!: string;
     @api label?: string = "Trailhead";
 
     get subtitle() {

package/src/modules/dx/cardTrial/cardTrial.html

@@ -20,7 +20,7 @@
             col-two-details={modalDetails}
             target={target}
             terms={terms}
-            title={title}
+            header={header}
             type-badge-value={modalTypeBadgeValue}
             type-badge-dark={modalTypeBadgeDark}
             onclickclose={closeModal}
@@ -53,7 +53,7 @@
         <dx-card-title
             href={href}
             target={target}
-            title={title}
+            header={header}
         ></dx-card-title>
         <span class="label dx-text-body-3">{label}</span>
         <p class="body dx-text-body-2 static-font">{body}</p>

package/src/modules/dx/cardTrial/cardTrial.ts

@@ -23,7 +23,7 @@ export default class CardTrial extends LightningElement {
     @api recommended?: boolean = false;
     @api target?: string;
     @api terms!: string;
-    @api title!: string;
+    @api header!: string;
     @api topText?: string;
     @api modalTitle?: string;
 

package/src/modules/dx/cardTrialExpanded/cardTrialExpanded.html

@@ -29,7 +29,7 @@
                     class="title-main"
                     href={href}
                     target={target}
-                    title={title}
+                    header={header}
                 ></dx-card-title>
                 <span class="label dx-text-body-3">{label}</span>
                 <p class="body dx-text-body-2 static-font">{body}</p>
@@ -64,7 +64,7 @@
             <div class="col-two">
                 <dx-card-title
                     class="title-secondary"
-                    title={colTwoTitle}
+                    header={colTwoTitle}
                 ></dx-card-title>
                 <template for:each={colTwoDetails} for:item="colTwoItem">
                     <div key={colTwoItem.title}>

package/src/modules/dx/cardTrialExpanded/cardTrialExpanded.ts

@@ -16,7 +16,7 @@ export default class CardTrial extends LightningElement {
     @api label!: string;
     @api target?: string;
     @api terms!: string;
-    @api title!: string;
+    @api header!: string;
     @api typeBadgeValue?: string;
     @api typeBadgeDark?: boolean = false;
 
@@ -72,7 +72,7 @@ export default class CardTrial extends LightningElement {
         if (this.href.includes("signup")) {
             const payload = {
                 click_text: this.buttonCta,
-                element_title: this.title,
+                element_title: this.header,
                 element_type: "card",
                 click_url: `${window.location.origin}${this.href}`,
                 content_category: "cta"

package/src/modules/dx/cardVideoPreview/cardVideoPreview.html

@@ -7,7 +7,7 @@
         img-src={imgSrc}
         layout={layout}
         target={target}
-        title={title}
+        header={header}
     >
         <dx-icon-badge
             class="dx-play-button"

package/src/modules/dx/cardVideoPreview/cardVideoPreview.ts

@@ -9,5 +9,5 @@ export default class CardVideoPreview extends LightningElement {
     @api imgSrc?: string | null;
     @api target?: string | null = null;
     @api layout: "vertical" | "horizontal" = "vertical";
-    @api title!: string;
+    @api header!: string;
 }

package/src/modules/dx/codeBlock/codeBlock.html

@@ -4,7 +4,7 @@
             <div class="toolbar">
                 <div class="toolbar-item">
                     <div class="dx-text-display-8 dx-code-block-heading">
-                        { title }
+                        { header }
                     </div>
                 </div>
                 <template if:true={showLanguageDropdown}>

package/src/modules/dx/codeBlock/codeBlock.ts

@@ -46,7 +46,7 @@ const LOCAL_STORAGE_KEY = "dx-codeblock-theme";
 
 export default class CodeBlock extends LightningElement {
     @api defaultTheme: CodeBlockTheme = LIGHT;
-    @api title: string = "title";
+    @api header: string = "title";
     @api sourceLink: string = "";
     @api language: string = "";
     // if it is true, it renders code as is coming instead of wrapping it into html/xml comments tags.

package/src/modules/dx/coveoRecommendations/coveoRecommendations.html

@@ -17,7 +17,7 @@
                     img-alt={recommendation.yoast_head_json.title}
                     img-src={recommendation.featured_image}
                     key={recommendation.id}
-                    title={recommendation.yoast_head_json.title}
+                    header={recommendation.yoast_head_json.title}
                     origin="coveo"
                     click-event={recommendation.clickEvent}
                 ></dx-card-blog-post>

package/src/modules/dx/embeddedVideo/embeddedVideo.html

@@ -22,7 +22,7 @@
                 title="Embedded post"
             ></iframe>
         </template>
-        <h2 class="dx-text-display-6">{title}</h2>
+        <h2 class="dx-text-display-6">{header}</h2>
         <p class="dx-text-body-2">{body}</p>
         <div lwc:if={hasSocial}>
             <dx-hr no-padding="true" spacing="smd"></dx-hr>

package/src/modules/dx/embeddedVideo/embeddedVideo.ts

@@ -5,7 +5,7 @@ export default class EmbeddedVideo extends LightningElement {
     @api videoId!: string;
     @api compact = false;
 
-    @api title = "";
+    @api header = "";
     @api body = "";
 
     @api hasSocial? = false;

package/src/modules/dx/emptyState/emptyState.html

@@ -8,7 +8,7 @@
             lwc:if={altVariant}
         />
         <div class={textClassName}>
-            <h3 class={titleClassName}>{title}</h3>
+            <h3 class={titleClassName}>{header}</h3>
             <p class={subtitleClassName} if:true={subtitle}>{subtitle}</p>
             <p class="body dx-text-display-8" if:true={body}>{body}</p>
             <ul if:true={suggestions}>