primeng 22.1.1 → 22.1.3

package/fesm2022/primeng-image.mjs

@@ -1,500 +1,553 @@
-export * from 'primeng/types/image';
-import { NgTemplateOutlet } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, input, booleanAttribute, computed, output, viewChild, contentChild, signal, HostListener, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { focus, appendChild } from '@primeuix/utils';
-import { SharedModule } from 'primeng/api';
-import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
-import * as i1 from 'primeng/bind';
-import { Bind, BindModule } from 'primeng/bind';
-import { blockBodyScroll, unblockBodyScroll } from 'primeng/dom';
-import { FocusTrap } from 'primeng/focustrap';
-import { Eye } from '@primeicons/angular/eye';
-import { Refresh } from '@primeicons/angular/refresh';
-import { SearchMinus } from '@primeicons/angular/search-minus';
-import { SearchPlus } from '@primeicons/angular/search-plus';
-import { Times } from '@primeicons/angular/times';
-import { Undo } from '@primeicons/angular/undo';
-import * as i2 from 'primeng/motion';
-import { MotionModule } from 'primeng/motion';
-import { ZIndexUtils } from 'primeng/utils';
-import { style } from '@primeuix/styles/image';
-import { BaseStyle } from 'primeng/base';
-
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, HostListener, Injectable, InjectionToken, NgModule, ViewEncapsulation, booleanAttribute, computed, contentChild, inject, input, output, signal, viewChild } from "@angular/core";
+import { appendChild, focus } from "@primeuix/utils";
+import { SharedModule } from "primeng/api";
+import { BaseComponent, PARENT_INSTANCE } from "primeng/basecomponent";
+import * as i1 from "primeng/bind";
+import { Bind, BindModule } from "primeng/bind";
+import { FocusTrap } from "primeng/focustrap";
+import { Eye } from "@primeicons/angular/eye";
+import { Refresh } from "@primeicons/angular/refresh";
+import { SearchMinus } from "@primeicons/angular/search-minus";
+import { SearchPlus } from "@primeicons/angular/search-plus";
+import { Times } from "@primeicons/angular/times";
+import { Undo } from "@primeicons/angular/undo";
+import * as i2 from "primeng/motion";
+import { MotionModule } from "primeng/motion";
+import { ZIndexUtils } from "primeng/utils";
+import { style } from "@primeuix/styles/image";
+import { BaseStyle } from "primeng/base";
+export * from "primeng/types/image";
 const classes = {
-    root: ({ instance }) => [
-        'p-image p-component',
-        {
-            'p-image-preview': instance.preview()
-        }
-    ],
-    previewMask: 'p-image-preview-mask',
-    previewIcon: 'p-image-preview-icon',
-    mask: 'p-image-mask p-overlay-mask',
-    toolbar: 'p-image-toolbar',
-    rotateRightButton: 'p-image-action p-image-rotate-right-button',
-    rotateLeftButton: 'p-image-action p-image-rotate-left-button',
-    zoomOutButton: ({ instance }) => [
-        'p-image-action p-image-zoom-out-button',
-        {
-            'p-disabled': instance.isZoomOutDisabled()
-        }
-    ],
-    zoomInButton: ({ instance }) => [
-        'p-image-action p-image-zoom-in-button',
-        {
-            'p-disabled': instance.isZoomInDisabled()
-        }
-    ],
-    closeButton: 'p-image-action p-image-close-button',
-    original: 'p-image-original'
+	root: ({ instance }) => ["p-image p-component", { "p-image-preview": instance.preview() }],
+	previewMask: "p-image-preview-mask",
+	previewIcon: "p-image-preview-icon",
+	mask: "p-image-mask p-overlay-mask",
+	toolbar: "p-image-toolbar",
+	rotateRightButton: "p-image-action p-image-rotate-right-button",
+	rotateLeftButton: "p-image-action p-image-rotate-left-button",
+	zoomOutButton: ({ instance }) => ["p-image-action p-image-zoom-out-button", { "p-disabled": instance.isZoomOutDisabled() }],
+	zoomInButton: ({ instance }) => ["p-image-action p-image-zoom-in-button", { "p-disabled": instance.isZoomInDisabled() }],
+	closeButton: "p-image-action p-image-close-button",
+	original: "p-image-original"
+};
+var ImageStyle = class ImageStyle extends BaseStyle {
+	name = "image";
+	style = style;
+	classes = classes;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: ImageStyle,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: ImageStyle
+	});
 };
-class ImageStyle extends BaseStyle {
-    name = 'image';
-    style = style;
-    classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ImageStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ImageStyle });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ImageStyle, decorators: [{
-            type: Injectable
-        }] });
-/**
- *
- * Displays an image with preview and tranformation options. For multiple image, see Galleria.
- *
- * [Live Demo](https://www.primeng.org/image/)
- *
- * @module imagestyle
- *
- */
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ImageStyle,
+	decorators: [{ type: Injectable }]
+});
 var ImageClasses;
-(function (ImageClasses) {
-    /**
-     * Class name of the root element
-     */
-    ImageClasses["root"] = "p-image";
-    /**
-     * Class name of the preview mask element
-     */
-    ImageClasses["previewMask"] = "p-image-preview-mask";
-    /**
-     * Class name of the preview icon element
-     */
-    ImageClasses["previewIcon"] = "p-image-preview-icon";
-    /**
-     * Class name of the mask element
-     */
-    ImageClasses["mask"] = "p-image-mask";
-    /**
-     * Class name of the toolbar element
-     */
-    ImageClasses["toolbar"] = "p-image-toolbar";
-    /**
-     * Class name of the rotate right button element
-     */
-    ImageClasses["rotateRightButton"] = "p-image-rotate-right-button";
-    /**
-     * Class name of the rotate left button element
-     */
-    ImageClasses["rotateLeftButton"] = "p-image-rotate-left-button";
-    /**
-     * Class name of the zoom out button element
-     */
-    ImageClasses["zoomOutButton"] = "p-image-zoom-out-button";
-    /**
-     * Class name of the zoom in button element
-     */
-    ImageClasses["zoomInButton"] = "p-image-zoom-in-button";
-    /**
-     * Class name of the close button element
-     */
-    ImageClasses["closeButton"] = "p-image-close-button";
-    /**
-     * Class name of the original element
-     */
-    ImageClasses["original"] = "p-image-original";
+(function(ImageClasses) {
+	ImageClasses["root"] = "p-image";
+	ImageClasses["previewMask"] = "p-image-preview-mask";
+	ImageClasses["previewIcon"] = "p-image-preview-icon";
+	ImageClasses["mask"] = "p-image-mask";
+	ImageClasses["toolbar"] = "p-image-toolbar";
+	ImageClasses["rotateRightButton"] = "p-image-rotate-right-button";
+	ImageClasses["rotateLeftButton"] = "p-image-rotate-left-button";
+	ImageClasses["zoomOutButton"] = "p-image-zoom-out-button";
+	ImageClasses["zoomInButton"] = "p-image-zoom-in-button";
+	ImageClasses["closeButton"] = "p-image-close-button";
+	ImageClasses["original"] = "p-image-original";
 })(ImageClasses || (ImageClasses = {}));
-
-const IMAGE_INSTANCE = new InjectionToken('IMAGE_INSTANCE');
-/**
- * Displays an image with preview and tranformation options.
- * @group Components
- * @deprecated Use Gallery component instead.
- */
-class Image extends BaseComponent {
-    componentName = 'Image';
-    constructor() {
-        super();
-    }
-    $pcImage = inject(IMAGE_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
-    bindDirectiveInstance = inject(Bind, { self: true });
-    /**
-     * Style class of the image element.
-     * @group Props
-     */
-    imageClass = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "imageClass" }] : /* istanbul ignore next */ []));
-    /**
-     * Inline style of the image element.
-     * @group Props
-     */
-    imageStyle = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "imageStyle" }] : /* istanbul ignore next */ []));
-    /**
-     * The source path for the main image.
-     * @group Props
-     */
-    src = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "src" }] : /* istanbul ignore next */ []));
-    /**
-     * The srcset definition for the main image.
-     * @group Props
-     */
-    srcSet = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "srcSet" }] : /* istanbul ignore next */ []));
-    /**
-     * The sizes definition for the main image.
-     * @group Props
-     */
-    sizes = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "sizes" }] : /* istanbul ignore next */ []));
-    /**
-     * The source path for the preview image.
-     * @group Props
-     */
-    previewImageSrc = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "previewImageSrc" }] : /* istanbul ignore next */ []));
-    /**
-     * The srcset definition for the preview image.
-     * @group Props
-     */
-    previewImageSrcSet = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "previewImageSrcSet" }] : /* istanbul ignore next */ []));
-    /**
-     * The sizes definition for the preview image.
-     * @group Props
-     */
-    previewImageSizes = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "previewImageSizes" }] : /* istanbul ignore next */ []));
-    /**
-     * Attribute of the preview image element.
-     * @group Props
-     */
-    alt = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "alt" }] : /* istanbul ignore next */ []));
-    /**
-     * Attribute of the image element.
-     * @group Props
-     */
-    width = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
-    /**
-     * Attribute of the image element.
-     * @group Props
-     */
-    height = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "height" }] : /* istanbul ignore next */ []));
-    /**
-     * Attribute of the image element.
-     * @group Props
-     */
-    loading = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "loading" }] : /* istanbul ignore next */ []));
-    /**
-     * Controls the preview functionality.
-     * @group Props
-     */
-    preview = input(false, { ...(ngDevMode ? { debugName: "preview" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Enter animation class name of modal.
-     * @defaultValue 'p-modal-enter'
-     * @group Props
-     */
-    modalEnterAnimation = input('p-modal-enter', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "modalEnterAnimation" }] : /* istanbul ignore next */ []));
-    /**
-     * Leave animation class name of modal.
-     * @defaultValue 'p-modal-leave'
-     * @group Props
-     */
-    modalLeaveAnimation = input('p-modal-leave', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "modalLeaveAnimation" }] : /* istanbul ignore next */ []));
-    /**
-     * 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 = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
-    /**
-     * The motion options for the mask.
-     * @group Props
-     */
-    maskMotionOptions = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "maskMotionOptions" }] : /* istanbul ignore next */ []));
-    computedMaskMotionOptions = computed(() => ({
-        ...this.ptm('maskMotion'),
-        ...this.maskMotionOptions()
-    }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "computedMaskMotionOptions" }] : /* istanbul ignore next */ []));
-    /**
-     * The motion options.
-     * @group Props
-     */
-    motionOptions = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "motionOptions" }] : /* istanbul ignore next */ []));
-    computedMotionOptions = computed(() => ({
-        ...this.ptm('motion'),
-        ...this.motionOptions()
-    }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : /* istanbul ignore next */ []));
-    /**
-     * Triggered when the preview overlay is shown.
-     * @group Emits
-     */
-    onShow = output();
-    /**
-     * Triggered when the preview overlay is hidden.
-     * @group Emits
-     */
-    onHide = output();
-    /**
-     * This event is triggered if an error occurs while loading an image file.
-     * @param {Event} event - Browser event.
-     * @group Emits
-     */
-    onImageError = output();
-    mask = viewChild('mask', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mask" }] : /* istanbul ignore next */ []));
-    previewButton = viewChild('previewButton', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "previewButton" }] : /* istanbul ignore next */ []));
-    closeButton = viewChild('closeButton', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "closeButton" }] : /* istanbul ignore next */ []));
-    /**
-     * Custom indicator template.
-     * @group Templates
-     */
-    indicatorTemplate = contentChild('indicator', { ...(ngDevMode ? { debugName: "indicatorTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    /**
-     * Custom rotate right icon template.
-     * @group Templates
-     */
-    rotateRightIconTemplate = contentChild('rotaterighticon', { ...(ngDevMode ? { debugName: "rotateRightIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    /**
-     * Custom rotate left icon template.
-     * @group Templates
-     */
-    rotateLeftIconTemplate = contentChild('rotatelefticon', { ...(ngDevMode ? { debugName: "rotateLeftIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    /**
-     * Custom zoom out icon template.
-     * @group Templates
-     */
-    zoomOutIconTemplate = contentChild('zoomouticon', { ...(ngDevMode ? { debugName: "zoomOutIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    /**
-     * Custom zoom in icon template.
-     * @group Templates
-     */
-    zoomInIconTemplate = contentChild('zoominicon', { ...(ngDevMode ? { debugName: "zoomInIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    /**
-     * Custom close icon template.
-     * @group Templates
-     */
-    closeIconTemplate = contentChild('closeicon', { ...(ngDevMode ? { debugName: "closeIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    /**
-     * Custom preview template.
-     * @group Templates
-     */
-    previewTemplate = contentChild('preview', { ...(ngDevMode ? { debugName: "previewTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    /**
-     * Custom image template.
-     * @group Templates
-     */
-    imageTemplate = contentChild('image', { ...(ngDevMode ? { debugName: "imageTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    renderMask = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "renderMask" }] : /* istanbul ignore next */ []));
-    renderPreview = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "renderPreview" }] : /* istanbul ignore next */ []));
-    maskVisible = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "maskVisible" }] : /* istanbul ignore next */ []));
-    previewVisible = false;
-    rotate = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rotate" }] : /* istanbul ignore next */ []));
-    scale = signal(1, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "scale" }] : /* istanbul ignore next */ []));
-    previewClick = false;
-    container;
-    wrapper;
-    _componentStyle = inject(ImageStyle);
-    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "$appendTo" }] : /* istanbul ignore next */ []));
-    zoomSettings = {
-        default: 1,
-        step: 0.1,
-        max: 1.5,
-        min: 0.5
-    };
-    get aria() {
-        return this.config.translation.aria;
-    }
-    isZoomOutDisabled = computed(() => this.scale() - this.zoomSettings.step <= this.zoomSettings.min, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isZoomOutDisabled" }] : /* istanbul ignore next */ []));
-    isZoomInDisabled = computed(() => this.scale() + this.zoomSettings.step >= this.zoomSettings.max, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isZoomInDisabled" }] : /* istanbul ignore next */ []));
-    previewMaskStyle = computed(() => ({ height: this.height() + 'px', width: this.width() + 'px' }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "previewMaskStyle" }] : /* istanbul ignore next */ []));
-    imageTemplateContext() {
-        return { errorCallback: this.imageError.bind(this) };
-    }
-    previewTemplateContext() {
-        return {
-            class: this.cx('original') ?? '',
-            style: this.imagePreviewStyle(),
-            previewCallback: this.onPreviewImageClick.bind(this)
-        };
-    }
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    onImageClick() {
-        if (this.preview()) {
-            this.maskVisible.set(true);
-            this.previewVisible = true;
-            this.renderMask.set(true);
-            this.renderPreview.set(true);
-            blockBodyScroll();
-        }
-    }
-    onMaskClick() {
-        if (!this.previewClick) {
-            this.closePreview();
-        }
-        this.previewClick = false;
-    }
-    onMaskKeydown(event) {
-        switch (event.code) {
-            case 'Escape':
-                this.onMaskClick();
-                setTimeout(() => {
-                    focus(this.previewButton()?.nativeElement);
-                }, 25);
-                event.preventDefault();
-                break;
-            default:
-                break;
-        }
-    }
-    onPreviewImageClick() {
-        this.previewClick = true;
-    }
-    rotateRight() {
-        this.rotate.update((v) => v + 90);
-        this.previewClick = true;
-    }
-    rotateLeft() {
-        this.rotate.update((v) => v - 90);
-        this.previewClick = true;
-    }
-    zoomIn() {
-        this.scale.update((v) => v + this.zoomSettings.step);
-        this.previewClick = true;
-    }
-    zoomOut() {
-        this.scale.update((v) => v - this.zoomSettings.step);
-        this.previewClick = true;
-    }
-    onAnimationStart(event) {
-        this.container = event.element;
-        this.wrapper = this.container?.parentElement;
-        if (this.$attrSelector) {
-            this.wrapper?.setAttribute(this.$attrSelector, '');
-        }
-        this.appendContainer();
-        this.moveOnTop();
-        this.onShow.emit({});
-        setTimeout(() => {
-            focus(this.closeButton()?.nativeElement);
-        }, 25);
-    }
-    onBeforeLeave() {
-        this.maskVisible.set(false);
-    }
-    onAnimationEnd() {
-        this.renderPreview.set(false);
-    }
-    onMaskAfterLeave() {
-        if (!this.renderPreview()) {
-            this.renderMask.set(false);
-        }
-        ZIndexUtils.clear(this.wrapper);
-        this.container = null;
-        this.wrapper = null;
-        this.rotate.set(0);
-        this.scale.set(this.zoomSettings.default);
-        unblockBodyScroll();
-        this.onHide.emit({});
-    }
-    moveOnTop() {
-        ZIndexUtils.set('modal', this.wrapper, this.config.zIndex.modal);
-    }
-    appendContainer() {
-        if (this.$appendTo() && this.$appendTo() !== 'self') {
-            if (this.$appendTo() === 'body' && this.wrapper) {
-                this.document.body.appendChild(this.wrapper);
-            }
-            else if (this.wrapper) {
-                appendChild(this.$appendTo(), this.wrapper);
-            }
-        }
-    }
-    imagePreviewStyle() {
-        return { transform: 'rotate(' + this.rotate() + 'deg) scale(' + this.scale() + ')' };
-    }
-    zoomImageAriaLabel() {
-        return this.aria?.zoomImage;
-    }
-    handleToolbarClick(event) {
-        event.stopPropagation();
-    }
-    closePreview() {
-        this.previewVisible = false;
-    }
-    imageError(event) {
-        this.onImageError.emit(event);
-    }
-    rightAriaLabel() {
-        return this.aria?.rotateRight;
-    }
-    leftAriaLabel() {
-        return this.aria?.rotateLeft;
-    }
-    zoomInAriaLabel() {
-        return this.aria?.zoomIn;
-    }
-    zoomOutAriaLabel() {
-        return this.aria?.zoomOut;
-    }
-    closeAriaLabel() {
-        return this.aria?.close;
-    }
-    onKeydownHandler() {
-        if (this.previewVisible) {
-            this.closePreview();
-        }
-    }
-    onDestroy() {
-        if (this.wrapper) {
-            ZIndexUtils.clear(this.wrapper);
-            this.wrapper.remove();
-            this.wrapper = null;
-        }
-        this.container = null;
-        if (this.maskVisible()) {
-            unblockBodyScroll();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Image, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: Image, isStandalone: true, selector: "p-image", inputs: { imageClass: { classPropertyName: "imageClass", publicName: "imageClass", isSignal: true, isRequired: false, transformFunction: null }, imageStyle: { classPropertyName: "imageStyle", publicName: "imageStyle", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, srcSet: { classPropertyName: "srcSet", publicName: "srcSet", isSignal: true, isRequired: false, transformFunction: null }, sizes: { classPropertyName: "sizes", publicName: "sizes", isSignal: true, isRequired: false, transformFunction: null }, previewImageSrc: { classPropertyName: "previewImageSrc", publicName: "previewImageSrc", isSignal: true, isRequired: false, transformFunction: null }, previewImageSrcSet: { classPropertyName: "previewImageSrcSet", publicName: "previewImageSrcSet", isSignal: true, isRequired: false, transformFunction: null }, previewImageSizes: { classPropertyName: "previewImageSizes", publicName: "previewImageSizes", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null }, modalEnterAnimation: { classPropertyName: "modalEnterAnimation", publicName: "modalEnterAnimation", isSignal: true, isRequired: false, transformFunction: null }, modalLeaveAnimation: { classPropertyName: "modalLeaveAnimation", publicName: "modalLeaveAnimation", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, maskMotionOptions: { classPropertyName: "maskMotionOptions", publicName: "maskMotionOptions", isSignal: true, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onShow: "onShow", onHide: "onHide", onImageError: "onImageError" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler()" }, properties: { "class": "cx('root')" } }, providers: [ImageStyle, { provide: IMAGE_INSTANCE, useExisting: Image }, { provide: PARENT_INSTANCE, useExisting: Image }], queries: [{ propertyName: "indicatorTemplate", first: true, predicate: ["indicator"], isSignal: true }, { propertyName: "rotateRightIconTemplate", first: true, predicate: ["rotaterighticon"], isSignal: true }, { propertyName: "rotateLeftIconTemplate", first: true, predicate: ["rotatelefticon"], isSignal: true }, { propertyName: "zoomOutIconTemplate", first: true, predicate: ["zoomouticon"], isSignal: true }, { propertyName: "zoomInIconTemplate", first: true, predicate: ["zoominicon"], isSignal: true }, { propertyName: "closeIconTemplate", first: true, predicate: ["closeicon"], isSignal: true }, { propertyName: "previewTemplate", first: true, predicate: ["preview"], isSignal: true }, { propertyName: "imageTemplate", first: true, predicate: ["image"], isSignal: true }], viewQueries: [{ propertyName: "mask", first: true, predicate: ["mask"], descendants: true, isSignal: true }, { propertyName: "previewButton", first: true, predicate: ["previewButton"], descendants: true, isSignal: true }, { propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+const IMAGE_INSTANCE = new InjectionToken("IMAGE_INSTANCE");
+var Image = class Image extends BaseComponent {
+	componentName = "Image";
+	constructor() {
+		super();
+	}
+	$pcImage = inject(IMAGE_INSTANCE, {
+		optional: true,
+		skipSelf: true
+	}) ?? void 0;
+	bindDirectiveInstance = inject(Bind, { self: true });
+	imageClass = input(...ngDevMode ? [void 0, { debugName: "imageClass" }] : /* istanbul ignore next */ []);
+	imageStyle = input(...ngDevMode ? [void 0, { debugName: "imageStyle" }] : /* istanbul ignore next */ []);
+	src = input(...ngDevMode ? [void 0, { debugName: "src" }] : /* istanbul ignore next */ []);
+	srcSet = input(...ngDevMode ? [void 0, { debugName: "srcSet" }] : /* istanbul ignore next */ []);
+	sizes = input(...ngDevMode ? [void 0, { debugName: "sizes" }] : /* istanbul ignore next */ []);
+	previewImageSrc = input(...ngDevMode ? [void 0, { debugName: "previewImageSrc" }] : /* istanbul ignore next */ []);
+	previewImageSrcSet = input(...ngDevMode ? [void 0, { debugName: "previewImageSrcSet" }] : /* istanbul ignore next */ []);
+	previewImageSizes = input(...ngDevMode ? [void 0, { debugName: "previewImageSizes" }] : /* istanbul ignore next */ []);
+	alt = input(...ngDevMode ? [void 0, { debugName: "alt" }] : /* istanbul ignore next */ []);
+	width = input(...ngDevMode ? [void 0, { debugName: "width" }] : /* istanbul ignore next */ []);
+	height = input(...ngDevMode ? [void 0, { debugName: "height" }] : /* istanbul ignore next */ []);
+	loading = input(...ngDevMode ? [void 0, { debugName: "loading" }] : /* istanbul ignore next */ []);
+	preview = input(false, {
+		...ngDevMode ? { debugName: "preview" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	modalEnterAnimation = input("p-modal-enter", ...ngDevMode ? [{ debugName: "modalEnterAnimation" }] : /* istanbul ignore next */ []);
+	modalLeaveAnimation = input("p-modal-leave", ...ngDevMode ? [{ debugName: "modalLeaveAnimation" }] : /* istanbul ignore next */ []);
+	appendTo = input(void 0, ...ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []);
+	maskMotionOptions = input(...ngDevMode ? [void 0, { debugName: "maskMotionOptions" }] : /* istanbul ignore next */ []);
+	computedMaskMotionOptions = computed(() => ({
+		...this.ptm("maskMotion"),
+		...this.maskMotionOptions()
+	}), ...ngDevMode ? [{ debugName: "computedMaskMotionOptions" }] : /* istanbul ignore next */ []);
+	motionOptions = input(...ngDevMode ? [void 0, { debugName: "motionOptions" }] : /* istanbul ignore next */ []);
+	computedMotionOptions = computed(() => ({
+		...this.ptm("motion"),
+		...this.motionOptions()
+	}), ...ngDevMode ? [{ debugName: "computedMotionOptions" }] : /* istanbul ignore next */ []);
+	onShow = output();
+	onHide = output();
+	onImageError = output();
+	mask = viewChild("mask", ...ngDevMode ? [{ debugName: "mask" }] : /* istanbul ignore next */ []);
+	previewButton = viewChild("previewButton", ...ngDevMode ? [{ debugName: "previewButton" }] : /* istanbul ignore next */ []);
+	closeButton = viewChild("closeButton", ...ngDevMode ? [{ debugName: "closeButton" }] : /* istanbul ignore next */ []);
+	indicatorTemplate = contentChild("indicator", {
+		...ngDevMode ? { debugName: "indicatorTemplate" } : /* istanbul ignore next */ {},
+		descendants: false
+	});
+	rotateRightIconTemplate = contentChild("rotaterighticon", {
+		...ngDevMode ? { debugName: "rotateRightIconTemplate" } : /* istanbul ignore next */ {},
+		descendants: false
+	});
+	rotateLeftIconTemplate = contentChild("rotatelefticon", {
+		...ngDevMode ? { debugName: "rotateLeftIconTemplate" } : /* istanbul ignore next */ {},
+		descendants: false
+	});
+	zoomOutIconTemplate = contentChild("zoomouticon", {
+		...ngDevMode ? { debugName: "zoomOutIconTemplate" } : /* istanbul ignore next */ {},
+		descendants: false
+	});
+	zoomInIconTemplate = contentChild("zoominicon", {
+		...ngDevMode ? { debugName: "zoomInIconTemplate" } : /* istanbul ignore next */ {},
+		descendants: false
+	});
+	closeIconTemplate = contentChild("closeicon", {
+		...ngDevMode ? { debugName: "closeIconTemplate" } : /* istanbul ignore next */ {},
+		descendants: false
+	});
+	previewTemplate = contentChild("preview", {
+		...ngDevMode ? { debugName: "previewTemplate" } : /* istanbul ignore next */ {},
+		descendants: false
+	});
+	imageTemplate = contentChild("image", {
+		...ngDevMode ? { debugName: "imageTemplate" } : /* istanbul ignore next */ {},
+		descendants: false
+	});
+	renderMask = signal(false, ...ngDevMode ? [{ debugName: "renderMask" }] : /* istanbul ignore next */ []);
+	renderPreview = signal(false, ...ngDevMode ? [{ debugName: "renderPreview" }] : /* istanbul ignore next */ []);
+	maskVisible = signal(false, ...ngDevMode ? [{ debugName: "maskVisible" }] : /* istanbul ignore next */ []);
+	previewVisible = false;
+	rotate = signal(0, ...ngDevMode ? [{ debugName: "rotate" }] : /* istanbul ignore next */ []);
+	scale = signal(1, ...ngDevMode ? [{ debugName: "scale" }] : /* istanbul ignore next */ []);
+	previewClick = false;
+	container;
+	wrapper;
+	_componentStyle = inject(ImageStyle);
+	$appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), ...ngDevMode ? [{ debugName: "$appendTo" }] : /* istanbul ignore next */ []);
+	zoomSettings = {
+		default: 1,
+		step: .1,
+		max: 1.5,
+		min: .5
+	};
+	get aria() {
+		return this.config.translation.aria;
+	}
+	isZoomOutDisabled = computed(() => this.scale() - this.zoomSettings.step <= this.zoomSettings.min, ...ngDevMode ? [{ debugName: "isZoomOutDisabled" }] : /* istanbul ignore next */ []);
+	isZoomInDisabled = computed(() => this.scale() + this.zoomSettings.step >= this.zoomSettings.max, ...ngDevMode ? [{ debugName: "isZoomInDisabled" }] : /* istanbul ignore next */ []);
+	previewMaskStyle = computed(() => ({
+		height: this.height() + "px",
+		width: this.width() + "px"
+	}), ...ngDevMode ? [{ debugName: "previewMaskStyle" }] : /* istanbul ignore next */ []);
+	imageTemplateContext() {
+		return { errorCallback: this.imageError.bind(this) };
+	}
+	previewTemplateContext() {
+		return {
+			class: this.cx("original") ?? "",
+			style: this.imagePreviewStyle(),
+			previewCallback: this.onPreviewImageClick.bind(this)
+		};
+	}
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	onImageClick() {
+		if (this.preview()) {
+			this.maskVisible.set(true);
+			this.previewVisible = true;
+			this.renderMask.set(true);
+			this.renderPreview.set(true);
+			this.$blockBodyScroll();
+		}
+	}
+	onMaskClick() {
+		if (!this.previewClick) this.closePreview();
+		this.previewClick = false;
+	}
+	onMaskKeydown(event) {
+		switch (event.code) {
+			case "Escape":
+				this.onMaskClick();
+				setTimeout(() => {
+					focus(this.previewButton()?.nativeElement);
+				}, 25);
+				event.preventDefault();
+		}
+	}
+	onPreviewImageClick() {
+		this.previewClick = true;
+	}
+	rotateRight() {
+		this.rotate.update((v) => v + 90);
+		this.previewClick = true;
+	}
+	rotateLeft() {
+		this.rotate.update((v) => v - 90);
+		this.previewClick = true;
+	}
+	zoomIn() {
+		this.scale.update((v) => v + this.zoomSettings.step);
+		this.previewClick = true;
+	}
+	zoomOut() {
+		this.scale.update((v) => v - this.zoomSettings.step);
+		this.previewClick = true;
+	}
+	onAnimationStart(event) {
+		this.container = event.element;
+		this.wrapper = this.container?.parentElement;
+		if (this.$attrSelector) this.$markInstance(this.wrapper);
+		this.appendContainer();
+		this.moveOnTop();
+		this.onShow.emit({});
+		setTimeout(() => {
+			focus(this.closeButton()?.nativeElement);
+		}, 25);
+	}
+	onBeforeLeave() {
+		this.maskVisible.set(false);
+	}
+	onAnimationEnd() {
+		this.renderPreview.set(false);
+	}
+	onMaskAfterLeave() {
+		if (!this.renderPreview()) this.renderMask.set(false);
+		ZIndexUtils.clear(this.wrapper);
+		this.container = null;
+		this.wrapper = null;
+		this.rotate.set(0);
+		this.scale.set(this.zoomSettings.default);
+		this.$unblockBodyScroll();
+		this.onHide.emit({});
+	}
+	moveOnTop() {
+		ZIndexUtils.set("modal", this.wrapper, this.config.zIndex.modal);
+	}
+	appendContainer() {
+		if (this.$appendTo() && this.$appendTo() !== "self") {
+			if (this.$appendTo() === "body" && this.wrapper) this.$overlayParent(this.document.body, this.wrapper).appendChild(this.wrapper);
+			else if (this.wrapper) appendChild(this.$overlayParent(this.$appendTo(), this.wrapper), this.wrapper);
+		}
+	}
+	imagePreviewStyle() {
+		return { transform: "rotate(" + this.rotate() + "deg) scale(" + this.scale() + ")" };
+	}
+	zoomImageAriaLabel() {
+		return this.aria?.zoomImage;
+	}
+	handleToolbarClick(event) {
+		event.stopPropagation();
+	}
+	closePreview() {
+		this.previewVisible = false;
+	}
+	imageError(event) {
+		this.onImageError.emit(event);
+	}
+	rightAriaLabel() {
+		return this.aria?.rotateRight;
+	}
+	leftAriaLabel() {
+		return this.aria?.rotateLeft;
+	}
+	zoomInAriaLabel() {
+		return this.aria?.zoomIn;
+	}
+	zoomOutAriaLabel() {
+		return this.aria?.zoomOut;
+	}
+	closeAriaLabel() {
+		return this.aria?.close;
+	}
+	onKeydownHandler() {
+		if (this.previewVisible) this.closePreview();
+	}
+	onDestroy() {
+		if (this.wrapper) {
+			ZIndexUtils.clear(this.wrapper);
+			this.wrapper.remove();
+			this.wrapper = null;
+		}
+		this.container = null;
+		if (this.maskVisible()) this.$unblockBodyScroll();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: Image,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: Image,
+		isStandalone: true,
+		selector: "p-image",
+		inputs: {
+			imageClass: {
+				classPropertyName: "imageClass",
+				publicName: "imageClass",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			imageStyle: {
+				classPropertyName: "imageStyle",
+				publicName: "imageStyle",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			src: {
+				classPropertyName: "src",
+				publicName: "src",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			srcSet: {
+				classPropertyName: "srcSet",
+				publicName: "srcSet",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			sizes: {
+				classPropertyName: "sizes",
+				publicName: "sizes",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			previewImageSrc: {
+				classPropertyName: "previewImageSrc",
+				publicName: "previewImageSrc",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			previewImageSrcSet: {
+				classPropertyName: "previewImageSrcSet",
+				publicName: "previewImageSrcSet",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			previewImageSizes: {
+				classPropertyName: "previewImageSizes",
+				publicName: "previewImageSizes",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			alt: {
+				classPropertyName: "alt",
+				publicName: "alt",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			width: {
+				classPropertyName: "width",
+				publicName: "width",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			height: {
+				classPropertyName: "height",
+				publicName: "height",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loading: {
+				classPropertyName: "loading",
+				publicName: "loading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			preview: {
+				classPropertyName: "preview",
+				publicName: "preview",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			modalEnterAnimation: {
+				classPropertyName: "modalEnterAnimation",
+				publicName: "modalEnterAnimation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			modalLeaveAnimation: {
+				classPropertyName: "modalLeaveAnimation",
+				publicName: "modalLeaveAnimation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			appendTo: {
+				classPropertyName: "appendTo",
+				publicName: "appendTo",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maskMotionOptions: {
+				classPropertyName: "maskMotionOptions",
+				publicName: "maskMotionOptions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			motionOptions: {
+				classPropertyName: "motionOptions",
+				publicName: "motionOptions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			onShow: "onShow",
+			onHide: "onHide",
+			onImageError: "onImageError"
+		},
+		host: {
+			listeners: { "document:keydown.escape": "onKeydownHandler()" },
+			properties: { "class": "cx('root')" }
+		},
+		providers: [
+			ImageStyle,
+			{
+				provide: IMAGE_INSTANCE,
+				useExisting: Image
+			},
+			{
+				provide: PARENT_INSTANCE,
+				useExisting: Image
+			}
+		],
+		queries: [
+			{
+				propertyName: "indicatorTemplate",
+				first: true,
+				predicate: ["indicator"],
+				isSignal: true
+			},
+			{
+				propertyName: "rotateRightIconTemplate",
+				first: true,
+				predicate: ["rotaterighticon"],
+				isSignal: true
+			},
+			{
+				propertyName: "rotateLeftIconTemplate",
+				first: true,
+				predicate: ["rotatelefticon"],
+				isSignal: true
+			},
+			{
+				propertyName: "zoomOutIconTemplate",
+				first: true,
+				predicate: ["zoomouticon"],
+				isSignal: true
+			},
+			{
+				propertyName: "zoomInIconTemplate",
+				first: true,
+				predicate: ["zoominicon"],
+				isSignal: true
+			},
+			{
+				propertyName: "closeIconTemplate",
+				first: true,
+				predicate: ["closeicon"],
+				isSignal: true
+			},
+			{
+				propertyName: "previewTemplate",
+				first: true,
+				predicate: ["preview"],
+				isSignal: true
+			},
+			{
+				propertyName: "imageTemplate",
+				first: true,
+				predicate: ["image"],
+				isSignal: true
+			}
+		],
+		viewQueries: [
+			{
+				propertyName: "mask",
+				first: true,
+				predicate: ["mask"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "previewButton",
+				first: true,
+				predicate: ["previewButton"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "closeButton",
+				first: true,
+				predicate: ["closeButton"],
+				descendants: true,
+				isSignal: true
+			}
+		],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: `
         @if (!imageTemplate()) {
             <img
                 [attr.src]="src()"
@@ -572,7 +625,15 @@ class Image extends BaseComponent {
                     </button>
                 </div>
                 @if (renderPreview()) {
-                    <p-motion [visible]="previewVisible" name="p-image-original" [appear]="true" [options]="computedMotionOptions()" (onBeforeEnter)="onAnimationStart($event)" (onBeforeLeave)="onBeforeLeave()" (onAfterLeave)="onAnimationEnd()">
+                    <p-motion
+                        [visible]="previewVisible"
+                        [name]="pcn('p-image-original')"
+                        [appear]="true"
+                        [options]="computedMotionOptions()"
+                        (onBeforeEnter)="onAnimationStart($event)"
+                        (onBeforeLeave)="onBeforeLeave()"
+                        (onAfterLeave)="onAnimationEnd()"
+                    >
                         @if (!previewTemplate()) {
                             <img
                                 [attr.src]="previewImageSrc() ? previewImageSrc() : src()"
@@ -589,15 +650,172 @@ class Image extends BaseComponent {
                 }
             </div>
         }
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Refresh, selector: "svg[data-p-icon=\"refresh\"]" }, { kind: "component", type: Eye, selector: "svg[data-p-icon=\"eye\"]" }, { kind: "component", type: Undo, selector: "svg[data-p-icon=\"undo\"]" }, { kind: "component", type: SearchMinus, selector: "svg[data-p-icon=\"search-minus\"]" }, { kind: "component", type: SearchPlus, selector: "svg[data-p-icon=\"search-plus\"]" }, { kind: "component", type: Times, selector: "svg[data-p-icon=\"times\"]" }, { kind: "directive", type: FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "ngmodule", type: MotionModule }, { kind: "component", type: i2.Motion, selector: "p-motion", inputs: ["visible", "mountOnEnter", "unmountOnLeave", "name", "type", "safe", "disabled", "appear", "enter", "leave", "duration", "hideStrategy", "enterFromClass", "enterToClass", "enterActiveClass", "leaveFromClass", "leaveToClass", "leaveActiveClass", "options"], outputs: ["onBeforeEnter", "onEnter", "onAfterEnter", "onEnterCancelled", "onBeforeLeave", "onLeave", "onAfterLeave", "onLeaveCancelled"] }, { kind: "directive", type: i2.MotionDirective, selector: "[pMotion]", inputs: ["pMotion", "pMotionName", "pMotionType", "pMotionSafe", "pMotionDisabled", "pMotionAppear", "pMotionEnter", "pMotionLeave", "pMotionDuration", "pMotionHideStrategy", "pMotionEnterFromClass", "pMotionEnterToClass", "pMotionEnterActiveClass", "pMotionLeaveFromClass", "pMotionLeaveToClass", "pMotionLeaveActiveClass", "pMotionOptions"], outputs: ["pMotionOnBeforeEnter", "pMotionOnEnter", "pMotionOnAfterEnter", "pMotionOnEnterCancelled", "pMotionOnBeforeLeave", "pMotionOnLeave", "pMotionOnAfterLeave", "pMotionOnLeaveCancelled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Image, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'p-image',
-                    standalone: true,
-                    imports: [NgTemplateOutlet, Refresh, Eye, Undo, SearchMinus, SearchPlus, Times, FocusTrap, SharedModule, BindModule, MotionModule],
-                    template: `
+    `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: Refresh,
+				selector: "svg[data-p-icon=\"refresh\"]"
+			},
+			{
+				kind: "component",
+				type: Eye,
+				selector: "svg[data-p-icon=\"eye\"]"
+			},
+			{
+				kind: "component",
+				type: Undo,
+				selector: "svg[data-p-icon=\"undo\"]"
+			},
+			{
+				kind: "component",
+				type: SearchMinus,
+				selector: "svg[data-p-icon=\"search-minus\"]"
+			},
+			{
+				kind: "component",
+				type: SearchPlus,
+				selector: "svg[data-p-icon=\"search-plus\"]"
+			},
+			{
+				kind: "component",
+				type: Times,
+				selector: "svg[data-p-icon=\"times\"]"
+			},
+			{
+				kind: "directive",
+				type: FocusTrap,
+				selector: "[pFocusTrap]",
+				inputs: ["pFocusTrapDisabled"]
+			},
+			{
+				kind: "ngmodule",
+				type: SharedModule
+			},
+			{
+				kind: "ngmodule",
+				type: BindModule
+			},
+			{
+				kind: "directive",
+				type: i1.Bind,
+				selector: "[pBind]",
+				inputs: ["pBind"]
+			},
+			{
+				kind: "ngmodule",
+				type: MotionModule
+			},
+			{
+				kind: "component",
+				type: i2.Motion,
+				selector: "p-motion",
+				inputs: [
+					"visible",
+					"mountOnEnter",
+					"unmountOnLeave",
+					"name",
+					"type",
+					"safe",
+					"disabled",
+					"appear",
+					"enter",
+					"leave",
+					"duration",
+					"hideStrategy",
+					"enterFromClass",
+					"enterToClass",
+					"enterActiveClass",
+					"leaveFromClass",
+					"leaveToClass",
+					"leaveActiveClass",
+					"options"
+				],
+				outputs: [
+					"onBeforeEnter",
+					"onEnter",
+					"onAfterEnter",
+					"onEnterCancelled",
+					"onBeforeLeave",
+					"onLeave",
+					"onAfterLeave",
+					"onLeaveCancelled"
+				]
+			},
+			{
+				kind: "directive",
+				type: i2.MotionDirective,
+				selector: "[pMotion]",
+				inputs: [
+					"pMotion",
+					"pMotionName",
+					"pMotionType",
+					"pMotionSafe",
+					"pMotionDisabled",
+					"pMotionAppear",
+					"pMotionEnter",
+					"pMotionLeave",
+					"pMotionDuration",
+					"pMotionHideStrategy",
+					"pMotionEnterFromClass",
+					"pMotionEnterToClass",
+					"pMotionEnterActiveClass",
+					"pMotionLeaveFromClass",
+					"pMotionLeaveToClass",
+					"pMotionLeaveActiveClass",
+					"pMotionOptions"
+				],
+				outputs: [
+					"pMotionOnBeforeEnter",
+					"pMotionOnEnter",
+					"pMotionOnAfterEnter",
+					"pMotionOnEnterCancelled",
+					"pMotionOnBeforeLeave",
+					"pMotionOnLeave",
+					"pMotionOnAfterLeave",
+					"pMotionOnLeaveCancelled"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: Image,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "p-image",
+			standalone: true,
+			imports: [
+				NgTemplateOutlet,
+				Refresh,
+				Eye,
+				Undo,
+				SearchMinus,
+				SearchPlus,
+				Times,
+				FocusTrap,
+				SharedModule,
+				BindModule,
+				MotionModule
+			],
+			template: `
         @if (!imageTemplate()) {
             <img
                 [attr.src]="src()"
@@ -675,7 +893,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                     </button>
                 </div>
                 @if (renderPreview()) {
-                    <p-motion [visible]="previewVisible" name="p-image-original" [appear]="true" [options]="computedMotionOptions()" (onBeforeEnter)="onAnimationStart($event)" (onBeforeLeave)="onBeforeLeave()" (onAfterLeave)="onAnimationEnd()">
+                    <p-motion
+                        [visible]="previewVisible"
+                        [name]="pcn('p-image-original')"
+                        [appear]="true"
+                        [options]="computedMotionOptions()"
+                        (onBeforeEnter)="onAnimationStart($event)"
+                        (onBeforeLeave)="onBeforeLeave()"
+                        (onAfterLeave)="onAnimationEnd()"
+                    >
                         @if (!previewTemplate()) {
                             <img
                                 [attr.src]="previewImageSrc() ? previewImageSrc() : src()"
@@ -693,34 +919,296 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             </div>
         }
     `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    providers: [ImageStyle, { provide: IMAGE_INSTANCE, useExisting: Image }, { provide: PARENT_INSTANCE, useExisting: Image }],
-                    host: {
-                        '[class]': "cx('root')"
-                    },
-                    hostDirectives: [Bind]
-                }]
-        }], ctorParameters: () => [], propDecorators: { imageClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageClass", required: false }] }], imageStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageStyle", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], srcSet: [{ type: i0.Input, args: [{ isSignal: true, alias: "srcSet", required: false }] }], sizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizes", required: false }] }], previewImageSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewImageSrc", required: false }] }], previewImageSrcSet: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewImageSrcSet", required: false }] }], previewImageSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewImageSizes", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], preview: [{ type: i0.Input, args: [{ isSignal: true, alias: "preview", required: false }] }], modalEnterAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalEnterAnimation", required: false }] }], modalLeaveAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalLeaveAnimation", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], maskMotionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskMotionOptions", required: false }] }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], onImageError: [{ type: i0.Output, args: ["onImageError"] }], mask: [{ type: i0.ViewChild, args: ['mask', { isSignal: true }] }], previewButton: [{ type: i0.ViewChild, args: ['previewButton', { isSignal: true }] }], closeButton: [{ type: i0.ViewChild, args: ['closeButton', { isSignal: true }] }], indicatorTemplate: [{ type: i0.ContentChild, args: ['indicator', { ...{ descendants: false }, isSignal: true }] }], rotateRightIconTemplate: [{ type: i0.ContentChild, args: ['rotaterighticon', { ...{ descendants: false }, isSignal: true }] }], rotateLeftIconTemplate: [{ type: i0.ContentChild, args: ['rotatelefticon', { ...{ descendants: false }, isSignal: true }] }], zoomOutIconTemplate: [{ type: i0.ContentChild, args: ['zoomouticon', { ...{ descendants: false }, isSignal: true }] }], zoomInIconTemplate: [{ type: i0.ContentChild, args: ['zoominicon', { ...{ descendants: false }, isSignal: true }] }], closeIconTemplate: [{ type: i0.ContentChild, args: ['closeicon', { ...{ descendants: false }, isSignal: true }] }], previewTemplate: [{ type: i0.ContentChild, args: ['preview', { ...{ descendants: false }, isSignal: true }] }], imageTemplate: [{ type: i0.ContentChild, args: ['image', { ...{ descendants: false }, isSignal: true }] }], onKeydownHandler: [{
-                type: HostListener,
-                args: ['document:keydown.escape']
-            }] } });
-class ImageModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ImageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.5", ngImport: i0, type: ImageModule, imports: [Image, SharedModule], exports: [Image, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ImageModule, imports: [Image, SharedModule, SharedModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ImageModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [Image, SharedModule],
-                    exports: [Image, SharedModule]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			providers: [
+				ImageStyle,
+				{
+					provide: IMAGE_INSTANCE,
+					useExisting: Image
+				},
+				{
+					provide: PARENT_INSTANCE,
+					useExisting: Image
+				}
+			],
+			host: { "[class]": "cx('root')" },
+			hostDirectives: [Bind]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		imageClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "imageClass",
+				required: false
+			}]
+		}],
+		imageStyle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "imageStyle",
+				required: false
+			}]
+		}],
+		src: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "src",
+				required: false
+			}]
+		}],
+		srcSet: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "srcSet",
+				required: false
+			}]
+		}],
+		sizes: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sizes",
+				required: false
+			}]
+		}],
+		previewImageSrc: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "previewImageSrc",
+				required: false
+			}]
+		}],
+		previewImageSrcSet: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "previewImageSrcSet",
+				required: false
+			}]
+		}],
+		previewImageSizes: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "previewImageSizes",
+				required: false
+			}]
+		}],
+		alt: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "alt",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		preview: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "preview",
+				required: false
+			}]
+		}],
+		modalEnterAnimation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "modalEnterAnimation",
+				required: false
+			}]
+		}],
+		modalLeaveAnimation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "modalLeaveAnimation",
+				required: false
+			}]
+		}],
+		appendTo: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "appendTo",
+				required: false
+			}]
+		}],
+		maskMotionOptions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maskMotionOptions",
+				required: false
+			}]
+		}],
+		motionOptions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "motionOptions",
+				required: false
+			}]
+		}],
+		onShow: [{
+			type: i0.Output,
+			args: ["onShow"]
+		}],
+		onHide: [{
+			type: i0.Output,
+			args: ["onHide"]
+		}],
+		onImageError: [{
+			type: i0.Output,
+			args: ["onImageError"]
+		}],
+		mask: [{
+			type: i0.ViewChild,
+			args: ["mask", { isSignal: true }]
+		}],
+		previewButton: [{
+			type: i0.ViewChild,
+			args: ["previewButton", { isSignal: true }]
+		}],
+		closeButton: [{
+			type: i0.ViewChild,
+			args: ["closeButton", { isSignal: true }]
+		}],
+		indicatorTemplate: [{
+			type: i0.ContentChild,
+			args: ["indicator", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		rotateRightIconTemplate: [{
+			type: i0.ContentChild,
+			args: ["rotaterighticon", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		rotateLeftIconTemplate: [{
+			type: i0.ContentChild,
+			args: ["rotatelefticon", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		zoomOutIconTemplate: [{
+			type: i0.ContentChild,
+			args: ["zoomouticon", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		zoomInIconTemplate: [{
+			type: i0.ContentChild,
+			args: ["zoominicon", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		closeIconTemplate: [{
+			type: i0.ContentChild,
+			args: ["closeicon", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		previewTemplate: [{
+			type: i0.ContentChild,
+			args: ["preview", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		imageTemplate: [{
+			type: i0.ContentChild,
+			args: ["image", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		onKeydownHandler: [{
+			type: HostListener,
+			args: ["document:keydown.escape"]
+		}]
+	}
+});
+var ImageModule = class ImageModule {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: ImageModule,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.NgModule
+	});
+	static ɵmod = i0.ɵɵngDeclareNgModule({
+		minVersion: "14.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: ImageModule,
+		imports: [Image, SharedModule],
+		exports: [Image, SharedModule]
+	});
+	static ɵinj = i0.ɵɵngDeclareInjector({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: ImageModule,
+		imports: [
+			Image,
+			SharedModule,
+			SharedModule
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ImageModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [Image, SharedModule],
+			exports: [Image, SharedModule]
+		}]
+	}]
+});
 export { Image, ImageClasses, ImageModule, ImageStyle };
-//# sourceMappingURL=primeng-image.mjs.map
+