feat(kit): AvatarOutline add new directive (#7087)

projects/addon-doc/components/example/example-get-tabs.pipe.ts

@@ -4,6 +4,6 @@ import {Pipe} from '@angular/core';
 @Pipe({name: 'tuiDocExampleGetTabs'})
 export class TuiDocExampleGetTabsPipe implements PipeTransform {
     public transform(content: Record<string, string>, defaultTab: string): string[] {
-        return [defaultTab, ...Object.keys(content)];
+        return [defaultTab, ...Object.keys(content).filter(tab => content[tab])];
     }
 }

projects/demo-playwright/tests/core/error/error.spec.ts

@@ -6,7 +6,7 @@ test.describe('TuiError', () => {
         await tuiGoto(page, 'components/error#base');
         const example = new TuiDocumentationPagePO(page).getExample('#base');
 
-        const checkbox = example.locator('tui-toggle input[type="checkbox"]');
+        const checkbox = example.locator('input[tuiSwitch]');
         const error = example.locator('tui-error');
 
         await expect(error).not.toBeVisible();

projects/demo-playwright/tests/core/textarea/textarea.spec.ts

@@ -27,7 +27,7 @@ test.describe('Textarea', () => {
 
         await expect(textAreaComponent).toHaveScreenshot('textarea-line-break.png');
 
-        await page.locator('.t-row tui-toggle').first().click();
+        await page.locator('.t-row input[tuiSwitch]').first().click();
 
         await expect(textAreaComponent).toHaveScreenshot(
             'textarea-line-break-disabled.png',

projects/demo-playwright/utils/page-objects/documentation-api-page.po.ts

@@ -136,6 +136,9 @@ export class TuiDocumentationApiPagePO {
     }
 
     public async getToggle(row: Locator): Promise<Locator | null> {
-        return ((await row.locator('.t-cell_value tui-toggle').all()) ?? [])?.[0] ?? null;
+        return (
+            ((await row.locator('.t-cell_value input[tuiSwitch]').all()) ?? [])?.[0] ??
+            null
+        );
     }
 }

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

@@ -3,11 +3,7 @@ import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiFallbackSrcPipe} from '@taiga-ui/core';
-import {
-    TuiAvatarComponent,
-    TuiAvatarLabeledComponent,
-    TuiFadeDirective,
-} from '@taiga-ui/kit';
+import {TuiAvatarComponent, TuiAvatarLabeledComponent} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
@@ -16,7 +12,6 @@ import {
         TuiFallbackSrcPipe,
         TuiAvatarLabeledComponent,
         TuiAvatarComponent,
-        TuiFadeDirective,
     ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],

projects/demo/src/modules/components/avatar/examples/7/index.html

@@ -0,0 +1,23 @@
+<tui-avatar
+    size="m"
+    src="tuiIconHeart"
+    tuiAvatarOutline
+/>
+
+<tui-avatar
+    size="l"
+    tuiAvatarOutline="var(--tui-accent)"
+>
+    <img
+        alt="Alex Inkin"
+        src="/assets/images/avatar.jpg"
+    />
+</tui-avatar>
+
+<tui-avatar
+    size="xl"
+    src="OK"
+    tuiAvatarOutline="linear-gradient(#c86dd7, #3023ae)"
+    [style.background]="'linear-gradient(#3023ae, #c86dd7)'"
+    [style.color]="'#fff'"
+/>

projects/demo/src/modules/components/avatar/examples/7/index.less

@@ -0,0 +1,4 @@
+:host {
+    display: flex;
+    gap: 1rem;
+}

projects/demo/src/modules/components/avatar/examples/7/index.ts

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiAvatarComponent, TuiAvatarOutlineDirective} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [TuiAvatarComponent, TuiAvatarOutlineDirective],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export default class ExampleComponent {}

projects/demo/src/modules/components/avatar/index.html

@@ -5,60 +5,11 @@
 >
     <ng-template pageTab>
         <tui-doc-example
-            id="content"
-            heading="Content types"
-            [component]="1 | tuiComponent"
-            [content]="1 | tuiExample"
-        >
-            <tui-notification class="tui-space_bottom-4">
-                This example requires import of
-                <code>TuiFallbackSrcPipe</code>
-            </tui-notification>
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="color"
-            heading="Colors"
-            [component]="2 | tuiComponent"
-            [content]="2 | tuiExample"
-        >
-            <tui-notification class="tui-space_bottom-4">
-                This example requires import of
-                <code>TuiFadeDirective</code>
-            </tui-notification>
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="size"
-            heading="Sizes"
-            [component]="3 | tuiComponent"
-            [content]="3 | tuiExample"
-        />
-
-        <tui-doc-example
-            id="stacking"
-            heading="Stacking"
-            [component]="4 | tuiComponent"
-            [content]="4 | tuiExample: 'html,ts'"
-        >
-            <tui-notification class="tui-space_bottom-4">
-                This example requires import of
-                <code>TuiAvatarStackModule</code>
-            </tui-notification>
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="options"
-            heading="Options with DI"
-            [component]="5 | tuiComponent"
-            [content]="5 | tuiExample: 'html,ts'"
-        />
-
-        <tui-doc-example
-            id="labeled"
-            heading="Labeled"
-            [component]="6 | tuiComponent"
-            [content]="6 | tuiExample"
+            *ngFor="let example of examples; let index = index"
+            [component]="index + 1 | tuiComponent"
+            [content]="index + 1 | tuiExample"
+            [heading]="example"
+            [id]="example | tuiKebab"
         />
     </ng-template>
 
@@ -102,25 +53,5 @@
         </tui-doc-documentation>
     </ng-template>
 
-    <ng-template pageTab>
-        <ol class="b-demo-steps">
-            <li>
-                <p>Import module:</p>
-
-                <tui-doc-code
-                    filename="my.module.ts"
-                    [code]="exampleModule"
-                />
-            </li>
-
-            <li>
-                <p>Add to the template:</p>
-
-                <tui-doc-code
-                    filename="my.component.html"
-                    [code]="exampleHtml"
-                />
-            </li>
-        </ol>
-    </ng-template>
+    <tui-setup *pageTab />
 </tui-doc-page>

projects/demo/src/modules/components/avatar/index.ts

@@ -2,28 +2,28 @@ import {Component, inject} from '@angular/core';
 import type {SafeResourceUrl} from '@angular/platform-browser';
 import {DomSanitizer} from '@angular/platform-browser';
 import {changeDetection} from '@demo/emulate/change-detection';
-import {TuiComponentPipe, TuiExamplePipe} from '@demo/utils';
-import {TuiAddonDocModule} from '@taiga-ui/addon-doc';
+import {TuiDemoModule} from '@demo/utils';
 import type {TuiSizeXS, TuiSizeXXL} from '@taiga-ui/core';
-import {TuiNotificationModule} from '@taiga-ui/core';
 import {TuiAvatarComponent} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
-    imports: [
-        TuiAddonDocModule,
-        TuiNotificationModule,
-        TuiAvatarComponent,
-        TuiExamplePipe,
-        TuiComponentPipe,
-    ],
+    imports: [TuiAvatarComponent, TuiDemoModule],
     templateUrl: './index.html',
     changeDetection,
 })
 export default class ExampleComponent {
     private readonly sanitizer = inject(DomSanitizer);
-    protected readonly exampleModule = import('./examples/import/module.md?raw');
-    protected readonly exampleHtml = import('./examples/import/template.md?raw');
+
+    protected readonly examples = [
+        'Content types',
+        'Colors',
+        'Sizes',
+        'Stacking',
+        'Options with DI',
+        'Labeled',
+        'Outline',
+    ];
 
     protected readonly sizes: ReadonlyArray<TuiSizeXS | TuiSizeXXL> = [
         'xs',

projects/kit/components/avatar/avatar-outline.component.ts

@@ -0,0 +1,13 @@
+import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+
+@Component({
+    standalone: true,
+    template: '',
+    styleUrls: ['./avatar-outline.styles.less'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        class: 'tui-avatar-outline',
+    },
+})
+export class TuiAvatarOutlineComponent {}

projects/kit/components/avatar/avatar-outline.directive.ts

@@ -0,0 +1,25 @@
+import {Directive, Input} from '@angular/core';
+import {tuiWithStyles} from '@taiga-ui/cdk';
+
+import {TuiAvatarOutlineComponent} from './avatar-outline.component';
+
+@Directive({
+    standalone: true,
+    selector: '[tuiAvatarOutline]',
+    host: {
+        '[style.--t-fill]': 'value',
+        '[class._outline]': 'value',
+    },
+})
+export class TuiAvatarOutlineDirective {
+    @Input()
+    public tuiAvatarOutline: string | null = '';
+
+    protected readonly nothing = tuiWithStyles(TuiAvatarOutlineComponent);
+
+    protected get value(): string | null {
+        return this.tuiAvatarOutline === ''
+            ? 'var(--tui-primary)'
+            : this.tuiAvatarOutline;
+    }
+}

projects/kit/components/avatar/avatar-outline.styles.less

@@ -0,0 +1,37 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+[tuiAvatarOutline] {
+    --t-outline: 0.1875rem;
+    --t-gap: 0.125rem;
+
+    &[data-size='xs'],
+    &[data-size='s'],
+    &[data-size='m'] {
+        --t-outline: 0.125rem;
+        --t-gap: 0.0625rem;
+    }
+
+    &._outline {
+        mask: radial-gradient(
+            closest-side,
+            #000,
+            #000 calc(100% - var(--t-gap) - var(--t-outline) - 0.5px),
+            transparent calc(100% - var(--t-gap) - var(--t-outline)),
+            transparent calc(100% - var(--t-outline) - 0.5px),
+            #000 calc(100% - var(--t-outline))
+        );
+
+        &:after {
+            content: '';
+            .fullsize();
+
+            background: var(--t-fill);
+            mask: radial-gradient(
+                closest-side,
+                transparent,
+                transparent calc(100% - var(--t-outline) - 0.5px),
+                #000 calc(100% - var(--t-outline))
+            );
+        }
+    }
+}

projects/kit/components/avatar/index.ts

@@ -1,2 +1,6 @@
 export * from './avatar.component';
 export * from './avatar.options';
+export * from './avatar-labeled.component';
+export * from './avatar-outline.component';
+export * from './avatar-outline.directive';
+export * from './avatar-stack.component';

projects/kit/components/index.ts

@@ -2,8 +2,6 @@ export * from '@taiga-ui/kit/components/accordion';
 export * from '@taiga-ui/kit/components/action';
 export * from '@taiga-ui/kit/components/arrow';
 export * from '@taiga-ui/kit/components/avatar';
-export * from '@taiga-ui/kit/components/avatar-labeled';
-export * from '@taiga-ui/kit/components/avatar-stack';
 export * from '@taiga-ui/kit/components/badge';
 export * from '@taiga-ui/kit/components/badge-notification';
 export * from '@taiga-ui/kit/components/badged-content';