forty-cdk 0.35.0 → 0.37.0

package/fesm2022/forty-cdk-calendar.mjs

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 import { Directive, ElementRef, InjectionToken, Injector, afterNextRender, booleanAttribute, computed, effect, inject, input, linkedSignal, model, numberAttribute, signal } from "@angular/core";
-import { Collection, FOR_PICKER_SOURCE_HOST, IdGenerator, LiveAnnouncer, adoptHostId, assertInputBound, clampToBounds, compareDateOf, hostAriaLabel, hostButtonType, hostLabelledBy, injectDateAdapter, injectTextDirection, isUnset, orphanContextError, registerHandle, unsetInput } from "forty-cdk/core";
+import { Collection, FOR_PICKER_SOURCE_HOST, IdGenerator, LiveAnnouncer, adoptHostId, assertInputBound, assertRootContext, clampToBounds, compareDateOf, hostAriaLabel, hostButtonType, hostLabelledBy, injectDateAdapter, injectTextDirection, isUnset, orphanContextError, registerHandle, unsetInput } from "forty-cdk/core";
 import { FOR_CALENDAR_DEFAULTS, FOR_CALENDAR_DEFAULTS as FOR_CALENDAR_DEFAULTS$1, provideForCalendarDefaults } from "forty-cdk/defaults";
 import { NativeDateAdapter, provideNativeDateAdapter } from "forty-cdk/date-adapter";
 var CalendarBounds = class {
@@ -41,6 +41,9 @@ var CalendarBounds = class {
 		if (max !== null && compareDateOf(adapter, date, max) > 0) return true;
 		return this.#host.isDateUnavailable()(date);
 	}
+	contains(date) {
+		return !this.#outOfBounds(date, date);
+	}
 	clamp(date) {
 		const adapter = this.#host.adapter;
 		return clampToBounds(adapter, date, this.#host.min(), this.#host.max(), (a, b) => compareDateOf(adapter, a, b));
@@ -63,7 +66,15 @@ function injectCalendarContext(piece) {
 		root: "[forCalendar]",
 		token: "FOR_CALENDAR_CONTEXT"
 	});
-	return ctx;
+	const widened = ctx;
+	assertRootContext({
+		entryPoint: "calendar",
+		token: "FOR_CALENDAR_CONTEXT",
+		root: "[forCalendar]",
+		piece,
+		probe: () => widened.activateDate
+	});
+	return widened;
 }
 function buildMonthMatrix(adapter, monthAnchor, firstDayOfWeek) {
 	const firstOfMonth = adapter.createDate(adapter.getYear(monthAnchor), adapter.getMonth(monthAnchor), 1);
@@ -92,6 +103,13 @@ function resolveCalendarGridMove(event, rtl, moves) {
 		default: return null;
 	}
 }
+function calendarGridRowBounds(position, first, last, columns) {
+	const start = position - (position - first) % columns;
+	return {
+		start,
+		end: Math.min(start + columns - 1, last)
+	};
+}
 function isCalendarActivationKey(event) {
 	return event.key === "Enter" || event.key === " " || event.key === "Spacebar";
 }
@@ -254,7 +272,7 @@ var CalendarMonthNavigator = class {
 		const target = this.#resolveMove(event, fromMonth);
 		if (target === null) return;
 		event.preventDefault();
-		this.#host.setFocusedDate(this.#host.clamp(this.#host.dateInMonth(target.year, target.month)));
+		this.#host.moveFocusedDate(this.#host.dateInMonth(target.year, target.month));
 		this.#host.scheduleFocus(() => this.focusCell(this.#host.visibleMonthNumber()));
 	}
 	register(handle) {
@@ -272,11 +290,12 @@ var CalendarMonthNavigator = class {
 	#resolveMove(event, fromMonth) {
 		const year = this.#host.visibleYear();
 		const base = year * 12 + (fromMonth - 1);
+		const row = calendarGridRowBounds(base, year * 12, year * 12 + 11, GRID_COLUMNS$1);
 		const index = resolveCalendarGridMove(event, this.#host.dir() === "rtl", {
 			horizontal: (step) => base + step,
 			vertical: (step) => base + step * GRID_COLUMNS$1,
-			lineStart: () => year * 12,
-			lineEnd: () => year * 12 + 11,
+			lineStart: () => row.start,
+			lineEnd: () => row.end,
 			pageBackward: () => base - 12,
 			pageForward: () => base + 12
 		});
@@ -320,17 +339,12 @@ var CalendarNavigation = class {
 		this.#cursor = new IntendedDayCursor(host.adapter, seed);
 	}
 	selectDate(date) {
-		if (this.#host.disabled() || this.#host.readonly() || this.#host.bounds.isUnavailable(date)) return;
-		if (this.#host.selectionMode() === "range") {
-			if (this.#host.range.select(date)) {
-				this.#cursor.setFocusedDay(date);
-				this.#host.focusedDate.set(date);
-				this.#host.focusDayCell(date);
-			}
-			return;
-		}
+		this.#select(date);
+	}
+	activateDate(date) {
+		if (this.#host.disabled() || this.#select(date)) return;
 		this.#cursor.setFocusedDay(date);
-		this.#host.value.set(this.#withPreservedTime(date));
+		this.#setFocusedDate(date);
 		this.#host.focusDayCell(date);
 	}
 	pageMonths(delta) {
@@ -345,7 +359,7 @@ var CalendarNavigation = class {
 		this.#pageTo(this.#host.adapter.createDate(year, month, 1));
 	}
 	applyDayKeyMove(target, isPaging) {
-		const previousMonth = this.#host.visibleMonth();
+		const previousPeriod = this.#host.periodLabel();
 		let next;
 		if (isPaging) {
 			this.#cursor.sync(this.#host.focusedDate());
@@ -355,9 +369,14 @@ var CalendarNavigation = class {
 			next = this.#host.bounds.clamp(target);
 			this.#cursor.setFocusedDay(next);
 		}
-		this.#host.focusedDate.set(next);
+		this.#setFocusedDate(next);
 		this.#host.focusDayCell(next);
-		this.#announceMonthChange(previousMonth);
+		this.#announcePeriodChange(previousPeriod);
+	}
+	moveFocusedDate(target) {
+		const previousPeriod = this.#host.periodLabel();
+		this.#setFocusedDate(this.#host.bounds.clamp(target));
+		this.#announcePeriodChange(previousPeriod);
 	}
 	dateInMonth(year, month) {
 		const adapter = this.#host.adapter;
@@ -365,16 +384,35 @@ var CalendarNavigation = class {
 		const day = Math.min(adapter.getDate(this.#host.focusedDate()), daysInMonth);
 		return adapter.createDate(year, month, day);
 	}
+	#select(date) {
+		if (this.#host.disabled() || this.#host.readonly() || this.#host.bounds.isUnavailable(date)) return false;
+		if (this.#host.selectionMode() === "range") {
+			if (!this.#host.range.select(date)) return false;
+			this.#cursor.setFocusedDay(date);
+			this.#setFocusedDate(date);
+			this.#host.focusDayCell(date);
+			return true;
+		}
+		this.#cursor.setFocusedDay(date);
+		this.#host.value.set(this.#withPreservedTime(date));
+		this.#host.focusDayCell(date);
+		return true;
+	}
+	#setFocusedDate(next) {
+		this.#host.range.clearHover();
+		this.#host.focusedDate.set(next);
+	}
 	#pageTo(target) {
-		const previousMonth = this.#host.visibleMonth();
+		const previousPeriod = this.#host.periodLabel();
 		this.#cursor.sync(this.#host.focusedDate());
 		const next = this.#host.bounds.clamp(this.#cursor.apply(target));
-		this.#host.focusedDate.set(next);
+		this.#setFocusedDate(next);
 		this.#cursor.markPaged(next);
-		this.#announceMonthChange(previousMonth);
+		this.#announcePeriodChange(previousPeriod);
 	}
-	#announceMonthChange(previousMonth) {
-		if (!this.#host.adapter.isSameDay(previousMonth, this.#host.visibleMonth())) this.#host.announce(this.#host.visibleMonthLabel());
+	#announcePeriodChange(previousPeriod) {
+		const period = this.#host.periodLabel();
+		if (period !== previousPeriod) this.#host.announce(period);
 	}
 	#withPreservedTime(date) {
 		const adapter = this.#host.adapter;
@@ -433,6 +471,9 @@ var CalendarRangeSelection = class {
 		if (!this.#host.active()) return;
 		this.#hovered.set(date);
 	}
+	clearHover() {
+		this.#hovered.set(null);
+	}
 	select(date) {
 		const adapter = this.#host.adapter;
 		const anchor = this.#anchor();
@@ -529,7 +570,7 @@ var CalendarYearNavigator = class {
 		const target = this.#resolveMove(event, fromYear);
 		if (target === null) return;
 		event.preventDefault();
-		this.#host.setFocusedDate(this.#host.clamp(this.#host.dateInMonth(target, this.#host.visibleMonthNumber())));
+		this.#host.moveFocusedDate(this.#host.dateInMonth(target, this.#host.visibleMonthNumber()));
 		this.#host.scheduleFocus(() => this.focusCell(this.#host.visibleYear()));
 	}
 	register(handle) {
@@ -547,11 +588,12 @@ var CalendarYearNavigator = class {
 	#resolveMove(event, fromYear) {
 		const size = this.#host.yearBlockSize();
 		const start = this.#host.yearBlockStart();
+		const row = calendarGridRowBounds(fromYear, start, start + size - 1, GRID_COLUMNS);
 		return resolveCalendarGridMove(event, this.#host.dir() === "rtl", {
 			horizontal: (step) => fromYear + step,
 			vertical: (step) => fromYear + step * GRID_COLUMNS,
-			lineStart: () => start,
-			lineEnd: () => start + size - 1,
+			lineStart: () => row.start,
+			lineEnd: () => row.end,
 			pageBackward: () => fromYear - size,
 			pageForward: () => fromYear + size
 		});
@@ -606,7 +648,19 @@ var ForCalendar = class ForCalendar {
 	dir = injectTextDirection(this._dirInput);
 	locale = input(null, ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
 	#initialToday = this.adapter.today();
-	focusedDate = linkedSignal(() => this.#seedDate(), ...ngDevMode ? [{ debugName: "focusedDate" }] : /* istanbul ignore next */ []);
+	focusedDate = linkedSignal({
+		...ngDevMode ? { debugName: "focusedDate" } : /* istanbul ignore next */ {},
+		source: () => ({
+			value: this.value(),
+			range: this.range(),
+			min: this.min(),
+			max: this.max()
+		}),
+		computation: (source, previous) => {
+			if (previous !== void 0 && source.value === previous.source.value && source.range === previous.source.range && this.#bounds.contains(previous.value)) return previous.value;
+			return this.#seedDate();
+		}
+	});
 	#bounds = new CalendarBounds({
 		adapter: this.adapter,
 		min: this.min,
@@ -630,8 +684,7 @@ var ForCalendar = class ForCalendar {
 		selectionMode: this.selectionMode,
 		focusedDate: this.focusedDate,
 		value: this.value,
-		visibleMonth: () => this.visibleMonth(),
-		visibleMonthLabel: () => this.visibleMonthLabel(),
+		periodLabel: () => this.viewTriggerLabel(),
 		visibleYear: () => this.visibleYear(),
 		visibleMonthNumber: () => this.visibleMonthNumber(),
 		bounds: this.#bounds,
@@ -685,7 +738,6 @@ var ForCalendar = class ForCalendar {
 			isPreviousMonthDisabled: this.#bounds.isPreviousMonthDisabled,
 			isNextMonthDisabled: this.#bounds.isNextMonthDisabled,
 			isYearDisabled: (year) => this.#bounds.isYearDisabled(year),
-			clamp: (date) => this.#bounds.clamp(date),
 			today: () => this.adapter.today()
 		};
 	}
@@ -693,7 +745,7 @@ var ForCalendar = class ForCalendar {
 		return {
 			value: () => this.value(),
 			pageByYears: (step) => this.#nav.pageByYears(step),
-			setFocusedDate: (date) => this.focusedDate.set(date),
+			moveFocusedDate: (date) => this.#nav.moveFocusedDate(date),
 			dateInMonth: (year, month) => this.#nav.dateInMonth(year, month),
 			scheduleFocus: (fn) => this.#scheduleFocus(fn)
 		};
@@ -804,6 +856,9 @@ var ForCalendar = class ForCalendar {
 	selectDate(date) {
 		this.#nav.selectDate(date);
 	}
+	activateDate(date) {
+		this.#nav.activateDate(date);
+	}
 	pageMonths(delta) {
 		this.#nav.pageMonths(delta);
 	}
@@ -831,12 +886,12 @@ var ForCalendar = class ForCalendar {
 		if (next) this.view.set(next);
 	}
 	selectMonth(month) {
-		if (this.disabled() || this.readonly() || this.isMonthDisabled(month)) return;
+		if (this.disabled() || this.isMonthDisabled(month)) return;
 		this.goToMonth(month);
 		this.view.set("day");
 	}
 	selectYear(year) {
-		if (this.disabled() || this.readonly() || this.isYearDisabled(year)) return;
+		if (this.disabled() || this.isYearDisabled(year)) return;
 		this.goToYear(year);
 		this.view.set("month");
 	}
@@ -1217,7 +1272,8 @@ var ForCalendarGrid = class ForCalendarGrid {
 			attributes: { "role": "grid" },
 			properties: {
 				"attr.aria-disabled": "ctx.disabled() ? \"true\" : null",
-				"attr.aria-readonly": "ctx.readonly() ? \"true\" : null"
+				"attr.aria-readonly": "ctx.readonly() ? \"true\" : null",
+				"attr.aria-multiselectable": "ctx.selectionMode() === \"range\" ? \"true\" : null"
 			}
 		},
 		exportAs: ["forCalendarGrid"],
@@ -1237,7 +1293,8 @@ i0.ɵɵngDeclareClassMetadata({
 			host: {
 				role: "grid",
 				"[attr.aria-disabled]": "ctx.disabled() ? \"true\" : null",
-				"[attr.aria-readonly]": "ctx.readonly() ? \"true\" : null"
+				"[attr.aria-readonly]": "ctx.readonly() ? \"true\" : null",
+				"[attr.aria-multiselectable]": "ctx.selectionMode() === \"range\" ? \"true\" : null"
 			}
 		}]
 	}]
@@ -1306,7 +1363,7 @@ var ForCalendarCell = class ForCalendarCell {
 	}
 	onClick() {
 		const date = this.date();
-		if (!isUnset(date)) this.ctx.selectDate(date);
+		if (!isUnset(date)) this.ctx.activateDate(date);
 	}
 	onKeyDown(event) {
 		const date = this.date();
@@ -1411,7 +1468,7 @@ i0.ɵɵngDeclareClassMetadata({
 });
 var ForCalendarHeading = class ForCalendarHeading {
 	ctx = injectCalendarContext("ForCalendarHeading");
-	label = this.ctx.visibleMonthLabel;
+	label = this.ctx.viewTriggerLabel;
 	constructor() {
 		this.ctx.adoptHeadingId(inject(ElementRef).nativeElement);
 	}
@@ -1649,7 +1706,7 @@ var ForCalendarMonthCell = class ForCalendarMonthCell {
 	selected = computed(() => this.#bound((v) => this.ctx.isMonthSelected(v)), ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
 	today = computed(() => this.#bound((v) => this.ctx.isMonthToday(v)), ...ngDevMode ? [{ debugName: "today" }] : /* istanbul ignore next */ []);
 	focused = computed(() => this.#bound((v) => this.ctx.isMonthFocused(v)), ...ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []);
-	disabled = computed(() => this.#bound((v) => this.ctx.isMonthDisabled(v)), ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	disabled = computed(() => this.ctx.disabled() || this.#bound((v) => this.ctx.isMonthDisabled(v)), ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
 	constructor() {
 		assertInputBound(this.month, "calendar", "[forCalendarMonthCell]", "month");
 		const handle = {
@@ -1801,7 +1858,7 @@ var ForCalendarYearCell = class ForCalendarYearCell {
 	selected = computed(() => this.#bound((v) => this.ctx.isYearSelected(v)), ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
 	today = computed(() => this.#bound((v) => this.ctx.isYearToday(v)), ...ngDevMode ? [{ debugName: "today" }] : /* istanbul ignore next */ []);
 	focused = computed(() => this.#bound((v) => this.ctx.isYearFocused(v)), ...ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []);
-	disabled = computed(() => this.#bound((v) => this.ctx.isYearDisabled(v)), ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	disabled = computed(() => this.ctx.disabled() || this.#bound((v) => this.ctx.isYearDisabled(v)), ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
 	constructor() {
 		assertInputBound(this.year, "calendar", "[forCalendarYearCell]", "year");
 		const handle = {