@oslokommune/punkt-elements
Version:
Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo
87 lines (86 loc) • 3.34 kB
JavaScript
import { c as e, d as t, l as n, r, s as i, t as a, u as o } from "./element-cZ85T_aa.js";
import { n as s, r as c, t as l } from "./directive-3THFsVew.js";
//#region ../../node_modules/lit-html/directives/unsafe-html.js
var u = class extends s {
constructor(e) {
if (super(e), this.it = n, e.type !== c.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
}
render(e) {
if (e === n || e == null) return this._t = void 0, this.it = e;
if (e === o) return e;
if (typeof e != "string") throw Error(this.constructor.directiveName + "() called with a non-string value");
if (e === this.it) return this._t;
this.it = e;
let t = [e];
return t.raw = t, this._t = {
_$litType$: this.constructor.resultType,
strings: t,
values: []
};
}
};
u.directiveName = "unsafeHTML", u.resultType = 1;
var d = l(u), f = class extends u {};
f.directiveName = "unsafeSVG", f.resultType = 2;
var p = l(f), m = "https://punkt-cdn.oslo.kommune.no/latest/icons/";
typeof window < "u" && (window.pktFetch = window.pktFetch === void 0 ? fetch : window.pktFetch, window.pktIconPath = window.pktIconPath || m);
var h = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"></svg>", g = {}, _ = 2, v = 1500, y = typeof Storage < "u" && typeof sessionStorage < "u", b = (e) => window.pktFetch(e).then((t) => {
if (!t.ok) throw Error("Missing icon: " + e);
return t.text();
}), x = async (e, t = _) => {
try {
return await b(e);
} catch {
return t > 0 ? (await new Promise((e) => setTimeout(e, v)), x(e, t - 1)) : (console.error("Failed to fetch icon: " + e), h);
}
}, S = async (e, t) => {
let n = t + e + ".svg";
return y && sessionStorage.getItem(n) ? sessionStorage.getItem(n) : n in g ? g[n] : typeof window < "u" && typeof window.pktFetch == "function" ? (g[n] = x(n).then((e) => (e !== h && y && sessionStorage.setItem(n, e), delete g[n], e)), g[n]) : h;
}, C = class extends a {
constructor(...e) {
super(...e), this.path = typeof window < "u" ? window.pktIconPath : m, this.name = "", this.icon = p(h), this._updatedProps = [];
}
connectedCallback() {
super.connectedCallback(), this.classList.add("pkt-icon");
}
async attributeChangedCallback(e, t, n) {
super.attributeChangedCallback(e, t, n), (e === "name" || e === "path") && this.getIcon(this.name);
}
async updated(e) {
super.updated(e), (e.has("name") || e.has("path")) && this.getIcon(this.name);
}
async getIcon(e = "") {
if (this._updatedProps.length > 0) {
this.path ||= typeof window < "u" ? window.pktIconPath : m;
try {
this.icon = p(await S(this.name || "", this.path));
} catch {
this.icon = p(h);
}
this._updatedProps = [];
} else this._updatedProps.includes(e) || this._updatedProps.push(e);
}
render() {
return t`${this.name && this.icon}`;
}
};
r([i({
type: String,
reflect: !1
})], C.prototype, "path", void 0), r([i({
type: String,
reflect: !0
})], C.prototype, "name", void 0), r([i({ type: SVGElement })], C.prototype, "icon", void 0), r([i({
type: Array,
noAccessor: !0
})], C.prototype, "_updatedProps", void 0);
try {
e("pkt-icon")(C);
} catch {
console.warn("Forsøker å definere <pkt-icon>, men den er allerede definert");
}
//#endregion
//#region src/components/icon/index.ts
var w = C;
//#endregion
export { C as n, d as r, w as t };