[ADF-2504] Add read-only mode for the content meta-data component (#3089)

* Add read-only mode for the content meta-data component

* Multi parameter

* Fix input param name

docs/content-services/content-metadata.component.md

@@ -27,6 +27,8 @@ The different aspects and their properties to be shown can be configured as appl
 | --- | --- | --- | --- |
 | node | MinimalNodeEntryEntity | - | (**required**) The node entity to fetch metadata about |
 | displayEmpty | boolean | false | Display empty values in card view or not |
+| readOnly | boolean | true | Whether the edit button to be shown or not |
+| multi | boolean | false | multi parameter of the underlying material expansion panel |
 | preset | string | "*" | The metadata preset's name, which defines aspects and their properties |
 
 ## Details

lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.html

@@ -5,12 +5,13 @@
             [displayEmpty]="displayEmpty"
             [editable]="editable"
             [expanded]="expanded"
+            [multi]="multi"
             [preset]="preset">
         </adf-content-metadata>
     </mat-card-content>
     <mat-card-footer class="adf-content-metadata-card-footer" fxLayout="row" fxLayoutAlign="space-between stretch">
         <div>
-            <button mat-icon-button (click)="toggleEdit()" data-automation-id="mata-data-card-toggle-edit">
+            <button *ngIf="!readOnly" mat-icon-button (click)="toggleEdit()" data-automation-id="mata-data-card-toggle-edit">
                 <mat-icon>mode_edit</mat-icon>
             </button>
         </div>

lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.spec.ts

@@ -114,6 +114,14 @@ describe('ContentMetadataCardComponent', () => {
         expect(contentMetadataComponent.editable).toBe(true);
     });
 
+    it('should pass through the multi to the underlying component', () => {
+        component.multi = true;
+        fixture.detectChanges();
+        const contentMetadataComponent = fixture.debugElement.query(By.directive(ContentMetadataComponent)).componentInstance;
+
+        expect(contentMetadataComponent.multi).toBe(true);
+    });
+
     it('should pass through the expanded to the underlying component', () => {
         component.expanded = true;
         fixture.detectChanges();
@@ -170,4 +178,17 @@ describe('ContentMetadataCardComponent', () => {
 
         expect(buttonLabel.nativeElement.innerText.trim()).toBe('ADF_VIEWER.SIDEBAR.METADATA.LESS_INFORMATION');
     });
+
+    it('should show the edit button by default', () => {
+        const button = fixture.debugElement.query(By.css('[data-automation-id="mata-data-card-toggle-edit"]'));
+        expect(button).not.toBeNull();
+    });
+
+    it('should hode the edit button in readOnly is true', () => {
+        component.readOnly = true;
+        fixture.detectChanges();
+
+        const button = fixture.debugElement.query(By.css('[data-automation-id="mata-data-card-toggle-edit"]'));
+        expect(button).toBeNull();
+    });
 });

lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.ts

@@ -35,6 +35,12 @@ export class ContentMetadataCardComponent {
     @Input()
     preset: string;
 
+    @Input()
+    readOnly = false;
+
+    @Input()
+    multi = false;
+
     editable: boolean = false;
     expanded: boolean = false;
 

lib/content-services/content-metadata/components/content-metadata/content-metadata.component.html

@@ -1,5 +1,5 @@
 <div class="adf-metadata-properties">
-    <mat-accordion displayMode="flat">
+    <mat-accordion displayMode="flat" [multi]="multi">
         <mat-expansion-panel [expanded]="!expanded" [hideToggle]="!expanded">
             <mat-expansion-panel-header>
                 <mat-panel-title>

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

@@ -44,6 +44,9 @@ export class ContentMetadataComponent implements OnChanges, OnInit {
     @Input()
     expanded: boolean = false;
 
+    @Input()
+    multi = false;
+
     @Input()
     preset: string;