ng-cw-v12
Version:
Angular UI component library
139 lines (130 loc) • 7.47 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core')) :
typeof define === 'function' && define.amd ? define('ng-cw-v12/horizontal-scroll', ['exports', '@angular/core'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-cw-v12"] = global["ng-cw-v12"] || {}, global["ng-cw-v12"]["horizontal-scroll"] = {}), global.ng.core));
})(this, (function (exports, i0) { 'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
var HorizontalScrollDirective = /** @class */ (function () {
function HorizontalScrollDirective(el, renderer) {
this.el = el;
this.renderer = renderer;
this.isMouseOver = false;
this.scrollBarMode = 'show';
this.applyScrollbarStyles();
}
Object.defineProperty(HorizontalScrollDirective.prototype, "ncScrollBar", {
set: function (value) {
this.scrollBarMode = value;
this.updateScrollbarVisibility();
},
enumerable: false,
configurable: true
});
HorizontalScrollDirective.prototype.ngAfterViewInit = function () {
this.updateScrollbarVisibility();
};
HorizontalScrollDirective.prototype.updateScrollbarVisibility = function () {
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;
}
};
HorizontalScrollDirective.prototype.applyScrollbarStyles = function () {
var styles = "\n ::-webkit-scrollbar {\n height: 8px;\n }\n ::-webkit-scrollbar-track {\n background: #f1f1f1;\n }\n ::-webkit-scrollbar-thumb {\n background: rgb(206,201,207);\n border-radius: 4px;\n }\n ::-webkit-scrollbar-thumb:hover {\n background: rgb(120,108,122);\n }\n ";
var styleElement = this.renderer.createElement('style');
this.renderer.appendChild(styleElement, this.renderer.createText(styles));
this.renderer.appendChild(this.el.nativeElement, styleElement);
};
HorizontalScrollDirective.prototype.onMouseEnter = function () {
this.isMouseOver = true;
if (this.scrollBarMode === 'hover') {
this.updateScrollbarVisibility();
}
};
HorizontalScrollDirective.prototype.onMouseLeave = function () {
this.isMouseOver = false;
if (this.scrollBarMode === 'hover') {
this.updateScrollbarVisibility();
}
};
HorizontalScrollDirective.prototype.onWheel = function (event) {
if (this.isMouseOver) {
event.preventDefault();
this.el.nativeElement.scrollLeft += event.deltaY;
}
};
HorizontalScrollDirective.prototype.ngOnDestroy = function () {
};
return HorizontalScrollDirective;
}());
HorizontalScrollDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: HorizontalScrollDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Directive });
HorizontalScrollDirective.ɵdir = i0__namespace.ɵɵ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__namespace });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: HorizontalScrollDirective, decorators: [{
type: i0.Directive,
args: [{
selector: '[ncHorizontalScroll]'
}]
}], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { ncScrollBar: [{
type: i0.Input
}], onMouseEnter: [{
type: i0.HostListener,
args: ['mouseenter']
}], onMouseLeave: [{
type: i0.HostListener,
args: ['mouseleave']
}], onWheel: [{
type: i0.HostListener,
args: ['wheel', ['$event']]
}] } });
var NcHorizontalScrollModule = /** @class */ (function () {
function NcHorizontalScrollModule() {
}
return NcHorizontalScrollModule;
}());
NcHorizontalScrollModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcHorizontalScrollModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcHorizontalScrollModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcHorizontalScrollModule, declarations: [HorizontalScrollDirective], exports: [HorizontalScrollDirective] });
NcHorizontalScrollModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcHorizontalScrollModule, imports: [[]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcHorizontalScrollModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
HorizontalScrollDirective
],
imports: [],
exports: [
HorizontalScrollDirective
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.HorizontalScrollDirective = HorizontalScrollDirective;
exports.NcHorizontalScrollModule = NcHorizontalScrollModule;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-horizontal-scroll.umd.js.map