@duoduo-oba/ng-devui/fesm2015/ng-devui-splitter.js

DevUI components based on Angular

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
 */
class SplitterPaneComponent {
    /**
     * @param {?} el
     * @param {?} renderer
     */
    constructor(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;
    }
    /**
     * @param {?} newSize
     * @return {?}
     */
    set size(newSize) {
        this._size = newSize;
        this.renderer.setStyle(this.element, 'flex-basis', newSize);
        /** @type {?} */
        const 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);
        }
    }
    /**
     * @return {?}
     */
    get size() {
        return this._size;
    }
    // nativeElement句柄
    /**
     * @param {?} paneOrder
     * @return {?}
     */
    set order(paneOrder) {
        this._order = paneOrder;
        this.setOrderStyles();
    }
    /**
     * @return {?}
     */
    get order() {
        return this._order;
    }
    // 设置order
    /**
     * @return {?}
     */
    setOrderStyles() {
        this.renderer.setStyle(this.element, 'order', this.order);
    }
    // 获取当前pane大小
    /**
     * @return {?}
     */
    get computedSize() {
        if (this.orientation === 'vertical') {
            return this.element.offsetHeight;
        }
        else {
            return this.element.offsetWidth;
        }
    }
    // 收起时隐藏当前pane
    /**
     * @return {?}
     */
    toggleCollapseClass() {
        /** @type {?} */
        const 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
    /**
     * @return {?}
     */
    toggleNearPaneFlexGrow() {
        /** @type {?} */
        const flexGrowClass = 'devui-splitter-pane-grow';
        /** @type {?} */
        const hasFlexGrowClass = this.element.classList.contains(flexGrowClass);
        if (hasFlexGrowClass) {
            this.renderer.removeClass(this.element, flexGrowClass);
        }
        else {
            this.renderer.addClass(this.element, flexGrowClass);
        }
    }
    /**
     * @return {?}
     */
    ngAfterViewChecked() {
        // 视图检查完对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 = () => [
    { 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',] }]
};
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
 */
class SplitterService {
    constructor() {
        this.paneCount = 0;
    }
    // 配置pane信息，panes列表，方向，容器大小，方便后续计算使用
    /**
     * @param {?} __0
     * @return {?}
     */
    configPane({ panes, orientation, containerSize }) {
        this.panes = panes;
        this.panes.forEach((/**
         * @param {?} pane
         * @param {?} index
         * @return {?}
         */
        (pane, index) => {
            pane.order = index * 2;
            pane.orientation = orientation;
        }));
        this.paneCount = this.panes.length;
        this.containerSize = containerSize;
    }
    // 按下的时候计算pane的size信息
    /**
     * @param {?} splitbarIndex
     * @return {?}
     */
    dragState(splitbarIndex) {
        /** @type {?} */
        const prev = this.getPane(splitbarIndex);
        /** @type {?} */
        const next = this.getPane(splitbarIndex + 1);
        /** @type {?} */
        const 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大小
    /**
     * @param {?} state
     * @param {?} distance
     * @return {?}
     */
    setSize(state, distance) {
        /** @type {?} */
        const prev = this.getPane(state.prev.index);
        /** @type {?} */
        const 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）大于最大值时取最大值
    /**
     * @param {?} minSize
     * @param {?} maxSize
     * @param {?} initialSize
     * @return {?}
     */
    clamp(minSize, maxSize, initialSize) {
        return Math.min(maxSize, Math.max(minSize, initialSize));
    }
    // resize pane的大小
    /**
     * @param {?} paneState
     * @param {?} moveSize
     * @return {?}
     */
    resize(paneState, moveSize) {
        /** @type {?} */
        const pane = this.getPane(paneState.index);
        /** @type {?} */
        const splitterSize = this.containerSize();
        /** @type {?} */
        const newSize = this.clamp(paneState.minSize, paneState.maxSize, paneState.initialSize + moveSize);
        /** @type {?} */
        let size = '';
        if (this.isPercent(pane.size)) {
            size = (100 * newSize / splitterSize) + '%';
        }
        else {
            size = newSize + 'px';
        }
        pane.size = size;
        pane.sizeChange.emit(size);
    }
    // 判断pane是否可以调整大小，只要有一边设置了不可调整或者收起，相邻pane调整就失效
    /**
     * @param {?} splitBarIndex
     * @return {?}
     */
    isResizable(splitBarIndex) {
        /** @type {?} */
        const prevPane = this.getPane(splitBarIndex);
        /** @type {?} */
        const nextPane = this.getPane(splitBarIndex + 1);
        /** @type {?} */
        const paneCollapsed = prevPane.collapsed || nextPane.collapsed;
        return prevPane.resizable && nextPane.resizable && !paneCollapsed;
    }
    // 判断分割条是否是固定的，只要有一边不能调整, 就是禁用状态固定bar
    /**
     * @param {?} splitBarIndex
     * @return {?}
     */
    isStaticBar(splitBarIndex) {
        /** @type {?} */
        const prevPane = this.getPane(splitBarIndex);
        /** @type {?} */
        const nextPane = this.getPane(splitBarIndex + 1);
        return !(prevPane.resizable && nextPane.resizable);
    }
    // 获取pane，防止没有初始化的时候调用内部方法取值
    /**
     * @param {?} index
     * @return {?}
     */
    getPane(index) {
        if (!this.panes || index < 0 || index >= this.panes.length) {
            throw new Error('no pane can return.');
        }
        return this.panes[index];
    }
    // 判断是不是百分比设置宽度
    /**
     * @param {?} size
     * @return {?}
     */
    isPercent(size) {
        return /%$/.test(size);
    }
    // 计算时把百分比转换为像素
    /**
     * @param {?} size
     * @return {?}
     */
    toPixels(size) {
        // 值不满足转换时，result为NAN，方便计算最小、最大宽度判断
        /** @type {?} */
        let result = parseFloat(size);
        if (this.isPercent(size)) {
            result = (this.containerSize() * result / 100);
        }
        return result;
    }
    // 切换pane展开，收起
    /**
     * @param {?} paneIndex
     * @param {?} nearPaneIndex
     * @return {?}
     */
    togglePane(paneIndex, nearPaneIndex) {
        /** @type {?} */
        const pane = this.getPane(paneIndex);
        /** @type {?} */
        const nearPane = this.getPane(nearPaneIndex);
        if (pane.collapsible) {
            pane.collapsed = !pane.collapsed;
            pane.toggleCollapseClass();
            nearPane.toggleNearPaneFlexGrow();
            pane.collapsedChange.emit(pane.collapsed);
        }
    }
}
SplitterService.decorators = [
    { type: Injectable }
];
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
 */
class SplitterComponent {
    /**
     * @param {?} el
     * @param {?} splitter
     */
    constructor(el, splitter) {
        this.el = el;
        this.splitter = splitter;
        // 指定Splitter中窗格的方向，默认水平分割。
        this.orientation = 'horizontal';
        // 分隔条大小
        this.splitBarSize = '2px';
        // pane设置为不可调整大小时，生效
        this.disabledBarSize = '1px';
    }
    /**
     * @return {?}
     */
    get class() {
        return 'devui-splitter devui-splitter-' + this.orientation;
    }
    /**
     * @param {?} changes
     * @return {?}
     */
    ngOnChanges(changes) {
        if (changes.orientation && !changes.orientation.isFirstChange()) {
            this.reconfigure();
        }
    }
    /**
     * @return {?}
     */
    ngAfterContentInit() {
        this.reconfigure();
        // contentChildren 变化时，触发重新设置pane
        this.paneChangesSubscription = this.panes.changes.subscribe((/**
         * @param {?} panes
         * @return {?}
         */
        (panes) => {
            this.reconfigure();
        }));
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        if (this.paneChangesSubscription) {
            this.paneChangesSubscription.unsubscribe();
        }
    }
    // 配置pane
    /**
     * @return {?}
     */
    reconfigure() {
        this.splitter.configPane({
            panes: this.panes.toArray(),
            orientation: this.orientation,
            // 内容投影进组件之后，组件还没有渲染出dom，此时获取不到宽度，此处设置一个回调函数
            containerSize: (/**
             * @return {?}
             */
            () => {
                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 = () => [
    { 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,] }]
};
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
 */
class ResizeDirective {
    /**
     * @param {?} el
     * @param {?} ngZone
     */
    constructor(el, ngZone) {
        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 {?}
         */
        (el, event, callback) => el.addEventListener && el.addEventListener(event, callback));
        this.unbind = (/**
         * @param {?} el
         * @param {?} event
         * @param {?} callback
         * @return {?}
         */
        (el, event, callback) => el && el.removeEventListener && el.removeEventListener(event, callback));
        this.mousedown = (/**
         * @param {?} e
         * @return {?}
         */
        (e) => {
            this.bind(document, 'mousemove', this.mousemove);
            this.bind(document, 'mouseup', this.mouseup);
            this.pressEvent.emit(this.normalizeEvent(e));
        });
        this.mousemove = (/**
         * @param {?} e
         * @return {?}
         */
        (e) => {
            this.dragEvent.emit(this.normalizeEvent(e));
        });
        this.mouseup = (/**
         * @param {?} e
         * @return {?}
         */
        (e) => {
            this.unbind(document, 'mousemove', this.mousemove);
            this.unbind(document, 'mouseup', this.mouseup);
            this.releaseEvent.emit(this.normalizeEvent(e));
        });
        this.touchstart = (/**
         * @param {?} e
         * @return {?}
         */
        (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 {?}
         */
        (e) => {
            if (e.touches.length === 1) {
                this.dragEvent.emit(this.normalizeEvent(e));
            }
        });
        this.touchend = (/**
         * @param {?} e
         * @return {?}
         */
        (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 {?}
     */
    ngOnInit() {
        if (this.enableResize) {
            this.ngZone.runOutsideAngular((/**
             * @return {?}
             */
            () => {
                this.bindEvent();
            }));
        }
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        if (this.enableResize) {
            this.unbind(this.el.nativeElement, 'mousedown', this.mousedown);
            this.unbind(this.el.nativeElement, 'touchstart', this.touchstart);
        }
    }
    /**
     * @return {?}
     */
    bindEvent() {
        /** @type {?} */
        const element = this.el.nativeElement;
        // 绑定mousedown事件
        this.bind(element, 'mousedown', this.mousedown);
        // 绑定触屏事件
        this.bind(element, 'touchstart', this.touchstart);
    }
    // 返回常用位置信息
    /**
     * @param {?} e
     * @return {?}
     */
    normalizeEvent(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 = () => [
    { type: ElementRef },
    { type: NgZone }
];
ResizeDirective.propDecorators = {
    enableResize: [{ type: Input }],
    pressEvent: [{ type: Output }],
    dragEvent: [{ type: Output }],
    releaseEvent: [{ type: Output }]
};
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
 */
class SplitterBarComponent {
    /**
     * @param {?} el
     * @param {?} splitter
     * @param {?} renderer
     * @param {?} resize
     */
    constructor(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 {?}
         */
        ({ originalEvent: event }) => {
            event.stopPropagation();
            if (event.cancelable) {
                event.preventDefault();
            }
        });
        // 处理移动过程中的数据流, 合并到pressEvent事件流中
        this.moveStream = (/**
         * @param {?} resize
         * @return {?}
         */
        resize => (/**
         * @param {?} mouseDown
         * @return {?}
         */
        mouseDown => resize.dragEvent.pipe(takeUntil(resize.releaseEvent), map((/**
         * @param {?} __0
         * @return {?}
         */
        ({ pageX, pageY }) => ({
            originalX: mouseDown.pageX,
            originalY: mouseDown.pageY,
            pageX,
            pageY
        }))))));
    }
    /**
     * @param {?} size
     * @return {?}
     */
    set splitBarSize(size) {
        this._splitBarSize = size;
        this.renderer.setStyle(this.el.nativeElement, 'flex-basis', size);
    }
    /**
     * @return {?}
     */
    get splitBarSize() {
        return this._splitBarSize;
    }
    /**
     * @return {?}
     */
    get class() {
        /** @type {?} */
        let 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;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        /** @type {?} */
        let state;
        /** @type {?} */
        const resizeListener = this.resize.pressEvent
            .pipe(tap(this.stopPropagation), filter((/**
         * @return {?}
         */
        () => this.splitter.isResizable(this.index))), tap((/**
         * @return {?}
         */
        () => state = this.splitter.dragState(this.index))), switchMap(this.moveStream(this.resize)))
            .subscribe((/**
         * @param {?} __0
         * @return {?}
         */
        ({ pageX, pageY, originalX, originalY }) => {
            /** @type {?} */
            let distance;
            if (this.orientation === 'vertical') {
                distance = pageY - originalY;
            }
            else {
                distance = pageX - originalX;
            }
            this.splitter.setSize(state, distance);
        }));
        this.subscriptions.add(resizeListener);
    }
    /**
     * @return {?}
     */
    collapsePrePane() {
        /** @type {?} */
        const nearIndex = this.index + 1;
        this.splitter.togglePane(this.index, nearIndex);
        this.toggleResize(this.index);
    }
    /**
     * @return {?}
     */
    collapseNextPane() {
        this.splitter.togglePane(this.index + 1, this.index);
        this.toggleResize(this.index + 1);
    }
    // 切换是否允许拖拽，收起时不能拖拽
    /**
     * @param {?} paneIndex
     * @return {?}
     */
    toggleResize(paneIndex) {
        /** @type {?} */
        const pane = this.splitter.getPane(paneIndex);
        /** @type {?} */
        const isCollapsed = pane.collapsed;
        if (isCollapsed) {
            this.renderer.addClass(this.el.nativeElement, 'none-resizable');
        }
        else {
            this.renderer.removeClass(this.el.nativeElement, 'none-resizable');
        }
    }
    // 计算前面板收起操作样式
    /**
     * @return {?}
     */
    get prevClass() {
        /** @type {?} */
        const pane = this.splitter.getPane(this.index);
        /** @type {?} */
        const nearPane = this.splitter.getPane(this.index + 1);
        // 第一个面板或者其它面板折叠方向不是向后的显示操作按钮
        /** @type {?} */
        const showIcon = (pane.collapseDirection !== 'after' || this.index === 0);
        return this.generateCollapseClass(pane, nearPane, showIcon);
    }
    // 计算相邻面板收起操作样式
    /**
     * @return {?}
     */
    get nextClass() {
        /** @type {?} */
        const pane = this.splitter.getPane(this.index + 1);
        /** @type {?} */
        const nearPane = this.splitter.getPane(this.index);
        // 最后一个面板或者其它面板折叠方向不是向前的显示操作按钮
        /** @type {?} */
        const showIcon = (pane.collapseDirection !== 'before' || this.index + 1 === this.splitter.paneCount - 1);
        return this.generateCollapseClass(pane, nearPane, showIcon);
    }
    // 生成拼接样式
    /**
     * @param {?} classes
     * @return {?}
     */
    generateClass(classes) {
        return Object.keys(classes).filter((/**
         * @param {?} c
         * @return {?}
         */
        c => classes[c])).join(' ');
    }
    // 根据当前状态生成收起按钮样式
    /**
     * @param {?} pane
     * @param {?} nearPane
     * @param {?} showIcon
     * @return {?}
     */
    generateCollapseClass(pane, nearPane, showIcon) {
        // 是否允许收起
        /** @type {?} */
        const isCollapsible = pane.collapsible && showIcon;
        // 当前收起状态
        /** @type {?} */
        const isCollapsed = pane.collapsed;
        // 是否是固定pane
        /** @type {?} */
        const isStaticBar = this.splitter.isStaticBar(this.index);
        // 一个pane收起的时候，隐藏相邻pane的收起按钮
        /** @type {?} */
        const isNearPaneCollapsed = nearPane.collapsed;
        return this.generateClass({
            'devui-collapse': isCollapsible,
            'collapsed': isCollapsed,
            'hidden': isNearPaneCollapsed
        });
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        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 = () => [
    { 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',] }]
};
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
 */
class SplitterModule {
}
SplitterModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    CommonModule,
                    FormsModule
                ],
                exports: [
                    SplitterComponent,
                    SplitterPaneComponent,
                    SplitterBarComponent,
                    ResizeDirective
                ],
                declarations: [
                    SplitterComponent,
                    SplitterPaneComponent,
                    SplitterBarComponent,
                    ResizeDirective
                ],
                providers: []
            },] }
];

/**
 * @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