@bimeister/pupakit.forms/fesm2020/bimeister-pupakit.forms.mjs

PupaKit Forms

import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, NgModule, Injectable, EventEmitter, Output, ViewChild, HostListener, CUSTOM_ELEMENTS_SCHEMA, InjectionToken, Optional, Inject, Directive, Host, HostBinding, forwardRef, ContentChild } from '@angular/core';
import * as i2 from '@angular/cdk/scrolling';
import { ScrollingModule } from '@angular/cdk/scrolling';
import * as i1 from '@angular/common';
import { CommonModule, DatePipe, DOCUMENT } from '@angular/common';
import * as i1$2 from '@bimeister/pupakit.common';
import { PupaPipesModule, DEFAULT_LOCALE, getFormattedTimeDigit, TimeDigitFormatPipe, PupaDirectivesModule } from '@bimeister/pupakit.common';
import * as i1$1 from '@bimeister/pupakit.icons';
import { PupaIconsModule, iosArrowBackIcon, iosArrowForwardIcon, mAbortIcon, mCalendarIcon, mErrorIcon, mEyeClosedIcon, mEyeOpenIcon, mClockIcon, mdStarIcon, mdStarOutlineIcon, appCrossCircleIcon, appSearchIcon, appChevronDownIcon, appChevronUpIcon, mCollapseIcon } from '@bimeister/pupakit.icons';
import { isNil, shareReplayWithRefCount, filterNotNil, filterFalsy, filterTruthy, isEqual, VOID, isEmpty as isEmpty$1, distinctUntilSerializedChanged, resizeObservable } from '@bimeister/utilities';
import { BehaviorSubject, combineLatest, NEVER, of, ReplaySubject, Subscription, fromEvent, merge, animationFrameScheduler } from 'rxjs';
import { map, filter, take, switchMap, distinctUntilChanged, withLatestFrom, debounceTime, skip, tap, startWith, delay, switchMapTo, observeOn } from 'rxjs/operators';
import * as i2$1 from '@angular/forms';
import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormControl } from '@angular/forms';
import { isEmpty } from '@bimeister/utilities/common';
import * as i2$2 from '@angular/cdk/overlay';
import { OverlayConfig, OverlayModule, ConnectionPositionPair, CdkConnectedOverlay } from '@angular/cdk/overlay';
import * as i2$3 from '@angular/cdk/portal';
import { CdkPortal, PortalModule, TemplatePortal } from '@angular/cdk/portal';
import { trigger, state, style, transition, animate } from '@angular/animations';
import * as i3 from '@bimeister/pupakit.kit';
import { PupaTooltipModule, PupaButtonsModule, PupaCheckboxModule, PupaTagModule, PupaThemeWrapperModule, PupaOptionModule, PupaScrollableModule } from '@bimeister/pupakit.kit';
import * as i9 from 'ngx-mask';
import { NgxMaskModule } from 'ngx-mask';
import { PupaTreeLayoutModule } from '@bimeister/pupakit.tree';

class ControlTextComponent {
    constructor() {
        this.isError = false;
    }
}
ControlTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ControlTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ControlTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ControlTextComponent, selector: "pupa-control-text", inputs: { isError: "isError" }, ngImport: i0, template: "<p class=\"control-text\" [class.control-text_error]=\"isError\">\n  <ng-content></ng-content>\n</p>\n", styles: [".control-text{height:auto;min-height:4.5rem;font-size:3rem;line-height:1.5;margin:0;padding:0;color:rgba(var(--color_neutral-200),var(--alpha-1000));font-family:NotoSans,sans-serif;font-weight:400}.control-text_error{color:rgba(var(--color_danger-500),var(--alpha-1000))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ControlTextComponent, decorators: [{
            type: Component,
            args: [{ selector: 'pupa-control-text', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: "<p class=\"control-text\" [class.control-text_error]=\"isError\">\n  <ng-content></ng-content>\n</p>\n", styles: [".control-text{height:auto;min-height:4.5rem;font-size:3rem;line-height:1.5;margin:0;padding:0;color:rgba(var(--color_neutral-200),var(--alpha-1000));font-family:NotoSans,sans-serif;font-weight:400}.control-text_error{color:rgba(var(--color_danger-500),var(--alpha-1000))}\n"] }]
        }], propDecorators: { isError: [{
                type: Input
            }] } });

class PupaControlTextModule {
}
PupaControlTextModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PupaControlTextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
PupaControlTextModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: PupaControlTextModule, declarations: [ControlTextComponent], exports: [ControlTextComponent] });
PupaControlTextModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PupaControlTextModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PupaControlTextModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [ControlTextComponent],
                    imports: [],
                    exports: [ControlTextComponent],
                }]
        }] });

const dayInMs = 86400000;

var DayOfWeek;
(function (DayOfWeek) {
    DayOfWeek[DayOfWeek["Sunday"] = 0] = "Sunday";
    DayOfWeek[DayOfWeek["Monday"] = 1] = "Monday";
    DayOfWeek[DayOfWeek["Tuesday"] = 2] = "Tuesday";
    DayOfWeek[DayOfWeek["Wednesday"] = 3] = "Wednesday";
    DayOfWeek[DayOfWeek["Thursday"] = 4] = "Thursday";
    DayOfWeek[DayOfWeek["Friday"] = 5] = "Friday";
    DayOfWeek[DayOfWeek["Saturday"] = 6] = "Saturday";
})(DayOfWeek || (DayOfWeek = {}));

function isDate(date) {
    return !Number.isNaN(Date.parse(String(date)));
}

function dateClearTime(date) {
    if (isNil(date) || !isDate(date)) {
        return date;
    }
    const sanitizedDate = date;
    sanitizedDate.setHours(0, 0, 0, 0);
    return sanitizedDate;
}

function getDaysInMonth(date) {
    const maxDaysInMonth = 33;
    return maxDaysInMonth - dateClearTime(new Date(date.getFullYear(), date.getMonth(), maxDaysInMonth)).getDate();
}

function sanitizeDate(date) {
    return new Date(Date.parse(String(date)));
}

function getRangeEndDate(range) {
    if (!Array.isArray(range)) {
        return undefined;
    }
    const rangeEndDateIndex = range.findIndex((rangeItem, rangeItemIndex, rangeItemOrigin) => {
        const nextItem = rangeItemOrigin[rangeItemIndex + 1];
        const previousItem = rangeItemOrigin[rangeItemIndex - 1];
        if (isNil(rangeItem)) {
            return false;
        }
        if (isNil(previousItem)) {
            return rangeItem.valueOf() > nextItem.valueOf();
        }
        return rangeItem.valueOf() > previousItem.valueOf();
    });
    if (Object.is(rangeEndDateIndex, -1)) {
        return range[0];
    }
    return range[rangeEndDateIndex];
}

function getRangeStartDate(range) {
    if (!Array.isArray(range)) {
        return undefined;
    }
    const rangeStartDateIndex = range.findIndex((rangeItem, rangeItemIndex, rangeItemOrigin) => {
        const nextItem = rangeItemOrigin[rangeItemIndex + 1];
        const previousItem = rangeItemOrigin[rangeItemIndex - 1];
        if (isNil(rangeItem)) {
            return false;
        }
        if (isNil(previousItem)) {
            return rangeItem.valueOf() < nextItem.valueOf();
        }
        return rangeItem.valueOf() < previousItem.valueOf();
    });
    if (Object.is(rangeStartDateIndex, -1)) {
        return range[0];
    }
    return range[rangeStartDateIndex];
}

const WEEK_DAY_NAMES = ['ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ', 'ВС'];
const INVALID_RANGE_SIZE = 2;
const VALID_RANGE_SIZE = 2;
const DEFAULT_CURRENT_DATE_WITH_CLEARED_TIME$3 = dateClearTime(new Date());
class DatePickerStateService {
    constructor() {
        this.weekDayNames = WEEK_DAY_NAMES;
        this.currentDate = DEFAULT_CURRENT_DATE_WITH_CLEARED_TIME$3;
        this.hours$ = new BehaviorSubject(null);
        this.minutes$ = new BehaviorSubject(null);
        this.seconds$ = new BehaviorSubject(null);
        this.isBackDating$ = new BehaviorSubject(true);
        this.availableEndDate$ = new BehaviorSubject(Infinity);
        this.selectionMode$ = new BehaviorSubject('range');
        this.previewMode$ = new BehaviorSubject('simple');
        this.withSeconds$ = new BehaviorSubject(false);
        this.selectedDate$ = new BehaviorSubject(null);
        this.selectedRange$ = new BehaviorSubject([]);
        this.isSelectionModeDate$ = this.selectionMode$.pipe(map((selectionMode) => selectionMode === 'date'), shareReplayWithRefCount());
        this.hoveredDate$ = new BehaviorSubject(null);
        this.hoveredRange$ = combineLatest([this.selectedRange$, this.hoveredDate$]).pipe(filter((aggregatedDates) => {
            const selectedRange = aggregatedDates[0];
            return !Object.is(selectedRange.length, INVALID_RANGE_SIZE);
        }), map((aggregatedDates) => {
            const selectedRange = aggregatedDates[0];
            if (Object.is(selectedRange.length, 0)) {
                return [];
            }
            const selectedDateFromRange = selectedRange[selectedRange.length - 1];
            const hoveredDate = aggregatedDates[1];
            return [selectedDateFromRange, hoveredDate];
        }), shareReplayWithRefCount());
    }
    processDateSelection(date) {
        this.isSelectionModeDate$
            .pipe(filterNotNil(), take(1), switchMap((isSelectionModeDate) => {
            if (isSelectionModeDate) {
                this.selectedDate$.next(date);
                return NEVER;
            }
            return this.selectedRange$;
        }), take(1), map((alreadySelectedDates) => Object.is(alreadySelectedDates.length, 1) ? [alreadySelectedDates[alreadySelectedDates.length - 1]] : []))
            .subscribe((alreadySelectedDates) => this.selectedRange$.next([...alreadySelectedDates, date]));
    }
    processDateHover(date) {
        this.isSelectionModeDate$.pipe(filterNotNil(), take(1), filterFalsy()).subscribe(() => {
            this.hoveredDate$.next(date);
        });
    }
    isSameDate(dateA, dateB) {
        return !isNil(dateA) && !isNil(dateB) && Object.is(dateA.valueOf(), dateB.valueOf());
    }
    dateIsInDateRange(date, dateRange) {
        if (isNil(date) || !Array.isArray(dateRange) || Object.is(dateRange.length, 0)) {
            return false;
        }
        const uniqueRangeItemsMs = new Set(dateRange.filter((rangeItem) => !isNil(rangeItem)).map((rangeItem) => rangeItem.valueOf()));
        const rangeIsInvalid = !Object.is(uniqueRangeItemsMs.size, VALID_RANGE_SIZE);
        if (rangeIsInvalid) {
            return false;
        }
        const rangeStartDate = getRangeStartDate(dateRange);
        const rangeEndDate = getRangeEndDate(dateRange);
        const rangeStartDateMs = rangeStartDate.valueOf();
        const rangeEndDateMs = rangeEndDate.valueOf();
        const dateToTestMs = date.valueOf();
        return rangeStartDateMs < dateToTestMs && rangeEndDateMs > dateToTestMs;
    }
    dateIsInDateArray(date, dateArray) {
        if (isNil(date) || !Array.isArray(dateArray) || Object.is(dateArray.length, 0)) {
            return false;
        }
        return dateArray.some((dateFromRange) => this.isSameDate(dateFromRange, date));
    }
    dateIsRangeStartDate(date, dateRange) {
        if (isNil(date) || !Array.isArray(dateRange) || Object.is(dateRange.length, 0)) {
            return false;
        }
        const uniqueRangeItemsMs = new Set(dateRange.filter((rangeItem) => !isNil(rangeItem)).map((rangeItem) => rangeItem.valueOf()));
        const rangeIsInvalid = !Object.is(uniqueRangeItemsMs.size, VALID_RANGE_SIZE);
        if (rangeIsInvalid) {
            return false;
        }
        const rangeStartDate = getRangeStartDate(dateRange);
        return this.isSameDate(rangeStartDate, date);
    }
    dateIsRangeEndDate(date, dateRange) {
        if (isNil(date) || !Array.isArray(dateRange) || Object.is(dateRange.length, 0)) {
            return false;
        }
        const uniqueRangeItemsMs = new Set(dateRange.filter((rangeItem) => !isNil(rangeItem)).map((rangeItem) => rangeItem.valueOf()));
        const rangeIsInvalid = !Object.is(uniqueRangeItemsMs.size, VALID_RANGE_SIZE);
        if (rangeIsInvalid) {
            return false;
        }
        const rangeEndDate = getRangeEndDate(dateRange);
        return this.isSameDate(rangeEndDate, date);
    }
    dateIsNotAvailable(date, isBackDating, availableEndDate) {
        return (!isBackDating && date < DEFAULT_CURRENT_DATE_WITH_CLEARED_TIME$3) || date > availableEndDate;
    }
    isDateStartInHoveredAndSelectedRange(date, hoveredRange, selectedRange) {
        return this.dateIsRangeStartDate(date, hoveredRange) || this.dateIsRangeStartDate(date, selectedRange);
    }
    isDateEndInHoveredAndSelectedRange(date, hoveredRange, selectedRange) {
        return this.dateIsRangeEndDate(date, hoveredRange) || this.dateIsRangeEndDate(date, selectedRange);
    }
}
DatePickerStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DatePickerStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
DatePickerStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DatePickerStateService, providedIn: 'any' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DatePickerStateService, decorators: [{
            type: Injectable,
            args: [{ providedIn: 'any' }]
        }] });

const DEFAULT_YEAR = dateClearTime(new Date()).getFullYear();
const YEARS_IN_SECTION$1 = 30;
const DEFAULT_YEARS = Array(YEARS_IN_SECTION$1)
    .fill(0)
    .map((_year, index) => DEFAULT_YEAR + index);
class DatePickerYearsComponent {
    constructor() {
        this.years = DEFAULT_YEARS;
        this.years$ = new BehaviorSubject(DEFAULT_YEARS);
        this.currentYear = DEFAULT_YEAR;
        this.selectedYear = new EventEmitter();
    }
    ngOnChanges(changes) {
        this.processYearsChange(changes?.years);
    }
    selectYear(year) {
        this.selectedYear.emit(year);
    }
    processYearsChange(change) {
        const updatedValue = change?.currentValue;
        if (isNil(updatedValue)) {
            return;
        }
        this.years$.next(updatedValue);
    }
}
DatePickerYearsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DatePickerYearsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
DatePickerYearsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DatePickerYearsComponent, selector: "pupa-date-picker-years", inputs: { years: "years" }, outputs: { selectedYear: "selectedYear" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"year\" *ngFor=\"let year of years$ | async\" [class.current]=\"year === currentYear\" (click)=\"selectYear(year)\">\n  {{ year }}\n</div>\n", styles: [".date-picker{all:unset;box-shadow:0 2rem 8rem #0000001a;border-radius:2rem;background:rgba(var(--color_neutral-1),var(--alpha-1000));display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;flex-wrap:nowrap}.date-picker__header{height:36px;width:100%;box-sizing:border-box;padding:0 4rem;display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:nowrap}.date-picker__week-days{height:6.25rem;width:100%;padding:0 4rem;margin:0 0 6px;box-sizing:border-box;background:rgba(var(--color_primary-50),var(--alpha-1000));display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:nowrap}.date-picker__wrapper{width:100%;padding:0 4rem 2rem;box-sizing:border-box;overflow:hidden;display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap}.date-picker__row{display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;flex-wrap:nowrap}.title{all:unset;color:rgba(var(--color_neutral-500),var(--alpha-1000));line-height:1.43;font-weight:400;font-style:normal;font-stretch:normal;-webkit-user-select:none;user-select:none;display:flex;font-size:14px;line-height:16px}.title__month:not(.disable-hover),.title__year:not(.disable-hover){transition:color .2s ease}.title__month:not(.disable-hover):hover,.title__year:not(.disable-hover):hover{color:rgba(var(--color_primary-500),var(--alpha-1000));cursor:pointer}.title.selected{color:rgba(var(--color_primary-500),var(--alpha-1000));cursor:default}.week-day{all:unset;color:rgba(var(--color_neutral-200),var(--alpha-1000));width:14.2857142857%;font-size:3rem;-webkit-user-select:none;user-select:none;font-family:NotoSans,sans-serif;font-weight:400;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap}.date-wrapper{position:relative;cursor:pointer;background-color:transparent;width:14.2857142857%;height:24px;margin-bottom:6px;padding:0;-webkit-user-select:none;user-select:none;font-family:NotoSans,sans-serif;font-weight:400;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap}.date-wrapper__range{background-color:rgba(var(--color_primary-50),var(--alpha-1000))}.date-wrapper:nth-child(7n){border-top-right-radius:24px;border-bottom-right-radius:24px}.date-wrapper:nth-child(7n) .date__range-start:before{display:none}.date-wrapper:nth-child(7n+1){border-top-left-radius:24px;border-bottom-left-radius:24px}.date-wrapper:nth-child(7n+1) .date__range-end:before{display:none}.date-wrapper__first.date-wrapper__range{border-bottom-left-radius:24px;border-top-left-radius:24px}.date-wrapper__last.date-wrapper__range{border-bottom-right-radius:24px;border-top-right-radius:24px}.date-wrapper__disabled{pointer-events:none}.date-wrapper__disabled .date__range-start:before,.date-wrapper__disabled .date__range-end:before{display:none}.date{position:relative;width:24px;height:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap}.date__range-start:before{position:absolute;content:\"\";top:0;left:0;width:200%;height:100%;background-color:rgba(var(--color_primary-50),var(--alpha-1000));border-bottom-left-radius:24px;border-top-left-radius:24px;z-index:0}.date__range-end:before{position:absolute;content:\"\";top:0;right:0;width:200%;height:100%;background-color:rgba(var(--color_primary-50),var(--alpha-1000));border-bottom-right-radius:24px;border-top-right-radius:24px;z-index:0}.date-inner{font-size:3rem;color:rgba(var(--color_neutral-1000),var(--alpha-1000));line-height:4rem;font-weight:400;position:relative;width:100%;height:100%;border-radius:100%;transition-duration:var(--transition-duration_common);transition-timing-function:var(--transition-timing-function_common);transition-property:color,background-color;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap;z-index:2}.date-inner__selected{background-color:rgba(var(--color_primary-500),var(--alpha-1000));color:rgba(var(--color_neutral-1),var(--alpha-1000))}.date-inner__disabled{color:rgba(var(--color_neutral-50),var(--alpha-1000));pointer-events:none;background-color:transparent}.date-inner:hover:not(.date-inner__selected){background-color:rgba(var(--color_primary-50),var(--alpha-1000));color:rgba(var(--color_neutral-1000),var(--alpha-1000))}.year{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;cursor:pointer;border:none;background:none;width:20%;height:24px;font-size:3rem;margin:3px 0;color:rgba(var(--color_neutral-1000),var(--alpha-1000));line-height:4rem;-webkit-user-select:none;user-select:none;border-radius:24px;z-index:2;min-width:auto;outline-offset:unset;padding:0;transition-duration:var(--transition-duration_common);transition-timing-function:var(--transition-timing-function_common);transition-property:background,color;font-family:NotoSans,sans-serif;font-weight:400;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap}.year.current{background-color:rgba(var(--color_primary-50),var(--alpha-1000));color:rgba(var(--color_neutral-1000),var(--alpha-1000))}.year:hover{background-color:rgba(var(--color_primary-500),var(--alpha-1000));color:rgba(var(--color_neutral-1),var(--alpha-1000))}.month{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;cursor:pointer;border:none;background:none;width:64px;height:24px;font-size:3rem;margin:3px 0;color:rgba(var(--color_neutral-1000),var(--alpha-1000));line-height:4rem;-webkit-user-select:none;user-select:none;border-radius:24px;z-index:2;transition-duration:var(--transition-duration_common);transition-timing-function:var(--transition-timing-function_common);transition-property:background,color;font-family:NotoSans,sans-serif;font-weight:400;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap}.month:hover{background-color:rgba(var(--color_primary-500),var(--alpha-1000));color:rgba(var(--color_neutral-1),var(--alpha-1000))}.arrow-button{all:unset;height:5rem;background:none;outline:none;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0;font-weight:600;font-size:4rem;color:rgba(var(--color_neutral-50),var(--alpha-1000));cursor:pointer;display:flex;align-items:center;font-family:NotoSans,sans-serif;font-weight:400}.arrow-button.not-showing{visibility:hidden;pointer-events:none}:host{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;height:178px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DatePickerYearsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'pupa-date-picker-years', encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"year\" *ngFor=\"let year of years$ | async\" [class.current]=\"year === currentYear\" (click)=\"selectYear(year)\">\n  {{ year }}\n</div>\n", styles: [".date-picker{all:unset;box-shadow:0 2rem 8rem #0000001a;border-radius:2rem;background:rgba(var(--color_neutral-1),var(--alpha-1000));display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;flex-wrap:nowrap}.date-picker__header{height:36px;width:100%;box-sizing:border-box;padding:0 4rem;display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:nowrap}.date-picker__week-days{height:6.25rem;width:100%;padding:0 4rem;margin:0 0 6px;box-sizing:border-box;background:rgba(var(--color_primary-50),var(--alpha-1000));display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:nowrap}.date-picker__wrapper{width:100%;padding:0 4rem 2rem;box-sizing:border-box;overflow:hidden;display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap}.date-picker__row{display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;flex-wrap:nowrap}.title{all:unset;color:rgba(var(--color_neutral-500),var(--alpha-1000));line-height:1.43;font-weight:400;font-style:normal;font-stretch:normal;-webkit-user-select:none;user-select:none;display:flex;font-size:14px;line-height:16px}.title__month:not(.disable-hover),.title__year:not(.disable-hover){transition:color .2s ease}.title__month:not(.disable-hover):hover,.title__year:not(.disable-hover):hover{color:rgba(var(--color_primary-500),var(--alpha-1000));cursor:pointer}.title.selected{color:rgba(var(--color_primary-500),var(--alpha-1000));cursor:default}.week-day{all:unset;color:rgba(var(--color_neutral-200),var(--alpha-1000));width:14.2857142857%;font-size:3rem;-webkit-user-select:none;user-select:none;font-family:NotoSans,sans-serif;font-weight:400;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap}.date-wrapper{position:relative;cursor:pointer;background-color:transparent;width:14.2857142857%;height:24px;margin-bottom:6px;padding:0;-webkit-user-select:none;user-select:none;font-family:NotoSans,sans-serif;font-weight:400;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap}.date-wrapper__range{background-color:rgba(var(--color_primary-50),var(--alpha-1000))}.date-wrapper:nth-child(7n){border-top-right-radius:24px;border-bottom-right-radius:24px}.date-wrapper:nth-child(7n) .date__range-start:before{display:none}.date-wrapper:nth-child(7n+1){border-top-left-radius:24px;border-bottom-left-radius:24px}.date-wrapper:nth-child(7n+1) .date__range-end:before{display:none}.date-wrapper__first.date-wrapper__range{border-bottom-left-radius:24px;border-top-left-radius:24px}.date-wrapper__last.date-wrapper__range{border-bottom-right-radius:24px;border-top-right-radius:24px}.date-wrapper__disabled{pointer-events:none}.date-wrapper__disabled .date__range-start:before,.date-wrapper__disabled .date__range-end:before{display:none}.date{position:relative;width:24px;height:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap}.date__range-start:before{position:absolute;content:\"\";top:0;left:0;width:200%;height:100%;background-color:rgba(var(--color_primary-50),var(--alpha-1000));border-bottom-left-radius:24px;border-top-left-radius:24px;z-index:0}.date__range-end:before{position:absolute;content:\"\";top:0;right:0;width:200%;height:100%;background-color:rgba(var(--color_primary-50),var(--alpha-1000));border-bottom-right-radius:24px;border-top-right-radius:24px;z-index:0}.date-inner{font-size:3rem;color:rgba(var(--color_neutral-1000),var(--alpha-1000));line-height:4rem;font-weight:400;position:relative;width:100%;height:100%;border-radius:100%;transition-duration:var(--transition-duration_common);transition-timing-function:var(--transition-timing-function_common);transition-property:color,background-color;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap;z-index:2}.date-inner__selected{background-color:rgba(var(--color_primary-500),var(--alpha-1000));color:rgba(var(--color_neutral-1),var(--alpha-1000))}.date-inner__disabled{color:rgba(var(--color_neutral-50),var(--alpha-1000));pointer-events:none;background-color:transparent}.date-inner:hover:not(.date-inner__selected){background-color:rgba(var(--color_primary-50),var(--alpha-1000));color:rgba(var(--color_neutral-1000),var(--alpha-1000))}.year{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;cursor:pointer;border:none;background:none;width:20%;height:24px;font-size:3rem;margin:3px 0;color:rgba(var(--color_neutral-1000),var(--alpha-1000));line-height:4rem;-webkit-user-select:none;user-select:none;border-radius:24px;z-index:2;min-width:auto;outline-offset:unset;padding:0;transition-duration:var(--transition-duration_common);transition-timing-function:var(--transition-timing-function_common);transition-property:background,color;font-family:NotoSans,sans-serif;font-weight:400;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap}.year.current{background-color:rgba(var(--color_primary-50),var(--alpha-1000));color:rgba(var(--color_neutral-1000),var(--alpha-1000))}.year:hover{background-color:rgba(var(--color_primary-500),var(--alpha-1000));color:rgba(var(--color_neutral-1),var(--alpha-1000))}.month{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;cursor:pointer;border:none;background:none;width:64px;height:24px;font-size:3rem;margin:3px 0;color:rgba(var(--color_neutral-1000),var(--alpha-1000));line-height:4rem;-webkit-user-select:none;user-select:none;border-radius:24px;z-index:2;transition-duration:var(--transition-duration_common);transition-timing-function:var(--transition-timing-function_common);transition-property:background,color;font-family:NotoSans,sans-serif;font-weight:400;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap}.month:hover{background-color:rgba(var(--color_primary-500),var(--alpha-1000));color:rgba(var(--color_neutral-1),var(--alpha-1000))}.arrow-button{all:unset;height:5rem;background:none;outline:none;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0;font-weight:600;font-size:4rem;color:rgba(var(--color_neutral-50),var(--alpha-1000));cursor:pointer;display:flex;align-items:center;font-family:NotoSans,sans-serif;font-weight:400}.arrow-button.not-showing{visibility:hidden;pointer-events:none}:host{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;height:178px}\n"] }]
        }], propDecorators: { years: [{
                type: Input
            }], selectedYear: [{
                type: Output
            }] } });

const DEFAULT_MONTH = dateClearTime(new Date()).getMonth();
const MONTH_COUNT = 12;
class DatePickerMonthsComponent {
    constructor() {
        this.currentMonth = DEFAULT_MONTH;
        this.months = Array(MONTH_COUNT)
            .fill(new Date())
            .map((date, index) => {
            date.setMonth(index, 1);
            return dateClearTime(new Date(date));
        });
        this.selectedMonth = new EventEmitter();
    }
    selectMonth(month) {
        this.selectedMonth.emit(month);
    }
}
DatePickerMonthsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DatePickerMonthsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
DatePickerMonthsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DatePickerMonthsComponent, selector: "pupa-date-picker-months", outputs: { selectedMonth: "selectedMonth" }, ngImport: i0, template: "<div class=\"month\" *ngFor=\"let month of months; let index = index\" (click)=\"selectMonth(index)\">\n  {{ month | date : 'LLLL' | titlecase }}\n</div>\n", styles: [".date-picker{all:unset;box-shadow:0 2rem 8rem #0000001a;border-radius:2rem;background:rgba(var(--color_neutral-1),var(--alpha-1000));display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;flex-wrap:nowrap}.date-picker__header{height:36px;width:100%;box-sizing:border-box;padding:0 4rem;display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:nowrap}.date-picker__week-days{height:6.25rem;width:100%;padding:0 4rem;margin:0 0 6px;box-sizing:border-box;background:rgba(var(--color_primary-50),var(--alpha-1000));display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:nowrap}.date-picker__wrapper{width:100%;padding:0 4rem 2rem;box-sizing:border-box;overflow:hidden;display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap}.date-picker__row{display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;flex-wrap:nowrap}.title{all:unset;color:rgba(var(--color_neutral-500),var(--alpha-1000));line-height:1.43;font-weight:400;font-style:normal;font-stretch:normal;-webkit-user-select:none;user-select:none;display:flex;font-size:14px;line-height:16px}.title__month:not(.disable-hover),.title__year:not(.disable-hover){transition:color .2s ease}.title__month:not(.disable-hover):hover,.title__year:not(.disable-hover):hover{color:rgba(var(--color_primary-500),var(--alpha-1000));cursor:pointer}.title.selected{color:rgba(var(--color_primary-500),var(--alpha-1000));cursor:default}.week-day{all:unset;color:rgba(var(--color_neutral-200),var(--alpha-1000));width:14.2857142857%;font-size:3rem;-webkit-user-select:none;user-select:none;font-family:NotoSans,sans-serif;font-weight:400;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap}.date-wrapper{position:relative;cursor:pointer;background-color:transparent;width:14.2857142857%;height:24px;margin-bottom:6px;padding:0;-webkit-user-select:none;user-select:none;font-family:NotoSans,sans-serif;font-weight:400;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap}.date-wrapper__range{background-color:rgba(var(--color_primary-50),var(--alpha-1000))}.date-wrapper:nth-child(7n){border-top-right-radius:24px;border-bottom-right-radius:24px}.date-wrapper:nth-child(7n) .date__range-start:before{display:none}.date-wrapper:nth-child(7n+1){border-top-left-radius:24px;border-bottom-left-radius:24px}.date-wrapper:nth-child(7n+1) .date__range-end:before{display:none}.date-wrapper__first.date-wrapper__range{border-bottom-left-radius:24px;border-top-left-radius:24px}.date-wrapper__last.date-wrapper__range{border-bottom-right-radius:24px;border-top-right-radius:24px}.date-wrapper__disabled{pointer-events:none}.date-wrapper__disabled .date__range-start:before,.date-wrapper__disabled .date__range-end:before{display:none}.date{position:relative;width:24px;height:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap}.date__range-start:before{position:absolute;content:\"\";top:0;left:0;width:200%;height:100%;background-color:rgba(var(--color_primary-50),var(--alpha-1000));border-bottom-left-radius:24px;border-top-left-radius:24px;z-index:0}.date__range-end:before{position:absolute;content:\"\";top:0;right:0;width:200%;height:100%;background-color:rgba(var(--color_primary-50),var(--alpha-1000));border-bottom-right-radius:24px;border-top-right-radius:24px;z-index:0}.date-inner{font-size:3rem;color:rgba(var(--color_neutral-1000),var(--alpha-1000));line-height:4rem;font-weight:400;position:relative;width:100%;height:100%;border-radius:100%;transition-duration:var(--transition-duration_common);transition-timing-function:var(--transition-timing-function_common);transition-property:color,background-color;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap;z-index:2}.date-inner__selected{background-color:rgba(var(--color_primary-500),var(--alpha-1000));color:rgba(var(--color_neutral-1),var(--alpha-1000))}.date-inner__disabled{color:rgba(var(--color_neutral-50),var(--alpha-1000));pointer-events:none;background-color:transparent}.date-inner:hover:not(.date-inner__selected){background-color:rgba(var(--color_primary-50),var(--alpha-1000));color:rgba(var(--color_neutral-1000),var(--alpha-1000))}.year{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;cursor:pointer;border:none;background:none;width:20%;height:24px;font-size:3rem;margin:3px 0;color:rgba(var(--color_neutral-1000),var(--alpha-1000));line-height:4rem;-webkit-user-select:none;user-select:none;border-radius:24px;z-index:2;min-width:auto;outline-offset:unset;padding:0;transition-duration:var(--transition-duration_common);transition-timing-function:var(--transition-timing-function_common);transition-property:background,color;font-family:NotoSans,sans-serif;font-weight:400;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap}.year.current{background-color:rgba(var(--color_primary-50),var(--alpha-1000));color:rgba(var(--color_neutral-1000),var(--alpha-1000))}.year:hover{background-color:rgba(var(--color_primary-500),var(--alpha-1000));color:rgba(var(--color_neutral-1),var(--alpha-1000))}.month{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;cursor:pointer;border:none;background:none;width:64px;height:24px;font-size:3rem;margin:3px 0;color:rgba(var(--color_neutral-1000),var(--alpha-1000));line-height:4rem;-webkit-user-select:none;user-select:none;border-radius:24px;z-index:2;transition-duration:var(--transition-duration_common);transition-timing-function:var(--transition-timing-function_common);transition-property:background,color;font-family:NotoSans,sans-serif;font-weight:400;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap}.month:hover{background-color:rgba(var(--color_primary-500),var(--alpha-1000));color:rgba(var(--color_neutral-1),var(--alpha-1000))}.arrow-button{all:unset;height:5rem;background:none;outline:none;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0;font-weight:600;font-size:4rem;color:rgba(var(--color_neutral-50),var(--alpha-1000));cursor:pointer;display:flex;align-items:center;font-family:NotoSans,sans-serif;font-weight:400}.arrow-button.not-showing{visibility:hidden;pointer-events:none}:host{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;height:178px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DatePickerMonthsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'pupa-date-picker-months', encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"month\" *ngFor=\"let month of months; let index = index\" (click)=\"selectMonth(index)\">\n  {{ month | date : 'LLLL' | titlecase }}\n</div>\n", styles: [".date-picker{all:unset;box-shadow:0 2rem 8rem #0000001a;border-radius:2rem;background:rgba(var(--color_neutral-1),var(--alpha-1000));display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;flex-wrap:nowrap}.date-picker__header{height:36px;width:100%;box-sizing:border-box;padding:0 4rem;display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:nowrap}.date-picker__week-days{height:6.25rem;width:100%;padding:0 4rem;margin:0 0 6px;box-sizing:border-box;background:rgba(var(--color_primary-50),var(--alpha-1000));display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:nowrap}.date-picker__wrapper{width:100%;padding:0 4rem 2rem;box-sizing:border-box;overflow:hidden;display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap}.date-picker__row{display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;flex-wrap:nowrap}.title{all:unset;color:rgba(var(--color_neutral-500),var(--alpha-1000));line-height:1.43;font-weight:400;font-style:normal;font-stretch:normal;-webkit-user-select:none;user-select:none;display:flex;font-size:14px;line-height:16px}.title__month:not(.disable-hover),.title__year:not(.disable-hover){transition:color .2s ease}.title__month:not(.disable-hover):hover,.title__year:not(.disable-hover):hover{color:rgba(var(--color_primary-500),var(--alpha-1000));cursor:pointer}.title.selected{color:rgba(var(--color_primary-500),var(--alpha-1000));cursor:default}.week-day{all:unset;color:rgba(var(--color_neutral-200),var(--alpha-1000));width:14.2857142857%;font-size:3rem;-webkit-user-select:none;user-select:none;font-family:NotoSans,sans-serif;font-weight:400;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap}.date-wrapper{position:relative;cursor:pointer;background-color:transparent;width:14.2857142857%;height:24px;margin-bottom:6px;padding:0;-webkit-user-select:none;user-select:none;font-family:NotoSans,sans-serif;font-weight:400;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap}.date-wrapper__range{background-color:rgba(var(--color_primary-50),var(--alpha-1000))}.date-wrapper:nth-child(7n){border-top-right-radius:24px;border-bottom-right-radius:24px}.date-wrapper:nth-child(7n) .date__range-start:before{display:none}.date-wrapper:nth-child(7n+1){border-top-left-radius:24px;border-bottom-left-radius:24px}.date-wrapper:nth-child(7n+1) .date__range-end:before{display:none}.date-wrapper__first.date-wrapper__range{border-bottom-left-radius:24px;border-top-left-radius:24px}.date-wrapper__last.date-wrapper__range{border-bottom-right-radius:24px;border-top-right-radius:24px}.date-wrapper__disabled{pointer-events:none}.date-wrapper__disabled .date__range-start:before,.date-wrapper__disabled .date__range-end:before{display:none}.date{position:relative;width:24px;height:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap}.date__range-start:before{position:absolute;content:\"\";top:0;left:0;width:200%;height:100%;background-color:rgba(var(--color_primary-50),var(--alpha-1000));border-bottom-left-radius:24px;border-top-left-radius:24px;z-index:0}.date__range-end:before{position:absolute;content:\"\";top:0;right:0;width:200%;height:100%;background-color:rgba(var(--color_primary-50),var(--alpha-1000));border-bottom-right-radius:24px;border-top-right-radius:24px;z-index:0}.date-inner{font-size:3rem;color:rgba(var(--color_neutral-1000),var(--alpha-1000));line-height:4rem;font-weight:400;position:relative;width:100%;height:100%;border-radius:100%;transition-duration:var(--transition-duration_common);transition-timing-function:var(--transition-timing-function_common);transition-property:color,background-color;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap;z-index:2}.date-inner__selected{background-color:rgba(var(--color_primary-500),var(--alpha-1000));color:rgba(var(--color_neutral-1),var(--alpha-1000))}.date-inner__disabled{color:rgba(var(--color_neutral-50),var(--alpha-1000));pointer-events:none;background-color:transparent}.date-inner:hover:not(.date-inner__selected){background-color:rgba(var(--color_primary-50),var(--alpha-1000));color:rgba(var(--color_neutral-1000),var(--alpha-1000))}.year{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;cursor:pointer;border:none;background:none;width:20%;height:24px;font-size:3rem;margin:3px 0;color:rgba(var(--color_neutral-1000),var(--alpha-1000));line-height:4rem;-webkit-user-select:none;user-select:none;border-radius:24px;z-index:2;min-width:auto;outline-offset:unset;padding:0;transition-duration:var(--transition-duration_common);transition-timing-function:var(--transition-timing-function_common);transition-property:background,color;font-family:NotoSans,sans-serif;font-weight:400;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap}.year.current{background-color:rgba(var(--color_primary-50),var(--alpha-1000));color:rgba(var(--color_neutral-1000),var(--alpha-1000))}.year:hover{background-color:rgba(var(--color_primary-500),var(--alpha-1000));color:rgba(var(--color_neutral-1),var(--alpha-1000))}.month{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;cursor:pointer;border:none;background:none;width:64px;height:24px;font-size:3rem;margin:3px 0;color:rgba(var(--color_neutral-1000),var(--alpha-1000));line-height:4rem;-webkit-user-select:none;user-select:none;border-radius:24px;z-index:2;transition-duration:var(--transition-duration_common);transition-timing-function:var(--transition-timing-function_common);transition-property:background,color;font-family:NotoSans,sans-serif;font-weight:400;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap}.month:hover{background-color:rgba(var(--color_primary-500),var(--alpha-1000));color:rgba(var(--color_neutral-1),var(--alpha-1000))}.arrow-button{all:unset;height:5rem;background:none;outline:none;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0;font-weight:600;font-size:4rem;color:rgba(var(--color_neutral-50),var(--alpha-1000));cursor:pointer;display:flex;align-items:center;font-family:NotoSans,sans-serif;font-weight:400}.arrow-button.not-showing{visibility:hidden;pointer-events:none}:host{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;height:178px}\n"] }]
        }], propDecorators: { selectedMonth: [{
                type: Output
            }] } });

const DEFAULT_CURRENT_DATE_WITH_CLEARED_TIME$2 = dateClearTime(new Date());
const YEARS_IN_SECTION = 30;
const YEARS_START_OFFSET = 19;
const MIN_DAYS_MONTH = 28;
var DatePickerState;
(function (DatePickerState) {
    DatePickerState[DatePickerState["Years"] = 0] = "Years";
    DatePickerState[DatePickerState["Months"] = 1] = "Months";
    DatePickerState[DatePickerState["Days"] = 2] = "Days";
})(DatePickerState || (DatePickerState = {}));
class DatePickerSimpleComponent {
    constructor(datePickerStateService) {
        this.datePickerStateService = datePickerStateService;
        this.baseDate = DEFAULT_CURRENT_DATE_WITH_CLEARED_TIME$2;
        this.baseDate$ = new BehaviorSubject(DEFAULT_CURRENT_DATE_WITH_CLEARED_TIME$2);
        this.isLeftDoubleDatePicker = false;
        this.isLeftDoubleDatePicker$ = new BehaviorSubject(false);
        this.isRightDoubleDatePicker = false;
        this.isRightDoubleDatePicker$ = new BehaviorSubject(false);
        this.needAddedWeek = false;
        this.needAddedWeek$ = new BehaviorSubject(false);
        this.nextMonthClicked = new EventEmitter();
        this.previousMonthClicked = new EventEmitter();
        this.weekDayNames = this.datePickerStateService.weekDayNames;
        this.datePickerPreviewMode = DatePickerState;
        this.datePickerPreviewMode$ = new BehaviorSubject(DatePickerState.Days);
        this.previewMode$ = this.datePickerStateService.previewMode$;
        this.selectedDate$ = this.datePickerStateService.selectedDate$;
        this.selectedRange$ = this.datePickerStateService.selectedRange$;
        this.isSelectionModeDate$ = this.datePickerStateService.isSelectionModeDate$;
        this.isDatePickerDoubleModeEnabled$ = combineLatest([
            this.isLeftDoubleDatePicker$,
            this.isRightDoubleDatePicker$,
        ]).pipe(map(([isLeftDoubleDatePicker, isRightDoubleDatePicker]) => [isLeftDoubleDatePicker, isRightDoubleDatePicker].includes(true)));
        this.hoveredDate$ = this.datePickerStateService.hoveredDate$;
        this.hoveredRange$ = this.datePickerStateService.hoveredRange$;
        this.isBackDating$ = this.datePickerStateService.isBackDating$;
        this.availableEndDate$ = this.datePickerStateService.availableEndDate$;
        this.primarySectionStartDate$ = this.baseDate$.pipe(distinctUntilChanged(), filter((baseDate) => isDate(baseDate)), map((baseDate) => {
            const baseMonthDay = baseDate.getDate();
            const baseDateMs = baseDate.valueOf();
            return baseDateMs - (baseMonthDay - 1) * dayInMs;
        }), map((sectionStartDateMs) => dateClearTime(new Date(sectionStartDateMs))));
        this.baseYear$ = this.primarySectionStartDate$.pipe(distinctUntilChanged(), map((primarySectionStartDate) => primarySectionStartDate.getFullYear()));
        this.primarySectionEndDate$ = this.baseDate$.pipe(distinctUntilChanged(), filter((baseDate) => isDate(baseDate)), map((baseDate) => {
            const baseMonthDay = baseDate.getDate();
            const baseDateMs = baseDate.valueOf();
            const daysInMonth = getDaysInMonth(baseDate);
            return Object.is(baseMonthDay, daysInMonth) ? baseDateMs : baseDateMs + (daysInMonth - baseMonthDay) * dayInMs;
        }), map((sectionStartDateMs) => dateClearTime(new Date(sectionStartDateMs))));
        this.primarySectionDates$ = this.primarySectionStartDate$.pipe(distinctUntilChanged(), map((sectionStartDate) => {
            const daysInMonth = getDaysInMonth(sectionStartDate);
            const sectionStartDateMs = sectionStartDate.valueOf();
            return new Array(daysInMonth)
                .fill(sectionStartDateMs)
                .map((startDateMs, dayInMonth) => startDateMs + dayInMonth * dayInMs);
        }), map((sectionDatesMs) => sectionDatesMs.map((dateMs) => dateClearTime(new Date(dateMs)))));
        this.primarySectionLeftOffsetDates$ = this.primarySectionStartDate$.pipe(distinctUntilChanged(), map((sectionStartDate) => {
            const sectionStartDateMs = sectionStartDate.valueOf();
            const lastDayOfPreviousMonthMs = sectionStartDateMs - dayInMs;
            return dateClearTime(new Date(lastDayOfPreviousMonthMs));
        }), map((previousMonthLastDate) => {
            const previousMonthLastDateDayOfWeek = previousMonthLastDate.getDay();
            if (previousMonthLastDateDayOfWeek === DayOfWeek.Sunday) {
                return [];
            }
            const previousMonthLastDateMs = previousMonthLastDate.valueOf();
            const visibleDaysCount = previousMonthLastDateDayOfWeek;
            return new Array(visibleDaysCount)
                .fill(previousMonthLastDateMs)
                .map((lastMonthDateMs, multiplier) => lastMonthDateMs - multiplier * dayInMs);
        }), map((previousMonthDatesMs) => [...previousMonthDatesMs].reverse()), map((reversedPreviousMonthDatesMs) => reversedPreviousMonthDatesMs.map((dateMs) => dateClearTime(new Date(dateMs)))));
        this.primarySectionRightOffsetDates$ = this.needAddedWeek$.pipe(switchMap((needAddedWeek) => this.primarySectionEndDate$.pipe(distinctUntilChanged(), map((sectionEndDate) => {
            const currentSectionDate = new Date(sectionEndDate);
            const month = currentSectionDate.getMonth() + 1;
            currentSectionDate.setDate(1);
            currentSectionDate.setMonth(month);
            return [sectionEndDate, dateClearTime(new Date(currentSectionDate))];
        }), withLatestFrom(this.previewMode$), map(([[currentSectionEndDate, nextMonthFirstDate], previewMode]) => {