angular-material-components-zigzag-datetime-picker
Version:
Angular Material Datetime Picker
227 lines (226 loc) • 11.1 kB
TypeScript
/**
* @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 {};