feat(experimental): add card-large

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

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

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

@@ -57,4 +57,71 @@ export class ExampleTuiCardComponent {
         HTML: import('./examples/7/index.html?raw'),
         LESS: import('./examples/7/index.less?raw'),
     };
+
+    readonly example8: TuiDocExample = {
+        TypeScript: import('./examples/8/index.ts?raw'),
+        HTML: import('./examples/8/index.html?raw'),
+        LESS: import('./examples/8/index.less?raw'),
+    };
+
+    readonly example9: TuiDocExample = {
+        TypeScript: import('./examples/9/index.ts?raw'),
+        HTML: import('./examples/9/index.html?raw'),
+    };
+
+    readonly example10: TuiDocExample = {
+        TypeScript: import('./examples/10/index.ts?raw'),
+        HTML: import('./examples/10/index.html?raw'),
+    };
+
+    readonly example11: TuiDocExample = {
+        TypeScript: import('./examples/11/index.ts?raw'),
+        HTML: import('./examples/11/index.html?raw'),
+        LESS: import('./examples/11/index.less?raw'),
+    };
+
+    readonly example12: TuiDocExample = {
+        TypeScript: import('./examples/12/index.ts?raw'),
+        HTML: import('./examples/12/index.html?raw'),
+    };
+
+    readonly example13: TuiDocExample = {
+        TypeScript: import('./examples/13/index.ts?raw'),
+        HTML: import('./examples/13/index.html?raw'),
+        LESS: import('./examples/13/index.less?raw'),
+    };
+
+    readonly example14: TuiDocExample = {
+        TypeScript: import('./examples/14/index.ts?raw'),
+        HTML: import('./examples/14/index.html?raw'),
+        LESS: import('./examples/14/index.less?raw'),
+    };
+
+    readonly example15: TuiDocExample = {
+        TypeScript: import('./examples/15/index.ts?raw'),
+        HTML: import('./examples/15/index.html?raw'),
+    };
+
+    readonly example16: TuiDocExample = {
+        TypeScript: import('./examples/16/index.ts?raw'),
+        HTML: import('./examples/16/index.html?raw'),
+        LESS: import('./examples/16/index.less?raw'),
+    };
+
+    readonly example17: TuiDocExample = {
+        TypeScript: import('./examples/17/index.ts?raw'),
+        HTML: import('./examples/17/index.html?raw'),
+        LESS: import('./examples/17/index.less?raw'),
+    };
+
+    readonly example18: TuiDocExample = {
+        TypeScript: import('./examples/18/index.ts?raw'),
+        HTML: import('./examples/18/index.html?raw'),
+        LESS: import('./examples/18/index.less?raw'),
+    };
+
+    readonly example19: TuiDocExample = {
+        TypeScript: import('./examples/19/index.ts?raw'),
+        HTML: import('./examples/19/index.html?raw'),
+    };
 }

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

@@ -3,8 +3,12 @@ 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 {
+    TuiDataListModule,
     TuiHintModule,
+    TuiHostedDropdownModule,
+    TuiLinkModule,
     TuiNotificationModule,
     TuiScrollbarModule,
     TuiSvgModule,
@@ -14,15 +18,20 @@ import {
     TuiAvatarModule,
     TuiAvatarStackModule,
     TuiBadgeModule,
+    TuiButtonCloseModule,
+    TuiButtonModule,
     TuiCardModule,
+    TuiCellModule,
     TuiFadeModule,
     TuiFallbackSrcModule,
+    TuiHeaderModule,
     TuiIconModule,
     TuiInitialsModule,
     TuiSurfaceModule,
     TuiThumbnailCardModule,
     TuiTitleModule,
 } from '@taiga-ui/experimental';
+import {TuiProgressModule} from '@taiga-ui/kit';
 
 import {ExampleTuiCardComponent} from './card.component';
 import {TuiCardExample1} from './examples/1';
@@ -32,6 +41,18 @@ import {TuiCardExample4} from './examples/4';
 import {TuiCardExample5} from './examples/5';
 import {TuiCardExample6} from './examples/6';
 import {TuiCardExample7} from './examples/7';
+import {TuiCardExample8} from './examples/8';
+import {TuiCardExample9} from './examples/9';
+import {TuiCardExample10} from './examples/10';
+import {TuiCardExample11} from './examples/11';
+import {TuiCardExample12} from './examples/12';
+import {TuiCardExample13} from './examples/13';
+import {TuiCardExample14} from './examples/14';
+import {TuiCardExample15} from './examples/15';
+import {TuiCardExample16} from './examples/16';
+import {TuiCardExample17} from './examples/17';
+import {TuiCardExample18} from './examples/18';
+import {TuiCardExample19} from './examples/19';
 
 @NgModule({
     imports: [
@@ -53,8 +74,18 @@ import {TuiCardExample7} from './examples/7';
         FormsModule,
         TuiRippleModule,
         TuiThumbnailCardModule,
-        tuiGetDocModules(ExampleTuiCardComponent),
         TuiIconModule,
+        TuiButtonModule,
+        TuiHeaderModule,
+        TuiCellModule,
+        tuiGetDocModules(ExampleTuiCardComponent),
+        TuiRepeatTimesModule,
+        TuiDataListModule,
+        TuiHostedDropdownModule,
+        TuiProgressModule,
+        TuiButtonCloseModule,
+        TuiPlatformModule,
+        TuiLinkModule,
     ],
     declarations: [
         ExampleTuiCardComponent,
@@ -65,6 +96,18 @@ import {TuiCardExample7} from './examples/7';
         TuiCardExample5,
         TuiCardExample6,
         TuiCardExample7,
+        TuiCardExample8,
+        TuiCardExample9,
+        TuiCardExample10,
+        TuiCardExample11,
+        TuiCardExample12,
+        TuiCardExample13,
+        TuiCardExample14,
+        TuiCardExample15,
+        TuiCardExample16,
+        TuiCardExample17,
+        TuiCardExample18,
+        TuiCardExample19,
     ],
     exports: [ExampleTuiCardComponent],
 })

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

@@ -68,6 +68,116 @@
         </tui-doc-example>
     </ng-template>
 
+    <ng-template pageTab="Large">
+        <tui-doc-example
+            id="basic"
+            heading="Basic"
+            [content]="example8"
+            [fullsize]="true"
+        >
+            <tui-card-example-8></tui-card-example-8>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="cell-avatar"
+            heading="Avatar"
+            [content]="example9"
+            [fullsize]="true"
+        >
+            <tui-card-example-9></tui-card-example-9>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="cell"
+            heading="Cell"
+            [content]="example10"
+            [fullsize]="true"
+        >
+            <tui-card-example-10></tui-card-example-10>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="cards-list"
+            heading="Cards List"
+            [content]="example11"
+            [fullsize]="true"
+        >
+            <tui-card-example-11></tui-card-example-11>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="cell-list"
+            heading="Cell List"
+            [content]="example12"
+            [fullsize]="true"
+        >
+            <tui-card-example-12></tui-card-example-12>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="cell-list-columns"
+            heading="Cell List (2 columns)"
+            [content]="example13"
+            [fullsize]="true"
+        >
+            <tui-card-example-13></tui-card-example-13>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="cell-list-headless"
+            heading="Cell List (headless)"
+            [content]="example14"
+            [fullsize]="true"
+        >
+            <tui-card-example-14></tui-card-example-14>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="progress"
+            heading="Progress"
+            [content]="example15"
+            [fullsize]="true"
+        >
+            <tui-card-example-15></tui-card-example-15>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="map"
+            heading="Map"
+            [content]="example16"
+            [fullsize]="true"
+        >
+            <tui-card-example-16></tui-card-example-16>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="image"
+            heading="Image"
+            [content]="example17"
+            [fullsize]="true"
+        >
+            <tui-card-example-17></tui-card-example-17>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="image-dark"
+            heading="Image-dark"
+            [content]="example18"
+            [fullsize]="true"
+        >
+            <tui-card-example-18></tui-card-example-18>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="paddings"
+            heading="Paddings and radiuses"
+            [content]="example19"
+            [fullsize]="true"
+        >
+            <tui-card-example-19></tui-card-example-19>
+        </tui-doc-example>
+    </ng-template>
+
     <ng-template pageTab="Setup">
         <ol class="b-demo-steps">
             <li>

projects/demo/src/modules/experimental/card/examples/10/index.html

@@ -0,0 +1,16 @@
+<div tuiCard="l">
+    <div tuiCell="l">
+        <tui-avatar
+            appearance="primary"
+            src="tuiIconStar"
+        ></tui-avatar>
+        <div tuiTitle>
+            Title
+            <div tuiSubtitle>Description</div>
+        </div>
+        <div tuiTitle>
+            Secondary title
+            <div tuiSubtitle>Another description</div>
+        </div>
+    </div>
+</div>

projects/demo/src/modules/experimental/card/examples/10/index.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-card-example-10',
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export class TuiCardExample10 {}

projects/demo/src/modules/experimental/card/examples/11/index.html

@@ -0,0 +1,38 @@
+<div tuiCard="l">
+    <div tuiHeader="m">
+        <h1 tuiTitle>
+            Title
+            <span tuiSubtitle>Subtitle</span>
+        </h1>
+    </div>
+
+    <tui-scrollbar>
+        <div class="card-list">
+            <div
+                *tuiRepeatTimes="let index of 4"
+                tuiCard
+            >
+                <tui-icon
+                    icon="tuiIconPlusSquareLarge"
+                    class="plus"
+                ></tui-icon>
+
+                <h2 tuiTitle>
+                    Title
+                    <span tuiSubtitle>Subtitle</span>
+                </h2>
+            </div>
+        </div>
+    </tui-scrollbar>
+
+    <div>
+        <button
+            appearance="secondary"
+            size="m"
+            tuiButton
+            type="button"
+        >
+            Label
+        </button>
+    </div>
+</div>

projects/demo/src/modules/experimental/card/examples/11/index.less

@@ -0,0 +1,12 @@
+.card-list {
+    display: flex;
+    flex-direction: row;
+    gap: 0.75rem;
+    flex-wrap: nowrap;
+}
+
+.plus {
+    background: #428bfa;
+    color: #fff;
+    border-radius: 0.25rem;
+}

projects/demo/src/modules/experimental/card/examples/11/index.ts

@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-card-example-11',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiCardExample11 {}