import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Host, HostBinding, Input, Renderer2, SkipSelf } from '@angular/core';
import { I18nService } from 'ng-devui/i18n';
import { Subscription } from 'rxjs';
import { filter, map, switchMap, takeUntil, tap } from 'rxjs/operators';
import { ResizeDirective } from './resize.directive';
import { SplitterService } from './splitter.service';
import * as i0 from "@angular/core";
import * as i1 from "./splitter.service";
import * as i2 from "./resize.directive";
import * as i3 from "ng-devui/i18n";
import * as i4 from "@angular/common";
import * as i5 from "ng-devui/popover";
export class SplitterBarComponent {
    constructor(el, splitter, renderer, resize, cdr, cdrSelf, i18n) {
        this.el = el;
        this.splitter = splitter;
        this.renderer = renderer;
        this.resize = resize;
        this.cdr = cdr;
        this.cdrSelf = cdrSelf;
        this.i18n = i18n;
        this.subscriptions = new Subscription();
        // 移动的时候，阻止事件冒泡
        this.stopPropagation = ({ originalEvent: event }) => {
            event.stopPropagation();
            if (event.cancelable) {
                event.preventDefault();
            }
        };
        // 处理移动过程中的数据流, 合并到pressEvent事件流中
        this.moveStream = resize => mouseDown => resize.dragEvent.pipe(takeUntil(resize.releaseEvent), map(({ pageX, pageY }) => ({
            originalX: mouseDown.pageX,
            originalY: mouseDown.pageY,
            pageX,
            pageY
        })));
        this.splitter.paneChangeSubject.subscribe(() => {
            this.initialCollapseStatus();
            this.cdr.detectChanges();
            this.cdrSelf.detectChanges();
        });
        this.splitterText = this.i18n.getI18nText().splitter;
        this.subscriptions.add(this.i18n.langChange().subscribe(data => {
            this.splitterText = data.splitter;
        }));
    }
    set splitBarSize(size) {
        this._splitBarSize = size;
        this.renderer.setStyle(this.el.nativeElement, 'flex-basis', size);
    }
    get splitBarSize() {
        return this._splitBarSize;
    }
    get class() {
        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;
    }
    ngOnInit() {
        let state;
        const resizeListener = this.resize.pressEvent
            .pipe(tap(this.stopPropagation), filter(() => this.splitter.isResizable(this.index)), tap(() => { state = this.splitter.dragState(this.index); }), switchMap(this.moveStream(this.resize)))
            .subscribe(({ pageX, pageY, originalX, originalY }) => {
            let distance;
            if (this.orientation === 'vertical') {
                distance = pageY - originalY;
            }
            else {
                distance = pageX - originalX;
            }
            this.splitter.setSize(state, distance);
        });
        this.subscriptions.add(resizeListener);
    }
    ngAfterViewInit() {
        this.initialCollapseStatus();
    }
    initialCollapseStatus() {
        this.collapsePrePane(true);
        this.collapseNextPane(true);
    }
    collapsePrePane(lockStatus) {
        this.splitter.togglePane(this.index, this.index + 1, lockStatus);
        this.toggleResize();
    }
    collapseNextPane(lockStatus) {
        this.splitter.togglePane(this.index + 1, this.index, lockStatus);
        this.toggleResize();
    }
    queryPanes(index, nearIndex) {
        const pane = this.splitter.getPane(index);
        const nearPane = this.splitter.getPane(nearIndex);
        return { pane, nearPane };
    }
    // 切换是否允许拖拽，收起时不能拖拽
    toggleResize() {
        const { pane, nearPane } = this.queryPanes(this.index, this.index + 1);
        const isCollapsed = pane.collapsed || nearPane.collapsed;
        if (isCollapsed) {
            this.renderer.addClass(this.el.nativeElement, 'none-resizable');
        }
        else {
            this.renderer.removeClass(this.el.nativeElement, 'none-resizable');
        }
    }
    // 计算前面板收起操作样式
    get prevClass() {
        const { pane, nearPane } = this.queryPanes(this.index, this.index + 1);
        this.preTip = pane.collapsed ? this.splitterText.expand : this.splitterText.collapse;
        // 第一个面板或者其它面板折叠方向不是向后的显示操作按钮
        const showIcon = (pane.collapseDirection !== 'after' || this.index === 0);
        return this.generateCollapseClass(pane, nearPane, showIcon);
    }
    // 计算相邻面板收起操作样式
    get nextClass() {
        const { pane, nearPane } = this.queryPanes(this.index + 1, this.index);
        this.nextTip = pane.collapsed ? this.splitterText.expand : this.splitterText.collapse;
        // 最后一个面板或者其它面板折叠方向不是向前的显示操作按钮
        const showIcon = (pane.collapseDirection !== 'before' || this.index + 1 === this.splitter.paneCount - 1);
        return this.generateCollapseClass(pane, nearPane, showIcon);
    }
    // 生成拼接样式
    generateClass(classes) {
        return Object.keys(classes).filter(c => classes[c]).join(' ');
    }
    // 根据当前状态生成收起按钮样式
    generateCollapseClass(pane, nearPane, showIcon) {
        // 是否允许收起
        const isCollapsible = pane.collapsible && showIcon;
        // 当前收起状态
        const isCollapsed = pane.collapsed;
        // 一个pane收起的时候，隐藏相邻pane的收起按钮
        const isNearPaneCollapsed = nearPane.collapsed;
        return this.generateClass({
            'devui-collapse': isCollapsible,
            'collapsed': isCollapsed,
            'hidden': isNearPaneCollapsed
        });
    }
    ngOnDestroy() {
        this.subscriptions.unsubscribe();
        this.splitter.paneChangeSubject.unsubscribe();
    }
}
SplitterBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SplitterBarComponent, deps: [{ token: i0.ElementRef }, { token: i1.SplitterService }, { token: i0.Renderer2 }, { token: i2.ResizeDirective, host: true }, { token: i0.ChangeDetectorRef, skipSelf: true }, { token: i0.ChangeDetectorRef }, { token: i3.I18nService }], target: i0.ɵɵFactoryTarget.Component });
SplitterBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SplitterBarComponent, selector: "d-splitter-bar", inputs: { index: "index", orientation: "orientation", showCollapseButton: "showCollapseButton", collapsePosLeft: "collapsePosLeft", collapsePosTop: "collapsePosTop", splitBarSize: "splitBarSize", disabledBarSize: "disabledBarSize" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div\n  class=\"prev\"\n  *ngIf=\"showCollapseButton\"\n  dPopover\n  [style.left]=\"collapsePosLeft\"\n  [style.top]=\"collapsePosTop\"\n  [trigger]=\"'hover'\"\n  [controlled]=\"true\"\n  [ngClass]=\"prevClass\"\n  [content]=\"preTip\"\n  [showAnimation]=\"false\"\n  [mouseEnterDelay]=\"100\"\n  [mouseLeaveDelay]=\"0\"\n  (click)=\"collapsePrePane()\"\n  (touchstart)=\"collapsePrePane()\"\n></div>\n<div class=\"devui-resize-handle\"></div>\n<div\n  class=\"next\"\n  *ngIf=\"showCollapseButton\"\n  dPopover\n  [trigger]=\"'hover'\"\n  [controlled]=\"true\"\n  [ngClass]=\"nextClass\"\n  [content]=\"nextTip\"\n  (click)=\"collapseNextPane()\"\n  (touchstart)=\"collapseNextPane()\"\n></div>\n", styles: [":host.devui-splitter-bar{background-color:#f2f2f3;background-color:var(--devui-dividing-line, #f2f2f3);display:flex;position:relative;align-items:center;justify-content:center;flex-grow:0;flex-shrink:0}:host.devui-splitter-bar .devui-collapse{background-color:#f2f2f3;background-color:var(--devui-dividing-line, #f2f2f3);position:absolute;z-index:15;cursor:pointer}:host.devui-splitter-bar .devui-collapse:before,:host.devui-splitter-bar .devui-collapse:after{content:\"\";width:10px;height:2px;background:#ffffff;display:block;position:absolute}:host.devui-splitter-bar .devui-collapse:hover{background-color:#7693f5;background-color:var(--devui-brand-hover, #7693f5)}:host.devui-splitter-bar-horizontal .devui-collapse{width:12px;height:30px}:host.devui-splitter-bar-horizontal .devui-collapse.prev.hidden,:host.devui-splitter-bar-horizontal .devui-collapse.next.hidden{display:none}:host.devui-splitter-bar-horizontal .devui-collapse.prev{border-radius:0 4px 4px 0;border-radius:0 var(--devui-border-radius-feedback, 4px) var(--devui-border-radius-feedback, 4px) 0;left:100%}:host.devui-splitter-bar-horizontal .devui-collapse.prev:before,:host.devui-splitter-bar-horizontal .devui-collapse.prev.collapsed:before{top:9px;left:1px}:host.devui-splitter-bar-horizontal .devui-collapse.prev:before{transform:rotate(-70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.prev.collapsed:before{transform:rotate(70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.prev:after,:host.devui-splitter-bar-horizontal .devui-collapse.prev.collapsed:after{top:18px;left:1px}:host.devui-splitter-bar-horizontal .devui-collapse.prev:after{transform:rotate(70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.prev.collapsed:after{transform:rotate(-70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.next{border-radius:4px 0 0 4px;border-radius:var(--devui-border-radius-feedback, 4px) 0 0 var(--devui-border-radius-feedback, 4px);right:100%}:host.devui-splitter-bar-horizontal .devui-collapse.next:before,:host.devui-splitter-bar-horizontal .devui-collapse.next.collapsed:before{top:9px;right:1px}:host.devui-splitter-bar-horizontal .devui-collapse.next:before{transform:rotate(70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.next.collapsed:before{transform:rotate(-70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.next:after,:host.devui-splitter-bar-horizontal .devui-collapse.next.collapsed:after{top:18px;right:1px}:host.devui-splitter-bar-horizontal .devui-collapse.next:after{transform:rotate(-70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.next.collapsed:after{transform:rotate(70deg)}:host.devui-splitter-bar-vertical .devui-collapse{height:12px;width:30px}:host.devui-splitter-bar-vertical .devui-collapse.prev.hidden,:host.devui-splitter-bar-vertical .devui-collapse.next.hidden{display:none}:host.devui-splitter-bar-vertical .devui-collapse.prev{border-radius:0 0 4px 4px;border-radius:0 0 var(--devui-border-radius-feedback, 4px) var(--devui-border-radius-feedback, 4px);top:100%}:host.devui-splitter-bar-vertical .devui-collapse.prev:before,:host.devui-splitter-bar-vertical .devui-collapse.prev.collapsed:before{bottom:5px;left:5px}:host.devui-splitter-bar-vertical .devui-collapse.prev:before{transform:rotate(-20deg)}:host.devui-splitter-bar-vertical .devui-collapse.prev.collapsed:before{transform:rotate(20deg)}:host.devui-splitter-bar-vertical .devui-collapse.prev:after,:host.devui-splitter-bar-vertical .devui-collapse.prev.collapsed:after{bottom:5px;left:14px}:host.devui-splitter-bar-vertical .devui-collapse.prev:after{transform:rotate(20deg)}:host.devui-splitter-bar-vertical .devui-collapse.prev.collapsed:after{transform:rotate(-20deg)}:host.devui-splitter-bar-vertical .devui-collapse.next{border-radius:4px 4px 0 0;border-radius:var(--devui-border-radius-feedback, 4px) var(--devui-border-radius-feedback, 4px) 0 0;bottom:100%}:host.devui-splitter-bar-vertical .devui-collapse.next:before,:host.devui-splitter-bar-vertical .devui-collapse.next.collapsed:before{top:5px;left:5px}:host.devui-splitter-bar-vertical .devui-collapse.next:before{transform:rotate(20deg)}:host.devui-splitter-bar-vertical .devui-collapse.next.collapsed:before{transform:rotate(-20deg);top:5px;left:5px}:host.devui-splitter-bar-vertical .devui-collapse.next:after,:host.devui-splitter-bar-vertical .devui-collapse.next.collapsed:after{top:5px;left:14px}:host.devui-splitter-bar-vertical .devui-collapse.next:after{transform:rotate(-20deg)}:host.devui-splitter-bar-vertical .devui-collapse.next.collapsed:after{transform:rotate(20deg)}:host.devui-splitter-bar-horizontal.resizable:not(.none-resizable):hover,:host.devui-splitter-bar-horizontal.resizable:not(.none-resizable):focus,:host.devui-splitter-bar-horizontal.resizable:not(.none-resizable):active,:host.devui-splitter-bar-vertical.resizable:not(.none-resizable):hover,:host.devui-splitter-bar-vertical.resizable:not(.none-resizable):focus,:host.devui-splitter-bar-vertical.resizable:not(.none-resizable):active{background-color:#7693f5;background-color:var(--devui-brand-hover, #7693f5)}: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}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.PopoverDirective, selector: "[dPopover]", inputs: ["content", "controlled", "position", "showAnimation", "showAnimate", "scrollElement", "appendToBody", "zIndex", "popType", "popMaxWidth", "trigger", "hoverToContent", "hoverDelayTime", "popoverStyle", "mouseEnterDelay", "mouseLeaveDelay", "visible"], exportAs: ["dPopover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SplitterBarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-splitter-bar', changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, template: "<div\n  class=\"prev\"\n  *ngIf=\"showCollapseButton\"\n  dPopover\n  [style.left]=\"collapsePosLeft\"\n  [style.top]=\"collapsePosTop\"\n  [trigger]=\"'hover'\"\n  [controlled]=\"true\"\n  [ngClass]=\"prevClass\"\n  [content]=\"preTip\"\n  [showAnimation]=\"false\"\n  [mouseEnterDelay]=\"100\"\n  [mouseLeaveDelay]=\"0\"\n  (click)=\"collapsePrePane()\"\n  (touchstart)=\"collapsePrePane()\"\n></div>\n<div class=\"devui-resize-handle\"></div>\n<div\n  class=\"next\"\n  *ngIf=\"showCollapseButton\"\n  dPopover\n  [trigger]=\"'hover'\"\n  [controlled]=\"true\"\n  [ngClass]=\"nextClass\"\n  [content]=\"nextTip\"\n  (click)=\"collapseNextPane()\"\n  (touchstart)=\"collapseNextPane()\"\n></div>\n", styles: [":host.devui-splitter-bar{background-color:#f2f2f3;background-color:var(--devui-dividing-line, #f2f2f3);display:flex;position:relative;align-items:center;justify-content:center;flex-grow:0;flex-shrink:0}:host.devui-splitter-bar .devui-collapse{background-color:#f2f2f3;background-color:var(--devui-dividing-line, #f2f2f3);position:absolute;z-index:15;cursor:pointer}:host.devui-splitter-bar .devui-collapse:before,:host.devui-splitter-bar .devui-collapse:after{content:\"\";width:10px;height:2px;background:#ffffff;display:block;position:absolute}:host.devui-splitter-bar .devui-collapse:hover{background-color:#7693f5;background-color:var(--devui-brand-hover, #7693f5)}:host.devui-splitter-bar-horizontal .devui-collapse{width:12px;height:30px}:host.devui-splitter-bar-horizontal .devui-collapse.prev.hidden,:host.devui-splitter-bar-horizontal .devui-collapse.next.hidden{display:none}:host.devui-splitter-bar-horizontal .devui-collapse.prev{border-radius:0 4px 4px 0;border-radius:0 var(--devui-border-radius-feedback, 4px) var(--devui-border-radius-feedback, 4px) 0;left:100%}:host.devui-splitter-bar-horizontal .devui-collapse.prev:before,:host.devui-splitter-bar-horizontal .devui-collapse.prev.collapsed:before{top:9px;left:1px}:host.devui-splitter-bar-horizontal .devui-collapse.prev:before{transform:rotate(-70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.prev.collapsed:before{transform:rotate(70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.prev:after,:host.devui-splitter-bar-horizontal .devui-collapse.prev.collapsed:after{top:18px;left:1px}:host.devui-splitter-bar-horizontal .devui-collapse.prev:after{transform:rotate(70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.prev.collapsed:after{transform:rotate(-70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.next{border-radius:4px 0 0 4px;border-radius:var(--devui-border-radius-feedback, 4px) 0 0 var(--devui-border-radius-feedback, 4px);right:100%}:host.devui-splitter-bar-horizontal .devui-collapse.next:before,:host.devui-splitter-bar-horizontal .devui-collapse.next.collapsed:before{top:9px;right:1px}:host.devui-splitter-bar-horizontal .devui-collapse.next:before{transform:rotate(70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.next.collapsed:before{transform:rotate(-70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.next:after,:host.devui-splitter-bar-horizontal .devui-collapse.next.collapsed:after{top:18px;right:1px}:host.devui-splitter-bar-horizontal .devui-collapse.next:after{transform:rotate(-70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.next.collapsed:after{transform:rotate(70deg)}:host.devui-splitter-bar-vertical .devui-collapse{height:12px;width:30px}:host.devui-splitter-bar-vertical .devui-collapse.prev.hidden,:host.devui-splitter-bar-vertical .devui-collapse.next.hidden{display:none}:host.devui-splitter-bar-vertical .devui-collapse.prev{border-radius:0 0 4px 4px;border-radius:0 0 var(--devui-border-radius-feedback, 4px) var(--devui-border-radius-feedback, 4px);top:100%}:host.devui-splitter-bar-vertical .devui-collapse.prev:before,:host.devui-splitter-bar-vertical .devui-collapse.prev.collapsed:before{bottom:5px;left:5px}:host.devui-splitter-bar-vertical .devui-collapse.prev:before{transform:rotate(-20deg)}:host.devui-splitter-bar-vertical .devui-collapse.prev.collapsed:before{transform:rotate(20deg)}:host.devui-splitter-bar-vertical .devui-collapse.prev:after,:host.devui-splitter-bar-vertical .devui-collapse.prev.collapsed:after{bottom:5px;left:14px}:host.devui-splitter-bar-vertical .devui-collapse.prev:after{transform:rotate(20deg)}:host.devui-splitter-bar-vertical .devui-collapse.prev.collapsed:after{transform:rotate(-20deg)}:host.devui-splitter-bar-vertical .devui-collapse.next{border-radius:4px 4px 0 0;border-radius:var(--devui-border-radius-feedback, 4px) var(--devui-border-radius-feedback, 4px) 0 0;bottom:100%}:host.devui-splitter-bar-vertical .devui-collapse.next:before,:host.devui-splitter-bar-vertical .devui-collapse.next.collapsed:before{top:5px;left:5px}:host.devui-splitter-bar-vertical .devui-collapse.next:before{transform:rotate(20deg)}:host.devui-splitter-bar-vertical .devui-collapse.next.collapsed:before{transform:rotate(-20deg);top:5px;left:5px}:host.devui-splitter-bar-vertical .devui-collapse.next:after,:host.devui-splitter-bar-vertical .devui-collapse.next.collapsed:after{top:5px;left:14px}:host.devui-splitter-bar-vertical .devui-collapse.next:after{transform:rotate(-20deg)}:host.devui-splitter-bar-vertical .devui-collapse.next.collapsed:after{transform:rotate(20deg)}:host.devui-splitter-bar-horizontal.resizable:not(.none-resizable):hover,:host.devui-splitter-bar-horizontal.resizable:not(.none-resizable):focus,:host.devui-splitter-bar-horizontal.resizable:not(.none-resizable):active,:host.devui-splitter-bar-vertical.resizable:not(.none-resizable):hover,:host.devui-splitter-bar-vertical.resizable:not(.none-resizable):focus,:host.devui-splitter-bar-vertical.resizable:not(.none-resizable):active{background-color:#7693f5;background-color:var(--devui-brand-hover, #7693f5)}: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}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.SplitterService }, { type: i0.Renderer2 }, { type: i2.ResizeDirective, decorators: [{
                    type: Host
                }] }, { type: i0.ChangeDetectorRef, decorators: [{
                    type: SkipSelf
                }] }, { type: i0.ChangeDetectorRef }, { type: i3.I18nService }]; }, propDecorators: { index: [{
                type: Input
            }], orientation: [{
                type: Input
            }], showCollapseButton: [{
                type: Input
            }], collapsePosLeft: [{
                type: Input
            }], collapsePosTop: [{
                type: Input
            }], splitBarSize: [{
                type: Input
            }], disabledBarSize: [{
                type: Input
            }], class: [{
                type: HostBinding,
                args: ['class']
            }] } });
//# sourceMappingURL=data:application/json;base64, 