From 005b01589edea3d2ba484d873d90dd352e818df6 Mon Sep 17 00:00:00 2001 From: Vladimir Potekhin Date: Wed, 28 Feb 2024 18:23:58 +0300 Subject: [PATCH 1/5] 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'; From e6032d493204d6af2f4306740386072b04af3d97 Mon Sep 17 00:00:00 2001 From: taiga-family-bot Date: Wed, 28 Feb 2024 15:26:56 +0000 Subject: [PATCH 2/5] 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 e887f5733dfe..3a8f995654dd 100644 --- a/projects/demo/used-icons.ts +++ b/projects/demo/used-icons.ts @@ -99,6 +99,7 @@ export const TUI_USED_ICONS = [ 'tuiIconPauseLarge', 'tuiIconBox', 'tuiIconLock', + 'tuiIconGiftLarge', 'tuiIconUsers', 'tuiIconClock', 'tuiIconArrowRightCircleLarge', From 9987fb806f64db0009ebcc521856477921d1e522 Mon Sep 17 00:00:00 2001 From: taiga-family-bot Date: Wed, 28 Feb 2024 15:31:52 +0000 Subject: [PATCH 3/5] chore: apply changes after linting [bot] --- .../directives/block-details/block-details.style.less | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/projects/experimental/directives/block-details/block-details.style.less b/projects/experimental/directives/block-details/block-details.style.less index 335941818852..1637c8f5c4d3 100644 --- a/projects/experimental/directives/block-details/block-details.style.less +++ b/projects/experimental/directives/block-details/block-details.style.less @@ -53,10 +53,11 @@ [tuiAccessory] { display: flex; flex-gap: 0.5rem; - margin-top: 1.25rem + margin-top: 1.25rem; } - [tuiAccessories],tui-badge:only-of-type { + [tuiAccessories], + tui-badge:only-of-type { margin-top: 1.25rem; } From 1ea82565394afadc69c5eeffaeebb5684327b4d0 Mon Sep 17 00:00:00 2001 From: Vladimir Potekhin Date: Fri, 1 Mar 2024 09:59:24 +0300 Subject: [PATCH 4/5] chore: fix comments --- projects/demo/src/modules/app/app.routes.ts | 9 ++++ projects/demo/src/modules/app/pages.ts | 6 +++ .../block-details/block-details.module.ts | 8 +-- .../block-details/examples/1/index.html | 2 +- .../block-details/examples/2/index.html | 2 +- .../block-details/examples/2/index.less | 4 +- .../experimental/comment/comment.component.ts | 29 +++++++++++ .../experimental/comment/comment.module.ts | 21 ++++++++ .../comment/comment.template.html | 51 ++++++++++++++++++ .../comment/examples/1/index.html | 1 + .../comment/examples/1/index.less | 3 ++ .../experimental/comment/examples/1/index.ts | 12 +++++ .../comment/examples/2/index.html | 17 ++++++ .../comment/examples/2/index.less | 13 +++++ .../experimental/comment/examples/2/index.ts | 12 +++++ .../comment/examples/import/import-module.md | 13 +++++ .../examples/import/insert-template.md | 3 ++ .../block-details/block-details.style.less | 31 ++--------- .../directives/comment/comment.component.ts | 12 +++++ .../directives/comment/comment.directive.ts | 22 ++++++++ .../directives/comment/comment.module.ts | 10 ++++ .../directives/comment/comment.style.less | 52 +++++++++++++++++++ .../experimental/directives/comment/index.ts | 3 ++ .../directives/comment/ng-package.json | 5 ++ projects/experimental/directives/index.ts | 1 + 25 files changed, 307 insertions(+), 35 deletions(-) create mode 100644 projects/demo/src/modules/experimental/comment/comment.component.ts create mode 100644 projects/demo/src/modules/experimental/comment/comment.module.ts create mode 100644 projects/demo/src/modules/experimental/comment/comment.template.html create mode 100644 projects/demo/src/modules/experimental/comment/examples/1/index.html create mode 100644 projects/demo/src/modules/experimental/comment/examples/1/index.less create mode 100644 projects/demo/src/modules/experimental/comment/examples/1/index.ts create mode 100644 projects/demo/src/modules/experimental/comment/examples/2/index.html create mode 100644 projects/demo/src/modules/experimental/comment/examples/2/index.less create mode 100644 projects/demo/src/modules/experimental/comment/examples/2/index.ts create mode 100644 projects/demo/src/modules/experimental/comment/examples/import/import-module.md create mode 100644 projects/demo/src/modules/experimental/comment/examples/import/insert-template.md create mode 100644 projects/experimental/directives/comment/comment.component.ts create mode 100644 projects/experimental/directives/comment/comment.directive.ts create mode 100644 projects/experimental/directives/comment/comment.module.ts create mode 100644 projects/experimental/directives/comment/comment.style.less create mode 100644 projects/experimental/directives/comment/index.ts create mode 100644 projects/experimental/directives/comment/ng-package.json diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts index b76ba682fef1..cfce90ed3f15 100644 --- a/projects/demo/src/modules/app/app.routes.ts +++ b/projects/demo/src/modules/app/app.routes.ts @@ -387,6 +387,15 @@ export const ROUTES: Routes = [ title: 'Cell', }, }, + { + path: 'experimental/comment', + loadChildren: async () => + (await import('../experimental/comment/comment.module')) + .ExampleTuiCommentModule, + data: { + title: 'Comment', + }, + }, { path: 'experimental/compass', loadChildren: async () => diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts index 9bb96885f2d2..49ba7f1292ad 100644 --- a/projects/demo/src/modules/app/pages.ts +++ b/projects/demo/src/modules/app/pages.ts @@ -943,6 +943,12 @@ export const pages: TuiDocPages = [ keywords: 'tag, тэг, badge', route: '/experimental/chip', }, + { + section: 'Experimental', + title: 'Comment', + keywords: 'comment, tip, коммент', + route: '/experimental/comment', + }, { section: 'Experimental', title: 'Compass', 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 index 4133ebc66005..c73061affe4d 100644 --- a/projects/demo/src/modules/experimental/block-details/block-details.module.ts +++ b/projects/demo/src/modules/experimental/block-details/block-details.module.ts @@ -1,13 +1,13 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {RouterModule} from '@angular/router'; -import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc'; +import {tuiGetDocModules} from '@taiga-ui/addon-doc'; import {TuiNotificationModule} from '@taiga-ui/core'; import { TuiAmountPipeModule, TuiAvatarModule, TuiBadgeModule, TuiBlockDetailsModule, + TuiCommentModule, TuiFadeModule, TuiTitleModule, } from '@taiga-ui/experimental'; @@ -19,15 +19,15 @@ import {TuiBlockDetailsExample2} from './examples/2'; @NgModule({ imports: [ CommonModule, - TuiAddonDocModule, TuiAvatarModule, TuiAmountPipeModule, TuiBadgeModule, TuiTitleModule, + TuiCommentModule, TuiBlockDetailsModule, TuiFadeModule, TuiNotificationModule, - RouterModule.forChild(tuiGenerateRoutes(ExampleTuiBlockDetailsComponent)), + tuiGetDocModules(ExampleTuiBlockDetailsComponent), ], declarations: [ ExampleTuiBlockDetailsComponent, 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 index f36b040d6740..e08e5aa85e60 100644 --- a/projects/demo/src/modules/experimental/block-details/examples/1/index.html +++ b/projects/demo/src/modules/experimental/block-details/examples/1/index.html @@ -9,7 +9,7 @@

{{ -1050 | tuiAmount: 'USD' | async }} - today + today Birthday gift
private 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 index c8c4ba346407..14d9750ad520 100644 --- a/projects/demo/src/modules/experimental/block-details/examples/2/index.html +++ b/projects/demo/src/modules/experimental/block-details/examples/2/index.html @@ -11,8 +11,8 @@

{{ 0.5 | tuiAmount: 'USD' | async }} promotion (long value with fade) 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 index 0cd370f6dc0f..29f4876015de 100644 --- a/projects/demo/src/modules/experimental/block-details/examples/2/index.less +++ b/projects/demo/src/modules/experimental/block-details/examples/2/index.less @@ -4,7 +4,7 @@ gap: 5rem; } -[tuiAmountDescription] { +[tuiSubtitle] { white-space: nowrap; - max-width: 7rem; + max-width: 11rem; } diff --git a/projects/demo/src/modules/experimental/comment/comment.component.ts b/projects/demo/src/modules/experimental/comment/comment.component.ts new file mode 100644 index 000000000000..21877493f503 --- /dev/null +++ b/projects/demo/src/modules/experimental/comment/comment.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-comment', + templateUrl: './comment.template.html', + changeDetection, +}) +export class ExampleTuiCommentComponent { + 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/comment/comment.module.ts b/projects/demo/src/modules/experimental/comment/comment.module.ts new file mode 100644 index 000000000000..b26d493e7141 --- /dev/null +++ b/projects/demo/src/modules/experimental/comment/comment.module.ts @@ -0,0 +1,21 @@ +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {tuiGetDocModules} from '@taiga-ui/addon-doc'; +import {TuiNotificationModule} from '@taiga-ui/core'; +import {TuiCommentModule} from '@taiga-ui/experimental'; + +import {ExampleTuiCommentComponent} from './comment.component'; +import {TuiCommentExample1} from './examples/1'; +import {TuiCommentExample2} from './examples/2'; + +@NgModule({ + imports: [ + CommonModule, + TuiCommentModule, + TuiNotificationModule, + tuiGetDocModules(ExampleTuiCommentComponent), + ], + declarations: [ExampleTuiCommentComponent, TuiCommentExample1, TuiCommentExample2], + exports: [ExampleTuiCommentComponent], +}) +export class ExampleTuiCommentModule {} diff --git a/projects/demo/src/modules/experimental/comment/comment.template.html b/projects/demo/src/modules/experimental/comment/comment.template.html new file mode 100644 index 000000000000..fbec836368b0 --- /dev/null +++ b/projects/demo/src/modules/experimental/comment/comment.template.html @@ -0,0 +1,51 @@ + + + + This code is + experimental + and is a subject to change. Expect final solution to be shipped in the next major version + + + + + + + + + + + + +
    +
  1. +

    Import module:

    + + +
    2. + +
  2. +

    Add to the template:

    + + +
    3. +
+ + diff --git a/projects/demo/src/modules/experimental/comment/examples/1/index.html b/projects/demo/src/modules/experimental/comment/examples/1/index.html new file mode 100644 index 000000000000..a166aada1bea --- /dev/null +++ b/projects/demo/src/modules/experimental/comment/examples/1/index.html @@ -0,0 +1 @@ +Birthday gift diff --git a/projects/demo/src/modules/experimental/comment/examples/1/index.less b/projects/demo/src/modules/experimental/comment/examples/1/index.less new file mode 100644 index 000000000000..57dca5a052c0 --- /dev/null +++ b/projects/demo/src/modules/experimental/comment/examples/1/index.less @@ -0,0 +1,3 @@ +:host { + width: 15rem; +} diff --git a/projects/demo/src/modules/experimental/comment/examples/1/index.ts b/projects/demo/src/modules/experimental/comment/examples/1/index.ts new file mode 100644 index 000000000000..765b755034c4 --- /dev/null +++ b/projects/demo/src/modules/experimental/comment/examples/1/index.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; + +@Component({ + selector: 'tui-comment-example-1', + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export class TuiCommentExample1 {} diff --git a/projects/demo/src/modules/experimental/comment/examples/2/index.html b/projects/demo/src/modules/experimental/comment/examples/2/index.html new file mode 100644 index 000000000000..882669f589c5 --- /dev/null +++ b/projects/demo/src/modules/experimental/comment/examples/2/index.html @@ -0,0 +1,17 @@ +
Good job
+ +
+ Cashback +
+ +
+ Extra payment +
+ +
Check it out
diff --git a/projects/demo/src/modules/experimental/comment/examples/2/index.less b/projects/demo/src/modules/experimental/comment/examples/2/index.less new file mode 100644 index 000000000000..ed1ed1fc5c93 --- /dev/null +++ b/projects/demo/src/modules/experimental/comment/examples/2/index.less @@ -0,0 +1,13 @@ +:host { + display: flex; + gap: 1.25rem; + flex-wrap: wrap; +} + +.success { + background: var(--tui-success-fill); +} + +.primary { + background: var(--tui-primary); +} diff --git a/projects/demo/src/modules/experimental/comment/examples/2/index.ts b/projects/demo/src/modules/experimental/comment/examples/2/index.ts new file mode 100644 index 000000000000..74848ccb2f64 --- /dev/null +++ b/projects/demo/src/modules/experimental/comment/examples/2/index.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; + +@Component({ + selector: 'tui-comment-example-2', + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export class TuiCommentExample2 {} diff --git a/projects/demo/src/modules/experimental/comment/examples/import/import-module.md b/projects/demo/src/modules/experimental/comment/examples/import/import-module.md new file mode 100644 index 000000000000..1504eaec2498 --- /dev/null +++ b/projects/demo/src/modules/experimental/comment/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/comment/examples/import/insert-template.md b/projects/demo/src/modules/experimental/comment/examples/import/insert-template.md new file mode 100644 index 000000000000..d01a78702e90 --- /dev/null +++ b/projects/demo/src/modules/experimental/comment/examples/import/insert-template.md @@ -0,0 +1,3 @@ +```html +
comment
+``` diff --git a/projects/experimental/directives/block-details/block-details.style.less b/projects/experimental/directives/block-details/block-details.style.less index 1637c8f5c4d3..71e8aee27afa 100644 --- a/projects/experimental/directives/block-details/block-details.style.less +++ b/projects/experimental/directives/block-details/block-details.style.less @@ -5,51 +5,28 @@ flex-direction: column; align-items: center; font: var(--tui-font-heading-3); - width: 100%; + min-height: 2rem; [tuiTitle] { text-align: center; font: var(--tui-font-text-l); + gap: 0; } - [tuiSubtitle], - [tuiAmountDescription] { + [tuiSubtitle] { font: var(--tui-font-text-m); color: var(--tui-text-02); + margin-top: 0.25rem; :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; diff --git a/projects/experimental/directives/comment/comment.component.ts b/projects/experimental/directives/comment/comment.component.ts new file mode 100644 index 000000000000..ceb8eebd2cf6 --- /dev/null +++ b/projects/experimental/directives/comment/comment.component.ts @@ -0,0 +1,12 @@ +import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core'; + +@Component({ + template: '', + styleUrls: ['./comment.style.less'], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + host: { + class: 'tui-comment-styles', + }, +}) +export class TuiCommentComponent {} diff --git a/projects/experimental/directives/comment/comment.directive.ts b/projects/experimental/directives/comment/comment.directive.ts new file mode 100644 index 000000000000..07615a259e96 --- /dev/null +++ b/projects/experimental/directives/comment/comment.directive.ts @@ -0,0 +1,22 @@ +import {Directive, Inject, Input} from '@angular/core'; +import {TuiDirectiveStylesService} from '@taiga-ui/cdk'; +import {TuiHorizontalDirection, TuiVerticalDirection} from '@taiga-ui/core'; + +import {TuiCommentComponent} from './comment.component'; + +@Directive({ + selector: '[tuiComment]', + host: { + '[attr.data-direction]': 'tuiComment', + }, +}) +export class TuiCommentDirective { + @Input() + tuiComment: TuiHorizontalDirection | TuiVerticalDirection | '' = 'top'; + + constructor( + @Inject(TuiDirectiveStylesService) directiveStyles: TuiDirectiveStylesService, + ) { + directiveStyles.addComponent(TuiCommentComponent); + } +} diff --git a/projects/experimental/directives/comment/comment.module.ts b/projects/experimental/directives/comment/comment.module.ts new file mode 100644 index 000000000000..1ef5c7a8538c --- /dev/null +++ b/projects/experimental/directives/comment/comment.module.ts @@ -0,0 +1,10 @@ +import {NgModule} from '@angular/core'; + +import {TuiCommentComponent} from './comment.component'; +import {TuiCommentDirective} from './comment.directive'; + +@NgModule({ + declarations: [TuiCommentDirective, TuiCommentComponent], + exports: [TuiCommentDirective], +}) +export class TuiCommentModule {} diff --git a/projects/experimental/directives/comment/comment.style.less b/projects/experimental/directives/comment/comment.style.less new file mode 100644 index 000000000000..26d2752f2ebd --- /dev/null +++ b/projects/experimental/directives/comment/comment.style.less @@ -0,0 +1,52 @@ +@import '@taiga-ui/core/styles/taiga-ui-local'; + +[tuiComment] { + position: relative; + display: inline-flex; + 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); + align-items: center; + justify-content: center; + + &:before { + content: ''; + position: absolute; + bottom: 100%; + left: 50%; + width: 1.5625rem; + height: 0.5625rem; + background: inherit; + transform: translate(-50%); + 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; + } + + &[data-direction='bottom'] { + &:before { + top: 100%; + bottom: auto; + transform: translate(-50%) rotate(180deg); + } + } + + &[data-direction='left'] { + &:before { + left: auto; + top: 50%; + right: 100%; + transform: translate(0.785rem, -50%) rotate(-90deg); + } + } + + &[data-direction='right'] { + &:before { + top: 50%; + left: 100%; + transform: translate(-0.785rem, -50%) rotate(90deg); + } + } +} diff --git a/projects/experimental/directives/comment/index.ts b/projects/experimental/directives/comment/index.ts new file mode 100644 index 000000000000..077e20d4f6eb --- /dev/null +++ b/projects/experimental/directives/comment/index.ts @@ -0,0 +1,3 @@ +export * from './comment.component'; +export * from './comment.directive'; +export * from './comment.module'; diff --git a/projects/experimental/directives/comment/ng-package.json b/projects/experimental/directives/comment/ng-package.json new file mode 100644 index 000000000000..bebf62dcb5e5 --- /dev/null +++ b/projects/experimental/directives/comment/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 b3929688a28e..d95b9ac1d091 100644 --- a/projects/experimental/directives/index.ts +++ b/projects/experimental/directives/index.ts @@ -5,6 +5,7 @@ export * from '@taiga-ui/experimental/directives/button-group'; export * from '@taiga-ui/experimental/directives/button-vertical'; export * from '@taiga-ui/experimental/directives/card'; export * from '@taiga-ui/experimental/directives/cell'; +export * from '@taiga-ui/experimental/directives/comment'; export * from '@taiga-ui/experimental/directives/fade'; export * from '@taiga-ui/experimental/directives/header'; export * from '@taiga-ui/experimental/directives/icons'; From 1a3192470175d473cc795069c0830537c8222f97 Mon Sep 17 00:00:00 2001 From: Vladimir Potekhin Date: Thu, 14 Mar 2024 13:08:58 +0300 Subject: [PATCH 5/5] chore: fix comments --- .../block-details/examples/1/index.less | 3 - .../block-details/examples/1/index.ts | 1 - .../block-details/examples/2/index.html | 58 +++++++++---------- .../comment/examples/1/index.less | 3 - .../experimental/comment/examples/1/index.ts | 1 - .../comment/examples/import/import-module.md | 4 +- 6 files changed, 29 insertions(+), 41 deletions(-) delete mode 100644 projects/demo/src/modules/experimental/block-details/examples/1/index.less delete mode 100644 projects/demo/src/modules/experimental/comment/examples/1/index.less 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 deleted file mode 100644 index 57dca5a052c0..000000000000 --- a/projects/demo/src/modules/experimental/block-details/examples/1/index.less +++ /dev/null @@ -1,3 +0,0 @@ -: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 index 1b72d582ae91..cb3c9914aedd 100644 --- a/projects/demo/src/modules/experimental/block-details/examples/1/index.ts +++ b/projects/demo/src/modules/experimental/block-details/examples/1/index.ts @@ -6,7 +6,6 @@ import {TUI_IS_MOBILE} from '@taiga-ui/cdk'; @Component({ selector: 'tui-block-details-example-1', templateUrl: './index.html', - styleUrls: ['./index.less'], encapsulation, changeDetection, }) 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 index 14d9750ad520..5d68a93fd66c 100644 --- a/projects/demo/src/modules/experimental/block-details/examples/2/index.html +++ b/projects/demo/src/modules/experimental/block-details/examples/2/index.html @@ -1,37 +1,33 @@ -
-
- -

- Auchan -
grocery • MMC 5350
-

+
+ +

+ Auchan +
grocery • MMC 5350
+

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

- Uber -
taxi • MMC 5550
-

+
+ +

+ Uber +
taxi • MMC 5550
+

- {{ -10.5 | tuiAmount: 'USD' | async }} -
+ {{ -10.5 | tuiAmount: 'USD' | async }}
diff --git a/projects/demo/src/modules/experimental/comment/examples/1/index.less b/projects/demo/src/modules/experimental/comment/examples/1/index.less deleted file mode 100644 index 57dca5a052c0..000000000000 --- a/projects/demo/src/modules/experimental/comment/examples/1/index.less +++ /dev/null @@ -1,3 +0,0 @@ -:host { - width: 15rem; -} diff --git a/projects/demo/src/modules/experimental/comment/examples/1/index.ts b/projects/demo/src/modules/experimental/comment/examples/1/index.ts index 765b755034c4..c42237d3523b 100644 --- a/projects/demo/src/modules/experimental/comment/examples/1/index.ts +++ b/projects/demo/src/modules/experimental/comment/examples/1/index.ts @@ -5,7 +5,6 @@ import {encapsulation} from '@demo/emulate/encapsulation'; @Component({ selector: 'tui-comment-example-1', templateUrl: './index.html', - styleUrls: ['./index.less'], encapsulation, changeDetection, }) diff --git a/projects/demo/src/modules/experimental/comment/examples/import/import-module.md b/projects/demo/src/modules/experimental/comment/examples/import/import-module.md index 1504eaec2498..89e2951130e6 100644 --- a/projects/demo/src/modules/experimental/comment/examples/import/import-module.md +++ b/projects/demo/src/modules/experimental/comment/examples/import/import-module.md @@ -1,12 +1,12 @@ ```ts import {NgModule} from '@angular/core'; -import {TuiBlockDetailsModule} from '@taiga-ui/experimental'; +import {TuiCommentModule} from '@taiga-ui/experimental'; // ... @NgModule({ imports: [ // ... - TuiBlockDetailsModule, + TuiCommentModule, ], }) export class MyModule {}