feat(addon-mobile): Sheet make top offset dynamic (#1747)

* feat(addon-mobile): `Sheet` make top offset dynamic

* chore: fix build

projects/addon-mobile/components/sheet/components/sheet/sheet.providers.ts

@@ -15,6 +15,7 @@ export const TUI_SHEET_DRAGGED = new InjectionToken<boolean>(
     'The sheet is being dragged',
 );
 
+/** @deprecated use option argument for each Sheet */
 export const TUI_SHEET_OFFSET = new InjectionToken<number>(
     'Offset from the top at which the sheet stops',
     {

projects/addon-mobile/components/sheet/components/sheets-host/sheets-host.component.ts

@@ -6,7 +6,6 @@ import {Observable} from 'rxjs';
 
 import {TuiSheet} from '../../sheet';
 import {TuiSheetService} from '../../sheet.service';
-import {TUI_SHEET_OFFSET} from '../sheet/sheet.providers';
 
 // @dynamic
 @Component({
@@ -18,7 +17,6 @@ import {TUI_SHEET_OFFSET} from '../sheet/sheet.providers';
 })
 export class TuiSheetsHostComponent {
     constructor(
-        @Inject(TUI_SHEET_OFFSET) private readonly offset: number,
         @Inject(TUI_ANIMATION_OPTIONS) readonly options: AnimationOptions,
         @Inject(TuiSheetService) readonly service: TuiSheetService,
         @Inject(TUI_WINDOW_HEIGHT) readonly height$: Observable<number>,
@@ -29,8 +27,4 @@ export class TuiSheetsHostComponent {
             $implicit.complete();
         }
     }
-
-    getHeight(height: number | null): number {
-        return (height ?? 0) - this.offset;
-    }
 }

projects/addon-mobile/components/sheet/components/sheets-host/sheets-host.template.html

@@ -1,17 +1,17 @@
 <ng-container *ngIf="service.sheets$ | async as items">
     <div
         *ngFor="let item of items"
-        tuiSheetWrapper
         class="t-wrapper"
         [@tuiSlideInTop]="options"
         [@tuiFadeIn]="options"
+        [tuiSheetWrapper]="item.offset"
         [class.t-wrapper_overlay]="item.overlay"
         [class.t-wrapper_closeable]="item.closeable"
     >
         <tui-sheet
             tuiScrollRef
             tuiOverscroll="all"
-            [style.height.px]="getHeight(height$ | async)"
+            [style.height.px]="((height$ | async) || 0) - item.offset"
             [item]="item"
             (close)="close(item)"
         ></tui-sheet>

projects/addon-mobile/components/sheet/directives/sheet-top/sheet-top.directive.ts

@@ -1,10 +1,11 @@
-import {Directive, Inject, Input} from '@angular/core';
+import {Directive, forwardRef, Inject, Input} from '@angular/core';
 import {WINDOW} from '@ng-web-apis/common';
 import {clamp, tuiDefaultProp} from '@taiga-ui/cdk';
 import {Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
 
-import {TUI_SHEET_OFFSET, TUI_SHEET_SCROLL} from '../../components/sheet/sheet.providers';
+import {TuiSheetComponent} from '../../components/sheet/sheet.component';
+import {TUI_SHEET_SCROLL} from '../../components/sheet/sheet.providers';
 
 // So that borders get rounded when image is visible for at least 10px
 const OFFSET = 10;
@@ -36,13 +37,14 @@ export class TuiSheetTopDirective {
 
     constructor(
         @Inject(TUI_SHEET_SCROLL) private readonly scroll$: Observable<number>,
-        @Inject(TUI_SHEET_OFFSET) private readonly offset: number,
+        @Inject(forwardRef(() => TuiSheetComponent))
+        private readonly component: TuiSheetComponent<unknown>,
         @Inject(WINDOW) private readonly windowRef: Window,
     ) {}
 
     private getY(scrollTop: number): number {
         const value = scrollTop - this.stop;
-        const total = this.windowRef.innerHeight - this.offset - this.stop;
+        const total = this.windowRef.innerHeight - this.component.item.offset - this.stop;
 
         return this.stop && clamp(100 - (value / total) * 100, 0, 100);
     }

projects/addon-mobile/components/sheet/directives/sheet-wrapper/sheet-wrapper.directive.ts

@@ -1,4 +1,4 @@
-import {ContentChild, Directive, Inject} from '@angular/core';
+import {ContentChild, Directive, Inject, Input} from '@angular/core';
 import {WINDOW} from '@ng-web-apis/common';
 import {clamp, tuiPure} from '@taiga-ui/cdk';
 import {Observable} from 'rxjs';
@@ -7,7 +7,6 @@ import {map} from 'rxjs/operators';
 import {TuiSheetComponent} from '../../components/sheet/sheet.component';
 import {
     TUI_SHEET_DRAGGED,
-    TUI_SHEET_OFFSET,
     TUI_SHEET_SCROLL,
 } from '../../components/sheet/sheet.providers';
 import {processDragged} from '../../ios.hacks';
@@ -37,18 +36,18 @@ export class TuiSheetWrapperDirective {
     @ContentChild(TuiSheetComponent, {read: TUI_SHEET_SCROLL})
     private readonly scroll$!: Observable<number>;
 
+    @Input()
+    tuiSheetWrapper = 16;
+
     // Trying to get overflow: visible as early as possible for Safari
     touched = false;
 
-    constructor(
-        @Inject(WINDOW) private readonly windowRef: Window,
-        @Inject(TUI_SHEET_OFFSET) private readonly offset: number,
-    ) {}
+    constructor(@Inject(WINDOW) private readonly windowRef: Window) {}
 
     @tuiPure
     get overlay$(): Observable<boolean> {
         return this.scroll$.pipe(
-            map(y => y + 16 > this.windowRef.innerHeight - this.offset),
+            map(y => y + 16 > this.windowRef.innerHeight - this.tuiSheetWrapper),
         );
     }
 

projects/addon-mobile/components/sheet/sheet-options.ts

@@ -1,13 +1,15 @@
-import {InjectionToken} from '@angular/core';
+import {inject, InjectionToken} from '@angular/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
+import {TUI_SHEET_OFFSET} from './components/sheet/sheet.providers';
 import {TuiSheet} from './sheet';
 
 export interface TuiSheetOptions<I = undefined, O = unknown> {
     readonly image: PolymorpheusContent<TuiSheet<O, I>>;
     readonly imageSlide: boolean;
     readonly stops: readonly string[];
     readonly initial: number;
+    readonly offset: number;
     readonly closeable: boolean;
     readonly overlay: boolean;
     readonly data: I;
@@ -18,13 +20,14 @@ export const TUI_SHEET_DEFAULT_OPTIONS: Omit<TuiSheetOptions, 'data'> = {
     imageSlide: true,
     stops: [],
     initial: 0,
+    offset: 16,
     closeable: true,
     overlay: false,
 };
 
 export const TUI_SHEET_OPTIONS = new InjectionToken<Omit<TuiSheetOptions, 'data'>>(
     'Default parameters for sheet component',
     {
-        factory: () => TUI_SHEET_DEFAULT_OPTIONS,
+        factory: () => ({...TUI_SHEET_DEFAULT_OPTIONS, offset: inject(TUI_SHEET_OFFSET)}),
     },
 );