ng-cw-v12
Version:
Angular UI Component Library
91 lines • 9.76 kB
JavaScript
import { Directive, HostListener, Input } from '@angular/core';
import * as i0 from "@angular/core";
export class HorizontalScrollDirective {
constructor(el, renderer) {
this.el = el;
this.renderer = renderer;
this.isMouseOver = false;
this.scrollBarMode = 'show';
this.applyScrollbarStyles();
}
set ncScrollBar(value) {
this.scrollBarMode = value;
this.updateScrollbarVisibility();
}
ngAfterViewInit() {
this.updateScrollbarVisibility();
}
updateScrollbarVisibility() {
switch (this.scrollBarMode) {
case 'show':
this.renderer.setStyle(this.el.nativeElement, 'overflow-x', 'auto');
break;
case 'hide':
this.renderer.setStyle(this.el.nativeElement, 'overflow-x', 'hidden');
break;
case 'hover':
this.renderer.setStyle(this.el.nativeElement, 'overflow-x', this.isMouseOver ? 'auto' : 'hidden');
break;
}
}
applyScrollbarStyles() {
const styles = `
::-webkit-scrollbar {
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: rgb(206,201,207);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: rgb(120,108,122);
}
`;
const styleElement = this.renderer.createElement('style');
this.renderer.appendChild(styleElement, this.renderer.createText(styles));
this.renderer.appendChild(this.el.nativeElement, styleElement);
}
onMouseEnter() {
this.isMouseOver = true;
if (this.scrollBarMode === 'hover') {
this.updateScrollbarVisibility();
}
}
onMouseLeave() {
this.isMouseOver = false;
if (this.scrollBarMode === 'hover') {
this.updateScrollbarVisibility();
}
}
onWheel(event) {
if (this.isMouseOver) {
event.preventDefault();
this.el.nativeElement.scrollLeft += event.deltaY;
}
}
ngOnDestroy() {
}
}
HorizontalScrollDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: HorizontalScrollDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
HorizontalScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.5", type: HorizontalScrollDirective, selector: "[ncHorizontalScroll]", inputs: { ncScrollBar: "ncScrollBar" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "wheel": "onWheel($event)" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: HorizontalScrollDirective, decorators: [{
type: Directive,
args: [{
selector: '[ncHorizontalScroll]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { ncScrollBar: [{
type: Input
}], onMouseEnter: [{
type: HostListener,
args: ['mouseenter']
}], onMouseLeave: [{
type: HostListener,
args: ['mouseleave']
}], onWheel: [{
type: HostListener,
args: ['wheel', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaG9yaXpvbnRhbC1zY3JvbGwuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50cy93ZWF0aGVyL2hvcml6b250YWwtc2Nyb2xsLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFjLFlBQVksRUFBRSxLQUFLLEVBQXdCLE1BQU0sZUFBZSxDQUFDOztBQUtqRyxNQUFNLE9BQU8seUJBQXlCO0lBU3BDLFlBQW9CLEVBQWMsRUFBVSxRQUFtQjtRQUEzQyxPQUFFLEdBQUYsRUFBRSxDQUFZO1FBQVUsYUFBUSxHQUFSLFFBQVEsQ0FBVztRQVJ2RCxnQkFBVyxHQUFHLEtBQUssQ0FBQztRQUNwQixrQkFBYSxHQUE4QixNQUFNLENBQUM7UUFReEQsSUFBSSxDQUFDLG9CQUFvQixFQUFFLENBQUM7SUFDOUIsQ0FBQztJQVBELElBQWEsV0FBVyxDQUFDLEtBQWdDO1FBQ3ZELElBQUksQ0FBQyxhQUFhLEdBQUcsS0FBSyxDQUFDO1FBQzNCLElBQUksQ0FBQyx5QkFBeUIsRUFBRSxDQUFDO0lBQ25DLENBQUM7SUFNRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLHlCQUF5QixFQUFFLENBQUM7SUFDbkMsQ0FBQztJQUVPLHlCQUF5QjtRQUMvQixRQUFRLElBQUksQ0FBQyxhQUFhLEVBQUU7WUFDMUIsS0FBSyxNQUFNO2dCQUNULElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLENBQUMsQ0FBQztnQkFDcEUsTUFBTTtZQUNSLEtBQUssTUFBTTtnQkFDVCxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsRUFBRSxZQUFZLEVBQUUsUUFBUSxDQUFDLENBQUM7Z0JBQ3RFLE1BQU07WUFDUixLQUFLLE9BQU87Z0JBQ1YsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsWUFBWSxFQUFFLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUM7Z0JBQ2xHLE1BQU07U0FDVDtJQUNILENBQUM7SUFFTyxvQkFBb0I7UUFDMUIsTUFBTSxNQUFNLEdBQUc7Ozs7Ozs7Ozs7Ozs7O0tBY2QsQ0FBQztRQUNGLE1BQU0sWUFBWSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsYUFBYSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQzFELElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLFlBQVksRUFBRSxJQUFJLENBQUMsUUFBUSxDQUFDLFVBQVUsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDO1FBQzFFLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLFlBQVksQ0FBQyxDQUFDO0lBQ2pFLENBQUM7SUFHRCxZQUFZO1FBQ1YsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUM7UUFDeEIsSUFBSSxJQUFJLENBQUMsYUFBYSxLQUFLLE9BQU8sRUFBRTtZQUNsQyxJQUFJLENBQUMseUJBQXlCLEVBQUUsQ0FBQztTQUNsQztJQUNILENBQUM7SUFHRCxZQUFZO1FBQ1YsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFLLENBQUM7UUFDekIsSUFBSSxJQUFJLENBQUMsYUFBYSxLQUFLLE9BQU8sRUFBRTtZQUNsQyxJQUFJLENBQUMseUJBQXlCLEVBQUUsQ0FBQztTQUNsQztJQUNILENBQUM7SUFHRCxPQUFPLENBQUMsS0FBaUI7UUFDdkIsSUFBSSxJQUFJLENBQUMsV0FBVyxFQUFFO1lBQ3BCLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztZQUN2QixJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsQ0FBQyxVQUFVLElBQUksS0FBSyxDQUFDLE1BQU0sQ0FBQztTQUNsRDtJQUNILENBQUM7SUFFRCxXQUFXO0lBRVgsQ0FBQzs7c0hBOUVVLHlCQUF5QjswR0FBekIseUJBQXlCOzJGQUF6Qix5QkFBeUI7a0JBSHJDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLHNCQUFzQjtpQkFDakM7eUhBS2MsV0FBVztzQkFBdkIsS0FBSztnQkFpRE4sWUFBWTtzQkFEWCxZQUFZO3VCQUFDLFlBQVk7Z0JBUzFCLFlBQVk7c0JBRFgsWUFBWTt1QkFBQyxZQUFZO2dCQVMxQixPQUFPO3NCQUROLFlBQVk7dUJBQUMsT0FBTyxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRGlyZWN0aXZlLCBFbGVtZW50UmVmLCBIb3N0TGlzdGVuZXIsIElucHV0LCBPbkRlc3Ryb3ksIFJlbmRlcmVyMiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuQERpcmVjdGl2ZSh7XHJcbiAgc2VsZWN0b3I6ICdbbmNIb3Jpem9udGFsU2Nyb2xsXSdcclxufSlcclxuZXhwb3J0IGNsYXNzIEhvcml6b250YWxTY3JvbGxEaXJlY3RpdmUgaW1wbGVtZW50cyBPbkRlc3Ryb3kge1xyXG4gIHByaXZhdGUgaXNNb3VzZU92ZXIgPSBmYWxzZTtcclxuICBwcml2YXRlIHNjcm9sbEJhck1vZGU6ICdzaG93JyB8ICdoaWRlJyB8ICdob3ZlcicgPSAnc2hvdyc7XHJcblxyXG4gIEBJbnB1dCgpIHNldCBuY1Njcm9sbEJhcih2YWx1ZTogJ3Nob3cnIHwgJ2hpZGUnIHwgJ2hvdmVyJykge1xyXG4gICAgdGhpcy5zY3JvbGxCYXJNb2RlID0gdmFsdWU7XHJcbiAgICB0aGlzLnVwZGF0ZVNjcm9sbGJhclZpc2liaWxpdHkoKTtcclxuICB9XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZWw6IEVsZW1lbnRSZWYsIHByaXZhdGUgcmVuZGVyZXI6IFJlbmRlcmVyMikge1xyXG4gICAgdGhpcy5hcHBseVNjcm9sbGJhclN0eWxlcygpO1xyXG4gIH1cclxuXHJcbiAgbmdBZnRlclZpZXdJbml0KCkge1xyXG4gICAgdGhpcy51cGRhdGVTY3JvbGxiYXJWaXNpYmlsaXR5KCk7XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIHVwZGF0ZVNjcm9sbGJhclZpc2liaWxpdHkoKSB7XHJcbiAgICBzd2l0Y2ggKHRoaXMuc2Nyb2xsQmFyTW9kZSkge1xyXG4gICAgICBjYXNlICdzaG93JzpcclxuICAgICAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgJ292ZXJmbG93LXgnLCAnYXV0bycpO1xyXG4gICAgICAgIGJyZWFrO1xyXG4gICAgICBjYXNlICdoaWRlJzpcclxuICAgICAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgJ292ZXJmbG93LXgnLCAnaGlkZGVuJyk7XHJcbiAgICAgICAgYnJlYWs7XHJcbiAgICAgIGNhc2UgJ2hvdmVyJzpcclxuICAgICAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgJ292ZXJmbG93LXgnLCB0aGlzLmlzTW91c2VPdmVyID8gJ2F1dG8nIDogJ2hpZGRlbicpO1xyXG4gICAgICAgIGJyZWFrO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBhcHBseVNjcm9sbGJhclN0eWxlcygpIHtcclxuICAgIGNvbnN0IHN0eWxlcyA9IGBcclxuICAgICAgOjotd2Via2l0LXNjcm9sbGJhciB7XHJcbiAgICAgICAgaGVpZ2h0OiA4cHg7XHJcbiAgICAgIH1cclxuICAgICAgOjotd2Via2l0LXNjcm9sbGJhci10cmFjayB7XHJcbiAgICAgICAgYmFja2dyb3VuZDogI2YxZjFmMTtcclxuICAgICAgfVxyXG4gICAgICA6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHtcclxuICAgICAgICBiYWNrZ3JvdW5kOiByZ2IoMjA2LDIwMSwyMDcpO1xyXG4gICAgICAgIGJvcmRlci1yYWRpdXM6IDRweDtcclxuICAgICAgfVxyXG4gICAgICA6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iOmhvdmVyIHtcclxuICAgICAgICBiYWNrZ3JvdW5kOiByZ2IoMTIwLDEwOCwxMjIpO1xyXG4gICAgICB9XHJcbiAgICBgO1xyXG4gICAgY29uc3Qgc3R5bGVFbGVtZW50ID0gdGhpcy5yZW5kZXJlci5jcmVhdGVFbGVtZW50KCdzdHlsZScpO1xyXG4gICAgdGhpcy5yZW5kZXJlci5hcHBlbmRDaGlsZChzdHlsZUVsZW1lbnQsIHRoaXMucmVuZGVyZXIuY3JlYXRlVGV4dChzdHlsZXMpKTtcclxuICAgIHRoaXMucmVuZGVyZXIuYXBwZW5kQ2hpbGQodGhpcy5lbC5uYXRpdmVFbGVtZW50LCBzdHlsZUVsZW1lbnQpO1xyXG4gIH1cclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignbW91c2VlbnRlcicpXHJcbiAgb25Nb3VzZUVudGVyKCkge1xyXG4gICAgdGhpcy5pc01vdXNlT3ZlciA9IHRydWU7XHJcbiAgICBpZiAodGhpcy5zY3JvbGxCYXJNb2RlID09PSAnaG92ZXInKSB7XHJcbiAgICAgIHRoaXMudXBkYXRlU2Nyb2xsYmFyVmlzaWJpbGl0eSgpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignbW91c2VsZWF2ZScpXHJcbiAgb25Nb3VzZUxlYXZlKCkge1xyXG4gICAgdGhpcy5pc01vdXNlT3ZlciA9IGZhbHNlO1xyXG4gICAgaWYgKHRoaXMuc2Nyb2xsQmFyTW9kZSA9PT0gJ2hvdmVyJykge1xyXG4gICAgICB0aGlzLnVwZGF0ZVNjcm9sbGJhclZpc2liaWxpdHkoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ3doZWVsJywgWyckZXZlbnQnXSlcclxuICBvbldoZWVsKGV2ZW50OiBXaGVlbEV2ZW50KSB7XHJcbiAgICBpZiAodGhpcy5pc01vdXNlT3Zlcikge1xyXG4gICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xyXG4gICAgICB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQuc2Nyb2xsTGVmdCArPSBldmVudC5kZWx0YVk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBuZ09uRGVzdHJveSgpIHtcclxuXHJcbiAgfVxyXG59Il19