diff --git a/projects/demo-playwright/utils/mock-images.ts b/projects/demo-playwright/utils/mock-images.ts index 481a0fdd8c72..c04e171d1850 100644 --- a/projects/demo-playwright/utils/mock-images.ts +++ b/projects/demo-playwright/utils/mock-images.ts @@ -5,6 +5,7 @@ const DEFAULT_MOCKS = [ patterns: [ /.*avatar.jpg/, /.*avatars.githubusercontent.com.*/, + /https:\/\/github.com\/.*.png.*/, /.*bf2e94ae58ee713717faf397958a8e3d.jpg/, // filename - MD5 hash value of file content (waterplea avatar) ], mockImage: `${__dirname}/../stubs/github-avatar.jpeg`, diff --git a/projects/demo/src/modules/experimental/cell/cell.component.ts b/projects/demo/src/modules/experimental/cell/cell.component.ts index fc9e489a7f67..f5a4ff188760 100644 --- a/projects/demo/src/modules/experimental/cell/cell.component.ts +++ b/projects/demo/src/modules/experimental/cell/cell.component.ts @@ -1,11 +1,11 @@ import {Component, ViewEncapsulation} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import { - RawLoaderContent, TuiDocExample, tuiDocExampleOptionsProvider, + TuiRawLoaderContent, } from '@taiga-ui/addon-doc'; -import {TuiSizeL, TuiSizeS} from '@taiga-ui/core'; +import {TuiSizeL, TuiSizeS, TuiSizeXXS} from '@taiga-ui/core'; @Component({ selector: 'example-cell', @@ -21,14 +21,26 @@ export class ExampleTuiCellComponent { secondaryTitle = 'Secondary title'; secondaryDescription = 'Secondary description'; + get markerSize(): TuiSizeXXS { + switch (this.size) { + case 'l': + return 's'; + case 'm': + return 'xs'; + default: + case 's': + return 'xxs'; + } + } + readonly sizeVariants: ReadonlyArray = ['s', 'm', 'l']; size: TuiSizeL | TuiSizeS = 'l'; - readonly exampleModule: RawLoaderContent = import( + readonly exampleModule: TuiRawLoaderContent = import( './examples/import/import-module.md?raw' ); - readonly exampleHtml: RawLoaderContent = import( + readonly exampleHtml: TuiRawLoaderContent = import( './examples/import/insert-template.md?raw' ); @@ -39,8 +51,8 @@ export class ExampleTuiCellComponent { readonly example2: TuiDocExample = { HTML: import('./examples/2/index.html?raw'), - TypeScript: import('./examples/2/index.ts?raw'), LESS: import('./examples/2/index.less?raw'), + TypeScript: import('./examples/2/index.ts?raw'), }; readonly example3: TuiDocExample = { @@ -54,4 +66,10 @@ export class ExampleTuiCellComponent { LESS: import('./examples/4/index.less?raw'), TypeScript: import('./examples/4/index.ts?raw'), }; + + readonly example5: TuiDocExample = { + HTML: import('./examples/5/index.html?raw'), + LESS: import('./examples/5/index.less?raw'), + TypeScript: import('./examples/5/index.ts?raw'), + }; } diff --git a/projects/demo/src/modules/experimental/cell/cell.module.ts b/projects/demo/src/modules/experimental/cell/cell.module.ts index d00b9b09ed18..c39e74ea6b92 100644 --- a/projects/demo/src/modules/experimental/cell/cell.module.ts +++ b/projects/demo/src/modules/experimental/cell/cell.module.ts @@ -2,7 +2,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {RouterModule} from '@angular/router'; -import {TuiMoneyModule} from '@taiga-ui/addon-commerce'; +import {TuiMoneyModule, TuiThumbnailCardModule} from '@taiga-ui/addon-commerce'; import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc'; import {TuiLinkModule, TuiNotificationModule, TuiTooltipModule} from '@taiga-ui/core'; import { @@ -12,13 +12,14 @@ import { TuiCellModule, TuiFadeModule, } from '@taiga-ui/experimental'; -import {TuiMarkerIconModule, TuiToggleModule} from '@taiga-ui/kit'; +import {TuiMarkerIconModule, TuiProgressModule, TuiToggleModule} from '@taiga-ui/kit'; import {ExampleTuiCellComponent} from './cell.component'; import {TuiCellExample1} from './examples/1'; import {TuiCellExample2} from './examples/2'; import {TuiCellExample3} from './examples/3'; import {TuiCellExample4} from './examples/4'; +import {TuiCellExample5} from './examples/5'; @NgModule({ imports: [ @@ -34,6 +35,8 @@ import {TuiCellExample4} from './examples/4'; TuiMarkerIconModule, TuiMoneyModule, TuiNotificationModule, + TuiProgressModule, + TuiThumbnailCardModule, TuiToggleModule, TuiTooltipModule, RouterModule.forChild(tuiGenerateRoutes(ExampleTuiCellComponent)), @@ -44,6 +47,7 @@ import {TuiCellExample4} from './examples/4'; TuiCellExample2, TuiCellExample3, TuiCellExample4, + TuiCellExample5, ], exports: [ExampleTuiCellComponent], }) diff --git a/projects/demo/src/modules/experimental/cell/cell.styles.less b/projects/demo/src/modules/experimental/cell/cell.styles.less index 621e0bc99cc1..c58318d603f2 100644 --- a/projects/demo/src/modules/experimental/cell/cell.styles.less +++ b/projects/demo/src/modules/experimental/cell/cell.styles.less @@ -1,6 +1,6 @@ @import 'taiga-ui-local'; -example-cell tui-cell { +example-cell [tuiCell] { max-width: 25rem; @media @tui-mobile { diff --git a/projects/demo/src/modules/experimental/cell/cell.template.html b/projects/demo/src/modules/experimental/cell/cell.template.html index bc09adf5dae4..4c958f9c9ef0 100644 --- a/projects/demo/src/modules/experimental/cell/cell.template.html +++ b/projects/demo/src/modules/experimental/cell/cell.template.html @@ -19,22 +19,23 @@ - All basic properties is + Cell + component makes the most of Angular - PolymorpheusContent + "Multi-slot content projection" - . It provides you with great flexibility to pass any content you wish. + pattern.
This example pass secondaryTitle / description - properties. + slots. @@ -75,7 +76,9 @@ directive. Or you can use native text-overflow: ellipsis - . Choose any tool you wish! + . +
+ Choose any tool you wish! @@ -88,67 +91,87 @@ > + + + + - + > + + + {{ title }} + {{ description }} + {{ secondaryTitle }} + {{ secondaryDescription }} + + Size of the cell. This property configures min-height, fonts and paddings. + +

+ Note + : this property does not change anything for mobile platform! Mobile devices has only + l + -size. +

+ + + + + Left-side main large text Left-side secondary small text Right-side main large text Right-side secondary small text - - Size of the cell. This property configures min-height, fonts and paddings. - -

- Note - : this property does not change anything for mobile platform! Mobile devices has only - l - -size. -

- diff --git a/projects/demo/src/modules/experimental/cell/examples/1/index.html b/projects/demo/src/modules/experimental/cell/examples/1/index.html index 360c4b307f2d..3e4f6f843331 100644 --- a/projects/demo/src/modules/experimental/cell/examples/1/index.html +++ b/projects/demo/src/modules/experimental/cell/examples/1/index.html @@ -1,13 +1,13 @@ - +
- + + Title + Description + Secondary title + Secondary description +
diff --git a/projects/demo/src/modules/experimental/cell/examples/2/index.html b/projects/demo/src/modules/experimental/cell/examples/2/index.html index a499375d9362..50583d69af4c 100644 --- a/projects/demo/src/modules/experimental/cell/examples/2/index.html +++ b/projects/demo/src/modules/experimental/cell/examples/2/index.html @@ -1,30 +1,77 @@ - - - - - - - - - - {{ text }} - - - +
+ + + + Alex Inkin + + + + + Feb 1, 2023 +
+ +
+ + + + Vladimir Potekhin + + + +
+ +
+ + + Roman Sedov + Salary + + +
+ +
+ + + Maksim Ivanov + Main account + + + + May 6, 2018 +
+ +
+ + + Nikita Barsukov + +
+ Happy birthday! +
+ + + + Mar 23, 2010 +
diff --git a/projects/demo/src/modules/experimental/cell/examples/2/index.less b/projects/demo/src/modules/experimental/cell/examples/2/index.less index 23d25a3bb0a1..1a5764140049 100644 --- a/projects/demo/src/modules/experimental/cell/examples/2/index.less +++ b/projects/demo/src/modules/experimental/cell/examples/2/index.less @@ -3,3 +3,7 @@ flex-direction: column; gap: 1rem; } + +.centralize { + align-self: center; +} diff --git a/projects/demo/src/modules/experimental/cell/examples/2/index.ts b/projects/demo/src/modules/experimental/cell/examples/2/index.ts index 4bbe56bda865..cee4a7e764b4 100644 --- a/projects/demo/src/modules/experimental/cell/examples/2/index.ts +++ b/projects/demo/src/modules/experimental/cell/examples/2/index.ts @@ -1,50 +1,18 @@ import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; +import {tuiMoneyOptionsProvider} from '@taiga-ui/addon-commerce'; +import {tuiAvatarOptionsProvider} from '@taiga-ui/experimental'; @Component({ selector: 'tui-cell-example-2', templateUrl: './index.html', styleUrls: ['./index.less'], + providers: [ + tuiAvatarOptionsProvider({size: 's', round: true}), + tuiMoneyOptionsProvider({sign: 'always', colored: true}), + ], changeDetection, encapsulation, }) -export class TuiCellExample2 { - readonly transactions = [ - { - user: 'Alex Inkin', - userAvatarUrl: 'https://github.com/waterplea.png?size=100', - amount: 1_000.99, - date: new Date(2023, 1, 1), - comment: '', - }, - { - user: 'Vladimir Potekhin', - userAvatarUrl: 'https://github.com/vladimirpotekhin.png?size=100', - amount: -0.15, - date: null, - comment: '', - }, - { - user: 'Roman Sedov', - userAvatarUrl: 'https://github.com/marsibarsi.png?size=100', - amount: 100_500, - date: null, - comment: 'Salary', - }, - { - user: 'Maksim Ivanov', - userAvatarUrl: 'https://github.com/splincode.png?size=100', - amount: -99.99, - date: new Date(2018, 4, 6), - comment: 'Main account', - }, - { - user: 'Nikita Barsukov', - userAvatarUrl: 'https://github.com/nsbarsukov.png?size=100', - amount: 42, - date: new Date(2010, 2, 23), - comment: 'Happy birthday!', - }, - ] as const; -} +export class TuiCellExample2 {} diff --git a/projects/demo/src/modules/experimental/cell/examples/3/index.html b/projects/demo/src/modules/experimental/cell/examples/3/index.html index 698af8296c99..db13431365b4 100644 --- a/projects/demo/src/modules/experimental/cell/examples/3/index.html +++ b/projects/demo/src/modules/experimental/cell/examples/3/index.html @@ -1,40 +1,35 @@ - +
- - - Taiga UI: more than UI kit - - + + Taiga UI: more than UI kit + - - - Taiga UI family is a collection of independent open source Angular libraries - - + + Taiga UI family is a collection of independent open source Angular libraries + - - Taiga UI is fully-treeshakable Angular UI Kit - + + Taiga UI is fully-treeshakable Angular UI Kit + - - - It is based on ng-polymorpheus and uses Web APIs for Angular - - - + + It is based on ng-polymorpheus and uses Web APIs for Angular + +
diff --git a/projects/demo/src/modules/experimental/cell/examples/3/index.less b/projects/demo/src/modules/experimental/cell/examples/3/index.less index f04689239b96..e2765553379a 100644 --- a/projects/demo/src/modules/experimental/cell/examples/3/index.less +++ b/projects/demo/src/modules/experimental/cell/examples/3/index.less @@ -1,15 +1,12 @@ -tui-cell { +[tuiCell] { max-width: 25rem; + white-space: nowrap; // You can customize shrink ratio of sides by this variables --tui-left-shrink: 4; --tui-right-shrink: 5; } -.no-wrap { - white-space: nowrap; -} - .ellipsis { display: block; text-overflow: ellipsis; diff --git a/projects/demo/src/modules/experimental/cell/examples/4/index.html b/projects/demo/src/modules/experimental/cell/examples/4/index.html index c7a783df29f8..d3fece4e6c9a 100644 --- a/projects/demo/src/modules/experimental/cell/examples/4/index.html +++ b/projects/demo/src/modules/experimental/cell/examples/4/index.html @@ -1,7 +1,6 @@ - - -
- 1 + Title + Description - +
+ 1 - -
- - + + + +
+ diff --git a/projects/demo/src/modules/experimental/cell/examples/4/index.ts b/projects/demo/src/modules/experimental/cell/examples/4/index.ts index a0a66626c036..17cc4e9279e8 100644 --- a/projects/demo/src/modules/experimental/cell/examples/4/index.ts +++ b/projects/demo/src/modules/experimental/cell/examples/4/index.ts @@ -15,4 +15,6 @@ export class TuiCellExample4 { TuiTooltipModule, TuiToggleModule `; + + toggleValue = true; } diff --git a/projects/demo/src/modules/experimental/cell/examples/5/index.html b/projects/demo/src/modules/experimental/cell/examples/5/index.html new file mode 100644 index 000000000000..e5be43e4ed9f --- /dev/null +++ b/projects/demo/src/modules/experimental/cell/examples/5/index.html @@ -0,0 +1,63 @@ + + + + + + NoName bank + *1234 + + + + Today + + +
+ + + Carrefour + Visa + + + + Yesterday +
diff --git a/projects/demo/src/modules/experimental/cell/examples/5/index.less b/projects/demo/src/modules/experimental/cell/examples/5/index.less new file mode 100644 index 000000000000..6f344c0af55b --- /dev/null +++ b/projects/demo/src/modules/experimental/cell/examples/5/index.less @@ -0,0 +1,18 @@ +:host { + display: flex; + flex-direction: column; + gap: 1rem; +} + +[tuiCell] { + border: 1px dashed var(--tui-primary); +} + +.bank-card { + color: var(--tui-base-01); + background-color: var(--tui-base-09); +} + +.centralize { + align-self: center; +} diff --git a/projects/demo/src/modules/experimental/cell/examples/5/index.ts b/projects/demo/src/modules/experimental/cell/examples/5/index.ts new file mode 100644 index 000000000000..ec32f05f4717 --- /dev/null +++ b/projects/demo/src/modules/experimental/cell/examples/5/index.ts @@ -0,0 +1,21 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; +import {tuiMoneyOptionsProvider} from '@taiga-ui/addon-commerce'; + +@Component({ + selector: 'tui-cell-example-5', + templateUrl: './index.html', + styleUrls: ['./index.less'], + providers: [tuiMoneyOptionsProvider({sign: 'always', colored: true})], + changeDetection, + encapsulation, +}) +export class TuiCellExample5 { + moneyAmount = 250; + maxMoneyAmount = 1000; + + addMoney(): void { + this.moneyAmount = Math.min(this.moneyAmount + 250, this.maxMoneyAmount); + } +} diff --git a/projects/demo/src/modules/experimental/cell/examples/import/insert-template.md b/projects/demo/src/modules/experimental/cell/examples/import/insert-template.md index 8d010f2cbe1a..f5bfa8bc7262 100644 --- a/projects/demo/src/modules/experimental/cell/examples/import/insert-template.md +++ b/projects/demo/src/modules/experimental/cell/examples/import/insert-template.md @@ -1,8 +1,11 @@ ```html - +
+ Title + Description + Secondary title + Secondary description +
``` diff --git a/projects/experimental/components/cell/cell-slot.directive.ts b/projects/experimental/components/cell/cell-slot.directive.ts new file mode 100644 index 000000000000..9f2f94d57dee --- /dev/null +++ b/projects/experimental/components/cell/cell-slot.directive.ts @@ -0,0 +1,14 @@ +import {Directive, Input} from '@angular/core'; + +@Directive({ + selector: '[tuiSlot]', +}) +export class TuiCellSlotDirective { + @Input() + tuiSlot: + | string + | 'description' + | 'secondaryDescription' + | 'secondaryTitle' + | 'title' = 'title'; +} diff --git a/projects/experimental/components/cell/cell.component.ts b/projects/experimental/components/cell/cell.component.ts index a5a3a40b185d..083d5d359d1b 100644 --- a/projects/experimental/components/cell/cell.component.ts +++ b/projects/experimental/components/cell/cell.component.ts @@ -1,10 +1,9 @@ import {ChangeDetectionStrategy, Component, Inject, Input} from '@angular/core'; import {TUI_PLATFORM, TuiPlatform} from '@taiga-ui/cdk'; import {TuiSizeL, TuiSizeS} from '@taiga-ui/core'; -import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; @Component({ - selector: 'tui-cell', + selector: '[tuiCell]', templateUrl: './cell.template.html', styleUrls: ['./cell.styles.less'], changeDetection: ChangeDetectionStrategy.OnPush, @@ -14,18 +13,6 @@ import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; }, }) export class TuiCellComponent { - @Input() - title: PolymorpheusContent = ''; - - @Input() - description: PolymorpheusContent = ''; - - @Input() - secondaryTitle: PolymorpheusContent = ''; - - @Input() - secondaryDescription: PolymorpheusContent = ''; - @Input() size: TuiSizeL | TuiSizeS = 'l'; diff --git a/projects/experimental/components/cell/cell.module.ts b/projects/experimental/components/cell/cell.module.ts index 7441597fff6c..6a7a765550ca 100644 --- a/projects/experimental/components/cell/cell.module.ts +++ b/projects/experimental/components/cell/cell.module.ts @@ -1,12 +1,10 @@ -import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus'; import {TuiCellComponent} from './cell.component'; +import {TuiCellSlotDirective} from './cell-slot.directive'; @NgModule({ - imports: [CommonModule, PolymorpheusModule], - declarations: [TuiCellComponent], - exports: [TuiCellComponent], + declarations: [TuiCellComponent, TuiCellSlotDirective], + exports: [TuiCellComponent, TuiCellSlotDirective], }) export class TuiCellModule {} diff --git a/projects/experimental/components/cell/cell.styles.less b/projects/experimental/components/cell/cell.styles.less index 4482da28386e..cd56d56c4a66 100644 --- a/projects/experimental/components/cell/cell.styles.less +++ b/projects/experimental/components/cell/cell.styles.less @@ -1,15 +1,16 @@ @import 'taiga-ui-local'; :host { + .clearbtn(); .transition(background-color); display: flex; + align-items: stretch; box-sizing: border-box; padding: 0.5rem 1rem; - justify-content: space-between; - gap: 1rem; background-color: var(--tui-base-01); min-height: var(--tui-height-l); border-radius: var(--tui-radius-l); + text-decoration: none; & > * { min-width: 0; @@ -34,19 +35,35 @@ } } -.t-left { +:host(button, a) { + cursor: pointer; + width: 100%; +} + +.t-main { display: flex; - flex-shrink: var(--tui-left-shrink, 1); + flex: 1; + justify-content: space-between; + column-gap: 1rem; + + & > * { + min-width: 0; + } } -.t-left-addition:not(:empty) { - margin-right: 1rem; +.t-icon { + display: flex; + + &:not(:empty) { + margin-right: 1rem; + } } -.t-main { +.t-left { display: flex; - min-width: 0; flex-direction: column; + flex-shrink: var(--tui-left-shrink, 1); + text-align: start; & > * { min-width: 0; @@ -56,7 +73,6 @@ .t-right { display: flex; flex-direction: column; - text-align: end; flex-shrink: var(--tui-right-shrink, 1); & > * { @@ -66,6 +82,7 @@ .t-title { font: var(--tui-font-text-l-2); + color: var(--tui-text-01); :host[data-platform='web'][data-size='l'] & { font: var(--tui-font-text-m-2); @@ -75,11 +92,6 @@ :host[data-platform='web'][data-size='s'] & { font: var(--tui-font-text-s-2); } - - &:only-child { - margin-top: auto; - margin-bottom: auto; - } } .t-description { @@ -88,6 +100,22 @@ :host[data-platform='web'][data-size='m'] &, :host[data-platform='web'][data-size='s'] & { - font: var(--tui-font-text-xs-2); + font: var(--tui-font-text-xs); + } +} + +.t-title, +.t-description { + display: flex; + flex: 1; + + &:empty { + flex: 0; } } + +.t-right .t-title, +.t-right .t-description { + justify-content: flex-end; + text-align: end; +} diff --git a/projects/experimental/components/cell/cell.template.html b/projects/experimental/components/cell/cell.template.html index 9cfab82117a1..bfa096291a9f 100644 --- a/projects/experimental/components/cell/cell.template.html +++ b/projects/experimental/components/cell/cell.template.html @@ -1,39 +1,23 @@ -
-
- -
+
+ +
-
+
+
- - {{ text }} - + - - - - {{ text }} - + + -
-
- -
- - - {{ text }} - - +
- - - {{ text }} - - - +
+ + + + + + +
+ diff --git a/projects/experimental/components/cell/index.ts b/projects/experimental/components/cell/index.ts index 4e56581093ad..8655b244b211 100644 --- a/projects/experimental/components/cell/index.ts +++ b/projects/experimental/components/cell/index.ts @@ -1,2 +1,3 @@ export * from './cell.component'; export * from './cell.module'; +export * from './cell-slot.directive';