@taiga-ui/addon-mobile/esm2022/components/pull-to-refresh/loader-android/loader-android.component.mjs

Extension package for Taiga UI that adds support for mobile specific behaviors such as custom data pickers, dropdowns, etc.

import { NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { TuiLoader } from '@taiga-ui/core/components/loader';
import { injectContext, PolymorpheusComponent } from '@taiga-ui/polymorpheus';
import { TUI_PULL_TO_REFRESH_THRESHOLD } from '../pull-to-refresh.providers';
import { MICRO_OFFSET } from '../pull-to-refresh.service';
import * as i0 from "@angular/core";
const ROTATE_X_DEFAULT = 180;
const ROTATE_X_MAX = 500;
const ROTATE_X_MULTIPLIER = 2.3;
class TuiMobileLoaderAndroid {
    constructor() {
        this.context = injectContext();
        this.threshold = inject(TUI_PULL_TO_REFRESH_THRESHOLD);
    }
    get percent() {
        return (this.context.$implicit * 100) / this.threshold;
    }
    get dropped() {
        return (this.context.$implicit <= MICRO_OFFSET ||
            this.context.$implicit === this.threshold);
    }
    get hostTransform() {
        return `translateY(${Math.min(this.context.$implicit, this.threshold * 1.5)}px)`;
    }
    get opacity() {
        return this.context.$implicit / (this.threshold * 1.5);
    }
    get transform() {
        const rotateX = Math.min(ROTATE_X_DEFAULT + this.percent * ROTATE_X_MULTIPLIER, ROTATE_X_MAX);
        return `rotate(${rotateX} 0 0)`;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiMobileLoaderAndroid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiMobileLoaderAndroid, isStandalone: true, selector: "tui-mobile-android-loader", host: { properties: { "class._visible": "percent", "class._dropped": "dropped", "style.transform": "hostTransform" } }, ngImport: i0, template: "<div class=\"t-wrapper\">\n    <svg\n        *ngIf=\"percent !== 100; else loading\"\n        fill=\"none\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        width=\"24\"\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                    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                    fill-rule=\"evenodd\"\n                />\n            </mask>\n        </defs>\n        <g mask=\"url(#mask-1)\">\n            <path\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                fill-rule=\"evenodd\"\n            />\n        </g>\n    </svg>\n</div>\n<ng-template #loading>\n    <tui-loader\n        size=\"s\"\n        class=\"t-loader\"\n        [inheritColor]=\"true\"\n    />\n</ng-template>\n", styles: [":host{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:sticky;top:0;z-index:1;display:block;block-size: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{position:absolute;top:-2.5rem;left:50%;display:flex;box-shadow:var(--tui-shadow-medium);block-size:2.25rem;inline-size:2.25rem;background-color:var(--tui-background-neutral-1);border-radius:6.25rem;align-items:center;justify-content:center;margin-inline-start:-1.125rem}.t-loader{color:var(--tui-text-primary)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
export { TuiMobileLoaderAndroid };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiMobileLoaderAndroid, decorators: [{
            type: Component,
            args: [{ standalone: true, selector: 'tui-mobile-android-loader', imports: [NgIf, TuiLoader], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        '[class._visible]': 'percent',
                        '[class._dropped]': 'dropped',
                        '[style.transform]': 'hostTransform',
                    }, template: "<div class=\"t-wrapper\">\n    <svg\n        *ngIf=\"percent !== 100; else loading\"\n        fill=\"none\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        width=\"24\"\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                    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                    fill-rule=\"evenodd\"\n                />\n            </mask>\n        </defs>\n        <g mask=\"url(#mask-1)\">\n            <path\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                fill-rule=\"evenodd\"\n            />\n        </g>\n    </svg>\n</div>\n<ng-template #loading>\n    <tui-loader\n        size=\"s\"\n        class=\"t-loader\"\n        [inheritColor]=\"true\"\n    />\n</ng-template>\n", styles: [":host{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:sticky;top:0;z-index:1;display:block;block-size: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{position:absolute;top:-2.5rem;left:50%;display:flex;box-shadow:var(--tui-shadow-medium);block-size:2.25rem;inline-size:2.25rem;background-color:var(--tui-background-neutral-1);border-radius:6.25rem;align-items:center;justify-content:center;margin-inline-start:-1.125rem}.t-loader{color:var(--tui-text-primary)}\n"] }]
        }] });
export const TUI_ANDROID_LOADER = new PolymorpheusComponent(TuiMobileLoaderAndroid);
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibG9hZGVyLWFuZHJvaWQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYWRkb24tbW9iaWxlL2NvbXBvbmVudHMvcHVsbC10by1yZWZyZXNoL2xvYWRlci1hbmRyb2lkL2xvYWRlci1hbmRyb2lkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FkZG9uLW1vYmlsZS9jb21wb25lbnRzL3B1bGwtdG8tcmVmcmVzaC9sb2FkZXItYW5kcm9pZC9sb2FkZXItYW5kcm9pZC50ZW1wbGF0ZS5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxJQUFJLEVBQUMsTUFBTSxpQkFBaUIsQ0FBQztBQUNyQyxPQUFPLEVBQUMsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUV6RSxPQUFPLEVBQUMsU0FBUyxFQUFDLE1BQU0sa0NBQWtDLENBQUM7QUFDM0QsT0FBTyxFQUFDLGFBQWEsRUFBRSxxQkFBcUIsRUFBQyxNQUFNLHdCQUF3QixDQUFDO0FBRTVFLE9BQU8sRUFBQyw2QkFBNkIsRUFBQyxNQUFNLDhCQUE4QixDQUFDO0FBQzNFLE9BQU8sRUFBQyxZQUFZLEVBQUMsTUFBTSw0QkFBNEIsQ0FBQzs7QUFFeEQsTUFBTSxnQkFBZ0IsR0FBRyxHQUFHLENBQUM7QUFDN0IsTUFBTSxZQUFZLEdBQUcsR0FBRyxDQUFDO0FBQ3pCLE1BQU0sbUJBQW1CLEdBQUcsR0FBRyxDQUFDO0FBRWhDLE1BYWEsc0JBQXNCO0lBYm5DO1FBY3FCLFlBQU8sR0FBRyxhQUFhLEVBQXNCLENBQUM7UUFDOUMsY0FBUyxHQUFHLE1BQU0sQ0FBQyw2QkFBNkIsQ0FBQyxDQUFDO0tBNkJ0RTtJQTNCRyxJQUFjLE9BQU87UUFDakIsT0FBTyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsU0FBUyxHQUFHLEdBQUcsQ0FBQyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUM7SUFDM0QsQ0FBQztJQUVELElBQWMsT0FBTztRQUNqQixPQUFPLENBQ0gsSUFBSSxDQUFDLE9BQU8sQ0FBQyxTQUFTLElBQUksWUFBWTtZQUN0QyxJQUFJLENBQUMsT0FBTyxDQUFDLFNBQVMsS0FBSyxJQUFJLENBQUMsU0FBUyxDQUM1QyxDQUFDO0lBQ04sQ0FBQztJQUVELElBQWMsYUFBYTtRQUN2QixPQUFPLGNBQWMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLFNBQVMsRUFBRSxJQUFJLENBQUMsU0FBUyxHQUFHLEdBQUcsQ0FBQyxLQUFLLENBQUM7SUFDckYsQ0FBQztJQUVELElBQWMsT0FBTztRQUNqQixPQUFPLElBQUksQ0FBQyxPQUFPLENBQUMsU0FBUyxHQUFHLENBQUMsSUFBSSxDQUFDLFNBQVMsR0FBRyxHQUFHLENBQUMsQ0FBQztJQUMzRCxDQUFDO0lBRUQsSUFBYyxTQUFTO1FBQ25CLE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQ3BCLGdCQUFnQixHQUFHLElBQUksQ0FBQyxPQUFPLEdBQUcsbUJBQW1CLEVBQ3JELFlBQVksQ0FDZixDQUFDO1FBRUYsT0FBTyxVQUFVLE9BQU8sT0FBTyxDQUFDO0lBQ3BDLENBQUM7K0dBOUJRLHNCQUFzQjttR0FBdEIsc0JBQXNCLDZNQzFCbkMsNDRDQXNDQSxpdEJEdEJjLElBQUksNkZBQUUsU0FBUzs7U0FVaEIsc0JBQXNCOzRGQUF0QixzQkFBc0I7a0JBYmxDLFNBQVM7aUNBQ00sSUFBSSxZQUNOLDJCQUEyQixXQUM1QixDQUFDLElBQUksRUFBRSxTQUFTLENBQUMsbUJBR1QsdUJBQXVCLENBQUMsTUFBTSxRQUN6Qzt3QkFDRixrQkFBa0IsRUFBRSxTQUFTO3dCQUM3QixrQkFBa0IsRUFBRSxTQUFTO3dCQUM3QixtQkFBbUIsRUFBRSxlQUFlO3FCQUN2Qzs7QUFtQ0wsTUFBTSxDQUFDLE1BQU0sa0JBQWtCLEdBQUcsSUFBSSxxQkFBcUIsQ0FBQyxzQkFBc0IsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtOZ0lmfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBpbmplY3R9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHt0eXBlIFR1aUNvbnRleHR9IGZyb20gJ0B0YWlnYS11aS9jZGsvdHlwZXMnO1xuaW1wb3J0IHtUdWlMb2FkZXJ9IGZyb20gJ0B0YWlnYS11aS9jb3JlL2NvbXBvbmVudHMvbG9hZGVyJztcbmltcG9ydCB7aW5qZWN0Q29udGV4dCwgUG9seW1vcnBoZXVzQ29tcG9uZW50fSBmcm9tICdAdGFpZ2EtdWkvcG9seW1vcnBoZXVzJztcblxuaW1wb3J0IHtUVUlfUFVMTF9UT19SRUZSRVNIX1RIUkVTSE9MRH0gZnJvbSAnLi4vcHVsbC10by1yZWZyZXNoLnByb3ZpZGVycyc7XG5pbXBvcnQge01JQ1JPX09GRlNFVH0gZnJvbSAnLi4vcHVsbC10by1yZWZyZXNoLnNlcnZpY2UnO1xuXG5jb25zdCBST1RBVEVfWF9ERUZBVUxUID0gMTgwO1xuY29uc3QgUk9UQVRFX1hfTUFYID0gNTAwO1xuY29uc3QgUk9UQVRFX1hfTVVMVElQTElFUiA9IDIuMztcblxuQENvbXBvbmVudCh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBzZWxlY3RvcjogJ3R1aS1tb2JpbGUtYW5kcm9pZC1sb2FkZXInLFxuICAgIGltcG9ydHM6IFtOZ0lmLCBUdWlMb2FkZXJdLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9sb2FkZXItYW5kcm9pZC50ZW1wbGF0ZS5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9sb2FkZXItYW5kcm9pZC5zdHlsZS5sZXNzJ10sXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgaG9zdDoge1xuICAgICAgICAnW2NsYXNzLl92aXNpYmxlXSc6ICdwZXJjZW50JyxcbiAgICAgICAgJ1tjbGFzcy5fZHJvcHBlZF0nOiAnZHJvcHBlZCcsXG4gICAgICAgICdbc3R5bGUudHJhbnNmb3JtXSc6ICdob3N0VHJhbnNmb3JtJyxcbiAgICB9LFxufSlcbmV4cG9ydCBjbGFzcyBUdWlNb2JpbGVMb2FkZXJBbmRyb2lkIHtcbiAgICBwcml2YXRlIHJlYWRvbmx5IGNvbnRleHQgPSBpbmplY3RDb250ZXh0PFR1aUNvbnRleHQ8bnVtYmVyPj4oKTtcbiAgICBwcml2YXRlIHJlYWRvbmx5IHRocmVzaG9sZCA9IGluamVjdChUVUlfUFVMTF9UT19SRUZSRVNIX1RIUkVTSE9MRCk7XG5cbiAgICBwcm90ZWN0ZWQgZ2V0IHBlcmNlbnQoKTogbnVtYmVyIHtcbiAgICAgICAgcmV0dXJuICh0aGlzLmNvbnRleHQuJGltcGxpY2l0ICogMTAwKSAvIHRoaXMudGhyZXNob2xkO1xuICAgIH1cblxuICAgIHByb3RlY3RlZCBnZXQgZHJvcHBlZCgpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgIHRoaXMuY29udGV4dC4kaW1wbGljaXQgPD0gTUlDUk9fT0ZGU0VUIHx8XG4gICAgICAgICAgICB0aGlzLmNvbnRleHQuJGltcGxpY2l0ID09PSB0aGlzLnRocmVzaG9sZFxuICAgICAgICApO1xuICAgIH1cblxuICAgIHByb3RlY3RlZCBnZXQgaG9zdFRyYW5zZm9ybSgpOiBzdHJpbmcge1xuICAgICAgICByZXR1cm4gYHRyYW5zbGF0ZVkoJHtNYXRoLm1pbih0aGlzLmNvbnRleHQuJGltcGxpY2l0LCB0aGlzLnRocmVzaG9sZCAqIDEuNSl9cHgpYDtcbiAgICB9XG5cbiAgICBwcm90ZWN0ZWQgZ2V0IG9wYWNpdHkoKTogbnVtYmVyIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuY29udGV4dC4kaW1wbGljaXQgLyAodGhpcy50aHJlc2hvbGQgKiAxLjUpO1xuICAgIH1cblxuICAgIHByb3RlY3RlZCBnZXQgdHJhbnNmb3JtKCk6IHN0cmluZyB7XG4gICAgICAgIGNvbnN0IHJvdGF0ZVggPSBNYXRoLm1pbihcbiAgICAgICAgICAgIFJPVEFURV9YX0RFRkFVTFQgKyB0aGlzLnBlcmNlbnQgKiBST1RBVEVfWF9NVUxUSVBMSUVSLFxuICAgICAgICAgICAgUk9UQVRFX1hfTUFYLFxuICAgICAgICApO1xuXG4gICAgICAgIHJldHVybiBgcm90YXRlKCR7cm90YXRlWH0gMCAwKWA7XG4gICAgfVxufVxuXG5leHBvcnQgY29uc3QgVFVJX0FORFJPSURfTE9BREVSID0gbmV3IFBvbHltb3JwaGV1c0NvbXBvbmVudChUdWlNb2JpbGVMb2FkZXJBbmRyb2lkKTtcbiIsIjxkaXYgY2xhc3M9XCJ0LXdyYXBwZXJcIj5cbiAgICA8c3ZnXG4gICAgICAgICpuZ0lmPVwicGVyY2VudCAhPT0gMTAwOyBlbHNlIGxvYWRpbmdcIlxuICAgICAgICBmaWxsPVwibm9uZVwiXG4gICAgICAgIGhlaWdodD1cIjI0XCJcbiAgICAgICAgdmlld0JveD1cIjAgMCAyNCAyNFwiXG4gICAgICAgIHdpZHRoPVwiMjRcIlxuICAgICAgICB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCJcbiAgICAgICAgW2F0dHIudHJhbnNmb3JtXT1cInRyYW5zZm9ybVwiXG4gICAgICAgIFtzdHlsZS5vcGFjaXR5XT1cIm9wYWNpdHlcIlxuICAgID5cbiAgICAgICAgPGRlZnM+XG4gICAgICAgICAgICA8bWFzayBpZD1cIm1hc2stMVwiPlxuICAgICAgICAgICAgICAgIDxwYXRoXG4gICAgICAgICAgICAgICAgICAgIGNsaXAtcnVsZT1cImV2ZW5vZGRcIlxuICAgICAgICAgICAgICAgICAgICBkPVwiTTIxIDEyQzIxIDcuMDMgMTYuOTcgMyAxMiAzQzcuMDMgMyAzIDcuMDMgMyAxMkMzIDE2Ljk3IDcuMDMgMjEgMTIgMjFDMTQuMDYgMjEgMTUuOTYgMjAuMyAxNy40OCAxOS4xNEwxNi4wNiAxNy43QzE0LjkxIDE4LjUxIDEzLjUxIDE5IDEyIDE5QzguMTMgMTkgNSAxNS44NyA1IDEyQzUgOC4xMyA4LjEzIDUgMTIgNUMxNS44NyA1IDE5IDguMTMgMTkgMTJIMTZMMjAgMTZMMjQgMTJIMjFaXCJcbiAgICAgICAgICAgICAgICAgICAgZmlsbD1cIndoaXRlXCJcbiAgICAgICAgICAgICAgICAgICAgZmlsbC1ydWxlPVwiZXZlbm9kZFwiXG4gICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgIDwvbWFzaz5cbiAgICAgICAgPC9kZWZzPlxuICAgICAgICA8ZyBtYXNrPVwidXJsKCNtYXNrLTEpXCI+XG4gICAgICAgICAgICA8cGF0aFxuICAgICAgICAgICAgICAgIGNsaXAtcnVsZT1cImV2ZW5vZGRcIlxuICAgICAgICAgICAgICAgIGQ9XCJNMjEgMTJDMjEgNy4wMyAxNi45NyAzIDEyIDNDNy4wMyAzIDMgNy4wMyAzIDEyQzMgMTYuOTcgNy4wMyAyMSAxMiAyMUMxNC4wNiAyMSAxNS45NiAyMC4zIDE3LjQ4IDE5LjE0TDE2LjA2IDE3LjdDMTQuOTEgMTguNTEgMTMuNTEgMTkgMTIgMTlDOC4xMyAxOSA1IDE1Ljg3IDUgMTJDNSA4LjEzIDguMTMgNSAxMiA1QzE1Ljg3IDUgMTkgOC4xMyAxOSAxMkgxNkwyMCAxNkwyNCAxMkgyMVpcIlxuICAgICAgICAgICAgICAgIGZpbGw9XCJibGFja1wiXG4gICAgICAgICAgICAgICAgZmlsbC1ydWxlPVwiZXZlbm9kZFwiXG4gICAgICAgICAgICAvPlxuICAgICAgICA8L2c+XG4gICAgPC9zdmc+XG48L2Rpdj5cbjxuZy10ZW1wbGF0ZSAjbG9hZGluZz5cbiAgICA8dHVpLWxvYWRlclxuICAgICAgICBzaXplPVwic1wiXG4gICAgICAgIGNsYXNzPVwidC1sb2FkZXJcIlxuICAgICAgICBbaW5oZXJpdENvbG9yXT1cInRydWVcIlxuICAgIC8+XG48L25nLXRlbXBsYXRlPlxuIl19