@taiga-ui/core 5.0.0-rc.3 → 5.0.0-rc.5

package/fesm2022/taiga-ui-core-components-calendar.mjs

@@ -1,18 +1,18 @@
 import * as i0 from '@angular/core';
-import { signal, inject, Pipe, EventEmitter, Output, Input, ChangeDetectionStrategy, Component, computed, ChangeDetectorRef } from '@angular/core';
+import { signal, inject, Pipe, input, model, output, ChangeDetectionStrategy, Component, computed, linkedSignal, effect } from '@angular/core';
 import { TuiDayOfWeek, DAYS_IN_WEEK, TuiDay, TuiMonth, TuiDayRange, TUI_FIRST_DAY, TUI_LAST_DAY, MIN_YEAR, MAX_YEAR, TuiYear, TuiMonthRange, TUI_LAST_DISPLAYED_DAY } from '@taiga-ui/cdk/date-time';
 import { TuiMapperPipe } from '@taiga-ui/cdk/pipes/mapper';
 import { tuiNullableSame, tuiIsNumber } from '@taiga-ui/cdk/utils/miscellaneous';
 import { TuiScrollIntoView, TuiScrollbar } from '@taiga-ui/core/components/scrollbar';
 import { TUI_ITEMS_HANDLERS } from '@taiga-ui/core/directives/items-handlers';
 import { TUI_SHORT_WEEK_DAYS, TUI_MONTHS, tuiAsAuxiliary } from '@taiga-ui/core/tokens';
-import { map, Subject } from 'rxjs';
 import { AsyncPipe } from '@angular/common';
 import { toObservable } from '@angular/core/rxjs-interop';
 import { TUI_FALSE_HANDLER } from '@taiga-ui/cdk/constants';
 import { TuiHovered } from '@taiga-ui/cdk/directives/hovered';
 import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
 import { tuiInRange } from '@taiga-ui/cdk/utils/math';
+import { map } from 'rxjs';
 import { TuiLink } from '@taiga-ui/core/components/link';
 import { TuiSpinButton } from '@taiga-ui/core/components/spin-button';
 
@@ -65,10 +65,10 @@ class TuiCalendarSheetPipe {
         this.currentMonth = month;
         return this.currentSheet;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiCalendarSheetPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: TuiCalendarSheetPipe, isStandalone: true, name: "tuiCalendarSheet" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TuiCalendarSheetPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: TuiCalendarSheetPipe, isStandalone: true, name: "tuiCalendarSheet" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiCalendarSheetPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TuiCalendarSheetPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'tuiCalendarSheet' }]
         }] });
@@ -119,10 +119,10 @@ class TuiOrderWeekDaysPipe {
             ...weekDays.slice(0, this.options.weekStart()),
         ]));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiOrderWeekDaysPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: TuiOrderWeekDaysPipe, isStandalone: true, name: "tuiOrderWeekDays" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TuiOrderWeekDaysPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: TuiOrderWeekDaysPipe, isStandalone: true, name: "tuiOrderWeekDays" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiOrderWeekDaysPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TuiOrderWeekDaysPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'tuiOrderWeekDays' }]
         }] });
@@ -133,22 +133,13 @@ class TuiCalendarSheet {
         this.today = TuiDay.currentLocal();
         this.unorderedWeekDays$ = toObservable(inject(TUI_SHORT_WEEK_DAYS));
         this.dayType = inject(TUI_CALENDAR_OPTIONS).dayType;
-        this.month = TuiMonth.currentLocal();
-        this.disabledItemHandler = TUI_FALSE_HANDLER;
-        this.markerHandler = null;
-        this.value = null;
-        this.hoveredItem = null;
-        this.showAdjacent = true;
-        /**
-         * @deprecated use static DI options instead
-         * ```
-         * tuiCalendarSheetOptionsProvider({rangeMode: true})
-         * ```
-         * TODO(v5): delete it
-         */
-        this.single = true;
-        this.hoveredItemChange = new EventEmitter();
-        this.dayClick = new EventEmitter();
+        this.month = input(TuiMonth.currentLocal());
+        this.disabledItemHandler = input(TUI_FALSE_HANDLER);
+        this.markerHandler = input(null);
+        this.value = input(null);
+        this.showAdjacent = input(true);
+        this.hoveredItem = model(null);
+        this.dayClick = output();
         this.toMarkers = (day, today, range, markerHandler) => {
             if (today || ['active', 'end', 'start'].includes(range || '')) {
                 return null;
@@ -157,28 +148,11 @@ class TuiCalendarSheet {
             return markers?.length ? markers : null;
         };
     }
-    /**
-     * @deprecated TODO(v5): delete it. It is used nowhere except unit tests
-     */
-    itemIsInterval(day) {
-        const { value, hoveredItem } = this;
-        if (!(value instanceof TuiDayRange)) {
-            return false;
-        }
-        if (!value.isSingleDay) {
-            return value.from.daySameOrBefore(day) && value.to.dayAfter(day);
-        }
-        if (hoveredItem === null) {
-            return false;
-        }
-        const range = TuiDayRange.sort(value.from, hoveredItem);
-        return range.from.daySameOrBefore(day) && range.to.dayAfter(day);
-    }
     onItemHovered(item) {
         this.updateHoveredItem(item || null);
     }
     getItemRange(item) {
-        const { value, hoveredItem } = this;
+        const value = this.value();
         if (!value) {
             return null;
         }
@@ -191,7 +165,7 @@ class TuiCalendarSheet {
         if (!(value instanceof TuiDay) && !(value instanceof TuiDayRange)) {
             return value.find((day) => day.daySame(item)) ? 'active' : null;
         }
-        const range = this.getRange(value, hoveredItem);
+        const range = this.getRange(value, this.hoveredItem());
         if (range.isSingleDay && range.from.daySame(item)) {
             return 'active';
         }
@@ -204,25 +178,16 @@ class TuiCalendarSheet {
         return range.from.dayBefore(item) && range.to.dayAfter(item) ? 'middle' : null;
     }
     get computedRangeMode() {
-        return !this.single || this.options.rangeMode;
+        return this.options.rangeMode;
     }
     get isRangePicking() {
-        return this.computedRangeMode
-            ? this.value instanceof TuiDay
-            : /**
-               * Only for backward compatibility!
-               * TODO(v5): replace with `this.options.rangeMode && this.value instanceof TuiDay`
-               */
-                this.value instanceof TuiDayRange && this.value.isSingleDay;
+        return this.options.rangeMode && this.value() instanceof TuiDay;
     }
     itemIsToday(item) {
         return this.today.daySame(item);
     }
     itemIsUnavailable(item) {
-        return !this.month.monthSame(item);
-    }
-    onItemClick(item) {
-        this.dayClick.emit(item);
+        return !this.month().monthSame(item);
     }
     getRange(value, hoveredItem) {
         if (value instanceof TuiDay) {
@@ -233,16 +198,15 @@ class TuiCalendarSheet {
             : value;
     }
     updateHoveredItem(day) {
-        if (tuiNullableSame(this.hoveredItem, day, (a, b) => a.daySame(b))) {
+        if (tuiNullableSame(this.hoveredItem(), day, (a, b) => a.daySame(b))) {
             return;
         }
-        this.hoveredItem = day;
-        this.hoveredItemChange.emit(day);
+        this.hoveredItem.set(day);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiCalendarSheet, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TuiCalendarSheet, isStandalone: true, selector: "tui-calendar-sheet", inputs: { month: "month", disabledItemHandler: "disabledItemHandler", markerHandler: "markerHandler", value: "value", hoveredItem: "hoveredItem", showAdjacent: "showAdjacent", single: "single" }, outputs: { hoveredItemChange: "hoveredItemChange", dayClick: "dayClick" }, host: { properties: { "class._picking": "isRangePicking" } }, ngImport: i0, template: "<div class=\"t-row t-row_weekday\">\n    @for (day of unorderedWeekDays$ | tuiOrderWeekDays | async; track day) {\n        <div\n            class=\"t-cell\"\n            [textContent]=\"day\"\n        ></div>\n    }\n</div>\n@let sheet = month | tuiCalendarSheet: true;\n<div>\n    @for (_ of '-'.repeat(sheet.length); track $index) {\n        @let rowIndex = $index;\n        <div\n            automation-id=\"tui-calendar-sheet__row\"\n            class=\"t-row\"\n        >\n            @for (_ of '-'.repeat(sheet[rowIndex]?.length ?? 0); track $index) {\n                @let item = sheet[rowIndex]?.[$index];\n                @if (item && (!itemIsUnavailable(item) || showAdjacent)) {\n                    <div\n                        automation-id=\"tui-calendar-sheet__cell\"\n                        class=\"t-cell\"\n                        [attr.data-range]=\"getItemRange(item)\"\n                        [attr.data-type]=\"item | tuiMapper: dayType\"\n                        [class.t-cell_disabled]=\"disabledItemHandler(item)\"\n                        [class.t-cell_today]=\"itemIsToday(item)\"\n                        [class.t-cell_unavailable]=\"itemIsUnavailable(item)\"\n                        (click)=\"onItemClick(item)\"\n                        (tuiHoveredChange)=\"onItemHovered($event && item)\"\n                    >\n                        {{ item.day }}\n                        @if (\n                            item | tuiMapper: toMarkers : itemIsToday(item) : getItemRange(item) : markerHandler;\n                            as markers\n                        ) {\n                            <div class=\"t-dots\">\n                                <div\n                                    class=\"t-dot\"\n                                    [style.background]=\"markers?.[0]\"\n                                ></div>\n                                @if (markers.length > 1) {\n                                    <div\n                                        class=\"t-dot\"\n                                        [style.background]=\"markers?.[1] || ''\"\n                                    ></div>\n                                }\n                            </div>\n                        }\n                    </div>\n                }\n            }\n        </div>\n    }\n</div>\n", styles: [".t-row{display:flex;justify-content:flex-start;font:var(--tui-font-body-m)}.t-row:last-child{justify-content:flex-start}.t-cell{position:relative;display:flex;align-items:center;justify-content:center;line-height:2rem;isolation:isolate;cursor:pointer;overflow:hidden;border:.125rem solid transparent;box-sizing:border-box;mask:linear-gradient(transparent calc(50% - 1rem),#000 calc(50% - 1rem),#000 calc(50% + 1rem),transparent calc(50% + 1rem))}.t-cell:first-child{border-inline-start-color:transparent!important}.t-cell:last-child{border-inline-end-color:transparent!important}.t-cell:before,.t-cell:after{position:absolute;inset:0;content:\"\";z-index:-1;border-radius:var(--tui-radius-m)}.t-cell:after{mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 32\"><path d=\"M0.2856 0L0.6763 0C2.9265 0 4.9876 1.259 6.0147 3.2611L10.2442 11.5048C11.5301 14.0113 11.5683 16.9754 10.3472 19.5141L5.9766 28.6007C4.9772 30.6786 2.8754 32 0.5696 32H0.285645V0Z\"></path></svg>') right / .75rem 100% no-repeat,linear-gradient(#000,#000) left / calc(100% - .7rem) 100% no-repeat}.t-cell[data-range]:before{background:var(--tui-background-neutral-1)}:host._picking .t-cell[data-range]:before{background:var(--tui-background-neutral-1-hover)}.t-cell[data-range=middle]{border-color:var(--tui-background-neutral-1)}:host._picking .t-cell[data-range=middle]{border-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=middle]:not(:first-child):before{border-top-left-radius:0;border-bottom-left-radius:0}.t-cell[data-range=middle]:not(:last-child):before{border-top-right-radius:0;border-bottom-right-radius:0}.t-cell[data-range=start]{border-inline-end-color:var(--tui-background-neutral-1);color:var(--tui-text-primary-on-accent-1)}:host._picking .t-cell[data-range=start]{border-inline-end-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=start]:not(:last-child):before{right:-1rem}.t-cell[data-range=start]:after{background:var(--tui-background-accent-1)}.t-cell[data-range=end]{border-inline-start-color:var(--tui-background-neutral-1);color:var(--tui-text-primary-on-accent-1)}:host._picking .t-cell[data-range=end]{border-inline-start-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=end]:not(:first-child):before{left:-1rem}.t-cell[data-range=end]:after{background:var(--tui-background-accent-1);transform:scaleX(-1)}.t-cell[data-range=active]{color:var(--tui-text-primary-on-accent-1)}.t-cell[data-range=active]:after{background:var(--tui-background-accent-1);mask:none}.t-cell_disabled{opacity:var(--tui-disabled-opacity);pointer-events:none}.t-cell_today{text-decoration:underline;text-underline-offset:.25rem}@media (hover: hover) and (pointer: fine){.t-cell:hover:not([data-range=start]):not([data-range=end]):before{background:var(--tui-background-neutral-1-hover)}.t-cell[data-range=start]:hover:after,.t-cell[data-range=end]:hover:after,.t-cell[data-range=active]:hover:after{background:var(--tui-background-accent-1-hover)}}.t-cell{inline-size:calc(100% / 7)}[data-type=weekday]{color:var(--tui-text-primary)}[data-type=weekend]{color:var(--tui-text-negative)}.t-row{justify-content:flex-start}.t-row:first-child{justify-content:flex-end}.t-row_weekday{font:var(--tui-font-body-s);color:var(--tui-text-secondary);pointer-events:none}.t-cell_unavailable{opacity:var(--tui-disabled-opacity)}.t-dots{position:absolute;bottom:0;display:flex;justify-content:center;margin-block-start:-.5rem;padding-block-end:.25rem}.t-dot{display:inline-block;inline-size:.25rem;block-size:.25rem;border-radius:100%;margin:0 .0625rem}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TuiCalendarSheetPipe, name: "tuiCalendarSheet" }, { kind: "directive", type: TuiHovered, selector: "[tuiHoveredChange]", outputs: ["tuiHoveredChange"] }, { kind: "pipe", type: TuiMapperPipe, name: "tuiMapper" }, { kind: "pipe", type: TuiOrderWeekDaysPipe, name: "tuiOrderWeekDays" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TuiCalendarSheet, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: TuiCalendarSheet, isStandalone: true, selector: "tui-calendar-sheet", inputs: { month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, disabledItemHandler: { classPropertyName: "disabledItemHandler", publicName: "disabledItemHandler", isSignal: true, isRequired: false, transformFunction: null }, markerHandler: { classPropertyName: "markerHandler", publicName: "markerHandler", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, showAdjacent: { classPropertyName: "showAdjacent", publicName: "showAdjacent", isSignal: true, isRequired: false, transformFunction: null }, hoveredItem: { classPropertyName: "hoveredItem", publicName: "hoveredItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hoveredItem: "hoveredItemChange", dayClick: "dayClick" }, host: { properties: { "class._picking": "isRangePicking" } }, ngImport: i0, template: "<div class=\"t-row t-row_weekday\">\n    @for (day of unorderedWeekDays$ | tuiOrderWeekDays | async; track day) {\n        <div\n            class=\"t-cell\"\n            [textContent]=\"day\"\n        ></div>\n    }\n</div>\n@let sheet = month() | tuiCalendarSheet: true;\n<div>\n    @for (_ of '-'.repeat(sheet.length); track $index) {\n        @let rowIndex = $index;\n        <div\n            automation-id=\"tui-calendar-sheet__row\"\n            class=\"t-row\"\n        >\n            @for (_ of '-'.repeat(sheet[rowIndex]?.length ?? 0); track $index) {\n                @let item = sheet[rowIndex]?.[$index];\n                @if (item && (!itemIsUnavailable(item) || showAdjacent())) {\n                    <div\n                        automation-id=\"tui-calendar-sheet__cell\"\n                        class=\"t-cell\"\n                        [attr.data-range]=\"getItemRange(item)\"\n                        [attr.data-type]=\"item | tuiMapper: dayType\"\n                        [class.t-cell_disabled]=\"disabledItemHandler()(item)\"\n                        [class.t-cell_today]=\"itemIsToday(item)\"\n                        [class.t-cell_unavailable]=\"itemIsUnavailable(item)\"\n                        (click)=\"dayClick.emit(item)\"\n                        (tuiHoveredChange)=\"onItemHovered($event && item)\"\n                    >\n                        {{ item.day }}\n                        @if (\n                            item | tuiMapper: toMarkers : itemIsToday(item) : getItemRange(item) : markerHandler();\n                            as markers\n                        ) {\n                            <div class=\"t-dots\">\n                                <div\n                                    class=\"t-dot\"\n                                    [style.background]=\"markers?.[0]\"\n                                ></div>\n                                @if (markers.length > 1) {\n                                    <div\n                                        class=\"t-dot\"\n                                        [style.background]=\"markers?.[1] || ''\"\n                                    ></div>\n                                }\n                            </div>\n                        }\n                    </div>\n                }\n            }\n        </div>\n    }\n</div>\n", styles: [".t-row{display:flex;justify-content:flex-start;font:var(--tui-typography-body-m)}.t-row:last-child{justify-content:flex-start}.t-cell{position:relative;display:flex;align-items:center;justify-content:center;line-height:2rem;isolation:isolate;cursor:pointer;overflow:hidden;border:.125rem solid transparent;box-sizing:border-box;mask:linear-gradient(transparent calc(50% - 1rem),#000 calc(50% - 1rem),#000 calc(50% + 1rem),transparent calc(50% + 1rem))}.t-cell:first-child{border-inline-start-color:transparent!important}.t-cell:last-child{border-inline-end-color:transparent!important}.t-cell:before,.t-cell:after{position:absolute;inset-block-start:0;inset-inline-start:0;inset-block-end:0;inset-inline-end:0;content:\"\";z-index:-1;border-radius:var(--tui-radius-m)}.t-cell:after{mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 32\"><path d=\"M0.2856 0L0.6763 0C2.9265 0 4.9876 1.259 6.0147 3.2611L10.2442 11.5048C11.5301 14.0113 11.5683 16.9754 10.3472 19.5141L5.9766 28.6007C4.9772 30.6786 2.8754 32 0.5696 32H0.285645V0Z\"></path></svg>') right / .75rem 100% no-repeat,linear-gradient(#000,#000) left / calc(100% - .7rem) 100% no-repeat}.t-cell[data-range]:before{background:var(--tui-background-neutral-1)}:host._picking .t-cell[data-range]:before{background:var(--tui-background-neutral-1-hover)}.t-cell[data-range=middle]{border-color:var(--tui-background-neutral-1)}:host._picking .t-cell[data-range=middle]{border-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=middle]:not(:first-child):before{border-top-left-radius:0;border-bottom-left-radius:0}.t-cell[data-range=middle]:not(:last-child):before{border-top-right-radius:0;border-bottom-right-radius:0}.t-cell[data-range=start]{border-inline-end-color:var(--tui-background-neutral-1);color:var(--tui-text-primary-on-accent-1)}:host._picking .t-cell[data-range=start]{border-inline-end-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=start]:not(:last-child):before{inset-inline-end:-1rem}.t-cell[data-range=start]:after{background:var(--tui-background-accent-1)}.t-cell[data-range=end]{border-inline-start-color:var(--tui-background-neutral-1);color:var(--tui-text-primary-on-accent-1)}:host._picking .t-cell[data-range=end]{border-inline-start-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=end]:not(:first-child):before{inset-inline-start:-1rem}.t-cell[data-range=end]:after{background:var(--tui-background-accent-1);transform:scaleX(-1)}.t-cell[data-range=active]{color:var(--tui-text-primary-on-accent-1)}.t-cell[data-range=active]:after{background:var(--tui-background-accent-1);mask:none}.t-cell_disabled{opacity:var(--tui-disabled-opacity);pointer-events:none}.t-cell_today{text-decoration:underline;text-underline-offset:.25rem}@media (hover: hover) and (pointer: fine){.t-cell:hover:not([data-range=start]):not([data-range=end]):before{background:var(--tui-background-neutral-1-hover)}.t-cell[data-range=start]:hover:after,.t-cell[data-range=end]:hover:after,.t-cell[data-range=active]:hover:after{background:var(--tui-background-accent-1-hover)}}.t-cell{inline-size:calc(100% / 7)}[data-type=weekday]{color:var(--tui-text-primary)}[data-type=weekend]{color:var(--tui-text-negative)}.t-row{justify-content:flex-start}.t-row:first-child{justify-content:flex-end}.t-row_weekday{font:var(--tui-typography-body-s);color:var(--tui-text-secondary);pointer-events:none}.t-cell_unavailable{opacity:var(--tui-disabled-opacity)}.t-dots{position:absolute;display:flex;inset-block-end:0;justify-content:center;margin-block-start:-.5rem;padding-block-end:.25rem}.t-dot{display:inline-block;inline-size:.25rem;block-size:.25rem;border-radius:100%;margin:0 .0625rem}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TuiCalendarSheetPipe, name: "tuiCalendarSheet" }, { kind: "directive", type: TuiHovered, selector: "[tuiHoveredChange]", outputs: ["tuiHoveredChange"] }, { kind: "pipe", type: TuiMapperPipe, name: "tuiMapper" }, { kind: "pipe", type: TuiOrderWeekDaysPipe, name: "tuiOrderWeekDays" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiCalendarSheet, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TuiCalendarSheet, decorators: [{
             type: Component,
             args: [{ selector: 'tui-calendar-sheet', imports: [
                         AsyncPipe,
@@ -250,72 +214,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         TuiHovered,
                         TuiMapperPipe,
                         TuiOrderWeekDaysPipe,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class._picking]': 'isRangePicking' }, template: "<div class=\"t-row t-row_weekday\">\n    @for (day of unorderedWeekDays$ | tuiOrderWeekDays | async; track day) {\n        <div\n            class=\"t-cell\"\n            [textContent]=\"day\"\n        ></div>\n    }\n</div>\n@let sheet = month | tuiCalendarSheet: true;\n<div>\n    @for (_ of '-'.repeat(sheet.length); track $index) {\n        @let rowIndex = $index;\n        <div\n            automation-id=\"tui-calendar-sheet__row\"\n            class=\"t-row\"\n        >\n            @for (_ of '-'.repeat(sheet[rowIndex]?.length ?? 0); track $index) {\n                @let item = sheet[rowIndex]?.[$index];\n                @if (item && (!itemIsUnavailable(item) || showAdjacent)) {\n                    <div\n                        automation-id=\"tui-calendar-sheet__cell\"\n                        class=\"t-cell\"\n                        [attr.data-range]=\"getItemRange(item)\"\n                        [attr.data-type]=\"item | tuiMapper: dayType\"\n                        [class.t-cell_disabled]=\"disabledItemHandler(item)\"\n                        [class.t-cell_today]=\"itemIsToday(item)\"\n                        [class.t-cell_unavailable]=\"itemIsUnavailable(item)\"\n                        (click)=\"onItemClick(item)\"\n                        (tuiHoveredChange)=\"onItemHovered($event && item)\"\n                    >\n                        {{ item.day }}\n                        @if (\n                            item | tuiMapper: toMarkers : itemIsToday(item) : getItemRange(item) : markerHandler;\n                            as markers\n                        ) {\n                            <div class=\"t-dots\">\n                                <div\n                                    class=\"t-dot\"\n                                    [style.background]=\"markers?.[0]\"\n                                ></div>\n                                @if (markers.length > 1) {\n                                    <div\n                                        class=\"t-dot\"\n                                        [style.background]=\"markers?.[1] || ''\"\n                                    ></div>\n                                }\n                            </div>\n                        }\n                    </div>\n                }\n            }\n        </div>\n    }\n</div>\n", styles: [".t-row{display:flex;justify-content:flex-start;font:var(--tui-font-body-m)}.t-row:last-child{justify-content:flex-start}.t-cell{position:relative;display:flex;align-items:center;justify-content:center;line-height:2rem;isolation:isolate;cursor:pointer;overflow:hidden;border:.125rem solid transparent;box-sizing:border-box;mask:linear-gradient(transparent calc(50% - 1rem),#000 calc(50% - 1rem),#000 calc(50% + 1rem),transparent calc(50% + 1rem))}.t-cell:first-child{border-inline-start-color:transparent!important}.t-cell:last-child{border-inline-end-color:transparent!important}.t-cell:before,.t-cell:after{position:absolute;inset:0;content:\"\";z-index:-1;border-radius:var(--tui-radius-m)}.t-cell:after{mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 32\"><path d=\"M0.2856 0L0.6763 0C2.9265 0 4.9876 1.259 6.0147 3.2611L10.2442 11.5048C11.5301 14.0113 11.5683 16.9754 10.3472 19.5141L5.9766 28.6007C4.9772 30.6786 2.8754 32 0.5696 32H0.285645V0Z\"></path></svg>') right / .75rem 100% no-repeat,linear-gradient(#000,#000) left / calc(100% - .7rem) 100% no-repeat}.t-cell[data-range]:before{background:var(--tui-background-neutral-1)}:host._picking .t-cell[data-range]:before{background:var(--tui-background-neutral-1-hover)}.t-cell[data-range=middle]{border-color:var(--tui-background-neutral-1)}:host._picking .t-cell[data-range=middle]{border-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=middle]:not(:first-child):before{border-top-left-radius:0;border-bottom-left-radius:0}.t-cell[data-range=middle]:not(:last-child):before{border-top-right-radius:0;border-bottom-right-radius:0}.t-cell[data-range=start]{border-inline-end-color:var(--tui-background-neutral-1);color:var(--tui-text-primary-on-accent-1)}:host._picking .t-cell[data-range=start]{border-inline-end-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=start]:not(:last-child):before{right:-1rem}.t-cell[data-range=start]:after{background:var(--tui-background-accent-1)}.t-cell[data-range=end]{border-inline-start-color:var(--tui-background-neutral-1);color:var(--tui-text-primary-on-accent-1)}:host._picking .t-cell[data-range=end]{border-inline-start-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=end]:not(:first-child):before{left:-1rem}.t-cell[data-range=end]:after{background:var(--tui-background-accent-1);transform:scaleX(-1)}.t-cell[data-range=active]{color:var(--tui-text-primary-on-accent-1)}.t-cell[data-range=active]:after{background:var(--tui-background-accent-1);mask:none}.t-cell_disabled{opacity:var(--tui-disabled-opacity);pointer-events:none}.t-cell_today{text-decoration:underline;text-underline-offset:.25rem}@media (hover: hover) and (pointer: fine){.t-cell:hover:not([data-range=start]):not([data-range=end]):before{background:var(--tui-background-neutral-1-hover)}.t-cell[data-range=start]:hover:after,.t-cell[data-range=end]:hover:after,.t-cell[data-range=active]:hover:after{background:var(--tui-background-accent-1-hover)}}.t-cell{inline-size:calc(100% / 7)}[data-type=weekday]{color:var(--tui-text-primary)}[data-type=weekend]{color:var(--tui-text-negative)}.t-row{justify-content:flex-start}.t-row:first-child{justify-content:flex-end}.t-row_weekday{font:var(--tui-font-body-s);color:var(--tui-text-secondary);pointer-events:none}.t-cell_unavailable{opacity:var(--tui-disabled-opacity)}.t-dots{position:absolute;bottom:0;display:flex;justify-content:center;margin-block-start:-.5rem;padding-block-end:.25rem}.t-dot{display:inline-block;inline-size:.25rem;block-size:.25rem;border-radius:100%;margin:0 .0625rem}\n"] }]
-        }], propDecorators: { month: [{
-                type: Input
-            }], disabledItemHandler: [{
-                type: Input
-            }], markerHandler: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], hoveredItem: [{
-                type: Input
-            }], showAdjacent: [{
-                type: Input
-            }], single: [{
-                type: Input
-            }], hoveredItemChange: [{
-                type: Output
-            }], dayClick: [{
-                type: Output
-            }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class._picking]': 'isRangePicking' }, template: "<div class=\"t-row t-row_weekday\">\n    @for (day of unorderedWeekDays$ | tuiOrderWeekDays | async; track day) {\n        <div\n            class=\"t-cell\"\n            [textContent]=\"day\"\n        ></div>\n    }\n</div>\n@let sheet = month() | tuiCalendarSheet: true;\n<div>\n    @for (_ of '-'.repeat(sheet.length); track $index) {\n        @let rowIndex = $index;\n        <div\n            automation-id=\"tui-calendar-sheet__row\"\n            class=\"t-row\"\n        >\n            @for (_ of '-'.repeat(sheet[rowIndex]?.length ?? 0); track $index) {\n                @let item = sheet[rowIndex]?.[$index];\n                @if (item && (!itemIsUnavailable(item) || showAdjacent())) {\n                    <div\n                        automation-id=\"tui-calendar-sheet__cell\"\n                        class=\"t-cell\"\n                        [attr.data-range]=\"getItemRange(item)\"\n                        [attr.data-type]=\"item | tuiMapper: dayType\"\n                        [class.t-cell_disabled]=\"disabledItemHandler()(item)\"\n                        [class.t-cell_today]=\"itemIsToday(item)\"\n                        [class.t-cell_unavailable]=\"itemIsUnavailable(item)\"\n                        (click)=\"dayClick.emit(item)\"\n                        (tuiHoveredChange)=\"onItemHovered($event && item)\"\n                    >\n                        {{ item.day }}\n                        @if (\n                            item | tuiMapper: toMarkers : itemIsToday(item) : getItemRange(item) : markerHandler();\n                            as markers\n                        ) {\n                            <div class=\"t-dots\">\n                                <div\n                                    class=\"t-dot\"\n                                    [style.background]=\"markers?.[0]\"\n                                ></div>\n                                @if (markers.length > 1) {\n                                    <div\n                                        class=\"t-dot\"\n                                        [style.background]=\"markers?.[1] || ''\"\n                                    ></div>\n                                }\n                            </div>\n                        }\n                    </div>\n                }\n            }\n        </div>\n    }\n</div>\n", styles: [".t-row{display:flex;justify-content:flex-start;font:var(--tui-typography-body-m)}.t-row:last-child{justify-content:flex-start}.t-cell{position:relative;display:flex;align-items:center;justify-content:center;line-height:2rem;isolation:isolate;cursor:pointer;overflow:hidden;border:.125rem solid transparent;box-sizing:border-box;mask:linear-gradient(transparent calc(50% - 1rem),#000 calc(50% - 1rem),#000 calc(50% + 1rem),transparent calc(50% + 1rem))}.t-cell:first-child{border-inline-start-color:transparent!important}.t-cell:last-child{border-inline-end-color:transparent!important}.t-cell:before,.t-cell:after{position:absolute;inset-block-start:0;inset-inline-start:0;inset-block-end:0;inset-inline-end:0;content:\"\";z-index:-1;border-radius:var(--tui-radius-m)}.t-cell:after{mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 32\"><path d=\"M0.2856 0L0.6763 0C2.9265 0 4.9876 1.259 6.0147 3.2611L10.2442 11.5048C11.5301 14.0113 11.5683 16.9754 10.3472 19.5141L5.9766 28.6007C4.9772 30.6786 2.8754 32 0.5696 32H0.285645V0Z\"></path></svg>') right / .75rem 100% no-repeat,linear-gradient(#000,#000) left / calc(100% - .7rem) 100% no-repeat}.t-cell[data-range]:before{background:var(--tui-background-neutral-1)}:host._picking .t-cell[data-range]:before{background:var(--tui-background-neutral-1-hover)}.t-cell[data-range=middle]{border-color:var(--tui-background-neutral-1)}:host._picking .t-cell[data-range=middle]{border-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=middle]:not(:first-child):before{border-top-left-radius:0;border-bottom-left-radius:0}.t-cell[data-range=middle]:not(:last-child):before{border-top-right-radius:0;border-bottom-right-radius:0}.t-cell[data-range=start]{border-inline-end-color:var(--tui-background-neutral-1);color:var(--tui-text-primary-on-accent-1)}:host._picking .t-cell[data-range=start]{border-inline-end-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=start]:not(:last-child):before{inset-inline-end:-1rem}.t-cell[data-range=start]:after{background:var(--tui-background-accent-1)}.t-cell[data-range=end]{border-inline-start-color:var(--tui-background-neutral-1);color:var(--tui-text-primary-on-accent-1)}:host._picking .t-cell[data-range=end]{border-inline-start-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=end]:not(:first-child):before{inset-inline-start:-1rem}.t-cell[data-range=end]:after{background:var(--tui-background-accent-1);transform:scaleX(-1)}.t-cell[data-range=active]{color:var(--tui-text-primary-on-accent-1)}.t-cell[data-range=active]:after{background:var(--tui-background-accent-1);mask:none}.t-cell_disabled{opacity:var(--tui-disabled-opacity);pointer-events:none}.t-cell_today{text-decoration:underline;text-underline-offset:.25rem}@media (hover: hover) and (pointer: fine){.t-cell:hover:not([data-range=start]):not([data-range=end]):before{background:var(--tui-background-neutral-1-hover)}.t-cell[data-range=start]:hover:after,.t-cell[data-range=end]:hover:after,.t-cell[data-range=active]:hover:after{background:var(--tui-background-accent-1-hover)}}.t-cell{inline-size:calc(100% / 7)}[data-type=weekday]{color:var(--tui-text-primary)}[data-type=weekend]{color:var(--tui-text-negative)}.t-row{justify-content:flex-start}.t-row:first-child{justify-content:flex-end}.t-row_weekday{font:var(--tui-typography-body-s);color:var(--tui-text-secondary);pointer-events:none}.t-cell_unavailable{opacity:var(--tui-disabled-opacity)}.t-dots{position:absolute;display:flex;inset-block-end:0;justify-content:center;margin-block-start:-.5rem;padding-block-end:.25rem}.t-dot{display:inline-block;inline-size:.25rem;block-size:.25rem;border-radius:100%;margin:0 .0625rem}\n"] }]
+        }] });
 
 class TuiCalendarSpin {
     constructor() {
         this.months = inject(TUI_MONTHS);
-        this.value = TuiMonth.currentLocal();
-        this.min = TUI_FIRST_DAY;
-        this.max = TUI_LAST_DAY;
-        this.valueChange = new EventEmitter();
-        this.yearClick = new EventEmitter();
-    }
-    onYearClick() {
-        this.yearClick.next(this.value);
+        this.value = model(TuiMonth.currentLocal());
+        this.min = input(TUI_FIRST_DAY);
+        this.max = input(TUI_LAST_DAY);
+        this.yearClick = output();
     }
     append(date) {
-        const value = this.value.append(date);
-        if (this.min.monthSameOrAfter(value)) {
-            this.updateValue(this.min);
+        const value = this.value().append(date);
+        const min = this.min();
+        const max = this.max();
+        if (min.monthSameOrAfter(value)) {
+            this.updateValue(min);
         }
         else {
-            this.updateValue(this.max.monthSameOrBefore(value) ? this.max : value);
+            this.updateValue(max.monthSameOrBefore(value) ? max : value);
         }
     }
     updateValue(value) {
-        if (this.value.monthSame(value)) {
+        if (this.value().monthSame(value)) {
             return;
         }
-        this.value = value;
-        this.valueChange.emit(value);
+        this.value.set(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiCalendarSpin, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TuiCalendarSpin, isStandalone: true, selector: "tui-calendar-spin", inputs: { value: "value", min: "min", max: "max" }, outputs: { valueChange: "valueChange", yearClick: "yearClick" }, ngImport: i0, template: "<tui-spin-button\n    [focusable]=\"false\"\n    [leftDisabled]=\"value.monthSameOrBefore(min)\"\n    [rightDisabled]=\"value.monthSameOrAfter(max)\"\n    (leftClick)=\"append({month: -1})\"\n    (rightClick)=\"append({month: 1})\"\n>\n    {{ months()[value.month] }}\n    @if (min.year === max.year) {\n        {{ value.formattedYear }}\n    } @else {\n        <button\n            tabIndex=\"-1\"\n            tuiLink\n            type=\"button\"\n            (click)=\"onYearClick()\"\n        >\n            {{ value.formattedYear }}\n        </button>\n    }\n</tui-spin-button>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }, { kind: "component", type: TuiSpinButton, selector: "tui-spin-button", inputs: ["focusable", "disabled", "leftDisabled", "rightDisabled"], outputs: ["leftClick", "rightClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TuiCalendarSpin, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: TuiCalendarSpin, isStandalone: true, selector: "tui-calendar-spin", inputs: { value: { classPropertyName: "value", publicName: "value", 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 } }, outputs: { value: "valueChange", yearClick: "yearClick" }, ngImport: i0, template: "<tui-spin-button\n    [focusable]=\"false\"\n    [leftDisabled]=\"value().monthSameOrBefore(min())\"\n    [rightDisabled]=\"value().monthSameOrAfter(max())\"\n    (leftClick)=\"append({month: -1})\"\n    (rightClick)=\"append({month: 1})\"\n>\n    {{ months()[value().month] }}\n    @if (min().year === max().year) {\n        {{ value().formattedYear }}\n    } @else {\n        <button\n            tabIndex=\"-1\"\n            tuiLink\n            type=\"button\"\n            (click)=\"yearClick.emit(value())\"\n        >\n            {{ value().formattedYear }}\n        </button>\n    }\n</tui-spin-button>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }, { kind: "component", type: TuiSpinButton, selector: "tui-spin-button", inputs: ["focusable", "disabled", "leftDisabled", "rightDisabled"], outputs: ["leftClick", "rightClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiCalendarSpin, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TuiCalendarSpin, decorators: [{
             type: Component,
-            args: [{ selector: 'tui-calendar-spin', imports: [TuiLink, TuiSpinButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "<tui-spin-button\n    [focusable]=\"false\"\n    [leftDisabled]=\"value.monthSameOrBefore(min)\"\n    [rightDisabled]=\"value.monthSameOrAfter(max)\"\n    (leftClick)=\"append({month: -1})\"\n    (rightClick)=\"append({month: 1})\"\n>\n    {{ months()[value.month] }}\n    @if (min.year === max.year) {\n        {{ value.formattedYear }}\n    } @else {\n        <button\n            tabIndex=\"-1\"\n            tuiLink\n            type=\"button\"\n            (click)=\"onYearClick()\"\n        >\n            {{ value.formattedYear }}\n        </button>\n    }\n</tui-spin-button>\n", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { value: [{
-                type: Input
-            }], min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], yearClick: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'tui-calendar-spin', imports: [TuiLink, TuiSpinButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "<tui-spin-button\n    [focusable]=\"false\"\n    [leftDisabled]=\"value().monthSameOrBefore(min())\"\n    [rightDisabled]=\"value().monthSameOrAfter(max())\"\n    (leftClick)=\"append({month: -1})\"\n    (rightClick)=\"append({month: 1})\"\n>\n    {{ months()[value().month] }}\n    @if (min().year === max().year) {\n        {{ value().formattedYear }}\n    } @else {\n        <button\n            tabIndex=\"-1\"\n            tuiLink\n            type=\"button\"\n            (click)=\"yearClick.emit(value())\"\n        >\n            {{ value().formattedYear }}\n        </button>\n    }\n</tui-spin-button>\n", styles: [":host{display:block}\n"] }]
+        }] });
 
 const LIMIT = 100;
 const ITEMS_IN_ROW = 4;
@@ -323,35 +256,36 @@ const CURRENT_YEAR = TuiMonth.currentLocal().year;
 class TuiCalendarYear {
     constructor() {
         this.hoveredItem = signal(null);
-        this.isRangePicking = computed((x = this.value()) => this.rangeMode && (x instanceof TuiDay || x instanceof TuiMonth));
-        this.rangeMode = false;
-        this.disabledItemHandler = inject(TUI_ITEMS_HANDLERS).disabledItemHandler();
-        this.yearClick = new EventEmitter();
-        this.initialItem = signal(CURRENT_YEAR);
-        this.min = signal(MIN_YEAR);
-        this.max = signal(MAX_YEAR);
-        this.value = signal(null);
-    }
-    // TODO(v5): use signal inputs
-    set initialItemSetter(x) {
-        this.initialItem.set(x ?? CURRENT_YEAR);
-    }
-    // TODO(v5): use signal inputs
-    set minSetter(x) {
-        this.min.set(x);
-    }
-    // TODO(v5): use signal inputs
-    set maxSetter(x) {
-        this.max.set(x);
-    }
-    // TODO(v5): use signal inputs
-    set valueSetter(x) {
-        this.value.set(x);
+        this.calculatedMin = computed(() => {
+            const initial = this.initialItem() - LIMIT;
+            const min = this.min() ?? MIN_YEAR;
+            return min > initial ? min : initial;
+        });
+        this.calculatedMax = computed(() => {
+            const initial = this.initialItem() + LIMIT;
+            const max = this.max() ?? MAX_YEAR;
+            return max < initial ? max + 1 : initial;
+        });
+        this.isRangePicking = computed((x = this.value()) => this.rangeMode() && (x instanceof TuiDay || x instanceof TuiMonth));
+        this.rows = computed(() => Math.ceil((this.calculatedMax() - this.calculatedMin()) / ITEMS_IN_ROW));
+        this.rangeMode = input(false);
+        this.disabledItemHandler = input(inject(TUI_ITEMS_HANDLERS).disabledItemHandler());
+        this.value = input(null);
+        this.min = input(MIN_YEAR, {
+            transform: (x) => x ?? MIN_YEAR,
+        });
+        this.max = input(MAX_YEAR, {
+            transform: (x) => x ?? MAX_YEAR,
+        });
+        this.initialItem = input(CURRENT_YEAR, {
+            transform: (x) => x ?? CURRENT_YEAR,
+        });
+        this.yearClick = output();
     }
     isDisabled(item) {
         return ((this.max() && this.max() < item) ||
             (this.min() && this.min() > item) ||
-            this.disabledItemHandler(item));
+            this.disabledItemHandler()(item));
     }
     getItemRange(item) {
         const value = this.value();
@@ -384,145 +318,93 @@ class TuiCalendarYear {
     onItemHovered(hovered, item) {
         this.hoveredItem.set(hovered ? item : null);
     }
-    get rows() {
-        return Math.ceil((this.calculatedMax - this.calculatedMin) / ITEMS_IN_ROW);
-    }
     scrollItemIntoView(item) {
         return this.initialItem() === item;
     }
     getItem(rowIndex, colIndex) {
-        return rowIndex * ITEMS_IN_ROW + colIndex + this.calculatedMin;
+        return rowIndex * ITEMS_IN_ROW + colIndex + this.calculatedMin();
     }
     itemIsToday(item) {
         return CURRENT_YEAR === item;
     }
-    get calculatedMin() {
-        const initial = this.initialItem() - LIMIT;
-        const min = this.min() ?? MIN_YEAR;
-        return min > initial ? min : initial;
-    }
-    get calculatedMax() {
-        const initial = this.initialItem() + LIMIT;
-        const max = this.max() ?? MAX_YEAR;
-        return max < initial ? max + 1 : initial;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiCalendarYear, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TuiCalendarYear, isStandalone: true, selector: "tui-calendar-year", inputs: { rangeMode: "rangeMode", disabledItemHandler: "disabledItemHandler", initialItemSetter: ["initialItem", "initialItemSetter", (x) => x ?? CURRENT_YEAR], minSetter: ["min", "minSetter", (x) => x ?? MIN_YEAR], maxSetter: ["max", "maxSetter", (x) => x ?? MAX_YEAR], valueSetter: ["value", "valueSetter"] }, outputs: { yearClick: "yearClick" }, host: { properties: { "class._picking": "isRangePicking()" } }, providers: [tuiAsAuxiliary(TuiCalendarYear)], ngImport: i0, template: "@for (_ of '-'.repeat(rows); track $index) {\n    @let rowIndex = $index;\n    <div\n        automation-id=\"tui-calendar-year__row\"\n        class=\"t-row\"\n    >\n        @for (_ of '-'.repeat(4); track $index) {\n            @let item = getItem(rowIndex, $index);\n            <div\n                automation-id=\"tui-calendar-year__cell\"\n                class=\"t-cell\"\n                [attr.data-range]=\"getItemRange(item)\"\n                [class.t-cell_disabled]=\"isDisabled(item)\"\n                [class.t-cell_today]=\"itemIsToday(item)\"\n                [tuiScrollIntoView]=\"scrollItemIntoView(item)\"\n                (click)=\"yearClick.emit(item)\"\n                (tuiHoveredChange)=\"onItemHovered($event, item)\"\n            >\n                {{ item }}\n            </div>\n        }\n    </div>\n}\n", styles: [".t-row{display:flex;justify-content:flex-start;font:var(--tui-font-body-m)}.t-row:first-child{justify-content:flex-end}.t-row:last-child{justify-content:flex-start}.t-cell{position:relative;display:flex;align-items:center;justify-content:center;line-height:2rem;isolation:isolate;cursor:pointer;overflow:hidden;border:.125rem solid transparent;box-sizing:border-box;mask:linear-gradient(transparent calc(50% - 1rem),#000 calc(50% - 1rem),#000 calc(50% + 1rem),transparent calc(50% + 1rem))}.t-cell:first-child{border-inline-start-color:transparent!important}.t-cell:last-child{border-inline-end-color:transparent!important}.t-cell:before,.t-cell:after{position:absolute;inset:0;content:\"\";z-index:-1;border-radius:var(--tui-radius-m)}.t-cell:after{mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 32\"><path d=\"M0.2856 0L0.6763 0C2.9265 0 4.9876 1.259 6.0147 3.2611L10.2442 11.5048C11.5301 14.0113 11.5683 16.9754 10.3472 19.5141L5.9766 28.6007C4.9772 30.6786 2.8754 32 0.5696 32H0.285645V0Z\"></path></svg>') right / .75rem 100% no-repeat,linear-gradient(#000,#000) left / calc(100% - .7rem) 100% no-repeat}.t-cell[data-range]:before{background:var(--tui-background-neutral-1)}:host._picking .t-cell[data-range]:before{background:var(--tui-background-neutral-1-hover)}.t-cell[data-range=middle]{border-color:var(--tui-background-neutral-1)}:host._picking .t-cell[data-range=middle]{border-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=middle]:not(:first-child):before{border-top-left-radius:0;border-bottom-left-radius:0}.t-cell[data-range=middle]:not(:last-child):before{border-top-right-radius:0;border-bottom-right-radius:0}.t-cell[data-range=start]{border-inline-end-color:var(--tui-background-neutral-1);color:var(--tui-text-primary-on-accent-1)}:host._picking .t-cell[data-range=start]{border-inline-end-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=start]:not(:last-child):before{right:-1rem}.t-cell[data-range=start]:after{background:var(--tui-background-accent-1)}.t-cell[data-range=end]{border-inline-start-color:var(--tui-background-neutral-1);color:var(--tui-text-primary-on-accent-1)}:host._picking .t-cell[data-range=end]{border-inline-start-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=end]:not(:first-child):before{left:-1rem}.t-cell[data-range=end]:after{background:var(--tui-background-accent-1);transform:scaleX(-1)}.t-cell[data-range=active]{color:var(--tui-text-primary-on-accent-1)}.t-cell[data-range=active]:after{background:var(--tui-background-accent-1);mask:none}.t-cell_disabled{opacity:var(--tui-disabled-opacity);pointer-events:none}.t-cell_today{text-decoration:underline;text-underline-offset:.25rem}@media (hover: hover) and (pointer: fine){.t-cell:hover:not([data-range=start]):not([data-range=end]):before{background:var(--tui-background-neutral-1-hover)}.t-cell[data-range=start]:hover:after,.t-cell[data-range=end]:hover:after,.t-cell[data-range=active]:hover:after{background:var(--tui-background-accent-1-hover)}}:host{display:block;padding-inline-end:1rem;inline-size:15.75rem;padding:0 1.125rem}.t-cell{flex:1;border-block-start-width:.5rem;border-block-end-width:.5rem}\n"], dependencies: [{ kind: "directive", type: TuiHovered, selector: "[tuiHoveredChange]", outputs: ["tuiHoveredChange"] }, { kind: "directive", type: TuiScrollIntoView, selector: "[tuiScrollIntoView]", inputs: ["tuiScrollIntoView"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TuiCalendarYear, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: TuiCalendarYear, isStandalone: true, selector: "tui-calendar-year", inputs: { rangeMode: { classPropertyName: "rangeMode", publicName: "rangeMode", 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 }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, initialItem: { classPropertyName: "initialItem", publicName: "initialItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { yearClick: "yearClick" }, host: { properties: { "class._picking": "isRangePicking()" } }, providers: [tuiAsAuxiliary(TuiCalendarYear)], ngImport: i0, template: "@for (_ of '-'.repeat(rows()); track $index) {\n    @let rowIndex = $index;\n    <div\n        automation-id=\"tui-calendar-year__row\"\n        class=\"t-row\"\n    >\n        @for (_ of '-'.repeat(4); track $index) {\n            @let item = getItem(rowIndex, $index);\n            <div\n                automation-id=\"tui-calendar-year__cell\"\n                class=\"t-cell\"\n                [attr.data-range]=\"getItemRange(item)\"\n                [class.t-cell_disabled]=\"isDisabled(item)\"\n                [class.t-cell_today]=\"itemIsToday(item)\"\n                [tuiScrollIntoView]=\"scrollItemIntoView(item)\"\n                (click)=\"yearClick.emit(item)\"\n                (tuiHoveredChange)=\"onItemHovered($event, item)\"\n            >\n                {{ item }}\n            </div>\n        }\n    </div>\n}\n", styles: [".t-row{display:flex;justify-content:flex-start;font:var(--tui-typography-body-m)}.t-row:first-child{justify-content:flex-end}.t-row:last-child{justify-content:flex-start}.t-cell{position:relative;display:flex;align-items:center;justify-content:center;line-height:2rem;isolation:isolate;cursor:pointer;overflow:hidden;border:.125rem solid transparent;box-sizing:border-box;mask:linear-gradient(transparent calc(50% - 1rem),#000 calc(50% - 1rem),#000 calc(50% + 1rem),transparent calc(50% + 1rem))}.t-cell:first-child{border-inline-start-color:transparent!important}.t-cell:last-child{border-inline-end-color:transparent!important}.t-cell:before,.t-cell:after{position:absolute;inset-block-start:0;inset-inline-start:0;inset-block-end:0;inset-inline-end:0;content:\"\";z-index:-1;border-radius:var(--tui-radius-m)}.t-cell:after{mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 32\"><path d=\"M0.2856 0L0.6763 0C2.9265 0 4.9876 1.259 6.0147 3.2611L10.2442 11.5048C11.5301 14.0113 11.5683 16.9754 10.3472 19.5141L5.9766 28.6007C4.9772 30.6786 2.8754 32 0.5696 32H0.285645V0Z\"></path></svg>') right / .75rem 100% no-repeat,linear-gradient(#000,#000) left / calc(100% - .7rem) 100% no-repeat}.t-cell[data-range]:before{background:var(--tui-background-neutral-1)}:host._picking .t-cell[data-range]:before{background:var(--tui-background-neutral-1-hover)}.t-cell[data-range=middle]{border-color:var(--tui-background-neutral-1)}:host._picking .t-cell[data-range=middle]{border-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=middle]:not(:first-child):before{border-top-left-radius:0;border-bottom-left-radius:0}.t-cell[data-range=middle]:not(:last-child):before{border-top-right-radius:0;border-bottom-right-radius:0}.t-cell[data-range=start]{border-inline-end-color:var(--tui-background-neutral-1);color:var(--tui-text-primary-on-accent-1)}:host._picking .t-cell[data-range=start]{border-inline-end-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=start]:not(:last-child):before{inset-inline-end:-1rem}.t-cell[data-range=start]:after{background:var(--tui-background-accent-1)}.t-cell[data-range=end]{border-inline-start-color:var(--tui-background-neutral-1);color:var(--tui-text-primary-on-accent-1)}:host._picking .t-cell[data-range=end]{border-inline-start-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=end]:not(:first-child):before{inset-inline-start:-1rem}.t-cell[data-range=end]:after{background:var(--tui-background-accent-1);transform:scaleX(-1)}.t-cell[data-range=active]{color:var(--tui-text-primary-on-accent-1)}.t-cell[data-range=active]:after{background:var(--tui-background-accent-1);mask:none}.t-cell_disabled{opacity:var(--tui-disabled-opacity);pointer-events:none}.t-cell_today{text-decoration:underline;text-underline-offset:.25rem}@media (hover: hover) and (pointer: fine){.t-cell:hover:not([data-range=start]):not([data-range=end]):before{background:var(--tui-background-neutral-1-hover)}.t-cell[data-range=start]:hover:after,.t-cell[data-range=end]:hover:after,.t-cell[data-range=active]:hover:after{background:var(--tui-background-accent-1-hover)}}:host{display:block;padding-inline-end:1rem;inline-size:15.75rem;padding:0 1.125rem}.t-cell{flex:1;border-block-start-width:.5rem;border-block-end-width:.5rem}\n"], dependencies: [{ kind: "directive", type: TuiHovered, selector: "[tuiHoveredChange]", outputs: ["tuiHoveredChange"] }, { kind: "directive", type: TuiScrollIntoView, selector: "[tuiScrollIntoView]", inputs: ["tuiScrollIntoView"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiCalendarYear, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TuiCalendarYear, decorators: [{
             type: Component,
-            args: [{ selector: 'tui-calendar-year', imports: [TuiHovered, TuiScrollIntoView], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiAsAuxiliary(TuiCalendarYear)], host: { '[class._picking]': 'isRangePicking()' }, template: "@for (_ of '-'.repeat(rows); track $index) {\n    @let rowIndex = $index;\n    <div\n        automation-id=\"tui-calendar-year__row\"\n        class=\"t-row\"\n    >\n        @for (_ of '-'.repeat(4); track $index) {\n            @let item = getItem(rowIndex, $index);\n            <div\n                automation-id=\"tui-calendar-year__cell\"\n                class=\"t-cell\"\n                [attr.data-range]=\"getItemRange(item)\"\n                [class.t-cell_disabled]=\"isDisabled(item)\"\n                [class.t-cell_today]=\"itemIsToday(item)\"\n                [tuiScrollIntoView]=\"scrollItemIntoView(item)\"\n                (click)=\"yearClick.emit(item)\"\n                (tuiHoveredChange)=\"onItemHovered($event, item)\"\n            >\n                {{ item }}\n            </div>\n        }\n    </div>\n}\n", styles: [".t-row{display:flex;justify-content:flex-start;font:var(--tui-font-body-m)}.t-row:first-child{justify-content:flex-end}.t-row:last-child{justify-content:flex-start}.t-cell{position:relative;display:flex;align-items:center;justify-content:center;line-height:2rem;isolation:isolate;cursor:pointer;overflow:hidden;border:.125rem solid transparent;box-sizing:border-box;mask:linear-gradient(transparent calc(50% - 1rem),#000 calc(50% - 1rem),#000 calc(50% + 1rem),transparent calc(50% + 1rem))}.t-cell:first-child{border-inline-start-color:transparent!important}.t-cell:last-child{border-inline-end-color:transparent!important}.t-cell:before,.t-cell:after{position:absolute;inset:0;content:\"\";z-index:-1;border-radius:var(--tui-radius-m)}.t-cell:after{mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 32\"><path d=\"M0.2856 0L0.6763 0C2.9265 0 4.9876 1.259 6.0147 3.2611L10.2442 11.5048C11.5301 14.0113 11.5683 16.9754 10.3472 19.5141L5.9766 28.6007C4.9772 30.6786 2.8754 32 0.5696 32H0.285645V0Z\"></path></svg>') right / .75rem 100% no-repeat,linear-gradient(#000,#000) left / calc(100% - .7rem) 100% no-repeat}.t-cell[data-range]:before{background:var(--tui-background-neutral-1)}:host._picking .t-cell[data-range]:before{background:var(--tui-background-neutral-1-hover)}.t-cell[data-range=middle]{border-color:var(--tui-background-neutral-1)}:host._picking .t-cell[data-range=middle]{border-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=middle]:not(:first-child):before{border-top-left-radius:0;border-bottom-left-radius:0}.t-cell[data-range=middle]:not(:last-child):before{border-top-right-radius:0;border-bottom-right-radius:0}.t-cell[data-range=start]{border-inline-end-color:var(--tui-background-neutral-1);color:var(--tui-text-primary-on-accent-1)}:host._picking .t-cell[data-range=start]{border-inline-end-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=start]:not(:last-child):before{right:-1rem}.t-cell[data-range=start]:after{background:var(--tui-background-accent-1)}.t-cell[data-range=end]{border-inline-start-color:var(--tui-background-neutral-1);color:var(--tui-text-primary-on-accent-1)}:host._picking .t-cell[data-range=end]{border-inline-start-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=end]:not(:first-child):before{left:-1rem}.t-cell[data-range=end]:after{background:var(--tui-background-accent-1);transform:scaleX(-1)}.t-cell[data-range=active]{color:var(--tui-text-primary-on-accent-1)}.t-cell[data-range=active]:after{background:var(--tui-background-accent-1);mask:none}.t-cell_disabled{opacity:var(--tui-disabled-opacity);pointer-events:none}.t-cell_today{text-decoration:underline;text-underline-offset:.25rem}@media (hover: hover) and (pointer: fine){.t-cell:hover:not([data-range=start]):not([data-range=end]):before{background:var(--tui-background-neutral-1-hover)}.t-cell[data-range=start]:hover:after,.t-cell[data-range=end]:hover:after,.t-cell[data-range=active]:hover:after{background:var(--tui-background-accent-1-hover)}}:host{display:block;padding-inline-end:1rem;inline-size:15.75rem;padding:0 1.125rem}.t-cell{flex:1;border-block-start-width:.5rem;border-block-end-width:.5rem}\n"] }]
-        }], propDecorators: { rangeMode: [{
-                type: Input
-            }], disabledItemHandler: [{
-                type: Input
-            }], yearClick: [{
-                type: Output
-            }], initialItemSetter: [{
-                type: Input,
-                args: [{ alias: 'initialItem', transform: (x) => x ?? CURRENT_YEAR }]
-            }], minSetter: [{
-                type: Input,
-                args: [{ alias: 'min', transform: (x) => x ?? MIN_YEAR }]
-            }], maxSetter: [{
-                type: Input,
-                args: [{ alias: 'max', transform: (x) => x ?? MAX_YEAR }]
-            }], valueSetter: [{
-                type: Input,
-                args: ['value']
-            }] } });
+            args: [{ selector: 'tui-calendar-year', imports: [TuiHovered, TuiScrollIntoView], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiAsAuxiliary(TuiCalendarYear)], host: { '[class._picking]': 'isRangePicking()' }, template: "@for (_ of '-'.repeat(rows()); track $index) {\n    @let rowIndex = $index;\n    <div\n        automation-id=\"tui-calendar-year__row\"\n        class=\"t-row\"\n    >\n        @for (_ of '-'.repeat(4); track $index) {\n            @let item = getItem(rowIndex, $index);\n            <div\n                automation-id=\"tui-calendar-year__cell\"\n                class=\"t-cell\"\n                [attr.data-range]=\"getItemRange(item)\"\n                [class.t-cell_disabled]=\"isDisabled(item)\"\n                [class.t-cell_today]=\"itemIsToday(item)\"\n                [tuiScrollIntoView]=\"scrollItemIntoView(item)\"\n                (click)=\"yearClick.emit(item)\"\n                (tuiHoveredChange)=\"onItemHovered($event, item)\"\n            >\n                {{ item }}\n            </div>\n        }\n    </div>\n}\n", styles: [".t-row{display:flex;justify-content:flex-start;font:var(--tui-typography-body-m)}.t-row:first-child{justify-content:flex-end}.t-row:last-child{justify-content:flex-start}.t-cell{position:relative;display:flex;align-items:center;justify-content:center;line-height:2rem;isolation:isolate;cursor:pointer;overflow:hidden;border:.125rem solid transparent;box-sizing:border-box;mask:linear-gradient(transparent calc(50% - 1rem),#000 calc(50% - 1rem),#000 calc(50% + 1rem),transparent calc(50% + 1rem))}.t-cell:first-child{border-inline-start-color:transparent!important}.t-cell:last-child{border-inline-end-color:transparent!important}.t-cell:before,.t-cell:after{position:absolute;inset-block-start:0;inset-inline-start:0;inset-block-end:0;inset-inline-end:0;content:\"\";z-index:-1;border-radius:var(--tui-radius-m)}.t-cell:after{mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 32\"><path d=\"M0.2856 0L0.6763 0C2.9265 0 4.9876 1.259 6.0147 3.2611L10.2442 11.5048C11.5301 14.0113 11.5683 16.9754 10.3472 19.5141L5.9766 28.6007C4.9772 30.6786 2.8754 32 0.5696 32H0.285645V0Z\"></path></svg>') right / .75rem 100% no-repeat,linear-gradient(#000,#000) left / calc(100% - .7rem) 100% no-repeat}.t-cell[data-range]:before{background:var(--tui-background-neutral-1)}:host._picking .t-cell[data-range]:before{background:var(--tui-background-neutral-1-hover)}.t-cell[data-range=middle]{border-color:var(--tui-background-neutral-1)}:host._picking .t-cell[data-range=middle]{border-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=middle]:not(:first-child):before{border-top-left-radius:0;border-bottom-left-radius:0}.t-cell[data-range=middle]:not(:last-child):before{border-top-right-radius:0;border-bottom-right-radius:0}.t-cell[data-range=start]{border-inline-end-color:var(--tui-background-neutral-1);color:var(--tui-text-primary-on-accent-1)}:host._picking .t-cell[data-range=start]{border-inline-end-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=start]:not(:last-child):before{inset-inline-end:-1rem}.t-cell[data-range=start]:after{background:var(--tui-background-accent-1)}.t-cell[data-range=end]{border-inline-start-color:var(--tui-background-neutral-1);color:var(--tui-text-primary-on-accent-1)}:host._picking .t-cell[data-range=end]{border-inline-start-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=end]:not(:first-child):before{inset-inline-start:-1rem}.t-cell[data-range=end]:after{background:var(--tui-background-accent-1);transform:scaleX(-1)}.t-cell[data-range=active]{color:var(--tui-text-primary-on-accent-1)}.t-cell[data-range=active]:after{background:var(--tui-background-accent-1);mask:none}.t-cell_disabled{opacity:var(--tui-disabled-opacity);pointer-events:none}.t-cell_today{text-decoration:underline;text-underline-offset:.25rem}@media (hover: hover) and (pointer: fine){.t-cell:hover:not([data-range=start]):not([data-range=end]):before{background:var(--tui-background-neutral-1-hover)}.t-cell[data-range=start]:hover:after,.t-cell[data-range=end]:hover:after,.t-cell[data-range=active]:hover:after{background:var(--tui-background-accent-1-hover)}}:host{display:block;padding-inline-end:1rem;inline-size:15.75rem;padding:0 1.125rem}.t-cell{flex:1;border-block-start-width:.5rem;border-block-end-width:.5rem}\n"] }]
+        }] });
 
 class TuiCalendar {
     constructor() {
-        this.cdr = inject(ChangeDetectorRef);
-        this.day = null;
-        this.view = 'month';
         this.options = inject(TUI_CALENDAR_SHEET_OPTIONS);
-        this.month = TuiMonth.currentLocal();
-        this.disabledItemHandler = inject(TUI_ITEMS_HANDLERS).disabledItemHandler();
-        this.min = TUI_FIRST_DAY;
-        this.max = TUI_LAST_DAY;
-        this.minViewedMonth = TUI_FIRST_DAY;
-        this.maxViewedMonth = TUI_LAST_DAY;
-        this.hoveredItem = null;
-        this.showAdjacent = true;
-        this.markerHandler = null;
-        this.dayClick = new EventEmitter();
-        this.monthChange = new EventEmitter();
-        this.hoveredItemChange = new EventEmitter();
-        /** @deprecated for private use only until Calendars are refactored */
-        this.valueChange = new Subject();
+        this.disabledItemHandler = input(inject(TUI_ITEMS_HANDLERS).disabledItemHandler());
+        this.min = input(TUI_FIRST_DAY, {
+            transform: (x) => x ?? TUI_FIRST_DAY,
+        });
+        this.max = input(TUI_LAST_DAY, {
+            transform: (x) => x ?? TUI_LAST_DAY,
+        });
+        this.minViewedMonth = input(TUI_FIRST_DAY);
+        this.maxViewedMonth = input(TUI_LAST_DAY);
+        this.showAdjacent = input(true);
+        this.markerHandler = input(null);
+        this.initialView = input('month');
+        this.month = model(TuiMonth.currentLocal());
+        this.hoveredItem = model(null);
+        this.value = model(null);
+        this.dayClick = output();
+        this.computedMinViewedMonth = computed(() => {
+            const min = this.min();
+            const minViewed = this.minViewedMonth() ?? TUI_FIRST_DAY;
+            return minViewed.monthSameOrAfter(min) ? minViewed : min;
+        });
+        this.computedMaxViewedMonth = computed(() => {
+            const max = this.max();
+            const maxViewed = this.maxViewedMonth() ?? TUI_LAST_DAY;
+            return maxViewed.monthSameOrBefore(max) ? maxViewed : max;
+        });
+        this.view = linkedSignal(() => this.initialView());
+        this.syncMonthFromValue = effect(() => {
+            const value = this.value();
+            if (this.showAdjacent() &&
+                value instanceof TuiDay &&
+                value.daySameOrBefore(TUI_LAST_DISPLAYED_DAY)) {
+                this.month.set(value);
+            }
+        });
         this.disabledItemHandlerMapper = (disabledItemHandler, min, max) => (item) => item.dayBefore(min) || item.dayAfter(max) || disabledItemHandler(item);
     }
-    set value(value) {
-        this.cdr.markForCheck();
-        this.day = value;
-        if (this.showAdjacent &&
-            value instanceof TuiDay &&
-            value.daySameOrBefore(TUI_LAST_DISPLAYED_DAY)) {
-            this.month = value;
-        }
-    }
-    set initialView(view) {
-        this.view = view;
-    }
-    get value() {
-        return this.day;
-    }
     onPaginationValueChange(month) {
         this.updateViewedMonth(month);
     }
     onDayClick(day) {
         this.dayClick.emit(day);
-        this.valueChange.next(day);
+        this.value.set(day);
     }
     onHoveredItemChange(day) {
         this.updateHoveredDay(day);
     }
-    get computedMin() {
-        return this.min ?? TUI_FIRST_DAY;
-    }
-    get computedMax() {
-        return this.max ?? TUI_LAST_DAY;
-    }
-    get computedMinViewedMonth() {
-        const min = this.computedMin;
-        const minViewed = this.minViewedMonth ?? TUI_FIRST_DAY;
-        return minViewed.monthSameOrAfter(min) ? minViewed : min;
-    }
-    get computedMaxViewedMonth() {
-        const max = this.computedMax;
-        const maxViewed = this.maxViewedMonth ?? TUI_LAST_DAY;
-        return maxViewed.monthSameOrBefore(max) ? maxViewed : max;
-    }
-    get isInYearView() {
-        return this.view === 'year';
-    }
-    onPaginationYearClick() {
-        this.view = 'year';
-    }
     onPickerYearClick(year) {
-        this.view = 'month';
-        this.updateViewedMonth(new TuiMonth(year, this.month.month));
+        this.view.set('month');
+        this.updateViewedMonth(new TuiMonth(year, this.month().month));
     }
     updateViewedMonth(month) {
-        if (this.month.monthSame(month)) {
+        if (this.month().monthSame(month)) {
             return;
         }
-        this.month = month;
-        this.monthChange.emit(month);
+        this.month.set(month);
     }
     updateHoveredDay(day) {
-        if (tuiNullableSame(this.hoveredItem, day, (a, b) => a.daySame(b))) {
+        if (tuiNullableSame(this.hoveredItem(), day, (a, b) => a.daySame(b))) {
             return;
         }
-        this.hoveredItem = day;
-        this.hoveredItemChange.emit(day);
+        this.hoveredItem.set(day);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TuiCalendar, isStandalone: true, selector: "tui-calendar", inputs: { month: "month", disabledItemHandler: "disabledItemHandler", min: "min", max: "max", minViewedMonth: "minViewedMonth", maxViewedMonth: "maxViewedMonth", hoveredItem: "hoveredItem", showAdjacent: "showAdjacent", markerHandler: "markerHandler", value: "value", initialView: "initialView" }, outputs: { dayClick: "dayClick", monthChange: "monthChange", hoveredItemChange: "hoveredItemChange" }, host: { listeners: { "pointerdown.prevent.zoneless": "0" } }, providers: [tuiAsAuxiliary(TuiCalendar)], ngImport: i0, template: "@if (isInYearView) {\n    <tui-scrollbar\n        automation-id=\"tui-calendar__scrollbar\"\n        class=\"t-scrollbar\"\n    >\n        <tui-calendar-year\n            automation-id=\"tui-calendar__year\"\n            [initialItem]=\"month.year\"\n            [max]=\"computedMax.year\"\n            [min]=\"computedMin.year\"\n            [rangeMode]=\"options.rangeMode\"\n            [value]=\"value\"\n            (yearClick)=\"onPickerYearClick($event)\"\n        />\n    </tui-scrollbar>\n} @else {\n    <tui-calendar-spin\n        automation-id=\"tui-calendar__pagination\"\n        class=\"t-pagination\"\n        [max]=\"computedMaxViewedMonth\"\n        [min]=\"computedMinViewedMonth\"\n        [value]=\"month\"\n        (valueChange)=\"onPaginationValueChange($event)\"\n        (yearClick)=\"onPaginationYearClick()\"\n    />\n    <tui-calendar-sheet\n        automation-id=\"tui-calendar__calendar\"\n        [disabledItemHandler]=\"disabledItemHandler | tuiMapper: disabledItemHandlerMapper : computedMin : computedMax\"\n        [hoveredItem]=\"hoveredItem\"\n        [markerHandler]=\"markerHandler\"\n        [month]=\"month\"\n        [showAdjacent]=\"showAdjacent\"\n        [value]=\"value\"\n        (dayClick)=\"onDayClick($event)\"\n        (hoveredItemChange)=\"onHoveredItemChange($event)\"\n    />\n}\n", styles: [":host{display:block;min-block-size:20.25rem;inline-size:18rem;padding:1rem 1.125rem;box-sizing:border-box;flex-shrink:0}:host-context(tui-sheet-dialog){inline-size:100%}tui-calendar-year{padding:0}.t-scrollbar{block-size:18.25rem;inline-size:calc(100% + 1rem)}.t-pagination{margin-block-end:1rem}\n"], dependencies: [{ kind: "component", type: TuiCalendarSheet, selector: "tui-calendar-sheet", inputs: ["month", "disabledItemHandler", "markerHandler", "value", "hoveredItem", "showAdjacent", "single"], outputs: ["hoveredItemChange", "dayClick"] }, { kind: "component", type: TuiCalendarSpin, selector: "tui-calendar-spin", inputs: ["value", "min", "max"], outputs: ["valueChange", "yearClick"] }, { kind: "component", type: TuiCalendarYear, selector: "tui-calendar-year", inputs: ["rangeMode", "disabledItemHandler", "initialItem", "min", "max", "value"], outputs: ["yearClick"] }, { kind: "pipe", type: TuiMapperPipe, name: "tuiMapper" }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TuiCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: TuiCalendar, isStandalone: true, selector: "tui-calendar", inputs: { disabledItemHandler: { classPropertyName: "disabledItemHandler", publicName: "disabledItemHandler", 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 }, minViewedMonth: { classPropertyName: "minViewedMonth", publicName: "minViewedMonth", isSignal: true, isRequired: false, transformFunction: null }, maxViewedMonth: { classPropertyName: "maxViewedMonth", publicName: "maxViewedMonth", isSignal: true, isRequired: false, transformFunction: null }, showAdjacent: { classPropertyName: "showAdjacent", publicName: "showAdjacent", isSignal: true, isRequired: false, transformFunction: null }, markerHandler: { classPropertyName: "markerHandler", publicName: "markerHandler", isSignal: true, isRequired: false, transformFunction: null }, initialView: { classPropertyName: "initialView", publicName: "initialView", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, hoveredItem: { classPropertyName: "hoveredItem", publicName: "hoveredItem", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { month: "monthChange", hoveredItem: "hoveredItemChange", value: "valueChange", dayClick: "dayClick" }, host: { listeners: { "pointerdown.prevent.zoneless": "0" } }, providers: [tuiAsAuxiliary(TuiCalendar)], ngImport: i0, template: "@if (view() === 'year') {\n    <tui-scrollbar\n        automation-id=\"tui-calendar__scrollbar\"\n        class=\"t-scrollbar\"\n    >\n        <tui-calendar-year\n            automation-id=\"tui-calendar__year\"\n            [initialItem]=\"month().year\"\n            [max]=\"max().year\"\n            [min]=\"min().year\"\n            [rangeMode]=\"options.rangeMode\"\n            [value]=\"value()\"\n            (yearClick)=\"onPickerYearClick($event)\"\n        />\n    </tui-scrollbar>\n} @else {\n    <tui-calendar-spin\n        automation-id=\"tui-calendar__pagination\"\n        class=\"t-pagination\"\n        [max]=\"computedMaxViewedMonth()\"\n        [min]=\"computedMinViewedMonth()\"\n        [value]=\"month()\"\n        (valueChange)=\"onPaginationValueChange($event)\"\n        (yearClick)=\"view.set('year')\"\n    />\n    <tui-calendar-sheet\n        automation-id=\"tui-calendar__calendar\"\n        [disabledItemHandler]=\"disabledItemHandler() | tuiMapper: disabledItemHandlerMapper : min() : max()\"\n        [hoveredItem]=\"hoveredItem()\"\n        [markerHandler]=\"markerHandler()\"\n        [month]=\"month()\"\n        [showAdjacent]=\"showAdjacent()\"\n        [value]=\"value()\"\n        (dayClick)=\"onDayClick($event)\"\n        (hoveredItemChange)=\"onHoveredItemChange($event)\"\n    />\n}\n", styles: [":host{display:block;min-block-size:20.25rem;inline-size:18rem;padding:1rem 1.125rem;box-sizing:border-box;flex-shrink:0}:host-context(tui-sheet-dialog){inline-size:100%}tui-calendar-year{padding:0}.t-scrollbar{block-size:18.25rem;inline-size:calc(100% + 1rem)}.t-pagination{margin-block-end:1rem}\n"], dependencies: [{ kind: "component", type: TuiCalendarSheet, selector: "tui-calendar-sheet", inputs: ["month", "disabledItemHandler", "markerHandler", "value", "showAdjacent", "hoveredItem"], outputs: ["hoveredItemChange", "dayClick"] }, { kind: "component", type: TuiCalendarSpin, selector: "tui-calendar-spin", inputs: ["value", "min", "max"], outputs: ["valueChange", "yearClick"] }, { kind: "component", type: TuiCalendarYear, selector: "tui-calendar-year", inputs: ["rangeMode", "disabledItemHandler", "value", "min", "max", "initialItem"], outputs: ["yearClick"] }, { kind: "pipe", type: TuiMapperPipe, name: "tuiMapper" }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiCalendar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TuiCalendar, decorators: [{
             type: Component,
             args: [{ selector: 'tui-calendar', imports: [
                         TuiCalendarSheet,
@@ -530,36 +412,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         TuiCalendarYear,
                         TuiMapperPipe,
                         TuiScrollbar,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiAsAuxiliary(TuiCalendar)], host: { '(pointerdown.prevent.zoneless)': '0' }, template: "@if (isInYearView) {\n    <tui-scrollbar\n        automation-id=\"tui-calendar__scrollbar\"\n        class=\"t-scrollbar\"\n    >\n        <tui-calendar-year\n            automation-id=\"tui-calendar__year\"\n            [initialItem]=\"month.year\"\n            [max]=\"computedMax.year\"\n            [min]=\"computedMin.year\"\n            [rangeMode]=\"options.rangeMode\"\n            [value]=\"value\"\n            (yearClick)=\"onPickerYearClick($event)\"\n        />\n    </tui-scrollbar>\n} @else {\n    <tui-calendar-spin\n        automation-id=\"tui-calendar__pagination\"\n        class=\"t-pagination\"\n        [max]=\"computedMaxViewedMonth\"\n        [min]=\"computedMinViewedMonth\"\n        [value]=\"month\"\n        (valueChange)=\"onPaginationValueChange($event)\"\n        (yearClick)=\"onPaginationYearClick()\"\n    />\n    <tui-calendar-sheet\n        automation-id=\"tui-calendar__calendar\"\n        [disabledItemHandler]=\"disabledItemHandler | tuiMapper: disabledItemHandlerMapper : computedMin : computedMax\"\n        [hoveredItem]=\"hoveredItem\"\n        [markerHandler]=\"markerHandler\"\n        [month]=\"month\"\n        [showAdjacent]=\"showAdjacent\"\n        [value]=\"value\"\n        (dayClick)=\"onDayClick($event)\"\n        (hoveredItemChange)=\"onHoveredItemChange($event)\"\n    />\n}\n", styles: [":host{display:block;min-block-size:20.25rem;inline-size:18rem;padding:1rem 1.125rem;box-sizing:border-box;flex-shrink:0}:host-context(tui-sheet-dialog){inline-size:100%}tui-calendar-year{padding:0}.t-scrollbar{block-size:18.25rem;inline-size:calc(100% + 1rem)}.t-pagination{margin-block-end:1rem}\n"] }]
-        }], propDecorators: { month: [{
-                type: Input
-            }], disabledItemHandler: [{
-                type: Input
-            }], min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], minViewedMonth: [{
-                type: Input
-            }], maxViewedMonth: [{
-                type: Input
-            }], hoveredItem: [{
-                type: Input
-            }], showAdjacent: [{
-                type: Input
-            }], markerHandler: [{
-                type: Input
-            }], dayClick: [{
-                type: Output
-            }], monthChange: [{
-                type: Output
-            }], hoveredItemChange: [{
-                type: Output
-            }], value: [{
-                type: Input
-            }], initialView: [{
-                type: Input
-            }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiAsAuxiliary(TuiCalendar)], host: { '(pointerdown.prevent.zoneless)': '0' }, template: "@if (view() === 'year') {\n    <tui-scrollbar\n        automation-id=\"tui-calendar__scrollbar\"\n        class=\"t-scrollbar\"\n    >\n        <tui-calendar-year\n            automation-id=\"tui-calendar__year\"\n            [initialItem]=\"month().year\"\n            [max]=\"max().year\"\n            [min]=\"min().year\"\n            [rangeMode]=\"options.rangeMode\"\n            [value]=\"value()\"\n            (yearClick)=\"onPickerYearClick($event)\"\n        />\n    </tui-scrollbar>\n} @else {\n    <tui-calendar-spin\n        automation-id=\"tui-calendar__pagination\"\n        class=\"t-pagination\"\n        [max]=\"computedMaxViewedMonth()\"\n        [min]=\"computedMinViewedMonth()\"\n        [value]=\"month()\"\n        (valueChange)=\"onPaginationValueChange($event)\"\n        (yearClick)=\"view.set('year')\"\n    />\n    <tui-calendar-sheet\n        automation-id=\"tui-calendar__calendar\"\n        [disabledItemHandler]=\"disabledItemHandler() | tuiMapper: disabledItemHandlerMapper : min() : max()\"\n        [hoveredItem]=\"hoveredItem()\"\n        [markerHandler]=\"markerHandler()\"\n        [month]=\"month()\"\n        [showAdjacent]=\"showAdjacent()\"\n        [value]=\"value()\"\n        (dayClick)=\"onDayClick($event)\"\n        (hoveredItemChange)=\"onHoveredItemChange($event)\"\n    />\n}\n", styles: [":host{display:block;min-block-size:20.25rem;inline-size:18rem;padding:1rem 1.125rem;box-sizing:border-box;flex-shrink:0}:host-context(tui-sheet-dialog){inline-size:100%}tui-calendar-year{padding:0}.t-scrollbar{block-size:18.25rem;inline-size:calc(100% + 1rem)}.t-pagination{margin-block-end:1rem}\n"] }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.