feat: add mobile calendar

apps/demo/src/app/home/home.component.html

@@ -102,6 +102,25 @@ <h2 class="title">
     </div>
 </div>
 
+<div class="wrapper">
+    <button
+        appearance="secondary"
+        iconStart="@tui.calendar"
+        tuiIconButton
+        type="button"
+        [style.border-radius.%]="100"
+        (click)="onClick()"
+    >
+        Choose a date
+    </button>
+    <span
+        class="date"
+        [class.date_empty]="empty"
+    >
+        {{ date$ | async }}
+    </span>
+</div>
+
 <tui-editor
     [tools]="builtInTools"
     [(ngModel)]="editor"

apps/demo/src/app/home/home.component.less

@@ -150,6 +150,10 @@ tui-dialog[data-appearance='call'][data-size] {
     display: flex;
 }
 
+.wrapper {
+    margin-bottom: 1rem;
+}
+
 @keyframes moveGradient {
     50% {
         background-position: 100% 50%;

apps/demo/src/app/home/home.component.ts

@@ -5,12 +5,15 @@ import {
     ChangeDetectorRef,
     Component,
     inject,
+    INJECTOR,
+    Injector,
     SecurityContext,
     ViewEncapsulation,
 } from '@angular/core';
-import {FormsModule} from '@angular/forms';
-import type {TuiDay} from '@taiga-ui/cdk';
+import {FormControl, FormsModule} from '@angular/forms';
+import {tuiControlValue, TuiDay} from '@taiga-ui/cdk';
 import {
+    TUI_MONTHS,
     TuiButton,
     TuiCalendar,
     TuiDialogService,
@@ -22,12 +25,23 @@ import {
 } from '@taiga-ui/core';
 import {NgDompurifySanitizer} from '@taiga-ui/dompurify';
 import {TuiEditor, TuiEditorTool} from '@taiga-ui/editor';
-import {TuiAccordion, TuiCheckbox, TuiPush, TuiSlider, TuiSwitch} from '@taiga-ui/kit';
+import {
+    TUI_CALENDAR_DATE_STREAM,
+    TuiAccordion,
+    TuiCheckbox,
+    TuiPush,
+    TuiSlider,
+    TuiSwitch,
+} from '@taiga-ui/kit';
 import {
     TuiInputDateModule,
     TuiInputTagModule,
     TuiTextfieldControllerModule,
 } from '@taiga-ui/legacy';
+import {PolymorpheusComponent} from '@taiga-ui/polymorpheus';
+import type {Observable} from 'rxjs';
+import {combineLatest, map} from 'rxjs';
+import {TuiMobileCalendarDropdown} from '@taiga-ui/addon-mobile';
 
 @Component({
     standalone: true,
@@ -61,6 +75,32 @@ export default class HomeComponent {
     private readonly dompurifySanitizer = inject(NgDompurifySanitizer);
     private readonly dialogs = inject(TuiDialogService);
     private readonly cd = inject(ChangeDetectorRef);
+    private readonly injector = inject(INJECTOR);
+    private readonly months$ = inject(TUI_MONTHS);
+    private readonly control = new FormControl<TuiDay | null>(null);
+
+    private readonly dialog$: Observable<TuiDay> = this.dialogs.open(
+        new PolymorpheusComponent(
+            TuiMobileCalendarDropdown,
+            Injector.create({
+                providers: [
+                    {
+                        provide: TUI_CALENDAR_DATE_STREAM,
+                        useValue: tuiControlValue(this.control),
+                    },
+                ],
+                parent: this.injector,
+            }),
+        ),
+        {
+            size: 'fullscreen',
+            closeable: false,
+            data: {
+                single: true,
+                min: TuiDay.currentLocal(),
+            },
+        },
+    );
 
     protected readonly builtInTools = [TuiEditorTool.Undo, TuiEditorTool.Img];
     protected readonly labels = ['New', 'Read', 'Archived', 'Junk'];
@@ -70,6 +110,17 @@ export default class HomeComponent {
     protected slider = 80;
     protected editor = '';
 
+    protected readonly date$ = combineLatest([
+        tuiControlValue<TuiDay>(this.control),
+        this.months$,
+    ]).pipe(
+        map(([value, months]) =>
+            !value
+                ? 'Choose a date'
+                : `${months[value.month]} ${value.day}, ${value.year}`,
+        ),
+    );
+
     protected questions = [
         {
             question: 'Accordion 1',
@@ -85,6 +136,10 @@ export default class HomeComponent {
         },
     ];
 
+    protected get empty(): boolean {
+        return !this.control.value;
+    }
+
     protected onDay(date: TuiDay): void {
         this.date = date;
     }
@@ -107,4 +162,8 @@ export default class HomeComponent {
     protected purify(value: string): string {
         return this.dompurifySanitizer.sanitize(SecurityContext.HTML, value);
     }
+
+    protected onClick(): void {
+        this.dialog$.subscribe((value) => this.control.setValue(value));
+    }
 }

nx.json

@@ -30,6 +30,5 @@
             "!{projectRoot}/jest.config.[jt]s"
         ]
     },
-    "defaultBase": "main",
-    "useLegacyCache": true
+    "defaultBase": "main"
 }

package.json

@@ -67,6 +67,7 @@
         "@taiga-ui/icons": "4.18.0",
         "@taiga-ui/kit": "4.18.0",
         "@taiga-ui/legacy": "4.18.0",
+        "@taiga-ui/polymorpheus": "4.7.4",
         "@taiga-ui/prettier-config": "0.236.0",
         "@taiga-ui/stylelint-config": "0.236.0",
         "@taiga-ui/styles": "4.18.0",