@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
1,282 lines (1,271 loc) • 48.5 kB
JavaScript
import { EventEmitter, Component, ChangeDetectionStrategy, ElementRef, Renderer2, Input, Output, HostBinding, Injectable, ContentChildren, Directive, NgZone, Host, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Subscription } from 'rxjs';
import { takeUntil, map, tap, filter, switchMap } from 'rxjs/operators';
/**
* @fileoverview added by tsickle
* Generated from: splitter-pane.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var SplitterPaneComponent = /** @class */ (function () {
function SplitterPaneComponent(el, renderer) {
this.el = el;
this.renderer = renderer;
// 当前panel是否可调整大小
this.resizable = true;
// 面板是否可折叠
this.collapsible = false;
// 非边缘面板折叠方向，before只生成向前折叠的按钮，after生成向后折叠按钮，both生成两个
this.collapseDirection = 'both';
// 大小改变事件
this.sizeChange = new EventEmitter();
// 收起和展开事件
this.collapsedChange = new EventEmitter();
this.paneClass = true;
// 分割条方向
this._order = 0; // flex布局下pane位置
// flex布局下pane位置
this.collapsed = false; // 标记是否折叠
this.element = this.el.nativeElement;
}
Object.defineProperty(SplitterPaneComponent.prototype, "size", {
get: /**
* @return {?}
*/
function () {
return this._size;
},
set: /**
* @param {?} newSize
* @return {?}
*/
function (newSize) {
this._size = newSize;
this.renderer.setStyle(this.element, 'flex-basis', newSize);
/** @type {?} */
var paneFixedClass = 'devui-splitter-pane-fixed';
if (this.size) {
// 设置 flex-grow 和 flex-shrink
this.renderer.addClass(this.element, paneFixedClass);
}
else {
this.renderer.removeClass(this.element, paneFixedClass);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitterPaneComponent.prototype, "order", {
get: /**
* @return {?}
*/
function () {
return this._order;
},
set:
// nativeElement句柄
/**
* @param {?} paneOrder
* @return {?}
*/
function (paneOrder) {
this._order = paneOrder;
this.setOrderStyles();
},
enumerable: true,
configurable: true
});
// 设置order
// 设置order
/**
* @return {?}
*/
SplitterPaneComponent.prototype.setOrderStyles =
// 设置order
/**
* @return {?}
*/
function () {
this.renderer.setStyle(this.element, 'order', this.order);
};
Object.defineProperty(SplitterPaneComponent.prototype, "computedSize", {
// 获取当前pane大小
get:
// 获取当前pane大小
/**
* @return {?}
*/
function () {
if (this.orientation === 'vertical') {
return this.element.offsetHeight;
}
else {
return this.element.offsetWidth;
}
},
enumerable: true,
configurable: true
});
// 收起时隐藏当前pane
// 收起时隐藏当前pane
/**
* @return {?}
*/
SplitterPaneComponent.prototype.toggleCollapseClass =
// 收起时隐藏当前pane
/**
* @return {?}
*/
function () {
/** @type {?} */
var paneHiddenClass = 'devui-splitter-pane-hidden';
if (!this.collapsed) {
this.renderer.removeClass(this.element, paneHiddenClass);
}
else {
this.renderer.addClass(this.element, paneHiddenClass);
}
};
// 收起时用于改变相邻pane的flex-grow属性来改变非自适应pane的size
// 收起时用于改变相邻pane的flex-grow属性来改变非自适应pane的size
/**
* @return {?}
*/
SplitterPaneComponent.prototype.toggleNearPaneFlexGrow =
// 收起时用于改变相邻pane的flex-grow属性来改变非自适应pane的size
/**
* @return {?}
*/
function () {
/** @type {?} */
var flexGrowClass = 'devui-splitter-pane-grow';
/** @type {?} */
var hasFlexGrowClass = this.element.classList.contains(flexGrowClass);
if (hasFlexGrowClass) {
this.renderer.removeClass(this.element, flexGrowClass);
}
else {
this.renderer.addClass(this.element, flexGrowClass);
}
};
/**
* @return {?}
*/
SplitterPaneComponent.prototype.ngAfterViewChecked = /**
* @return {?}
*/
function () {
// 视图检查完对resizeable pane设置flex属性
if (!this.size && !this.resizable) {
this.renderer.addClass(this.element, 'devui-splitter-pane-fixed');
}
};
SplitterPaneComponent.decorators = [
{ type: Component, args: [{
selector: 'd-splitter-pane',
template: "<ng-content></ng-content>\r\n",
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [":host.devui-splitter-pane{position:relative;-webkit-box-flex:1;flex:1 1 auto;display:block;min-width:0;max-width:100%;min-height:0;max-height:100%;height:100%}:host.devui-splitter-pane-fixed{-webkit-box-flex:0;flex-grow:0;flex-shrink:0}:host.devui-splitter-pane-hidden{-webkit-box-flex:0!important;flex:0!important;overflow:hidden!important}:host.devui-splitter-pane-grow{-webkit-box-flex:1!important;flex-grow:1!important}"]
}] }
];
/** @nocollapse */
SplitterPaneComponent.ctorParameters = function () { return [
{ type: ElementRef },
{ type: Renderer2 }
]; };
SplitterPaneComponent.propDecorators = {
minSize: [{ type: Input }],
maxSize: [{ type: Input }],
resizable: [{ type: Input }],
collapsible: [{ type: Input }],
collapseDirection: [{ type: Input }],
size: [{ type: Input }],
sizeChange: [{ type: Output }],
collapsedChange: [{ type: Output }],
paneClass: [{ type: HostBinding, args: ['class.devui-splitter-pane',] }]
};
return SplitterPaneComponent;
}());
if (false) {
/** @type {?} */
SplitterPaneComponent.prototype.minSize;
/** @type {?} */
SplitterPaneComponent.prototype.maxSize;
/** @type {?} */
SplitterPaneComponent.prototype.resizable;
/** @type {?} */
SplitterPaneComponent.prototype.collapsible;
/** @type {?} */
SplitterPaneComponent.prototype.collapseDirection;
/** @type {?} */
SplitterPaneComponent.prototype._size;
/** @type {?} */
SplitterPaneComponent.prototype.sizeChange;
/** @type {?} */
SplitterPaneComponent.prototype.collapsedChange;
/** @type {?} */
SplitterPaneComponent.prototype.paneClass;
/** @type {?} */
SplitterPaneComponent.prototype.orientation;
/** @type {?} */
SplitterPaneComponent.prototype._order;
/** @type {?} */
SplitterPaneComponent.prototype.collapsed;
/** @type {?} */
SplitterPaneComponent.prototype.element;
/**
* @type {?}
* @private
*/
SplitterPaneComponent.prototype.el;
/**
* @type {?}
* @private
*/
SplitterPaneComponent.prototype.renderer;
}
/**
* @fileoverview added by tsickle
* Generated from: splitter.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var SplitterService = /** @class */ (function () {
function SplitterService() {
this.paneCount = 0;
}
// 配置pane信息，panes列表，方向，容器大小，方便后续计算使用
// 配置pane信息，panes列表，方向，容器大小，方便后续计算使用
/**
* @param {?} __0
* @return {?}
*/
SplitterService.prototype.configPane =
// 配置pane信息，panes列表，方向，容器大小，方便后续计算使用
/**
* @param {?} __0
* @return {?}
*/
function (_a) {
var panes = _a.panes, orientation = _a.orientation, containerSize = _a.containerSize;
this.panes = panes;
this.panes.forEach((/**
* @param {?} pane
* @param {?} index
* @return {?}
*/
function (pane, index) {
pane.order = index * 2;
pane.orientation = orientation;
}));
this.paneCount = this.panes.length;
this.containerSize = containerSize;
};
// 按下的时候计算pane的size信息
// 按下的时候计算pane的size信息
/**
* @param {?} splitbarIndex
* @return {?}
*/
SplitterService.prototype.dragState =
// 按下的时候计算pane的size信息
/**
* @param {?} splitbarIndex
* @return {?}
*/
function (splitbarIndex) {
/** @type {?} */
var prev = this.getPane(splitbarIndex);
/** @type {?} */
var next = this.getPane(splitbarIndex + 1);
/** @type {?} */
var total = prev.computedSize + next.computedSize;
return {
prev: {
index: splitbarIndex,
initialSize: prev.computedSize,
// 设置有最小值，直接取值，如果没有设置就用两个pane总和减去相邻pane的最大值，都没设置（NAN）在取0
minSize: this.toPixels(prev.minSize) || total - this.toPixels(next.maxSize) || 0,
// 设置有最大值，直接取值，如果没有设置就用两个pane总和减去相邻pane的最小值，都没设置（NAN）在取两个pane总和
maxSize: this.toPixels(prev.maxSize) || total - this.toPixels(next.minSize) || total
},
next: {
index: splitbarIndex + 1,
initialSize: next.computedSize,
minSize: this.toPixels(next.minSize) || total - this.toPixels(prev.maxSize) || 0,
maxSize: this.toPixels(next.maxSize) || total - this.toPixels(prev.minSize) || total
}
};
};
// 设置pane大小
// 设置pane大小
/**
* @param {?} state
* @param {?} distance
* @return {?}
*/
SplitterService.prototype.setSize =
// 设置pane大小
/**
* @param {?} state
* @param {?} distance
* @return {?}
*/
function (state, distance) {
/** @type {?} */
var prev = this.getPane(state.prev.index);
/** @type {?} */
var next = this.getPane(state.next.index);
if (prev.size && next.size) {
// 相邻的两个pane都指定了size，需要同时修改size
this.resize(state.prev, distance);
this.resize(state.next, -distance);
}
else if (next.size) {
// 如果 next pane，指定了size就修改next pane
this.resize(state.next, -distance);
}
else {
// 最后不管pre pane，有没有指定，都修改 pre pane
this.resize(state.prev, distance);
}
};
// 大小限制函数，（max）小于最小值时取最小值， （min）大于最大值时取最大值
// 大小限制函数，（max）小于最小值时取最小值， （min）大于最大值时取最大值
/**
* @param {?} minSize
* @param {?} maxSize
* @param {?} initialSize
* @return {?}
*/
SplitterService.prototype.clamp =
// 大小限制函数，（max）小于最小值时取最小值， （min）大于最大值时取最大值
/**
* @param {?} minSize
* @param {?} maxSize
* @param {?} initialSize
* @return {?}
*/
function (minSize, maxSize, initialSize) {
return Math.min(maxSize, Math.max(minSize, initialSize));
};
// resize pane的大小
// resize pane的大小
/**
* @param {?} paneState
* @param {?} moveSize
* @return {?}
*/
SplitterService.prototype.resize =
// resize pane的大小
/**
* @param {?} paneState
* @param {?} moveSize
* @return {?}
*/
function (paneState, moveSize) {
/** @type {?} */
var pane = this.getPane(paneState.index);
/** @type {?} */
var splitterSize = this.containerSize();
/** @type {?} */
var newSize = this.clamp(paneState.minSize, paneState.maxSize, paneState.initialSize + moveSize);
/** @type {?} */
var size = '';
if (this.isPercent(pane.size)) {
size = (100 * newSize / splitterSize) + '%';
}
else {
size = newSize + 'px';
}
pane.size = size;
pane.sizeChange.emit(size);
};
// 判断pane是否可以调整大小，只要有一边设置了不可调整或者收起，相邻pane调整就失效
// 判断pane是否可以调整大小，只要有一边设置了不可调整或者收起，相邻pane调整就失效
/**
* @param {?} splitBarIndex
* @return {?}
*/
SplitterService.prototype.isResizable =
// 判断pane是否可以调整大小，只要有一边设置了不可调整或者收起，相邻pane调整就失效
/**
* @param {?} splitBarIndex
* @return {?}
*/
function (splitBarIndex) {
/** @type {?} */
var prevPane = this.getPane(splitBarIndex);
/** @type {?} */
var nextPane = this.getPane(splitBarIndex + 1);
/** @type {?} */
var paneCollapsed = prevPane.collapsed || nextPane.collapsed;
return prevPane.resizable && nextPane.resizable && !paneCollapsed;
};
// 判断分割条是否是固定的，只要有一边不能调整, 就是禁用状态固定bar
// 判断分割条是否是固定的，只要有一边不能调整, 就是禁用状态固定bar
/**
* @param {?} splitBarIndex
* @return {?}
*/
SplitterService.prototype.isStaticBar =
// 判断分割条是否是固定的，只要有一边不能调整, 就是禁用状态固定bar
/**
* @param {?} splitBarIndex
* @return {?}
*/
function (splitBarIndex) {
/** @type {?} */
var prevPane = this.getPane(splitBarIndex);
/** @type {?} */
var nextPane = this.getPane(splitBarIndex + 1);
return !(prevPane.resizable && nextPane.resizable);
};
// 获取pane，防止没有初始化的时候调用内部方法取值
// 获取pane，防止没有初始化的时候调用内部方法取值
/**
* @param {?} index
* @return {?}
*/
SplitterService.prototype.getPane =
// 获取pane，防止没有初始化的时候调用内部方法取值
/**
* @param {?} index
* @return {?}
*/
function (index) {
if (!this.panes || index < 0 || index >= this.panes.length) {
throw new Error('no pane can return.');
}
return this.panes[index];
};
// 判断是不是百分比设置宽度
// 判断是不是百分比设置宽度
/**
* @param {?} size
* @return {?}
*/
SplitterService.prototype.isPercent =
// 判断是不是百分比设置宽度
/**
* @param {?} size
* @return {?}
*/
function (size) {
return /%$/.test(size);
};
// 计算时把百分比转换为像素
// 计算时把百分比转换为像素
/**
* @param {?} size
* @return {?}
*/
SplitterService.prototype.toPixels =
// 计算时把百分比转换为像素
/**
* @param {?} size
* @return {?}
*/
function (size) {
// 值不满足转换时，result为NAN，方便计算最小、最大宽度判断
/** @type {?} */
var result = parseFloat(size);
if (this.isPercent(size)) {
result = (this.containerSize() * result / 100);
}
return result;
};
// 切换pane展开，收起
// 切换pane展开，收起
/**
* @param {?} paneIndex
* @param {?} nearPaneIndex
* @return {?}
*/
SplitterService.prototype.togglePane =
// 切换pane展开，收起
/**
* @param {?} paneIndex
* @param {?} nearPaneIndex
* @return {?}
*/
function (paneIndex, nearPaneIndex) {
/** @type {?} */
var pane = this.getPane(paneIndex);
/** @type {?} */
var nearPane = this.getPane(nearPaneIndex);
if (pane.collapsible) {
pane.collapsed = !pane.collapsed;
pane.toggleCollapseClass();
nearPane.toggleNearPaneFlexGrow();
pane.collapsedChange.emit(pane.collapsed);
}
};
SplitterService.decorators = [
{ type: Injectable }
];
return SplitterService;
}());
if (false) {
/** @type {?} */
SplitterService.prototype.panes;
/**
* @type {?}
* @private
*/
SplitterService.prototype.containerSize;
/** @type {?} */
SplitterService.prototype.paneCount;
}
/**
* @fileoverview added by tsickle
* Generated from: splitter.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var SplitterComponent = /** @class */ (function () {
function SplitterComponent(el, splitter) {
this.el = el;
this.splitter = splitter;
// 指定Splitter中窗格的方向，默认水平分割。
this.orientation = 'horizontal';
// 分隔条大小
this.splitBarSize = '2px';
// pane设置为不可调整大小时，生效
this.disabledBarSize = '1px';
}
Object.defineProperty(SplitterComponent.prototype, "class", {
get: /**
* @return {?}
*/
function () {
return 'devui-splitter devui-splitter-' + this.orientation;
},
enumerable: true,
configurable: true
});
/**
* @param {?} changes
* @return {?}
*/
SplitterComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (changes.orientation && !changes.orientation.isFirstChange()) {
this.reconfigure();
}
};
/**
* @return {?}
*/
SplitterComponent.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
this.reconfigure();
// contentChildren 变化时，触发重新设置pane
this.paneChangesSubscription = this.panes.changes.subscribe((/**
* @param {?} panes
* @return {?}
*/
function (panes) {
_this.reconfigure();
}));
};
/**
* @return {?}
*/
SplitterComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this.paneChangesSubscription) {
this.paneChangesSubscription.unsubscribe();
}
};
// 配置pane
// 配置pane
/**
* @return {?}
*/
SplitterComponent.prototype.reconfigure =
// 配置pane
/**
* @return {?}
*/
function () {
var _this = this;
this.splitter.configPane({
panes: this.panes.toArray(),
orientation: this.orientation,
// 内容投影进组件之后，组件还没有渲染出dom，此时获取不到宽度，此处设置一个回调函数
containerSize: (/**
* @return {?}
*/
function () {
if (_this.orientation === 'vertical') {
return _this.el.nativeElement.clientHeight;
}
else {
return _this.el.nativeElement.clientWidth;
}
})
});
};
SplitterComponent.decorators = [
{ type: Component, args: [{
selector: 'd-splitter',
exportAs: 'dSplitter',
template: "<ng-content select=\"d-splitter-pane\"></ng-content>\r\n<ng-container *ngFor=\"let pane of panes; let index = index; let last = last\">\r\n <d-splitter-bar\r\n dResize\r\n [style.order]=\"index * 2 + 1\"\r\n *ngIf=\"!last\"\r\n [index]=\"index\"\r\n [splitBarSize]=\"splitBarSize\"\r\n [disabledBarSize]=\"disabledBarSize\"\r\n [orientation]=\"orientation\"\r\n >\r\n </d-splitter-bar>\r\n</ng-container>\r\n",
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
SplitterService
],
styles: [":host{display:-webkit-box;display:flex;width:100%;height:auto;position:relative}:host.devui-splitter-horizontal{-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}:host.devui-splitter-vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}"]
}] }
];
/** @nocollapse */
SplitterComponent.ctorParameters = function () { return [
{ type: ElementRef },
{ type: SplitterService }
]; };
SplitterComponent.propDecorators = {
orientation: [{ type: Input }],
splitBarSize: [{ type: Input }],
disabledBarSize: [{ type: Input }],
class: [{ type: HostBinding, args: ['class',] }],
panes: [{ type: ContentChildren, args: [SplitterPaneComponent,] }]
};
return SplitterComponent;
}());
if (false) {
/** @type {?} */
SplitterComponent.prototype.orientation;
/** @type {?} */
SplitterComponent.prototype.splitBarSize;
/** @type {?} */
SplitterComponent.prototype.disabledBarSize;
/** @type {?} */
SplitterComponent.prototype.panes;
/** @type {?} */
SplitterComponent.prototype.paneChangesSubscription;
/**
* @type {?}
* @private
*/
SplitterComponent.prototype.el;
/**
* @type {?}
* @private
*/
SplitterComponent.prototype.splitter;
}
/**
* @fileoverview added by tsickle
* Generated from: resize.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ResizeDirective = /** @class */ (function () {
function ResizeDirective(el, ngZone) {
var _this = this;
this.el = el;
this.ngZone = ngZone;
// 是否允许拖动
this.enableResize = true;
// 按下事件，mousedown，touchstart等
this.pressEvent = new EventEmitter();
// 拖动中事件，mousemove，touchmove等
this.dragEvent = new EventEmitter();
// 释放事件，mouseup，touchend等
this.releaseEvent = new EventEmitter();
this.bind = (/**
* @param {?} el
* @param {?} event
* @param {?} callback
* @return {?}
*/
function (el, event, callback) { return el.addEventListener && el.addEventListener(event, callback); });
this.unbind = (/**
* @param {?} el
* @param {?} event
* @param {?} callback
* @return {?}
*/
function (el, event, callback) { return el && el.removeEventListener && el.removeEventListener(event, callback); });
this.mousedown = (/**
* @param {?} e
* @return {?}
*/
function (e) {
_this.bind(document, 'mousemove', _this.mousemove);
_this.bind(document, 'mouseup', _this.mouseup);
_this.pressEvent.emit(_this.normalizeEvent(e));
});
this.mousemove = (/**
* @param {?} e
* @return {?}
*/
function (e) {
_this.dragEvent.emit(_this.normalizeEvent(e));
});
this.mouseup = (/**
* @param {?} e
* @return {?}
*/
function (e) {
_this.unbind(document, 'mousemove', _this.mousemove);
_this.unbind(document, 'mouseup', _this.mouseup);
_this.releaseEvent.emit(_this.normalizeEvent(e));
});
this.touchstart = (/**
* @param {?} e
* @return {?}
*/
function (e) {
_this.bind(document, 'touchmove', _this.touchmove);
_this.bind(document, 'touchend', _this.touchend);
if (e.touches.length === 1) {
_this.pressEvent.emit(_this.normalizeEvent(e));
}
});
this.touchmove = (/**
* @param {?} e
* @return {?}
*/
function (e) {
if (e.touches.length === 1) {
_this.dragEvent.emit(_this.normalizeEvent(e));
}
});
this.touchend = (/**
* @param {?} e
* @return {?}
*/
function (e) {
_this.bind(document, 'touchmove', _this.touchmove);
_this.bind(document, 'touchend', _this.touchend);
if (e.touches.length === 0) {
_this.releaseEvent.emit(_this.normalizeEvent(e));
}
});
}
/**
* @return {?}
*/
ResizeDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
if (this.enableResize) {
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
function () {
_this.bindEvent();
}));
}
};
/**
* @return {?}
*/
ResizeDirective.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this.enableResize) {
this.unbind(this.el.nativeElement, 'mousedown', this.mousedown);
this.unbind(this.el.nativeElement, 'touchstart', this.touchstart);
}
};
/**
* @return {?}
*/
ResizeDirective.prototype.bindEvent = /**
* @return {?}
*/
function () {
/** @type {?} */
var element = this.el.nativeElement;
// 绑定mousedown事件
this.bind(element, 'mousedown', this.mousedown);
// 绑定触屏事件
this.bind(element, 'touchstart', this.touchstart);
};
// 返回常用位置信息
// 返回常用位置信息
/**
* @param {?} e
* @return {?}
*/
ResizeDirective.prototype.normalizeEvent =
// 返回常用位置信息
/**
* @param {?} e
* @return {?}
*/
function (e) {
// 判断事件类型，用于计算位置坐标
if (e.type.match(/touch/)) {
return {
pageX: e.changedTouches[0].pageX,
pageY: e.changedTouches[0].pageY,
clientX: e.changedTouches[0].clientX,
clientY: e.changedTouches[0].clientY,
type: e.type,
originalEvent: e,
isTouch: true
};
}
return {
pageX: e.pageX,
pageY: e.pageY,
clientX: e.clientX,
clientY: e.clientY,
offsetX: e.offsetX,
offsetY: e.offsetY,
type: e.type,
originalEvent: e
};
};
ResizeDirective.decorators = [
{ type: Directive, args: [{
selector: '[dResize]'
},] }
];
/** @nocollapse */
ResizeDirective.ctorParameters = function () { return [
{ type: ElementRef },
{ type: NgZone }
]; };
ResizeDirective.propDecorators = {
enableResize: [{ type: Input }],
pressEvent: [{ type: Output }],
dragEvent: [{ type: Output }],
releaseEvent: [{ type: Output }]
};
return ResizeDirective;
}());
if (false) {
/** @type {?} */
ResizeDirective.prototype.enableResize;
/** @type {?} */
ResizeDirective.prototype.pressEvent;
/** @type {?} */
ResizeDirective.prototype.dragEvent;
/** @type {?} */
ResizeDirective.prototype.releaseEvent;
/** @type {?} */
ResizeDirective.prototype.bind;
/** @type {?} */
ResizeDirective.prototype.unbind;
/** @type {?} */
ResizeDirective.prototype.mousedown;
/** @type {?} */
ResizeDirective.prototype.mousemove;
/** @type {?} */
ResizeDirective.prototype.mouseup;
/** @type {?} */
ResizeDirective.prototype.touchstart;
/** @type {?} */
ResizeDirective.prototype.touchmove;
/** @type {?} */
ResizeDirective.prototype.touchend;
/**
* @type {?}
* @private
*/
ResizeDirective.prototype.el;
/**
* @type {?}
* @private
*/
ResizeDirective.prototype.ngZone;
}
/**
* @fileoverview added by tsickle
* Generated from: splitter-bar.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var SplitterBarComponent = /** @class */ (function () {
function SplitterBarComponent(el, splitter, renderer, resize) {
this.el = el;
this.splitter = splitter;
this.renderer = renderer;
this.resize = resize;
this.subscriptions = new Subscription();
// 移动的时候，阻止事件冒泡
this.stopPropagation = (/**
* @param {?} __0
* @return {?}
*/
function (_a) {
var event = _a.originalEvent;
event.stopPropagation();
if (event.cancelable) {
event.preventDefault();
}
});
// 处理移动过程中的数据流, 合并到pressEvent事件流中
this.moveStream = (/**
* @param {?} resize
* @return {?}
*/
function (resize) { return (/**
* @param {?} mouseDown
* @return {?}
*/
function (mouseDown) {
return resize.dragEvent.pipe(takeUntil(resize.releaseEvent), map((/**
* @param {?} __0
* @return {?}
*/
function (_a) {
var pageX = _a.pageX, pageY = _a.pageY;
return ({
originalX: mouseDown.pageX,
originalY: mouseDown.pageY,
pageX: pageX,
pageY: pageY
});
})));
}); });
}
Object.defineProperty(SplitterBarComponent.prototype, "splitBarSize", {
get: /**
* @return {?}
*/
function () {
return this._splitBarSize;
},
set: /**
* @param {?} size
* @return {?}
*/
function (size) {
this._splitBarSize = size;
this.renderer.setStyle(this.el.nativeElement, 'flex-basis', size);
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitterBarComponent.prototype, "class", {
get: /**
* @return {?}
*/
function () {
/** @type {?} */
var bindClass = 'devui-splitter-bar devui-splitter-bar-' + this.orientation;
if (!this.splitter.isStaticBar(this.index)) {
bindClass += ' resizable';
}
else {
this.renderer.setStyle(this.el.nativeElement, 'flex-basis', this.disabledBarSize);
}
return bindClass;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
SplitterBarComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var state;
/** @type {?} */
var resizeListener = this.resize.pressEvent
.pipe(tap(this.stopPropagation), filter((/**
* @return {?}
*/
function () { return _this.splitter.isResizable(_this.index); })), tap((/**
* @return {?}
*/
function () { return state = _this.splitter.dragState(_this.index); })), switchMap(this.moveStream(this.resize)))
.subscribe((/**
* @param {?} __0
* @return {?}
*/
function (_a) {
var pageX = _a.pageX, pageY = _a.pageY, originalX = _a.originalX, originalY = _a.originalY;
/** @type {?} */
var distance;
if (_this.orientation === 'vertical') {
distance = pageY - originalY;
}
else {
distance = pageX - originalX;
}
_this.splitter.setSize(state, distance);
}));
this.subscriptions.add(resizeListener);
};
/**
* @return {?}
*/
SplitterBarComponent.prototype.collapsePrePane = /**
* @return {?}
*/
function () {
/** @type {?} */
var nearIndex = this.index + 1;
this.splitter.togglePane(this.index, nearIndex);
this.toggleResize(this.index);
};
/**
* @return {?}
*/
SplitterBarComponent.prototype.collapseNextPane = /**
* @return {?}
*/
function () {
this.splitter.togglePane(this.index + 1, this.index);
this.toggleResize(this.index + 1);
};
// 切换是否允许拖拽，收起时不能拖拽
// 切换是否允许拖拽，收起时不能拖拽
/**
* @param {?} paneIndex
* @return {?}
*/
SplitterBarComponent.prototype.toggleResize =
// 切换是否允许拖拽，收起时不能拖拽
/**
* @param {?} paneIndex
* @return {?}
*/
function (paneIndex) {
/** @type {?} */
var pane = this.splitter.getPane(paneIndex);
/** @type {?} */
var isCollapsed = pane.collapsed;
if (isCollapsed) {
this.renderer.addClass(this.el.nativeElement, 'none-resizable');
}
else {
this.renderer.removeClass(this.el.nativeElement, 'none-resizable');
}
};
Object.defineProperty(SplitterBarComponent.prototype, "prevClass", {
// 计算前面板收起操作样式
get:
// 计算前面板收起操作样式
/**
* @return {?}
*/
function () {
/** @type {?} */
var pane = this.splitter.getPane(this.index);
/** @type {?} */
var nearPane = this.splitter.getPane(this.index + 1);
// 第一个面板或者其它面板折叠方向不是向后的显示操作按钮
/** @type {?} */
var showIcon = (pane.collapseDirection !== 'after' || this.index === 0);
return this.generateCollapseClass(pane, nearPane, showIcon);
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitterBarComponent.prototype, "nextClass", {
// 计算相邻面板收起操作样式
get:
// 计算相邻面板收起操作样式
/**
* @return {?}
*/
function () {
/** @type {?} */
var pane = this.splitter.getPane(this.index + 1);
/** @type {?} */
var nearPane = this.splitter.getPane(this.index);
// 最后一个面板或者其它面板折叠方向不是向前的显示操作按钮
/** @type {?} */
var showIcon = (pane.collapseDirection !== 'before' || this.index + 1 === this.splitter.paneCount - 1);
return this.generateCollapseClass(pane, nearPane, showIcon);
},
enumerable: true,
configurable: true
});
// 生成拼接样式
// 生成拼接样式
/**
* @param {?} classes
* @return {?}
*/
SplitterBarComponent.prototype.generateClass =
// 生成拼接样式
/**
* @param {?} classes
* @return {?}
*/
function (classes) {
return Object.keys(classes).filter((/**
* @param {?} c
* @return {?}
*/
function (c) { return classes[c]; })).join(' ');
};
// 根据当前状态生成收起按钮样式
// 根据当前状态生成收起按钮样式
/**
* @param {?} pane
* @param {?} nearPane
* @param {?} showIcon
* @return {?}
*/
SplitterBarComponent.prototype.generateCollapseClass =
// 根据当前状态生成收起按钮样式
/**
* @param {?} pane
* @param {?} nearPane
* @param {?} showIcon
* @return {?}
*/
function (pane, nearPane, showIcon) {
// 是否允许收起
/** @type {?} */
var isCollapsible = pane.collapsible && showIcon;
// 当前收起状态
/** @type {?} */
var isCollapsed = pane.collapsed;
// 是否是固定pane
/** @type {?} */
var isStaticBar = this.splitter.isStaticBar(this.index);
// 一个pane收起的时候，隐藏相邻pane的收起按钮
/** @type {?} */
var isNearPaneCollapsed = nearPane.collapsed;
return this.generateClass({
'devui-collapse': isCollapsible,
'collapsed': isCollapsed,
'hidden': isNearPaneCollapsed
});
};
/**
* @return {?}
*/
SplitterBarComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.subscriptions.unsubscribe();
};
SplitterBarComponent.decorators = [
{ type: Component, args: [{
selector: 'd-splitter-bar',
template: "<div class=\"prev\" [ngClass]=\"prevClass\" (click)=\"collapsePrePane()\" (touchstart)=\"collapsePrePane()\"></div>\r\n<div class=\"devui-resize-handle\"></div>\r\n<div class=\"next\" [ngClass]=\"nextClass\" (click)=\"collapseNextPane()\" (touchstart)=\"collapseNextPane()\"></div>\r\n",
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [":host.devui-splitter-bar{background-color:#dfe1e6;display:-webkit-box;display:flex;position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;-webkit-box-flex:0;flex-grow:0;flex-shrink:0}:host.devui-splitter-bar .devui-collapse{background-color:#dfe1e6;position:absolute;z-index:15;cursor:pointer}:host.devui-splitter-bar .devui-collapse::after,:host.devui-splitter-bar .devui-collapse::before{content:'';width:10px;height:2px;background:#fff;display:block;position:absolute}:host.devui-splitter-bar .devui-collapse:hover{background-color:#344899}:host.devui-splitter-bar-horizontal .devui-collapse{width:12px;height:30px}:host.devui-splitter-bar-horizontal .devui-collapse.next.hidden,:host.devui-splitter-bar-horizontal .devui-collapse.prev.hidden{display:none}:host.devui-splitter-bar-horizontal .devui-collapse.prev{border-radius:0 4px 4px 0;left:1px}:host.devui-splitter-bar-horizontal .devui-collapse.prev.collapsed::before,:host.devui-splitter-bar-horizontal .devui-collapse.prev::before{top:9px;left:1px}:host.devui-splitter-bar-horizontal .devui-collapse.prev::before{-webkit-transform:rotate(-70deg);transform:rotate(-70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.prev.collapsed::before{-webkit-transform:rotate(70deg);transform:rotate(70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.prev.collapsed::after,:host.devui-splitter-bar-horizontal .devui-collapse.prev::after{top:18px;left:1px}:host.devui-splitter-bar-horizontal .devui-collapse.prev::after{-webkit-transform:rotate(70deg);transform:rotate(70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.prev.collapsed::after{-webkit-transform:rotate(-70deg);transform:rotate(-70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.next{border-radius:4px 0 0 4px;right:1px}:host.devui-splitter-bar-horizontal .devui-collapse.next.collapsed::before,:host.devui-splitter-bar-horizontal .devui-collapse.next::before{top:9px;right:1px}:host.devui-splitter-bar-horizontal .devui-collapse.next::before{-webkit-transform:rotate(70deg);transform:rotate(70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.next.collapsed::before{-webkit-transform:rotate(-70deg);transform:rotate(-70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.next.collapsed::after,:host.devui-splitter-bar-horizontal .devui-collapse.next::after{top:18px;right:1px}:host.devui-splitter-bar-horizontal .devui-collapse.next::after{-webkit-transform:rotate(-70deg);transform:rotate(-70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.next.collapsed::after{-webkit-transform:rotate(70deg);transform:rotate(70deg)}:host.devui-splitter-bar-vertical .devui-collapse{height:12px;width:30px}:host.devui-splitter-bar-vertical .devui-collapse.next.hidden,:host.devui-splitter-bar-vertical .devui-collapse.prev.hidden{display:none}:host.devui-splitter-bar-vertical .devui-collapse.prev{border-radius:0 0 4px 4px;top:1px}:host.devui-splitter-bar-vertical .devui-collapse.prev.collapsed::before,:host.devui-splitter-bar-vertical .devui-collapse.prev::before{bottom:5px;left:5px}:host.devui-splitter-bar-vertical .devui-collapse.prev::before{-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}:host.devui-splitter-bar-vertical .devui-collapse.prev.collapsed::before{-webkit-transform:rotate(20deg);transform:rotate(20deg)}:host.devui-splitter-bar-vertical .devui-collapse.prev.collapsed::after,:host.devui-splitter-bar-vertical .devui-collapse.prev::after{bottom:5px;left:14px}:host.devui-splitter-bar-vertical .devui-collapse.prev::after{-webkit-transform:rotate(20deg);transform:rotate(20deg)}:host.devui-splitter-bar-vertical .devui-collapse.prev.collapsed::after{-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}:host.devui-splitter-bar-vertical .devui-collapse.next{border-radius:4px 4px 0 0;bottom:1px}:host.devui-splitter-bar-vertical .devui-collapse.next.collapsed::before,:host.devui-splitter-bar-vertical .devui-collapse.next::before{top:5px;left:5px}:host.devui-splitter-bar-vertical .devui-collapse.next::before{-webkit-transform:rotate(20deg);transform:rotate(20deg)}:host.devui-splitter-bar-vertical .devui-collapse.next.collapsed::before{-webkit-transform:rotate(-20deg);transform:rotate(-20deg);top:5px;left:5px}:host.devui-splitter-bar-vertical .devui-collapse.next.collapsed::after,:host.devui-splitter-bar-vertical .devui-collapse.next::after{top:5px;left:14px}:host.devui-splitter-bar-vertical .devui-collapse.next::after{-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}:host.devui-splitter-bar-vertical .devui-collapse.next.collapsed::after{-webkit-transform:rotate(20deg);transform:rotate(20deg)}:host.devui-splitter-bar-horizontal.resizable:not(.none-resizable):active,:host.devui-splitter-bar-horizontal.resizable:not(.none-resizable):focus,:host.devui-splitter-bar-horizontal.resizable:not(.none-resizable):hover,:host.devui-splitter-bar-vertical.resizable:not(.none-resizable):active,:host.devui-splitter-bar-vertical.resizable:not(.none-resizable):focus,:host.devui-splitter-bar-vertical.resizable:not(.none-resizable):hover{background-color:#344899}:host.devui-splitter-bar-horizontal.resizable:not(.none-resizable)::after,:host.devui-splitter-bar-vertical.resizable:not(.none-resizable)::after{content:'';display:block;position:absolute;z-index:10}:host.devui-splitter-bar-horizontal.resizable{cursor:col-resize}:host.devui-splitter-bar-horizontal.resizable::after{cursor:col-resize;height:100%;width:10px;top:0}:host.devui-splitter-bar-vertical.resizable{cursor:row-resize}:host.devui-splitter-bar-vertical.resizable::after{cursor:row-resize;width:100%;height:10px;left:0}"]
}] }
];
/** @nocollapse */
SplitterBarComponent.ctorParameters = function () { return [
{ type: ElementRef },
{ type: SplitterService },
{ type: Renderer2 },
{ type: ResizeDirective, decorators: [{ type: Host }] }
]; };
SplitterBarComponent.propDecorators = {
index: [{ type: Input }],
orientation: [{ type: Input }],
splitBarSize: [{ type: Input }],
disabledBarSize: [{ type: Input }],
class: [{ type: HostBinding, args: ['class',] }]
};
return SplitterBarComponent;
}());
if (false) {
/** @type {?} */
SplitterBarComponent.prototype.index;
/** @type {?} */
SplitterBarComponent.prototype.orientation;
/** @type {?} */
SplitterBarComponent.prototype._splitBarSize;
/** @type {?} */
SplitterBarComponent.prototype.disabledBarSize;
/** @type {?} */
SplitterBarComponent.prototype.subscriptions;
/**
* @type {?}
* @private
*/
SplitterBarComponent.prototype.stopPropagation;
/**
* @type {?}
* @private
*/
SplitterBarComponent.prototype.moveStream;
/**
* @type {?}
* @private
*/
SplitterBarComponent.prototype.el;
/**
* @type {?}
* @private
*/
SplitterBarComponent.prototype.splitter;
/**
* @type {?}
* @private
*/
SplitterBarComponent.prototype.renderer;
/**
* @type {?}
* @private
*/
SplitterBarComponent.prototype.resize;
}
/**
* @fileoverview added by tsickle
* Generated from: splitter.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var SplitterModule = /** @class */ (function () {
function SplitterModule() {
}
SplitterModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
FormsModule
],
exports: [
SplitterComponent,
SplitterPaneComponent,
SplitterBarComponent,
ResizeDirective
],
declarations: [
SplitterComponent,
SplitterPaneComponent,
SplitterBarComponent,
ResizeDirective
],
providers: []
},] }
];
return SplitterModule;
}());
/**
* @fileoverview added by tsickle
* Generated from: splitter.types.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ng-devui-splitter.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { ResizeDirective, SplitterBarComponent, SplitterComponent, SplitterModule, SplitterPaneComponent, SplitterService };
//# sourceMappingURL=ng-devui-splitter.js.map