@taiga-ui/addon-mobile
Version:
Extension package for Taiga UI that adds support for mobile specific behaviors such as custom data pickers, dropdowns, etc.
71 lines • 11 kB
JavaScript
import { Directive, inject, Input } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { tuiTypedFromEvent } from '@taiga-ui/cdk/observables';
import { TUI_IS_IOS } from '@taiga-ui/cdk/tokens';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { filter, map, race, switchMap, take, tap } from 'rxjs';
import * as i0 from "@angular/core";
const STYLE = {
transform: 'scale(0.95)',
opacity: '0.6',
background: 'rgba(146, 153, 162, 0.12)',
};
export function tuiFindTouchIndex(touches, id) {
for (let i = 0; i < touches.length; i++) {
if (touches[i]?.identifier === id) {
return i;
}
}
return -1;
}
class TuiTouchable {
constructor() {
this.isIOS = inject(TUI_IS_IOS);
this.el = tuiInjectElement();
this.tuiTouchable = '';
if (!this.isIOS) {
return;
}
tuiTypedFromEvent(this.el, 'touchstart', { passive: true })
.pipe(tap(() => this.onTouchStart()), map(({ touches }) => touches[touches.length - 1]?.identifier), switchMap((identifier) => race(tuiTypedFromEvent(this.el, 'touchmove', { passive: true }).pipe(filter(({ touches }) => this.hasTouchLeft(this.el, touches, identifier ?? 0))), tuiTypedFromEvent(this.el, 'touchend')).pipe(take(1))), takeUntilDestroyed())
.subscribe(() => {
this.el.style.removeProperty('transform');
this.el.style.removeProperty('opacity');
this.el.style.removeProperty('background');
});
}
get style() {
return this.tuiTouchable || 'transform';
}
hasTouchLeft(element, touches, identifier) {
const { ownerDocument } = element;
const id = tuiFindTouchIndex(touches, identifier);
if (!ownerDocument || id === -1) {
return true;
}
const { clientX = 0, clientY = 0 } = touches[id] ?? {};
return !element.contains(ownerDocument.elementFromPoint(clientX, clientY));
}
onTouchStart() {
if (this.style !== 'transform') {
this.el.style.removeProperty('transition');
}
else {
this.el.style.setProperty('transition', 'transform 0.2s');
}
this.el.style.setProperty(this.style, STYLE[this.style]);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTouchable, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiTouchable, isStandalone: true, selector: "[tuiTouchable]", inputs: { tuiTouchable: "tuiTouchable" }, ngImport: i0 }); }
}
export { TuiTouchable };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTouchable, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: '[tuiTouchable]',
}]
}], ctorParameters: function () { return []; }, propDecorators: { tuiTouchable: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG91Y2hhYmxlLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FkZG9uLW1vYmlsZS9kaXJlY3RpdmVzL3RvdWNoYWJsZS90b3VjaGFibGUuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN2RCxPQUFPLEVBQUMsa0JBQWtCLEVBQUMsTUFBTSw0QkFBNEIsQ0FBQztBQUM5RCxPQUFPLEVBQUMsaUJBQWlCLEVBQUMsTUFBTSwyQkFBMkIsQ0FBQztBQUM1RCxPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sc0JBQXNCLENBQUM7QUFDaEQsT0FBTyxFQUFDLGdCQUFnQixFQUFDLE1BQU0seUJBQXlCLENBQUM7QUFDekQsT0FBTyxFQUFDLE1BQU0sRUFBRSxHQUFHLEVBQUUsSUFBSSxFQUFFLFNBQVMsRUFBRSxJQUFJLEVBQUUsR0FBRyxFQUFDLE1BQU0sTUFBTSxDQUFDOztBQUU3RCxNQUFNLEtBQUssR0FBRztJQUNWLFNBQVMsRUFBRSxhQUFhO0lBQ3hCLE9BQU8sRUFBRSxLQUFLO0lBQ2QsVUFBVSxFQUFFLDJCQUEyQjtDQUNqQyxDQUFDO0FBRVgsTUFBTSxVQUFVLGlCQUFpQixDQUFDLE9BQWtCLEVBQUUsRUFBVTtJQUM1RCxLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsT0FBTyxDQUFDLE1BQU0sRUFBRSxDQUFDLEVBQUUsRUFBRTtRQUNyQyxJQUFJLE9BQU8sQ0FBQyxDQUFDLENBQUMsRUFBRSxVQUFVLEtBQUssRUFBRSxFQUFFO1lBQy9CLE9BQU8sQ0FBQyxDQUFDO1NBQ1o7S0FDSjtJQUVELE9BQU8sQ0FBQyxDQUFDLENBQUM7QUFDZCxDQUFDO0FBRUQsTUFJYSxZQUFZO0lBT3JCO1FBTmlCLFVBQUssR0FBRyxNQUFNLENBQUMsVUFB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R0FoRVEsWUFBWTttR0FBWixZQUFZOztTQUFaLFlBQVk7NEZBQVosWUFBWTtrQkFKeEIsU0FBUzttQkFBQztvQkFDUCxVQUFVLEVBQUUsSUFBSTtvQkFDaEIsUUFBUSxFQUFFLGdCQUFnQjtpQkFDN0I7MEVBTVUsWUFBWTtzQkFEbEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7RGlyZWN0aXZlLCBpbmplY3QsIElucHV0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7dGFrZVVudGlsRGVzdHJveWVkfSBmcm9tICdAYW5ndWxhci9jb3JlL3J4anMtaW50ZXJvcCc7XG5pbXBvcnQge3R1aVR5cGVkRnJvbUV2ZW50fSBmcm9tICdAdGFpZ2EtdWkvY2RrL29ic2VydmFibGVzJztcbmltcG9ydCB7VFVJX0lTX0lPU30gZnJvbSAnQHRhaWdhLXVpL2Nkay90b2tlbnMnO1xuaW1wb3J0IHt0dWlJbmplY3RFbGVtZW50fSBmcm9tICdAdGFpZ2EtdWkvY2RrL3V0aWxzL2RvbSc7XG5pbXBvcnQge2ZpbHRlciwgbWFwLCByYWNlLCBzd2l0Y2hNYXAsIHRha2UsIHRhcH0gZnJvbSAncnhqcyc7XG5cbmNvbnN0IFNUWUxFID0ge1xuICAgIHRyYW5zZm9ybTogJ3NjYWxlKDAuOTUpJyxcbiAgICBvcGFjaXR5OiAnMC42JyxcbiAgICBiYWNrZ3JvdW5kOiAncmdiYSgxNDYsIDE1MywgMTYyLCAwLjEyKScsXG59IGFzIGNvbnN0O1xuXG5leHBvcnQgZnVuY3Rpb24gdHVpRmluZFRvdWNoSW5kZXgodG91Y2hlczogVG91Y2hMaXN0LCBpZDogbnVtYmVyKTogbnVtYmVyIHtcbiAgICBmb3IgKGxldCBpID0gMDsgaSA8IHRvdWNoZXMubGVuZ3RoOyBpKyspIHtcbiAgICAgICAgaWYgKHRvdWNoZXNbaV0/LmlkZW50aWZpZXIgPT09IGlkKSB7XG4gICAgICAgICAgICByZXR1cm4gaTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIHJldHVybiAtMTtcbn1cblxuQERpcmVjdGl2ZSh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBzZWxlY3RvcjogJ1t0dWlUb3VjaGFibGVdJyxcbn0pXG5leHBvcnQgY2xhc3MgVHVpVG91Y2hhYmxlIHtcbiAgICBwcml2YXRlIHJlYWRvbmx5IGlzSU9TID0gaW5qZWN0KFRVSV9JU19JT1MpO1xuICAgIHByaXZhdGUgcmVhZG9ubHkgZWwgPSB0dWlJbmplY3RFbGVtZW50KCk7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyB0dWlUb3VjaGFibGU6ICcnIHwgJ2JhY2tncm91bmQnIHwgJ29wYWNpdHknIHwgJ3RyYW5zZm9ybScgPSAnJztcblxuICAgIGNvbnN0cnVjdG9yKCkge1xuICAgICAgICBpZiAoIXRoaXMuaXNJT1MpIHtcbiAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuXG4gICAgICAgIHR1aVR5cGVkRnJvbUV2ZW50KHRoaXMuZWwsICd0b3VjaHN0YXJ0Jywge3Bhc3NpdmU6IHRydWV9KVxuICAgICAgICAgICAgLnBpcGUoXG4gICAgICAgICAgICAgICAgdGFwKCgpID0+IHRoaXMub25Ub3VjaFN0YXJ0KCkpLFxuICAgICAgICAgICAgICAgIG1hcCgoe3RvdWNoZXN9KSA9PiB0b3VjaGVzW3RvdWNoZXMubGVuZ3RoIC0gMV0/LmlkZW50aWZpZXIpLFxuICAgICAgICAgICAgICAgIHN3aXRjaE1hcCgoaWRlbnRpZmllcikgPT5cbiAgICAgICAgICAgICAgICAgICAgcmFjZShcbiAgICAgICAgICAgICAgICAgICAgICAgIHR1aVR5cGVkRnJvbUV2ZW50KHRoaXMuZWwsICd0b3VjaG1vdmUnLCB7cGFzc2l2ZTogdHJ1ZX0pLnBpcGUoXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgZmlsdGVyKCh7dG91Y2hlc30pID0+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHRoaXMuaGFzVG91Y2hMZWZ0KHRoaXMuZWwsIHRvdWNoZXMsIGlkZW50aWZpZXIgPz8gMCksXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgKSxcbiAgICAgICAgICAgICAgICAgICAgICAgICksXG4gICAgICAgICAgICAgICAgICAgICAgICB0dWlUeXBlZEZyb21FdmVudCh0aGlzLmVsLCAndG91Y2hlbmQnKSxcbiAgICAgICAgICAgICAgICAgICAgKS5waXBlKHRha2UoMSkpLFxuICAgICAgICAgICAgICAgICksXG4gICAgICAgICAgICAgICAgdGFrZVVudGlsRGVzdHJveWVkKCksXG4gICAgICAgICAgICApXG4gICAgICAgICAgICAuc3Vic2NyaWJlKCgpID0+IHtcbiAgICAgICAgICAgICAgICB0aGlzLmVsLnN0eWxlLnJlbW92ZVByb3BlcnR5KCd0cmFuc2Zvcm0nKTtcbiAgICAgICAgICAgICAgICB0aGlzLmVsLnN0eWxlLnJlbW92ZVByb3BlcnR5KCdvcGFjaXR5Jyk7XG4gICAgICAgICAgICAgICAgdGhpcy5lbC5zdHlsZS5yZW1vdmVQcm9wZXJ0eSgnYmFja2dyb3VuZCcpO1xuICAgICAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgcHJvdGVjdGVkIGdldCBzdHlsZSgpOiAnYmFja2dyb3VuZCcgfCAnb3BhY2l0eScgfCAndHJhbnNmb3JtJyB7XG4gICAgICAgIHJldHVybiB0aGlzLnR1aVRvdWNoYWJsZSB8fCAndHJhbnNmb3JtJztcbiAgICB9XG5cbiAgICBwcml2YXRlIGhhc1RvdWNoTGVmdChcbiAgICAgICAgZWxlbWVudDogSFRNTEVsZW1lbnQsXG4gICAgICAgIHRvdWNoZXM6IFRvdWNoTGlzdCxcbiAgICAgICAgaWRlbnRpZmllcjogbnVtYmVyLFxuICAgICk6IGJvb2xlYW4ge1xuICAgICAgICBjb25zdCB7b3duZXJEb2N1bWVudH0gPSBlbGVtZW50O1xuICAgICAgICBjb25zdCBpZCA9IHR1aUZpbmRUb3VjaEluZGV4KHRvdWNoZXMsIGlkZW50aWZpZXIpO1xuXG4gICAgICAgIGlmICghb3duZXJEb2N1bWVudCB8fCBpZCA9PT0gLTEpIHtcbiAgICAgICAgICAgIHJldHVybiB0cnVlO1xuICAgICAgICB9XG5cbiAgICAgICAgY29uc3Qge2NsaWVudFggPSAwLCBjbGllbnRZID0gMH0gPSB0b3VjaGVzW2lkXSA/PyB7fTtcblxuICAgICAgICByZXR1cm4gIWVsZW1lbnQuY29udGFpbnMob3duZXJEb2N1bWVudC5lbGVtZW50RnJvbVBvaW50KGNsaWVudFgsIGNsaWVudFkpKTtcbiAgICB9XG5cbiAgICBwcml2YXRlIG9uVG91Y2hTdGFydCgpOiB2b2lkIHtcbiAgICAgICAgaWYgKHRoaXMuc3R5bGUgIT09ICd0cmFuc2Zvcm0nKSB7XG4gICAgICAgICAgICB0aGlzLmVsLnN0eWxlLnJlbW92ZVByb3BlcnR5KCd0cmFuc2l0aW9uJyk7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICB0aGlzLmVsLnN0eWxlLnNldFByb3BlcnR5KCd0cmFuc2l0aW9uJywgJ3RyYW5zZm9ybSAwLjJzJyk7XG4gICAgICAgIH1cblxuICAgICAgICB0aGlzLmVsLnN0eWxlLnNldFByb3BlcnR5KHRoaXMuc3R5bGUsIFNUWUxFW3RoaXMuc3R5bGVdKTtcbiAgICB9XG59XG4iXX0=