From 3da936ae50b0323110fbd5481aa91e87c85f92b3 Mon Sep 17 00:00:00 2001
From: German Panov <german.panov.2018@mail.ru>
Date: Mon, 8 Apr 2024 12:23:49 +0300
Subject: [PATCH] chore(demo): migrate documentation page `BlockStatus` to
 standalone components (#7183)

---
 projects/demo/src/modules/app/app.routes.ts   |  12 +-
 .../block-status/block-status.component.ts    |  43 -------
 .../block-status/block-status.module.ts       |  48 --------
 .../block-status/block-status.template.html   | 110 ------------------
 .../block-status/examples/1/index.less        |   0
 .../block-status/examples/1/index.ts          |   7 +-
 .../block-status/examples/2/index.less        |   0
 .../block-status/examples/2/index.ts          |  10 +-
 .../block-status/examples/3/index.ts          |   9 +-
 .../block-status/examples/4/index.ts          |  16 ++-
 .../block-status/examples/5/index.ts          |   8 +-
 .../import/{import-module.md => import.md}    |   0
 .../{insert-template.md => template.md}       |   0
 .../components/block-status/index.html        |  50 ++++++++
 .../modules/components/block-status/index.ts  |  23 ++++
 15 files changed, 115 insertions(+), 221 deletions(-)
 delete mode 100644 projects/demo/src/modules/components/block-status/block-status.component.ts
 delete mode 100644 projects/demo/src/modules/components/block-status/block-status.module.ts
 delete mode 100644 projects/demo/src/modules/components/block-status/block-status.template.html
 create mode 100644 projects/demo/src/modules/components/block-status/examples/1/index.less
 create mode 100644 projects/demo/src/modules/components/block-status/examples/2/index.less
 rename projects/demo/src/modules/components/block-status/examples/import/{import-module.md => import.md} (100%)
 rename projects/demo/src/modules/components/block-status/examples/import/{insert-template.md => template.md} (100%)
 create mode 100644 projects/demo/src/modules/components/block-status/index.html
 create mode 100644 projects/demo/src/modules/components/block-status/index.ts

diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
index 77699ef547ad..c4cc3906c57a 100644
--- a/projects/demo/src/modules/app/app.routes.ts
+++ b/projects/demo/src/modules/app/app.routes.ts
@@ -124,15 +124,11 @@ export const ROUTES: Routes = [
         title: 'Block',
         loadComponent: async () => import('../components/block'),
     }),
-    {
+    route({
         path: DemoRoute.BlockStatus,
-        loadChildren: async () =>
-            (await import('../components/block-status/block-status.module'))
-                .ExampleTuiBlockStatusModule,
-        data: {
-            title: 'BlockStatus',
-        },
-    },
+        title: 'BlockStatus',
+        loadComponent: async () => import('../components/block-status'),
+    }),
     {
         path: DemoRoute.Amount,
         loadChildren: async () =>
diff --git a/projects/demo/src/modules/components/block-status/block-status.component.ts b/projects/demo/src/modules/components/block-status/block-status.component.ts
deleted file mode 100644
index edadf3b7a449..000000000000
--- a/projects/demo/src/modules/components/block-status/block-status.component.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample} from '@taiga-ui/addon-doc';
-
-@Component({
-    selector: 'example-block-status',
-    templateUrl: './block-status.template.html',
-    changeDetection,
-})
-export class ExampleTuiBlockStatusComponent {
-    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'),
-    };
-
-    protected readonly example3: TuiDocExample = {
-        TypeScript: import('./examples/3/index.ts?raw'),
-        HTML: import('./examples/3/index.html?raw'),
-        LESS: import('./examples/3/index.less?raw'),
-    };
-
-    protected readonly example4: TuiDocExample = {
-        TypeScript: import('./examples/4/index.ts?raw'),
-        HTML: import('./examples/4/index.html?raw'),
-        LESS: import('./examples/4/index.less?raw'),
-    };
-
-    protected readonly example5: TuiDocExample = {
-        TypeScript: import('./examples/5/index.ts?raw'),
-        HTML: import('./examples/5/index.html?raw'),
-        LESS: import('./examples/5/index.less?raw'),
-    };
-
-    protected card = false;
-}
diff --git a/projects/demo/src/modules/components/block-status/block-status.module.ts b/projects/demo/src/modules/components/block-status/block-status.module.ts
deleted file mode 100644
index 57939e30ecdc..000000000000
--- a/projects/demo/src/modules/components/block-status/block-status.module.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiPlatformModule} from '@taiga-ui/cdk';
-import {
-    TuiAutoColorPipe,
-    TuiButtonDirective,
-    TuiInitialsPipe,
-    TuiLinkDirective,
-} from '@taiga-ui/core';
-import {TuiAvatarComponent} from '@taiga-ui/kit';
-import {TuiBlockStatusModule} from '@taiga-ui/layout';
-
-import {ExampleTuiBlockStatusComponent} from './block-status.component';
-import {TuiBlockStatusExample1} from './examples/1';
-import {TuiBlockStatusExample2} from './examples/2';
-import {TuiBlockStatusExample3} from './examples/3';
-import {TuiBlockStatusExample4} from './examples/4';
-import {TuiBlockStatusExample5} from './examples/5';
-
-@NgModule({
-    imports: [
-        TuiLinkDirective,
-        TuiBlockStatusModule,
-        CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        TuiAddonDocModule,
-        TuiButtonDirective,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiBlockStatusComponent)),
-        TuiPlatformModule,
-        TuiAvatarComponent,
-        TuiAutoColorPipe,
-        TuiInitialsPipe,
-    ],
-    declarations: [
-        ExampleTuiBlockStatusComponent,
-        TuiBlockStatusExample1,
-        TuiBlockStatusExample2,
-        TuiBlockStatusExample3,
-        TuiBlockStatusExample4,
-        TuiBlockStatusExample5,
-    ],
-    exports: [ExampleTuiBlockStatusComponent],
-})
-export class ExampleTuiBlockStatusModule {}
diff --git a/projects/demo/src/modules/components/block-status/block-status.template.html b/projects/demo/src/modules/components/block-status/block-status.template.html
deleted file mode 100644
index 807dc7617124..000000000000
--- a/projects/demo/src/modules/components/block-status/block-status.template.html
+++ /dev/null
@@ -1,110 +0,0 @@
-<tui-doc-page
-    header="BlockStatus"
-    package="LAYOUT"
-    type="components"
->
-    <ng-template pageTab>
-        <p>Component for status screens, result screens and zero screens</p>
-
-        <tui-doc-example
-            id="base"
-            heading="Basic"
-            [content]="example1"
-            [fullsize]="true"
-        >
-            <tui-block-status-example-1 />
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="actions"
-            heading="With actions"
-            [content]="example2"
-            [fullsize]="true"
-        >
-            <tui-block-status-example-2 />
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="card"
-            heading="Cards"
-            [content]="example3"
-            [fullsize]="true"
-        >
-            <tui-block-status-example-3 />
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="customization"
-            heading="customization"
-            [content]="example4"
-            [fullsize]="true"
-        >
-            <tui-block-status-example-4 />
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="mobile"
-            heading="Mobile"
-            [content]="example5"
-            [fullsize]="true"
-        >
-            <tui-block-status-example-5 />
-        </tui-doc-example>
-    </ng-template>
-
-    <ng-template pageTab>
-        <tui-doc-demo>
-            <tui-block-status [card]="card">
-                <img
-                    alt="hidden content"
-                    src="./assets/images/camping.svg"
-                    tuiSlot="top"
-                />
-                <h4>Title</h4>
-                Description
-                <button
-                    appearance="secondary"
-                    tuiButton
-                >
-                    Action
-                </button>
-            </tui-block-status>
-        </tui-doc-demo>
-        <tui-doc-documentation>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="card"
-                documentationPropertyType="boolean"
-                [(documentationPropertyValue)]="card"
-            >
-                Enable border radius and padding for card view
-            </ng-template>
-        </tui-doc-documentation>
-    </ng-template>
-
-    <ng-template pageTab>
-        <ol class="b-demo-steps">
-            <li>
-                <p>
-                    Import
-                    <code>TuiBlockStatusModule</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-doc-page>
diff --git a/projects/demo/src/modules/components/block-status/examples/1/index.less b/projects/demo/src/modules/components/block-status/examples/1/index.less
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/projects/demo/src/modules/components/block-status/examples/1/index.ts b/projects/demo/src/modules/components/block-status/examples/1/index.ts
index 8e5ce77a4601..d11c3de3adef 100644
--- a/projects/demo/src/modules/components/block-status/examples/1/index.ts
+++ b/projects/demo/src/modules/components/block-status/examples/1/index.ts
@@ -1,11 +1,14 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiBlockStatusModule} from '@taiga-ui/layout';
 
 @Component({
-    selector: 'tui-block-status-example-1',
+    standalone: true,
+    imports: [TuiBlockStatusModule],
     templateUrl: './index.html',
+    styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiBlockStatusExample1 {}
+export default class ExampleComponent {}
diff --git a/projects/demo/src/modules/components/block-status/examples/2/index.less b/projects/demo/src/modules/components/block-status/examples/2/index.less
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/projects/demo/src/modules/components/block-status/examples/2/index.ts b/projects/demo/src/modules/components/block-status/examples/2/index.ts
index 7ffebf52155e..17cb15f43dcd 100644
--- a/projects/demo/src/modules/components/block-status/examples/2/index.ts
+++ b/projects/demo/src/modules/components/block-status/examples/2/index.ts
@@ -1,18 +1,22 @@
+import {AsyncPipe, NgIf} from '@angular/common';
 import {Component, inject} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import type {TuiSizeL} from '@taiga-ui/core';
-import {TuiBreakpointService} from '@taiga-ui/core';
+import {TuiBreakpointService, TuiButtonDirective} from '@taiga-ui/core';
+import {TuiBlockStatusModule} from '@taiga-ui/layout';
 import type {Observable} from 'rxjs';
 import {map} from 'rxjs';
 
 @Component({
-    selector: 'tui-block-status-example-2',
+    standalone: true,
+    imports: [NgIf, AsyncPipe, TuiBlockStatusModule, TuiButtonDirective],
     templateUrl: './index.html',
+    styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiBlockStatusExample2 {
+export default class ExampleComponent {
     protected readonly breakpointService = inject(TuiBreakpointService);
 
     protected size$: Observable<TuiSizeL> = this.breakpointService.pipe(
diff --git a/projects/demo/src/modules/components/block-status/examples/3/index.ts b/projects/demo/src/modules/components/block-status/examples/3/index.ts
index f43ae8c3f174..17cb15f43dcd 100644
--- a/projects/demo/src/modules/components/block-status/examples/3/index.ts
+++ b/projects/demo/src/modules/components/block-status/examples/3/index.ts
@@ -1,19 +1,22 @@
+import {AsyncPipe, NgIf} from '@angular/common';
 import {Component, inject} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import type {TuiSizeL} from '@taiga-ui/core';
-import {TuiBreakpointService} from '@taiga-ui/core';
+import {TuiBreakpointService, TuiButtonDirective} from '@taiga-ui/core';
+import {TuiBlockStatusModule} from '@taiga-ui/layout';
 import type {Observable} from 'rxjs';
 import {map} from 'rxjs';
 
 @Component({
-    selector: 'tui-block-status-example-3',
+    standalone: true,
+    imports: [NgIf, AsyncPipe, TuiBlockStatusModule, TuiButtonDirective],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiBlockStatusExample3 {
+export default class ExampleComponent {
     protected readonly breakpointService = inject(TuiBreakpointService);
 
     protected size$: Observable<TuiSizeL> = this.breakpointService.pipe(
diff --git a/projects/demo/src/modules/components/block-status/examples/4/index.ts b/projects/demo/src/modules/components/block-status/examples/4/index.ts
index 422e8b4b4ee3..06a56c7c91fb 100644
--- a/projects/demo/src/modules/components/block-status/examples/4/index.ts
+++ b/projects/demo/src/modules/components/block-status/examples/4/index.ts
@@ -1,15 +1,27 @@
+import {NgFor} from '@angular/common';
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiAutoColorPipe, TuiButtonDirective, TuiInitialsPipe} from '@taiga-ui/core';
+import {TuiAvatarComponent} from '@taiga-ui/kit';
+import {TuiBlockStatusModule} from '@taiga-ui/layout';
 
 @Component({
-    selector: 'tui-block-status-example-4',
+    standalone: true,
+    imports: [
+        NgFor,
+        TuiBlockStatusModule,
+        TuiButtonDirective,
+        TuiAvatarComponent,
+        TuiAutoColorPipe,
+        TuiInitialsPipe,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiBlockStatusExample4 {
+export default class ExampleComponent {
     protected readonly users = [
         'Alex Inkin',
         'Vladimir Potekhin',
diff --git a/projects/demo/src/modules/components/block-status/examples/5/index.ts b/projects/demo/src/modules/components/block-status/examples/5/index.ts
index 0e3f1904dc44..40a8307484a3 100644
--- a/projects/demo/src/modules/components/block-status/examples/5/index.ts
+++ b/projects/demo/src/modules/components/block-status/examples/5/index.ts
@@ -1,12 +1,16 @@
 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 {TuiButtonDirective} from '@taiga-ui/core';
+import {TuiBlockStatusModule} from '@taiga-ui/layout';
 
 @Component({
-    selector: 'tui-block-status-example-5',
+    standalone: true,
+    imports: [TuiBlockStatusModule, TuiButtonDirective, TuiPlatformModule],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiBlockStatusExample5 {}
+export default class ExampleComponent {}
diff --git a/projects/demo/src/modules/components/block-status/examples/import/import-module.md b/projects/demo/src/modules/components/block-status/examples/import/import.md
similarity index 100%
rename from projects/demo/src/modules/components/block-status/examples/import/import-module.md
rename to projects/demo/src/modules/components/block-status/examples/import/import.md
diff --git a/projects/demo/src/modules/components/block-status/examples/import/insert-template.md b/projects/demo/src/modules/components/block-status/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/components/block-status/examples/import/insert-template.md
rename to projects/demo/src/modules/components/block-status/examples/import/template.md
diff --git a/projects/demo/src/modules/components/block-status/index.html b/projects/demo/src/modules/components/block-status/index.html
new file mode 100644
index 000000000000..aa28d92606c8
--- /dev/null
+++ b/projects/demo/src/modules/components/block-status/index.html
@@ -0,0 +1,50 @@
+<tui-doc-page
+    header="BlockStatus"
+    package="LAYOUT"
+    type="components"
+>
+    <ng-template pageTab>
+        <p>Component for status screens, result screens and zero screens</p>
+
+        <tui-doc-example
+            *ngFor="let example of examples; let index = index"
+            [component]="index + 1 | tuiComponent"
+            [content]="index + 1 | tuiExample"
+            [fullsize]="true"
+            [heading]="example"
+            [id]="example | tuiKebab"
+        />
+    </ng-template>
+
+    <ng-template pageTab>
+        <tui-doc-demo>
+            <tui-block-status [card]="card">
+                <img
+                    alt="hidden content"
+                    src="./assets/images/camping.svg"
+                    tuiSlot="top"
+                />
+                <h4>Title</h4>
+                Description
+                <button
+                    appearance="secondary"
+                    tuiButton
+                >
+                    Action
+                </button>
+            </tui-block-status>
+        </tui-doc-demo>
+        <tui-doc-documentation>
+            <ng-template
+                documentationPropertyMode="input"
+                documentationPropertyName="card"
+                documentationPropertyType="boolean"
+                [(documentationPropertyValue)]="card"
+            >
+                Enable border radius and padding for card view
+            </ng-template>
+        </tui-doc-documentation>
+    </ng-template>
+
+    <tui-setup *pageTab />
+</tui-doc-page>
diff --git a/projects/demo/src/modules/components/block-status/index.ts b/projects/demo/src/modules/components/block-status/index.ts
new file mode 100644
index 000000000000..e619a7867199
--- /dev/null
+++ b/projects/demo/src/modules/components/block-status/index.ts
@@ -0,0 +1,23 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemoModule} from '@demo/utils';
+import {TuiButtonDirective} from '@taiga-ui/core';
+import {TuiBlockStatusModule} from '@taiga-ui/layout';
+
+@Component({
+    standalone: true,
+    imports: [TuiDemoModule, TuiBlockStatusModule, TuiButtonDirective],
+    templateUrl: './index.html',
+    changeDetection,
+})
+export default class ExampleComponent {
+    protected card = false;
+
+    protected readonly examples = [
+        'Basic',
+        'With actions',
+        'Cards',
+        'Customization',
+        'Mobile',
+    ];
+}