wip expanding row for more details for attributes.

see https://stackblitz.com/angular/eaajjobynjkl?file=src%2Fapp%2Ftable-expandable-rows-example.html

see https://material.angular.io/components/table/examples#table-expandable-rows

webapp/frontend/src/app/modules/detail/detail.component.ts

@@ -11,11 +11,19 @@ import {MatDialog} from "@angular/material/dialog";
 import humanizeDuration from 'humanize-duration';
 import {TreoConfigService} from "../../../@treo/services/config";
 import {AppConfig} from "../../core/config/app.config";
+import {animate, state, style, transition, trigger} from '@angular/animations';
 
 @Component({
   selector: 'detail',
   templateUrl: './detail.component.html',
-  styleUrls: ['./detail.component.scss']
+  styleUrls: ['./detail.component.scss'],
+    animations: [
+        trigger('detailExpand', [
+            state('collapsed', style({height: '0px', minHeight: '0'})),
+            state('expanded', style({height: '*'})),
+            transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+        ]),
+    ],
 })
 
 export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
@@ -24,6 +32,7 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
 
     onlyCritical: boolean = true;
     // data: any;
+    expandedAttribute: any | null;
 
     metadata: any;
     device: any;