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
59 lines (58 loc) • 3.74 kB
TypeScript
import { TemplateRef, OnInit } from '@angular/core';
import * as i0 from "@angular/core";
export type ImageSize = 20 | 24 | 28 | 40 | 48 | 96;
/**
* Renders an image with optional fallback content. It supports custom sizing and will automatically
* handle loading states and errors by optionally displaying a fallback icon. This component can also
* include additional content, such as badges or overlays, as children.
*/
export declare class ImageComponent implements OnInit {
/** Specifies the size of the image, with a default of 40. Sizes are defined in pixels. */
size: import("@angular/core").InputSignal<ImageSize>;
/** An element (often an icon) displayed when the image fails to load or the `src` attribute is not provided. */
fallbackIconTemplate?: TemplateRef<any>;
/** Image source URL */
src: import("@angular/core").InputSignal<string | undefined>;
/** Alternative text for the image */
alt: import("@angular/core").InputSignal<string | undefined>;
/** Cross-origin setting */
crossOrigin: import("@angular/core").InputSignal<string | undefined>;
/** Image decoding hint */
decoding: import("@angular/core").InputSignal<"auto" | "sync" | "async" | undefined>;
/** Loading strategy */
loading: import("@angular/core").InputSignal<"eager" | "lazy" | undefined>;
/** Referrer policy */
referrerPolicy: import("@angular/core").InputSignal<string | undefined>;
/** Sizes attribute */
sizes: import("@angular/core").InputSignal<string | undefined>;
/** Source set attribute */
srcSet: import("@angular/core").InputSignal<string | undefined>;
/** Image map reference */
useMap: import("@angular/core").InputSignal<string | undefined>;
/** State to track if image has loaded */
loaded: import("@angular/core").WritableSignal<boolean>;
/** State to track if image failed to load */
failed: import("@angular/core").WritableSignal<boolean>;
/** Computed source URL that always returns a string */
srcUrl: import("@angular/core").Signal<string>;
/** Computed alt text that always returns a string */
altText: import("@angular/core").Signal<string>;
/** Check if source is provided */
hasSrc: import("@angular/core").Signal<boolean>;
/** Determine if fallback icon should be shown */
shouldShowFallbackIcon: import("@angular/core").Signal<boolean>;
/** Handle image load event */
handleImageLoad(event: Event): void;
/** Handle image error event */
handleImageError(event: Event): void;
/** Apply size and border radius to host element */
ngOnInit(): void;
width: number;
minWidth: number;
height: number;
borderRadius: number;
/** Calculate border radius based on image size */
getBorderRadius(size: number): number;
static ɵfac: i0.ɵɵFactoryDeclaration<ImageComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ImageComponent, "tgui-image", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "crossOrigin": { "alias": "crossOrigin"; "required": false; "isSignal": true; }; "decoding": { "alias": "decoding"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "referrerPolicy": { "alias": "referrerPolicy"; "required": false; "isSignal": true; }; "sizes": { "alias": "sizes"; "required": false; "isSignal": true; }; "srcSet": { "alias": "srcSet"; "required": false; "isSignal": true; }; "useMap": { "alias": "useMap"; "required": false; "isSignal": true; }; }, {}, ["fallbackIconTemplate"], ["*"], true, never>;
}