@scania/tegel
Version:
Tegel Design System
56 lines (52 loc) • 5.42 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
import { h as hasSlot } from './hasSlot-d52114d0.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 .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}";
const TdsCardStyle0 = cardCss;
const TdsCard = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.tdsClick = createEvent(this, "tdsClick", 6);
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" }, 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.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: this.stretch && '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` })));
};
this.modeVariant = null;
this.imagePlacement = 'below-header';
this.header = undefined;
this.subheader = undefined;
this.bodyImg = undefined;
this.bodyImgAlt = undefined;
this.bodyDivider = false;
this.clickable = false;
this.stretch = false;
this.cardId = generateUniqueId();
}
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: '39dde374a44320884af4b8a0da33e24c983417c5', class: this.modeVariant && `tds-mode-variant-${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 = TdsCardStyle0;
export { TdsCard as tds_card };