diff --git a/projects/addon-mobile/components/sheet/components/sheet/sheet.providers.ts b/projects/addon-mobile/components/sheet/components/sheet/sheet.providers.ts index d2753b761b69..23f32cf3cff7 100644 --- a/projects/addon-mobile/components/sheet/components/sheet/sheet.providers.ts +++ b/projects/addon-mobile/components/sheet/components/sheet/sheet.providers.ts @@ -15,6 +15,7 @@ export const TUI_SHEET_DRAGGED = new InjectionToken( 'The sheet is being dragged', ); +/** @deprecated use option argument for each Sheet */ export const TUI_SHEET_OFFSET = new InjectionToken( 'Offset from the top at which the sheet stops', { diff --git a/projects/addon-mobile/components/sheet/components/sheets-host/sheets-host.component.ts b/projects/addon-mobile/components/sheet/components/sheets-host/sheets-host.component.ts index dc487bc69ecb..a170ce0cdd54 100644 --- a/projects/addon-mobile/components/sheet/components/sheets-host/sheets-host.component.ts +++ b/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, @@ -29,8 +27,4 @@ export class TuiSheetsHostComponent { $implicit.complete(); } } - - getHeight(height: number | null): number { - return (height ?? 0) - this.offset; - } } diff --git a/projects/addon-mobile/components/sheet/components/sheets-host/sheets-host.template.html b/projects/addon-mobile/components/sheet/components/sheets-host/sheets-host.template.html index 1fe1a940a4df..9f088a2b8e06 100644 --- a/projects/addon-mobile/components/sheet/components/sheets-host/sheets-host.template.html +++ b/projects/addon-mobile/components/sheet/components/sheets-host/sheets-host.template.html @@ -1,17 +1,17 @@
diff --git a/projects/addon-mobile/components/sheet/directives/sheet-top/sheet-top.directive.ts b/projects/addon-mobile/components/sheet/directives/sheet-top/sheet-top.directive.ts index 72516e47c7c0..59dc73dbea62 100644 --- a/projects/addon-mobile/components/sheet/directives/sheet-top/sheet-top.directive.ts +++ b/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, - @Inject(TUI_SHEET_OFFSET) private readonly offset: number, + @Inject(forwardRef(() => TuiSheetComponent)) + private readonly component: TuiSheetComponent, @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); } diff --git a/projects/addon-mobile/components/sheet/directives/sheet-wrapper/sheet-wrapper.directive.ts b/projects/addon-mobile/components/sheet/directives/sheet-wrapper/sheet-wrapper.directive.ts index 4126375f3691..88761bbcae06 100644 --- a/projects/addon-mobile/components/sheet/directives/sheet-wrapper/sheet-wrapper.directive.ts +++ b/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; + @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 { return this.scroll$.pipe( - map(y => y + 16 > this.windowRef.innerHeight - this.offset), + map(y => y + 16 > this.windowRef.innerHeight - this.tuiSheetWrapper), ); } diff --git a/projects/addon-mobile/components/sheet/sheet-options.ts b/projects/addon-mobile/components/sheet/sheet-options.ts index 6156bcc6ff70..5b06c90880a2 100644 --- a/projects/addon-mobile/components/sheet/sheet-options.ts +++ b/projects/addon-mobile/components/sheet/sheet-options.ts @@ -1,6 +1,7 @@ -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 { @@ -8,6 +9,7 @@ export interface TuiSheetOptions { readonly imageSlide: boolean; readonly stops: readonly string[]; readonly initial: number; + readonly offset: number; readonly closeable: boolean; readonly overlay: boolean; readonly data: I; @@ -18,6 +20,7 @@ export const TUI_SHEET_DEFAULT_OPTIONS: Omit = { imageSlide: true, stops: [], initial: 0, + offset: 16, closeable: true, overlay: false, }; @@ -25,6 +28,6 @@ export const TUI_SHEET_DEFAULT_OPTIONS: Omit = { export const TUI_SHEET_OPTIONS = new InjectionToken>( 'Default parameters for sheet component', { - factory: () => TUI_SHEET_DEFAULT_OPTIONS, + factory: () => ({...TUI_SHEET_DEFAULT_OPTIONS, offset: inject(TUI_SHEET_OFFSET)}), }, );