import * as i0 from '@angular/core'; import { InjectionToken, InputSignal, TemplateRef, OutputEmitterRef, Signal, WritableSignal, Provider } from '@angular/core'; import { VariantProps } from 'class-variance-authority'; /** * Calendar shared types and interfaces */ /** Represents a date range with a start and end date */ interface DateRange { /** Start of the date range */ start: D | null; /** End of the date range */ end: D | null; } /** Factory function to create a DateRange */ declare function createDateRange(start: D | null, end: D | null): DateRange; /** Available calendar views */ type CalendarView = 'month' | 'year' | 'multi-year'; /** Cell states for styling */ type CalendarCellState = 'default' | 'today' | 'selected' | 'range-start' | 'range-middle' | 'range-end' | 'disabled' | 'preview-start' | 'preview-middle' | 'preview-end'; /** Data structure representing a calendar cell */ interface CalendarCell { /** The date value this cell represents */ value: D; /** Display text for the cell */ displayValue: string; /** Accessible label for screen readers */ ariaLabel: string; /** Whether this cell is enabled/selectable */ enabled: boolean; /** CSS classes to apply (from dateClass input) */ cssClasses: string; /** Whether this cell represents today */ isToday: boolean; /** Whether this cell is currently selected */ isSelected: boolean; /** Whether this cell is the start of a range */ isRangeStart: boolean; /** Whether this cell is in the middle of a range */ isRangeMiddle: boolean; /** Whether this cell is the end of a range */ isRangeEnd: boolean; /** Whether this cell is the start of a preview range */ isPreviewStart: boolean; /** Whether this cell is in the middle of a preview range */ isPreviewMiddle: boolean; /** Whether this cell is the end of a preview range */ isPreviewEnd: boolean; /** Comparison value for keyboard navigation and selection */ compareValue: number; } /** Configuration for creating a calendar cell */ interface CalendarCellConfig { value: D; displayValue: string; ariaLabel: string; enabled?: boolean; cssClasses?: string; compareValue: number; } /** Factory function to create a CalendarCell with defaults */ declare function createCalendarCell(config: CalendarCellConfig): CalendarCell; /** Style format for month and day names */ type NameStyle = 'long' | 'short' | 'narrow'; /** Number of days in a week */ declare const DAYS_PER_WEEK = 7; /** Number of weeks displayed in month view */ declare const WEEKS_PER_MONTH = 6; /** Number of years displayed in multi-year view */ declare const YEARS_PER_PAGE = 24; /** Number of rows in multi-year view */ declare const YEARS_PER_ROW = 4; /** Number of months per row in year view */ declare const MONTHS_PER_ROW = 4; /** Function type for custom date filtering */ type DateFilterFn = (date: D) => boolean; /** Function type for applying custom CSS classes to dates */ type DateClassFn = (date: D, view: CalendarView) => string; /** * Abstract date adapter class that provides date manipulation operations. * Implement this class to support different date libraries (date-fns, Luxon, Temporal, etc.) */ declare abstract class DateAdapter { /** The locale to use for formatting. Can be overridden. */ locale: string; /** Gets today's date */ abstract today(): D; /** Gets the year component of the given date */ abstract getYear(date: D): number; /** Gets the month component of the given date (0-indexed, 0 = January) */ abstract getMonth(date: D): number; /** Gets the day of month component of the given date */ abstract getDate(date: D): number; /** Gets the day of the week (0 = Sunday, 6 = Saturday) */ abstract getDayOfWeek(date: D): number; /** Adds the given number of days to the date */ abstract addDays(date: D, days: number): D; /** Adds the given number of months to the date */ abstract addMonths(date: D, months: number): D; /** Adds the given number of years to the date */ abstract addYears(date: D, years: number): D; /** Creates a new date with the given year, month (0-indexed), and day */ abstract createDate(year: number, month: number, date: number): D; /** Gets the number of days in the month of the given date */ abstract getNumDaysInMonth(date: D): number; /** Gets the first day of the week (0 = Sunday, 1 = Monday, etc.) */ abstract getFirstDayOfWeek(): number; /** Gets the names of the months */ abstract getMonthNames(style: NameStyle): string[]; /** Gets the names of the days of the week */ abstract getDayOfWeekNames(style: NameStyle): string[]; /** Gets the display name for a year */ abstract getYearName(date: D): string; /** Formats the date according to the given format string */ abstract format(date: D, displayFormat: string): string; /** Parses a date string into a date object */ abstract parse(value: string, parseFormat: string): D | null; /** Checks whether the given date is valid */ abstract isValid(date: D): boolean; /** Checks whether two dates are the same day */ abstract isSameDay(first: D, second: D): boolean; /** Compares two dates. Returns -1 if first < second, 0 if equal, 1 if first > second */ abstract compareDate(first: D, second: D): number; /** Clamps the given date to the specified min/max range */ abstract clampDate(date: D, min: D | null, max: D | null): D; /** * Gets the first day of the month for the given date */ getFirstDayOfMonth(date: D): D; /** * Checks whether two dates are in the same month and year */ isSameMonthAndYear(first: D, second: D): boolean; /** * Checks whether the given date is within the specified range */ isDateInRange(date: D, start: D | null, end: D | null): boolean; /** Gets the hour component of the given date (0-23) */ abstract getHours(date: D): number; /** Gets the minute component of the given date (0-59) */ abstract getMinutes(date: D): number; /** Gets the second component of the given date (0-59) */ abstract getSeconds(date: D): number; /** Returns a new date with the given hour, minute, second set */ abstract setTime(date: D, hours: number, minutes: number, seconds: number): D; /** Creates a date with the given year, month (0-indexed), day, hours, minutes, seconds */ abstract createDateTime(year: number, month: number, day: number, hours: number, minutes: number, seconds: number): D; /** * Gets a unique identifier for the date (useful for trackBy) */ getId(date: D): string; /** * Sets the locale for the adapter */ setLocale(locale: string): void; } /** Injection token for the DateAdapter */ declare const DATE_ADAPTER: InjectionToken>; /** * DateAdapter implementation using the native JavaScript Date object. * This is the default adapter shipped with the library. */ declare class NativeDateAdapter extends DateAdapter { private readonly localeId; constructor(); today(): Date; getYear(date: Date): number; getMonth(date: Date): number; getDate(date: Date): number; getDayOfWeek(date: Date): number; addDays(date: Date, days: number): Date; addMonths(date: Date, months: number): Date; addYears(date: Date, years: number): Date; createDate(year: number, month: number, day: number): Date; getNumDaysInMonth(date: Date): number; getFirstDayOfWeek(): number; setLocale(locale: string): void; getMonthNames(style: NameStyle): string[]; getDayOfWeekNames(style: NameStyle): string[]; getYearName(date: Date): string; format(date: Date, displayFormat: string): string; parse(value: string, _parseFormat: string): Date | null; isValid(date: Date): boolean; isSameDay(first: Date, second: Date): boolean; compareDate(first: Date, second: Date): number; getHours(date: Date): number; getMinutes(date: Date): number; getSeconds(date: Date): number; setTime(date: Date, hours: number, minutes: number, seconds: number): Date; createDateTime(year: number, month: number, day: number, hours: number, minutes: number, seconds: number): Date; clampDate(date: Date, min: Date | null, max: Date | null): Date; /** * Strips the time component from a date, returning midnight */ private stripTime; /** * Gets the number of days in a specific month */ private getDaysInMonth; /** * Parses a format string into Intl.DateTimeFormat options */ private parseFormatString; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } type CellView = 'month' | 'year' | 'multi-year'; type CellState = 'default' | 'today' | 'selected' | 'range-start' | 'range-middle' | 'range-end' | 'preview-start' | 'preview-middle' | 'preview-end' | 'disabled'; type WrapperRange = 'none' | 'start' | 'middle' | 'end' | 'single'; /** * CVA variants for calendar cell styling. * Uses semantic theme tokens for consistent cross-theme styling. * * @tokens `--color-ring`, `--color-foreground`, `--color-muted`, * `--color-primary`, `--color-primary-foreground`, `--color-primary-hover`, * `--color-primary-subtle`, `--color-primary-subtle-foreground`, * `--color-disabled-foreground`, `--radius-calendar-cell` */ declare const calendarCellVariants: (props?: { view?: CellView; state?: CellState; outside?: boolean; }) => string; type CalendarCellVariants = { view?: CellView; state?: CellState; outside?: boolean; }; /** * CVA variants for the calendar cell wrapper (used for range backgrounds) * * @tokens `--color-primary-subtle` */ declare const calendarCellWrapperVariants: (props?: { range?: WrapperRange | undefined; }) => string; type CalendarCellWrapperVariants = { range?: WrapperRange | undefined; }; type ButtonType = 'navigation' | 'period'; /** * CVA variants for the calendar header container. */ declare const calendarHeaderVariants: () => string; type CalendarHeaderVariants = Record; /** * CVA variants for the calendar header buttons. * * @tokens `--color-foreground`, `--color-ring`, `--color-muted`, * `--color-disabled-foreground`, `--radius-calendar-cell` */ declare const calendarHeaderButtonVariants: (props?: { type?: ButtonType; }) => string; type CalendarHeaderButtonVariants = { type?: ButtonType; }; /** * CVA variants for the main calendar container. * * @tokens `--color-background`, `--color-border-subtle`, `--radius-calendar` */ declare const calendarVariants: (props?: { bordered?: boolean; }) => string; type CalendarVariants = VariantProps; /** * Creates a 2D grid from a flat array of items. * * @param items The flat array of items to arrange into a grid * @param columns Number of columns per row * @returns 2D array where each inner array is a row */ declare function createGrid(items: T[], columns: number): T[][]; /** * Calculates the new index when navigating a grid with arrow keys. * * @param currentIndex Current position in the flat array * @param direction Navigation direction ('left' | 'right' | 'up' | 'down') * @param totalItems Total number of items in the grid * @param columns Number of columns per row * @returns New index or null if navigation would go out of bounds */ declare function navigateGrid(currentIndex: number, direction: 'left' | 'right' | 'up' | 'down', totalItems: number, columns: number): number | null; /** * Weekday header information for the month view. */ interface WeekdayHeader { /** Full label for the weekday (used in aria-label) */ label: string; /** Narrow/abbreviated label (displayed in the header cell) */ narrow: string; } /** * Gets weekday headers for the calendar month view. * The headers are ordered starting from the first day of the week. * * @param adapter Date adapter to use for getting weekday names * @param style Style for the full label ('long' | 'short' | 'narrow') * @param firstDayOfWeek Optional override for first day of week (0=Sun, 1=Mon, ..., 6=Sat) * @returns Array of weekday headers starting from first day of week */ declare function getWeekdayHeaders(adapter: DateAdapter, style?: NameStyle, firstDayOfWeek?: number): WeekdayHeader[]; /** * Checks whether a date should be disabled based on constraints. * * @param date The date to check * @param minDate Minimum allowed date (inclusive) * @param maxDate Maximum allowed date (inclusive) * @param dateFilter Custom filter function * @param adapter Date adapter for comparisons * @returns true if the date should be disabled */ declare function isDateDisabled(date: D, minDate: D | null, maxDate: D | null, dateFilter: ((d: D) => boolean) | null, adapter: DateAdapter): boolean; /** * Checks whether a month should be disabled based on constraints. * A month is disabled if ALL days in that month are disabled. * * @param year The year of the month to check * @param month The month to check (0-indexed) * @param minDate Minimum allowed date * @param maxDate Maximum allowed date * @param adapter Date adapter for date operations * @returns true if the entire month should be disabled */ declare function isMonthDisabled(year: number, month: number, minDate: D | null, maxDate: D | null, adapter: DateAdapter): boolean; /** * Checks whether a year should be disabled based on constraints. * A year is disabled if ALL months in that year are disabled. * * @param year The year to check * @param minDate Minimum allowed date * @param maxDate Maximum allowed date * @param adapter Date adapter for date operations * @returns true if the entire year should be disabled */ declare function isYearDisabled(year: number, minDate: D | null, maxDate: D | null, adapter: DateAdapter): boolean; /** * Gets the starting year for the multi-year view grid. * Aligns the year to be at the start of a YEARS_PER_PAGE block. * * @param activeYear The currently active year * @param yearsPerPage Number of years shown per page (default 24) * @returns The first year of the multi-year page */ declare function getMultiYearStartingYear(activeYear: number, yearsPerPage?: number): number; /** Event emitted when a navigation key is pressed */ interface CalendarCellKeyNavEvent { direction: string; cell: CalendarCell; } /** * A single cell in the calendar grid. * This is a shared, stateless component used across all calendar views. * * @example * ```html * * ``` * * @tokens `--color-ring`, `--color-foreground`, `--color-muted`, `--color-muted-foreground`, * `--color-primary`, `--color-primary-foreground`, `--color-primary-hover`, * `--color-primary-subtle`, `--color-primary-subtle-foreground`, * `--color-disabled-foreground`, `--radius-calendar-cell` */ declare class ComCalendarCell { /** Reference to the button element for focus management */ private readonly buttonRef; /** The cell data to render */ readonly cell: InputSignal>; /** The current calendar view */ readonly view: InputSignal; /** Whether this cell is outside the current month (for month view) */ readonly outside: InputSignal; /** Tab index for keyboard navigation (-1 for not focusable, 0 for focusable) */ readonly tabindex: InputSignal; /** Custom template for cell content */ readonly cellTemplate: InputSignal; }> | null>; /** Emitted when the cell is selected */ readonly selected: OutputEmitterRef>; /** Emitted when the cell is focused */ readonly focused: OutputEmitterRef>; /** Emitted when the mouse enters the cell (for range preview) */ readonly previewed: OutputEmitterRef>; /** Emitted when a navigation key is pressed */ readonly keyNav: OutputEmitterRef>; /** Computed cell state for styling */ protected readonly cellState: Signal; /** Computed wrapper range state */ protected readonly wrapperRange: Signal<'none' | 'start' | 'middle' | 'end' | 'single'>; /** Computed CSS classes for the cell button */ protected readonly cellClasses: Signal; /** Computed CSS classes for the wrapper div */ protected readonly wrapperClasses: Signal; protected onCellClick(): void; protected onKeydown(event: KeyboardEvent): void; protected onMouseEnter(): void; protected onFocus(): void; /** Focuses the button element within this cell */ focusButton(): void; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵcmp: i0.ɵɵComponentDeclaration, "com-calendar-cell", never, { "cell": { "alias": "cell"; "required": true; "isSignal": true; }; "view": { "alias": "view"; "required": false; "isSignal": true; }; "outside": { "alias": "outside"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; "isSignal": true; }; }, { "selected": "selected"; "focused": "focused"; "previewed": "previewed"; "keyNav": "keyNav"; }, never, never, true, never>; } /** * Navigation header component for the calendar. * Provides prev/next buttons and a clickable period label for view switching. * * @example * ```html * * ``` * * @tokens `--color-foreground`, `--color-ring`, `--color-muted`, * `--color-disabled-foreground`, `--radius-calendar-cell` */ declare class ComCalendarHeader { /** Display text (e.g., "January 2024", "2024", "2000 – 2023") */ readonly periodLabel: InputSignal; /** Accessible label for period button */ readonly periodAriaLabel: InputSignal; /** Accessible label for previous button */ readonly prevAriaLabel: InputSignal; /** Accessible label for next button */ readonly nextAriaLabel: InputSignal; /** Disable previous button */ readonly prevDisabled: InputSignal; /** Disable next button */ readonly nextDisabled: InputSignal; /** Whether clicking period label switches view */ readonly canSwitchView: InputSignal; /** Emitted when previous button is clicked */ readonly prevClicked: OutputEmitterRef; /** Emitted when next button is clicked */ readonly nextClicked: OutputEmitterRef; /** Emitted when period label is clicked (switch view) */ readonly periodClicked: OutputEmitterRef; /** Computed header container classes */ protected readonly headerClasses: Signal; /** Computed navigation button classes */ protected readonly navButtonClasses: Signal; /** Computed period button classes */ protected readonly periodButtonClasses: Signal; /** * Handles period button click. * Only emits if view switching is allowed. */ protected onPeriodClick(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * Main calendar orchestrator component. * Composes the calendar header and view components (month, year, multi-year) * with view switching, navigation, and enhanced accessibility. * * @tokens `--color-background`, `--color-foreground`, `--color-border-subtle`, * `--color-ring`, `--color-muted`, `--color-muted-foreground`, * `--color-primary`, `--color-primary-foreground`, `--color-primary-hover`, * `--color-primary-subtle`, `--color-primary-subtle-foreground`, * `--color-disabled-foreground` * * @example * ```html * * ``` */ declare class ComCalendar { /** Date adapter for date operations */ private readonly dateAdapter; /** Optional selection strategy for custom selection behaviors */ private readonly selectionStrategy; /** Query for month views for cross-grid focus management */ private readonly monthViews; /** The date to display and navigate from */ readonly activeDate: InputSignal; /** The currently selected date, date range, or array of dates (multi-selection) */ readonly selected: InputSignal | null>; /** Minimum selectable date */ readonly minDate: InputSignal; /** Maximum selectable date */ readonly maxDate: InputSignal; /** Custom filter function to disable specific dates */ readonly dateFilter: InputSignal | null>; /** Custom function to add CSS classes to dates */ readonly dateClass: InputSignal | null>; /** Whether to show the card border and shadow. Set to false when used inside datepicker panel. */ readonly bordered: InputSignal; /** Initial view to display */ readonly startView: InputSignal; /** Override first day of week (0=Sun, 1=Mon, ..., 6=Sat). Uses locale default if null. */ readonly firstDayOfWeek: InputSignal; /** Number of months to display side-by-side (1 or 2). Defaults to 2 when RangeSelectionStrategy is used. */ readonly monthColumns: InputSignal; /** Computed first day of week (input override or adapter default) */ readonly computedFirstDayOfWeek: Signal; /** Effective number of month columns (auto-defaults to 2 for RangeSelectionStrategy) */ readonly effectiveMonthColumns: Signal; /** Secondary active date for dual-month display (+1 month from primary) */ readonly secondaryActiveDate: Signal; /** Custom template for cell content */ readonly cellTemplate: InputSignal; }> | null>; /** Emitted when a date is selected */ readonly selectedChange: OutputEmitterRef; /** Emitted when the view changes */ readonly viewChanged: OutputEmitterRef; /** Emitted when the active date changes */ readonly activeDateChange: OutputEmitterRef; /** Current view state (synced from startView input, writable for view switching) */ readonly currentView: WritableSignal; /** Internal active date (synced from activeDate input, writable for navigation) */ readonly internalActiveDate: WritableSignal; /** Live announcement for screen readers */ readonly liveAnnouncement: WritableSignal; /** Internal selection state managed by strategy (synced from selected input) */ readonly internalSelection: WritableSignal; /** Currently hovered/previewed date */ readonly previewDate: WritableSignal; /** Computed preview range from strategy */ readonly previewRange: Signal | null>; /** Calendar container classes */ readonly calendarClasses: Signal; /** Months container classes for single/dual-month layout */ readonly monthsContainerClasses: Signal; /** Month names for formatting */ private readonly monthNames; /** Period label for the header (e.g., "January 2024", "January – February 2024", "2024", "2000 – 2023") */ readonly periodLabel: Signal; /** Accessible label for the period button */ readonly periodAriaLabel: Signal; /** Accessible label for the previous button */ readonly prevAriaLabel: Signal; /** Accessible label for the next button */ readonly nextAriaLabel: Signal; /** Whether the previous button is disabled */ readonly prevDisabled: Signal; /** Whether the next button is disabled */ readonly nextDisabled: Signal; /** * Handles previous button click. * Navigates to the previous period based on current view. */ onPrevClicked(): void; /** * Handles next button click. * Navigates to the next period based on current view. */ onNextClicked(): void; /** * Handles period label click. * Switches to the next higher view (month → year → multi-year). */ onPeriodClicked(): void; /** * Handles date selection from month view. * Uses selection strategy if available, otherwise emits directly. */ onDateSelected(date: D): void; /** * Handles preview change from views (mouse hover). * Updates the preview date for strategy to compute preview range. */ onPreviewChange(date: D | null): void; /** * Handles month selection from year view. * Drills down to month view with the selected month. */ onMonthSelected(date: D): void; /** * Handles year selection from multi-year view. * Drills down to year view with the selected year. */ onYearSelected(date: D): void; /** * Handles active date change from child views (keyboard navigation). * In dual-month mode, handles cross-grid focus transitions. */ onActiveDateChange(date: D, gridIndex?: number): void; /** * Computes a unique compare value from a date for focus management. */ private computeCompareValue; /** * Announces a view change to screen readers. */ private announceViewChange; /** * Announces navigation to screen readers. */ private announceNavigation; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵcmp: i0.ɵɵComponentDeclaration, "com-calendar", never, { "activeDate": { "alias": "activeDate"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "dateClass": { "alias": "dateClass"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "startView": { "alias": "startView"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "monthColumns": { "alias": "monthColumns"; "required": false; "isSignal": true; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; "isSignal": true; }; }, { "selectedChange": "selectedChange"; "viewChanged": "viewChanged"; "activeDateChange": "activeDateChange"; }, never, never, true, never>; } /** * Abstract base class for calendar view components. * Provides shared inputs, outputs, and utility methods for month, year, and multi-year views. * * @tokens None - abstract base class, tokens are defined in concrete view components */ declare abstract class CalendarViewBase { /** Date adapter for date operations */ protected readonly dateAdapter: DateAdapter; /** The date to display and navigate from */ readonly activeDate: InputSignal; /** The currently selected date, date range, or array of dates (multi-selection) */ readonly selected: InputSignal | null>; /** Minimum selectable date */ readonly minDate: InputSignal; /** Maximum selectable date */ readonly maxDate: InputSignal; /** Custom filter function to disable specific dates */ readonly dateFilter: InputSignal | null>; /** Custom function to add CSS classes to dates */ readonly dateClass: InputSignal | null>; /** Start date for range preview (hover state) */ readonly previewStart: InputSignal; /** End date for range preview (hover state) */ readonly previewEnd: InputSignal; /** Custom template for cell content */ readonly cellTemplate: InputSignal; }> | null>; /** Emitted when a date is selected */ readonly selectedChange: OutputEmitterRef; /** Emitted when the active date changes (keyboard navigation) */ readonly activeDateChange: OutputEmitterRef; /** Emitted when the preview range changes (mouse hover) */ readonly previewChange: OutputEmitterRef; /** The calendar view type for this component */ protected abstract readonly view: CalendarView; /** Cell components for focus management. Must be implemented by each view using viewChildren. */ protected abstract readonly cellComponents: Signal[]>; /** Internal signal for tracking the focused cell's compare value */ protected readonly focusedCellValue: WritableSignal; /** Signal for pending focus operation (set by focusCell, consumed by afterRender) */ protected readonly focusPending: WritableSignal; constructor(); /** * The grid of cells to display. * Must be implemented by each view to generate the appropriate cells. */ abstract readonly cells: Signal[][]>; /** * Accessible label for the grid (e.g., "January 2024"). * Must be implemented by each view. */ abstract readonly gridLabel: Signal; /** Today's date for comparison */ protected readonly today: Signal; /** * Checks if a date is the currently selected date. */ protected isSelected(date: D): boolean; /** * Checks if a date is the start of a selected range. */ protected isRangeStart(date: D): boolean; /** * Checks if a date is the end of a selected range. */ protected isRangeEnd(date: D): boolean; /** * Checks if a date is in the middle of a selected range. */ protected isRangeMiddle(date: D): boolean; /** * Checks if a date is the start of the preview range. */ protected isPreviewStart(date: D): boolean; /** * Checks if a date is the end of the preview range. */ protected isPreviewEnd(date: D): boolean; /** * Checks if a date is in the middle of the preview range. */ protected isPreviewMiddle(date: D): boolean; /** * Type guard to check if a value is a DateRange. */ protected isDateRange(value: D | D[] | DateRange): value is DateRange; /** * Handles cell selection events. */ onCellSelected(cell: CalendarCell): void; /** * Handles cell preview events (mouse hover). */ onCellPreviewed(cell: CalendarCell): void; /** * Clears the preview when mouse leaves the grid. */ onGridMouseLeave(): void; /** * Handles keyboard navigation within the grid. * Must be implemented by each view to handle view-specific navigation. */ abstract onKeyNav(event: { direction: string; cell: CalendarCell; }): void; /** * Checks if a cell should have tabindex="0" (be the focusable cell). */ isActiveCell(cell: CalendarCell): boolean; /** * Gets the compare value for the active date. * Must be implemented by each view. */ protected abstract getActiveCompareValue(): number; /** * Focuses the cell with the given compare value. * Uses afterRender to ensure DOM is updated before focusing. * Public to allow parent components to manage cross-grid focus in dual-month mode. */ focusCell(compareValue: number): void; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵdir: i0.ɵɵDirectiveDeclaration, never, never, { "activeDate": { "alias": "activeDate"; "required": true; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "dateClass": { "alias": "dateClass"; "required": false; "isSignal": true; }; "previewStart": { "alias": "previewStart"; "required": false; "isSignal": true; }; "previewEnd": { "alias": "previewEnd"; "required": false; "isSignal": true; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; "isSignal": true; }; }, { "selectedChange": "selectedChange"; "activeDateChange": "activeDateChange"; "previewChange": "previewChange"; }, never, never, true, never>; } /** * Month view component displaying a 7x6 grid of days. * Shows the days of the current month with leading/trailing days from adjacent months. * * @example * ```html * * ``` * * @tokens `--color-muted-foreground` */ declare class ComCalendarMonthView extends CalendarViewBase { protected readonly view: CalendarView; /** Cell components for focus management */ protected readonly cellComponents: Signal[]>; /** Override first day of week (0=Sun, 1=Mon, ..., 6=Sat) */ readonly firstDayOfWeek: InputSignal; /** Grid index for dual-month display (0=left, 1=right) */ readonly gridIndex: InputSignal; /** Weekday header labels */ readonly weekdayHeaders: Signal; /** The month being displayed (0-indexed) */ readonly displayMonth: Signal; /** The year being displayed */ readonly displayYear: Signal; /** Grid of day cells (7 columns x 6 rows = 42 cells) */ readonly cells: Signal[][]>; /** Accessible label for the grid showing month and year */ readonly gridLabel: Signal; /** First date of the displayed month */ private readonly firstOfMonth; protected getActiveCompareValue(): number; /** * Checks if a cell is outside the current displayed month. */ isOutsideMonth(cell: CalendarCell): boolean; /** * Handles keyboard navigation for the month view. * - Arrow left/right: ±1 day * - Arrow up/down: ±7 days (one week) * - Home: First day of week * - End: Last day of week * - PageUp: Previous month * - PageDown: Next month */ onKeyNav(event: CalendarCellKeyNavEvent): void; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵcmp: i0.ɵɵComponentDeclaration, "com-calendar-month-view", never, { "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "gridIndex": { "alias": "gridIndex"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>; } /** * Year view component displaying a 4x3 grid of months. * Allows the user to select a month within the currently active year. * * @example * ```html * * ``` * * @tokens None - uses ComCalendarCell which provides all token styling */ declare class ComCalendarYearView extends CalendarViewBase { protected readonly view: CalendarView; /** Cell components for focus management */ protected readonly cellComponents: Signal[]>; /** The year being displayed */ readonly displayYear: Signal; /** Grid of month cells (4 columns x 3 rows = 12 months) */ readonly cells: Signal[][]>; /** Accessible label for the grid */ readonly gridLabel: Signal; protected getActiveCompareValue(): number; /** * Handles keyboard navigation for the year view. * - Arrow left/right: ±1 month * - Arrow up/down: ±4 months (one row) * - Home: January * - End: December * - PageUp: Previous year * - PageDown: Next year */ onKeyNav(event: CalendarCellKeyNavEvent): void; private isMonthSelected; private isMonthRangeStart; private isMonthRangeEnd; private isMonthRangeMiddle; private isMonthPreviewStart; private isMonthPreviewEnd; private isMonthPreviewMiddle; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵcmp: i0.ɵɵComponentDeclaration, "com-calendar-year-view", never, {}, {}, never, never, true, never>; } /** * Multi-year view component displaying a 4x6 grid of years (24 years total). * Allows the user to select a year within the displayed range. * * @example * ```html * * ``` * * @tokens None - uses ComCalendarCell which provides all token styling */ declare class ComCalendarMultiYearView extends CalendarViewBase { protected readonly view: CalendarView; /** Cell components for focus management */ protected readonly cellComponents: Signal[]>; /** The first year in the displayed range */ readonly startYear: Signal; /** The last year in the displayed range */ readonly endYear: Signal; /** Grid of year cells (4 columns x 6 rows = 24 years) */ readonly cells: Signal[][]>; /** Accessible label for the grid showing the year range */ readonly gridLabel: Signal; protected getActiveCompareValue(): number; /** * Handles keyboard navigation for the multi-year view. * - Arrow left/right: ±1 year * - Arrow up/down: ±4 years (one row) * - Home: First year in range * - End: Last year in range * - PageUp: Previous 24 years * - PageDown: Next 24 years */ onKeyNav(event: CalendarCellKeyNavEvent): void; private isYearSelected; private isYearRangeStart; private isYearRangeEnd; private isYearRangeMiddle; private isYearPreviewStart; private isYearPreviewEnd; private isYearPreviewMiddle; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵcmp: i0.ɵɵComponentDeclaration, "com-calendar-multi-year-view", never, {}, {}, never, never, true, never>; } /** * Result returned from a selection strategy's select method. */ interface SelectionResult { /** The new selection value */ selection: S; /** Whether the selection is complete (emit to consumer) */ isComplete: boolean; /** Optional: dates to highlight during incomplete selection */ preview?: DateRange | null; } /** * Abstract selection strategy that defines how dates are selected and previewed. * Implement this class to create custom selection behaviors. * * @typeParam D - The date type (e.g., Date, Luxon DateTime) * @typeParam S - The selection type (e.g., D | null, DateRange, D[]) */ declare abstract class CalendarSelectionStrategy { /** * Process a date selection. Called when user clicks a date cell. * @param date The clicked date * @param currentSelection The current selection state * @returns Object with new selection and whether selection is complete */ abstract select(date: D, currentSelection: S): SelectionResult; /** * Create a preview range based on current selection and hovered date. * Used for showing range preview while hovering. * @param activeDate The currently hovered date * @param currentSelection The current selection state * @returns DateRange for preview styling, or null if no preview */ abstract createPreview(activeDate: D | null, currentSelection: S): DateRange | null; /** * Check if a date is part of the current selection. * Used for styling cells. */ abstract isSelected(date: D, currentSelection: S): boolean; /** * Check if a date is the start of a selected range. */ abstract isRangeStart(date: D, currentSelection: S): boolean; /** * Check if a date is the end of a selected range. */ abstract isRangeEnd(date: D, currentSelection: S): boolean; /** * Check if a date is in the middle of a selected range. */ abstract isRangeMiddle(date: D, currentSelection: S): boolean; } /** Injection token for the selection strategy */ declare const CALENDAR_SELECTION_STRATEGY: InjectionToken>; /** * Selection strategy for single date selection. * * Behavior: * - Click date → immediately selects it * - No preview range * - Output: single date D * * @example * ```typescript * @Component({ * providers: [ * { provide: CALENDAR_SELECTION_STRATEGY, useClass: SingleSelectionStrategy } * ], * template: `` * }) * export class SinglePickerComponent { * onSelect(date: Date) { * console.log('Selected:', date); * } * } * ``` */ declare class SingleSelectionStrategy extends CalendarSelectionStrategy { private readonly dateAdapter; select(date: D, _currentSelection: D | null): SelectionResult; createPreview(_activeDate: D | null, _currentSelection: D | null): DateRange | null; isSelected(date: D, currentSelection: D | null): boolean; isRangeStart(_date: D, _currentSelection: D | null): boolean; isRangeEnd(_date: D, _currentSelection: D | null): boolean; isRangeMiddle(_date: D, _currentSelection: D | null): boolean; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵprov: i0.ɵɵInjectableDeclaration>; } /** * Selection strategy for date range selection. * * Behavior: * - First click → sets range start, selection incomplete * - Second click → sets range end, selection complete * - If second date is before first, swap them * - Hovering after first click shows preview range * - Output: DateRange * * @example * ```typescript * @Component({ * providers: [ * { provide: CALENDAR_SELECTION_STRATEGY, useClass: RangeSelectionStrategy } * ], * template: ` * * ` * }) * export class RangePickerComponent { * selectedRange = signal | null>(null); * * onRangeSelect(range: DateRange) { * this.selectedRange.set(range); * } * } * ``` */ declare class RangeSelectionStrategy extends CalendarSelectionStrategy | null> { private readonly dateAdapter; select(date: D, currentSelection: DateRange | null): SelectionResult | null>; createPreview(activeDate: D | null, currentSelection: DateRange | null): DateRange | null; isSelected(date: D, currentSelection: DateRange | null): boolean; isRangeStart(date: D, currentSelection: DateRange | null): boolean; isRangeEnd(date: D, currentSelection: DateRange | null): boolean; isRangeMiddle(date: D, currentSelection: DateRange | null): boolean; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵprov: i0.ɵɵInjectableDeclaration>; } /** * Selection strategy for multiple date selection. * * Behavior: * - Click date → toggles it in/out of selection array * - Each click is complete (emits immediately) * - No preview range * - Output: D[] * * @example * ```typescript * @Component({ * providers: [ * { provide: CALENDAR_SELECTION_STRATEGY, useClass: MultiSelectionStrategy } * ], * template: `` * }) * export class MultiPickerComponent { * selectedDates = signal([]); * * onMultiSelect(dates: Date[]) { * this.selectedDates.set(dates); * } * } * ``` */ declare class MultiSelectionStrategy extends CalendarSelectionStrategy { private readonly dateAdapter; select(date: D, currentSelection: D[]): SelectionResult; createPreview(_activeDate: D | null, _currentSelection: D[]): DateRange | null; isSelected(date: D, currentSelection: D[]): boolean; isRangeStart(_date: D, _currentSelection: D[]): boolean; isRangeEnd(_date: D, _currentSelection: D[]): boolean; isRangeMiddle(_date: D, _currentSelection: D[]): boolean; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵprov: i0.ɵɵInjectableDeclaration>; } /** * Selection strategy for week selection. * * Behavior: * - Click any day → selects the entire week containing that day * - Week starts based on DateAdapter.getFirstDayOfWeek() * - Single click completes selection * - Output: DateRange (Monday–Sunday or Sunday–Saturday) * * @example * ```typescript * @Component({ * providers: [ * { provide: CALENDAR_SELECTION_STRATEGY, useClass: WeekSelectionStrategy } * ], * template: `` * }) * export class WeekPickerComponent { * onWeekSelect(week: DateRange) { * console.log('Week:', week.start, 'to', week.end); * } * } * ``` */ declare class WeekSelectionStrategy extends CalendarSelectionStrategy | null> { private readonly dateAdapter; select(date: D, _currentSelection: DateRange | null): SelectionResult | null>; createPreview(activeDate: D | null, _currentSelection: DateRange | null): DateRange | null; isSelected(date: D, currentSelection: DateRange | null): boolean; isRangeStart(date: D, currentSelection: DateRange | null): boolean; isRangeEnd(date: D, currentSelection: DateRange | null): boolean; isRangeMiddle(date: D, currentSelection: DateRange | null): boolean; /** Compute the week range for a given date */ private getWeekRange; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵprov: i0.ɵɵInjectableDeclaration>; } /** * Provides the native JavaScript Date adapter for the calendar. * This is required for the calendar component to work with native Date objects. * * @example * ```typescript * @Component({ * providers: [provideNativeDateAdapter()], * }) * export class MyComponent {} * ``` */ declare function provideNativeDateAdapter(): Provider; /** * Provides the single selection strategy (default behavior). * Allows selecting one date at a time. * * @example * ```typescript * @Component({ * providers: [ * provideNativeDateAdapter(), * provideSingleSelectionStrategy(), * ], * }) * export class MyComponent {} * ``` */ declare function provideSingleSelectionStrategy(): Provider; /** * Provides the range selection strategy. * Allows selecting a start and end date to create a date range. * * @example * ```typescript * @Component({ * providers: [ * provideNativeDateAdapter(), * provideRangeSelectionStrategy(), * ], * }) * export class MyComponent { * range = signal | null>(null); * } * ``` */ declare function provideRangeSelectionStrategy(): Provider; /** * Provides the multi selection strategy. * Allows selecting multiple individual dates. * * @example * ```typescript * @Component({ * providers: [ * provideNativeDateAdapter(), * provideMultiSelectionStrategy(), * ], * }) * export class MyComponent { * dates = signal([]); * } * ``` */ declare function provideMultiSelectionStrategy(): Provider; /** * Provides the week selection strategy. * Allows selecting entire weeks at a time. * * @example * ```typescript * @Component({ * providers: [ * provideNativeDateAdapter(), * provideWeekSelectionStrategy(), * ], * }) * export class MyComponent { * range = signal | null>(null); * } * ``` */ declare function provideWeekSelectionStrategy(): Provider; export { CALENDAR_SELECTION_STRATEGY, CalendarSelectionStrategy, CalendarViewBase, ComCalendar, ComCalendarCell, ComCalendarHeader, ComCalendarMonthView, ComCalendarMultiYearView, ComCalendarYearView, DATE_ADAPTER, DAYS_PER_WEEK, DateAdapter, MONTHS_PER_ROW, MultiSelectionStrategy, NativeDateAdapter, RangeSelectionStrategy, SingleSelectionStrategy, WEEKS_PER_MONTH, WeekSelectionStrategy, YEARS_PER_PAGE, YEARS_PER_ROW, calendarCellVariants, calendarCellWrapperVariants, calendarHeaderButtonVariants, calendarHeaderVariants, calendarVariants, createCalendarCell, createDateRange, createGrid, getMultiYearStartingYear, getWeekdayHeaders, isDateDisabled, isMonthDisabled, isYearDisabled, navigateGrid, provideMultiSelectionStrategy, provideNativeDateAdapter, provideRangeSelectionStrategy, provideSingleSelectionStrategy, provideWeekSelectionStrategy }; export type { CalendarCell, CalendarCellConfig, CalendarCellKeyNavEvent, CalendarCellState, CalendarCellVariants, CalendarCellWrapperVariants, CalendarHeaderButtonVariants, CalendarHeaderVariants, CalendarVariants, CalendarView, DateClassFn, DateFilterFn, DateRange, NameStyle, SelectionResult, WeekdayHeader };