primeng
Version:
PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB
228 lines (227 loc) • 8.35 kB
TypeScript
import { AnimationEvent } from '@angular/animations';
import { AfterContentInit, ElementRef, EventEmitter, QueryList, TemplateRef } from '@angular/core';
import { SafeUrl } from '@angular/platform-browser';
import { PrimeTemplate } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import { Nullable } from 'primeng/ts-helpers';
import { ImageStyle } from './style/imagestyle';
import * as i0 from "@angular/core";
import * as i1 from "primeng/api";
/**
* Displays an image with preview and tranformation options. For multiple image, see Galleria.
* @group Components
*/
export declare class Image extends BaseComponent implements AfterContentInit {
/**
* Style class of the image element.
* @group Props
*/
imageClass: string | undefined;
/**
* Inline style of the image element.
* @group Props
*/
imageStyle: {
[klass: string]: any;
} | null | undefined;
/**
* Class of the element.
* @group Props
*/
styleClass: string | undefined;
/**
* Inline style of the element.
* @group Props
*/
style: {
[klass: string]: any;
} | null | undefined;
/**
* The source path for the main image.
* @group Props
*/
src: string | SafeUrl | undefined;
/**
* The srcset definition for the main image.
* @group Props
*/
srcSet: string | SafeUrl | undefined;
/**
* The sizes definition for the main image.
* @group Props
*/
sizes: string | undefined;
/**
* The source path for the preview image.
* @group Props
*/
previewImageSrc: string | SafeUrl | undefined;
/**
* The srcset definition for the preview image.
* @group Props
*/
previewImageSrcSet: string | SafeUrl | undefined;
/**
* The sizes definition for the preview image.
* @group Props
*/
previewImageSizes: string | undefined;
/**
* Attribute of the preview image element.
* @group Props
*/
alt: string | undefined;
/**
* Attribute of the image element.
* @group Props
*/
width: string | undefined;
/**
* Attribute of the image element.
* @group Props
*/
height: string | undefined;
/**
* Attribute of the image element.
* @group Props
*/
loading: 'lazy' | 'eager' | undefined;
/**
* Target element to attach the dialog, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
* @group Props
*/
appendTo: HTMLElement | ElementRef | TemplateRef<any> | string | null | undefined | any;
/**
* Controls the preview functionality.
* @group Props
*/
preview: boolean;
/**
* Transition options of the show animation
* @group Props
*/
showTransitionOptions: string;
/**
* Transition options of the hide animation
* @group Props
*/
hideTransitionOptions: string;
/**
* Triggered when the preview overlay is shown.
* @group Emits
*/
onShow: EventEmitter<any>;
/**
* Triggered when the preview overlay is hidden.
* @group Emits
*/
onHide: EventEmitter<any>;
/**
* This event is triggered if an error occurs while loading an image file.
* @param {Event} event - Browser event.
* @group Emits
*/
onImageError: EventEmitter<Event>;
mask: ElementRef | undefined;
previewButton: ElementRef | undefined;
closeButton: ElementRef | undefined;
/**
* Custom template of indicator.
* @group Templates
*/
indicatorTemplate: TemplateRef<any> | undefined;
/**
* Custom template of rotaterighticon.
* @group Templates
*/
rotateRightIconTemplate: TemplateRef<any> | undefined;
/**
* Custom template of rotatelefticon.
* @group Templates
*/
rotateLeftIconTemplate: TemplateRef<any> | undefined;
/**
* Custom template of zoomouticon.
* @group Templates
*/
zoomOutIconTemplate: TemplateRef<any> | undefined;
/**
* Custom template of zoominicon.
* @group Templates
*/
zoomInIconTemplate: TemplateRef<any> | undefined;
/**
* Custom template of closeicon.
* @group Templates
*/
closeIconTemplate: TemplateRef<any> | undefined;
/**
* Custom template of preview.
* @group Templates
*/
previewTemplate: TemplateRef<any> | undefined;
/**
* Custom template of image.
* @group Templates
*/
imageTemplate: TemplateRef<any> | undefined;
maskVisible: boolean;
previewVisible: boolean;
rotate: number;
scale: number;
previewClick: boolean;
container: Nullable<HTMLElement>;
wrapper: Nullable<HTMLElement>;
_componentStyle: ImageStyle;
get isZoomOutDisabled(): boolean;
get isZoomInDisabled(): boolean;
private zoomSettings;
constructor();
templates: QueryList<PrimeTemplate> | undefined;
_indicatorTemplate: TemplateRef<any> | undefined;
_rotateRightIconTemplate: TemplateRef<any> | undefined;
_rotateLeftIconTemplate: TemplateRef<any> | undefined;
_zoomOutIconTemplate: TemplateRef<any> | undefined;
_zoomInIconTemplate: TemplateRef<any> | undefined;
_closeIconTemplate: TemplateRef<any> | undefined;
_imageTemplate: TemplateRef<any> | undefined;
_previewTemplate: TemplateRef<any> | undefined;
ngAfterContentInit(): void;
onImageClick(): void;
onMaskClick(): void;
onMaskKeydown(event: any): void;
onPreviewImageClick(): void;
rotateRight(): void;
rotateLeft(): void;
zoomIn(): void;
zoomOut(): void;
onAnimationStart(event: AnimationEvent): void;
onAnimationEnd(event: AnimationEvent): void;
moveOnTop(): void;
appendContainer(): void;
imagePreviewStyle(): {
transform: string;
};
get zoomImageAriaLabel(): string;
containerClass(): {
'p-image p-component': boolean;
'p-image-preview': boolean;
};
handleToolbarClick(event: MouseEvent): void;
closePreview(): void;
imageError(event: Event): void;
rightAriaLabel(): string;
leftAriaLabel(): string;
zoomInAriaLabel(): string;
zoomOutAriaLabel(): string;
closeAriaLabel(): string;
onKeydownHandler(event: KeyboardEvent): void;
static ɵfac: i0.ɵɵFactoryDeclaration<Image, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<Image, "p-image", never, { "imageClass": { "alias": "imageClass"; "required": false; }; "imageStyle": { "alias": "imageStyle"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "style": { "alias": "style"; "required": false; }; "src": { "alias": "src"; "required": false; }; "srcSet": { "alias": "srcSet"; "required": false; }; "sizes": { "alias": "sizes"; "required": false; }; "previewImageSrc": { "alias": "previewImageSrc"; "required": false; }; "previewImageSrcSet": { "alias": "previewImageSrcSet"; "required": false; }; "previewImageSizes": { "alias": "previewImageSizes"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "preview": { "alias": "preview"; "required": false; }; "showTransitionOptions": { "alias": "showTransitionOptions"; "required": false; }; "hideTransitionOptions": { "alias": "hideTransitionOptions"; "required": false; }; }, { "onShow": "onShow"; "onHide": "onHide"; "onImageError": "onImageError"; }, ["indicatorTemplate", "rotateRightIconTemplate", "rotateLeftIconTemplate", "zoomOutIconTemplate", "zoomInIconTemplate", "closeIconTemplate", "previewTemplate", "imageTemplate", "templates"], never, true, never>;
static ngAcceptInputType_preview: unknown;
}
export declare class ImageModule {
static ɵfac: i0.ɵɵFactoryDeclaration<ImageModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<ImageModule, never, [typeof Image, typeof i1.SharedModule], [typeof Image, typeof i1.SharedModule]>;
static ɵinj: i0.ɵɵInjectorDeclaration<ImageModule>;
}