feat(core): add mode for tui-scrollbar

projects/core/components/scrollbar/index.ts

@@ -2,3 +2,4 @@ export * from './scroll-ref.directive';
 export * from './scrollable.directive';
 export * from './scrollbar.component';
 export * from './scrollbar.module';
+export * from './scrollbar.options';

projects/core/components/scrollbar/scrollbar.component.ts

@@ -17,6 +17,8 @@ import {
 } from '@taiga-ui/cdk';
 import {TUI_SCROLL_INTO_VIEW, TUI_SCROLLABLE} from '@taiga-ui/core/constants';
 
+import {TUI_SCROLLBAR_OPTIONS, TuiScrollbarOptions} from './scrollbar.options';
+
 // TODO: Remove all legacy code in 4.0
 @Component({
     selector: 'tui-scrollbar',
@@ -50,6 +52,7 @@ export class TuiScrollbarComponent {
         @Inject(ElementRef) private readonly el: ElementRef<HTMLElement>,
         @Inject(USER_AGENT) private readonly userAgent: string,
         @Inject(TUI_IS_IOS) private readonly isIos: boolean,
+        @Inject(TUI_SCROLLBAR_OPTIONS) readonly options: TuiScrollbarOptions,
     ) {}
 
     get delegated(): boolean {

projects/core/components/scrollbar/scrollbar.options.ts

@@ -0,0 +1,22 @@
+import type {Provider} from '@angular/core';
+import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk';
+
+export interface TuiScrollbarOptions {
+    mode: 'always' | 'hover';
+}
+
+export const TUI_DEFAULT_SCROLLBAR_OPTIONS: TuiScrollbarOptions = {
+    mode: 'always',
+};
+
+export const TUI_SCROLLBAR_OPTIONS = tuiCreateToken(TUI_DEFAULT_SCROLLBAR_OPTIONS);
+
+export function tuiScrollbarOptionsProvider(
+    options: Partial<TuiScrollbarOptions>,
+): Provider {
+    return tuiProvideOptions(
+        TUI_SCROLLBAR_OPTIONS,
+        options,
+        TUI_DEFAULT_SCROLLBAR_OPTIONS,
+    );
+}

projects/core/components/scrollbar/scrollbar.style.less

@@ -24,6 +24,18 @@
         .customize-scroll();
         overflow: overlay;
     }
+
+    .t-hover-mode:not(:active) {
+        .transition(opacity);
+
+        opacity: 0;
+    }
+
+    &:hover .t-hover-mode {
+        .transition(opacity);
+
+        opacity: 1;
+    }
 }
 
 .t-content {

projects/core/components/scrollbar/scrollbar.template.html

@@ -1,6 +1,7 @@
 <tui-scroll-controls
     *ngIf="showScrollbars"
     class="t-bars"
+    [class.t-hover-mode]="options.mode === 'hover'"
 ></tui-scroll-controls>
 <div
     class="t-content"

projects/demo/src/modules/components/scrollbar/examples/7/index.html

@@ -0,0 +1,50 @@
+<tui-scrollbar class="box">
+    <div class="content">
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti dignissimos, doloremque. Aperiam
+            assumenda atque aut blanditiis corporis, eum, facilis harum laudantium magni necessitatibus nobis quas
+            repudiandae sint ut voluptatem! Optio.
+        </p>
+        <p>
+            Accusamus aperiam assumenda aut consectetur, corporis delectus, dolor eaque eius est hic impedit labore
+            possimus provident quas rem, rerum sequi sint tempora tempore ut? Debitis esse neque odio odit provident?
+        </p>
+        <p>
+            Cum eum illo, ipsa iure nostrum ut voluptates? Autem blanditiis corporis debitis deserunt ex expedita
+            facilis fuga, illum iusto magnam praesentium provident recusandae repudiandae, totam, voluptatem. Minima
+            numquam sapiente sunt.
+        </p>
+        <p>
+            Beatae consectetur cupiditate dignissimos ducimus eos excepturi labore pariatur placeat quia similique.
+            Architecto aspernatur cumque debitis distinctio esse, facere fugit harum ipsum libero minus neque numquam
+            omnis quidem, tempora, ut!
+        </p>
+        <p>
+            Mollitia, perspiciatis sunt! Architecto aspernatur assumenda beatae, blanditiis commodi consequuntur debitis
+            et id, laboriosam maxime molestiae neque nihil officiis omnis, quam quos sint veritatis voluptate? Alias
+            deserunt distinctio modi perferendis?
+        </p>
+        <p>
+            Ab aspernatur aut cumque cupiditate deleniti, dolorem ducimus eligendi eos facere harum hic ipsam ipsum iste
+            itaque modi nam necessitatibus nostrum nulla omnis quae repellat, sapiente sit tempore. Ipsam, quidem!
+        </p>
+        <p>
+            Ab debitis deleniti distinctio est ex facere magni nemo numquam placeat quia, quibusdam sequi! Aliquid at
+            consectetur culpa ea enim facilis, harum hic, inventore iste possimus praesentium quas tempora voluptates.
+        </p>
+        <p>
+            Aliquam eligendi ipsam modi nemo numquam obcaecati officia, quidem unde? Accusantium amet, animi deleniti
+            dolorum ea earum eos, expedita ipsa minima modi, pariatur perspiciatis porro quibusdam quo repellat tempore
+            voluptates!
+        </p>
+        <p>
+            Ab assumenda fugiat magni natus officiis perferendis ratione rem repellendus tenetur. At commodi laudantium
+            modi, natus nobis nulla odio odit sed sint tempora tenetur voluptas? At odio praesentium quas ut!
+        </p>
+        <p>
+            Atque aut consectetur consequuntur debitis eius facere ipsa ipsam maiores minima minus mollitia qui quos
+            repudiandae sapiente, soluta? Ad, amet dolore doloribus ducimus eos exercitationem molestiae quisquam soluta
+            ullam voluptate.
+        </p>
+    </div>
+</tui-scrollbar>

projects/demo/src/modules/components/scrollbar/examples/7/index.less

@@ -0,0 +1,13 @@
+.box {
+    width: 16rem;
+    height: 16rem;
+    border: 1px solid;
+}
+
+.content {
+    padding: 0 0.6875rem;
+}
+
+p {
+    white-space: nowrap;
+}

projects/demo/src/modules/components/scrollbar/examples/7/index.ts

@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {tuiScrollbarOptionsProvider} from '@taiga-ui/core';
+
+@Component({
+    selector: 'tui-scrollbar-example-7',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+    providers: [
+        tuiScrollbarOptionsProvider({
+            mode: 'hover',
+        }),
+    ],
+})
+export class TuiScrollbarExample7Component {}

projects/demo/src/modules/components/scrollbar/scrollbar.component.ts

@@ -44,4 +44,10 @@ export class ExampleTuiScrollbarComponent {
         HTML: import('./examples/6/template.html?raw'),
         LESS: import('./examples/6/style.less?raw'),
     };
+
+    readonly example7: TuiDocExample = {
+        TypeScript: import('./examples/7/index.ts?raw'),
+        HTML: import('./examples/7/index.html?raw'),
+        LESS: import('./examples/7/index.less?raw'),
+    };
 }

projects/demo/src/modules/components/scrollbar/scrollbar.module.ts

@@ -16,6 +16,7 @@ import {TuiScrollbarExample3Component} from './examples/3/component';
 import {TuiScrollbarExample4Component} from './examples/4/component';
 import {TuiScrollbarExample5Component} from './examples/5/component';
 import {TuiScrollbarExample6Component} from './examples/6/component';
+import {TuiScrollbarExample7Component} from './examples/7';
 import {ExampleTuiScrollbarComponent} from './scrollbar.component';
 
 @NgModule({
@@ -37,6 +38,7 @@ import {ExampleTuiScrollbarComponent} from './scrollbar.component';
         TuiScrollbarExample4Component,
         TuiScrollbarExample5Component,
         TuiScrollbarExample6Component,
+        TuiScrollbarExample7Component,
     ],
     exports: [ExampleTuiScrollbarComponent],
 })

projects/demo/src/modules/components/scrollbar/scrollbar.template.html

@@ -71,6 +71,14 @@
             </p>
             <tui-scrollbar-example-6></tui-scrollbar-example-6>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="hover-mode"
+            heading="Show scroll bars on hover"
+            [content]="example7"
+        >
+            <tui-scrollbar-example-7></tui-scrollbar-example-7>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab="Setup">