feat(experimental): Fade enable scrolling

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

@@ -8,7 +8,7 @@
     </button>
     <span tuiNavigationLogo>
         <tui-icon icon="tuiIconHome"></tui-icon>
-        A very very long product name
+        <span tuiFade>A very very long product name</span>
         <tui-badge>Test</tui-badge>
     </span>
     <tui-hosted-dropdown [content]="products">
@@ -17,7 +17,7 @@
             iconRight="tuiIconChevronDown"
             tuiButton
         >
-            <span>A very very long project</span>
+            <span tuiFade>A very very long project</span>
         </button>
         <ng-template #products>
             <tui-data-list size="s">
@@ -66,7 +66,7 @@
                 iconLeft="tuiIconHome"
                 tuiButton
             >
-                <span>A very very long product name</span>
+                <span tuiFade>A very very long product name</span>
             </button>
         </header>
         <button
@@ -151,10 +151,12 @@
                 Back
             </a>
             /
-            <strong>Groups</strong>
-            <tui-badge iconLeft="tuiIconLock">Status</tui-badge>
+            <span tuiNavigationLogo>
+                <span tuiFade>Groups</span>
+                <tui-badge iconLeft="tuiIconLock">Status</tui-badge>
+            </span>
             <hr />
-            <tui-tabs>
+            <tui-tabs tuiFade>
                 <button tuiTab>Default view</button>
                 <button tuiTab>Details</button>
                 <button tuiTab>Followers</button>

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

@@ -30,7 +30,7 @@
         <h1 tuiTitle>
             <div tuiNavigationLogo>
                 <tui-icon icon="tuiIconGitlab"></tui-icon>
-                Research and Development Platform
+                <span tuiFade>Research and Development Platform</span>
                 <tui-icon
                     icon="tuiIconHeart"
                     tuiBadge

projects/experimental/components/navigation/aside.style.less

@@ -48,10 +48,6 @@ aside[tuiNavigationAside] {
             margin-left: auto;
             color: var(--tui-text-03-night);
         }
-
-        > * {
-            .text-overflow();
-        }
     }
 
     tui-expand [tuiButton] {

projects/experimental/components/navigation/head.component.ts → projects/experimental/components/navigation/header.component.ts

@@ -8,7 +8,7 @@ import {tuiButtonOptionsProvider} from '@taiga-ui/experimental/components/button
 @Component({
     selector: 'header[tuiNavigationHeader]',
     template: '<ng-content></ng-content>',
-    styleUrls: ['./head.style.less'],
+    styleUrls: ['./header.style.less'],
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
@@ -22,4 +22,4 @@ import {tuiButtonOptionsProvider} from '@taiga-ui/experimental/components/button
         tuiTheme: 'night',
     },
 })
-export class TuiHeadComponent {}
+export class TuiHeaderComponent {}

projects/experimental/components/navigation/head.style.less → projects/experimental/components/navigation/header.style.less

@@ -20,15 +20,8 @@ header[tuiNavigationHeader] {
     color: var(--tui-text-01-night);
 
     [tuiNavigationLogo] {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
         padding: 0 0.5rem;
-        overflow: hidden;
-
-        > * {
-            .text-overflow();
-        }
+        margin-inline-start: 0.25rem;
 
         tui-icon {
             font-size: 1rem;
@@ -41,10 +34,6 @@ header[tuiNavigationHeader] {
     tui-badge,
     tui-chip {
         max-width: 8rem;
-
-        > * {
-            .text-overflow();
-        }
     }
 
     hr {

projects/experimental/components/navigation/index.ts

@@ -1,5 +1,5 @@
 export * from './aside.component';
-export * from './head.component';
+export * from './header.component';
 export * from './logo.component';
 export * from './main.component';
 export * from './nav.component';

projects/experimental/components/navigation/logo.component.ts

@@ -1,14 +1,10 @@
-import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
 
 @Component({
     selector: '[tuiNavigationLogo]',
-    template: `
-        <ng-content select="tui-icon:not([tuiBadge]),img"></ng-content>
-        <span><ng-content></ng-content></span>
-        <ng-content
-            select="[tuiBadge],[tuiChip],tui-badge,tui-chip,input,button"
-        ></ng-content>
-    `,
+    template: '<ng-content></ng-content>',
+    styleUrls: ['./logo.style.less'],
+    encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TuiLogoComponent {}

projects/experimental/components/navigation/logo.style.less

@@ -0,0 +1,7 @@
+[tuiNavigationLogo] {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    overflow: hidden;
+    white-space: nowrap;
+}

projects/experimental/components/navigation/main.style.less

@@ -73,17 +73,6 @@ main[tuiNavigationMain] {
             margin-inline-start: 3rem;
             gap: 0.5rem !important;
         }
-
-        [tuiNavigationLogo] {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            overflow: hidden;
-
-            > * {
-                .text-overflow();
-            }
-        }
     }
 
     > a:first-child,

projects/experimental/components/navigation/nav.style.less

@@ -17,18 +17,17 @@ nav[tuiNavigationNav] {
     color: var(--tui-text-02);
     background: var(--tui-base-01);
 
-    > a {
-        text-decoration: none;
-        color: inherit;
-    }
-
-    > strong {
-        .text-overflow();
+    [tuiNavigationLogo] {
         font: var(--tui-font-text-m);
         font-weight: 500;
         color: var(--tui-text-01);
     }
 
+    > a {
+        text-decoration: none;
+        color: inherit;
+    }
+
     > hr {
         width: 2rem;
         margin: 0 0 0 auto;

projects/experimental/components/navigation/navigation.module.ts

@@ -4,22 +4,22 @@ 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 {TuiHeaderComponent} from './header.component';
 import {TuiLogoComponent} from './logo.component';
 import {TuiMainComponent} from './main.component';
 import {TuiNavComponent} from './nav.component';
 
 @NgModule({
     imports: [CommonModule, TuiScrollbarModule, TuiFadeModule],
     declarations: [
-        TuiHeadComponent,
+        TuiHeaderComponent,
         TuiLogoComponent,
         TuiMainComponent,
         TuiAsideComponent,
         TuiNavComponent,
     ],
     exports: [
-        TuiHeadComponent,
+        TuiHeaderComponent,
         TuiLogoComponent,
         TuiMainComponent,
         TuiAsideComponent,

projects/experimental/directives/fade/fade.directive.ts

@@ -23,6 +23,8 @@ import {takeUntil} from 'rxjs/operators';
 
 import {TuiFadeComponent} from './fade.component';
 
+const BUFFER = 1; // buffer for rounding issues
+
 @Directive({
     selector: '[tuiFade]',
     providers: [
@@ -74,10 +76,14 @@ export class TuiFadeDirective {
     }
 
     private isEnd(el: HTMLElement): boolean {
+        if (this.orientation === 'vertical') {
+            return Math.round(el.scrollTop) < el.scrollHeight - el.clientHeight - BUFFER;
+        }
+
         return (
-            Math.round(el.scrollLeft) < el.scrollWidth - el.clientWidth ||
-            Math.round(el.scrollTop) < el.scrollHeight - el.clientHeight ||
-            (this.orientation === 'horizontal' && el.scrollHeight > el.clientHeight)
+            Math.round(el.scrollLeft) < el.scrollWidth - el.clientWidth - BUFFER ||
+            // horizontal multiline fade can kick in early due to hanging elements of fonts so using bigger buffer
+            el.scrollHeight > el.clientHeight + 4 * BUFFER
         );
     }
 }

projects/experimental/directives/fade/fade.style.less

@@ -2,13 +2,14 @@
 
 // prettier-ignore
 [tuiFade] {
+    .scrollbar-hidden();
     .transition(mask-position);
-    display: block;
-    overflow: hidden;
+    overflow: auto;
     text-overflow: unset !important;
     mask-repeat: no-repeat;
 
     &:not([data-orientation='vertical']) {
+        overflow-y: hidden;
         mask-image:
             linear-gradient(to right, transparent var(--fade-offset), #000 calc(var(--fade-size) + var(--fade-offset))),
             linear-gradient(to left, transparent var(--fade-offset), #000 calc(var(--fade-size) + var(--fade-offset))),
@@ -45,6 +46,7 @@
     }
 
     &[data-orientation='vertical'] {
+        overflow-x: hidden;
         mask-image:
             linear-gradient(to bottom, transparent var(--fade-offset), #000 calc(var(--fade-size) + var(--fade-offset))),
             linear-gradient(to top, transparent var(--fade-offset), #000 calc(var(--fade-size) + var(--fade-offset)));

projects/experimental/directives/header/header.component.ts

@@ -9,4 +9,4 @@ import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/co
         class: 'tui-header',
     },
 })
-export class TuiHeaderComponent {}
+export class TuiHeaderStylesComponent {}

projects/experimental/directives/header/header.directive.ts

@@ -7,7 +7,7 @@ import {
     tuiButtonOptionsProvider,
 } from '@taiga-ui/experimental/components';
 
-import {TuiHeaderComponent} from './header.component';
+import {TuiHeaderStylesComponent} from './header.component';
 
 @Directive({
     selector: '[tuiHeader]',
@@ -28,6 +28,6 @@ export class TuiHeaderDirective {
     constructor(
         @Inject(TuiDirectiveStylesService) directiveStyles: TuiDirectiveStylesService,
     ) {
-        directiveStyles.addComponent(TuiHeaderComponent);
+        directiveStyles.addComponent(TuiHeaderStylesComponent);
     }
 }

projects/experimental/directives/header/header.module.ts

@@ -1,10 +1,10 @@
 import {NgModule} from '@angular/core';
 
-import {TuiHeaderComponent} from './header.component';
+import {TuiHeaderStylesComponent} from './header.component';
 import {TuiHeaderDirective} from './header.directive';
 
 @NgModule({
-    declarations: [TuiHeaderComponent, TuiHeaderDirective],
-    exports: [TuiHeaderComponent, TuiHeaderDirective],
+    declarations: [TuiHeaderStylesComponent, TuiHeaderDirective],
+    exports: [TuiHeaderDirective],
 })
 export class TuiHeaderModule {}