From 89a6e964acf0c5c2c332a3b93ea847ae40f3569a Mon Sep 17 00:00:00 2001 From: Demyan Date: Mon, 12 Aug 2024 17:27:15 +0300 Subject: [PATCH 1/7] fix(kit): fix calendar range does not update checkbox position --- .../components/calendar-range/calendar-range.component.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/projects/kit/components/calendar-range/calendar-range.component.ts b/projects/kit/components/calendar-range/calendar-range.component.ts index 44ed3699af81..87ef136997fa 100644 --- a/projects/kit/components/calendar-range/calendar-range.component.ts +++ b/projects/kit/components/calendar-range/calendar-range.component.ts @@ -155,7 +155,11 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax isItemActive(item: TuiDayRangePeriod | string): boolean { const {activePeriod} = this; - return (tuiIsString(item) && activePeriod === null) || activePeriod === item; + return ( + (tuiIsString(item) && activePeriod === null) || + activePeriod === item || + activePeriod?.toString() === item.toString() + ); } // TODO: investigate if it is used anywhere and (if not) delete it in v4.0 From 84553acfa1b24d86cee99db804541c745a843aed Mon Sep 17 00:00:00 2001 From: Demyan Date: Mon, 19 Aug 2024 12:50:30 +0300 Subject: [PATCH 2/7] fix(kit): calendar range add unit to check intersecting periods --- .../calendar-range.component.ts | 5 ++ .../calendar-range/calendar-range.module.ts | 5 +- .../calendar-range.template.html | 8 ++ .../calendar-range/examples/5/index.html | 24 ++++++ .../calendar-range/examples/5/index.ts | 74 +++++++++++++++++++ .../calendar-range.component.ts | 64 ++++++++++++++-- 6 files changed, 174 insertions(+), 6 deletions(-) create mode 100644 projects/demo/src/modules/components/calendar-range/examples/5/index.html create mode 100644 projects/demo/src/modules/components/calendar-range/examples/5/index.ts diff --git a/projects/demo/src/modules/components/calendar-range/calendar-range.component.ts b/projects/demo/src/modules/components/calendar-range/calendar-range.component.ts index 5bcc4aa9a3e2..f4cfbadeefb0 100644 --- a/projects/demo/src/modules/components/calendar-range/calendar-range.component.ts +++ b/projects/demo/src/modules/components/calendar-range/calendar-range.component.ts @@ -44,6 +44,11 @@ export class ExampleTuiCalendarRangeComponent { HTML: import('./examples/4/index.html?raw'), }; + readonly example5: TuiDocExample = { + TypeScript: import('./examples/5/index.ts?raw'), + HTML: import('./examples/5/index.html?raw'), + }; + readonly minVariants = [ TUI_FIRST_DAY, new TuiDay(2017, 2, 5), diff --git a/projects/demo/src/modules/components/calendar-range/calendar-range.module.ts b/projects/demo/src/modules/components/calendar-range/calendar-range.module.ts index 85d72e450a7a..3ef0a6cafa88 100644 --- a/projects/demo/src/modules/components/calendar-range/calendar-range.module.ts +++ b/projects/demo/src/modules/components/calendar-range/calendar-range.module.ts @@ -2,7 +2,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {RouterModule} from '@angular/router'; import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc'; -import {TuiLinkModule} from '@taiga-ui/core'; +import {TuiButtonModule, TuiLinkModule} from '@taiga-ui/core'; import {TuiCalendarRangeModule} from '@taiga-ui/kit'; import {ExampleTuiCalendarRangeComponent} from './calendar-range.component'; @@ -10,6 +10,7 @@ import {TuiCalendarRangeExample1} from './examples/1'; import {TuiCalendarRangeExample2} from './examples/2'; import {TuiCalendarRangeExample3} from './examples/3'; import {TuiCalendarRangeExample4} from './examples/4'; +import {TuiCalendarRangeExample5} from './examples/5'; @NgModule({ imports: [ @@ -17,6 +18,7 @@ import {TuiCalendarRangeExample4} from './examples/4'; CommonModule, TuiAddonDocModule, TuiLinkModule, + TuiButtonModule, RouterModule.forChild(tuiGenerateRoutes(ExampleTuiCalendarRangeComponent)), ], declarations: [ @@ -25,6 +27,7 @@ import {TuiCalendarRangeExample4} from './examples/4'; TuiCalendarRangeExample2, TuiCalendarRangeExample3, TuiCalendarRangeExample4, + TuiCalendarRangeExample5, ], exports: [ExampleTuiCalendarRangeComponent], }) diff --git a/projects/demo/src/modules/components/calendar-range/calendar-range.template.html b/projects/demo/src/modules/components/calendar-range/calendar-range.template.html index c9a6fa8ce6f3..70a8c6246f16 100644 --- a/projects/demo/src/modules/components/calendar-range/calendar-range.template.html +++ b/projects/demo/src/modules/components/calendar-range/calendar-range.template.html @@ -49,6 +49,14 @@ + + + + diff --git a/projects/demo/src/modules/components/calendar-range/examples/5/index.html b/projects/demo/src/modules/components/calendar-range/examples/5/index.html new file mode 100644 index 000000000000..5c0d3f8da103 --- /dev/null +++ b/projects/demo/src/modules/components/calendar-range/examples/5/index.html @@ -0,0 +1,24 @@ + + +

+ +

+ +

+ You are seeing {{ selected }}. + +

diff --git a/projects/demo/src/modules/components/calendar-range/examples/5/index.ts b/projects/demo/src/modules/components/calendar-range/examples/5/index.ts new file mode 100644 index 000000000000..cdbfb6818dc2 --- /dev/null +++ b/projects/demo/src/modules/components/calendar-range/examples/5/index.ts @@ -0,0 +1,74 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; +import {TuiDay, TuiDayRange} from '@taiga-ui/cdk'; +import {TuiDayRangePeriod} from '@taiga-ui/kit'; + +const today = TuiDay.currentLocal(); +const startOfWeek = today.append({day: -today.dayOfWeek()}); +const startOfMonth = today.append({day: 1 - today.day}); +const startOfQuarter = startOfMonth.append({month: -(startOfMonth.month % 3)}); + +@Component({ + selector: 'tui-calendar-range-example-5', + templateUrl: './index.html', + encapsulation, + changeDetection, +}) +export class TuiCalendarRangeExample5 { + readonly items = [ + new TuiDayRangePeriod( + new TuiDayRange(today.append({day: -30}), today), + 'Default', + ), + new TuiDayRangePeriod(new TuiDayRange(startOfWeek, today), 'Week'), + new TuiDayRangePeriod(new TuiDayRange(startOfMonth, today), 'Month'), + new TuiDayRangePeriod(new TuiDayRange(startOfQuarter, today), 'Quarter'), + ]; + + selected: TuiDayRangePeriod | null = this.default; + value: TuiDayRange | null = null; + + get default(): TuiDayRangePeriod { + return this.items[0]; + } + + get isDefault(): boolean { + return this.selected === this.default; + } + + get isSelected(): boolean { + return !!this.items.find(item => item === this.selected); + } + + get isLastVisible(): boolean { + return this.selected === this.items[this.items.length - 1]; + } + + get opposite(): TuiDayRangePeriod | null { + if (!this.isSelected) { + return null; + } + + switch (this.selected) { + case this.default: + return null; + case this.items[1]: + return this.items[2]; + case this.items[2]: + return this.items[3]; + case this.items[3]: + return null; + default: + return null; + } + } + + reset(): void { + this.selected = this.default; + } + + toggle(): void { + this.selected = this.opposite; + } +} diff --git a/projects/kit/components/calendar-range/calendar-range.component.ts b/projects/kit/components/calendar-range/calendar-range.component.ts index e6ac62dcbd77..c256224ffba7 100644 --- a/projects/kit/components/calendar-range/calendar-range.component.ts +++ b/projects/kit/components/calendar-range/calendar-range.component.ts @@ -6,9 +6,11 @@ import { HostListener, Inject, Input, + OnChanges, Optional, Output, Self, + SimpleChanges, } from '@angular/core'; import { ALWAYS_FALSE_HANDLER, @@ -47,7 +49,14 @@ import {takeUntil} from 'rxjs/operators'; changeDetection: ChangeDetectionStrategy.OnPush, providers: [TuiDestroyService], }) -export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax { +export class TuiCalendarRangeComponent + implements OnChanges, TuiWithOptionalMinMax +{ + /** + * @deprecated use `selectedItem` + */ + private selectedPeriod: TuiDayRangePeriod | null = null; + @Input() defaultViewedMonth: TuiMonth = TuiMonth.currentLocal(); @@ -75,13 +84,21 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax @Input() value: TuiDayRange | null = null; + @Input() + set item(item: TuiDayRangePeriod | null) { + this.updateValue(item?.range ?? null); + this.selectedItem = item; + } + @Output() readonly valueChange = new EventEmitter(); + @Output() + readonly itemChange = new EventEmitter(); + availableRange: TuiDayRange | null = null; previousValue: TuiDayRange | null = null; - - selectedActivePeriod: TuiDayRangePeriod | null = null; + selectedItem: TuiDayRangePeriod | null = null; readonly maxLengthMapper = MAX_DAY_RANGE_LENGTH_MAPPER; @@ -93,6 +110,20 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax return this.max ?? TUI_LAST_DAY; } + /** + * @deprecated use `selectedItem` + */ + get selectedActivePeriod(): TuiDayRangePeriod | null { + return this.selectedPeriod; + } + + /** + * @deprecated use `selectedItem` + */ + set selectedActivePeriod(period: TuiDayRangePeriod | null) { + this.selectedPeriod = period; + } + constructor( @Optional() @Inject(TUI_CALENDAR_DATE_STREAM) @@ -108,6 +139,7 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax valueChanges.pipe(tuiWatch(cdr), takeUntil(destroy$)).subscribe(value => { this.value = value; + this.item = value ? this.findItemByDayRange(value) : null; }); } @@ -121,6 +153,14 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax this.value = this.previousValue; } + ngOnChanges(changes: SimpleChanges): void { + const {value} = changes ?? {}; + + if (value?.currentValue) { + this.item = this.findItemByDayRange(value.currentValue); + } + } + readonly monthOffset: TuiTypedMapper<[TuiMonth, number], TuiMonth> = (value, month) => value.append({month}); @@ -184,13 +224,17 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax return; } - this.updateValue(TuiDayRange.sort(value.from, day)); + const sortedRange = TuiDayRange.sort(value.from, day); + + this.updateValue(sortedRange); + this.updateItem(this.findItemByDayRange(sortedRange)); } onItemSelect(item: TuiDayRangePeriod | string): void { if (!tuiIsString(item)) { this.selectedActivePeriod = item; this.updateValue(item.range.dayLimit(this.min, this.max)); + this.updateItem(item); return; } @@ -198,6 +242,7 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax if (this.activePeriod !== null) { this.selectedActivePeriod = null; this.updateValue(null); + this.updateItem(null); } } @@ -206,9 +251,14 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax this.valueChange.emit(value); } + updateItem(item: TuiDayRangePeriod | null): void { + this.item = item; + this.itemChange.emit(item); + } + private get activePeriod(): TuiDayRangePeriod | null { return ( - this.selectedActivePeriod ?? + this.item ?? (this.items.find(item => tuiNullableSame( this.value, @@ -297,4 +347,8 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax return new TuiDayRange(from, to); } + + private findItemByDayRange(dayRange: TuiDayRange): TuiDayRangePeriod | null { + return this.items.find(item => dayRange.daySame(item.range)) ?? null; + } } From 558c936cb105b07ce4ff0a2d3693363d67ef4e92 Mon Sep 17 00:00:00 2001 From: Demyan Date: Mon, 19 Aug 2024 12:55:02 +0300 Subject: [PATCH 3/7] feat(kit): `TuiCalendarRange` add `item` property for correctly switch value outside --- .../components/calendar-range/calendar-range.component.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/projects/kit/components/calendar-range/calendar-range.component.ts b/projects/kit/components/calendar-range/calendar-range.component.ts index c256224ffba7..33b51aa910e4 100644 --- a/projects/kit/components/calendar-range/calendar-range.component.ts +++ b/projects/kit/components/calendar-range/calendar-range.component.ts @@ -53,7 +53,7 @@ export class TuiCalendarRangeComponent implements OnChanges, TuiWithOptionalMinMax { /** - * @deprecated use `selectedItem` + * @deprecated use `item` */ private selectedPeriod: TuiDayRangePeriod | null = null; @@ -87,7 +87,6 @@ export class TuiCalendarRangeComponent @Input() set item(item: TuiDayRangePeriod | null) { this.updateValue(item?.range ?? null); - this.selectedItem = item; } @Output() @@ -98,7 +97,6 @@ export class TuiCalendarRangeComponent availableRange: TuiDayRange | null = null; previousValue: TuiDayRange | null = null; - selectedItem: TuiDayRangePeriod | null = null; readonly maxLengthMapper = MAX_DAY_RANGE_LENGTH_MAPPER; @@ -111,14 +109,14 @@ export class TuiCalendarRangeComponent } /** - * @deprecated use `selectedItem` + * @deprecated use `item` */ get selectedActivePeriod(): TuiDayRangePeriod | null { return this.selectedPeriod; } /** - * @deprecated use `selectedItem` + * @deprecated use `item` */ set selectedActivePeriod(period: TuiDayRangePeriod | null) { this.selectedPeriod = period; From 369e0af6666373785e0c5d7b2cf9c74b81a82755 Mon Sep 17 00:00:00 2001 From: Demyan Date: Mon, 19 Aug 2024 14:22:25 +0300 Subject: [PATCH 4/7] fix(kit): delete useless check --- .../components/calendar-range/calendar-range.component.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/projects/kit/components/calendar-range/calendar-range.component.ts b/projects/kit/components/calendar-range/calendar-range.component.ts index 33b51aa910e4..6c729d8ccc53 100644 --- a/projects/kit/components/calendar-range/calendar-range.component.ts +++ b/projects/kit/components/calendar-range/calendar-range.component.ts @@ -256,8 +256,7 @@ export class TuiCalendarRangeComponent private get activePeriod(): TuiDayRangePeriod | null { return ( - this.item ?? - (this.items.find(item => + this.items.find(item => tuiNullableSame( this.value, item.range, @@ -265,8 +264,7 @@ export class TuiCalendarRangeComponent a.from.daySame(b.from.dayLimit(this.min, this.max)) && a.to.daySame(b.to.dayLimit(this.min, this.max)), ), - ) || - null) + ) || null ); } From 9a5e8029b97ad31251b4c07213596e52e68914d2 Mon Sep 17 00:00:00 2001 From: Demyan Date: Mon, 19 Aug 2024 14:57:48 +0300 Subject: [PATCH 5/7] fix(kit): fix select value --- .../calendar-range.component.ts | 37 +++++-------------- 1 file changed, 9 insertions(+), 28 deletions(-) diff --git a/projects/kit/components/calendar-range/calendar-range.component.ts b/projects/kit/components/calendar-range/calendar-range.component.ts index 6c729d8ccc53..1cc648e926a8 100644 --- a/projects/kit/components/calendar-range/calendar-range.component.ts +++ b/projects/kit/components/calendar-range/calendar-range.component.ts @@ -6,11 +6,9 @@ import { HostListener, Inject, Input, - OnChanges, Optional, Output, Self, - SimpleChanges, } from '@angular/core'; import { ALWAYS_FALSE_HANDLER, @@ -49,9 +47,7 @@ import {takeUntil} from 'rxjs/operators'; changeDetection: ChangeDetectionStrategy.OnPush, providers: [TuiDestroyService], }) -export class TuiCalendarRangeComponent - implements OnChanges, TuiWithOptionalMinMax -{ +export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax { /** * @deprecated use `item` */ @@ -86,7 +82,8 @@ export class TuiCalendarRangeComponent @Input() set item(item: TuiDayRangePeriod | null) { - this.updateValue(item?.range ?? null); + this.value = item?.range ?? null; + this.selectedActivePeriod = item; } @Output() @@ -137,7 +134,6 @@ export class TuiCalendarRangeComponent valueChanges.pipe(tuiWatch(cdr), takeUntil(destroy$)).subscribe(value => { this.value = value; - this.item = value ? this.findItemByDayRange(value) : null; }); } @@ -151,14 +147,6 @@ export class TuiCalendarRangeComponent this.value = this.previousValue; } - ngOnChanges(changes: SimpleChanges): void { - const {value} = changes ?? {}; - - if (value?.currentValue) { - this.item = this.findItemByDayRange(value.currentValue); - } - } - readonly monthOffset: TuiTypedMapper<[TuiMonth, number], TuiMonth> = (value, month) => value.append({month}); @@ -222,17 +210,13 @@ export class TuiCalendarRangeComponent return; } - const sortedRange = TuiDayRange.sort(value.from, day); - - this.updateValue(sortedRange); - this.updateItem(this.findItemByDayRange(sortedRange)); + this.updateValue(TuiDayRange.sort(value.from, day)); } onItemSelect(item: TuiDayRangePeriod | string): void { if (!tuiIsString(item)) { this.selectedActivePeriod = item; this.updateValue(item.range.dayLimit(this.min, this.max)); - this.updateItem(item); return; } @@ -240,23 +224,19 @@ export class TuiCalendarRangeComponent if (this.activePeriod !== null) { this.selectedActivePeriod = null; this.updateValue(null); - this.updateItem(null); } } updateValue(value: TuiDayRange | null): void { this.value = value; this.valueChange.emit(value); - } - - updateItem(item: TuiDayRangePeriod | null): void { - this.item = item; - this.itemChange.emit(item); + this.itemChange.emit(value ? this.findItemByDayRange(value) : null); } private get activePeriod(): TuiDayRangePeriod | null { return ( - this.items.find(item => + this.selectedActivePeriod ?? + (this.items.find(item => tuiNullableSame( this.value, item.range, @@ -264,7 +244,8 @@ export class TuiCalendarRangeComponent a.from.daySame(b.from.dayLimit(this.min, this.max)) && a.to.daySame(b.to.dayLimit(this.min, this.max)), ), - ) || null + ) || + null) ); } From ce147e94fc17414520a7da3de5c591943b30c473 Mon Sep 17 00:00:00 2001 From: Demyan Date: Tue, 20 Aug 2024 09:52:12 +0300 Subject: [PATCH 6/7] fix(kit): separation `value` and `item` properties --- .../components/calendar-range/examples/5/index.html | 2 ++ .../components/calendar-range/examples/5/index.ts | 8 +++++++- .../calendar-range/calendar-range.component.ts | 13 +++++++------ 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/projects/demo/src/modules/components/calendar-range/examples/5/index.html b/projects/demo/src/modules/components/calendar-range/examples/5/index.html index 5c0d3f8da103..61834ba374a6 100644 --- a/projects/demo/src/modules/components/calendar-range/examples/5/index.html +++ b/projects/demo/src/modules/components/calendar-range/examples/5/index.html @@ -1,6 +1,8 @@

diff --git a/projects/demo/src/modules/components/calendar-range/examples/5/index.ts b/projects/demo/src/modules/components/calendar-range/examples/5/index.ts index cdbfb6818dc2..d22fd6064097 100644 --- a/projects/demo/src/modules/components/calendar-range/examples/5/index.ts +++ b/projects/demo/src/modules/components/calendar-range/examples/5/index.ts @@ -27,7 +27,7 @@ export class TuiCalendarRangeExample5 { ]; selected: TuiDayRangePeriod | null = this.default; - value: TuiDayRange | null = null; + value: TuiDayRange | null = this.default.range; get default(): TuiDayRangePeriod { return this.items[0]; @@ -64,11 +64,17 @@ export class TuiCalendarRangeExample5 { } } + onValue(value: TuiDayRange | null): void { + this.value = value; + } + reset(): void { this.selected = this.default; + this.value = this.selected.range; } toggle(): void { this.selected = this.opposite; + this.value = this.selected?.range ?? null; } } diff --git a/projects/kit/components/calendar-range/calendar-range.component.ts b/projects/kit/components/calendar-range/calendar-range.component.ts index 1cc648e926a8..66a12faeb201 100644 --- a/projects/kit/components/calendar-range/calendar-range.component.ts +++ b/projects/kit/components/calendar-range/calendar-range.component.ts @@ -48,9 +48,6 @@ import {takeUntil} from 'rxjs/operators'; providers: [TuiDestroyService], }) export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax { - /** - * @deprecated use `item` - */ private selectedPeriod: TuiDayRangePeriod | null = null; @Input() @@ -82,7 +79,6 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax @Input() set item(item: TuiDayRangePeriod | null) { - this.value = item?.range ?? null; this.selectedActivePeriod = item; } @@ -206,17 +202,22 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax if (value === null || !value.isSingleDay) { this.value = new TuiDayRange(day, day); this.availableRange = this.findAvailableRange(); + this.itemChange.emit(this.findItemByDayRange(this.value)); return; } - this.updateValue(TuiDayRange.sort(value.from, day)); + const sortedDayRange = TuiDayRange.sort(value.from, day); + + this.updateValue(sortedDayRange); + this.itemChange.emit(this.findItemByDayRange(sortedDayRange)); } onItemSelect(item: TuiDayRangePeriod | string): void { if (!tuiIsString(item)) { this.selectedActivePeriod = item; this.updateValue(item.range.dayLimit(this.min, this.max)); + this.itemChange.emit(item); return; } @@ -224,13 +225,13 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax if (this.activePeriod !== null) { this.selectedActivePeriod = null; this.updateValue(null); + this.itemChange.emit(null); } } updateValue(value: TuiDayRange | null): void { this.value = value; this.valueChange.emit(value); - this.itemChange.emit(value ? this.findItemByDayRange(value) : null); } private get activePeriod(): TuiDayRangePeriod | null { From 1fa8f99b62e2327e951a1399e18cac3ee17e2a88 Mon Sep 17 00:00:00 2001 From: Demyan Date: Tue, 20 Aug 2024 12:03:07 +0300 Subject: [PATCH 7/7] fix(kit): deprecate `selectedPeriod` property and removed setter `item` property --- .../components/calendar-range/calendar-range.component.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/projects/kit/components/calendar-range/calendar-range.component.ts b/projects/kit/components/calendar-range/calendar-range.component.ts index 66a12faeb201..a90d55d8e29d 100644 --- a/projects/kit/components/calendar-range/calendar-range.component.ts +++ b/projects/kit/components/calendar-range/calendar-range.component.ts @@ -48,6 +48,9 @@ import {takeUntil} from 'rxjs/operators'; providers: [TuiDestroyService], }) export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax { + /** + * @deprecated use `item` + */ private selectedPeriod: TuiDayRangePeriod | null = null; @Input() @@ -78,9 +81,7 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax value: TuiDayRange | null = null; @Input() - set item(item: TuiDayRangePeriod | null) { - this.selectedActivePeriod = item; - } + item: TuiDayRangePeriod | null = null; @Output() readonly valueChange = new EventEmitter(); @@ -236,6 +237,7 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax private get activePeriod(): TuiDayRangePeriod | null { return ( + this.item ?? this.selectedActivePeriod ?? (this.items.find(item => tuiNullableSame(