[ACS-5281] Allow to change editable of content metadata from parent (#8841)

* ACS-5281 Allow to change editable of content metadata from parent

* ACS-5281 Added empty spaces to import

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

@@ -16,6 +16,7 @@ Displays and edits metadata related to a node.
 -   [Basic Usage](#basic-usage)
 -   [Class members](#class-members)
     -   [Properties](#properties)
+    -   [Events](#events)
 -   [Details](#details)
     -   [Application config presets](#application-config-presets)
     -   [Layout oriented config](#layout-oriented-config)
@@ -51,6 +52,13 @@ Displays and edits metadata related to a node.
 | preset | `string \| `[`PresetConfig`](../../../lib/content-services/src/lib/content-metadata/interfaces/preset-config.interface.ts) |  | (required) Name or configuration of the metadata preset, which defines aspects and their properties. |
 | readOnly | `boolean` | false | (optional) This flag sets the metadata in read only mode preventing changes. |
 | displayDefaultProperties | `boolean` |  | (optional) This flag displays/hides the metadata properties. |
+| editable | `boolean` |  | (optional) This flag toggles editable of content. |
+
+### Events
+
+| Name           | Type                                                                  | Description                                       |
+|----------------|-----------------------------------------------------------------------|---------------------------------------------------|
+| editableChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when content's editable state is changed. |
 
 ## Details
 

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

@@ -37,6 +37,8 @@ describe('ContentMetadataCardComponent', () => {
     const preset = 'custom-preset';
     let nodeAspectService: NodeAspectService = null;
 
+    const getToggleEditButton = () => fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-edit"]'));
+
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [
@@ -150,13 +152,21 @@ describe('ContentMetadataCardComponent', () => {
         component.node.allowableOperations = [AllowableOperationsEnum.UPDATE];
         fixture.detectChanges();
 
-        const button = fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-edit"]'));
+        getToggleEditButton().triggerEventHandler('click', {});
-        button.triggerEventHandler('click', {});
         fixture.detectChanges();
 
         expect(component.editable).toBe(false);
     });
 
+    it('should emit editableChange by clicking on toggle edit button', () => {
+        component.node.allowableOperations = [AllowableOperationsEnum.UPDATE];
+        fixture.detectChanges();
+        spyOn(component.editableChange, 'emit');
+
+        getToggleEditButton().nativeElement.click();
+        expect(component.editableChange.emit).toHaveBeenCalledWith(true);
+    });
+
     it('should toggle expanded by clicking on the button', () => {
         component.expanded = true;
         fixture.detectChanges();
@@ -190,8 +200,7 @@ describe('ContentMetadataCardComponent', () => {
         component.readOnly = true;
         fixture.detectChanges();
 
-        const button = fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-edit"]'));
+        expect(getToggleEditButton()).toBeNull();
-        expect(button).toBeNull();
     });
 
     it('should hide the edit button if node does not have `update` permissions', () => {
@@ -199,8 +208,7 @@ describe('ContentMetadataCardComponent', () => {
         component.node.allowableOperations = null;
         fixture.detectChanges();
 
-        const button = fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-edit"]'));
+        expect(getToggleEditButton()).toBeNull();
-        expect(button).toBeNull();
     });
 
     it('should show the edit button if node does has `update` permissions', () => {
@@ -208,8 +216,7 @@ describe('ContentMetadataCardComponent', () => {
         component.node.allowableOperations = [AllowableOperationsEnum.UPDATE];
         fixture.detectChanges();
 
-        const button = fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-edit"]'));
+        expect(getToggleEditButton()).not.toBeNull();
-        expect(button).not.toBeNull();
     });
 
     it('should expand the card when custom display aspect is valid', () => {

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { Node } from '@alfresco/js-api';
 import { NodeAspectService } from '../../../aspect-list/services/node-aspect.service';
 import { PresetConfig } from '../../interfaces/content-metadata.interfaces';
@@ -74,6 +74,14 @@ export class ContentMetadataCardComponent implements OnChanges {
     @Input()
     multi = false;
 
+    /** (optional) This flag toggles editable of content. **/
+    @Input()
+    editable = false;
+
+    /** Emitted when content's editable state is changed. **/
+    @Output()
+    editableChange = new EventEmitter<boolean>();
+
     private _displayDefaultProperties: boolean = true;
 
     /** (optional) This flag displays/hides the metadata
@@ -89,8 +97,6 @@ export class ContentMetadataCardComponent implements OnChanges {
         return this._displayDefaultProperties;
     }
 
-    editable: boolean = false;
-
     expanded: boolean;
 
     editAspectSupported = false;
@@ -111,6 +117,7 @@ export class ContentMetadataCardComponent implements OnChanges {
 
     toggleEdit(): void {
         this.editable = !this.editable;
+        this.editableChange.emit(this.editable);
     }
 
     toggleExpanded(): void {