lintje 0.1.1

package/dist-elements/tag/field.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/inputs/field/field.js'

package/dist-elements/tag/field.js

@@ -0,0 +1,56 @@
+import { Bt as e, Gt as t, Ht as n, Kt as r, Z as i, zt as a } from "../chunks/base-rBLTcEIv.js";
+//#region src/components/inputs/field/field.css?inline
+var o = "/* `min-width: 0`, or a grid item overflows. */\n:host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n:host([stacked]) { width: 100%; --h-control: var(--h-touch); }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }\n.lintje-filter-field__label {\n  display: flex; align-items: center; gap: 6px;\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  color: var(--color-text-muted);\n}\n.lintje-filter-field__label.is-modified { color: var(--color-accent-text); }\n.lintje-filter-field__dot {\n  width: 6px; height: 6px; border-radius: 50%;\n  background: var(--color-attention);\n  flex: none;\n}\n\n:host([stacked]) .lintje-filter-field { gap: var(--space-2); }\n\n/* Forced colours drop the label colour; the dot keeps its drawing in CanvasText. */\n@media (forced-colors: active) {\n  .lintje-filter-field__dot { forced-color-adjust: none; background: CanvasText; }\n}\n";
+//#endregion
+//#region src/components/inputs/field/field.ts
+function s(e) {
+	if (e instanceof HTMLElement) {
+		e.focus();
+		let t = e.getRootNode().activeElement;
+		if (t && (t === e || e.contains(t))) return !0;
+	}
+	return [...e.children].some(s);
+}
+var c = class extends a {
+	constructor(...e) {
+		super(...e), this.label = "", this.modified = !1, this.stacked = !1;
+	}
+	static {
+		this.styles = n(o);
+	}
+	static {
+		this.properties = {
+			label: { type: String },
+			modified: {
+				type: Boolean,
+				reflect: !0
+			},
+			stacked: {
+				type: Boolean,
+				reflect: !0
+			}
+		};
+	}
+	focusControl() {
+		this.renderRoot.querySelector("slot")?.assignedElements({ flatten: !0 }).some(s);
+	}
+	render() {
+		return r`<div class="lintje-filter-field">
+      <label
+        class=${i({
+			"lintje-filter-field__label": !0,
+			"is-modified": this.modified
+		})}
+        @click=${this.focusControl}
+      >
+        ${this.label}
+        ${this.modified ? r`<span class="lintje-filter-field__dot" aria-hidden="true"></span
+                ><span class="visually-hidden">afwijkend van standaard</span>` : t}
+      </label>
+      <slot></slot>
+    </div>`;
+	}
+};
+e("lintje-field", c);
+//#endregion
+export { c as LintjeField };

package/dist-elements/tag/file-upload.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/inputs/file-upload/file-upload.js'

package/dist-elements/tag/file-upload.js

@@ -0,0 +1,263 @@
+import { $ as e, Bt as t, Gt as n, Ht as r, It as i, Kt as a, Lt as o, U as s, Z as c, et as l } from "../chunks/base-rBLTcEIv.js";
+import { n as u } from "../chunks/focus-trap-w3vCamJ6.js";
+import { r as d, t as f } from "../chunks/input-jQVTln7H.js";
+//#region src/components/inputs/file-upload/file-upload.css?inline
+var p = "/* The drop zone and the list of files under it. */\n:host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n:host([fill]) { height: 100%; }\n:host([fill]) .lintje-field { height: 100%; }\n\n/* --- */\n\n/* The zone itself does not answer the pointer: only the button does. Its content stands centred,\n   so a wide zone does not leave it huddled in one corner. */\n.lintje-file-upload {\n  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;\n  gap: var(--space-2) var(--space-3);\n  padding: var(--space-6) var(--space-4);\n  border: 2px dashed var(--color-border-heavy);\n  background: var(--color-bg-page);\n  color: var(--color-text-primary);\n  font: var(--text-ui);\n  text-align: center;\n}\n.lintje-file-upload__icon { flex: none; }\n.lintje-file-upload--fill {\n  flex: 1;\n  flex-direction: column;\n  justify-content: center;\n  min-height: calc(4 * var(--h-control));\n  text-align: center;\n}\n.lintje-file-upload--fill .lintje-file-upload__meta { flex-basis: auto; }\n.lintje-file-upload__meta {\n  flex-basis: 100%;\n  font: var(--text-meta);\n  color: var(--color-text-muted);\n}\n\n.lintje-file-upload.is-dragging {\n  border-style: solid;\n  border-color: var(--color-accent-line);\n  background: var(--color-bg-selected);\n}\n.lintje-file-upload.is-error { border-style: solid; border-color: var(--color-error); }\n.lintje-file-upload.is-disabled {\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n}\n.lintje-file-upload.is-disabled .lintje-file-upload__meta { color: var(--color-text-disabled); }\n\n/* --- The files ----------------------------------------------------------- */\n.lintje-file-upload__list { display: flex; flex-direction: column; gap: var(--space-3); }\n.lintje-file-upload__row { display: flex; flex-direction: column; gap: 6px; }\n.lintje-file-upload__row-head {\n  display: flex; flex-wrap: wrap; align-items: center;\n  gap: var(--space-2) var(--space-3);\n}\n.lintje-file-upload__row-icon { flex: none; }\n.lintje-file-upload__row.is-busy .lintje-file-upload__row-icon { color: var(--color-text-muted); }\n.lintje-file-upload__row.is-done .lintje-file-upload__row-icon { color: var(--color-success); }\n.lintje-file-upload__row.is-error .lintje-file-upload__row-icon { color: var(--color-error); }\n.lintje-file-upload__name {\n  flex: 1 1 120px; min-width: 0;\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n  overflow-wrap: anywhere;\n}\n.lintje-file-upload__detail { color: var(--color-text-muted); }\n.lintje-file-upload__reason {\n  display: block;\n  font: var(--text-meta);\n  font-weight: 700;\n  color: var(--color-error-text);\n}\n\n/* Below 768 px nobody drags: the words go and the button takes the full width. */\n@media (max-width: 767px) {\n  .lintje-file-upload__text { display: none; }\n  .lintje-file-upload.is-dragging .lintje-file-upload__text { display: inline; }\n  .lintje-file-upload__button { flex: 1 1 100%; --h-button: var(--h-touch); }\n}\n", m = new Intl.NumberFormat("nl-NL", { maximumFractionDigits: 1 });
+function h(e) {
+	for (let [t, n] of [
+		[1024 ** 3, "GB"],
+		[1024 ** 2, "MB"],
+		[1024, "kB"]
+	]) if (e >= t) {
+		let r = e / t;
+		return `${n === "kB" ? Math.round(r) : m.format(r)} ${n}`;
+	}
+	return `${e} B`;
+}
+var g = {
+	image: "afbeeldingen",
+	audio: "geluid",
+	video: "video",
+	text: "tekst"
+};
+function _(e) {
+	let t = e.split(",").map((e) => e.trim()).filter(Boolean).map((e) => {
+		if (e.startsWith(".")) return e.slice(1).toUpperCase();
+		let [t, n] = e.split("/");
+		return n === "*" ? g[t] ?? t : (n ?? t).toUpperCase();
+	});
+	return t.length < 2 ? t.join("") : `${t.slice(0, -1).join(", ")} of ${t[t.length - 1]}`;
+}
+function v(e, t) {
+	let n = t.split(",").map((e) => e.trim().toLowerCase()).filter(Boolean);
+	if (!n.length) return !0;
+	let r = e.name.toLowerCase(), i = e.type.toLowerCase();
+	return n.some((e) => e.startsWith(".") ? r.endsWith(e) : e.endsWith("/*") ? i.startsWith(e.slice(0, -1)) : i === e);
+}
+function y(e, t, n) {
+	return v(e, t) ? n && e.size > n ? `Groter dan ${h(n)}` : "" : "Dit bestandstype kan niet";
+}
+function b(e, t) {
+	let n = new Map(e.map((e) => [e.id, e.state])), r = [];
+	for (let e of t) {
+		let t = n.get(e.id);
+		t !== e.state && (e.state === "error" ? r.push(`${e.name} geweigerd: ${e.message ?? ""}`.trim()) : e.state === "done" ? r.push(`${e.name} klaar`) : t === void 0 && r.push(`${e.name} toegevoegd`));
+	}
+	return r.join(". ");
+}
+var x = {
+	busy: "bezig",
+	done: "klaar",
+	error: "geweigerd"
+}, S = (e) => (e ?? []).filter((e) => e.state === "done").map((e) => e.id), C = (e) => [...e.dataTransfer?.types ?? []].includes("Files"), w = class extends d {
+	constructor(...e) {
+		super(...e), this.accept = "", this.single = !1, this.fill = !1, this.dragging = !1, this.dragCount = 0, this.refused = [], this.news = "", this.#e = new o(this, i), this.#t = 0, this.#n = 0, this.#r = null, this.onDragEnter = (e) => {
+			!this.disabled && C(e) && (this.#t += 1, this.dragging = !0, this.dragCount = e.dataTransfer?.items?.length ?? 0);
+		}, this.onDragLeave = () => {
+			this.dragging && (this.#t = Math.max(0, this.#t - 1), this.#t === 0 && (this.dragging = !1));
+		}, this.onDragEnd = () => {
+			this.#t = 0, this.dragging = !1;
+		};
+	}
+	static {
+		this.styles = [
+			e,
+			r(f),
+			r(p)
+		];
+	}
+	static {
+		this.properties = {
+			files: { attribute: !1 },
+			accept: { type: String },
+			maxSize: {
+				type: Number,
+				attribute: "max-size"
+			},
+			single: { type: Boolean },
+			fill: {
+				type: Boolean,
+				reflect: !0
+			},
+			dragging: { state: !0 },
+			dragCount: { state: !0 },
+			refused: { state: !0 },
+			news: { state: !0 }
+		};
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	connectedCallback() {
+		super.connectedCallback(), document.addEventListener("dragenter", this.onDragEnter), document.addEventListener("dragleave", this.onDragLeave), document.addEventListener("drop", this.onDragEnd), document.addEventListener("dragend", this.onDragEnd);
+	}
+	disconnectedCallback() {
+		document.removeEventListener("dragenter", this.onDragEnter), document.removeEventListener("dragleave", this.onDragLeave), document.removeEventListener("drop", this.onDragEnd), document.removeEventListener("dragend", this.onDragEnd), this.onDragEnd(), super.disconnectedCallback();
+	}
+	willUpdate(e) {
+		if (super.willUpdate(e), (e.has("files") || e.has("refused")) && (this.#r = this.focusedRow()), !e.has("files")) return;
+		let t = e.get("files"), n = b(t ?? [], this.files ?? []);
+		if (n && (this.news = n), t === void 0) return;
+		let r = S(this.files);
+		r.join("\n") !== S(t).join("\n") && this.announce(r);
+	}
+	updated(e) {
+		super.updated(e);
+		let t = this.#r;
+		if (this.#r = null, !t) return;
+		let n = this.rowElements;
+		if (n.some((e) => e.dataset.id === t.id)) return;
+		let r = n[Math.min(t.index, n.length - 1)]?.querySelector("lintje-button") ?? this.chooser;
+		r && u(r).focus();
+	}
+	get rowElements() {
+		return [...this.renderRoot.querySelectorAll(".lintje-file-upload__row")];
+	}
+	get chooser() {
+		return this.renderRoot.querySelector(".lintje-file-upload__button");
+	}
+	focusedRow() {
+		let e = this.rowElements, t = e.findIndex((e) => s(e));
+		return t < 0 ? null : {
+			id: e[t].dataset.id ?? "",
+			index: t
+		};
+	}
+	add(e) {
+		if (this.disabled || !e.length) return;
+		let t = this.single ? e.slice(0, 1) : e, n = [], r = [];
+		for (let e of t) {
+			let t = y(e, this.accept, this.maxSize);
+			t ? (this.#n += 1, r.push({
+				id: `lintje-refused-${this.#n}`,
+				name: e.name,
+				size: e.size,
+				state: "error",
+				message: t
+			})) : n.push(e);
+		}
+		r.length && (this.refused = [...this.refused, ...r], this.news = b([], r)), n.length && this.emit("lintje-files-add", n);
+	}
+	focusControl(e) {
+		this.chooser?.shadowRoot?.querySelector("button")?.focus(e);
+	}
+	pick() {
+		this.renderRoot.querySelector(".lintje-file-upload__input")?.click();
+	}
+	onPicked(e) {
+		let t = e.target;
+		this.add([...t.files ?? []]), t.value = "";
+	}
+	onDragOver(e) {
+		!this.disabled && C(e) && e.preventDefault();
+	}
+	onDrop(e) {
+		this.disabled || (e.preventDefault(), this.onDragEnd(), this.add([...e.dataTransfer?.files ?? []]));
+	}
+	removeRow(e) {
+		this.refused.some((t) => t.id === e.id) ? this.refused = this.refused.filter((t) => t.id !== e.id) : this.emit("lintje-file-remove", { id: e.id });
+	}
+	get dropText() {
+		let e = this.dragCount;
+		return e ? `Laat los om ${e} ${e === 1 ? "bestand" : "bestanden"} toe te voegen` : "Laat los om de bestanden toe te voegen";
+	}
+	get metaText() {
+		return [this.accept ? _(this.accept) : "", this.maxSize ? `hoogstens ${h(this.maxSize)}` : ""].filter(Boolean).join(" · ");
+	}
+	renderRow(e) {
+		let t = e.state === "busy", r = {
+			busy: "op-kantoor-document-blanco",
+			done: "functioneel-vinkje",
+			error: "functioneel-waarschuwing"
+		}[e.state], i = typeof e.progress == "number", o = t ? i ? `· ${Math.round(e.progress)}%` : "" : e.state === "done" ? `· ${h(e.size)}` : "";
+		return a`<li
+      class=${c({
+			"lintje-file-upload__row": !0,
+			[`is-${e.state}`]: !0
+		})}
+      data-id=${e.id}
+    >
+      <div class="lintje-file-upload__row-head">
+        ${l(r, {
+			size: 18,
+			className: "lintje-file-upload__row-icon"
+		})}
+        <span class="lintje-file-upload__name">
+          <strong>${e.name}</strong
+          ><span class="visually-hidden">, ${x[e.state]}</span>
+          ${o ? a`<span class="lintje-file-upload__detail">${o}</span>` : n}
+          ${e.state === "error" && e.message ? a`<span class="lintje-file-upload__reason">${e.message}</span>` : n}
+        </span>
+        <lintje-button
+          variant="link"
+          @click=${() => t ? this.emit("lintje-file-cancel", { id: e.id }) : this.removeRow(e)}
+          >${t ? "Annuleren" : "Verwijderen"}<span class="visually-hidden">
+            ${e.name}</span
+          ></lintje-button
+        >
+      </div>
+      ${t ? a`<lintje-progress-bar
+            hide-label
+            label=${`${e.name} uploaden`}
+            .value=${i ? e.progress : void 0}
+          ></lintje-progress-bar>` : n}
+    </li>`;
+	}
+	render() {
+		let e = [...this.files ?? [], ...this.refused], t = this.dragging && !this.disabled, r = this.metaText, i = this.single ? "Bestand kiezen" : "Bestanden kiezen", o = [r, this.footMessage || this.hint].filter(Boolean).join(". ");
+		return a`<div class="lintje-field">
+      ${this.label ? this.renderLabel() : n}
+      <div
+        class=${c({
+			"lintje-file-upload": !0,
+			"lintje-file-upload--fill": this.fill,
+			"is-dragging": t,
+			"is-error": !!this.error,
+			"is-disabled": this.disabled
+		})}
+        @dragover=${this.onDragOver}
+        @drop=${this.onDrop}
+      >
+        ${t ? a`${l("functioneel-upload", {
+			size: 20,
+			className: "lintje-file-upload__icon"
+		})}
+                <strong class="lintje-file-upload__text">${this.dropText}</strong>` : a`<lintje-button
+                  class="lintje-file-upload__button"
+                  variant="secondary"
+                  icon="functioneel-upload"
+                  ?block=${this.#e.matches}
+                  ?disabled=${this.disabled}
+                  ?invalid=${!!this.error}
+                  accessible-name=${this.label ? `${i}, ${this.labelText}` : n}
+                  description=${o || n}
+                  @click=${this.pick}
+                  >${i}</lintje-button
+                >
+                <span class="lintje-file-upload__text"
+                  >${this.single ? "of sleep het hierheen" : "of sleep ze hierheen"}</span
+                >
+                ${r ? a`<span class="lintje-file-upload__meta">${r}</span>` : n}`}
+        <input
+          class="lintje-file-upload__input"
+          type="file"
+          hidden
+          tabindex="-1"
+          accept=${this.accept || n}
+          ?multiple=${!this.single}
+          ?disabled=${this.disabled}
+          @change=${this.onPicked}
+        />
+      </div>
+      ${e.length ? a`<ul class="lintje-file-upload__list" aria-label="Bestanden">
+            ${e.map((e) => this.renderRow(e))}
+          </ul>` : n}
+      <span class="visually-hidden" role="status">${this.news}</span>
+      ${this.renderFoot()}
+    </div>`;
+	}
+};
+t("lintje-file-upload", w);
+//#endregion
+export { w as LintjeFileUpload, v as accepts, h as formatSize, y as refusal, b as rowNews, _ as typesText };

package/dist-elements/tag/filter-bar.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/filters/filter-bar/filter-bar.js'

package/dist-elements/tag/filter-bar.js

@@ -0,0 +1,271 @@
+import { Bt as e, Et as t, Gt as n, Ht as r, It as i, Kt as a, Lt as o, Ot as s, Tt as c, kt as l, zt as u } from "../chunks/base-rBLTcEIv.js";
+import "./toggle.js";
+import "./segmented.js";
+import "./text-input.js";
+import "./field.js";
+import "./number-input.js";
+import "./select.js";
+import "./multiselect.js";
+import "./range.js";
+import "./date-range.js";
+import { n as d } from "../chunks/sentence-CLNJOeXz.js";
+import "./filter-zone.js";
+import "./filter-sheet.js";
+//#region src/components/filters/shared/filter-layout.css?inline
+var f = "/*\n * Layout rules across component boundaries, adopted by the filter bar: `.lintje-select` sits in\n * `lintje-select`'s shadow root, so the rules are written by tag. An outer rule beats the\n * control's own `:host` rule, so no `!important`.\n */\n\nlintje-filter-zone lintje-field,\nlintje-filter-sheet lintje-field { min-width: 0; }\n\n/* 1024-1439: narrower selects, so four controls fit on one line. */\n@media (min-width: 1024px) and (max-width: 1439px) {\n  lintje-filter-zone lintje-select { width: 148px; }\n}\n@media (min-width: 768px) and (max-width: 1023px) {\n  lintje-filter-zone lintje-select,\n  lintje-filter-zone lintje-multiselect { width: 100%; }\n}\n\n/* The host takes the control height and centres the toggle's pill in it. */\nlintje-filter-zone lintje-toggle {\n  display: grid;\n  align-items: center;\n  min-height: var(--h-control);\n}\n\n/* A select's width, so the placeholder stays on one line. */\nlintje-filter-zone lintje-multiselect { width: 180px; }\n\n:host {\n  display: block;\n}\n:host([hidden]) { display: none; }\n", p = (e, t) => JSON.stringify(e ?? null) === JSON.stringify(t ?? null), m = (e) => e ? e.split("-").reverse().join("-") : null, h = (e) => e ? e.split("-").reverse().join("-") : null, g = (e) => {
+	let [t, n, r] = e.split("-").map(Number);
+	return new Date(t, n - 1, r);
+};
+function _(e, t) {
+	return e.options?.find((e) => e.value === t)?.label ?? t;
+}
+function v(e, t) {
+	switch (e.kind) {
+		case "select":
+		case "segmented": return typeof t == "string" && t !== "" ? _(e, t) : "alle";
+		case "multiselect": {
+			let n = Array.isArray(t) ? t : [];
+			return n.length === 0 || n.length === e.options?.length ? "alle" : n.map((t) => _(e, t)).join(", ");
+		}
+		case "date-range": {
+			let e = t;
+			return e?.from && e.to ? `${m(e.from)} t/m ${m(e.to)}` : "alle datums";
+		}
+		case "range": {
+			let [n, r] = t ?? [0, (e.steps?.length ?? 1) - 1];
+			return `${e.steps?.[n]} – ${e.steps?.[r]}`;
+		}
+		case "slider": return typeof t == "number" ? `${t}${e.unit ? ` ${e.unit}` : ""}` : "alle";
+		case "toggle": return t === !0 ? "aan" : "uit";
+		case "text": return typeof t == "string" && t !== "" ? t : "alle";
+		case "number": return typeof t == "number" ? `${t}${e.unit ? ` ${e.unit}` : ""}` : "alle";
+	}
+}
+function y(e, t) {
+	let n = [{
+		text: "Je ziet: ",
+		emphasis: !1
+	}];
+	return e.forEach((e, r) => {
+		r > 0 && n.push({
+			text: " · ",
+			emphasis: !1
+		}), n.push({
+			text: `${e.label} `,
+			emphasis: !1
+		}), n.push({
+			text: v(e, t[e.key]),
+			emphasis: !0
+		});
+	}), n.push({
+		text: ".",
+		emphasis: !1
+	}), n;
+}
+var b = class extends u {
+	constructor(...e) {
+		super(...e), this.values = {}, this.draft = {}, this.open = !1, this.mobile = new o(this, i), this.frame = new c(this), this.sheetWasOpen = !1, this.committed = "", this.declaredOpen = void 0;
+	}
+	static {
+		this.styles = r(f);
+	}
+	static {
+		this.properties = {
+			data: { attribute: !1 },
+			values: { state: !0 },
+			draft: { state: !0 },
+			open: { state: !0 }
+		};
+	}
+	get dataSettings() {
+		return this.data ?? void 0;
+	}
+	get filters() {
+		return this.data?.filters ?? [];
+	}
+	get visible() {
+		return this.filters.filter((e) => !e.hidden);
+	}
+	get defaults() {
+		return Object.fromEntries(this.visible.map((e) => [e.key, e.default]));
+	}
+	willUpdate(e) {
+		if (super.willUpdate(e), e.has("data") && this.data) {
+			let e = Object.fromEntries(this.visible.map((e) => [e.key, e.value])), t = JSON.stringify(e);
+			t !== this.committed && (this.committed = t, this.values = e);
+			let n = this.data.open ?? !1;
+			n !== this.declaredOpen && (this.declaredOpen = n, this.open = n);
+		}
+		if (this.data?.standalone) return;
+		let t = this.frame.state.sheetOpen;
+		t && !this.sheetWasOpen && (this.draft = { ...this.values }), this.sheetWasOpen = t;
+		let n = y(this.visible, this.values);
+		s({
+			hasFilters: !0,
+			modifiedCount: this.modifiedCount,
+			summary: d(n)
+		});
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.data?.standalone || t();
+	}
+	isModified(e, t) {
+		return !p(e[t.key], t.default);
+	}
+	get modifiedCount() {
+		return this.visible.filter((e) => this.isModified(this.values, e)).length;
+	}
+	commit(e) {
+		this.values = e, this.emit("lintje-values-change", e);
+	}
+	control(e, t, r, i, o) {
+		let s = e.options ?? [];
+		switch (e.kind) {
+			case "segmented": return a`<lintje-segmented
+          ?stacked=${i}
+          hide-label
+          label=${e.label}
+          value=${t ?? ""}
+          .options=${s}
+          @lintje-change=${(e) => o(e.detail)}
+        ></lintje-segmented>`;
+			case "select": return a`<lintje-select
+          ?stacked=${i}
+          hide-label
+          label=${e.label}
+          value=${t ?? ""}
+          .options=${s}
+          ?bold=${r}
+          @lintje-change=${(e) => o(e.detail)}
+        ></lintje-select>`;
+			case "multiselect": return a`<lintje-multiselect
+          ?stacked=${i}
+          hide-label
+          label=${e.label}
+          .options=${s}
+          .selected=${Array.isArray(t) ? t : []}
+          @lintje-change=${(e) => o(e.detail)}
+        ></lintje-multiselect>`;
+			case "date-range": {
+				let n = t;
+				return a`<lintje-date-range
+          ?stacked=${i}
+          hide-label
+          accessible-name=${e.label}
+          .range=${{
+					from: m(n?.from ?? null),
+					to: m(n?.to ?? null)
+				}}
+          .maxDate=${typeof e.max == "string" ? g(e.max) : void 0}
+          @lintje-change=${(e) => o({
+					from: h(e.detail.from),
+					to: h(e.detail.to)
+				})}
+        ></lintje-date-range>`;
+			}
+			case "range": {
+				let n = e.steps ?? [], [r, s] = t ?? [0, n.length - 1];
+				return a`<lintje-range
+          ?stacked=${i}
+          hide-label
+          label=${e.label}
+          .steps=${n}
+          .from=${r}
+          .to=${s}
+          @lintje-change=${(e) => o(e.detail)}
+        ></lintje-range>`;
+			}
+			case "slider": {
+				let r = e.steps ?? [];
+				return a`<lintje-range
+          single
+          ?stacked=${i}
+          hide-label
+          label=${e.label}
+          unit=${e.unit ?? n}
+          .steps=${r}
+          .value=${typeof t == "number" ? t : r[0] ?? null}
+          @lintje-change=${(e) => o(e.detail)}
+        ></lintje-range>`;
+			}
+			case "toggle": return a`<lintje-toggle
+          hide-label
+          label=${e.label}
+          ?checked=${t === !0}
+          @lintje-change=${(e) => o(e.detail)}
+        ></lintje-toggle>`;
+			case "text": return a`<lintje-text-input
+          ?stacked=${i}
+          hide-label
+          clearable
+          label=${e.label}
+          .value=${typeof t == "string" ? t : ""}
+          placeholder=${e.placeholder ?? n}
+          @lintje-change=${(e) => o(e.detail)}
+        ></lintje-text-input>`;
+			case "number": return a`<lintje-number-input
+          ?stacked=${i}
+          hide-label
+          label=${e.label}
+          .value=${typeof t == "number" ? t : null}
+          .min=${e.min}
+          .max=${typeof e.max == "number" ? e.max : void 0}
+          .step=${e.step ?? 1}
+          unit=${e.unit ?? n}
+          .stepper=${e.unit === void 0}
+          @lintje-change=${(e) => o(e.detail)}
+        ></lintje-number-input>`;
+		}
+	}
+	fields(e, t, n) {
+		return a`${this.visible.map((r) => {
+			let i = this.isModified(e, r);
+			return a`<lintje-field label=${r.label} ?modified=${i} ?stacked=${t}>
+        ${this.control(r, e[r.key], i, t, (t) => n({
+				...e,
+				[r.key]: t
+			}))}
+      </lintje-field>`;
+		})}`;
+	}
+	render() {
+		let e = y(this.visible, this.values), t = this.frame.state.sheetOpen && this.mobile.matches && !this.data?.standalone;
+		return a`
+      <lintje-filter-zone
+        stick="fixed"
+        .total=${this.visible.length}
+        .modified=${this.modifiedCount}
+        .open=${this.open}
+        ?scrolled=${this.frame.state.scrolled}
+        .sentence=${e}
+        @lintje-filters-reset=${() => this.commit(this.defaults)}
+        @lintje-zone-open-change=${(e) => {
+			this.open = e.detail, this.emit("lintje-filters-open-change", e.detail);
+		}}
+        @lintje-zone-scrolled-change=${(e) => l(e.detail)}
+      >
+        ${this.fields(this.values, !1, (e) => this.commit(e))}
+      </lintje-filter-zone>
+
+      <lintje-filter-sheet
+        ?open=${t}
+        .sentence=${y(this.visible, this.draft)}
+        ?reset-disabled=${this.visible.every((e) => !this.isModified(this.draft, e))}
+        @lintje-sheet-close=${() => s({ sheetOpen: !1 })}
+        @lintje-filters-reset=${() => {
+			this.draft = this.defaults;
+		}}
+        @lintje-filters-apply=${() => {
+			this.commit(this.draft), s({ sheetOpen: !1 });
+		}}
+      >
+        ${this.fields(this.draft, !0, (e) => {
+			this.draft = e;
+		})}
+      </lintje-filter-sheet>
+    `;
+	}
+};
+e("lintje-filter-bar", b);
+//#endregion
+export { b as LintjeFilterBar };

package/dist-elements/tag/filter-sheet.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/filters/filter-sheet/filter-sheet.js'