feat(experimental): BlockDetails add new component

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 () =>

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',

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'),
+    };
+}

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 {}

projects/demo/src/modules/experimental/block-details/block-details.template.html

@@ -0,0 +1,53 @@
+<tui-doc-page
+    header="BlockDetails"
+    package="EXPERIMENTAL"
+    type="components"
+>
+    <ng-template pageTab>
+        <tui-notification status="warning">
+            This code is
+            <strong>experimental</strong>
+            and is a subject to change. Expect final solution to be shipped in the next major version
+        </tui-notification>
+
+        <p>Layout component for describing details. For example, transaction details</p>
+
+        <tui-doc-example
+            id="full"
+            heading="Full"
+            [content]="example1"
+        >
+            <tui-block-details-example-1></tui-block-details-example-1>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="customization"
+            heading="Customization"
+            [content]="example2"
+        >
+            <tui-block-details-example-2></tui-block-details-example-2>
+        </tui-doc-example>
+    </ng-template>
+
+    <ng-template pageTab="Setup">
+        <ol class="b-demo-steps">
+            <li>
+                <p>Import module:</p>
+
+                <tui-doc-code
+                    filename="my.module.ts"
+                    [code]="exampleModule"
+                ></tui-doc-code>
+            </li>
+
+            <li>
+                <p>Add to the template:</p>
+
+                <tui-doc-code
+                    filename="my.component.html"
+                    [code]="exampleHtml"
+                ></tui-doc-code>
+            </li>
+        </ol>
+    </ng-template>
+</tui-doc-page>

projects/demo/src/modules/experimental/block-details/examples/1/index.html

@@ -0,0 +1,18 @@
+<div tuiBlockDetails>
+    <tui-avatar
+        src="JW"
+        [size]="isMobile ? 'xl' : 'xxl'"
+    ></tui-avatar>
+    <h2 tuiTitle>
+        John W
+        <div tuiSubtitle>money transfers</div>
+    </h2>
+
+    <span>{{ -1050 | tuiAmount: 'USD' | async }}</span>
+    <span tuiAmountDescription>today</span>
+    <span tuiComment>Birthday gift</span>
+    <div tuiAccessories>
+        <tui-badge appearance="neutral">private</tui-badge>
+        <tui-badge appearance="default">fast</tui-badge>
+    </div>
+</div>

projects/demo/src/modules/experimental/block-details/examples/1/index.less

@@ -0,0 +1,3 @@
+:host {
+    width: 15rem;
+}

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) {}
+}

projects/demo/src/modules/experimental/block-details/examples/2/index.html

@@ -0,0 +1,37 @@
+<div>
+    <div tuiBlockDetails>
+        <tui-avatar
+            src="tuiIconGiftLarge"
+            [size]="isMobile ? 'xl' : 'xxl'"
+        ></tui-avatar>
+        <h2 tuiTitle>
+            Auchan
+            <div tuiSubtitle>grocery &#x2022; MMC 5350</div>
+        </h2>
+
+        <span [style.color]="'var(--tui-positive)'">{{ 0.5 | tuiAmount: 'USD' | async }}</span>
+        <span
+            tuiAmountDescription
+            tuiFade
+        >
+            promotion (long value with fade)
+        </span>
+
+        <tui-badge appearance="neutral">cashback</tui-badge>
+    </div>
+</div>
+
+<div>
+    <div tuiBlockDetails>
+        <tui-avatar
+            src="tuiIconStarLarge"
+            [size]="isMobile ? 'xl' : 'xxl'"
+        ></tui-avatar>
+        <h2 tuiTitle>
+            Uber
+            <div tuiSubtitle>taxi &#x2022; MMC 5550</div>
+        </h2>
+
+        <span [style.color]="'var(--tui-negative)'">{{ -10.5 | tuiAmount: 'USD' | async }}</span>
+    </div>
+</div>

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;
+}

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) {}
+}

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 {}
+```

projects/demo/src/modules/experimental/block-details/examples/import/insert-template.md

@@ -0,0 +1,14 @@
+```html
+<div tuiBlockDetails>
+  <tui-avatar></tui-avatar>
+  <h2 tuiTitle>
+    Title
+    <div tuiSubtitle>Subtitle</div>
+  </h2>
+
+  <span>{{ amount }} | tuiAmount: 'USD' | async }}</span>
+  <span tuiAmountDescription>description</span>
+  <span tuiComment>comment</span>
+  <tui-badge appearance="neutral">Badge</tui-badge>
+</div>
+```

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 {}

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);
+    }
+}

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 {}