chore(demo): migrate documentation page Breadcrumbs to standalone c…

…omponents (#7194)

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

@@ -270,15 +270,11 @@ export const ROUTES: Routes = [
             title: 'Navigation',
         },
     },
-    {
+    route({
         path: DemoRoute.Breadcrumbs,
-        loadChildren: async () =>
-            (await import('../components/breadcrumbs/breadcrumbs.module'))
-                .ExampleTuiBreadcrumbsModule,
-        data: {
-            title: 'Breadcrumbs',
-        },
-    },
+        title: 'Breadcrumbs',
+        loadComponent: async () => import('../components/breadcrumbs'),
+    }),
     route({
         path: DemoRoute.Button,
         title: 'Button',

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

@@ -1,14 +1,19 @@
+import {NgFor} from '@angular/common';
 import {Component} from '@angular/core';
+import {RouterLink} from '@angular/router';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiLinkDirective} from '@taiga-ui/core';
+import {TuiBreadcrumbsModule} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-breadcrumbs-example-1',
+    standalone: true,
+    imports: [NgFor, RouterLink, TuiBreadcrumbsModule, TuiLinkDirective],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiBreadcrumbsExample1 {
+export default class ExampleComponent {
     protected items = [
         {
             caption: 'Selects',

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

@@ -1,10 +1,32 @@
 import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {tuiBreadcrumbsOptionsProvider} from '@taiga-ui/kit';
+import {TuiRepeatTimesModule} from '@taiga-ui/cdk';
+import {
+    TuiButtonDirective,
+    TuiDataListModule,
+    TuiDropdownModule,
+    TuiLinkDirective,
+} from '@taiga-ui/core';
+import {
+    TuiBreadcrumbsModule,
+    tuiBreadcrumbsOptionsProvider,
+    TuiInputNumberModule,
+} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-breadcrumbs-example-2',
+    standalone: true,
+    imports: [
+        FormsModule,
+        TuiBreadcrumbsModule,
+        TuiDropdownModule,
+        TuiDataListModule,
+        TuiInputNumberModule,
+        TuiRepeatTimesModule,
+        TuiLinkDirective,
+        TuiButtonDirective,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
@@ -15,7 +37,7 @@ import {tuiBreadcrumbsOptionsProvider} from '@taiga-ui/kit';
         }),
     ],
 })
-export class TuiBreadcrumbsExample2 {
+export default class ExampleComponent {
     protected readonly items = [
         {
             caption: 'Open Source',

projects/demo/src/modules/components/breadcrumbs/breadcrumbs.template.html → projects/demo/src/modules/components/breadcrumbs/index.html

@@ -7,21 +7,13 @@
         <p>Navigation element that shows a path from root page to the current</p>
 
         <tui-doc-example
-            id="base"
-            heading="Basic"
-            [content]="example1"
-        >
-            <tui-breadcrumbs-example-1 />
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="more"
-            description="Plus using DI options"
-            heading="More button"
-            [content]="example2"
-        >
-            <tui-breadcrumbs-example-2 />
-        </tui-doc-example>
+            *ngFor="let example of examples; let index = index"
+            [component]="index + 1 | tuiComponent"
+            [content]="index + 1 | tuiExample"
+            [description]="example.description"
+            [heading]="example.name"
+            [id]="example.name | tuiKebab"
+        />
     </ng-template>
 
     <ng-template pageTab>
@@ -51,29 +43,5 @@
         </tui-doc-documentation>
     </ng-template>
 
-    <ng-template pageTab>
-        <ol class="b-demo-steps">
-            <li>
-                <p>
-                    Import
-                    <code>TuiBreadcrumbsModule</code>
-                    into a module where you want to use our component
-                </p>
-
-                <tui-doc-code
-                    filename="my.module.ts"
-                    [code]="exampleModule"
-                />
-            </li>
-
-            <li>
-                <p>Add to the template:</p>
-
-                <tui-doc-code
-                    filename="my.component.html"
-                    [code]="exampleHtml"
-                />
-            </li>
-        </ol>
-    </ng-template>
+    <tui-setup *pageTab />
 </tui-doc-page>

projects/demo/src/modules/components/breadcrumbs/breadcrumbs.component.ts → projects/demo/src/modules/components/breadcrumbs/index.ts

@@ -1,27 +1,17 @@
 import {Component} from '@angular/core';
+import {RouterLink} from '@angular/router';
 import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample} from '@taiga-ui/addon-doc';
-import type {TuiSizeL} from '@taiga-ui/core';
+import {TuiDemoModule} from '@demo/utils';
+import {TuiLinkDirective, type TuiSizeL} from '@taiga-ui/core';
+import {TuiBreadcrumbsModule} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'example-breadcrumbs',
-    templateUrl: './breadcrumbs.template.html',
+    standalone: true,
+    imports: [RouterLink, TuiDemoModule, TuiBreadcrumbsModule, TuiLinkDirective],
+    templateUrl: './index.html',
     changeDetection,
 })
-export class ExampleTuiBreadcrumbsComponent {
-    protected readonly exampleModule = import('./examples/import/import-module.md?raw');
-    protected readonly exampleHtml = import('./examples/import/insert-template.md?raw');
-
-    protected readonly example1: TuiDocExample = {
-        TypeScript: import('./examples/1/index.ts?raw'),
-        HTML: import('./examples/1/index.html?raw'),
-    };
-
-    protected readonly example2: TuiDocExample = {
-        TypeScript: import('./examples/2/index.ts?raw'),
-        HTML: import('./examples/2/index.html?raw'),
-    };
-
+export default class ExampleComponent {
     protected readonly itemsVariants = [
         [
             {
@@ -48,4 +38,9 @@ export class ExampleTuiBreadcrumbsComponent {
     protected readonly sizeVariants: readonly TuiSizeL[] = ['m', 'l'];
 
     protected size: TuiSizeL = this.sizeVariants[0];
+
+    protected readonly examples = [
+        {name: 'Basic'},
+        {name: 'More button', description: 'Plus using DI options'},
+    ];
 }