@star-ng/ui 0.0.0-stage → 0.1.0

package/fesm2022/star-ng-ui-table.mjs

@@ -0,0 +1,3477 @@
+import { DOCUMENT, NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ApplicationRef, ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, Injector, TemplateRef, afterNextRender, afterRenderEffect, booleanAttribute, computed, contentChild, contentChildren, effect, inject, input, isDevMode, model, output, signal, untracked, viewChild } from "@angular/core";
+import { StarButton } from "@star-ng/ui/button";
+import { StarCheckbox } from "@star-ng/ui/checkbox";
+import { STAR_UI_TEXT, compareValues, matchesFilter, readOption, starIsRtl } from "@star-ng/ui/core";
+import { StarPaginator } from "@star-ng/ui/paginator";
+import { StarPopover } from "@star-ng/ui/popover";
+import { StarMultiSelect } from "@star-ng/ui/select";
+import { StarSkeleton } from "@star-ng/ui/skeleton";
+const encoder = new TextEncoder();
+function escapeXml(text) {
+	return text.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;").replace(/[\u0000-\u0008\u000B\u000C\u000E-\u001F]/g, "");
+}
+let crcTable = null;
+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 (const byte of bytes) crc = crcTable[(crc ^ byte) & 255] ^ crc >>> 8;
+	return (crc ^ 4294967295) >>> 0;
+}
+function zip(files) {
+	const chunks = [];
+	const central = [];
+	let offset = 0;
+	for (const file of files) {
+		const name = encoder.encode(file.name);
+		const data = encoder.encode(file.text);
+		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.setUint32(14, crc, true);
+		local.setUint32(18, data.length, true);
+		local.setUint32(22, data.length, true);
+		local.setUint16(26, name.length, true);
+		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.setUint32(16, crc, true);
+		entry.setUint32(20, data.length, true);
+		entry.setUint32(24, data.length, true);
+		entry.setUint16(28, name.length, true);
+		entry.setUint32(42, offset, true);
+		chunks.push(new Uint8Array(local.buffer), name, data);
+		central.push(new Uint8Array(entry.buffer), name);
+		offset += 30 + name.length + data.length;
+	}
+	const centralSize = central.reduce((size, part) => size + part.length, 0);
+	const end = /* @__PURE__ */ new DataView(/* @__PURE__ */ new ArrayBuffer(22));
+	end.setUint32(0, 101010256, true);
+	end.setUint16(8, files.length, true);
+	end.setUint16(10, files.length, true);
+	end.setUint32(12, centralSize, true);
+	end.setUint32(16, offset, true);
+	const parts = [
+		...chunks,
+		...central,
+		new Uint8Array(end.buffer)
+	];
+	const out = new Uint8Array(parts.reduce((size, part) => size + part.length, 0));
+	let position = 0;
+	for (const part of parts) {
+		out.set(part, position);
+		position += part.length;
+	}
+	return out;
+}
+function columnName(index) {
+	let name = "";
+	for (let n = index + 1; n > 0; n = Math.floor((n - 1) / 26)) name = String.fromCharCode(65 + (n - 1) % 26) + name;
+	return name;
+}
+function buildXlsx(headers, rows, sheetName = "Sheet1") {
+	const cell = (value, column, row, style = "") => {
+		const ref = `${columnName(column)}${row}`;
+		return typeof value === "number" && Number.isFinite(value) ? `<c r="${ref}"${style}><v>${value}</v></c>` : `<c r="${ref}"${style} t="inlineStr"><is><t xml:space="preserve">${escapeXml(String(value))}</t></is></c>`;
+	};
+	const sheetRows = [`<row r="1">${headers.map((header, i) => cell(header, i, 1, " s=\"1\"")).join("")}</row>`, ...rows.map((row, r) => `<row r="${r + 2}">${row.map((value, i) => cell(value, i, r + 2)).join("")}</row>`)];
+	const head = "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>";
+	const main = "http://schemas.openxmlformats.org/spreadsheetml/2006/main";
+	const rel = "http://schemas.openxmlformats.org/officeDocument/2006/relationships";
+	const pkg = "http://schemas.openxmlformats.org/package/2006";
+	const type = "application/vnd.openxmlformats-officedocument.spreadsheetml";
+	const safeName = escapeXml(sheetName.replace(/[\\/?*[\]:]/g, " ").slice(0, 31) || "Sheet1");
+	return zip([
+		{
+			name: "[Content_Types].xml",
+			text: `${head}<Types xmlns="${pkg}/content-types"><Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/><Default Extension="xml" ContentType="application/xml"/><Override PartName="/xl/workbook.xml" ContentType="${type}.sheet.main+xml"/><Override PartName="/xl/worksheets/sheet1.xml" ContentType="${type}.worksheet+xml"/><Override PartName="/xl/styles.xml" ContentType="${type}.styles+xml"/></Types>`
+		},
+		{
+			name: "_rels/.rels",
+			text: `${head}<Relationships xmlns="${pkg}/relationships"><Relationship Id="rId1" Type="${rel}/officeDocument" Target="xl/workbook.xml"/></Relationships>`
+		},
+		{
+			name: "xl/workbook.xml",
+			text: `${head}<workbook xmlns="${main}" xmlns:r="${rel}"><sheets><sheet name="${safeName}" sheetId="1" r:id="rId1"/></sheets></workbook>`
+		},
+		{
+			name: "xl/_rels/workbook.xml.rels",
+			text: `${head}<Relationships xmlns="${pkg}/relationships"><Relationship Id="rId1" Type="${rel}/worksheet" Target="worksheets/sheet1.xml"/><Relationship Id="rId2" Type="${rel}/styles" Target="styles.xml"/></Relationships>`
+		},
+		{
+			name: "xl/styles.xml",
+			text: `${head}<styleSheet xmlns="${main}"><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/></borders><cellStyleXfs count="1"><xf/></cellStyleXfs><cellXfs count="2"><xf/><xf fontId="1" applyFont="1"/></cellXfs></styleSheet>`
+		},
+		{
+			name: "xl/worksheets/sheet1.xml",
+			text: `${head}<worksheet xmlns="${main}"><sheetData>${sheetRows.join("")}</sheetData></worksheet>`
+		}
+	]);
+}
+const LONG_WORD = 20;
+const WORD_CHUNK = 12;
+function printable(value) {
+	return String(value).split(/(\s+)/).map((word) => {
+		const letters = Array.from(word);
+		if (letters.length <= LONG_WORD) return escapeXml(word);
+		const chunks = [];
+		for (let start = 0; start < letters.length; start += WORD_CHUNK) chunks.push(escapeXml(letters.slice(start, start + WORD_CHUNK).join("")));
+		return chunks.join("<wbr>");
+	}).join("");
+}
+const PRINT_SIZE = 12;
+const PRINT_FIT_STEPS = [
+	{
+		size: PRINT_SIZE,
+		wrap: false,
+		anywhere: false
+	},
+	{
+		size: PRINT_SIZE,
+		wrap: true,
+		anywhere: false
+	},
+	{
+		size: 11,
+		wrap: true,
+		anywhere: false
+	},
+	{
+		size: 10,
+		wrap: true,
+		anywhere: false
+	},
+	{
+		size: 9,
+		wrap: true,
+		anywhere: false
+	},
+	{
+		size: 8,
+		wrap: true,
+		anywhere: false
+	},
+	{
+		size: 8,
+		wrap: true,
+		anywhere: true
+	}
+];
+const round = (value) => Math.round(value * 100) / 100;
+function fitRules(step, scope, columns = []) {
+	const scale = step.size / PRINT_SIZE;
+	const total = columns.reduce((sum, width) => sum + width, 0);
+	return `${scope}{font-size:${step.size}px${step.anywhere && total ? ";table-layout:fixed" : ""}}${scope} th,${scope} td{padding:${round(4 * scale)}px ${round(8 * scale)}px${step.anywhere ? ";overflow-wrap:anywhere" : ""}}` + (step.wrap ? `${scope} td.s{white-space:normal}` : "") + (step.anywhere && total ? `${scope} th{box-sizing:border-box}` + columns.map((width, index) => `${scope} th:nth-child(${index + 1}){width:${Math.floor(width / total * 1e4) / 100}%}`).join("") : "");
+}
+function printFitStyle(widths, columns = []) {
+	let narrowest = widths[0] ?? 0;
+	let css = "";
+	for (let index = 1; index < widths.length && index < PRINT_FIT_STEPS.length; index++) {
+		if (widths[index] >= narrowest) continue;
+		css += `@container (width < ${narrowest}px){${fitRules(PRINT_FIT_STEPS[index], "table", columns)}}`;
+		narrowest = widths[index];
+	}
+	return css;
+}
+function fitPrintDocument(doc) {
+	const table = doc.querySelector("table");
+	if (!table) return {
+		widths: [],
+		columns: []
+	};
+	const probe = doc.createElement("style");
+	doc.head.append(probe);
+	const lastWhole = PRINT_FIT_STEPS.findIndex((step) => step.anywhere) - 1;
+	let columns = [];
+	const widths = PRINT_FIT_STEPS.map((step, index) => {
+		probe.textContent = `table{width:1px}${fitRules(step, "table")}`;
+		if (index === lastWhole) columns = Array.from(table.querySelectorAll("thead th"), (cell) => Math.ceil(cell.getBoundingClientRect().width));
+		return Math.ceil(table.getBoundingClientRect().width);
+	});
+	probe.remove();
+	const css = printFitStyle(widths, columns);
+	if (css) {
+		const style = doc.createElement("style");
+		style.textContent = css;
+		doc.head.append(style);
+	}
+	return {
+		widths,
+		columns
+	};
+}
+function buildPrintDocument(title, headers, rows) {
+	const escape = (value) => escapeXml(String(value));
+	const cellClass = (value) => {
+		const text = String(value);
+		const classes = [typeof value === "number" ? "n" : "", typeof value !== "number" && text.length <= LONG_WORD && !/\s/.test(text) ? "s" : ""].filter(Boolean);
+		return classes.length ? ` class="${classes.join(" ")}"` : "";
+	};
+	const numberColumn = (index) => rows.length > 0 && rows.every((row) => typeof row[index] === "number");
+	return `<!doctype html><html><head><meta charset="utf-8"><title>${escape(title)}</title><style>
+body{font:12px/1.4 system-ui,sans-serif;color:#000;margin:16px}
+h1{font-size:16px;margin:0 0 12px;overflow-wrap:anywhere}
+.fit{container-type:inline-size}
+table{width:100%;border-collapse:collapse}
+th,td{padding:4px 8px;border:1px solid #999;text-align:left;vertical-align:top;overflow-wrap:break-word}
+th{background:#eee}
+th.n,td.n{text-align:right}
+td.s{white-space:nowrap}
+thead{display:table-header-group}
+tr{break-inside:avoid}
+</style></head><body><h1>${escape(title)}</h1><div class="fit"><table><thead><tr>${headers.map((header, index) => `<th scope="col"${numberColumn(index) ? " class=\"n\"" : ""}>${printable(header)}</th>`).join("")}</tr></thead><tbody>${rows.map((row) => `<tr>${row.map((value) => `<td${cellClass(value)}>${printable(value)}</td>`).join("")}</tr>`).join("")}</tbody></table></div></body></html>`;
+}
+var HeightTree = class {
+	heights;
+	sums;
+	topBit;
+	constructor(heights) {
+		const count = heights.length;
+		this.heights = new Float64Array(count);
+		this.sums = new Float64Array(count + 1);
+		for (let i = 0; i < count; i++) {
+			const height = Math.max(0, heights[i] || 0);
+			this.heights[i] = height;
+			this.sums[i + 1] += height;
+			const parent = i + 1 + (i + 1 & -(i + 1));
+			if (parent <= count) this.sums[parent] += this.sums[i + 1];
+		}
+		let bit = 1;
+		while (bit * 2 <= count) bit *= 2;
+		this.topBit = count ? bit : 0;
+	}
+	get size() {
+		return this.heights.length;
+	}
+	get total() {
+		return this.offsetOf(this.size);
+	}
+	get(index) {
+		return this.heights[index] ?? 0;
+	}
+	set(index, height) {
+		const delta = Math.max(0, height) - this.heights[index];
+		if (!delta) return 0;
+		this.heights[index] += delta;
+		for (let i = index + 1; i <= this.size; i += i & -i) this.sums[i] += delta;
+		return delta;
+	}
+	offsetOf(index) {
+		let sum = 0;
+		for (let i = Math.min(index, this.size); i > 0; i -= i & -i) sum += this.sums[i];
+		return sum;
+	}
+	indexAt(offset) {
+		if (!this.size) return -1;
+		let index = 0;
+		let rest = Math.max(0, offset);
+		for (let bit = this.topBit; bit > 0; bit >>= 1) {
+			const next = index + bit;
+			if (next <= this.size && this.sums[next] <= rest) {
+				index = next;
+				rest -= this.sums[next];
+			}
+		}
+		return Math.min(index, this.size - 1);
+	}
+};
+function variableRange(tree, top, viewport, buffer) {
+	const count = tree.size;
+	if (!count) return {
+		start: 0,
+		end: 0,
+		first: 0,
+		before: 0,
+		after: 0
+	};
+	const from = Math.max(0, top);
+	const first = tree.indexAt(from);
+	const last = tree.indexAt(from + Math.max(1, viewport) - 1);
+	const start = Math.max(0, first - buffer);
+	const end = Math.min(count, last + 1 + buffer);
+	return {
+		start,
+		end,
+		first,
+		before: tree.offsetOf(start),
+		after: tree.total - tree.offsetOf(end)
+	};
+}
+function anchorShift(changes, anchor) {
+	let shift = 0;
+	for (const change of changes) if (change.index < anchor) shift += change.to - change.from;
+	return shift;
+}
+function anchorOf(tree, top) {
+	const index = tree.indexAt(top);
+	if (index < 0) return null;
+	return {
+		index,
+		inside: Math.max(0, top) - tree.offsetOf(index)
+	};
+}
+function groupKey(label) {
+	return `\u0000group\u0000${label}`;
+}
+function buildVirtualLayout(rows, options) {
+	const items = [];
+	const counts = [];
+	let aria = 0;
+	let label = null;
+	let collapsed = false;
+	rows.forEach((row, index) => {
+		if (options.groupOf) {
+			const group = options.groupOf(row);
+			if (index === 0 || group !== label) {
+				label = group;
+				collapsed = options.isCollapsed(group);
+				counts.push(0);
+				items.push({
+					kind: "group",
+					key: groupKey(group),
+					label: group,
+					count: 0,
+					collapsed,
+					aria
+				});
+				aria++;
+			}
+			counts[counts.length - 1]++;
+			if (collapsed) return;
+		}
+		const expanded = options.isExpanded(row);
+		items.push({
+			kind: "row",
+			key: options.keyOf(row),
+			row,
+			index,
+			expanded,
+			aria
+		});
+		aria += expanded ? 2 : 1;
+	});
+	let group = 0;
+	const indexOfKey = /* @__PURE__ */ new Map();
+	const heights = new Float64Array(items.length);
+	items.forEach((item, index) => {
+		if (item.kind === "group") items[index] = {
+			...item,
+			count: counts[group++]
+		};
+		indexOfKey.set(item.key, index);
+		heights[index] = options.heightOf(items[index]);
+	});
+	return {
+		items,
+		tree: new HeightTree(heights),
+		bodyRows: aria,
+		indexOfKey
+	};
+}
+function isRange(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function hasBound(bound) {
+	return bound !== null && bound !== void 0 && bound !== "";
+}
+function isActiveFilter(value) {
+	if (isRange(value)) return hasBound(value.min) || hasBound(value.max);
+	return !!value && value.length > 0;
+}
+function dayKey(value) {
+	if (typeof value === "string" && /^\d{4}-\d{2}-\d{2}/.test(value)) return value.slice(0, 10);
+	const date = value instanceof Date ? value : new Date(value);
+	if (value === null || value === void 0 || Number.isNaN(date.getTime())) return "";
+	const pad = (part) => String(part).padStart(2, "0");
+	return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+const VIRTUAL_BUFFER_ROWS = 5;
+const VIRTUAL_FALLBACK_VIEWPORT = 480;
+const MEASURE_TOLERANCE = .1;
+const FOCUSABLE = "button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], [tabindex]:not([tabindex=\"-1\"])";
+const MIN_COLUMN_WIDTH = 48;
+const MAX_COLUMN_WIDTH_HINT = 2e3;
+var StarCellTemplate = class StarCellTemplate {
+	starCell = input.required(...ngDevMode ? [{ debugName: "starCell" }] : /* istanbul ignore next */ []);
+	starCellOf = input(null, ...ngDevMode ? [{ debugName: "starCellOf" }] : /* istanbul ignore next */ []);
+	template = inject(TemplateRef);
+	static ngTemplateContextGuard(_dir, _ctx) {
+		return true;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarCellTemplate,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.6",
+		type: StarCellTemplate,
+		isStandalone: true,
+		selector: "ng-template[starCell]",
+		inputs: {
+			starCell: {
+				classPropertyName: "starCell",
+				publicName: "starCell",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			starCellOf: {
+				classPropertyName: "starCellOf",
+				publicName: "starCellOf",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarCellTemplate,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[starCell]" }]
+	}],
+	propDecorators: {
+		starCell: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "starCell",
+				required: true
+			}]
+		}],
+		starCellOf: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "starCellOf",
+				required: false
+			}]
+		}]
+	}
+});
+var StarRowExpansionTemplate = class StarRowExpansionTemplate {
+	starRowExpansionOf = input(null, ...ngDevMode ? [{ debugName: "starRowExpansionOf" }] : /* istanbul ignore next */ []);
+	template = inject(TemplateRef);
+	static ngTemplateContextGuard(_dir, _ctx) {
+		return true;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarRowExpansionTemplate,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.6",
+		type: StarRowExpansionTemplate,
+		isStandalone: true,
+		selector: "ng-template[starRowExpansion]",
+		inputs: { starRowExpansionOf: {
+			classPropertyName: "starRowExpansionOf",
+			publicName: "starRowExpansionOf",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarRowExpansionTemplate,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[starRowExpansion]" }]
+	}],
+	propDecorators: { starRowExpansionOf: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "starRowExpansionOf",
+			required: false
+		}]
+	}] }
+});
+var StarTable = class StarTable {
+	text = inject(STAR_UI_TEXT);
+	document = inject(DOCUMENT);
+	host = inject(ElementRef);
+	injector = inject(Injector);
+	appRef = inject(ApplicationRef);
+	value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	columns = input.required(...ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []);
+	dataKey = input(null, ...ngDevMode ? [{ debugName: "dataKey" }] : /* istanbul ignore next */ []);
+	loading = input(false, {
+		...ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	emptyMessage = input(null, ...ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []);
+	striped = input(false, {
+		...ngDevMode ? { debugName: "striped" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	stickyHeader = input(false, {
+		...ngDevMode ? { debugName: "stickyHeader" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	scrollHeight = input(null, ...ngDevMode ? [{ debugName: "scrollHeight" }] : /* istanbul ignore next */ []);
+	responsiveLayout = input("scroll", ...ngDevMode ? [{ debugName: "responsiveLayout" }] : /* istanbul ignore next */ []);
+	virtualScroll = input(false, {
+		...ngDevMode ? { debugName: "virtualScroll" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	virtualRowHeight = input(48, ...ngDevMode ? [{ debugName: "virtualRowHeight" }] : /* istanbul ignore next */ []);
+	virtualRowHeights = input("auto", ...ngDevMode ? [{ debugName: "virtualRowHeights" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	paginator = input(false, {
+		...ngDevMode ? { debugName: "paginator" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	first = model(0, ...ngDevMode ? [{ debugName: "first" }] : /* istanbul ignore next */ []);
+	rows = model(10, ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
+	rowsPerPageOptions = input([
+		10,
+		25,
+		50
+	], ...ngDevMode ? [{ debugName: "rowsPerPageOptions" }] : /* istanbul ignore next */ []);
+	sortField = model(null, ...ngDevMode ? [{ debugName: "sortField" }] : /* istanbul ignore next */ []);
+	sortOrder = model(1, ...ngDevMode ? [{ debugName: "sortOrder" }] : /* istanbul ignore next */ []);
+	globalFilter = input("", ...ngDevMode ? [{ debugName: "globalFilter" }] : /* istanbul ignore next */ []);
+	filters = model({}, ...ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []);
+	lazy = input(false, {
+		...ngDevMode ? { debugName: "lazy" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	totalRecords = input(0, ...ngDevMode ? [{ debugName: "totalRecords" }] : /* istanbul ignore next */ []);
+	selectionMode = input(null, ...ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []);
+	selection = model([], ...ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []);
+	expandedKeys = model([], ...ngDevMode ? [{ debugName: "expandedKeys" }] : /* istanbul ignore next */ []);
+	rowExpandMode = input("multiple", ...ngDevMode ? [{ debugName: "rowExpandMode" }] : /* istanbul ignore next */ []);
+	columnToggle = input(false, {
+		...ngDevMode ? { debugName: "columnToggle" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	reorderableColumns = input(false, {
+		...ngDevMode ? { debugName: "reorderableColumns" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	resizableColumns = input(false, {
+		...ngDevMode ? { debugName: "resizableColumns" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	columnOrder = model([], ...ngDevMode ? [{ debugName: "columnOrder" }] : /* istanbul ignore next */ []);
+	hiddenColumns = model([], ...ngDevMode ? [{ debugName: "hiddenColumns" }] : /* istanbul ignore next */ []);
+	columnWidths = model({}, ...ngDevMode ? [{ debugName: "columnWidths" }] : /* istanbul ignore next */ []);
+	multiSort = input(false, {
+		...ngDevMode ? { debugName: "multiSort" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	sortMeta = model([], ...ngDevMode ? [{ debugName: "sortMeta" }] : /* istanbul ignore next */ []);
+	groupBy = input(null, ...ngDevMode ? [{ debugName: "groupBy" }] : /* istanbul ignore next */ []);
+	collapsedGroups = model([], ...ngDevMode ? [{ debugName: "collapsedGroups" }] : /* istanbul ignore next */ []);
+	reorderableRows = input(false, {
+		...ngDevMode ? { debugName: "reorderableRows" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	stateKey = input(null, ...ngDevMode ? [{ debugName: "stateKey" }] : /* istanbul ignore next */ []);
+	stateStorage = input("local", ...ngDevMode ? [{ debugName: "stateStorage" }] : /* istanbul ignore next */ []);
+	rowClick = output();
+	rowReorder = output();
+	cellEdit = output();
+	lazyLoad = output();
+	editing = signal(null, ...ngDevMode ? [{ debugName: "editing" }] : /* istanbul ignore next */ []);
+	cellTemplates = contentChildren(StarCellTemplate, ...ngDevMode ? [{ debugName: "cellTemplates" }] : /* istanbul ignore next */ []);
+	expansion = contentChild(StarRowExpansionTemplate, ...ngDevMode ? [{ debugName: "expansion" }] : /* istanbul ignore next */ []);
+	expansionTemplate = computed(() => this.expansion()?.template ?? null, ...ngDevMode ? [{ debugName: "expansionTemplate" }] : /* istanbul ignore next */ []);
+	expandable = computed(() => !!this.expansion(), ...ngDevMode ? [{ debugName: "expandable" }] : /* istanbul ignore next */ []);
+	radioName = `star-table-${Math.random().toString(36).slice(2)}`;
+	clickable = computed(() => this.selectionMode() === "single", ...ngDevMode ? [{ debugName: "clickable" }] : /* istanbul ignore next */ []);
+	orderedColumns = computed(() => {
+		const order = this.columnOrder();
+		const rank = (column, index) => {
+			const position = order.indexOf(column.field);
+			return (column.frozen ? 0 : 1e6) + (position < 0 ? order.length + index : position);
+		};
+		return this.columns().map((column, index) => ({
+			column,
+			rank: rank(column, index)
+		})).sort((a, b) => a.rank - b.rank).map(({ column }) => column);
+	}, ...ngDevMode ? [{ debugName: "orderedColumns" }] : /* istanbul ignore next */ []);
+	visibleColumns = computed(() => {
+		const hidden = this.hiddenColumns();
+		return this.orderedColumns().filter((column) => !hidden.includes(column.field));
+	}, ...ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []);
+	dragField = signal(null, ...ngDevMode ? [{ debugName: "dragField" }] : /* istanbul ignore next */ []);
+	dropField = signal(null, ...ngDevMode ? [{ debugName: "dropField" }] : /* istanbul ignore next */ []);
+	resizing = false;
+	hasColumnFilters = computed(() => this.visibleColumns().some((column) => column.filter), ...ngDevMode ? [{ debugName: "hasColumnFilters" }] : /* istanbul ignore next */ []);
+	activeFilters = computed(() => {
+		const filters = this.filters();
+		return this.columns().flatMap((column) => {
+			const query = filters[column.field];
+			return column.filter && isActiveFilter(query) ? [{
+				column,
+				query
+			}] : [];
+		});
+	}, ...ngDevMode ? [{ debugName: "activeFilters" }] : /* istanbul ignore next */ []);
+	filtered = computed(() => {
+		if (this.lazy()) return this.value();
+		const query = this.globalFilter();
+		const active = this.activeFilters();
+		if (!query && !active.length) return this.value();
+		return this.value().filter((row) => (!query || this.columns().some((column) => matchesFilter(this.cellText(row, column), query))) && active.every(({ column, query: value }) => this.matchesColumnFilter(row, column, value)));
+	}, ...ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []);
+	sorts = computed(() => {
+		const meta = this.sortMeta();
+		if (this.multiSort() && meta.length) return meta;
+		const field = this.sortField();
+		return field ? [{
+			field,
+			order: this.sortOrder()
+		}] : [];
+	}, ...ngDevMode ? [{ debugName: "sorts" }] : /* istanbul ignore next */ []);
+	sorted = computed(() => {
+		let rows = this.filtered();
+		if (this.lazy()) return rows;
+		const sorts = this.sorts().flatMap((sort) => {
+			const column = this.columns().find((c) => c.field === sort.field);
+			return column ? [{
+				column,
+				order: sort.order
+			}] : [];
+		});
+		if (sorts.length) rows = [...rows].sort((a, b) => {
+			for (const { column, order } of sorts) {
+				const result = compareValues(this.cellValue(a, column), this.cellValue(b, column));
+				if (result) return order * result;
+			}
+			return 0;
+		});
+		if (!this.groupBy()) return rows;
+		const rank = /* @__PURE__ */ new Map();
+		for (const row of rows) {
+			const group = this.groupOf(row);
+			if (!rank.has(group)) rank.set(group, rank.size);
+		}
+		return rows.map((row, index) => ({
+			row,
+			index,
+			rank: rank.get(this.groupOf(row)) ?? 0
+		})).sort((a, b) => a.rank - b.rank || a.index - b.index).map(({ row }) => row);
+	}, ...ngDevMode ? [{ debugName: "sorted" }] : /* istanbul ignore next */ []);
+	groupStarts = computed(() => {
+		const starts = /* @__PURE__ */ new Map();
+		if (!this.groupBy()) return starts;
+		let current = null;
+		this.pageRows().forEach((row, index) => {
+			const label = this.groupOf(row);
+			if (!current || current.label !== label) {
+				current = {
+					label,
+					count: 0
+				};
+				starts.set(index, current);
+			}
+			current.count++;
+		});
+		return starts;
+	}, ...ngDevMode ? [{ debugName: "groupStarts" }] : /* istanbul ignore next */ []);
+	hasFooter = computed(() => this.visibleColumns().some((column) => column.footer !== void 0), ...ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []);
+	rowOrderIsOwn = computed(() => !this.lazy() && !this.sorts().length && !this.globalFilter() && !this.activeFilters().length && !this.groupBy(), ...ngDevMode ? [{ debugName: "rowOrderIsOwn" }] : /* istanbul ignore next */ []);
+	restoredKey = null;
+	total = computed(() => this.lazy() ? this.totalRecords() : this.filtered().length, ...ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []);
+	pageRows = computed(() => {
+		const rows = this.sorted();
+		if (this.lazy() || !this.paginator()) return rows;
+		return rows.slice(this.first(), this.first() + this.rows());
+	}, ...ngDevMode ? [{ debugName: "pageRows" }] : /* istanbul ignore next */ []);
+	scrollTop = signal(0, ...ngDevMode ? [{ debugName: "scrollTop" }] : /* istanbul ignore next */ []);
+	viewportHeight = signal(0, ...ngDevMode ? [{ debugName: "viewportHeight" }] : /* istanbul ignore next */ []);
+	scroller = viewChild("scroller", ...ngDevMode ? [{ debugName: "scroller" }] : /* istanbul ignore next */ []);
+	body = viewChild("body", ...ngDevMode ? [{ debugName: "body" }] : /* istanbul ignore next */ []);
+	variableHeights = computed(() => this.virtualScroll() && (this.virtualRowHeights() === "variable" || this.expandable() || !!this.groupBy() || this.responsiveLayout() === "stack"), ...ngDevMode ? [{ debugName: "variableHeights" }] : /* istanbul ignore next */ []);
+	headerRows = computed(() => this.hasColumnFilters() ? 2 : 1, ...ngDevMode ? [{ debugName: "headerRows" }] : /* istanbul ignore next */ []);
+	ariaRowCount = computed(() => {
+		if (!this.virtualScroll()) return null;
+		const body = this.layout()?.bodyRows ?? this.pageRows().length;
+		return this.headerRows() + body + (this.hasFooter() ? 1 : 0);
+	}, ...ngDevMode ? [{ debugName: "ariaRowCount" }] : /* istanbul ignore next */ []);
+	expandedSet = computed(() => new Set(this.expandedKeys()), ...ngDevMode ? [{ debugName: "expandedSet" }] : /* istanbul ignore next */ []);
+	rowHeights = /* @__PURE__ */ new Map();
+	expandedHeights = /* @__PURE__ */ new Map();
+	measured = signal(0, ...ngDevMode ? [{ debugName: "measured" }] : /* istanbul ignore next */ []);
+	heightEpoch = signal(0, ...ngDevMode ? [{ debugName: "heightEpoch" }] : /* istanbul ignore next */ []);
+	bodyOffset = signal(0, ...ngDevMode ? [{ debugName: "bodyOffset" }] : /* istanbul ignore next */ []);
+	layout = computed(() => {
+		if (!this.variableHeights() || this.loading()) return null;
+		const rows = this.pageRows();
+		const grouped = !!this.groupBy();
+		const collapsed = new Set(this.collapsedGroups());
+		const expandable = this.expandable();
+		const expanded = this.expandedSet();
+		const estimate = Math.max(1, this.virtualRowHeight());
+		this.heightEpoch();
+		return untracked(() => {
+			if (this.rowHeights.size + this.expandedHeights.size > 4 * rows.length + 1e3) {
+				this.rowHeights.clear();
+				this.expandedHeights.clear();
+			}
+			return buildVirtualLayout(rows, {
+				groupOf: grouped ? (row) => this.groupOf(row) : null,
+				isCollapsed: (label) => collapsed.has(label),
+				isExpanded: (row) => expandable && expanded.has(this.trackKey(row)),
+				keyOf: (row) => this.trackKey(row),
+				heightOf: (item) => this.estimateOf(item, estimate)
+			});
+		});
+	}, ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
+	estimateOf(item, estimate) {
+		if (item.kind === "group") return this.rowHeights.get(item.key) ?? estimate;
+		if (!item.expanded) return this.rowHeights.get(item.key) ?? estimate;
+		return this.expandedHeights.get(item.key) ?? (this.rowHeights.get(item.key) ?? estimate) + estimate;
+	}
+	anchorMemo = null;
+	pendingScroll = null;
+	variableWindow = computed(() => {
+		const layout = this.layout();
+		if (!layout) return null;
+		this.measured();
+		const rows = this.pageRows();
+		let top = Math.max(0, this.scrollTop() - this.bodyOffset());
+		const memo = this.anchorMemo;
+		if (memo && memo.layout !== layout && memo.rows === rows && memo.top === top) {
+			const anchor = anchorOf(memo.layout.tree, top);
+			const key = anchor ? memo.layout.items[anchor.index]?.key : void 0;
+			const index = anchor ? layout.indexOfKey.get(key) : void 0;
+			if (anchor && index !== void 0) {
+				const kept = layout.tree.offsetOf(index) + anchor.inside;
+				if (Math.abs(kept - top) > .5) {
+					top = kept;
+					this.pendingScroll = kept + untracked(this.bodyOffset);
+				}
+			}
+		}
+		this.anchorMemo = {
+			layout,
+			rows,
+			top
+		};
+		const viewport = this.viewportHeight() || VIRTUAL_FALLBACK_VIEWPORT;
+		return {
+			layout,
+			...variableRange(layout.tree, top, viewport, VIRTUAL_BUFFER_ROWS)
+		};
+	}, ...ngDevMode ? [{ debugName: "variableWindow" }] : /* istanbul ignore next */ []);
+	focusedKey = signal(null, ...ngDevMode ? [{ debugName: "focusedKey" }] : /* istanbul ignore next */ []);
+	focusedIndex = computed(() => {
+		const focused = this.focusedKey();
+		if (!focused || !this.virtualScroll()) return -1;
+		const layout = this.layout();
+		if (layout) return layout.indexOfKey.get(focused.key) ?? -1;
+		return this.pageRows().findIndex((row) => Object.is(this.trackKey(row), focused.key));
+	}, ...ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []);
+	bodyEntries = computed(() => {
+		const rows = this.pageRows();
+		if (!this.virtualScroll()) {
+			const entries = [];
+			const starts = this.groupStarts();
+			rows.forEach((row, index) => {
+				const group = starts.get(index);
+				if (group) entries.push({
+					kind: "group",
+					key: groupKey(group.label),
+					...group,
+					aria: null,
+					item: null
+				});
+				entries.push({
+					kind: "row",
+					key: this.trackKey(row),
+					row,
+					index,
+					aria: null,
+					item: null
+				});
+			});
+			return entries;
+		}
+		const header = this.headerRows();
+		const focused = this.focusedIndex();
+		const variable = this.variableWindow();
+		if (variable) {
+			const { layout } = variable;
+			return this.windowEntries(variable, focused, layout.tree.total, (i) => layout.tree.offsetOf(i), (i) => {
+				const item = layout.items[i];
+				const aria = header + item.aria + 1;
+				return item.kind === "group" ? {
+					kind: "group",
+					key: item.key,
+					label: item.label,
+					count: item.count,
+					aria,
+					item: i
+				} : {
+					kind: "row",
+					key: item.key,
+					row: item.row,
+					index: item.index,
+					aria,
+					item: i
+				};
+			});
+		}
+		const height = Math.max(1, this.virtualRowHeight());
+		const window = this.virtualWindow();
+		return this.windowEntries(window, focused, rows.length * height, (i) => i * height, (i) => ({
+			kind: "row",
+			key: this.trackKey(rows[i]),
+			row: rows[i],
+			index: i,
+			aria: header + i + 1,
+			item: i
+		}));
+	}, ...ngDevMode ? [{ debugName: "bodyEntries" }] : /* istanbul ignore next */ []);
+	windowEntries(window, focused, total, offsetOf, entryAt) {
+		const indexes = [];
+		if (focused >= 0 && focused < window.start) indexes.push(focused);
+		for (let i = window.start; i < window.end; i++) indexes.push(i);
+		if (focused >= window.end) indexes.push(focused);
+		const entries = [];
+		let cursor = 0;
+		let spacers = 0;
+		const spacer = (height) => {
+			if (height > .01) entries.push({
+				kind: "spacer",
+				key: `\u0000spacer${spacers++}`,
+				height
+			});
+		};
+		for (const index of indexes) {
+			spacer(offsetOf(index) - offsetOf(cursor));
+			entries.push(entryAt(index));
+			cursor = index + 1;
+		}
+		if (indexes.length) spacer(total - offsetOf(cursor));
+		return entries;
+	}
+	virtualWindow = computed(() => {
+		const count = this.pageRows().length;
+		if (!this.virtualScroll() || this.loading() || this.variableHeights()) return {
+			start: 0,
+			end: count,
+			before: 0,
+			after: 0
+		};
+		const height = Math.max(1, this.virtualRowHeight());
+		const viewport = this.viewportHeight() || VIRTUAL_FALLBACK_VIEWPORT;
+		const visible = Math.ceil(viewport / height);
+		const first = Math.min(Math.floor(this.scrollTop() / height), Math.max(0, count - visible));
+		const start = Math.max(0, first - VIRTUAL_BUFFER_ROWS);
+		const end = Math.min(count, first + visible + VIRTUAL_BUFFER_ROWS);
+		return {
+			start,
+			end,
+			before: start * height,
+			after: (count - end) * height
+		};
+	}, ...ngDevMode ? [{ debugName: "virtualWindow" }] : /* istanbul ignore next */ []);
+	onScroll(event) {
+		if (!this.virtualScroll()) return;
+		const viewport = event.target;
+		this.scrollTop.set(viewport.scrollTop);
+		this.viewportHeight.set(viewport.clientHeight);
+	}
+	observedRows = /* @__PURE__ */ new Set();
+	rowObserver = null;
+	measureRendered() {
+		const layout = untracked(this.layout);
+		const scroller = this.scroller()?.nativeElement;
+		const body = this.body()?.nativeElement;
+		if (!layout || !scroller || !body || !scroller.isConnected || !scroller.clientHeight) return;
+		if (this.pendingScroll !== null) {
+			scroller.scrollTop = this.pendingScroll;
+			this.pendingScroll = null;
+		}
+		const area = scroller.getBoundingClientRect();
+		const offset = body.getBoundingClientRect().top - area.top - scroller.clientTop + scroller.scrollTop;
+		const heights = /* @__PURE__ */ new Map();
+		for (const row of Array.from(body.children)) {
+			const item = row.dataset["vi"];
+			if (item === void 0) continue;
+			heights.set(Number(item), (heights.get(Number(item)) ?? 0) + row.getBoundingClientRect().height);
+		}
+		const { tree, items } = layout;
+		const anchor = tree.indexAt(scroller.scrollTop - offset);
+		const changes = [];
+		for (const [index, height] of heights) {
+			const item = items[index];
+			if (!item || height <= 0) continue;
+			const from = tree.get(index);
+			if (Math.abs(height - from) < MEASURE_TOLERANCE) continue;
+			tree.set(index, height);
+			changes.push({
+				index,
+				from,
+				to: height
+			});
+			(item.kind === "row" && item.expanded ? this.expandedHeights : this.rowHeights).set(item.key, height);
+		}
+		const shift = anchorShift(changes, anchor);
+		if (Math.abs(shift) >= .5) scroller.scrollTop += shift;
+		this.bodyOffset.set(offset);
+		this.viewportHeight.set(scroller.clientHeight);
+		this.scrollTop.set(scroller.scrollTop);
+		if (changes.length) this.measured.update((count) => count + 1);
+		this.observeRows(body);
+	}
+	observeRows(body) {
+		if (typeof ResizeObserver === "undefined") return;
+		this.rowObserver ??= new ResizeObserver(() => this.measureRendered());
+		const rows = /* @__PURE__ */ new Set([body, ...Array.from(body.querySelectorAll(":scope > tr[data-vi]"))]);
+		for (const row of this.observedRows) if (!rows.has(row)) {
+			this.rowObserver.unobserve(row);
+			this.observedRows.delete(row);
+		}
+		for (const row of rows) if (!this.observedRows.has(row)) {
+			this.rowObserver.observe(row);
+			this.observedRows.add(row);
+		}
+	}
+	itemOf(element) {
+		const row = element?.closest("tr[data-vi]");
+		return row && this.body()?.nativeElement.contains(row) ? Number(row.dataset["vi"]) : -1;
+	}
+	keyOfItem(index) {
+		const layout = this.layout();
+		if (layout) return layout.items[index]?.key;
+		const row = this.pageRows()[index];
+		return row === void 0 ? void 0 : this.trackKey(row);
+	}
+	onBodyFocusIn(event) {
+		if (!this.virtualScroll()) return;
+		const index = this.itemOf(event.target);
+		if (index < 0) return;
+		const key = this.keyOfItem(index);
+		if (!Object.is(this.focusedKey()?.key, key)) this.focusedKey.set({ key });
+		const scroller = this.scroller()?.nativeElement;
+		if (scroller) {
+			this.scrollTop.set(scroller.scrollTop);
+			if (scroller.clientHeight) this.viewportHeight.set(scroller.clientHeight);
+		}
+	}
+	onBodyFocusOut(event) {
+		if (!this.virtualScroll()) return;
+		const body = this.body()?.nativeElement;
+		const next = event.relatedTarget;
+		if (!body || next && body.contains(next)) return;
+		setTimeout(() => {
+			if (!body.contains(this.document.activeElement)) this.focusedKey.set(null);
+		});
+	}
+	onBodyKeydown(event) {
+		if (event.key !== "Tab" || !this.virtualScroll() || event.defaultPrevented) return;
+		const body = this.body()?.nativeElement;
+		const index = this.itemOf(event.target);
+		if (!body || index < 0) return;
+		const step = event.shiftKey ? -1 : 1;
+		const target = index + step;
+		const count = this.layout()?.items.length ?? this.pageRows().length;
+		if (target < 0 || target >= count || body.querySelector(`:scope > tr[data-vi="${target}"]`)) return;
+		const own = this.focusablesOf(body, index);
+		const position = own.indexOf(event.target);
+		if (position < 0 || (step === 1 ? position < own.length - 1 : position > 0)) return;
+		event.preventDefault();
+		this.revealItem(target);
+		afterNextRender(() => {
+			for (let i = target; i >= 0 && i < count; i += step) {
+				const controls = this.focusablesOf(body, i);
+				if (!body.querySelector(`:scope > tr[data-vi="${i}"]`)) break;
+				if (controls.length) {
+					(step === 1 ? controls[0] : controls[controls.length - 1]).focus();
+					return;
+				}
+			}
+		}, { injector: this.injector });
+		this.appRef.tick();
+	}
+	focusablesOf(body, index) {
+		return Array.from(body.querySelectorAll(`:scope > tr[data-vi="${index}"]`)).flatMap((row) => Array.from(row.querySelectorAll(FOCUSABLE)));
+	}
+	revealItem(index) {
+		const scroller = this.scroller()?.nativeElement;
+		if (!scroller) return;
+		const layout = this.layout();
+		const offset = layout ? layout.tree.offsetOf(index) : index * Math.max(1, this.virtualRowHeight());
+		scroller.scrollTop = Math.max(0, this.bodyOffset() + offset - scroller.clientHeight / 2);
+		this.scrollTop.set(scroller.scrollTop);
+		if (scroller.clientHeight) this.viewportHeight.set(scroller.clientHeight);
+	}
+	skeletonRows = computed(() => Array.from({ length: Math.min(this.rows(), 8) }, (_, i) => i), ...ngDevMode ? [{ debugName: "skeletonRows" }] : /* istanbul ignore next */ []);
+	colspan = computed(() => this.visibleColumns().length + (this.selectionMode() ? 1 : 0) + (this.expandable() ? 1 : 0) + (this.reorderableRows() ? 1 : 0), ...ngDevMode ? [{ debugName: "colspan" }] : /* istanbul ignore next */ []);
+	pageState = computed(() => {
+		const rows = this.pageRows();
+		const count = rows.filter((row) => this.isSelected(row)).length;
+		if (!rows.length || count === 0) return false;
+		return count === rows.length ? true : "mixed";
+	}, ...ngDevMode ? [{ debugName: "pageState" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			this.globalFilter();
+			this.filters();
+			untracked(() => {
+				this.first.set(0);
+				this.emitLazy();
+			});
+		});
+		afterRenderEffect({ read: () => this.measureFrozen() });
+		afterRenderEffect(() => {
+			this.bodyEntries();
+			this.expandedKeys();
+			if (this.variableHeights()) untracked(() => this.measureRendered());
+		});
+		const destroyRef = inject(DestroyRef);
+		if (typeof ResizeObserver !== "undefined") {
+			let width = null;
+			const observer = new ResizeObserver((entries) => {
+				this.resized.update((count) => count + 1);
+				const next = Math.round(entries[entries.length - 1].contentRect.width);
+				if (width !== null && next !== width && untracked(this.variableHeights)) {
+					this.rowHeights.clear();
+					this.expandedHeights.clear();
+					this.heightEpoch.update((count) => count + 1);
+				}
+				width = next;
+			});
+			observer.observe(this.host.nativeElement);
+			destroyRef.onDestroy(() => observer.disconnect());
+		}
+		destroyRef.onDestroy(() => this.rowObserver?.disconnect());
+		if (isDevMode()) effect(() => {
+			if (this.virtualScroll() && !this.scrollHeight()) console.warn("star-table: virtualScroll needs scrollHeight. Without it the table does not scroll inside its own area, and rows after the first window are not rendered.");
+			if (this.virtualRowHeights() === "variable" && !this.virtualScroll()) console.warn("star-table: virtualRowHeights has no effect without virtualScroll.");
+		});
+		effect(() => {
+			const key = this.stateKey();
+			if (!key) return;
+			if (this.restoredKey !== key) {
+				this.restoredKey = key;
+				untracked(() => this.restoreState(key));
+			}
+			const state = {
+				sortField: this.sortField(),
+				sortOrder: this.sortOrder(),
+				sortMeta: this.sortMeta(),
+				filters: this.filters(),
+				columnOrder: this.columnOrder(),
+				hiddenColumns: this.hiddenColumns(),
+				columnWidths: this.columnWidths(),
+				rows: this.rows(),
+				collapsedGroups: this.collapsedGroups()
+			};
+			try {
+				this.storage()?.setItem(key, JSON.stringify(state));
+			} catch {}
+		});
+	}
+	storage() {
+		const view = this.document.defaultView;
+		try {
+			return (this.stateStorage() === "session" ? view?.sessionStorage : view?.localStorage) ?? null;
+		} catch {
+			return null;
+		}
+	}
+	restoreState(key) {
+		let state;
+		try {
+			state = JSON.parse(this.storage()?.getItem(key) ?? "null");
+		} catch {
+			return;
+		}
+		if (!state || typeof state !== "object") return;
+		if (state.sortField !== void 0) this.sortField.set(state.sortField);
+		if (state.sortOrder === 1 || state.sortOrder === -1) this.sortOrder.set(state.sortOrder);
+		if (Array.isArray(state.sortMeta)) this.sortMeta.set(state.sortMeta);
+		if (state.filters && typeof state.filters === "object") this.filters.set(state.filters);
+		if (Array.isArray(state.columnOrder)) this.columnOrder.set(state.columnOrder);
+		if (Array.isArray(state.hiddenColumns)) this.hiddenColumns.set(state.hiddenColumns);
+		if (state.columnWidths && typeof state.columnWidths === "object") this.columnWidths.set(state.columnWidths);
+		if (typeof state.rows === "number" && state.rows > 0) this.rows.set(state.rows);
+		if (Array.isArray(state.collapsedGroups)) this.collapsedGroups.set(state.collapsedGroups);
+	}
+	clearState() {
+		const key = this.stateKey();
+		if (key) this.storage()?.removeItem(key);
+	}
+	groupOf(row) {
+		const key = this.groupBy();
+		const group = key ? readOption(row, key) : null;
+		return group === null || group === void 0 ? "" : String(group);
+	}
+	isGroupCollapsed(label) {
+		return this.collapsedGroups().includes(label);
+	}
+	isRowCollapsed(row) {
+		return !!this.groupBy() && this.isGroupCollapsed(this.groupOf(row));
+	}
+	toggleGroup(label) {
+		this.collapsedGroups.update((groups) => groups.includes(label) ? groups.filter((group) => group !== label) : [...groups, label]);
+	}
+	footerText(column) {
+		const footer = column.footer;
+		if (footer === void 0) return "";
+		return typeof footer === "function" ? footer(this.sorted()) : footer;
+	}
+	canMoveRow(row, step) {
+		if (!this.rowOrderIsOwn()) return false;
+		const to = this.value().indexOf(row) + step;
+		return to >= 0 && to < this.value().length;
+	}
+	moveRow(row, step) {
+		if (!this.canMoveRow(row, step)) return;
+		const from = this.value().indexOf(row);
+		this.rowReorder.emit({
+			row,
+			from,
+			to: from + step
+		});
+	}
+	trackKey(row) {
+		return readOption(row, this.dataKey());
+	}
+	cellTemplate(field) {
+		return this.cellTemplates().find((t) => t.starCell() === field)?.template ?? null;
+	}
+	cellValue(row, column) {
+		return column.value ? column.value(row) : row?.[column.field];
+	}
+	cellText(row, column) {
+		if (column.format) return column.format(row);
+		const value = this.cellValue(row, column);
+		return value === null || value === void 0 ? "" : String(value);
+	}
+	isHidden(column) {
+		return this.hiddenColumns().includes(column.field);
+	}
+	canHide(column) {
+		if (column.hideable === false) return false;
+		return this.isHidden(column) || this.visibleColumns().length > 1;
+	}
+	setColumnVisible(column, visible) {
+		this.hiddenColumns.update((hidden) => visible ? hidden.filter((field) => field !== column.field) : [...hidden, column.field]);
+	}
+	moveColumn(field, targetField) {
+		const fields = this.orderedColumns().map((column) => column.field);
+		const from = fields.indexOf(field);
+		const to = fields.indexOf(targetField);
+		if (from < 0 || to < 0 || from === to) return;
+		fields.splice(to, 0, ...fields.splice(from, 1));
+		this.columnOrder.set(fields);
+	}
+	moveColumnBy(column, delta) {
+		const fields = this.orderedColumns().map((item) => item.field);
+		const target = fields[fields.indexOf(column.field) + delta];
+		if (!target) return;
+		this.moveColumn(column.field, target);
+		this.focusMoveButton(column, delta);
+	}
+	moveKey(column, delta) {
+		return `${this.radioName}|${column.field}|${delta}`;
+	}
+	focusMoveButton(column, delta) {
+		afterNextRender(() => {
+			const button = (step) => this.document.querySelector(`[data-move="${CSS.escape(this.moveKey(column, step))}"]`);
+			const same = button(delta);
+			(same && !same.disabled ? same : button(delta === 1 ? -1 : 1))?.focus();
+		}, { injector: this.injector });
+	}
+	onDragStart(column, event) {
+		if (this.resizing || !this.reorderableColumns()) {
+			event.preventDefault();
+			return;
+		}
+		this.dragField.set(column.field);
+		event.dataTransfer?.setData("text/plain", column.field);
+		if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
+	}
+	onDragOver(column, event) {
+		const field = this.dragField();
+		if (!field || field === column.field) return;
+		event.preventDefault();
+		this.dropField.set(column.field);
+	}
+	onDrop(column, event) {
+		const field = this.dragField();
+		if (!field) return;
+		event.preventDefault();
+		this.moveColumn(field, column.field);
+		this.endDrag();
+	}
+	endDrag() {
+		this.dragField.set(null);
+		this.dropField.set(null);
+	}
+	widthOf(column) {
+		return this.resizedWidth(column) ?? column.width ?? null;
+	}
+	resizedWidth(column) {
+		const width = this.columnWidths()[column.field];
+		return width ? `${width}px` : null;
+	}
+	frozenWidths = signal({}, ...ngDevMode ? [{ debugName: "frozenWidths" }] : /* istanbul ignore next */ []);
+	headerWidths = signal({}, ...ngDevMode ? [{ debugName: "headerWidths" }] : /* istanbul ignore next */ []);
+	scrollable = signal(false, ...ngDevMode ? [{ debugName: "scrollable" }] : /* istanbul ignore next */ []);
+	minColumnWidth = MIN_COLUMN_WIDTH;
+	resizeNow(column) {
+		const width = this.columnWidths()[column.field] ?? this.headerWidths()[column.field];
+		return width === void 0 ? null : Math.round(width);
+	}
+	resizeMax(column) {
+		return Math.max(MAX_COLUMN_WIDTH_HINT, this.resizeNow(column) ?? 0);
+	}
+	resized = signal(0, ...ngDevMode ? [{ debugName: "resized" }] : /* istanbul ignore next */ []);
+	measureFrozen() {
+		const frozen = this.visibleColumns().filter((column) => column.frozen);
+		this.columnWidths();
+		this.value();
+		this.size();
+		this.resized();
+		const scroller = this.scroller()?.nativeElement;
+		if (scroller) this.scrollable.set(scroller.scrollWidth > scroller.clientWidth + 1 || scroller.scrollHeight > scroller.clientHeight + 1);
+		const resizable = this.resizableColumns();
+		if (!frozen.length && !resizable) return;
+		const widths = {};
+		const all = {};
+		for (const cell of this.host.nativeElement.querySelectorAll("thead th[data-field]")) {
+			const field = cell.dataset["field"];
+			if (!field) continue;
+			const width = cell.getBoundingClientRect().width;
+			all[field] = width;
+			if (frozen.some((column) => column.field === field)) widths[field] = width;
+		}
+		const sameWidths = (next, current) => Object.keys(next).length === Object.keys(current).length && Object.entries(next).every(([field, width]) => Math.abs((current[field] ?? -1) - width) < .5);
+		if (!sameWidths(widths, untracked(this.frozenWidths))) this.frozenWidths.set(widths);
+		if (resizable && !sameWidths(all, untracked(this.headerWidths))) this.headerWidths.set(all);
+	}
+	frozenOffset(column) {
+		if (!column.frozen) return null;
+		const measured = this.frozenWidths();
+		const before = [];
+		let pixels = 0;
+		let allMeasured = true;
+		for (const item of this.visibleColumns()) {
+			if (item === column) break;
+			if (!item.frozen) continue;
+			before.push(this.widthOf(item) ?? "0px");
+			const width = measured[item.field];
+			if (width) pixels += width;
+			else allMeasured = false;
+		}
+		if (!before.length) return "0px";
+		return allMeasured ? `${Math.round(pixels * 100) / 100}px` : `calc(${before.join(" + ")})`;
+	}
+	setWidth(column, width) {
+		const next = Math.max(MIN_COLUMN_WIDTH, Math.round(width));
+		this.columnWidths.update((widths) => ({
+			...widths,
+			[column.field]: next
+		}));
+	}
+	startResize(column, event) {
+		const handle = event.currentTarget;
+		const header = handle.closest("th");
+		if (!header) return;
+		event.preventDefault();
+		event.stopPropagation();
+		this.resizing = true;
+		const direction = starIsRtl(header) ? -1 : 1;
+		const startWidth = header.offsetWidth;
+		const startX = event.clientX;
+		handle.setPointerCapture?.(event.pointerId);
+		const move = (moveEvent) => this.setWidth(column, startWidth + direction * (moveEvent.clientX - startX));
+		const stop = () => {
+			this.resizing = false;
+			handle.removeEventListener("pointermove", move);
+			handle.removeEventListener("pointerup", stop);
+			handle.removeEventListener("pointercancel", stop);
+		};
+		handle.addEventListener("pointermove", move);
+		handle.addEventListener("pointerup", stop);
+		handle.addEventListener("pointercancel", stop);
+	}
+	onResizeKey(column, event) {
+		const step = event.key === "ArrowRight" ? 16 : event.key === "ArrowLeft" ? -16 : 0;
+		if (!step) return;
+		event.preventDefault();
+		const header = event.currentTarget.closest("th");
+		const direction = starIsRtl(header) ? -1 : 1;
+		this.setWidth(column, (this.columnWidths()[column.field] ?? header?.offsetWidth ?? 0) + direction * step);
+	}
+	editKey(row, column) {
+		return `${String(this.trackKey(row))}|${column.field}`;
+	}
+	isEditable(row, column) {
+		return typeof column.editable === "function" ? column.editable(row) : !!column.editable;
+	}
+	isEditing(row, column) {
+		return this.editing() === this.editKey(row, column);
+	}
+	editText(row, column) {
+		const value = this.cellValue(row, column);
+		return value === null || value === void 0 ? "" : String(value);
+	}
+	startEdit(row, column) {
+		this.editing.set(this.editKey(row, column));
+		this.focusAfterRender(".star-table__editor", true);
+	}
+	commitEdit(row, column, text) {
+		if (!this.isEditing(row, column)) return;
+		const previous = this.cellValue(row, column);
+		const value = column.editor === "number" ? text.trim() === "" ? null : Number(text) : text;
+		this.closeEditor(row, column);
+		if (typeof value === "number" && Number.isNaN(value)) return;
+		if (Object.is(value, previous) || value === "" && (previous ?? "") === "") return;
+		this.cellEdit.emit({
+			row,
+			field: column.field,
+			value,
+			previous
+		});
+	}
+	cancelEdit(event) {
+		event.stopPropagation();
+		const key = this.editing();
+		this.editing.set(null);
+		if (key) this.focusAfterRender(`[data-edit="${CSS.escape(key)}"]`);
+	}
+	closeEditor(row, column) {
+		const key = this.editKey(row, column);
+		this.editing.set(null);
+		this.focusAfterRender(`[data-edit="${CSS.escape(key)}"]`);
+	}
+	focusAfterRender(selector, select = false) {
+		afterNextRender(() => {
+			const target = this.host.nativeElement.querySelector(selector);
+			target?.focus();
+			if (select && target instanceof HTMLInputElement && target.type === "text") target.select();
+		}, { injector: this.injector });
+	}
+	isExpanded(row) {
+		return this.expandedSet().has(this.trackKey(row));
+	}
+	detailId(index) {
+		return `${this.radioName}-detail-${index}`;
+	}
+	toggleExpansion(row) {
+		const key = this.trackKey(row);
+		if (this.isExpanded(row)) this.expandedKeys.update((keys) => keys.filter((expanded) => !Object.is(expanded, key)));
+		else this.expandedKeys.update((keys) => this.rowExpandMode() === "single" ? [key] : [...keys, key]);
+	}
+	expandAll() {
+		this.expandedKeys.set(this.pageRows().map((row) => this.trackKey(row)));
+	}
+	collapseAll() {
+		this.expandedKeys.set([]);
+	}
+	matchesColumnFilter(row, column, value) {
+		if (isRange(value)) {
+			const raw = this.cellValue(row, column);
+			if (column.filter === "date") {
+				const day = dayKey(raw);
+				return !!day && (!hasBound(value.min) || day >= String(value.min)) && (!hasBound(value.max) || day <= String(value.max));
+			}
+			const amount = raw === null || raw === void 0 || raw === "" ? NaN : Number(raw);
+			return !Number.isNaN(amount) && (!hasBound(value.min) || amount >= Number(value.min)) && (!hasBound(value.max) || amount <= Number(value.max));
+		}
+		const text = this.cellText(row, column);
+		if (typeof value !== "string") return value.includes(text);
+		return column.filter === "select" ? text === value : matchesFilter(text, value);
+	}
+	filterValue(field) {
+		const value = this.filters()[field];
+		return typeof value === "string" ? value : "";
+	}
+	filterList(field) {
+		const value = this.filters()[field];
+		return Array.isArray(value) ? value : [];
+	}
+	filterBound(field, bound) {
+		const value = this.filters()[field];
+		const side = isRange(value) ? value[bound] : null;
+		return hasBound(side) ? String(side) : "";
+	}
+	setBound(column, bound, text) {
+		const current = this.filters()[column.field];
+		const side = text === "" ? null : column.filter === "number" ? Number(text) : text;
+		this.setFilter(column.field, {
+			...isRange(current) ? current : {},
+			[bound]: side
+		});
+	}
+	filterChoices(column) {
+		if (column.filterOptions) return column.filterOptions;
+		const texts = new Set(this.value().map((row) => this.cellText(row, column)));
+		texts.delete("");
+		return [...texts].sort((a, b) => compareValues(a, b));
+	}
+	setFilter(field, value) {
+		this.filters.update((filters) => ({
+			...filters,
+			[field]: value
+		}));
+	}
+	clearFilters() {
+		this.filters.set({});
+	}
+	exportData(options) {
+		return {
+			columns: this.visibleColumns().filter((column) => column.exportable !== false),
+			rows: options.rows ?? (options.selectionOnly ? this.selection() : this.sorted())
+		};
+	}
+	exportText(row, column) {
+		return column.exportValue ? String(column.exportValue(row) ?? "") : this.cellText(row, column);
+	}
+	exportCell(row, column) {
+		const custom = column.exportValue?.(row);
+		if (typeof custom === "number") return custom;
+		const value = this.cellValue(row, column);
+		return !column.exportValue && !column.format && typeof value === "number" ? value : this.exportText(row, column);
+	}
+	toCsv(options = {}) {
+		const separator = options.separator ?? ",";
+		const { columns, rows } = this.exportData(options);
+		const escape = (text) => text.includes(separator) || /["\r\n]/.test(text) ? `"${text.replaceAll("\"", "\"\"")}"` : text;
+		const cell = (row, column) => {
+			const value = this.exportCell(row, column);
+			const text = String(value);
+			return escape(typeof value !== "number" && /^[=+\-@\t\r]/.test(text) ? `'${text}` : text);
+		};
+		return [columns.map((column) => escape(column.header)).join(separator), ...rows.map((row) => columns.map((column) => cell(row, column)).join(separator))].join("\r\n");
+	}
+	exportCsv(options = {}) {
+		this.download(new Blob(["", this.toCsv(options)], { type: "text/csv;charset=utf-8" }), `${options.fileName ?? "export"}.csv`);
+	}
+	toXlsx(options = {}) {
+		const { columns, rows } = this.exportData(options);
+		return buildXlsx(columns.map((column) => column.header), rows.map((row) => columns.map((column) => this.exportCell(row, column))), options.title ?? this.ariaLabel() ?? void 0);
+	}
+	exportExcel(options = {}) {
+		const bytes = this.toXlsx(options);
+		this.download(new Blob([bytes.buffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }), `${options.fileName ?? "export"}.xlsx`);
+	}
+	print(options = {}) {
+		const { columns, rows } = this.exportData(options);
+		const frame = this.document.createElement("iframe");
+		frame.setAttribute("aria-hidden", "true");
+		frame.style.cssText = "position:fixed;width:0;height:0;border:0;visibility:hidden";
+		frame.srcdoc = buildPrintDocument(options.title ?? this.ariaLabel() ?? "", columns.map((column) => column.header), rows.map((row) => columns.map((column) => this.exportCell(row, column))));
+		frame.addEventListener("load", () => {
+			const view = frame.contentWindow;
+			if (!view) return;
+			fitPrintDocument(view.document);
+			view.addEventListener("afterprint", () => frame.remove());
+			view.focus();
+			view.print();
+		});
+		this.document.body.append(frame);
+	}
+	download(blob, fileName) {
+		const url = URL.createObjectURL(blob);
+		const link = this.document.createElement("a");
+		link.href = url;
+		link.download = fileName;
+		link.click();
+		URL.revokeObjectURL(url);
+	}
+	sortBy(column, event) {
+		const current = this.sorts().find((sort) => sort.field === column.field);
+		const order = current ? current.order === 1 ? -1 : 1 : 1;
+		if (this.multiSort() && event?.shiftKey) {
+			const sorts = this.sorts();
+			this.sortMeta.set(current ? sorts.map((sort) => sort.field === column.field ? {
+				...sort,
+				order
+			} : sort) : [...sorts, {
+				field: column.field,
+				order
+			}]);
+		} else this.sortMeta.set(this.multiSort() ? [{
+			field: column.field,
+			order
+		}] : []);
+		const first = this.multiSort() ? this.sortMeta()[0] : {
+			field: column.field,
+			order
+		};
+		this.sortField.set(first.field);
+		this.sortOrder.set(first.order);
+		this.first.set(0);
+		this.emitLazy();
+	}
+	sortOf(column) {
+		return this.sorts().find((sort) => sort.field === column.field);
+	}
+	ariaSort(column) {
+		if (!column.sortable) return null;
+		const first = this.sorts()[0];
+		if (first?.field !== column.field) return "none";
+		return first.order === 1 ? "ascending" : "descending";
+	}
+	sortIcon(column) {
+		const sort = this.sortOf(column);
+		if (!sort) return "ph-bold ph-arrows-down-up star-table__sort-idle";
+		return sort.order === 1 ? "ph-bold ph-sort-ascending" : "ph-bold ph-sort-descending";
+	}
+	sortRank(column) {
+		const sorts = this.sorts();
+		if (sorts.length < 2) return null;
+		const index = sorts.findIndex((sort) => sort.field === column.field);
+		return index < 0 ? null : index + 1;
+	}
+	selectedKeys = computed(() => new Set(this.selection().map((row) => this.trackKey(row))), ...ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []);
+	isSelected(row) {
+		return this.selectedKeys().has(this.trackKey(row));
+	}
+	toggleRow(row) {
+		const key = this.trackKey(row);
+		this.selection.update((selection) => this.isSelected(row) ? selection.filter((selected) => !Object.is(this.trackKey(selected), key)) : [...selection, row]);
+	}
+	selectOnly(row) {
+		this.selection.set([row]);
+	}
+	togglePage(checked) {
+		const page = this.pageRows();
+		const keys = new Set(page.map((row) => this.trackKey(row)));
+		this.selection.update((selection) => {
+			const others = selection.filter((row) => !keys.has(this.trackKey(row)));
+			return checked ? [...others, ...page] : others;
+		});
+	}
+	onRowClick(row, event) {
+		if (event.target.closest("button, a, input, select, textarea")) return;
+		if (this.selectionMode() === "single") this.selectOnly(row);
+		this.rowClick.emit(row);
+	}
+	emitLazy() {
+		if (!this.lazy()) return;
+		this.lazyLoad.emit({
+			first: this.first(),
+			rows: this.rows(),
+			field: this.sortField(),
+			order: this.sortOrder(),
+			filter: this.globalFilter(),
+			filters: this.filters(),
+			sorts: this.sorts()
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarTable,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarTable,
+		isStandalone: true,
+		selector: "star-table",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			columns: {
+				classPropertyName: "columns",
+				publicName: "columns",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			dataKey: {
+				classPropertyName: "dataKey",
+				publicName: "dataKey",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loading: {
+				classPropertyName: "loading",
+				publicName: "loading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			emptyMessage: {
+				classPropertyName: "emptyMessage",
+				publicName: "emptyMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			striped: {
+				classPropertyName: "striped",
+				publicName: "striped",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stickyHeader: {
+				classPropertyName: "stickyHeader",
+				publicName: "stickyHeader",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			scrollHeight: {
+				classPropertyName: "scrollHeight",
+				publicName: "scrollHeight",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			responsiveLayout: {
+				classPropertyName: "responsiveLayout",
+				publicName: "responsiveLayout",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			virtualScroll: {
+				classPropertyName: "virtualScroll",
+				publicName: "virtualScroll",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			virtualRowHeight: {
+				classPropertyName: "virtualRowHeight",
+				publicName: "virtualRowHeight",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			virtualRowHeights: {
+				classPropertyName: "virtualRowHeights",
+				publicName: "virtualRowHeights",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			paginator: {
+				classPropertyName: "paginator",
+				publicName: "paginator",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			first: {
+				classPropertyName: "first",
+				publicName: "first",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			rows: {
+				classPropertyName: "rows",
+				publicName: "rows",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			rowsPerPageOptions: {
+				classPropertyName: "rowsPerPageOptions",
+				publicName: "rowsPerPageOptions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			sortField: {
+				classPropertyName: "sortField",
+				publicName: "sortField",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			sortOrder: {
+				classPropertyName: "sortOrder",
+				publicName: "sortOrder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			globalFilter: {
+				classPropertyName: "globalFilter",
+				publicName: "globalFilter",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			filters: {
+				classPropertyName: "filters",
+				publicName: "filters",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			lazy: {
+				classPropertyName: "lazy",
+				publicName: "lazy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			totalRecords: {
+				classPropertyName: "totalRecords",
+				publicName: "totalRecords",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectionMode: {
+				classPropertyName: "selectionMode",
+				publicName: "selectionMode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selection: {
+				classPropertyName: "selection",
+				publicName: "selection",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			expandedKeys: {
+				classPropertyName: "expandedKeys",
+				publicName: "expandedKeys",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			rowExpandMode: {
+				classPropertyName: "rowExpandMode",
+				publicName: "rowExpandMode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			columnToggle: {
+				classPropertyName: "columnToggle",
+				publicName: "columnToggle",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			reorderableColumns: {
+				classPropertyName: "reorderableColumns",
+				publicName: "reorderableColumns",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			resizableColumns: {
+				classPropertyName: "resizableColumns",
+				publicName: "resizableColumns",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			columnOrder: {
+				classPropertyName: "columnOrder",
+				publicName: "columnOrder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hiddenColumns: {
+				classPropertyName: "hiddenColumns",
+				publicName: "hiddenColumns",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			columnWidths: {
+				classPropertyName: "columnWidths",
+				publicName: "columnWidths",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			multiSort: {
+				classPropertyName: "multiSort",
+				publicName: "multiSort",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			sortMeta: {
+				classPropertyName: "sortMeta",
+				publicName: "sortMeta",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			groupBy: {
+				classPropertyName: "groupBy",
+				publicName: "groupBy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			collapsedGroups: {
+				classPropertyName: "collapsedGroups",
+				publicName: "collapsedGroups",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			reorderableRows: {
+				classPropertyName: "reorderableRows",
+				publicName: "reorderableRows",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stateKey: {
+				classPropertyName: "stateKey",
+				publicName: "stateKey",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stateStorage: {
+				classPropertyName: "stateStorage",
+				publicName: "stateStorage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			first: "firstChange",
+			rows: "rowsChange",
+			sortField: "sortFieldChange",
+			sortOrder: "sortOrderChange",
+			filters: "filtersChange",
+			selection: "selectionChange",
+			expandedKeys: "expandedKeysChange",
+			columnOrder: "columnOrderChange",
+			hiddenColumns: "hiddenColumnsChange",
+			columnWidths: "columnWidthsChange",
+			sortMeta: "sortMetaChange",
+			collapsedGroups: "collapsedGroupsChange",
+			rowClick: "rowClick",
+			rowReorder: "rowReorder",
+			cellEdit: "cellEdit",
+			lazyLoad: "lazyLoad"
+		},
+		host: {
+			listeners: {
+				"focusin": "onBodyFocusIn($event)",
+				"focusout": "onBodyFocusOut($event)",
+				"keydown": "onBodyKeydown($event)"
+			},
+			properties: {
+				"class.star-table--striped": "striped()",
+				"class.star-table--sm": "size() === 'sm'",
+				"class.star-table--sticky": "stickyHeader()",
+				"class.star-table--virtual": "virtualScroll()",
+				"class.star-table--variable": "variableHeights()",
+				"class.star-table--stack": "responsiveLayout() === 'stack'",
+				"style.--star-table-row-height.px": "virtualScroll() ? virtualRowHeight() : null"
+			},
+			classAttribute: "star-table"
+		},
+		queries: [{
+			propertyName: "cellTemplates",
+			predicate: StarCellTemplate,
+			isSignal: true
+		}, {
+			propertyName: "expansion",
+			first: true,
+			predicate: StarRowExpansionTemplate,
+			descendants: true,
+			isSignal: true
+		}],
+		viewQueries: [{
+			propertyName: "scroller",
+			first: true,
+			predicate: ["scroller"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "body",
+			first: true,
+			predicate: ["body"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <ng-content select="[starTableCaption]" />
+    @if (columnToggle()) {
+      <div class="star-table__tools">
+        <star-button
+          size="sm"
+          variant="secondary"
+          leadingIcon="ph-bold ph-columns"
+          (pressed)="columnsPanel.toggle($event)"
+        >
+          {{ text.columns }}
+        </star-button>
+        <star-popover #columnsPanel [ariaLabel]="text.columns">
+          <ul class="star-table__columns">
+            @for (
+              column of orderedColumns();
+              track column.field;
+              let first = $first;
+              let last = $last
+            ) {
+              <li>
+                <star-checkbox
+                  [checked]="!isHidden(column)"
+                  [disabled]="!canHide(column)"
+                  (checkedChange)="setColumnVisible(column, $event)"
+                >
+                  {{ column.header }}
+                </star-checkbox>
+                @if (reorderableColumns()) {
+                  <span class="star-table__columns-move">
+                    <button
+                      type="button"
+                      class="star-table__toggle"
+                      [disabled]="first"
+                      [attr.data-move]="moveKey(column, -1)"
+                      [attr.aria-label]="text.moveColumnEarlier(column.header)"
+                      (click)="moveColumnBy(column, -1)"
+                    >
+                      <i class="ph-bold ph-arrow-up" aria-hidden="true"></i>
+                    </button>
+                    <button
+                      type="button"
+                      class="star-table__toggle"
+                      [disabled]="last"
+                      [attr.data-move]="moveKey(column, 1)"
+                      [attr.aria-label]="text.moveColumnLater(column.header)"
+                      (click)="moveColumnBy(column, 1)"
+                    >
+                      <i class="ph-bold ph-arrow-down" aria-hidden="true"></i>
+                    </button>
+                  </span>
+                }
+              </li>
+            }
+          </ul>
+        </star-popover>
+      </div>
+    }
+    <div
+      #scroller
+      class="star-table__scroll"
+      [attr.role]="scrollable() ? 'group' : null"
+      [attr.aria-label]="scrollable() ? ariaLabel() : null"
+      [attr.tabindex]="scrollable() ? 0 : null"
+      [style.max-height]="scrollHeight()"
+      (scroll)="onScroll($event)"
+    >
+      <table
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-busy]="loading() || null"
+        [attr.aria-rowcount]="ariaRowCount()"
+      >
+        <thead>
+          <tr [attr.aria-rowindex]="virtualScroll() ? 1 : null">
+            @if (reorderableRows()) {
+              <th class="star-table__reorder" scope="col">
+                <span class="star-sr-only">{{ text.reorderRows }}</span>
+              </th>
+            }
+            @if (expandable()) {
+              <th class="star-table__expander" scope="col">
+                <span class="star-sr-only">{{ text.rowDetails }}</span>
+              </th>
+            }
+            @if (selectionMode() === 'multiple') {
+              <th class="star-table__select" scope="col">
+                <star-checkbox
+                  [checked]="pageState() === true"
+                  [indeterminate]="pageState() === 'mixed'"
+                  [ariaLabel]="text.selectAllRows"
+                  [disabled]="!pageRows().length"
+                  (checkedChange)="togglePage($event)"
+                />
+              </th>
+            } @else if (selectionMode() === 'single') {
+              <th class="star-table__select" scope="col">
+                <span class="star-sr-only">{{ text.selectRow }}</span>
+              </th>
+            }
+            @for (column of visibleColumns(); track column.field) {
+              <th
+                scope="col"
+                [style.width]="widthOf(column)"
+                [style.min-width]="resizedWidth(column)"
+                [style.max-width]="resizedWidth(column)"
+                [style.inset-inline-start]="frozenOffset(column)"
+                [attr.data-field]="column.field"
+                [class]="'star-table__th star-table__cell--' + (column.align ?? 'start')"
+                [class.star-table__cell--frozen]="column.frozen"
+                [class.star-table__th--drop]="dropField() === column.field"
+                [attr.aria-sort]="ariaSort(column)"
+                [attr.draggable]="reorderableColumns() ? 'true' : null"
+                (dragstart)="onDragStart(column, $event)"
+                (dragover)="onDragOver(column, $event)"
+                (drop)="onDrop(column, $event)"
+                (dragend)="endDrag()"
+              >
+                @if (column.sortable) {
+                  <button
+                    type="button"
+                    class="star-table__sort"
+                    [attr.title]="multiSort() ? text.sortMultiHint : null"
+                    (click)="sortBy(column, $event)"
+                  >
+                    {{ column.header }}
+                    <i [class]="sortIcon(column)" aria-hidden="true"></i>
+                    @if (sortRank(column); as rank) {
+                      <span class="star-table__sort-rank">{{ rank }}</span>
+                    }
+                  </button>
+                } @else {
+                  {{ column.header }}
+                }
+                @if (resizableColumns()) {
+                  <span
+                    class="star-table__resizer"
+                    role="separator"
+                    aria-orientation="vertical"
+                    tabindex="0"
+                    [attr.aria-label]="text.resizeColumn(column.header)"
+                    [attr.aria-valuenow]="resizeNow(column)"
+                    [attr.aria-valuemin]="minColumnWidth"
+                    [attr.aria-valuemax]="resizeMax(column)"
+                    (pointerdown)="startResize(column, $event)"
+                    (keydown)="onResizeKey(column, $event)"
+                  ></span>
+                }
+              </th>
+            }
+          </tr>
+          @if (hasColumnFilters()) {
+            <tr class="star-table__filters" [attr.aria-rowindex]="virtualScroll() ? 2 : null">
+              @if (reorderableRows()) {
+                <td class="star-table__reorder"></td>
+              }
+              @if (expandable()) {
+                <td class="star-table__expander"></td>
+              }
+              @if (selectionMode()) {
+                <td class="star-table__select"></td>
+              }
+              @for (column of visibleColumns(); track column.field) {
+                <td
+                  [class.star-table__cell--frozen]="column.frozen"
+                  [style.inset-inline-start]="frozenOffset(column)"
+                  [attr.data-label]="column.filter ? column.header : null"
+                >
+                  @if (column.filter === 'select') {
+                    <select
+                      class="star-input star-input--sm star-table__filter"
+                      [attr.aria-label]="text.filterBy(column.header)"
+                      (change)="setFilter(column.field, $any($event.target).value)"
+                    >
+                      <option value="" [selected]="!filterValue(column.field)">
+                        {{ text.filterAll }}
+                      </option>
+                      @for (option of filterChoices(column); track option) {
+                        <option [value]="option" [selected]="option === filterValue(column.field)">
+                          {{ option }}
+                        </option>
+                      }
+                    </select>
+                  } @else if (column.filter === 'text') {
+                    <input
+                      type="search"
+                      class="star-input star-input--sm star-table__filter"
+                      [attr.aria-label]="text.filterBy(column.header)"
+                      [value]="filterValue(column.field)"
+                      (input)="setFilter(column.field, $any($event.target).value)"
+                    />
+                  } @else if (column.filter === 'multiselect') {
+                    <star-multi-select
+                      class="star-table__filter"
+                      size="sm"
+                      [options]="filterChoices(column)"
+                      [value]="filterList(column.field)"
+                      [placeholder]="text.filterAll"
+                      [ariaLabel]="text.filterBy(column.header)"
+                      (valueChange)="setFilter(column.field, $event)"
+                    />
+                  } @else if (column.filter === 'number' || column.filter === 'date') {
+                    <span class="star-table__filter-range">
+                      <input
+                        class="star-input star-input--sm star-table__filter"
+                        [type]="column.filter"
+                        [attr.aria-label]="text.filterMin(column.header)"
+                        [attr.placeholder]="column.filter === 'number' ? text.filterMinShort : null"
+                        [value]="filterBound(column.field, 'min')"
+                        (input)="setBound(column, 'min', $any($event.target).value)"
+                      />
+                      <input
+                        class="star-input star-input--sm star-table__filter"
+                        [type]="column.filter"
+                        [attr.aria-label]="text.filterMax(column.header)"
+                        [attr.placeholder]="column.filter === 'number' ? text.filterMaxShort : null"
+                        [value]="filterBound(column.field, 'max')"
+                        (input)="setBound(column, 'max', $any($event.target).value)"
+                      />
+                    </span>
+                  }
+                </td>
+              }
+            </tr>
+          }
+        </thead>
+        <tbody #body>
+          @if (loading()) {
+            @for (row of skeletonRows(); track row) {
+              <tr class="star-table__row">
+                @if (reorderableRows()) {
+                  <td class="star-table__reorder"></td>
+                }
+                @if (expandable()) {
+                  <td class="star-table__expander"></td>
+                }
+                @if (selectionMode()) {
+                  <td class="star-table__select"><star-skeleton size="1.25rem" /></td>
+                }
+                @for (column of visibleColumns(); track column.field) {
+                  <td><star-skeleton height="0.875rem" [width]="row % 2 ? '70%' : '90%'" /></td>
+                }
+              </tr>
+            }
+          } @else {
+            @for (entry of bodyEntries(); track entry.key) {
+              @if (entry.kind === 'spacer') {
+                <tr class="star-table__spacer" aria-hidden="true">
+                  <td [attr.colspan]="colspan()" [style.height.px]="entry.height"></td>
+                </tr>
+              } @else if (entry.kind === 'group') {
+                @let group = entry;
+                <tr
+                  class="star-table__group"
+                  [attr.aria-rowindex]="group.aria"
+                  [attr.data-vi]="group.item"
+                >
+                  <th [attr.colspan]="colspan()" scope="colgroup">
+                    <button
+                      type="button"
+                      class="star-table__group-toggle"
+                      [attr.aria-expanded]="!isGroupCollapsed(group.label)"
+                      (click)="toggleGroup(group.label)"
+                    >
+                      <i class="ph-bold ph-caret-down" aria-hidden="true"></i>
+                      {{ group.label }}
+                      <span class="star-table__group-count">{{ group.count }}</span>
+                    </button>
+                  </th>
+                </tr>
+              } @else {
+                @let row = entry.row;
+                @let i = entry.index;
+                <tr
+                  [attr.aria-rowindex]="entry.aria"
+                  [attr.data-vi]="entry.item"
+                  [hidden]="isRowCollapsed(row)"
+                  class="star-table__row"
+                  [class.star-table__row--alt]="i % 2 === 1"
+                  [class.star-table__row--selected]="isSelected(row)"
+                  [class.star-table__row--clickable]="clickable()"
+                  [class.star-table__row--expanded]="expandable() && isExpanded(row)"
+                  [attr.aria-selected]="selectionMode() ? isSelected(row) : null"
+                  (click)="onRowClick(row, $event)"
+                >
+                  @if (reorderableRows()) {
+                    <td class="star-table__reorder">
+                      <button
+                        type="button"
+                        class="star-table__toggle"
+                        [disabled]="!canMoveRow(row, -1)"
+                        [attr.aria-label]="text.moveUp"
+                        (click)="moveRow(row, -1)"
+                      >
+                        <i class="ph-bold ph-arrow-up" aria-hidden="true"></i>
+                      </button>
+                      <button
+                        type="button"
+                        class="star-table__toggle"
+                        [disabled]="!canMoveRow(row, 1)"
+                        [attr.aria-label]="text.moveDown"
+                        (click)="moveRow(row, 1)"
+                      >
+                        <i class="ph-bold ph-arrow-down" aria-hidden="true"></i>
+                      </button>
+                    </td>
+                  }
+                  @if (expandable()) {
+                    <td class="star-table__expander">
+                      <button
+                        type="button"
+                        class="star-table__toggle"
+                        [attr.aria-expanded]="isExpanded(row)"
+                        [attr.aria-controls]="isExpanded(row) ? detailId(i) : null"
+                        [attr.aria-label]="isExpanded(row) ? text.collapseRow : text.expandRow"
+                        (click)="toggleExpansion(row)"
+                      >
+                        <i class="ph-bold ph-caret-right" aria-hidden="true"></i>
+                      </button>
+                    </td>
+                  }
+                  @if (selectionMode() === 'multiple') {
+                    <td class="star-table__select">
+                      <star-checkbox
+                        [checked]="isSelected(row)"
+                        [ariaLabel]="text.selectRow"
+                        (checkedChange)="toggleRow(row)"
+                        (click)="$event.stopPropagation()"
+                      />
+                    </td>
+                  } @else if (selectionMode() === 'single') {
+                    <td class="star-table__select">
+                      <input
+                        type="radio"
+                        class="star-table__radio"
+                        [name]="radioName"
+                        [checked]="isSelected(row)"
+                        [attr.aria-label]="text.selectRow"
+                        (change)="selectOnly(row)"
+                        (click)="$event.stopPropagation()"
+                      />
+                    </td>
+                  }
+                  @for (column of visibleColumns(); track column.field) {
+                    <td
+                      [class]="'star-table__cell--' + (column.align ?? 'start')"
+                      [class.star-table__cell--frozen]="column.frozen"
+                      [style.inset-inline-start]="frozenOffset(column)"
+                      [attr.data-label]="column.header"
+                    >
+                      @if (isEditing(row, column)) {
+                        @if (column.editor === 'select') {
+                          <select
+                            class="star-input star-input--sm star-table__editor"
+                            [attr.aria-label]="text.editCell(column.header)"
+                            (change)="commitEdit(row, column, $any($event.target).value)"
+                            (blur)="commitEdit(row, column, $any($event.target).value)"
+                            (keydown.escape)="cancelEdit($event)"
+                          >
+                            @for (option of column.editOptions ?? []; track option) {
+                              <option
+                                [value]="option"
+                                [selected]="option === cellText(row, column)"
+                              >
+                                {{ option }}
+                              </option>
+                            }
+                          </select>
+                        } @else {
+                          <input
+                            class="star-input star-input--sm star-table__editor"
+                            [type]="column.editor === 'number' ? 'number' : 'text'"
+                            [attr.aria-label]="text.editCell(column.header)"
+                            [value]="editText(row, column)"
+                            (blur)="commitEdit(row, column, $any($event.target).value)"
+                            (keydown.enter)="commitEdit(row, column, $any($event.target).value)"
+                            (keydown.escape)="cancelEdit($event)"
+                          />
+                        }
+                      } @else if (isEditable(row, column)) {
+                        <button
+                          type="button"
+                          class="star-table__edit"
+                          [attr.data-edit]="editKey(row, column)"
+                          (click)="startEdit(row, column)"
+                        >
+                          <!-- The name is the action and the visible value (WCAG 2.5.3). -->
+                          <span class="star-sr-only">{{ text.editCell(column.header) }}: </span>
+                          <span class="star-table__edit-value">
+                            <ng-container
+                              *ngTemplateOutlet="
+                                cell;
+                                context: { $implicit: row, column, index: i }
+                              "
+                            />
+                          </span>
+                          <i class="ph-bold ph-pencil-simple" aria-hidden="true"></i>
+                        </button>
+                      } @else {
+                        <ng-container
+                          *ngTemplateOutlet="cell; context: { $implicit: row, column, index: i }"
+                        />
+                      }
+                    </td>
+                  }
+                </tr>
+                @if (expansionTemplate(); as detail) {
+                  @if (isExpanded(row) && !isRowCollapsed(row)) {
+                    <tr
+                      class="star-table__expansion"
+                      [id]="detailId(i)"
+                      [attr.aria-rowindex]="entry.aria === null ? null : entry.aria + 1"
+                      [attr.data-vi]="entry.item"
+                    >
+                      <td [attr.colspan]="colspan()">
+                        <ng-container
+                          *ngTemplateOutlet="detail; context: { $implicit: row, index: i }"
+                        />
+                      </td>
+                    </tr>
+                  }
+                }
+              }
+            } @empty {
+              <tr>
+                <td class="star-table__empty" [attr.colspan]="colspan()">
+                  <i class="ph-bold ph-tray" aria-hidden="true"></i>
+                  {{ emptyMessage() ?? text.noData }}
+                </td>
+              </tr>
+            }
+          }
+        </tbody>
+        @if (hasFooter()) {
+          <tfoot>
+            <tr
+              class="star-table__footer"
+              [attr.aria-rowindex]="virtualScroll() ? ariaRowCount() : null"
+            >
+              @if (reorderableRows()) {
+                <td class="star-table__reorder"></td>
+              }
+              @if (expandable()) {
+                <td class="star-table__expander"></td>
+              }
+              @if (selectionMode()) {
+                <td class="star-table__select"></td>
+              }
+              @for (column of visibleColumns(); track column.field) {
+                <td
+                  [class]="'star-table__cell--' + (column.align ?? 'start')"
+                  [attr.data-label]="footerText(column) ? column.header : null"
+                >
+                  {{ footerText(column) }}
+                </td>
+              }
+            </tr>
+          </tfoot>
+        }
+      </table>
+    </div>
+    <ng-template #cell let-row let-column="column" let-i="index">
+      @if (cellTemplate(column.field); as custom) {
+        <ng-container
+          *ngTemplateOutlet="
+            custom;
+            context: { $implicit: row, value: cellValue(row, column), index: i }
+          "
+        />
+      } @else {
+        {{ cellText(row, column) }}
+      }
+    </ng-template>
+    @if (paginator()) {
+      <star-paginator
+        [ariaLabel]="ariaLabel() ? text.pagination + ': ' + ariaLabel() : null"
+        [totalRecords]="total()"
+        [(first)]="first"
+        [(rows)]="rows"
+        [rowsPerPageOptions]="rowsPerPageOptions()"
+        (pageChange)="emitLazy()"
+      />
+    }
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: StarButton,
+				selector: "star-button",
+				inputs: [
+					"variant",
+					"size",
+					"type",
+					"disabled",
+					"loading",
+					"leadingIcon",
+					"trailingIcon",
+					"iconOnly",
+					"fullWidth",
+					"ariaLabel"
+				],
+				outputs: ["pressed"]
+			},
+			{
+				kind: "component",
+				type: StarCheckbox,
+				selector: "star-checkbox",
+				inputs: [
+					"checked",
+					"indeterminate",
+					"disabled",
+					"readonly",
+					"required",
+					"invalid",
+					"touched",
+					"name",
+					"inputId",
+					"ariaLabel",
+					"ariaDescribedBy"
+				],
+				outputs: [
+					"checkedChange",
+					"indeterminateChange",
+					"touch"
+				]
+			},
+			{
+				kind: "component",
+				type: StarMultiSelect,
+				selector: "star-multi-select",
+				inputs: [
+					"value",
+					"display",
+					"maxSelectedLabels",
+					"selectionLimit",
+					"showToggleAll"
+				],
+				outputs: ["valueChange"]
+			},
+			{
+				kind: "component",
+				type: StarPaginator,
+				selector: "star-paginator",
+				inputs: [
+					"totalRecords",
+					"first",
+					"rows",
+					"rowsPerPageOptions",
+					"pageLinkSize",
+					"showCurrentPageReport",
+					"showFirstLast",
+					"ariaLabel"
+				],
+				outputs: [
+					"firstChange",
+					"rowsChange",
+					"pageChange"
+				]
+			},
+			{
+				kind: "component",
+				type: StarPopover,
+				selector: "star-popover",
+				inputs: [
+					"ariaLabel",
+					"focusOnShow",
+					"dismissable"
+				],
+				outputs: ["shown", "hidden"]
+			},
+			{
+				kind: "component",
+				type: StarSkeleton,
+				selector: "star-skeleton",
+				inputs: [
+					"shape",
+					"width",
+					"height",
+					"size",
+					"borderRadius",
+					"animation"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarTable,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-table",
+			imports: [
+				NgTemplateOutlet,
+				StarButton,
+				StarCheckbox,
+				StarMultiSelect,
+				StarPaginator,
+				StarPopover,
+				StarSkeleton
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-table",
+				"[class.star-table--striped]": "striped()",
+				"[class.star-table--sm]": "size() === 'sm'",
+				"[class.star-table--sticky]": "stickyHeader()",
+				"[class.star-table--virtual]": "virtualScroll()",
+				"[class.star-table--variable]": "variableHeights()",
+				"[class.star-table--stack]": "responsiveLayout() === 'stack'",
+				"[style.--star-table-row-height.px]": "virtualScroll() ? virtualRowHeight() : null",
+				"(focusin)": "onBodyFocusIn($event)",
+				"(focusout)": "onBodyFocusOut($event)",
+				"(keydown)": "onBodyKeydown($event)"
+			},
+			template: `
+    <ng-content select="[starTableCaption]" />
+    @if (columnToggle()) {
+      <div class="star-table__tools">
+        <star-button
+          size="sm"
+          variant="secondary"
+          leadingIcon="ph-bold ph-columns"
+          (pressed)="columnsPanel.toggle($event)"
+        >
+          {{ text.columns }}
+        </star-button>
+        <star-popover #columnsPanel [ariaLabel]="text.columns">
+          <ul class="star-table__columns">
+            @for (
+              column of orderedColumns();
+              track column.field;
+              let first = $first;
+              let last = $last
+            ) {
+              <li>
+                <star-checkbox
+                  [checked]="!isHidden(column)"
+                  [disabled]="!canHide(column)"
+                  (checkedChange)="setColumnVisible(column, $event)"
+                >
+                  {{ column.header }}
+                </star-checkbox>
+                @if (reorderableColumns()) {
+                  <span class="star-table__columns-move">
+                    <button
+                      type="button"
+                      class="star-table__toggle"
+                      [disabled]="first"
+                      [attr.data-move]="moveKey(column, -1)"
+                      [attr.aria-label]="text.moveColumnEarlier(column.header)"
+                      (click)="moveColumnBy(column, -1)"
+                    >
+                      <i class="ph-bold ph-arrow-up" aria-hidden="true"></i>
+                    </button>
+                    <button
+                      type="button"
+                      class="star-table__toggle"
+                      [disabled]="last"
+                      [attr.data-move]="moveKey(column, 1)"
+                      [attr.aria-label]="text.moveColumnLater(column.header)"
+                      (click)="moveColumnBy(column, 1)"
+                    >
+                      <i class="ph-bold ph-arrow-down" aria-hidden="true"></i>
+                    </button>
+                  </span>
+                }
+              </li>
+            }
+          </ul>
+        </star-popover>
+      </div>
+    }
+    <div
+      #scroller
+      class="star-table__scroll"
+      [attr.role]="scrollable() ? 'group' : null"
+      [attr.aria-label]="scrollable() ? ariaLabel() : null"
+      [attr.tabindex]="scrollable() ? 0 : null"
+      [style.max-height]="scrollHeight()"
+      (scroll)="onScroll($event)"
+    >
+      <table
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-busy]="loading() || null"
+        [attr.aria-rowcount]="ariaRowCount()"
+      >
+        <thead>
+          <tr [attr.aria-rowindex]="virtualScroll() ? 1 : null">
+            @if (reorderableRows()) {
+              <th class="star-table__reorder" scope="col">
+                <span class="star-sr-only">{{ text.reorderRows }}</span>
+              </th>
+            }
+            @if (expandable()) {
+              <th class="star-table__expander" scope="col">
+                <span class="star-sr-only">{{ text.rowDetails }}</span>
+              </th>
+            }
+            @if (selectionMode() === 'multiple') {
+              <th class="star-table__select" scope="col">
+                <star-checkbox
+                  [checked]="pageState() === true"
+                  [indeterminate]="pageState() === 'mixed'"
+                  [ariaLabel]="text.selectAllRows"
+                  [disabled]="!pageRows().length"
+                  (checkedChange)="togglePage($event)"
+                />
+              </th>
+            } @else if (selectionMode() === 'single') {
+              <th class="star-table__select" scope="col">
+                <span class="star-sr-only">{{ text.selectRow }}</span>
+              </th>
+            }
+            @for (column of visibleColumns(); track column.field) {
+              <th
+                scope="col"
+                [style.width]="widthOf(column)"
+                [style.min-width]="resizedWidth(column)"
+                [style.max-width]="resizedWidth(column)"
+                [style.inset-inline-start]="frozenOffset(column)"
+                [attr.data-field]="column.field"
+                [class]="'star-table__th star-table__cell--' + (column.align ?? 'start')"
+                [class.star-table__cell--frozen]="column.frozen"
+                [class.star-table__th--drop]="dropField() === column.field"
+                [attr.aria-sort]="ariaSort(column)"
+                [attr.draggable]="reorderableColumns() ? 'true' : null"
+                (dragstart)="onDragStart(column, $event)"
+                (dragover)="onDragOver(column, $event)"
+                (drop)="onDrop(column, $event)"
+                (dragend)="endDrag()"
+              >
+                @if (column.sortable) {
+                  <button
+                    type="button"
+                    class="star-table__sort"
+                    [attr.title]="multiSort() ? text.sortMultiHint : null"
+                    (click)="sortBy(column, $event)"
+                  >
+                    {{ column.header }}
+                    <i [class]="sortIcon(column)" aria-hidden="true"></i>
+                    @if (sortRank(column); as rank) {
+                      <span class="star-table__sort-rank">{{ rank }}</span>
+                    }
+                  </button>
+                } @else {
+                  {{ column.header }}
+                }
+                @if (resizableColumns()) {
+                  <span
+                    class="star-table__resizer"
+                    role="separator"
+                    aria-orientation="vertical"
+                    tabindex="0"
+                    [attr.aria-label]="text.resizeColumn(column.header)"
+                    [attr.aria-valuenow]="resizeNow(column)"
+                    [attr.aria-valuemin]="minColumnWidth"
+                    [attr.aria-valuemax]="resizeMax(column)"
+                    (pointerdown)="startResize(column, $event)"
+                    (keydown)="onResizeKey(column, $event)"
+                  ></span>
+                }
+              </th>
+            }
+          </tr>
+          @if (hasColumnFilters()) {
+            <tr class="star-table__filters" [attr.aria-rowindex]="virtualScroll() ? 2 : null">
+              @if (reorderableRows()) {
+                <td class="star-table__reorder"></td>
+              }
+              @if (expandable()) {
+                <td class="star-table__expander"></td>
+              }
+              @if (selectionMode()) {
+                <td class="star-table__select"></td>
+              }
+              @for (column of visibleColumns(); track column.field) {
+                <td
+                  [class.star-table__cell--frozen]="column.frozen"
+                  [style.inset-inline-start]="frozenOffset(column)"
+                  [attr.data-label]="column.filter ? column.header : null"
+                >
+                  @if (column.filter === 'select') {
+                    <select
+                      class="star-input star-input--sm star-table__filter"
+                      [attr.aria-label]="text.filterBy(column.header)"
+                      (change)="setFilter(column.field, $any($event.target).value)"
+                    >
+                      <option value="" [selected]="!filterValue(column.field)">
+                        {{ text.filterAll }}
+                      </option>
+                      @for (option of filterChoices(column); track option) {
+                        <option [value]="option" [selected]="option === filterValue(column.field)">
+                          {{ option }}
+                        </option>
+                      }
+                    </select>
+                  } @else if (column.filter === 'text') {
+                    <input
+                      type="search"
+                      class="star-input star-input--sm star-table__filter"
+                      [attr.aria-label]="text.filterBy(column.header)"
+                      [value]="filterValue(column.field)"
+                      (input)="setFilter(column.field, $any($event.target).value)"
+                    />
+                  } @else if (column.filter === 'multiselect') {
+                    <star-multi-select
+                      class="star-table__filter"
+                      size="sm"
+                      [options]="filterChoices(column)"
+                      [value]="filterList(column.field)"
+                      [placeholder]="text.filterAll"
+                      [ariaLabel]="text.filterBy(column.header)"
+                      (valueChange)="setFilter(column.field, $event)"
+                    />
+                  } @else if (column.filter === 'number' || column.filter === 'date') {
+                    <span class="star-table__filter-range">
+                      <input
+                        class="star-input star-input--sm star-table__filter"
+                        [type]="column.filter"
+                        [attr.aria-label]="text.filterMin(column.header)"
+                        [attr.placeholder]="column.filter === 'number' ? text.filterMinShort : null"
+                        [value]="filterBound(column.field, 'min')"
+                        (input)="setBound(column, 'min', $any($event.target).value)"
+                      />
+                      <input
+                        class="star-input star-input--sm star-table__filter"
+                        [type]="column.filter"
+                        [attr.aria-label]="text.filterMax(column.header)"
+                        [attr.placeholder]="column.filter === 'number' ? text.filterMaxShort : null"
+                        [value]="filterBound(column.field, 'max')"
+                        (input)="setBound(column, 'max', $any($event.target).value)"
+                      />
+                    </span>
+                  }
+                </td>
+              }
+            </tr>
+          }
+        </thead>
+        <tbody #body>
+          @if (loading()) {
+            @for (row of skeletonRows(); track row) {
+              <tr class="star-table__row">
+                @if (reorderableRows()) {
+                  <td class="star-table__reorder"></td>
+                }
+                @if (expandable()) {
+                  <td class="star-table__expander"></td>
+                }
+                @if (selectionMode()) {
+                  <td class="star-table__select"><star-skeleton size="1.25rem" /></td>
+                }
+                @for (column of visibleColumns(); track column.field) {
+                  <td><star-skeleton height="0.875rem" [width]="row % 2 ? '70%' : '90%'" /></td>
+                }
+              </tr>
+            }
+          } @else {
+            @for (entry of bodyEntries(); track entry.key) {
+              @if (entry.kind === 'spacer') {
+                <tr class="star-table__spacer" aria-hidden="true">
+                  <td [attr.colspan]="colspan()" [style.height.px]="entry.height"></td>
+                </tr>
+              } @else if (entry.kind === 'group') {
+                @let group = entry;
+                <tr
+                  class="star-table__group"
+                  [attr.aria-rowindex]="group.aria"
+                  [attr.data-vi]="group.item"
+                >
+                  <th [attr.colspan]="colspan()" scope="colgroup">
+                    <button
+                      type="button"
+                      class="star-table__group-toggle"
+                      [attr.aria-expanded]="!isGroupCollapsed(group.label)"
+                      (click)="toggleGroup(group.label)"
+                    >
+                      <i class="ph-bold ph-caret-down" aria-hidden="true"></i>
+                      {{ group.label }}
+                      <span class="star-table__group-count">{{ group.count }}</span>
+                    </button>
+                  </th>
+                </tr>
+              } @else {
+                @let row = entry.row;
+                @let i = entry.index;
+                <tr
+                  [attr.aria-rowindex]="entry.aria"
+                  [attr.data-vi]="entry.item"
+                  [hidden]="isRowCollapsed(row)"
+                  class="star-table__row"
+                  [class.star-table__row--alt]="i % 2 === 1"
+                  [class.star-table__row--selected]="isSelected(row)"
+                  [class.star-table__row--clickable]="clickable()"
+                  [class.star-table__row--expanded]="expandable() && isExpanded(row)"
+                  [attr.aria-selected]="selectionMode() ? isSelected(row) : null"
+                  (click)="onRowClick(row, $event)"
+                >
+                  @if (reorderableRows()) {
+                    <td class="star-table__reorder">
+                      <button
+                        type="button"
+                        class="star-table__toggle"
+                        [disabled]="!canMoveRow(row, -1)"
+                        [attr.aria-label]="text.moveUp"
+                        (click)="moveRow(row, -1)"
+                      >
+                        <i class="ph-bold ph-arrow-up" aria-hidden="true"></i>
+                      </button>
+                      <button
+                        type="button"
+                        class="star-table__toggle"
+                        [disabled]="!canMoveRow(row, 1)"
+                        [attr.aria-label]="text.moveDown"
+                        (click)="moveRow(row, 1)"
+                      >
+                        <i class="ph-bold ph-arrow-down" aria-hidden="true"></i>
+                      </button>
+                    </td>
+                  }
+                  @if (expandable()) {
+                    <td class="star-table__expander">
+                      <button
+                        type="button"
+                        class="star-table__toggle"
+                        [attr.aria-expanded]="isExpanded(row)"
+                        [attr.aria-controls]="isExpanded(row) ? detailId(i) : null"
+                        [attr.aria-label]="isExpanded(row) ? text.collapseRow : text.expandRow"
+                        (click)="toggleExpansion(row)"
+                      >
+                        <i class="ph-bold ph-caret-right" aria-hidden="true"></i>
+                      </button>
+                    </td>
+                  }
+                  @if (selectionMode() === 'multiple') {
+                    <td class="star-table__select">
+                      <star-checkbox
+                        [checked]="isSelected(row)"
+                        [ariaLabel]="text.selectRow"
+                        (checkedChange)="toggleRow(row)"
+                        (click)="$event.stopPropagation()"
+                      />
+                    </td>
+                  } @else if (selectionMode() === 'single') {
+                    <td class="star-table__select">
+                      <input
+                        type="radio"
+                        class="star-table__radio"
+                        [name]="radioName"
+                        [checked]="isSelected(row)"
+                        [attr.aria-label]="text.selectRow"
+                        (change)="selectOnly(row)"
+                        (click)="$event.stopPropagation()"
+                      />
+                    </td>
+                  }
+                  @for (column of visibleColumns(); track column.field) {
+                    <td
+                      [class]="'star-table__cell--' + (column.align ?? 'start')"
+                      [class.star-table__cell--frozen]="column.frozen"
+                      [style.inset-inline-start]="frozenOffset(column)"
+                      [attr.data-label]="column.header"
+                    >
+                      @if (isEditing(row, column)) {
+                        @if (column.editor === 'select') {
+                          <select
+                            class="star-input star-input--sm star-table__editor"
+                            [attr.aria-label]="text.editCell(column.header)"
+                            (change)="commitEdit(row, column, $any($event.target).value)"
+                            (blur)="commitEdit(row, column, $any($event.target).value)"
+                            (keydown.escape)="cancelEdit($event)"
+                          >
+                            @for (option of column.editOptions ?? []; track option) {
+                              <option
+                                [value]="option"
+                                [selected]="option === cellText(row, column)"
+                              >
+                                {{ option }}
+                              </option>
+                            }
+                          </select>
+                        } @else {
+                          <input
+                            class="star-input star-input--sm star-table__editor"
+                            [type]="column.editor === 'number' ? 'number' : 'text'"
+                            [attr.aria-label]="text.editCell(column.header)"
+                            [value]="editText(row, column)"
+                            (blur)="commitEdit(row, column, $any($event.target).value)"
+                            (keydown.enter)="commitEdit(row, column, $any($event.target).value)"
+                            (keydown.escape)="cancelEdit($event)"
+                          />
+                        }
+                      } @else if (isEditable(row, column)) {
+                        <button
+                          type="button"
+                          class="star-table__edit"
+                          [attr.data-edit]="editKey(row, column)"
+                          (click)="startEdit(row, column)"
+                        >
+                          <!-- The name is the action and the visible value (WCAG 2.5.3). -->
+                          <span class="star-sr-only">{{ text.editCell(column.header) }}: </span>
+                          <span class="star-table__edit-value">
+                            <ng-container
+                              *ngTemplateOutlet="
+                                cell;
+                                context: { $implicit: row, column, index: i }
+                              "
+                            />
+                          </span>
+                          <i class="ph-bold ph-pencil-simple" aria-hidden="true"></i>
+                        </button>
+                      } @else {
+                        <ng-container
+                          *ngTemplateOutlet="cell; context: { $implicit: row, column, index: i }"
+                        />
+                      }
+                    </td>
+                  }
+                </tr>
+                @if (expansionTemplate(); as detail) {
+                  @if (isExpanded(row) && !isRowCollapsed(row)) {
+                    <tr
+                      class="star-table__expansion"
+                      [id]="detailId(i)"
+                      [attr.aria-rowindex]="entry.aria === null ? null : entry.aria + 1"
+                      [attr.data-vi]="entry.item"
+                    >
+                      <td [attr.colspan]="colspan()">
+                        <ng-container
+                          *ngTemplateOutlet="detail; context: { $implicit: row, index: i }"
+                        />
+                      </td>
+                    </tr>
+                  }
+                }
+              }
+            } @empty {
+              <tr>
+                <td class="star-table__empty" [attr.colspan]="colspan()">
+                  <i class="ph-bold ph-tray" aria-hidden="true"></i>
+                  {{ emptyMessage() ?? text.noData }}
+                </td>
+              </tr>
+            }
+          }
+        </tbody>
+        @if (hasFooter()) {
+          <tfoot>
+            <tr
+              class="star-table__footer"
+              [attr.aria-rowindex]="virtualScroll() ? ariaRowCount() : null"
+            >
+              @if (reorderableRows()) {
+                <td class="star-table__reorder"></td>
+              }
+              @if (expandable()) {
+                <td class="star-table__expander"></td>
+              }
+              @if (selectionMode()) {
+                <td class="star-table__select"></td>
+              }
+              @for (column of visibleColumns(); track column.field) {
+                <td
+                  [class]="'star-table__cell--' + (column.align ?? 'start')"
+                  [attr.data-label]="footerText(column) ? column.header : null"
+                >
+                  {{ footerText(column) }}
+                </td>
+              }
+            </tr>
+          </tfoot>
+        }
+      </table>
+    </div>
+    <ng-template #cell let-row let-column="column" let-i="index">
+      @if (cellTemplate(column.field); as custom) {
+        <ng-container
+          *ngTemplateOutlet="
+            custom;
+            context: { $implicit: row, value: cellValue(row, column), index: i }
+          "
+        />
+      } @else {
+        {{ cellText(row, column) }}
+      }
+    </ng-template>
+    @if (paginator()) {
+      <star-paginator
+        [ariaLabel]="ariaLabel() ? text.pagination + ': ' + ariaLabel() : null"
+        [totalRecords]="total()"
+        [(first)]="first"
+        [(rows)]="rows"
+        [rowsPerPageOptions]="rowsPerPageOptions()"
+        (pageChange)="emitLazy()"
+      />
+    }
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}],
+		columns: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "columns",
+				required: true
+			}]
+		}],
+		dataKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dataKey",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		emptyMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyMessage",
+				required: false
+			}]
+		}],
+		striped: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "striped",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		stickyHeader: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stickyHeader",
+				required: false
+			}]
+		}],
+		scrollHeight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "scrollHeight",
+				required: false
+			}]
+		}],
+		responsiveLayout: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "responsiveLayout",
+				required: false
+			}]
+		}],
+		virtualScroll: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "virtualScroll",
+				required: false
+			}]
+		}],
+		virtualRowHeight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "virtualRowHeight",
+				required: false
+			}]
+		}],
+		virtualRowHeights: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "virtualRowHeights",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		paginator: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "paginator",
+				required: false
+			}]
+		}],
+		first: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "first",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["firstChange"]
+		}],
+		rows: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rows",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["rowsChange"]
+		}],
+		rowsPerPageOptions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rowsPerPageOptions",
+				required: false
+			}]
+		}],
+		sortField: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sortField",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["sortFieldChange"]
+		}],
+		sortOrder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sortOrder",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["sortOrderChange"]
+		}],
+		globalFilter: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "globalFilter",
+				required: false
+			}]
+		}],
+		filters: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filters",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["filtersChange"]
+		}],
+		lazy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "lazy",
+				required: false
+			}]
+		}],
+		totalRecords: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "totalRecords",
+				required: false
+			}]
+		}],
+		selectionMode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectionMode",
+				required: false
+			}]
+		}],
+		selection: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selection",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["selectionChange"]
+		}],
+		expandedKeys: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "expandedKeys",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["expandedKeysChange"]
+		}],
+		rowExpandMode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rowExpandMode",
+				required: false
+			}]
+		}],
+		columnToggle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "columnToggle",
+				required: false
+			}]
+		}],
+		reorderableColumns: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "reorderableColumns",
+				required: false
+			}]
+		}],
+		resizableColumns: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "resizableColumns",
+				required: false
+			}]
+		}],
+		columnOrder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "columnOrder",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["columnOrderChange"]
+		}],
+		hiddenColumns: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hiddenColumns",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["hiddenColumnsChange"]
+		}],
+		columnWidths: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "columnWidths",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["columnWidthsChange"]
+		}],
+		multiSort: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "multiSort",
+				required: false
+			}]
+		}],
+		sortMeta: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sortMeta",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["sortMetaChange"]
+		}],
+		groupBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "groupBy",
+				required: false
+			}]
+		}],
+		collapsedGroups: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapsedGroups",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["collapsedGroupsChange"]
+		}],
+		reorderableRows: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "reorderableRows",
+				required: false
+			}]
+		}],
+		stateKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stateKey",
+				required: false
+			}]
+		}],
+		stateStorage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stateStorage",
+				required: false
+			}]
+		}],
+		rowClick: [{
+			type: i0.Output,
+			args: ["rowClick"]
+		}],
+		rowReorder: [{
+			type: i0.Output,
+			args: ["rowReorder"]
+		}],
+		cellEdit: [{
+			type: i0.Output,
+			args: ["cellEdit"]
+		}],
+		lazyLoad: [{
+			type: i0.Output,
+			args: ["lazyLoad"]
+		}],
+		cellTemplates: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => StarCellTemplate), { isSignal: true }]
+		}],
+		expansion: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => StarRowExpansionTemplate), { isSignal: true }]
+		}],
+		scroller: [{
+			type: i0.ViewChild,
+			args: ["scroller", { isSignal: true }]
+		}],
+		body: [{
+			type: i0.ViewChild,
+			args: ["body", { isSignal: true }]
+		}]
+	}
+});
+export { PRINT_FIT_STEPS, StarCellTemplate, StarRowExpansionTemplate, StarTable, buildPrintDocument, buildXlsx, fitPrintDocument, printFitStyle };
+
+//# sourceMappingURL=star-ng-ui-table.mjs.map