Fixed #11617 - PrimeNG component animation trigger warnings since upd…

…ating Angular to 14.x

src/app/components/accordion/accordion.css

@@ -13,4 +13,12 @@
 
 .p-accordion-header-text {
     line-height: 1;
+}
+
+.p-accordion-tab-active .p-toggleable-content:not(.ng-animating) {
+    overflow: visible;
+}
+
+.p-accordion .p-toggleable-content{
+    overflow: hidden;
 }

src/app/components/accordion/accordion.ts

@@ -36,13 +36,12 @@ let idx: number = 0;
     animations: [
         trigger('tabContent', [
             state('hidden', style({
-                height: '0',
-                overflow: 'hidden'
+                height: '0'
             })),
             state('visible', style({
                 height: '*'
             })),
-            transition('visible <=> hidden', [style({overflow: 'hidden'}), animate('{{transitionParams}}')]),
+            transition('visible <=> hidden', [animate('{{transitionParams}}')]),
             transition('void => *', animate(0))
         ])
     ],

src/app/components/fieldset/fieldset.css

@@ -14,4 +14,12 @@
 
 .p-fieldset-legend-text {
     line-height: 1;
+}
+
+.p-fieldset-expanded .p-toggleable-content:not(.ng-animating) {
+    overflow: visible;
+}
+
+.p-fieldset .p-toggleable-content{
+    overflow: hidden;
 }

src/app/components/fieldset/fieldset.ts

@@ -10,7 +10,7 @@ let idx: number = 0;
 @Component({
     selector: 'p-fieldset',
     template: `
-        <fieldset [attr.id]="id" [ngClass]="{'p-fieldset p-component': true, 'p-fieldset-toggleable': toggleable}" [ngStyle]="style" [class]="styleClass">
+        <fieldset [attr.id]="id" [ngClass]="{'p-fieldset p-component': true, 'p-fieldset-toggleable': toggleable, 'p-fieldset-expanded': !collapsed && toggleable}" [ngStyle]="style" [class]="styleClass">
             <legend class="p-fieldset-legend">
                 <ng-container *ngIf="toggleable; else legendContent">
                     <a tabindex="0" (click)="toggle($event)" (keydown.enter)="toggle($event)" [attr.aria-controls]="id + '-content'" [attr.aria-expanded]="!collapsed" pRipple>
@@ -37,13 +37,12 @@ let idx: number = 0;
     animations: [
         trigger('fieldsetContent', [
             state('hidden', style({
-                height: '0',
-                overflow: 'hidden'
+                height: '0'
             })),
             state('visible', style({
                 height: '*'
             })),
-            transition('visible <=> hidden', [style({overflow: 'hidden'}), animate('{{transitionParams}}')]),
+            transition('visible <=> hidden', [animate('{{transitionParams}}')]),
             transition('void => *', animate(0))
         ])
     ],

src/app/components/messages/messages.css

@@ -13,4 +13,8 @@
     margin-left: auto;
     overflow: hidden;
     position: relative;
+}
+
+.p-messages .p-message.ng-animating {
+    overflow: hidden;
 }

src/app/components/messages/messages.ts

@@ -1,16 +1,16 @@
-import {NgModule,Component,OnDestroy,Input,Output,EventEmitter,AfterContentInit,Optional,ElementRef,ChangeDetectionStrategy,ContentChildren,QueryList,TemplateRef, ViewEncapsulation, ChangeDetectorRef} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {trigger,state,style,transition,animate} from '@angular/animations';
-import {Message,PrimeTemplate,MessageService} from 'primeng/api';
-import {Subscription} from 'rxjs';
-import {RippleModule} from 'primeng/ripple';
+import { NgModule, Component, OnDestroy, Input, Output, EventEmitter, AfterContentInit, Optional, ElementRef, ChangeDetectionStrategy, ContentChildren, QueryList, TemplateRef, ViewEncapsulation, ChangeDetectorRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { trigger, style, transition, animate } from '@angular/animations';
+import { Message, PrimeTemplate, MessageService } from 'primeng/api';
+import { Subscription } from 'rxjs';
+import { RippleModule } from 'primeng/ripple';
 
 @Component({
     selector: 'p-messages',
     template: `
         <div class="p-messages p-component" role="alert" [ngStyle]="style" [class]="styleClass">
             <ng-container *ngIf="!contentTemplate; else staticMessage">
-                <div *ngFor="let msg of value; let i=index" [ngClass]="'p-message p-message-' + msg.severity" role="alert"
+                <div *ngFor="let msg of value; let i=index" [class]="'p-message p-message-' + msg.severity" role="alert"
                     [@messageAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}">
                     <div class="p-message-wrapper">
                        <span [class]="'p-message-icon pi' + (msg.icon ? ' ' + msg.icon : '')" [ngClass]="{'pi-info-circle': msg.severity === 'info',
@@ -43,11 +43,11 @@ import {RippleModule} from 'primeng/ripple';
     animations: [
         trigger('messageAnimation', [
             transition(':enter', [
-                style({opacity: 0, transform: 'translateY(-25%)'}),
+                style({ opacity: 0, transform: 'translateY(-25%)' }),
                 animate('{{showTransitionParams}}')
             ]),
             transition(':leave', [
-                animate('{{hideTransitionParams}}', style({ height: 0, marginTop: 0, marginBottom: 0, marginLeft: 0, marginRight: 0, overflow: 'hidden', opacity: 0 }))
+                animate('{{hideTransitionParams}}', style({ height: 0, marginTop: 0, marginBottom: 0, marginLeft: 0, marginRight: 0, opacity: 0 }))
             ])
         ])
     ],
@@ -90,18 +90,18 @@ export class Messages implements AfterContentInit, OnDestroy {
 
     contentTemplate: TemplateRef<any>;
 
-    constructor(@Optional() public messageService: MessageService, public el: ElementRef, public cd: ChangeDetectorRef) {}
+    constructor(@Optional() public messageService: MessageService, public el: ElementRef, public cd: ChangeDetectorRef) { }
 
     ngAfterContentInit() {
         this.templates.forEach((item) => {
-            switch(item.getType()) {
+            switch (item.getType()) {
                 case 'content':
                     this.contentTemplate = item.template;
-                break;
+                    break;
 
                 default:
                     this.contentTemplate = item.template;
-                break;
+                    break;
             }
         });
 
@@ -158,26 +158,26 @@ export class Messages implements AfterContentInit, OnDestroy {
         const severity = this.severity || (this.hasMessages() ? this.value[0].severity : null);
 
         if (this.hasMessages()) {
-            switch(severity) {
+            switch (severity) {
                 case 'success':
                     return 'pi-check';
-                break;
+                    break;
 
                 case 'info':
                     return 'pi-info-circle';
-                break;
+                    break;
 
                 case 'error':
                     return 'pi-times';
-                break;
+                    break;
 
                 case 'warn':
                     return 'pi-exclamation-triangle';
-                break;
+                    break;
 
                 default:
                     return 'pi-info-circle';
-                break;
+                    break;
             }
         }
 
@@ -196,7 +196,7 @@ export class Messages implements AfterContentInit, OnDestroy {
 }
 
 @NgModule({
-    imports: [CommonModule,RippleModule],
+    imports: [CommonModule, RippleModule],
     exports: [Messages],
     declarations: [Messages]
 })

src/app/components/panel/panel.css

@@ -16,4 +16,12 @@
     text-decoration: none;
     overflow: hidden;
     position: relative;
+}
+
+.p-panel-expanded .p-toggleable-content:not(.ng-animating) {
+    overflow: visible;
+}
+
+.p-panel .p-toggleable-content{
+    overflow: hidden;
 }

src/app/components/panel/panel.ts

@@ -10,7 +10,7 @@ let idx: number = 0;
 @Component({
     selector: 'p-panel',
     template: `
-        <div [attr.id]="id" [ngClass]="{'p-panel p-component': true, 'p-panel-toggleable': toggleable}" [ngStyle]="style" [class]="styleClass">
+        <div [attr.id]="id" [ngClass]="{'p-panel p-component': true, 'p-panel-toggleable': toggleable, 'p-panel-expanded': !collapsed && toggleable}" [ngStyle]="style" [class]="styleClass">
             <div class="p-panel-header" *ngIf="showHeader" (click)="onHeaderClick($event)" [attr.id]="id + '-titlebar'">
                 <span class="p-panel-title" *ngIf="header" [attr.id]="id + '_header'">{{header}}</span>
                 <ng-content select="p-header"></ng-content>
@@ -40,16 +40,15 @@ let idx: number = 0;
     animations: [
         trigger('panelContent', [
             state('hidden', style({
-                height: '0',
-                overflow: 'hidden'
+                height: '0'
             })),
             state('void', style({
                 height: '{{height}}'
             }), {params: {height: '0'}}),
             state('visible', style({
                 height: '*'
             })),
-            transition('visible <=> hidden', [style({ overflow: 'hidden'}), animate('{{transitionParams}}')]),
+            transition('visible <=> hidden', [animate('{{transitionParams}}')]),
             transition('void => hidden', animate('{{transitionParams}}')),
             transition('void => visible', animate('{{transitionParams}}'))
         ])

src/app/components/panelmenu/panelmenu.css

@@ -27,4 +27,14 @@
 
 .p-panelmenu .p-menuitem-text {
     line-height: 1;
+}
+
+.p-panelmenu-expanded.p-toggleable-content:not(.ng-animating),
+.p-panelmenu .p-submenu-expanded:not(.ng-animating) {
+    overflow: visible;
+}
+
+.p-panelmenu .p-toggleable-content,
+.p-panelmenu .p-submenu-list {
+    overflow: hidden;
 }

src/app/components/panelmenu/panelmenu.ts

@@ -35,7 +35,7 @@ export class BasePanelMenuItem {
 @Component({
     selector: 'p-panelMenuSub',
     template: `
-        <ul [ngClass]="{'p-submenu-list': true, 'p-panelmenu-root-submenu': root}" [@submenu]="expanded ? {value: 'visible', params: {transitionParams: transitionOptions, height: '*'}} : {value: 'hidden', params: {transitionParams: transitionOptions, height: '0'}}" role="tree">
+        <ul [ngClass]="{'p-submenu-list': true, 'p-panelmenu-root-submenu': root, 'p-submenu-expanded': expanded}" [@submenu]="expanded ? {value: 'visible', params: {transitionParams: transitionOptions, height: '*'}} : {value: 'hidden', params: {transitionParams: transitionOptions, height: '0'}}" role="tree">
             <ng-template ngFor let-child [ngForOf]="item.items">
                 <li *ngIf="child.separator" class="p-menu-separator" role="separator">
                 <li *ngIf="!child.separator" class="p-menuitem" [ngClass]="child.styleClass" [class.p-hidden]="child.visible === false" [ngStyle]="child.style" pTooltip [tooltipOptions]="child.tooltipOptions">
@@ -66,13 +66,12 @@ export class BasePanelMenuItem {
     animations: [
         trigger('submenu', [
             state('hidden', style({
-                height: '0',
-                overflow: 'hidden'
+                height: '0'
             })),
             state('visible', style({
                 height: '*'
             })),
-            transition('visible <=> hidden', [style({overflow: 'hidden'}), animate('{{transitionParams}}')]),
+            transition('visible <=> hidden', [animate('{{transitionParams}}')]),
             transition('void => *', animate(0))
         ])
     ],
@@ -143,7 +142,7 @@ export class PanelMenuSub extends BasePanelMenuItem {
                             <span class="p-menuitem-badge" *ngIf="item.badge" [ngClass]="item.badgeStyleClass">{{item.badge}}</span>
                         </a>
                     </div>
-                    <div *ngIf="item.items" class="p-toggleable-content" [@rootItem]="item.expanded ? {value: 'visible', params: {transitionParams: animating ? transitionOptions : '0ms', height: '*'}} : {value: 'hidden', params: {transitionParams: transitionOptions, height: '0'}}"  (@rootItem.done)="onToggleDone()">
+                    <div *ngIf="item.items" class="p-toggleable-content" [ngClass]="{'p-panelmenu-expanded': item.expanded}"  [@rootItem]="item.expanded ? {value: 'visible', params: {transitionParams: animating ? transitionOptions : '0ms', height: '*'}} : {value: 'hidden', params: {transitionParams: transitionOptions, height: '0'}}"  (@rootItem.done)="onToggleDone()">
                         <div class="p-panelmenu-content" role="region" [attr.id]="item.id +'_content' " [attr.aria-labelledby]="item.id +'_header'">
                             <p-panelMenuSub [item]="item" [parentExpanded]="item.expanded" [expanded]="true" [transitionOptions]="transitionOptions" [root]="true"></p-panelMenuSub>
                         </div>
@@ -155,13 +154,12 @@ export class PanelMenuSub extends BasePanelMenuItem {
     animations: [
         trigger('rootItem', [
             state('hidden', style({
-                height: '0',
-                overflow: 'hidden'
+                height: '0'
             })),
             state('visible', style({
                 height: '*'
             })),
-            transition('visible <=> hidden', [style({overflow: 'hidden'}), animate('{{transitionParams}}')]),
+            transition('visible <=> hidden', [animate('{{transitionParams}}')]),
             transition('void => *', animate(0))
         ])
     ],

src/app/showcase/app.menu.component.ts

@@ -126,7 +126,7 @@ declare let gtag: Function;
                     <a [routerLink]=" ['picklist']" routerLinkActive="router-link-exact-active">PickList</a>
                     <div>
                         <a tabindex="0" (click)="toggleSubmenu($event, 'table')">Table </a>
-                        <div [@submenu]="isSubmenuActive('table') ? 'visible': 'hidden'" (@submenu.done)="onAnimationDone()">
+                        <div class="overflow-hidden" [@submenu]="isSubmenuActive('table') ? 'visible': 'hidden'" (@submenu.done)="onAnimationDone()">
                             <ul>
                                 <li><a [routerLink]=" ['table']" routerLinkActive="router-link-exact-active" [routerLinkActiveOptions]="{exact:true}">Documentation</a></li>
                                 <li><a [routerLink]=" ['table/basic']" routerLinkActive="router-link-exact-active" [routerLinkActiveOptions]="{exact:true}">Basic</a></li>
@@ -165,7 +165,7 @@ declare let gtag: Function;
 
                     <div>
                         <a tabindex="0" (click)="toggleSubmenu($event, 'tree')">Tree</a>
-                        <div [@submenu]="isSubmenuActive('tree') ? 'visible': 'hidden'" (@submenu.done)="onAnimationDone()">
+                        <div class="overflow-hidden" [@submenu]="isSubmenuActive('tree') ? 'visible': 'hidden'" (@submenu.done)="onAnimationDone()">
                             <ul>
                                 <li><a [routerLink]=" ['tree']" routerLinkActive="router-link-exact-active" [routerLinkActiveOptions]="{exact:true}">Documentation</a></li>
                                 <li><a [routerLink]=" ['tree/templating']" routerLinkActive="router-link-exact-active" [routerLinkActiveOptions]="{exact:true}">Templating</a></li>
@@ -182,7 +182,7 @@ declare let gtag: Function;
 
                     <div>
                         <a tabindex="0" (click)="toggleSubmenu($event, 'treetable')">TreeTable</a>
-                        <div [@submenu]="isSubmenuActive('treetable') ? 'visible': 'hidden'" (@submenu.done)="onAnimationDone()">
+                        <div class="overflow-hidden" [@submenu]="isSubmenuActive('treetable') ? 'visible': 'hidden'" (@submenu.done)="onAnimationDone()">
                             <ul>
                                 <li><a [routerLink]=" ['treetable']" routerLinkActive="router-link-exact-active" [routerLinkActiveOptions]="{exact:true}">Documentation</a></li>
                                 <li><a [routerLink]=" ['treetable/templating']" routerLinkActive="router-link-exact-active" [routerLinkActiveOptions]="{exact:true}">Templating</a></li>
@@ -277,7 +277,7 @@ declare let gtag: Function;
                     <a [routerLink]=" ['/carousel']" routerLinkActive="router-link-exact-active">Carousel</a>
                     <div>
                         <a tabindex="0" (click)="toggleSubmenu($event, 'galleria')">Galleria</a>
-                        <div [@submenu]="isSubmenuActive('galleria') ? 'visible': 'hidden'" (@submenu.done)="onAnimationDone()">
+                        <div class="overflow-hidden" [@submenu]="isSubmenuActive('galleria') ? 'visible': 'hidden'" (@submenu.done)="onAnimationDone()">
                             <ul>
                                 <li><a [routerLink]=" ['galleria']" routerLinkActive="router-link-exact-active" [routerLinkActiveOptions]="{exact:true}">Documentation</a></li>
                                 <li><a [routerLink]=" ['galleria/programmatic']" routerLinkActive="router-link-exact-active" [routerLinkActiveOptions]="{exact:true}">Programmatic</a></li>
@@ -335,7 +335,6 @@ declare let gtag: Function;
         trigger('submenu', [
             state('hidden', style({
                 height: '0',
-                overflow: 'hidden',
                 opacity: 0,
             })),
             state('visible', style({