tgui-angular
Version:
🚀 Angular UI library for Telegram Web Apps with modern components and theming support | 💼 Author is open to work opportunities | 📧 Contact: a.blagovestnov@gmail.com | 💬 Telegram: @ablagovestnov
156 lines (155 loc) • 5.07 kB
TypeScript
import { OutputEmitterRef, OnInit, OnDestroy } from '@angular/core';
import * as i0 from "@angular/core";
/**
* Interface for a touch/gesture event
*/
export interface Gesture {
startX: number;
startY: number;
startT: Date;
duration: number;
isPressed: boolean;
isY: boolean;
isX: boolean;
isSlideX: boolean;
isSlideY: boolean;
isSlide: boolean;
clientX: number;
clientY: number;
shiftX: number;
shiftY: number;
shiftXAbs: number;
shiftYAbs: number;
}
/**
* Custom touch event type combining MouseEvent and TouchEvent properties
*/
export interface CustomTouchEvent extends MouseEvent {
touches?: TouchList;
changedTouches?: TouchList;
}
/**
* Touch event handler type
*/
export type TouchEventHandler = (e: TouchEvent) => void;
/**
* Touch event with gesture information
*/
export interface TouchEvent extends Gesture {
originalEvent: CustomTouchEvent;
}
/**
* Component for handling touch and gesture events
*
* This component is ported from the VKUI library for convenient handling of pointer events
* https://github.com/VKCOM/VKUI/blob/master/packages/vkui/src/components/Touch/Touch.tsx
*/
export declare class TouchComponent implements OnInit, OnDestroy {
private elementRef;
private renderer;
usePointerHover: import("@angular/core").InputSignal<boolean>;
useCapture: import("@angular/core").InputSignal<boolean>;
slideThreshold: import("@angular/core").InputSignal<number>;
noSlideClick: import("@angular/core").InputSignal<boolean>;
stopPropagation: import("@angular/core").InputSignal<boolean>;
onEnter: OutputEmitterRef<MouseEvent>;
onLeave: OutputEmitterRef<MouseEvent>;
onStart: OutputEmitterRef<TouchEvent>;
onStartX: OutputEmitterRef<TouchEvent>;
onStartY: OutputEmitterRef<TouchEvent>;
onMove: OutputEmitterRef<TouchEvent>;
onMoveX: OutputEmitterRef<TouchEvent>;
onMoveY: OutputEmitterRef<TouchEvent>;
onEnd: OutputEmitterRef<TouchEvent>;
onEndX: OutputEmitterRef<TouchEvent>;
onEndY: OutputEmitterRef<TouchEvent>;
private gesture;
private didSlide;
private supportedEvents;
private permanentUnlisteners;
private moveEndUnlisteners;
/**
* Check if touch events are enabled in the browser
*/
private touchEnabled;
/**
* Get supported events based on browser capabilities
*/
private getSupportedEvents;
/**
* Initialize a gesture
*/
private initGesture;
/**
* Get X coordinate from an event
*/
private coordX;
/**
* Get Y coordinate from an event
*/
private coordY;
ngOnInit(): void;
ngOnDestroy(): void;
/**
* Setup event listeners
*/
private setupListeners;
/**
* Handle start of a touch/mouse interaction
*/
private handleStart;
/**
* Add event listeners at document level for move and end events
*/
private addDocumentEventListeners;
/**
* Handle move events
*/
private handleMove;
/**
* Check if an output emitter has any listeners
*/
private hasListeners;
/**
* Handle end of interaction
*/
private handleEnd;
/**
* Handle hover enter event
*/
private handleHoverEnter;
/**
* Handle hover leave event
*/
private handleHoverLeave;
/**
* Handle gesture events and emit to appropriate outputs
*/
private handleGestureEvent;
/**
* Add permanent event listeners to the host element
* These listeners remain active throughout the component lifecycle
*/
private addPermanentEventListener;
/**
* Remove move and end event listeners
* These are cleaned up after every gesture completes
*/
private removeMoveEndListeners;
/**
* Remove all event listeners
* Called on component destruction
*/
private removeAllListeners;
/**
* Cancel the transition through nested links if a swipe was detected
*/
onClick(e: MouseEvent): void;
/**
* Dragstart event handler
* Cancels the native browser behavior for nested links and images
*/
onDragStart(e: DragEvent): void;
static ɵfac: i0.ɵɵFactoryDeclaration<TouchComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<TouchComponent, "tgui-touch", never, { "usePointerHover": { "alias": "usePointerHover"; "required": false; "isSignal": true; }; "useCapture": { "alias": "useCapture"; "required": false; "isSignal": true; }; "slideThreshold": { "alias": "slideThreshold"; "required": false; "isSignal": true; }; "noSlideClick": { "alias": "noSlideClick"; "required": false; "isSignal": true; }; "stopPropagation": { "alias": "stopPropagation"; "required": false; "isSignal": true; }; }, { "onEnter": "onEnter"; "onLeave": "onLeave"; "onStart": "onStart"; "onStartX": "onStartX"; "onStartY": "onStartY"; "onMove": "onMove"; "onMoveX": "onMoveX"; "onMoveY": "onMoveY"; "onEnd": "onEnd"; "onEndX": "onEndX"; "onEndY": "onEndY"; }, never, ["*"], true, never>;
}