AAE-42525 Updated condition for mat-error (#11669)

* [AAE-42525] updated condition for mat-error

* [AAE-42525] removed color primary

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

@@ -1,19 +1,24 @@
 <ng-container *ngIf="!property.isEmpty() || isEditable">
     <div class="adf-property-value">
-        <mat-checkbox [attr.data-automation-id]="'card-boolean-' + property.key"
-                      [attr.title]="'CORE.METADATA.ACTIONS.TOGGLE' | translate"
-                      [ngModel]="property.displayValue"
-                      [checked]="property.displayValue"
-                      [disabled]="!isEditable"
-                      color="primary"
-                      (ngModelChange)="changed($event)"
-                      adf-card-view-property-validator
-                      [property]="property"
-                      (validated)="onValidation($event)"
-                      #checkbox="ngModel" >
-            <div [attr.data-automation-id]="'card-boolean-label-' + property.key"
-                 class="adf-property-label">{{ property.label | translate }}</div>
-            <mat-error *ngIf="checkbox.touched" [innerHTML]="error" />
+        <mat-checkbox
+            #checkbox="ngModel"
+            adf-card-view-property-validator
+            [attr.data-automation-id]="'card-boolean-' + property.key"
+            [attr.title]="'CORE.METADATA.ACTIONS.TOGGLE' | translate"
+            [checked]="property.displayValue"
+            [disabled]="!isEditable"
+            [ngModel]="property.displayValue"
+            [property]="property"
+            (ngModelChange)="changed($event)"
+            (validated)="onValidation($event)"
+        >
+            <div
+                [attr.data-automation-id]="'card-boolean-label-' + property.key"
+                 class="adf-property-label"
+            >{{ property.label | translate }}</div>
+            @if(checkbox.touched && error){
+                <mat-error [innerHTML]="error" />
+            }
         </mat-checkbox>
     </div>
 </ng-container>

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

@@ -27,6 +27,7 @@ import { FormControl, NgModel } from '@angular/forms';
 import { MatError } from '@angular/material/form-field';
 import { Injector } from '@angular/core';
 import { MatCheckbox } from '@angular/material/checkbox';
+import { MatErrorHarness } from '@angular/material/form-field/testing';
 
 describe('CardViewBoolItemComponent', () => {
     let fixture: ComponentFixture<CardViewBoolItemComponent>;
@@ -236,5 +237,56 @@ describe('CardViewBoolItemComponent', () => {
             fixture.detectChanges();
             expect(testingUtils.getByDirective(MatError).nativeElement.textContent).toBe('Error 1Error 2');
         });
+
+        it('should join multiple errors with br tag in innerHTML', () => {
+            cardViewPropertyValidator.validated.emit(['Error 1', 'Error 2']);
+            control.setErrors({
+                error1: 'Error 1',
+                error2: 'Error 2'
+            });
+            control.markAsTouched();
+
+            fixture.detectChanges();
+            expect(testingUtils.getByDirective(MatError).nativeElement.innerHTML).toContain('Error 1<br>Error 2');
+        });
+
+        it('should not contain br tag when there is only one error', () => {
+            cardViewPropertyValidator.validated.emit(['Single Error']);
+            control.setErrors({
+                error1: 'Single Error'
+            });
+            control.markAsTouched();
+
+            fixture.detectChanges();
+            expect(testingUtils.getByDirective(MatError).nativeElement.innerHTML).not.toContain('<br>');
+            expect(testingUtils.getByDirective(MatError).nativeElement.textContent).toBe('Single Error');
+        });
+
+        it('should join three errors with br tags', () => {
+            cardViewPropertyValidator.validated.emit(['Error A', 'Error B', 'Error C']);
+            control.setErrors({
+                errorA: 'Error A',
+                errorB: 'Error B',
+                errorC: 'Error C'
+            });
+            control.markAsTouched();
+
+            fixture.detectChanges();
+            expect(testingUtils.getByDirective(MatError).nativeElement.innerHTML).toContain('Error A<br>Error B<br>Error C');
+        });
+
+        it('should set empty error string when validated with empty array', () => {
+            cardViewPropertyValidator.validated.emit([]);
+
+            expect(component.error).toBe('');
+        });
+
+        it('should not display error message when control is touched and has no errors', async () => {
+            control.markAsTouched();
+
+            fixture.detectChanges();
+            const errors = await loader.getAllHarnesses(MatErrorHarness);
+            expect(errors.length).toBe(0);
+        });
     });
 });

lib/core/src/lib/card-view/public-api.ts

@@ -27,7 +27,6 @@ export {
     SelectFilterInputComponent
 } from './components/card-view.components';
 
-export * from './interfaces/card-view.interfaces';
 export * from './interfaces/card-view.interfaces';
 export * from './validators/card-view.validators';
 export * from './models/card-view.models';