Create expandable row for holding parent information (ETF)

libs/ui/src/lib/top-holdings/top-holdings.component.html

@@ -5,6 +5,7 @@
     matSort
     matSortActive="allocationInPercentage"
     matSortDirection="desc"
+    multiTemplateDataRows
     [dataSource]="dataSource"
   >
     <ng-container matColumnDef="name">
@@ -57,8 +58,50 @@
       </td>
     </ng-container>
 
+    <ng-container matColumnDef="expandedDetail">
+      <td
+        *matCellDef="let element"
+        mat-cell
+        [attr.colspan]="displayedColumns.length"
+      >
+        <div
+          [@detailExpand]="element.expand ? 'expanded' : 'collapsed'"
+          class="allocationByParent"
+        >
+          <div class="holdingParents">
+            <mat-list>
+              @for (parentHolding of element.parents; track parentHolding) {
+                <mat-list-item>
+                  <span matListItemTitle style="font-size: inherit"
+                    >{{ parentHolding.name }}:</span
+                  >
+                  <span matListItemMeta>
+                    {{
+                      parentHolding.allocationInPercentage | number: '1.0-2'
+                    }}%
+                  </span>
+                </mat-list-item>
+              }
+            </mat-list>
+          </div>
+        </div>
+      </td>
+    </ng-container>
+
     <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
-    <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
+    <tr
+      *matRowDef="let element; columns: displayedColumns"
+      mat-row
+      [class.example-expanded-row]="element.expand ?? false"
+      (click)="
+        element.expand ? (element.expand = false) : (element.expand = true)
+      "
+    ></tr>
+    <tr
+      *matRowDef="let row; columns: ['expandedDetail']"
+      class="holding-detail"
+      mat-row
+    ></tr>
   </table>
 </div>
 

libs/ui/src/lib/top-holdings/top-holdings.component.scss

@@ -1,6 +1,10 @@
 :host {
   display: block;
 
+  tr.holding-detail {
+    height: 0;
+  }
+
   .gf-table {
     th {
       ::ng-deep {

libs/ui/src/lib/top-holdings/top-holdings.component.ts

@@ -1,7 +1,14 @@
 import { getLocale } from '@ghostfolio/common/helper';
-import { Holding } from '@ghostfolio/common/interfaces';
+import { HoldingWithParents } from '@ghostfolio/common/interfaces';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
+import {
+  animate,
+  state,
+  style,
+  transition,
+  trigger
+} from '@angular/animations';
 import { CommonModule } from '@angular/common';
 import {
   CUSTOM_ELEMENTS_SCHEMA,
@@ -13,6 +20,7 @@ import {
   ViewChild
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { MatListModule } from '@angular/material/list';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
@@ -29,8 +37,19 @@ import { Subject } from 'rxjs';
     MatPaginatorModule,
     MatSortModule,
     MatTableModule,
+    MatListModule,
     NgxSkeletonLoaderModule
   ],
+  animations: [
+    trigger('detailExpand', [
+      state('collapsed,void', style({ height: '0px', minHeight: '0' })),
+      state('expanded', style({ height: '*' })),
+      transition(
+        'expanded <=> collapsed',
+        animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')
+      )
+    ])
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-top-holdings',
   standalone: true,
@@ -41,12 +60,12 @@ export class GfTopHoldingsComponent implements OnChanges, OnDestroy {
   @Input() baseCurrency: string;
   @Input() locale = getLocale();
   @Input() pageSize = Number.MAX_SAFE_INTEGER;
-  @Input() topHoldings: Holding[];
+  @Input() topHoldings: HoldingWithParents[];
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
-  public dataSource = new MatTableDataSource<Holding>();
+  public dataSource = new MatTableDataSource<HoldingWithParents>();
   public displayedColumns: string[] = [
     'name',
     'valueInBaseCurrency',