@gravionlabs/helix-ui 22.2.6 → 22.2.7

package/fesm2022/gravionlabs-helix-ui.mjs

@@ -2,7 +2,7 @@ import * as i1 from "@angular/cdk/accordion";
 import { CdkAccordion, CdkAccordionItem } from "@angular/cdk/accordion";
 import { DOCUMENT, NgComponentOutlet, NgStyle, NgTemplateOutlet, isPlatformBrowser } from "@angular/common";
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, Injectable, InjectionToken, Injector, NgZone, PLATFORM_ID, TemplateRef, afterEveryRender, afterNextRender, booleanAttribute, computed, contentChild, contentChildren, effect, forwardRef, inject, input, makeEnvironmentProviders, model, numberAttribute, output, provideEnvironmentInitializer, signal, untracked, viewChild } from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, Injectable, InjectionToken, Injector, PLATFORM_ID, TemplateRef, afterEveryRender, afterNextRender, booleanAttribute, computed, contentChild, contentChildren, effect, forwardRef, inject, input, isDevMode, makeEnvironmentProviders, model, numberAttribute, output, provideEnvironmentInitializer, signal, untracked, viewChild } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { CdkConnectedOverlay, CdkOverlayOrigin, Overlay } from "@angular/cdk/overlay";
 import { NG_VALUE_ACCESSOR, NgControl } from "@angular/forms";
@@ -2614,446 +2614,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-const HX_CHART_LOADER = new InjectionToken("HX_CHART_LOADER", {
-	providedIn: "root",
-	factory: () => () => import("chart.js/auto")
-});
-const PALETTE = [
-	"--h-primary-color",
-	"--h-orange-500",
-	"--h-green-500",
-	"--h-purple-500",
-	"--h-sky-500",
-	"--h-red-500",
-	"--h-yellow-500",
-	"--h-teal-500"
-];
-const isObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
-function merge(defaults, overrides) {
-	const out = { ...defaults };
-	for (const [key, value] of Object.entries(overrides)) {
-		const base = out[key];
-		out[key] = isObject(base) && isObject(value) ? merge(base, value) : value;
-	}
-	return out;
-}
-var HxChart = class HxChart {
-	#host = inject(ElementRef).nativeElement;
-	#zone = inject(NgZone);
-	#loader = inject(HX_CHART_LOADER);
-	#platform = inject(PLATFORM_ID);
-	canvas = viewChild.required("canvas", ...ngDevMode ? [{ debugName: "canvas" }] : 	/* istanbul ignore next */ []);
-	type = input("bar", ...ngDevMode ? [{ debugName: "type" }] : 	/* istanbul ignore next */ []);
-	data = input({}, ...ngDevMode ? [{ debugName: "data" }] : 	/* istanbul ignore next */ []);
-	options = input({}, ...ngDevMode ? [{ debugName: "options" }] : 	/* istanbul ignore next */ []);
-	plugins = input([], ...ngDevMode ? [{ debugName: "plugins" }] : 	/* istanbul ignore next */ []);
-	width = input(...ngDevMode ? [void 0, { debugName: "width" }] : 	/* istanbul ignore next */ []);
-	height = input(...ngDevMode ? [void 0, { debugName: "height" }] : 	/* istanbul ignore next */ []);
-	responsive = input(true, {
-		...ngDevMode ? { debugName: "responsive" } : 		/* istanbul ignore next */ {},
-		transform: (v) => v !== false && v !== "false"
-	});
-	ariaLabel = input(...ngDevMode ? [void 0, { debugName: "ariaLabel" }] : 	/* istanbul ignore next */ []);
-	ariaLabelledBy = input(...ngDevMode ? [void 0, { debugName: "ariaLabelledBy" }] : 	/* istanbul ignore next */ []);
-	themeDelay = input(50, {
-		...ngDevMode ? { debugName: "themeDelay" } : 		/* istanbul ignore next */ {},
-		transform: numberAttribute
-	});
-	dataSelect = output();
-	#chart;
-	#chartType;
-	#ready = false;
-	#loading = false;
-	#observer;
-	#timer;
-	constructor() {
-		afterNextRender(() => {
-			this.#ready = true;
-			this.#render();
-			this.#watchTheme();
-		});
-		effect(() => {
-			this.type();
-			this.data();
-			this.options();
-			this.plugins();
-			this.responsive();
-			this.width();
-			this.height();
-			untracked(() => {
-				if (this.#ready) this.#render();
-			});
-		});
-		inject(DestroyRef).onDestroy(() => {
-			clearTimeout(this.#timer);
-			this.#observer?.disconnect();
-			this.#chart?.destroy();
-			this.#chart = void 0;
-			this.#ready = false;
-		});
-	}
-	get chart() {
-		return this.#chart;
-	}
-	refresh() {
-		if (this.#chart) {
-			this.#apply(this.#chart);
-			this.#chart.update();
-		}
-	}
-	onClick(event) {
-		const chart = this.#chart;
-		if (!chart) return;
-		const element = chart.getElementsAtEventForMode(event, "nearest", { intersect: true }, false);
-		const dataset = chart.getElementsAtEventForMode(event, "dataset", { intersect: true }, false);
-		if (element?.[0] && dataset) this.dataSelect.emit({
-			originalEvent: event,
-			element: element[0],
-			dataset
-		});
-	}
-	async #render() {
-		if (!isPlatformBrowser(this.#platform)) return;
-		const type = this.type();
-		if (this.#chart && this.#chartType === type) {
-			this.#apply(this.#chart);
-			this.#chart.update();
-			return;
-		}
-		if (this.#loading) return;
-		this.#loading = true;
-		try {
-			const module = await this.#loader();
-			if (!this.#ready) return;
-			this.#chart?.destroy();
-			const Chart = module.default;
-			this.#zone.runOutsideAngular(() => {
-				this.#chart = new Chart(this.canvas().nativeElement, {
-					type: this.type(),
-					data: this.#themedData(),
-					options: this.#themedOptions(),
-					plugins: [...this.plugins()]
-				});
-			});
-			this.#chartType = this.type();
-		} catch (error) {
-			console.error("hx-chart: chart.js could not be loaded. Is the peer dependency \"chart.js\" installed?", error);
-			return;
-		} finally {
-			this.#loading = false;
-		}
-		if (this.#chart && this.#chartType !== this.type()) await this.#render();
-	}
-	#apply(chart) {
-		chart.data = this.#themedData();
-		chart.options = this.#themedOptions();
-	}
-	#token(name) {
-		return getComputedStyle(this.#host).getPropertyValue(name).trim();
-	}
-	#themedData() {
-		const data = this.data();
-		const datasets = data.datasets;
-		if (!Array.isArray(datasets)) return data;
-		const palette = PALETTE.map((name) => this.#token(name)).filter(Boolean);
-		if (palette.length === 0) return data;
-		const perPoint = [
-			"pie",
-			"doughnut",
-			"polarArea"
-		].includes(this.type());
-		return {
-			...data,
-			datasets: datasets.map((dataset, i) => {
-				if (!isObject(dataset)) return dataset;
-				const color = palette[i % palette.length];
-				const count = Array.isArray(dataset.data) ? dataset.data.length : 0;
-				const points = Array.from({ length: count }, (_, n) => palette[n % palette.length]);
-				const filled = this.type() === "line" || this.type() === "radar";
-				return {
-					...dataset,
-					backgroundColor: dataset.backgroundColor ?? (perPoint ? points : filled ? `color-mix(in srgb, ${color}, transparent 80%)` : color),
-					borderColor: dataset.borderColor ?? (perPoint ? this.#token("--h-content-background") : color)
-				};
-			})
-		};
-	}
-	#themedOptions() {
-		const text = this.#token("--h-text-color");
-		const muted = this.#token("--h-text-muted-color");
-		const grid = this.#token("--h-content-border-color");
-		const axis = {
-			ticks: { color: muted },
-			grid: { color: grid },
-			border: { color: grid }
-		};
-		const radial = {
-			ticks: {
-				color: muted,
-				backdropColor: "transparent"
-			},
-			grid: { color: grid },
-			angleLines: { color: grid },
-			pointLabels: { color: text }
-		};
-		const type = this.type();
-		const scales = type === "radar" || type === "polarArea" ? { r: radial } : type === "pie" || type === "doughnut" ? {} : {
-			x: axis,
-			y: axis
-		};
-		return merge({
-			responsive: this.responsive(),
-			maintainAspectRatio: !(this.height() || this.width()),
-			color: muted,
-			borderColor: grid,
-			plugins: { legend: { labels: { color: text } } },
-			scales
-		}, this.options());
-	}
-	#watchTheme() {
-		if (typeof MutationObserver === "undefined") return;
-		this.#observer = new MutationObserver(() => {
-			clearTimeout(this.#timer);
-			this.#timer = setTimeout(() => this.refresh(), this.themeDelay());
-		});
-		this.#observer.observe(document.documentElement, {
-			attributes: true,
-			attributeFilter: [
-				"class",
-				"style",
-				"data-theme"
-			]
-		});
-	}
-	static ɵfac = i0.ɵɵngDeclareFactory({
-		minVersion: "12.0.0",
-		version: "22.2.1",
-		ngImport: i0,
-		type: HxChart,
-		deps: [],
-		target: i0.ɵɵFactoryTarget.Component
-	});
-	static ɵcmp = i0.ɵɵngDeclareComponent({
-		minVersion: "17.2.0",
-		version: "22.2.1",
-		type: HxChart,
-		isStandalone: true,
-		selector: "hx-chart",
-		inputs: {
-			type: {
-				classPropertyName: "type",
-				publicName: "type",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			data: {
-				classPropertyName: "data",
-				publicName: "data",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			options: {
-				classPropertyName: "options",
-				publicName: "options",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			plugins: {
-				classPropertyName: "plugins",
-				publicName: "plugins",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			width: {
-				classPropertyName: "width",
-				publicName: "width",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			height: {
-				classPropertyName: "height",
-				publicName: "height",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			responsive: {
-				classPropertyName: "responsive",
-				publicName: "responsive",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			ariaLabel: {
-				classPropertyName: "ariaLabel",
-				publicName: "ariaLabel",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			ariaLabelledBy: {
-				classPropertyName: "ariaLabelledBy",
-				publicName: "ariaLabelledBy",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			themeDelay: {
-				classPropertyName: "themeDelay",
-				publicName: "themeDelay",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			}
-		},
-		outputs: { dataSelect: "dataSelect" },
-		host: { classAttribute: "hx-chart" },
-		viewQueries: [{
-			propertyName: "canvas",
-			first: true,
-			predicate: ["canvas"],
-			descendants: true,
-			isSignal: true
-		}],
-		ngImport: i0,
-		template: `
-    <div class="hx-chart-frame" [style.width]="width() ?? null" [style.height]="height() ?? null">
-      <canvas
-        #canvas
-        class="hx-chart-canvas"
-        role="img"
-        [attr.aria-label]="ariaLabel() || null"
-        [attr.aria-labelledby]="ariaLabelledBy() || null"
-        (click)="onClick($event)"
-      ><ng-content select="[hxChartFallback]" /></canvas>
-    </div>
-  `,
-		isInline: true,
-		changeDetection: i0.ChangeDetectionStrategy.OnPush
-	});
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.1",
-	ngImport: i0,
-	type: HxChart,
-	decorators: [{
-		type: Component,
-		args: [{
-			selector: "hx-chart",
-			changeDetection: ChangeDetectionStrategy.OnPush,
-			host: { class: "hx-chart" },
-			template: `
-    <div class="hx-chart-frame" [style.width]="width() ?? null" [style.height]="height() ?? null">
-      <canvas
-        #canvas
-        class="hx-chart-canvas"
-        role="img"
-        [attr.aria-label]="ariaLabel() || null"
-        [attr.aria-labelledby]="ariaLabelledBy() || null"
-        (click)="onClick($event)"
-      ><ng-content select="[hxChartFallback]" /></canvas>
-    </div>
-  `
-		}]
-	}],
-	ctorParameters: () => [],
-	propDecorators: {
-		canvas: [{
-			type: i0.ViewChild,
-			args: ["canvas", { isSignal: true }]
-		}],
-		type: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "type",
-				required: false
-			}]
-		}],
-		data: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "data",
-				required: false
-			}]
-		}],
-		options: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "options",
-				required: false
-			}]
-		}],
-		plugins: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "plugins",
-				required: false
-			}]
-		}],
-		width: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "width",
-				required: false
-			}]
-		}],
-		height: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "height",
-				required: false
-			}]
-		}],
-		responsive: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "responsive",
-				required: false
-			}]
-		}],
-		ariaLabel: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "ariaLabel",
-				required: false
-			}]
-		}],
-		ariaLabelledBy: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "ariaLabelledBy",
-				required: false
-			}]
-		}],
-		themeDelay: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "themeDelay",
-				required: false
-			}]
-		}],
-		dataSelect: [{
-			type: i0.Output,
-			args: ["dataSelect"]
-		}]
-	}
-});
 var HxCheckbox = class HxCheckbox {
 	size = input("medium", ...ngDevMode ? [{ debugName: "size" }] : 	/* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
@@ -5607,9 +5167,14 @@ var HxPaginator = class HxPaginator {
 	lastPageLabel = input("Last page", ...ngDevMode ? [{ debugName: "lastPageLabel" }] : 	/* istanbul ignore next */ []);
 	pageLabelTemplate = input("Page {page}", ...ngDevMode ? [{ debugName: "pageLabelTemplate" }] : 	/* istanbul ignore next */ []);
 	rowsPerPageLabel = input("Rows per page", ...ngDevMode ? [{ debugName: "rowsPerPageLabel" }] : 	/* istanbul ignore next */ []);
+	allLabel = input("All", ...ngDevMode ? [{ debugName: "allLabel" }] : 	/* istanbul ignore next */ []);
+	showAll = model(false, ...ngDevMode ? [{ debugName: "showAll" }] : 	/* istanbul ignore next */ []);
+	allSelected = computed(() => this.showAll() && !!this.rowsPerPageOptions()?.includes("all"), ...ngDevMode ? [{ debugName: "allSelected" }] : 	/* istanbul ignore next */ []);
+	perPage = computed(() => this.allSelected() ? Math.max(1, this.totalRecords()) : this.rows(), ...ngDevMode ? [{ debugName: "perPage" }] : 	/* istanbul ignore next */ []);
+	rowsValue = computed(() => this.allSelected() ? "all" : this.rows(), ...ngDevMode ? [{ debugName: "rowsValue" }] : 	/* istanbul ignore next */ []);
 	pageChange = output();
-	pageCount = computed(() => Math.max(1, Math.ceil(this.totalRecords() / Math.max(1, this.rows()))), ...ngDevMode ? [{ debugName: "pageCount" }] : 	/* istanbul ignore next */ []);
-	page = computed(() => Math.min(this.pageCount() - 1, Math.floor(this.first() / Math.max(1, this.rows()))), ...ngDevMode ? [{ debugName: "page" }] : 	/* istanbul ignore next */ []);
+	pageCount = computed(() => Math.max(1, Math.ceil(this.totalRecords() / Math.max(1, this.perPage()))), ...ngDevMode ? [{ debugName: "pageCount" }] : 	/* istanbul ignore next */ []);
+	page = computed(() => Math.min(this.pageCount() - 1, Math.floor(this.first() / Math.max(1, this.perPage()))), ...ngDevMode ? [{ debugName: "page" }] : 	/* istanbul ignore next */ []);
 	isFirst = computed(() => this.page() === 0, ...ngDevMode ? [{ debugName: "isFirst" }] : 	/* istanbul ignore next */ []);
 	isLast = computed(() => this.page() >= this.pageCount() - 1, ...ngDevMode ? [{ debugName: "isLast" }] : 	/* istanbul ignore next */ []);
 	links = computed(() => {
@@ -5620,13 +5185,13 @@ var HxPaginator = class HxPaginator {
 		return Array.from({ length: size }, (_, i) => start + i);
 	}, ...ngDevMode ? [{ debugName: "links" }] : 	/* istanbul ignore next */ []);
 	rowsOptions = computed(() => (this.rowsPerPageOptions() ?? []).map((n) => ({
-		label: String(n),
+		label: n === "all" ? this.allLabel() : String(n),
 		value: n
 	})), ...ngDevMode ? [{ debugName: "rowsOptions" }] : 	/* istanbul ignore next */ []);
 	report = computed(() => {
 		const total = this.totalRecords();
-		const first = total === 0 ? 0 : this.page() * this.rows() + 1;
-		const last = Math.min(total, (this.page() + 1) * this.rows());
+		const first = total === 0 ? 0 : this.page() * this.perPage() + 1;
+		const last = Math.min(total, (this.page() + 1) * this.perPage());
 		return this.currentPageReportTemplate().replace("{first}", String(first)).replace("{last}", String(last)).replace("{totalRecords}", String(total)).replace("{page}", String(this.page() + 1)).replace("{pageCount}", String(this.pageCount()));
 	}, ...ngDevMode ? [{ debugName: "report" }] : 	/* istanbul ignore next */ []);
 	pageLabel(page) {
@@ -5634,13 +5199,21 @@ var HxPaginator = class HxPaginator {
 	}
 	goTo(page) {
 		const target = Math.min(this.pageCount() - 1, Math.max(0, page));
-		if (target === this.page() && this.first() === target * this.rows()) return;
-		this.first.set(target * this.rows());
+		if (target === this.page() && this.first() === target * this.perPage()) return;
+		this.first.set(target * this.perPage());
 		this.emit();
 	}
 	setRows(value) {
+		if (value === "all") {
+			if (this.allSelected()) return;
+			this.showAll.set(true);
+			this.first.set(0);
+			this.emit();
+			return;
+		}
 		const rows = Number(value);
-		if (!rows || rows === this.rows()) return;
+		if (!rows || rows === this.rows() && !this.allSelected()) return;
+		this.showAll.set(false);
 		this.rows.set(rows);
 		this.first.set(Math.floor(this.first() / rows) * rows);
 		this.emit();
@@ -5648,9 +5221,10 @@ var HxPaginator = class HxPaginator {
 	emit() {
 		this.pageChange.emit({
 			first: this.first(),
-			rows: this.rows(),
+			rows: this.perPage(),
 			page: this.page(),
-			pageCount: this.pageCount()
+			pageCount: this.pageCount(),
+			...this.allSelected() ? { all: true } : {}
 		});
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
@@ -5772,16 +5346,31 @@ var HxPaginator = class HxPaginator {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			allLabel: {
+				classPropertyName: "allLabel",
+				publicName: "allLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showAll: {
+				classPropertyName: "showAll",
+				publicName: "showAll",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		outputs: {
 			rows: "rowsChange",
 			first: "firstChange",
+			showAll: "showAllChange",
 			pageChange: "pageChange"
 		},
 		host: { classAttribute: "hx-paginator" },
 		ngImport: i0,
-		template: "<nav class=\"hx-paginator-nav\" [attr.aria-label]=\"ariaLabel()\">\n  @if (showCurrentPageReport()) {\n    <span class=\"hx-paginator-report\" aria-live=\"polite\">{{ report() }}</span>\n  }\n  <div class=\"hx-paginator-pages\">\n    @if (showFirstLastButtons()) {\n      <button type=\"button\" class=\"hx-paginator-button hx-paginator-first\" [disabled]=\"isFirst()\" [attr.aria-label]=\"firstPageLabel()\" [title]=\"firstPageLabel()\" (click)=\"goTo(0)\"></button>\n    }\n    <button type=\"button\" class=\"hx-paginator-button hx-paginator-prev\" [disabled]=\"isFirst()\" [attr.aria-label]=\"previousPageLabel()\" [title]=\"previousPageLabel()\" (click)=\"goTo(page() - 1)\"></button>\n    @for (p of links(); track p) {\n      <button type=\"button\" class=\"hx-paginator-button hx-paginator-page\" [class.hx-paginator-page-current]=\"p === page()\" [attr.aria-label]=\"pageLabel(p)\" [attr.aria-current]=\"p === page() ? 'page' : null\" (click)=\"goTo(p)\">{{ p + 1 }}</button>\n    }\n    <button type=\"button\" class=\"hx-paginator-button hx-paginator-next\" [disabled]=\"isLast()\" [attr.aria-label]=\"nextPageLabel()\" [title]=\"nextPageLabel()\" (click)=\"goTo(page() + 1)\"></button>\n    @if (showFirstLastButtons()) {\n      <button type=\"button\" class=\"hx-paginator-button hx-paginator-last\" [disabled]=\"isLast()\" [attr.aria-label]=\"lastPageLabel()\" [title]=\"lastPageLabel()\" (click)=\"goTo(pageCount() - 1)\"></button>\n    }\n  </div>\n  @if (rowsOptions().length) {\n    <hx-select class=\"hx-paginator-rows\" [options]=\"rowsOptions()\" [value]=\"rows()\" (valueChange)=\"setRows($event)\" [ariaLabel]=\"rowsPerPageLabel()\" />\n  }\n</nav>\n",
+		template: "<nav class=\"hx-paginator-nav\" [attr.aria-label]=\"ariaLabel()\">\n  @if (showCurrentPageReport()) {\n    <span class=\"hx-paginator-report\" aria-live=\"polite\">{{ report() }}</span>\n  }\n  <div class=\"hx-paginator-pages\">\n    @if (showFirstLastButtons()) {\n      <button type=\"button\" class=\"hx-paginator-button hx-paginator-first\" [disabled]=\"isFirst()\" [attr.aria-label]=\"firstPageLabel()\" [title]=\"firstPageLabel()\" (click)=\"goTo(0)\"></button>\n    }\n    <button type=\"button\" class=\"hx-paginator-button hx-paginator-prev\" [disabled]=\"isFirst()\" [attr.aria-label]=\"previousPageLabel()\" [title]=\"previousPageLabel()\" (click)=\"goTo(page() - 1)\"></button>\n    @for (p of links(); track p) {\n      <button type=\"button\" class=\"hx-paginator-button hx-paginator-page\" [class.hx-paginator-page-current]=\"p === page()\" [attr.aria-label]=\"pageLabel(p)\" [attr.aria-current]=\"p === page() ? 'page' : null\" (click)=\"goTo(p)\">{{ p + 1 }}</button>\n    }\n    <button type=\"button\" class=\"hx-paginator-button hx-paginator-next\" [disabled]=\"isLast()\" [attr.aria-label]=\"nextPageLabel()\" [title]=\"nextPageLabel()\" (click)=\"goTo(page() + 1)\"></button>\n    @if (showFirstLastButtons()) {\n      <button type=\"button\" class=\"hx-paginator-button hx-paginator-last\" [disabled]=\"isLast()\" [attr.aria-label]=\"lastPageLabel()\" [title]=\"lastPageLabel()\" (click)=\"goTo(pageCount() - 1)\"></button>\n    }\n  </div>\n  @if (rowsOptions().length) {\n    <hx-select class=\"hx-paginator-rows\" [options]=\"rowsOptions()\" [value]=\"rowsValue()\" (valueChange)=\"setRows($event)\" [ariaLabel]=\"rowsPerPageLabel()\" />\n  }\n</nav>\n",
 		dependencies: [{
 			kind: "component",
 			type: HxSelect,
@@ -5826,7 +5415,7 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [HxSelect],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: { class: "hx-paginator" },
-			template: "<nav class=\"hx-paginator-nav\" [attr.aria-label]=\"ariaLabel()\">\n  @if (showCurrentPageReport()) {\n    <span class=\"hx-paginator-report\" aria-live=\"polite\">{{ report() }}</span>\n  }\n  <div class=\"hx-paginator-pages\">\n    @if (showFirstLastButtons()) {\n      <button type=\"button\" class=\"hx-paginator-button hx-paginator-first\" [disabled]=\"isFirst()\" [attr.aria-label]=\"firstPageLabel()\" [title]=\"firstPageLabel()\" (click)=\"goTo(0)\"></button>\n    }\n    <button type=\"button\" class=\"hx-paginator-button hx-paginator-prev\" [disabled]=\"isFirst()\" [attr.aria-label]=\"previousPageLabel()\" [title]=\"previousPageLabel()\" (click)=\"goTo(page() - 1)\"></button>\n    @for (p of links(); track p) {\n      <button type=\"button\" class=\"hx-paginator-button hx-paginator-page\" [class.hx-paginator-page-current]=\"p === page()\" [attr.aria-label]=\"pageLabel(p)\" [attr.aria-current]=\"p === page() ? 'page' : null\" (click)=\"goTo(p)\">{{ p + 1 }}</button>\n    }\n    <button type=\"button\" class=\"hx-paginator-button hx-paginator-next\" [disabled]=\"isLast()\" [attr.aria-label]=\"nextPageLabel()\" [title]=\"nextPageLabel()\" (click)=\"goTo(page() + 1)\"></button>\n    @if (showFirstLastButtons()) {\n      <button type=\"button\" class=\"hx-paginator-button hx-paginator-last\" [disabled]=\"isLast()\" [attr.aria-label]=\"lastPageLabel()\" [title]=\"lastPageLabel()\" (click)=\"goTo(pageCount() - 1)\"></button>\n    }\n  </div>\n  @if (rowsOptions().length) {\n    <hx-select class=\"hx-paginator-rows\" [options]=\"rowsOptions()\" [value]=\"rows()\" (valueChange)=\"setRows($event)\" [ariaLabel]=\"rowsPerPageLabel()\" />\n  }\n</nav>\n"
+			template: "<nav class=\"hx-paginator-nav\" [attr.aria-label]=\"ariaLabel()\">\n  @if (showCurrentPageReport()) {\n    <span class=\"hx-paginator-report\" aria-live=\"polite\">{{ report() }}</span>\n  }\n  <div class=\"hx-paginator-pages\">\n    @if (showFirstLastButtons()) {\n      <button type=\"button\" class=\"hx-paginator-button hx-paginator-first\" [disabled]=\"isFirst()\" [attr.aria-label]=\"firstPageLabel()\" [title]=\"firstPageLabel()\" (click)=\"goTo(0)\"></button>\n    }\n    <button type=\"button\" class=\"hx-paginator-button hx-paginator-prev\" [disabled]=\"isFirst()\" [attr.aria-label]=\"previousPageLabel()\" [title]=\"previousPageLabel()\" (click)=\"goTo(page() - 1)\"></button>\n    @for (p of links(); track p) {\n      <button type=\"button\" class=\"hx-paginator-button hx-paginator-page\" [class.hx-paginator-page-current]=\"p === page()\" [attr.aria-label]=\"pageLabel(p)\" [attr.aria-current]=\"p === page() ? 'page' : null\" (click)=\"goTo(p)\">{{ p + 1 }}</button>\n    }\n    <button type=\"button\" class=\"hx-paginator-button hx-paginator-next\" [disabled]=\"isLast()\" [attr.aria-label]=\"nextPageLabel()\" [title]=\"nextPageLabel()\" (click)=\"goTo(page() + 1)\"></button>\n    @if (showFirstLastButtons()) {\n      <button type=\"button\" class=\"hx-paginator-button hx-paginator-last\" [disabled]=\"isLast()\" [attr.aria-label]=\"lastPageLabel()\" [title]=\"lastPageLabel()\" (click)=\"goTo(pageCount() - 1)\"></button>\n    }\n  </div>\n  @if (rowsOptions().length) {\n    <hx-select class=\"hx-paginator-rows\" [options]=\"rowsOptions()\" [value]=\"rowsValue()\" (valueChange)=\"setRows($event)\" [ariaLabel]=\"rowsPerPageLabel()\" />\n  }\n</nav>\n"
 		}]
 	}],
 	propDecorators: {
@@ -5956,6 +5545,25 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		allLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "allLabel",
+				required: false
+			}]
+		}],
+		showAll: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showAll",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["showAllChange"]
+		}],
 		pageChange: [{
 			type: i0.Output,
 			args: ["pageChange"]
@@ -6298,6 +5906,54 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}] }
 });
+var HxColumnHeader = class HxColumnHeader {
+	field = input.required({
+		...ngDevMode ? { debugName: "field" } : 		/* istanbul ignore next */ {},
+		alias: "hxColumnHeader"
+	});
+	template = inject(TemplateRef);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: HxColumnHeader,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: HxColumnHeader,
+		isStandalone: true,
+		selector: "ng-template[hxColumnHeader]",
+		inputs: { field: {
+			classPropertyName: "field",
+			publicName: "hxColumnHeader",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: HxColumnHeader,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[hxColumnHeader]" }]
+	}],
+	propDecorators: { field: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "hxColumnHeader",
+			required: true
+		}]
+	}] }
+});
 var HxTableHeader = class HxTableHeader {
 	template = inject(TemplateRef);
 	static ɵfac = i0.ɵɵngDeclareFactory({
@@ -6490,6 +6146,9 @@ var HxDataTable = class HxDataTable {
 		transform: booleanAttribute
 	});
 	emptyMessage = input("No records found", ...ngDevMode ? [{ debugName: "emptyMessage" }] : 	/* istanbul ignore next */ []);
+	rowClass = input(...ngDevMode ? [void 0, { debugName: "rowClass" }] : 	/* istanbul ignore next */ []);
+	emptyValue = input("", ...ngDevMode ? [{ debugName: "emptyValue" }] : 	/* istanbul ignore next */ []);
+	allLabel = input("All", ...ngDevMode ? [{ debugName: "allLabel" }] : 	/* istanbul ignore next */ []);
 	loading = input(false, {
 		...ngDevMode ? { debugName: "loading" } : 		/* istanbul ignore next */ {},
 		transform: booleanAttribute
@@ -6506,6 +6165,7 @@ var HxDataTable = class HxDataTable {
 	sortOrder = model(1, ...ngDevMode ? [{ debugName: "sortOrder" }] : 	/* istanbul ignore next */ []);
 	multiSortMeta = model([], ...ngDevMode ? [{ debugName: "multiSortMeta" }] : 	/* istanbul ignore next */ []);
 	sortFunction = input(...ngDevMode ? [void 0, { debugName: "sortFunction" }] : 	/* istanbul ignore next */ []);
+	sortFirstOrder = input("asc", ...ngDevMode ? [{ debugName: "sortFirstOrder" }] : 	/* istanbul ignore next */ []);
 	paginator = input(false, {
 		...ngDevMode ? { debugName: "paginator" } : 		/* istanbul ignore next */ {},
 		transform: booleanAttribute
@@ -6544,7 +6204,14 @@ var HxDataTable = class HxDataTable {
 	collapseLabel = input("Collapse row", ...ngDevMode ? [{ debugName: "collapseLabel" }] : 	/* istanbul ignore next */ []);
 	announcement = signal("", ...ngDevMode ? [{ debugName: "announcement" }] : 	/* istanbul ignore next */ []);
 	globalText = signal("", ...ngDevMode ? [{ debugName: "globalText" }] : 	/* istanbul ignore next */ []);
+	showAll = signal(false, ...ngDevMode ? [{ debugName: "showAll" }] : 	/* istanbul ignore next */ []);
+	resetAll = effect(() => {
+		this.rows();
+		untracked(() => this.showAll.set(false));
+	}, ...ngDevMode ? [{ debugName: "resetAll" }] : 	/* istanbul ignore next */ []);
+	allActive = computed(() => this.showAll() && !!this.rowsPerPageOptions()?.includes("all"), ...ngDevMode ? [{ debugName: "allActive" }] : 	/* istanbul ignore next */ []);
 	cellTemplates = contentChildren(HxCell, ...ngDevMode ? [{ debugName: "cellTemplates" }] : 	/* istanbul ignore next */ []);
+	columnHeaderTemplates = contentChildren(HxColumnHeader, ...ngDevMode ? [{ debugName: "columnHeaderTemplates" }] : 	/* istanbul ignore next */ []);
 	headerTemplate = contentChild(HxTableHeader, ...ngDevMode ? [{ debugName: "headerTemplate" }] : 	/* istanbul ignore next */ []);
 	bodyTemplate = contentChild(HxTableBody, ...ngDevMode ? [{ debugName: "bodyTemplate" }] : 	/* istanbul ignore next */ []);
 	footerTemplate = contentChild(HxTableFooter, ...ngDevMode ? [{ debugName: "footerTemplate" }] : 	/* istanbul ignore next */ []);
@@ -6582,10 +6249,23 @@ var HxDataTable = class HxDataTable {
 	total = computed(() => this.lazy() ? this.totalRecords() ?? this.value().length : this.sorted().length, ...ngDevMode ? [{ debugName: "total" }] : 	/* istanbul ignore next */ []);
 	visibleRows = computed(() => {
 		const rows = this.sorted();
-		if (!this.paginator() || this.lazy()) return rows;
+		if (!this.paginator() || this.lazy() || this.allActive()) return rows;
 		return rows.slice(this.first(), this.first() + this.rows());
 	}, ...ngDevMode ? [{ debugName: "visibleRows" }] : 	/* istanbul ignore next */ []);
 	cells = computed(() => new Map(this.cellTemplates().map((cell) => [cell.field(), cell.template])), ...ngDevMode ? [{ debugName: "cells" }] : 	/* istanbul ignore next */ []);
+	warnedFields = /* @__PURE__ */ new Set();
+	columnHeaders = computed(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const header of this.columnHeaderTemplates()) {
+			const field = header.field();
+			if (map.has(field) && isDevMode() && !this.warnedFields.has(field)) {
+				this.warnedFields.add(field);
+				console.warn(`hx-data-table: more than one hxColumnHeader template for "${field}"; the last one wins.`);
+			}
+			map.set(field, header.template);
+		}
+		return map;
+	}, ...ngDevMode ? [{ debugName: "columnHeaders" }] : 	/* istanbul ignore next */ []);
 	scrolls = computed(() => this.scrollable() || !!this.scrollHeight(), ...ngDevMode ? [{ debugName: "scrolls" }] : 	/* istanbul ignore next */ []);
 	hasCaption = computed(() => !!this.caption() || !!this.captionTemplate() || !!this.ariaLabel(), ...ngDevMode ? [{ debugName: "hasCaption" }] : 	/* istanbul ignore next */ []);
 	captionHidden = computed(() => !this.caption() && !this.captionTemplate(), ...ngDevMode ? [{ debugName: "captionHidden" }] : 	/* istanbul ignore next */ []);
@@ -6682,7 +6362,8 @@ var HxDataTable = class HxDataTable {
 	}
 	sort(column) {
 		const order = this.orderOf(column);
-		const next = order === 0 ? 1 : order === 1 ? -1 : 0;
+		const firstOrder = (column.sortFirstOrder ?? this.sortFirstOrder()) === "desc" ? -1 : 1;
+		const next = order === 0 ? firstOrder : order === firstOrder ? -firstOrder : 0;
 		if (this.sortMode() === "multiple") {
 			const rest = this.multiSortMeta().filter((m) => m.field !== column.field);
 			this.multiSortMeta.set(next === 0 ? rest : order === 0 ? [...rest, {
@@ -6702,13 +6383,13 @@ var HxDataTable = class HxDataTable {
 	}
 	onPage(event) {
 		this.first.set(event.first);
-		this.rows.set(event.rows);
+		if (!event.all) this.rows.set(event.rows);
 		if (this.lazy()) this.emitLazy();
 	}
 	emitLazy() {
 		this.lazyLoad.emit({
 			first: this.first(),
-			rows: this.rows(),
+			rows: this.allActive() && this.total() > 0 ? this.total() : this.rows(),
 			sortField: this.sortMode() === "multiple" ? this.multiSortMeta()[0]?.field ?? null : this.sortField(),
 			sortOrder: this.sortMode() === "multiple" ? this.multiSortMeta()[0]?.order ?? 1 : this.sortOrder(),
 			multiSortMeta: this.sortMode() === "multiple" ? this.multiSortMeta() : this.sortMeta(),
@@ -6720,6 +6401,9 @@ var HxDataTable = class HxDataTable {
 		const key = this.dataKey();
 		return key ? resolveField(row, key) ?? index : index;
 	}
+	rowClassOf(row) {
+		return this.rowClass()?.(row);
+	}
 	valueOf(row, column) {
 		return resolveField(row, column.field);
 	}
@@ -6794,6 +6478,27 @@ var HxDataTable = class HxDataTable {
 				isRequired: false,
 				transformFunction: null
 			},
+			rowClass: {
+				classPropertyName: "rowClass",
+				publicName: "rowClass",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			emptyValue: {
+				classPropertyName: "emptyValue",
+				publicName: "emptyValue",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			allLabel: {
+				classPropertyName: "allLabel",
+				publicName: "allLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			loading: {
 				classPropertyName: "loading",
 				publicName: "loading",
@@ -6864,6 +6569,13 @@ var HxDataTable = class HxDataTable {
 				isRequired: false,
 				transformFunction: null
 			},
+			sortFirstOrder: {
+				classPropertyName: "sortFirstOrder",
+				publicName: "sortFirstOrder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			paginator: {
 				classPropertyName: "paginator",
 				publicName: "paginator",
@@ -7023,6 +6735,11 @@ var HxDataTable = class HxDataTable {
 				predicate: HxCell,
 				isSignal: true
 			},
+			{
+				propertyName: "columnHeaderTemplates",
+				predicate: HxColumnHeader,
+				isSignal: true
+			},
 			{
 				propertyName: "headerTemplate",
 				first: true,
@@ -7067,7 +6784,7 @@ var HxDataTable = class HxDataTable {
 			}
 		],
 		ngImport: i0,
-		template: "<div class=\"hx-data-table-frame\" [attr.aria-busy]=\"loading() ? 'true' : null\">\n  <div\n    class=\"hx-table-scroll hx-data-table-scroll\"\n    [class.hx-data-table-scrolls]=\"scrolls()\"\n    [style.max-height]=\"scrollHeight() ?? null\"\n    [attr.role]=\"scrolls() ? 'region' : null\"\n    [attr.aria-label]=\"scrolls() ? (ariaLabel() ?? caption() ?? null) : null\"\n    [attr.tabindex]=\"scrolls() ? 0 : null\"\n  >\n    <table\n      class=\"hx-table\"\n      [class.hx-table-sm]=\"size() === 'small'\"\n      [class.hx-table-lg]=\"size() === 'large'\"\n      [class.hx-table-striped]=\"stripedRows()\"\n      [class.hx-table-gridlines]=\"showGridlines()\"\n      [class.hx-table-hoverable]=\"hoverRows()\"\n      [class.hx-table-sticky]=\"!!scrollHeight()\"\n    >\n      @if (hasCaption()) {\n        <caption [class.hx-data-table-caption-hidden]=\"captionHidden()\">\n          @if (captionTemplate(); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n          } @else {\n            {{ caption() ?? ariaLabel() }}\n          }\n        </caption>\n      }\n      <thead>\n        <tr>\n          @if (expanderColumn()) {\n            <th scope=\"col\" class=\"hx-data-table-expander-cell\"><span class=\"hx-data-table-caption-hidden\">Row details</span></th>\n          }\n          @if (checkboxColumn()) {\n            <th scope=\"col\" class=\"hx-data-table-select-cell\">\n              <input type=\"checkbox\" hx-checkbox [attr.aria-label]=\"selectAllLabel()\" [checked]=\"allSelected()\" [indeterminate]=\"someSelected()\" (change)=\"toggleSelectAll($any($event.target).checked)\" />\n            </th>\n          }\n          @if (headerTemplate(); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: columns() }\" />\n          } @else {\n            @for (column of columns(); track column.field) {\n              <th\n                scope=\"col\"\n                [class]=\"'hx-data-table-align-' + (column.align ?? 'left')\"\n                [class.hx-data-table-sorted]=\"orderOf(column) !== 0\"\n                [style.width]=\"column.width ?? null\"\n                [attr.aria-sort]=\"ariaSort(column)\"\n              >\n                @if (column.sortable) {\n                  <button type=\"button\" class=\"hx-data-table-sort\" (click)=\"sort(column)\">\n                    <span>{{ column.header }}</span>\n                    <span class=\"hx-data-table-sort-icon\" [class.hx-data-table-sort-asc]=\"orderOf(column) === 1\" [class.hx-data-table-sort-desc]=\"orderOf(column) === -1\" aria-hidden=\"true\"></span>\n                    @if (sortRank(column); as rank) {\n                      <span class=\"hx-data-table-sort-rank\" aria-hidden=\"true\">{{ rank }}</span>\n                    }\n                  </button>\n                } @else {\n                  {{ column.header }}\n                }\n              </th>\n            }\n          }\n        </tr>\n        @if (filterRow()) {\n          <tr class=\"hx-data-table-filter-row\">\n            @if (expanderColumn()) { <th></th> }\n            @if (checkboxColumn()) { <th></th> }\n            @for (column of columns(); track column.field) {\n              <th>\n                @if (column.filter) {\n                  <input type=\"text\" hx-input size=\"small\" fluid [attr.aria-label]=\"filterLabel().replace('{header}', column.header)\" [value]=\"filters()[column.field] ?? ''\" (input)=\"setFilter(column, $any($event.target).value)\" />\n                }\n              </th>\n            }\n          </tr>\n        }\n      </thead>\n      <tbody>\n        @for (row of visibleRows(); track trackRow(row, $index); let i = $index) {\n          <tr\n            [class.hx-data-table-selectable]=\"selectable()\"\n            [attr.aria-selected]=\"selectionMode() ? (isSelected(row) ? 'true' : 'false') : null\"\n            [attr.tabindex]=\"selectable() ? 0 : null\"\n            (click)=\"selectRow(row, $event)\"\n            (keydown.enter)=\"onRowKey(row, $event)\"\n            (keydown.space)=\"onRowKey(row, $event)\"\n          >\n            @if (expanderColumn()) {\n              <td class=\"hx-data-table-expander-cell\">\n                <button type=\"button\" class=\"hx-data-table-expander\" [class.hx-data-table-expander-open]=\"isExpanded(row, i)\" [attr.aria-expanded]=\"isExpanded(row, i)\" [attr.aria-label]=\"isExpanded(row, i) ? collapseLabel() : expandLabel()\" (click)=\"toggleExpansion(row, i)\"></button>\n              </td>\n            }\n            @if (checkboxColumn()) {\n              <td class=\"hx-data-table-select-cell\">\n                <input type=\"checkbox\" hx-checkbox [attr.aria-label]=\"selectRowLabel().replace('{row}', '' + (first() + i + 1))\" [checked]=\"isSelected(row)\" (change)=\"toggleRowCheckbox(row, $any($event.target).checked)\" />\n              </td>\n            }\n            @if (bodyTemplate(); as tpl) {\n              <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: row, index: i, columns: columns() }\" />\n            } @else {\n              @for (column of columns(); track column.field) {\n                <td [class]=\"'hx-data-table-align-' + (column.align ?? 'left')\">\n                  @if (cells().get(column.field); as cell) {\n                    <ng-container [ngTemplateOutlet]=\"cell\" [ngTemplateOutletContext]=\"{ $implicit: row, value: valueOf(row, column), index: i }\" />\n                  } @else {\n                    {{ valueOf(row, column) }}\n                  }\n                </td>\n              }\n            }\n          </tr>\n          @if (expansionTemplate(); as tpl) {\n            @if (isExpanded(row, i)) {\n              <tr class=\"hx-data-table-expansion\">\n                <td [attr.colspan]=\"colspan()\">\n                  <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: row, index: i, columns: columns() }\" />\n                </td>\n              </tr>\n            }\n          }\n        } @empty {\n          <tr class=\"hx-data-table-empty\">\n            <td [attr.colspan]=\"colspan()\">\n              @if (emptyTemplate(); as tpl) {\n                <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n              } @else {\n                {{ emptyMessage() }}\n              }\n            </td>\n          </tr>\n        }\n      </tbody>\n      @if (footerTemplate(); as tpl) {\n        <tfoot>\n          <tr>\n            @if (expanderColumn()) { <td></td> }\n            @if (checkboxColumn()) { <td></td> }\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: columns() }\" />\n          </tr>\n        </tfoot>\n      }\n    </table>\n  </div>\n  <span class=\"hx-data-table-caption-hidden\" aria-live=\"polite\">{{ announcement() }}</span>\n  @if (loading()) {\n    <div class=\"hx-data-table-loading\" role=\"status\">\n      <hx-progress-spinner ariaLabel=\"Loading\" />\n    </div>\n  }\n  @if (paginator()) {\n    <hx-paginator\n      class=\"hx-data-table-paginator\"\n      [rows]=\"rows()\"\n      [first]=\"first()\"\n      [totalRecords]=\"total()\"\n      [rowsPerPageOptions]=\"rowsPerPageOptions()\"\n      [showCurrentPageReport]=\"showCurrentPageReport()\"\n      (pageChange)=\"onPage($event)\"\n    />\n  }\n</div>\n",
+		template: "<div class=\"hx-data-table-frame\" [attr.aria-busy]=\"loading() ? 'true' : null\">\n  <div\n    class=\"hx-table-scroll hx-data-table-scroll\"\n    [class.hx-data-table-scrolls]=\"scrolls()\"\n    [style.max-height]=\"scrollHeight() ?? null\"\n    [attr.role]=\"scrolls() ? 'region' : null\"\n    [attr.aria-label]=\"scrolls() ? (ariaLabel() ?? caption() ?? null) : null\"\n    [attr.tabindex]=\"scrolls() ? 0 : null\"\n  >\n    <table\n      class=\"hx-table\"\n      [class.hx-table-sm]=\"size() === 'small'\"\n      [class.hx-table-lg]=\"size() === 'large'\"\n      [class.hx-table-striped]=\"stripedRows()\"\n      [class.hx-table-gridlines]=\"showGridlines()\"\n      [class.hx-table-hoverable]=\"hoverRows()\"\n      [class.hx-table-sticky]=\"!!scrollHeight()\"\n    >\n      @if (hasCaption()) {\n        <caption [class.hx-data-table-caption-hidden]=\"captionHidden()\">\n          @if (captionTemplate(); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n          } @else {\n            {{ caption() ?? ariaLabel() }}\n          }\n        </caption>\n      }\n      <thead>\n        <tr>\n          @if (expanderColumn()) {\n            <th scope=\"col\" class=\"hx-data-table-expander-cell\"><span class=\"hx-data-table-caption-hidden\">Row details</span></th>\n          }\n          @if (checkboxColumn()) {\n            <th scope=\"col\" class=\"hx-data-table-select-cell\">\n              <input type=\"checkbox\" hx-checkbox [attr.aria-label]=\"selectAllLabel()\" [checked]=\"allSelected()\" [indeterminate]=\"someSelected()\" (change)=\"toggleSelectAll($any($event.target).checked)\" />\n            </th>\n          }\n          @if (headerTemplate(); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: columns() }\" />\n          } @else {\n            @for (column of columns(); track column.field) {\n              <th\n                scope=\"col\"\n                [class]=\"'hx-data-table-align-' + (column.align ?? 'left')\"\n                [class.hx-data-table-sorted]=\"orderOf(column) !== 0\"\n                [style.width]=\"column.width ?? null\"\n                [attr.aria-sort]=\"ariaSort(column)\"\n                [attr.title]=\"column.title ?? null\"\n              >\n                @if (columnHeaders().get(column.field); as extra) {\n                  <div class=\"hx-data-table-header-content\">\n                    <ng-container [ngTemplateOutlet]=\"label\" [ngTemplateOutletContext]=\"{ $implicit: column }\" />\n                    <ng-container [ngTemplateOutlet]=\"extra\" [ngTemplateOutletContext]=\"{ $implicit: column }\" />\n                  </div>\n                } @else {\n                  <ng-container [ngTemplateOutlet]=\"label\" [ngTemplateOutletContext]=\"{ $implicit: column }\" />\n                }\n              </th>\n            }\n          }\n        </tr>\n        @if (filterRow()) {\n          <tr class=\"hx-data-table-filter-row\">\n            @if (expanderColumn()) { <th></th> }\n            @if (checkboxColumn()) { <th></th> }\n            @for (column of columns(); track column.field) {\n              <th>\n                @if (column.filter) {\n                  <input type=\"text\" hx-input size=\"small\" fluid [attr.aria-label]=\"filterLabel().replace('{header}', column.header)\" [value]=\"filters()[column.field] ?? ''\" (input)=\"setFilter(column, $any($event.target).value)\" />\n                }\n              </th>\n            }\n          </tr>\n        }\n      </thead>\n      <tbody>\n        @for (row of visibleRows(); track trackRow(row, $index); let i = $index) {\n          <tr\n            [class]=\"rowClassOf(row)\"\n            [class.hx-data-table-selectable]=\"selectable()\"\n            [attr.aria-selected]=\"selectionMode() ? (isSelected(row) ? 'true' : 'false') : null\"\n            [attr.tabindex]=\"selectable() ? 0 : null\"\n            (click)=\"selectRow(row, $event)\"\n            (keydown.enter)=\"onRowKey(row, $event)\"\n            (keydown.space)=\"onRowKey(row, $event)\"\n          >\n            @if (expanderColumn()) {\n              <td class=\"hx-data-table-expander-cell\">\n                <button type=\"button\" class=\"hx-data-table-expander\" [class.hx-data-table-expander-open]=\"isExpanded(row, i)\" [attr.aria-expanded]=\"isExpanded(row, i)\" [attr.aria-label]=\"isExpanded(row, i) ? collapseLabel() : expandLabel()\" (click)=\"toggleExpansion(row, i)\"></button>\n              </td>\n            }\n            @if (checkboxColumn()) {\n              <td class=\"hx-data-table-select-cell\">\n                <input type=\"checkbox\" hx-checkbox [attr.aria-label]=\"selectRowLabel().replace('{row}', '' + (first() + i + 1))\" [checked]=\"isSelected(row)\" (change)=\"toggleRowCheckbox(row, $any($event.target).checked)\" />\n              </td>\n            }\n            @if (bodyTemplate(); as tpl) {\n              <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: row, index: i, columns: columns() }\" />\n            } @else {\n              @for (column of columns(); track column.field) {\n                <td [class]=\"'hx-data-table-align-' + (column.align ?? 'left')\">\n                  @if (cells().get(column.field); as cell) {\n                    <ng-container [ngTemplateOutlet]=\"cell\" [ngTemplateOutletContext]=\"{ $implicit: row, value: valueOf(row, column), index: i }\" />\n                  } @else {\n                    {{ valueOf(row, column) ?? emptyValue() }}\n                  }\n                </td>\n              }\n            }\n          </tr>\n          @if (expansionTemplate(); as tpl) {\n            @if (isExpanded(row, i)) {\n              <tr class=\"hx-data-table-expansion\">\n                <td [attr.colspan]=\"colspan()\">\n                  <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: row, index: i, columns: columns() }\" />\n                </td>\n              </tr>\n            }\n          }\n        } @empty {\n          <tr class=\"hx-data-table-empty\">\n            <td [attr.colspan]=\"colspan()\">\n              @if (emptyTemplate(); as tpl) {\n                <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n              } @else {\n                {{ emptyMessage() }}\n              }\n            </td>\n          </tr>\n        }\n      </tbody>\n      @if (footerTemplate(); as tpl) {\n        <tfoot>\n          <tr>\n            @if (expanderColumn()) { <td></td> }\n            @if (checkboxColumn()) { <td></td> }\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: columns() }\" />\n          </tr>\n        </tfoot>\n      }\n    </table>\n  </div>\n  <span class=\"hx-data-table-caption-hidden\" aria-live=\"polite\">{{ announcement() }}</span>\n  @if (loading()) {\n    <div class=\"hx-data-table-loading\" role=\"status\">\n      <hx-progress-spinner ariaLabel=\"Loading\" />\n    </div>\n  }\n  @if (paginator()) {\n    <hx-paginator\n      class=\"hx-data-table-paginator\"\n      [rows]=\"rows()\"\n      [first]=\"first()\"\n      [totalRecords]=\"total()\"\n      [rowsPerPageOptions]=\"rowsPerPageOptions()\"\n      [showAll]=\"showAll()\"\n      (showAllChange)=\"showAll.set($event)\"\n      [allLabel]=\"allLabel()\"\n      [showCurrentPageReport]=\"showCurrentPageReport()\"\n      (pageChange)=\"onPage($event)\"\n    />\n  }\n</div>\n\n<ng-template #label let-column>\n  @if (column.sortable) {\n    <button type=\"button\" class=\"hx-data-table-sort\" (click)=\"sort(column)\">\n      <span>{{ column.header }}</span>\n      <span class=\"hx-data-table-sort-icon\" [class.hx-data-table-sort-asc]=\"orderOf(column) === 1\" [class.hx-data-table-sort-desc]=\"orderOf(column) === -1\" aria-hidden=\"true\"></span>\n      @if (sortRank(column); as rank) {\n        <span class=\"hx-data-table-sort-rank\" aria-hidden=\"true\">{{ rank }}</span>\n      }\n    </button>\n  } @else {\n    {{ column.header }}\n  }\n</ng-template>\n",
 		dependencies: [
 			{
 				kind: "directive",
@@ -7108,11 +6825,14 @@ var HxDataTable = class HxDataTable {
 					"nextPageLabel",
 					"lastPageLabel",
 					"pageLabelTemplate",
-					"rowsPerPageLabel"
+					"rowsPerPageLabel",
+					"allLabel",
+					"showAll"
 				],
 				outputs: [
 					"rowsChange",
 					"firstChange",
+					"showAllChange",
 					"pageChange"
 				]
 			},
@@ -7157,7 +6877,7 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: { class: "hx-data-table" },
-			template: "<div class=\"hx-data-table-frame\" [attr.aria-busy]=\"loading() ? 'true' : null\">\n  <div\n    class=\"hx-table-scroll hx-data-table-scroll\"\n    [class.hx-data-table-scrolls]=\"scrolls()\"\n    [style.max-height]=\"scrollHeight() ?? null\"\n    [attr.role]=\"scrolls() ? 'region' : null\"\n    [attr.aria-label]=\"scrolls() ? (ariaLabel() ?? caption() ?? null) : null\"\n    [attr.tabindex]=\"scrolls() ? 0 : null\"\n  >\n    <table\n      class=\"hx-table\"\n      [class.hx-table-sm]=\"size() === 'small'\"\n      [class.hx-table-lg]=\"size() === 'large'\"\n      [class.hx-table-striped]=\"stripedRows()\"\n      [class.hx-table-gridlines]=\"showGridlines()\"\n      [class.hx-table-hoverable]=\"hoverRows()\"\n      [class.hx-table-sticky]=\"!!scrollHeight()\"\n    >\n      @if (hasCaption()) {\n        <caption [class.hx-data-table-caption-hidden]=\"captionHidden()\">\n          @if (captionTemplate(); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n          } @else {\n            {{ caption() ?? ariaLabel() }}\n          }\n        </caption>\n      }\n      <thead>\n        <tr>\n          @if (expanderColumn()) {\n            <th scope=\"col\" class=\"hx-data-table-expander-cell\"><span class=\"hx-data-table-caption-hidden\">Row details</span></th>\n          }\n          @if (checkboxColumn()) {\n            <th scope=\"col\" class=\"hx-data-table-select-cell\">\n              <input type=\"checkbox\" hx-checkbox [attr.aria-label]=\"selectAllLabel()\" [checked]=\"allSelected()\" [indeterminate]=\"someSelected()\" (change)=\"toggleSelectAll($any($event.target).checked)\" />\n            </th>\n          }\n          @if (headerTemplate(); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: columns() }\" />\n          } @else {\n            @for (column of columns(); track column.field) {\n              <th\n                scope=\"col\"\n                [class]=\"'hx-data-table-align-' + (column.align ?? 'left')\"\n                [class.hx-data-table-sorted]=\"orderOf(column) !== 0\"\n                [style.width]=\"column.width ?? null\"\n                [attr.aria-sort]=\"ariaSort(column)\"\n              >\n                @if (column.sortable) {\n                  <button type=\"button\" class=\"hx-data-table-sort\" (click)=\"sort(column)\">\n                    <span>{{ column.header }}</span>\n                    <span class=\"hx-data-table-sort-icon\" [class.hx-data-table-sort-asc]=\"orderOf(column) === 1\" [class.hx-data-table-sort-desc]=\"orderOf(column) === -1\" aria-hidden=\"true\"></span>\n                    @if (sortRank(column); as rank) {\n                      <span class=\"hx-data-table-sort-rank\" aria-hidden=\"true\">{{ rank }}</span>\n                    }\n                  </button>\n                } @else {\n                  {{ column.header }}\n                }\n              </th>\n            }\n          }\n        </tr>\n        @if (filterRow()) {\n          <tr class=\"hx-data-table-filter-row\">\n            @if (expanderColumn()) { <th></th> }\n            @if (checkboxColumn()) { <th></th> }\n            @for (column of columns(); track column.field) {\n              <th>\n                @if (column.filter) {\n                  <input type=\"text\" hx-input size=\"small\" fluid [attr.aria-label]=\"filterLabel().replace('{header}', column.header)\" [value]=\"filters()[column.field] ?? ''\" (input)=\"setFilter(column, $any($event.target).value)\" />\n                }\n              </th>\n            }\n          </tr>\n        }\n      </thead>\n      <tbody>\n        @for (row of visibleRows(); track trackRow(row, $index); let i = $index) {\n          <tr\n            [class.hx-data-table-selectable]=\"selectable()\"\n            [attr.aria-selected]=\"selectionMode() ? (isSelected(row) ? 'true' : 'false') : null\"\n            [attr.tabindex]=\"selectable() ? 0 : null\"\n            (click)=\"selectRow(row, $event)\"\n            (keydown.enter)=\"onRowKey(row, $event)\"\n            (keydown.space)=\"onRowKey(row, $event)\"\n          >\n            @if (expanderColumn()) {\n              <td class=\"hx-data-table-expander-cell\">\n                <button type=\"button\" class=\"hx-data-table-expander\" [class.hx-data-table-expander-open]=\"isExpanded(row, i)\" [attr.aria-expanded]=\"isExpanded(row, i)\" [attr.aria-label]=\"isExpanded(row, i) ? collapseLabel() : expandLabel()\" (click)=\"toggleExpansion(row, i)\"></button>\n              </td>\n            }\n            @if (checkboxColumn()) {\n              <td class=\"hx-data-table-select-cell\">\n                <input type=\"checkbox\" hx-checkbox [attr.aria-label]=\"selectRowLabel().replace('{row}', '' + (first() + i + 1))\" [checked]=\"isSelected(row)\" (change)=\"toggleRowCheckbox(row, $any($event.target).checked)\" />\n              </td>\n            }\n            @if (bodyTemplate(); as tpl) {\n              <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: row, index: i, columns: columns() }\" />\n            } @else {\n              @for (column of columns(); track column.field) {\n                <td [class]=\"'hx-data-table-align-' + (column.align ?? 'left')\">\n                  @if (cells().get(column.field); as cell) {\n                    <ng-container [ngTemplateOutlet]=\"cell\" [ngTemplateOutletContext]=\"{ $implicit: row, value: valueOf(row, column), index: i }\" />\n                  } @else {\n                    {{ valueOf(row, column) }}\n                  }\n                </td>\n              }\n            }\n          </tr>\n          @if (expansionTemplate(); as tpl) {\n            @if (isExpanded(row, i)) {\n              <tr class=\"hx-data-table-expansion\">\n                <td [attr.colspan]=\"colspan()\">\n                  <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: row, index: i, columns: columns() }\" />\n                </td>\n              </tr>\n            }\n          }\n        } @empty {\n          <tr class=\"hx-data-table-empty\">\n            <td [attr.colspan]=\"colspan()\">\n              @if (emptyTemplate(); as tpl) {\n                <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n              } @else {\n                {{ emptyMessage() }}\n              }\n            </td>\n          </tr>\n        }\n      </tbody>\n      @if (footerTemplate(); as tpl) {\n        <tfoot>\n          <tr>\n            @if (expanderColumn()) { <td></td> }\n            @if (checkboxColumn()) { <td></td> }\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: columns() }\" />\n          </tr>\n        </tfoot>\n      }\n    </table>\n  </div>\n  <span class=\"hx-data-table-caption-hidden\" aria-live=\"polite\">{{ announcement() }}</span>\n  @if (loading()) {\n    <div class=\"hx-data-table-loading\" role=\"status\">\n      <hx-progress-spinner ariaLabel=\"Loading\" />\n    </div>\n  }\n  @if (paginator()) {\n    <hx-paginator\n      class=\"hx-data-table-paginator\"\n      [rows]=\"rows()\"\n      [first]=\"first()\"\n      [totalRecords]=\"total()\"\n      [rowsPerPageOptions]=\"rowsPerPageOptions()\"\n      [showCurrentPageReport]=\"showCurrentPageReport()\"\n      (pageChange)=\"onPage($event)\"\n    />\n  }\n</div>\n"
+			template: "<div class=\"hx-data-table-frame\" [attr.aria-busy]=\"loading() ? 'true' : null\">\n  <div\n    class=\"hx-table-scroll hx-data-table-scroll\"\n    [class.hx-data-table-scrolls]=\"scrolls()\"\n    [style.max-height]=\"scrollHeight() ?? null\"\n    [attr.role]=\"scrolls() ? 'region' : null\"\n    [attr.aria-label]=\"scrolls() ? (ariaLabel() ?? caption() ?? null) : null\"\n    [attr.tabindex]=\"scrolls() ? 0 : null\"\n  >\n    <table\n      class=\"hx-table\"\n      [class.hx-table-sm]=\"size() === 'small'\"\n      [class.hx-table-lg]=\"size() === 'large'\"\n      [class.hx-table-striped]=\"stripedRows()\"\n      [class.hx-table-gridlines]=\"showGridlines()\"\n      [class.hx-table-hoverable]=\"hoverRows()\"\n      [class.hx-table-sticky]=\"!!scrollHeight()\"\n    >\n      @if (hasCaption()) {\n        <caption [class.hx-data-table-caption-hidden]=\"captionHidden()\">\n          @if (captionTemplate(); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n          } @else {\n            {{ caption() ?? ariaLabel() }}\n          }\n        </caption>\n      }\n      <thead>\n        <tr>\n          @if (expanderColumn()) {\n            <th scope=\"col\" class=\"hx-data-table-expander-cell\"><span class=\"hx-data-table-caption-hidden\">Row details</span></th>\n          }\n          @if (checkboxColumn()) {\n            <th scope=\"col\" class=\"hx-data-table-select-cell\">\n              <input type=\"checkbox\" hx-checkbox [attr.aria-label]=\"selectAllLabel()\" [checked]=\"allSelected()\" [indeterminate]=\"someSelected()\" (change)=\"toggleSelectAll($any($event.target).checked)\" />\n            </th>\n          }\n          @if (headerTemplate(); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: columns() }\" />\n          } @else {\n            @for (column of columns(); track column.field) {\n              <th\n                scope=\"col\"\n                [class]=\"'hx-data-table-align-' + (column.align ?? 'left')\"\n                [class.hx-data-table-sorted]=\"orderOf(column) !== 0\"\n                [style.width]=\"column.width ?? null\"\n                [attr.aria-sort]=\"ariaSort(column)\"\n                [attr.title]=\"column.title ?? null\"\n              >\n                @if (columnHeaders().get(column.field); as extra) {\n                  <div class=\"hx-data-table-header-content\">\n                    <ng-container [ngTemplateOutlet]=\"label\" [ngTemplateOutletContext]=\"{ $implicit: column }\" />\n                    <ng-container [ngTemplateOutlet]=\"extra\" [ngTemplateOutletContext]=\"{ $implicit: column }\" />\n                  </div>\n                } @else {\n                  <ng-container [ngTemplateOutlet]=\"label\" [ngTemplateOutletContext]=\"{ $implicit: column }\" />\n                }\n              </th>\n            }\n          }\n        </tr>\n        @if (filterRow()) {\n          <tr class=\"hx-data-table-filter-row\">\n            @if (expanderColumn()) { <th></th> }\n            @if (checkboxColumn()) { <th></th> }\n            @for (column of columns(); track column.field) {\n              <th>\n                @if (column.filter) {\n                  <input type=\"text\" hx-input size=\"small\" fluid [attr.aria-label]=\"filterLabel().replace('{header}', column.header)\" [value]=\"filters()[column.field] ?? ''\" (input)=\"setFilter(column, $any($event.target).value)\" />\n                }\n              </th>\n            }\n          </tr>\n        }\n      </thead>\n      <tbody>\n        @for (row of visibleRows(); track trackRow(row, $index); let i = $index) {\n          <tr\n            [class]=\"rowClassOf(row)\"\n            [class.hx-data-table-selectable]=\"selectable()\"\n            [attr.aria-selected]=\"selectionMode() ? (isSelected(row) ? 'true' : 'false') : null\"\n            [attr.tabindex]=\"selectable() ? 0 : null\"\n            (click)=\"selectRow(row, $event)\"\n            (keydown.enter)=\"onRowKey(row, $event)\"\n            (keydown.space)=\"onRowKey(row, $event)\"\n          >\n            @if (expanderColumn()) {\n              <td class=\"hx-data-table-expander-cell\">\n                <button type=\"button\" class=\"hx-data-table-expander\" [class.hx-data-table-expander-open]=\"isExpanded(row, i)\" [attr.aria-expanded]=\"isExpanded(row, i)\" [attr.aria-label]=\"isExpanded(row, i) ? collapseLabel() : expandLabel()\" (click)=\"toggleExpansion(row, i)\"></button>\n              </td>\n            }\n            @if (checkboxColumn()) {\n              <td class=\"hx-data-table-select-cell\">\n                <input type=\"checkbox\" hx-checkbox [attr.aria-label]=\"selectRowLabel().replace('{row}', '' + (first() + i + 1))\" [checked]=\"isSelected(row)\" (change)=\"toggleRowCheckbox(row, $any($event.target).checked)\" />\n              </td>\n            }\n            @if (bodyTemplate(); as tpl) {\n              <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: row, index: i, columns: columns() }\" />\n            } @else {\n              @for (column of columns(); track column.field) {\n                <td [class]=\"'hx-data-table-align-' + (column.align ?? 'left')\">\n                  @if (cells().get(column.field); as cell) {\n                    <ng-container [ngTemplateOutlet]=\"cell\" [ngTemplateOutletContext]=\"{ $implicit: row, value: valueOf(row, column), index: i }\" />\n                  } @else {\n                    {{ valueOf(row, column) ?? emptyValue() }}\n                  }\n                </td>\n              }\n            }\n          </tr>\n          @if (expansionTemplate(); as tpl) {\n            @if (isExpanded(row, i)) {\n              <tr class=\"hx-data-table-expansion\">\n                <td [attr.colspan]=\"colspan()\">\n                  <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: row, index: i, columns: columns() }\" />\n                </td>\n              </tr>\n            }\n          }\n        } @empty {\n          <tr class=\"hx-data-table-empty\">\n            <td [attr.colspan]=\"colspan()\">\n              @if (emptyTemplate(); as tpl) {\n                <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n              } @else {\n                {{ emptyMessage() }}\n              }\n            </td>\n          </tr>\n        }\n      </tbody>\n      @if (footerTemplate(); as tpl) {\n        <tfoot>\n          <tr>\n            @if (expanderColumn()) { <td></td> }\n            @if (checkboxColumn()) { <td></td> }\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: columns() }\" />\n          </tr>\n        </tfoot>\n      }\n    </table>\n  </div>\n  <span class=\"hx-data-table-caption-hidden\" aria-live=\"polite\">{{ announcement() }}</span>\n  @if (loading()) {\n    <div class=\"hx-data-table-loading\" role=\"status\">\n      <hx-progress-spinner ariaLabel=\"Loading\" />\n    </div>\n  }\n  @if (paginator()) {\n    <hx-paginator\n      class=\"hx-data-table-paginator\"\n      [rows]=\"rows()\"\n      [first]=\"first()\"\n      [totalRecords]=\"total()\"\n      [rowsPerPageOptions]=\"rowsPerPageOptions()\"\n      [showAll]=\"showAll()\"\n      (showAllChange)=\"showAll.set($event)\"\n      [allLabel]=\"allLabel()\"\n      [showCurrentPageReport]=\"showCurrentPageReport()\"\n      (pageChange)=\"onPage($event)\"\n    />\n  }\n</div>\n\n<ng-template #label let-column>\n  @if (column.sortable) {\n    <button type=\"button\" class=\"hx-data-table-sort\" (click)=\"sort(column)\">\n      <span>{{ column.header }}</span>\n      <span class=\"hx-data-table-sort-icon\" [class.hx-data-table-sort-asc]=\"orderOf(column) === 1\" [class.hx-data-table-sort-desc]=\"orderOf(column) === -1\" aria-hidden=\"true\"></span>\n      @if (sortRank(column); as rank) {\n        <span class=\"hx-data-table-sort-rank\" aria-hidden=\"true\">{{ rank }}</span>\n      }\n    </button>\n  } @else {\n    {{ column.header }}\n  }\n</ng-template>\n"
 		}]
 	}],
 	propDecorators: {
@@ -7225,6 +6945,30 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		rowClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rowClass",
+				required: false
+			}]
+		}],
+		emptyValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyValue",
+				required: false
+			}]
+		}],
+		allLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "allLabel",
+				required: false
+			}]
+		}],
 		loading: [{
 			type: i0.Input,
 			args: [{
@@ -7314,6 +7058,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		sortFirstOrder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sortFirstOrder",
+				required: false
+			}]
+		}],
 		paginator: [{
 			type: i0.Input,
 			args: [{
@@ -7497,6 +7249,10 @@ i0.ɵɵngDeclareClassMetadata({
 			type: i0.ContentChildren,
 			args: [i0.forwardRef(() => HxCell), { isSignal: true }]
 		}],
+		columnHeaderTemplates: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => HxColumnHeader), { isSignal: true }]
+		}],
 		headerTemplate: [{
 			type: i0.ContentChild,
 			args: [i0.forwardRef(() => HxTableHeader), { isSignal: true }]
@@ -10906,17 +10662,25 @@ const EMPTY = {
 	to: null
 };
 const earlier = (a, b) => a && b ? a <= b ? a : b : a ?? b;
+const sameTime = (a, b) => a?.getTime() === b?.getTime();
+const sameRange = (a, b) => sameTime(a.from, b.from) && sameTime(a.to, b.to);
 const later = (a, b) => a && b ? a >= b ? a : b : a ?? b;
 var HxDateTimeRangePicker = class HxDateTimeRangePicker {
 	fromLabel = input("From", ...ngDevMode ? [{ debugName: "fromLabel" }] : 	/* istanbul ignore next */ []);
 	toLabel = input("To", ...ngDevMode ? [{ debugName: "toLabel" }] : 	/* istanbul ignore next */ []);
 	separator = input("-", ...ngDevMode ? [{ debugName: "separator" }] : 	/* istanbul ignore next */ []);
 	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : 	/* istanbul ignore next */ []);
+	presetsLabel = input("Presets", ...ngDevMode ? [{ debugName: "presetsLabel" }] : 	/* istanbul ignore next */ []);
+	presets = input([], ...ngDevMode ? [{ debugName: "presets" }] : 	/* istanbul ignore next */ []);
 	clearLabel = input("Clear", ...ngDevMode ? [{ debugName: "clearLabel" }] : 	/* istanbul ignore next */ []);
 	cancelLabel = input("Cancel", ...ngDevMode ? [{ debugName: "cancelLabel" }] : 	/* istanbul ignore next */ []);
 	submitLabel = input("Submit", ...ngDevMode ? [{ debugName: "submitLabel" }] : 	/* istanbul ignore next */ []);
 	chooseLabel = input("Choose date range", ...ngDevMode ? [{ debugName: "chooseLabel" }] : 	/* istanbul ignore next */ []);
 	inputId = input(...ngDevMode ? [void 0, { debugName: "inputId" }] : 	/* istanbul ignore next */ []);
+	typeable = input(false, {
+		...ngDevMode ? { debugName: "typeable" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
 	showTime = input(true, {
 		...ngDevMode ? { debugName: "showTime" } : 		/* istanbul ignore next */ {},
 		transform: booleanAttribute
@@ -10995,6 +10759,7 @@ var HxDateTimeRangePicker = class HxDateTimeRangePicker {
 	#lastFrom = null;
 	#lastTo = null;
 	#cvaDisabled = signal(false, ...ngDevMode ? [{ debugName: "#cvaDisabled" }] : 	/* istanbul ignore next */ []);
+	#typed = signal(null, ...ngDevMode ? [{ debugName: "#typed" }] : 	/* istanbul ignore next */ []);
 	#format = computed(() => {
 		const custom = this.dateFormat();
 		if (custom) return new Intl.DateTimeFormat(this.locale(), custom);
@@ -11012,6 +10777,8 @@ var HxDateTimeRangePicker = class HxDateTimeRangePicker {
 		return new Intl.DateTimeFormat(this.locale(), options);
 	}, ...ngDevMode ? [{ debugName: "#format" }] : 	/* istanbul ignore next */ []);
 	text = computed(() => {
+		const typed = this.#typed();
+		if (typed !== null) return typed;
 		const { from, to } = this.value();
 		if (!from && !to) return "";
 		const fmt = this.#format();
@@ -11026,6 +10793,12 @@ var HxDateTimeRangePicker = class HxDateTimeRangePicker {
 	toValue = computed(() => this.#pickerValue(this.draft().to), ...ngDevMode ? [{ debugName: "toValue" }] : 	/* istanbul ignore next */ []);
 	#onChange = () => {};
 	#onTouched = () => {};
+	constructor() {
+		effect(() => {
+			this.value();
+			untracked(() => this.#typed.set(null));
+		});
+	}
 	writeValue(value) {
 		this.value.set({
 			from: value?.from ?? null,
@@ -11061,12 +10834,76 @@ var HxDateTimeRangePicker = class HxDateTimeRangePicker {
 	onAttach() {
 		afterNextRender(() => (this.daysPicker() ?? this.timePicker())?.focus(), { injector: this.#injector });
 	}
+	onFieldClick() {
+		if (!this.typeable()) this.show();
+	}
 	onFieldKeydown(event) {
-		if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " " || event.altKey && event.key === "ArrowUp") {
+		if (this.typeable() && event.key === "Enter") {
+			event.preventDefault();
+			this.commitTyping();
+		} else if (this.typeable() && event.key === "Escape" && this.#typed() !== null) {
+			event.preventDefault();
+			this.#revertTyping();
+		} else if (event.key === "ArrowDown" || event.altKey && event.key === "ArrowUp" || !this.typeable() && (event.key === "Enter" || event.key === " ")) {
 			event.preventDefault();
 			this.show();
 		}
 	}
+	onTyping(event) {
+		if (!this.typeable() || this.isDisabled()) return;
+		this.#typed.set(event.target.value);
+	}
+	commitTyping() {
+		const typed = this.#typed();
+		if (typed === null || this.isDisabled()) return;
+		this.#typed.set(null);
+		const next = this.#parseRange(typed);
+		if (next && !sameRange(next, this.value())) {
+			this.#commit(next);
+			if (this.open()) this.#stage(next);
+		}
+		this.#showValue();
+	}
+	#revertTyping() {
+		this.#typed.set(null);
+		this.#showValue();
+	}
+	#showValue() {
+		const field = this.field();
+		if (field) field.nativeElement.value = this.text();
+	}
+	#parseRange(typed) {
+		const text = typed.trim();
+		if (text === "") return EMPTY;
+		const separator = this.separator().trim().replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+		const parts = separator ? text.split(new RegExp(`(?:^|\\s+)${separator}(?:\\s+|$)`)) : [text];
+		if (parts.length > 2) return null;
+		const { from: oldFrom, to: oldTo } = this.value();
+		const from = this.#parseSide(parts[0], oldFrom);
+		const to = this.#parseSide(parts[1] ?? "", oldTo ?? oldFrom);
+		if (from === void 0 || to === void 0) return null;
+		return from && to && to < from ? {
+			from: to,
+			to: from
+		} : {
+			from,
+			to
+		};
+	}
+	#parseSide(part, old) {
+		const text = part.trim();
+		if (text === "") return null;
+		const date = this.#timed() ? parseDateTimeText(text, {
+			locale: this.locale(),
+			showMinutes: this.showMinutes(),
+			timeOnly: this.timeOnly(),
+			fallbackDay: old ?? /* @__PURE__ */ new Date()
+		}) : parseDateText(text, this.locale());
+		if (!date || this.#isBlocked(date)) return void 0;
+		const [min, max] = [this.minDate(), this.maxDate()];
+		if (min && date < min || max && date > max) return void 0;
+		return date;
+	}
 	onOverlayKeydown(event) {
 		if (event.key === "Escape") {
 			event.preventDefault();
@@ -11079,6 +10916,27 @@ var HxDateTimeRangePicker = class HxDateTimeRangePicker {
 	clear() {
 		this.#stage(EMPTY);
 	}
+	applyPreset(preset) {
+		const { from: oldFrom, to: oldTo } = this.draft();
+		const from = this.#fitPreset(preset.from(), oldFrom);
+		const to = this.#fitPreset(preset.to(), oldTo ?? oldFrom);
+		if (from === void 0 || to === void 0) return;
+		this.#stage(from && to && to < from ? {
+			from: to,
+			to: from
+		} : {
+			from,
+			to
+		});
+	}
+	#fitPreset(date, old) {
+		if (!isValidDate(date)) return null;
+		const fitted = this.timeOnly() ? this.#atTime(old ?? /* @__PURE__ */ new Date(), date) : this.#timed() ? date : startOfDay(date);
+		return this.#isBlocked(fitted) ? void 0 : fitted;
+	}
+	#timed() {
+		return this.showTime() || this.timeOnly();
+	}
 	submit() {
 		this.#commit(this.draft());
 		this.close(true);
@@ -11220,6 +11078,20 @@ var HxDateTimeRangePicker = class HxDateTimeRangePicker {
 				isRequired: false,
 				transformFunction: null
 			},
+			presetsLabel: {
+				classPropertyName: "presetsLabel",
+				publicName: "presetsLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			presets: {
+				classPropertyName: "presets",
+				publicName: "presets",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			clearLabel: {
 				classPropertyName: "clearLabel",
 				publicName: "clearLabel",
@@ -11255,6 +11127,13 @@ var HxDateTimeRangePicker = class HxDateTimeRangePicker {
 				isRequired: false,
 				transformFunction: null
 			},
+			typeable: {
+				classPropertyName: "typeable",
+				publicName: "typeable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			showTime: {
 				classPropertyName: "showTime",
 				publicName: "showTime",
@@ -11433,7 +11312,7 @@ var HxDateTimeRangePicker = class HxDateTimeRangePicker {
 			}
 		],
 		ngImport: i0,
-		template: "<div\n  class=\"hx-date-picker hx-date-picker-has-icon hx-date-time-range-picker-control\"\n  [class.hx-date-picker-open]=\"open()\"\n  [class.hx-date-picker-disabled]=\"isDisabled()\"\n  [class.hx-date-picker-invalid]=\"invalid()\"\n>\n  <div class=\"hx-date-picker-field\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n    <input\n      #field\n      type=\"text\"\n      readonly\n      class=\"hx-date-picker-input\"\n      autocomplete=\"off\"\n      aria-haspopup=\"dialog\"\n      [attr.id]=\"inputId() ?? null\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [value]=\"text()\"\n      [attr.aria-expanded]=\"open()\"\n      [attr.aria-controls]=\"open() ? popupId : null\"\n      [attr.aria-label]=\"ariaLabel() ?? null\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n      (click)=\"show()\"\n      (keydown)=\"onFieldKeydown($event)\"\n    />\n    <button\n      type=\"button\"\n      class=\"hx-date-picker-trigger\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-label]=\"chooseLabel()\"\n      [attr.aria-expanded]=\"open()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"toggle()\"\n    >\n      <span class=\"hx-date-picker-trigger-icon\" aria-hidden=\"true\"></span>\n    </button>\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayPanelClass=\"hx-date-picker-overlay\"\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"open()\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayPush]=\"true\"\n    (overlayOutsideClick)=\"onOutsideClick($event)\"\n    (overlayKeydown)=\"onOverlayKeydown($event)\"\n    (attach)=\"onAttach()\"\n    (detach)=\"open.set(false)\"\n  >\n    <div\n      class=\"hx-date-picker-popup hx-date-time-range-picker-popup\"\n      role=\"dialog\"\n      aria-modal=\"false\"\n      [id]=\"popupId\"\n      [attr.aria-label]=\"ariaLabel() ?? chooseLabel()\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n      (focusout)=\"onPopupFocusOut($event)\"\n    >\n      <div class=\"hx-date-time-range-picker-body\">\n        @if (!timeOnly()) {\n          <hx-date-picker\n            class=\"hx-date-time-range-picker-days\"\n            inline\n            selectionMode=\"range\"\n            [ariaLabel]=\"chooseLabel()\"\n            [value]=\"days()\"\n            [minDate]=\"minDate()\"\n            [maxDate]=\"maxDate()\"\n            [locale]=\"locale()\"\n            [firstDayOfWeek]=\"firstDayOfWeek()\"\n            [disabledDates]=\"disabledDates()\"\n            (valueChange)=\"setDays($event)\"\n          />\n        }\n        @if (showTime() || timeOnly()) {\n          <div class=\"hx-date-time-range-picker-times\">\n            <div class=\"hx-date-time-range-picker-time\">\n              <span class=\"hx-date-time-range-picker-caption\" aria-hidden=\"true\">{{ fromLabel() }}</span>\n              <hx-time-picker\n                inline\n                class=\"hx-date-time-range-picker-from\"\n                [ariaLabel]=\"fromLabel()\"\n                [value]=\"fromValue()\"\n                [hourFormat]=\"hourFormat()\"\n                [showMinutes]=\"showMinutes()\"\n                [showSeconds]=\"showSeconds()\"\n                [stepHour]=\"stepHour()\"\n                [stepMinute]=\"stepMinute()\"\n                [stepSecond]=\"stepSecond()\"\n                [locale]=\"locale()\"\n                [disabled]=\"isDisabled()\"\n                (valueChange)=\"setFromTime($event)\"\n              />\n            </div>\n            <div class=\"hx-date-time-range-picker-time\">\n              <span class=\"hx-date-time-range-picker-caption\" aria-hidden=\"true\">{{ toLabel() }}</span>\n              <hx-time-picker\n                inline\n                class=\"hx-date-time-range-picker-to\"\n                [ariaLabel]=\"toLabel()\"\n                [value]=\"toValue()\"\n                [hourFormat]=\"hourFormat()\"\n                [showMinutes]=\"showMinutes()\"\n                [showSeconds]=\"showSeconds()\"\n                [stepHour]=\"stepHour()\"\n                [stepMinute]=\"stepMinute()\"\n                [stepSecond]=\"stepSecond()\"\n                [locale]=\"locale()\"\n                [disabled]=\"isDisabled()\"\n                (valueChange)=\"setToTime($event)\"\n              />\n            </div>\n          </div>\n        }\n      </div>\n      <div class=\"hx-date-picker-buttonbar hx-date-time-range-picker-footer\">\n        @if (showButtonBar()) {\n          <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"clear()\">{{ clearLabel() }}</button>\n        }\n        <span class=\"hx-date-time-range-picker-spacer\"></span>\n        <button type=\"button\" class=\"hx-date-picker-button hx-date-time-range-picker-cancel\" (click)=\"close(true)\">{{ cancelLabel() }}</button>\n        <button type=\"button\" class=\"hx-date-picker-button hx-date-time-range-picker-submit\" (click)=\"submit()\">{{ submitLabel() }}</button>\n      </div>\n    </div>\n  </ng-template>\n</div>\n",
+		template: "<div\n  class=\"hx-date-picker hx-date-picker-has-icon hx-date-time-range-picker-control\"\n  [class.hx-date-picker-open]=\"open()\"\n  [class.hx-date-picker-disabled]=\"isDisabled()\"\n  [class.hx-date-picker-invalid]=\"invalid()\"\n>\n  <div class=\"hx-date-picker-field\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n    <input\n      #field\n      type=\"text\"\n      [readOnly]=\"!typeable()\"\n      class=\"hx-date-picker-input\"\n      autocomplete=\"off\"\n      aria-haspopup=\"dialog\"\n      [attr.id]=\"inputId() ?? null\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [value]=\"text()\"\n      [attr.aria-expanded]=\"open()\"\n      [attr.aria-controls]=\"open() ? popupId : null\"\n      [attr.aria-label]=\"ariaLabel() ?? null\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n      (input)=\"onTyping($event)\"\n      (change)=\"commitTyping()\"\n      (click)=\"onFieldClick()\"\n      (keydown)=\"onFieldKeydown($event)\"\n    />\n    <button\n      type=\"button\"\n      class=\"hx-date-picker-trigger\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-label]=\"chooseLabel()\"\n      [attr.aria-expanded]=\"open()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"toggle()\"\n    >\n      <span class=\"hx-date-picker-trigger-icon\" aria-hidden=\"true\"></span>\n    </button>\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayPanelClass=\"hx-date-picker-overlay\"\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"open()\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayPush]=\"true\"\n    (overlayOutsideClick)=\"onOutsideClick($event)\"\n    (overlayKeydown)=\"onOverlayKeydown($event)\"\n    (attach)=\"onAttach()\"\n    (detach)=\"open.set(false)\"\n  >\n    <div\n      class=\"hx-date-picker-popup hx-date-time-range-picker-popup\"\n      role=\"dialog\"\n      aria-modal=\"false\"\n      [id]=\"popupId\"\n      [attr.aria-label]=\"ariaLabel() ?? chooseLabel()\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n      (focusout)=\"onPopupFocusOut($event)\"\n    >\n      @if (presets().length > 0) {\n        <div class=\"hx-date-time-range-picker-presets\" role=\"group\" [attr.aria-label]=\"presetsLabel()\">\n          @for (preset of presets(); track $index) {\n            <button type=\"button\" class=\"hx-date-picker-button hx-date-time-range-picker-preset\" (click)=\"applyPreset(preset)\">{{ preset.label }}</button>\n          }\n        </div>\n      }\n      <div class=\"hx-date-time-range-picker-body\">\n        @if (!timeOnly()) {\n          <hx-date-picker\n            class=\"hx-date-time-range-picker-days\"\n            inline\n            selectionMode=\"range\"\n            [ariaLabel]=\"chooseLabel()\"\n            [value]=\"days()\"\n            [minDate]=\"minDate()\"\n            [maxDate]=\"maxDate()\"\n            [locale]=\"locale()\"\n            [firstDayOfWeek]=\"firstDayOfWeek()\"\n            [disabledDates]=\"disabledDates()\"\n            (valueChange)=\"setDays($event)\"\n          />\n        }\n        @if (showTime() || timeOnly()) {\n          <div class=\"hx-date-time-range-picker-times\">\n            <div class=\"hx-date-time-range-picker-time\">\n              <span class=\"hx-date-time-range-picker-caption\" aria-hidden=\"true\">{{ fromLabel() }}</span>\n              <hx-time-picker\n                inline\n                class=\"hx-date-time-range-picker-from\"\n                [ariaLabel]=\"fromLabel()\"\n                [value]=\"fromValue()\"\n                [hourFormat]=\"hourFormat()\"\n                [showMinutes]=\"showMinutes()\"\n                [showSeconds]=\"showSeconds()\"\n                [stepHour]=\"stepHour()\"\n                [stepMinute]=\"stepMinute()\"\n                [stepSecond]=\"stepSecond()\"\n                [locale]=\"locale()\"\n                [disabled]=\"isDisabled()\"\n                (valueChange)=\"setFromTime($event)\"\n              />\n            </div>\n            <div class=\"hx-date-time-range-picker-time\">\n              <span class=\"hx-date-time-range-picker-caption\" aria-hidden=\"true\">{{ toLabel() }}</span>\n              <hx-time-picker\n                inline\n                class=\"hx-date-time-range-picker-to\"\n                [ariaLabel]=\"toLabel()\"\n                [value]=\"toValue()\"\n                [hourFormat]=\"hourFormat()\"\n                [showMinutes]=\"showMinutes()\"\n                [showSeconds]=\"showSeconds()\"\n                [stepHour]=\"stepHour()\"\n                [stepMinute]=\"stepMinute()\"\n                [stepSecond]=\"stepSecond()\"\n                [locale]=\"locale()\"\n                [disabled]=\"isDisabled()\"\n                (valueChange)=\"setToTime($event)\"\n              />\n            </div>\n          </div>\n        }\n      </div>\n      <div class=\"hx-date-picker-buttonbar hx-date-time-range-picker-footer\">\n        @if (showButtonBar()) {\n          <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"clear()\">{{ clearLabel() }}</button>\n        }\n        <span class=\"hx-date-time-range-picker-spacer\"></span>\n        <button type=\"button\" class=\"hx-date-picker-button hx-date-time-range-picker-cancel\" (click)=\"close(true)\">{{ cancelLabel() }}</button>\n        <button type=\"button\" class=\"hx-date-picker-button hx-date-time-range-picker-submit\" (click)=\"submit()\">{{ submitLabel() }}</button>\n      </div>\n    </div>\n  </ng-template>\n</div>\n",
 		dependencies: [
 			{
 				kind: "directive",
@@ -11575,9 +11454,10 @@ i0.ɵɵngDeclareClassMetadata({
 				class: "hx-date-time-range-picker",
 				"(focusout)": "onHostFocusOut($event)"
 			},
-			template: "<div\n  class=\"hx-date-picker hx-date-picker-has-icon hx-date-time-range-picker-control\"\n  [class.hx-date-picker-open]=\"open()\"\n  [class.hx-date-picker-disabled]=\"isDisabled()\"\n  [class.hx-date-picker-invalid]=\"invalid()\"\n>\n  <div class=\"hx-date-picker-field\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n    <input\n      #field\n      type=\"text\"\n      readonly\n      class=\"hx-date-picker-input\"\n      autocomplete=\"off\"\n      aria-haspopup=\"dialog\"\n      [attr.id]=\"inputId() ?? null\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [value]=\"text()\"\n      [attr.aria-expanded]=\"open()\"\n      [attr.aria-controls]=\"open() ? popupId : null\"\n      [attr.aria-label]=\"ariaLabel() ?? null\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n      (click)=\"show()\"\n      (keydown)=\"onFieldKeydown($event)\"\n    />\n    <button\n      type=\"button\"\n      class=\"hx-date-picker-trigger\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-label]=\"chooseLabel()\"\n      [attr.aria-expanded]=\"open()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"toggle()\"\n    >\n      <span class=\"hx-date-picker-trigger-icon\" aria-hidden=\"true\"></span>\n    </button>\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayPanelClass=\"hx-date-picker-overlay\"\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"open()\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayPush]=\"true\"\n    (overlayOutsideClick)=\"onOutsideClick($event)\"\n    (overlayKeydown)=\"onOverlayKeydown($event)\"\n    (attach)=\"onAttach()\"\n    (detach)=\"open.set(false)\"\n  >\n    <div\n      class=\"hx-date-picker-popup hx-date-time-range-picker-popup\"\n      role=\"dialog\"\n      aria-modal=\"false\"\n      [id]=\"popupId\"\n      [attr.aria-label]=\"ariaLabel() ?? chooseLabel()\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n      (focusout)=\"onPopupFocusOut($event)\"\n    >\n      <div class=\"hx-date-time-range-picker-body\">\n        @if (!timeOnly()) {\n          <hx-date-picker\n            class=\"hx-date-time-range-picker-days\"\n            inline\n            selectionMode=\"range\"\n            [ariaLabel]=\"chooseLabel()\"\n            [value]=\"days()\"\n            [minDate]=\"minDate()\"\n            [maxDate]=\"maxDate()\"\n            [locale]=\"locale()\"\n            [firstDayOfWeek]=\"firstDayOfWeek()\"\n            [disabledDates]=\"disabledDates()\"\n            (valueChange)=\"setDays($event)\"\n          />\n        }\n        @if (showTime() || timeOnly()) {\n          <div class=\"hx-date-time-range-picker-times\">\n            <div class=\"hx-date-time-range-picker-time\">\n              <span class=\"hx-date-time-range-picker-caption\" aria-hidden=\"true\">{{ fromLabel() }}</span>\n              <hx-time-picker\n                inline\n                class=\"hx-date-time-range-picker-from\"\n                [ariaLabel]=\"fromLabel()\"\n                [value]=\"fromValue()\"\n                [hourFormat]=\"hourFormat()\"\n                [showMinutes]=\"showMinutes()\"\n                [showSeconds]=\"showSeconds()\"\n                [stepHour]=\"stepHour()\"\n                [stepMinute]=\"stepMinute()\"\n                [stepSecond]=\"stepSecond()\"\n                [locale]=\"locale()\"\n                [disabled]=\"isDisabled()\"\n                (valueChange)=\"setFromTime($event)\"\n              />\n            </div>\n            <div class=\"hx-date-time-range-picker-time\">\n              <span class=\"hx-date-time-range-picker-caption\" aria-hidden=\"true\">{{ toLabel() }}</span>\n              <hx-time-picker\n                inline\n                class=\"hx-date-time-range-picker-to\"\n                [ariaLabel]=\"toLabel()\"\n                [value]=\"toValue()\"\n                [hourFormat]=\"hourFormat()\"\n                [showMinutes]=\"showMinutes()\"\n                [showSeconds]=\"showSeconds()\"\n                [stepHour]=\"stepHour()\"\n                [stepMinute]=\"stepMinute()\"\n                [stepSecond]=\"stepSecond()\"\n                [locale]=\"locale()\"\n                [disabled]=\"isDisabled()\"\n                (valueChange)=\"setToTime($event)\"\n              />\n            </div>\n          </div>\n        }\n      </div>\n      <div class=\"hx-date-picker-buttonbar hx-date-time-range-picker-footer\">\n        @if (showButtonBar()) {\n          <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"clear()\">{{ clearLabel() }}</button>\n        }\n        <span class=\"hx-date-time-range-picker-spacer\"></span>\n        <button type=\"button\" class=\"hx-date-picker-button hx-date-time-range-picker-cancel\" (click)=\"close(true)\">{{ cancelLabel() }}</button>\n        <button type=\"button\" class=\"hx-date-picker-button hx-date-time-range-picker-submit\" (click)=\"submit()\">{{ submitLabel() }}</button>\n      </div>\n    </div>\n  </ng-template>\n</div>\n"
+			template: "<div\n  class=\"hx-date-picker hx-date-picker-has-icon hx-date-time-range-picker-control\"\n  [class.hx-date-picker-open]=\"open()\"\n  [class.hx-date-picker-disabled]=\"isDisabled()\"\n  [class.hx-date-picker-invalid]=\"invalid()\"\n>\n  <div class=\"hx-date-picker-field\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n    <input\n      #field\n      type=\"text\"\n      [readOnly]=\"!typeable()\"\n      class=\"hx-date-picker-input\"\n      autocomplete=\"off\"\n      aria-haspopup=\"dialog\"\n      [attr.id]=\"inputId() ?? null\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [value]=\"text()\"\n      [attr.aria-expanded]=\"open()\"\n      [attr.aria-controls]=\"open() ? popupId : null\"\n      [attr.aria-label]=\"ariaLabel() ?? null\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n      (input)=\"onTyping($event)\"\n      (change)=\"commitTyping()\"\n      (click)=\"onFieldClick()\"\n      (keydown)=\"onFieldKeydown($event)\"\n    />\n    <button\n      type=\"button\"\n      class=\"hx-date-picker-trigger\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-label]=\"chooseLabel()\"\n      [attr.aria-expanded]=\"open()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"toggle()\"\n    >\n      <span class=\"hx-date-picker-trigger-icon\" aria-hidden=\"true\"></span>\n    </button>\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayPanelClass=\"hx-date-picker-overlay\"\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"open()\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayPush]=\"true\"\n    (overlayOutsideClick)=\"onOutsideClick($event)\"\n    (overlayKeydown)=\"onOverlayKeydown($event)\"\n    (attach)=\"onAttach()\"\n    (detach)=\"open.set(false)\"\n  >\n    <div\n      class=\"hx-date-picker-popup hx-date-time-range-picker-popup\"\n      role=\"dialog\"\n      aria-modal=\"false\"\n      [id]=\"popupId\"\n      [attr.aria-label]=\"ariaLabel() ?? chooseLabel()\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n      (focusout)=\"onPopupFocusOut($event)\"\n    >\n      @if (presets().length > 0) {\n        <div class=\"hx-date-time-range-picker-presets\" role=\"group\" [attr.aria-label]=\"presetsLabel()\">\n          @for (preset of presets(); track $index) {\n            <button type=\"button\" class=\"hx-date-picker-button hx-date-time-range-picker-preset\" (click)=\"applyPreset(preset)\">{{ preset.label }}</button>\n          }\n        </div>\n      }\n      <div class=\"hx-date-time-range-picker-body\">\n        @if (!timeOnly()) {\n          <hx-date-picker\n            class=\"hx-date-time-range-picker-days\"\n            inline\n            selectionMode=\"range\"\n            [ariaLabel]=\"chooseLabel()\"\n            [value]=\"days()\"\n            [minDate]=\"minDate()\"\n            [maxDate]=\"maxDate()\"\n            [locale]=\"locale()\"\n            [firstDayOfWeek]=\"firstDayOfWeek()\"\n            [disabledDates]=\"disabledDates()\"\n            (valueChange)=\"setDays($event)\"\n          />\n        }\n        @if (showTime() || timeOnly()) {\n          <div class=\"hx-date-time-range-picker-times\">\n            <div class=\"hx-date-time-range-picker-time\">\n              <span class=\"hx-date-time-range-picker-caption\" aria-hidden=\"true\">{{ fromLabel() }}</span>\n              <hx-time-picker\n                inline\n                class=\"hx-date-time-range-picker-from\"\n                [ariaLabel]=\"fromLabel()\"\n                [value]=\"fromValue()\"\n                [hourFormat]=\"hourFormat()\"\n                [showMinutes]=\"showMinutes()\"\n                [showSeconds]=\"showSeconds()\"\n                [stepHour]=\"stepHour()\"\n                [stepMinute]=\"stepMinute()\"\n                [stepSecond]=\"stepSecond()\"\n                [locale]=\"locale()\"\n                [disabled]=\"isDisabled()\"\n                (valueChange)=\"setFromTime($event)\"\n              />\n            </div>\n            <div class=\"hx-date-time-range-picker-time\">\n              <span class=\"hx-date-time-range-picker-caption\" aria-hidden=\"true\">{{ toLabel() }}</span>\n              <hx-time-picker\n                inline\n                class=\"hx-date-time-range-picker-to\"\n                [ariaLabel]=\"toLabel()\"\n                [value]=\"toValue()\"\n                [hourFormat]=\"hourFormat()\"\n                [showMinutes]=\"showMinutes()\"\n                [showSeconds]=\"showSeconds()\"\n                [stepHour]=\"stepHour()\"\n                [stepMinute]=\"stepMinute()\"\n                [stepSecond]=\"stepSecond()\"\n                [locale]=\"locale()\"\n                [disabled]=\"isDisabled()\"\n                (valueChange)=\"setToTime($event)\"\n              />\n            </div>\n          </div>\n        }\n      </div>\n      <div class=\"hx-date-picker-buttonbar hx-date-time-range-picker-footer\">\n        @if (showButtonBar()) {\n          <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"clear()\">{{ clearLabel() }}</button>\n        }\n        <span class=\"hx-date-time-range-picker-spacer\"></span>\n        <button type=\"button\" class=\"hx-date-picker-button hx-date-time-range-picker-cancel\" (click)=\"close(true)\">{{ cancelLabel() }}</button>\n        <button type=\"button\" class=\"hx-date-picker-button hx-date-time-range-picker-submit\" (click)=\"submit()\">{{ submitLabel() }}</button>\n      </div>\n    </div>\n  </ng-template>\n</div>\n"
 		}]
 	}],
+	ctorParameters: () => [],
 	propDecorators: {
 		fromLabel: [{
 			type: i0.Input,
@@ -11611,6 +11491,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		presetsLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "presetsLabel",
+				required: false
+			}]
+		}],
+		presets: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "presets",
+				required: false
+			}]
+		}],
 		clearLabel: [{
 			type: i0.Input,
 			args: [{
@@ -11651,6 +11547,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		typeable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "typeable",
+				required: false
+			}]
+		}],
 		showTime: [{
 			type: i0.Input,
 			args: [{
@@ -21743,7 +21647,7 @@ var HxTheme = class HxTheme {
 	constructor() {
 		effect(() => {
 			const dark = this.#dark();
-			if (!this.#browser) return;
+			if (!this.#browser || this.#options.manageDark === false) return;
 			const root = this.#doc.documentElement;
 			const doc = this.#doc;
 			const apply = () => this.#darkSelector.apply(root, dark);
@@ -23848,6 +23752,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { HX_CHART_LOADER, HX_DIALOG_DATA, HX_PRIMARY_COLORS, HX_SURFACES, HX_SURFACE_NAMES, HX_THEME_OPTIONS, HxAccordion, HxAccordionContent, HxAccordionHeader, HxAccordionPanel, HxAutoComplete, HxAvatar, HxAvatarGroup, HxBadge, HxBreadcrumb, HxButton, HxButtonGroup, HxCard, HxCarousel, HxCarouselItem, HxCell, HxChart, HxCheckbox, HxChip, HxConfirmDialog, HxConfirmPopup, HxConfirmationService, HxDataTable, HxDatePicker, HxDateTimePicker, HxDateTimeRangePicker, HxDialog, HxDialogRef, HxDialogService, HxDivider, HxDrawer, HxFieldset, HxFileUpload, HxFloatLabel, HxGalleria, HxGalleriaCaption, HxGalleriaItemTemplate, HxGalleriaThumbnail, HxIconField, HxImage, HxImageIndicator, HxInput, HxInputGroup, HxInputGroupAddon, HxInputIcon, HxInputNumber, HxListbox, HxMenu, HxMenubar, HxMessage, HxMessageService, HxMultiSelect, HxOverlayBadge, HxPaginator, HxPanel, HxPassword, HxPopover, HxProgressBar, HxProgressSpinner, HxRadio, HxRating, HxRowExpansion, HxSelect, HxSelectButton, HxSkeleton, HxSlider, HxSplitButton, HxStep, HxStepContent, HxStepList, HxStepPanel, HxStepPanels, HxStepper, HxSwitch, HxTab, HxTabContent, HxTabList, HxTabPanel, HxTabPanels, HxTable, HxTableBody, HxTableCaption, HxTableEmpty, HxTableFooter, HxTableHeader, HxTabs, HxTag, HxTheme, HxTimePicker, HxTimeline, HxTimelineContent, HxTimelineMarker, HxTimelineOpposite, HxToast, HxToastItem, HxToggleButton, HxToolbar, HxTooltip, HxTree, HxTreeNodeTemplate, compareValues, formatFileSize, matchesAccept, provideHxTheme, resolveField };
+export { HX_DIALOG_DATA, HX_PRIMARY_COLORS, HX_SURFACES, HX_SURFACE_NAMES, HX_THEME_OPTIONS, HxAccordion, HxAccordionContent, HxAccordionHeader, HxAccordionPanel, HxAutoComplete, HxAvatar, HxAvatarGroup, HxBadge, HxBreadcrumb, HxButton, HxButtonGroup, HxCard, HxCarousel, HxCarouselItem, HxCell, HxCheckbox, HxChip, HxColumnHeader, HxConfirmDialog, HxConfirmPopup, HxConfirmationService, HxDataTable, HxDatePicker, HxDateTimePicker, HxDateTimeRangePicker, HxDialog, HxDialogRef, HxDialogService, HxDivider, HxDrawer, HxFieldset, HxFileUpload, HxFloatLabel, HxGalleria, HxGalleriaCaption, HxGalleriaItemTemplate, HxGalleriaThumbnail, HxIconField, HxImage, HxImageIndicator, HxInput, HxInputGroup, HxInputGroupAddon, HxInputIcon, HxInputNumber, HxListbox, HxMenu, HxMenubar, HxMessage, HxMessageService, HxMultiSelect, HxOverlayBadge, HxPaginator, HxPanel, HxPassword, HxPopover, HxProgressBar, HxProgressSpinner, HxRadio, HxRating, HxRowExpansion, HxSelect, HxSelectButton, HxSkeleton, HxSlider, HxSplitButton, HxStep, HxStepContent, HxStepList, HxStepPanel, HxStepPanels, HxStepper, HxSwitch, HxTab, HxTabContent, HxTabList, HxTabPanel, HxTabPanels, HxTable, HxTableBody, HxTableCaption, HxTableEmpty, HxTableFooter, HxTableHeader, HxTabs, HxTag, HxTheme, HxTimePicker, HxTimeline, HxTimelineContent, HxTimelineMarker, HxTimelineOpposite, HxToast, HxToastItem, HxToggleButton, HxToolbar, HxTooltip, HxTree, HxTreeNodeTemplate, compareValues, formatFileSize, matchesAccept, provideHxTheme, resolveField };
 
 //# sourceMappingURL=gravionlabs-helix-ui.mjs.map