From bb12cb088169ef769d83314f1516d1394987699b Mon Sep 17 00:00:00 2001 From: Vladimir Potekhin Date: Fri, 15 Mar 2024 11:56:06 +0300 Subject: [PATCH 1/4] feat(layout): `BlockDetails`, `Comment` add new components --- projects/demo/src/modules/app/app.routes.ts | 18 +++++++ projects/demo/src/modules/app/pages.ts | 12 +++++ .../block-details/block-details.component.ts | 18 +++++++ .../block-details/block-details.module.ts | 41 +++++++++++++++ .../block-details/block-details.template.html | 47 +++++++++++++++++ .../block-details/examples/1/index.html | 18 +++++++ .../block-details/examples/1/index.ts | 14 +++++ .../block-details/examples/2/index.html | 33 ++++++++++++ .../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 +++++ .../directives/comment/comment.component.ts | 18 +++++++ .../directives/comment/comment.module.ts | 23 ++++++++ .../directives/comment/comment.template.html | 45 ++++++++++++++++ .../directives/comment/examples/1/index.html | 1 + .../directives/comment/examples/1/index.ts | 11 ++++ .../directives/comment/examples/2/index.html | 17 ++++++ .../directives/comment/examples/2/index.less | 13 +++++ .../directives/comment/examples/2/index.ts | 12 +++++ .../comment/examples/import/import-module.md | 13 +++++ .../examples/import/insert-template.md | 3 ++ projects/demo/used-icons.ts | 3 ++ .../directives/comment/comment.component.ts | 13 +++++ .../directives/comment/comment.directive.ts | 19 +++++++ .../kit/directives/comment/comment.style.less | 52 +++++++++++++++++++ projects/kit/directives/comment/index.ts | 2 + .../kit/directives/comment/ng-package.json | 5 ++ projects/kit/directives/index.ts | 1 + .../block-details/block-details.component.ts | 13 +++++ .../block-details/block-details.directive.ts | 12 +++++ .../block-details/block-details.style.less | 50 ++++++++++++++++++ .../layout/directives/block-details/index.ts | 2 + .../directives/block-details/ng-package.json | 5 ++ projects/layout/directives/index.ts | 1 + projects/layout/directives/ng-package.json | 5 ++ projects/layout/index.ts | 1 + 37 files changed, 595 insertions(+) create mode 100644 projects/demo/src/modules/components/block-details/block-details.component.ts create mode 100644 projects/demo/src/modules/components/block-details/block-details.module.ts create mode 100644 projects/demo/src/modules/components/block-details/block-details.template.html create mode 100644 projects/demo/src/modules/components/block-details/examples/1/index.html create mode 100644 projects/demo/src/modules/components/block-details/examples/1/index.ts create mode 100644 projects/demo/src/modules/components/block-details/examples/2/index.html create mode 100644 projects/demo/src/modules/components/block-details/examples/2/index.less create mode 100644 projects/demo/src/modules/components/block-details/examples/2/index.ts create mode 100644 projects/demo/src/modules/components/block-details/examples/import/import-module.md create mode 100644 projects/demo/src/modules/components/block-details/examples/import/insert-template.md create mode 100644 projects/demo/src/modules/directives/comment/comment.component.ts create mode 100644 projects/demo/src/modules/directives/comment/comment.module.ts create mode 100644 projects/demo/src/modules/directives/comment/comment.template.html create mode 100644 projects/demo/src/modules/directives/comment/examples/1/index.html create mode 100644 projects/demo/src/modules/directives/comment/examples/1/index.ts create mode 100644 projects/demo/src/modules/directives/comment/examples/2/index.html create mode 100644 projects/demo/src/modules/directives/comment/examples/2/index.less create mode 100644 projects/demo/src/modules/directives/comment/examples/2/index.ts create mode 100644 projects/demo/src/modules/directives/comment/examples/import/import-module.md create mode 100644 projects/demo/src/modules/directives/comment/examples/import/insert-template.md create mode 100644 projects/kit/directives/comment/comment.component.ts create mode 100644 projects/kit/directives/comment/comment.directive.ts create mode 100644 projects/kit/directives/comment/comment.style.less create mode 100644 projects/kit/directives/comment/index.ts create mode 100644 projects/kit/directives/comment/ng-package.json create mode 100644 projects/layout/directives/block-details/block-details.component.ts create mode 100644 projects/layout/directives/block-details/block-details.directive.ts create mode 100644 projects/layout/directives/block-details/block-details.style.less create mode 100644 projects/layout/directives/block-details/index.ts create mode 100644 projects/layout/directives/block-details/ng-package.json create mode 100644 projects/layout/directives/index.ts create mode 100644 projects/layout/directives/ng-package.json diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts index 947ee4a2ead3..4a7c31125449 100644 --- a/projects/demo/src/modules/app/app.routes.ts +++ b/projects/demo/src/modules/app/app.routes.ts @@ -256,6 +256,15 @@ export const ROUTES: Routes = [ title: 'Button ', }, }, + { + path: 'layout/block-details', + loadChildren: async () => + (await import('../components/block-details/block-details.module')) + .ExampleTuiBlockDetailsModule, + data: { + title: 'BlockDetails', + }, + }, { path: 'experimental/button-vertical', loadChildren: async () => @@ -291,6 +300,15 @@ export const ROUTES: Routes = [ title: 'Cell', }, }, + { + path: 'components/comment', + loadChildren: async () => + (await import('../directives/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 b9ac82ddce1d..8f43562cc0a5 100644 --- a/projects/demo/src/modules/app/pages.ts +++ b/projects/demo/src/modules/app/pages.ts @@ -866,6 +866,12 @@ export const pages: TuiDocPages = [ }, ], }, + { + section: 'Layout', + title: 'BlockDetails', + keywords: 'details, block, детали, блок', + route: '/layout/block-details', + }, { section: 'Experimental', title: 'Cell', @@ -878,6 +884,12 @@ export const pages: TuiDocPages = [ keywords: 'tag, тэг, badge', route: '/experimental/chip', }, + { + section: 'Components', + title: 'Comment', + keywords: 'comment, tip, коммент', + route: '/components/comment', + }, { section: 'Experimental', title: 'Compass', diff --git a/projects/demo/src/modules/components/block-details/block-details.component.ts b/projects/demo/src/modules/components/block-details/block-details.component.ts new file mode 100644 index 000000000000..6fe3949e3226 --- /dev/null +++ b/projects/demo/src/modules/components/block-details/block-details.component.ts @@ -0,0 +1,18 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import type {TuiRawLoaderContent} from '@taiga-ui/addon-doc'; + +@Component({ + selector: 'example-block-details', + templateUrl: './block-details.template.html', + changeDetection, +}) +export class ExampleTuiBlockDetailsComponent { + protected readonly exampleModule: TuiRawLoaderContent = import( + './examples/import/import-module.md?raw' + ); + + protected readonly exampleHtml: TuiRawLoaderContent = import( + './examples/import/insert-template.md?raw' + ); +} diff --git a/projects/demo/src/modules/components/block-details/block-details.module.ts b/projects/demo/src/modules/components/block-details/block-details.module.ts new file mode 100644 index 000000000000..10e47b91dfba --- /dev/null +++ b/projects/demo/src/modules/components/block-details/block-details.module.ts @@ -0,0 +1,41 @@ +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {TuiExamplePipe} from '@demo/utils'; +import {TuiAmountPipe} from '@taiga-ui/addon-commerce'; +import {tuiGetDocModules} from '@taiga-ui/addon-doc'; +import {TuiNotificationModule} from '@taiga-ui/core'; +import {TuiTitleModule} from '@taiga-ui/experimental'; +import { + TuiAvatarComponent, + TuiBadgeDirective, + TuiCommentDirective, + TuiFadeDirective, +} from '@taiga-ui/kit'; +import {TuiBlockDetailsDirective} from '@taiga-ui/layout'; + +import {ExampleTuiBlockDetailsComponent} from './block-details.component'; +import {TuiBlockDetailsExample1} from './examples/1'; +import {TuiBlockDetailsExample2} from './examples/2'; + +@NgModule({ + imports: [ + CommonModule, + TuiAvatarComponent, + TuiAmountPipe, + TuiExamplePipe, + TuiBadgeDirective, + TuiTitleModule, + TuiCommentDirective, + TuiBlockDetailsDirective, + TuiFadeDirective, + TuiNotificationModule, + tuiGetDocModules(ExampleTuiBlockDetailsComponent), + ], + declarations: [ + ExampleTuiBlockDetailsComponent, + TuiBlockDetailsExample1, + TuiBlockDetailsExample2, + ], + exports: [ExampleTuiBlockDetailsComponent], +}) +export class ExampleTuiBlockDetailsModule {} diff --git a/projects/demo/src/modules/components/block-details/block-details.template.html b/projects/demo/src/modules/components/block-details/block-details.template.html new file mode 100644 index 000000000000..c4bbd71dcc50 --- /dev/null +++ b/projects/demo/src/modules/components/block-details/block-details.template.html @@ -0,0 +1,47 @@ + + +

Layout directive for describing details. For example, transaction details

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

    Import directive:

    + + +
    2. + +
  2. +

    Add to the template:

    + + +
    3. +
+ + diff --git a/projects/demo/src/modules/components/block-details/examples/1/index.html b/projects/demo/src/modules/components/block-details/examples/1/index.html new file mode 100644 index 000000000000..e08e5aa85e60 --- /dev/null +++ b/projects/demo/src/modules/components/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/components/block-details/examples/1/index.ts b/projects/demo/src/modules/components/block-details/examples/1/index.ts new file mode 100644 index 000000000000..69c43f55e613 --- /dev/null +++ b/projects/demo/src/modules/components/block-details/examples/1/index.ts @@ -0,0 +1,14 @@ +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', + encapsulation, + changeDetection, +}) +export class TuiBlockDetailsExample1 { + protected readonly isMobile = inject(TUI_IS_MOBILE); +} diff --git a/projects/demo/src/modules/components/block-details/examples/2/index.html b/projects/demo/src/modules/components/block-details/examples/2/index.html new file mode 100644 index 000000000000..5d68a93fd66c --- /dev/null +++ b/projects/demo/src/modules/components/block-details/examples/2/index.html @@ -0,0 +1,33 @@ +
+ +

+ 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/components/block-details/examples/2/index.less b/projects/demo/src/modules/components/block-details/examples/2/index.less new file mode 100644 index 000000000000..29f4876015de --- /dev/null +++ b/projects/demo/src/modules/components/block-details/examples/2/index.less @@ -0,0 +1,10 @@ +:host { + display: flex; + flex-direction: column; + gap: 5rem; +} + +[tuiSubtitle] { + white-space: nowrap; + max-width: 11rem; +} diff --git a/projects/demo/src/modules/components/block-details/examples/2/index.ts b/projects/demo/src/modules/components/block-details/examples/2/index.ts new file mode 100644 index 000000000000..3c1bb9d87f05 --- /dev/null +++ b/projects/demo/src/modules/components/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 {tuiAmountOptionsProvider} from '@taiga-ui/addon-commerce'; +import {TUI_IS_MOBILE} from '@taiga-ui/cdk'; + +@Component({ + selector: 'tui-block-details-example-2', + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, + providers: [tuiAmountOptionsProvider({sign: 'always'})], +}) +export class TuiBlockDetailsExample2 { + protected readonly isMobile = inject(TUI_IS_MOBILE); +} diff --git a/projects/demo/src/modules/components/block-details/examples/import/import-module.md b/projects/demo/src/modules/components/block-details/examples/import/import-module.md new file mode 100644 index 000000000000..0b9a78534052 --- /dev/null +++ b/projects/demo/src/modules/components/block-details/examples/import/import-module.md @@ -0,0 +1,13 @@ +```ts +import {NgModule} from '@angular/core'; +import {TuiBlockDetailsDirective} from '@taiga-ui/layout'; +// ... + +@NgModule({ + imports: [ + // ... + TuiBlockDetailsDirective, + ], +}) +export class MyModule {} +``` diff --git a/projects/demo/src/modules/components/block-details/examples/import/insert-template.md b/projects/demo/src/modules/components/block-details/examples/import/insert-template.md new file mode 100644 index 000000000000..2de33bd2abe3 --- /dev/null +++ b/projects/demo/src/modules/components/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/demo/src/modules/directives/comment/comment.component.ts b/projects/demo/src/modules/directives/comment/comment.component.ts new file mode 100644 index 000000000000..bd87be8e3439 --- /dev/null +++ b/projects/demo/src/modules/directives/comment/comment.component.ts @@ -0,0 +1,18 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import type {TuiRawLoaderContent} from '@taiga-ui/addon-doc'; + +@Component({ + selector: 'example-comment', + templateUrl: './comment.template.html', + changeDetection, +}) +export class ExampleTuiCommentComponent { + protected readonly exampleModule: TuiRawLoaderContent = import( + './examples/import/import-module.md?raw' + ); + + protected readonly exampleHtml: TuiRawLoaderContent = import( + './examples/import/insert-template.md?raw' + ); +} diff --git a/projects/demo/src/modules/directives/comment/comment.module.ts b/projects/demo/src/modules/directives/comment/comment.module.ts new file mode 100644 index 000000000000..01fae70ca8f7 --- /dev/null +++ b/projects/demo/src/modules/directives/comment/comment.module.ts @@ -0,0 +1,23 @@ +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {TuiExamplePipe} from '@demo/utils'; +import {tuiGetDocModules} from '@taiga-ui/addon-doc'; +import {TuiNotificationModule} from '@taiga-ui/core'; +import {TuiCommentDirective} from '@taiga-ui/kit'; + +import {ExampleTuiCommentComponent} from './comment.component'; +import {TuiCommentExample1} from './examples/1'; +import {TuiCommentExample2} from './examples/2'; + +@NgModule({ + imports: [ + CommonModule, + TuiCommentDirective, + TuiNotificationModule, + TuiExamplePipe, + tuiGetDocModules(ExampleTuiCommentComponent), + ], + declarations: [ExampleTuiCommentComponent, TuiCommentExample1, TuiCommentExample2], + exports: [ExampleTuiCommentComponent], +}) +export class ExampleTuiCommentModule {} diff --git a/projects/demo/src/modules/directives/comment/comment.template.html b/projects/demo/src/modules/directives/comment/comment.template.html new file mode 100644 index 000000000000..0ac92f7bc86a --- /dev/null +++ b/projects/demo/src/modules/directives/comment/comment.template.html @@ -0,0 +1,45 @@ + + + + + + + + + + + + +
    +
  1. +

    Import module:

    + + +
    2. + +
  2. +

    Add to the template:

    + + +
    3. +
+ + diff --git a/projects/demo/src/modules/directives/comment/examples/1/index.html b/projects/demo/src/modules/directives/comment/examples/1/index.html new file mode 100644 index 000000000000..a166aada1bea --- /dev/null +++ b/projects/demo/src/modules/directives/comment/examples/1/index.html @@ -0,0 +1 @@ +Birthday gift diff --git a/projects/demo/src/modules/directives/comment/examples/1/index.ts b/projects/demo/src/modules/directives/comment/examples/1/index.ts new file mode 100644 index 000000000000..c42237d3523b --- /dev/null +++ b/projects/demo/src/modules/directives/comment/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-comment-example-1', + templateUrl: './index.html', + encapsulation, + changeDetection, +}) +export class TuiCommentExample1 {} diff --git a/projects/demo/src/modules/directives/comment/examples/2/index.html b/projects/demo/src/modules/directives/comment/examples/2/index.html new file mode 100644 index 000000000000..882669f589c5 --- /dev/null +++ b/projects/demo/src/modules/directives/comment/examples/2/index.html @@ -0,0 +1,17 @@ +
Good job
+ +
+ Cashback +
+ +
+ Extra payment +
+ +
Check it out
diff --git a/projects/demo/src/modules/directives/comment/examples/2/index.less b/projects/demo/src/modules/directives/comment/examples/2/index.less new file mode 100644 index 000000000000..ed1ed1fc5c93 --- /dev/null +++ b/projects/demo/src/modules/directives/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/directives/comment/examples/2/index.ts b/projects/demo/src/modules/directives/comment/examples/2/index.ts new file mode 100644 index 000000000000..74848ccb2f64 --- /dev/null +++ b/projects/demo/src/modules/directives/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/directives/comment/examples/import/import-module.md b/projects/demo/src/modules/directives/comment/examples/import/import-module.md new file mode 100644 index 000000000000..5a63031a6cbf --- /dev/null +++ b/projects/demo/src/modules/directives/comment/examples/import/import-module.md @@ -0,0 +1,13 @@ +```ts +import {NgModule} from '@angular/core'; +import {TuiCommentDirective} from '@taiga-ui/experimental'; +// ... + +@NgModule({ + imports: [ + // ... + TuiCommentDirective, + ], +}) +export class MyModule {} +``` diff --git a/projects/demo/src/modules/directives/comment/examples/import/insert-template.md b/projects/demo/src/modules/directives/comment/examples/import/insert-template.md new file mode 100644 index 000000000000..d01a78702e90 --- /dev/null +++ b/projects/demo/src/modules/directives/comment/examples/import/insert-template.md @@ -0,0 +1,3 @@ +```html +
comment
+``` diff --git a/projects/demo/used-icons.ts b/projects/demo/used-icons.ts index 5fd57571cdc1..190ed1e3dfd0 100644 --- a/projects/demo/used-icons.ts +++ b/projects/demo/used-icons.ts @@ -104,6 +104,9 @@ export const TUI_USED_ICONS = [ 'tuiIconFolder', 'tuiIconPlayLarge', 'tuiIconPauseLarge', + 'tuiIconBox', + 'tuiIconLock', + 'tuiIconGiftLarge', 'tuiIconUsers', 'tuiIconClock', 'tuiIconArrowRightCircleLarge', diff --git a/projects/kit/directives/comment/comment.component.ts b/projects/kit/directives/comment/comment.component.ts new file mode 100644 index 000000000000..88c70d45202a --- /dev/null +++ b/projects/kit/directives/comment/comment.component.ts @@ -0,0 +1,13 @@ +import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core'; + +@Component({ + standalone: true, + template: '', + styleUrls: ['./comment.style.less'], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + host: { + class: 'tui-comment-styles', + }, +}) +export class TuiCommentComponent {} diff --git a/projects/kit/directives/comment/comment.directive.ts b/projects/kit/directives/comment/comment.directive.ts new file mode 100644 index 000000000000..5fd212480302 --- /dev/null +++ b/projects/kit/directives/comment/comment.directive.ts @@ -0,0 +1,19 @@ +import {Directive, Input} from '@angular/core'; +import {tuiWithStyles} from '@taiga-ui/cdk'; +import type {TuiHorizontalDirection, TuiVerticalDirection} from '@taiga-ui/core'; + +import {TuiCommentComponent} from './comment.component'; + +@Directive({ + standalone: true, + selector: '[tuiComment]', + host: { + '[attr.data-direction]': 'tuiComment', + }, +}) +export class TuiCommentDirective { + @Input() + public tuiComment: TuiHorizontalDirection | TuiVerticalDirection | '' = 'top'; + + protected readonly nothing = tuiWithStyles(TuiCommentComponent); +} diff --git a/projects/kit/directives/comment/comment.style.less b/projects/kit/directives/comment/comment.style.less new file mode 100644 index 000000000000..26d2752f2ebd --- /dev/null +++ b/projects/kit/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/kit/directives/comment/index.ts b/projects/kit/directives/comment/index.ts new file mode 100644 index 000000000000..0ce918b818e6 --- /dev/null +++ b/projects/kit/directives/comment/index.ts @@ -0,0 +1,2 @@ +export * from './comment.component'; +export * from './comment.directive'; diff --git a/projects/kit/directives/comment/ng-package.json b/projects/kit/directives/comment/ng-package.json new file mode 100644 index 000000000000..bebf62dcb5e5 --- /dev/null +++ b/projects/kit/directives/comment/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} diff --git a/projects/kit/directives/index.ts b/projects/kit/directives/index.ts index 9ae46358330b..b06f19cd8859 100644 --- a/projects/kit/directives/index.ts +++ b/projects/kit/directives/index.ts @@ -1,3 +1,4 @@ +export * from '@taiga-ui/kit/directives/comment'; export * from '@taiga-ui/kit/directives/data-list-dropdown-manager'; export * from '@taiga-ui/kit/directives/fade'; export * from '@taiga-ui/kit/directives/highlight'; diff --git a/projects/layout/directives/block-details/block-details.component.ts b/projects/layout/directives/block-details/block-details.component.ts new file mode 100644 index 000000000000..8b32dea3e7b4 --- /dev/null +++ b/projects/layout/directives/block-details/block-details.component.ts @@ -0,0 +1,13 @@ +import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core'; + +@Component({ + standalone: true, + 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/layout/directives/block-details/block-details.directive.ts b/projects/layout/directives/block-details/block-details.directive.ts new file mode 100644 index 000000000000..1ed71174abdd --- /dev/null +++ b/projects/layout/directives/block-details/block-details.directive.ts @@ -0,0 +1,12 @@ +import {Directive} from '@angular/core'; +import {tuiWithStyles} from '@taiga-ui/cdk'; + +import {TuiBlockDetailsComponent} from './block-details.component'; + +@Directive({ + standalone: true, + selector: '[tuiBlockDetails]', +}) +export class TuiBlockDetailsDirective { + protected readonly nothing = tuiWithStyles(TuiBlockDetailsComponent); +} diff --git a/projects/layout/directives/block-details/block-details.style.less b/projects/layout/directives/block-details/block-details.style.less new file mode 100644 index 000000000000..3c7987d0cfa2 --- /dev/null +++ b/projects/layout/directives/block-details/block-details.style.less @@ -0,0 +1,50 @@ +@import '@taiga-ui/core/styles/taiga-ui-local'; + +[tuiBlockDetails] { + display: flex; + flex-direction: column; + align-items: center; + font: var(--tui-font-heading-3); + min-height: 2rem; + + [tuiTitle] { + text-align: center; + font: var(--tui-font-text-l); + gap: 0; + } + + [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); + } + } + + [tuiComment] { + margin-top: 1.0625rem; + } + + [tuiAccessory] { + display: 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/layout/directives/block-details/index.ts b/projects/layout/directives/block-details/index.ts new file mode 100644 index 000000000000..15d267ce65b5 --- /dev/null +++ b/projects/layout/directives/block-details/index.ts @@ -0,0 +1,2 @@ +export * from './block-details.component'; +export * from './block-details.directive'; diff --git a/projects/layout/directives/block-details/ng-package.json b/projects/layout/directives/block-details/ng-package.json new file mode 100644 index 000000000000..bebf62dcb5e5 --- /dev/null +++ b/projects/layout/directives/block-details/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} diff --git a/projects/layout/directives/index.ts b/projects/layout/directives/index.ts new file mode 100644 index 000000000000..eda7a498f31e --- /dev/null +++ b/projects/layout/directives/index.ts @@ -0,0 +1 @@ +export * from '@taiga-ui/layout/directives/block-details'; diff --git a/projects/layout/directives/ng-package.json b/projects/layout/directives/ng-package.json new file mode 100644 index 000000000000..bebf62dcb5e5 --- /dev/null +++ b/projects/layout/directives/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} diff --git a/projects/layout/index.ts b/projects/layout/index.ts index 098eb56915ec..f5f8a116028d 100644 --- a/projects/layout/index.ts +++ b/projects/layout/index.ts @@ -1 +1,2 @@ export * from '@taiga-ui/layout/components'; +export * from '@taiga-ui/layout/directives'; From d8d499aeb7bab21c06eb687c8623cbee590e0a94 Mon Sep 17 00:00:00 2001 From: taiga-family-bot Date: Fri, 15 Mar 2024 09:04:27 +0000 Subject: [PATCH 2/4] chore: icons have changed [bot] --- projects/demo/used-icons.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/projects/demo/used-icons.ts b/projects/demo/used-icons.ts index 190ed1e3dfd0..b75c8b6e0488 100644 --- a/projects/demo/used-icons.ts +++ b/projects/demo/used-icons.ts @@ -32,6 +32,7 @@ export const TUI_USED_ICONS = [ 'tuiIconLock', 'tuiIconStar', 'tuiIconHeartLarge', + 'tuiIconGiftLarge', 'tuiIconMoreHorizontal', 'tuiIconArrowRight', 'tuiIconEyeOff', @@ -104,9 +105,6 @@ export const TUI_USED_ICONS = [ 'tuiIconFolder', 'tuiIconPlayLarge', 'tuiIconPauseLarge', - 'tuiIconBox', - 'tuiIconLock', - 'tuiIconGiftLarge', 'tuiIconUsers', 'tuiIconClock', 'tuiIconArrowRightCircleLarge', From 054b2b1dec9d3d77ceb0d792e1230697a6f8080c Mon Sep 17 00:00:00 2001 From: Vladimir Potekhin Date: Mon, 18 Mar 2024 10:28:31 +0300 Subject: [PATCH 3/4] chore: fix comments --- projects/demo/src/modules/app/app.routes.ts | 25 ++++------- .../block-details/block-details.component.ts | 19 +++++++-- .../block-details/block-details.module.ts | 41 ------------------- .../block-details/block-details.template.html | 23 ++--------- .../block-details/examples/1/index.ts | 13 ++++++ .../block-details/examples/2/index.ts | 13 +++++- .../examples/import/import-module.md | 5 ++- .../directives/comment/comment.component.ts | 19 +++++++-- .../directives/comment/comment.module.ts | 23 ----------- .../directives/comment/comment.template.html | 23 ++--------- .../directives/comment/examples/1/index.ts | 3 ++ .../directives/comment/examples/2/index.ts | 3 ++ .../comment/examples/import/import-module.md | 5 ++- .../block-details/block-details.style.less | 2 - 14 files changed, 86 insertions(+), 131 deletions(-) delete mode 100644 projects/demo/src/modules/components/block-details/block-details.module.ts delete mode 100644 projects/demo/src/modules/directives/comment/comment.module.ts diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts index 4a7c31125449..7028eb47384e 100644 --- a/projects/demo/src/modules/app/app.routes.ts +++ b/projects/demo/src/modules/app/app.routes.ts @@ -256,15 +256,12 @@ export const ROUTES: Routes = [ title: 'Button ', }, }, - { + route({ path: 'layout/block-details', - loadChildren: async () => - (await import('../components/block-details/block-details.module')) - .ExampleTuiBlockDetailsModule, - data: { - title: 'BlockDetails', - }, - }, + loadComponent: async () => + import('../components/block-details/block-details.component'), + title: 'BlockDetails', + }), { path: 'experimental/button-vertical', loadChildren: async () => @@ -300,15 +297,11 @@ export const ROUTES: Routes = [ title: 'Cell', }, }, - { + route({ path: 'components/comment', - loadChildren: async () => - (await import('../directives/comment/comment.module')) - .ExampleTuiCommentModule, - data: { - title: 'Comment', - }, - }, + loadComponent: async () => import('../directives/comment/comment.component'), + title: 'Comment', + }), { path: 'experimental/compass', loadChildren: async () => diff --git a/projects/demo/src/modules/components/block-details/block-details.component.ts b/projects/demo/src/modules/components/block-details/block-details.component.ts index 6fe3949e3226..844c5590dc9b 100644 --- a/projects/demo/src/modules/components/block-details/block-details.component.ts +++ b/projects/demo/src/modules/components/block-details/block-details.component.ts @@ -1,18 +1,31 @@ import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; +import {TuiExamplePipe, TuiSetupComponent} from '@demo/utils'; import type {TuiRawLoaderContent} from '@taiga-ui/addon-doc'; +import {TuiAddonDocModule} from '@taiga-ui/addon-doc'; + +import {TuiBlockDetailsExample1} from './examples/1'; +import {TuiBlockDetailsExample2} from './examples/2'; @Component({ + standalone: true, selector: 'example-block-details', + imports: [ + TuiExamplePipe, + TuiBlockDetailsExample1, + TuiBlockDetailsExample2, + TuiAddonDocModule, + TuiSetupComponent, + ], templateUrl: './block-details.template.html', changeDetection, }) -export class ExampleTuiBlockDetailsComponent { - protected readonly exampleModule: TuiRawLoaderContent = import( +export default class ExampleTuiBlockDetailsComponent { + protected readonly import: TuiRawLoaderContent = import( './examples/import/import-module.md?raw' ); - protected readonly exampleHtml: TuiRawLoaderContent = import( + protected readonly template: TuiRawLoaderContent = import( './examples/import/insert-template.md?raw' ); } diff --git a/projects/demo/src/modules/components/block-details/block-details.module.ts b/projects/demo/src/modules/components/block-details/block-details.module.ts deleted file mode 100644 index 10e47b91dfba..000000000000 --- a/projects/demo/src/modules/components/block-details/block-details.module.ts +++ /dev/null @@ -1,41 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {TuiExamplePipe} from '@demo/utils'; -import {TuiAmountPipe} from '@taiga-ui/addon-commerce'; -import {tuiGetDocModules} from '@taiga-ui/addon-doc'; -import {TuiNotificationModule} from '@taiga-ui/core'; -import {TuiTitleModule} from '@taiga-ui/experimental'; -import { - TuiAvatarComponent, - TuiBadgeDirective, - TuiCommentDirective, - TuiFadeDirective, -} from '@taiga-ui/kit'; -import {TuiBlockDetailsDirective} from '@taiga-ui/layout'; - -import {ExampleTuiBlockDetailsComponent} from './block-details.component'; -import {TuiBlockDetailsExample1} from './examples/1'; -import {TuiBlockDetailsExample2} from './examples/2'; - -@NgModule({ - imports: [ - CommonModule, - TuiAvatarComponent, - TuiAmountPipe, - TuiExamplePipe, - TuiBadgeDirective, - TuiTitleModule, - TuiCommentDirective, - TuiBlockDetailsDirective, - TuiFadeDirective, - TuiNotificationModule, - tuiGetDocModules(ExampleTuiBlockDetailsComponent), - ], - declarations: [ - ExampleTuiBlockDetailsComponent, - TuiBlockDetailsExample1, - TuiBlockDetailsExample2, - ], - exports: [ExampleTuiBlockDetailsComponent], -}) -export class ExampleTuiBlockDetailsModule {} diff --git a/projects/demo/src/modules/components/block-details/block-details.template.html b/projects/demo/src/modules/components/block-details/block-details.template.html index c4bbd71dcc50..82e2f08e6520 100644 --- a/projects/demo/src/modules/components/block-details/block-details.template.html +++ b/projects/demo/src/modules/components/block-details/block-details.template.html @@ -24,24 +24,9 @@ -
    -
  1. -

    Import directive:

    - - -
    2. - -
  2. -

    Add to the template:

    - - -
    3. -
+ diff --git a/projects/demo/src/modules/components/block-details/examples/1/index.ts b/projects/demo/src/modules/components/block-details/examples/1/index.ts index 69c43f55e613..ac5bf6bae97d 100644 --- a/projects/demo/src/modules/components/block-details/examples/1/index.ts +++ b/projects/demo/src/modules/components/block-details/examples/1/index.ts @@ -1,10 +1,23 @@ +import {AsyncPipe} from '@angular/common'; import {Component, inject} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; +import {TuiAmountPipe} from '@taiga-ui/addon-commerce'; import {TUI_IS_MOBILE} from '@taiga-ui/cdk'; +import {TuiAvatarComponent, TuiBadgeDirective, TuiCommentDirective} from '@taiga-ui/kit'; +import {TuiBlockDetailsDirective} from '@taiga-ui/layout'; @Component({ + standalone: true, selector: 'tui-block-details-example-1', + imports: [ + AsyncPipe, + TuiAvatarComponent, + TuiCommentDirective, + TuiAmountPipe, + TuiBlockDetailsDirective, + TuiBadgeDirective, + ], templateUrl: './index.html', encapsulation, changeDetection, diff --git a/projects/demo/src/modules/components/block-details/examples/2/index.ts b/projects/demo/src/modules/components/block-details/examples/2/index.ts index 3c1bb9d87f05..2febf1832960 100644 --- a/projects/demo/src/modules/components/block-details/examples/2/index.ts +++ b/projects/demo/src/modules/components/block-details/examples/2/index.ts @@ -1,11 +1,22 @@ +import {AsyncPipe} from '@angular/common'; import {Component, inject} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; -import {tuiAmountOptionsProvider} from '@taiga-ui/addon-commerce'; +import {tuiAmountOptionsProvider, TuiAmountPipe} from '@taiga-ui/addon-commerce'; import {TUI_IS_MOBILE} from '@taiga-ui/cdk'; +import {TuiAvatarComponent, TuiBadgeDirective} from '@taiga-ui/kit'; +import {TuiBlockDetailsDirective} from '@taiga-ui/layout'; @Component({ + standalone: true, selector: 'tui-block-details-example-2', + imports: [ + AsyncPipe, + TuiAvatarComponent, + TuiAmountPipe, + TuiBlockDetailsDirective, + TuiBadgeDirective, + ], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, diff --git a/projects/demo/src/modules/components/block-details/examples/import/import-module.md b/projects/demo/src/modules/components/block-details/examples/import/import-module.md index 0b9a78534052..bc81da6589b5 100644 --- a/projects/demo/src/modules/components/block-details/examples/import/import-module.md +++ b/projects/demo/src/modules/components/block-details/examples/import/import-module.md @@ -3,11 +3,12 @@ import {NgModule} from '@angular/core'; import {TuiBlockDetailsDirective} from '@taiga-ui/layout'; // ... -@NgModule({ +@Component({ + standalone: true, imports: [ // ... TuiBlockDetailsDirective, ], }) -export class MyModule {} +export class MyComponent {} ``` diff --git a/projects/demo/src/modules/directives/comment/comment.component.ts b/projects/demo/src/modules/directives/comment/comment.component.ts index bd87be8e3439..0744a124251b 100644 --- a/projects/demo/src/modules/directives/comment/comment.component.ts +++ b/projects/demo/src/modules/directives/comment/comment.component.ts @@ -1,18 +1,31 @@ import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; +import {TuiExamplePipe, TuiSetupComponent} from '@demo/utils'; import type {TuiRawLoaderContent} from '@taiga-ui/addon-doc'; +import {TuiAddonDocModule} from '@taiga-ui/addon-doc'; + +import {TuiCommentExample1} from './examples/1'; +import {TuiCommentExample2} from './examples/2'; @Component({ + standalone: true, selector: 'example-comment', + imports: [ + TuiCommentExample1, + TuiCommentExample2, + TuiExamplePipe, + TuiAddonDocModule, + TuiSetupComponent, + ], templateUrl: './comment.template.html', changeDetection, }) -export class ExampleTuiCommentComponent { - protected readonly exampleModule: TuiRawLoaderContent = import( +export default class ExampleTuiCommentComponent { + protected readonly import: TuiRawLoaderContent = import( './examples/import/import-module.md?raw' ); - protected readonly exampleHtml: TuiRawLoaderContent = import( + protected readonly template: TuiRawLoaderContent = import( './examples/import/insert-template.md?raw' ); } diff --git a/projects/demo/src/modules/directives/comment/comment.module.ts b/projects/demo/src/modules/directives/comment/comment.module.ts deleted file mode 100644 index 01fae70ca8f7..000000000000 --- a/projects/demo/src/modules/directives/comment/comment.module.ts +++ /dev/null @@ -1,23 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {TuiExamplePipe} from '@demo/utils'; -import {tuiGetDocModules} from '@taiga-ui/addon-doc'; -import {TuiNotificationModule} from '@taiga-ui/core'; -import {TuiCommentDirective} from '@taiga-ui/kit'; - -import {ExampleTuiCommentComponent} from './comment.component'; -import {TuiCommentExample1} from './examples/1'; -import {TuiCommentExample2} from './examples/2'; - -@NgModule({ - imports: [ - CommonModule, - TuiCommentDirective, - TuiNotificationModule, - TuiExamplePipe, - tuiGetDocModules(ExampleTuiCommentComponent), - ], - declarations: [ExampleTuiCommentComponent, TuiCommentExample1, TuiCommentExample2], - exports: [ExampleTuiCommentComponent], -}) -export class ExampleTuiCommentModule {} diff --git a/projects/demo/src/modules/directives/comment/comment.template.html b/projects/demo/src/modules/directives/comment/comment.template.html index 0ac92f7bc86a..2dc2fbe4bf19 100644 --- a/projects/demo/src/modules/directives/comment/comment.template.html +++ b/projects/demo/src/modules/directives/comment/comment.template.html @@ -22,24 +22,9 @@ -
    -
  1. -

    Import module:

    - - -
    2. - -
  2. -

    Add to the template:

    - - -
    3. -
+ diff --git a/projects/demo/src/modules/directives/comment/examples/1/index.ts b/projects/demo/src/modules/directives/comment/examples/1/index.ts index c42237d3523b..ff1b757cd56c 100644 --- a/projects/demo/src/modules/directives/comment/examples/1/index.ts +++ b/projects/demo/src/modules/directives/comment/examples/1/index.ts @@ -1,9 +1,12 @@ import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; +import {TuiCommentDirective} from '@taiga-ui/kit'; @Component({ + standalone: true, selector: 'tui-comment-example-1', + imports: [TuiCommentDirective], templateUrl: './index.html', encapsulation, changeDetection, diff --git a/projects/demo/src/modules/directives/comment/examples/2/index.ts b/projects/demo/src/modules/directives/comment/examples/2/index.ts index 74848ccb2f64..19046d35d190 100644 --- a/projects/demo/src/modules/directives/comment/examples/2/index.ts +++ b/projects/demo/src/modules/directives/comment/examples/2/index.ts @@ -1,9 +1,12 @@ import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; +import {TuiCommentDirective} from '@taiga-ui/kit'; @Component({ + standalone: true, selector: 'tui-comment-example-2', + imports: [TuiCommentDirective], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, diff --git a/projects/demo/src/modules/directives/comment/examples/import/import-module.md b/projects/demo/src/modules/directives/comment/examples/import/import-module.md index 5a63031a6cbf..f683f9bda2ea 100644 --- a/projects/demo/src/modules/directives/comment/examples/import/import-module.md +++ b/projects/demo/src/modules/directives/comment/examples/import/import-module.md @@ -3,11 +3,12 @@ import {NgModule} from '@angular/core'; import {TuiCommentDirective} from '@taiga-ui/experimental'; // ... -@NgModule({ +@Component({ + standalone: true, imports: [ // ... TuiCommentDirective, ], }) -export class MyModule {} +export class MyComponent {} ``` diff --git a/projects/layout/directives/block-details/block-details.style.less b/projects/layout/directives/block-details/block-details.style.less index 3c7987d0cfa2..6f7e107054d5 100644 --- a/projects/layout/directives/block-details/block-details.style.less +++ b/projects/layout/directives/block-details/block-details.style.less @@ -1,5 +1,3 @@ -@import '@taiga-ui/core/styles/taiga-ui-local'; - [tuiBlockDetails] { display: flex; flex-direction: column; From 99d8b9745983ff8d5cac3fcfbd40764bca9797dc Mon Sep 17 00:00:00 2001 From: Vladimir Potekhin Date: Mon, 18 Mar 2024 16:32:41 +0300 Subject: [PATCH 4/4] chore: fix import example --- .../modules/directives/comment/examples/import/import-module.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/demo/src/modules/directives/comment/examples/import/import-module.md b/projects/demo/src/modules/directives/comment/examples/import/import-module.md index f683f9bda2ea..6fab012c5e99 100644 --- a/projects/demo/src/modules/directives/comment/examples/import/import-module.md +++ b/projects/demo/src/modules/directives/comment/examples/import/import-module.md @@ -1,6 +1,6 @@ ```ts import {NgModule} from '@angular/core'; -import {TuiCommentDirective} from '@taiga-ui/experimental'; +import {TuiCommentDirective} from '@taiga-ui/kit'; // ... @Component({