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

…omponents (#7183)

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 () =>

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 {}

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(

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(

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',

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 {}

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>