@taiga-ui/addon-mobile
Version:
Extension package for Taiga UI that adds support for mobile specific behaviors such as custom data pickers, dropdowns, etc.
39 lines • 9.95 kB
JavaScript
import { NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { TuiRepeatTimes } from '@taiga-ui/cdk/directives/repeat-times';
import { injectContext, PolymorpheusComponent } from '@taiga-ui/polymorpheus';
import { TUI_PULL_TO_REFRESH_THRESHOLD } from '../pull-to-refresh.providers';
import * as i0 from "@angular/core";
const LOADED_STEP = 8;
const ROTATE_X_STEP = 30;
class TuiMobileLoaderIOS {
constructor() {
this.context = injectContext();
this.threshold = inject(TUI_PULL_TO_REFRESH_THRESHOLD);
this.steps = 12;
}
get finished() {
return this.percent >= 100;
}
get percent() {
return (this.context.$implicit * 100) / this.threshold;
}
isShown(index) {
return this.percent > (index + 1) * LOADED_STEP;
}
calculateTransform(index) {
return `rotate(${index * ROTATE_X_STEP} 50 50)`;
}
calculateAnimationBegin(index) {
return `${(index * LOADED_STEP) / 100}s`;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiMobileLoaderIOS, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiMobileLoaderIOS, isStandalone: true, selector: "tui-mobile-ios-loader", ngImport: i0, template: "<svg\n height=\"36\"\n preserveAspectRatio=\"xMidYMid\"\n viewBox=\"0 0 100 100\"\n width=\"36\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <ng-container *tuiRepeatTimes=\"let index of steps\">\n <g\n *ngIf=\"isShown(index)\"\n [attr.transform]=\"calculateTransform(index)\"\n >\n <rect\n fill=\"#c7c9cc\"\n height=\"16\"\n rx=\"7.05\"\n ry=\"3.3\"\n width=\"6\"\n x=\"47\"\n y=\"22\"\n >\n <animate\n *ngIf=\"finished\"\n attributeName=\"opacity\"\n dur=\"1s\"\n keyTimes=\"0;1\"\n repeatCount=\"indefinite\"\n values=\"1;0\"\n [attr.begin]=\"calculateAnimationBegin(index)\"\n />\n </rect>\n </g>\n </ng-container>\n</svg>\n", styles: [":host{position:absolute;top:-.5rem;left:50%;margin-inline-start:-1.125rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TuiRepeatTimes, selector: "[tuiRepeatTimes][tuiRepeatTimesOf]", inputs: ["tuiRepeatTimesOf"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
export { TuiMobileLoaderIOS };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiMobileLoaderIOS, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tui-mobile-ios-loader', imports: [NgIf, TuiRepeatTimes], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n height=\"36\"\n preserveAspectRatio=\"xMidYMid\"\n viewBox=\"0 0 100 100\"\n width=\"36\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <ng-container *tuiRepeatTimes=\"let index of steps\">\n <g\n *ngIf=\"isShown(index)\"\n [attr.transform]=\"calculateTransform(index)\"\n >\n <rect\n fill=\"#c7c9cc\"\n height=\"16\"\n rx=\"7.05\"\n ry=\"3.3\"\n width=\"6\"\n x=\"47\"\n y=\"22\"\n >\n <animate\n *ngIf=\"finished\"\n attributeName=\"opacity\"\n dur=\"1s\"\n keyTimes=\"0;1\"\n repeatCount=\"indefinite\"\n values=\"1;0\"\n [attr.begin]=\"calculateAnimationBegin(index)\"\n />\n </rect>\n </g>\n </ng-container>\n</svg>\n", styles: [":host{position:absolute;top:-.5rem;left:50%;margin-inline-start:-1.125rem}\n"] }]
}] });
export const TUI_IOS_LOADER = new PolymorpheusComponent(TuiMobileLoaderIOS);
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibG9hZGVyLWlvcy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hZGRvbi1tb2JpbGUvY29tcG9uZW50cy9wdWxsLXRvLXJlZnJlc2gvbG9hZGVyLWlvcy9sb2FkZXItaW9zLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FkZG9uLW1vYmlsZS9jb21wb25lbnRzL3B1bGwtdG8tcmVmcmVzaC9sb2FkZXItaW9zL2xvYWRlci1pb3MudGVtcGxhdGUuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsSUFBSSxFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFDckMsT0FBTyxFQUFDLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDekUsT0FBTyxFQUFDLGNBQWMsRUFBQyxNQUFNLHVDQUF1QyxDQUFDO0FBRXJFLE9BQU8sRUFBQyxhQUFhLEVBQUUscUJBQXFCLEVBQUMsTUFBTSx3QkFBd0IsQ0FBQztBQUU1RSxPQUFPLEVBQUMsNkJBQTZCLEVBQUMsTUFBTSw4QkFBOEIsQ0FBQzs7QUFFM0UsTUFBTSxXQUFXLEdBQUcsQ0FBQyxDQUFDO0FBQ3RCLE1BQU0sYUFBYSxHQUFHLEVBQUUsQ0FBQztBQUV6QixNQVFhLGtCQUFrQjtJQVIvQjtRQVNxQixZQUFPLEdBQUcsYUFBYSxFQUFzQixDQUFDO1FBQzlDLGNBQVMsR0FBRyxNQUFNLENBQUMsNkJBQTZCLENBQUMsQ0FBQztRQUVoRCxVQUFLLEdBQUcsRUFBRSxDQUFDO0tBcUJqQztJQW5CRyxJQUFjLFFBQVE7UUFDbEIsT0FBTyxJQUFJLENBQUMsT0FBTyxJQUFJLEdBQUcsQ0FBQztJQUMvQixDQUFDO0lBRUQsSUFBYyxPQUFPO1FBQ2pCLE9BQU8sQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLFNBQVMsR0FBRyxHQUFHLENBQUMsR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDO0lBQzNELENBQUM7SUFFUyxPQUFPLENBQUMsS0FBYTtRQUMzQixPQUFPLElBQUksQ0FBQyxPQUFPLEdBQUcsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLEdBQUcsV0FBVyxDQUFDO0lBQ3BELENBQUM7SUFFUyxrQkFBa0IsQ0FBQyxLQUFhO1FBQ3RDLE9BQU8sVUFBVSxLQUFLLEdBQUcsYUFBYSxTQUFTLENBQUM7SUFDcEQsQ0FBQztJQUVTLHVCQUF1QixDQUFDLEtBQWE7UUFDM0MsT0FBTyxHQUFHLENBQUMsS0FBSyxHQUFHLFdBQVcsQ0FBQyxHQUFHLEdBQUcsR0FBRyxDQUFDO0lBQzdDLENBQUM7K0dBeEJRLGtCQUFrQjttR0FBbEIsa0JBQWtCLGlGQ25CL0Isb2hDQW1DQSxzSURyQmMsSUFBSSw2RkFBRSxjQUFjOztTQUtyQixrQkFBa0I7NEZBQWxCLGtCQUFrQjtrQkFSOUIsU0FBUztpQ0FDTSxJQUFJLFlBQ04sdUJBQXVCLFdBQ3hCLENBQUMsSUFBSSxFQUFFLGNBQWMsQ0FBQyxtQkFHZCx1QkFBdUIsQ0FBQyxNQUFNOztBQTZCbkQsTUFBTSxDQUFDLE1BQU0sY0FBYyxHQUFHLElBQUkscUJBQXFCLENBQUMsa0JBQWtCLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7TmdJZn0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7Q2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgaW5qZWN0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7VHVpUmVwZWF0VGltZXN9IGZyb20gJ0B0YWlnYS11aS9jZGsvZGlyZWN0aXZlcy9yZXBlYXQtdGltZXMnO1xuaW1wb3J0IHt0eXBlIFR1aUNvbnRleHR9IGZyb20gJ0B0YWlnYS11aS9jZGsvdHlwZXMnO1xuaW1wb3J0IHtpbmplY3RDb250ZXh0LCBQb2x5bW9ycGhldXNDb21wb25lbnR9IGZyb20gJ0B0YWlnYS11aS9wb2x5bW9ycGhldXMnO1xuXG5pbXBvcnQge1RVSV9QVUxMX1RPX1JFRlJFU0hfVEhSRVNIT0xEfSBmcm9tICcuLi9wdWxsLXRvLXJlZnJlc2gucHJvdmlkZXJzJztcblxuY29uc3QgTE9BREVEX1NURVAgPSA4O1xuY29uc3QgUk9UQVRFX1hfU1RFUCA9IDMwO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIHNlbGVjdG9yOiAndHVpLW1vYmlsZS1pb3MtbG9hZGVyJyxcbiAgICBpbXBvcnRzOiBbTmdJZiwgVHVpUmVwZWF0VGltZXNdLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9sb2FkZXItaW9zLnRlbXBsYXRlLmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2xvYWRlci1pb3Muc3R5bGUubGVzcyddLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBUdWlNb2JpbGVMb2FkZXJJT1Mge1xuICAgIHByaXZhdGUgcmVhZG9ubHkgY29udGV4dCA9IGluamVjdENvbnRleHQ8VHVpQ29udGV4dDxudW1iZXI+PigpO1xuICAgIHByaXZhdGUgcmVhZG9ubHkgdGhyZXNob2xkID0gaW5qZWN0KFRVSV9QVUxMX1RPX1JFRlJFU0hfVEhSRVNIT0xEKTtcblxuICAgIHByb3RlY3RlZCByZWFkb25seSBzdGVwcyA9IDEyO1xuXG4gICAgcHJvdGVjdGVkIGdldCBmaW5pc2hlZCgpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuIHRoaXMucGVyY2VudCA+PSAxMDA7XG4gICAgfVxuXG4gICAgcHJvdGVjdGVkIGdldCBwZXJjZW50KCk6IG51bWJlciB7XG4gICAgICAgIHJldHVybiAodGhpcy5jb250ZXh0LiRpbXBsaWNpdCAqIDEwMCkgLyB0aGlzLnRocmVzaG9sZDtcbiAgICB9XG5cbiAgICBwcm90ZWN0ZWQgaXNTaG93bihpbmRleDogbnVtYmVyKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiB0aGlzLnBlcmNlbnQgPiAoaW5kZXggKyAxKSAqIExPQURFRF9TVEVQO1xuICAgIH1cblxuICAgIHByb3RlY3RlZCBjYWxjdWxhdGVUcmFuc2Zvcm0oaW5kZXg6IG51bWJlcik6IHN0cmluZyB7XG4gICAgICAgIHJldHVybiBgcm90YXRlKCR7aW5kZXggKiBST1RBVEVfWF9TVEVQfSA1MCA1MClgO1xuICAgIH1cblxuICAgIHByb3RlY3RlZCBjYWxjdWxhdGVBbmltYXRpb25CZWdpbihpbmRleDogbnVtYmVyKTogc3RyaW5nIHtcbiAgICAgICAgcmV0dXJuIGAkeyhpbmRleCAqIExPQURFRF9TVEVQKSAvIDEwMH1zYDtcbiAgICB9XG59XG5cbmV4cG9ydCBjb25zdCBUVUlfSU9TX0xPQURFUiA9IG5ldyBQb2x5bW9ycGhldXNDb21wb25lbnQoVHVpTW9iaWxlTG9hZGVySU9TKTtcbiIsIjxzdmdcbiAgICBoZWlnaHQ9XCIzNlwiXG4gICAgcHJlc2VydmVBc3BlY3RSYXRpbz1cInhNaWRZTWlkXCJcbiAgICB2aWV3Qm94PVwiMCAwIDEwMCAxMDBcIlxuICAgIHdpZHRoPVwiMzZcIlxuICAgIHhtbG5zOnhsaW5rPVwiaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGlua1wiXG4gICAgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiXG4+XG4gICAgPG5nLWNvbnRhaW5lciAqdHVpUmVwZWF0VGltZXM9XCJsZXQgaW5kZXggb2Ygc3RlcHNcIj5cbiAgICAgICAgPGdcbiAgICAgICAgICAgICpuZ0lmPVwiaXNTaG93bihpbmRleClcIlxuICAgICAgICAgICAgW2F0dHIudHJhbnNmb3JtXT1cImNhbGN1bGF0ZVRyYW5zZm9ybShpbmRleClcIlxuICAgICAgICA+XG4gICAgICAgICAgICA8cmVjdFxuICAgICAgICAgICAgICAgIGZpbGw9XCIjYzdjOWNjXCJcbiAgICAgICAgICAgICAgICBoZWlnaHQ9XCIxNlwiXG4gICAgICAgICAgICAgICAgcng9XCI3LjA1XCJcbiAgICAgICAgICAgICAgICByeT1cIjMuM1wiXG4gICAgICAgICAgICAgICAgd2lkdGg9XCI2XCJcbiAgICAgICAgICAgICAgICB4PVwiNDdcIlxuICAgICAgICAgICAgICAgIHk9XCIyMlwiXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPGFuaW1hdGVcbiAgICAgICAgICAgICAgICAgICAgKm5nSWY9XCJmaW5pc2hlZFwiXG4gICAgICAgICAgICAgICAgICAgIGF0dHJpYnV0ZU5hbWU9XCJvcGFjaXR5XCJcbiAgICAgICAgICAgICAgICAgICAgZHVyPVwiMXNcIlxuICAgICAgICAgICAgICAgICAgICBrZXlUaW1lcz1cIjA7MVwiXG4gICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PVwiaW5kZWZpbml0ZVwiXG4gICAgICAgICAgICAgICAgICAgIHZhbHVlcz1cIjE7MFwiXG4gICAgICAgICAgICAgICAgICAgIFthdHRyLmJlZ2luXT1cImNhbGN1bGF0ZUFuaW1hdGlvbkJlZ2luKGluZGV4KVwiXG4gICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgIDwvcmVjdD5cbiAgICAgICAgPC9nPlxuICAgIDwvbmctY29udGFpbmVyPlxuPC9zdmc+XG4iXX0=