feat(kit): TuiCalendarRange add item property for correctly switch value outside

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),

projects/demo/src/modules/components/calendar-range/calendar-range.module.ts

@@ -2,21 +2,23 @@ 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';
 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: [
         TuiCalendarRangeModule,
         CommonModule,
         TuiAddonDocModule,
         TuiLinkModule,
+        TuiButtonModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiCalendarRangeComponent)),
     ],
     declarations: [
@@ -25,6 +27,7 @@ import {TuiCalendarRangeExample4} from './examples/4';
         TuiCalendarRangeExample2,
         TuiCalendarRangeExample3,
         TuiCalendarRangeExample4,
+        TuiCalendarRangeExample5,
     ],
     exports: [ExampleTuiCalendarRangeComponent],
 })

projects/demo/src/modules/components/calendar-range/calendar-range.template.html

@@ -49,6 +49,14 @@
             </ng-template>
             <tui-calendar-range-example-4></tui-calendar-range-example-4>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="with-another-range-switcher"
+            heading="with another range switcher"
+            [content]="example5"
+        >
+            <tui-calendar-range-example-5></tui-calendar-range-example-5>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>

projects/demo/src/modules/components/calendar-range/examples/5/index.html

@@ -0,0 +1,26 @@
+<tui-calendar-range
+    [items]="items"
+    [value]="value"
+    [(item)]="selected"
+    (valueChange)="onValue($event)"
+></tui-calendar-range>
+
+<p *ngIf="isLastVisible">
+    <button
+        tuiLink
+        (click)="reset()"
+    >
+        Reset
+    </button>
+</p>
+
+<p *ngIf="isSelected && !isDefault">
+    You are seeing {{ selected }}.
+    <button
+        *ngIf="!isLastVisible"
+        tuiLink
+        (click)="toggle()"
+    >
+        Switch to {{ opposite }}
+    </button>
+</p>

projects/demo/src/modules/components/calendar-range/examples/5/index.ts

@@ -0,0 +1,80 @@
+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 = this.default.range;
+
+    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;
+        }
+    }
+
+    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;
+    }
+}

projects/kit/components/calendar-range/calendar-range.component.ts

@@ -48,6 +48,8 @@ import {takeUntil} from 'rxjs/operators';
     providers: [TuiDestroyService],
 })
 export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax<TuiDay> {
+    private selectedPeriod: TuiDayRangePeriod | null = null;
+
     @Input()
     defaultViewedMonth: TuiMonth = TuiMonth.currentLocal();
 
@@ -75,14 +77,20 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax<TuiDay>
     @Input()
     value: TuiDayRange | null = null;
 
+    @Input()
+    set item(item: TuiDayRangePeriod | null) {
+        this.selectedActivePeriod = item;
+    }
+
     @Output()
     readonly valueChange = new EventEmitter<TuiDayRange | null>();
 
+    @Output()
+    readonly itemChange = new EventEmitter<TuiDayRangePeriod | null>();
+
     availableRange: TuiDayRange | null = null;
     previousValue: TuiDayRange | null = null;
 
-    selectedActivePeriod: TuiDayRangePeriod | null = null;
-
     readonly maxLengthMapper = MAX_DAY_RANGE_LENGTH_MAPPER;
 
     get computedMin(): TuiDay {
@@ -93,6 +101,20 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax<TuiDay>
         return this.max ?? TUI_LAST_DAY;
     }
 
+    /**
+     * @deprecated use `item`
+     */
+    get selectedActivePeriod(): TuiDayRangePeriod | null {
+        return this.selectedPeriod;
+    }
+
+    /**
+     * @deprecated use `item`
+     */
+    set selectedActivePeriod(period: TuiDayRangePeriod | null) {
+        this.selectedPeriod = period;
+    }
+
     constructor(
         @Optional()
         @Inject(TUI_CALENDAR_DATE_STREAM)
@@ -180,24 +202,30 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax<TuiDay>
         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;
         }
 
         if (this.activePeriod !== null) {
             this.selectedActivePeriod = null;
             this.updateValue(null);
+            this.itemChange.emit(null);
         }
     }
 
@@ -297,4 +325,8 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax<TuiDay>
 
         return new TuiDayRange(from, to);
     }
+
+    private findItemByDayRange(dayRange: TuiDayRange): TuiDayRangePeriod | null {
+        return this.items.find(item => dayRange.daySame(item.range)) ?? null;
+    }
 }