@ng-matero/extensions/types/mtxDatetimepicker.d.ts

Angular Material Extensions

import * as i0 from '@angular/core';
import { AfterContentInit, OnDestroy, OnChanges, EventEmitter, SimpleChanges, ElementRef, AfterViewChecked, AfterViewInit, InjectionToken, TemplateRef } from '@angular/core';
import * as i1 from '@angular/common';
import * as i2 from '@angular/cdk/overlay';
import { ScrollStrategy } from '@angular/cdk/overlay';
import * as i3 from '@angular/cdk/a11y';
import * as i4 from '@angular/cdk/portal';
import { TemplatePortal, ComponentType, Portal } from '@angular/cdk/portal';
import * as i5 from '@angular/material/button';
import { MatButton } from '@angular/material/button';
import { DatetimeAdapter } from '@ng-matero/extensions/core';
import { NumberInput } from '@angular/cdk/coercion';
import { Subject, SubscriptionLike } from 'rxjs';
import { ThemePalette } from '@angular/material/core';
import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';

declare enum MtxDatetimepickerFilterType {
    DATE = 0,
    HOUR = 1,
    MINUTE = 2
}

/** Possible types for datetimepicker. */
type MtxDatetimepickerType = 'date' | 'time' | 'month' | 'year' | 'datetime';
/** Possible views for datetimepicker calendar. */
type MtxCalendarView = 'clock' | 'month' | 'year' | 'multi-year';
/** Possible types for AM / PM */
type MtxAMPM = 'AM' | 'PM';

declare const CLOCK_RADIUS = 50;
declare const CLOCK_INNER_RADIUS = 27.5;
declare const CLOCK_OUTER_RADIUS = 41.25;
declare const CLOCK_TICK_RADIUS = 7.0833;
/** Possible views for datetimepicker clock. */
type MtxClockView = 'hour' | 'minute';
interface ClockCell {
    value: number;
    displayValue: string;
    enabled: boolean;
    top: number;
    left: number;
    fontSize?: string;
}
/**
 * A clock that is used as part of the datetimepicker.
 * @docs-private
 */
declare class MtxClock<D> implements AfterContentInit, OnDestroy, OnChanges {
    private _elementRef;
    private _adapter;
    private _changeDetectorRef;
    private _document;
    /** A function used to filter which dates are selectable. */
    dateFilter: (date: D, type: MtxDatetimepickerFilterType) => boolean;
    /** Step over minutes. */
    interval: number;
    actionButtons: boolean;
    /** Whether the clock uses 12 hour format. */
    twelvehour: boolean;
    /** Whether the time is now in AM or PM. */
    AMPM: MtxAMPM;
    /** Emits when the currently selected date changes. */
    selectedChange: EventEmitter<D>;
    /** Emits when any date is activated. */
    activeDateChange: EventEmitter<D>;
    /** Emits when any date is selected. */
    readonly _userSelection: EventEmitter<void>;
    /** Whether the clock is in hour view. */
    _hourView: boolean;
    _hours: ClockCell[];
    _minutes: ClockCell[];
    _selectedHour: number;
    _selectedMinute: number;
    private _timeChanged;
    /**
     * The date to display in this clock view.
     */
    get activeDate(): D;
    set activeDate(value: D);
    private _activeDate;
    /** The currently selected date. */
    get selected(): D | null;
    set selected(value: 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;
    /** Whether the clock should be started in hour or minute view. */
    set startView(value: MtxClockView);
    get _hand(): {
        height: string;
        marginTop: string;
        transform: string;
    };
    ngAfterContentInit(): void;
    ngOnDestroy(): void;
    ngOnChanges(): void;
    /** Called when the user has put their pointer down on the clock. */
    _pointerDown: (event: TouchEvent | MouseEvent) => void;
    /**
     * Called when the user has moved their pointer after
     * starting to drag. Bound on the document level.
     */
    private _pointerMove;
    /** Called when the user has lifted their pointer. Bound on the document level. */
    private _pointerUp;
    /** Binds our global move and end events. */
    private _bindGlobalEvents;
    /** Removes any global event listeners that we may have added. */
    private _removeGlobalEvents;
    /** Initializes this clock view. */
    private _init;
    /**
     * Set Time
     * @param event
     */
    private setTime;
    static ɵfac: i0.ɵɵFactoryDeclaration<MtxClock<any>, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<MtxClock<any>, "mtx-clock", ["mtxClock"], { "dateFilter": { "alias": "dateFilter"; "required": false; }; "interval": { "alias": "interval"; "required": false; }; "actionButtons": { "alias": "actionButtons"; "required": false; }; "twelvehour": { "alias": "twelvehour"; "required": false; }; "AMPM": { "alias": "AMPM"; "required": false; }; "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "startView": { "alias": "startView"; "required": false; }; }, { "selectedChange": "selectedChange"; "activeDateChange": "activeDateChange"; "_userSelection": "_userSelection"; }, never, never, true, never>;
    static ngAcceptInputType_twelvehour: unknown;
}

/**
 * An internal class that represents the data corresponding to a single calendar cell.
 * @docs-private
 */
declare class MtxCalendarCell {
    value: number;
    displayValue: string;
    ariaLabel: string;
    enabled: boolean;
    isWeekNumber?: boolean | undefined;
    readonly id: number;
    constructor(value: number, displayValue: string, ariaLabel: string, enabled: boolean, isWeekNumber?: boolean | undefined);
}
/**
 * An internal component used to display calendar data in a table.
 * @docs-private
 */
declare class MtxCalendarBody implements OnChanges {
    private _elementRef;
    private _ngZone;
    private _injector;
    /** The label for the table. (e.g. "Jan 2017"). */
    label: string;
    /** The cells to display in the table. */
    rows: MtxCalendarCell[][];
    /** Whether to show week numbers */
    showWeekNumbers: 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: number;
    /** The value in the table that corresponds to today. */
    todayValue: number;
    /** The value in the table that is currently selected. */
    selectedValue: number;
    /** The minimum number of free cells needed to fit the label in the first row. */
    labelMinRequiredCells: number;
    /** The number of columns in the table. */
    numCols: number;
    /** Whether to allow selection of disabled cells. */
    allowDisabledSelection: boolean;
    /** The cell number of the active cell in the table. */
    activeCell: number;
    /** Emits when a new value is selected. */
    selectedValueChange: EventEmitter<number>;
    /** The number of blank cells to put at the beginning for the first row. */
    _firstRowOffset: number;
    /** Padding for the individual date cells. */
    _cellPadding: string;
    /** Width of an individual cell. */
    _cellWidth: string;
    _cellClicked(cell: MtxCalendarCell): void;
    _emitActiveDateChange(cell: MtxCalendarCell, event: FocusEvent): void;
    _isActiveCell(rowIndex: number, colIndex: number): boolean;
    /**
     * Tracking function for rows based on their identity. Ideally we would use some sort of
     * key on the row, but that would require a breaking change for the `rows` input. We don't
     * use the built-in identity tracking, because it logs warnings.
     */
    _trackRow: (row: MtxCalendarCell[]) => MtxCalendarCell[];
    ngOnChanges(changes: SimpleChanges): void;
    _focusActiveCell(movePreview?: boolean): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<MtxCalendarBody, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<MtxCalendarBody, "[mtx-calendar-body]", ["mtxCalendarBody"], { "label": { "alias": "label"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; }; "cellAspectRatio": { "alias": "cellAspectRatio"; "required": false; }; "todayValue": { "alias": "todayValue"; "required": false; }; "selectedValue": { "alias": "selectedValue"; "required": false; }; "labelMinRequiredCells": { "alias": "labelMinRequiredCells"; "required": false; }; "numCols": { "alias": "numCols"; "required": false; }; "allowDisabledSelection": { "alias": "allowDisabledSelection"; "required": false; }; "activeCell": { "alias": "activeCell"; "required": false; }; }, { "selectedValueChange": "selectedValueChange"; }, never, never, true, never>;
    static ngAcceptInputType_showWeekNumbers: unknown;
}

/**
 * An internal component used to display a single month in the datetimepicker.
 * @docs-private
 */
declare class MtxMonthView<D> implements AfterContentInit {
    _adapter: DatetimeAdapter<D>;
    private _dir;
    private _dateFormats;
    private _intl;
    type: MtxDatetimepickerType;
    /** A function used to filter which dates are selectable. */
    dateFilter: (date: D) => boolean;
    /** Whether to show week numbers */
    showWeekNumbers: boolean;
    /** Emits when a new date is selected. */
    selectedChange: EventEmitter<D>;
    /** Emits when any date is selected. */
    readonly _userSelection: EventEmitter<void>;
    /** Emits when any date is activated. */
    readonly activeDateChange: EventEmitter<D>;
    /** The body of calendar table */
    _mtxCalendarBody: MtxCalendarBody;
    /** Grid of calendar cells representing the dates of the month. */
    _weeks: MtxCalendarCell[][];
    /** The number of blank cells in the first row before the 1st of the month. */
    _firstWeekOffset: number;
    /**
     * The date of the month that the currently selected Date falls on.
     * Null if the currently selected Date is in another month.
     */
    _selectedDate: number | null;
    /** 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;
        id: number;
    }[];
    constructor();
    private _activeDate;
    /**
     * The date to display in this month view (everything other than the month and year is ignored).
     */
    get activeDate(): D;
    set activeDate(value: D);
    /** The currently selected date. */
    get selected(): D | null;
    set selected(value: D | null);
    private _selected;
    ngAfterContentInit(): void;
    /** Handles when a new date is selected. */
    _dateSelected(date: number): void;
    /** Initializes this month view. */
    private _init;
    /** Initializes the weekdays. */
    private _initWeekdays;
    /** Creates MdCalendarCells for the dates in this month. */
    private _createWeekCells;
    /**
     * Gets the date in this month that the given Date falls on.
     * Returns null if the given Date is in another month.
     */
    private _getDateInCurrentMonth;
    /** Handles keydown events on the calendar body when calendar is in month view. */
    _handleCalendarBodyKeydown(event: KeyboardEvent): void;
    /** Focuses the active cell after the microtask queue is empty. */
    _focusActiveCell(movePreview?: boolean): void;
    /** Determines whether the user has the RTL layout direction. */
    private _isRtl;
    static ɵfac: i0.ɵɵFactoryDeclaration<MtxMonthView<any>, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<MtxMonthView<any>, "mtx-month-view", ["mtxMonthView"], { "type": { "alias": "type"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; }; "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, { "selectedChange": "selectedChange"; "_userSelection": "_userSelection"; "activeDateChange": "activeDateChange"; }, never, never, true, never>;
    static ngAcceptInputType_showWeekNumbers: unknown;
}

declare const yearsPerPage = 24;
declare const yearsPerRow = 4;
/**
 * An internal component used to display multiple years in the datetimepicker.
 * @docs-private
 */
declare class MtxMultiYearView<D> implements AfterContentInit {
    _adapter: DatetimeAdapter<D>;
    private _dir;
    private _dateFormats;
    type: MtxDatetimepickerType;
    /** A function used to filter which dates are selectable. */
    dateFilter: (date: D) => boolean;
    /** Emits when a new month is selected. */
    selectedChange: EventEmitter<D>;
    /** Emits when any date is selected. */
    readonly _userSelection: EventEmitter<void>;
    /** Emits when any date is activated. */
    readonly activeDateChange: EventEmitter<D>;
    /** The body of calendar table */
    _mtxCalendarBody: MtxCalendarBody;
    /** Grid of calendar cells representing the years in the range. */
    _years: MtxCalendarCell[][];
    /** The label for this year range (e.g. "2000-2020"). */
    _yearLabel: string;
    /** The year in this range that today falls on. Null if today is in a different range. */
    _todayYear: number;
    /**
     * The year in this range that the selected Date falls on.
     * Null if the selected Date is in a different range.
     */
    _selectedYear: number | null;
    constructor();
    /** The date to display in this multi year view */
    get activeDate(): D;
    set activeDate(value: D);
    private _activeDate;
    /** The currently selected date. */
    get selected(): D | null;
    set selected(value: 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;
    ngAfterContentInit(): void;
    /** Handles when a new year is selected. */
    _yearSelected(year: number): void;
    _getActiveCell(): number;
    /** Initializes this year view. */
    private _init;
    /** Creates an MtxCalendarCell for the given year. */
    private _createCellForYear;
    /** Whether the given year is enabled. */
    private _shouldEnableYear;
    /**
     * @param obj The object to check.
     * @returns The given object if it is both a date instance and valid, otherwise null.
     */
    _getValidDateOrNull(obj: any): D | null;
    /** Handles keydown events on the calendar body when calendar is in multi-year view. */
    _handleCalendarBodyKeydown(event: KeyboardEvent): void;
    /** Focuses the active cell after the microtask queue is empty. */
    _focusActiveCell(): void;
    /** Determines whether the user has the RTL layout direction. */
    private _isRtl;
    static ɵfac: i0.ɵɵFactoryDeclaration<MtxMultiYearView<any>, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<MtxMultiYearView<any>, "mtx-multi-year-view", ["mtxMultiYearView"], { "type": { "alias": "type"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; }, { "selectedChange": "selectedChange"; "_userSelection": "_userSelection"; "activeDateChange": "activeDateChange"; }, never, never, true, never>;
}
declare function isSameMultiYearView<D>(dateAdapter: DatetimeAdapter<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: DatetimeAdapter<D>, activeDate: D, minDate: D | null, maxDate: D | null): number;

declare class MtxDatetimepickerIntl {
    /**
     * Stream to emit from when labels are changed. Use this to notify components when 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). */
    switchToYearViewLabel: string;
    /** A label for the 'switch to multi-year view' button (used by screen readers). */
    switchToMultiYearViewLabel: string;
    /** A label for the first date of a range of dates (used by screen readers). */
    startDateLabel: string;
    /** A label for the last date of a range of dates (used by screen readers). */
    endDateLabel: string;
    /** A label for the week numbers (used by screen readers). */
    weekNumberLabel(number: number): 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;
    /** A label for the 'switch to clock hour view' button (used by screen readers). */
    switchToClockHourViewLabel: string;
    /** A label for the 'switch to clock minute view' button (used by screen readers). */
    switchToClockMinuteViewLabel: string;
    /** Label used for ok button within the manual time input. */
    okLabel: string;
    /** Label used for cancel button within the manual time input. */
    cancelLabel: string;
    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerIntl, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<MtxDatetimepickerIntl>;
}

declare class MtxTimeInput implements OnDestroy {
    private element;
    private cdr;
    set timeInterval(value: NumberInput);
    private _interval;
    set timeMin(value: NumberInput);
    private _min;
    set timeMax(value: NumberInput);
    private _max;
    set timeValue(value: NumberInput);
    timeValueChanged: EventEmitter<NumberInput>;
    private _value;
    private keyDownListener;
    private keyPressListener;
    private inputEventListener;
    constructor();
    get hasFocus(): any;
    get inputElement(): HTMLInputElement;
    get valid(): boolean;
    get invalid(): boolean;
    blur(): void;
    focus(): void;
    /**
     * Write value to inputElement
     * @param value NumberInput
     */
    writeValue(value: NumberInput): void;
    /**
     * Writes value to placeholder
     * @param value NumberInput
     */
    writePlaceholder(value: NumberInput): void;
    keyDownHandler(event: KeyboardEvent): void;
    /**
     * Prevent non number inputs in the inputElement with the exception of Enter/Tab
     * @param event KeyboardEvent
     */
    keyPressHandler(event: KeyboardEvent): void;
    inputChangedHandler(): void;
    clampInputValue(): void;
    /**
     * Remove event listeners on destruction
     */
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<MtxTimeInput, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxTimeInput, "input.mtx-time-input", ["mtxTimeInput"], { "timeInterval": { "alias": "timeInterval"; "required": false; }; "timeMin": { "alias": "timeMin"; "required": false; }; "timeMax": { "alias": "timeMax"; "required": false; }; "timeValue": { "alias": "timeValue"; "required": false; }; }, { "timeValueChanged": "timeValueChanged"; }, never, never, true, never>;
}
declare class MtxTimeView<D> implements OnChanges, OnDestroy {
    private _adapter;
    private _changeDetectorRef;
    private _elementRef;
    protected _datetimepickerIntl: MtxDatetimepickerIntl;
    /** Emits when the currently selected date changes. */
    readonly selectedChange: EventEmitter<D>;
    /** Emits when any date changes. */
    readonly activeDateChange: EventEmitter<D>;
    /** Emits when any date is selected. */
    readonly _userSelection: EventEmitter<void>;
    /** Emits when AM/PM button are clicked. */
    readonly ampmChange: EventEmitter<MtxAMPM>;
    /** Emits when AM/PM button are clicked. */
    readonly clockViewChange: EventEmitter<MtxClockView>;
    /** A function used to filter which dates are selectable. */
    dateFilter: (date: D, type: MtxDatetimepickerFilterType) => boolean;
    /** Input for action buttons. */
    timeInput: boolean;
    /** Step over minutes. */
    interval: number;
    /** Input for action buttons. */
    actionsPortal: TemplatePortal | null;
    /** Prevent user to select same date time */
    preventSameDateTimeSelection: boolean;
    /** Whether the time input should be auto-focused after view init. */
    autoFocus: boolean;
    protected hourInputElement: ElementRef<HTMLInputElement> | undefined;
    set hourInputDirective(input: MtxTimeInput);
    protected _hourInputDirective: MtxTimeInput | undefined;
    protected minuteInputElement: ElementRef<HTMLInputElement> | undefined;
    set minuteInputDirective(input: MtxTimeInput);
    protected _minuteInputDirective: MtxTimeInput | undefined;
    datetimepickerIntlChangesSubscription: SubscriptionLike;
    /** Whether the clock uses 12 hour format. */
    twelvehour: boolean;
    /** Whether the time is now in AM or PM. */
    AMPM: MtxAMPM;
    /** The date to display in this clock view. */
    get activeDate(): D;
    set activeDate(value: D);
    private _activeDate;
    /** The currently selected date. */
    get selected(): D | null;
    set selected(value: 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;
    /** Whether the clock should be started in hour or minute view. */
    get clockView(): MtxClockView;
    set clockView(value: MtxClockView);
    /** Whether the clock is in hour view. */
    private _clockView;
    get isHourView(): boolean;
    get isMinuteView(): boolean;
    get hour(): string;
    get minute(): string;
    prefixWithZero(value: number): string;
    constructor();
    ngOnChanges(changes: SimpleChanges): void;
    ngOnDestroy(): void;
    /** Handles keydown events on the calendar body when calendar is in clock view. */
    _handleCalendarBodyKeydown(event: KeyboardEvent): void;
    _focusInputElement(): void;
    _handleHourInputChange(value: NumberInput): void;
    _updateHourForAmPm(value: number): number;
    _handleMinuteInputChange(value: NumberInput): void;
    _handleFocus(clockView: MtxClockView): void;
    _dialTimeSelected(date: D): void;
    _timeSelected(date: D): void;
    _onActiveDateChange(date: D): void;
    _handleSelection(): void;
    _handleOk(): void;
    _handleCancel(): void;
    /** Focuses the active cell after the microtask queue is empty. */
    _focusActiveCell(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<MtxTimeView<any>, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<MtxTimeView<any>, "mtx-time-view", ["mtxTime"], { "dateFilter": { "alias": "dateFilter"; "required": false; }; "timeInput": { "alias": "timeInput"; "required": false; }; "interval": { "alias": "interval"; "required": false; }; "actionsPortal": { "alias": "actionsPortal"; "required": false; }; "preventSameDateTimeSelection": { "alias": "preventSameDateTimeSelection"; "required": false; }; "autoFocus": { "alias": "autoFocus"; "required": false; }; "twelvehour": { "alias": "twelvehour"; "required": false; }; "AMPM": { "alias": "AMPM"; "required": false; }; "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "clockView": { "alias": "clockView"; "required": false; }; }, { "selectedChange": "selectedChange"; "activeDateChange": "activeDateChange"; "_userSelection": "_userSelection"; "ampmChange": "ampmChange"; "clockViewChange": "clockViewChange"; }, never, never, true, never>;
    static ngAcceptInputType_timeInput: unknown;
    static ngAcceptInputType_preventSameDateTimeSelection: unknown;
    static ngAcceptInputType_autoFocus: unknown;
    static ngAcceptInputType_twelvehour: unknown;
}

/**
 * An internal component used to display a single year in the datetimepicker.
 * @docs-private
 */
declare class MtxYearView<D> implements AfterContentInit {
    _adapter: DatetimeAdapter<D>;
    private _dir;
    private _dateFormats;
    type: MtxDatetimepickerType;
    /** A function used to filter which dates are selectable. */
    dateFilter: (date: D) => boolean;
    /** Emits when a new month is selected. */
    selectedChange: EventEmitter<D>;
    /** Emits when any date is selected. */
    readonly _userSelection: EventEmitter<void>;
    /** Emits when any date is activated. */
    readonly activeDateChange: EventEmitter<D>;
    /** The body of calendar table */
    _mtxCalendarBody: MtxCalendarBody;
    /** Grid of calendar cells representing the months of the year. */
    _months: MtxCalendarCell[][];
    /** 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();
    /** 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(): D | null;
    set selected(value: D | null);
    private _selected;
    ngAfterContentInit(): void;
    /** Handles when a new month is selected. */
    _monthSelected(month: number): void;
    /** Initializes this month view. */
    private _init;
    /**
     * Gets the month in this year that the given Date falls on.
     * Returns null if the given Date is in another year.
     */
    private _getMonthInCurrentYear;
    /** Creates an MdCalendarCell for the given month. */
    private _createCellForMonth;
    /** Whether the given month is enabled. */
    private _isMonthEnabled;
    /** Handles keydown events on the calendar body when calendar is in year view. */
    _handleCalendarBodyKeydown(event: KeyboardEvent): void;
    /** Focuses the active cell after the microtask queue is empty. */
    _focusActiveCell(): void;
    /** Determines whether the user has the RTL layout direction. */
    private _isRtl;
    static ɵfac: i0.ɵɵFactoryDeclaration<MtxYearView<any>, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<MtxYearView<any>, "mtx-year-view", ["mtxYearView"], { "type": { "alias": "type"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, { "selectedChange": "selectedChange"; "_userSelection": "_userSelection"; "activeDateChange": "activeDateChange"; }, never, never, true, never>;
}

/**
 * A calendar that is used as part of the datetimepicker.
 * @docs-private
 */
declare class MtxCalendar<D> implements AfterViewChecked, AfterContentInit, OnDestroy {
    private _intl;
    private _changeDetectorRef;
    private _ngZone;
    private _adapter;
    private _dateFormats;
    /** Whether to show multi-year view. */
    multiYearSelector: boolean;
    /** Whether the clock uses 12 hour format. */
    twelvehour: boolean;
    /** Whether to show week numbers in month view */
    showWeekNumbers: boolean;
    /** Whether the calendar should be started in month or year view. */
    startView: MtxCalendarView;
    /** Step over minutes. */
    timeInterval: number;
    /** A function used to filter which dates are selectable. */
    dateFilter: (date: D, type: MtxDatetimepickerFilterType) => boolean;
    /** Prevent user to select same date time */
    preventSameDateTimeSelection: boolean;
    /** Input for custom header component */
    headerComponent?: ComponentType<any>;
    /** Input for action buttons. */
    actionsPortal: TemplatePortal | null;
    /** Emits when the currently selected date changes. */
    selectedChange: EventEmitter<D>;
    /** Emits when the view has been changed. */
    viewChanged: EventEmitter<MtxCalendarView>;
    _userSelection: EventEmitter<void>;
    /** Reference to the current month view component. */
    monthView: MtxMonthView<D>;
    /** Reference to the current year view component. */
    yearView: MtxYearView<D>;
    /** Reference to the current multi-year view component. */
    multiYearView: MtxMultiYearView<D>;
    /** Reference to the current time view component. */
    timeView: MtxTimeView<D>;
    _AMPM: MtxAMPM;
    _clockView: MtxClockView;
    /** A portal containing the header component. */
    _calendarHeaderPortal: Portal<any>;
    private _intlChanges;
    private _clampedActiveDate;
    /**
     * 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 _moveFocusOnNextTick;
    constructor();
    /** The display type of datetimepicker. */
    get type(): MtxDatetimepickerType;
    set type(value: MtxDatetimepickerType);
    private _type;
    /** 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 is in time mode. In time mode the calendar clock gets time input
     * elements rather then just clock. When `touchUi` is enabled this will be disabled.
     */
    timeInput: boolean;
    /** Whether the time input should be auto-focused after view init.  */
    timeInputAutoFocus: boolean;
    /** The currently selected date. */
    get selected(): D | null;
    set selected(value: 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;
    /**
     * 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);
    /** Whether the calendar is in month view. */
    get currentView(): MtxCalendarView;
    set currentView(value: MtxCalendarView);
    private _currentView;
    get _yearPeriodText(): string;
    get _yearButtonText(): string;
    get _yearButtonLabel(): string;
    get _dateButtonText(): string;
    get _dateButtonLabel(): string;
    get _hoursButtonText(): string;
    get _hourButtonLabel(): string;
    get _minutesButtonText(): string;
    get _minuteButtonLabel(): string;
    get _prevButtonLabel(): string;
    get _nextButtonLabel(): string;
    /** Date filter for the month and year views. */
    _dateFilterForViews: (date: D) => boolean;
    _userSelected(): void;
    ngAfterContentInit(): void;
    ngAfterViewChecked(): void;
    ngOnDestroy(): void;
    /** Handles date selection in the month view. */
    _dateSelected(date: D): void;
    /** Handles month selection in the year view. */
    _monthSelected(month: D): void;
    /** Handles year selection in the multi year view. */
    _yearSelected(year: D): void;
    _timeSelected(date: D): void;
    _onActiveDateChange(date: D): void;
    _selectAMPM(date: D): void;
    _ampmClicked(source: MtxAMPM): void;
    _yearClicked(): void;
    _dateClicked(): void;
    _hoursClicked(): void;
    _minutesClicked(): 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;
    private _2digit;
    /** Returns the component instance that corresponds to the current calendar view. */
    private _getCurrentViewComponent;
    /** Focuses the active date. */
    focusActiveCell(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<MtxCalendar<any>, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<MtxCalendar<any>, "mtx-calendar", ["mtxCalendar"], { "multiYearSelector": { "alias": "multiYearSelector"; "required": false; }; "twelvehour": { "alias": "twelvehour"; "required": false; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; }; "startView": { "alias": "startView"; "required": false; }; "timeInterval": { "alias": "timeInterval"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "preventSameDateTimeSelection": { "alias": "preventSameDateTimeSelection"; "required": false; }; "headerComponent": { "alias": "headerComponent"; "required": false; }; "actionsPortal": { "alias": "actionsPortal"; "required": false; }; "type": { "alias": "type"; "required": false; }; "startAt": { "alias": "startAt"; "required": false; }; "timeInput": { "alias": "timeInput"; "required": false; }; "timeInputAutoFocus": { "alias": "timeInputAutoFocus"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; }, { "selectedChange": "selectedChange"; "viewChanged": "viewChanged"; "_userSelection": "_userSelection"; }, never, never, true, never>;
    static ngAcceptInputType_multiYearSelector: unknown;
    static ngAcceptInputType_twelvehour: unknown;
    static ngAcceptInputType_showWeekNumbers: unknown;
    static ngAcceptInputType_preventSameDateTimeSelection: unknown;
    static ngAcceptInputType_timeInput: unknown;
    static ngAcceptInputType_timeInputAutoFocus: unknown;
}

declare const MAT_DATETIMEPICKER_VALUE_ACCESSOR: any;
declare const MAT_DATETIMEPICKER_VALIDATORS: any;
/**
 * An event used for datetimepicker 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 MtxDatetimepickerInputEvent instead.
 */
declare class MtxDatetimepickerInputEvent<D> {
    target: MtxDatetimepickerInput<D>;
    targetElement: HTMLElement;
    /** The new value for the target datetimepicker input. */
    value: D | null;
    constructor(target: MtxDatetimepickerInput<D>, targetElement: HTMLElement);
}
/** Directive used to connect an input to a MtxDatetimepicker. */
declare class MtxDatetimepickerInput<D> implements AfterContentInit, ControlValueAccessor, OnDestroy, Validator {
    private _elementRef;
    _dateAdapter: DatetimeAdapter<D>;
    private _dateFormats;
    private _formField;
    _datetimepicker: MtxDatetimepicker<D>;
    _dateFilter: (date: D | null, type: MtxDatetimepickerFilterType) => boolean;
    /** Emits when a `change` event is fired on this `<input>`. */
    dateChange: EventEmitter<MtxDatetimepickerInputEvent<D>>;
    /** Emits when an `input` event is fired on this `<input>`. */
    dateInput: EventEmitter<MtxDatetimepickerInputEvent<D>>;
    /** Emits when the value changes (either due to user input or programmatic change). */
    _valueChange: EventEmitter<D | null>;
    /** Emits when the disabled state has changed */
    _disabledChange: EventEmitter<boolean>;
    private _datetimepickerSubscription;
    private _localeSubscription;
    /** Whether the last value set on the input was valid. */
    private _lastValueValid;
    constructor();
    /** The datetimepicker that this input is associated with. */
    set mtxDatetimepicker(value: MtxDatetimepicker<D>);
    set mtxDatetimepickerFilter(filter: (date: D | null, type: MtxDatetimepickerFilterType) => boolean);
    /** The value of the input. */
    get value(): D | null;
    set value(value: D | null);
    private _value;
    /** The minimum valid date. */
    get min(): D | null;
    set min(value: D | null);
    private _min;
    /** The maximum valid date. */
    get max(): D | null;
    set max(value: D | null);
    private _max;
    /** Whether the datetimepicker-input is disabled. */
    get disabled(): boolean;
    set disabled(value: boolean);
    private _disabled;
    _onTouched: () => void;
    ngAfterContentInit(): void;
    ngOnDestroy(): void;
    registerOnValidatorChange(fn: () => void): void;
    validate(c: AbstractControl): ValidationErrors | null;
    /**
     * Gets the element that the datetimepicker popup should be connected to.
     * @return The element to connect the popup to.
     */
    getConnectedOverlayOrigin(): ElementRef;
    /** Gets the ID of an element that should be used a description for the calendar overlay. */
    getOverlayLabelId(): string | null;
    writeValue(value: D): void;
    registerOnChange(fn: (value: any) => void): void;
    registerOnTouched(fn: () => void): void;
    setDisabledState(disabled: boolean): void;
    _onKeydown(event: KeyboardEvent): void;
    _onInput(event: Event): void;
    _onChange(): void;
    /** Handles blur events on the input. */
    _onBlur(): void;
    private registerDatetimepicker;
    private getDisplayFormat;
    private getParseFormat;
    private _cvaOnChange;
    private _validatorOnChange;
    /** The form control validator for whether the input parses. */
    private _parseValidator;
    /** The form control validator for the min date. */
    private _minValidator;
    /** The form control validator for the max date. */
    private _maxValidator;
    /** The form control validator for the date filter. */
    private _filterValidator;
    /** The combined form control validator for this input. */
    private _validator;
    /** Formats a value and sets it on the input element. */
    private _formatValue;
    /** Returns the palette used by the input's form field, if any. */
    getThemePalette(): ThemePalette;
    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerInput<any>, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxDatetimepickerInput<any>, "input[mtxDatetimepicker]", ["mtxDatetimepickerInput"], { "mtxDatetimepicker": { "alias": "mtxDatetimepicker"; "required": false; }; "mtxDatetimepickerFilter": { "alias": "mtxDatetimepickerFilter"; "required": false; }; "value": { "alias": "value"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "dateChange": "dateChange"; "dateInput": "dateInput"; }, never, never, true, never>;
    static ngAcceptInputType_disabled: unknown;
}

/** Possible modes for datetimepicker dropdown display. */
type MtxDatetimepickerMode = 'auto' | 'portrait' | 'landscape';
/** Possible positions for the datetimepicker dropdown along the X axis. */
type DatetimepickerDropdownPositionX = 'start' | 'end';
/** Possible positions for the datetimepicker dropdown along the Y axis. */
type DatetimepickerDropdownPositionY = 'above' | 'below';
/** Injection token that determines the scroll handling while the calendar is open. */
declare const MTX_DATETIMEPICKER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
interface MtxDatetimepickerDefaultOptions {
    mode?: MtxDatetimepickerMode;
    type?: MtxDatetimepickerType;
    startView?: MtxCalendarView;
    multiYearSelector?: boolean;
    showWeekNumbers?: boolean;
    twelvehour?: boolean;
    timeInterval?: number;
    timeInput?: boolean;
    timeInputAutoFocus?: boolean;
    color?: ThemePalette;
    touchUi?: boolean;
    panelClass?: string | string[];
    calendarHeaderComponent?: ComponentType<any>;
}
/** Injection token that can be used to specify default datetimepicker options. */
declare const MTX_DATETIMEPICKER_DEFAULT_OPTIONS: InjectionToken<MtxDatetimepickerDefaultOptions>;
/**
 * Component used as the content for the datetimepicker dialog and popup. We use this instead of
 * using MtxCalendar directly as the content so we can control the initial focus. This also gives us
 * a place to put additional features of the popup that are not part of the calendar itself in the
 * future. (e.g. confirmation buttons).
 * @docs-private
 */
declare class MtxDatetimepickerContent<D> implements AfterViewInit, OnDestroy {
    protected _elementRef: ElementRef<HTMLElement>;
    protected _animationsDisabled: boolean;
    private _changeDetectorRef;
    private _ngZone;
    private _stateChanges;
    private _eventCleanups;
    private _animationFallback;
    _calendar: MtxCalendar<D>;
    color: ThemePalette;
    datetimepicker: MtxDatetimepicker<D>;
    /** Whether the datetimepicker is above or below the input. */
    _isAbove: boolean;
    /** Emits when an animation has finished. */
    readonly _animationDone: Subject<void>;
    /** Whether there is an in-progress animation. */
    _isAnimating: boolean;
    /** Id of the label for the `role="dialog"` element. */
    _dialogLabelId: string | null;
    /** Portal with projected action buttons. */
    _actionsPortal: TemplatePortal | null;
    /** The display type of datetimepicker. */
    type: MtxDatetimepickerType;
    /** The view of the calendar. */
    view: MtxCalendarView;
    /** Text for the close button. */
    _closeButtonText: string;
    /** Whether the close button currently has focus. */
    _closeButtonFocused: boolean;
    _viewChanged(view: MtxCalendarView): void;
    constructor();
    ngAfterViewInit(): void;
    ngOnDestroy(): void;
    _startExitAnimation(): void;
    private _handleAnimationEvent;
    _handleUserSelection(): void;
    /**
     * Assigns a new portal containing the datetimepicker actions.
     * @param portal Portal with the actions to be assigned.
     * @param forceRerender Whether a re-render of the portal should be triggered.
     */
    _assignActions(portal: TemplatePortal<any> | null, forceRerender: boolean): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerContent<any>, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<MtxDatetimepickerContent<any>, "mtx-datetimepicker-content", never, { "color": { "alias": "color"; "required": false; }; }, {}, never, never, true, never>;
}
declare class MtxDatetimepicker<D> implements OnDestroy {
    private _overlay;
    private _viewContainerRef;
    private _scrollStrategy;
    private _dateAdapter;
    private _dir;
    private _defaultOptions;
    private _document;
    private _injector;
    /** Whether to show multi-year view. */
    multiYearSelector: boolean;
    /** Whether the clock uses 12 hour format. */
    twelvehour: boolean;
    /** Whether to show week numbers in month view */
    showWeekNumbers: boolean;
    /** The view that the calendar should start in. */
    startView: MtxCalendarView;
    /** The display mode of datetimepicker. */
    mode: MtxDatetimepickerMode;
    /** Step over minutes. */
    timeInterval: number;
    /** Prevent user to select same date time */
    preventSameDateTimeSelection: boolean;
    /** Input for a custom header component */
    calendarHeaderComponent?: ComponentType<any>;
    /**
     * Emits new selected date when selected date changes.
     * @deprecated Switch to the `dateChange` and `dateInput` binding on the input element.
     */
    selectedChanged: EventEmitter<D>;
    /** Emits when the datetimepicker has been opened. */
    openedStream: EventEmitter<void>;
    /** Emits when the datetimepicker has been closed. */
    closedStream: EventEmitter<void>;
    /** Emits when the view has been changed. */
    viewChanged: EventEmitter<MtxCalendarView>;
    /** Classes to be passed to the date picker panel. */
    get panelClass(): string | string[];
    set panelClass(value: string | string[]);
    private _panelClass;
    /** Whether the calendar is open. */
    get opened(): boolean;
    set opened(value: boolean);
    private _opened;
    /** The id for the datetimepicker calendar. */
    id: string;
    /** Color palette to use on the datetimepicker's calendar. */
    get color(): ThemePalette;
    set color(value: ThemePalette);
    private _color;
    /** The input element this datetimepicker is associated with. */
    datetimepickerInput: MtxDatetimepickerInput<D>;
    /** Emits when the datetimepicker is disabled. */
    _disabledChange: Subject<boolean>;
    private _validSelected;
    /** A reference to the overlay into which we've rendered the calendar. */
    private _overlayRef;
    /** Reference to the component instance rendered in the overlay. */
    private _componentRef;
    /** The element that was focused before the datetimepicker was opened. */
    private _focusedElementBeforeOpen;
    /** Unique class that will be added to the backdrop so that the test harnesses can look it up. */
    private _backdropHarnessClass;
    private _inputStateChanges;
    /** Portal with projected action buttons. */
    _actionsPortal: TemplatePortal | null;
    /** Previous selected value. */
    oldValue: D | null;
    constructor();
    /** The date to open the calendar to initially. */
    get startAt(): D | null;
    set startAt(date: D | null);
    private _startAt;
    /** The display type of datetimepicker. */
    get type(): MtxDatetimepickerType;
    set type(value: MtxDatetimepickerType);
    private _type;
    /**
     * Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather
     * than a popup and elements have more padding to allow for bigger touch targets.
     */
    touchUi: boolean;
    /**
     * Whether the calendar is in time mode. In time mode the calendar clock gets time input
     * elements rather then just clock. When `touchUi` is enabled this will be disabled.
     */
    timeInput: boolean;
    /** Whether the time input should be auto-focused after view init.  */
    timeInputAutoFocus: boolean;
    /** Whether the datetimepicker pop-up should be disabled. */
    get disabled(): boolean;
    set disabled(value: boolean);
    private _disabled;
    /** Preferred position of the datetimepicker in the X axis. */
    xPosition: DatetimepickerDropdownPositionX;
    /** Preferred position of the datetimepicker in the Y axis. */
    yPosition: DatetimepickerDropdownPositionY;
    /**
     * Whether to restore focus to the previously-focused element when the panel is closed.
     * Note that automatic focus restoration is an accessibility feature and it is recommended that
     * you provide your own equivalent, if you decide to turn it off.
     */
    restoreFocus: boolean;
    /** The currently selected date. */
    get _selected(): D | null;
    set _selected(value: D | null);
    /** The minimum selectable date. */
    get _minDate(): D | null;
    /** The maximum selectable date. */
    get _maxDate(): D | null;
    get _dateFilter(): (date: D | null, type: MtxDatetimepickerFilterType) => boolean;
    _viewChanged(view: MtxCalendarView): void;
    ngOnDestroy(): void;
    /** Selects the given date */
    _select(date: D): void;
    _selectManually(): void;
    _clearSelected(): void;
    /**
     * Register an input with this datetimepicker.
     * @param input The datetimepicker input to register with this datetimepicker.
     */
    _registerInput(input: MtxDatetimepickerInput<D>): void;
    /** Open the calendar. */
    open(): void;
    /** Close the calendar. */
    close(): void;
    /**
     * Forwards relevant values from the datetimepicker to the
     * datetimepicker content inside the overlay.
     */
    protected _forwardContentValues(instance: MtxDatetimepickerContent<D>): void;
    /** Opens the overlay with the calendar. */
    private _openOverlay;
    /** Destroys the current overlay. */
    private _destroyOverlay;
    /** Gets a position strategy that will open the calendar as a dropdown. */
    private _getDialogStrategy;
    /** Gets a position strategy that will open the calendar as a dropdown. */
    private _getDropdownStrategy;
    /**
     * Sets the positions of the datetimepicker in dropdown mode based on the current configuration.
     */
    private _setConnectedPositions;
    /** Gets an observable that will emit when the overlay is supposed to be closed. */
    private _getCloseStream;
    /**
     * Registers a portal containing action buttons with the datetimepicker.
     * @param portal Portal to be registered.
     */
    registerActions(portal: TemplatePortal): void;
    /**
     * Removes a portal containing action buttons from the datetimepicker.
     * @param por