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

taiga-family · Mar 2, 2024 · d9776ec · d9776ec
1 parent 2a548ab
commit d9776ec
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 17 deletions.
diff --git a/projects/demo/src/modules/components/avatar/examples/6/index.html b/projects/demo/src/modules/components/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/kit/components/avatar-labeled/avatar-labeled.component.ts b/projects/kit/components/avatar-labeled/avatar-labeled.component.ts
@@ -1,11 +1,40 @@
-import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+import {NgForOf, NgIf} from '@angular/common';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    HostBinding,
+    Input,
+    ViewEncapsulation,
+} from '@angular/core';
+import {tuiPure} from '@taiga-ui/cdk';
+import {TuiFadeDirective} from '@taiga-ui/kit/directives';
 
 @Component({
     standalone: true,
     selector: 'tui-avatar-labeled',
-    template: '<ng-content></ng-content>',
+    imports: [NgForOf, NgIf, TuiFadeDirective],
+    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')
+    public label = '';
+
+    @tuiPure
+    protected split(label: string): readonly string[] {
+        return label.split(' ');
+    }
+}
diff --git a/projects/kit/components/avatar-labeled/avatar-labeled.styles.less b/projects/kit/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;