[ACS-6831] Property panel refactoring (#9372)

* [ACS-6831] Refactor property panel feature to mitigate bugs and increase code quality

* [ACS-6831] Introduce new interace for metadata panel

* ACS-6831 Corrected tests

* ACS-6831 Fixed unit tests

* ACS-6831 Fixed unit tests

* ACS-6831 Cleaning code

* ACS-6831 Added tests

* ACS-6831 Replaced fdescribe with describe

* [ACS-6831] Use default properties enum, fix editing state

* [ACS-6831] Expand correct section based on displayAspect property

* [ACS-6831] Lint fix

---------

Co-authored-by: Aleksander Sklorz <[email protected]>

docs/content-services/interfaces/content-metadata-custom-panel.interface.md

@@ -12,8 +12,7 @@ Specifies required properties for custom metadata panel to be displayed in [Cont
 ## Basic usage
 
 ```ts
-export interface ContentMetadataCustomPanel {
-    panelTitle: string;
+export interface ContentMetadataCustomPanel extends ContentMetadataPanel {
     component: string;
 }
 ```
@@ -22,10 +21,10 @@ export interface ContentMetadataCustomPanel {
 
 | Name | Type | Default value | Description |
 | ---- | ---- | ------------- | ----------- |
-| panelTitle | `string` |  | Title for the panel the will be displayed in expansion panel header. |
 | component | `string` |  | Id of the registered [Dynamic component](../../extensions/components/dynamic.component.md) to be displayed inside expansion panel. |
 
 ## See also
 
 -   [ContentMetadataCardComponent](../components/content-metadata-card.component.md)
 -   [Dynamic Component](../../extensions/components/dynamic.component.md)
+-   [Content Metadata Panel intergace](./content-metadata-panel.interface.md)

docs/content-services/interfaces/content-metadata-panel.interface.md

@@ -0,0 +1,32 @@
+---
+Title: Content Metadata Panel interface
+Added: v6.7.0
+Status: Active
+Last reviewed: 2024-02-22
+---
+
+# [Content Metadata Panel interface](../../../lib/content-services/src/lib/content-metadata/interfaces/content-metadata-panel.interface.ts "Defined in content-metadata-panel.interface.ts")
+
+Specifies required properties for metadata panel to be displayed in [ContentMetadataCardComponent](../components/content-metadata-card.component.md).
+
+## Basic usage
+
+```ts
+export interface ContentMetadataPanel {
+    panelTitle: string;
+    expanded?: boolean;
+}
+```
+
+### Properties
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| panelTitle | `string` |  | Title for the panel the will be displayed in expansion panel header. |
+| expanded | `boolean` |  | Specifies if given panel is expanded. |
+
+## See also
+
+-   [ContentMetadataCardComponent](../components/content-metadata-card.component.md)
+-   [Dynamic Component](../../extensions/components/dynamic.component.md)
+-   [Content Metadata Custom panel interface](./content-metadata-custom-panel.interface.md)

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata-header.component.ts

@@ -31,10 +31,13 @@ import { TranslateModule } from '@ngx-translate/core';
             adf-content-metadata-header {
                 display: flex;
                 align-items: center;
-                flex: 1;
+                width: 100%;
             }
 
             .adf-metadata-properties-title {
+                display: block;
+                overflow: hidden;
+                text-overflow: ellipsis;
                 font-weight: 700;
                 font-size: 15px;
                 padding-left: 12px;
@@ -44,7 +47,7 @@ import { TranslateModule } from '@ngx-translate/core';
     template: `
         <ng-container>
             <mat-icon>{{ expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>
-            <mat-panel-title *ngIf="title" class="adf-metadata-properties-title">{{ title | translate }}</mat-panel-title>
+            <mat-panel-title *ngIf="title" class="adf-metadata-properties-title" [title]="title | translate">{{ title | translate }}</mat-panel-title>
             <ng-content></ng-content>
         </ng-container>
     `