From 0e4fced94ecb9f00f48695b969615062d5f90ebf Mon Sep 17 00:00:00 2001
From: Darren Thornton <6361057+dthornton-hyl@users.noreply.github.com>
Date: Wed, 13 Aug 2025 08:42:05 -0500
Subject: [PATCH] AAE-37073 Fix error message location and field not
 highlighting red for card-view-textitem component (#11115)

* AAE-37073 fix error location and make field highlight red if error

* AAE-37073 code review update - revert change from TranslateModule back to TranslatePipe
---
 .../card-view-textitem.component.html                 |  1 +
 .../card-view-textitem.component.scss                 |  4 ++++
 .../card-view-textitem.component.spec.ts              | 11 ++++++++++-
 .../card-view-textitem.component.ts                   | 10 +++++++++-
 4 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
index 60dd416349..44a0a89eca 100644
--- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
+++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
@@ -1,6 +1,7 @@
 <div [ngSwitch]="templateType">
     <div *ngSwitchDefault>
         <mat-form-field
+            subscriptSizing="dynamic"
             class="adf-property-field adf-card-textitem-field"
             [ngClass]="{
                 'adf-property-read-only': !isEditable
diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss
index 87637daf1b..ee97abcb7a 100644
--- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss
+++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss
@@ -5,6 +5,10 @@
         font-size: var(--theme-caption-font-size);
         padding-top: 6px;
 
+        &::before {
+            display: none;
+        }
+
         ul {
             margin: 0;
             padding: 0;
diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts
index 3ffa2ed83c..9c6ea8439b 100644
--- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts
+++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts
@@ -49,6 +49,7 @@ describe('CardViewTextItemComponent', () => {
 
     const updateTextField = async (key: string, value: string) => {
         await testingUtils.fillMatInputByDataAutomationId(`card-textitem-value-${key}`, value);
+        component.update();
         fixture.detectChanges();
     };
 
@@ -69,6 +70,7 @@ describe('CardViewTextItemComponent', () => {
     const verifyNoErrors = (key: string) => {
         const errorElement = getErrorElements(key);
         expect(errorElement.length).toBe(0);
+        expect(component.textInput.errors).toBeNull();
     };
 
     const checkCtrlZActions = (ctrlKeyValue: boolean, codeValue: string, metaKeyValue: boolean, mockTestValue: string, flag: boolean) => {
@@ -613,6 +615,7 @@ describe('CardViewTextItemComponent', () => {
             await fixture.whenStable();
 
             expect(component.errors).toBe(expectedErrorMessages);
+            expect(component.textInput.errors?.['customError']).toEqual(true);
         });
 
         it('should set the errorMessages properly if the editedValue is valid', async () => {
@@ -621,7 +624,7 @@ describe('CardViewTextItemComponent', () => {
             await updateTextField(component.property.key, 'updated-value');
             await fixture.whenStable();
 
-            expect(component.errors).toEqual([]);
+            verifyNoErrors('textKey');
         });
 
         it('should render the error', () => {
@@ -759,6 +762,7 @@ describe('CardViewTextItemComponent', () => {
 
             const errorMessage = getTextFieldError(component.property.key);
             expect(errorMessage).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
+            expect(component.textInput.errors?.['customError']).toEqual(true);
         });
 
         it('should NOT show validation error for empty string', async () => {
@@ -785,6 +789,7 @@ describe('CardViewTextItemComponent', () => {
 
             const errorMessage = getTextFieldError(component.property.key);
             expect(errorMessage).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
+            expect(component.textInput.errors?.['customError']).toEqual(true);
         });
 
         it('should show validation error for float number', async () => {
@@ -795,6 +800,7 @@ describe('CardViewTextItemComponent', () => {
             const error = getTextFieldError(component.property.key);
             expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
             expect(component.property.value).toBe(10);
+            expect(component.textInput.errors?.['customError']).toEqual(true);
         });
 
         it('should show validation error for exceed the number limit (2147483648)', async () => {
@@ -805,6 +811,7 @@ describe('CardViewTextItemComponent', () => {
             const error = getTextFieldError(component.property.key);
             expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
             expect(component.property.value).toBe(10);
+            expect(component.textInput.errors?.['customError']).toEqual(true);
         });
 
         it('should not show validation error for below the number limit (2147483647)', async () => {
@@ -862,6 +869,7 @@ describe('CardViewTextItemComponent', () => {
             fixture.detectChanges();
 
             expect(getTextFieldError(component.property.key)).toEqual('CORE.CARDVIEW.VALIDATORS.FLOAT_VALIDATION_ERROR');
+            expect(component.textInput.errors?.['customError']).toEqual(true);
         });
 
         it('should show validation error for empty string (float)', async () => {
@@ -870,6 +878,7 @@ describe('CardViewTextItemComponent', () => {
             fixture.detectChanges();
 
             expect(getTextFieldError(component.property.key)).toEqual('CORE.CARDVIEW.VALIDATORS.FLOAT_VALIDATION_ERROR');
+            expect(component.textInput.errors?.['customError']).toEqual(true);
         });
 
         it('should update input the value on input updated', async () => {
diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts
index 9aeaf88202..68388e4a64 100644
--- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts
+++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts
@@ -84,7 +84,11 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
 
     private readonly destroyRef = inject(DestroyRef);
 
-    constructor(private clipboardService: ClipboardService, private translateService: TranslationService, private cd: ChangeDetectorRef) {
+    constructor(
+        private clipboardService: ClipboardService,
+        private translateService: TranslationService,
+        private cd: ChangeDetectorRef
+    ) {
         super();
     }
 
@@ -141,6 +145,8 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
 
     private resetErrorMessages() {
         this.errors = [];
+        this.textInput.setErrors(null);
+        this.textInput.markAsUntouched();
     }
 
     update(): void {
@@ -151,6 +157,8 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
                 this.cardViewUpdateService.update({ ...this.property, isValidValue: true } as CardViewTextItemModel, this.property.value);
             } else {
                 this.errors = this.property.getValidationErrors(this.editedValue);
+                this.textInput.setErrors({ customError: true });
+                this.textInput.markAsTouched();
                 this.cardViewUpdateService.update({ ...this.property, isValidValue: false } as CardViewTextItemModel, this.editedValue);
             }
         }