Merge branch 'master' of https://github.com/primefaces/primeng

Author: mehmetcetin01140

packages/primeng/src/scrolltop/scrolltop.ts

@@ -1,13 +1,13 @@
 import { CommonModule, isPlatformBrowser } from '@angular/common';
-import { ChangeDetectionStrategy, Component, computed, ContentChild, ContentChildren, inject, InjectionToken, input, Input, NgModule, numberAttribute, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, ContentChild, ContentChildren, inject, InjectionToken, input, Input, NgModule, numberAttribute, QueryList, signal, TemplateRef, ViewEncapsulation } from '@angular/core';
 import { MotionEvent, MotionOptions } from '@primeuix/motion';
 import { getWindowScrollTop } from '@primeuix/utils';
 import { PrimeTemplate, SharedModule } from 'primeng/api';
 import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
 import { Bind } from 'primeng/bind';
 import { Button, ButtonProps } from 'primeng/button';
 import { ChevronUpIcon } from 'primeng/icons';
-import { MotionModule } from 'primeng/motion';
+import { MotionDirective } from 'primeng/motion';
 import { ScrollTopPassThrough } from 'primeng/types/scrolltop';
 import { ZIndexUtils } from 'primeng/utils';
 import { ScrollTopStyle } from './style/scrolltopstyle';
@@ -21,10 +21,26 @@ const SCROLLTOP_INSTANCE = new InjectionToken<ScrollTop>('SCROLLTOP_INSTANCE');
 @Component({
     selector: 'p-scrollTop, p-scrolltop, p-scroll-top',
     standalone: true,
-    imports: [CommonModule, ChevronUpIcon, Button, SharedModule, MotionModule],
+    imports: [CommonModule, ChevronUpIcon, Button, SharedModule, MotionDirective],
     template: `
-        <p-motion [visible]="visible" name="p-scrolltop" [options]="computedMotionOptions()" (onBeforeEnter)="onBeforeEnter($event)" (onBeforeLeave)="onBeforeLeave()">
-            <p-button [attr.aria-label]="buttonAriaLabel" (click)="onClick()" [pt]="ptm('pcButton')" [styleClass]="cn(cx('root'), styleClass)" [ngStyle]="style" type="button" [buttonProps]="buttonProps" [unstyled]="unstyled()">
+        @if (render()) {
+            <p-button
+                [pMotion]="visible()"
+                [pMotionAppear]="true"
+                [pMotionName]="'p-scrolltop'"
+                [pMotionOptions]="computedMotionOptions()"
+                (pMotionOnBeforeEnter)="onBeforeEnter($event)"
+                (pMotionOnBeforeLeave)="onBeforeLeave()"
+                (pMotionOnAfterLeave)="onAfterLeave()"
+                [attr.aria-label]="buttonAriaLabel"
+                (click)="onClick()"
+                [pt]="ptm('pcButton')"
+                [styleClass]="cn(cx('root'), styleClass)"
+                [ngStyle]="style"
+                type="button"
+                [buttonProps]="buttonProps"
+                [unstyled]="unstyled()"
+            >
                 <ng-template #icon>
                     <ng-container *ngIf="!iconTemplate && !_iconTemplate">
                         <span *ngIf="_icon" [class]="cn(cx('icon'), _icon)"></span>
@@ -33,7 +49,7 @@ const SCROLLTOP_INSTANCE = new InjectionToken<ScrollTop>('SCROLLTOP_INSTANCE');
                     <ng-template [ngIf]="!icon" *ngTemplateOutlet="iconTemplate || _iconTemplate; context: { styleClass: cx('icon') }"></ng-template>
                 </ng-template>
             </p-button>
-        </p-motion>
+        }
     `,
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
@@ -135,7 +151,9 @@ export class ScrollTop extends BaseComponent<ScrollTopPassThrough> {
 
     parentScrollListener: VoidFunction | null | undefined;
 
-    visible: boolean = false;
+    visible = signal<boolean>(false);
+
+    render = signal<boolean>(false);
 
     overlay: any;
 
@@ -175,10 +193,19 @@ export class ScrollTop extends BaseComponent<ScrollTopPassThrough> {
         this.overlay = null;
     }
 
+    onAfterLeave() {
+        this.render.set(false);
+    }
+
     checkVisibility(scrollY: number) {
-        if (scrollY > this.threshold) this.visible = true;
-        else this.visible = false;
-        this.cd.markForCheck();
+        if (scrollY > this.threshold) {
+            this.visible.set(true);
+            if (!this.render()) {
+                this.render.set(true);
+            }
+        } else {
+            this.visible.set(false);
+        }
     }
 
     bindParentScrollListener() {

packages/primeng/src/toast/style/toaststyle.ts

@@ -5,32 +5,32 @@ const style = /*css*/ `
 ${toast_style}
 /* Animations */
 .p-toast-enter-active {
-    animation: p-toast-enter-animation 450ms cubic-bezier(0, 1, 0, 1);
+    animation: p-toast-enter 0.3s ease-out;
 }
 
 .p-toast-leave-active {
-    animation: p-toast-leave-animation 250ms ease-out;
+    animation: p-toast-leave 0.45s cubic-bezier(0, 0.2, 0, 0.8);
 }
 
 /* Bottom positions - slide down on leave */
 .p-toast.p-toast-bottom-left .p-toast-message.p-toast-leave-active,
 .p-toast.p-toast-bottom-right .p-toast-message.p-toast-leave-active,
 .p-toast.p-toast-bottom-center .p-toast-message.p-toast-leave-active {
-    animation: p-toast-leave-bottom-animation 250ms ease-out;
+    animation: p-toast-leave-bottom 0.45s cubic-bezier(0, 0.2, 0, 0.8);
 }
 
-@keyframes p-toast-enter-animation {
+@keyframes p-toast-enter {
     from {
         opacity: 0;
-        transform: translateY(100%);
+        transform: translateY(50%);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
-@keyframes p-toast-leave-animation {
+@keyframes p-toast-leave {
     from {
         max-height: 1000px;
         opacity: 1;
@@ -44,7 +44,7 @@ ${toast_style}
     }
 }
 
-@keyframes p-toast-leave-bottom-animation {
+@keyframes p-toast-leave-bottom {
     from {
         max-height: 1000px;
         opacity: 1;