feat(experimental): add tuiCardLarge

projects/addon-mobile/styles/common/card-large.less

@@ -0,0 +1,12 @@
+[tuiCardLarge] {
+    &[data-space='normal'] {
+        --t-padding: 1.25rem;
+        --t-gap: 1.25rem;
+    }
+
+    &[data-space='compact'] {
+        --t-padding: 1rem;
+        --t-gap: 1rem;
+        --t-comp: -0.125rem;
+    }
+}

projects/addon-mobile/styles/taiga-ui-mobile.less

@@ -22,4 +22,5 @@
     @import './common/block-status';
     @import './common/button';
     @import './common/title';
+    @import './common/card-large';
 }

projects/core/styles/theme/appearance/outline.less

@@ -31,6 +31,7 @@
 
     .appearance-hover({
         background: var(--tui-clear);
+        cursor: pointer;
         --t-bs: var(--tui-base-05);
     });
 

projects/demo-playwright/utils/mock-images.ts

@@ -6,6 +6,7 @@ const DEFAULT_MOCKS = [
             /.*avatar.jpg/,
             /.*avatars.githubusercontent.com.*/,
             /https:\/\/github.com\/.*.png.*/,
+            /https:\/\/yandex.ru\/map-widget.*/,
             /https:\/\/m.media-amazon.com\/.*.jpg.*/,
             /.*bf2e94ae58ee713717faf397958a8e3d.jpg/, // filename - MD5 hash value of file content (waterplea avatar)
         ],

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

@@ -272,11 +272,21 @@ export const ROUTES: Routes = [
         },
     },
     {
-        path: 'experimental/card',
+        path: 'experimental/card-medium',
         loadChildren: async () =>
-            (await import('../experimental/card/card.module')).ExampleTuiCardModule,
+            (await import('../experimental/card-medium/card-medium.module'))
+                .ExampleTuiCardMediumModule,
         data: {
-            title: 'Card',
+            title: 'CardMedium',
+        },
+    },
+    {
+        path: 'experimental/card-large',
+        loadChildren: async () =>
+            (await import('../experimental/card-large/card-large.module'))
+                .ExampleTuiCardLargeModule,
+        data: {
+            title: 'CardLarge',
         },
     },
     {

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

@@ -1031,9 +1031,15 @@ export const pages: TuiDocPages = [
     },
     {
         section: 'Experimental',
-        title: 'Card',
-        keywords: 'card, block, карточка, блок',
-        route: '/experimental/card',
+        title: 'CardMedium',
+        keywords: 'card, card-medium, medium, block, карточка, блок',
+        route: '/experimental/card-medium',
+    },
+    {
+        section: 'Experimental',
+        title: 'CardLarge',
+        keywords: 'card, card-large, large, block, карточка, блок',
+        route: '/experimental/card-large',
     },
     {
         section: 'Experimental',

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

@@ -0,0 +1,73 @@
+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-large.template.html',
+    changeDetection,
+})
+export class ExampleTuiCardLargeComponent {
+    readonly exampleModule: TuiRawLoaderContent = import(
+        './examples/import/import-module.md?raw'
+    );
+
+    readonly exampleHtml: TuiRawLoaderContent = import(
+        './examples/import/insert-template.md?raw'
+    );
+
+    readonly example1: TuiDocExample = {
+        HTML: import('./examples/1/index.html?raw'),
+        LESS: import('./examples/1/index.less?raw'),
+    };
+
+    readonly example2: TuiDocExample = {
+        HTML: import('./examples/2/index.html?raw'),
+    };
+
+    readonly example3: TuiDocExample = {
+        HTML: import('./examples/3/index.html?raw'),
+        LESS: import('./examples/3/index.less?raw'),
+    };
+
+    readonly example4: TuiDocExample = {
+        HTML: import('./examples/4/index.html?raw'),
+        LESS: import('./examples/4/index.less?raw'),
+    };
+
+    readonly example5: TuiDocExample = {
+        HTML: import('./examples/5/index.html?raw'),
+    };
+
+    readonly example6: TuiDocExample = {
+        HTML: import('./examples/6/index.html?raw'),
+        LESS: import('./examples/6/index.less?raw'),
+    };
+
+    readonly example7: TuiDocExample = {
+        HTML: import('./examples/7/index.html?raw'),
+        LESS: import('./examples/7/index.less?raw'),
+    };
+
+    readonly example8: TuiDocExample = {
+        HTML: import('./examples/8/index.html?raw'),
+    };
+
+    readonly example9: TuiDocExample = {
+        HTML: import('./examples/9/index.html?raw'),
+    };
+
+    readonly example10: TuiDocExample = {
+        HTML: import('./examples/10/index.html?raw'),
+        LESS: import('./examples/10/index.less?raw'),
+    };
+
+    readonly example11: TuiDocExample = {
+        HTML: import('./examples/11/index.html?raw'),
+        LESS: import('./examples/11/index.less?raw'),
+    };
+
+    readonly example12: TuiDocExample = {
+        HTML: import('./examples/12/index.html?raw'),
+    };
+}

projects/demo/src/modules/experimental/card-large/card-large.module.ts

@@ -0,0 +1,100 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {tuiGetDocModules} from '@taiga-ui/addon-doc';
+import {TuiRippleModule} from '@taiga-ui/addon-mobile';
+import {TuiPlatformModule, TuiRepeatTimesModule} from '@taiga-ui/cdk';
+import {
+    TuiAppearanceDirective,
+    TuiDataListModule,
+    TuiHintModule,
+    TuiHostedDropdownModule,
+    TuiLinkModule,
+    TuiNotificationModule,
+    TuiScrollbarModule,
+    TuiSvgModule,
+} from '@taiga-ui/core';
+import {
+    TuiAutoColorModule,
+    TuiAvatarModule,
+    TuiAvatarStackModule,
+    TuiButtonCloseModule,
+    TuiButtonModule,
+    TuiCardModule,
+    TuiCellModule,
+    TuiFadeModule,
+    TuiFallbackSrcModule,
+    TuiHeaderDirective,
+    TuiIconModule,
+    TuiInitialsModule,
+    TuiSurfaceModule,
+    TuiThumbnailCardModule,
+    TuiTitleModule,
+} from '@taiga-ui/experimental';
+import {TuiBadgeDirective} from '@taiga-ui/kit';
+
+import {ExampleTuiCardLargeComponent} from './card-large.component';
+import {TuiCardLargeExample1} from './examples/1';
+import {TuiCardLargeExample2} from './examples/2';
+import {TuiCardLargeExample3} from './examples/3';
+import {TuiCardLargeExample4} from './examples/4';
+import {TuiCardLargeExample5} from './examples/5';
+import {TuiCardLargeExample6} from './examples/6';
+import {TuiCardLargeExample7} from './examples/7';
+import {TuiCardLargeExample8} from './examples/8';
+import {TuiCardLargeExample9} from './examples/9';
+import {TuiCardLargeExample10} from './examples/10';
+import {TuiCardLargeExample11} from './examples/11';
+import {TuiCardLargeExample12} from './examples/12';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        TuiAvatarStackModule,
+        TuiAutoColorModule,
+        TuiInitialsModule,
+        TuiNotificationModule,
+        TuiFallbackSrcModule,
+        TuiFadeModule,
+        TuiCardModule,
+        TuiSurfaceModule,
+        TuiSvgModule,
+        TuiBadgeDirective,
+        TuiTitleModule,
+        TuiAvatarModule,
+        TuiScrollbarModule,
+        TuiHintModule,
+        FormsModule,
+        TuiRippleModule,
+        TuiThumbnailCardModule,
+        TuiIconModule,
+        TuiButtonModule,
+        TuiHeaderDirective,
+        TuiCellModule,
+        tuiGetDocModules(ExampleTuiCardLargeComponent),
+        TuiRepeatTimesModule,
+        TuiDataListModule,
+        TuiHostedDropdownModule,
+        TuiButtonCloseModule,
+        TuiPlatformModule,
+        TuiLinkModule,
+        TuiAppearanceDirective,
+    ],
+    declarations: [
+        ExampleTuiCardLargeComponent,
+        TuiCardLargeExample1,
+        TuiCardLargeExample2,
+        TuiCardLargeExample3,
+        TuiCardLargeExample4,
+        TuiCardLargeExample5,
+        TuiCardLargeExample6,
+        TuiCardLargeExample7,
+        TuiCardLargeExample8,
+        TuiCardLargeExample9,
+        TuiCardLargeExample10,
+        TuiCardLargeExample11,
+        TuiCardLargeExample12,
+    ],
+    exports: [ExampleTuiCardLargeComponent],
+})
+export class ExampleTuiCardLargeModule {}

projects/demo/src/modules/experimental/card-large/card-large.template.html

@@ -0,0 +1,127 @@
+<tui-doc-page
+    header="CardLarge"
+    package="EXPERIMENTAL"
+    type="components"
+>
+    <ng-template pageTab>
+        <tui-doc-example
+            id="basic"
+            heading="Basic"
+            [content]="example1"
+        >
+            <tui-card-large-example-1></tui-card-large-example-1>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="cell-avatar"
+            heading="Avatar"
+            [content]="example2"
+        >
+            <tui-card-large-example-2></tui-card-large-example-2>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="single"
+            heading="Single item"
+            [content]="example3"
+        >
+            <tui-card-large-example-3></tui-card-large-example-3>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="cards-list"
+            heading="Cards List"
+            [content]="example4"
+        >
+            <tui-card-large-example-4></tui-card-large-example-4>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="cell-list"
+            heading="Cell List"
+            [content]="example5"
+        >
+            <tui-card-large-example-5></tui-card-large-example-5>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="cell-list-columns"
+            heading="Cell List (2 columns)"
+            [content]="example6"
+            [fullsize]="true"
+        >
+            <tui-card-large-example-6></tui-card-large-example-6>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="cell-list-headless"
+            heading="Cell List (actions)"
+            [content]="example7"
+        >
+            <tui-card-large-example-7></tui-card-large-example-7>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="align"
+            heading="Footer alignment"
+            [content]="example8"
+        >
+            <tui-card-large-example-8></tui-card-large-example-8>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="map"
+            heading="Map"
+            [content]="example9"
+            [fullsize]="true"
+        >
+            <tui-card-large-example-9></tui-card-large-example-9>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="image"
+            heading="Image"
+            [content]="example10"
+        >
+            <tui-card-large-example-10></tui-card-large-example-10>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="image-dark"
+            heading="Image-dark"
+            [content]="example11"
+        >
+            <tui-card-large-example-11></tui-card-large-example-11>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="paddings"
+            heading="Paddings and radiuses"
+            [content]="example12"
+        >
+            <tui-card-large-example-12></tui-card-large-example-12>
+        </tui-doc-example>
+    </ng-template>
+
+    <ng-template pageTab="Setup">
+        <ol class="b-demo-steps">
+            <li>
+                <p>Import module:</p>
+
+                <tui-doc-code
+                    filename="my.module.ts"
+                    [code]="exampleModule"
+                ></tui-doc-code>
+            </li>
+
+            <li>
+                <p>Add to the template:</p>
+
+                <tui-doc-code
+                    filename="my.component.html"
+                    [code]="exampleHtml"
+                ></tui-doc-code>
+            </li>
+        </ol>
+    </ng-template>
+</tui-doc-page>