feat(experimental): add TuiCard (#5777)

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

@@ -256,6 +256,14 @@ export const ROUTES: Routes = [
             title: `Toggle `,
         },
     },
+    {
+        path: `experimental/card`,
+        loadChildren: async () =>
+            (await import(`../experimental/card/card.module`)).ExampleTuiCardModule,
+        data: {
+            title: `Card`,
+        },
+    },
     {
         path: `experimental/badge`,
         loadChildren: async () =>

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

@@ -951,6 +951,12 @@ export const pages: TuiDocPages = [
         keywords: `amount, money, деньги, сумма, количество, cash, копейки, рубли, доллары, евро`,
         route: `/experimental/amount`,
     },
+    {
+        section: `Experimental`,
+        title: `Card`,
+        keywords: `card, block, карточка, блок`,
+        route: `/experimental/card`,
+    },
     // Charts
     {
         section: `Charts`,

projects/demo/src/modules/experimental/card/card.component.ts

@@ -0,0 +1,60 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';
+
+@Component({
+    selector: 'example-card',
+    templateUrl: './card.template.html',
+    changeDetection,
+})
+export class ExampleTuiCardComponent {
+    readonly exampleModule: TuiRawLoaderContent = import(
+        './examples/import/import-module.md?raw'
+    );
+
+    readonly exampleHtml: TuiRawLoaderContent = import(
+        './examples/import/insert-template.md?raw'
+    );
+
+    readonly example1: TuiDocExample = {
+        TypeScript: import('./examples/1/index.ts?raw'),
+        HTML: import('./examples/1/index.html?raw'),
+        LESS: import('./examples/1/index.less?raw'),
+    };
+
+    readonly example2: TuiDocExample = {
+        TypeScript: import('./examples/2/index.ts?raw'),
+        HTML: import('./examples/2/index.html?raw'),
+        LESS: import('./examples/2/index.less?raw'),
+    };
+
+    readonly example3: TuiDocExample = {
+        TypeScript: import('./examples/3/index.ts?raw'),
+        HTML: import('./examples/3/index.html?raw'),
+        LESS: import('./examples/3/index.less?raw'),
+    };
+
+    readonly example4: TuiDocExample = {
+        TypeScript: import('./examples/4/index.ts?raw'),
+        HTML: import('./examples/4/index.html?raw'),
+        LESS: import('./examples/4/index.less?raw'),
+    };
+
+    readonly example5: TuiDocExample = {
+        TypeScript: import('./examples/5/index.ts?raw'),
+        HTML: import('./examples/5/index.html?raw'),
+        LESS: import('./examples/5/index.less?raw'),
+    };
+
+    readonly example6: TuiDocExample = {
+        TypeScript: import('./examples/6/index.ts?raw'),
+        HTML: import('./examples/6/index.html?raw'),
+        LESS: import('./examples/6/index.less?raw'),
+    };
+
+    readonly example7: TuiDocExample = {
+        TypeScript: import('./examples/7/index.ts?raw'),
+        HTML: import('./examples/7/index.html?raw'),
+        LESS: import('./examples/7/index.less?raw'),
+    };
+}