@herculesproject/datetime-picker
Version:
Angular Material Datetime Picker
1,232 lines (1,226 loc) • 204 kB
JavaScript
import { ComponentPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
import { InjectionToken, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, NgZone, Input, Output, Injectable, ChangeDetectorRef, Optional, Inject, ViewChild, forwardRef, ViewContainerRef, ContentChild, TemplateRef, Directive, NgModule } from '@angular/core';
import { DateRange, MatDatepickerIntl, matDatepickerAnimations, MAT_DATEPICKER_SCROLL_STRATEGY, MatDatepickerModule, MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER } from '@angular/material/datepicker';
import { Subscription, Subject, merge } from 'rxjs';
import { DateAdapter, mixinColor, MAT_DATE_LOCALE } from '@angular/material/core';
import { ESCAPE, SPACE, ENTER, PAGE_DOWN, PAGE_UP, END, HOME, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW } from '@angular/cdk/keycodes';
import { Directionality } from '@angular/cdk/bidi';
import { take, startWith, takeUntil, debounceTime, filter } from 'rxjs/operators';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { OverlayConfig, Overlay } from '@angular/cdk/overlay';
import { DOCUMENT, CommonModule } from '@angular/common';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { Validators, NG_VALUE_ACCESSOR, FormBuilder, NG_VALIDATORS, ReactiveFormsModule, FormsModule } from '@angular/forms';
import { MatFormField } from '@angular/material/form-field';
import { MAT_INPUT_VALUE_ACCESSOR, MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { Platform, PlatformModule } from '@angular/cdk/platform';
/**
* @fileoverview added by tsickle
* Generated from: lib/core/date-adapter.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @abstract
* @template D
*/
class NgxMatDateAdapter extends DateAdapter {
/**
* Check if two date have same time
* @param {?} a Date 1
* @param {?} b Date 2
* @return {?}
*/
isSameTime(a, b) {
if (a == null || b == null)
return true;
return this.getHour(a) === this.getHour(b)
&& this.getMinute(a) === this.getMinute(b)
&& this.getSecond(a) === this.getSecond(b);
}
/**
* Copy time from a date to a another date
* @param {?} toDate
* @param {?} fromDate
* @return {?}
*/
copyTime(toDate, fromDate) {
/** @type {?} */
let value = toDate;
value = this.setHour(toDate, this.getHour(fromDate));
value = this.setMinute(toDate, this.getMinute(fromDate));
value = this.setSecond(toDate, this.getSecond(fromDate));
return value;
}
/**
* Compares two dates.
* @param {?} first The first date to compare.
* @param {?} second The second date to compare.
* @param {?=} showSeconds
* @return {?} 0 if the dates are equal, a number less than 0 if the first date is earlier,
* a number greater than 0 if the first date is later.
*/
compareDateWithTime(first, second, showSeconds) {
/** @type {?} */
let res = super.compareDate(first, second) ||
this.getHour(first) - this.getHour(second) ||
this.getMinute(first) - this.getMinute(second);
if (showSeconds) {
res = res || this.getSecond(first) - this.getSecond(second);
}
return res;
}
/**
* Set time by using default values
* @param {?} date
* @param {?} defaultTime List default values [hour, minute, second]
* @return {?}
*/
setTimeByDefaultValues(date, defaultTime) {
if (!Array.isArray(defaultTime)) {
throw Error('@Input DefaultTime should be an array');
}
/** @type {?} */
let value = date;
value = this.setHour(date, defaultTime[0] || 0);
value = this.setMinute(date, defaultTime[1] || 0);
value = this.setSecond(date, defaultTime[2] || 0);
return value;
}
}
if (false) {
/**
* Gets the hour component of the given date.
* @abstract
* @param {?} date The date to extract the month from.
* @return {?} The hour component.
*/
NgxMatDateAdapter.prototype.getHour = function (date) { };
/**
* Gets the minute component of the given date.
* @abstract
* @param {?} date The date to extract the month from.
* @return {?} The minute component.
*/
NgxMatDateAdapter.prototype.getMinute = function (date) { };
/**
* Gets the second component of the given date.
* @abstract
* @param {?} date The date to extract the month from.
* @return {?} The second component.
*/
NgxMatDateAdapter.prototype.getSecond = function (date) { };
/**
* Set the hour component of the given date.
* @abstract
* @param {?} date The date to extract the month from.
* @param {?} value The value to set.
* @return {?}
*/
NgxMatDateAdapter.prototype.setHour = function (date, value) { };
/**
* Set the second component of the given date.
* @abstract
* @param {?} date The date to extract the month from.
* @param {?} value The value to set.
* @return {?}
*/
NgxMatDateAdapter.prototype.setMinute = function (date, value) { };
/**
* Set the second component of the given date.
* @abstract
* @param {?} date The date to extract the month from.
* @param {?} value The value to set.
* @return {?}
*/
NgxMatDateAdapter.prototype.setSecond = function (date, value) { };
}
/**
* @fileoverview added by tsickle
* Generated from: lib/core/date-formats.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const NGX_MAT_DATE_FORMATS = new InjectionToken('ngx-mat-date-formats');
/**
* @fileoverview added by tsickle
* Generated from: lib/calendar-body.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* An internal class that represents the data corresponding to a single calendar cell.
* \@docs-private
* @template D
*/
class NgxMatCalendarCell {
/**
* @param {?} value
* @param {?} displayValue
* @param {?} ariaLabel
* @param {?} enabled
* @param {?=} cssClasses
* @param {?=} compareValue
* @param {?=} rawValue
*/
constructor(value, displayValue, ariaLabel, enabled, cssClasses = {}, compareValue = value, rawValue) {
this.value = value;
this.displayValue = displayValue;
this.ariaLabel = ariaLabel;
this.enabled = enabled;
this.cssClasses = cssClasses;
this.compareValue = compareValue;
this.rawValue = rawValue;
}
}
if (false) {
/** @type {?} */
NgxMatCalendarCell.prototype.value;
/** @type {?} */
NgxMatCalendarCell.prototype.displayValue;
/** @type {?} */
NgxMatCalendarCell.prototype.ariaLabel;
/** @type {?} */
NgxMatCalendarCell.prototype.enabled;
/** @type {?} */
NgxMatCalendarCell.prototype.cssClasses;
/** @type {?} */
NgxMatCalendarCell.prototype.compareValue;
/** @type {?} */
NgxMatCalendarCell.prototype.rawValue;
}
/**
* Event emitted when a date inside the calendar is triggered as a result of a user action.
* @record
* @template D
*/
function NgxMatCalendarUserEvent() { }
if (false) {
/** @type {?} */
NgxMatCalendarUserEvent.prototype.value;
/** @type {?} */
NgxMatCalendarUserEvent.prototype.event;
}
/**
* An internal component used to display calendar data in a table.
* \@docs-private
*/
class NgxMatCalendarBody {
/**
* @param {?} _elementRef
* @param {?} _ngZone
*/
constructor(_elementRef, _ngZone) {
this._elementRef = _elementRef;
this._ngZone = _ngZone;
/**
* The number of columns in the table.
*/
this.numCols = 7;
/**
* The cell number of the active cell in the table.
*/
this.activeCell = 0;
/**
* Whether a range is being selected.
*/
this.isRange = false;
/**
* The aspect ratio (width / height) to use for the cells in the table. This aspect ratio will be
* maintained even as the table resizes.
*/
this.cellAspectRatio = 1;
/**
* Start of the preview range.
*/
this.previewStart = null;
/**
* End of the preview range.
*/
this.previewEnd = null;
/**
* Emits when a new value is selected.
*/
this.selectedValueChange = new EventEmitter();
/**
* Emits when the preview has changed as a result of a user action.
*/
this.previewChange = new EventEmitter();
/**
* Event handler for when the user enters an element
* inside the calendar body (e.g. by hovering in or focus).
*/
this._enterHandler = (/**
* @param {?} event
* @return {?}
*/
(event) => {
if (this._skipNextFocus && event.type === 'focus') {
this._skipNextFocus = false;
return;
}
// We only need to hit the zone when we're selecting a range.
if (event.target && this.isRange) {
/** @type {?} */
const cell = this._getCellFromElement((/** @type {?} */ (event.target)));
if (cell) {
this._ngZone.run((/**
* @return {?}
*/
() => this.previewChange.emit({ value: cell.enabled ? cell : null, event })));
}
}
});
/**
* Event handler for when the user's pointer leaves an element
* inside the calendar body (e.g. by hovering out or blurring).
*/
this._leaveHandler = (/**
* @param {?} event
* @return {?}
*/
(event) => {
// We only need to hit the zone when we're selecting a range.
if (this.previewEnd !== null && this.isRange) {
// Only reset the preview end value when leaving cells. This looks better, because
// we have a gap between the cells and the rows and we don't want to remove the
// range just for it to show up again when the user moves a few pixels to the side.
if (event.target && isTableCell((/** @type {?} */ (event.target)))) {
this._ngZone.run((/**
* @return {?}
*/
() => this.previewChange.emit({ value: null, event })));
}
}
});
_ngZone.runOutsideAngular((/**
* @return {?}
*/
() => {
/** @type {?} */
const element = _elementRef.nativeElement;
element.addEventListener('mouseenter', this._enterHandler, true);
element.addEventListener('focus', this._enterHandler, true);
element.addEventListener('mouseleave', this._leaveHandler, true);
element.addEventListener('blur', this._leaveHandler, true);
}));
}
/**
* Called when a cell is clicked.
* @param {?} cell
* @param {?} event
* @return {?}
*/
_cellClicked(cell, event) {
if (cell.enabled) {
this.selectedValueChange.emit({ value: cell.value, event });
}
}
/**
* Returns whether a cell should be marked as selected.
* @param {?} cell
* @return {?}
*/
_isSelected(cell) {
return this.startValue === cell.compareValue || this.endValue === cell.compareValue;
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
/** @type {?} */
const columnChanges = changes['numCols'];
const { rows, numCols } = this;
if (changes['rows'] || columnChanges) {
this._firstRowOffset = rows && rows.length && rows[0].length ? numCols - rows[0].length : 0;
}
if (changes['cellAspectRatio'] || columnChanges || !this._cellPadding) {
this._cellPadding = `${50 * this.cellAspectRatio / numCols}%`;
}
if (columnChanges || !this._cellWidth) {
this._cellWidth = `${100 / numCols}%`;
}
}
/**
* @return {?}
*/
ngOnDestroy() {
/** @type {?} */
const element = this._elementRef.nativeElement;
element.removeEventListener('mouseenter', this._enterHandler, true);
element.removeEventListener('focus', this._enterHandler, true);
element.removeEventListener('mouseleave', this._leaveHandler, true);
element.removeEventListener('blur', this._leaveHandler, true);
}
/**
* Returns whether a cell is active.
* @param {?} rowIndex
* @param {?} colIndex
* @return {?}
*/
_isActiveCell(rowIndex, colIndex) {
/** @type {?} */
let cellNumber = rowIndex * this.numCols + colIndex;
// Account for the fact that the first row may not have as many cells.
if (rowIndex) {
cellNumber -= this._firstRowOffset;
}
return cellNumber == this.activeCell;
}
/**
* Focuses the active cell after the microtask queue is empty.
* @param {?=} movePreview
* @return {?}
*/
_focusActiveCell(movePreview = true) {
this._ngZone.runOutsideAngular((/**
* @return {?}
*/
() => {
this._ngZone.onStable.asObservable().pipe(take(1)).subscribe((/**
* @return {?}
*/
() => {
/** @type {?} */
const activeCell = this._elementRef.nativeElement.querySelector('.ngx-mat-calendar-body-active');
if (activeCell) {
if (!movePreview) {
this._skipNextFocus = true;
}
activeCell.focus();
}
}));
}));
}
/**
* Gets whether a value is the start of the main range.
* @param {?} value
* @return {?}
*/
_isRangeStart(value) {
return isStart(value, this.startValue, this.endValue);
}
/**
* Gets whether a value is the end of the main range.
* @param {?} value
* @return {?}
*/
_isRangeEnd(value) {
return isEnd(value, this.startValue, this.endValue);
}
/**
* Gets whether a value is within the currently-selected range.
* @param {?} value
* @return {?}
*/
_isInRange(value) {
return isInRange(value, this.startValue, this.endValue, this.isRange);
}
/**
* Gets whether a value is the start of the comparison range.
* @param {?} value
* @return {?}
*/
_isComparisonStart(value) {
return isStart(value, this.comparisonStart, this.comparisonEnd);
}
/**
* Whether the cell is a start bridge cell between the main and comparison ranges.
* @param {?} value
* @param {?} rowIndex
* @param {?} colIndex
* @return {?}
*/
_isComparisonBridgeStart(value, rowIndex, colIndex) {
if (!this._isComparisonStart(value) || this._isRangeStart(value) || !this._isInRange(value)) {
return false;
}
/** @type {?} */
let previousCell = this.rows[rowIndex][colIndex - 1];
if (!previousCell) {
/** @type {?} */
const previousRow = this.rows[rowIndex - 1];
previousCell = previousRow && previousRow[previousRow.length - 1];
}
return previousCell && !this._isRangeEnd(previousCell.compareValue);
}
/**
* Whether the cell is an end bridge cell between the main and comparison ranges.
* @param {?} value
* @param {?} rowIndex
* @param {?} colIndex
* @return {?}
*/
_isComparisonBridgeEnd(value, rowIndex, colIndex) {
if (!this._isComparisonEnd(value) || this._isRangeEnd(value) || !this._isInRange(value)) {
return false;
}
/** @type {?} */
let nextCell = this.rows[rowIndex][colIndex + 1];
if (!nextCell) {
/** @type {?} */
const nextRow = this.rows[rowIndex + 1];
nextCell = nextRow && nextRow[0];
}
return nextCell && !this._isRangeStart(nextCell.compareValue);
}
/**
* Gets whether a value is the end of the comparison range.
* @param {?} value
* @return {?}
*/
_isComparisonEnd(value) {
return isEnd(value, this.comparisonStart, this.comparisonEnd);
}
/**
* Gets whether a value is within the current comparison range.
* @param {?} value
* @return {?}
*/
_isInComparisonRange(value) {
return isInRange(value, this.comparisonStart, this.comparisonEnd, this.isRange);
}
/**
* Gets whether a value is the start of the preview range.
* @param {?} value
* @return {?}
*/
_isPreviewStart(value) {
return isStart(value, this.previewStart, this.previewEnd);
}
/**
* Gets whether a value is the end of the preview range.
* @param {?} value
* @return {?}
*/
_isPreviewEnd(value) {
return isEnd(value, this.previewStart, this.previewEnd);
}
/**
* Gets whether a value is inside the preview range.
* @param {?} value
* @return {?}
*/
_isInPreview(value) {
return isInRange(value, this.previewStart, this.previewEnd, this.isRange);
}
/**
* Finds the NgxMatCalendarCell that corresponds to a DOM node.
* @private
* @param {?} element
* @return {?}
*/
_getCellFromElement(element) {
/** @type {?} */
let cell;
if (isTableCell(element)) {
cell = element;
}
else if (isTableCell((/** @type {?} */ (element.parentNode)))) {
cell = (/** @type {?} */ (element.parentNode));
}
if (cell) {
/** @type {?} */
const row = cell.getAttribute('data-ngx-mat-row');
/** @type {?} */
const col = cell.getAttribute('data-ngx-mat-col');
if (row && col) {
return this.rows[parseInt(row)][parseInt(col)];
}
}
return null;
}
}
NgxMatCalendarBody.decorators = [
{ type: Component, args: [{
selector: '[ngx-mat-calendar-body]',
template: "<!--\n If there's not enough space in the first row, create a separate label row. We mark this row as\n aria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n<tr *ngIf=\"_firstRowOffset < labelMinRequiredCells\" aria-hidden=\"true\">\n <td class=\"mat-calendar-body-label\"\n [attr.colspan]=\"numCols\"\n [style.paddingTop]=\"_cellPadding\"\n [style.paddingBottom]=\"_cellPadding\">\n {{label}}\n </td>\n</tr>\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n<tr *ngFor=\"let row of rows; let rowIndex = index\" role=\"row\">\n <!--\n We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\n The aspect ratio of the table cells is maintained by setting the top and bottom padding as a\n percentage of the width (a variant of the trick described here:\n https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).\n -->\n <td *ngIf=\"rowIndex === 0 && _firstRowOffset\"\n aria-hidden=\"true\"\n class=\"mat-calendar-body-label\"\n [attr.colspan]=\"_firstRowOffset\"\n [style.paddingTop]=\"_cellPadding\"\n [style.paddingBottom]=\"_cellPadding\">\n {{_firstRowOffset >= labelMinRequiredCells ? label : ''}}\n </td>\n <td *ngFor=\"let item of row; let colIndex = index\"\n role=\"gridcell\"\n class=\"mat-calendar-body-cell\"\n [ngClass]=\"item.cssClasses\"\n [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n [attr.data-mat-row]=\"rowIndex\"\n [attr.data-mat-col]=\"colIndex\"\n [class.mat-calendar-body-disabled]=\"!item.enabled\"\n [class.mat-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n [class.mat-calendar-body-range-start]=\"_isRangeStart(item.compareValue)\"\n [class.mat-calendar-body-range-end]=\"_isRangeEnd(item.compareValue)\"\n [class.mat-calendar-body-in-range]=\"_isInRange(item.compareValue)\"\n [class.mat-calendar-body-comparison-bridge-start]=\"_isComparisonBridgeStart(item.compareValue, rowIndex, colIndex)\"\n [class.mat-calendar-body-comparison-bridge-end]=\"_isComparisonBridgeEnd(item.compareValue, rowIndex, colIndex)\"\n [class.mat-calendar-body-comparison-start]=\"_isComparisonStart(item.compareValue)\"\n [class.mat-calendar-body-comparison-end]=\"_isComparisonEnd(item.compareValue)\"\n [class.mat-calendar-body-in-comparison-range]=\"_isInComparisonRange(item.compareValue)\"\n [class.mat-calendar-body-preview-start]=\"_isPreviewStart(item.compareValue)\"\n [class.mat-calendar-body-preview-end]=\"_isPreviewEnd(item.compareValue)\"\n [class.mat-calendar-body-in-preview]=\"_isInPreview(item.compareValue)\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.aria-disabled]=\"!item.enabled || null\"\n [attr.aria-selected]=\"_isSelected(item)\"\n (click)=\"_cellClicked(item, $event)\"\n [style.width]=\"_cellWidth\"\n [style.paddingTop]=\"_cellPadding\"\n [style.paddingBottom]=\"_cellPadding\">\n <div class=\"mat-calendar-body-cell-content mat-focus-indicator\"\n [class.mat-calendar-body-selected]=\"_isSelected(item)\"\n [class.mat-calendar-body-today]=\"todayValue === item.compareValue\">\n {{item.displayValue}}\n </div>\n <div class=\"mat-calendar-body-cell-preview\"></div>\n </td>\n</tr>\n",
host: {
'class': 'ngx-mat-calendar-body',
'role': 'grid',
'aria-readonly': 'true'
},
exportAs: 'NgxMatCalendarBody',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [".mat-calendar-body{min-width:224px}.mat-calendar-body-label{height:0;line-height:0;padding-left:4.7142857143%;padding-right:4.7142857143%;text-align:left}.mat-calendar-body-cell{cursor:pointer;height:0;line-height:0;outline:none;position:relative;text-align:center}.mat-calendar-body-cell-preview,.mat-calendar-body-cell:after,.mat-calendar-body-cell:before{box-sizing:border-box;content:\"\";height:90%;left:0;position:absolute;top:5%;width:100%;z-index:0}.mat-calendar-body-comparison-start:after,.mat-calendar-body-comparison-start:not(.mat-calendar-body-comparison-bridge-start):before,.mat-calendar-body-preview-start .mat-calendar-body-cell-preview,.mat-calendar-body-range-start:after,.mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range):before{border-bottom-left-radius:999px;border-top-left-radius:999px;left:5%;width:95%}[dir=rtl] .mat-calendar-body-comparison-start:after,[dir=rtl] .mat-calendar-body-comparison-start:not(.mat-calendar-body-comparison-bridge-start):before,[dir=rtl] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview,[dir=rtl] .mat-calendar-body-range-start:after,[dir=rtl] .mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range):before{border-bottom-right-radius:999px;border-radius:0;border-top-right-radius:999px;left:0}.mat-calendar-body-comparison-end:after,.mat-calendar-body-comparison-end:not(.mat-calendar-body-comparison-bridge-end):before,.mat-calendar-body-preview-end .mat-calendar-body-cell-preview,.mat-calendar-body-range-end:after,.mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range):before{border-bottom-right-radius:999px;border-top-right-radius:999px;width:95%}[dir=rtl] .mat-calendar-body-comparison-end:after,[dir=rtl] .mat-calendar-body-comparison-end:not(.mat-calendar-body-comparison-bridge-end):before,[dir=rtl] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview,[dir=rtl] .mat-calendar-body-range-end:after,[dir=rtl] .mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range):before{border-bottom-left-radius:999px;border-radius:0;border-top-left-radius:999px;left:5%}[dir=rtl] .mat-calendar-body-comparison-bridge-end.mat-calendar-body-range-start:after,[dir=rtl] .mat-calendar-body-comparison-bridge-start.mat-calendar-body-range-end:after{border-bottom-right-radius:999px;border-top-right-radius:999px;width:95%}.mat-calendar-body-comparison-end.mat-calendar-body-range-start:after,.mat-calendar-body-comparison-start.mat-calendar-body-range-end:after,[dir=rtl] .mat-calendar-body-comparison-end.mat-calendar-body-range-start:after,[dir=rtl] .mat-calendar-body-comparison-start.mat-calendar-body-range-end:after{width:90%}.mat-calendar-body-in-preview .mat-calendar-body-cell-preview{border-bottom:1px dashed;border-top:1px dashed}.mat-calendar-body-preview-start .mat-calendar-body-cell-preview{border-left:1px dashed}[dir=rtl] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview{border-left:0;border-right:1px dashed}.mat-calendar-body-preview-end .mat-calendar-body-cell-preview{border-right:1px dashed}[dir=rtl] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview{border-left:1px dashed;border-right:0}.mat-calendar-body-disabled{cursor:default}.mat-calendar-body-cell-content{align-items:center;border-radius:999px;border-style:solid;border-width:1px;box-sizing:border-box;display:flex;height:90%;justify-content:center;left:5%;line-height:1;top:5%;width:90%;z-index:1}.mat-calendar-body-cell-content.mat-focus-indicator{position:absolute}.cdk-high-contrast-active .mat-calendar-body-cell-content{border:none}.cdk-high-contrast-active .mat-calendar-body-selected,.cdk-high-contrast-active .mat-datepicker-popup:not(:empty){outline:1px solid}.cdk-high-contrast-active .mat-calendar-body-today{outline:1px dotted}.cdk-high-contrast-active .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected),.cdk-high-contrast-active .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected){outline:2px dotted}[dir=rtl] .mat-calendar-body-label{text-align:right}@media (hover:none){.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected){background-color:transparent}}"]
}] }
];
/** @nocollapse */
NgxMatCalendarBody.ctorParameters = () => [
{ type: ElementRef },
{ type: NgZone }
];
NgxMatCalendarBody.propDecorators = {
label: [{ type: Input }],
rows: [{ type: Input }],
todayValue: [{ type: Input }],
startValue: [{ type: Input }],
endValue: [{ type: Input }],
labelMinRequiredCells: [{ type: Input }],
numCols: [{ type: Input }],
activeCell: [{ type: Input }],
isRange: [{ type: Input }],
cellAspectRatio: [{ type: Input }],
comparisonStart: [{ type: Input }],
comparisonEnd: [{ type: Input }],
previewStart: [{ type: Input }],
previewEnd: [{ type: Input }],
selectedValueChange: [{ type: Output }],
previewChange: [{ type: Output }]
};
if (false) {
/**
* 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.
* @type {?}
* @private
*/
NgxMatCalendarBody.prototype._skipNextFocus;
/**
* The label for the table. (e.g. "Jan 2017").
* @type {?}
*/
NgxMatCalendarBody.prototype.label;
/**
* The cells to display in the table.
* @type {?}
*/
NgxMatCalendarBody.prototype.rows;
/**
* The value in the table that corresponds to today.
* @type {?}
*/
NgxMatCalendarBody.prototype.todayValue;
/**
* Start value of the selected date range.
* @type {?}
*/
NgxMatCalendarBody.prototype.startValue;
/**
* End value of the selected date range.
* @type {?}
*/
NgxMatCalendarBody.prototype.endValue;
/**
* The minimum number of free cells needed to fit the label in the first row.
* @type {?}
*/
NgxMatCalendarBody.prototype.labelMinRequiredCells;
/**
* The number of columns in the table.
* @type {?}
*/
NgxMatCalendarBody.prototype.numCols;
/**
* The cell number of the active cell in the table.
* @type {?}
*/
NgxMatCalendarBody.prototype.activeCell;
/**
* Whether a range is being selected.
* @type {?}
*/
NgxMatCalendarBody.prototype.isRange;
/**
* The aspect ratio (width / height) to use for the cells in the table. This aspect ratio will be
* maintained even as the table resizes.
* @type {?}
*/
NgxMatCalendarBody.prototype.cellAspectRatio;
/**
* Start of the comparison range.
* @type {?}
*/
NgxMatCalendarBody.prototype.comparisonStart;
/**
* End of the comparison range.
* @type {?}
*/
NgxMatCalendarBody.prototype.comparisonEnd;
/**
* Start of the preview range.
* @type {?}
*/
NgxMatCalendarBody.prototype.previewStart;
/**
* End of the preview range.
* @type {?}
*/
NgxMatCalendarBody.prototype.previewEnd;
/**
* Emits when a new value is selected.
* @type {?}
*/
NgxMatCalendarBody.prototype.selectedValueChange;
/**
* Emits when the preview has changed as a result of a user action.
* @type {?}
*/
NgxMatCalendarBody.prototype.previewChange;
/**
* The number of blank cells to put at the beginning for the first row.
* @type {?}
*/
NgxMatCalendarBody.prototype._firstRowOffset;
/**
* Padding for the individual date cells.
* @type {?}
*/
NgxMatCalendarBody.prototype._cellPadding;
/**
* Width of an individual cell.
* @type {?}
*/
NgxMatCalendarBody.prototype._cellWidth;
/**
* Event handler for when the user enters an element
* inside the calendar body (e.g. by hovering in or focus).
* @type {?}
* @private
*/
NgxMatCalendarBody.prototype._enterHandler;
/**
* Event handler for when the user's pointer leaves an element
* inside the calendar body (e.g. by hovering out or blurring).
* @type {?}
* @private
*/
NgxMatCalendarBody.prototype._leaveHandler;
/**
* @type {?}
* @private
*/
NgxMatCalendarBody.prototype._elementRef;
/**
* @type {?}
* @private
*/
NgxMatCalendarBody.prototype._ngZone;
}
/**
* Checks whether a node is a table cell element.
* @param {?} node
* @return {?}
*/
function isTableCell(node) {
return node.nodeName === 'TD';
}
/**
* Checks whether a value is the start of a range.
* @param {?} value
* @param {?} start
* @param {?} end
* @return {?}
*/
function isStart(value, start, end) {
return end !== null && start !== end && value < end && value === start;
}
/**
* Checks whether a value is the end of a range.
* @param {?} value
* @param {?} start
* @param {?} end
* @return {?}
*/
function isEnd(value, start, end) {
return start !== null && start !== end && value >= start && value === end;
}
/**
* Checks whether a value is inside of a range.
* @param {?} value
* @param {?} start
* @param {?} end
* @param {?} rangeEnabled
* @return {?}
*/
function isInRange(value, start, end, rangeEnabled) {
return rangeEnabled && start !== null && end !== null && start !== end &&
value >= start && value <= end;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/date-range-selection-strategy.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Injection token used to customize the date range selection behavior.
* @type {?}
*/
const NGX_MAT_DATE_RANGE_SELECTION_STRATEGY = new InjectionToken('NGX_MAT_DATE_RANGE_SELECTION_STRATEGY');
/**
* Object that can be provided in order to customize the date range selection behavior.
* @record
* @template D
*/
function NgxMatDateRangeSelectionStrategy() { }
if (false) {
/**
* 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.
* @return {?}
*/
NgxMatDateRangeSelectionStrategy.prototype.selectionFinished = function (date, currentRange, event) { };
/**
* 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.
* @return {?}
*/
NgxMatDateRangeSelectionStrategy.prototype.createPreview = function (activeDate, currentRange, event) { };
}
/**
* Provides the default date range selection behavior.
* @template D
*/
class DefaultNgxMatCalendarRangeStrategy {
/**
* @param {?} _dateAdapter
*/
constructor(_dateAdapter) {
this._dateAdapter = _dateAdapter;
}
/**
* @param {?} date
* @param {?} currentRange
* @return {?}
*/
selectionFinished(date, currentRange) {
let { start, end } = currentRange;
if (start == null) {
start = date;
}
else if (end == null && date && this._dateAdapter.compareDate(date, start) >= 0) {
end = date;
}
else {
start = date;
end = null;
}
return new DateRange(start, end);
}
/**
* @param {?} activeDate
* @param {?} currentRange
* @return {?}
*/
createPreview(activeDate, currentRange) {
/** @type {?} */
let start = null;
/** @type {?} */
let end = null;
if (currentRange.start && !currentRange.end && activeDate) {
start = currentRange.start;
end = activeDate;
}
return new DateRange(start, end);
}
}
DefaultNgxMatCalendarRangeStrategy.decorators = [
{ type: Injectable }
];
/** @nocollapse */
DefaultNgxMatCalendarRangeStrategy.ctorParameters = () => [
{ type: NgxMatDateAdapter }
];
if (false) {
/**
* @type {?}
* @private
*/
DefaultNgxMatCalendarRangeStrategy.prototype._dateAdapter;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/utils/date-utils.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const LIMIT_TIMES = {
minHour: 0,
maxHour: 24,
minMinute: 0,
maxMinute: 60,
minSecond: 0,
maxSecond: 60,
meridian: 12
};
/** @type {?} */
const MERIDIANS = {
AM: 'AM',
PM: 'PM'
};
/** @type {?} */
const DEFAULT_STEP = 1;
/** @type {?} */
const NUMERIC_REGEX = /[^0-9]/g;
/** @type {?} */
const PATTERN_INPUT_HOUR = /^(2[0-3]|[0-1][0-9]|[0-9])$/;
/** @type {?} */
const PATTERN_INPUT_MINUTE = /^([0-5][0-9]|[0-9])$/;
/** @type {?} */
const PATTERN_INPUT_SECOND = /^([0-5][0-9]|[0-9])$/;
/**
* @param {?} val
* @return {?}
*/
function formatTwoDigitTimeValue(val) {
/** @type {?} */
const txt = val.toString();
return txt.length > 1 ? txt : `0${txt}`;
}
/**
* @param {?} provider
* @return {?}
*/
function createMissingDateImplError(provider) {
return Error(`NgxMatDatepicker: No provider found for ${provider}. You must import one of the following ` +
`modules at your application root: NgxMatNativeDateModule, NgxMatMomentModule, or provide a ` +
`custom implementation.`);
}
/**
* Formats a range of years.
* @param {?} start
* @param {?} end
* @return {?}
*/
function formatYearRange(start, end) {
return `${start} \u2013 ${end}`;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/month-view.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const DAYS_PER_WEEK = 7;
/**
* An internal component used to display a single month in the datepicker.
* \@docs-private
* @template D
*/
class NgxMatMonthView {
/**
* @param {?} _changeDetectorRef
* @param {?} _dateFormats
* @param {?} _dateAdapter
* @param {?=} _dir
* @param {?=} _rangeStrategy
*/
constructor(_changeDetectorRef, _dateFormats, _dateAdapter, _dir, _rangeStrategy) {
this._changeDetectorRef = _changeDetectorRef;
this._dateFormats = _dateFormats;
this._dateAdapter = _dateAdapter;
this._dir = _dir;
this._rangeStrategy = _rangeStrategy;
this._rerenderSubscription = Subscription.EMPTY;
/**
* Emits when a new date is selected.
*/
this.selectedChange = new EventEmitter();
/**
* Emits when any date is selected.
*/
this._userSelection = new EventEmitter();
/**
* Emits when any date is activated.
*/
this.activeDateChange = new EventEmitter();
if (!this._dateAdapter) {
throw createMissingDateImplError('NgxMatDateAdapter');
}
if (!this._dateFormats) {
throw createMissingDateImplError('NGX_MAT_DATE_FORMATS');
}
this._activeDate = this._dateAdapter.today();
}
/**
* The date to display in this month view (everything other than the month and year is ignored).
* @return {?}
*/
get activeDate() { return this._activeDate; }
/**
* @param {?} value
* @return {?}
*/
set activeDate(value) {
/** @type {?} */
const oldActiveDate = this._activeDate;
/** @type {?} */
const validDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();
this._activeDate = this._dateAdapter.clampDate(validDate, this.minDate, this.maxDate);
if (!this._hasSameMonthAndYear(oldActiveDate, this._activeDate)) {
this._init();
}
}
/**
* The currently selected date.
* @return {?}
*/
get selected() { return this._selected; }
/**
* @param {?} value
* @return {?}
*/
set selected(value) {
if (value instanceof DateRange) {
this._selected = value;
}
else {
this._selected = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
}
this._setRanges(this._selected);
}
/**
* The minimum selectable date.
* @return {?}
*/
get minDate() { return this._minDate; }
/**
* @param {?} value
* @return {?}
*/
set minDate(value) {
this._minDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
}
/**
* The maximum selectable date.
* @return {?}
*/
get maxDate() { return this._maxDate; }
/**
* @param {?} value
* @return {?}
*/
set maxDate(value) {
this._maxDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
}
/**
* @return {?}
*/
ngAfterContentInit() {
this._rerenderSubscription = this._dateAdapter.localeChanges
.pipe(startWith(null))
.subscribe((/**
* @return {?}
*/
() => this._init()));
}
/**
* @return {?}
*/
ngOnDestroy() {
this._rerenderSubscription.unsubscribe();
}
/**
* Handles when a new date is selected.
* @param {?} event
* @return {?}
*/
_dateSelected(event) {
/** @type {?} */
const date = event.value;
/** @type {?} */
const selectedYear = this._dateAdapter.getYear(this.activeDate);
/** @type {?} */
const selectedMonth = this._dateAdapter.getMonth(this.activeDate);
/** @type {?} */
const selectedDate = this._dateAdapter.createDate(selectedYear, selectedMonth, date);
/** @type {?} */
let rangeStartDate;
/** @type {?} */
let rangeEndDate;
if (this._selected instanceof DateRange) {
rangeStartDate = this._getDateInCurrentMonth(this._selected.start);
rangeEndDate = this._getDateInCurrentMonth(this._selected.end);
}
else {
rangeStartDate = rangeEndDate = this._getDateInCurrentMonth(this._selected);
}
if (rangeStartDate !== date || rangeEndDate !== date) {
this.selectedChange.emit(selectedDate);
}
this._userSelection.emit({ value: selectedDate, event: event.event });
}
/**
* Handles keydown events on the calendar body when calendar is in month view.
* @param {?} event
* @return {?}
*/
_handleCalendarBodyKeydown(event) {
// TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent
// disabled ones from being selected. This may not be ideal, we should look into whether
// navigation should skip over disabled dates, and if so, how to implement that efficiently.
// TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent
// disabled ones from being selected. This may not be ideal, we should look into whether
// navigation should skip over disabled dates, and if so, how to implement that efficiently.
/** @type {?} */
const oldActiveDate = this._activeDate;
/** @type {?} */
const isRtl = this._isRtl();
switch (event.keyCode) {
case LEFT_ARROW:
this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, isRtl ? 1 : -1);
break;
case RIGHT_ARROW:
this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, isRtl ? -1 : 1);
break;
case UP_ARROW:
this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, -7);
break;
case DOWN_ARROW:
this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, 7);
break;
case HOME:
this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, 1 - this._dateAdapter.getDate(this._activeDate));
break;
case END:
this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, (this._dateAdapter.getNumDaysInMonth(this._activeDate) -
this._dateAdapter.getDate(this._activeDate)));
break;
case PAGE_UP:
this.activeDate = event.altKey ?
this._dateAdapter.addCalendarYears(this._activeDate, -1) :
this._dateAdapter.addCalendarMonths(this._activeDate, -1);
break;
case PAGE_DOWN:
this.activeDate = event.altKey ?
this._dateAdapter.addCalendarYears(this._activeDate, 1) :
this._dateAdapter.addCalendarMonths(this._activeDate, 1);
break;
case ENTER:
case SPACE:
if (!this.dateFilter || this.dateFilter(this._activeDate)) {
this._dateSelected({ value: this._dateAdapter.getDate(this._activeDate), event });
// Prevent unexpected default actions such as form submission.
event.preventDefault();
}
return;
case ESCAPE:
// Abort the current range selection if the user presses escape mid-selection.
if (this._previewEnd != null) {
this._previewStart = this._previewEnd = null;
this.selectedChange.emit(null);
this._userSelection.emit({ value: null, event });
event.preventDefault();
event.stopPropagation(); // Prevents the overlay from closing.
}
return;
default:
// Don't prevent default or focus active cell on keys that we don't explicitly handle.
return;
}
if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {
this.activeDateChange.emit(this.activeDate);
}
this._focusActiveCell();
// Prevent unexpected default actions such as form submission.
event.preventDefault();
}
/**
* Initializes this month view.
* @return {?}
*/
_init() {
this._setRanges(this.selected);
this._todayDate = this._getCellCompareValue(this._dateAdapter.today());
this._monthLabel =
this._dateAdapter.getMonthNames('short')[this._dateAdapter.getMonth(this.activeDate)]
.toLocaleUpperCase();
/** @type {?} */
let firstOfMonth = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), this._dateAdapter.getMonth(this.activeDate), 1);
this._firstWeekOffset =
(DAYS_PER_WEEK + this._dateAdapter.getDayOfWeek(firstOfMonth) -
this._dateAdapter.getFirstDayOfWeek()) % DAYS_PER_WEEK;
this._initWeekdays();
this._createWeekCells();
this._changeDetectorRef.markForCheck();
}
/**
* Focuses the active cell after the microtask queue is empty.
* @param {?=} movePreview
* @return {?}
*/
_focusActiveCell(movePreview) {
this._matCalendarBody._focusActiveCell(movePreview);
}
/**
* Called when the user has activated a new cell and the preview needs to be updated.
* @param {?} __0
* @return {?}
*/
_previewChanged({ event, value: cell }) {
if (this._rangeStrategy) {
// We can assume that this will be a range, because preview
// events aren't fired for single date selections.
/** @type {?} */
const value = cell ? (/** @type {?} */ (cell.rawValue)) : null;
/** @type {?} */
const previewRange = this._rangeStrategy.createPreview(value, (/** @type {?} */ (this.selected)), event);
this._previewStart = this._getCellCompareValue(previewRange.start);
this._previewEnd = this._getCellCompareValue(previewRange.end);
// Note that here we need to use `detectChanges`, rather than `markForCheck`, because
// the way `_focusActiveCell` is set up at the moment makes it fire at the wrong time
// when navigating one month back using the keyboard which will cause this handler
// to throw a "changed after checked" error when updating the preview state.
this._changeDetectorRef.detectChanges();
}
}
/**
* Initializes the weekdays.
* @private
* @return {?}
*/
_initWeekdays() {
/** @type {?} */
const firstDayOfWeek = this._dateAdapter.getFirstDayOfWeek();
/** @type {?} */
const narrowWeekdays = this._dateAdapter.getDayOfWeekNames('narrow');
/** @type {?} */
const longWeekdays = this._dateAdapter.getDayOfWeekNames('long');
// Rotate the labels for days of the week based on the configured first day of the week.
/** @type {?} */
let weekdays = longWeekdays.map((/**
* @param {?} long
* @param {?} i
* @return {?}
*/
(long, i) => {
return { long, narrow: narrowWeekdays[i] };
}));
this._weekdays = weekdays.slice(firstDayOfWeek).concat(weekdays.slice(0, firstDayOfWeek));
}
/**
* Creates MatCalendarCells for the dates in this month.
* @private
* @return {?}
*/
_createWeekCells() {
/** @type {?} */
const daysInMonth = this._dateAdapter.getNumDaysInMonth(this.activeDate);
/** @type {?} */
const dateNames = this._dateAdapter.getDateNames();
this._weeks = [[]];
for (let i = 0, cell = this._firstWeekOffset; i < daysInMonth; i++, cell++) {
if (cell == DAYS_PER_WEEK) {
this._weeks.push([]);
cell = 0;
}
/** @type {?} */
const date = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), this._dateAdapter.getMonth(this.activeDate), i + 1);
/** @type {?} */
const enabled = this._shouldEnableDate(date);
/** @type {?} */
const ariaLabel = this._dateAdapter.format(date, this._dateFormats.display.dateA11yLabel);
/** @type {?} */
const cellClasses = this.dateClass ? this.dateClass(date) : undefined;
this._wee