@oslokommune/punkt-elements
Version:
Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo
90 lines (89 loc) • 2.35 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";
var c = {
name: "pkt-link",
react: "PktLink",
"css-class": "pkt-link",
"dark-mode": !0,
isElement: !0,
props: {
href: {
name: "URL",
description: "URL til lenken",
type: "string",
default: "#",
category: "contents"
},
target: {
name: "Mål",
description: "Mål for lenken",
type: [
"_blank",
"_self",
"_parent",
"_top"
],
default: "_self",
category: "tech"
},
iconName: {
name: "Ikon",
description: "Ikon som skal vises ved siden av lenketeksten",
type: "icon",
category: "ui"
},
iconPosition: {
name: "Ikonposisjon",
description: "Posisjonen til ikonet i forhold til lenketeksten",
type: ["left", "right"],
category: "ui"
}
},
slots: { default: { description: "Innholdet i lenken" } }
}, l = class extends s {
constructor(...e) {
super(...e), this.href = c.props.href.default, this.iconName = void 0, this.iconPosition = void 0, this.external = !1, this.target = c.props.target.default;
}
render() {
return t`<a
class=${a({
"pkt-link": !0,
"pkt-link--icon-left": !!this.iconName && this.iconPosition === "left" || !!(this.iconName && !this.iconPosition),
"pkt-link--icon-right": !!this.iconName && this.iconPosition === "right",
"pkt-link--external": this.external
})}
href=${this.href}
.target=${this.target}
.rel=${this.external ? "noopener noreferrer" : n}
>${this.iconName ? t`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>` : ""} <span>${o(this)}</span></a
>`;
}
};
r([i({
type: String,
reflect: !0
})], l.prototype, "href", void 0), r([i({
type: String,
reflect: !0
})], l.prototype, "iconName", void 0), r([i({
type: String,
reflect: !0
})], l.prototype, "iconPosition", void 0), r([i({
type: Boolean,
reflect: !0
})], l.prototype, "external", void 0), r([i({
type: String,
reflect: !0
})], l.prototype, "target", void 0);
try {
e("pkt-link")(l);
} catch {
console.warn("Forsøker å definere <pkt-link>, men den er allerede definert");
}
//#endregion
//#region src/components/link/index.ts
var u = l;
//#endregion
export { l as n, u as t };