From d86a67558c73c756f8f586e4c907b1d4baebba9b Mon Sep 17 00:00:00 2001
From: Ehsan Rezaei <ehsan.rezaei@hyland.com>
Date: Thu, 25 Jul 2024 16:20:10 +0200
Subject: [PATCH] AAE-24276 Fix mat chip display in card view array item
 (#9992)

* AAE-24276 Fix mat chip display in card view array item

* AAE-24276 Updated unit tests
---
 .../card-view-arrayitem.component.html        | 16 ++++-----
 .../card-view-arrayitem.component.scss        |  5 ++-
 .../card-view-arrayitem.component.spec.ts     | 34 ++++++++-----------
 3 files changed, 25 insertions(+), 30 deletions(-)

diff --git a/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.html b/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.html
index 33abcfe8f4..bdc7395e3f 100644
--- a/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.html
+++ b/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.html
@@ -3,7 +3,7 @@
     <ng-container *ngIf="(property.displayValue | async) as items; else elseEmptyValueBlock">
         <mat-chip-listbox *ngIf="items.length > 0; else elseEmptyValueBlock" data-automation-id="card-arrayitem-chip-list-container">
             <ng-container *ngIf="displayCount > 0; else withOutDisplayCount" >
-                <mat-chip-option
+                <mat-chip
                     *ngFor="let item of items.slice(0, displayCount)"
                     (keyup.enter)="clicked()"
                     (click)="clicked()"
@@ -12,16 +12,16 @@
                         <mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
                         <span>{{item?.value}}</span>
                     </div>
-                </mat-chip-option>
-                <mat-chip-option
+                </mat-chip>
+                <mat-chip
                     *ngIf="items.length > displayCount"
                     data-automation-id="card-arrayitem-more-chip"
                     [matMenuTriggerFor]="menu">
                     <span>{{items.length - displayCount}} {{'CORE.CARDVIEW.MORE' | translate}}</span>
-                </mat-chip-option>
+                </mat-chip>
             </ng-container>
             <ng-template #withOutDisplayCount>
-                <mat-chip-option
+                <mat-chip
                     *ngFor="let item of items"
                     (keyup.enter)="clicked()"
                     (click)="clicked()"
@@ -30,21 +30,21 @@
                         <mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
                         <span>{{item?.value}}</span>
                     </div>
-                </mat-chip-option>
+                </mat-chip>
             </ng-template>
         </mat-chip-listbox>
         <mat-menu #menu="matMenu">
             <mat-card appearance="outlined" class="adf-array-item-more-chip-container">
                 <mat-card-content>
                     <mat-chip-listbox>
-                        <mat-chip-option (click)="clicked()" (keyup.enter)="clicked()"
+                        <mat-chip (click)="clicked()" (keyup.enter)="clicked()"
                             *ngFor="let item of items.slice(displayCount, items.length)"
                             [attr.data-automation-id]="'card-arrayitem-chip-' + item.value">
                             <div class="adf-card-view-array-chip-content">
                                 <mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
                                 <span>{{item?.value}}</span>
                             </div>
-                        </mat-chip-option>
+                        </mat-chip>
                     </mat-chip-listbox>
                 </mat-card-content>
             </mat-card>
diff --git a/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss b/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss
index 0f0d561655..f4ba739161 100644
--- a/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss
+++ b/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss
@@ -2,8 +2,7 @@
 
 .adf {
     &-array-item-icon {
-        font-size: var(--theme-subheading-2-font-size);
-        padding-top: 8px;
+        margin-right: 5px;
     }
 
     &-array-item-action {
@@ -52,7 +51,7 @@
     }
 
     &-card-view-array-chip-content {
-        align-items: center;
         display: flex;
+        cursor: pointer;
     }
 }
diff --git a/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.spec.ts b/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.spec.ts
index 6ee23d7de0..b6b617e781 100644
--- a/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.spec.ts
+++ b/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.spec.ts
@@ -118,13 +118,12 @@ describe('CardViewArrayItemComponent', () => {
             });
             fixture.detectChanges();
 
-            const chipListBox = await loader.getHarness(MatChipListboxHarness);
-            const chipList = await chipListBox.getChips();
-            expect(chipList).not.toBeNull();
-            expect(chipList.length).toBe(4);
+            const chipListBox = await loader.getAllHarnesses(MatChipHarness);
+            expect(chipListBox).not.toBeNull();
+            expect(chipListBox.length).toBe(4);
 
-            const firstChipText = await chipList[0].getText();
-            const secondChipText = await chipList[1].getText();
+            const firstChipText = await chipListBox[0].getText();
+            const secondChipText = await chipListBox[1].getText();
             expect(firstChipText).toEqual('Zlatan');
             expect(secondChipText).toEqual('Lionel Messi');
         });
@@ -136,15 +135,14 @@ describe('CardViewArrayItemComponent', () => {
             });
             fixture.detectChanges();
 
-            const chipListBox = await loader.getHarness(MatChipListboxHarness);
-            const chipList = await chipListBox.getChips();
-            expect(chipList).not.toBeNull();
-            expect(chipList.length).toBe(4);
+            const chipListBox = await loader.getAllHarnesses(MatChipHarness);
+            expect(chipListBox).not.toBeNull();
+            expect(chipListBox.length).toBe(4);
 
             const chip1Icon = await loader.getHarness(MatIconHarness.with({ ancestor: `[data-automation-id="card-arrayitem-chip-Zlatan"]` }));
             const chip2Icon = await loader.getHarness(MatIconHarness.with({ ancestor: `[data-automation-id="card-arrayitem-chip-Lionel Messi"]` }));
-            const firstChipText = await chipList[0].getText();
-            const secondChipText = await chipList[1].getText();
+            const firstChipText = await chipListBox[0].getText();
+            const secondChipText = await chipListBox[1].getText();
 
             expect(firstChipText).toEqual('Zlatan');
             expect(await chip1Icon.getName()).toBe('person');
@@ -178,12 +176,11 @@ describe('CardViewArrayItemComponent', () => {
         it('should render all values if noOfItemsToDisplay is not defined', async () => {
             fixture.detectChanges();
 
-            const chipList = await loader.getHarness(MatChipListboxHarness);
-            const chips = await chipList.getChips();
+            const chipList = await loader.getAllHarnesses(MatChipHarness);
 
             const moreElement = fixture.debugElement.query(By.css('[data-automation-id="card-arrayitem-more-chip"]'));
             expect(moreElement).toBeNull();
-            expect(chips.length).toBe(4);
+            expect(chipList.length).toBe(4);
         });
 
         it('should render only two values along with more item chip if noOfItemsToDisplay is set to 2', async () => {
@@ -193,11 +190,10 @@ describe('CardViewArrayItemComponent', () => {
             });
             fixture.detectChanges();
 
-            const chipList = await loader.getHarness(MatChipListboxHarness);
-            const chips = await chipList.getChips();
+            const chipList = await loader.getAllHarnesses(MatChipHarness);
 
-            expect(chips.length).toBe(3);
-            expect(await chips[2].getText()).toBe('2 CORE.CARDVIEW.MORE');
+            expect(chipList.length).toBe(3);
+            expect(await chipList[2].getText()).toBe('2 CORE.CARDVIEW.MORE');
         });
     });
 });