ng-cw-v12
Version:
Angular UI component library
91 lines • 9.78 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaG9yaXpvbnRhbC1zY3JvbGwuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50cy9ob3Jpem9udGFsLXNjcm9sbC9ob3Jpem9udGFsLXNjcm9sbC5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxZQUFZLEVBQUUsS0FBSyxFQUF3QixNQUFNLGVBQWUsQ0FBQzs7QUFLakcsTUFBTSxPQUFPLHlCQUF5QjtJQVNwQyxZQUFvQixFQUFjLEVBQVUsUUFBbUI7UUFBM0MsT0FBRSxHQUFGLEVBQUUsQ0FBWTtRQUFVLGFBQVEsR0FBUixRQUFRLENBQVc7UUFSdkQsZ0JBQVcsR0FBRyxLQUFLLENBQUM7UUFDcEIsa0JBQWEsR0FBOEIsTUFBTSxDQUFDO1FBUXhELElBQUksQ0FBQyxvQkFBb0IsRUFBRSxDQUFDO0lBQzlCLENBQUM7SUFQRCxJQUFhLFdBQVcsQ0FBQyxLQUFnQztRQUN2RCxJQUFJLENBQUMsYUFBYSxHQUFHLEtBQUssQ0FBQztRQUMzQixJQUFJLENBQUMseUJBQXlCLEVBQUUsQ0FBQztJQUNuQyxDQUFDO0lBTUQsZUFBZTtRQUNiLElBQUksQ0FBQyx5QkFBeUIsRUFBRSxDQUFDO0lBQ25DLENBQUM7SUFFTyx5QkFBeUI7UUFDL0IsUUFBUSxJQUFJLENBQUMsYUFBYSxFQUFFO1lBQzFCLEtBQUssTUFBTTtnQkFDVCxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSxDQUFDLENBQUM7Z0JBQ3BFLE1BQU07WUFDUixLQUFLLE1BQU07Z0JBQ1QsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsWUFBWSxFQUFFLFFBQVEsQ0FBQyxDQUFDO2dCQUN0RSxNQUFNO1lBQ1IsS0FBSyxPQUFPO2dCQUNWLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLFlBQVksRUFBRSxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxDQUFDO2dCQUNsRyxNQUFNO1NBQ1Q7SUFDSCxDQUFDO0lBRU8sb0JBQW9CO1FBQzFCLE1BQU0sTUFBTSxHQUFHOzs7Ozs7Ozs7Ozs7OztLQWNkLENBQUM7UUFDRixNQUFNLFlBQVksR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUMxRCxJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsQ0FBQyxZQUFZLEVBQUUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxVQUFVLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQztRQUMxRSxJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsRUFBRSxZQUFZLENBQUMsQ0FBQztJQUNqRSxDQUFDO0lBR0QsWUFBWTtRQUNWLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDO1FBQ3hCLElBQUksSUFBSSxDQUFDLGFBQWEsS0FBSyxPQUFPLEVBQUU7WUFDbEMsSUFBSSxDQUFDLHlCQUF5QixFQUFFLENBQUM7U0FDbEM7SUFDSCxDQUFDO0lBR0QsWUFBWTtRQUNWLElBQUksQ0FBQyxXQUFXLEdBQUcsS0FBSyxDQUFDO1FBQ3pCLElBQUksSUFBSSxDQUFDLGFBQWEsS0FBSyxPQUFPLEVBQUU7WUFDbEMsSUFBSSxDQUFDLHlCQUF5QixFQUFFLENBQUM7U0FDbEM7SUFDSCxDQUFDO0lBR0QsT0FBTyxDQUFDLEtBQWlCO1FBQ3ZCLElBQUksSUFBSSxDQUFDLFdBQVcsRUFBRTtZQUNwQixLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7WUFDdkIsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsVUFBVSxJQUFJLEtBQUssQ0FBQyxNQUFNLENBQUM7U0FDbEQ7SUFDSCxDQUFDO0lBRUQsV0FBVztJQUVYLENBQUM7O3NIQTlFVSx5QkFBeUI7MEdBQXpCLHlCQUF5QjsyRkFBekIseUJBQXlCO2tCQUhyQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxzQkFBc0I7aUJBQ2pDO3lIQUtjLFdBQVc7c0JBQXZCLEtBQUs7Z0JBaUROLFlBQVk7c0JBRFgsWUFBWTt1QkFBQyxZQUFZO2dCQVMxQixZQUFZO3NCQURYLFlBQVk7dUJBQUMsWUFBWTtnQkFTMUIsT0FBTztzQkFETixZQUFZO3VCQUFDLE9BQU8sRUFBRSxDQUFDLFFBQVEsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSwgRWxlbWVudFJlZiwgSG9zdExpc3RlbmVyLCBJbnB1dCwgT25EZXN0cm95LCBSZW5kZXJlcjIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbkBEaXJlY3RpdmUoe1xyXG4gIHNlbGVjdG9yOiAnW25jSG9yaXpvbnRhbFNjcm9sbF0nXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBIb3Jpem9udGFsU2Nyb2xsRGlyZWN0aXZlIGltcGxlbWVudHMgT25EZXN0cm95IHtcclxuICBwcml2YXRlIGlzTW91c2VPdmVyID0gZmFsc2U7XHJcbiAgcHJpdmF0ZSBzY3JvbGxCYXJNb2RlOiAnc2hvdycgfCAnaGlkZScgfCAnaG92ZXInID0gJ3Nob3cnO1xyXG5cclxuICBASW5wdXQoKSBzZXQgbmNTY3JvbGxCYXIodmFsdWU6ICdzaG93JyB8ICdoaWRlJyB8ICdob3ZlcicpIHtcclxuICAgIHRoaXMuc2Nyb2xsQmFyTW9kZSA9IHZhbHVlO1xyXG4gICAgdGhpcy51cGRhdGVTY3JvbGxiYXJWaXNpYmlsaXR5KCk7XHJcbiAgfVxyXG5cclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsOiBFbGVtZW50UmVmLCBwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjIpIHtcclxuICAgIHRoaXMuYXBwbHlTY3JvbGxiYXJTdHlsZXMoKTtcclxuICB9XHJcblxyXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcclxuICAgIHRoaXMudXBkYXRlU2Nyb2xsYmFyVmlzaWJpbGl0eSgpO1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSB1cGRhdGVTY3JvbGxiYXJWaXNpYmlsaXR5KCkge1xyXG4gICAgc3dpdGNoICh0aGlzLnNjcm9sbEJhck1vZGUpIHtcclxuICAgICAgY2FzZSAnc2hvdyc6XHJcbiAgICAgICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQsICdvdmVyZmxvdy14JywgJ2F1dG8nKTtcclxuICAgICAgICBicmVhaztcclxuICAgICAgY2FzZSAnaGlkZSc6XHJcbiAgICAgICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQsICdvdmVyZmxvdy14JywgJ2hpZGRlbicpO1xyXG4gICAgICAgIGJyZWFrO1xyXG4gICAgICBjYXNlICdob3Zlcic6XHJcbiAgICAgICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQsICdvdmVyZmxvdy14JywgdGhpcy5pc01vdXNlT3ZlciA/ICdhdXRvJyA6ICdoaWRkZW4nKTtcclxuICAgICAgICBicmVhaztcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHByaXZhdGUgYXBwbHlTY3JvbGxiYXJTdHlsZXMoKSB7XHJcbiAgICBjb25zdCBzdHlsZXMgPSBgXHJcbiAgICAgIDo6LXdlYmtpdC1zY3JvbGxiYXIge1xyXG4gICAgICAgIGhlaWdodDogOHB4O1xyXG4gICAgICB9XHJcbiAgICAgIDo6LXdlYmtpdC1zY3JvbGxiYXItdHJhY2sge1xyXG4gICAgICAgIGJhY2tncm91bmQ6ICNmMWYxZjE7XHJcbiAgICAgIH1cclxuICAgICAgOjotd2Via2l0LXNjcm9sbGJhci10aHVtYiB7XHJcbiAgICAgICAgYmFja2dyb3VuZDogcmdiKDIwNiwyMDEsMjA3KTtcclxuICAgICAgICBib3JkZXItcmFkaXVzOiA0cHg7XHJcbiAgICAgIH1cclxuICAgICAgOjotd2Via2l0LXNjcm9sbGJhci10aHVtYjpob3ZlciB7XHJcbiAgICAgICAgYmFja2dyb3VuZDogcmdiKDEyMCwxMDgsMTIyKTtcclxuICAgICAgfVxyXG4gICAgYDtcclxuICAgIGNvbnN0IHN0eWxlRWxlbWVudCA9IHRoaXMucmVuZGVyZXIuY3JlYXRlRWxlbWVudCgnc3R5bGUnKTtcclxuICAgIHRoaXMucmVuZGVyZXIuYXBwZW5kQ2hpbGQoc3R5bGVFbGVtZW50LCB0aGlzLnJlbmRlcmVyLmNyZWF0ZVRleHQoc3R5bGVzKSk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLmFwcGVuZENoaWxkKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgc3R5bGVFbGVtZW50KTtcclxuICB9XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ21vdXNlZW50ZXInKVxyXG4gIG9uTW91c2VFbnRlcigpIHtcclxuICAgIHRoaXMuaXNNb3VzZU92ZXIgPSB0cnVlO1xyXG4gICAgaWYgKHRoaXMuc2Nyb2xsQmFyTW9kZSA9PT0gJ2hvdmVyJykge1xyXG4gICAgICB0aGlzLnVwZGF0ZVNjcm9sbGJhclZpc2liaWxpdHkoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ21vdXNlbGVhdmUnKVxyXG4gIG9uTW91c2VMZWF2ZSgpIHtcclxuICAgIHRoaXMuaXNNb3VzZU92ZXIgPSBmYWxzZTtcclxuICAgIGlmICh0aGlzLnNjcm9sbEJhck1vZGUgPT09ICdob3ZlcicpIHtcclxuICAgICAgdGhpcy51cGRhdGVTY3JvbGxiYXJWaXNpYmlsaXR5KCk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBASG9zdExpc3RlbmVyKCd3aGVlbCcsIFsnJGV2ZW50J10pXHJcbiAgb25XaGVlbChldmVudDogV2hlZWxFdmVudCkge1xyXG4gICAgaWYgKHRoaXMuaXNNb3VzZU92ZXIpIHtcclxuICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcclxuICAgICAgdGhpcy5lbC5uYXRpdmVFbGVtZW50LnNjcm9sbExlZnQgKz0gZXZlbnQuZGVsdGFZO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgbmdPbkRlc3Ryb3koKSB7XHJcblxyXG4gIH1cclxufSJdfQ==