@taiga-ui/core/esm2022/components/scrollbar/scroll-controls.component.mjs

Core library for creating Angular components and applications using Taiga UI

import { AsyncPipe, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { WA_ANIMATION_FRAME } from '@ng-web-apis/common';
import { TuiAnimated } from '@taiga-ui/cdk/directives/animated';
import { tuiZonefreeScheduler, tuiZoneOptimized } from '@taiga-ui/cdk/observables';
import { TUI_SCROLL_REF } from '@taiga-ui/core/tokens';
import { distinctUntilChanged, map, startWith, throttleTime } from 'rxjs';
import { TuiScrollbarDirective } from './scrollbar.directive';
import { TUI_SCROLLBAR_OPTIONS } from './scrollbar.options';
import * as i0 from "@angular/core";
class TuiScrollControls {
    constructor() {
        this.scrollRef = inject(TUI_SCROLL_REF).nativeElement;
        this.nativeScrollbar = inject(TUI_SCROLLBAR_OPTIONS).mode === 'native';
        this.refresh$ = inject(WA_ANIMATION_FRAME).pipe(throttleTime(300, tuiZonefreeScheduler()), map(() => this.scrollbars), startWith([false, false]), distinctUntilChanged((a, b) => a[0] === b[0] && a[1] === b[1]), tuiZoneOptimized());
    }
    get scrollbars() {
        const { clientHeight, scrollHeight, clientWidth, scrollWidth } = this.scrollRef;
        return [
            Math.ceil((clientHeight / scrollHeight) * 100) < 100,
            Math.ceil((clientWidth / scrollWidth) * 100) < 100,
        ];
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiScrollControls, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiScrollControls, isStandalone: true, selector: "tui-scroll-controls", ngImport: i0, template: "<ng-container *ngIf=\"nativeScrollbar; else custom\" />\n<ng-template #custom>\n    <ng-container *ngIf=\"refresh$ | async as bars\">\n        <div\n            *ngIf=\"bars[0]\"\n            tuiAnimated\n            class=\"t-bar t-bar_vertical\"\n            [class.t-bar_has-horizontal]=\"bars[1]\"\n            (mousedown.capture.prevent)=\"(0)\"\n        >\n            <div\n                tuiScrollbar=\"vertical\"\n                class=\"t-thumb\"\n            ></div>\n        </div>\n        <div\n            *ngIf=\"bars[1]\"\n            tuiAnimated\n            class=\"t-bar t-bar_horizontal\"\n            [class.t-bar_has-vertical]=\"bars[0]\"\n            (mousedown.capture.prevent)=\"(0)\"\n        >\n            <div\n                tuiScrollbar=\"horizontal\"\n                class=\"t-thumb\"\n            ></div>\n        </div>\n    </ng-container>\n</ng-template>\n", styles: [":host{position:sticky;top:0;left:0;z-index:1;inset-inline-start:0;min-inline-size:calc(100% - 1px);min-block-size:calc(100% - 1px);max-inline-size:calc(100% - 1px);max-block-size:calc(100% - 1px);margin-inline-end:calc(-100% + 1px);pointer-events:none}.t-bar{position:absolute;right:0;bottom:0;pointer-events:auto}.t-bar.tui-enter,.t-bar.tui-leave{animation-name:tuiFade}.t-bar_vertical{top:0;inline-size:.875rem}@supports (inset-inline-end: 0){.t-bar_vertical{right:unset;inset-inline-end:0}}.t-bar_horizontal{left:0;inset-inline-start:0;block-size:.875rem}.t-bar_has-horizontal{bottom:.5rem}.t-bar_has-vertical{right:.5rem}.t-thumb{transition-property:all;transition-duration:.15s;transition-timing-function:ease-in-out;position:absolute;border-radius:6.25rem;border:.25rem solid transparent;cursor:pointer;pointer-events:auto;-webkit-user-select:none;user-select:none;background:currentColor;background-clip:content-box;box-sizing:border-box;transition-property:width,height,opacity;opacity:.2}.t-thumb:hover{opacity:.24}.t-thumb:active{opacity:.48}.t-bar_vertical .t-thumb{right:0;inset-inline-end:0;inline-size:.75rem;min-block-size:1.25rem}.t-bar_vertical:hover .t-thumb,.t-bar_vertical .t-thumb:active{inline-size:.875rem}.t-bar_horizontal .t-thumb{bottom:0;block-size:.75rem;min-inline-size:1.25rem}.t-bar_horizontal:hover .t-thumb,.t-bar_horizontal .t-thumb:active{block-size:.875rem}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TuiAnimated, selector: "[tuiAnimated]" }, { kind: "directive", type: TuiScrollbarDirective, selector: "[tuiScrollbar]", inputs: ["tuiScrollbar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
export { TuiScrollControls };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiScrollControls, decorators: [{
            type: Component,
            args: [{ standalone: true, selector: 'tui-scroll-controls', imports: [AsyncPipe, NgIf, TuiAnimated, TuiScrollbarDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"nativeScrollbar; else custom\" />\n<ng-template #custom>\n    <ng-container *ngIf=\"refresh$ | async as bars\">\n        <div\n            *ngIf=\"bars[0]\"\n            tuiAnimated\n            class=\"t-bar t-bar_vertical\"\n            [class.t-bar_has-horizontal]=\"bars[1]\"\n            (mousedown.capture.prevent)=\"(0)\"\n        >\n            <div\n                tuiScrollbar=\"vertical\"\n                class=\"t-thumb\"\n            ></div>\n        </div>\n        <div\n            *ngIf=\"bars[1]\"\n            tuiAnimated\n            class=\"t-bar t-bar_horizontal\"\n            [class.t-bar_has-vertical]=\"bars[0]\"\n            (mousedown.capture.prevent)=\"(0)\"\n        >\n            <div\n                tuiScrollbar=\"horizontal\"\n                class=\"t-thumb\"\n            ></div>\n        </div>\n    </ng-container>\n</ng-template>\n", styles: [":host{position:sticky;top:0;left:0;z-index:1;inset-inline-start:0;min-inline-size:calc(100% - 1px);min-block-size:calc(100% - 1px);max-inline-size:calc(100% - 1px);max-block-size:calc(100% - 1px);margin-inline-end:calc(-100% + 1px);pointer-events:none}.t-bar{position:absolute;right:0;bottom:0;pointer-events:auto}.t-bar.tui-enter,.t-bar.tui-leave{animation-name:tuiFade}.t-bar_vertical{top:0;inline-size:.875rem}@supports (inset-inline-end: 0){.t-bar_vertical{right:unset;inset-inline-end:0}}.t-bar_horizontal{left:0;inset-inline-start:0;block-size:.875rem}.t-bar_has-horizontal{bottom:.5rem}.t-bar_has-vertical{right:.5rem}.t-thumb{transition-property:all;transition-duration:.15s;transition-timing-function:ease-in-out;position:absolute;border-radius:6.25rem;border:.25rem solid transparent;cursor:pointer;pointer-events:auto;-webkit-user-select:none;user-select:none;background:currentColor;background-clip:content-box;box-sizing:border-box;transition-property:width,height,opacity;opacity:.2}.t-thumb:hover{opacity:.24}.t-thumb:active{opacity:.48}.t-bar_vertical .t-thumb{right:0;inset-inline-end:0;inline-size:.75rem;min-block-size:1.25rem}.t-bar_vertical:hover .t-thumb,.t-bar_vertical .t-thumb:active{inline-size:.875rem}.t-bar_horizontal .t-thumb{bottom:0;block-size:.75rem;min-inline-size:1.25rem}.t-bar_horizontal:hover .t-thumb,.t-bar_horizontal .t-thumb:active{block-size:.875rem}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Nyb2xsLWNvbnRyb2xzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvcmUvY29tcG9uZW50cy9zY3JvbGxiYXIvc2Nyb2xsLWNvbnRyb2xzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvcmUvY29tcG9uZW50cy9zY3JvbGxiYXIvc2Nyb2xsLWNvbnRyb2xzLnRlbXBsYXRlLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxJQUFJLEVBQUMsTUFBTSxpQkFBaUIsQ0FBQztBQUNoRCxPQUFPLEVBQUMsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN6RSxPQUFPLEVBQUMsa0JBQWtCLEVBQUMsTUFBTSxxQkFBcUIsQ0FBQztBQUN2RCxPQUFPLEVBQUMsV0FBVyxFQUFDLE1BQU0sbUNBQW1DLENBQUM7QUFDOUQsT0FBTyxFQUFDLG9CQUFvQixFQUFFLGdCQUFnQixFQUFDLE1BQU0sMkJBQTJCLENBQUM7QUFDakYsT0FBTyxFQUFDLGNBQWMsRUFBQyxNQUFNLHVCQUF1QixDQUFDO0FBQ3JELE9BQU8sRUFBQyxvQkFBb0IsRUFBRSxHQUFHLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBQyxNQUFNLE1BQU0sQ0FBQztBQUV4RSxPQUFPLEVBQUMscUJBQXFCLEVBQUMsTUFBTSx1QkFBdUIsQ0FBQztBQUM1RCxPQUFPLEVBQUMscUJBQXFCLEVBQUMsTUFBTSxxQkFBcUIsQ0FBQzs7QUFFMUQsTUFRYSxpQkFBaUI7SUFSOUI7UUFTcUIsY0FBUyxHQUFHLE1BQU0sQ0FBQyxjQUFjLENBQUMsQ0FBQyxhQUFhLENBQUM7UUFFL0Msb0JBQWUsR0FBRyxNQUFNLENBQUMscUJBQXFCLENBQUMsQ0FBQyxJQUFJLEtBQUssUUFBUSxDQUFDO1FBQ2xFLGFBQVEsR0FBRyxNQUFNLENBQUMsa0JBQWtCLENBQUMsQ0FBQyxJQUFJLENBQ3pELFlBQVksQ0FBQyxHQUFHLEVBQUUsb0JBQW9CLEVBQUUsQ0FBQyxFQUN6QyxHQUFHLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxFQUMxQixTQUFTLENBQUMsQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFDLENBQUMsRUFDekIsb0JBQW9CLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFDOUQsZ0JBQWdCLEVBQUUsQ0FDckIsQ0FBQztLQVVMO0lBUkcsSUFBWSxVQUFVO1FBQ2xCLE1BQU0sRUFBQyxZQUFZLEVBQUUsWUFBWSxFQUFFLFdBQVcsRUFBRSxXQUFXLEVBQUMsR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDO1FBRTlFLE9BQU87WUFDSCxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsWUFBWSxHQUFHLFlBQVksQ0FBQyxHQUFHLEdBQUcsQ0FBQyxHQUFHLEdBQUc7WUFDcEQsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLFdBQVcsR0FBRyxXQUFXLENBQUMsR0FBRyxHQUFHLENBQUMsR0FBRyxHQUFHO1NBQ3JELENBQUM7SUFDTixDQUFDOytHQW5CUSxpQkFBaUI7bUdBQWpCLGlCQUFpQiwrRUNuQjlCLGs0QkE2QkEsdzZDRGZjLFNBQVMsOENBQUUsSUFBSSw2RkFBRSxXQUFXLDBEQUFFLHFCQUFxQjs7U0FLcEQsaUJBQWlCOzRGQUFqQixpQkFBaUI7a0JBUjdCLFNBQVM7aUNBQ00sSUFBSSxZQUNOLHFCQUFxQixXQUN0QixDQUFDLFNBQVMsRUFBRSxJQUFJLEVBQUUsV0FBVyxFQUFFLHFCQUFxQixDQUFDLG1CQUc3Qyx1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtBc3luY1BpcGUsIE5nSWZ9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge0NoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGluamVjdH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1dBX0FOSU1BVElPTl9GUkFNRX0gZnJvbSAnQG5nLXdlYi1hcGlzL2NvbW1vbic7XG5pbXBvcnQge1R1aUFuaW1hdGVkfSBmcm9tICdAdGFpZ2EtdWkvY2RrL2RpcmVjdGl2ZXMvYW5pbWF0ZWQnO1xuaW1wb3J0IHt0dWlab25lZnJlZVNjaGVkdWxlciwgdHVpWm9uZU9wdGltaXplZH0gZnJvbSAnQHRhaWdhLXVpL2Nkay9vYnNlcnZhYmxlcyc7XG5pbXBvcnQge1RVSV9TQ1JPTExfUkVGfSBmcm9tICdAdGFpZ2EtdWkvY29yZS90b2tlbnMnO1xuaW1wb3J0IHtkaXN0aW5jdFVudGlsQ2hhbmdlZCwgbWFwLCBzdGFydFdpdGgsIHRocm90dGxlVGltZX0gZnJvbSAncnhqcyc7XG5cbmltcG9ydCB7VHVpU2Nyb2xsYmFyRGlyZWN0aXZlfSBmcm9tICcuL3Njcm9sbGJhci5kaXJlY3RpdmUnO1xuaW1wb3J0IHtUVUlfU0NST0xMQkFSX09QVElPTlN9IGZyb20gJy4vc2Nyb2xsYmFyLm9wdGlvbnMnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIHNlbGVjdG9yOiAndHVpLXNjcm9sbC1jb250cm9scycsXG4gICAgaW1wb3J0czogW0FzeW5jUGlwZSwgTmdJZiwgVHVpQW5pbWF0ZWQsIFR1aVNjcm9sbGJhckRpcmVjdGl2ZV0sXG4gICAgdGVtcGxhdGVVcmw6ICcuL3Njcm9sbC1jb250cm9scy50ZW1wbGF0ZS5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9zY3JvbGwtY29udHJvbHMuc3R5bGUubGVzcyddLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBUdWlTY3JvbGxDb250cm9scyB7XG4gICAgcHJpdmF0ZSByZWFkb25seSBzY3JvbGxSZWYgPSBpbmplY3QoVFVJX1NDUk9MTF9SRUYpLm5hdGl2ZUVsZW1lbnQ7XG5cbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgbmF0aXZlU2Nyb2xsYmFyID0gaW5qZWN0KFRVSV9TQ1JPTExCQVJfT1BUSU9OUykubW9kZSA9PT0gJ25hdGl2ZSc7XG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IHJlZnJlc2gkID0gaW5qZWN0KFdBX0FOSU1BVElPTl9GUkFNRSkucGlwZShcbiAgICAgICAgdGhyb3R0bGVUaW1lKDMwMCwgdHVpWm9uZWZyZWVTY2hlZHVsZXIoKSksXG4gICAgICAgIG1hcCgoKSA9PiB0aGlzLnNjcm9sbGJhcnMpLFxuICAgICAgICBzdGFydFdpdGgoW2ZhbHNlLCBmYWxzZV0pLFxuICAgICAgICBkaXN0aW5jdFVudGlsQ2hhbmdlZCgoYSwgYikgPT4gYVswXSA9PT0gYlswXSAmJiBhWzFdID09PSBiWzFdKSxcbiAgICAgICAgdHVpWm9uZU9wdGltaXplZCgpLFxuICAgICk7XG5cbiAgICBwcml2YXRlIGdldCBzY3JvbGxiYXJzKCk6IFtib29sZWFuLCBib29sZWFuXSB7XG4gICAgICAgIGNvbnN0IHtjbGllbnRIZWlnaHQsIHNjcm9sbEhlaWdodCwgY2xpZW50V2lkdGgsIHNjcm9sbFdpZHRofSA9IHRoaXMuc2Nyb2xsUmVmO1xuXG4gICAgICAgIHJldHVybiBbXG4gICAgICAgICAgICBNYXRoLmNlaWwoKGNsaWVudEhlaWdodCAvIHNjcm9sbEhlaWdodCkgKiAxMDApIDwgMTAwLFxuICAgICAgICAgICAgTWF0aC5jZWlsKChjbGllbnRXaWR0aCAvIHNjcm9sbFdpZHRoKSAqIDEwMCkgPCAxMDAsXG4gICAgICAgIF07XG4gICAgfVxufVxuIiwiPG5nLWNvbnRhaW5lciAqbmdJZj1cIm5hdGl2ZVNjcm9sbGJhcjsgZWxzZSBjdXN0b21cIiAvPlxuPG5nLXRlbXBsYXRlICNjdXN0b20+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cInJlZnJlc2gkIHwgYXN5bmMgYXMgYmFyc1wiPlxuICAgICAgICA8ZGl2XG4gICAgICAgICAgICAqbmdJZj1cImJhcnNbMF1cIlxuICAgICAgICAgICAgdHVpQW5pbWF0ZWRcbiAgICAgICAgICAgIGNsYXNzPVwidC1iYXIgdC1iYXJfdmVydGljYWxcIlxuICAgICAgICAgICAgW2NsYXNzLnQtYmFyX2hhcy1ob3Jpem9udGFsXT1cImJhcnNbMV1cIlxuICAgICAgICAgICAgKG1vdXNlZG93bi5jYXB0dXJlLnByZXZlbnQpPVwiKDApXCJcbiAgICAgICAgPlxuICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICAgIHR1aVNjcm9sbGJhcj1cInZlcnRpY2FsXCJcbiAgICAgICAgICAgICAgICBjbGFzcz1cInQtdGh1bWJcIlxuICAgICAgICAgICAgPjwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdlxuICAgICAgICAgICAgKm5nSWY9XCJiYXJzWzFdXCJcbiAgICAgICAgICAgIHR1aUFuaW1hdGVkXG4gICAgICAgICAgICBjbGFzcz1cInQtYmFyIHQtYmFyX2hvcml6b250YWxcIlxuICAgICAgICAgICAgW2NsYXNzLnQtYmFyX2hhcy12ZXJ0aWNhbF09XCJiYXJzWzBdXCJcbiAgICAgICAgICAgIChtb3VzZWRvd24uY2FwdHVyZS5wcmV2ZW50KT1cIigwKVwiXG4gICAgICAgID5cbiAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgICB0dWlTY3JvbGxiYXI9XCJob3Jpem9udGFsXCJcbiAgICAgICAgICAgICAgICBjbGFzcz1cInQtdGh1bWJcIlxuICAgICAgICAgICAgPjwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICA8L25nLWNvbnRhaW5lcj5cbjwvbmctdGVtcGxhdGU+XG4iXX0=