@loomui-ng/ui 0.0.0-stage → 0.1.1

package/fesm2022/loomui-ng-ui-calendar.mjs

@@ -0,0 +1,681 @@
+import { Directionality } from "@angular/cdk/bidi";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, booleanAttribute, computed, forwardRef, inject, input, model, numberAttribute, signal } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import * as i1 from "@loomui-ng/ui/utils";
+import { UiElementHost, cn } from "@loomui-ng/ui/utils";
+import { UiIconSvg } from "@loomui-ng/ui/icon";
+const calendarCalendarClass = "w-fit group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent rtl:**:[.rdp-button\\_next>svg]:rotate-180 rtl:**:[.rdp-button\\_previous>svg]:rotate-180";
+const calendarMonthsClass = "relative flex flex-col gap-4 md:flex-row";
+const calendarNavClass = "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1";
+const calendarNavButtonClass = "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 gap-1.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 size-(--cell-size) p-0 select-none aria-disabled:opacity-50";
+const calendarMonthClass = "flex w-full flex-col gap-4";
+const calendarCaptionClass = "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)";
+const calendarCaptionLabelClass = "font-medium select-none text-sm";
+const calendarGridClass = "w-full border-collapse";
+const calendarWeekdaysClass = "flex";
+const calendarWeekdayClass = "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none";
+const calendarWeekClass = "mt-2 flex w-full";
+const calendarDayCellClass = {
+	"outside": "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius) [&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) text-muted-foreground aria-selected:text-muted-foreground",
+	"base": "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius) [&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius)",
+	"selected+today": "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius) [&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
+	"selected": "group/day relative aspect-square h-full w-full p-0 text-center select-none [&:first-child[data-selected=true]_button]:rounded-s-md [&:last-child[data-selected=true]_button]:rounded-e-md",
+	"today": "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius) [&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
+	"disabled": "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius) [&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) text-muted-foreground opacity-50 [&>button]:line-through opacity-100",
+	"hidden+outside": "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius) [&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) invisible text-muted-foreground aria-selected:text-muted-foreground"
+};
+const calendarDayButtonClass = "group/button shrink-0 items-center justify-center rounded-lg border-transparent bg-clip-padding text-sm whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-e-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-s-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70";
+const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+const addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+const addMonths = (d, n) => {
+	const t = new Date(d.getFullYear(), d.getMonth() + n, 1);
+	const last = new Date(t.getFullYear(), t.getMonth() + 1, 0).getDate();
+	return new Date(t.getFullYear(), t.getMonth(), Math.min(d.getDate(), last));
+};
+const sameDay = (a, b) => !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+const iso = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+var UiCalendar = class UiCalendar {
+	mode = input("single", ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
+	selected = model(void 0, ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	month = model(startOfDay(/* @__PURE__ */ new Date()), ...ngDevMode ? [{ debugName: "month" }] : /* istanbul ignore next */ []);
+	numberOfMonths = input(1, {
+		...ngDevMode ? { debugName: "numberOfMonths" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	showOutsideDays = input(true, {
+		...ngDevMode ? { debugName: "showOutsideDays" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	weekStartsOn = input(0, {
+		...ngDevMode ? { debugName: "weekStartsOn" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	locale = input(typeof document !== "undefined" ? document.documentElement.lang || "en-US" : "en-US", ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	minDate = input(void 0, ...ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []);
+	maxDate = input(void 0, ...ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []);
+	disabled = input(void 0, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	dir = inject(Directionality);
+	el = inject(ElementRef).nativeElement;
+	focused = signal(null, ...ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []);
+	onChange = () => {};
+	onTouched = () => {};
+	classes = computed(() => cn(calendarCalendarClass, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	monthsClass = calendarMonthsClass;
+	navClass = calendarNavClass;
+	navButtonClass = calendarNavButtonClass;
+	monthClass = calendarMonthClass;
+	captionClass = calendarCaptionClass;
+	captionLabelClass = calendarCaptionLabelClass;
+	gridClass = calendarGridClass;
+	weekdaysClass = calendarWeekdaysClass;
+	weekdayClass = calendarWeekdayClass;
+	weekClass = calendarWeekClass;
+	dayButtonClass = calendarDayButtonClass;
+	monthFmt = computed(() => new Intl.DateTimeFormat(this.locale(), {
+		month: "long",
+		year: "numeric"
+	}), ...ngDevMode ? [{ debugName: "monthFmt" }] : /* istanbul ignore next */ []);
+	dayFmt = computed(() => new Intl.DateTimeFormat(this.locale(), { dateStyle: "full" }), ...ngDevMode ? [{ debugName: "dayFmt" }] : /* istanbul ignore next */ []);
+	weekdays = computed(() => {
+		const start = this.weekStartsOn();
+		const short = new Intl.DateTimeFormat(this.locale(), { weekday: "short" });
+		const long = new Intl.DateTimeFormat(this.locale(), { weekday: "long" });
+		const base = new Date(2023, 0, 1);
+		return Array.from({ length: 7 }, (_, i) => {
+			const d = addDays(base, (start + i) % 7);
+			const s = short.format(d);
+			return {
+				short: this.locale().startsWith("en") ? s.slice(0, 2) : s,
+				long: long.format(d)
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []);
+	isDisabled(d) {
+		const dis = this.disabled();
+		if (this.minDate() && startOfDay(d) < startOfDay(this.minDate())) return true;
+		if (this.maxDate() && startOfDay(d) > startOfDay(this.maxDate())) return true;
+		if (Array.isArray(dis)) return dis.some((x) => sameDay(x, d));
+		return !!dis?.(d);
+	}
+	isSelected(d) {
+		const s = this.selected();
+		if (!s) return false;
+		if (s instanceof Date) return sameDay(s, d);
+		if (Array.isArray(s)) return s.some((x) => sameDay(x, d));
+		const r = s;
+		if (r.from && r.to) return startOfDay(d) >= startOfDay(r.from) && startOfDay(d) <= startOfDay(r.to);
+		return sameDay(r.from, d);
+	}
+	months = computed(() => {
+		const out = [];
+		const first = this.month();
+		const today = startOfDay(/* @__PURE__ */ new Date());
+		const r = this.mode() === "range" ? this.selected() ?? {} : null;
+		for (let i = 0; i < this.numberOfMonths(); i++) {
+			const base = new Date(first.getFullYear(), first.getMonth() + i, 1);
+			const lead = (base.getDay() - this.weekStartsOn() + 7) % 7;
+			const daysInMonth = new Date(base.getFullYear(), base.getMonth() + 1, 0).getDate();
+			const total = Math.ceil((lead + daysInMonth) / 7) * 7;
+			const cells = [];
+			for (let n = 0; n < total; n++) {
+				const date = addDays(base, n - lead);
+				const outside = date.getMonth() !== base.getMonth();
+				const selected = this.isSelected(date);
+				const rangeStart = !!r?.from && sameDay(r.from, date);
+				const rangeEnd = !!r?.to && sameDay(r.to, date);
+				cells.push({
+					date,
+					key: iso(date),
+					outside,
+					today: sameDay(date, today),
+					disabled: this.isDisabled(date),
+					selected,
+					rangeStart,
+					rangeEnd,
+					rangeMiddle: !!r && selected && !rangeStart && !rangeEnd,
+					month: iso(base).slice(0, 7)
+				});
+			}
+			const weeks = [];
+			for (let w = 0; w < cells.length; w += 7) weeks.push(cells.slice(w, w + 7));
+			out.push({
+				key: iso(base).slice(0, 7),
+				label: this.monthFmt().format(base),
+				weeks
+			});
+		}
+		return out;
+	}, ...ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []);
+	tabKey = computed(() => {
+		const f = this.focused();
+		const all = this.months().flatMap((m) => m.weeks.flat()).filter((d) => !d.outside && !d.disabled);
+		if (f && all.some((d) => d.key === f)) return f;
+		return (all.find((d) => d.selected) ?? all.find((d) => d.today) ?? all[0])?.key ?? null;
+	}, ...ngDevMode ? [{ debugName: "tabKey" }] : /* istanbul ignore next */ []);
+	prevDisabled = computed(() => {
+		const m = this.minDate();
+		return !!m && new Date(this.month().getFullYear(), this.month().getMonth(), 0) < startOfDay(m);
+	}, ...ngDevMode ? [{ debugName: "prevDisabled" }] : /* istanbul ignore next */ []);
+	nextDisabled = computed(() => {
+		const m = this.maxDate();
+		return !!m && new Date(this.month().getFullYear(), this.month().getMonth() + this.numberOfMonths(), 1) > startOfDay(m);
+	}, ...ngDevMode ? [{ debugName: "nextDisabled" }] : /* istanbul ignore next */ []);
+	dayLabel(d) {
+		return this.dayFmt().format(d);
+	}
+	cellClass(d) {
+		const map = calendarDayCellClass;
+		if (d.outside && !this.showOutsideDays()) return map["hidden+outside"] ?? map["base"];
+		if (d.outside) return map["outside"] ?? map["base"];
+		if (d.disabled) return map["disabled"] ?? map["base"];
+		if (d.selected && d.today) return map["selected+today"] ?? map["selected"] ?? map["base"];
+		if (d.selected && this.mode() === "range") return map["selected"] ?? map["base"];
+		if (d.today) return map["today"] ?? map["base"];
+		return map["base"];
+	}
+	go(delta) {
+		this.month.set(addMonths(this.month(), delta));
+	}
+	pick(d) {
+		if (d.disabled) return;
+		const cur = this.selected();
+		let next;
+		switch (this.mode()) {
+			case "single":
+				next = sameDay(cur, d.date) && !this.required() ? void 0 : d.date;
+				break;
+			case "multiple": {
+				const list = Array.isArray(cur) ? cur : [];
+				next = list.some((x) => sameDay(x, d.date)) ? list.filter((x) => !sameDay(x, d.date)) : [...list, d.date];
+				break;
+			}
+			case "range": {
+				const r = cur ?? {};
+				if (!r.from || r.from && r.to) next = {
+					from: d.date,
+					to: void 0
+				};
+				else next = d.date < r.from ? {
+					from: d.date,
+					to: r.from
+				} : {
+					from: r.from,
+					to: d.date
+				};
+				break;
+			}
+		}
+		this.selected.set(next);
+		this.onChange(next);
+		if (d.outside) this.month.set(new Date(d.date.getFullYear(), d.date.getMonth(), 1));
+	}
+	onKeydown(e, d) {
+		const rtl = this.dir.value === "rtl";
+		let target = null;
+		switch (e.key) {
+			case "ArrowLeft":
+				target = addDays(d.date, rtl ? 1 : -1);
+				break;
+			case "ArrowRight":
+				target = addDays(d.date, rtl ? -1 : 1);
+				break;
+			case "ArrowUp":
+				target = addDays(d.date, -7);
+				break;
+			case "ArrowDown":
+				target = addDays(d.date, 7);
+				break;
+			case "PageUp":
+				target = addMonths(d.date, e.shiftKey ? -12 : -1);
+				break;
+			case "PageDown":
+				target = addMonths(d.date, e.shiftKey ? 12 : 1);
+				break;
+			case "Home":
+				target = addDays(d.date, -((d.date.getDay() - this.weekStartsOn() + 7) % 7));
+				break;
+			case "End":
+				target = addDays(d.date, 6 - (d.date.getDay() - this.weekStartsOn() + 7) % 7);
+				break;
+			default: return;
+		}
+		e.preventDefault();
+		this.focusDate(target);
+	}
+	focusDate(date) {
+		const first = this.month();
+		const last = new Date(first.getFullYear(), first.getMonth() + this.numberOfMonths(), 0);
+		if (date < new Date(first.getFullYear(), first.getMonth(), 1) || date > last) this.month.set(new Date(date.getFullYear(), date.getMonth(), 1));
+		this.focused.set(iso(date));
+		setTimeout(() => {
+			this.el.querySelector(`td[data-day="${iso(date)}"]:not([data-outside="true"]) button`)?.focus();
+		}, 0);
+	}
+	writeValue(v) {
+		this.selected.set(v ?? void 0);
+		const first = v instanceof Date ? v : Array.isArray(v) ? v[0] : v?.from;
+		if (first) this.month.set(new Date(first.getFullYear(), first.getMonth(), 1));
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiCalendar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: UiCalendar,
+		isStandalone: true,
+		selector: "div[uiCalendar], ui-calendar",
+		inputs: {
+			mode: {
+				classPropertyName: "mode",
+				publicName: "mode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selected: {
+				classPropertyName: "selected",
+				publicName: "selected",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			month: {
+				classPropertyName: "month",
+				publicName: "month",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			numberOfMonths: {
+				classPropertyName: "numberOfMonths",
+				publicName: "numberOfMonths",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showOutsideDays: {
+				classPropertyName: "showOutsideDays",
+				publicName: "showOutsideDays",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			weekStartsOn: {
+				classPropertyName: "weekStartsOn",
+				publicName: "weekStartsOn",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				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
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			selected: "selectedChange",
+			month: "monthChange"
+		},
+		host: {
+			attributes: { "data-slot": "calendar" },
+			properties: {
+				"attr.data-mode": "mode()",
+				"attr.data-multiple-months": "numberOfMonths() > 1 ? \"true\" : null",
+				"attr.dir": "dir.value",
+				"attr.class": "classes()"
+			}
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => UiCalendar),
+			multi: true
+		}],
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0,
+		template: `
+    <div [class]="monthsClass">
+      <nav aria-label="" [class]="navClass">
+        <button type="button" [class]="navButtonClass" aria-label="Go to the Previous Month" [disabled]="prevDisabled()" (click)="go(-1)">
+          <svg uiIcon="chevron-left" class="size-4 rtl:rotate-180"></svg>
+        </button>
+        <button type="button" [class]="navButtonClass" aria-label="Go to the Next Month" [disabled]="nextDisabled()" (click)="go(1)">
+          <svg uiIcon="chevron-right" class="size-4 rtl:rotate-180"></svg>
+        </button>
+      </nav>
+      @for (m of months(); track m.key) {
+        <div [class]="monthClass">
+          <div [class]="captionClass"><span role="status" aria-live="polite" [class]="captionLabelClass">{{ m.label }}</span></div>
+          <table role="grid" [attr.aria-multiselectable]="mode() !== 'single'" [attr.aria-label]="m.label" [class]="gridClass">
+            <thead aria-hidden="true">
+              <tr [class]="weekdaysClass">
+                @for (w of weekdays(); track w.long) {
+                  <th [attr.aria-label]="w.long" [class]="weekdayClass">{{ w.short }}</th>
+                }
+              </tr>
+            </thead>
+            <tbody>
+              @for (week of m.weeks; track $index) {
+                <tr [class]="weekClass">
+                  @for (d of week; track d.key) {
+                    <td
+                      role="gridcell"
+                      [attr.aria-selected]="d.selected || null"
+                      [attr.data-day]="d.key"
+                      [attr.data-month]="m.key"
+                      [attr.data-today]="d.today || null"
+                      [attr.data-outside]="d.outside || null"
+                      [attr.data-selected]="d.selected || null"
+                      [attr.data-disabled]="d.disabled || null"
+                      [attr.data-hidden]="d.outside && !showOutsideDays() || null"
+                      [class]="cellClass(d)"
+                    >
+                      @if (!(d.outside && !showOutsideDays())) {
+                        <button
+                          type="button"
+                          data-slot="button"
+                          data-variant="ghost"
+                          data-size="icon"
+                          [attr.data-day]="d.date.toLocaleDateString()"
+                          [attr.data-selected-single]="mode() === 'single' && d.selected && !d.rangeStart && !d.rangeEnd && !d.rangeMiddle"
+                          [attr.data-range-start]="d.rangeStart"
+                          [attr.data-range-middle]="d.rangeMiddle"
+                          [attr.data-range-end]="d.rangeEnd"
+                          [attr.aria-label]="dayLabel(d.date)"
+                          [disabled]="d.disabled"
+                          [attr.tabindex]="d.key === tabKey() ? 0 : -1"
+                          [class]="dayButtonClass"
+                          (click)="pick(d)"
+                          (focus)="focused.set(d.key)"
+                          (keydown)="onKeydown($event, d)"
+                        >{{ d.date.getDate() }}</button>
+                      }
+                    </td>
+                  }
+                </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+      }
+    </div>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: UiIconSvg,
+			selector: "svg[uiIcon]",
+			inputs: [
+				"uiIcon",
+				"icon",
+				"size",
+				"strokeWidth",
+				"absoluteStrokeWidth",
+				"color",
+				"label",
+				"class"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiCalendar,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "div[uiCalendar], ui-calendar",
+			hostDirectives: [UiElementHost],
+			imports: [UiIconSvg],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => UiCalendar),
+				multi: true
+			}],
+			host: {
+				"data-slot": "calendar",
+				"[attr.data-mode]": "mode()",
+				"[attr.data-multiple-months]": "numberOfMonths() > 1 ? \"true\" : null",
+				"[attr.dir]": "dir.value",
+				"[attr.class]": "classes()"
+			},
+			template: `
+    <div [class]="monthsClass">
+      <nav aria-label="" [class]="navClass">
+        <button type="button" [class]="navButtonClass" aria-label="Go to the Previous Month" [disabled]="prevDisabled()" (click)="go(-1)">
+          <svg uiIcon="chevron-left" class="size-4 rtl:rotate-180"></svg>
+        </button>
+        <button type="button" [class]="navButtonClass" aria-label="Go to the Next Month" [disabled]="nextDisabled()" (click)="go(1)">
+          <svg uiIcon="chevron-right" class="size-4 rtl:rotate-180"></svg>
+        </button>
+      </nav>
+      @for (m of months(); track m.key) {
+        <div [class]="monthClass">
+          <div [class]="captionClass"><span role="status" aria-live="polite" [class]="captionLabelClass">{{ m.label }}</span></div>
+          <table role="grid" [attr.aria-multiselectable]="mode() !== 'single'" [attr.aria-label]="m.label" [class]="gridClass">
+            <thead aria-hidden="true">
+              <tr [class]="weekdaysClass">
+                @for (w of weekdays(); track w.long) {
+                  <th [attr.aria-label]="w.long" [class]="weekdayClass">{{ w.short }}</th>
+                }
+              </tr>
+            </thead>
+            <tbody>
+              @for (week of m.weeks; track $index) {
+                <tr [class]="weekClass">
+                  @for (d of week; track d.key) {
+                    <td
+                      role="gridcell"
+                      [attr.aria-selected]="d.selected || null"
+                      [attr.data-day]="d.key"
+                      [attr.data-month]="m.key"
+                      [attr.data-today]="d.today || null"
+                      [attr.data-outside]="d.outside || null"
+                      [attr.data-selected]="d.selected || null"
+                      [attr.data-disabled]="d.disabled || null"
+                      [attr.data-hidden]="d.outside && !showOutsideDays() || null"
+                      [class]="cellClass(d)"
+                    >
+                      @if (!(d.outside && !showOutsideDays())) {
+                        <button
+                          type="button"
+                          data-slot="button"
+                          data-variant="ghost"
+                          data-size="icon"
+                          [attr.data-day]="d.date.toLocaleDateString()"
+                          [attr.data-selected-single]="mode() === 'single' && d.selected && !d.rangeStart && !d.rangeEnd && !d.rangeMiddle"
+                          [attr.data-range-start]="d.rangeStart"
+                          [attr.data-range-middle]="d.rangeMiddle"
+                          [attr.data-range-end]="d.rangeEnd"
+                          [attr.aria-label]="dayLabel(d.date)"
+                          [disabled]="d.disabled"
+                          [attr.tabindex]="d.key === tabKey() ? 0 : -1"
+                          [class]="dayButtonClass"
+                          (click)="pick(d)"
+                          (focus)="focused.set(d.key)"
+                          (keydown)="onKeydown($event, d)"
+                        >{{ d.date.getDate() }}</button>
+                      }
+                    </td>
+                  }
+                </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+      }
+    </div>
+  `
+		}]
+	}],
+	propDecorators: {
+		mode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mode",
+				required: false
+			}]
+		}],
+		selected: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selected",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["selectedChange"]
+		}],
+		month: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "month",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["monthChange"]
+		}],
+		numberOfMonths: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "numberOfMonths",
+				required: false
+			}]
+		}],
+		showOutsideDays: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showOutsideDays",
+				required: false
+			}]
+		}],
+		weekStartsOn: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "weekStartsOn",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		minDate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minDate",
+				required: false
+			}]
+		}],
+		maxDate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxDate",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+const UI_CALENDAR = [UiCalendar];
+export { UI_CALENDAR, UiCalendar, calendarCalendarClass, calendarCaptionClass, calendarCaptionLabelClass, calendarDayButtonClass, calendarDayCellClass, calendarGridClass, calendarMonthClass, calendarMonthsClass, calendarNavButtonClass, calendarNavClass, calendarWeekClass, calendarWeekdayClass, calendarWeekdaysClass };
+
+//# sourceMappingURL=loomui-ng-ui-calendar.mjs.map