@ngxmc/datetime-picker

import * as _angular_core from '@angular/core'; import { OnDestroy, AfterViewChecked, ElementRef, NgZone, InjectionToken, FactoryProvider, AfterContentInit, OnChanges, ChangeDetectorRef, SimpleChanges, AfterViewInit, OnInit, DoCheck, Injector, EventEmitter, ViewContainerRef, TemplateRef } from '@angular/core'; import { ComponentType, Portal, TemplatePortal } from '@angular/cdk/portal'; import { DateAdapter, MatDateFormats, ThemePalette, ErrorStateMatcher } from '@angular/material/core'; import { Observable, Subject } from 'rxjs'; import { Directionality } from '@angular/cdk/bidi'; import { FocusOrigin } from '@angular/cdk/a11y'; import { BooleanInput } from '@angular/cdk/coercion'; import * as _angular_forms from '@angular/forms'; import { ControlValueAccessor, Validator, ValidatorFn, AbstractControl, ValidationErrors, NgForm, FormGroupDirective, NgControl, ControlContainer, FormControl } from '@angular/forms'; import { MatFormFieldControl } from '@angular/material/form-field'; import { AnimationEvent } from '@angular/animations'; import { Overlay, ScrollStrategy } from '@angular/cdk/overlay'; import { MatButton } from '@angular/material/button'; import { MatCalendarView, MatCalendar } from '@angular/material/datepicker'; import { MatDialogRef } from '@angular/material/dialog'; /** Extra CSS classes that can be associated with a calendar cell. */ type NgxMatCalendarCellCssClasses = string | string[] | Set<string> | { [key: string]: any; }; /** Function that can generate the extra classes that should be added to a calendar cell. */ type NgxMatCalendarCellClassFunction<D> = (date: D, view: 'month' | 'year' | 'multi-year') => NgxMatCalendarCellCssClasses; /** * An internal class that represents the data corresponding to a single calendar cell. * @docs-private */ declare class NgxMatCalendarCell<D = any> { value: number; displayValue: string; ariaLabel: string; enabled: boolean; cssClasses: NgxMatCalendarCellCssClasses; compareValue: number; rawValue?: D; constructor(value: number, displayValue: string, ariaLabel: string, enabled: boolean, cssClasses?: NgxMatCalendarCellCssClasses, compareValue?: number, rawValue?: D); } /** Event emitted when a date inside the calendar is triggered as a result of a user action. */ interface NgxMatCalendarUserEvent<D> { value: D; event: Event; } declare class NgxMatCalendarBody<D = any> implements OnDestroy, AfterViewChecked { private _elementRef; private _ngZone; private _platform; /** * Used to skip the next focus event when rendering the preview range. * We need a flag like this, because some browsers fire focus events asynchronously. */ private _skipNextFocus; /** * Used to focus the active cell after change detection has run. */ private _focusActiveCellAfterViewChecked; /** The label for the table. (e.g. "Jan 2017"). */ label: _angular_core.InputSignal<string>; /** The cells to display in the table. */ rows: _angular_core.InputSignal<NgxMatCalendarCell<any>[][]>; /** The value in the table that corresponds to today. */ todayValue: _angular_core.InputSignal<number>; /** Start value of the selected date range. */ startValue: _angular_core.InputSignal<number>; /** End value of the selected date range. */ endValue: _angular_core.InputSignal<number>; /** The minimum number of free cells needed to fit the label in the first row. */ labelMinRequiredCells: _angular_core.InputSignal<number>; /** The number of columns in the table. */ numCols: _angular_core.InputSignal<number>; /** The cell number of the active cell in the table. */ activeCell: _angular_core.InputSignal<number>; ngAfterViewChecked(): void; /** Whether a range is being selected. */ isRange: _angular_core.InputSignal<boolean>; /** * The aspect ratio (width / height) to use for the cells in the table. This aspect ratio will be * maintained even as the table resizes. */ cellAspectRatio: _angular_core.InputSignal<number>; /** Start of the comparison range. */ comparisonStart: _angular_core.InputSignal<number>; /** End of the comparison range. */ comparisonEnd: _angular_core.InputSignal<number>; /** Start of the preview range. */ previewStart: _angular_core.InputSignal<number>; /** End of the preview range. */ previewEnd: _angular_core.InputSignal<number>; /** ARIA Accessible name of the `<input matStartDate/>` */ startDateAccessibleName: _angular_core.InputSignal<string>; /** ARIA Accessible name of the `<input matEndDate/>` */ endDateAccessibleName: _angular_core.InputSignal<string>; /** Emits when a new value is selected. */ readonly selectedValueChange: _angular_core.OutputEmitterRef<NgxMatCalendarUserEvent<number>>; /** Emits when the preview has changed as a result of a user action. */ readonly previewChange: _angular_core.OutputEmitterRef<NgxMatCalendarUserEvent<NgxMatCalendarCell<any>>>; readonly activeDateChange: _angular_core.OutputEmitterRef<NgxMatCalendarUserEvent<number>>; /** Emits the date at the possible start of a drag event. */ readonly dragStarted: _angular_core.OutputEmitterRef<NgxMatCalendarUserEvent<D>>; /** Emits the date at the conclusion of a drag, or null if mouse was not released on a date. */ readonly dragEnded: _angular_core.OutputEmitterRef<NgxMatCalendarUserEvent<D>>; /** The number of blank cells to put at the beginning for the first row. */ _firstRowOffset: _angular_core.Signal<number>; /** Padding for the individual date cells. */ _cellPadding: _angular_core.Signal<string>; /** Width of an individual cell. */ _cellWidth: _angular_core.Signal<string>; private _didDragSinceMouseDown; constructor(_elementRef: ElementRef<HTMLElement>, _ngZone: NgZone); /** Called when a cell is clicked. */ _cellClicked(cell: NgxMatCalendarCell, event: MouseEvent): void; _emitActiveDateChange(cell: NgxMatCalendarCell, event: FocusEvent): void; /** Returns whether a cell should be marked as selected. */ _isSelected(value: number): boolean; ngOnDestroy(): void; /** Returns whether a cell is active. */ _isActiveCell(rowIndex: number, colIndex: number): boolean; _focusActiveCell(movePreview?: boolean): void; /** Focuses the active cell after change detection has run and the microtask queue is empty. */ _scheduleFocusActiveCellAfterViewChecked(): void; /** Gets whether a value is the start of the main range. */ _isRangeStart(value: number): boolean; /** Gets whether a value is the end of the main range. */ _isRangeEnd(value: number): boolean; /** Gets whether a value is within the currently-selected range. */ _isInRange(value: number): boolean; /** Gets whether a value is the start of the comparison range. */ _isComparisonStart(value: number): boolean; /** Whether the cell is a start bridge cell between the main and comparison ranges. */ _isComparisonBridgeStart(value: number, rowIndex: number, colIndex: number): boolean; /** Whether the cell is an end bridge cell between the main and comparison ranges. */ _isComparisonBridgeEnd(value: number, rowIndex: number, colIndex: number): boolean; /** Gets whether a value is the end of the comparison range. */ _isComparisonEnd(value: number): boolean; /** Gets whether a value is within the current comparison range. */ _isInComparisonRange(value: number): boolean; _isComparisonIdentical(value: number): boolean; /** Gets whether a value is the start of the preview range. */ _isPreviewStart(value: number): boolean; /** Gets whether a value is the end of the preview range. */ _isPreviewEnd(value: number): boolean; /** Gets whether a value is inside the preview range. */ _isInPreview(value: number): boolean; /** Gets ids of aria descriptions for the start and end of a date range. */ _getDescribedby(value: number): string | null; /** * Event handler for when the user enters an element * inside the calendar body (e.g. by hovering in or focus). */ private _enterHandler; private _touchmoveHandler; /** * Event handler for when the user's pointer leaves an element * inside the calendar body (e.g. by hovering out or blurring). */ private _leaveHandler; /** * Triggered on mousedown or touchstart on a date cell. * Respsonsible for starting a drag sequence. */ private _mousedownHandler; /** Triggered on mouseup anywhere. Respsonsible for ending a drag sequence. */ private _mouseupHandler; /** Triggered on touchend anywhere. Respsonsible for ending a drag sequence. */ private _touchendHandler; /** Finds the MatCalendarCell that corresponds to a DOM node. */ private _getCellFromElement; private _id; _startDateLabelId: string; _endDateLabelId: string; static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxMatCalendarBody<any>, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxMatCalendarBody<any>, "[ngx-mat-calendar-body]", ["matCalendarBody"], { "label": { "alias": "label"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "todayValue": { "alias": "todayValue"; "required": false; "isSignal": true; }; "startValue": { "alias": "startValue"; "required": false; "isSignal": true; }; "endValue": { "alias": "endValue"; "required": false; "isSignal": true; }; "labelMinRequiredCells": { "alias": "labelMinRequiredCells"; "required": false; "isSignal": true; }; "numCols": { "alias": "numCols"; "required": false; "isSignal": true; }; "activeCell": { "alias": "activeCell"; "required": false; "isSignal": true; }; "isRange": { "alias": "isRange"; "required": false; "isSignal": true; }; "cellAspectRatio": { "alias": "cellAspectRatio"; "required": false; "isSignal": true; }; "comparisonStart": { "alias": "comparisonStart"; "required": false; "isSignal": true; }; "comparisonEnd": { "alias": "comparisonEnd"; "required": false; "isSignal": true; }; "previewStart": { "alias": "previewStart"; "required": false; "isSignal": true; }; "previewEnd": { "alias": "previewEnd"; "required": false; "isSignal": true; }; "startDateAccessibleName": { "alias": "startDateAccessibleName"; "required": false; "isSignal": true; }; "endDateAccessibleName": { "alias": "endDateAccessibleName"; "required": false; "isSignal": true; }; }, { "selectedValueChange": "selectedValueChange"; "previewChange": "previewChange"; "activeDateChange": "activeDateChange"; "dragStarted": "dragStarted"; "dragEnded": "dragEnded"; }, never, never, true, never>; } /** A class representing a range of dates. */ declare class NgxDateRange<D> { /** The start date of the range. */ readonly start: D | null; /** The end date of the range. */ readonly end: D | null; /** * Ensures that objects with a `start` and `end` property can't be assigned to a variable that * expects a `DateRange` */ private _disableStructuralEquivalency; constructor( /** The start date of the range. */ start: D | null, /** The end date of the range. */ end: D | null); } /** * Conditionally picks the date type, if a DateRange is passed in. * @docs-private */ type NgxExtractDateTypeFromSelection<T> = T extends NgxDateRange<infer D> ? D : NonNullable<T>; /** * Event emitted by the date selection model when its selection changes. * @docs-private */ interface NgxDateSelectionModelChange<S> { /** New value for the selection. */ selection: S; /** Object that triggered the change. */ source: unknown; /** Previous value */ oldValue?: S; } /** * A selection model containing a date selection. * @docs-private */ declare abstract class NgxMatDateSelectionModel<S, D = NgxExtractDateTypeFromSelection<S>> implements OnDestroy { /** The current selection. */ readonly selection: S; protected _adapter: DateAdapter<D>; private readonly _selectionChanged; /** Emits when the selection has changed. */ selectionChanged: Observable<NgxDateSelectionModelChange<S>>; protected constructor( /** The current selection. */ selection: S, _adapter: DateAdapter<D>); /** * Updates the current selection in the model. * @param value New selection that should be assigned. * @param source Object that triggered the selection change. */ updateSelection(value: S, source: unknown): void; ngOnDestroy(): void; protected _isValidDateInstance(date: D): boolean; /** Adds a date to the current selection. */ abstract add(date: D | null): void; /** Checks whether the current selection is valid. */ abstract isValid(): boolean; /** Checks whether the current selection is complete. */ abstract isComplete(): boolean; /** Clones the selection model. */ abstract clone(): NgxMatDateSelectionModel<S, D>; static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxMatDateSelectionModel<any, any>, never>; static ɵprov: _angular_core.ɵɵInjectableDeclaration<NgxMatDateSelectionModel<any, any>>; } /** Datepicker data that requires internationalization. */ declare class NgxMatDatepickerIntl { /** * Stream that emits whenever the labels here are changed. Use this to notify * components if the labels have changed after initialization. */ readonly changes: Subject<void>; /** A label for the calendar popup (used by screen readers). */ calendarLabel: string; /** A label for the button used to open the calendar popup (used by screen readers). */ openCalendarLabel: string; /** Label for the button used to close the calendar popup. */ closeCalendarLabel: string; /** A label for the previous month button (used by screen readers). */ prevMonthLabel: string; /** A label for the next month button (used by screen readers). */ nextMonthLabel: string; /** A label for the previous year button (used by screen readers). */ prevYearLabel: string; /** A label for the next year button (used by screen readers). */ nextYearLabel: string; /** A label for the previous multi-year button (used by screen readers). */ prevMultiYearLabel: string; /** A label for the next multi-year button (used by screen readers). */ nextMultiYearLabel: string; /** A label for the 'switch to month view' button (used by screen readers). */ switchToMonthViewLabel: string; /** A label for the 'switch to year view' button (used by screen readers). */ switchToMultiYearViewLabel: string; /** * A label for the first date of a range of dates (used by screen readers). * @deprecated Provide your own internationalization string. * @breaking-change 17.0.0 */ startDateLabel: string; /** * A label for the last date of a range of dates (used by screen readers). * @deprecated Provide your own internationalization string. * @breaking-change 17.0.0 */ endDateLabel: string; /** Formats a range of years (used for visuals). */ formatYearRange(start: string, end: string): string; /** Formats a label for a range of years (used by screen readers). */ formatYearRangeLabel(start: string, end: string): string; static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxMatDatepickerIntl, never>; static ɵprov: _angular_core.ɵɵInjectableDeclaration<NgxMatDatepickerIntl>; } /** Injection token used to customize the date range selection behavior. */ declare const NGX_MAT_DATE_RANGE_SELECTION_STRATEGY: InjectionToken<NgxMatDateRangeSelectionStrategy<any>>; /** Object that can be provided in order to customize the date range selection behavior. */ interface NgxMatDateRangeSelectionStrategy<D> { /** * Called when the user has finished selecting a value. * @param date Date that was selected. Will be null if the user cleared the selection. * @param currentRange Range that is currently show in the calendar. * @param event DOM event that triggered the selection. Currently only corresponds to a `click` * event, but it may get expanded in the future. */ selectionFinished(date: D | null, currentRange: NgxDateRange<D>, event: Event): NgxDateRange<D>; /** * Called when the user has activated a new date (e.g. by hovering over * it or moving focus) and the calendar tries to display a date range. * * @param activeDate Date that the user has activated. Will be null if the user moved * focus to an element that's no a calendar cell. * @param currentRange Range that is currently shown in the calendar. * @param event DOM event that caused the preview to be changed. Will be either a * `mouseenter`/`mouseleave` or `focus`/`blur` depending on how the user is navigating. */ createPreview(activeDate: D | null, currentRange: NgxDateRange<D>, event: Event): NgxDateRange<D>; /** * Called when the user has dragged a date in the currently selected range to another * date. Returns the date updated range that should result from this interaction. * * @param dateOrigin The date the user started dragging from. * @param originalRange The originally selected date range. * @param newDate The currently targeted date in the drag operation. * @param event DOM event that triggered the updated drag state. Will be * `mouseenter`/`mouseup` or `touchmove`/`touchend` depending on the device type. */ createDrag?(dragOrigin: D, originalRange: NgxDateRange<D>, newDate: D, event: Event): NgxDateRange<D> | null; } /** Provides the default date range selection behavior. */ declare class DefaultNgxMatCalendarRangeStrategy<D> implements NgxMatDateRangeSelectionStrategy<D> { private _dateAdapter; constructor(_dateAdapter: DateAdapter<D>); selectionFinished(date: D, currentRange: NgxDateRange<D>): NgxDateRange<D>; createPreview(activeDate: D | null, currentRange: NgxDateRange<D>): NgxDateRange<D>; createDrag(dragOrigin: D, originalRange: NgxDateRange<D>, newDate: D): NgxDateRange<D>; static ɵfac: _angular_core.ɵɵFactoryDeclaration<DefaultNgxMatCalendarRangeStrategy<any>, never>; static ɵprov: _angular_core.ɵɵInjectableDeclaration<DefaultNgxMatCalendarRangeStrategy<any>>; } /** @docs-private */ declare function NGX_MAT_CALENDAR_RANGE_STRATEGY_PROVIDER_FACTORY(parent: NgxMatDateRangeSelectionStrategy<unknown>, adapter: DateAdapter<unknown>): NgxMatDateRangeSelectionStrategy<unknown>; declare const NGX_MAT_CALENDAR_RANGE_STRATEGY_PROVIDER: FactoryProvider; /** * An internal component used to display a single month in the datepicker. * @docs-private */ declare class NgxMatMonthView<D> implements AfterContentInit, OnChanges, OnDestroy { readonly _changeDetectorRef: ChangeDetectorRef; private _dateFormats; _dateAdapter: DateAdapter<D>; private _dir?; private _rangeStrategy?; private _rerenderSubscription; /** Flag used to filter out space/enter keyup events that originated outside of the view. */ private _selectionKeyPressed; /** * The date to display in this month view (everything other than the month and year is ignored). */ get activeDate(): D; set activeDate(value: D); private _activeDate; /** The currently selected date. */ get selected(): NgxDateRange<D> | D | null; set selected(value: NgxDateRange<D> | D | null); private _selected; /** The minimum selectable date. */ get minDate(): D | null; set minDate(value: D | null); private _minDate; /** The maximum selectable date. */ get maxDate(): D | null; set maxDate(value: D | null); private _maxDate; /** Function used to filter which dates are selectable. */ dateFilter: _angular_core.InputSignal<(date: D) => boolean>; /** Function that can be used to add custom CSS classes to dates. */ dateClass: _angular_core.InputSignal<NgxMatCalendarCellClassFunction<D>>; /** Start of the comparison range. */ comparisonStart: _angular_core.InputSignal<D>; /** End of the comparison range. */ comparisonEnd: _angular_core.InputSignal<D>; /** ARIA Accessible name of the `<input matStartDate/>` */ startDateAccessibleName: _angular_core.InputSignal<string>; /** ARIA Accessible name of the `<input matEndDate/>` */ endDateAccessibleName: _angular_core.InputSignal<string>; /** Origin of active drag, or null when dragging is not active. */ activeDrag: _angular_core.InputSignal<NgxMatCalendarUserEvent<D>>; /** Emits when a new date is selected. */ readonly selectedChange: _angular_core.OutputEmitterRef<D>; /** Emits when any date is selected. */ readonly _userSelection: _angular_core.OutputEmitterRef<NgxMatCalendarUserEvent<D>>; /** Emits when the user initiates a date range drag via mouse or touch. */ readonly dragStarted: _angular_core.OutputEmitterRef<NgxMatCalendarUserEvent<D>>; /** * Emits when the user completes or cancels a date range drag. * Emits null when the drag was canceled or the newly selected date range if completed. */ readonly dragEnded: _angular_core.OutputEmitterRef<NgxMatCalendarUserEvent<NgxDateRange<D>>>; /** Emits when any date is activated. */ readonly activeDateChange: _angular_core.OutputEmitterRef<D>; /** The body of calendar table */ _matCalendarBody: _angular_core.Signal<NgxMatCalendarBody<any>>; /** The label for this month (e.g. "January 2017"). */ _monthLabel: string; /** Grid of calendar cells representing the dates of the month. */ _weeks: NgxMatCalendarCell[][]; /** The number of blank cells in the first row before the 1st of the month. */ _firstWeekOffset: number; /** Start value of the currently-shown date range. */ _rangeStart: number | null; /** End value of the currently-shown date range. */ _rangeEnd: number | null; /** Start value of the currently-shown comparison date range. */ _comparisonRangeStart: number | null; /** End value of the currently-shown comparison date range. */ _comparisonRangeEnd: number | null; /** Start of the preview range. */ _previewStart: number | null; /** End of the preview range. */ _previewEnd: number | null; /** Whether the user is currently selecting a range of dates. */ _isRange: boolean; /** The date of the month that today falls on. Null if today is in another month. */ _todayDate: number | null; /** The names of the weekdays. */ _weekdays: { long: string; narrow: string; }[]; constructor(_changeDetectorRef: ChangeDetectorRef, _dateFormats: MatDateFormats, _dateAdapter: DateAdapter<D>, _dir?: Directionality, _rangeStrategy?: NgxMatDateRangeSelectionStrategy<D>); ngAfterContentInit(): void; ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; /** Handles when a new date is selected. */ _dateSelected(event: NgxMatCalendarUserEvent<number>): void; /** * Takes the index of a calendar body cell wrapped in in an event as argument. For the date that * corresponds to the given cell, set `activeDate` to that date and fire `activeDateChange` with * that date. * * This function is used to match each component's model of the active date with the calendar * body cell that was focused. It updates its value of `activeDate` synchronously and updates the * parent's value asynchronously via the `activeDateChange` event. The child component receives an * updated value asynchronously via the `activeCell` Input. */ _updateActiveDate(event: NgxMatCalendarUserEvent<number>): void; /** Handles keydown events on the calendar body when calendar is in month view. */ _handleCalendarBodyKeydown(event: KeyboardEvent): void; /** Handles keyup events on the calendar body when calendar is in month view. */ _handleCalendarBodyKeyup(event: KeyboardEvent): void; /** Initializes this month view. */ _init(): void; /** Focuses the active cell after the microtask queue is empty. */ _focusActiveCell(movePreview?: boolean): void; /** Focuses the active cell after change detection has run and the microtask queue is empty. */ _focusActiveCellAfterViewChecked(): void; /** Called when the user has activated a new cell and the preview needs to be updated. */ _previewChanged({ event, value: cell }: NgxMatCalendarUserEvent<NgxMatCalendarCell<D> | null>): void; /** * Called when the user has ended a drag. If the drag/drop was successful, * computes and emits the new range selection. */ protected _dragEnded(event: NgxMatCalendarUserEvent<D | null>): void; /** * Takes a day of the month and returns a new date in the same month and year as the currently * active date. The returned date will have the same day of the month as the argument date. */ private _getDateFromDayOfMonth; /** Initializes the weekdays. */ private _initWeekdays; /** Creates MatCalendarCells for the dates in this month. */ private _createWeekCells; /** Date filter for the month */ private _shouldEnableDate; /** * Gets the date in this month that the given Date falls on. * Returns null if the given Date is in another month. */ private _getDateInCurrentMonth; /** Checks whether the 2 dates are non-null and fall within the same month of the same year. */ private _hasSameMonthAndYear; /** Gets the value that will be used to one cell to another. */ private _getCellCompareValue; /** Determines whether the user has the RTL layout direction. */ private _isRtl; /** Sets the current range based on a model value. */ private _setRanges; /** Gets whether a date can be selected in the month view. */ private _canSelect; /** Clears out preview state. */ private _clearPreview; static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxMatMonthView<any>, [null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }]>; static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxMatMonthView<any>, "ngx-mat-month-view", ["ngxMatMonthView"], { "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "dateClass": { "alias": "dateClass"; "required": false; "isSignal": true; }; "comparisonStart": { "alias": "comparisonStart"; "required": false; "isSignal": true; }; "comparisonEnd": { "alias": "comparisonEnd"; "required": false; "isSignal": true; }; "startDateAccessibleName": { "alias": "startDateAccessibleName"; "required": false; "isSignal": true; }; "endDateAccessibleName": { "alias": "endDateAccessibleName"; "required": false; "isSignal": true; }; "activeDrag": { "alias": "activeDrag"; "required": false; "isSignal": true; }; }, { "selectedChange": "selectedChange"; "_userSelection": "_userSelection"; "dragStarted": "dragStarted"; "dragEnded": "dragEnded"; "activeDateChange": "activeDateChange"; }, never, never, true, never>; } declare const yearsPerPage = 24; declare const yearsPerRow = 4; /** * An internal component used to display a year selector in the datepicker. * @docs-private */ declare class NgxMatMultiYearView<D> implements AfterContentInit, OnDestroy { private _changeDetectorRef; _dateAdapter: DateAdapter<D>; private _dir?; private _rerenderSubscription; /** Flag used to filter out space/enter keyup events that originated outside of the view. */ private _selectionKeyPressed; /** The date to display in this multi-year view (everything other than the year is ignored). */ get activeDate(): D; set activeDate(value: D); private _activeDate; /** The currently selected date. */ get selected(): NgxDateRange<D> | D | null; set selected(value: NgxDateRange<D> | D | null); private _selected; /** The minimum selectable date. */ get minDate(): D | null; set minDate(value: D | null); private _minDate; /** The maximum selectable date. */ get maxDate(): D | null; set maxDate(value: D | null); private _maxDate; /** A function used to filter which dates are selectable. */ dateFilter: _angular_core.InputSignal<(date: D) => boolean>; /** Function that can be used to add custom CSS classes to date cells. */ dateClass: _angular_core.InputSignal<NgxMatCalendarCellClassFunction<D>>; /** Emits when a new year is selected. */ readonly selectedChange: _angular_core.OutputEmitterRef<D>; /** Emits the selected year. This doesn't imply a change on the selected date */ readonly yearSelected: _angular_core.OutputEmitterRef<D>; /** Emits when any date is activated. */ readonly activeDateChange: _angular_core.OutputEmitterRef<D>; /** The body of calendar table */ _matCalendarBody: _angular_core.Signal<NgxMatCalendarBody<any>>; /** Grid of calendar cells representing the currently displayed years. */ _years: NgxMatCalendarCell[][]; /** The year that today falls on. */ _todayYear: number; /** The year of the selected date. Null if the selected date is null. */ _selectedYear: number | null; constructor(_changeDetectorRef: ChangeDetectorRef, _dateAdapter: DateAdapter<D>, _dir?: Directionality); ngAfterContentInit(): void; ngOnDestroy(): void; /** Initializes this multi-year view. */ _init(): void; /** Handles when a new year is selected. */ _yearSelected(event: NgxMatCalendarUserEvent<number>): void; /** * Takes the index of a calendar body cell wrapped in in an event as argument. For the date that * corresponds to the given cell, set `activeDate` to that date and fire `activeDateChange` with * that date. * * This function is used to match each component's model of the active date with the calendar * body cell that was focused. It updates its value of `activeDate` synchronously and updates the * parent's value asynchronously via the `activeDateChange` event. The child component receives an * updated value asynchronously via the `activeCell` Input. */ _updateActiveDate(event: NgxMatCalendarUserEvent<number>): void; /** Handles keydown events on the calendar body when calendar is in multi-year view. */ _handleCalendarBodyKeydown(event: KeyboardEvent): void; /** Handles keyup events on the calendar body when calendar is in multi-year view. */ _handleCalendarBodyKeyup(event: KeyboardEvent): void; _getActiveCell(): number; /** Focuses the active cell after the microtask queue is empty. */ _focusActiveCell(): void; /** Focuses the active cell after change detection has run and the microtask queue is empty. */ _focusActiveCellAfterViewChecked(): void; /** * Takes a year and returns a new date on the same day and month as the currently active date * The returned date will have the same year as the argument date. */ private _getDateFromYear; /** Creates an MatCalendarCell for the given year. */ private _createCellForYear; /** Whether the given year is enabled. */ private _shouldEnableYear; /** Determines whether the user has the RTL layout direction. */ private _isRtl; /** Sets the currently-highlighted year based on a model value. */ private _setSelectedYear; static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxMatMultiYearView<any>, [null, { optional: true; }, { optional: true; }]>; static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxMatMultiYearView<any>, "ngx-mat-multi-year-view", ["ngxMatMultiYearView"], { "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "dateClass": { "alias": "dateClass"; "required": false; "isSignal": true; }; }, { "selectedChange": "selectedChange"; "yearSelected": "yearSelected"; "activeDateChange": "activeDateChange"; }, never, never, true, never>; } declare function isSameMultiYearView<D>(dateAdapter: DateAdapter<D>, date1: D, date2: D, minDate: D | null, maxDate: D | null): boolean; /** * When the multi-year view is first opened, the active year will be in view. * So we compute how many years are between the active year and the *slot* where our * "startingYear" will render when paged into view. */ declare function getActiveOffset<D>(dateAdapter: DateAdapter<D>, activeDate: D, minDate: D | null, maxDate: D | null): number; /** * An internal component used to display a single year in the datepicker. * @docs-private */ declare class NgxMatYearView<D> implements AfterContentInit, OnDestroy { readonly _changeDetectorRef: ChangeDetectorRef; private _dateFormats; _dateAdapter: DateAdapter<D>; private _dir?; private _rerenderSubscription; /** Flag used to filter out space/enter keyup events that originated outside of the view. */ private _selectionKeyPressed; /** The date to display in this year view (everything other than the year is ignored). */ get activeDate(): D; set activeDate(value: D); private _activeDate; /** The currently selected date. */ get selected(): NgxDateRange<D> | D | null; set selected(value: NgxDateRange<D> | D | null); private _selected; /** The minimum selectable date. */ get minDate(): D | null; set minDate(value: D | null); private _minDate; /** The maximum selectable date. */ get maxDate(): D | null; set maxDate(value: D | null); private _maxDate; /** A function used to filter which dates are selectable. */ dateFilter: _angular_core.InputSignal<(date: D) => boolean>; /** Function that can be used to add custom CSS classes to date cells. */ dateClass: _angular_core.InputSignal<NgxMatCalendarCellClassFunction<D>>; /** Emits when a new month is selected. */ readonly selectedChange: _angular_core.OutputEmitterRef<D>; /** Emits the selected month. This doesn't imply a change on the selected date */ readonly monthSelected: _angular_core.OutputEmitterRef<D>; /** Emits when any date is activated. */ readonly activeDateChange: _angular_core.OutputEmitterRef<D>; /** The body of calendar table */ _matCalendarBody: _angular_core.Signal<NgxMatCalendarBody<any>>; /** Grid of calendar cells representing the months of the year. */ _months: NgxMatCalendarCell[][]; /** The label for this year (e.g. "2017"). */ _yearLabel: string; /** The month in this year that today falls on. Null if today is in a different year. */ _todayMonth: number | null; /** * The month in this year that the selected Date falls on. * Null if the selected Date is in a different year. */ _selectedMonth: number | null; constructor(_changeDetectorRef: ChangeDetectorRef, _dateFormats: MatDateFormats, _dateAdapter: DateAdapter<D>, _dir?: Directionality); ngAfterContentInit(): void; ngOnDestroy(): void; /** Handles when a new month is selected. */ _monthSelected(event: NgxMatCalendarUserEvent<number>): void; /** * Takes the index of a calendar body cell wrapped in in an event as argument. For the date that * corresponds to the given cell, set `activeDate` to that date and fire `activeDateChange` with * that date. * * This function is used to match each component's model of the active date with the calendar * body cell that was focused. It updates its value of `activeDate` synchronously and updates the * parent's value asynchronously via the `activeDateChange` event. The child component receives an * updated value asynchronously via the `activeCell` Input. */ _updateActiveDate(event: NgxMatCalendarUserEvent<number>): void; /** Handles keydown events on the calendar body when calendar is in year view. */ _handleCalendarBodyKeydown(event: KeyboardEvent): void; /** Handles keyup events on the calendar body when calendar is in year view. */ _handleCalendarBodyKeyup(event: KeyboardEvent): void; /** Initializes this year view. */ _init(): void; /** Focuses the active cell after the microtask queue is empty. */ _focusActiveCell(): void; /** Schedules the matCalendarBody to focus the active cell after change detection has run */ _focusActiveCellAfterViewChecked(): void; /** * Gets the month in this year that the given Date falls on. * Returns null if the given Date is in another year. */ private _getMonthInCurrentYear; /** * Takes a month and returns a new date in the same day and year as the currently active date. * The returned date will have the same month as the argument date. */ private _getDateFromMonth; /** Creates an MatCalendarCell for the given month. */ private _createCellForMonth; /** Whether the given month is enabled. */ private _shouldEnableMonth; /** * Tests whether the combination month/year is after this.maxDate, considering * just the month and year of this.maxDate */ private _isYearAndMonthAfterMaxDate; /** * Tests whether the combination month/year is before this.minDate, considering * just the month and year of this.minDate */ private _isYearAndMonthBeforeMinDate; /** Determines whether the user has the RTL layout direction. */ private _isRtl; /** Sets the currently-selected month based on a model value. */ private _setSelectedMonth; static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxMatYearView<any>, [null, { optional: true; }, { optional: true; }, { optional: true; }]>; static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxMatYearView<any>, "ngx-mat-year-view", ["ngxMatYearView"], { "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "dateClass": { "alias": "dateClass"; "required": false; "isSignal": true; }; }, { "selectedChange": "selectedChange"; "monthSelected": "monthSelected"; "activeDateChange": "activeDateChange"; }, never, never, true, never>; } /** * Possible views for the calendar. * @docs-private */ type NgxMatCalendarView = 'month' | 'year' | 'multi-year'; /** Default header for MatCalendar */ declare class NgxMatCalendarHeader<D> { private _intl; calendar: NgxMatCalendar<D>; private _dateAdapter; private _dateFormats; constructor(_intl: NgxMatDatepickerIntl, calendar: NgxMatCalendar<D>, _dateAdapter: DateAdapter<D>, _dateFormats: MatDateFormats, changeDetectorRef: ChangeDetectorRef); /** The display text for the current calendar view. */ get periodButtonText(): string; /** The aria description for the current calendar view. */ get periodButtonDescription(): string; /** The `aria-label` for changing the calendar view. */ get periodButtonLabel(): string; /** The label for the previous button. */ get prevButtonLabel(): string; /** The label for the next button. */ get nextButtonLabel(): string; /** Handles user clicks on the period label. */ currentPeriodClicked(): void; /** Handles user clicks on the previous button. */ previousClicked(): void; /** Handles user clicks on the next button. */ nextClicked(): void; /** Whether the previous period button is enabled. */ previousEnabled(): boolean; /** Whether the next period button is enabled. */ nextEnabled(): boolean; /** Whether the two dates represent the same view in the current view mode (month or year). */ private _isSameView; /** * Format two individual labels for the minimum year and maximum year available in the multi-year * calendar view. Returns an array of two strings where the first string is the formatted label * for the minimum year, and the second string is the formatted label for the maximum year. */ private _formatMinAndMaxYearLabels; private _id; _periodButtonLabelId: string; static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxMatCalendarHeader<any>, [null, null, { optional: true; }, { optional: true; }, null]>; static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxMatCalendarHeader<any>, "ngx-mat-calendar-header", ["ngxMatCalendarHeader"], {}, {}, never, ["*"], true, never>; } /** A calendar that is used as part of the datepicker. */ declare class NgxMatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDestroy, OnChanges { private _dateAdapter; private _dateFormats; private _changeDetectorRef; /** An input indicating the type of the header component, if set. */ headerComponent: _angular_core.InputSignal<ComponentType<any>>; /** A portal containing the header component type for this calendar. */ _calendarHeaderPortal: Portal<any>; private _intlChanges; /** * Used for scheduling that focus should be moved to the active cell on the next tick. * We need to schedule it, rather than do it immediately, because we have to wait * for Angular to re-evaluate the view children. */ private readonly _moveFocusOnNextTick; /** A date representing the period (month or year) to start the calendar in. */ get startAt(): D | null; set startAt(value: D | null); private _startAt; /** Whether the calendar should be started in month or year view. */ readonly startView: _angular_core.InputSignal<NgxMatCalendarView>; /** The currently selected date. */ get selected(): NgxDateRange<D> | D | null; set selected(value: NgxDateRange<D> | D | null); private _selected; /** The minimum selectable date. */ get minDate(): D | null; set minDate(value: D | null); private _minDate; /** The maximum selectable date. */ get maxDate(): D | null; set maxDate(value: D | null); private _maxDate; /** Function used to filter which dates are selectable. */ readonly dateFilter: _angular_core.InputSignal<(date: D) => boolean>; /** Function that can be used to add custom CSS classes to dates. */ readonly dateClass: _angular_core.InputSignal<NgxMatCalendarCellClassFunction<D>>; /** Start of the comparison range. */ readonly comparisonStart: _angular_core.InputSignal<D>; /** End of the comparison range. */ readonly comparisonEnd: _angular_core.InputSignal<D>; /** ARIA Accessible name of the `<input matStartDate/>` */ readonly startDateAccessibleName: _angular_core.InputSignal<string>; /** ARIA Accessible name of the `<input matEndDate/>` */ readonly endDateAccessibleName: _angular_core.InputSignal<string>; readonly currentView: _angular_core.WritableSignal<NgxMatCalendarView>; /** Emits when the currently selected date changes. */ readonly selectedChange: _angular_core.OutputEmitterRef<D>; /** * Emits the year chosen in multiyear view. * This doesn't imply a change on the selected date. */ readonly yearSelected: _angular_core.OutputEmitterRef<D>; /** * Emits the month chosen in year view. * This doesn't imply a change on the selected date. */ readonly monthSelected: _angular_core.OutputEmitterRef<D>; /** * Emits when the current view changes. */ readonly viewChanged: _angular_core.OutputRef<NgxMatCalendarView>; /** Emits when any date is selected. */ readonly _userSelection: _angular_core.OutputEmitterRef<NgxMatCalendarUserEvent<D>>; /** Emits a new date range value when the user completes a drag drop operation. */ readonly _userDragDrop: _angular_core.OutputEmitterRef<NgxMatCalendarUserEvent<NgxDateRange<D>>>; /** Reference to the current month view component. */ readonly monthView: _angular_core.Signal<NgxMatMonthView<D>>; /** Reference to the current year view component. */ readonly yearView: _angular_core.Signal<NgxMatYearView<D>>; /** Reference to the current multi-year view component. */ readonly multiYearView: _angular_core.Signal<NgxMatMultiYearView<D>>; /** * The current active date. This determines which time period is shown and which date is * highlighted when using keyboard navigation. */ get activeDate(): D; set activeDate(value: D); private _clampedActiveDate; /** Origin of active drag, or null when dragging is not active. */ protected _activeDrag: NgxMatCalendarUserEvent<D> | null; /** * Emits whenever there is a state change that the header may need to respond to. */ readonly stateChanges: Subject<void>; constructor(_intl: NgxMatDatepickerIntl, _dateAdapter: DateAdapter<D>, _dateFormats: MatDateFormats, _changeDetectorRef: ChangeDetectorRef); ngAfterContentInit(): void; ngAfterViewChecked(): void; ngOnDestroy(): void; ngOnChanges(changes: SimpleChanges): void; /** Focuses the active date. */ focusActiveCell(): void; /** Updates today's date after an update of the active date */ updateTodaysDate(): void; /** Handles date selection in the month view. */ _dateSelected(event: NgxMatCalendarUserEvent<D | null>): void; /** Handles year selection in the multiyear view. */ _yearSelectedInMultiYearView(normalizedYear: D): void; /** Handles month selection in the year view. */ _monthSelectedInYearView(normalizedMonth: D): void; /** Handles year/month selection in the multi-year/year views. */ _goToDateInView(date: D, view: NgxMatCalendarView): void; /** Called when the user starts dragging to change a date range. */ _dragStarted(event: NgxMatCalendarUserEvent<D>): void; /** * Called when a drag completes. It may end in cancelation or in the selection * of a new range. */ _dragEnded(event: NgxMatCalendarUserEvent<NgxDateRange<D> | null>): void; /** Returns the component instance that corresponds to the current calendar view. */ private _getCurrentViewComponent; static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxMatCalendar<any>, [null, { optional: true; }, { optional: true; }, null]>; static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxMatCalendar<any>, "ngx-mat-calendar", ["ngxMatCalendar"], { "headerComponent": { "alias": "headerComponent"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; }; "startView": { "alias": "startView"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "dateClass": { "alias": "dateClass"; "required": false; "isSignal": true; }; "comparisonStart": { "alias": "comparisonStart"; "required": false; "isSignal": true; }; "comparisonEnd": { "alias": "comparisonEnd"; "required": false; "isSignal": true; }; "startDateAccessibleName": { "alias": "startDateAccessibleName"; "required": false; "isSignal": true; }; "endDateAccessibleName": { "alias": "endDateAccessibleName"; "required": false; "isSignal": true; }; }, { "selectedChange": "selectedChange"; "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "viewChanged": "viewChanged"; "_userSelection": "_userSelection"; "_userDragDrop": "_userDragDrop"; }, never, never, true, never>; } /** * An event used for datepicker input and change events. We don't always have access to a native * input or change event because the event may have been triggered by the user clicking on the * calendar popup. For consistency, we always use MatDatepickerInputEvent instead. */ declare class NgxMatDatepickerInputEvent<D, S = unknown> { /** Reference to the datepicker input component that emitted the event. */ target: NgxMatDatepickerInputBase<S, D>; /** Reference to the native input element associated with the datepicker input. */ targetElement: HTMLElement; /** The new value for the target datepicker input. */ value: D | null; constructor( /** Reference to the datepicker input component that emitted the event. */ target: NgxMatDatepickerInputBase<S, D>, /** Reference to the native input element associated with the datepicker input. */ targetElement: HTMLElement); } /** Function that can be used to filter out dates from a calendar. */ type NgxDateFilterFn<D> = (date: D | null) => boolean; /** * Partial representation of `MatFormField` that is used for backwards-compatibility * between the legacy and non-legacy variants. */ interface _NgxMatFormFieldPartial { getConnectedOverlayOrigin(): ElementRef; getLabelId(): string | null; color: ThemePalette; _elementRef: ElementRef; _shouldLabelFloat(): boolean; _hasFloatingLabel(): boolean; _labelId: string; } /** Base class for datepicker inputs. */ declare abstract class NgxMatDatepickerInputBase<S, D = NgxExtractDateTypeFromSelection<S>> implements ControlValueAccessor, AfterViewInit, OnChanges, OnDestroy, Validator { protected _elementRef: ElementRef<HTMLInputElement>; _dateAdapter: DateAdapter<D>; private _dateFormats; /** Whether the component has been initialized. */ private _isInitialized; /** The value of the input. */ get value(): D | null; set value(value: any);