@oslokommune/punkt-elements
Version:
Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo
340 lines (339 loc) • 10.6 kB
JavaScript
import { c as e, d as t, l as n, r, s as i } from "./element-cZ85T_aa.js";
import { t as a } from "./class-map-C8HuhNzZ.js";
import { n as o, t as s } from "./element-with-slot-4J2o3SeU.js";
import "./icon-Co72KtgF.js";
import { t as c } from "./if-defined-Cjj8qN-Z.js";
import "./tag-hl59gziI.js";
import "./heading-BxvE80bb.js";
var l = {
name: "pkt-card",
react: "PktCard",
"css-class": "pkt-card",
isElement: !0,
isPureReact: !0,
"dark-mode": !0,
props: {
heading: {
type: "string",
name: "Overskrift",
description: "Tittel på card",
category: "contents"
},
headingLevel: {
type: [
1,
2,
3,
4,
5,
6
],
name: "Overskriftsnivå",
description: "Nivået på headingen. Brukes for tilgjengelighet.",
default: 3,
category: "accessibility"
},
subheading: {
type: "string",
name: "Undertittel",
description: "Undertittel på card",
category: "contents"
},
layout: {
type: ["vertical", "horizontal"],
name: "Layout",
description: "Horisontal eller vertikal layout. Ved horisontal layout vil bildet være plassert til venstre for teksten på desktop, og over teksten på mobil.",
default: "vertical",
category: "ui"
},
skin: {
type: [
"outlined",
"outlined-beige",
"gray",
"blue",
"beige",
"green"
],
name: "Utseende",
description: "Fargen på card. Velg mellom outlined, outlined-beige, gray, blue, beige og green. Ved padding=none er det ikke mulighet for outlined-skin. Card med kombinasjonen av propsene padding=none + layout=vertical vil alltid være transparante.",
default: "outlined",
category: "ui"
},
padding: {
type: ["none", "default"],
name: "Padding",
description: "Padding rundt card. Ved \"none\" strekker innholdet i card seg ut til kantene, og dette er derfor ikke mulig å kombinere med outlined skin.",
default: "default",
category: "ui"
},
metaLead: {
type: "string",
name: "Forfatter eller annen metadata",
description: "Undertekst med fet skriftvekt",
default: !1,
category: "contents"
},
metaTrail: {
type: "string",
name: "Dato eller annen metadata",
description: "Undertekst med normal skriftvekt",
default: !1,
category: "contents"
},
tagPosition: {
type: ["top", "bottom"],
name: "Tagplassering",
description: "Plassering av tags i card",
default: "top",
category: "ui"
},
clickCardLink: {
type: "string",
name: "Lenke for klikkbart card",
description: "Href sendes inn som streng for å gjøre card klikkbart. Ved bruk MÅ heading sendes inn da denne vil brukes som lenketekst i klikkbart card.",
category: "contents"
},
openLinkInNewTab: {
type: "boolean",
name: "Åpne i ny fane",
description: "Velg denne dersom du ønsker at lenken i card skal åpnes i ny fane.",
default: !1,
category: "tech"
},
borderOnHover: {
type: "boolean",
name: "Hover border for klikkbart card",
description: "Vi anbefaler hoverborder på klikkbart card. Kan slås av ved behov.",
default: !0,
category: "ui"
},
image: {
type: "object",
name: "Bilde",
description: "Bildet på card. Tar inn et objekt av typen {src: string, alt: string}.",
properties: {
src: {
type: "string",
description: "Stien til bildet",
required: !0
},
alt: {
type: "string",
description: "Tekst til skjermleser. Skal kun sendes inn for bilder som ikke er dekorative",
required: !1
}
},
category: "contents"
},
imageShape: {
type: ["square", "round"],
name: "Bildeform",
description: "Valg for om bildet skal ha rektangulær eller rund form.",
default: "square",
category: "contents"
},
tags: {
type: "array",
description: "Liste av tags på card. Tar inn et array med objekter med følgende stringproperties: skin, iconName, ariaLabel, text",
name: "Tags",
items: {
type: "object",
name: "Tag",
properties: {
skin: {
type: [
"blue",
"green",
"red",
"yellow"
],
description: "Farge på tag"
},
iconName: {
type: "icon",
description: "Id på ikonet du ønsker å bruke til tag"
},
ariaLabel: {
type: "string",
description: "Tekst for aria-label"
},
text: {
type: "string",
description: "Tekst på tag",
required: !0
}
}
},
category: "contents"
},
ariaLabel: {
type: "string",
name: "Aria-label for card",
description: "Tekst til skjermleser for aria-label på card. Settes automatisk til headingen, eller subheadingen der heading ikke eksisterer. Ved bruk av klikkbart card må heading alltid sendes inn da denne brukes som lenketekst.",
category: "accessibility"
}
},
slots: { default: { description: "Innholdet i card" } }
}, u = class extends s {
constructor(...e) {
super(...e), this.ariaLabel = "", this.metaLead = null, this.borderOnHover = !0, this.clickCardLink = null, this.metaTrail = null, this.layout = l.props.layout.default, this.heading = "", this.headinglevel = 3, this.image = {
src: "",
alt: ""
}, this.imageShape = "square", this.openLinkInNewTab = !1, this.padding = l.props.padding.default, this.skin = l.props.skin.default, this.subheading = "", this.tagPosition = "top", this.tags = [];
}
connectedCallback() {
super.connectedCallback();
}
render() {
let e = {
"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
}, r = this.ariaLabel?.trim() || (this.heading ? `${this.heading} lenkekort` : "lenkekort"), i = this.ariaLabel?.trim() || (this.heading ? this.heading : "kort");
return t`
<article
class=${a(e)}
aria-label=${c(this.clickCardLink ? r : i)}
>
${this.renderImage()}
<div class="pkt-card__wrapper">
${this.tagPosition === "top" ? this.renderTags() : n}
${this.renderHeader()}
${this.renderSlot()}
${this.tagPosition === "bottom" ? this.renderTags() : n}
${this.renderMetadata()}
</div>
</article>
`;
}
renderImage() {
let e = {
"pkt-card__image": !0,
[`pkt-card__image-${this.imageShape}`]: this.imageShape
};
return t`
${this.image.src && t`
<div class=${a(e)}>
<img src=${this.image.src} alt=${this.image.alt || ""} />
</div>
`}
`;
}
renderHeading() {
return t`
${this.heading && !this.clickCardLink ? t`
<pkt-heading
class="pkt-card__heading"
.level=${this.headinglevel || 3}
size="medium"
nospacing
weight="regular"
>
${this.heading}
</pkt-heading>
` : n}
`;
}
renderLinkHeading() {
return t`
${this.clickCardLink ? t`
<pkt-heading
class="pkt-card__link-heading pkt-card__heading"
.level=${this.headinglevel || 3}
size="medium"
weight="regular"
nospacing
>
<a
class="pkt-card__link"
href=${this.clickCardLink}
target=${this.openLinkInNewTab ? "_blank" : "_self"}
>${this.heading}</a
>
</pkt-heading>
` : n}
`;
}
renderSubheading() {
return t`
${this.subheading ? t` <p class="pkt-card__subheading ">${this.subheading}</p> ` : n}
`;
}
renderHeader() {
return t`
${this.heading || this.subheading ? t`
<header class="pkt-card__header">
${this.renderHeading()}
${this.renderLinkHeading()}
${this.renderSubheading()}
</header>
` : n}
`;
}
renderTags() {
let e = {
"pkt-card__tags": !0,
[`pkt-card__tags-${this.tagPosition}`]: this.tagPosition
};
return t`
${this.tags.length > 0 ? t`
<div
class=${a(e)}
role="list"
aria-label=${this.tags.length > 1 ? "merkelapper" : "merkelapp"}
>
${this.tags.map((e) => t`
<pkt-tag
role="listitem"
textStyle="normal-text"
size="medium"
skin=${c(e.skin)}
iconName=${c(e.iconName)}
>
<span>${e.text}</span>
</pkt-tag>
`)}
</div>
` : n}
`;
}
renderSlot() {
return t`<section class="pkt-card__content">${o(this)}</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>` : n}
${this.metaTrail ? t`<span class="pkt-card__metadata-trail">${this.metaTrail}</span>` : n}
</footer>
` : n}
`;
}
};
r([i({ type: String })], u.prototype, "ariaLabel", void 0), r([i({ type: String })], u.prototype, "metaLead", void 0), r([i({ type: Boolean })], u.prototype, "borderOnHover", void 0), r([i({
type: String,
reflect: !0
})], u.prototype, "clickCardLink", void 0), r([i({ type: String })], u.prototype, "metaTrail", void 0), r([i({ type: String })], u.prototype, "layout", void 0), r([i({ type: String })], u.prototype, "heading", void 0), r([i({ type: Number })], u.prototype, "headinglevel", void 0), r([i({ type: Object })], u.prototype, "image", void 0), r([i({ type: String })], u.prototype, "imageShape", void 0), r([i({ type: Boolean })], u.prototype, "openLinkInNewTab", void 0), r([i({ type: String })], u.prototype, "padding", void 0), r([i({
type: String,
converter: {
fromAttribute: (e) => {
let t = l.props.skin.type;
return e && t.includes(e) ? e : (e && !t.includes(e) && console.warn(`Invalid skin value "${e}". Using default skin "${l.props.skin.default}".`), l.props.skin.default);
},
toAttribute: (e) => e
}
})], u.prototype, "skin", void 0), r([i({ type: String })], u.prototype, "subheading", void 0), r([i({ type: String })], u.prototype, "tagPosition", void 0), r([i({ type: Array })], u.prototype, "tags", void 0);
try {
e("pkt-card")(u);
} catch {
console.warn("Forsøker å definere <pkt-card>, men den er allerede definert");
}
//#endregion
//#region src/components/card/index.ts
var d = u;
//#endregion
export { u as n, d as t };