primeng/bundles/primeng-scrollpanel.umd.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [![Discord](https://img.shields.io/discord/557940238991753

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("primeng/dom"),require("primeng/api")):"function"==typeof define&&define.amd?define("primeng/scrollpanel",["exports","@angular/core","@angular/common","primeng/dom","primeng/api"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).primeng=e.primeng||{},e.primeng.scrollpanel={}),e.ng.core,e.ng.common,e.primeng.dom,e.primeng.api)}(this,(function(e,t,n,o,i){"use strict";var a=function(){function e(e,t,n){this.el=e,this.zone=t,this.cd=n,this.timeoutFrame=function(e){return setTimeout(e,0)}}return e.prototype.ngAfterViewInit=function(){var e=this;this.zone.runOutsideAngular((function(){e.moveBar(),e.moveBar=e.moveBar.bind(e),e.onXBarMouseDown=e.onXBarMouseDown.bind(e),e.onYBarMouseDown=e.onYBarMouseDown.bind(e),e.onDocumentMouseMove=e.onDocumentMouseMove.bind(e),e.onDocumentMouseUp=e.onDocumentMouseUp.bind(e),window.addEventListener("resize",e.moveBar),e.contentViewChild.nativeElement.addEventListener("scroll",e.moveBar),e.contentViewChild.nativeElement.addEventListener("mouseenter",e.moveBar),e.xBarViewChild.nativeElement.addEventListener("mousedown",e.onXBarMouseDown),e.yBarViewChild.nativeElement.addEventListener("mousedown",e.onYBarMouseDown),e.calculateContainerHeight(),e.initialized=!0}))},e.prototype.ngAfterContentInit=function(){var e=this;this.templates.forEach((function(t){switch(t.getType()){case"content":default:e.contentTemplate=t.template}}))},e.prototype.calculateContainerHeight=function(){var e=this.containerViewChild.nativeElement,t=this.contentViewChild.nativeElement,n=this.xBarViewChild.nativeElement,i=getComputedStyle(e),a=getComputedStyle(n),r=o.DomHandler.getHeight(e)-parseInt(a.height,10);"none"!=i["max-height"]&&0==r&&(t.offsetHeight+parseInt(a.height,10)>parseInt(i["max-height"],10)?e.style.height=i["max-height"]:e.style.height=t.offsetHeight+parseFloat(i.paddingTop)+parseFloat(i.paddingBottom)+parseFloat(i.borderTopWidth)+parseFloat(i.borderBottomWidth)+"px")},e.prototype.moveBar=function(){var e=this,t=this.containerViewChild.nativeElement,n=this.contentViewChild.nativeElement,i=this.xBarViewChild.nativeElement,a=n.scrollWidth,r=n.clientWidth,l=-1*(t.clientHeight-i.clientHeight);this.scrollXRatio=r/a;var s=this.yBarViewChild.nativeElement,p=n.scrollHeight,c=n.clientHeight,d=-1*(t.clientWidth-s.clientWidth);this.scrollYRatio=c/p,this.requestAnimationFrame((function(){if(e.scrollXRatio>=1)o.DomHandler.addClass(i,"p-scrollpanel-hidden");else{o.DomHandler.removeClass(i,"p-scrollpanel-hidden");var t=Math.max(100*e.scrollXRatio,10),h=n.scrollLeft*(100-t)/(a-r);i.style.cssText="width:"+t+"%; left:"+h+"%;bottom:"+l+"px;"}if(e.scrollYRatio>=1)o.DomHandler.addClass(s,"p-scrollpanel-hidden");else{o.DomHandler.removeClass(s,"p-scrollpanel-hidden");var m=Math.max(100*e.scrollYRatio,10),u=n.scrollTop*(100-m)/(p-c);s.style.cssText="height:"+m+"%; top: calc("+u+"% - "+i.clientHeight+"px);right:"+d+"px;"}}))},e.prototype.onYBarMouseDown=function(e){this.isYBarClicked=!0,this.lastPageY=e.pageY,o.DomHandler.addClass(this.yBarViewChild.nativeElement,"p-scrollpanel-grabbed"),o.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",this.onDocumentMouseMove),document.addEventListener("mouseup",this.onDocumentMouseUp),e.preventDefault()},e.prototype.onXBarMouseDown=function(e){this.isXBarClicked=!0,this.lastPageX=e.pageX,o.DomHandler.addClass(this.xBarViewChild.nativeElement,"p-scrollpanel-grabbed"),o.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",this.onDocumentMouseMove),document.addEventListener("mouseup",this.onDocumentMouseUp),e.preventDefault()},e.prototype.onDocumentMouseMove=function(e){this.isXBarClicked?this.onMouseMoveForXBar(e):(this.isYBarClicked||this.onMouseMoveForXBar(e),this.onMouseMoveForYBar(e))},e.prototype.onMouseMoveForXBar=function(e){var t=this,n=e.pageX-this.lastPageX;this.lastPageX=e.pageX,this.requestAnimationFrame((function(){t.contentViewChild.nativeElement.scrollLeft+=n/t.scrollXRatio}))},e.prototype.onMouseMoveForYBar=function(e){var t=this,n=e.pageY-this.lastPageY;this.lastPageY=e.pageY,this.requestAnimationFrame((function(){t.contentViewChild.nativeElement.scrollTop+=n/t.scrollYRatio}))},e.prototype.scrollTop=function(e){var t=this.contentViewChild.nativeElement.scrollHeight-this.contentViewChild.nativeElement.clientHeight;e=e>t?t:e>0?e:0,this.contentViewChild.nativeElement.scrollTop=e},e.prototype.onDocumentMouseUp=function(e){o.DomHandler.removeClass(this.yBarViewChild.nativeElement,"p-scrollpanel-grabbed"),o.DomHandler.removeClass(this.xBarViewChild.nativeElement,"p-scrollpanel-grabbed"),o.DomHandler.removeClass(document.body,"p-scrollpanel-grabbed"),document.removeEventListener("mousemove",this.onDocumentMouseMove),document.removeEventListener("mouseup",this.onDocumentMouseUp),this.isXBarClicked=!1,this.isYBarClicked=!1},e.prototype.requestAnimationFrame=function(e){(window.requestAnimationFrame||this.timeoutFrame)(e)},e.prototype.ngOnDestroy=function(){this.initialized&&(window.removeEventListener("resize",this.moveBar),this.contentViewChild.nativeElement.removeEventListener("scroll",this.moveBar),this.contentViewChild.nativeElement.removeEventListener("mouseenter",this.moveBar),this.xBarViewChild.nativeElement.removeEventListener("mousedown",this.onXBarMouseDown),this.yBarViewChild.nativeElement.removeEventListener("mousedown",this.onYBarMouseDown))},e.prototype.refresh=function(){this.moveBar()},e}();a.decorators=[{type:t.Component,args:[{selector:"p-scrollPanel",template:'\n        <div #container [ngClass]="\'p-scrollpanel p-component\'" [ngStyle]="style" [class]="styleClass">\n            <div class="p-scrollpanel-wrapper">\n                <div #content class="p-scrollpanel-content">\n                    <ng-content></ng-content>\n                    <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>\n                </div>\n            </div>\n            <div #xBar class="p-scrollpanel-bar p-scrollpanel-bar-x"></div>\n            <div #yBar class="p-scrollpanel-bar p-scrollpanel-bar-y"></div>   \n        </div>\n    ',changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None,styles:[".p-scrollpanel-wrapper{float:left;height:100%;overflow:hidden;position:relative;width:100%;z-index:1}.p-scrollpanel-content{box-sizing:border-box;height:calc(100% + 18px);overflow:auto;padding:0 18px 18px 0;position:relative;width:calc(100% + 18px)}.p-scrollpanel-bar{background:#c1c1c1;border-radius:3px;cursor:pointer;opacity:0;position:relative;transition:opacity .25s linear;z-index:2}.p-scrollpanel-bar-y{top:0;width:9px}.p-scrollpanel-bar-x{bottom:0;height:9px}.p-scrollpanel-hidden{visibility:hidden}.p-scrollpanel:active .p-scrollpanel-bar,.p-scrollpanel:hover .p-scrollpanel-bar{opacity:1}.p-scrollpanel-grabbed{-ms-user-select:none;-webkit-user-select:none;user-select:none}"]}]}],a.ctorParameters=function(){return[{type:t.ElementRef},{type:t.NgZone},{type:t.ChangeDetectorRef}]},a.propDecorators={style:[{type:t.Input}],styleClass:[{type:t.Input}],containerViewChild:[{type:t.ViewChild,args:["container"]}],contentViewChild:[{type:t.ViewChild,args:["content"]}],xBarViewChild:[{type:t.ViewChild,args:["xBar"]}],yBarViewChild:[{type:t.ViewChild,args:["yBar"]}],templates:[{type:t.ContentChildren,args:[i.PrimeTemplate]}]};var r=function(){};r.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule],exports:[a],declarations:[a]}]}],e.ScrollPanel=a,e.ScrollPanelModule=r,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=primeng-scrollpanel.umd.min.js.map