@omnedia/ngx-scrollbar/fesm2022/omnedia-ngx-scrollbar.mjs

A simple component library to create a custom scrollbar for the Y-Direction.

import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { signal, HostListener, Input, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';

class NgxScrollbarComponent {
    sidebarRef;
    wrapperRef;
    contentRef;
    scrollbarRef;
    styleClass;
    set onlyShowOnHover(onlyShowOnHover) {
        this.style['--om-scrollbar-hover-display'] = onlyShowOnHover ? 'none' : 'block';
    }
    style = {};
    scrollPercent = 0;
    mouseDown = signal(false, ...(ngDevMode ? [{ debugName: "mouseDown" }] : []));
    lastY;
    onMouseDown(event) {
        const target = event.target;
        if (target.classList.contains('om-scrollbar-bar')) {
            event.preventDefault();
            this.mouseDown.set(true);
        }
    }
    onMouseUp() {
        this.lastY = undefined;
        this.mouseDown.set(false);
    }
    ngAfterViewInit() {
        window.addEventListener('mouseup', () => {
            this.lastY = undefined;
            this.mouseDown.set(false);
        });
        window.addEventListener('mousemove', (event) => this.onDrag(event));
        this.calcScrollbar();
    }
    calcScrollbar() {
        const sideBarHeight = this.sidebarRef.nativeElement.clientHeight;
        const contentHeight = this.contentRef.nativeElement.clientHeight;
        const scrollBarHeight = Math.floor(sideBarHeight / contentHeight * 100);
        this.style['--om-scrollbar-height'] = `${scrollBarHeight}%`;
    }
    onScroll(event) {
        const target = event.target;
        const contentHeight = this.contentRef.nativeElement.clientHeight;
        const scrollTop = target.scrollTop;
        this.scrollPercent = Math.floor(scrollTop / contentHeight * 100);
        this.style['--om-scrollbar-top'] = `${this.scrollPercent}%`;
    }
    onDrag(event) {
        if (!this.mouseDown()) {
            return;
        }
        event.preventDefault();
        const offsetY = event.clientY;
        const scrollPx = offsetY - (this.lastY ?? offsetY);
        this.lastY = offsetY;
        const contentHeight = this.sidebarRef.nativeElement.clientHeight;
        const scrollPercent = (scrollPx) / (contentHeight);
        const scrollContentPx = this.contentRef.nativeElement.clientHeight * scrollPercent;
        this.wrapperRef.nativeElement.scrollBy(0, scrollContentPx);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NgxScrollbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: NgxScrollbarComponent, isStandalone: true, selector: "om-scrollbar", inputs: { styleClass: "styleClass", onlyShowOnHover: "onlyShowOnHover" }, host: { listeners: { "mousedown": "onMouseDown($event)", "mouseup": "onMouseUp()" } }, viewQueries: [{ propertyName: "sidebarRef", first: true, predicate: ["OmScrollbarContainer"], descendants: true }, { propertyName: "wrapperRef", first: true, predicate: ["OmScrollbarWrapper"], descendants: true }, { propertyName: "contentRef", first: true, predicate: ["OmScrollbarContent"], descendants: true }, { propertyName: "scrollbarRef", first: true, predicate: ["OmScrollbar"], descendants: true }], ngImport: i0, template: "<div class=\"om-scrollbar\" [ngStyle]=\"style\" #OmScrollbarContainer>\r\n  <div class=\"om-scrollbar-wrapper\" (scroll)=\"onScroll($event)\" #OmScrollbarWrapper>\r\n    <div class=\"om-scrollbar-content\" #OmScrollbarContent>\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"om-scrollbar-bar\" [class.om-scrollbar-bar-active]=\"mouseDown()\" [ngClass]=\"styleClass\" #OmScrollbar>\r\n  </div>\r\n</div>\r\n", styles: [".om-scrollbar{--om-scrollbar-height: 0;--om-scrollbar-top: 0;--om-scrollbar-hover-display: block;position:relative;height:100%}.om-scrollbar .om-scrollbar-bar{position:absolute;display:var(--om-scrollbar-hover-display);width:.625rem;height:var(--om-scrollbar-height);top:var(--om-scrollbar-top);background-color:gray;right:-1.5rem;border-radius:10px;transition:opacity .2s}.om-scrollbar .om-scrollbar-bar:hover,.om-scrollbar .om-scrollbar-bar.om-scrollbar-bar-active{opacity:.8}.om-scrollbar:hover>.om-scrollbar-bar{display:block}.om-scrollbar .om-scrollbar-wrapper{overflow-y:auto;height:100%;scrollbar-width:none}.om-scrollbar .om-scrollbar-wrapper::-webkit-scrollbar{display:none}.om-scrollbar .om-scrollbar-content{height:fit-content}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NgxScrollbarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'om-scrollbar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"om-scrollbar\" [ngStyle]=\"style\" #OmScrollbarContainer>\r\n  <div class=\"om-scrollbar-wrapper\" (scroll)=\"onScroll($event)\" #OmScrollbarWrapper>\r\n    <div class=\"om-scrollbar-content\" #OmScrollbarContent>\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"om-scrollbar-bar\" [class.om-scrollbar-bar-active]=\"mouseDown()\" [ngClass]=\"styleClass\" #OmScrollbar>\r\n  </div>\r\n</div>\r\n", styles: [".om-scrollbar{--om-scrollbar-height: 0;--om-scrollbar-top: 0;--om-scrollbar-hover-display: block;position:relative;height:100%}.om-scrollbar .om-scrollbar-bar{position:absolute;display:var(--om-scrollbar-hover-display);width:.625rem;height:var(--om-scrollbar-height);top:var(--om-scrollbar-top);background-color:gray;right:-1.5rem;border-radius:10px;transition:opacity .2s}.om-scrollbar .om-scrollbar-bar:hover,.om-scrollbar .om-scrollbar-bar.om-scrollbar-bar-active{opacity:.8}.om-scrollbar:hover>.om-scrollbar-bar{display:block}.om-scrollbar .om-scrollbar-wrapper{overflow-y:auto;height:100%;scrollbar-width:none}.om-scrollbar .om-scrollbar-wrapper::-webkit-scrollbar{display:none}.om-scrollbar .om-scrollbar-content{height:fit-content}\n"] }]
        }], propDecorators: { sidebarRef: [{
                type: ViewChild,
                args: ['OmScrollbarContainer']
            }], wrapperRef: [{
                type: ViewChild,
                args: ['OmScrollbarWrapper']
            }], contentRef: [{
                type: ViewChild,
                args: ['OmScrollbarContent']
            }], scrollbarRef: [{
                type: ViewChild,
                args: ['OmScrollbar']
            }], styleClass: [{
                type: Input,
                args: ['styleClass']
            }], onlyShowOnHover: [{
                type: Input,
                args: ['onlyShowOnHover']
            }], onMouseDown: [{
                type: HostListener,
                args: ['mousedown', ['$event']]
            }], onMouseUp: [{
                type: HostListener,
                args: ['mouseup']
            }] } });

/*
 * Public API Surface of ngx-scrollbar
 */

/**
 * Generated bundle index. Do not edit.
 */

export { NgxScrollbarComponent };
//# sourceMappingURL=omnedia-ngx-scrollbar.mjs.map