@scania/tegel
Version:
Tegel Design System
74 lines (70 loc) • 6.82 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-9xxNGlso.js';
import { g as generateUniqueId } from './generateUniqueId-Cn4f8w1e.js';
import { h as hasSlot } from './hasSlot-DDX6uFcm.js';
const cardCss = () => `.card{box-sizing:border-box;box-shadow:var(--tds-card-box);background-color:var(--tds-card-background);display:block;border-radius:4px;overflow:hidden}.card *{box-sizing:border-box}.card.clickable:hover{box-shadow:var(--tds-card-box-hover);cursor:pointer}.card .card-header{font:var(--tds-headline-06);letter-spacing:var(--tds-headline-06-ls);padding:16px;display:flex;align-items:center}.card .card-header slot[name=thumbnail]::slotted(*){width:36px;height:36px;border-radius:100%;margin-right:16px}.card .card-header .card-top-header{padding-left:16px;display:flex;flex-direction:column}.card .card-header .card-top-header.no-header-img{padding-left:0}.card .card-header.below{padding-top:16px}.card .card-header.expandable tds-icon{cursor:pointer;margin-left:auto;transition:transform 160ms ease-in-out, opacity 120ms ease-in-out}.card .card-header.expandable tds-icon.rotated{transform:rotate(180deg)}.card .header-subheader{display:flex;flex-direction:column;width:100%;gap:4px}.card .header-subheader .header,.card .header-subheader slot[name=header]{color:var(--tds-card-headline)}.card .header-subheader .subheader,.card .header-subheader slot[name=subheader]{color:var(--tds-card-sub-headline)}.card .card-body-img{width:100%}.card .tds-divider{margin:16px 16px 0;background-color:var(--tds-card-divider);height:1px}.card .card-body{display:block;word-wrap:break-word}.card slot[name=body]::slotted(*){font:var(--tds-detail-03) !important;letter-spacing:var(--tds-detail-03-ls) !important;color:var(--tds-card-body-color);padding:0 16px;margin-bottom:16px;margin-top:16px;max-width:336px}.card slot[name=actions]::slotted(*){display:flex;padding:16px;color:var(--tds-card-icon-color)}button{width:100%;border:none;text-align:left;padding:0}button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button:active{box-shadow:var(--tds-card-box-pressed)}.below-header-stretch,.above-header-stretch{display:flex;flex-direction:column}.below-header-stretch .stretch,.above-header-stretch .stretch{display:flex;flex-direction:column;flex-grow:1;width:100%}.below-header-stretch .card-body,.above-header-stretch .card-body{display:flex;flex-direction:column;flex-grow:1}.below-header-stretch .card-body slot[name=body]::slotted(*),.above-header-stretch .card-body slot[name=body]::slotted(*){max-width:unset;flex-grow:1}:host([expandable]:not([expanded])) .card-body slot[name=body]{display:none}`;
const TdsCard = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.tdsClick = createEvent(this, "tdsClick", 6);
/** Variant of the Card based on the theme used. */
this.modeVariant = null;
/** Placement of the header */
this.imagePlacement = 'below-header';
/** Divider for the body */
this.bodyDivider = false;
/** Makes the Card clickable. */
this.clickable = false;
this.stretch = false;
/** ID for the Card, must be unique.
*
* **NOTE**: If you're listening for Card events, you need to set this ID yourself to identify the Card,
* as the default ID is random and will be different every time.
*/
this.cardId = generateUniqueId();
/**
* Enables expandable behaviour.
* When true, clicking the header toggles content visibility.
*/
this.expandable = false;
/**
* Tracks the current expanded state when expandable is enabled.
*/
this.expanded = false;
this.toggleExpand = () => {
if (this.expandable) {
this.expanded = !this.expanded;
}
};
this.handleClick = () => {
this.tdsClick.emit({
cardId: this.cardId,
});
};
this.getCardHeader = () => {
const usesHeaderSlot = hasSlot('header', this.host);
const usesSubheaderSlot = hasSlot('subheader', this.host);
const usesThumbnailSlot = hasSlot('thumbnail', this.host);
return (h("div", { class: { 'card-header': true, 'expandable': this.expandable, 'expanded': this.expanded } }, usesThumbnailSlot && h("slot", { name: "thumbnail" }), h("div", { class: "header-subheader", id: `header-${this.cardId}` }, this.header && h("span", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("span", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" })), this.expandable && (h("tds-button", { type: "button", variant: "ghost", size: "sm", "tds-aria-label": "Toggle card content", "aria-expanded": this.expanded ? 'true' : 'false', onClick: this.toggleExpand }, h("tds-icon", { slot: "icon", size: "16px", name: "chevron_down", svgTitle: "Chevron Down", class: { rotated: this.expanded } })))));
};
this.getCardContent = () => {
const usesBodySlot = hasSlot('body', this.host);
const usesBodyImageSlot = hasSlot('body-image', this.host);
const usesActionsSlot = hasSlot('actions', this.host);
const bodyId = `body-${this.cardId}`;
return (h("div", { class: { stretch: this.stretch }, "aria-describedby": usesBodySlot ? bodyId : null }, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: "card-body", id: bodyId }, usesBodyImageSlot && h("slot", { name: "body-image" }), this.bodyImg && h("img", { class: "card-body-img", src: this.bodyImg, alt: this.bodyImgAlt }), this.imagePlacement === 'above-header' && this.getCardHeader(), this.bodyDivider && h("tds-divider", null), usesBodySlot && h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: `actions` })));
};
}
render() {
const cardStyle = {
card: true,
clickable: this.clickable,
[this.imagePlacement]: !this.stretch,
[`${this.imagePlacement}-stretch`]: this.stretch,
};
const ariaLabel = this.header ? this.header : `Card ${this.cardId}`;
return (h(Host, { key: 'a02da4f8704ad22664fec6ba0b97421094e4cda0', class: { [`tds-mode-variant-${this.modeVariant}`]: !!this.modeVariant } }, this.clickable ? (h("button", { class: cardStyle, onClick: this.handleClick, "aria-label": ariaLabel, "aria-describedby": `header-${this.cardId}` }, this.getCardContent())) : (h("div", { class: cardStyle }, this.getCardContent()))));
}
get host() { return getElement(this); }
};
TdsCard.style = cardCss();
export { TdsCard as tds_card };