@ojiepermana/angular 22.1.11 → 22.1.12

package/fesm2022/ojiepermana-angular-component-calendar.mjs

@@ -1,7 +1,722 @@
-export * from '@ojiepermana/angular-component/calendar';
+import * as i0 from '@angular/core';
+import { inject, Injector, viewChild, model, input, booleanAttribute, signal, linkedSignal, computed, afterNextRender, forwardRef, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { cn } from '@ojiepermana/angular/component/utils/core';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+function cloneDate(date) {
+    return new Date(date.getTime());
+}
+function sameDay(left, right) {
+    return (left.getFullYear() === right.getFullYear() &&
+        left.getMonth() === right.getMonth() &&
+        left.getDate() === right.getDate());
+}
+function startOfDay(date) {
+    const next = cloneDate(date);
+    next.setHours(0, 0, 0, 0);
+    return next;
+}
+function startOfMonth(date) {
+    const next = startOfDay(date);
+    next.setDate(1);
+    return next;
+}
+function endOfMonth(date) {
+    const next = startOfMonth(date);
+    next.setMonth(next.getMonth() + 1);
+    next.setDate(0);
+    return next;
+}
+function startOfWeek(date) {
+    const next = startOfDay(date);
+    next.setDate(next.getDate() - next.getDay());
+    return next;
+}
+function addDays(date, amount) {
+    const next = cloneDate(date);
+    next.setDate(next.getDate() + amount);
+    return next;
+}
+function addMonths(date, amount) {
+    const next = cloneDate(date);
+    next.setDate(1);
+    next.setMonth(next.getMonth() + amount);
+    return next;
+}
+function addYears(date, amount) {
+    const next = cloneDate(date);
+    next.setFullYear(next.getFullYear() + amount);
+    return next;
+}
+function isDateSelectable(date, min, max, filter) {
+    const time = startOfDay(date).getTime();
+    if (min && time < startOfDay(min).getTime()) {
+        return false;
+    }
+    if (max && time > startOfDay(max).getTime()) {
+        return false;
+    }
+    return filter ? filter(date) : true;
+}
+function formatIsoDate(date) {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+}
+function parseIsoDate(text) {
+    const match = text.trim().match(/^(\d{4})-(\d{2})-(\d{2})$/);
+    if (!match) {
+        return null;
+    }
+    const year = Number(match[1]);
+    const month = Number(match[2]) - 1;
+    const day = Number(match[3]);
+    const date = new Date(year, month, day);
+    return date.getFullYear() === year && date.getMonth() === month && date.getDate() === day
+        ? date
+        : null;
+}
+function monthLabel(date) {
+    return new Intl.DateTimeFormat(undefined, { month: 'long', year: 'numeric' }).format(date);
+}
+function yearLabel(date) {
+    return String(date.getFullYear());
+}
+function yearRangeLabel(startYear, count) {
+    return `${startYear} - ${startYear + count - 1}`;
+}
+
+class CalendarComponent {
+    injector = inject(Injector);
+    surface = viewChild.required('surface', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    min = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    startAt = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
+    startView = input('month', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startView" }] : /* istanbul ignore next */ []));
+    dateFilter = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    onChangeFn = () => { };
+    onTouchedFn = () => { };
+    focusDate = linkedSignal(() => cloneDate(this.value() ?? this.startAt() ?? new Date()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusDate" }] : /* istanbul ignore next */ []));
+    activeView = linkedSignal(() => this.startView(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeView" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('calendar block w-fit', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    sameDay = sameDay;
+    cloneDate = cloneDate;
+    weekdayLabels = computed(() => this.buildWeekdayLabels(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekdayLabels" }] : /* istanbul ignore next */ []));
+    monthCells = computed(() => this.buildMonthCells(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthCells" }] : /* istanbul ignore next */ []));
+    monthTabStopKey = computed(() => {
+        const cells = this.monthCells();
+        const focused = cells.find((cell) => sameDay(cell.date, this.focusDate()) && !cell.disabled);
+        return focused?.key ?? cells.find((cell) => !cell.disabled)?.key ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthTabStopKey" }] : /* istanbul ignore next */ []));
+    monthWeeks = computed(() => {
+        const cells = this.monthCells();
+        return Array.from({ length: cells.length / 7 }, (_, index) => cells.slice(index * 7, index * 7 + 7));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthWeeks" }] : /* istanbul ignore next */ []));
+    yearTabStop = computed(() => {
+        const months = this.yearMonths();
+        const focusedMonth = this.focusDate().getMonth();
+        return (months.find((month) => month.monthIndex === focusedMonth && !month.disabled)?.monthIndex ??
+            months.find((month) => !month.disabled)?.monthIndex ??
+            -1);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yearTabStop" }] : /* istanbul ignore next */ []));
+    multiYearTabStop = computed(() => {
+        const years = this.multiYearCells();
+        const focusedYear = this.focusDate().getFullYear();
+        return (years.find((year) => year.year === focusedYear && !year.disabled)?.year ??
+            years.find((year) => !year.disabled)?.year ??
+            -1);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multiYearTabStop" }] : /* istanbul ignore next */ []));
+    dateLabel = (date) => new Intl.DateTimeFormat(undefined, { dateStyle: 'long' }).format(date);
+    headerLabel = computed(() => {
+        const focus = this.focusDate();
+        switch (this.activeView()) {
+            case 'year':
+                return String(focus.getFullYear());
+            case 'multi-year':
+                return yearRangeLabel(Math.floor(focus.getFullYear() / 20) * 20, 20);
+            default:
+                return monthLabel(focus);
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerLabel" }] : /* istanbul ignore next */ []));
+    yearMonths() {
+        const focus = this.focusDate();
+        const selectedMonth = this.value()?.getMonth() ?? focus.getMonth();
+        const selectedYear = this.value()?.getFullYear() ?? focus.getFullYear();
+        return Array.from({ length: 12 }, (_, monthIndex) => {
+            const candidate = new Date(focus.getFullYear(), monthIndex, 1);
+            return {
+                key: `${candidate.getFullYear()}-${monthIndex}`,
+                label: new Intl.DateTimeFormat(undefined, { month: 'short' }).format(candidate),
+                monthIndex,
+                selected: monthIndex === selectedMonth && focus.getFullYear() === selectedYear,
+                disabled: !this.isMonthSelectable(candidate),
+            };
+        });
+    }
+    multiYearCells() {
+        const focusYear = this.focusDate().getFullYear();
+        const baseYear = Math.floor(focusYear / 20) * 20;
+        const selectedYear = this.value()?.getFullYear() ?? focusYear;
+        return Array.from({ length: 20 }, (_, index) => {
+            const year = baseYear + index;
+            const candidate = new Date(year, 0, 1);
+            return {
+                key: String(year),
+                year,
+                selected: year === selectedYear,
+                disabled: !this.isYearSelectable(candidate),
+            };
+        });
+    }
+    toggleView() {
+        switch (this.activeView()) {
+            case 'month':
+                this.activeView.set('year');
+                break;
+            case 'year':
+                this.activeView.set('multi-year');
+                break;
+            default:
+                this.activeView.set('multi-year');
+                break;
+        }
+    }
+    previous() {
+        const focus = this.focusDate();
+        switch (this.activeView()) {
+            case 'year':
+                this.focusDate.set(addYears(focus, -1));
+                break;
+            case 'multi-year':
+                this.focusDate.set(addYears(focus, -20));
+                break;
+            default:
+                this.focusDate.set(addMonths(focus, -1));
+                break;
+        }
+    }
+    next() {
+        const focus = this.focusDate();
+        switch (this.activeView()) {
+            case 'year':
+                this.focusDate.set(addYears(focus, 1));
+                break;
+            case 'multi-year':
+                this.focusDate.set(addYears(focus, 20));
+                break;
+            default:
+                this.focusDate.set(addMonths(focus, 1));
+                break;
+        }
+    }
+    chooseMonth(monthIndex) {
+        const next = new Date(this.focusDate().getFullYear(), monthIndex, 1);
+        this.focusDate.set(next);
+        this.activeView.set('month');
+    }
+    chooseYear(year) {
+        this.focusDate.set(new Date(year, 0, 1));
+        this.activeView.set('year');
+    }
+    focusMonth(monthIndex) {
+        const current = this.focusDate();
+        this.focusDate.set(new Date(current.getFullYear(), monthIndex, 1));
+    }
+    focusYear(year) {
+        const current = this.focusDate();
+        this.focusDate.set(new Date(year, current.getMonth(), 1));
+    }
+    selectDate(date) {
+        if (this.isDisabled() || !this.isDateSelectable(date)) {
+            return;
+        }
+        const next = cloneDate(date);
+        this.value.set(next);
+        this.focusDate.set(next);
+        this.onChangeFn(next);
+        this.onTouchedFn();
+    }
+    onMonthKeydown(event) {
+        if (this.isDisabled()) {
+            return;
+        }
+        let next = null;
+        switch (event.key) {
+            case 'ArrowLeft':
+                next = addDays(this.focusDate(), -1);
+                break;
+            case 'ArrowRight':
+                next = addDays(this.focusDate(), 1);
+                break;
+            case 'ArrowUp':
+                next = addDays(this.focusDate(), -7);
+                break;
+            case 'ArrowDown':
+                next = addDays(this.focusDate(), 7);
+                break;
+            case 'Home':
+                next = startOfWeek(this.focusDate());
+                break;
+            case 'End':
+                next = addDays(startOfWeek(this.focusDate()), 6);
+                break;
+            case 'PageUp':
+                next = event.shiftKey ? addYears(this.focusDate(), -1) : addMonths(this.focusDate(), -1);
+                break;
+            case 'PageDown':
+                next = event.shiftKey ? addYears(this.focusDate(), 1) : addMonths(this.focusDate(), 1);
+                break;
+            case 'Enter':
+            case ' ': {
+                event.preventDefault();
+                this.selectDate(this.focusDate());
+                return;
+            }
+            default:
+                return;
+        }
+        event.preventDefault();
+        if (next) {
+            this.focusDate.set(next);
+            afterNextRender({ read: () => this.focusDateCell(next) }, { injector: this.injector });
+        }
+    }
+    onPeriodKeydown(event, columns) {
+        if (this.isDisabled()) {
+            return;
+        }
+        const cells = Array.from(event.currentTarget.querySelectorAll('button[role="gridcell"]:not(:disabled)'));
+        const currentIndex = cells.indexOf(event.target);
+        if (currentIndex < 0) {
+            return;
+        }
+        let targetIndex = currentIndex;
+        switch (event.key) {
+            case 'ArrowLeft':
+                targetIndex -= 1;
+                break;
+            case 'ArrowRight':
+                targetIndex += 1;
+                break;
+            case 'ArrowUp':
+                targetIndex -= columns;
+                break;
+            case 'ArrowDown':
+                targetIndex += columns;
+                break;
+            case 'Home':
+                targetIndex = 0;
+                break;
+            case 'End':
+                targetIndex = cells.length - 1;
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                event.target.click();
+                return;
+            default:
+                return;
+        }
+        event.preventDefault();
+        cells[Math.max(0, Math.min(cells.length - 1, targetIndex))]?.focus();
+    }
+    /** Focus the current roving-tab-stop cell after an enclosing popup opens. */
+    focusActiveCell() {
+        const selector = this.activeView() === 'month'
+            ? '[data-date][tabindex="0"]'
+            : this.activeView() === 'year'
+                ? '[data-month][tabindex="0"]'
+                : '[data-year][tabindex="0"]';
+        this.surface().nativeElement.querySelector(selector)?.focus();
+    }
+    writeValue(value) {
+        this.value.set(value ? cloneDate(value) : null);
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    setDisabledState(state) {
+        this.cvaDisabled.set(state);
+    }
+    buildWeekdayLabels() {
+        const start = startOfWeek(new Date(2024, 0, 7));
+        return Array.from({ length: 7 }, (_, index) => new Intl.DateTimeFormat(undefined, { weekday: 'short' }).format(addDays(start, index)));
+    }
+    buildMonthCells() {
+        const focus = this.focusDate();
+        const monthStart = startOfMonth(focus);
+        const start = startOfWeek(monthStart);
+        const selected = this.value();
+        const now = new Date();
+        return Array.from({ length: 42 }, (_, index) => {
+            const date = addDays(start, index);
+            return {
+                date,
+                key: formatIsoDate(date),
+                inMonth: date.getMonth() === focus.getMonth(),
+                disabled: !this.isDateSelectable(date),
+                selected: !!selected && sameDay(date, selected),
+                today: sameDay(date, now),
+            };
+        });
+    }
+    isDateSelectable(date) {
+        return isDateSelectable(date, this.min(), this.max(), this.dateFilter());
+    }
+    /**
+     * A period is selectable when it HOLDS a selectable day.
+     *
+     * Testing only the first and last day answered a different question, and got
+     * the middle wrong: a window like 10 to 20 January excludes both ends, so
+     * January came back disabled even though eleven of its days are open. Any
+     * `dateFilter` narrower than the edges hit the same wall. Walking the days is
+     * cheap -- at most 31 here, 366 for a year -- and it stops at the first hit,
+     * which for an unconstrained calendar is the very first day.
+     */
+    isMonthSelectable(date) {
+        return this.hasSelectableDay(startOfMonth(date), new Date(date.getFullYear(), date.getMonth() + 1, 0));
+    }
+    isYearSelectable(date) {
+        return this.hasSelectableDay(new Date(date.getFullYear(), 0, 1), new Date(date.getFullYear(), 11, 31));
+    }
+    hasSelectableDay(start, end) {
+        const last = startOfDay(end).getTime();
+        for (let day = startOfDay(start); day.getTime() <= last; day = addDays(day, 1)) {
+            if (this.isDateSelectable(day)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    focusDateCell(date) {
+        const key = formatIsoDate(date);
+        const target = this.surface().nativeElement.querySelector(`[data-date="${key}"]`);
+        target?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: CalendarComponent, isStandalone: true, selector: "Calendar", 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 }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "classes()", "attr.aria-disabled": "isDisabled() ? \"true\" : null", "attr.inert": "isDisabled() ? \"\" : null" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CalendarComponent), multi: true },
+        ], viewQueries: [{ propertyName: "surface", first: true, predicate: ["surface"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div #surface class="calendar-surface">
+      <div class="calendar-header">
+        <button
+          type="button"
+          class="calendar-nav"
+          aria-label="Previous period"
+          [disabled]="isDisabled()"
+          (click)="previous()"
+        >
+          <span aria-hidden="true">‹</span>
+        </button>
+
+        <button
+          type="button"
+          class="calendar-title"
+          [disabled]="isDisabled()"
+          (click)="toggleView()"
+        >
+          {{ headerLabel() }}
+        </button>
+
+        <button
+          type="button"
+          class="calendar-nav"
+          aria-label="Next period"
+          [disabled]="isDisabled()"
+          (click)="next()"
+        >
+          <span aria-hidden="true">›</span>
+        </button>
+      </div>
+
+      @switch (activeView()) {
+        @case ('month') {
+          <div
+            class="calendar-grid calendar-grid-month"
+            role="grid"
+            tabindex="-1"
+            aria-label="Calendar dates"
+            (keydown)="onMonthKeydown($event)"
+          >
+            <div class="calendar-weekdays" role="row">
+              @for (label of weekdayLabels(); track label) {
+                <span class="calendar-weekday" role="columnheader">{{ label }}</span>
+              }
+            </div>
+
+            <div class="calendar-days">
+              @for (week of monthWeeks(); track week[0].key) {
+                <div class="calendar-week" role="row">
+                  @for (cell of week; track cell.key) {
+                    <button
+                      type="button"
+                      role="gridcell"
+                      class="calendar-cell"
+                      [class.is-outside-month]="!cell.inMonth"
+                      [class.is-selected]="cell.selected"
+                      [disabled]="cell.disabled"
+                      [attr.aria-label]="dateLabel(cell.date)"
+                      [attr.data-date]="cell.key"
+                      [attr.aria-selected]="cell.selected"
+                      [attr.aria-current]="cell.today ? 'date' : null"
+                      [class.is-today]="cell.today"
+                      [attr.tabindex]="cell.key === monthTabStopKey() ? 0 : -1"
+                      (click)="selectDate(cell.date)"
+                      (focus)="focusDate.set(cloneDate(cell.date))"
+                    >
+                      {{ cell.date.getDate() }}
+                    </button>
+                  }
+                </div>
+              }
+            </div>
+          </div>
+        }
+
+        @case ('year') {
+          <div
+            class="calendar-grid"
+            role="grid"
+            tabindex="-1"
+            aria-label="Calendar months"
+            (keydown)="onPeriodKeydown($event, 3)"
+          >
+            <div class="calendar-grid-year" role="row">
+              @for (month of yearMonths(); track month.key) {
+                <button
+                  type="button"
+                  role="gridcell"
+                  class="calendar-cell calendar-month"
+                  [class.is-selected]="month.selected"
+                  [disabled]="month.disabled"
+                  [attr.aria-label]="month.label"
+                  [attr.aria-selected]="month.selected"
+                  [attr.data-month]="month.monthIndex"
+                  [attr.tabindex]="month.monthIndex === yearTabStop() ? 0 : -1"
+                  (click)="chooseMonth(month.monthIndex)"
+                  (focus)="focusMonth(month.monthIndex)"
+                >
+                  {{ month.label }}
+                </button>
+              }
+            </div>
+          </div>
+        }
+
+        @case ('multi-year') {
+          <div
+            class="calendar-grid"
+            role="grid"
+            tabindex="-1"
+            aria-label="Calendar years"
+            (keydown)="onPeriodKeydown($event, 4)"
+          >
+            <div class="calendar-grid-years" role="row">
+              @for (year of multiYearCells(); track year.key) {
+                <button
+                  type="button"
+                  role="gridcell"
+                  class="calendar-cell calendar-year"
+                  [class.is-selected]="year.selected"
+                  [disabled]="year.disabled"
+                  [attr.aria-label]="year.year"
+                  [attr.aria-selected]="year.selected"
+                  [attr.data-year]="year.year"
+                  [attr.tabindex]="year.year === multiYearTabStop() ? 0 : -1"
+                  (click)="chooseYear(year.year)"
+                  (focus)="focusYear(year.year)"
+                >
+                  {{ year.year }}
+                </button>
+              }
+            </div>
+          </div>
+        }
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:fit-content;min-width:calc(var(--spacing-base) * 70);padding:calc(var(--spacing-base) * 3);border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--background));color:hsl(var(--foreground));font-family:var(--font-sans);font-size:var(--text-sm)}.calendar-surface{display:grid;gap:calc(var(--spacing-base) * 2);width:100%}.calendar-header{display:grid;grid-template-columns:2.25rem minmax(0,1fr) 2.25rem;align-items:center;gap:var(--spacing-base)}button{border:0;background:transparent;color:inherit;font:inherit}.calendar-nav,.calendar-title,.calendar-cell{display:inline-flex;align-items:center;justify-content:center;border-radius:calc(var(--radius) - .125rem);cursor:pointer;transition:background-color .15s ease,color .15s ease}.calendar-nav{width:var(--control-height-md);height:var(--control-height-md);color:hsl(var(--muted-foreground));font-size:1.5rem;line-height:1}.calendar-title{min-height:var(--control-height-md);padding:0 calc(var(--spacing-base) * 2);font-weight:600}.calendar-nav:hover:not(:disabled),.calendar-title:hover:not(:disabled),.calendar-cell:hover:not(:disabled){background:hsl(var(--accent));color:hsl(var(--accent-foreground))}.calendar-nav:focus-visible,.calendar-title:focus-visible,.calendar-cell:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}.calendar-nav:disabled,.calendar-title:disabled,.calendar-cell:disabled{cursor:not-allowed;opacity:.45}.calendar-grid-month{display:grid;gap:var(--spacing-base)}.calendar-weekdays,.calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:calc(var(--spacing-base) * .5)}.calendar-days{display:grid;gap:calc(var(--spacing-base) * .5)}.calendar-weekday{display:grid;place-items:center;min-height:calc(var(--spacing-base) * 7.5);color:hsl(var(--muted-foreground));font-size:.75rem;font-weight:500}.calendar-cell{min-width:var(--control-height-md);min-height:var(--control-height-md);padding:var(--spacing-base)}.calendar-cell.is-outside-month{color:hsl(var(--muted-foreground));opacity:1}.calendar-cell.is-today:not(.is-selected){box-shadow:inset 0 0 0 1px hsl(var(--primary));font-weight:600}.calendar-cell.is-selected{background:hsl(var(--primary));color:hsl(var(--primary-foreground));font-weight:600}.calendar-cell.is-selected:hover:not(:disabled){background:hsl(var(--primary));color:hsl(var(--primary-foreground))}.calendar-grid-year,.calendar-grid-years{display:grid;gap:var(--spacing-base)}.calendar-grid-year{grid-template-columns:repeat(3,minmax(0,1fr))}.calendar-grid-years{grid-template-columns:repeat(4,minmax(0,1fr))}.calendar-month,.calendar-year{min-width:0}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'Calendar', providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CalendarComponent), multi: true },
+                    ], host: {
+                        '[class]': 'classes()',
+                        '[attr.aria-disabled]': 'isDisabled() ? "true" : null',
+                        '[attr.inert]': 'isDisabled() ? "" : null',
+                    }, template: `
+    <div #surface class="calendar-surface">
+      <div class="calendar-header">
+        <button
+          type="button"
+          class="calendar-nav"
+          aria-label="Previous period"
+          [disabled]="isDisabled()"
+          (click)="previous()"
+        >
+          <span aria-hidden="true">‹</span>
+        </button>
+
+        <button
+          type="button"
+          class="calendar-title"
+          [disabled]="isDisabled()"
+          (click)="toggleView()"
+        >
+          {{ headerLabel() }}
+        </button>
+
+        <button
+          type="button"
+          class="calendar-nav"
+          aria-label="Next period"
+          [disabled]="isDisabled()"
+          (click)="next()"
+        >
+          <span aria-hidden="true">›</span>
+        </button>
+      </div>
+
+      @switch (activeView()) {
+        @case ('month') {
+          <div
+            class="calendar-grid calendar-grid-month"
+            role="grid"
+            tabindex="-1"
+            aria-label="Calendar dates"
+            (keydown)="onMonthKeydown($event)"
+          >
+            <div class="calendar-weekdays" role="row">
+              @for (label of weekdayLabels(); track label) {
+                <span class="calendar-weekday" role="columnheader">{{ label }}</span>
+              }
+            </div>
+
+            <div class="calendar-days">
+              @for (week of monthWeeks(); track week[0].key) {
+                <div class="calendar-week" role="row">
+                  @for (cell of week; track cell.key) {
+                    <button
+                      type="button"
+                      role="gridcell"
+                      class="calendar-cell"
+                      [class.is-outside-month]="!cell.inMonth"
+                      [class.is-selected]="cell.selected"
+                      [disabled]="cell.disabled"
+                      [attr.aria-label]="dateLabel(cell.date)"
+                      [attr.data-date]="cell.key"
+                      [attr.aria-selected]="cell.selected"
+                      [attr.aria-current]="cell.today ? 'date' : null"
+                      [class.is-today]="cell.today"
+                      [attr.tabindex]="cell.key === monthTabStopKey() ? 0 : -1"
+                      (click)="selectDate(cell.date)"
+                      (focus)="focusDate.set(cloneDate(cell.date))"
+                    >
+                      {{ cell.date.getDate() }}
+                    </button>
+                  }
+                </div>
+              }
+            </div>
+          </div>
+        }
+
+        @case ('year') {
+          <div
+            class="calendar-grid"
+            role="grid"
+            tabindex="-1"
+            aria-label="Calendar months"
+            (keydown)="onPeriodKeydown($event, 3)"
+          >
+            <div class="calendar-grid-year" role="row">
+              @for (month of yearMonths(); track month.key) {
+                <button
+                  type="button"
+                  role="gridcell"
+                  class="calendar-cell calendar-month"
+                  [class.is-selected]="month.selected"
+                  [disabled]="month.disabled"
+                  [attr.aria-label]="month.label"
+                  [attr.aria-selected]="month.selected"
+                  [attr.data-month]="month.monthIndex"
+                  [attr.tabindex]="month.monthIndex === yearTabStop() ? 0 : -1"
+                  (click)="chooseMonth(month.monthIndex)"
+                  (focus)="focusMonth(month.monthIndex)"
+                >
+                  {{ month.label }}
+                </button>
+              }
+            </div>
+          </div>
+        }
+
+        @case ('multi-year') {
+          <div
+            class="calendar-grid"
+            role="grid"
+            tabindex="-1"
+            aria-label="Calendar years"
+            (keydown)="onPeriodKeydown($event, 4)"
+          >
+            <div class="calendar-grid-years" role="row">
+              @for (year of multiYearCells(); track year.key) {
+                <button
+                  type="button"
+                  role="gridcell"
+                  class="calendar-cell calendar-year"
+                  [class.is-selected]="year.selected"
+                  [disabled]="year.disabled"
+                  [attr.aria-label]="year.year"
+                  [attr.aria-selected]="year.selected"
+                  [attr.data-year]="year.year"
+                  [attr.tabindex]="year.year === multiYearTabStop() ? 0 : -1"
+                  (click)="chooseYear(year.year)"
+                  (focus)="focusYear(year.year)"
+                >
+                  {{ year.year }}
+                </button>
+              }
+            </div>
+          </div>
+        }
+      }
+    </div>
+  `, styles: [":host{display:block;width:fit-content;min-width:calc(var(--spacing-base) * 70);padding:calc(var(--spacing-base) * 3);border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--background));color:hsl(var(--foreground));font-family:var(--font-sans);font-size:var(--text-sm)}.calendar-surface{display:grid;gap:calc(var(--spacing-base) * 2);width:100%}.calendar-header{display:grid;grid-template-columns:2.25rem minmax(0,1fr) 2.25rem;align-items:center;gap:var(--spacing-base)}button{border:0;background:transparent;color:inherit;font:inherit}.calendar-nav,.calendar-title,.calendar-cell{display:inline-flex;align-items:center;justify-content:center;border-radius:calc(var(--radius) - .125rem);cursor:pointer;transition:background-color .15s ease,color .15s ease}.calendar-nav{width:var(--control-height-md);height:var(--control-height-md);color:hsl(var(--muted-foreground));font-size:1.5rem;line-height:1}.calendar-title{min-height:var(--control-height-md);padding:0 calc(var(--spacing-base) * 2);font-weight:600}.calendar-nav:hover:not(:disabled),.calendar-title:hover:not(:disabled),.calendar-cell:hover:not(:disabled){background:hsl(var(--accent));color:hsl(var(--accent-foreground))}.calendar-nav:focus-visible,.calendar-title:focus-visible,.calendar-cell:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}.calendar-nav:disabled,.calendar-title:disabled,.calendar-cell:disabled{cursor:not-allowed;opacity:.45}.calendar-grid-month{display:grid;gap:var(--spacing-base)}.calendar-weekdays,.calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:calc(var(--spacing-base) * .5)}.calendar-days{display:grid;gap:calc(var(--spacing-base) * .5)}.calendar-weekday{display:grid;place-items:center;min-height:calc(var(--spacing-base) * 7.5);color:hsl(var(--muted-foreground));font-size:.75rem;font-weight:500}.calendar-cell{min-width:var(--control-height-md);min-height:var(--control-height-md);padding:var(--spacing-base)}.calendar-cell.is-outside-month{color:hsl(var(--muted-foreground));opacity:1}.calendar-cell.is-today:not(.is-selected){box-shadow:inset 0 0 0 1px hsl(var(--primary));font-weight:600}.calendar-cell.is-selected{background:hsl(var(--primary));color:hsl(var(--primary-foreground));font-weight:600}.calendar-cell.is-selected:hover:not(:disabled){background:hsl(var(--primary));color:hsl(var(--primary-foreground))}.calendar-grid-year,.calendar-grid-years{display:grid;gap:var(--spacing-base)}.calendar-grid-year{grid-template-columns:repeat(3,minmax(0,1fr))}.calendar-grid-years{grid-template-columns:repeat(4,minmax(0,1fr))}.calendar-month,.calendar-year{min-width:0}\n"] }]
+        }], propDecorators: { surface: [{ type: i0.ViewChild, args: ['surface', { isSignal: true }] }], 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 }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { CalendarComponent, addDays, addMonths, addYears, cloneDate, endOfMonth, formatIsoDate, isDateSelectable, monthLabel, parseIsoDate, sameDay, startOfDay, startOfMonth, startOfWeek, yearLabel, yearRangeLabel };