lintje 0.1.1

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

@@ -0,0 +1,262 @@
+import { $ as e, Bt as t, Gt as n, Ht as r, Kt as i, Z as a, et as o, f as s } from "../chunks/base-rBLTcEIv.js";
+import { r as c, t as l } from "../chunks/input-jQVTln7H.js";
+import { filterOptions as u, splitMatch as d } from "./combobox.js";
+//#region src/components/inputs/tag-input/tag-input.css?inline
+var f = "/* The keyword field: chips and the typing part in one box that grows in height. */\n:host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n/* Below 768 px: the touch height and the full width, as `stacked`. */\n@media (max-width: 767px) {\n  :host {\n    width: 100%;\n    --h-control: var(--h-touch);\n  }\n}\n\n/* --- */\n\n/* The padding centres a chip in the control height; wrapped chips grow the box. */\n.lintje-tag-input {\n  display: flex; flex-wrap: wrap; align-items: center;\n  gap: 6px;\n  min-height: var(--h-control);\n  padding: calc((var(--h-control) - var(--h-chip-field)) / 2 - 1px) var(--space-2);\n  border: 1px solid var(--color-border-field);\n  border-radius: var(--radius);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n}\n/* The ring is around the whole field; a chip draws it around itself when its cross has the focus. */\n.lintje-tag-input:has(.lintje-tag-input__input:focus-visible),\n.lintje-tag-input__chip:has(.lintje-tag-input__remove:focus-visible) {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: var(--focus-offset);\n}\n.lintje-tag-input__input:focus-visible,\n.lintje-tag-input__remove:focus-visible { outline: none; }\n/* The padding gives back the pixel the 2 px error border takes. */\n.lintje-tag-input.is-error {\n  border: 2px solid var(--color-error);\n  padding: calc((var(--h-control) - var(--h-chip-field)) / 2 - 2px) calc(var(--space-2) - 1px);\n}\n/* Disabled wins over error: placed after it. */\n.lintje-tag-input.is-disabled {\n  border: 1px solid var(--color-border-strong);\n  padding: calc((var(--h-control) - var(--h-chip-field)) / 2 - 1px) var(--space-2);\n  background: var(--color-bg-subtle);\n  cursor: not-allowed;\n}\n\n.lintje-tag-input__chips { display: contents; }\n.lintje-tag-input__item { display: flex; min-width: 0; }\n.lintje-tag-input__chip {\n  display: inline-flex; align-items: center;\n  min-width: 0;\n  height: var(--h-chip-field);\n  padding: 0 0 0 var(--space-2);\n  background: var(--color-bg-subtle);\n  border: 1px solid var(--color-border-default);\n  font-size: 0.875rem; white-space: nowrap;\n}\n.lintje-tag-input.is-disabled .lintje-tag-input__chip { padding-right: var(--space-2); }\n/* A word typed twice flashes its chip. */\n.lintje-tag-input__chip.is-flash { border-color: var(--color-accent-line); }\n.lintje-tag-input.is-disabled .lintje-tag-input__chip { color: var(--color-text-disabled); }\n/* A transparent hit area, above and below only, reaches the target height. */\n.lintje-tag-input__remove {\n  position: relative;\n  flex: none;\n  width: var(--space-6); align-self: stretch;\n  display: inline-flex; align-items: center; justify-content: center;\n  color: var(--color-text-muted);\n}\n.lintje-tag-input__remove:hover { color: var(--color-text-primary); }\n.lintje-tag-input__remove::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((var(--h-chip-field) - var(--h-target)) / 2)) 0;\n}\n\n.lintje-tag-input__input {\n  flex: 1 1 60px; min-width: 0;\n  height: var(--h-chip-field);\n  padding: 0 var(--space-1);\n  border: 0;\n  background: none;\n  color: inherit;\n  font-size: 1rem;\n}\n.lintje-tag-input__input::placeholder { color: var(--color-text-placeholder); opacity: 1; }\n.lintje-tag-input__input:disabled { cursor: not-allowed; }\n\n.lintje-tag-input__list {\n  max-height: calc(7 * var(--h-option) + var(--space-2));\n  overflow-y: auto;\n  padding: var(--space-1) 0;\n  font: var(--text-ui);\n}\n.lintje-tag-input__option {\n  display: flex; align-items: center;\n  min-height: var(--h-option);\n  padding: 0 14px;\n  cursor: pointer;\n}\n.lintje-tag-input__option:hover,\n.lintje-tag-input__option.is-active { background: var(--color-bg-subtle); }\n/* The option the keys stand on: the fill alone is about 1.1:1, so the focus ring inside the row. */\n.lintje-tag-input__option.is-active {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: calc(var(--focus-width) * -1);\n}\n\n/* Forced colours drop the fill: the row takes an edge inside, keeping its size. */\n@media (forced-colors: active) {\n  .lintje-tag-input__option.is-active { outline: 1px solid CanvasText; outline-offset: -1px; }\n}\n";
+//#endregion
+//#region src/components/inputs/tag-input/tag-input.ts
+function p(e) {
+	return e.split(/[,\n]/).map((e) => e.trim()).filter(Boolean);
+}
+function m(e, t) {
+	let n = [...e], r = [], i = null;
+	for (let e of t) {
+		let t = n.find((t) => t.toLowerCase() === e.toLowerCase());
+		t === void 0 ? (n.push(e), r.push(e)) : i = t;
+	}
+	return {
+		next: n,
+		added: r,
+		duplicate: i
+	};
+}
+var h = 1e3, g = "lintje-tag-input-list", _ = "lintje-tag-input-keys", v = (e) => `lintje-tag-input-option-${e}`, y = class extends c {
+	constructor(...e) {
+		super(...e), this.value = [], this.placeholder = "", this.stacked = !1, this.text = "", this.flash = null, this.news = "", this.active = -1, this.suggesting = !1, this.#e = null;
+	}
+	static {
+		this.styles = [
+			e,
+			r(l),
+			r(f)
+		];
+	}
+	static {
+		this.properties = {
+			value: { attribute: !1 },
+			options: { attribute: !1 },
+			placeholder: { type: String },
+			stacked: {
+				type: Boolean,
+				reflect: !0
+			},
+			text: { state: !0 },
+			flash: { state: !0 },
+			news: { state: !0 },
+			active: { state: !0 },
+			suggesting: { state: !0 }
+		};
+	}
+	#e;
+	disconnectedCallback() {
+		this.#e !== null && clearTimeout(this.#e), this.#e = null, super.disconnectedCallback();
+	}
+	get input() {
+		return this.renderRoot.querySelector(".lintje-tag-input__input");
+	}
+	labelOf(e) {
+		return this.options?.find((t) => t.value === e)?.label ?? e;
+	}
+	get suggestions() {
+		return !this.options || !this.text.trim() ? [] : u(this.options, this.text).filter((e) => !this.value.includes(e.value));
+	}
+	get listOpen() {
+		return this.suggesting && !this.disabled && this.suggestions.length > 0;
+	}
+	willUpdate(e) {
+		super.willUpdate(e), this.active >= this.suggestions.length && (this.active = this.suggestions.length - 1);
+	}
+	resolve(e) {
+		return this.options?.find((t) => t.label.toLowerCase() === e.toLowerCase())?.value ?? e;
+	}
+	add(e) {
+		let { next: t, added: n, duplicate: r } = m(this.value, e.map((e) => this.resolve(e)));
+		this.text = "", this.active = -1;
+		let i = [];
+		n.length && i.push(`${n.map((e) => this.labelOf(e)).join(", ")} toegevoegd`), r !== null && (this.light(r), i.push(`${this.labelOf(r)} staat er al`)), i.length && (this.news = i.join(". ")), n.length && (this.value = t, this.announce(t));
+	}
+	light(e) {
+		this.#e !== null && clearTimeout(this.#e), this.flash = e, this.#e = setTimeout(() => {
+			this.flash = null, this.#e = null;
+		}, h);
+	}
+	async removeChip(e, t) {
+		if (this.disabled) return;
+		let n = this.value[e], r = this.value.filter((t, n) => n !== e);
+		this.value = r, this.news = `${this.labelOf(n)} verwijderd`, this.announce(r), await this.updateComplete, t === "input" || t < 0 || t >= r.length ? this.input?.focus() : this.focusChip(t);
+	}
+	focusChip(e) {
+		this.renderRoot.querySelector(`[data-index="${e}"]`)?.focus();
+	}
+	onInput(e) {
+		this.text = e.target.value, this.suggesting = !0, this.active = this.suggestions.length ? 0 : -1;
+	}
+	onPaste(e) {
+		let t = e.clipboardData?.getData("text") ?? "";
+		if (!/[,\n]/.test(t)) return;
+		e.preventDefault();
+		let n = e.target;
+		this.add(p(n.value + t));
+	}
+	onKeydown(e) {
+		let t = e.target, n = t.selectionStart === 0 && t.selectionEnd === 0, r = this.listOpen;
+		switch (e.key) {
+			case "Enter":
+			case ",": {
+				let n = r && this.active >= 0 ? this.suggestions[this.active] : null;
+				if (n && e.key === "Enter") {
+					e.preventDefault(), this.add([n.label]);
+					return;
+				}
+				(e.key === "," || t.value.trim()) && e.preventDefault(), this.add(p(t.value));
+				return;
+			}
+			case "Backspace":
+				t.value === "" && this.value.length && (e.preventDefault(), this.focusChip(this.value.length - 1));
+				return;
+			case "ArrowLeft":
+				(t.value === "" || n) && this.value.length && (e.preventDefault(), this.focusChip(this.value.length - 1));
+				return;
+			case "ArrowDown":
+				if (!r) return;
+				e.preventDefault(), this.active = Math.min(this.active + 1, this.suggestions.length - 1);
+				return;
+			case "ArrowUp":
+				if (!r) return;
+				e.preventDefault(), this.active = Math.max(this.active - 1, 0);
+				return;
+		}
+	}
+	onChipKeydown(e, t) {
+		switch (e.key) {
+			case "ArrowLeft":
+				e.preventDefault(), this.focusChip(Math.max(0, t - 1));
+				return;
+			case "ArrowRight":
+				e.preventDefault(), t + 1 < this.value.length ? this.focusChip(t + 1) : this.input?.focus();
+				return;
+			case "Backspace":
+				e.preventDefault(), this.removeChip(t, "input");
+				return;
+			case "Delete":
+				e.preventDefault(), this.removeChip(t, t);
+				return;
+		}
+	}
+	onBlur(e) {
+		this.suggesting = !1;
+		let t = e.relatedTarget;
+		if (t && this.renderRoot.contains(t)) return;
+		let n = p(e.target.value);
+		n.length && this.add(n);
+	}
+	onPopoverClose(e) {
+		e.stopPropagation(), this.suggesting = !1, this.active = -1;
+	}
+	renderChip(e, t) {
+		let r = this.labelOf(e);
+		return i`<li class="lintje-tag-input__item">
+      <span class=${a({
+			"lintje-tag-input__chip": !0,
+			"is-flash": this.flash === e
+		})}
+        >${r}${this.disabled ? n : i`<button
+              type="button"
+              class="lintje-tag-input__remove"
+              tabindex="-1"
+              data-index=${t}
+              aria-label=${`${r} verwijderen`}
+              @keydown=${(e) => this.onChipKeydown(e, t)}
+              @click=${() => this.removeChip(t, "input")}
+            >
+              ${o("functioneel-kruis", { size: 12 })}
+            </button>`}</span
+      >
+    </li>`;
+	}
+	renderSuggestions() {
+		return this.listOpen ? i`<ul
+      id=${g}
+      class="lintje-tag-input__list"
+      role="listbox"
+      tabindex="-1"
+      aria-labelledby=${this.labelId}
+    >
+      ${this.suggestions.map((e, t) => {
+			let [r, o, s] = d(e.label, this.text);
+			return i`<li
+          id=${v(t)}
+          class=${a({
+				"lintje-tag-input__option": !0,
+				"is-active": t === this.active
+			})}
+          role="option"
+          aria-selected="false"
+          @click=${() => this.add([e.label])}
+        >
+          ${r}${o ? i`<strong>${o}</strong>` : n}${s}
+        </li>`;
+		})}
+    </ul>` : n;
+	}
+	render() {
+		let e = this.listOpen, t = !!this.options;
+		return i`<div class="lintje-field">
+      ${this.renderLabel(this.controlId)}
+      <div
+        class=${a({
+			"lintje-tag-input": !0,
+			"is-error": !!this.error,
+			"is-disabled": this.disabled
+		})}
+        role="group"
+        aria-labelledby=${this.labelId}
+      >
+        <ul class="lintje-tag-input__chips">
+          ${this.value.map((e, t) => this.renderChip(e, t))}
+        </ul>
+        <input
+          type="text"
+          id=${this.controlId}
+          class="lintje-tag-input__input"
+          .value=${s(this.text)}
+          placeholder=${this.value.length ? n : this.placeholder || n}
+          autocomplete="off"
+          enterkeyhint="enter"
+          role=${t ? "combobox" : n}
+          aria-expanded=${t ? e ? "true" : "false" : n}
+          aria-controls=${e ? g : n}
+          aria-autocomplete=${t ? "list" : n}
+          aria-activedescendant=${e && this.active >= 0 ? v(this.active) : n}
+          aria-labelledby=${this.labelId}
+          aria-describedby=${this.describedBy === n ? _ : `${this.describedBy} ${_}`}
+          aria-invalid=${this.error ? "true" : n}
+          aria-required=${this.required ? "true" : n}
+          ?disabled=${this.disabled}
+          @input=${this.onInput}
+          @keydown=${this.onKeydown}
+          @paste=${this.onPaste}
+          @blur=${this.onBlur}
+        />
+      </div>
+      <!-- A press in the list, on an option or beside one, keeps the focus in the field. -->
+      <lintje-popover
+        match-width
+        ?open=${e}
+        @lintje-close=${this.onPopoverClose}
+        @mousedown=${(e) => e.preventDefault()}
+      >
+        ${this.renderSuggestions()}
+      </lintje-popover>
+      <span class="visually-hidden" role="status">${this.news}</span>
+      <span id=${_} hidden
+        >Enter of een komma voegt een woord toe. Pijl links of Backspace gaat naar de woorden;
+        daar verwijdert Backspace of Delete een woord.</span
+      >
+      ${this.renderFoot()}
+    </div>`;
+	}
+};
+t("lintje-tag-input", y);
+//#endregion
+export { y as LintjeTagInput, m as addWords, p as splitWords };

package/dist-elements/tag/text-editor.d.ts

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