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

This reverts commit 9b6688ce10.
2025-09-17 14:21:29 +00:00 · 2025-08-26 11:00:03 +02:00
parent de537f0a0d
commit 0576aac985
9 changed files with 126 additions and 154 deletions
--- a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html
+++ b/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>
--- a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts
+++ b/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');
--- a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html
+++ b/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
--- a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.spec.ts
+++ b/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');
--- a/lib/core/src/lib/card-view/components/card-view/card-view.component.spec.ts
+++ b/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;