@taiga-ui/addon-mobile 3.28.0 → 3.29.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('@angular/common'), require('@taiga-ui/cdk'), require('rxjs'), require('rxjs/operators'), require('@taiga-ui/addon-mobile/tokens'), require('@taiga-ui/core')) :
-    typeof define === 'function' && define.amd ? define('@taiga-ui/addon-mobile/components/pull-to-refresh', ['exports', '@angular/core', '@angular/common', '@taiga-ui/cdk', 'rxjs', 'rxjs/operators', '@taiga-ui/addon-mobile/tokens', '@taiga-ui/core'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : 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.ng.common, global.i1, global.rxjs, global.rxjs.operators, global["taiga-ui"]["addon-mobile"].tokens, global.core));
-})(this, (function (exports, i0, i4, i1, i5, operators, tokens, core) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@tinkoff/ng-polymorpheus'), require('@taiga-ui/cdk'), require('rxjs'), require('@angular/common'), require('rxjs/operators'), require('@taiga-ui/core')) :
+    typeof define === 'function' && define.amd ? define('@taiga-ui/addon-mobile/components/pull-to-refresh', ['exports', '@angular/core', '@tinkoff/ng-polymorpheus', '@taiga-ui/cdk', 'rxjs', '@angular/common', 'rxjs/operators', '@taiga-ui/core'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : 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.i2, global.i1, global.rxjs, global.ng.common, global.rxjs.operators, global.core));
+})(this, (function (exports, i0, i2, i1, i1$1, i2$1, operators, core) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -23,68 +23,35 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
-    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
-
-    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: false,
-            configurable: true
-        });
-        Object.defineProperty(TuiMobileLoaderAndroidComponent.prototype, "hidden", {
-            get: function () {
-                return this.pulled < HIDDEN_DISTANCE;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return TuiMobileLoaderAndroidComponent;
-    }());
-    TuiMobileLoaderAndroidComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiMobileLoaderAndroidComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiMobileLoaderAndroidComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiMobileLoaderAndroidComponent, selector: "tui-mobile-android-loader", inputs: { pulled: "pulled" }, host: { properties: { "class._hidden": "this.hidden" } }, ngImport: i0__namespace, 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", styles: [":host{box-shadow:0 1.5rem 1rem #00000008,0 .75rem .75rem #0000000a,0 .25rem .375rem #0000000d;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:0s}.t-loading{display:block;width:1rem;border-radius:100%;animation:tuiLoaderRotate 3s linear infinite}.t-circle{fill:none;stroke:var(--tui-text-01);stroke-width:1.5rem;animation:tuiLoaderDashOffset 3s linear infinite}\n"], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiMobileLoaderAndroidComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'tui-mobile-android-loader',
-                        templateUrl: './loader-android.template.html',
-                        styleUrls: ['./loader-android.style.less'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], propDecorators: { pulled: [{
-                    type: i0.Input
-                }], hidden: [{
-                    type: i0.HostBinding,
-                    args: ['class._hidden']
-                }] } });
+    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2$1);
 
     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: false,
+            configurable: true
+        });
+        Object.defineProperty(TuiMobileLoaderIOSComponent.prototype, "percent", {
+            get: function () {
+                return (this.context.$implicit * 100) / this.threshold;
             },
             enumerable: false,
             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)";
@@ -94,19 +61,49 @@
         };
         return TuiMobileLoaderIOSComponent;
     }());
-    TuiMobileLoaderIOSComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiMobileLoaderIOSComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiMobileLoaderIOSComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiMobileLoaderIOSComponent, selector: "tui-mobile-ios-loader", inputs: { pulled: "pulled" }, providers: [i1.TuiDestroyService], ngImport: i0__namespace, 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", directives: [{ type: i1__namespace.TuiRepeatTimesDirective, selector: "[tuiRepeatTimes][tuiRepeatTimesOf]", inputs: ["tuiRepeatTimesOf"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TuiMobileLoaderIOSComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiMobileLoaderIOSComponent, deps: [{ token: i2.POLYMORPHEUS_CONTEXT }, { token: TUI_PULL_TO_REFRESH_THRESHOLD }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiMobileLoaderIOSComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiMobileLoaderIOSComponent, selector: "tui-mobile-ios-loader", ngImport: i0__namespace, 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", styles: [":host{position:absolute;top:-.5rem;left:50%;margin-left:-1.125rem}\n"], directives: [{ type: i1__namespace.TuiRepeatTimesDirective, selector: "[tuiRepeatTimes][tuiRepeatTimesOf]", inputs: ["tuiRepeatTimesOf"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiMobileLoaderIOSComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'tui-mobile-ios-loader',
                         templateUrl: './loader-ios.template.html',
+                        styleUrls: ['./loader-ios.style.less'],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        providers: [i1.TuiDestroyService],
                     }]
-            }], propDecorators: { pulled: [{
-                    type: i0.Input
-                }] } });
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i2.POLYMORPHEUS_CONTEXT]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [TUI_PULL_TO_REFRESH_THRESHOLD]
+                        }] }];
+        } });
+    var TUI_IOS_LOADER = new i2.PolymorpheusComponent(TuiMobileLoaderIOSComponent);
+
+    /**
+     * Stream that emits when loading is over
+     */
+    var TUI_PULL_TO_REFRESH_LOADED = new i0.InjectionToken("[TUI_PULL_TO_REFRESH_LOADED]", {
+        factory: function () { return i1$1.EMPTY; },
+    });
+    /**
+     * Pull threshold in pixels until loading starts
+     */
+    var TUI_PULL_TO_REFRESH_THRESHOLD = new i0.InjectionToken("[TUI_PULL_TO_REFRESH_THRESHOLD]", {
+        factory: function () { return 50; },
+    });
+    /**
+     * Loading indicator component that gets current pull distance in pixels as context
+     */
+    var TUI_PULL_TO_REFRESH_COMPONENT = new i0.InjectionToken("[TUI_PULL_TO_REFRESH_COMPONENT]", {
+        factory: function () { return (i0.inject(i1.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;
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -427,62 +424,153 @@
     }
 
     var MICRO_OFFSET = Math.pow(10, -6);
-    var PULLED_DISTANCE = 50;
-    /**
-     * Stream that emits content pulling
-     */
-    var TUI_PULLING = new i0.InjectionToken("[TUI_PULLING]");
-    var TUI_PULL_TO_REFRESH_PROVIDERS = [
-        {
-            provide: TUI_PULLING,
-            deps: [i1.TUI_IS_IOS, tokens.TUI_LOADED, i0.ElementRef],
-            useFactory: function (isIOS, loaded$, _a) {
-                var nativeElement = _a.nativeElement;
-                return i5.merge(i1.tuiTypedFromEvent(nativeElement, "touchstart", { passive: true }).pipe(operators.filter(function () { return nativeElement.scrollTop === 0; }), operators.switchMap(function (touchStart) { return i1.tuiTypedFromEvent(nativeElement, "touchmove").pipe(operators.map(function (touchMove) { return touchMove.touches[0].clientY -
-                    touchStart.touches[0].clientY; }), operators.takeUntil(i1.tuiTypedFromEvent(nativeElement, "touchend")), operators.endWith(0)); })), loaded$.pipe(operators.map(function () { return 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));
+    var TuiPullToRefreshService = /** @class */ (function (_super) {
+        __extends(TuiPullToRefreshService, _super);
+        function TuiPullToRefreshService(el, isIos, loaded$, threshold, component) {
+            var _this = _super.call(this, function (subscriber) { return (component ? _this.pulling$ : i1$1.EMPTY).subscribe(subscriber); }) || this;
+            _this.el = el;
+            _this.isIos = isIos;
+            _this.loaded$ = loaded$;
+            _this.threshold = threshold;
+            _this.pulling$ = i1$1.merge(i1.tuiTypedFromEvent(_this.element, "touchstart", { passive: true }).pipe(operators.filter(function () { return _this.element.scrollTop === 0; }), operators.switchMap(function (touchStart) { return i1.tuiTypedFromEvent(_this.element, "touchmove").pipe(operators.map(function (touchMove) { return touchMove.touches[0].clientY - touchStart.touches[0].clientY; }), operators.takeUntil(i1.tuiTypedFromEvent(_this.element, "touchend")), operators.endWith(0)); })), _this.loaded$.pipe(operators.map(function () { return NaN; }))).pipe(operators.scan(function (max, current) {
+                if (Number.isNaN(current)) {
+                    return 0;
+                }
+                var androidLoading = !_this.isIos && max === _this.threshold;
+                var dropped = current === 0 && max > _this.threshold;
+                return androidLoading || dropped
+                    ? _this.threshold
+                    : current + current * MICRO_OFFSET;
+            }, 0));
+            return _this;
+        }
+        Object.defineProperty(TuiPullToRefreshService.prototype, "element", {
+            get: function () {
+                return this.el.nativeElement;
             },
-        },
-    ];
+            enumerable: false,
+            configurable: true
+        });
+        return TuiPullToRefreshService;
+    }(i1$1.Observable));
+    TuiPullToRefreshService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiPullToRefreshService, deps: [{ token: i0.ElementRef }, { token: i1.TUI_IS_IOS }, { token: TUI_PULL_TO_REFRESH_LOADED }, { token: TUI_PULL_TO_REFRESH_THRESHOLD }, { token: TUI_PULL_TO_REFRESH_COMPONENT }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    TuiPullToRefreshService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiPullToRefreshService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiPullToRefreshService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () {
+            return [{ type: i0__namespace.ElementRef, decorators: [{
+                            type: i0.Inject,
+                            args: [i0.ElementRef]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.TUI_IS_IOS]
+                        }] }, { type: i1__namespace$1.Observable, decorators: [{
+                            type: i0.Inject,
+                            args: [TUI_PULL_TO_REFRESH_LOADED]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [TUI_PULL_TO_REFRESH_THRESHOLD]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [TUI_PULL_TO_REFRESH_COMPONENT]
+                        }] }];
+        } });
 
-    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.map(function () { return 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))
-                : i5.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: false,
+            configurable: true
+        });
+        Object.defineProperty(TuiMobileLoaderAndroidComponent.prototype, "percent", {
+            get: function () {
+                return (this.context.$implicit * 100) / this.threshold;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TuiMobileLoaderAndroidComponent.prototype, "opacity", {
+            get: function () {
+                return this.context.$implicit / (this.threshold * 1.5);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TuiMobileLoaderAndroidComponent.prototype, "dropped", {
+            get: function () {
+                return (this.context.$implicit <= MICRO_OFFSET ||
+                    this.context.$implicit === this.threshold);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TuiMobileLoaderAndroidComponent.prototype, "hostTransform", {
             get: function () {
-                return this.pulling$.pipe(operators.map(function (distance) { return translateY(Math.min(distance, ANDROID_MAX_DISTANCE)); }));
+                return "translateY(" + Math.min(this.context.$implicit, this.threshold * 1.5) + "px)";
             },
             enumerable: false,
             configurable: true
         });
+        return TuiMobileLoaderAndroidComponent;
+    }());
+    TuiMobileLoaderAndroidComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiMobileLoaderAndroidComponent, deps: [{ token: i2.POLYMORPHEUS_CONTEXT }, { token: TUI_PULL_TO_REFRESH_THRESHOLD }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiMobileLoaderAndroidComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiMobileLoaderAndroidComponent, selector: "tui-mobile-android-loader", host: { properties: { "class._visible": "this.percent", "class._dropped": "this.dropped", "style.transform": "this.hostTransform" } }, ngImport: i0__namespace, template: "<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<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", styles: [":host{box-shadow:0 1.5rem 1rem #00000008,0 .75rem .75rem #0000000a,0 .25rem .375rem #0000000d;transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;top:-1.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;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-loading{display:block;width:1rem;border-radius:100%;animation:tuiLoaderRotate 3s linear infinite}.t-circle{fill:none;stroke:var(--tui-text-01);stroke-width:1.5rem;animation:tuiLoaderDashOffset 3s linear infinite}\n"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiMobileLoaderAndroidComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'tui-mobile-android-loader',
+                        templateUrl: './loader-android.template.html',
+                        styleUrls: ['./loader-android.style.less'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i2.POLYMORPHEUS_CONTEXT]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [TUI_PULL_TO_REFRESH_THRESHOLD]
+                        }] }];
+        }, propDecorators: { percent: [{
+                    type: i0.HostBinding,
+                    args: ['class._visible']
+                }], dropped: [{
+                    type: i0.HostBinding,
+                    args: ['class._dropped']
+                }], hostTransform: [{
+                    type: i0.HostBinding,
+                    args: ['style.transform']
+                }] } });
+    var TUI_ANDROID_LOADER = new i2.PolymorpheusComponent(TuiMobileLoaderAndroidComponent);
+
+    var TuiPullToRefreshComponent = /** @class */ (function () {
+        function TuiPullToRefreshComponent(isIOS, threshold, component, pulling$) {
+            var _this = this;
+            this.isIOS = isIOS;
+            this.threshold = threshold;
+            this.component = component;
+            this.pulling$ = pulling$;
+            this.pulled = this.pulling$.pipe(operators.distinctUntilChanged(), operators.filter(function (distance) { return distance === _this.threshold; }));
+            // TODO: Move to iOS loader somehow, like contentTransform$ below
+            this.dropped$ = this.pulling$.pipe(operators.map(function (distance) { return distance <= MICRO_OFFSET || distance === _this.threshold; }), operators.distinctUntilChanged());
+            this.contentTransform$ = this.isIOS && this.component === TUI_IOS_LOADER
+                ? this.pulling$.pipe(operators.map(function (distance) { return "translateY(" + distance / 2 + "px)"; }))
+                : i1$1.of(null);
+        }
         return TuiPullToRefreshComponent;
     }());
-    TuiPullToRefreshComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiPullToRefreshComponent, deps: [{ token: i1.TUI_IS_IOS }, { token: TUI_PULLING }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiPullToRefreshComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiPullToRefreshComponent, selector: "tui-pull-to-refresh", outputs: { pulled: "pulled" }, providers: TUI_PULL_TO_REFRESH_PROVIDERS, ngImport: i0__namespace, 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", 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)}\n"], components: [{ type: TuiMobileLoaderIOSComponent, selector: "tui-mobile-ios-loader", inputs: ["pulled"] }, { type: TuiMobileLoaderAndroidComponent, selector: "tui-mobile-android-loader", inputs: ["pulled"] }], directives: [{ type: i1__namespace.TuiOverscrollDirective, selector: "[tuiOverscroll]", inputs: ["tuiOverscroll"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    __decorate([
-        i1.tuiPure
-    ], TuiPullToRefreshComponent.prototype, "loaderTransform$", null);
+    TuiPullToRefreshComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiPullToRefreshComponent, deps: [{ token: i1.TUI_IS_IOS }, { token: TUI_PULL_TO_REFRESH_THRESHOLD }, { token: TUI_PULL_TO_REFRESH_COMPONENT }, { token: TuiPullToRefreshService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiPullToRefreshComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiPullToRefreshComponent, selector: "tui-pull-to-refresh", outputs: { pulled: "pulled" }, providers: [TuiPullToRefreshService], ngImport: i0__namespace, 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<ng-container *polymorpheusOutlet=\"component; context: {$implicit: (pulling$ | async) || 0}\"></ng-container>\n", styles: [":host{position:relative;display:block;overflow:hidden}.t-drop-animation{transition:all var(--tui-duration) cubic-bezier(.4,0,.2,1)}\n"], directives: [{ type: i1__namespace.TuiOverscrollDirective, selector: "[tuiOverscroll]", inputs: ["tuiOverscroll"] }, { type: i2__namespace$1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], pipes: { "async": i2__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiPullToRefreshComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -490,19 +578,25 @@
                         templateUrl: './pull-to-refresh.template.html',
                         styleUrls: ['./pull-to-refresh.style.less'],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        providers: TUI_PULL_TO_REFRESH_PROVIDERS,
+                        providers: [TuiPullToRefreshService],
                     }]
             }], ctorParameters: function () {
             return [{ type: undefined, decorators: [{
                             type: i0.Inject,
                             args: [i1.TUI_IS_IOS]
-                        }] }, { type: i5__namespace.Observable, decorators: [{
+                        }] }, { type: undefined, decorators: [{
                             type: i0.Inject,
-                            args: [TUI_PULLING]
+                            args: [TUI_PULL_TO_REFRESH_THRESHOLD]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [TUI_PULL_TO_REFRESH_COMPONENT]
+                        }] }, { type: i1__namespace$1.Observable, decorators: [{
+                            type: i0.Inject,
+                            args: [TuiPullToRefreshService]
                         }] }];
         }, propDecorators: { pulled: [{
                     type: i0.Output
-                }], loaderTransform$: [] } });
+                }] } });
 
     var TuiPullToRefreshModule = /** @class */ (function () {
         function TuiPullToRefreshModule() {
@@ -512,12 +606,28 @@
     TuiPullToRefreshModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiPullToRefreshModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
     TuiPullToRefreshModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiPullToRefreshModule, declarations: [TuiPullToRefreshComponent,
             TuiMobileLoaderAndroidComponent,
-            TuiMobileLoaderIOSComponent], imports: [i4.CommonModule, core.TuiSvgModule, i1.TuiOverscrollModule, i1.TuiRepeatTimesModule], exports: [TuiPullToRefreshComponent] });
-    TuiPullToRefreshModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiPullToRefreshModule, imports: [[i4.CommonModule, core.TuiSvgModule, i1.TuiOverscrollModule, i1.TuiRepeatTimesModule]] });
+            TuiMobileLoaderIOSComponent], imports: [i2$1.CommonModule,
+            core.TuiSvgModule,
+            i1.TuiOverscrollModule,
+            i1.TuiRepeatTimesModule,
+            i2.PolymorpheusModule], exports: [TuiPullToRefreshComponent] });
+    TuiPullToRefreshModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiPullToRefreshModule, imports: [[
+                i2$1.CommonModule,
+                core.TuiSvgModule,
+                i1.TuiOverscrollModule,
+                i1.TuiRepeatTimesModule,
+                i2.PolymorpheusModule,
+            ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiPullToRefreshModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [i4.CommonModule, core.TuiSvgModule, i1.TuiOverscrollModule, i1.TuiRepeatTimesModule],
+                        imports: [
+                            i2$1.CommonModule,
+                            core.TuiSvgModule,
+                            i1.TuiOverscrollModule,
+                            i1.TuiRepeatTimesModule,
+                            i2.PolymorpheusModule,
+                        ],
                         declarations: [
                             TuiPullToRefreshComponent,
                             TuiMobileLoaderAndroidComponent,
@@ -532,13 +642,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.TuiPullToRefreshService = TuiPullToRefreshService;
 
     Object.defineProperty(exports, '__esModule', { value: true });