feat(experimental): add tui-avatar-labeled (#6523)

projects/demo/src/modules/experimental/avatar/avatar.component.ts

@@ -44,6 +44,12 @@ export class ExampleTuiAvatarComponent {
         HTML: import('./examples/5/index.html?raw'),
     };
 
+    readonly example6: TuiDocExample = {
+        TypeScript: import('./examples/6/index.ts?raw'),
+        HTML: import('./examples/6/index.html?raw'),
+        LESS: import('./examples/6/index.less?raw'),
+    };
+
     readonly sizes: ReadonlyArray<TuiSizeXXL | TuiSizeXXS> = [
         'xxs',
         'xs',

projects/demo/src/modules/experimental/avatar/avatar.module.ts

@@ -4,6 +4,7 @@ import {tuiGetDocModules} from '@taiga-ui/addon-doc';
 import {TuiNotificationModule} from '@taiga-ui/core';
 import {
     TuiAutoColorModule,
+    TuiAvatarLabeledModule,
     TuiAvatarModule,
     TuiAvatarStackModule,
     TuiFadeModule,
@@ -17,12 +18,14 @@ import {TuiAvatarExample2} from './examples/2';
 import {TuiAvatarExample3} from './examples/3';
 import {TuiAvatarExample4} from './examples/4';
 import {TuiAvatarExample5} from './examples/5';
+import {TuiAvatarExample6} from './examples/6';
 
 @NgModule({
     imports: [
         CommonModule,
         TuiAvatarModule,
         TuiAvatarStackModule,
+        TuiAvatarLabeledModule,
         TuiAutoColorModule,
         TuiInitialsModule,
         TuiNotificationModule,
@@ -37,6 +40,7 @@ import {TuiAvatarExample5} from './examples/5';
         TuiAvatarExample3,
         TuiAvatarExample4,
         TuiAvatarExample5,
+        TuiAvatarExample6,
     ],
     exports: [ExampleTuiAvatarComponent],
 })

projects/demo/src/modules/experimental/avatar/avatar.template.html

@@ -63,6 +63,14 @@
         >
             <tui-avatar-example-5></tui-avatar-example-5>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="labeled"
+            heading="Labeled"
+            [content]="example6"
+        >
+            <tui-avatar-example-6></tui-avatar-example-6>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>

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

@@ -0,0 +1,34 @@
+<tui-avatar-labeled>
+    <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
+        [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
+        [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
+        [src]="'https://avatars.githubusercontent.com/u/35179038' | tuiFallbackSrc: 'tuiIconUserLarge' | async"
+    ></tui-avatar>
+
+    <div tuiFade>Barsukov</div>
+    <div tuiFade>Nikita</div>
+</tui-avatar-labeled>

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

@@ -0,0 +1,8 @@
+:host {
+    display: flex;
+    gap: 1rem;
+}
+
+tui-avatar {
+    border: 1px solid var(--tui-base-04);
+}

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

@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-avatar-example-6',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiAvatarExample6 {}

projects/experimental/components/avatar-labelled/avatar-labeled.component.ts

@@ -0,0 +1,10 @@
+import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+
+@Component({
+    selector: 'tui-avatar-labeled',
+    template: '<ng-content></ng-content>',
+    styleUrls: ['./avatar-labeled.styles.less'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TuiAvatarLabeledComponent {}

projects/experimental/components/avatar-labelled/avatar-labeled.module.ts

@@ -0,0 +1,9 @@
+import {NgModule} from '@angular/core';
+
+import {TuiAvatarLabeledComponent} from './avatar-labeled.component';
+
+@NgModule({
+    declarations: [TuiAvatarLabeledComponent],
+    exports: [TuiAvatarLabeledComponent],
+})
+export class TuiAvatarLabeledModule {}

projects/experimental/components/avatar-labelled/avatar-labeled.styles.less

@@ -0,0 +1,19 @@
+tui-avatar-labeled {
+    display: flex;
+    width: 3.5rem;
+    box-sizing: content-box;
+    flex-direction: column;
+    text-align: center;
+    align-items: center;
+    line-height: 0.895rem;
+    font-size: 0.75rem;
+    padding: 0 0.5rem;
+
+    tui-avatar {
+        margin-bottom: 0.375rem;
+    }
+
+    [tuiFade] {
+        width: calc(100% + 1rem);
+    }
+}

projects/experimental/components/avatar-labelled/index.ts

@@ -0,0 +1,2 @@
+export * from './avatar-labeled.component';
+export * from './avatar-labeled.module';

projects/experimental/components/avatar-labelled/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "index.ts"
+    }
+}

projects/experimental/components/index.ts

@@ -1,4 +1,5 @@
 export * from '@taiga-ui/experimental/components/avatar';
+export * from '@taiga-ui/experimental/components/avatar-labelled';
 export * from '@taiga-ui/experimental/components/avatar-stack';
 export * from '@taiga-ui/experimental/components/badge';
 export * from '@taiga-ui/experimental/components/badge-notification';