@taiga-ui/addon-mobile 4.66.0 → 5.0.0-rc.0

package/fesm2022/taiga-ui-addon-mobile-components-mobile-calendar.mjs

@@ -1,28 +1,41 @@
-import { VIRTUAL_SCROLL_STRATEGY, CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
-import { DOCUMENT, AsyncPipe, NgForOf, NgIf } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, Optional, inject, DestroyRef, NgZone, EventEmitter, Component, ChangeDetectionStrategy, ViewChild, Input, Output } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { InjectionToken, Optional, Self, inject, viewChild, DestroyRef, NgZone, computed, input, output, model, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgControl } from '@angular/forms';
+import { tuiControlValue, tuiWatch, tuiZonefreeScheduler, tuiZonefree, tuiTypedFromEvent } from '@taiga-ui/cdk/observables';
+import { of, map, Subject, distinctUntilChanged, EMPTY, timer, identity, delay, take, windowToggle, mergeMap, filter, switchMap, race, debounceTime, takeUntil } from 'rxjs';
+import { VIRTUAL_SCROLL_STRATEGY, CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import { DOCUMENT, AsyncPipe } from '@angular/common';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { WA_IS_IOS, WA_IS_E2E } from '@ng-web-apis/platform';
 import { TuiMobileCalendarSheet } from '@taiga-ui/addon-mobile/components/mobile-calendar-sheet';
-import { TuiRipple, TuiTouchable } from '@taiga-ui/addon-mobile/directives';
+import { TuiRipple } from '@taiga-ui/addon-mobile/directives/ripple';
+import { TuiTouchable } from '@taiga-ui/addon-mobile/directives/touchable';
 import { TUI_FALSE_HANDLER } from '@taiga-ui/cdk/constants';
-import { MONTHS_IN_YEAR, TuiDay, TuiMonth, TUI_FIRST_DAY, TUI_LAST_DAY, TuiDayRange } from '@taiga-ui/cdk/date-time';
-import { tuiWatch, tuiZonefreeScheduler, tuiZonefree, tuiTypedFromEvent } from '@taiga-ui/cdk/observables';
+import { MONTHS_IN_YEAR, TuiDay, TuiDayRange, TuiMonth, TUI_FIRST_DAY, TUI_LAST_DAY } from '@taiga-ui/cdk/date-time';
 import { TuiMapperPipe } from '@taiga-ui/cdk/pipes/mapper';
-import { TUI_IS_IOS, TUI_IS_E2E } from '@taiga-ui/cdk/tokens';
 import { TuiButton } from '@taiga-ui/core/components/button';
-import { TUI_CALENDAR_SHEET_OPTIONS } from '@taiga-ui/core/components/calendar';
+import { TUI_CALENDAR_SHEET_OPTIONS, TuiOrderWeekDaysPipe } from '@taiga-ui/core/components/calendar';
 import { TuiLink } from '@taiga-ui/core/components/link';
-import { TuiMonthPipe } from '@taiga-ui/core/pipes/month';
-import { TuiOrderWeekDaysPipe } from '@taiga-ui/core/pipes/order-week-days';
-import { TUI_ANIMATIONS_SPEED, TUI_COMMON_ICONS, TUI_CLOSE_WORD, TUI_SHORT_WEEK_DAYS } from '@taiga-ui/core/tokens';
+import { TUI_ANIMATIONS_SPEED, TUI_COMMON_ICONS, TUI_CLOSE_WORD, TUI_MONTHS, TUI_SHORT_WEEK_DAYS } from '@taiga-ui/core/tokens';
 import { tuiGetDuration } from '@taiga-ui/core/utils/miscellaneous';
-import { TUI_CALENDAR_DATE_STREAM, TUI_CANCEL_WORD, TUI_DONE_WORD, TUI_CHOOSE_DAY_OR_RANGE_TEXTS } from '@taiga-ui/kit/tokens';
-import { tuiToggleDay } from '@taiga-ui/kit/utils';
-import { Subject, distinctUntilChanged, takeUntil, EMPTY, BehaviorSubject, skip, map, timer, identity, delay, take, windowToggle, mergeMap, filter, switchMap, race, debounceTime } from 'rxjs';
-import { TuiScrollService } from '@taiga-ui/cdk/services';
-import { __decorate } from 'tslib';
-import { tuiPure } from '@taiga-ui/cdk/utils/miscellaneous';
+import { TUI_CANCEL_WORD, TUI_DONE_WORD, TUI_CHOOSE_DAY_OR_RANGE_TEXTS } from '@taiga-ui/kit/tokens';
+
+const TUI_CALENDAR_DATE_STREAM = new InjectionToken(ngDevMode ? 'TUI_CALENDAR_DATE_STREAM' : '');
+function tuiDateStreamWithTransformer(transformer) {
+    return {
+        provide: TUI_CALENDAR_DATE_STREAM,
+        deps: [
+            [new Optional(), new Self(), NgControl],
+            [new Optional(), transformer],
+        ],
+        useFactory: tuiControlValueFactory,
+    };
+}
+function tuiControlValueFactory(control, transformer) {
+    return control
+        ? tuiControlValue(control).pipe(map((value) => transformer ? transformer?.fromControlValue(value) : value))
+        : of(null);
+}
 
 function getCycle(options) {
     return Array.from({ length: options.yearCycle }, (_, i) => Array.from({ length: MONTHS_IN_YEAR }, (_, month) => options.label +
@@ -70,20 +83,17 @@ function reduceCycle(cycle, lastYear = 28, lastMonth = 12) {
         : total, 0);
 }
 /**
- * This scroll strategy is hard wired with styles for iOS and Android.
+ * This scroll strategy is hard-wired with styles for iOS and Android.
  * It is dependent on month height on those platforms and is designed to
  * work for {@link TuiMobileCalendar} with years 1906 to 2102
  */
 class TuiMobileCalendarStrategy {
-    constructor(isIOS, scrollService) {
-        this.isIOS = isIOS;
-        this.scrollService = scrollService;
+    constructor() {
+        this.isIOS = inject(WA_IS_IOS);
+        this.destroy$ = new Subject();
         this.index$ = new Subject();
         this.viewport = null;
-        this.destroy$ = new Subject();
-    }
-    get scrolledIndexChange() {
-        return this.index$.pipe(distinctUntilChanged());
+        this.scrolledIndexChange = this.index$.pipe(distinctUntilChanged());
     }
     attach(viewport) {
         const cycle = this.isIOS ? IOS_CYCLE_HEIGHT : ANDROID_CYCLE_HEIGHT;
@@ -107,18 +117,7 @@ class TuiMobileCalendarStrategy {
     onContentRendered() { }
     onRenderedOffsetChanged() { }
     scrollToIndex(index, behavior) {
-        if (!this.viewport) {
-            return;
-        }
-        const scrollTop = this.getOffsetForIndex(index);
-        if (behavior !== 'smooth') {
-            this.viewport.scrollToOffset(scrollTop, behavior);
-            return;
-        }
-        this.scrollService
-            .scroll$(this.viewport.elementRef.nativeElement, scrollTop)
-            .pipe(takeUntil(this.destroy$))
-            .subscribe();
+        this.viewport?.scrollToOffset(this.getOffsetForIndex(index), behavior);
     }
     getOffsetForIndex(index) {
         const month = index % MONTHS_IN_YEAR;
@@ -175,19 +174,14 @@ class TuiMobileCalendarStrategy {
         this.index$.next(firstVisibleIndex);
     }
 }
-__decorate([
-    tuiPure
-], TuiMobileCalendarStrategy.prototype, "scrolledIndexChange", null);
 
 /**
  * Stream for updating value
  */
 const TUI_VALUE_STREAM = new InjectionToken(ngDevMode ? 'TUI_VALUE_STREAM' : '');
 const TUI_MOBILE_CALENDAR_PROVIDERS = [
-    TuiScrollService,
     {
         provide: VIRTUAL_SCROLL_STRATEGY,
-        deps: [TUI_IS_IOS, TuiScrollService],
         useClass: TuiMobileCalendarStrategy,
     },
     {
@@ -199,7 +193,8 @@ const TUI_MOBILE_CALENDAR_PROVIDERS = [
 
 class TuiMobileCalendar {
     constructor() {
-        this.value$ = new BehaviorSubject(null);
+        this.yearsScroll = viewChild('yearsScroll');
+        this.monthsScroll = viewChild('monthsScroll');
         this.today = TuiDay.currentLocal();
         this.activeYear = 0;
         this.activeMonth = 0;
@@ -207,15 +202,42 @@ class TuiMobileCalendar {
         this.doc = inject(DOCUMENT);
         this.speed = inject(TUI_ANIMATIONS_SPEED);
         this.ngZone = inject(NgZone);
+        this.getYearsViewportSize = computed(() => this.yearsScroll()?.getViewportSize() || 0);
+        this.initialYear = computed((value = this.value()) => {
+            if (!value) {
+                return this.today.year;
+            }
+            if (value instanceof TuiDay) {
+                return value.year;
+            }
+            if (!(value instanceof TuiDayRange)) {
+                return value?.[0]?.year ?? this.today.year;
+            }
+            return value.to.year;
+        });
+        this.initialMonth = computed((value = this.value()) => {
+            if (!value) {
+                return this.today.month + (this.today.year - STARTING_YEAR) * MONTHS_IN_YEAR;
+            }
+            if (value instanceof TuiDay) {
+                return value.month + (value.year - STARTING_YEAR) * MONTHS_IN_YEAR;
+            }
+            if (!(value instanceof TuiDayRange)) {
+                return ((value?.[0]?.month ?? this.today.month) +
+                    ((value?.[0]?.year ?? this.today.year) - STARTING_YEAR) * MONTHS_IN_YEAR);
+            }
+            return value.to.month + (value.to.year - STARTING_YEAR) * MONTHS_IN_YEAR;
+        });
         this.initialized = false;
-        this.isIOS = inject(TUI_IS_IOS);
-        this.isE2E = inject(TUI_IS_E2E);
+        this.isIOS = inject(WA_IS_IOS);
+        this.isE2E = inject(WA_IS_E2E);
         this.icons = inject(TUI_COMMON_ICONS);
-        this.closeWord$ = inject(TUI_CLOSE_WORD);
-        this.cancelWord$ = inject(TUI_CANCEL_WORD);
-        this.doneWord$ = inject(TUI_DONE_WORD);
-        this.unorderedWeekDays$ = inject(TUI_SHORT_WEEK_DAYS);
-        this.chooseDayOrRangeTexts$ = inject(TUI_CHOOSE_DAY_OR_RANGE_TEXTS, {
+        this.closeWord = inject(TUI_CLOSE_WORD);
+        this.cancelWord = inject(TUI_CANCEL_WORD);
+        this.doneWord = inject(TUI_DONE_WORD);
+        this.monthNames = inject(TUI_MONTHS);
+        this.unorderedWeekDays$ = toObservable(inject(TUI_SHORT_WEEK_DAYS));
+        this.chooseDayOrRangeTexts = inject(TUI_CHOOSE_DAY_OR_RANGE_TEXTS, {
             optional: true,
         });
         this.years = Array.from({ length: RANGE }, (_, i) => i + STARTING_YEAR);
@@ -227,34 +249,26 @@ class TuiMobileCalendar {
          * ```
          * TODO(v5): delete it
          */
-        this.single = !inject(TUI_CALENDAR_SHEET_OPTIONS).rangeMode;
-        this.multi = false;
-        this.min = TUI_FIRST_DAY;
-        this.max = TUI_LAST_DAY;
-        this.disabledItemHandler = TUI_FALSE_HANDLER;
-        this.cancel = new EventEmitter();
-        this.confirm = new EventEmitter();
-        this.valueChange = this.value$.pipe(skip(1), distinctUntilChanged((a, b) => a?.toString() === b?.toString()), map((x) => (!this.single && x instanceof TuiDay ? new TuiDayRange(x, x) : x)));
+        this.single = input(!inject(TUI_CALENDAR_SHEET_OPTIONS).rangeMode);
+        this.multi = input(false);
+        this.min = input(TUI_FIRST_DAY);
+        this.max = input(TUI_LAST_DAY);
+        this.disabledItemHandler = input(TUI_FALSE_HANDLER);
+        this.cancel = output();
+        this.confirm = output();
+        this.value = model(null);
         this.disabledItemHandlerMapper = (disabledItemHandler, min, max) => (item) => item.dayBefore(min) ||
             (max !== null && item.dayAfter(max)) ||
             disabledItemHandler(item);
         inject(TUI_VALUE_STREAM)
             .pipe(takeUntilDestroyed())
             .subscribe((value) => {
-            this.value = value;
+            this.value.set(value);
         });
     }
-    set value(value) {
-        if (value !== undefined) {
-            this.value$.next(value);
-        }
-    }
-    get value() {
-        return this.value$.value;
-    }
     ngAfterViewInit() {
-        this.activeYear = this.initialYear;
-        this.activeMonth = this.initialMonth;
+        this.activeYear = this.initialYear();
+        this.activeMonth = this.initialMonth();
         // Virtual scroll has not yet rendered items even in ngAfterViewInit
         this.waitScrolledChange();
     }
@@ -276,28 +290,30 @@ class TuiMobileCalendar {
         this.cancel.emit();
     }
     onConfirm() {
-        if (this.value) {
-            this.confirm.emit(this.value);
+        const value = this.value();
+        if (value) {
+            this.confirm.emit(value);
         }
         else {
             this.cancel.emit();
         }
     }
     onDayClick(day) {
-        if (this.single) {
-            this.value = day;
+        const value = this.value();
+        if (this.single()) {
+            this.value.set(day);
         }
-        else if (this.isMultiValue(this.value)) {
-            this.value = tuiToggleDay(this.value, day);
+        else if (this.isMultiValue(value)) {
+            this.value.set(toggleDay(value, day));
         }
-        else if (this.value instanceof TuiDay) {
-            this.value = TuiDayRange.sort(this.value, day);
+        else if (value instanceof TuiDay) {
+            this.value.set(TuiDayRange.sort(value, day));
         }
-        else if (this.value instanceof TuiDayRange) {
-            this.value = day;
+        else if (value instanceof TuiDayRange) {
+            this.value.set(day);
         }
-        else if (!this.value) {
-            this.value = day;
+        else if (!value) {
+            this.value.set(day);
         }
     }
     getState(index) {
@@ -322,49 +338,20 @@ class TuiMobileCalendar {
         this.activeYear = activeYear;
         this.scrollToActiveYear();
     }
-    get initialYear() {
-        if (!this.value) {
-            return this.today.year;
-        }
-        if (this.value instanceof TuiDay) {
-            return this.value.year;
-        }
-        if (!(this.value instanceof TuiDayRange)) {
-            return this.value?.[0]?.year ?? this.today.year;
-        }
-        return this.value.to.year;
-    }
-    get initialMonth() {
-        if (!this.value) {
-            return this.today.month + (this.today.year - STARTING_YEAR) * MONTHS_IN_YEAR;
-        }
-        if (this.value instanceof TuiDay) {
-            return this.value.month + (this.value.year - STARTING_YEAR) * MONTHS_IN_YEAR;
-        }
-        if (!(this.value instanceof TuiDayRange)) {
-            return ((this.value?.[0]?.month ?? this.today.month) +
-                ((this.value?.[0]?.year ?? this.today.year) - STARTING_YEAR) *
-                    MONTHS_IN_YEAR);
-        }
-        return (this.value.to.month + (this.value.to.year - STARTING_YEAR) * MONTHS_IN_YEAR);
-    }
     isMultiValue(day) {
-        return !(day instanceof TuiDay) && !(day instanceof TuiDayRange) && this.multi;
-    }
-    getYearsViewportSize() {
-        return this.yearsScrollRef?.getViewportSize() || 0;
+        return !(day instanceof TuiDay) && !(day instanceof TuiDayRange) && this.multi();
     }
     updateViewportDimension() {
-        this.yearsScrollRef?.checkViewportSize();
-        this.monthsScrollRef?.checkViewportSize();
+        this.yearsScroll()?.checkViewportSize();
+        this.monthsScroll()?.checkViewportSize();
     }
     lateInit() {
         return this.getYearsViewportSize() > 0 ? identity : delay(200);
     }
     waitScrolledChange() {
         this.updateViewportDimension();
-        this.monthsScrollRef?.scrolledIndexChange
-            .pipe(delay(tuiGetDuration(this.speed)), this.lateInit(), take(1), takeUntilDestroyed(this.destroyRef))
+        this.monthsScroll()
+            ?.scrolledIndexChange.pipe(delay(tuiGetDuration(this.speed)), this.lateInit(), take(1), takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
             this.initialized = true;
             this.updateViewportDimension();
@@ -375,21 +362,21 @@ class TuiMobileCalendar {
         });
     }
     initYearScroll() {
-        const { yearsScrollRef } = this;
-        if (!yearsScrollRef) {
+        const yearsScroll = this.yearsScroll();
+        if (!yearsScroll) {
             return;
         }
-        const touchstart$ = tuiTypedFromEvent(yearsScrollRef.elementRef.nativeElement, 'touchstart', { passive: true });
-        const touchend$ = tuiTypedFromEvent(yearsScrollRef.elementRef.nativeElement, 'touchend', { passive: true });
-        const click$ = tuiTypedFromEvent(yearsScrollRef.elementRef.nativeElement, 'click');
+        const touchstart$ = tuiTypedFromEvent(yearsScroll.elementRef.nativeElement, 'touchstart', { passive: true });
+        const touchend$ = tuiTypedFromEvent(yearsScroll.elementRef.nativeElement, 'touchend', { passive: true });
+        const click$ = tuiTypedFromEvent(yearsScroll.elementRef.nativeElement, 'click');
         // Refresh activeYear
-        yearsScrollRef
+        yearsScroll
             .elementScrolled()
             .pipe(
         // Ignore smooth scroll resulting from click on the exact year
         windowToggle(touchstart$, () => click$), mergeMap((x) => x), 
         // Delay is required to run months scroll in the next frame to prevent flicker
-        delay(0), map(() => Math.round(yearsScrollRef.measureScrollOffset() / this.yearWidth) +
+        delay(0), map(() => Math.round(yearsScroll.measureScrollOffset() / this.yearWidth) +
             Math.floor(YEARS_IN_ROW / 2) +
             STARTING_YEAR), filter((activeYear) => activeYear !== this.activeYear), takeUntilDestroyed(this.destroyRef))
             .subscribe((activeYear) => {
@@ -399,26 +386,26 @@ class TuiMobileCalendar {
         });
         // Smooth scroll to activeYear after scrolling is done
         touchstart$
-            .pipe(switchMap(() => touchend$), switchMap(() => race(yearsScrollRef.elementScrolled(), timer(SCROLL_DEBOUNCE_TIME, tuiZonefreeScheduler(this.ngZone))).pipe(debounceTime(SCROLL_DEBOUNCE_TIME * 2, tuiZonefreeScheduler(this.ngZone)), take(1), takeUntil(touchstart$))), takeUntilDestroyed(this.destroyRef))
+            .pipe(switchMap(() => touchend$), switchMap(() => race(yearsScroll.elementScrolled(), timer(SCROLL_DEBOUNCE_TIME, tuiZonefreeScheduler(this.ngZone))).pipe(debounceTime(SCROLL_DEBOUNCE_TIME * 2, tuiZonefreeScheduler(this.ngZone)), take(1), takeUntil(touchstart$))), takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.scrollToActiveYear('smooth'));
     }
     initMonthScroll() {
-        const { monthsScrollRef } = this;
-        if (!monthsScrollRef) {
+        const monthsScroll = this.monthsScroll();
+        if (!monthsScroll) {
             return;
         }
-        const touchstart$ = tuiTypedFromEvent(monthsScrollRef.elementRef.nativeElement, 'touchstart', { passive: true });
-        const touchend$ = tuiTypedFromEvent(monthsScrollRef.elementRef.nativeElement, 'touchend', { passive: true });
+        const touchstart$ = tuiTypedFromEvent(monthsScroll.elementRef.nativeElement, 'touchstart', { passive: true });
+        const touchend$ = tuiTypedFromEvent(monthsScroll.elementRef.nativeElement, 'touchend', { passive: true });
         // Smooth scroll to the closest month after scrolling is done
         touchstart$
-            .pipe(switchMap(() => touchend$), switchMap(() => race(monthsScrollRef.elementScrolled(), timer(SCROLL_DEBOUNCE_TIME, tuiZonefreeScheduler(this.ngZone))).pipe(debounceTime(SCROLL_DEBOUNCE_TIME * 2, tuiZonefreeScheduler(this.ngZone)), take(1), takeUntil(touchstart$))), takeUntilDestroyed(this.destroyRef))
+            .pipe(switchMap(() => touchend$), switchMap(() => race(monthsScroll.elementScrolled(), timer(SCROLL_DEBOUNCE_TIME, tuiZonefreeScheduler(this.ngZone))).pipe(debounceTime(SCROLL_DEBOUNCE_TIME * 2, tuiZonefreeScheduler(this.ngZone)), take(1), takeUntil(touchstart$))), takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.scrollToActiveMonth('smooth'));
     }
     scrollToActiveYear(behavior = 'auto') {
-        this.yearsScrollRef?.scrollToIndex(Math.max(this.activeYear - STARTING_YEAR - 2, 0), this.isE2E ? 'auto' : behavior);
+        this.yearsScroll()?.scrollToIndex(Math.max(this.activeYear - STARTING_YEAR - 2, 0), this.isE2E ? 'auto' : behavior);
     }
     scrollToActiveMonth(behavior = 'auto') {
-        this.monthsScrollRef?.scrollToIndex(this.activeMonth, this.isE2E ? 'auto' : behavior);
+        this.monthsScroll()?.scrollToIndex(this.activeMonth, this.isE2E ? 'auto' : behavior);
     }
     isYearActive(index) {
         return index === this.activeYear;
@@ -429,23 +416,20 @@ class TuiMobileCalendar {
     getMonthOffset(year) {
         return (year - this.activeYear) * MONTHS_IN_YEAR;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiMobileCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiMobileCalendar, isStandalone: true, selector: "tui-mobile-calendar", inputs: { single: "single", multi: "multi", min: "min", max: "max", disabledItemHandler: "disabledItemHandler", value: "value" }, outputs: { cancel: "cancel", confirm: "confirm", valueChange: "valueChange" }, host: { listeners: { "mousedown.prevent": "0" }, properties: { "class._ios": "isIOS", "class._initialized": "initialized" } }, providers: TUI_MOBILE_CALENDAR_PROVIDERS, viewQueries: [{ propertyName: "yearsScrollRef", first: true, predicate: ["yearsScrollRef"], descendants: true }, { propertyName: "monthsScrollRef", first: true, predicate: ["monthsScrollRef"], descendants: true }], ngImport: i0, template: "<header\n    *ngIf=\"chooseDayOrRangeTexts$ | async as texts\"\n    class=\"t-header\"\n>\n    <button\n        appearance=\"\"\n        automation-id=\"tui-mobile-calendar__cancel\"\n        tuiIconButton\n        tuiRipple\n        type=\"button\"\n        class=\"t-close\"\n        [iconStart]=\"icons.close\"\n        [style.border-radius.%]=\"100\"\n        (click)=\"onClose()\"\n    >\n        {{ closeWord$ | async }}\n    </button>\n    <button\n        tuiLink\n        tuiTouchable=\"opacity\"\n        type=\"button\"\n        class=\"t-link t-link_close\"\n        (click)=\"onClose()\"\n    >\n        {{ cancelWord$ | async }}\n    </button>\n    <h2\n        automation-id=\"tui-mobile-calendar__label\"\n        class=\"t-label\"\n    >\n        {{ single ? texts[0] : multi ? texts[2] : texts[1] }}\n    </h2>\n    <button\n        automation-id=\"tui-mobile-calendar__confirm\"\n        tuiLink\n        tuiTouchable=\"opacity\"\n        type=\"button\"\n        class=\"t-link\"\n        (click)=\"onConfirm()\"\n    >\n        {{ doneWord$ | async }}\n    </button>\n</header>\n<cdk-virtual-scroll-viewport\n    #yearsScrollRef\n    orientation=\"horizontal\"\n    class=\"t-years\"\n    [itemSize]=\"yearWidth\"\n>\n    <div class=\"t-years-wrapper\">\n        <button\n            *cdkVirtualFor=\"let index of years\"\n            type=\"button\"\n            class=\"t-year\"\n            [attr.data-state]=\"getState(index)\"\n            (click)=\"setYear(index)\"\n        >\n            {{ index }}\n        </button>\n    </div>\n</cdk-virtual-scroll-viewport>\n<div class=\"t-week\">\n    <div\n        *ngFor=\"let day of unorderedWeekDays$ | tuiOrderWeekDays | async\"\n        class=\"t-day\"\n    >\n        {{ day }}\n    </div>\n</div>\n<cdk-virtual-scroll-viewport\n    #monthsScrollRef\n    itemSize=\"354\"\n    maxBufferPx=\"5000\"\n    minBufferPx=\"0\"\n    class=\"t-months\"\n    (scrolledIndexChange)=\"onMonthChange($event)\"\n>\n    <section\n        *cdkVirtualFor=\"let month of months; templateCacheSize: 10\"\n        class=\"t-month-wrapper\"\n    >\n        <h2 class=\"t-month\">{{ month | tuiMonth | async }}</h2>\n        <tui-mobile-calendar-sheet\n            class=\"t-calendar\"\n            [disabledItemHandler]=\"disabledItemHandler | tuiMapper: disabledItemHandlerMapper : min : max\"\n            [month]=\"month\"\n            [single]=\"single\"\n            [value]=\"value\"\n            (dayClick)=\"onDayClick($event)\"\n        />\n    </section>\n</cdk-virtual-scroll-viewport>\n", styles: [":host{display:block;block-size:100%;font-family:-apple-system,BlinkMacSystemFont,Roboto,sans-serif;color:var(--tui-text-primary);overscroll-behavior:none;-webkit-tap-highlight-color:transparent}:host ::ng-deep .t-cell:before,:host ::ng-deep .t-cell:after{transform:translateZ(1px)}.t-header{position:relative;display:flex;align-items:center;block-size:3.5rem;padding:0 1rem;border-block-end:.5px solid var(--tui-border-normal)}:host._ios .t-header{block-size:2.75rem;border-block-end:none}.t-close{inline-size:1.5rem;block-size:1.5rem;margin-inline-end:2rem}:host._ios .t-close{display:none}.t-link{margin-inline-start:auto;flex-shrink:0;font-size:.875rem;line-height:1rem;font-weight:500;text-transform:uppercase;color:var(--tui-text-action)}.t-link_close{display:none}:host._ios .t-link{min-inline-size:3.75rem;text-align:end;font-size:.9375rem;line-height:1.125rem;font-weight:400;letter-spacing:.018125rem;text-transform:none}:host._ios .t-link_close{display:block;margin:0 auto 0 0;text-align:start}.t-label{flex-grow:1;margin:0;font-size:1.25rem;line-height:3.5rem;font-weight:500;letter-spacing:-.0125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.t-label+.t-link{padding-inline-start:1rem}:host._ios .t-label{font-size:1.0625rem;font-weight:600;letter-spacing:-.025625rem;text-align:center}.t-years{scrollbar-width:none;-ms-overflow-style:none;block-size:4.0625rem;background-color:var(--tui-background-base);box-shadow:0 .5px var(--tui-border-normal)}.t-years::-webkit-scrollbar,.t-years::-webkit-scrollbar-thumb{display:none}:host._ios .t-years{background-color:transparent}.t-years-wrapper{display:flex;block-size:4.0625rem}.t-year{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;outline:none;inline-size:20vw;flex-shrink:0;font-size:.9375rem;font-weight:700;letter-spacing:.015625rem;cursor:pointer;opacity:.1;transform:scale(.73);transition:color,opacity,transform .2s}.t-year[data-state=adjacent]{transform:scale(.86);opacity:.3}.t-year[data-state=active]{color:var(--tui-text-action);opacity:1;transform:scale(1)}.t-week{display:flex;align-items:center;block-size:1.875rem;inline-size:20.75rem;max-inline-size:100%;margin:0 auto;font-size:.75rem}:host._ios .t-week{inline-size:22.625rem;font-size:.6875rem;font-weight:500;color:var(--tui-text-secondary)}.t-day{flex:1;text-align:center}.t-months{scrollbar-width:none;-ms-overflow-style:none;block-size:calc(100% - 9.5rem);box-shadow:0 -1px var(--tui-border-normal);overflow-x:hidden}.t-months::-webkit-scrollbar,.t-months::-webkit-scrollbar-thumb{display:none}:host._ios .t-months{block-size:calc(100% - 8.75rem)}.t-month-wrapper{display:flex;margin:.625rem 0 -.625rem;block-size:22.125rem;flex-direction:column}.t-month{block-size:2.75rem;inline-size:100%;line-height:2.75rem;padding-inline-start:1rem;font-size:.875rem;font-weight:500;text-transform:uppercase;margin:0 0 1.25rem;box-sizing:border-box;border-block-end:.5px solid var(--tui-border-normal)}:host._ios .t-month{block-size:3.125rem;margin:0;border-block-end:none;text-transform:none;font-size:1.375rem;line-height:3.125rem;letter-spacing:.02rem;font-weight:700}.t-calendar{margin:0 auto;transition:opacity .2s}.t-week,.t-years,.t-months{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;opacity:0}:host(._initialized) .t-week,:host(._initialized) .t-years,:host(._initialized) .t-months{opacity:1}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "pipe", type: TuiMapperPipe, name: "tuiMapper" }, { kind: "component", type: TuiMobileCalendarSheet, selector: "tui-mobile-calendar-sheet" }, { kind: "pipe", type: TuiMonthPipe, name: "tuiMonth" }, { kind: "pipe", type: TuiOrderWeekDaysPipe, name: "tuiOrderWeekDays" }, { kind: "directive", type: TuiRipple, selector: "[tuiRipple]", inputs: ["tuiRipple"] }, { kind: "directive", type: TuiTouchable, selector: "[tuiTouchable]", inputs: ["tuiTouchable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiMobileCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiMobileCalendar, isStandalone: true, selector: "tui-mobile-calendar", inputs: { single: { classPropertyName: "single", publicName: "single", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabledItemHandler: { classPropertyName: "disabledItemHandler", publicName: "disabledItemHandler", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancel: "cancel", confirm: "confirm", value: "valueChange" }, host: { listeners: { "mousedown.prevent": "0" }, properties: { "class._ios": "isIOS", "class._initialized": "initialized" } }, providers: TUI_MOBILE_CALENDAR_PROVIDERS, viewQueries: [{ propertyName: "yearsScroll", first: true, predicate: ["yearsScroll"], descendants: true, isSignal: true }, { propertyName: "monthsScroll", first: true, predicate: ["monthsScroll"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (chooseDayOrRangeTexts?.(); as texts) {\n    <header class=\"t-header\">\n        <button\n            appearance=\"\"\n            automation-id=\"tui-mobile-calendar__cancel\"\n            tuiIconButton\n            tuiRipple\n            type=\"button\"\n            class=\"t-close\"\n            [iconStart]=\"icons.close\"\n            [style.border-radius.%]=\"100\"\n            (click)=\"onClose()\"\n        >\n            {{ closeWord() }}\n        </button>\n        <button\n            tuiLink\n            tuiTouchable=\"opacity\"\n            type=\"button\"\n            class=\"t-link t-link_close\"\n            (click)=\"onClose()\"\n        >\n            {{ cancelWord() }}\n        </button>\n        <h2\n            automation-id=\"tui-mobile-calendar__label\"\n            class=\"t-label\"\n        >\n            {{ single() ? texts[0] : multi() ? texts[2] : texts[1] }}\n        </h2>\n        <button\n            automation-id=\"tui-mobile-calendar__confirm\"\n            tuiLink\n            tuiTouchable=\"opacity\"\n            type=\"button\"\n            class=\"t-link\"\n            (click)=\"onConfirm()\"\n        >\n            {{ doneWord() }}\n        </button>\n    </header>\n}\n<cdk-virtual-scroll-viewport\n    #yearsScroll\n    orientation=\"horizontal\"\n    class=\"t-years\"\n    [itemSize]=\"yearWidth\"\n>\n    <div class=\"t-years-wrapper\">\n        <button\n            *cdkVirtualFor=\"let index of years\"\n            type=\"button\"\n            class=\"t-year\"\n            [attr.data-state]=\"getState(index)\"\n            (click)=\"setYear(index)\"\n        >\n            {{ index }}\n        </button>\n    </div>\n</cdk-virtual-scroll-viewport>\n<div class=\"t-week\">\n    @for (day of unorderedWeekDays$ | tuiOrderWeekDays | async; track day) {\n        <div class=\"t-day\">\n            {{ day }}\n        </div>\n    }\n</div>\n<cdk-virtual-scroll-viewport\n    #monthsScroll\n    itemSize=\"354\"\n    maxBufferPx=\"5000\"\n    minBufferPx=\"0\"\n    class=\"t-months\"\n    (scrolledIndexChange)=\"onMonthChange($event)\"\n>\n    <section\n        *cdkVirtualFor=\"let month of months; templateCacheSize: 10\"\n        class=\"t-month-wrapper\"\n    >\n        <h2 class=\"t-month\">{{ monthNames()[month.month] }}</h2>\n        <tui-mobile-calendar-sheet\n            class=\"t-calendar\"\n            [disabledItemHandler]=\"disabledItemHandler() | tuiMapper: disabledItemHandlerMapper : min() : max()\"\n            [month]=\"month\"\n            [single]=\"single()\"\n            [value]=\"value()\"\n            (dayClick)=\"onDayClick($event)\"\n        />\n    </section>\n</cdk-virtual-scroll-viewport>\n", styles: [":host{display:block;block-size:100%;color:var(--tui-text-primary);overscroll-behavior:none;-webkit-tap-highlight-color:transparent}:host ::ng-deep .t-cell:before,:host ::ng-deep .t-cell:after{transform:translateZ(1px)}.t-header{position:relative;display:flex;align-items:center;block-size:3.5rem;padding:0 1rem;border-block-end:.5px solid var(--tui-border-normal)}:host._ios .t-header{block-size:2.75rem;border-block-end:none}.t-close{inline-size:1.5rem;block-size:1.5rem;margin-inline-end:2rem}:host._ios .t-close{display:none}.t-link{margin-inline-start:auto;flex-shrink:0;font-size:.875rem;line-height:1rem;font-weight:500;text-transform:uppercase;color:var(--tui-text-action)}.t-link_close{display:none}:host._ios .t-link{min-inline-size:3.75rem;text-align:end;font-size:.9375rem;line-height:1.125rem;font-weight:400;letter-spacing:.018125rem;text-transform:none}:host._ios .t-link_close{display:block;margin:0 auto 0 0;text-align:start}.t-label{flex-grow:1;margin:0;font-size:1.25rem;line-height:3.5rem;font-weight:500;letter-spacing:-.0125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.t-label+.t-link{padding-inline-start:1rem}:host._ios .t-label{font-size:1.0625rem;font-weight:600;letter-spacing:-.025625rem;text-align:center}.t-years{scrollbar-width:none;-ms-overflow-style:none;block-size:4.0625rem;background-color:var(--tui-background-base);box-shadow:0 .5px var(--tui-border-normal)}.t-years::-webkit-scrollbar,.t-years::-webkit-scrollbar-thumb{display:none}:host._ios .t-years{background-color:transparent}.t-years-wrapper{display:flex;block-size:4.0625rem}.t-year{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;outline:none;inline-size:20vw;flex-shrink:0;font-size:.9375rem;font-weight:700;letter-spacing:.015625rem;cursor:pointer;opacity:.1;transform:scale(.73);transition:color,opacity,transform .2s}.t-year[data-state=adjacent]{transform:scale(.86);opacity:.3}.t-year[data-state=active]{color:var(--tui-text-action);opacity:1;transform:scale(1)}.t-week{display:flex;align-items:center;block-size:1.875rem;inline-size:20.75rem;max-inline-size:100%;margin:0 auto;font-size:.75rem}:host._ios .t-week{inline-size:22.625rem;font-size:.6875rem;font-weight:500;color:var(--tui-text-secondary)}.t-day{flex:1;text-align:center}.t-months{scrollbar-width:none;-ms-overflow-style:none;block-size:calc(100% - 9.5rem);box-shadow:0 -1px var(--tui-border-normal);overflow-x:hidden}.t-months::-webkit-scrollbar,.t-months::-webkit-scrollbar-thumb{display:none}:host._ios .t-months{block-size:calc(100% - 8.75rem)}.t-month-wrapper{display:flex;margin:.625rem 0 -.625rem;block-size:22.125rem;flex-direction:column}.t-month{block-size:2.75rem;inline-size:100%;line-height:2.75rem;padding-inline-start:1rem;font-size:.875rem;font-weight:500;text-transform:uppercase;margin:0 0 1.25rem;box-sizing:border-box;border-block-end:.5px solid var(--tui-border-normal)}:host._ios .t-month{block-size:3.125rem;margin:0;border-block-end:none;text-transform:none;font-size:1.375rem;line-height:3.125rem;letter-spacing:.02rem;font-weight:700}.t-calendar{margin:0 auto;transition:opacity .2s}.t-week,.t-years,.t-months{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;opacity:0}:host(._initialized) .t-week,:host(._initialized) .t-years,:host(._initialized) .t-months{opacity:1}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }, { kind: "pipe", type: TuiMapperPipe, name: "tuiMapper" }, { kind: "component", type: TuiMobileCalendarSheet, selector: "tui-mobile-calendar-sheet" }, { kind: "pipe", type: TuiOrderWeekDaysPipe, name: "tuiOrderWeekDays" }, { kind: "directive", type: TuiRipple, selector: "[tuiRipple]", inputs: ["tuiRipple"] }, { kind: "directive", type: TuiTouchable, selector: "[tuiTouchable]", inputs: ["tuiTouchable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiMobileCalendar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiMobileCalendar, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'tui-mobile-calendar', imports: [
+            args: [{ selector: 'tui-mobile-calendar', imports: [
                         AsyncPipe,
                         CdkFixedSizeVirtualScroll,
                         CdkVirtualForOf,
                         CdkVirtualScrollViewport,
-                        NgForOf,
-                        NgIf,
                         TuiButton,
                         TuiLink,
                         TuiMapperPipe,
                         TuiMobileCalendarSheet,
-                        TuiMonthPipe,
                         TuiOrderWeekDaysPipe,
                         TuiRipple,
                         TuiTouchable,
@@ -453,36 +437,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         '[class._ios]': 'isIOS',
                         '[class._initialized]': 'initialized',
                         '(mousedown.prevent)': '0',
-                    }, template: "<header\n    *ngIf=\"chooseDayOrRangeTexts$ | async as texts\"\n    class=\"t-header\"\n>\n    <button\n        appearance=\"\"\n        automation-id=\"tui-mobile-calendar__cancel\"\n        tuiIconButton\n        tuiRipple\n        type=\"button\"\n        class=\"t-close\"\n        [iconStart]=\"icons.close\"\n        [style.border-radius.%]=\"100\"\n        (click)=\"onClose()\"\n    >\n        {{ closeWord$ | async }}\n    </button>\n    <button\n        tuiLink\n        tuiTouchable=\"opacity\"\n        type=\"button\"\n        class=\"t-link t-link_close\"\n        (click)=\"onClose()\"\n    >\n        {{ cancelWord$ | async }}\n    </button>\n    <h2\n        automation-id=\"tui-mobile-calendar__label\"\n        class=\"t-label\"\n    >\n        {{ single ? texts[0] : multi ? texts[2] : texts[1] }}\n    </h2>\n    <button\n        automation-id=\"tui-mobile-calendar__confirm\"\n        tuiLink\n        tuiTouchable=\"opacity\"\n        type=\"button\"\n        class=\"t-link\"\n        (click)=\"onConfirm()\"\n    >\n        {{ doneWord$ | async }}\n    </button>\n</header>\n<cdk-virtual-scroll-viewport\n    #yearsScrollRef\n    orientation=\"horizontal\"\n    class=\"t-years\"\n    [itemSize]=\"yearWidth\"\n>\n    <div class=\"t-years-wrapper\">\n        <button\n            *cdkVirtualFor=\"let index of years\"\n            type=\"button\"\n            class=\"t-year\"\n            [attr.data-state]=\"getState(index)\"\n            (click)=\"setYear(index)\"\n        >\n            {{ index }}\n        </button>\n    </div>\n</cdk-virtual-scroll-viewport>\n<div class=\"t-week\">\n    <div\n        *ngFor=\"let day of unorderedWeekDays$ | tuiOrderWeekDays | async\"\n        class=\"t-day\"\n    >\n        {{ day }}\n    </div>\n</div>\n<cdk-virtual-scroll-viewport\n    #monthsScrollRef\n    itemSize=\"354\"\n    maxBufferPx=\"5000\"\n    minBufferPx=\"0\"\n    class=\"t-months\"\n    (scrolledIndexChange)=\"onMonthChange($event)\"\n>\n    <section\n        *cdkVirtualFor=\"let month of months; templateCacheSize: 10\"\n        class=\"t-month-wrapper\"\n    >\n        <h2 class=\"t-month\">{{ month | tuiMonth | async }}</h2>\n        <tui-mobile-calendar-sheet\n            class=\"t-calendar\"\n            [disabledItemHandler]=\"disabledItemHandler | tuiMapper: disabledItemHandlerMapper : min : max\"\n            [month]=\"month\"\n            [single]=\"single\"\n            [value]=\"value\"\n            (dayClick)=\"onDayClick($event)\"\n        />\n    </section>\n</cdk-virtual-scroll-viewport>\n", styles: [":host{display:block;block-size:100%;font-family:-apple-system,BlinkMacSystemFont,Roboto,sans-serif;color:var(--tui-text-primary);overscroll-behavior:none;-webkit-tap-highlight-color:transparent}:host ::ng-deep .t-cell:before,:host ::ng-deep .t-cell:after{transform:translateZ(1px)}.t-header{position:relative;display:flex;align-items:center;block-size:3.5rem;padding:0 1rem;border-block-end:.5px solid var(--tui-border-normal)}:host._ios .t-header{block-size:2.75rem;border-block-end:none}.t-close{inline-size:1.5rem;block-size:1.5rem;margin-inline-end:2rem}:host._ios .t-close{display:none}.t-link{margin-inline-start:auto;flex-shrink:0;font-size:.875rem;line-height:1rem;font-weight:500;text-transform:uppercase;color:var(--tui-text-action)}.t-link_close{display:none}:host._ios .t-link{min-inline-size:3.75rem;text-align:end;font-size:.9375rem;line-height:1.125rem;font-weight:400;letter-spacing:.018125rem;text-transform:none}:host._ios .t-link_close{display:block;margin:0 auto 0 0;text-align:start}.t-label{flex-grow:1;margin:0;font-size:1.25rem;line-height:3.5rem;font-weight:500;letter-spacing:-.0125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.t-label+.t-link{padding-inline-start:1rem}:host._ios .t-label{font-size:1.0625rem;font-weight:600;letter-spacing:-.025625rem;text-align:center}.t-years{scrollbar-width:none;-ms-overflow-style:none;block-size:4.0625rem;background-color:var(--tui-background-base);box-shadow:0 .5px var(--tui-border-normal)}.t-years::-webkit-scrollbar,.t-years::-webkit-scrollbar-thumb{display:none}:host._ios .t-years{background-color:transparent}.t-years-wrapper{display:flex;block-size:4.0625rem}.t-year{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;outline:none;inline-size:20vw;flex-shrink:0;font-size:.9375rem;font-weight:700;letter-spacing:.015625rem;cursor:pointer;opacity:.1;transform:scale(.73);transition:color,opacity,transform .2s}.t-year[data-state=adjacent]{transform:scale(.86);opacity:.3}.t-year[data-state=active]{color:var(--tui-text-action);opacity:1;transform:scale(1)}.t-week{display:flex;align-items:center;block-size:1.875rem;inline-size:20.75rem;max-inline-size:100%;margin:0 auto;font-size:.75rem}:host._ios .t-week{inline-size:22.625rem;font-size:.6875rem;font-weight:500;color:var(--tui-text-secondary)}.t-day{flex:1;text-align:center}.t-months{scrollbar-width:none;-ms-overflow-style:none;block-size:calc(100% - 9.5rem);box-shadow:0 -1px var(--tui-border-normal);overflow-x:hidden}.t-months::-webkit-scrollbar,.t-months::-webkit-scrollbar-thumb{display:none}:host._ios .t-months{block-size:calc(100% - 8.75rem)}.t-month-wrapper{display:flex;margin:.625rem 0 -.625rem;block-size:22.125rem;flex-direction:column}.t-month{block-size:2.75rem;inline-size:100%;line-height:2.75rem;padding-inline-start:1rem;font-size:.875rem;font-weight:500;text-transform:uppercase;margin:0 0 1.25rem;box-sizing:border-box;border-block-end:.5px solid var(--tui-border-normal)}:host._ios .t-month{block-size:3.125rem;margin:0;border-block-end:none;text-transform:none;font-size:1.375rem;line-height:3.125rem;letter-spacing:.02rem;font-weight:700}.t-calendar{margin:0 auto;transition:opacity .2s}.t-week,.t-years,.t-months{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;opacity:0}:host(._initialized) .t-week,:host(._initialized) .t-years,:host(._initialized) .t-months{opacity:1}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { yearsScrollRef: [{
-                type: ViewChild,
-                args: ['yearsScrollRef']
-            }], monthsScrollRef: [{
-                type: ViewChild,
-                args: ['monthsScrollRef']
-            }], single: [{
-                type: Input
-            }], multi: [{
-                type: Input
-            }], min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], disabledItemHandler: [{
-                type: Input
-            }], cancel: [{
-                type: Output
-            }], confirm: [{
-                type: Output
-            }], valueChange: [{
-                type: Output
-            }], value: [{
-                type: Input
-            }] } });
+                    }, template: "@if (chooseDayOrRangeTexts?.(); as texts) {\n    <header class=\"t-header\">\n        <button\n            appearance=\"\"\n            automation-id=\"tui-mobile-calendar__cancel\"\n            tuiIconButton\n            tuiRipple\n            type=\"button\"\n            class=\"t-close\"\n            [iconStart]=\"icons.close\"\n            [style.border-radius.%]=\"100\"\n            (click)=\"onClose()\"\n        >\n            {{ closeWord() }}\n        </button>\n        <button\n            tuiLink\n            tuiTouchable=\"opacity\"\n            type=\"button\"\n            class=\"t-link t-link_close\"\n            (click)=\"onClose()\"\n        >\n            {{ cancelWord() }}\n        </button>\n        <h2\n            automation-id=\"tui-mobile-calendar__label\"\n            class=\"t-label\"\n        >\n            {{ single() ? texts[0] : multi() ? texts[2] : texts[1] }}\n        </h2>\n        <button\n            automation-id=\"tui-mobile-calendar__confirm\"\n            tuiLink\n            tuiTouchable=\"opacity\"\n            type=\"button\"\n            class=\"t-link\"\n            (click)=\"onConfirm()\"\n        >\n            {{ doneWord() }}\n        </button>\n    </header>\n}\n<cdk-virtual-scroll-viewport\n    #yearsScroll\n    orientation=\"horizontal\"\n    class=\"t-years\"\n    [itemSize]=\"yearWidth\"\n>\n    <div class=\"t-years-wrapper\">\n        <button\n            *cdkVirtualFor=\"let index of years\"\n            type=\"button\"\n            class=\"t-year\"\n            [attr.data-state]=\"getState(index)\"\n            (click)=\"setYear(index)\"\n        >\n            {{ index }}\n        </button>\n    </div>\n</cdk-virtual-scroll-viewport>\n<div class=\"t-week\">\n    @for (day of unorderedWeekDays$ | tuiOrderWeekDays | async; track day) {\n        <div class=\"t-day\">\n            {{ day }}\n        </div>\n    }\n</div>\n<cdk-virtual-scroll-viewport\n    #monthsScroll\n    itemSize=\"354\"\n    maxBufferPx=\"5000\"\n    minBufferPx=\"0\"\n    class=\"t-months\"\n    (scrolledIndexChange)=\"onMonthChange($event)\"\n>\n    <section\n        *cdkVirtualFor=\"let month of months; templateCacheSize: 10\"\n        class=\"t-month-wrapper\"\n    >\n        <h2 class=\"t-month\">{{ monthNames()[month.month] }}</h2>\n        <tui-mobile-calendar-sheet\n            class=\"t-calendar\"\n            [disabledItemHandler]=\"disabledItemHandler() | tuiMapper: disabledItemHandlerMapper : min() : max()\"\n            [month]=\"month\"\n            [single]=\"single()\"\n            [value]=\"value()\"\n            (dayClick)=\"onDayClick($event)\"\n        />\n    </section>\n</cdk-virtual-scroll-viewport>\n", styles: [":host{display:block;block-size:100%;color:var(--tui-text-primary);overscroll-behavior:none;-webkit-tap-highlight-color:transparent}:host ::ng-deep .t-cell:before,:host ::ng-deep .t-cell:after{transform:translateZ(1px)}.t-header{position:relative;display:flex;align-items:center;block-size:3.5rem;padding:0 1rem;border-block-end:.5px solid var(--tui-border-normal)}:host._ios .t-header{block-size:2.75rem;border-block-end:none}.t-close{inline-size:1.5rem;block-size:1.5rem;margin-inline-end:2rem}:host._ios .t-close{display:none}.t-link{margin-inline-start:auto;flex-shrink:0;font-size:.875rem;line-height:1rem;font-weight:500;text-transform:uppercase;color:var(--tui-text-action)}.t-link_close{display:none}:host._ios .t-link{min-inline-size:3.75rem;text-align:end;font-size:.9375rem;line-height:1.125rem;font-weight:400;letter-spacing:.018125rem;text-transform:none}:host._ios .t-link_close{display:block;margin:0 auto 0 0;text-align:start}.t-label{flex-grow:1;margin:0;font-size:1.25rem;line-height:3.5rem;font-weight:500;letter-spacing:-.0125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.t-label+.t-link{padding-inline-start:1rem}:host._ios .t-label{font-size:1.0625rem;font-weight:600;letter-spacing:-.025625rem;text-align:center}.t-years{scrollbar-width:none;-ms-overflow-style:none;block-size:4.0625rem;background-color:var(--tui-background-base);box-shadow:0 .5px var(--tui-border-normal)}.t-years::-webkit-scrollbar,.t-years::-webkit-scrollbar-thumb{display:none}:host._ios .t-years{background-color:transparent}.t-years-wrapper{display:flex;block-size:4.0625rem}.t-year{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;outline:none;inline-size:20vw;flex-shrink:0;font-size:.9375rem;font-weight:700;letter-spacing:.015625rem;cursor:pointer;opacity:.1;transform:scale(.73);transition:color,opacity,transform .2s}.t-year[data-state=adjacent]{transform:scale(.86);opacity:.3}.t-year[data-state=active]{color:var(--tui-text-action);opacity:1;transform:scale(1)}.t-week{display:flex;align-items:center;block-size:1.875rem;inline-size:20.75rem;max-inline-size:100%;margin:0 auto;font-size:.75rem}:host._ios .t-week{inline-size:22.625rem;font-size:.6875rem;font-weight:500;color:var(--tui-text-secondary)}.t-day{flex:1;text-align:center}.t-months{scrollbar-width:none;-ms-overflow-style:none;block-size:calc(100% - 9.5rem);box-shadow:0 -1px var(--tui-border-normal);overflow-x:hidden}.t-months::-webkit-scrollbar,.t-months::-webkit-scrollbar-thumb{display:none}:host._ios .t-months{block-size:calc(100% - 8.75rem)}.t-month-wrapper{display:flex;margin:.625rem 0 -.625rem;block-size:22.125rem;flex-direction:column}.t-month{block-size:2.75rem;inline-size:100%;line-height:2.75rem;padding-inline-start:1rem;font-size:.875rem;font-weight:500;text-transform:uppercase;margin:0 0 1.25rem;box-sizing:border-box;border-block-end:.5px solid var(--tui-border-normal)}:host._ios .t-month{block-size:3.125rem;margin:0;border-block-end:none;text-transform:none;font-size:1.375rem;line-height:3.125rem;letter-spacing:.02rem;font-weight:700}.t-calendar{margin:0 auto;transition:opacity .2s}.t-week,.t-years,.t-months{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;opacity:0}:host(._initialized) .t-week,:host(._initialized) .t-years,:host(._initialized) .t-months{opacity:1}\n"] }]
+        }], ctorParameters: () => [] });
+function toggleDay(days, day) {
+    return ((days?.find((item) => item.daySame(day))
+        ? days.filter((item) => !item.daySame(day))
+        : days?.concat(day)) || []);
+}
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ANDROID_CYCLE, ANDROID_LABEL, ANDROID_WEEK, BUFFER, IOS_CYCLE, IOS_LABEL, IOS_WEEK, RANGE, SCROLL_DEBOUNCE_TIME, STARTING_YEAR, TUI_MOBILE_CALENDAR_PROVIDERS, TUI_VALUE_STREAM, TuiMobileCalendar, TuiMobileCalendarStrategy, YEARLY_CYCLE, YEARS_IN_ROW };
+export { ANDROID_CYCLE, ANDROID_LABEL, ANDROID_WEEK, BUFFER, IOS_CYCLE, IOS_LABEL, IOS_WEEK, RANGE, SCROLL_DEBOUNCE_TIME, STARTING_YEAR, TUI_CALENDAR_DATE_STREAM, TUI_MOBILE_CALENDAR_PROVIDERS, TUI_VALUE_STREAM, TuiMobileCalendar, TuiMobileCalendarStrategy, YEARLY_CYCLE, YEARS_IN_ROW, tuiDateStreamWithTransformer };
 //# sourceMappingURL=taiga-ui-addon-mobile-components-mobile-calendar.mjs.map