From 0eaa20d54326cb0664f2f5d57d6acb25002c16ec Mon Sep 17 00:00:00 2001 From: Nikita Barsukov Date: Wed, 20 Sep 2023 15:23:40 +0300 Subject: [PATCH 1/8] feat(experimental): new component `Cell` --- projects/demo/src/modules/app/app.routes.ts | 8 + projects/demo/src/modules/app/pages.ts | 6 + .../experimental/cell/cell.component.ts | 57 ++++++ .../modules/experimental/cell/cell.module.ts | 50 +++++ .../experimental/cell/cell.styles.less | 9 + .../experimental/cell/cell.template.html | 180 ++++++++++++++++++ .../experimental/cell/examples/1/index.html | 13 ++ .../experimental/cell/examples/1/index.ts | 11 ++ .../experimental/cell/examples/2/index.html | 30 +++ .../experimental/cell/examples/2/index.less | 5 + .../experimental/cell/examples/2/index.ts | 50 +++++ .../experimental/cell/examples/3/index.html | 40 ++++ .../experimental/cell/examples/3/index.less | 21 ++ .../experimental/cell/examples/3/index.ts | 12 ++ .../experimental/cell/examples/4/index.html | 28 +++ .../experimental/cell/examples/4/index.less | 5 + .../experimental/cell/examples/4/index.ts | 18 ++ .../cell/examples/import/import-module.md | 13 ++ .../cell/examples/import/insert-template.md | 8 + .../components/cell/cell.component.ts | 33 ++++ .../components/cell/cell.module.ts | 12 ++ .../components/cell/cell.styles.less | 93 +++++++++ .../components/cell/cell.template.html | 39 ++++ .../experimental/components/cell/index.ts | 2 + .../components/cell/ng-package.json | 8 + projects/experimental/components/index.ts | 1 + 26 files changed, 752 insertions(+) create mode 100644 projects/demo/src/modules/experimental/cell/cell.component.ts create mode 100644 projects/demo/src/modules/experimental/cell/cell.module.ts create mode 100644 projects/demo/src/modules/experimental/cell/cell.styles.less create mode 100644 projects/demo/src/modules/experimental/cell/cell.template.html create mode 100644 projects/demo/src/modules/experimental/cell/examples/1/index.html create mode 100644 projects/demo/src/modules/experimental/cell/examples/1/index.ts create mode 100644 projects/demo/src/modules/experimental/cell/examples/2/index.html create mode 100644 projects/demo/src/modules/experimental/cell/examples/2/index.less create mode 100644 projects/demo/src/modules/experimental/cell/examples/2/index.ts create mode 100644 projects/demo/src/modules/experimental/cell/examples/3/index.html create mode 100644 projects/demo/src/modules/experimental/cell/examples/3/index.less create mode 100644 projects/demo/src/modules/experimental/cell/examples/3/index.ts create mode 100644 projects/demo/src/modules/experimental/cell/examples/4/index.html create mode 100644 projects/demo/src/modules/experimental/cell/examples/4/index.less create mode 100644 projects/demo/src/modules/experimental/cell/examples/4/index.ts create mode 100644 projects/demo/src/modules/experimental/cell/examples/import/import-module.md create mode 100644 projects/demo/src/modules/experimental/cell/examples/import/insert-template.md create mode 100644 projects/experimental/components/cell/cell.component.ts create mode 100644 projects/experimental/components/cell/cell.module.ts create mode 100644 projects/experimental/components/cell/cell.styles.less create mode 100644 projects/experimental/components/cell/cell.template.html create mode 100644 projects/experimental/components/cell/index.ts create mode 100644 projects/experimental/components/cell/ng-package.json diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts index 4eca2812033c..135f33eb4544 100644 --- a/projects/demo/src/modules/app/app.routes.ts +++ b/projects/demo/src/modules/app/app.routes.ts @@ -282,6 +282,14 @@ export const ROUTES: Routes = [ title: `Button `, }, }, + { + path: `experimental/cell`, + loadChildren: async () => + (await import(`../experimental/cell/cell.module`)).ExampleTuiCellModule, + data: { + title: `Cell`, + }, + }, { path: `experimental/compass`, loadChildren: async () => diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts index 830214ca1561..c27a7ed39d80 100644 --- a/projects/demo/src/modules/app/pages.ts +++ b/projects/demo/src/modules/app/pages.ts @@ -859,6 +859,12 @@ export const pages: TuiDocPages = [ keywords: `кнопка, button, icon-button, иконка`, route: `/experimental/button`, }, + { + section: `Experimental`, + title: `Cell`, + keywords: `cell, feed, item`, + route: `/experimental/cell`, + }, { section: `Experimental`, title: `Compass`, diff --git a/projects/demo/src/modules/experimental/cell/cell.component.ts b/projects/demo/src/modules/experimental/cell/cell.component.ts new file mode 100644 index 000000000000..fc9e489a7f67 --- /dev/null +++ b/projects/demo/src/modules/experimental/cell/cell.component.ts @@ -0,0 +1,57 @@ +import {Component, ViewEncapsulation} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import { + RawLoaderContent, + TuiDocExample, + tuiDocExampleOptionsProvider, +} from '@taiga-ui/addon-doc'; +import {TuiSizeL, TuiSizeS} from '@taiga-ui/core'; + +@Component({ + selector: 'example-cell', + templateUrl: './cell.template.html', + styleUrls: ['./cell.styles.less'], + providers: [tuiDocExampleOptionsProvider({fullsize: true})], + encapsulation: ViewEncapsulation.None, + changeDetection, +}) +export class ExampleTuiCellComponent { + title = 'Title'; + description = 'Description'; + secondaryTitle = 'Secondary title'; + secondaryDescription = 'Secondary description'; + + readonly sizeVariants: ReadonlyArray = ['s', 'm', 'l']; + size: TuiSizeL | TuiSizeS = 'l'; + + readonly exampleModule: RawLoaderContent = import( + './examples/import/import-module.md?raw' + ); + + readonly exampleHtml: RawLoaderContent = import( + './examples/import/insert-template.md?raw' + ); + + readonly example1: TuiDocExample = { + HTML: import('./examples/1/index.html?raw'), + TypeScript: import('./examples/1/index.ts?raw'), + }; + + readonly example2: TuiDocExample = { + HTML: import('./examples/2/index.html?raw'), + TypeScript: import('./examples/2/index.ts?raw'), + LESS: import('./examples/2/index.less?raw'), + }; + + readonly example3: TuiDocExample = { + HTML: import('./examples/3/index.html?raw'), + LESS: import('./examples/3/index.less?raw'), + TypeScript: import('./examples/3/index.ts?raw'), + }; + + readonly example4: TuiDocExample = { + HTML: import('./examples/4/index.html?raw'), + LESS: import('./examples/4/index.less?raw'), + TypeScript: import('./examples/4/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 new file mode 100644 index 000000000000..d00b9b09ed18 --- /dev/null +++ b/projects/demo/src/modules/experimental/cell/cell.module.ts @@ -0,0 +1,50 @@ +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 {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc'; +import {TuiLinkModule, TuiNotificationModule, TuiTooltipModule} from '@taiga-ui/core'; +import { + TuiAvatarModule, + TuiBadgeAlertModule, + TuiBadgeModule, + TuiCellModule, + TuiFadeModule, +} from '@taiga-ui/experimental'; +import {TuiMarkerIconModule, 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'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + TuiAddonDocModule, + TuiAvatarModule, + TuiBadgeModule, + TuiBadgeAlertModule, + TuiCellModule, + TuiFadeModule, + TuiLinkModule, + TuiMarkerIconModule, + TuiMoneyModule, + TuiNotificationModule, + TuiToggleModule, + TuiTooltipModule, + RouterModule.forChild(tuiGenerateRoutes(ExampleTuiCellComponent)), + ], + declarations: [ + ExampleTuiCellComponent, + TuiCellExample1, + TuiCellExample2, + TuiCellExample3, + TuiCellExample4, + ], + exports: [ExampleTuiCellComponent], +}) +export class ExampleTuiCellModule {} diff --git a/projects/demo/src/modules/experimental/cell/cell.styles.less b/projects/demo/src/modules/experimental/cell/cell.styles.less new file mode 100644 index 000000000000..621e0bc99cc1 --- /dev/null +++ b/projects/demo/src/modules/experimental/cell/cell.styles.less @@ -0,0 +1,9 @@ +@import 'taiga-ui-local'; + +example-cell tui-cell { + max-width: 25rem; + + @media @tui-mobile { + min-width: 100%; + } +} diff --git a/projects/demo/src/modules/experimental/cell/cell.template.html b/projects/demo/src/modules/experimental/cell/cell.template.html new file mode 100644 index 000000000000..bc09adf5dae4 --- /dev/null +++ b/projects/demo/src/modules/experimental/cell/cell.template.html @@ -0,0 +1,180 @@ + + + + This code is + experimental + and is a subject to change. Expect final solution to be shipped in the next major version + + + + + + + + + All basic properties is + + PolymorpheusContent + + . It provides you with great flexibility to pass any content you wish. +
+ This example pass + + Money + + / + + Badge + + inside + secondaryTitle + / + description + properties. + + + + + + + You can fade out overflown content by + + Fade + + directive. Or you can use native + text-overflow: ellipsis + . Choose any tool you wish! + + + + + + + + + + + + + + + + + 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. +

+ + + + + +
    +
  1. +

    + Import + TuiCellModule + into a module where you want to use our component +

    + + +
    2. + +
  2. +

    Add to the template:

    + + +
    3. +
+ + diff --git a/projects/demo/src/modules/experimental/cell/examples/1/index.html b/projects/demo/src/modules/experimental/cell/examples/1/index.html new file mode 100644 index 000000000000..360c4b307f2d --- /dev/null +++ b/projects/demo/src/modules/experimental/cell/examples/1/index.html @@ -0,0 +1,13 @@ + + + diff --git a/projects/demo/src/modules/experimental/cell/examples/1/index.ts b/projects/demo/src/modules/experimental/cell/examples/1/index.ts new file mode 100644 index 000000000000..9d982b04027a --- /dev/null +++ b/projects/demo/src/modules/experimental/cell/examples/1/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-cell-example-1', + templateUrl: './index.html', + changeDetection, + encapsulation, +}) +export class TuiCellExample1 {} diff --git a/projects/demo/src/modules/experimental/cell/examples/2/index.html b/projects/demo/src/modules/experimental/cell/examples/2/index.html new file mode 100644 index 000000000000..a499375d9362 --- /dev/null +++ b/projects/demo/src/modules/experimental/cell/examples/2/index.html @@ -0,0 +1,30 @@ + + + + + + + + + + {{ text }} + + + diff --git a/projects/demo/src/modules/experimental/cell/examples/2/index.less b/projects/demo/src/modules/experimental/cell/examples/2/index.less new file mode 100644 index 000000000000..23d25a3bb0a1 --- /dev/null +++ b/projects/demo/src/modules/experimental/cell/examples/2/index.less @@ -0,0 +1,5 @@ +:host { + display: flex; + flex-direction: column; + gap: 1rem; +} diff --git a/projects/demo/src/modules/experimental/cell/examples/2/index.ts b/projects/demo/src/modules/experimental/cell/examples/2/index.ts new file mode 100644 index 000000000000..4bbe56bda865 --- /dev/null +++ b/projects/demo/src/modules/experimental/cell/examples/2/index.ts @@ -0,0 +1,50 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; + +@Component({ + selector: 'tui-cell-example-2', + templateUrl: './index.html', + styleUrls: ['./index.less'], + 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; +} diff --git a/projects/demo/src/modules/experimental/cell/examples/3/index.html b/projects/demo/src/modules/experimental/cell/examples/3/index.html new file mode 100644 index 000000000000..698af8296c99 --- /dev/null +++ b/projects/demo/src/modules/experimental/cell/examples/3/index.html @@ -0,0 +1,40 @@ + + + + + + Taiga UI: more than UI kit + + + + + + Taiga UI family is a collection of independent open source Angular libraries + + + + + Taiga UI is fully-treeshakable Angular UI Kit + + + + + 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 new file mode 100644 index 000000000000..f04689239b96 --- /dev/null +++ b/projects/demo/src/modules/experimental/cell/examples/3/index.less @@ -0,0 +1,21 @@ +tui-cell { + max-width: 25rem; + + // 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; + overflow: hidden; +} + +.logo { + width: 2.5rem; +} diff --git a/projects/demo/src/modules/experimental/cell/examples/3/index.ts b/projects/demo/src/modules/experimental/cell/examples/3/index.ts new file mode 100644 index 000000000000..18b16d4a7b13 --- /dev/null +++ b/projects/demo/src/modules/experimental/cell/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-cell-example-3', + templateUrl: './index.html', + styleUrls: ['./index.less'], + changeDetection, + encapsulation, +}) +export class TuiCellExample3 {} diff --git a/projects/demo/src/modules/experimental/cell/examples/4/index.html b/projects/demo/src/modules/experimental/cell/examples/4/index.html new file mode 100644 index 000000000000..c7a783df29f8 --- /dev/null +++ b/projects/demo/src/modules/experimental/cell/examples/4/index.html @@ -0,0 +1,28 @@ + + + + +
+ 1 + + + + +
+ + diff --git a/projects/demo/src/modules/experimental/cell/examples/4/index.less b/projects/demo/src/modules/experimental/cell/examples/4/index.less new file mode 100644 index 000000000000..305074aaa38f --- /dev/null +++ b/projects/demo/src/modules/experimental/cell/examples/4/index.less @@ -0,0 +1,5 @@ +.accessories { + display: flex; + gap: 1rem; + align-items: center; +} diff --git a/projects/demo/src/modules/experimental/cell/examples/4/index.ts b/projects/demo/src/modules/experimental/cell/examples/4/index.ts new file mode 100644 index 000000000000..a0a66626c036 --- /dev/null +++ b/projects/demo/src/modules/experimental/cell/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-cell-example-4', + templateUrl: './index.html', + styleUrls: ['./index.less'], + changeDetection, + encapsulation, +}) +export class TuiCellExample4 { + readonly tooltipContent = `This example requires import of + TuiBadgeAlertModule, + TuiTooltipModule, + TuiToggleModule + `; +} diff --git a/projects/demo/src/modules/experimental/cell/examples/import/import-module.md b/projects/demo/src/modules/experimental/cell/examples/import/import-module.md new file mode 100644 index 000000000000..e5e01c04cb6a --- /dev/null +++ b/projects/demo/src/modules/experimental/cell/examples/import/import-module.md @@ -0,0 +1,13 @@ +```ts +import {NgModule} from '@angular/core'; +import {TuiCellModule} from '@taiga-ui/experimental'; +// ... + +@NgModule({ + imports: [ + // ... + TuiCellModule, + ], +}) +export class MyModule {} +``` 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 new file mode 100644 index 000000000000..8d010f2cbe1a --- /dev/null +++ b/projects/demo/src/modules/experimental/cell/examples/import/insert-template.md @@ -0,0 +1,8 @@ +```html + +``` diff --git a/projects/experimental/components/cell/cell.component.ts b/projects/experimental/components/cell/cell.component.ts new file mode 100644 index 000000000000..a5a3a40b185d --- /dev/null +++ b/projects/experimental/components/cell/cell.component.ts @@ -0,0 +1,33 @@ +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', + templateUrl: './cell.template.html', + styleUrls: ['./cell.styles.less'], + changeDetection: ChangeDetectionStrategy.OnPush, + host: { + '[attr.data-size]': 'size', + '[attr.data-platform]': 'platform', + }, +}) +export class TuiCellComponent { + @Input() + title: PolymorpheusContent = ''; + + @Input() + description: PolymorpheusContent = ''; + + @Input() + secondaryTitle: PolymorpheusContent = ''; + + @Input() + secondaryDescription: PolymorpheusContent = ''; + + @Input() + size: TuiSizeL | TuiSizeS = 'l'; + + constructor(@Inject(TUI_PLATFORM) readonly platform: TuiPlatform) {} +} diff --git a/projects/experimental/components/cell/cell.module.ts b/projects/experimental/components/cell/cell.module.ts new file mode 100644 index 000000000000..7441597fff6c --- /dev/null +++ b/projects/experimental/components/cell/cell.module.ts @@ -0,0 +1,12 @@ +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus'; + +import {TuiCellComponent} from './cell.component'; + +@NgModule({ + imports: [CommonModule, PolymorpheusModule], + declarations: [TuiCellComponent], + exports: [TuiCellComponent], +}) +export class TuiCellModule {} diff --git a/projects/experimental/components/cell/cell.styles.less b/projects/experimental/components/cell/cell.styles.less new file mode 100644 index 000000000000..4482da28386e --- /dev/null +++ b/projects/experimental/components/cell/cell.styles.less @@ -0,0 +1,93 @@ +@import 'taiga-ui-local'; + +:host { + .transition(background-color); + display: flex; + 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); + + & > * { + min-width: 0; + } + + &[data-platform='web'][data-size='m'] { + min-height: var(--tui-height-m); + border-radius: var(--tui-radius-m); + padding: 0.375rem 1rem; + } + + &[data-platform='web'][data-size='s'] { + min-height: var(--tui-height-s); + border-radius: var(--tui-radius-s); + padding: 0.125rem 1rem; + } + + &:hover, + &._active, + &:focus-within { + background-color: var(--tui-secondary); + } +} + +.t-left { + display: flex; + flex-shrink: var(--tui-left-shrink, 1); +} + +.t-left-addition:not(:empty) { + margin-right: 1rem; +} + +.t-main { + display: flex; + min-width: 0; + flex-direction: column; + + & > * { + min-width: 0; + } +} + +.t-right { + display: flex; + flex-direction: column; + text-align: end; + flex-shrink: var(--tui-right-shrink, 1); + + & > * { + min-width: 0; + } +} + +.t-title { + font: var(--tui-font-text-l-2); + + :host[data-platform='web'][data-size='l'] & { + font: var(--tui-font-text-m-2); + } + + :host[data-platform='web'][data-size='m'] &, + :host[data-platform='web'][data-size='s'] & { + font: var(--tui-font-text-s-2); + } + + &:only-child { + margin-top: auto; + margin-bottom: auto; + } +} + +.t-description { + color: var(--tui-text-02); + font: var(--tui-font-text-s-2); + + :host[data-platform='web'][data-size='m'] &, + :host[data-platform='web'][data-size='s'] & { + font: var(--tui-font-text-xs-2); + } +} diff --git a/projects/experimental/components/cell/cell.template.html b/projects/experimental/components/cell/cell.template.html new file mode 100644 index 000000000000..9cfab82117a1 --- /dev/null +++ b/projects/experimental/components/cell/cell.template.html @@ -0,0 +1,39 @@ +
+
+ +
+ +
+ + + {{ text }} + + + + + + {{ text }} + + +
+
+ +
+ + + {{ text }} + + + + + + {{ text }} + + +
diff --git a/projects/experimental/components/cell/index.ts b/projects/experimental/components/cell/index.ts new file mode 100644 index 000000000000..4e56581093ad --- /dev/null +++ b/projects/experimental/components/cell/index.ts @@ -0,0 +1,2 @@ +export * from './cell.component'; +export * from './cell.module'; diff --git a/projects/experimental/components/cell/ng-package.json b/projects/experimental/components/cell/ng-package.json new file mode 100644 index 000000000000..bab5ebcdb74a --- /dev/null +++ b/projects/experimental/components/cell/ng-package.json @@ -0,0 +1,8 @@ +{ + "lib": { + "entryFile": "index.ts", + "styleIncludePaths": [ + "../../../core/styles" + ] + } +} diff --git a/projects/experimental/components/index.ts b/projects/experimental/components/index.ts index 57754612a7df..5f44df2d003e 100644 --- a/projects/experimental/components/index.ts +++ b/projects/experimental/components/index.ts @@ -4,6 +4,7 @@ export * from '@taiga-ui/experimental/components/badge'; export * from '@taiga-ui/experimental/components/badge-notification'; export * from '@taiga-ui/experimental/components/badged-content'; export * from '@taiga-ui/experimental/components/button'; +export * from '@taiga-ui/experimental/components/cell'; export * from '@taiga-ui/experimental/components/checkbox'; export * from '@taiga-ui/experimental/components/compass'; export * from '@taiga-ui/experimental/components/radio'; From 5818750221aa7b303e4d0ebea57e541fd5b81f49 Mon Sep 17 00:00:00 2001 From: Nikita Barsukov Date: Wed, 11 Oct 2023 14:34:56 +0300 Subject: [PATCH 2/8] feat: replace polymorpheus with `tuiSlot` --- projects/demo-playwright/utils/mock-images.ts | 1 + .../experimental/cell/cell.component.ts | 28 ++++- .../modules/experimental/cell/cell.module.ts | 8 +- .../experimental/cell/cell.styles.less | 2 +- .../experimental/cell/cell.template.html | 99 +++++++++------- .../experimental/cell/examples/1/index.html | 14 +-- .../experimental/cell/examples/2/index.html | 107 +++++++++++++----- .../experimental/cell/examples/2/index.less | 4 + .../experimental/cell/examples/2/index.ts | 46 ++------ .../experimental/cell/examples/3/index.html | 57 +++++----- .../experimental/cell/examples/3/index.less | 7 +- .../experimental/cell/examples/4/index.html | 39 ++++--- .../experimental/cell/examples/4/index.ts | 2 + .../experimental/cell/examples/5/index.html | 63 +++++++++++ .../experimental/cell/examples/5/index.less | 18 +++ .../experimental/cell/examples/5/index.ts | 21 ++++ .../cell/examples/import/insert-template.md | 15 ++- .../components/cell/cell-slot.directive.ts | 14 +++ .../components/cell/cell.component.ts | 15 +-- .../components/cell/cell.module.ts | 8 +- .../components/cell/cell.styles.less | 58 +++++++--- .../components/cell/cell.template.html | 52 +++------ .../experimental/components/cell/index.ts | 1 + 23 files changed, 429 insertions(+), 250 deletions(-) create mode 100644 projects/demo/src/modules/experimental/cell/examples/5/index.html create mode 100644 projects/demo/src/modules/experimental/cell/examples/5/index.less create mode 100644 projects/demo/src/modules/experimental/cell/examples/5/index.ts create mode 100644 projects/experimental/components/cell/cell-slot.directive.ts 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'; From 09a84603339df30406673c6b253207b871de1b09 Mon Sep 17 00:00:00 2001 From: Nikita Barsukov Date: Thu, 19 Oct 2023 17:01:15 +0300 Subject: [PATCH 3/8] chore(demo): replace `BadgeAlert` with `BadgeNotification` --- projects/demo/src/modules/experimental/cell/cell.module.ts | 4 ++-- .../demo/src/modules/experimental/cell/examples/4/index.html | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/demo/src/modules/experimental/cell/cell.module.ts b/projects/demo/src/modules/experimental/cell/cell.module.ts index c39e74ea6b92..0f71993fad11 100644 --- a/projects/demo/src/modules/experimental/cell/cell.module.ts +++ b/projects/demo/src/modules/experimental/cell/cell.module.ts @@ -7,8 +7,8 @@ import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc'; import {TuiLinkModule, TuiNotificationModule, TuiTooltipModule} from '@taiga-ui/core'; import { TuiAvatarModule, - TuiBadgeAlertModule, TuiBadgeModule, + TuiBadgeNotificationModule, TuiCellModule, TuiFadeModule, } from '@taiga-ui/experimental'; @@ -28,7 +28,7 @@ import {TuiCellExample5} from './examples/5'; TuiAddonDocModule, TuiAvatarModule, TuiBadgeModule, - TuiBadgeAlertModule, + TuiBadgeNotificationModule, TuiCellModule, TuiFadeModule, TuiLinkModule, 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 d3fece4e6c9a..886f7821e62d 100644 --- a/projects/demo/src/modules/experimental/cell/examples/4/index.html +++ b/projects/demo/src/modules/experimental/cell/examples/4/index.html @@ -16,7 +16,7 @@ tuiSlot="secondaryTitle" class="accessories" > - 1 + 1 Date: Thu, 19 Oct 2023 14:06:33 +0000 Subject: [PATCH 4/8] chore: icons have changed [bot] --- projects/demo/used-icons.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/demo/used-icons.ts b/projects/demo/used-icons.ts index 243c7cda251c..9c14056a8d6e 100644 --- a/projects/demo/used-icons.ts +++ b/projects/demo/used-icons.ts @@ -102,6 +102,7 @@ export const TUI_USED_ICONS = [ `tuiIconBox`, `tuiIconLock`, `tuiIconUsers`, + `tuiIconShoppingCart`, `tuiIconCloseLarge`, `tuiIconFrownLarge`, `tuiIconMehLarge`, From b2482c9e69dbc845b139650617c178a41306ac74 Mon Sep 17 00:00:00 2001 From: Nikita Barsukov Date: Thu, 19 Oct 2023 17:18:56 +0300 Subject: [PATCH 5/8] feat: centralize icon by default --- .../demo/src/modules/experimental/cell/examples/3/index.less | 1 + .../demo/src/modules/experimental/cell/examples/5/index.html | 4 +--- .../demo/src/modules/experimental/cell/examples/5/index.less | 4 ---- projects/experimental/components/cell/cell.styles.less | 1 + 4 files changed, 3 insertions(+), 7 deletions(-) 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 e2765553379a..47fc2662f082 100644 --- a/projects/demo/src/modules/experimental/cell/examples/3/index.less +++ b/projects/demo/src/modules/experimental/cell/examples/3/index.less @@ -14,5 +14,6 @@ } .logo { + align-self: flex-start; width: 2.5rem; } diff --git a/projects/demo/src/modules/experimental/cell/examples/5/index.html b/projects/demo/src/modules/experimental/cell/examples/5/index.html index e5be43e4ed9f..0a00953b0ddb 100644 --- a/projects/demo/src/modules/experimental/cell/examples/5/index.html +++ b/projects/demo/src/modules/experimental/cell/examples/5/index.html @@ -5,7 +5,6 @@ > @@ -27,7 +26,7 @@ NoName bank @@ -48,7 +47,6 @@ Carrefour diff --git a/projects/demo/src/modules/experimental/cell/examples/5/index.less b/projects/demo/src/modules/experimental/cell/examples/5/index.less index 6f344c0af55b..55d492045c07 100644 --- a/projects/demo/src/modules/experimental/cell/examples/5/index.less +++ b/projects/demo/src/modules/experimental/cell/examples/5/index.less @@ -12,7 +12,3 @@ color: var(--tui-base-01); background-color: var(--tui-base-09); } - -.centralize { - align-self: center; -} diff --git a/projects/experimental/components/cell/cell.styles.less b/projects/experimental/components/cell/cell.styles.less index cd56d56c4a66..3154d378f70c 100644 --- a/projects/experimental/components/cell/cell.styles.less +++ b/projects/experimental/components/cell/cell.styles.less @@ -53,6 +53,7 @@ .t-icon { display: flex; + align-items: center; &:not(:empty) { margin-right: 1rem; From 36ce15506617fc5c18bfefa373ca71133162a29a Mon Sep 17 00:00:00 2001 From: waterplea Date: Thu, 26 Oct 2023 21:14:54 +0400 Subject: [PATCH 6/8] chore: refactor --- .../core/components/loader/loader.style.less | 1 + projects/core/styles/theme/variables.less | 1 + projects/demo/src/modules/app/app.routes.ts | 16 +- projects/demo/src/modules/app/pages.ts | 12 +- .../experimental/cell/cell.component.ts | 34 +--- .../modules/experimental/cell/cell.module.ts | 44 ++++- .../experimental/cell/cell.template.html | 154 ++---------------- .../experimental/cell/examples/1/index.html | 52 +++++- .../cell}/examples/1/index.less | 0 .../experimental/cell/examples/1/index.ts | 1 + .../experimental/cell/examples/2/index.html | 121 ++++++-------- .../experimental/cell/examples/2/index.less | 4 - .../experimental/cell/examples/2/index.ts | 11 +- .../experimental/cell/examples/3/index.html | 111 +++++++++---- .../experimental/cell/examples/3/index.less | 22 +-- .../experimental/cell/examples/3/index.ts | 4 +- .../experimental/cell/examples/4/index.html | 78 ++++++--- .../experimental/cell/examples/4/index.less | 4 +- .../experimental/cell/examples/4/index.ts | 8 +- .../experimental/cell/examples/5/index.html | 141 ++++++++++------ .../experimental/cell/examples/5/index.less | 9 - .../experimental/cell/examples/5/index.ts | 11 +- .../experimental/cell/examples/6/index.html | 50 ++++++ .../experimental/cell/examples/6/index.less | 19 +++ .../experimental/cell/examples/6/index.ts | 32 ++++ .../cell/examples/import/insert-template.md | 5 +- .../title/examples/1/index.html | 0 .../title/examples/1}/index.less | 0 .../title/examples/1/index.ts | 0 .../title/examples/2/index.html | 0 .../experimental/title/examples/2/index.less | 5 + .../title/examples/2/index.ts | 0 .../title/examples/3/index.html | 0 .../title/examples/3/index.less | 0 .../title/examples/3/index.ts | 0 .../title/examples/import/import-module.md | 0 .../title/examples/import/insert-template.md | 0 .../title/title.component.ts | 0 .../title/title.module.ts | 10 +- .../title/title.template.html | 8 +- .../avatar-stack/avatar-stack.style.less | 33 +++- .../components/badge/badge.style.less | 1 + .../components/cell/cell-slot.directive.ts | 14 -- .../components/cell/cell.component.ts | 20 --- .../components/cell/cell.module.ts | 10 -- .../components/cell/cell.styles.less | 122 -------------- .../components/cell/cell.template.html | 23 --- projects/experimental/components/index.ts | 1 - .../directives/cell/cell.component.ts | 10 ++ .../directives/cell/cell.directive.ts | 24 +++ .../directives/cell/cell.module.ts | 10 ++ .../directives/cell/cell.styles.less | 144 ++++++++++++++++ .../{components => directives}/cell/index.ts | 2 +- .../cell/ng-package.json | 0 projects/experimental/directives/index.ts | 2 + .../directives/sensitive/sensitive.style.less | 2 +- .../directives}/title/index.ts | 0 .../directives}/title/ng-package.json | 0 .../directives}/title/title.component.ts | 0 .../directives}/title/title.directive.ts | 0 .../directives}/title/title.module.ts | 0 .../directives}/title/title.style.less | 2 + projects/layout/components/index.ts | 1 - 63 files changed, 748 insertions(+), 641 deletions(-) rename projects/demo/src/modules/{directives/title => experimental/cell}/examples/1/index.less (100%) create mode 100644 projects/demo/src/modules/experimental/cell/examples/6/index.html create mode 100644 projects/demo/src/modules/experimental/cell/examples/6/index.less create mode 100644 projects/demo/src/modules/experimental/cell/examples/6/index.ts rename projects/demo/src/modules/{directives => experimental}/title/examples/1/index.html (100%) rename projects/demo/src/modules/{directives/title/examples/2 => experimental/title/examples/1}/index.less (100%) rename projects/demo/src/modules/{directives => experimental}/title/examples/1/index.ts (100%) rename projects/demo/src/modules/{directives => experimental}/title/examples/2/index.html (100%) create mode 100644 projects/demo/src/modules/experimental/title/examples/2/index.less rename projects/demo/src/modules/{directives => experimental}/title/examples/2/index.ts (100%) rename projects/demo/src/modules/{directives => experimental}/title/examples/3/index.html (100%) rename projects/demo/src/modules/{directives => experimental}/title/examples/3/index.less (100%) rename projects/demo/src/modules/{directives => experimental}/title/examples/3/index.ts (100%) rename projects/demo/src/modules/{directives => experimental}/title/examples/import/import-module.md (100%) rename projects/demo/src/modules/{directives => experimental}/title/examples/import/insert-template.md (100%) rename projects/demo/src/modules/{directives => experimental}/title/title.component.ts (100%) rename projects/demo/src/modules/{directives => experimental}/title/title.module.ts (75%) rename projects/demo/src/modules/{directives => experimental}/title/title.template.html (83%) delete mode 100644 projects/experimental/components/cell/cell-slot.directive.ts delete mode 100644 projects/experimental/components/cell/cell.component.ts delete mode 100644 projects/experimental/components/cell/cell.module.ts delete mode 100644 projects/experimental/components/cell/cell.styles.less delete mode 100644 projects/experimental/components/cell/cell.template.html create mode 100644 projects/experimental/directives/cell/cell.component.ts create mode 100644 projects/experimental/directives/cell/cell.directive.ts create mode 100644 projects/experimental/directives/cell/cell.module.ts create mode 100644 projects/experimental/directives/cell/cell.styles.less rename projects/experimental/{components => directives}/cell/index.ts (62%) rename projects/experimental/{components => directives}/cell/ng-package.json (100%) rename projects/{layout/components => experimental/directives}/title/index.ts (100%) rename projects/{layout/components => experimental/directives}/title/ng-package.json (100%) rename projects/{layout/components => experimental/directives}/title/title.component.ts (100%) rename projects/{layout/components => experimental/directives}/title/title.directive.ts (100%) rename projects/{layout/components => experimental/directives}/title/title.module.ts (100%) rename projects/{layout/components => experimental/directives}/title/title.style.less (94%) diff --git a/projects/core/components/loader/loader.style.less b/projects/core/components/loader/loader.style.less index da0d83f8bd08..30aa06605923 100644 --- a/projects/core/components/loader/loader.style.less +++ b/projects/core/components/loader/loader.style.less @@ -44,6 +44,7 @@ :host { position: relative; display: flex; + min-width: 1.5rem; &._loading { overflow: hidden; diff --git a/projects/core/styles/theme/variables.less b/projects/core/styles/theme/variables.less index ee726726ab47..40206b6a5414 100644 --- a/projects/core/styles/theme/variables.less +++ b/projects/core/styles/theme/variables.less @@ -21,6 +21,7 @@ --tui-font-text-s: normal 0.8125rem/1.25rem var(--tui-font-text); --tui-font-text-s-2: normal 0.8125rem/1rem var(--tui-font-text); --tui-font-text-xs: normal 0.6875rem/1rem var(--tui-font-text); + --tui-font-text-xs-2: normal 0.6875rem/0.8125rem var(--tui-font-text); // Sizes --tui-radius-xs: 0.25rem; --tui-radius-s: 0.5rem; diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts index 135f33eb4544..40a7cfc87b64 100644 --- a/projects/demo/src/modules/app/app.routes.ts +++ b/projects/demo/src/modules/app/app.routes.ts @@ -207,14 +207,6 @@ export const ROUTES: Routes = [ title: `BlockStatus`, }, }, - { - path: `layout/title`, - loadChildren: async () => - (await import(`../directives/title/title.module`)).ExampleTuiTitleModule, - data: { - title: `Title`, - }, - }, { path: `experimental/avatar`, loadChildren: async () => @@ -240,6 +232,14 @@ export const ROUTES: Routes = [ title: `Radio `, }, }, + { + path: `experimental/title`, + loadChildren: async () => + (await import(`../experimental/title/title.module`)).ExampleTuiTitleModule, + data: { + title: `Title`, + }, + }, { path: `experimental/toggle`, loadChildren: async () => diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts index c27a7ed39d80..0882131b1f61 100644 --- a/projects/demo/src/modules/app/pages.ts +++ b/projects/demo/src/modules/app/pages.ts @@ -172,12 +172,6 @@ export const pages: TuiDocPages = [ keywords: `блок, статус, block, status, block-status, blockstatus, layout`, route: `/layout/block-status`, }, - { - section: `Layout`, - title: `Title`, - keywords: `subtitle, заголовок, caption, description, подзаголовок`, - route: `/layout/title`, - }, { section: `Components`, title: `Button`, @@ -895,6 +889,12 @@ export const pages: TuiDocPages = [ keywords: `card, container, wrapper, image, blur, overlay`, route: `/experimental/surface`, }, + { + section: `Experimental`, + title: `Title`, + keywords: `subtitle, заголовок, caption, description, подзаголовок`, + route: `/experimental/title`, + }, { section: `Experimental`, title: `ThumbnailCard `, diff --git a/projects/demo/src/modules/experimental/cell/cell.component.ts b/projects/demo/src/modules/experimental/cell/cell.component.ts index f5a4ff188760..63b794a03bb1 100644 --- a/projects/demo/src/modules/experimental/cell/cell.component.ts +++ b/projects/demo/src/modules/experimental/cell/cell.component.ts @@ -5,7 +5,6 @@ import { tuiDocExampleOptionsProvider, TuiRawLoaderContent, } from '@taiga-ui/addon-doc'; -import {TuiSizeL, TuiSizeS, TuiSizeXXS} from '@taiga-ui/core'; @Component({ selector: 'example-cell', @@ -16,26 +15,6 @@ import {TuiSizeL, TuiSizeS, TuiSizeXXS} from '@taiga-ui/core'; changeDetection, }) export class ExampleTuiCellComponent { - title = 'Title'; - description = 'Description'; - 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: TuiRawLoaderContent = import( './examples/import/import-module.md?raw' ); @@ -46,30 +25,25 @@ export class ExampleTuiCellComponent { readonly example1: TuiDocExample = { HTML: import('./examples/1/index.html?raw'), - TypeScript: import('./examples/1/index.ts?raw'), }; readonly example2: TuiDocExample = { HTML: import('./examples/2/index.html?raw'), - LESS: import('./examples/2/index.less?raw'), - TypeScript: import('./examples/2/index.ts?raw'), }; readonly example3: TuiDocExample = { HTML: import('./examples/3/index.html?raw'), - LESS: import('./examples/3/index.less?raw'), - TypeScript: import('./examples/3/index.ts?raw'), }; readonly example4: TuiDocExample = { HTML: import('./examples/4/index.html?raw'), - 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'), + }; + + readonly example6: TuiDocExample = { + HTML: import('./examples/6/index.html?raw'), }; } diff --git a/projects/demo/src/modules/experimental/cell/cell.module.ts b/projects/demo/src/modules/experimental/cell/cell.module.ts index 0f71993fad11..a2e632bba6c3 100644 --- a/projects/demo/src/modules/experimental/cell/cell.module.ts +++ b/projects/demo/src/modules/experimental/cell/cell.module.ts @@ -2,17 +2,39 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {RouterModule} from '@angular/router'; -import {TuiMoneyModule, TuiThumbnailCardModule} from '@taiga-ui/addon-commerce'; +import {TuiMoneyModule} from '@taiga-ui/addon-commerce'; import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc'; -import {TuiLinkModule, TuiNotificationModule, TuiTooltipModule} from '@taiga-ui/core'; +import { + TuiLabelModule, + TuiLinkModule, + TuiLoaderModule, + TuiNotificationModule, + TuiSvgModule, + TuiTextfieldControllerModule, + TuiTooltipModule, + TuiWrapperModule, +} from '@taiga-ui/core'; import { TuiAvatarModule, + TuiAvatarStackModule, + TuiBadgedContentModule, TuiBadgeModule, TuiBadgeNotificationModule, TuiCellModule, + TuiCheckboxModule, TuiFadeModule, + TuiSensitiveModule, + TuiSurfaceModule, + TuiThumbnailCardModule, + TuiTitleModule, + TuiToggleModule, } from '@taiga-ui/experimental'; -import {TuiMarkerIconModule, TuiProgressModule, TuiToggleModule} from '@taiga-ui/kit'; +import { + TuiDataListWrapperModule, + TuiMarkerIconModule, + TuiProgressModule, + TuiSelectModule, +} from '@taiga-ui/kit'; import {ExampleTuiCellComponent} from './cell.component'; import {TuiCellExample1} from './examples/1'; @@ -20,11 +42,13 @@ import {TuiCellExample2} from './examples/2'; import {TuiCellExample3} from './examples/3'; import {TuiCellExample4} from './examples/4'; import {TuiCellExample5} from './examples/5'; +import {TuiCellExample6} from './examples/6'; @NgModule({ imports: [ CommonModule, FormsModule, + TuiWrapperModule, TuiAddonDocModule, TuiAvatarModule, TuiBadgeModule, @@ -40,6 +64,19 @@ import {TuiCellExample5} from './examples/5'; TuiToggleModule, TuiTooltipModule, RouterModule.forChild(tuiGenerateRoutes(ExampleTuiCellComponent)), + TuiTitleModule, + TuiBadgedContentModule, + TuiToggleModule, + TuiSvgModule, + TuiCheckboxModule, + TuiAvatarStackModule, + TuiLoaderModule, + TuiSensitiveModule, + TuiSurfaceModule, + TuiSelectModule, + TuiDataListWrapperModule, + TuiTextfieldControllerModule, + TuiLabelModule, ], declarations: [ ExampleTuiCellComponent, @@ -48,6 +85,7 @@ import {TuiCellExample5} from './examples/5'; TuiCellExample3, TuiCellExample4, TuiCellExample5, + TuiCellExample6, ], exports: [ExampleTuiCellComponent], }) diff --git a/projects/demo/src/modules/experimental/cell/cell.template.html b/projects/demo/src/modules/experimental/cell/cell.template.html index 4c958f9c9ef0..73a92f7a288b 100644 --- a/projects/demo/src/modules/experimental/cell/cell.template.html +++ b/projects/demo/src/modules/experimental/cell/cell.template.html @@ -19,170 +19,50 @@ - - Cell - component makes the most of Angular - - "Multi-slot content projection" - - pattern. -
- This example pass - - Money - - / - - Badge - - inside - secondaryTitle - / - description - slots. - - - You can fade out overflown content by - - Fade - - directive. Or you can use native - text-overflow: ellipsis - . -
- Choose any tool you wish! - - - - - - -
- - - {{ 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 - - + + + - +
  1. -

    - Import - TuiCellModule - into a module where you want to use our component -

    +

    Import module:

    - + tuiWrapper + > +
    + Title +
    Description
    +
    +
    + Secondary title +
    Secondary description
    +
    + + +
    + +
    + Title +
    Description
    +
    +
    + Secondary title +
    Secondary description
    +
    +
    - Title - Description - Secondary title - Secondary description +
    + +
    + Title +
    Description
    +
    +
    + Secondary title +
    Secondary description
    +
    diff --git a/projects/demo/src/modules/directives/title/examples/1/index.less b/projects/demo/src/modules/experimental/cell/examples/1/index.less similarity index 100% rename from projects/demo/src/modules/directives/title/examples/1/index.less rename to projects/demo/src/modules/experimental/cell/examples/1/index.less diff --git a/projects/demo/src/modules/experimental/cell/examples/1/index.ts b/projects/demo/src/modules/experimental/cell/examples/1/index.ts index 9d982b04027a..59d06bd64bbe 100644 --- a/projects/demo/src/modules/experimental/cell/examples/1/index.ts +++ b/projects/demo/src/modules/experimental/cell/examples/1/index.ts @@ -5,6 +5,7 @@ import {encapsulation} from '@demo/emulate/encapsulation'; @Component({ selector: 'tui-cell-example-1', templateUrl: './index.html', + styleUrls: ['./index.less'], changeDetection, encapsulation, }) 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 50583d69af4c..46e159b2c75d 100644 --- a/projects/demo/src/modules/experimental/cell/examples/2/index.html +++ b/projects/demo/src/modules/experimental/cell/examples/2/index.html @@ -1,77 +1,48 @@ -
    - - - + + + + + + +
    - Alex Inkin - - - - - Feb 1, 2023 -
    - -
    - - - - Vladimir Potekhin - - - -
    - -
    - - - Roman Sedov - Salary - - -
    - -
    - - - Maksim Ivanov - Main account - - - - May 6, 2018 -
    - -
    - - - Nikita Barsukov - -
    - Happy birthday! + Allow incoming +
    Why would you?
    - - - - 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 1a5764140049..23d25a3bb0a1 100644 --- a/projects/demo/src/modules/experimental/cell/examples/2/index.less +++ b/projects/demo/src/modules/experimental/cell/examples/2/index.less @@ -3,7 +3,3 @@ 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 cee4a7e764b4..fffe698fd33e 100644 --- a/projects/demo/src/modules/experimental/cell/examples/2/index.ts +++ b/projects/demo/src/modules/experimental/cell/examples/2/index.ts @@ -1,18 +1,15 @@ 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 {} +export class TuiCellExample2 { + incoming = false; + outgoing = true; +} 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 db13431365b4..6282765309c1 100644 --- a/projects/demo/src/modules/experimental/cell/examples/3/index.html +++ b/projects/demo/src/modules/experimental/cell/examples/3/index.html @@ -1,35 +1,90 @@
    - - - - Taiga UI: more than UI kit - + +
    + $30 our of $100 +
    Saving for a Benjamin Franklin portrait
    +
    +
    + + +$30 + +
     
    +
    +
    - + + + + +2 + +
    + Waterplea +
    + + + $5 000 + + Great music + + + +
    +
    + - Taiga UI family is a collection of independent open source Angular libraries -     + Buy + +
    - + + - Taiga UI is fully-treeshakable Angular UI Kit - + 1234 + +
    + Primary Card +
    **** **** **** 1234
    +
    + - - It is based on ng-polymorpheus and uses Web APIs for Angular - +
    + Poster +
    +
    Ridley Scott, 1982
    + Blade Runner +
    + A blade runner must pursue and terminate four replicants who stole a ship in space and have returned to + Earth to find their creator. +
    +
    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 47fc2662f082..23d25a3bb0a1 100644 --- a/projects/demo/src/modules/experimental/cell/examples/3/index.less +++ b/projects/demo/src/modules/experimental/cell/examples/3/index.less @@ -1,19 +1,5 @@ -[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; -} - -.ellipsis { - display: block; - text-overflow: ellipsis; - overflow: hidden; -} - -.logo { - align-self: flex-start; - width: 2.5rem; +:host { + display: flex; + flex-direction: column; + gap: 1rem; } diff --git a/projects/demo/src/modules/experimental/cell/examples/3/index.ts b/projects/demo/src/modules/experimental/cell/examples/3/index.ts index 18b16d4a7b13..af9b1337704b 100644 --- a/projects/demo/src/modules/experimental/cell/examples/3/index.ts +++ b/projects/demo/src/modules/experimental/cell/examples/3/index.ts @@ -9,4 +9,6 @@ import {encapsulation} from '@demo/emulate/encapsulation'; changeDetection, encapsulation, }) -export class TuiCellExample3 {} +export class TuiCellExample3 { + value = false; +} 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 886f7821e62d..486dbf6dc730 100644 --- a/projects/demo/src/modules/experimental/cell/examples/4/index.html +++ b/projects/demo/src/modules/experimental/cell/examples/4/index.html @@ -1,31 +1,59 @@ - + +
    + +
    Salary
    +
    + + Enough + +
    Sky's the limit
    +
    +
    diff --git a/projects/demo/src/modules/experimental/cell/examples/4/index.less b/projects/demo/src/modules/experimental/cell/examples/4/index.less index 305074aaa38f..23d25a3bb0a1 100644 --- a/projects/demo/src/modules/experimental/cell/examples/4/index.less +++ b/projects/demo/src/modules/experimental/cell/examples/4/index.less @@ -1,5 +1,5 @@ -.accessories { +:host { display: flex; + flex-direction: column; gap: 1rem; - align-items: center; } 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 17cc4e9279e8..baccb9b03928 100644 --- a/projects/demo/src/modules/experimental/cell/examples/4/index.ts +++ b/projects/demo/src/modules/experimental/cell/examples/4/index.ts @@ -10,11 +10,5 @@ import {encapsulation} from '@demo/emulate/encapsulation'; encapsulation, }) export class TuiCellExample4 { - readonly tooltipContent = `This example requires import of - TuiBadgeAlertModule, - TuiTooltipModule, - TuiToggleModule - `; - - toggleValue = true; + value = false; } diff --git a/projects/demo/src/modules/experimental/cell/examples/5/index.html b/projects/demo/src/modules/experimental/cell/examples/5/index.html index 0a00953b0ddb..1e1ed5a54384 100644 --- a/projects/demo/src/modules/experimental/cell/examples/5/index.html +++ b/projects/demo/src/modules/experimental/cell/examples/5/index.html @@ -1,61 +1,102 @@ - +
    + +
    + Long title in a cell will wrap to multiple lines and so will the subtitle +
    + Use + tuiCellSide + to keep your side content properly aligned if you have many lines of text +
    +
    +
    + +
    +
    - - - - NoName bank - *1234 - - - - Today - +
    + Alternatively you can use fade to hide extra text using nowrap CSS +
    Works the same for subtitle when fade directive is applied to the top
    +
    + Works with the right side +
    +
    + Works with fade on both sides +
    You can control proportions
    +
    +
    + Proportions are controlled with flex +
    Flex shrink is set to 70-30 by default
    +
    + +
    + +
    + +
    + Alex Inkin +
    Taiga UI developer
    +
    +
    + +$1000 +
    Bonus for tuiCell component
    + Awesome! +
    +
    - Carrefour - Visa - - - - Yesterday +
    + +
    + Main account +
    Savings
    + Used by default unless arrested +
    +
    + $123 456 +
    Content can overlap in this case
    +
    diff --git a/projects/demo/src/modules/experimental/cell/examples/5/index.less b/projects/demo/src/modules/experimental/cell/examples/5/index.less index 55d492045c07..23d25a3bb0a1 100644 --- a/projects/demo/src/modules/experimental/cell/examples/5/index.less +++ b/projects/demo/src/modules/experimental/cell/examples/5/index.less @@ -3,12 +3,3 @@ 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); -} diff --git a/projects/demo/src/modules/experimental/cell/examples/5/index.ts b/projects/demo/src/modules/experimental/cell/examples/5/index.ts index ec32f05f4717..f988cd382612 100644 --- a/projects/demo/src/modules/experimental/cell/examples/5/index.ts +++ b/projects/demo/src/modules/experimental/cell/examples/5/index.ts @@ -1,21 +1,12 @@ 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); - } -} +export class TuiCellExample5 {} diff --git a/projects/demo/src/modules/experimental/cell/examples/6/index.html b/projects/demo/src/modules/experimental/cell/examples/6/index.html new file mode 100644 index 000000000000..67f5931689af --- /dev/null +++ b/projects/demo/src/modules/experimental/cell/examples/6/index.html @@ -0,0 +1,50 @@ +
    +

    Inside a block

    +
    + +
    +
    + + diff --git a/projects/demo/src/modules/experimental/cell/examples/6/index.less b/projects/demo/src/modules/experimental/cell/examples/6/index.less new file mode 100644 index 000000000000..3b7d879d2e89 --- /dev/null +++ b/projects/demo/src/modules/experimental/cell/examples/6/index.less @@ -0,0 +1,19 @@ +:host { + display: flex; + flex-direction: column; + max-width: 20rem; + gap: 1rem; +} + +.actions { + display: flex; + flex-direction: column; + gap: 0.25rem; + margin: 1rem -0.5rem -0.5rem; +} + +.action { + padding-left: 0.5rem; + padding-right: 0.5rem; + border-radius: 0.75rem; +} diff --git a/projects/demo/src/modules/experimental/cell/examples/6/index.ts b/projects/demo/src/modules/experimental/cell/examples/6/index.ts new file mode 100644 index 000000000000..76f83efff5c9 --- /dev/null +++ b/projects/demo/src/modules/experimental/cell/examples/6/index.ts @@ -0,0 +1,32 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; + +@Component({ + selector: 'tui-cell-example-6', + templateUrl: './index.html', + styleUrls: ['./index.less'], + changeDetection, + encapsulation, +}) +export class TuiCellExample6 { + readonly items = [ + { + icon: 'tuiIconEyeLarge', + title: 'Show more', + subtitle: 'Ctrl + Shift + M', + }, + { + icon: 'tuiIconMailLarge', + title: 'Send message', + subtitle: 'Keep it short', + }, + { + icon: 'tuiIconLockLarge', + title: 'Access', + subtitle: 'Block your account', + }, + ]; + + value = this.items[0]; +} 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 f5bfa8bc7262..3bb14dfbf8b0 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,5 @@ ```html -
    +
    Title Description Secondary title diff --git a/projects/demo/src/modules/directives/title/examples/1/index.html b/projects/demo/src/modules/experimental/title/examples/1/index.html similarity index 100% rename from projects/demo/src/modules/directives/title/examples/1/index.html rename to projects/demo/src/modules/experimental/title/examples/1/index.html diff --git a/projects/demo/src/modules/directives/title/examples/2/index.less b/projects/demo/src/modules/experimental/title/examples/1/index.less similarity index 100% rename from projects/demo/src/modules/directives/title/examples/2/index.less rename to projects/demo/src/modules/experimental/title/examples/1/index.less diff --git a/projects/demo/src/modules/directives/title/examples/1/index.ts b/projects/demo/src/modules/experimental/title/examples/1/index.ts similarity index 100% rename from projects/demo/src/modules/directives/title/examples/1/index.ts rename to projects/demo/src/modules/experimental/title/examples/1/index.ts diff --git a/projects/demo/src/modules/directives/title/examples/2/index.html b/projects/demo/src/modules/experimental/title/examples/2/index.html similarity index 100% rename from projects/demo/src/modules/directives/title/examples/2/index.html rename to projects/demo/src/modules/experimental/title/examples/2/index.html diff --git a/projects/demo/src/modules/experimental/title/examples/2/index.less b/projects/demo/src/modules/experimental/title/examples/2/index.less new file mode 100644 index 000000000000..dc3140046ad7 --- /dev/null +++ b/projects/demo/src/modules/experimental/title/examples/2/index.less @@ -0,0 +1,5 @@ +:host { + display: flex; + flex-direction: column; + gap: 2rem; +} diff --git a/projects/demo/src/modules/directives/title/examples/2/index.ts b/projects/demo/src/modules/experimental/title/examples/2/index.ts similarity index 100% rename from projects/demo/src/modules/directives/title/examples/2/index.ts rename to projects/demo/src/modules/experimental/title/examples/2/index.ts diff --git a/projects/demo/src/modules/directives/title/examples/3/index.html b/projects/demo/src/modules/experimental/title/examples/3/index.html similarity index 100% rename from projects/demo/src/modules/directives/title/examples/3/index.html rename to projects/demo/src/modules/experimental/title/examples/3/index.html diff --git a/projects/demo/src/modules/directives/title/examples/3/index.less b/projects/demo/src/modules/experimental/title/examples/3/index.less similarity index 100% rename from projects/demo/src/modules/directives/title/examples/3/index.less rename to projects/demo/src/modules/experimental/title/examples/3/index.less diff --git a/projects/demo/src/modules/directives/title/examples/3/index.ts b/projects/demo/src/modules/experimental/title/examples/3/index.ts similarity index 100% rename from projects/demo/src/modules/directives/title/examples/3/index.ts rename to projects/demo/src/modules/experimental/title/examples/3/index.ts diff --git a/projects/demo/src/modules/directives/title/examples/import/import-module.md b/projects/demo/src/modules/experimental/title/examples/import/import-module.md similarity index 100% rename from projects/demo/src/modules/directives/title/examples/import/import-module.md rename to projects/demo/src/modules/experimental/title/examples/import/import-module.md diff --git a/projects/demo/src/modules/directives/title/examples/import/insert-template.md b/projects/demo/src/modules/experimental/title/examples/import/insert-template.md similarity index 100% rename from projects/demo/src/modules/directives/title/examples/import/insert-template.md rename to projects/demo/src/modules/experimental/title/examples/import/insert-template.md diff --git a/projects/demo/src/modules/directives/title/title.component.ts b/projects/demo/src/modules/experimental/title/title.component.ts similarity index 100% rename from projects/demo/src/modules/directives/title/title.component.ts rename to projects/demo/src/modules/experimental/title/title.component.ts diff --git a/projects/demo/src/modules/directives/title/title.module.ts b/projects/demo/src/modules/experimental/title/title.module.ts similarity index 75% rename from projects/demo/src/modules/directives/title/title.module.ts rename to projects/demo/src/modules/experimental/title/title.module.ts index fa84c491296d..29b5e8830a89 100644 --- a/projects/demo/src/modules/directives/title/title.module.ts +++ b/projects/demo/src/modules/experimental/title/title.module.ts @@ -1,9 +1,8 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {tuiGetDocModules} from '@taiga-ui/addon-doc'; -import {TuiLinkModule, TuiWrapperModule} from '@taiga-ui/core'; -import {TuiAvatarModule, TuiCheckboxModule} from '@taiga-ui/experimental'; -import {TuiTitleModule} from '@taiga-ui/layout'; +import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core'; +import {TuiAvatarModule, TuiTitleModule} from '@taiga-ui/experimental'; import {TuiTitleExample1} from './examples/1'; import {TuiTitleExample2} from './examples/2'; @@ -14,11 +13,10 @@ import {ExampleTuiTitleComponent} from './title.component'; imports: [ CommonModule, TuiTitleModule, - tuiGetDocModules(ExampleTuiTitleComponent), TuiLinkModule, - TuiCheckboxModule, - TuiWrapperModule, TuiAvatarModule, + TuiNotificationModule, + tuiGetDocModules(ExampleTuiTitleComponent), ], declarations: [ ExampleTuiTitleComponent, diff --git a/projects/demo/src/modules/directives/title/title.template.html b/projects/demo/src/modules/experimental/title/title.template.html similarity index 83% rename from projects/demo/src/modules/directives/title/title.template.html rename to projects/demo/src/modules/experimental/title/title.template.html index 93d7457089c9..f3bd23b5d609 100644 --- a/projects/demo/src/modules/directives/title/title.template.html +++ b/projects/demo/src/modules/experimental/title/title.template.html @@ -1,9 +1,15 @@ + + This code is + experimental + and is a subject to change. Expect final solution to be shipped in the next major version + +

    A directive for title with optional subtitle

    * { - min-width: 0; - } - - &[data-platform='web'][data-size='m'] { - min-height: var(--tui-height-m); - border-radius: var(--tui-radius-m); - padding: 0.375rem 1rem; - } - - &[data-platform='web'][data-size='s'] { - min-height: var(--tui-height-s); - border-radius: var(--tui-radius-s); - padding: 0.125rem 1rem; - } - - &:hover, - &._active, - &:focus-within { - background-color: var(--tui-secondary); - } -} - -:host(button, a) { - cursor: pointer; - width: 100%; -} - -.t-main { - display: flex; - flex: 1; - justify-content: space-between; - column-gap: 1rem; - - & > * { - min-width: 0; - } -} - -.t-icon { - display: flex; - align-items: center; - - &:not(:empty) { - margin-right: 1rem; - } -} - -.t-left { - display: flex; - flex-direction: column; - flex-shrink: var(--tui-left-shrink, 1); - text-align: start; - - & > * { - min-width: 0; - } -} - -.t-right { - display: flex; - flex-direction: column; - flex-shrink: var(--tui-right-shrink, 1); - - & > * { - min-width: 0; - } -} - -.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); - } - - :host[data-platform='web'][data-size='m'] &, - :host[data-platform='web'][data-size='s'] & { - font: var(--tui-font-text-s-2); - } -} - -.t-description { - color: var(--tui-text-02); - font: var(--tui-font-text-s-2); - - :host[data-platform='web'][data-size='m'] &, - :host[data-platform='web'][data-size='s'] & { - 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 deleted file mode 100644 index bfa096291a9f..000000000000 --- a/projects/experimental/components/cell/cell.template.html +++ /dev/null @@ -1,23 +0,0 @@ -
    - -
    - -
    -
    - - - - - - -
    - -
    - - - - - - -
    -
    diff --git a/projects/experimental/components/index.ts b/projects/experimental/components/index.ts index 5f44df2d003e..57754612a7df 100644 --- a/projects/experimental/components/index.ts +++ b/projects/experimental/components/index.ts @@ -4,7 +4,6 @@ export * from '@taiga-ui/experimental/components/badge'; export * from '@taiga-ui/experimental/components/badge-notification'; export * from '@taiga-ui/experimental/components/badged-content'; export * from '@taiga-ui/experimental/components/button'; -export * from '@taiga-ui/experimental/components/cell'; export * from '@taiga-ui/experimental/components/checkbox'; export * from '@taiga-ui/experimental/components/compass'; export * from '@taiga-ui/experimental/components/radio'; diff --git a/projects/experimental/directives/cell/cell.component.ts b/projects/experimental/directives/cell/cell.component.ts new file mode 100644 index 000000000000..fb59d3f8e018 --- /dev/null +++ b/projects/experimental/directives/cell/cell.component.ts @@ -0,0 +1,10 @@ +import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core'; + +@Component({ + host: {class: 'tui-cell'}, + template: '', + styleUrls: ['./cell.styles.less'], + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, +}) +export class TuiCellComponent {} diff --git a/projects/experimental/directives/cell/cell.directive.ts b/projects/experimental/directives/cell/cell.directive.ts new file mode 100644 index 000000000000..d72ada4f366c --- /dev/null +++ b/projects/experimental/directives/cell/cell.directive.ts @@ -0,0 +1,24 @@ +import {Directive, Inject, Input} from '@angular/core'; +import {TUI_PLATFORM, TuiDirectiveStylesService, TuiPlatform} from '@taiga-ui/cdk'; +import {TuiSizeL, TuiSizeS} from '@taiga-ui/core'; + +import {TuiCellComponent} from './cell.component'; + +@Directive({ + selector: '[tuiCell]', + host: { + '[attr.data-size]': 'platform !== "web" ? "l" : size || "l"', + '[attr.data-platform]': 'platform', + }, +}) +export class TuiCellDirective { + @Input('tuiCell') + size: TuiSizeL | TuiSizeS | '' = 'l'; + + constructor( + @Inject(TUI_PLATFORM) readonly platform: TuiPlatform, + @Inject(TuiDirectiveStylesService) directiveStyles: TuiDirectiveStylesService, + ) { + directiveStyles.addComponent(TuiCellComponent); + } +} diff --git a/projects/experimental/directives/cell/cell.module.ts b/projects/experimental/directives/cell/cell.module.ts new file mode 100644 index 000000000000..7a06442de096 --- /dev/null +++ b/projects/experimental/directives/cell/cell.module.ts @@ -0,0 +1,10 @@ +import {NgModule} from '@angular/core'; + +import {TuiCellComponent} from './cell.component'; +import {TuiCellDirective} from './cell.directive'; + +@NgModule({ + declarations: [TuiCellComponent, TuiCellDirective], + exports: [TuiCellComponent, TuiCellDirective], +}) +export class TuiCellModule {} diff --git a/projects/experimental/directives/cell/cell.styles.less b/projects/experimental/directives/cell/cell.styles.less new file mode 100644 index 000000000000..327438e22024 --- /dev/null +++ b/projects/experimental/directives/cell/cell.styles.less @@ -0,0 +1,144 @@ +@import 'taiga-ui-local'; + +[tuiCell] { + .transition(background); + .clearbtn(); + position: relative; + display: flex; + align-items: center; + text-decoration: none; + color: var(--tui-text-01); + padding: var(--t-padding); + + --t-padding: 0.125rem 1rem; + + [tuiCellSide] { + position: relative; + display: flex; + align-items: center; + align-self: stretch; + } + + [tuiSubtitle] { + display: flex; + align-items: center; + gap: 0.25rem; + color: var(--tui-text-02); + } + + [tuiTitle] { + flex-shrink: 7; + margin-inline-end: auto; + align-items: normal; + } + + [tuiTitle] ~ [tuiTitle] { + flex-shrink: 3; + margin-inline-end: 0; + text-align: right; + align-items: flex-end; + } + + tui-badge-notification[data-size='xs'] { + .center-top(); + left: -0.625rem; + } + + &[data-size='s'] { + min-height: calc(var(--tui-height-s) - 0.5rem); + + --t-padding: 0.125rem 1rem; + + [tuiCellSide] { + max-height: var(--tui-height-s); + } + + [tuiTitle] { + max-height: 100%; + font: var(--tui-font-text-s-2); + gap: 0; + } + + [tuiSubtitle] { + font: var(--tui-font-text-xs-s); + } + + & > *:not(:first-child), + & > [tuiCellSide] > *:not(:first-child) { + margin-inline-start: 0.5rem; + } + + & > tui-avatar, + & > tui-avatar-stack tui-avatar, + & > [tuiCellSide] tui-avatar, + & > [tuiCellSide] tui-avatar-stack tui-avatar { + --t-size: 1.5rem; + } + } + + &[data-size='m'] { + min-height: calc(var(--tui-height-m) - 0.75rem); + + --t-padding: 0.375rem 1rem; + + [tuiCellSide] { + max-height: calc(var(--tui-height-m) - 0.75rem); + } + + [tuiTitle] { + font: var(--tui-font-text-s-2); + gap: 0.125rem; + } + + [tuiSubtitle] { + font: var(--tui-font-text-xs-2); + } + + & > *:not(:first-child), + & > [tuiCellSide] > *:not(:first-child) { + margin-inline-start: 0.75rem; + } + + & > tui-avatar, + & > tui-avatar-stack tui-avatar, + & > [tuiCellSide] tui-avatar, + & > [tuiCellSide] tui-avatar-stack tui-avatar { + --t-size: 2rem; + } + } + + &[data-size='l'] { + min-height: calc(var(--tui-height-l) - 1rem); + + --t-padding: 0.5rem 1rem; + + [tuiCellSide] { + max-height: calc(var(--tui-height-l) - 1rem); + } + + & > *:not(:first-child), + & > [tuiCellSide] > *:not(:first-child) { + margin-inline-start: 1rem; + } + + & > tui-avatar, + & > tui-avatar-stack tui-avatar, + & > [tuiCellSide] tui-avatar, + & > [tuiCellSide] tui-avatar-stack tui-avatar { + --t-size: 2.5rem; + } + } + + [tuiOption] &, + tui-primitive-textfield & { + padding: 0; + } +} + +@media (hover: hover) and (pointer: fine) { + a[tuiCell]:hover, + button[tuiCell]:hover { + background: var(--tui-clear); + cursor: pointer; + } +} diff --git a/projects/experimental/components/cell/index.ts b/projects/experimental/directives/cell/index.ts similarity index 62% rename from projects/experimental/components/cell/index.ts rename to projects/experimental/directives/cell/index.ts index 8655b244b211..a61848642896 100644 --- a/projects/experimental/components/cell/index.ts +++ b/projects/experimental/directives/cell/index.ts @@ -1,3 +1,3 @@ export * from './cell.component'; +export * from './cell.directive'; export * from './cell.module'; -export * from './cell-slot.directive'; diff --git a/projects/experimental/components/cell/ng-package.json b/projects/experimental/directives/cell/ng-package.json similarity index 100% rename from projects/experimental/components/cell/ng-package.json rename to projects/experimental/directives/cell/ng-package.json diff --git a/projects/experimental/directives/index.ts b/projects/experimental/directives/index.ts index 5758f3fd140a..f7a099c4fdd9 100644 --- a/projects/experimental/directives/index.ts +++ b/projects/experimental/directives/index.ts @@ -1,3 +1,5 @@ +export * from '@taiga-ui/experimental/directives/cell'; export * from '@taiga-ui/experimental/directives/fade'; export * from '@taiga-ui/experimental/directives/sensitive'; export * from '@taiga-ui/experimental/directives/surface'; +export * from '@taiga-ui/experimental/directives/title'; diff --git a/projects/experimental/directives/sensitive/sensitive.style.less b/projects/experimental/directives/sensitive/sensitive.style.less index e6b368574dcb..54cab64e97ba 100644 --- a/projects/experimental/directives/sensitive/sensitive.style.less +++ b/projects/experimental/directives/sensitive/sensitive.style.less @@ -19,6 +19,6 @@ } &.tui-sensitive { - text-indent: -10000%; + -webkit-text-fill-color: transparent; } } diff --git a/projects/layout/components/title/index.ts b/projects/experimental/directives/title/index.ts similarity index 100% rename from projects/layout/components/title/index.ts rename to projects/experimental/directives/title/index.ts diff --git a/projects/layout/components/title/ng-package.json b/projects/experimental/directives/title/ng-package.json similarity index 100% rename from projects/layout/components/title/ng-package.json rename to projects/experimental/directives/title/ng-package.json diff --git a/projects/layout/components/title/title.component.ts b/projects/experimental/directives/title/title.component.ts similarity index 100% rename from projects/layout/components/title/title.component.ts rename to projects/experimental/directives/title/title.component.ts diff --git a/projects/layout/components/title/title.directive.ts b/projects/experimental/directives/title/title.directive.ts similarity index 100% rename from projects/layout/components/title/title.directive.ts rename to projects/experimental/directives/title/title.directive.ts diff --git a/projects/layout/components/title/title.module.ts b/projects/experimental/directives/title/title.module.ts similarity index 100% rename from projects/layout/components/title/title.module.ts rename to projects/experimental/directives/title/title.module.ts diff --git a/projects/layout/components/title/title.style.less b/projects/experimental/directives/title/title.style.less similarity index 94% rename from projects/layout/components/title/title.style.less rename to projects/experimental/directives/title/title.style.less index fc78c49710f3..ad0159f87edd 100644 --- a/projects/layout/components/title/title.style.less +++ b/projects/experimental/directives/title/title.style.less @@ -1,6 +1,8 @@ [tuiTitle] { + position: relative; display: flex; flex-direction: column; + text-align: left; gap: 0.25rem; margin: 0; font: var(--tui-font-text-m-2); diff --git a/projects/layout/components/index.ts b/projects/layout/components/index.ts index 8becae85e0aa..45b3c6d90361 100644 --- a/projects/layout/components/index.ts +++ b/projects/layout/components/index.ts @@ -1,2 +1 @@ export * from '@taiga-ui/layout/components/block-status'; -export * from '@taiga-ui/layout/components/title'; From 6879f55e05664bbcefde1aaa31d1811320dfc3eb Mon Sep 17 00:00:00 2001 From: taiga-family-bot Date: Thu, 26 Oct 2023 17:22:02 +0000 Subject: [PATCH 7/8] chore: icons have changed [bot] --- projects/demo/used-icons.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/projects/demo/used-icons.ts b/projects/demo/used-icons.ts index 9c14056a8d6e..bba27fa2dd95 100644 --- a/projects/demo/used-icons.ts +++ b/projects/demo/used-icons.ts @@ -102,11 +102,14 @@ export const TUI_USED_ICONS = [ `tuiIconBox`, `tuiIconLock`, `tuiIconUsers`, - `tuiIconShoppingCart`, + `tuiIconArrowDownLeft`, + `tuiIconArrowUpRight`, + `tuiIconSmileLarge`, + `tuiIconBell`, + `tuiIconCheckLarge`, `tuiIconCloseLarge`, `tuiIconFrownLarge`, `tuiIconMehLarge`, - `tuiIconSmileLarge`, `tuiIconThumbsUp`, `tuiIconThumbsDown`, `tuiIconCloud`, From 9258715edbaedbcbab210486cdebdd961f81faf2 Mon Sep 17 00:00:00 2001 From: waterplea Date: Fri, 27 Oct 2023 12:16:39 +0400 Subject: [PATCH 8/8] chore: add actions --- .cspell.json | 3 +- .../experimental/cell/cell.component.ts | 6 ++ .../modules/experimental/cell/cell.module.ts | 24 +++-- .../experimental/cell/cell.styles.less | 4 - .../experimental/cell/cell.template.html | 12 ++- .../experimental/cell/examples/1/index.html | 41 ++------ .../experimental/cell/examples/1/index.ts | 4 +- .../experimental/cell/examples/3/index.html | 8 +- .../experimental/cell/examples/5/index.html | 8 +- .../experimental/cell/examples/6/index.html | 97 +++++++++++-------- .../experimental/cell/examples/6/index.less | 14 --- .../experimental/cell/examples/6/index.ts | 17 ++-- .../experimental/cell/examples/7/index.html | 50 ++++++++++ .../experimental/cell/examples/7/index.less | 19 ++++ .../experimental/cell/examples/7/index.ts | 32 ++++++ .../cell/examples/import/insert-template.md | 10 +- .../avatar-stack/avatar-stack.style.less | 9 +- .../directives/cell/cell.directive.ts | 9 ++ .../directives/cell/cell.styles.less | 56 +++++++---- .../directives/title/title.directive.ts | 3 +- .../data-list-group-wrapper.template.html | 1 + .../data-list-wrapper.template.html | 1 + .../data-list-wrapper/data-list-wrapper.ts | 5 + 23 files changed, 278 insertions(+), 155 deletions(-) create mode 100644 projects/demo/src/modules/experimental/cell/examples/7/index.html create mode 100644 projects/demo/src/modules/experimental/cell/examples/7/index.less create mode 100644 projects/demo/src/modules/experimental/cell/examples/7/index.ts diff --git a/.cspell.json b/.cspell.json index 83aacba3aec4..ae62d0cdf843 100644 --- a/.cspell.json +++ b/.cspell.json @@ -32,7 +32,8 @@ "tcrm", "scrollbars", "callout", - "retrowave" + "retrowave", + "replicants" ], "ignoreRegExpList": ["\\(https?://.*?\\)", "\\/{1}.+\\/{1}", "\\%2F.+", "\\%2C.+", "\\ɵ.+", "\\ыва.+"], "overrides": [ diff --git a/projects/demo/src/modules/experimental/cell/cell.component.ts b/projects/demo/src/modules/experimental/cell/cell.component.ts index 63b794a03bb1..9e466d8ed8a0 100644 --- a/projects/demo/src/modules/experimental/cell/cell.component.ts +++ b/projects/demo/src/modules/experimental/cell/cell.component.ts @@ -45,5 +45,11 @@ export class ExampleTuiCellComponent { readonly example6: TuiDocExample = { HTML: import('./examples/6/index.html?raw'), + TypeScript: import('./examples/6/index.ts?raw'), + }; + + readonly example7: TuiDocExample = { + HTML: import('./examples/7/index.html?raw'), + LESS: import('./examples/7/index.less?raw'), }; } diff --git a/projects/demo/src/modules/experimental/cell/cell.module.ts b/projects/demo/src/modules/experimental/cell/cell.module.ts index a2e632bba6c3..a535b011c6bb 100644 --- a/projects/demo/src/modules/experimental/cell/cell.module.ts +++ b/projects/demo/src/modules/experimental/cell/cell.module.ts @@ -1,13 +1,14 @@ 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 {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc'; +import {tuiGetDocModules} from '@taiga-ui/addon-doc'; import { + TuiGroupModule, + TuiHostedDropdownModule, TuiLabelModule, TuiLinkModule, TuiLoaderModule, + TuiModeModule, TuiNotificationModule, TuiSvgModule, TuiTextfieldControllerModule, @@ -20,6 +21,7 @@ import { TuiBadgedContentModule, TuiBadgeModule, TuiBadgeNotificationModule, + TuiButtonModule, TuiCellModule, TuiCheckboxModule, TuiFadeModule, @@ -31,7 +33,6 @@ import { } from '@taiga-ui/experimental'; import { TuiDataListWrapperModule, - TuiMarkerIconModule, TuiProgressModule, TuiSelectModule, } from '@taiga-ui/kit'; @@ -43,33 +44,30 @@ import {TuiCellExample3} from './examples/3'; import {TuiCellExample4} from './examples/4'; import {TuiCellExample5} from './examples/5'; import {TuiCellExample6} from './examples/6'; +import {TuiCellExample7} from './examples/7'; @NgModule({ imports: [ CommonModule, FormsModule, TuiWrapperModule, - TuiAddonDocModule, TuiAvatarModule, + TuiAvatarStackModule, TuiBadgeModule, TuiBadgeNotificationModule, + TuiBadgedContentModule, TuiCellModule, TuiFadeModule, TuiLinkModule, - TuiMarkerIconModule, - TuiMoneyModule, TuiNotificationModule, TuiProgressModule, TuiThumbnailCardModule, TuiToggleModule, TuiTooltipModule, - RouterModule.forChild(tuiGenerateRoutes(ExampleTuiCellComponent)), TuiTitleModule, - TuiBadgedContentModule, TuiToggleModule, TuiSvgModule, TuiCheckboxModule, - TuiAvatarStackModule, TuiLoaderModule, TuiSensitiveModule, TuiSurfaceModule, @@ -77,6 +75,11 @@ import {TuiCellExample6} from './examples/6'; TuiDataListWrapperModule, TuiTextfieldControllerModule, TuiLabelModule, + TuiButtonModule, + TuiHostedDropdownModule, + TuiGroupModule, + tuiGetDocModules(ExampleTuiCellComponent), + TuiModeModule, ], declarations: [ ExampleTuiCellComponent, @@ -86,6 +89,7 @@ import {TuiCellExample6} from './examples/6'; TuiCellExample4, TuiCellExample5, TuiCellExample6, + TuiCellExample7, ], 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 c58318d603f2..6fbd78f1fbfb 100644 --- a/projects/demo/src/modules/experimental/cell/cell.styles.less +++ b/projects/demo/src/modules/experimental/cell/cell.styles.less @@ -2,8 +2,4 @@ example-cell [tuiCell] { max-width: 25rem; - - @media @tui-mobile { - min-width: 100%; - } } diff --git a/projects/demo/src/modules/experimental/cell/cell.template.html b/projects/demo/src/modules/experimental/cell/cell.template.html index 73a92f7a288b..5c2a7a52c493 100644 --- a/projects/demo/src/modules/experimental/cell/cell.template.html +++ b/projects/demo/src/modules/experimental/cell/cell.template.html @@ -51,12 +51,20 @@     + + + +     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 e0c7204bfbfc..b7dd72d1cb87 100644 --- a/projects/demo/src/modules/experimental/cell/examples/1/index.html +++ b/projects/demo/src/modules/experimental/cell/examples/1/index.html @@ -1,8 +1,11 @@ -
    +
    Title @@ -10,38 +13,6 @@
    Secondary title -
    Secondary description
    -
    -
    - -
    - -
    - Title -
    Description
    -
    -
    - Secondary title -
    Secondary description
    -
    -
    - -
    - -
    - Title -
    Description
    -
    -
    - Secondary title -
    Secondary description
    +
    Another description
    diff --git a/projects/demo/src/modules/experimental/cell/examples/1/index.ts b/projects/demo/src/modules/experimental/cell/examples/1/index.ts index 59d06bd64bbe..dd84de0e9e24 100644 --- a/projects/demo/src/modules/experimental/cell/examples/1/index.ts +++ b/projects/demo/src/modules/experimental/cell/examples/1/index.ts @@ -9,4 +9,6 @@ import {encapsulation} from '@demo/emulate/encapsulation'; changeDetection, encapsulation, }) -export class TuiCellExample1 {} +export class TuiCellExample1 { + readonly sizes = ['s', 'm', 'l'] as const; +} 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 6282765309c1..a86581e2fb20 100644 --- a/projects/demo/src/modules/experimental/cell/examples/3/index.html +++ b/projects/demo/src/modules/experimental/cell/examples/3/index.html @@ -23,8 +23,8 @@
    - - + + +2
    @@ -35,9 +35,9 @@ size="s" > - $5 000 + 100 ₽ - Great music + Music - Alex Inkin + Alexander
    Taiga UI developer
    @@ -87,8 +87,8 @@ >
    Main account -
    Savings
    - Used by default unless arrested +
    USD
    + By default unless arrested
    $123 456 -
    Content can overlap in this case
    +
    Careful, content may overlap
    diff --git a/projects/demo/src/modules/experimental/cell/examples/6/index.html b/projects/demo/src/modules/experimental/cell/examples/6/index.html index 67f5931689af..a64abba4a9d3 100644 --- a/projects/demo/src/modules/experimental/cell/examples/6/index.html +++ b/projects/demo/src/modules/experimental/cell/examples/6/index.html @@ -1,50 +1,61 @@ -
    -

    Inside a block

    -
    - +
    +
    + Single action +
    Description of the action
    +
    - + +
    + + +
    +
    + Hover over +
    Put it before the right side
    +
    + diff --git a/projects/demo/src/modules/experimental/cell/examples/6/index.less b/projects/demo/src/modules/experimental/cell/examples/6/index.less index 3b7d879d2e89..23d25a3bb0a1 100644 --- a/projects/demo/src/modules/experimental/cell/examples/6/index.less +++ b/projects/demo/src/modules/experimental/cell/examples/6/index.less @@ -1,19 +1,5 @@ :host { display: flex; flex-direction: column; - max-width: 20rem; gap: 1rem; } - -.actions { - display: flex; - flex-direction: column; - gap: 0.25rem; - margin: 1rem -0.5rem -0.5rem; -} - -.action { - padding-left: 0.5rem; - padding-right: 0.5rem; - border-radius: 0.75rem; -} diff --git a/projects/demo/src/modules/experimental/cell/examples/6/index.ts b/projects/demo/src/modules/experimental/cell/examples/6/index.ts index 76f83efff5c9..6d6db20b9cdf 100644 --- a/projects/demo/src/modules/experimental/cell/examples/6/index.ts +++ b/projects/demo/src/modules/experimental/cell/examples/6/index.ts @@ -12,21 +12,16 @@ import {encapsulation} from '@demo/emulate/encapsulation'; export class TuiCellExample6 { readonly items = [ { - icon: 'tuiIconEyeLarge', - title: 'Show more', - subtitle: 'Ctrl + Shift + M', + icon: 'tuiIconPhone', + toString: () => 'Call now', }, { - icon: 'tuiIconMailLarge', - title: 'Send message', - subtitle: 'Keep it short', + icon: 'tuiIconStar', + toString: () => 'Add to favorites', }, { - icon: 'tuiIconLockLarge', - title: 'Access', - subtitle: 'Block your account', + icon: 'tuiIconTrash', + toString: () => 'Remove item', }, ]; - - value = this.items[0]; } diff --git a/projects/demo/src/modules/experimental/cell/examples/7/index.html b/projects/demo/src/modules/experimental/cell/examples/7/index.html new file mode 100644 index 000000000000..67f5931689af --- /dev/null +++ b/projects/demo/src/modules/experimental/cell/examples/7/index.html @@ -0,0 +1,50 @@ +
    +

    Inside a block

    +
    + +
    +
    + + diff --git a/projects/demo/src/modules/experimental/cell/examples/7/index.less b/projects/demo/src/modules/experimental/cell/examples/7/index.less new file mode 100644 index 000000000000..3b7d879d2e89 --- /dev/null +++ b/projects/demo/src/modules/experimental/cell/examples/7/index.less @@ -0,0 +1,19 @@ +:host { + display: flex; + flex-direction: column; + max-width: 20rem; + gap: 1rem; +} + +.actions { + display: flex; + flex-direction: column; + gap: 0.25rem; + margin: 1rem -0.5rem -0.5rem; +} + +.action { + padding-left: 0.5rem; + padding-right: 0.5rem; + border-radius: 0.75rem; +} diff --git a/projects/demo/src/modules/experimental/cell/examples/7/index.ts b/projects/demo/src/modules/experimental/cell/examples/7/index.ts new file mode 100644 index 000000000000..58d2792dcb96 --- /dev/null +++ b/projects/demo/src/modules/experimental/cell/examples/7/index.ts @@ -0,0 +1,32 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; + +@Component({ + selector: 'tui-cell-example-7', + templateUrl: './index.html', + styleUrls: ['./index.less'], + changeDetection, + encapsulation, +}) +export class TuiCellExample7 { + readonly items = [ + { + icon: 'tuiIconEyeLarge', + title: 'Show more', + subtitle: 'Ctrl + Shift + M', + }, + { + icon: 'tuiIconMailLarge', + title: 'Send message', + subtitle: 'Keep it short', + }, + { + icon: 'tuiIconLockLarge', + title: 'Access', + subtitle: 'Block your account', + }, + ]; + + value = this.items[0]; +} 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 3bb14dfbf8b0..dabca51107b4 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,10 @@ ```html
    - Title - Description - Secondary title - Secondary description + +
    + Title +
    Subtitle
    +
    +
    ``` diff --git a/projects/experimental/components/avatar-stack/avatar-stack.style.less b/projects/experimental/components/avatar-stack/avatar-stack.style.less index ab63ec2e72c9..cede95c18d80 100644 --- a/projects/experimental/components/avatar-stack/avatar-stack.style.less +++ b/projects/experimental/components/avatar-stack/avatar-stack.style.less @@ -4,9 +4,12 @@ tui-avatar-stack { display: flex; --t-gap: 0.125rem; + tui-avatar._round { + mask-image: radial-gradient(circle at var(--t-x) 50%, transparent calc(var(--t-radius) + var(--t-gap)), #000 calc(var(--t-radius) + var(--t-gap) + 0.2px)); + } + &[data-direction='right'] tui-avatar._round { - --t-x: 50%; - mask-image: radial-gradient(circle at 100% var(--t-x), transparent calc(var(--t-radius) + var(--t-gap)), #000 calc(var(--t-radius) + var(--t-gap) + 0.2px)); + --t-x: 100%; &:last-child { mask-image: none; @@ -14,7 +17,7 @@ tui-avatar-stack { } &[data-direction='left'] tui-avatar._round { - --t-x: -50%; + --t-x: 0; &:first-child { mask-image: none; diff --git a/projects/experimental/directives/cell/cell.directive.ts b/projects/experimental/directives/cell/cell.directive.ts index d72ada4f366c..e685be56243e 100644 --- a/projects/experimental/directives/cell/cell.directive.ts +++ b/projects/experimental/directives/cell/cell.directive.ts @@ -1,12 +1,21 @@ import {Directive, Inject, Input} from '@angular/core'; import {TUI_PLATFORM, TuiDirectiveStylesService, TuiPlatform} from '@taiga-ui/cdk'; import {TuiSizeL, TuiSizeS} from '@taiga-ui/core'; +import { + tuiAvatarOptionsProvider, + tuiButtonOptionsProvider, +} from '@taiga-ui/experimental/components'; import {TuiCellComponent} from './cell.component'; @Directive({ selector: '[tuiCell]', + providers: [ + tuiAvatarOptionsProvider({size: 's'}), + tuiButtonOptionsProvider({size: 's'}), + ], host: { + tuiCell: '', '[attr.data-size]': 'platform !== "web" ? "l" : size || "l"', '[attr.data-platform]': 'platform', }, diff --git a/projects/experimental/directives/cell/cell.styles.less b/projects/experimental/directives/cell/cell.styles.less index 327438e22024..90453dac72ca 100644 --- a/projects/experimental/directives/cell/cell.styles.less +++ b/projects/experimental/directives/cell/cell.styles.less @@ -7,18 +7,44 @@ display: flex; align-items: center; text-decoration: none; + box-sizing: content-box; + isolation: isolate; color: var(--tui-text-01); padding: var(--t-padding); + min-height: var(--t-height); + --tui-height: calc(var(--tui-height-s) - 0.5rem); --t-padding: 0.125rem 1rem; [tuiCellSide] { position: relative; display: flex; + max-height: var(--t-height); align-items: center; align-self: stretch; } + [tuiCellActions] { + position: absolute; + right: 0; + z-index: 1; + padding-right: inherit; + + & ~ * { + .transition(opacity); + } + + & button, + & a { + .transition(opacity); + opacity: 0; + + &:focus-visible { + opacity: 1; + } + } + } + [tuiSubtitle] { display: flex; align-items: center; @@ -45,14 +71,9 @@ } &[data-size='s'] { - min-height: calc(var(--tui-height-s) - 0.5rem); - + --t-height: calc(var(--tui-height-s) - 0.5rem); --t-padding: 0.125rem 1rem; - [tuiCellSide] { - max-height: var(--tui-height-s); - } - [tuiTitle] { max-height: 100%; font: var(--tui-font-text-s-2); @@ -77,14 +98,9 @@ } &[data-size='m'] { - min-height: calc(var(--tui-height-m) - 0.75rem); - + --t-height: calc(var(--tui-height-m) - 0.75rem); --t-padding: 0.375rem 1rem; - [tuiCellSide] { - max-height: calc(var(--tui-height-m) - 0.75rem); - } - [tuiTitle] { font: var(--tui-font-text-s-2); gap: 0.125rem; @@ -108,14 +124,9 @@ } &[data-size='l'] { - min-height: calc(var(--tui-height-l) - 1rem); - + --t-height: calc(var(--tui-height-l) - 1rem); --t-padding: 0.5rem 1rem; - [tuiCellSide] { - max-height: calc(var(--tui-height-l) - 1rem); - } - & > *:not(:first-child), & > [tuiCellSide] > *:not(:first-child) { margin-inline-start: 1rem; @@ -129,6 +140,15 @@ } } + &:hover [tuiCellActions] ~ * { + opacity: 0; + } + + &:hover [tuiCellActions] button, + &:hover [tuiCellActions] a { + opacity: 1; + } + [tuiOption] &, tui-primitive-textfield & { padding: 0; diff --git a/projects/experimental/directives/title/title.directive.ts b/projects/experimental/directives/title/title.directive.ts index e16ab2fff036..3c7b97a6e10f 100644 --- a/projects/experimental/directives/title/title.directive.ts +++ b/projects/experimental/directives/title/title.directive.ts @@ -5,8 +5,9 @@ import {TuiSizeL, TuiSizeS} from '@taiga-ui/core'; import {TuiTitleComponent} from './title.component'; @Directive({ - selector: '[tuiTitle], [tuiSubtitle]', + selector: '[tuiTitle]', host: { + tuiTitle: '', '[attr.data-size]': 'size || null', '[attr.data-platform]': 'platform', }, diff --git a/projects/kit/components/data-list-wrapper/data-list-group-wrapper.template.html b/projects/kit/components/data-list-wrapper/data-list-group-wrapper.template.html index 7e00c5ee97eb..066ff48b26fa 100644 --- a/projects/kit/components/data-list-wrapper/data-list-group-wrapper.template.html +++ b/projects/kit/components/data-list-wrapper/data-list-group-wrapper.template.html @@ -16,6 +16,7 @@ tuiOption [disabled]="disabledItemHandler(item)" [value]="item" + (click)="itemClick.emit(item)" > {{ text }} diff --git a/projects/kit/components/data-list-wrapper/data-list-wrapper.template.html b/projects/kit/components/data-list-wrapper/data-list-wrapper.template.html index 25f831f9e3ae..009f05d7e50a 100644 --- a/projects/kit/components/data-list-wrapper/data-list-wrapper.template.html +++ b/projects/kit/components/data-list-wrapper/data-list-wrapper.template.html @@ -12,6 +12,7 @@ tuiOption [disabled]="disabledItemHandler(item)" [value]="item" + (click)="itemClick.emit(item)" > diff --git a/projects/kit/components/data-list-wrapper/data-list-wrapper.ts b/projects/kit/components/data-list-wrapper/data-list-wrapper.ts index e912a474a2bc..ccd091d15358 100644 --- a/projects/kit/components/data-list-wrapper/data-list-wrapper.ts +++ b/projects/kit/components/data-list-wrapper/data-list-wrapper.ts @@ -1,8 +1,10 @@ import { Directive, ElementRef, + EventEmitter, forwardRef, Input, + Output, QueryList, ViewChildren, } from '@angular/core'; @@ -31,6 +33,9 @@ export abstract class AbstractTuiDataListWrapper { @Input() size: TuiSizeL | TuiSizeXS = this.defaultSize; + @Output() + readonly itemClick = new EventEmitter(); + constructor( protected readonly itemsHandlers: TuiItemsHandlers, protected readonly defaultSize: TuiSizeL | TuiSizeXS,