feat(kit): support [label] in tui-avatar-labeled

projects/demo/src/modules/experimental/avatar/examples/6/index.html

@@ -1,34 +1,29 @@
-<tui-avatar-labeled>
+<tui-avatar-labeled label="Grigori Constantinopolsky">
     <tui-avatar
         [src]="'https://avatars.githubusercontent.com/u/10106368' | tuiFallbackSrc: 'tuiIconUserLarge' | async"
     ></tui-avatar>
-
-    <div tuiFade>MarsiBarsi</div>
 </tui-avatar-labeled>
 
-<tui-avatar-labeled>
+<tui-avatar-labeled label="Nikolai Rimsky-Korsakov">
     <tui-avatar
         [src]="'https://avatars.githubusercontent.com/u/11832552' | tuiFallbackSrc: 'tuiIconUserLarge' | async"
     ></tui-avatar>
-
-    <div tuiFade>Inkin</div>
-    <div tuiFade>Alexander</div>
 </tui-avatar-labeled>
 
-<tui-avatar-labeled>
+<tui-avatar-labeled label="Hubert Wolfflegelstainhausenbergedorf">
     <tui-avatar
         [src]="'https://avatars.githubusercontent.com/u/46284632' | tuiFallbackSrc: 'tuiIconUserLarge' | async"
     ></tui-avatar>
-
-    <div tuiFade>Potekhin</div>
-    <div tuiFade>Vladimir</div>
 </tui-avatar-labeled>
 
-<tui-avatar-labeled>
+<tui-avatar-labeled label="Arkhangelsky Constantine">
     <tui-avatar
         [src]="'https://avatars.githubusercontent.com/u/35179038' | tuiFallbackSrc: 'tuiIconUserLarge' | async"
     ></tui-avatar>
+</tui-avatar-labeled>
 
-    <div tuiFade>Barsukov</div>
-    <div tuiFade>Nikita</div>
+<tui-avatar-labeled label="Zoya Kosmodemyanskaya">
+    <tui-avatar
+        [src]="'https://avatars.githubusercontent.com/u/8158578' | tuiFallbackSrc: 'tuiIconUserLarge' | async"
+    ></tui-avatar>
 </tui-avatar-labeled>

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: '<ng-content></ng-content>',
+    template: `
+        <ng-content></ng-content>
+        <ng-container *ngIf="label.length">
+            <span
+                *ngFor="let item of split(label)"
+                tuiFade
+            >
+                {{ item }}
+            </span>
+        </ng-container>
+    `,
     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(' ');
+    }
+}

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],
 })

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;