CSX-73 Date and Select Satori (#11056)

* CSX-73 Date and Select Satori

* CSX-73 Fix process-header unit test

* CSX-73 Fix core unit test

* CSX-73 Fix core unit test

* CSX-73 Fix task-header unit test

* CSX-73 Fix task-header unit test

* CSX-73 Fix task-header unit test

* CSX-73 Fix card-view dateitem

* CSX-73 Fix card-view dateitem

---------

Co-authored-by: Sahana Ghosal <sahana.ghosal@hyland.com>

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

@@ -1,29 +1,50 @@
-<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 }">
+<mat-form-field
-    <span *ngIf="!isEditable && !property.multivalued" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
+    *ngIf="showProperty && !isEditable && !property.multivalued"
-        <span
+    [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key"
-            *ngIf="showProperty"
+    (dblclick)="copyToClipboard(property.displayValue)"
-            [attr.data-automation-id]="'card-dateitem-' + property.key"
+    [ngClass]="{ 'adf-property-read-only': !isEditable }"
-            (dblclick)="copyToClipboard(property.displayValue)"
+    class="adf-property-field">
-            [title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
+    <mat-label
-            >{{ property.displayValue }}</span
+        class="adf-property-label"
-        >
+        [ngClass]="{
-    </span>
+                    'adf-property-value-editable': editable,
-    <mat-form-field *ngIf="isEditable && !property.multivalued" class="adf-dateitem-editable hxp-input" [floatLabel]="property.default ? 'always' : null">
+                    '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.label | translate }}
+    </mat-label>
+    <input
+        matInput
+        [attr.data-automation-id]="'card-dateitem-' + property.key"
+        [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
+    class="adf-property-value"
+    [ngClass]="{ 'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty }"
+    >
+
+    <mat-form-field *ngIf="isEditable && !property.multivalued" class="adf-dateitem-editable adf-property-field hxp-input" [floatLabel]="property.default ? 'always' : null">
         <mat-label
+            *ngIf="isEditable"
             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"
@@ -79,51 +100,51 @@
                 [startAt]="valueDate"
             />
     </mat-form-field>
-    <ng-template #elseEmptyValueBlock>
+</div>
-        {{ property.default | translate }}
+<ng-template #elseEmptyValueBlock>
-    </ng-template>
+    {{ property.default | translate }}
+</ng-template>
 
-    <div *ngIf="property.multivalued" class="adf-property-field adf-dateitem-chip-list-container adf-dateitem-editable">
+<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-listbox #chipList class="adf-textitem-chip-list">
-            <mat-chip-option
+        <mat-chip-option
-                *ngFor="let propertyValue of property.displayValue; let idx = index"
+            *ngFor="let propertyValue of property.displayValue; let idx = index"
-                [removable]="isEditable"
+            [removable]="isEditable"
-                (removed)="removeValueFromList(idx)"
+            (removed)="removeValueFromList(idx)"
-            >
-                {{ propertyValue }}
-                <mat-icon *ngIf="isEditable" matChipRemove>cancel</mat-icon>
-            </mat-chip-option>
-        </mat-chip-listbox>
-
-        <div
-            *ngIf="isEditable"
-            class="adf-property-field adf-dateitem-editable-controls"
-            (click)="showDatePicker()"
-            tabindex="0"
-            role="button"
-            (keyup.enter)="showDatePicker()"
         >
-            <input
+            {{ propertyValue }}
-                class="adf-invisible-date-input"
+            <mat-icon *ngIf="isEditable" matChipRemove>cancel</mat-icon>
-                [attr.tabIndex]="-1"
+        </mat-chip-option>
-                [matDatetimepicker]="datetimePicker"
+    </mat-chip-listbox>
-                (dateChange)="addDateToList($event)"
+
-                [attr.id]="'card-view-dateitem-' + property.key"
+    <div
-            />
+        *ngIf="isEditable"
-            <mat-datetimepicker-toggle
+        class="adf-property-field adf-dateitem-editable-controls"
-                [attr.tabindex]="-1"
+        (click)="showDatePicker()"
-                matSuffix
+        tabindex="0"
-                [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
+        role="button"
-                [attr.data-automation-id]="'datepickertoggle-' + property.key"
+        (keyup.enter)="showDatePicker()"
-                [for]="datetimePicker"
+    >
-            />
+        <input
-            <mat-datetimepicker
+            class="adf-invisible-date-input"
-                #datetimePicker
+            [attr.tabIndex]="-1"
-                [type]="$any(property).type"
+            [matDatetimepicker]="datetimePicker"
-                [timeInterval]="5"
+            (dateChange)="addDateToList($event)"
-                [attr.data-automation-id]="'datepicker-' + property.key"
+            [attr.id]="'card-view-dateitem-' + property.key"
-                [startAt]="valueDate"
+        />
-            />
+        <mat-datetimepicker-toggle
-        </div>
+            [attr.tabindex]="-1"
+            matSuffix
+            [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
+            [attr.data-automation-id]="'datepickertoggle-' + property.key"
+            [for]="datetimePicker"
+        />
+        <mat-datetimepicker
+            #datetimePicker
+            [type]="$any(property).type"
+            [timeInterval]="5"
+            [attr.data-automation-id]="'datepicker-' + property.key"
+            [startAt]="valueDate"
+        />
     </div>
 </div>

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

@@ -64,14 +64,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', () => {
@@ -87,6 +87,7 @@ describe('CardViewDateItemComponent', () => {
         component.displayEmpty = false;
         fixture.detectChanges();
 
+        const getPropertyValue = (): string => testingUtils.getInnerTextByCSS('.adf-property-value');
         expect(getPropertyValue().trim()).toBe('');
     });
 
@@ -103,7 +104,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', () => {
@@ -213,7 +214,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,48 +1,51 @@
 <ng-container *ngIf="!property.isEmpty() || isEditable">
     <div [ngSwitch]="templateType">
         <div *ngSwitchDefault>
-        <div *ngIf="!isEditable"
+            <mat-form-field
-            [attr.data-automation-id]="'card-select-label-' + property.key"
+                *ngIf="!isEditable"
-            class="adf-property-label adf-property-label-non-editable"
+                [attr.data-automation-id]="'select-readonly-value-' + property.key"
-            >{{ property.label | translate }}
+                [title]="property.displayValue | async | translate"
-        </div>
+                class="adf-property-list adf-property adf-property-field"
-            <div class="adf-property-field">
+            >
-                <div
+                <mat-label
-                    *ngIf="!isEditable"
+                    [attr.data-automation-id]="'card-select-label-' + property.key"
-                    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"
                 >
-                    {{ property.displayValue | async | translate }}
+                    {{ property.label | translate }}
-                </div>
+                </mat-label>
-                <div *ngIf="isEditable">
+                <input
-                    <mat-form-field class="adf-property-value">
+                    matInput
-                        <mat-label
+                    class="adf-property-value"
-                            [attr.data-automation-id]="'card-select-label-' + property.key"
+                    [attr.tabIndex]="-1"
-                            class="adf-property-label adf-property-value-editable"
+                    [value]="property.displayValue | async | translate"
-                            [ngClass]="{
+                    data-automation-class="read-only-value"
-                                'adf-property-readonly-value': isReadonlyProperty
+                    disabled
-                            }"
+                    readonly
-                            >{{ property.label | translate }}
+                />
-                        </mat-label>
+            </mat-form-field>
-                        <mat-select
+            <mat-form-field class="adf-property-value" *ngIf="isEditable">
-                            [(value)]="value"
+                <mat-label
-                            [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty }"
+                    [attr.data-automation-id]="'card-select-label-' + property.key"
-                            panelClass="adf-select-filter"
+                    class="adf-property-label adf-property-value-editable"
-                            (selectionChange)="onChange($event)"
+                    [ngClass]="{
-                            data-automation-class="select-box"
+                        'adf-property-readonly-value': isReadonlyProperty
-                            [aria-label]="property.label | translate"
+                    }"
-                        >
+                    >{{ property.label | translate }}
-                            <adf-select-filter-input *ngIf="showInputFilter" (change)="onFilterInputChange($event)" />
+                </mat-label>
-                            <mat-option *ngIf="displayNoneOption">{{ 'CORE.CARDVIEW.NONE' | translate }}</mat-option>
+                <mat-select
-                            <mat-option *ngFor="let option of list$ | async" [value]="option.key">
+                    [(value)]="value"
-                                {{ option.label | translate }}
+                    [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty }"
-                            </mat-option>
+                    panelClass="adf-select-filter"
-                        </mat-select>
+                    (selectionChange)="onChange($event)"
-                    </mat-form-field>
+                    data-automation-class="select-box"
-                </div>
+                    [aria-label]="property.label | translate"
-            </div>
+                >
+                    <adf-select-filter-input *ngIf="showInputFilter" (change)="onFilterInputChange($event)" />
+                    <mat-option *ngIf="displayNoneOption">{{ 'CORE.CARDVIEW.NONE' | translate }}</mat-option>
+                    <mat-option *ngFor="let option of list$ | async" [value]="option.key">
+                        {{ option.label | translate }}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
         </div>
         <div *ngSwitchCase="'autocompleteBased'">
             <mat-form-field

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

@@ -25,7 +25,7 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 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;
@@ -85,7 +85,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', () => {
@@ -109,7 +110,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 () => {
@@ -284,7 +287,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');

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

@@ -53,7 +53,7 @@ describe('CardViewComponent', () => {
 
     const getPropertyLabel = (): string => testingUtils.getInnerTextByCSS('.adf-property-label');
     const getPropertyValue = (): string => testingUtils.getByCSS('.adf-property-value').nativeElement.value;
-    const getPropertyValueText = (): string => testingUtils.getInnerTextByCSS('.adf-property-value');
+    const getPropertyValueText = (): string => testingUtils.getInputByCSS('.adf-property-value').value;
     const getPropertyValueByDataAutomationId = (dataAutomationId: string): string =>
         testingUtils.getByDataAutomationId(dataAutomationId).nativeElement.value;
 

lib/process-services-cloud/src/lib/process/process-header/components/process-header-cloud.component.spec.ts

@@ -111,7 +111,7 @@ describe('ProcessHeaderCloudComponent', () => {
         await fixture.whenStable();
 
         const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-startDate"] .adf-property-value'));
-        expect(valueEl.nativeElement.innerText.trim()).toBe('Mar 9, 2019');
+        expect(valueEl.nativeElement.value.trim()).toBe('Mar 9, 2019');
     });
 
     it('should display lastModified date', async () => {
@@ -121,7 +121,7 @@ describe('ProcessHeaderCloudComponent', () => {
         await fixture.whenStable();
 
         const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-lastModified"] .adf-property-value'));
-        expect(valueEl.nativeElement.innerText.trim()).toBe('Mar 9, 2019');
+        expect(valueEl.nativeElement.value.trim()).toBe('Mar 9, 2019');
     });
 
     it('should display parentId', async () => {
@@ -216,8 +216,8 @@ describe('ProcessHeaderCloudComponent', () => {
             const lastModifiedElement = fixture.debugElement.query(By.css('[data-automation-id="header-lastModified"] .adf-property-value'));
 
             expect(component.dateFormat).toEqual('full');
-            expect(startedDateElement.nativeElement.innerText.trim()).toBe('Saturday, March 9, 2019 at 12:00:00 AM GMT+00:00');
+            expect(startedDateElement.nativeElement.value.trim()).toBe('Saturday, March 9, 2019 at 12:00:00 AM GMT+00:00');
-            expect(lastModifiedElement.nativeElement.innerText.trim()).toBe('Saturday, March 9, 2019 at 12:00:00 AM GMT+00:00');
+            expect(lastModifiedElement.nativeElement.value.trim()).toBe('Saturday, March 9, 2019 at 12:00:00 AM GMT+00:00');
         });
     });
 });

lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts

@@ -506,7 +506,7 @@ describe('TaskHeaderCloudComponent', () => {
             const createdDateElement = fixture.debugElement.query(By.css('[data-automation-id="header-created"] .adf-property-value'));
 
             expect(component.dateFormat).toEqual('full');
-            expect(createdDateElement.nativeElement.innerText.trim()).toBe('Monday, December 17, 2018 at 12:00:00 AM GMT+00:00');
+            expect(createdDateElement.nativeElement.value.trim()).toBe('Monday, December 17, 2018 at 12:00:00 AM GMT+00:00');
         });
     });
 

lib/process-services/src/lib/attachment/task-attachment-list/task-attachment-list.component.spec.ts

@@ -207,9 +207,7 @@ describe('TaskAttachmentList', () => {
 
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            expect(fixture.nativeElement.querySelector('div[adf-empty-list-header]').innerText.trim()).toEqual(
+            expect(fixture.nativeElement.querySelector('div[adf-empty-list-header]').value.trim()).toEqual('ADF_TASK_LIST.ATTACHMENT.EMPTY.HEADER');
-                'ADF_TASK_LIST.ATTACHMENT.EMPTY.HEADER'
-            );
         });
     });
 

lib/process-services/src/lib/process-list/components/process-instance-header/process-instance-header.component.spec.ts

@@ -64,7 +64,7 @@ describe('ProcessInstanceHeaderComponent', () => {
         component.ngOnChanges();
         fixture.detectChanges();
         const valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-dateitem-ended"]');
-        expect(valueEl.innerText).toBe('Nov 3, 2016');
+        expect(valueEl.value).toBe('Nov 3, 2016');
     });
 
     it('should display placeholder if no due date', () => {
@@ -72,7 +72,7 @@ describe('ProcessInstanceHeaderComponent', () => {
         component.ngOnChanges();
         fixture.detectChanges();
         const valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-dateitem-ended"]');
-        expect(valueEl.innerText).toBe('ADF_PROCESS_LIST.PROPERTIES.END_DATE_DEFAULT');
+        expect(valueEl.value).toBe('ADF_PROCESS_LIST.PROPERTIES.END_DATE_DEFAULT');
     });
 
     it('should display process category', async () => {
@@ -98,7 +98,7 @@ describe('ProcessInstanceHeaderComponent', () => {
         component.ngOnChanges();
         fixture.detectChanges();
         const valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-dateitem-created"]');
-        expect(valueEl.innerText).toBe('Nov 3, 2016');
+        expect(valueEl.value).toBe('Nov 3, 2016');
     });
 
     it('should display started by', async () => {