primeng
Version:
PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,
336 lines (332 loc) • 12.5 kB
TypeScript
import { ImagePassThrough, ImageLoading, ImagePreviewTemplateContext, ImageImageTemplateContext } from 'primeng/types/image';
export * from 'primeng/types/image';
import * as _angular_core from '@angular/core';
import { ElementRef, TemplateRef } from '@angular/core';
import { SafeUrl } from '@angular/platform-browser';
import { MotionOptions, MotionEvent } from '@primeuix/motion';
import { BaseComponent } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { CSSProperties, AppendTo } from 'primeng/types/shared';
import { Nullable } from 'primeng/ts-helpers';
import { BaseStyle } from 'primeng/base';
import * as i2 from 'primeng/api';
/**
*
* Displays an image with preview and tranformation options. For multiple image, see Galleria.
*
* [Live Demo](https://www.primeng.org/image/)
*
* @module imagestyle
*
*/
declare enum ImageClasses {
/**
* Class name of the root element
*/
root = "p-image",
/**
* Class name of the preview mask element
*/
previewMask = "p-image-preview-mask",
/**
* Class name of the preview icon element
*/
previewIcon = "p-image-preview-icon",
/**
* Class name of the mask element
*/
mask = "p-image-mask",
/**
* Class name of the toolbar element
*/
toolbar = "p-image-toolbar",
/**
* Class name of the rotate right button element
*/
rotateRightButton = "p-image-rotate-right-button",
/**
* Class name of the rotate left button element
*/
rotateLeftButton = "p-image-rotate-left-button",
/**
* Class name of the zoom out button element
*/
zoomOutButton = "p-image-zoom-out-button",
/**
* Class name of the zoom in button element
*/
zoomInButton = "p-image-zoom-in-button",
/**
* Class name of the close button element
*/
closeButton = "p-image-close-button",
/**
* Class name of the original element
*/
original = "p-image-original"
}
declare class ImageStyle extends BaseStyle {
name: string;
style: string;
classes: {
root: ({ instance }: {
instance: any;
}) => (string | {
'p-image-preview': any;
})[];
previewMask: string;
previewIcon: string;
mask: string;
toolbar: string;
rotateRightButton: string;
rotateLeftButton: string;
zoomOutButton: ({ instance }: {
instance: any;
}) => (string | {
'p-disabled': any;
})[];
zoomInButton: ({ instance }: {
instance: any;
}) => (string | {
'p-disabled': any;
})[];
closeButton: string;
original: string;
};
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ImageStyle, never>;
static ɵprov: _angular_core.ɵɵInjectableDeclaration<ImageStyle>;
}
interface ImageStyle extends BaseStyle {
}
/**
* Displays an image with preview and tranformation options.
* @group Components
* @deprecated Use Gallery component instead.
*/
declare class Image extends BaseComponent<ImagePassThrough> {
componentName: string;
constructor();
$pcImage: Image | undefined;
bindDirectiveInstance: Bind;
/**
* Style class of the image element.
* @group Props
*/
imageClass: _angular_core.InputSignal<string | undefined>;
/**
* Inline style of the image element.
* @group Props
*/
imageStyle: _angular_core.InputSignal<CSSProperties>;
/**
* The source path for the main image.
* @group Props
*/
src: _angular_core.InputSignal<string | SafeUrl | undefined>;
/**
* The srcset definition for the main image.
* @group Props
*/
srcSet: _angular_core.InputSignal<string | SafeUrl | undefined>;
/**
* The sizes definition for the main image.
* @group Props
*/
sizes: _angular_core.InputSignal<string | undefined>;
/**
* The source path for the preview image.
* @group Props
*/
previewImageSrc: _angular_core.InputSignal<string | SafeUrl | undefined>;
/**
* The srcset definition for the preview image.
* @group Props
*/
previewImageSrcSet: _angular_core.InputSignal<string | SafeUrl | undefined>;
/**
* The sizes definition for the preview image.
* @group Props
*/
previewImageSizes: _angular_core.InputSignal<string | undefined>;
/**
* Attribute of the preview image element.
* @group Props
*/
alt: _angular_core.InputSignal<string | undefined>;
/**
* Attribute of the image element.
* @group Props
*/
width: _angular_core.InputSignal<string | undefined>;
/**
* Attribute of the image element.
* @group Props
*/
height: _angular_core.InputSignal<string | undefined>;
/**
* Attribute of the image element.
* @group Props
*/
loading: _angular_core.InputSignal<ImageLoading | undefined>;
/**
* Controls the preview functionality.
* @group Props
*/
preview: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Enter animation class name of modal.
* @defaultValue 'p-modal-enter'
* @group Props
*/
modalEnterAnimation: _angular_core.InputSignal<string | null | undefined>;
/**
* Leave animation class name of modal.
* @defaultValue 'p-modal-leave'
* @group Props
*/
modalLeaveAnimation: _angular_core.InputSignal<string | null | undefined>;
/**
* Target element to attach the overlay, 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).
* @defaultValue 'self'
* @group Props
*/
appendTo: _angular_core.InputSignal<AppendTo>;
/**
* The motion options for the mask.
* @group Props
*/
maskMotionOptions: _angular_core.InputSignal<MotionOptions | undefined>;
computedMaskMotionOptions: _angular_core.Signal<MotionOptions>;
/**
* The motion options.
* @group Props
*/
motionOptions: _angular_core.InputSignal<MotionOptions | undefined>;
computedMotionOptions: _angular_core.Signal<MotionOptions>;
/**
* Triggered when the preview overlay is shown.
* @group Emits
*/
onShow: _angular_core.OutputEmitterRef<any>;
/**
* Triggered when the preview overlay is hidden.
* @group Emits
*/
onHide: _angular_core.OutputEmitterRef<any>;
/**
* This event is triggered if an error occurs while loading an image file.
* @param {Event} event - Browser event.
* @group Emits
*/
onImageError: _angular_core.OutputEmitterRef<Event>;
mask: _angular_core.Signal<ElementRef<any> | undefined>;
previewButton: _angular_core.Signal<ElementRef<any> | undefined>;
closeButton: _angular_core.Signal<ElementRef<any> | undefined>;
/**
* Custom indicator template.
* @group Templates
*/
indicatorTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom rotate right icon template.
* @group Templates
*/
rotateRightIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom rotate left icon template.
* @group Templates
*/
rotateLeftIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom zoom out icon template.
* @group Templates
*/
zoomOutIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom zoom in icon template.
* @group Templates
*/
zoomInIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom close icon template.
* @group Templates
*/
closeIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom preview template.
* @group Templates
*/
previewTemplate: _angular_core.Signal<TemplateRef<ImagePreviewTemplateContext> | undefined>;
/**
* Custom image template.
* @group Templates
*/
imageTemplate: _angular_core.Signal<TemplateRef<ImageImageTemplateContext> | undefined>;
renderMask: _angular_core.WritableSignal<boolean>;
renderPreview: _angular_core.WritableSignal<boolean>;
maskVisible: _angular_core.WritableSignal<boolean>;
previewVisible: boolean;
rotate: _angular_core.WritableSignal<number>;
scale: _angular_core.WritableSignal<number>;
previewClick: boolean;
container: Nullable<HTMLElement>;
wrapper: Nullable<HTMLElement>;
_componentStyle: ImageStyle;
$appendTo: _angular_core.Signal<AppendTo>;
private zoomSettings;
private get aria();
isZoomOutDisabled: _angular_core.Signal<boolean>;
isZoomInDisabled: _angular_core.Signal<boolean>;
previewMaskStyle: _angular_core.Signal<{
height: string;
width: string;
}>;
imageTemplateContext(): {
errorCallback: any;
};
previewTemplateContext(): {
class: string | undefined;
style: {
transform: string;
};
previewCallback: any;
};
onAfterViewChecked(): void;
onImageClick(): void;
onMaskClick(): void;
onMaskKeydown(event: KeyboardEvent): void;
onPreviewImageClick(): void;
rotateRight(): void;
rotateLeft(): void;
zoomIn(): void;
zoomOut(): void;
onAnimationStart(event: MotionEvent): void;
onBeforeLeave(): void;
onAnimationEnd(): void;
onMaskAfterLeave(): void;
moveOnTop(): void;
appendContainer(): void;
imagePreviewStyle(): {
transform: string;
};
zoomImageAriaLabel(): string | undefined;
handleToolbarClick(event: MouseEvent): void;
closePreview(): void;
imageError(event: Event): void;
rightAriaLabel(): string | undefined;
leftAriaLabel(): string | undefined;
zoomInAriaLabel(): string | undefined;
zoomOutAriaLabel(): string | undefined;
closeAriaLabel(): string | undefined;
onKeydownHandler(): void;
onDestroy(): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Image, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Image, "p-image", never, { "imageClass": { "alias": "imageClass"; "required": false; "isSignal": true; }; "imageStyle": { "alias": "imageStyle"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; "srcSet": { "alias": "srcSet"; "required": false; "isSignal": true; }; "sizes": { "alias": "sizes"; "required": false; "isSignal": true; }; "previewImageSrc": { "alias": "previewImageSrc"; "required": false; "isSignal": true; }; "previewImageSrcSet": { "alias": "previewImageSrcSet"; "required": false; "isSignal": true; }; "previewImageSizes": { "alias": "previewImageSizes"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "preview": { "alias": "preview"; "required": false; "isSignal": true; }; "modalEnterAnimation": { "alias": "modalEnterAnimation"; "required": false; "isSignal": true; }; "modalLeaveAnimation": { "alias": "modalLeaveAnimation"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "maskMotionOptions": { "alias": "maskMotionOptions"; "required": false; "isSignal": true; }; "motionOptions": { "alias": "motionOptions"; "required": false; "isSignal": true; }; }, { "onShow": "onShow"; "onHide": "onHide"; "onImageError": "onImageError"; }, ["indicatorTemplate", "rotateRightIconTemplate", "rotateLeftIconTemplate", "zoomOutIconTemplate", "zoomInIconTemplate", "closeIconTemplate", "previewTemplate", "imageTemplate"], never, true, [{ directive: typeof i1.Bind; inputs: {}; outputs: {}; }]>;
}
declare class ImageModule {
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ImageModule, never>;
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<ImageModule, never, [typeof Image, typeof i2.SharedModule], [typeof Image, typeof i2.SharedModule]>;
static ɵinj: _angular_core.ɵɵInjectorDeclaration<ImageModule>;
}
export { Image, ImageClasses, ImageModule, ImageStyle };