[ADF-4900] Card View and Metadata Components refactoring (#5592)

* [ADF-4900] Card View and Metadata Components refactoring

* CSS linting

* Unit test excluded

* Rebase branch

* Fix unit tests

* Fix linting

* Fix e2e tests

* Fix 2e2 tests

* Fix process-services e2e tests

* More fixes

* Fix more e2e tests

* Fix unit test

* Improve flaky unit test

* Fix process services e2e tests

* Update Process Header Cloud Page

* Fix linting

* Fix timing issue

* Lintintg

* Fix selectors

* Fix e2e tests

* Fix timing issue

* Fix C260328

* Fix spellcheck

* save screenshot

* performance issue

* Fix unit tests and e2e tests

* fix e2e

* refactoring

* fix lint

* fix e2e

* Fix C309698

* fix other e2e

* fix lint

* increase timeout

Co-authored-by: Eugenio Romano <eugenio.romano@alfresco.com>

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

@@ -41,6 +41,8 @@
 
         &-property-value {
             .mat-chip-list {
+                width: 100%;
+                padding-top: 6px;
                 cursor: pointer;
             }
             .mat-chip {

lib/core/card-view/components/card-view-boolitem/card-view-boolitem.component.html

@@ -1,12 +1,13 @@
 <ng-container *ngIf="!property.isEmpty() || isEditable()">
-    <div [attr.data-automation-id]="'card-boolean-label-' + property.key" class="adf-property-label">{{ property.label | translate }}</div>
     <div class="adf-property-value">
-        <mat-checkbox
-            [attr.data-automation-id]="'card-boolean-' + property.key"
-            [attr.title]="'CORE.METADATA.ACTIONS.TOGGLE' | translate"
-            [checked]="property.displayValue"
-            [disabled]="!isEditable()"
-            (change)="changed($event)">
+        <mat-checkbox [attr.data-automation-id]="'card-boolean-' + property.key"
+                      [attr.title]="'CORE.METADATA.ACTIONS.TOGGLE' | translate"
+                      [checked]="property.displayValue"
+                      [disabled]="!isEditable()"
+                      color="primary"
+                      (change)="changed($event)">
+            <div [attr.data-automation-id]="'card-boolean-label-' + property.key"
+                 class="adf-property-label">{{ property.label | translate }}</div>
         </mat-checkbox>
     </div>
 </ng-container>

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

@@ -1,8 +1,10 @@
-<div *ngIf="showProperty() || isEditable()"
+<div class="adf-property-label"
      [attr.data-automation-id]="'card-dateitem-label-' + property.key"
-     class="adf-property-label">{{ property.label | translate }}</div>
+     *ngIf="showProperty() || isEditable()">
+    {{ property.label | translate }}
+</div>
 
-<div class="adf-property-value">
+<div class="adf-property-value adf-property-value-padding-top">
     <span *ngIf="!isEditable()"
           [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
         <span [attr.data-automation-id]="'card-dateitem-' + property.key">

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

@@ -1,4 +1,6 @@
 @mixin adf-card-view-dateitem-theme($theme) {
+    $foreground: map-get($theme, foreground);
+
     .adf {
         &-invisible-date-input {
             height: 2px;
@@ -13,6 +15,8 @@
 
         &-dateitem-editable {
             cursor: pointer;
+            border-bottom: 1px solid mat-color($foreground, text, 0.42);
+            padding-bottom: 6px;
 
             &-controls {
                 display: flex;

lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.html

@@ -1,21 +1,20 @@
-<div [attr.data-automation-id]="'card-key-value-pairs-label-' + property.key" class="adf-property-label">{{ property.label | translate }}</div>
-<div class="adf-property-value">
+<div [attr.data-automation-id]="'card-key-value-pairs-label-' + property.key"
+     class="adf-property-label">{{ property.label | translate }}</div>
+<div class="adf-property-field">
 
-    <div *ngIf="isEditable()">
-        {{ 'CORE.CARDVIEW.KEYVALUEPAIRS.ADD' | translate }}
-        <button (click)="add()" mat-icon-button class="adf-card-view__key-value-pairs__add-btn" [attr.data-automation-id]="'card-key-value-pairs-button-' + property.key">
-            <mat-icon>add</mat-icon>
-        </button>
-    </div>
-
-    <div *ngIf="!isEditable()" class="adf-card-view__key-value-pairs__read-only">
-        <mat-table #table [dataSource]="matTableValues" class="mat-elevation-z8">
+    <div *ngIf="!isEditable()"
+         class="adf-card-view__key-value-pairs__read-only adf-property-value">
+        <mat-table #table
+                   [dataSource]="matTableValues"
+                   class="mat-elevation-z8">
             <ng-container matColumnDef="name">
-                <mat-header-cell *matHeaderCellDef>{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.NAME' | translate }}</mat-header-cell>
+                <mat-header-cell *matHeaderCellDef>{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.NAME' | translate }}
+                </mat-header-cell>
                 <mat-cell *matCellDef="let item">{{item.name}}</mat-cell>
             </ng-container>
             <ng-container matColumnDef="value">
-                <mat-header-cell *matHeaderCellDef>{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.VALUE' | translate }}</mat-header-cell>
+                <mat-header-cell *matHeaderCellDef>{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.VALUE' | translate }}
+                </mat-header-cell>
                 <mat-cell *matCellDef="let item">{{item.value}}</mat-cell>
             </ng-container>
 
@@ -25,15 +24,17 @@
     </div>
 
 
-    <div class="adf-card-view__key-value-pairs" *ngIf="isEditable() && values && values.length">
+    <div class="adf-card-view__key-value-pairs adf-property-value"
+         *ngIf="isEditable() && values && values.length">
         <div class="adf-card-view__key-value-pairs__row">
             <div class="adf-card-view__key-value-pairs__col">{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.NAME' | translate }}</div>
             <div class="adf-card-view__key-value-pairs__col">{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.VALUE' | translate }}</div>
         </div>
 
-        <div class="adf-card-view__key-value-pairs__row" *ngFor="let item of values; let i = index">
+        <div class="adf-card-view__key-value-pairs__row"
+             *ngFor="let item of values; let i = index">
             <div class="adf-card-view__key-value-pairs__col">
-                <mat-form-field class="adf-example-full-width">
+                <mat-form-field>
                     <input matInput
                            placeholder="{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.NAME' | translate }}"
                            (blur)="onBlur(item.value)"
@@ -42,17 +43,30 @@
                 </mat-form-field>
             </div>
             <div class="adf-card-view__key-value-pairs__col">
-                <mat-form-field class="adf-example-full-width">
+                <mat-form-field>
                     <input matInput
                            placeholder="{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.VALUE' | translate }}"
                            (blur)="onBlur(item.value)"
                            [attr.data-automation-id]="'card-'+ property.key +'-value-input-' + i"
                            [(ngModel)]="values[i].value">
+                    <button matSuffix
+                            mat-icon-button
+                            (click)="remove(i)"
+                            class="adf-card-view__key-value-pairs__remove-btn">
+                        <mat-icon>close</mat-icon>
+                    </button>
                 </mat-form-field>
             </div>
-            <button mat-icon-button (click)="remove(i)" class="adf-card-view__key-value-pairs__remove-btn">
-                <mat-icon>close</mat-icon>
-            </button>
         </div>
     </div>
+    <div *ngIf="isEditable()"
+         class="adf-property-value adf-card-view__key-value-pairs__add-btn-container">
+        <button (click)="add()"
+                mat-button
+                class="adf-card-view__key-value-pairs__add-btn"
+                [attr.data-automation-id]="'card-key-value-pairs-button-' + property.key">
+            {{ 'CORE.CARDVIEW.KEYVALUEPAIRS.ADD' | translate }}
+            <mat-icon>add</mat-icon>
+        </button>
+    </div>
 </div>

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

@@ -1,21 +1,45 @@
-.adf-card-view {
-    &__key-value-pairs {
-        &__col {
-            display: inline-block;
-            width: 39%;
+@mixin adf-card-view-keyvaluepairsitem-theme($theme) {
+    $foreground: map-get($theme, foreground);
 
-            .mat-form-field {
+    .adf-card-view {
+        &__key-value-pairs {
+            &__row {
+                display: flex;
+                justify-content: center;
+            }
+
+            &__col {
                 width: 100%;
-            }
-        }
 
-        &__read-only {
-            .mat-table {
-                box-shadow: none;
+                .mat-form-field {
+                    width: 100%;
+                    font-size: 14px;
+                }
+
+                .mat-form-field-appearance-legacy .mat-form-field-label {
+                    color: mat-color($foreground, text, 0.4) !important;
+                }
             }
 
-            .mat-header-row, .mat-row {
-                padding: 0;
+            &__add-btn-container {
+                display: flex;
+                justify-content: center;
+            }
+
+            &__add-btn.mat-button {
+                margin-bottom: 20px;
+            }
+
+            &__read-only {
+                padding-bottom: 20px;
+
+                .mat-table {
+                    box-shadow: none;
+                }
+
+                .mat-header-row, .mat-row {
+                    padding: 0;
+                }
             }
         }
     }

lib/core/card-view/components/card-view-mapitem/card-view-mapitem.component.html

@@ -1,16 +1,21 @@
-<div [attr.data-automation-id]="'card-mapitem-label-' + property.key" class="adf-property-label" *ngIf="showProperty()">{{ property.label | translate }}</div>
-<div class="adf-property-value">
+<div [attr.data-automation-id]="'card-mapitem-label-' + property.key"
+     class="adf-property-label"
+     *ngIf="showProperty()">{{ property.label | translate }}</div>
+<div class="adf-property-value adf-map-item-padding">
     <div>
-        <span *ngIf="!isClickable(); else elseBlock" [attr.data-automation-id]="'card-mapitem-value-' + property.key">
+        <span *ngIf="!isClickable(); else clickableTemplate"
+              [attr.data-automation-id]="'card-mapitem-value-' + property.key">
             <span *ngIf="showProperty();">{{ property.displayValue }}</span>
         </span>
-        <ng-template #elseBlock>
-            <span class="adf-mapitem-clickable-value" (click)="clicked()" [attr.data-automation-id]="'card-mapitem-value-' + property.key">
-                <span *ngIf="showProperty(); else elseEmptyValueBlock">{{ property.displayValue }}</span>
-            </span>
-        </ng-template>
     </div>
-    <ng-template #elseEmptyValueBlock>
+    <ng-template #clickableTemplate>
+        <span class="adf-mapitem-clickable-value"
+              (click)="clicked()"
+              [attr.data-automation-id]="'card-mapitem-value-' + property.key">
+            <span *ngIf="showProperty(); else emptyValueTemplate">{{ property.displayValue }}</span>
+        </span>
+    </ng-template>
+    <ng-template #emptyValueTemplate>
         {{ property.default | translate }}
     </ng-template>
 </div>

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

@@ -2,4 +2,8 @@
     &-mapitem-clickable-value {
         cursor: pointer !important;
     }
+
+    &-map-item-padding {
+        padding-top: 6px;
+    }
 }

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

@@ -1,14 +1,20 @@
-<div [attr.data-automation-id]="'card-select-label-' + property.key" class="adf-property-label">{{ property.label | translate }}</div>
-<div class="adf-property-value">
-    <div *ngIf="!isEditable()" data-automation-class="read-only-value">{{ property.displayValue | async }}</div>
+<div [attr.data-automation-id]="'card-select-label-' + property.key"
+     class="adf-property-label">{{ property.label | translate }}</div>
+<div class="adf-property-field">
+    <div *ngIf="!isEditable()"
+         class="adf-select-item-padding adf-property-value"
+         data-automation-class="read-only-value">{{ property.displayValue | async }}</div>
     <div *ngIf="isEditable()">
-        <mat-form-field>
-            <mat-select [(value)]="value" (selectionChange)="onChange($event)" data-automation-class="select-box">
-              <mat-option *ngIf="showNoneOption()">{{ 'CORE.CARDVIEW.NONE' | translate }}</mat-option>
-              <mat-option *ngFor="let option of getOptions() | async" [value]="option.key">
-                {{ option.label | translate }}
-              </mat-option>
+        <mat-form-field class="adf-select-item-padding-editable adf-property-value">
+            <mat-select [(value)]="value"
+                        (selectionChange)="onChange($event)"
+                        data-automation-class="select-box">
+                <mat-option *ngIf="showNoneOption()">{{ 'CORE.CARDVIEW.NONE' | translate }}</mat-option>
+                <mat-option *ngFor="let option of getOptions() | async"
+                            [value]="option.key">
+                    {{ option.label | translate }}
+                </mat-option>
             </mat-select>
-          </mat-form-field>
+        </mat-form-field>
     </div>
 </div>

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

@@ -1,3 +1,13 @@
 .mat-form-field-type-mat-select {
     width: 100%;
 }
+
+.adf-select-item-padding {
+    padding-top: 6px;
+    padding-bottom: 20px;
+}
+
+.adf-select-item-padding-editable {
+    padding-top: 6px;
+    padding-bottom: 6px;
+}

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

@@ -1,151 +1,124 @@
-<div [attr.data-automation-id]="'card-textitem-label-' + property.key"
-     class="adf-property-label"
-     *ngIf="showProperty() || isEditable()">{{ property.label | translate }}</div>
-<div class="adf-property-value">
-    <span *ngIf="!isEditable()">
-        <span *ngIf="!isClickable(); else nonClickableTemplate"
-              [attr.data-automation-id]="'card-textitem-value-' + property.key">
-            <span *ngIf="!isChipViewEnabled; else chipListTemplate">
-                <span *ngIf="showProperty() && !copyToClipboardAction"
-                      [ngClass]="property.multiline?'adf-textitem-multiline':'adf-textitem-scroll'"
-                      class="adf-textitem-value">
-                    {{ property.displayValue }}
-                </span>
-                <span *ngIf="showProperty() && copyToClipboardAction"
-                      [ngClass]="property.multiline?'adf-textitem-multiline':'adf-textitem-scroll'"
-                      (dblclick)="copyToClipboard(property.displayValue)"
-                      class="adf-textitem-value"
-                      matTooltipShowDelay="1000"
-                      [matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate">
-                    {{ property.displayValue }}
-                </span>
-            </span>
-        </span>
-        <ng-template #nonClickableTemplate>
-            <div role="button"
-                 class="adf-textitem-clickable"
-                 [attr.data-automation-id]="'card-textitem-toggle-' + property.key"
-                 (click)="clicked()"
-                 fxLayout="row"
-                 fxLayoutAlign="space-between center">
-                <span class="adf-textitem-clickable-value"
-                      [attr.data-automation-id]="'card-textitem-value-' + property.key">
-                    <span *ngIf="showProperty(); else emptyValueTemplate">{{ property.displayValue }}</span>
-                </span>
-                <button mat-icon-button
-                        fxFlex="0 0 auto"
-                        *ngIf="showClickableIcon()"
-                        class="adf-textitem-action"
-                        [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
-                        [attr.data-automation-id]="'card-textitem-clickable-icon-' + property.key">
-                    <mat-icon class="adf-textitem-icon">{{property?.icon}}</mat-icon>
-                </button>
-            </div>
-        </ng-template>
-    </span>
-    <span *ngIf="isEditable()">
-        <div *ngIf="!inEdit"
-             role="button"
-             tabindex="0"
-             [attr.aria-label]="'CORE.METADATA.ACTIONS.EDIT' | translate"
-             (click)="setEditMode(true)"
-             (keydown.enter)="setEditMode(true)"
-             class="adf-textitem-readonly"
-             [attr.data-automation-id]="'card-textitem-toggle-' + property.key"
-             fxLayout="row"
-             fxLayoutAlign="space-between center">
-            <span *ngIf="!isChipViewEnabled; else chipListTemplate"
-                  [attr.data-automation-id]="'card-textitem-value-' + property.key">
-                <span *ngIf="showProperty(); else emptyValueTemplate">{{ property.displayValue }}</span>
-            </span>
+<div [ngSwitch]="templateType">
+    <div class="adf-property-label"
+         [attr.data-automation-id]="'card-textitem-label-' + property.key"
+         *ngIf="showProperty || isEditable">
+        {{ property.label | translate }}
+    </div>
 
-            <button mat-icon-button
-                    fxFlex="0 0 auto"
-                    class="adf-textitem-action"
-                    [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
-                    [attr.data-automation-id]="'card-textitem-edit-icon-' + property.key">
-
-                <mat-icon class="adf-textitem-icon"> create</mat-icon>
+    <div *ngSwitchDefault>
+        <mat-form-field class="adf-property-field adf-card-textitem-field"
+                        [ngClass]="{ 'adf-property-read-only': !isEditable }">
+            <input matInput
+                   *ngIf="!property.multiline"
+                   class="adf-property-value"
+                   [placeholder]="property.default"
+                   [(ngModel)]="editedValue"
+                   (blur)="update()"
+                   (keydown.enter)="update()"
+                   [disabled]="!isEditable"
+                   (dblclick)="copyToClipboard(property.displayValue)"
+                   matTooltipShowDelay="1000"
+                   [matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
+                   [matTooltipDisabled]="isEditable"
+                   [attr.data-automation-id]="'card-textitem-value-' + property.key">
+            <textarea matInput
+                      *ngIf="property.multiline"
+                      matTextareaAutosize
+                      matAutosizeMaxRows="1"
+                      matAutosizeMaxRows="5"
+                      class="adf-property-value"
+                      [placeholder]="property.default"
+                      [(ngModel)]="editedValue"
+                      (blur)="update()"
+                      (keydown.enter)="update()"
+                      [disabled]="!isEditable"
+                      [attr.data-automation-id]="'card-textitem-value-' + property.key"></textarea>
+            <button mat-button
+                    matSuffix
+                    class="adf-property-clear-value"
+                    *ngIf="isEditable"
+                    mat-icon-button
+                    aria-label="Clear"
+                    (click)="editedValue=''">
+                <mat-icon>cancel</mat-icon>
             </button>
-        </div>
-        <div *ngIf="inEdit"
-             class="adf-textitem-editable">
-            <div class="adf-textitem-editable-controls">
-                <mat-form-field floatPlaceholder="never"
-                                class="adf-input-container">
-                    <input *ngIf="!isChipViewEnabled && !property.multiline"
-                           #editorInput
-                           (keydown.escape)="reset($event)"
-                           (keydown.enter)="update($event)"
-                           matInput
-                           class="adf-input"
-                           [placeholder]="property.default | translate"
-                           [(ngModel)]="editedValue"
-                           [attr.data-automation-id]="'card-textitem-editinput-' + property.key">
-                    <textarea *ngIf="!isChipViewEnabled && property.multiline"
-                              #editorInput
-                              matInput
-                              matTextareaAutosize
-                              matAutosizeMaxRows="1"
-                              matAutosizeMaxRows="5"
-                              class="adf-textarea"
-                              [placeholder]="property.default | translate"
-                              [(ngModel)]="editedValue"
-                              (input)="onTextAreaInputChange()"
-                              [attr.data-automation-id]="'card-textitem-edittextarea-' + property.key"></textarea>
-                    <div *ngIf="isChipViewEnabled">
-                        <mat-chip-list class="adf-input"
-                                       #chipList>
-                            <mat-chip *ngFor="let propertyValue of editedValue; let idx = index"
-                                      [removable]="true"
-                                      (removed)="removeValueFromList(idx)">
-                                {{ propertyValue }}
-                                <mat-icon matChipRemove>cancel</mat-icon>
-                            </mat-chip>
-                            <input #editorInput
-                                   [placeholder]="property.default | translate"
-                                   [matChipInputFor]="chipList"
-                                   [matChipInputAddOnBlur]="true"
-                                   (matChipInputTokenEnd)="addValueToList($event)"
-                                   [attr.data-automation-id]="'card-textitem-editchipinput-' + property.key">
-                        </mat-chip-list>
-                    </div>
-                </mat-form-field>
-                <button mat-icon-button
-                        class="adf-textitem-action"
-                        (click)="update($event)"
-                        [attr.title]="'CORE.METADATA.ACTIONS.SAVE' | translate"
-                        [attr.data-automation-id]="'card-textitem-update-' + property.key">
-                    <mat-icon class="adf-textitem-icon">done</mat-icon>
-                </button>
+            <mat-icon matSuffix
+                      *ngIf="isEditable"
+                      [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
+                      class="adf-textitem-edit-icon">mode_edit</mat-icon>
 
-                <button mat-icon-button
-                        (click)="reset($event)"
-                        class="adf-textitem-action"
-                        [attr.title]="'CORE.METADATA.ACTIONS.CANCEL' | translate"
-                        [attr.data-automation-id]="'card-textitem-reset-' + property.key">
+        </mat-form-field>
+    </div>
 
-                    <mat-icon>clear</mat-icon>
-                </button>
-            </div>
-            <mat-error [attr.data-automation-id]="'card-textitem-error-' + property.key"
-                       class="adf-textitem-editable-error"
-                       *ngIf="hasErrors()">
-                <ul>
-                    <li *ngFor="let errorMessage of errorMessages">{{ errorMessage | translate }}</li>
-                </ul>
-            </mat-error>
-        </div>
-    </span>
-    <ng-template #emptyValueTemplate>
-        <span class="adf-textitem-default-value">{{ property.default | translate }}</span>
-    </ng-template>
+    <mat-error [attr.data-automation-id]="'card-textitem-error-' + property.key"
+               class="adf-textitem-editable-error"
+               *ngIf="hasErrors">
+        <ul>
+            <li *ngFor="let errorMessage of errorMessages">{{ errorMessage | translate }}</li>
+        </ul>
+    </mat-error>
 
-    <ng-template #chipListTemplate>
-        <mat-chip-list>
-            <mat-chip *ngFor="let propertyValue of editedValue">
+    <div *ngSwitchCase="'chipsTemplate'"
+         class="adf-property-field adf-textitem-chip-list-container">
+        <mat-chip-list #chipList
+                       class="adf-textitem-chip-list">
+            <mat-chip *ngFor="let propertyValue of editedValue; let idx = index"
+                      [removable]="isEditable"
+                      (removed)="removeValueFromList(idx)">
                 {{ propertyValue }}
+                <mat-icon *ngIf="isEditable"
+                          matChipRemove>cancel</mat-icon>
             </mat-chip>
         </mat-chip-list>
-    </ng-template>
+
+        <mat-form-field *ngIf="isEditable"
+                        class="adf-property-field adf-textitem-chip-list-input"
+                        [ngClass]="{ 'adf-property-read-only': !isEditable }">
+            <input matInput
+                   class="adf-property-value"
+                   [placeholder]="property.default | translate"
+                   [matChipInputFor]="chipList"
+                   [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>
+
+    <div *ngSwitchCase="'clickableTemplate'"
+         role="button"
+         class="adf-textitem-clickable"
+         [ngClass]="{ 'adf-property-read-only': !isEditable }"
+         [attr.data-automation-id]="'card-textitem-toggle-' + property.key"
+         (click)="clicked()"
+         fxLayout="row"
+         fxLayoutAlign="space-between center">
+        <mat-form-field class="adf-property-field adf-card-textitem-field">
+            <input matInput
+                   [type]=property.inputType
+                   class="adf-property-value"
+                   [ngClass]="{ 'adf-textitem-clickable-value': !isEditable }"
+                   [placeholder]="property.default"
+                   [(ngModel)]="editedValue"
+                   (blur)="update()"
+                   (keydown.enter)="update()"
+                   [disabled]="!isEditable"
+                   [attr.data-automation-id]="'card-textitem-value-' + property.key">
+            <button mat-icon-button
+                    matSuffix
+                    fxFlex="0 0 auto"
+                    *ngIf="showClickableIcon"
+                    class="adf-textitem-action"
+                    [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
+                    [attr.data-automation-id]="'card-textitem-clickable-icon-' + property.key">
+                <mat-icon class="adf-textitem-icon">{{ property?.icon }}</mat-icon>
+            </button>
+        </mat-form-field>
+
+    </div>
+
+    <div *ngSwitchCase="'emptyTemplate'">
+        <span class="adf-textitem-default-value">{{ property.default | translate }}</span>
+    </div>
 </div>

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

@@ -5,17 +5,22 @@
     $outline: 1px solid mat-color($alfresco-ecm-blue, A200) !default;
 
     .adf {
-        &-textitem-icon {
+        &-textitem-edit-icon.mat-icon {
             font-size: 16px;
             width: 16px;
             height: 16px;
-        }
-
-        &-textitem-action {
             color: mat-color($foreground, text, 0.25);
         }
 
-        &-textitem-action:hover, &-textitem-action:focus {
+        &-textitem-action.mat-icon-button {
+            width: 20px;
+            height: 20px;
+            line-height: 20px;
+            color: mat-color($foreground, text, 0.25);
+        }
+
+        &-textitem-action:hover,
+        &-textitem-action:focus {
             color: mat-color($foreground, text);
         }
 
@@ -32,8 +37,23 @@
             }
         }
 
+        &-textitem-chip-list-container {
+            margin-bottom: 25px !important;
+            margin-top: 6px;
+
+            .mat-form-field-label {
+                margin-top: 6px;
+            }
+        }
+
         &-textitem-clickable {
             cursor: pointer !important;
+            padding-top: 3px;
+
+            .adf-textitem-edit-icon.mat-icon {
+                line-height: 16px;
+            }
+
             &:hover .adf-textitem-action {
                 color: mat-color($foreground, text);
             }
@@ -41,11 +61,10 @@
 
         &-textitem-clickable-value {
             cursor: pointer !important;
-            color: mat-color($primary);
+            color: mat-color($primary) !important;
         }
 
         &-textitem-editable {
-
             &-controls {
                 display: flex;
                 align-items: center;
@@ -148,5 +167,22 @@
         &-textitem-multiline {
             display: block;
         }
+
+        &-property-field .adf-property-clear-value {
+            display: none;
+        }
+
+        &-property-field.adf-card-textitem-field:hover {
+            .adf-textitem-edit-icon {
+                display: none;
+            }
+            .adf-property-clear-value {
+                color: mat-color($foreground, text, 0.25);
+                display: inline;
+            }
+            .adf-property-clear-value:hover {
+                color: mat-color($foreground, text, 1);
+            }
+        }
     }
 }

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Input, OnChanges, ViewChild } from '@angular/core';
+import { Component, Input, OnChanges } from '@angular/core';
 import { CardViewTextItemModel } from '../../models/card-view-textitem.model';
 import { CardViewUpdateService } from '../../services/card-view-update.service';
 import { BaseCardView } from '../base-card-view';
@@ -24,6 +24,13 @@ import { ClipboardService } from '../../../clipboard/clipboard.service';
 import { TranslationService } from '../../../services/translation.service';
 
 export const DEFAULT_SEPARATOR = ', ';
+const templateTypes = {
+    clickableTemplate: 'clickableTemplate',
+    multilineTemplate: 'multilineTemplate',
+    chipsTemplate: 'chipsTemplate',
+    emptyTemplate: 'emptyTemplate',
+    defaultTemplate: 'defaultTemplate'
+};
 
 @Component({
     selector: 'adf-card-view-textitem',
@@ -47,12 +54,9 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
     @Input()
     multiValueSeparator: string = DEFAULT_SEPARATOR;
 
-    @ViewChild('editorInput')
-    private editorInput: any;
-
-    inEdit: boolean = false;
     editedValue: string | string[];
     errorMessages: string[];
+    templateType: string;
 
     constructor(cardViewUpdateService: CardViewUpdateService,
                 private clipboardService: ClipboardService,
@@ -62,54 +66,28 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
 
     ngOnChanges(): void {
         this.resetValue();
+        this.setTemplateType();
     }
 
-    showProperty(): boolean {
-        return this.displayEmpty || !this.property.isEmpty();
-    }
-
-    showClickableIcon(): boolean {
-        return this.hasIcon() && this.editable;
-    }
-
-    isEditable(): boolean {
-        return this.editable && this.property.editable;
-    }
-
-    isClickable(): boolean {
-        return !!this.property.clickable;
-    }
-
-    hasIcon(): boolean {
-        return !!this.property.icon;
-    }
-
-    hasErrors(): boolean {
-        return this.errorMessages && this.errorMessages.length > 0;
-    }
-
-    setEditMode(editStatus: boolean): void {
-        this.inEdit = editStatus;
-        setTimeout(() => {
-            if (this.editorInput) {
-                this.editorInput.nativeElement.click();
+    private setTemplateType() {
+        if (this.showProperty || this.isEditable) {
+            if (this.isClickable) {
+                this.templateType = templateTypes.clickableTemplate;
+            } else if (this.isChipViewEnabled) {
+                this.templateType = templateTypes.chipsTemplate;
+            } else {
+                this.templateType = templateTypes.defaultTemplate;
             }
-        }, 0);
-    }
-
-    reset(event: Event): void {
-        event.stopPropagation();
-
-        this.resetValue();
-        this.setEditMode(false);
-        this.resetErrorMessages();
+        } else {
+            this.templateType = templateTypes.emptyTemplate;
+        }
     }
 
     resetValue() {
         if (this.isChipViewEnabled) {
             this.editedValue = this.property.value ? Array.from(this.property.value) : [];
         } else {
-            this.editedValue = this.property.multiline ? this.property.displayValue : this.property.value;
+            this.editedValue = this.property.displayValue;
         }
     }
 
@@ -117,14 +95,11 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
         this.errorMessages = [];
     }
 
-    update(event: Event): void {
-        event.stopPropagation();
-
+    update(): void {
         if (this.property.isValid(this.editedValue)) {
             const updatedValue = this.prepareValueForUpload(this.property, this.editedValue);
             this.cardViewUpdateService.update(<CardViewTextItemModel> { ...this.property }, updatedValue);
             this.property.value = updatedValue;
-            this.setEditMode(false);
             this.resetErrorMessages();
         } else {
             this.errorMessages = this.property.getValidationErrors(this.editedValue);
@@ -142,6 +117,7 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
     removeValueFromList(itemIndex: number) {
         if (typeof this.editedValue !== 'string') {
             this.editedValue.splice(itemIndex, 1);
+            this.update();
         }
     }
 
@@ -152,16 +128,12 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
         if (typeof this.editedValue !== 'string') {
             if (chipValue) {
                 this.editedValue.push(chipValue);
+                this.update();
             }
 
             if (chipInput) {
                 chipInput.value = '';
-            }
-        }
-    }
-
-    onTextAreaInputChange() {
-        this.errorMessages = this.property.getValidationErrors(this.editedValue);
+            }        }
     }
 
     clicked(): void {
@@ -172,9 +144,39 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
         }
     }
 
+    clearValue() {
+        this.editedValue = '';
+    }
+
     copyToClipboard(valueToCopy: string) {
-        const clipboardMessage = this.translateService.instant('CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');
-        this.clipboardService.copyContentToClipboard(valueToCopy, clipboardMessage);
+        if (this.copyToClipboard) {
+            const clipboardMessage = this.translateService.instant('CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');
+            this.clipboardService.copyContentToClipboard(valueToCopy, clipboardMessage);
+        }
+    }
+
+    get showProperty(): boolean {
+        return this.displayEmpty || !this.property.isEmpty();
+    }
+
+    get showClickableIcon(): boolean {
+        return this.hasIcon && this.editable;
+    }
+
+    get isEditable(): boolean {
+        return this.editable && this.property.editable;
+    }
+
+    get isClickable(): boolean {
+        return this.property.clickable;
+    }
+
+    get hasIcon(): boolean {
+        return !!this.property.icon;
+    }
+
+    get hasErrors(): boolean {
+        return this.errorMessages && this.errorMessages.length > 0;
     }
 
     get isChipViewEnabled(): boolean {

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

@@ -8,13 +8,43 @@
         .adf-property {
             margin-bottom: 20px;
 
+            .adf-property-value-padding-top {
+                margin-top: 6px;
+            }
+
+            .adf-property-field {
+                width: 100%;
+                margin-bottom: -25px;
+
+                .mat-form-field-infix {
+                    border-top-width: 0;
+                }
+
+                .mat-form-field-label {
+                    margin-top: 6px;
+                }
+
+                .adf-property-read-only {
+                    .mat-form-field-underline {
+                        display: none;
+                    }
+                }
+            }
+
+            .adf-property-read-only {
+                .mat-form-field-underline {
+                    display: none;
+                }
+            }
+
             .adf-property-label {
                 font-size: 12px;
                 color: mat-color($foreground, text, 0.54);
                 word-wrap: break-word;
             }
 
-            .adf-property-value {
+            .adf-property-value,
+            .mat-form-field-label {
                 font-size: 14px;
                 color: mat-color($foreground, text, 0.87);
             }

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

@@ -53,7 +53,7 @@ describe('CardViewComponent', () => {
 
             const value = fixture.debugElement.query(By.css('.adf-property-value'));
             expect(value).not.toBeNull();
-            expect(value.nativeElement.innerText).toBe('My value');
+            expect(value.nativeElement.value).toBe('My value');
         });
     }));
 
@@ -112,9 +112,9 @@ describe('CardViewComponent', () => {
             expect(labelValue).not.toBeNull();
             expect(labelValue.nativeElement.innerText).toBe('My default label');
 
-            const value = fixture.debugElement.query(By.css('.adf-property-value [data-automation-id="card-textitem-value-some-key"]'));
+            const value = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-some-key"]'));
             expect(value).not.toBeNull();
-            expect(value.nativeElement.innerText.trim()).toBe('default value');
+            expect(value.nativeElement.value).toBe('default value');
         });
     }));
 
@@ -137,9 +137,9 @@ describe('CardViewComponent', () => {
             expect(labelValue).not.toBeNull();
             expect(labelValue.nativeElement.innerText).toBe('My default label');
 
-            const value = fixture.debugElement.query(By.css('.adf-property-value [data-automation-id="card-textitem-value-some-key"]'));
+            const value = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-some-key"]'));
             expect(value).not.toBeNull();
-            expect(value.nativeElement.innerText.trim()).toBe('default value');
+            expect(value.nativeElement.value).toBe('default value');
         });
     }));
 });