lintje 0.3.0 → 0.5.0

package/dist-elements/tag/map.js

@@ -1,8 +1,9 @@
-import { F as e, Kt as t, O as n, Yt as r, Zt as i, a, bt as o, en as s, f as c, h as l, in as u, lt as d, nn as f, p, q as m, rn as h, s as g, tn as _, ut as v, y } from "../chunks/base-CbmWxUig.js";
+import { F as e, Kt as t, O as n, Yt as r, Zt as i, a, bt as o, en as s, f as c, g as l, in as u, lt as d, nn as f, o as p, q as m, rn as h, tn as g, u as _, ut as v, y } from "../chunks/base-CVKIPSLx.js";
 import { n as ee, nextRow as te } from "./menu-button.js";
 import { t as ne } from "./announcement.js";
-import { a as re, c as ie, i as b, n as x, o as ae, s as S, t as oe } from "../chunks/download-Ct9q2anY.js";
-import { _ as C, d as se, l as w, m as ce, n as T, r as E, v as D } from "../chunks/stagger-BHoOgy0g.js";
+import { i as re, n as ie, t as b } from "../chunks/download-D7ZarlMZ.js";
+import { b as x, d as ae, g as S, n as oe, p as C, r as se, y as w } from "../chunks/stagger-Dvkth9_C.js";
+import { a as ce, i as T, n as E, r as D } from "../chunks/chart-styles-JK4clSyA.js";
 //#region \0rolldown/runtime.js
 var O = Object.create, k = Object.defineProperty, A = Object.getOwnPropertyDescriptor, j = Object.getOwnPropertyNames, M = Object.getPrototypeOf, N = Object.prototype.hasOwnProperty, le = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), ue = (e, t, n, r) => {
 	if (t && typeof t == "object" || typeof t == "function") for (var i = j(t), a = 0, o = i.length, s; a < o; a++) s = i[a], !N.call(e, s) && s !== n && k(e, s, {
@@ -602,14 +603,14 @@ var O = Object.create, k = Object.defineProperty, A = Object.getOwnPropertyDescr
 		function me(e) {
 			return document.createElementNS("http://www.w3.org/2000/svg", e);
 		}
-		function he(e, t) {
+		function F(e, t) {
 			for (var n = "", r = 0, i, a = e.length, o, s, c; r < a; r++) {
 				for (s = e[r], i = 0, o = s.length; i < o; i++) c = s[i], n += (i ? "L" : "M") + c.x + " " + c.y;
 				n += t ? B.svg ? "z" : "x" : "";
 			}
 			return n || "M0 0";
 		}
-		var ge = document.documentElement.style, _e = "ActiveXObject" in window, ve = _e && !document.addEventListener, ye = "msLaunchUri" in navigator && !("documentMode" in document), F = z("webkit"), I = z("android"), be = z("android 2") || z("android 3"), R = parseInt(/WebKit\/([0-9]+)|$/.exec(navigator.userAgent)[1], 10), xe = I && z("Google") && R < 537 && !("AudioNode" in window), Se = !!window.opera, Ce = !ye && z("chrome"), we = z("gecko") && !F && !Se && !_e, Te = !Ce && z("safari"), Ee = z("phantom"), De = "OTransition" in ge, Oe = navigator.platform.indexOf("Win") === 0, ke = _e && "transition" in ge, Ae = "WebKitCSSMatrix" in window && "m11" in new window.WebKitCSSMatrix() && !be, je = "MozPerspective" in ge, Me = !window.L_DISABLE_3D && (ke || Ae || je) && !De && !Ee, Ne = typeof orientation < "u" || z("mobile"), Pe = Ne && F, Fe = Ne && Ae, Ie = !window.PointerEvent && window.MSPointerEvent, Le = !!(window.PointerEvent || Ie), Re = "ontouchstart" in window || !!window.TouchEvent, ze = !window.L_NO_TOUCH && (Re || Le), Be = Ne && Se, Ve = Ne && we, He = (window.devicePixelRatio || window.screen.deviceXDPI / window.screen.logicalXDPI) > 1, Ue = function() {
+		var he = document.documentElement.style, ge = "ActiveXObject" in window, _e = ge && !document.addEventListener, ve = "msLaunchUri" in navigator && !("documentMode" in document), I = z("webkit"), R = z("android"), ye = z("android 2") || z("android 3"), be = parseInt(/WebKit\/([0-9]+)|$/.exec(navigator.userAgent)[1], 10), xe = R && z("Google") && be < 537 && !("AudioNode" in window), Se = !!window.opera, Ce = !ve && z("chrome"), we = z("gecko") && !I && !Se && !ge, Te = !Ce && z("safari"), Ee = z("phantom"), De = "OTransition" in he, Oe = navigator.platform.indexOf("Win") === 0, ke = ge && "transition" in he, Ae = "WebKitCSSMatrix" in window && "m11" in new window.WebKitCSSMatrix() && !ye, je = "MozPerspective" in he, Me = !window.L_DISABLE_3D && (ke || Ae || je) && !De && !Ee, Ne = typeof orientation < "u" || z("mobile"), Pe = Ne && I, Fe = Ne && Ae, Ie = !window.PointerEvent && window.MSPointerEvent, Le = !!(window.PointerEvent || Ie), Re = "ontouchstart" in window || !!window.TouchEvent, ze = !window.L_NO_TOUCH && (Re || Le), Be = Ne && Se, Ve = Ne && we, He = (window.devicePixelRatio || window.screen.deviceXDPI / window.screen.logicalXDPI) > 1, Ue = function() {
 			var e = !1;
 			try {
 				var t = Object.defineProperty({}, "passive", { get: function() {
@@ -637,12 +638,12 @@ var O = Object.create, k = Object.defineProperty, A = Object.getOwnPropertyDescr
 			return navigator.userAgent.toLowerCase().indexOf(e) >= 0;
 		}
 		var B = {
-			ie: _e,
-			ielt9: ve,
-			edge: ye,
-			webkit: F,
-			android: I,
-			android23: be,
+			ie: ge,
+			ielt9: _e,
+			edge: ve,
+			webkit: I,
+			android: R,
+			android23: ye,
 			androidStock: xe,
 			opera: Se,
 			chrome: Ce,
@@ -4127,7 +4128,7 @@ var O = Object.create, k = Object.defineProperty, A = Object.getOwnPropertyDescr
 				t && (n.stroke ? (t.setAttribute("stroke", n.color), t.setAttribute("stroke-opacity", n.opacity), t.setAttribute("stroke-width", n.weight), t.setAttribute("stroke-linecap", n.lineCap), t.setAttribute("stroke-linejoin", n.lineJoin), n.dashArray ? t.setAttribute("stroke-dasharray", n.dashArray) : t.removeAttribute("stroke-dasharray"), n.dashOffset ? t.setAttribute("stroke-dashoffset", n.dashOffset) : t.removeAttribute("stroke-dashoffset")) : t.setAttribute("stroke", "none"), n.fill ? (t.setAttribute("fill", n.fillColor || n.color), t.setAttribute("fill-opacity", n.fillOpacity), t.setAttribute("fill-rule", n.fillRule || "evenodd")) : t.setAttribute("fill", "none"));
 			},
 			_updatePoly: function(e, t) {
-				this._setPath(e, he(e._parts, t));
+				this._setPath(e, F(e._parts, t));
 			},
 			_updateCircle: function(e) {
 				var t = e._point, n = Math.max(Math.round(e._radius), 1), r = Math.max(Math.round(e._radiusY), 1) || n, i = "a" + n + "," + r + " 0 1,0 ", a = e._empty() ? "M0 0" : "M" + (t.x - n) + "," + t.y + i + n * 2 + ",0 " + i + -n * 2 + ",0 ";
@@ -4180,7 +4181,7 @@ var O = Object.create, k = Object.defineProperty, A = Object.getOwnPropertyDescr
 		function Xr(e, t) {
 			return new Yr(e, t);
 		}
-		qr.create = Kr, qr.pointsToPath = he, ur.geometryToLayer = dr, ur.coordsToLatLng = pr, ur.coordsToLatLngs = mr, ur.latLngToCoords = hr, ur.latLngsToCoords = gr, ur.getFeature = _r, ur.asFeature = vr, X.mergeOptions({ boxZoom: !0 });
+		qr.create = Kr, qr.pointsToPath = F, ur.geometryToLayer = dr, ur.coordsToLatLng = pr, ur.coordsToLatLngs = mr, ur.latLngToCoords = hr, ur.latLngsToCoords = gr, ur.getFeature = _r, ur.asFeature = vr, X.mergeOptions({ boxZoom: !0 });
 		var Zr = gn.extend({
 			initialize: function(e) {
 				this._map = e, this._container = e._container, this._pane = e._panes.overlayPane, this._resetStateTimeout = 0, e.on("unload", this._destroy, this);
@@ -4545,15 +4546,15 @@ var O = Object.create, k = Object.defineProperty, A = Object.getOwnPropertyDescr
 function fe(e) {
 	return [...e.querySelectorAll(de)].map((e) => e.getBoundingClientRect()).filter((e) => e.width > 0 && e.height > 0);
 }
-var pe = (e, t) => e.left < t.right && t.left < e.right && e.top < t.bottom && t.top < e.bottom, me = (e, t) => e.left >= t.left && e.right <= t.right && e.top >= t.top && e.bottom <= t.bottom, he = (e, t, n) => ({
+var pe = (e, t) => e.left < t.right && t.left < e.right && e.top < t.bottom && t.top < e.bottom, me = (e, t) => e.left >= t.left && e.right <= t.right && e.top >= t.top && e.bottom <= t.bottom, F = (e, t, n) => ({
 	left: e.left + t,
 	right: e.right + t,
 	top: e.top + n,
 	bottom: e.bottom + n
 });
-function ge(e, t, n, r) {
+function he(e, t, n, r) {
 	let i = (r, i) => {
-		let a = he(e, r, i);
+		let a = F(e, r, i);
 		return me(a, t) && !n.some((e) => pe(a, e));
 	};
 	if (i(0, 0)) return [0, 0];
@@ -4571,7 +4572,7 @@ function ge(e, t, n, r) {
 	for (let e of a) for (let t of o) s && Math.hypot(e, t) >= Math.hypot(...s) || i(e, t) && (s = [e, t]);
 	return s;
 }
-function _e(e, t, n) {
+function ge(e, t, n) {
 	let r = {
 		left: Math.max(e.left, t.left),
 		right: Math.min(e.right, t.right),
@@ -4580,7 +4581,7 @@ function _e(e, t, n) {
 	};
 	return r.left >= r.right || r.top >= r.bottom || n.some((e) => me(r, e));
 }
-function ve(e) {
+function _e(e) {
 	try {
 		return e.matches(":focus-visible");
 	} catch {
@@ -4589,27 +4590,27 @@ function ve(e) {
 }
 //#endregion
 //#region src/components/shared/charts/map-chart/drawings.ts
-var ye = {
+var ve = {
 	polygons: "Vlakken",
 	points: "Punten",
 	flows: "Stromen",
 	choropleth: "Gebieden",
 	"scope-picker": "Punten"
-}, F = (e) => Math.max(1, ...e.map((e) => e.value ?? 0)), I = (e) => {
+}, I = (e) => Math.max(1, ...e.map((e) => e.value ?? 0)), R = (e) => {
 	let t = e.filter((e) => e.value != null).map((e) => e.value);
-	return t.length ? Math.min(...t) : F(e);
+	return t.length ? Math.min(...t) : I(e);
 };
-function be(e, t) {
+function ye(e, t) {
 	if (e.variant !== "plots") {
 		let n = e.values ?? [];
 		return [{
 			variant: e.variant,
 			values: n,
 			index: 0,
-			name: ye[e.variant],
+			name: ve[e.variant],
 			unit: t,
-			max: F(n),
-			min: I(n),
+			max: I(n),
+			min: R(n),
 			destination: e.destination,
 			seriesLabels: e.seriesLabels
 		}];
@@ -4620,10 +4621,10 @@ function be(e, t) {
 			variant: n.variant,
 			values: i,
 			index: r,
-			name: n.label ?? ye[n.variant],
+			name: n.label ?? ve[n.variant],
 			unit: n.unit ?? t,
-			max: F(i),
-			min: I(i),
+			max: I(i),
+			min: R(i),
 			destination: n.destination ?? e.destination,
 			seriesLabels: n.seriesLabels ? {
 				...e.seriesLabels,
@@ -4632,7 +4633,7 @@ function be(e, t) {
 		};
 	});
 }
-function R(e, t) {
+function be(e, t) {
 	return t ? `${e} ${t}` : e;
 }
 //#endregion
@@ -20752,7 +20753,7 @@ function Je(e, t) {
 }
 function Ye(e) {
 	let t = new Map([...e].sort((e, t) => e.lon - t.lon).map((e, t) => [e.id, t]));
-	return (n) => T(t.get(n.id) ?? 0, e.length);
+	return (n) => oe(t.get(n.id) ?? 0, e.length);
 }
 var z = (e, t) => `${e.toFixed(2)} ${t.toFixed(2)}`;
 function B(e, t) {
@@ -20765,15 +20766,15 @@ function Xe(e, t) {
 	}).join("") + "Z";
 }
 function Ze(e, t, n, r) {
-	let { id: i, controller: a, select: o, project: c } = t, u = new Map(n.map((e) => [e.id, e.d])), d = (t) => e.variant === "choropleth" ? u.get(t.id) : He(t) ? Xe(t.polygon, c) : void 0, f = e.values.filter((e) => d(e));
-	return l(f, (e) => e.id, (n) => {
-		let c = d(n), l = n.value == null, u = l ? "var(--color-chart-hatch)" : Be[Ve(n.value, e.max)], f = l ? "geen gegevens" : R(g(n.value), e.unit);
+	let { id: i, controller: a, select: o, project: u } = t, d = new Map(n.map((e) => [e.id, e.d])), f = (t) => e.variant === "choropleth" ? d.get(t.id) : He(t) ? Xe(t.polygon, u) : void 0, p = e.values.filter((e) => f(e));
+	return l(p, (e) => e.id, (n) => {
+		let l = f(n), u = n.value == null, d = u ? "var(--color-chart-hatch)" : Be[Ve(n.value, e.max)], p = u ? "geen gegevens" : be(c(n.value), e.unit);
 		return h`
       <g class="lintje-map-chart__polygon is-clickable ${Ke(t, n.id, r)}"
          data-mark-id=${n.id}
          role="button" tabindex=${r ? -1 : 0} aria-hidden=${r ? "true" : s}
          aria-pressed=${String(Ge(t, n.id))}
-         aria-label=${`${n.label}: ${f}${n.detail ? `, ${n.detail}` : ""}`}
+         aria-label=${`${n.label}: ${p}${n.detail ? `, ${n.detail}` : ""}`}
          @click=${(e) => {
 			qe(e), o(n);
 		}}
@@ -20782,40 +20783,40 @@ function Ze(e, t, n, r) {
 			title: `${n.label}${n.detail ? ` · ${n.detail}` : ""}`,
 			rows: [{
 				label: e.unit,
-				value: l ? "geen gegevens" : g(n.value),
-				color: u
+				value: u ? "geen gegevens" : c(n.value),
+				color: d
 			}]
 		})}
          @mouseleave=${() => a.hideTooltip()}
          @keydown=${Je(o, n)}>
-        <path d=${c} class="lintje-map-chart__polygon-ring" />
-        <path d=${c}
-              class="lintje-map-chart__polygon-shape ${l ? "lintje-map-chart__polygon-shape--empty" : "lintje-map-chart__polygon-shape--data"}"
-              fill=${l ? s : u} />
-        ${l ? h`<path d=${c} class="lintje-map-chart__polygon-hatch" fill="url(#map-hatch-${i})" />` : s}
+        <path d=${l} class="lintje-map-chart__polygon-ring" />
+        <path d=${l}
+              class="lintje-map-chart__polygon-shape ${u ? "lintje-map-chart__polygon-shape--empty" : "lintje-map-chart__polygon-shape--data"}"
+              fill=${u ? s : d} />
+        ${u ? h`<path d=${l} class="lintje-map-chart__polygon-hatch" fill="url(#map-hatch-${i})" />` : s}
       </g>
     `;
 	});
 }
 function Qe(e, t, n) {
-	let { controller: r, select: i, project: a } = t, c = e.destination;
-	if (!c) return s;
-	let u = e.values.filter((e) => e.lon != null && e.value != null), d = Ye(u), [f, p] = a(c.lon, c.lat);
+	let { controller: r, select: i, project: a } = t, u = e.destination;
+	if (!u) return s;
+	let d = e.values.filter((e) => e.lon != null && e.value != null), f = Ye(d), [p, m] = a(u.lon, u.lat);
 	return h`
     <g class="lintje-map-chart__flows">
-      ${l(u, (e) => e.id, (l) => {
-		let [u, m] = a(l.lon, l.lat), _ = (u + f) / 2, v = (m + p) / 2 - Math.hypot(f - u, p - m) * .18, y = 1 + l.value / e.max * 7, ee = `${l.label} → ${c.label}`;
+      ${l(d, (e) => e.id, (l) => {
+		let [d, g] = a(l.lon, l.lat), _ = (d + p) / 2, v = (g + m) / 2 - Math.hypot(p - d, m - g) * .18, y = 1 + l.value / e.max * 7, ee = `${l.label} → ${u.label}`;
 		return h`
         <path
-          d=${`M${z(u, m)}Q${z(_, v)} ${z(f, p)}`}
+          d=${`M${z(d, g)}Q${z(_, v)} ${z(p, m)}`}
           pathLength="1"
-          ${o(d(l))}
+          ${o(f(l))}
           class="lintje-map-chart__flow is-clickable ${Ke(t, l.id, n)}"
           stroke-width=${y}
           data-mark-id=${l.id}
           role="button" tabindex=${n ? -1 : 0} aria-hidden=${n ? "true" : s}
           aria-pressed=${String(Ge(t, l.id))}
-          aria-label=${`${ee}: ${R(g(l.value), e.unit)}${l.detail ? `, ${l.detail}` : ""}`}
+          aria-label=${`${ee}: ${be(c(l.value), e.unit)}${l.detail ? `, ${l.detail}` : ""}`}
           @keydown=${Je(i, l)}
           @click=${(e) => {
 			qe(e), i(l);
@@ -20825,29 +20826,29 @@ function Qe(e, t, n) {
 			title: `${ee}${l.detail ? ` · ${l.detail}` : ""}`,
 			rows: [{
 				label: e.unit,
-				value: g(l.value),
-				color: se
+				value: c(l.value),
+				color: C
 			}]
 		})}
           @mouseleave=${() => r.hideTooltip()} />
       `;
 	})}
-      <g class="lintje-map-chart__symbol" data-at=${z(f, p)}>
+      <g class="lintje-map-chart__symbol" data-at=${z(p, m)}>
         <circle r="5" class="lintje-map-chart__destination" />
       </g>
     </g>
   `;
 }
 function $e(e, t, n) {
-	let { id: r, controller: i, select: a, project: c, hidden: u } = t, d = e.values.filter((e) => e.lon != null), f = (t) => n || !!(t.series && u.has(We(e, t.series))), p = Ye(d);
-	return l(d, (e) => e.id, (n) => {
-		let [l, u] = c(n.lon, n.lat), d = e.variant === "points" && n.value != null ? Ue(n.value, e.max) : 6, m = ce(n.series), _ = n.series && e.seriesLabels?.[n.series] || void 0, v = n.value == null ? "geen gegevens" : R(g(n.value), e.unit), y = C(n.series, d);
+	let { id: r, controller: i, select: a, project: u, hidden: d } = t, f = e.values.filter((e) => e.lon != null), p = (t) => n || !!(t.series && d.has(We(e, t.series))), m = Ye(f);
+	return l(f, (e) => e.id, (n) => {
+		let [l, d] = u(n.lon, n.lat), f = e.variant === "points" && n.value != null ? Ue(n.value, e.max) : 6, g = S(n.series), _ = n.series && e.seriesLabels?.[n.series] || void 0, v = n.value == null ? "geen gegevens" : be(c(n.value), e.unit), y = w(n.series, f);
 		return h`
-      <g ${o(p(n))}
-         class="lintje-map-chart__point lintje-map-chart__symbol ${Ke(t, n.id, f(n))}"
-         data-at=${z(l, u)}
+      <g ${o(m(n))}
+         class="lintje-map-chart__point lintje-map-chart__symbol ${Ke(t, n.id, p(n))}"
+         data-at=${z(l, d)}
          data-mark-id=${n.id}
-         role="button" tabindex=${f(n) ? -1 : 0} aria-hidden=${f(n) ? "true" : s}
+         role="button" tabindex=${p(n) ? -1 : 0} aria-hidden=${p(n) ? "true" : s}
          aria-pressed=${String(Ge(t, n.id))}
          aria-label=${`${n.label}: ${v}${_ ? `, ${_}` : ""}`}
          @click=${(e) => {
@@ -20858,8 +20859,8 @@ function $e(e, t, n) {
 			title: _ ? `${n.label} · ${_}` : n.label,
 			rows: [{
 				label: e.unit,
-				value: n.value == null ? "geen gegevens" : g(n.value),
-				color: m ?? "var(--color-chart-default)"
+				value: n.value == null ? "geen gegevens" : c(n.value),
+				color: g ?? "var(--color-chart-default)"
 			}]
 		})}
          @mouseleave=${() => i.hideTooltip()}
@@ -20869,8 +20870,8 @@ function $e(e, t, n) {
         <g class="lintje-map-chart__point-figure">
           <path d=${y} class="lintje-map-chart__point-ring" />
           <path d=${y}
-                class="lintje-map-chart__point-shape ${n.value == null ? "lintje-map-chart__point-shape--empty" : m ? "lintje-map-chart__point-shape--series" : ""}"
-                ${o({ "--lintje-series": m })} />
+                class="lintje-map-chart__point-shape ${n.value == null ? "lintje-map-chart__point-shape--empty" : g ? "lintje-map-chart__point-shape--series" : ""}"
+                ${o({ "--lintje-series": g })} />
           ${n.value == null ? h`<path d=${y} class="lintje-map-chart__point-hatch" fill="url(#map-hatch-${r})" />` : s}
         </g>
       </g>
@@ -21024,7 +21025,12 @@ var gt = class {
 	}
 	#v() {
 		let e = this.#t;
-		e && e.clientWidth && e.clientHeight && (this.#n ? (this.#n.invalidateSize({ animate: !1 }), this.#T()) : this.#_ && this.#b(this.#_));
+		if (e && e.clientWidth && e.clientHeight) {
+			if (this.#n) {
+				if (this.#p && !this.#l && matchMedia("print").matches) return this.print(!0);
+				this.#n.invalidateSize({ animate: !1 }), this.#T();
+			} else this.#_ && this.#b(this.#_);
+		}
 	}
 	zoomIn() {
 		this.#n?.zoomIn();
@@ -21053,6 +21059,7 @@ var gt = class {
 		let t = this.#n;
 		if (!t || !this.#p) return;
 		if (e) {
+			if (this.#l) return;
 			let e = t.getBounds();
 			this.#l = {
 				centre: t.getCenter(),
@@ -21161,11 +21168,11 @@ var gt = class {
 		this.#r && e.removeLayer(this.#r), this.#r = null, this.#u = "", this.#i?.remove(), this.#i = null;
 	}
 	#j(e) {
-		return be(e, this.#g.unit).filter((e) => !this.#g.hiddenLayers.includes(e.index));
+		return ye(e, this.#g.unit).filter((e) => !this.#g.hiddenLayers.includes(e.index));
 	}
 	#M(e, t) {
 		let n = this.#S(e);
-		n && (_(nt(this.#h, be(t, this.#g.unit), {
+		n && (g(nt(this.#h, ye(t, this.#g.unit), {
 			id: this.#e.id,
 			active: this.#g.active,
 			controller: this.#e,
@@ -21273,7 +21280,7 @@ var gt = class {
 	}
 	#W;
 	#G() {
-		this.#s = null, this.#o && _(s, this.#o), cancelAnimationFrame(this.#J), this.#X(null);
+		this.#s = null, this.#o && g(s, this.#o), cancelAnimationFrame(this.#J), this.#X(null);
 	}
 	#K() {
 		return [this.#a, this.#o].flatMap((e) => e ? [...e.querySelectorAll(".lintje-map-chart__symbol")] : []);
@@ -21285,7 +21292,7 @@ var gt = class {
 			kind: "lasso",
 			ring: [...t.area.ring, e]
 		} : t.area;
-		_(tt(n, this.#O, !0), this.#o), this.#N(), this.#Y(n);
+		g(tt(n, this.#O, !0), this.#o), this.#N(), this.#Y(n);
 	}
 	#J;
 	#Y(e) {
@@ -21300,7 +21307,7 @@ var gt = class {
 	}
 	#Z(e) {
 		let t = this.#n, n = this.#t;
-		if (!t || !n || !ve(e)) return;
+		if (!t || !n || !_e(e)) return;
 		let r = n.getBoundingClientRect(), i = e.getBoundingClientRect(), a = {
 			left: i.left - r.left,
 			right: i.right - r.left,
@@ -21316,8 +21323,8 @@ var gt = class {
 			right: e.right - r.left,
 			top: e.top - r.top,
 			bottom: e.bottom - r.top
-		})) : [], l = !y(), u = ge(a, s, c, 8);
-		u ? (u[0] || u[1]) && t.panBy([-u[0], -u[1]], { animate: l }) : _e(a, s, c) && t.panBy([(a.left + a.right) / 2 - o.x / 2, (a.top + a.bottom) / 2 - o.y / 2], { animate: l });
+		})) : [], l = !y(), u = he(a, s, c, 8);
+		u ? (u[0] || u[1]) && t.panBy([-u[0], -u[1]], { animate: l }) : ge(a, s, c) && t.panBy([(a.left + a.right) / 2 - o.x / 2, (a.top + a.bottom) / 2 - o.y / 2], { animate: l });
 	}
 };
 function _t(e) {
@@ -21331,21 +21338,21 @@ function _t(e) {
 	].map((t) => e * t / 5);
 }
 function vt(e) {
-	return Math.abs(e) >= 1e4 ? a(e) : g(e, +!Number.isInteger(e));
+	return Math.abs(e) >= 1e4 ? _(e) : c(e, +!Number.isInteger(e));
 }
 function yt(e, t) {
 	let { max: n, unit: r } = e;
 	if (!t) return f`<span class="lintje-map-legend__key">
       <span class="lintje-map-legend__figure">0</span>
       <span class="lintje-map-legend__ramp">${Be.map((e) => f`<i ${o({ background: e })}></i>`)}</span>
-      <span class="lintje-map-legend__figure">${R(a(n), r)}</span>
+      <span class="lintje-map-legend__figure">${be(_(n), r)}</span>
     </span>`;
-	let i = _t(n), s = Be.map((e, t) => ({
-		label: R(`${vt(i[t])} – ${vt(i[t + 1])}`, t === 4 ? r : ""),
+	let i = _t(n), a = Be.map((e, t) => ({
+		label: be(`${vt(i[t])} – ${vt(i[t + 1])}`, t === 4 ? r : ""),
 		color: e,
 		fixed: !0
 	}));
-	return f`<span class="lintje-map-legend__key lintje-map-legend__classes">${w({ items: s })}</span>`;
+	return f`<span class="lintje-map-legend__key lintje-map-legend__classes">${ae({ items: a })}</span>`;
 }
 function bt(e, t) {
 	let n = Math.sqrt(Math.max(e, 1) * t), r = t / 4;
@@ -21360,33 +21367,33 @@ function bt(e, t) {
 	return r;
 }
 function V(e, t) {
-	let { min: n, max: r, unit: i } = e, o = R(`${a(n)} – ${a(r)}`, i);
+	let { min: n, max: r, unit: i } = e, a = be(`${_(n)} – ${_(r)}`, i);
 	if (!t || n >= r) return f`<span class="lintje-map-legend__key">
       <svg class="lintje-map-legend__sizes" width="49" height="22" aria-hidden="true">
         <circle cx="4" cy="11" r="3" /><circle cx="17.5" cy="11" r="6.5" /><circle cx="38" cy="11" r="10" />
       </svg>
-      <span class="lintje-map-legend__figure">${o}</span>
+      <span class="lintje-map-legend__figure">${a}</span>
     </span>`;
-	let s = bt(n, r), c = [
+	let o = bt(n, r), s = [
 		14,
 		31,
 		46
-	], l = [
+	], c = [
 		r,
-		s,
+		o,
 		n
 	].map((e, t) => {
 		let n = Ue(e, r);
 		return {
 			r: n,
 			top: 46 - 2 * n,
-			line: c[t],
-			label: R(a(e), t === 0 ? i : "")
+			line: s[t],
+			label: be(_(e), t === 0 ? i : "")
 		};
 	});
 	return f`<span class="lintje-map-legend__key">
     <svg class="lintje-map-legend__sizes lintje-map-legend__sizes--nested" width="150" height="48" aria-hidden="true">
-      ${l.map(({ r: e, top: t, line: n, label: r }) => h`
+      ${c.map(({ r: e, top: t, line: n, label: r }) => h`
         <circle cx="19" cy=${46 - e} r=${e} />
         <line x1="19" y1=${t} x2="48" y2=${n - 4} />
         <text x="52" y=${n}>${r}</text>`)}
@@ -21397,7 +21404,7 @@ function H(e) {
 	let { min: t, max: n, unit: r } = e;
 	return f`<span class="lintje-map-legend__key">
     <svg class="lintje-map-legend__wedge" width="58" height="12" aria-hidden="true"><path d="M0 5.5 L58 2 L58 10 L0 6.5 Z" /></svg>
-    <span class="lintje-map-legend__figure">${R(`${a(t)} – ${a(n)}`, r)}</span>
+    <span class="lintje-map-legend__figure">${be(`${_(t)} – ${_(n)}`, r)}</span>
   </span>`;
 }
 function xt(e, t) {
@@ -21412,7 +21419,7 @@ function St(e, t) {
 		n.push({
 			key: a,
 			label: i,
-			color: ce(r),
+			color: S(r),
 			symbol: r,
 			shape: "point",
 			hidden: t.includes(a)
@@ -21442,7 +21449,7 @@ function Ct(e) {
           </button>
           <div class="lintje-map-legend__keys ${a ? "is-off" : ""}">
             ${xt(t, i)}
-            ${o.length > 0 ? f`<span class="lintje-map-legend__rule" aria-hidden="true"></span>${w({
+            ${o.length > 0 ? f`<span class="lintje-map-legend__rule" aria-hidden="true"></span>${ae({
 			items: o,
 			onToggle: e.onSeries
 		})}` : s}
@@ -21525,13 +21532,13 @@ function K(e) {
 }
 function At(e) {
 	let t = e >= 1e3, n = t ? e / 1e3 : e;
-	return `${g(n, +!Number.isInteger(n))} ${t ? "km" : "m"}`;
+	return `${c(n, +!Number.isInteger(n))} ${t ? "km" : "m"}`;
 }
 function jt(e) {
-	return e.kind === "circle" ? `binnen ${g(Math.round(e.radiusKm * 10) / 10)} km` : De(e.ring) ? "binnen de rechthoek" : "binnen de getekende lijn";
+	return e.kind === "circle" ? `binnen ${c(Math.round(e.radiusKm * 10) / 10)} km` : De(e.ring) ? "binnen de rechthoek" : "binnen de getekende lijn";
 }
 function Mt(e, t) {
-	let { controller: n, description: r = e.description, mobile: i = !1, onSelect: a, onClear: c, onLayerChange: l, onArea: u } = t, { unit: d = "aantal", selectedId: h = null, selectedArea: _ = null, layers: y, layer: ee, basemap: ne, selectLabel: re = "Zet als bereik" } = e, ie = !!t.expanded, b = {
+	let { controller: n, description: r = e.description, mobile: i = !1, onSelect: a, onClear: l, onLayerChange: u, onArea: d } = t, { unit: h = "aantal", selectedId: g = null, selectedArea: _ = null, layers: y, layer: ee, basemap: ne, selectLabel: re = "Zet als bereik" } = e, ie = !!t.expanded, b = {
 		...U,
 		...e.controls
 	}, x = W.filter((e) => b[e.tool]);
@@ -21540,33 +21547,33 @@ function Mt(e, t) {
 		height: "--chart-h-main",
 		fit: !i
 	} : {});
-	let oe = ie ? n.height : t.height ?? e.height ?? (i ? wt.mobile : wt.desktop), se = be(e, d);
-	n.hostSelection !== h && (n.hostSelection = h, n.mapSelection = h);
-	let w = JSON.stringify(_);
-	n.hostArea !== w && (n.hostArea = w, n.mapArea = _);
-	let T = x.length > 0 ? n.mapArea : null, D = T ? ze(T, se, e.geo) : [], O = n.mapSelection, k = /* @__PURE__ */ new Map(), A = /* @__PURE__ */ new Map();
-	for (let e of se) for (let t of e.values) k.set(t.id, t), A.set(t.id, e);
+	let ae = ie ? n.height : t.height ?? e.height ?? (i ? wt.mobile : wt.desktop), oe = ye(e, h);
+	n.hostSelection !== g && (n.hostSelection = g, n.mapSelection = g);
+	let C = JSON.stringify(_);
+	n.hostArea !== C && (n.hostArea = C, n.mapArea = _);
+	let E = x.length > 0 ? n.mapArea : null, D = E ? ze(E, oe, e.geo) : [], O = n.mapSelection, k = /* @__PURE__ */ new Map(), A = /* @__PURE__ */ new Map();
+	for (let e of oe) for (let t of e.values) k.set(t.id, t), A.set(t.id, e);
 	let j = O ? k.get(O) : void 0, M = j ? A.get(j.id) : void 0, N = (e) => e.series && A.get(e.id)?.seriesLabels?.[e.series] || void 0, le = n.hiddenLayers, ue = n.hiddenSeries, P = () => {
 		let e = n.mapSelection;
-		e != null && (n.mapSelection = null, c?.(e), n.requestUpdate());
+		e != null && (n.mapSelection = null, l?.(e), n.requestUpdate());
 	}, de = () => {
-		n.mapArea && (n.mapArea = null, u?.(null, []), n.requestUpdate());
+		n.mapArea && (n.mapArea = null, d?.(null, []), n.requestUpdate());
 	}, fe = (e) => {
 		if (e.id === O) return P();
 		n.mapSelection = e.id, a?.(e), n.requestUpdate();
 	}, pe = (t) => {
-		n.mapArea = t, u?.(t, ze(t, se, e.geo)), n.requestUpdate();
+		n.mapArea = t, d?.(t, ze(t, oe, e.geo)), n.requestUpdate();
 	}, me = (e) => {
 		n.mapTool = e, e && (n.mapLastTool = e), n.requestUpdate();
 	};
 	if (j && M && (j.series && ue.includes(We(M, j.series)) || le.includes(M.index))) return P(), Mt(e, t);
-	let he = n.leaflet ??= new gt(n);
-	he.sync(e, {
-		unit: d,
+	let F = n.leaflet ??= new gt(n);
+	F.sync(e, {
+		unit: h,
 		active: O,
 		hidden: ue,
 		hiddenLayers: le,
-		area: T,
+		area: E,
 		chosen: D,
 		tool: n.mapTool,
 		drag: b.drag,
@@ -21578,13 +21585,13 @@ function Mt(e, t) {
 		clear: P,
 		mobile: i
 	});
-	let ge = ae.filter((e) => e.action === "home" ? b.reset : b.zoom), _e = b.scale ? he.scaleBar() : null, ve = (e) => {
-		e === "in" ? he.zoomIn() : e === "out" ? he.zoomOut() : (n.mapTool = null, P(), de(), he.home());
-	}, ye = `${n.id}-tools`, F = W.find((e) => e.tool === (n.mapTool ?? n.mapLastTool ?? x[0]?.tool)), I = x.map((e) => ({
+	let he = T.filter((e) => e.action === "home" ? b.reset : b.zoom), ge = b.scale ? F.scaleBar() : null, _e = (e) => {
+		e === "in" ? F.zoomIn() : e === "out" ? F.zoomOut() : (n.mapTool = null, P(), de(), F.home());
+	}, ve = `${n.id}-tools`, I = W.find((e) => e.tool === (n.mapTool ?? n.mapLastTool ?? x[0]?.tool)), R = x.map((e) => ({
 		value: e.tool,
 		label: e.text,
 		icon: e.name,
-		checked: F?.tool === e.tool,
+		checked: I?.tool === e.tool,
 		radio: !0
 	})), xe = (e, t = "first") => {
 		n.mapMenuOpen = e, n.mapMenuFocus = e ? t : null, n.requestUpdate();
@@ -21595,10 +21602,10 @@ function Mt(e, t) {
 			e >= 0 && n[e]?.focus();
 		};
 		switch (e.key) {
-			case "ArrowDown": return e.preventDefault(), a(te(I, i, 1));
-			case "ArrowUp": return e.preventDefault(), a(te(I, i < 0 ? I.length : i, -1));
-			case "Home": return e.preventDefault(), a(te(I, -1, 1));
-			case "End": return e.preventDefault(), a(te(I, I.length, -1));
+			case "ArrowDown": return e.preventDefault(), a(te(R, i, 1));
+			case "ArrowUp": return e.preventDefault(), a(te(R, i < 0 ? R.length : i, -1));
+			case "Home": return e.preventDefault(), a(te(R, -1, 1));
+			case "End": return e.preventDefault(), a(te(R, R.length, -1));
 			case "Tab": return e.shiftKey || Se()?.focus(), Ce(!1);
 			default: return;
 		}
@@ -21611,17 +21618,17 @@ function Mt(e, t) {
 	}, De = (e) => {
 		Ce(!0), me(e);
 	}, Oe = () => {
-		if (x.length === 0 || !F) return s;
-		let e = ge.length > 0 ? "lintje-map-chart__tip--first" : "", t = n.mapTool === F.tool, r = x.length > 1, i = n.mapMenuOpen, a = t ? "Stop met selecteren" : r ? "Selecteren" : F.label, o = t || !r ? F.name : "functioneel-selectie", c = m(o, f`<span class="lintje-map-chart__tool-icon">${S(o, t || !r ? F.text : "Kies")}</span>`);
+		if (x.length === 0 || !I) return s;
+		let e = he.length > 0 ? "lintje-map-chart__tip--first" : "", t = n.mapTool === I.tool, r = x.length > 1, i = n.mapMenuOpen, a = t ? "Stop met selecteren" : r ? "Selecteren" : I.label, o = t || !r ? I.name : "functioneel-selectie", c = m(o, f`<span class="lintje-map-chart__tool-icon">${ce(o, t || !r ? I.text : "Kies")}</span>`);
 		return f`
       <lintje-tooltip class="lintje-map-chart__tip ${e}" text=${a} placement="left" no-describe>
         <button type="button"
                 class="lintje-map-chart__zoom-button lintje-map-chart__tool ${r ? "lintje-map-chart__tool--menu" : ""} ${t ? "is-active" : ""}"
                 aria-label=${a} aria-pressed=${t}
                 aria-haspopup=${r && !t ? "menu" : s} aria-expanded=${r && !t ? String(i) : s}
-                aria-controls=${r && !t ? ye : s}
+                aria-controls=${r && !t ? ve : s}
                 @click=${() => {
-			t ? me(null) : r ? xe(!i, "checked") : me(F.tool);
+			t ? me(null) : r ? xe(!i, "checked") : me(I.tool);
 		}}
                 @keydown=${(e) => {
 			!r || t || e.key !== "ArrowDown" && e.key !== "ArrowUp" || (e.preventDefault(), xe(!0, e.key === "ArrowDown" ? "first" : "last"));
@@ -21630,12 +21637,12 @@ function Mt(e, t) {
       ${r ? ke(i) : s}
     `;
 	}, ke = (e) => f`
-      <lintje-popover id=${ye} panel-role="menu" label="Andere vorm" placement="left-start" ?open=${e}
+      <lintje-popover id=${ve} panel-role="menu" label="Andere vorm" placement="left-start" ?open=${e}
                       @lintje-close=${(e) => {
 		e.stopPropagation(), Ce(e.detail?.reason === "escape");
 	}}>
         ${e ? f`<div class="lintje-menu lintje-map-chart__menu" ${p(Ee)} @keydown=${Te}>
-            ${I.map((e) => f`
+            ${R.map((e) => f`
               <button type="button" class="lintje-menu__row focus-inset" role="menuitemradio" tabindex="-1"
                       aria-checked=${String(e.checked)}
                       @click=${() => De(e.value)}>
@@ -21664,11 +21671,11 @@ function Mt(e, t) {
           <b>${j.label}</b>
           ${N(j) ? f`<span class="lintje-map-chart__selection-series">
                 <svg class="lintje-map-chart__series-swatch" viewBox="0 0 14 14" aria-hidden="true" focusable="false">
-                  <path d=${C(j.series, 5.5, 7, 7)} fill=${ce(j.series) ?? "currentColor"} />
+                  <path d=${w(j.series, 5.5, 7, 7)} fill=${S(j.series) ?? "currentColor"} />
                 </svg>${N(j)}
               </span>` : s}
           <span class="lintje-map-chart__selection-value">
-            ${j.value == null ? "geen gegevens" : R(g(j.value), M?.unit ?? d)}${j.detail ? ` · ${j.detail}` : ""}
+            ${j.value == null ? "geen gegevens" : be(c(j.value), M?.unit ?? h)}${j.detail ? ` · ${j.detail}` : ""}
           </span>
           <!-- Only when the mark carries a URL the host minted: without one
                the link had nowhere to go and did nothing. -->
@@ -21679,14 +21686,14 @@ function Mt(e, t) {
             </button>
           ` : s}
         </div>
-      ` : T ? f`
+      ` : E ? f`
         <div class="lintje-map-chart__selection ${e}">
           <span class="lintje-map-chart__selection-title">Geselecteerd</span>
           <button type="button" class="lintje-map-chart__selection-close"
                   aria-label="Selectie opheffen"
                   @click=${() => de()}>${v("functioneel-kruis", { size: 14 })}</button>
-          <b>${D.length === 0 ? "Niets" : D.length === 1 ? "1 op de kaart" : `${g(D.length)} op de kaart`}</b>
-          <span class="lintje-map-chart__selection-value">${jt(T)}</span>
+          <b>${D.length === 0 ? "Niets" : D.length === 1 ? "1 op de kaart" : `${c(D.length)} op de kaart`}</b>
+          <span class="lintje-map-chart__selection-value">${jt(E)}</span>
         </div>
       ` : s;
 	}, je = n.mapHint ? n.mapHint : n.mapTool ? Tt[n.mapTool][i ? "short" : "full"] : null;
@@ -21697,13 +21704,13 @@ function Mt(e, t) {
 		if (e.key === "Escape") {
 			if (n.mapTool) n.mapTool = null;
 			else if (O) P();
-			else if (T) de();
+			else if (E) de();
 			else return;
 			e.stopPropagation(), n.requestUpdate();
 		}
 	}}>
       ${b.legend ? Ct({
-		drawings: se,
+		drawings: oe,
 		hiddenLayers: le,
 		hiddenSeries: ue,
 		expanded: ie,
@@ -21715,19 +21722,19 @@ function Mt(e, t) {
 			n.mapLegendOpen = e, n.requestUpdate();
 		}
 	}) : s}
-      <div class="lintje-map-chart__area" ${o({ height: `${oe}px` })} data-tooltip-anchor
+      <div class="lintje-map-chart__area" ${o({ height: `${ae}px` })} data-tooltip-anchor
            @wheel=${{
 		handleEvent: (e) => {
 			if (b.wheel) {
 				if (!Dt(e)) return K(n);
-				e.preventDefault(), he.zoomBy(e, Ot(e));
+				e.preventDefault(), F.zoomBy(e, Ot(e));
 			}
 		},
 		passive: !1
 	}}>
         <p class="visually-hidden">${r}</p>
-        <div class="lintje-map-chart__leaflet" ${p(he.attach)}></div>
-        ${E(n)}
+        <div class="lintje-map-chart__leaflet" ${p(F.attach)}></div>
+        ${se(n)}
 
         <!-- Layer switcher top left. -->
         ${y && y.length > 1 ? f`
@@ -21736,7 +21743,7 @@ function Mt(e, t) {
               <button type="button"
                       class="lintje-map-chart__layer ${e.value === ee ? "is-active" : ""}"
                       aria-pressed=${e.value === ee}
-                      @click=${() => l?.(e.value)}>${e.label}</button>
+                      @click=${() => u?.(e.value)}>${e.label}</button>
             `)}
           </div>
         ` : s}
@@ -21744,12 +21751,12 @@ function Mt(e, t) {
         ${je ? f`<p class="lintje-map-chart__hint" role="status">${je}</p>` : s}
 
         <!-- Zoom, reset and the drawing tools top right, those the host keeps. -->
-        ${ge.length + x.length > 0 ? f`
+        ${he.length + x.length > 0 ? f`
         <div class="lintje-map-chart__zoom">
-          ${ge.map((e) => f`
+          ${he.map((e) => f`
             <lintje-tooltip class="lintje-map-chart__tip" text=${e.label} placement="left" no-describe>
               <button type="button" class="lintje-map-chart__zoom-button" aria-label=${e.label}
-                      @click=${() => ve(e.action)}>${S(e.name, e.text, 16, "flip" in e ? e.flip : void 0)}</button>
+                      @click=${() => _e(e.action)}>${ce(e.name, e.text, 16, "flip" in e ? e.flip : void 0)}</button>
             </lintje-tooltip>
           `)}
           ${Oe()}
@@ -21757,9 +21764,9 @@ function Mt(e, t) {
         ` : s}
 
         <!-- The scale bottom right: a round distance, and a bracket as long as it on the map. -->
-        ${_e ? f`<div class="lintje-map-chart__scale-bar" aria-hidden="true">
-          <span>${At(_e.metres)}</span>
-          <span class="lintje-map-chart__scale-line" ${o({ width: `${_e.width}px` })}></span>
+        ${ge ? f`<div class="lintje-map-chart__scale-bar" aria-hidden="true">
+          <span>${At(ge.metres)}</span>
+          <span class="lintje-map-chart__scale-line" ${o({ width: `${ge.width}px` })}></span>
         </div>` : s}
 
         <!-- What was chosen, bottom left; on a phone under the map. -->
@@ -21782,13 +21789,13 @@ var It = u(Nt), Lt = [
 	u(Ft(Pt)),
 	It,
 	d
-], Rt = class extends ie {
+], Rt = class extends re {
 	static {
 		this.styles = [
 			e,
 			i(ne),
 			i(n),
-			...b,
+			...E,
 			...Lt
 		];
 	}
@@ -21798,7 +21805,7 @@ var It = u(Nt), Lt = [
 			layer: { state: !0 }
 		};
 	}
-	#e = new D(() => this.requestUpdate());
+	#e = new x(() => this.requestUpdate());
 	#t = null;
 	#n = new t(this);
 	#r = void 0;
@@ -21807,7 +21814,7 @@ var It = u(Nt), Lt = [
 		return this.data ?? void 0;
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.#i = c((e) => {
+		super.connectedCallback(), this.#i = a((e) => {
 			this.#e.leaflet?.print(e), this.isUpdatePending && this.performUpdate();
 		});
 	}
@@ -21815,20 +21822,20 @@ var It = u(Nt), Lt = [
 		this.#i?.(), this.#i = null, this.#e.detach(), this.#t?.detach(), this.#t = null, super.disconnectedCallback();
 	}
 	expandChanged(e) {
-		e ? this.#t ??= new D(() => this.requestUpdate()) : (this.#t?.detach(), this.#t = null);
+		e ? this.#t ??= new x(() => this.requestUpdate()) : (this.#t?.detach(), this.#t = null);
 	}
 	willUpdate(e) {
 		super.willUpdate(e), e.has("data") && this.data?.layer !== this.#r && (this.#r = this.data?.layer, this.layer = this.data?.layer);
 	}
 	png() {
 		let e = this.renderRoot.querySelector(this.expanded ? "lintje-modal" : "lintje-tile")?.querySelector(".leaflet-overlay-pane svg");
-		e && x((this.data?.download || void 0)?.filename ?? "kaart", e);
+		e && ie((this.data?.download || void 0)?.filename ?? "kaart", e);
 	}
 	csv() {
 		let e = this.data;
 		if (!e?.download) return;
-		let t = e.unit ?? "aantal", n = be(e, t), r = e.variant === "plots", i = n.every((e) => e.unit === t), a = (e) => i || !e.unit ? e.name : `${e.name} (${e.unit})`, o = n.some((e) => e.values.some((e) => e.detail));
-		oe(e.download.filename, [[
+		let t = e.unit ?? "aantal", n = ye(e, t), r = e.variant === "plots", i = n.every((e) => e.unit === t), a = (e) => i || !e.unit ? e.name : `${e.name} (${e.unit})`, o = n.some((e) => e.values.some((e) => e.detail));
+		b(e.download.filename, [[
 			"",
 			i ? t : "",
 			...r ? ["Laag"] : [],
@@ -21884,7 +21891,7 @@ var It = u(Nt), Lt = [
 	content(e) {
 		let t = this.data;
 		switch (t.state ?? "ready") {
-			case "loading": return f`<div slot="loading">${re({
+			case "loading": return f`<div slot="loading">${D({
 				kind: "map",
 				height: e,
 				status: !1