From a272bd476bded2e97299020d083406ec012cd228 Mon Sep 17 00:00:00 2001 From: Maksim Ivanov Date: Wed, 24 Jan 2024 16:11:15 +0300 Subject: [PATCH] feat(experimental): add `tui-avatar-labeled` (#6523) --- .../experimental/avatar/avatar.component.ts | 6 ++++ .../experimental/avatar/avatar.module.ts | 4 +++ .../experimental/avatar/avatar.template.html | 8 +++++ .../experimental/avatar/examples/6/index.html | 34 +++++++++++++++++++ .../experimental/avatar/examples/6/index.less | 8 +++++ .../experimental/avatar/examples/6/index.ts | 12 +++++++ .../avatar-labeled.component.ts | 10 ++++++ .../avatar-labelled/avatar-labeled.module.ts | 9 +++++ .../avatar-labeled.styles.less | 19 +++++++++++ .../components/avatar-labelled/index.ts | 2 ++ .../avatar-labelled/ng-package.json | 5 +++ projects/experimental/components/index.ts | 1 + 12 files changed, 118 insertions(+) create mode 100644 projects/demo/src/modules/experimental/avatar/examples/6/index.html create mode 100644 projects/demo/src/modules/experimental/avatar/examples/6/index.less create mode 100644 projects/demo/src/modules/experimental/avatar/examples/6/index.ts create mode 100644 projects/experimental/components/avatar-labelled/avatar-labeled.component.ts create mode 100644 projects/experimental/components/avatar-labelled/avatar-labeled.module.ts create mode 100644 projects/experimental/components/avatar-labelled/avatar-labeled.styles.less create mode 100644 projects/experimental/components/avatar-labelled/index.ts create mode 100644 projects/experimental/components/avatar-labelled/ng-package.json diff --git a/projects/demo/src/modules/experimental/avatar/avatar.component.ts b/projects/demo/src/modules/experimental/avatar/avatar.component.ts index b8ba4b387ee7..8ba22342dda6 100644 --- a/projects/demo/src/modules/experimental/avatar/avatar.component.ts +++ b/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 = [ 'xxs', 'xs', diff --git a/projects/demo/src/modules/experimental/avatar/avatar.module.ts b/projects/demo/src/modules/experimental/avatar/avatar.module.ts index 0bc8dd427803..9f0f348cdd64 100644 --- a/projects/demo/src/modules/experimental/avatar/avatar.module.ts +++ b/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], }) diff --git a/projects/demo/src/modules/experimental/avatar/avatar.template.html b/projects/demo/src/modules/experimental/avatar/avatar.template.html index 16a37e51f011..4e3de6c00bd4 100644 --- a/projects/demo/src/modules/experimental/avatar/avatar.template.html +++ b/projects/demo/src/modules/experimental/avatar/avatar.template.html @@ -63,6 +63,14 @@ > + + + + diff --git a/projects/demo/src/modules/experimental/avatar/examples/6/index.html b/projects/demo/src/modules/experimental/avatar/examples/6/index.html new file mode 100644 index 000000000000..09cdaa5b4fa5 --- /dev/null +++ b/projects/demo/src/modules/experimental/avatar/examples/6/index.html @@ -0,0 +1,34 @@ + + + +
MarsiBarsi
+ + + + + +
Inkin
+
Alexander
+ + + + + +
Potekhin
+
Vladimir
+ + + + + +
Barsukov
+
Nikita
+ diff --git a/projects/demo/src/modules/experimental/avatar/examples/6/index.less b/projects/demo/src/modules/experimental/avatar/examples/6/index.less new file mode 100644 index 000000000000..d8787b7d1879 --- /dev/null +++ b/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); +} diff --git a/projects/demo/src/modules/experimental/avatar/examples/6/index.ts b/projects/demo/src/modules/experimental/avatar/examples/6/index.ts new file mode 100644 index 000000000000..9d34e62df8e9 --- /dev/null +++ b/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 {} diff --git a/projects/experimental/components/avatar-labelled/avatar-labeled.component.ts b/projects/experimental/components/avatar-labelled/avatar-labeled.component.ts new file mode 100644 index 000000000000..7c4fde3163b5 --- /dev/null +++ b/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: '', + styleUrls: ['./avatar-labeled.styles.less'], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class TuiAvatarLabeledComponent {} diff --git a/projects/experimental/components/avatar-labelled/avatar-labeled.module.ts b/projects/experimental/components/avatar-labelled/avatar-labeled.module.ts new file mode 100644 index 000000000000..8c0961a5c70f --- /dev/null +++ b/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 {} diff --git a/projects/experimental/components/avatar-labelled/avatar-labeled.styles.less b/projects/experimental/components/avatar-labelled/avatar-labeled.styles.less new file mode 100644 index 000000000000..e07de7dca45c --- /dev/null +++ b/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); + } +} diff --git a/projects/experimental/components/avatar-labelled/index.ts b/projects/experimental/components/avatar-labelled/index.ts new file mode 100644 index 000000000000..4cfe4651c142 --- /dev/null +++ b/projects/experimental/components/avatar-labelled/index.ts @@ -0,0 +1,2 @@ +export * from './avatar-labeled.component'; +export * from './avatar-labeled.module'; diff --git a/projects/experimental/components/avatar-labelled/ng-package.json b/projects/experimental/components/avatar-labelled/ng-package.json new file mode 100644 index 000000000000..bebf62dcb5e5 --- /dev/null +++ b/projects/experimental/components/avatar-labelled/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} diff --git a/projects/experimental/components/index.ts b/projects/experimental/components/index.ts index a2432ecf4574..b0f290e3704b 100644 --- a/projects/experimental/components/index.ts +++ b/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';