@taiga-ui/addon-mobile 2.55.0 → 3.0.0-rc.0

package/fesm2015/taiga-ui-addon-mobile-components-sheet.js

@@ -1,21 +1,27 @@
-import { __decorate, __param } from 'tslib';
-import { Inject, ElementRef, Component, ChangeDetectionStrategy, InjectionToken, NgZone, ViewChild, ViewChildren, Input, HostListener, inject, ɵɵdefineInjectable, ɵɵinject, Injectable, Output, Directive, forwardRef, ContentChild, ChangeDetectorRef, TemplateRef, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { typedFromEvent, tuiZonefree, TuiIdService, TUI_IS_IOS, EMPTY_QUERY, tuiZonefull, tuiPure, clamp, TUI_WINDOW_HEIGHT, TuiDestroyService, tuiDefaultProp, tuiRequiredSetter, TuiLetModule, TuiOverscrollModule } from '@taiga-ui/cdk';
-import { TUI_CLOSE_WORD, TUI_SCROLL_REF, tuiSlideInTop, tuiZonefulMap, TUI_ANIMATION_OPTIONS, tuiFadeIn, TuiButtonModule, TuiScrollbarModule } from '@taiga-ui/core';
+import { __decorate } from 'tslib';
+import * as i0 from '@angular/core';
+import { InjectionToken, ElementRef, Component, ChangeDetectionStrategy, Inject, NgZone, forwardRef, Directive, Input, ViewChild, ViewChildren, HostListener, Injectable, ContentChild, Output, ChangeDetectorRef, TemplateRef, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import * as i3 from '@taiga-ui/cdk';
+import { typedFromEvent, tuiZonefree, TuiIdService, TUI_IS_IOS, clamp, tuiDefaultProp, TuiDestroyService, EMPTY_QUERY, tuiZonefull, tuiPure, TUI_WINDOW_HEIGHT, tuiRequiredSetter, TuiLetModule, TuiOverscrollModule } from '@taiga-ui/cdk';
+import * as i1 from '@taiga-ui/core';
+import { TUI_CLOSE_WORD, TUI_SCROLL_REF, tuiZonefulMap, tuiSlideInTop, TUI_ANIMATION_OPTIONS, tuiFadeIn, TuiButtonModule, TuiScrollbarModule } from '@taiga-ui/core';
 import { TUI_MORE_WORD } from '@taiga-ui/kit';
-import { merge, concat, zip, race, timer, Observable, BehaviorSubject, EMPTY, Subject } from 'rxjs';
 import { map, delay, switchMap, takeUntil, take, share, filter, debounceTime, mapTo, switchMapTo, startWith, distinctUntilChanged, withLatestFrom, throttleTime, ignoreElements, endWith } from 'rxjs/operators';
+import * as i1$1 from 'rxjs';
+import { merge, concat, zip, race, timer, BehaviorSubject, Observable, EMPTY, Subject } from 'rxjs';
+import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import { WINDOW } from '@ng-web-apis/common';
+import * as i5 from '@tinkoff/ng-polymorpheus';
 import { PolymorpheusTemplate, PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function iosScrollFactory(element, documentRef, ngZone) {
-    const load$ = typedFromEvent(element, 'load', { capture: true });
-    const touchstart$ = typedFromEvent(element, 'touchstart', { passive: true });
-    const touchmove$ = typedFromEvent(documentRef, 'touchmove', { passive: true });
-    const touchend$ = typedFromEvent(documentRef, 'touchend');
-    const scroll$ = typedFromEvent(element, 'scroll').pipe(map(() => element.scrollTop));
+    const load$ = typedFromEvent(element, `load`, { capture: true });
+    const touchstart$ = typedFromEvent(element, `touchstart`, { passive: true });
+    const touchmove$ = typedFromEvent(documentRef, `touchmove`, { passive: true });
+    const touchend$ = typedFromEvent(documentRef, `touchend`);
+    const scroll$ = typedFromEvent(element, `scroll`).pipe(map(() => element.scrollTop));
     const result$ = merge(load$.pipe(delay(0), map(() => element.scrollTop)), touchstart$.pipe(switchMap(({ touches }) => {
         const { screenY } = touches[0];
         const { scrollTop } = element;
@@ -34,17 +40,21 @@ function processDragged(dragged$, scroll$) {
 }
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function fakeSmoothScroll({ style }, offset) {
-    style.transition = 'none';
+    style.transition = `none`;
     style.transform = `scaleX(-1) translate3d(0, ${offset}px, 0)`;
     setTimeout(() => {
-        style.transition = '';
-        style.transform = '';
+        style.transition = ``;
+        style.transform = ``;
     });
 }
 
-const TUI_SHEET_CLOSE = 'tui-sheet-close';
-const TUI_SHEET_ID = 'tui-sheet-id';
-let TuiSheetHeadingComponent = class TuiSheetHeadingComponent {
+const TUI_SHEET = new InjectionToken(`[TUI_SHEET] Sheet main component`);
+const TUI_SHEET_SCROLL = new InjectionToken(`Current scrollTop of a sheet`);
+const TUI_SHEET_DRAGGED = new InjectionToken(`The sheet is being dragged`);
+
+const TUI_SHEET_CLOSE = `tui-sheet-close`;
+const TUI_SHEET_ID = `tui-sheet-id`;
+class TuiSheetHeadingComponent {
     constructor(idService, elementRef, closeWord$) {
         this.idService = idService;
         this.elementRef = elementRef;
@@ -57,30 +67,28 @@ let TuiSheetHeadingComponent = class TuiSheetHeadingComponent {
     onClick() {
         this.elementRef.nativeElement.dispatchEvent(new CustomEvent(TUI_SHEET_CLOSE, { bubbles: true }));
     }
-};
-TuiSheetHeadingComponent.ctorParameters = () => [
-    { type: TuiIdService, decorators: [{ type: Inject, args: [TuiIdService,] }] },
-    { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
-    { type: Observable, decorators: [{ type: Inject, args: [TUI_CLOSE_WORD,] }] }
-];
-TuiSheetHeadingComponent = __decorate([
-    Component({
-        selector: '[tuiSheetHeading]',
-        template: "<button\n    tuiIconButton\n    size=\"xs\"\n    appearance=\"icon\"\n    icon=\"tuiIconCloseLarge\"\n    class=\"t-close\"\n    [title]=\"closeWord$ | async\"\n    (click)=\"onClick()\"\n></button>\n<span [id]=\"id\">\n    <ng-content></ng-content>\n</span>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [":host{position:-webkit-sticky;position:sticky;top:0;z-index:1;min-height:2rem;box-sizing:border-box;margin:-1.25rem -1rem 0;padding:1.5rem 1rem 1rem;background:var(--tui-base-01);border-radius:.75rem .75rem 0 0;font:var(--tui-font-heading-6);box-shadow:inset 0 1px rgba(255,255,255,.25)}:host:after{content:'';position:absolute;top:100%;left:0;right:0;height:1px;background:var(--tui-base-03);opacity:0}:host :host-context(._stuck):after{opacity:1}.t-close{display:none;float:right;margin-right:-.25rem}:host-context(.t-wrapper_closeable) .t-close{display:block}"]
-    }),
-    __param(0, Inject(TuiIdService)),
-    __param(1, Inject(ElementRef)),
-    __param(2, Inject(TUI_CLOSE_WORD))
-], TuiSheetHeadingComponent);
+}
+TuiSheetHeadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSheetHeadingComponent, deps: [{ token: TuiIdService }, { token: ElementRef }, { token: TUI_CLOSE_WORD }], target: i0.ɵɵFactoryTarget.Component });
+TuiSheetHeadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiSheetHeadingComponent, selector: "[tuiSheetHeading]", ngImport: i0, template: "<button\n    tuiIconButton\n    size=\"xs\"\n    appearance=\"icon\"\n    icon=\"tuiIconCloseLarge\"\n    class=\"t-close\"\n    [title]=\"closeWord$ | async\"\n    (click)=\"onClick()\"\n></button>\n<span [id]=\"id\">\n    <ng-content></ng-content>\n</span>\n", styles: [":host{position:-webkit-sticky;position:sticky;top:0;z-index:1;min-height:2rem;box-sizing:border-box;margin:-1.25rem -1rem 0;padding:1.5rem 1rem 1rem;background:var(--tui-base-01);border-radius:.75rem .75rem 0 0;font:var(--tui-font-heading-6);box-shadow:inset 0 1px rgba(255,255,255,.25)}:host:after{content:\"\";position:absolute;top:100%;left:0;right:0;height:1px;background:var(--tui-base-03);opacity:0}:host :host-context(._stuck):after{opacity:1}.t-close{display:none;float:right;margin-right:-.25rem}:host-context(.t-wrapper_closeable) .t-close{display:block}\n"], components: [{ type: i1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSheetHeadingComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: `[tuiSheetHeading]`,
+                    templateUrl: `sheet-heading.template.html`,
+                    styleUrls: [`sheet-heading.style.less`],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i3.TuiIdService, decorators: [{
+                    type: Inject,
+                    args: [TuiIdService]
+                }] }, { type: i0.ElementRef, decorators: [{
+                    type: Inject,
+                    args: [ElementRef]
+                }] }, { type: i1$1.Observable, decorators: [{
+                    type: Inject,
+                    args: [TUI_CLOSE_WORD]
+                }] }]; } });
 
-const TUI_SHEET_SCROLL = new InjectionToken('Current scrollTop of a sheet');
-const TUI_SHEET_DRAGGED = new InjectionToken('The sheet is being dragged');
-/** @deprecated use option argument for each Sheet */
-const TUI_SHEET_OFFSET = new InjectionToken('Offset from the top at which the sheet stops', {
-    factory: () => 16,
-});
 const TUI_SHEET_PROVIDERS = [
     {
         provide: TUI_SHEET_DRAGGED,
@@ -96,20 +104,146 @@ const TUI_SHEET_PROVIDERS = [
         provide: TUI_SCROLL_REF,
         useExisting: ElementRef,
     },
+    {
+        provide: TUI_SHEET,
+        useExisting: forwardRef(() => TuiSheetComponent),
+    },
 ];
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function sheetDraggedFactory({ nativeElement, }) {
-    return merge(typedFromEvent(nativeElement, 'touchstart', { passive: true }).pipe(mapTo(true)), typedFromEvent(nativeElement, 'touchend').pipe(mapTo(false)));
+    return merge(typedFromEvent(nativeElement, `touchstart`, { passive: true }).pipe(mapTo(true)), typedFromEvent(nativeElement, `touchend`).pipe(mapTo(false)));
 }
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function sheetScrollFactory({ nativeElement }, ngZone, documentRef, isIos) {
     return isIos
         ? iosScrollFactory(nativeElement, documentRef, ngZone)
-        : merge(typedFromEvent(nativeElement, 'scroll'), typedFromEvent(nativeElement, 'load', { capture: true })).pipe(map(() => nativeElement.scrollTop), tuiZonefree(ngZone), share());
+        : merge(typedFromEvent(nativeElement, `scroll`), typedFromEvent(nativeElement, `load`, { capture: true })).pipe(map(() => nativeElement.scrollTop), tuiZonefree(ngZone), share());
+}
+
+class TuiSheetBarComponent {
+    constructor(sheet, scroll$, ngZone) {
+        this.sheet = sheet;
+        this.scroll$ = scroll$;
+        this.ngZone = ngZone;
+        this.rotate$ = this.scroll$.pipe(tuiZonefulMap(y => clamp(10 - (y - this.stop) / 5, 0, 10), this.ngZone));
+    }
+    get stop() {
+        return this.sheet.stops[0] || 0;
+    }
+}
+TuiSheetBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSheetBarComponent, deps: [{ token: TUI_SHEET }, { token: TUI_SHEET_SCROLL }, { token: NgZone }], target: i0.ɵɵFactoryTarget.Component });
+TuiSheetBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiSheetBarComponent, selector: "tui-sheet-bar", ngImport: i0, template: "<ng-container *tuiLet=\"rotate$ | async as deg\">\n    <div\n        style=\"transform: rotate(-{{ deg }}deg)\"\n        class=\"t-bar\"\n    ></div>\n    <ng-content *ngIf=\"deg\"></ng-content>\n    <div\n        style=\"transform: rotate({{ deg }}deg)\"\n        class=\"t-bar\"\n    ></div>\n</ng-container>\n", styles: [":host{transition-property:border-radius;transition-duration:.3s;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:-webkit-sticky;position:sticky;top:0;z-index:2;display:flex;height:1.25rem;align-items:center;justify-content:center;opacity:.3}.t-bar{content:\"\";height:.25rem;width:1rem;background:var(--tui-base-09);pointer-events:none}:host-context(._ios:not(._dragged)) .t-bar{transition-property:transform;transition-duration:.3s;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out}.t-bar:first-child{border-radius:1rem 0 0 1rem;transform-origin:top right}.t-bar:last-child{border-radius:0 1rem 1rem 0;transform-origin:top left}\n"], directives: [{ type: i3.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSheetBarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: `tui-sheet-bar`,
+                    templateUrl: `sheet-bar.template.html`,
+                    styleUrls: [`sheet-bar.style.less`],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_SHEET]
+                }] }, { type: i1$1.Observable, decorators: [{
+                    type: Inject,
+                    args: [TUI_SHEET_SCROLL]
+                }] }, { type: i0.NgZone, decorators: [{
+                    type: Inject,
+                    args: [NgZone]
+                }] }]; } });
+
+// So that borders get rounded when image is visible for at least 10px
+const OFFSET$1 = 10;
+// @dynamic
+class TuiSheetTopDirective {
+    constructor(scroll$, component, windowRef) {
+        this.scroll$ = scroll$;
+        this.component = component;
+        this.windowRef = windowRef;
+        this.stop = 0;
+        this.transform$ = this.scroll$.pipe(map(y => `translateY(${this.getY(y)}%) scaleX(-1)`));
+        this.rounded$ = this.scroll$.pipe(map(y => y < this.stop + OFFSET$1));
+        this.clickthrough$ = this.scroll$.pipe(map(y => !!Math.round(this.getY(y))));
+    }
+    getY(scrollTop) {
+        const value = scrollTop - this.stop;
+        const total = this.windowRef.innerHeight - this.component.item.offset - this.stop;
+        return this.stop && clamp(100 - (value / total) * 100, 0, 100);
+    }
+}
+TuiSheetTopDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSheetTopDirective, deps: [{ token: TUI_SHEET_SCROLL }, { token: TUI_SHEET }, { token: WINDOW }], target: i0.ɵɵFactoryTarget.Directive });
+TuiSheetTopDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiSheetTopDirective, selector: "[tuiSheetTop]", inputs: { stop: ["tuiSheetTop", "stop"] }, host: { listeners: { "$.style.transform": "transform$", "$.class._rounded": "rounded$", "$.class._clickthrough": "clickthrough$" }, properties: { "$.style.transform": "transform$", "$.class._rounded": "rounded$", "$.class._clickthrough": "clickthrough$" } }, ngImport: i0 });
+__decorate([
+    tuiDefaultProp()
+], TuiSheetTopDirective.prototype, "stop", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSheetTopDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[tuiSheetTop]`,
+                    host: {
+                        '[$.style.transform]': `transform$`,
+                        '($.style.transform)': `transform$`,
+                        '[$.class._rounded]': `rounded$`,
+                        '($.class._rounded)': `rounded$`,
+                        '[$.class._clickthrough]': `clickthrough$`,
+                        '($.class._clickthrough)': `clickthrough$`,
+                    },
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.Observable, decorators: [{
+                    type: Inject,
+                    args: [TUI_SHEET_SCROLL]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_SHEET]
+                }] }, { type: Window, decorators: [{
+                    type: Inject,
+                    args: [WINDOW]
+                }] }]; }, propDecorators: { stop: [{
+                type: Input,
+                args: [`tuiSheetTop`]
+            }] } });
+
+class TuiSheetStopDirective {
+    constructor(elementRef, destroy$, dragged$, scroll$, { nativeElement }) {
+        scroll$
+            .pipe(map(y => Math.floor(y) > elementRef.nativeElement.offsetTop), distinctUntilChanged(), withLatestFrom(dragged$), map(([above, dragged]) => !above && !dragged), filter(Boolean), throttleTime(100), takeUntil(destroy$))
+            .subscribe(() => {
+            nativeElement.style.overflow = `hidden`;
+            nativeElement.classList.remove(`_stuck`); // iOS
+            nativeElement.scrollTop = elementRef.nativeElement.offsetTop;
+            setTimeout(() => {
+                nativeElement.style.overflow = ``;
+            }, 100);
+        });
+    }
 }
+TuiSheetStopDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSheetStopDirective, deps: [{ token: ElementRef }, { token: TuiDestroyService }, { token: TUI_SHEET_DRAGGED }, { token: TUI_SHEET_SCROLL }, { token: TUI_SCROLL_REF }], target: i0.ɵɵFactoryTarget.Directive });
+TuiSheetStopDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiSheetStopDirective, selector: "[tuiSheetStop]", providers: [TuiDestroyService], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSheetStopDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[tuiSheetStop]`,
+                    providers: [TuiDestroyService],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef, decorators: [{
+                    type: Inject,
+                    args: [ElementRef]
+                }] }, { type: i1$1.Observable, decorators: [{
+                    type: Inject,
+                    args: [TuiDestroyService]
+                }] }, { type: i1$1.Observable, decorators: [{
+                    type: Inject,
+                    args: [TUI_SHEET_DRAGGED]
+                }] }, { type: i1$1.Observable, decorators: [{
+                    type: Inject,
+                    args: [TUI_SHEET_SCROLL]
+                }] }, { type: i0.ElementRef, decorators: [{
+                    type: Inject,
+                    args: [TUI_SCROLL_REF]
+                }] }]; } });
 
 // @dynamic
-let TuiSheetComponent = class TuiSheetComponent {
+class TuiSheetComponent {
     constructor(scroll$, elementRef, ngZone, isIos, moreWord$) {
         this.scroll$ = scroll$;
         this.elementRef = elementRef;
@@ -117,7 +251,7 @@ let TuiSheetComponent = class TuiSheetComponent {
         this.isIos = isIos;
         this.moreWord$ = moreWord$;
         this.stopsRefs = EMPTY_QUERY;
-        this.id = '';
+        this.id = ``;
         this.stuck$ = this.scroll$.pipe(map(y => Math.floor(y) > this.contentTop));
     }
     get stops() {
@@ -144,7 +278,7 @@ let TuiSheetComponent = class TuiSheetComponent {
         if (this.isIos) {
             fakeSmoothScroll(nativeElement, top - nativeElement.scrollTop - 16);
         }
-        nativeElement.scrollTo({ top, behavior: 'smooth' });
+        nativeElement.scrollTo({ top, behavior: `smooth` });
     }
     close() {
         if (this.context.closeable) {
@@ -164,90 +298,66 @@ let TuiSheetComponent = class TuiSheetComponent {
             .toArray()
             .map(({ nativeElement }) => nativeElement.offsetTop + nativeElement.clientHeight);
     }
-};
-TuiSheetComponent.ctorParameters = () => [
-    { type: Observable, decorators: [{ type: Inject, args: [TUI_SHEET_SCROLL,] }] },
-    { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
-    { type: NgZone, decorators: [{ type: Inject, args: [NgZone,] }] },
-    { type: Boolean, decorators: [{ type: Inject, args: [TUI_IS_IOS,] }] },
-    { type: Observable, decorators: [{ type: Inject, args: [TUI_MORE_WORD,] }] }
-];
-__decorate([
-    ViewChild('sheet')
-], TuiSheetComponent.prototype, "sheet", void 0);
-__decorate([
-    ViewChild('content')
-], TuiSheetComponent.prototype, "content", void 0);
-__decorate([
-    ViewChildren('stops')
-], TuiSheetComponent.prototype, "stopsRefs", void 0);
-__decorate([
-    Input()
-], TuiSheetComponent.prototype, "item", void 0);
+}
+TuiSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSheetComponent, deps: [{ token: TUI_SHEET_SCROLL }, { token: ElementRef }, { token: NgZone }, { token: TUI_IS_IOS }, { token: TUI_MORE_WORD }], target: i0.ɵɵFactoryTarget.Component });
+TuiSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiSheetComponent, selector: "tui-sheet", inputs: { item: "item" }, host: { attributes: { "role": "dialog" }, listeners: { "$.class._stuck": "stuck$", "tui-sheet-id": "onId($event.detail)" }, properties: { "attr.aria-labelledby": "id", "class._ios": "isIos", "$.class._stuck": "stuck$" } }, providers: TUI_SHEET_PROVIDERS, viewQueries: [{ propertyName: "sheet", first: true, predicate: ["sheet"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "stopsRefs", predicate: ["stops"], descendants: true }], ngImport: i0, template: "<div\n    class=\"t-bumpers\"\n    (click)=\"close()\"\n>\n    <div\n        *ngFor=\"let stop of item.stops\"\n        #stops\n        class=\"t-bumper\"\n        [style.marginTop]=\"stop\"\n    ></div>\n</div>\n<div\n    #sheet\n    class=\"t-wrapper\"\n    [class.t-wrapper_shadow]=\"!item.image\"\n>\n    <header\n        *ngIf=\"item.image\"\n        class=\"t-top\"\n        [tuiSheetTop]=\"imageStop\"\n    >\n        <img\n            *polymorpheusOutlet=\"item.image as src; context: context\"\n            alt=\"\"\n            class=\"t-image\"\n            [src]=\"src\"\n        />\n    </header>\n    <section\n        #content\n        tuiSheetStop\n        class=\"t-sheet\"\n    >\n        <div class=\"t-bar\"></div>\n        <tui-sheet-bar>\n            <button\n                class=\"t-button\"\n                [title]=\"moreWord$ | async\"\n                (click)=\"scrollTo(stops[1])\"\n            ></button>\n        </tui-sheet-bar>\n        <div class=\"t-content\">\n            <h2\n                *polymorpheusOutlet=\"item.content as text; context: context\"\n                tuiSheetHeading\n                class=\"t-heading\"\n            >\n                {{ text }}\n            </h2>\n        </div>\n    </section>\n</div>\n", styles: [":host{scrollbar-width:none;-ms-overflow-style:none;position:absolute;top:0;left:0;bottom:0;right:0;transition-property:transform;transition-duration:.3s;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;top:auto;border-radius:.75rem .75rem 0 0;overflow-y:auto;overflow-x:hidden;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;box-shadow:0 4rem var(--tui-base-01);padding-right:1rem;margin-left:-1rem;transform:scaleX(-1);-webkit-clip-path:inset(0 1rem 0 0 round .75rem .75rem 0 0);clip-path:inset(0 1rem 0 0 round .75rem .75rem 0 0)}:host::-webkit-scrollbar,:host::-webkit-scrollbar-thumb{background:transparent;width:0;height:0}:host._stuck{-webkit-scroll-snap-type:none;-ms-scroll-snap-type:none;scroll-snap-type:none}.t-bumpers{display:flex;height:100%}:host-context(.t-wrapper_closeable) .t-bumpers{scroll-snap-stop:always;scroll-snap-align:start;scroll-margin:-1px}.t-bumper{scroll-snap-stop:always;scroll-snap-align:start;height:1rem;width:1rem}.t-wrapper{border-radius:inherit;pointer-events:auto;scroll-snap-stop:always;scroll-snap-align:start}.t-wrapper_shadow{box-shadow:0 .25rem 1.5rem rgba(0,0,0,.12)}.t-top{box-shadow:0 .25rem 1.5rem rgba(0,0,0,.12);position:-webkit-sticky;position:sticky;top:0;pointer-events:auto;border-radius:.8rem .8rem 0 0;transform:scaleX(-1);overflow:hidden}.t-top._clickthrough{pointer-events:none}:host-context(._overlay:not(._visible)) .t-top{transition-property:transform;transition-duration:.3s;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;transform:scaleX(-1)!important}.t-image{display:block;width:100%}.t-sheet{position:relative;border-radius:inherit;scroll-snap-stop:always;scroll-snap-align:start;transform:scaleX(-1);box-shadow:0 4rem var(--tui-base-01)}.t-top:not(._rounded)~.t-sheet .t-bar{border-radius:0}.t-bar{transition-property:border-radius;transition-duration:.3s;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:-webkit-sticky;position:sticky;top:0;z-index:1;height:1.5rem;margin-bottom:-1.5rem;border-radius:inherit;background:var(--tui-elevation-01);box-shadow:inset 0 1px rgba(255,255,255,.25)}.t-button{position:absolute;top:0;height:1.5rem;width:3rem;padding:0;border:0;opacity:0}.t-content{padding:1rem;margin-top:-1rem;border-radius:inherit;background:var(--tui-elevation-01)}.t-heading{padding-bottom:.5rem;background:var(--tui-elevation-01)}\n"], components: [{ type: TuiSheetBarComponent, selector: "tui-sheet-bar" }, { type: TuiSheetHeadingComponent, selector: "[tuiSheetHeading]" }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TuiSheetTopDirective, selector: "[tuiSheetTop]", inputs: ["tuiSheetTop"] }, { type: i5.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: TuiSheetStopDirective, selector: "[tuiSheetStop]" }], pipes: { "async": i2.AsyncPipe }, animations: [tuiSlideInTop], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     tuiPure
 ], TuiSheetComponent.prototype, "context", null);
-__decorate([
-    HostListener(TUI_SHEET_ID, ['$event.detail'])
-], TuiSheetComponent.prototype, "onId", null);
 __decorate([
     tuiPure
 ], TuiSheetComponent.prototype, "getStops", null);
-TuiSheetComponent = __decorate([
-    Component({
-        selector: 'tui-sheet',
-        template: "<div\n    class=\"t-bumpers\"\n    (click)=\"close()\"\n>\n    <div\n        *ngFor=\"let stop of item.stops\"\n        #stops\n        class=\"t-bumper\"\n        [style.marginTop]=\"stop\"\n    ></div>\n</div>\n<div\n    #sheet\n    class=\"t-wrapper\"\n    [class.t-wrapper_shadow]=\"!item.image\"\n>\n    <header\n        *ngIf=\"item.image\"\n        polymorpheus-outlet\n        class=\"t-top\"\n        [tuiSheetTop]=\"imageStop\"\n        [content]=\"item.image\"\n        [context]=\"context\"\n    >\n        <ng-template let-content>\n            <img\n                alt=\"\"\n                class=\"t-image\"\n                [src]=\"content\"\n            />\n        </ng-template>\n    </header>\n    <section\n        #content\n        tuiSheetStop\n        class=\"t-sheet\"\n    >\n        <div class=\"t-bar\"></div>\n        <tui-sheet-bar>\n            <button\n                class=\"t-button\"\n                [title]=\"moreWord$ | async\"\n                (click)=\"scrollTo(stops[1])\"\n            ></button>\n        </tui-sheet-bar>\n        <div\n            polymorpheus-outlet\n            class=\"t-content\"\n            [content]=\"item.content\"\n            [context]=\"context\"\n        >\n            <ng-template let-content>\n                <h2\n                    tuiSheetHeading\n                    class=\"t-heading\"\n                >\n                    {{ content }}\n                </h2>\n            </ng-template>\n        </div>\n    </section>\n</div>\n",
-        providers: TUI_SHEET_PROVIDERS,
-        animations: [tuiSlideInTop],
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        host: {
-            role: 'dialog',
-            '[attr.aria-labelledby]': 'id',
-            '[class._ios]': 'isIos',
-            // '[class._stuck]': 'true', // Initially disable snapping for Firefox
-            '[$.class._stuck]': 'stuck$',
-            '($.class._stuck)': 'stuck$',
-        },
-        styles: [":host{scrollbar-width:none;-ms-overflow-style:none;position:absolute;left:0;bottom:0;right:0;transition-property:transform;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;top:auto;border-radius:.75rem .75rem 0 0;overflow-y:auto;overflow-x:hidden;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;box-shadow:0 4rem var(--tui-base-01);padding-right:1rem;margin-left:-1rem;transform:scaleX(-1);-webkit-clip-path:inset(0 1rem 0 0 round .75rem .75rem 0 0);clip-path:inset(0 1rem 0 0 round .75rem .75rem 0 0)}:host::-webkit-scrollbar,:host::-webkit-scrollbar-thumb{background:0 0;width:0;height:0}:host._stuck{-webkit-scroll-snap-type:none;-ms-scroll-snap-type:none;scroll-snap-type:none}.t-bumpers{display:flex;height:100%}:host-context(.t-wrapper_closeable) .t-bumpers{scroll-snap-stop:always;scroll-snap-align:start;scroll-margin:-1px}.t-bumper{scroll-snap-stop:always;scroll-snap-align:start;height:1rem;width:1rem}.t-wrapper{border-radius:inherit;pointer-events:auto;scroll-snap-stop:always;scroll-snap-align:start}.t-wrapper_shadow{box-shadow:0 .25rem 1.5rem rgba(0,0,0,.12)}.t-top{box-shadow:0 .25rem 1.5rem rgba(0,0,0,.12);position:-webkit-sticky;position:sticky;top:0;pointer-events:auto;border-radius:.8rem .8rem 0 0;transform:scaleX(-1);overflow:hidden}.t-top._clickthrough{pointer-events:none}:host-context(._overlay:not(._visible)) .t-top{transition-property:transform;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;transform:scaleX(-1)!important}.t-image{display:block;width:100%}.t-sheet{position:relative;border-radius:inherit;scroll-snap-stop:always;scroll-snap-align:start;transform:scaleX(-1);box-shadow:0 4rem var(--tui-base-01)}.t-top:not(._rounded)~.t-sheet .t-bar{border-radius:0}.t-bar{transition-property:border-radius;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;position:-webkit-sticky;position:sticky;top:0;z-index:1;height:1.5rem;margin-bottom:-1.5rem;border-radius:inherit;background:var(--tui-elevation-01);box-shadow:inset 0 1px rgba(255,255,255,.25)}.t-button{position:absolute;top:0;height:1.5rem;width:3rem;padding:0;border:0;opacity:0}.t-content{padding:1rem;margin-top:-1rem;border-radius:inherit;background:var(--tui-elevation-01)}.t-heading{padding-bottom:.5rem;background:var(--tui-elevation-01)}"]
-    }),
-    __param(0, Inject(TUI_SHEET_SCROLL)),
-    __param(1, Inject(ElementRef)),
-    __param(2, Inject(NgZone)),
-    __param(3, Inject(TUI_IS_IOS)),
-    __param(4, Inject(TUI_MORE_WORD))
-], TuiSheetComponent);
-
-let TuiSheetBarComponent = class TuiSheetBarComponent {
-    constructor(sheet, scroll$, ngZone) {
-        this.sheet = sheet;
-        this.scroll$ = scroll$;
-        this.ngZone = ngZone;
-        this.rotate$ = this.scroll$.pipe(tuiZonefulMap(y => clamp(10 - (y - this.stop) / 5, 0, 10), this.ngZone));
-    }
-    get stop() {
-        var _a;
-        return (_a = this.sheet.stops[0]) !== null && _a !== void 0 ? _a : 0;
-    }
-};
-TuiSheetBarComponent.ctorParameters = () => [
-    { type: TuiSheetComponent, decorators: [{ type: Inject, args: [TuiSheetComponent,] }] },
-    { type: Observable, decorators: [{ type: Inject, args: [TUI_SHEET_SCROLL,] }] },
-    { type: NgZone, decorators: [{ type: Inject, args: [NgZone,] }] }
-];
-TuiSheetBarComponent = __decorate([
-    Component({
-        selector: 'tui-sheet-bar',
-        template: "<ng-container *tuiLet=\"rotate$ | async as deg\">\n    <div\n        style=\"transform: rotate(-{{ deg }}deg)\"\n        class=\"t-bar\"\n    ></div>\n    <ng-content *ngIf=\"deg\"></ng-content>\n    <div\n        style=\"transform: rotate({{ deg }}deg)\"\n        class=\"t-bar\"\n    ></div>\n</ng-container>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [":host{transition-property:border-radius;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;position:-webkit-sticky;position:sticky;top:0;z-index:2;display:flex;height:1.25rem;align-items:center;justify-content:center;opacity:.3}.t-bar{content:'';height:.25rem;width:1rem;background:var(--tui-base-09);pointer-events:none}:host-context(._ios:not(._dragged)) .t-bar{transition-property:transform;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out}.t-bar:first-child{border-radius:1rem 0 0 1rem;transform-origin:top right}.t-bar:last-child{border-radius:0 1rem 1rem 0;transform-origin:top left}"]
-    }),
-    __param(0, Inject(TuiSheetComponent)),
-    __param(1, Inject(TUI_SHEET_SCROLL)),
-    __param(2, Inject(NgZone))
-], TuiSheetBarComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSheetComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: `tui-sheet`,
+                    templateUrl: `sheet.template.html`,
+                    styleUrls: [`sheet.style.less`],
+                    providers: TUI_SHEET_PROVIDERS,
+                    animations: [tuiSlideInTop],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        role: `dialog`,
+                        '[attr.aria-labelledby]': `id`,
+                        '[class._ios]': `isIos`,
+                        // '[class._stuck]': 'true', // Initially disable snapping for Firefox
+                        '[$.class._stuck]': `stuck$`,
+                        '($.class._stuck)': `stuck$`,
+                    },
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.Observable, decorators: [{
+                    type: Inject,
+                    args: [TUI_SHEET_SCROLL]
+                }] }, { type: i0.ElementRef, decorators: [{
+                    type: Inject,
+                    args: [ElementRef]
+                }] }, { type: i0.NgZone, decorators: [{
+                    type: Inject,
+                    args: [NgZone]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_IS_IOS]
+                }] }, { type: i1$1.Observable, decorators: [{
+                    type: Inject,
+                    args: [TUI_MORE_WORD]
+                }] }]; }, propDecorators: { sheet: [{
+                type: ViewChild,
+                args: [`sheet`]
+            }], content: [{
+                type: ViewChild,
+                args: [`content`]
+            }], stopsRefs: [{
+                type: ViewChildren,
+                args: [`stops`]
+            }], item: [{
+                type: Input
+            }], context: [], onId: [{
+                type: HostListener,
+                args: [TUI_SHEET_ID, [`$event.detail`]]
+            }], getStops: [] } });
 
 const TUI_SHEET_DEFAULT_OPTIONS = {
-    image: '',
+    image: ``,
     imageSlide: true,
     stops: [],
     initial: 0,
@@ -255,11 +365,11 @@ const TUI_SHEET_DEFAULT_OPTIONS = {
     closeable: true,
     overlay: false,
 };
-const TUI_SHEET_OPTIONS = new InjectionToken('Default parameters for sheet component', {
-    factory: () => (Object.assign(Object.assign({}, TUI_SHEET_DEFAULT_OPTIONS), { offset: inject(TUI_SHEET_OFFSET) })),
+const TUI_SHEET_OPTIONS = new InjectionToken(`Default parameters for sheet component`, {
+    factory: () => (Object.assign({}, TUI_SHEET_DEFAULT_OPTIONS)),
 });
 
-let TuiSheetService = class TuiSheetService {
+class TuiSheetService {
     constructor(options) {
         this.options = options;
         this.sheets$ = new BehaviorSubject([]);
@@ -279,173 +389,23 @@ let TuiSheetService = class TuiSheetService {
             };
         });
     }
-};
-TuiSheetService.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [TUI_SHEET_OPTIONS,] }] }
-];
-TuiSheetService.ɵprov = ɵɵdefineInjectable({ factory: function TuiSheetService_Factory() { return new TuiSheetService(ɵɵinject(TUI_SHEET_OPTIONS)); }, token: TuiSheetService, providedIn: "root" });
-TuiSheetService = __decorate([
-    Injectable({
-        providedIn: 'root',
-    }),
-    __param(0, Inject(TUI_SHEET_OPTIONS))
-], TuiSheetService);
-
-// @dynamic
-let TuiSheetsHostComponent = class TuiSheetsHostComponent {
-    constructor(options, service, height$) {
-        this.options = options;
-        this.service = service;
-        this.height$ = height$;
-    }
-    close({ closeable, $implicit }) {
-        if (closeable) {
-            $implicit.complete();
-        }
-    }
-};
-TuiSheetsHostComponent.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [TUI_ANIMATION_OPTIONS,] }] },
-    { type: TuiSheetService, decorators: [{ type: Inject, args: [TuiSheetService,] }] },
-    { type: Observable, decorators: [{ type: Inject, args: [TUI_WINDOW_HEIGHT,] }] }
-];
-TuiSheetsHostComponent = __decorate([
-    Component({
-        selector: 'tui-sheets-host',
-        template: "<ng-container *ngIf=\"service.sheets$ | async as items\">\n    <div\n        *ngFor=\"let item of items\"\n        class=\"t-wrapper\"\n        [@tuiSlideInTop]=\"options\"\n        [@tuiFadeIn]=\"options\"\n        [tuiSheetWrapper]=\"item.offset\"\n        [class.t-wrapper_overlay]=\"item.overlay\"\n        [class.t-wrapper_closeable]=\"item.closeable\"\n        (click.self)=\"close(item)\"\n    >\n        <tui-sheet\n            tuiScrollRef\n            tuiOverscroll=\"all\"\n            [style.height.px]=\"((height$ | async) || 0) - item.offset\"\n            [item]=\"item\"\n            (close)=\"close(item)\"\n        ></tui-sheet>\n    </div>\n    <div\n        class=\"t-overlay\"\n        (click)=\"close(items[0])\"\n    ></div>\n</ng-container>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        animations: [tuiSlideInTop, tuiFadeIn],
-        styles: [":host{position:-webkit-sticky;position:sticky;bottom:0;display:block;height:0}.t-overlay{transition-property:opacity;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;position:fixed;top:0;left:0;width:100%;z-index:-1;height:100%;background:#000;opacity:.001;pointer-events:none}._overlay~.t-overlay,.t-wrapper_overlay~.t-overlay{opacity:.8;pointer-events:auto;touch-action:none}.t-wrapper{position:absolute;bottom:0;z-index:0;width:100%;height:100vh;overflow:hidden}.t-wrapper._overlay,.t-wrapper._visible,.t-wrapper_overlay{overflow:visible}"]
-    }),
-    __param(0, Inject(TUI_ANIMATION_OPTIONS)),
-    __param(1, Inject(TuiSheetService)),
-    __param(2, Inject(TUI_WINDOW_HEIGHT))
-], TuiSheetsHostComponent);
-
-// @dynamic
-let TuiSheetCloseDirective = class TuiSheetCloseDirective {
-    constructor(ngZone, dragged$, scroll$, windowRef, elementRef, sheet) {
-        this.ngZone = ngZone;
-        this.dragged$ = dragged$;
-        this.scroll$ = scroll$;
-        this.windowRef = windowRef;
-        this.elementRef = elementRef;
-        this.sheet = sheet;
-        this.close = merge(typedFromEvent(this.elementRef.nativeElement, TUI_SHEET_CLOSE), this.dragged$.pipe(startWith(false), switchMap(dragged => dragged
-            ? EMPTY
-            : this.scroll$.pipe(startWith(this.elementRef.nativeElement.scrollTop))), filter(y => { var _a; return ((_a = this.sheet.item) === null || _a === void 0 ? void 0 : _a.closeable) && this.shouldClose(y); }), distinctUntilChanged(), tuiZonefull(this.ngZone)));
-    }
-    shouldClose(scrollTop) {
-        const height = Math.min(this.windowRef.innerHeight, this.elementRef.nativeElement.scrollHeight - this.windowRef.innerHeight);
-        const min = Math.min(height, this.sheet.stops[0] || Infinity);
-        return scrollTop < min / 2;
-    }
-};
-TuiSheetCloseDirective.ctorParameters = () => [
-    { type: NgZone, decorators: [{ type: Inject, args: [NgZone,] }] },
-    { type: Observable, decorators: [{ type: Inject, args: [TUI_SHEET_DRAGGED,] }] },
-    { type: Observable, decorators: [{ type: Inject, args: [TUI_SHEET_SCROLL,] }] },
-    { type: Window, decorators: [{ type: Inject, args: [WINDOW,] }] },
-    { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
-    { type: TuiSheetComponent, decorators: [{ type: Inject, args: [TuiSheetComponent,] }] }
-];
-__decorate([
-    Output()
-], TuiSheetCloseDirective.prototype, "close", void 0);
-TuiSheetCloseDirective = __decorate([
-    Directive({
-        selector: 'tui-sheet[close]',
-    }),
-    __param(0, Inject(NgZone)),
-    __param(1, Inject(TUI_SHEET_DRAGGED)),
-    __param(2, Inject(TUI_SHEET_SCROLL)),
-    __param(3, Inject(WINDOW)),
-    __param(4, Inject(ElementRef)),
-    __param(5, Inject(TuiSheetComponent))
-], TuiSheetCloseDirective);
-
-let TuiSheetStopDirective = class TuiSheetStopDirective {
-    constructor(elementRef, destroy$, dragged$, scroll$, { nativeElement }) {
-        scroll$
-            .pipe(map(y => Math.floor(y) > elementRef.nativeElement.offsetTop), distinctUntilChanged(), withLatestFrom(dragged$), map(([above, dragged]) => !above && !dragged), filter(Boolean), throttleTime(100), takeUntil(destroy$))
-            .subscribe(() => {
-            nativeElement.style.overflow = 'hidden';
-            nativeElement.classList.remove('_stuck'); // iOS
-            nativeElement.scrollTop = elementRef.nativeElement.offsetTop;
-            setTimeout(() => {
-                nativeElement.style.overflow = '';
-            }, 100);
-        });
-    }
-};
-TuiSheetStopDirective.ctorParameters = () => [
-    { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
-    { type: Observable, decorators: [{ type: Inject, args: [TuiDestroyService,] }] },
-    { type: Observable, decorators: [{ type: Inject, args: [TUI_SHEET_DRAGGED,] }] },
-    { type: Observable, decorators: [{ type: Inject, args: [TUI_SHEET_SCROLL,] }] },
-    { type: ElementRef, decorators: [{ type: Inject, args: [TUI_SCROLL_REF,] }] }
-];
-TuiSheetStopDirective = __decorate([
-    Directive({
-        selector: '[tuiSheetStop]',
-        providers: [TuiDestroyService],
-    }),
-    __param(0, Inject(ElementRef)),
-    __param(1, Inject(TuiDestroyService)),
-    __param(2, Inject(TUI_SHEET_DRAGGED)),
-    __param(3, Inject(TUI_SHEET_SCROLL)),
-    __param(4, Inject(TUI_SCROLL_REF))
-], TuiSheetStopDirective);
-
-// So that borders get rounded when image is visible for at least 10px
-const OFFSET = 10;
-// @dynamic
-let TuiSheetTopDirective = class TuiSheetTopDirective {
-    constructor(scroll$, component, windowRef) {
-        this.scroll$ = scroll$;
-        this.component = component;
-        this.windowRef = windowRef;
-        this.stop = 0;
-        this.transform$ = this.scroll$.pipe(map(y => `translateY(${this.getY(y)}%) scaleX(-1)`));
-        this.rounded$ = this.scroll$.pipe(map(y => y < this.stop + OFFSET));
-        this.clickthrough$ = this.scroll$.pipe(map(y => !!Math.round(this.getY(y))));
-    }
-    getY(scrollTop) {
-        const value = scrollTop - this.stop;
-        const total = this.windowRef.innerHeight - this.component.item.offset - this.stop;
-        return this.stop && clamp(100 - (value / total) * 100, 0, 100);
-    }
-};
-TuiSheetTopDirective.ctorParameters = () => [
-    { type: Observable, decorators: [{ type: Inject, args: [TUI_SHEET_SCROLL,] }] },
-    { type: TuiSheetComponent, decorators: [{ type: Inject, args: [forwardRef(() => TuiSheetComponent),] }] },
-    { type: Window, decorators: [{ type: Inject, args: [WINDOW,] }] }
-];
-__decorate([
-    Input('tuiSheetTop'),
-    tuiDefaultProp()
-], TuiSheetTopDirective.prototype, "stop", void 0);
-TuiSheetTopDirective = __decorate([
-    Directive({
-        selector: '[tuiSheetTop]',
-        host: {
-            '[$.style.transform]': 'transform$',
-            '($.style.transform)': 'transform$',
-            '[$.class._rounded]': 'rounded$',
-            '($.class._rounded)': 'rounded$',
-            '[$.class._clickthrough]': 'clickthrough$',
-            '($.class._clickthrough)': 'clickthrough$',
-        },
-    }),
-    __param(0, Inject(TUI_SHEET_SCROLL)),
-    __param(1, Inject(forwardRef(() => TuiSheetComponent))),
-    __param(2, Inject(WINDOW))
-], TuiSheetTopDirective);
+}
+TuiSheetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSheetService, deps: [{ token: TUI_SHEET_OPTIONS }], target: i0.ɵɵFactoryTarget.Injectable });
+TuiSheetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSheetService, providedIn: `root` });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSheetService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: `root`,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_SHEET_OPTIONS]
+                }] }]; } });
 
 // Safety offset for shadow
-const OFFSET$1 = 16;
+const OFFSET = 16;
 // @dynamic
-let TuiSheetWrapperDirective = class TuiSheetWrapperDirective {
+class TuiSheetWrapperDirective {
     constructor(windowRef) {
         this.windowRef = windowRef;
         this.tuiSheetWrapper = 16;
@@ -463,8 +423,9 @@ let TuiSheetWrapperDirective = class TuiSheetWrapperDirective {
     }
     getHeight(value) {
         var _a;
-        return ((_a = this.sheet) === null || _a === void 0 ? void 0 : _a.context.overlay) ? null
-            : clamp(this.withImage(value) + OFFSET$1, OFFSET$1, this.windowRef.innerHeight);
+        return ((_a = this.sheet) === null || _a === void 0 ? void 0 : _a.context.overlay)
+            ? null
+            : clamp(this.withImage(value) + OFFSET, OFFSET, this.windowRef.innerHeight);
     }
     withImage(value) {
         var _a;
@@ -472,22 +433,9 @@ let TuiSheetWrapperDirective = class TuiSheetWrapperDirective {
             ? value
             : value - this.sheet.imageHeight;
     }
-};
-TuiSheetWrapperDirective.ctorParameters = () => [
-    { type: Window, decorators: [{ type: Inject, args: [WINDOW,] }] }
-];
-__decorate([
-    ContentChild(TuiSheetComponent)
-], TuiSheetWrapperDirective.prototype, "sheet", void 0);
-__decorate([
-    ContentChild(TuiSheetComponent, { read: TUI_SHEET_DRAGGED })
-], TuiSheetWrapperDirective.prototype, "dragged$", void 0);
-__decorate([
-    ContentChild(TuiSheetComponent, { read: TUI_SHEET_SCROLL })
-], TuiSheetWrapperDirective.prototype, "scroll$", void 0);
-__decorate([
-    Input()
-], TuiSheetWrapperDirective.prototype, "tuiSheetWrapper", void 0);
+}
+TuiSheetWrapperDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSheetWrapperDirective, deps: [{ token: WINDOW }], target: i0.ɵɵFactoryTarget.Directive });
+TuiSheetWrapperDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiSheetWrapperDirective, selector: "[tuiSheetWrapper]", inputs: { tuiSheetWrapper: "tuiSheetWrapper" }, host: { listeners: { "$.class._overlay": "overlay$", "$.class._visible": "visible$", "$.style.height.px": "height$" }, properties: { "$.class._overlay": "overlay$", "$.class._visible": "visible$", "$.style.height.px": "height$" } }, queries: [{ propertyName: "sheet", first: true, predicate: TuiSheetComponent, descendants: true }, { propertyName: "dragged$", first: true, predicate: TuiSheetComponent, descendants: true, read: TUI_SHEET_DRAGGED }, { propertyName: "scroll$", first: true, predicate: TuiSheetComponent, descendants: true, read: TUI_SHEET_SCROLL }], ngImport: i0 });
 __decorate([
     tuiPure
 ], TuiSheetWrapperDirective.prototype, "overlay$", null);
@@ -497,22 +445,119 @@ __decorate([
 __decorate([
     tuiPure
 ], TuiSheetWrapperDirective.prototype, "height$", null);
-TuiSheetWrapperDirective = __decorate([
-    Directive({
-        selector: '[tuiSheetWrapper]',
-        host: {
-            '[$.class._overlay]': 'overlay$',
-            '($.class._overlay)': 'overlay$',
-            '[$.class._visible]': 'visible$',
-            '($.class._visible)': 'visible$',
-            '[$.style.height.px]': 'height$',
-            '($.style.height.px)': 'height$',
-        },
-    }),
-    __param(0, Inject(WINDOW))
-], TuiSheetWrapperDirective);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSheetWrapperDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[tuiSheetWrapper]`,
+                    host: {
+                        '[$.class._overlay]': `overlay$`,
+                        '($.class._overlay)': `overlay$`,
+                        '[$.class._visible]': `visible$`,
+                        '($.class._visible)': `visible$`,
+                        '[$.style.height.px]': `height$`,
+                        '($.style.height.px)': `height$`,
+                    },
+                }]
+        }], ctorParameters: function () { return [{ type: Window, decorators: [{
+                    type: Inject,
+                    args: [WINDOW]
+                }] }]; }, propDecorators: { sheet: [{
+                type: ContentChild,
+                args: [TuiSheetComponent]
+            }], dragged$: [{
+                type: ContentChild,
+                args: [TuiSheetComponent, { read: TUI_SHEET_DRAGGED }]
+            }], scroll$: [{
+                type: ContentChild,
+                args: [TuiSheetComponent, { read: TUI_SHEET_SCROLL }]
+            }], tuiSheetWrapper: [{
+                type: Input
+            }], overlay$: [], visible$: [], height$: [] } });
+
+// @dynamic
+class TuiSheetCloseDirective {
+    constructor(ngZone, dragged$, scroll$, windowRef, elementRef, sheet) {
+        this.ngZone = ngZone;
+        this.dragged$ = dragged$;
+        this.scroll$ = scroll$;
+        this.windowRef = windowRef;
+        this.elementRef = elementRef;
+        this.sheet = sheet;
+        this.close = merge(typedFromEvent(this.elementRef.nativeElement, TUI_SHEET_CLOSE), this.dragged$.pipe(startWith(false), switchMap(dragged => dragged
+            ? EMPTY
+            : this.scroll$.pipe(startWith(this.elementRef.nativeElement.scrollTop))), filter(y => { var _a; return ((_a = this.sheet.item) === null || _a === void 0 ? void 0 : _a.closeable) && this.shouldClose(y); }), distinctUntilChanged(), tuiZonefull(this.ngZone)));
+    }
+    shouldClose(scrollTop) {
+        const height = Math.min(this.windowRef.innerHeight, this.elementRef.nativeElement.scrollHeight - this.windowRef.innerHeight);
+        const min = Math.min(height, this.sheet.stops[0] || Infinity);
+        return scrollTop < min / 2;
+    }
+}
+TuiSheetCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSheetCloseDirective, deps: [{ token: NgZone }, { token: TUI_SHEET_DRAGGED }, { token: TUI_SHEET_SCROLL }, { token: WINDOW }, { token: ElementRef }, { token: TuiSheetComponent }], target: i0.ɵɵFactoryTarget.Directive });
+TuiSheetCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiSheetCloseDirective, selector: "tui-sheet[close]", outputs: { close: "close" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSheetCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `tui-sheet[close]`,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone, decorators: [{
+                    type: Inject,
+                    args: [NgZone]
+                }] }, { type: i1$1.Observable, decorators: [{
+                    type: Inject,
+                    args: [TUI_SHEET_DRAGGED]
+                }] }, { type: i1$1.Observable, decorators: [{
+                    type: Inject,
+                    args: [TUI_SHEET_SCROLL]
+                }] }, { type: Window, decorators: [{
+                    type: Inject,
+                    args: [WINDOW]
+                }] }, { type: i0.ElementRef, decorators: [{
+                    type: Inject,
+                    args: [ElementRef]
+                }] }, { type: TuiSheetComponent, decorators: [{
+                    type: Inject,
+                    args: [TuiSheetComponent]
+                }] }]; }, propDecorators: { close: [{
+                type: Output
+            }] } });
 
-let TuiSheetDirective = class TuiSheetDirective extends PolymorpheusTemplate {
+// @dynamic
+class TuiSheetsHostComponent {
+    constructor(options, service, height$) {
+        this.options = options;
+        this.service = service;
+        this.height$ = height$;
+    }
+    close({ closeable, $implicit }) {
+        if (closeable) {
+            $implicit.complete();
+        }
+    }
+}
+TuiSheetsHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSheetsHostComponent, deps: [{ token: TUI_ANIMATION_OPTIONS }, { token: TuiSheetService }, { token: TUI_WINDOW_HEIGHT }], target: i0.ɵɵFactoryTarget.Component });
+TuiSheetsHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiSheetsHostComponent, selector: "tui-sheets-host", ngImport: i0, template: "<ng-container *ngIf=\"service.sheets$ | async as items\">\n    <div\n        *ngFor=\"let item of items\"\n        class=\"t-wrapper\"\n        [@tuiSlideInTop]=\"options\"\n        [@tuiFadeIn]=\"options\"\n        [tuiSheetWrapper]=\"item.offset\"\n        [class.t-wrapper_overlay]=\"item.overlay\"\n        [class.t-wrapper_closeable]=\"item.closeable\"\n        (click.self)=\"close(item)\"\n    >\n        <tui-sheet\n            tuiScrollRef\n            tuiOverscroll=\"all\"\n            [style.height.px]=\"((height$ | async) || 0) - item.offset\"\n            [item]=\"item\"\n            (close)=\"close(item)\"\n        ></tui-sheet>\n    </div>\n    <div\n        class=\"t-overlay\"\n        (click)=\"close(items[0])\"\n    ></div>\n</ng-container>\n", styles: [":host{position:-webkit-sticky;position:sticky;bottom:0;display:block;height:0}.t-overlay{transition-property:opacity;transition-duration:.3s;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:fixed;top:0;left:0;width:100%;z-index:-1;height:100%;background:#000;opacity:.001;pointer-events:none}._overlay~.t-overlay,.t-wrapper_overlay~.t-overlay{opacity:.8;pointer-events:auto;touch-action:none}.t-wrapper{position:absolute;bottom:0;z-index:0;width:100%;height:100vh;overflow:hidden}.t-wrapper_overlay,.t-wrapper._visible,.t-wrapper._overlay{overflow:visible}\n"], components: [{ type: TuiSheetComponent, selector: "tui-sheet", inputs: ["item"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: TuiSheetWrapperDirective, selector: "[tuiSheetWrapper]", inputs: ["tuiSheetWrapper"] }, { type: TuiSheetCloseDirective, selector: "tui-sheet[close]", outputs: ["close"] }, { type: i1.TuiScrollRefDirective, selector: "[tuiScrollRef]" }, { type: i3.TuiOverscrollDirective, selector: "[tuiOverscroll]", inputs: ["tuiOverscroll"] }], pipes: { "async": i2.AsyncPipe }, animations: [tuiSlideInTop, tuiFadeIn], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSheetsHostComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: `tui-sheets-host`,
+                    templateUrl: `sheets-host.template.html`,
+                    styleUrls: [`sheets-host.style.less`],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    animations: [tuiSlideInTop, tuiFadeIn],
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_ANIMATION_OPTIONS]
+                }] }, { type: TuiSheetService, decorators: [{
+                    type: Inject,
+                    args: [TuiSheetService]
+                }] }, { type: i1$1.Observable, decorators: [{
+                    type: Inject,
+                    args: [TUI_WINDOW_HEIGHT]
+                }] }]; } });
+
+class TuiSheetDirective extends PolymorpheusTemplate {
     constructor(changeDetectorRef, templateRef, service) {
         super(templateRef, changeDetectorRef);
         this.service = service;
@@ -527,68 +572,101 @@ let TuiSheetDirective = class TuiSheetDirective extends PolymorpheusTemplate {
     set tuiSheet(open) {
         this.open$.next(open);
     }
-};
-TuiSheetDirective.ctorParameters = () => [
-    { type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
-    { type: TemplateRef, decorators: [{ type: Inject, args: [TemplateRef,] }] },
-    { type: TuiSheetService, decorators: [{ type: Inject, args: [TuiSheetService,] }] }
-];
+}
+TuiSheetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSheetDirective, deps: [{ token: ChangeDetectorRef }, { token: TemplateRef }, { token: TuiSheetService }], target: i0.ɵɵFactoryTarget.Directive });
+TuiSheetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiSheetDirective, selector: "ng-template[tuiSheet]", inputs: { options: ["tuiSheetOptions", "options"], tuiSheet: "tuiSheet" }, outputs: { tuiSheetChange: "tuiSheetChange" }, usesInheritance: true, ngImport: i0 });
 __decorate([
-    Input('tuiSheetOptions'),
     tuiDefaultProp()
 ], TuiSheetDirective.prototype, "options", void 0);
 __decorate([
-    Input(),
     tuiRequiredSetter()
 ], TuiSheetDirective.prototype, "tuiSheet", null);
-__decorate([
-    Output()
-], TuiSheetDirective.prototype, "tuiSheetChange", void 0);
-TuiSheetDirective = __decorate([
-    Directive({
-        selector: 'ng-template[tuiSheet]',
-    }),
-    __param(0, Inject(ChangeDetectorRef)),
-    __param(1, Inject(TemplateRef)),
-    __param(2, Inject(TuiSheetService))
-], TuiSheetDirective);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSheetDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `ng-template[tuiSheet]`,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef, decorators: [{
+                    type: Inject,
+                    args: [ChangeDetectorRef]
+                }] }, { type: i0.TemplateRef, decorators: [{
+                    type: Inject,
+                    args: [TemplateRef]
+                }] }, { type: TuiSheetService, decorators: [{
+                    type: Inject,
+                    args: [TuiSheetService]
+                }] }]; }, propDecorators: { options: [{
+                type: Input,
+                args: [`tuiSheetOptions`]
+            }], tuiSheet: [{
+                type: Input
+            }], tuiSheetChange: [{
+                type: Output
+            }] } });
 
-let TuiSheetModule = class TuiSheetModule {
-};
-TuiSheetModule = __decorate([
-    NgModule({
-        imports: [
+class TuiSheetModule {
+}
+TuiSheetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiSheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSheetModule, declarations: [TuiSheetsHostComponent,
+        TuiSheetComponent,
+        TuiSheetBarComponent,
+        TuiSheetHeadingComponent,
+        TuiSheetTopDirective,
+        TuiSheetDirective,
+        TuiSheetWrapperDirective,
+        TuiSheetCloseDirective,
+        TuiSheetStopDirective], imports: [CommonModule,
+        PolymorpheusModule,
+        TuiLetModule,
+        TuiButtonModule,
+        TuiOverscrollModule,
+        TuiScrollbarModule], exports: [TuiSheetsHostComponent,
+        TuiSheetComponent,
+        TuiSheetHeadingComponent,
+        TuiSheetDirective] });
+TuiSheetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSheetModule, imports: [[
             CommonModule,
             PolymorpheusModule,
             TuiLetModule,
             TuiButtonModule,
             TuiOverscrollModule,
             TuiScrollbarModule,
-        ],
-        declarations: [
-            TuiSheetsHostComponent,
-            TuiSheetComponent,
-            TuiSheetBarComponent,
-            TuiSheetHeadingComponent,
-            TuiSheetTopDirective,
-            TuiSheetDirective,
-            TuiSheetWrapperDirective,
-            TuiSheetCloseDirective,
-            TuiSheetStopDirective,
-        ],
-        exports: [
-            TuiSheetsHostComponent,
-            TuiSheetComponent,
-            TuiSheetHeadingComponent,
-            TuiSheetDirective,
-        ],
-        schemas: [NO_ERRORS_SCHEMA],
-    })
-], TuiSheetModule);
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSheetModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        PolymorpheusModule,
+                        TuiLetModule,
+                        TuiButtonModule,
+                        TuiOverscrollModule,
+                        TuiScrollbarModule,
+                    ],
+                    declarations: [
+                        TuiSheetsHostComponent,
+                        TuiSheetComponent,
+                        TuiSheetBarComponent,
+                        TuiSheetHeadingComponent,
+                        TuiSheetTopDirective,
+                        TuiSheetDirective,
+                        TuiSheetWrapperDirective,
+                        TuiSheetCloseDirective,
+                        TuiSheetStopDirective,
+                    ],
+                    exports: [
+                        TuiSheetsHostComponent,
+                        TuiSheetComponent,
+                        TuiSheetHeadingComponent,
+                        TuiSheetDirective,
+                    ],
+                    schemas: [NO_ERRORS_SCHEMA],
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { TUI_SHEET_CLOSE, TUI_SHEET_DEFAULT_OPTIONS, TUI_SHEET_DRAGGED, TUI_SHEET_ID, TUI_SHEET_OFFSET, TUI_SHEET_OPTIONS, TUI_SHEET_PROVIDERS, TUI_SHEET_SCROLL, TuiSheetBarComponent, TuiSheetCloseDirective, TuiSheetComponent, TuiSheetDirective, TuiSheetHeadingComponent, TuiSheetModule, TuiSheetService, TuiSheetStopDirective, TuiSheetTopDirective, TuiSheetWrapperDirective, TuiSheetsHostComponent, fakeSmoothScroll, iosScrollFactory, processDragged, sheetDraggedFactory, sheetScrollFactory };
+export { TUI_SHEET_CLOSE, TUI_SHEET_DEFAULT_OPTIONS, TUI_SHEET_ID, TUI_SHEET_OPTIONS, TUI_SHEET_PROVIDERS, TuiSheetBarComponent, TuiSheetCloseDirective, TuiSheetComponent, TuiSheetDirective, TuiSheetHeadingComponent, TuiSheetModule, TuiSheetService, TuiSheetStopDirective, TuiSheetTopDirective, TuiSheetWrapperDirective, TuiSheetsHostComponent, fakeSmoothScroll, iosScrollFactory, processDragged, sheetDraggedFactory, sheetScrollFactory };
 //# sourceMappingURL=taiga-ui-addon-mobile-components-sheet.js.map