@lilydesignsystem/angular-data-grid 0.0.0-stage → 0.9.0

package/fesm2022/lilydesignsystem-angular-data-grid.mjs

@@ -0,0 +1,3016 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, ElementRef, Injector, afterNextRender, computed, effect, inject, input, model, output, signal, untracked, viewChild } from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { DataTable, DataTableBody, DataTableFoot, DataTableHead, DataTableRow, DataTableTD, DataTableTH } from "@lilydesignsystem/angular-headless";
+function isExportFormula(value) {
+	return !!value && typeof value === "object" && !(value instanceof Date) && typeof value.formula === "string" && "result" in value;
+}
+const MIME_TYPES = {
+	csv: "text/csv;charset=utf-8",
+	tsv: "text/tab-separated-values;charset=utf-8",
+	xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+};
+const FORMULA_START = /^[=+\-@\t\r]/;
+function cellText(value, safe = true) {
+	if (value === null || value === void 0) return "";
+	if (isExportFormula(value)) return cellText(value.result, safe);
+	if (value instanceof Date) {
+		if (Number.isNaN(value.getTime())) return "";
+		const iso = value.toISOString();
+		return iso.endsWith("T00:00:00.000Z") ? iso.slice(0, 10) : iso;
+	}
+	if (typeof value === "number") return Number.isFinite(value) ? String(value) : "";
+	if (typeof value === "boolean") return value ? "TRUE" : "FALSE";
+	const text = String(value);
+	return safe && FORMULA_START.test(text) ? `'${text}` : text;
+}
+function quoteField(text, delimiter) {
+	return text.includes(delimiter) || /["\r\n]/.test(text) ? `"${text.replace(/"/g, "\"\"")}"` : text;
+}
+function toDelimited(table, options = {}) {
+	const { delimiter = ",", header = true, bom = false, safe = true, eol = "\r\n" } = options;
+	const lines = [];
+	if (header) lines.push(table.headers.map((h) => quoteField(cellText(h, safe), delimiter)).join(delimiter));
+	for (const row of table.rows) lines.push(table.headers.map((_, i) => quoteField(cellText(row[i], safe), delimiter)).join(delimiter));
+	return (bom ? "" : "") + lines.join(eol) + (lines.length > 0 ? eol : "");
+}
+function toCsv(table, options = {}) {
+	return toDelimited(table, {
+		...options,
+		delimiter: ","
+	});
+}
+function toTsv(table, options = {}) {
+	return toDelimited(table, {
+		...options,
+		delimiter: "	"
+	});
+}
+const encoder = new TextEncoder();
+function xmlEscape(text) {
+	return text.replace(/[\u0000-\u0008\u000B\u000C\u000E-\u001F￾￿]/g, "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function columnName(index) {
+	let n = index;
+	let name = "";
+	do {
+		name = String.fromCharCode(65 + n % 26) + name;
+		n = Math.floor(n / 26) - 1;
+	} while (n >= 0);
+	return name;
+}
+function excelSerial(date) {
+	return date.getTime() / 864e5 + 25569;
+}
+function sheetNameFor(name) {
+	return name.replace(/[[\]:*?/\\]/g, " ").replace(/\s+/g, " ").trim().slice(0, 31) || "Sheet1";
+}
+const STYLES_XML = "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?><styleSheet xmlns=\"http://schemas.openxmlformats.org/spreadsheetml/2006/main\"><numFmts count=\"2\"><numFmt numFmtId=\"164\" formatCode=\"yyyy\\-mm\\-dd\"/><numFmt numFmtId=\"165\" formatCode=\"yyyy\\-mm\\-dd\\ hh:mm:ss\"/></numFmts><fonts count=\"2\"><font><sz val=\"11\"/><name val=\"Calibri\"/></font><font><b/><sz val=\"11\"/><name val=\"Calibri\"/></font></fonts><fills count=\"2\"><fill><patternFill patternType=\"none\"/></fill><fill><patternFill patternType=\"gray125\"/></fill></fills><borders count=\"1\"><border><left/><right/><top/><bottom/><diagonal/></border></borders><cellStyleXfs count=\"1\"><xf numFmtId=\"0\" fontId=\"0\" fillId=\"0\" borderId=\"0\"/></cellStyleXfs><cellXfs count=\"4\"><xf numFmtId=\"0\" fontId=\"0\" fillId=\"0\" borderId=\"0\" xfId=\"0\"/><xf numFmtId=\"164\" fontId=\"0\" fillId=\"0\" borderId=\"0\" xfId=\"0\" applyNumberFormat=\"1\"/><xf numFmtId=\"165\" fontId=\"0\" fillId=\"0\" borderId=\"0\" xfId=\"0\" applyNumberFormat=\"1\"/><xf numFmtId=\"0\" fontId=\"1\" fillId=\"0\" borderId=\"0\" xfId=\"0\" applyFont=\"1\"/></cellXfs><cellStyles count=\"1\"><cellStyle name=\"Normal\" xfId=\"0\" builtinId=\"0\"/></cellStyles></styleSheet>";
+function formulaXml(ref, value) {
+	const expression = xmlEscape(value.formula.replace(/^=/, ""));
+	const result = value.result;
+	if (typeof result === "number" && Number.isFinite(result)) return `<c r="${ref}"><f>${expression}</f><v>${result}</v></c>`;
+	if (typeof result === "boolean") return `<c r="${ref}" t="b"><f>${expression}</f><v>${result ? 1 : 0}</v></c>`;
+	if (result instanceof Date && !Number.isNaN(result.getTime())) return `<c r="${ref}" s="${result.getTime() % 864e5 !== 0 ? 2 : 1}"><f>${expression}</f><v>${excelSerial(result)}</v></c>`;
+	if (result === null || result === void 0) return `<c r="${ref}"><f>${expression}</f></c>`;
+	return `<c r="${ref}" t="str"><f>${expression}</f><v>${xmlEscape(String(result))}</v></c>`;
+}
+function cellXml(ref, value, headerStyle = false) {
+	if (value === null || value === void 0) return "";
+	if (isExportFormula(value)) return formulaXml(ref, value);
+	const s = headerStyle ? " s=\"3\"" : "";
+	if (value instanceof Date) {
+		if (Number.isNaN(value.getTime())) return "";
+		return `<c r="${ref}" s="${value.getTime() % 864e5 !== 0 ? 2 : 1}"><v>${excelSerial(value)}</v></c>`;
+	}
+	if (typeof value === "number") return Number.isFinite(value) ? `<c r="${ref}"${s}><v>${value}</v></c>` : "";
+	if (typeof value === "boolean") return `<c r="${ref}"${s} t="b"><v>${value ? 1 : 0}</v></c>`;
+	return `<c r="${ref}"${s} t="inlineStr"><is><t xml:space="preserve">${xmlEscape(String(value))}</t></is></c>`;
+}
+function sheetXml(table, header) {
+	const rows = [];
+	let rowNumber = 0;
+	if (header) {
+		rowNumber += 1;
+		rows.push(`<row r="${rowNumber}">${table.headers.map((h, i) => cellXml(`${columnName(i)}${rowNumber}`, h, true)).join("")}</row>`);
+	}
+	for (const row of table.rows) {
+		rowNumber += 1;
+		const cells = table.headers.map((_, i) => cellXml(`${columnName(i)}${rowNumber}`, row[i])).join("");
+		rows.push(`<row r="${rowNumber}">${cells}</row>`);
+	}
+	return "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?><worksheet xmlns=\"http://schemas.openxmlformats.org/spreadsheetml/2006/main\">" + (header && table.headers.length > 0 ? "<sheetViews><sheetView workbookViewId=\"0\"><pane ySplit=\"1\" topLeftCell=\"A2\" activePane=\"bottomLeft\" state=\"frozen\"/></sheetView></sheetViews>" : "") + `<sheetData>${rows.join("")}</sheetData></worksheet>`;
+}
+function toXlsx(table, options = {}) {
+	const { sheetName = "Sheet1", header = true } = options;
+	const files = {
+		"[Content_Types].xml": "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?><Types xmlns=\"http://schemas.openxmlformats.org/package/2006/content-types\"><Default Extension=\"rels\" ContentType=\"application/vnd.openxmlformats-package.relationships+xml\"/><Default Extension=\"xml\" ContentType=\"application/xml\"/><Override PartName=\"/xl/workbook.xml\" ContentType=\"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml\"/><Override PartName=\"/xl/worksheets/sheet1.xml\" ContentType=\"application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml\"/><Override PartName=\"/xl/styles.xml\" ContentType=\"application/vnd.openxmlformats-officedocument.spreadsheetml.styles+xml\"/></Types>",
+		"_rels/.rels": "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?><Relationships xmlns=\"http://schemas.openxmlformats.org/package/2006/relationships\"><Relationship Id=\"rId1\" Type=\"http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument\" Target=\"xl/workbook.xml\"/></Relationships>",
+		"xl/workbook.xml": `<?xml version="1.0" encoding="UTF-8" standalone="yes"?><workbook xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"><sheets><sheet name="${xmlEscape(sheetNameFor(sheetName))}" sheetId="1" r:id="rId1"/></sheets></workbook>`,
+		"xl/_rels/workbook.xml.rels": "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?><Relationships xmlns=\"http://schemas.openxmlformats.org/package/2006/relationships\"><Relationship Id=\"rId1\" Type=\"http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet\" Target=\"worksheets/sheet1.xml\"/><Relationship Id=\"rId2\" Type=\"http://schemas.openxmlformats.org/officeDocument/2006/relationships/styles\" Target=\"styles.xml\"/></Relationships>",
+		"xl/styles.xml": STYLES_XML,
+		"xl/worksheets/sheet1.xml": sheetXml(table, header)
+	};
+	return zipStore(Object.entries(files).map(([name, text]) => ({
+		name,
+		data: encoder.encode(text)
+	})));
+}
+let crcTable;
+function crc32(bytes) {
+	if (!crcTable) {
+		crcTable = /* @__PURE__ */ new Uint32Array(256);
+		for (let n = 0; n < 256; n++) {
+			let c = n;
+			for (let k = 0; k < 8; k++) c = c & 1 ? 3988292384 ^ c >>> 1 : c >>> 1;
+			crcTable[n] = c >>> 0;
+		}
+	}
+	let crc = 4294967295;
+	for (let i = 0; i < bytes.length; i++) crc = crcTable[(crc ^ bytes[i]) & 255] ^ crc >>> 8;
+	return (crc ^ 4294967295) >>> 0;
+}
+const DOS_TIME = 0;
+const DOS_DATE = 33;
+function zipStore(entries) {
+	const parts = [];
+	const central = [];
+	let offset = 0;
+	for (const { name, data } of entries) {
+		const nameBytes = encoder.encode(name);
+		const crc = crc32(data);
+		const local = /* @__PURE__ */ new DataView(/* @__PURE__ */ new ArrayBuffer(30));
+		local.setUint32(0, 67324752, true);
+		local.setUint16(4, 20, true);
+		local.setUint16(6, 2048, true);
+		local.setUint16(8, 0, true);
+		local.setUint16(10, DOS_TIME, true);
+		local.setUint16(12, DOS_DATE, true);
+		local.setUint32(14, crc, true);
+		local.setUint32(18, data.length, true);
+		local.setUint32(22, data.length, true);
+		local.setUint16(26, nameBytes.length, true);
+		local.setUint16(28, 0, true);
+		parts.push(new Uint8Array(local.buffer), nameBytes, data);
+		const entry = /* @__PURE__ */ new DataView(/* @__PURE__ */ new ArrayBuffer(46));
+		entry.setUint32(0, 33639248, true);
+		entry.setUint16(4, 20, true);
+		entry.setUint16(6, 20, true);
+		entry.setUint16(8, 2048, true);
+		entry.setUint16(10, 0, true);
+		entry.setUint16(12, DOS_TIME, true);
+		entry.setUint16(14, DOS_DATE, true);
+		entry.setUint32(16, crc, true);
+		entry.setUint32(20, data.length, true);
+		entry.setUint32(24, data.length, true);
+		entry.setUint16(28, nameBytes.length, true);
+		entry.setUint32(42, offset, true);
+		central.push(new Uint8Array(entry.buffer), nameBytes);
+		offset += 30 + nameBytes.length + data.length;
+	}
+	const centralSize = central.reduce((n, p) => n + p.length, 0);
+	const end = /* @__PURE__ */ new DataView(/* @__PURE__ */ new ArrayBuffer(22));
+	end.setUint32(0, 101010256, true);
+	end.setUint16(8, entries.length, true);
+	end.setUint16(10, entries.length, true);
+	end.setUint32(12, centralSize, true);
+	end.setUint32(16, offset, true);
+	const all = [
+		...parts,
+		...central,
+		new Uint8Array(end.buffer)
+	];
+	const out = new Uint8Array(all.reduce((n, p) => n + p.length, 0));
+	let at = 0;
+	for (const p of all) {
+		out.set(p, at);
+		at += p.length;
+	}
+	return out;
+}
+function exportBlob(table, format, options = {}) {
+	if (format === "xlsx") return new Blob([toXlsx(table, options)], { type: MIME_TYPES.xlsx });
+	const text = toDelimited(table, {
+		delimiter: format === "tsv" ? "	" : ",",
+		header: options.header,
+		bom: true
+	});
+	return new Blob([text], { type: MIME_TYPES[format] });
+}
+function exportFilename(base, format) {
+	const cleaned = base.replace(/[\\/:*?"<>|\u0000-\u001F]/g, "-").trim() || "export";
+	return cleaned.toLowerCase().endsWith(`.${format}`) ? cleaned : `${cleaned}.${format}`;
+}
+function downloadBlob(blob, filename) {
+	if (typeof document === "undefined" || typeof URL === "undefined" || !URL.createObjectURL) return;
+	const url = URL.createObjectURL(blob);
+	const link = document.createElement("a");
+	link.href = url;
+	link.download = filename;
+	link.style.display = "none";
+	document.body.appendChild(link);
+	link.click();
+	link.remove();
+	setTimeout(() => URL.revokeObjectURL(url), 1e3);
+}
+const SAFE_SCHEME = /^(https?:|mailto:|tel:)/i;
+const RELATIVE = /^(\/(?!\/)|\.\.?\/|#|\?)/;
+function safeHref(href) {
+	if (typeof href !== "string") return null;
+	const text = href.trim();
+	if (!text) return null;
+	if (/[\u0000-\u001F\u007F]/.test(text)) return null;
+	return SAFE_SCHEME.test(text) || RELATIVE.test(text) ? text : null;
+}
+function linkParts(value) {
+	if (value === null || value === void 0 || value === "") return null;
+	if (typeof value === "string") return { href: value };
+	if (typeof value === "object" && typeof value.href === "string") return value;
+	return null;
+}
+function linkLabel(value) {
+	const link = linkParts(value);
+	return link ? link.label ?? link.href : "";
+}
+function isCivilDate(text) {
+	if (typeof text !== "string" || !/^\d{4}-\d{2}-\d{2}$/.test(text)) return false;
+	const [y, m, d] = text.split("-").map(Number);
+	const date = new Date(Date.UTC(y, m - 1, d));
+	return date.getUTCFullYear() === y && date.getUTCMonth() === m - 1 && date.getUTCDate() === d;
+}
+function isCivilTime(text) {
+	if (typeof text !== "string") return false;
+	const match = /^(\d{2}):(\d{2})(?::(\d{2}))?$/.exec(text);
+	return !!match && Number(match[1]) < 24 && Number(match[2]) < 60 && (match[3] === void 0 || Number(match[3]) < 60);
+}
+function civilDateToDate(text) {
+	if (text instanceof Date) return Number.isNaN(text.getTime()) ? null : text;
+	return isCivilDate(text) ? /* @__PURE__ */ new Date(`${text}T00:00:00Z`) : null;
+}
+const isEmpty = (value) => value === null || value === void 0 || value === "";
+const OFFSET = /^([+-])(\d{2}):?(\d{2})$/;
+function zoneOffsetMinutes(timeZone, instantMs) {
+	const bare = OFFSET.exec(timeZone);
+	if (bare) return (bare[1] === "-" ? -1 : 1) * (Number(bare[2]) * 60 + Number(bare[3]));
+	try {
+		const parts = new Intl.DateTimeFormat("en-US", {
+			timeZone,
+			hourCycle: "h23",
+			year: "numeric",
+			month: "2-digit",
+			day: "2-digit",
+			hour: "2-digit",
+			minute: "2-digit",
+			second: "2-digit"
+		}).formatToParts(new Date(instantMs));
+		const n = (type) => Number(parts.find((x) => x.type === type)?.value);
+		return (Date.UTC(n("year"), n("month") - 1, n("day"), n("hour") % 24, n("minute"), n("second")) - Math.floor(instantMs / 1e3) * 1e3) / 6e4;
+	} catch {
+		return null;
+	}
+}
+function isValidTimeZone(timeZone) {
+	return typeof timeZone === "string" && timeZone !== "" && zoneOffsetMinutes(timeZone, 0) !== null;
+}
+function isZonedTime(value) {
+	return !!value && typeof value === "object" && isCivilTime(value.time) && isValidTimeZone(value.timeZone);
+}
+function zonedMinutes(value, referenceDate) {
+	if (!isZonedTime(value)) return null;
+	const [h, m, sec] = value.time.split(":").map(Number);
+	const local = h * 60 + m + (sec || 0) / 60;
+	if (!referenceDate || !isCivilDate(referenceDate)) return local;
+	const [y, mo, d] = referenceDate.split("-").map(Number);
+	const guess = Date.UTC(y, mo - 1, d, h, m, sec || 0);
+	const offset = zoneOffsetMinutes(value.timeZone, guess);
+	if (offset === null) return local;
+	return guess / 6e4 - offset;
+}
+function zonedUtcTime(value, referenceDate) {
+	if (!referenceDate || !isCivilDate(referenceDate)) return null;
+	const minutes = zonedMinutes(value, referenceDate);
+	if (minutes === null) return null;
+	const day = (Math.round(minutes) % 1440 + 1440) % 1440;
+	return `${String(Math.floor(day / 60)).padStart(2, "0")}:${String(day % 60).padStart(2, "0")}`;
+}
+function zoneLabel(timeZone, locale, referenceDate) {
+	if (!locale || !referenceDate || !isCivilDate(referenceDate) || OFFSET.test(timeZone)) return timeZone;
+	try {
+		return new Intl.DateTimeFormat(locale, {
+			timeZone,
+			timeZoneName: "short"
+		}).formatToParts(/* @__PURE__ */ new Date(`${referenceDate}T12:00:00Z`)).find((x) => x.type === "timeZoneName")?.value ?? timeZone;
+	} catch {
+		return timeZone;
+	}
+}
+function peopleOf(value) {
+	return (Array.isArray(value) ? value : isEmpty(value) ? [] : [value]).filter((p) => !!p && typeof p === "object" && typeof p.id === "string");
+}
+const personName = (person) => person.name ? person.name : person.id;
+function filesOf(value) {
+	return (Array.isArray(value) ? value : []).filter((f) => !!f && typeof f === "object" && typeof f.id === "string" && typeof f.name === "string");
+}
+function aggregateValues(kind, values) {
+	const present = values.filter((v) => !isEmpty(v));
+	const numbers = present.filter((v) => typeof v === "number" && Number.isFinite(v));
+	switch (kind) {
+		case "count": return values.length;
+		case "countUnique": return present.length === 0 ? null : new Set(present.map((v) => typeof v === "object" ? JSON.stringify(v) : String(v))).size;
+		case "sum": return numbers.length === 0 ? null : numbers.reduce((a, b) => a + b, 0);
+		case "avg": return numbers.length === 0 ? null : numbers.reduce((a, b) => a + b, 0) / numbers.length;
+		case "median": {
+			if (numbers.length === 0) return null;
+			const sorted = numbers.slice().sort((a, b) => a - b);
+			const mid = sorted.length >> 1;
+			return sorted.length % 2 ? sorted[mid] : (sorted[mid - 1] + sorted[mid]) / 2;
+		}
+		case "min":
+		case "max": {
+			const pool = numbers.length === present.length ? numbers : present.filter((v) => typeof v === "string");
+			if (pool.length === 0) return null;
+			return pool.reduce((a, b) => (kind === "min" ? b < a : b > a) ? b : a);
+		}
+		case "range": return numbers.length === 0 ? null : Math.max(...numbers) - Math.min(...numbers);
+		case "percentTrue": {
+			const booleans = values.filter((v) => typeof v === "boolean");
+			return booleans.length === 0 ? null : booleans.filter(Boolean).length / booleans.length * 100;
+		}
+		case "percentEmpty": return values.length === 0 ? null : (values.length - present.length) / values.length * 100;
+	}
+}
+function isInvalidForType(column, value) {
+	if (isEmpty(value)) return false;
+	switch (column.type) {
+		case "number": return typeof value !== "number" || !Number.isFinite(value);
+		case "link": return safeHref(linkParts(value)?.href) === null;
+		case "date": return !isCivilDate(value);
+		case "time": return !isCivilTime(value);
+		case "time-zone": return !isZonedTime(value);
+		case "select":
+		case "radio": return !(column.options ?? []).some((o) => o.id === value);
+		case "person": return peopleOf(value).length === 0;
+		default: return false;
+	}
+}
+const optionLabel = (column, id) => {
+	const found = (column.options ?? []).find((o) => o.id === id);
+	return found ? found.label : isEmpty(id) ? "" : String(id);
+};
+function resultFormatter(column, locale) {
+	const type = column.resultType ?? "text";
+	if (type === "number") {
+		const formatter = locale || column.numberFormat ? new Intl.NumberFormat(locale, column.numberFormat) : null;
+		return (v) => typeof v === "number" && Number.isFinite(v) ? formatter ? formatter.format(v) : String(v) : isEmpty(v) ? "" : String(v);
+	}
+	if (type === "date") {
+		const formatter = locale || column.dateFormat ? new Intl.DateTimeFormat(locale, {
+			dateStyle: "medium",
+			...column.dateFormat,
+			timeZone: "UTC"
+		}) : null;
+		return (v) => {
+			if (isEmpty(v)) return "";
+			const date = civilDateToDate(v);
+			return date ? formatter ? formatter.format(date) : date.toISOString().slice(0, 10) : String(v);
+		};
+	}
+	return (v) => isEmpty(v) ? "" : String(v);
+}
+function typeDefaults(column, gridLocale) {
+	const locale = column.locale ?? gridLocale;
+	switch (column.type) {
+		case "text": return {
+			align: "start",
+			editor: "text",
+			...locale ? { compare: (a, b) => new Intl.Collator(locale).compare(String(a), String(b)) } : {}
+		};
+		case "number": {
+			const formatter = locale || column.numberFormat ? new Intl.NumberFormat(locale, column.numberFormat) : null;
+			return {
+				align: "end",
+				editor: "number",
+				...formatter ? { format: (v) => typeof v === "number" && Number.isFinite(v) ? formatter.format(v) : "" } : {}
+			};
+		}
+		case "link": return {
+			align: "start",
+			editor: "link",
+			format: (v) => linkLabel(v),
+			filterText: (v) => {
+				const link = linkParts(v);
+				return link ? `${link.label ?? ""} ${link.href}`.trim() : "";
+			},
+			compare: (a, b) => {
+				const x = linkLabel(a);
+				const y = linkLabel(b);
+				return locale ? new Intl.Collator(locale).compare(x, y) : x < y ? -1 : x > y ? 1 : 0;
+			},
+			exportValue: (row) => linkLabel(column.accessor ? column.accessor(row) : row[column.id]),
+			parse: (draft, row) => {
+				const previous = linkParts(column.accessor ? column.accessor(row) : row[column.id]);
+				const href = draft.trim();
+				if (!href) return null;
+				return previous && typeof previous === "object" && (previous.label !== void 0 || previous.external !== void 0) ? {
+					...previous,
+					href
+				} : href;
+			}
+		};
+		case "date": {
+			const formatter = locale || column.dateFormat ? new Intl.DateTimeFormat(locale, {
+				dateStyle: "medium",
+				...column.dateFormat,
+				timeZone: "UTC"
+			}) : null;
+			return {
+				align: "start",
+				editor: "date",
+				format: (v) => {
+					if (isEmpty(v)) return "";
+					const date = civilDateToDate(v);
+					if (!date) return String(v);
+					return formatter ? formatter.format(date) : date.toISOString().slice(0, 10);
+				},
+				exportValue: (row) => civilDateToDate(column.accessor ? column.accessor(row) : row[column.id])
+			};
+		}
+		case "time": {
+			const formatter = locale || column.timeFormat ? new Intl.DateTimeFormat(locale, {
+				timeStyle: "short",
+				...column.timeFormat,
+				timeZone: "UTC"
+			}) : null;
+			return {
+				align: "start",
+				editor: "time",
+				format: (v) => {
+					if (isEmpty(v)) return "";
+					if (!isCivilTime(v)) return String(v);
+					return formatter ? formatter.format(/* @__PURE__ */ new Date(`1970-01-01T${v.length === 5 ? `${v}:00` : v}Z`)) : v;
+				}
+			};
+		}
+		case "time-zone": {
+			const formatter = locale || column.timeFormat ? new Intl.DateTimeFormat(locale, {
+				timeStyle: "short",
+				...column.timeFormat,
+				timeZone: "UTC"
+			}) : null;
+			const text = (v) => {
+				if (isEmpty(v)) return "";
+				if (!isZonedTime(v)) return String(v);
+				return `${formatter ? formatter.format(/* @__PURE__ */ new Date(`1970-01-01T${v.time.length === 5 ? `${v.time}:00` : v.time}Z`)) : v.time} ${zoneLabel(v.timeZone, locale, column.referenceDate)}`;
+			};
+			return {
+				align: "start",
+				editor: "time-zone",
+				format: text,
+				compare: (a, b) => (zonedMinutes(a, column.referenceDate) ?? 0) - (zonedMinutes(b, column.referenceDate) ?? 0),
+				exportValue: (row) => {
+					const v = column.accessor ? column.accessor(row) : row[column.id];
+					return isZonedTime(v) ? `${v.time} ${v.timeZone}` : null;
+				}
+			};
+		}
+		case "person": {
+			const names = (v) => peopleOf(v).map(personName);
+			const collator = locale ? new Intl.Collator(locale) : null;
+			const order = (a, b) => collator ? collator.compare(a, b) : a < b ? -1 : a > b ? 1 : 0;
+			return {
+				align: "start",
+				editor: "person",
+				format: (v) => names(v).join("; "),
+				filterText: (v) => peopleOf(v).map((p) => `${personName(p)} ${p.email ?? ""}`.trim()).join(" "),
+				compare: (a, b) => {
+					const x = names(a);
+					const y = names(b);
+					return order(x[0] ?? "", y[0] ?? "") || x.length - y.length;
+				},
+				exportValue: (row) => {
+					const value = column.accessor ? column.accessor(row) : row[column.id];
+					const joined = (column.exportAs === "email" ? peopleOf(value).map((p) => p.email ?? "") : names(value)).join("; ");
+					return joined.replace(/[;\s]/g, "") === "" ? null : joined;
+				}
+			};
+		}
+		case "file": {
+			const names = (v) => filesOf(v).map((f) => f.name);
+			const collator = locale ? new Intl.Collator(locale) : null;
+			const order = (a, b) => collator ? collator.compare(a, b) : a < b ? -1 : a > b ? 1 : 0;
+			return {
+				align: "start",
+				format: (v) => names(v).join("; "),
+				filterText: (v) => names(v).join(" "),
+				compare: (a, b) => {
+					const x = names(a);
+					const y = names(b);
+					return order(x[0] ?? "", y[0] ?? "") || x.length - y.length;
+				},
+				exportValue: (row) => {
+					const joined = names(column.accessor ? column.accessor(row) : row[column.id]).join("; ");
+					return joined === "" ? null : joined;
+				}
+			};
+		}
+		case "select":
+		case "radio": {
+			const order = new Map((column.options ?? []).map((o, i) => [o.id, i]));
+			return {
+				align: "start",
+				editor: column.type === "select" ? "select" : "radio",
+				format: (v) => optionLabel(column, v),
+				filterText: (v) => optionLabel(column, v),
+				compare: column.type === "radio" || column.sortBy === "order" ? (a, b) => (order.get(a) ?? Infinity) - (order.get(b) ?? Infinity) : (a, b) => locale ? new Intl.Collator(locale).compare(optionLabel(column, a), optionLabel(column, b)) : optionLabel(column, a) < optionLabel(column, b) ? -1 : optionLabel(column, a) > optionLabel(column, b) ? 1 : 0,
+				exportValue: (row) => {
+					const id = column.accessor ? column.accessor(row) : row[column.id];
+					return column.exportAs === "id" ? isEmpty(id) ? null : id : isEmpty(id) ? null : optionLabel(column, id);
+				}
+			};
+		}
+		default: return {};
+	}
+}
+function resolveColumn(column, gridLocale, rows = []) {
+	if (!column.type) return column;
+	const defaults = typeDefaults(column, gridLocale);
+	const own = Object.fromEntries(Object.entries(column).filter(([, v]) => v !== void 0));
+	const resolved = {
+		...defaults,
+		...own
+	};
+	const locale = column.locale ?? gridLocale;
+	if (column.type === "rollup") {
+		const relation = column.relation ?? (column.accessor ? (row) => column.accessor(row) : (row) => row[column.id]);
+		const cache = /* @__PURE__ */ new WeakMap();
+		const format = resultFormatter(column, locale);
+		resolved.accessor = (row) => {
+			if (cache.has(row)) return cache.get(row);
+			const related = relation(row);
+			const values = Array.isArray(related) ? related : [];
+			const result = column.reduce ? column.reduce(values, row) : aggregateValues(column.aggregate ?? "count", values);
+			cache.set(row, result);
+			return result;
+		};
+		resolved.editable = false;
+		resolved.align = column.align ?? (column.resultType === "number" ? "end" : "start");
+		if (column.format === void 0) resolved.format = (v) => format(v);
+		if (column.exportValue === void 0) resolved.exportValue = (row) => {
+			const v = resolved.accessor(row);
+			return column.resultType === "date" ? civilDateToDate(v) : isEmpty(v) ? null : v;
+		};
+	} else if (column.type === "formula") {
+		const source = column.accessor ?? ((row) => row[column.id]);
+		const cache = /* @__PURE__ */ new WeakMap();
+		const format = resultFormatter(column, locale);
+		const result = (row) => {
+			let found = cache.get(row);
+			if (!found) {
+				const expression = source(row);
+				if (isEmpty(expression)) found = { value: null };
+				else if (typeof column.evaluate !== "function") found = { value: expression };
+				else try {
+					found = column.evaluate(String(expression), {
+						row,
+						rows,
+						columnId: column.id
+					});
+				} catch (error) {
+					found = { error: error instanceof Error ? error.message : String(error) };
+				}
+				cache.set(row, found);
+			}
+			return found;
+		};
+		const valueOf = (row) => {
+			const r = result(row);
+			return "error" in r ? null : r.value;
+		};
+		resolved.source = source;
+		resolved.errorOf = (row) => {
+			const r = result(row);
+			return "error" in r ? r.error : void 0;
+		};
+		resolved.accessor = valueOf;
+		resolved.align = column.align ?? (column.resultType === "number" ? "end" : "start");
+		if (column.format === void 0) resolved.format = (v, row) => {
+			const message = resolved.errorOf(row);
+			return message !== void 0 ? message : format(v);
+		};
+		if (column.exportValue === void 0) resolved.exportValue = (row) => {
+			const message = resolved.errorOf(row);
+			if (message !== void 0) return message;
+			const v = valueOf(row);
+			return column.resultType === "date" ? civilDateToDate(v) : isEmpty(v) ? null : v;
+		};
+		if (column.filterText === void 0) resolved.filterText = (v, row) => resolved.format(v, row);
+	}
+	return resolved;
+}
+const WIDGET_SELECTOR = "a[href], button, input, select, textarea, summary, [contenteditable=\"true\"]";
+const MIN_COLUMN_WIDTH = 40;
+const RESIZE_STEP = 16;
+let uid = 0;
+function nextDataGridId() {
+	uid += 1;
+	return `data-grid-${uid}`;
+}
+function defaultAccessor(column, row) {
+	return column.accessor ? column.accessor(row) : row[column.id];
+}
+function formatCell(column, row) {
+	const value = defaultAccessor(column, row);
+	if (column.format) return column.format(value, row);
+	return value === null || value === void 0 ? "" : String(value);
+}
+var DataGridAttrs = class DataGridAttrs {
+	constructor() {
+		this.lilyDataGridAttrs = input(void 0, ...ngDevMode ? [{ debugName: "lilyDataGridAttrs" }] : /* istanbul ignore next */ []);
+		this.host = inject(ElementRef);
+		this.applied = [];
+		effect(() => {
+			const next = this.lilyDataGridAttrs() ?? {};
+			for (const name of this.applied) if (!(name in next)) this.host.nativeElement.removeAttribute(name);
+			for (const [name, value] of Object.entries(next)) this.host.nativeElement.setAttribute(name, value);
+			this.applied = Object.keys(next);
+		});
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: DataGridAttrs,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "17.1.0",
+			version: "22.2.3",
+			type: DataGridAttrs,
+			isStandalone: true,
+			selector: "[lilyDataGridAttrs]",
+			inputs: { lilyDataGridAttrs: {
+				classPropertyName: "lilyDataGridAttrs",
+				publicName: "lilyDataGridAttrs",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			} },
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: DataGridAttrs,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[lilyDataGridAttrs]",
+			standalone: true
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { lilyDataGridAttrs: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "lilyDataGridAttrs",
+			required: false
+		}]
+	}] }
+});
+var DataGrid = class DataGrid {
+	cellFor(column, row) {
+		const cache = this.cellCache();
+		let perRow = cache.get(row);
+		if (!perRow) {
+			perRow = /* @__PURE__ */ new Map();
+			cache.set(row, perRow);
+		}
+		let ctx = perRow.get(column.id);
+		if (!ctx) {
+			ctx = {
+				value: defaultAccessor(column, row),
+				formatted: formatCell(column, row),
+				row,
+				column
+			};
+			perRow.set(column.id, ctx);
+		}
+		return ctx;
+	}
+	constructor() {
+		this.label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+		this.caption = input(void 0, ...ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []);
+		this.columns = input.required(...ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []);
+		this.rows = input.required(...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
+		this.locale = input(void 0, ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+		this.rowId = input((_row, index) => String(index), ...ngDevMode ? [{ debugName: "rowId" }] : /* istanbul ignore next */ []);
+		this.selectionMode = input("none", ...ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []);
+		this.pageSize = input(void 0, ...ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []);
+		this.storageKey = input(void 0, ...ngDevMode ? [{ debugName: "storageKey" }] : /* istanbul ignore next */ []);
+		this.labels = input({}, ...ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []);
+		this.mode = input("grid", ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
+		this.rowClass = input(void 0, ...ngDevMode ? [{ debugName: "rowClass" }] : /* istanbul ignore next */ []);
+		this.rowAttrs = input(void 0, ...ngDevMode ? [{ debugName: "rowAttrs" }] : /* istanbul ignore next */ []);
+		this.activateRows = input(false, ...ngDevMode ? [{ debugName: "activateRows" }] : /* istanbul ignore next */ []);
+		this.empty = input(void 0, ...ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []);
+		this.footer = input(void 0, ...ngDevMode ? [{ debugName: "footer" }] : /* istanbul ignore next */ []);
+		this.busy = input(false, ...ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []);
+		this.scroll = input(true, ...ngDevMode ? [{ debugName: "scroll" }] : /* istanbul ignore next */ []);
+		this.exportFilename = input("data-grid", ...ngDevMode ? [{ debugName: "exportFilename" }] : /* istanbul ignore next */ []);
+		this.exportScope = input("view", ...ngDevMode ? [{ debugName: "exportScope" }] : /* istanbul ignore next */ []);
+		this.exportFormulas = input(false, ...ngDevMode ? [{ debugName: "exportFormulas" }] : /* istanbul ignore next */ []);
+		this.exportHandler = input(void 0, ...ngDevMode ? [{ debugName: "exportHandler" }] : /* istanbul ignore next */ []);
+		this.virtualize = input(void 0, ...ngDevMode ? [{ debugName: "virtualize" }] : /* istanbul ignore next */ []);
+		this.className = input("", ...ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []);
+		this.selected = model([], ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+		this.filter = model("", ...ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []);
+		this.sort = model({
+			columnId: "",
+			direction: "none"
+		}, ...ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []);
+		this.columnOrder = model([], ...ngDevMode ? [{ debugName: "columnOrder" }] : /* istanbul ignore next */ []);
+		this.page = model(1, ...ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []);
+		this.cellEdit = output();
+		this.filesSelected = output();
+		this.fileRemove = output();
+		this.rowActivate = output();
+		this.exportFile = output();
+		this.gridId = nextDataGridId();
+		this.minColumnWidth = MIN_COLUMN_WIDTH;
+		this.rootRef = viewChild.required("rootEl", ...ngDevMode ? [{ debugName: "rootRef" }] : /* istanbul ignore next */ []);
+		this.scrollRef = viewChild("scrollEl", ...ngDevMode ? [{ debugName: "scrollRef" }] : /* istanbul ignore next */ []);
+		this.injector = inject(Injector);
+		this.statusMessage = signal("", ...ngDevMode ? [{ debugName: "statusMessage" }] : /* istanbul ignore next */ []);
+		this.hiddenColumnIds = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "hiddenColumnIds" }] : /* istanbul ignore next */ []);
+		this.columnWidths = signal({}, ...ngDevMode ? [{ debugName: "columnWidths" }] : /* istanbul ignore next */ []);
+		this.focusedRow = signal(-1, ...ngDevMode ? [{ debugName: "focusedRow" }] : /* istanbul ignore next */ []);
+		this.focusedCol = signal(0, ...ngDevMode ? [{ debugName: "focusedCol" }] : /* istanbul ignore next */ []);
+		this.lastSelectedIndex = -1;
+		this.editingState = signal(null, ...ngDevMode ? [{ debugName: "editingState" }] : /* istanbul ignore next */ []);
+		this.scrollTop = signal(0, ...ngDevMode ? [{ debugName: "scrollTop" }] : /* istanbul ignore next */ []);
+		this.draggingColumnId = null;
+		this.resolvedColumns = computed(() => this.columns().map((c) => resolveColumn(c, this.locale(), this.rows())), ...ngDevMode ? [{ debugName: "resolvedColumns" }] : /* istanbul ignore next */ []);
+		this.isGrid = computed(() => this.mode() === "grid", ...ngDevMode ? [{ debugName: "isGrid" }] : /* istanbul ignore next */ []);
+		this.hasSelection = computed(() => this.selectionMode() !== "none", ...ngDevMode ? [{ debugName: "hasSelection" }] : /* istanbul ignore next */ []);
+		this.colOffset = computed(() => this.hasSelection() ? 1 : 0, ...ngDevMode ? [{ debugName: "colOffset" }] : /* istanbul ignore next */ []);
+		this.orderedColumns = computed(() => {
+			const order = this.columnOrder();
+			const columns = this.resolvedColumns();
+			if (order.length === 0) return columns;
+			const rank = (id) => {
+				const i = order.indexOf(id);
+				return i === -1 ? order.length : i;
+			};
+			return columns.map((c, i) => ({
+				c,
+				i
+			})).sort((a, b) => rank(a.c.id) - rank(b.c.id) || a.i - b.i).map((x) => x.c);
+		}, ...ngDevMode ? [{ debugName: "orderedColumns" }] : /* istanbul ignore next */ []);
+		this.visibleColumns = computed(() => this.orderedColumns().filter((c) => !this.hiddenColumnIds().has(c.id)), ...ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []);
+		this.hidableColumns = computed(() => this.resolvedColumns().filter((c) => c.hidable), ...ngDevMode ? [{ debugName: "hidableColumns" }] : /* istanbul ignore next */ []);
+		this.entries = computed(() => {
+			const rowId = this.rowId();
+			return this.rows().map((row, index) => ({
+				row,
+				id: rowId(row, index)
+			}));
+		}, ...ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []);
+		this.cellCache = computed(() => {
+			this.resolvedColumns();
+			return /* @__PURE__ */ new WeakMap();
+		}, ...ngDevMode ? [{ debugName: "cellCache" }] : /* istanbul ignore next */ []);
+		this.searchIndex = computed(() => {
+			const filterable = this.resolvedColumns().filter((c) => c.filterable !== false);
+			return this.entries().map((entry) => filterable.map((column) => (column.filterText ? column.filterText(this.cellFor(column, entry.row).value, entry.row) : this.cellFor(column, entry.row).formatted).toLowerCase()));
+		}, ...ngDevMode ? [{ debugName: "searchIndex" }] : /* istanbul ignore next */ []);
+		this.filteredEntries = computed(() => {
+			const text = this.filter().trim().toLowerCase();
+			if (!text) return this.entries();
+			const index = this.searchIndex();
+			return this.entries().filter((_entry, i) => index[i].some((value) => value.includes(text)));
+		}, ...ngDevMode ? [{ debugName: "filteredEntries" }] : /* istanbul ignore next */ []);
+		this.sortedEntries = computed(() => {
+			const sort = this.sort();
+			const filtered = this.filteredEntries();
+			if (sort.direction === "none" || !sort.columnId) return filtered;
+			const column = this.resolvedColumns().find((c) => c.id === sort.columnId);
+			if (!column) return filtered;
+			const dir = sort.direction === "ascending" ? 1 : -1;
+			const compare = column.compare;
+			const keyed = filtered.map((entry) => ({
+				entry,
+				key: this.cellFor(column, entry.row).value
+			}));
+			keyed.sort((a, b) => {
+				const av = a.key;
+				const bv = b.key;
+				if (av === bv) return 0;
+				if (av === null || av === void 0) return 1;
+				if (bv === null || bv === void 0) return -1;
+				if (compare) return compare(av, bv) * dir;
+				return av > bv ? dir : -dir;
+			});
+			return keyed.map((k) => k.entry);
+		}, ...ngDevMode ? [{ debugName: "sortedEntries" }] : /* istanbul ignore next */ []);
+		this.pageCount = computed(() => {
+			const size = this.pageSize();
+			return size ? Math.max(1, Math.ceil(this.sortedEntries().length / size)) : 1;
+		}, ...ngDevMode ? [{ debugName: "pageCount" }] : /* istanbul ignore next */ []);
+		this.clampedPage = computed(() => Math.min(Math.max(this.page(), 1), this.pageCount()), ...ngDevMode ? [{ debugName: "clampedPage" }] : /* istanbul ignore next */ []);
+		this.pageStart = computed(() => {
+			const size = this.pageSize();
+			return size ? (this.clampedPage() - 1) * size : 0;
+		}, ...ngDevMode ? [{ debugName: "pageStart" }] : /* istanbul ignore next */ []);
+		this.pageEntries = computed(() => {
+			const size = this.pageSize();
+			return size ? this.sortedEntries().slice(this.pageStart(), this.pageStart() + size) : this.sortedEntries();
+		}, ...ngDevMode ? [{ debugName: "pageEntries" }] : /* istanbul ignore next */ []);
+		this.lastCol = computed(() => this.colOffset() + this.visibleColumns().length - 1, ...ngDevMode ? [{ debugName: "lastCol" }] : /* istanbul ignore next */ []);
+		this.activeRow = computed(() => Math.max(-1, Math.min(this.focusedRow(), this.pageEntries().length - 1)), ...ngDevMode ? [{ debugName: "activeRow" }] : /* istanbul ignore next */ []);
+		this.activeCol = computed(() => Math.max(0, Math.min(this.focusedCol(), this.lastCol())), ...ngDevMode ? [{ debugName: "activeCol" }] : /* istanbul ignore next */ []);
+		this.indexed = computed(() => !!this.pageSize() || !!this.virtualize(), ...ngDevMode ? [{ debugName: "indexed" }] : /* istanbul ignore next */ []);
+		this.rowCount = computed(() => this.pageSize() ? this.sortedEntries().length + 1 : this.virtualize() ? this.pageEntries().length + 1 : void 0, ...ngDevMode ? [{ debugName: "rowCount" }] : /* istanbul ignore next */ []);
+		this.renderItems = computed(() => {
+			const total = this.pageEntries().length;
+			const v = this.virtualize();
+			if (!v) return this.pageEntries().map((_, index) => ({
+				kind: "row",
+				index
+			}));
+			const overscan = v.overscan ?? 3;
+			const top = this.scrollTop();
+			const start = Math.max(0, Math.floor(top / v.rowHeight) - overscan);
+			const end = Math.min(total, Math.ceil((top + v.height) / v.rowHeight) + overscan);
+			const indices = /* @__PURE__ */ new Set();
+			for (let i = start; i < end; i++) indices.add(i);
+			const active = this.activeRow();
+			if (active >= 0 && active < total) indices.add(active);
+			const items = [];
+			let previous = -1;
+			for (const index of [...indices].sort((a, b) => a - b)) {
+				if (index - previous > 1) items.push({
+					kind: "spacer",
+					rows: index - previous - 1,
+					key: `spacer-${previous}`
+				});
+				items.push({
+					kind: "row",
+					index
+				});
+				previous = index;
+			}
+			if (total - 1 - previous > 0) items.push({
+				kind: "spacer",
+				rows: total - 1 - previous,
+				key: `spacer-${previous}`
+			});
+			return items;
+		}, ...ngDevMode ? [{ debugName: "renderItems" }] : /* istanbul ignore next */ []);
+		this.scrollStyle = computed(() => {
+			const v = this.virtualize();
+			return v ? `height:${v.height}px;overflow:auto` : null;
+		}, ...ngDevMode ? [{ debugName: "scrollStyle" }] : /* istanbul ignore next */ []);
+		this.selectedSet = computed(() => new Set(this.selected()), ...ngDevMode ? [{ debugName: "selectedSet" }] : /* istanbul ignore next */ []);
+		this.allSelected = computed(() => this.sortedEntries().length > 0 && this.sortedEntries().every((e) => this.selectedSet().has(e.id)), ...ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []);
+		this.someSelected = computed(() => !this.allSelected() && this.sortedEntries().some((e) => this.selectedSet().has(e.id)), ...ngDevMode ? [{ debugName: "someSelected" }] : /* istanbul ignore next */ []);
+		this.footerContext = computed(() => ({
+			columns: this.visibleColumns(),
+			rows: this.pageEntries().map((e) => e.row)
+		}), ...ngDevMode ? [{ debugName: "footerContext" }] : /* istanbul ignore next */ []);
+		this.exportColumns = computed(() => this.visibleColumns().filter((c) => c.exportable !== false), ...ngDevMode ? [{ debugName: "exportColumns" }] : /* istanbul ignore next */ []);
+		this.exportEntries = computed(() => this.exportScope() === "selected" ? this.sortedEntries().filter((e) => this.selectedSet().has(e.id)) : this.sortedEntries(), ...ngDevMode ? [{ debugName: "exportEntries" }] : /* istanbul ignore next */ []);
+		this.hasExportButtons = computed(() => {
+			const l = this.labels();
+			return !!(l.exportCsv || l.exportTsv || l.exportExcel);
+		}, ...ngDevMode ? [{ debugName: "hasExportButtons" }] : /* istanbul ignore next */ []);
+		effect(() => {
+			const root = this.rootRef().nativeElement;
+			const grid = this.isGrid();
+			const count = this.rowCount();
+			const busy = this.busy();
+			this.sortedEntries();
+			this.pageEntries();
+			this.visibleColumns();
+			this.scroll();
+			afterNextRender(() => {
+				const table = root.querySelector("table.data-table");
+				if (!table) return;
+				table.setAttribute("role", grid ? "grid" : "table");
+				if (grid && count !== void 0) table.setAttribute("aria-rowcount", String(count));
+				else table.removeAttribute("aria-rowcount");
+				if (busy) table.setAttribute("aria-busy", "true");
+				else table.removeAttribute("aria-busy");
+			}, { injector: this.injector });
+		});
+		effect(() => {
+			this.pageEntries();
+			this.visibleColumns();
+			this.isGrid();
+			this.scrollTop();
+			this.editingState();
+			afterNextRender(() => this.normaliseWidgets(), { injector: this.injector });
+		});
+		let restored = false;
+		effect(() => {
+			const key = this.storageKey();
+			if (!key || restored) return;
+			restored = true;
+			untracked(() => this.restoreView(key));
+		});
+		effect(() => {
+			const key = this.storageKey();
+			const snapshot = {
+				columnWidths: this.columnWidths(),
+				hiddenColumnIds: [...this.hiddenColumnIds()],
+				sort: this.sort()
+			};
+			if (!key || typeof localStorage === "undefined") return;
+			try {
+				localStorage.setItem(key, JSON.stringify(snapshot));
+			} catch {}
+		});
+	}
+	announce(message) {
+		if (message) this.statusMessage.set(message);
+	}
+	ariaSortFor(column) {
+		if (!column.sortable) return null;
+		return this.sort().columnId === column.id ? this.sort().direction : "none";
+	}
+	toggleSort(column) {
+		if (!column.sortable) return;
+		const current = this.sort();
+		const next = current.columnId !== column.id ? {
+			columnId: column.id,
+			direction: "ascending"
+		} : current.direction === "ascending" ? {
+			columnId: column.id,
+			direction: "descending"
+		} : current.direction === "descending" ? {
+			columnId: "",
+			direction: "none"
+		} : {
+			columnId: column.id,
+			direction: "ascending"
+		};
+		this.sort.set(next);
+		this.announce(this.labels().sortAnnouncement?.(column.header, next.direction));
+	}
+	onFilterInput(event) {
+		this.filter.set(event.target.value);
+		this.page.set(1);
+		this.announce(this.labels().filterAnnouncement?.(this.filteredEntries().length, this.rows().length));
+	}
+	isSelected(id) {
+		return this.selectedSet().has(id);
+	}
+	setSelected(next) {
+		this.selected.set(next);
+		this.announce(this.labels().selectionAnnouncement?.(next.length));
+	}
+	onRowSelectClick(index, event) {
+		const e = event;
+		this.toggleRow(index, e);
+	}
+	toggleRow(index, event) {
+		const sorted = this.sortedEntries();
+		const id = sorted[index].id;
+		const selected = this.selected();
+		const mode = this.selectionMode();
+		if (mode === "single") this.setSelected(this.isSelected(id) ? [] : [id]);
+		else if (mode === "multiple") {
+			if (event?.shiftKey && this.lastSelectedIndex >= 0) {
+				const [start, end] = this.lastSelectedIndex < index ? [this.lastSelectedIndex, index] : [index, this.lastSelectedIndex];
+				const range = sorted.slice(start, end + 1).map((e) => e.id);
+				this.setSelected([.../* @__PURE__ */ new Set([...selected, ...range])]);
+			} else if (event?.ctrlKey || event?.metaKey) this.setSelected(this.isSelected(id) ? selected.filter((x) => x !== id) : [...selected, id]);
+			else this.setSelected(this.isSelected(id) && selected.length === 1 ? [] : [id]);
+		}
+		this.lastSelectedIndex = index;
+	}
+	toggleSelectAll() {
+		if (this.allSelected()) this.setSelected([]);
+		else this.setSelected(this.sortedEntries().map((e) => e.id));
+	}
+	widthFor(column) {
+		return this.columnWidths()[column.id] ?? column.width;
+	}
+	cellStyle(column) {
+		const parts = [];
+		const width = this.widthFor(column);
+		if (width) parts.push(`width:${width}px`);
+		if (column.align) parts.push(`text-align:${column.align}`);
+		return parts.length > 0 ? parts.join(";") : null;
+	}
+	setWidth(column, width) {
+		this.columnWidths.update((current) => ({
+			...current,
+			[column.id]: Math.max(MIN_COLUMN_WIDTH, width)
+		}));
+	}
+	onResizeKeydown(column, event) {
+		const e = event;
+		e.stopPropagation();
+		const current = this.widthFor(column) ?? 120;
+		if (e.key === "ArrowRight") {
+			e.preventDefault();
+			this.setWidth(column, current + RESIZE_STEP);
+		} else if (e.key === "ArrowLeft") {
+			e.preventDefault();
+			this.setWidth(column, current - RESIZE_STEP);
+		}
+	}
+	onResizePointerDown(column, event) {
+		const e = event;
+		e.preventDefault();
+		const startX = e.clientX;
+		const target = e.target;
+		const startWidth = this.widthFor(column) ?? target.closest("th")?.getBoundingClientRect().width ?? 120;
+		target.setPointerCapture?.(e.pointerId);
+		const onMove = (moveEvent) => this.setWidth(column, startWidth + (moveEvent.clientX - startX));
+		const onUp = () => {
+			window.removeEventListener("pointermove", onMove);
+			window.removeEventListener("pointerup", onUp);
+		};
+		window.addEventListener("pointermove", onMove);
+		window.addEventListener("pointerup", onUp);
+	}
+	toggleColumnVisibility(columnId) {
+		this.hiddenColumnIds.update((current) => {
+			const next = new Set(current);
+			if (next.has(columnId)) next.delete(columnId);
+			else next.add(columnId);
+			return next;
+		});
+	}
+	goToPage(next) {
+		const target = Math.min(Math.max(next, 1), this.pageCount());
+		if (target === this.clampedPage()) return;
+		this.page.set(target);
+		this.announce(this.labels().pageAnnouncement?.(target, this.pageCount()));
+	}
+	moveColumn(columnId, toVisibleIndex) {
+		const ids = this.visibleColumns().map((c) => c.id);
+		const from = ids.indexOf(columnId);
+		const to = Math.min(Math.max(toVisibleIndex, 0), ids.length - 1);
+		if (from === -1 || from === to) return false;
+		ids.splice(to, 0, ...ids.splice(from, 1));
+		const visibleSet = new Set(ids);
+		let next = 0;
+		this.columnOrder.set(this.orderedColumns().map((c) => visibleSet.has(c.id) ? ids[next++] : c.id));
+		const column = this.resolvedColumns().find((c) => c.id === columnId);
+		this.announce(this.labels().columnMoveAnnouncement?.(column.header, to + 1, ids.length));
+		return true;
+	}
+	onHeaderDragStart(column, event) {
+		if (!column.movable) return;
+		this.draggingColumnId = column.id;
+		event.dataTransfer?.setData("text/plain", column.id);
+	}
+	onHeaderDragOver(event) {
+		if (this.draggingColumnId) event.preventDefault();
+	}
+	onHeaderDrop(targetId, event) {
+		event.preventDefault();
+		const id = this.draggingColumnId;
+		this.draggingColumnId = null;
+		if (!id || id === targetId) return;
+		const to = this.visibleColumns().findIndex((c) => c.id === targetId);
+		if (to >= 0) this.moveColumn(id, to);
+	}
+	onScroll(event) {
+		if (this.virtualize()) this.scrollTop.set(event.currentTarget.scrollTop);
+	}
+	revealRow(index) {
+		const v = this.virtualize();
+		if (!v || index < 0) return;
+		const top = index * v.rowHeight;
+		const current = this.scrollTop();
+		let next = current;
+		if (top < current) next = top;
+		else if (top + v.rowHeight > current + v.height) next = top + v.rowHeight - v.height;
+		if (next === current) return;
+		this.scrollTop.set(next);
+		const el = this.scrollRef()?.nativeElement;
+		if (el) el.scrollTop = next;
+	}
+	focusActiveCell() {
+		afterNextRender(() => {
+			this.rootRef().nativeElement.querySelector(".data-table-th[tabindex=\"0\"], .data-table-td[tabindex=\"0\"]")?.focus({ preventScroll: true });
+		}, { injector: this.injector });
+	}
+	moveFocus(row, col) {
+		const nextRow = Math.min(Math.max(row, -1), this.pageEntries().length - 1);
+		this.focusedRow.set(nextRow);
+		this.focusedCol.set(Math.min(Math.max(col, 0), this.lastCol()));
+		this.revealRow(nextRow);
+		this.focusActiveCell();
+	}
+	exportCell(column, row) {
+		if (column.exportValue) return column.exportValue(row);
+		const ctx = this.cellFor(column, row);
+		const value = ctx.value;
+		if (value === null || value === void 0) return null;
+		if (typeof value === "number" || typeof value === "boolean" || value instanceof Date) return value;
+		return ctx.formatted;
+	}
+	hasUtcColumn(c) {
+		return c.type === "time-zone" && !!c.exportUtc && !!c.referenceDate && !!this.labels().exportUtcHeader;
+	}
+	runExport(format) {
+		const live = (c) => format === "xlsx" && this.exportFormulas() && c.type === "formula" && !!c.source;
+		const headers = [];
+		for (const c of this.exportColumns()) {
+			headers.push(c.header);
+			if (this.hasUtcColumn(c)) headers.push(this.labels().exportUtcHeader(c.header));
+		}
+		const rows = this.exportEntries().map((entry) => {
+			const cells = [];
+			for (const c of this.exportColumns()) {
+				const expression = live(c) ? c.source(entry.row) : void 0;
+				cells.push(typeof expression === "string" && expression !== "" && !c.errorOf?.(entry.row) ? {
+					formula: expression,
+					result: this.exportCell(c, entry.row)
+				} : this.exportCell(c, entry.row));
+				if (this.hasUtcColumn(c)) cells.push(zonedUtcTime(this.cellFor(c, entry.row).value, c.referenceDate));
+			}
+			return cells;
+		});
+		const table = {
+			headers,
+			rows
+		};
+		const name = this.exportFilename();
+		const filename = exportFilename(name, format);
+		const blob = exportBlob(table, format, { sheetName: name });
+		const file = {
+			format,
+			filename,
+			rowCount: rows.length,
+			blob
+		};
+		this.exportFile.emit(file);
+		if (this.exportHandler()?.(file) === false) return;
+		downloadBlob(blob, filename);
+		this.announce(this.labels().exportAnnouncement?.(format, rows.length, filename));
+	}
+	onFileDragOver(column, event) {
+		if (column.type !== "file" || !column.editable) return;
+		if (Array.from(event.dataTransfer?.types ?? []).includes("Files")) event.preventDefault();
+	}
+	onFileDrop(entry, column, event) {
+		if (column.type !== "file" || !column.editable) return;
+		const dropped = Array.from(event.dataTransfer?.files ?? []);
+		if (dropped.length === 0) return;
+		event.preventDefault();
+		const files = column.multiple === false ? dropped.slice(0, 1) : dropped;
+		this.filesSelected.emit({
+			rowId: entry.id,
+			row: entry.row,
+			columnId: column.id,
+			files
+		});
+	}
+	onFileInput(entry, column, event) {
+		const input = event.target;
+		const chosen = Array.from(input.files ?? []);
+		if (chosen.length > 0) this.filesSelected.emit({
+			rowId: entry.id,
+			row: entry.row,
+			columnId: column.id,
+			files: chosen
+		});
+		input.value = "";
+	}
+	isEditable(column) {
+		if (!column.editable) return false;
+		if (column.type === "rollup" || column.type === "file") return false;
+		if (column.type === "person" && !column.personEditor) return false;
+		return true;
+	}
+	isEditingCell(entry, column) {
+		const e = this.editingState();
+		return !!e && e.rowId === entry.id && e.columnId === column.id;
+	}
+	startEdit(entry, column) {
+		if (!this.isEditable(column)) return;
+		const raw = column.type === "formula" && column.source ? column.source(entry.row) : defaultAccessor(column, entry.row);
+		if (column.type === "time-zone") {
+			const zoned = isZonedTime(raw) ? raw : null;
+			this.editingState.set({
+				rowId: entry.id,
+				columnId: column.id,
+				draft: zoned?.time ?? "",
+				zone: zoned?.timeZone ?? column.timeZones?.[0]?.id ?? ""
+			});
+		} else {
+			const text = column.type === "link" ? linkParts(raw)?.href ?? "" : raw === null || raw === void 0 ? "" : String(raw);
+			this.editingState.set({
+				rowId: entry.id,
+				columnId: column.id,
+				draft: text
+			});
+		}
+		afterNextRender(() => {
+			const editor = this.rootRef().nativeElement.querySelector(".data-grid-cell-editor");
+			editor?.focus();
+			if (editor instanceof HTMLInputElement && editor.type === "text") editor.select();
+		}, { injector: this.injector });
+	}
+	parseDraft(column, row, draft, zone) {
+		if (column.parse) return column.parse(draft, row);
+		if (column.type === "time-zone") return draft === "" ? null : {
+			time: draft,
+			timeZone: zone ?? ""
+		};
+		if (column.editor === "number") return draft.trim() === "" ? null : Number(draft);
+		if (column.editor === "date" || column.editor === "time" || column.editor === "select") return draft === "" ? null : draft;
+		return draft;
+	}
+	isStructurallyEqual(a, b) {
+		return typeof a === "object" && typeof b === "object" && a !== null && b !== null && JSON.stringify(a) === JSON.stringify(b);
+	}
+	commitValue(entry, column, value) {
+		const message = column.validate?.(value, entry.row);
+		const invalidType = isInvalidForType(column, value);
+		if (message || invalidType) {
+			const text = message ?? this.labels().invalidValue?.(column.header, column.type ?? "") ?? "";
+			const current = this.editingState();
+			if (current) this.editingState.set({
+				...current,
+				error: text || void 0,
+				invalid: true
+			});
+			this.announce(this.labels().editError?.(column.header, text));
+			return false;
+		}
+		const previous = column.type === "formula" && column.source ? column.source(entry.row) : defaultAccessor(column, entry.row);
+		this.editingState.set(null);
+		if (value !== previous && !this.isStructurallyEqual(value, previous)) {
+			this.cellEdit.emit({
+				rowId: entry.id,
+				row: entry.row,
+				columnId: column.id,
+				value,
+				previous
+			});
+			this.announce(this.labels().editAnnouncement?.(column.header, column.format ? column.format(value, entry.row) : String(value ?? "")));
+		}
+		return true;
+	}
+	commitEdit() {
+		const current = this.editingState();
+		if (!current) return;
+		const entry = this.entries().find((e) => e.id === current.rowId);
+		const column = this.resolvedColumns().find((c) => c.id === current.columnId);
+		if (!entry || !column) {
+			this.editingState.set(null);
+			return;
+		}
+		if (this.commitValue(entry, column, this.parseDraft(column, entry.row, current.draft, current.zone))) this.focusActiveCell();
+	}
+	cancelEdit() {
+		const current = this.editingState();
+		if (!current) return;
+		this.editingState.set(null);
+		const column = this.resolvedColumns().find((c) => c.id === current.columnId);
+		if (column) this.announce(this.labels().editCancelAnnouncement?.(column.header));
+		this.focusActiveCell();
+	}
+	onEditorKeydown(event) {
+		const e = event;
+		e.stopPropagation();
+		if (e.isComposing || e.keyCode === 229) return;
+		if (e.key === "Enter") {
+			e.preventDefault();
+			this.commitEdit();
+		} else if (e.key === "Escape") {
+			e.preventDefault();
+			this.cancelEdit();
+		}
+	}
+	onEditorBlur() {
+		if (this.editingState()) this.commitEdit();
+	}
+	onZonedFocusout(event) {
+		const e = event;
+		if (this.editingState() && !e.currentTarget.contains(e.relatedTarget)) this.commitEdit();
+	}
+	setDraft(event) {
+		const current = this.editingState();
+		if (current) this.editingState.set({
+			...current,
+			draft: event.target.value,
+			error: void 0,
+			invalid: false
+		});
+	}
+	setZone(event) {
+		const current = this.editingState();
+		if (current) this.editingState.set({
+			...current,
+			zone: event.target.value,
+			error: void 0,
+			invalid: false
+		});
+	}
+	personEditorContext(entry, column, ctx) {
+		return {
+			value: ctx.value,
+			commit: (v) => void this.commitValue(entry, column, v),
+			cancel: () => this.cancelEdit()
+		};
+	}
+	activateFocusedCell() {
+		if (this.activeCol() === 0 && this.hasSelection()) {
+			if (this.activeRow() === -1) {
+				if (this.selectionMode() === "multiple") this.toggleSelectAll();
+			} else this.toggleRow(this.pageStart() + this.activeRow());
+			return;
+		}
+		const column = this.visibleColumns()[this.activeCol() - this.colOffset()];
+		if (!column) return;
+		if (this.activeRow() === -1) this.toggleSort(column);
+	}
+	widgetsIn(cell) {
+		return Array.from(cell.querySelectorAll(WIDGET_SELECTOR)).filter((el) => !el.closest("[data-grid-own]"));
+	}
+	setWidgetTabindex(cell, value) {
+		for (const widget of this.widgetsIn(cell)) widget.setAttribute("tabindex", value);
+	}
+	normaliseWidgets() {
+		if (!this.isGrid()) return;
+		for (const cell of this.rootRef().nativeElement.querySelectorAll(".data-table-body [data-row][data-col]")) {
+			if (cell.getAttribute("data-grid-entered") === "true") continue;
+			this.setWidgetTabindex(cell, "-1");
+		}
+	}
+	enterCell(cell) {
+		const first = this.widgetsIn(cell)[0];
+		if (!first) return false;
+		cell.setAttribute("data-grid-entered", "true");
+		this.setWidgetTabindex(cell, "0");
+		first.focus();
+		return true;
+	}
+	leaveCell(cell) {
+		if (cell.getAttribute("data-grid-entered") !== "true") return;
+		cell.removeAttribute("data-grid-entered");
+		this.setWidgetTabindex(cell, "-1");
+	}
+	onGridFocusin(event) {
+		if (!this.isGrid()) return;
+		const target = event.target;
+		const cell = target.closest("[data-row][data-col]");
+		if (!cell) return;
+		this.focusedRow.set(Number(cell.dataset["row"]));
+		this.focusedCol.set(Number(cell.dataset["col"]));
+		if (target !== cell && !target.closest("[data-grid-own]") && cell.closest(".data-table-body")) {
+			cell.setAttribute("data-grid-entered", "true");
+			this.setWidgetTabindex(cell, "0");
+		}
+	}
+	onGridFocusout(event) {
+		if (!this.isGrid()) return;
+		const e = event;
+		const cell = e.target.closest("[data-row][data-col]");
+		if (!cell) return;
+		const next = e.relatedTarget;
+		if (next && cell.contains(next)) return;
+		this.leaveCell(cell);
+	}
+	onGridClick(event) {
+		if (!this.activateRows()) return;
+		const target = event.target;
+		const cell = target.closest("[data-row][data-col]");
+		if (!cell || cell.closest(".data-table-head")) return;
+		if (target.closest(WIDGET_SELECTOR) || target.closest("[data-grid-own]")) return;
+		const entry = this.pageEntries()[Number(cell.dataset["row"])];
+		if (entry) this.rowActivate.emit({
+			row: entry.row,
+			id: entry.id
+		});
+	}
+	onGridDblclick(event) {
+		const target = event.target;
+		const cell = target.closest("[data-row][data-col]");
+		if (!cell || cell.closest(".data-table-head") || target.closest("input, button, select, textarea")) return;
+		const entry = this.pageEntries()[Number(cell.dataset["row"])];
+		const column = this.visibleColumns()[Number(cell.dataset["col"]) - this.colOffset()];
+		if (entry && column && this.isEditable(column)) this.startEdit(entry, column);
+	}
+	onGridKeydown(event) {
+		if (!this.isGrid()) return;
+		const e = event;
+		const target = e.target;
+		const cell = target.closest("[data-row][data-col]");
+		if (!cell) return;
+		if (target !== cell && !target.closest("[data-grid-own]")) {
+			if (e.key === "Escape") {
+				e.preventDefault();
+				cell.focus({ preventScroll: true });
+			}
+			return;
+		}
+		const activeRow = this.activeRow();
+		const activeCol = this.activeCol();
+		const colOffset = this.colOffset();
+		if (e.altKey && activeRow === -1 && (e.key === "ArrowRight" || e.key === "ArrowLeft")) {
+			const column = this.visibleColumns()[activeCol - colOffset];
+			if (column?.movable) {
+				e.preventDefault();
+				const delta = e.key === "ArrowRight" ? 1 : -1;
+				if (this.moveColumn(column.id, activeCol - colOffset + delta)) this.moveFocus(-1, activeCol + delta);
+				return;
+			}
+		}
+		const size = this.pageSize();
+		switch (e.key) {
+			case "ArrowRight":
+				e.preventDefault();
+				this.moveFocus(activeRow, activeCol + 1);
+				break;
+			case "ArrowLeft":
+				e.preventDefault();
+				this.moveFocus(activeRow, activeCol - 1);
+				break;
+			case "ArrowDown":
+				e.preventDefault();
+				this.moveFocus(activeRow + 1, activeCol);
+				break;
+			case "ArrowUp":
+				e.preventDefault();
+				this.moveFocus(activeRow - 1, activeCol);
+				break;
+			case "Home":
+				e.preventDefault();
+				if (e.ctrlKey || e.metaKey) this.moveFocus(-1, 0);
+				else this.moveFocus(activeRow, 0);
+				break;
+			case "End":
+				e.preventDefault();
+				if (e.ctrlKey || e.metaKey) this.moveFocus(this.pageEntries().length - 1, this.lastCol());
+				else this.moveFocus(activeRow, this.lastCol());
+				break;
+			case "PageDown":
+				e.preventDefault();
+				this.moveFocus(activeRow + (size ?? 10), activeCol);
+				break;
+			case "PageUp":
+				e.preventDefault();
+				this.moveFocus(activeRow - (size ?? 10), activeCol);
+				break;
+			case "F2": {
+				const entry = this.pageEntries()[Number(cell.dataset["row"])];
+				const column = this.visibleColumns()[Number(cell.dataset["col"]) - colOffset];
+				if (target === cell && entry && column && this.isEditable(column)) {
+					e.preventDefault();
+					this.startEdit(entry, column);
+				}
+				break;
+			}
+			case "Enter":
+			case " ":
+				e.preventDefault();
+				if (e.key === "Enter" && target === cell && cell.closest(".data-table-body")) {
+					const entry = this.pageEntries()[Number(cell.dataset["row"])];
+					const column = this.visibleColumns()[Number(cell.dataset["col"]) - colOffset];
+					if (entry && column && this.isEditable(column)) {
+						this.startEdit(entry, column);
+						break;
+					}
+				}
+				if (target === cell && cell.closest(".data-table-body") && !cell.querySelector("[data-grid-own]")) {
+					if (this.enterCell(cell)) break;
+					if (e.key === "Enter" && this.activateRows()) {
+						const entry = this.pageEntries()[Number(cell.dataset["row"])];
+						if (entry) this.rowActivate.emit({
+							row: entry.row,
+							id: entry.id
+						});
+						break;
+					}
+				}
+				this.activateFocusedCell();
+		}
+	}
+	restoreView(key) {
+		try {
+			const raw = localStorage.getItem(key);
+			if (raw) {
+				const saved = JSON.parse(raw);
+				if (saved.columnWidths) this.columnWidths.set(saved.columnWidths);
+				if (saved.hiddenColumnIds) this.hiddenColumnIds.set(new Set(saved.hiddenColumnIds));
+				if (saved.sort) this.sort.set(saved.sort);
+			}
+		} catch {}
+	}
+	rowLabelOf(entry) {
+		const first = this.visibleColumns()[0];
+		return first ? this.cellFor(first, entry.row).formatted : entry.id;
+	}
+	cellClassOf(column, ctx) {
+		return (typeof column.cellClass === "function" ? column.cellClass(ctx) : column.cellClass) ?? "";
+	}
+	peopleIn(value) {
+		return peopleOf(value);
+	}
+	shownPeople(column, value) {
+		const people = peopleOf(value);
+		return column.maxPeople !== void 0 ? people.slice(0, Math.max(0, column.maxPeople)) : people;
+	}
+	nameOf(person) {
+		return personName(person);
+	}
+	filesIn(value) {
+		return filesOf(value);
+	}
+	linkIn(value) {
+		return linkParts(value);
+	}
+	hrefOf(href) {
+		return href === void 0 ? null : safeHref(href);
+	}
+	stringOf(value) {
+		return String(value);
+	}
+	ungroupedOptions(column) {
+		return (column.options ?? []).filter((o) => !o.group);
+	}
+	groupsOf(column) {
+		return [...new Set((column.options ?? []).filter((o) => o.group).map((o) => o.group))];
+	}
+	optionsInGroup(column, group) {
+		return (column.options ?? []).filter((o) => o.group === group);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: DataGrid,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.3",
+			type: DataGrid,
+			isStandalone: true,
+			selector: "lily-data-grid",
+			inputs: {
+				label: {
+					classPropertyName: "label",
+					publicName: "label",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				caption: {
+					classPropertyName: "caption",
+					publicName: "caption",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				columns: {
+					classPropertyName: "columns",
+					publicName: "columns",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				rows: {
+					classPropertyName: "rows",
+					publicName: "rows",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				locale: {
+					classPropertyName: "locale",
+					publicName: "locale",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				rowId: {
+					classPropertyName: "rowId",
+					publicName: "rowId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				selectionMode: {
+					classPropertyName: "selectionMode",
+					publicName: "selectionMode",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				pageSize: {
+					classPropertyName: "pageSize",
+					publicName: "pageSize",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				storageKey: {
+					classPropertyName: "storageKey",
+					publicName: "storageKey",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				labels: {
+					classPropertyName: "labels",
+					publicName: "labels",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				mode: {
+					classPropertyName: "mode",
+					publicName: "mode",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				rowClass: {
+					classPropertyName: "rowClass",
+					publicName: "rowClass",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				rowAttrs: {
+					classPropertyName: "rowAttrs",
+					publicName: "rowAttrs",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				activateRows: {
+					classPropertyName: "activateRows",
+					publicName: "activateRows",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				empty: {
+					classPropertyName: "empty",
+					publicName: "empty",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				footer: {
+					classPropertyName: "footer",
+					publicName: "footer",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				busy: {
+					classPropertyName: "busy",
+					publicName: "busy",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				scroll: {
+					classPropertyName: "scroll",
+					publicName: "scroll",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				exportFilename: {
+					classPropertyName: "exportFilename",
+					publicName: "exportFilename",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				exportScope: {
+					classPropertyName: "exportScope",
+					publicName: "exportScope",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				exportFormulas: {
+					classPropertyName: "exportFormulas",
+					publicName: "exportFormulas",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				exportHandler: {
+					classPropertyName: "exportHandler",
+					publicName: "exportHandler",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				virtualize: {
+					classPropertyName: "virtualize",
+					publicName: "virtualize",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				className: {
+					classPropertyName: "className",
+					publicName: "className",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				selected: {
+					classPropertyName: "selected",
+					publicName: "selected",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				filter: {
+					classPropertyName: "filter",
+					publicName: "filter",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				sort: {
+					classPropertyName: "sort",
+					publicName: "sort",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				columnOrder: {
+					classPropertyName: "columnOrder",
+					publicName: "columnOrder",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				page: {
+					classPropertyName: "page",
+					publicName: "page",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				selected: "selectedChange",
+				filter: "filterChange",
+				sort: "sortChange",
+				columnOrder: "columnOrderChange",
+				page: "pageChange",
+				cellEdit: "cellEdit",
+				filesSelected: "filesSelected",
+				fileRemove: "fileRemove",
+				rowActivate: "rowActivate",
+				exportFile: "exportFile"
+			},
+			viewQueries: [{
+				propertyName: "rootRef",
+				first: true,
+				predicate: ["rootEl"],
+				descendants: true,
+				isSignal: true
+			}, {
+				propertyName: "scrollRef",
+				first: true,
+				predicate: ["scrollEl"],
+				descendants: true,
+				isSignal: true
+			}],
+			ngImport: i0,
+			template: `
+    <div #rootEl class="data-grid {{ className() }}">
+      @if (labels().search || hidableColumns().length > 0 || hasExportButtons()) {
+        <div class="data-grid-toolbar">
+          @if (labels().search; as searchLabel) {
+            <input class="data-grid-search" type="search" [attr.aria-label]="searchLabel" [value]="filter()" (input)="onFilterInput($event)" />
+          }
+          @if (hasExportButtons()) {
+            <div class="data-grid-export" role="group" [attr.aria-label]="labels().export ?? null">
+              @if (labels().exportCsv; as csv) {
+                <button type="button" class="data-grid-export-button" data-grid-export-format="csv" [disabled]="exportEntries().length === 0" (click)="runExport('csv')">{{ csv }}</button>
+              }
+              @if (labels().exportTsv; as tsv) {
+                <button type="button" class="data-grid-export-button" data-grid-export-format="tsv" [disabled]="exportEntries().length === 0" (click)="runExport('tsv')">{{ tsv }}</button>
+              }
+              @if (labels().exportExcel; as excel) {
+                <button type="button" class="data-grid-export-button" data-grid-export-format="xlsx" [disabled]="exportEntries().length === 0" (click)="runExport('xlsx')">{{ excel }}</button>
+              }
+            </div>
+          }
+          @if (hidableColumns().length > 0 && labels().columnVisibility; as visibilityLabel) {
+            <fieldset class="data-grid-column-visibility">
+              <legend>{{ visibilityLabel }}</legend>
+              @for (column of hidableColumns(); track column.id) {
+                <label>
+                  <input type="checkbox" [checked]="!hiddenColumnIds().has(column.id)" (change)="toggleColumnVisibility(column.id)" />
+                  {{ labels().columnVisibilityOption?.(column.header) ?? column.header }}
+                </label>
+              }
+            </fieldset>
+          }
+        </div>
+      }
+
+      @if (scroll()) {
+        <!-- A scrollable region must be reachable by keyboard (WCAG 2.1.1); in grid mode a roving cell is already a tab stop. -->
+        <div
+          #scrollEl
+          class="data-grid-scroll"
+          role="region"
+          [attr.aria-label]="label()"
+          [attr.tabindex]="isGrid() ? null : 0"
+          [attr.style]="scrollStyle()"
+          (scroll)="onScroll($event)"
+        >
+          <ng-container *ngTemplateOutlet="tableTemplate" />
+        </div>
+      } @else {
+        <ng-container *ngTemplateOutlet="tableTemplate" />
+      }
+
+      @if (pageSize()) {
+        <div class="data-grid-pagination">
+          <button type="button" class="data-grid-page-previous" [disabled]="clampedPage() <= 1" (click)="goToPage(clampedPage() - 1)">{{ labels().previousPage }}</button>
+          <span class="data-grid-page-status">{{ labels().pageStatus?.(clampedPage(), pageCount(), sortedEntries().length) }}</span>
+          <button type="button" class="data-grid-page-next" [disabled]="clampedPage() >= pageCount()" (click)="goToPage(clampedPage() + 1)">{{ labels().nextPage }}</button>
+        </div>
+      }
+
+      <p class="data-grid-status" aria-live="polite">{{ statusMessage() }}</p>
+    </div>
+
+    <ng-template #tableTemplate>
+      <lily-data-table
+        [label]="label()"
+        [className]="''"
+        (keydown)="onGridKeydown($event)"
+        (focusin)="onGridFocusin($event)"
+        (focusout)="onGridFocusout($event)"
+        (click)="onGridClick($event)"
+        (dblclick)="onGridDblclick($event)"
+      >
+        @if (caption()) {
+          <caption>{{ caption() }}</caption>
+        }
+        <thead lily-data-table-head>
+          <tr lily-data-table-row [attr.aria-rowindex]="indexed() ? 1 : null">
+            @if (hasSelection()) {
+              <th
+                lily-data-table-th
+                data-row="-1"
+                data-col="0"
+                [attr.tabindex]="isGrid() ? (activeRow() === -1 && activeCol() === 0 ? 0 : -1) : null"
+              >
+                @if (selectionMode() === 'multiple') {
+                  <input
+                    type="checkbox"
+                    data-grid-own
+                    [attr.tabindex]="isGrid() ? -1 : null"
+                    [attr.aria-label]="labels().selectAll ?? null"
+                    [checked]="allSelected()"
+                    [indeterminate]="someSelected()"
+                    (click)="toggleSelectAll()"
+                  />
+                } @else {
+                  <span class="data-grid-selection-header-label">{{ labels().selectionColumn }}</span>
+                }
+              </th>
+            }
+            @for (column of visibleColumns(); track column.id; let i = $index) {
+              <th
+                lily-data-table-th
+                data-row="-1"
+                [attr.data-col]="colOffset() + i"
+                [attr.data-align]="column.align ?? null"
+                [attr.data-cell-type]="column.type ?? null"
+                [attr.data-pinned]="column.pinned ?? null"
+                [attr.tabindex]="isGrid() ? (activeRow() === -1 && activeCol() === colOffset() + i ? 0 : -1) : null"
+                [attr.aria-sort]="ariaSortFor(column)"
+                [attr.aria-describedby]="column.type === 'rollup' && labels().rollupDescription ? gridId + '-' + column.id + '-description' : null"
+                [attr.style]="cellStyle(column)"
+                [attr.draggable]="column.movable ? 'true' : null"
+                (dragstart)="onHeaderDragStart(column, $event)"
+                (dragover)="onHeaderDragOver($event)"
+                (drop)="onHeaderDrop(column.id, $event)"
+              >
+                @if (column.sortable) {
+                  <button type="button" class="data-grid-sort-button" data-grid-own [attr.tabindex]="isGrid() ? -1 : null" (click)="toggleSort(column)">
+                    @if (column.headerCell; as headerTemplate) {
+                      <ng-container *ngTemplateOutlet="headerTemplate; context: { $implicit: column }" />
+                    } @else {<ng-container>{{ column.header }}</ng-container>}
+                  </button>
+                } @else if (column.headerCell; as headerTemplate) {
+                  <ng-container *ngTemplateOutlet="headerTemplate; context: { $implicit: column }" />
+                } @else {<ng-container>{{ column.header }}</ng-container>}
+                @if (column.type === 'rollup' && labels().rollupDescription; as describe) {
+                  <span class="data-grid-visually-hidden" [id]="gridId + '-' + column.id + '-description'">{{ describe(column.header) }}</span>
+                }
+                @if (column.resizable) {
+                  <!-- WAI-ARIA "window splitter" pattern: role="separator" plus tabindex/aria-valuenow is how a resize handle becomes focusable and operable. -->
+                  <span
+                    class="data-grid-resize-handle"
+                    role="separator"
+                    data-grid-own
+                    aria-orientation="vertical"
+                    [attr.aria-label]="labels().resizeHandle?.(column.header) ?? null"
+                    [attr.aria-valuenow]="widthFor(column) ?? 120"
+                    [attr.aria-valuemin]="minColumnWidth"
+                    tabindex="0"
+                    (keydown)="onResizeKeydown(column, $event)"
+                    (pointerdown)="onResizePointerDown(column, $event)"
+                  ></span>
+                }
+              </th>
+            }
+          </tr>
+        </thead>
+        <tbody lily-data-table-body>
+          @for (item of renderItems(); track item.kind === 'row' ? pageEntries()[item.index].id : item.key) {
+            @if (item.kind === 'spacer') {
+              <tr class="data-grid-spacer" aria-hidden="true" [attr.style]="'height:' + item.rows * (virtualize()?.rowHeight ?? 0) + 'px'">
+                <td [attr.colspan]="lastCol() + 1"></td>
+              </tr>
+            } @else {
+              @let entry = pageEntries()[item.index];
+              <tr
+                lily-data-table-row
+                [className]="rowClass()?.(entry.row) ?? ''"
+                [attr.aria-selected]="hasSelection() ? isSelected(entry.id) : null"
+                [attr.aria-rowindex]="indexed() ? pageStart() + item.index + 2 : null"
+                [lilyDataGridAttrs]="rowAttrs()?.(entry.row)"
+              >
+                @if (hasSelection()) {
+                  <td
+                    lily-data-table-td
+                    [attr.role]="isGrid() ? 'gridcell' : 'cell'"
+                    [attr.data-row]="item.index"
+                    data-col="0"
+                    [attr.tabindex]="isGrid() ? (activeRow() === item.index && activeCol() === 0 ? 0 : -1) : null"
+                  >
+                    <input
+                      [type]="selectionMode() === 'single' ? 'radio' : 'checkbox'"
+                      data-grid-own
+                      [attr.tabindex]="isGrid() ? -1 : null"
+                      [attr.aria-label]="labels().selectRow?.(rowLabelOf(entry)) ?? null"
+                      [checked]="isSelected(entry.id)"
+                      (click)="onRowSelectClick(pageStart() + item.index, $event)"
+                    />
+                  </td>
+                }
+                @for (column of visibleColumns(); track column.id; let colIndex = $index) {
+                  @let ctx = cellFor(column, entry.row);
+                  @if (column.rowHeader) {
+                    <th
+                      lily-data-table-th
+                      scope="row"
+                      role="rowheader"
+                      [className]="cellClassOf(column, ctx)"
+                      [attr.data-row]="item.index"
+                      [attr.data-col]="colOffset() + colIndex"
+                      [attr.data-align]="column.align ?? null"
+                      [attr.data-cell-type]="column.type ?? null"
+                      [attr.data-pinned]="column.pinned ?? null"
+                      [attr.data-error]="column.errorOf?.(entry.row) !== undefined ? '' : null"
+                      [attr.tabindex]="isGrid() ? (activeRow() === item.index && activeCol() === colOffset() + colIndex ? 0 : -1) : null"
+                      [attr.style]="cellStyle(column)"
+                      [lilyDataGridAttrs]="column.cellAttrs?.(ctx)"
+                    >
+                      <ng-container *ngTemplateOutlet="cellBody; context: { entry: entry, column: column, ctx: ctx }" />
+                    </th>
+                  } @else {
+                    <td
+                      lily-data-table-td
+                      [className]="cellClassOf(column, ctx)"
+                      [attr.role]="isGrid() ? 'gridcell' : 'cell'"
+                      [attr.data-row]="item.index"
+                      [attr.data-col]="colOffset() + colIndex"
+                      [attr.data-align]="column.align ?? null"
+                      [attr.data-cell-type]="column.type ?? null"
+                      [attr.data-pinned]="column.pinned ?? null"
+                      [attr.data-editable]="isEditable(column) ? '' : null"
+                      [attr.data-readonly]="column.type === 'rollup' ? '' : null"
+                      [attr.aria-readonly]="column.type === 'rollup' ? 'true' : null"
+                      [attr.data-error]="column.errorOf?.(entry.row) !== undefined ? '' : null"
+                      [attr.data-editing]="isEditingCell(entry, column) ? '' : null"
+                      [attr.tabindex]="isGrid() ? (activeRow() === item.index && activeCol() === colOffset() + colIndex ? 0 : -1) : null"
+                      [attr.style]="cellStyle(column)"
+                      [lilyDataGridAttrs]="column.cellAttrs?.(ctx)"
+                      (dragover)="onFileDragOver(column, $event)"
+                      (drop)="onFileDrop(entry, column, $event)"
+                    >
+                      <ng-container *ngTemplateOutlet="cellBody; context: { entry: entry, column: column, ctx: ctx }" />
+                    </td>
+                  }
+                }
+              </tr>
+            }
+          }
+          @if (pageEntries().length === 0 && empty(); as emptyTemplate) {
+            <tr lily-data-table-row className="data-grid-empty-row">
+              <td lily-data-table-td className="data-grid-empty" [attr.colspan]="lastCol() + 1" [attr.role]="isGrid() ? 'gridcell' : 'cell'">
+                <ng-container *ngTemplateOutlet="emptyTemplate" />
+              </td>
+            </tr>
+          }
+        </tbody>
+        @if (footer(); as footerTemplate) {
+          <tfoot lily-data-table-foot>
+            <ng-container *ngTemplateOutlet="footerTemplate; context: { $implicit: footerContext() }" />
+          </tfoot>
+        }
+      </lily-data-table>
+    </ng-template>
+
+    <ng-template #cellBody let-entry="entry" let-column="column" let-ctx="ctx">
+      @if (isEditingCell(entry, column)) {
+        @let editing = editingState()!;
+        @if (column.editor === 'person' && column.personEditor) {
+          <ng-container *ngTemplateOutlet="column.personEditor; context: { $implicit: personEditorContext(entry, column, ctx) }" />
+        } @else if (column.editor === 'time-zone') {
+          <span
+            class="data-grid-zoned-editor"
+            role="group"
+            [attr.aria-label]="labels().cellEditor?.(column.header) ?? column.header"
+            (focusout)="onZonedFocusout($event)"
+          >
+            <input
+              class="data-grid-cell-editor"
+              type="time"
+              step="1"
+              [attr.aria-label]="labels().cellEditor?.(column.header) ?? column.header"
+              [attr.aria-invalid]="editing.error || editing.invalid ? 'true' : null"
+              [attr.aria-describedby]="editing.error ? entry.id + '-' + column.id + '-error' : null"
+              [value]="editing.draft"
+              (input)="setDraft($event)"
+              (keydown)="onEditorKeydown($event)"
+            />
+            <select
+              class="data-grid-cell-editor data-grid-zone-editor"
+              [attr.aria-label]="labels().timeZone?.(column.header) ?? column.header"
+              (change)="setZone($event)"
+              (keydown)="onEditorKeydown($event)"
+            >
+              @for (option of column.timeZones ?? []; track option.id) {
+                <option [value]="option.id" [selected]="option.id === editing.zone">{{ option.label }}</option>
+              }
+            </select>
+          </span>
+        } @else if (column.editor === 'select') {
+          <select
+            class="data-grid-cell-editor"
+            [attr.aria-label]="labels().cellEditor?.(column.header) ?? column.header"
+            [attr.aria-invalid]="editing.error || editing.invalid ? 'true' : null"
+            [attr.aria-describedby]="editing.error ? entry.id + '-' + column.id + '-error' : null"
+            (change)="setDraft($event)"
+            (keydown)="onEditorKeydown($event)"
+            (blur)="onEditorBlur()"
+          >
+            <option value="" [selected]="editing.draft === ''"></option>
+            @for (option of ungroupedOptions(column); track option.id) {
+              <option [value]="option.id" [disabled]="option.disabled ?? false" [selected]="option.id === editing.draft">{{ option.label }}</option>
+            }
+            @for (group of groupsOf(column); track group) {
+              <optgroup [label]="group">
+                @for (option of optionsInGroup(column, group); track option.id) {
+                  <option [value]="option.id" [disabled]="option.disabled ?? false" [selected]="option.id === editing.draft">{{ option.label }}</option>
+                }
+              </optgroup>
+            }
+          </select>
+        } @else {
+          <input
+            class="data-grid-cell-editor"
+            [type]="column.editor === 'number' ? 'number' : column.editor === 'date' ? 'date' : column.editor === 'time' ? 'time' : 'text'"
+            [attr.step]="column.editor === 'time' ? 1 : null"
+            [attr.inputmode]="column.editor === 'number' ? 'decimal' : null"
+            [attr.aria-label]="(column.type === 'formula' ? labels().formulaEditor?.(column.header) : undefined) ?? labels().cellEditor?.(column.header) ?? column.header"
+            [attr.aria-invalid]="editing.error || editing.invalid ? 'true' : null"
+            [attr.aria-describedby]="editing.error ? entry.id + '-' + column.id + '-error' : null"
+            [value]="editing.draft"
+            (input)="setDraft($event)"
+            (keydown)="onEditorKeydown($event)"
+            (blur)="onEditorBlur()"
+          />
+        }
+        @if (editing.error) {
+          <span class="data-grid-cell-error" [id]="entry.id + '-' + column.id + '-error'">{{ editing.error }}</span>
+        }
+      } @else if (column.type === 'radio' && column.editable) {
+        <fieldset class="data-grid-radio-group" data-grid-own-group>
+          <legend class="data-grid-radio-legend">{{ labels().radioGroup?.(column.header, rowLabelOf(entry)) ?? column.header }}</legend>
+          @for (option of column.options ?? []; track option.id) {
+            <label class="data-grid-radio-option">
+              <input
+                type="radio"
+                [name]="gridId + '-' + entry.id + '-' + column.id"
+                [value]="option.id"
+                [checked]="ctx.value === option.id"
+                [disabled]="option.disabled ?? false"
+                [attr.tabindex]="isGrid() ? -1 : null"
+                (change)="commitValue(entry, column, option.id)"
+              />{{ option.label }}</label>
+          }
+        </fieldset>
+      } @else {
+        @if (column.cell; as cellTemplate) {
+          <ng-container *ngTemplateOutlet="cellTemplate; context: { $implicit: ctx }" />
+        } @else if (column.type === 'person') {
+          @let people = peopleIn(ctx.value);
+          @if (people.length > 0) {
+            @let shown = shownPeople(column, ctx.value);
+            <ul class="data-grid-people">
+              @for (person of shown; track person.id) {
+                <li class="data-grid-person">
+                  @if (column.avatar; as avatarTemplate) {
+                    <span class="data-grid-avatar" aria-hidden="true"><ng-container *ngTemplateOutlet="avatarTemplate; context: { $implicit: person }" /></span>
+                  }
+                  <span class="data-grid-person-name">{{ nameOf(person) }}</span>
+                </li>
+              }
+              @if (shown.length < people.length && labels().morePeople; as more) {
+                <li class="data-grid-people-more">{{ more(people.length - shown.length) }}</li>
+              }
+            </ul>
+          }
+        } @else if (column.type === 'file') {
+          @let files = filesIn(ctx.value);
+          @if (files.length > 0) {
+            <ul class="data-grid-files">
+              @for (file of files; track file.id) {
+                <li class="data-grid-file">
+                  @if (hrefOf(file.href); as fileHref) {
+                    <a class="data-grid-link" [href]="fileHref">{{ file.name }}</a>
+                  } @else {
+                    <span class="data-grid-file-name">{{ file.name }}</span>
+                  }
+                  @if (file.size !== undefined && column.formatSize; as sizeText) {
+                    {{ ' ' }}<span class="data-grid-file-size">{{ column.formatSize(file.size) }}</span>
+                  }
+                  @if (column.editable && labels().removeFile; as removeLabel) {
+                    <button
+                      type="button"
+                      class="data-grid-file-remove"
+                      data-grid-own
+                      [attr.tabindex]="isGrid() ? -1 : null"
+                      [attr.aria-label]="removeLabel(file.name)"
+                      (click)="fileRemove.emit({ rowId: entry.id, row: entry.row, columnId: column.id, fileId: file.id })"
+                    ></button>
+                  }
+                </li>
+              }
+            </ul>
+          }
+          @if (column.editable) {
+            <input
+              type="file"
+              class="data-grid-file-input"
+              [attr.aria-label]="labels().fileInput?.(column.header, rowLabelOf(entry)) ?? column.header"
+              [multiple]="column.multiple !== false"
+              [attr.accept]="column.accept ?? null"
+              [attr.tabindex]="isGrid() ? -1 : null"
+              (change)="onFileInput(entry, column, $event)"
+            />
+          }
+        } @else if (column.type === 'link') {
+          @let link = linkIn(ctx.value);
+          @if (link) {
+            @if (hrefOf(link.href); as href) {
+              <a class="data-grid-link" [href]="href" [attr.target]="link.external ? '_blank' : null" [attr.rel]="link.external ? 'noopener noreferrer' : null">{{ link.label ?? link.href }}@if (link.external && labels().opensInNewTab; as newTab) {{{ ' ' }}<span class="data-grid-visually-hidden">{{ newTab(link.label ?? link.href) }}</span>}</a>
+            } @else {
+              <!-- An address with an unsafe scheme is shown as text, never as a link. -->
+              <span class="data-grid-link data-grid-link-unsafe">{{ link.label ?? link.href }}</span>
+            }
+          }
+        } @else if (column.type === 'date' || column.type === 'time') {
+          @if (ctx.formatted !== '') {
+            <time [attr.datetime]="stringOf(ctx.value)">{{ ctx.formatted }}</time>
+          }
+        } @else {<ng-container>{{ ctx.formatted }}</ng-container>}
+        @if (isEditable(column) && column.type !== 'radio' && labels().editCell; as editLabel) {
+          <button
+            type="button"
+            class="data-grid-edit-button"
+            data-grid-own
+            [attr.tabindex]="isGrid() ? -1 : null"
+            [attr.aria-label]="editLabel(column.header, rowLabelOf(entry))"
+            (click)="startEdit(entry, column)"
+          ></button>
+        }
+      }
+    </ng-template>
+  `,
+			isInline: true,
+			dependencies: [
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "directive",
+					type: DataGridAttrs,
+					selector: "[lilyDataGridAttrs]",
+					inputs: ["lilyDataGridAttrs"]
+				},
+				{
+					kind: "component",
+					type: DataTable,
+					selector: "lily-data-table",
+					inputs: ["label", "className"]
+				},
+				{
+					kind: "component",
+					type: DataTableBody,
+					selector: "tbody[lily-data-table-body]",
+					inputs: ["className"]
+				},
+				{
+					kind: "component",
+					type: DataTableFoot,
+					selector: "tfoot[lily-data-table-foot]",
+					inputs: ["className"]
+				},
+				{
+					kind: "component",
+					type: DataTableHead,
+					selector: "thead[lily-data-table-head]",
+					inputs: ["className"]
+				},
+				{
+					kind: "component",
+					type: DataTableRow,
+					selector: "tr[lily-data-table-row]",
+					inputs: ["className"]
+				},
+				{
+					kind: "component",
+					type: DataTableTD,
+					selector: "td[lily-data-table-td]",
+					inputs: ["className"]
+				},
+				{
+					kind: "component",
+					type: DataTableTH,
+					selector: "th[lily-data-table-th]",
+					inputs: ["scope", "className"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: DataGrid,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lily-data-grid",
+			standalone: true,
+			imports: [
+				NgTemplateOutlet,
+				DataGridAttrs,
+				DataTable,
+				DataTableBody,
+				DataTableFoot,
+				DataTableHead,
+				DataTableRow,
+				DataTableTD,
+				DataTableTH
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `
+    <div #rootEl class="data-grid {{ className() }}">
+      @if (labels().search || hidableColumns().length > 0 || hasExportButtons()) {
+        <div class="data-grid-toolbar">
+          @if (labels().search; as searchLabel) {
+            <input class="data-grid-search" type="search" [attr.aria-label]="searchLabel" [value]="filter()" (input)="onFilterInput($event)" />
+          }
+          @if (hasExportButtons()) {
+            <div class="data-grid-export" role="group" [attr.aria-label]="labels().export ?? null">
+              @if (labels().exportCsv; as csv) {
+                <button type="button" class="data-grid-export-button" data-grid-export-format="csv" [disabled]="exportEntries().length === 0" (click)="runExport('csv')">{{ csv }}</button>
+              }
+              @if (labels().exportTsv; as tsv) {
+                <button type="button" class="data-grid-export-button" data-grid-export-format="tsv" [disabled]="exportEntries().length === 0" (click)="runExport('tsv')">{{ tsv }}</button>
+              }
+              @if (labels().exportExcel; as excel) {
+                <button type="button" class="data-grid-export-button" data-grid-export-format="xlsx" [disabled]="exportEntries().length === 0" (click)="runExport('xlsx')">{{ excel }}</button>
+              }
+            </div>
+          }
+          @if (hidableColumns().length > 0 && labels().columnVisibility; as visibilityLabel) {
+            <fieldset class="data-grid-column-visibility">
+              <legend>{{ visibilityLabel }}</legend>
+              @for (column of hidableColumns(); track column.id) {
+                <label>
+                  <input type="checkbox" [checked]="!hiddenColumnIds().has(column.id)" (change)="toggleColumnVisibility(column.id)" />
+                  {{ labels().columnVisibilityOption?.(column.header) ?? column.header }}
+                </label>
+              }
+            </fieldset>
+          }
+        </div>
+      }
+
+      @if (scroll()) {
+        <!-- A scrollable region must be reachable by keyboard (WCAG 2.1.1); in grid mode a roving cell is already a tab stop. -->
+        <div
+          #scrollEl
+          class="data-grid-scroll"
+          role="region"
+          [attr.aria-label]="label()"
+          [attr.tabindex]="isGrid() ? null : 0"
+          [attr.style]="scrollStyle()"
+          (scroll)="onScroll($event)"
+        >
+          <ng-container *ngTemplateOutlet="tableTemplate" />
+        </div>
+      } @else {
+        <ng-container *ngTemplateOutlet="tableTemplate" />
+      }
+
+      @if (pageSize()) {
+        <div class="data-grid-pagination">
+          <button type="button" class="data-grid-page-previous" [disabled]="clampedPage() <= 1" (click)="goToPage(clampedPage() - 1)">{{ labels().previousPage }}</button>
+          <span class="data-grid-page-status">{{ labels().pageStatus?.(clampedPage(), pageCount(), sortedEntries().length) }}</span>
+          <button type="button" class="data-grid-page-next" [disabled]="clampedPage() >= pageCount()" (click)="goToPage(clampedPage() + 1)">{{ labels().nextPage }}</button>
+        </div>
+      }
+
+      <p class="data-grid-status" aria-live="polite">{{ statusMessage() }}</p>
+    </div>
+
+    <ng-template #tableTemplate>
+      <lily-data-table
+        [label]="label()"
+        [className]="''"
+        (keydown)="onGridKeydown($event)"
+        (focusin)="onGridFocusin($event)"
+        (focusout)="onGridFocusout($event)"
+        (click)="onGridClick($event)"
+        (dblclick)="onGridDblclick($event)"
+      >
+        @if (caption()) {
+          <caption>{{ caption() }}</caption>
+        }
+        <thead lily-data-table-head>
+          <tr lily-data-table-row [attr.aria-rowindex]="indexed() ? 1 : null">
+            @if (hasSelection()) {
+              <th
+                lily-data-table-th
+                data-row="-1"
+                data-col="0"
+                [attr.tabindex]="isGrid() ? (activeRow() === -1 && activeCol() === 0 ? 0 : -1) : null"
+              >
+                @if (selectionMode() === 'multiple') {
+                  <input
+                    type="checkbox"
+                    data-grid-own
+                    [attr.tabindex]="isGrid() ? -1 : null"
+                    [attr.aria-label]="labels().selectAll ?? null"
+                    [checked]="allSelected()"
+                    [indeterminate]="someSelected()"
+                    (click)="toggleSelectAll()"
+                  />
+                } @else {
+                  <span class="data-grid-selection-header-label">{{ labels().selectionColumn }}</span>
+                }
+              </th>
+            }
+            @for (column of visibleColumns(); track column.id; let i = $index) {
+              <th
+                lily-data-table-th
+                data-row="-1"
+                [attr.data-col]="colOffset() + i"
+                [attr.data-align]="column.align ?? null"
+                [attr.data-cell-type]="column.type ?? null"
+                [attr.data-pinned]="column.pinned ?? null"
+                [attr.tabindex]="isGrid() ? (activeRow() === -1 && activeCol() === colOffset() + i ? 0 : -1) : null"
+                [attr.aria-sort]="ariaSortFor(column)"
+                [attr.aria-describedby]="column.type === 'rollup' && labels().rollupDescription ? gridId + '-' + column.id + '-description' : null"
+                [attr.style]="cellStyle(column)"
+                [attr.draggable]="column.movable ? 'true' : null"
+                (dragstart)="onHeaderDragStart(column, $event)"
+                (dragover)="onHeaderDragOver($event)"
+                (drop)="onHeaderDrop(column.id, $event)"
+              >
+                @if (column.sortable) {
+                  <button type="button" class="data-grid-sort-button" data-grid-own [attr.tabindex]="isGrid() ? -1 : null" (click)="toggleSort(column)">
+                    @if (column.headerCell; as headerTemplate) {
+                      <ng-container *ngTemplateOutlet="headerTemplate; context: { $implicit: column }" />
+                    } @else {<ng-container>{{ column.header }}</ng-container>}
+                  </button>
+                } @else if (column.headerCell; as headerTemplate) {
+                  <ng-container *ngTemplateOutlet="headerTemplate; context: { $implicit: column }" />
+                } @else {<ng-container>{{ column.header }}</ng-container>}
+                @if (column.type === 'rollup' && labels().rollupDescription; as describe) {
+                  <span class="data-grid-visually-hidden" [id]="gridId + '-' + column.id + '-description'">{{ describe(column.header) }}</span>
+                }
+                @if (column.resizable) {
+                  <!-- WAI-ARIA "window splitter" pattern: role="separator" plus tabindex/aria-valuenow is how a resize handle becomes focusable and operable. -->
+                  <span
+                    class="data-grid-resize-handle"
+                    role="separator"
+                    data-grid-own
+                    aria-orientation="vertical"
+                    [attr.aria-label]="labels().resizeHandle?.(column.header) ?? null"
+                    [attr.aria-valuenow]="widthFor(column) ?? 120"
+                    [attr.aria-valuemin]="minColumnWidth"
+                    tabindex="0"
+                    (keydown)="onResizeKeydown(column, $event)"
+                    (pointerdown)="onResizePointerDown(column, $event)"
+                  ></span>
+                }
+              </th>
+            }
+          </tr>
+        </thead>
+        <tbody lily-data-table-body>
+          @for (item of renderItems(); track item.kind === 'row' ? pageEntries()[item.index].id : item.key) {
+            @if (item.kind === 'spacer') {
+              <tr class="data-grid-spacer" aria-hidden="true" [attr.style]="'height:' + item.rows * (virtualize()?.rowHeight ?? 0) + 'px'">
+                <td [attr.colspan]="lastCol() + 1"></td>
+              </tr>
+            } @else {
+              @let entry = pageEntries()[item.index];
+              <tr
+                lily-data-table-row
+                [className]="rowClass()?.(entry.row) ?? ''"
+                [attr.aria-selected]="hasSelection() ? isSelected(entry.id) : null"
+                [attr.aria-rowindex]="indexed() ? pageStart() + item.index + 2 : null"
+                [lilyDataGridAttrs]="rowAttrs()?.(entry.row)"
+              >
+                @if (hasSelection()) {
+                  <td
+                    lily-data-table-td
+                    [attr.role]="isGrid() ? 'gridcell' : 'cell'"
+                    [attr.data-row]="item.index"
+                    data-col="0"
+                    [attr.tabindex]="isGrid() ? (activeRow() === item.index && activeCol() === 0 ? 0 : -1) : null"
+                  >
+                    <input
+                      [type]="selectionMode() === 'single' ? 'radio' : 'checkbox'"
+                      data-grid-own
+                      [attr.tabindex]="isGrid() ? -1 : null"
+                      [attr.aria-label]="labels().selectRow?.(rowLabelOf(entry)) ?? null"
+                      [checked]="isSelected(entry.id)"
+                      (click)="onRowSelectClick(pageStart() + item.index, $event)"
+                    />
+                  </td>
+                }
+                @for (column of visibleColumns(); track column.id; let colIndex = $index) {
+                  @let ctx = cellFor(column, entry.row);
+                  @if (column.rowHeader) {
+                    <th
+                      lily-data-table-th
+                      scope="row"
+                      role="rowheader"
+                      [className]="cellClassOf(column, ctx)"
+                      [attr.data-row]="item.index"
+                      [attr.data-col]="colOffset() + colIndex"
+                      [attr.data-align]="column.align ?? null"
+                      [attr.data-cell-type]="column.type ?? null"
+                      [attr.data-pinned]="column.pinned ?? null"
+                      [attr.data-error]="column.errorOf?.(entry.row) !== undefined ? '' : null"
+                      [attr.tabindex]="isGrid() ? (activeRow() === item.index && activeCol() === colOffset() + colIndex ? 0 : -1) : null"
+                      [attr.style]="cellStyle(column)"
+                      [lilyDataGridAttrs]="column.cellAttrs?.(ctx)"
+                    >
+                      <ng-container *ngTemplateOutlet="cellBody; context: { entry: entry, column: column, ctx: ctx }" />
+                    </th>
+                  } @else {
+                    <td
+                      lily-data-table-td
+                      [className]="cellClassOf(column, ctx)"
+                      [attr.role]="isGrid() ? 'gridcell' : 'cell'"
+                      [attr.data-row]="item.index"
+                      [attr.data-col]="colOffset() + colIndex"
+                      [attr.data-align]="column.align ?? null"
+                      [attr.data-cell-type]="column.type ?? null"
+                      [attr.data-pinned]="column.pinned ?? null"
+                      [attr.data-editable]="isEditable(column) ? '' : null"
+                      [attr.data-readonly]="column.type === 'rollup' ? '' : null"
+                      [attr.aria-readonly]="column.type === 'rollup' ? 'true' : null"
+                      [attr.data-error]="column.errorOf?.(entry.row) !== undefined ? '' : null"
+                      [attr.data-editing]="isEditingCell(entry, column) ? '' : null"
+                      [attr.tabindex]="isGrid() ? (activeRow() === item.index && activeCol() === colOffset() + colIndex ? 0 : -1) : null"
+                      [attr.style]="cellStyle(column)"
+                      [lilyDataGridAttrs]="column.cellAttrs?.(ctx)"
+                      (dragover)="onFileDragOver(column, $event)"
+                      (drop)="onFileDrop(entry, column, $event)"
+                    >
+                      <ng-container *ngTemplateOutlet="cellBody; context: { entry: entry, column: column, ctx: ctx }" />
+                    </td>
+                  }
+                }
+              </tr>
+            }
+          }
+          @if (pageEntries().length === 0 && empty(); as emptyTemplate) {
+            <tr lily-data-table-row className="data-grid-empty-row">
+              <td lily-data-table-td className="data-grid-empty" [attr.colspan]="lastCol() + 1" [attr.role]="isGrid() ? 'gridcell' : 'cell'">
+                <ng-container *ngTemplateOutlet="emptyTemplate" />
+              </td>
+            </tr>
+          }
+        </tbody>
+        @if (footer(); as footerTemplate) {
+          <tfoot lily-data-table-foot>
+            <ng-container *ngTemplateOutlet="footerTemplate; context: { $implicit: footerContext() }" />
+          </tfoot>
+        }
+      </lily-data-table>
+    </ng-template>
+
+    <ng-template #cellBody let-entry="entry" let-column="column" let-ctx="ctx">
+      @if (isEditingCell(entry, column)) {
+        @let editing = editingState()!;
+        @if (column.editor === 'person' && column.personEditor) {
+          <ng-container *ngTemplateOutlet="column.personEditor; context: { $implicit: personEditorContext(entry, column, ctx) }" />
+        } @else if (column.editor === 'time-zone') {
+          <span
+            class="data-grid-zoned-editor"
+            role="group"
+            [attr.aria-label]="labels().cellEditor?.(column.header) ?? column.header"
+            (focusout)="onZonedFocusout($event)"
+          >
+            <input
+              class="data-grid-cell-editor"
+              type="time"
+              step="1"
+              [attr.aria-label]="labels().cellEditor?.(column.header) ?? column.header"
+              [attr.aria-invalid]="editing.error || editing.invalid ? 'true' : null"
+              [attr.aria-describedby]="editing.error ? entry.id + '-' + column.id + '-error' : null"
+              [value]="editing.draft"
+              (input)="setDraft($event)"
+              (keydown)="onEditorKeydown($event)"
+            />
+            <select
+              class="data-grid-cell-editor data-grid-zone-editor"
+              [attr.aria-label]="labels().timeZone?.(column.header) ?? column.header"
+              (change)="setZone($event)"
+              (keydown)="onEditorKeydown($event)"
+            >
+              @for (option of column.timeZones ?? []; track option.id) {
+                <option [value]="option.id" [selected]="option.id === editing.zone">{{ option.label }}</option>
+              }
+            </select>
+          </span>
+        } @else if (column.editor === 'select') {
+          <select
+            class="data-grid-cell-editor"
+            [attr.aria-label]="labels().cellEditor?.(column.header) ?? column.header"
+            [attr.aria-invalid]="editing.error || editing.invalid ? 'true' : null"
+            [attr.aria-describedby]="editing.error ? entry.id + '-' + column.id + '-error' : null"
+            (change)="setDraft($event)"
+            (keydown)="onEditorKeydown($event)"
+            (blur)="onEditorBlur()"
+          >
+            <option value="" [selected]="editing.draft === ''"></option>
+            @for (option of ungroupedOptions(column); track option.id) {
+              <option [value]="option.id" [disabled]="option.disabled ?? false" [selected]="option.id === editing.draft">{{ option.label }}</option>
+            }
+            @for (group of groupsOf(column); track group) {
+              <optgroup [label]="group">
+                @for (option of optionsInGroup(column, group); track option.id) {
+                  <option [value]="option.id" [disabled]="option.disabled ?? false" [selected]="option.id === editing.draft">{{ option.label }}</option>
+                }
+              </optgroup>
+            }
+          </select>
+        } @else {
+          <input
+            class="data-grid-cell-editor"
+            [type]="column.editor === 'number' ? 'number' : column.editor === 'date' ? 'date' : column.editor === 'time' ? 'time' : 'text'"
+            [attr.step]="column.editor === 'time' ? 1 : null"
+            [attr.inputmode]="column.editor === 'number' ? 'decimal' : null"
+            [attr.aria-label]="(column.type === 'formula' ? labels().formulaEditor?.(column.header) : undefined) ?? labels().cellEditor?.(column.header) ?? column.header"
+            [attr.aria-invalid]="editing.error || editing.invalid ? 'true' : null"
+            [attr.aria-describedby]="editing.error ? entry.id + '-' + column.id + '-error' : null"
+            [value]="editing.draft"
+            (input)="setDraft($event)"
+            (keydown)="onEditorKeydown($event)"
+            (blur)="onEditorBlur()"
+          />
+        }
+        @if (editing.error) {
+          <span class="data-grid-cell-error" [id]="entry.id + '-' + column.id + '-error'">{{ editing.error }}</span>
+        }
+      } @else if (column.type === 'radio' && column.editable) {
+        <fieldset class="data-grid-radio-group" data-grid-own-group>
+          <legend class="data-grid-radio-legend">{{ labels().radioGroup?.(column.header, rowLabelOf(entry)) ?? column.header }}</legend>
+          @for (option of column.options ?? []; track option.id) {
+            <label class="data-grid-radio-option">
+              <input
+                type="radio"
+                [name]="gridId + '-' + entry.id + '-' + column.id"
+                [value]="option.id"
+                [checked]="ctx.value === option.id"
+                [disabled]="option.disabled ?? false"
+                [attr.tabindex]="isGrid() ? -1 : null"
+                (change)="commitValue(entry, column, option.id)"
+              />{{ option.label }}</label>
+          }
+        </fieldset>
+      } @else {
+        @if (column.cell; as cellTemplate) {
+          <ng-container *ngTemplateOutlet="cellTemplate; context: { $implicit: ctx }" />
+        } @else if (column.type === 'person') {
+          @let people = peopleIn(ctx.value);
+          @if (people.length > 0) {
+            @let shown = shownPeople(column, ctx.value);
+            <ul class="data-grid-people">
+              @for (person of shown; track person.id) {
+                <li class="data-grid-person">
+                  @if (column.avatar; as avatarTemplate) {
+                    <span class="data-grid-avatar" aria-hidden="true"><ng-container *ngTemplateOutlet="avatarTemplate; context: { $implicit: person }" /></span>
+                  }
+                  <span class="data-grid-person-name">{{ nameOf(person) }}</span>
+                </li>
+              }
+              @if (shown.length < people.length && labels().morePeople; as more) {
+                <li class="data-grid-people-more">{{ more(people.length - shown.length) }}</li>
+              }
+            </ul>
+          }
+        } @else if (column.type === 'file') {
+          @let files = filesIn(ctx.value);
+          @if (files.length > 0) {
+            <ul class="data-grid-files">
+              @for (file of files; track file.id) {
+                <li class="data-grid-file">
+                  @if (hrefOf(file.href); as fileHref) {
+                    <a class="data-grid-link" [href]="fileHref">{{ file.name }}</a>
+                  } @else {
+                    <span class="data-grid-file-name">{{ file.name }}</span>
+                  }
+                  @if (file.size !== undefined && column.formatSize; as sizeText) {
+                    {{ ' ' }}<span class="data-grid-file-size">{{ column.formatSize(file.size) }}</span>
+                  }
+                  @if (column.editable && labels().removeFile; as removeLabel) {
+                    <button
+                      type="button"
+                      class="data-grid-file-remove"
+                      data-grid-own
+                      [attr.tabindex]="isGrid() ? -1 : null"
+                      [attr.aria-label]="removeLabel(file.name)"
+                      (click)="fileRemove.emit({ rowId: entry.id, row: entry.row, columnId: column.id, fileId: file.id })"
+                    ></button>
+                  }
+                </li>
+              }
+            </ul>
+          }
+          @if (column.editable) {
+            <input
+              type="file"
+              class="data-grid-file-input"
+              [attr.aria-label]="labels().fileInput?.(column.header, rowLabelOf(entry)) ?? column.header"
+              [multiple]="column.multiple !== false"
+              [attr.accept]="column.accept ?? null"
+              [attr.tabindex]="isGrid() ? -1 : null"
+              (change)="onFileInput(entry, column, $event)"
+            />
+          }
+        } @else if (column.type === 'link') {
+          @let link = linkIn(ctx.value);
+          @if (link) {
+            @if (hrefOf(link.href); as href) {
+              <a class="data-grid-link" [href]="href" [attr.target]="link.external ? '_blank' : null" [attr.rel]="link.external ? 'noopener noreferrer' : null">{{ link.label ?? link.href }}@if (link.external && labels().opensInNewTab; as newTab) {{{ ' ' }}<span class="data-grid-visually-hidden">{{ newTab(link.label ?? link.href) }}</span>}</a>
+            } @else {
+              <!-- An address with an unsafe scheme is shown as text, never as a link. -->
+              <span class="data-grid-link data-grid-link-unsafe">{{ link.label ?? link.href }}</span>
+            }
+          }
+        } @else if (column.type === 'date' || column.type === 'time') {
+          @if (ctx.formatted !== '') {
+            <time [attr.datetime]="stringOf(ctx.value)">{{ ctx.formatted }}</time>
+          }
+        } @else {<ng-container>{{ ctx.formatted }}</ng-container>}
+        @if (isEditable(column) && column.type !== 'radio' && labels().editCell; as editLabel) {
+          <button
+            type="button"
+            class="data-grid-edit-button"
+            data-grid-own
+            [attr.tabindex]="isGrid() ? -1 : null"
+            [attr.aria-label]="editLabel(column.header, rowLabelOf(entry))"
+            (click)="startEdit(entry, column)"
+          ></button>
+        }
+      }
+    </ng-template>
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		caption: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "caption",
+				required: false
+			}]
+		}],
+		columns: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "columns",
+				required: true
+			}]
+		}],
+		rows: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rows",
+				required: true
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		rowId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rowId",
+				required: false
+			}]
+		}],
+		selectionMode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectionMode",
+				required: false
+			}]
+		}],
+		pageSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pageSize",
+				required: false
+			}]
+		}],
+		storageKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "storageKey",
+				required: false
+			}]
+		}],
+		labels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labels",
+				required: false
+			}]
+		}],
+		mode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mode",
+				required: false
+			}]
+		}],
+		rowClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rowClass",
+				required: false
+			}]
+		}],
+		rowAttrs: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rowAttrs",
+				required: false
+			}]
+		}],
+		activateRows: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activateRows",
+				required: false
+			}]
+		}],
+		empty: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "empty",
+				required: false
+			}]
+		}],
+		footer: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "footer",
+				required: false
+			}]
+		}],
+		busy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "busy",
+				required: false
+			}]
+		}],
+		scroll: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "scroll",
+				required: false
+			}]
+		}],
+		exportFilename: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "exportFilename",
+				required: false
+			}]
+		}],
+		exportScope: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "exportScope",
+				required: false
+			}]
+		}],
+		exportFormulas: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "exportFormulas",
+				required: false
+			}]
+		}],
+		exportHandler: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "exportHandler",
+				required: false
+			}]
+		}],
+		virtualize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "virtualize",
+				required: false
+			}]
+		}],
+		className: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "className",
+				required: false
+			}]
+		}],
+		selected: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selected",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["selectedChange"]
+		}],
+		filter: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filter",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["filterChange"]
+		}],
+		sort: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sort",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["sortChange"]
+		}],
+		columnOrder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "columnOrder",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["columnOrderChange"]
+		}],
+		page: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "page",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["pageChange"]
+		}],
+		cellEdit: [{
+			type: i0.Output,
+			args: ["cellEdit"]
+		}],
+		filesSelected: [{
+			type: i0.Output,
+			args: ["filesSelected"]
+		}],
+		fileRemove: [{
+			type: i0.Output,
+			args: ["fileRemove"]
+		}],
+		rowActivate: [{
+			type: i0.Output,
+			args: ["rowActivate"]
+		}],
+		exportFile: [{
+			type: i0.Output,
+			args: ["exportFile"]
+		}],
+		rootRef: [{
+			type: i0.ViewChild,
+			args: ["rootEl", { isSignal: true }]
+		}],
+		scrollRef: [{
+			type: i0.ViewChild,
+			args: ["scrollEl", { isSignal: true }]
+		}]
+	}
+});
+export { DataGrid, DataGridAttrs, MIME_TYPES, aggregateValues, cellText, civilDateToDate, columnName, crc32, downloadBlob, exportBlob, exportFilename, filesOf, isCivilDate, isCivilTime, isExportFormula, isInvalidForType, isValidTimeZone, isZonedTime, linkLabel, linkParts, nextDataGridId, peopleOf, personName, resolveColumn, safeHref, toCsv, toDelimited, toTsv, toXlsx, zipStore, zonedMinutes, zonedUtcTime };
+
+//# sourceMappingURL=lilydesignsystem-angular-data-grid.mjs.map