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

taiga-family · Jul 30, 2024 · e259184 · e259184
1 parent 4d8d5a1
commit e259184
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 4 deletions.
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"
@@ -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"

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,6 @@
+<div class="example">
+    <tui-mobile-calendar
+        [max]="max"
+        [min]="min"
+    />
+</div>
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,3 @@
+.example {
+    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,26 @@
+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';
+import {of} from 'rxjs';
+
+@Component({
+    standalone: true,
+    imports: [TuiMobileCalendar],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+    providers: [
+        {
+            provide: TUI_CHOOSE_DAY_OR_RANGE_TEXTS,
+            useValue: of(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);
+}
diff --git a/projects/demo/src/modules/components/mobile-calendar/index.html b/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>

diff --git a/projects/i18n/types/language.ts b/projects/i18n/types/language.ts
@@ -61,7 +61,7 @@ export interface TuiLanguageKit {
     /**
      * [@string 'choose day', @param 'choose range', @param 'choose days']
      */
-    mobileCalendarTexts: [string, string, string];
+    mobileCalendarTexts: [string, string, string] | null;
     more: string;
     multiSelectTexts: {
         all: string;