@fluid-topics/ftds-card 2.1.0

package/README.md

@@ -0,0 +1,19 @@
+The design system card component
+
+## Install
+
+```shell
+npm install @fluid-topics/ftds-card
+yarn add @fluid-topics/ftds-card
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ftds-card"
+
+function render() {
+    return html` <ftds-card foo="bar"></ftds-card> `
+}
+```

package/build/define.d.ts

@@ -0,0 +1 @@
+export {};

package/build/define.js

@@ -0,0 +1,3 @@
+import { customElements } from "@fluid-topics/ft-wc-utils";
+import definitions from "./definitions";
+customElements(definitions);

package/build/definitions.d.ts

@@ -0,0 +1,9 @@
+import { FtdsCardUserInfo } from "./ftds-card-user-info";
+import { FtdsCard } from "./ftds-card";
+import { FtdsCardLabelledInfo } from "./ftds-card-labelled-info";
+declare const _default: {
+    "ftds-card": typeof FtdsCard;
+    "ftds-card-user-info": typeof FtdsCardUserInfo;
+    "ftds-card-labelled-info": typeof FtdsCardLabelledInfo;
+};
+export default _default;

package/build/definitions.js

@@ -0,0 +1,8 @@
+import { FtdsCardUserInfo } from "./ftds-card-user-info";
+import { FtdsCard } from "./ftds-card";
+import { FtdsCardLabelledInfo } from "./ftds-card-labelled-info";
+export default {
+    "ftds-card": FtdsCard,
+    "ftds-card-user-info": FtdsCardUserInfo,
+    "ftds-card-labelled-info": FtdsCardLabelledInfo,
+};

package/build/ftds-card-labelled-info.d.ts

@@ -0,0 +1,9 @@
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtdsCardLabelledInfoProperties } from "./ftds-card-labelled-info.properties";
+export declare class FtdsCardLabelledInfo extends FtLitElement implements FtdsCardLabelledInfoProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    label: string;
+    info: string;
+    protected render(): import("lit-html").TemplateResult<1>;
+}

package/build/ftds-card-labelled-info.js

@@ -0,0 +1,40 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { FtLitElement, } from "@fluid-topics/ft-wc-utils";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { FtdsTypography, FtdsTypographyVariants, } from "@fluid-topics/ftds-typography";
+import { labelledInfoStyles } from "./ftds-card-labelled-info.styles";
+export class FtdsCardLabelledInfo extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.label = "";
+        this.info = "";
+    }
+    render() {
+        return html `
+            <div id="container">
+                <ftds-typography class="label" variant="${FtdsTypographyVariants.caption2medium}">
+                    ${this.label}
+                </ftds-typography>
+                <ftds-typography class="info" variant="${FtdsTypographyVariants.body2medium}">
+                    ${this.info}
+                </ftds-typography>
+            </div>
+        `;
+    }
+}
+FtdsCardLabelledInfo.elementDefinitions = {
+    "ftds-typography": FtdsTypography,
+};
+FtdsCardLabelledInfo.styles = labelledInfoStyles;
+__decorate([
+    property()
+], FtdsCardLabelledInfo.prototype, "label", void 0);
+__decorate([
+    property()
+], FtdsCardLabelledInfo.prototype, "info", void 0);

package/build/ftds-card-labelled-info.properties.d.ts

@@ -0,0 +1,4 @@
+export interface FtdsCardLabelledInfoProperties {
+    label: string;
+    info: string;
+}

package/build/ftds-card-labelled-info.properties.js

@@ -0,0 +1 @@
+export {};

package/build/ftds-card-labelled-info.styles.d.ts

@@ -0,0 +1 @@
+export declare const labelledInfoStyles: import("lit").CSSResult;

package/build/ftds-card-labelled-info.styles.js

@@ -0,0 +1,21 @@
+import { css } from "lit";
+import { foundation, semantic, } from "@fluid-topics/ft-wc-utils";
+// language=CSS
+export const labelledInfoStyles = css `
+    :host {
+    }
+
+    #container {
+        display: flex;
+        flex-direction: column;
+        gap: ${foundation.spacing1};
+    }
+
+    .label {
+        color: ${semantic.contentGlobalSecondary};
+    }
+
+    .info {
+        color: ${semantic.contentGlobalPrimary};
+    }
+`;

package/build/ftds-card-user-info.d.ts

@@ -0,0 +1,8 @@
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { CardUserProfile, FtdsCardUserInfoProperties } from "./ftds-card-user-info.properties";
+export declare class FtdsCardUserInfo extends FtLitElement implements FtdsCardUserInfoProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    user?: CardUserProfile;
+    protected render(): import("lit-html").TemplateResult<1>;
+}

package/build/ftds-card-user-info.js

@@ -0,0 +1,38 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { FtLitElement, } from "@fluid-topics/ft-wc-utils";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { userInfoStyles } from "./ftds-card-user-info.styles";
+import { FtdsIcon, FtdsIcons, } from "@fluid-topics/ftds-icon";
+import { FtdsTypography, FtdsTypographyVariants, } from "@fluid-topics/ftds-typography";
+export class FtdsCardUserInfo extends FtLitElement {
+    render() {
+        var _a, _b;
+        return html `
+            <div id="container">
+                <ftds-icon icon="${FtdsIcons.USER}"></ftds-icon>
+                <div id="info">
+                    <ftds-typography class="name" variant="${FtdsTypographyVariants.caption1medium}">
+                        ${(_a = this.user) === null || _a === void 0 ? void 0 : _a.displayName}
+                    </ftds-typography>
+                    <ftds-typography class="mail" variant="${FtdsTypographyVariants.caption1medium}">
+                        ${(_b = this.user) === null || _b === void 0 ? void 0 : _b.emailAddress}
+                    </ftds-typography>
+                </div>
+            </div>
+        `;
+    }
+}
+FtdsCardUserInfo.elementDefinitions = {
+    "ftds-typography": FtdsTypography,
+    "ftds-icon": FtdsIcon,
+};
+FtdsCardUserInfo.styles = userInfoStyles;
+__decorate([
+    property({ attribute: false })
+], FtdsCardUserInfo.prototype, "user", void 0);

package/build/ftds-card-user-info.properties.d.ts

@@ -0,0 +1,5 @@
+import { FtUserProfile } from "@fluid-topics/public-api";
+export type CardUserProfile = Pick<FtUserProfile, "displayName" | "emailAddress">;
+export interface FtdsCardUserInfoProperties {
+    user?: CardUserProfile;
+}

package/build/ftds-card-user-info.properties.js

@@ -0,0 +1 @@
+export {};

package/build/ftds-card-user-info.styles.d.ts

@@ -0,0 +1 @@
+export declare const userInfoStyles: import("lit").CSSResult;

package/build/ftds-card-user-info.styles.js

@@ -0,0 +1,31 @@
+import { css } from "lit";
+import { foundation, semantic, } from "@fluid-topics/ft-wc-utils";
+import { FtdsIconCssVariables } from "@fluid-topics/ftds-icon";
+// language=CSS
+export const userInfoStyles = css `
+    :host {
+    }
+
+    #container {
+        display: flex;
+        align-items: center;
+        gap: ${foundation.spacing2};
+    }
+
+    ftds-icon {
+        ${FtdsIconCssVariables.size.set(foundation.iconSize5)};
+    }
+
+    #info {
+        display: flex;
+        flex-direction: column;
+
+        .name {
+            color: ${semantic.contentGlobalPrimary};
+        }
+
+        .mail {
+            color: ${semantic.contentGlobalSecondary};
+        }
+    }
+`;

package/build/ftds-card.d.ts

@@ -0,0 +1,30 @@
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtdsCardProperties } from "./ftds-card.properties";
+export declare class FtdsCard extends FtLitElement implements FtdsCardProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    headerText?: string;
+    headerBorder: boolean;
+    headerHref?: string;
+    selectable: boolean;
+    selected: boolean;
+    private hasHeader;
+    private hasHeaderActions;
+    private hasBody;
+    private hasFooter;
+    private hasFooterActions;
+    private hasSideBar;
+    private headerContent;
+    private headerActionsContent;
+    private bodyContent?;
+    private footerContent;
+    private footerActionsContent;
+    private sideBarContent;
+    private get isClickable();
+    protected render(): import("lit-html").TemplateResult<1>;
+    private renderHeaderText;
+    private onKeydown;
+    private onKeyup;
+    private onClick;
+    private onSlotchange;
+}

package/build/ftds-card.js

@@ -0,0 +1,180 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 { when } from "lit/directives/when.js";
+import { classMap } from "lit/directives/class-map.js";
+import { FtRipple } from "@fluid-topics/ft-ripple";
+export class FtdsCard extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.headerBorder = false;
+        this.selectable = false;
+        this.selected = false;
+        this.hasHeader = true;
+        this.hasHeaderActions = false;
+        this.hasBody = true;
+        this.hasFooter = true;
+        this.hasFooterActions = false;
+        this.hasSideBar = false;
+    }
+    get isClickable() {
+        return this.selectable || !!this.headerHref;
+    }
+    render() {
+        const classes = {
+            "ftds-card--clickable": this.isClickable,
+            "ftds-card--selected": this.selected,
+            "ftds-card--selectable": this.selectable,
+            "ftds-card--header-border": this.headerBorder,
+            "ftds-card--no-header": !this.hasHeader,
+            "ftds-card--no-header-actions": !this.hasHeaderActions,
+            "ftds-card--no-body": !this.hasBody,
+            "ftds-card--no-footer": !this.hasFooter,
+            "ftds-card--no-footer-actions": !this.hasFooterActions,
+            "ftds-card--no-side-bar": !this.hasSideBar,
+        };
+        return html `
+            <div id="container"
+                 role="${this.selectable ? "checkbox" : nothing}"
+                 aria-checked="${this.selectable ? this.selected.toString() : nothing}"
+                 aria-labelledby="${this.selectable ? "header-title" : nothing}"
+                 tabindex="${this.selectable ? 0 : nothing}"
+                 class="${classMap(classes)}"
+                 @keydown=${this.onKeydown}
+                 @keyup=${this.onKeyup}
+                 @click=${this.onClick}
+            >
+                ${when(!!this.headerHref || this.selectable, () => html `
+                    <ft-ripple ?selected=${this.selected}></ft-ripple>
+                `)}
+                <div id="main">
+                    <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>
+                        </div>
+                        <div id="header-actions">
+                            <slot name="header-actions" @slotchange=${this.onSlotchange}></slot>
+                        </div>
+                    </div>
+                    <div id="body">
+                        <slot @slotchange=${this.onSlotchange}></slot>
+                    </div>
+                    <div id="footer">
+                        <div id="footer-text">
+                            <slot name="footer" @slotchange=${this.onSlotchange}></slot>
+                        </div>
+                        <div id="footer-actions">
+                            <slot name="footer-actions" @slotchange=${this.onSlotchange}></slot>
+                        </div>
+                    </div>
+                </div>
+                <div id="side-bar">
+                    <slot name="side-bar" @slotchange=${this.onSlotchange}></slot>
+                </div>
+            </div>
+        `;
+    }
+    renderHeaderText() {
+        return html `
+            <ftds-typography variant="${FtdsCardTypographies.header}">${this.headerText}</ftds-typography>
+        `;
+    }
+    onKeydown(event) {
+        if (this.selectable && event.code === "Space") {
+            event.preventDefault();
+        }
+    }
+    onKeyup(event) {
+        if (this.selectable && event.code === "Space") {
+            this.dispatchEvent(new CustomEvent("change", { detail: !this.selected }));
+        }
+    }
+    onClick() {
+        if (this.selectable) {
+            this.dispatchEvent(new CustomEvent("change", { detail: !this.selected }));
+        }
+    }
+    onSlotchange() {
+        var _a, _b;
+        this.hasHeader = this.headerContent.length > 0 || !!this.headerText;
+        this.hasHeaderActions = this.headerActionsContent.length > 0;
+        this.hasBody = unslotText(this.bodyContent).trim().length > 0 || ((_b = (_a = this.bodyContent) === null || _a === void 0 ? void 0 : _a.assignedElements()) !== null && _b !== void 0 ? _b : []).length > 0;
+        this.hasFooter = this.footerContent.length > 0;
+        this.hasFooterActions = this.footerActionsContent.length > 0;
+        this.hasSideBar = this.sideBarContent.length > 0;
+    }
+}
+FtdsCard.elementDefinitions = {
+    "ftds-typography": FtdsTypography,
+    "ft-ripple": FtRipple,
+};
+FtdsCard.styles = designSystemStyles;
+__decorate([
+    property()
+], FtdsCard.prototype, "headerText", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsCard.prototype, "headerBorder", void 0);
+__decorate([
+    property()
+], FtdsCard.prototype, "headerHref", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsCard.prototype, "selectable", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsCard.prototype, "selected", void 0);
+__decorate([
+    state()
+], FtdsCard.prototype, "hasHeader", void 0);
+__decorate([
+    state()
+], FtdsCard.prototype, "hasHeaderActions", void 0);
+__decorate([
+    state()
+], FtdsCard.prototype, "hasBody", void 0);
+__decorate([
+    state()
+], FtdsCard.prototype, "hasFooter", void 0);
+__decorate([
+    state()
+], FtdsCard.prototype, "hasFooterActions", void 0);
+__decorate([
+    state()
+], FtdsCard.prototype, "hasSideBar", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "header" })
+], FtdsCard.prototype, "headerContent", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "header-actions" })
+], FtdsCard.prototype, "headerActionsContent", void 0);
+__decorate([
+    query("#body slot")
+], FtdsCard.prototype, "bodyContent", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "footer" })
+], FtdsCard.prototype, "footerContent", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "footer-actions" })
+], FtdsCard.prototype, "footerActionsContent", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "side-bar" })
+], FtdsCard.prototype, "sideBarContent", void 0);