feat(kit): add InputMultiDate (#5620)

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

@@ -21,7 +21,7 @@ export class TuiMobileCalendarDialogComponent {
     constructor(
         @Inject(POLYMORPHEUS_CONTEXT)
         readonly context: TuiDialogContext<
-            TuiDay | TuiDayRange,
+            TuiDay | TuiDayRange | readonly TuiDay[],
             TuiMobileCalendarData | undefined
         >,
     ) {}

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

@@ -38,6 +38,7 @@ import {
     TUI_CANCEL_WORD,
     TUI_CHOOSE_DAY_OR_RANGE_TEXTS,
     TUI_DONE_WORD,
+    tuiImmutableUpdateInputDateMulti,
 } from '@taiga-ui/kit';
 import {identity, MonoTypeOperatorFunction, Observable, race, timer} from 'rxjs';
 import {
@@ -98,9 +99,9 @@ export class TuiMobileCalendarComponent implements AfterViewInit {
     readonly cancel = new EventEmitter<void>();
 
     @Output()
-    readonly confirm = new EventEmitter<TuiDay | TuiDayRange>();
+    readonly confirm = new EventEmitter<TuiDay | TuiDayRange | readonly TuiDay[]>();
 
-    value: TuiDay | TuiDayRange | null = null;
+    value: TuiDay | TuiDayRange | readonly TuiDay[] | null = null;
 
     readonly years = Array.from({length: RANGE}, (_, i) => i + STARTING_YEAR);
 
@@ -167,11 +168,13 @@ export class TuiMobileCalendarComponent implements AfterViewInit {
             return;
         }
 
-        if (
-            this.value === null ||
-            this.value instanceof TuiDay ||
-            !this.value.isSingleDay
-        ) {
+        if (!(this.value instanceof TuiDayRange) && !(this.value instanceof TuiDay)) {
+            this.value = tuiImmutableUpdateInputDateMulti(this.value ?? [], day);
+
+            return;
+        }
+
+        if (this.value instanceof TuiDay || !this.value?.isSingleDay) {
             this.value = new TuiDayRange(day, day);
 
             return;
@@ -242,6 +245,10 @@ export class TuiMobileCalendarComponent implements AfterViewInit {
             return this.value.year;
         }
 
+        if (!(this.value instanceof TuiDayRange)) {
+            return this.value?.[0]?.year ?? this.today.year;
+        }
+
         return this.value.from.year;
     }
 
@@ -254,6 +261,14 @@ export class TuiMobileCalendarComponent implements AfterViewInit {
             return this.value.month + (this.value.year - STARTING_YEAR) * MONTHS_IN_YEAR;
         }
 
+        if (!(this.value instanceof TuiDayRange)) {
+            return (
+                (this.value?.[0]?.month ?? this.today.month) +
+                ((this.value?.[0]?.year ?? this.today.year) - STARTING_YEAR) *
+                    MONTHS_IN_YEAR
+            );
+        }
+
         return (
             this.value.from.month +
             (this.value.from.year - STARTING_YEAR) * MONTHS_IN_YEAR

projects/demo/src/modules/app/app.routes.ts

@@ -588,6 +588,15 @@ export const ROUTES: Routes = [
             title: `InputDate`,
         },
     },
+    {
+        path: `components/input-date-multi`,
+        loadChildren: async () =>
+            (await import(`../components/input-date-multi/input-date-multi.module`))
+                .ExampleTuiInputDateMultiModule,
+        data: {
+            title: `InputDateMulti`,
+        },
+    },
     {
         path: `components/input-card`,
         loadChildren: async () =>

projects/demo/src/modules/app/pages.ts

@@ -412,6 +412,14 @@ export const pages: TuiDocPages = [
                     `неделя, месяц, год, дата, calendar`,
                 route: `/components/input-date`,
             },
+            {
+                section: `Components`,
+                title: `InputDateMulti`,
+                keywords:
+                    `поле, инпут, форма, ввод, input, календарь, день, ` +
+                    `неделя, месяц, год, дата, calendar, multiple`,
+                route: `/components/input-date-multi`,
+            },
             {
                 section: `Components`,
                 title: `InputDateRange`,

projects/demo/src/modules/components/input-date-multi/examples/1/index.html

@@ -0,0 +1,9 @@
+<form [formGroup]="testForm">
+    <tui-input-date
+        formControlName="testValue"
+        multiple
+        [tuiTextfieldLabelOutside]="true"
+    >
+        Choose a dates
+    </tui-input-date>
+</form>

projects/demo/src/modules/components/input-date-multi/examples/1/index.ts

@@ -0,0 +1,21 @@
+import {Component} from '@angular/core';
+import {FormControl, FormGroup} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiDay} from '@taiga-ui/cdk';
+
+@Component({
+    selector: 'tui-input-date-multi-example-1',
+    templateUrl: './index.html',
+    changeDetection,
+    encapsulation,
+})
+export class TuiInputDateMultiExample1 {
+    readonly testForm = new FormGroup({
+        testValue: new FormControl([
+            new TuiDay(2017, 0, 7),
+            new TuiDay(2017, 0, 10),
+            new TuiDay(2017, 0, 15),
+        ]),
+    });
+}

projects/demo/src/modules/components/input-date-multi/examples/import/declare-form.md

@@ -0,0 +1,12 @@
+```ts
+import {FormControl, FormGroup} from '@angular/forms';
+
+@Component({
+  // ...
+})
+export class MyComponent {
+  testForm = new FormGroup({
+    testValue: new FormControl([]),
+  });
+}
+```

projects/demo/src/modules/components/input-date-multi/examples/import/import-module.md

@@ -0,0 +1,14 @@
+```ts
+import {ReactiveFormsModule} from '@angular/forms';
+import {TuiInputDateMultiModule} from '@taiga-ui/kit';
+
+@NgModule({
+  imports: [
+    // ...
+    ReactiveFormsModule,
+    TuiInputDateMultiModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```

projects/demo/src/modules/components/input-date-multi/examples/import/insert-template.md

@@ -0,0 +1,10 @@
+```html
+<form [formGroup]="testForm">
+  <tui-input-date
+    multiple
+    formControlName="testValue"
+  >
+    Choose a date
+  </tui-input-date>
+</form>
+```

projects/demo/src/modules/components/input-date-multi/input-date-multi.component.ts

@@ -0,0 +1,80 @@
+import {Component, forwardRef} from '@angular/core';
+import {FormControl, Validators} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
+import {
+    ALWAYS_FALSE_HANDLER,
+    TUI_FIRST_DAY,
+    TUI_LAST_DAY,
+    TuiBooleanHandler,
+    TuiDay,
+} from '@taiga-ui/cdk';
+import {TUI_DEFAULT_MARKER_HANDLER, TuiMarkerHandler} from '@taiga-ui/core';
+
+import {AbstractExampleTuiControl} from '../abstract/control';
+import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor';
+
+@Component({
+    selector: 'example-tui-input-date-multi',
+    templateUrl: './input-date-multi.template.html',
+    changeDetection,
+    providers: [
+        {
+            provide: ABSTRACT_PROPS_ACCESSOR,
+            useExisting: forwardRef(() => ExampleTuiInputDateMultiComponent),
+        },
+    ],
+})
+export class ExampleTuiInputDateMultiComponent extends AbstractExampleTuiControl {
+    readonly exampleForm = import('./examples/import/declare-form.md?raw');
+    readonly exampleModule = import('./examples/import/import-module.md?raw');
+    readonly exampleHtml = import('./examples/import/insert-template.md?raw');
+
+    readonly example1: TuiDocExample = {
+        TypeScript: import('./examples/1/index.ts?raw'),
+        HTML: import('./examples/1/index.html?raw'),
+    };
+
+    minVariants = [
+        TUI_FIRST_DAY,
+        new TuiDay(2017, 2, 5),
+        new TuiDay(1900, 0, 1),
+        new TuiDay(new Date().getFullYear() + 3, 1, 1),
+    ];
+
+    min = this.minVariants[0];
+
+    maxVariants = [
+        TUI_LAST_DAY,
+        new TuiDay(2017, 11, 11),
+        new TuiDay(2020, 2, 5),
+        new TuiDay(2300, 0, 1),
+    ];
+
+    max = this.maxVariants[0];
+
+    rowsVariants = [Infinity, 10, 3, 2];
+
+    rows = this.rowsVariants[0];
+
+    readonly disabledItemHandlerVariants: ReadonlyArray<TuiBooleanHandler<TuiDay>> = [
+        ALWAYS_FALSE_HANDLER,
+        ({day}) => day % 3 === 0,
+    ];
+
+    disabledItemHandler = this.disabledItemHandlerVariants[0];
+
+    readonly markerHandlerVariants: readonly TuiMarkerHandler[] = [
+        TUI_DEFAULT_MARKER_HANDLER,
+        (day: TuiDay) =>
+            day.day % 2 === 0
+                ? ['var(--tui-primary)', 'var(--tui-info-fill)']
+                : ['var(--tui-success-fill)'],
+    ];
+
+    markerHandler: TuiMarkerHandler = this.markerHandlerVariants[0];
+
+    expandable = false;
+
+    control = new FormControl([], Validators.required);
+}

projects/demo/src/modules/components/input-date-multi/input-date-multi.module.ts

@@ -0,0 +1,35 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {ReactiveFormsModule} from '@angular/forms';
+import {TuiAddonDocModule, tuiGetDocModules} from '@taiga-ui/addon-doc';
+import {TuiMobileCalendarDialogModule} from '@taiga-ui/addon-mobile';
+import {
+    TuiDropdownModule,
+    TuiHintModule,
+    TuiLinkModule,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/core';
+import {TuiInputDateMultiModule} from '@taiga-ui/kit';
+
+import {InheritedDocumentationModule} from '../abstract/inherited-documentation/inherited-documentation.module';
+import {TuiInputDateMultiExample1} from './examples/1';
+import {ExampleTuiInputDateMultiComponent} from './input-date-multi.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        TuiLinkModule,
+        TuiHintModule,
+        TuiDropdownModule,
+        TuiAddonDocModule,
+        ReactiveFormsModule,
+        TuiInputDateMultiModule,
+        TuiMobileCalendarDialogModule,
+        TuiTextfieldControllerModule,
+        InheritedDocumentationModule,
+        tuiGetDocModules(ExampleTuiInputDateMultiComponent),
+    ],
+    declarations: [ExampleTuiInputDateMultiComponent, TuiInputDateMultiExample1],
+    exports: [ExampleTuiInputDateMultiComponent],
+})
+export class ExampleTuiInputDateMultiModule {}