@gravionlabs/helix-ui 22.2.4 → 22.2.6

package/fesm2022/gravionlabs-helix-ui.mjs

@@ -7543,6 +7543,14 @@ function isSameDay(a, b) {
 function compareDays(a, b) {
 	return startOfDay(a).getTime() - startOfDay(b).getTime();
 }
+function withTime(date, hours, minutes, seconds = 0) {
+	return new Date(date.getFullYear(), date.getMonth(), date.getDate(), hours, minutes, seconds);
+}
+function clampTime(date, min, max) {
+	if (isValidDate(min) && date.getTime() < min.getTime()) return new Date(min);
+	if (isValidDate(max) && date.getTime() > max.getTime()) return new Date(max);
+	return date;
+}
 function isValidDate(value) {
 	return value instanceof Date && !Number.isNaN(value.getTime());
 }
@@ -7555,43 +7563,3405 @@ function monthCells(year, month, firstDayOfWeek) {
 	for (let i = 0; i < cells.length; i += 7) rows.push(cells.slice(i, i + 7));
 	return rows;
 }
-var HxDatePicker = class HxDatePicker {
+function dateKey(date) {
+	return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+}
+function isDateDisabled(date, rules) {
+	const { min, max, disabledDates = [] } = rules;
+	return !!min && compareDays(date, min) < 0 || !!max && compareDays(date, max) > 0 || disabledDates.some((d) => isSameDay(d, date));
+}
+function isInRange(date, selected, mode) {
+	const [from, to] = selected;
+	return mode === "range" && !!from && !!to && compareDays(date, from) > 0 && compareDays(date, to) < 0;
+}
+function stepFocus(view, current, direction) {
+	return addMonths(current, (view === "day" ? 1 : view === "month" ? 12 : 144) * direction);
+}
+function focusMonth(current, month) {
+	return addMonths(new Date(current.getFullYear(), 0, current.getDate()), month);
+}
+function focusYear(current, year) {
+	return addMonths(new Date(year, current.getMonth(), 1), 0);
+}
+function decadeOf(year) {
+	const start = Math.floor(year / 12) * 12;
+	return Array.from({ length: 12 }, (_, i) => start + i);
+}
+function dayKeyTarget(key, date, firstDayOfWeek, shift = false) {
+	const weekday = (date.getDay() - firstDayOfWeek + 7) % 7;
+	switch (key) {
+		case "ArrowLeft": return addDays(date, -1);
+		case "ArrowRight": return addDays(date, 1);
+		case "ArrowUp": return addDays(date, -7);
+		case "ArrowDown": return addDays(date, 7);
+		case "Home": return addDays(date, -weekday);
+		case "End": return addDays(date, 6 - weekday);
+		case "PageUp": return addMonths(date, shift ? -12 : -1);
+		case "PageDown": return addMonths(date, shift ? 12 : 1);
+		default: return null;
+	}
+}
+var HxCalendar = class HxCalendar {
 	#host = inject(ElementRef);
 	#injector = inject(Injector);
+	focusedDate = model.required(...ngDevMode ? [{ debugName: "focusedDate" }] : 	/* istanbul ignore next */ []);
+	view = model("day", ...ngDevMode ? [{ debugName: "view" }] : 	/* istanbul ignore next */ []);
+	selectedDates = input([], ...ngDevMode ? [{ debugName: "selectedDates" }] : 	/* istanbul ignore next */ []);
+	selectionMode = input("single", ...ngDevMode ? [{ debugName: "selectionMode" }] : 	/* istanbul ignore next */ []);
+	minDate = input(null, ...ngDevMode ? [{ debugName: "minDate" }] : 	/* istanbul ignore next */ []);
+	maxDate = input(null, ...ngDevMode ? [{ debugName: "maxDate" }] : 	/* istanbul ignore next */ []);
+	disabledDates = input([], ...ngDevMode ? [{ debugName: "disabledDates" }] : 	/* istanbul ignore next */ []);
+	firstDayOfWeek = input(0, ...ngDevMode ? [{ debugName: "firstDayOfWeek" }] : 	/* istanbul ignore next */ []);
+	locale = input(...ngDevMode ? [void 0, { debugName: "locale" }] : 	/* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : 	/* istanbul ignore next */ []);
+	titleId = input.required(...ngDevMode ? [{ debugName: "titleId" }] : 	/* istanbul ignore next */ []);
+	today = input.required(...ngDevMode ? [{ debugName: "today" }] : 	/* istanbul ignore next */ []);
+	picked = output();
+	viewYear = computed(() => this.focusedDate().getFullYear(), ...ngDevMode ? [{ debugName: "viewYear" }] : 	/* istanbul ignore next */ []);
+	#formats = computed(() => {
+		const locale = this.locale();
+		return {
+			month: new Intl.DateTimeFormat(locale, { month: "long" }),
+			monthShort: new Intl.DateTimeFormat(locale, { month: "short" }),
+			weekdayShort: new Intl.DateTimeFormat(locale, { weekday: "short" }),
+			weekdayLong: new Intl.DateTimeFormat(locale, { weekday: "long" }),
+			full: new Intl.DateTimeFormat(locale, { dateStyle: "full" })
+		};
+	}, ...ngDevMode ? [{ debugName: "#formats" }] : 	/* istanbul ignore next */ []);
+	monthName = computed(() => this.#formats().month.format(this.focusedDate()), ...ngDevMode ? [{ debugName: "monthName" }] : 	/* istanbul ignore next */ []);
+	monthNames = computed(() => Array.from({ length: 12 }, (_, m) => this.#formats().monthShort.format(new Date(2026, m, 1))), ...ngDevMode ? [{ debugName: "monthNames" }] : 	/* istanbul ignore next */ []);
+	weekdays = computed(() => {
+		const first = this.firstDayOfWeek();
+		return Array.from({ length: 7 }, (_, i) => {
+			const day = new Date(2026, 0, 4 + (first + i) % 7);
+			return {
+				short: this.#formats().weekdayShort.format(day),
+				long: this.#formats().weekdayLong.format(day)
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "weekdays" }] : 	/* istanbul ignore next */ []);
+	weeks = computed(() => monthCells(this.focusedDate().getFullYear(), this.focusedDate().getMonth(), this.firstDayOfWeek()), ...ngDevMode ? [{ debugName: "weeks" }] : 	/* istanbul ignore next */ []);
+	decade = computed(() => decadeOf(this.focusedDate().getFullYear()), ...ngDevMode ? [{ debugName: "decade" }] : 	/* istanbul ignore next */ []);
+	dateKey = dateKey;
+	dayLabel(date) {
+		return this.#formats().full.format(date);
+	}
+	isToday(date) {
+		return isSameDay(date, this.today());
+	}
+	isSelected(date) {
+		return this.selectedDates().some((d) => isSameDay(d, date));
+	}
+	isInRange(date) {
+		return isInRange(date, this.selectedDates(), this.selectionMode());
+	}
+	isDateDisabled(date) {
+		return isDateDisabled(date, {
+			min: this.minDate(),
+			max: this.maxDate(),
+			disabledDates: this.disabledDates()
+		});
+	}
+	isFocusTarget(date) {
+		return isSameDay(date, this.focusedDate());
+	}
+	step(direction) {
+		this.focusedDate.set(stepFocus(this.view(), this.focusedDate(), direction));
+	}
+	chooseMonth(month) {
+		this.focusedDate.set(focusMonth(this.focusedDate(), month));
+		this.view.set("day");
+	}
+	chooseYear(year) {
+		this.focusedDate.set(focusYear(this.focusedDate(), year));
+		this.view.set("month");
+	}
+	onDayKeydown(event, date) {
+		const target = dayKeyTarget(event.key, date, this.firstDayOfWeek(), event.shiftKey);
+		if (!target) return;
+		event.preventDefault();
+		this.focusedDate.set(target);
+		afterNextRender(() => this.focusDay(), { injector: this.#injector });
+	}
+	focusDay() {
+		this.#host.nativeElement.querySelector(`.hx-date-picker-date[data-date="${dateKey(this.focusedDate())}"]`)?.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: HxCalendar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: HxCalendar,
+		isStandalone: true,
+		selector: "hx-calendar",
+		inputs: {
+			focusedDate: {
+				classPropertyName: "focusedDate",
+				publicName: "focusedDate",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			view: {
+				classPropertyName: "view",
+				publicName: "view",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectedDates: {
+				classPropertyName: "selectedDates",
+				publicName: "selectedDates",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectionMode: {
+				classPropertyName: "selectionMode",
+				publicName: "selectionMode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			minDate: {
+				classPropertyName: "minDate",
+				publicName: "minDate",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxDate: {
+				classPropertyName: "maxDate",
+				publicName: "maxDate",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabledDates: {
+				classPropertyName: "disabledDates",
+				publicName: "disabledDates",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			firstDayOfWeek: {
+				classPropertyName: "firstDayOfWeek",
+				publicName: "firstDayOfWeek",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			titleId: {
+				classPropertyName: "titleId",
+				publicName: "titleId",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			today: {
+				classPropertyName: "today",
+				publicName: "today",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			focusedDate: "focusedDateChange",
+			view: "viewChange",
+			picked: "picked"
+		},
+		host: { styleAttribute: "display: contents" },
+		ngImport: i0,
+		template: "<div class=\"hx-date-picker-header\">\n  <button\n    type=\"button\"\n    class=\"hx-date-picker-nav hx-date-picker-prev\"\n    [attr.aria-label]=\"view() === 'day' ? 'Previous month' : view() === 'month' ? 'Previous year' : 'Previous years'\"\n    [disabled]=\"disabled()\"\n    (click)=\"step(-1)\"\n  >\n    <span class=\"hx-date-picker-prev-icon\" aria-hidden=\"true\"></span>\n  </button>\n  <div class=\"hx-date-picker-title\" [id]=\"titleId()\" aria-live=\"polite\">\n    @switch (view()) {\n      @case ('day') {\n        <button type=\"button\" class=\"hx-date-picker-title-button\" [disabled]=\"disabled()\" (click)=\"view.set('month')\">{{ monthName() }}</button>\n        <button type=\"button\" class=\"hx-date-picker-title-button\" [disabled]=\"disabled()\" (click)=\"view.set('year')\">{{ viewYear() }}</button>\n      }\n      @case ('month') {\n        <button type=\"button\" class=\"hx-date-picker-title-button\" [disabled]=\"disabled()\" (click)=\"view.set('year')\">{{ viewYear() }}</button>\n      }\n      @default {\n        <span class=\"hx-date-picker-title-text\">{{ decade()[0] }} – {{ decade()[11] }}</span>\n      }\n    }\n  </div>\n  <button\n    type=\"button\"\n    class=\"hx-date-picker-nav hx-date-picker-next\"\n    [attr.aria-label]=\"view() === 'day' ? 'Next month' : view() === 'month' ? 'Next year' : 'Next years'\"\n    [disabled]=\"disabled()\"\n    (click)=\"step(1)\"\n  >\n    <span class=\"hx-date-picker-next-icon\" aria-hidden=\"true\"></span>\n  </button>\n</div>\n\n@switch (view()) {\n  @case ('day') {\n    <table class=\"hx-date-picker-grid\" role=\"grid\" [attr.aria-labelledby]=\"titleId()\" [attr.aria-multiselectable]=\"selectionMode() !== 'single' ? 'true' : null\">\n      <thead>\n        <tr>\n          @for (day of weekdays(); track $index) {\n            <th scope=\"col\" class=\"hx-date-picker-weekday\" [attr.abbr]=\"day.long\">{{ day.short }}</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (row of weeks(); track $index) {\n          <tr>\n            @for (cell of row; track $index) {\n              @if (cell) {\n                <td\n                  role=\"gridcell\"\n                  class=\"hx-date-picker-cell\"\n                  [attr.aria-selected]=\"isSelected(cell)\"\n                >\n                  <button\n                    type=\"button\"\n                    class=\"hx-date-picker-date\"\n                    [class.hx-date-picker-date-selected]=\"isSelected(cell)\"\n                    [class.hx-date-picker-date-in-range]=\"isInRange(cell)\"\n                    [class.hx-date-picker-date-today]=\"isToday(cell)\"\n                    [attr.data-date]=\"dateKey(cell)\"\n                    [attr.tabindex]=\"isFocusTarget(cell) ? 0 : -1\"\n                    [attr.aria-label]=\"dayLabel(cell)\"\n                    [attr.aria-current]=\"isToday(cell) ? 'date' : null\"\n                    [attr.aria-disabled]=\"isDateDisabled(cell) ? 'true' : null\"\n                    [disabled]=\"disabled()\"\n                    (click)=\"picked.emit(cell)\"\n                    (keydown)=\"onDayKeydown($event, cell)\"\n                  >\n                    {{ cell.getDate() }}\n                  </button>\n                </td>\n              } @else {\n                <td class=\"hx-date-picker-cell hx-date-picker-cell-empty\" role=\"gridcell\"></td>\n              }\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  }\n  @case ('month') {\n    <div class=\"hx-date-picker-months\">\n      @for (name of monthNames(); track $index) {\n        <button\n          type=\"button\"\n          class=\"hx-date-picker-month\"\n          [class.hx-date-picker-month-selected]=\"$index === focusedDate().getMonth() && viewYear() === focusedDate().getFullYear()\"\n          [disabled]=\"disabled()\"\n          (click)=\"chooseMonth($index)\"\n        >\n          {{ name }}\n        </button>\n      }\n    </div>\n  }\n  @default {\n    <div class=\"hx-date-picker-years\">\n      @for (year of decade(); track year) {\n        <button\n          type=\"button\"\n          class=\"hx-date-picker-year\"\n          [class.hx-date-picker-year-selected]=\"year === focusedDate().getFullYear()\"\n          [disabled]=\"disabled()\"\n          (click)=\"chooseYear(year)\"\n        >\n          {{ year }}\n        </button>\n      }\n    </div>\n  }\n}\n",
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: HxCalendar,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hx-calendar",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { style: "display: contents" },
+			template: "<div class=\"hx-date-picker-header\">\n  <button\n    type=\"button\"\n    class=\"hx-date-picker-nav hx-date-picker-prev\"\n    [attr.aria-label]=\"view() === 'day' ? 'Previous month' : view() === 'month' ? 'Previous year' : 'Previous years'\"\n    [disabled]=\"disabled()\"\n    (click)=\"step(-1)\"\n  >\n    <span class=\"hx-date-picker-prev-icon\" aria-hidden=\"true\"></span>\n  </button>\n  <div class=\"hx-date-picker-title\" [id]=\"titleId()\" aria-live=\"polite\">\n    @switch (view()) {\n      @case ('day') {\n        <button type=\"button\" class=\"hx-date-picker-title-button\" [disabled]=\"disabled()\" (click)=\"view.set('month')\">{{ monthName() }}</button>\n        <button type=\"button\" class=\"hx-date-picker-title-button\" [disabled]=\"disabled()\" (click)=\"view.set('year')\">{{ viewYear() }}</button>\n      }\n      @case ('month') {\n        <button type=\"button\" class=\"hx-date-picker-title-button\" [disabled]=\"disabled()\" (click)=\"view.set('year')\">{{ viewYear() }}</button>\n      }\n      @default {\n        <span class=\"hx-date-picker-title-text\">{{ decade()[0] }} – {{ decade()[11] }}</span>\n      }\n    }\n  </div>\n  <button\n    type=\"button\"\n    class=\"hx-date-picker-nav hx-date-picker-next\"\n    [attr.aria-label]=\"view() === 'day' ? 'Next month' : view() === 'month' ? 'Next year' : 'Next years'\"\n    [disabled]=\"disabled()\"\n    (click)=\"step(1)\"\n  >\n    <span class=\"hx-date-picker-next-icon\" aria-hidden=\"true\"></span>\n  </button>\n</div>\n\n@switch (view()) {\n  @case ('day') {\n    <table class=\"hx-date-picker-grid\" role=\"grid\" [attr.aria-labelledby]=\"titleId()\" [attr.aria-multiselectable]=\"selectionMode() !== 'single' ? 'true' : null\">\n      <thead>\n        <tr>\n          @for (day of weekdays(); track $index) {\n            <th scope=\"col\" class=\"hx-date-picker-weekday\" [attr.abbr]=\"day.long\">{{ day.short }}</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (row of weeks(); track $index) {\n          <tr>\n            @for (cell of row; track $index) {\n              @if (cell) {\n                <td\n                  role=\"gridcell\"\n                  class=\"hx-date-picker-cell\"\n                  [attr.aria-selected]=\"isSelected(cell)\"\n                >\n                  <button\n                    type=\"button\"\n                    class=\"hx-date-picker-date\"\n                    [class.hx-date-picker-date-selected]=\"isSelected(cell)\"\n                    [class.hx-date-picker-date-in-range]=\"isInRange(cell)\"\n                    [class.hx-date-picker-date-today]=\"isToday(cell)\"\n                    [attr.data-date]=\"dateKey(cell)\"\n                    [attr.tabindex]=\"isFocusTarget(cell) ? 0 : -1\"\n                    [attr.aria-label]=\"dayLabel(cell)\"\n                    [attr.aria-current]=\"isToday(cell) ? 'date' : null\"\n                    [attr.aria-disabled]=\"isDateDisabled(cell) ? 'true' : null\"\n                    [disabled]=\"disabled()\"\n                    (click)=\"picked.emit(cell)\"\n                    (keydown)=\"onDayKeydown($event, cell)\"\n                  >\n                    {{ cell.getDate() }}\n                  </button>\n                </td>\n              } @else {\n                <td class=\"hx-date-picker-cell hx-date-picker-cell-empty\" role=\"gridcell\"></td>\n              }\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  }\n  @case ('month') {\n    <div class=\"hx-date-picker-months\">\n      @for (name of monthNames(); track $index) {\n        <button\n          type=\"button\"\n          class=\"hx-date-picker-month\"\n          [class.hx-date-picker-month-selected]=\"$index === focusedDate().getMonth() && viewYear() === focusedDate().getFullYear()\"\n          [disabled]=\"disabled()\"\n          (click)=\"chooseMonth($index)\"\n        >\n          {{ name }}\n        </button>\n      }\n    </div>\n  }\n  @default {\n    <div class=\"hx-date-picker-years\">\n      @for (year of decade(); track year) {\n        <button\n          type=\"button\"\n          class=\"hx-date-picker-year\"\n          [class.hx-date-picker-year-selected]=\"year === focusedDate().getFullYear()\"\n          [disabled]=\"disabled()\"\n          (click)=\"chooseYear(year)\"\n        >\n          {{ year }}\n        </button>\n      }\n    </div>\n  }\n}\n"
+		}]
+	}],
+	propDecorators: {
+		focusedDate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "focusedDate",
+				required: true
+			}]
+		}, {
+			type: i0.Output,
+			args: ["focusedDateChange"]
+		}],
+		view: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "view",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["viewChange"]
+		}],
+		selectedDates: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectedDates",
+				required: false
+			}]
+		}],
+		selectionMode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectionMode",
+				required: false
+			}]
+		}],
+		minDate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minDate",
+				required: false
+			}]
+		}],
+		maxDate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxDate",
+				required: false
+			}]
+		}],
+		disabledDates: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabledDates",
+				required: false
+			}]
+		}],
+		firstDayOfWeek: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "firstDayOfWeek",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		titleId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "titleId",
+				required: true
+			}]
+		}],
+		today: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "today",
+				required: true
+			}]
+		}],
+		picked: [{
+			type: i0.Output,
+			args: ["picked"]
+		}]
+	}
+});
+function parseDateText(text, locale) {
+	const numbers = text.match(/\d+/g)?.map(Number);
+	if (!numbers || numbers.length !== 3) return null;
+	let [year, month, day] = [
+		0,
+		0,
+		0
+	];
+	if (/^\d{4}\D/.test(text.trim())) [year, month, day] = numbers;
+	else {
+		const order = new Intl.DateTimeFormat(locale, {
+			day: "numeric",
+			month: "numeric",
+			year: "numeric"
+		}).formatToParts(new Date(2e3, 10, 22)).filter((p) => [
+			"day",
+			"month",
+			"year"
+		].includes(p.type)).map((p) => p.type);
+		const byType = Object.fromEntries(order.map((type, i) => [type, numbers[i]]));
+		[year, month, day] = [
+			byType["year"],
+			byType["month"],
+			byType["day"]
+		];
+	}
+	if (year < 100) year += 2e3;
+	const date = new Date(year, month - 1, day);
+	return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day ? date : null;
+}
+function parseDateTimeText(text, options) {
+	const period12 = "(?:\\s*([ap])\\.?\\s*m\\.?)?";
+	const match = options.showMinutes ? new RegExp(`(\\d{1,2}):(\\d{2})(?::(\\d{2}))?${period12}`, "i").exec(text) : new RegExp(`(?:^|[\\s,;T])(\\d{1,2})(?::00(?::00)?)?${period12}\\s*$`, "i").exec(text);
+	if (!match) return null;
+	let hours = Number(match[1]);
+	const hourOnly = !options.showMinutes;
+	const [minutes, seconds] = hourOnly ? [0, 0] : [Number(match[2]), Number(match[3] ?? 0)];
+	const period = (hourOnly ? match[2] : match[4])?.toLowerCase();
+	if (period) {
+		if (hours < 1 || hours > 12) return null;
+		hours = hours % 12 + (period === "p" ? 12 : 0);
+	}
+	if (hours > 23 || minutes > 59 || seconds > 59) return null;
+	const rest = text.replace(match[0], hourOnly ? " " : "").replace(/^[\s,;T]+|[\s,;T]+$/g, "");
+	if (/\p{L}/u.test(rest)) return null;
+	const day = options.timeOnly && rest === "" ? startOfDay(options.fallbackDay) : parseDateText(rest, options.locale);
+	return day && withTime(day, hours, minutes, seconds);
+}
+const startOfDayOrNull$1 = (date) => isValidDate(date) ? startOfDay(date) : null;
+var HxDatePicker = class HxDatePicker {
+	#host = inject(ElementRef);
+	#injector = inject(Injector);
+	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : 	/* istanbul ignore next */ []);
+	showIcon = input(false, {
+		...ngDevMode ? { debugName: "showIcon" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	showButtonBar = input(false, {
+		...ngDevMode ? { debugName: "showButtonBar" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	dateFormat = input(...ngDevMode ? [void 0, { debugName: "dateFormat" }] : 	/* istanbul ignore next */ []);
+	todayLabel = input("Today", ...ngDevMode ? [{ debugName: "todayLabel" }] : 	/* istanbul ignore next */ []);
+	clearLabel = input("Clear", ...ngDevMode ? [{ debugName: "clearLabel" }] : 	/* istanbul ignore next */ []);
+	chooseLabel = input("Choose date", ...ngDevMode ? [{ debugName: "chooseLabel" }] : 	/* istanbul ignore next */ []);
+	inputId = input(...ngDevMode ? [void 0, { debugName: "inputId" }] : 	/* istanbul ignore next */ []);
+	inline = input(false, {
+		...ngDevMode ? { debugName: "inline" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	selectionMode = input("single", ...ngDevMode ? [{ debugName: "selectionMode" }] : 	/* istanbul ignore next */ []);
+	minDate = input(null, ...ngDevMode ? [{ debugName: "minDate" }] : 	/* istanbul ignore next */ []);
+	maxDate = input(null, ...ngDevMode ? [{ debugName: "maxDate" }] : 	/* istanbul ignore next */ []);
+	disabledDates = input([], ...ngDevMode ? [{ debugName: "disabledDates" }] : 	/* istanbul ignore next */ []);
+	firstDayOfWeek = input(0, {
+		...ngDevMode ? { debugName: "firstDayOfWeek" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	locale = input(...ngDevMode ? [void 0, { debugName: "locale" }] : 	/* istanbul ignore next */ []);
+	ariaLabel = input(...ngDevMode ? [void 0, { debugName: "ariaLabel" }] : 	/* istanbul ignore next */ []);
+	ariaLabelledby = input(...ngDevMode ? [void 0, { debugName: "ariaLabelledby" }] : 	/* istanbul ignore next */ []);
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : 	/* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touch = output();
+	open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : 	/* istanbul ignore next */ []);
+	titleId = nextId("hx-date-picker-title");
+	popupId = nextId("hx-date-picker-popup");
+	positions = [{
+		originX: "start",
+		originY: "bottom",
+		overlayX: "start",
+		overlayY: "top",
+		offsetY: 2
+	}, {
+		originX: "start",
+		originY: "top",
+		overlayX: "start",
+		overlayY: "bottom",
+		offsetY: -2
+	}];
+	field = viewChild("field", ...ngDevMode ? [{ debugName: "field" }] : 	/* istanbul ignore next */ []);
+	calendar = viewChild(HxCalendar, ...ngDevMode ? [{ debugName: "calendar" }] : 	/* istanbul ignore next */ []);
+	#typed = signal(null, ...ngDevMode ? [{ debugName: "#typed" }] : 	/* istanbul ignore next */ []);
+	view = signal("day", ...ngDevMode ? [{ debugName: "view" }] : 	/* istanbul ignore next */ []);
+	#cvaDisabled = signal(false, ...ngDevMode ? [{ debugName: "#cvaDisabled" }] : 	/* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.#cvaDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : 	/* istanbul ignore next */ []);
+	focusedDate = signal(startOfDay(/* @__PURE__ */ new Date()), ...ngDevMode ? [{ debugName: "focusedDate" }] : 	/* istanbul ignore next */ []);
+	today = startOfDay(/* @__PURE__ */ new Date());
+	selectedDates = computed(() => {
+		const value = this.value();
+		if (Array.isArray(value)) return value.filter(isValidDate);
+		return isValidDate(value) ? [value] : [];
+	}, ...ngDevMode ? [{ debugName: "selectedDates" }] : 	/* istanbul ignore next */ []);
+	#format = computed(() => new Intl.DateTimeFormat(this.locale(), this.dateFormat() ?? {
+		day: "2-digit",
+		month: "2-digit",
+		year: "numeric"
+	}), ...ngDevMode ? [{ debugName: "#format" }] : 	/* istanbul ignore next */ []);
+	text = computed(() => {
+		const typed = this.#typed();
+		if (typed !== null) return typed;
+		const dates = this.selectedDates();
+		const fmt = this.#format();
+		if (this.selectionMode() === "range") return dates.map((d) => fmt.format(d)).join(" – ");
+		return dates.map((d) => fmt.format(d)).join(", ");
+	}, ...ngDevMode ? [{ debugName: "text" }] : 	/* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			const first = this.selectedDates()[0] ?? clampTime(this.today, startOfDayOrNull$1(this.minDate()), this.maxDate());
+			const shown = untracked(() => this.focusedDate());
+			if (first && (first.getFullYear() !== shown.getFullYear() || first.getMonth() !== shown.getMonth())) this.focusedDate.set(startOfDay(first));
+		});
+	}
+	#onChange = () => {};
+	#onTouched = () => {};
+	writeValue(value) {
+		this.#typed.set(null);
+		this.value.set(value ?? null);
+	}
+	registerOnChange(fn) {
+		this.#onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.#onTouched = fn;
+	}
+	setDisabledState(disabled) {
+		this.#cvaDisabled.set(disabled);
+	}
+	focus() {
+		const field = this.field();
+		if (field) field.nativeElement.focus();
+		else this.#focusDay();
+	}
+	isDateDisabled(date) {
+		return isDateDisabled(date, {
+			min: this.minDate(),
+			max: this.maxDate(),
+			disabledDates: this.disabledDates()
+		});
+	}
+	isSelected(date) {
+		return this.selectedDates().some((d) => isSameDay(d, date));
+	}
+	pick(date) {
+		if (this.isDisabled() || this.isDateDisabled(date)) return;
+		const day = startOfDay(date);
+		this.focusedDate.set(day);
+		const selected = this.selectedDates();
+		let next;
+		const mode = this.selectionMode();
+		switch (mode) {
+			case "multiple":
+				next = this.isSelected(day) ? selected.filter((d) => !isSameDay(d, day)) : [...selected, day];
+				break;
+			case "range":
+				if (selected.length !== 1) next = [day];
+				else next = compareDays(day, selected[0]) < 0 ? [day, selected[0]] : [selected[0], day];
+				break;
+			default: next = day;
+		}
+		this.#typed.set(null);
+		this.#commit(next);
+		if (!this.inline()) {
+			if (mode === "single" || mode === "range" && Array.isArray(next) && next.length === 2) this.close(true);
+		}
+	}
+	#commit(next) {
+		this.value.set(next);
+		this.#onChange(next);
+	}
+	#focusDay() {
+		afterNextRender(() => {
+			this.calendar()?.focusDay();
+		}, { injector: this.#injector });
+	}
+	show() {
+		if (this.isDisabled() || this.inline() || this.open()) return;
+		this.open.set(true);
+	}
+	toggle() {
+		if (this.open()) this.close(true);
+		else this.show();
+	}
+	close(refocus = false) {
+		if (!this.open()) return;
+		this.open.set(false);
+		if (refocus) this.field()?.nativeElement.focus();
+	}
+	onAttach() {
+		const first = this.selectedDates()[0];
+		this.view.set("day");
+		this.focusedDate.set(startOfDay(first ?? clampTime(this.today, startOfDayOrNull$1(this.minDate()), this.maxDate())));
+		this.#focusDay();
+	}
+	onOverlayKeydown(event) {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			this.close(true);
+		}
+	}
+	onOutsideClick(event) {
+		if (!this.#host.nativeElement.contains(event.target)) this.close();
+	}
+	onFieldKeydown(event) {
+		if (event.key === "ArrowDown" || event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			this.show();
+		} else if (event.key === "Enter") this.commitTyping();
+	}
+	onTyping(event) {
+		this.#typed.set(event.target.value);
+	}
+	commitTyping() {
+		const typed = this.#typed();
+		if (typed === null) return;
+		this.#typed.set(null);
+		this.#parseAndCommit(typed);
+		const field = this.field();
+		if (field) field.nativeElement.value = this.text();
+	}
+	#parseAndCommit(typed) {
+		const text = typed.trim();
+		if (text === "") {
+			this.#commit(this.selectionMode() === "single" ? null : []);
+			return;
+		}
+		const dates = (this.selectionMode() === "single" ? [text] : text.split(/\s*(?:,|–)\s*/)).map((part) => this.#parse(part));
+		if (dates.some((d) => d === null || this.isDateDisabled(d))) return;
+		const valid = dates;
+		if (this.selectionMode() === "range" && valid.length > 2) return;
+		this.#commit(this.selectionMode() === "single" ? valid[0] : valid);
+		if (valid[0]) this.focusedDate.set(startOfDay(valid[0]));
+	}
+	#parse(text) {
+		return parseDateText(text, this.locale());
+	}
+	selectToday() {
+		this.pick(this.today);
+	}
+	clear() {
+		this.#typed.set(null);
+		this.#commit(this.selectionMode() === "single" ? null : []);
+		this.close(true);
+	}
+	onHostFocusOut(event) {
+		if (this.inline()) return;
+		const next = event.relatedTarget;
+		if (next?.closest(".hx-date-picker-popup") || this.#host.nativeElement.contains(next)) return;
+		if (this.open()) return;
+		this.close();
+		this.commitTyping();
+		this.#onTouched();
+		this.touch.emit();
+	}
+	onFocusOut(event) {
+		if (!this.inline()) return;
+		if (this.#host.nativeElement.contains(event.relatedTarget)) return;
+		this.#onTouched();
+		this.touch.emit();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: HxDatePicker,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: HxDatePicker,
+		isStandalone: true,
+		selector: "hx-date-picker",
+		inputs: {
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showIcon: {
+				classPropertyName: "showIcon",
+				publicName: "showIcon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showButtonBar: {
+				classPropertyName: "showButtonBar",
+				publicName: "showButtonBar",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dateFormat: {
+				classPropertyName: "dateFormat",
+				publicName: "dateFormat",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			todayLabel: {
+				classPropertyName: "todayLabel",
+				publicName: "todayLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			clearLabel: {
+				classPropertyName: "clearLabel",
+				publicName: "clearLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			chooseLabel: {
+				classPropertyName: "chooseLabel",
+				publicName: "chooseLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inputId: {
+				classPropertyName: "inputId",
+				publicName: "inputId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inline: {
+				classPropertyName: "inline",
+				publicName: "inline",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectionMode: {
+				classPropertyName: "selectionMode",
+				publicName: "selectionMode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			minDate: {
+				classPropertyName: "minDate",
+				publicName: "minDate",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxDate: {
+				classPropertyName: "maxDate",
+				publicName: "maxDate",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabledDates: {
+				classPropertyName: "disabledDates",
+				publicName: "disabledDates",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			firstDayOfWeek: {
+				classPropertyName: "firstDayOfWeek",
+				publicName: "firstDayOfWeek",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				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
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			touch: "touch"
+		},
+		host: {
+			listeners: { "focusout": "onHostFocusOut($event)" },
+			properties: {
+				"class.hx-date-picker-inline": "inline()",
+				"class.hx-date-picker-disabled": "isDisabled()",
+				"class.hx-date-picker-invalid": "invalid()",
+				"class.hx-date-picker-open": "open()",
+				"class.hx-date-picker-has-icon": "showIcon() && !inline()",
+				"class.hx-filled": "!inline() && text() !== \"\""
+			},
+			classAttribute: "hx-date-picker"
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => HxDatePicker),
+			multi: true
+		}],
+		viewQueries: [{
+			propertyName: "field",
+			first: true,
+			predicate: ["field"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "calendar",
+			first: true,
+			predicate: HxCalendar,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "@if (inline()) {\n  <ng-container [ngTemplateOutlet]=\"calendar\" />\n} @else {\n  <div class=\"hx-date-picker-field\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n    <input\n      #field\n      type=\"text\"\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)=\"show()\"\n      (keydown)=\"onFieldKeydown($event)\"\n    />\n    @if (showIcon()) {\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    }\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\"\n      role=\"dialog\"\n      aria-modal=\"false\"\n      [id]=\"popupId\"\n      [attr.aria-label]=\"ariaLabel() ?? 'Choose date'\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n    >\n      <ng-container [ngTemplateOutlet]=\"calendar\" />\n      @if (showButtonBar()) {\n        <div class=\"hx-date-picker-buttonbar\">\n          <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"selectToday()\">{{ todayLabel() }}</button>\n          <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"clear()\">{{ clearLabel() }}</button>\n        </div>\n      }\n    </div>\n  </ng-template>\n}\n\n<ng-template #calendar>\n<div\n  class=\"hx-date-picker-panel\"\n  role=\"group\"\n  [attr.aria-label]=\"ariaLabel() ?? 'Calendar'\"\n  [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n  (focusout)=\"onFocusOut($event)\"\n>\n    <hx-calendar\n      [(focusedDate)]=\"focusedDate\"\n      [(view)]=\"view\"\n      [selectedDates]=\"selectedDates()\"\n      [selectionMode]=\"selectionMode()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [disabledDates]=\"disabledDates()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      [locale]=\"locale()\"\n      [disabled]=\"isDisabled()\"\n      [titleId]=\"titleId\"\n      [today]=\"today\"\n      (picked)=\"pick($event)\"\n    />\n</div>\n</ng-template>\n",
+		dependencies: [
+			{
+				kind: "directive",
+				type: CdkConnectedOverlay,
+				selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]",
+				inputs: [
+					"cdkConnectedOverlayOrigin",
+					"cdkConnectedOverlayPositions",
+					"cdkConnectedOverlayPositionStrategy",
+					"cdkConnectedOverlayOffsetX",
+					"cdkConnectedOverlayOffsetY",
+					"cdkConnectedOverlayWidth",
+					"cdkConnectedOverlayHeight",
+					"cdkConnectedOverlayMinWidth",
+					"cdkConnectedOverlayMinHeight",
+					"cdkConnectedOverlayBackdropClass",
+					"cdkConnectedOverlayPanelClass",
+					"cdkConnectedOverlayViewportMargin",
+					"cdkConnectedOverlayScrollStrategy",
+					"cdkConnectedOverlayOpen",
+					"cdkConnectedOverlayDisableClose",
+					"cdkConnectedOverlayTransformOriginOn",
+					"cdkConnectedOverlayHasBackdrop",
+					"cdkConnectedOverlayLockPosition",
+					"cdkConnectedOverlayFlexibleDimensions",
+					"cdkConnectedOverlayGrowAfterOpen",
+					"cdkConnectedOverlayPush",
+					"cdkConnectedOverlayDisposeOnNavigation",
+					"cdkConnectedOverlayUsePopover",
+					"cdkConnectedOverlayMatchWidth",
+					"cdkConnectedOverlay"
+				],
+				outputs: [
+					"backdropClick",
+					"positionChange",
+					"attach",
+					"detach",
+					"overlayKeydown",
+					"overlayOutsideClick"
+				],
+				exportAs: ["cdkConnectedOverlay"]
+			},
+			{
+				kind: "directive",
+				type: CdkOverlayOrigin,
+				selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]",
+				exportAs: ["cdkOverlayOrigin"]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: HxCalendar,
+				selector: "hx-calendar",
+				inputs: [
+					"focusedDate",
+					"view",
+					"selectedDates",
+					"selectionMode",
+					"minDate",
+					"maxDate",
+					"disabledDates",
+					"firstDayOfWeek",
+					"locale",
+					"disabled",
+					"titleId",
+					"today"
+				],
+				outputs: [
+					"focusedDateChange",
+					"viewChange",
+					"picked"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: HxDatePicker,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hx-date-picker",
+			imports: [
+				CdkConnectedOverlay,
+				CdkOverlayOrigin,
+				NgTemplateOutlet,
+				HxCalendar
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => HxDatePicker),
+				multi: true
+			}],
+			host: {
+				class: "hx-date-picker",
+				"[class.hx-date-picker-inline]": "inline()",
+				"[class.hx-date-picker-disabled]": "isDisabled()",
+				"[class.hx-date-picker-invalid]": "invalid()",
+				"[class.hx-date-picker-open]": "open()",
+				"[class.hx-date-picker-has-icon]": "showIcon() && !inline()",
+				"[class.hx-filled]": "!inline() && text() !== \"\"",
+				"(focusout)": "onHostFocusOut($event)"
+			},
+			template: "@if (inline()) {\n  <ng-container [ngTemplateOutlet]=\"calendar\" />\n} @else {\n  <div class=\"hx-date-picker-field\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n    <input\n      #field\n      type=\"text\"\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)=\"show()\"\n      (keydown)=\"onFieldKeydown($event)\"\n    />\n    @if (showIcon()) {\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    }\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\"\n      role=\"dialog\"\n      aria-modal=\"false\"\n      [id]=\"popupId\"\n      [attr.aria-label]=\"ariaLabel() ?? 'Choose date'\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n    >\n      <ng-container [ngTemplateOutlet]=\"calendar\" />\n      @if (showButtonBar()) {\n        <div class=\"hx-date-picker-buttonbar\">\n          <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"selectToday()\">{{ todayLabel() }}</button>\n          <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"clear()\">{{ clearLabel() }}</button>\n        </div>\n      }\n    </div>\n  </ng-template>\n}\n\n<ng-template #calendar>\n<div\n  class=\"hx-date-picker-panel\"\n  role=\"group\"\n  [attr.aria-label]=\"ariaLabel() ?? 'Calendar'\"\n  [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n  (focusout)=\"onFocusOut($event)\"\n>\n    <hx-calendar\n      [(focusedDate)]=\"focusedDate\"\n      [(view)]=\"view\"\n      [selectedDates]=\"selectedDates()\"\n      [selectionMode]=\"selectionMode()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [disabledDates]=\"disabledDates()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      [locale]=\"locale()\"\n      [disabled]=\"isDisabled()\"\n      [titleId]=\"titleId\"\n      [today]=\"today\"\n      (picked)=\"pick($event)\"\n    />\n</div>\n</ng-template>\n"
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		showIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showIcon",
+				required: false
+			}]
+		}],
+		showButtonBar: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showButtonBar",
+				required: false
+			}]
+		}],
+		dateFormat: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dateFormat",
+				required: false
+			}]
+		}],
+		todayLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "todayLabel",
+				required: false
+			}]
+		}],
+		clearLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clearLabel",
+				required: false
+			}]
+		}],
+		chooseLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "chooseLabel",
+				required: false
+			}]
+		}],
+		inputId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inputId",
+				required: false
+			}]
+		}],
+		inline: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inline",
+				required: false
+			}]
+		}],
+		selectionMode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectionMode",
+				required: false
+			}]
+		}],
+		minDate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minDate",
+				required: false
+			}]
+		}],
+		maxDate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxDate",
+				required: false
+			}]
+		}],
+		disabledDates: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabledDates",
+				required: false
+			}]
+		}],
+		firstDayOfWeek: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "firstDayOfWeek",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		ariaLabelledby: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabelledby",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}],
+		field: [{
+			type: i0.ViewChild,
+			args: ["field", { isSignal: true }]
+		}],
+		calendar: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => HxCalendar), { isSignal: true }]
+		}]
+	}
+});
+const pad = (n) => String(n).padStart(2, "0");
+function buildTimeColumns(time, options) {
+	const { hours, minutes, seconds } = time;
+	const { hour12: twelve, labels } = options;
+	const hourNow = twelve ? hours % 12 || 12 : hours;
+	const columns = [{
+		unit: "hour",
+		label: labels.hour,
+		now: hourNow,
+		min: twelve ? 1 : 0,
+		max: twelve ? 12 : 23,
+		text: pad(hourNow),
+		valueText: String(hourNow)
+	}];
+	if (options.showMinutes) columns.push({
+		unit: "minute",
+		label: labels.minute,
+		now: minutes,
+		min: 0,
+		max: 59,
+		text: pad(minutes),
+		valueText: String(minutes)
+	});
+	if (options.showMinutes && options.showSeconds) columns.push({
+		unit: "second",
+		label: labels.second,
+		now: seconds,
+		min: 0,
+		max: 59,
+		text: pad(seconds),
+		valueText: String(seconds)
+	});
+	if (twelve) {
+		const parts = new Intl.DateTimeFormat(options.locale, {
+			hour: "numeric",
+			hourCycle: "h12"
+		});
+		const period = (h) => parts.formatToParts(new Date(2026, 0, 1, h)).find((p) => p.type === "dayPeriod")?.value ?? (h < 12 ? "AM" : "PM");
+		const pm = hours >= 12 ? 1 : 0;
+		columns.push({
+			unit: "period",
+			label: labels.period,
+			now: pm,
+			min: 0,
+			max: 1,
+			text: period(pm ? 12 : 0),
+			valueText: period(pm ? 12 : 0)
+		});
+	}
+	return columns;
+}
+function unitValues(column, steps) {
+	const step = column.unit === "hour" ? steps.hour : column.unit === "minute" ? steps.minute : column.unit === "second" ? steps.second : 1;
+	const values = [];
+	for (let v = column.min; v <= column.max; v += Math.max(1, step || 1)) values.push(v);
+	return values;
+}
+function nextUnitValue(column, steps, direction) {
+	const values = unitValues(column, steps);
+	return direction > 0 ? values.find((v) => v > column.now) ?? values[0] : values.filter((v) => v < column.now).pop() ?? values[values.length - 1];
+}
+function applyUnit(time, unit, value, hour12) {
+	const { hours } = time;
+	switch (unit) {
+		case "hour": return {
+			...time,
+			hours: hour12 ? value % 12 + (hours >= 12 ? 12 : 0) : value
+		};
+		case "minute": return {
+			...time,
+			minutes: value
+		};
+		case "second": return {
+			...time,
+			seconds: value
+		};
+		default: return {
+			...time,
+			hours: hours % 12 + (value ? 12 : 0)
+		};
+	}
+}
+function jumpKeyTarget(key, column, steps) {
+	const values = unitValues(column, steps);
+	const page = column.unit === "hour" ? 6 : 10;
+	const nearest = (target) => values.reduce((best, v) => Math.abs(v - target) < Math.abs(best - target) ? v : best);
+	switch (key) {
+		case "PageUp": return nearest(Math.min(column.max, column.now + page));
+		case "PageDown": return nearest(Math.max(column.min, column.now - page));
+		case "Home": return values[0];
+		case "End": return values[values.length - 1];
+		default: return null;
+	}
+}
+var HxTimeRow = class HxTimeRow {
+	#host = inject(ElementRef);
+	time = input.required(...ngDevMode ? [{ debugName: "time" }] : 	/* istanbul ignore next */ []);
+	hour12 = input(false, ...ngDevMode ? [{ debugName: "hour12" }] : 	/* istanbul ignore next */ []);
+	showMinutes = input(true, ...ngDevMode ? [{ debugName: "showMinutes" }] : 	/* istanbul ignore next */ []);
+	showSeconds = input(false, ...ngDevMode ? [{ debugName: "showSeconds" }] : 	/* istanbul ignore next */ []);
+	stepHour = input(1, ...ngDevMode ? [{ debugName: "stepHour" }] : 	/* istanbul ignore next */ []);
+	stepMinute = input(1, ...ngDevMode ? [{ debugName: "stepMinute" }] : 	/* istanbul ignore next */ []);
+	stepSecond = input(1, ...ngDevMode ? [{ debugName: "stepSecond" }] : 	/* istanbul ignore next */ []);
+	locale = input(...ngDevMode ? [void 0, { debugName: "locale" }] : 	/* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : 	/* istanbul ignore next */ []);
+	timeLabel = input("Time", ...ngDevMode ? [{ debugName: "timeLabel" }] : 	/* istanbul ignore next */ []);
+	hourLabel = input("Hour", ...ngDevMode ? [{ debugName: "hourLabel" }] : 	/* istanbul ignore next */ []);
+	minuteLabel = input("Minute", ...ngDevMode ? [{ debugName: "minuteLabel" }] : 	/* istanbul ignore next */ []);
+	secondLabel = input("Second", ...ngDevMode ? [{ debugName: "secondLabel" }] : 	/* istanbul ignore next */ []);
+	periodLabel = input("AM/PM", ...ngDevMode ? [{ debugName: "periodLabel" }] : 	/* istanbul ignore next */ []);
+	timeChange = output();
+	#steps = computed(() => ({
+		hour: this.stepHour(),
+		minute: this.stepMinute(),
+		second: this.stepSecond()
+	}), ...ngDevMode ? [{ debugName: "#steps" }] : 	/* istanbul ignore next */ []);
+	columns = computed(() => buildTimeColumns(this.time(), {
+		hour12: this.hour12(),
+		showMinutes: this.showMinutes(),
+		showSeconds: this.showSeconds(),
+		locale: this.locale(),
+		labels: {
+			hour: this.hourLabel(),
+			minute: this.minuteLabel(),
+			second: this.secondLabel(),
+			period: this.periodLabel()
+		}
+	}), ...ngDevMode ? [{ debugName: "columns" }] : 	/* istanbul ignore next */ []);
+	focus() {
+		this.#host.nativeElement.querySelector(".hx-date-picker-time-spin")?.focus();
+	}
+	#set(column, value) {
+		if (this.disabled()) return;
+		this.timeChange.emit(applyUnit(this.time(), column.unit, value, this.hour12()));
+	}
+	stepTime(column, direction) {
+		this.#set(column, nextUnitValue(column, this.#steps(), direction));
+	}
+	onTimeKeydown(event, column) {
+		if (this.disabled()) return;
+		if (event.key === "ArrowUp") this.stepTime(column, 1);
+		else if (event.key === "ArrowDown") this.stepTime(column, -1);
+		else {
+			const target = jumpKeyTarget(event.key, column, this.#steps());
+			if (target === null) return;
+			this.#set(column, target);
+		}
+		event.preventDefault();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: HxTimeRow,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: HxTimeRow,
+		isStandalone: true,
+		selector: "hx-time-row",
+		inputs: {
+			time: {
+				classPropertyName: "time",
+				publicName: "time",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			hour12: {
+				classPropertyName: "hour12",
+				publicName: "hour12",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showMinutes: {
+				classPropertyName: "showMinutes",
+				publicName: "showMinutes",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showSeconds: {
+				classPropertyName: "showSeconds",
+				publicName: "showSeconds",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stepHour: {
+				classPropertyName: "stepHour",
+				publicName: "stepHour",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stepMinute: {
+				classPropertyName: "stepMinute",
+				publicName: "stepMinute",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stepSecond: {
+				classPropertyName: "stepSecond",
+				publicName: "stepSecond",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			timeLabel: {
+				classPropertyName: "timeLabel",
+				publicName: "timeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hourLabel: {
+				classPropertyName: "hourLabel",
+				publicName: "hourLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			minuteLabel: {
+				classPropertyName: "minuteLabel",
+				publicName: "minuteLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			secondLabel: {
+				classPropertyName: "secondLabel",
+				publicName: "secondLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			periodLabel: {
+				classPropertyName: "periodLabel",
+				publicName: "periodLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { timeChange: "timeChange" },
+		host: { styleAttribute: "display: contents" },
+		ngImport: i0,
+		template: "<div class=\"hx-date-picker-time\" role=\"group\" [attr.aria-label]=\"timeLabel()\">\n  @for (column of columns(); track column.unit) {\n    @if (column.unit !== 'hour' && column.unit !== 'period') {\n      <span class=\"hx-date-picker-time-separator\" aria-hidden=\"true\">:</span>\n    }\n    <div class=\"hx-date-picker-time-column\">\n      <button type=\"button\" class=\"hx-date-picker-time-button\" tabindex=\"-1\" aria-hidden=\"true\" [disabled]=\"disabled()\" (mousedown)=\"$event.preventDefault()\" (click)=\"stepTime(column, 1)\">\n        <span class=\"hx-date-picker-time-up-icon\" aria-hidden=\"true\"></span>\n      </button>\n      <div\n        class=\"hx-date-picker-time-spin\"\n        role=\"spinbutton\"\n        [attr.tabindex]=\"disabled() ? -1 : 0\"\n        [attr.aria-label]=\"column.label\"\n        [attr.aria-valuenow]=\"column.now\"\n        [attr.aria-valuemin]=\"column.min\"\n        [attr.aria-valuemax]=\"column.max\"\n        [attr.aria-valuetext]=\"column.valueText\"\n        [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n        (keydown)=\"onTimeKeydown($event, column)\"\n      >\n        {{ column.text }}\n      </div>\n      <button type=\"button\" class=\"hx-date-picker-time-button\" tabindex=\"-1\" aria-hidden=\"true\" [disabled]=\"disabled()\" (mousedown)=\"$event.preventDefault()\" (click)=\"stepTime(column, -1)\">\n        <span class=\"hx-date-picker-time-down-icon\" aria-hidden=\"true\"></span>\n      </button>\n    </div>\n  }\n</div>\n",
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: HxTimeRow,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hx-time-row",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { style: "display: contents" },
+			template: "<div class=\"hx-date-picker-time\" role=\"group\" [attr.aria-label]=\"timeLabel()\">\n  @for (column of columns(); track column.unit) {\n    @if (column.unit !== 'hour' && column.unit !== 'period') {\n      <span class=\"hx-date-picker-time-separator\" aria-hidden=\"true\">:</span>\n    }\n    <div class=\"hx-date-picker-time-column\">\n      <button type=\"button\" class=\"hx-date-picker-time-button\" tabindex=\"-1\" aria-hidden=\"true\" [disabled]=\"disabled()\" (mousedown)=\"$event.preventDefault()\" (click)=\"stepTime(column, 1)\">\n        <span class=\"hx-date-picker-time-up-icon\" aria-hidden=\"true\"></span>\n      </button>\n      <div\n        class=\"hx-date-picker-time-spin\"\n        role=\"spinbutton\"\n        [attr.tabindex]=\"disabled() ? -1 : 0\"\n        [attr.aria-label]=\"column.label\"\n        [attr.aria-valuenow]=\"column.now\"\n        [attr.aria-valuemin]=\"column.min\"\n        [attr.aria-valuemax]=\"column.max\"\n        [attr.aria-valuetext]=\"column.valueText\"\n        [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n        (keydown)=\"onTimeKeydown($event, column)\"\n      >\n        {{ column.text }}\n      </div>\n      <button type=\"button\" class=\"hx-date-picker-time-button\" tabindex=\"-1\" aria-hidden=\"true\" [disabled]=\"disabled()\" (mousedown)=\"$event.preventDefault()\" (click)=\"stepTime(column, -1)\">\n        <span class=\"hx-date-picker-time-down-icon\" aria-hidden=\"true\"></span>\n      </button>\n    </div>\n  }\n</div>\n"
+		}]
+	}],
+	propDecorators: {
+		time: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "time",
+				required: true
+			}]
+		}],
+		hour12: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hour12",
+				required: false
+			}]
+		}],
+		showMinutes: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showMinutes",
+				required: false
+			}]
+		}],
+		showSeconds: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showSeconds",
+				required: false
+			}]
+		}],
+		stepHour: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stepHour",
+				required: false
+			}]
+		}],
+		stepMinute: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stepMinute",
+				required: false
+			}]
+		}],
+		stepSecond: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stepSecond",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		timeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "timeLabel",
+				required: false
+			}]
+		}],
+		hourLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hourLabel",
+				required: false
+			}]
+		}],
+		minuteLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minuteLabel",
+				required: false
+			}]
+		}],
+		secondLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "secondLabel",
+				required: false
+			}]
+		}],
+		periodLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "periodLabel",
+				required: false
+			}]
+		}],
+		timeChange: [{
+			type: i0.Output,
+			args: ["timeChange"]
+		}]
+	}
+});
+const startOfDayOrNull = (date) => isValidDate(date) ? startOfDay(date) : null;
+var HxDateTimePicker = class HxDateTimePicker {
+	#host = inject(ElementRef);
+	#injector = inject(Injector);
+	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : 	/* istanbul ignore next */ []);
+	showIcon = input(false, {
+		...ngDevMode ? { debugName: "showIcon" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	showButtonBar = input(false, {
+		...ngDevMode ? { debugName: "showButtonBar" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	dateFormat = input(...ngDevMode ? [void 0, { debugName: "dateFormat" }] : 	/* istanbul ignore next */ []);
+	todayLabel = input("Today", ...ngDevMode ? [{ debugName: "todayLabel" }] : 	/* istanbul ignore next */ []);
+	clearLabel = input("Clear", ...ngDevMode ? [{ debugName: "clearLabel" }] : 	/* istanbul ignore next */ []);
+	chooseLabel = input("Choose date and time", ...ngDevMode ? [{ debugName: "chooseLabel" }] : 	/* istanbul ignore next */ []);
+	timeLabel = input("Time", ...ngDevMode ? [{ debugName: "timeLabel" }] : 	/* istanbul ignore next */ []);
+	hourLabel = input("Hour", ...ngDevMode ? [{ debugName: "hourLabel" }] : 	/* istanbul ignore next */ []);
+	minuteLabel = input("Minute", ...ngDevMode ? [{ debugName: "minuteLabel" }] : 	/* istanbul ignore next */ []);
+	secondLabel = input("Second", ...ngDevMode ? [{ debugName: "secondLabel" }] : 	/* istanbul ignore next */ []);
+	periodLabel = input("AM/PM", ...ngDevMode ? [{ debugName: "periodLabel" }] : 	/* istanbul ignore next */ []);
+	inputId = input(...ngDevMode ? [void 0, { debugName: "inputId" }] : 	/* istanbul ignore next */ []);
+	hourFormat = input("24", ...ngDevMode ? [{ debugName: "hourFormat" }] : 	/* istanbul ignore next */ []);
+	showMinutes = input(true, {
+		...ngDevMode ? { debugName: "showMinutes" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	showSeconds = input(false, {
+		...ngDevMode ? { debugName: "showSeconds" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	stepHour = input(1, {
+		...ngDevMode ? { debugName: "stepHour" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	stepMinute = input(1, {
+		...ngDevMode ? { debugName: "stepMinute" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	stepSecond = input(1, {
+		...ngDevMode ? { debugName: "stepSecond" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	inline = input(false, {
+		...ngDevMode ? { debugName: "inline" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	minDate = input(null, ...ngDevMode ? [{ debugName: "minDate" }] : 	/* istanbul ignore next */ []);
+	maxDate = input(null, ...ngDevMode ? [{ debugName: "maxDate" }] : 	/* istanbul ignore next */ []);
+	disabledDates = input([], ...ngDevMode ? [{ debugName: "disabledDates" }] : 	/* istanbul ignore next */ []);
+	firstDayOfWeek = input(0, {
+		...ngDevMode ? { debugName: "firstDayOfWeek" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	locale = input(...ngDevMode ? [void 0, { debugName: "locale" }] : 	/* istanbul ignore next */ []);
+	ariaLabel = input(...ngDevMode ? [void 0, { debugName: "ariaLabel" }] : 	/* istanbul ignore next */ []);
+	ariaLabelledby = input(...ngDevMode ? [void 0, { debugName: "ariaLabelledby" }] : 	/* istanbul ignore next */ []);
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : 	/* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touch = output();
+	open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : 	/* istanbul ignore next */ []);
+	titleId = nextId("hx-date-time-picker-title");
+	popupId = nextId("hx-date-time-picker-popup");
+	positions = [{
+		originX: "start",
+		originY: "bottom",
+		overlayX: "start",
+		overlayY: "top",
+		offsetY: 2
+	}, {
+		originX: "start",
+		originY: "top",
+		overlayX: "start",
+		overlayY: "bottom",
+		offsetY: -2
+	}];
+	field = viewChild("field", ...ngDevMode ? [{ debugName: "field" }] : 	/* istanbul ignore next */ []);
+	calendar = viewChild(HxCalendar, ...ngDevMode ? [{ debugName: "calendar" }] : 	/* istanbul ignore next */ []);
+	#typed = signal(null, ...ngDevMode ? [{ debugName: "#typed" }] : 	/* istanbul ignore next */ []);
+	view = signal("day", ...ngDevMode ? [{ debugName: "view" }] : 	/* istanbul ignore next */ []);
+	#cvaDisabled = signal(false, ...ngDevMode ? [{ debugName: "#cvaDisabled" }] : 	/* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.#cvaDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : 	/* istanbul ignore next */ []);
+	focusedDate = signal(startOfDay(/* @__PURE__ */ new Date()), ...ngDevMode ? [{ debugName: "focusedDate" }] : 	/* istanbul ignore next */ []);
+	today = startOfDay(/* @__PURE__ */ new Date());
+	selectedDate = computed(() => {
+		const value = this.value();
+		return isValidDate(value) ? value : null;
+	}, ...ngDevMode ? [{ debugName: "selectedDate" }] : 	/* istanbul ignore next */ []);
+	selectedDates = computed(() => {
+		const date = this.selectedDate();
+		return date ? [date] : [];
+	}, ...ngDevMode ? [{ debugName: "selectedDates" }] : 	/* istanbul ignore next */ []);
+	hour12 = computed(() => this.hourFormat() === "12", ...ngDevMode ? [{ debugName: "hour12" }] : 	/* istanbul ignore next */ []);
+	#format = computed(() => {
+		const custom = this.dateFormat();
+		if (custom) return new Intl.DateTimeFormat(this.locale(), custom);
+		const options = {
+			day: "2-digit",
+			month: "2-digit",
+			year: "numeric",
+			hour: "2-digit",
+			hourCycle: this.hour12() ? "h12" : "h23"
+		};
+		if (this.showMinutes()) options.minute = "2-digit";
+		if (this.showMinutes() && this.showSeconds()) options.second = "2-digit";
+		return new Intl.DateTimeFormat(this.locale(), options);
+	}, ...ngDevMode ? [{ debugName: "#format" }] : 	/* istanbul ignore next */ []);
+	time = computed(() => {
+		const date = this.selectedDate();
+		const minutes = this.showMinutes();
+		return {
+			hours: date?.getHours() ?? 0,
+			minutes: minutes ? date?.getMinutes() ?? 0 : 0,
+			seconds: minutes ? date?.getSeconds() ?? 0 : 0
+		};
+	}, ...ngDevMode ? [{ debugName: "time" }] : 	/* istanbul ignore next */ []);
+	text = computed(() => {
+		const typed = this.#typed();
+		if (typed !== null) return typed;
+		const date = this.selectedDate();
+		return date ? this.#format().format(date) : "";
+	}, ...ngDevMode ? [{ debugName: "text" }] : 	/* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			this.value();
+			untracked(() => this.#typed.set(null));
+		});
+		effect(() => {
+			if (this.isDisabled()) untracked(() => this.open.set(false));
+		});
+		effect(() => {
+			const first = this.selectedDate() ?? clampTime(this.today, startOfDayOrNull(this.minDate()), this.maxDate());
+			const shown = untracked(() => this.focusedDate());
+			if (first && (first.getFullYear() !== shown.getFullYear() || first.getMonth() !== shown.getMonth())) this.focusedDate.set(startOfDay(first));
+		});
+	}
+	#onChange = () => {};
+	#onTouched = () => {};
+	writeValue(value) {
+		this.#typed.set(null);
+		this.value.set(value ?? null);
+	}
+	registerOnChange(fn) {
+		this.#onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.#onTouched = fn;
+	}
+	setDisabledState(disabled) {
+		this.#cvaDisabled.set(disabled);
+	}
+	focus() {
+		const field = this.field();
+		if (field) field.nativeElement.focus();
+		else this.#focusDay();
+	}
+	isDateDisabled(date) {
+		return isDateDisabled(date, {
+			min: this.minDate(),
+			max: this.maxDate(),
+			disabledDates: this.disabledDates()
+		});
+	}
+	#outsideTimeRange(date) {
+		return clampTime(date, this.minDate(), this.maxDate()).getTime() !== date.getTime();
+	}
+	pick(date) {
+		if (this.isDisabled() || this.isDateDisabled(date)) return false;
+		const day = startOfDay(date);
+		this.focusedDate.set(day);
+		this.#typed.set(null);
+		this.#commit(this.#atTime(day, this.time()));
+		return true;
+	}
+	#atTime(day, time) {
+		return clampTime(withTime(day, time.hours, time.minutes, time.seconds), this.minDate(), this.maxDate());
+	}
+	setTime(time) {
+		if (this.isDisabled()) return;
+		const day = this.selectedDate() ?? this.today;
+		if (this.isDateDisabled(day)) return;
+		this.#typed.set(null);
+		this.#commit(this.#atTime(day, time));
+	}
+	#commit(next) {
+		this.value.set(next);
+		this.#onChange(next);
+	}
+	#focusDay() {
+		afterNextRender(() => this.calendar()?.focusDay(), { injector: this.#injector });
+	}
+	show() {
+		if (this.isDisabled() || this.inline() || this.open()) return;
+		this.open.set(true);
+	}
+	toggle() {
+		if (this.open()) this.close(true);
+		else this.show();
+	}
+	close(refocus = false) {
+		if (!this.open()) return;
+		this.open.set(false);
+		if (refocus) this.field()?.nativeElement.focus();
+	}
+	onAttach() {
+		this.view.set("day");
+		this.focusedDate.set(startOfDay(this.selectedDate() ?? clampTime(this.today, startOfDayOrNull(this.minDate()), this.maxDate())));
+		this.#focusDay();
+	}
+	onOverlayKeydown(event) {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			this.close(true);
+		}
+	}
+	onOutsideClick(event) {
+		if (!this.#host.nativeElement.contains(event.target)) this.close();
+	}
+	onFieldKeydown(event) {
+		if (event.key === "ArrowDown" || event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			this.show();
+		} else if (event.key === "Enter") this.commitTyping();
+	}
+	onTyping(event) {
+		if (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 text = typed.trim();
+		if (text === "") {
+			if (this.value() !== null) this.#commit(null);
+		} else {
+			const parsed = parseDateTimeText(text, {
+				locale: this.locale(),
+				showMinutes: this.showMinutes(),
+				timeOnly: false,
+				fallbackDay: this.selectedDate() ?? this.today
+			});
+			if (parsed && !this.isDateDisabled(parsed) && !this.#outsideTimeRange(parsed)) {
+				this.#commit(parsed);
+				this.focusedDate.set(startOfDay(parsed));
+			}
+		}
+		const field = this.field();
+		if (field) field.nativeElement.value = this.text();
+	}
+	selectToday() {
+		if (this.pick(this.today)) this.close(true);
+	}
+	clear() {
+		if (this.isDisabled()) return;
+		this.#typed.set(null);
+		this.#commit(null);
+		this.close(true);
+	}
+	#leave() {
+		this.close();
+		this.commitTyping();
+		this.#onTouched();
+		this.touch.emit();
+	}
+	onHostFocusOut(event) {
+		if (this.inline()) return;
+		const next = event.relatedTarget;
+		if (next?.closest(".hx-date-time-picker-popup") || this.#host.nativeElement.contains(next)) return;
+		if (this.open() && !next) return;
+		this.#leave();
+	}
+	onPopupFocusOut(event) {
+		const next = event.relatedTarget;
+		if (!next || next.closest(".hx-date-time-picker-popup") || this.#host.nativeElement.contains(next)) return;
+		this.#leave();
+	}
+	onInlineFocusOut(event) {
+		if (!this.inline() || this.#host.nativeElement.contains(event.relatedTarget)) return;
+		this.#onTouched();
+		this.touch.emit();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: HxDateTimePicker,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: HxDateTimePicker,
+		isStandalone: true,
+		selector: "hx-date-time-picker",
+		inputs: {
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showIcon: {
+				classPropertyName: "showIcon",
+				publicName: "showIcon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showButtonBar: {
+				classPropertyName: "showButtonBar",
+				publicName: "showButtonBar",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dateFormat: {
+				classPropertyName: "dateFormat",
+				publicName: "dateFormat",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			todayLabel: {
+				classPropertyName: "todayLabel",
+				publicName: "todayLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			clearLabel: {
+				classPropertyName: "clearLabel",
+				publicName: "clearLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			chooseLabel: {
+				classPropertyName: "chooseLabel",
+				publicName: "chooseLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			timeLabel: {
+				classPropertyName: "timeLabel",
+				publicName: "timeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hourLabel: {
+				classPropertyName: "hourLabel",
+				publicName: "hourLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			minuteLabel: {
+				classPropertyName: "minuteLabel",
+				publicName: "minuteLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			secondLabel: {
+				classPropertyName: "secondLabel",
+				publicName: "secondLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			periodLabel: {
+				classPropertyName: "periodLabel",
+				publicName: "periodLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inputId: {
+				classPropertyName: "inputId",
+				publicName: "inputId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hourFormat: {
+				classPropertyName: "hourFormat",
+				publicName: "hourFormat",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showMinutes: {
+				classPropertyName: "showMinutes",
+				publicName: "showMinutes",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showSeconds: {
+				classPropertyName: "showSeconds",
+				publicName: "showSeconds",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stepHour: {
+				classPropertyName: "stepHour",
+				publicName: "stepHour",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stepMinute: {
+				classPropertyName: "stepMinute",
+				publicName: "stepMinute",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stepSecond: {
+				classPropertyName: "stepSecond",
+				publicName: "stepSecond",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inline: {
+				classPropertyName: "inline",
+				publicName: "inline",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			minDate: {
+				classPropertyName: "minDate",
+				publicName: "minDate",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxDate: {
+				classPropertyName: "maxDate",
+				publicName: "maxDate",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabledDates: {
+				classPropertyName: "disabledDates",
+				publicName: "disabledDates",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			firstDayOfWeek: {
+				classPropertyName: "firstDayOfWeek",
+				publicName: "firstDayOfWeek",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				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
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			touch: "touch"
+		},
+		host: {
+			listeners: { "focusout": "onHostFocusOut($event)" },
+			properties: {
+				"class.hx-date-time-picker-inline": "inline()",
+				"class.hx-date-time-picker-disabled": "isDisabled()",
+				"class.hx-date-time-picker-invalid": "invalid()",
+				"class.hx-date-time-picker-open": "open()",
+				"class.hx-date-time-picker-has-icon": "showIcon() && !inline()",
+				"class.hx-filled": "!inline() && text() !== \"\""
+			},
+			classAttribute: "hx-date-time-picker"
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => HxDateTimePicker),
+			multi: true
+		}],
+		viewQueries: [{
+			propertyName: "field",
+			first: true,
+			predicate: ["field"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "calendar",
+			first: true,
+			predicate: HxCalendar,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "@if (inline()) {\n  <ng-container [ngTemplateOutlet]=\"panel\" />\n} @else {\n  <div class=\"hx-date-time-picker-field\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n    <input\n      #field\n      type=\"text\"\n      class=\"hx-date-time-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)=\"show()\"\n      (keydown)=\"onFieldKeydown($event)\"\n    />\n    @if (showIcon()) {\n      <button\n        type=\"button\"\n        class=\"hx-date-time-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-time-picker-trigger-icon\" aria-hidden=\"true\"></span>\n      </button>\n    }\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayPanelClass=\"hx-date-time-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-time-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      <ng-container [ngTemplateOutlet]=\"panel\" />\n      @if (showButtonBar()) {\n        <div class=\"hx-date-time-picker-buttonbar\">\n          <button type=\"button\" class=\"hx-date-time-picker-button\" (click)=\"selectToday()\">{{ todayLabel() }}</button>\n          <button type=\"button\" class=\"hx-date-time-picker-button\" (click)=\"clear()\">{{ clearLabel() }}</button>\n        </div>\n      }\n    </div>\n  </ng-template>\n}\n\n<ng-template #panel>\n  <div\n    class=\"hx-date-time-picker-panel\"\n    role=\"group\"\n    [attr.aria-label]=\"inline() ? (ariaLabel() ?? chooseLabel()) : null\"\n    [attr.aria-labelledby]=\"inline() ? (ariaLabelledby() ?? null) : null\"\n    (focusout)=\"onInlineFocusOut($event)\"\n  >\n    <hx-calendar\n      [(focusedDate)]=\"focusedDate\"\n      [(view)]=\"view\"\n      [selectedDates]=\"selectedDates()\"\n      selectionMode=\"single\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [disabledDates]=\"disabledDates()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      [locale]=\"locale()\"\n      [disabled]=\"isDisabled()\"\n      [titleId]=\"titleId\"\n      [today]=\"today\"\n      (picked)=\"pick($event)\"\n    />\n    <hx-time-row\n      [time]=\"time()\"\n      [hour12]=\"hour12()\"\n      [showMinutes]=\"showMinutes()\"\n      [showSeconds]=\"showSeconds()\"\n      [stepHour]=\"stepHour()\"\n      [stepMinute]=\"stepMinute()\"\n      [stepSecond]=\"stepSecond()\"\n      [locale]=\"locale()\"\n      [disabled]=\"isDisabled()\"\n      [timeLabel]=\"timeLabel()\"\n      [hourLabel]=\"hourLabel()\"\n      [minuteLabel]=\"minuteLabel()\"\n      [secondLabel]=\"secondLabel()\"\n      [periodLabel]=\"periodLabel()\"\n      (timeChange)=\"setTime($event)\"\n    />\n  </div>\n</ng-template>\n",
+		dependencies: [
+			{
+				kind: "directive",
+				type: CdkConnectedOverlay,
+				selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]",
+				inputs: [
+					"cdkConnectedOverlayOrigin",
+					"cdkConnectedOverlayPositions",
+					"cdkConnectedOverlayPositionStrategy",
+					"cdkConnectedOverlayOffsetX",
+					"cdkConnectedOverlayOffsetY",
+					"cdkConnectedOverlayWidth",
+					"cdkConnectedOverlayHeight",
+					"cdkConnectedOverlayMinWidth",
+					"cdkConnectedOverlayMinHeight",
+					"cdkConnectedOverlayBackdropClass",
+					"cdkConnectedOverlayPanelClass",
+					"cdkConnectedOverlayViewportMargin",
+					"cdkConnectedOverlayScrollStrategy",
+					"cdkConnectedOverlayOpen",
+					"cdkConnectedOverlayDisableClose",
+					"cdkConnectedOverlayTransformOriginOn",
+					"cdkConnectedOverlayHasBackdrop",
+					"cdkConnectedOverlayLockPosition",
+					"cdkConnectedOverlayFlexibleDimensions",
+					"cdkConnectedOverlayGrowAfterOpen",
+					"cdkConnectedOverlayPush",
+					"cdkConnectedOverlayDisposeOnNavigation",
+					"cdkConnectedOverlayUsePopover",
+					"cdkConnectedOverlayMatchWidth",
+					"cdkConnectedOverlay"
+				],
+				outputs: [
+					"backdropClick",
+					"positionChange",
+					"attach",
+					"detach",
+					"overlayKeydown",
+					"overlayOutsideClick"
+				],
+				exportAs: ["cdkConnectedOverlay"]
+			},
+			{
+				kind: "directive",
+				type: CdkOverlayOrigin,
+				selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]",
+				exportAs: ["cdkOverlayOrigin"]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: HxCalendar,
+				selector: "hx-calendar",
+				inputs: [
+					"focusedDate",
+					"view",
+					"selectedDates",
+					"selectionMode",
+					"minDate",
+					"maxDate",
+					"disabledDates",
+					"firstDayOfWeek",
+					"locale",
+					"disabled",
+					"titleId",
+					"today"
+				],
+				outputs: [
+					"focusedDateChange",
+					"viewChange",
+					"picked"
+				]
+			},
+			{
+				kind: "component",
+				type: HxTimeRow,
+				selector: "hx-time-row",
+				inputs: [
+					"time",
+					"hour12",
+					"showMinutes",
+					"showSeconds",
+					"stepHour",
+					"stepMinute",
+					"stepSecond",
+					"locale",
+					"disabled",
+					"timeLabel",
+					"hourLabel",
+					"minuteLabel",
+					"secondLabel",
+					"periodLabel"
+				],
+				outputs: ["timeChange"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: HxDateTimePicker,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hx-date-time-picker",
+			imports: [
+				CdkConnectedOverlay,
+				CdkOverlayOrigin,
+				NgTemplateOutlet,
+				HxCalendar,
+				HxTimeRow
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => HxDateTimePicker),
+				multi: true
+			}],
+			host: {
+				class: "hx-date-time-picker",
+				"[class.hx-date-time-picker-inline]": "inline()",
+				"[class.hx-date-time-picker-disabled]": "isDisabled()",
+				"[class.hx-date-time-picker-invalid]": "invalid()",
+				"[class.hx-date-time-picker-open]": "open()",
+				"[class.hx-date-time-picker-has-icon]": "showIcon() && !inline()",
+				"[class.hx-filled]": "!inline() && text() !== \"\"",
+				"(focusout)": "onHostFocusOut($event)"
+			},
+			template: "@if (inline()) {\n  <ng-container [ngTemplateOutlet]=\"panel\" />\n} @else {\n  <div class=\"hx-date-time-picker-field\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n    <input\n      #field\n      type=\"text\"\n      class=\"hx-date-time-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)=\"show()\"\n      (keydown)=\"onFieldKeydown($event)\"\n    />\n    @if (showIcon()) {\n      <button\n        type=\"button\"\n        class=\"hx-date-time-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-time-picker-trigger-icon\" aria-hidden=\"true\"></span>\n      </button>\n    }\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayPanelClass=\"hx-date-time-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-time-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      <ng-container [ngTemplateOutlet]=\"panel\" />\n      @if (showButtonBar()) {\n        <div class=\"hx-date-time-picker-buttonbar\">\n          <button type=\"button\" class=\"hx-date-time-picker-button\" (click)=\"selectToday()\">{{ todayLabel() }}</button>\n          <button type=\"button\" class=\"hx-date-time-picker-button\" (click)=\"clear()\">{{ clearLabel() }}</button>\n        </div>\n      }\n    </div>\n  </ng-template>\n}\n\n<ng-template #panel>\n  <div\n    class=\"hx-date-time-picker-panel\"\n    role=\"group\"\n    [attr.aria-label]=\"inline() ? (ariaLabel() ?? chooseLabel()) : null\"\n    [attr.aria-labelledby]=\"inline() ? (ariaLabelledby() ?? null) : null\"\n    (focusout)=\"onInlineFocusOut($event)\"\n  >\n    <hx-calendar\n      [(focusedDate)]=\"focusedDate\"\n      [(view)]=\"view\"\n      [selectedDates]=\"selectedDates()\"\n      selectionMode=\"single\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [disabledDates]=\"disabledDates()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      [locale]=\"locale()\"\n      [disabled]=\"isDisabled()\"\n      [titleId]=\"titleId\"\n      [today]=\"today\"\n      (picked)=\"pick($event)\"\n    />\n    <hx-time-row\n      [time]=\"time()\"\n      [hour12]=\"hour12()\"\n      [showMinutes]=\"showMinutes()\"\n      [showSeconds]=\"showSeconds()\"\n      [stepHour]=\"stepHour()\"\n      [stepMinute]=\"stepMinute()\"\n      [stepSecond]=\"stepSecond()\"\n      [locale]=\"locale()\"\n      [disabled]=\"isDisabled()\"\n      [timeLabel]=\"timeLabel()\"\n      [hourLabel]=\"hourLabel()\"\n      [minuteLabel]=\"minuteLabel()\"\n      [secondLabel]=\"secondLabel()\"\n      [periodLabel]=\"periodLabel()\"\n      (timeChange)=\"setTime($event)\"\n    />\n  </div>\n</ng-template>\n"
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		showIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showIcon",
+				required: false
+			}]
+		}],
+		showButtonBar: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showButtonBar",
+				required: false
+			}]
+		}],
+		dateFormat: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dateFormat",
+				required: false
+			}]
+		}],
+		todayLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "todayLabel",
+				required: false
+			}]
+		}],
+		clearLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clearLabel",
+				required: false
+			}]
+		}],
+		chooseLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "chooseLabel",
+				required: false
+			}]
+		}],
+		timeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "timeLabel",
+				required: false
+			}]
+		}],
+		hourLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hourLabel",
+				required: false
+			}]
+		}],
+		minuteLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minuteLabel",
+				required: false
+			}]
+		}],
+		secondLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "secondLabel",
+				required: false
+			}]
+		}],
+		periodLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "periodLabel",
+				required: false
+			}]
+		}],
+		inputId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inputId",
+				required: false
+			}]
+		}],
+		hourFormat: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hourFormat",
+				required: false
+			}]
+		}],
+		showMinutes: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showMinutes",
+				required: false
+			}]
+		}],
+		showSeconds: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showSeconds",
+				required: false
+			}]
+		}],
+		stepHour: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stepHour",
+				required: false
+			}]
+		}],
+		stepMinute: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stepMinute",
+				required: false
+			}]
+		}],
+		stepSecond: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stepSecond",
+				required: false
+			}]
+		}],
+		inline: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inline",
+				required: false
+			}]
+		}],
+		minDate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minDate",
+				required: false
+			}]
+		}],
+		maxDate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxDate",
+				required: false
+			}]
+		}],
+		disabledDates: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabledDates",
+				required: false
+			}]
+		}],
+		firstDayOfWeek: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "firstDayOfWeek",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		ariaLabelledby: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabelledby",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}],
+		field: [{
+			type: i0.ViewChild,
+			args: ["field", { isSignal: true }]
+		}],
+		calendar: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => HxCalendar), { isSignal: true }]
+		}]
+	}
+});
+var HxTimePicker = class HxTimePicker {
+	#host = inject(ElementRef);
+	#injector = inject(Injector);
+	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : 	/* istanbul ignore next */ []);
+	showIcon = input(false, {
+		...ngDevMode ? { debugName: "showIcon" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	showButtonBar = input(false, {
+		...ngDevMode ? { debugName: "showButtonBar" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	dateFormat = input(...ngDevMode ? [void 0, { debugName: "dateFormat" }] : 	/* istanbul ignore next */ []);
+	nowLabel = input("Now", ...ngDevMode ? [{ debugName: "nowLabel" }] : 	/* istanbul ignore next */ []);
+	clearLabel = input("Clear", ...ngDevMode ? [{ debugName: "clearLabel" }] : 	/* istanbul ignore next */ []);
+	chooseLabel = input("Choose time", ...ngDevMode ? [{ debugName: "chooseLabel" }] : 	/* istanbul ignore next */ []);
+	timeLabel = input("Time", ...ngDevMode ? [{ debugName: "timeLabel" }] : 	/* istanbul ignore next */ []);
+	hourLabel = input("Hour", ...ngDevMode ? [{ debugName: "hourLabel" }] : 	/* istanbul ignore next */ []);
+	minuteLabel = input("Minute", ...ngDevMode ? [{ debugName: "minuteLabel" }] : 	/* istanbul ignore next */ []);
+	secondLabel = input("Second", ...ngDevMode ? [{ debugName: "secondLabel" }] : 	/* istanbul ignore next */ []);
+	periodLabel = input("AM/PM", ...ngDevMode ? [{ debugName: "periodLabel" }] : 	/* istanbul ignore next */ []);
+	inputId = input(...ngDevMode ? [void 0, { debugName: "inputId" }] : 	/* istanbul ignore next */ []);
+	hourFormat = input("24", ...ngDevMode ? [{ debugName: "hourFormat" }] : 	/* istanbul ignore next */ []);
+	showMinutes = input(true, {
+		...ngDevMode ? { debugName: "showMinutes" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	showSeconds = input(false, {
+		...ngDevMode ? { debugName: "showSeconds" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	stepHour = input(1, {
+		...ngDevMode ? { debugName: "stepHour" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	stepMinute = input(1, {
+		...ngDevMode ? { debugName: "stepMinute" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	stepSecond = input(1, {
+		...ngDevMode ? { debugName: "stepSecond" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	minTime = input(null, ...ngDevMode ? [{ debugName: "minTime" }] : 	/* istanbul ignore next */ []);
+	maxTime = input(null, ...ngDevMode ? [{ debugName: "maxTime" }] : 	/* istanbul ignore next */ []);
+	inline = input(false, {
+		...ngDevMode ? { debugName: "inline" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	locale = input(...ngDevMode ? [void 0, { debugName: "locale" }] : 	/* istanbul ignore next */ []);
+	ariaLabel = input(...ngDevMode ? [void 0, { debugName: "ariaLabel" }] : 	/* istanbul ignore next */ []);
+	ariaLabelledby = input(...ngDevMode ? [void 0, { debugName: "ariaLabelledby" }] : 	/* istanbul ignore next */ []);
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : 	/* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touch = output();
+	open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : 	/* istanbul ignore next */ []);
+	popupId = nextId("hx-time-picker-popup");
+	positions = [{
+		originX: "start",
+		originY: "bottom",
+		overlayX: "start",
+		overlayY: "top",
+		offsetY: 2
+	}, {
+		originX: "start",
+		originY: "top",
+		overlayX: "start",
+		overlayY: "bottom",
+		offsetY: -2
+	}];
+	field = viewChild("field", ...ngDevMode ? [{ debugName: "field" }] : 	/* istanbul ignore next */ []);
+	timeRow = viewChild(HxTimeRow, ...ngDevMode ? [{ debugName: "timeRow" }] : 	/* istanbul ignore next */ []);
+	#typed = signal(null, ...ngDevMode ? [{ debugName: "#typed" }] : 	/* istanbul ignore next */ []);
+	#cvaDisabled = signal(false, ...ngDevMode ? [{ debugName: "#cvaDisabled" }] : 	/* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.#cvaDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : 	/* istanbul ignore next */ []);
+	hour12 = computed(() => this.hourFormat() === "12", ...ngDevMode ? [{ debugName: "hour12" }] : 	/* istanbul ignore next */ []);
+	#format = computed(() => {
+		const custom = this.dateFormat();
+		if (custom) return new Intl.DateTimeFormat(this.locale(), custom);
+		const options = {
+			hour: "2-digit",
+			hourCycle: this.hour12() ? "h12" : "h23"
+		};
+		if (this.showMinutes()) options.minute = "2-digit";
+		if (this.showMinutes() && this.showSeconds()) options.second = "2-digit";
+		return new Intl.DateTimeFormat(this.locale(), options);
+	}, ...ngDevMode ? [{ debugName: "#format" }] : 	/* istanbul ignore next */ []);
+	time = computed(() => {
+		const value = this.value();
+		const date = isValidDate(value) ? value : null;
+		const minutes = this.showMinutes();
+		return {
+			hours: date?.getHours() ?? 0,
+			minutes: minutes ? date?.getMinutes() ?? 0 : 0,
+			seconds: minutes ? date?.getSeconds() ?? 0 : 0
+		};
+	}, ...ngDevMode ? [{ debugName: "time" }] : 	/* istanbul ignore next */ []);
+	text = computed(() => {
+		const typed = this.#typed();
+		if (typed !== null) return typed;
+		const value = this.value();
+		return isValidDate(value) ? this.#format().format(value) : "";
+	}, ...ngDevMode ? [{ debugName: "text" }] : 	/* istanbul ignore next */ []);
+	#onChange = () => {};
+	#onTouched = () => {};
+	writeValue(value) {
+		this.#typed.set(null);
+		this.value.set(value ?? null);
+	}
+	registerOnChange(fn) {
+		this.#onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.#onTouched = fn;
+	}
+	setDisabledState(disabled) {
+		this.#cvaDisabled.set(disabled);
+	}
+	focus() {
+		const field = this.field();
+		if (field) field.nativeElement.focus();
+		else this.#focusRow();
+	}
+	#clamp(date) {
+		const onDay = (limit) => isValidDate(limit) ? withTime(date, limit.getHours(), limit.getMinutes(), limit.getSeconds()) : null;
+		return clampTime(date, onDay(this.minTime()), onDay(this.maxTime()));
+	}
+	#outsideRange(date) {
+		return this.#clamp(date).getTime() !== date.getTime();
+	}
+	setTime(time) {
+		if (this.isDisabled()) return;
+		this.#typed.set(null);
+		this.#commit(this.#clamp(withTime(/* @__PURE__ */ new Date(), time.hours, time.minutes, time.seconds)));
+	}
+	#commit(next) {
+		this.value.set(next);
+		this.#onChange(next);
+	}
+	#focusRow() {
+		afterNextRender(() => this.timeRow()?.focus(), { injector: this.#injector });
+	}
+	show() {
+		if (this.isDisabled() || this.inline() || this.open()) return;
+		this.open.set(true);
+	}
+	toggle() {
+		if (this.open()) this.close(true);
+		else this.show();
+	}
+	close(refocus = false) {
+		if (!this.open()) return;
+		this.open.set(false);
+		if (refocus) this.field()?.nativeElement.focus();
+	}
+	onAttach() {
+		this.#focusRow();
+	}
+	onOverlayKeydown(event) {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			this.close(true);
+		}
+	}
+	onOutsideClick(event) {
+		if (!this.#host.nativeElement.contains(event.target)) this.close();
+	}
+	onFieldKeydown(event) {
+		if (event.key === "ArrowDown" || event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			this.show();
+		} else if (event.key === "Enter") this.commitTyping();
+	}
+	onTyping(event) {
+		this.#typed.set(event.target.value);
+	}
+	commitTyping() {
+		const typed = this.#typed();
+		if (typed === null) return;
+		this.#typed.set(null);
+		const text = typed.trim();
+		if (text === "") this.#commit(null);
+		else {
+			const parsed = parseDateTimeText(text, {
+				locale: this.locale(),
+				showMinutes: this.showMinutes(),
+				timeOnly: true,
+				fallbackDay: /* @__PURE__ */ new Date()
+			});
+			if (parsed && !this.#outsideRange(parsed)) this.#commit(parsed);
+		}
+		const field = this.field();
+		if (field) field.nativeElement.value = this.text();
+	}
+	selectNow() {
+		const now = /* @__PURE__ */ new Date();
+		this.setTime({
+			hours: now.getHours(),
+			minutes: this.showMinutes() ? now.getMinutes() : 0,
+			seconds: this.showMinutes() ? now.getSeconds() : 0
+		});
+		this.close(true);
+	}
+	clear() {
+		this.#typed.set(null);
+		this.#commit(null);
+		this.close(true);
+	}
+	#leave() {
+		this.close();
+		this.commitTyping();
+		this.#onTouched();
+		this.touch.emit();
+	}
+	onHostFocusOut(event) {
+		if (this.inline()) return;
+		const next = event.relatedTarget;
+		if (next?.closest(".hx-time-picker-popup") || this.#host.nativeElement.contains(next)) return;
+		if (this.open() && !next) return;
+		this.#leave();
+	}
+	onInlineFocusOut(event) {
+		if (!this.inline() || this.#host.nativeElement.contains(event.relatedTarget)) return;
+		this.#onTouched();
+		this.touch.emit();
+	}
+	onPopupFocusOut(event) {
+		const next = event.relatedTarget;
+		if (!next || next.closest(".hx-time-picker-popup") || this.#host.nativeElement.contains(next)) return;
+		this.#leave();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: HxTimePicker,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: HxTimePicker,
+		isStandalone: true,
+		selector: "hx-time-picker",
+		inputs: {
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showIcon: {
+				classPropertyName: "showIcon",
+				publicName: "showIcon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showButtonBar: {
+				classPropertyName: "showButtonBar",
+				publicName: "showButtonBar",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dateFormat: {
+				classPropertyName: "dateFormat",
+				publicName: "dateFormat",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			nowLabel: {
+				classPropertyName: "nowLabel",
+				publicName: "nowLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			clearLabel: {
+				classPropertyName: "clearLabel",
+				publicName: "clearLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			chooseLabel: {
+				classPropertyName: "chooseLabel",
+				publicName: "chooseLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			timeLabel: {
+				classPropertyName: "timeLabel",
+				publicName: "timeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hourLabel: {
+				classPropertyName: "hourLabel",
+				publicName: "hourLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			minuteLabel: {
+				classPropertyName: "minuteLabel",
+				publicName: "minuteLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			secondLabel: {
+				classPropertyName: "secondLabel",
+				publicName: "secondLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			periodLabel: {
+				classPropertyName: "periodLabel",
+				publicName: "periodLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inputId: {
+				classPropertyName: "inputId",
+				publicName: "inputId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hourFormat: {
+				classPropertyName: "hourFormat",
+				publicName: "hourFormat",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showMinutes: {
+				classPropertyName: "showMinutes",
+				publicName: "showMinutes",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showSeconds: {
+				classPropertyName: "showSeconds",
+				publicName: "showSeconds",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stepHour: {
+				classPropertyName: "stepHour",
+				publicName: "stepHour",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stepMinute: {
+				classPropertyName: "stepMinute",
+				publicName: "stepMinute",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stepSecond: {
+				classPropertyName: "stepSecond",
+				publicName: "stepSecond",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			minTime: {
+				classPropertyName: "minTime",
+				publicName: "minTime",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxTime: {
+				classPropertyName: "maxTime",
+				publicName: "maxTime",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inline: {
+				classPropertyName: "inline",
+				publicName: "inline",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				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
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			touch: "touch"
+		},
+		host: {
+			listeners: { "focusout": "onHostFocusOut($event)" },
+			properties: {
+				"class.hx-time-picker-inline": "inline()",
+				"class.hx-time-picker-disabled": "isDisabled()",
+				"class.hx-time-picker-invalid": "invalid()",
+				"class.hx-time-picker-open": "open()",
+				"class.hx-time-picker-has-icon": "showIcon() && !inline()",
+				"class.hx-filled": "!inline() && text() !== \"\""
+			},
+			classAttribute: "hx-time-picker"
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => HxTimePicker),
+			multi: true
+		}],
+		viewQueries: [{
+			propertyName: "field",
+			first: true,
+			predicate: ["field"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "timeRow",
+			first: true,
+			predicate: HxTimeRow,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "@if (inline()) {\n  <ng-container [ngTemplateOutlet]=\"row\" />\n} @else {\n  <div class=\"hx-time-picker-field\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n    <input\n      #field\n      type=\"text\"\n      class=\"hx-time-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)=\"show()\"\n      (keydown)=\"onFieldKeydown($event)\"\n    />\n    @if (showIcon()) {\n      <button\n        type=\"button\"\n        class=\"hx-time-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-time-picker-trigger-icon\" aria-hidden=\"true\"></span>\n      </button>\n    }\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayPanelClass=\"hx-time-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-time-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      <ng-container [ngTemplateOutlet]=\"row\" />\n      @if (showButtonBar()) {\n        <div class=\"hx-time-picker-buttonbar\">\n          <button type=\"button\" class=\"hx-time-picker-button\" (click)=\"selectNow()\">{{ nowLabel() }}</button>\n          <button type=\"button\" class=\"hx-time-picker-button\" (click)=\"clear()\">{{ clearLabel() }}</button>\n        </div>\n      }\n    </div>\n  </ng-template>\n}\n\n<ng-template #row>\n  <div\n    class=\"hx-time-picker-panel\"\n    [attr.role]=\"inline() ? 'group' : null\"\n    [attr.aria-label]=\"inline() ? (ariaLabel() ?? timeLabel()) : null\"\n    [attr.aria-labelledby]=\"inline() ? (ariaLabelledby() ?? null) : null\"\n    (focusout)=\"onInlineFocusOut($event)\"\n  >\n    <hx-time-row\n      [time]=\"time()\"\n      [hour12]=\"hour12()\"\n      [showMinutes]=\"showMinutes()\"\n      [showSeconds]=\"showSeconds()\"\n      [stepHour]=\"stepHour()\"\n      [stepMinute]=\"stepMinute()\"\n      [stepSecond]=\"stepSecond()\"\n      [locale]=\"locale()\"\n      [disabled]=\"isDisabled()\"\n      [timeLabel]=\"timeLabel()\"\n      [hourLabel]=\"hourLabel()\"\n      [minuteLabel]=\"minuteLabel()\"\n      [secondLabel]=\"secondLabel()\"\n      [periodLabel]=\"periodLabel()\"\n      (timeChange)=\"setTime($event)\"\n    />\n  </div>\n</ng-template>\n",
+		dependencies: [
+			{
+				kind: "directive",
+				type: CdkConnectedOverlay,
+				selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]",
+				inputs: [
+					"cdkConnectedOverlayOrigin",
+					"cdkConnectedOverlayPositions",
+					"cdkConnectedOverlayPositionStrategy",
+					"cdkConnectedOverlayOffsetX",
+					"cdkConnectedOverlayOffsetY",
+					"cdkConnectedOverlayWidth",
+					"cdkConnectedOverlayHeight",
+					"cdkConnectedOverlayMinWidth",
+					"cdkConnectedOverlayMinHeight",
+					"cdkConnectedOverlayBackdropClass",
+					"cdkConnectedOverlayPanelClass",
+					"cdkConnectedOverlayViewportMargin",
+					"cdkConnectedOverlayScrollStrategy",
+					"cdkConnectedOverlayOpen",
+					"cdkConnectedOverlayDisableClose",
+					"cdkConnectedOverlayTransformOriginOn",
+					"cdkConnectedOverlayHasBackdrop",
+					"cdkConnectedOverlayLockPosition",
+					"cdkConnectedOverlayFlexibleDimensions",
+					"cdkConnectedOverlayGrowAfterOpen",
+					"cdkConnectedOverlayPush",
+					"cdkConnectedOverlayDisposeOnNavigation",
+					"cdkConnectedOverlayUsePopover",
+					"cdkConnectedOverlayMatchWidth",
+					"cdkConnectedOverlay"
+				],
+				outputs: [
+					"backdropClick",
+					"positionChange",
+					"attach",
+					"detach",
+					"overlayKeydown",
+					"overlayOutsideClick"
+				],
+				exportAs: ["cdkConnectedOverlay"]
+			},
+			{
+				kind: "directive",
+				type: CdkOverlayOrigin,
+				selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]",
+				exportAs: ["cdkOverlayOrigin"]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: HxTimeRow,
+				selector: "hx-time-row",
+				inputs: [
+					"time",
+					"hour12",
+					"showMinutes",
+					"showSeconds",
+					"stepHour",
+					"stepMinute",
+					"stepSecond",
+					"locale",
+					"disabled",
+					"timeLabel",
+					"hourLabel",
+					"minuteLabel",
+					"secondLabel",
+					"periodLabel"
+				],
+				outputs: ["timeChange"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: HxTimePicker,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hx-time-picker",
+			imports: [
+				CdkConnectedOverlay,
+				CdkOverlayOrigin,
+				NgTemplateOutlet,
+				HxTimeRow
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => HxTimePicker),
+				multi: true
+			}],
+			host: {
+				class: "hx-time-picker",
+				"[class.hx-time-picker-inline]": "inline()",
+				"[class.hx-time-picker-disabled]": "isDisabled()",
+				"[class.hx-time-picker-invalid]": "invalid()",
+				"[class.hx-time-picker-open]": "open()",
+				"[class.hx-time-picker-has-icon]": "showIcon() && !inline()",
+				"[class.hx-filled]": "!inline() && text() !== \"\"",
+				"(focusout)": "onHostFocusOut($event)"
+			},
+			template: "@if (inline()) {\n  <ng-container [ngTemplateOutlet]=\"row\" />\n} @else {\n  <div class=\"hx-time-picker-field\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n    <input\n      #field\n      type=\"text\"\n      class=\"hx-time-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)=\"show()\"\n      (keydown)=\"onFieldKeydown($event)\"\n    />\n    @if (showIcon()) {\n      <button\n        type=\"button\"\n        class=\"hx-time-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-time-picker-trigger-icon\" aria-hidden=\"true\"></span>\n      </button>\n    }\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayPanelClass=\"hx-time-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-time-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      <ng-container [ngTemplateOutlet]=\"row\" />\n      @if (showButtonBar()) {\n        <div class=\"hx-time-picker-buttonbar\">\n          <button type=\"button\" class=\"hx-time-picker-button\" (click)=\"selectNow()\">{{ nowLabel() }}</button>\n          <button type=\"button\" class=\"hx-time-picker-button\" (click)=\"clear()\">{{ clearLabel() }}</button>\n        </div>\n      }\n    </div>\n  </ng-template>\n}\n\n<ng-template #row>\n  <div\n    class=\"hx-time-picker-panel\"\n    [attr.role]=\"inline() ? 'group' : null\"\n    [attr.aria-label]=\"inline() ? (ariaLabel() ?? timeLabel()) : null\"\n    [attr.aria-labelledby]=\"inline() ? (ariaLabelledby() ?? null) : null\"\n    (focusout)=\"onInlineFocusOut($event)\"\n  >\n    <hx-time-row\n      [time]=\"time()\"\n      [hour12]=\"hour12()\"\n      [showMinutes]=\"showMinutes()\"\n      [showSeconds]=\"showSeconds()\"\n      [stepHour]=\"stepHour()\"\n      [stepMinute]=\"stepMinute()\"\n      [stepSecond]=\"stepSecond()\"\n      [locale]=\"locale()\"\n      [disabled]=\"isDisabled()\"\n      [timeLabel]=\"timeLabel()\"\n      [hourLabel]=\"hourLabel()\"\n      [minuteLabel]=\"minuteLabel()\"\n      [secondLabel]=\"secondLabel()\"\n      [periodLabel]=\"periodLabel()\"\n      (timeChange)=\"setTime($event)\"\n    />\n  </div>\n</ng-template>\n"
+		}]
+	}],
+	propDecorators: {
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		showIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showIcon",
+				required: false
+			}]
+		}],
+		showButtonBar: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showButtonBar",
+				required: false
+			}]
+		}],
+		dateFormat: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dateFormat",
+				required: false
+			}]
+		}],
+		nowLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nowLabel",
+				required: false
+			}]
+		}],
+		clearLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clearLabel",
+				required: false
+			}]
+		}],
+		chooseLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "chooseLabel",
+				required: false
+			}]
+		}],
+		timeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "timeLabel",
+				required: false
+			}]
+		}],
+		hourLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hourLabel",
+				required: false
+			}]
+		}],
+		minuteLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minuteLabel",
+				required: false
+			}]
+		}],
+		secondLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "secondLabel",
+				required: false
+			}]
+		}],
+		periodLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "periodLabel",
+				required: false
+			}]
+		}],
+		inputId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inputId",
+				required: false
+			}]
+		}],
+		hourFormat: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hourFormat",
+				required: false
+			}]
+		}],
+		showMinutes: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showMinutes",
+				required: false
+			}]
+		}],
+		showSeconds: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showSeconds",
+				required: false
+			}]
+		}],
+		stepHour: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stepHour",
+				required: false
+			}]
+		}],
+		stepMinute: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stepMinute",
+				required: false
+			}]
+		}],
+		stepSecond: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stepSecond",
+				required: false
+			}]
+		}],
+		minTime: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minTime",
+				required: false
+			}]
+		}],
+		maxTime: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxTime",
+				required: false
+			}]
+		}],
+		inline: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inline",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		ariaLabelledby: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabelledby",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}],
+		field: [{
+			type: i0.ViewChild,
+			args: ["field", { isSignal: true }]
+		}],
+		timeRow: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => HxTimeRow), { isSignal: true }]
+		}]
+	}
+});
+const EMPTY = {
+	from: null,
+	to: null
+};
+const earlier = (a, b) => a && b ? a <= b ? a : b : a ?? b;
+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 */ []);
-	showIcon = input(false, {
-		...ngDevMode ? { debugName: "showIcon" } : 		/* 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 */ []);
+	showTime = input(true, {
+		...ngDevMode ? { debugName: "showTime" } : 		/* istanbul ignore next */ {},
 		transform: booleanAttribute
 	});
-	showButtonBar = input(false, {
-		...ngDevMode ? { debugName: "showButtonBar" } : 		/* istanbul ignore next */ {},
+	timeOnly = input(false, {
+		...ngDevMode ? { debugName: "timeOnly" } : 		/* istanbul ignore next */ {},
 		transform: booleanAttribute
 	});
-	dateFormat = input({
-		day: "2-digit",
-		month: "2-digit",
-		year: "numeric"
-	}, ...ngDevMode ? [{ debugName: "dateFormat" }] : 	/* istanbul ignore next */ []);
-	todayLabel = input("Today", ...ngDevMode ? [{ debugName: "todayLabel" }] : 	/* istanbul ignore next */ []);
-	clearLabel = input("Clear", ...ngDevMode ? [{ debugName: "clearLabel" }] : 	/* istanbul ignore next */ []);
-	chooseLabel = input("Choose date", ...ngDevMode ? [{ debugName: "chooseLabel" }] : 	/* istanbul ignore next */ []);
-	inputId = input(...ngDevMode ? [void 0, { debugName: "inputId" }] : 	/* istanbul ignore next */ []);
-	inline = input(false, {
-		...ngDevMode ? { debugName: "inline" } : 		/* istanbul ignore next */ {},
+	hourFormat = input("24", ...ngDevMode ? [{ debugName: "hourFormat" }] : 	/* istanbul ignore next */ []);
+	showMinutes = input(true, {
+		...ngDevMode ? { debugName: "showMinutes" } : 		/* istanbul ignore next */ {},
 		transform: booleanAttribute
 	});
-	selectionMode = input("single", ...ngDevMode ? [{ debugName: "selectionMode" }] : 	/* istanbul ignore next */ []);
-	minDate = input(null, ...ngDevMode ? [{ debugName: "minDate" }] : 	/* istanbul ignore next */ []);
-	maxDate = input(null, ...ngDevMode ? [{ debugName: "maxDate" }] : 	/* istanbul ignore next */ []);
-	disabledDates = input([], ...ngDevMode ? [{ debugName: "disabledDates" }] : 	/* istanbul ignore next */ []);
+	showSeconds = input(false, {
+		...ngDevMode ? { debugName: "showSeconds" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	stepHour = input(1, {
+		...ngDevMode ? { debugName: "stepHour" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	stepMinute = input(1, {
+		...ngDevMode ? { debugName: "stepMinute" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	stepSecond = input(1, {
+		...ngDevMode ? { debugName: "stepSecond" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	dateFormat = input(...ngDevMode ? [void 0, { debugName: "dateFormat" }] : 	/* istanbul ignore next */ []);
+	locale = input(...ngDevMode ? [void 0, { debugName: "locale" }] : 	/* istanbul ignore next */ []);
 	firstDayOfWeek = input(0, {
 		...ngDevMode ? { debugName: "firstDayOfWeek" } : 		/* istanbul ignore next */ {},
 		transform: numberAttribute
 	});
-	locale = input(...ngDevMode ? [void 0, { debugName: "locale" }] : 	/* istanbul ignore next */ []);
+	minDate = input(null, ...ngDevMode ? [{ debugName: "minDate" }] : 	/* istanbul ignore next */ []);
+	maxDate = input(null, ...ngDevMode ? [{ debugName: "maxDate" }] : 	/* istanbul ignore next */ []);
+	disabledDates = input([], ...ngDevMode ? [{ debugName: "disabledDates" }] : 	/* istanbul ignore next */ []);
+	showButtonBar = input(false, {
+		...ngDevMode ? { debugName: "showButtonBar" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
 	ariaLabel = input(...ngDevMode ? [void 0, { debugName: "ariaLabel" }] : 	/* istanbul ignore next */ []);
 	ariaLabelledby = input(...ngDevMode ? [void 0, { debugName: "ariaLabelledby" }] : 	/* istanbul ignore next */ []);
-	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : 	/* istanbul ignore next */ []);
+	value = model(EMPTY, ...ngDevMode ? [{ debugName: "value" }] : 	/* istanbul ignore next */ []);
 	disabled = input(false, {
 		...ngDevMode ? { debugName: "disabled" } : 		/* istanbul ignore next */ {},
 		transform: booleanAttribute
@@ -7601,9 +10971,11 @@ var HxDatePicker = class HxDatePicker {
 		transform: booleanAttribute
 	});
 	touch = output();
+	#host = inject(ElementRef);
+	#injector = inject(Injector);
 	open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : 	/* istanbul ignore next */ []);
-	titleId = nextId("hx-date-picker-title");
-	popupId = nextId("hx-date-picker-popup");
+	draft = signal(EMPTY, ...ngDevMode ? [{ debugName: "draft" }] : 	/* istanbul ignore next */ []);
+	popupId = nextId("hx-date-time-range-picker-popup");
 	positions = [{
 		originX: "start",
 		originY: "bottom",
@@ -7618,66 +10990,47 @@ var HxDatePicker = class HxDatePicker {
 		offsetY: -2
 	}];
 	field = viewChild("field", ...ngDevMode ? [{ debugName: "field" }] : 	/* istanbul ignore next */ []);
-	#typed = signal(null, ...ngDevMode ? [{ debugName: "#typed" }] : 	/* istanbul ignore next */ []);
-	view = signal("day", ...ngDevMode ? [{ debugName: "view" }] : 	/* istanbul ignore next */ []);
+	daysPicker = viewChild(HxDatePicker, ...ngDevMode ? [{ debugName: "daysPicker" }] : 	/* istanbul ignore next */ []);
+	timePicker = viewChild(HxTimePicker, ...ngDevMode ? [{ debugName: "timePicker" }] : 	/* istanbul ignore next */ []);
+	#lastFrom = null;
+	#lastTo = null;
 	#cvaDisabled = signal(false, ...ngDevMode ? [{ debugName: "#cvaDisabled" }] : 	/* istanbul ignore next */ []);
-	isDisabled = computed(() => this.disabled() || this.#cvaDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : 	/* istanbul ignore next */ []);
-	focusedDate = signal(startOfDay(/* @__PURE__ */ new Date()), ...ngDevMode ? [{ debugName: "focusedDate" }] : 	/* istanbul ignore next */ []);
-	viewYear = computed(() => this.focusedDate().getFullYear(), ...ngDevMode ? [{ debugName: "viewYear" }] : 	/* istanbul ignore next */ []);
-	#today = startOfDay(/* @__PURE__ */ new Date());
-	selectedDates = computed(() => {
-		const value = this.value();
-		if (Array.isArray(value)) return value.filter(isValidDate);
-		return isValidDate(value) ? [value] : [];
-	}, ...ngDevMode ? [{ debugName: "selectedDates" }] : 	/* istanbul ignore next */ []);
-	#formats = computed(() => {
-		const locale = this.locale();
-		return {
-			month: new Intl.DateTimeFormat(locale, { month: "long" }),
-			monthShort: new Intl.DateTimeFormat(locale, { month: "short" }),
-			weekdayShort: new Intl.DateTimeFormat(locale, { weekday: "short" }),
-			weekdayLong: new Intl.DateTimeFormat(locale, { weekday: "long" }),
-			full: new Intl.DateTimeFormat(locale, { dateStyle: "full" })
+	#format = computed(() => {
+		const custom = this.dateFormat();
+		if (custom) return new Intl.DateTimeFormat(this.locale(), custom);
+		const options = this.timeOnly() ? {} : {
+			day: "numeric",
+			month: "numeric",
+			year: "numeric"
 		};
-	}, ...ngDevMode ? [{ debugName: "#formats" }] : 	/* istanbul ignore next */ []);
-	#format = computed(() => new Intl.DateTimeFormat(this.locale(), this.dateFormat()), ...ngDevMode ? [{ debugName: "#format" }] : 	/* istanbul ignore next */ []);
+		if (this.showTime() || this.timeOnly()) {
+			options.hour = "numeric";
+			if (this.showMinutes()) options.minute = "2-digit";
+			if (this.showMinutes() && this.showSeconds()) options.second = "2-digit";
+			options.hourCycle = this.hourFormat() === "12" ? "h12" : "h23";
+		}
+		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 dates = this.selectedDates();
+		const { from, to } = this.value();
+		if (!from && !to) return "";
 		const fmt = this.#format();
-		if (this.selectionMode() === "range") return dates.map((d) => fmt.format(d)).join(" – ");
-		return dates.map((d) => fmt.format(d)).join(", ");
+		const one = (d) => d ? fmt.format(d).replace(/,\s*/, " ") : "";
+		return `${one(from)} ${this.separator()} ${one(to)}`.trim();
 	}, ...ngDevMode ? [{ debugName: "text" }] : 	/* istanbul ignore next */ []);
-	monthName = computed(() => this.#formats().month.format(this.focusedDate()), ...ngDevMode ? [{ debugName: "monthName" }] : 	/* istanbul ignore next */ []);
-	monthNames = computed(() => Array.from({ length: 12 }, (_, m) => this.#formats().monthShort.format(new Date(2026, m, 1))), ...ngDevMode ? [{ debugName: "monthNames" }] : 	/* istanbul ignore next */ []);
-	weekdays = computed(() => {
-		const first = this.firstDayOfWeek();
-		return Array.from({ length: 7 }, (_, i) => {
-			const day = new Date(2026, 0, 4 + (first + i) % 7);
-			return {
-				short: this.#formats().weekdayShort.format(day),
-				long: this.#formats().weekdayLong.format(day)
-			};
-		});
-	}, ...ngDevMode ? [{ debugName: "weekdays" }] : 	/* istanbul ignore next */ []);
-	weeks = computed(() => monthCells(this.focusedDate().getFullYear(), this.focusedDate().getMonth(), this.firstDayOfWeek()), ...ngDevMode ? [{ debugName: "weeks" }] : 	/* istanbul ignore next */ []);
-	decade = computed(() => {
-		const start = Math.floor(this.focusedDate().getFullYear() / 12) * 12;
-		return Array.from({ length: 12 }, (_, i) => start + i);
-	}, ...ngDevMode ? [{ debugName: "decade" }] : 	/* istanbul ignore next */ []);
-	constructor() {
-		effect(() => {
-			const first = this.selectedDates()[0];
-			const shown = untracked(() => this.focusedDate());
-			if (first && (first.getFullYear() !== shown.getFullYear() || first.getMonth() !== shown.getMonth())) this.focusedDate.set(startOfDay(first));
-		});
-	}
+	isDisabled = computed(() => this.disabled() || this.#cvaDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : 	/* istanbul ignore next */ []);
+	fromMax = computed(() => earlier(this.draft().to, this.maxDate()), ...ngDevMode ? [{ debugName: "fromMax" }] : 	/* istanbul ignore next */ []);
+	toMin = computed(() => later(this.draft().from, this.minDate()), ...ngDevMode ? [{ debugName: "toMin" }] : 	/* istanbul ignore next */ []);
+	#refused = signal(0, ...ngDevMode ? [{ debugName: "#refused" }] : 	/* istanbul ignore next */ []);
+	fromValue = computed(() => this.#pickerValue(this.draft().from), ...ngDevMode ? [{ debugName: "fromValue" }] : 	/* istanbul ignore next */ []);
+	toValue = computed(() => this.#pickerValue(this.draft().to), ...ngDevMode ? [{ debugName: "toValue" }] : 	/* istanbul ignore next */ []);
 	#onChange = () => {};
 	#onTouched = () => {};
 	writeValue(value) {
-		this.#typed.set(null);
-		this.value.set(value ?? null);
+		this.value.set({
+			from: value?.from ?? null,
+			to: value?.to ?? null
+		});
 	}
 	registerOnChange(fn) {
 		this.#onChange = fn;
@@ -7689,118 +11042,11 @@ var HxDatePicker = class HxDatePicker {
 		this.#cvaDisabled.set(disabled);
 	}
 	focus() {
-		const field = this.field();
-		if (field) field.nativeElement.focus();
-		else this.#focusDay();
-	}
-	dateKey(date) {
-		return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
-	}
-	dayLabel(date) {
-		return this.#formats().full.format(date);
-	}
-	isToday(date) {
-		return isSameDay(date, this.#today);
-	}
-	isSelected(date) {
-		return this.selectedDates().some((d) => isSameDay(d, date));
-	}
-	isInRange(date) {
-		const [from, to] = this.selectedDates();
-		return this.selectionMode() === "range" && !!from && !!to && compareDays(date, from) > 0 && compareDays(date, to) < 0;
-	}
-	isDateDisabled(date) {
-		const [min, max] = [this.minDate(), this.maxDate()];
-		return !!min && compareDays(date, min) < 0 || !!max && compareDays(date, max) > 0 || this.disabledDates().some((d) => isSameDay(d, date));
-	}
-	isFocusTarget(date) {
-		return isSameDay(date, this.focusedDate());
-	}
-	step(direction) {
-		const current = this.focusedDate();
-		const next = this.view() === "day" ? addMonths(current, direction) : this.view() === "month" ? addMonths(current, 12 * direction) : addMonths(current, 144 * direction);
-		this.focusedDate.set(next);
-	}
-	chooseMonth(month) {
-		const current = this.focusedDate();
-		this.focusedDate.set(addMonths(new Date(current.getFullYear(), 0, current.getDate()), month));
-		this.view.set("day");
-	}
-	chooseYear(year) {
-		const current = this.focusedDate();
-		this.focusedDate.set(addMonths(new Date(year, current.getMonth(), 1), 0));
-		this.view.set("month");
-	}
-	pick(date) {
-		if (this.isDisabled() || this.isDateDisabled(date)) return;
-		const day = startOfDay(date);
-		this.focusedDate.set(day);
-		const selected = this.selectedDates();
-		let next;
-		const mode = this.selectionMode();
-		switch (mode) {
-			case "multiple":
-				next = this.isSelected(day) ? selected.filter((d) => !isSameDay(d, day)) : [...selected, day];
-				break;
-			case "range":
-				if (selected.length !== 1) next = [day];
-				else next = compareDays(day, selected[0]) < 0 ? [day, selected[0]] : [selected[0], day];
-				break;
-			default: next = day;
-		}
-		this.#typed.set(null);
-		this.#commit(next);
-		if (!this.inline()) {
-			if (mode === "single" || mode === "range" && Array.isArray(next) && next.length === 2) this.close(true);
-		}
-	}
-	#commit(next) {
-		this.value.set(next);
-		this.#onChange(next);
-	}
-	onDayKeydown(event, date) {
-		const first = this.firstDayOfWeek();
-		const weekday = (date.getDay() - first + 7) % 7;
-		let target = null;
-		switch (event.key) {
-			case "ArrowLeft":
-				target = addDays(date, -1);
-				break;
-			case "ArrowRight":
-				target = addDays(date, 1);
-				break;
-			case "ArrowUp":
-				target = addDays(date, -7);
-				break;
-			case "ArrowDown":
-				target = addDays(date, 7);
-				break;
-			case "Home":
-				target = addDays(date, -weekday);
-				break;
-			case "End":
-				target = addDays(date, 6 - weekday);
-				break;
-			case "PageUp":
-				target = addMonths(date, event.shiftKey ? -12 : -1);
-				break;
-			case "PageDown":
-				target = addMonths(date, event.shiftKey ? 12 : 1);
-				break;
-			default: return;
-		}
-		event.preventDefault();
-		this.focusedDate.set(target);
-		this.#focusDay();
-	}
-	#focusDay() {
-		afterNextRender(() => {
-			const key = this.dateKey(this.focusedDate());
-			(this.inline() ? this.#host.nativeElement : document.getElementById(this.popupId))?.querySelector(`.hx-date-picker-date[data-date="${key}"]`)?.focus();
-		}, { injector: this.#injector });
+		this.field()?.nativeElement.focus();
 	}
 	show() {
-		if (this.isDisabled() || this.inline() || this.open()) return;
+		if (this.isDisabled() || this.open()) return;
+		this.#stage(this.value());
 		this.open.set(true);
 	}
 	toggle() {
@@ -7813,10 +11059,13 @@ var HxDatePicker = class HxDatePicker {
 		if (refocus) this.field()?.nativeElement.focus();
 	}
 	onAttach() {
-		const first = this.selectedDates()[0];
-		this.view.set("day");
-		this.focusedDate.set(first ? startOfDay(first) : this.#today);
-		this.#focusDay();
+		afterNextRender(() => (this.daysPicker() ?? this.timePicker())?.focus(), { injector: this.#injector });
+	}
+	onFieldKeydown(event) {
+		if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " " || event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			this.show();
+		}
 	}
 	onOverlayKeydown(event) {
 		if (event.key === "Escape") {
@@ -7827,141 +11076,167 @@ var HxDatePicker = class HxDatePicker {
 	onOutsideClick(event) {
 		if (!this.#host.nativeElement.contains(event.target)) this.close();
 	}
-	onFieldKeydown(event) {
-		if (event.key === "ArrowDown" || event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			this.show();
-		} else if (event.key === "Enter") this.commitTyping();
+	clear() {
+		this.#stage(EMPTY);
 	}
-	onTyping(event) {
-		this.#typed.set(event.target.value);
+	submit() {
+		this.#commit(this.draft());
+		this.close(true);
 	}
-	commitTyping() {
-		const typed = this.#typed();
-		if (typed === null) return;
-		this.#typed.set(null);
-		this.#parseAndCommit(typed);
-		const field = this.field();
-		if (field) field.nativeElement.value = this.text();
+	onHostFocusOut(event) {
+		const next = event.relatedTarget;
+		if (next?.closest(".hx-date-time-range-picker-popup") || this.#host.nativeElement.contains(next)) return;
+		if (this.open() && !next) return;
+		this.close();
+		this.markTouched();
 	}
-	#parseAndCommit(typed) {
-		const text = typed.trim();
-		if (text === "") {
-			this.#commit(this.selectionMode() === "single" ? null : []);
+	onPopupFocusOut(event) {
+		const next = event.relatedTarget;
+		if (!next || next.closest(".hx-date-time-range-picker-popup") || this.#host.nativeElement.contains(next)) return;
+		this.close();
+		this.markTouched();
+	}
+	days = computed(() => {
+		const { from, to } = this.draft();
+		return [from, to].filter((d) => d !== null);
+	}, ...ngDevMode ? [{ debugName: "days" }] : 	/* istanbul ignore next */ []);
+	setDays(picked) {
+		const [first, second] = (Array.isArray(picked) ? [...picked] : [picked]).filter(isValidDate).sort((a, b) => a.getTime() - b.getTime());
+		const old = this.draft();
+		const [fromTime, toTime] = [old.from ?? this.#lastFrom, old.to ?? this.#lastTo ?? old.from];
+		const at = (day, time) => day ? withTime(startOfDay(day), time?.getHours() ?? 0, time?.getMinutes() ?? 0, time?.getSeconds() ?? 0) : null;
+		const from = at(first, fromTime);
+		const to = at(second, toTime);
+		this.#stage({
+			from,
+			to: from && to && to < from ? from : to
+		});
+	}
+	setFromTime(picked) {
+		if (!picked) {
+			this.#restage();
 			return;
 		}
-		const dates = (this.selectionMode() === "single" ? [text] : text.split(/\s*(?:,|–)\s*/)).map((part) => this.#parse(part));
-		if (dates.some((d) => d === null || this.isDateDisabled(d))) return;
-		const valid = dates;
-		if (this.selectionMode() === "range" && valid.length > 2) return;
-		this.#commit(this.selectionMode() === "single" ? valid[0] : valid);
-		if (valid[0]) this.focusedDate.set(startOfDay(valid[0]));
+		const { from, to } = this.draft();
+		const day = from ?? to ?? /* @__PURE__ */ new Date();
+		if (this.#isBlocked(day)) {
+			this.#restage();
+			return;
+		}
+		const next = clampTime(this.#atTime(day, picked), this.minDate(), this.fromMax());
+		this.#stage({
+			from: next,
+			to
+		});
 	}
-	#parse(text) {
-		const numbers = text.match(/\d+/g)?.map(Number);
-		if (!numbers || numbers.length !== 3) return null;
-		let [year, month, day] = [
-			0,
-			0,
-			0
-		];
-		if (/^\d{4}\D/.test(text.trim())) [year, month, day] = numbers;
-		else {
-			const order = new Intl.DateTimeFormat(this.locale(), {
-				day: "numeric",
-				month: "numeric",
-				year: "numeric"
-			}).formatToParts(new Date(2e3, 10, 22)).filter((p) => [
-				"day",
-				"month",
-				"year"
-			].includes(p.type)).map((p) => p.type);
-			const byType = Object.fromEntries(order.map((type, i) => [type, numbers[i]]));
-			[year, month, day] = [
-				byType["year"],
-				byType["month"],
-				byType["day"]
-			];
+	setToTime(picked) {
+		if (!picked) {
+			this.#restage();
+			return;
+		}
+		const { from, to } = this.draft();
+		const day = to ?? from ?? /* @__PURE__ */ new Date();
+		if (this.#isBlocked(day)) {
+			this.#restage();
+			return;
 		}
-		if (year < 100) year += 2e3;
-		const date = new Date(year, month - 1, day);
-		return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day ? date : null;
+		const next = clampTime(this.#atTime(day, picked), this.toMin(), this.maxDate());
+		this.#stage({
+			from: from ?? startOfDay(next),
+			to: next
+		});
 	}
-	selectToday() {
-		this.pick(this.#today);
+	#pickerValue(side) {
+		this.#refused();
+		return side ? new Date(side) : startOfDay(/* @__PURE__ */ new Date());
 	}
-	clear() {
-		this.#typed.set(null);
-		this.#commit(this.selectionMode() === "single" ? null : []);
-		this.close(true);
+	#restage() {
+		this.#refused.update((n) => n + 1);
 	}
-	onHostFocusOut(event) {
-		if (this.inline()) return;
-		const next = event.relatedTarget;
-		if (this.open() || next?.closest(".hx-date-picker-popup") || this.#host.nativeElement.contains(next)) return;
-		this.commitTyping();
-		this.#onTouched();
-		this.touch.emit();
+	#isBlocked(day) {
+		return this.disabledDates().some((d) => isSameDay(d, day));
 	}
-	onFocusOut(event) {
-		if (!this.inline()) return;
-		if (this.#host.nativeElement.contains(event.relatedTarget)) return;
+	#atTime(day, time) {
+		return withTime(startOfDay(day), time.getHours(), time.getMinutes(), time.getSeconds());
+	}
+	markTouched() {
 		this.#onTouched();
 		this.touch.emit();
 	}
+	#stage(next) {
+		const inside = (d) => isValidDate(d) ? clampTime(d, this.minDate(), this.maxDate()) : null;
+		const clean = {
+			from: inside(next.from),
+			to: inside(next.to)
+		};
+		if (clean.from) this.#lastFrom = clean.from;
+		if (clean.to) this.#lastTo = clean.to;
+		this.draft.set(clean);
+	}
+	#commit(next) {
+		this.value.set(next);
+		this.#onChange(next);
+	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.1",
 		ngImport: i0,
-		type: HxDatePicker,
+		type: HxDateTimeRangePicker,
 		deps: [],
 		target: i0.ɵɵFactoryTarget.Component
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
 		version: "22.2.1",
-		type: HxDatePicker,
+		type: HxDateTimeRangePicker,
 		isStandalone: true,
-		selector: "hx-date-picker",
+		selector: "hx-date-time-range-picker",
 		inputs: {
-			placeholder: {
-				classPropertyName: "placeholder",
-				publicName: "placeholder",
+			fromLabel: {
+				classPropertyName: "fromLabel",
+				publicName: "fromLabel",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			},
-			showIcon: {
-				classPropertyName: "showIcon",
-				publicName: "showIcon",
+			toLabel: {
+				classPropertyName: "toLabel",
+				publicName: "toLabel",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			},
-			showButtonBar: {
-				classPropertyName: "showButtonBar",
-				publicName: "showButtonBar",
+			separator: {
+				classPropertyName: "separator",
+				publicName: "separator",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			},
-			dateFormat: {
-				classPropertyName: "dateFormat",
-				publicName: "dateFormat",
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			},
-			todayLabel: {
-				classPropertyName: "todayLabel",
-				publicName: "todayLabel",
+			clearLabel: {
+				classPropertyName: "clearLabel",
+				publicName: "clearLabel",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			},
-			clearLabel: {
-				classPropertyName: "clearLabel",
-				publicName: "clearLabel",
+			cancelLabel: {
+				classPropertyName: "cancelLabel",
+				publicName: "cancelLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			submitLabel: {
+				classPropertyName: "submitLabel",
+				publicName: "submitLabel",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
@@ -7980,16 +11255,79 @@ var HxDatePicker = class HxDatePicker {
 				isRequired: false,
 				transformFunction: null
 			},
-			inline: {
-				classPropertyName: "inline",
-				publicName: "inline",
+			showTime: {
+				classPropertyName: "showTime",
+				publicName: "showTime",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			},
-			selectionMode: {
-				classPropertyName: "selectionMode",
-				publicName: "selectionMode",
+			timeOnly: {
+				classPropertyName: "timeOnly",
+				publicName: "timeOnly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hourFormat: {
+				classPropertyName: "hourFormat",
+				publicName: "hourFormat",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showMinutes: {
+				classPropertyName: "showMinutes",
+				publicName: "showMinutes",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showSeconds: {
+				classPropertyName: "showSeconds",
+				publicName: "showSeconds",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stepHour: {
+				classPropertyName: "stepHour",
+				publicName: "stepHour",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stepMinute: {
+				classPropertyName: "stepMinute",
+				publicName: "stepMinute",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stepSecond: {
+				classPropertyName: "stepSecond",
+				publicName: "stepSecond",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dateFormat: {
+				classPropertyName: "dateFormat",
+				publicName: "dateFormat",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			firstDayOfWeek: {
+				classPropertyName: "firstDayOfWeek",
+				publicName: "firstDayOfWeek",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
@@ -8015,16 +11353,9 @@ var HxDatePicker = class HxDatePicker {
 				isRequired: false,
 				transformFunction: null
 			},
-			firstDayOfWeek: {
-				classPropertyName: "firstDayOfWeek",
-				publicName: "firstDayOfWeek",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			locale: {
-				classPropertyName: "locale",
-				publicName: "locale",
+			showButtonBar: {
+				classPropertyName: "showButtonBar",
+				publicName: "showButtonBar",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
@@ -8071,30 +11402,38 @@ var HxDatePicker = class HxDatePicker {
 		},
 		host: {
 			listeners: { "focusout": "onHostFocusOut($event)" },
-			properties: {
-				"class.hx-date-picker-inline": "inline()",
-				"class.hx-date-picker-disabled": "isDisabled()",
-				"class.hx-date-picker-invalid": "invalid()",
-				"class.hx-date-picker-open": "open()",
-				"class.hx-date-picker-has-icon": "showIcon() && !inline()",
-				"class.hx-filled": "!inline() && text() !== \"\""
-			},
-			classAttribute: "hx-date-picker"
+			classAttribute: "hx-date-time-range-picker"
 		},
 		providers: [{
 			provide: NG_VALUE_ACCESSOR,
-			useExisting: forwardRef(() => HxDatePicker),
+			useExisting: forwardRef(() => HxDateTimeRangePicker),
 			multi: true
 		}],
-		viewQueries: [{
-			propertyName: "field",
-			first: true,
-			predicate: ["field"],
-			descendants: true,
-			isSignal: true
-		}],
+		viewQueries: [
+			{
+				propertyName: "field",
+				first: true,
+				predicate: ["field"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "daysPicker",
+				first: true,
+				predicate: HxDatePicker,
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "timePicker",
+				first: true,
+				predicate: HxTimePicker,
+				descendants: true,
+				isSignal: true
+			}
+		],
 		ngImport: i0,
-		template: "@if (inline()) {\n  <ng-container [ngTemplateOutlet]=\"calendar\" />\n} @else {\n  <div class=\"hx-date-picker-field\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n    <input\n      #field\n      type=\"text\"\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)=\"show()\"\n      (keydown)=\"onFieldKeydown($event)\"\n    />\n    @if (showIcon()) {\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    }\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayPanelClass=\"hx-date-picker-overlay\"\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"open()\"\n    [cdkConnectedOverlayPositions]=\"positions\"\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\"\n      role=\"dialog\"\n      aria-modal=\"false\"\n      [id]=\"popupId\"\n      [attr.aria-label]=\"ariaLabel() ?? 'Choose date'\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n    >\n      <ng-container [ngTemplateOutlet]=\"calendar\" />\n      @if (showButtonBar()) {\n        <div class=\"hx-date-picker-buttonbar\">\n          <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"selectToday()\">{{ todayLabel() }}</button>\n          <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"clear()\">{{ clearLabel() }}</button>\n        </div>\n      }\n    </div>\n  </ng-template>\n}\n\n<ng-template #calendar>\n<div\n  class=\"hx-date-picker-panel\"\n  role=\"group\"\n  [attr.aria-label]=\"ariaLabel() ?? 'Calendar'\"\n  [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n  (focusout)=\"onFocusOut($event)\"\n>\n  <div class=\"hx-date-picker-header\">\n    <button\n      type=\"button\"\n      class=\"hx-date-picker-nav hx-date-picker-prev\"\n      [attr.aria-label]=\"view() === 'day' ? 'Previous month' : view() === 'month' ? 'Previous year' : 'Previous years'\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"step(-1)\"\n    >\n      <span class=\"hx-date-picker-prev-icon\" aria-hidden=\"true\"></span>\n    </button>\n    <div class=\"hx-date-picker-title\" [id]=\"titleId\" aria-live=\"polite\">\n      @switch (view()) {\n        @case ('day') {\n          <button type=\"button\" class=\"hx-date-picker-title-button\" [disabled]=\"isDisabled()\" (click)=\"view.set('month')\">{{ monthName() }}</button>\n          <button type=\"button\" class=\"hx-date-picker-title-button\" [disabled]=\"isDisabled()\" (click)=\"view.set('year')\">{{ viewYear() }}</button>\n        }\n        @case ('month') {\n          <button type=\"button\" class=\"hx-date-picker-title-button\" [disabled]=\"isDisabled()\" (click)=\"view.set('year')\">{{ viewYear() }}</button>\n        }\n        @default {\n          <span class=\"hx-date-picker-title-text\">{{ decade()[0] }} – {{ decade()[11] }}</span>\n        }\n      }\n    </div>\n    <button\n      type=\"button\"\n      class=\"hx-date-picker-nav hx-date-picker-next\"\n      [attr.aria-label]=\"view() === 'day' ? 'Next month' : view() === 'month' ? 'Next year' : 'Next years'\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"step(1)\"\n    >\n      <span class=\"hx-date-picker-next-icon\" aria-hidden=\"true\"></span>\n    </button>\n  </div>\n\n  @switch (view()) {\n    @case ('day') {\n      <table class=\"hx-date-picker-grid\" role=\"grid\" [attr.aria-labelledby]=\"titleId\" [attr.aria-multiselectable]=\"selectionMode() !== 'single' ? 'true' : null\">\n        <thead>\n          <tr>\n            @for (day of weekdays(); track $index) {\n              <th scope=\"col\" class=\"hx-date-picker-weekday\" [attr.abbr]=\"day.long\">{{ day.short }}</th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of weeks(); track $index) {\n            <tr>\n              @for (cell of row; track $index) {\n                @if (cell) {\n                  <td\n                    role=\"gridcell\"\n                    class=\"hx-date-picker-cell\"\n                    [attr.aria-selected]=\"isSelected(cell)\"\n                  >\n                    <button\n                      type=\"button\"\n                      class=\"hx-date-picker-date\"\n                      [class.hx-date-picker-date-selected]=\"isSelected(cell)\"\n                      [class.hx-date-picker-date-in-range]=\"isInRange(cell)\"\n                      [class.hx-date-picker-date-today]=\"isToday(cell)\"\n                      [attr.data-date]=\"dateKey(cell)\"\n                      [attr.tabindex]=\"isFocusTarget(cell) ? 0 : -1\"\n                      [attr.aria-label]=\"dayLabel(cell)\"\n                      [attr.aria-current]=\"isToday(cell) ? 'date' : null\"\n                      [attr.aria-disabled]=\"isDateDisabled(cell) ? 'true' : null\"\n                      [disabled]=\"isDisabled()\"\n                      (click)=\"pick(cell)\"\n                      (keydown)=\"onDayKeydown($event, cell)\"\n                    >\n                      {{ cell.getDate() }}\n                    </button>\n                  </td>\n                } @else {\n                  <td class=\"hx-date-picker-cell hx-date-picker-cell-empty\" role=\"gridcell\"></td>\n                }\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    }\n    @case ('month') {\n      <div class=\"hx-date-picker-months\">\n        @for (name of monthNames(); track $index) {\n          <button\n            type=\"button\"\n            class=\"hx-date-picker-month\"\n            [class.hx-date-picker-month-selected]=\"$index === focusedDate().getMonth() && viewYear() === focusedDate().getFullYear()\"\n            [disabled]=\"isDisabled()\"\n            (click)=\"chooseMonth($index)\"\n          >\n            {{ name }}\n          </button>\n        }\n      </div>\n    }\n    @default {\n      <div class=\"hx-date-picker-years\">\n        @for (year of decade(); track year) {\n          <button\n            type=\"button\"\n            class=\"hx-date-picker-year\"\n            [class.hx-date-picker-year-selected]=\"year === focusedDate().getFullYear()\"\n            [disabled]=\"isDisabled()\"\n            (click)=\"chooseYear(year)\"\n          >\n            {{ year }}\n          </button>\n        }\n      </div>\n    }\n  }\n</div>\n</ng-template>\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\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",
 		dependencies: [
 			{
 				kind: "directive",
@@ -8144,14 +11483,68 @@ var HxDatePicker = class HxDatePicker {
 				exportAs: ["cdkOverlayOrigin"]
 			},
 			{
-				kind: "directive",
-				type: NgTemplateOutlet,
-				selector: "[ngTemplateOutlet]",
+				kind: "component",
+				type: HxDatePicker,
+				selector: "hx-date-picker",
 				inputs: [
-					"ngTemplateOutletContext",
-					"ngTemplateOutlet",
-					"ngTemplateOutletInjector"
-				]
+					"placeholder",
+					"showIcon",
+					"showButtonBar",
+					"dateFormat",
+					"todayLabel",
+					"clearLabel",
+					"chooseLabel",
+					"inputId",
+					"inline",
+					"selectionMode",
+					"minDate",
+					"maxDate",
+					"disabledDates",
+					"firstDayOfWeek",
+					"locale",
+					"ariaLabel",
+					"ariaLabelledby",
+					"value",
+					"disabled",
+					"invalid"
+				],
+				outputs: ["valueChange", "touch"]
+			},
+			{
+				kind: "component",
+				type: HxTimePicker,
+				selector: "hx-time-picker",
+				inputs: [
+					"placeholder",
+					"showIcon",
+					"showButtonBar",
+					"dateFormat",
+					"nowLabel",
+					"clearLabel",
+					"chooseLabel",
+					"timeLabel",
+					"hourLabel",
+					"minuteLabel",
+					"secondLabel",
+					"periodLabel",
+					"inputId",
+					"hourFormat",
+					"showMinutes",
+					"showSeconds",
+					"stepHour",
+					"stepMinute",
+					"stepSecond",
+					"minTime",
+					"maxTime",
+					"inline",
+					"locale",
+					"ariaLabel",
+					"ariaLabelledby",
+					"value",
+					"disabled",
+					"invalid"
+				],
+				outputs: ["valueChange", "touch"]
 			}
 		],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -8161,82 +11554,84 @@ i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.2.1",
 	ngImport: i0,
-	type: HxDatePicker,
+	type: HxDateTimeRangePicker,
 	decorators: [{
 		type: Component,
 		args: [{
-			selector: "hx-date-picker",
+			selector: "hx-date-time-range-picker",
 			imports: [
 				CdkConnectedOverlay,
 				CdkOverlayOrigin,
-				NgTemplateOutlet
+				HxDatePicker,
+				HxTimePicker
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			providers: [{
 				provide: NG_VALUE_ACCESSOR,
-				useExisting: forwardRef(() => HxDatePicker),
+				useExisting: forwardRef(() => HxDateTimeRangePicker),
 				multi: true
 			}],
 			host: {
-				class: "hx-date-picker",
-				"[class.hx-date-picker-inline]": "inline()",
-				"[class.hx-date-picker-disabled]": "isDisabled()",
-				"[class.hx-date-picker-invalid]": "invalid()",
-				"[class.hx-date-picker-open]": "open()",
-				"[class.hx-date-picker-has-icon]": "showIcon() && !inline()",
-				"[class.hx-filled]": "!inline() && text() !== \"\"",
+				class: "hx-date-time-range-picker",
 				"(focusout)": "onHostFocusOut($event)"
 			},
-			template: "@if (inline()) {\n  <ng-container [ngTemplateOutlet]=\"calendar\" />\n} @else {\n  <div class=\"hx-date-picker-field\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n    <input\n      #field\n      type=\"text\"\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)=\"show()\"\n      (keydown)=\"onFieldKeydown($event)\"\n    />\n    @if (showIcon()) {\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    }\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayPanelClass=\"hx-date-picker-overlay\"\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"open()\"\n    [cdkConnectedOverlayPositions]=\"positions\"\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\"\n      role=\"dialog\"\n      aria-modal=\"false\"\n      [id]=\"popupId\"\n      [attr.aria-label]=\"ariaLabel() ?? 'Choose date'\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n    >\n      <ng-container [ngTemplateOutlet]=\"calendar\" />\n      @if (showButtonBar()) {\n        <div class=\"hx-date-picker-buttonbar\">\n          <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"selectToday()\">{{ todayLabel() }}</button>\n          <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"clear()\">{{ clearLabel() }}</button>\n        </div>\n      }\n    </div>\n  </ng-template>\n}\n\n<ng-template #calendar>\n<div\n  class=\"hx-date-picker-panel\"\n  role=\"group\"\n  [attr.aria-label]=\"ariaLabel() ?? 'Calendar'\"\n  [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n  (focusout)=\"onFocusOut($event)\"\n>\n  <div class=\"hx-date-picker-header\">\n    <button\n      type=\"button\"\n      class=\"hx-date-picker-nav hx-date-picker-prev\"\n      [attr.aria-label]=\"view() === 'day' ? 'Previous month' : view() === 'month' ? 'Previous year' : 'Previous years'\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"step(-1)\"\n    >\n      <span class=\"hx-date-picker-prev-icon\" aria-hidden=\"true\"></span>\n    </button>\n    <div class=\"hx-date-picker-title\" [id]=\"titleId\" aria-live=\"polite\">\n      @switch (view()) {\n        @case ('day') {\n          <button type=\"button\" class=\"hx-date-picker-title-button\" [disabled]=\"isDisabled()\" (click)=\"view.set('month')\">{{ monthName() }}</button>\n          <button type=\"button\" class=\"hx-date-picker-title-button\" [disabled]=\"isDisabled()\" (click)=\"view.set('year')\">{{ viewYear() }}</button>\n        }\n        @case ('month') {\n          <button type=\"button\" class=\"hx-date-picker-title-button\" [disabled]=\"isDisabled()\" (click)=\"view.set('year')\">{{ viewYear() }}</button>\n        }\n        @default {\n          <span class=\"hx-date-picker-title-text\">{{ decade()[0] }} – {{ decade()[11] }}</span>\n        }\n      }\n    </div>\n    <button\n      type=\"button\"\n      class=\"hx-date-picker-nav hx-date-picker-next\"\n      [attr.aria-label]=\"view() === 'day' ? 'Next month' : view() === 'month' ? 'Next year' : 'Next years'\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"step(1)\"\n    >\n      <span class=\"hx-date-picker-next-icon\" aria-hidden=\"true\"></span>\n    </button>\n  </div>\n\n  @switch (view()) {\n    @case ('day') {\n      <table class=\"hx-date-picker-grid\" role=\"grid\" [attr.aria-labelledby]=\"titleId\" [attr.aria-multiselectable]=\"selectionMode() !== 'single' ? 'true' : null\">\n        <thead>\n          <tr>\n            @for (day of weekdays(); track $index) {\n              <th scope=\"col\" class=\"hx-date-picker-weekday\" [attr.abbr]=\"day.long\">{{ day.short }}</th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of weeks(); track $index) {\n            <tr>\n              @for (cell of row; track $index) {\n                @if (cell) {\n                  <td\n                    role=\"gridcell\"\n                    class=\"hx-date-picker-cell\"\n                    [attr.aria-selected]=\"isSelected(cell)\"\n                  >\n                    <button\n                      type=\"button\"\n                      class=\"hx-date-picker-date\"\n                      [class.hx-date-picker-date-selected]=\"isSelected(cell)\"\n                      [class.hx-date-picker-date-in-range]=\"isInRange(cell)\"\n                      [class.hx-date-picker-date-today]=\"isToday(cell)\"\n                      [attr.data-date]=\"dateKey(cell)\"\n                      [attr.tabindex]=\"isFocusTarget(cell) ? 0 : -1\"\n                      [attr.aria-label]=\"dayLabel(cell)\"\n                      [attr.aria-current]=\"isToday(cell) ? 'date' : null\"\n                      [attr.aria-disabled]=\"isDateDisabled(cell) ? 'true' : null\"\n                      [disabled]=\"isDisabled()\"\n                      (click)=\"pick(cell)\"\n                      (keydown)=\"onDayKeydown($event, cell)\"\n                    >\n                      {{ cell.getDate() }}\n                    </button>\n                  </td>\n                } @else {\n                  <td class=\"hx-date-picker-cell hx-date-picker-cell-empty\" role=\"gridcell\"></td>\n                }\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    }\n    @case ('month') {\n      <div class=\"hx-date-picker-months\">\n        @for (name of monthNames(); track $index) {\n          <button\n            type=\"button\"\n            class=\"hx-date-picker-month\"\n            [class.hx-date-picker-month-selected]=\"$index === focusedDate().getMonth() && viewYear() === focusedDate().getFullYear()\"\n            [disabled]=\"isDisabled()\"\n            (click)=\"chooseMonth($index)\"\n          >\n            {{ name }}\n          </button>\n        }\n      </div>\n    }\n    @default {\n      <div class=\"hx-date-picker-years\">\n        @for (year of decade(); track year) {\n          <button\n            type=\"button\"\n            class=\"hx-date-picker-year\"\n            [class.hx-date-picker-year-selected]=\"year === focusedDate().getFullYear()\"\n            [disabled]=\"isDisabled()\"\n            (click)=\"chooseYear(year)\"\n          >\n            {{ year }}\n          </button>\n        }\n      </div>\n    }\n  }\n</div>\n</ng-template>\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\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"
 		}]
 	}],
-	ctorParameters: () => [],
 	propDecorators: {
-		placeholder: [{
+		fromLabel: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "placeholder",
+				alias: "fromLabel",
 				required: false
 			}]
 		}],
-		showIcon: [{
+		toLabel: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "showIcon",
+				alias: "toLabel",
 				required: false
 			}]
 		}],
-		showButtonBar: [{
+		separator: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "showButtonBar",
+				alias: "separator",
 				required: false
 			}]
 		}],
-		dateFormat: [{
+		placeholder: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "dateFormat",
+				alias: "placeholder",
 				required: false
 			}]
 		}],
-		todayLabel: [{
+		clearLabel: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "todayLabel",
+				alias: "clearLabel",
 				required: false
 			}]
 		}],
-		clearLabel: [{
+		cancelLabel: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "clearLabel",
+				alias: "cancelLabel",
+				required: false
+			}]
+		}],
+		submitLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "submitLabel",
 				required: false
 			}]
 		}],
@@ -8256,51 +11651,75 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		inline: [{
+		showTime: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "inline",
+				alias: "showTime",
 				required: false
 			}]
 		}],
-		selectionMode: [{
+		timeOnly: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "selectionMode",
+				alias: "timeOnly",
 				required: false
 			}]
 		}],
-		minDate: [{
+		hourFormat: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "minDate",
+				alias: "hourFormat",
 				required: false
 			}]
 		}],
-		maxDate: [{
+		showMinutes: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "maxDate",
+				alias: "showMinutes",
 				required: false
 			}]
 		}],
-		disabledDates: [{
+		showSeconds: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "disabledDates",
+				alias: "showSeconds",
 				required: false
 			}]
 		}],
-		firstDayOfWeek: [{
+		stepHour: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "firstDayOfWeek",
+				alias: "stepHour",
+				required: false
+			}]
+		}],
+		stepMinute: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stepMinute",
+				required: false
+			}]
+		}],
+		stepSecond: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stepSecond",
+				required: false
+			}]
+		}],
+		dateFormat: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dateFormat",
 				required: false
 			}]
 		}],
@@ -8312,6 +11731,46 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		firstDayOfWeek: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "firstDayOfWeek",
+				required: false
+			}]
+		}],
+		minDate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minDate",
+				required: false
+			}]
+		}],
+		maxDate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxDate",
+				required: false
+			}]
+		}],
+		disabledDates: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabledDates",
+				required: false
+			}]
+		}],
+		showButtonBar: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showButtonBar",
+				required: false
+			}]
+		}],
 		ariaLabel: [{
 			type: i0.Input,
 			args: [{
@@ -8362,6 +11821,14 @@ i0.ɵɵngDeclareClassMetadata({
 		field: [{
 			type: i0.ViewChild,
 			args: ["field", { isSignal: true }]
+		}],
+		daysPicker: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => HxDatePicker), { isSignal: true }]
+		}],
+		timePicker: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => HxTimePicker), { isSignal: true }]
 		}]
 	}
 });
@@ -20381,6 +23848,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, 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, HxTimeline, HxTimelineContent, HxTimelineMarker, HxTimelineOpposite, HxToast, HxToastItem, HxToggleButton, HxToolbar, HxTooltip, HxTree, HxTreeNodeTemplate, compareValues, formatFileSize, matchesAccept, provideHxTheme, resolveField };
+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 };
 
 //# sourceMappingURL=gravionlabs-helix-ui.mjs.map