@taiga-ui/addon-mobile 2.88.0 → 2.90.0

package/bundles/taiga-ui-addon-mobile-components-pull-to-refresh.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@taiga-ui/cdk'), require('rxjs'), require('rxjs/operators'), require('@taiga-ui/addon-mobile/tokens'), require('@angular/common'), require('@taiga-ui/core')) :
-    typeof define === 'function' && define.amd ? define('@taiga-ui/addon-mobile/components/pull-to-refresh', ['exports', '@angular/core', '@taiga-ui/cdk', 'rxjs', 'rxjs/operators', '@taiga-ui/addon-mobile/tokens', '@angular/common', '@taiga-ui/core'], factory) :
-    (global = global || self, factory((global['taiga-ui'] = global['taiga-ui'] || {}, global['taiga-ui']['addon-mobile'] = global['taiga-ui']['addon-mobile'] || {}, global['taiga-ui']['addon-mobile'].components = global['taiga-ui']['addon-mobile'].components || {}, global['taiga-ui']['addon-mobile'].components['pull-to-refresh'] = {}), global.ng.core, global.cdk, global.rxjs, global.rxjs.operators, global['taiga-ui']['addon-mobile'].tokens, global.ng.common, global.core$1));
-}(this, (function (exports, core, cdk, rxjs, operators, tokens, common, core$1) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@tinkoff/ng-polymorpheus'), require('@taiga-ui/cdk'), require('@taiga-ui/core'), require('rxjs'), require('rxjs/operators'), require('@angular/common')) :
+    typeof define === 'function' && define.amd ? define('@taiga-ui/addon-mobile/components/pull-to-refresh', ['exports', '@angular/core', '@tinkoff/ng-polymorpheus', '@taiga-ui/cdk', '@taiga-ui/core', 'rxjs', 'rxjs/operators', '@angular/common'], factory) :
+    (global = global || self, factory((global['taiga-ui'] = global['taiga-ui'] || {}, global['taiga-ui']['addon-mobile'] = global['taiga-ui']['addon-mobile'] || {}, global['taiga-ui']['addon-mobile'].components = global['taiga-ui']['addon-mobile'].components || {}, global['taiga-ui']['addon-mobile'].components['pull-to-refresh'] = {}), global.ng.core, global.ngPolymorpheus, global.cdk, global.core$1, global.rxjs, global.rxjs.operators, global.ng.common));
+}(this, (function (exports, core, ngPolymorpheus, cdk, core$1, rxjs, operators, common) { 'use strict';
 
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -298,62 +298,37 @@
         return typeof state === "function" ? receiver === state : state.has(receiver);
     }
 
-    var HIDDEN_DISTANCE = 2;
-    var ROTATE_X_DEFAULT = 180;
-    var ROTATE_X_MAX = 500;
-    var ROTATE_X_MULTIPLIER = 2.3;
-    var TuiMobileLoaderAndroidComponent = /** @class */ (function () {
-        function TuiMobileLoaderAndroidComponent() {
-            this.pulled = 0;
-        }
-        Object.defineProperty(TuiMobileLoaderAndroidComponent.prototype, "transform", {
-            get: function () {
-                var rotateX = Math.min(ROTATE_X_DEFAULT + this.pulled * ROTATE_X_MULTIPLIER, ROTATE_X_MAX);
-                return "rotate(" + rotateX + " 0 0)";
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(TuiMobileLoaderAndroidComponent.prototype, "hidden", {
-            get: function () {
-                return this.pulled < HIDDEN_DISTANCE;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        __decorate([
-            core.Input()
-        ], TuiMobileLoaderAndroidComponent.prototype, "pulled", void 0);
-        __decorate([
-            core.HostBinding('class._hidden')
-        ], TuiMobileLoaderAndroidComponent.prototype, "hidden", null);
-        TuiMobileLoaderAndroidComponent = __decorate([
-            core.Component({
-                selector: 'tui-mobile-android-loader',
-                template: "<svg\n    *ngIf=\"pulled !== 100; else loading\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    [attr.transform]=\"transform\"\n>\n    <defs>\n        <mask id=\"mask-1\">\n            <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M21 12C21 7.03 16.97 3 12 3C7.03 3 3 7.03 3 12C3 16.97 7.03 21 12 21C14.06 21 15.96 20.3 17.48 19.14L16.06 17.7C14.91 18.51 13.51 19 12 19C8.13 19 5 15.87 5 12C5 8.13 8.13 5 12 5C15.87 5 19 8.13 19 12H16L20 16L24 12H21Z\"\n                fill=\"white\"\n            />\n        </mask>\n    </defs>\n    <g mask=\"url(#mask-1)\">\n        <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M21 12C21 7.03 16.97 3 12 3C7.03 3 3 7.03 3 12C3 16.97 7.03 21 12 21C14.06 21 15.96 20.3 17.48 19.14L16.06 17.7C14.91 18.51 13.51 19 12 19C8.13 19 5 15.87 5 12C5 8.13 8.13 5 12 5C15.87 5 19 8.13 19 12H16L20 16L24 12H21Z\"\n            fill=\"black\"\n        />\n    </g>\n</svg>\n<ng-template #loading>\n    <svg\n        viewBox=\"0 0 100 100\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"t-loading\"\n    >\n        <circle\n            cx=\"50\"\n            cy=\"50\"\n            r=\"50\"\n            stroke-dasharray=\"314\"\n            class=\"t-circle\"\n        ></circle>\n    </svg>\n</ng-template>\n",
-                changeDetection: core.ChangeDetectionStrategy.OnPush,
-                styles: [":host{box-shadow:0 .5rem 1rem rgba(0,0,0,.16);display:flex;height:2.25rem;width:2.25rem;background-color:#fff;border-radius:6.25rem;align-items:center;justify-content:center}:host._hidden{visibility:hidden;transition:none}.t-loading{display:block;width:1rem;border-radius:100%;animation:3s linear infinite tuiLoaderRotate}.t-circle{fill:none;stroke:var(--tui-text-01);stroke-width:1.5rem;animation:3s linear infinite tuiLoaderDashOffset}"]
-            })
-        ], TuiMobileLoaderAndroidComponent);
-        return TuiMobileLoaderAndroidComponent;
-    }());
+    /**
+     * Pull threshold in pixels until loading starts
+     */
+    var TUI_PULL_TO_REFRESH_THRESHOLD = new core.InjectionToken("[TUI_PULL_TO_REFRESH_THRESHOLD]", {
+        factory: function () { return 50; },
+    });
 
     var LOADED_STEP = 8;
     var ROTATE_X_STEP = 30;
     var TuiMobileLoaderIOSComponent = /** @class */ (function () {
-        function TuiMobileLoaderIOSComponent() {
-            this.pulled = 0;
+        function TuiMobileLoaderIOSComponent(context, threshold) {
+            this.context = context;
+            this.threshold = threshold;
             this.steps = 12;
         }
         Object.defineProperty(TuiMobileLoaderIOSComponent.prototype, "finished", {
             get: function () {
-                return this.pulled >= 100;
+                return this.percent >= 100;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(TuiMobileLoaderIOSComponent.prototype, "percent", {
+            get: function () {
+                return (this.context.$implicit * 100) / this.threshold;
             },
             enumerable: true,
             configurable: true
         });
         TuiMobileLoaderIOSComponent.prototype.isShown = function (index) {
-            return this.pulled > (index + 1) * LOADED_STEP;
+            return this.percent > (index + 1) * LOADED_STEP;
         };
         TuiMobileLoaderIOSComponent.prototype.calculateTransform = function (index) {
             return "rotate(" + index * ROTATE_X_STEP + " 50 50)";
@@ -361,92 +336,233 @@
         TuiMobileLoaderIOSComponent.prototype.calculateAnimationBegin = function (index) {
             return (index * LOADED_STEP) / 100 + "s";
         };
-        __decorate([
-            core.Input()
-        ], TuiMobileLoaderIOSComponent.prototype, "pulled", void 0);
+        TuiMobileLoaderIOSComponent.ctorParameters = function () { return [
+            { type: undefined, decorators: [{ type: core.Inject, args: [ngPolymorpheus.POLYMORPHEUS_CONTEXT,] }] },
+            { type: Number, decorators: [{ type: core.Inject, args: [TUI_PULL_TO_REFRESH_THRESHOLD,] }] }
+        ]; };
         TuiMobileLoaderIOSComponent = __decorate([
             core.Component({
                 selector: 'tui-mobile-ios-loader',
                 template: "<svg\n    width=\"36\"\n    height=\"36\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    viewBox=\"0 0 100 100\"\n    preserveAspectRatio=\"xMidYMid\"\n>\n    <ng-container *tuiRepeatTimes=\"let index of steps\">\n        <g\n            *ngIf=\"isShown(index)\"\n            [attr.transform]=\"calculateTransform(index)\"\n        >\n            <rect\n                x=\"47\"\n                y=\"22\"\n                rx=\"7.05\"\n                ry=\"3.3\"\n                width=\"6\"\n                height=\"16\"\n                fill=\"#c7c9cc\"\n            >\n                <animate\n                    *ngIf=\"finished\"\n                    attributeName=\"opacity\"\n                    values=\"1;0\"\n                    keyTimes=\"0;1\"\n                    dur=\"1s\"\n                    repeatCount=\"indefinite\"\n                    [attr.begin]=\"calculateAnimationBegin(index)\"\n                ></animate>\n            </rect>\n        </g>\n    </ng-container>\n</svg>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
-                providers: [cdk.TuiDestroyService]
-            })
+                styles: [":host{position:absolute;top:-.5rem;left:50%;margin-left:-1.125rem}"]
+            }),
+            __param(0, core.Inject(ngPolymorpheus.POLYMORPHEUS_CONTEXT)),
+            __param(1, core.Inject(TUI_PULL_TO_REFRESH_THRESHOLD))
         ], TuiMobileLoaderIOSComponent);
         return TuiMobileLoaderIOSComponent;
     }());
+    var TUI_IOS_LOADER = new ngPolymorpheus.PolymorpheusComponent(TuiMobileLoaderIOSComponent);
+
+    /**
+     * Stream that emits when loading is over
+     */
+    var TUI_PULL_TO_REFRESH_LOADED = new core.InjectionToken("[TUI_PULL_TO_REFRESH_LOADED]", {
+        factory: function () { return rxjs.EMPTY; },
+    });
+    /**
+     * Loading indicator component that gets current pull distance in pixels as context
+     */
+    var TUI_PULL_TO_REFRESH_COMPONENT = new core.InjectionToken("[TUI_PULL_TO_REFRESH_COMPONENT]", {
+        factory: function () { return (core.inject(cdk.TUI_IS_IOS) ? TUI_IOS_LOADER : TUI_ANDROID_LOADER); },
+    });
+    /**
+     * @deprecated renamed to {@link TUI_PULL_TO_REFRESH_LOADED}
+     */
+    var TUI_LOADED = TUI_PULL_TO_REFRESH_LOADED;
 
     var MICRO_OFFSET = Math.pow(10, -6);
-    var PULLED_DISTANCE = 50;
-    var TUI_PULLING = new core.InjectionToken("Stream that emits content pulling");
-    var TUI_PULL_TO_REFRESH_PROVIDERS = [
-        {
-            provide: TUI_PULLING,
-            deps: [cdk.TUI_IS_IOS, tokens.TUI_LOADED, core.ElementRef],
-            useFactory: pullingFactory,
-        },
-    ];
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    function pullingFactory(isIOS, loaded$, _a) {
-        var nativeElement = _a.nativeElement;
-        return rxjs.merge(cdk.typedFromEvent(nativeElement, "touchstart", { passive: true }).pipe(operators.filter(function () { return nativeElement.scrollTop === 0; }), operators.switchMap(function (touchStart) {
-            return cdk.typedFromEvent(nativeElement, "touchmove").pipe(operators.map(function (touchMove) {
-                return touchMove.touches[0].clientY - touchStart.touches[0].clientY;
-            }), operators.takeUntil(cdk.typedFromEvent(nativeElement, "touchend")), operators.endWith(0));
-        })), loaded$.pipe(operators.mapTo(NaN))).pipe(operators.scan(function (max, current) {
-            if (Number.isNaN(current)) {
-                return 0;
-            }
-            var androidLoading = !isIOS && max === PULLED_DISTANCE;
-            var dropped = current === 0 && max > PULLED_DISTANCE;
-            return androidLoading || dropped ? PULLED_DISTANCE : current + MICRO_OFFSET;
-        }, 0));
-    }
+    // @dynamic
+    var TuiPullToRefreshService = /** @class */ (function (_super) {
+        __extends(TuiPullToRefreshService, _super);
+        function TuiPullToRefreshService(el, scrollRef, loaded$, threshold, component) {
+            var _this = _super.call(this, function (subscriber) { return (component ? _this.pulling$ : rxjs.EMPTY).subscribe(subscriber); }) || this;
+            _this.el = el;
+            _this.scrollRef = scrollRef;
+            _this.loaded$ = loaded$;
+            _this.threshold = threshold;
+            // Hack for iOS to determine if pulling stopped due to scroll
+            // because Safari does not support `touch-action: pan-down`
+            _this.touched = false;
+            _this.pulling$ = _this.loaded$.pipe(operators.startWith(null), operators.switchMap(function () {
+                return cdk.tuiTypedFromEvent(_this.element, "touchstart", { passive: true }).pipe(operators.filter(function () { return !_this.scrollTop; }), operators.map(function (_a) {
+                    var touches = _a.touches;
+                    return touches[0].clientY;
+                }), operators.switchMap(function (start) {
+                    return cdk.tuiTypedFromEvent(_this.element, "touchmove").pipe(operators.tap(function () {
+                        _this.touched = true;
+                    }), operators.map(function (_a) {
+                        var touches = _a.touches;
+                        return touches[0].clientY - start;
+                    }), operators.filter(function (distance) { return distance > 0; }), operators.takeUntil(cdk.tuiTypedFromEvent(_this.element, "touchend").pipe(operators.tap(function () {
+                        _this.touched = false;
+                    }))), operators.takeUntil(cdk.tuiScrollFrom(_this.scrollRef.nativeElement)), operators.endWith(0));
+                }), operators.scan(function (prev, current) {
+                    return !current && !_this.touched && prev > _this.threshold
+                        ? _this.threshold
+                        : current + current * MICRO_OFFSET;
+                }, 0), operators.takeWhile(function (distance) { return distance !== _this.threshold; }, true), operators.startWith(0));
+            }), operators.distinctUntilChanged(), operators.share());
+            return _this;
+        }
+        Object.defineProperty(TuiPullToRefreshService.prototype, "element", {
+            get: function () {
+                return this.el.nativeElement;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(TuiPullToRefreshService.prototype, "scrollTop", {
+            get: function () {
+                return this.scrollRef.nativeElement.scrollTop;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        TuiPullToRefreshService.ctorParameters = function () { return [
+            { type: core.ElementRef, decorators: [{ type: core.Inject, args: [core.ElementRef,] }] },
+            { type: core.ElementRef, decorators: [{ type: core.Inject, args: [core$1.TUI_SCROLL_REF,] }] },
+            { type: rxjs.Observable, decorators: [{ type: core.Inject, args: [TUI_PULL_TO_REFRESH_LOADED,] }] },
+            { type: Number, decorators: [{ type: core.Inject, args: [TUI_PULL_TO_REFRESH_THRESHOLD,] }] },
+            { type: undefined, decorators: [{ type: core.Inject, args: [TUI_PULL_TO_REFRESH_COMPONENT,] }] }
+        ]; };
+        TuiPullToRefreshService = __decorate([
+            core.Injectable(),
+            __param(0, core.Inject(core.ElementRef)),
+            __param(1, core.Inject(core$1.TUI_SCROLL_REF)),
+            __param(2, core.Inject(TUI_PULL_TO_REFRESH_LOADED)),
+            __param(3, core.Inject(TUI_PULL_TO_REFRESH_THRESHOLD)),
+            __param(4, core.Inject(TUI_PULL_TO_REFRESH_COMPONENT))
+        ], TuiPullToRefreshService);
+        return TuiPullToRefreshService;
+    }(rxjs.Observable));
 
-    var IOS_LOADING_DISTANCE = PULLED_DISTANCE / 2;
-    var ANDROID_MAX_DISTANCE = PULLED_DISTANCE * 1.5;
-    function translateY(distance) {
-        return "translateY(" + distance + "px)";
-    }
-    var TuiPullToRefreshComponent = /** @class */ (function () {
-        function TuiPullToRefreshComponent(isIOS, pulling$) {
-            this.isIOS = isIOS;
-            this.pulling$ = pulling$;
-            this.pulled = this.pulling$.pipe(operators.distinctUntilChanged(), operators.filter(function (distance) { return distance === PULLED_DISTANCE; }), operators.mapTo(undefined));
-            this.pulledInPercent$ = this.pulling$.pipe(operators.map(function (distance) { return (distance * 100) / PULLED_DISTANCE; }));
-            this.dropped$ = this.pulling$.pipe(operators.map(function (distance) { return distance <= MICRO_OFFSET || distance === PULLED_DISTANCE; }), operators.distinctUntilChanged());
-            this.contentTransform$ = this.isIOS
-                ? this.pulling$.pipe(operators.map(function (distance) {
-                    return distance === PULLED_DISTANCE ? IOS_LOADING_DISTANCE : distance;
-                }), operators.map(translateY))
-                : rxjs.of(null);
+    var ROTATE_X_DEFAULT = 180;
+    var ROTATE_X_MAX = 500;
+    var ROTATE_X_MULTIPLIER = 2.3;
+    var TuiMobileLoaderAndroidComponent = /** @class */ (function () {
+        function TuiMobileLoaderAndroidComponent(context, threshold) {
+            this.context = context;
+            this.threshold = threshold;
         }
-        Object.defineProperty(TuiPullToRefreshComponent.prototype, "loaderTransform$", {
+        Object.defineProperty(TuiMobileLoaderAndroidComponent.prototype, "transform", {
+            get: function () {
+                var rotateX = Math.min(ROTATE_X_DEFAULT + this.percent * ROTATE_X_MULTIPLIER, ROTATE_X_MAX);
+                return "rotate(" + rotateX + " 0 0)";
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(TuiMobileLoaderAndroidComponent.prototype, "percent", {
+            get: function () {
+                return (this.context.$implicit * 100) / this.threshold;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(TuiMobileLoaderAndroidComponent.prototype, "opacity", {
+            get: function () {
+                return this.context.$implicit / (this.threshold * 1.5);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(TuiMobileLoaderAndroidComponent.prototype, "dropped", {
             get: function () {
-                return this.pulling$.pipe(operators.map(function (distance) { return translateY(Math.min(distance, ANDROID_MAX_DISTANCE)); }));
+                return (this.context.$implicit <= MICRO_OFFSET ||
+                    this.context.$implicit === this.threshold);
             },
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(TuiMobileLoaderAndroidComponent.prototype, "hostTransform", {
+            get: function () {
+                return "translateY(" + Math.min(this.context.$implicit, this.threshold * 1.5) + "px)";
+            },
+            enumerable: true,
+            configurable: true
+        });
+        TuiMobileLoaderAndroidComponent.ctorParameters = function () { return [
+            { type: undefined, decorators: [{ type: core.Inject, args: [ngPolymorpheus.POLYMORPHEUS_CONTEXT,] }] },
+            { type: Number, decorators: [{ type: core.Inject, args: [TUI_PULL_TO_REFRESH_THRESHOLD,] }] }
+        ]; };
+        __decorate([
+            core.HostBinding('class._visible')
+        ], TuiMobileLoaderAndroidComponent.prototype, "percent", null);
+        __decorate([
+            core.HostBinding('class._dropped')
+        ], TuiMobileLoaderAndroidComponent.prototype, "dropped", null);
+        __decorate([
+            core.HostBinding('style.transform')
+        ], TuiMobileLoaderAndroidComponent.prototype, "hostTransform", null);
+        TuiMobileLoaderAndroidComponent = __decorate([
+            core.Component({
+                selector: 'tui-mobile-android-loader',
+                template: "<div class=\"t-wrapper\">\n    <svg\n        *ngIf=\"percent !== 100; else loading\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        [attr.transform]=\"transform\"\n        [style.opacity]=\"opacity\"\n    >\n        <defs>\n            <mask id=\"mask-1\">\n                <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M21 12C21 7.03 16.97 3 12 3C7.03 3 3 7.03 3 12C3 16.97 7.03 21 12 21C14.06 21 15.96 20.3 17.48 19.14L16.06 17.7C14.91 18.51 13.51 19 12 19C8.13 19 5 15.87 5 12C5 8.13 8.13 5 12 5C15.87 5 19 8.13 19 12H16L20 16L24 12H21Z\"\n                    fill=\"white\"\n                />\n            </mask>\n        </defs>\n        <g mask=\"url(#mask-1)\">\n            <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M21 12C21 7.03 16.97 3 12 3C7.03 3 3 7.03 3 12C3 16.97 7.03 21 12 21C14.06 21 15.96 20.3 17.48 19.14L16.06 17.7C14.91 18.51 13.51 19 12 19C8.13 19 5 15.87 5 12C5 8.13 8.13 5 12 5C15.87 5 19 8.13 19 12H16L20 16L24 12H21Z\"\n                fill=\"black\"\n            />\n        </g>\n    </svg>\n</div>\n<ng-template #loading>\n    <svg\n        viewBox=\"0 0 100 100\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"t-loading\"\n    >\n        <circle\n            cx=\"50\"\n            cy=\"50\"\n            r=\"50\"\n            stroke-dasharray=\"314\"\n            class=\"t-circle\"\n        ></circle>\n    </svg>\n</ng-template>\n",
+                changeDetection: core.ChangeDetectionStrategy.OnPush,
+                styles: [":host{transition-property:opacity;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;position:-webkit-sticky;position:sticky;top:0;z-index:1;display:block;height:0;opacity:0}:host._visible{opacity:1}:host._dropped{transition:transform var(--tui-duration) cubic-bezier(.4,0,.2,1),opacity var(--tui-duration) var(--tui-duration)}.t-wrapper{box-shadow:0 .5rem 1rem rgba(0,0,0,.16);position:absolute;top:-2.5rem;left:50%;display:flex;height:2.25rem;width:2.25rem;background-color:var(--tui-secondary);border-radius:6.25rem;align-items:center;justify-content:center;margin-left:-1.125rem}.t-loading{display:block;width:1rem;border-radius:100%;animation:3s linear infinite tuiLoaderRotate}.t-circle{fill:none;stroke:var(--tui-text-01);stroke-width:1.5rem;animation:3s linear infinite tuiLoaderDashOffset}@keyframes tuiLoaderDashOffset{0%,100%{stroke-dashoffset:-66}50%{stroke-dashoffset:-314}}@keyframes tuiLoaderRotate{0%{transform:rotate(0)}50%{transform:rotate(1turn)}100%{transform:rotate(3turn)}}"]
+            }),
+            __param(0, core.Inject(ngPolymorpheus.POLYMORPHEUS_CONTEXT)),
+            __param(1, core.Inject(TUI_PULL_TO_REFRESH_THRESHOLD))
+        ], TuiMobileLoaderAndroidComponent);
+        return TuiMobileLoaderAndroidComponent;
+    }());
+    var TUI_ANDROID_LOADER = new ngPolymorpheus.PolymorpheusComponent(TuiMobileLoaderAndroidComponent);
+
+    var TuiPullToRefreshComponent = /** @class */ (function () {
+        function TuiPullToRefreshComponent(destroy$, _a, isIOS, threshold, component, pulling$) {
+            var _this = this;
+            var nativeElement = _a.nativeElement;
+            this.isIOS = isIOS;
+            this.threshold = threshold;
+            this.component = component;
+            this.pulling$ = pulling$;
+            this.styleHandler = this.isIOS
+                ? function (distance) { return ({ transform: "translateY(" + distance / 2 + "px)" }); }
+                : function () { return null; };
+            this.pulled = this.pulling$.pipe(operators.filter(function (distance) { return distance === _this.threshold; }));
+            this.dropped$ = this.pulling$.pipe(operators.map(function (distance) { return distance <= MICRO_OFFSET || distance === _this.threshold; }), operators.distinctUntilChanged());
+            // Ensure scrolling down is impossible while pulling
+            cdk.tuiScrollFrom(nativeElement)
+                .pipe(operators.startWith(null), operators.takeUntil(destroy$))
+                .subscribe(function () {
+                if (nativeElement.scrollTop) {
+                    nativeElement.style.touchAction = '';
+                }
+                else {
+                    nativeElement.style.touchAction = 'pan-down';
+                }
+            });
+        }
         TuiPullToRefreshComponent.ctorParameters = function () { return [
+            { type: rxjs.Observable, decorators: [{ type: core.Inject, args: [cdk.TuiDestroyService,] }, { type: core.Self }] },
+            { type: core.ElementRef, decorators: [{ type: core.Inject, args: [core$1.TUI_SCROLL_REF,] }] },
             { type: Boolean, decorators: [{ type: core.Inject, args: [cdk.TUI_IS_IOS,] }] },
-            { type: rxjs.Observable, decorators: [{ type: core.Inject, args: [TUI_PULLING,] }] }
+            { type: Number, decorators: [{ type: core.Inject, args: [TUI_PULL_TO_REFRESH_THRESHOLD,] }] },
+            { type: undefined, decorators: [{ type: core.Inject, args: [TUI_PULL_TO_REFRESH_COMPONENT,] }] },
+            { type: rxjs.Observable, decorators: [{ type: core.Inject, args: [TuiPullToRefreshService,] }] }
         ]; };
+        __decorate([
+            core.Input(),
+            cdk.tuiDefaultProp()
+        ], TuiPullToRefreshComponent.prototype, "styleHandler", void 0);
         __decorate([
             core.Output()
         ], TuiPullToRefreshComponent.prototype, "pulled", void 0);
-        __decorate([
-            cdk.tuiPure
-        ], TuiPullToRefreshComponent.prototype, "loaderTransform$", null);
         TuiPullToRefreshComponent = __decorate([
             core.Component({
                 selector: 'tui-pull-to-refresh',
-                template: "<div\n    tuiOverscroll\n    [class.t-drop-animation]=\"dropped$ | async\"\n    [style.transform]=\"contentTransform$ | async\"\n>\n    <ng-content></ng-content>\n</div>\n\n<tui-mobile-ios-loader\n    *ngIf=\"isIOS; else androidLoader\"\n    class=\"t-ios-spinner\"\n    [pulled]=\"(pulledInPercent$ | async) || 0\"\n></tui-mobile-ios-loader>\n\n<ng-template #androidLoader>\n    <tui-mobile-android-loader\n        class=\"t-android-loader\"\n        [class.t-drop-animation]=\"dropped$ | async\"\n        [style.transform]=\"loaderTransform$ | async\"\n        [pulled]=\"(pulledInPercent$ | async) || 0\"\n    ></tui-mobile-android-loader>\n</ng-template>\n",
+                template: "<div\n    polymorpheus-outlet\n    [content]=\"component\"\n    [context]=\"{$implicit: (pulling$ | async) || 0}\"\n></div>\n\n<div\n    [class.t-drop]=\"dropped$ | async\"\n    [ngStyle]=\"styleHandler((pulling$ | async) || 0)\"\n>\n    <ng-content></ng-content>\n</div>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
-                providers: [TUI_PULL_TO_REFRESH_PROVIDERS],
-                styles: [":host{position:relative;display:block;overflow:hidden}.t-ios-spinner{position:absolute;top:-.5rem;left:50%;margin-left:-1.125rem}.t-android-loader{position:absolute;top:-1.5rem;left:50%;margin-left:-1.125rem}.t-drop-animation{transition:all var(--tui-duration) cubic-bezier(.4,0,.2,1)}"]
+                providers: [TuiPullToRefreshService, cdk.TuiDestroyService],
+                styles: [".t-drop{transition:all var(--tui-duration) cubic-bezier(.4,0,.2,1)}"]
             }),
-            __param(0, core.Inject(cdk.TUI_IS_IOS)),
-            __param(1, core.Inject(TUI_PULLING))
+            __param(0, core.Inject(cdk.TuiDestroyService)), __param(0, core.Self()),
+            __param(1, core.Inject(core$1.TUI_SCROLL_REF)),
+            __param(2, core.Inject(cdk.TUI_IS_IOS)),
+            __param(3, core.Inject(TUI_PULL_TO_REFRESH_THRESHOLD)),
+            __param(4, core.Inject(TUI_PULL_TO_REFRESH_COMPONENT)),
+            __param(5, core.Inject(TuiPullToRefreshService))
         ], TuiPullToRefreshComponent);
         return TuiPullToRefreshComponent;
     }());
@@ -456,7 +572,7 @@
         }
         TuiPullToRefreshModule = __decorate([
             core.NgModule({
-                imports: [common.CommonModule, core$1.TuiSvgModule, cdk.TuiOverscrollModule, cdk.TuiRepeatTimesModule],
+                imports: [common.CommonModule, core$1.TuiSvgModule, cdk.TuiRepeatTimesModule, ngPolymorpheus.PolymorpheusModule],
                 declarations: [
                     TuiPullToRefreshComponent,
                     TuiMobileLoaderAndroidComponent,
@@ -469,14 +585,17 @@
     }());
 
     exports.MICRO_OFFSET = MICRO_OFFSET;
-    exports.PULLED_DISTANCE = PULLED_DISTANCE;
-    exports.TUI_PULLING = TUI_PULLING;
-    exports.TUI_PULL_TO_REFRESH_PROVIDERS = TUI_PULL_TO_REFRESH_PROVIDERS;
+    exports.TUI_ANDROID_LOADER = TUI_ANDROID_LOADER;
+    exports.TUI_IOS_LOADER = TUI_IOS_LOADER;
+    exports.TUI_LOADED = TUI_LOADED;
+    exports.TUI_PULL_TO_REFRESH_COMPONENT = TUI_PULL_TO_REFRESH_COMPONENT;
+    exports.TUI_PULL_TO_REFRESH_LOADED = TUI_PULL_TO_REFRESH_LOADED;
+    exports.TUI_PULL_TO_REFRESH_THRESHOLD = TUI_PULL_TO_REFRESH_THRESHOLD;
     exports.TuiMobileLoaderAndroidComponent = TuiMobileLoaderAndroidComponent;
     exports.TuiMobileLoaderIOSComponent = TuiMobileLoaderIOSComponent;
     exports.TuiPullToRefreshComponent = TuiPullToRefreshComponent;
     exports.TuiPullToRefreshModule = TuiPullToRefreshModule;
-    exports.pullingFactory = pullingFactory;
+    exports.TuiPullToRefreshService = TuiPullToRefreshService;
 
     Object.defineProperty(exports, '__esModule', { value: true });