feat(experimental): Header add new component

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

@@ -367,6 +367,14 @@ export const ROUTES: Routes = [
             title: 'Fade',
         },
     },
+    {
+        path: 'experimental/header',
+        loadChildren: async () =>
+            (await import('../experimental/header/header.module')).ExampleTuiHeaderModule,
+        data: {
+            title: 'Header',
+        },
+    },
     {
         path: 'experimental/icon',
         loadChildren: async () =>

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

@@ -936,6 +936,12 @@ export const pages: TuiDocPages = [
         keywords: 'overflow, ellipsis, gradient, clamp, line',
         route: '/experimental/fade',
     },
+    {
+        section: 'Experimental',
+        title: 'Header',
+        keywords: 'header, заголовок, item',
+        route: '/experimental/header',
+    },
     {
         section: 'Experimental',
         title: 'Icon',

projects/demo/src/modules/experimental/header/examples/1/index.html

@@ -0,0 +1,18 @@
+<div
+    *ngFor="let size of sizes"
+    [tuiHeader]="size"
+>
+    <div tuiTitle>
+        Title
+        <div tuiSubtitle>Subtitle</div>
+    </div>
+
+    <div tuiAccessories>
+        <tui-tooltip content="what?"></tui-tooltip>
+        <input
+            tuiToggle
+            type="checkbox"
+            [ngModel]="true"
+        />
+    </div>
+</div>

projects/demo/src/modules/experimental/header/examples/1/index.less

@@ -0,0 +1,5 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}

projects/demo/src/modules/experimental/header/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';
+
+@Component({
+    selector: 'tui-header-example-1',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiHeaderExample1 {
+    readonly sizes = ['xxl', 'xl', 'l', 'm', 's', 'xs', 'xxs'] as const;
+}

projects/demo/src/modules/experimental/header/examples/2/index.html

@@ -0,0 +1,60 @@
+<div tuiHeader="m">
+    <div tuiTitle>
+        <div tuiCaption>Opensource</div>
+        Taiga UI
+        <div tuiSubtitle>Component library</div>
+    </div>
+
+    <div tuiAccessories>
+        <tui-badge-notification size="m">1</tui-badge-notification>
+        <tui-tooltip content="Angular kit"></tui-tooltip>
+        <tui-avatar
+            appearance="accent"
+            src="tuiIconStar"
+        ></tui-avatar>
+    </div>
+
+    <p tuiDescription>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad aliquam asperiores atque autem
+        consequatur cumque cupiditate delectus doloremque doloribus ea earum eius eos error esse est eum eveniet
+    </p>
+</div>
+
+<div tuiHeader="m">
+    <div tuiTitle>
+        Maskito
+        <div tuiSubtitle>
+            Awesome
+            <span [tuiSensitive]="true">one</span>
+        </div>
+    </div>
+
+    <div tuiAccessories>
+        <tui-badge-notification size="m">1</tui-badge-notification>
+        <tui-tooltip content="Mask it"></tui-tooltip>
+        <a
+            href="https://maskito.dev/"
+            rel="noreferrer"
+            target="_blank"
+            tuiButton
+        >
+            Support
+        </a>
+    </div>
+
+    <p tuiDescription>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad aliquam asperiores atque autem
+        consequatur cumque cupiditate delectus doloremque doloribus ea earum eius eos error esse est eum eveniet
+    </p>
+</div>
+
+<div tuiHeader="m">
+    <div tuiTitle>
+        Polymorpheus
+        <div tuiSubtitle>The power of dreams</div>
+    </div>
+
+    <div tuiAccessories>
+        <tui-badge>Free tier</tui-badge>
+    </div>
+</div>

projects/demo/src/modules/experimental/header/examples/2/index.less

@@ -0,0 +1,5 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+}

projects/demo/src/modules/experimental/header/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-header-example-2',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiHeaderExample2 {}

projects/demo/src/modules/experimental/header/examples/3/index.html

@@ -0,0 +1,12 @@
+<div tuiHeader="m">
+    <div tuiTitle>
+        <span class="interactive-title">
+            Title
+            <tui-icon icon="tuiIconChevronRight"></tui-icon>
+        </span>
+
+        <div tuiSubtitle>Subtitle</div>
+    </div>
+
+    <div tuiDescription>Description</div>
+</div>

projects/demo/src/modules/experimental/header/examples/3/index.less

@@ -0,0 +1,19 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+.interactive-title {
+    .transition(color);
+
+    cursor: pointer;
+
+    & > tui-icon {
+        .transition(transform);
+    }
+}
+
+.interactive-title:hover {
+    color: var(--tui-link);
+
+    & > tui-icon {
+        transform: translate(0.25rem);
+    }
+}

projects/demo/src/modules/experimental/header/examples/3/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-header-example-3',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiHeaderExample3 {}

projects/demo/src/modules/experimental/header/examples/import/import-module.md

@@ -0,0 +1,13 @@
+```ts
+import {NgModule} from '@angular/core';
+import {TuiHeaderModule} from '@taiga-ui/experimental';
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiHeaderModule,
+  ],
+})
+export class MyModule {}
+```

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

@@ -0,0 +1,11 @@
+```html
+<div tuiHeader>
+  <div tuiTitle>
+    Title
+    <div tuiSubtitle>Subtitle</div>
+  </div>
+
+  <div tuiAccessories>Accessories</div>
+  <div tuiDescription>Description</div>
+</div>
+```

projects/demo/src/modules/experimental/header/header.component.ts

@@ -0,0 +1,38 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {
+    TuiDocExample,
+    tuiDocExampleOptionsProvider,
+    TuiRawLoaderContent,
+} from '@taiga-ui/addon-doc';
+
+@Component({
+    selector: 'example-header',
+    templateUrl: './header.template.html',
+    styleUrls: ['./header.styles.less'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection,
+    providers: [tuiDocExampleOptionsProvider({fullsize: true})],
+})
+export class ExampleTuiCellComponent {
+    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'),
+    };
+
+    readonly example2: TuiDocExample = {
+        HTML: import('./examples/2/index.html?raw'),
+    };
+
+    readonly example3: TuiDocExample = {
+        HTML: import('./examples/2/index.html?raw'),
+        LESS: import('./examples/2/index.less?raw'),
+    };
+}

projects/demo/src/modules/experimental/header/header.module.ts

@@ -0,0 +1,56 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {tuiGetDocModules} from '@taiga-ui/addon-doc';
+import {
+    TuiNotificationModule,
+    TuiTextfieldControllerModule,
+    TuiTooltipModule,
+} from '@taiga-ui/core';
+import {
+    TuiAvatarModule,
+    TuiBadgeModule,
+    TuiBadgeNotificationModule,
+    TuiButtonModule,
+    TuiHeaderModule,
+    TuiIconModule,
+    TuiSensitiveModule,
+    TuiTitleModule,
+    TuiToggleModule,
+} from '@taiga-ui/experimental';
+import {TuiDataListWrapperModule, TuiSelectModule} from '@taiga-ui/kit';
+
+import {TuiHeaderExample1} from './examples/1';
+import {TuiHeaderExample2} from './examples/2';
+import {TuiHeaderExample3} from './examples/3';
+import {ExampleTuiCellComponent} from './header.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        TuiBadgeModule,
+        TuiBadgeNotificationModule,
+        TuiToggleModule,
+        TuiTooltipModule,
+        TuiHeaderModule,
+        TuiTitleModule,
+        TuiIconModule,
+        TuiSensitiveModule,
+        TuiSelectModule,
+        TuiDataListWrapperModule,
+        TuiTextfieldControllerModule,
+        TuiButtonModule,
+        tuiGetDocModules(ExampleTuiCellComponent),
+        TuiNotificationModule,
+        TuiAvatarModule,
+    ],
+    declarations: [
+        ExampleTuiCellComponent,
+        TuiHeaderExample1,
+        TuiHeaderExample2,
+        TuiHeaderExample3,
+    ],
+    exports: [ExampleTuiCellComponent],
+})
+export class ExampleTuiHeaderModule {}

projects/demo/src/modules/experimental/header/header.styles.less

@@ -0,0 +1,5 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+example-header [tuiHeader] {
+    max-width: 30rem;
+}

projects/demo/src/modules/experimental/header/header.template.html

@@ -0,0 +1,59 @@
+<tui-doc-page
+    header="Header"
+    package="EXPERIMENTAL"
+    type="directives"
+>
+    <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>
+
+        <tui-doc-example
+            id="base"
+            heading="Sizes"
+            [content]="example1"
+        >
+            <tui-header-example-1></tui-header-example-1>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="accessories"
+            heading="Accessories"
+            [content]="example2"
+        >
+            <tui-header-example-2></tui-header-example-2>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="interactive"
+            heading="Interactive"
+            [content]="example3"
+        >
+            <tui-header-example-3></tui-header-example-3>
+        </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>