@lilydesignsystem/angular-date-time-picker 0.2.0 → 0.2.1

package/README.md

@@ -10,7 +10,7 @@ order, 12- vs 24-hour clock and AM/PM names all come from `Intl`.
 
 Canonical contract: [spec/index.md](./spec/index.md). This package is the
 Angular port of the Svelte-canonical
-[`@lilydesignsystem/svelte-date-time-picker`](../../lily-design-system-svelte-helpers/lily-design-system-svelte-date-time-picker/).
+[`@lilydesignsystem/svelte-date-time-picker`](../lily-design-system-svelte-date-time-picker/).
 
 ## Install
 
@@ -62,11 +62,11 @@ export class BookingComponent {
 
 ## The value is always ISO
 
-| `mode` | `value` |
-| ------ | ------- |
-| `"date"` (default) | `"2026-03-15"` |
-| `"time"` | `"09:30"` |
-| `"datetime"` | `"2026-03-15T09:30"` |
+| `mode`             | `value`              |
+| ------------------ | -------------------- |
+| `"date"` (default) | `"2026-03-15"`       |
+| `"time"`           | `"09:30"`            |
+| `"datetime"`       | `"2026-03-15T09:30"` |
 
 Sortable as a string, unambiguous in every locale, and identical to what
 `<input type="date">` posts — so you can swap the native control in or out
@@ -193,10 +193,16 @@ once on open — hide it visually with your own CSS if you prefer.
 ### Replace the glyph
 
 ```html
-<lily-date-time-picker [label]="label" [labels]="labels">
-  <ng-template lilyDateTimePickerIcon let-args>
+<lily-date-time-picker
+  [label]="label"
+  [labels]="labels"
+>
+  <ng-template
+    lilyDateTimePickerIcon
+    let-args
+  >
     <my-calendar-icon [expanded]="args.open" />
-    <span class="visually-hidden">{{ args.display }}</span>
+    <span class="screen-reader-span">{{ args.display }}</span>
   </ng-template>
 </lily-date-time-picker>
 ```
@@ -269,13 +275,18 @@ nobody wants to page a calendar back forty years.
 - [`@lilydesignsystem/angular-locale-picker`](../lily-design-system-angular-locale-picker/)
 - [`@lilydesignsystem/angular-text-size-picker`](../lily-design-system-angular-text-size-picker/)
 - [`@lilydesignsystem/angular-share-picker`](../lily-design-system-angular-share-picker/)
-- [`@lilydesignsystem/svelte-date-time-picker`](../../lily-design-system-svelte-helpers/lily-design-system-svelte-date-time-picker/) — the canonical Svelte original.
+- [`@lilydesignsystem/svelte-date-time-picker`](../lily-design-system-svelte-date-time-picker/) — the canonical Svelte original.
 
 ## License
 
 MIT or Apache-2.0 or GPL-2.0 or GPL-3.0 or BSD-3-Clause. Contact
 joel@joelparkerhenderson.com for other terms.
 
+## Known limitations
+
+- **Week numbers are ISO 8601 only.** `showWeekNumbers` numbers weeks the ISO 8601 way: weeks start on Monday and week 1 is the week containing the year's first Thursday. Other systems are not available yet: the US, Canada and Japan number from a Sunday-first week containing 1 January, and some countries use a Saturday-first week. This is a documented gap against the worldwide target, not a decision; it is planned as `weekNumbering: "iso" | "us" | "locale"` (tasks.md P17-T4, worldwide audit (`spec/internationalization/worldwide-audit.md` in the monorepo) finding 4). Until then, leave week numbers off for an audience that does not use ISO weeks, or compute them yourself and show them in your own markup.
+- **The column header is yours.** The visible header (`labels.week`) and any accessible name for a week number are supplied by the app, never English defaults, so you can label the column "Wk", "KW" or "Week (ISO)" and make it clear which system is shown.
+
 ---
 
 Lily™ and Lily Design System™ are trademarks.

package/fesm2022/lilydesignsystem-angular-date-time-picker.mjs

@@ -1,7 +1,76 @@
 import { NgTemplateOutlet } from "@angular/common";
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Directive, TemplateRef, computed, contentChild, effect, inject, input, model, output, signal, viewChild } from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, Directive, TemplateRef, afterNextRender, computed, contentChild, effect, inject, input, model, output, signal, viewChild } from "@angular/core";
 import { IconButton } from "@lilydesignsystem/angular-headless";
+const DAY_MS = 864e5;
+const toMs = (iso) => Date.parse(`${iso}T00:00:00Z`);
+const toIso = (ms) => new Date(ms).toISOString().slice(0, 10);
+const shift = (iso, days) => toIso(toMs(iso) + days * DAY_MS);
+const formatters = /* @__PURE__ */ new Map();
+function dayFormatter(calendar) {
+	let formatter = formatters.get(calendar);
+	if (!formatter) {
+		formatter = new Intl.DateTimeFormat(`en-u-ca-${calendar}-nu-latn`, {
+			day: "numeric",
+			timeZone: "UTC"
+		});
+		formatters.set(calendar, formatter);
+	}
+	return formatter;
+}
+function calendarDay(iso, calendar = "gregory") {
+	const part = dayFormatter(calendar).formatToParts(new Date(toMs(iso))).find((p) => p.type === "day");
+	return Number(part?.value);
+}
+function calendarMonthStart(iso, calendar = "gregory") {
+	return shift(iso, 1 - calendarDay(iso, calendar));
+}
+function calendarMonthLength(start, calendar = "gregory") {
+	for (let length = 1; length < 40; length++) if (calendarDay(shift(start, length), calendar) === 1) return length;
+	throw new RangeError(`calendar-system: no month end after ${start} in ${calendar}`);
+}
+function calendarAddMonths(start, delta, calendar = "gregory") {
+	let month = start;
+	for (let i = 0; i < delta; i++) month = shift(month, calendarMonthLength(month, calendar));
+	for (let i = 0; i > delta; i--) month = calendarMonthStart(shift(month, -1), calendar);
+	return month;
+}
+function calendarMonthMatrix(start, firstDayOfWeek, calendar = "gregory") {
+	const weekday = new Date(toMs(start)).getUTCDay();
+	let date = shift(start, -((weekday - firstDayOfWeek + 7) % 7));
+	const rows = [];
+	for (let row = 0; row < 6; row++) {
+		const days = [];
+		for (let column = 0; column < 7; column++) {
+			days.push(date);
+			date = shift(date, 1);
+		}
+		rows.push(days);
+	}
+	return rows;
+}
+function calendarLocale(locale, calendar = "gregory") {
+	if (!locale) return locale;
+	try {
+		return new Intl.Locale(locale, { calendar }).toString();
+	} catch {
+		return locale;
+	}
+}
+function isRtl(element) {
+	if (!element) return false;
+	const attr = element.closest("[dir]")?.getAttribute("dir")?.toLowerCase();
+	if (attr === "rtl") return true;
+	if (attr === "ltr") return false;
+	if (typeof getComputedStyle === "function") return getComputedStyle(element).direction === "rtl";
+	return false;
+}
+function logicalKey(key, rtl) {
+	if (!rtl) return key;
+	if (key === "ArrowLeft") return "ArrowRight";
+	if (key === "ArrowRight") return "ArrowLeft";
+	return key;
+}
 const CALENDAR = "📅︎";
 function pad(n, width = 2) {
 	return String(Math.abs(n)).padStart(width, "0");
@@ -187,7 +256,7 @@ function monthMatrix(year, month, firstDayOfWeek) {
 function monthNames(locale) {
 	const build = (month) => {
 		try {
-			const fmt = new Intl.DateTimeFormat(locale, {
+			const fmt = new Intl.DateTimeFormat(gregorian(locale), {
 				month,
 				timeZone: "UTC"
 			});
@@ -217,7 +286,7 @@ function matchMonthName(token, names) {
 }
 function numericFieldOrder(locale) {
 	try {
-		const order = new Intl.DateTimeFormat(locale, {
+		const order = new Intl.DateTimeFormat(gregorian(locale), {
 			day: "2-digit",
 			month: "2-digit",
 			year: "numeric",
@@ -232,7 +301,7 @@ function numericFieldOrder(locale) {
 	];
 }
 function parseDateInput(text, locale) {
-	const trimmed = text.trim();
+	const trimmed = normalizeDigits(text).trim();
 	if (!trimmed) return null;
 	const iso = parseIsoDate(trimmed);
 	if (iso) return formatIsoDate(iso);
@@ -272,8 +341,123 @@ function parseDateInput(text, locale) {
 		day
 	});
 }
-function parseTimeInput(text) {
-	const m = /^(\d{1,2})[:.]?(\d{2})\s*([ap])\.?m\.?$|^(\d{1,2})[:.]?(\d{2})$/.exec(text.trim().toLowerCase());
+function gregorian(locale) {
+	if (!locale) return locale;
+	try {
+		return new Intl.Locale(locale, { calendar: "gregory" }).toString();
+	} catch {
+		return locale;
+	}
+}
+const NATIVE_DIGITS = /* @__PURE__ */ new Map();
+function nativeDigits() {
+	if (NATIVE_DIGITS.size > 0) return NATIVE_DIGITS;
+	for (const system of [
+		"adlm",
+		"ahom",
+		"arab",
+		"arabext",
+		"bali",
+		"beng",
+		"bhks",
+		"brah",
+		"cakm",
+		"cham",
+		"deva",
+		"fullwide",
+		"gong",
+		"gonm",
+		"gujr",
+		"guru",
+		"hanidec",
+		"hmng",
+		"hmnp",
+		"java",
+		"kali",
+		"kawi",
+		"khmr",
+		"knda",
+		"lana",
+		"lanatham",
+		"laoo",
+		"lepc",
+		"limb",
+		"mathbold",
+		"mathdbl",
+		"mathmono",
+		"mathsanb",
+		"mathsans",
+		"mlym",
+		"modi",
+		"mong",
+		"mroo",
+		"mtei",
+		"mymr",
+		"mymrshan",
+		"mymrtlng",
+		"nagm",
+		"newa",
+		"nkoo",
+		"olck",
+		"orya",
+		"osma",
+		"rohg",
+		"saur",
+		"segment",
+		"shrd",
+		"sind",
+		"sinh",
+		"sora",
+		"sund",
+		"takr",
+		"talu",
+		"tamldec",
+		"telu",
+		"thai",
+		"tibt",
+		"tirh",
+		"tnsa",
+		"vaii",
+		"wara",
+		"wcho"
+	]) try {
+		const format = new Intl.NumberFormat(`en-u-nu-${system}`, { useGrouping: false });
+		for (let digit = 0; digit < 10; digit++) NATIVE_DIGITS.set(format.format(digit), String(digit));
+	} catch {}
+	return NATIVE_DIGITS;
+}
+function normalizeDigits(text) {
+	const map = nativeDigits();
+	return text.replace(/\p{Nd}/gu, (d) => map.get(d) ?? d);
+}
+function dayPeriodWords(locale) {
+	try {
+		const word = (hour) => new Intl.DateTimeFormat(locale, {
+			hour: "numeric",
+			hourCycle: "h12",
+			timeZone: "UTC"
+		}).formatToParts(new Date(Date.UTC(2021, 4, 6, hour))).find((p) => p.type === "dayPeriod")?.value.toLowerCase().replace(/[.\s\u00a0\u202f]/g, "") ?? "";
+		const am = word(9);
+		const pm = word(15);
+		return am && pm && am !== pm ? {
+			am,
+			pm
+		} : null;
+	} catch {
+		return null;
+	}
+}
+function parseTimeInput(text, locale) {
+	let typed = normalizeDigits(text).trim().toLowerCase();
+	const words = dayPeriodWords(locale);
+	if (words) {
+		const compact = typed.replace(/[.\s\u00a0\u202f]/g, "");
+		if (compact.endsWith(words.pm)) typed = `${compact.slice(0, -words.pm.length)} pm`;
+		else if (compact.endsWith(words.am)) typed = `${compact.slice(0, -words.am.length)} am`;
+		else if (compact.startsWith(words.pm)) typed = `${compact.slice(words.pm.length)} pm`;
+		else if (compact.startsWith(words.am)) typed = `${compact.slice(words.am.length)} am`;
+	}
+	const m = /^(\d{1,2})[:.]?(\d{2})\s*([ap])\.?m\.?$|^(\d{1,2})[:.]?(\d{2})$/.exec(typed);
 	if (!m) return null;
 	let hour = Number(m[1] ?? m[4]);
 	const minute = Number(m[2] ?? m[5]);
@@ -316,7 +500,7 @@ var DateTimePickerIcon = class DateTimePickerIcon {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.1",
+			version: "22.2.4",
 			ngImport: i0,
 			type: DateTimePickerIcon,
 			deps: [],
@@ -326,7 +510,7 @@ var DateTimePickerIcon = class DateTimePickerIcon {
 	static {
 		this.ɵdir = i0.ɵɵngDeclareDirective({
 			minVersion: "14.0.0",
-			version: "22.2.1",
+			version: "22.2.4",
 			type: DateTimePickerIcon,
 			isStandalone: true,
 			selector: "ng-template[lilyDateTimePickerIcon]",
@@ -336,7 +520,7 @@ var DateTimePickerIcon = class DateTimePickerIcon {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.1",
+	version: "22.2.4",
 	ngImport: i0,
 	type: DateTimePickerIcon,
 	decorators: [{
@@ -372,6 +556,7 @@ var DateTimePicker = class DateTimePicker {
 		this.mode = input("date", ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
 		this.value = model("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
 		this.locale = input("", ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+		this.calendar = input("gregory", ...ngDevMode ? [{ debugName: "calendar" }] : /* istanbul ignore next */ []);
 		this.min = input("", ...ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []);
 		this.max = input("", ...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
 		this.isDateDisabled = input(void 0, ...ngDevMode ? [{ debugName: "isDateDisabled" }] : /* istanbul ignore next */ []);
@@ -433,8 +618,7 @@ var DateTimePicker = class DateTimePicker {
 		this.typed = signal(null, ...ngDevMode ? [{ debugName: "typed" }] : /* istanbul ignore next */ []);
 		this.pendingDate = signal("", ...ngDevMode ? [{ debugName: "pendingDate" }] : /* istanbul ignore next */ []);
 		this.pendingTime = signal("", ...ngDevMode ? [{ debugName: "pendingTime" }] : /* istanbul ignore next */ []);
-		this.viewYear = signal(1970, ...ngDevMode ? [{ debugName: "viewYear" }] : /* istanbul ignore next */ []);
-		this.viewMonth = signal(1, ...ngDevMode ? [{ debugName: "viewMonth" }] : /* istanbul ignore next */ []);
+		this.viewStart = signal("1970-01-01", ...ngDevMode ? [{ debugName: "viewStart" }] : /* istanbul ignore next */ []);
 		this.cursor = signal("", ...ngDevMode ? [{ debugName: "cursor" }] : /* istanbul ignore next */ []);
 		this.today = signal("", ...ngDevMode ? [{ debugName: "today" }] : /* istanbul ignore next */ []);
 		this.fieldId = computed(() => this.inputId() || `${this.baseId}-input`, ...ngDevMode ? [{ debugName: "fieldId" }] : /* istanbul ignore next */ []);
@@ -455,16 +639,15 @@ var DateTimePicker = class DateTimePicker {
 			return typeof Intl.supportedValuesOf === "function" ? Intl.supportedValuesOf("timeZone") : [];
 		}, ...ngDevMode ? [{ debugName: "zoneOptions" }] : /* istanbul ignore next */ []);
 		this.periodText = computed(() => {
-			const viewYear = this.viewYear();
-			const viewMonth = this.viewMonth();
+			const viewStart = this.viewStart();
 			try {
-				return new Intl.DateTimeFormat(this.locale() || void 0, {
+				return new Intl.DateTimeFormat(calendarLocale(this.locale() || void 0, this.calendar()), {
 					month: "long",
 					year: "numeric",
 					timeZone: "UTC"
-				}).format(new Date(Date.UTC(viewYear, viewMonth - 1, 1)));
+				}).format(/* @__PURE__ */ new Date(`${viewStart}T00:00:00Z`));
 			} catch {
-				return `${viewYear}-${pad(viewMonth)}`;
+				return viewStart.slice(0, 7);
 			}
 		}, ...ngDevMode ? [{ debugName: "periodText" }] : /* istanbul ignore next */ []);
 		this.weekdays = computed(() => {
@@ -475,11 +658,11 @@ var DateTimePicker = class DateTimePicker {
 				const d = new Date(Date.UTC(2021, 7, 1 + (weekStart + i) % 7));
 				try {
 					out.push({
-						short: new Intl.DateTimeFormat(locale, {
+						short: new Intl.DateTimeFormat(gregorian(locale), {
 							weekday: "short",
 							timeZone: "UTC"
 						}).format(d),
-						long: new Intl.DateTimeFormat(locale, {
+						long: new Intl.DateTimeFormat(gregorian(locale), {
 							weekday: "long",
 							timeZone: "UTC"
 						}).format(d)
@@ -493,7 +676,7 @@ var DateTimePicker = class DateTimePicker {
 			}
 			return out;
 		}, ...ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []);
-		this.weeks = computed(() => monthMatrix(this.viewYear(), this.viewMonth(), this.weekStart()), ...ngDevMode ? [{ debugName: "weeks" }] : /* istanbul ignore next */ []);
+		this.weeks = computed(() => calendarMonthMatrix(this.viewStart(), this.weekStart(), this.calendar()), ...ngDevMode ? [{ debugName: "weeks" }] : /* istanbul ignore next */ []);
 		this.pendingHour = computed(() => parseIsoTime(this.pendingTime())?.hour ?? 0, ...ngDevMode ? [{ debugName: "pendingHour" }] : /* istanbul ignore next */ []);
 		this.pendingMinute = computed(() => parseIsoTime(this.pendingTime())?.minute ?? 0, ...ngDevMode ? [{ debugName: "pendingMinute" }] : /* istanbul ignore next */ []);
 		this.hourOptions = computed(() => {
@@ -535,11 +718,39 @@ var DateTimePicker = class DateTimePicker {
 			this.today.set(today);
 			const anchor = parseIsoDate(committed.date) ?? parseIsoDate(today);
 			if (anchor) {
-				this.viewYear.set(anchor.year);
-				this.viewMonth.set(anchor.month);
+				this.viewStart.set(calendarMonthStart(formatIsoDate(anchor), this.calendar()));
 				this.cursor.set(formatIsoDate(anchor));
 			}
 		});
+		const destroyRef = inject(DestroyRef);
+		afterNextRender(() => {
+			const root = this.rootRef().nativeElement;
+			const form = root.closest("form");
+			if (!form) return;
+			const initialValue = this.value();
+			const initialZone = this.timeZone();
+			let timer;
+			const onReset = (event) => {
+				clearTimeout(timer);
+				timer = setTimeout(() => {
+					if (event.defaultPrevented) return;
+					this.closeDialog(false);
+					this.typed.set(null);
+					this.invalid.set(false);
+					this.value.set(initialValue);
+					this.timeZone.set(initialZone);
+					const field = root.querySelector(".date-time-picker-input");
+					const formatter = this.formatValue() ?? ((v) => this.defaultFormat(v));
+					if (field) field.value = formatter(initialValue ?? "");
+					this.cdr.markForCheck();
+				}, 0);
+			};
+			form.addEventListener("reset", onReset);
+			destroyRef.onDestroy(() => {
+				clearTimeout(timer);
+				form.removeEventListener("reset", onReset);
+			});
+		});
 	}
 	pad2(n) {
 		return pad(n);
@@ -548,17 +759,16 @@ var DateTimePicker = class DateTimePicker {
 		return isoWeek(isoDate);
 	}
 	parseCell(isoDate) {
-		const parsed = parseIsoDate(isoDate);
 		return {
-			day: parsed ? String(parsed.day) : "",
-			outside: parsed ? parsed.month !== this.viewMonth() : false
+			day: parseIsoDate(isoDate) ? String(calendarDay(isoDate, this.calendar())) : "",
+			outside: isoDate < this.viewStart() || isoDate >= calendarAddMonths(this.viewStart(), 1, this.calendar())
 		};
 	}
 	dayLabel(isoDate) {
 		const parsed = parseIsoDate(isoDate);
 		if (!parsed) return isoDate;
 		try {
-			return new Intl.DateTimeFormat(this.locale() || void 0, {
+			return new Intl.DateTimeFormat(calendarLocale(this.locale() || void 0, this.calendar()), {
 				weekday: "long",
 				day: "numeric",
 				month: "long",
@@ -571,7 +781,7 @@ var DateTimePicker = class DateTimePicker {
 	}
 	dayPeriodName(pm) {
 		try {
-			const found = new Intl.DateTimeFormat(this.locale() || void 0, {
+			const found = new Intl.DateTimeFormat(gregorian(this.locale() || void 0), {
 				hour: "numeric",
 				hour12: true,
 				timeZone: "UTC"
@@ -584,7 +794,7 @@ var DateTimePicker = class DateTimePicker {
 		const parsed = parseIsoTime(isoTime);
 		if (!parsed) return isoTime;
 		try {
-			return new Intl.DateTimeFormat(this.locale() || void 0, {
+			return new Intl.DateTimeFormat(gregorian(this.locale() || void 0), {
 				hour: "2-digit",
 				minute: "2-digit",
 				hour12: this.clock12(),
@@ -600,7 +810,7 @@ var DateTimePicker = class DateTimePicker {
 		const chunks = [];
 		const parsed = date ? parseIsoDate(date) : null;
 		if (parsed) try {
-			chunks.push(new Intl.DateTimeFormat(this.locale() || void 0, {
+			chunks.push(new Intl.DateTimeFormat(gregorian(this.locale() || void 0), {
 				day: "2-digit",
 				month: "short",
 				year: "numeric",
@@ -637,10 +847,7 @@ var DateTimePicker = class DateTimePicker {
 		this.pendingTime.set(this.committed().time || this.defaultTime());
 		this.cursor.set(pendingDate);
 		const anchor = parseIsoDate(pendingDate) ?? parseIsoDate(today);
-		if (anchor) {
-			this.viewYear.set(anchor.year);
-			this.viewMonth.set(anchor.month);
-		}
+		if (anchor) this.viewStart.set(calendarMonthStart(formatIsoDate(anchor), this.calendar()));
 		this.open.set(true);
 		this.cdr.detectChanges();
 		this.focusInitial();
@@ -693,10 +900,7 @@ var DateTimePicker = class DateTimePicker {
 		if (!withinRange(nextIso, this.min() || void 0, this.max() || void 0)) return;
 		this.cursor.set(nextIso);
 		const parsed = parseIsoDate(nextIso);
-		if (parsed && (parsed.year !== this.viewYear() || parsed.month !== this.viewMonth())) {
-			this.viewYear.set(parsed.year);
-			this.viewMonth.set(parsed.month);
-		}
+		if (parsed) this.viewStart.set(calendarMonthStart(formatIsoDate(parsed), this.calendar()));
 		this.cdr.detectChanges();
 		this.focusCursor();
 	}
@@ -715,22 +919,12 @@ var DateTimePicker = class DateTimePicker {
 		if (this.commitOnDay()) this.commit();
 	}
 	shiftMonth(delta) {
-		const next = parseIsoDate(addMonths(formatIsoDate({
-			year: this.viewYear(),
-			month: this.viewMonth(),
-			day: 1
-		}), delta));
-		if (!next) return;
+		const next = calendarAddMonths(this.viewStart(), delta, this.calendar());
 		const hadGridFocus = this.gridRef()?.nativeElement.contains(document.activeElement) === true;
-		this.viewYear.set(next.year);
-		this.viewMonth.set(next.month);
+		this.viewStart.set(next);
 		const c = parseIsoDate(this.cursor());
 		if (c) {
-			this.cursor.set(formatIsoDate({
-				year: next.year,
-				month: next.month,
-				day: Math.min(c.day, daysInMonth(next.year, next.month))
-			}));
+			this.cursor.set(addDays(next, Math.min(calendarDay(formatIsoDate(c), this.calendar()), calendarMonthLength(next, this.calendar())) - 1));
 			if (hadGridFocus) {
 				this.cdr.detectChanges();
 				this.focusCursor();
@@ -747,10 +941,7 @@ var DateTimePicker = class DateTimePicker {
 		if (!withinRange(next, this.min() || void 0, this.max() || void 0)) return;
 		const hadGridFocus = this.gridRef()?.nativeElement.contains(document.activeElement) === true;
 		const parsed = parseIsoDate(next);
-		if (parsed && (parsed.year !== this.viewYear() || parsed.month !== this.viewMonth())) {
-			this.viewYear.set(parsed.year);
-			this.viewMonth.set(parsed.month);
-		}
+		if (parsed) this.viewStart.set(calendarMonthStart(formatIsoDate(parsed), this.calendar()));
 		this.cursor.set(next);
 		if (!this.dayDisabled(next)) this.pendingDate.set(next);
 		if (hadGridFocus) {
@@ -765,7 +956,7 @@ var DateTimePicker = class DateTimePicker {
 		return this.timeZoneLabels()[zone] ?? zone;
 	}
 	onGridKeydown(event) {
-		switch (event.key) {
+		switch (logicalKey(event.key, isRtl(this.gridRef()?.nativeElement))) {
 			case "ArrowLeft":
 				event.preventDefault();
 				this.moveCursor(addDays(this.cursor(), -1));
@@ -837,12 +1028,12 @@ var DateTimePicker = class DateTimePicker {
 		}
 	}
 	parseTypedForMode(text) {
-		if (this.mode() === "time") return parseTimeInput(text);
+		if (this.mode() === "time") return parseTimeInput(text, this.locale() || void 0);
 		if (this.mode() === "date") return parseDateInput(text, this.locale() || void 0);
 		const m = /^(.*?)[T\s]+([^\sT]+)$/.exec(text.trim());
 		if (!m) return null;
 		const date = parseDateInput(m[1], this.locale() || void 0);
-		const time = parseTimeInput(m[2]);
+		const time = parseTimeInput(m[2], this.locale() || void 0);
 		return date && time ? `${date}T${time}` : null;
 	}
 	resolveTyped() {
@@ -915,10 +1106,7 @@ var DateTimePicker = class DateTimePicker {
 		this.pendingDate.set(target);
 		this.cursor.set(target);
 		const parsed = parseIsoDate(target);
-		if (parsed) {
-			this.viewYear.set(parsed.year);
-			this.viewMonth.set(parsed.month);
-		}
+		if (parsed) this.viewStart.set(calendarMonthStart(formatIsoDate(parsed), this.calendar()));
 		this.shortcut.emit({
 			id: shortcut.id,
 			isoDate: target
@@ -939,7 +1127,7 @@ var DateTimePicker = class DateTimePicker {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.1",
+			version: "22.2.4",
 			ngImport: i0,
 			type: DateTimePicker,
 			deps: [],
@@ -949,7 +1137,7 @@ var DateTimePicker = class DateTimePicker {
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
 			minVersion: "17.0.0",
-			version: "22.2.1",
+			version: "22.2.4",
 			type: DateTimePicker,
 			isStandalone: true,
 			selector: "lily-date-time-picker",
@@ -989,6 +1177,13 @@ var DateTimePicker = class DateTimePicker {
 					isRequired: false,
 					transformFunction: null
 				},
+				calendar: {
+					classPropertyName: "calendar",
+					publicName: "calendar",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				min: {
 					classPropertyName: "min",
 					publicName: "min",
@@ -1612,7 +1807,7 @@ var DateTimePicker = class DateTimePicker {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.1",
+	version: "22.2.4",
 	ngImport: i0,
 	type: DateTimePicker,
 	decorators: [{
@@ -2061,6 +2256,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		calendar: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "calendar",
+				required: false
+			}]
+		}],
 		min: [{
 			type: i0.Input,
 			args: [{
@@ -2274,6 +2477,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { CALENDAR, DateTimePicker, DateTimePickerIcon, addDays, addMonths, daysInMonth, firstDayOfWeekFor, formatIsoDate, formatIsoTime, fromEpochDay, isoWeek, joinValue, monthMatrix, monthNames, nextDateTimePickerId, numericFieldOrder, pad, parseDateInput, parseIsoDate, parseIsoTime, parseTimeInput, splitValue, toEpochDay, weekdayOf, withinRange };
+export { CALENDAR, DateTimePicker, DateTimePickerIcon, addDays, addMonths, daysInMonth, firstDayOfWeekFor, formatIsoDate, formatIsoTime, fromEpochDay, gregorian, isoWeek, joinValue, monthMatrix, monthNames, nextDateTimePickerId, normalizeDigits, numericFieldOrder, pad, parseDateInput, parseIsoDate, parseIsoTime, parseTimeInput, splitValue, toEpochDay, weekdayOf, withinRange };
 
 //# sourceMappingURL=lilydesignsystem-angular-date-time-picker.mjs.map