refactor!: move experimental avatar to kit

taiga-family · Feb 26, 2024 · 7a4c687 · 7a4c687
1 parent dbd5a34
commit 7a4c687
Show file tree

Hide file tree

Showing 125 changed files with 611 additions and 1,722 deletions.
diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
@@ -1,5 +1,6 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
+import {tuiProvideRoutePageTab as route} from '@taiga-ui/addon-doc';
 
 export const ROUTES: Routes = [
     {
@@ -162,14 +163,11 @@ export const ROUTES: Routes = [
             title: 'Action',
         },
     },
-    {
+    route({
         path: 'components/avatar',
-        loadChildren: async () =>
-            (await import('../components/avatar/avatar.module')).ExampleTuiAvatarModule,
-        data: {
-            title: 'Avatar',
-        },
-    },
+        loadComponent: async () => import('../components/avatar/avatar.component'),
+        title: 'Avatar',
+    }),
     {
         path: 'components/badge',
         loadChildren: async () =>
@@ -213,14 +211,6 @@ export const ROUTES: Routes = [
             title: 'Appearance',
         },
     },
-    {
-        path: 'experimental/avatar',
-        loadChildren: async () =>
-            (await import('../experimental/avatar/avatar.module')).ExampleTuiAvatarModule,
-        data: {
-            title: 'Avatar ',
-        },
-    },
     {
         path: 'experimental/chip',
         loadChildren: async () =>

diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
@@ -159,8 +159,8 @@ export const pages: TuiDocPages = [
     },
     {
         section: 'Components',
-        title: 'Avatar',
-        keywords: 'аватар, image, pic, картинка, изображение, avatar, stack',
+        title: 'Avatar ',
+        keywords: 'аватар, image, pic, icon, картинка, изображение, avatar, stack',
         route: '/components/avatar',
     },
     {
@@ -859,12 +859,6 @@ export const pages: TuiDocPages = [
         route: '/icons/overview/Component',
     },
     // Experimental
-    {
-        section: 'Experimental',
-        title: 'Avatar ',
-        keywords: 'аватар, image, pic, icon, картинка, изображение, avatar, stack',
-        route: '/experimental/avatar',
-    },
     {
         section: 'Experimental',
         title: 'Badge',

diff --git a/projects/demo/src/modules/components/avatar/avatar.component.ts b/projects/demo/src/modules/components/avatar/avatar.component.ts
@@ -1,18 +1,36 @@
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
+import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
 import {changeDetection} from '@demo/emulate/change-detection';
-import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';
-import {TuiSafeHtml} from '@taiga-ui/cdk';
-import {TuiSizeXXL, TuiSizeXXS} from '@taiga-ui/core';
+import {TuiAddonDocModule, TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';
+import {TuiNotificationModule, TuiSizeXS, TuiSizeXXL} from '@taiga-ui/core';
+import {TuiAvatarComponent} from '@taiga-ui/kit';
+
+import {TuiAvatarExample1} from './examples/1';
+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';
 
 @Component({
+    standalone: true,
     selector: 'example-avatar',
+    imports: [
+        TuiAddonDocModule,
+        TuiNotificationModule,
+        TuiAvatarComponent,
+        TuiAvatarExample1,
+        TuiAvatarExample2,
+        TuiAvatarExample3,
+        TuiAvatarExample4,
+        TuiAvatarExample5,
+        TuiAvatarExample6,
+    ],
     templateUrl: './avatar.template.html',
     changeDetection,
 })
-export class ExampleTuiAvatarComponent {
-    readonly exampleOptions: TuiRawLoaderContent = import(
-        './examples/import/define-options.md?raw'
-    );
+export default class ExampleTuiAvatarComponent {
+    private readonly sanitizer = inject(DomSanitizer);
 
     readonly exampleModule: TuiRawLoaderContent = import(
         './examples/import/import-module.md?raw'
@@ -30,6 +48,7 @@ export class ExampleTuiAvatarComponent {
     readonly example2: TuiDocExample = {
         TypeScript: import('./examples/2/index.ts?raw'),
         HTML: import('./examples/2/index.html?raw'),
+        LESS: import('./examples/2/index.less?raw'),
     };
 
     readonly example3: TuiDocExample = {
@@ -40,7 +59,6 @@ export class ExampleTuiAvatarComponent {
     readonly example4: TuiDocExample = {
         TypeScript: import('./examples/4/index.ts?raw'),
         HTML: import('./examples/4/index.html?raw'),
-        LESS: import('./examples/4/index.less?raw'),
     };
 
     readonly example5: TuiDocExample = {
@@ -54,29 +72,7 @@ export class ExampleTuiAvatarComponent {
         LESS: import('./examples/6/index.less?raw'),
     };
 
-    readonly avatarUrlVariants: readonly string[] = [
-        'https://ng-web-apis.github.io/dist/assets/images/web-api.svg',
-        'https://taiga-ui.dev/assets/images/test-not-found.png',
-    ];
-
-    readonly fallbackVariants: readonly TuiSafeHtml[] = [
-        'tuiIconUserLarge',
-        '<svg enable-background="new 0 0 32 32" height="32px" viewBox="0 0 32 32" width="32px"' +
-            ' xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Error_x2C__lost_x2C__no_page_x2C__not_found"><g><g><g><circle cx="7.5" cy="5.5" fill="#263238" r="0.5"/><circle cx="5.5" cy="5.5" fill="#263238" r="0.5"/><circle cx="3.5" cy="5.5" fill="#263238" r="0.5"/><path d="M30.5,8h-29C1.224,8,1,7.776,1,7.5S1.224,7,1.5,7h29C30.776,7,31,7.224,31,7.5S30.776,8,30.5,8z" fill="#263238"/><path d="M29.5,29h-27C1.673,29,1,28.327,1,27.5v-23C1,3.673,1.673,3,2.5,3h27C30.327,3,31,3.673,31,4.5v23      C31,28.327,30.327,29,29.5,29z M2.5,4C2.224,4,2,4.225,2,4.5v23C2,27.775,2.224,28,2.5,28h27c0.276,0,0.5-0.225,0.5-0.5v-23      C30,4.225,29.776,4,29.5,4H2.5z" fill="#263238"/></g></g></g><g><path d="M24.5,24c-0.276,0-0.5-0.224-0.5-0.5V21h-3.5c-0.163,0-0.315-0.079-0.409-0.212s-0.117-0.303-0.062-0.456    l2.5-7C22.6,13.133,22.789,13,23,13h1.5c0.276,0,0.5,0.224,0.5,0.5V20h0.5c0.276,0,0.5,0.224,0.5,0.5S25.776,21,25.5,21H25v2.5    C25,23.776,24.776,24,24.5,24z M21.209,20H24v-6h-0.647L21.209,20z" fill="#263238"/><path d="M10.5,24c-0.276,0-0.5-0.224-0.5-0.5V21H6.5c-0.163,0-0.315-0.079-0.409-0.212s-0.117-0.303-0.062-0.456    l2.5-7C8.6,13.133,8.789,13,9,13h1.5c0.276,0,0.5,0.224,0.5,0.5V20h0.5c0.276,0,0.5,0.224,0.5,0.5S11.776,21,11.5,21H11v2.5    C11,23.776,10.776,24,10.5,24z M7.209,20H10v-6H9.353L7.209,20z" fill="#263238"/><path d="M17.5,24h-3c-0.827,0-1.5-0.673-1.5-1.5v-8c0-0.827,0.673-1.5,1.5-1.5h3c0.827,0,1.5,0.673,1.5,1.5v8    C19,23.327,18.327,24,17.5,24z M14.5,14c-0.276,0-0.5,0.225-0.5,0.5v8c0,0.275,0.224,0.5,0.5,0.5h3c0.276,0,0.5-0.225,0.5-0.5v-8    c0-0.275-0.224-0.5-0.5-0.5H14.5z" fill="#263238"/></g></g></svg>',
-    ];
-
-    avatarUrl: string | null = null;
-
-    fallback: TuiSafeHtml | null = this.fallbackVariants[0];
-
-    text = 'daenerys targaryen';
-
-    rounded = false;
-
-    autoColor = false;
-
-    readonly sizeVariants: ReadonlyArray<TuiSizeXXL | TuiSizeXXS> = [
-        'xxs',
+    readonly sizes: ReadonlyArray<TuiSizeXS | TuiSizeXXL> = [
         'xs',
         's',
         'm',
@@ -85,11 +81,19 @@ export class ExampleTuiAvatarComponent {
         'xxl',
     ];
 
-    size = this.sizeVariants[3];
+    size = this.sizes[3];
 
-    border = 'var(--tui-base-01)';
+    readonly srcVariants: ReadonlyArray<SafeResourceUrl | string> = [
+        'MW',
+        'https://avatars.githubusercontent.com/u/11832552',
+        'https://taiga-ui.dev/assets/images/test-not-found.png',
+        'tuiIconUserLarge',
+        this.sanitizer.bypassSecurityTrustResourceUrl(
+            'https://avatars.githubusercontent.com/u/10106368',
+        ),
+    ];
 
-    color = 'var(--tui-text-01)';
+    src = this.srcVariants[0];
 
-    background = 'var(--tui-secondary-active)';
+    round = true;
 }
diff --git a/projects/demo/src/modules/components/avatar/avatar.module.ts b/projects/demo/src/modules/components/avatar/avatar.module.ts