feat: add mobile calendar (#744)

* feat: add mobile calendar * chore: apply changes after linting [bot] --------- Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Dec 23, 2024 · e00aa00 · e00aa00
1 parent 883a8a9
commit e00aa00
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 28 deletions.
diff --git a/apps/demo/src/app/home/home.component.html b/apps/demo/src/app/home/home.component.html
@@ -4,7 +4,7 @@ <h2 class="title">
     components
 </h2>
 <tui-input-tag
-    class="tui-space_vertical-10"
+    class="input-tag tui-space_vertical-10"
     [tuiHintContent]="hint"
     [tuiTextfieldLabelOutside]="true"
     [(ngModel)]="tags"
@@ -16,23 +16,37 @@ <h2 class="title">
 
 <div class="flex">
     <div class="date">
-        <tui-input-date
-            required
-            [(ngModel)]="date"
-            (click.capture.stop)="(0)"
-            (keydown.capture.stop)="(0)"
-            (mousedown.capture.stop)="(0)"
-        >
-            Choose date
-        </tui-input-date>
-        <tui-calendar
-            class="calendar"
-            [tuiDropdownOpen]="false"
-            [value]="date"
-            (dayClick)="onDay($event)"
-            (event.prevent.silent)="(0)"
-        />
+        @let breakpoint = breakpoint$ | async;
+
+        @if (breakpoint === 'mobile') {
+            <tui-input-date
+                required
+                [formControl]="control"
+                (keydown.capture.prevent)="openMobileCalendar()"
+                (mousedown.capture.stop)="openMobileCalendar()"
+            >
+                Choose date
+            </tui-input-date>
+        } @else {
+            <tui-input-date
+                required
+                [formControl]="control"
+                (click.capture.stop)="(0)"
+                (keydown.capture.stop)="(0)"
+                (mousedown.capture.stop)="(0)"
+            >
+                Choose date
+            </tui-input-date>
+            <tui-calendar
+                class="calendar"
+                [tuiDropdownOpen]="false"
+                [value]="date"
+                (dayClick)="onDay($event)"
+                (event.prevent.silent)="(0)"
+            />
+        }
     </div>
+
     <div>
         @for (label of labels; track $index) {
             <label tuiLabel>
@@ -47,6 +61,7 @@ <h2 class="title">
             </label>
         }
     </div>
+
     <div class="controls">
         <label class="label">
             <input

diff --git a/apps/demo/src/app/home/home.component.less b/apps/demo/src/app/home/home.component.less
@@ -1,9 +1,26 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
+tui-root {
+    padding: 1.25rem;
+    inline-size: calc(100% - 2.5rem);
+}
+
 .title {
     font-size: 3.5rem;
     line-height: 4.0625rem;
     margin: 0;
+
+    @media @tui-mobile {
+        font-size: 2.5rem;
+        line-height: 2.0625rem;
+    }
+}
+
+.input-tag.input-tag {
+    @media @tui-mobile {
+        margin-top: 1.5rem;
+        margin-bottom: 1rem;
+    }
 }
 
 .t-overlay {
@@ -13,11 +30,19 @@
 .flex {
     display: flex;
     margin-bottom: 1.5625rem;
+
+    @media @tui-mobile {
+        flex-direction: column;
+    }
 }
 
 .date {
-    inline-size: 18rem;
-    margin-right: 2.8125rem;
+    margin-bottom: 1rem;
+
+    @media not @tui-mobile {
+        inline-size: 18rem;
+        margin-right: 2.8125rem;
+    }
 }
 
 .calendar {
@@ -32,7 +57,10 @@
 
 .controls {
     flex: 1;
-    margin-left: 2.8125rem;
+
+    @media not @tui-mobile {
+        margin-left: 2.8125rem;
+    }
 }
 
 .icons {

diff --git a/apps/demo/src/app/home/home.component.ts b/apps/demo/src/app/home/home.component.ts
@@ -5,12 +5,17 @@ import {
     ChangeDetectorRef,
     Component,
     inject,
+    INJECTOR,
+    Injector,
     SecurityContext,
     ViewEncapsulation,
 } from '@angular/core';
-import {FormsModule} from '@angular/forms';
+import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {TuiMobileCalendarDropdown} from '@taiga-ui/addon-mobile';
 import type {TuiDay} from '@taiga-ui/cdk';
+import {tuiControlValue} from '@taiga-ui/cdk';
 import {
+    TuiBreakpointService,
     TuiButton,
     TuiCalendar,
     TuiDialogService,
@@ -22,19 +27,29 @@ 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';
 
 @Component({
     standalone: true,
     selector: 'home',
     imports: [
         CommonModule,
         FormsModule,
+        ReactiveFormsModule,
         TuiAccordion,
         TuiButton,
         TuiCalendar,
@@ -61,6 +76,29 @@ export default class HomeComponent {
     private readonly dompurifySanitizer = inject(NgDompurifySanitizer);
     private readonly dialogs = inject(TuiDialogService);
     private readonly cd = inject(ChangeDetectorRef);
+    private readonly injector = inject(INJECTOR);
+    protected readonly control = new FormControl<TuiDay | null>(null);
+    protected readonly breakpoint$ = inject(TuiBreakpointService);
+
+    protected 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},
+        },
+    );
 
     protected readonly builtInTools = [TuiEditorTool.Undo, TuiEditorTool.Img];
     protected readonly labels = ['New', 'Read', 'Archived', 'Junk'];
@@ -86,7 +124,7 @@ export default class HomeComponent {
     ];
 
     protected onDay(date: TuiDay): void {
-        this.date = date;
+        this.control.setValue(date);
     }
 
     protected call(content: TemplateRef<HTMLElement>): void {
@@ -107,4 +145,8 @@ export default class HomeComponent {
     protected purify(value: string): string {
         return this.dompurifySanitizer.sanitize(SecurityContext.HTML, value);
     }
+
+    protected openMobileCalendar(): void {
+        this.dialog$.subscribe((value) => this.control.setValue(value));
+    }
 }
diff --git a/nx.json b/nx.json
@@ -30,6 +30,5 @@
             "!{projectRoot}/jest.config.[jt]s"
         ]
     },
-    "defaultBase": "main",
-    "useLegacyCache": true
+    "defaultBase": "main"
 }
diff --git a/package-lock.json b/package-lock.json