axiros-datetime-picker/fesm2020/axiros-datetime-picker.mjs.map

Angular 13 compatible date time picker

{"version":3,"file":"axiros-datetime-picker.mjs","sources":["../../../projects/picker/src/lib/date-time/date-time-picker-trigger.directive.ts","../../../projects/picker/src/lib/date-time/adapter/date-time-format.class.ts","../../../projects/picker/src/lib/date-time/date-time-picker-intl.service.ts","../../../projects/picker/src/lib/date-time/adapter/date-time-adapter.class.ts","../../../projects/picker/src/lib/date-time/calendar-body.component.ts","../../../projects/picker/src/lib/date-time/calendar-body.component.html","../../../projects/picker/src/lib/date-time/calendar-month-view.component.ts","../../../projects/picker/src/lib/date-time/calendar-month-view.component.html","../../../projects/picker/src/lib/date-time/calendar-year-view.component.ts","../../../projects/picker/src/lib/date-time/calendar-year-view.component.html","../../../projects/picker/src/lib/date-time/calendar-multi-year-view.component.ts","../../../projects/picker/src/lib/date-time/calendar-multi-year-view.component.html","../../../projects/picker/src/lib/date-time/calendar.component.ts","../../../projects/picker/src/lib/date-time/calendar.component.html","../../../projects/picker/src/lib/date-time/numberedFixLen.pipe.ts","../../../projects/picker/src/lib/date-time/timer-box.component.ts","../../../projects/picker/src/lib/date-time/timer-box.component.html","../../../projects/picker/src/lib/date-time/timer.component.ts","../../../projects/picker/src/lib/date-time/timer.component.html","../../../projects/picker/src/lib/date-time/date-time-picker.animations.ts","../../../projects/picker/src/lib/date-time/date-time-picker-container.component.ts","../../../projects/picker/src/lib/date-time/date-time-picker-container.component.html","../../../projects/picker/src/lib/date-time/date-time.class.ts","../../../projects/picker/src/lib/dialog/dialog-config.class.ts","../../../projects/picker/src/lib/dialog/dialog-ref.class.ts","../../../projects/picker/src/lib/dialog/dialog-container.component.ts","../../../projects/picker/src/lib/dialog/dialog-container.component.html","../../../projects/picker/src/lib/utils/object.utils.ts","../../../projects/picker/src/lib/utils/index.ts","../../../projects/picker/src/lib/dialog/dialog.service.ts","../../../projects/picker/src/lib/date-time/date-time-picker.component.ts","../../../projects/picker/src/lib/date-time/date-time-picker.component.html","../../../projects/picker/src/lib/date-time/date-time-picker-input.directive.ts","../../../projects/picker/src/lib/date-time/date-time-inline.component.ts","../../../projects/picker/src/lib/date-time/date-time-inline.component.html","../../../projects/picker/src/lib/dialog/dialog.module.ts","../../../projects/picker/src/lib/date-time/date-time.module.ts","../../../projects/picker/src/lib/date-time/adapter/native-date-time-adapter.class.ts","../../../projects/picker/src/lib/date-time/adapter/native-date-time-format.class.ts","../../../projects/picker/src/lib/date-time/adapter/native-date-time.module.ts","../../../projects/picker/src/axiros-datetime-picker.ts"],"sourcesContent":["import {\n    AfterContentInit,\n    ChangeDetectorRef,\n    Directive,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    SimpleChanges\n} from '@angular/core';\nimport { OwlDateTimeComponent } from './date-time-picker.component';\nimport {merge, of, Subscription} from 'rxjs';\n\n@Directive({\n    selector: '[owlDateTimeTrigger]',\n    host: {\n        '(click)': 'handleClickOnHost($event)',\n        '[class.owl-dt-trigger-disabled]': 'owlDTTriggerDisabledClass'\n    }\n})\nexport class OwlDateTimeTriggerDirective<T> implements OnInit, OnChanges, AfterContentInit, OnDestroy {\n\n    @Input('owlDateTimeTrigger') dtPicker: OwlDateTimeComponent<T>;\n\n    private _disabled: boolean;\n    @Input()\n    get disabled(): boolean {\n        return this._disabled === undefined ? this.dtPicker.disabled : !!this._disabled;\n    }\n\n    set disabled( value: boolean ) {\n        this._disabled = value;\n    }\n\n    get owlDTTriggerDisabledClass(): boolean {\n        return this.disabled;\n    }\n\n    private stateChanges = Subscription.EMPTY;\n\n    constructor( protected changeDetector: ChangeDetectorRef ) {\n    }\n\n    public ngOnInit(): void {\n    }\n\n    public ngOnChanges( changes: SimpleChanges ) {\n        if (changes.datepicker) {\n            this.watchStateChanges();\n        }\n    }\n\n    public ngAfterContentInit() {\n        this.watchStateChanges();\n    }\n\n    public ngOnDestroy(): void {\n        this.stateChanges.unsubscribe();\n    }\n\n    public handleClickOnHost( event: Event ): void {\n        if (this.dtPicker) {\n            this.dtPicker.open();\n            event.stopPropagation();\n        }\n    }\n\n    private watchStateChanges(): void {\n        this.stateChanges.unsubscribe();\n\n        const inputDisabled = this.dtPicker && this.dtPicker.dtInput ?\n            this.dtPicker.dtInput.disabledChange : of();\n\n        const pickerDisabled = this.dtPicker ?\n            this.dtPicker.disabledChange : of();\n\n        this.stateChanges = merge([pickerDisabled, inputDisabled])\n            .subscribe(() => {\n                this.changeDetector.markForCheck();\n            });\n    }\n}\n","/**\n * date-time-format.class\n */\n\nimport { InjectionToken } from '@angular/core';\n\nexport type OwlDateTimeFormats = {\n    parseInput: any,\n    fullPickerInput: any,\n    datePickerInput: any,\n    timePickerInput: any,\n    monthYearLabel: any,\n    dateA11yLabel: any,\n    monthYearA11yLabel: any,\n};\n\n/** InjectionToken for date time picker that can be used to override default format. */\nexport const OWL_DATE_TIME_FORMATS = new InjectionToken<OwlDateTimeFormats>('OWL_DATE_TIME_FORMATS');\n","/**\n * date-time-picker-intl.service\n */\n\nimport { Injectable } from '@angular/core';\nimport { Subject } from 'rxjs';\n\n@Injectable({providedIn: 'root'})\nexport class OwlDateTimeIntl {\n\n    /**\n     * Stream that emits whenever the labels here are changed. Use this to notify\n     * components if the labels have changed after initialization.\n     */\n    readonly changes: Subject<void> = new Subject<void>();\n\n    /** A label for the up second button (used by screen readers).  */\n    upSecondLabel = 'Add a second';\n\n    /** A label for the down second button (used by screen readers).  */\n    downSecondLabel = 'Minus a second';\n\n    /** A label for the up minute button (used by screen readers).  */\n    upMinuteLabel = 'Add a minute';\n\n    /** A label for the down minute button (used by screen readers).  */\n    downMinuteLabel = 'Minus a minute';\n\n    /** A label for the up hour button (used by screen readers).  */\n    upHourLabel = 'Add a hour';\n\n    /** A label for the down hour button (used by screen readers).  */\n    downHourLabel = 'Minus a hour';\n\n    /** A label for the previous month button (used by screen readers). */\n    prevMonthLabel = 'Previous month';\n\n    /** A label for the next month button (used by screen readers). */\n    nextMonthLabel = 'Next month';\n\n    /** A label for the previous year button (used by screen readers). */\n    prevYearLabel = 'Previous year';\n\n    /** A label for the next year button (used by screen readers). */\n    nextYearLabel = 'Next year';\n\n    /** A label for the previous multi-year button (used by screen readers). */\n    prevMultiYearLabel = 'Previous 21 years';\n\n    /** A label for the next multi-year button (used by screen readers). */\n    nextMultiYearLabel = 'Next 21 years';\n\n    /** A label for the 'switch to month view' button (used by screen readers). */\n    switchToMonthViewLabel = 'Change to month view';\n\n    /** A label for the 'switch to year view' button (used by screen readers). */\n    switchToMultiYearViewLabel = 'Choose month and year';\n\n    /** A label for the cancel button */\n    cancelBtnLabel = 'Cancel';\n\n    /** A label for the set button */\n    setBtnLabel = 'Set';\n\n    /** A label for the range 'from' in picker info */\n    rangeFromLabel = 'From';\n\n    /** A label for the range 'to' in picker info */\n    rangeToLabel = 'To';\n\n    /** A label for the hour12 button (AM) */\n    hour12AMLabel = 'AM';\n\n    /** A label for the hour12 button (PM) */\n    hour12PMLabel = 'PM';\n}\n","/**\n * date-time-adapter.class\n */\nimport { Observable, Subject } from 'rxjs';\nimport { inject, InjectionToken, LOCALE_ID } from '@angular/core';\n\n/** InjectionToken for date time picker that can be used to override default locale code. */\nexport const OWL_DATE_TIME_LOCALE = new InjectionToken<string>(\n    'OWL_DATE_TIME_LOCALE',\n    {\n        providedIn: 'root',\n        factory: OWL_DATE_TIME_LOCALE_FACTORY\n    }\n);\n\n/** @docs-private */\nexport function OWL_DATE_TIME_LOCALE_FACTORY(): string {\n    return inject(LOCALE_ID);\n}\n\n/** Provider for OWL_DATE_TIME_LOCALE injection token. */\nexport const OWL_DATE_TIME_LOCALE_PROVIDER = {\n    provide: OWL_DATE_TIME_LOCALE,\n    useExisting: LOCALE_ID\n};\n\nexport abstract class DateTimeAdapter<T> {\n    /** The locale to use for all dates. */\n    protected locale: any;\n\n    /** A stream that emits when the locale changes. */\n    protected _localeChanges = new Subject<void>();\n    get localeChanges(): Observable<void> {\n        return this._localeChanges;\n    }\n\n    /** total milliseconds in a day. */\n    protected readonly millisecondsInDay = 86400000;\n\n    /** total milliseconds in a minute. */\n    protected readonly millisecondsInMinute = 60000;\n\n    /**\n     * Get the year of the given date\n     */\n    abstract getYear(date: T): number;\n\n    /**\n     * Get the month of the given date\n     * 0 -- January\n     * 11 -- December\n     * */\n    abstract getMonth(date: T): number;\n\n    /**\n     * Get the day of the week of the given date\n     * 0 -- Sunday\n     * 6 -- Saturday\n     * */\n    abstract getDay(date: T): number;\n\n    /**\n     * Get the day num of the given date\n     */\n    abstract getDate(date: T): number;\n\n    /**\n     * Get the hours of the given date\n     */\n    abstract getHours(date: T): number;\n\n    /**\n     * Get the minutes of the given date\n     */\n    abstract getMinutes(date: T): number;\n\n    /**\n     * Get the seconds of the given date\n     */\n    abstract getSeconds(date: T): number;\n\n    /**\n     * Get the milliseconds timestamp of the given date\n     */\n    abstract getTime(date: T): number;\n\n    /**\n     * Gets the number of days in the month of the given date.\n     */\n    abstract getNumDaysInMonth(date: T): number;\n\n    /**\n     * Get the number of calendar days between the given dates.\n     * If dateLeft is before dateRight, it would return positive value\n     * If dateLeft is after dateRight, it would return negative value\n     */\n    abstract differenceInCalendarDays(dateLeft: T, dateRight: T): number;\n\n    /**\n     * Gets the name for the year of the given date.\n     */\n    abstract getYearName(date: T): string;\n\n    /**\n     * Get a list of month names\n     */\n    abstract getMonthNames(style: 'long' | 'short' | 'narrow'): string[];\n\n    /**\n     * Get a list of week names\n     */\n    abstract getDayOfWeekNames(style: 'long' | 'short' | 'narrow'): string[];\n\n    /**\n     * Gets a list of names for the dates of the month.\n     */\n    abstract getDateNames(): string[];\n\n    /**\n     * Return a Date object as a string, using the ISO standard\n     */\n    abstract toIso8601(date: T): string;\n\n    /**\n     * Check if the give dates are equal\n     */\n    abstract isEqual(dateLeft: T, dateRight: T): boolean;\n\n    /**\n     * Check if the give dates are the same day\n     */\n    abstract isSameDay(dateLeft: T, dateRight: T): boolean;\n\n    /**\n     * Checks whether the given date is valid.\n     */\n    abstract isValid(date: T): boolean;\n\n    /**\n     * Gets date instance that is not valid.\n     */\n    abstract invalid(): T;\n\n    /**\n     * Checks whether the given object is considered a date instance by this DateTimeAdapter.\n     */\n    abstract isDateInstance(obj: any): boolean;\n\n    /**\n     * Add the specified number of years to the given date\n     */\n    abstract addCalendarYears(date: T, amount: number): T;\n\n    /**\n     * Add the specified number of months to the given date\n     */\n    abstract addCalendarMonths(date: T, amount: number): T;\n\n    /**\n     * Add the specified number of days to the given date\n     */\n    abstract addCalendarDays(date: T, amount: number): T;\n\n    /**\n     * Set the hours to the given date.\n     */\n    abstract setHours(date: T, amount: number): T;\n\n    /**\n     * Set the minutes to the given date.\n     */\n    abstract setMinutes(date: T, amount: number): T;\n\n    /**\n     * Set the seconds to the given date.\n     */\n    abstract setSeconds(date: T, amount: number): T;\n\n    /**\n     * Creates a date with the given year, month, date, hour, minute and second. Does not allow over/under-flow of the\n     * month and date.\n     */\n    abstract createDate(year: number, month: number, date: number): T;\n    abstract createDate(\n        year: number,\n        month: number,\n        date: number,\n        hours: number,\n        minutes: number,\n        seconds: number\n    ): T;\n\n    /**\n     * Clone the given date\n     */\n    abstract clone(date: T): T;\n\n    /**\n     * Get a new moment\n     * */\n    abstract now(): T;\n\n    /**\n     * Formats a date as a string according to the given format.\n     */\n    abstract format(date: T, displayFormat: any): string;\n\n    /**\n     * Parse a user-provided value to a Date Object\n     */\n    abstract parse(value: any, parseFormat: any): T | null;\n\n    /**\n     * Compare two given dates\n     * 1 if the first date is after the second,\n     * -1 if the first date is before the second\n     * 0 if dates are equal.\n     * */\n    compare(first: T, second: T): number {\n        if (!this.isValid(first) || !this.isValid(second)) {\n            throw Error('JSNativeDate: Cannot compare invalid dates.');\n        }\n\n        const dateFirst = this.clone(first);\n        const dateSecond = this.clone(second);\n\n        const diff = this.getTime(dateFirst) - this.getTime(dateSecond);\n\n        if (diff < 0) {\n            return -1;\n        } else if (diff > 0) {\n            return 1;\n        } else {\n            // Return 0 if diff is 0; return NaN if diff is NaN\n            return diff;\n        }\n    }\n\n    /**\n     * Check if two given dates are in the same year\n     * 1 if the first date's year is after the second,\n     * -1 if the first date's year is before the second\n     * 0 if two given dates are in the same year\n     * */\n    compareYear(first: T, second: T): number {\n        if (!this.isValid(first) || !this.isValid(second)) {\n            throw Error('JSNativeDate: Cannot compare invalid dates.');\n        }\n\n        const yearLeft = this.getYear(first);\n        const yearRight = this.getYear(second);\n\n        const diff = yearLeft - yearRight;\n\n        if (diff < 0) {\n            return -1;\n        } else if (diff > 0) {\n            return 1;\n        } else {\n            return 0;\n        }\n    }\n\n    /**\n     * Attempts to deserialize a value to a valid date object. This is different from parsing in that\n     * deserialize should only accept non-ambiguous, locale-independent formats (e.g. a ISO 8601\n     * string). The default implementation does not allow any deserialization, it simply checks that\n     * the given value is already a valid date object or null. The `<mat-datepicker>` will call this\n     * method on all of it's `@Input()` properties that accept dates. It is therefore possible to\n     * support passing values from your backend directly to these properties by overriding this method\n     * to also deserialize the format used by your backend.\n     */\n    deserialize(value: any): T | null {\n        if (\n            value == null ||\n            (this.isDateInstance(value) && this.isValid(value))\n        ) {\n            return value;\n        }\n        return this.invalid();\n    }\n\n    /**\n     * Sets the locale used for all dates.\n     */\n    setLocale(locale: any) {\n        this.locale = locale;\n        this._localeChanges.next();\n    }\n\n    /**\n     * Clamp the given date between min and max dates.\n     */\n    clampDate(date: T, min?: T | null, max?: T | null): T {\n        if (min && this.compare(date, min) < 0) {\n            return min;\n        }\n        if (max && this.compare(date, max) > 0) {\n            return max;\n        }\n        return date;\n    }\n}\n","/**\n * calendar-body.component\n */\n\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    EventEmitter,\n    Input,\n    NgZone,\n    OnInit,\n    Output\n} from '@angular/core';\nimport { SelectMode } from './date-time.class';\nimport {take} from 'rxjs/operators';\n\nexport class CalendarCell {\n    constructor(\n        public value: number,\n        public displayValue: string,\n        public ariaLabel: string,\n        public enabled: boolean,\n        public out: boolean = false,\n        public cellClass: string = ''\n    ) {}\n}\n\n@Component({\n    selector: '[owl-date-time-calendar-body]',\n    exportAs: 'owlDateTimeCalendarBody',\n    templateUrl: './calendar-body.component.html',\n    styleUrls: ['./calendar-body.component.scss'],\n    host:{\n        '[class.owl-dt-calendar-body]': 'owlDTCalendarBodyClass'\n    },\n    preserveWhitespaces: false,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class OwlCalendarBodyComponent implements OnInit {\n    /**\n     * The cell number of the active cell in the table.\n     */\n    @Input()\n    activeCell = 0;\n\n    /**\n     * The cells to display in the table.\n     * */\n    @Input()\n    rows: CalendarCell[][];\n\n    /**\n     * The number of columns in the table.\n     * */\n    @Input()\n    numCols = 7;\n\n    /**\n     * The ratio (width / height) to use for the cells in the table.\n     */\n    @Input()\n    cellRatio = 1;\n\n    /**\n     * The value in the table that corresponds to today.\n     * */\n    @Input()\n    todayValue: number;\n\n    /**\n     * The value in the table that is currently selected.\n     * */\n    @Input()\n    selectedValues: number[];\n\n    /**\n     * Current picker select mode\n     */\n    @Input()\n    selectMode: SelectMode;\n\n    /**\n     * Emit when a calendar cell is selected\n     * */\n    @Output()\n    public readonly select = new EventEmitter<CalendarCell>();\n\n    get owlDTCalendarBodyClass(): boolean {\n        return true;\n    }\n\n    get isInSingleMode(): boolean {\n        return this.selectMode === 'single';\n    }\n\n    get isInRangeMode(): boolean {\n        return (\n            this.selectMode === 'range' ||\n            this.selectMode === 'rangeFrom' ||\n            this.selectMode === 'rangeTo'\n        );\n    }\n\n    constructor(private elmRef: ElementRef, private ngZone: NgZone) {}\n\n    public ngOnInit() {}\n\n    public selectCell(cell: CalendarCell): void {\n        this.select.emit(cell);\n    }\n\n    public isActiveCell(rowIndex: number, colIndex: number): boolean {\n        const cellNumber = rowIndex * this.numCols + colIndex;\n        return cellNumber === this.activeCell;\n    }\n\n    /**\n     * Check if the cell is selected\n     */\n    public isSelected(value: number): boolean {\n        if (!this.selectedValues || this.selectedValues.length === 0) {\n            return false;\n        }\n\n        if (this.isInSingleMode) {\n            return value === this.selectedValues[0];\n        }\n\n        if (this.isInRangeMode) {\n            const fromValue = this.selectedValues[0];\n            const toValue = this.selectedValues[1];\n\n            return value === fromValue || value === toValue;\n        }\n    }\n\n    /**\n     * Check if the cell in the range\n     * */\n    public isInRange(value: number): boolean {\n        if (this.isInRangeMode) {\n            const fromValue = this.selectedValues[0];\n            const toValue = this.selectedValues[1];\n\n            if (fromValue !== null && toValue !== null) {\n                return value >= fromValue && value <= toValue;\n            } else {\n                return value === fromValue || value === toValue;\n            }\n        }\n    }\n\n    /**\n     * Check if the cell is the range from\n     * */\n    public isRangeFrom(value: number): boolean {\n        if (this.isInRangeMode) {\n            const fromValue = this.selectedValues[0];\n            return fromValue !== null && value === fromValue;\n        }\n    }\n\n    /**\n     * Check if the cell is the range to\n     * */\n    public isRangeTo(value: number): boolean {\n        if (this.isInRangeMode) {\n            const toValue = this.selectedValues[1];\n            return toValue !== null && value === toValue;\n        }\n    }\n\n    /**\n     * Focus to a active cell\n     * */\n    public focusActiveCell(): void {\n        this.ngZone.runOutsideAngular(() => {\n            this.ngZone.onStable\n                .asObservable()\n                .pipe(\n                    take(1)\n                )\n                .subscribe(() => {\n                    this.elmRef.nativeElement\n                        .querySelector('.owl-dt-calendar-cell-active')\n                        .focus();\n                });\n        });\n    }\n}\n","<tr *ngFor=\"let row of rows; let rowIndex = index\" role=\"row\">\n    <td *ngFor=\"let item of row; let colIndex = index\"\n        class=\"owl-dt-calendar-cell {{item.cellClass}}\"\n        [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n        [class.owl-dt-calendar-cell-active]=\"isActiveCell(rowIndex, colIndex)\"\n        [class.owl-dt-calendar-cell-disabled]=\"!item.enabled\"\n        [class.owl-dt-calendar-cell-in-range]=\"isInRange(item.value)\"\n        [class.owl-dt-calendar-cell-range-from]=\"isRangeFrom(item.value)\"\n        [class.owl-dt-calendar-cell-range-to]=\"isRangeTo(item.value)\"\n        [attr.aria-label]=\"item.ariaLabel\"\n        [attr.aria-disabled]=\"!item.enabled || null\"\n        [style.width.%]=\"100 / numCols\"\n        [style.paddingTop.%]=\"50 * cellRatio / numCols\"\n        [style.paddingBottom.%]=\"50 * cellRatio / numCols\"\n        (click)=\"selectCell(item)\">\n        <span class=\"owl-dt-calendar-cell-content\"\n              [ngClass]=\"{\n                'owl-dt-calendar-cell-out': item.out,\n                'owl-dt-calendar-cell-today': item.value === todayValue,\n                'owl-dt-calendar-cell-selected': isSelected(item.value)\n              }\">\n            {{item.displayValue}}\n        </span>\n    </td>\n</tr>\n","/**\n * calendar-month-view.component\n */\n\nimport {\n    AfterContentInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    EventEmitter,\n    Inject,\n    Input,\n    OnDestroy,\n    OnInit,\n    Optional,\n    Output,\n    ViewChild\n} from '@angular/core';\nimport {\n    CalendarCell,\n    OwlCalendarBodyComponent\n} from './calendar-body.component';\nimport { DateTimeAdapter } from './adapter/date-time-adapter.class';\nimport {\n    OWL_DATE_TIME_FORMATS,\n    OwlDateTimeFormats\n} from './adapter/date-time-format.class';\nimport { Subscription } from 'rxjs';\nimport { SelectMode } from './date-time.class';\nimport {\n    DOWN_ARROW,\n    END,\n    ENTER,\n    HOME,\n    LEFT_ARROW,\n    PAGE_DOWN,\n    PAGE_UP,\n    RIGHT_ARROW,\n    UP_ARROW\n} from '@angular/cdk/keycodes';\nimport { coerceNumberProperty } from '@angular/cdk/coercion';\n\nconst DAYS_PER_WEEK = 7;\nconst WEEKS_PER_VIEW = 6;\n\n@Component({\n    selector: 'owl-date-time-month-view',\n    exportAs: 'owlYearView',\n    templateUrl: './calendar-month-view.component.html',\n    styleUrls: ['./calendar-month-view.component.scss'],\n    host: {\n        '[class.owl-dt-calendar-view]': 'owlDTCalendarView'\n    },\n    preserveWhitespaces: false,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class OwlMonthViewComponent<T>\n    implements OnInit, AfterContentInit, OnDestroy {\n    /**\n     * Whether to hide dates in other months at the start or end of the current month.\n     * */\n    @Input()\n    hideOtherMonths: boolean = false;\n\n    /**\n     * Define the first day of a week\n     * Sunday: 0 ~ Saturday: 6\n     * */\n    private _firstDayOfWeek: number = 0;\n    @Input()\n    get firstDayOfWeek(): number {\n        return this._firstDayOfWeek;\n    }\n\n    set firstDayOfWeek(val: number) {\n        val = coerceNumberProperty(val);\n        if (val >= 0 && val <= 6 && val !== this._firstDayOfWeek) {\n            this._firstDayOfWeek = val;\n\n            if (this.initiated) {\n                this.generateWeekDays();\n                this.generateCalendar();\n                this.cdRef.markForCheck();\n            }\n        }\n    }\n\n    /**\n     * The select mode of the picker;\n     * */\n    private _selectMode: SelectMode = 'single';\n    @Input()\n    get selectMode(): SelectMode {\n        return this._selectMode;\n    }\n\n    set selectMode(val: SelectMode) {\n        this._selectMode = val;\n        if (this.initiated) {\n            this.generateCalendar();\n            this.cdRef.markForCheck();\n        }\n    }\n\n    /** The currently selected date. */\n    private _selected: T | null;\n    @Input()\n    get selected(): T | null {\n        return this._selected;\n    }\n\n    set selected(value: T | null) {\n        const oldSelected = this._selected;\n        value = this.dateTimeAdapter.deserialize(value);\n        this._selected = this.getValidDate(value);\n\n        if (!this.dateTimeAdapter.isSameDay(oldSelected, this._selected)) {\n            this.setSelectedDates();\n        }\n    }\n\n    private _selecteds: T[] = [];\n    @Input()\n    get selecteds(): T[] {\n        return this._selecteds;\n    }\n\n    set selecteds(values: T[]) {\n        this._selecteds = values.map(v => {\n            v = this.dateTimeAdapter.deserialize(v);\n            return this.getValidDate(v);\n        });\n        this.setSelectedDates();\n    }\n\n    private _pickerMoment: T;\n    @Input()\n    get pickerMoment() {\n        return this._pickerMoment;\n    }\n\n    set pickerMoment(value: T) {\n        const oldMoment = this._pickerMoment;\n        value = this.dateTimeAdapter.deserialize(value);\n        this._pickerMoment =\n            this.getValidDate(value) || this.dateTimeAdapter.now();\n\n        this.firstDateOfMonth = this.dateTimeAdapter.createDate(\n            this.dateTimeAdapter.getYear(this._pickerMoment),\n            this.dateTimeAdapter.getMonth(this._pickerMoment),\n            1\n        );\n\n        if (\n            !this.isSameMonth(oldMoment, this._pickerMoment) &&\n            this.initiated\n        ) {\n            this.generateCalendar();\n        }\n    }\n\n    /**\n     * A function used to filter which dates are selectable\n     * */\n    private _dateFilter: (date: T) => boolean;\n    @Input()\n    get dateFilter() {\n        return this._dateFilter;\n    }\n\n    set dateFilter(filter: (date: T) => boolean) {\n        this._dateFilter = filter;\n        if (this.initiated) {\n            this.generateCalendar();\n            this.cdRef.markForCheck();\n        }\n    }\n\n    /** The minimum selectable date. */\n    private _minDate: T | null;\n    @Input()\n    get minDate(): T | null {\n        return this._minDate;\n    }\n\n    set minDate(value: T | null) {\n        value = this.dateTimeAdapter.deserialize(value);\n        this._minDate = this.getValidDate(value);\n        if (this.initiated) {\n            this.generateCalendar();\n            this.cdRef.markForCheck();\n        }\n    }\n\n    /** The maximum selectable date. */\n    private _maxDate: T | null;\n    @Input()\n    get maxDate(): T | null {\n        return this._maxDate;\n    }\n\n    set maxDate(value: T | null) {\n        value = this.dateTimeAdapter.deserialize(value);\n        this._maxDate = this.getValidDate(value);\n\n        if (this.initiated) {\n            this.generateCalendar();\n            this.cdRef.markForCheck();\n        }\n    }\n\n    private _weekdays: Array<{ long: string; short: string; narrow: string }>;\n    get weekdays() {\n        return this._weekdays;\n    }\n\n    private _days: CalendarCell[][];\n    get days() {\n        return this._days;\n    }\n\n    get activeCell(): number {\n        if (this.pickerMoment) {\n            return (\n                this.dateTimeAdapter.getDate(this.pickerMoment) +\n                this.firstRowOffset -\n                1\n            );\n        }\n    }\n\n    get isInSingleMode(): boolean {\n        return this.selectMode === 'single';\n    }\n\n    get isInRangeMode(): boolean {\n        return (\n            this.selectMode === 'range' ||\n            this.selectMode === 'rangeFrom' ||\n            this.selectMode === 'rangeTo'\n        );\n    }\n\n    private firstDateOfMonth: T;\n\n    private localeSub: Subscription = Subscription.EMPTY;\n\n    private initiated = false;\n\n    private dateNames: string[];\n\n    /**\n     * The date of the month that today falls on.\n     * */\n    public todayDate: number | null;\n\n    /**\n     * An array to hold all selectedDates' value\n     * the value is the day number in current month\n     * */\n    public selectedDates: number[] = [];\n\n    // the index of cell that contains the first date of the month\n    public firstRowOffset: number;\n\n    /**\n     * Callback to invoke when a new date is selected\n     * */\n    @Output()\n    readonly selectedChange = new EventEmitter<T | null>();\n\n    /**\n     * Callback to invoke when any date is selected.\n     * */\n    @Output()\n    readonly userSelection = new EventEmitter<void>();\n\n    /** Emits when any date is activated. */\n    @Output()\n    readonly pickerMomentChange: EventEmitter<T> = new EventEmitter<T>();\n\n    /** The body of calendar table */\n    @ViewChild(OwlCalendarBodyComponent, { static: true })\n    calendarBodyElm: OwlCalendarBodyComponent;\n\n    get owlDTCalendarView(): boolean {\n        return true;\n    }\n\n    constructor(\n        private cdRef: ChangeDetectorRef,\n        @Optional() private dateTimeAdapter: DateTimeAdapter<T>,\n        @Optional()\n        @Inject(OWL_DATE_TIME_FORMATS)\n        private dateTimeFormats: OwlDateTimeFormats\n    ) {}\n\n    public ngOnInit() {\n        this.generateWeekDays();\n\n        this.localeSub = this.dateTimeAdapter.localeChanges.subscribe(() => {\n            this.generateWeekDays();\n            this.generateCalendar();\n            this.cdRef.markForCheck();\n        });\n    }\n\n    public ngAfterContentInit(): void {\n        this.generateCalendar();\n        this.initiated = true;\n    }\n\n    public ngOnDestroy(): void {\n        this.localeSub.unsubscribe();\n    }\n\n    /**\n     * Handle a calendarCell selected\n     */\n    public selectCalendarCell(cell: CalendarCell): void {\n        // Cases in which the date would not be selected\n        // 1, the calendar cell is NOT enabled (is NOT valid)\n        // 2, the selected date is NOT in current picker's month and the hideOtherMonths is enabled\n        if (!cell.enabled || (this.hideOtherMonths && cell.out)) {\n            return;\n        }\n\n        this.selectDate(cell.value);\n    }\n\n    /**\n     * Handle a new date selected\n     */\n    private selectDate(date: number): void {\n        const daysDiff = date - 1;\n        const selected = this.dateTimeAdapter.addCalendarDays(\n            this.firstDateOfMonth,\n            daysDiff\n        );\n\n        this.selectedChange.emit(selected);\n        this.userSelection.emit();\n    }\n\n    /**\n     * Handle keydown event on calendar body\n     */\n    public handleCalendarKeydown(event: KeyboardEvent): void {\n        let moment;\n        switch (event.keyCode) {\n            // minus 1 day\n            case LEFT_ARROW:\n                moment = this.dateTimeAdapter.addCalendarDays(\n                    this.pickerMoment,\n                    -1\n                );\n                this.pickerMomentChange.emit(moment);\n                break;\n\n            // add 1 day\n            case RIGHT_ARROW:\n                moment = this.dateTimeAdapter.addCalendarDays(\n                    this.pickerMoment,\n                    1\n                );\n                this.pickerMomentChange.emit(moment);\n                break;\n\n            // minus 1 week\n            case UP_ARROW:\n                moment = this.dateTimeAdapter.addCalendarDays(\n                    this.pickerMoment,\n                    -7\n                );\n                this.pickerMomentChange.emit(moment);\n                break;\n\n            // add 1 week\n            case DOWN_ARROW:\n                moment = this.dateTimeAdapter.addCalendarDays(\n                    this.pickerMoment,\n                    7\n                );\n                this.pickerMomentChange.emit(moment);\n                break;\n\n            // move to first day of current month\n            case HOME:\n                moment = this.dateTimeAdapter.addCalendarDays(\n                    this.pickerMoment,\n                    1 - this.dateTimeAdapter.getDate(this.pickerMoment)\n                );\n                this.pickerMomentChange.emit(moment);\n                break;\n\n            // move to last day of current month\n            case END:\n                moment = this.dateTimeAdapter.addCalendarDays(\n                    this.pickerMoment,\n                    this.dateTimeAdapter.getNumDaysInMonth(this.pickerMoment) -\n                        this.dateTimeAdapter.getDate(this.pickerMoment)\n                );\n                this.pickerMomentChange.emit(moment);\n                break;\n\n            // minus 1 month (or 1 year)\n            case PAGE_UP:\n                moment = event.altKey\n                    ? this.dateTimeAdapter.addCalendarYears(\n                          this.pickerMoment,\n                          -1\n                      )\n                    : this.dateTimeAdapter.addCalendarMonths(\n                          this.pickerMoment,\n                          -1\n                      );\n                this.pickerMomentChange.emit(moment);\n                break;\n\n            // add 1 month (or 1 year)\n            case PAGE_DOWN:\n                moment = event.altKey\n                    ? this.dateTimeAdapter.addCalendarYears(\n                          this.pickerMoment,\n                          1\n                      )\n                    : this.dateTimeAdapter.addCalendarMonths(\n                          this.pickerMoment,\n                          1\n                      );\n                this.pickerMomentChange.emit(moment);\n                break;\n\n            // select the pickerMoment\n            case ENTER:\n                if (!this.dateFilter || this.dateFilter(this.pickerMoment)) {\n                    this.selectDate(\n                        this.dateTimeAdapter.getDate(this.pickerMoment)\n                    );\n                }\n                break;\n            default:\n                return;\n        }\n\n        this.focusActiveCell();\n        event.preventDefault();\n    }\n\n    /**\n     * Generate the calendar weekdays array\n     * */\n    private generateWeekDays(): void {\n        const longWeekdays = this.dateTimeAdapter.getDayOfWeekNames('long');\n        const shortWeekdays = this.dateTimeAdapter.getDayOfWeekNames('short');\n        const narrowWeekdays = this.dateTimeAdapter.getDayOfWeekNames('narrow');\n        const firstDayOfWeek = this.firstDayOfWeek;\n\n        const weekdays = longWeekdays.map((long, i) => {\n            return { long, short: shortWeekdays[i], narrow: narrowWeekdays[i] };\n        });\n\n        this._weekdays = weekdays\n            .slice(firstDayOfWeek)\n            .concat(weekdays.slice(0, firstDayOfWeek));\n\n        this.dateNames = this.dateTimeAdapter.getDateNames();\n\n        return;\n    }\n\n    /**\n     * Generate the calendar days array\n     * */\n    private generateCalendar(): void {\n        if (!this.pickerMoment) {\n            return;\n        }\n\n        this.todayDate = null;\n\n        // the first weekday of the month\n        const startWeekdayOfMonth = this.dateTimeAdapter.getDay(\n            this.firstDateOfMonth\n        );\n        const firstDayOfWeek = this.firstDayOfWeek;\n\n        // the amount of days from the first date of the month\n        // if it is < 0, it means the date is in previous month\n        let daysDiff =\n            0 -\n            ((startWeekdayOfMonth + (DAYS_PER_WEEK - firstDayOfWeek)) %\n                DAYS_PER_WEEK);\n\n        // the index of cell that contains the first date of the month\n        this.firstRowOffset = Math.abs(daysDiff);\n\n        this._days = [];\n        for (let i = 0; i < WEEKS_PER_VIEW; i++) {\n            const week = [];\n            for (let j = 0; j < DAYS_PER_WEEK; j++) {\n                const date = this.dateTimeAdapter.addCalendarDays(\n                    this.firstDateOfMonth,\n                    daysDiff\n                );\n                const dateCell = this.createDateCell(date, daysDiff);\n\n                // check if the date is today\n                if (\n                    this.dateTimeAdapter.isSameDay(\n                        this.dateTimeAdapter.now(),\n                        date\n                    )\n                ) {\n                    this.todayDate = daysDiff + 1;\n                }\n\n                week.push(dateCell);\n                daysDiff += 1;\n            }\n            this._days.push(week);\n        }\n\n        this.setSelectedDates();\n    }\n\n    /**\n     * Creates CalendarCell for days.\n     */\n    private createDateCell(date: T, daysDiff: number): CalendarCell {\n        // total days of the month\n        const daysInMonth = this.dateTimeAdapter.getNumDaysInMonth(\n            this.pickerMoment\n        );\n        const dateNum = this.dateTimeAdapter.getDate(date);\n        // const dateName = this.dateNames[dateNum - 1];\n        const dateName = dateNum.toString();\n        const ariaLabel = this.dateTimeAdapter.format(\n            date,\n            this.dateTimeFormats.dateA11yLabel\n        );\n\n        // check if the date if selectable\n        const enabled = this.isDateEnabled(date);\n\n        // check if date is not in current month\n        const dayValue = daysDiff + 1;\n        const out = dayValue < 1 || dayValue > daysInMonth;\n        const cellClass = 'owl-dt-day-' + this.dateTimeAdapter.getDay(date);\n\n        return new CalendarCell(\n            dayValue,\n            dateName,\n            ariaLabel,\n            enabled,\n            out,\n            cellClass\n        );\n    }\n\n    /**\n     * Check if the date is valid\n     */\n    private isDateEnabled(date: T): boolean {\n        return (\n            !!date &&\n            (!this.dateFilter || this.dateFilter(date)) &&\n            (!this.minDate ||\n                this.dateTimeAdapter.compare(date, this.minDate) >= 0) &&\n            (!this.maxDate ||\n                this.dateTimeAdapter.compare(date, this.maxDate) <= 0)\n        );\n    }\n\n    /**\n     * Get a valid date object\n     */\n    private getValidDate(obj: any): T | null {\n        return this.dateTimeAdapter.isDateInstance(obj) &&\n            this.dateTimeAdapter.isValid(obj)\n            ? obj\n            : null;\n    }\n\n    /**\n     * Check if the give dates are none-null and in the same month\n     */\n    public isSameMonth(dateLeft: T, dateRight: T): boolean {\n        return !!(\n            dateLeft &&\n            dateRight &&\n            this.dateTimeAdapter.isValid(dateLeft) &&\n            this.dateTimeAdapter.isValid(dateRight) &&\n            this.dateTimeAdapter.getYear(dateLeft) ===\n                this.dateTimeAdapter.getYear(dateRight) &&\n            this.dateTimeAdapter.getMonth(dateLeft) ===\n                this.dateTimeAdapter.getMonth(dateRight)\n        );\n    }\n\n    /**\n     * Set the selectedDates value.\n     * In single mode, it has only one value which represent the selected date\n     * In range mode, it would has two values, one for the fromValue and the other for the toValue\n     * */\n    private setSelectedDates(): void {\n        this.selectedDates = [];\n\n        if (!this.firstDateOfMonth) {\n            return;\n        }\n\n        if (this.isInSingleMode && this.selected) {\n            const dayDiff = this.dateTimeAdapter.differenceInCalendarDays(\n                this.selected,\n                this.firstDateOfMonth\n            );\n            this.selectedDates[0] = dayDiff + 1;\n            return;\n        }\n\n        if (this.isInRangeMode && this.selecteds) {\n            this.selectedDates = this.selecteds.map(selected => {\n                if (this.dateTimeAdapter.isValid(selected)) {\n                    const dayDiff = this.dateTimeAdapter.differenceInCalendarDays(\n                        selected,\n                        this.firstDateOfMonth\n                    );\n                    return dayDiff + 1;\n                } else {\n                    return null;\n                }\n            });\n        }\n    }\n\n    private focusActiveCell() {\n        this.calendarBodyElm.focusActiveCell();\n    }\n}\n","<table class=\"owl-dt-calendar-table owl-dt-calendar-month-table\"\n       [class.owl-dt-calendar-only-current-month]=\"hideOtherMonths\">\n    <thead class=\"owl-dt-calendar-header\">\n    <tr class=\"owl-dt-weekdays\">\n        <th *ngFor=\"let weekday of weekdays\"\n            [attr.aria-label]=\"weekday.long\"\n            class=\"owl-dt-weekday\" scope=\"col\">\n            <span>{{weekday.short}}</span>\n        </th>\n    </tr>\n    <tr>\n        <th class=\"owl-dt-calendar-table-divider\" aria-hidden=\"true\" colspan=\"7\"></th>\n    </tr>\n    </thead>\n    <tbody owl-date-time-calendar-body role=\"grid\"\n           [rows]=\"days\" [todayValue]=\"todayDate\"\n           [selectedValues]=\"selectedDates\"\n           [selectMode]=\"selectMode\"\n           [activeCell]=\"activeCell\"\n           (keydown)=\"handleCalendarKeydown($event)\"\n           (select)=\"selectCalendarCell($event)\">\n    </tbody>\n</table>\n","/**\n * calendar-year-view.component\n */\n\nimport {\n    AfterContentInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    EventEmitter,\n    Inject,\n    Input,\n    OnDestroy,\n    OnInit,\n    Optional,\n    Output,\n    ViewChild\n} from '@angular/core';\nimport {\n    CalendarCell,\n    OwlCalendarBodyComponent\n} from './calendar-body.component';\nimport { DateTimeAdapter } from './adapter/date-time-adapter.class';\nimport {\n    OWL_DATE_TIME_FORMATS,\n    OwlDateTimeFormats\n} from './adapter/date-time-format.class';\nimport { Subscription } from 'rxjs';\nimport { SelectMode } from './date-time.class';\nimport {\n    DOWN_ARROW,\n    END,\n    ENTER,\n    HOME,\n    LEFT_ARROW,\n    PAGE_DOWN,\n    PAGE_UP,\n    RIGHT_ARROW,\n    UP_ARROW\n} from '@angular/cdk/keycodes';\n\nconst MONTHS_PER_YEAR = 12;\nconst MONTHS_PER_ROW = 3;\n\n@Component({\n    selector: 'owl-date-time-year-view',\n    exportAs: 'owlMonthView',\n    templateUrl: './calendar-year-view.component.html',\n    styleUrls: ['./calendar-year-view.component.scss'],\n    host: {\n        '[class.owl-dt-calendar-view]': 'owlDTCalendarView'\n    },\n    preserveWhitespaces: false,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class OwlYearViewComponent<T>\n    implements OnInit, AfterContentInit, OnDestroy {\n    /**\n     * The select mode of the picker;\n     * */\n    private _selectMode: SelectMode = 'single';\n    @Input()\n    get selectMode(): SelectMode {\n        return this._selectMode;\n    }\n\n    set selectMode(val: SelectMode) {\n        this._selectMode = val;\n        if (this.initiated) {\n            this.generateMonthList();\n            this.cdRef.markForCheck();\n        }\n    }\n\n    /** The currently selected date. */\n    private _selected: T | null;\n    @Input()\n    get selected(): T | null {\n        return this._selected;\n    }\n\n    set selected(value: T | null) {\n        value = this.dateTimeAdapter.deserialize(value);\n        this._selected = this.getValidDate(value);\n        this.setSelectedMonths();\n    }\n\n    private _selecteds: T[] = [];\n    @Input()\n    get selecteds(): T[] {\n        return this._selecteds;\n    }\n\n    set selecteds(values: T[]) {\n        this._selecteds = [];\n        for (let i = 0; i < values.length; i++) {\n            const value = this.dateTimeAdapter.deserialize(values[i]);\n            this._selecteds.push(this.getValidDate(value));\n        }\n\n        this.setSelectedMonths();\n    }\n\n    private _pickerMoment: T | null;\n    @Input()\n    get pickerMoment() {\n        return this._pickerMoment;\n    }\n\n    set pickerMoment(value: T) {\n        const oldMoment = this._pickerMoment;\n        value = this.dateTimeAdapter.deserialize(value);\n        this._pickerMoment =\n            this.getValidDate(value) || this.dateTimeAdapter.now();\n\n        if (\n            !this.hasSameYear(oldMoment, this._pickerMoment) &&\n            this.initiated\n        ) {\n            this.generateMonthList();\n        }\n    }\n\n    /**\n     * A function used to filter which dates are selectable\n     * */\n    private _dateFilter: (date: T) => boolean;\n    @Input()\n    get dateFilter() {\n        return this._dateFilter;\n    }\n\n    set dateFilter(filter: (date: T) => boolean) {\n        this._dateFilter = filter;\n        if (this.initiated) {\n            this.generateMonthList();\n        }\n    }\n\n    /** The minimum selectable date. */\n    private _minDate: T | null;\n    @Input()\n    get minDate(): T | null {\n        return this._minDate;\n    }\n\n    set minDate(value: T | null) {\n        value = this.dateTimeAdapter.deserialize(value);\n        this._minDate = this.getValidDate(value);\n        if (this.initiated) {\n            this.generateMonthList();\n        }\n    }\n\n    /** The maximum selectable date. */\n    private _maxDate: T | null;\n    @Input()\n    get maxDate(): T | null {\n        return this._maxDate;\n    }\n\n    set maxDate(value: T | null) {\n        value = this.dateTimeAdapter.deserialize(value);\n        this._maxDate = this.getValidDate(value);\n        if (this.initiated) {\n            this.generateMonthList();\n        }\n    }\n\n    private readonly monthNames: string[];\n\n    private _months: CalendarCell[][];\n    get months() {\n        return this._months;\n    }\n\n    get activeCell(): number {\n        if (this._pickerMoment) {\n            return this.dateTimeAdapter.getMonth(this._pickerMoment);\n        }\n    }\n\n    get isInSingleMode(): boolean {\n        return this.selectMode === 'single';\n    }\n\n    get isInRangeMode(): boolean {\n        return (\n            this.selectMode === 'range' ||\n            this.selectMode === 'rangeFrom' ||\n            this.selectMode === 'rangeTo'\n        );\n    }\n\n    private localeSub: Subscription = Subscription.EMPTY;\n\n    private initiated = false;\n\n    public todayMonth: number | null;\n\n    /**\n     * An array to hold all selectedDates' month value\n     * the value is the month number in current year\n     * */\n    public selectedMonths: number[] = [];\n\n    /**\n     * Callback to invoke when a new month is selected\n     * */\n    @Output()\n    readonly change = new EventEmitter<T>();\n\n    /**\n     * Emits the selected year. This doesn't imply a change on the selected date\n     * */\n    @Output()\n    readonly monthSelected = new EventEmitter<T>();\n\n    /** Emits when any date is activated. */\n    @Output()\n    readonly pickerMomentChange: EventEmitter<T> = new EventEmitter<T>();\n\n    /** Emits when use keyboard enter to select a calendar cell */\n    @Output()\n    readonly keyboardEnter: EventEmitter<any> = new EventEmitter<any>();\n\n    /** The body of calendar table */\n    @ViewChild(OwlCalendarBodyComponent, { static: true })\n    calendarBodyElm: OwlCalendarBodyComponent;\n\n    get owlDTCalendarView(): boolean {\n        return true;\n    }\n\n    constructor(\n        private cdRef: ChangeDetectorRef,\n        @Optional() private dateTimeAdapter: DateTimeAdapter<T>,\n        @Optional()\n        @Inject(OWL_DATE_TIME_FORMATS)\n        private dateTimeFormats: OwlDateTimeFormats\n    ) {\n        this.monthNames = this.dateTimeAdapter.getMonthNames('short');\n    }\n\n    public ngOnInit() {\n        this.localeSub = this.dateTimeAdapter.localeChanges.subscribe(() => {\n            this.generateMonthList();\n            this.cdRef.markForCheck();\n        });\n    }\n\n    public ngAfterContentInit(): void {\n        this.generateMonthList();\n        this.initiated = true;\n    }\n\n    public ngOnDestroy(): void {\n        this.localeSub.unsubscribe();\n    }\n\n    /**\n     * Handle a calendarCell selected\n     */\n    public selectCalendarCell(cell: CalendarCell): void {\n        this.selectMonth(cell.value);\n    }\n\n    /**\n     * Handle a new month selected\n     */\n    private selectMonth(month: number): void {\n        const firstDateOfMonth = this.dateTimeAdapter.createDate(\n            this.dateTimeAdapter.getYear(this.pickerMoment),\n            month,\n            1\n        );\n\n        this.monthSelected.emit(firstDateOfMonth);\n\n        const daysInMonth = this.dateTimeAdapter.getNumDaysInMonth(\n            firstDateOfMonth\n        );\n        const result = this.d