@oslokommune/punkt-elements
Version:
Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo
232 lines (231 loc) • 6.64 kB
JavaScript
import { e as g } from "./class-map-BpTj9gtz.js";
import { o as c } from "./if-defined-CmuO4Vz9.js";
import { P as m, E as d, x as t, n as i, a as u } from "./element-CgEWt74-.js";
import { P as $ } from "./pkt-slot-controller-BPGj-LC5.js";
import { e as y, n as _ } from "./ref-BBYSqgeW.js";
import "./icon-CC1js8eR.js";
import "./tag-BWm6s48d.js";
const b = {
layout: {
default: "vertical"
},
skin: {
default: "outlined"
},
padding: {
default: "default"
}
}, k = {
props: b
};
var f = Object.defineProperty, S = Object.getOwnPropertyDescriptor, a = (r, s, p, o) => {
for (var n = o > 1 ? void 0 : o ? S(s, p) : s, l = r.length - 1, h; l >= 0; l--)
(h = r[l]) && (n = (o ? h(s, p, n) : h(n)) || n);
return o && n && f(s, p, n), n;
};
let e = class extends m {
//Constructor
constructor() {
super(), this.defaultSlot = y(), this.ariaLabel = "", this.metaLead = null, this.borderOnHover = !0, this.clickCardLink = null, this.metaTrail = null, this.layout = k.props.layout.default, this.heading = "", this.headinglevel = 3, this.image = {
src: "",
alt: ""
}, this.imageShape = "square", this.openLinkInNewTab = !1, this.padding = k.props.padding.default, this.skin = k.props.skin.default, this.subheading = "", this.tagPosition = "top", this.tags = [], this.slotController = new $(this, this.defaultSlot);
}
connectedCallback() {
super.connectedCallback();
}
// Render methods
// Main render method
// prettier-ignore
render() {
var o, n;
const r = {
"pkt-card": !0,
[`pkt-card--${this.skin}`]: this.skin,
[`pkt-card--${this.layout}`]: this.layout,
[`pkt-card--padding-${this.padding}`]: this.padding,
"pkt-card--border-on-hover": this.borderOnHover
}, s = ((o = this.ariaLabel) == null ? void 0 : o.trim()) || (this.heading ? `${this.heading} lenkekort` : "lenkekort"), p = ((n = this.ariaLabel) == null ? void 0 : n.trim()) || (this.heading ? this.heading : "kort");
return t`
<article
class=${g(r)}
aria-label=${c(this.clickCardLink ? s : p)}
>
${this.renderImage()}
<div class="pkt-card__wrapper">
${this.tagPosition === "top" ? this.renderTags() : d}
${this.renderHeader()}
${this.renderSlot()}
${this.tagPosition === "bottom" ? this.renderTags() : d}
${this.renderMetadata()}
</div>
</article>
`;
}
// Render methods for different parts of the card
renderImage() {
const r = {
"pkt-card__image": !0,
[`pkt-card__image-${this.imageShape}`]: this.imageShape
};
return t`
${this.image.src && t`
<div class=${g(r)}>
<img src=${this.image.src} alt=${this.image.alt || ""} />
</div>
`}
`;
}
// Do not render heading if link is present, render link heading instead
// Combine the rendering for headings into a renderHeader method
renderHeading() {
return t`
${this.heading && !this.clickCardLink ? t`
<pkt-heading
class="pkt-card__heading"
.level=${this.headinglevel || 3}
size="medium"
nospacing
>
${this.heading}
</pkt-heading>
` : d}
`;
}
renderLinkHeading() {
return t`
${this.clickCardLink ? t`
<pkt-heading
class="pkt-card__link-heading pkt-card__heading"
.level=${this.headinglevel || 3}
size="medium"
nospacing
>
<a
class="pkt-card__link"
href=${this.clickCardLink}
target=${this.openLinkInNewTab ? "_blank" : "_self"}
>${this.heading}</a
>
</pkt-heading>
` : d}
`;
}
renderSubheading() {
return t`
${this.subheading ? t` <p class="pkt-card__subheading ">${this.subheading}</p> ` : d}
`;
}
// Render header
// prettier-ignore
renderHeader() {
const r = !!this.heading || !!this.subheading;
return t`
${r ? t`
<header class="pkt-card__header">
${this.renderHeading()}
${this.renderLinkHeading()}
${this.renderSubheading()}
</header>
` : d}
`;
}
renderTags() {
const r = {
"pkt-card__tags": !0,
[`pkt-card__tags-${this.tagPosition}`]: this.tagPosition
};
return t`
${this.tags.length > 0 ? t`
<div
class=${g(r)}
role="list"
aria-label=${this.tags.length > 1 ? "merkelapper" : "merkelapp"}
>
${this.tags.map(
(s) => t`
<pkt-tag
role="listitem"
textStyle="normal-text"
size="medium"
skin=${c(s.skin)}
iconName=${c(s.iconName)}
>
${s.text}
</pkt-tag>
`
)}
</div>
` : d}
`;
}
renderSlot() {
return t`
${this.defaultSlot && t`<section class="pkt-card__content" ${_(this.defaultSlot)}></section>`}
`;
}
renderMetadata() {
return t`
${this.metaLead || this.metaTrail ? t`
<footer class="pkt-card__metadata">
${this.metaLead ? t`<span class="pkt-card__metadata-lead">${this.metaLead}</span>` : d}
${this.metaTrail ? t`<span class="pkt-card__metadata-trail">${this.metaTrail}</span>` : d}
</footer>
` : d}
`;
}
};
a([
i({ type: String })
], e.prototype, "ariaLabel", 2);
a([
i({ type: String })
], e.prototype, "metaLead", 2);
a([
i({ type: Boolean })
], e.prototype, "borderOnHover", 2);
a([
i({ type: String, reflect: !0 })
], e.prototype, "clickCardLink", 2);
a([
i({ type: String })
], e.prototype, "metaTrail", 2);
a([
i({ type: String })
], e.prototype, "layout", 2);
a([
i({ type: String })
], e.prototype, "heading", 2);
a([
i({ type: Number })
], e.prototype, "headinglevel", 2);
a([
i({ type: Object })
], e.prototype, "image", 2);
a([
i({ type: String })
], e.prototype, "imageShape", 2);
a([
i({ type: Boolean })
], e.prototype, "openLinkInNewTab", 2);
a([
i({ type: String })
], e.prototype, "padding", 2);
a([
i({ type: String })
], e.prototype, "skin", 2);
a([
i({ type: String })
], e.prototype, "subheading", 2);
a([
i({ type: String })
], e.prototype, "tagPosition", 2);
a([
i({ type: Array })
], e.prototype, "tags", 2);
e = a([
u("pkt-card")
], e);
export {
e as P
};