lintje 0.1.1 → 0.2.0

package/dist-elements/tag/data-table.js

@@ -1,12 +1,12 @@
-import { $ as e, Bt as t, G as n, Gt as r, H as i, Ht as a, Kt as o, Lt as s, S as c, U as l, Z as u, a as d, et as f, k as p, o as m, t as h, w as g } from "../chunks/base-rBLTcEIv.js";
-import { n as _, r as v } from "../chunks/focus-trap-w3vCamJ6.js";
+import { $ as e, Bt as t, G as n, Gt as r, H as i, Ht as a, Lt as o, S as s, U as c, Z as l, c as u, d, et as f, k as p, qt as m, s as h, w as g } from "../chunks/base-Bg-IFOPG.js";
+import { n as _, r as v } from "../chunks/focus-trap-9BnE-xWv.js";
 import "./menu-button.js";
-import { t as y } from "../chunks/input-jQVTln7H.js";
+import { t as y } from "../chunks/input-BtuNFSWk.js";
 import { t as b } from "./announcement.js";
 import "./drawer.js";
 import "./description-list.js";
-import { u as x } from "../chunks/date-format-B5DPGjAw.js";
-import { a as S, c as C, d as w, o as T, r as E, s as ee, t as te } from "../chunks/download-lFooAfD1.js";
+import { d as x } from "../chunks/date-format-mHtZyBys.js";
+import { a as S, c as C, d as w, o as T, r as E, s as ee, t as te } from "../chunks/download-y528pIHP.js";
 import "./pagination.js";
 import "./sortable-list.js";
 //#region src/components/tables/data-table/data-table.css?inline
@@ -140,48 +140,48 @@ var ie = 0, k = class {
 		let r = n.querySelector(".lintje-data-table__editor");
 		t.target === "editor" && r ? (r.focus(), r instanceof HTMLInputElement && r.select()) : n.focus();
 	}
-	content(e, t, n, i, a, s) {
-		let c = this.mode(e, n);
-		if (c.kind === "busy") return o`<span class="lintje-data-table__busy"
-        ><lintje-spinner size="16"></lintje-spinner><span>${c.value}</span></span
+	content(e, t, n, i, a, o) {
+		let s = this.mode(e, n);
+		if (s.kind === "busy") return m`<span class="lintje-data-table__busy"
+        ><lintje-spinner size="16"></lintje-spinner><span>${s.value}</span></span
       >`;
-		if (c.kind === "rest") return o`${i}${f("functioneel-bewerken", {
+		if (s.kind === "rest") return m`${i}${f("functioneel-bewerken", {
 			size: 14,
 			className: "lintje-data-table__edit-icon"
 		})}`;
-		let l = c.error ? `${this.#t}-${s.copy}-error-${s.ids.indexOf(e.id)}-${e.column}` : null, d = (t) => {
+		let c = s.error ? `${this.#t}-${o.copy}-error-${o.ids.indexOf(e.id)}-${e.column}` : null, u = (t) => {
 			let r = t.currentTarget;
-			t.stopPropagation(), t.key === "Escape" ? (t.preventDefault(), this.cancel(e)) : t.key === "Enter" ? (t.preventDefault(), this.commit(e, r.value, n, "down", s)) : t.key === "Tab" && (t.preventDefault(), this.commit(e, r.value, n, t.shiftKey ? "previous" : "next", s));
-		}, p = (t) => {
-			!c.error && this.editing && D(this.editing) === D(e) && this.commit(e, t.currentTarget.value, n, null, s);
-		}, m = u({
+			t.stopPropagation(), t.key === "Escape" ? (t.preventDefault(), this.cancel(e)) : t.key === "Enter" ? (t.preventDefault(), this.commit(e, r.value, n, "down", o)) : t.key === "Tab" && (t.preventDefault(), this.commit(e, r.value, n, t.shiftKey ? "previous" : "next", o));
+		}, d = (t) => {
+			!s.error && this.editing && D(this.editing) === D(e) && this.commit(e, t.currentTarget.value, n, null, o);
+		}, p = l({
 			"lintje-data-table__editor": !0,
 			"focus-inset": !0,
-			"is-error": !!c.error
-		}), h = t.editor, g = h?.kind === "select" ? o`<select
-            class=${m}
+			"is-error": !!s.error
+		}), h = t.editor, g = h?.kind === "select" ? m`<select
+            class=${p}
             aria-label=${a}
-            aria-invalid=${c.error ? "true" : r}
-            aria-describedby=${l ?? r}
-            @keydown=${d}
-            @blur=${p}
+            aria-invalid=${s.error ? "true" : r}
+            aria-describedby=${c ?? r}
+            @keydown=${u}
+            @blur=${d}
           >
-            ${(h.options ?? []).map((e) => o`<option value=${e.value} ?selected=${e.value === c.value}>
+            ${(h.options ?? []).map((e) => m`<option value=${e.value} ?selected=${e.value === s.value}>
                   ${e.label ?? e.value}
                 </option>`)}
-          </select>` : o`<input
+          </select>` : m`<input
             type="text"
-            class=${m}
+            class=${p}
             inputmode=${h?.kind === "number" ? "decimal" : r}
             placeholder=${h?.kind === "date" ? "dd-mm-jjjj" : r}
             aria-label=${a}
-            aria-invalid=${c.error ? "true" : r}
-            aria-describedby=${l ?? r}
-            .value=${c.value}
-            @keydown=${d}
-            @blur=${p}
+            aria-invalid=${s.error ? "true" : r}
+            aria-describedby=${c ?? r}
+            .value=${s.value}
+            @keydown=${u}
+            @blur=${d}
           />`;
-		return o`${g}${c.error ? o`<span id=${l ?? r} class="lintje-data-table__edit-error">${c.error}</span>` : r}`;
+		return m`${g}${s.error ? m`<span id=${c ?? r} class="lintje-data-table__edit-error">${s.error}</span>` : r}`;
 	}
 	cellClasses(e, t) {
 		let n = this.mode(e, t);
@@ -195,7 +195,7 @@ var ie = 0, k = class {
 		t.target === t.currentTarget && (t.key === "Enter" || t.key === "F2") && (t.preventDefault(), t.stopPropagation(), this.open(e, t.currentTarget));
 	}
 	renderStatus() {
-		return o`<span id=${this.hintId} class="visually-hidden">Bewerkbaar met Enter of F2</span
+		return m`<span id=${this.hintId} class="visually-hidden">Bewerkbaar met Enter of F2</span
       ><span class="visually-hidden" role="status">${this.message}</span>`;
 	}
 };
@@ -213,7 +213,7 @@ function ae(e, t) {
 	return [...e, ...t.filter((e) => !n.has(e))];
 }
 function j(e, t, n) {
-	return o`<lintje-menu-button
+	return m`<lintje-menu-button
     icon
     variant="tertiary"
     placement="bottom-end"
@@ -225,13 +225,13 @@ function j(e, t, n) {
   ></lintje-menu-button>`;
 }
 function oe(e, t, n, i, a) {
-	let s = n ? e.length > 0 ? o`<lintje-menu-button
+	let o = n ? e.length > 0 ? m`<lintje-menu-button
           label="Acties"
           .items=${e}
           @lintje-action=${(e) => {
 		e.stopPropagation(), i(e.detail);
 	}}
-        ></lintje-menu-button>` : r : e.map((e) => o`<lintje-button
+        ></lintje-menu-button>` : r : e.map((e) => m`<lintje-button
             variant=${e.danger ? "danger-secondary" : "secondary"}
             size="compact"
             icon=${e.icon ?? r}
@@ -239,14 +239,14 @@ function oe(e, t, n, i, a) {
             @click=${() => i(e.value)}
             >${e.label}</lintje-button
           >`);
-	return o`<div
+	return m`<div
     class="lintje-data-table__selection ${n ? "lintje-data-table__selection--mobile" : ""}"
     role="toolbar"
     aria-label="Acties op de selectie"
   >
     <!-- The table's own status region reads the count: one inserted with its bar would not be. -->
     <strong class="lintje-data-table__selection-count">${t} geselecteerd</strong>
-    ${s}
+    ${o}
     <lintje-button
       class="lintje-data-table__selection-clear"
       variant="tertiary"
@@ -306,9 +306,9 @@ function L(e, t) {
 }
 function R(e, t, n, r) {
 	let i = M(t);
-	return o`<button
+	return m`<button
       type="button"
-      class=${u({
+      class=${l({
 		"lintje-data-table__funnel": !0,
 		"is-filtered": i
 	})}
@@ -322,10 +322,10 @@ function R(e, t, n, r) {
     </button>`;
 }
 function z() {
-	return o`<span class="lintje-data-table__filter-dot" role="img" aria-label="Gefilterd"></span>`;
+	return m`<span class="lintje-data-table__filter-dot" role="img" aria-label="Gefilterd"></span>`;
 }
 function B(e, t, n) {
-	if (e.filter?.kind === "text") return o`<input
+	if (e.filter?.kind === "text") return m`<input
       type="search"
       class="lintje-data-table__filter-search"
       aria-label=${`Zoek in ${e.header.toLocaleLowerCase("nl")}`}
@@ -333,8 +333,8 @@ function B(e, t, n) {
       @input=${(e) => n(e.target.value)}
     />`;
 	let i = new Set(Array.isArray(t) ? t : []);
-	return o`<div class="lintje-data-table__filter-options">
-    ${(e.filter?.options ?? []).map((e) => o`<label class="lintje-choice lintje-data-table__filter-option">
+	return m`<div class="lintje-data-table__filter-options">
+    ${(e.filter?.options ?? []).map((e) => m`<label class="lintje-choice lintje-data-table__filter-option">
         <input
           type="checkbox"
           class="lintje-choice__input"
@@ -348,13 +348,13 @@ function B(e, t, n) {
           ><span class="lintje-choice__mark">✓</span></span
         >
         <span class="lintje-choice__label">${e.label ?? e.value}</span>
-        ${e.count == null ? r : o`<span class="lintje-data-table__filter-count">${e.count}</span>`}
+        ${e.count == null ? r : m`<span class="lintje-data-table__filter-count">${e.count}</span>`}
       </label>`)}
   </div>`;
 }
 function V(e) {
 	let { column: t } = e, n = L(e.anchor, e.onLeave);
-	return o`<lintje-popover
+	return m`<lintje-popover
     open
     panel-role="dialog"
     label=${P(t, null)}
@@ -376,14 +376,14 @@ function V(e) {
   </lintje-popover>`;
 }
 function H(e) {
-	return o`<lintje-drawer
+	return m`<lintje-drawer
     open
     heading="Filters"
     @lintje-close=${(t) => {
 		t.stopPropagation(), e.onClose();
 	}}
   >
-    ${e.columns.map((t) => o`<section class="lintje-data-table__filter-section">
+    ${e.columns.map((t) => m`<section class="lintje-data-table__filter-section">
         <div class="lintje-data-table__filter-name">${t.header}</div>
         ${B(t, e.draft[t.key], (n) => e.onDraft(t.key, n))}
       </section>`)}
@@ -393,11 +393,11 @@ function H(e) {
 }
 function U(e) {
 	let t = e.columns.filter((t) => M(e.values[t.key])), n = t.length > 0 && e.total != null ? `${e.shown} van ${e.total} rijen` : "", i = t.length === 0;
-	return o`<div
+	return m`<div
     class="lintje-data-table__toolbar ${i ? "lintje-data-table__toolbar--quiet" : ""}"
   >
     <div class="lintje-data-table__chips">
-      ${e.columns.length > 0 ? o`<lintje-button
+      ${e.columns.length > 0 ? m`<lintje-button
               class="lintje-data-table__sheet-button"
               variant="secondary"
               size="compact"
@@ -408,7 +408,7 @@ function U(e) {
       ${e.sortMenu ?? r}
       ${t.map((t) => {
 		let n = e.values[t.key];
-		return o`<span class="lintje-data-table__chip"
+		return m`<span class="lintje-data-table__chip"
           >${ce(t, n)}<button
             type="button"
             class="lintje-data-table__chip-clear"
@@ -424,7 +424,7 @@ function U(e) {
   </div>`;
 }
 function W(e, t) {
-	return o`<button
+	return m`<button
     type="button"
     class="lintje-data-table__chooser-button"
     aria-label="Kolommen kiezen"
@@ -438,7 +438,7 @@ function W(e, t) {
 }
 function le(e) {
 	let t = L(e.anchor, e.onLeave);
-	return o`<lintje-popover
+	return m`<lintje-popover
     open
     panel-role="dialog"
     label="Kolommen kiezen"
@@ -496,7 +496,7 @@ function q(e, t) {
 function J(e, t) {
 	if (t == null) return null;
 	let n;
-	return n = typeof t == "string" || e.format === "text" ? String(t) : e.format === "change" || e.format === "change-compact" ? `${t > 0 ? "▲" : t < 0 ? "▼" : "●"} ${t > 0 ? "+" : ""}${d(t, e.decimals ?? 0)}%` : e.format === "percent" ? m(t, e.decimals ?? 0) : e.format === "decimal" ? d(t, e.decimals ?? 1) : d(t, e.decimals ?? 0), e.unit ? `${n} ${e.unit}` : n;
+	return n = typeof t == "string" || e.format === "text" ? String(t) : e.format === "change" || e.format === "change-compact" ? `${t > 0 ? "▲" : t < 0 ? "▼" : "●"} ${t > 0 ? "+" : ""}${h(t, e.decimals ?? 0)}%` : e.format === "percent" ? u(t, e.decimals ?? 0) : e.format === "decimal" ? h(t, e.decimals ?? 1) : h(t, e.decimals ?? 0), e.unit ? `${n} ${e.unit}` : n;
 }
 function Y(e, t) {
 	let n = e.threshold;
@@ -518,7 +518,7 @@ function pe(e, t) {
 	let n = e.status?.tones?.[t] ?? t;
 	return fe.has(n) ? n : null;
 }
-var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = o`<span aria-hidden="true" class="lintje-data-table__muted">—</span
+var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = m`<span aria-hidden="true" class="lintje-data-table__muted">—</span
   ><span class="visually-hidden">geen gegevens</span>`, Q = class {
 	#e;
 	#t;
@@ -538,7 +538,7 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = o`<span aria-hidden="tr
 	}
 }, $ = class extends w {
 	constructor(...e) {
-		super(...e), this.bare = !1, this.plain = !1, this.sort = null, this.checkedIds = [], this.page = 0, this.mobilePage = 0, this.#e = new s(this), this.#t = new Q(() => this.requestUpdate()), this.#n = new Q(() => this.requestUpdate()), this.#r = JSON.stringify(null), this.#i = JSON.stringify([]), this.filterValues = {}, this.filterDraft = {}, this.columnOrder = null, this.hiddenKeys = [], this.panel = null, this.mobileOpen = [], this.liveMessage = "", this.#a = 0, this.#o = !1, this.#s = new k({
+		super(...e), this.bare = !1, this.plain = !1, this.sort = null, this.checkedIds = [], this.page = 0, this.mobilePage = 0, this.#e = new o(this), this.#t = new Q(() => this.requestUpdate()), this.#n = new Q(() => this.requestUpdate()), this.#r = JSON.stringify(null), this.#i = JSON.stringify([]), this.filterValues = {}, this.filterDraft = {}, this.columnOrder = null, this.hiddenKeys = [], this.panel = null, this.mobileOpen = [], this.liveMessage = "", this.#a = 0, this.#o = !1, this.#s = new k({
 			requestUpdate: () => this.requestUpdate(),
 			editCell: (e) => this.emit("lintje-cell-edit", e)
 		}), this.#c = JSON.stringify({}), this.#l = "", this.#u = null, this.#d = null, this.#f = !1, this.#p = {
@@ -556,7 +556,7 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = o`<span aria-hidden="tr
 			p,
 			a(b),
 			a(g),
-			a(c),
+			a(s),
 			a(y),
 			E,
 			a(ne)
@@ -629,11 +629,11 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = o`<span aria-hidden="tr
 		super.updated(e), this.#s.restoreFocus(this.renderRoot), this.#_();
 	}
 	#g() {
-		if (this.#m = null, !l(this)) return;
-		let e = [...this.renderRoot.querySelectorAll(".lintje-data-table")].find(l);
+		if (this.#m = null, !c(this)) return;
+		let e = [...this.renderRoot.querySelectorAll(".lintje-data-table")].find(c);
 		if (!e) return;
 		let t = e.querySelector(":scope > .lintje-data-table__selection");
-		if (t && l(t)) {
+		if (t && c(t)) {
 			this.#m = {
 				scope: e,
 				table: null,
@@ -642,9 +642,9 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = o`<span aria-hidden="tr
 			};
 			return;
 		}
-		let n = [...e.querySelectorAll("table")].find(l), r = n ? [...n.querySelectorAll(K)] : [], i = r.findIndex(l);
+		let n = [...e.querySelectorAll("table")].find(c), r = n ? [...n.querySelectorAll(K)] : [], i = r.findIndex(c);
 		if (!n || i === -1) return;
-		let a = v(r[i]).findIndex(l);
+		let a = v(r[i]).findIndex(c);
 		this.#m = {
 			scope: e,
 			table: n,
@@ -803,7 +803,7 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = o`<span aria-hidden="tr
 		this.filterValues = n, this.page = 0, this.mobilePage = 0, this.closePanel();
 	}
 	async clearFilter(e, t) {
-		let n = l(t), r = t.closest(".lintje-data-table"), i = { ...this.filterValues };
+		let n = c(t), r = t.closest(".lintje-data-table"), i = { ...this.filterValues };
 		if (delete i[e], this.filterValues = i, this.page = 0, this.mobilePage = 0, this.#o = !0, this.emit("lintje-filter-change", {
 			column: e,
 			value: null
@@ -839,7 +839,7 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = o`<span aria-hidden="tr
 		if (this.bare) return this.table(this.#t);
 		if (this.plain) return this.content();
 		let t = (e.state ?? "ready") === "ready", n = this.#e.matches && e.mobileSubtitle ? e.mobileSubtitle : e.subtitle;
-		return o`<lintje-tile
+		return m`<lintje-tile
       id=${this.id ? `${this.id}-tile` : r}
       span=${e.span ?? r}
       heading=${e.title ?? r}
@@ -856,7 +856,7 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = o`<span aria-hidden="tr
 			e.stopPropagation(), this.csv();
 		}}
     >
-      ${e.notice ? o`<lintje-announcement slot="notice" compact .data=${e.notice}></lintje-announcement>` : r}
+      ${e.notice ? m`<lintje-announcement slot="notice" compact .data=${e.notice}></lintje-announcement>` : r}
       ${this.content()}
     </lintje-tile>
 
@@ -885,31 +885,31 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = o`<span aria-hidden="tr
 		}
 	}
 	table(e) {
-		let t = this.data, n = this.sortedRows, i = t.pageSize ?? 25, a = Math.ceil(n.length / i), s = n.slice(this.page * i, (this.page + 1) * i), c = Math.ceil(n.length / G), l = this.mobilePage * G, d = n.slice(l, l + G), f = this.#e.matches, p = e === this.#n === this.expanded;
-		return o`<div class=${u({
+		let t = this.data, n = this.sortedRows, i = t.pageSize ?? 25, a = Math.ceil(n.length / i), o = n.slice(this.page * i, (this.page + 1) * i), s = Math.ceil(n.length / G), c = this.mobilePage * G, u = n.slice(c, c + G), f = this.#e.matches, p = e === this.#n === this.expanded;
+		return m`<div class=${l({
 			"lintje-data-table": !0,
 			"is-phone": f
 		})}>
       ${this.toolbar(e)} ${f ? r : this.selectionBar(!1)}
       <!-- Desktop table: scrolls sideways when it is wider than the tile -->
       <div
-        class=${u({
+        class=${l({
 			"lintje-data-table__frame": !0,
 			"is-scrollable-start": e.start,
 			"is-scrollable-end": e.end
 		})}
       >
-        <div class="lintje-data-table__scroller" ${h(e.watch)}>
-          ${this.fullTable(s, a, i, e)}
+        <div class="lintje-data-table__scroller" ${d(e.watch)}>
+          ${this.fullTable(o, a, i, e)}
         </div>
       </div>
 
       <!-- Mobile representation: two columns (C8) -->
-      ${this.mobileTable(d, c, e === this.#n ? "modal" : "tile")}
+      ${this.mobileTable(u, s, e === this.#n ? "modal" : "tile")}
       ${a > 1 ? this.pager("full", this.page, a, i, n.length, (e) => {
 			this.page = e;
 		}) : r}
-      ${c > 1 ? this.pager("mobile", this.mobilePage, c, G, n.length, (e) => {
+      ${s > 1 ? this.pager("mobile", this.mobilePage, s, G, n.length, (e) => {
 			this.mobilePage = e;
 		}) : r}
       ${f ? this.selectionBar(!0) : r} ${this.panels(e)}
@@ -957,7 +957,7 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = o`<span aria-hidden="tr
 				checked: i.direction === "desc"
 			}
 		];
-		return o`<lintje-menu-button
+		return m`<lintje-menu-button
       class="lintje-data-table__sort-menu"
       label="Sorteren"
       .items=${a}
@@ -1036,36 +1036,36 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = o`<span aria-hidden="tr
 		}) : r;
 	}
 	fullTable(e, t, n, i) {
-		let a = this.data, s = this.shown, c = !!a.selectable, l = !!a.clickable && !c, d = this.activeSort, f = new Set(this.checkedIds), p = a.rowActions?.length ? a.rowActions : null, m = !!a.columnChooser, h = !!p || m, g = {
+		let a = this.data, o = this.shown, s = !!a.selectable, c = !!a.clickable && !s, u = this.activeSort, d = new Set(this.checkedIds), f = a.rowActions?.length ? a.rowActions : null, p = !!a.columnChooser, h = !!f || p, g = {
 			ids: e.map((e) => this.rowKey(e)),
-			columns: s,
+			columns: o,
 			offset: this.page * n,
 			copy: i === this.#n ? "modal" : "tile"
 		};
-		return o`<table class="lintje-data-table__full">
+		return m`<table class="lintje-data-table__full">
       <caption class="visually-hidden">${a.caption}</caption>
       <thead>
         <tr>
-          ${c ? o`<th
+          ${s ? m`<th
                 scope="col"
                 class="lintje-data-table__header-cell lintje-data-table__check-cell"
               >
                 ${this.headerCheck()}
               </th>` : r}
-          ${s.map((e) => {
-			let t = d.key === e.key, n = (e.align ?? (q(e, this.rows) ? "right" : "left")) === "right", a = !!e.filter && M(this.filterValues[e.key]), s = a ? z() : r, c = e.sortable === !1 ? e.filter ? o`<span class="lintje-data-table__header-label">${e.header}${s}</span>` : e.header : o`<button
+          ${o.map((e) => {
+			let t = u.key === e.key, n = (e.align ?? (q(e, this.rows) ? "right" : "left")) === "right", a = !!e.filter && M(this.filterValues[e.key]), o = a ? z() : r, s = e.sortable === !1 ? e.filter ? m`<span class="lintje-data-table__header-label">${e.header}${o}</span>` : e.header : m`<button
                     type="button"
                     class="lintje-data-table__sort-button"
                     @click=${() => this.toggleSort(e)}
                   >
-                    <span class="lintje-data-table__sort-label">${e.header}</span>${s}
+                    <span class="lintje-data-table__sort-label">${e.header}</span>${o}
                     <span class="lintje-data-table__sort-icon" aria-hidden="true"
-                      >${t ? d.direction === "asc" ? "▲" : "▼" : "▲▼"}</span
+                      >${t ? u.direction === "asc" ? "▲" : "▼" : "▲▼"}</span
                     >
                   </button>`;
-			return o`<th
+			return m`<th
               scope="col"
-              class=${u({
+              class=${l({
 				"lintje-data-table__header-cell": !0,
 				"lintje-data-table__header-cell--align-right": n,
 				"lintje-data-table__header-cell--sortable": e.sortable !== !1,
@@ -1073,20 +1073,20 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = o`<span aria-hidden="tr
 				"is-active": t,
 				"is-filtered": a
 			})}
-              aria-sort=${t ? d.direction === "asc" ? "ascending" : "descending" : "none"}
+              aria-sort=${t ? u.direction === "asc" ? "ascending" : "descending" : "none"}
             >
-              ${e.filter ? o`<span class="lintje-data-table__header-inner"
-                      >${c}${R(e, this.filterValues[e.key], this.panel?.kind === "filter" && this.panel.column === e.key, (t) => this.panel?.kind === "filter" && this.panel.column === e.key ? this.closePanel() : this.openPanel({
+              ${e.filter ? m`<span class="lintje-data-table__header-inner"
+                      >${s}${R(e, this.filterValues[e.key], this.panel?.kind === "filter" && this.panel.column === e.key, (t) => this.panel?.kind === "filter" && this.panel.column === e.key ? this.closePanel() : this.openPanel({
 				kind: "filter",
 				column: e.key,
 				edges: i
 			}, t))}</span
-                    >` : c}
+                    >` : s}
             </th>`;
 		})}
-          ${h ? o`<th scope="col" class="lintje-data-table__header-cell lintje-data-table__action-cell">
-                  ${p ? o`<span class="visually-hidden">Acties</span>` : r}
-                  ${m ? W(this.panel?.kind === "columns", (e) => this.panel?.kind === "columns" ? this.closePanel() : this.openPanel({
+          ${h ? m`<th scope="col" class="lintje-data-table__header-cell lintje-data-table__action-cell">
+                  ${f ? m`<span class="visually-hidden">Acties</span>` : r}
+                  ${p ? W(this.panel?.kind === "columns", (e) => this.panel?.kind === "columns" ? this.closePanel() : this.openPanel({
 			kind: "columns",
 			edges: i
 		}, e)) : r}
@@ -1096,99 +1096,99 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = o`<span aria-hidden="tr
       <tbody>
         ${e.map((e, t) => {
 			let n = this.rowKey(e), i = n === a.selectedId;
-			return o`<tr
-            class=${u({
+			return m`<tr
+            class=${l({
 				"lintje-data-table__row": !0,
-				"is-clickable": l,
+				"is-clickable": c,
 				"is-selected": i,
-				"is-checked": f.has(n)
+				"is-checked": d.has(n)
 			})}
-            tabindex=${l ? 0 : r}
-            aria-selected=${l ? i : r}
-            @click=${l ? () => this.emit("lintje-row-click", this.rowDetail(e)) : r}
-            @keydown=${l ? (t) => this.rowKeydown(t, e) : r}
+            tabindex=${c ? 0 : r}
+            aria-selected=${c ? i : r}
+            @click=${c ? () => this.emit("lintje-row-click", this.rowDetail(e)) : r}
+            @keydown=${c ? (t) => this.rowKeydown(t, e) : r}
           >
-            ${c ? o`<td class="lintje-data-table__cell lintje-data-table__check-cell">
-                  ${this.rowCheck(e, n, f.has(n))}
+            ${s ? m`<td class="lintje-data-table__cell lintje-data-table__check-cell">
+                  ${this.rowCheck(e, n, d.has(n))}
                 </td>` : r}
-            ${s.map((n, r) => {
-				let i = n.truncate === !0, a = i ? this.truncatedCell(n, e[n.key]) : this.cell(n, e[n.key]), s = (n.align ?? (q(n, this.rows) ? "right" : "left")) === "right";
-				return n.editor ? this.editableCell(e, t, n, r === 0, s, a, g) : r === 0 ? o`<th
+            ${o.map((n, r) => {
+				let i = n.truncate === !0, a = i ? this.truncatedCell(n, e[n.key]) : this.cell(n, e[n.key]), o = (n.align ?? (q(n, this.rows) ? "right" : "left")) === "right";
+				return n.editor ? this.editableCell(e, t, n, r === 0, o, a, g) : r === 0 ? m`<th
                     scope="row"
-                    class=${u({
+                    class=${l({
 					"lintje-data-table__cell": !0,
 					"lintje-data-table__name": !0,
 					"lintje-data-table__cell--truncate": i
 				})}
                   >
                     ${this.opener(e, a)}
-                  </th>` : o`<td
-                    class=${u({
+                  </th>` : m`<td
+                    class=${l({
 					"lintje-data-table__cell": !0,
-					"lintje-data-table__cell--align-right": s,
+					"lintje-data-table__cell--align-right": o,
 					"lintje-data-table__cell--truncate": i
 				})}
                   >
                     ${a}
                   </td>`;
 			})}
-            ${p ? o`<td
+            ${f ? m`<td
                     class="lintje-data-table__cell lintje-data-table__action-cell"
                     @click=${(e) => e.stopPropagation()}
                     @keydown=${(e) => e.stopPropagation()}
                   >
-                    ${j(p, this.rowDetail(e).label, (e) => this.emit("lintje-row-action", {
+                    ${j(f, this.rowDetail(e).label, (e) => this.emit("lintje-row-action", {
 				id: n,
 				action: e
 			}))}
-                  </td>` : m ? o`<td class="lintje-data-table__cell lintje-data-table__action-cell"></td>` : r}
+                  </td>` : p ? m`<td class="lintje-data-table__cell lintje-data-table__action-cell"></td>` : r}
           </tr>`;
 		})}
         <!-- A short last page keeps the height of a full one, so the page below doesn't jump. -->
-        ${t > 1 ? Array.from({ length: n - e.length }, () => o`<tr
+        ${t > 1 ? Array.from({ length: n - e.length }, () => m`<tr
                 class="lintje-data-table__row lintje-data-table__row--filler"
                 aria-hidden="true"
               >
                 <td
                   class="lintje-data-table__cell"
-                  colspan=${s.length + +!!c + +!!h}
+                  colspan=${o.length + +!!s + +!!h}
                 ></td>
               </tr>`) : r}
       </tbody>
     </table>`;
 	}
-	editableCell(e, t, n, i, a, s, c) {
-		let l = this.#s, d = {
+	editableCell(e, t, n, i, a, o, s) {
+		let c = this.#s, u = {
 			id: this.rowKey(e),
 			column: n.key
-		}, f = e[n.key] ?? null, p = l.mode(d, f).kind, m = u({
+		}, d = e[n.key] ?? null, f = c.mode(u, d).kind, p = l({
 			"lintje-data-table__cell": !0,
 			"lintje-data-table__name": i,
 			"lintje-data-table__cell--align-right": a,
 			"lintje-data-table__cell--truncate": n.truncate === !0,
 			"focus-inset": !0,
-			...l.cellClasses(d, f)
-		}), h = l.content(d, n, f, s, `${n.header} van rij ${c.offset + t + 1}`, c), g = (e) => {
-			l.editable(d, n) && l.cellKeydown(d, e);
+			...c.cellClasses(u, d)
+		}), h = c.content(u, n, d, o, `${n.header} van rij ${s.offset + t + 1}`, s), g = (e) => {
+			c.editable(u, n) && c.cellKeydown(u, e);
 		}, _ = (e) => {
-			p === "rest" && l.editable(d, n) && l.open(d, e.currentTarget);
-		}, v = (e) => e.stopPropagation(), y = p === "editor" ? -1 : 0, b = D(d);
-		return i ? o`<th
+			f === "rest" && c.editable(u, n) && c.open(u, e.currentTarget);
+		}, v = (e) => e.stopPropagation(), y = f === "editor" ? -1 : 0, b = D(u);
+		return i ? m`<th
           scope="row"
-          class=${m}
+          class=${p}
           tabindex=${y}
           data-cell=${b}
-          aria-describedby=${p === "rest" ? l.hintId : r}
+          aria-describedby=${f === "rest" ? c.hintId : r}
           @keydown=${g}
           @dblclick=${_}
           @click=${v}
         >
           ${h}
-        </th>` : o`<td
-          class=${m}
+        </th>` : m`<td
+          class=${p}
           tabindex=${y}
           data-cell=${b}
-          aria-describedby=${p === "rest" ? l.hintId : r}
+          aria-describedby=${f === "rest" ? c.hintId : r}
           @keydown=${g}
           @dblclick=${_}
           @click=${v}
@@ -1197,13 +1197,13 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = o`<span aria-hidden="tr
         </td>`;
 	}
 	mobileTable(e, t, n) {
-		let i = this.data, a = this.shown, s = !!i.selectable, c = !!i.clickable && !s, l = a[0], d = this.mobileMeasure, p = this.activeSort, m = new Set(this.checkedIds);
-		if (!l || !d) return o`<table class="lintje-data-table__mobile"></table>`;
-		let h = d.format === "change-compact" ? {
-			...d,
+		let i = this.data, a = this.shown, o = !!i.selectable, s = !!i.clickable && !o, c = a[0], u = this.mobileMeasure, d = this.activeSort, p = new Set(this.checkedIds);
+		if (!c || !u) return m`<table class="lintje-data-table__mobile"></table>`;
+		let h = u.format === "change-compact" ? {
+			...u,
 			format: "change"
-		} : d, g = i.rowActions?.length ? i.rowActions : null, _ = a.filter((e) => e !== l && e !== d), v = !!g || _.length > 0, y = v ? 3 : 2, b = p.key === d.key, x = new Set(this.mobileOpen);
-		return o`<table class="lintje-data-table__mobile">
+		} : u, g = i.rowActions?.length ? i.rowActions : null, _ = a.filter((e) => e !== c && e !== u), v = !!g || _.length > 0, y = v ? 3 : 2, b = d.key === u.key, x = new Set(this.mobileOpen);
+		return m`<table class="lintje-data-table__mobile">
       <caption class="visually-hidden">${i.caption}</caption>
       <thead>
         <tr>
@@ -1211,33 +1211,33 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = o`<span aria-hidden="tr
             scope="col"
             class="lintje-data-table__header-cell lintje-data-table__header-cell--mobile"
           >
-            ${s ? o`<span class="lintje-data-table__mobile-check"
-                  >${this.headerCheck()}${l.header}</span
-                >` : l.header}
+            ${o ? m`<span class="lintje-data-table__mobile-check"
+                  >${this.headerCheck()}${c.header}</span
+                >` : c.header}
           </th>
           <th
             scope="col"
-            class=${u({
+            class=${l({
 			"lintje-data-table__header-cell": !0,
 			"lintje-data-table__header-cell--mobile": !0,
 			"lintje-data-table__header-cell--align-right": !0,
-			"lintje-data-table__header-cell--sortable": d.sortable !== !1,
+			"lintje-data-table__header-cell--sortable": u.sortable !== !1,
 			"is-active": b
 		})}
-            aria-sort=${d.sortable === !1 ? r : b ? p.direction === "asc" ? "ascending" : "descending" : "none"}
+            aria-sort=${u.sortable === !1 ? r : b ? d.direction === "asc" ? "ascending" : "descending" : "none"}
           >
-            ${d.sortable === !1 ? d.header : o`<button
+            ${u.sortable === !1 ? u.header : m`<button
                   type="button"
                   class="lintje-data-table__sort-button"
-                  @click=${() => this.toggleSort(d)}
+                  @click=${() => this.toggleSort(u)}
                 >
-                  <span class="lintje-data-table__sort-label">${d.header}</span>
+                  <span class="lintje-data-table__sort-label">${u.header}</span>
                   <span class="lintje-data-table__sort-icon" aria-hidden="true"
-                    >${b ? p.direction === "asc" ? "▲" : "▼" : "▲▼"}</span
+                    >${b ? d.direction === "asc" ? "▲" : "▼" : "▲▼"}</span
                   >
                 </button>`}
           </th>
-          ${v ? o`<th
+          ${v ? m`<th
                   scope="col"
                   class="lintje-data-table__header-cell lintje-data-table__header-cell--mobile lintje-data-table__mobile-cell--actions"
                 >
@@ -1247,25 +1247,25 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = o`<span aria-hidden="tr
       </thead>
       <tbody>
         ${e.map((e) => {
-			let t = this.rowKey(e), a = this.rowDetail(e), p = this.mobileStatus(d, e), b = x.has(t) && _.length > 0, S = `lintje-data-table-${n}-detail-${t}`, C = o`<span class="lintje-data-table__mobile-name"
-              >${this.opener(e, this.cell(l, e[l.key]))}</span
+			let t = this.rowKey(e), a = this.rowDetail(e), d = this.mobileStatus(u, e), b = x.has(t) && _.length > 0, S = `lintje-data-table-${n}-detail-${t}`, C = m`<span class="lintje-data-table__mobile-name"
+              >${this.opener(e, this.cell(c, e[c.key]))}</span
             >${this.subline(e)}`, w = t === i.selectedId;
-			return o`<tr
-              class=${u({
+			return m`<tr
+              class=${l({
 				"lintje-data-table__mobile-row": !0,
-				"is-clickable": c,
+				"is-clickable": s,
 				"is-selected": w,
-				"is-checked": m.has(t),
+				"is-checked": p.has(t),
 				"is-open": b
 			})}
-              tabindex=${c ? 0 : r}
-              aria-selected=${c ? w : r}
-              @click=${c ? () => this.emit("lintje-row-click", a) : r}
-              @keydown=${c ? (t) => this.rowKeydown(t, e) : r}
+              tabindex=${s ? 0 : r}
+              aria-selected=${s ? w : r}
+              @click=${s ? () => this.emit("lintje-row-click", a) : r}
+              @keydown=${s ? (t) => this.rowKeydown(t, e) : r}
             >
               <th scope="row" class="lintje-data-table__mobile-cell">
-                ${s ? o`<span class="lintje-data-table__mobile-check">
-                      ${this.rowCheck(e, t, m.has(t))}
+                ${o ? m`<span class="lintje-data-table__mobile-check">
+                      ${this.rowCheck(e, t, p.has(t))}
                       <span class="lintje-data-table__mobile-identity">${C}</span>
                     </span>` : C}
               </th>
@@ -1273,20 +1273,20 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = o`<span aria-hidden="tr
                 class="lintje-data-table__mobile-cell lintje-data-table__mobile-cell--align-right"
               >
                 <span class="lintje-data-table__mobile-measure"
-                  >${this.cell(h, e[d.key])}</span
+                  >${this.cell(h, e[u.key])}</span
                 >
-                ${p ? o`<span
-                      class="lintje-data-table__mobile-status lintje-data-table__mobile-status--${p.tone}"
-                      >${p.label}</span
+                ${d ? m`<span
+                      class="lintje-data-table__mobile-status lintje-data-table__mobile-status--${d.tone}"
+                      >${d.label}</span
                     >` : r}
               </td>
-              ${v ? o`<td
+              ${v ? m`<td
                       class="lintje-data-table__mobile-cell lintje-data-table__mobile-cell--actions"
                       @click=${(e) => e.stopPropagation()}
                       @keydown=${(e) => e.stopPropagation()}
                     >
                       <span class="lintje-data-table__mobile-actions">
-                        ${_.length > 0 ? o`<button
+                        ${_.length > 0 ? m`<button
                                 type="button"
                                 class="lintje-data-table__mobile-toggle"
                                 aria-label=${`Alle gegevens van ${a.label}`}
@@ -1306,13 +1306,13 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = o`<span aria-hidden="tr
                       </span>
                     </td>` : r}
             </tr>
-            ${_.length > 0 ? o`<tr
+            ${_.length > 0 ? m`<tr
                     class="lintje-data-table__mobile-detail"
                     id=${S}
                     ?hidden=${!b}
                   >
                     <td class="lintje-data-table__mobile-cell" colspan=${y}>
-                      ${b ? o`<lintje-description-list
+                      ${b ? m`<lintje-description-list
                               .items=${_.map((t) => ({
 				label: t.header,
 				value: X(t, e[t.key])
@@ -1322,17 +1322,17 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = o`<span aria-hidden="tr
                   </tr>` : r}`;
 		})}
         <!-- Empty rows with the same two lines per cell keep a short last page as tall as a full one. -->
-        ${t > 1 ? Array.from({ length: G - e.length }, () => o`<tr
+        ${t > 1 ? Array.from({ length: G - e.length }, () => m`<tr
                 class="lintje-data-table__mobile-row lintje-data-table__mobile-row--filler"
                 aria-hidden="true"
               >
                 <td class="lintje-data-table__mobile-cell">
                   <span class="lintje-data-table__mobile-name">&nbsp;</span>
-                  ${this.hasSubline ? o`<span class="lintje-data-table__mobile-sub">&nbsp;</span>` : r}
+                  ${this.hasSubline ? m`<span class="lintje-data-table__mobile-sub">&nbsp;</span>` : r}
                 </td>
                 <td class="lintje-data-table__mobile-cell" colspan=${y - 1}>
                   <span class="lintje-data-table__mobile-measure">&nbsp;</span>
-                  ${d.threshold ? o`<span class="lintje-data-table__mobile-status">&nbsp;</span>` : r}
+                  ${u.threshold ? m`<span class="lintje-data-table__mobile-status">&nbsp;</span>` : r}
                 </td>
               </tr>`) : r}
       </tbody>
@@ -1345,10 +1345,10 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = o`<span aria-hidden="tr
 		e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.emit("lintje-row-click", this.rowDetail(t)));
 	}
 	pager(e, t, n, r, i, a) {
-		let s = this.data?.caption;
-		return o`<lintje-pagination
+		let o = this.data?.caption;
+		return m`<lintje-pagination
       class="lintje-data-table__pagination lintje-data-table__pagination--${e}"
-      label=${s ? `Paginering ${s}` : "Paginering"}
+      label=${o ? `Paginering ${o}` : "Paginering"}
       .page=${t + 1}
       .pageCount=${n}
       .pageSize=${r}
@@ -1361,7 +1361,7 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = o`<span aria-hidden="tr
     ></lintje-pagination>`;
 	}
 	opener(e, t) {
-		return this.data?.openable ? o`<button
+		return this.data?.openable ? m`<button
       type="button"
       class="lintje-data-table__open"
       @click=${(t) => {
@@ -1372,10 +1372,10 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = o`<span aria-hidden="tr
     </button>` : t;
 	}
 	cell(e, t) {
-		if (t === 0 && e.zeroText != null) return o`<span class="lintje-data-table__muted">${e.zeroText}</span>`;
+		if (t === 0 && e.zeroText != null) return m`<span class="lintje-data-table__muted">${e.zeroText}</span>`;
 		if (e.format === "status" && t != null) {
 			let n = pe(e, String(t));
-			if (n) return o`<lintje-status-dot
+			if (n) return m`<lintje-status-dot
           tone=${n}
           label=${e.status?.labels?.[String(t)] ?? r}
         ></lintje-status-dot>`;
@@ -1384,11 +1384,11 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = o`<span aria-hidden="tr
 		if (n == null) return Z;
 		if ((e.format === "change" || e.format === "change-compact") && typeof t == "number") {
 			let r = t === 0 ? "flat" : t > 0 ? "up" : "down";
-			return e.format === "change-compact" ? o`<span
+			return e.format === "change-compact" ? m`<span
             class="lintje-data-table__change lintje-data-table__change--${r}"
             aria-hidden="true"
             >${t > 0 ? "▲" : t < 0 ? "▼" : "●"}</span
-          ><span class="visually-hidden">${n}</span>` : o`<span class="lintje-data-table__change lintje-data-table__change--${r}">${n}</span>`;
+          ><span class="visually-hidden">${n}</span>` : m`<span class="lintje-data-table__change lintje-data-table__change--${r}">${n}</span>`;
 		}
 		let i = Y(e, t);
 		if (!i) return n;
@@ -1396,13 +1396,13 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = o`<span aria-hidden="tr
 			size: 14,
 			className: "lintje-threshold-cell__icon"
 		});
-		return o`<span class="lintje-threshold-cell lintje-threshold-cell--${i.tone}"
+		return m`<span class="lintje-threshold-cell lintje-threshold-cell--${i.tone}"
       >${a}${n}<span class="visually-hidden"> · ${i.label}</span></span
     >`;
 	}
 	truncatedCell(e, t) {
 		let n = X(e, t);
-		return n == null ? Z : o`<span class="lintje-data-table__cell-text" aria-hidden="true" title=${n}
+		return n == null ? Z : m`<span class="lintje-data-table__cell-text" aria-hidden="true" title=${n}
         >${this.cell(e, t)}</span
       ><span class="visually-hidden">${n}</span>`;
 	}
@@ -1417,7 +1417,7 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = o`<span aria-hidden="tr
 		return t ? n = t.replace(/\{(\w+)\}/g, (t, n) => {
 			let r = this.columns.find((e) => e.key === n), i = e[n];
 			return (r ? J(r, i) : i == null ? null : String(i)) ?? "—";
-		}) : this.sublineColumns.length > 0 && (n = this.sublineColumns.map((t) => J(t, e[t.key]) ?? "—").join(" · ")), n == null ? r : o`<span class="lintje-data-table__mobile-sub">${n}</span>`;
+		}) : this.sublineColumns.length > 0 && (n = this.sublineColumns.map((t) => J(t, e[t.key]) ?? "—").join(" · ")), n == null ? r : m`<span class="lintje-data-table__mobile-sub">${n}</span>`;
 	}
 	mobileStatus(e, t) {
 		if (!e.threshold) return null;
@@ -1429,11 +1429,11 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = o`<span aria-hidden="tr
 	}
 	headerCheck() {
 		let e = this.uncheckable, t = this.rows.filter((t) => !e.has(this.rowKey(t))), n = new Set(this.checkedIds), r = t.filter((e) => n.has(this.rowKey(e))).length;
-		return this.checkbox(o`<span class="visually-hidden">Alles selecteren</span>`, t.length > 0 && r === t.length, r > 0, (e) => this.setChecked(e ? t.map((e) => this.rowKey(e)) : []));
+		return this.checkbox(m`<span class="visually-hidden">Alles selecteren</span>`, t.length > 0 && r === t.length, r > 0, (e) => this.setChecked(e ? t.map((e) => this.rowKey(e)) : []));
 	}
 	rowCheck(e, t, n) {
 		let r = this.columns[0], i = r ? this.sortValue(r, e) : t;
-		return this.checkbox(o`<span class="visually-hidden">${`${i} selecteren`}</span>`, n, !1, (e) => {
+		return this.checkbox(m`<span class="visually-hidden">${`${i} selecteren`}</span>`, n, !1, (e) => {
 			let n = this.checkedIds.filter((e) => e !== t);
 			if (e && this.#f && this.data?.bulkActions) {
 				let e = this.uncheckable, n = this.sortedRows.map((e) => this.rowKey(e)).filter((t) => !e.has(t));
@@ -1443,7 +1443,7 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = o`<span aria-hidden="tr
 		}, this.uncheckable.has(t));
 	}
 	checkbox(e, t, n, r, i = !1) {
-		return o`<label class="lintje-choice${i ? " is-disabled" : ""}">
+		return m`<label class="lintje-choice${i ? " is-disabled" : ""}">
       <input
         type="checkbox"
         class="lintje-choice__input"