[ACS-8159][ADF] Dynamic chip list - add rounding property, clear styles (#9767)

* [ACS-8054] dynamic chip list refactor

* [ACS-8054] dynamic chip list refactor

* [ACS-8054] dynamic chip list refactor

* [ACS-8054] dynamic chip list refactor

* [ACS-8054] update documentation and tests

* [ACS-8159] update documentation and style

* [ACS-8159] update branch

* [ACS-8159] update branch

docs/core/components/dynamic-chip-list.component.md

@@ -18,6 +18,7 @@ This component shows dynamic list of chips which render depending on free space.
     [chips]="chips"
     [limitChipsDisplayed]="true"
     [showDelete]="true"
+    [roundUpChips]="true"
     (displayNext)="onDisplayNext()"
     (removedChip)="onRemovedChip($event)">
 </adf-dynamic-chip-list>
@@ -28,12 +29,14 @@ This component shows dynamic list of chips which render depending on free space.
 ### Properties
 
 | Name                | Type                                                                            | Default value | Description                                                    |
-|---------------------|---------------------------------------------------------------------------------|---------------|---------------------------------------------|
+|---------------------|---------------------------------------------------------------------------------|---------------|----------------------------------------------------------------|
 | limitChipsDisplayed | `boolean`                                                                       | false         | Should limit number of chips displayed.                        |
 | showDelete          | `boolean`                                                                       | true          | Show delete button.                                            |
+| roundUpChips        | `boolean`                                                                       | false         | Round up chips increasing the border radius of a chip to 20px. |
 | pagination          | [`Pagination`](../../../lib/js-api/src/api/content-rest-api/docs/Pagination.md) |               | Provide if you want to use paginated chips.                    |
 | chips               | [`Chip`](../../../lib/core/src/lib/dynamic-chip-list/chip.ts)`[]`               |               | List of chips to display.                                      |
 
+
 ### Events
 
 | Name        | Type                                                                 | Description                                   |

lib/core/src/lib/directives/directive.module.ts

@@ -17,11 +17,11 @@
 
 import { NgModule } from '@angular/core';
 import { HighlightDirective } from './highlight.directive';
-import { LogoutDirective } from './logout.directive';
-import { UploadDirective } from './upload.directive';
-import { TooltipCardDirective } from './tooltip-card/tooltip-card.directive';
-import { TooltipCardComponent } from './tooltip-card/tooltip-card.component';
 import { InfiniteSelectScrollDirective } from './infinite-select-scroll.directive';
+import { LogoutDirective } from './logout.directive';
+import { TooltipCardComponent } from './tooltip-card/tooltip-card.component';
+import { TooltipCardDirective } from './tooltip-card/tooltip-card.directive';
+import { UploadDirective } from './upload.directive';
 
 @NgModule({
     imports: [HighlightDirective, LogoutDirective, UploadDirective, TooltipCardDirective, TooltipCardComponent, InfiniteSelectScrollDirective],

lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.html

@@ -1,39 +1,36 @@
-<div
+<div #nodeListContainer
      class="adf-dynamic-chip-list-container"
      [class.adf-dynamic-chip-list-flex-column]="limitChipsDisplayed && (!calculationsDone || columnFlexDirection)"
      [class.adf-dynamic-chip-list-button-in-next-line]="moveLoadMoreButtonToNextRow"
-    [class.adf-dynamic-chip-list-paginated]="paginationData"
-    #nodeListContainer>
-    <mat-chip-list
-        [class.adf-dynamic-chip-list-full-width]="limitChipsDisplayed && !calculationsDone"
+     [class.adf-dynamic-chip-list-paginated]="paginationData">
+    <mat-chip-list [class.adf-dynamic-chip-list-full-width]="limitChipsDisplayed && !calculationsDone"
                    role="listbox"
                    [attr.aria-label]="'METADATA.BASIC.TAGS' | translate">
-        <mat-chip
+        <mat-chip *ngFor="let chip of chipsToDisplay; let idx = index"
                   class="adf-dynamic-chip-list-chip"
-            *ngFor="let chip of chipsToDisplay; let idx = index"
+                  [style.border-radius]="roundUpChips ? '20px' : '10px'"
+                  [style.font-weight]="'bold'"
                   (removed)="removedChip.emit(chip.id)">
             <span id="adf-dynamic-chip-list-chip-name-{{ idx }}">{{ chip.name }}</span>
-            <mat-icon
-                *ngIf="showDelete"
+            <mat-icon *ngIf="showDelete"
                       id="adf-dynamic-chip-list-delete-{{ chip.name }}"
                       class="adf-dynamic-chip-list-delete-icon"
                       matChipRemove>
-                cancel
+                close
             </mat-icon>
         </mat-chip>
     </mat-chip-list>
-    <button
-        data-automation-id="adf-dynamic-chip-list-view-more-button"
+    <button data-automation-id="adf-dynamic-chip-list-view-more-button"
+            class="adf-dynamic-chip-list-view-more-button"
             mat-button
             [hidden]="!limitChipsDisplayed"
             [style.left.px]="viewMoreButtonLeftOffset"
             [style.top.px]="viewMoreButtonTop"
-        class="adf-dynamic-chip-list-view-more-button"
             [class.adf-dynamic-chip-list-hidden-btn]="!calculationsDone"
             (click)="displayNextChips($event)">
         {{
             paginationData ? ('DYNAMIC_CHIP_LIST.LOAD_MORE' | translate) :
-                ('TAG_NODE_LIST.VIEW_MORE' | translate: { count: undisplayedChipsCount})
+                ('TAG_NODE_LIST.VIEW_MORE' | translate: { count: undisplayedChipsCount })
         }}
     </button>
 </div>

lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.scss

@@ -6,7 +6,7 @@
     padding-bottom: 12px;
 
     .adf-dynamic-chip-list-view-more-button {
-        color: var(--adf-theme-foreground-text-color-054);
+        margin-left: 5px;
         position: absolute;
 
         &[hidden] {
@@ -64,19 +64,8 @@
     }
 
     .adf-dynamic-chip-list-chip {
-        color: var(--theme-primary-color-default-contrast);
-        background-color: var(--theme-primary-color);
         height: auto;
         word-break: break-word;
-    }
-
-    .adf-dynamic-chip-list-delete-icon {
-        font-size: var(--theme-title-font-size);
-        background-repeat: no-repeat;
-        display: inline-block;
-        fill: currentcolor;
-        height: 20px;
-        width: 20px;
-        color: var(--theme-primary-color-default-contrast);
+        padding: 6px 11px;
     }
 }

lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.spec.ts

@@ -15,9 +15,10 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { Chip, CoreTestingModule, DynamicChipListComponent } from '@alfresco/adf-core';
 import { SimpleChange } from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 
 describe('DynamicChipListComponent', () => {
     let chips: Chip[] = [
@@ -132,6 +133,19 @@ describe('DynamicChipListComponent', () => {
             expect(deleteButton).not.toBeNull();
         });
 
+        it('should round up chips if roundUpChips is true', async () => {
+            component.roundUpChips = true;
+
+            component.ngOnChanges({
+                chips: new SimpleChange(undefined, component.chips, true)
+            });
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            const chip = fixture.debugElement.query(By.css('.adf-dynamic-chip-list-chip'));
+            expect(getComputedStyle(chip.nativeElement).borderRadius).toBe('20px');
+        });
+
         it('should not render view more button by default', async () => {
             component.ngOnChanges({
                 chips: new SimpleChange(undefined, component.chips, true)

lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.ts

@@ -15,6 +15,8 @@
  * limitations under the License.
  */
 
+import { Pagination } from '@alfresco/js-api';
+import { NgForOf, NgIf } from '@angular/common';
 import {
     AfterViewInit,
     ChangeDetectorRef,
@@ -32,18 +34,22 @@ import {
     ViewChildren,
     ViewEncapsulation
 } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatChip, MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
 import { Subject } from 'rxjs';
-import { MatChip } from '@angular/material/chips';
 import { Chip } from './chip';
-import { Pagination } from '@alfresco/js-api';
 
 /**
  * This component shows dynamic list of chips which render depending on free space.
  */
 @Component({
     selector: 'adf-dynamic-chip-list',
+    standalone: true,
     templateUrl: './dynamic-chip-list.component.html',
     styleUrls: ['./dynamic-chip-list.component.scss'],
+    imports: [MatChipsModule, TranslateModule, NgForOf, MatIconModule, NgIf, MatButtonModule],
     encapsulation: ViewEncapsulation.None
 })
 export class DynamicChipListComponent implements OnChanges, OnInit, AfterViewInit, OnDestroy {
@@ -64,6 +70,10 @@ export class DynamicChipListComponent implements OnChanges, OnInit, AfterViewIni
     @Input()
     limitChipsDisplayed = false;
 
+    /** Round up chips */
+    @Input()
+    roundUpChips = false;
+
     /** Emitted when button for view more is clicked. */
     @Output()
     displayNext = new EventEmitter<void>();
@@ -166,9 +176,11 @@ export class DynamicChipListComponent implements OnChanges, OnInit, AfterViewIni
         const chips = this.matChips.toArray();
         let lastIndex = 0;
         do {
-            chipsWidth = Math.max(chips.reduce((width, val, index) => {
+            chipsWidth = Math.max(
+                chips.reduce((width, val, index) => {
                     width += val._elementRef.nativeElement.getBoundingClientRect().width + chipMargin;
-                const availableSpace = index && index === chips.length - 1 || !this.paginationData ? containerWidth - viewMoreBtnWidth : containerWidth;
+                    const availableSpace =
+                        (index && index === chips.length - 1) || !this.paginationData ? containerWidth - viewMoreBtnWidth : containerWidth;
                     if (availableSpace >= width) {
                         chipsToDisplay = (this.paginationData ? chipsToDisplay : index) + 1;
                         lastIndex++;
@@ -176,10 +188,12 @@ export class DynamicChipListComponent implements OnChanges, OnInit, AfterViewIni
                         this.viewMoreButtonLeftOffsetBeforeFlexDirection = width;
                     }
                     return width;
-            }, 0), chipsWidth);
+                }, 0),
+                chipsWidth
+            );
             chips.splice(0, lastIndex);
             lastIndex = 0;
-        } while ((chips.length || chipsToDisplay < this.matChips.length && this.matChips.length) && this.paginationData);
+        } while ((chips.length || (chipsToDisplay < this.matChips.length && this.matChips.length)) && this.paginationData);
         this.arrangeElements(containerWidth, chipsWidth, viewMoreBtnWidth, chipsToDisplay, viewMoreButton);
         this.calculationsDone = true;
     }
@@ -189,11 +203,17 @@ export class DynamicChipListComponent implements OnChanges, OnInit, AfterViewIni
         return parseInt(chipStyles.marginLeft, 10) + parseInt(chipStyles.marginRight, 10);
     }
 
-    private arrangeElements(containerWidth: number, chipsWidth: number, viewMoreBtnWidth: number, chipsToDisplay: number,
-                            viewMoreButton: HTMLButtonElement): void {
-        if ((containerWidth - chipsWidth - viewMoreBtnWidth) <= 0) {
+    private arrangeElements(
+        containerWidth: number,
+        chipsWidth: number,
+        viewMoreBtnWidth: number,
+        chipsToDisplay: number,
+        viewMoreButton: HTMLButtonElement
+    ): void {
+        if (containerWidth - chipsWidth - viewMoreBtnWidth <= 0) {
             const chip = this.paginationData ? this.matChips.last : this.matChips.first;
-            const hasNotEnoughSpaceForMoreButton = (containerWidth < (chip?._elementRef.nativeElement.offsetWidth + chip?._elementRef.nativeElement.offsetLeft + viewMoreBtnWidth));
+            const hasNotEnoughSpaceForMoreButton =
+                containerWidth < chip?._elementRef.nativeElement.offsetWidth + chip?._elementRef.nativeElement.offsetLeft + viewMoreBtnWidth;
             this.columnFlexDirection = chipsToDisplay === 1 && !this.paginationData && hasNotEnoughSpaceForMoreButton;
             this.moveLoadMoreButtonToNextRow = this.paginationData && hasNotEnoughSpaceForMoreButton;
             this.undisplayedChipsCount = this.chipsToDisplay.length - chipsToDisplay;

lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.module.ts

@@ -17,21 +17,9 @@
 
 import { NgModule } from '@angular/core';
 import { DynamicChipListComponent } from './dynamic-chip-list.component';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
-import { TranslateModule } from '@ngx-translate/core';
-import { CommonModule } from '@angular/common';
 
 @NgModule({
-    declarations: [DynamicChipListComponent],
-    imports: [
-        MatChipsModule,
-        MatIconModule,
-        MatButtonModule,
-        TranslateModule,
-        CommonModule
-    ],
+    imports: [DynamicChipListComponent],
     exports: [DynamicChipListComponent]
 })
 export class DynamicChipListModule {}