fix(experimental): rename BadgeAlert to BadgeNotification

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

@@ -215,12 +215,12 @@ export const ROUTES: Routes = [
         },
     },
     {
-        path: `experimental/badge-alert`,
+        path: `experimental/badge-notification`,
         loadChildren: async () =>
-            (await import(`../experimental/badge-alert/badge-alert.module`))
-                .ExampleTuiBadgeAlertModule,
+            (await import(`../experimental/badge-notification/badge-notification.module`))
+                .ExampleTuiBadgeNotificationModule,
         data: {
-            title: `BadgeAlert`,
+            title: `BadgeNotification`,
         },
     },
     {

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

@@ -835,9 +835,9 @@ export const pages: TuiDocPages = [
             },
             {
                 section: `Experimental`,
-                title: `BadgeAlert`,
+                title: `BadgeNotification`,
                 keywords: `бэдж, бейдж, circle, круг, badge, alert, нотификация`,
-                route: `/experimental/badge-alert`,
+                route: `/experimental/badge-notification`,
             },
             {
                 section: `Experimental`,

projects/demo/src/modules/experimental/badge-alert/badge-alert.component.ts → projects/demo/src/modules/experimental/badge-notification/badge-notification.component.ts

@@ -4,11 +4,11 @@ import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';
 import {TuiSizeL, TuiSizeXS} from '@taiga-ui/core';
 
 @Component({
-    selector: 'example-badge-alert',
-    templateUrl: './badge-alert.template.html',
+    selector: 'example-badge-notification',
+    templateUrl: './badge-notification.template.html',
     changeDetection,
 })
-export class ExampleTuiBadgeAlertComponent {
+export class ExampleTuiBadgeNotificationComponent {
     readonly exampleModule: TuiRawLoaderContent = import(
         './examples/import/import-module.md?raw'
     );

projects/demo/src/modules/experimental/badge-notification/badge-notification.module.ts

@@ -0,0 +1,27 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {tuiGetDocModules} from '@taiga-ui/addon-doc';
+import {TuiPlatformModule} from '@taiga-ui/cdk';
+import {TuiNotificationModule} from '@taiga-ui/core';
+import {TuiBadgeNotificationModule} from '@taiga-ui/experimental';
+
+import {ExampleTuiBadgeNotificationComponent} from './badge-notification.component';
+import {TuiBadgeNotificationExample1} from './examples/1';
+import {TuiBadgeNotificationExample2} from './examples/2';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        TuiBadgeNotificationModule,
+        TuiNotificationModule,
+        TuiPlatformModule,
+        tuiGetDocModules(ExampleTuiBadgeNotificationComponent),
+    ],
+    declarations: [
+        ExampleTuiBadgeNotificationComponent,
+        TuiBadgeNotificationExample1,
+        TuiBadgeNotificationExample2,
+    ],
+    exports: [ExampleTuiBadgeNotificationComponent],
+})
+export class ExampleTuiBadgeNotificationModule {}

projects/demo/src/modules/experimental/badge-alert/badge-alert.template.html → projects/demo/src/modules/experimental/badge-notification/badge-notification.template.html

@@ -1,5 +1,5 @@
 <tui-doc-page
-    header="BadgeAlert"
+    header="BadgeNotification"
     package="EXPERIMENTAL"
     type="components"
 >
@@ -20,21 +20,21 @@
             heading="Basic"
             [content]="example1"
         >
-            <tui-badge-alert-example-1></tui-badge-alert-example-1>
+            <tui-badge-notification-example-1></tui-badge-notification-example-1>
         </tui-doc-example>
 
         <tui-doc-example
             id="custom"
             heading="Custom color"
             [content]="example2"
         >
-            <tui-badge-alert-example-2></tui-badge-alert-example-2>
+            <tui-badge-notification-example-2></tui-badge-notification-example-2>
         </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>
         <tui-doc-demo>
-            <tui-badge-alert [size]="size">11</tui-badge-alert>
+            <tui-badge-notification [size]="size">11</tui-badge-notification>
         </tui-doc-demo>
         <label
             tuiLabel="Content type"

projects/demo/src/modules/experimental/badge-notification/examples/1/index.html

@@ -0,0 +1,23 @@
+<h4>Desktop</h4>
+<p tuiPlatform="web">
+    <tui-badge-notification>9</tui-badge-notification>
+    <tui-badge-notification size="m">9</tui-badge-notification>
+    <tui-badge-notification size="s">9</tui-badge-notification>
+    <tui-badge-notification size="xs">9</tui-badge-notification>
+</p>
+
+<h4>Android</h4>
+<p tuiPlatform="android">
+    <tui-badge-notification>9</tui-badge-notification>
+    <tui-badge-notification size="m">9</tui-badge-notification>
+    <tui-badge-notification size="s">9</tui-badge-notification>
+    <tui-badge-notification size="xs">9</tui-badge-notification>
+</p>
+
+<h4>IOS</h4>
+<p tuiPlatform="ios">
+    <tui-badge-notification>9</tui-badge-notification>
+    <tui-badge-notification size="m">9</tui-badge-notification>
+    <tui-badge-notification size="s">9</tui-badge-notification>
+    <tui-badge-notification size="xs">9</tui-badge-notification>
+</p>

projects/demo/src/modules/experimental/badge-notification/examples/1/index.less

@@ -0,0 +1,3 @@
+tui-badge-notification {
+    margin: 0.2rem;
+}

projects/demo/src/modules/experimental/badge-alert/examples/1/index.ts → projects/demo/src/modules/experimental/badge-notification/examples/1/index.ts

@@ -3,10 +3,10 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 
 @Component({
-    selector: 'tui-badge-alert-example-1',
+    selector: 'tui-badge-notification-example-1',
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     changeDetection,
     encapsulation,
 })
-export class TuiBadgeAlertExample1 {}
+export class TuiBadgeNotificationExample1 {}

projects/demo/src/modules/experimental/badge-notification/examples/2/index.html

@@ -0,0 +1,4 @@
+<tui-badge-notification>10</tui-badge-notification>
+<tui-badge-notification size="m">11</tui-badge-notification>
+<tui-badge-notification size="s">12</tui-badge-notification>
+<tui-badge-notification size="xs"></tui-badge-notification>

projects/demo/src/modules/experimental/badge-alert/examples/2/index.less → projects/demo/src/modules/experimental/badge-notification/examples/2/index.less

@@ -1,6 +1,6 @@
 @import '@taiga-ui/core/styles/taiga-ui-local.less';
 
-tui-badge-alert {
+tui-badge-notification {
     margin: 0.2rem;
     .gradient(#c86dd7, #3023ae);
 }

projects/demo/src/modules/experimental/badge-alert/examples/2/index.ts → projects/demo/src/modules/experimental/badge-notification/examples/2/index.ts

@@ -3,10 +3,10 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 
 @Component({
-    selector: 'tui-badge-alert-example-2',
+    selector: 'tui-badge-notification-example-2',
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     changeDetection,
     encapsulation,
 })
-export class TuiBadgeAlertExample2 {}
+export class TuiBadgeNotificationExample2 {}

projects/demo/src/modules/experimental/badge-alert/examples/import/import-module.md → projects/demo/src/modules/experimental/badge-notification/examples/import/import-module.md

@@ -1,12 +1,12 @@
 ```ts
 import {NgModule} from '@angular/core';
-import {TuiBadgeAlertModule} from '@taiga-ui/experimental';
+import {TuiBadgeNotificationModule} from '@taiga-ui/experimental';
 // ...
 
 @NgModule({
   imports: [
     // ...
-    TuiBadgeAlertModule,
+    TuiBadgeNotificationModule,
   ],
 })
 export class MyModule {}

projects/demo/src/modules/experimental/badge-notification/examples/import/insert-template.md

@@ -0,0 +1,3 @@
+```html
+<tui-badge-notification>10</tui-badge-notification>
+```

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

@@ -7,7 +7,7 @@ import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';
     templateUrl: './badged-content.template.html',
     changeDetection,
 })
-export class ExampleTuiBadgeAlertComponent {
+export class ExampleTuiBadgedContentComponent {
     readonly exampleModule: TuiRawLoaderContent = import(
         './examples/import/import-module.md?raw'
     );

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

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

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

@@ -48,7 +48,7 @@
     <ng-template pageTab>
         <tui-doc-demo>
             <tui-badged-content [style.--tui-radius]="radius">
-                <tui-badge-alert tuiSlot="top">1</tui-badge-alert>
+                <tui-badge-notification tuiSlot="top">1</tui-badge-notification>
                 <tui-avatar
                     size="l"
                     [round]="radius === '50%'"

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

@@ -1,10 +1,10 @@
 <tui-badged-content>
-    <tui-badge-alert
+    <tui-badge-notification
         size="s"
         tuiSlot="top"
     >
         99
-    </tui-badge-alert>
+    </tui-badge-notification>
     <tui-avatar
         size="s"
         src="tuiIconUserLarge"
@@ -18,12 +18,12 @@
         src="tuiIconUserLarge"
         [round]="false"
     ></tui-avatar>
-    <tui-badge-alert
+    <tui-badge-notification
         size="m"
         tuiSlot="bottom"
     >
         120
-    </tui-badge-alert>
+    </tui-badge-notification>
 </tui-badged-content>
 
 <tui-badged-content>
@@ -42,12 +42,12 @@
 </tui-badged-content>
 
 <tui-badged-content>
-    <tui-badge-alert
+    <tui-badge-notification
         size="l"
         tuiSlot="top"
     >
         99
-    </tui-badge-alert>
+    </tui-badge-notification>
     <tui-avatar
         size="xl"
         src="tuiIconUserLarge"

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

@@ -1,10 +1,10 @@
 <tui-badged-content [style.--tui-radius.%]="50">
-    <tui-badge-alert
+    <tui-badge-notification
         size="s"
         tuiSlot="top"
     >
         8
-    </tui-badge-alert>
+    </tui-badge-notification>
     <tui-avatar
         size="s"
         src="tuiIconUserLarge"
@@ -43,12 +43,12 @@
 </tui-badged-content>
 
 <tui-badged-content [style.--tui-radius.%]="50">
-    <tui-badge-alert
+    <tui-badge-notification
         size="l"
         tuiSlot="top"
     >
         99
-    </tui-badge-alert>
+    </tui-badge-notification>
     <tui-avatar
         size="xl"
         src="tuiIconUserLarge"