saturn-datepicker
Version:
Material datepicker with range support ## What is this?
1,098 lines (1,088 loc) • 144 kB
JavaScript
import { __decorate, __param } from 'tslib';
import { Platform, PlatformModule } from '@angular/cdk/platform';
import { InjectionToken, inject, LOCALE_ID, Optional, Inject, Injectable, NgModule, ɵɵdefineInjectable, EventEmitter, ElementRef, NgZone, Input, Output, Component, ViewEncapsulation, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, forwardRef, ViewContainerRef, Directive, Attribute, ContentChild } from '@angular/core';
import { Subject, Subscription, merge, of } from 'rxjs';
import { A11yModule } from '@angular/cdk/a11y';
import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
import { DOCUMENT, CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { SPACE, ENTER, PAGE_DOWN, PAGE_UP, END, HOME, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW, ESCAPE } from '@angular/cdk/keycodes';
import { Directionality } from '@angular/cdk/bidi';
import { take, filter } from 'rxjs/operators';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { mixinColor } from '@angular/material/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators } from '@angular/forms';
import { MatFormField } from '@angular/material/form-field';
import { MAT_INPUT_VALUE_ACCESSOR } from '@angular/material/input';
/**
* @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
*/
/** InjectionToken for datepicker that can be used to override default locale code. */
const MAT_DATE_LOCALE = new InjectionToken('MAT_DATE_LOCALE', {
providedIn: 'root',
factory: MAT_DATE_LOCALE_FACTORY,
});
/** @docs-private */
function MAT_DATE_LOCALE_FACTORY() {
return inject(LOCALE_ID);
}
/**
* No longer needed since MAT_DATE_LOCALE has been changed to a scoped injectable.
* If you are importing and providing this in your code you can simply remove it.
* @deprecated
* @breaking-change 8.0.0
*/
const MAT_DATE_LOCALE_PROVIDER = { provide: MAT_DATE_LOCALE, useExisting: LOCALE_ID };
/** Adapts type `D` to be usable as a date by cdk-based components that work with dates. */
class DateAdapter {
constructor() {
this._localeChanges = new Subject();
}
/** A stream that emits when the locale changes. */
get localeChanges() { return this._localeChanges; }
/**
* Attempts to deserialize a value to a valid date object. This is different from parsing in that
* deserialize should only accept non-ambiguous, locale-independent formats (e.g. a ISO 8601
* string). The default implementation does not allow any deserialization, it simply checks that
* the given value is already a valid date object or null. The `<sat-datepicker>` will call this
* method on all of its `@Input()` properties that accept dates. It is therefore possible to
* support passing values from your backend directly to these properties by overriding this method
* to also deserialize the format used by your backend.
* @param value The value to be deserialized into a date object.
* @returns The deserialized date object, either a valid date, null if the value can be
* deserialized into a null date (e.g. the empty string), or an invalid date.
*/
deserialize(value) {
if (value == null || this.isDateInstance(value) && this.isValid(value)) {
return value;
}
return this.invalid();
}
/**
* Sets the locale used for all dates.
* @param locale The new locale.
*/
setLocale(locale) {
this.locale = locale;
this._localeChanges.next();
}
/**
* Compares two dates.
* @param first The first date to compare.
* @param second The second date to compare.
* @returns 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.
*/
compareDate(first, second) {
return this.getYear(first) - this.getYear(second) ||
this.getMonth(first) - this.getMonth(second) ||
this.getDate(first) - this.getDate(second);
}
/**
* Checks if two dates are equal.
* @param first The first date to check.
* @param second The second date to check.
* @returns Whether the two dates are equal.
* Null dates are considered equal to other null dates.
*/
sameDate(first, second) {
if (first && second) {
let firstValid = this.isValid(first);
let secondValid = this.isValid(second);
if (firstValid && secondValid) {
return !this.compareDate(first, second);
}
return firstValid == secondValid;
}
return first == second;
}
/**
* Clamp the given date between min and max dates.
* @param date The date to clamp.
* @param min The minimum value to allow. If null or omitted no min is enforced.
* @param max The maximum value to allow. If null or omitted no max is enforced.
* @returns `min` if `date` is less than `min`, `max` if date is greater than `max`,
* otherwise `date`.
*/
clampDate(date, min, max) {
if (min && this.compareDate(date, min) < 0) {
return min;
}
if (max && this.compareDate(date, max) > 0) {
return max;
}
return date;
}
}
/**
* @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
*/
const MAT_DATE_FORMATS = new InjectionToken('mat-date-formats');
/**
* @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
*/
// TODO(mmalerba): Remove when we no longer support safari 9.
/** Whether the browser supports the Intl API. */
let SUPPORTS_INTL_API;
// We need a try/catch around the reference to `Intl`, because accessing it in some cases can
// cause IE to throw. These cases are tied to particular versions of Windows and can happen if
// the consumer is providing a polyfilled `Map`. See:
// https://github.com/Microsoft/ChakraCore/issues/3189
// https://github.com/angular/components/issues/15687
try {
SUPPORTS_INTL_API = typeof Intl != 'undefined';
}
catch (_a) {
SUPPORTS_INTL_API = false;
}
/** The default month names to use if Intl API is not available. */
const DEFAULT_MONTH_NAMES = {
'long': [
'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
'October', 'November', 'December'
],
'short': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
'narrow': ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D']
};
const ɵ0 = i => String(i + 1);
/** The default date names to use if Intl API is not available. */
const DEFAULT_DATE_NAMES = range(31, ɵ0);
/** The default day of the week names to use if Intl API is not available. */
const DEFAULT_DAY_OF_WEEK_NAMES = {
'long': ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
'short': ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
'narrow': ['S', 'M', 'T', 'W', 'T', 'F', 'S']
};
/** First day of week according locale.
* Taken form moment.js source code https://github.com/moment/moment/tree/develop/src/locale
*/
const FIRST_DAY_OF_WEEK = {
af: 1, ar: 6, 'ar-ly': 6, 'ar-ma': 6, 'ar-tn': 1, az: 1, be: 1, bg: 1, bm: 1, br: 1, bs: 1, ca: 1, cs: 1, cv: 1,
cy: 1, da: 1, de: 1, 'de-at': 1, 'de-ch': 1, el: 1, 'en-au': 1, 'en-gb': 1, 'en-ie': 1, 'en-nz': 1, eo: 1,
es: 1, 'es-do': 1, et: 1, eu: 1, fa: 6, fi: 1, fo: 1, fr: 1, 'fr-ch': 1, fy: 1, gd: 1, gl: 1, 'gom-latn': 1,
hr: 1, hu: 1, 'hy-am': 1, id: 1, is: 1, it: 1, jv: 1, ka: 1, kk: 1, km: 1, ky: 1, lb: 1, lt: 1, lv: 1, me: 1,
mi: 1, mk: 1, ms: 1, 'ms-my': 1, mt: 1, my: 1, nb: 1, nl: 1, 'nl-be': 1, nn: 1, pl: 1, pt: 1, 'pt-BR': 0, ro: 1, ru: 1,
sd: 1, se: 1, sk: 1, sl: 1, sq: 1, sr: 1, 'sr-cyrl': 1, ss: 1, sv: 1, sw: 1, 'tet': 1, tg: 1, 'tl-ph': 1,
'tlh': 1, tr: 1, 'tzl': 1, 'tzm': 6, 'tzm-latn': 6, 'ug-cn': 1, uk: 1, ur: 1, uz: 1, 'uz-latn': 1, vi: 1,
'x-pseudo': 1, yo: 1, 'zh-cn': 1,
};
/**
* Matches strings that have the form of a valid RFC 3339 string
* (https://tools.ietf.org/html/rfc3339). Note that the string may not actually be a valid date
* because the regex will match strings an with out of bounds month, date, etc.
*/
const ISO_8601_REGEX = /^\d{4}-\d{2}-\d{2}(?:T\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|(?:(?:\+|-)\d{2}:\d{2}))?)?$/;
/** Creates an array and fills it with values. */
function range(length, valueFunction) {
const valuesArray = Array(length);
for (let i = 0; i < length; i++) {
valuesArray[i] = valueFunction(i);
}
return valuesArray;
}
/** Adapts the native JS Date for use with cdk-based components that work with dates. */
let NativeDateAdapter = class NativeDateAdapter extends DateAdapter {
constructor(matDateLocale, platform) {
super();
/**
* Whether to use `timeZone: 'utc'` with `Intl.DateTimeFormat` when formatting dates.
* Without this `Intl.DateTimeFormat` sometimes chooses the wrong timeZone, which can throw off
* the result. (e.g. in the en-US locale `new Date(1800, 7, 14).toLocaleDateString()`
* will produce `'8/13/1800'`.
*
* TODO(mmalerba): drop this variable. It's not being used in the code right now. We're now
* getting the string representation of a Date object from it's utc representation. We're keeping
* it here for sometime, just for precaution, in case we decide to revert some of these changes
* though.
*/
this.useUtcForDisplay = true;
super.setLocale(matDateLocale);
// IE does its own time zone correction, so we disable this on IE.
this.useUtcForDisplay = !platform.TRIDENT;
this._clampDate = platform.TRIDENT || platform.EDGE;
}
getYear(date) {
return date.getFullYear();
}
getMonth(date) {
return date.getMonth();
}
getDate(date) {
return date.getDate();
}
getDayOfWeek(date) {
return date.getDay();
}
getMonthNames(style) {
if (SUPPORTS_INTL_API) {
const dtf = new Intl.DateTimeFormat(this.locale, { month: style, timeZone: 'utc' });
return range(12, i => this._stripDirectionalityCharacters(this._format(dtf, new Date(2017, i, 1))));
}
return DEFAULT_MONTH_NAMES[style];
}
getDateNames() {
if (SUPPORTS_INTL_API) {
const dtf = new Intl.DateTimeFormat(this.locale, { day: 'numeric', timeZone: 'utc' });
return range(31, i => this._stripDirectionalityCharacters(this._format(dtf, new Date(2017, 0, i + 1))));
}
return DEFAULT_DATE_NAMES;
}
getDayOfWeekNames(style) {
if (SUPPORTS_INTL_API) {
const dtf = new Intl.DateTimeFormat(this.locale, { weekday: style, timeZone: 'utc' });
return range(7, i => this._stripDirectionalityCharacters(this._format(dtf, new Date(2017, 0, i + 1))));
}
return DEFAULT_DAY_OF_WEEK_NAMES[style];
}
getYearName(date) {
if (SUPPORTS_INTL_API) {
const dtf = new Intl.DateTimeFormat(this.locale, { year: 'numeric', timeZone: 'utc' });
return this._stripDirectionalityCharacters(this._format(dtf, date));
}
return String(this.getYear(date));
}
getFirstDayOfWeek() {
// We can't tell using native JS Date what the first day of the week is.
// Sometimes people use excess language definition, e.g. ru-RU,
// so we use fallback to two-letter language code
const locale = this.locale.toLowerCase();
return FIRST_DAY_OF_WEEK[locale] || FIRST_DAY_OF_WEEK[locale.substr(0, 2)] || 0;
}
getNumDaysInMonth(date) {
return this.getDate(this._createDateWithOverflow(this.getYear(date), this.getMonth(date) + 1, 0));
}
clone(date) {
return new Date(date.getTime());
}
createDate(year, month, date) {
// Check for invalid month and date (except upper bound on date which we have to check after
// creating the Date).
if (month < 0 || month > 11) {
throw Error(`Invalid month index "${month}". Month index has to be between 0 and 11.`);
}
if (date < 1) {
throw Error(`Invalid date "${date}". Date has to be greater than 0.`);
}
let result = this._createDateWithOverflow(year, month, date);
// Check that the date wasn't above the upper bound for the month, causing the month to overflow
if (result.getMonth() != month) {
throw Error(`Invalid date "${date}" for month with index "${month}".`);
}
return result;
}
today() {
return new Date();
}
parse(value) {
// We have no way using the native JS Date to set the parse format or locale, so we ignore these
// parameters.
if (typeof value == 'number') {
return new Date(value);
}
return value ? new Date(Date.parse(value)) : null;
}
format(date, displayFormat) {
if (!this.isValid(date)) {
throw Error('NativeDateAdapter: Cannot format invalid date.');
}
if (SUPPORTS_INTL_API) {
// On IE and Edge the i18n API will throw a hard error that can crash the entire app
// if we attempt to format a date whose year is less than 1 or greater than 9999.
if (this._clampDate && (date.getFullYear() < 1 || date.getFullYear() > 9999)) {
date = this.clone(date);
date.setFullYear(Math.max(1, Math.min(9999, date.getFullYear())));
}
displayFormat = Object.assign({}, displayFormat, { timeZone: 'utc' });
const dtf = new Intl.DateTimeFormat(this.locale, displayFormat);
return this._stripDirectionalityCharacters(this._format(dtf, date));
}
return this._stripDirectionalityCharacters(date.toDateString());
}
addCalendarYears(date, years) {
return this.addCalendarMonths(date, years * 12);
}
addCalendarMonths(date, months) {
let newDate = this._createDateWithOverflow(this.getYear(date), this.getMonth(date) + months, this.getDate(date));
// It's possible to wind up in the wrong month if the original month has more days than the new
// month. In this case we want to go to the last day of the desired month.
// Note: the additional + 12 % 12 ensures we end up with a positive number, since JS % doesn't
// guarantee this.
if (this.getMonth(newDate) != ((this.getMonth(date) + months) % 12 + 12) % 12) {
newDate = this._createDateWithOverflow(this.getYear(newDate), this.getMonth(newDate), 0);
}
return newDate;
}
addCalendarDays(date, days) {
return this._createDateWithOverflow(this.getYear(date), this.getMonth(date), this.getDate(date) + days);
}
toIso8601(date) {
return [
date.getUTCFullYear(),
this._2digit(date.getUTCMonth() + 1),
this._2digit(date.getUTCDate())
].join('-');
}
/**
* Returns the given value if given a valid Date or null. Deserializes valid ISO 8601 strings
* (https://www.ietf.org/rfc/rfc3339.txt) into valid Dates and empty string into null. Returns an
* invalid date for all other values.
*/
deserialize(value) {
if (typeof value === 'string') {
if (!value) {
return null;
}
// The `Date` constructor accepts formats other than ISO 8601, so we need to make sure the
// string is the right format first.
if (ISO_8601_REGEX.test(value)) {
let date = new Date(value);
if (this.isValid(date)) {
return date;
}
}
}
return super.deserialize(value);
}
isDateInstance(obj) {
return obj instanceof Date;
}
isValid(date) {
return !isNaN(date.getTime());
}
invalid() {
return new Date(NaN);
}
/** Creates a date but allows the month and date to overflow. */
_createDateWithOverflow(year, month, date) {
const result = new Date(year, month, date);
// We need to correct for the fact that JS native Date treats years in range [0, 99] as
// abbreviations for 19xx.
if (year >= 0 && year < 100) {
result.setFullYear(this.getYear(result) - 1900);
}
return result;
}
/**
* Pads a number to make it two digits.
* @param n The number to pad.
* @returns The padded number.
*/
_2digit(n) {
return ('00' + n).slice(-2);
}
/**
* Strip out unicode LTR and RTL characters. Edge and IE insert these into formatted dates while
* other browsers do not. We remove them to make output consistent and because they interfere with
* date parsing.
* @param str The string to strip direction characters from.
* @returns The stripped string.
*/
_stripDirectionalityCharacters(str) {
return str.replace(/[\u200e\u200f]/g, '');
}
/**
* When converting Date object to string, javascript built-in functions may return wrong
* results because it applies its internal DST rules. The DST rules around the world change
* very frequently, and the current valid rule is not always valid in previous years though.
* We work around this problem building a new Date object which has its internal UTC
* representation with the local date and time.
* @param dtf Intl.DateTimeFormat object, containg the desired string format. It must have
* timeZone set to 'utc' to work fine.
* @param date Date from which we want to get the string representation according to dtf
* @returns A Date object with its UTC representation based on the passed in date info
*/
_format(dtf, date) {
const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()));
return dtf.format(d);
}
};
NativeDateAdapter.ctorParameters = () => [
{ type: String, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DATE_LOCALE,] }] },
{ type: Platform }
];
NativeDateAdapter = __decorate([
Injectable(),
__param(0, Optional()), __param(0, Inject(MAT_DATE_LOCALE))
], NativeDateAdapter);
/**
* @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
*/
const MAT_NATIVE_DATE_FORMATS = {
parse: {
dateInput: null,
},
display: {
dateInput: { year: 'numeric', month: 'numeric', day: 'numeric' },
monthYearLabel: { year: 'numeric', month: 'short' },
dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },
monthYearA11yLabel: { year: 'numeric', month: 'long' },
}
};
/**
* @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
*/
let NativeDateModule = class NativeDateModule {
};
NativeDateModule = __decorate([
NgModule({
imports: [PlatformModule],
providers: [
{ provide: DateAdapter, useClass: NativeDateAdapter },
],
})
], NativeDateModule);
const ɵ0$1 = MAT_NATIVE_DATE_FORMATS;
let SatNativeDateModule = class SatNativeDateModule {
};
SatNativeDateModule = __decorate([
NgModule({
imports: [NativeDateModule],
providers: [{ provide: MAT_DATE_FORMATS, useValue: ɵ0$1 }],
})
], SatNativeDateModule);
/**
* @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
*/
/** @docs-private */
function createMissingDateImplError(provider) {
return Error(`SatDatepicker: No provider found for ${provider}. You must import one of the following ` +
`modules at your application root: SatNativeDateModule, MatMomentDateModule, or provide a ` +
`custom implementation.`);
}
/** Datepicker data that requires internationalization. */
let SatDatepickerIntl = class SatDatepickerIntl {
/** Datepicker data that requires internationalization. */
constructor() {
/**
* Stream that emits whenever the labels here are changed. Use this to notify
* components if the labels have changed after initialization.
*/
this.changes = new Subject();
/** A label for the calendar popup (used by screen readers). */
this.calendarLabel = 'Calendar';
/** A label for the button used to open the calendar popup (used by screen readers). */
this.openCalendarLabel = 'Open calendar';
/** A label for the previous month button (used by screen readers). */
this.prevMonthLabel = 'Previous month';
/** A label for the next month button (used by screen readers). */
this.nextMonthLabel = 'Next month';
/** A label for the previous year button (used by screen readers). */
this.prevYearLabel = 'Previous year';
/** A label for the next year button (used by screen readers). */
this.nextYearLabel = 'Next year';
/** A label for the previous multi-year button (used by screen readers). */
this.prevMultiYearLabel = 'Previous 20 years';
/** A label for the next multi-year button (used by screen readers). */
this.nextMultiYearLabel = 'Next 20 years';
/** A label for the 'switch to month view' button (used by screen readers). */
this.switchToMonthViewLabel = 'Choose date';
/** A label for the 'switch to year view' button (used by screen readers). */
this.switchToMultiYearViewLabel = 'Choose month and year';
}
};
SatDatepickerIntl.ngInjectableDef = ɵɵdefineInjectable({ factory: function SatDatepickerIntl_Factory() { return new SatDatepickerIntl(); }, token: SatDatepickerIntl, providedIn: "root" });
SatDatepickerIntl = __decorate([
Injectable({ providedIn: 'root' })
], SatDatepickerIntl);
/**
* @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
*/
/**
* An internal class that represents the data corresponding to a single calendar cell.
* @docs-private
*/
class SatCalendarCell {
constructor(value, displayValue, ariaLabel, enabled, cssClasses) {
this.value = value;
this.displayValue = displayValue;
this.ariaLabel = ariaLabel;
this.enabled = enabled;
this.cssClasses = cssClasses;
}
}
/**
* An internal component used to display calendar data in a table.
* @docs-private
*/
let SatCalendarBody = class SatCalendarBody {
constructor(_elementRef, _ngZone) {
this._elementRef = _elementRef;
this._ngZone = _ngZone;
/** Enables datepicker MouseOver effect on range mode */
this.rangeHoverEffect = true;
/** Whether to use date range selection behaviour.*/
this.rangeMode = false;
/** The number of columns in the table. */
this.numCols = 7;
/** The cell number of the active cell in the table. */
this.activeCell = 0;
/**
* 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;
/** Emits when a new value is selected. */
this.selectedValueChange = new EventEmitter();
}
_cellClicked(cell) {
if (cell.enabled) {
this.selectedValueChange.emit(cell.value);
}
}
_mouseOverCell(cell) {
if (this.rangeHoverEffect)
this._cellOver = cell.value;
}
ngOnChanges(changes) {
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}%`;
}
if (changes.activeCell) {
this._cellOver = this.activeCell + 1;
}
}
_isActiveCell(rowIndex, colIndex) {
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;
}
/** Whenever to mark cell as semi-selected (inside dates interval). */
_isSemiSelected(date) {
if (!this.rangeMode) {
return false;
}
if (this.rangeFull) {
return true;
}
/** Do not mark start and end of interval. */
if (date === this.begin || date === this.end) {
return false;
}
if (this.begin && !this.end) {
return date > this.begin;
}
if (this.end && !this.begin) {
return date < this.end;
}
return date > this.begin && date < this.end;
}
/** Whenever to mark cell as semi-selected before the second date is selected (between the begin cell and the hovered cell). */
_isBetweenOverAndBegin(date) {
if (!this._cellOver || !this.rangeMode || !this.beginSelected) {
return false;
}
if (this.isBeforeSelected && !this.begin) {
return date > this._cellOver;
}
if (this._cellOver > this.begin) {
return date > this.begin && date < this._cellOver;
}
if (this._cellOver < this.begin) {
return date < this.begin && date > this._cellOver;
}
return false;
}
/** Whenever to mark cell as begin of the range. */
_isBegin(date) {
if (this.rangeMode && this.beginSelected && this._cellOver) {
if (this.isBeforeSelected && !this.begin) {
return this._cellOver === date;
}
else {
return (this.begin === date && !(this._cellOver < this.begin)) ||
(this._cellOver === date && this._cellOver < this.begin);
}
}
return this.begin === date;
}
/** Whenever to mark cell as end of the range. */
_isEnd(date) {
if (this.rangeMode && this.beginSelected && this._cellOver) {
if (this.isBeforeSelected && !this.begin) {
return false;
}
else {
return (this.end === date && !(this._cellOver > this.begin)) ||
(this._cellOver === date && this._cellOver > this.begin);
}
}
return this.end === date;
}
/** Focuses the active cell after the microtask queue is empty. */
_focusActiveCell() {
this._ngZone.runOutsideAngular(() => {
this._ngZone.onStable.asObservable().pipe(take(1)).subscribe(() => {
const activeCell = this._elementRef.nativeElement.querySelector('.mat-calendar-body-active');
if (activeCell) {
activeCell.focus();
}
});
});
}
/** Whenever to highlight the target cell when selecting the second date in range mode */
_previewCellOver(date) {
return this._cellOver === date && this.rangeMode && this.beginSelected;
}
};
SatCalendarBody.ctorParameters = () => [
{ type: ElementRef },
{ type: NgZone }
];
__decorate([
Input()
], SatCalendarBody.prototype, "label", void 0);
__decorate([
Input()
], SatCalendarBody.prototype, "rangeHoverEffect", void 0);
__decorate([
Input()
], SatCalendarBody.prototype, "rows", void 0);
__decorate([
Input()
], SatCalendarBody.prototype, "todayValue", void 0);
__decorate([
Input()
], SatCalendarBody.prototype, "selectedValue", void 0);
__decorate([
Input()
], SatCalendarBody.prototype, "begin", void 0);
__decorate([
Input()
], SatCalendarBody.prototype, "end", void 0);
__decorate([
Input()
], SatCalendarBody.prototype, "beginSelected", void 0);
__decorate([
Input()
], SatCalendarBody.prototype, "isBeforeSelected", void 0);
__decorate([
Input()
], SatCalendarBody.prototype, "rangeFull", void 0);
__decorate([
Input()
], SatCalendarBody.prototype, "rangeMode", void 0);
__decorate([
Input()
], SatCalendarBody.prototype, "labelMinRequiredCells", void 0);
__decorate([
Input()
], SatCalendarBody.prototype, "numCols", void 0);
__decorate([
Input()
], SatCalendarBody.prototype, "activeCell", void 0);
__decorate([
Input()
], SatCalendarBody.prototype, "cellAspectRatio", void 0);
__decorate([
Output()
], SatCalendarBody.prototype, "selectedValueChange", void 0);
SatCalendarBody = __decorate([
Component({
moduleId: module.id,
selector: '[sat-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 [class.mat-calendar-body-disabled]=\"!item.enabled\"\n [class.mat-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n [class.mat-calendar-body-begin-range]=\"_isBegin(item.value)\"\n [class.mat-calendar-body-end-range]=\"_isEnd(item.value)\"\n [class.mat-calendar-cell-semi-selected]=\"_isSemiSelected(item.value) || _isBetweenOverAndBegin(item.value)\"\n [class.mat-calendar-cell-over]=\"_previewCellOver(item.value)\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.aria-disabled]=\"!item.enabled || null\"\n [attr.aria-selected]=\"selectedValue === item.value\"\n (click)=\"_cellClicked(item)\"\n (mouseover)=\"_mouseOverCell(item)\"\n [style.width]=\"_cellWidth\"\n [style.paddingTop]=\"_cellPadding\"\n [style.paddingBottom]=\"_cellPadding\">\n <div class=\"mat-calendar-body-cell-content\"\n [class.mat-calendar-body-selected]=\"begin === item.value || end === item.value || selectedValue === item.value\"\n [class.mat-calendar-body-semi-selected]=\"_isSemiSelected(item.value)\"\n [class.mat-calendar-body-today]=\"todayValue === item.value\">\n {{item.displayValue}}\n </div>\n </td>\n</tr>\n",
host: {
'class': 'mat-calendar-body',
'role': 'grid',
'aria-readonly': 'true'
},
exportAs: 'matCalendarBody',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [".mat-calendar-body{min-width:224px}.mat-calendar-body-label{height:0;line-height:0;text-align:left;padding-left:4.71429%;padding-right:4.71429%}.mat-calendar-body-cell{position:relative;height:0;line-height:0;text-align:center;outline:0;cursor:pointer}.mat-calendar-body-disabled{cursor:default}.mat-calendar-body-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;line-height:1;border-width:1px;border-style:solid;border-radius:999px}[dir=rtl] .mat-calendar-body-label{text-align:right}"]
})
], SatCalendarBody);
/**
* @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
*/
const DAYS_PER_WEEK = 7;
/**
* An internal component used to display a single month in the datepicker.
* @docs-private
*/
let SatMonthView = class SatMonthView {
constructor(_changeDetectorRef, _dateFormats, _dateAdapter, _dir) {
this._changeDetectorRef = _changeDetectorRef;
this._dateFormats = _dateFormats;
this._dateAdapter = _dateAdapter;
this._dir = _dir;
/** Allow selecting range of dates. */
this.rangeMode = false;
/** Enables datepicker MouseOver effect on range mode */
this.rangeHoverEffect = true;
/** Enables datepicker closing after selection */
this.closeAfterSelection = true;
/** Whenever full month is inside dates interval. */
this._rangeFull = false;
/** 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('DateAdapter');
}
if (!this._dateFormats) {
throw createMissingDateImplError('MAT_DATE_FORMATS');
}
this._activeDate = this._dateAdapter.today();
}
/** Current start of interval. */
get beginDate() { return this._beginDate; }
set beginDate(value) {
this._beginDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
this.updateRangeSpecificValues();
}
/** Current end of interval. */
get endDate() { return this._endDate; }
set endDate(value) {
this._endDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
this.updateRangeSpecificValues();
}
/** Whenever user already selected start of dates interval. */
set beginDateSelected(value) { this._beginDateSelected = value; }
;
/**
* The date to display in this month view (everything other than the month and year is ignored).
*/
get activeDate() { return this._activeDate; }
set activeDate(value) {
const oldActiveDate = this._activeDate;
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. */
get selected() { return this._selected; }
set selected(value) {
this._selected = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
this._selectedDate = this._getDateInCurrentMonth(this._selected);
}
/** The minimum selectable date. */
get minDate() { return this._minDate; }
set minDate(value) {
this._minDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
}
/** The maximum selectable date. */
get maxDate() { return this._maxDate; }
set maxDate(value) {
this._maxDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
}
ngAfterContentInit() {
this._init();
}
/** Handles when a new date is selected. */
_dateSelected(date) {
if (this.rangeMode) {
const selectedYear = this._dateAdapter.getYear(this.activeDate);
const selectedMonth = this._dateAdapter.getMonth(this.activeDate);
const selectedDate = this._dateAdapter.createDate(selectedYear, selectedMonth, date);
if (!this._beginDateSelected) { // At first click emit the same start and end of interval
this._beginDateSelected = selectedDate;
this.selectedChange.emit(selectedDate);
}
else {
this._beginDateSelected = null;
this.selectedChange.emit(selectedDate);
this._userSelection.emit();
}
this._createWeekCells();
this.activeDate = selectedDate;
this._focusActiveCell();
}
else if (this._selectedDate != date) {
const selectedYear = this._dateAdapter.getYear(this.activeDate);
const selectedMonth = this._dateAdapter.getMonth(this.activeDate);
const selectedDate = this._dateAdapter.createDate(selectedYear, selectedMonth, date);
this.selectedChange.emit(selectedDate);
this._userSelection.emit();
this._createWeekCells();
}
}
/** Handles keydown events on the calendar body when calendar is in month view. */
_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.
const oldActiveDate = this._activeDate;
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(this._dateAdapter.getDate(this._activeDate));
if (!this._beginDateSelected) {
this._userSelection.emit();
}
if (this._beginDateSelected || !this.closeAfterSelection) {
this._focusActiveCell();
}
// Prevent unexpected default actions such as form submission.
event.preventDefault();
}
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. */
_init() {
this.updateRangeSpecificValues();
this._selectedDate = this._getDateInCurrentMonth(this.selected);
this._todayDate = this._getDateInCurrentMonth(this._dateAdapter.today());
this._monthLabel =
this._dateAdapter.getMonthNames('short')[this._dateAdapter.getMonth(this.activeDate)]
.toLocaleUpperCase();
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. */
_focusActiveCell() {
this._matCalendarBody._focusActiveCell();
}
/** Initializes the weekdays. */
_initWeekdays() {
const firstDayOfWeek = this._dateAdapter.getFirstDayOfWeek();
const narrowWeekdays = this._dateAdapter.getDayOfWeekNames('narrow');
const longWeekdays = this._dateAdapter.getDayOfWeekNames('long');
// Rotate the labels for days of the week based on the configured first day of the week.
let weekdays = longWeekdays.map((long, i) => {
return { long, narrow: narrowWeekdays[i] };
});
this._weekdays = weekdays.slice(firstDayOfWeek).concat(weekdays.slice(0, firstDayOfWeek));
}
/** Creates SatCalendarCells for the dates in this month. */
_createWeekCells() {
const daysInMonth = this._dateAdapter.getNumDaysInMonth(this.activeDate);
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;
}
const date = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), this._dateAdapter.getMonth(this.activeDate), i + 1);
const enabled = this._shouldEnableDate(date);
const ariaLabel = this._dateAdapter.format(date, this._dateFormats.display.dateA11yLabel);
const cellClasses = this.dateClass ? this.dateClass(date) : undefined;
this._weeks[this._weeks.length - 1]
.push(new SatCalendarCell(i + 1, dateNames[i], ariaLabel, enabled, cellClasses));
}
}
/** Date filter for the month */
_shouldEnableDate(date) {
return !!date &&
(!this.dateFilter || this.dateFilter(date)) &&
(!this.minDate || this._dateAdapter.compareDate(date, this.minDate) >= 0) &&
(!this.maxDate || this._dateAdapter.compareDate(date, this.maxDate) <= 0);
}
/**
* Gets the date in this month that the given Date falls on.
* Returns null if the given Date is in another month.
*/
_getDateInCurrentMonth(date) {
return date && this._hasSameMonthAndYear(date, this.activeDate) ?
this._dateAdapter.getDate(date) : null;
}
/** Checks whether the 2 dates are non-null and fall within the same month of the same year. */
_hasSameMonthAndYear(d1, d2) {
return !!(d1 && d2 && this._dateAdapter.getMonth(d1) == this._dateAdapter.getMonth(d2) &&
this._dateAdapter.getYear(d1) == this._dateAdapter.getYear(d2));
}
/**
* @param obj The object to check.
* @returns The given object if it is both a date instance and valid, otherwise null.
*/
_getValidDateOrNull(obj) {
return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
}
/** Determines whether the user has the RTL layout direction. */
_isRtl() {
return this._dir && this._dir.value === 'rtl';
}
/** Updates range full parameter on each begin or end of interval update.
* Necessary to display calendar-body correctly
*/
updateRangeSpecificValues() {
if (this.rangeMode) {
this._beginDateNumber = this._getDateInCurrentMonth(this._beginDate);
this._endDateNumber = this._getDateInCurrentMonth(this._endDate);
this._rangeFull = this.beginDate && this.endDate && !this._beginDateNumber &&
!this._endDateNumber &&
this._dateAdapter.compareDate(this.beginDate, this.activeDate) <= 0 &&
this._dateAdapter.compareDate(this.activeDate, this.endDate) <= 0;
}
else {
this._beginDateNumber = this._endDateNumber = null;
this._rangeFull = false;
}
}
};
SatMonthView.ctorParameters = () => [
{ type: ChangeDetectorRef },
{ type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DATE_FORMATS,] }] },
{ type: DateAdapter, decorators: [{ type: Optional }] },
{ type: Directionality, decorators: [{ type: Optional }] }
];
__decorate([
Input()
], SatMonthView.prototype, "beginDate", null);
__decorate([
Input()
], SatMonthView.prototype, "endDate", null);
__decorate([
Input()
], SatMonthView.prototype, "rangeMode", void 0);
__decorate([
Input()
], SatMonthView.prototype, "rangeHoverEffect", void 0);
__decorate([
Input()
], SatMonthView.prototype, "closeAfterSelection", void 0);
__decorate([
Input()
], SatMonthView.prototype, "beginDateSelected", null);
__decorate([
Input()
], SatMonthView.prototype, "activeDate", null);
__decorate([
Input()
], SatMonthView.prototype, "selected", null);
__decorate([
Input()
], SatMonthView.prototype, "minDate", null);
__decorate([
Input()
], SatMonthView.prototype, "maxDate", null);
__decorate([
Input()
], SatMonthView.prototype, "dateFilter", void 0);
__decorate([
Input()
], SatMonthView.prototype, "dateClass", void 0);
__decorate([
Output()
], SatMonthView.prototype, "selectedChange", void 0);
__decorate([
Output()
], SatMonthView.prototype, "_userSelection", void 0);
__decorate([
Output()
], SatMonthView.prototype, "activeDateChange", void 0);
__decorate([
ViewChild(SatCalendarBody, { static: false })
], SatMonthView.prototype, "_matCalendarBody", void 0);
SatMonthView = __decorate([
Component({
moduleId: module.id,
selector: 'sat-month-view',
template: "<table class=\"mat-calendar-table\">\n <thead class=\"mat-calendar-table-header\">\n <tr><th *ngFor=\"let day of _weekdays\" [attr.aria-label]=\"day.long\">{{day.narrow}}</th></tr>\n <tr><th class=\"mat-calendar-table-header-divider\" colspan=\"7\" aria-hidden=\"true\"></th></tr>\n </thead>\n <tbody sat-calendar-body\n [label]=\"_monthLabel\"\n [rows]=\"_weeks\"\n [todayValue]=\"_todayDate\"\n [selectedValue]=\"_selectedDate\"\n [begin]=\"_beginDateNumber\"\n [end]=\"_endDateNumber\"\n [beginSelected]=\"_beginDateSelected\"\n [isBeforeSelected]=\"_beginDateSelected && _dateAdapter.compareDate(activeDate, _beginDateSelected) < 0\"\n [rangeFull]=\"_rangeFull\"\n [rangeMode]=\"rangeMode\"\n [rangeHoverEffect]=\"rangeHoverEffect\"\n [labelMinRequiredCells]=\"3\"\n [activeCell]=\"_dateAdapter.getDate(activeDate) - 1\"\n (selectedValueChange)=\"_dateSelected($event)\"\n (keydown)=\"_handleCalendarBodyKeydown($event)\">\n </tbody>\n</table>\n",
exportAs: 'matMonthView',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
}),
__param(1, Optional()), __param(1, Inject(MAT_DATE_FORMATS)),
__param(2, Optional()),
__param(3, Optional())
], SatMonthView);
/**
* @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
*/
const yearsPerPage = 24;
const yearsPerRow = 4;
/**
* An internal component used to d