diff --git a/projects/demo/src/modules/experimental/avatar/examples/6/index.html b/projects/demo/src/modules/experimental/avatar/examples/6/index.html index 09cdaa5b4fa51..ecb8c7f3af2a2 100644 --- a/projects/demo/src/modules/experimental/avatar/examples/6/index.html +++ b/projects/demo/src/modules/experimental/avatar/examples/6/index.html @@ -1,34 +1,29 @@ - + - -
MarsiBarsi
- + - -
Inkin
-
Alexander
- + - -
Potekhin
-
Vladimir
- + + -
Barsukov
-
Nikita
+ + diff --git a/projects/experimental/components/avatar-labeled/avatar-labeled.component.ts b/projects/experimental/components/avatar-labeled/avatar-labeled.component.ts index 7c4fde3163b57..6fadaacf7855c 100644 --- a/projects/experimental/components/avatar-labeled/avatar-labeled.component.ts +++ b/projects/experimental/components/avatar-labeled/avatar-labeled.component.ts @@ -1,10 +1,34 @@ -import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + Input, + ViewEncapsulation, +} from '@angular/core'; +import {tuiPure} from '@taiga-ui/cdk'; @Component({ selector: 'tui-avatar-labeled', - template: '', + template: ` + + + + {{ item }} + + + `, styleUrls: ['./avatar-labeled.styles.less'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, }) -export class TuiAvatarLabeledComponent {} +export class TuiAvatarLabeledComponent { + @Input() + public label = ''; + + @tuiPure + public split(label: string): readonly string[] { + return label.split(' '); + } +} diff --git a/projects/experimental/components/avatar-labeled/avatar-labeled.module.ts b/projects/experimental/components/avatar-labeled/avatar-labeled.module.ts index 8c0961a5c70f2..0e8a5e00bf8aa 100644 --- a/projects/experimental/components/avatar-labeled/avatar-labeled.module.ts +++ b/projects/experimental/components/avatar-labeled/avatar-labeled.module.ts @@ -1,8 +1,12 @@ +import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; +// eslint-disable-next-line @taiga-ui/experience/no-deep-imports +import {TuiFadeModule} from '@taiga-ui/experimental/directives/fade'; import {TuiAvatarLabeledComponent} from './avatar-labeled.component'; @NgModule({ + imports: [CommonModule, TuiFadeModule], declarations: [TuiAvatarLabeledComponent], exports: [TuiAvatarLabeledComponent], }) diff --git a/projects/experimental/components/avatar-labeled/avatar-labeled.styles.less b/projects/experimental/components/avatar-labeled/avatar-labeled.styles.less index e07de7dca45cb..cf7ba5b2b03bf 100644 --- a/projects/experimental/components/avatar-labeled/avatar-labeled.styles.less +++ b/projects/experimental/components/avatar-labeled/avatar-labeled.styles.less @@ -8,6 +8,8 @@ tui-avatar-labeled { line-height: 0.895rem; font-size: 0.75rem; padding: 0 0.5rem; + //noinspection CssInvalidPropertyValue + text-wrap: nowrap; tui-avatar { margin-bottom: 0.375rem;