feat(kit): Message add component

projects/demo/src/modules/app/app.routes.ts

@@ -144,6 +144,11 @@ export const ROUTES: Routes = [
         loadComponent: async () => import('../components/chip'),
         title: 'Chip',
     }),
+    route({
+        path: DemoRoute.Message,
+        loadComponent: async () => import('../components/message'),
+        title: 'Message',
+    }),
     route({
         path: DemoRoute.Title,
         title: 'Title',

projects/demo/src/modules/app/demo-routes.ts

@@ -26,6 +26,7 @@ export const DemoRoute = {
     Appearances: '/appearances',
     FluidTypography: '/directives/fluid-typography',
     Chip: '/components/chip',
+    Message: '/components/message',
     Title: '/components/title',
     CardMedium: '/layout/card-medium',
     CardLarge: '/layout/card-large',

projects/demo/src/modules/app/pages.ts

@@ -946,6 +946,13 @@ export const pages: DocRoutePages = [
         route: DemoRoute.Chip,
         meta: {},
     },
+    {
+        section: 'Components',
+        title: 'Message',
+        keywords: 'message, sms, сообщение, смс',
+        route: DemoRoute.Message,
+        meta: {},
+    },
     {
         section: 'Components',
         title: 'Comment',

projects/demo/src/modules/components/message/examples/1/index.html

@@ -0,0 +1,7 @@
+<span tuiMessage>Incoming message</span>
+<span
+    appearance="accent"
+    tuiMessage
+>
+    Outgoing message
+</span>

projects/demo/src/modules/components/message/examples/1/index.less

@@ -0,0 +1,4 @@
+:host {
+    display: flex;
+    gap: 1rem;
+}

projects/demo/src/modules/components/message/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 {TuiMessage} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [TuiMessage],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export default class Example {}

projects/demo/src/modules/components/message/examples/2/index.html

@@ -0,0 +1,14 @@
+<span class="container left">
+    <span tuiMessage>
+        <span>I'm defaulted 🤘</span>
+    </span>
+</span>
+
+<span class="container right">
+    <span
+        appearance="custom"
+        tuiMessage
+    >
+        <span>And I'm colored 🤘🏿</span>
+    </span>
+</span>

projects/demo/src/modules/components/message/examples/2/index.less

@@ -0,0 +1,25 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+:host {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+}
+
+.container {
+    display: flex;
+    inline-size: 100%;
+}
+
+.left {
+    justify-content: flex-start;
+}
+
+.right {
+    justify-content: flex-end;
+}
+
+[tuiAppearance][data-appearance='custom'] {
+    background: var(--Brand-Pro, rgba(175, 242, 24, 1));
+}

projects/demo/src/modules/components/message/examples/2/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 {TuiFade, TuiMessage} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [TuiMessage, TuiFade],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export default class Example {}

projects/demo/src/modules/components/message/examples/3/index.html

@@ -0,0 +1,10 @@
+<span tuiMessage>
+    All relevant guides in this&nbsp;
+    <a
+        href="#"
+        tuiLink
+    >
+        project
+    </a>
+    &nbsp;with a lot of examples
+</span>

projects/demo/src/modules/components/message/examples/3/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 {TuiLink} from '@taiga-ui/core';
+import {TuiMessage} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [TuiMessage, TuiLink],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export default class Example {}

projects/demo/src/modules/components/message/examples/4/index.html

@@ -0,0 +1,37 @@
+<h3>Fade</h3>
+
+<span class="container left">
+    <span
+        tuiMessage
+        class="fade"
+    >
+        <span tuiFade>Left Comment with very long content</span>
+    </span>
+</span>
+
+<span class="container right">
+    <span
+        appearance="accent"
+        tuiMessage
+        class="fade"
+    >
+        <span tuiFade>Right Comment with very long content</span>
+    </span>
+</span>
+
+<h3>Multiline</h3>
+
+<span class="container left">
+    <span tuiMessage>
+        <div class="multiline">Very long content that goes on the second line</div>
+    </span>
+</span>
+
+<span class="container right">
+    <span
+        appearance="accent"
+        tuiMessage
+    >
+        <div class="multiline">Very long content that goes on the second line</div>
+    </span>
+</span>

projects/demo/src/modules/components/message/examples/4/index.less

@@ -0,0 +1,39 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+:host {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+}
+
+.container {
+    display: flex;
+    inline-size: 100%;
+}
+
+.left {
+    justify-content: flex-start;
+
+    > [tuiMessage] {
+        margin-inline-start: 1rem;
+        margin-inline-end: 2rem;
+    }
+}
+
+.right {
+    justify-content: flex-end;
+
+    > [tuiMessage] {
+        margin-inline-start: 2rem;
+        margin-inline-end: 1rem;
+    }
+}
+
+.fade {
+    max-inline-size: 11rem;
+}
+
+.multiline {
+    white-space: initial;
+}

projects/demo/src/modules/components/message/examples/4/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 {TuiFade, TuiMessage} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [TuiMessage, TuiFade],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export default class Example {}

projects/demo/src/modules/components/message/examples/5/index.html

@@ -0,0 +1,50 @@
+<div tuiCell>
+    <tui-avatar
+        tuiAccessories
+        [src]="'https://avatars.githubusercontent.com/u/11832552' | tuiFallbackSrc: '@tui.user' | async"
+    />
+    <div tuiTitle>
+        <strong>John A.</strong>
+        <div tuiSubtitle>USD</div>
+        <span tuiMessage>Don't deny yourself anything</span>
+    </div>
+    <div
+        tuiAccessories
+        tuiTitle
+        [style.white-space]="'nowrap'"
+        [style.width]="0"
+    >
+        + $123 456
+        <div tuiSubtitle>June 2</div>
+    </div>
+</div>
+
+<div tuiCell>
+    <tui-avatar
+        tuiAccessories
+        [src]="'https://avatars.githubusercontent.com/u/87331898' | tuiFallbackSrc: '@tui.user' | async"
+    />
+    <div
+        tuiTitle
+        [style.align-self]="'stretch'"
+    >
+        <strong>Todd G.</strong>
+        <div tuiSubtitle>USD</div>
+    </div>
+    <div
+        tuiAccessories
+        tuiTitle
+        [style.max-block-size.%]="100"
+        [style.white-space]="'nowrap'"
+        [style.width]="0"
+    >
+        - $10 000
+        <div tuiSubtitle>September 6</div>
+        <span
+            appearance="accent"
+            tuiMessage
+        >
+            For game
+        </span>
+    </div>
+</div>

projects/demo/src/modules/components/message/examples/5/index.less

@@ -0,0 +1,9 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+[tuiCell] {
+    max-inline-size: 25rem;
+}

projects/demo/src/modules/components/message/examples/5/index.ts

@@ -0,0 +1,34 @@
+import {AsyncPipe} from '@angular/common';
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiFallbackSrcPipe, TuiIcon, TuiTitle} from '@taiga-ui/core';
+import {
+    TuiAvatar,
+    TuiBadge,
+    TuiBadgeNotification,
+    TuiFade,
+    TuiMessage,
+} from '@taiga-ui/kit';
+import {TuiCell} from '@taiga-ui/layout';
+
+@Component({
+    standalone: true,
+    imports: [
+        AsyncPipe,
+        TuiAvatar,
+        TuiBadge,
+        TuiBadgeNotification,
+        TuiCell,
+        TuiFade,
+        TuiIcon,
+        TuiTitle,
+        TuiMessage,
+        TuiFallbackSrcPipe,
+    ],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export default class Example {}

projects/demo/src/modules/components/message/examples/import/import.md

@@ -0,0 +1,13 @@
+```ts
+import {Component} from '@angular/core';
+import {TuiMessage} from '@taiga-ui/kit';
+// ...
+
+@Component({
+  imports: [
+    // ...
+    TuiMessage,
+  ],
+})
+export class Example {}
+```

projects/demo/src/modules/components/message/examples/import/template.md

@@ -0,0 +1,3 @@
+```html
+<div tuiMessage>{{ value }}</tui-chip>
+```

projects/demo/src/modules/components/message/index.html

@@ -0,0 +1,19 @@
+<tui-doc-page
+    header="Message"
+    package="KIT"
+    type="components"
+>
+    <ng-template pageTab>
+        <p>Message component is used to display message block.</p>
+
+        <tui-doc-example
+            *ngFor="let example of examples; let index = index"
+            [component]="index + 1 | tuiComponent"
+            [content]="index + 1 | tuiExample"
+            [heading]="example"
+            [id]="example | tuiKebab"
+        />
+    </ng-template>
+
+    <tui-setup *pageTab="'Setup'" />
+</tui-doc-page>

projects/demo/src/modules/components/message/index.ts

@@ -0,0 +1,20 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemo} from '@demo/utils';
+
+@Component({
+    standalone: true,
+    selector: 'example-message',
+    imports: [TuiDemo],
+    templateUrl: './index.html',
+    changeDetection,
+})
+export default class Example {
+    protected readonly examples = [
+        'Basic',
+        'Custom color',
+        'With link',
+        'Chat messages',
+        'Inside cells',
+    ];
+}