From eef8e7d02e212c91e4283459f53da75b0b23ef80 Mon Sep 17 00:00:00 2001 From: Vladimir Potekhin <46284632+vladimirpotekhin@users.noreply.github.com> Date: Mon, 22 Jan 2024 14:20:35 +0300 Subject: [PATCH] feat(experimental): `Header` add new component (#6455) Co-authored-by: taiga-family-bot --- projects/demo/src/modules/app/app.routes.ts | 8 ++ projects/demo/src/modules/app/pages.ts | 6 + .../badge-notification/examples/1/index.html | 6 +- .../badge-notification/examples/2/index.html | 4 +- .../badged-content.template.html | 7 +- .../badged-content/examples/1/index.html | 7 +- .../experimental/cell/examples/4/index.html | 2 +- .../experimental/cell/examples/5/index.html | 14 +-- .../experimental/header/examples/1/index.html | 108 +++++++++++++++++ .../experimental/header/examples/1/index.less | 5 + .../experimental/header/examples/1/index.ts | 12 ++ .../experimental/header/examples/2/index.html | 62 ++++++++++ .../experimental/header/examples/2/index.less | 11 ++ .../experimental/header/examples/2/index.ts | 12 ++ .../experimental/header/examples/3/index.html | 10 ++ .../experimental/header/examples/3/index.less | 19 +++ .../experimental/header/examples/3/index.ts | 12 ++ .../header/examples/import/import-module.md | 13 ++ .../header/examples/import/insert-template.md | 10 ++ .../experimental/header/header.component.ts | 39 ++++++ .../experimental/header/header.module.ts | 56 +++++++++ .../experimental/header/header.styles.less | 5 + .../experimental/header/header.template.html | 60 ++++++++++ .../title/examples/import/insert-template.md | 19 +-- .../experimental/title/title.component.ts | 2 +- .../badge-notification.component.ts | 13 +- .../badge-notification.options.ts | 25 ++++ .../components/badge-notification/index.ts | 1 + .../directives/cell/cell.styles.less | 20 ++-- .../directives/header/header.component.ts | 12 ++ .../directives/header/header.directive.ts | 33 ++++++ .../directives/header/header.module.ts | 10 ++ .../directives/header/header.styles.less | 112 ++++++++++++++++++ .../experimental/directives/header/index.ts | 3 + .../directives/header/ng-package.json | 5 + projects/experimental/directives/index.ts | 1 + 36 files changed, 697 insertions(+), 47 deletions(-) create mode 100644 projects/demo/src/modules/experimental/header/examples/1/index.html create mode 100644 projects/demo/src/modules/experimental/header/examples/1/index.less create mode 100644 projects/demo/src/modules/experimental/header/examples/1/index.ts create mode 100644 projects/demo/src/modules/experimental/header/examples/2/index.html create mode 100644 projects/demo/src/modules/experimental/header/examples/2/index.less create mode 100644 projects/demo/src/modules/experimental/header/examples/2/index.ts create mode 100644 projects/demo/src/modules/experimental/header/examples/3/index.html create mode 100644 projects/demo/src/modules/experimental/header/examples/3/index.less create mode 100644 projects/demo/src/modules/experimental/header/examples/3/index.ts create mode 100644 projects/demo/src/modules/experimental/header/examples/import/import-module.md create mode 100644 projects/demo/src/modules/experimental/header/examples/import/insert-template.md create mode 100644 projects/demo/src/modules/experimental/header/header.component.ts create mode 100644 projects/demo/src/modules/experimental/header/header.module.ts create mode 100644 projects/demo/src/modules/experimental/header/header.styles.less create mode 100644 projects/demo/src/modules/experimental/header/header.template.html create mode 100644 projects/experimental/components/badge-notification/badge-notification.options.ts create mode 100644 projects/experimental/directives/header/header.component.ts create mode 100644 projects/experimental/directives/header/header.directive.ts create mode 100644 projects/experimental/directives/header/header.module.ts create mode 100644 projects/experimental/directives/header/header.styles.less create mode 100644 projects/experimental/directives/header/index.ts create mode 100644 projects/experimental/directives/header/ng-package.json diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts index 15e1a98d151c..8f8f4ee7b97a 100644 --- a/projects/demo/src/modules/app/app.routes.ts +++ b/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 () => diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts index cd8c20157d9f..05c456534d03 100644 --- a/projects/demo/src/modules/app/pages.ts +++ b/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', diff --git a/projects/demo/src/modules/experimental/badge-notification/examples/1/index.html b/projects/demo/src/modules/experimental/badge-notification/examples/1/index.html index ae0065a9b78b..58c4afa5da08 100644 --- a/projects/demo/src/modules/experimental/badge-notification/examples/1/index.html +++ b/projects/demo/src/modules/experimental/badge-notification/examples/1/index.html @@ -1,23 +1,23 @@

Desktop

+ 9 9 - 9 9 9

Android

+ 9 9 - 9 9 9

IOS

+ 9 9 - 9 9 9

diff --git a/projects/demo/src/modules/experimental/badge-notification/examples/2/index.html b/projects/demo/src/modules/experimental/badge-notification/examples/2/index.html index d5dd692804b4..00f3c4f4fc1f 100644 --- a/projects/demo/src/modules/experimental/badge-notification/examples/2/index.html +++ b/projects/demo/src/modules/experimental/badge-notification/examples/2/index.html @@ -1,4 +1,4 @@ -10 -11 +10 +11 12 diff --git a/projects/demo/src/modules/experimental/badged-content/badged-content.template.html b/projects/demo/src/modules/experimental/badged-content/badged-content.template.html index 1ae0f06766da..d17d93572382 100644 --- a/projects/demo/src/modules/experimental/badged-content/badged-content.template.html +++ b/projects/demo/src/modules/experimental/badged-content/badged-content.template.html @@ -48,7 +48,12 @@ - 1 + + 1 + - - 120 - + 120 diff --git a/projects/demo/src/modules/experimental/cell/examples/4/index.html b/projects/demo/src/modules/experimental/cell/examples/4/index.html index 834238f851a4..f7c39e9043b1 100644 --- a/projects/demo/src/modules/experimental/cell/examples/4/index.html +++ b/projects/demo/src/modules/experimental/cell/examples/4/index.html @@ -3,7 +3,7 @@ tuiCell >
Notifications
- 3 + 3
Long title in a cell will wrap to multiple lines and so will the subtitle @@ -10,11 +10,11 @@ [style.display]="'block'" > Use - tuiCellSide + tuiAccessories to keep your side content properly aligned if you have many lines of text
-
+
Alexander @@ -83,7 +83,7 @@
Main account @@ -91,7 +91,7 @@ By default unless arrested
+

+ Title +
Subtitle
+

+ +
+ 1 + +
+
+ +
+

+ Title +
Subtitle
+

+ +
+ 1 + +
+
+ +
+

+ Title +
Subtitle
+

+ +
+ 1 + +
+
+ +
+

+ Title +
Subtitle
+

+ +
+ 1 + +
+
+ +
+
+ Title +
Subtitle
+
+ +
+ 1 + +
+
+ +
+
+ Title +
Subtitle
+
+ +
+ 1 + +
+
+ +
+ + Title +
Subtitle
+ + +
+ 1 + +
+
diff --git a/projects/demo/src/modules/experimental/header/examples/1/index.less b/projects/demo/src/modules/experimental/header/examples/1/index.less new file mode 100644 index 000000000000..dc3140046ad7 --- /dev/null +++ b/projects/demo/src/modules/experimental/header/examples/1/index.less @@ -0,0 +1,5 @@ +:host { + display: flex; + flex-direction: column; + gap: 2rem; +} diff --git a/projects/demo/src/modules/experimental/header/examples/1/index.ts b/projects/demo/src/modules/experimental/header/examples/1/index.ts new file mode 100644 index 000000000000..98f8b9001a2d --- /dev/null +++ b/projects/demo/src/modules/experimental/header/examples/1/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-1', + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export class TuiHeaderExample1 {} diff --git a/projects/demo/src/modules/experimental/header/examples/2/index.html b/projects/demo/src/modules/experimental/header/examples/2/index.html new file mode 100644 index 000000000000..46414f0a7484 --- /dev/null +++ b/projects/demo/src/modules/experimental/header/examples/2/index.html @@ -0,0 +1,62 @@ +
+
+
+
Opensource
+ Taiga UI +
Component library
+
+ +
+ 1 + + +
+
+

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

+
+ +
+
+
+ Maskito +
+ Awesome + one +
+
+ +
+ 1 + + + Support + +
+
+

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

+
+ +
+
+ Polymorpheus +
The power of dreams
+
+ +
+ Free tier +
+
diff --git a/projects/demo/src/modules/experimental/header/examples/2/index.less b/projects/demo/src/modules/experimental/header/examples/2/index.less new file mode 100644 index 000000000000..1970a99525aa --- /dev/null +++ b/projects/demo/src/modules/experimental/header/examples/2/index.less @@ -0,0 +1,11 @@ +:host { + display: flex; + flex-direction: column; + gap: 3rem; +} + +.description { + font: var(--tui-font-text-l); + margin-top: 0.5rem; + max-width: 30rem; +} diff --git a/projects/demo/src/modules/experimental/header/examples/2/index.ts b/projects/demo/src/modules/experimental/header/examples/2/index.ts new file mode 100644 index 000000000000..b20d730fbd7a --- /dev/null +++ b/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 {} diff --git a/projects/demo/src/modules/experimental/header/examples/3/index.html b/projects/demo/src/modules/experimental/header/examples/3/index.html new file mode 100644 index 000000000000..8dd9c506247b --- /dev/null +++ b/projects/demo/src/modules/experimental/header/examples/3/index.html @@ -0,0 +1,10 @@ +
+
+ + Title + + + +
Subtitle
+
+
diff --git a/projects/demo/src/modules/experimental/header/examples/3/index.less b/projects/demo/src/modules/experimental/header/examples/3/index.less new file mode 100644 index 000000000000..908978a13ed2 --- /dev/null +++ b/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); + } + + &:hover { + color: var(--tui-link); + + & > tui-icon { + transform: translate(0.25rem); + } + } +} diff --git a/projects/demo/src/modules/experimental/header/examples/3/index.ts b/projects/demo/src/modules/experimental/header/examples/3/index.ts new file mode 100644 index 000000000000..96924a0f9b2d --- /dev/null +++ b/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 {} diff --git a/projects/demo/src/modules/experimental/header/examples/import/import-module.md b/projects/demo/src/modules/experimental/header/examples/import/import-module.md new file mode 100644 index 000000000000..877290e7d0b8 --- /dev/null +++ b/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 {} +``` diff --git a/projects/demo/src/modules/experimental/header/examples/import/insert-template.md b/projects/demo/src/modules/experimental/header/examples/import/insert-template.md new file mode 100644 index 000000000000..17c00fb1fdc3 --- /dev/null +++ b/projects/demo/src/modules/experimental/header/examples/import/insert-template.md @@ -0,0 +1,10 @@ +```html +
+
+ Title +
Subtitle
+
+ +
Accessories
+
+``` diff --git a/projects/demo/src/modules/experimental/header/header.component.ts b/projects/demo/src/modules/experimental/header/header.component.ts new file mode 100644 index 000000000000..1b3d5dbbab58 --- /dev/null +++ b/projects/demo/src/modules/experimental/header/header.component.ts @@ -0,0 +1,39 @@ +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'), + LESS: import('./examples/2/index.less?raw'), + }; + + readonly example3: TuiDocExample = { + HTML: import('./examples/3/index.html?raw'), + LESS: import('./examples/3/index.less?raw'), + }; +} diff --git a/projects/demo/src/modules/experimental/header/header.module.ts b/projects/demo/src/modules/experimental/header/header.module.ts new file mode 100644 index 000000000000..414c8c10af6d --- /dev/null +++ b/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 {} diff --git a/projects/demo/src/modules/experimental/header/header.styles.less b/projects/demo/src/modules/experimental/header/header.styles.less new file mode 100644 index 000000000000..b3f3eaedafd7 --- /dev/null +++ b/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; +} diff --git a/projects/demo/src/modules/experimental/header/header.template.html b/projects/demo/src/modules/experimental/header/header.template.html new file mode 100644 index 000000000000..4a92c555cdf8 --- /dev/null +++ b/projects/demo/src/modules/experimental/header/header.template.html @@ -0,0 +1,60 @@ + + + + This code is + experimental + and is a subject to change. Expect final solution to be shipped in the next major version + + + + + + + + + + + + + + + + +
    +
  1. +

    Import module:

    + + +
    2. + +
  2. +

    Add to the template:

    + + +
    3. +
+ + diff --git a/projects/demo/src/modules/experimental/title/examples/import/insert-template.md b/projects/demo/src/modules/experimental/title/examples/import/insert-template.md index d490977b31c0..9f05b94ddc45 100644 --- a/projects/demo/src/modules/experimental/title/examples/import/insert-template.md +++ b/projects/demo/src/modules/experimental/title/examples/import/insert-template.md @@ -1,16 +1,7 @@ ```html - - -

Title

- Description - - +

+
Caption
+ I am a title +
I'm a subtitle
+

``` diff --git a/projects/demo/src/modules/experimental/title/title.component.ts b/projects/demo/src/modules/experimental/title/title.component.ts index a71aea710c22..fbfb545386b3 100644 --- a/projects/demo/src/modules/experimental/title/title.component.ts +++ b/projects/demo/src/modules/experimental/title/title.component.ts @@ -18,7 +18,7 @@ export class ExampleTuiTitleComponent { readonly example2: TuiDocExample = { TypeScript: import('./examples/2/index.ts?raw'), - HTML: import('./examples/3/index.html?raw'), + HTML: import('./examples/2/index.html?raw'), }; readonly example3: TuiDocExample = { diff --git a/projects/experimental/components/badge-notification/badge-notification.component.ts b/projects/experimental/components/badge-notification/badge-notification.component.ts index 227b5ddb923b..c6a94d16ecdc 100644 --- a/projects/experimental/components/badge-notification/badge-notification.component.ts +++ b/projects/experimental/components/badge-notification/badge-notification.component.ts @@ -7,6 +7,11 @@ import { TuiSizeXS, } from '@taiga-ui/core'; +import { + TUI_BADGE_NOTIFICATION_OPTIONS, + TuiBadgeNotificationOptions, +} from './badge-notification.options'; + @Component({ selector: 'tui-badge-notification', template: '', @@ -20,7 +25,11 @@ import { }) export class TuiBadgeNotificationComponent { @Input() - size: TuiSizeL | TuiSizeXS = 'l'; + size: TuiSizeL | TuiSizeXS = this.options.size; - constructor(@Inject(TUI_ANIMATION_OPTIONS) readonly animation: TuiAnimationOptions) {} + constructor( + @Inject(TUI_ANIMATION_OPTIONS) readonly animation: TuiAnimationOptions, + @Inject(TUI_BADGE_NOTIFICATION_OPTIONS) + private readonly options: TuiBadgeNotificationOptions, + ) {} } diff --git a/projects/experimental/components/badge-notification/badge-notification.options.ts b/projects/experimental/components/badge-notification/badge-notification.options.ts new file mode 100644 index 000000000000..f487b9a6717f --- /dev/null +++ b/projects/experimental/components/badge-notification/badge-notification.options.ts @@ -0,0 +1,25 @@ +import {Provider} from '@angular/core'; +import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk'; +import {TuiSizeL, TuiSizeXS} from '@taiga-ui/core'; + +export interface TuiBadgeNotificationOptions { + readonly size: TuiSizeL | TuiSizeXS; +} + +export const TUI_BADGE_NOTIFICATION_DEFAULT_OPTIONS: TuiBadgeNotificationOptions = { + size: 'm', +}; + +export const TUI_BADGE_NOTIFICATION_OPTIONS = tuiCreateToken( + TUI_BADGE_NOTIFICATION_DEFAULT_OPTIONS, +); + +export function tuiBadgeNotificationOptionsProvider( + options: Partial, +): Provider { + return tuiProvideOptions( + TUI_BADGE_NOTIFICATION_OPTIONS, + options, + TUI_BADGE_NOTIFICATION_DEFAULT_OPTIONS, + ); +} diff --git a/projects/experimental/components/badge-notification/index.ts b/projects/experimental/components/badge-notification/index.ts index c37d31422b74..ac28c07aec93 100644 --- a/projects/experimental/components/badge-notification/index.ts +++ b/projects/experimental/components/badge-notification/index.ts @@ -1,2 +1,3 @@ export * from './badge-notification.component'; export * from './badge-notification.module'; +export * from './badge-notification.options'; diff --git a/projects/experimental/directives/cell/cell.styles.less b/projects/experimental/directives/cell/cell.styles.less index 6d907bb74c22..798d26b050c2 100644 --- a/projects/experimental/directives/cell/cell.styles.less +++ b/projects/experimental/directives/cell/cell.styles.less @@ -15,7 +15,7 @@ padding: var(--t-padding); min-height: var(--t-height); - [tuiCellSide] { + [tuiAccessories] { position: relative; display: flex; max-height: var(--t-height); @@ -84,14 +84,14 @@ } & > *:not(:first-child), - & > [tuiCellSide] > *:not(:first-child) { + & > [tuiAccessories] > *:not(:first-child) { margin-inline-start: 0.5rem; } & > tui-avatar, & > tui-avatar-stack tui-avatar, - & > [tuiCellSide] tui-avatar, - & > [tuiCellSide] tui-avatar-stack tui-avatar { + & > [tuiAccessories] tui-avatar, + & > [tuiAccessories] tui-avatar-stack tui-avatar { --t-size: 1.5rem; } } @@ -110,14 +110,14 @@ } & > *:not(:first-child), - & > [tuiCellSide] > *:not(:first-child) { + & > [tuiAccessories] > *:not(:first-child) { margin-inline-start: 0.75rem; } & > tui-avatar, & > tui-avatar-stack tui-avatar, - & > [tuiCellSide] tui-avatar, - & > [tuiCellSide] tui-avatar-stack tui-avatar { + & > [tuiAccessories] tui-avatar, + & > [tuiAccessories] tui-avatar-stack tui-avatar { --t-size: 2rem; } } @@ -127,14 +127,14 @@ --t-padding: 0.5rem 1rem; & > *:not(:first-child), - & > [tuiCellSide] > *:not(:first-child) { + & > [tuiAccessories] > *:not(:first-child) { margin-inline-start: 1rem; } & > tui-avatar, & > tui-avatar-stack tui-avatar, - & > [tuiCellSide] tui-avatar, - & > [tuiCellSide] tui-avatar-stack tui-avatar { + & > [tuiAccessories] tui-avatar, + & > [tuiAccessories] tui-avatar-stack tui-avatar { --t-size: 2.5rem; } } diff --git a/projects/experimental/directives/header/header.component.ts b/projects/experimental/directives/header/header.component.ts new file mode 100644 index 000000000000..7af1a8bf72d6 --- /dev/null +++ b/projects/experimental/directives/header/header.component.ts @@ -0,0 +1,12 @@ +import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core'; + +@Component({ + template: '', + styleUrls: ['./header.styles.less'], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + host: { + class: 'tui-header', + }, +}) +export class TuiHeaderComponent {} diff --git a/projects/experimental/directives/header/header.directive.ts b/projects/experimental/directives/header/header.directive.ts new file mode 100644 index 000000000000..4a226af54e89 --- /dev/null +++ b/projects/experimental/directives/header/header.directive.ts @@ -0,0 +1,33 @@ +import {Directive, Inject, Input} from '@angular/core'; +import {TuiDirectiveStylesService} from '@taiga-ui/cdk'; +import {TuiSizeXXL, TuiSizeXXS} from '@taiga-ui/core'; +import { + tuiAvatarOptionsProvider, + tuiBadgeOptionsProvider, + tuiButtonOptionsProvider, +} from '@taiga-ui/experimental/components'; + +import {TuiHeaderComponent} from './header.component'; + +@Directive({ + selector: '[tuiHeader]', + providers: [ + tuiAvatarOptionsProvider({size: 's'}), + tuiButtonOptionsProvider({size: 's'}), + tuiBadgeOptionsProvider({size: 'm'}), + ], + host: { + tuiHeader: '', + '[attr.data-size]': 'size || "s"', + }, +}) +export class TuiHeaderDirective { + @Input('tuiHeader') + size: TuiSizeXXL | TuiSizeXXS | '' = 's'; + + constructor( + @Inject(TuiDirectiveStylesService) directiveStyles: TuiDirectiveStylesService, + ) { + directiveStyles.addComponent(TuiHeaderComponent); + } +} diff --git a/projects/experimental/directives/header/header.module.ts b/projects/experimental/directives/header/header.module.ts new file mode 100644 index 000000000000..c8682348b3b8 --- /dev/null +++ b/projects/experimental/directives/header/header.module.ts @@ -0,0 +1,10 @@ +import {NgModule} from '@angular/core'; + +import {TuiHeaderComponent} from './header.component'; +import {TuiHeaderDirective} from './header.directive'; + +@NgModule({ + declarations: [TuiHeaderComponent, TuiHeaderDirective], + exports: [TuiHeaderComponent, TuiHeaderDirective], +}) +export class TuiHeaderModule {} diff --git a/projects/experimental/directives/header/header.styles.less b/projects/experimental/directives/header/header.styles.less new file mode 100644 index 000000000000..0478657861ca --- /dev/null +++ b/projects/experimental/directives/header/header.styles.less @@ -0,0 +1,112 @@ +@import '@taiga-ui/core/styles/taiga-ui-local'; + +[tuiHeader] { + position: relative; + display: flex; + align-items: flex-start; + box-sizing: content-box; + color: var(--tui-text-01); + + [tuiTitle] { + flex-grow: 2; + } + + [tuiAccessories] { + display: flex; + align-items: center; + margin-inline-start: 1rem; + + & > *:not(:first-child) { + margin-inline-start: 0.75rem; + } + + &:before { + content: '​'; + visibility: hidden; + } + } + + [tuiSubtitle] { + font: var(--tui-font-text-m); + color: var(--tui-text-02); + } + + [tuiCaption] { + font: var(--tui-font-text-s); + color: var(--tui-text-02); + font-weight: 500; + text-transform: uppercase; + } + + &[data-size='xxl'] { + [tuiTitle], + [tuiAccessories] { + font: var(--tui-font-heading-1); + } + } + + &[data-size='xl'] { + [tuiTitle], + [tuiAccessories] { + font: var(--tui-font-heading-2); + } + } + + &[data-size='l'] { + [tuiTitle], + [tuiAccessories] { + font: var(--tui-font-heading-3); + } + } + + &[data-size='m'] { + [tuiTitle], + [tuiAccessories] { + font: var(--tui-font-heading-4); + } + } + + &[data-size='s'] { + [tuiTitle], + [tuiAccessories] { + font: var(--tui-font-heading-5); + } + } + + &[data-size='xs'] { + [tuiTitle], + [tuiAccessories] { + font: var(--tui-font-heading-6); + } + } + + &[data-size='xxs'] { + [tuiTitle], + [tuiAccessories] { + font: var(--tui-font-text-xl); + } + } + + &[data-size='xxl'], + &[data-size='xl'], + &[data-size='l'] { + [tuiSubtitle] { + font: var(--tui-font-text-l); + } + } +} + +tui-root._mobile [tuiHeader] { + [tuiAccessories] { + & > *:not(:first-child) { + margin-inline-start: 1rem; + } + } + + &[data-size='xxs'] { + [tuiTitle], + [tuiAccessories] { + font: var(--tui-font-heading-6); + } + } +} diff --git a/projects/experimental/directives/header/index.ts b/projects/experimental/directives/header/index.ts new file mode 100644 index 000000000000..5da50ea588c6 --- /dev/null +++ b/projects/experimental/directives/header/index.ts @@ -0,0 +1,3 @@ +export * from './header.component'; +export * from './header.directive'; +export * from './header.module'; diff --git a/projects/experimental/directives/header/ng-package.json b/projects/experimental/directives/header/ng-package.json new file mode 100644 index 000000000000..bebf62dcb5e5 --- /dev/null +++ b/projects/experimental/directives/header/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} diff --git a/projects/experimental/directives/index.ts b/projects/experimental/directives/index.ts index 2a2048a86165..78a556d9b6c2 100644 --- a/projects/experimental/directives/index.ts +++ b/projects/experimental/directives/index.ts @@ -4,6 +4,7 @@ export * from '@taiga-ui/experimental/directives/button-vertical'; export * from '@taiga-ui/experimental/directives/card'; export * from '@taiga-ui/experimental/directives/cell'; export * from '@taiga-ui/experimental/directives/fade'; +export * from '@taiga-ui/experimental/directives/header'; export * from '@taiga-ui/experimental/directives/icons'; export * from '@taiga-ui/experimental/directives/progress-segmented'; export * from '@taiga-ui/experimental/directives/sensitive';