diff --git a/projects/demo/src/assets/images/fly.svg b/projects/demo/src/assets/images/fly.svg new file mode 100644 index 000000000000..1988adad5fec --- /dev/null +++ b/projects/demo/src/assets/images/fly.svg @@ -0,0 +1,132 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/projects/demo/src/assets/images/google.svg b/projects/demo/src/assets/images/google.svg new file mode 100644 index 000000000000..5aa789c3bdbd --- /dev/null +++ b/projects/demo/src/assets/images/google.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + diff --git a/projects/demo/src/assets/images/microsoft.svg b/projects/demo/src/assets/images/microsoft.svg new file mode 100644 index 000000000000..ef62a38deb1e --- /dev/null +++ b/projects/demo/src/assets/images/microsoft.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/projects/demo/src/assets/images/poster.svg b/projects/demo/src/assets/images/poster.svg new file mode 100644 index 000000000000..cc064eaab47a --- /dev/null +++ b/projects/demo/src/assets/images/poster.svg @@ -0,0 +1,110 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts index 77dc473f0ebf..259c4066593f 100644 --- a/projects/demo/src/modules/app/app.routes.ts +++ b/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 () => diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts index 33847bf332a9..baabf11a5fac 100644 --- a/projects/demo/src/modules/app/pages.ts +++ b/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`, diff --git a/projects/demo/src/modules/experimental/card/card.component.ts b/projects/demo/src/modules/experimental/card/card.component.ts new file mode 100644 index 000000000000..9cdbd48c8d1f --- /dev/null +++ b/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'), + }; +} diff --git a/projects/demo/src/modules/experimental/card/card.module.ts b/projects/demo/src/modules/experimental/card/card.module.ts new file mode 100644 index 000000000000..03b46dc17687 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/card.module.ts @@ -0,0 +1,69 @@ +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 { + TuiHintModule, + TuiNotificationModule, + TuiScrollbarModule, + TuiSvgModule, +} from '@taiga-ui/core'; +import { + TuiAutoColorModule, + TuiAvatarModule, + TuiAvatarStackModule, + TuiBadgeModule, + TuiCardModule, + TuiFadeModule, + TuiFallbackSrcModule, + TuiInitialsModule, + TuiSurfaceModule, + TuiThumbnailCardModule, + TuiTitleModule, +} from '@taiga-ui/experimental'; + +import {ExampleTuiCardComponent} from './card.component'; +import {TuiCardExample1} from './examples/1'; +import {TuiCardExample2} from './examples/2'; +import {TuiCardExample3} from './examples/3'; +import {TuiCardExample4} from './examples/4'; +import {TuiCardExample5} from './examples/5'; +import {TuiCardExample6} from './examples/6'; +import {TuiCardExample7} from './examples/7'; + +@NgModule({ + imports: [ + CommonModule, + TuiAvatarStackModule, + TuiAutoColorModule, + TuiInitialsModule, + TuiNotificationModule, + TuiFallbackSrcModule, + TuiFadeModule, + TuiCardModule, + TuiSurfaceModule, + TuiSvgModule, + TuiBadgeModule, + TuiTitleModule, + TuiAvatarModule, + TuiScrollbarModule, + TuiHintModule, + FormsModule, + TuiRippleModule, + TuiThumbnailCardModule, + tuiGetDocModules(ExampleTuiCardComponent), + ], + declarations: [ + ExampleTuiCardComponent, + TuiCardExample1, + TuiCardExample2, + TuiCardExample3, + TuiCardExample4, + TuiCardExample5, + TuiCardExample6, + TuiCardExample7, + ], + exports: [ExampleTuiCardComponent], +}) +export class ExampleTuiCardModule {} diff --git a/projects/demo/src/modules/experimental/card/card.template.html b/projects/demo/src/modules/experimental/card/card.template.html new file mode 100644 index 000000000000..ac6714c7e620 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/card.template.html @@ -0,0 +1,92 @@ + + + + This code is + experimental + and is a subject to change. Expect final solution to be shipped in the next major version + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
  1. +

    Import module:

    + + +
    2. + +
  2. +

    Add to the template:

    + + +
    3. +
+ + diff --git a/projects/demo/src/modules/experimental/card/examples/1/index.html b/projects/demo/src/modules/experimental/card/examples/1/index.html new file mode 100644 index 000000000000..f5ebe33cc50b --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/1/index.html @@ -0,0 +1,28 @@ +
+ + +

+ Title + Subtitle +

+
+ +
+

+ Title + Subtitle +

+
+ +
+

+ Title + Subtitle +

+
diff --git a/projects/demo/src/modules/experimental/card/examples/1/index.less b/projects/demo/src/modules/experimental/card/examples/1/index.less new file mode 100644 index 000000000000..3d03013a2311 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/1/index.less @@ -0,0 +1,9 @@ +:host { + display: flex; + gap: 1rem; +} + +.star { + background: rgb(66, 139, 250); + color: #fff; +} diff --git a/projects/demo/src/modules/experimental/card/examples/1/index.ts b/projects/demo/src/modules/experimental/card/examples/1/index.ts new file mode 100644 index 000000000000..490e91a760f3 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/1/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-1', + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export class TuiCardExample1 {} diff --git a/projects/demo/src/modules/experimental/card/examples/2/index.html b/projects/demo/src/modules/experimental/card/examples/2/index.html new file mode 100644 index 000000000000..4afc0e55c809 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/2/index.html @@ -0,0 +1,23 @@ +
+ + +

+ Title + Subtitle +

+
+ +
+

+ Title + Subtitle +

+ + +
diff --git a/projects/demo/src/modules/experimental/card/examples/2/index.less b/projects/demo/src/modules/experimental/card/examples/2/index.less new file mode 100644 index 000000000000..e0f06f1bf962 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/2/index.less @@ -0,0 +1,10 @@ +:host { + display: flex; + gap: 1rem; +} + +.plus { + background: #428bfa; + color: #fff; + border-radius: 0.25rem; +} diff --git a/projects/demo/src/modules/experimental/card/examples/2/index.ts b/projects/demo/src/modules/experimental/card/examples/2/index.ts new file mode 100644 index 000000000000..fd79fbaf8c27 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/2/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-2', + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export class TuiCardExample2 {} diff --git a/projects/demo/src/modules/experimental/card/examples/3/index.html b/projects/demo/src/modules/experimental/card/examples/3/index.html new file mode 100644 index 000000000000..b0a26c8a1ced --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/3/index.html @@ -0,0 +1,31 @@ +
+ + + 10 % + + +

+ Title + Subtitle +

+
+ +
+

+ Title + Subtitle +

+ + + + 10 % + +
diff --git a/projects/demo/src/modules/experimental/card/examples/3/index.less b/projects/demo/src/modules/experimental/card/examples/3/index.less new file mode 100644 index 000000000000..4af2c3fa311a --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/3/index.less @@ -0,0 +1,9 @@ +:host { + display: flex; + gap: 1rem; +} + +.badge { + background: #aff218; + color: #333; +} diff --git a/projects/demo/src/modules/experimental/card/examples/3/index.ts b/projects/demo/src/modules/experimental/card/examples/3/index.ts new file mode 100644 index 000000000000..bf5182354cc5 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/3/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-3', + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export class TuiCardExample3 {} diff --git a/projects/demo/src/modules/experimental/card/examples/4/index.html b/projects/demo/src/modules/experimental/card/examples/4/index.html new file mode 100644 index 000000000000..80edf46d4e3d --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/4/index.html @@ -0,0 +1,33 @@ +
+ + + + +

+ Title + Subtitle +

+
+ +
+

+ Title + Subtitle +

+ + + + +
diff --git a/projects/demo/src/modules/experimental/card/examples/4/index.less b/projects/demo/src/modules/experimental/card/examples/4/index.less new file mode 100644 index 000000000000..e8c357f08e0d --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/4/index.less @@ -0,0 +1,4 @@ +:host { + display: flex; + gap: 1rem; +} diff --git a/projects/demo/src/modules/experimental/card/examples/4/index.ts b/projects/demo/src/modules/experimental/card/examples/4/index.ts new file mode 100644 index 000000000000..a381b72caac0 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/4/index.ts @@ -0,0 +1,18 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; + +@Component({ + selector: 'tui-card-example-4', + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export class TuiCardExample4 { + readonly urls = [ + 'https://avatars.githubusercontent.com/u/11832552', + 'https://avatars.githubusercontent.com/u/10106368', + 'https://avatars.githubusercontent.com/u/46284632', + ]; +} diff --git a/projects/demo/src/modules/experimental/card/examples/5/index.html b/projects/demo/src/modules/experimental/card/examples/5/index.html new file mode 100644 index 000000000000..ba4057a0a4e6 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/5/index.html @@ -0,0 +1,74 @@ +
+

+ Poster + Cinema, concerts, theaters and sports up to 25% +

+ + + + 10 % + +
+ +
+

Flights

+ + + + 10 % + +
+ +
+

+ Google + -2.7% +

+ + + $ 3,605.2 + +
+ +
+

+ Microsoft + -12.44% +

+ + + $ 1,095.3 + +
diff --git a/projects/demo/src/modules/experimental/card/examples/5/index.less b/projects/demo/src/modules/experimental/card/examples/5/index.less new file mode 100644 index 000000000000..994070ff005d --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/5/index.less @@ -0,0 +1,83 @@ +:host { + display: flex; + gap: 1.2rem; + min-width: 40.625rem; +} + +.badge { + background: #aff218; + color: #333; +} + +.money { + background: #ffdd2d; + color: #333; +} + +.poster { + background: rgb(88, 192, 190); + padding: 0.75rem; + color: #fff; + width: 13.9375rem; + height: 8rem; + + [tuiSubtitle] { + color: #fff; + } + + &:after { + background: url(/assets/images/poster.svg) bottom right no-repeat; + } + + &:hover:after { + transform: scale(1.1); + } +} + +.fly { + background: rgb(101, 174, 234); + padding: 0.75rem; + color: #fff; + width: 8rem; + height: 8rem; + + &:after { + background: url(/assets/images/fly.svg) bottom right no-repeat; + } + + &:hover:after { + transform: scale(1.1); + } +} + +.google, +.microsoft { + padding: 0.75rem; + background: var(--tui-base-02); + height: 8rem; + width: 8rem; + + &:hover:after { + transform: scale(1.1); + } +} + +.google { + [tuiSubtitle] { + color: red; + } + + &:after { + background: url(/assets/images/google.svg) bottom right no-repeat; + } +} + +.microsoft { + [tuiSubtitle] { + color: #00b92d; + } + + &:after { + background: url(/assets/images/microsoft.svg) bottom right no-repeat; + } +} diff --git a/projects/demo/src/modules/experimental/card/examples/5/index.ts b/projects/demo/src/modules/experimental/card/examples/5/index.ts new file mode 100644 index 000000000000..29fc336578ce --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/5/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-5', + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export class TuiCardExample5 {} diff --git a/projects/demo/src/modules/experimental/card/examples/6/index.html b/projects/demo/src/modules/experimental/card/examples/6/index.html new file mode 100644 index 000000000000..e6fd9331b63a --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/6/index.html @@ -0,0 +1,46 @@ +
+

+ + + Lorem Ipsum is simply dummy text of the printing and typesetting industry. + + + + + + + It is a long established fact that a reader will be distracted by the readable content of a page + when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal + distribution of letters, as opposed to using 'Content here, content here', making it look like + readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their + default model text. + + + +

+
+ +
+

Text without fade out when overflow content

+ +
+ It is a long established fact that a reader will be distracted by the readable content of a page when looking at + its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as + opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing + packages and web page editors now use Lorem Ipsum as their default model text. +
+ {{ text.innerText }} +
diff --git a/projects/demo/src/modules/experimental/card/examples/6/index.less b/projects/demo/src/modules/experimental/card/examples/6/index.less new file mode 100644 index 000000000000..2cc57e51845a --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/6/index.less @@ -0,0 +1,27 @@ +@import '@taiga-ui/core/styles/taiga-ui-local'; + +:host { + display: flex; + gap: 1rem; +} + +.fade { + .scrollbar-hidden(); + width: 100%; + height: 2rem; + white-space: nowrap; + overflow: auto; +} + +.fade-vertical { + .scrollbar-hidden(); + height: 5rem; + overflow: auto; +} + +.nowrap { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + max-width: 100%; +} diff --git a/projects/demo/src/modules/experimental/card/examples/6/index.ts b/projects/demo/src/modules/experimental/card/examples/6/index.ts new file mode 100644 index 000000000000..9a36002ecf5d --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/6/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-6', + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export class TuiCardExample6 {} diff --git a/projects/demo/src/modules/experimental/card/examples/7/index.html b/projects/demo/src/modules/experimental/card/examples/7/index.html new file mode 100644 index 000000000000..96c8272f7a08 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/7/index.html @@ -0,0 +1,82 @@ +
+ + + +
+ + 4572 + + + + 6733 + + + + 5212 + +
+ +
+
+ +
+ + + +
+ + 2222 + +
+ + +
+
diff --git a/projects/demo/src/modules/experimental/card/examples/7/index.less b/projects/demo/src/modules/experimental/card/examples/7/index.less new file mode 100644 index 000000000000..57c9b8a4fe8a --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/7/index.less @@ -0,0 +1,44 @@ +@import '@taiga-ui/core/styles/taiga-ui-local'; + +:host { + display: flex; + gap: 1rem; +} + +.surface { + height: 6.5rem; + width: 6.5rem; + padding: 0.75rem; + background: var(--tui-base-02); + cursor: pointer; +} + +.selected { + z-index: 1; + color: var(--tui-primary); +} + +.mir { + background: #2b9aff linear-gradient(110deg, transparent 70%, #0780ff 71%, #db028b 100%); +} + +.visa { + background: linear-gradient(45deg, #ffaa00d1, #ffaa00), url(/assets/taiga-ui/icons/tuiIconStarLarge.svg); +} + +.card-list { + .scrollbar-hidden(); + display: flex; + flex-direction: row; + gap: 0.25rem; + width: 100%; + overflow-x: scroll; + overflow-y: hidden; + margin-left: -0.4375rem; + padding-left: 0.4375rem; + z-index: 2; + + tui-thumbnail-card { + flex-shrink: 0; + } +} diff --git a/projects/demo/src/modules/experimental/card/examples/7/index.ts b/projects/demo/src/modules/experimental/card/examples/7/index.ts new file mode 100644 index 000000000000..529de4049ea6 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/7/index.ts @@ -0,0 +1,14 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; + +@Component({ + selector: 'tui-card-example-7', + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export class TuiCardExample7 { + value = 0; +} diff --git a/projects/demo/src/modules/experimental/card/examples/import/import-module.md b/projects/demo/src/modules/experimental/card/examples/import/import-module.md new file mode 100644 index 000000000000..b8f6dc443ad0 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/import/import-module.md @@ -0,0 +1,13 @@ +```ts +import {NgModule} from '@angular/core'; +import {TuiCardModule} from '@taiga-ui/experimental'; +// ... + +@NgModule({ + imports: [ + // ... + TuiCardModule, + ], +}) +export class MyModule {} +``` diff --git a/projects/demo/src/modules/experimental/card/examples/import/insert-template.md b/projects/demo/src/modules/experimental/card/examples/import/insert-template.md new file mode 100644 index 000000000000..25593713373a --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/import/insert-template.md @@ -0,0 +1,13 @@ +```html +
+ + +

+ Title + Subtitle +

+
+``` diff --git a/projects/demo/used-icons.ts b/projects/demo/used-icons.ts index 5ab4f4040f00..2e74dd8a797e 100644 --- a/projects/demo/used-icons.ts +++ b/projects/demo/used-icons.ts @@ -100,6 +100,10 @@ export const TUI_USED_ICONS = [ `tuiIconBox`, `tuiIconLock`, `tuiIconUsers`, + `tuiIconPlusSquareLarge`, + `tuiIconTarget`, + `tuiIconGooglePay`, + `tuiIconApplePay`, `tuiIconArrowDownLeft`, `tuiIconArrowUpRight`, `tuiIconSmileLarge`, @@ -127,8 +131,6 @@ export const TUI_USED_ICONS = [ `tuiIconRuPay`, `tuiIconUzcard`, `tuiIconVerve`, - `tuiIconApplePay`, - `tuiIconGooglePay`, `tuiIconSamsungPay`, `tuiIconWorldPay`, `tuiIconAliPay`, diff --git a/projects/experimental/directives/card/card.directive.ts b/projects/experimental/directives/card/card.directive.ts new file mode 100644 index 000000000000..36e2f569d030 --- /dev/null +++ b/projects/experimental/directives/card/card.directive.ts @@ -0,0 +1,39 @@ +import { + ChangeDetectionStrategy, + Component, + Directive, + Inject, + Input, + ViewEncapsulation, +} from '@angular/core'; +import {TuiDirectiveStylesService} from '@taiga-ui/cdk'; +import {TuiSizeL} from '@taiga-ui/core'; + +@Component({ + template: '', + styleUrls: ['./card.styles.less'], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + host: { + class: 'tui-card', + }, +}) +export class TuiCardComponent {} + +@Directive({ + selector: '[tuiCard]', + host: { + tuiCard: '', + '[attr.data-size]': 'size || "m"', + }, +}) +export class TuiCardDirective { + @Input('tuiCard') + size: TuiSizeL | '' = 'm'; + + constructor( + @Inject(TuiDirectiveStylesService) directiveStyles: TuiDirectiveStylesService, + ) { + directiveStyles.addComponent(TuiCardComponent); + } +} diff --git a/projects/experimental/directives/card/card.module.ts b/projects/experimental/directives/card/card.module.ts new file mode 100644 index 000000000000..74c1c6cc6c66 --- /dev/null +++ b/projects/experimental/directives/card/card.module.ts @@ -0,0 +1,9 @@ +import {NgModule} from '@angular/core'; + +import {TuiCardComponent, TuiCardDirective} from './card.directive'; + +@NgModule({ + declarations: [TuiCardComponent, TuiCardDirective], + exports: [TuiCardDirective], +}) +export class TuiCardModule {} diff --git a/projects/experimental/directives/card/card.styles.less b/projects/experimental/directives/card/card.styles.less new file mode 100644 index 000000000000..65570ffe5320 --- /dev/null +++ b/projects/experimental/directives/card/card.styles.less @@ -0,0 +1,34 @@ +@import '@taiga-ui/core/styles/taiga-ui-local'; + +[tuiCard] { + .clearbtn(); + display: flex; + align-items: flex-start; + justify-content: space-between; + background: var(--tui-base-02); + border-radius: 0.75rem; + box-sizing: border-box; + padding: 0.75rem; + gap: 0.75rem; + flex-direction: column; + text-decoration: none; + width: var(--t-size); + height: var(--t-size); + + &[data-size='m'] { + --t-size: 8.75rem; + } + + [tuiTitle] { + font-weight: bold; + } + + [tuiSubtitle] { + color: var(--tui-text-01); + } + + [tuiTitle], + [tuiSubtitle] { + max-width: 100%; + } +} diff --git a/projects/experimental/directives/card/index.ts b/projects/experimental/directives/card/index.ts new file mode 100644 index 000000000000..9678bc197801 --- /dev/null +++ b/projects/experimental/directives/card/index.ts @@ -0,0 +1,2 @@ +export * from './card.directive'; +export * from './card.module'; diff --git a/projects/experimental/directives/card/ng-package.json b/projects/experimental/directives/card/ng-package.json new file mode 100644 index 000000000000..bab5ebcdb74a --- /dev/null +++ b/projects/experimental/directives/card/ng-package.json @@ -0,0 +1,8 @@ +{ + "lib": { + "entryFile": "index.ts", + "styleIncludePaths": [ + "../../../core/styles" + ] + } +} diff --git a/projects/experimental/directives/index.ts b/projects/experimental/directives/index.ts index a1910be9dc3d..b2fe7684d961 100644 --- a/projects/experimental/directives/index.ts +++ b/projects/experimental/directives/index.ts @@ -1,3 +1,4 @@ +export * from '@taiga-ui/experimental/directives/card'; export * from '@taiga-ui/experimental/directives/cell'; export * from '@taiga-ui/experimental/directives/fade'; export * from '@taiga-ui/experimental/directives/progress-segmented';