@oslokommune/punkt-elements
Version:
Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo
94 lines (93 loc) • 3.84 kB
JavaScript
function c(e, s) {
return s.some((t) => t.value === e);
}
function r(e) {
return e.classList && (e.classList.contains("_dialog_overlay") || e.classList.contains("backdrop")) ? !0 : typeof e.hasAttribute == "function" && e.hasAttribute("data-skip");
}
function a(e) {
return e.nodeName === "OPTION" || e.nodeName === "DATA";
}
function p(e, s) {
return e.nodeType === Node.ELEMENT_NODE && !c(e, s);
}
function d(e) {
var s;
return e.nodeType === Node.TEXT_NODE && ((s = e.nodeValue) == null ? void 0 : s.trim()) !== "";
}
class N {
constructor(s, ...t) {
this.nodes = [], this.filledSlots = /* @__PURE__ */ new Set(), this.skipOptions = !1, this.updatingSlots = !1, this.host = s, this.host.addController(this), this.slots = t, this.nodes = [], this.observer = new MutationObserver((l) => this.handleMutations(l)), this.contentObserver = new MutationObserver((l) => this.handleSlotMutations(l));
}
hostConnected() {
this.updateNodes(), this.observer.observe(this.host, { childList: !0 }), this.contentObserver.observe(this.host, { childList: !0, subtree: !0 });
}
hostDisconnected() {
this.observer.disconnect(), this.contentObserver.disconnect();
}
hostUpdated() {
this.updateSlots();
}
// ********* UPDATE NODES *********
updateNodes() {
this.nodes = [], Array.from(this.host.childNodes).forEach((t) => {
r(t) || a(t) && this.skipOptions || (!c(t, this.slots) || d(t)) && this.nodes.push(t);
});
}
// ********* UPDATE SLOTS *********
updateSlots() {
if (this.updatingSlots) return;
this.updatingSlots = !0;
const s = /* @__PURE__ */ new Set();
this.slots.forEach((t) => {
if (!t.value) return;
const l = t.value.getAttribute("name");
Array.from(t.value.childNodes).some((o) => {
var u, f;
if (o.nodeType === Node.COMMENT_NODE) return !1;
if (o.nodeType === Node.TEXT_NODE) return !!((u = o.textContent) != null && u.trim());
if (o.nodeType === Node.ELEMENT_NODE) {
if (r(o)) return !1;
if ((f = o.textContent) != null && f.trim()) return !0;
}
return !1;
}) && s.add(l);
const n = this.nodes.flatMap(
(o) => d(o) || o.getAttribute && o.getAttribute("slot") == l && !r(o) ? o : []
).filter(
(o) => t.value && !t.value.contains(o) && !o.contains(t.value)
);
if (n.length > 0)
if (typeof t.value.replaceChildren != "function") {
for (; t.value.firstChild; )
t.value.removeChild(t.value.firstChild);
t.value.append(...n);
} else
t.value.replaceChildren(...n);
}), (this.filledSlots.size !== s.size || ![...this.filledSlots].every((t) => s.has(t))) && (this.filledSlots = s, typeof this.host.updateSlots == "function" && this.host.updateSlots(this.filledSlots)), this.updatingSlots = !1;
}
// ********* HANDLE MUTATIONS *********
handleMutations(s) {
let t = !1;
s.forEach((l) => {
l.type === "childList" && (l.addedNodes.forEach((i) => {
r(i) || a(i) && this.skipOptions || (p(i, this.slots) || d(i)) && (this.nodes.push(i), t = !0);
}), l.removedNodes.forEach((i) => {
r(i) || a(i) && this.skipOptions || (this.nodes = this.nodes.filter((h) => h !== i), t = !0);
}));
}), t && this.updateSlots();
}
handleSlotMutations(s) {
let t = !1;
s.forEach((l) => {
const i = l.target.parentElement;
if (i != null && i.hasAttribute("slot")) {
const h = i.getAttribute("slot"), n = i.hasChildNodes();
n && !this.filledSlots.has(h) ? (this.filledSlots.add(h), t = !0) : !n && this.filledSlots.has(h) && (this.filledSlots.delete(h), t = !0);
}
}), t && typeof this.host.updateSlots == "function" && this.host.updateSlots(this.filledSlots);
}
}
export {
N as P,
a as i
};