From 5f3d094e7bc1a61e62574687d7a4c42de3dc4cdd Mon Sep 17 00:00:00 2001
From: splincode <omaxphp@yandex.ru>
Date: Thu, 29 Feb 2024 17:40:14 +0300
Subject: [PATCH] feat(kit): support `[label]` in `tui-avatar-labeled`

---
 .cspell.json                                  | 10 +++++-
 .../experimental/avatar/examples/6/index.html | 23 ++++++-------
 .../avatar-labeled.component.ts               | 32 +++++++++++++++++--
 .../avatar-labeled/avatar-labeled.module.ts   |  4 +++
 .../avatar-labeled/avatar-labeled.styles.less |  1 +
 5 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/.cspell.json b/.cspell.json
index f6a1ef1731ad..900918fcc417 100644
--- a/.cspell.json
+++ b/.cspell.json
@@ -37,7 +37,15 @@
         "replicants",
         "tuiiconbutton",
         "hitbox",
-        "viewports"
+        "viewports",
+        "Grigori",
+        "Constantinopolsky",
+        "Rimsky",
+        "Korsakov",
+        "Wolfflegelstainhausenbergedorf",
+        "Arkhangelsky",
+        "Zoya",
+        "Kosmodemyanskaya"
     ],
     "ignoreRegExpList": ["\\(https?://.*?\\)", "\\/{1}.+\\/{1}", "\\%2F.+", "\\%2C.+", "\\ɵ.+", "\\ыва.+"],
     "overrides": [
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 09cdaa5b4fa5..ecb8c7f3af2a 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 @@
-<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>
diff --git a/projects/experimental/components/avatar-labeled/avatar-labeled.component.ts b/projects/experimental/components/avatar-labeled/avatar-labeled.component.ts
index 7c4fde3163b5..5e45c5dfc926 100644
--- a/projects/experimental/components/avatar-labeled/avatar-labeled.component.ts
+++ b/projects/experimental/components/avatar-labeled/avatar-labeled.component.ts
@@ -1,10 +1,36 @@
-import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    HostBinding,
+    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()
+    @HostBinding('attr.title')
+    label = '';
+
+    @tuiPure
+    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 8c0961a5c70f..0e8a5e00bf8a 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 e07de7dca45c..163c862c9372 100644
--- a/projects/experimental/components/avatar-labeled/avatar-labeled.styles.less
+++ b/projects/experimental/components/avatar-labeled/avatar-labeled.styles.less
@@ -8,6 +8,7 @@ tui-avatar-labeled {
     line-height: 0.895rem;
     font-size: 0.75rem;
     padding: 0 0.5rem;
+    white-space: nowrap;
 
     tui-avatar {
         margin-bottom: 0.375rem;