lintje 0.5.1 → 0.6.0

package/dist-elements/tag/text-editor.js

@@ -1,392 +1,31 @@
-import { Yt as e, Zt as t, en as n, et as r, lt as i, nn as a, st as o } from "../chunks/base-Bd2pmq86.js";
-import { n as s } from "../chunks/input-KqBT3qWD.js";
-import { t as c } from "../chunks/input-Dg1o0Sfu.js";
-import { t as l } from "../chunks/prose-CmKVp5kL.js";
-import "./text-input.js";
-//#region src/components/inputs/text-editor/text-editor.css?inline
-var u = "/* The text editor: a frame with the toolbar on top and the editing surface under it. */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* --- */\n\n/* 1 px field border; with the focus in the surface the ring goes round the whole frame. */\n.lintje-text-editor {\n  display: flex; flex-direction: column;\n  min-width: 0;\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n}\n.lintje-text-editor:has(.lintje-text-editor__surface:focus-visible) {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: var(--focus-offset);\n}\n.lintje-text-editor.is-error { border: 2px solid var(--color-error); }\n/* Disabled wins over error: after it, the whole border back to 1 px strong. */\n.lintje-text-editor.is-disabled { border: 1px solid var(--color-border-strong); }\n\n/* --- The toolbar --------------------------------------------------------- */\n/* The row gap keeps the buttons' hit areas from overlapping. */\n.lintje-text-editor__toolbar {\n  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-1);\n  padding: var(--space-1);\n  background: var(--color-bg-page);\n  border-bottom: 1px solid var(--color-border-default);\n}\n/* A transparent hit area, above and below only, reaches the target height. */\n.lintje-text-editor__tool {\n  position: relative;\n  flex: none;\n  width: var(--h-icon-button); height: var(--h-icon-button);\n  display: inline-flex; align-items: center; justify-content: center;\n  border: 1px solid transparent;\n  background: transparent;\n  color: var(--color-text-primary);\n  font-size: 1rem;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-text-editor__tool::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n.lintje-text-editor__tool--bold,\n.lintje-text-editor__tool--heading { font-weight: 700; }\n.lintje-text-editor__tool--italic { font-style: italic; }\n/* The text fallback while an icon has no file. */\n.lintje-text-editor__tool--word {\n  width: auto; min-width: var(--h-icon-button);\n  padding: 0 var(--space-2);\n  font-size: 0.875rem; font-weight: 700;\n}\n.lintje-text-editor__tool:hover:not(:disabled):not(.is-idle) { background: var(--color-bg-subtle); }\n/* The border keeps an edge in dark. */\n.lintje-text-editor__tool.is-pressed {\n  background: var(--color-action-primary);\n  color: var(--color-action-primary-text);\n  border-color: var(--color-action-primary-border);\n}\n.lintje-text-editor__tool.is-pressed:hover:not(:disabled) { background: var(--color-action-primary); }\n.lintje-text-editor__tool.is-idle,\n.lintje-text-editor__tool:disabled { color: var(--color-text-disabled); cursor: not-allowed; }\n\n/* --- The surface --------------------------------------------------------- */\n.lintje-text-editor__surface {\n  min-height: 132px;\n  padding: var(--space-3);\n  overflow-wrap: anywhere;\n}\n/* The ring is the frame's, not the surface's. */\n.lintje-text-editor__surface:focus-visible { outline: none; }\n.lintje-text-editor.is-disabled .lintje-text-editor__surface {\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n/* The prose sheet colours its headings itself. */\n.lintje-text-editor.is-disabled .lintje-text-editor__surface * { color: inherit; }\n\n/* --- The link field ------------------------------------------------------ */\n.lintje-text-editor__link { width: 280px; max-width: 100%; padding: var(--space-4); }\n\n/* Below 768 px the toolbar scrolls sideways; at 48 px high the hit areas stay whole. */\n@media screen and (max-width: 767px) {\n  .lintje-text-editor__toolbar { flex-wrap: nowrap; overflow-x: auto; }\n}\n\n/* Forced colours drop the fill: the border turns Highlight, 2 px inside the fixed box. */\n@media (forced-colors: active) {\n  .lintje-text-editor__tool.is-pressed { border: 2px solid Highlight; }\n}\n", d = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-function f(e) {
-	let t = (e ?? "").replace(/\p{Cc}/gu, "").trim();
-	if (!t) return null;
-	let n = /^([a-z][a-z0-9+.-]*):/i.exec(t);
-	return n && ![
-		"http",
-		"https",
-		"mailto",
-		"tel"
-	].includes(n[1].toLowerCase()) ? null : t.replace(/ /g, "%20").replace(/\(/g, "%28").replace(/\)/g, "%29");
-}
-var p = /[\\`*_{}[\]()#+\-.!>~|]/;
-function m(e) {
-	let t = "", n = 0;
-	for (; n < e.length;) {
-		let r = e[n];
-		if (r === "\\" && p.test(e[n + 1] ?? "")) t += d(e[n + 1]), n += 2;
-		else if (r === "\n") t += "<br>", n += 1;
-		else {
-			if (e.startsWith("**", n)) {
-				let r = h(e, "**", n + 2);
-				if (r > n + 2) {
-					t += `<strong>${m(e.slice(n + 2, r))}</strong>`, n = r + 2;
-					continue;
-				}
-			}
-			if (r === "*" || r === "_") {
-				let i = h(e, r, n + 1);
-				if (i > n + 1) {
-					t += `<em>${m(e.slice(n + 1, i))}</em>`, n = i + 1;
-					continue;
-				}
-			}
-			if (r === "[") {
-				let r = /^\[((?:\\.|[^\]\\])+)\]\(([^()\s]+)\)/.exec(e.slice(n));
-				if (r) {
-					let e = f(r[2]), i = m(r[1]);
-					t += e ? `<a href="${d(e)}">${i}</a>` : i, n += r[0].length;
-					continue;
-				}
-			}
-			t += d(r), n += 1;
-		}
-	}
-	return t;
-}
-function h(e, t, n) {
-	for (let r = n; r < e.length; r++) if (e[r] === "\\") r += 1;
-	else {
-		if (t === "**" && e.startsWith("**", r)) return r;
-		if (t.length === 1 && e[r] === t) {
-			if (t === "*" && e[r + 1] === "*") {
-				let t = h(e, "**", r + 2);
-				if (t === -1) return -1;
-				r = t + 1;
-				continue;
-			}
-			return r;
-		}
-	}
-	return -1;
-}
-var g = /^#{1,6}\s+(.*)$/, _ = /^[-*]\s+(.*)$/;
-function v(e) {
-	let t = (e ?? "").replace(/\r\n?/g, "\n").split("\n"), n = [], r = [], i = [], a = () => {
-		r.length && n.push(`<p>${m(r.join("\n"))}</p>`), r = [];
-	}, o = () => {
-		i.length && n.push(`<ul>${i.map((e) => `<li>${e}</li>`).join("")}</ul>`), i = [];
-	};
-	for (let e of t) {
-		let t = e.trimEnd(), s = g.exec(t), c = _.exec(t);
-		t.trim() === "" ? (a(), o()) : s ? (a(), o(), n.push(`<h3>${m(s[1].trim())}</h3>`)) : c ? (a(), i.push(m(c[1].trim()))) : (o(), r.push(t.trim()));
-	}
-	return a(), o(), n.join("");
-}
-var y = (e) => e.replace(/([\\*_[\]])/g, "\\$1"), b = (e) => e.replace(/^(\s*)(#|[-*+](?=\s))/, "$1\\$2"), x = /* @__PURE__ */ new Set(/* @__PURE__ */ "ADDRESS.ARTICLE.ASIDE.BLOCKQUOTE.DD.DIV.DL.DT.FIGCAPTION.FIGURE.FOOTER.FORM.HEADER.HR.MAIN.NAV.P.PRE.SECTION.TABLE.TBODY.THEAD.TFOOT.TR.TD.TH".split(".")), S = /* @__PURE__ */ new Set([
-	"H1",
-	"H2",
-	"H3",
-	"H4",
-	"H5",
-	"H6"
-]), C = /* @__PURE__ */ new Set(["UL", "OL"]), w = /* @__PURE__ */ new Set([
-	"SCRIPT",
-	"STYLE",
-	"TEMPLATE",
-	"NOSCRIPT",
-	"IFRAME",
-	"OBJECT",
-	"SVG",
-	"HEAD"
-]), T = (e) => e.nodeType === 1, E = (e) => T(e) && (x.has(e.tagName) || S.has(e.tagName) || C.has(e.tagName) || e.tagName === "LI");
-function D(e) {
-	let t = e.style?.fontWeight ?? "", n = e.style?.fontStyle ?? "";
-	return {
-		bold: t === "" ? void 0 : t === "bold" || Number(t) >= 600,
-		italic: n === "" ? void 0 : n === "italic" || n === "oblique"
-	};
-}
-function O(e, t) {
-	let n = /^(\s*)([\s\S]*?)(\s*)$/.exec(e);
-	return n[2] ? `${n[1]}${t}${n[2]}${t}${n[3]}` : e;
-}
-function k(e) {
-	if (e.nodeType === 3) return y((e.textContent ?? "").replace(/\s+/g, " "));
-	if (!T(e) || w.has(e.tagName)) return "";
-	if (e.tagName === "BR") return "\n";
-	if (e.tagName === "IMG") return y(e.getAttribute("alt") ?? "");
-	let t = [...e.childNodes].map(k).join(""), n = e.tagName, r = D(e), i = r.bold ?? (n === "B" || n === "STRONG"), a = r.italic ?? (n === "I" || n === "EM");
-	if (n === "A") {
-		let n = f(e.getAttribute("href"));
-		n && t.trim() && (t = `[${t.trim()}](${n})`);
-	}
-	return a && (t = O(t, "_")), i && (t = O(t, "**")), t;
-}
-var A = (e) => e.split("\n").map((e) => e.replace(/ {2,}/g, " ").trim()).join("\n").replace(/^\n+|\n+$/g, "");
-function j(e, t) {
-	let n = [], r = () => {
-		let e = A(n.map(k).join(""));
-		e && t.push({
-			kind: "p",
-			text: e
-		}), n = [];
-	};
-	for (let i of e.childNodes) {
-		if (T(i) && w.has(i.tagName)) continue;
-		if (!E(i)) {
-			n.push(i);
-			continue;
-		}
-		r();
-		let e = i;
-		if (S.has(e.tagName)) {
-			let n = A(k(e).replace(/\n/g, " ")).replace(/\*\*/g, "");
-			n && t.push({
-				kind: "h",
-				text: n
-			});
-		} else if (C.has(e.tagName) || e.tagName === "LI") for (let n of e.tagName === "LI" ? [e] : e.querySelectorAll("li")) {
-			let e = A([...n.childNodes].filter((e) => !(T(e) && C.has(e.tagName))).map((e) => E(e) ? ` ${k(e)} ` : k(e)).join(""));
-			e && t.push({
-				kind: "li",
-				text: e.replace(/\n/g, " ")
-			});
-		}
-		else j(e, t);
-	}
-	return r(), t;
-}
-function M(e) {
-	let t = [], n = null;
-	for (let r of j(e, [])) n && t.push(n === "li" && r.kind === "li" ? "\n" : "\n\n"), r.kind === "h" ? t.push(`### ${r.text}`) : r.kind === "li" ? t.push(`- ${r.text}`) : t.push(r.text.split("\n").map(b).join("\n")), n = r.kind;
-	return t.join("");
-}
-function N(e) {
-	return v(M(new DOMParser().parseFromString(e, "text/html").body));
-}
-//#endregion
-//#region src/components/inputs/text-editor/text-editor.ts
-var P = [
-	{
-		format: "bold",
-		label: "Vet",
-		text: "B"
-	},
-	{
-		format: "italic",
-		label: "Cursief",
-		text: "I"
-	},
-	{
-		format: "heading",
-		label: "Kop",
-		text: "H"
-	},
-	{
-		format: "list",
-		label: "Opsomming",
-		text: "Opsomming"
-	},
-	{
-		format: "link",
-		label: "Link",
-		text: "Link"
-	}
-], F = {
-	bold: ["B", "STRONG"],
-	italic: ["I", "EM"],
-	heading: [
-		"H1",
-		"H2",
-		"H3",
-		"H4",
-		"H5",
-		"H6"
-	],
-	list: ["UL", "LI"],
-	link: ["A"]
-};
-function I(e, t) {
-	typeof document.execCommand == "function" && document.execCommand(e, !1, t);
-}
-function L(e, t) {
-	let { startContainer: n, startOffset: r, endContainer: i, endOffset: a } = t;
-	e.setBaseAndExtent(n, r, i, a);
-}
-function R(e) {
-	let { startContainer: t, startOffset: n } = e;
-	if (e.collapsed || t.nodeType !== 3 || n < (t.textContent ?? "").length) return t;
-	let r = document.createTreeWalker(e.commonAncestorContainer, NodeFilter.SHOW_TEXT);
-	return r.currentNode = t, r.nextNode() ?? t;
-}
-var z = class extends s {
-	constructor(...e) {
-		super(...e), this.value = "", this.active = /* @__PURE__ */ new Set(), this.collapsed = !0, this.toolIndex = 0, this.linkOpen = !1, this.linkError = "", this.shown = null, this.range = null, this.onSelectionChange = () => {
-			let e = this.surface, t = this.selectedRange();
-			e && t && e.contains(t.commonAncestorContainer) && (this.range = t.cloneRange(), this.collapsed = t.collapsed, this.active = this.formatsAt(R(t)));
-		};
-	}
-	static {
-		this.styles = [
-			i,
-			t(c),
-			t(l),
-			t(u)
-		];
-	}
-	static {
-		this.properties = {
-			value: { type: String },
-			active: { state: !0 },
-			collapsed: { state: !0 },
-			toolIndex: { state: !0 },
-			linkOpen: { state: !0 },
-			linkError: { state: !0 }
-		};
-	}
-	get surface() {
-		return this.renderRoot.querySelector(".lintje-text-editor__surface");
-	}
-	selection() {
-		return this.renderRoot.getSelection?.() ?? document.getSelection();
-	}
-	selectedRange() {
-		let e = this.selection();
-		if (!e?.rangeCount) return null;
-		let t;
-		try {
-			t = e.getComposedRanges?.({ shadowRoots: [this.renderRoot] })[0];
-		} catch {}
-		if (!t) return e.getRangeAt(0);
-		let n = document.createRange();
-		return n.setStart(t.startContainer, t.startOffset), n.setEnd(t.endContainer, t.endOffset), n;
-	}
-	connectedCallback() {
-		super.connectedCallback(), document.addEventListener("selectionchange", this.onSelectionChange);
-	}
-	disconnectedCallback() {
-		document.removeEventListener("selectionchange", this.onSelectionChange), super.disconnectedCallback();
-	}
-	formatsAt(e) {
-		let t = /* @__PURE__ */ new Set(), n = this.surface;
-		for (let r = e; r && r !== n; r = r.parentNode) {
-			if (r.nodeType !== 1) continue;
-			let e = r.tagName;
-			for (let n of P) F[n.format].includes(e) && t.add(n.format);
-		}
-		return t;
-	}
-	updated(e) {
-		super.updated(e);
-		let t = this.surface;
-		t && this.value !== this.shown && (t.innerHTML = v(this.value), this.shown = this.value);
-	}
-	settle(e) {
-		let t = this.surface;
-		if (!t) return;
-		let n = M(t), r = v(n);
-		e && t.innerHTML !== r && (t.innerHTML = r), this.shown = n, n !== this.value && (this.value = n, this.commit(n));
-	}
-	onFocusOut(e) {
-		if (this.disabled) return;
-		let t = e.relatedTarget, n = t !== null && this.renderRoot.contains(t);
-		(e.target === this.surface || !n) && this.settle(!n);
-	}
-	restore() {
-		let e = this.surface, t = this.selection();
-		e && (e.focus(), this.range && t && L(t, this.range));
-	}
-	apply(e) {
-		if (!this.disabled) {
-			if (e === "link") return this.link();
-			this.restore(), I("defaultParagraphSeparator", "p"), e === "bold" && I("bold"), e === "italic" && I("italic"), e === "list" && I("insertUnorderedList"), e === "heading" && I("formatBlock", this.active.has("heading") ? "<p>" : "<h3>"), this.onSelectionChange();
-		}
-	}
-	link() {
-		if (this.active.has("link")) {
-			this.restore();
-			let e = this.selection(), t = this.range ? R(this.range) : null;
-			for (; t && t.tagName !== "A";) t = t.parentNode;
-			if (t && e) {
-				let n = document.createRange();
-				n.selectNodeContents(t), L(e, n);
-			}
-			I("unlink"), this.onSelectionChange();
-		} else this.collapsed || (this.linkError = "", this.linkOpen = !0, this.updateComplete.then(() => this.renderRoot.querySelector(".lintje-text-editor__link-field")?.shadowRoot?.querySelector("input")?.focus()));
-	}
-	onLinkChange(e) {
-		e.stopPropagation();
-		let t = f(e.detail);
-		t ? (this.linkOpen = !1, this.restore(), I("createLink", t), this.onSelectionChange()) : this.linkError = "Vul een webadres in, zoals https://www.rijksoverheid.nl";
-	}
-	onLinkKeydown(e) {
-		e.key === "Enter" && !e.isComposing && e.preventDefault();
-	}
-	onLinkFocusOut(e) {
-		let t = e.relatedTarget, n = e.currentTarget;
-		this.linkOpen && t && !r(t, n) && !r(this, t) && (this.linkOpen = !1);
-	}
-	onLinkClose(e) {
-		e.stopPropagation(), this.linkOpen = !1, this.restore();
-	}
-	onSurfaceKeydown(e) {
-		if (!(e.ctrlKey || e.metaKey) || e.altKey) return;
-		let t = {
-			b: "bold",
-			i: "italic",
-			k: "link"
-		}[e.key.toLowerCase()];
-		t && (e.preventDefault(), this.apply(t));
-	}
-	onPaste(e) {
-		let t = e.clipboardData;
-		if (!t) return;
-		e.preventDefault();
-		let n = t.getData("text/html");
-		n ? I("insertHTML", N(n)) : I("insertText", t.getData("text/plain"));
-	}
-	onToolbarKeydown(e) {
-		let t = P.length - 1, n = {
-			ArrowRight: this.toolIndex === t ? 0 : this.toolIndex + 1,
-			ArrowLeft: this.toolIndex === 0 ? t : this.toolIndex - 1,
-			Home: 0,
-			End: t
-		}[e.key];
-		n !== void 0 && (e.preventDefault(), this.toolIndex = n, this.updateComplete.then(() => {
-			this.renderRoot.querySelectorAll(".lintje-text-editor__tool")[n]?.focus();
-		}));
-	}
-	renderTool(e, t) {
-		let r = this.active.has(e.format), i = e.format === "link" && this.collapsed && !r;
-		return a`<button
+import{$t as e,Zt as t,dt as n,in as r,lt as i,nn as a,nt as o}from"../chunks/base-DuuwEY22.js";import{n as s}from"../chunks/input-fzGBdp-5.js";import{t as c}from"../chunks/input-CTxDOlLs.js";import{t as l}from"../chunks/prose-DOF7h3je.js";import"./text-input.js";var u=`:host{min-width:0;display:block}:host([hidden]){display:none}.lintje-text-editor{border:1px solid var(--color-border-field);background:var(--color-bg-surface);flex-direction:column;min-width:0;display:flex}.lintje-text-editor:has(.lintje-text-editor__surface:focus-visible){outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset)}.lintje-text-editor.is-error{border:2px solid var(--color-error)}.lintje-text-editor.is-disabled{border:1px solid var(--color-border-strong)}.lintje-text-editor__toolbar{gap:var(--space-2) var(--space-1);padding:var(--space-1);background:var(--color-bg-page);border-bottom:1px solid var(--color-border-default);flex-wrap:wrap;display:flex}.lintje-text-editor__tool{width:var(--h-icon-button);height:var(--h-icon-button);color:var(--color-text-primary);transition:background var(--dur-hover) var(--ease-in-motion);background:0 0;border:1px solid #0000;flex:none;justify-content:center;align-items:center;font-size:1rem;display:inline-flex;position:relative}.lintje-text-editor__tool:after{content:"";inset:min(0px, calc((100% - var(--h-target)) / 2)) 0;position:absolute}.lintje-text-editor__tool--bold,.lintje-text-editor__tool--heading{font-weight:700}.lintje-text-editor__tool--italic{font-style:italic}.lintje-text-editor__tool--word{width:auto;min-width:var(--h-icon-button);padding:0 var(--space-2);font-size:.875rem;font-weight:700}.lintje-text-editor__tool:hover:not(:disabled):not(.is-idle){background:var(--color-bg-subtle)}.lintje-text-editor__tool.is-pressed{background:var(--color-action-primary);color:var(--color-action-primary-text);border-color:var(--color-action-primary-border)}.lintje-text-editor__tool.is-pressed:hover:not(:disabled){background:var(--color-action-primary)}.lintje-text-editor__tool.is-idle,.lintje-text-editor__tool:disabled{color:var(--color-text-disabled);cursor:not-allowed}.lintje-text-editor__surface{min-height:132px;padding:var(--space-3);overflow-wrap:anywhere}.lintje-text-editor__surface:focus-visible{outline:none}.lintje-text-editor.is-disabled .lintje-text-editor__surface{background:var(--color-bg-subtle);color:var(--color-text-disabled);cursor:not-allowed}.lintje-text-editor.is-disabled .lintje-text-editor__surface *{color:inherit}.lintje-text-editor__link{width:280px;max-width:100%;padding:var(--space-4)}@media screen and (width<=767px){.lintje-text-editor__toolbar{flex-wrap:nowrap;overflow-x:auto}}@media (forced-colors:active){.lintje-text-editor__tool.is-pressed{border:2px solid highlight}}`,d=e=>e.replace(/&/g,`&amp;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`).replace(/"/g,`&quot;`);function f(e){let t=(e??``).replace(/\p{Cc}/gu,``).trim();if(!t)return null;let n=/^([a-z][a-z0-9+.-]*):/i.exec(t);return n&&![`http`,`https`,`mailto`,`tel`].includes(n[1].toLowerCase())?null:t.replace(/ /g,`%20`).replace(/\(/g,`%28`).replace(/\)/g,`%29`)}var p=/[\\`*_{}[\]()#+\-.!>~|]/;function m(e){let t=``,n=0;for(;n<e.length;){let r=e[n];if(r===`\\`&&p.test(e[n+1]??``))t+=d(e[n+1]),n+=2;else if(r===`
+`)t+=`<br>`,n+=1;else{if(e.startsWith(`**`,n)){let r=h(e,`**`,n+2);if(r>n+2){t+=`<strong>${m(e.slice(n+2,r))}</strong>`,n=r+2;continue}}if(r===`*`||r===`_`){let i=h(e,r,n+1);if(i>n+1){t+=`<em>${m(e.slice(n+1,i))}</em>`,n=i+1;continue}}if(r===`[`){let r=/^\[((?:\\.|[^\]\\])+)\]\(([^()\s]+)\)/.exec(e.slice(n));if(r){let e=f(r[2]),i=m(r[1]);t+=e?`<a href="${d(e)}">${i}</a>`:i,n+=r[0].length;continue}}t+=d(r),n+=1}}return t}function h(e,t,n){for(let r=n;r<e.length;r++)if(e[r]===`\\`)r+=1;else{if(t===`**`&&e.startsWith(`**`,r))return r;if(t.length===1&&e[r]===t){if(t===`*`&&e[r+1]===`*`){let t=h(e,`**`,r+2);if(t===-1)return-1;r=t+1;continue}return r}}return-1}var g=/^#{1,6}\s+(.*)$/,_=/^[-*]\s+(.*)$/;function v(e){let t=(e??``).replace(/\r\n?/g,`
+`).split(`
+`),n=[],r=[],i=[],a=()=>{r.length&&n.push(`<p>${m(r.join(`
+`))}</p>`),r=[]},o=()=>{i.length&&n.push(`<ul>${i.map(e=>`<li>${e}</li>`).join(``)}</ul>`),i=[]};for(let e of t){let t=e.trimEnd(),s=g.exec(t),c=_.exec(t);t.trim()===``?(a(),o()):s?(a(),o(),n.push(`<h3>${m(s[1].trim())}</h3>`)):c?(a(),i.push(m(c[1].trim()))):(o(),r.push(t.trim()))}return a(),o(),n.join(``)}var y=e=>e.replace(/([\\*_[\]])/g,`\\$1`),b=e=>e.replace(/^(\s*)(#|[-*+](?=\s))/,`$1\\$2`),x=/* @__PURE__ */ new Set(/* @__PURE__ */ `ADDRESS.ARTICLE.ASIDE.BLOCKQUOTE.DD.DIV.DL.DT.FIGCAPTION.FIGURE.FOOTER.FORM.HEADER.HR.MAIN.NAV.P.PRE.SECTION.TABLE.TBODY.THEAD.TFOOT.TR.TD.TH`.split(`.`)),S=/* @__PURE__ */ new Set([`H1`,`H2`,`H3`,`H4`,`H5`,`H6`]),C=/* @__PURE__ */ new Set([`UL`,`OL`]),w=/* @__PURE__ */ new Set([`SCRIPT`,`STYLE`,`TEMPLATE`,`NOSCRIPT`,`IFRAME`,`OBJECT`,`SVG`,`HEAD`]),T=e=>e.nodeType===1,E=e=>T(e)&&(x.has(e.tagName)||S.has(e.tagName)||C.has(e.tagName)||e.tagName===`LI`);function D(e){let t=e.style?.fontWeight??``,n=e.style?.fontStyle??``;return{bold:t===``?void 0:t===`bold`||Number(t)>=600,italic:n===``?void 0:n===`italic`||n===`oblique`}}function O(e,t){let n=/^(\s*)([\s\S]*?)(\s*)$/.exec(e);return n[2]?`${n[1]}${t}${n[2]}${t}${n[3]}`:e}function k(e){if(e.nodeType===3)return y((e.textContent??``).replace(/\s+/g,` `));if(!T(e)||w.has(e.tagName))return``;if(e.tagName===`BR`)return`
+`;if(e.tagName===`IMG`)return y(e.getAttribute(`alt`)??``);let t=[...e.childNodes].map(k).join(``),n=e.tagName,r=D(e),i=r.bold??(n===`B`||n===`STRONG`),a=r.italic??(n===`I`||n===`EM`);if(n===`A`){let n=f(e.getAttribute(`href`));n&&t.trim()&&(t=`[${t.trim()}](${n})`)}return a&&(t=O(t,`_`)),i&&(t=O(t,`**`)),t}var A=e=>e.split(`
+`).map(e=>e.replace(/ {2,}/g,` `).trim()).join(`
+`).replace(/^\n+|\n+$/g,``);function j(e,t){let n=[],r=()=>{let e=A(n.map(k).join(``));e&&t.push({kind:`p`,text:e}),n=[]};for(let i of e.childNodes){if(T(i)&&w.has(i.tagName))continue;if(!E(i)){n.push(i);continue}r();let e=i;if(S.has(e.tagName)){let n=A(k(e).replace(/\n/g,` `)).replace(/\*\*/g,``);n&&t.push({kind:`h`,text:n})}else if(C.has(e.tagName)||e.tagName===`LI`)for(let n of e.tagName===`LI`?[e]:e.querySelectorAll(`li`)){let e=A([...n.childNodes].filter(e=>!(T(e)&&C.has(e.tagName))).map(e=>E(e)?` ${k(e)} `:k(e)).join(``));e&&t.push({kind:`li`,text:e.replace(/\n/g,` `)})}else j(e,t)}return r(),t}function M(e){let t=[],n=null;for(let r of j(e,[]))n&&t.push(n===`li`&&r.kind===`li`?`
+`:`
+
+`),r.kind===`h`?t.push(`### ${r.text}`):r.kind===`li`?t.push(`- ${r.text}`):t.push(r.text.split(`
+`).map(b).join(`
+`)),n=r.kind;return t.join(``)}function N(e){return v(M(new DOMParser().parseFromString(e,`text/html`).body))}var P=[{format:`bold`,label:`Vet`,text:`B`},{format:`italic`,label:`Cursief`,text:`I`},{format:`heading`,label:`Kop`,text:`H`},{format:`list`,label:`Opsomming`,text:`Opsomming`},{format:`link`,label:`Link`,text:`Link`}],F={bold:[`B`,`STRONG`],italic:[`I`,`EM`],heading:[`H1`,`H2`,`H3`,`H4`,`H5`,`H6`],list:[`UL`,`LI`],link:[`A`]};function I(e,t){typeof document.execCommand==`function`&&document.execCommand(e,!1,t)}function L(e,t){let{startContainer:n,startOffset:r,endContainer:i,endOffset:a}=t;e.setBaseAndExtent(n,r,i,a)}function R(e){let{startContainer:t,startOffset:n}=e;if(e.collapsed||t.nodeType!==3||n<(t.textContent??``).length)return t;let r=document.createTreeWalker(e.commonAncestorContainer,NodeFilter.SHOW_TEXT);return r.currentNode=t,r.nextNode()??t}var z=class extends s{constructor(...e){super(...e),this.value=``,this.active=/* @__PURE__ */ new Set,this.collapsed=!0,this.toolIndex=0,this.linkOpen=!1,this.linkError=``,this.shown=null,this.range=null,this.onSelectionChange=()=>{let e=this.surface,t=this.selectedRange();e&&t&&e.contains(t.commonAncestorContainer)&&(this.range=t.cloneRange(),this.collapsed=t.collapsed,this.active=this.formatsAt(R(t)))}}static{this.styles=[n,e(c),e(l),e(u)]}static{this.properties={value:{type:String},active:{state:!0},collapsed:{state:!0},toolIndex:{state:!0},linkOpen:{state:!0},linkError:{state:!0}}}get surface(){return this.renderRoot.querySelector(`.lintje-text-editor__surface`)}selection(){return this.renderRoot.getSelection?.()??document.getSelection()}selectedRange(){let e=this.selection();if(!e?.rangeCount)return null;let t;try{t=e.getComposedRanges?.({shadowRoots:[this.renderRoot]})[0]}catch{}if(!t)return e.getRangeAt(0);let n=document.createRange();return n.setStart(t.startContainer,t.startOffset),n.setEnd(t.endContainer,t.endOffset),n}connectedCallback(){super.connectedCallback(),document.addEventListener(`selectionchange`,this.onSelectionChange)}disconnectedCallback(){document.removeEventListener(`selectionchange`,this.onSelectionChange),super.disconnectedCallback()}formatsAt(e){let t=/* @__PURE__ */ new Set,n=this.surface;for(let r=e;r&&r!==n;r=r.parentNode){if(r.nodeType!==1)continue;let e=r.tagName;for(let n of P)F[n.format].includes(e)&&t.add(n.format)}return t}updated(e){super.updated(e);let t=this.surface;t&&this.value!==this.shown&&(t.innerHTML=v(this.value),this.shown=this.value)}settle(e){let t=this.surface;if(!t)return;let n=M(t),r=v(n);e&&t.innerHTML!==r&&(t.innerHTML=r),this.shown=n,n!==this.value&&(this.value=n,this.commit(n))}onFocusOut(e){if(this.disabled)return;let t=e.relatedTarget,n=t!==null&&this.renderRoot.contains(t);(e.target===this.surface||!n)&&this.settle(!n)}restore(){let e=this.surface,t=this.selection();e&&(e.focus(),this.range&&t&&L(t,this.range))}apply(e){if(!this.disabled){if(e===`link`)return this.link();this.restore(),I(`defaultParagraphSeparator`,`p`),e===`bold`&&I(`bold`),e===`italic`&&I(`italic`),e===`list`&&I(`insertUnorderedList`),e===`heading`&&I(`formatBlock`,this.active.has(`heading`)?`<p>`:`<h3>`),this.onSelectionChange()}}link(){if(this.active.has(`link`)){this.restore();let e=this.selection(),t=this.range?R(this.range):null;for(;t&&t.tagName!==`A`;)t=t.parentNode;if(t&&e){let n=document.createRange();n.selectNodeContents(t),L(e,n)}I(`unlink`),this.onSelectionChange()}else this.collapsed||(this.linkError=``,this.linkOpen=!0,this.updateComplete.then(()=>this.renderRoot.querySelector(`.lintje-text-editor__link-field`)?.shadowRoot?.querySelector(`input`)?.focus()))}onLinkChange(e){e.stopPropagation();let t=f(e.detail);t?(this.linkOpen=!1,this.restore(),I(`createLink`,t),this.onSelectionChange()):this.linkError=`Vul een webadres in, zoals https://www.rijksoverheid.nl`}onLinkKeydown(e){e.key===`Enter`&&!e.isComposing&&e.preventDefault()}onLinkFocusOut(e){let t=e.relatedTarget,n=e.currentTarget;this.linkOpen&&t&&!o(t,n)&&!o(this,t)&&(this.linkOpen=!1)}onLinkClose(e){e.stopPropagation(),this.linkOpen=!1,e.detail?.reason!==`focus`&&this.restore()}onSurfaceKeydown(e){if(!(e.ctrlKey||e.metaKey)||e.altKey)return;let t={b:`bold`,i:`italic`,k:`link`}[e.key.toLowerCase()];t&&(e.preventDefault(),this.apply(t))}onPaste(e){let t=e.clipboardData;if(!t)return;e.preventDefault();let n=t.getData(`text/html`);n?I(`insertHTML`,N(n)):I(`insertText`,t.getData(`text/plain`))}onToolbarKeydown(e){let t=P.length-1,n={ArrowRight:this.toolIndex===t?0:this.toolIndex+1,ArrowLeft:this.toolIndex===0?t:this.toolIndex-1,Home:0,End:t}[e.key];n!==void 0&&(e.preventDefault(),this.toolIndex=n,this.updateComplete.then(()=>{this.renderRoot.querySelectorAll(`.lintje-text-editor__tool`)[n]?.focus()}))}renderTool(e,t){let n=this.active.has(e.format),o=e.format===`link`&&this.collapsed&&!n;return r`<button
       type="button"
-      class=${o({
-			"lintje-text-editor__tool": !0,
-			[`lintje-text-editor__tool--${e.format}`]: !0,
-			"lintje-text-editor__tool--word": e.text.length > 1,
-			"is-pressed": r,
-			"is-idle": i
-		})}
-      tabindex=${t === this.toolIndex ? "0" : "-1"}
+      class=${i({"lintje-text-editor__tool":!0,[`lintje-text-editor__tool--${e.format}`]:!0,"lintje-text-editor__tool--word":e.text.length>1,"is-pressed":n,"is-idle":o})}
+      tabindex=${t===this.toolIndex?`0`:`-1`}
       aria-label=${e.label}
-      aria-pressed=${r ? "true" : "false"}
-      aria-disabled=${i ? "true" : n}
+      aria-pressed=${n?`true`:`false`}
+      aria-disabled=${o?`true`:a}
       ?disabled=${this.disabled}
-      @mousedown=${(e) => e.preventDefault()}
-      @click=${() => {
-			this.toolIndex = t, this.apply(e.format);
-		}}
+      @mousedown=${e=>e.preventDefault()}
+      @click=${()=>{this.toolIndex=t,this.apply(e.format)}}
     >
       ${e.text}
-    </button>`;
-	}
-	render() {
-		return a`<div class="lintje-field" @focusout=${this.onFocusOut}>
+    </button>`}render(){return r`<div class="lintje-field" @focusout=${this.onFocusOut}>
       ${this.renderLabel()}
       <div
-        class=${o({
-			"lintje-text-editor": !0,
-			"is-error": !!this.error,
-			"is-disabled": this.disabled
-		})}
+        class=${i({"lintje-text-editor":!0,"is-error":!!this.error,"is-disabled":this.disabled})}
       >
         <div
           class="lintje-text-editor__toolbar"
@@ -394,7 +33,7 @@ var z = class extends s {
           aria-label="Opmaak"
           @keydown=${this.onToolbarKeydown}
         >
-          ${P.map((e, t) => this.renderTool(e, t))}
+          ${P.map((e,t)=>this.renderTool(e,t))}
         </div>
         <lintje-popover
           ?open=${this.linkOpen}
@@ -404,16 +43,16 @@ var z = class extends s {
           @lintje-close=${this.onLinkClose}
           @focusout=${this.onLinkFocusOut}
         >
-          ${this.linkOpen ? a`<div class="lintje-text-editor__link" @keydown=${this.onLinkKeydown}>
+          ${this.linkOpen?r`<div class="lintje-text-editor__link" @keydown=${this.onLinkKeydown}>
                 <lintje-text-input
                   class="lintje-text-editor__link-field"
                   label="Adres van de link"
                   placeholder="https://"
                   hint="Enter plaatst de link"
-                  error=${this.linkError || n}
+                  error=${this.linkError||a}
                   @lintje-change=${this.onLinkChange}
                 ></lintje-text-input>
-              </div>` : n}
+              </div>`:a}
         </lintje-popover>
         <div
           id=${this.controlId}
@@ -422,19 +61,14 @@ var z = class extends s {
           aria-multiline="true"
           aria-labelledby=${this.labelId}
           aria-describedby=${this.describedBy}
-          aria-invalid=${this.error ? "true" : n}
-          aria-required=${this.required ? "true" : n}
-          aria-disabled=${this.disabled ? "true" : n}
-          contenteditable=${this.disabled ? "false" : "true"}
-          tabindex=${this.disabled ? "-1" : "0"}
+          aria-invalid=${this.error?`true`:a}
+          aria-required=${this.required?`true`:a}
+          aria-disabled=${this.disabled?`true`:a}
+          contenteditable=${this.disabled?`false`:`true`}
+          tabindex=${this.disabled?`-1`:`0`}
           @keydown=${this.onSurfaceKeydown}
           @paste=${this.onPaste}
         ></div>
       </div>
       ${this.renderFoot()}
-    </div>`;
-	}
-};
-e("lintje-text-editor", z);
-//#endregion
-export { z as LintjeTextEditor };
+    </div>`}};t(`lintje-text-editor`,z);export{z as LintjeTextEditor};

package/dist-elements/tag/text-input.js

@@ -1,113 +1,29 @@
-import { Yt as e, Zt as t, en as n, lt as r, nn as i, st as a, ut as o } from "../chunks/base-Bd2pmq86.js";
-import { i as s, t as c } from "../chunks/input-KqBT3qWD.js";
-import { t as l } from "../chunks/input-Dg1o0Sfu.js";
-import { t as u } from "../chunks/debounce-JXnLMCcF.js";
-//#region src/components/inputs/text-input/text-input.css?inline
-var d = "/* The text field. */\n\n/* --- Text field ----------------------------------------------------------- */\n.lintje-text-input { position: relative; display: flex; align-items: center; }\n.lintje-text-input__control {\n  width: 100%; height: var(--h-control);\n  padding: 0 14px;\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  font-size: 1rem;\n  border-radius: var(--radius);\n}\n.lintje-text-input__control::placeholder { color: var(--color-text-placeholder); opacity: 1; }\n.lintje-text-input__control.is-error { border: 2px solid var(--color-error); }\n/* Read-only: the subtle surface, the strong border, the text still primary. */\n.lintje-text-input__control.is-readonly {\n  border: 1px solid var(--color-border-strong);\n  background: var(--color-bg-subtle);\n  color: var(--color-text-primary);\n  cursor: default;\n}\n.lintje-text-input__control:disabled {\n  border: 1px solid var(--color-border-strong);\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n.lintje-text-input--clearable .lintje-text-input__control {\n  padding-right: calc(var(--h-icon-button) + var(--space-1));\n}\n/* The hit area reaches the target height above and below only: sideways it would cover the text. */\n.lintje-text-input__clear {\n  position: absolute; right: var(--space-1);\n  width: var(--h-icon-button); height: var(--h-icon-button);\n  display: flex; align-items: center; justify-content: center;\n  color: var(--color-text-muted);\n}\n.lintje-text-input__clear:hover { color: var(--color-text-primary); }\n.lintje-text-input__clear::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n\n/* --- Search ---------------------------------------------------------------- */\n/* The browser's own clear button and decoration go: the field draws its own cross. */\n.lintje-text-input--search .lintje-text-input__control { padding-left: var(--space-10); }\n.lintje-text-input__search {\n  position: absolute; left: var(--space-3);\n  color: var(--color-text-muted);\n  pointer-events: none;\n}\n.lintje-text-input__control::-webkit-search-cancel-button,\n.lintje-text-input__control::-webkit-search-decoration { appearance: none; }\n\n/* --- Password -------------------------------------------------------------- */\n.lintje-text-input--password .lintje-text-input__control { border-right: 0; }\n.lintje-text-input__reveal { flex: none; --h-button: var(--h-control); }\n", f = class extends c {
-	constructor(...e) {
-		super(...e), this.value = "", this.placeholder = "", this.clearable = !1, this.stacked = !1, this.type = "text", this.commitOn = "change", this.autocomplete = "", this.revealed = !1, this.typing = new u(this), this.#e = "", this.#t = !1;
-	}
-	static {
-		this.styles = [
-			r,
-			t(l),
-			t(d)
-		];
-	}
-	static {
-		this.properties = {
-			value: { type: String },
-			placeholder: { type: String },
-			clearable: { type: Boolean },
-			stacked: {
-				type: Boolean,
-				reflect: !0
-			},
-			type: { type: String },
-			commitOn: {
-				type: String,
-				attribute: "commit"
-			},
-			autocomplete: { type: String },
-			revealed: { state: !0 }
-		};
-	}
-	#e;
-	#t;
-	get formValue() {
-		return this.value;
-	}
-	willUpdate(e) {
-		super.willUpdate(e), e.has("value") && !this.#t && (this.#e = this.value), this.#t = !1;
-	}
-	send(e) {
-		e !== this.#e && (this.#e = e, this.commit(e));
-	}
-	onInput(e) {
-		this.readonly || (this.#t = !0, this.value = e.target.value, this.commitOn === "input" && this.typing.schedule(() => this.send(this.value)));
-	}
-	change(e) {
-		this.readonly || (this.#t = !0, this.value = e.target.value, this.commitOn === "input" ? this.typing.flush() : this.send(this.value));
-	}
-	onKeydown(e) {
-		e.key === "Enter" && this.commitOn === "input" && !this.readonly && (this.#t = !0, this.value = e.target.value, this.typing.flush()), this.submitOnEnter(e, () => this.change(e)), e.key === "Escape" && this.type === "search" && this.value !== "" && !this.readonly && (e.preventDefault(), e.stopPropagation(), this.clear());
-	}
-	clear() {
-		this.readonly || (this.typing.cancel(), this.value = "", this.send(""), this.nativeControl?.focus());
-	}
-	reveal() {
-		this.revealed = !this.revealed;
-	}
-	renderFoot() {
-		let e = this.error ?? "", t = {
-			hintId: this.hintId,
-			errorId: this.errorId
-		};
-		return this.type === "search" ? i`${e ? s(void 0, e, t) : n}<span
+import{$t as e,Zt as t,dt as n,ft as r,in as i,lt as a,nn as o}from"../chunks/base-DuuwEY22.js";import{i as s,t as c}from"../chunks/input-fzGBdp-5.js";import{t as l}from"../chunks/input-CTxDOlLs.js";import{t as u}from"../chunks/debounce-Dfwdcv-z.js";var d=`.lintje-text-input{align-items:center;display:flex;position:relative}.lintje-text-input__control{width:100%;height:var(--h-control);border:1px solid var(--color-border-field);background:var(--color-bg-surface);color:var(--color-text-primary);border-radius:var(--radius);padding:0 14px;font-size:1rem}.lintje-text-input__control::placeholder{color:var(--color-text-placeholder);opacity:1}.lintje-text-input__control.is-error{border:2px solid var(--color-error)}.lintje-text-input__control.is-readonly{border:1px solid var(--color-border-strong);background:var(--color-bg-subtle);color:var(--color-text-primary);cursor:default}.lintje-text-input__control:disabled{border:1px solid var(--color-border-strong);background:var(--color-bg-subtle);color:var(--color-text-disabled);cursor:not-allowed}.lintje-text-input--clearable .lintje-text-input__control{padding-right:calc(var(--h-icon-button) + var(--space-1))}.lintje-text-input__clear{right:var(--space-1);width:var(--h-icon-button);height:var(--h-icon-button);color:var(--color-text-muted);justify-content:center;align-items:center;display:flex;position:absolute}.lintje-text-input__clear:hover{color:var(--color-text-primary)}.lintje-text-input__clear:after{content:"";inset:min(0px, calc((100% - var(--h-target)) / 2)) 0;position:absolute}.lintje-text-input--search .lintje-text-input__control{padding-left:var(--space-10)}.lintje-text-input__search{left:var(--space-3);color:var(--color-text-muted);pointer-events:none;position:absolute}.lintje-text-input__control::-webkit-search-cancel-button,.lintje-text-input__control::-webkit-search-decoration{appearance:none}.lintje-text-input--password .lintje-text-input__control{border-right:0}.lintje-text-input__reveal{--h-button:var(--h-control);flex:none}`,f=class extends c{constructor(...e){super(...e),this.value=``,this.placeholder=``,this.clearable=!1,this.stacked=!1,this.type=`text`,this.commitOn=`change`,this.autocomplete=``,this.revealed=!1,this.typing=new u(this),this.#e=``,this.#t=!1}static{this.styles=[n,e(l),e(d)]}static{this.properties={value:{type:String},placeholder:{type:String},clearable:{type:Boolean},stacked:{type:Boolean,reflect:!0},type:{type:String},commitOn:{type:String,attribute:`commit`},autocomplete:{type:String},revealed:{state:!0}}}#e;#t;get formValue(){return this.value}willUpdate(e){super.willUpdate(e),e.has(`value`)&&!this.#t&&(this.#e=this.value),this.#t=!1}send(e){e!==this.#e&&(this.#e=e,this.commit(e))}onInput(e){this.readonly||(this.#t=!0,this.value=e.target.value,this.commitOn===`input`&&this.typing.schedule(()=>this.send(this.value)))}change(e){this.readonly||(this.#t=!0,this.value=e.target.value,this.commitOn===`input`?this.typing.flush():this.send(this.value))}onKeydown(e){e.key===`Enter`&&this.commitOn===`input`&&!this.readonly&&(this.#t=!0,this.value=e.target.value,this.typing.flush()),this.submitOnEnter(e,()=>this.change(e)),e.key===`Escape`&&this.type===`search`&&this.value!==``&&!this.readonly&&(e.preventDefault(),e.stopPropagation(),this.clear())}clear(){this.readonly||(this.typing.cancel(),this.value=``,this.send(``),this.nativeControl?.focus())}reveal(){this.revealed=!this.revealed}renderFoot(){let e=this.error??``,t={hintId:this.hintId,errorId:this.errorId};return this.type===`search`?i`${e?s(void 0,e,t):o}<span
         id=${this.hintId}
         class="lintje-field__hint"
         aria-live="polite"
-        ?hidden=${!this.hint || !!e}
-        >${this.hint ?? ""}</span
-      >` : s(this.hint, e, t);
-	}
-	get inputType() {
-		return this.type === "password" ? this.revealed ? "text" : "password" : this.type === "search" || this.type === "email" ? this.type : "text";
-	}
-	render() {
-		let e = this.type === "search", t = this.type === "password", r = (this.clearable || e) && !t && this.value !== "" && !this.disabled && !this.readonly;
-		return i`<div class="lintje-field">
+        ?hidden=${!this.hint||!!e}
+        >${this.hint??``}</span
+      >${this.renderReset()}`:i`${s(this.hint,e,t)}${this.renderReset()}`}get inputType(){return this.type===`password`?this.revealed?`text`:`password`:this.type===`search`||this.type===`email`?this.type:`text`}render(){let e=this.type===`search`,t=this.type===`password`,n=(this.clearable||e)&&!t&&this.value!==``&&!this.disabled&&!this.readonly;return i`<div class="lintje-field">
       ${this.renderLabel(this.controlId)}
       <div
-        class=${a({
-			"lintje-text-input": !0,
-			"lintje-text-input--clearable": r,
-			"lintje-text-input--search": e,
-			"lintje-text-input--password": t
-		})}
+        class=${a({"lintje-text-input":!0,"lintje-text-input--clearable":n,"lintje-text-input--search":e,"lintje-text-input--password":t})}
       >
-        ${e ? o("functioneel-zoek", {
-			size: 18,
-			className: "lintje-text-input__search"
-		}) : n}
+        ${e?r(`functioneel-zoek`,{size:18,className:`lintje-text-input__search`}):o}
         <input
           type=${this.inputType}
           id=${this.controlId}
-          class=${a({
-			"lintje-text-input__control": !0,
-			"is-error": !!this.error,
-			"is-readonly": this.readonly
-		})}
+          class=${a({"lintje-text-input__control":!0,"is-error":!!this.error,"is-readonly":this.readonly})}
           .value=${this.value}
           placeholder=${this.placeholder}
-          role=${e ? "searchbox" : n}
-          inputmode=${this.type === "email" ? "email" : n}
-          enterkeyhint=${e ? "search" : n}
-          autocomplete=${this.autocomplete || n}
+          role=${e?`searchbox`:o}
+          inputmode=${this.type===`email`?`email`:o}
+          enterkeyhint=${e?`search`:o}
+          autocomplete=${this.autocomplete||o}
           aria-labelledby=${this.labelId}
           aria-describedby=${this.describedBy}
-          aria-invalid=${this.error ? "true" : n}
-          aria-required=${this.required ? "true" : n}
+          aria-invalid=${this.error?`true`:o}
+          aria-required=${this.required?`true`:o}
           ?required=${this.required}
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
@@ -115,27 +31,22 @@ var d = "/* The text field. */\n\n/* --- Text field ----------------------------
           @change=${this.change}
           @keydown=${this.onKeydown}
         />
-        ${r ? i`<button
+        ${n?i`<button
               type="button"
               class="lintje-text-input__clear"
               aria-label="Wissen"
-              @mousedown=${(e) => e.preventDefault()}
+              @mousedown=${e=>e.preventDefault()}
               @click=${this.clear}
             >
-              ${o("functioneel-kruis", { size: 16 })}
-            </button>` : n}
-        ${t ? i`<lintje-button
+              ${r(`functioneel-kruis`,{size:16})}
+            </button>`:o}
+        ${t?i`<lintje-button
               class="lintje-text-input__reveal"
               variant="secondary"
               ?disabled=${this.disabled}
               @click=${this.reveal}
-              >${this.revealed ? "Verbergen" : "Tonen"}</lintje-button
-            >` : n}
+              >${this.revealed?`Verbergen`:`Tonen`}</lintje-button
+            >`:o}
       </div>
       ${this.renderFoot()}
-    </div>`;
-	}
-};
-e("lintje-text-input", f);
-//#endregion
-export { f as LintjeTextInput };
+    </div>`}};t(`lintje-text-input`,f);export{f as LintjeTextInput};