@matheo/datepicker
Version:
Angular material date+time picker
631 lines (627 loc) • 290 kB
JavaScript
import * as i10 from '@angular/cdk/a11y';
import { A11yModule } from '@angular/cdk/a11y';
import * as i9$1 from '@angular/cdk/overlay';
import { Overlay, FlexibleConnectedPositionStrategy, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
import * as i9 from '@angular/cdk/portal';
import { ComponentPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
import * as i4 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Inject, Input, Output, HostListener, Directive, Injectable, SkipSelf, InjectionToken, isDevMode, ViewChild, forwardRef, HostBinding, Attribute, ContentChild, InjectFlags, Self, TemplateRef, NgModule } from '@angular/core';
import * as i3 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import { CdkScrollableModule } from '@angular/cdk/scrolling';
import * as i1$1 from '@angular/material/core';
import { MAT_DATE_FORMATS, mixinColor, mixinErrorState, MatCommonModule } from '@angular/material/core';
import { Subject, Subscription, merge, of } from 'rxjs';
import { trigger, transition, animate, keyframes, style, state } from '@angular/animations';
import * as i1 from '@matheo/datepicker/core';
import { DateAdapter } from '@matheo/datepicker/core';
import { ESCAPE, hasModifierKey, SPACE, ENTER, PAGE_DOWN, PAGE_UP, END, HOME, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW, BACKSPACE } from '@angular/cdk/keycodes';
import { take, startWith, filter } from 'rxjs/operators';
import * as i2 from '@angular/cdk/bidi';
import { coerceBooleanProperty, coerceStringArray } from '@angular/cdk/coercion';
import { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
import * as i2$2 from '@angular/forms';
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators, NgControl } from '@angular/forms';
import * as i2$1 from '@angular/material/form-field';
import { MAT_FORM_FIELD, MatFormFieldControl } 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
*/
/**
* Animations used by the Material datepicker.
* @docs-private
*/
const matDatepickerAnimations = {
/** Transforms the height of the datepicker's calendar. */
transformPanel: trigger('transformPanel', [
transition('void => enter-dropdown', animate('120ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
style({ opacity: 0, transform: 'scale(1, 0.8)' }),
style({ opacity: 1, transform: 'scale(1, 1)' }),
]))),
transition('void => enter-dialog', animate('150ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
style({ opacity: 0, transform: 'scale(0.7)' }),
style({ transform: 'none', opacity: 1 }),
]))),
transition('* => void', animate('100ms linear', style({ opacity: 0 }))),
]),
/** Fades in the content of the calendar. */
fadeInCalendar: trigger('fadeInCalendar', [
state('void', style({ opacity: 0 })),
state('enter', style({ opacity: 1 })),
// TODO(crisbeto): this animation should be removed since it isn't quite on spec, but we
// need to keep it until #12440 gets in, otherwise the exit animation will look glitchy.
transition('void => *', animate('120ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)')),
]),
/* Active control */
controlActive: trigger('controlActive', [
transition('* => active', [
animate('0.4s linear', keyframes([
style({ transform: 'scale(0.9)' }),
style({ transform: 'scale(1.1)' }),
style({ transform: 'scale(1)' })
]))
])
]),
};
/**
* @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(`MatDatepicker: No provider found for ${provider}. You must import one of the following ` +
`modules at your application root: MatNativeDateModule, MatMomentDateModule, or provide a ` +
`custom implementation.`);
}
const CLOCK_RADIUS = 50;
const CLOCK_INNER_RADIUS = 27.5;
const CLOCK_OUTER_RADIUS = 41.25;
const CLOCK_TICK_RADIUS = 7.0833;
/**
* A clock that is used as part of the datepicker.
* @docs-private
*/
class MatClockView {
constructor(_changeDetectorRef, _element, _dateAdapter, _dateFormats) {
this._changeDetectorRef = _changeDetectorRef;
this._element = _element;
this._dateAdapter = _dateAdapter;
this._dateFormats = _dateFormats;
this.clockStep = 1;
this.twelveHour = false;
this.currentViewChange = new EventEmitter();
/** Emits when a new date is selected. */
this.selectedChange = new EventEmitter();
/** Emits when any date is selected. */
this._userSelection = new EventEmitter();
// Hours and Minutes representing the clock view.
this._hours = [];
this._minutes = [];
if (!this._dateAdapter) {
throw createMissingDateImplError('DateAdapter');
}
if (!this._dateFormats) {
throw createMissingDateImplError('MAT_DATE_FORMATS');
}
this.mouseMoveListener = (event) => {
this._handleMousemove(event);
};
this.mouseUpListener = () => {
this._handleMouseup();
};
}
/**
* The time to display in this clock view. (the rest 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 (oldActiveDate &&
this._dateAdapter.compareDate(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));
}
/** 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));
}
updateSize() {
const { offsetWidth, offsetHeight } = this._element.nativeElement;
this._size = (offsetWidth < offsetHeight ? offsetWidth : offsetHeight) * 0.9;
this._changeDetectorRef.detectChanges();
}
get inHourView() {
return this.currentView === 'hour';
}
get _hand() {
this._selectedHour = this._dateAdapter.getHours(this.activeDate);
this._selectedMinute = this._dateAdapter.getMinutes(this.activeDate);
let radius = CLOCK_OUTER_RADIUS;
let deg = 0;
if (this.inHourView) {
const outer = this.twelveHour || this._selectedHour >= 0 && this._selectedHour < 12;
radius = outer ? CLOCK_OUTER_RADIUS : CLOCK_INNER_RADIUS;
deg = Math.round(this._selectedHour * (360 / (24 / 2)));
}
else {
deg = Math.round(this._selectedMinute * (360 / 60));
}
return {
transform: `rotate(${deg}deg)`,
height: `${radius}%`,
'margin-top': `${50 - radius}%`,
transition: this._draggingMouse ? 'none' : 'all 300ms ease',
};
}
ngAfterViewInit() {
this.updateSize();
}
ngAfterContentInit() {
this._init();
}
// Handles mousedown events on the clock body.
_handleMousedown(event) {
this._draggingMouse = true;
document.addEventListener('mousemove', this.mouseMoveListener);
document.addEventListener('touchmove', this.mouseMoveListener);
document.addEventListener('mouseup', this.mouseUpListener);
document.addEventListener('touchend', this.mouseUpListener);
this.setTime(event);
}
_handleMousemove(event) {
event.preventDefault();
this.setTime(event);
}
_handleMouseup() {
this._draggingMouse = false;
document.removeEventListener('mousemove', this.mouseMoveListener);
document.removeEventListener('touchmove', this.mouseMoveListener);
document.removeEventListener('mouseup', this.mouseUpListener);
document.removeEventListener('touchend', this.mouseUpListener);
if (this.dateFilter && !this.dateFilter(this.activeDate, this.currentView)) {
return;
}
if (this.inHourView) {
// we refresh the valid minutes
this.currentViewChange.emit('minute');
this.selectedChange.emit(this.activeDate);
this._init();
}
else {
this._userSelection.emit({ value: this.activeDate, event });
}
}
// Initializes this clock view.
_init() {
this._hours.length = 0;
this._minutes.length = 0;
const hourNames = this._dateAdapter.getHourNames();
const minuteNames = this._dateAdapter.getMinuteNames();
if (this.twelveHour) {
this._anteMeridian = this._dateAdapter.getHours(this.activeDate) < 12;
for (let i = 0; i < hourNames.length / 2; i++) {
const radian = (i / 6) * Math.PI;
const radius = CLOCK_OUTER_RADIUS;
const date = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), this._dateAdapter.getMonth(this.activeDate), this._dateAdapter.getDate(this.activeDate), this._anteMeridian ? i : i + 12, 0, 0, 0);
this._hours.push({
value: this._anteMeridian ? i : i + 12,
displayValue: i === 0 ? hourNames[12] : hourNames[i],
enabled: !this.dateFilter || this.dateFilter(date, 'hour'),
cssClasses: this.dateClass ? this.dateClass(date, 'hour') : undefined,
top: CLOCK_RADIUS - Math.cos(radian) * radius - CLOCK_TICK_RADIUS,
left: CLOCK_RADIUS + Math.sin(radian) * radius - CLOCK_TICK_RADIUS,
});
}
}
else {
for (let i = 0; i < hourNames.length; i++) {
const radian = (i / 6) * Math.PI;
const outer = i > 0 && i < 13;
const radius = outer ? CLOCK_OUTER_RADIUS : CLOCK_INNER_RADIUS;
const hour = i % 12 ? i : (i === 0 ? 12 : 0);
const date = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), this._dateAdapter.getMonth(this.activeDate), this._dateAdapter.getDate(this.activeDate), hour, 0, 0, 0);
this._hours.push({
value: hour,
displayValue: hourNames[hour],
enabled: !this.dateFilter || this.dateFilter(date, 'hour'),
cssClasses: this.dateClass ? this.dateClass(date, 'hour') : undefined,
top: CLOCK_RADIUS - Math.cos(radian) * radius - CLOCK_TICK_RADIUS,
left: CLOCK_RADIUS + Math.sin(radian) * radius - CLOCK_TICK_RADIUS,
fontSize: i > 0 && i < 13 ? '' : '80%',
});
}
}
for (let i = 0; i < minuteNames.length; i += 5) {
const radian = (i / 30) * Math.PI;
const date = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), this._dateAdapter.getMonth(this.activeDate), this._dateAdapter.getDate(this.activeDate), this._dateAdapter.getHours(this.activeDate), i, 0, 0);
this._minutes.push({
value: i,
displayValue: i === 0 ? '00' : minuteNames[i],
enabled: !this.dateFilter || this.dateFilter(date, 'minute'),
cssClasses: this.dateClass ? this.dateClass(date, 'minute') : undefined,
top: CLOCK_RADIUS -
Math.cos(radian) * CLOCK_OUTER_RADIUS -
CLOCK_TICK_RADIUS,
left: CLOCK_RADIUS +
Math.sin(radian) * CLOCK_OUTER_RADIUS -
CLOCK_TICK_RADIUS,
});
}
this._changeDetectorRef.markForCheck();
}
// Set Time
setTime(event) {
const trigger = this._element.nativeElement;
const triggerRect = trigger.getBoundingClientRect();
const width = trigger.offsetWidth;
const height = trigger.offsetHeight;
const pageX = event.pageX !== undefined ? event.pageX : event.touches[0].pageX;
const pageY = event.pageY !== undefined ? event.pageY : event.touches[0].pageY;
const x = width / 2 - (pageX - triggerRect.left - window.pageXOffset);
const y = height / 2 - (pageY - triggerRect.top - window.pageYOffset);
const unit = Math.PI /
(this.inHourView ? 6 : this.clockStep ? 30 / this.clockStep : 30);
const z = Math.sqrt(x * x + y * y);
const avg = (width * (CLOCK_OUTER_RADIUS / 100) + width * (CLOCK_INNER_RADIUS / 100)) / 2;
const outer = this.inHourView && z > avg - 16 /* button radius */;
let radian = Math.atan2(-x, y);
if (radian < 0) {
radian = Math.PI * 2 + radian;
}
let value = Math.round(radian / unit);
let date = this._dateAdapter.clone(this.activeDate);
if (this.inHourView) {
if (value === 12) {
value = 0;
}
value = this.twelveHour
? (this._anteMeridian ? value : value + 12)
: (outer ? value : value + 12);
date = this._dateAdapter.setHours(date, value);
}
else {
if (this.clockStep) {
value *= this.clockStep;
}
if (value === 60) {
value = 0;
}
date = this._dateAdapter.setMinutes(date, value);
}
// validate if the resulting value is disabled and do not take action
if (this.dateFilter && !this.dateFilter(date, this.currentView)) {
return;
}
// we don't want to re-render the clock
this._activeDate = date;
this.selectedChange.emit(this.activeDate);
}
_focusActiveCell() { }
/**
* @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;
}
}
/** @nocollapse */ /** @nocollapse */ MatClockView.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MatClockView, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.DateAdapter, optional: true }, { token: MAT_DATE_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ /** @nocollapse */ MatClockView.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MatClockView, selector: "mat-clock-view", inputs: { activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", dateFilter: "dateFilter", dateClass: "dateClass", clockStep: "clockStep", twelveHour: "twelveHour", currentView: "currentView" }, outputs: { currentViewChange: "currentViewChange", selectedChange: "selectedChange", _userSelection: "_userSelection" }, host: { attributes: { "role": "clock" }, listeners: { "mousedown": "_handleMousedown($event)", "window:resize": "updateSize()" } }, exportAs: ["matClockView"], ngImport: i0, template: "<div class=\"mat-clock\" [style.width.px]=\"_size\" [style.height.px]=\"_size\">\n <div class=\"mat-clock-center\"></div>\n <div class=\"mat-clock-hand\" [ngStyle]=\"_hand\"></div>\n\n <div class=\"mat-clock-hours\" [class.active]=\"inHourView\">\n <div *ngFor=\"let item of _hours\"\n class=\"mat-clock-cell\"\n [ngClass]=\"item.cssClasses\"\n [class.mat-clock-cell-selected]=\"_selectedHour == item.value\"\n [class.mat-clock-cell-disabled]=\"!item.enabled\"\n [style.top.%]=\"item.top\"\n [style.left.%]=\"item.left\"\n [style.fontSize]=\"item.fontSize\">\n {{ item.displayValue }}\n </div>\n </div>\n\n <div class=\"mat-clock-minutes\" [class.active]=\"!inHourView\">\n <div *ngFor=\"let item of _minutes\"\n class=\"mat-clock-cell\"\n [ngClass]=\"item.cssClasses\"\n [class.mat-clock-cell-selected]=\"_selectedMinute == item.value\"\n [class.mat-clock-cell-disabled]=\"!item.enabled\"\n [style.top.%]=\"item.top\"\n [style.left.%]=\"item.left\">\n {{ item.displayValue }}\n </div>\n </div>\n</div>\n", directives: [{ type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MatClockView, decorators: [{
type: Component,
args: [{ selector: 'mat-clock-view', exportAs: 'matClockView', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
role: 'clock',
'(mousedown)': '_handleMousedown($event)'
}, preserveWhitespaces: false, template: "<div class=\"mat-clock\" [style.width.px]=\"_size\" [style.height.px]=\"_size\">\n <div class=\"mat-clock-center\"></div>\n <div class=\"mat-clock-hand\" [ngStyle]=\"_hand\"></div>\n\n <div class=\"mat-clock-hours\" [class.active]=\"inHourView\">\n <div *ngFor=\"let item of _hours\"\n class=\"mat-clock-cell\"\n [ngClass]=\"item.cssClasses\"\n [class.mat-clock-cell-selected]=\"_selectedHour == item.value\"\n [class.mat-clock-cell-disabled]=\"!item.enabled\"\n [style.top.%]=\"item.top\"\n [style.left.%]=\"item.left\"\n [style.fontSize]=\"item.fontSize\">\n {{ item.displayValue }}\n </div>\n </div>\n\n <div class=\"mat-clock-minutes\" [class.active]=\"!inHourView\">\n <div *ngFor=\"let item of _minutes\"\n class=\"mat-clock-cell\"\n [ngClass]=\"item.cssClasses\"\n [class.mat-clock-cell-selected]=\"_selectedMinute == item.value\"\n [class.mat-clock-cell-disabled]=\"!item.enabled\"\n [style.top.%]=\"item.top\"\n [style.left.%]=\"item.left\">\n {{ item.displayValue }}\n </div>\n </div>\n</div>\n" }]
}], ctorParameters: function () {
return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.DateAdapter, decorators: [{
type: Optional
}] }, { type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [MAT_DATE_FORMATS]
}] }];
}, propDecorators: { activeDate: [{
type: Input
}], selected: [{
type: Input
}], minDate: [{
type: Input
}], maxDate: [{
type: Input
}], dateFilter: [{
type: Input
}], dateClass: [{
type: Input
}], clockStep: [{
type: Input
}], twelveHour: [{
type: Input
}], currentView: [{
type: Input
}], currentViewChange: [{
type: Output
}], selectedChange: [{
type: Output
}], _userSelection: [{
type: Output
}], updateSize: [{
type: HostListener,
args: ['window:resize']
}] } });
/**
* @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 MatCalendarCell {
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;
}
}
/**
* An internal component used to display calendar data in a table.
* @docs-private
*/
class MatCalendarBody {
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 = (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) {
const cell = this._getCellFromElement(event.target);
if (cell) {
this._ngZone.run(() => 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 = (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(event.target)) {
this._ngZone.run(() => this.previewChange.emit({ value: null, event }));
}
}
};
_ngZone.runOutsideAngular(() => {
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. */
_cellClicked(cell, event) {
if (cell.enabled) {
this.selectedValueChange.emit({ value: cell.value, event });
}
}
/** Returns whether a cell should be marked as selected. */
_isSelected(value) {
return this.startValue === value || this.endValue === 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}%`;
}
}
ngOnDestroy() {
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. */
_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;
}
/** Focuses the active cell after the microtask queue is empty. */
_focusActiveCell(movePreview = true) {
this._ngZone.runOutsideAngular(() => {
this._ngZone.onStable.pipe(take(1)).subscribe(() => {
const activeCell = this._elementRef.nativeElement.querySelector('.mat-calendar-body-active');
if (activeCell) {
if (!movePreview) {
this._skipNextFocus = true;
}
activeCell.focus();
}
});
});
}
/** Gets whether a value is the start of the main range. */
_isRangeStart(value) {
return isStart(value, this.startValue, this.endValue);
}
/** Gets whether a value is the end of the main range. */
_isRangeEnd(value) {
return isEnd(value, this.startValue, this.endValue);
}
/** Gets whether a value is within the currently-selected range. */
_isInRange(value) {
return isInRange(value, this.startValue, this.endValue, this.isRange);
}
/** Gets whether a value is the start of the comparison range. */
_isComparisonStart(value) {
return isStart(value, this.comparisonStart, this.comparisonEnd);
}
/** Whether the cell is a start bridge cell between the main and comparison ranges. */
_isComparisonBridgeStart(value, rowIndex, colIndex) {
if (!this._isComparisonStart(value) || this._isRangeStart(value) || !this._isInRange(value)) {
return false;
}
let previousCell = this.rows[rowIndex][colIndex - 1];
if (!previousCell) {
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. */
_isComparisonBridgeEnd(value, rowIndex, colIndex) {
if (!this._isComparisonEnd(value) || this._isRangeEnd(value) || !this._isInRange(value)) {
return false;
}
let nextCell = this.rows[rowIndex][colIndex + 1];
if (!nextCell) {
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. */
_isComparisonEnd(value) {
return isEnd(value, this.comparisonStart, this.comparisonEnd);
}
/** Gets whether a value is within the current comparison range. */
_isInComparisonRange(value) {
return isInRange(value, this.comparisonStart, this.comparisonEnd, this.isRange);
}
/**
* Gets whether a value is the same as the start and end of the comparison range.
* For context, the functions that we use to determine whether something is the start/end of
* a range don't allow for the start and end to be on the same day, because we'd have to use
* much more specific CSS selectors to style them correctly in all scenarios. This is fine for
* the regular range, because when it happens, the selected styles take over and still show where
* the range would've been, however we don't have these selected styles for a comparison range.
* This function is used to apply a class that serves the same purpose as the one for selected
* dates, but it only applies in the context of a comparison range.
*/
_isComparisonIdentical(value) {
// Note that we don't need to null check the start/end
// here, because the `value` will always be defined.
return this.comparisonStart === this.comparisonEnd && value === this.comparisonStart;
}
/** Gets whether a value is the start of the preview range. */
_isPreviewStart(value) {
return isStart(value, this.previewStart, this.previewEnd);
}
/** Gets whether a value is the end of the preview range. */
_isPreviewEnd(value) {
return isEnd(value, this.previewStart, this.previewEnd);
}
/** Gets whether a value is inside the preview range. */
_isInPreview(value) {
return isInRange(value, this.previewStart, this.previewEnd, this.isRange);
}
/** Finds the MatCalendarCell that corresponds to a DOM node. */
_getCellFromElement(element) {
let cell;
if (isTableCell(element)) {
cell = element;
}
else if (isTableCell(element.parentNode)) {
cell = element.parentNode;
}
if (cell) {
const row = cell.getAttribute('data-mat-row');
const col = cell.getAttribute('data-mat-col');
if (row && col) {
return this.rows[parseInt(row)][parseInt(col)];
}
}
return null;
}
}
/** @nocollapse */ /** @nocollapse */ MatCalendarBody.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MatCalendarBody, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ /** @nocollapse */ MatCalendarBody.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MatCalendarBody, selector: "[mat-calendar-body]", inputs: { label: "label", rows: "rows", todayValue: "todayValue", startValue: "startValue", endValue: "endValue", labelMinRequiredCells: "labelMinRequiredCells", numCols: "numCols", activeCell: "activeCell", isRange: "isRange", cellAspectRatio: "cellAspectRatio", comparisonStart: "comparisonStart", comparisonEnd: "comparisonEnd", previewStart: "previewStart", previewEnd: "previewEnd" }, outputs: { selectedValueChange: "selectedValueChange", previewChange: "previewChange" }, host: { classAttribute: "mat-calendar-body" }, exportAs: ["matCalendarBody"], usesOnChanges: true, ngImport: i0, 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 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.compareValue)\"\n [attr.aria-current]=\"todayValue === item.compareValue ? 'date' : null\"\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.compareValue)\"\n [class.mat-calendar-body-comparison-identical]=\"_isComparisonIdentical(item.compareValue)\"\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", styles: [".mat-calendar-body{min-width:224px}.mat-calendar-body-label{height:0;line-height:0;text-align:left;padding-left:4.7142857143%;padding-right:4.7142857143%}.mat-calendar-body-cell{position:relative;height:0;line-height:0;text-align:center;outline:none;cursor:pointer}.mat-calendar-body-cell:before,.mat-calendar-body-cell:after,.mat-calendar-body-cell-preview{content:\"\";position:absolute;top:5%;left:0;z-index:0;box-sizing:border-box;height:90%;width:100%}.mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range):before,.mat-calendar-body-range-start:after,.mat-calendar-body-comparison-start:not(.mat-calendar-body-comparison-bridge-start):before,.mat-calendar-body-comparison-start:after,.mat-calendar-body-preview-start .mat-calendar-body-cell-preview{left:5%;width:95%;border-top-left-radius:999px;border-bottom-left-radius:999px}[dir=rtl] .mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range):before,[dir=rtl] .mat-calendar-body-range-start:after,[dir=rtl] .mat-calendar-body-comparison-start:not(.mat-calendar-body-comparison-bridge-start):before,[dir=rtl] .mat-calendar-body-comparison-start:after,[dir=rtl] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview{left:0;border-radius:0 999px 999px 0}.mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range):before,.mat-calendar-body-range-end:after,.mat-calendar-body-comparison-end:not(.mat-calendar-body-comparison-bridge-end):before,.mat-calendar-body-comparison-end:after,.mat-calendar-body-preview-end .mat-calendar-body-cell-preview{width:95%;border-top-right-radius:999px;border-bottom-right-radius:999px}[dir=rtl] .mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range):before,[dir=rtl] .mat-calendar-body-range-end:after,[dir=rtl] .mat-calendar-body-comparison-end:not(.mat-calendar-body-comparison-bridge-end):before,[dir=rtl] .mat-calendar-body-comparison-end:after,[dir=rtl] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview{left:5%;border-radius:999px 0 0 999px}[dir=rtl] .mat-calendar-body-comparison-bridge-start.mat-calendar-body-range-end:after,[dir=rtl] .mat-calendar-body-comparison-bridge-end.mat-calendar-body-range-start:after{width:95%;border-top-right-radius:999px;border-bottom-right-radius:999px}.mat-calendar-body-comparison-start.mat-calendar-body-range-end:after,[dir=rtl] .mat-calendar-body-comparison-start.mat-calendar-body-range-end:after,.mat-calendar-body-comparison-end.mat-calendar-body-range-start:after,[dir=rtl] .mat-calendar-body-comparison-end.mat-calendar-body-range-start:after{width:90%}.mat-calendar-body-in-preview .mat-calendar-body-cell-preview{border-top:dashed 1px;border-bottom:dashed 1px}.mat-calendar-body-preview-start .mat-calendar-body-cell-preview{border-left:dashed 1px}[dir=rtl] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview{border-left:0;border-right:dashed 1px}.mat-calendar-body-preview-end .mat-calendar-body-cell-preview{border-right:dashed 1px}[dir=rtl] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview{border-right:0;border-left:dashed 1px}.mat-calendar-body-disabled{cursor:default}.cdk-high-contrast-active .mat-calendar-body-disabled{opacity:.5}.mat-calendar-body-cell-content{top:5%;left:5%;z-index:1;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}.mat-calendar-body-cell-content.mat-focus-indicator{position:absolute}.cdk-high-contrast-active .mat-calendar-body-cell-content{border:none}.mat-datepicker-dialog .mat-dialog-container{position:relative;overflow:visible}.cdk-high-contrast-active .mat-datepicker-popup:not(:empty),.cdk-high-contrast-active .mat-calendar-body-cell:not(.mat-calendar-body-in-range) .mat-calendar-body-selected{outline:solid 1px}.cdk-high-contrast-active .mat-calendar-body-today{outline:dotted 1px}.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:dotted 2px}.cdk-high-contrast-active .mat-calendar-body-cell:before,.cdk-high-contrast-active .mat-calendar-body-cell:after,.cdk-high-contrast-active .mat-calendar-body-selected{background:none}.cdk-high-contrast-active .mat-calendar-body-in-range:before,.cdk-high-contrast-active .mat-calendar-body-comparison-bridge-start:before,.cdk-high-contrast-active .mat-calendar-body-comparison-bridge-end:before{border-top:solid 1px;border-bottom:solid 1px}.cdk-high-contrast-active .mat-calendar-body-range-start:before{border-left:solid 1px}[dir=rtl] .cdk-high-contrast-active .mat-calendar-body-range-start:before{border-left:0;border-right:solid 1px}.cdk-high-contrast-active .mat-calendar-body-range-end:before{border-right:solid 1px}[dir=rtl] .cdk-high-contrast-active .mat-calendar-body-range-end:before{border-right:0;border-left:solid 1px}.cdk-high-contrast-active .mat-calendar-body-in-comparison-range:before{border-top:dashed 1px;border-bottom:dashed 1px}.cdk-high-contrast-active .mat-calendar-body-comparison-start:before{border-left:dashed 1px}[dir=rtl] .cdk-high-contrast-active .mat-calendar-body-comparison-start:before{border-left:0;border-right:dashed 1px}.cdk-high-contrast-active .mat-calendar-body-comparison-end:before{border-right:dashed 1px}[dir=rtl] .cdk-high-contrast-active .mat-calendar-body-comparison-end:before{border-right:0;border-left:dashed 1px}[dir=rtl] .mat-calendar-body-label{text-align:right}\n"], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MatCalendarBody, decorators: [{
type: Component,
args: [{ selector: '[mat-calendar-body]', host: {
'class': 'mat-calendar-body',
}, exportAs: 'matCalendarBody', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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 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.compareValue)\"\n [attr.aria-current]=\"todayValue === item.compareValue ? 'date' : null\"\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.compareValue)\"\n [class.mat-calendar-body-comparison-identical]=\"_isComparisonIdentical(item.compareValue)\"\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", styles: [".mat-calendar-body{min-width:224px}.mat-calendar-body-label{height:0;line-height:0;text-align:left;padding-left:4.7142857143%;padding-right:4.7142857143%}.mat-calendar-body-cell{position:relative;height:0;line-height:0;text-align:center;outline:none;cursor:pointer}.mat-calendar-body-cell:before,.mat-calendar-body-cell:after,.mat-calendar-body-cell-preview{content:\"\";position:absolute;top:5%;left:0;z-index:0;box-sizing:border-box;height:90%;width:100%}.mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range):before,.mat-calendar-body-range-start:after,.mat-calendar-body-comparison-start:not(.mat-calendar-body-comparison-bridge-start):before,.mat-calendar-body-comparison-start:after,.mat-calendar-body-preview-start .mat-calendar-body-cell-preview{left:5%;width:95%;border-top-left-radius:999px;border-bottom-left-radius:999px}[dir=rtl] .mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range):before,[dir=rtl] .mat-calendar-body-range-start:after,[dir=rtl] .mat-calendar-body-comparison-start:not(.mat-calendar-body-comparison-bridge-start):before,[dir=rtl] .mat-calendar-body-comparison-start:after,[dir=rtl] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview{left:0;border-radius:0 999px 999px 0}.mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range):before,.mat-calendar-body-range-end:after,.mat-calendar-body-comparison-end:not(.mat-calendar-body-comparison-bridge-end):before,.mat-calendar-body-comparison-end:after,.mat-calendar-body-preview-end .mat-calendar-body-cell-preview{width:95%;border-top-right-radius:999px;border-bottom-right-radius:999px}[dir=rtl] .mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range):before,[dir=rtl] .mat-calendar-body-range-end:after,[dir=rtl] .mat-calendar-body-comparison-end:not(.mat-calendar-body-comparison-bridge-end):before,[dir=rtl] .mat-calendar-body-comparison-end:after,[dir=rtl] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview{left:5%;border-radius:999px 0 0 999px}[dir=rtl] .mat-calendar-body-comparison-bridge-start.mat-calendar-body-range-end:after,[dir=rtl] .mat-calendar-body-comparison-bridge-end.mat-calendar-body-range-start:after{width:95%;border-top-right-radius:999px;border-bottom-right-radius:999px}.mat-calendar-body-comparison-start.mat-calendar-body-range-end:after,[dir=rtl] .mat-calendar-body-comparison-start.mat-calendar-body-range-end:after,.mat-calendar-body-comparison-end.mat-calendar-body-range-start:after,[dir=rtl] .mat-calendar-body-comparison-end.mat-calendar-body-range-start:after{width:90%}.mat-calendar-body-in-preview .mat-calendar-body-cell-preview{border-top:dashed 1px;border-bottom:dashed 1px}.mat-calendar-body-preview-start .mat-calendar-body-cell-preview{border-left:dashed 1px}[dir=rtl] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview{border-left:0;border-right:dashed 1px}.mat-calendar-body-preview-end .mat-calendar-body-cell-preview{border-right:dashed 1px}[dir=rtl] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview{border-right:0;border-left:dashed 1px}.mat-calendar-body-disabled{cursor:default}.cdk-high-contrast-active .mat-calendar-body-disabled{opacity:.5}.mat-calendar-body-cell-content{top:5%;left:5%;z-index:1;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}.mat-calendar-body-cell-content.mat-focus-indicator{position:absolute}.cdk-high-contrast-active .mat-calendar-body-cell-content{border:none}.mat-datepicker-dialog .mat-dialog-container{position:relative;overflow:visible}.cdk-high-contrast-active .mat-datepicker-popup:not(:empty),.cdk-high-contrast-active .mat-calendar-body-cell:not(.mat-calendar-body-in-range) .mat-calendar-body-selected{outline:solid 1px}.cdk-high-contrast-active .mat-calendar-body-today{outline:dotted 1px}.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:dotted 2px}.cdk-high-contrast-active .mat-calendar-body-cell:before,.cdk-high-contrast-active .mat-calendar-body-cell:after,.cdk-high-contrast-activ