@vadem/ui 0.0.0-stage → 0.0.1

package/fesm2022/vadem-ui-calendar.mjs

@@ -0,0 +1,1314 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, Injector, LOCALE_ID, ViewEncapsulation, afterNextRender, afterRenderEffect, booleanAttribute, computed, forwardRef, inject, input, linkedSignal, model, output, signal, viewChild } from "@angular/core";
+import { vdNgControlState, vdUniqueId } from "@vadem/ui/field";
+import { VdIcon } from "@vadem/ui/icon";
+import { vdTexts } from "@vadem/ui/locale";
+import { NG_VALUE_ACCESSOR, NgControl } from "@angular/forms";
+import { VdButton } from "@vadem/ui/button";
+import { VdInput, VdInputGroup } from "@vadem/ui/input";
+const ISO = /^(\d{4})-(\d{2})-(\d{2})$/;
+function vdParseIso(value) {
+	const m = value ? ISO.exec(value) : null;
+	if (!m) return null;
+	const date = new Date(Date.UTC(+m[1], +m[2] - 1, +m[3]));
+	return vdToIso(date) === value ? date : null;
+}
+function vdToIso(date) {
+	return date.toISOString().slice(0, 10);
+}
+function vdToday(now = /* @__PURE__ */ new Date()) {
+	return vdToIso(new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())));
+}
+function vdAddDays(iso, days) {
+	const d = vdParseIso(iso);
+	d.setUTCDate(d.getUTCDate() + days);
+	return vdToIso(d);
+}
+function vdAddMonths(iso, months) {
+	const d = vdParseIso(iso);
+	const day = d.getUTCDate();
+	const target = new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth() + months, 1));
+	const last = new Date(Date.UTC(target.getUTCFullYear(), target.getUTCMonth() + 1, 0)).getUTCDate();
+	target.setUTCDate(Math.min(day, last));
+	return vdToIso(target);
+}
+function vdWeekday(iso) {
+	return vdParseIso(iso).getUTCDay();
+}
+function vdStartOfMonth(iso) {
+	return iso.slice(0, 8) + "01";
+}
+function vdClampDate(iso, min, max) {
+	if (min && iso < min) return min;
+	if (max && iso > max) return max;
+	return iso;
+}
+function vdMonthGrid(month, firstDay) {
+	const first = vdStartOfMonth(month);
+	let cursor = vdAddDays(first, -((vdWeekday(first) - firstDay + 7) % 7));
+	const weeks = [];
+	for (let w = 0; w < 6; w++) {
+		const week = [];
+		for (let i = 0; i < 7; i++) {
+			week.push({
+				date: cursor,
+				day: +cursor.slice(8),
+				inMonth: cursor.slice(0, 7) === first.slice(0, 7)
+			});
+			cursor = vdAddDays(cursor, 1);
+		}
+		weeks.push(week);
+	}
+	return weeks;
+}
+const SUNDAY_FIRST = /* @__PURE__ */ new Set([
+	"US",
+	"CA",
+	"MX",
+	"BR",
+	"JP",
+	"KR",
+	"TW",
+	"HK",
+	"IL",
+	"IN",
+	"PH",
+	"SA",
+	"ZA",
+	"AU"
+]);
+const SATURDAY_FIRST = /* @__PURE__ */ new Set([
+	"AE",
+	"EG",
+	"IR",
+	"DZ",
+	"IQ",
+	"JO",
+	"KW",
+	"LY",
+	"OM",
+	"QA",
+	"SY"
+]);
+function vdFirstDayOfWeek(locale) {
+	try {
+		const loc = new Intl.Locale(locale);
+		const info = loc.getWeekInfo?.() ?? loc.weekInfo;
+		if (info?.firstDay) return info.firstDay % 7;
+		const region = loc.maximize().region ?? "";
+		if (SUNDAY_FIRST.has(region)) return 0;
+		if (SATURDAY_FIRST.has(region)) return 6;
+	} catch {}
+	return 1;
+}
+function vdWeekdayNames(locale, firstDay, width = "short") {
+	const format = new Intl.DateTimeFormat(locale, {
+		weekday: width,
+		timeZone: "UTC"
+	});
+	return Array.from({ length: 7 }, (_, i) => format.format(new Date(Date.UTC(2023, 0, 1 + (firstDay + i) % 7))));
+}
+function vdFormatDate(iso, locale, options) {
+	const date = vdParseIso(iso);
+	return date ? new Intl.DateTimeFormat(locale, {
+		...options,
+		timeZone: "UTC"
+	}).format(date) : "";
+}
+function vdDateOrder(locale) {
+	return new Intl.DateTimeFormat(locale, {
+		day: "2-digit",
+		month: "2-digit",
+		year: "numeric",
+		timeZone: "UTC"
+	}).formatToParts(new Date(Date.UTC(2006, 10, 22))).map((p) => p.type).filter((t) => t === "day" || t === "month" || t === "year");
+}
+function vdParseDate(text, locale) {
+	const trimmed = text.trim();
+	if (!trimmed) return null;
+	if (vdParseIso(trimmed)) return trimmed;
+	const nums = trimmed.match(/\d+/g);
+	if (!nums || nums.length !== 3) return null;
+	const order = vdDateOrder(locale);
+	const parts = {};
+	order.forEach((type, i) => parts[type] = +nums[i]);
+	let year = parts["year"];
+	if (nums[order.indexOf("year")].length <= 2) year += 2e3;
+	const iso = `${String(year).padStart(4, "0")}-${String(parts["month"]).padStart(2, "0")}-${String(parts["day"]).padStart(2, "0")}`;
+	return vdParseIso(iso) ? iso : null;
+}
+function vdFormatShort(iso, locale) {
+	return vdFormatDate(iso, locale, {
+		day: "2-digit",
+		month: "2-digit",
+		year: "numeric"
+	});
+}
+function vdCalendarKey(key, current, options) {
+	const back = options.rtl ? "ArrowRight" : "ArrowLeft";
+	const forward = options.rtl ? "ArrowLeft" : "ArrowRight";
+	switch (key) {
+		case back: return vdAddDays(current, -1);
+		case forward: return vdAddDays(current, 1);
+		case "ArrowUp": return vdAddDays(current, -7);
+		case "ArrowDown": return vdAddDays(current, 7);
+		case "Home": return vdAddDays(current, -((vdWeekday(current) - options.firstDay + 7) % 7));
+		case "End": return vdAddDays(current, 6 - (vdWeekday(current) - options.firstDay + 7) % 7);
+		case "PageUp": return vdAddMonths(current, options.shift ? -12 : -1);
+		case "PageDown": return vdAddMonths(current, options.shift ? 12 : 1);
+		default: return null;
+	}
+}
+var VdCalendar = class VdCalendar {
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	selectionMode = input("single", ...ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []);
+	rangeStart = input(null, ...ngDevMode ? [{ debugName: "rangeStart" }] : /* istanbul ignore next */ []);
+	rangeEnd = input(null, ...ngDevMode ? [{ debugName: "rangeEnd" }] : /* istanbul ignore next */ []);
+	dateSelected = output();
+	min = input(null, ...ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []);
+	max = input(null, ...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
+	dateDisabled = input(() => false, ...ngDevMode ? [{ debugName: "dateDisabled" }] : /* istanbul ignore next */ []);
+	locale = input(inject(LOCALE_ID), ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	firstDayOfWeek = input(void 0, ...ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []);
+	previousLabel = input(...ngDevMode ? [void 0, { debugName: "previousLabel" }] : /* istanbul ignore next */ []);
+	nextLabel = input(...ngDevMode ? [void 0, { debugName: "nextLabel" }] : /* istanbul ignore next */ []);
+	t = vdTexts("calendar", {
+		previousLabel: this.previousLabel,
+		nextLabel: this.nextLabel
+	});
+	today = vdToday();
+	titleId = vdUniqueId("vd-calendar-title");
+	el = inject(ElementRef).nativeElement;
+	initialDate = computed(() => this.nearestAvailable(vdClampDate(this.value() ?? this.rangeStart() ?? this.today, this.min(), this.max())), ...ngDevMode ? [{ debugName: "initialDate" }] : /* istanbul ignore next */ []);
+	focused = linkedSignal(() => this.initialDate(), ...ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []);
+	displayed = linkedSignal(() => this.initialDate(), ...ngDevMode ? [{ debugName: "displayed" }] : /* istanbul ignore next */ []);
+	focusRequested = signal(false, ...ngDevMode ? [{ debugName: "focusRequested" }] : /* istanbul ignore next */ []);
+	firstDay = computed(() => this.firstDayOfWeek() ?? vdFirstDayOfWeek(this.locale()), ...ngDevMode ? [{ debugName: "firstDay" }] : /* istanbul ignore next */ []);
+	grid = computed(() => vdMonthGrid(this.displayed(), this.firstDay()), ...ngDevMode ? [{ debugName: "grid" }] : /* istanbul ignore next */ []);
+	weekdays = computed(() => {
+		const short = vdWeekdayNames(this.locale(), this.firstDay(), "short");
+		return short.some((name) => name.length > 3) ? vdWeekdayNames(this.locale(), this.firstDay(), "narrow") : short;
+	}, ...ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []);
+	numbers = computed(() => new Intl.NumberFormat(this.locale()), ...ngDevMode ? [{ debugName: "numbers" }] : /* istanbul ignore next */ []);
+	weekdaysLong = computed(() => vdWeekdayNames(this.locale(), this.firstDay(), "long"), ...ngDevMode ? [{ debugName: "weekdaysLong" }] : /* istanbul ignore next */ []);
+	title = computed(() => vdFormatDate(this.displayed(), this.locale(), {
+		month: "long",
+		year: "numeric"
+	}), ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	canGoBack = computed(() => {
+		const min = this.min();
+		return !min || this.displayed().slice(0, 7) > min.slice(0, 7);
+	}, ...ngDevMode ? [{ debugName: "canGoBack" }] : /* istanbul ignore next */ []);
+	canGoForward = computed(() => {
+		const max = this.max();
+		return !max || this.displayed().slice(0, 7) < max.slice(0, 7);
+	}, ...ngDevMode ? [{ debugName: "canGoForward" }] : /* istanbul ignore next */ []);
+	constructor() {
+		afterRenderEffect(() => {
+			const date = this.focused();
+			if (!this.focusRequested()) return;
+			this.focusRequested.set(false);
+			this.el.querySelector(`[data-date="${date}"]`)?.focus();
+		});
+	}
+	focus() {
+		this.displayed.set(this.focused());
+		this.focusRequested.set(true);
+	}
+	isSelected(date) {
+		if (this.selectionMode() === "single") return date === this.value();
+		const start = this.rangeStart();
+		return !!start && date >= start && date <= (this.rangeEnd() ?? start);
+	}
+	isDisabled(date) {
+		const min = this.min();
+		const max = this.max();
+		return !!min && date < min || !!max && date > max || this.dateDisabled()(date);
+	}
+	nearestAvailable(date) {
+		if (!this.isDisabled(date)) return date;
+		for (let i = 1; i <= 366; i++) {
+			const after = vdAddDays(date, i);
+			if (!this.isDisabled(after)) return after;
+			const before = vdAddDays(date, -i);
+			if (!this.isDisabled(before)) return before;
+		}
+		return date;
+	}
+	dayLabel(day) {
+		return vdFormatDate(day.date, this.locale(), {
+			weekday: "long",
+			day: "numeric",
+			month: "long",
+			year: "numeric"
+		});
+	}
+	onDayFocus(date, event) {
+		event.target.scrollIntoView?.({
+			block: "nearest",
+			inline: "nearest"
+		});
+		if (date === this.focused()) return;
+		this.focused.set(date);
+	}
+	choose(date) {
+		if (this.isDisabled(date)) return;
+		this.focused.set(date);
+		this.displayed.set(date);
+		if (this.selectionMode() === "single") this.value.set(date);
+		this.dateSelected.emit(date);
+	}
+	shiftMonth(months) {
+		const date = vdClampDate(vdAddMonths(this.displayed(), months), this.min(), this.max());
+		this.focused.set(date);
+		this.displayed.set(date);
+	}
+	onKey(event) {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			this.choose(this.focused());
+			return;
+		}
+		const rtl = this.el.ownerDocument.defaultView?.getComputedStyle(this.el).direction === "rtl";
+		const next = vdCalendarKey(event.key, this.focused(), {
+			firstDay: this.firstDay(),
+			rtl,
+			shift: event.shiftKey
+		});
+		if (!next) return;
+		event.preventDefault();
+		this.focused.set(vdClampDate(next, this.min(), this.max()));
+		this.displayed.set(this.focused());
+		this.focusRequested.set(true);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdCalendar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: VdCalendar,
+		isStandalone: true,
+		selector: "vd-calendar",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectionMode: {
+				classPropertyName: "selectionMode",
+				publicName: "selectionMode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			rangeStart: {
+				classPropertyName: "rangeStart",
+				publicName: "rangeStart",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			rangeEnd: {
+				classPropertyName: "rangeEnd",
+				publicName: "rangeEnd",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			min: {
+				classPropertyName: "min",
+				publicName: "min",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			max: {
+				classPropertyName: "max",
+				publicName: "max",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dateDisabled: {
+				classPropertyName: "dateDisabled",
+				publicName: "dateDisabled",
+				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
+			},
+			previousLabel: {
+				classPropertyName: "previousLabel",
+				publicName: "previousLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			nextLabel: {
+				classPropertyName: "nextLabel",
+				publicName: "nextLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			dateSelected: "dateSelected"
+		},
+		host: { classAttribute: "vd-calendar" },
+		ngImport: i0,
+		template: `
+    <div class="vd-calendar__header">
+      <button
+        type="button"
+        class="vd-calendar__nav"
+        [attr.aria-label]="t().previousLabel"
+        [disabled]="!canGoBack()"
+        (click)="shiftMonth(-1)"
+      >
+        <vd-icon name="chevron-left" />
+      </button>
+      <span class="vd-calendar__title" [id]="titleId" aria-live="polite">{{ title() }}</span>
+      <button
+        type="button"
+        class="vd-calendar__nav"
+        [attr.aria-label]="t().nextLabel"
+        [disabled]="!canGoForward()"
+        (click)="shiftMonth(1)"
+      >
+        <vd-icon name="chevron-right" />
+      </button>
+    </div>
+    <!-- Keys bubble from the focused cell (roving tabindex); the table only delegates. -->
+    <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->
+    <table
+      class="vd-calendar__grid"
+      role="grid"
+      [attr.aria-labelledby]="titleId"
+      [attr.aria-multiselectable]="selectionMode() === 'range' ? true : null"
+      (keydown)="onKey($event)"
+    >
+      <thead>
+        <tr>
+          @for (name of weekdays(); track $index) {
+            <th scope="col" [attr.abbr]="weekdaysLong()[$index]">{{ name }}</th>
+          }
+        </tr>
+      </thead>
+      <tbody>
+        @for (week of grid(); track week[0].date) {
+          <tr>
+            @for (day of week; track day.date) {
+              <td
+                role="gridcell"
+                class="vd-calendar__day"
+                [attr.data-date]="day.date"
+                [attr.tabindex]="day.date === focused() ? 0 : -1"
+                [attr.aria-selected]="isSelected(day.date)"
+                [attr.data-range-start]="
+                  selectionMode() === 'range' && day.date === rangeStart() ? '' : null
+                "
+                [attr.data-range-end]="
+                  selectionMode() === 'range' && day.date === rangeEnd() ? '' : null
+                "
+                [attr.data-in-range]="
+                  selectionMode() === 'range' && isSelected(day.date) ? '' : null
+                "
+                [attr.aria-disabled]="isDisabled(day.date) || null"
+                [attr.aria-current]="day.date === today ? 'date' : null"
+                [attr.aria-label]="dayLabel(day)"
+                [attr.data-outside]="day.inMonth ? null : ''"
+                (focus)="onDayFocus(day.date, $event)"
+                (click)="choose(day.date)"
+              >
+                {{ numbers().format(day.day) }}
+              </td>
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: VdIcon,
+			selector: "vd-icon",
+			inputs: ["name", "label"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdCalendar,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "vd-calendar",
+			imports: [VdIcon],
+			template: `
+    <div class="vd-calendar__header">
+      <button
+        type="button"
+        class="vd-calendar__nav"
+        [attr.aria-label]="t().previousLabel"
+        [disabled]="!canGoBack()"
+        (click)="shiftMonth(-1)"
+      >
+        <vd-icon name="chevron-left" />
+      </button>
+      <span class="vd-calendar__title" [id]="titleId" aria-live="polite">{{ title() }}</span>
+      <button
+        type="button"
+        class="vd-calendar__nav"
+        [attr.aria-label]="t().nextLabel"
+        [disabled]="!canGoForward()"
+        (click)="shiftMonth(1)"
+      >
+        <vd-icon name="chevron-right" />
+      </button>
+    </div>
+    <!-- Keys bubble from the focused cell (roving tabindex); the table only delegates. -->
+    <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->
+    <table
+      class="vd-calendar__grid"
+      role="grid"
+      [attr.aria-labelledby]="titleId"
+      [attr.aria-multiselectable]="selectionMode() === 'range' ? true : null"
+      (keydown)="onKey($event)"
+    >
+      <thead>
+        <tr>
+          @for (name of weekdays(); track $index) {
+            <th scope="col" [attr.abbr]="weekdaysLong()[$index]">{{ name }}</th>
+          }
+        </tr>
+      </thead>
+      <tbody>
+        @for (week of grid(); track week[0].date) {
+          <tr>
+            @for (day of week; track day.date) {
+              <td
+                role="gridcell"
+                class="vd-calendar__day"
+                [attr.data-date]="day.date"
+                [attr.tabindex]="day.date === focused() ? 0 : -1"
+                [attr.aria-selected]="isSelected(day.date)"
+                [attr.data-range-start]="
+                  selectionMode() === 'range' && day.date === rangeStart() ? '' : null
+                "
+                [attr.data-range-end]="
+                  selectionMode() === 'range' && day.date === rangeEnd() ? '' : null
+                "
+                [attr.data-in-range]="
+                  selectionMode() === 'range' && isSelected(day.date) ? '' : null
+                "
+                [attr.aria-disabled]="isDisabled(day.date) || null"
+                [attr.aria-current]="day.date === today ? 'date' : null"
+                [attr.aria-label]="dayLabel(day)"
+                [attr.data-outside]="day.inMonth ? null : ''"
+                (focus)="onDayFocus(day.date, $event)"
+                (click)="choose(day.date)"
+              >
+                {{ numbers().format(day.day) }}
+              </td>
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
+  `,
+			host: { class: "vd-calendar" },
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		selectionMode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectionMode",
+				required: false
+			}]
+		}],
+		rangeStart: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rangeStart",
+				required: false
+			}]
+		}],
+		rangeEnd: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rangeEnd",
+				required: false
+			}]
+		}],
+		dateSelected: [{
+			type: i0.Output,
+			args: ["dateSelected"]
+		}],
+		min: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "min",
+				required: false
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		dateDisabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dateDisabled",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		firstDayOfWeek: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "firstDayOfWeek",
+				required: false
+			}]
+		}],
+		previousLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "previousLabel",
+				required: false
+			}]
+		}],
+		nextLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nextLabel",
+				required: false
+			}]
+		}]
+	}
+});
+const NO_NG_STATE = {
+	invalid: false,
+	touched: false,
+	disabled: false,
+	required: false
+};
+var VdDatePicker = class VdDatePicker {
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	min = input(null, ...ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []);
+	max = input(null, ...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
+	dateDisabled = input(() => false, ...ngDevMode ? [{ debugName: "dateDisabled" }] : /* istanbul ignore next */ []);
+	locale = input(inject(LOCALE_ID), ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	firstDayOfWeek = input(void 0, ...ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* 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
+	});
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	placeholder = input(...ngDevMode ? [void 0, { debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(void 0, {
+		...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
+		alias: "aria-label"
+	});
+	openLabel = input(...ngDevMode ? [void 0, { debugName: "openLabel" }] : /* istanbul ignore next */ []);
+	dialogLabel = input(...ngDevMode ? [void 0, { debugName: "dialogLabel" }] : /* istanbul ignore next */ []);
+	previousLabel = input(...ngDevMode ? [void 0, { debugName: "previousLabel" }] : /* istanbul ignore next */ []);
+	nextLabel = input(...ngDevMode ? [void 0, { debugName: "nextLabel" }] : /* istanbul ignore next */ []);
+	t = vdTexts("datePicker", {
+		openLabel: this.openLabel,
+		dialogLabel: this.dialogLabel,
+		previousLabel: this.previousLabel,
+		nextLabel: this.nextLabel
+	});
+	open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	text = linkedSignal(() => {
+		const value = this.value();
+		return value ? vdFormatShort(value, this.locale()) : "";
+	}, ...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
+	parseError = signal(false, ...ngDevMode ? [{ debugName: "parseError" }] : /* istanbul ignore next */ []);
+	formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
+	ngSource = signal(null, ...ngDevMode ? [{ debugName: "ngSource" }] : /* istanbul ignore next */ []);
+	ngState = computed(() => this.ngSource()?.() ?? NO_NG_STATE, ...ngDevMode ? [{ debugName: "ngState" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	isRequired = computed(() => this.required() || this.ngState().required, ...ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []);
+	showInvalid = computed(() => this.invalid() || this.parseError() || this.ngState().invalid && this.ngState().touched, ...ngDevMode ? [{ debugName: "showInvalid" }] : /* istanbul ignore next */ []);
+	touchedState = computed(() => this.showInvalid() ? true : void 0, ...ngDevMode ? [{ debugName: "touchedState" }] : /* istanbul ignore next */ []);
+	placeholderText = computed(() => this.placeholder() ?? vdFormatShort(`${(/* @__PURE__ */ new Date()).getFullYear()}-12-31`, this.locale()), ...ngDevMode ? [{ debugName: "placeholderText" }] : /* istanbul ignore next */ []);
+	panel = viewChild.required("panel", ...ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []);
+	group = viewChild.required("group", {
+		...ngDevMode ? { debugName: "group" } : /* istanbul ignore next */ {},
+		read: ElementRef
+	});
+	field = viewChild.required("field", ...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
+	calendar = viewChild.required(VdCalendar, ...ngDevMode ? [{ debugName: "calendar" }] : /* istanbul ignore next */ []);
+	injector = inject(Injector);
+	destroyRef = inject(DestroyRef);
+	anchorName = `--${vdUniqueId("vd-date-picker")}`;
+	openAtPress = null;
+	onChange = () => void 0;
+	onTouched = () => void 0;
+	constructor() {
+		afterNextRender(() => {
+			const panel = this.panel().nativeElement;
+			this.group().nativeElement.style.setProperty("anchor-name", this.anchorName);
+			panel.style.setProperty("position-anchor", this.anchorName);
+			const onToggle = (event) => {
+				const opened = event.newState === "open";
+				this.open.set(opened);
+				if (opened) this.calendar().focus();
+			};
+			panel.addEventListener("toggle", onToggle);
+			this.destroyRef.onDestroy(() => panel.removeEventListener("toggle", onToggle));
+		});
+	}
+	ngOnInit() {
+		const ngControl = this.injector.get(NgControl, null, {
+			self: true,
+			optional: true
+		});
+		this.ngSource.set(vdNgControlState(ngControl, this.destroyRef));
+	}
+	rememberState() {
+		this.openAtPress = this.panel().nativeElement.matches(":popover-open");
+	}
+	toggle() {
+		const panel = this.panel().nativeElement;
+		const wasOpen = this.openAtPress ?? panel.matches(":popover-open");
+		this.openAtPress = null;
+		if (wasOpen) {
+			if (panel.matches(":popover-open")) panel.hidePopover();
+		} else {
+			this.commit();
+			panel.showPopover({ source: this.field().nativeElement });
+		}
+	}
+	pick(date) {
+		this.setValue(date);
+		this.panel().nativeElement.hidePopover();
+		this.field().nativeElement.focus();
+	}
+	onType(event) {
+		this.text.set(event.target.value);
+		this.parseError.set(false);
+	}
+	onBlur() {
+		this.commit();
+		this.onTouched();
+	}
+	commit() {
+		const text = this.text().trim();
+		if (!text) {
+			this.parseError.set(false);
+			this.setValue(null);
+			return;
+		}
+		const date = vdParseDate(text, this.locale());
+		const calendar = this.calendar();
+		if (!date || calendar.isDisabled(date)) {
+			this.parseError.set(true);
+			return;
+		}
+		this.parseError.set(false);
+		this.setValue(date);
+		this.text.set(vdFormatShort(date, this.locale()));
+	}
+	setValue(date) {
+		if (date === this.value()) return;
+		this.value.set(date);
+		this.onChange(date);
+	}
+	writeValue(value) {
+		this.parseError.set(false);
+		this.value.set(value ?? null);
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(disabled) {
+		this.formDisabled.set(disabled);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdDatePicker,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.1",
+		type: VdDatePicker,
+		isStandalone: true,
+		selector: "vd-date-picker",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			min: {
+				classPropertyName: "min",
+				publicName: "min",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			max: {
+				classPropertyName: "max",
+				publicName: "max",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dateDisabled: {
+				classPropertyName: "dateDisabled",
+				publicName: "dateDisabled",
+				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
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "aria-label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			openLabel: {
+				classPropertyName: "openLabel",
+				publicName: "openLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dialogLabel: {
+				classPropertyName: "dialogLabel",
+				publicName: "dialogLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			previousLabel: {
+				classPropertyName: "previousLabel",
+				publicName: "previousLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			nextLabel: {
+				classPropertyName: "nextLabel",
+				publicName: "nextLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		host: {
+			properties: {
+				"attr.data-invalid": "showInvalid() ? \"\" : null",
+				"attr.aria-label": "null"
+			},
+			classAttribute: "vd-date-picker"
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => VdDatePicker),
+			multi: true
+		}],
+		viewQueries: [
+			{
+				propertyName: "panel",
+				first: true,
+				predicate: ["panel"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "group",
+				first: true,
+				predicate: ["group"],
+				descendants: true,
+				read: ElementRef,
+				isSignal: true
+			},
+			{
+				propertyName: "field",
+				first: true,
+				predicate: ["field"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "calendar",
+				first: true,
+				predicate: VdCalendar,
+				descendants: true,
+				isSignal: true
+			}
+		],
+		ngImport: i0,
+		template: `
+    <vd-input-group class="vd-date-picker__group" #group>
+      <input
+        vdInput
+        #field
+        type="text"
+        inputmode="numeric"
+        autocomplete="off"
+        [value]="text()"
+        [placeholder]="placeholderText()"
+        [disabled]="isDisabled()"
+        [invalid]="showInvalid()"
+        [touched]="touchedState()"
+        [required]="isRequired()"
+        [attr.aria-label]="ariaLabel() ?? null"
+        (input)="onType($event)"
+        (keydown.enter)="commit()"
+        (blur)="onBlur()"
+      />
+      <button
+        vdButton
+        type="button"
+        variant="ghost"
+        size="sm"
+        iconOnly
+        slot="end"
+        aria-haspopup="dialog"
+        [attr.aria-label]="t().openLabel"
+        [attr.aria-expanded]="open()"
+        [disabled]="isDisabled()"
+        (pointerdown)="rememberState()"
+        (click)="toggle()"
+      >
+        <vd-icon name="calendar" />
+      </button>
+    </vd-input-group>
+    <div
+      class="vd-popover vd-date-picker__panel"
+      popover="auto"
+      role="dialog"
+      [attr.aria-label]="t().dialogLabel"
+      #panel
+    >
+      <vd-calendar
+        [value]="value()"
+        [min]="min()"
+        [max]="max()"
+        [dateDisabled]="dateDisabled()"
+        [locale]="locale()"
+        [firstDayOfWeek]="firstDayOfWeek()"
+        [previousLabel]="t().previousLabel"
+        [nextLabel]="t().nextLabel"
+        (valueChange)="pick($event)"
+      />
+    </div>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: VdButton,
+				selector: "button[vdButton], a[vdButton]",
+				inputs: [
+					"variant",
+					"size",
+					"disabled",
+					"loading",
+					"iconOnly",
+					"type"
+				]
+			},
+			{
+				kind: "component",
+				type: VdCalendar,
+				selector: "vd-calendar",
+				inputs: [
+					"value",
+					"selectionMode",
+					"rangeStart",
+					"rangeEnd",
+					"min",
+					"max",
+					"dateDisabled",
+					"locale",
+					"firstDayOfWeek",
+					"previousLabel",
+					"nextLabel"
+				],
+				outputs: ["valueChange", "dateSelected"]
+			},
+			{
+				kind: "component",
+				type: VdIcon,
+				selector: "vd-icon",
+				inputs: ["name", "label"]
+			},
+			{
+				kind: "directive",
+				type: VdInput,
+				selector: "input[vdInput], textarea[vdInput]",
+				inputs: ["size"]
+			},
+			{
+				kind: "component",
+				type: VdInputGroup,
+				selector: "vd-input-group"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdDatePicker,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "vd-date-picker",
+			imports: [
+				VdButton,
+				VdCalendar,
+				VdIcon,
+				VdInput,
+				VdInputGroup
+			],
+			template: `
+    <vd-input-group class="vd-date-picker__group" #group>
+      <input
+        vdInput
+        #field
+        type="text"
+        inputmode="numeric"
+        autocomplete="off"
+        [value]="text()"
+        [placeholder]="placeholderText()"
+        [disabled]="isDisabled()"
+        [invalid]="showInvalid()"
+        [touched]="touchedState()"
+        [required]="isRequired()"
+        [attr.aria-label]="ariaLabel() ?? null"
+        (input)="onType($event)"
+        (keydown.enter)="commit()"
+        (blur)="onBlur()"
+      />
+      <button
+        vdButton
+        type="button"
+        variant="ghost"
+        size="sm"
+        iconOnly
+        slot="end"
+        aria-haspopup="dialog"
+        [attr.aria-label]="t().openLabel"
+        [attr.aria-expanded]="open()"
+        [disabled]="isDisabled()"
+        (pointerdown)="rememberState()"
+        (click)="toggle()"
+      >
+        <vd-icon name="calendar" />
+      </button>
+    </vd-input-group>
+    <div
+      class="vd-popover vd-date-picker__panel"
+      popover="auto"
+      role="dialog"
+      [attr.aria-label]="t().dialogLabel"
+      #panel
+    >
+      <vd-calendar
+        [value]="value()"
+        [min]="min()"
+        [max]="max()"
+        [dateDisabled]="dateDisabled()"
+        [locale]="locale()"
+        [firstDayOfWeek]="firstDayOfWeek()"
+        [previousLabel]="t().previousLabel"
+        [nextLabel]="t().nextLabel"
+        (valueChange)="pick($event)"
+      />
+    </div>
+  `,
+			host: {
+				class: "vd-date-picker",
+				"[attr.data-invalid]": "showInvalid() ? \"\" : null",
+				"[attr.aria-label]": "null"
+			},
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => VdDatePicker),
+				multi: true
+			}],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		min: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "min",
+				required: false
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		dateDisabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dateDisabled",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		firstDayOfWeek: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "firstDayOfWeek",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-label",
+				required: false
+			}]
+		}],
+		openLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "openLabel",
+				required: false
+			}]
+		}],
+		dialogLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dialogLabel",
+				required: false
+			}]
+		}],
+		previousLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "previousLabel",
+				required: false
+			}]
+		}],
+		nextLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nextLabel",
+				required: false
+			}]
+		}],
+		panel: [{
+			type: i0.ViewChild,
+			args: ["panel", { isSignal: true }]
+		}],
+		group: [{
+			type: i0.ViewChild,
+			args: ["group", {
+				read: ElementRef,
+				isSignal: true
+			}]
+		}],
+		field: [{
+			type: i0.ViewChild,
+			args: ["field", { isSignal: true }]
+		}],
+		calendar: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => VdCalendar), { isSignal: true }]
+		}]
+	}
+});
+export { VdCalendar, VdDatePicker, vdAddDays, vdAddMonths, vdCalendarKey, vdClampDate, vdDateOrder, vdFirstDayOfWeek, vdFormatDate, vdFormatShort, vdMonthGrid, vdParseDate, vdParseIso, vdToIso, vdToday, vdWeekdayNames };
+
+//# sourceMappingURL=vadem-ui-calendar.mjs.map