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
82 lines (81 loc) • 4.67 kB
TypeScript
import { OnInit, OnDestroy, TemplateRef, ElementRef, AfterViewInit } from '@angular/core';
import { type TouchEvent } from '../../utils/touch/touch.component';
import { ModalHeaderComponent } from './modal-header.component';
import { ModalCloseComponent } from './modal-close.component';
import { ModalOverlayComponent } from './modal-overlay.component';
import * as i0 from "@angular/core";
export interface ModalSnapPoint {
height: number | string;
headerHeight?: number;
}
/**
* Modal component providing a flexible dialog framework with customizable content.
* Supports swipe gestures, snap points, and portal rendering for mobile-optimized experience.
* Based on React TGUI Modal component but implemented with Angular Signal API.
*/
export declare class ModalComponent implements OnInit, OnDestroy, AfterViewInit {
static Header: typeof ModalHeaderComponent;
static Close: typeof ModalCloseComponent;
static Overlay: typeof ModalOverlayComponent;
private portalService;
private platformService;
private themeService;
touchElement?: ElementRef<HTMLElement>;
bodyElement?: ElementRef<HTMLElement>;
open: import("@angular/core").InputSignal<boolean>;
header: import("@angular/core").InputSignal<TemplateRef<any> | null>;
overlayComponent: import("@angular/core").InputSignal<TemplateRef<any> | null>;
trigger: import("@angular/core").InputSignal<TemplateRef<any> | null>;
nested: import("@angular/core").InputSignal<boolean>;
closeThreshold: import("@angular/core").InputSignal<number>;
scrollLockTimeout: import("@angular/core").InputSignal<number>;
modal: import("@angular/core").InputSignal<boolean>;
preventScrollRestoration: import("@angular/core").InputSignal<boolean>;
snapPoints: import("@angular/core").InputSignal<(string | number)[]>;
fadeFromIndex: import("@angular/core").InputSignal<number | null>;
dismissible: import("@angular/core").InputSignal<boolean>;
openChange: import("@angular/core").OutputEmitterRef<boolean>;
animationEnd: import("@angular/core").OutputEmitterRef<{
open: boolean;
}>;
private internalOpen;
private isDragging;
private dragOffset;
private isAnimating;
private lastScrollTime;
private hasBeenOpened;
readonly isOpenSignal: import("@angular/core").Signal<boolean>;
isOpen(): boolean;
readonly contentClasses: import("@angular/core").Signal<{
'modal-content': boolean;
'modal-content--open': boolean;
'modal-content--dragging': boolean;
'modal-content--closing': boolean;
}>;
readonly overlayClasses: import("@angular/core").Signal<{
'modal-overlay': boolean;
'modal-overlay--open': boolean;
}>;
readonly contentStyles: import("@angular/core").Signal<Record<string, any>>;
readonly overlayStyles: import("@angular/core").Signal<{
background: string;
}>;
constructor();
ngOnInit(): void;
ngAfterViewInit(): void;
ngOnDestroy(): void;
private handleModalCloseEvent;
handleKeyDown(event: KeyboardEvent): void;
handleTriggerClick(): void;
handleOverlayClick(): void;
handleDragStart(gesture: TouchEvent): void;
handleDrag(gesture: TouchEvent): void;
handleDragEnd(gesture: TouchEvent): void;
openModal(): void;
closeModal(): void;
private isScrollLocked;
private getBackgroundColor;
private getScrollbarWidth;
static ɵfac: i0.ɵɵFactoryDeclaration<ModalComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ModalComponent, "tgui-modal", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "overlayComponent": { "alias": "overlayComponent"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "nested": { "alias": "nested"; "required": false; "isSignal": true; }; "closeThreshold": { "alias": "closeThreshold"; "required": false; "isSignal": true; }; "scrollLockTimeout": { "alias": "scrollLockTimeout"; "required": false; "isSignal": true; }; "modal": { "alias": "modal"; "required": false; "isSignal": true; }; "preventScrollRestoration": { "alias": "preventScrollRestoration"; "required": false; "isSignal": true; }; "snapPoints": { "alias": "snapPoints"; "required": false; "isSignal": true; }; "fadeFromIndex": { "alias": "fadeFromIndex"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; }, { "openChange": "openChange"; "animationEnd": "animationEnd"; }, never, ["*"], true, never>;
}