[ACS-6211] Addressed code review findings. Added label div for when c…

…ard-view-selectitem.component is in non-editable mode. Added corresponding tests

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

@@ -1,10 +1,15 @@
 <ng-container *ngIf="!property.isEmpty() || isEditable()">
     <div class="adf-property-field">
-        <div
-            *ngIf="!isEditable()"
-            class="adf-select-item-padding adf-property-value"
-            [attr.data-automation-id]="'select-readonly-value-' + property.key"
-            data-automation-class="read-only-value">{{ (property.displayValue | async) | translate }}
+        <div *ngIf="!isEditable()">
+            <div
+                [attr.data-automation-id]="'card-select-label-' + property.key"
+                class="adf-property-label"
+            >{{ property.label | translate }}</div>
+            <div
+                class="adf-select-item-padding adf-property-value"
+                [attr.data-automation-id]="'select-readonly-value-' + property.key"
+                data-automation-class="read-only-value">{{ (property.displayValue | async) | translate }}
+            </div>
         </div>
         <div *ngIf="isEditable()">
             <mat-form-field class="adf-property-value" appearance="standard">

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

@@ -26,6 +26,7 @@ import { AppConfigService } from '../../../app-config/app-config.service';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { MatSelectHarness } from '@angular/material/select/testing';
+import { MatLabel } from '@angular/material/form-field';
 
 describe('CardViewSelectItemComponent', () => {
     let loader: HarnessLoader;
@@ -73,6 +74,25 @@ describe('CardViewSelectItemComponent', () => {
     });
 
     describe('Rendering', () => {
+        it('should render custom label when editable is set to false', () => {
+            component.property = new CardViewSelectItemModel({
+                ...mockDefaultProps,
+                editable: false
+            });
+            fixture.detectChanges();
+            const labelValue = fixture.debugElement.query(By.css('.adf-property-label'));
+            expect(labelValue).not.toBeNull();
+            expect(labelValue.nativeElement.innerText).toBe('Select box label');
+        });
+
+        it('should render mat label when editable is set to true', () => {
+            component.editable = true;
+            fixture.detectChanges();
+            const labelValue = fixture.debugElement.query(By.directive(MatLabel));
+            expect(labelValue).not.toBeNull();
+            expect(labelValue.nativeElement.innerText).toBe('Select box label');
+        });
+
         it('should render readOnly value is editable property is FALSE', () => {
             component.property = new CardViewSelectItemModel({
                 ...mockDefaultProps,