[ACS-5551]property panel updated

demo-shell/src/app/components/files/files.component.html

@@ -289,7 +289,7 @@
         <adf-info-drawer-layout *ngIf="showVersions" class="app-manage-versions-sidebar">
             <div info-drawer-content>
 
-                <adf-info-drawer [title]="'Details'" *ngIf="documentList.selection[0]">
+                <adf-info-drawer [drawerIcon]="documentList.selection[0].entry" [title]="'Details'" *ngIf="documentList.selection[0]">
                     <adf-info-drawer-tab label="Properties">
                         <adf-content-metadata-card
                             [node]="documentList.selection[0].entry"

e2e/content-services/metadata/metadata-smoke-tests.e2e.ts

@@ -132,7 +132,7 @@ describe('Metadata component', () => {
             await expect(await metadataViewPage.getEditIconTooltip()).toEqual(METADATA.EDIT_BUTTON_TOOLTIP);
         });
 
-        it('[C245654] Should be possible edit the basic Metadata Info of a Document', async () => {
+        it('[C245654] Should be possible to edit the basic Metadata Info of a Document', async () => {
             await viewerPage.clickInfoButton();
             await viewerPage.checkInfoSideBarIsDisplayed();
             await metadataViewPage.clickOnPropertiesTab();
@@ -141,13 +141,6 @@ describe('Metadata component', () => {
             await expect(await viewerPage.getActiveTab()).toEqual(METADATA.PROPERTY_TAB);
 
             await metadataViewPage.editIconGeneralClick();
-            await metadataViewPage.editPropertyIconIsDisplayed('properties.cm:name');
-            await metadataViewPage.editPropertyIconIsDisplayed('properties.cm:title');
-            await metadataViewPage.editPropertyIconIsDisplayed('properties.cm:description');
-
-            await expect(await metadataViewPage.getPropertyIconTooltip('properties.cm:name')).toEqual('Edit');
-            await expect(await metadataViewPage.getPropertyIconTooltip('properties.cm:title')).toEqual('Edit');
-            await expect(await metadataViewPage.getPropertyIconTooltip('properties.cm:description')).toEqual('Edit');
 
             await metadataViewPage.enterPropertyText('properties.cm:name', 'exampleText');
             await metadataViewPage.clickResetMetadata();
@@ -180,6 +173,35 @@ describe('Metadata component', () => {
             await metadataViewPage.clickSaveGeneralMetadata();
         });
 
+        it('[C261157] Should be possible to use the metadata component When the node is a Folder', async () => {
+            await contentServicesPage.metadataContent(folderName);
+
+            await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual(folderName);
+            
+            await expect(await metadataViewPage.getPropertyText('createdByUser.displayName')).toEqual(`${acsUser.firstName} ${acsUser.lastName}`);
+            await BrowserActions.closeMenuAndDialogs();
+        });
+
+        it('[C261158] Should be possible to edit the metadata When the node is a Folder', async () => {
+            await contentServicesPage.metadataContent(folderName);
+
+            await metadataViewPage.editIconGeneralClick();
+
+            await metadataViewPage.enterPropertyText('properties.cm:name', 'newnameFolder');
+            await metadataViewPage.clickResetButton();
+            await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual(folderName);
+
+            await metadataViewPage.editIconGeneralClick();
+            await metadataViewPage.enterPropertyText('properties.cm:name', 'newnameFolder');
+            await metadataViewPage.clickSaveGeneralMetadata();
+            await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual('newnameFolder');
+            await metadataViewPage.editIconGeneralClick();
+
+            await metadataViewPage.enterPropertyText('properties.cm:name', folderName);
+            await metadataViewPage.clickSaveGeneralMetadata();
+            await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual(folderName);
+        });
+
         it('[C260181] Should be possible edit all the metadata aspect', async () => {
             await viewerPage.clickInfoButton();
             await viewerPage.checkInfoSideBarIsDisplayed();
@@ -218,33 +240,6 @@ describe('Metadata component', () => {
             await navigationBarPage.clickLogoutButton();
         });
 
-        it('[C261157] Should be possible use the metadata component When the node is a Folder', async () => {
-            await contentServicesPage.metadataContent(folderName);
-
-            await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual(folderName);
-            await expect(await metadataViewPage.getPropertyText('createdByUser.displayName')).toEqual(`${acsUser.firstName} ${acsUser.lastName}`);
-            await BrowserActions.closeMenuAndDialogs();
-        });
-
-        it('[C261158] Should be possible edit the metadata When the node is a Folder', async () => {
-            await contentServicesPage.metadataContent(folderName);
-
-            await metadataViewPage.editIconGeneralClick();
-
-            await metadataViewPage.enterPropertyText('properties.cm:name', 'newnameFolder');
-            await metadataViewPage.clickResetButton();
-            await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual(folderName);
-
-            await metadataViewPage.editIconGeneralClick();
-            await metadataViewPage.enterPropertyText('properties.cm:name', 'newnameFolder');
-            await metadataViewPage.clickSaveGeneralMetadata();
-            await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual('newnameFolder');
-            await metadataViewPage.editIconGeneralClick();
-
-            await metadataViewPage.enterPropertyText('properties.cm:name', folderName);
-            await metadataViewPage.clickSaveGeneralMetadata();
-            await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual(folderName);
-        });
     });
 
     it('[C279960] Should show the last username modifier when modify a File', async () => {

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

@@ -1,48 +1,48 @@
 <div class="adf-metadata-properties">
     <mat-accordion displayMode="flat"
                    [multi]="multi">
-        <mat-expansion-panel *ngIf="displayDefaultProperties"
+                <mat-expansion-panel *ngIf="displayDefaultProperties"
-                             [expanded]="canExpandProperties()"
+                            [expanded]="canExpandProperties()"
-                             [attr.data-automation-id]="'adf-metadata-group-properties'"
+                            [attr.data-automation-id]="'adf-metadata-group-properties'"
-                             hideToggle
+                            hideToggle
-                             (opened)="handleGeneralInfoPanelState()"
+                            (opened)="handleGeneralInfoPanelState()"
-                             (closed)="handleGeneralInfoPanelState()">
+                            (closed)="handleGeneralInfoPanelState()">
-            <mat-expansion-panel-header>
+                <mat-expansion-panel-header>
                 <div class="adf-metadata-properties-panel-content">
-                    <mat-icon>
+                <mat-icon>
-                        {{ generalInfoPanelState ? 'expand_more' : 'chevron_right'}}
+                    {{ generalInfoPanelState ? 'expand_more' : 'chevron_right'}}
-                    </mat-icon>
+                </mat-icon>
-                    <mat-panel-title class="adf-metadata-properties-title">
+                <mat-panel-title class="adf-metadata-properties-title">
-                        {{ 'CORE.METADATA.BASIC.HEADER' | translate }}
+                    {{ 'CORE.METADATA.BASIC.HEADER' | translate }}
-                    </mat-panel-title>
+                </mat-panel-title>
                 </div>
                 <button *ngIf="!editable && !readOnly && hasAllowableOperations"
-                        mat-icon-button
+                    mat-icon-button
-                        (click)="toggleGeneralEdit($event)"
+                    (click)="toggleGeneralEdit($event)"
-                        [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
+                    [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
-                        [attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate"
+                    [attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate"
-                        data-automation-id="meta-data-general-info-edit"
+                    data-automation-id="meta-data-general-info-edit"
-                        class="adf-edit-icon-buttons">
+                    class="adf-edit-icon-buttons">
-                    <mat-icon>mode_edit</mat-icon>
+                <mat-icon>mode_edit</mat-icon>
                 </button>
                 <div *ngIf="editable"
-                    class="adf-metadata-action-buttons">
+                class="adf-metadata-action-buttons">
-                    <button mat-icon-button 
+                <button mat-icon-button 
-                            (click)="cancelChanges(buttonType.GeneralInfo, $event)"
+                        (click)="cancelChanges(buttonType.GeneralInfo, $event)"
-                            data-automation-id="reset-metadata">
+                        data-automation-id="reset-metadata">
-                        <mat-icon>clear</mat-icon>
+                    <mat-icon>clear</mat-icon>
-                    </button>
+                </button>
-                    <button mat-icon-button
+                <button mat-icon-button
-                            (click)="saveChanges(buttonType.GeneralInfo, $event, group)"
+                        (click)="saveChanges(buttonType.GeneralInfo, $event, group)"
-                            color="primary"
+                        color="primary"
-                            data-automation-id="save-general-info-metadata"
+                        data-automation-id="save-general-info-metadata"
-                            [disabled]="!hasMetadataChanged">
+                        [disabled]="!hasMetadataChanged">
-                        <mat-icon>check</mat-icon>
+                    <mat-icon>check</mat-icon>
-                    </button>
+                </button>
                 </div>
-            </mat-expansion-panel-header>
+                </mat-expansion-panel-header>
-            <mat-divider class="adf-mat-divider"></mat-divider>
+                <mat-divider class="adf-mat-divider"></mat-divider>
-            <adf-card-view
+                <adf-card-view
                 (keydown)="keyDown($event)"
                 [properties]="basicProperties$ | async"
                 [editable]="editable"
@@ -50,10 +50,10 @@
                 [copyToClipboardAction]="copyToClipboardAction"
                 [useChipsForMultiValueProperty]="useChipsForMultiValueProperty"
                 [multiValueSeparator]="multiValueSeparator">
-            </adf-card-view>
+                </adf-card-view>
-        </mat-expansion-panel>
+                </mat-expansion-panel>
-        <ng-container *ngIf="displayTags">
+                <ng-container *ngIf="displayTags">
-            <mat-expansion-panel 
+                <mat-expansion-panel 
                             (opened)="handleTagsPanelState(true)"
                             (closed)="handleTagsPanelState(false)"
                             hideToggle
@@ -111,10 +111,10 @@
                         [disabledTagsRemoving]="saving">
                     </adf-tags-creator>
                 </div>
-            </mat-expansion-panel>
+                </mat-expansion-panel>
-        </ng-container>
+                </ng-container>
-        <ng-container *ngIf="displayCategories">
+                <ng-container *ngIf="displayCategories">
-            <mat-expansion-panel
+                <mat-expansion-panel
                             (opened)="handleCategoriesPanelState(true)"
                             (closed)="handleCategoriesPanelState(false)"
                             hideToggle
@@ -170,11 +170,11 @@
                         (categoriesChange)="storeCategoriesToAssign($event)">
                     </adf-categories-management>
                 </div>
-            </mat-expansion-panel>
+                </mat-expansion-panel>
-        </ng-container>
+                </ng-container>
-            <ng-container *ngIf="groupedProperties$ | async; else loading; let groupedProperties">
+                <ng-container *ngIf="groupedProperties$ | async; else loading; let groupedProperties">
                 <div *ngFor="let group of groupedProperties; let first = first;"
-                     class="adf-metadata-grouped-properties-container">
+                        class="adf-metadata-grouped-properties-container">
                     <mat-expansion-panel
                                     [attr.data-automation-id]="'adf-metadata-group-' + group.title"
                                     [expanded]="canExpandTheCard(group) || !displayDefaultProperties && first || group.expanded"
@@ -230,8 +230,8 @@
                         </adf-card-view>
                     </mat-expansion-panel>
                 </div>
-            </ng-container>
+                </ng-container>
-            <ng-template #loading>
+                <ng-template #loading>
                 <mat-progress-bar mode="indeterminate" [attr.aria-label]="'DATA_LOADING' | translate">
                 </mat-progress-bar>
             </ng-template>

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss

@@ -1,17 +1,24 @@
 .adf {
     &-metadata-properties {
-        mat-expansion-panel-header {
+        .mat-expansion-panel-header {
             height: 56px;
+            padding: 0 12px;
 
             .adf-metadata-properties-title {
-                font-weight: normal;
+                font-weight: 700;
-                font-size: 15px;
+                font-size: 14px;
                 padding-left: 12px;
             }
         }
 
         .mat-expansion-panel:not([class*='mat-elevation-z']) {
             box-shadow: none;
+            border: 1px solid var(--adf-metadata-property-panel-border-color);
+            border-radius: 12px;
+        }
+
+        .mat-expansion-panel-body {
+            padding: 0 24px 12px;
         }
 
         .adf-mat-divider {
@@ -47,7 +54,7 @@
             align-items: center;
             justify-content: center;
             font-size: 15px;
-            padding: 24px;
+            padding: 18px 0 5px;
         }
 
         &-tags {
@@ -91,7 +98,7 @@
             justify-content: space-between;
             align-items: center;
             font-size: 15px;
-            height: 64px;
+            height: 56px;
 
             button {
                 margin-right: -14px;
@@ -116,8 +123,8 @@
             .mat-expansion-panel {
                 width: 755px;
                 border: 1px solid var(--adf-metadata-property-panel-border-color);
-                margin: 24px;
                 border-radius: 12px;
+                margin: 24px;
             }
         }
     }

lib/core/src/lib/card-view/card-view.module.ts

@@ -45,6 +45,7 @@ import { CardViewKeyValuePairsItemComponent } from './components/card-view-keyva
 import { CardViewSelectItemComponent } from './components/card-view-selectitem/card-view-selectitem.component';
 import { CardViewArrayItemComponent } from './components/card-view-arrayitem/card-view-arrayitem.component';
 import { SelectFilterInputComponent } from './components/card-view-selectitem/select-filter-input/select-filter-input.component';
+import { MatDividerModule } from '@angular/material/divider';
 
 @NgModule({
     imports: [
@@ -66,7 +67,8 @@ import { SelectFilterInputComponent } from './components/card-view-selectitem/se
         MatDatetimepickerModule,
         MatNativeDatetimeModule,
         MatSlideToggleModule,
-        MatTooltipModule
+        MatTooltipModule,
+        MatDividerModule
     ],
     declarations: [
         CardViewComponent,

lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html

@@ -1,10 +1,12 @@
 <label class="adf-property-label"
+    [ngClass]="{'adf-property-label-not-editable' : !isEditable() && editable}"
      [attr.data-automation-id]="'card-dateitem-label-' + property.key"
      *ngIf="showProperty() || isEditable()"
      [attr.for]="'card-view-dateitem-' + property.key">
     {{ property.label | translate }}
 </label>
-<div class="adf-property-value adf-property-value-padding-top">
+<div class="adf-property-value adf-property-value-padding-top"
+[ngClass]="{'adf-property-dateitem-edit-mode' : editable, 'adf-property-label-not-editable' : !isEditable() && editable}">
     <span *ngIf="!isEditable() && !property.multivalued"
           [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
         <span *ngIf="showProperty()"
@@ -98,3 +100,4 @@
         </mat-form-field>
     </div>
 </div>
+<mat-divider *ngIf="showProperty() && !editable"></mat-divider>

lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss

@@ -11,6 +11,23 @@
         float: right;
     }
 
+    &-property-label{
+        color: var(--adf-metadata-property-panel-text-color);
+        display: flex;
+        padding: 6px 0;
+        line-height: 20px;
+    }
+
+    &-property-dateitem-edit-mode{
+        background-color: var(--adf-metadata-buttons-background-color);
+        border-radius: 6px;
+        padding-left: 12px;
+
+        .mat-select-value{
+            color: var(--adf-metadata-property-panel-text-color);
+        }
+    }
+    
     &-dateitem-chip-list-container.adf-property-field {
         margin-bottom: -7px !important;
         border-bottom: 0;

lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html

@@ -2,6 +2,7 @@
     <div
         [attr.data-automation-id]="'card-select-label-' + property.key"
         class="adf-property-label"
+        [ngClass]="{'adf-property-label-not-editable' : !isEditable() && editable}"
     >{{ property.label | translate }}</div>
     <div class="adf-property-field">
         <div
@@ -15,6 +16,7 @@
                 <mat-select
                     [(value)]="value"
                     panelClass="adf-select-filter"
+                    [ngClass]="{'adf-property-select-edit-mode' : isEditable(),'adf-property-normal-mode':!isEditable(),'adf-property-label-not-editable' : !isEditable() && editable}"
                     (selectionChange)="onChange($event)"
                     data-automation-class="select-box"
                     [aria-label]="property.label | translate"

lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss

@@ -3,13 +3,8 @@
 }
 
 .adf-select-item-padding {
-    padding-top: 6px;
+    display: flex;
-    padding-bottom: 20px;
+    padding: 6px 0;
-}
-
-.adf-select-item-padding-editable {
-    padding-top: 6px;
-    padding-bottom: 6px;
 }
 
 .adf-select-filter-input {

lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html

@@ -2,14 +2,16 @@
     <div *ngSwitchDefault>
         <mat-form-field class="adf-property-field adf-card-textitem-field"
             [ngClass]="{ 'adf-property-read-only': !isEditable, 'adf-property-field-has-error mat-form-field-invalid': isEditable && hasErrors }"
-            [floatLabel]="'never'"
+            [floatLabel]="'always'"
             appearance="standard">
-            <mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label">
+            <mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label"
+            [ngClass]="{'adf-property-label-not-editable' : !isEditable && editable}">
                 {{ property.label | translate }}
             </mat-label>
                 <input matInput
                     *ngIf="!property.multiline"
                     class="adf-property-value"
+                    [ngClass]="{'adf-property-edit-mode' : editable,'adf-property-normal-mode':!editable, 'adf-property-label-not-editable' : !isEditable && editable}"
                     title="{{property.label | translate }}"
                     [placeholder]="property.default"
                     [attr.aria-label]="property.label | translate"
@@ -27,34 +29,21 @@
                     [cdkAutosizeMaxRows]="1"
                     [cdkAutosizeMaxRows]="5"
                     class="adf-property-value"
+                    [ngClass]="{'adf-property-edit-mode' : editable,'adf-property-normal-mode':!editable, 'adf-property-label-not-editable' : !isEditable && editable}"
                     [placeholder]="property.default"
                     [attr.aria-label]="property.label | translate"
                     [formControl]="textInput"
                     [attr.data-automation-id]="'card-textitem-value-' + property.key">
                 </textarea>
 
-                <button
-                    *ngIf="isEditable"
-                    matSuffix
-                    class="adf-textitem-clear-icon"
-                    [attr.aria-label]="'CORE.METADATA.ACTIONS.CLEAR' | translate"
-                    (click)="clearValue()">
-                    <mat-icon>cancel</mat-icon>
-                </button>
-                <button
-                    *ngIf="isEditable"
-                    matSuffix
-                    class="adf-textitem-edit-icon"
-                    [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate">
-                    <mat-icon>mode_edit</mat-icon>
-                </button>
-
         </mat-form-field>
+        <mat-divider *ngIf="showProperty && !editable"></mat-divider>
     </div>
 
     <div *ngSwitchCase="'chipsTemplate'"
          class="adf-property-field adf-textitem-chip-list-container">
-        <mat-label *ngIf="showLabelForChips" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label">
+        <mat-label *ngIf="showLabelForChips" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label"
+        [ngClass]="{'adf-property-label-not-editable' : !isEditable && editable}">
             {{ property.label | translate }}
         </mat-label>
         <mat-chip-list #chipList
@@ -74,6 +63,7 @@
             [floatLabel]="'never'">
             <input matInput
                 class="adf-property-value"
+                [ngClass]="{'adf-property-edit-mode' : editable,'adf-property-normal-mode':!editable, 'adf-property-label-not-editable' : !isEditable && editable}"
                 title="{{property.label | translate }}"
                 [placeholder]="editedValue ? '' : property.default | translate"
                 [attr.aria-label]="property.label | translate"
@@ -81,8 +71,6 @@
                 [matChipInputAddOnBlur]="true"
                 (matChipInputTokenEnd)="addValueToList($event)"
                 [attr.data-automation-id]="'card-textitem-editchipinput-' + property.key">
-            <mat-icon matSuffix
-                class="adf-textitem-edit-icon">mode_edit</mat-icon>
         </mat-form-field>
     </div>
 
@@ -94,14 +82,15 @@
         (click)="clicked()">
         <mat-form-field class="adf-property-field adf-card-textitem-field" appearance="standard"
             [floatLabel]="'never'">
-            <mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label">
+            <mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label"
+            [ngClass]="{'adf-property-label-not-editable' : !isEditable && editable}">
                 {{ property.label | translate }}
             </mat-label>
             <input matInput
                 [type]=property.inputType
                 class="adf-property-value"
                 title="{{property.label | translate }}"
-                [ngClass]="{ 'adf-textitem-clickable-value': !isEditable }"
+                [ngClass]="{ 'adf-textitem-clickable-value': !isEditable,'adf-property-edit-mode' : editable,'adf-property-normal-mode':!editable, 'adf-property-label-not-editable' : !isEditable && editable }"
                 [placeholder]="property.default"
                 [attr.aria-label]="property.label | translate"
                 [(ngModel)]="editedValue"

lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss

@@ -1,4 +1,9 @@
 .adf {
+
+    &-property-field .mat-form-field-underline {
+        display: none;
+    }
+    
     &-textitem-edit-icon.mat-icon {
         font-size: var(--theme-subheading-2-font-size);
         width: 16px;

lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts

@@ -185,24 +185,6 @@ describe('CardViewTextItemComponent', () => {
 
         });
 
-        it('should render the edit icon in case of editable:true', () => {
-            component.editable = true;
-            component.property.editable = true;
-
-            fixture.detectChanges();
-
-            const editIcon = fixture.debugElement.query(By.css('.adf-textitem-edit-icon'));
-            expect(editIcon).not.toBeNull('Edit icon should be shown');
-        });
-
-        it('should NOT render the edit icon in case of editable:false', async () => {
-            component.editable = false;
-            fixture.detectChanges();
-            await fixture.whenStable();
-            const editIcon = fixture.debugElement.query(By.css('.adf-textitem-edit-icon'));
-            expect(editIcon).toBeNull('Edit icon should NOT be shown');
-        });
-
         it('should NOT render the picker and toggle in case of editable:true but (general) editable:false', async () => {
             component.editable = false;
             component.property.editable = true;
@@ -493,26 +475,6 @@ describe('CardViewTextItemComponent', () => {
             expect(clipboardService.copyContentToClipboard).toHaveBeenCalledWith('myValueToCopy', 'CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');
         });
 
-        it('should clear value when clear value icon is clicked', async () => {
-            spyOn(component, 'update');
-            component.property.value = 'testValue';
-            component.property.icon = 'FAKE_ICON';
-            component.property.clickable = true;
-            component.property.editable = true;
-            component.editable = true;
-            component.property.isValid = () => true;
-
-            fixture.detectChanges();
-            await fixture.whenStable();
-            fixture.detectChanges();
-            const clickEl = fixture.debugElement.query(By.css(`.adf-textitem-clear-icon`));
-            clickEl.triggerEventHandler('click', new MouseEvent('click'));
-
-            fixture.detectChanges();
-            const elementValue = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${component.property.key}"]`));
-            expect(elementValue.nativeElement.textContent).toEqual('');
-            expect(component.update).toHaveBeenCalled();
-        });
     });
 
     describe('Update', () => {

lib/core/src/lib/card-view/components/card-view/card-view.component.scss

@@ -6,23 +6,79 @@
     border-radius: var(--adf-card-view-border-radius);
 
     .adf-property {
-        margin-bottom: 20px;
 
         .adf-property-value-padding-top {
-            margin-top: 6px;
+            display: flex;
+            flex-direction:column;
+            padding-bottom: 6px;
+            line-height: 20px;
+        }
+
+        .adf-property-label-not-editable {
+            color: var(--adf-metadata-property-panel-label-color);
         }
 
         .adf-property-field {
             width: 100%;
-            margin-bottom: -25px;
 
             .mat-form-field-infix {
+                display: flex;
                 border-top-width: 0;
+                padding: 0;
             }
 
             .mat-form-field-label {
-                margin-top: 6px;
+                padding: 6px 0;
+                justify-content: center;
+                display: flex;
+                flex-direction: column;
+                height: 20px;
+                transform: translateY(-1.34373em) scale(1);
             }
+
+            .mat-form-field-label-wrapper {
+                padding-top: 0;
+                top: -1px;
+            }
+
+            .mat-input-element.adf-property-normal-mode {
+                color: var(--adf-metadata-property-panel-title-color);
+                margin-top: 32px;
+                padding: 6px 0;
+                line-height: 20px;
+            }
+            
+            .mat-input-element.adf-property-edit-mode {
+                padding: 6px 0 6px 12px;
+                margin-top: 32px;
+                line-height: 20px;
+                background-color: var(--adf-metadata-buttons-background-color);
+                color: var(--adf-metadata-property-panel-text-color);
+                border-radius: 6px;
+            }
+            
+            .mat-select.adf-property-select-edit-mode {
+                padding: 6px 0 6px 12px;
+                margin-top: 0;
+                line-height: 20px;
+                background-color: var(--adf-metadata-buttons-background-color);
+                border-radius: 6px;
+            
+                .mat-select-min-line{
+                    color: var(--adf-metadata-property-panel-text-color);
+            }   }
         }
     }
 }
+
+.mat-form-field-wrapper {
+    padding-bottom: 0;
+}
+
+.mat-form-field-appearance-standard .mat-form-field-flex {
+    padding-top: 0 !important;
+}
+
+.mat-form-field-appearance-legacy .mat-form-field-wrapper {
+    padding-bottom: 0 !important;
+}

lib/core/src/lib/info-drawer/info-drawer-layout.component.html

@@ -1,4 +1,7 @@
 <div *ngIf="showHeader" class="adf-info-drawer-layout-header">
+    <div class="adf-info-drawer-layout-header-icon">
+        <ng-content select="[info-drawer-icon]"></ng-content>
+    </div>
     <div class="adf-info-drawer-layout-header-title">
         <ng-content select="[info-drawer-title]"></ng-content>
     </div>

lib/core/src/lib/info-drawer/info-drawer-layout.component.scss

@@ -14,8 +14,9 @@ $adf-info-drawer-icon-size-half: 24px !default;
 
         overflow: auto;
         width: 100%;
-        background-color: var(--theme-background-color);
+        background-color: var(--theme-card-background-color);
         box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
+        border-top: 1px solid var(--adf-metadata-property-panel-border-color);
 
         & .mat-tab-label {
             font-weight: bold;
@@ -32,7 +33,6 @@ $adf-info-drawer-icon-size-half: 24px !default;
         &-header {
             padding: 13px 0 0 23px;
             display: flex;
-            justify-content: space-between;
             align-items: center;
             margin-bottom: 40px;
 
@@ -55,8 +55,8 @@ $adf-info-drawer-icon-size-half: 24px !default;
 
                 & > div {
                     overflow: hidden;
-                    white-space: nowrap;
                     text-overflow: ellipsis;
+                    color: var(--adf-metadata-property-panel-title-color);
                 }
             }
         }

lib/core/src/lib/info-drawer/info-drawer-layout.component.ts

@@ -33,6 +33,7 @@ export class InfoDrawerLayoutComponent {
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
  */
+@Directive({ selector: '[adf-info-drawer-icon], [info-drawer-icon]' }) export class InfoDrawerIconDirective {}
 @Directive({ selector: '[adf-info-drawer-title], [info-drawer-title]' }) export class InfoDrawerTitleDirective {}
 @Directive({ selector: '[adf-info-drawer-buttons], [info-drawer-buttons]' }) export class InfoDrawerButtonsDirective {}
 @Directive({ selector: '[adf-info-drawer-content], [info-drawer-content]' }) export class InfoDrawerContentDirective {}

lib/core/src/lib/info-drawer/info-drawer.component.html

@@ -1,4 +1,5 @@
 <adf-info-drawer-layout [showHeader]="showHeader">
+    <img class="adf-info-drawer-icon" alt="Info Drawer Icon" *ngIf="drawerIcon" src="{{ getInfoDrawerIcon(drawerIcon) }}" info-drawer-icon>
     <div role="heading" aria-level="1" *ngIf="title" info-drawer-title>{{ title | translate }}</div>
     <ng-content *ngIf="!title" info-drawer-title select="[info-drawer-title]"></ng-content>
 

lib/core/src/lib/info-drawer/info-drawer.component.scss

@@ -1,12 +1,22 @@
 .adf {
     &-info-drawer {
-        display: block;
+        .adf-metadata-properties-panel{
+            display:block;
+            margin:0;
+        }
 
         .mat-tab-label {
             min-width: 0;
         }
 
         & &-layout {
+
+            .adf-info-drawer-icon{
+                display: inline-block; 
+                vertical-align: middle;
+                margin-right:10px;
+            }
+
             &-content {
                 padding: 0;
 
@@ -42,7 +52,7 @@
                     }
 
                     .mat-tab-body {
-                        padding: 10px;
+                        padding: 24px;
                     }
 
                     .mat-tab-body-content {
@@ -55,3 +65,4 @@
         }
     }
 }
+

lib/core/src/lib/info-drawer/info-drawer.component.spec.ts

@@ -24,6 +24,40 @@ import { of } from 'rxjs';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { CoreTestingModule } from '../testing/core.testing.module';
 import { ESCAPE } from '@angular/cdk/keycodes';
+import { Node } from '@alfresco/js-api';
+import { ThumbnailService } from '../common/services/thumbnail.service';
+
+const mockNode: Node = {
+    isFile: true,
+    createdByUser: { id: 'admin', displayName: 'Administrator' },
+    modifiedAt: new Date('2017-05-24T15:08:55.640Z'),
+    nodeType: 'cm:content',
+    content: {
+        mimeType: 'application/rtf',
+        mimeTypeName: 'Rich Text Format',
+        sizeInBytes: 14530,
+        encoding: 'UTF-8'
+    },
+    parentId: 'd124de26-6ba0-4f40-8d98-4907da2d337a',
+    createdAt: new Date('2017-05-24T15:08:55.640Z'),
+    path: {
+        name: '/Company Home/Guest Home',
+        isComplete: true,
+        elements: [
+            {
+                id: '94acfc73-7014-4475-9bd9-93a2162f0f8c',
+                name: 'Company Home'
+            },
+            { id: 'd124de26-6ba0-4f40-8d98-4907da2d337a', name: 'Guest Home' }
+        ]
+    },
+    isFolder: false,
+    modifiedByUser: { id: 'admin', displayName: 'Administrator' },
+    name: 'b_txt_file.rtf',
+    id: '70e1cc6a-6918-468a-b84a-1048093b06fd',
+    properties: { 'cm:versionLabel': '1.0', 'cm:versionType': 'MAJOR' },
+    allowableOperations: ['delete', 'update']
+};
 
 describe('InfoDrawerComponent', () => {
     let element: HTMLElement;
@@ -44,6 +78,7 @@ describe('InfoDrawerComponent', () => {
         fixture = TestBed.createComponent(InfoDrawerComponent);
         element = fixture.nativeElement;
         component = fixture.componentInstance;
+        component.drawerIcon = mockNode;
     });
 
     it('should define InfoDrawerTabLayout', () => {
@@ -83,19 +118,64 @@ describe('InfoDrawerComponent', () => {
 
         expect(stopPropagationSpy).toHaveBeenCalled();
     });
+
+    describe('Info Drawer header Icon', () => {
+        let thumbnailService: ThumbnailService;
+
+        beforeEach(() => {
+            thumbnailService = TestBed.inject(ThumbnailService);
+            component.drawerIcon = mockNode;
+        });
+
+        function testInfoDrawerIcon(iconPath: string, isFolder: boolean, isFile: boolean) {
+            spyOn(thumbnailService, 'getMimeTypeIcon').and.returnValue(iconPath);
+            mockNode.isFolder = isFolder;
+            mockNode.isFile = isFile;
+            const value = component.getInfoDrawerIcon(mockNode);
+            expect(value).toContain(iconPath);
+        }
+
+        it('should resolve folder icon', () => {
+            testInfoDrawerIcon('assets/images/ft_ic_folder.svg', true, false);
+        });
+
+        it('should resolve smart folder icon', () => {
+            testInfoDrawerIcon('assets/images/ft_ic_smart_folder.svg', true, false);
+        });
+
+        it('should resolve link folder icon', () => {
+            testInfoDrawerIcon('assets/images/ft_ic_folder_shortcut_link.svg', true, false);
+        });
+
+        it('should resolve rule folder icon', () => {
+            testInfoDrawerIcon('assets/images/ft_ic_folder_rule.svg', true, false);
+        });
+
+        it('should resolve file icon for content type', () => {
+            testInfoDrawerIcon('assets/images/ft_ic_raster_image.svg', false, true);
+        });
+
+        it('should resolve fallback file icon for unknown node', () => {
+            spyOn(thumbnailService, 'getDefaultMimeTypeIcon').and.returnValue(`assets/images/ft_ic_miscellaneous.svg`);
+            mockNode.isFile = false;
+            mockNode.isFolder = false;
+            const value = component.getInfoDrawerIcon(mockNode);
+            expect(value).toContain(`assets/images/ft_ic_miscellaneous`);
+        });
+    });
 });
 
 @Component({
     template: `
-    <adf-info-drawer [selectedIndex]="tabIndex" title="Fake Title Custom">
+        <adf-info-drawer [selectedIndex]="tabIndex" drawerIcon="mockNode" title="Fake Title Custom">
-        <adf-info-drawer-tab label="Tab1">
+            <adf-info-drawer-tab label="Tab1">
-        </adf-info-drawer-tab>
+            </adf-info-drawer-tab>
-        <adf-info-drawer-tab label="Tab2">
+            <adf-info-drawer-tab label="Tab2">
-        </adf-info-drawer-tab>
+            </adf-info-drawer-tab>
-        <adf-info-drawer-tab label="Tab3" icon="tab-icon">
+            <adf-info-drawer-tab label="Tab3" icon="tab-icon">
-        </adf-info-drawer-tab>
+            </adf-info-drawer-tab>
-    </adf-info-drawer>
+        </adf-info-drawer>
-       `
+    `
 })
 class CustomInfoDrawerComponent extends InfoDrawerComponent {
     tabIndex: number;
@@ -157,13 +237,21 @@ describe('Custom InfoDrawer', () => {
         expect(tab[0].nativeElement.innerText).not.toBe('TAB3');
         expect(tab[0].nativeElement.innerText).toContain('tab-icon');
     });
+
+    it('should render a icon with title', () => {
+        fixture.detectChanges();
+        const icon: any = fixture.debugElement.queryAll(By.css('[info-drawer-icon]'));
+        const srcAttribute = icon[0].nativeElement.getAttribute('src');
+        expect(icon.length).toBe(1);
+        expect(srcAttribute).toContain('/assets/images/ft_ic_miscellaneous.svg');
+    });
 });
 
 @Component({
     template: `
-    <adf-info-drawer [showHeader]="showHeader" title="Fake Visibility Info Drawer Title">
+    <adf-info-drawer [showHeader]="showHeader" drawerIcon="mockNode" title="Fake Visibility Info Drawer Title">
     </adf-info-drawer>
-       `
+        `
 })
 class VisibilityInfoDrawerComponent extends InfoDrawerComponent {
     showHeader: boolean;
@@ -186,21 +274,28 @@ describe('Header visibility InfoDrawer', () => {
         fixture = TestBed.createComponent(VisibilityInfoDrawerComponent);
         fixture.detectChanges();
         component = fixture.componentInstance;
+        component.drawerIcon = mockNode;
     });
 
     it('should show info drawer header by default', () => {
         fixture.detectChanges();
         const title: any = fixture.debugElement.queryAll(By.css('[info-drawer-title]'));
+        const icon: any = fixture.debugElement.queryAll(By.css('[info-drawer-icon]'));
+        const srcAttribute = icon[0].nativeElement.getAttribute('src');
         expect(title.length).toBe(1);
+        expect(icon.length).toBe(1);
+        expect(srcAttribute).toContain('/assets/images/ft_ic_miscellaneous.svg');
         expect(title[0].nativeElement.innerText).toBe('Fake Visibility Info Drawer Title');
         expect(component.showHeader).toEqual(true);
     });
 
-    it('should not show info drawer header when showHeader is false', () => {
+    it('should not show info drawer header with icon when showHeader is false', () => {
         fixture.detectChanges();
         component.showHeader = false;
         fixture.detectChanges();
         const title: any = fixture.debugElement.queryAll(By.css('[info-drawer-title]'));
+        const icon: any = fixture.debugElement.queryAll(By.css('[info-drawer-icon]'));
         expect(title.length).toBe(0);
+        expect(icon.length).toBe(0);
     });
 });

lib/core/src/lib/info-drawer/info-drawer.component.ts

@@ -17,6 +17,9 @@
 
 import { Component, ContentChildren, EventEmitter, HostListener, Input, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
 import { MatTabChangeEvent } from '@angular/material/tabs';
+import { ThumbnailService } from '../common/services/thumbnail.service';
+import { Node } from '@alfresco/js-api';
+
 @Component({
     selector: 'adf-info-drawer-tab',
     template: '<ng-template><ng-content></ng-content></ng-template>',
@@ -43,10 +46,16 @@ export class InfoDrawerTabComponent {
     host: { class: 'adf-info-drawer' }
 })
 export class InfoDrawerComponent {
+
+    constructor(private thumbnailService: ThumbnailService) {}
+
     /** The title of the info drawer (string or translation key). */
     @Input()
     title: string|null = null;
 
+    @Input()
+    drawerIcon: Node | null = null;
+
     /** The selected index tab. */
     @Input()
     selectedIndex: number = 0;
@@ -79,4 +88,45 @@ export class InfoDrawerComponent {
     onTabChange(event: MatTabChangeEvent) {
         this.currentTab.emit(event.index);
     }
+
+    getInfoDrawerIcon(node: Node): string {
+        if (node.isFolder) {
+            return this.getFolderIcon(node);
+        }
+        if (node.isFile) {
+            return this.thumbnailService.getMimeTypeIcon(node.content.mimeType);
+        }
+        return this.thumbnailService.getDefaultMimeTypeIcon();
+    }
+
+    private getFolderIcon(node: Node): string {
+        if (this.isSmartFolder(node)) {
+            return this.thumbnailService.getMimeTypeIcon('smartFolder');
+        } else if (this.isRuleFolder(node)) {
+            return this.thumbnailService.getMimeTypeIcon('ruleFolder');
+        } else if (this.isLinkFolder(node)) {
+            return this.thumbnailService.getMimeTypeIcon('linkFolder');
+        } else {
+            return this.thumbnailService.getMimeTypeIcon('folder');
+        }
+    }
+
+    isSmartFolder(node: Node): boolean {
+        const nodeAspects = this.getNodeAspectNames(node);
+        return nodeAspects.includes('smf:customConfigSmartFolder') || nodeAspects.includes('smf:systemConfigSmartFolder');
+    }
+
+    isRuleFolder(node: Node): boolean {
+        const nodeAspects = this.getNodeAspectNames(node);
+        return nodeAspects.includes('rule:rules');
+    }
+
+    isLinkFolder(node: Node): boolean {
+        const nodeType = node.nodeType;
+        return nodeType === 'app:folderlink';
+    }
+
+    private getNodeAspectNames(node: Node): string[] {
+        return node.aspectNames ? node.aspectNames : [];
+    }
 }

lib/core/src/lib/styles/_components-variables.scss

@@ -46,7 +46,10 @@
         --adf-identity-user-info-font-size: var(--theme-adf-picture-1-font-size),
         --adf-user-info-container-margin-right: $adf-ref-margin-right,
         --adf-metadata-property-panel-border-color: $adf-metadata-property-panel-border-color,
-        --adf-metadata-buttons-background-color: $adf-metadata-buttons-background-color
+        --adf-metadata-buttons-background-color: $adf-metadata-buttons-background-color,
+        --adf-metadata-property-panel-title-color: $adf-metadata-property-panel-title-color,
+        --adf-metadata-property-panel-text-color: $adf-metadata-property-panel-text-color,
+        --adf-metadata-property-panel-label-color: $adf-metadata-property-panel-label-color
     );
 
     // propagates SCSS variables into the CSS variables scope

lib/core/src/lib/styles/_reference-variables.scss

@@ -29,3 +29,7 @@ $adf-ref-line-height: 40px;
 $adf-ref-margin-right: 8px;
 $adf-metadata-property-panel-border-color: rgba(0, 0, 0, 0.12);
 $adf-metadata-buttons-background-color: rgba(33, 33, 33, 0.05);
+$adf-metadata-property-panel-title-color: #212121;
+$adf-metadata-property-panel-text-color: rgba(33, 35, 40, 0.70);
+$adf-metadata-property-panel-label-color: rgba(33, 33, 33, 0.24);
+