@taiga-ui/addon-mobile
Version:
Extension package for Taiga UI that adds support for mobile specific behaviors such as custom data pickers, dropdowns, etc.
51 lines • 11 kB
JavaScript
import { AsyncPipe } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject, Input, Output } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { tuiScrollFrom, tuiZonefree } from '@taiga-ui/cdk/observables';
import { TUI_IS_IOS } from '@taiga-ui/cdk/tokens';
import { tuiPx } from '@taiga-ui/cdk/utils/miscellaneous';
import { TUI_SCROLL_REF } from '@taiga-ui/core/tokens';
import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
import { distinctUntilChanged, filter, map, startWith } from 'rxjs';
import { TUI_PULL_TO_REFRESH_COMPONENT, TUI_PULL_TO_REFRESH_THRESHOLD, } from './pull-to-refresh.providers';
import { MICRO_OFFSET, TuiPullToRefreshService } from './pull-to-refresh.service';
import * as i0 from "@angular/core";
class TuiPullToRefresh {
constructor() {
this.isIOS = inject(TUI_IS_IOS);
this.threshold = inject(TUI_PULL_TO_REFRESH_THRESHOLD);
this.pulling$ = inject(TuiPullToRefreshService);
this.component = inject(TUI_PULL_TO_REFRESH_COMPONENT);
this.dropped$ = this.pulling$.pipe(map((distance) => distance <= MICRO_OFFSET || distance === this.threshold), distinctUntilChanged());
this.styleHandler = this.isIOS
? (distance) => ({ top: tuiPx(distance / 2) })
: () => null;
this.pulled = inject(TuiPullToRefreshService).pipe(filter((distance) => distance === this.threshold));
if (!this.component) {
return; // Ensure scrolling down is impossible while pulling
}
const el = inject(TUI_SCROLL_REF).nativeElement;
tuiScrollFrom(el)
.pipe(startWith(null), tuiZonefree(), takeUntilDestroyed())
.subscribe(() => {
if (el.scrollTop) {
el.style.touchAction = '';
}
else {
el.style.touchAction = 'pan-down';
}
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiPullToRefresh, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiPullToRefresh, isStandalone: true, selector: "tui-pull-to-refresh", inputs: { styleHandler: "styleHandler" }, outputs: { pulled: "pulled" }, providers: [TuiPullToRefreshService], ngImport: i0, template: "<ng-container *polymorpheusOutlet=\"component; context: {$implicit: (pulling$ | async) || 0}\" />\n\n<div\n [class.t-drop]=\"dropped$ | async\"\n [style.position]=\"'relative'\"\n [style]=\"styleHandler((pulling$ | async) || 0)\"\n>\n <ng-content />\n</div>\n", styles: [".t-drop{transition:all var(--tui-duration) cubic-bezier(.4,0,.2,1)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
export { TuiPullToRefresh };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiPullToRefresh, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tui-pull-to-refresh', imports: [AsyncPipe, PolymorpheusOutlet], changeDetection: ChangeDetectionStrategy.OnPush, providers: [TuiPullToRefreshService], template: "<ng-container *polymorpheusOutlet=\"component; context: {$implicit: (pulling$ | async) || 0}\" />\n\n<div\n [class.t-drop]=\"dropped$ | async\"\n [style.position]=\"'relative'\"\n [style]=\"styleHandler((pulling$ | async) || 0)\"\n>\n <ng-content />\n</div>\n", styles: [".t-drop{transition:all var(--tui-duration) cubic-bezier(.4,0,.2,1)}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { styleHandler: [{
type: Input
}], pulled: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVsbC10by1yZWZyZXNoLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FkZG9uLW1vYmlsZS9jb21wb25lbnRzL3B1bGwtdG8tcmVmcmVzaC9wdWxsLXRvLXJlZnJlc2guY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYWRkb24tbW9iaWxlL2NvbXBvbmVudHMvcHVsbC10by1yZWZyZXNoL3B1bGwtdG8tcmVmcmVzaC50ZW1wbGF0ZS5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUMsTUFBTSxpQkFBaUIsQ0FBQztBQUMxQyxPQUFPLEVBQUMsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ3hGLE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLDRCQUE0QixDQUFDO0FBQzlELE9BQU8sRUFBQyxhQUFhLEVBQUUsV0FBVyxFQUFDLE1BQU0sMkJBQTJCLENBQUM7QUFDckUsT0FBTyxFQUFDLFVBQVUsRUFBQyxNQUFNLHNCQUFzQixDQUFDO0FBRWhELE9BQU8sRUFBQyxLQUFLLEVBQUMsTUFBTSxtQ0FBbUMsQ0FBQztBQUN4RCxPQUFPLEVBQUMsY0FBYyxFQUFDLE1BQU0sdUJBQXVCLENBQUM7QUFDckQsT0FBTyxFQUEyQixrQkFBa0IsRUFBQyxNQUFNLHdCQUF3QixDQUFDO0FBQ3BGLE9BQU8sRUFBQyxvQkFBb0IsRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFtQixTQUFTLEVBQUMsTUFBTSxNQUFNLENBQUM7QUFFbkYsT0FBTyxFQUNILDZCQUE2QixFQUM3Qiw2QkFBNkIsR0FDaEMsTUFBTSw2QkFBNkIsQ0FBQztBQUNyQyxPQUFPLEVBQUMsWUFBWSxFQUFFLHVCQUF1QixFQUFDLE1BQU0sMkJBQTJCLENBQUM7O0FBRWhGLE1BU2EsZ0JBQWdCO0lBd0J6QjtRQXZCaUIsVUFBSyxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUMzQixjQUFTLEdBQUcsTUFBTSxDQUFDLDZCQUE2QixDQUFDLENBQUM7UUFFaEQsYUFBUSxHQUFHLE1BQU0sQ0FBQyx1QkFBdUIsQ0FBQyxDQUFDO1FBQzNDLGNBQVMsR0FBRyxNQUFNLENBQ2pDLDZCQUE2QixDQUNoQyxDQUFDO1FBRWlCLGFBQVEsR0FBd0IsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQ2pFLEdBQUcsQ0FBQyxDQUFDLFFBQVEsRUFBRSxFQUFFLENBQUMsUUFBUSxJQUFJLFlBQVksSUFBSSxRQUFRLEtBQUssSUFBSSxDQUFDLFNBQVMsQ0FBQyxFQUMxRSxvQkFBb0IsRUFBRSxDQUN6QixDQUFDO1FBR0ssaUJBQVksR0FBdUQsSUFBSSxDQUFDLEtBQUs7WUFDaEYsQ0FBQyxDQUFDLENBQUMsUUFBUSxFQUFFLEVBQUUsQ0FBQyxDQUFDLEVBQUMsR0FBRyxFQUFFLEtBQUssQ0FBQyxRQUFRLEdBQUcsQ0FBQyxDQUFDLEVBQUMsQ0FBQztZQUM1QyxDQUFDLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDO1FBR0QsV0FBTSxHQUF3QixNQUFNLENBQUMsdUJBQXVCLENBQUMsQ0FBQyxJQUFJLENBQzlFLE1BQU0sQ0FBQyxDQUFDLFFBQVEsRUFBRSxFQUFFLENBQUMsUUFBUSxLQUFLLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FDcEQsQ0FBQztRQUdFLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxFQUFFO1lBQ2pCLE9BQU8sQ0FBQyxvREFBb0Q7U0FDL0Q7UUFFRCxNQUFNLEVBQUUsR0FBZ0IsTUFBTSxDQUFDLGNBQWMsQ0FBQyxDQUFDLGFBQWEsQ0FBQztRQUU3RCxhQUFhLENBQUMsRUFBRSxDQUFDO2FBQ1osSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsRUFBRSxXQUFXLEVBQUUsRUFBRSxrQkFBa0IsRUFBRSxDQUFDO2FBQzFELFNBQVMsQ0FBQyxHQUFHLEVBQUU7WUFDWixJQUFJLEVBQUUsQ0FBQyxTQUFTLEVBQUU7Z0JBQ2QsRUFBRSxDQUFDLEtBQUssQ0FBQyxXQUFXLEdBQUcsRUFBRSxDQUFDO2FBQzdCO2lCQUFNO2dCQUNILEVBQUUsQ0FBQyxLQUFLLENBQUMsV0FBVyxHQUFHLFVBQVUsQ0FBQzthQUNyQztRQUNMLENBQUMsQ0FBQyxDQUFDO0lBQ1gsQ0FBQzsrR0F4Q1EsZ0JBQWdCO21HQUFoQixnQkFBZ0IsMklBRmQsQ0FBQyx1QkFBdUIsQ0FBQywwQkN4QnhDLGlSQVNBLDBIRFdjLFNBQVMsOENBQUUsa0JBQWtCOztTQU05QixnQkFBZ0I7NEZBQWhCLGdCQUFnQjtrQkFUNUIsU0FBUztpQ0FDTSxJQUFJLFlBQ04scUJBQXFCLFdBQ3RCLENBQUMsU0FBUyxFQUFFLGtCQUFrQixDQUFDLG1CQUd2Qix1QkFBdUIsQ0FBQyxNQUFNLGFBQ3BDLENBQUMsdUJBQXVCLENBQUM7MEVBaUI3QixZQUFZO3NCQURsQixLQUFLO2dCQU1VLE1BQU07c0JBRHJCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0FzeW5jUGlwZX0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7Q2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgaW5qZWN0LCBJbnB1dCwgT3V0cHV0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7dGFrZVVudGlsRGVzdHJveWVkfSBmcm9tICdAYW5ndWxhci9jb3JlL3J4anMtaW50ZXJvcCc7XG5pbXBvcnQge3R1aVNjcm9sbEZyb20sIHR1aVpvbmVmcmVlfSBmcm9tICdAdGFpZ2EtdWkvY2RrL29ic2VydmFibGVzJztcbmltcG9ydCB7VFVJX0lTX0lPU30gZnJvbSAnQHRhaWdhLXVpL2Nkay90b2tlbnMnO1xuaW1wb3J0IHt0eXBlIFR1aUNvbnRleHQsIHR5cGUgVHVpSGFuZGxlcn0gZnJvbSAnQHRhaWdhLXVpL2Nkay90eXBlcyc7XG5pbXBvcnQge3R1aVB4fSBmcm9tICdAdGFpZ2EtdWkvY2RrL3V0aWxzL21pc2NlbGxhbmVvdXMnO1xuaW1wb3J0IHtUVUlfU0NST0xMX1JFRn0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvdG9rZW5zJztcbmltcG9ydCB7dHlwZSBQb2x5bW9ycGhldXNDb250ZW50LCBQb2x5bW9ycGhldXNPdXRsZXR9IGZyb20gJ0B0YWlnYS11aS9wb2x5bW9ycGhldXMnO1xuaW1wb3J0IHtkaXN0aW5jdFVudGlsQ2hhbmdlZCwgZmlsdGVyLCBtYXAsIHR5cGUgT2JzZXJ2YWJsZSwgc3RhcnRXaXRofSBmcm9tICdyeGpzJztcblxuaW1wb3J0IHtcbiAgICBUVUlfUFVMTF9UT19SRUZSRVNIX0NPTVBPTkVOVCxcbiAgICBUVUlfUFVMTF9UT19SRUZSRVNIX1RIUkVTSE9MRCxcbn0gZnJvbSAnLi9wdWxsLXRvLXJlZnJlc2gucHJvdmlkZXJzJztcbmltcG9ydCB7TUlDUk9fT0ZGU0VULCBUdWlQdWxsVG9SZWZyZXNoU2VydmljZX0gZnJvbSAnLi9wdWxsLXRvLXJlZnJlc2guc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgc2VsZWN0b3I6ICd0dWktcHVsbC10by1yZWZyZXNoJyxcbiAgICBpbXBvcnRzOiBbQXN5bmNQaXBlLCBQb2x5bW9ycGhldXNPdXRsZXRdLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9wdWxsLXRvLXJlZnJlc2gudGVtcGxhdGUuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vcHVsbC10by1yZWZyZXNoLnN0eWxlLmxlc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBwcm92aWRlcnM6IFtUdWlQdWxsVG9SZWZyZXNoU2VydmljZV0sXG59KVxuZXhwb3J0IGNsYXNzIFR1aVB1bGxUb1JlZnJlc2gge1xuICAgIHByaXZhdGUgcmVhZG9ubHkgaXNJT1MgPSBpbmplY3QoVFVJX0lTX0lPUyk7XG4gICAgcHJpdmF0ZSByZWFkb25seSB0aHJlc2hvbGQgPSBpbmplY3QoVFVJX1BVTExfVE9fUkVGUkVTSF9USFJFU0hPTEQpO1xuXG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IHB1bGxpbmckID0gaW5qZWN0KFR1aVB1bGxUb1JlZnJlc2hTZXJ2aWNlKTtcbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgY29tcG9uZW50ID0gaW5qZWN0PFBvbHltb3JwaGV1c0NvbnRlbnQ8VHVpQ29udGV4dDxudW1iZXI+Pj4oXG4gICAgICAgIFRVSV9QVUxMX1RPX1JFRlJFU0hfQ09NUE9ORU5ULFxuICAgICk7XG5cbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgZHJvcHBlZCQ6IE9ic2VydmFibGU8Ym9vbGVhbj4gPSB0aGlzLnB1bGxpbmckLnBpcGUoXG4gICAgICAgIG1hcCgoZGlzdGFuY2UpID0+IGRpc3RhbmNlIDw9IE1JQ1JPX09GRlNFVCB8fCBkaXN0YW5jZSA9PT0gdGhpcy50aHJlc2hvbGQpLFxuICAgICAgICBkaXN0aW5jdFVudGlsQ2hhbmdlZCgpLFxuICAgICk7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBzdHlsZUhhbmRsZXI6IFR1aUhhbmRsZXI8bnVtYmVyLCBSZWNvcmQ8c3RyaW5nLCB1bmtub3duPiB8IG51bGw+ID0gdGhpcy5pc0lPU1xuICAgICAgICA/IChkaXN0YW5jZSkgPT4gKHt0b3A6IHR1aVB4KGRpc3RhbmNlIC8gMil9KVxuICAgICAgICA6ICgpID0+IG51bGw7XG5cbiAgICBAT3V0cHV0KClcbiAgICBwdWJsaWMgcmVhZG9ubHkgcHVsbGVkOiBPYnNlcnZhYmxlPHVua25vd24+ID0gaW5qZWN0KFR1aVB1bGxUb1JlZnJlc2hTZXJ2aWNlKS5waXBlKFxuICAgICAgICBmaWx0ZXIoKGRpc3RhbmNlKSA9PiBkaXN0YW5jZSA9PT0gdGhpcy50aHJlc2hvbGQpLFxuICAgICk7XG5cbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgaWYgKCF0aGlzLmNvbXBvbmVudCkge1xuICAgICAgICAgICAgcmV0dXJuOyAvLyBFbnN1cmUgc2Nyb2xsaW5nIGRvd24gaXMgaW1wb3NzaWJsZSB3aGlsZSBwdWxsaW5nXG4gICAgICAgIH1cblxuICAgICAgICBjb25zdCBlbDogSFRNTEVsZW1lbnQgPSBpbmplY3QoVFVJX1NDUk9MTF9SRUYpLm5hdGl2ZUVsZW1lbnQ7XG5cbiAgICAgICAgdHVpU2Nyb2xsRnJvbShlbClcbiAgICAgICAgICAgIC5waXBlKHN0YXJ0V2l0aChudWxsKSwgdHVpWm9uZWZyZWUoKSwgdGFrZVVudGlsRGVzdHJveWVkKCkpXG4gICAgICAgICAgICAuc3Vic2NyaWJlKCgpID0+IHtcbiAgICAgICAgICAgICAgICBpZiAoZWwuc2Nyb2xsVG9wKSB7XG4gICAgICAgICAgICAgICAgICAgIGVsLnN0eWxlLnRvdWNoQWN0aW9uID0gJyc7XG4gICAgICAgICAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgICAgICAgICAgZWwuc3R5bGUudG91Y2hBY3Rpb24gPSAncGFuLWRvd24nO1xuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH0pO1xuICAgIH1cbn1cbiIsIjxuZy1jb250YWluZXIgKnBvbHltb3JwaGV1c091dGxldD1cImNvbXBvbmVudDsgY29udGV4dDogeyRpbXBsaWNpdDogKHB1bGxpbmckIHwgYXN5bmMpIHx8IDB9XCIgLz5cblxuPGRpdlxuICAgIFtjbGFzcy50LWRyb3BdPVwiZHJvcHBlZCQgfCBhc3luY1wiXG4gICAgW3N0eWxlLnBvc2l0aW9uXT1cIidyZWxhdGl2ZSdcIlxuICAgIFtzdHlsZV09XCJzdHlsZUhhbmRsZXIoKHB1bGxpbmckIHwgYXN5bmMpIHx8IDApXCJcbj5cbiAgICA8bmctY29udGVudCAvPlxuPC9kaXY+XG4iXX0=