501 lines
65 KiB
JavaScript
501 lines
65 KiB
JavaScript
|
import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
|
||
|
|
import { ChangeDetectionStrategy, Component, ContentChildren, Inject, Input, NgModule, PLATFORM_ID, ViewChild, ViewEncapsulation, numberAttribute } from '@angular/core';
|
||
|
|
import { PrimeTemplate } from 'primeng/api';
|
||
|
|
import { DomHandler } from 'primeng/dom';
|
||
|
|
import { UniqueComponentId } from 'primeng/utils';
|
||
|
|
import * as i0 from "@angular/core";
|
||
|
|
import * as i1 from "@angular/common";
|
||
|
|
/**
|
||
|
|
* ScrollPanel is a cross browser, lightweight and themable alternative to native browser scrollbar.
|
||
|
|
* @group Components
|
||
|
|
*/
|
||
|
|
export class ScrollPanel {
|
||
|
|
platformId;
|
||
|
|
el;
|
||
|
|
zone;
|
||
|
|
cd;
|
||
|
|
document;
|
||
|
|
renderer;
|
||
|
|
/**
|
||
|
|
* Inline style of the component.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
style;
|
||
|
|
/**
|
||
|
|
* Style class of the component.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
styleClass;
|
||
|
|
/**
|
||
|
|
* Step factor to scroll the content while pressing the arrow keys.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
step = 5;
|
||
|
|
containerViewChild;
|
||
|
|
contentViewChild;
|
||
|
|
xBarViewChild;
|
||
|
|
yBarViewChild;
|
||
|
|
templates;
|
||
|
|
scrollYRatio;
|
||
|
|
scrollXRatio;
|
||
|
|
timeoutFrame = (fn) => setTimeout(fn, 0);
|
||
|
|
initialized = false;
|
||
|
|
lastPageY;
|
||
|
|
lastPageX;
|
||
|
|
isXBarClicked = false;
|
||
|
|
isYBarClicked = false;
|
||
|
|
contentTemplate;
|
||
|
|
lastScrollLeft = 0;
|
||
|
|
lastScrollTop = 0;
|
||
|
|
orientation = 'vertical';
|
||
|
|
timer;
|
||
|
|
contentId;
|
||
|
|
windowResizeListener;
|
||
|
|
contentScrollListener;
|
||
|
|
mouseEnterListener;
|
||
|
|
xBarMouseDownListener;
|
||
|
|
yBarMouseDownListener;
|
||
|
|
documentMouseMoveListener;
|
||
|
|
documentMouseUpListener;
|
||
|
|
constructor(platformId, el, zone, cd, document, renderer) {
|
||
|
|
this.platformId = platformId;
|
||
|
|
this.el = el;
|
||
|
|
this.zone = zone;
|
||
|
|
this.cd = cd;
|
||
|
|
this.document = document;
|
||
|
|
this.renderer = renderer;
|
||
|
|
this.contentId = UniqueComponentId() + '_content';
|
||
|
|
}
|
||
|
|
ngAfterViewInit() {
|
||
|
|
if (isPlatformBrowser(this.platformId)) {
|
||
|
|
this.zone.runOutsideAngular(() => {
|
||
|
|
this.moveBar();
|
||
|
|
this.moveBar = this.moveBar.bind(this);
|
||
|
|
this.onXBarMouseDown = this.onXBarMouseDown.bind(this);
|
||
|
|
this.onYBarMouseDown = this.onYBarMouseDown.bind(this);
|
||
|
|
this.onDocumentMouseMove = this.onDocumentMouseMove.bind(this);
|
||
|
|
this.onDocumentMouseUp = this.onDocumentMouseUp.bind(this);
|
||
|
|
this.windowResizeListener = this.renderer.listen(window, 'resize', this.moveBar);
|
||
|
|
this.contentScrollListener = this.renderer.listen(this.contentViewChild.nativeElement, 'scroll', this.moveBar);
|
||
|
|
this.mouseEnterListener = this.renderer.listen(this.contentViewChild.nativeElement, 'mouseenter', this.moveBar);
|
||
|
|
this.xBarMouseDownListener = this.renderer.listen(this.xBarViewChild.nativeElement, 'mousedown', this.onXBarMouseDown);
|
||
|
|
this.yBarMouseDownListener = this.renderer.listen(this.yBarViewChild.nativeElement, 'mousedown', this.onYBarMouseDown);
|
||
|
|
this.calculateContainerHeight();
|
||
|
|
this.initialized = true;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
ngAfterContentInit() {
|
||
|
|
this.templates.forEach((item) => {
|
||
|
|
switch (item.getType()) {
|
||
|
|
case 'content':
|
||
|
|
this.contentTemplate = item.template;
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
this.contentTemplate = item.template;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
calculateContainerHeight() {
|
||
|
|
let container = this.containerViewChild.nativeElement;
|
||
|
|
let content = this.contentViewChild.nativeElement;
|
||
|
|
let xBar = this.xBarViewChild.nativeElement;
|
||
|
|
const window = this.document.defaultView;
|
||
|
|
let containerStyles = window.getComputedStyle(container), xBarStyles = window.getComputedStyle(xBar), pureContainerHeight = DomHandler.getHeight(container) - parseInt(xBarStyles['height'], 10);
|
||
|
|
if (containerStyles['max-height'] != 'none' && pureContainerHeight == 0) {
|
||
|
|
if (content.offsetHeight + parseInt(xBarStyles['height'], 10) > parseInt(containerStyles['max-height'], 10)) {
|
||
|
|
container.style.height = containerStyles['max-height'];
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
container.style.height = content.offsetHeight + parseFloat(containerStyles.paddingTop) + parseFloat(containerStyles.paddingBottom) + parseFloat(containerStyles.borderTopWidth) + parseFloat(containerStyles.borderBottomWidth) + 'px';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
moveBar() {
|
||
|
|
let container = this.containerViewChild.nativeElement;
|
||
|
|
let content = this.contentViewChild.nativeElement;
|
||
|
|
/* horizontal scroll */
|
||
|
|
let xBar = this.xBarViewChild.nativeElement;
|
||
|
|
let totalWidth = content.scrollWidth;
|
||
|
|
let ownWidth = content.clientWidth;
|
||
|
|
let bottom = (container.clientHeight - xBar.clientHeight) * -1;
|
||
|
|
this.scrollXRatio = ownWidth / totalWidth;
|
||
|
|
/* vertical scroll */
|
||
|
|
let yBar = this.yBarViewChild.nativeElement;
|
||
|
|
let totalHeight = content.scrollHeight;
|
||
|
|
let ownHeight = content.clientHeight;
|
||
|
|
let right = (container.clientWidth - yBar.clientWidth) * -1;
|
||
|
|
this.scrollYRatio = ownHeight / totalHeight;
|
||
|
|
this.requestAnimationFrame(() => {
|
||
|
|
if (this.scrollXRatio >= 1) {
|
||
|
|
xBar.setAttribute('data-p-scrollpanel-hidden', 'true');
|
||
|
|
DomHandler.addClass(xBar, 'p-scrollpanel-hidden');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
|
||
|
|
DomHandler.removeClass(xBar, 'p-scrollpanel-hidden');
|
||
|
|
const xBarWidth = Math.max(this.scrollXRatio * 100, 10);
|
||
|
|
const xBarLeft = (content.scrollLeft * (100 - xBarWidth)) / (totalWidth - ownWidth);
|
||
|
|
xBar.style.cssText = 'width:' + xBarWidth + '%; left:' + xBarLeft + '%;bottom:' + bottom + 'px;';
|
||
|
|
}
|
||
|
|
if (this.scrollYRatio >= 1) {
|
||
|
|
yBar.setAttribute('data-p-scrollpanel-hidden', 'true');
|
||
|
|
DomHandler.addClass(yBar, 'p-scrollpanel-hidden');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
|
||
|
|
DomHandler.removeClass(yBar, 'p-scrollpanel-hidden');
|
||
|
|
const yBarHeight = Math.max(this.scrollYRatio * 100, 10);
|
||
|
|
const yBarTop = (content.scrollTop * (100 - yBarHeight)) / (totalHeight - ownHeight);
|
||
|
|
yBar.style.cssText = 'height:' + yBarHeight + '%; top: calc(' + yBarTop + '% - ' + xBar.clientHeight + 'px);right:' + right + 'px;';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.cd.markForCheck();
|
||
|
|
}
|
||
|
|
onScroll(event) {
|
||
|
|
if (this.lastScrollLeft !== event.target.scrollLeft) {
|
||
|
|
this.lastScrollLeft = event.target.scrollLeft;
|
||
|
|
this.orientation = 'horizontal';
|
||
|
|
}
|
||
|
|
else if (this.lastScrollTop !== event.target.scrollTop) {
|
||
|
|
this.lastScrollTop = event.target.scrollTop;
|
||
|
|
this.orientation = 'vertical';
|
||
|
|
}
|
||
|
|
this.moveBar();
|
||
|
|
}
|
||
|
|
onKeyDown(event) {
|
||
|
|
if (this.orientation === 'vertical') {
|
||
|
|
switch (event.code) {
|
||
|
|
case 'ArrowDown': {
|
||
|
|
this.setTimer('scrollTop', this.step);
|
||
|
|
event.preventDefault();
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
case 'ArrowUp': {
|
||
|
|
this.setTimer('scrollTop', this.step * -1);
|
||
|
|
event.preventDefault();
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
case 'ArrowLeft':
|
||
|
|
case 'ArrowRight': {
|
||
|
|
event.preventDefault();
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
default:
|
||
|
|
//no op
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if (this.orientation === 'horizontal') {
|
||
|
|
switch (event.code) {
|
||
|
|
case 'ArrowRight': {
|
||
|
|
this.setTimer('scrollLeft', this.step);
|
||
|
|
event.preventDefault();
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
case 'ArrowLeft': {
|
||
|
|
this.setTimer('scrollLeft', this.step * -1);
|
||
|
|
event.preventDefault();
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
case 'ArrowDown':
|
||
|
|
case 'ArrowUp': {
|
||
|
|
event.preventDefault();
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
default:
|
||
|
|
//no op
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onKeyUp() {
|
||
|
|
this.clearTimer();
|
||
|
|
}
|
||
|
|
repeat(bar, step) {
|
||
|
|
this.contentViewChild.nativeElement[bar] += step;
|
||
|
|
this.moveBar();
|
||
|
|
}
|
||
|
|
setTimer(bar, step) {
|
||
|
|
this.clearTimer();
|
||
|
|
this.timer = setTimeout(() => {
|
||
|
|
this.repeat(bar, step);
|
||
|
|
}, 40);
|
||
|
|
}
|
||
|
|
clearTimer() {
|
||
|
|
if (this.timer) {
|
||
|
|
clearTimeout(this.timer);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
bindDocumentMouseListeners() {
|
||
|
|
if (!this.documentMouseMoveListener) {
|
||
|
|
this.documentMouseMoveListener = (e) => {
|
||
|
|
this.onDocumentMouseMove(e);
|
||
|
|
};
|
||
|
|
this.document.addEventListener('mousemove', this.documentMouseMoveListener);
|
||
|
|
}
|
||
|
|
if (!this.documentMouseUpListener) {
|
||
|
|
this.documentMouseUpListener = (e) => {
|
||
|
|
this.onDocumentMouseUp(e);
|
||
|
|
};
|
||
|
|
this.document.addEventListener('mouseup', this.documentMouseUpListener);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
unbindDocumentMouseListeners() {
|
||
|
|
if (this.documentMouseMoveListener) {
|
||
|
|
this.document.removeEventListener('mousemove', this.documentMouseMoveListener);
|
||
|
|
this.documentMouseMoveListener = null;
|
||
|
|
}
|
||
|
|
if (this.documentMouseUpListener) {
|
||
|
|
document.removeEventListener('mouseup', this.documentMouseUpListener);
|
||
|
|
this.documentMouseUpListener = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onYBarMouseDown(e) {
|
||
|
|
this.isYBarClicked = true;
|
||
|
|
this.yBarViewChild.nativeElement.focus();
|
||
|
|
this.lastPageY = e.pageY;
|
||
|
|
this.yBarViewChild.nativeElement.setAttribute('data-p-scrollpanel-grabbed', 'true');
|
||
|
|
DomHandler.addClass(this.yBarViewChild.nativeElement, 'p-scrollpanel-grabbed');
|
||
|
|
this.document.body.setAttribute('data-p-scrollpanel-grabbed', 'true');
|
||
|
|
DomHandler.addClass(this.document.body, 'p-scrollpanel-grabbed');
|
||
|
|
this.bindDocumentMouseListeners();
|
||
|
|
e.preventDefault();
|
||
|
|
}
|
||
|
|
onXBarMouseDown(e) {
|
||
|
|
this.isXBarClicked = true;
|
||
|
|
this.xBarViewChild.nativeElement.focus();
|
||
|
|
this.lastPageX = e.pageX;
|
||
|
|
this.xBarViewChild.nativeElement.setAttribute('data-p-scrollpanel-grabbed', 'false');
|
||
|
|
DomHandler.addClass(this.xBarViewChild.nativeElement, 'p-scrollpanel-grabbed');
|
||
|
|
this.document.body.setAttribute('data-p-scrollpanel-grabbed', 'false');
|
||
|
|
DomHandler.addClass(this.document.body, 'p-scrollpanel-grabbed');
|
||
|
|
this.bindDocumentMouseListeners();
|
||
|
|
e.preventDefault();
|
||
|
|
}
|
||
|
|
onDocumentMouseMove(e) {
|
||
|
|
if (this.isXBarClicked) {
|
||
|
|
this.onMouseMoveForXBar(e);
|
||
|
|
}
|
||
|
|
else if (this.isYBarClicked) {
|
||
|
|
this.onMouseMoveForYBar(e);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.onMouseMoveForXBar(e);
|
||
|
|
this.onMouseMoveForYBar(e);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onMouseMoveForXBar(e) {
|
||
|
|
let deltaX = e.pageX - this.lastPageX;
|
||
|
|
this.lastPageX = e.pageX;
|
||
|
|
this.requestAnimationFrame(() => {
|
||
|
|
this.contentViewChild.nativeElement.scrollLeft += deltaX / this.scrollXRatio;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
onMouseMoveForYBar(e) {
|
||
|
|
let deltaY = e.pageY - this.lastPageY;
|
||
|
|
this.lastPageY = e.pageY;
|
||
|
|
this.requestAnimationFrame(() => {
|
||
|
|
this.contentViewChild.nativeElement.scrollTop += deltaY / this.scrollYRatio;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Scrolls the top location to the given value.
|
||
|
|
* @param scrollTop
|
||
|
|
* @group Method
|
||
|
|
*/
|
||
|
|
scrollTop(scrollTop) {
|
||
|
|
let scrollableHeight = this.contentViewChild.nativeElement.scrollHeight - this.contentViewChild.nativeElement.clientHeight;
|
||
|
|
scrollTop = scrollTop > scrollableHeight ? scrollableHeight : scrollTop > 0 ? scrollTop : 0;
|
||
|
|
this.contentViewChild.nativeElement.scrollTop = scrollTop;
|
||
|
|
}
|
||
|
|
onFocus(event) {
|
||
|
|
if (this.xBarViewChild.nativeElement.isSameNode(event.target)) {
|
||
|
|
this.orientation = 'horizontal';
|
||
|
|
}
|
||
|
|
else if (this.yBarViewChild.nativeElement.isSameNode(event.target)) {
|
||
|
|
this.orientation = 'vertical';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onBlur() {
|
||
|
|
if (this.orientation === 'horizontal') {
|
||
|
|
this.orientation = 'vertical';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onDocumentMouseUp(e) {
|
||
|
|
this.yBarViewChild.nativeElement.setAttribute('data-p-scrollpanel-grabbed', 'false');
|
||
|
|
DomHandler.removeClass(this.yBarViewChild.nativeElement, 'p-scrollpanel-grabbed');
|
||
|
|
this.xBarViewChild.nativeElement.setAttribute('data-p-scrollpanel-grabbed', 'false');
|
||
|
|
DomHandler.removeClass(this.xBarViewChild.nativeElement, 'p-scrollpanel-grabbed');
|
||
|
|
this.document.body.setAttribute('data-p-scrollpanel-grabbed', 'false');
|
||
|
|
DomHandler.removeClass(this.document.body, 'p-scrollpanel-grabbed');
|
||
|
|
this.unbindDocumentMouseListeners();
|
||
|
|
this.isXBarClicked = false;
|
||
|
|
this.isYBarClicked = false;
|
||
|
|
}
|
||
|
|
requestAnimationFrame(f) {
|
||
|
|
let frame = window.requestAnimationFrame || this.timeoutFrame;
|
||
|
|
frame(f);
|
||
|
|
}
|
||
|
|
unbindListeners() {
|
||
|
|
if (this.windowResizeListener) {
|
||
|
|
this.windowResizeListener();
|
||
|
|
this.windowResizeListener = null;
|
||
|
|
}
|
||
|
|
if (this.contentScrollListener) {
|
||
|
|
this.contentScrollListener();
|
||
|
|
this.contentScrollListener = null;
|
||
|
|
}
|
||
|
|
if (this.mouseEnterListener) {
|
||
|
|
this.mouseEnterListener();
|
||
|
|
this.mouseEnterListener = null;
|
||
|
|
}
|
||
|
|
if (this.xBarMouseDownListener) {
|
||
|
|
this.xBarMouseDownListener();
|
||
|
|
this.xBarMouseDownListener = null;
|
||
|
|
}
|
||
|
|
if (this.yBarMouseDownListener) {
|
||
|
|
this.yBarMouseDownListener();
|
||
|
|
this.yBarMouseDownListener = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
ngOnDestroy() {
|
||
|
|
if (this.initialized) {
|
||
|
|
this.unbindListeners();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Refreshes the position and size of the scrollbar.
|
||
|
|
* @group Method
|
||
|
|
*/
|
||
|
|
refresh() {
|
||
|
|
this.moveBar();
|
||
|
|
}
|
||
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ScrollPanel, deps: [{ token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
||
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.7", type: ScrollPanel, selector: "p-scrollPanel", inputs: { style: "style", styleClass: "styleClass", step: ["step", "step", numberAttribute] }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }, { propertyName: "xBarViewChild", first: true, predicate: ["xBar"], descendants: true }, { propertyName: "yBarViewChild", first: true, predicate: ["yBar"], descendants: true }], ngImport: i0, template: `
|
||
|
|
<div #container [ngClass]="'p-scrollpanel p-component'" [ngStyle]="style" [class]="styleClass" [attr.data-pc-name]="'scrollpanel'">
|
||
|
|
<div class="p-scrollpanel-wrapper" [attr.data-pc-section]="'wrapper'">
|
||
|
|
<div #content class="p-scrollpanel-content" [attr.data-pc-section]="'content'" (mouseenter)="moveBar()" (scroll)="onScroll($event)">
|
||
|
|
<ng-content></ng-content>
|
||
|
|
<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
#xBar
|
||
|
|
class="p-scrollpanel-bar p-scrollpanel-bar-x"
|
||
|
|
tabindex="0"
|
||
|
|
role="scrollbar"
|
||
|
|
[attr.aria-orientation]="'horizontal'"
|
||
|
|
[attr.aria-valuenow]="lastScrollLeft"
|
||
|
|
[attr.data-pc-section]="'barx'"
|
||
|
|
[attr.aria-controls]="contentId"
|
||
|
|
(mousedown)="onXBarMouseDown($event)"
|
||
|
|
(keydown)="onKeyDown($event)"
|
||
|
|
(keyup)="onKeyUp()"
|
||
|
|
(focus)="onFocus($event)"
|
||
|
|
(blur)="onBlur()"
|
||
|
|
></div>
|
||
|
|
<div
|
||
|
|
#yBar
|
||
|
|
class="p-scrollpanel-bar p-scrollpanel-bar-y"
|
||
|
|
tabindex="0"
|
||
|
|
role="scrollbar"
|
||
|
|
[attr.aria-orientation]="'vertical'"
|
||
|
|
[attr.aria-valuenow]="lastScrollTop"
|
||
|
|
[attr.data-pc-section]="'bary'"
|
||
|
|
[attr.aria-controls]="contentId"
|
||
|
|
(mousedown)="onYBarMouseDown($event)"
|
||
|
|
(keydown)="onKeyDown($event)"
|
||
|
|
(keyup)="onKeyUp()"
|
||
|
|
(focus)="onFocus($event)"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
`, isInline: true, styles: ["@layer primeng{.p-scrollpanel-wrapper{overflow:hidden;width:100%;height:100%;position:relative;float:left}.p-scrollpanel-content{height:calc(100% + 18px);width:calc(100% + 18px);padding:0 18px 18px 0;position:relative;overflow:auto;box-sizing:border-box}.p-scrollpanel-bar{position:relative;background:#c1c1c1;border-radius:3px;cursor:pointer;opacity:0;transition:opacity .25s linear}.p-scrollpanel-bar-y{width:9px;top:0}.p-scrollpanel-bar-x{height:9px;bottom:0}.p-scrollpanel-hidden{visibility:hidden}.p-scrollpanel:hover .p-scrollpanel-bar,.p-scrollpanel:active .p-scrollpanel-bar{opacity:1}.p-scrollpanel-grabbed{-webkit-user-select:none;user-select:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ScrollPanel, decorators: [{
|
||
|
|
type: Component,
|
||
|
|
args: [{ selector: 'p-scrollPanel', template: `
|
||
|
|
<div #container [ngClass]="'p-scrollpanel p-component'" [ngStyle]="style" [class]="styleClass" [attr.data-pc-name]="'scrollpanel'">
|
||
|
|
<div class="p-scrollpanel-wrapper" [attr.data-pc-section]="'wrapper'">
|
||
|
|
<div #content class="p-scrollpanel-content" [attr.data-pc-section]="'content'" (mouseenter)="moveBar()" (scroll)="onScroll($event)">
|
||
|
|
<ng-content></ng-content>
|
||
|
|
<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
#xBar
|
||
|
|
class="p-scrollpanel-bar p-scrollpanel-bar-x"
|
||
|
|
tabindex="0"
|
||
|
|
role="scrollbar"
|
||
|
|
[attr.aria-orientation]="'horizontal'"
|
||
|
|
[attr.aria-valuenow]="lastScrollLeft"
|
||
|
|
[attr.data-pc-section]="'barx'"
|
||
|
|
[attr.aria-controls]="contentId"
|
||
|
|
(mousedown)="onXBarMouseDown($event)"
|
||
|
|
(keydown)="onKeyDown($event)"
|
||
|
|
(keyup)="onKeyUp()"
|
||
|
|
(focus)="onFocus($event)"
|
||
|
|
(blur)="onBlur()"
|
||
|
|
></div>
|
||
|
|
<div
|
||
|
|
#yBar
|
||
|
|
class="p-scrollpanel-bar p-scrollpanel-bar-y"
|
||
|
|
tabindex="0"
|
||
|
|
role="scrollbar"
|
||
|
|
[attr.aria-orientation]="'vertical'"
|
||
|
|
[attr.aria-valuenow]="lastScrollTop"
|
||
|
|
[attr.data-pc-section]="'bary'"
|
||
|
|
[attr.aria-controls]="contentId"
|
||
|
|
(mousedown)="onYBarMouseDown($event)"
|
||
|
|
(keydown)="onKeyDown($event)"
|
||
|
|
(keyup)="onKeyUp()"
|
||
|
|
(focus)="onFocus($event)"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
||
|
|
class: 'p-element'
|
||
|
|
}, styles: ["@layer primeng{.p-scrollpanel-wrapper{overflow:hidden;width:100%;height:100%;position:relative;float:left}.p-scrollpanel-content{height:calc(100% + 18px);width:calc(100% + 18px);padding:0 18px 18px 0;position:relative;overflow:auto;box-sizing:border-box}.p-scrollpanel-bar{position:relative;background:#c1c1c1;border-radius:3px;cursor:pointer;opacity:0;transition:opacity .25s linear}.p-scrollpanel-bar-y{width:9px;top:0}.p-scrollpanel-bar-x{height:9px;bottom:0}.p-scrollpanel-hidden{visibility:hidden}.p-scrollpanel:hover .p-scrollpanel-bar,.p-scrollpanel:active .p-scrollpanel-bar{opacity:1}.p-scrollpanel-grabbed{-webkit-user-select:none;user-select:none}}\n"] }]
|
||
|
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
||
|
|
type: Inject,
|
||
|
|
args: [PLATFORM_ID]
|
||
|
|
}] }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
|
||
|
|
type: Inject,
|
||
|
|
args: [DOCUMENT]
|
||
|
|
}] }, { type: i0.Renderer2 }], propDecorators: { style: [{
|
||
|
|
type: Input
|
||
|
|
}], styleClass: [{
|
||
|
|
type: Input
|
||
|
|
}], step: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: numberAttribute }]
|
||
|
|
}], containerViewChild: [{
|
||
|
|
type: ViewChild,
|
||
|
|
args: ['container']
|
||
|
|
}], contentViewChild: [{
|
||
|
|
type: ViewChild,
|
||
|
|
args: ['content']
|
||
|
|
}], xBarViewChild: [{
|
||
|
|
type: ViewChild,
|
||
|
|
args: ['xBar']
|
||
|
|
}], yBarViewChild: [{
|
||
|
|
type: ViewChild,
|
||
|
|
args: ['yBar']
|
||
|
|
}], templates: [{
|
||
|
|
type: ContentChildren,
|
||
|
|
args: [PrimeTemplate]
|
||
|
|
}] } });
|
||
|
|
export class ScrollPanelModule {
|
||
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ScrollPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
||
|
|
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.7", ngImport: i0, type: ScrollPanelModule, declarations: [ScrollPanel], imports: [CommonModule], exports: [ScrollPanel] });
|
||
|
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ScrollPanelModule, imports: [CommonModule] });
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ScrollPanelModule, decorators: [{
|
||
|
|
type: NgModule,
|
||
|
|
args: [{
|
||
|
|
imports: [CommonModule],
|
||
|
|
exports: [ScrollPanel],
|
||
|
|
declarations: [ScrollPanel]
|
||
|
|
}]
|
||
|
|
}] });
|
||
|
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Nyb2xscGFuZWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvYXBwL2NvbXBvbmVudHMvc2Nyb2xscGFuZWwvc2Nyb2xscGFuZWwudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxRQUFRLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUM1RSxPQUFPLEVBR0gsdUJBQXVCLEVBRXZCLFNBQVMsRUFDVCxlQUFlLEVBRWYsTUFBTSxFQUNOLEtBQUssRUFDTCxRQUFRLEVBR1IsV0FBVyxFQUlYLFNBQVMsRUFDVCxpQkFBaUIsRUFDakIsZUFBZSxFQUNsQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sYUFBYSxDQUFDO0FBQzVDLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFFekMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFFbEQ7OztHQUdHO0FBaURILE1BQU0sT0FBTyxXQUFXO0lBcUVxQjtJQUF3QjtJQUF1QjtJQUFxQjtJQUFpRDtJQUE0QjtJQXBFMUw7OztPQUdHO0lBQ00sS0FBSyxDQUE4QztJQUM1RDs7O09BR0c7SUFDTSxVQUFVLENBQXFCO0lBQ3hDOzs7T0FHRztJQUNvQyxJQUFJLEdBQVcsQ0FBQyxDQUFDO0lBRWhDLGtCQUFrQixDQUF5QjtJQUU3QyxnQkFBZ0IsQ0FBeUI7SUFFNUMsYUFBYSxDQUF5QjtJQUV0QyxhQUFhLENBQXlCO0lBRXpCLFNBQVMsQ0FBdUM7SUFFaEYsWUFBWSxDQUFxQjtJQUVqQyxZQUFZLENBQXFCO0lBRWpDLFlBQVksR0FBUSxDQUFDLEVBQWdCLEVBQUUsRUFBRSxDQUFDLFVBQVUsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUM7SUFFNUQsV0FBVyxHQUFZLEtBQUssQ0FBQztJQUU3QixTQUFTLENBQXFCO0lBRTlCLFNBQVMsQ0FBcUI7SUFFOUIsYUFBYSxHQUFZLEtBQUssQ0FBQztJQUUvQixhQUFhLEdBQVksS0FBSyxDQUFDO0lBRS9CLGVBQWUsQ0FBK0I7SUFFOUMsY0FBYyxHQUFXLENBQUMsQ0FBQztJQUUzQixhQUFhLEdBQVcsQ0FBQyxDQUFDO0lBRTFCLFdBQVcsR0FBVyxVQUFVLENBQUM7SUFFakMsS0FBSyxDQUFNO0lBRVgsU0FBUyxDQUFxQjtJQUU5QixvQkFBb0IsQ0FBa0M7SUFFdEQscUJBQXFCLENBQWtDO0lBRXZELGtCQUFrQixDQUFrQztJQUVwRCxxQkFBcUIsQ0FBa0M7SUFFdkQscUJBQXFCLENBQWtDO0lBRXZELHlCQUF5QixDQUFrQztJQUUzRCx1QkFBdUIsQ0FBa0M7SUFFekQsWUFBeUMsVUFBZSxFQUFTLEVBQWMsRUFBUyxJQUFZLEVBQVMsRUFBcUIsRUFBNEIsUUFBa0IsRUFBVSxRQUFtQjtRQUFwSyxlQUFVLEdBQVYsVUFBVSxDQUFLO1FBQVMsT0FBRSxHQUFGLEVBQUUsQ0FBWTtRQUFTLFNBQUksR0FBSixJQUFJLENBQVE7UUFBUyxPQUFFLEdBQUYsRUFBRSxDQUFtQjtRQUE0QixhQUFRLEdBQVIsUUFBUSxDQUFVO1FBQVUsYUFBUSxHQUFSLFFBQVEsQ0FBVztRQUN6TSxJQUFJLENBQUMsU0FBUyxHQUFHLGlCQUFpQixFQUFFLEdBQUcsVUFBVSxDQUFDO0lBQ3RELENBQUM7SUFFRCxlQUFlO1FBQ1gsSUFBSSxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLEVBQUU7WUFDcEMsSUFBSSxDQUFDLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxHQUFHLEVBQUU7Z0JBQzdCLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQztnQkFDZixJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO2dCQUN2QyxJQUFJLENBQUMsZUFBZSxHQUFHLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO2dCQUN2RCxJQUFJLENBQUMsZUFBZSxHQUFHLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO2dCQUN2RCxJQUFJLENBQUMsbUJBQW1CLEdBQUcsSUFBSSxDQUFDLG1CQUFtQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztnQkFDL0QsSUFBSSxDQUFDLGlCQUFpQixHQUFHLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7Z0JBRTNELElBQUksQ0FBQyxvQkFBb0IsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQyxNQUFNLEVBQUUsUUFBUSxFQUFFLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztnQkFDakYsSUFBSSxDQUFDLHFCQUFxQixHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFFLElBQUksQ0FBQyxnQkFBK0IsQ0FBQyxhQUFhLEVBQUUsUUFBUSxFQUFFLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztnQkFDL0gsSUFBSSxDQUFDLGtCQUFrQixHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFFLElBQUksQ0FBQyxnQkFBK0IsQ0FBQyxhQUFhLEVBQUUsWUFBWSxFQUFFLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztnQkFDaEksSUFBSSxDQUFDLHFCQUFxQixHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFFLElBQUksQ0FBQyxhQUE0QixDQUFDLGFBQWEsRUFBRSxXQUFXLEVBQUUsSUFBSSxDQUFDLGVBQWUsQ0FBQyxDQUFDO2dCQUN2SSxJQUFJLENBQUMscUJBQXFCLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUUsSUFBSSxDQUFDLGFBQTRCLENBQUMsYUFBYSxFQUFFLFdBQVcsRUFBRSxJQUFJLENBQUMsZUFBZSxDQUFDLENBQUM7Z0JBQ3ZJLElBQUksQ0FBQyx3QkFBd0IsRUFBRSxDQUFDO2dCQUVoQyxJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQztZQUM1QixDQUFDLENBQUMsQ0FBQztTQUNOO0lBQ0wsQ0FBQztJQUVELGtCQUFrQjtRQUNiLElBQUksQ0FBQyxTQUFzQyxDQUFDLE9BQU8sQ0FBQyxDQUFDLElBQUksRUFBRSxFQUFFO1lBQzFELFFBQVEsSUFBSSxDQUFDLE9BQU8sRUFBRSxFQUFFO2dCQUNwQixLQUFLLFNBQVM7b0JBQ1YsSUFBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDO29CQUNyQyxNQUFNO2dCQUVWO29CQUNJLElBQUksQ0FBQyxlQUFlLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQztvQkFDckMsTUFBTTthQUNiO1FBQ0wsQ0FBQyxDQUFDLENBQUM7SUFDUCxDQUFDO0lBRUQsd0JBQXdCO1FBQ3BCLElBQUksU0FBUyxHQUFJLElBQ
|