fix(treeview): corrige abertura dentro de um page-slide

Corrige comportamento de abertura do tree view dentro de um page slide.

fixed: DTHFUI-8973

Author: jcorrea97

projects/ui/src/lib/components/po-tree-view/po-tree-view-item/po-tree-view-item.component.html

@@ -9,14 +9,16 @@
   >
   </po-tree-view-item-header>
 
-  <ul *ngIf="hasSubItems" class="po-tree-view-item-group" [@toggleBody]="item.expanded ? 'expanded' : 'collapsed'">
-    <po-tree-view-item
-      *ngFor="let subItem of item.subItems; trackBy: trackByFunction"
-      [p-item]="subItem"
-      [p-selectable]="selectable"
-      [p-single-select]="singleSelect"
-      [p-selected-value]="selectedValue"
-    >
-    </po-tree-view-item>
+  <ul *ngIf="hasSubItems" class="po-tree-view-item-group">
+    <div *ngIf="item.expanded" @toggleBody>
+      <po-tree-view-item
+        *ngFor="let subItem of item.subItems; trackBy: trackByFunction"
+        [p-item]="subItem"
+        [p-selectable]="selectable"
+        [p-single-select]="singleSelect"
+        [p-selected-value]="selectedValue"
+      >
+      </po-tree-view-item>
+    </div>
   </ul>
 </li>

projects/ui/src/lib/components/po-tree-view/po-tree-view-item/po-tree-view-item.component.ts

@@ -10,24 +10,25 @@ import { PoTreeViewService } from '../services/po-tree-view.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [
     trigger('toggleBody', [
-      state(
-        'collapsed',
+      transition(':enter', [
         style({
           'overflow-y': 'hidden',
           visibility: 'hidden',
           opacity: 0,
           height: '0'
-        })
-      ),
-      transition('expanded => collapsed', [
-        style({ height: '*' }),
-        animate(100, style({ opacity: 0 })),
-        animate(200, style({ height: 0 }))
+        }),
+        animate(200, style({ height: '*' })),
+        animate(100, style({ opacity: 1 }))
       ]),
-      transition('collapsed => expanded', [
-        style({ height: '0' }),
-        animate(100, style({ opacity: 1 })),
-        animate(200, style({ height: '*' }))
+      transition(':leave', [
+        style({
+          'overflow-y': 'hidden',
+          visibility: 'visible',
+          opacity: 1,
+          height: '*'
+        }),
+        animate(200, style({ height: 0 })),
+        animate(100, style({ opacity: 0 }))
       ])
     ])
   ]