diff --git a/projects/kit/components/calendar-range/calendar-range.component.ts b/projects/kit/components/calendar-range/calendar-range.component.ts index e6ac62dcbd77..5837943b6300 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,9 @@ import {takeUntil} from 'rxjs/operators'; changeDetection: ChangeDetectionStrategy.OnPush, providers: [TuiDestroyService], }) -export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax { +export class TuiCalendarRangeComponent + implements TuiWithOptionalMinMax, OnChanges +{ @Input() defaultViewedMonth: TuiMonth = TuiMonth.currentLocal(); @@ -107,6 +111,7 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax } valueChanges.pipe(tuiWatch(cdr), takeUntil(destroy$)).subscribe(value => { + this.resetSelectedActivePeriod(value); this.value = value; }); } @@ -121,6 +126,10 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax this.value = this.previousValue; } + ngOnChanges({value}: SimpleChanges): void { + this.resetSelectedActivePeriod(value?.currentValue); + } + readonly monthOffset: TuiTypedMapper<[TuiMonth, number], TuiMonth> = (value, month) => value.append({month}); @@ -247,6 +256,12 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax }; } + private resetSelectedActivePeriod(value: TuiDayRange | null): void { + if (value?.toString() !== this.selectedActivePeriod?.range.toString()) { + this.selectedActivePeriod = null; + } + } + private isDisabledItem( disabledItemHandler: TuiBooleanHandler, value: TuiDayRange | null, diff --git a/projects/kit/components/calendar-range/test/range-calendar.component.spec.ts b/projects/kit/components/calendar-range/test/range-calendar.component.spec.ts index b6d5548dde2c..df31f25ea2eb 100644 --- a/projects/kit/components/calendar-range/test/range-calendar.component.spec.ts +++ b/projects/kit/components/calendar-range/test/range-calendar.component.spec.ts @@ -226,6 +226,32 @@ describe('rangeCalendarComponent', () => { expect(items[0].nativeElement.contains(getCheckmark())).toBe(false); expect(items[1].nativeElement.contains(getCheckmark())).toBe(true); }); + + it('when value updates, displays appropriate checkbox', () => { + const today = TuiDay.currentLocal(); + const yesterday = TuiDay.currentLocal().append({day: -1}); + const previousMonth = today.append({month: -1}); + + testComponent.items = [ + new TuiDayRangePeriod(new TuiDayRange(previousMonth, today), '1'), + new TuiDayRangePeriod(new TuiDayRange(previousMonth, yesterday), '2'), + ]; + fixture.detectChanges(); + + component.onItemSelect(component.items[1]); + fixture.detectChanges(); + + const items = getItems(); + + expect(items[0].nativeElement.contains(getCheckmark())).toBe(false); + expect(items[1].nativeElement.contains(getCheckmark())).toBe(true); + + testComponent.value = new TuiDayRange(previousMonth, today); + fixture.detectChanges(); + + expect(items[0].nativeElement.contains(getCheckmark())).toBe(true); + expect(items[1].nativeElement.contains(getCheckmark())).toBe(false); + }); }); function getCalendar(): DebugElement | null {