@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

package/fesm2022/lifecorner-angular-ui-kit-datepicker.mjs

@@ -0,0 +1,810 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DOCUMENT, computed, forwardRef, inject, input, linkedSignal, output, signal, viewChild } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import * as i1 from "@angular/cdk/overlay";
+import { OverlayModule } from "@angular/cdk/overlay";
+var DatepickerComponent = class DatepickerComponent {
+	static nextId = 0;
+	inputId = `lc-datepicker-${++DatepickerComponent.nextId}`;
+	datepickerInput = viewChild("datepickerInput", ...ngDevMode ? [{ debugName: "datepickerInput" }] : /* istanbul ignore next */ []);
+	calendarPanel = viewChild("calendarPanel", ...ngDevMode ? [{ debugName: "calendarPanel" }] : /* istanbul ignore next */ []);
+	variant = input("outline", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	error = input(false, ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
+	readonly = input(false, ...ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []);
+	placeholder = input("Select a date", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	helperText = input("", ...ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []);
+	errorMessage = input("", ...ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(void 0, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	format = input("YYYY-MM-DD", ...ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []);
+	minDate = input(void 0, ...ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []);
+	maxDate = input(void 0, ...ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []);
+	disabledDates = input([], ...ngDevMode ? [{ debugName: "disabledDates" }] : /* istanbul ignore next */ []);
+	disableWeekends = input(false, ...ngDevMode ? [{ debugName: "disableWeekends" }] : /* istanbul ignore next */ []);
+	locale = input("", ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	firstDayOfWeek = input(0, ...ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []);
+	clearAriaLabel = input("Clear date", ...ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []);
+	dialogAriaLabel = input("Choose date", ...ngDevMode ? [{ debugName: "dialogAriaLabel" }] : /* istanbul ignore next */ []);
+	previousMonthAriaLabel = input("Previous month", ...ngDevMode ? [{ debugName: "previousMonthAriaLabel" }] : /* istanbul ignore next */ []);
+	nextMonthAriaLabel = input("Next month", ...ngDevMode ? [{ debugName: "nextMonthAriaLabel" }] : /* istanbul ignore next */ []);
+	todayLabel = input("Today", ...ngDevMode ? [{ debugName: "todayLabel" }] : /* istanbul ignore next */ []);
+	selectedAriaLabel = input("selected", ...ngDevMode ? [{ debugName: "selectedAriaLabel" }] : /* istanbul ignore next */ []);
+	dateChange = output();
+	opened = output();
+	closed = output();
+	selectedDate = signal(null, ...ngDevMode ? [{ debugName: "selectedDate" }] : /* istanbul ignore next */ []);
+	isOpen = signal(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+	currentMonth = signal((/* @__PURE__ */ new Date()).getMonth(), ...ngDevMode ? [{ debugName: "currentMonth" }] : /* istanbul ignore next */ []);
+	currentYear = signal((/* @__PURE__ */ new Date()).getFullYear(), ...ngDevMode ? [{ debugName: "currentYear" }] : /* istanbul ignore next */ []);
+	formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	formattedDate = computed(() => {
+		const date = this.selectedDate();
+		if (!date) return "";
+		return this.formatDate(date, this.format());
+	}, ...ngDevMode ? [{ debugName: "formattedDate" }] : /* istanbul ignore next */ []);
+	inputValue = linkedSignal(() => this.formattedDate(), ...ngDevMode ? [{ debugName: "inputValue" }] : /* istanbul ignore next */ []);
+	weekDays = [
+		"Su",
+		"Mo",
+		"Tu",
+		"We",
+		"Th",
+		"Fr",
+		"Sa"
+	];
+	monthNames = [
+		"January",
+		"February",
+		"March",
+		"April",
+		"May",
+		"June",
+		"July",
+		"August",
+		"September",
+		"October",
+		"November",
+		"December"
+	];
+	currentMonthName = computed(() => {
+		const locale = this.locale();
+		return locale ? new Date(this.currentYear(), this.currentMonth(), 1).toLocaleDateString(locale, { month: "long" }) : this.monthNames[this.currentMonth()];
+	}, ...ngDevMode ? [{ debugName: "currentMonthName" }] : /* istanbul ignore next */ []);
+	weekdayLabels = computed(() => {
+		const locale = this.locale();
+		const first = this.gridStart();
+		const names = locale ? Array.from({ length: 7 }, (_, d) => new Date(2023, 0, 1 + d).toLocaleDateString(locale, { weekday: "short" }).replace(/\.$/, "")) : this.weekDays;
+		return Array.from({ length: 7 }, (_, i) => names[(first + i) % 7]);
+	}, ...ngDevMode ? [{ debugName: "weekdayLabels" }] : /* istanbul ignore next */ []);
+	gridStart = computed(() => {
+		const day = Math.trunc(Number(this.firstDayOfWeek()));
+		return Number.isFinite(day) ? (day % 7 + 7) % 7 : 0;
+	}, ...ngDevMode ? [{ debugName: "gridStart" }] : /* istanbul ignore next */ []);
+	describedBy = computed(() => {
+		if (this.error() && this.errorMessage()) return `${this.inputId}-error`;
+		return this.helperText() ? `${this.inputId}-helper` : null;
+	}, ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
+	datepickerClasses = computed(() => {
+		const classes = [
+			"lc-datepicker",
+			`lc-datepicker--${this.variant()}`,
+			`lc-datepicker--${this.size()}`
+		];
+		if (this.isDisabled()) classes.push("lc-datepicker--disabled");
+		if (this.error()) classes.push("lc-datepicker--error");
+		if (this.readonly()) classes.push("lc-datepicker--readonly");
+		if (this.isOpen()) classes.push("lc-datepicker--open");
+		return classes.join(" ");
+	}, ...ngDevMode ? [{ debugName: "datepickerClasses" }] : /* istanbul ignore next */ []);
+	document = inject(DOCUMENT);
+	onChange = () => {};
+	onTouched = () => {};
+	toggle() {
+		if (this.isDisabled() || this.readonly()) return;
+		if (this.isOpen()) this.close();
+		else this.open();
+	}
+	open() {
+		if (this.isDisabled() || this.readonly() || this.isOpen()) return;
+		this.isOpen.set(true);
+		const date = this.selectedDate();
+		if (date) this.showMonthOf(date);
+		this.opened.emit();
+	}
+	close() {
+		if (!this.isOpen()) return;
+		this.restoreFocusFromPanel();
+		this.isOpen.set(false);
+		this.closed.emit();
+	}
+	selectDate(date) {
+		if (this.isDisabled() || this.readonly() || this.isDateDisabled(date)) return;
+		this.commitDate(date);
+		this.close();
+	}
+	clear() {
+		this.selectedDate.set(null);
+		this.inputValue.set("");
+		this.onChange(null);
+		this.dateChange.emit(null);
+	}
+	isDateDisabled(date) {
+		const day = this.startOfDay(date);
+		const min = this.minDate();
+		if (min && day < this.startOfDay(min)) return true;
+		const max = this.maxDate();
+		if (max && day > this.startOfDay(max)) return true;
+		if (this.disabledDates().some((d) => this.isSameDate(d, date))) return true;
+		if (this.disableWeekends()) {
+			const weekday = date.getDay();
+			if (weekday === 0 || weekday === 6) return true;
+		}
+		return false;
+	}
+	isToday(date) {
+		const today = /* @__PURE__ */ new Date();
+		return this.isSameDate(date, today);
+	}
+	dayAriaLabel(date) {
+		const locale = this.locale();
+		const name = locale ? date.toLocaleDateString(locale, {
+			weekday: "long",
+			day: "numeric",
+			month: "long",
+			year: "numeric"
+		}) : date.toDateString();
+		return this.isSelectedDate(date) ? `${name}, ${this.selectedAriaLabel()}` : name;
+	}
+	isSelectedDate(date) {
+		const selected = this.selectedDate();
+		return selected ? this.isSameDate(date, selected) : false;
+	}
+	generateCalendarDays() {
+		const year = this.currentYear();
+		const month = this.currentMonth();
+		const firstDay = new Date(year, month, 1);
+		const lastDay = new Date(year, month + 1, 0);
+		const days = [];
+		const leadingDays = (firstDay.getDay() - this.gridStart() + 7) % 7;
+		for (let i = leadingDays - 1; i >= 0; i--) {
+			const date = new Date(year, month, -i);
+			days.push(date);
+		}
+		for (let i = 1; i <= lastDay.getDate(); i++) days.push(new Date(year, month, i));
+		const remainingDays = 42 - days.length;
+		for (let i = 1; i <= remainingDays; i++) days.push(new Date(year, month + 1, i));
+		return days.slice(0, 42);
+	}
+	nextMonth() {
+		if (this.currentMonth() === 11) {
+			this.currentMonth.set(0);
+			this.currentYear.set(this.currentYear() + 1);
+		} else this.currentMonth.set(this.currentMonth() + 1);
+	}
+	previousMonth() {
+		if (this.currentMonth() === 0) {
+			this.currentMonth.set(11);
+			this.currentYear.set(this.currentYear() - 1);
+		} else this.currentMonth.set(this.currentMonth() - 1);
+	}
+	goToToday() {
+		this.showMonthOf(/* @__PURE__ */ new Date());
+	}
+	onInputChange(value) {
+		this.inputValue.set(value);
+		if (value.trim() === "") {
+			if (this.selectedDate() !== null) this.clear();
+			return;
+		}
+		const date = this.parseDate(value, this.format());
+		if (date && !this.isDateDisabled(date) && !this.isSelectedDate(date)) {
+			this.commitDate(date);
+			this.showMonthOf(date);
+		}
+	}
+	onKeyDown(event) {
+		if (this.isDisabled() || this.readonly()) return;
+		if (!this.isOpen() && (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ")) {
+			this.open();
+			event.preventDefault();
+			return;
+		}
+		if (!this.isOpen()) return;
+		const editing = this.inputValue() !== this.formattedDate();
+		const currentDate = this.selectedDate() || /* @__PURE__ */ new Date();
+		let newDate = null;
+		switch (event.key) {
+			case "Escape":
+				this.close();
+				event.preventDefault();
+				event.stopPropagation();
+				break;
+			case "ArrowRight":
+				if (editing) break;
+				newDate = new Date(currentDate);
+				newDate.setDate(currentDate.getDate() + 1);
+				event.preventDefault();
+				break;
+			case "ArrowLeft":
+				if (editing) break;
+				newDate = new Date(currentDate);
+				newDate.setDate(currentDate.getDate() - 1);
+				event.preventDefault();
+				break;
+			case "ArrowDown":
+				if (editing) break;
+				newDate = new Date(currentDate);
+				newDate.setDate(currentDate.getDate() + 7);
+				event.preventDefault();
+				break;
+			case "ArrowUp":
+				if (editing) break;
+				newDate = new Date(currentDate);
+				newDate.setDate(currentDate.getDate() - 7);
+				event.preventDefault();
+				break;
+			case "Enter": {
+				const selected = this.selectedDate();
+				if (selected) this.selectDate(selected);
+				event.preventDefault();
+				break;
+			}
+		}
+		if (newDate && !this.isDateDisabled(newDate)) {
+			this.selectedDate.set(newDate);
+			this.showMonthOf(newDate);
+		}
+	}
+	onBlur() {
+		this.onTouched();
+		this.inputValue.set(this.formattedDate());
+	}
+	onClickOutside() {
+		this.close();
+	}
+	writeValue(value) {
+		let date = null;
+		if (value instanceof Date) date = isNaN(value.getTime()) ? null : value;
+		else if (typeof value === "string") date = this.parseDate(value, this.format());
+		this.selectedDate.set(date);
+		this.inputValue.set(this.formattedDate());
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.formDisabled.set(isDisabled);
+	}
+	isCurrentMonth(date) {
+		return date.getMonth() === this.currentMonth() && date.getFullYear() === this.currentYear();
+	}
+	commitDate(date) {
+		this.selectedDate.set(date);
+		this.inputValue.set(this.formatDate(date, this.format()));
+		this.onChange(date);
+		this.dateChange.emit(date);
+	}
+	showMonthOf(date) {
+		this.currentMonth.set(date.getMonth());
+		this.currentYear.set(date.getFullYear());
+	}
+	restoreFocusFromPanel() {
+		const panel = this.calendarPanel()?.nativeElement;
+		const active = this.document.activeElement;
+		if (panel && active && panel.contains(active)) this.datepickerInput()?.nativeElement.focus();
+	}
+	startOfDay(date) {
+		return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+	}
+	isSameDate(date1, date2) {
+		return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
+	}
+	formatDate(date, format) {
+		const year = date.getFullYear();
+		const month = String(date.getMonth() + 1).padStart(2, "0");
+		const day = String(date.getDate()).padStart(2, "0");
+		return format.replace("YYYY", String(year)).replace("MM", month).replace("DD", day);
+	}
+	parseDate(value, format) {
+		if (value.length !== format.length) return null;
+		const yearIndex = format.indexOf("YYYY");
+		const monthIndex = format.indexOf("MM");
+		const dayIndex = format.indexOf("DD");
+		if (yearIndex < 0 || monthIndex < 0 || dayIndex < 0) return null;
+		const yearText = value.substring(yearIndex, yearIndex + 4);
+		const monthText = value.substring(monthIndex, monthIndex + 2);
+		const dayText = value.substring(dayIndex, dayIndex + 2);
+		if (!/^\d{4}$/.test(yearText) || !/^\d{2}$/.test(monthText) || !/^\d{2}$/.test(dayText)) return null;
+		const date = new Date(Number(yearText), Number(monthText) - 1, Number(dayText));
+		return this.formatDate(date, format) === value ? date : null;
+	}
+	getInputValue(event) {
+		return event.target.value;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: DatepickerComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: DatepickerComponent,
+		isStandalone: true,
+		selector: "lc-datepicker",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			error: {
+				classPropertyName: "error",
+				publicName: "error",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			readonly: {
+				classPropertyName: "readonly",
+				publicName: "readonly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			helperText: {
+				classPropertyName: "helperText",
+				publicName: "helperText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			errorMessage: {
+				classPropertyName: "errorMessage",
+				publicName: "errorMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			format: {
+				classPropertyName: "format",
+				publicName: "format",
+				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
+			},
+			disableWeekends: {
+				classPropertyName: "disableWeekends",
+				publicName: "disableWeekends",
+				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
+			},
+			clearAriaLabel: {
+				classPropertyName: "clearAriaLabel",
+				publicName: "clearAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dialogAriaLabel: {
+				classPropertyName: "dialogAriaLabel",
+				publicName: "dialogAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			previousMonthAriaLabel: {
+				classPropertyName: "previousMonthAriaLabel",
+				publicName: "previousMonthAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			nextMonthAriaLabel: {
+				classPropertyName: "nextMonthAriaLabel",
+				publicName: "nextMonthAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			todayLabel: {
+				classPropertyName: "todayLabel",
+				publicName: "todayLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectedAriaLabel: {
+				classPropertyName: "selectedAriaLabel",
+				publicName: "selectedAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			dateChange: "dateChange",
+			opened: "opened",
+			closed: "closed"
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => DatepickerComponent),
+			multi: true
+		}],
+		viewQueries: [{
+			propertyName: "datepickerInput",
+			first: true,
+			predicate: ["datepickerInput"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "calendarPanel",
+			first: true,
+			predicate: ["calendarPanel"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div class=\"lc-datepicker-wrapper\">\n  <div class=\"lc-datepicker-input-wrapper\">\n    <input\n      #datepickerInput\n      type=\"text\"\n      [id]=\"inputId\"\n      [class]=\"datepickerClasses()\"\n      role=\"combobox\"\n      aria-haspopup=\"dialog\"\n      autocomplete=\"off\"\n      [attr.aria-expanded]=\"isOpen() ? 'true' : 'false'\"\n      [attr.aria-controls]=\"isOpen() ? inputId + '-calendar' : null\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-required]=\"required() ? 'true' : null\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [readonly]=\"readonly()\"\n      [disabled]=\"isDisabled()\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"inputValue()\"\n      (input)=\"onInputChange(getInputValue($event))\"\n      (click)=\"toggle()\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"onBlur()\"\n    />\n    <div class=\"lc-datepicker-icons\">\n      @if (selectedDate() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-clear\"\n          (click)=\"clear(); $event.stopPropagation()\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n            />\n          </svg>\n        </button>\n      }\n      <svg\n        class=\"lc-datepicker-calendar-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 20 20\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M5.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H6a.75.75 0 01-.75-.75V12zM6 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H6zM7.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H8a.75.75 0 01-.75-.75V12zM8 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H8zM9.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V10zM10 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H10zM9.25 14a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V14zM12 9.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V10a.75.75 0 00-.75-.75H12zM11.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H12a.75.75 0 01-.75-.75V12zM12 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H12zM13.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H14a.75.75 0 01-.75-.75V10zM14 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H14z\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </div>\n  </div>\n\n  <!-- Calendar Panel -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"datepickerInput\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n    (backdropClick)=\"onClickOutside()\"\n    (detach)=\"close()\"\n  >\n    <div\n      #calendarPanel\n      class=\"lc-datepicker-calendar\"\n      [class.lc-datepicker-calendar--open]=\"isOpen()\"\n      [id]=\"inputId + '-calendar'\"\n      role=\"dialog\"\n      [attr.aria-label]=\"dialogAriaLabel()\"\n    >\n      <!-- Calendar Header -->\n      <div class=\"lc-datepicker-header\">\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-nav-button\"\n          (click)=\"previousMonth()\"\n          [attr.aria-label]=\"previousMonthAriaLabel()\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </button>\n        \n        <div class=\"lc-datepicker-month-year\" aria-live=\"polite\">\n          {{ currentMonthName() }} {{ currentYear() }}\n        </div>\n        \n        <button\n          type=\"button\"\n          class=\"lc-datepicker-nav-button\"\n          (click)=\"nextMonth()\"\n          [attr.aria-label]=\"nextMonthAriaLabel()\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </button>\n      </div>\n\n      <!-- Quick Actions -->\n      <div class=\"lc-datepicker-quick-actions\">\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-today-button\"\n          (click)=\"goToToday()\"\n        >\n          {{ todayLabel() }}\n        </button>\n      </div>\n\n      <!-- Weekday Headers -->\n      <div class=\"lc-datepicker-weekdays\" aria-hidden=\"true\">\n        @for (day of weekdayLabels(); track $index) {\n          <div class=\"lc-datepicker-weekday\">{{ day }}</div>\n        }\n      </div>\n\n      <!-- Calendar Days -->\n      <div class=\"lc-datepicker-days\">\n        @for (date of generateCalendarDays(); track date.getTime()) {\n          <button\n            type=\"button\"\n            class=\"lc-datepicker-day\"\n            [class.lc-datepicker-day--other-month]=\"!isCurrentMonth(date)\"\n            [class.lc-datepicker-day--today]=\"isToday(date)\"\n            [class.lc-datepicker-day--selected]=\"isSelectedDate(date)\"\n            [class.lc-datepicker-day--disabled]=\"isDateDisabled(date)\"\n            [disabled]=\"isDateDisabled(date)\"\n            [attr.aria-current]=\"isToday(date) ? 'date' : null\"\n            [attr.aria-label]=\"dayAriaLabel(date)\"\n            (click)=\"selectDate(date)\"\n          >\n            {{ date.getDate() }}\n          </button>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Helper/Error Text -->\n  @if (error() && errorMessage()) {\n    <div class=\"lc-datepicker__error\" [id]=\"inputId + '-error'\" role=\"alert\">\n      {{ errorMessage() }}\n    </div>\n  } @else if (helperText()) {\n    <div class=\"lc-datepicker__helper\" [id]=\"inputId + '-helper'\">\n      {{ helperText() }}\n    </div>\n  }\n</div>\n",
+		styles: [".lc-datepicker-wrapper{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1));width:100%;position:relative}.lc-datepicker-input-wrapper{position:relative;width:100%}.lc-datepicker{width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease);cursor:text}.lc-datepicker::placeholder{color:var(--color-text-secondary)}.lc-datepicker:hover:not(:disabled):not([readonly]){border-color:var(--color-primary-400)}.lc-datepicker:focus{outline:2px solid var(--color-primary-500);outline-offset:0px;border-color:var(--color-primary-500)}.lc-datepicker:disabled{background-color:var(--color-surface-muted);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.lc-datepicker[readonly]{background-color:var(--color-surface-muted);cursor:default}.lc-datepicker.lc-datepicker--error{border-color:var(--color-error-600)}.lc-datepicker.lc-datepicker--error:focus{outline-color:var(--color-error-600);border-color:var(--color-error-600)}.lc-datepicker.lc-datepicker--xs{height:var(--size-interactive-xs-height);padding:var(--size-interactive-xs-padding);padding-right:var(--spacing-10);font-size:var(--size-interactive-xs-font-size)}.lc-datepicker.lc-datepicker--sm{height:var(--size-interactive-sm-height);padding:var(--size-interactive-sm-padding);padding-right:var(--spacing-12);font-size:var(--size-interactive-sm-font-size)}.lc-datepicker.lc-datepicker--md{height:var(--size-interactive-md-height);padding:var(--size-interactive-md-padding);padding-right:var(--spacing-14);font-size:var(--size-interactive-md-font-size)}.lc-datepicker.lc-datepicker--lg{height:var(--size-interactive-lg-height);padding:var(--size-interactive-lg-padding);padding-right:var(--spacing-16);font-size:var(--size-interactive-lg-font-size)}.lc-datepicker.lc-datepicker--filled{background-color:var(--color-surface-sunken);border-color:transparent}.lc-datepicker.lc-datepicker--filled:hover:not(:disabled):not([readonly]){background-color:var(--color-surface-hover);border-color:var(--color-border)}.lc-datepicker.lc-datepicker--filled:focus{background-color:var(--color-surface);border-color:var(--color-primary-500)}.lc-datepicker.lc-datepicker--filled:disabled{background-color:var(--color-surface-muted)}.lc-datepicker-icons{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:var(--spacing-1);pointer-events:none}.lc-datepicker-calendar-icon{width:1.25rem;height:1.25rem;color:var(--color-text-secondary)}.lc-datepicker-clear{pointer-events:auto;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;border-radius:var(--border-radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-clear:hover{color:var(--color-text-primary);background-color:var(--color-surface-hover)}.lc-datepicker-clear:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.lc-datepicker-clear svg{width:1rem;height:1rem}.lc-datepicker-calendar{position:absolute;z-index:1000;margin-top:var(--spacing-1);padding:var(--lc-density-padding-md, var(--spacing-4));background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);box-shadow:var(--elevation-3);min-width:280px;opacity:0;transform:translateY(-8px);transition:all var(--animation-duration-base) var(--animation-timing-ease);pointer-events:none}.lc-datepicker-calendar.lc-datepicker-calendar--open{opacity:1;transform:translateY(0);pointer-events:auto}.lc-datepicker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-4)}.lc-datepicker-month-year{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.lc-datepicker-nav-button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:none;border:none;border-radius:var(--border-radius-md);color:var(--color-text-secondary);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-nav-button:hover{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-datepicker-nav-button:active{background-color:var(--color-surface-sunken)}.lc-datepicker-nav-button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.lc-datepicker-nav-button svg{width:1.25rem;height:1.25rem}.lc-datepicker-quick-actions{display:flex;justify-content:center;margin-bottom:var(--spacing-3)}.lc-datepicker-today-button{padding:var(--spacing-1) var(--spacing-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-primary-600);background:none;border:1px solid var(--color-primary-200);border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-today-button:hover{background-color:var(--color-primary-50);border-color:var(--color-primary-300)}.lc-datepicker-today-button:active{background-color:var(--color-primary-100)}.lc-datepicker-today-button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.lc-datepicker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--spacing-1);margin-bottom:var(--spacing-2)}.lc-datepicker-weekday{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);text-align:center;padding:var(--spacing-1)}.lc-datepicker-days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--spacing-1)}.lc-datepicker-day{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);color:var(--color-text-primary);background:none;border:none;border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-day:hover:not(:disabled){background-color:var(--color-surface-hover)}.lc-datepicker-day.lc-datepicker-day--other-month{color:var(--color-text-tertiary)}.lc-datepicker-day.lc-datepicker-day--today{font-weight:var(--font-weight-semibold);color:var(--color-primary-600);background-color:var(--color-primary-50)}.lc-datepicker-day.lc-datepicker-day--selected{font-weight:var(--font-weight-semibold);color:var(--color-on-primary);background-color:var(--color-primary-fill)}.lc-datepicker-day.lc-datepicker-day--selected:hover{background-color:var(--color-primary-fill-hover)}.lc-datepicker-day.lc-datepicker-day--disabled{color:var(--color-text-disabled);cursor:not-allowed;opacity:.5}.lc-datepicker-day.lc-datepicker-day--disabled:hover{background:none}.lc-datepicker-day:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-datepicker__error{font-size:var(--font-size-xs);color:var(--color-error-600);margin-top:var(--spacing-1)}.lc-datepicker__helper{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-top:var(--spacing-1)}\n"],
+		dependencies: [{
+			kind: "ngmodule",
+			type: OverlayModule
+		}, {
+			kind: "directive",
+			type: i1.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"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: DatepickerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-datepicker",
+			standalone: true,
+			imports: [OverlayModule],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => DatepickerComponent),
+				multi: true
+			}],
+			template: "<div class=\"lc-datepicker-wrapper\">\n  <div class=\"lc-datepicker-input-wrapper\">\n    <input\n      #datepickerInput\n      type=\"text\"\n      [id]=\"inputId\"\n      [class]=\"datepickerClasses()\"\n      role=\"combobox\"\n      aria-haspopup=\"dialog\"\n      autocomplete=\"off\"\n      [attr.aria-expanded]=\"isOpen() ? 'true' : 'false'\"\n      [attr.aria-controls]=\"isOpen() ? inputId + '-calendar' : null\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-required]=\"required() ? 'true' : null\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [readonly]=\"readonly()\"\n      [disabled]=\"isDisabled()\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"inputValue()\"\n      (input)=\"onInputChange(getInputValue($event))\"\n      (click)=\"toggle()\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"onBlur()\"\n    />\n    <div class=\"lc-datepicker-icons\">\n      @if (selectedDate() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-clear\"\n          (click)=\"clear(); $event.stopPropagation()\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n            />\n          </svg>\n        </button>\n      }\n      <svg\n        class=\"lc-datepicker-calendar-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 20 20\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M5.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H6a.75.75 0 01-.75-.75V12zM6 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H6zM7.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H8a.75.75 0 01-.75-.75V12zM8 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H8zM9.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V10zM10 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H10zM9.25 14a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V14zM12 9.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V10a.75.75 0 00-.75-.75H12zM11.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H12a.75.75 0 01-.75-.75V12zM12 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H12zM13.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H14a.75.75 0 01-.75-.75V10zM14 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H14z\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </div>\n  </div>\n\n  <!-- Calendar Panel -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"datepickerInput\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n    (backdropClick)=\"onClickOutside()\"\n    (detach)=\"close()\"\n  >\n    <div\n      #calendarPanel\n      class=\"lc-datepicker-calendar\"\n      [class.lc-datepicker-calendar--open]=\"isOpen()\"\n      [id]=\"inputId + '-calendar'\"\n      role=\"dialog\"\n      [attr.aria-label]=\"dialogAriaLabel()\"\n    >\n      <!-- Calendar Header -->\n      <div class=\"lc-datepicker-header\">\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-nav-button\"\n          (click)=\"previousMonth()\"\n          [attr.aria-label]=\"previousMonthAriaLabel()\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </button>\n        \n        <div class=\"lc-datepicker-month-year\" aria-live=\"polite\">\n          {{ currentMonthName() }} {{ currentYear() }}\n        </div>\n        \n        <button\n          type=\"button\"\n          class=\"lc-datepicker-nav-button\"\n          (click)=\"nextMonth()\"\n          [attr.aria-label]=\"nextMonthAriaLabel()\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </button>\n      </div>\n\n      <!-- Quick Actions -->\n      <div class=\"lc-datepicker-quick-actions\">\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-today-button\"\n          (click)=\"goToToday()\"\n        >\n          {{ todayLabel() }}\n        </button>\n      </div>\n\n      <!-- Weekday Headers -->\n      <div class=\"lc-datepicker-weekdays\" aria-hidden=\"true\">\n        @for (day of weekdayLabels(); track $index) {\n          <div class=\"lc-datepicker-weekday\">{{ day }}</div>\n        }\n      </div>\n\n      <!-- Calendar Days -->\n      <div class=\"lc-datepicker-days\">\n        @for (date of generateCalendarDays(); track date.getTime()) {\n          <button\n            type=\"button\"\n            class=\"lc-datepicker-day\"\n            [class.lc-datepicker-day--other-month]=\"!isCurrentMonth(date)\"\n            [class.lc-datepicker-day--today]=\"isToday(date)\"\n            [class.lc-datepicker-day--selected]=\"isSelectedDate(date)\"\n            [class.lc-datepicker-day--disabled]=\"isDateDisabled(date)\"\n            [disabled]=\"isDateDisabled(date)\"\n            [attr.aria-current]=\"isToday(date) ? 'date' : null\"\n            [attr.aria-label]=\"dayAriaLabel(date)\"\n            (click)=\"selectDate(date)\"\n          >\n            {{ date.getDate() }}\n          </button>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Helper/Error Text -->\n  @if (error() && errorMessage()) {\n    <div class=\"lc-datepicker__error\" [id]=\"inputId + '-error'\" role=\"alert\">\n      {{ errorMessage() }}\n    </div>\n  } @else if (helperText()) {\n    <div class=\"lc-datepicker__helper\" [id]=\"inputId + '-helper'\">\n      {{ helperText() }}\n    </div>\n  }\n</div>\n",
+			styles: [".lc-datepicker-wrapper{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1));width:100%;position:relative}.lc-datepicker-input-wrapper{position:relative;width:100%}.lc-datepicker{width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease);cursor:text}.lc-datepicker::placeholder{color:var(--color-text-secondary)}.lc-datepicker:hover:not(:disabled):not([readonly]){border-color:var(--color-primary-400)}.lc-datepicker:focus{outline:2px solid var(--color-primary-500);outline-offset:0px;border-color:var(--color-primary-500)}.lc-datepicker:disabled{background-color:var(--color-surface-muted);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.lc-datepicker[readonly]{background-color:var(--color-surface-muted);cursor:default}.lc-datepicker.lc-datepicker--error{border-color:var(--color-error-600)}.lc-datepicker.lc-datepicker--error:focus{outline-color:var(--color-error-600);border-color:var(--color-error-600)}.lc-datepicker.lc-datepicker--xs{height:var(--size-interactive-xs-height);padding:var(--size-interactive-xs-padding);padding-right:var(--spacing-10);font-size:var(--size-interactive-xs-font-size)}.lc-datepicker.lc-datepicker--sm{height:var(--size-interactive-sm-height);padding:var(--size-interactive-sm-padding);padding-right:var(--spacing-12);font-size:var(--size-interactive-sm-font-size)}.lc-datepicker.lc-datepicker--md{height:var(--size-interactive-md-height);padding:var(--size-interactive-md-padding);padding-right:var(--spacing-14);font-size:var(--size-interactive-md-font-size)}.lc-datepicker.lc-datepicker--lg{height:var(--size-interactive-lg-height);padding:var(--size-interactive-lg-padding);padding-right:var(--spacing-16);font-size:var(--size-interactive-lg-font-size)}.lc-datepicker.lc-datepicker--filled{background-color:var(--color-surface-sunken);border-color:transparent}.lc-datepicker.lc-datepicker--filled:hover:not(:disabled):not([readonly]){background-color:var(--color-surface-hover);border-color:var(--color-border)}.lc-datepicker.lc-datepicker--filled:focus{background-color:var(--color-surface);border-color:var(--color-primary-500)}.lc-datepicker.lc-datepicker--filled:disabled{background-color:var(--color-surface-muted)}.lc-datepicker-icons{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:var(--spacing-1);pointer-events:none}.lc-datepicker-calendar-icon{width:1.25rem;height:1.25rem;color:var(--color-text-secondary)}.lc-datepicker-clear{pointer-events:auto;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;border-radius:var(--border-radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-clear:hover{color:var(--color-text-primary);background-color:var(--color-surface-hover)}.lc-datepicker-clear:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.lc-datepicker-clear svg{width:1rem;height:1rem}.lc-datepicker-calendar{position:absolute;z-index:1000;margin-top:var(--spacing-1);padding:var(--lc-density-padding-md, var(--spacing-4));background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);box-shadow:var(--elevation-3);min-width:280px;opacity:0;transform:translateY(-8px);transition:all var(--animation-duration-base) var(--animation-timing-ease);pointer-events:none}.lc-datepicker-calendar.lc-datepicker-calendar--open{opacity:1;transform:translateY(0);pointer-events:auto}.lc-datepicker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-4)}.lc-datepicker-month-year{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.lc-datepicker-nav-button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:none;border:none;border-radius:var(--border-radius-md);color:var(--color-text-secondary);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-nav-button:hover{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-datepicker-nav-button:active{background-color:var(--color-surface-sunken)}.lc-datepicker-nav-button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.lc-datepicker-nav-button svg{width:1.25rem;height:1.25rem}.lc-datepicker-quick-actions{display:flex;justify-content:center;margin-bottom:var(--spacing-3)}.lc-datepicker-today-button{padding:var(--spacing-1) var(--spacing-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-primary-600);background:none;border:1px solid var(--color-primary-200);border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-today-button:hover{background-color:var(--color-primary-50);border-color:var(--color-primary-300)}.lc-datepicker-today-button:active{background-color:var(--color-primary-100)}.lc-datepicker-today-button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.lc-datepicker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--spacing-1);margin-bottom:var(--spacing-2)}.lc-datepicker-weekday{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);text-align:center;padding:var(--spacing-1)}.lc-datepicker-days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--spacing-1)}.lc-datepicker-day{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);color:var(--color-text-primary);background:none;border:none;border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-day:hover:not(:disabled){background-color:var(--color-surface-hover)}.lc-datepicker-day.lc-datepicker-day--other-month{color:var(--color-text-tertiary)}.lc-datepicker-day.lc-datepicker-day--today{font-weight:var(--font-weight-semibold);color:var(--color-primary-600);background-color:var(--color-primary-50)}.lc-datepicker-day.lc-datepicker-day--selected{font-weight:var(--font-weight-semibold);color:var(--color-on-primary);background-color:var(--color-primary-fill)}.lc-datepicker-day.lc-datepicker-day--selected:hover{background-color:var(--color-primary-fill-hover)}.lc-datepicker-day.lc-datepicker-day--disabled{color:var(--color-text-disabled);cursor:not-allowed;opacity:.5}.lc-datepicker-day.lc-datepicker-day--disabled:hover{background:none}.lc-datepicker-day:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-datepicker__error{font-size:var(--font-size-xs);color:var(--color-error-600);margin-top:var(--spacing-1)}.lc-datepicker__helper{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-top:var(--spacing-1)}\n"]
+		}]
+	}],
+	propDecorators: {
+		datepickerInput: [{
+			type: i0.ViewChild,
+			args: ["datepickerInput", { isSignal: true }]
+		}],
+		calendarPanel: [{
+			type: i0.ViewChild,
+			args: ["calendarPanel", { isSignal: true }]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		error: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "error",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		helperText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "helperText",
+				required: false
+			}]
+		}],
+		errorMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errorMessage",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		format: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "format",
+				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
+			}]
+		}],
+		disableWeekends: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disableWeekends",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		firstDayOfWeek: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "firstDayOfWeek",
+				required: false
+			}]
+		}],
+		clearAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clearAriaLabel",
+				required: false
+			}]
+		}],
+		dialogAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dialogAriaLabel",
+				required: false
+			}]
+		}],
+		previousMonthAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "previousMonthAriaLabel",
+				required: false
+			}]
+		}],
+		nextMonthAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nextMonthAriaLabel",
+				required: false
+			}]
+		}],
+		todayLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "todayLabel",
+				required: false
+			}]
+		}],
+		selectedAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectedAriaLabel",
+				required: false
+			}]
+		}],
+		dateChange: [{
+			type: i0.Output,
+			args: ["dateChange"]
+		}],
+		opened: [{
+			type: i0.Output,
+			args: ["opened"]
+		}],
+		closed: [{
+			type: i0.Output,
+			args: ["closed"]
+		}]
+	}
+});
+export { DatepickerComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-datepicker.mjs.map