@taiga-ui/addon-mobile 3.57.0 → 3.59.0-canary.10da730

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

@@ -0,0 +1,687 @@
+import { __decorate } from 'tslib';
+import * as i0 from '@angular/core';
+import { InjectionToken, ElementRef, Component, ChangeDetectionStrategy, Inject, NgZone, forwardRef, Directive, Input, Self, ViewChild, ViewChildren, HostListener, Injectable, ContentChild, Output, ChangeDetectorRef, TemplateRef, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import * as i2 from '@taiga-ui/cdk';
+import { tuiTypedFromEvent, tuiZonefree, TuiIdService, ALWAYS_TRUE_HANDLER, ALWAYS_FALSE_HANDLER, TUI_IS_IOS, TUI_SCROLL_REF, tuiClamp, TuiDestroyService, EMPTY_QUERY, tuiZonefull, tuiPure, tuiCreateToken, tuiGetNativeFocused, tuiIsHTMLElement, tuiIsFalsy, tuiIfMap, TUI_WINDOW_HEIGHT, TuiLetModule, TuiOverscrollModule } from '@taiga-ui/cdk';
+import * as i1 from '@taiga-ui/core';
+import { TUI_CLOSE_WORD, TUI_COMMON_ICONS, tuiZonefulMap, tuiSlideInTop, TUI_ANIMATION_OPTIONS, tuiFadeIn, TuiButtonModule, TuiScrollbarModule } from '@taiga-ui/core';
+import { TUI_MORE_WORD } from '@taiga-ui/kit';
+import * as i1$2 from 'rxjs';
+import { map, merge, delay, switchMap, concat, zip, takeUntil, take, share, distinctUntilChanged, withLatestFrom, filter, throttleTime, BehaviorSubject, Observable, EMPTY, race, timer, debounceTime, startWith, Subject, ignoreElements, endWith } from 'rxjs';
+import * as i1$1 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import * as i2$1 from '@tinkoff/ng-polymorpheus';
+import { PolymorpheusTemplate, PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
+import { WINDOW } from '@ng-web-apis/common';
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function iosScrollFactory(element, doc, zone) {
+    const load$ = tuiTypedFromEvent(element, `load`, { capture: true });
+    const touchstart$ = tuiTypedFromEvent(element, `touchstart`, { passive: true });
+    const touchmove$ = tuiTypedFromEvent(doc, `touchmove`, { passive: true });
+    const touchend$ = tuiTypedFromEvent(doc, `touchend`);
+    const scroll$ = tuiTypedFromEvent(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;
+        return concat(
+        // Sometimes touch is triggered without scroll in iOS, filter that
+        zip(touchmove$, scroll$).pipe(map(([{ touches }]) => scrollTop + screenY - touches[0].screenY), takeUntil(touchend$)), scroll$);
+    })));
+    return concat(scroll$.pipe(take(1)), result$).pipe(tuiZonefree(zone), share());
+}
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function fakeSmoothScroll({ style }, offset) {
+    style.transition = `none`;
+    style.transform = `scaleX(-1) translate3d(0, ${offset}px, 0)`;
+    setTimeout(() => {
+        style.transition = ``;
+        style.transform = ``;
+    });
+}
+
+/**
+ * Sheet main component
+ */
+const TUI_SHEET = new InjectionToken(`[TUI_SHEET]`);
+/**
+ * Current scrollTop of a sheet
+ */
+const TUI_SHEET_SCROLL = new InjectionToken(`[TUI_SHEET_SCROLL]`);
+/**
+ * The sheet is being dragged
+ */
+const TUI_SHEET_DRAGGED = new InjectionToken(`[TUI_SHEET_DRAGGED]`);
+
+const TUI_SHEET_CLOSE = 'tui-sheet-close';
+const TUI_SHEET_ID = 'tui-sheet-id';
+class TuiSheetHeadingComponent {
+    constructor(idService, el, closeWord$, icons) {
+        this.idService = idService;
+        this.el = el;
+        this.closeWord$ = closeWord$;
+        this.icons = icons;
+        this.id = this.idService.generate();
+    }
+    ngAfterViewInit() {
+        this.el.nativeElement.dispatchEvent(new CustomEvent(TUI_SHEET_ID, { bubbles: true, detail: this.id }));
+    }
+    onClick() {
+        this.el.nativeElement.dispatchEvent(new CustomEvent(TUI_SHEET_CLOSE, { bubbles: true }));
+    }
+}
+TuiSheetHeadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiSheetHeadingComponent, deps: [{ token: TuiIdService }, { token: ElementRef }, { token: TUI_CLOSE_WORD }, { token: TUI_COMMON_ICONS }], target: i0.ɵɵFactoryTarget.Component });
+TuiSheetHeadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TuiSheetHeadingComponent, selector: "[tuiSheetHeading]", ngImport: i0, template: "<button\n    appearance=\"icon\"\n    size=\"xs\"\n    tuiIconButton\n    type=\"button\"\n    class=\"t-close\"\n    [icon]=\"icons.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-elevation-01);border-radius:.75rem .75rem 0 0;font:var(--tui-font-heading-6);box-shadow:inset 0 1px #ffffff40}: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"], dependencies: [{ kind: "component", type: i1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiSheetHeadingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[tuiSheetHeading]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    appearance=\"icon\"\n    size=\"xs\"\n    tuiIconButton\n    type=\"button\"\n    class=\"t-close\"\n    [icon]=\"icons.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-elevation-01);border-radius:.75rem .75rem 0 0;font:var(--tui-font-heading-6);box-shadow:inset 0 1px #ffffff40}: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"] }]
+        }], ctorParameters: function () {
+        return [{ type: i2.TuiIdService, decorators: [{
+                        type: Inject,
+                        args: [TuiIdService]
+                    }] }, { type: i0.ElementRef, decorators: [{
+                        type: Inject,
+                        args: [ElementRef]
+                    }] }, { type: i1$2.Observable, decorators: [{
+                        type: Inject,
+                        args: [TUI_CLOSE_WORD]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [TUI_COMMON_ICONS]
+                    }] }];
+    } });
+
+const TUI_SHEET_PROVIDERS = [
+    {
+        provide: TUI_SHEET_DRAGGED,
+        deps: [ElementRef],
+        useFactory: ({ nativeElement }) => merge(tuiTypedFromEvent(nativeElement, `touchstart`, { passive: true }).pipe(map(ALWAYS_TRUE_HANDLER)), tuiTypedFromEvent(nativeElement, `touchend`).pipe(map(ALWAYS_FALSE_HANDLER))),
+    },
+    {
+        provide: TUI_SHEET_SCROLL,
+        deps: [ElementRef, NgZone, DOCUMENT, TUI_IS_IOS],
+        useFactory: ({ nativeElement }, zone, doc, isIos) => isIos
+            ? iosScrollFactory(nativeElement, doc, zone)
+            : merge(tuiTypedFromEvent(nativeElement, `scroll`), tuiTypedFromEvent(nativeElement, `load`, { capture: true })).pipe(map(() => nativeElement.scrollTop), tuiZonefree(zone), share()),
+    },
+    {
+        provide: TUI_SCROLL_REF,
+        useExisting: ElementRef,
+    },
+    {
+        provide: TUI_SHEET,
+        useExisting: forwardRef(() => TuiSheetComponent),
+    },
+];
+
+class TuiSheetBarComponent {
+    constructor(sheet, scroll$, zone) {
+        this.sheet = sheet;
+        this.scroll$ = scroll$;
+        this.zone = zone;
+        this.rotate$ = this.scroll$.pipe(tuiZonefulMap(y => tuiClamp(10 - (y - this.stop) / 5, 0, 10), this.zone));
+    }
+    get stop() {
+        return this.sheet.stops[0] || 0;
+    }
+}
+TuiSheetBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiSheetBarComponent, deps: [{ token: TUI_SHEET }, { token: TUI_SHEET_SCROLL }, { token: NgZone }], target: i0.ɵɵFactoryTarget.Component });
+TuiSheetBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TuiSheetBarComponent, selector: "tui-sheet-bar", ngImport: i0, template: "<ng-container *tuiLet=\"rotate$ | async as deg\">\n    <div\n        class=\"t-bar\"\n        [ngStyle]=\"{transform: 'rotate(-' + deg + 'deg)'}\"\n    ></div>\n    <ng-content *ngIf=\"deg\"></ng-content>\n    <div\n        class=\"t-bar\"\n        [ngStyle]=\"{transform: 'rotate(' + deg + 'deg)'}\"\n    ></div>\n</ng-container>\n", styles: [":host{transition-property:border-radius;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: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"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiSheetBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-sheet-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *tuiLet=\"rotate$ | async as deg\">\n    <div\n        class=\"t-bar\"\n        [ngStyle]=\"{transform: 'rotate(-' + deg + 'deg)'}\"\n    ></div>\n    <ng-content *ngIf=\"deg\"></ng-content>\n    <div\n        class=\"t-bar\"\n        [ngStyle]=\"{transform: 'rotate(' + deg + 'deg)'}\"\n    ></div>\n</ng-container>\n", styles: [":host{transition-property:border-radius;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: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"] }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [TUI_SHEET]
+                    }] }, { type: i1$2.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;
+class TuiSheetTopDirective {
+    constructor(scroll$, component, win) {
+        this.scroll$ = scroll$;
+        this.component = component;
+        this.win = win;
+        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.win.innerHeight - this.component.item.offset - this.stop;
+        return this.stop && tuiClamp(100 - (value / total) * 100, 0, 100);
+    }
+}
+TuiSheetTopDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiSheetTopDirective, deps: [{ token: TUI_SHEET_SCROLL }, { token: TUI_SHEET }, { token: WINDOW }], target: i0.ɵɵFactoryTarget.Directive });
+TuiSheetTopDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", 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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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$2.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(el, destroy$, dragged$, scroll$, { nativeElement }) {
+        scroll$
+            .pipe(map(y => Math.floor(y) > el.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 = el.nativeElement.offsetTop;
+            setTimeout(() => {
+                nativeElement.style.overflow = '';
+            }, 100);
+        });
+    }
+}
+TuiSheetStopDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiSheetStopDirective, deps: [{ token: ElementRef }, { token: TuiDestroyService, self: true }, { token: TUI_SHEET_DRAGGED }, { token: TUI_SHEET_SCROLL }, { token: TUI_SCROLL_REF }], target: i0.ɵɵFactoryTarget.Directive });
+TuiSheetStopDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TuiSheetStopDirective, selector: "[tuiSheetStop]", providers: [TuiDestroyService], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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$2.Observable, decorators: [{
+                        type: Self
+                    }, {
+                        type: Inject,
+                        args: [TuiDestroyService]
+                    }] }, { type: i1$2.Observable, decorators: [{
+                        type: Inject,
+                        args: [TUI_SHEET_DRAGGED]
+                    }] }, { type: i1$2.Observable, decorators: [{
+                        type: Inject,
+                        args: [TUI_SHEET_SCROLL]
+                    }] }, { type: i0.ElementRef, decorators: [{
+                        type: Inject,
+                        args: [TUI_SCROLL_REF]
+                    }] }];
+    } });
+
+class TuiSheetComponent {
+    constructor(scroll$, el, zone, isIos, moreWord$) {
+        this.scroll$ = scroll$;
+        this.el = el;
+        this.zone = zone;
+        this.isIos = isIos;
+        this.moreWord$ = moreWord$;
+        this.stopsRefs = EMPTY_QUERY;
+        this.id = '';
+        this.stuck$ = this.scroll$.pipe(map(y => Math.floor(y) > this.contentTop));
+    }
+    get stops() {
+        return this.getStops(this.stopsRefs);
+    }
+    get imageStop() {
+        return (this.item.imageSlide && this.stops[this.stops.length - 1]) || 0;
+    }
+    get imageHeight() {
+        return this.contentTop - this.sheetTop;
+    }
+    get context() {
+        return Object.assign(Object.assign({}, this.item), { scroll$: this.scroll$.pipe(tuiZonefull(this.zone)) });
+    }
+    onId(id) {
+        this.id = id;
+    }
+    ngAfterViewInit() {
+        this.el.nativeElement.scrollTop = [...this.stops, this.sheetTop, this.contentTop][this.item.initial];
+    }
+    scrollTo(top = this.sheetTop) {
+        const { nativeElement } = this.el;
+        if (this.isIos) {
+            fakeSmoothScroll(nativeElement, top - nativeElement.scrollTop - 16);
+        }
+        nativeElement.scrollTo({ top, behavior: 'smooth' });
+    }
+    close() {
+        if (this.context.closeable) {
+            this.context.$implicit.complete();
+        }
+    }
+    get contentTop() {
+        var _a, _b;
+        return (_b = (_a = this.content) === null || _a === void 0 ? void 0 : _a.nativeElement.offsetTop) !== null && _b !== void 0 ? _b : Infinity;
+    }
+    get sheetTop() {
+        var _a, _b;
+        return (_b = (_a = this.sheet) === null || _a === void 0 ? void 0 : _a.nativeElement.offsetTop) !== null && _b !== void 0 ? _b : Infinity;
+    }
+    getStops(stops) {
+        return stops.map(({ nativeElement }) => nativeElement.offsetTop + nativeElement.clientHeight);
+    }
+}
+TuiSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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: "14.0.0", version: "15.2.10", 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                type=\"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:var(--tui-duration, .3s);transition-timing-function:ease-in-out;top:auto;border-radius:.75rem .75rem 0 0;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;box-shadow:0 50vh var(--tui-elevation-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{scroll-snap-type:none}@supports (-moz-appearance: none){:host{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;scroll-snap-stop:always;scroll-snap-align:start}.t-wrapper_shadow{box-shadow:var(--tui-shadow)}.t-top{position:-webkit-sticky;position:sticky;top:0;border-radius:.8rem .8rem 0 0;box-shadow:var(--tui-shadow);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, .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)}.t-top:not(._rounded)~.t-sheet .t-bar{border-radius:0}.t-bar{transition-property:border-radius;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 #ffffff40}.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"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: TuiSheetBarComponent, selector: "tui-sheet-bar" }, { kind: "component", type: TuiSheetHeadingComponent, selector: "[tuiSheetHeading]" }, { kind: "directive", type: TuiSheetTopDirective, selector: "[tuiSheetTop]", inputs: ["tuiSheetTop"] }, { kind: "directive", type: TuiSheetStopDirective, selector: "[tuiSheetStop]" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], animations: [tuiSlideInTop], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+__decorate([
+    tuiPure
+], TuiSheetComponent.prototype, "context", null);
+__decorate([
+    tuiPure
+], TuiSheetComponent.prototype, "getStops", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiSheetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-sheet', changeDetection: ChangeDetectionStrategy.OnPush, providers: TUI_SHEET_PROVIDERS, host: {
+                        role: 'dialog',
+                        '[attr.aria-labelledby]': 'id',
+                        '[class._ios]': 'isIos',
+                        // '[class._stuck]': 'true', // Initially disable snapping for Firefox
+                        '[$.class._stuck]': 'stuck$',
+                        '($.class._stuck)': 'stuck$',
+                    }, animations: [tuiSlideInTop], 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                type=\"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:var(--tui-duration, .3s);transition-timing-function:ease-in-out;top:auto;border-radius:.75rem .75rem 0 0;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;box-shadow:0 50vh var(--tui-elevation-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{scroll-snap-type:none}@supports (-moz-appearance: none){:host{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;scroll-snap-stop:always;scroll-snap-align:start}.t-wrapper_shadow{box-shadow:var(--tui-shadow)}.t-top{position:-webkit-sticky;position:sticky;top:0;border-radius:.8rem .8rem 0 0;box-shadow:var(--tui-shadow);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, .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)}.t-top:not(._rounded)~.t-sheet .t-bar{border-radius:0}.t-bar{transition-property:border-radius;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 #ffffff40}.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"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1$2.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$2.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: [] } });
+
+/**
+ * @deprecated: drop in v4.0
+ */
+const TUI_SHEET_DEFAULT_OPTIONS = {
+    image: ``,
+    imageSlide: true,
+    stops: [],
+    initial: 0,
+    offset: 16,
+    closeable: true,
+    overlay: false,
+};
+/**
+ * @deprecated: drop in v4.0
+ * Default parameters for sheet component
+ */
+const TUI_SHEET_OPTIONS = tuiCreateToken(Object.assign({}, TUI_SHEET_DEFAULT_OPTIONS));
+
+/**
+ * @deprecated: use {@link TuiSheetDialogService}
+ * drop in v4.0
+ */
+class TuiSheetService {
+    constructor(doc, options) {
+        this.doc = doc;
+        this.options = options;
+        this.sheets$ = new BehaviorSubject([]);
+    }
+    open(content, options = {}) {
+        return new Observable($implicit => {
+            const completeWith = (result) => {
+                $implicit.next(result);
+                $implicit.complete();
+            };
+            const sheet = Object.assign(Object.assign(Object.assign({}, this.options), options), { content,
+                completeWith,
+                $implicit, scroll$: EMPTY });
+            const focused = tuiGetNativeFocused(this.doc);
+            if (tuiIsHTMLElement(focused) && sheet.overlay) {
+                focused.blur();
+            }
+            this.sheets$.next([...this.sheets$.value, sheet]);
+            return () => {
+                this.sheets$.next(this.sheets$.value.filter(item => item !== sheet));
+            };
+        });
+    }
+}
+TuiSheetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiSheetService, deps: [{ token: DOCUMENT }, { token: TUI_SHEET_OPTIONS }], target: i0.ɵɵFactoryTarget.Injectable });
+TuiSheetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiSheetService, providedIn: `root` });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiSheetService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: `root`,
+                }]
+        }], ctorParameters: function () {
+        return [{ type: Document, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [TUI_SHEET_OPTIONS]
+                    }] }];
+    } });
+
+// Safety offset for shadow
+const OFFSET = 16;
+function processDragged(dragged$, scroll$) {
+    const touchstart$ = dragged$.pipe(filter(Boolean));
+    const touchend$ = dragged$.pipe(filter(tuiIsFalsy));
+    const race$ = race(scroll$, timer(100)).pipe(debounceTime(200), take(1), map(ALWAYS_FALSE_HANDLER));
+    return touchstart$.pipe(switchMap(() => touchend$.pipe(switchMap(() => race$), startWith(true))), startWith(false));
+}
+class TuiSheetWrapperDirective {
+    constructor(zone, win) {
+        this.zone = zone;
+        this.win = win;
+        this.tuiSheetWrapper = 16;
+    }
+    get overlay$() {
+        return this.scroll$.pipe(map(y => y + 16 > this.win.innerHeight - this.tuiSheetWrapper), distinctUntilChanged(), tuiZonefull(this.zone));
+    }
+    get visible$() {
+        return processDragged(this.dragged$, this.scroll$).pipe(distinctUntilChanged(), tuiZonefull(this.zone));
+    }
+    get height$() {
+        return this.scroll$.pipe(map(this.getHeight.bind(this)));
+    }
+    getHeight(value) {
+        var _a;
+        return ((_a = this.sheet) === null || _a === void 0 ? void 0 : _a.context.overlay)
+            ? null
+            : tuiClamp(this.withImage(value) + OFFSET, OFFSET, this.win.innerHeight);
+    }
+    withImage(value) {
+        var _a;
+        return !((_a = this.sheet) === null || _a === void 0 ? void 0 : _a.imageStop) || Math.floor(value) > this.sheet.imageStop
+            ? value
+            : value - this.sheet.imageHeight;
+    }
+}
+TuiSheetWrapperDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiSheetWrapperDirective, deps: [{ token: NgZone }, { token: WINDOW }], target: i0.ɵɵFactoryTarget.Directive });
+TuiSheetWrapperDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TuiSheetWrapperDirective, selector: "[tuiSheetWrapper]", inputs: { tuiSheetWrapper: "tuiSheetWrapper" }, queries: [{ propertyName: "sheet", first: true, predicate: TuiSheetComponent, descendants: true }, { propertyName: "dragged$", first: true, predicate: TuiSheetComponent, descendants: true, read: TUI_SHEET_DRAGGED, static: true }, { propertyName: "scroll$", first: true, predicate: TuiSheetComponent, descendants: true, read: TUI_SHEET_SCROLL, static: true }], exportAs: ["tuiSheetWrapper"], ngImport: i0 });
+__decorate([
+    tuiPure
+], TuiSheetWrapperDirective.prototype, "overlay$", null);
+__decorate([
+    tuiPure
+], TuiSheetWrapperDirective.prototype, "visible$", null);
+__decorate([
+    tuiPure
+], TuiSheetWrapperDirective.prototype, "height$", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiSheetWrapperDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tuiSheetWrapper]',
+                    exportAs: 'tuiSheetWrapper',
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.NgZone, decorators: [{
+                        type: Inject,
+                        args: [NgZone]
+                    }] }, { type: Window, decorators: [{
+                        type: Inject,
+                        args: [WINDOW]
+                    }] }];
+    }, propDecorators: { sheet: [{
+                type: ContentChild,
+                args: [TuiSheetComponent]
+            }], dragged$: [{
+                type: ContentChild,
+                args: [TuiSheetComponent, { read: TUI_SHEET_DRAGGED, static: true }]
+            }], scroll$: [{
+                type: ContentChild,
+                args: [TuiSheetComponent, { read: TUI_SHEET_SCROLL, static: true }]
+            }], tuiSheetWrapper: [{
+                type: Input
+            }], overlay$: [], visible$: [], height$: [] } });
+
+class TuiSheetCloseDirective {
+    constructor(zone, dragged$, scroll$, win, el, sheet) {
+        this.zone = zone;
+        this.dragged$ = dragged$;
+        this.scroll$ = scroll$;
+        this.win = win;
+        this.el = el;
+        this.sheet = sheet;
+        this.close = merge(tuiTypedFromEvent(this.el.nativeElement, TUI_SHEET_CLOSE), this.dragged$.pipe(tuiIfMap(() => this.scroll$.pipe(startWith(this.el.nativeElement.scrollTop)), tuiIsFalsy), filter(y => { var _a; return ((_a = this.sheet.item) === null || _a === void 0 ? void 0 : _a.closeable) && this.shouldClose(y); }), distinctUntilChanged(), tuiZonefull(this.zone)));
+    }
+    shouldClose(scrollTop) {
+        const height = Math.min(this.win.innerHeight, this.el.nativeElement.scrollHeight - this.win.innerHeight);
+        const min = Math.min(height, this.sheet.stops[0] || Infinity);
+        return scrollTop < min / 2;
+    }
+}
+TuiSheetCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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: "14.0.0", version: "15.2.10", type: TuiSheetCloseDirective, selector: "tui-sheet[close]", outputs: { close: "close" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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$2.Observable, decorators: [{
+                        type: Inject,
+                        args: [TUI_SHEET_DRAGGED]
+                    }] }, { type: i1$2.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
+            }] } });
+
+class TuiSheetsHostComponent {
+    constructor(options, service, height$, destroy$, cdr) {
+        this.options = options;
+        this.service = service;
+        this.height$ = height$;
+        this.destroy$ = destroy$;
+        this.cdr = cdr;
+        this.sheets = [];
+    }
+    ngOnInit() {
+        // Due to this view being parallel to app content, `markForCheck` from `async` pipe
+        // can happen after view was checked, so calling `detectChanges` instead
+        this.service.sheets$.pipe(takeUntil(this.destroy$)).subscribe(sheets => {
+            this.sheets = sheets;
+            this.cdr.detectChanges();
+        });
+    }
+    close({ closeable, $implicit }) {
+        if (closeable) {
+            $implicit.complete();
+        }
+    }
+}
+TuiSheetsHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiSheetsHostComponent, deps: [{ token: TUI_ANIMATION_OPTIONS }, { token: TuiSheetService }, { token: TUI_WINDOW_HEIGHT }, { token: TuiDestroyService, self: true }, { token: ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TuiSheetsHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TuiSheetsHostComponent, selector: "tui-sheets-host", providers: [TuiDestroyService], ngImport: i0, template: "<div\n    *ngFor=\"let item of sheets\"\n    #wrapper=\"tuiSheetWrapper\"\n    class=\"t-wrapper\"\n    [@tuiFadeIn]=\"options\"\n    [@tuiSlideInTop]=\"options\"\n    [class.t-wrapper_closeable]=\"item.closeable\"\n    [class.t-wrapper_overlay]=\"item.overlay || (wrapper.overlay$ | async)\"\n    [class.t-wrapper_visible]=\"wrapper.visible$ | async\"\n    [style.height.px]=\"wrapper.height$ | async\"\n    [tuiSheetWrapper]=\"item.offset\"\n    (click.self)=\"close(item)\"\n>\n    <tui-sheet\n        tuiOverscroll=\"all\"\n        tuiScrollRef\n        [item]=\"item\"\n        [style.height.px]=\"((height$ | async) || 0) - item.offset\"\n        (close)=\"close(item)\"\n    ></tui-sheet>\n</div>\n<div\n    class=\"t-overlay\"\n    (click)=\"close(sheets[0])\"\n></div>\n", styles: [":host{position:-webkit-sticky;position:sticky;bottom:0;display:block;height:0}.t-overlay{transition-property:opacity;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}.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_visible{overflow:visible}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.TuiOverscrollDirective, selector: "[tuiOverscroll]", inputs: ["tuiOverscroll"] }, { kind: "directive", type: i1.TuiScrollRefDirective, selector: "[tuiScrollRef]" }, { kind: "component", type: TuiSheetComponent, selector: "tui-sheet", inputs: ["item"] }, { kind: "directive", type: TuiSheetWrapperDirective, selector: "[tuiSheetWrapper]", inputs: ["tuiSheetWrapper"], exportAs: ["tuiSheetWrapper"] }, { kind: "directive", type: TuiSheetCloseDirective, selector: "tui-sheet[close]", outputs: ["close"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], animations: [tuiSlideInTop, tuiFadeIn], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiSheetsHostComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-sheets-host', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TuiDestroyService], animations: [tuiSlideInTop, tuiFadeIn], template: "<div\n    *ngFor=\"let item of sheets\"\n    #wrapper=\"tuiSheetWrapper\"\n    class=\"t-wrapper\"\n    [@tuiFadeIn]=\"options\"\n    [@tuiSlideInTop]=\"options\"\n    [class.t-wrapper_closeable]=\"item.closeable\"\n    [class.t-wrapper_overlay]=\"item.overlay || (wrapper.overlay$ | async)\"\n    [class.t-wrapper_visible]=\"wrapper.visible$ | async\"\n    [style.height.px]=\"wrapper.height$ | async\"\n    [tuiSheetWrapper]=\"item.offset\"\n    (click.self)=\"close(item)\"\n>\n    <tui-sheet\n        tuiOverscroll=\"all\"\n        tuiScrollRef\n        [item]=\"item\"\n        [style.height.px]=\"((height$ | async) || 0) - item.offset\"\n        (close)=\"close(item)\"\n    ></tui-sheet>\n</div>\n<div\n    class=\"t-overlay\"\n    (click)=\"close(sheets[0])\"\n></div>\n", styles: [":host{position:-webkit-sticky;position:sticky;bottom:0;display:block;height:0}.t-overlay{transition-property:opacity;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}.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_visible{overflow:visible}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [TUI_ANIMATION_OPTIONS]
+                    }] }, { type: TuiSheetService, decorators: [{
+                        type: Inject,
+                        args: [TuiSheetService]
+                    }] }, { type: i1$2.Observable, decorators: [{
+                        type: Inject,
+                        args: [TUI_WINDOW_HEIGHT]
+                    }] }, { type: i1$2.Observable, decorators: [{
+                        type: Self
+                    }, {
+                        type: Inject,
+                        args: [TuiDestroyService]
+                    }] }, { type: i0.ChangeDetectorRef, decorators: [{
+                        type: Inject,
+                        args: [ChangeDetectorRef]
+                    }] }];
+    } });
+
+/**
+ * @deprecated: use {@link TuiSheetDialogDirective}
+ * drop in v4.0
+ */
+class TuiSheetDirective extends PolymorpheusTemplate {
+    set tuiSheet(open) {
+        this.open$.next(open);
+    }
+    constructor(cdr, templateRef, service) {
+        super(templateRef, cdr);
+        this.service = service;
+        this.open$ = new Subject();
+        this.options = {};
+        this.tuiSheetChange = this.open$.pipe(tuiIfMap(() => this.service.open(this, this.options).pipe(ignoreElements(), endWith(false))), share());
+    }
+}
+TuiSheetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiSheetDirective, deps: [{ token: ChangeDetectorRef }, { token: TemplateRef }, { token: TuiSheetService }], target: i0.ɵɵFactoryTarget.Directive });
+TuiSheetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TuiSheetDirective, selector: "ng-template[tuiSheet]", inputs: { options: ["tuiSheetOptions", "options"], tuiSheet: "tuiSheet" }, outputs: { tuiSheetChange: "tuiSheetChange" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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
+            }] } });
+
+/**
+ * @deprecated: use {@link TuiSheetDialogModule}
+ * drop in v4.0
+ */
+class TuiSheetModule {
+}
+TuiSheetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiSheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: TuiSheetModule, imports: [CommonModule,
+        PolymorpheusModule,
+        TuiLetModule,
+        TuiButtonModule,
+        TuiOverscrollModule,
+        TuiScrollbarModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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_ID, TUI_SHEET_OPTIONS, TUI_SHEET_PROVIDERS, TuiSheetBarComponent, TuiSheetCloseDirective, TuiSheetComponent, TuiSheetDirective, TuiSheetHeadingComponent, TuiSheetModule, TuiSheetService, TuiSheetStopDirective, TuiSheetTopDirective, TuiSheetWrapperDirective, TuiSheetsHostComponent, fakeSmoothScroll, iosScrollFactory };
+//# sourceMappingURL=taiga-ui-addon-mobile-components-sheet.mjs.map