feat(addon-mobile): possibility drop mobile calendar header

projects/addon-mobile/components/mobile-calendar/mobile-calendar.component.ts

@@ -51,13 +51,16 @@ import {
 import {tuiToggleDay} from '@taiga-ui/kit/utils';
 import type {MonoTypeOperatorFunction} from 'rxjs';
 import {
+    BehaviorSubject,
     debounceTime,
     delay,
+    distinctUntilChanged,
     filter,
     identity,
     map,
     mergeMap,
     race,
+    skip,
     switchMap,
     take,
     takeUntil,
@@ -111,6 +114,10 @@ export class TuiMobileCalendar implements AfterViewInit {
     @ViewChild('monthsScrollRef')
     private readonly monthsScrollRef?: CdkVirtualScrollViewport;
 
+    private readonly value$ = new BehaviorSubject<
+        TuiDay | TuiDayRange | readonly TuiDay[] | null
+    >(null);
+
     private readonly today = TuiDay.currentLocal();
     private activeYear = 0;
     private activeMonth = 0;
@@ -120,15 +127,17 @@ export class TuiMobileCalendar implements AfterViewInit {
     private readonly ngZone = inject(NgZone);
 
     protected initialized = false;
-    protected value: TuiDay | TuiDayRange | readonly TuiDay[] | null = null;
     protected readonly isIOS = inject(TUI_IS_IOS);
     protected readonly isE2E = inject(TUI_IS_E2E);
     protected readonly icons = inject(TUI_COMMON_ICONS);
     protected readonly closeWord$ = inject(TUI_CLOSE_WORD);
     protected readonly cancelWord$ = inject(TUI_CANCEL_WORD);
     protected readonly doneWord$ = inject(TUI_DONE_WORD);
     protected readonly unorderedWeekDays$ = inject(TUI_SHORT_WEEK_DAYS);
-    protected readonly chooseDayOrRangeTexts$ = inject(TUI_CHOOSE_DAY_OR_RANGE_TEXTS);
+    protected readonly chooseDayOrRangeTexts$ = inject(TUI_CHOOSE_DAY_OR_RANGE_TEXTS, {
+        optional: true,
+    });
+
     protected readonly years = Array.from({length: RANGE}, (_, i) => i + STARTING_YEAR);
     protected readonly months = Array.from(
         {length: RANGE * 12},
@@ -162,6 +171,13 @@ export class TuiMobileCalendar implements AfterViewInit {
         TuiDay | TuiDayRange | readonly TuiDay[]
     >();
 
+    @Output()
+    public readonly valueChange = this.value$.pipe(
+        skip(1),
+        distinctUntilChanged((a, b) => a?.toString() === b?.toString()),
+        takeUntilDestroyed(),
+    );
+
     constructor() {
         inject(TUI_VALUE_STREAM)
             .pipe(takeUntilDestroyed())
@@ -192,6 +208,15 @@ export class TuiMobileCalendar implements AfterViewInit {
             .subscribe(() => this.scrollToActiveMonth());
     }
 
+    @Input()
+    protected set value(value: TuiDay | TuiDayRange | readonly TuiDay[] | null) {
+        this.value$.next(value);
+    }
+
+    protected get value(): TuiDay | TuiDayRange | readonly TuiDay[] | null {
+        return this.value$.value;
+    }
+
     protected get yearWidth(): number {
         return this.doc.documentElement.clientWidth / YEARS_IN_ROW;
     }
@@ -213,12 +238,14 @@ export class TuiMobileCalendar implements AfterViewInit {
             this.value = day;
         } else if (this.isMultiValue(this.value)) {
             this.value = tuiToggleDay(this.value, day);
-        } else if (this.isSingleValue(this.value)) {
-            this.value = new TuiDayRange(day, day);
+        } else if (this.value instanceof TuiDay) {
+            this.value = TuiDayRange.sort(this.value, day);
+        } else if (this.value instanceof TuiDayRange && !this.value.isSingleDay) {
+            this.value = day;
         } else if (this.value instanceof TuiDayRange) {
             this.value = TuiDayRange.sort(this.value.from, day);
         } else if (!this.value) {
-            this.value = new TuiDayRange(day, day);
+            this.value = day;
         }
     }
 
@@ -302,10 +329,6 @@ export class TuiMobileCalendar implements AfterViewInit {
         return !(day instanceof TuiDay) && !(day instanceof TuiDayRange) && this.multi;
     }
 
-    private isSingleValue(day: any): day is TuiDay {
-        return day instanceof TuiDay || (day instanceof TuiDayRange && !day.isSingleDay);
-    }
-
     private getYearsViewportSize(): number {
         return this.yearsScrollRef?.getViewportSize() || 0;
     }

projects/addon-mobile/components/mobile-calendar/mobile-calendar.template.html

@@ -1,4 +1,7 @@
-<header class="t-header">
+<header
+    *ngIf="chooseDayOrRangeTexts$ | async as texts"
+    class="t-header"
+>
     <button
         appearance=""
         automation-id="tui-mobile-calendar__cancel"
@@ -22,11 +25,10 @@
         {{ cancelWord$ | async }}
     </button>
     <h2
-        *ngIf="chooseDayOrRangeTexts$ | async as texts"
         automation-id="tui-mobile-calendar__label"
         class="t-label"
     >
-        {{ single ? texts?.[0] : multi ? texts?.[2] : texts?.[1] }}
+        {{ single ? texts[0] : multi ? texts[2] : texts[1] }}
     </h2>
     <button
         automation-id="tui-mobile-calendar__confirm"

projects/demo-cypress/src/tests/mobile-calendar.cy.ts

@@ -117,7 +117,7 @@ describe('Mobile calendar', () => {
             cy.get('[automation-id="tui-mobile-calendar__confirm"]').click();
             cy.get('@onConfirmSpy').should(
                 'be.calledWith',
-                new TuiDayRange(today, today),
+                new TuiDayRange(today, tomorrow),
             );
         });
 

projects/demo/src/modules/components/mobile-calendar/examples/6/index.html

@@ -0,0 +1,4 @@
+<tui-mobile-calendar
+    [max]="max"
+    [min]="min"
+/>

projects/demo/src/modules/components/mobile-calendar/examples/6/index.less

@@ -0,0 +1,4 @@
+:host {
+    display: block;
+    height: 35rem;
+}

projects/demo/src/modules/components/mobile-calendar/examples/6/index.ts

@@ -0,0 +1,25 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiMobileCalendar} from '@taiga-ui/addon-mobile';
+import {TuiDay} from '@taiga-ui/cdk';
+import {TUI_CHOOSE_DAY_OR_RANGE_TEXTS} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [TuiMobileCalendar],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+    providers: [
+        {
+            provide: TUI_CHOOSE_DAY_OR_RANGE_TEXTS,
+            useValue: null,
+        },
+    ],
+})
+export default class Example {
+    protected min = new TuiDay(new Date().getFullYear(), new Date().getMonth(), 1);
+    protected max = new TuiDay(new Date().getFullYear(), new Date().getMonth(), 10);
+}

projects/demo/src/modules/components/mobile-calendar/index.html

@@ -61,6 +61,13 @@
             [component]="5 | tuiComponent"
             [content]="5 | tuiExample"
         />
+
+        <tui-doc-example
+            id="without-header"
+            heading="Without header"
+            [component]="6 | tuiComponent"
+            [content]="6 | tuiExample"
+        />
     </ng-template>
 
     <ng-template pageTab>
@@ -70,13 +77,21 @@
                 [disabledItemHandler]="disabledItemHandler"
                 [max]="max"
                 [min]="min"
+                [multi]="multi"
                 [single]="single"
                 (cancel)="documentationPropertyCancel.emitEvent($event)"
                 (confirm)="documentationPropertyConfirm.emitEvent($event)"
             />
         </tui-doc-demo>
 
         <tui-doc-documentation>
+            <ng-template
+                documentationPropertyMode="input-output"
+                documentationPropertyName="value"
+                documentationPropertyType="TuiDay | TuiDayRange | readonly TuiDay[] | null"
+            >
+                Value
+            </ng-template>
             <ng-template
                 documentationPropertyMode="input"
                 documentationPropertyName="disabledItemHandler"
@@ -114,6 +129,14 @@
             >
                 Single date or a range
             </ng-template>
+            <ng-template
+                documentationPropertyMode="input"
+                documentationPropertyName="multi"
+                documentationPropertyType="boolean"
+                [(documentationPropertyValue)]="multi"
+            >
+                Array of single dates
+            </ng-template>
             <ng-template
                 #documentationPropertyCancel="documentationProperty"
                 documentationPropertyMode="output"

projects/demo/src/modules/components/mobile-calendar/index.ts

@@ -47,6 +47,7 @@ export default class Page {
     protected max = this.maxVariants[0];
 
     protected single = true;
+    protected multi = false;
 
     protected readonly disabledItemHandlerVariants: ReadonlyArray<
         TuiBooleanHandler<TuiDay>