Revert "CSX-73 Date and Select Satori (#11056)" (#11144)

This reverts commit 9b6688ce10.

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

@@ -1,50 +1,29 @@
+<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>
 
-<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.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">
+<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"
+            (dblclick)="copyToClipboard(property.displayValue)"
+            [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" [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"
@@ -100,51 +79,51 @@
                 [startAt]="valueDate"
             />
     </mat-form-field>
-</div>
-<ng-template #elseEmptyValueBlock>
-    {{ property.default | translate }}
-</ng-template>
+    <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"
-            [removable]="isEditable"
-            (removed)="removeValueFromList(idx)"
+    <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"
+                [removable]="isEditable"
+                (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()"
         >
-            {{ 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
-            class="adf-invisible-date-input"
-            [attr.tabIndex]="-1"
-            [matDatetimepicker]="datetimePicker"
-            (dateChange)="addDateToList($event)"
-            [attr.id]="'card-view-dateitem-' + property.key"
-        />
-        <mat-datetimepicker-toggle
-            [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"
-        />
+            <input
+                class="adf-invisible-date-input"
+                [attr.tabIndex]="-1"
+                [matDatetimepicker]="datetimePicker"
+                (dateChange)="addDateToList($event)"
+                [attr.id]="'card-view-dateitem-' + property.key"
+            />
+            <mat-datetimepicker-toggle
+                [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>
 </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 getPropertyInputValue = (): HTMLInputElement => testingUtils.getInputByCSS('.adf-property-value');
+    const getPropertyValue = (): string => testingUtils.getInnerTextByCSS('.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(getPropertyInputValue().value.trim()).toBe('Jul 10, 2017');
+        expect(getPropertyValue().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,7 +87,6 @@ describe('CardViewDateItemComponent', () => {
         component.displayEmpty = false;
         fixture.detectChanges();
 
-        const getPropertyValue = (): string => testingUtils.getInnerTextByCSS('.adf-property-value');
         expect(getPropertyValue().trim()).toBe('');
     });
 
@@ -104,7 +103,7 @@ describe('CardViewDateItemComponent', () => {
         component.displayEmpty = true;
         fixture.detectChanges();
 
-        expect(getPropertyInputValue().value.trim()).toBe('FAKE-DEFAULT-KEY');
+        expect(getPropertyValue().trim()).toBe('FAKE-DEFAULT-KEY');
     });
 
     it('should render the default as value if the value is empty and editable:true', () => {
@@ -214,7 +213,7 @@ describe('CardViewDateItemComponent', () => {
         component.editable = false;
         fixture.detectChanges();
 
-        testingUtils.doubleClickByDataAutomationId(`card-${component.property.type}-value-${component.property.key}`);
+        testingUtils.doubleClickByDataAutomationId(`card-dateitem-${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,51 +1,48 @@
 <ng-container *ngIf="!property.isEmpty() || isEditable">
     <div [ngSwitch]="templateType">
         <div *ngSwitchDefault>
-            <mat-form-field
-                *ngIf="!isEditable"
-                [attr.data-automation-id]="'select-readonly-value-' + property.key"
-                [title]="property.displayValue | async | translate"
-                class="adf-property-list adf-property adf-property-field"
-            >
-                <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"
+        <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
+                    *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"
-                    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"
-                    [ngClass]="{
-                        'adf-property-readonly-value': isReadonlyProperty
-                    }"
-                    >{{ property.label | translate }}
-                </mat-label>
-                <mat-select
-                    [(value)]="value"
-                    [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty }"
-                    panelClass="adf-select-filter"
-                    (selectionChange)="onChange($event)"
-                    data-automation-class="select-box"
-                    [aria-label]="property.label | translate"
+                    [title]="property.displayValue | async | translate"
                 >
-                    <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>
+                    {{ 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"
+                            class="adf-property-label adf-property-value-editable"
+                            [ngClass]="{
+                                'adf-property-readonly-value': isReadonlyProperty
+                            }"
+                            >{{ property.label | translate }}
+                        </mat-label>
+                        <mat-select
+                            [(value)]="value"
+                            [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty }"
+                            panelClass="adf-select-filter"
+                            (selectionChange)="onChange($event)"
+                            data-automation-class="select-box"
+                            [aria-label]="property.label | translate"
+                        >
+                            <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>
         </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, SimpleChange } from '@angular/core';
+import { DebugElement } from '@angular/core';
 
 describe('CardViewSelectItemComponent', () => {
     let loader: HarnessLoader;
@@ -85,8 +85,7 @@ describe('CardViewSelectItemComponent', () => {
                 editable: false
             });
             fixture.detectChanges();
-
-            expect(testingUtils.getInnerTextByDataAutomationId('card-select-label-key')).toBe('Select box label');
+            expect(testingUtils.getInnerTextByCSS('.adf-property-label')).toBe('Select box label');
         });
 
         it('should render readOnly value is editable property is FALSE', () => {
@@ -110,9 +109,7 @@ describe('CardViewSelectItemComponent', () => {
             });
 
             fixture.detectChanges();
-
-            const inputEl = getReadOnlyElement().nativeElement as HTMLInputElement;
-            expect(inputEl.value).toBe('Two');
+            expect(getReadOnlyElement().nativeElement.title).toBe('Two');
         });
 
         it('should be possible edit selectBox item', async () => {
@@ -287,9 +284,7 @@ describe('CardViewSelectItemComponent', () => {
             const autocompleteValueSpy = spyOn(cardViewUpdateService.autocompleteInputValue$, 'next');
             component.editedValue = '';
             component.editable = true;
-            component.ngOnChanges({
-                property: new SimpleChange(undefined, component.property, true)
-            });
+            component.ngOnChanges({ property: { firstChange: true } } as any);
             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.getInputByCSS('.adf-property-value').value;
+    const getPropertyValueText = (): string => testingUtils.getInnerTextByCSS('.adf-property-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.value.trim()).toBe('Mar 9, 2019');
+        expect(valueEl.nativeElement.innerText.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.value.trim()).toBe('Mar 9, 2019');
+        expect(valueEl.nativeElement.innerText.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.value.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');
+            expect(startedDateElement.nativeElement.innerText.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');
         });
     });
 });

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.value.trim()).toBe('Monday, December 17, 2018 at 12:00:00 AM GMT+00:00');
+            expect(createdDateElement.nativeElement.innerText.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,7 +207,9 @@ describe('TaskAttachmentList', () => {
 
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            expect(fixture.nativeElement.querySelector('div[adf-empty-list-header]').value.trim()).toEqual('ADF_TASK_LIST.ATTACHMENT.EMPTY.HEADER');
+            expect(fixture.nativeElement.querySelector('div[adf-empty-list-header]').innerText.trim()).toEqual(
+                '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.value).toBe('Nov 3, 2016');
+        expect(valueEl.innerText).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.value).toBe('ADF_PROCESS_LIST.PROPERTIES.END_DATE_DEFAULT');
+        expect(valueEl.innerText).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.value).toBe('Nov 3, 2016');
+        expect(valueEl.innerText).toBe('Nov 3, 2016');
     });
 
     it('should display started by', async () => {