chore(demo): migrate documentation page Alert to standalone compone…

…nts (#6964)

Co-authored-by: Stanslav Zaytsev <[email protected]>

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

@@ -1756,14 +1756,11 @@ export const ROUTES: Routes = [
         },
     },
     // SERVICES
-    {
+    route({
         path: 'components/alert',
-        loadChildren: async () =>
-            (await import('../components/alert/alert.module')).ExampleTuiAlertModule,
-        data: {
-            title: 'Alert',
-        },
-    },
+        title: 'Alert',
+        loadComponent: async () => import('../components/alert/alert.component'),
+    }),
     {
         path: 'services/breakpoint-service',
         loadChildren: async () =>

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

@@ -1,22 +1,52 @@
 import {Component, inject, INJECTOR} from '@angular/core';
+import {RouterLink} from '@angular/router';
 import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample} from '@taiga-ui/addon-doc';
+import {
+    TuiAddonDocModule,
+    type TuiDocExample,
+    TuiTextCodeModule,
+} from '@taiga-ui/addon-doc';
 import type {TuiPopoverContext} from '@taiga-ui/cdk';
 import type {TuiAlertOptions, TuiNotification} from '@taiga-ui/core';
-import {TUI_NOTIFICATION_OPTIONS, TuiAlertService} from '@taiga-ui/core';
+import {
+    TUI_NOTIFICATION_OPTIONS,
+    TuiAlertService,
+    TuiButtonModule,
+    TuiLinkModule,
+} from '@taiga-ui/core';
 import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {PolymorpheusComponent} from '@tinkoff/ng-polymorpheus';
 import {switchMap} from 'rxjs';
 
+import {TuiAlertExampleComponent1} from './examples/1';
+import {TuiAlertExampleComponent2} from './examples/2';
+import {TuiAlertExampleComponent3} from './examples/3';
+import {TuiAlertExampleComponent4} from './examples/4';
 import {AlertExampleWithDataComponent} from './examples/4/alert-example-with-data/alert-example-with-data.component';
+import {TuiAlertExampleComponent5} from './examples/5';
+import {TuiAlertExampleComponent6} from './examples/6';
 
 @Component({
+    standalone: true,
     selector: 'example-tui-alert',
+    imports: [
+        TuiTextCodeModule,
+        TuiButtonModule,
+        TuiLinkModule,
+        TuiAddonDocModule,
+        TuiAlertExampleComponent1,
+        TuiAlertExampleComponent2,
+        TuiAlertExampleComponent3,
+        TuiAlertExampleComponent4,
+        TuiAlertExampleComponent5,
+        TuiAlertExampleComponent6,
+        RouterLink,
+    ],
     templateUrl: './alert.template.html',
     styleUrls: ['./alert.style.less'],
     changeDetection,
 })
-export class ExampleTuiAlertComponent {
+export default class ExampleTuiAlertComponent {
     private readonly alerts = inject(TuiAlertService);
 
     private readonly defaultIcon = inject(TUI_NOTIFICATION_OPTIONS).icon;
@@ -57,9 +87,6 @@ export class ExampleTuiAlertComponent {
         'alert-example/alert-example.template.html': import(
             './examples/3/alert-example/alert-example.template.html?raw'
         ),
-        'alert-example/alert-example.module.ts': import(
-            './examples/3/alert-example/alert-example.module.ts?raw'
-        ),
     };
 
     protected readonly example4: TuiDocExample = {
@@ -74,17 +101,11 @@ export class ExampleTuiAlertComponent {
         'alert-example-with-data/alert-example-with-data.style.less': import(
             './examples/4/alert-example-with-data/alert-example-with-data.style.less?raw'
         ),
-        'alert-example-with-data/alert-example-with-data.module.ts': import(
-            './examples/4/alert-example-with-data/alert-example-with-data.module.ts?raw'
-        ),
     };
 
     protected readonly example5: TuiDocExample = {
         TypeScript: import('./examples/5/index.ts?raw'),
         HTML: import('./examples/5/index.html?raw'),
-        'custom-label/custom-label.module.ts': import(
-            './examples/5/custom-label/custom-label.module.ts?raw'
-        ),
         'custom-label/custom-label.component.ts': import(
             './examples/5/custom-label/custom-label.component.ts?raw'
         ),
@@ -94,10 +115,6 @@ export class ExampleTuiAlertComponent {
         'custom-label/custom-label.template.html': import(
             './examples/5/custom-label/custom-label.template.html?raw'
         ),
-        'alert-example-with-custom-label/alert-example-with-custom-label.module.ts':
-            import(
-                './examples/5/alert-example-with-custom-label/alert-example-with-custom-label.module.ts?raw'
-            ),
         'alert-example-with-custom-label/alert-example-with-custom-label.component.ts':
             import(
                 './examples/5/alert-example-with-custom-label/alert-example-with-custom-label.component.ts?raw'

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

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

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

@@ -1,12 +1,17 @@
+import {AsyncPipe} from '@angular/common';
 import type {TemplateRef} from '@angular/core';
 import {Component, inject, ViewChild} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
 import type {TuiAlertContext} from '@taiga-ui/core';
-import {TuiAlertService} from '@taiga-ui/core';
+import {TuiAlertService, TuiButtonModule} from '@taiga-ui/core';
+import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
 @Component({
+    standalone: true,
     selector: 'tui-alerts-example-2',
+    imports: [AsyncPipe, TuiButtonModule, TuiAmountPipe, PolymorpheusModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,

projects/demo/src/modules/components/alert/examples/3/alert-example/alert-example.component.ts

@@ -1,11 +1,13 @@
 import {Component, inject} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import type {TuiPopover} from '@taiga-ui/cdk';
-import type {TuiAlertOptions} from '@taiga-ui/core';
+import {type TuiAlertOptions, TuiButtonModule, TuiModeModule} from '@taiga-ui/core';
 import {POLYMORPHEUS_CONTEXT} from '@tinkoff/ng-polymorpheus';
 
 @Component({
+    standalone: true,
     selector: 'tui-notifications-service-example',
+    imports: [TuiButtonModule, TuiModeModule],
     templateUrl: './alert-example.template.html',
     changeDetection,
 })

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

@@ -2,14 +2,16 @@ import {Component, inject} from '@angular/core';
 import {Router} from '@angular/router';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiAlertService} from '@taiga-ui/core';
+import {TuiAlertService, TuiButtonModule} from '@taiga-ui/core';
 import {PolymorpheusComponent} from '@tinkoff/ng-polymorpheus';
 import {switchMap, takeUntil} from 'rxjs';
 
 import {AlertExampleComponent} from './alert-example/alert-example.component';
 
 @Component({
+    standalone: true,
     selector: 'tui-alerts-example-3',
+    imports: [AlertExampleComponent, TuiButtonModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,

projects/demo/src/modules/components/alert/examples/4/alert-example-with-data/alert-example-with-data.component.ts

@@ -1,11 +1,20 @@
+import {AsyncPipe} from '@angular/common';
 import {Component, inject} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
 import type {TuiPopover} from '@taiga-ui/cdk';
-import type {TuiAlertOptions} from '@taiga-ui/core';
+import {
+    type TuiAlertOptions,
+    TuiButtonModule,
+    TuiLinkModule,
+    TuiModeModule,
+} from '@taiga-ui/core';
 import {POLYMORPHEUS_CONTEXT} from '@tinkoff/ng-polymorpheus';
 
 @Component({
+    standalone: true,
     selector: 'tui-notifications-service-example-with-data',
+    imports: [AsyncPipe, TuiModeModule, TuiButtonModule, TuiLinkModule, TuiAmountPipe],
     templateUrl: './alert-example-with-data.template.html',
     styleUrls: ['./alert-example-with-data.style.less'],
     changeDetection,

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

@@ -2,14 +2,16 @@ import {Component, inject} from '@angular/core';
 import {Router} from '@angular/router';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiAlertService} from '@taiga-ui/core';
+import {TuiAlertService, TuiButtonModule} from '@taiga-ui/core';
 import {PolymorpheusComponent} from '@tinkoff/ng-polymorpheus';
 import {switchMap, takeUntil} from 'rxjs';
 
 import {AlertExampleWithDataComponent} from './alert-example-with-data/alert-example-with-data.component';
 
 @Component({
+    standalone: true,
     selector: 'tui-alerts-example-4',
+    imports: [AlertExampleWithDataComponent, TuiButtonModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,

projects/demo/src/modules/components/alert/examples/5/alert-example-with-custom-label/alert-example-with-custom-label.component.ts

@@ -2,10 +2,12 @@ import {Component, inject} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import type {TuiPopover} from '@taiga-ui/cdk';
 import type {TuiAlertOptions} from '@taiga-ui/core';
-import {POLYMORPHEUS_CONTEXT} from '@tinkoff/ng-polymorpheus';
+import {POLYMORPHEUS_CONTEXT, PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
 @Component({
+    standalone: true,
     selector: 'tui-notifications-service-example-with-custom-label',
+    imports: [PolymorpheusModule],
     templateUrl: './alert-example-with-custom-label.template.html',
     changeDetection,
 })

projects/demo/src/modules/components/alert/examples/5/custom-label/custom-label.component.ts

@@ -1,8 +1,11 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiSvgModule} from '@taiga-ui/core';
 
 @Component({
+    standalone: true,
     selector: 'tui-notifications-service-example-custom-label',
+    imports: [TuiSvgModule],
     templateUrl: './custom-label.template.html',
     styleUrls: ['./custom-label.style.less'],
     changeDetection,