AAE-34482 Modelling inconsistencies in mat form fields label alignments ii (#10929)

* AAE-34482 fixing card view datetime component in adf using mat-label

* AAE-34482 fixing the padding for mat-form-field labels

* AAE-34482 resolving the pr review comments

* AAE-34482 changing the floatType from 'auto' to null

* AAE-34482 changing the scss class name as per the review comment

* AAE-34482 fixing the left units

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

@@ -1,13 +1,14 @@
-<label
+<mat-label
     class="adf-property-label"
     [attr.data-automation-id]="'card-dateitem-label-' + property.key"
-    *ngIf="showProperty || isEditable"
+    *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 }}
-</label>
+</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
@@ -18,10 +19,20 @@
             >{{ property.displayValue }}</span
         >
     </span>
-    <div *ngIf="isEditable && !property.multivalued" class="adf-dateitem-editable">
+    <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-toggle"
+                class="adf-datepicker-span-button"
                 [attr.data-automation-id]="'datepicker-label-toggle-' + property.key"
                 (click)="showDatePicker()"
                 tabindex="0"
@@ -32,8 +43,18 @@
                     {{ 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()"
@@ -42,43 +63,33 @@
             >
                 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"
             />
-        </div>
 
-        <input
+            <mat-datetimepicker
-            class="adf-invisible-date-input"
+                #datetimePicker
-            [attr.tabIndex]="-1"
+                [type]="$any(property).type"
-            [matDatetimepicker]="datetimePicker"
+                [timeInterval]="5"
-            [value]="valueDate"
+                [attr.data-automation-id]="'datepicker-' + property.key"
-            (dateChange)="onDateChanged($event)"
+                [startAt]="valueDate"
-            [attr.id]="'card-view-dateitem-' + property.key"
+            />
-        />
+    </mat-form-field>
-
-        <mat-datetimepicker
-            #datetimePicker
-            [type]="$any(property).type"
-            [timeInterval]="5"
-            [attr.data-automation-id]="'datepicker-' + property.key"
-            [startAt]="valueDate"
-        />
-    </div>
     <ng-template #elseEmptyValueBlock>
         {{ property.default | translate }}
     </ng-template>
 
-    <div *ngIf="property.multivalued"
+    <div *ngIf="property.multivalued" class="adf-property-field adf-dateitem-chip-list-container adf-dateitem-editable">
-         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)">
+                (removed)="removeValueFromList(idx)"
+            >
                 {{ propertyValue }}
                 <mat-icon *ngIf="isEditable" matChipRemove>cancel</mat-icon>
             </mat-chip-option>

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

@@ -6,7 +6,6 @@
         padding-bottom: 6px;
         line-height: 20px;
         color: var(--adf-metadata-property-panel-title-color);
-        border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
         margin-top: 10px;
 
         &.adf-property-value-editable {
@@ -42,7 +41,6 @@
     .adf-dateitem-editable {
         cursor: pointer;
         width: 100%;
-        padding: 0 5px;
 
         /* stylelint-disable-next-line no-descending-specificity */
         &-controls {
@@ -62,7 +60,7 @@
                 transform: scale(0.8);
             }
 
-            .adf-datepicker-toggle {
+            .adf-datepicker-span-button {
                 flex: 1 0 auto;
                 font-size: 14px;
             }

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

@@ -28,6 +28,7 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { addMinutes } from 'date-fns';
 import { NoopTranslateModule } from '../../../testing/noop-translate.module';
 import { UnitTestingUtils } from '../../../testing/unit-testing-utils';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('CardViewDateItemComponent', () => {
     let loader: HarnessLoader;
@@ -38,7 +39,7 @@ describe('CardViewDateItemComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [NoopTranslateModule, CardViewDateItemComponent]
+            imports: [NoopTranslateModule, CardViewDateItemComponent, NoopAnimationsModule]
         });
         appConfigService = TestBed.inject(AppConfigService);
         appConfigService.config.dateValues = {
@@ -66,6 +67,7 @@ describe('CardViewDateItemComponent', () => {
 
     const getPropertyLabel = (): string => testingUtils.getInnerTextByCSS('.adf-property-label');
     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();
@@ -119,7 +121,7 @@ describe('CardViewDateItemComponent', () => {
         component.editable = true;
         fixture.detectChanges();
 
-        expect(getPropertyValue().trim()).toBe('FAKE-DEFAULT-KEY');
+        expect(getDateTime().trim()).toBe('FAKE-DEFAULT-KEY');
     });
 
     it('should render value when editable:true', () => {
@@ -128,7 +130,7 @@ describe('CardViewDateItemComponent', () => {
         component.property.editable = true;
         fixture.detectChanges();
 
-        expect(getPropertyValue().trim()).toBe('Jul 10, 2017');
+        expect(getDateTime().trim()).toBe('Jul 10, 2017');
     });
 
     it('should render the picker and toggle in case of editable:true', () => {

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

@@ -41,6 +41,8 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
 
 @Component({
     providers: [
@@ -57,9 +59,11 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
         MatIconModule,
         MatDatetimepickerModule,
         MatChipsModule,
+        MatInputModule,
         MatFormFieldModule,
         MatDatepickerModule,
-        MatSnackBarModule
+        MatSnackBarModule,
+        ReactiveFormsModule
     ],
     templateUrl: './card-view-dateitem.component.html',
     styleUrls: ['./card-view-dateitem.component.scss'],
@@ -78,6 +82,8 @@ export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemMode
 
     valueDate: Date;
 
+    cardViewDateTimeControl: FormControl<Date> = new FormControl<Date>(null);
+
     private readonly destroyRef = inject(DestroyRef);
 
     constructor(

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

@@ -1,36 +1,41 @@
 <ng-container *ngIf="!property.isEmpty() || isEditable">
     <div [ngSwitch]="templateType">
         <div *ngSwitchDefault>
-            <div
+        <div *ngIf="!isEditable"
-                [attr.data-automation-id]="'card-select-label-' + property.key"
+            [attr.data-automation-id]="'card-select-label-' + property.key"
-                class="adf-property-label"
+            class="adf-property-label"
-                [ngClass]="{
-                    'adf-property-value-editable': isEditable,
-                    'adf-property-readonly-value': isReadonlyProperty
-                }"
             >{{ property.label | translate }}
-            </div>
+        </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">{{ (property.displayValue | async) | translate }}
+                    data-automation-class="read-only-value"
+                >
+                    {{ property.displayValue | async | translate }}
                 </div>
                 <div *ngIf="isEditable">
-                    <mat-form-field class="adf-property-value" [ngClass]="{'adf-property-value-editable': 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">
+                            [aria-label]="property.label | translate"
-                            <adf-select-filter-input *ngIf="showInputFilter" (change)="onFilterInputChange($event)"/>
+                        >
+                            <adf-select-filter-input *ngIf="showInputFilter" (change)="onFilterInputChange($event)" />
                             <mat-option *ngIf="displayNoneOption">{{ 'CORE.CARDVIEW.NONE' | translate }}</mat-option>
-                            <mat-option
+                            <mat-option *ngFor="let option of list$ | async" [value]="option.key">
-                                *ngFor="let option of list$ | async"
-                                [value]="option.key">
                                 {{ option.label | translate }}
                             </mat-option>
                         </mat-select>
@@ -42,7 +47,8 @@
             <mat-form-field
                 class="adf-property-field adf-card-selectitem-autocomplete"
                 [ngClass]="{ 'adf-property-read-only': !isEditable }"
-                [floatLabel]="'always'">
+                [floatLabel]="property.default ? 'always' : null"
+            >
                 <mat-label
                     *ngIf="showProperty || isEditable"
                     [attr.data-automation-id]="'card-autocomplete-based-selectitem-label-' + property.key"
@@ -50,7 +56,8 @@
                     [ngClass]="{
                         'adf-property-value-editable': isEditable,
                         'adf-property-readonly-value': isReadonlyProperty
-                    }">
+                    }"
+                >
                     {{ property.label | translate }}
                 </mat-label>
                 <input
@@ -68,10 +75,12 @@
                     [title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
                     [attr.data-automation-id]="'card-autocomplete-based-selectitem-value-' + property.key"
                 />
-                <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete"
+                <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="onOptionSelected($event)">
-                                  (optionSelected)="onOptionSelected($event)">
+                    <mat-option
-                    <mat-option *ngFor="let option of property.options$ | async" [value]="option.key"
+                        *ngFor="let option of property.options$ | async"
-                                [attr.data-automation-id]="'card-autocomplete-based-selectitem-option-' + property.key">
+                        [value]="option.key"
+                        [attr.data-automation-id]="'card-autocomplete-based-selectitem-option-' + property.key"
+                    >
                         {{ option.label }}
                     </mat-option>
                 </mat-autocomplete>

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

@@ -34,7 +34,8 @@
             }
 
             #{ms.$mat-select-trigger} {
-                padding: 6px 12px 6px 6px;
+                padding-left: 6px;
+                padding-right: 6px;
             }
         }
     }

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

@@ -173,10 +173,11 @@ describe('CardViewSelectItemComponent', () => {
             component.ngOnChanges({});
             component.editable = true;
             fixture.detectChanges();
-
+            const not_editable_label = fixture.nativeElement.querySelector('.adf-property-label-not-editable');
             const field = await testingUtils.getMatFormFieldByCSS('.adf-property-value');
 
-            expect(await field.hasLabel()).toBeFalse();
+            expect(await field.hasLabel()).toBeTrue();
+            expect(not_editable_label).toBeNull();
         });
     });
 

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

@@ -5,7 +5,6 @@
             [ngClass]="{
                 'adf-property-read-only': !isEditable
             }"
-            [floatLabel]="'always'"
         >
             <mat-label
                 *ngIf="showProperty || isEditable"
@@ -111,7 +110,7 @@
         (keyup.enter)="clicked()"
         (click)="clicked()"
     >
-        <mat-form-field class="adf-property-field adf-card-textitem-field" [floatLabel]="'always'">
+        <mat-form-field class="adf-property-field adf-card-textitem-field" [floatLabel]="property.default ? 'always' : null">
             <mat-label
                 *ngIf="showProperty || isEditable"
                 [attr.data-automation-id]="'card-textitem-label-' + property.key"

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

@@ -97,7 +97,6 @@ describe('CardViewComponent', () => {
 
         fixture.detectChanges();
         await fixture.whenStable();
-
         expect(getPropertyLabel()).toBe('My date label');
         expect(getPropertyValueText()).toBe('6/14/17, 12:00 AM');
     });

lib/core/src/lib/form/components/form-renderer.component.scss

@@ -33,7 +33,7 @@
         margin: 0;
         background-color: white;
         position: absolute;
-        width: 96%;
+        width: 98%;
         /* stylelint-disable-next-line declaration-no-important */
         margin-left: 0 !important;
         /* stylelint-disable-next-line declaration-no-important */

lib/core/src/lib/form/components/widgets/amount/amount.widget.html

@@ -10,7 +10,7 @@
         >
     </div>
     <div>
-        <mat-form-field class="adf-amount-widget__input adf-form-field-input" [hideRequiredMarker]="true" [floatLabel]="placeholder ? 'always' : 'auto'">
+        <mat-form-field class="adf-amount-widget__input adf-form-field-input" [hideRequiredMarker]="true" [floatLabel]="placeholder ? 'always' : null">
             <mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id"
                 >{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></mat-label
             >

lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html

@@ -10,7 +10,7 @@
     <div>
         <mat-form-field class="adf-date-time-widget adf-form-field-input"
                         [class.adf-left-label-input-datepicker]="field.leftLabels"
-                        [hideRequiredMarker]="true" [floatLabel]="field.placeholder ? 'always' : 'auto'">
+                        [hideRequiredMarker]="true" [floatLabel]="field.placeholder ? 'always' : null">
             <mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
                 {{ field.name | translate }} ({{ field.dateDisplayFormat }})<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
             </mat-label>

lib/core/src/lib/form/components/widgets/date/date.widget.html

@@ -1,5 +1,5 @@
 <div class="{{ field.className }}" id="data-widget" [class.adf-invalid]="dateInputControl.invalid && dateInputControl.touched">
-    <mat-form-field [floatLabel]="'always'" class="adf-date-widget adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : 'auto'">
+    <mat-form-field [floatLabel]="'always'" class="adf-date-widget adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
         <mat-label class="adf-label"
                    [id]="field.id + '-label'"
                    [attr.for]="field.id">

lib/core/src/lib/form/components/widgets/decimal/decimal.component.html

@@ -9,7 +9,7 @@
     </div>
 
     <div>
-        <mat-form-field [hideRequiredMarker]="true" class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : 'auto'">
+        <mat-form-field [hideRequiredMarker]="true" class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
             <mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
                 {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
             </mat-label>

lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html

@@ -1,7 +1,7 @@
 <div class="adf-multiline-text-widget {{ field.className }}"
      [class.adf-invalid]="!field.isValid && isTouched()"
      [class.adf-readonly]="field.readOnly">
-    <mat-form-field floatPlaceholder="never" [hideRequiredMarker]="true" class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : 'auto'">
+    <mat-form-field floatPlaceholder="never" [hideRequiredMarker]="true" class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
         <mat-label class="adf-label" [attr.for]="field.id">
             {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
         </mat-label>

lib/core/src/lib/form/components/widgets/number/number.widget.html

@@ -9,7 +9,7 @@
         </label>
     </div>
     <div>
-        <mat-form-field [hideRequiredMarker]="true" class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : 'auto'">
+        <mat-form-field [hideRequiredMarker]="true" class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
             <mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
                 {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
             </mat-label>

lib/core/src/lib/form/components/widgets/text/text.widget.html

@@ -8,7 +8,7 @@
         </label>
     </div>
     <div>
-        <mat-form-field [hideRequiredMarker]="true" class="adf-form-field-input" [floatLabel]="placeholder ? 'always' : 'auto'">
+        <mat-form-field [hideRequiredMarker]="true" class="adf-form-field-input" [floatLabel]="placeholder ? 'always' : null">
             <mat-label *ngIf="!field.leftLabels" class="adf-label" [attr.for]="field.id">
                 {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
             </mat-label>

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

@@ -143,7 +143,9 @@ describe('TaskHeaderCloudComponent', () => {
             await fixture.whenStable();
             fixture.detectChanges();
 
-            const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-dueDate"] .adf-property-value'));
+            const valueEl = fixture.debugElement.query(
+                By.css('[data-automation-id="header-dueDate"] .adf-property-value .adf-datepicker-span-button')
+            );
             expect(valueEl.nativeElement.innerText.trim()).toBe('Monday, December 17, 2018 at 12:00:55 PM GMT+00:00');
         });
 
@@ -164,7 +166,9 @@ describe('TaskHeaderCloudComponent', () => {
             component.refreshData();
             fixture.detectChanges();
             await fixture.whenStable();
-            const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-dueDate"] .adf-property-value'));
+            const valueEl = fixture.debugElement.query(
+                By.css('[data-automation-id="header-dueDate"] .adf-property-value .adf-datepicker-span-button')
+            );
             expect(valueEl.nativeElement.innerText.trim()).toBe('ADF_CLOUD_TASK_HEADER.PROPERTIES.DUE_DATE_DEFAULT');
         });
 
@@ -172,7 +176,7 @@ describe('TaskHeaderCloudComponent', () => {
             component.taskDetails.processInstanceId = null;
             fixture.detectChanges();
             await fixture.whenStable();
-            const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-parentName"] input'));
+            const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-parentName"] input '));
             expect(valueEl.nativeElement.value).toEqual('ADF_CLOUD_TASK_HEADER.PROPERTIES.PARENT_NAME_DEFAULT');
         });
 

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

@@ -353,7 +353,7 @@ describe('TaskHeaderComponent', () => {
         fixture.detectChanges();
         await fixture.whenStable();
 
-        const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-dueDate"] .adf-property-value'));
+        const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-dueDate"] .adf-property-value .adf-datepicker-span-button'));
         expect(valueEl.nativeElement.innerText.trim()).toBe('Nov 3, 2016');
     });
 
@@ -364,7 +364,7 @@ describe('TaskHeaderComponent', () => {
         fixture.detectChanges();
         await fixture.whenStable();
 
-        const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-dueDate"] .adf-property-value'));
+        const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-dueDate"] .adf-property-value .adf-datepicker-span-button'));
         expect(valueEl.nativeElement.innerText.trim()).toBe('ADF_TASK_LIST.PROPERTIES.DUE_DATE_DEFAULT');
     });