diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts index 92f927d4f858..af79f0ddb32c 100644 --- a/projects/demo/src/modules/app/app.routes.ts +++ b/projects/demo/src/modules/app/app.routes.ts @@ -473,6 +473,15 @@ export const ROUTES: Routes = [ title: 'ThumbnailCard ', }, }, + { + path: 'experimental/navigation', + loadChildren: async () => + (await import('../experimental/navigation/navigation.module')) + .ExampleTuiNavigationModule, + data: { + title: 'Navigation', + }, + }, { path: 'experimental/pin', loadChildren: async () => diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts index 766ec73c11f1..dda46bd3e3e7 100644 --- a/projects/demo/src/modules/app/pages.ts +++ b/projects/demo/src/modules/app/pages.ts @@ -1059,6 +1059,12 @@ export const pages: TuiDocPages = [ keywords: 'card, card-large, large, block, карточка, блок', route: '/experimental/card-large', }, + { + section: 'Experimental', + title: 'Navigation', + keywords: 'шапка, header, sidebar, aside, сайдбар, навигация', + route: '/experimental/navigation', + }, { section: 'Experimental', title: 'Pin', diff --git a/projects/demo/src/modules/experimental/navigation/examples/1/index.html b/projects/demo/src/modules/experimental/navigation/examples/1/index.html new file mode 100644 index 000000000000..9991f45ab28e --- /dev/null +++ b/projects/demo/src/modules/experimental/navigation/examples/1/index.html @@ -0,0 +1,182 @@ +
+ + + + A very very long product name + Test + + + + + + + + + + +
+ + + + +
+
+ +
+ +
+

+ Some random content + A subtitle +

+
+
+
diff --git a/projects/demo/src/modules/experimental/navigation/examples/1/index.ts b/projects/demo/src/modules/experimental/navigation/examples/1/index.ts new file mode 100644 index 000000000000..763f24003b0e --- /dev/null +++ b/projects/demo/src/modules/experimental/navigation/examples/1/index.ts @@ -0,0 +1,15 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; + +@Component({ + selector: 'tui-navigation-example-1', + templateUrl: './index.html', + encapsulation, + changeDetection, +}) +export class TuiNavigationExample1 { + open = false; + expanded = false; + submenu = false; +} diff --git a/projects/demo/src/modules/experimental/navigation/examples/2/index.html b/projects/demo/src/modules/experimental/navigation/examples/2/index.html new file mode 100644 index 000000000000..6a4cd261d362 --- /dev/null +++ b/projects/demo/src/modules/experimental/navigation/examples/2/index.html @@ -0,0 +1,105 @@ +
+ + Custom color + + + + + +
+
+ + Back + +
+

+
+ + Research and Development Platform + +
+
+ In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the + visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used + as a placeholder before the final copy is available. It is also used to temporarily replace text, which + allows designers to consider the form of a webpage or publication, without the meaning of the text + influencing the design. +
+
+ + + Alex Inkin + + Edited 6 minutes ago + + + Private + +
+

+ +
+ +
+

+ Some random content + A subtitle +

+
+
diff --git a/projects/demo/src/modules/experimental/navigation/examples/2/index.ts b/projects/demo/src/modules/experimental/navigation/examples/2/index.ts new file mode 100644 index 000000000000..02a9f1a3b884 --- /dev/null +++ b/projects/demo/src/modules/experimental/navigation/examples/2/index.ts @@ -0,0 +1,29 @@ +import {DOCUMENT} from '@angular/common'; +import {Component, Inject} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; + +@Component({ + selector: 'tui-navigation-example-2', + templateUrl: './index.html', + encapsulation, + changeDetection, +}) +export class TuiNavigationExample2 { + color = false; + + readonly initial = + this.doc.head + .querySelector('meta[name="theme-color"]') + ?.getAttribute('content') || ''; + + constructor(@Inject(DOCUMENT) private readonly doc: Document) {} + + onColor(color: boolean): void { + this.color = color; + this.doc.body.style.setProperty('--tui-theme-color', color ? 'purple' : 'black'); + this.doc.head + .querySelector('meta[name="theme-color"]') + ?.setAttribute('content', color ? 'purple' : this.initial); + } +} diff --git a/projects/demo/src/modules/experimental/navigation/examples/3/index.html b/projects/demo/src/modules/experimental/navigation/examples/3/index.html new file mode 100644 index 000000000000..23d5ef94cb93 --- /dev/null +++ b/projects/demo/src/modules/experimental/navigation/examples/3/index.html @@ -0,0 +1,72 @@ +
+ + + Project name + +
+ +
+
+ + + Home + + + Projects + + Project name + +
+

+ Project name +
+ In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the + visual form of a document or a typeface without relying on meaningful content. +
+

+ +
+ +
+

+ Some random content + A subtitle +

+
+
diff --git a/projects/demo/src/modules/experimental/navigation/examples/3/index.ts b/projects/demo/src/modules/experimental/navigation/examples/3/index.ts new file mode 100644 index 000000000000..f9c01cf9fc07 --- /dev/null +++ b/projects/demo/src/modules/experimental/navigation/examples/3/index.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; + +@Component({ + selector: 'tui-navigation-example-3', + templateUrl: './index.html', + encapsulation, + changeDetection, +}) +export class TuiNavigationExample3 {} diff --git a/projects/demo/src/modules/experimental/navigation/examples/import/import-module.md b/projects/demo/src/modules/experimental/navigation/examples/import/import-module.md new file mode 100644 index 000000000000..e90dd4c55554 --- /dev/null +++ b/projects/demo/src/modules/experimental/navigation/examples/import/import-module.md @@ -0,0 +1,14 @@ +```ts +import {TuiNavigationModule} from '@taiga-ui/experimental'; + +// ... + +@NgModule({ + imports: [ + // ... + TuiNavigationModule, + ], + // ... +}) +export class AppModule {} +``` diff --git a/projects/demo/src/modules/experimental/navigation/examples/import/insert-template.md b/projects/demo/src/modules/experimental/navigation/examples/import/insert-template.md new file mode 100644 index 000000000000..48b7a5acda9b --- /dev/null +++ b/projects/demo/src/modules/experimental/navigation/examples/import/insert-template.md @@ -0,0 +1,8 @@ +```html +
Header content
+ +
+ + Main content +
+``` diff --git a/projects/demo/src/modules/experimental/navigation/navigation.component.ts b/projects/demo/src/modules/experimental/navigation/navigation.component.ts new file mode 100644 index 000000000000..ac85d8e6069e --- /dev/null +++ b/projects/demo/src/modules/experimental/navigation/navigation.component.ts @@ -0,0 +1,27 @@ +import {Component, ViewEncapsulation} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {TuiDocExample} from '@taiga-ui/addon-doc'; + +@Component({ + selector: 'example-tui-navigation', + templateUrl: './navigation.template.html', + styleUrls: ['./navigation.style.less'], + encapsulation: ViewEncapsulation.None, + changeDetection, +}) +export class ExampleTuiNavigationComponent { + readonly exampleModule = import('./examples/import/import-module.md?raw'); + readonly exampleHtml = 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/3/index.html?raw'), + }; +} diff --git a/projects/demo/src/modules/experimental/navigation/navigation.module.ts b/projects/demo/src/modules/experimental/navigation/navigation.module.ts new file mode 100644 index 000000000000..3f7f404db079 --- /dev/null +++ b/projects/demo/src/modules/experimental/navigation/navigation.module.ts @@ -0,0 +1,70 @@ +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {FormsModule} from '@angular/forms'; +import {tuiGetDocModules} from '@taiga-ui/addon-doc'; +import {TuiRepeatTimesModule} from '@taiga-ui/cdk'; +import { + TuiDataListModule, + TuiExpandModule, + TuiHostedDropdownModule, + TuiLinkModule, + TuiNotificationModule, +} from '@taiga-ui/core'; +import { + TuiAppearanceModule, + TuiAvatarModule, + TuiBadgeModule, + TuiBadgeNotificationModule, + TuiButtonModule, + TuiCardModule, + TuiFadeModule, + TuiHeaderModule, + TuiIconModule, + TuiNavigationModule, + TuiSurfaceModule, + TuiTitleModule, + TuiToggleModule, +} from '@taiga-ui/experimental'; +import {TuiBreadcrumbsModule, TuiTabsModule} from '@taiga-ui/kit'; + +import {TuiNavigationExample1} from './examples/1'; +import {TuiNavigationExample2} from './examples/2'; +import {TuiNavigationExample3} from './examples/3'; +import {ExampleTuiNavigationComponent} from './navigation.component'; + +@NgModule({ + imports: [ + tuiGetDocModules(ExampleTuiNavigationComponent), + CommonModule, + FormsModule, + TuiNotificationModule, + TuiNavigationModule, + TuiAvatarModule, + TuiButtonModule, + TuiIconModule, + TuiBadgeModule, + TuiBadgeNotificationModule, + TuiHostedDropdownModule, + TuiDataListModule, + TuiFadeModule, + TuiExpandModule, + TuiTabsModule, + TuiCardModule, + TuiSurfaceModule, + TuiTitleModule, + TuiHeaderModule, + TuiRepeatTimesModule, + TuiAppearanceModule, + TuiToggleModule, + TuiBreadcrumbsModule, + TuiLinkModule, + ], + declarations: [ + ExampleTuiNavigationComponent, + TuiNavigationExample1, + TuiNavigationExample2, + TuiNavigationExample3, + ], + exports: [ExampleTuiNavigationComponent], +}) +export class ExampleTuiNavigationModule {} diff --git a/projects/demo/src/modules/experimental/navigation/navigation.style.less b/projects/demo/src/modules/experimental/navigation/navigation.style.less new file mode 100644 index 000000000000..e75a88991894 --- /dev/null +++ b/projects/demo/src/modules/experimental/navigation/navigation.style.less @@ -0,0 +1,3 @@ +example-tui-navigation .sticky-example .t-demo { + height: 30rem; +} diff --git a/projects/demo/src/modules/experimental/navigation/navigation.template.html b/projects/demo/src/modules/experimental/navigation/navigation.template.html new file mode 100644 index 000000000000..e68452b1ec40 --- /dev/null +++ b/projects/demo/src/modules/experimental/navigation/navigation.template.html @@ -0,0 +1,67 @@ + + + + This code is + experimental + and is a subject to change. Expect final solution to be shipped in the next major version + + +

A set of basic layout components for global navigation

+ + + + + + + + + + + + + + + +
    +
  1. +

    Add an import:

    + + +
    2. + +
  2. +

    Add to the template:

    + + +
    3. +
+ + diff --git a/projects/demo/used-icons.ts b/projects/demo/used-icons.ts index 8ccf0a2845c8..e887f5733dfe 100644 --- a/projects/demo/used-icons.ts +++ b/projects/demo/used-icons.ts @@ -113,6 +113,9 @@ export const TUI_USED_ICONS = [ 'tuiIconCheckLarge', 'tuiIconThumbsUp', 'tuiIconInfoLarge', + 'tuiIconGrid', + 'tuiIconHome', + 'tuiIconGitlab', 'tuiIconDollarSign', 'tuiIconCloseLarge', 'tuiIconFrownLarge', diff --git a/projects/experimental/components/index.ts b/projects/experimental/components/index.ts index 11e3c6faa882..5e96ed1fa65e 100644 --- a/projects/experimental/components/index.ts +++ b/projects/experimental/components/index.ts @@ -10,6 +10,7 @@ export * from '@taiga-ui/experimental/components/checkbox'; export * from '@taiga-ui/experimental/components/chip'; export * from '@taiga-ui/experimental/components/compass'; export * from '@taiga-ui/experimental/components/icon'; +export * from '@taiga-ui/experimental/components/navigation'; export * from '@taiga-ui/experimental/components/pin'; export * from '@taiga-ui/experimental/components/radio'; export * from '@taiga-ui/experimental/components/rating'; diff --git a/projects/experimental/components/navigation/aside.component.ts b/projects/experimental/components/navigation/aside.component.ts new file mode 100644 index 000000000000..c70a12f12f0f --- /dev/null +++ b/projects/experimental/components/navigation/aside.component.ts @@ -0,0 +1,41 @@ +import { + ChangeDetectionStrategy, + Component, + Input, + ViewEncapsulation, +} from '@angular/core'; +import {tuiDropdownOptionsProvider} from '@taiga-ui/core'; +import {tuiButtonOptionsProvider} from '@taiga-ui/experimental/components/button'; + +@Component({ + selector: 'aside[tuiNavigationAside]', + template: ` + + +
+ +
+ + + `, + styleUrls: ['./aside.style.less'], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [ + tuiButtonOptionsProvider({size: 's', appearance: 'flat'}), + tuiDropdownOptionsProvider({appearance: 'dropdown-navigation', align: 'right'}), + ], + host: { + tuiNavigationAside: '', + tuiTheme: 'night', + '[class._expanded]': 'tuiNavigationAside', + }, +}) +export class TuiAsideComponent { + @Input() + tuiNavigationAside = false; +} diff --git a/projects/experimental/components/navigation/aside.style.less b/projects/experimental/components/navigation/aside.style.less new file mode 100644 index 000000000000..8a8107f656b3 --- /dev/null +++ b/projects/experimental/components/navigation/aside.style.less @@ -0,0 +1,91 @@ +@import '@taiga-ui/core/styles/taiga-ui-local'; + +aside[tuiNavigationAside] { + --tui-link: var(--tui-text-01-night); + --tui-link-hover: var(--tui-text-01-night); + position: sticky; + top: 3rem; + display: flex; + width: 3rem; + flex-direction: column; + padding: 0.5rem 0.5rem 0.25rem; + box-sizing: border-box; + background: var(--tui-theme-color, #000); + color: var(--tui-text-01-night); + + &._expanded { + width: 13.75rem; + + + main[tuiNavigationMain] { + max-width: calc(100% - 13.75rem); + } + } + + .t-nav-scrollbar { + margin: 0 -0.25rem; + } + + .t-nav-content { + .scrollbar-hidden(); + height: 100%; + padding: 0 0.25rem; + overflow: auto; + } + + // TODO: Remove in 4.0 + tui-hosted-dropdown { + width: 100%; + } + + [tuiButton] { + width: 100%; + justify-content: flex-start; + gap: 0.625rem; + margin-bottom: 0.25rem; + + &:after { + .transition(transform); + margin-left: auto; + color: var(--tui-text-03-night); + } + + > * { + .text-overflow(); + } + } + + tui-expand [tuiButton] { + padding-inline-start: 2rem; + } + + hr { + background: var(--tui-clear-inverse); + height: 1px; + margin: 0 0 0.25rem; + border: none; + } + + header { + padding-bottom: 0.25rem; + box-shadow: inset 0 -1px var(--tui-clear); + margin-bottom: 1rem; + } + + footer { + margin-top: auto; + border-top: 1.75rem solid transparent; + } + + + main[tuiNavigationMain] { + max-width: calc(100% - 3rem); + } + .transition(width); +} + +tui-dropdown[data-appearance='dropdown-navigation'] { + --tui-text-01: var(--tui-text-01-night); + --tui-clear: var(--tui-clear-inverse); + border: none; + background: #323232; + background: color-mix(in srgb, var(--tui-theme-color, #000) 80%, #fff); +} diff --git a/projects/experimental/components/navigation/head.component.ts b/projects/experimental/components/navigation/head.component.ts new file mode 100644 index 000000000000..f61fe99e4060 --- /dev/null +++ b/projects/experimental/components/navigation/head.component.ts @@ -0,0 +1,25 @@ +import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core'; +import {tuiDropdownOptionsProvider} from '@taiga-ui/core'; +import {tuiAvatarOptionsProvider} from '@taiga-ui/experimental/components/avatar'; +import {tuiBadgeOptionsProvider} from '@taiga-ui/experimental/components/badge'; +import {tuiBadgeNotificationOptionsProvider} from '@taiga-ui/experimental/components/badge-notification'; +import {tuiButtonOptionsProvider} from '@taiga-ui/experimental/components/button'; + +@Component({ + selector: 'header[tuiNavigationHeader]', + template: '', + styleUrls: ['./head.style.less'], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [ + tuiAvatarOptionsProvider({size: 's', appearance: 'secondary'}), + tuiBadgeNotificationOptionsProvider({size: 'xs'}), + tuiBadgeOptionsProvider({size: 'm', appearance: 'primary'}), + tuiButtonOptionsProvider({size: 's', appearance: 'flat'}), + tuiDropdownOptionsProvider({appearance: 'dropdown-navigation'}), + ], + host: { + tuiTheme: 'night', + }, +}) +export class TuiHeadComponent {} diff --git a/projects/experimental/components/navigation/head.style.less b/projects/experimental/components/navigation/head.style.less new file mode 100644 index 000000000000..d0ec34fa7680 --- /dev/null +++ b/projects/experimental/components/navigation/head.style.less @@ -0,0 +1,70 @@ +@import '@taiga-ui/core/styles/taiga-ui-local'; + +header[tuiNavigationHeader] { + --tui-link: var(--tui-text-01-night); + --tui-link-hover: var(--tui-text-01-night); + position: sticky; + top: 0; + z-index: 1; + display: flex; + height: 3rem; + width: 100%; + align-items: center; + gap: 0.25rem; + padding: 0.5rem; + box-sizing: border-box; + font: var(--tui-font-text-s); + font-weight: 500; + line-height: 1rem; + background: var(--tui-theme-color, #000); + color: var(--tui-text-01-night); + + [tuiNavigationLogo] { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0 0.5rem; + overflow: hidden; + + > * { + .text-overflow(); + } + + tui-icon { + font-size: 1rem; + } + } + + [tuiButton], + [tuiBadge], + [tuiChip], + tui-badge, + tui-chip { + max-width: 8rem; + + > * { + .text-overflow(); + } + } + + hr { + width: 2rem; + margin: 0 0 0 auto; + border: none; + visibility: hidden; + flex-shrink: 0; + + ~ [tuiButton] { + margin-right: 0.5rem; + } + } +} + +tui-dropdown[data-appearance='dropdown-navigation'] { + --tui-text-01: var(--tui-text-01-night); + --tui-clear: var(--tui-clear-inverse); + border: none; + color: var(--tui-text-01); + background: #323232; + background: color-mix(in srgb, var(--tui-theme-color, #000) 80%, #fff); +} diff --git a/projects/experimental/components/navigation/index.ts b/projects/experimental/components/navigation/index.ts new file mode 100644 index 000000000000..546f0aca4924 --- /dev/null +++ b/projects/experimental/components/navigation/index.ts @@ -0,0 +1,6 @@ +export * from './aside.component'; +export * from './head.component'; +export * from './logo.component'; +export * from './main.component'; +export * from './nav.component'; +export * from './navigation.module'; diff --git a/projects/experimental/components/navigation/logo.component.ts b/projects/experimental/components/navigation/logo.component.ts new file mode 100644 index 000000000000..767bfc4a6ff3 --- /dev/null +++ b/projects/experimental/components/navigation/logo.component.ts @@ -0,0 +1,14 @@ +import {ChangeDetectionStrategy, Component} from '@angular/core'; + +@Component({ + selector: '[tuiNavigationLogo]', + template: ` + + + + `, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class TuiLogoComponent {} diff --git a/projects/experimental/components/navigation/main.component.ts b/projects/experimental/components/navigation/main.component.ts new file mode 100644 index 000000000000..95c84a6dc9f0 --- /dev/null +++ b/projects/experimental/components/navigation/main.component.ts @@ -0,0 +1,13 @@ +import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core'; + +@Component({ + selector: 'main[tuiNavigationMain]', + template: '', + styleUrls: ['./main.style.less'], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + host: { + tuiNavigationMain: '', + }, +}) +export class TuiMainComponent {} diff --git a/projects/experimental/components/navigation/main.style.less b/projects/experimental/components/navigation/main.style.less new file mode 100644 index 000000000000..6292c76b5a46 --- /dev/null +++ b/projects/experimental/components/navigation/main.style.less @@ -0,0 +1,96 @@ +@import '@taiga-ui/core/styles/taiga-ui-local'; + +main[tuiNavigationMain] { + .transition(max-width); + flex: 1; + padding: 0 1.25rem; + isolation: isolate; + box-sizing: border-box; + + &::before { + content: ''; + position: sticky; + top: 3rem; + z-index: 2; + display: block; + height: 3rem; + width: calc(100% + 2.5rem); + pointer-events: none; + margin: 0 -1.25rem -3rem; + border-radius: 1.25rem 1.25rem 0 0; + box-shadow: 0 -1.25rem var(--tui-theme-color, #000); + } + + > [tuiHeader] { + margin: 1rem 0 0.5rem; + + &[tuiCardLarge] { + flex-direction: column; + gap: 1rem; + + > :last-child:not([tuiTitle]) { + margin-bottom: 0.25rem; + } + } + + &:not([tuiCardLarge]) { + [tuiTitle] { + max-width: 42rem; + white-space: nowrap; + gap: 0.375rem; + overflow: hidden; + } + + [tuiSubtitle] { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + white-space: normal; + word-break: break-word; + font: var(--tui-font-text-s); + overflow: hidden; + } + } + + [tuiCaption] { + .scrollbar-hidden(); + display: flex; + gap: 1rem; + color: var(--tui-text-03); + font: var(--tui-font-text-s); + white-space: nowrap; + text-transform: none; + overflow: auto; + + tui-icon { + font-size: 1rem; + margin: 0.125rem 0; + color: var(--tui-text-02); + } + } + + [tuiAccessories] { + margin-inline-start: 3rem; + gap: 0.5rem !important; + } + + [tuiNavigationLogo] { + display: flex; + align-items: center; + gap: 0.5rem; + overflow: hidden; + + > * { + .text-overflow(); + } + } + } + + > a:first-child, + > button:first-child, + > tui-breadcrumbs:first-child { + height: 1.25rem; + padding: 0; + margin-top: 0.875rem; + } +} diff --git a/projects/experimental/components/navigation/nav.component.ts b/projects/experimental/components/navigation/nav.component.ts new file mode 100644 index 000000000000..09f8dd792f34 --- /dev/null +++ b/projects/experimental/components/navigation/nav.component.ts @@ -0,0 +1,16 @@ +import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core'; +import {tuiBadgeOptionsProvider} from '@taiga-ui/experimental/components/badge'; +import {tuiButtonOptionsProvider} from '@taiga-ui/experimental/components/button'; + +@Component({ + selector: 'nav[tuiNavigationNav]', + template: '', + styleUrls: ['./nav.style.less'], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [ + tuiBadgeOptionsProvider({size: 'm'}), + tuiButtonOptionsProvider({size: 's'}), + ], +}) +export class TuiNavComponent {} diff --git a/projects/experimental/components/navigation/nav.style.less b/projects/experimental/components/navigation/nav.style.less new file mode 100644 index 000000000000..6d42f0c6dab5 --- /dev/null +++ b/projects/experimental/components/navigation/nav.style.less @@ -0,0 +1,58 @@ +@import '@taiga-ui/core/styles/taiga-ui-local'; + +nav[tuiNavigationNav] { + top: 3rem; + z-index: 1; + display: flex; + align-items: center; + gap: 0.5rem; + box-shadow: inset 0 -1px var(--tui-base-03); + padding: 0 1.25rem; + margin: 0 -1.25rem; + box-sizing: border-box; + white-space: nowrap; + overflow: hidden; + font: var(--tui-font-text-s); + line-height: 1rem; + color: var(--tui-text-02); + background: var(--tui-base-01); + + > a { + text-decoration: none; + color: inherit; + } + + > strong { + .text-overflow(); + font: var(--tui-font-text-m); + font-weight: 500; + color: var(--tui-text-01); + } + + > hr { + width: 2rem; + margin: 0 0 0 auto; + border: none; + visibility: hidden; + flex-shrink: 0; + } + + tui-icon { + font-size: 1rem; + vertical-align: bottom; + } + + tui-tabs, + [tuiTabs] { + height: 3rem; + margin-inline-end: 1rem; + + tui-underline { + --tui-primary: var(--tui-base-07); + } + } + + [tuiTab] { + font: var(--tui-font-text-s); + } +} diff --git a/projects/experimental/components/navigation/navigation.module.ts b/projects/experimental/components/navigation/navigation.module.ts new file mode 100644 index 000000000000..4dc809c45d69 --- /dev/null +++ b/projects/experimental/components/navigation/navigation.module.ts @@ -0,0 +1,29 @@ +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {TuiScrollbarModule} from '@taiga-ui/core'; +import {TuiFadeModule} from '@taiga-ui/experimental/directives/fade'; + +import {TuiAsideComponent} from './aside.component'; +import {TuiHeadComponent} from './head.component'; +import {TuiLogoComponent} from './logo.component'; +import {TuiMainComponent} from './main.component'; +import {TuiNavComponent} from './nav.component'; + +@NgModule({ + imports: [CommonModule, TuiScrollbarModule, TuiFadeModule], + declarations: [ + TuiHeadComponent, + TuiLogoComponent, + TuiMainComponent, + TuiAsideComponent, + TuiNavComponent, + ], + exports: [ + TuiHeadComponent, + TuiLogoComponent, + TuiMainComponent, + TuiAsideComponent, + TuiNavComponent, + ], +}) +export class TuiNavigationModule {} diff --git a/projects/experimental/components/navigation/ng-package.json b/projects/experimental/components/navigation/ng-package.json new file mode 100644 index 000000000000..bebf62dcb5e5 --- /dev/null +++ b/projects/experimental/components/navigation/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} diff --git a/projects/experimental/directives/fade/fade.style.less b/projects/experimental/directives/fade/fade.style.less index 69da7f29c388..41eb403e60c4 100644 --- a/projects/experimental/directives/fade/fade.style.less +++ b/projects/experimental/directives/fade/fade.style.less @@ -5,6 +5,7 @@ .transition(mask-position); display: block; overflow: hidden; + text-overflow: unset !important; mask-repeat: no-repeat; &:not([data-orientation='vertical']) { diff --git a/projects/experimental/directives/header/header.styles.less b/projects/experimental/directives/header/header.styles.less index 0478657861ca..b4be8b4f7ffe 100644 --- a/projects/experimental/directives/header/header.styles.less +++ b/projects/experimental/directives/header/header.styles.less @@ -14,11 +14,7 @@ [tuiAccessories] { display: flex; align-items: center; - margin-inline-start: 1rem; - - & > *:not(:first-child) { - margin-inline-start: 0.75rem; - } + gap: 0.75rem; &:before { content: '​'; @@ -98,9 +94,7 @@ tui-root._mobile [tuiHeader] { [tuiAccessories] { - & > *:not(:first-child) { - margin-inline-start: 1rem; - } + gap: 1rem; } &[data-size='xxs'] { diff --git a/projects/kit/components/push/push-alert.template.html b/projects/kit/components/push/push-alert.template.html index 282db334470c..2e4dfa54f00d 100644 --- a/projects/kit/components/push/push-alert.template.html +++ b/projects/kit/components/push/push-alert.template.html @@ -16,7 +16,7 @@ [style.color]="context.iconColor" >