UNPKG

angular-material-components-zigzag-datetime-picker

Version:
227 lines (226 loc) 11.1 kB
/** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ import { Directionality } from '@angular/cdk/bidi'; import { Overlay, OverlayRef } from '@angular/cdk/overlay'; import { ComponentType, TemplatePortal } from '@angular/cdk/portal'; import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core'; import { CanColor, ThemePalette } from '@angular/material/core'; import { MatCalendarCellCssClasses } from '@angular/material/datepicker'; import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'; import { Subject } from 'rxjs'; import { NgxMatCalendar } from './calendar'; import { NgxMatDateAdapter } from './core/date-adapter'; import { NgxMatDatetimeInput } from './datetime-input'; import { NgxMatTimepickerComponent } from './timepicker.component'; import * as i0 from "@angular/core"; /** @docs-private */ declare const _MatDatetimepickerContentBase: import("@angular/material/core")._Constructor<CanColor> & import("@angular/material/core")._AbstractConstructor<CanColor> & { new (_elementRef: ElementRef): { _elementRef: ElementRef; }; }; /** * Component used as the content for the datepicker dialog and popup. We use this instead of using * NgxMatCalendar 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 */ export declare class NgxMatDatetimeContent<D> extends _MatDatetimepickerContentBase implements AfterViewInit, CanColor { private cd; private _viewContainerRef; /** Reference to the internal calendar component. */ _calendar: NgxMatCalendar<D>; /** Reference to the internal time picker component. */ _timePicker: NgxMatTimepickerComponent<D>; /** Reference to the datepicker that created the overlay. */ datepicker: NgxMatDatetimePicker<D>; /** Whether the datepicker is above or below the input. */ _isAbove: boolean; /** Whether or not the selected date is valid (min,max...) */ get valid(): boolean; get isViewMonth(): boolean; _templateCustomIconPortal: TemplatePortal<any>; constructor(elementRef: ElementRef, cd: ChangeDetectorRef, _viewContainerRef: ViewContainerRef); ngAfterViewInit(): void; static ɵfac: i0.ɵɵFactoryDeclaration<NgxMatDatetimeContent<any>, never>; static ɵcmp: i0.ɵɵComponentDeclaration<NgxMatDatetimeContent<any>, "ngx-mat-datetime-content", ["ngxMatDatetimeContent"], { "color": { "alias": "color"; "required": false; }; }, {}, never, never, false, never>; } /** Component responsible for managing the datepicker popup/dialog. */ export declare class NgxMatDatetimePicker<D> implements OnDestroy, CanColor { private _dialog; private _overlay; private _ngZone; private _viewContainerRef; private _dateAdapter; private _dir; private _document; private _scrollStrategy; /** An input indicating the type of the custom header component for the calendar, if set. */ calendarHeaderComponent: ComponentType<any>; /** Custom icon set by the consumer. */ _customIcon: TemplateRef<any>; /** The date to open the calendar to initially. */ get startAt(): D | null; set startAt(value: D | null); private _startAt; /** The view that the calendar should start in. */ startView: 'month' | 'year' | 'multi-year'; /** Default Color palette to use on the datepicker's calendar. */ get defaultColor(): ThemePalette; set defaultColor(value: ThemePalette); _defaultColor: ThemePalette; /** Color palette to use on the datepicker's calendar. */ get color(): ThemePalette; set color(value: ThemePalette); _color: ThemePalette; /** * 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. */ get touchUi(): boolean; set touchUi(value: boolean); private _touchUi; get hideTime(): boolean; set hideTime(value: boolean); _hideTime: boolean; /** Whether the datepicker pop-up should be disabled. */ get disabled(): boolean; set disabled(value: boolean); _disabled: boolean; /** * Emits selected year in multiyear view. * This doesn't imply a change on the selected date. */ readonly yearSelected: EventEmitter<D>; /** * Emits selected month in year view. * This doesn't imply a change on the selected date. */ readonly monthSelected: EventEmitter<D>; /** Classes to be passed to the date picker panel. Supports the same syntax as `ngClass`. */ panelClass: string | string[]; /** Function that can be used to add custom CSS classes to dates. */ dateClass: (date: D) => MatCalendarCellCssClasses; /** Emits when the datepicker has been opened. */ openedStream: EventEmitter<void>; /** Emits when the datepicker has been closed. */ closedStream: EventEmitter<void>; /** Whether the calendar is open. */ get opened(): boolean; set opened(value: boolean); private _opened; /** Whether the timepicker'spinners is shown. */ get showSpinners(): boolean; set showSpinners(value: boolean); _showSpinners: boolean; /** Whether the second part is disabled. */ get showSeconds(): boolean; set showSeconds(value: boolean); _showSeconds: boolean; /** Step hour */ get stepHour(): number; set stepHour(value: number); _stepHour: number; /** Step minute */ get stepMinute(): number; set stepMinute(value: number); _stepMinute: number; /** Step second */ get stepSecond(): number; set stepSecond(value: number); _stepSecond: number; /** Enable meridian */ get enableMeridian(): boolean; set enableMeridian(value: boolean); _enableMeridian: boolean; /** disable minute */ get disableMinute(): boolean; set disableMinute(value: boolean); _disableMinute: boolean; /** Step second */ get defaultTime(): number[]; set defaultTime(value: number[]); _defaultTime: number[]; private _hasBackdrop; /** The id for the datepicker calendar. */ id: string; /** The currently selected date. */ get _selected(): D | null; set _selected(value: D | null); private _validSelected; /** The minimum selectable date. */ get _minDate(): D | null; /** The maximum selectable date. */ get _maxDate(): D | null; get valid(): boolean; get _dateFilter(): (date: D | null) => boolean; /** A reference to the overlay when the calendar is opened as a popup. */ _popupRef: OverlayRef; /** A reference to the dialog when the calendar is opened as a dialog. */ private _dialogRef; /** A portal containing the calendar for this datepicker. */ private _calendarPortal; /** Reference to the component instantiated in popup mode. */ private _popupComponentRef; /** The element that was focused before the datepicker was opened. */ private _focusedElementBeforeOpen; /** Subscription to value changes in the associated input element. */ private _inputSubscription; /** The input element this datepicker is associated with. */ datepickerInput: NgxMatDatetimeInput<D>; /** Emits when the datepicker is disabled. */ readonly stateChanges: Subject<boolean>; /** Emits new selected date when selected date changes. */ readonly _selectedChanged: Subject<D>; /** Raw value before */ private _rawValue; constructor(_dialog: MatDialog, _overlay: Overlay, _ngZone: NgZone, _viewContainerRef: ViewContainerRef, scrollStrategy: any, _dateAdapter: NgxMatDateAdapter<D>, _dir: Directionality, _document: any); ngOnDestroy(): void; /** The form control validator for the min date. */ private _minValidator; /** The form control validator for the max date. */ private _maxValidator; /** Selects the given date */ select(date: D): void; /** Emits the selected year in multiyear view */ _selectYear(normalizedYear: D): void; /** Emits selected month in year view */ _selectMonth(normalizedMonth: D): void; /** OK button handler and close*/ ok(): void; /** Cancel and close */ cancel(): void; /** * Register an input with this datepicker. * @param input The datepicker input to register with this datepicker. */ _registerInput(input: NgxMatDatetimeInput<D>): void; /** Open the calendar. */ open(): void; /** Close the calendar. */ close(): void; /** Open the calendar as a dialog. */ private _openAsDialog; /** Open the calendar as a popup. */ private _openAsPopup; /** Create the popup. */ private _createPopup; /** Create the popup PositionStrategy. */ private _createPopupPositionStrategy; /** * @param obj The object to check. * @returns The given object if it is both a date instance and valid, otherwise null. */ private _getValidDateOrNull; /** Passes the current theme color along to the calendar overlay. */ private _setColor; static ɵfac: i0.ɵɵFactoryDeclaration<NgxMatDatetimePicker<any>, [null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>; static ɵcmp: i0.ɵɵComponentDeclaration<NgxMatDatetimePicker<any>, "ngx-mat-datetime-picker", ["ngxMatDatetimePicker"], { "calendarHeaderComponent": { "alias": "calendarHeaderComponent"; "required": false; }; "startAt": { "alias": "startAt"; "required": false; }; "startView": { "alias": "startView"; "required": false; }; "defaultColor": { "alias": "defaultColor"; "required": false; }; "color": { "alias": "color"; "required": false; }; "touchUi": { "alias": "touchUi"; "required": false; }; "hideTime": { "alias": "hideTime"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; "showSpinners": { "alias": "showSpinners"; "required": false; }; "showSeconds": { "alias": "showSeconds"; "required": false; }; "stepHour": { "alias": "stepHour"; "required": false; }; "stepMinute": { "alias": "stepMinute"; "required": false; }; "stepSecond": { "alias": "stepSecond"; "required": false; }; "enableMeridian": { "alias": "enableMeridian"; "required": false; }; "disableMinute": { "alias": "disableMinute"; "required": false; }; "defaultTime": { "alias": "defaultTime"; "required": false; }; }, { "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "openedStream": "opened"; "closedStream": "closed"; }, ["_customIcon"], never, false, never>; } export {};