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

taiga-family · Jul 31, 2024 · 5340bfc · 5340bfc
1 parent 815e323
commit 5340bfc
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 4 deletions.
diff --git a/projects/addon-mobile/components/mobile-calendar/mobile-calendar.component.ts b/projects/addon-mobile/components/mobile-calendar/mobile-calendar.component.ts
@@ -8,6 +8,7 @@ import {
     Inject,
     Input,
     NgZone,
+    Optional,
     Output,
     Self,
     ViewChild,
@@ -135,8 +136,9 @@ export class TuiMobileCalendarComponent implements AfterViewInit {
         @Inject(TUI_DONE_WORD) readonly doneWord$: Observable<string>,
         @Inject(TUI_SHORT_WEEK_DAYS)
         readonly unorderedWeekDays$: TuiInjectionTokenType<typeof TUI_SHORT_WEEK_DAYS>,
+        @Optional()
         @Inject(TUI_CHOOSE_DAY_OR_RANGE_TEXTS)
-        readonly chooseDayOrRangeTexts$: Observable<[string, string, string]>,
+        readonly chooseDayOrRangeTexts$: Observable<[string, string, string]> | null,
         @Inject(TUI_ANIMATIONS_DURATION) private readonly duration: number,
         @Inject(NgZone) private readonly ngZone: NgZone,
     ) {

diff --git a/projects/addon-mobile/components/mobile-calendar/mobile-calendar.template.html b/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"
@@ -21,11 +24,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"

diff --git a/projects/demo/src/modules/components/mobile-calendar/examples/6/index.html b/projects/demo/src/modules/components/mobile-calendar/examples/6/index.html
@@ -0,0 +1,4 @@
+<tui-mobile-calendar
+    [max]="max"
+    [min]="min"
+></tui-mobile-calendar>
diff --git a/projects/demo/src/modules/components/mobile-calendar/examples/6/index.less b/projects/demo/src/modules/components/mobile-calendar/examples/6/index.less
@@ -0,0 +1,4 @@
+:host {
+    display: block;
+    height: 35rem;
+}
diff --git a/projects/demo/src/modules/components/mobile-calendar/examples/6/index.ts b/projects/demo/src/modules/components/mobile-calendar/examples/6/index.ts
@@ -0,0 +1,23 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiDay} from '@taiga-ui/cdk';
+import {TUI_CHOOSE_DAY_OR_RANGE_TEXTS} from '@taiga-ui/kit';
+
+@Component({
+    selector: 'tui-mobile-calendar-example-6',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+    providers: [
+        {
+            provide: TUI_CHOOSE_DAY_OR_RANGE_TEXTS,
+            useValue: null,
+        },
+    ],
+})
+export class TuiMobileCalendarExample6 {
+    min = new TuiDay(new Date().getFullYear(), new Date().getMonth(), 1);
+    max = new TuiDay(new Date().getFullYear(), new Date().getMonth(), 10);
+}
diff --git a/projects/demo/src/modules/components/mobile-calendar/mobile-calendar.component.ts b/projects/demo/src/modules/components/mobile-calendar/mobile-calendar.component.ts
@@ -64,6 +64,12 @@ export class ExampleTuiMobileCalendarComponent {
         LESS: import('./examples/5/index.less?raw'),
     };
 
+    readonly example6: TuiDocExample = {
+        TypeScript: import('./examples/6/index.ts?raw'),
+        HTML: import('./examples/6/index.html?raw'),
+        LESS: import('./examples/6/index.less?raw'),
+    };
+
     minVariants = [TUI_FIRST_DAY, new TuiDay(2017, 2, 5), new TuiDay(1900, 0, 1)];
 
     min = this.minVariants[0];

diff --git a/projects/demo/src/modules/components/mobile-calendar/mobile-calendar.module.ts b/projects/demo/src/modules/components/mobile-calendar/mobile-calendar.module.ts
@@ -14,6 +14,7 @@ import {TuiMobileCalendarExample2} from './examples/2';
 import {TuiMobileCalendarExample3} from './examples/3';
 import {TuiMobileCalendarExample4} from './examples/4';
 import {TuiMobileCalendarExample5} from './examples/5';
+import {TuiMobileCalendarExample6} from './examples/6';
 import {ExampleTuiMobileCalendarComponent} from './mobile-calendar.component';
 
 @NgModule({
@@ -34,6 +35,7 @@ import {ExampleTuiMobileCalendarComponent} from './mobile-calendar.component';
         TuiMobileCalendarExample3,
         TuiMobileCalendarExample4,
         TuiMobileCalendarExample5,
+        TuiMobileCalendarExample6,
     ],
     exports: [ExampleTuiMobileCalendarComponent],
 })

diff --git a/projects/demo/src/modules/components/mobile-calendar/mobile-calendar.template.html b/projects/demo/src/modules/components/mobile-calendar/mobile-calendar.template.html
@@ -83,6 +83,14 @@
         >
             <tui-mobile-calendar-example-5></tui-mobile-calendar-example-5>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="without-header"
+            heading="Without header"
+            [content]="example6"
+        >
+            <tui-mobile-calendar-example-6></tui-mobile-calendar-example-6>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>