chore(demo): migrate documentation page Badge to standalone components

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

@@ -123,14 +123,11 @@ export const ROUTES: Routes = [
         title: 'Avatar',
         loadComponent: async () => import('../components/avatar/avatar.component'),
     }),
-    {
+    route({
         path: 'components/badge',
-        loadChildren: async () =>
-            (await import('../components/badge/badge.module')).ExampleTuiBadgeModule,
-        data: {
-            title: 'Badge',
-        },
-    },
+        loadComponent: async () => import('../components/badge/badge.component'),
+        title: 'Badge',
+    }),
     {
         path: 'components/badged-content',
         loadChildren: async () =>

projects/demo/src/modules/components/badge/badge.component.ts

@@ -1,14 +1,55 @@
+import {NgIf} from '@angular/common';
 import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiRawLoaderContent} from '@taiga-ui/addon-doc';
-import type {TuiSizeS, TuiSizeXL} from '@taiga-ui/core';
+import {TuiExamplePipe} from '@demo/utils';
+import {
+    TuiDocCodeModule,
+    TuiDocDemoModule,
+    TuiDocDocumentationModule,
+    TuiDocExampleModule,
+    TuiDocPageModule,
+    type TuiRawLoaderContent,
+} from '@taiga-ui/addon-doc';
+import {TuiLabelModule, type TuiSizeS, type TuiSizeXL} from '@taiga-ui/core';
+import {TuiBadgeDirective, TuiFadeDirective, TuiRadioListModule} from '@taiga-ui/kit';
+
+import {TuiBadgeExample1} from './examples/1';
+import {TuiBadgeExample2} from './examples/2';
+import {TuiBadgeExample3} from './examples/3';
+import {TuiBadgeExample4} from './examples/4';
+import {TuiBadgeExample5} from './examples/5';
+import {TuiBadgeExample6} from './examples/6';
 
 @Component({
+    standalone: true,
     selector: 'example-badge',
+    imports: [
+        TuiExamplePipe,
+        TuiBadgeDirective,
+        NgIf,
+        TuiFadeDirective,
+        TuiLabelModule,
+        TuiRadioListModule,
+        FormsModule,
+
+        TuiBadgeExample1,
+        TuiBadgeExample2,
+        TuiBadgeExample3,
+        TuiBadgeExample4,
+        TuiBadgeExample5,
+        TuiBadgeExample6,
+
+        TuiDocCodeModule,
+        TuiDocExampleModule,
+        TuiDocPageModule,
+        TuiDocDemoModule,
+        TuiDocDocumentationModule,
+    ],
     templateUrl: './badge.template.html',
     changeDetection,
 })
-export class ExampleTuiBadgeComponent {
+export default class ExampleTuiBadgeComponent {
     protected readonly exampleModule: TuiRawLoaderContent = import(
         './examples/import/import-module.md?raw'
     );

projects/demo/src/modules/components/badge/examples/1/index.ts

@@ -1,9 +1,13 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiRepeatTimesModule} from '@taiga-ui/cdk';
+import {TuiBadgeDirective} from '@taiga-ui/kit';
 
 @Component({
+    standalone: true,
     selector: 'tui-badge-example-1',
+    imports: [TuiBadgeDirective, TuiRepeatTimesModule],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,

projects/demo/src/modules/components/badge/examples/2/index.ts

@@ -1,9 +1,12 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiBadgeDirective} from '@taiga-ui/kit';
 
 @Component({
+    standalone: true,
     selector: 'tui-badge-example-2',
+    imports: [TuiBadgeDirective],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,

projects/demo/src/modules/components/badge/examples/3/index.ts

@@ -1,9 +1,14 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiPlatformModule} from '@taiga-ui/cdk';
+import {TuiIconModule} from '@taiga-ui/experimental';
+import {TuiBadgeDirective} from '@taiga-ui/kit';
 
 @Component({
+    standalone: true,
     selector: 'tui-badge-example-3',
+    imports: [TuiBadgeDirective, TuiPlatformModule, TuiIconModule],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,

projects/demo/src/modules/components/badge/examples/4/index.ts

@@ -1,9 +1,12 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiBadgeDirective, TuiFadeDirective} from '@taiga-ui/kit';
 
 @Component({
+    standalone: true,
     selector: 'tui-badge-example-4',
+    imports: [TuiBadgeDirective, TuiFadeDirective],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,

projects/demo/src/modules/components/badge/examples/5/index.ts

@@ -1,9 +1,12 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiBadgeDirective} from '@taiga-ui/kit';
 
 @Component({
+    standalone: true,
     selector: 'tui-badge-example-5',
+    imports: [TuiBadgeDirective],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,

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

@@ -1,10 +1,12 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {tuiBadgeOptionsProvider} from '@taiga-ui/kit';
+import {TuiBadgeDirective, tuiBadgeOptionsProvider} from '@taiga-ui/kit';
 
 @Component({
+    standalone: true,
     selector: 'tui-badge-example-6',
+    imports: [TuiBadgeDirective],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,