diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts index 947ee4a2ead3..7028eb47384e 100644 --- a/projects/demo/src/modules/app/app.routes.ts +++ b/projects/demo/src/modules/app/app.routes.ts @@ -256,6 +256,12 @@ export const ROUTES: Routes = [ title: 'Button ', }, }, + route({ + path: 'layout/block-details', + loadComponent: async () => + import('../components/block-details/block-details.component'), + title: 'BlockDetails', + }), { path: 'experimental/button-vertical', loadChildren: async () => @@ -291,6 +297,11 @@ export const ROUTES: Routes = [ title: 'Cell', }, }, + route({ + path: 'components/comment', + loadComponent: async () => import('../directives/comment/comment.component'), + 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..844c5590dc9b --- /dev/null +++ b/projects/demo/src/modules/components/block-details/block-details.component.ts @@ -0,0 +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 default class ExampleTuiBlockDetailsComponent { + protected readonly import: TuiRawLoaderContent = import( + './examples/import/import-module.md?raw' + ); + + protected readonly template: TuiRawLoaderContent = import( + './examples/import/insert-template.md?raw' + ); +} 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..82e2f08e6520 --- /dev/null +++ b/projects/demo/src/modules/components/block-details/block-details.template.html @@ -0,0 +1,32 @@ + + +

Layout directive for describing details. For example, transaction details

+ + + + + + + + + + + + + + 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..ac5bf6bae97d --- /dev/null +++ b/projects/demo/src/modules/components/block-details/examples/1/index.ts @@ -0,0 +1,27 @@ +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, +}) +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..2febf1832960 --- /dev/null +++ b/projects/demo/src/modules/components/block-details/examples/2/index.ts @@ -0,0 +1,28 @@ +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, 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, + 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..bc81da6589b5 --- /dev/null +++ b/projects/demo/src/modules/components/block-details/examples/import/import-module.md @@ -0,0 +1,14 @@ +```ts +import {NgModule} from '@angular/core'; +import {TuiBlockDetailsDirective} from '@taiga-ui/layout'; +// ... + +@Component({ + standalone: true, + imports: [ + // ... + TuiBlockDetailsDirective, + ], +}) +export class MyComponent {} +``` 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..0744a124251b --- /dev/null +++ b/projects/demo/src/modules/directives/comment/comment.component.ts @@ -0,0 +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 default class ExampleTuiCommentComponent { + protected readonly import: TuiRawLoaderContent = import( + './examples/import/import-module.md?raw' + ); + + protected readonly template: TuiRawLoaderContent = import( + './examples/import/insert-template.md?raw' + ); +} 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..2dc2fbe4bf19 --- /dev/null +++ b/projects/demo/src/modules/directives/comment/comment.template.html @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + 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..ff1b757cd56c --- /dev/null +++ b/projects/demo/src/modules/directives/comment/examples/1/index.ts @@ -0,0 +1,14 @@ +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, +}) +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..19046d35d190 --- /dev/null +++ b/projects/demo/src/modules/directives/comment/examples/2/index.ts @@ -0,0 +1,15 @@ +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, + 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..6fab012c5e99 --- /dev/null +++ b/projects/demo/src/modules/directives/comment/examples/import/import-module.md @@ -0,0 +1,14 @@ +```ts +import {NgModule} from '@angular/core'; +import {TuiCommentDirective} from '@taiga-ui/kit'; +// ... + +@Component({ + standalone: true, + imports: [ + // ... + TuiCommentDirective, + ], +}) +export class MyComponent {} +``` 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..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', 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..6f7e107054d5 --- /dev/null +++ b/projects/layout/directives/block-details/block-details.style.less @@ -0,0 +1,48 @@ +[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';