feat(addon-mobile): add [(value)] to mobile-calendar

taiga-family · Aug 1, 2024 · 3356d63 · 3356d63
1 parent c94627f
commit 3356d63
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 2 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
@@ -43,13 +43,22 @@ import {
     TUI_DONE_WORD,
     tuiImmutableUpdateInputDateMulti,
 } from '@taiga-ui/kit';
-import {identity, MonoTypeOperatorFunction, Observable, race, timer} from 'rxjs';
+import {
+    BehaviorSubject,
+    identity,
+    MonoTypeOperatorFunction,
+    Observable,
+    race,
+    timer,
+} from 'rxjs';
 import {
     debounceTime,
     delay,
+    distinctUntilChanged,
     filter,
     map,
     mergeMap,
+    skip,
     switchMap,
     take,
     takeUntil,
@@ -86,6 +95,10 @@ export class TuiMobileCalendarComponent implements AfterViewInit {
     @ViewChild('monthsScrollRef')
     private readonly monthsScrollRef?: CdkVirtualScrollViewport;
 
+    private readonly value$ = new BehaviorSubject<
+        TuiDay | TuiDayRange | readonly TuiDay[] | null
+    >(null);
+
     private readonly today = TuiDay.currentLocal();
     private activeYear = 0;
     private activeMonth = 0;
@@ -111,7 +124,10 @@ export class TuiMobileCalendarComponent implements AfterViewInit {
     @Output()
     readonly confirm = new EventEmitter<TuiDay | TuiDayRange | readonly TuiDay[]>();
 
-    value: TuiDay | TuiDayRange | readonly TuiDay[] | null = null;
+    @Output()
+    readonly valueChange = new EventEmitter<
+        TuiDay | TuiDayRange | readonly TuiDay[] | null
+    >();
 
     readonly years = Array.from({length: RANGE}, (_, i) => i + STARTING_YEAR);
 
@@ -149,6 +165,23 @@ export class TuiMobileCalendarComponent implements AfterViewInit {
         valueChanges.pipe(takeUntil(this.destroy$)).subscribe(value => {
             this.value = value;
         });
+
+        this.value$
+            .pipe(
+                skip(1),
+                distinctUntilChanged((a, b) => a?.toString() === b?.toString()),
+                takeUntil(this.destroy$),
+            )
+            .subscribe(this.valueChange);
+    }
+
+    get value(): TuiDay | TuiDayRange | readonly TuiDay[] | null {
+        return this.value$.value;
+    }
+
+    @Input()
+    set value(value: TuiDay | TuiDayRange | readonly TuiDay[] | null) {
+        this.value$.next(value);
     }
 
     get yearWidth(): number {

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
@@ -107,6 +107,13 @@
         </tui-doc-demo>
 
         <tui-doc-documentation>
+            <ng-template
+                documentationPropertyMode="input-output"
+                documentationPropertyName="value"
+                documentationPropertyType="TuiDay | TuiDayRange | readonly TuiDay[] | null"
+            >
+                Value
+            </ng-template>
             <ng-template
                 documentationPropertyMode="input"
                 documentationPropertyName="disabledItemHandler"