import * as i0 from '@angular/core';
import { Component, Pipe, Input, ContentChildren, ViewChildren, HostBinding, HostListener, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@angular/cdk/portal';
import { DomPortal, PortalModule } from '@angular/cdk/portal';
import * as i3 from '@mintplayer/ng-bootstrap/let';
import { BsLetModule } from '@mintplayer/ng-bootstrap/let';
import * as i4 from '@mintplayer/ng-bootstrap/user-agent';
import { BsUserAgentModule } from '@mintplayer/ng-bootstrap/user-agent';
import { BehaviorSubject, map, combineLatest, take } from 'rxjs';

var EDragOperation;
(function (EDragOperation) {
    EDragOperation[EDragOperation["none"] = 0] = "none";
    EDragOperation[EDragOperation["resizeSplitter"] = 1] = "resizeSplitter";
})(EDragOperation || (EDragOperation = {}));

class BsSplitPanelComponent {
    constructor(element) {
        this.element = element;
    }
    ngAfterViewInit() {
        setTimeout(() => this.portal = new DomPortal(this.element.nativeElement), 10);
    }
}
BsSplitPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BsSplitPanelComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
BsSplitPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: BsSplitPanelComponent, selector: "bs-split-panel", ngImport: i0, template: "<div class=\"w-100 h-100\">\n    <ng-content></ng-content>\n</div>", styles: [":host{display:block;height:100%}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BsSplitPanelComponent, decorators: [{
            type: Component,
            args: [{ selector: 'bs-split-panel', template: "<div class=\"w-100 h-100\">\n    <ng-content></ng-content>\n</div>", styles: [":host{display:block;height:100%}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });

class BsElementAtPipe {
    transform(value, index) {
        if (value) {
            return value[index];
        }
        else {
            return null;
        }
    }
}
BsElementAtPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BsElementAtPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
BsElementAtPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: BsElementAtPipe, name: "bsElementAt" });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BsElementAtPipe, decorators: [{
            type: Pipe,
            args: [{
                    name: 'bsElementAt'
                }]
        }] });

class BsSplitterComponent {
    constructor() {
        //#region Orientation
        this.orientation$ = new BehaviorSubject('horizontal');
        //#endregion
        this.previewSizes$ = new BehaviorSubject(null);
        this.panels$ = new BehaviorSubject([]);
        this.classes = true;
        this.isResizing$ = new BehaviorSubject(false);
        this.touchedDivider$ = new BehaviorSubject(null);
        this.operation = null;
        this.directionClass$ = this.orientation$.pipe(map((orientation) => {
            switch (orientation) {
                case 'horizontal': return 'flex-row';
                case 'vertical': return 'flex-column';
            }
        }));
        this.splitterClass$ = this.orientation$.pipe(map((orientation) => {
            switch (orientation) {
                case 'horizontal': return 'split-hor';
                case 'vertical': return 'split-ver';
            }
        }));
        this.widthStyles$ = combineLatest([this.orientation$, this.previewSizes$, this.panels$])
            .pipe(map(([orientation, previewSizes, panels]) => {
            switch (orientation) {
                case 'horizontal':
                    if (previewSizes) {
                        return [...Array(panels.length).keys()].map((v, i) => {
                            if (i < previewSizes.length) {
                                return previewSizes[i] + 'px';
                            }
                            else {
                                return '100%';
                            }
                        });
                    }
                    else {
                        return Array(panels.length).map((v, i) => '100%');
                    }
                case 'vertical':
                    return null;
            }
        }));
        this.heightStyles$ = combineLatest([this.orientation$, this.previewSizes$, this.panels$])
            .pipe(map(([orientation, previewSizes, panels]) => {
            switch (orientation) {
                case 'horizontal':
                    return null;
                case 'vertical':
                    if (previewSizes) {
                        return [...Array(panels.length).keys()].map((v, i) => {
                            if (i < previewSizes.length) {
                                return previewSizes[i] + 'px';
                            }
                            else {
                                return '100%';
                            }
                        });
                    }
                    else {
                        return Array(panels.length).map((v, i) => '100%');
                    }
            }
        }));
    }
    get orientation() {
        return this.orientation$.value;
    }
    set orientation(value) {
        this.orientation$.next(value);
    }
    set panels(value) {
        this.panels$.next(value.toArray());
    }
    computeSizes() {
        if (typeof window !== 'undefined') {
            const sizes = this.splitPanels
                .map((sp) => {
                const styles = window.getComputedStyle(sp.nativeElement);
                switch (this.orientation) {
                    case 'horizontal': return styles.width;
                    case 'vertical': return styles.height;
                }
            })
                .map((size) => size.slice(0, -2))
                .map((size) => parseFloat(size));
            return sizes;
        }
        else {
            return this.splitPanels.map(p => 50);
        }
    }
    startResizeMouse(ev, indexBefore, indexAfter) {
        ev.preventDefault();
        this.startResize(indexBefore, indexAfter, { x: ev.clientX, y: ev.clientY });
    }
    startResizeTouch(ev, indexBefore, indexAfter, divider) {
        if (ev.cancelable) {
            ev.preventDefault();
            this.touchedDivider$.next(divider);
            this.startResize(indexBefore, indexAfter, { x: ev.touches[0].clientX, y: ev.touches[0].clientY });
        }
    }
    startResize(indexBefore, indexAfter, pt) {
        const sizes = this.computeSizes();
        this.previewSizes$.next(sizes);
        this.operation = {
            operation: EDragOperation.resizeSplitter,
            startPosition: pt,
            sizes,
            indexBefore,
            indexAfter,
        };
        this.isResizing$.next(true);
    }
    onMouseMove(ev) {
        this.onResizeMove({ x: ev.clientX, y: ev.clientY });
    }
    onTouchMove(ev) {
        this.onResizeMove({ x: ev.touches[0].clientX, y: ev.touches[0].clientY });
    }
    onResizeMove(pt) {
        if (this.operation) {
            switch (this.operation.operation) {
                case EDragOperation.resizeSplitter:
                    {
                        combineLatest([this.orientation$])
                            .pipe(take(1))
                            .subscribe(([orientation]) => {
                            if (this.operation) {
                                switch (orientation) {
                                    case 'horizontal':
                                        const deltaX = pt.x - this.operation.startPosition.x;
                                        const sx = Array.from(this.operation.sizes);
                                        sx[this.operation.indexBefore] = this.operation.sizes[this.operation.indexBefore] + deltaX;
                                        sx[this.operation.indexAfter] = this.operation.sizes[this.operation.indexAfter] - deltaX;
                                        this.previewSizes$.next(sx);
                                        break;
                                    case 'vertical':
                                        const deltaY = pt.y - this.operation.startPosition.y;
                                        const sy = Array.from(this.operation.sizes);
                                        sy[this.operation.indexBefore] = this.operation.sizes[this.operation.indexBefore] + deltaY;
                                        sy[this.operation.indexAfter] = this.operation.sizes[this.operation.indexAfter] - deltaY;
                                        this.previewSizes$.next(sy);
                                        break;
                                }
                            }
                        });
                    }
                    break;
            }
        }
    }
    onMouseUp(ev) {
        this.onResizeUp();
    }
    onTouchEnd(ev) {
        this.touchedDivider$.next(null);
        this.onResizeUp();
    }
    onResizeUp() {
        this.isResizing$.next(false);
        this.operation = null;
    }
}
BsSplitterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BsSplitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
BsSplitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: BsSplitterComponent, selector: "bs-splitter", inputs: { orientation: "orientation" }, host: { listeners: { "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp($event)" }, properties: { "class.w-100": "this.classes", "class.h-100": "this.classes", "class.d-flex": "this.classes" } }, queries: [{ propertyName: "panels", predicate: BsSplitPanelComponent }], viewQueries: [{ propertyName: "splitPanels", predicate: ["splitPanel"], descendants: true }], ngImport: i0, template: "<div class=\"d-flex w-100 root\" [class]=\"[directionClass$ | async, splitterClass$ | async]\" bsUserAgent>\n    <ng-content></ng-content>\n    <ng-container *ngFor=\"let panel of (panels$ | async); let index = index; let last = last\">\n        <ng-container *bsLet=\"(widthStyles$ | async) as widthStyles\">\n            <ng-container *bsLet=\"(heightStyles$ | async) as heightStyles\">\n                <!--  [style.width.%]=\"100\" [style.height.%]=\"100\" -->\n                <div class=\"split-panel overflow-hidden\" [class.flex-none]=\"isResizing$ | async\" #splitPanel [style.width]=\"widthStyles | bsElementAt:index\" [style.height]=\"heightStyles | bsElementAt:index\">\n                    <ng-template [cdkPortalOutlet]=\"panel.portal\"></ng-template>\n                </div>\n            </ng-container>\n        </ng-container>\n        <div class=\"divider\" bsUserAgent [class.hover]=\"(touchedDivider$ | async) === divider\" #divider (mousedown)=\"startResizeMouse($event, index, index + 1)\" (touchstart)=\"startResizeTouch($event, index, index + 1, divider)\" (touchmove)=\"onTouchMove($event)\" (touchend)=\"onTouchEnd($event)\" *ngIf=\"!last\"></div>\n    </ng-container>\n</div>", styles: [".root{--thumb-margin: 3px}.root.os-android{--thumb-margin: 20px}.split-panel{flex-grow:1}.divider{flex-shrink:0;transition:background-color .15s ease-in-out;z-index:3}.divider:before{background-position:center center;background-repeat:no-repeat}.divider:not(.os-android):hover:before{background-color:#1389fd;border-radius:4px}.divider.os-android.hover:before{background-color:#1389fd;border-radius:4px}.divider:before{content:\"\";display:block;background-color:#eee}.split-hor>.divider{width:calc(8px + 2 * var(--thumb-margin));height:100%;cursor:col-resize;border-left:var(--thumb-margin) solid transparent;border-right:var(--thumb-margin) solid transparent}.split-hor>.divider:before{height:100%;width:8px;margin:0 auto;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==)}.split-hor>.split-panel:not(:first-child){margin-left:calc(-1 * var(--thumb-margin))}.split-hor>.split-panel:not(:last-child){margin-right:calc(-1 * var(--thumb-margin))}.split-ver>.divider{width:100%;height:calc(8px + 2 * var(--thumb-margin));cursor:row-resize;border-top:var(--thumb-margin) solid transparent;border-bottom:var(--thumb-margin) solid transparent}.split-ver>.divider:before{height:8px;margin:auto 0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC)}.split-ver>.split-panel:not(:first-child){margin-top:calc(-1 * var(--thumb-margin))}.split-ver>.split-panel:not(:last-child){margin-bottom:calc(-1 * var(--thumb-margin))}.flex-none{flex:none}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i3.BsLetDirective, selector: "[bsLet]", inputs: ["bsLet"] }, { kind: "directive", type: i4.BsUserAgentDirective, selector: "[bsUserAgent]", outputs: ["detected"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: BsElementAtPipe, name: "bsElementAt" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BsSplitterComponent, decorators: [{
            type: Component,
            args: [{ selector: 'bs-splitter', template: "<div class=\"d-flex w-100 root\" [class]=\"[directionClass$ | async, splitterClass$ | async]\" bsUserAgent>\n    <ng-content></ng-content>\n    <ng-container *ngFor=\"let panel of (panels$ | async); let index = index; let last = last\">\n        <ng-container *bsLet=\"(widthStyles$ | async) as widthStyles\">\n            <ng-container *bsLet=\"(heightStyles$ | async) as heightStyles\">\n                <!--  [style.width.%]=\"100\" [style.height.%]=\"100\" -->\n                <div class=\"split-panel overflow-hidden\" [class.flex-none]=\"isResizing$ | async\" #splitPanel [style.width]=\"widthStyles | bsElementAt:index\" [style.height]=\"heightStyles | bsElementAt:index\">\n                    <ng-template [cdkPortalOutlet]=\"panel.portal\"></ng-template>\n                </div>\n            </ng-container>\n        </ng-container>\n        <div class=\"divider\" bsUserAgent [class.hover]=\"(touchedDivider$ | async) === divider\" #divider (mousedown)=\"startResizeMouse($event, index, index + 1)\" (touchstart)=\"startResizeTouch($event, index, index + 1, divider)\" (touchmove)=\"onTouchMove($event)\" (touchend)=\"onTouchEnd($event)\" *ngIf=\"!last\"></div>\n    </ng-container>\n</div>", styles: [".root{--thumb-margin: 3px}.root.os-android{--thumb-margin: 20px}.split-panel{flex-grow:1}.divider{flex-shrink:0;transition:background-color .15s ease-in-out;z-index:3}.divider:before{background-position:center center;background-repeat:no-repeat}.divider:not(.os-android):hover:before{background-color:#1389fd;border-radius:4px}.divider.os-android.hover:before{background-color:#1389fd;border-radius:4px}.divider:before{content:\"\";display:block;background-color:#eee}.split-hor>.divider{width:calc(8px + 2 * var(--thumb-margin));height:100%;cursor:col-resize;border-left:var(--thumb-margin) solid transparent;border-right:var(--thumb-margin) solid transparent}.split-hor>.divider:before{height:100%;width:8px;margin:0 auto;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==)}.split-hor>.split-panel:not(:first-child){margin-left:calc(-1 * var(--thumb-margin))}.split-hor>.split-panel:not(:last-child){margin-right:calc(-1 * var(--thumb-margin))}.split-ver>.divider{width:100%;height:calc(8px + 2 * var(--thumb-margin));cursor:row-resize;border-top:var(--thumb-margin) solid transparent;border-bottom:var(--thumb-margin) solid transparent}.split-ver>.divider:before{height:8px;margin:auto 0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC)}.split-ver>.split-panel:not(:first-child){margin-top:calc(-1 * var(--thumb-margin))}.split-ver>.split-panel:not(:last-child){margin-bottom:calc(-1 * var(--thumb-margin))}.flex-none{flex:none}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { orientation: [{
                type: Input
            }], panels: [{
                type: ContentChildren,
                args: [BsSplitPanelComponent]
            }], splitPanels: [{
                type: ViewChildren,
                args: ['splitPanel']
            }], classes: [{
                type: HostBinding,
                args: ['class.w-100']
            }, {
                type: HostBinding,
                args: ['class.h-100']
            }, {
                type: HostBinding,
                args: ['class.d-flex']
            }], onMouseMove: [{
                type: HostListener,
                args: ['document:mousemove', ['$event']]
            }], onMouseUp: [{
                type: HostListener,
                args: ['document:mouseup', ['$event']]
            }] } });

class BsSplitterModule {
}
BsSplitterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BsSplitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
BsSplitterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: BsSplitterModule, declarations: [BsSplitterComponent, BsSplitPanelComponent, BsElementAtPipe], imports: [CommonModule, PortalModule, BsLetModule, BsUserAgentModule], exports: [BsSplitterComponent, BsSplitPanelComponent, BsElementAtPipe] });
BsSplitterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BsSplitterModule, imports: [CommonModule, PortalModule, BsLetModule, BsUserAgentModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BsSplitterModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [BsSplitterComponent, BsSplitPanelComponent, BsElementAtPipe],
                    imports: [CommonModule, PortalModule, BsLetModule, BsUserAgentModule],
                    exports: [BsSplitterComponent, BsSplitPanelComponent, BsElementAtPipe],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { BsElementAtPipe, BsSplitPanelComponent, BsSplitterComponent, BsSplitterModule };
//# sourceMappingURL=mintplayer-ng-bootstrap-splitter.mjs.map
