@asoftwareworld/form-builder-pro
Version:
ASW Form Builder Pro helps you with rapid development and designed web forms which includes several controls. The key feature of Form Builder is to make your content attractive and effective. We can customize our control at run time and preview the same b
620 lines • 129 kB
JavaScript
import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, Optional, Output, ViewEncapsulation } from '@angular/core';
import { DOWN_ARROW, END, ENTER, HOME, LEFT_ARROW, PAGE_DOWN, PAGE_UP, RIGHT_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { first } from 'rxjs/operators';
import { ASW_DATETIME_FORMATS } from '@asoftwareworld/form-builder-pro/common';
import { aswDatetimepickerAnimations } from '../datetimepicker-animations';
import { createMissingDateImplError } from '../datetimepicker-errors';
import { AswDatetimepickerFilterType } from '../datetimepicker-filtertype';
import { getActiveOffset, isSameMultiYearView, yearsPerPage, yearsPerRow } from '../multi-year-view/multi-year-view';
import * as i0 from "@angular/core";
import * as i1 from "../datetimepicker-intl";
import * as i2 from "@asoftwareworld/form-builder-pro/common";
import * as i3 from "@angular/common";
import * as i4 from "@angular/material/button";
import * as i5 from "../clock/clock";
import * as i6 from "../time/time";
import * as i7 from "../month-view/month-view";
import * as i8 from "../year-view/year-view";
import * as i9 from "../multi-year-view/multi-year-view";
/**
* A calendar that is used as part of the datetimepicker.
* @docs-private
*/
export class AswCalendar {
_elementRef;
_intl;
_ngZone;
_adapter;
_dateFormats;
/** Whether to show multi-year view. */
get multiYearSelector() {
return this._multiYearSelector;
}
set multiYearSelector(value) {
this._multiYearSelector = coerceBooleanProperty(value);
}
_multiYearSelector = false;
/** Whether the clock uses 12 hour format. */
get twelvehour() {
return this._twelvehour;
}
set twelvehour(value) {
this._twelvehour = coerceBooleanProperty(value);
}
_twelvehour = false;
/** Whether the calendar should be started in month or year view. */
startView = 'month';
/** Step over minutes. */
timeInterval = 1;
/** A function used to filter which dates are selectable. */
dateFilter;
/** Prevent user to select same date time */
preventSameDateTimeSelection = false;
/** Emits when the currently selected date changes. */
selectedChange = new EventEmitter();
/** Emits when the view has been changed. */
viewChanged = new EventEmitter();
_userSelection = new EventEmitter();
_AMPM;
_clockView = 'hour';
_calendarState;
_intlChanges;
_clampedActiveDate;
constructor(_elementRef, _intl, _ngZone, _adapter, _dateFormats, _changeDetectorRef) {
this._elementRef = _elementRef;
this._intl = _intl;
this._ngZone = _ngZone;
this._adapter = _adapter;
this._dateFormats = _dateFormats;
if (!this._adapter) {
throw createMissingDateImplError('DatetimeAdapter');
}
if (!this._dateFormats) {
throw createMissingDateImplError('ASW_DATETIME_FORMATS');
}
this._intlChanges = _intl.changes.subscribe(() => _changeDetectorRef.markForCheck());
}
/** The display type of datetimepicker. */
get type() {
return this._type;
}
set type(value) {
this._type = value || 'date';
if (this.type === 'year') {
this.multiYearSelector = true;
}
}
_type = 'date';
/** A date representing the period (month or year) to start the calendar in. */
get startAt() {
return this._startAt;
}
set startAt(value) {
this._startAt = this._adapter.getValidDateOrNull(value);
}
_startAt;
/**
* Whether the calendar is in time mode. In time mode the calendar clock gets time input elements
* rather then just clock. When touchUi is enabled this will be disabled
*/
get timeInput() {
return this._timeInput;
}
set timeInput(value) {
this._timeInput = coerceBooleanProperty(value);
}
_timeInput = false;
/** The currently selected date. */
get selected() {
return this._selected;
}
set selected(value) {
this._selected = this._adapter.getValidDateOrNull(value);
}
_selected;
/** The minimum selectable date. */
get minDate() {
return this._minDate;
}
set minDate(value) {
this._minDate = this._adapter.getValidDateOrNull(value);
}
_minDate;
/** The maximum selectable date. */
get maxDate() {
return this._maxDate;
}
set maxDate(value) {
this._maxDate = this._adapter.getValidDateOrNull(value);
}
_maxDate;
/**
* The current active date. This determines which time period is shown and which date is
* highlighted when using keyboard navigation.
*/
get _activeDate() {
return this._clampedActiveDate;
}
set _activeDate(value) {
const oldActiveDate = this._clampedActiveDate;
this._clampedActiveDate = this._adapter.clampDate(value, this.minDate, this.maxDate);
// whenever active date changed, and possibly got clamped we should adjust the am/pm setting
this._selectAMPM(this._clampedActiveDate);
if (oldActiveDate && this._clampedActiveDate && this.currentView === 'month' && !this._adapter.sameMonthAndYear(oldActiveDate, this._clampedActiveDate)) {
if (this._adapter.isInNextMonth(oldActiveDate, this._clampedActiveDate)) {
this.calendarState('right');
}
else {
this.calendarState('left');
}
}
}
/** Whether the calendar is in month view. */
get currentView() {
return this._currentView;
}
set currentView(view) {
this._currentView = view;
this.viewChanged.emit(view);
}
_currentView;
get _yearPeriodText() {
if (this.currentView === 'multi-year') {
// The offset from the active year to the "slot" for the starting year is the
// *actual* first rendered year in the multi-year view, and the last year is
// just yearsPerPage - 1 away.
const activeYear = this._adapter.getYear(this._activeDate);
const minYearOfPage = activeYear - getActiveOffset(this._adapter, this._activeDate, this.minDate, this.maxDate);
const maxYearOfPage = minYearOfPage + yearsPerPage - 1;
const minYearName = this._adapter.getYearName(this._adapter.createDate(minYearOfPage, 0, 1));
const maxYearName = this._adapter.getYearName(this._adapter.createDate(maxYearOfPage, 0, 1));
return this._intl.formatYearRange(minYearName, maxYearName);
}
return this.currentView === 'month' ? this._adapter.getMonthNames('long')[this._adapter.getMonth(this._activeDate)] : this._adapter.getYearName(this._activeDate);
}
get _yearButtonText() {
return this._adapter.getYearName(this._activeDate);
}
get _yearButtonLabel() {
return this.multiYearSelector ? this._intl.switchToMultiYearViewLabel : this._intl.switchToYearViewLabel;
}
get _dateButtonText() {
switch (this.type) {
case 'month':
return this._adapter.getMonthNames('long')[this._adapter.getMonth(this._activeDate)];
default:
return this._adapter.format(this._activeDate, this._dateFormats.display.popupHeaderDateLabel);
}
}
get _dateButtonLabel() {
return this._intl.switchToMonthViewLabel;
}
get _hoursButtonText() {
let hour = this._adapter.getHour(this._activeDate);
if (this.twelvehour) {
if (hour === 0) {
hour = 24;
}
hour = hour > 12 ? hour - 12 : hour;
}
return this._2digit(hour);
}
get _hourButtonLabel() {
return this._intl.switchToClockHourViewLabel;
}
get _minutesButtonText() {
return this._2digit(this._adapter.getMinute(this._activeDate));
}
get _minuteButtonLabel() {
return this._intl.switchToClockMinuteViewLabel;
}
get _prevButtonLabel() {
switch (this._currentView) {
case 'month':
return this._intl.prevMonthLabel;
case 'year':
return this._intl.prevYearLabel;
case 'multi-year':
return this._intl.prevMultiYearLabel;
default:
return '';
}
}
get _nextButtonLabel() {
switch (this._currentView) {
case 'month':
return this._intl.nextMonthLabel;
case 'year':
return this._intl.nextYearLabel;
case 'multi-year':
return this._intl.nextMultiYearLabel;
default:
return '';
}
}
/** Date filter for the month and year views. */
_dateFilterForViews = (date) => {
return !!date && (!this.dateFilter || this.dateFilter(date, AswDatetimepickerFilterType.DATE)) && (!this.minDate || this._adapter.compareDate(date, this.minDate) >= 0) && (!this.maxDate || this._adapter.compareDate(date, this.maxDate) <= 0);
};
_userSelected() {
this._userSelection.emit();
}
ngAfterContentInit() {
this._activeDate = this.startAt || this._adapter.today();
this._selectAMPM(this._activeDate);
if (this.type === 'year') {
this.currentView = 'multi-year';
}
else if (this.type === 'month') {
this.currentView = 'year';
}
else if (this.type === 'time') {
this.currentView = 'clock';
}
else {
this.currentView = this.startView || 'month';
}
}
ngOnDestroy() {
this._intlChanges.unsubscribe();
}
/** Handles date selection in the month view. */
_dateSelected(date) {
if (this.type === 'date') {
if (!this._adapter.sameDate(date, this.selected) || !this.preventSameDateTimeSelection) {
this.selectedChange.emit(date);
}
}
else {
this._activeDate = date;
this.currentView = 'clock';
}
}
/** Handles month selection in the year view. */
_monthSelected(month) {
if (this.type === 'month') {
if (!this._adapter.sameMonthAndYear(month, this.selected) || !this.preventSameDateTimeSelection) {
this.selectedChange.emit(this._adapter.getFirstDateOfMonth(month));
}
}
else {
this._activeDate = month;
this.currentView = 'month';
this._clockView = 'hour';
}
}
/** Handles year selection in the multi year view. */
_yearSelected(year) {
if (this.type === 'year') {
if (!this._adapter.sameYear(year, this.selected) || !this.preventSameDateTimeSelection) {
const normalizedDate = this._adapter.createDatetime(this._adapter.getYear(year), 0, 1, 0, 0);
this.selectedChange.emit(normalizedDate);
}
}
else {
this._activeDate = year;
this.currentView = 'year';
}
}
_timeSelected(date) {
this._activeDate = this._updateDate(date);
if (!this._adapter.sameDatetime(date, this.selected) || !this.preventSameDateTimeSelection) {
this.selectedChange.emit(date);
}
}
_dialTimeSelected(date) {
if (this._clockView !== 'minute') {
this._activeDate = this._updateDate(date);
this._clockView = 'minute';
}
else {
if (!this._adapter.sameDatetime(date, this.selected) || !this.preventSameDateTimeSelection) {
this.selectedChange.emit(date);
}
}
}
_onActiveDateChange(date) {
this._activeDate = date;
}
_updateDate(date) {
if (this.twelvehour) {
const HOUR = this._adapter.getHour(date);
if (HOUR === 12) {
if (this._AMPM === 'AM') {
return this._adapter.addCalendarHours(date, -12);
}
}
else if (this._AMPM === 'PM') {
return this._adapter.addCalendarHours(date, 12);
}
}
return date;
}
_selectAMPM(date) {
const hour = this._adapter.getHour(date);
if (hour > 11) {
this._AMPM = 'PM';
}
else {
this._AMPM = 'AM';
}
}
_ampmClicked(source) {
this._currentView = 'clock';
if (source === this._AMPM) {
return;
}
// if AMPM changed from PM to AM substract 12 hours
const currentHour = this._adapter.getHour(this._activeDate);
let newHourValue;
if (source === 'AM') {
newHourValue = currentHour >= 12 ? this._adapter.getHour(this._activeDate) - 12 : 12;
}
// otherwise add 12 hours
else {
newHourValue = (currentHour + 12) % 24;
}
const newActiveDate = this._adapter.clampDate(this._adapter.createDatetime(this._adapter.getYear(this._activeDate), this._adapter.getMonth(this._activeDate), this._adapter.getDate(this._activeDate), newHourValue, this._adapter.getMinute(this._activeDate)), this.minDate, this.maxDate);
// only if our clamped date is not changed, we know we can apply the newActiveDate to the
// activeDate
if (this._adapter.getHour(newActiveDate) === newHourValue) {
this._activeDate = newActiveDate;
this._AMPM = source;
}
}
_yearClicked() {
if (this.type === 'year' || this.multiYearSelector) {
this.currentView = 'multi-year';
return;
}
this.currentView = 'year';
}
_dateClicked() {
if (this.type !== 'month') {
this.currentView = 'month';
}
}
_hoursClicked() {
this.currentView = 'clock';
this._clockView = 'hour';
}
_minutesClicked() {
this.currentView = 'clock';
this._clockView = 'minute';
}
/** Handles user clicks on the previous button. */
_previousClicked() {
this._activeDate = this.currentView === 'month' ? this._adapter.addCalendarMonths(this._activeDate, -1) : this._adapter.addCalendarYears(this._activeDate, this.currentView === 'year' ? -1 : -yearsPerPage);
}
/** Handles user clicks on the next button. */
_nextClicked() {
this._activeDate = this.currentView === 'month' ? this._adapter.addCalendarMonths(this._activeDate, 1) : this._adapter.addCalendarYears(this._activeDate, this.currentView === 'year' ? 1 : yearsPerPage);
}
/** Whether the previous period button is enabled. */
_previousEnabled() {
if (!this.minDate) {
return true;
}
return !this.minDate || !this._isSameView(this._activeDate, this.minDate);
}
/** Whether the next period button is enabled. */
_nextEnabled() {
return !this.maxDate || !this._isSameView(this._activeDate, this.maxDate);
}
/** Handles keydown events on the calendar body. */
_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.
if (this.currentView === 'month') {
this._handleCalendarBodyKeydownInMonthView(event);
}
else if (this.currentView === 'year') {
this._handleCalendarBodyKeydownInYearView(event);
}
else if (this.currentView === 'multi-year') {
this._handleCalendarBodyKeydownInMultiYearView(event);
}
else {
this._handleCalendarBodyKeydownInClockView(event);
}
}
_focusActiveCell() {
this._ngZone.runOutsideAngular(() => {
this._ngZone.onStable
.asObservable()
.pipe(first())
.subscribe(() => {
this._elementRef.nativeElement.focus();
});
});
}
_calendarStateDone() {
this._calendarState = '';
}
/** Whether the two dates represent the same view in the current view mode (month or year). */
_isSameView(date1, date2) {
if (this.currentView === 'month') {
return this._adapter.getYear(date1) === this._adapter.getYear(date2) && this._adapter.getMonth(date1) === this._adapter.getMonth(date2);
}
if (this.currentView === 'year') {
return this._adapter.getYear(date1) === this._adapter.getYear(date2);
}
// Otherwise we are in 'multi-year' view.
return isSameMultiYearView(this._adapter, date1, date2, this.minDate, this.maxDate);
}
/** Handles keydown events on the calendar body when calendar is in month view. */
_handleCalendarBodyKeydownInMonthView(event) {
switch (event.keyCode) {
case LEFT_ARROW:
this._activeDate = this._adapter.addCalendarDays(this._activeDate, -1);
break;
case RIGHT_ARROW:
this._activeDate = this._adapter.addCalendarDays(this._activeDate, 1);
break;
case UP_ARROW:
this._activeDate = this._adapter.addCalendarDays(this._activeDate, -7);
break;
case DOWN_ARROW:
this._activeDate = this._adapter.addCalendarDays(this._activeDate, 7);
break;
case HOME:
this._activeDate = this._adapter.addCalendarDays(this._activeDate, 1 - this._adapter.getDate(this._activeDate));
break;
case END:
this._activeDate = this._adapter.addCalendarDays(this._activeDate, this._adapter.getNumDaysInMonth(this._activeDate) - this._adapter.getDate(this._activeDate));
break;
case PAGE_UP:
this._activeDate = event.altKey ? this._adapter.addCalendarYears(this._activeDate, -1) : this._adapter.addCalendarMonths(this._activeDate, -1);
break;
case PAGE_DOWN:
this._activeDate = event.altKey ? this._adapter.addCalendarYears(this._activeDate, 1) : this._adapter.addCalendarMonths(this._activeDate, 1);
break;
case ENTER:
if (this._dateFilterForViews(this._activeDate)) {
this._dateSelected(this._activeDate);
// 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;
}
// Prevent unexpected default actions such as form submission.
event.preventDefault();
}
/** Handles keydown events on the calendar body when calendar is in year view. */
_handleCalendarBodyKeydownInYearView(event) {
switch (event.keyCode) {
case LEFT_ARROW:
this._activeDate = this._adapter.addCalendarMonths(this._activeDate, -1);
break;
case RIGHT_ARROW:
this._activeDate = this._adapter.addCalendarMonths(this._activeDate, 1);
break;
case UP_ARROW:
this._activeDate = this._prevMonthInSameCol(this._activeDate);
break;
case DOWN_ARROW:
this._activeDate = this._nextMonthInSameCol(this._activeDate);
break;
case HOME:
this._activeDate = this._adapter.addCalendarMonths(this._activeDate, -this._adapter.getMonth(this._activeDate));
break;
case END:
this._activeDate = this._adapter.addCalendarMonths(this._activeDate, 11 - this._adapter.getMonth(this._activeDate));
break;
case PAGE_UP:
this._activeDate = this._adapter.addCalendarYears(this._activeDate, event.altKey ? -10 : -1);
break;
case PAGE_DOWN:
this._activeDate = this._adapter.addCalendarYears(this._activeDate, event.altKey ? 10 : 1);
break;
case ENTER:
this._monthSelected(this._activeDate);
break;
default:
// Don't prevent default or focus active cell on keys that we don't explicitly handle.
return;
}
// Prevent unexpected default actions such as form submission.
event.preventDefault();
}
/** Handles keydown events on the calendar body when calendar is in multi-year view. */
_handleCalendarBodyKeydownInMultiYearView(event) {
switch (event.keyCode) {
case LEFT_ARROW:
this._activeDate = this._adapter.addCalendarYears(this._activeDate, -1);
break;
case RIGHT_ARROW:
this._activeDate = this._adapter.addCalendarYears(this._activeDate, 1);
break;
case UP_ARROW:
this._activeDate = this._adapter.addCalendarYears(this._activeDate, -yearsPerRow);
break;
case DOWN_ARROW:
this._activeDate = this._adapter.addCalendarYears(this._activeDate, yearsPerRow);
break;
case HOME:
this._activeDate = this._adapter.addCalendarYears(this._activeDate, -getActiveOffset(this._adapter, this._activeDate, this.minDate, this.maxDate));
break;
case END:
this._activeDate = this._adapter.addCalendarYears(this._activeDate, yearsPerPage - getActiveOffset(this._adapter, this._activeDate, this.minDate, this.maxDate) - 1);
break;
case PAGE_UP:
this._activeDate = this._adapter.addCalendarYears(this._activeDate, event.altKey ? -yearsPerPage * 10 : -yearsPerPage);
break;
case PAGE_DOWN:
this._activeDate = this._adapter.addCalendarYears(this._activeDate, event.altKey ? yearsPerPage * 10 : yearsPerPage);
break;
case ENTER:
this._yearSelected(this._activeDate);
break;
default:
// Don't prevent default or focus active cell on keys that we don't explicitly handle.
return;
}
}
/** Handles keydown events on the calendar body when calendar is in month view. */
_handleCalendarBodyKeydownInClockView(event) {
switch (event.keyCode) {
case UP_ARROW:
this._activeDate = this._clockView === 'hour' ? this._adapter.addCalendarHours(this._activeDate, 1) : this._adapter.addCalendarMinutes(this._activeDate, this.timeInterval);
break;
case DOWN_ARROW:
this._activeDate = this._clockView === 'hour' ? this._adapter.addCalendarHours(this._activeDate, -1) : this._adapter.addCalendarMinutes(this._activeDate, -this.timeInterval);
break;
case ENTER:
if (!this.timeInput) {
this._dialTimeSelected(this._activeDate);
}
return;
default:
// Don't prevent default or focus active cell on keys that we don't explicitly handle.
return;
}
// Prevent unexpected default actions such as form submission.
event.preventDefault();
}
/**
* Determine the date for the month that comes before the given month in the same column in the
* calendar table.
*/
_prevMonthInSameCol(date) {
// Determine how many months to jump forward given that there are 2 empty slots at the beginning
// of each year.
const increment = this._adapter.getMonth(date) <= 4 ? -5 : this._adapter.getMonth(date) >= 7 ? -7 : -12;
return this._adapter.addCalendarMonths(date, increment);
}
/**
* Determine the date for the month that comes after the given month in the same column in the
* calendar table.
*/
_nextMonthInSameCol(date) {
// Determine how many months to jump forward given that there are 2 empty slots at the beginning
// of each year.
const increment = this._adapter.getMonth(date) <= 4 ? 7 : this._adapter.getMonth(date) >= 7 ? 5 : 12;
return this._adapter.addCalendarMonths(date, increment);
}
calendarState(direction) {
this._calendarState = direction;
}
_2digit(n) {
return ('00' + n).slice(-2);
}
static ngAcceptInputType_multiYearSelector;
static ngAcceptInputType_twelvehour;
static ngAcceptInputType_timeInput;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswCalendar, deps: [{ token: i0.ElementRef }, { token: i1.AswDatetimepickerIntl }, { token: i0.NgZone }, { token: i2.DatetimeAdapter, optional: true }, { token: ASW_DATETIME_FORMATS, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: AswCalendar, selector: "asw-calendar", inputs: { multiYearSelector: "multiYearSelector", twelvehour: "twelvehour", startView: "startView", timeInterval: "timeInterval", dateFilter: "dateFilter", preventSameDateTimeSelection: "preventSameDateTimeSelection", type: "type", startAt: "startAt", timeInput: "timeInput", selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", viewChanged: "viewChanged", _userSelection: "_userSelection" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "_handleCalendarBodyKeydown($event)" }, properties: { "class.asw-calendar-with-time-input": "timeInput" }, classAttribute: "asw-calendar" }, exportAs: ["aswCalendar"], ngImport: i0, template: "<div class=\"asw-calendar-header\">\r\n <button *ngIf=\"type !== 'time'\"\r\n mat-button type=\"button\" class=\"asw-calendar-header-year\"\r\n [class.active]=\"currentView === 'year' || currentView === 'multi-year'\"\r\n [attr.aria-label]=\"_yearButtonLabel\"\r\n (click)=\"_yearClicked()\">\r\n <span>{{ _yearButtonText }}</span>\r\n <svg *ngIf=\"multiYearSelector || type === 'year'\"\r\n class=\"asw-calendar-header-year-dropdown\" matButtonIcon iconPositionEnd\r\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path d=\"M7,10L12,15L17,10H7Z\"></path>\r\n </svg>\r\n </button>\r\n <div *ngIf=\"type !== 'year'\" class=\"asw-calendar-header-date-time\">\r\n <button *ngIf=\"type !== 'time'\"\r\n mat-button type=\"button\" class=\"asw-calendar-header-date\"\r\n [class.active]=\"currentView === 'month'\"\r\n [class.not-clickable]=\"type === 'month'\"\r\n [attr.aria-label]=\"_dateButtonLabel\"\r\n (click)=\"_dateClicked()\">{{ _dateButtonText }}\r\n </button>\r\n <span *ngIf=\"type.endsWith('time')\" class=\"asw-calendar-header-time\"\r\n [class.active]=\"currentView === 'clock'\">\r\n <span class=\"asw-calendar-header-hour-minute-container\">\r\n <button mat-button type=\"button\" class=\"asw-calendar-header-hours\"\r\n [class.active]=\"_clockView === 'hour'\"\r\n [attr.aria-label]=\"_hourButtonLabel\"\r\n (click)=\"_hoursClicked()\">{{ _hoursButtonText }}\r\n </button>\r\n <span class=\"asw-calendar-header-hour-minute-separator\">:</span>\r\n <button mat-button type=\"button\" class=\"asw-calendar-header-minutes\"\r\n [class.active]=\"_clockView === 'minute'\"\r\n [attr.aria-label]=\"_minuteButtonLabel\"\r\n (click)=\"_minutesClicked()\">{{ _minutesButtonText }}</button>\r\n </span>\r\n <span *ngIf=\"twelvehour\" class=\"asw-calendar-header-ampm-container\">\r\n <button mat-button type=\"button\" class=\"asw-calendar-header-ampm\"\r\n [class.active]=\"_AMPM === 'AM'\" aria-label=\"AM\"\r\n (click)=\"_ampmClicked('AM')\">AM\r\n </button>\r\n <button mat-button type=\"button\" class=\"asw-calendar-header-ampm\"\r\n [class.active]=\"_AMPM === 'PM'\" aria-label=\"PM\"\r\n (click)=\"_ampmClicked('PM')\">PM\r\n </button>\r\n </span>\r\n </span>\r\n </div>\r\n</div>\r\n\r\n<div class=\"asw-calendar-content\" [ngSwitch]=\"currentView\">\r\n <div *ngIf=\"currentView === 'month' || currentView === 'year' || currentView === 'multi-year'\"\r\n class=\"asw-month-content\">\r\n <div class=\"asw-calendar-controls\">\r\n <button mat-icon-button type=\"button\"\r\n class=\"asw-calendar-previous-button\"\r\n [class.disabled]=\"!_previousEnabled()\"\r\n [attr.aria-disabled]=\"!_previousEnabled()\"\r\n [attr.aria-label]=\"_prevButtonLabel\"\r\n (click)=\"_previousClicked()\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\r\n <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"></path>\r\n </svg>\r\n </button>\r\n <div class=\"asw-calendar-period-button\"\r\n [@slideCalendar]=\"_calendarState\"\r\n (@slideCalendar.done)=\"_calendarStateDone()\">\r\n <strong>{{ _yearPeriodText }}</strong>\r\n </div>\r\n <button mat-icon-button type=\"button\"\r\n class=\"asw-calendar-next-button\"\r\n [class.disabled]=\"!_nextEnabled()\"\r\n [attr.aria-disabled]=\"!_nextEnabled()\"\r\n [attr.aria-label]=\"_nextButtonLabel\"\r\n (click)=\"_nextClicked()\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\r\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n <asw-month-view *ngSwitchCase=\"'month'\"\r\n (_userSelection)=\"_userSelected()\"\r\n (selectedChange)=\"_dateSelected($event)\"\r\n [activeDate]=\"_activeDate\"\r\n [dateFilter]=\"_dateFilterForViews\"\r\n [selected]=\"selected!\"\r\n [type]=\"type\">\r\n </asw-month-view>\r\n <asw-year-view *ngSwitchCase=\"'year'\"\r\n (_userSelection)=\"_userSelected()\"\r\n (selectedChange)=\"_monthSelected($event)\"\r\n [activeDate]=\"_activeDate\"\r\n [dateFilter]=\"_dateFilterForViews\"\r\n [selected]=\"selected!\"\r\n [type]=\"type\">\r\n </asw-year-view>\r\n <asw-multi-year-view *ngSwitchCase=\"'multi-year'\"\r\n (_userSelection)=\"_userSelected()\"\r\n (selectedChange)=\"_yearSelected($event)\"\r\n [activeDate]=\"_activeDate\"\r\n [dateFilter]=\"_dateFilterForViews\"\r\n [maxDate]=\"maxDate\"\r\n [minDate]=\"minDate\"\r\n [selected]=\"selected!\"\r\n [type]=\"type\">\r\n </asw-multi-year-view>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <asw-time *ngIf=\"timeInput; else clock\"\r\n (_userSelection)=\"_userSelected()\"\r\n (activeDateChange)=\"_onActiveDateChange($event)\"\r\n (selectedChange)=\"_timeSelected($event)\"\r\n [AMPM]=\"_AMPM\"\r\n (ampmChange)=\"_ampmClicked($event)\"\r\n [clockView]=\"_clockView\"\r\n (clockViewChange)=\"_clockView = $event\"\r\n [twelvehour]=\"twelvehour\"\r\n [dateFilter]=\"dateFilter\"\r\n [interval]=\"timeInterval\"\r\n [maxDate]=\"maxDate\"\r\n [minDate]=\"minDate\"\r\n [selected]=\"_activeDate\">\r\n </asw-time>\r\n\r\n <ng-template #clock>\r\n <asw-clock (_userSelection)=\"_userSelected()\"\r\n (activeDateChange)=\"_onActiveDateChange($event)\"\r\n (selectedChange)=\"_dialTimeSelected($event)\"\r\n [AMPM]=\"_AMPM\"\r\n [dateFilter]=\"dateFilter\"\r\n [interval]=\"timeInterval\"\r\n [maxDate]=\"maxDate\"\r\n [minDate]=\"minDate\"\r\n [selected]=\"_activeDate\"\r\n [startView]=\"_clockView\"\r\n [twelvehour]=\"twelvehour\">\r\n </asw-clock>\r\n </ng-template>\r\n </ng-container>\r\n</div>\r\n", styles: [".asw-calendar{display:block;outline:none}.asw-calendar-header{box-sizing:border-box;padding:8px;border-radius:4px 4px 0 0}.asw-calendar-header .asw-calendar-header-year,.asw-calendar-header .asw-calendar-header-date,.asw-calendar-header .asw-calendar-header-hours,.asw-calendar-header .asw-calendar-header-minutes,.asw-calendar-header .asw-calendar-header-ampm{height:auto;min-width:auto;padding:0 4px;text-align:inherit;line-height:inherit;color:inherit!important;font-size:inherit;font-weight:inherit;letter-spacing:normal;white-space:normal;word-break:break-word}.asw-calendar-header .asw-calendar-header-year .mat-mdc-button-touch-target,.asw-calendar-header .asw-calendar-header-date .mat-mdc-button-touch-target,.asw-calendar-header .asw-calendar-header-hours .mat-mdc-button-touch-target,.asw-calendar-header .asw-calendar-header-minutes .mat-mdc-button-touch-target,.asw-calendar-header .asw-calendar-header-ampm .mat-mdc-button-touch-target{height:100%}.asw-calendar-header .asw-calendar-header-year{line-height:24px}.asw-calendar-header-date-time{font-size:24px;line-height:36px}.asw-calendar-header-year:not(.active),.asw-calendar-header-date:not(.active),.asw-calendar-header-hours:not(.active),.asw-calendar-header-minutes:not(.active),.asw-calendar-header-ampm:not(.active){opacity:.6}.asw-calendar-header-year.not-clickable,.asw-calendar-header-date.not-clickable,.asw-calendar-header-hours.not-clickable,.asw-calendar-header-minutes.not-clickable,.asw-calendar-header-ampm.not-clickable{cursor:initial}.asw-calendar-header-time{display:inline-flex}.asw-calendar-header-time:not(.active){opacity:.6}.asw-calendar-header-time:not(.active) .asw-calendar-header-hours,.asw-calendar-header-time:not(.active) .asw-calendar-header-minutes,.asw-calendar-header-time:not(.active) .asw-calendar-header-ampm{opacity:1}.asw-calendar-header-hour-minute-separator{display:inline-block;width:8px;text-align:center}.asw-calendar-header-ampm-container{display:inline-flex;flex-direction:column;line-height:18px;font-size:12px}[mode=landscape] .asw-calendar{display:flex}[mode=landscape] .asw-calendar .asw-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-radius:4px 0 0 4px}[dir=rtl] [mode=landscape] .asw-calendar .asw-calendar-header{border-radius:0 4px 4px 0}[mode=landscape] .asw-calendar .asw-calendar-header-year+.asw-calendar-header-date-time,[mode=landscape] .asw-calendar .asw-calendar-header-date+.asw-calendar-header-time{margin-top:4px}[mode=landscape] .asw-calendar .asw-calendar-header-date-time{font-size:28px}[mode=landscape] .asw-calendar .asw-calendar-header-time{display:flex;flex-direction:column}[mode=landscape] .asw-calendar .asw-calendar-header-time .asw-calendar-header-hours,[mode=landscape] .asw-calendar .asw-calendar-header-time .asw-calendar-header-minutes,[mode=landscape] .asw-calendar .asw-calendar-header-time .asw-calendar-header-ampm{width:40px;text-align:center}[mode=landscape] .asw-calendar .asw-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=landscape] .asw-calendar .asw-calendar-header-ampm{padding:4px}[mode=landscape] .asw-calendar .asw-calendar-header-ampm+.asw-calendar-header-ampm{margin:0 8px}@media all and (orientation: landscape){[mode=auto] .asw-calendar{display:flex}[mode=auto] .asw-calendar .asw-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-radius:4px 0 0 4px}[dir=rtl] [mode=auto] .asw-calendar .asw-calendar-header{border-radius:0 4px 4px 0}[mode=auto] .asw-calendar .asw-calendar-header-year+.asw-calendar-header-date-time,[mode=auto] .asw-calendar .asw-calendar-header-date+.asw-calendar-header-time{margin-top:4px}[mode=auto] .asw-calendar .asw-calendar-header-date-time{font-size:28px}[mode=auto] .asw-calendar .asw-calendar-header-time{display:flex;flex-direction:column}[mode=auto] .asw-calendar .asw-calendar-header-time .asw-calendar-header-hours,[mode=auto] .asw-calendar .asw-calendar-header-time .asw-calendar-header-minutes,[mode=auto] .asw-calendar .asw-calendar-header-time .asw-calendar-header-ampm{width:40px;text-align:center}[mode=auto] .asw-calendar .asw-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=auto] .asw-calendar .asw-calendar-header-ampm{padding:4px}[mode=auto] .asw-calendar .asw-calendar-header-ampm+.asw-calendar-header-ampm{margin:0 8px}}.asw-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.asw-calendar-controls{display:flex;align-items:center;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.asw-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:.04}.asw-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box}.asw-calendar-previous-button.disabled,.asw-calendar-next-button.disabled{pointer-events:none}.asw-calendar-previous-button svg,.asw-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .asw-calendar-previous-button svg,[dir=rtl] .asw-calendar-next-button svg{transform:rotate(180deg)}.asw-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.asw-calendar-table-header th{text-align:center;padding:8px 0}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i4.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.AswClock, selector: "asw-clock", inputs: ["dateFilter", "interval", "twelvehour", "AMPM", "activeDate", "selected", "minDate", "maxDate", "startView"], outputs: ["selectedChange", "activeDateChange", "_userSelection"], exportAs: ["aswClock"] }, { kind: "component", type: i6.AswTime, selector: "asw-time", inputs: ["dateFilter", "interval", "twelvehour", "AMPM", "activeDate", "selected", "minDate", "maxDate", "clockView"], outputs: ["selectedChange", "activeDateChange", "_userSelection", "ampmChange", "clockViewChange"], exportAs: ["aswTime"] }, { kind: "component", type: i7.AswMonthView, selector: "asw-month-view", inputs: ["type", "dateFilter", "activeDate", "selected"], outputs: ["selectedChange", "_userSelection"], exportAs: ["aswMonthView"] }, { kind: "component", type: i8.AswYearView, selector: "asw-year-view", inputs: ["type", "dateFilter", "activeDate", "selected"], outputs: ["selectedChange", "_userSelection"], exportAs: ["aswYearView"] }, { kind: "component", type: i9.AswMultiYearView, selector: "asw-multi-year-view", inputs: ["type", "dateFilter", "activeDate", "selected", "minDate", "maxDate"], outputs: ["selectedChange", "_userSelection"], exportAs: ["aswMultiYearView"] }], animations: [aswDatetimepickerAnimations.slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswCalendar, decorators: [{
type: Component,
args: [{ selector: 'asw-calendar', host: {
class: 'asw-calendar',
'[class.asw-calendar-with-time-input]': 'timeInput',
tabindex: '0',
'(keydown)': '_handleCalendarBodyKeydown($event)'
}, exportAs: 'aswCalendar', animations: [aswDatetimepickerAnimations.slideCalendar], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"asw-calendar-header\">\r\n <button *ngIf=\"type !== 'time'\"\r\n mat-button type=\"button\" class=\"asw-calendar-header-year\"\r\n [class.active]=\"currentView === 'year' || currentView === 'multi-year'\"\r\n [attr.aria-label]=\"_yearButtonLabel\"\r\n (click)=\"_yearClicked()\">\r\n <span>{{ _yearButtonText }}</span>\r\n <svg *ngIf=\"multiYearSelector || type === 'year'\"\r\n class=\"asw-calendar-header-year-dropdown\" matButtonIcon iconPositionEnd\r\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path d=\"M7,10L12,15L17,10H7Z\"></path>\r\n </svg>\r\n </button>\r\n <div *ngIf=\"type !== 'year'\" class=\"asw-calendar-header-date-time\">\r\n <button *ngIf=\"type !== 'time'\"\r\n mat-button type=\"button\" class=\"asw-calendar-header-date\"\r\n [class.active]=\"currentView === 'month'\"\r\n [class.not-clickable]=\"type === 'month'\"\r\n [attr.aria-label]=\"_dateButtonLabel\"\r\n (click)=\"_dateClicked()\">{{ _dateButtonText }}\r\n </button>\r\n <span *ngIf=\"type.endsWith('time')\" class=\"asw-calendar-header-time\"\r\n [class.active]=\"currentView === 'clock'\">\r\n <span class=\"asw-calendar-header-hour-minute-container\">\r\n <button mat-button type=\"button\" class=\"asw-calendar-header-hours\"\r\n [class.active]=\"_clockView === 'hour'\"\r\n [attr.aria-label]=\"_hourButtonLabel\"\r\n (click)=\"_hoursClicked()\">{{ _hoursButtonText }}\r\n </button>\r\n <span class=\"asw-calendar-header-hour-minute-separator\">:</span>\r\n <button mat-button type=\"button\" class=\"asw-calendar-header-minutes\"\r\n [class.active]=\"_clockView === 'minute'\"\r\n [attr.aria-label]=\"_minuteButtonLabel\"\r\n (click)=\"_minutesClicked()\">{{ _minutesButtonText }}</button>\r\n </span>\r\n <span *ngIf=\"twelvehour\" class=\"asw-calendar-header-ampm-container\">\r\n <button mat-button type=\"button\" class=\"asw-calendar-header-ampm\"\r\n [class.active]=\"_AMPM === 'AM'\" aria-label=\"AM\"\r\n (click)=\"_ampmClicked('AM')\">AM\r\n </button>\r\n <button mat-button type=\"button\" class=\"asw-calendar-header-ampm\"\r\n [class.active]=\"_AMPM === 'PM'\" aria-label=\"PM\"\r\n (click)=\"_ampmClicked('PM')\">PM\r\n </button>\r\n </span>\r\n </span>\r\n </div>\r\n</div>\r\n\r\n<div class=\"asw-calendar-content\" [ngSwitch]=\"currentView\">\r\n <div *ngIf=\"currentView === 'month' || currentView === 'year' || currentView === 'multi-year'\"\r\n class=\"asw-month-content\">\r\n <div class=\"asw-calendar-controls\">\r\n <button mat-icon-button type=\"button\"\r\n class=\"asw-calendar-previous-button\"\r\n [class.disabled]=\"!_previousEnabled()\"\r\n [attr.aria-disabled]=\"!_previousEnabled()\"\r\n [attr.aria-label]=\"_prevButtonLabel\"\r\n (click)=\"_previousClicked()\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\r\n <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"></path>\r\n </svg>\r\n </button>\r\n <div class=\"asw-calendar-period-button\"\r\n [@slideCalendar]=\"_calendarState\"\r\n (@slideCalendar.done)=\"_calendarStateDone()\">\r\n <strong>{{ _yearPeriodText }}</strong>\r\n </div>\r\n <button mat-icon-button type=\"button\"\r\n class=\"asw-calendar-next-button\"\r\n [class.disabled]=\"!_nextEnabled()\"\r\n [attr.aria-disabled]=\"!_nextEnabled()\"\r\n [attr.aria-label]=\"_nextButtonLabel\"\r\n (click)=\"_nextClicked()\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\r\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n <asw-month-view *ngSwitchCase=\"'month'\"\r\n (_userSelection)=\"_userSelected()\"\r\n (selectedChange)=\"_dateSelected($event)\"\r\n [activeDate]=\"_activeDate\"\r\n [dateFilter]=\"_dateFilterForViews\"\r\n [selected]=\"selected!\"\r\n [type]=\"type\">\r\n </asw-month-view>\r\n <asw-year-view *ngSwitchCase=\"'year'\"\r\n (_userSelection)=\"_userSelected()\"\r\n (selectedChange)=\"_monthSelected($event)\"\r\n [activeDate]=\"_activeDate\"\r\n [dateFilter]=\"_dateFilterForViews\"\r\n [selected]=\"selected!\"\r\n [type]=\"type\">\r\n </asw-year-view>\r\n <asw-multi-year-view *ngSwitchCase=\"'multi-year'\"\r\n (_userSelection)=\"_userSelected()\"\r\n (selectedChange)=\"_yearSelected($event)\"\r\n [activeDate]=\"_activeDate\"\r\n [dateFilter]=\"_dateFilterForViews\"\r\n [maxDate]=\"maxDate\"\r\n [minDate]=\"minDate\"\r\n [selected]=\"selected!\"\r\n [type]=\"type\">\r\n </asw-multi-year-view>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <asw-time *ngIf=\"timeInput; else clock\"\r\n (_userSelection)=\"_userSelected()\"\r\n (activeDateChange)=\"_onActiveDateChange($event)\"\r\n (selectedChange)=\"_timeSelected($event)\"\r\n [AMPM]=\"_AMPM\"\r\n (ampmChange)=\"_ampmClicked($event)\"\r\n [clockView]=\"_clockView\"\r\n (clockViewChange)=\"_clockView = $event\"\r\n [twelvehour]=\"twelvehour\"\r\n [dateFilter]=\"dateFilter\"\r\n [interval]=\"timeInterval\"\r\n [maxDate]=\"maxDate\"\r\n [minDate]=\"minDate\"\r\n [selected]=\"_activeDate\">\r\n </asw-time>\r\n\r\n <ng-template #clock>\r\n <asw-clock (_userSelection)=\"_userSelected()\"\r\n (activeDateChange)=\"_onActiveDateChange($event)\"\r\n (selectedChange)=\"_dialTimeSelected($event)\"\r\n [AMPM]=\"_AMPM\"\r\n [dateFilter]=\"dateFilter\"\r\n [interval]=\"timeInterval\"\r\n [maxDate]=\"maxDate\"\r\n [minDate]=\"minDate\"\r\n [selected]=\"_activeDate\"\r\n [startView]=\"_clockView\"\r\n [twelvehour]=\"twelvehour\">\r\n </asw-clock>\r\n </ng-template>\r\n </ng-container>\r\n</div>\r\n", styles: [".asw-calendar{display:block;outline:none}.asw-calendar-header{box-sizing:border-box;padding:8px;border-radius:4px 4px 0 0}.asw-calendar-header .asw-calendar-header-year,.asw-calendar-header .asw-calendar-header-date,.asw-calendar-header .asw-calendar-header-hours,.asw-calendar-header .asw-calendar-header-minutes,.asw-calendar-header .asw-calendar-header-ampm{height:auto;min-width:auto;padding:0 4px;text-align:inherit;line-height:inherit;color:inherit!important;font-size:inherit;font-weight:inherit;letter-spacing:normal;white-space:normal;word-break:break-word}.asw-calendar-header .asw-calendar-header-year .mat-mdc-button-touch-target,.asw-calendar-header .asw-calendar-header-date .mat-mdc-button-touch-target,.asw-calendar-header .asw-calendar-header-hours .mat-mdc-button-touch-target,.asw-calendar-header .asw-calendar-header-minutes .mat-mdc-button-touch-target,.asw-calendar-header .asw-calendar-header-ampm .mat-mdc-button-touch-target{height:100%}.asw-calendar-header .asw-calendar-header-year{line-height:24px}.asw-calendar-header-date-time{font-size:24px;line-height:36px}.asw-calendar-header-year:not(.active),.asw-calendar-header-date:not(.active),.asw-calendar-header-hours:not(.active),.asw-calendar-header-minutes:not(.active),.asw-calendar-header-ampm:not(.active){opacity:.6}.asw-calendar-header-year.not-clickable,.asw-calendar-header-date.not-clickable,.asw-calendar-header-hours.not-clickable,.asw-calendar-header-minutes.not-clickable,.asw-calendar-header-ampm.not-clickable{cursor:initial}.asw-calendar-header-time{display:inline-flex}.asw-calendar-header-time:not(.active){opacity:.6}.asw-calendar-header-time:not(.active) .asw-calendar-header-hours,.asw-calendar-header-time:not(.active) .asw-calendar-header-minutes,.asw-calendar-header-time:not(.active) .asw-calendar-header-ampm{opacity:1}.asw-calendar-header-hour-minute-separator{display:inline-block;width:8px;text-align:center}.asw-calendar-header-ampm-container{display:inline-flex;flex