@fluid-topics/ftds-card 2.1.6 → 2.1.8

package/build/ftds-card.d.ts

@@ -22,7 +22,6 @@ export declare class FtdsCard extends FtLitElement implements FtdsCardProperties
     private sideBarContent;
     private get isClickable();
     protected render(): import("lit-html").TemplateResult<1>;
-    private renderHeaderText;
     private onKeydown;
     private onKeyup;
     private onClick;

package/build/ftds-card.js

@@ -6,12 +6,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { FtLitElement, unslotText, } from "@fluid-topics/ft-wc-utils";
 import { FtdsTypography } from "@fluid-topics/ftds-typography";
-import { designSystemStyles, FtdsCardTypographies, } from "./ftds-card.styles";
-import { property, query, queryAssignedNodes, state, } from "lit/decorators.js";
-import { html, nothing, } from "lit";
+import { designSystemStyles } from "./ftds-card.styles";
+import { property, query, queryAssignedNodes, state } from "lit/decorators.js";
+import { html, nothing } from "lit";
 import { when } from "lit/directives/when.js";
 import { classMap } from "lit/directives/class-map.js";
 import { FtRipple } from "@fluid-topics/ft-ripple";
+import { renderCardHeaderContent } from "./helpers";
 export class FtdsCard extends FtLitElement {
     constructor() {
         super(...arguments);
@@ -59,21 +60,14 @@ export class FtdsCard extends FtLitElement {
                     <div id="image">
                         <slot name="image" @slotchange=${this.onSlotchange}></slot>
                     </div>
-                    <div id="header">
-                        <div id="header-title">
-                            ${when(!!this.headerHref, () => html `
-                                    <a href="${this.headerHref}">
-                                        ${this.renderHeaderText()}
-                                    </a>
-                                `, () => html `
-                                    ${this.renderHeaderText()}
-                                `)}
-                            <slot name="header" @slotchange=${this.onSlotchange}></slot>
+                    <slot name="header-wrapper">
+                        <div id="header">
+                            ${renderCardHeaderContent({
+            headerText: this.headerText,
+            headerHref: this.headerHref,
+        })}
                         </div>
-                        <div id="header-actions">
-                            <slot name="header-actions" @slotchange=${this.onSlotchange}></slot>
-                        </div>
-                    </div>
+                    </slot>
                     <div id="body">
                         <slot @slotchange=${this.onSlotchange}></slot>
                     </div>
@@ -82,7 +76,8 @@ export class FtdsCard extends FtLitElement {
                             <slot name="footer" @slotchange=${this.onSlotchange}></slot>
                         </div>
                         <div id="footer-actions">
-                            <slot name="footer-actions" @slotchange=${this.onSlotchange}></slot>
+                            <slot name="footer-actions"
+                                  @slotchange=${this.onSlotchange}></slot>
                         </div>
                     </div>
                 </div>
@@ -92,11 +87,6 @@ export class FtdsCard extends FtLitElement {
             </div>
         `;
     }
-    renderHeaderText() {
-        return html `
-            <ftds-typography variant="${FtdsCardTypographies.header}">${this.headerText}</ftds-typography>
-        `;
-    }
     onKeydown(event) {
         if (this.selectable && event.code === "Space") {
             event.preventDefault();
@@ -170,7 +160,7 @@ __decorate([
     query("#body slot")
 ], FtdsCard.prototype, "bodyContent", void 0);
 __decorate([
-    queryAssignedNodes({ slot: "footer" })
+    queryAssignedNodes({ slot: "footer", flatten: true })
 ], FtdsCard.prototype, "footerContent", void 0);
 __decorate([
     queryAssignedNodes({ slot: "footer-actions" })