From 2503a8ded8cf6f94f47828da9810ba44bf8c5749 Mon Sep 17 00:00:00 2001 From: Vladimir Potekhin Date: Wed, 28 Feb 2024 18:23:58 +0300 Subject: [PATCH] feat(experimental): `BlockDetails` add new component --- projects/demo/src/modules/app/app.routes.ts | 9 +++ projects/demo/src/modules/app/pages.ts | 6 ++ .../block-details/block-details.component.ts | 29 ++++++++ .../block-details/block-details.module.ts | 39 ++++++++++ .../block-details/block-details.template.html | 53 ++++++++++++++ .../block-details/examples/1/index.html | 18 +++++ .../block-details/examples/1/index.less | 3 + .../block-details/examples/1/index.ts | 15 ++++ .../block-details/examples/2/index.html | 37 ++++++++++ .../block-details/examples/2/index.less | 10 +++ .../block-details/examples/2/index.ts | 17 +++++ .../examples/import/import-module.md | 13 ++++ .../examples/import/insert-template.md | 14 ++++ .../block-details/block-details.component.ts | 12 ++++ .../block-details/block-details.directive.ts | 15 ++++ .../block-details/block-details.module.ts | 10 +++ .../block-details/block-details.style.less | 72 +++++++++++++++++++ .../directives/block-details/index.ts | 3 + .../directives/block-details/ng-package.json | 5 ++ projects/experimental/directives/index.ts | 1 + 20 files changed, 381 insertions(+) create mode 100644 projects/demo/src/modules/experimental/block-details/block-details.component.ts create mode 100644 projects/demo/src/modules/experimental/block-details/block-details.module.ts create mode 100644 projects/demo/src/modules/experimental/block-details/block-details.template.html create mode 100644 projects/demo/src/modules/experimental/block-details/examples/1/index.html create mode 100644 projects/demo/src/modules/experimental/block-details/examples/1/index.less create mode 100644 projects/demo/src/modules/experimental/block-details/examples/1/index.ts create mode 100644 projects/demo/src/modules/experimental/block-details/examples/2/index.html create mode 100644 projects/demo/src/modules/experimental/block-details/examples/2/index.less create mode 100644 projects/demo/src/modules/experimental/block-details/examples/2/index.ts create mode 100644 projects/demo/src/modules/experimental/block-details/examples/import/import-module.md create mode 100644 projects/demo/src/modules/experimental/block-details/examples/import/insert-template.md create mode 100644 projects/experimental/directives/block-details/block-details.component.ts create mode 100644 projects/experimental/directives/block-details/block-details.directive.ts create mode 100644 projects/experimental/directives/block-details/block-details.module.ts create mode 100644 projects/experimental/directives/block-details/block-details.style.less create mode 100644 projects/experimental/directives/block-details/index.ts create mode 100644 projects/experimental/directives/block-details/ng-package.json diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts index af79f0ddb32c..b76ba682fef1 100644 --- a/projects/demo/src/modules/app/app.routes.ts +++ b/projects/demo/src/modules/app/app.routes.ts @@ -335,6 +335,15 @@ export const ROUTES: Routes = [ title: 'BadgedContent ', }, }, + { + path: 'experimental/block-details', + loadChildren: async () => + (await import('../experimental/block-details/block-details.module')) + .ExampleTuiBlockDetailsModule, + data: { + title: 'BlockDetails', + }, + }, { path: 'experimental/button', loadChildren: async () => diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts index b0e269a99de5..9bb96885f2d2 100644 --- a/projects/demo/src/modules/app/pages.ts +++ b/projects/demo/src/modules/app/pages.ts @@ -895,6 +895,12 @@ export const pages: TuiDocPages = [ }, ], }, + { + section: 'Experimental', + title: 'BlockDetails', + keywords: 'details, block, детали, блок', + route: '/experimental/block-details', + }, { section: 'Experimental', title: 'Button', diff --git a/projects/demo/src/modules/experimental/block-details/block-details.component.ts b/projects/demo/src/modules/experimental/block-details/block-details.component.ts new file mode 100644 index 000000000000..9af8133c59d7 --- /dev/null +++ b/projects/demo/src/modules/experimental/block-details/block-details.component.ts @@ -0,0 +1,29 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc'; + +@Component({ + selector: 'example-block-details', + templateUrl: './block-details.template.html', + changeDetection, +}) +export class ExampleTuiBlockDetailsComponent { + readonly exampleModule: TuiRawLoaderContent = import( + './examples/import/import-module.md?raw' + ); + + readonly exampleHtml: TuiRawLoaderContent = import( + './examples/import/insert-template.md?raw' + ); + + readonly example1: TuiDocExample = { + HTML: import('./examples/1/index.html?raw'), + 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'), + }; +} diff --git a/projects/demo/src/modules/experimental/block-details/block-details.module.ts b/projects/demo/src/modules/experimental/block-details/block-details.module.ts new file mode 100644 index 000000000000..4133ebc66005 --- /dev/null +++ b/projects/demo/src/modules/experimental/block-details/block-details.module.ts @@ -0,0 +1,39 @@ +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {RouterModule} from '@angular/router'; +import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc'; +import {TuiNotificationModule} from '@taiga-ui/core'; +import { + TuiAmountPipeModule, + TuiAvatarModule, + TuiBadgeModule, + TuiBlockDetailsModule, + TuiFadeModule, + TuiTitleModule, +} from '@taiga-ui/experimental'; + +import {ExampleTuiBlockDetailsComponent} from './block-details.component'; +import {TuiBlockDetailsExample1} from './examples/1'; +import {TuiBlockDetailsExample2} from './examples/2'; + +@NgModule({ + imports: [ + CommonModule, + TuiAddonDocModule, + TuiAvatarModule, + TuiAmountPipeModule, + TuiBadgeModule, + TuiTitleModule, + TuiBlockDetailsModule, + TuiFadeModule, + TuiNotificationModule, + RouterModule.forChild(tuiGenerateRoutes(ExampleTuiBlockDetailsComponent)), + ], + declarations: [ + ExampleTuiBlockDetailsComponent, + TuiBlockDetailsExample1, + TuiBlockDetailsExample2, + ], + exports: [ExampleTuiBlockDetailsComponent], +}) +export class ExampleTuiBlockDetailsModule {} diff --git a/projects/demo/src/modules/experimental/block-details/block-details.template.html b/projects/demo/src/modules/experimental/block-details/block-details.template.html new file mode 100644 index 000000000000..88e128f3c104 --- /dev/null +++ b/projects/demo/src/modules/experimental/block-details/block-details.template.html @@ -0,0 +1,53 @@ + + + + This code is + experimental + and is a subject to change. Expect final solution to be shipped in the next major version + + +

Layout component for describing details. For example, transaction details

+ + + + + + + + + + + +
    +
  1. +

    Import module:

    + + +
    2. + +
  2. +

    Add to the template:

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

+ John W +
money transfers
+

+ + {{ -1050 | tuiAmount: 'USD' | async }} + today + Birthday gift +
+ private + fast +
+
diff --git a/projects/demo/src/modules/experimental/block-details/examples/1/index.less b/projects/demo/src/modules/experimental/block-details/examples/1/index.less new file mode 100644 index 000000000000..57dca5a052c0 --- /dev/null +++ b/projects/demo/src/modules/experimental/block-details/examples/1/index.less @@ -0,0 +1,3 @@ +:host { + width: 15rem; +} diff --git a/projects/demo/src/modules/experimental/block-details/examples/1/index.ts b/projects/demo/src/modules/experimental/block-details/examples/1/index.ts new file mode 100644 index 000000000000..1b72d582ae91 --- /dev/null +++ b/projects/demo/src/modules/experimental/block-details/examples/1/index.ts @@ -0,0 +1,15 @@ +import {Component, Inject} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; +import {TUI_IS_MOBILE} from '@taiga-ui/cdk'; + +@Component({ + selector: 'tui-block-details-example-1', + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export class TuiBlockDetailsExample1 { + constructor(@Inject(TUI_IS_MOBILE) readonly isMobile: boolean) {} +} diff --git a/projects/demo/src/modules/experimental/block-details/examples/2/index.html b/projects/demo/src/modules/experimental/block-details/examples/2/index.html new file mode 100644 index 000000000000..c8c4ba346407 --- /dev/null +++ b/projects/demo/src/modules/experimental/block-details/examples/2/index.html @@ -0,0 +1,37 @@ +
+
+ +

+ Auchan +
grocery • MMC 5350
+

+ + {{ 0.5 | tuiAmount: 'USD' | async }} + + promotion (long value with fade) + + + cashback +
+
+ +
+
+ +

+ Uber +
taxi • MMC 5550
+

+ + {{ -10.5 | tuiAmount: 'USD' | async }} +
+
diff --git a/projects/demo/src/modules/experimental/block-details/examples/2/index.less b/projects/demo/src/modules/experimental/block-details/examples/2/index.less new file mode 100644 index 000000000000..0cd370f6dc0f --- /dev/null +++ b/projects/demo/src/modules/experimental/block-details/examples/2/index.less @@ -0,0 +1,10 @@ +:host { + display: flex; + flex-direction: column; + gap: 5rem; +} + +[tuiAmountDescription] { + white-space: nowrap; + max-width: 7rem; +} diff --git a/projects/demo/src/modules/experimental/block-details/examples/2/index.ts b/projects/demo/src/modules/experimental/block-details/examples/2/index.ts new file mode 100644 index 000000000000..f49f46be8051 --- /dev/null +++ b/projects/demo/src/modules/experimental/block-details/examples/2/index.ts @@ -0,0 +1,17 @@ +import {Component, Inject} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; +import {TUI_IS_MOBILE} from '@taiga-ui/cdk'; +import {tuiAmountOptionsProvider} from '@taiga-ui/experimental'; + +@Component({ + selector: 'tui-block-details-example-2', + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, + providers: [tuiAmountOptionsProvider({sign: 'always'})], +}) +export class TuiBlockDetailsExample2 { + constructor(@Inject(TUI_IS_MOBILE) readonly isMobile: boolean) {} +} diff --git a/projects/demo/src/modules/experimental/block-details/examples/import/import-module.md b/projects/demo/src/modules/experimental/block-details/examples/import/import-module.md new file mode 100644 index 000000000000..1504eaec2498 --- /dev/null +++ b/projects/demo/src/modules/experimental/block-details/examples/import/import-module.md @@ -0,0 +1,13 @@ +```ts +import {NgModule} from '@angular/core'; +import {TuiBlockDetailsModule} from '@taiga-ui/experimental'; +// ... + +@NgModule({ + imports: [ + // ... + TuiBlockDetailsModule, + ], +}) +export class MyModule {} +``` diff --git a/projects/demo/src/modules/experimental/block-details/examples/import/insert-template.md b/projects/demo/src/modules/experimental/block-details/examples/import/insert-template.md new file mode 100644 index 000000000000..2de33bd2abe3 --- /dev/null +++ b/projects/demo/src/modules/experimental/block-details/examples/import/insert-template.md @@ -0,0 +1,14 @@ +```html +
+ +

+ Title +
Subtitle
+

+ + {{ amount }} | tuiAmount: 'USD' | async }} + description + comment + Badge +
+``` diff --git a/projects/experimental/directives/block-details/block-details.component.ts b/projects/experimental/directives/block-details/block-details.component.ts new file mode 100644 index 000000000000..705fca6dab83 --- /dev/null +++ b/projects/experimental/directives/block-details/block-details.component.ts @@ -0,0 +1,12 @@ +import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core'; + +@Component({ + template: '', + styleUrls: ['./block-details.style.less'], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + host: { + class: 'tui-block-details-styles', + }, +}) +export class TuiBlockDetailsComponent {} diff --git a/projects/experimental/directives/block-details/block-details.directive.ts b/projects/experimental/directives/block-details/block-details.directive.ts new file mode 100644 index 000000000000..d00c74fdbabb --- /dev/null +++ b/projects/experimental/directives/block-details/block-details.directive.ts @@ -0,0 +1,15 @@ +import {Directive, Inject} from '@angular/core'; +import {TuiDirectiveStylesService} from '@taiga-ui/cdk'; + +import {TuiBlockDetailsComponent} from './block-details.component'; + +@Directive({ + selector: '[tuiBlockDetails]', +}) +export class TuiBlockDetailsDirective { + constructor( + @Inject(TuiDirectiveStylesService) directiveStyles: TuiDirectiveStylesService, + ) { + directiveStyles.addComponent(TuiBlockDetailsComponent); + } +} diff --git a/projects/experimental/directives/block-details/block-details.module.ts b/projects/experimental/directives/block-details/block-details.module.ts new file mode 100644 index 000000000000..92e7ac7300c5 --- /dev/null +++ b/projects/experimental/directives/block-details/block-details.module.ts @@ -0,0 +1,10 @@ +import {NgModule} from '@angular/core'; + +import {TuiBlockDetailsComponent} from './block-details.component'; +import {TuiBlockDetailsDirective} from './block-details.directive'; + +@NgModule({ + declarations: [TuiBlockDetailsDirective, TuiBlockDetailsComponent], + exports: [TuiBlockDetailsDirective], +}) +export class TuiBlockDetailsModule {} diff --git a/projects/experimental/directives/block-details/block-details.style.less b/projects/experimental/directives/block-details/block-details.style.less new file mode 100644 index 000000000000..335941818852 --- /dev/null +++ b/projects/experimental/directives/block-details/block-details.style.less @@ -0,0 +1,72 @@ +@import '@taiga-ui/core/styles/taiga-ui-local'; + +[tuiBlockDetails] { + display: flex; + flex-direction: column; + align-items: center; + font: var(--tui-font-heading-3); + width: 100%; + + [tuiTitle] { + text-align: center; + font: var(--tui-font-text-l); + } + + [tuiSubtitle], + [tuiAmountDescription] { + font: var(--tui-font-text-m); + color: var(--tui-text-02); + + :host-context(tui-root._mobile) & { + font: var(--tui-font-text-s); + } + } + + [tuiAmountDescription] { + margin-top: 0.25rem; + } + + [tuiComment] { + position: relative; + font: var(--tui-font-text-m); + color: var(--tui-text-01-night); + padding: 0.5rem 0.75rem; + border-radius: 1rem; + line-height: 1rem; + background: var(--tui-accent); + margin-top: 1.0625rem; + } + + [tuiComment]:before { + content: ''; + position: absolute; + top: 0; + left: 50%; + width: 1.5625rem; + height: 0.5625rem; + background: var(--tui-accent); + transform: translate(-50%, -100%); + mask: url("data:image/svg+xml,%3Csvg width='25' height='9' viewBox='0 0 25 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.23309 6.67813L7.56191 3.83178C9.4546 1.5185 10.4009 0.361853 11.5998 0.10488C12.0834 0.00123882 12.5834 0.00123882 13.0669 0.10488C14.2658 0.361853 15.2121 1.5185 17.1048 3.83178L19.4337 6.67813C20.636 8.14771 22.4346 9 24.3334 9H0.333374C2.23217 9 4.0307 8.14772 5.23309 6.67813Z' fill='black'/%3E%3C/svg%3E%0A") + no-repeat; + } + + [tuiAccessory] { + display: flex; + flex-gap: 0.5rem; + margin-top: 1.25rem + } + + [tuiAccessories],tui-badge:only-of-type { + margin-top: 1.25rem; + } + + [tuiAccessories] { + display: flex; + gap: 0.5rem; + } + + tui-avatar, + [tuiTitle] { + margin-bottom: 1rem; + } +} diff --git a/projects/experimental/directives/block-details/index.ts b/projects/experimental/directives/block-details/index.ts new file mode 100644 index 000000000000..470f9b55e088 --- /dev/null +++ b/projects/experimental/directives/block-details/index.ts @@ -0,0 +1,3 @@ +export * from './block-details.component'; +export * from './block-details.directive'; +export * from './block-details.module'; diff --git a/projects/experimental/directives/block-details/ng-package.json b/projects/experimental/directives/block-details/ng-package.json new file mode 100644 index 000000000000..bebf62dcb5e5 --- /dev/null +++ b/projects/experimental/directives/block-details/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} diff --git a/projects/experimental/directives/index.ts b/projects/experimental/directives/index.ts index 7d2856ccfe8b..b3929688a28e 100644 --- a/projects/experimental/directives/index.ts +++ b/projects/experimental/directives/index.ts @@ -1,4 +1,5 @@ export * from '@taiga-ui/experimental/directives/appearance'; +export * from '@taiga-ui/experimental/directives/block-details'; export * from '@taiga-ui/experimental/directives/button-close'; export * from '@taiga-ui/experimental/directives/button-group'; export * from '@taiga-ui/experimental/directives/button-vertical';