CSX-73 Date and Select Satori

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

@@ -1,29 +1,51 @@
-<mat-label
-    class="adf-property-label"
-    [attr.data-automation-id]="'card-dateitem-label-' + property.key"
-    *ngIf="showProperty && !isEditable"
-    [attr.for]="'card-view-dateitem-' + property.key"
-    [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }"
-    [title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
->
-    {{ property.label | translate }}
-</mat-label>
 
-<div class="adf-property-value" [ngClass]="{ 'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty }">
-    <span *ngIf="!isEditable && !property.multivalued" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
-        <span
-            *ngIf="showProperty"
-            [attr.data-automation-id]="'card-dateitem-' + property.key"
+<mat-form-field
+    *ngIf="showProperty && !isEditable && !property.multivalued"
+    [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key"
     (dblclick)="copyToClipboard(property.displayValue)"
+    [ngClass]="{ 'adf-property-read-only': !isEditable }"
+    class="adf-property-field">
+    <mat-label
+        class="adf-property-label"
+        [ngClass]="{
+                    'adf-property-value-editable': editable,
+                    'adf-property-readonly-value': isReadonlyProperty
+                }"
+        [attr.data-automation-id]="'card-dateitem-label-' + property.key"
+        [attr.for]="'card-view-dateitem-' + property.key"
         [title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
-            >{{ property.displayValue }}</span
     >
-    </span>
-    <mat-form-field *ngIf="isEditable && !property.multivalued" class="adf-dateitem-editable hxp-input">
+        {{ property.label | translate }}
+    </mat-label>
+    <input
+        matInput
+        [value]="property.displayValue"
+        title="{{ property.label | translate }}"
+        [attr.id]="'card-view-dateitem-' + property.key"
+        [attr.tabIndex]="-1"
+        [attr.aria-label]="property.label | translate"
+        class="adf-property-value"
+        [ngClass]="{
+                'adf-property-value-editable': editable,
+                'adf-property-readonly-value': isReadonlyProperty,
+            }"
+        readonly
+        disabled
+    />
+</mat-form-field>
+
+<div
+    *ngIf="!showProperty && !property.multivalued"
+    class="adf-property-value"
+    [ngClass]="{ 'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty }"
+    >
+    <span [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key"></span>
+</div>
+
+<mat-form-field *ngIf="isEditable && !property.multivalued" class="adf-dateitem-editable adf-property-field hxp-input">
     <mat-label
         class="adf-property-label"
         [attr.data-automation-id]="'card-dateitem-label-' + property.key"
-            *ngIf="isEditable"
         [attr.for]="'card-view-dateitem-' + property.key"
         [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }"
         [title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
@@ -78,12 +100,13 @@
             [attr.data-automation-id]="'datepicker-' + property.key"
             [startAt]="valueDate"
         />
-    </mat-form-field>
-    <ng-template #elseEmptyValueBlock>
-        {{ property.default | translate }}
-    </ng-template>
+</mat-form-field>
 
-    <div *ngIf="property.multivalued" class="adf-property-field adf-dateitem-chip-list-container adf-dateitem-editable">
+<ng-template #elseEmptyValueBlock>
+    {{ property.default | translate }}
+</ng-template>
+
+<div *ngIf="property.multivalued" class="adf-property-field adf-dateitem-chip-list-container adf-dateitem-editable">
     <mat-chip-listbox #chipList class="adf-textitem-chip-list">
         <mat-chip-option
             *ngFor="let propertyValue of property.displayValue; let idx = index"
@@ -125,5 +148,4 @@
             [startAt]="valueDate"
         />
     </div>
-    </div>
 </div>

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

@@ -66,14 +66,14 @@ describe('CardViewDateItemComponent', () => {
     afterEach(() => fixture.destroy());
 
     const getPropertyLabel = (): string => testingUtils.getInnerTextByCSS('.adf-property-label');
-    const getPropertyValue = (): string => testingUtils.getInnerTextByCSS('.adf-property-value');
+    const getPropertyInputValue = (): HTMLInputElement => testingUtils.getInputByCSS('.adf-property-value');
     const getDateTime = (): string => testingUtils.getInnerTextByCSS('.adf-datepicker-span-button');
 
     it('should render the label and value', () => {
         fixture.detectChanges();
 
         expect(getPropertyLabel()).toBe('Date label');
-        expect(getPropertyValue().trim()).toBe('Jul 10, 2017');
+        expect(getPropertyInputValue().value.trim()).toBe('Jul 10, 2017');
     });
 
     it('should NOT render the default as value if the value is empty, editable:false and displayEmpty is false', () => {
@@ -89,6 +89,7 @@ describe('CardViewDateItemComponent', () => {
         component.displayEmpty = false;
         fixture.detectChanges();
 
+        const getPropertyValue = (): string => testingUtils.getInnerTextByCSS('.adf-property-value');
         expect(getPropertyValue().trim()).toBe('');
     });
 
@@ -105,7 +106,7 @@ describe('CardViewDateItemComponent', () => {
         component.displayEmpty = true;
         fixture.detectChanges();
 
-        expect(getPropertyValue().trim()).toBe('FAKE-DEFAULT-KEY');
+        expect(getPropertyInputValue().value.trim()).toBe('FAKE-DEFAULT-KEY');
     });
 
     it('should render the default as value if the value is empty and editable:true', () => {
@@ -215,7 +216,7 @@ describe('CardViewDateItemComponent', () => {
         component.editable = false;
         fixture.detectChanges();
 
-        testingUtils.doubleClickByDataAutomationId(`card-dateitem-${component.property.key}`);
+        testingUtils.doubleClickByDataAutomationId(`card-${component.property.type}-value-${component.property.key}`);
 
         fixture.detectChanges();
         expect(clipboardService.copyContentToClipboard).toHaveBeenCalledWith('Jul 10, 2017', 'CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');

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

@@ -1,23 +1,28 @@
 <ng-container *ngIf="!property.isEmpty() || isEditable">
     <div [ngSwitch]="templateType">
         <div *ngSwitchDefault>
-        <div *ngIf="!isEditable"
-            [attr.data-automation-id]="'card-select-label-' + property.key"
-            class="adf-property-label adf-property-label-non-editable"
-            >{{ property.label | translate }}
-        </div>
-            <div class="adf-property-field">
-                <div
+            <mat-form-field
                 *ngIf="!isEditable"
-                    class="adf-property-value adf-property-read-only"
                 [attr.data-automation-id]="'select-readonly-value-' + property.key"
-                    data-automation-class="read-only-value"
                 [title]="property.displayValue | async | translate"
+                class="adf-property-list adf-property adf-property-field"
             >
-                    {{ property.displayValue | async | translate }}
-                </div>
-                <div *ngIf="isEditable">
-                    <mat-form-field class="adf-property-value">
+                <mat-label
+                    [attr.data-automation-id]="'card-select-label-' + property.key"
+                >
+                    {{ property.label | translate }}
+                </mat-label>
+                <input
+                    matInput
+                    class="adf-property-value"
+                    [attr.tabIndex]="-1"
+                    [value]="property.displayValue | async | translate"
+                    data-automation-class="read-only-value"
+                    disabled
+                    readonly
+                />
+            </mat-form-field>
+            <mat-form-field class="adf-property-value" *ngIf="isEditable">
                 <mat-label
                     [attr.data-automation-id]="'card-select-label-' + property.key"
                     class="adf-property-label adf-property-value-editable"
@@ -42,8 +47,6 @@
                 </mat-select>
             </mat-form-field>
         </div>
-            </div>
-        </div>
         <div *ngSwitchCase="'autocompleteBased'">
             <mat-form-field
                 class="adf-property-field adf-card-selectitem-autocomplete"

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

@@ -27,7 +27,7 @@ import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { NoopTranslateModule } from '../../../testing/noop-translate.module';
 import { UnitTestingUtils } from '../../../testing/unit-testing-utils';
 import { CardViewUpdateService } from '../../services/card-view-update.service';
-import { DebugElement } from '@angular/core';
+import { DebugElement, SimpleChange } from '@angular/core';
 
 describe('CardViewSelectItemComponent', () => {
     let loader: HarnessLoader;
@@ -87,7 +87,8 @@ describe('CardViewSelectItemComponent', () => {
                 editable: false
             });
             fixture.detectChanges();
-            expect(testingUtils.getInnerTextByCSS('.adf-property-label')).toBe('Select box label');
+
+            expect(testingUtils.getInnerTextByDataAutomationId('card-select-label-key')).toBe('Select box label');
         });
 
         it('should render readOnly value is editable property is FALSE', () => {
@@ -111,7 +112,9 @@ describe('CardViewSelectItemComponent', () => {
             });
 
             fixture.detectChanges();
-            expect(getReadOnlyElement().nativeElement.title).toBe('Two');
+
+            const inputEl = getReadOnlyElement().nativeElement as HTMLInputElement;
+            expect(inputEl.value).toBe('Two');
         });
 
         it('should be possible edit selectBox item', async () => {
@@ -286,7 +289,9 @@ describe('CardViewSelectItemComponent', () => {
             const autocompleteValueSpy = spyOn(cardViewUpdateService.autocompleteInputValue$, 'next');
             component.editedValue = '';
             component.editable = true;
-            component.ngOnChanges({ property: { firstChange: true } } as any);
+            component.ngOnChanges({
+                property: new SimpleChange(undefined, component.property, true)
+            });
             fixture.detectChanges();
 
             component.autocompleteControl.setValue('new value');