import * as _angular_core from '@angular/core'; import { Provider, OnDestroy, InjectionToken, InjectOptions } from '@angular/core'; import * as ng_primitives_date_picker from 'ng-primitives/date-picker'; import * as ng_primitives_state from 'ng-primitives/state'; import { InjectedState } from 'ng-primitives/state'; import { FocusOrigin } from '@angular/cdk/a11y'; import { BooleanInput } from '@angular/cdk/coercion'; /** * The first day of the week as a number (0-7). * - `1` = Monday * - `2` = Tuesday * - `3` = Wednesday * - `4` = Thursday * - `5` = Friday * - `6` = Saturday * - `7` = Sunday */ type NgpDatePickerFirstDayOfWeekNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7; /** * The first day of the week as a number (0-7). * - `1` = Monday * - `2` = Tuesday * - `3` = Wednesday * - `4` = Thursday * - `5` = Friday * - `6` = Saturday * - `7` = Sunday */ type NgpDatePickerFirstDayOfWeekNumberInput = NgpDatePickerFirstDayOfWeekNumber | `${NgpDatePickerFirstDayOfWeekNumber}`; /** * Transform the first day of the week input value to a number (0-7) for the start of the week in * the calendar. * @param firstDayOfWeek The first day of the week input value (number). * @returns The first day of the week number. */ declare function transformToFirstDayOfWeekNumber(firstDayOfWeek: NgpDatePickerFirstDayOfWeekNumberInput): NgpDatePickerFirstDayOfWeekNumber; interface NgpDatePickerConfig { /** * Define the first day of the week for the date picker calendar. * @default 7 (Sunday) */ firstDayOfWeek: NgpDatePickerFirstDayOfWeekNumber; } /** * Provide the default DatePicker / DateRangePicker configuration * @param config The DatePicker / DateRangePicker configuration * @returns The provider */ declare function provideDatePickerConfig(config: Partial): Provider[]; /** * Inject the DatePicker / DateRangePicker configuration * @returns The global DatePicker / DateRangePicker configuration */ declare function injectDatePickerConfig(): NgpDatePickerConfig; /** * A structural directive that renders a cell in the date picker grid. */ declare class NgpDatePickerCellRender implements OnDestroy { /** * Access the template ref for the cell. */ private readonly templateRef; /** * Access the view container ref. */ private readonly viewContainerRef; /** * Access the dates in the week. */ private readonly dates; /** * Store the view refs for the dates. */ private readonly viewRefs; static ngTemplateContextGuard(_: NgpDatePickerCellRender, context: unknown): context is NgpDatePickerCellContext; constructor(); /** * Render the dates in the week. */ private renderDates; /** * Destroy the view refs. */ ngOnDestroy(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[ngpDatePickerCellRender]", ["ngpDatePickerCellRender"], {}, {}, never, never, true, never>; } interface NgpDatePickerCellContext { $implicit: T; } declare const NgpDatePickerCellRenderToken: InjectionToken>; /** * Inject the DatePickerCell directive instance */ declare function injectDatePickerCellRender(): NgpDatePickerCellRender; /** * Inject current cell date */ declare function injectDatePickerCellDate(): T; /** * A cell in the date picker grid. */ declare class NgpDatePickerCell { /** * Access the date picker. */ private readonly state; /** * Access the child date picker date button. */ protected readonly datePickerButton: _angular_core.Signal | undefined>; /** * Access the label id. */ protected readonly labelId: _angular_core.Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * A button that represents a date in the date picker grid. */ declare class NgpDatePickerDateButton implements OnDestroy { /** * Access the element ref. */ private readonly elementRef; /** * Access the focus monitor. */ private readonly focusMonitor; /** * Access the date picker state. */ private readonly state; /** * Access the date adapter. */ private readonly dateAdapter; /** * The date this cell represents. */ private readonly date; /** * Determine if this is the focused date. */ protected readonly focused: _angular_core.Signal; /** * Determine if this is the selected date. * @internal */ readonly selected: _angular_core.Signal; /** * Determine if this is the start date of the range. */ protected readonly start: _angular_core.Signal; /** * Determine if this is the end date of the range. */ protected readonly end: _angular_core.Signal; /** * Determine if this is between the start and end dates of the range. */ protected readonly betweenRange: _angular_core.Signal; /** * Determine if this date is outside the current month. */ protected readonly outside: _angular_core.Signal; /** * Determine if this date is today. */ protected readonly today: _angular_core.Signal; /** * Determine if this date is disabled. * @internal */ readonly disabled: _angular_core.Signal; /** * Determine if the element is a button. */ protected readonly isButton: boolean; constructor(); ngOnDestroy(): void; /** * When the button is clicked, select the date. */ protected select(event?: Event): void; /** * Focus if this is the current focused date. * @internal */ focus(): void; /** * Focus the previous cell. */ protected focusPrevious(event: Event): void; /** * Focus the next cell. */ protected focusNext(event: Event): void; /** * Focus the above cell. */ protected focusAbove(event: Event): void; /** * Focus the below cell. */ protected focusBelow(event: Event): void; /** * Focus the first date of the month. */ protected focusFirst(event: Event): void; /** * Focus the last date of the month. */ protected focusLast(event: Event): void; /** * Focus the same date in the previous month. */ protected focusPreviousMonth(event: Event): void; /** * Focus the same date in the next month. */ protected focusNextMonth(event: Event): void; private focusDate; /** * Get the direction of the element. */ private getDirection; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[ngpDatePickerDateButton]", ["ngpDatePickerDateButton"], {}, {}, never, never, true, never>; } declare const NgpDatePickerDateButtonToken: InjectionToken>; /** * Inject the DatePickerDateButton directive instance */ declare function injectDatePickerDateButton(): NgpDatePickerDateButton; /** * The grid that contains the days of the month. */ declare class NgpDatePickerGrid { /** * Access the date picker state. */ protected readonly state: ng_primitives_state.InjectedState | ng_primitives_date_picker.NgpDateRangePicker>; /** * Determine the id for the label. */ protected readonly labelId: _angular_core.Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[ngpDatePickerGrid]", ["ngpDatePickerGrid"], {}, {}, never, never, true, never>; } /** * The label that displays the current month and year typically in the header of the date picker. This will be announced by screen readers when the date changes. */ declare class NgpDatePickerLabel { /** * Access the date picker. */ protected readonly state: ng_primitives_state.InjectedState | ng_primitives_date_picker.NgpDateRangePicker>; /** * Define a unique id for the label. */ readonly id: _angular_core.InputSignal; /** * Define the aria live attribute. */ readonly ariaLive: _angular_core.InputSignal; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[ngpDatePickerLabel]", ["ngpDatePickerLabel"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLive": { "alias": "aria-live"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>; } declare const NgpDatePickerLabelToken: InjectionToken>; /** * Inject the DatePickerLabel directive instance */ declare function injectDatePickerLabel(): NgpDatePickerLabel; /** * A button that navigates to the next month. */ declare class NgpDatePickerNextMonth { /** * Access the element ref. */ private readonly elementRef; /** * Access the date adapter. */ private readonly dateAdapter; /** * Access the date picker state. */ private readonly state; /** * Determine if this is a button element */ protected readonly isButton: boolean; /** * Determine if the next month is disabled. * @internal */ readonly disabled: _angular_core.Signal; constructor(); /** * Navigate to the next month. */ protected navigateToNextMonth(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[ngpDatePickerNextMonth]", ["ngpDatePickerNextMonth"], {}, {}, never, never, true, never>; } /** * A button that navigates to the previous month. */ declare class NgpDatePickerPreviousMonth { /** * Access the element ref. */ private readonly elementRef; /** * Access the date adapter. */ private readonly dateAdapter; /** * Access the date picker state. */ private readonly state; /** * Determine if this is a button element */ protected readonly isButton: boolean; /** * Determine if the next month is disabled. * @internal */ readonly disabled: _angular_core.Signal; constructor(); /** * Navigate to the previous month. */ protected navigateToPreviouMonth(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[ngpDatePickerPreviousMonth]", ["ngpDatePickerPreviousMonth"], {}, {}, never, never, true, never>; } /** * A structural directive that renders a row of weekdays in the date picker grid. */ declare class NgpDatePickerRowRender implements OnDestroy { /** * Access the date adapter. */ private readonly dateAdapter; /** * Access the date picker. */ private readonly state; /** * Access the template ref for the cell. */ private readonly templateRef; /** * Access the view container ref. */ private readonly viewContainerRef; /** * Get all the days to display, this is the days of the current month * and the days of the previous and next month to fill the grid. */ protected readonly days: _angular_core.Signal; protected readonly weeks: _angular_core.Signal; /** * Store the embedded view refs of each rendered row. */ private readonly viewRefs; /** * Store the previously rendered month. */ private previousMonth; constructor(); ngOnDestroy(): void; /** * Render the row. */ private renderRows; /** * Destroy the row. */ private destroyRows; /** * Get the offset of the first day of the week. * @param firstCalendarDay The first day of the calendar without the offset. * @returns The offset of the first day of the week. * * @internal */ getFirstDayOfWeekOffset(firstCalendarDay: T): number; /** * Get the offset of the last day of the week. * @param lastCalendarDay The last day of the calendar without the offset. * @returns The offset of the last day of the week. * * @internal */ getLastDayOfWeekOffset(lastCalendarDay: T): number; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[ngpDatePickerRowRender]", ["ngpDatePickerRowRender"], {}, {}, never, never, true, never>; } declare const NgpDatePickerRowRenderToken: InjectionToken>; /** * Inject the DatePickerRowRender directive instance */ declare function injectDatePickerRowRender(): NgpDatePickerRowRender; /** * Inject current week days */ declare function injectDatePickerWeek(): T[]; /** * The outermost container for the date picker. */ declare class NgpDatePicker { /** * Access the date adapter. */ private readonly dateAdapter; /** * Access the date picker config. */ private readonly config; /** * Access the injector. */ private readonly injector; /** * The minimum date that can be selected. */ readonly min: _angular_core.InputSignal; /** * The maximum date that can be selected. */ readonly max: _angular_core.InputSignal; /** * Determine if the date picker is disabled. */ readonly disabled: _angular_core.InputSignalWithTransform; /** * A function that is called to determine if a specific date should be disabled. */ readonly dateDisabled: _angular_core.InputSignal<(date: T) => boolean>; /** * Sets which day starts the week in the calendar. * Accepts 0-7 where 1=Monday, 2=Tuesday, 3=Wednesday, 4=Thursday, 5=Friday, 6=Saturday, 7=Sunday. * Defaults to NgpDatePickerConfig.firstDayOfWeek (default 7 if not overridden). * Note: Update calendar header column order when changing from Sunday start. * @default 7 (Sunday) */ readonly firstDayOfWeek: _angular_core.InputSignalWithTransform; /** * The selected value. */ readonly date: _angular_core.InputSignal; /** * Emit when the date changes. */ readonly dateChange: _angular_core.OutputEmitterRef; /** * The focused value. */ readonly focusedDate: _angular_core.InputSignal; /** * Emit when the focused date changes. */ readonly focusedDateChange: _angular_core.OutputEmitterRef; /** * Detect the label element. * @internal */ readonly label: _angular_core.Signal | undefined>; /** * Access all the date picker buttons */ private readonly buttons; /** * The date picker state. */ protected readonly state: ng_primitives_state.CreatedState>; /** * Set the focused date. * @param date The date to focus. * @internal */ setFocusedDate(date: T, origin: FocusOrigin | undefined, direction: 'forward' | 'backward'): void; /** * Register a date button. * @param button The date button to register. * @internal */ registerButton(button: NgpDatePickerDateButton): void; /** * Unregister a date button. * @param button The date button to unregister. * @internal */ unregisterButton(button: NgpDatePickerDateButton): void; /** * Select a date. * @param date The date to select. * @param preserveTime Whether to preserve time components from existing selected date. * @internal */ select(date: T, preserveTime?: boolean): void; /** * Determine if a date is selected. * @param date The date to check. * @returns True if the date is selected, false otherwise. * @internal */ isSelected(date: T): boolean; /** * Determine if a date is the start of a range. In a date picker, this is always false. * @param date The date to check. * @returns Always false. * @internal */ isStartOfRange(_: T): boolean; /** * Determine if a date is the end of a range. In a date picker, this is always false. * @param date The date to check. * @returns Always false. * @internal */ isEndOfRange(_: T): boolean; /** * Determine if a date is between the start and end dates. In a date picker, this is always false. * @param date The date to check. * @returns True if the date is between the start and end dates, false otherwise. * @internal */ isBetweenRange(_: T): boolean; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[ngpDatePicker]", ["ngpDatePicker"], { "min": { "alias": "ngpDatePickerMin"; "required": false; "isSignal": true; }; "max": { "alias": "ngpDatePickerMax"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpDatePickerDisabled"; "required": false; "isSignal": true; }; "dateDisabled": { "alias": "ngpDatePickerDateDisabled"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "ngpDatePickerFirstDayOfWeek"; "required": false; "isSignal": true; }; "date": { "alias": "ngpDatePickerDate"; "required": false; "isSignal": true; }; "focusedDate": { "alias": "ngpDatePickerFocusedDate"; "required": false; "isSignal": true; }; }, { "dateChange": "ngpDatePickerDateChange"; "focusedDateChange": "ngpDatePickerFocusedDateChange"; }, ["label"], never, true, never>; } declare class NgpDateRangePicker { private readonly dateAdapter; /** * Access the date range picker config. */ private readonly config; /** * Access the injector. */ private readonly injector; /** * The minimum date that can be selected. */ readonly min: _angular_core.InputSignal; /** * The maximum date that can be selected. */ readonly max: _angular_core.InputSignal; /** * Determine if the date picker is disabled. */ readonly disabled: _angular_core.InputSignalWithTransform; /** * A function that is called to determine if a specific date should be disabled. */ readonly dateDisabled: _angular_core.InputSignal<(date: T) => boolean>; /** * Sets which day starts the week in the calendar. * Accepts 0-7 where 1=Monday, 2=Tuesday, 3=Wednesday, 4=Thursday, 5=Friday, 6=Saturday, 7=Sunday. * Defaults to NgpDatePickerConfig.firstDayOfWeek (default 7 if not overridden). * Note: Update calendar header column order when changing from Sunday start. * @default 7 (Sunday) */ readonly firstDayOfWeek: _angular_core.InputSignalWithTransform; /** * The selected start date */ readonly startDate: _angular_core.InputSignal; /** * Emit when the date changes. */ readonly startDateChange: _angular_core.OutputEmitterRef; /** * The selected end date */ readonly endDate: _angular_core.InputSignal; /** * Emit when the end date changes. */ readonly endDateChange: _angular_core.OutputEmitterRef; /** * The focused value. */ readonly focusedDate: _angular_core.InputSignal; /** * Emit when the focused date changes. */ readonly focusedDateChange: _angular_core.OutputEmitterRef; /** * Detect the label element. * @internal */ readonly label: _angular_core.Signal | undefined>; /** * Access all the date picker buttons */ private readonly buttons; /** * The date range picker state. */ protected readonly state: ng_primitives_state.CreatedState>; /** * Set the focused date. * @param date The date to focus. * @internal */ setFocusedDate(date: T, origin: FocusOrigin | undefined, direction: 'forward' | 'backward'): void; /** * Register a date button. * @param button The date button to register. * @internal */ registerButton(button: NgpDatePickerDateButton): void; /** * Unregister a date button. * @param button The date button to unregister. * @internal */ unregisterButton(button: NgpDatePickerDateButton): void; /** * Select a date. * @param date The date to select. * @param preserveTime Whether to preserve time components from existing selected dates. * @internal */ /** * Handles the selection of a date within the date range picker. * * Selection logic: * - If neither a start date nor an end date is selected: * - Sets the selected date as the start date. * - If a start date is selected but no end date: * - If the selected date is after the start date, sets it as the end date. * - If the selected date is before the start date, sets the selected date as the start date * and the previous start date as the end date. * - If the selected date is the same as the start date, sets the selected date as the end date * to select a single date. * - If both start and end dates are already selected: * - Resets the selection, setting the selected date as the new start date and clearing the end date. * * @param date The date to select. * @param preserveTime Whether to preserve time components from existing selected dates. */ select(date: T, preserveTime?: boolean): void; /** * Determine if a date is selected. A date is selected if it is either the start date or the end date. * @param date The date to check. * @returns True if the date is selected, false otherwise. * @internal */ isSelected(date: T): boolean; /** * Determine if a date is the start of a range. * @param date The date to check. * @returns Always false. * @internal */ isStartOfRange(date: T): boolean; /** * Determine if a date is the end of a range. * @param date The date to check. * @returns Always false. * @internal */ isEndOfRange(date: T): boolean; /** * Determine if a date is between the start and end dates. * @param date The date to check. * @returns True if the date is between the start and end dates, false otherwise. * @internal */ isBetweenRange(date: T): boolean; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[ngpDateRangePicker]", ["ngpDateRangePicker"], { "min": { "alias": "ngpDateRangePickerMin"; "required": false; "isSignal": true; }; "max": { "alias": "ngpDateRangePickerMax"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpDateRangePickerDisabled"; "required": false; "isSignal": true; }; "dateDisabled": { "alias": "ngpDateRangePickerDateDisabled"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "ngpDateRangePickerFirstDayOfWeek"; "required": false; "isSignal": true; }; "startDate": { "alias": "ngpDateRangePickerStartDate"; "required": false; "isSignal": true; }; "endDate": { "alias": "ngpDateRangePickerEndDate"; "required": false; "isSignal": true; }; "focusedDate": { "alias": "ngpDateRangePickerFocusedDate"; "required": false; "isSignal": true; }; }, { "startDateChange": "ngpDateRangePickerStartDateChange"; "endDateChange": "ngpDateRangePickerEndDateChange"; "focusedDateChange": "ngpDateRangePickerFocusedDateChange"; }, ["label"], never, true, never>; } declare const provideDatePickerState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider; declare const injectDatePickerState: (injectOptions?: InjectOptions) => InjectedState>; /** * Provides the DateRangePicker state. */ declare const provideDateRangePickerState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider; /** * Injects the DateRangePicker state. */ declare const injectDateRangePickerState: (injectOptions?: InjectOptions) => InjectedState>; export { NgpDatePicker, NgpDatePickerCell, NgpDatePickerCellRender, NgpDatePickerCellRenderToken, NgpDatePickerDateButton, NgpDatePickerDateButtonToken, NgpDatePickerGrid, NgpDatePickerLabel, NgpDatePickerLabelToken, NgpDatePickerNextMonth, NgpDatePickerPreviousMonth, NgpDatePickerRowRender, NgpDatePickerRowRenderToken, NgpDateRangePicker, injectDatePickerCellDate, injectDatePickerCellRender, injectDatePickerConfig, injectDatePickerDateButton, injectDatePickerLabel, injectDatePickerRowRender, injectDatePickerState, injectDatePickerWeek, injectDateRangePickerState, provideDatePickerConfig, provideDatePickerState, provideDateRangePickerState, transformToFirstDayOfWeekNumber }; export type { NgpDatePickerFirstDayOfWeekNumber, NgpDatePickerFirstDayOfWeekNumberInput };