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
79 lines (78 loc) • 4.87 kB
TypeScript
import { AfterViewInit, OnDestroy, type ElementRef as TypeElementRef } from '@angular/core';
import { VirtualElement, Placement, ComputePositionReturn } from '@floating-ui/dom';
import { FloatingArrowComponent } from './components/floating-arrow';
import { type UseFloatingMiddlewaresOptions, PlacementWithAuto } from './hooks';
import * as i0 from "@angular/core";
export interface PopperProps extends Omit<UseFloatingMiddlewaresOptions, 'arrowHeight' | 'arrowPadding' | 'arrowRef'> {
/** Reference to the target element or virtual element for precise positioning. */
targetRef: HTMLElement | VirtualElement | null;
/** Configuration and customization options for the floating arrow component. */
arrowProps?: {
/** Optionally override the default arrow height. */
height?: number;
/** Optionally override the default arrow padding. */
padding?: number;
/** Additional styles for the arrow */
style?: Record<string, string>;
/** Additional class name for the arrow */
className?: string;
};
/** Opt-in feature to automatically update Popper's position when the target element resizes. */
autoUpdateOnTargetResize?: boolean;
}
/**
* Renders a Popper component, leveraging floating UI for dynamic, responsive positioning.
* Supports advanced configurations like virtual elements, custom arrows, and auto-position updates.
*/
export declare class PopperComponent implements AfterViewInit, OnDestroy {
private floatingMiddlewaresService;
private elementRef;
floatingEl: TypeElementRef<HTMLElement>;
arrowEl?: FloatingArrowComponent;
placement: import("@angular/core").InputSignal<PlacementWithAuto>;
targetRef: import("@angular/core").InputSignal<HTMLElement | VirtualElement | null>;
sameWidth: import("@angular/core").InputSignal<boolean>;
offsetByMainAxis: import("@angular/core").InputSignal<number>;
offsetByCrossAxis: import("@angular/core").InputSignal<number>;
withArrow: import("@angular/core").InputSignal<boolean>;
arrowProps: import("@angular/core").InputSignal<{
/** Optionally override the default arrow height. */
height?: number;
/** Optionally override the default arrow padding. */
padding?: number;
/** Additional styles for the arrow */
style?: Record<string, string>;
/** Additional class name for the arrow */
className?: string;
} | undefined>;
autoUpdateOnTargetResize: import("@angular/core").InputSignal<boolean>;
customMiddlewares: import("@angular/core").InputSignal<{
name: string;
options?: any;
fn: (state: import("@floating-ui/dom").MiddlewareState) => import("@floating-ui/core").MiddlewareReturn | Promise<import("@floating-ui/core").MiddlewareReturn>;
}[] | undefined>;
popperCreated: import("@angular/core").OutputEmitterRef<any>;
popperUpdated: import("@angular/core").OutputEmitterRef<ComputePositionReturn>;
popperShown: import("@angular/core").OutputEmitterRef<void>;
private cleanup;
private _floatingStyles;
private _resolvedPlacement;
private _arrowCoords;
private _middlewareData;
floatingStyles: import("@angular/core").Signal<Record<string, string>>;
resolvedPlacement: import("@angular/core").Signal<Placement>;
arrowCoords: import("@angular/core").Signal<{
x?: number;
y?: number;
} | undefined>;
arrowStyle: import("@angular/core").Signal<Record<string, string>>;
arrowClassName: import("@angular/core").Signal<string>;
arrowHeight: import("@angular/core").Signal<number>;
arrowPadding: import("@angular/core").Signal<number>;
ngAfterViewInit(): void;
ngOnDestroy(): void;
setupFloating(): void;
cleanupFloating(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<PopperComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<PopperComponent, "tgui-popper", never, { "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "targetRef": { "alias": "targetRef"; "required": false; "isSignal": true; }; "sameWidth": { "alias": "sameWidth"; "required": false; "isSignal": true; }; "offsetByMainAxis": { "alias": "offsetByMainAxis"; "required": false; "isSignal": true; }; "offsetByCrossAxis": { "alias": "offsetByCrossAxis"; "required": false; "isSignal": true; }; "withArrow": { "alias": "withArrow"; "required": false; "isSignal": true; }; "arrowProps": { "alias": "arrowProps"; "required": false; "isSignal": true; }; "autoUpdateOnTargetResize": { "alias": "autoUpdateOnTargetResize"; "required": false; "isSignal": true; }; "customMiddlewares": { "alias": "customMiddlewares"; "required": false; "isSignal": true; }; }, { "popperCreated": "popperCreated"; "popperUpdated": "popperUpdated"; "popperShown": "popperShown"; }, never, ["*"], true, never>;
}