import { ChangeDetectionStrategy, Component, ContentChild, ElementRef, EventEmitter, Input, Output, TemplateRef, ViewChild, } from '@angular/core';
import { fromEvent, merge, switchMap } from 'rxjs';
import { map, mapTo, startWith, takeUntil } from 'rxjs/operators';
import { SplitViewLeftDirective, SplitViewRightDirective } from './split-view.directive';
import * as i0 from "@angular/core";
import * as i1 from "@angular/platform-browser";
import * as i2 from "@clr/angular";
import * as i3 from "@angular/common";
export class SplitViewComponent {
    constructor(viewContainerRef, domSanitizer) {
        this.viewContainerRef = viewContainerRef;
        this.domSanitizer = domSanitizer;
        this.rightPanelOpen = false;
        this.closeClicked = new EventEmitter();
    }
    ngAfterContentInit() {
        if (!this.leftTemplate) {
            throw new Error('A <vdr-split-view-left> must be provided');
        }
        if (!this.rightTemplate) {
            throw new Error('A <vdr-split-view-right> must be provided');
        }
    }
    ngAfterViewInit() {
        const hostElement = this.viewContainerRef.element.nativeElement;
        const hostElementWidth = hostElement.getBoundingClientRect()?.width;
        const mouseDown$ = merge(fromEvent(this.resizeHandle.nativeElement, 'mousedown'), fromEvent(this.resizeHandle.nativeElement, 'touchstart'));
        const mouseMove$ = merge(fromEvent(document, 'mousemove'), fromEvent(document, 'touchmove'));
        const mouseUp$ = merge(fromEvent(document, 'mouseup'), fromEvent(document, 'touchend'));
        // update right panel width when resize handle is dragged
        this.rightPanelWidth$ = mouseDown$.pipe(switchMap(() => mouseMove$.pipe(takeUntil(mouseUp$))), map(event => {
            const clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
            const width = hostElement.getBoundingClientRect().right - clientX;
            return Math.max(100, Math.min(width, hostElementWidth - 100));
        }), startWith(hostElementWidth / 2));
        this.leftPanelWidth$ = this.rightPanelWidth$.pipe(map(width => `calc(var(--surface-width) - ${width}px)`));
        this.resizing$ = merge(mouseDown$.pipe(mapTo(true)), mouseUp$.pipe(mapTo(false)));
    }
    close() {
        this.closeClicked.emit();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: SplitViewComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: SplitViewComponent, selector: "vdr-split-view", inputs: { rightPanelOpen: "rightPanelOpen" }, outputs: { closeClicked: "closeClicked" }, queries: [{ propertyName: "leftTemplate", first: true, predicate: SplitViewLeftDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "rightTemplate", first: true, predicate: SplitViewRightDirective, descendants: true, read: SplitViewRightDirective, static: true }], viewQueries: [{ propertyName: "resizeHandle", first: true, predicate: ["resizeHandle"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"split-view-wrapper\" [class.expanded]=\"rightPanelOpen\" [class.resizing]=\"resizing$ | async\">\n    <div class=\"left-panel\" [style.width]=\"leftPanelWidth$ | async\">\n        <ng-container *ngTemplateOutlet=\"leftTemplate\"></ng-container>\n    </div>\n    <div class=\"separator\" [class.hidden]=\"!rightPanelOpen\">\n        <div class=\"top\"></div>\n        <div class=\"resize-handle\" #resizeHandle>\n            <clr-icon shape=\"drag-handle\"></clr-icon>\n        </div>\n        <div class=\"bottom\"></div>\n    </div>\n    <div\n        class=\"right-panel\"\n        [class.expanded]=\"rightPanelOpen\"\n        [class.resizing]=\"resizing$ | async\"\n        [style.width.px]=\"rightPanelOpen ? (rightPanelWidth$ | async) : 0\"\n    >\n        <div class=\"close-row\">\n            <div class=\"title\" *ngIf=\"rightTemplate.splitViewTitle as title\">{{ title }}</div>\n            <button type=\"button\" class=\"button-small\" (click)=\"close()\">\n                <clr-icon shape=\"close\"></clr-icon>\n            </button>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"rightTemplate.template\"></ng-container>\n    </div>\n</div>\n", styles: [":host{--separator-border: var(--color-split-view-separator-border);max-width:var(--surface-width)}.split-view-wrapper{display:flex;height:calc(100% - 50px)}.split-view-wrapper.resizing{-webkit-user-select:none;user-select:none}.split-view-wrapper .left-panel{flex:1;overflow:auto;margin-top:0}.split-view-wrapper .left-panel .active{background-color:var(--clr-global-selection-color)}.split-view-wrapper .left-panel.expanded{width:calc(100% - 40vw)}.separator{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-inline-start:-1px;z-index:10}.separator.hidden{display:none}.separator .resize-handle{display:flex;align-items:center;justify-content:center;flex:1;border-inline-start:1px solid var(--separator-border);border-inline-end:1px solid var(--separator-border);cursor:ew-resize;transition:background-color .2s}.separator .top,.separator .bottom{height:48px;width:100%;border-style:solid;border-width:0 1px}.separator .top{border-image:linear-gradient(0deg,var(--separator-border),transparent) 1}.separator .bottom{border-image:linear-gradient(180deg,var(--separator-border),transparent) 1}.resizing{--separator-border: var(--color-split-view-separator-resize-border)}.resizing .resize-handle{color:var(--color-primary-700)}.close-row{display:flex;justify-content:space-between;padding:calc(var(--space-unit) * 1);padding-inline-start:var(--surface-margin-left);padding-inline-end:4px}.right-panel{height:100%;opacity:0;visibility:hidden;overflow:auto}.right-panel:not(.resizing){transition:width .3s,opacity .2s .3s,visibility 0s .3s}.right-panel.expanded{visibility:visible;opacity:1}.right-panel .close-button{margin:0;background:none;border:none;cursor:pointer}.right-panel ::ng-deep table.table{margin-top:0}.right-panel ::ng-deep table.table th{top:0}.right-panel .controls{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: SplitViewComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vdr-split-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"split-view-wrapper\" [class.expanded]=\"rightPanelOpen\" [class.resizing]=\"resizing$ | async\">\n    <div class=\"left-panel\" [style.width]=\"leftPanelWidth$ | async\">\n        <ng-container *ngTemplateOutlet=\"leftTemplate\"></ng-container>\n    </div>\n    <div class=\"separator\" [class.hidden]=\"!rightPanelOpen\">\n        <div class=\"top\"></div>\n        <div class=\"resize-handle\" #resizeHandle>\n            <clr-icon shape=\"drag-handle\"></clr-icon>\n        </div>\n        <div class=\"bottom\"></div>\n    </div>\n    <div\n        class=\"right-panel\"\n        [class.expanded]=\"rightPanelOpen\"\n        [class.resizing]=\"resizing$ | async\"\n        [style.width.px]=\"rightPanelOpen ? (rightPanelWidth$ | async) : 0\"\n    >\n        <div class=\"close-row\">\n            <div class=\"title\" *ngIf=\"rightTemplate.splitViewTitle as title\">{{ title }}</div>\n            <button type=\"button\" class=\"button-small\" (click)=\"close()\">\n                <clr-icon shape=\"close\"></clr-icon>\n            </button>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"rightTemplate.template\"></ng-container>\n    </div>\n</div>\n", styles: [":host{--separator-border: var(--color-split-view-separator-border);max-width:var(--surface-width)}.split-view-wrapper{display:flex;height:calc(100% - 50px)}.split-view-wrapper.resizing{-webkit-user-select:none;user-select:none}.split-view-wrapper .left-panel{flex:1;overflow:auto;margin-top:0}.split-view-wrapper .left-panel .active{background-color:var(--clr-global-selection-color)}.split-view-wrapper .left-panel.expanded{width:calc(100% - 40vw)}.separator{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-inline-start:-1px;z-index:10}.separator.hidden{display:none}.separator .resize-handle{display:flex;align-items:center;justify-content:center;flex:1;border-inline-start:1px solid var(--separator-border);border-inline-end:1px solid var(--separator-border);cursor:ew-resize;transition:background-color .2s}.separator .top,.separator .bottom{height:48px;width:100%;border-style:solid;border-width:0 1px}.separator .top{border-image:linear-gradient(0deg,var(--separator-border),transparent) 1}.separator .bottom{border-image:linear-gradient(180deg,var(--separator-border),transparent) 1}.resizing{--separator-border: var(--color-split-view-separator-resize-border)}.resizing .resize-handle{color:var(--color-primary-700)}.close-row{display:flex;justify-content:space-between;padding:calc(var(--space-unit) * 1);padding-inline-start:var(--surface-margin-left);padding-inline-end:4px}.right-panel{height:100%;opacity:0;visibility:hidden;overflow:auto}.right-panel:not(.resizing){transition:width .3s,opacity .2s .3s,visibility 0s .3s}.right-panel.expanded{visibility:visible;opacity:1}.right-panel .close-button{margin:0;background:none;border:none;cursor:pointer}.right-panel ::ng-deep table.table{margin-top:0}.right-panel ::ng-deep table.table th{top:0}.right-panel .controls{display:flex;justify-content:space-between}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i1.DomSanitizer }]; }, propDecorators: { rightPanelOpen: [{
                type: Input
            }], closeClicked: [{
                type: Output
            }], leftTemplate: [{
                type: ContentChild,
                args: [SplitViewLeftDirective, { static: true, read: TemplateRef }]
            }], rightTemplate: [{
                type: ContentChild,
                args: [SplitViewRightDirective, { static: true, read: SplitViewRightDirective }]
            }], resizeHandle: [{
                type: ViewChild,
                args: ['resizeHandle', { static: true, read: ElementRef }]
            }] } });
//# sourceMappingURL=data:application/json;base64, 