CSX-73 Date and Select Satori

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

@@ -1,129 +1,151 @@
-<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"
+    [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
+        [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"
+        [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-dateitem-editable-controls">
         <span
-            *ngIf="showProperty"
+            class="adf-datepicker-span-button"
-            [attr.data-automation-id]="'card-dateitem-' + property.key"
+            [attr.data-automation-id]="'datepicker-label-toggle-' + 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">
-        <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"
-        >
-            {{ property.label | translate }}
-        </mat-label>
-        <div class="adf-dateitem-editable-controls">
-            <span
-                class="adf-datepicker-span-button"
-                [attr.data-automation-id]="'datepicker-label-toggle-' + property.key"
-                (click)="showDatePicker()"
-                tabindex="0"
-                role="button"
-                (keyup.enter)="showDatePicker()"
-            >
-                <span *ngIf="showProperty; else elseEmptyValueBlock" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
-                    {{ property.displayValue }}</span
-                >
-            </span>
-        </div>
-        <input
-            matInput
-            class="adf-invisible-date-input"
-            [attr.tabIndex]="-1"
-            [matDatetimepicker]="datetimePicker"
-            [value]="valueDate"
-            (dateChange)="onDateChanged($event)"
-            [attr.id]="'card-view-dateitem-' + property.key"
-        />
-            <mat-icon
-                matIconSuffix
-                *ngIf="showClearAction"
-                class="adf-date-reset-icon"
-                (click)="onDateClear()"
-                [attr.title]="'CORE.METADATA.ACTIONS.CLEAR' | translate"
-                [attr.data-automation-id]="'datepicker-date-clear-' + property.key"
-            >
-                clear
-            </mat-icon>
-            <mat-datetimepicker-toggle
-                matIconSuffix
-                [attr.tabindex]="-1"
-                [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"
-            />
-    </mat-form-field>
-    <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)"
-            >
-                {{ 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
+            <span *ngIf="showProperty; else elseEmptyValueBlock" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
-                class="adf-invisible-date-input"
+                {{ property.displayValue }}</span
-                [attr.tabIndex]="-1"
+            >
-                [matDatetimepicker]="datetimePicker"
+        </span>
-                (dateChange)="addDateToList($event)"
+    </div>
-                [attr.id]="'card-view-dateitem-' + property.key"
+    <input
-            />
+        matInput
-            <mat-datetimepicker-toggle
+        class="adf-invisible-date-input"
-                [attr.tabindex]="-1"
+        [attr.tabIndex]="-1"
-                matSuffix
+        [matDatetimepicker]="datetimePicker"
-                [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
+        [value]="valueDate"
-                [attr.data-automation-id]="'datepickertoggle-' + property.key"
+        (dateChange)="onDateChanged($event)"
-                [for]="datetimePicker"
+        [attr.id]="'card-view-dateitem-' + property.key"
-            />
+    />
-            <mat-datetimepicker
+        <mat-icon
-                #datetimePicker
+            matIconSuffix
-                [type]="$any(property).type"
+            *ngIf="showClearAction"
-                [timeInterval]="5"
+            class="adf-date-reset-icon"
-                [attr.data-automation-id]="'datepicker-' + property.key"
+            (click)="onDateClear()"
-                [startAt]="valueDate"
+            [attr.title]="'CORE.METADATA.ACTIONS.CLEAR' | translate"
-            />
+            [attr.data-automation-id]="'datepicker-date-clear-' + property.key"
-        </div>
+        >
+            clear
+        </mat-icon>
+        <mat-datetimepicker-toggle
+            matIconSuffix
+            [attr.tabindex]="-1"
+            [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"
+        />
+</mat-form-field>
+
+<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)"
+        >
+            {{ 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"
+        />
     </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,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

@@ -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');