diff --git a/docs/core/components/dynamic-chip-list.component.md b/docs/core/components/dynamic-chip-list.component.md index 30be8ad91c..43aadccb34 100644 --- a/docs/core/components/dynamic-chip-list.component.md +++ b/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)"> @@ -27,12 +28,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. | -| 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. | +| 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 diff --git a/lib/core/src/lib/directives/directive.module.ts b/lib/core/src/lib/directives/directive.module.ts index 17f4c2bc95..d3e514cfc2 100644 --- a/lib/core/src/lib/directives/directive.module.ts +++ b/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], diff --git a/lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.html b/lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.html index 0a8c5dc55f..cb8dfc4a67 100644 --- a/lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.html +++ b/lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.html @@ -1,39 +1,36 @@ -
- - +
+ + {{ chip.name }} - - cancel + + close -
diff --git a/lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.scss b/lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.scss index ac3e5f9be1..4a1087ba9d 100644 --- a/lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.scss +++ b/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; } } diff --git a/lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.spec.ts b/lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.spec.ts index 673a04b330..61e90bfa04 100644 --- a/lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.spec.ts +++ b/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) diff --git a/lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.ts b/lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.ts index 573bc03c93..57b830d1a0 100644 --- a/lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.ts +++ b/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(); @@ -166,20 +176,24 @@ export class DynamicChipListComponent implements OnChanges, OnInit, AfterViewIni const chips = this.matChips.toArray(); let lastIndex = 0; do { - 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; - if (availableSpace >= width) { - chipsToDisplay = (this.paginationData ? chipsToDisplay : index) + 1; - lastIndex++; - this.viewMoreButtonLeftOffset = width; - this.viewMoreButtonLeftOffsetBeforeFlexDirection = width; - } - return width; - }, 0), chipsWidth); + 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; + if (availableSpace >= width) { + chipsToDisplay = (this.paginationData ? chipsToDisplay : index) + 1; + lastIndex++; + this.viewMoreButtonLeftOffset = width; + this.viewMoreButtonLeftOffsetBeforeFlexDirection = width; + } + return width; + }, 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; diff --git a/lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.module.ts b/lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.module.ts index 6070354b6f..e53fe15cb1 100644 --- a/lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.module.ts +++ b/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 {}