[ADF-1841] Content Metadata first iteration (#2666)

* First try

* Small layout changes

* Add pipe support for CardViewTextItemModel

* property service

* Additional stuff

* Make CardViewUpdateService smarter

* Content metadata saving

* Rebase fix

* CardView Style fixes

* Fix core and content-services tests

* Fix CardView text item update UX

lib/core/card-view/card-view-dateitem.component.ts

@@ -80,7 +80,7 @@ export class CardViewDateItemComponent implements OnInit {
             let momentDate = moment(newDateValue.value, this.SHOW_FORMAT, true);
             if (momentDate.isValid()) {
                 this.valueDate = momentDate;
-                this.cardViewUpdateService.update(this.property, {[this.property.key]: momentDate.toDate()});
+                this.cardViewUpdateService.update(this.property, momentDate.toDate());
             }
         }
     }

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

@@ -11,11 +11,11 @@
         </ng-template>
     </span>
     <span *ngIf="isEditble()">
-        <div *ngIf="!inEdit" (click)="setEditMode(true)" class="adf-textitem-readonly" [attr.data-automation-id]="'card-textitem-edit-toggle-' + property.key">
+        <div *ngIf="!inEdit" (click)="setEditMode(true)" class="adf-textitem-readonly" [attr.data-automation-id]="'card-textitem-edit-toggle-' + property.key" fxLayout="row" fxLayoutAlign="space-between center">
             <span [attr.data-automation-id]="'card-textitem-value-' + property.key">
                 <span *ngIf="!property.isEmpty(); else elseEmptyValueBlock">{{ property.displayValue }}</span>
             </span>
-            <mat-icon [attr.data-automation-id]="'card-textitem-edit-icon-' + property.key" class="adf-textitem-icon">create</mat-icon>
+            <mat-icon fxFlex="0 0 auto" [attr.data-automation-id]="'card-textitem-edit-icon-' + property.key" class="adf-textitem-icon">create</mat-icon>
         </div>
         <div *ngIf="inEdit" class="adf-textitem-editable">
             <mat-form-field floatPlaceholder="never" class="adf-input-container">

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

@@ -1,4 +1,5 @@
 @mixin adf-card-view-textitem-theme($theme) {
+    $foreground: map-get($theme, foreground);
 
     .adf {
         &-textitem-icon {
@@ -6,9 +7,9 @@
             width: 16px;
             height: 16px;
             position: relative;
-            top: 3px;
+            top: 4px;
             padding-left: 8px;
-            opacity: 0.5;
+            opacity: 0.3;
         }
 
         &-update-icon {
@@ -42,7 +43,7 @@
 
             input:focus,
             textarea:focus {
-                border: 1px solid #EEE;
+                border: 1px solid mat-color($foreground, text, 0.15);
             }
         }
 
@@ -72,13 +73,13 @@
         &-textitem-editable .mat-input-element {
             font-family: inherit;
             position: relative;
-            padding-top: 3px;
+            padding-top: 6px;
         }
 
         &-textitem-editable .mat-input-element:focus {
             padding: 5px;
             left: -6px;
-            top: -6px;
+            top: 0;
         }
 
         &-textitem-editable input.mat-input-element {

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

@@ -215,4 +215,19 @@ describe('CardViewTextItemComponent', () => {
         let updateInput = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-update-${component.property.key}"]`));
         updateInput.triggerEventHandler('click', null);
     });
+
+    it('should switch back to readonly mode after an update attempt', async(() => {
+        component.editable = true;
+        component.property.editable = true;
+        component.inEdit = true;
+        component.editedValue = 'updated-value';
+        fixture.detectChanges();
+
+        component.update();
+
+        fixture.whenStable().then(() => {
+            expect(component.property.value).toBe(component.editedValue);
+            expect(component.inEdit).toBeFalsy();
+        });
+    }));
 });

lib/core/card-view/card-view-textitem.component.ts

@@ -64,7 +64,9 @@ export class CardViewTextItemComponent implements OnChanges {
     }
 
     update(): void {
-        this.cardViewUpdateService.update(this.property, { [this.property.key]: this.editedValue });
+        this.cardViewUpdateService.update(this.property, this.editedValue );
+        this.property.value = this.editedValue;
+        this.setEditMode(false);
     }
 
     clicked(): void {

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

@@ -19,6 +19,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule, MatDatepickerModule, MatIconModule, MatInputModule, MatNativeDateModule } from '@angular/material';
+import { FlexLayoutModule } from '@angular/flex-layout';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { CardViewContentProxyDirective } from './card-view-content-proxy.directive';
@@ -37,6 +38,7 @@ import { CardViewComponent } from './card-view.component';
         MatIconModule,
         MatButtonModule,
         FormsModule,
+        FlexLayoutModule,
         TranslateModule
     ],
     declarations: [