feat(experimental): BadgedContent add new component (#5498)

projects/demo/src/modules/app/app.routes.ts

@@ -223,6 +223,15 @@ export const ROUTES: Routes = [
             title: `BadgeAlert`,
         },
     },
+    {
+        path: `experimental/badged-content`,
+        loadChildren: async () =>
+            (await import(`../experimental/badged-content/badged-content.module`))
+                .ExampleTuiBadgedContentModule,
+        data: {
+            title: `BadgedContent`,
+        },
+    },
     {
         path: `experimental/button`,
         loadChildren: async () =>

projects/demo/src/modules/app/pages.ts

@@ -839,6 +839,12 @@ export const pages: TuiDocPages = [
                 keywords: `бэдж, бейдж, circle, круг, badge, alert, нотификация`,
                 route: `/experimental/badge-alert`,
             },
+            {
+                section: `Experimental`,
+                title: `BadgedContent`,
+                keywords: `бэдж, бейдж, circle, овал, круг, badge, нотификация`,
+                route: `/experimental/badged-content`,
+            },
         ],
     },
     {

projects/demo/src/modules/experimental/badged-content/badged-content.component.ts

@@ -0,0 +1,33 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {RawLoaderContent, TuiDocExample} from '@taiga-ui/addon-doc';
+
+@Component({
+    selector: 'example-badged-content',
+    templateUrl: './badged-content.template.html',
+    changeDetection,
+})
+export class ExampleTuiBadgeAlertComponent {
+    readonly exampleModule: RawLoaderContent = import(
+        './examples/import/import-module.md?raw'
+    );
+
+    readonly exampleHtml: RawLoaderContent = import(
+        './examples/import/insert-template.md?raw'
+    );
+
+    readonly example1: TuiDocExample = {
+        HTML: import('./examples/1/index.html?raw'),
+    };
+
+    readonly example2: TuiDocExample = {
+        HTML: import('./examples/2/index.html?raw'),
+    };
+
+    readonly example3: TuiDocExample = {
+        HTML: import('./examples/3/index.html?raw'),
+    };
+
+    radiusVariants = ['0.75rem', '50%'];
+    radius = this.radiusVariants[0];
+}

projects/demo/src/modules/experimental/badged-content/badged-content.module.ts

@@ -0,0 +1,46 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
+import {TuiPlatformModule} from '@taiga-ui/cdk';
+import {TuiNotificationModule, TuiSvgModule} from '@taiga-ui/core';
+import {
+    TuiAvatarModule,
+    TuiBadgeAlertModule,
+    TuiBadgedContentModule,
+    TuiBadgeModule,
+    TuiButtonModule,
+    TuiFallbackSrcModule,
+} from '@taiga-ui/experimental';
+import {TuiInputModule} from '@taiga-ui/kit';
+
+import {ExampleTuiBadgeAlertComponent} from './badged-content.component';
+import {TuiBadgedContentExample1} from './examples/1';
+import {TuiBadgedContentExample2} from './examples/2';
+import {TuiBadgedContentExample3} from './examples/3';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        TuiBadgeAlertModule,
+        TuiSvgModule,
+        TuiBadgeModule,
+        TuiBadgedContentModule,
+        TuiAvatarModule,
+        TuiFallbackSrcModule,
+        TuiInputModule,
+        TuiButtonModule,
+        TuiAddonDocModule,
+        TuiNotificationModule,
+        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiBadgeAlertComponent)),
+        TuiPlatformModule,
+    ],
+    declarations: [
+        ExampleTuiBadgeAlertComponent,
+        TuiBadgedContentExample1,
+        TuiBadgedContentExample2,
+        TuiBadgedContentExample3,
+    ],
+    exports: [ExampleTuiBadgeAlertComponent],
+})
+export class ExampleTuiBadgedContentModule {}

projects/demo/src/modules/experimental/badged-content/badged-content.template.html

@@ -0,0 +1,95 @@
+<tui-doc-page
+    header="BadgedContent"
+    package="EXPERIMENTAL"
+    type="components"
+>
+    <ng-template pageTab>
+        <tui-notification status="warning">
+            This code is
+            <strong>experimental</strong>
+            and is a subject to change. Expect final solution to be shipped in the next major version
+        </tui-notification>
+
+        <p>BadgedContent is a wrapper for other components to add badges and notifications to them.</p>
+
+        <tui-doc-example
+            id="base"
+            heading="basic"
+            [content]="example1"
+        >
+            <tui-badged-content-example-1></tui-badged-content-example-1>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="rounded"
+            heading="rounded content"
+            [content]="example2"
+            [description]="description"
+        >
+            <ng-template #description>
+                <p>
+                    The wrapped element is assumed to have 12px border-radius. If it is different, override the
+                    <code>--tui-radius</code>
+                    variable with actual value.
+                </p>
+            </ng-template>
+            <tui-badged-content-example-2></tui-badged-content-example-2>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="components"
+            heading="with different components"
+            [content]="example3"
+        >
+            <tui-badged-content-example-3></tui-badged-content-example-3>
+        </tui-doc-example>
+    </ng-template>
+
+    <ng-template pageTab>
+        <tui-doc-demo>
+            <tui-badged-content [style.--tui-radius]="radius">
+                <tui-badge-alert tuiSlot="top">1</tui-badge-alert>
+                <tui-avatar
+                    size="l"
+                    [round]="radius === '50%'"
+                    [src]="
+                        'https://avatars.githubusercontent.com/u/11832552' | tuiFallbackSrc: 'tuiIconUserLarge' | async
+                    "
+                ></tui-avatar>
+            </tui-badged-content>
+        </tui-doc-demo>
+        <tui-doc-documentation heading="CSS customization">
+            <ng-template
+                documentationPropertyMode="input"
+                documentationPropertyName="style.--t-radius"
+                documentationPropertyType="string"
+                [documentationPropertyValues]="radiusVariants"
+                [(documentationPropertyValue)]="radius"
+            >
+                Border radius
+            </ng-template>
+        </tui-doc-documentation>
+    </ng-template>
+
+    <ng-template pageTab>
+        <ol class="b-demo-steps">
+            <li>
+                <p>Import into a module</p>
+
+                <tui-doc-code
+                    filename="myComponent.module.ts"
+                    [code]="exampleModule"
+                ></tui-doc-code>
+            </li>
+
+            <li>
+                <p>Add to the template:</p>
+
+                <tui-doc-code
+                    filename="myComponent.template.html"
+                    [code]="exampleHtml"
+                ></tui-doc-code>
+            </li>
+        </ol>
+    </ng-template>
+</tui-doc-page>

projects/demo/src/modules/experimental/badged-content/examples/1/index.html

@@ -0,0 +1,59 @@
+<tui-badged-content>
+    <tui-badge-alert
+        size="s"
+        tuiSlot="top"
+    >
+        99
+    </tui-badge-alert>
+    <tui-avatar
+        size="s"
+        src="tuiIconUserLarge"
+    ></tui-avatar>
+</tui-badged-content>
+
+<tui-badged-content>
+    <tui-avatar
+        size="m"
+        src="tuiIconUserLarge"
+    ></tui-avatar>
+    <tui-badge-alert
+        size="m"
+        tuiSlot="bottom"
+    >
+        120
+    </tui-badge-alert>
+</tui-badged-content>
+
+<tui-badged-content>
+    <tui-badge
+        appearance="primary"
+        size="l"
+        tuiSlot="top"
+    >
+        <tui-svg src="tuiIconStar"></tui-svg>
+    </tui-badge>
+    <tui-avatar
+        size="l"
+        src="tuiIconUserLarge"
+    ></tui-avatar>
+</tui-badged-content>
+
+<tui-badged-content>
+    <tui-badge-alert
+        size="l"
+        tuiSlot="top"
+    >
+        99
+    </tui-badge-alert>
+    <tui-avatar
+        size="xl"
+        src="tuiIconUserLarge"
+    ></tui-avatar>
+    <tui-badge
+        appearance="accent"
+        size="l"
+        tuiSlot="bottom"
+    >
+        <tui-svg src="tuiIconStar"></tui-svg>
+    </tui-badge>
+</tui-badged-content>

projects/demo/src/modules/experimental/badged-content/examples/1/index.less

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

projects/demo/src/modules/experimental/badged-content/examples/1/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-badged-content-example-1',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    encapsulation,
+})
+export class TuiBadgedContentExample1 {}

projects/demo/src/modules/experimental/badged-content/examples/2/index.html

@@ -0,0 +1,57 @@
+<tui-badged-content [style.--tui-radius.%]="50">
+    <tui-badge-alert
+        size="s"
+        tuiSlot="top"
+    >
+        8
+    </tui-badge-alert>
+    <tui-avatar
+        size="s"
+        src="tuiIconUserLarge"
+        [round]="true"
+    ></tui-avatar>
+</tui-badged-content>
+
+<tui-badged-content [style.--tui-radius.%]="50">
+    <tui-badge
+        appearance="accent"
+        size="m"
+        tuiSlot="bottom"
+    >
+        <tui-svg src="tuiIconStar"></tui-svg>
+    </tui-badge>
+    <tui-avatar
+        size="m"
+        src="tuiIconUserLarge"
+        [round]="true"
+    ></tui-avatar>
+</tui-badged-content>
+
+<tui-badged-content [style.--tui-radius.%]="50">
+    <tui-badge
+        appearance="accent"
+        size="l"
+        tuiSlot="top"
+    >
+        Taiga
+    </tui-badge>
+    <tui-avatar
+        size="l"
+        src="tuiIconUserLarge"
+        [round]="true"
+    ></tui-avatar>
+</tui-badged-content>
+
+<tui-badged-content [style.--tui-radius.%]="50">
+    <tui-badge-alert
+        size="l"
+        tuiSlot="top"
+    >
+        99
+    </tui-badge-alert>
+    <tui-avatar
+        size="xl"
+        src="tuiIconUserLarge"
+        [round]="true"
+    ></tui-avatar>
+</tui-badged-content>

projects/demo/src/modules/experimental/badged-content/examples/2/index.less

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

projects/demo/src/modules/experimental/badged-content/examples/2/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-badged-content-example-2',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    encapsulation,
+})
+export class TuiBadgedContentExample2 {}

projects/demo/src/modules/experimental/badged-content/examples/3/index.html

@@ -0,0 +1,19 @@
+<tui-badged-content>
+    <tui-badge-alert
+        appearance="success"
+        size="xs"
+        tuiSlot="top"
+    ></tui-badge-alert>
+    <tui-input class="input">Input text</tui-input>
+</tui-badged-content>
+
+<tui-badged-content>
+    <tui-badge
+        appearance="accent"
+        size="s"
+        tuiSlot="bottom"
+    >
+        <tui-svg src="tuiIconCheckCircleLarge"></tui-svg>
+    </tui-badge>
+    <button tuiButton>Button</button>
+</tui-badged-content>

projects/demo/src/modules/experimental/badged-content/examples/3/index.less

@@ -0,0 +1,8 @@
+:host {
+    display: flex;
+    gap: 1rem;
+}
+
+tui-input {
+    min-width: 10rem;
+}