diff --git a/libs/core/avatar-group/avatar-group.component.html b/libs/core/avatar-group/avatar-group.component.html index f6ce9930ece..785e18da220 100644 --- a/libs/core/avatar-group/avatar-group.component.html +++ b/libs/core/avatar-group/avatar-group.component.html @@ -1,5 +1,4 @@ -
{{ _avatars.length }}
@if (type === 'individual') { Avatar Group Standard Usage --> - - - - - - - - - - + Avatar Group Standard Usage + +

+ In this example, which is called individual type avatar group, which means that every item is + displayed separately, every item can be focused separately and details template will be displayed for that item. +

+ + + + + Group Type Standard Usage @@ -23,14 +23,14 @@ - - - - - - - - - - - + Vertical Avatar Group Usage + +

+ The fd-avatar-group supports vertical orientation as well. In this case, all items are + displayed in a vertical list and overflow is not supported. +

+ + + + + diff --git a/libs/docs/core/avatar-group/examples/group-type/avatar-group-test-example/avatar-group-test-example.component.html b/libs/docs/core/avatar-group/examples/group-type/avatar-group-test-example/avatar-group-test-example.component.html index 8a2fb0ca820..f26dacfee53 100644 --- a/libs/docs/core/avatar-group/examples/group-type/avatar-group-test-example/avatar-group-test-example.component.html +++ b/libs/docs/core/avatar-group/examples/group-type/avatar-group-test-example/avatar-group-test-example.component.html @@ -1,48 +1,48 @@ - - @for (person of people; track person) { @if (!person.imageUrl && - !person.glyph) { - - } @if (person.imageUrl) { - - } @if (person.glyph) { - - } + + @for (person of people; track person) { + @if (!person.imageUrl && !person.glyph) { + + } + @if (person.imageUrl) { + + } + @if (person.glyph) { + + } @@ -55,32 +55,31 @@ [title]="person.firstName + ' ' + person.lastName" [ariaLabel]="person.firstName + ' ' + person.lastName + ' avatar'" > - } @if (person.imageUrl) { - - } @if (person.glyph) { - - } + } + @if (person.imageUrl) { + + } + @if (person.glyph) { + + } {{ person.firstName }} - {{ person.lastName }}{{ person.firstName }} {{ person.lastName }} - {{ - person.position - }} + {{ person.position }} Contact Details @@ -91,9 +90,7 @@ - Mobile + Mobile {{ person.mobile }} diff --git a/libs/docs/core/avatar-group/examples/group-type/group-type-example.component.html b/libs/docs/core/avatar-group/examples/group-type/group-type-example.component.html index 0b38cfdb4a3..f7d4b2e69c9 100644 --- a/libs/docs/core/avatar-group/examples/group-type/group-type-example.component.html +++ b/libs/docs/core/avatar-group/examples/group-type/group-type-example.component.html @@ -1,116 +1,411 @@ -

Default tabs example:

- -

Stacked tabs example:

- -@if (visible) { -
- - - - - - - - - - - - - - - - - - - - - - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam - possimus corrupti architecto perspiciatis, delectus necessitatibus - incidunt numquam asperiores tenetur iure. Cum consequuntur impedit - repellendus esse, facere autem optio consequatur nobis? - - - @for ( tab of [ 'Tab 1', 'Tab 2', 'Tab 3' ]; track tab ) { - - -
{{ tab }} content.
- - - - - - } - - - -
-
- - -
-
- - -
-} + Standard Avatar group + + @for (person of people; track person) { + @if (!person.imageUrl && !person.glyph) { + + } + @if (person.imageUrl) { + + } + @if (person.glyph) { + + } + + + + @if (!person.imageUrl && !person.glyph) { + + } + @if (person.imageUrl) { + + } + @if (person.glyph) { + + } + {{ person.firstName }} {{ person.lastName }} + + {{ person.position }} + + + Contact Details + + Phone + + {{ person.phone }} + + + + Mobile + + {{ person.mobile }} + + + + Email + + {{ person.email }} + + + + + + } + +
+ Avatar group with rounded +N button + + @for (person of people; track person) { + @if (!person.imageUrl && !person.glyph) { + + } + @if (person.imageUrl) { + + } + @if (person.glyph) { + + } + + + + @if (!person.imageUrl && !person.glyph) { + + } + @if (person.imageUrl) { + + } + @if (person.glyph) { + + } + {{ person.firstName }} {{ person.lastName }} + + {{ person.position }} + + + Contact Details + + Phone + + {{ person.phone }} + + + + Mobile + + {{ person.mobile }} + + + + Email + + {{ person.email }} + + + + + + } + +
+ Avatar group with defined size of visible items + + @for (person of people; track person) { + @if (!person.imageUrl && !person.glyph) { + + } + @if (person.imageUrl) { + + } + @if (person.glyph) { + + } + + + + @if (!person.imageUrl && !person.glyph) { + + } + @if (person.imageUrl) { + + } + @if (person.glyph) { + + } + {{ person.firstName }} {{ person.lastName }} + + {{ person.position }} + + + Contact Details + + Phone + + {{ person.phone }} + + + + Mobile + + {{ person.mobile }} + + + + Email + + {{ person.email }} + + + + + + } + +
+ Avatar group with placement + + @for (person of people; track person) { + @if (!person.imageUrl && !person.glyph) { + + } + @if (person.imageUrl) { + + } + @if (person.glyph) { + + } + + + + @if (!person.imageUrl && !person.glyph) { + + } + @if (person.imageUrl) { + + } + @if (person.glyph) { + + } + {{ person.firstName }} {{ person.lastName }} + + {{ person.position }} + + + Contact Details + + Phone + + {{ person.phone }} + + + + Mobile + + {{ person.mobile }} + + + + Email + + {{ person.email }} + + + + + + } + diff --git a/libs/docs/core/avatar-group/examples/group-type/group-type-example.component.ts b/libs/docs/core/avatar-group/examples/group-type/group-type-example.component.ts index 18243bbff56..2ad9f068399 100644 --- a/libs/docs/core/avatar-group/examples/group-type/group-type-example.component.ts +++ b/libs/docs/core/avatar-group/examples/group-type/group-type-example.component.ts @@ -1,83 +1,86 @@ -import { CdkScrollable } from '@angular/cdk/scrolling'; +import { ENTER, ESCAPE, SPACE, TAB } from '@angular/cdk/keycodes'; -import { Component } from '@angular/core'; -import { BarModule } from '@fundamental-ngx/core/bar'; -import { BreadcrumbModule } from '@fundamental-ngx/core/breadcrumb'; -import { ButtonComponent } from '@fundamental-ngx/core/button'; -import { ContentDensityDirective } from '@fundamental-ngx/core/content-density'; -import { DynamicPageModule } from '@fundamental-ngx/core/dynamic-page'; +import { Component, inject } from '@angular/core'; +import { KeyUtil, RtlService, Size } from '@fundamental-ngx/cdk/utils'; +import { AvatarComponent } from '@fundamental-ngx/core/avatar'; +import { AvatarGroupComponent, AvatarGroupItemDirective } from '@fundamental-ngx/core/avatar-group'; import { LinkComponent } from '@fundamental-ngx/core/link'; -import { MessageToastModule, MessageToastService } from '@fundamental-ngx/core/message-toast'; -import { ToolbarComponent, ToolbarItemDirective, ToolbarSeparatorComponent } from '@fundamental-ngx/core/toolbar'; -import { FDP_ICON_TAB_BAR } from '@fundamental-ngx/platform/icon-tab-bar'; -import { AvatarGroupTypeExampleComponent } from './avatar-group-test-example/avatar-group-test-example.component'; +import { PopoverComponent } from '@fundamental-ngx/core/popover'; +import { QuickViewModule } from '@fundamental-ngx/core/quick-view'; +import { DescriptionComponent } from '@fundamental-ngx/docs/shared'; +import { AvatarGroupDataExampleService } from '../avatar-group-data-example.service'; @Component({ selector: 'fd-avatar-group-group-type-example', templateUrl: './group-type-example.component.html', standalone: true, imports: [ - ButtonComponent, - DynamicPageModule, - BreadcrumbModule, + AvatarGroupComponent, + AvatarComponent, + QuickViewModule, LinkComponent, - ToolbarComponent, - ToolbarItemDirective, - ContentDensityDirective, - ToolbarSeparatorComponent, - FDP_ICON_TAB_BAR, - CdkScrollable, - BarModule, - MessageToastModule, - AvatarGroupTypeExampleComponent - ], - styles: [ - ` - .overlay { - height: 100%; - width: 100%; - position: fixed; - z-index: 10; - top: 0; - left: 0; - background-color: rgb(255, 255, 255); - } - - .fd-dynamic-page-section-example { - min-height: 20vh; - } - ` + AvatarGroupItemDirective, + DescriptionComponent ] }) export class GroupTypeExampleComponent { - visible = false; + size: Size = 'l'; + readonly avatarGroupDataExampleService = inject(AvatarGroupDataExampleService); + people = this.avatarGroupDataExampleService.generate(); + personDetails: any = null; + overflowPopoverStage: 'main' | 'detail' = 'main'; - stackedTabs = false; + get isDetailStage(): boolean { + return this.overflowPopoverStage === 'detail'; + } - pageTitle = 'Balenciaga Tripple S Trainers'; + getPopoverCtrlAriaLabel(overflowItemsCount = 0): string { + return ( + 'Has popup type dialog Conjoined avatars, ' + + ((this.people?.length || 0) - overflowItemsCount) + + ' avatars displayed, ' + + overflowItemsCount + + ' avatars hidden, activate for complete list' + ); + } - constructor(private _messageToastService: MessageToastService) {} + constructor(private _rtlService: RtlService) {} - onCollapseChange(): void { - console.log('collapse changed'); + get isRtl(): boolean { + return this._rtlService.rtl.getValue(); } - openPage(stacked: boolean): void { - this.stackedTabs = stacked; - this.visible = true; - this._openToast('Dynamic Page has been opened'); + isOpenChanged(isOpened: boolean): void { + if (isOpened) { + this.openOverflowMain(); + } } - closePage(): void { - this.visible = false; + openOverflowDetails(idx: number): void { + this.personDetails = this.people[idx]; + this.overflowPopoverStage = 'detail'; } - handleAction(action: string): void { - this.closePage(); - this._openToast(action); + openOverflowMain(): void { + this.personDetails = null; + this.overflowPopoverStage = 'main'; } - private _openToast(content: string): void { - this._messageToastService.open(content, { duration: 3000 }); + handleControlClick(event: MouseEvent, popover: PopoverComponent): void { + popover.open(); + } + + handleControlKeydown(event: KeyboardEvent, popover: PopoverComponent): void { + if (!KeyUtil.isKeyCode(event, [ESCAPE, TAB, SPACE, ENTER])) { + return; + } + + if (KeyUtil.isKeyCode(event, [ESCAPE, TAB])) { + popover.close(); + } + + if (KeyUtil.isKeyCode(event, [SPACE, ENTER])) { + popover.open(); + } } }