refactor!: BadgeNotification move to kit, make it standalone (#6952)

projects/cdk/schematics/ng-update/v4/steps/constants/identifiers-to-replace.ts

@@ -52,6 +52,13 @@ export const IDENTIFIERS_TO_REPLACE: ReplacementIdentifier[] = [
         from: {name: 'TuiBadgedContentModule', moduleSpecifier: '@taiga-ui/experimental'},
         to: {name: 'TuiBadgedContentComponent', moduleSpecifier: '@taiga-ui/kit'},
     },
+    {
+        from: {
+            name: 'TuiBadgeNotificationModule',
+            moduleSpecifier: '@taiga-ui/experimental',
+        },
+        to: {name: 'TuiBadgeNotificationComponent', moduleSpecifier: '@taiga-ui/kit'},
+    },
     {
         from: {name: 'TuiBadgedContentModule', moduleSpecifier: '@taiga-ui/kit'},
         to: {name: 'TuiBadgedContentComponent', moduleSpecifier: '@taiga-ui/kit'},

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

@@ -288,9 +288,9 @@ export const ROUTES: Routes = [
         },
     },
     {
-        path: 'experimental/badge-notification',
+        path: 'components/badge-notification',
         loadChildren: async () =>
-            (await import('../experimental/badge-notification/badge-notification.module'))
+            (await import('../components/badge-notification/badge-notification.module'))
                 .ExampleTuiBadgeNotificationModule,
         data: {
             title: 'BadgeNotification',

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

@@ -179,6 +179,12 @@ export const pages: TuiDocPages = [
                 keywords: 'бэдж, бейдж, circle, овал, круг, badge, нотификация',
                 route: '/components/badged-content',
             },
+            {
+                section: 'Components',
+                title: 'BadgeNotification',
+                keywords: 'бэдж, бейдж, circle, круг, badge, alert, нотификация',
+                route: '/components/badge-notification',
+            },
         ],
     },
     {
@@ -830,18 +836,6 @@ export const pages: TuiDocPages = [
         route: '/icons/overview/Component',
     },
     // Experimental
-    {
-        section: 'Experimental',
-        title: 'Badge',
-        subPages: [
-            {
-                section: 'Experimental',
-                title: 'BadgeNotification',
-                keywords: 'бэдж, бейдж, circle, круг, badge, alert, нотификация',
-                route: '/experimental/badge-notification',
-            },
-        ],
-    },
     {
         section: 'Experimental',
         title: 'Button',

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

@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-import {type TuiDocExample, type TuiRawLoaderContent} from '@taiga-ui/addon-doc';
-import {type TuiSizeL, type TuiSizeXS} from '@taiga-ui/core';
+import type {TuiRawLoaderContent} from '@taiga-ui/addon-doc';
+import type {TuiSizeL, TuiSizeXS} from '@taiga-ui/core';
 
 @Component({
     selector: 'example-badge-notification',
@@ -17,15 +17,6 @@ export class ExampleTuiBadgeNotificationComponent {
         './examples/import/insert-template.md?raw'
     );
 
-    protected readonly example1: TuiDocExample = {
-        HTML: import('./examples/1/index.html?raw'),
-    };
-
-    protected readonly example2: TuiDocExample = {
-        HTML: import('./examples/2/index.html?raw'),
-        LESS: import('./examples/2/index.less?raw'),
-    };
-
     protected readonly sizeVariants: ReadonlyArray<TuiSizeL | TuiSizeXS> = [
         'l',
         'm',

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

@@ -1,9 +1,10 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
+import {TuiExamplePipe} from '@demo/utils';
 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 {TuiBadgeNotificationComponent} from '@taiga-ui/kit';
 
 import {ExampleTuiBadgeNotificationComponent} from './badge-notification.component';
 import {TuiBadgeNotificationExample1} from './examples/1';
@@ -12,10 +13,11 @@ import {TuiBadgeNotificationExample2} from './examples/2';
 @NgModule({
     imports: [
         CommonModule,
-        TuiBadgeNotificationModule,
+        TuiBadgeNotificationComponent,
         TuiNotificationModule,
         TuiPlatformModule,
         tuiGetDocModules(ExampleTuiBadgeNotificationComponent),
+        TuiExamplePipe,
     ],
     declarations: [
         ExampleTuiBadgeNotificationComponent,

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

@@ -1,15 +1,9 @@
 <tui-doc-page
     header="BadgeNotification"
-    package="EXPERIMENTAL"
+    package="KIT"
     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>
             Simple non-interactive badge. Used in headers, cells, cards, avatars to indicate notifications, such as new
             messages
@@ -18,15 +12,15 @@
         <tui-doc-example
             id="base"
             heading="Basic"
-            [content]="example1"
+            [content]="1 | tuiExample: 'html'"
         >
             <tui-badge-notification-example-1></tui-badge-notification-example-1>
         </tui-doc-example>
 
         <tui-doc-example
             id="custom"
             heading="Custom color"
-            [content]="example2"
+            [content]="2 | tuiExample: 'html,less'"
         >
             <tui-badge-notification-example-2></tui-badge-notification-example-2>
         </tui-doc-example>

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

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

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

@@ -5,7 +5,6 @@ import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiPlatformModule} from '@taiga-ui/cdk';
 import {TuiNotificationModule} from '@taiga-ui/core';
 import {
-    TuiBadgeNotificationModule,
     TuiButtonModule,
     TuiFallbackSrcModule,
     TuiIconModule,
@@ -14,6 +13,7 @@ import {
     TuiAvatarComponent,
     TuiBadgedContentComponent,
     TuiBadgeDirective,
+    TuiBadgeNotificationComponent,
     TuiInputModule,
 } from '@taiga-ui/kit';
 
@@ -25,7 +25,7 @@ import {TuiBadgedContentExample3} from './examples/3';
 @NgModule({
     imports: [
         CommonModule,
-        TuiBadgeNotificationModule,
+        TuiBadgeNotificationComponent,
         TuiIconModule,
         TuiBadgeDirective,
         TuiBadgedContentComponent,

projects/demo/src/modules/experimental/cell/cell.module.ts

@@ -13,7 +13,6 @@ import {
     TuiTooltipModule,
 } from '@taiga-ui/core';
 import {
-    TuiBadgeNotificationModule,
     TuiButtonModule,
     TuiCardModule,
     TuiCellModule,
@@ -30,6 +29,7 @@ import {
     TuiAvatarStackComponent,
     TuiBadgedContentComponent,
     TuiBadgeDirective,
+    TuiBadgeNotificationComponent,
     TuiDataListWrapperModule,
     TuiFadeDirective,
     TuiProgressModule,
@@ -52,7 +52,7 @@ import {TuiCellExample7} from './examples/7';
         TuiAvatarComponent,
         TuiAvatarStackComponent,
         TuiBadgeDirective,
-        TuiBadgeNotificationModule,
+        TuiBadgeNotificationComponent,
         TuiBadgedContentComponent,
         TuiCellModule,
         TuiFadeDirective,

projects/demo/src/modules/experimental/chip/chip.module.ts

@@ -5,15 +5,11 @@ import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
 import {tuiGetDocModules} from '@taiga-ui/addon-doc';
 import {TuiRepeatTimesModule} from '@taiga-ui/cdk';
 import {TuiNotificationModule} from '@taiga-ui/core';
-import {
-    TuiBadgeNotificationModule,
-    TuiButtonModule,
-    TuiCheckboxModule,
-    TuiChipModule,
-} from '@taiga-ui/experimental';
+import {TuiButtonModule, TuiCheckboxModule, TuiChipModule} from '@taiga-ui/experimental';
 import {
     TuiAvatarComponent,
     TuiBadgedContentComponent,
+    TuiBadgeNotificationComponent,
     TuiFadeDirective,
 } from '@taiga-ui/kit';
 
@@ -36,7 +32,7 @@ import {TuiChipExample4} from './examples/4';
         TuiAvatarComponent,
         TuiCheckboxModule,
         TuiBadgedContentComponent,
-        TuiBadgeNotificationModule,
+        TuiBadgeNotificationComponent,
         tuiGetDocModules(ExampleTuiChipComponent),
     ],
     declarations: [

projects/demo/src/modules/experimental/header/header.module.ts

@@ -8,7 +8,6 @@ import {
     TuiTooltipModule,
 } from '@taiga-ui/core';
 import {
-    TuiBadgeNotificationModule,
     TuiButtonModule,
     TuiHeaderDirective,
     TuiIconModule,
@@ -19,6 +18,7 @@ import {
 import {
     TuiAvatarComponent,
     TuiBadgeDirective,
+    TuiBadgeNotificationComponent,
     TuiDataListWrapperModule,
     TuiSelectModule,
 } from '@taiga-ui/kit';
@@ -33,7 +33,7 @@ import {ExampleTuiCellComponent} from './header.component';
         CommonModule,
         FormsModule,
         TuiBadgeDirective,
-        TuiBadgeNotificationModule,
+        TuiBadgeNotificationComponent,
         TuiToggleModule,
         TuiTooltipModule,
         TuiHeaderDirective,

projects/demo/src/modules/experimental/navigation/navigation.module.ts

@@ -12,7 +12,6 @@ import {
     TuiNotificationModule,
 } from '@taiga-ui/core';
 import {
-    TuiBadgeNotificationModule,
     TuiButtonModule,
     TuiCardModule,
     TuiHeaderDirective,
@@ -25,6 +24,7 @@ import {
 import {
     TuiAvatarComponent,
     TuiBadgeDirective,
+    TuiBadgeNotificationComponent,
     TuiBreadcrumbsModule,
     TuiFadeDirective,
     TuiTabsModule,
@@ -46,7 +46,7 @@ import {ExampleTuiNavigationComponent} from './navigation.component';
         TuiButtonModule,
         TuiIconModule,
         TuiBadgeDirective,
-        TuiBadgeNotificationModule,
+        TuiBadgeNotificationComponent,
         TuiDropdownModule,
         TuiDataListModule,
         TuiFadeDirective,

projects/demo/src/modules/experimental/segmented/segmented.module.ts

@@ -4,12 +4,11 @@ import {FormsModule} from '@angular/forms';
 import {tuiGetDocModules} from '@taiga-ui/addon-doc';
 import {TuiNotificationModule} from '@taiga-ui/core';
 import {
-    TuiBadgeNotificationModule,
     TuiButtonModule,
     TuiIconModule,
     TuiSegmentedComponent,
 } from '@taiga-ui/experimental';
-import {TuiFadeDirective} from '@taiga-ui/kit';
+import {TuiBadgeNotificationComponent, TuiFadeDirective} from '@taiga-ui/kit';
 
 import {TuiSegmentedExample1} from './examples/1';
 import {TuiSegmentedExample2} from './examples/2';
@@ -22,7 +21,7 @@ import {ExampleTuiSegmentedComponent} from './segmented.component';
         CommonModule,
         TuiSegmentedComponent,
         TuiNotificationModule,
-        TuiBadgeNotificationModule,
+        TuiBadgeNotificationComponent,
         TuiFadeDirective,
         tuiGetDocModules(ExampleTuiSegmentedComponent),
         FormsModule,

projects/experimental/components/index.ts

@@ -1,4 +1,3 @@
-export * from '@taiga-ui/experimental/components/badge-notification';
 export * from '@taiga-ui/experimental/components/button';
 export * from '@taiga-ui/experimental/components/checkbox';
 export * from '@taiga-ui/experimental/components/chip';

projects/experimental/components/navigation/header.component.ts

@@ -1,8 +1,11 @@
 import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
 import {tuiDropdownOptionsProvider} from '@taiga-ui/core';
-import {tuiBadgeNotificationOptionsProvider} from '@taiga-ui/experimental/components/badge-notification';
 import {tuiButtonOptionsProvider} from '@taiga-ui/experimental/components/button';
-import {tuiAvatarOptionsProvider, tuiBadgeOptionsProvider} from '@taiga-ui/kit';
+import {
+    tuiAvatarOptionsProvider,
+    tuiBadgeNotificationOptionsProvider,
+    tuiBadgeOptionsProvider,
+} from '@taiga-ui/kit';
 
 @Component({
     selector: 'header[tuiNavigationHeader]',

projects/experimental/components/segmented/segmented.component.ts

@@ -14,7 +14,7 @@ import {
 import {ResizeObserverService} from '@ng-web-apis/resize-observer';
 import {TuiDestroyService, tuiIsHTMLElement, tuiPx, tuiZonefree} from '@taiga-ui/cdk';
 import {type TuiSizeL, type TuiSizeS} from '@taiga-ui/core';
-import {tuiBadgeNotificationOptionsProvider} from '@taiga-ui/experimental/components/badge-notification';
+import {tuiBadgeNotificationOptionsProvider} from '@taiga-ui/kit';
 import {takeUntil} from 'rxjs';
 
 import {TuiSegmentedDirective} from './segmented.directive';

projects/experimental/components/badge-notification/badge-notification.component.ts → projects/kit/components/badge-notification/badge-notification.component.ts

@@ -10,6 +10,7 @@ import {
 import {TUI_BADGE_NOTIFICATION_OPTIONS} from './badge-notification.options';
 
 @Component({
+    standalone: true,
     selector: 'tui-badge-notification',
     template: '<ng-content></ng-content>',
     styleUrls: ['./badge-notification.style.less'],

projects/experimental/components/badge-notification/index.ts → projects/kit/components/badge-notification/index.ts

@@ -1,3 +1,2 @@
 export * from './badge-notification.component';
-export * from './badge-notification.module';
 export * from './badge-notification.options';

projects/kit/components/index.ts

@@ -5,6 +5,7 @@ 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';
 export * from '@taiga-ui/kit/components/block';
 export * from '@taiga-ui/kit/components/breadcrumbs';