primeng 20.3.0 → 21.0.0-rc.1

package/fesm2022/primeng-image.mjs

@@ -1,10 +1,9 @@
 export * from 'primeng/types/image';
-import { trigger, transition, style as style$1, animate } from '@angular/animations';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, input, EventEmitter, computed, booleanAttribute, HostListener, ContentChildren, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { focus, addClass, appendChild } from '@primeuix/utils';
+import { Injectable, InjectionToken, inject, input, computed, EventEmitter, signal, booleanAttribute, HostListener, ContentChildren, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { focus, appendChild } from '@primeuix/utils';
 import { SharedModule, PrimeTemplate } from 'primeng/api';
 import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
 import * as i1 from 'primeng/bind';
@@ -12,6 +11,8 @@ import { Bind, BindModule } from 'primeng/bind';
 import { blockBodyScroll, unblockBodyScroll } from 'primeng/dom';
 import { FocusTrap } from 'primeng/focustrap';
 import { RefreshIcon, EyeIcon, UndoIcon, SearchMinusIcon, SearchPlusIcon, TimesIcon } from 'primeng/icons';
+import * as i3 from 'primeng/motion';
+import { MotionModule } from 'primeng/motion';
 import { ZIndexUtils } from 'primeng/utils';
 import { style } from '@primeuix/styles/image';
 import { BaseStyle } from 'primeng/base';
@@ -25,7 +26,7 @@ const classes = {
     ],
     previewMask: 'p-image-preview-mask',
     previewIcon: 'p-image-preview-icon',
-    mask: 'p-image-mask p-overlay-mask p-overlay-mask-enter',
+    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',
@@ -48,10 +49,10 @@ class ImageStyle extends BaseStyle {
     name = 'image';
     style = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ImageStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ImageStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ImageStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ImageStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ImageStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ImageStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -193,19 +194,55 @@ class Image extends BaseComponent {
     /**
      * Transition options of the show animation
      * @group Props
+     * @deprecated since v21.0.0. Use `motionOptions` instead.
      */
     showTransitionOptions = '150ms cubic-bezier(0, 0, 0.2, 1)';
     /**
      * Transition options of the hide animation
      * @group Props
+     * @deprecated since v21.0.0. Use `motionOptions` instead.
      */
     hideTransitionOptions = '150ms cubic-bezier(0, 0, 0.2, 1)';
+    /**
+     * Enter animation class name of modal.
+     * @defaultValue 'p-modal-enter'
+     * @group Props
+     */
+    modalEnterAnimation = input('p-modal-enter', { ...(ngDevMode ? { debugName: "modalEnterAnimation" } : {}) });
+    /**
+     * Leave animation class name of modal.
+     * @defaultValue 'p-modal-leave'
+     * @group Props
+     */
+    modalLeaveAnimation = input('p-modal-leave', { ...(ngDevMode ? { debugName: "modalLeaveAnimation" } : {}) });
     /**
      * 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, ...(ngDevMode ? [{ debugName: "appendTo" }] : []));
+    appendTo = input(undefined, { ...(ngDevMode ? { debugName: "appendTo" } : {}) });
+    /**
+     * The motion options for the mask.
+     * @group Props
+     */
+    maskMotionOptions = input(undefined, { ...(ngDevMode ? { debugName: "maskMotionOptions" } : {}) });
+    computedMaskMotionOptions = computed(() => {
+        return {
+            ...this.ptm('maskMotion'),
+            ...this.maskMotionOptions()
+        };
+    }, { ...(ngDevMode ? { debugName: "computedMaskMotionOptions" } : {}) });
+    /**
+     * The motion options.
+     * @group Props
+     */
+    motionOptions = input(undefined, { ...(ngDevMode ? { debugName: "motionOptions" } : {}) });
+    computedMotionOptions = computed(() => {
+        return {
+            ...this.ptm('motion'),
+            ...this.motionOptions()
+        };
+    }, { ...(ngDevMode ? { debugName: "computedMotionOptions" } : {}) });
     /**
      * Triggered when the preview overlay is shown.
      * @group Emits
@@ -226,45 +263,47 @@ class Image extends BaseComponent {
     previewButton;
     closeButton;
     /**
-     * Custom template of indicator.
+     * Custom indicator template.
      * @group Templates
      */
     indicatorTemplate;
     /**
-     * Custom template of rotaterighticon.
+     * Custom rotate right icon template.
      * @group Templates
      */
     rotateRightIconTemplate;
     /**
-     * Custom template of rotatelefticon.
+     * Custom rotate left icon template.
      * @group Templates
      */
     rotateLeftIconTemplate;
     /**
-     * Custom template of zoomouticon.
+     * Custom zoom out icon template.
      * @group Templates
      */
     zoomOutIconTemplate;
     /**
-     * Custom template of zoominicon.
+     * Custom zoom in icon template.
      * @group Templates
      */
     zoomInIconTemplate;
     /**
-     * Custom template of closeicon.
+     * Custom close icon template.
      * @group Templates
      */
     closeIconTemplate;
     /**
-     * Custom template of preview.
+     * Custom preview template.
      * @group Templates
      */
     previewTemplate;
     /**
-     * Custom template of image.
+     * Custom image template.
      * @group Templates
      */
     imageTemplate;
+    renderMask = signal(false, { ...(ngDevMode ? { debugName: "renderMask" } : {}) });
+    renderPreview = signal(false, { ...(ngDevMode ? { debugName: "renderPreview" } : {}) });
     maskVisible = false;
     previewVisible = false;
     rotate = 0;
@@ -273,7 +312,7 @@ class Image extends BaseComponent {
     container;
     wrapper;
     _componentStyle = inject(ImageStyle);
-    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), ...(ngDevMode ? [{ debugName: "$appendTo" }] : []));
+    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), { ...(ngDevMode ? { debugName: "$appendTo" } : {}) });
     get isZoomOutDisabled() {
         return this.scale - this.zoomSettings.step <= this.zoomSettings.min;
     }
@@ -286,9 +325,6 @@ class Image extends BaseComponent {
         max: 1.5,
         min: 0.5
     };
-    constructor() {
-        super();
-    }
     templates;
     _indicatorTemplate;
     _rotateRightIconTemplate;
@@ -338,6 +374,8 @@ class Image extends BaseComponent {
         if (this.preview) {
             this.maskVisible = true;
             this.previewVisible = true;
+            this.renderMask.set(true);
+            this.renderPreview.set(true);
             blockBodyScroll();
         }
     }
@@ -380,37 +418,34 @@ class Image extends BaseComponent {
         this.previewClick = true;
     }
     onAnimationStart(event) {
-        switch (event.toState) {
-            case 'visible':
-                this.container = event.element;
-                this.wrapper = this.container?.parentElement;
-                this.$attrSelector && this.wrapper?.setAttribute(this.$attrSelector, '');
-                this.appendContainer();
-                this.moveOnTop();
-                setTimeout(() => {
-                    focus(this.closeButton?.nativeElement);
-                }, 25);
-                break;
-            case 'void':
-                if (this.wrapper)
-                    addClass(this.wrapper, 'p-overlay-mask-leave');
-                break;
-        }
+        this.container = event.element;
+        this.wrapper = this.container?.parentElement;
+        this.$attrSelector && this.wrapper?.setAttribute(this.$attrSelector, '');
+        this.appendContainer();
+        this.moveOnTop();
+        this.onShow.emit({});
+        setTimeout(() => {
+            focus(this.closeButton?.nativeElement);
+        }, 25);
     }
-    onAnimationEnd(event) {
-        switch (event.toState) {
-            case 'void':
-                ZIndexUtils.clear(this.wrapper);
-                this.maskVisible = false;
-                this.container = null;
-                this.wrapper = null;
-                this.cd.markForCheck();
-                this.onHide.emit({});
-                break;
-            case 'visible':
-                this.onShow.emit({});
-                break;
+    onBeforeLeave() {
+        this.maskVisible = 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 = 0;
+        this.scale = this.zoomSettings.default;
+        unblockBodyScroll();
+        this.onHide.emit({});
+        this.cd.markForCheck();
     }
     moveOnTop() {
         ZIndexUtils.set('modal', this.wrapper, this.config.zIndex.modal);
@@ -436,9 +471,6 @@ class Image extends BaseComponent {
     }
     closePreview() {
         this.previewVisible = false;
-        this.rotate = 0;
-        this.scale = this.zoomSettings.default;
-        unblockBodyScroll();
     }
     imageError(event) {
         this.onImageError.emit(event);
@@ -458,13 +490,13 @@ class Image extends BaseComponent {
     closeAriaLabel() {
         return this.config.translation.aria ? this.config.translation.aria.close : undefined;
     }
-    onKeydownHandler(event) {
+    onKeydownHandler() {
         if (this.previewVisible) {
             this.closePreview();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Image, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", type: Image, isStandalone: true, selector: "p-image", inputs: { imageClass: { classPropertyName: "imageClass", publicName: "imageClass", isSignal: false, isRequired: false, transformFunction: null }, imageStyle: { classPropertyName: "imageStyle", publicName: "imageStyle", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: false, isRequired: false, transformFunction: null }, srcSet: { classPropertyName: "srcSet", publicName: "srcSet", isSignal: false, isRequired: false, transformFunction: null }, sizes: { classPropertyName: "sizes", publicName: "sizes", isSignal: false, isRequired: false, transformFunction: null }, previewImageSrc: { classPropertyName: "previewImageSrc", publicName: "previewImageSrc", isSignal: false, isRequired: false, transformFunction: null }, previewImageSrcSet: { classPropertyName: "previewImageSrcSet", publicName: "previewImageSrcSet", isSignal: false, isRequired: false, transformFunction: null }, previewImageSizes: { classPropertyName: "previewImageSizes", publicName: "previewImageSizes", isSignal: false, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: false, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showTransitionOptions: { classPropertyName: "showTransitionOptions", publicName: "showTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, hideTransitionOptions: { classPropertyName: "hideTransitionOptions", publicName: "hideTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onShow: "onShow", onHide: "onHide", onImageError: "onImageError" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" }, properties: { "class": "cn(cx('root'),styleClass)" } }, providers: [ImageStyle, { provide: IMAGE_INSTANCE, useExisting: Image }, { provide: PARENT_INSTANCE, useExisting: Image }], queries: [{ propertyName: "indicatorTemplate", first: true, predicate: ["indicator"] }, { propertyName: "rotateRightIconTemplate", first: true, predicate: ["rotaterighticon"] }, { propertyName: "rotateLeftIconTemplate", first: true, predicate: ["rotatelefticon"] }, { propertyName: "zoomOutIconTemplate", first: true, predicate: ["zoomouticon"] }, { propertyName: "zoomInIconTemplate", first: true, predicate: ["zoominicon"] }, { propertyName: "closeIconTemplate", first: true, predicate: ["closeicon"] }, { propertyName: "previewTemplate", first: true, predicate: ["preview"] }, { propertyName: "imageTemplate", first: true, predicate: ["image"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "mask", first: true, predicate: ["mask"], descendants: true }, { propertyName: "previewButton", first: true, predicate: ["previewButton"], descendants: true }, { propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Image, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: Image, isStandalone: true, selector: "p-image", inputs: { imageClass: { classPropertyName: "imageClass", publicName: "imageClass", isSignal: false, isRequired: false, transformFunction: null }, imageStyle: { classPropertyName: "imageStyle", publicName: "imageStyle", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: false, isRequired: false, transformFunction: null }, srcSet: { classPropertyName: "srcSet", publicName: "srcSet", isSignal: false, isRequired: false, transformFunction: null }, sizes: { classPropertyName: "sizes", publicName: "sizes", isSignal: false, isRequired: false, transformFunction: null }, previewImageSrc: { classPropertyName: "previewImageSrc", publicName: "previewImageSrc", isSignal: false, isRequired: false, transformFunction: null }, previewImageSrcSet: { classPropertyName: "previewImageSrcSet", publicName: "previewImageSrcSet", isSignal: false, isRequired: false, transformFunction: null }, previewImageSizes: { classPropertyName: "previewImageSizes", publicName: "previewImageSizes", isSignal: false, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: false, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showTransitionOptions: { classPropertyName: "showTransitionOptions", publicName: "showTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, hideTransitionOptions: { classPropertyName: "hideTransitionOptions", publicName: "hideTransitionOptions", isSignal: false, 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": "cn(cx('root'),styleClass)" } }, providers: [ImageStyle, { provide: IMAGE_INSTANCE, useExisting: Image }, { provide: PARENT_INSTANCE, useExisting: Image }], queries: [{ propertyName: "indicatorTemplate", first: true, predicate: ["indicator"] }, { propertyName: "rotateRightIconTemplate", first: true, predicate: ["rotaterighticon"] }, { propertyName: "rotateLeftIconTemplate", first: true, predicate: ["rotatelefticon"] }, { propertyName: "zoomOutIconTemplate", first: true, predicate: ["zoomouticon"] }, { propertyName: "zoomInIconTemplate", first: true, predicate: ["zoominicon"] }, { propertyName: "closeIconTemplate", first: true, predicate: ["closeicon"] }, { propertyName: "previewTemplate", first: true, predicate: ["preview"] }, { propertyName: "imageTemplate", first: true, predicate: ["image"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "mask", first: true, predicate: ["mask"], descendants: true }, { propertyName: "previewButton", first: true, predicate: ["previewButton"], descendants: true }, { propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
         <ng-container *ngIf="!imageTemplate && !_imageTemplate">
             <img
                 [attr.src]="src"
@@ -491,75 +523,81 @@ class Image extends BaseComponent {
                 <svg data-p-icon="eye" [class]="cx('previewIcon')" [pBind]="ptm('previewIcon')" />
             </ng-template>
         </button>
-        <div #mask [class]="cx('mask')" *ngIf="maskVisible" [attr.aria-modal]="maskVisible" role="dialog" (click)="onMaskClick()" (keydown)="onMaskKeydown($event)" pFocusTrap [pBind]="ptm('mask')">
-            <div [class]="cx('toolbar')" (click)="handleToolbarClick($event)" [pBind]="ptm('toolbar')">
-                <button [class]="cx('rotateRightButton')" (click)="rotateRight()" type="button" [attr.aria-label]="rightAriaLabel()" [pBind]="ptm('rotateRightButton')">
-                    <svg data-p-icon="refresh" *ngIf="!rotateRightIconTemplate && !_rotateRightIconTemplate" />
-                    <ng-template *ngTemplateOutlet="rotateRightIconTemplate || _rotateRightIconTemplate"></ng-template>
-                </button>
-                <button [class]="cx('rotateLeftButton')" (click)="rotateLeft()" type="button" [attr.aria-label]="leftAriaLabel()" [pBind]="ptm('rotateLeftButton')">
-                    <svg data-p-icon="undo" *ngIf="!rotateLeftIconTemplate && !_rotateLeftIconTemplate" />
-                    <ng-template *ngTemplateOutlet="rotateLeftIconTemplate || _rotateLeftIconTemplate"></ng-template>
-                </button>
-                <button [class]="cx('zoomOutButton')" (click)="zoomOut()" type="button" [disabled]="isZoomOutDisabled" [attr.aria-label]="zoomOutAriaLabel()" [pBind]="ptm('zoomOutButton')">
-                    <svg data-p-icon="search-minus" *ngIf="!zoomOutIconTemplate && !_zoomOutIconTemplate" />
-                    <ng-template *ngTemplateOutlet="zoomOutIconTemplate || _zoomOutIconTemplate"></ng-template>
-                </button>
-                <button [class]="cx('zoomInButton')" (click)="zoomIn()" type="button" [disabled]="isZoomInDisabled" [attr.aria-label]="zoomInAriaLabel()" [pBind]="ptm('zoomInButton')">
-                    <svg data-p-icon="search-plus" *ngIf="!zoomInIconTemplate && !_zoomInIconTemplate" />
-                    <ng-template *ngTemplateOutlet="zoomInIconTemplate || _zoomInIconTemplate"></ng-template>
-                </button>
-                <button [class]="cx('closeButton')" type="button" (click)="closePreview()" [attr.aria-label]="closeAriaLabel()" #closeButton [pBind]="ptm('closeButton')">
-                    <svg data-p-icon="times" *ngIf="!closeIconTemplate && !_closeIconTemplate" />
-                    <ng-template *ngTemplateOutlet="closeIconTemplate || _closeIconTemplate"></ng-template>
-                </button>
-            </div>
+        @if (renderMask()) {
             <div
-                *ngIf="previewVisible"
-                [@animation]="{
-                    value: 'visible',
-                    params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
-                }"
-                (@animation.start)="onAnimationStart($event)"
-                (@animation.done)="onAnimationEnd($event)"
+                #mask
+                [class]="cx('mask')"
+                [attr.aria-modal]="maskVisible"
+                role="dialog"
+                (click)="onMaskClick()"
+                (keydown)="onMaskKeydown($event)"
+                pFocusTrap
+                [pBind]="ptm('mask')"
+                [pMotion]="maskVisible"
+                [pMotionAppear]="true"
+                [pMotionEnterActiveClass]="'p-overlay-mask-enter-active'"
+                [pMotionLeaveActiveClass]="'p-overlay-mask-leave-active'"
+                [pMotionOptions]="computedMaskMotionOptions()"
+                (pMotionOnAfterLeave)="onMaskAfterLeave()"
             >
-                <ng-container *ngIf="!previewTemplate && !_previewTemplate">
-                    <img
-                        [attr.src]="previewImageSrc ? previewImageSrc : src"
-                        [attr.srcset]="previewImageSrcSet"
-                        [attr.sizes]="previewImageSizes"
-                        [class]="cx('original')"
-                        [ngStyle]="imagePreviewStyle()"
-                        (click)="onPreviewImageClick()"
-                        [pBind]="ptm('original')"
-                    />
-                </ng-container>
-                <ng-container
-                    *ngTemplateOutlet="
-                        previewTemplate || _previewTemplate;
-                        context: {
-                            class: cx('original'),
-                            style: imagePreviewStyle(),
-                            previewCallback: onPreviewImageClick.bind(this)
-                        }
-                    "
-                >
-                </ng-container>
+                <div [class]="cx('toolbar')" (click)="handleToolbarClick($event)" [pBind]="ptm('toolbar')">
+                    <button [class]="cx('rotateRightButton')" (click)="rotateRight()" type="button" [attr.aria-label]="rightAriaLabel()" [pBind]="ptm('rotateRightButton')">
+                        <svg data-p-icon="refresh" *ngIf="!rotateRightIconTemplate && !_rotateRightIconTemplate" />
+                        <ng-template *ngTemplateOutlet="rotateRightIconTemplate || _rotateRightIconTemplate"></ng-template>
+                    </button>
+                    <button [class]="cx('rotateLeftButton')" (click)="rotateLeft()" type="button" [attr.aria-label]="leftAriaLabel()" [pBind]="ptm('rotateLeftButton')">
+                        <svg data-p-icon="undo" *ngIf="!rotateLeftIconTemplate && !_rotateLeftIconTemplate" />
+                        <ng-template *ngTemplateOutlet="rotateLeftIconTemplate || _rotateLeftIconTemplate"></ng-template>
+                    </button>
+                    <button [class]="cx('zoomOutButton')" (click)="zoomOut()" type="button" [disabled]="isZoomOutDisabled" [attr.aria-label]="zoomOutAriaLabel()" [pBind]="ptm('zoomOutButton')">
+                        <svg data-p-icon="search-minus" *ngIf="!zoomOutIconTemplate && !_zoomOutIconTemplate" />
+                        <ng-template *ngTemplateOutlet="zoomOutIconTemplate || _zoomOutIconTemplate"></ng-template>
+                    </button>
+                    <button [class]="cx('zoomInButton')" (click)="zoomIn()" type="button" [disabled]="isZoomInDisabled" [attr.aria-label]="zoomInAriaLabel()" [pBind]="ptm('zoomInButton')">
+                        <svg data-p-icon="search-plus" *ngIf="!zoomInIconTemplate && !_zoomInIconTemplate" />
+                        <ng-template *ngTemplateOutlet="zoomInIconTemplate || _zoomInIconTemplate"></ng-template>
+                    </button>
+                    <button [class]="cx('closeButton')" type="button" (click)="closePreview()" [attr.aria-label]="closeAriaLabel()" #closeButton [pBind]="ptm('closeButton')">
+                        <svg data-p-icon="times" *ngIf="!closeIconTemplate && !_closeIconTemplate" />
+                        <ng-template *ngTemplateOutlet="closeIconTemplate || _closeIconTemplate"></ng-template>
+                    </button>
+                </div>
+                @if (renderPreview()) {
+                    <p-motion [visible]="previewVisible" name="p-image-original" [appear]="true" [options]="computedMotionOptions()" (onBeforeEnter)="onAnimationStart($event)" (onBeforeLeave)="onBeforeLeave()" (onAfterLeave)="onAnimationEnd($event)">
+                        <ng-container *ngIf="!previewTemplate && !_previewTemplate">
+                            <img
+                                [attr.src]="previewImageSrc ? previewImageSrc : src"
+                                [attr.srcset]="previewImageSrcSet"
+                                [attr.sizes]="previewImageSizes"
+                                [class]="cx('original')"
+                                [ngStyle]="imagePreviewStyle()"
+                                (click)="onPreviewImageClick()"
+                                [pBind]="ptm('original')"
+                            />
+                        </ng-container>
+                        <ng-container
+                            *ngTemplateOutlet="
+                                previewTemplate || _previewTemplate;
+                                context: {
+                                    class: cx('original'),
+                                    style: imagePreviewStyle(),
+                                    previewCallback: onPreviewImageClick.bind(this)
+                                }
+                            "
+                        >
+                        </ng-container>
+                    </p-motion>
+                }
             </div>
-        </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: RefreshIcon, selector: "[data-p-icon=\"refresh\"]" }, { kind: "component", type: EyeIcon, selector: "[data-p-icon=\"eye\"]" }, { kind: "component", type: UndoIcon, selector: "[data-p-icon=\"undo\"]" }, { kind: "component", type: SearchMinusIcon, selector: "[data-p-icon=\"search-minus\"]" }, { kind: "component", type: SearchPlusIcon, selector: "[data-p-icon=\"search-plus\"]" }, { kind: "component", type: TimesIcon, selector: "[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"] }], animations: [
-            trigger('animation', [
-                transition('void => visible', [style$1({ transform: 'scale(0.7)', opacity: 0 }), animate('{{showTransitionParams}}')]),
-                transition('visible => void', [animate('{{hideTransitionParams}}', style$1({ transform: 'scale(0.7)', opacity: 0 }))])
-            ])
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: RefreshIcon, selector: "[data-p-icon=\"refresh\"]" }, { kind: "component", type: EyeIcon, selector: "[data-p-icon=\"eye\"]" }, { kind: "component", type: UndoIcon, selector: "[data-p-icon=\"undo\"]" }, { kind: "component", type: SearchMinusIcon, selector: "[data-p-icon=\"search-minus\"]" }, { kind: "component", type: SearchPlusIcon, selector: "[data-p-icon=\"search-plus\"]" }, { kind: "component", type: TimesIcon, selector: "[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: i3.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: i3.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: "20.3.4", ngImport: i0, type: Image, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Image, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-image',
                     standalone: true,
-                    imports: [CommonModule, RefreshIcon, EyeIcon, UndoIcon, SearchMinusIcon, SearchPlusIcon, TimesIcon, FocusTrap, SharedModule, BindModule],
+                    imports: [CommonModule, RefreshIcon, EyeIcon, UndoIcon, SearchMinusIcon, SearchPlusIcon, TimesIcon, FocusTrap, SharedModule, BindModule, MotionModule],
                     template: `
         <ng-container *ngIf="!imageTemplate && !_imageTemplate">
             <img
@@ -587,69 +625,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 <svg data-p-icon="eye" [class]="cx('previewIcon')" [pBind]="ptm('previewIcon')" />
             </ng-template>
         </button>
-        <div #mask [class]="cx('mask')" *ngIf="maskVisible" [attr.aria-modal]="maskVisible" role="dialog" (click)="onMaskClick()" (keydown)="onMaskKeydown($event)" pFocusTrap [pBind]="ptm('mask')">
-            <div [class]="cx('toolbar')" (click)="handleToolbarClick($event)" [pBind]="ptm('toolbar')">
-                <button [class]="cx('rotateRightButton')" (click)="rotateRight()" type="button" [attr.aria-label]="rightAriaLabel()" [pBind]="ptm('rotateRightButton')">
-                    <svg data-p-icon="refresh" *ngIf="!rotateRightIconTemplate && !_rotateRightIconTemplate" />
-                    <ng-template *ngTemplateOutlet="rotateRightIconTemplate || _rotateRightIconTemplate"></ng-template>
-                </button>
-                <button [class]="cx('rotateLeftButton')" (click)="rotateLeft()" type="button" [attr.aria-label]="leftAriaLabel()" [pBind]="ptm('rotateLeftButton')">
-                    <svg data-p-icon="undo" *ngIf="!rotateLeftIconTemplate && !_rotateLeftIconTemplate" />
-                    <ng-template *ngTemplateOutlet="rotateLeftIconTemplate || _rotateLeftIconTemplate"></ng-template>
-                </button>
-                <button [class]="cx('zoomOutButton')" (click)="zoomOut()" type="button" [disabled]="isZoomOutDisabled" [attr.aria-label]="zoomOutAriaLabel()" [pBind]="ptm('zoomOutButton')">
-                    <svg data-p-icon="search-minus" *ngIf="!zoomOutIconTemplate && !_zoomOutIconTemplate" />
-                    <ng-template *ngTemplateOutlet="zoomOutIconTemplate || _zoomOutIconTemplate"></ng-template>
-                </button>
-                <button [class]="cx('zoomInButton')" (click)="zoomIn()" type="button" [disabled]="isZoomInDisabled" [attr.aria-label]="zoomInAriaLabel()" [pBind]="ptm('zoomInButton')">
-                    <svg data-p-icon="search-plus" *ngIf="!zoomInIconTemplate && !_zoomInIconTemplate" />
-                    <ng-template *ngTemplateOutlet="zoomInIconTemplate || _zoomInIconTemplate"></ng-template>
-                </button>
-                <button [class]="cx('closeButton')" type="button" (click)="closePreview()" [attr.aria-label]="closeAriaLabel()" #closeButton [pBind]="ptm('closeButton')">
-                    <svg data-p-icon="times" *ngIf="!closeIconTemplate && !_closeIconTemplate" />
-                    <ng-template *ngTemplateOutlet="closeIconTemplate || _closeIconTemplate"></ng-template>
-                </button>
-            </div>
+        @if (renderMask()) {
             <div
-                *ngIf="previewVisible"
-                [@animation]="{
-                    value: 'visible',
-                    params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
-                }"
-                (@animation.start)="onAnimationStart($event)"
-                (@animation.done)="onAnimationEnd($event)"
+                #mask
+                [class]="cx('mask')"
+                [attr.aria-modal]="maskVisible"
+                role="dialog"
+                (click)="onMaskClick()"
+                (keydown)="onMaskKeydown($event)"
+                pFocusTrap
+                [pBind]="ptm('mask')"
+                [pMotion]="maskVisible"
+                [pMotionAppear]="true"
+                [pMotionEnterActiveClass]="'p-overlay-mask-enter-active'"
+                [pMotionLeaveActiveClass]="'p-overlay-mask-leave-active'"
+                [pMotionOptions]="computedMaskMotionOptions()"
+                (pMotionOnAfterLeave)="onMaskAfterLeave()"
             >
-                <ng-container *ngIf="!previewTemplate && !_previewTemplate">
-                    <img
-                        [attr.src]="previewImageSrc ? previewImageSrc : src"
-                        [attr.srcset]="previewImageSrcSet"
-                        [attr.sizes]="previewImageSizes"
-                        [class]="cx('original')"
-                        [ngStyle]="imagePreviewStyle()"
-                        (click)="onPreviewImageClick()"
-                        [pBind]="ptm('original')"
-                    />
-                </ng-container>
-                <ng-container
-                    *ngTemplateOutlet="
-                        previewTemplate || _previewTemplate;
-                        context: {
-                            class: cx('original'),
-                            style: imagePreviewStyle(),
-                            previewCallback: onPreviewImageClick.bind(this)
-                        }
-                    "
-                >
-                </ng-container>
+                <div [class]="cx('toolbar')" (click)="handleToolbarClick($event)" [pBind]="ptm('toolbar')">
+                    <button [class]="cx('rotateRightButton')" (click)="rotateRight()" type="button" [attr.aria-label]="rightAriaLabel()" [pBind]="ptm('rotateRightButton')">
+                        <svg data-p-icon="refresh" *ngIf="!rotateRightIconTemplate && !_rotateRightIconTemplate" />
+                        <ng-template *ngTemplateOutlet="rotateRightIconTemplate || _rotateRightIconTemplate"></ng-template>
+                    </button>
+                    <button [class]="cx('rotateLeftButton')" (click)="rotateLeft()" type="button" [attr.aria-label]="leftAriaLabel()" [pBind]="ptm('rotateLeftButton')">
+                        <svg data-p-icon="undo" *ngIf="!rotateLeftIconTemplate && !_rotateLeftIconTemplate" />
+                        <ng-template *ngTemplateOutlet="rotateLeftIconTemplate || _rotateLeftIconTemplate"></ng-template>
+                    </button>
+                    <button [class]="cx('zoomOutButton')" (click)="zoomOut()" type="button" [disabled]="isZoomOutDisabled" [attr.aria-label]="zoomOutAriaLabel()" [pBind]="ptm('zoomOutButton')">
+                        <svg data-p-icon="search-minus" *ngIf="!zoomOutIconTemplate && !_zoomOutIconTemplate" />
+                        <ng-template *ngTemplateOutlet="zoomOutIconTemplate || _zoomOutIconTemplate"></ng-template>
+                    </button>
+                    <button [class]="cx('zoomInButton')" (click)="zoomIn()" type="button" [disabled]="isZoomInDisabled" [attr.aria-label]="zoomInAriaLabel()" [pBind]="ptm('zoomInButton')">
+                        <svg data-p-icon="search-plus" *ngIf="!zoomInIconTemplate && !_zoomInIconTemplate" />
+                        <ng-template *ngTemplateOutlet="zoomInIconTemplate || _zoomInIconTemplate"></ng-template>
+                    </button>
+                    <button [class]="cx('closeButton')" type="button" (click)="closePreview()" [attr.aria-label]="closeAriaLabel()" #closeButton [pBind]="ptm('closeButton')">
+                        <svg data-p-icon="times" *ngIf="!closeIconTemplate && !_closeIconTemplate" />
+                        <ng-template *ngTemplateOutlet="closeIconTemplate || _closeIconTemplate"></ng-template>
+                    </button>
+                </div>
+                @if (renderPreview()) {
+                    <p-motion [visible]="previewVisible" name="p-image-original" [appear]="true" [options]="computedMotionOptions()" (onBeforeEnter)="onAnimationStart($event)" (onBeforeLeave)="onBeforeLeave()" (onAfterLeave)="onAnimationEnd($event)">
+                        <ng-container *ngIf="!previewTemplate && !_previewTemplate">
+                            <img
+                                [attr.src]="previewImageSrc ? previewImageSrc : src"
+                                [attr.srcset]="previewImageSrcSet"
+                                [attr.sizes]="previewImageSizes"
+                                [class]="cx('original')"
+                                [ngStyle]="imagePreviewStyle()"
+                                (click)="onPreviewImageClick()"
+                                [pBind]="ptm('original')"
+                            />
+                        </ng-container>
+                        <ng-container
+                            *ngTemplateOutlet="
+                                previewTemplate || _previewTemplate;
+                                context: {
+                                    class: cx('original'),
+                                    style: imagePreviewStyle(),
+                                    previewCallback: onPreviewImageClick.bind(this)
+                                }
+                            "
+                        >
+                        </ng-container>
+                    </p-motion>
+                }
             </div>
-        </div>
+        }
     `,
-                    animations: [
-                        trigger('animation', [
-                            transition('void => visible', [style$1({ transform: 'scale(0.7)', opacity: 0 }), animate('{{showTransitionParams}}')]),
-                            transition('visible => void', [animate('{{hideTransitionParams}}', style$1({ transform: 'scale(0.7)', opacity: 0 }))])
-                        ])
-                    ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     providers: [ImageStyle, { provide: IMAGE_INSTANCE, useExisting: Image }, { provide: PARENT_INSTANCE, useExisting: Image }],
@@ -658,7 +701,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                     },
                     hostDirectives: [Bind]
                 }]
-        }], ctorParameters: () => [], propDecorators: { imageClass: [{
+        }], propDecorators: { imageClass: [{
                 type: Input
             }], imageStyle: [{
                 type: Input
@@ -691,7 +734,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], hideTransitionOptions: [{
                 type: Input
-            }], onShow: [{
+            }], 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: Output
             }], onHide: [{
                 type: Output
@@ -735,14 +778,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: [PrimeTemplate]
             }], onKeydownHandler: [{
                 type: HostListener,
-                args: ['document:keydown.escape', ['$event']]
+                args: ['document:keydown.escape']
             }] } });
 class ImageModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ImageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: ImageModule, imports: [Image, SharedModule], exports: [Image, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ImageModule, imports: [Image, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ImageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: ImageModule, imports: [Image, SharedModule], exports: [Image, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ImageModule, imports: [Image, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ImageModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ImageModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Image, SharedModule],