gd-splitter
Version:
This set of libraries was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.2.4.
299 lines (298 loc) • 54.3 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, ViewEncapsulation, Input, Output, NgModule } from '@angular/core';
import { Subject } from 'rxjs';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { GDCommonModule } from 'gd-common';
class GDSplitterComponent {
get Settings() { return this.settings; }
set Settings(value) { this.settings = value; }
constructor(el) {
this.el = el;
this.settings = {};
this.Width = 0;
this.Height = 0;
this.resizeVert = {};
this.resizeHor = {};
this.isTopActive = false;
this.isLeftActive = false;
this.isBottomActive = false;
this.isRightActive = false;
this.resizeValue = 0;
this.top = new SplitterPanel();
this.left = new SplitterPanel();
this.right = new SplitterPanel();
this.bottom = new SplitterPanel();
this.center = new SplitterPanel();
this.topBorder = '0';
this.leftBorder = '0';
this.rightBorder = '0';
this.bottomBorder = '0';
this.centerBorder = '0';
this.isTopPanelVisible = false;
this.isLeftPanelVisible = false;
this.isRightPanelVisible = false;
this.isBottomPanelVisible = false;
this.isSplitterBorderVisible = false;
this.actionNotifier$ = new Subject();
}
ngOnInit() {
this.initPanels();
}
ngAfterViewInit() {
this.drag = { x: 0, y: 0 };
this.delta = { x: 0, y: 0 };
// this.resizeVert = this.el.nativeElement.querySelectorAll('div.splitter-vertical')[0];
// this.resizeHor = this.el.nativeElement.querySelectorAll('div.splitter-horizontal')[0];
}
onSeparatorTopMouseDown(event) {
}
onSeparatorBottomMouseDown(event) {
if (!this.bottom.isOpened)
return;
this.drag.x = event.clientX;
this.drag.y = event.clientY;
this.delta.x = 0;
this.delta.y = 0;
this.isBottomActive = true;
var splitter = this.el.nativeElement.querySelectorAll('div.splitter')[0];
splitter.style.cursor = 'row-resize';
let rect = splitter.getBoundingClientRect();
this.Height = rect.height;
let bottomPanel = this.el.nativeElement.querySelectorAll('div.bottomPanel');
rect = bottomPanel[0].getBoundingClientRect();
this.resizeValue = this.Height - Number(this.bottom.height);
this.resizeHor = this.el.nativeElement.querySelectorAll('div.splitter-horizontal')[0];
this.resizeHor.style.opacity = '0.5';
this.resizeHor.style.background = '#aaa';
this.resizeHor.style.width = rect.width.toString() + 'px';
this.resizeHor.style.left = rect.left + 'px';
this.resizeHor.style.top = this.resizeValue + 'px';
}
onSeparatorLeftMouseDown(event) {
if (!this.left.isOpened)
return;
this.drag.x = event.clientX;
this.drag.y = event.clientY;
this.delta.x = 0;
this.delta.y = 0;
this.left.width = this.left.width ?? '0';
this.top.height = this.top.height ?? '0';
this.isLeftActive = true;
this.resizeValue = +this.left.width;
let splitter = this.el.nativeElement.querySelectorAll('div.splitter')[0];
splitter.style.cursor = 'col-resize';
let leftPanel = this.el.nativeElement.querySelectorAll('div.leftPanel');
let rect = leftPanel[0].getBoundingClientRect();
let topHeight = +this.top.height - (this.top.seperatorBorderThickness * 2) + 2;
this.resizeVert = this.el.nativeElement.querySelectorAll('div.splitter-vertical')[0];
this.resizeVert.style.opacity = '0.5';
this.resizeVert.style.background = '#aaa';
this.resizeVert.style.border = '1px solid #aaa';
this.resizeVert.style.height = rect.height + 'px';
this.resizeVert.style.top = topHeight + 'px';
this.resizeVert.style.left = (this.resizeValue - 4).toString() + 'px';
}
onSeparatorRightMouseDown(event) {
if (!this.right.isOpened)
return;
this.drag.x = event.clientX;
this.drag.y = event.clientY;
this.delta.x = 0;
this.delta.y = 0;
this.right.width = this.right.width ?? '0';
this.top.height = this.top.height ?? '0';
this.isRightActive = true;
let splitter = this.el.nativeElement.querySelectorAll('div.splitter')[0];
splitter.style.cursor = 'col-resize';
let rect = splitter.getBoundingClientRect();
this.Width = rect.width;
let rightPanel = this.el.nativeElement.querySelectorAll('div.rightPanel');
rect = rightPanel[0].getBoundingClientRect();
this.resizeValue = +this.right.width;
let topHeight = +this.top.height - (this.top.seperatorBorderThickness * 2) + 6;
this.resizeVert = this.el.nativeElement.querySelectorAll('div.splitter-vertical')[0];
this.resizeVert.style.opacity = '0.5';
this.resizeVert.style.background = '#aaa';
this.resizeVert.style.border = '1px solid #aaa';
this.resizeVert.style.height = rect.height + 'px';
this.resizeVert.style.top = topHeight + 'px';
this.resizeVert.style.left = (this.Width - rect.width).toString() + 'px';
}
buttonTopMouseDown(event) {
this.top.isOpened = !this.top.isOpened;
this.top.width = this.top.isOpened ? this.top.size.toString() : '4';
}
buttonLeftMouseDown(event) {
this.left.isOpened = !this.left.isOpened;
this.left.width = this.left.isOpened ? this.left.size.toString() : '4';
}
buttonRightMouseDown(event) {
this.right.isOpened = !this.right.isOpened;
this.right.width = this.right.isOpened ? this.right.size.toString() : '6';
}
buttonBottomMouseDown(event) {
this.bottom.isOpened = !this.bottom.isOpened;
this.bottom.height = this.bottom.isOpened ? this.bottom.size.toString() : '6';
}
onSplitterMouseMove(event) {
if (event.buttons === 0)
return;
event.stopPropagation();
event.preventDefault();
this.delta.x = event.clientX - this.drag.x;
this.delta.y = event.clientY - this.drag.y;
this.bottom.height = this.bottom.height ?? '0';
this.left.width = this.left.width ?? '0';
this.right.width = this.right.width ?? '0';
if (this.isTopActive) {
this.resizeValue = +this.bottom.height + this.delta.y;
this.resizeHor.style.top = this.resizeValue + 'px';
}
if (this.isLeftActive) {
this.resizeValue = +this.left.width + this.delta.x - 4;
this.resizeVert.style.left = this.resizeValue + 'px';
}
if (this.isRightActive) {
this.resizeValue = this.Width - +this.right.width + this.delta.x + 0;
this.resizeVert.style.left = this.resizeValue + 'px';
}
if (this.isBottomActive) {
this.resizeValue = this.Height - +this.bottom.height + this.delta.y + 0;
this.resizeHor.style.top = this.resizeValue + 'px';
}
}
onSplitterMouseUp(event) {
var splitter = this.el.nativeElement.querySelectorAll('div.splitter');
if (splitter.length > 0)
splitter[0].style.cursor = 'default';
if (this.isTopActive || this.isBottomActive) {
var resizer = this.el.nativeElement.querySelectorAll('div.splitter-horizontal')[0];
resizer.style.top = '-10px';
resizer.style.background = 'transparent';
resizer.style.border = 'NONE';
if (this.isTopActive) {
this.resizeValue = +this.top.size + this.delta.y; // I did not test
this.top.height = this.resizeValue.toString();
this.top.size = this.resizeValue;
this.actionNotifier$.next({ panel: 'top', size: this.resizeValue });
}
if (this.isBottomActive) {
this.resizeValue = +this.bottom.size - this.delta.y;
this.bottom.height = this.resizeValue.toString();
this.bottom.size = this.resizeValue;
this.actionNotifier$.next({ panel: 'bottom', size: this.resizeValue });
}
}
if (this.isLeftActive || this.isRightActive) {
let resizer = this.el.nativeElement.querySelectorAll('div.splitter-vertical')[0];
resizer.style.left = '-10px';
resizer.style.background = 'trasparent';
resizer.style.border = 'NONE';
if (this.isLeftActive) {
this.resizeValue = +this.left.size + this.delta.x;
this.left.width = this.resizeValue.toString();
this.left.size = this.resizeValue;
this.actionNotifier$.next({ panel: 'left', size: this.resizeValue });
}
if (this.isRightActive) {
this.resizeValue = +this.right.size - this.delta.x;
this.right.width = this.resizeValue.toString();
this.right.size = this.resizeValue;
this.actionNotifier$.next({ panel: 'right', size: this.resizeValue });
}
}
this.isTopActive = false;
this.isBottomActive = false;
this.isLeftActive = false;
this.isRightActive = false;
}
initPanels() {
this.top.index = this.settings.panels.findIndex(x => x.layout === SplitterPanels.top);
if (this.top.index > -1) {
var topSettings = this.settings.panels[this.top.index];
this.top.seperatorThickness = topSettings.seperatorThickness ?? 3;
this.top.seperatorBackground = topSettings.seperatorBackground ?? '#aaa';
this.top.size = topSettings.size ?? 50;
this.top.isOpened = topSettings.isOpened ?? true;
this.top.isButtonVisible = topSettings.isButtonVisible ?? true;
this.top.isSeperatorLocked = topSettings.isSeperatorLocked ?? false;
this.top.cursor = topSettings.isSeperatorLocked ? 'default' : 'row-resize';
this.top.seperatorBorderThickness = this.top.seperatorThickness > 1 ? 1 : 0;
this.top.seperatorBorderColor = '#888';
this.top.display = '';
this.top.height = this.top.isOpened ? (this.top.size).toString() : '0';
if (this.isSplitterBorderVisible) {
this.topBorder = `1px 1px 0 1px`;
}
this.isTopPanelVisible = true;
}
this.left.index = this.settings.panels.findIndex(x => x.layout === SplitterPanels.left);
if (this.left.index > -1) {
var leftSettings = this.settings.panels[this.left.index];
this.left.seperatorThickness = leftSettings.seperatorThickness ?? 3;
this.left.seperatorBackground = leftSettings.seperatorBackground ?? '#ccc';
this.left.size = leftSettings.size ?? 50;
this.left.isOpened = leftSettings.isOpened ?? true;
this.left.isButtonVisible = leftSettings.isButtonVisible ?? true;
this.left.isSeperatorLocked = leftSettings.isSeperatorLocked ?? false;
this.left.cursor = leftSettings.isSeperatorLocked ? 'default' : 'col-resize';
this.left.seperatorBorderThickness = this.left.seperatorThickness > 1 ? 1 : 0;
this.left.seperatorBorderColor = '#aaa';
this.left.display = '';
this.left.width = (this.left.isOpened ? leftSettings.size.toString() : '1');
if (this.isSplitterBorderVisible) {
this.leftBorder = `${this.top.index === -1 ? '1px' : '0'} 0 1px 1px`;
}
this.isLeftPanelVisible = true;
}
this.right.index = this.settings.panels.findIndex(x => x.layout === SplitterPanels.right);
if (this.right.index > -1) {
var rightSettings = this.settings.panels[this.right.index];
this.right.seperatorThickness = rightSettings.seperatorThickness ?? 3;
this.right.seperatorBackground = rightSettings.seperatorBackground ?? '#ccc';
this.right.size = rightSettings.size ?? 50;
this.right.isOpened = rightSettings.isOpened ?? true;
this.right.isButtonVisible = rightSettings.isButtonVisible ?? true;
this.right.isSeperatorLocked = rightSettings.isSeperatorLocked ?? false;
this.right.cursor = rightSettings.isSeperatorLocked ? 'default' : 'col-resize';
this.right.seperatorBorderThickness = this.right.seperatorThickness > 1 ? 1 : 0;
this.right.seperatorBorderColor = '#aaa';
this.right.display = '';
this.right.width = (this.right.isOpened ? this.right.size.toString() : '5');
if (this.isSplitterBorderVisible) {
this.rightBorder = `${this.top.index === -1 ? '1px' : '0'} 1px 1px 0`;
}
this.isRightPanelVisible = true;
}
this.bottom.index = this.settings.panels.findIndex(x => x.layout === SplitterPanels.bottom);
if (this.bottom.index > -1) {
var bottomSettings = this.settings.panels[this.bottom.index];
this.bottom.seperatorThickness = bottomSettings.seperatorThickness ?? 3;
this.bottom.seperatorBackground = bottomSettings.seperatorBackground ?? '#ccc';
this.bottom.size = bottomSettings.size ?? 50;
this.bottom.isOpened = bottomSettings.isOpened ?? true;
this.bottom.isButtonVisible = bottomSettings.isButtonVisible ?? true;
this.bottom.isSeperatorLocked = bottomSettings.isSeperatorLocked ?? false;
this.bottom.cursor = bottomSettings.isSeperatorLocked ? 'default' : 'row-resize';
this.bottom.seperatorBorderThickness = this.bottom.seperatorThickness > 1 ? 1 : 0;
this.bottom.seperatorBorderColor = '#aaa';
this.bottom.display = '';
this.bottom.height = (this.bottom.isOpened ? (this.bottom.size).toString() : '0');
if (this.isSplitterBorderVisible) {
this.bottomBorder = `0 ${this.right.index === -1 ? '1px' : '0'} 1px ${this.left.index === -1 ? '1px' : '0'}`;
}
this.isBottomPanelVisible = true;
}
if (this.isSplitterBorderVisible) {
this.centerBorder = `${this.top.index === -1 ? '1px' : '0'} ${this.right.index === -1 ? '1px' : '0'} ${this.bottom.index === -1 ? '1px' : '0'} ${this.left.index === -1 ? '1px' : '0'}`;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: GDSplitterComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: GDSplitterComponent, selector: "gd-splitter", inputs: { Settings: "Settings" }, outputs: { actionNotifier$: "actionNotifier$" }, ngImport: i0, template: "<div class=\"splitter\" (mousemove)=\"onSplitterMouseMove($event)\" (mouseup)=\"onSplitterMouseUp($event)\">\n <div *ngIf=\"isTopPanelVisible\" class=\"topPanel\" [ngStyle]=\"{ 'height': top.height + 'px', 'border-width': topBorder }\">\n <div *ngIf=\"top.isOpened\" class=\"topPanelContent\">\n <ng-content select=\"[panel=top]\"></ng-content>\n </div>\n <div class=\"seperatorTop\" (mousedown)=\"onSeparatorTopMouseDown($event)\" [ngStyle]=\"{ 'height' \t : top.seperatorThickness + 'px', \n 'border-width' : top.seperatorBorderThickness + 'px 0', \n 'border-color' : top.seperatorBorderColor,\n 'background' : top.seperatorBackground }\"> \n <div *ngIf=\"top.isButtonVisible && ! top.isSeperatorLocked\">\n\n <ng-container *ngIf=\"top.isOpened; then topOpened else topClosed\"></ng-container>\n\n <ng-template #topOpened>\n <div class=\"buttonTopOpened\" [ngStyle]=\"{ 'background' : top.seperatorBackground, 'border-color' : top.seperatorBorderColor }\" (mousedown)=\"buttonBottomMouseDown($event)\">\n <div [ngStyle]=\"{'position': 'absolute', 'background': top.seperatorBackground, 'left': '-2px', 'top' : '0.5px', 'width': '2px', 'height': (top.seperatorThickness-1)+'px'}\"></div>\n <div [ngStyle]=\"{'position': 'absolute', 'background': top.seperatorBackground, 'left': '49px', 'top' : '0.5px', 'width': '2px', 'height': (top.seperatorThickness-1)+'px'}\"></div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 14\" enable-background=\"new 0 0 50 14\">\n <polygon class=\"button-content\" points=\"22,2 30,2 26,6 22,2\"/> \n </svg>\n </div>\n </ng-template>\n\n <ng-template #topClosed>\n <div class=\"buttonTopClosed\" [ngStyle]=\"{ 'background' : bottom.seperatorBackground, 'border-color' : top.seperatorBorderColor }\" (mousedown)=\"buttonBottomMouseDown($event)\">\n <div [ngStyle]=\"{'position': 'absolute', 'background': bottom.seperatorBackground, 'left': '-1.5px', 'top' : '5.5px', 'width': '2px', 'height': (top.seperatorThickness-1)+'px'}\"></div>\n <div [ngStyle]=\"{'position': 'absolute', 'background': bottom.seperatorBackground, 'left': '49.5px', 'top' : '5.5px', 'width': '2px', 'height': (top.seperatorThickness-1)+'px'}\"></div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"8\" viewBox=\"0 0 50 8\" [ngStyle]=\"{'position': 'absolute', 'top' : 0}\">\n <polygon class=\"button-content\" points=\"22,6 30,6 26,2 22,6\"/> \n </svg>\n </div>\n </ng-template> \n\n </div> \n </div> \n </div>\n\n <div class=\"main\">\n <div *ngIf=\"isLeftPanelVisible\" class=\"leftPanel\" [ngStyle]=\"{ 'width': left.width + 'px', 'border-width': leftBorder }\">\n <div *ngIf=\"left.isOpened\" class=\"leftPanelContent\">\n <ng-content select=\"[panel=left]\"></ng-content>\n </div>\n\n <div class=\"seperatorLeft\" (mousedown)=\"onSeparatorLeftMouseDown($event)\" [ngStyle]=\"{ 'width' \t\t : left.seperatorThickness + 'px', \n 'border-width' : '0 ' + left.seperatorBorderThickness + 'px', \n 'border-color' : left.seperatorBorderColor,\n 'background' : left.seperatorBackground }\"> \n <div *ngIf=\"left.isButtonVisible && ! left.isSeperatorLocked\">\n\n <ng-container *ngIf=\"left.isOpened; then leftOpened else leftClosed\"></ng-container>\n\n <ng-template #leftOpened>\n <div class=\"buttonLeftOpened\" [ngStyle]=\"{ 'background' : left.seperatorBackground, \n 'border-color' : left.seperatorBorderColor\n }\" (mousedown)=\"buttonLeftMouseDown($event)\">\n <div class=\"button-patch\" [ngStyle]=\"{'position': 'absolute', 'background': left.seperatorBackground, 'left': (left.seperatorThickness+3)+'px', 'top' : '-2px', 'width': (left.seperatorThickness-1)+'px', 'height': '3px'}\"></div>\n <div class=\"button-patch\" [ngStyle]=\"{'position': 'absolute', 'background': left.seperatorBackground, 'left': (left.seperatorThickness+3)+'px', 'bottom' : '-2px', 'width': (left.seperatorThickness-1)+'px', 'height': '3px'}\"></div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 8 50\" enable-background=\"new 0 0 8 50\">\n <polygon class=\"button-content\" points=\"6,21 6,29 2,25 6,21\"/> \n </svg>\n </div>\n </ng-template>\n\n <ng-template #leftClosed>\n <div class=\"buttonLeftClosed\" [ngStyle]=\"{ 'background' : left.seperatorBackground, 'border-color' : left.seperatorBorderColor }\" (mousedown)=\"buttonLeftMouseDown($event)\">\n <div class=\"button-patch\" [ngStyle]=\"{'position': 'absolute', 'background': left.seperatorBackground, 'left': '0px', 'top' : '-1px', 'width': (left.seperatorThickness+0)+'px', 'height': '3px'}\"></div>\n <div class=\"button-patch\" [ngStyle]=\"{'position': 'absolute', 'background': left.seperatorBackground, 'left': '0px', 'bottom' : '-1px', 'width': (left.seperatorThickness+0)+'px', 'height': '3px'}\"></div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 8 40\" enable-background=\"new 0 0 8 40\">\n <polygon class=\"button-content\" points=\"2,21 2,29 6,25 2,21\"/> \n </svg>\n </div>\n </ng-template>\n\n </div>\n </div> \n\n </div>\n <div class=\"content\">\n <div class=\"centerPanel\" [ngStyle]=\"{ 'border-width': centerBorder }\">\n <div class=\"centerPanelContent\" [ngStyle]=\"{ 'height': 'calc(100% - 11.5px)'}\">\n\t\t\t\t\t<ng-content select=\"[panel=center]\"></ng-content>\n </div>\n </div>\n\n <div *ngIf=\"isBottomPanelVisible\" class=\"bottomPanel\" [ngStyle]=\"{ 'height': bottom.height + 'px', 'border-width': bottomBorder }\">\n <div class=\"seperatorBottom\" (mousedown)=\"onSeparatorBottomMouseDown($event)\" [ngStyle]=\"{ 'height' : bottom.seperatorThickness + 'px', \n 'border-width' : bottom.seperatorBorderThickness + 'px 0', \n 'border-color' : bottom.seperatorBorderColor,\n 'background' : bottom.seperatorBackground }\"> \n <div *ngIf=\"bottom.isButtonVisible && ! bottom.isSeperatorLocked\">\n\n <ng-container *ngIf=\"bottom.isOpened; then bottomOpened else bottomClosed\"></ng-container>\n\n <ng-template #bottomOpened>\n <div class=\"buttonBottomOpened\" [ngStyle]=\"{ 'background' : bottom.seperatorBackground, 'border-color' : bottom.seperatorBorderColor }\" (mousedown)=\"buttonBottomMouseDown($event)\">\n <div class=\"button-patch\" [ngStyle]=\"{'position': 'absolute', 'background': bottom.seperatorBackground, 'left': '-2px', 'top' : '0.5px', 'width': '2px', 'height': (bottom.seperatorThickness-1)+'px'}\"></div>\n <div class=\"button-patch\" [ngStyle]=\"{'position': 'absolute', 'background': bottom.seperatorBackground, 'left': '49px', 'top' : '0.5px', 'width': '2px', 'height': (bottom.seperatorThickness-1)+'px'}\"></div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 14\" enable-background=\"new 0 0 50 14\">\n <polygon class=\"button-content\" points=\"22,2 30,2 26,6 22,2\"/> \n </svg>\n </div>\n </ng-template>\n\n <ng-template #bottomClosed>\n <div class=\"buttonBottomClosed\" [ngStyle]=\"{ 'background' : bottom.seperatorBackground, 'border-color' : bottom.seperatorBorderColor }\" (mousedown)=\"buttonBottomMouseDown($event)\">\n <div class=\"button-patch\" [ngStyle]=\"{'position': 'absolute', 'background': bottom.seperatorBackground, 'left': '-1.5px', 'top' : '5.5px', 'width': '2px', 'height': (bottom.seperatorThickness-1)+'px'}\"></div>\n <div class=\"button-patch\" [ngStyle]=\"{'position': 'absolute', 'background': bottom.seperatorBackground, 'left': '49.5px', 'top' : '5.5px', 'width': '2px', 'height': (bottom.seperatorThickness-1)+'px'}\"></div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"8\" viewBox=\"0 0 50 8\" [ngStyle]=\"{'position': 'absolute', 'top' : 0}\">\n <polygon class=\"button-content\" points=\"22,6 30,6 26,2 22,6\"/> \n </svg>\n </div>\n </ng-template> \n\n </div> \n </div> \n\n <div *ngIf=\"bottom.isOpened\" class=\"bottomPanelContent\">\n <ng-content select=\"[panel=bottom]\"></ng-content>\n </div> \n </div>\n </div>\n\n <div *ngIf=\"isRightPanelVisible\" class=\"rightPanel\" [ngStyle]=\"{ 'width': right.width + 'px', 'border-width': rightBorder }\">\n\n <div class=\"seperatorRight\" (mousedown)=\"onSeparatorRightMouseDown($event)\" [ngStyle]=\"{ 'width' \t : right.seperatorThickness + 'px', \n 'border-width' : '0 ' + right.seperatorBorderThickness + 'px', \n 'border-color' : right.seperatorBorderColor,\n 'background' : right.seperatorBackground }\"> \n <div *ngIf=\"right.isButtonVisible && ! right.isSeperatorLocked\">\n\n <ng-container *ngIf=\"right.isOpened; then rightOpened else rightClosed\"></ng-container>\n\n <ng-template #rightOpened>\n <div class=\"buttonRightOpened\" [ngStyle]=\"{ 'background' : right.seperatorBackground, 'border-color' : right.seperatorBorderColor }\" (mousedown)=\"buttonRightMouseDown($event)\">\n <div class=\"button-patch\" [ngStyle]=\"{'position': 'absolute', 'background': right.seperatorBackground, 'left': '0', 'top' : '-2px', 'width': (right.seperatorThickness-0.5)+'px', 'height': '3px'}\"></div>\n <div class=\"button-patch\" [ngStyle]=\"{'position': 'absolute', 'background': right.seperatorBackground, 'left': '0', 'bottom' : '-2px', 'width': (right.seperatorThickness-0.5)+'px', 'height': '3px'}\"></div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 8 50\" enable-background=\"new 0 0 8 50\">\n <polygon class=\"button-content\" points=\"2,21 2,29 6,25 2,21\"/> \n </svg>\n </div>\n </ng-template>\n\n <ng-template #rightClosed>\n <div class=\"buttonRightClosed\" [ngStyle]=\"{ 'background' : right.seperatorBackground, 'border-color' : right.seperatorBorderColor }\" (mousedown)=\"buttonRightMouseDown($event)\">\n <div class=\"button-patch\" [ngStyle]=\"{'position': 'absolute', 'background': right.seperatorBackground, 'left': '6.5px', 'top' : '-2px', 'width': (right.seperatorThickness-1)+'px', 'height': '3px'}\"></div>\n <div class=\"button-patch\" [ngStyle]=\"{'position': 'absolute', 'background': right.seperatorBackground, 'left': '6.5px', 'bottom' : '-1px', 'width': (right.seperatorThickness-1)+'px', 'height': '3px'}\"></div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 8 40\" enable-background=\"new 0 0 8 40\">\n <polygon class=\"button-content\" points=\"7,21 7,29 2,25 7,21\"/> \n </svg>\n </div>\n </ng-template>\n\n </div>\n </div> \n\n <div *ngIf=\"right.isOpened\" class=\"rightPanelContent\">\n <ng-content select=\"[panel=right]\"></ng-content>\n </div>\n\n </div>\n </div>\n\n <!-- <div class=\"footer\">\n <div class=\"details\">details</div>\n <div class=\"copyright\">© 2023</div>\n </div> -->\n</div>\n\n<div class=\"splitter-horizontal\"></div>\n<div class=\"splitter-vertical\"></div> \n", styles: [".splitter{width:100vw;height:100dvh;padding:0;margin:0;display:flex;flex-direction:column}.splitter .topPanel{display:flex;flex-grow:0;flex-direction:column}.splitter .topPanel .topPanelContent{height:inherit}.splitter .main{background:lightgray;display:flex;flex-grow:1;flex-direction:row}.splitter .main .leftPanel{display:flex;flex-grow:0;flex-direction:row}.splitter .main .leftPanel .seperatorLeft{cursor:col-resize;border-style:solid}.splitter .main .leftPanel .seperatorLeft .buttonLeftOpened{width:8px;height:50px;position:absolute;top:50%;transform:translate(-6.5px,-25px);border-radius:7px 0 0 7px;border-width:1px 0 1px 1px;border-style:solid;stroke:#888;fill:#888;cursor:pointer}.splitter .main .leftPanel .seperatorLeft .buttonLeftOpened:hover{stroke:#444;fill:#444}.splitter .main .leftPanel .seperatorLeft .buttonLeftClosed{width:8px;height:50px;position:absolute;top:50%;transform:translateY(-25px);border-radius:0 6px 6px 0;border-width:1px 1px 1px 0;border-style:solid;stroke:#888;fill:#888;cursor:pointer}.splitter .main .leftPanel .seperatorLeft .buttonLeftClosed:hover{stroke:#444;fill:#444}.splitter .main .leftPanel .leftPanelContent{width:inherit;border:1px solid #777;border-radius:5px;padding:5px;margin:1px}.splitter .main .rightPanel{display:flex;flex-grow:0;flex-direction:row}.splitter .main .rightPanel .seperatorRight{cursor:col-resize;border-style:solid}.splitter .main .rightPanel .seperatorRight .buttonRightOpened{width:8px;height:50px;position:absolute;top:50%;transform:translateY(-25px);border-radius:0 7px 7px 0;border-width:1px 1px 1px 0;border-style:solid;stroke:#888;fill:#888;cursor:pointer}.splitter .main .rightPanel .seperatorRight .buttonRightOpened:hover{stroke:#444;fill:#444}.splitter .main .rightPanel .seperatorRight .buttonRightClosed{width:8px;height:50px;position:absolute;top:50%;transform:translate(-7px,-25px);border-radius:6px 0 0 6px;border-width:1px 0 1px 1px;border-style:solid;stroke:#888;fill:#888;cursor:pointer}.splitter .main .rightPanel .seperatorRight .buttonRightClosed:hover{stroke:#444;fill:#444}.splitter .main .rightPanel .rightPanelContent{width:inherit;border:1px solid #777;border-radius:5px;padding:5px;margin:1px}.splitter .main .content{display:flex;flex-direction:column;flex-grow:1}.splitter .main .content .centerPanel{flex-grow:1;padding:1px;border:0 solid black}.splitter .main .content .centerPanel .centerPanelContent{border:1px solid #777;border-radius:5px;padding:5px}.splitter .main .content .bottomPanel{border:0 solid black;display:flex;flex-grow:0;flex-direction:column}.splitter .main .content .bottomPanel .seperatorBottom{border-style:solid;cursor:row-resize}.splitter .main .content .bottomPanel .seperatorBottom .buttonBottomOpened{width:50px;height:8px;position:absolute;left:50%;border-radius:0 0 7px 7px;border-width:0 1px 1px 1px;border-style:solid;stroke:#888;fill:#888;cursor:pointer}.splitter .main .content .bottomPanel .seperatorBottom .buttonBottomOpened:hover{stroke:#444;fill:#444}.splitter .main .content .bottomPanel .seperatorBottom .buttonBottomClosed{width:50px;height:8px;position:absolute;left:50%;transform:translateY(-6.5px);border-radius:6px 6px 0 0;border-width:1px 1px 0 1px;border-style:solid;stroke:#888;fill:#888;cursor:pointer}.splitter .main .content .bottomPanel .seperatorBottom .buttonBottomClosed:hover{stroke:#444;fill:#444}.splitter .main .content .bottomPanel .bottomPanelContent{height:inherit;border:1px solid #777;border-radius:5px;margin:1px}.splitter-horizontal{position:absolute;left:0;top:0;height:3px;background:transparent;cursor:row-resize;z-index:999;pointer-events:none}.splitter-vertical{position:absolute;left:0;top:0;width:3px;background:transparent;cursor:col-resize;z-index:999;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: GDSplitterComponent, decorators: [{
type: Component,
args: [{ selector: 'gd-splitter', encapsulation: ViewEncapsulation.Emulated, template: "<div class=\"splitter\" (mousemove)=\"onSplitterMouseMove($event)\" (mouseup)=\"onSplitterMouseUp($event)\">\n <div *ngIf=\"isTopPanelVisible\" class=\"topPanel\" [ngStyle]=\"{ 'height': top.height + 'px', 'border-width': topBorder }\">\n <div *ngIf=\"top.isOpened\" class=\"topPanelContent\">\n <ng-content select=\"[panel=top]\"></ng-content>\n </div>\n <div class=\"seperatorTop\" (mousedown)=\"onSeparatorTopMouseDown($event)\" [ngStyle]=\"{ 'height' \t : top.seperatorThickness + 'px', \n 'border-width' : top.seperatorBorderThickness + 'px 0', \n 'border-color' : top.seperatorBorderColor,\n 'background' : top.seperatorBackground }\"> \n <div *ngIf=\"top.isButtonVisible && ! top.isSeperatorLocked\">\n\n <ng-container *ngIf=\"top.isOpened; then topOpened else topClosed\"></ng-container>\n\n <ng-template #topOpened>\n <div class=\"buttonTopOpened\" [ngStyle]=\"{ 'background' : top.seperatorBackground, 'border-color' : top.seperatorBorderColor }\" (mousedown)=\"buttonBottomMouseDown($event)\">\n <div [ngStyle]=\"{'position': 'absolute', 'background': top.seperatorBackground, 'left': '-2px', 'top' : '0.5px', 'width': '2px', 'height': (top.seperatorThickness-1)+'px'}\"></div>\n <div [ngStyle]=\"{'position': 'absolute', 'background': top.seperatorBackground, 'left': '49px', 'top' : '0.5px', 'width': '2px', 'height': (top.seperatorThickness-1)+'px'}\"></div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 14\" enable-background=\"new 0 0 50 14\">\n <polygon class=\"button-content\" points=\"22,2 30,2 26,6 22,2\"/> \n </svg>\n </div>\n </ng-template>\n\n <ng-template #topClosed>\n <div class=\"buttonTopClosed\" [ngStyle]=\"{ 'background' : bottom.seperatorBackground, 'border-color' : top.seperatorBorderColor }\" (mousedown)=\"buttonBottomMouseDown($event)\">\n <div [ngStyle]=\"{'position': 'absolute', 'background': bottom.seperatorBackground, 'left': '-1.5px', 'top' : '5.5px', 'width': '2px', 'height': (top.seperatorThickness-1)+'px'}\"></div>\n <div [ngStyle]=\"{'position': 'absolute', 'background': bottom.seperatorBackground, 'left': '49.5px', 'top' : '5.5px', 'width': '2px', 'height': (top.seperatorThickness-1)+'px'}\"></div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"8\" viewBox=\"0 0 50 8\" [ngStyle]=\"{'position': 'absolute', 'top' : 0}\">\n <polygon class=\"button-content\" points=\"22,6 30,6 26,2 22,6\"/> \n </svg>\n </div>\n </ng-template> \n\n </div> \n </div> \n </div>\n\n <div class=\"main\">\n <div *ngIf=\"isLeftPanelVisible\" class=\"leftPanel\" [ngStyle]=\"{ 'width': left.width + 'px', 'border-width': leftBorder }\">\n <div *ngIf=\"left.isOpened\" class=\"leftPanelContent\">\n <ng-content select=\"[panel=left]\"></ng-content>\n </div>\n\n <div class=\"seperatorLeft\" (mousedown)=\"onSeparatorLeftMouseDown($event)\" [ngStyle]=\"{ 'width' \t\t : left.seperatorThickness + 'px', \n 'border-width' : '0 ' + left.seperatorBorderThickness + 'px', \n 'border-color' : left.seperatorBorderColor,\n 'background' : left.seperatorBackground }\"> \n <div *ngIf=\"left.isButtonVisible && ! left.isSeperatorLocked\">\n\n <ng-container *ngIf=\"left.isOpened; then leftOpened else leftClosed\"></ng-container>\n\n <ng-template #leftOpened>\n <div class=\"buttonLeftOpened\" [ngStyle]=\"{ 'background' : left.seperatorBackground, \n 'border-color' : left.seperatorBorderColor\n }\" (mousedown)=\"buttonLeftMouseDown($event)\">\n <div class=\"button-patch\" [ngStyle]=\"{'position': 'absolute', 'background': left.seperatorBackground, 'left': (left.seperatorThickness+3)+'px', 'top' : '-2px', 'width': (left.seperatorThickness-1)+'px', 'height': '3px'}\"></div>\n <div class=\"button-patch\" [ngStyle]=\"{'position': 'absolute', 'background': left.seperatorBackground, 'left': (left.seperatorThickness+3)+'px', 'bottom' : '-2px', 'width': (left.seperatorThickness-1)+'px', 'height': '3px'}\"></div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 8 50\" enable-background=\"new 0 0 8 50\">\n <polygon class=\"button-content\" points=\"6,21 6,29 2,25 6,21\"/> \n </svg>\n </div>\n </ng-template>\n\n <ng-template #leftClosed>\n <div class=\"buttonLeftClosed\" [ngStyle]=\"{ 'background' : left.seperatorBackground, 'border-color' : left.seperatorBorderColor }\" (mousedown)=\"buttonLeftMouseDown($event)\">\n <div class=\"button-patch\" [ngStyle]=\"{'position': 'absolute', 'background': left.seperatorBackground, 'left': '0px', 'top' : '-1px', 'width': (left.seperatorThickness+0)+'px', 'height': '3px'}\"></div>\n <div class=\"button-patch\" [ngStyle]=\"{'position': 'absolute', 'background': left.seperatorBackground, 'left': '0px', 'bottom' : '-1px', 'width': (left.seperatorThickness+0)+'px', 'height': '3px'}\"></div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 8 40\" enable-background=\"new 0 0 8 40\">\n <polygon class=\"button-content\" points=\"2,21 2,29 6,25 2,21\"/> \n </svg>\n </div>\n </ng-template>\n\n </div>\n </div> \n\n </div>\n <div class=\"content\">\n <div class=\"centerPanel\" [ngStyle]=\"{ 'border-width': centerBorder }\">\n <div class=\"centerPanelContent\" [ngStyle]=\"{ 'height': 'calc(100% - 11.5px)'}\">\n\t\t\t\t\t<ng-content select=\"[panel=center]\"></ng-content>\n </div>\n </div>\n\n <div *ngIf=\"isBottomPanelVisible\" class=\"bottomPanel\" [ngStyle]=\"{ 'height': bottom.height + 'px', 'border-width': bottomBorder }\">\n <div class=\"seperatorBottom\" (mousedown)=\"onSeparatorBottomMouseDown($event)\" [ngStyle]=\"{ 'height' : bottom.seperatorThickness + 'px', \n 'border-width' : bottom.seperatorBorderThickness + 'px 0', \n 'border-color' : bottom.seperatorBorderColor,\n 'background' : bottom.seperatorBackground }\"> \n <div *ngIf=\"bottom.isButtonVisible && ! bottom.isSeperatorLocked\">\n\n <ng-container *ngIf=\"bottom.isOpened; then bottomOpened else bottomClosed\"></ng-container>\n\n <ng-template #bottomOpened>\n <div class=\"buttonBottomOpened\" [ngStyle]=\"{ 'background' : bottom.seperatorBackground, 'border-color' : bottom.seperatorBorderColor }\" (mousedown)=\"buttonBottomMouseDown($event)\">\n <div class=\"button-patch\" [ngStyle]=\"{'position': 'absolute', 'background': bottom.seperatorBackground, 'left': '-2px', 'top' : '0.5px', 'width': '2px', 'height': (bottom.seperatorThickness-1)+'px'}\"></div>\n <div class=\"button-patch\" [ngStyle]=\"{'position': 'absolute', 'background': bottom.seperatorBackground, 'left': '49px', 'top' : '0.5px', 'width': '2px', 'height': (bottom.seperatorThickness-1)+'px'}\"></div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 14\" enable-background=\"new 0 0 50 14\">\n <polygon class=\"button-content\" points=\"22,2 30,2 26,6 22,2\"/> \n </svg>\n </div>\n </ng-template>\n\n <ng-template #bottomClosed>\n <div class=\"buttonBottomClosed\" [ngStyle]=\"{ 'background' : bottom.seperatorBackground, 'border-color' : bottom.seperatorBorderColor }\" (mousedown)=\"buttonBottomMouseDown($event)\">\n <div class=\"button-patch\" [ngStyle]=\"{'position': 'absolute', 'background': bottom.seperatorBackground, 'left': '-1.5px', 'top' : '5.5px', 'width': '2px', 'height': (bottom.seperatorThickness-1)+'px'}\"></div>\n <div class=\"button-patch\" [ngStyle]=\"{'position': 'absolute', 'background': bottom.seperatorBackground, 'left': '49.5px', 'top' : '5.5px', 'width': '2px', 'height': (bottom.seperatorThickness-1)+'px'}\"></div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"8\" viewBox=\"0 0 50 8\" [ngStyle]=\"{'position': 'absolute', 'top' : 0}\">\n <polygon class=\"button-content\" points=\"22,6 30,6 26,2 22,6\"/> \n </svg>\n </div>\n </ng-template> \n\n </div> \n </div> \n\n <div *ngIf=\"bottom.isOpened\" class=\"bottomPanelContent\">\n <ng-content select=\"[panel=bottom]\"></ng-content>\n </div> \n </div>\n </div>\n\n <div *ngIf=\"isRightPanelVisible\" class=\"rightPanel\" [ngStyle]=\"{ 'width': right.width + 'px', 'border-width': rightBorder }\">\n\n <div class=\"seperatorRight\" (mousedown)=\"onSeparatorRightMouseDown($event)\" [ngStyle]=\"{ 'width' \t : right.seperatorThickness + 'px', \n 'border-width' : '0 ' + right.seperatorBorderThickness + 'px', \n 'border-color' : right.seperatorBorderColor,\n 'background' : right.seperatorBackground }\"> \n <div *ngIf=\"right.isButtonVisible && ! right.isSeperatorLocked\">\n\n <ng-container *ngIf=\"right.isOpened; then rightOpened else rightClosed\"></ng-container>\n\n <ng-template #rightOpened>\n <div class=\"buttonRightOpened\" [ngStyle]=\"{ 'background' : right.seperatorBackground, 'border-color' : right.seperatorBorderColor }\" (mousedown)=\"buttonRightMouseDown($event)\">\n <div class=\"button-patch\" [ngStyle]=\"{'position': 'absolute', 'background': right.seperatorBackground, 'left': '0', 'top' : '-2px', 'width': (right.seperatorThickness-0.5)+'px', 'height': '3px'}\"></div>\n <div class=\"button-patch\" [ngStyle]=\"{'position': 'absolute', 'background': right.seperatorBackground, 'left': '0', 'bottom' : '-2px', 'width': (right.seperatorThickness-0.5)+'px', 'height': '3px'}\"></div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 8 50\" enable-background=\"new 0 0 8 50\">\n <polygon class=\"button-content\" points=\"2,21 2,29 6,25 2,21\"/> \n </svg>\n </div>\n </ng-template>\n\n <ng-template #rightClosed>\n <div class=\"buttonRightClosed\" [ngStyle]=\"{ 'background' : right.seperatorBackground, 'border-color' : right.seperatorBorderColor }\" (mousedown)=\"buttonRightMouseDown($event)\">\n <div class=\"button-patch\" [ngStyle]=\"{'position': 'absolute', 'background': right.seperatorBackground, 'left': '6.5px', 'top' : '-2px', 'width': (right.seperatorThickness-1)+'px', 'height': '3px'}\"></div>\n <div class=\"button-patch\" [ngStyle]=\"{'position': 'absolute', 'background': right.seperatorBackground, 'left': '6.5px', 'bottom' : '-1px', 'width': (right.seperatorThickness-1)+'px', 'height': '3px'}\"></div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 8 40\" enable-background=\"new 0 0 8 40\">\n <polygon class=\"button-content\" points=\"7,21 7,29 2,25 7,21\"/> \n </svg>\n </div>\n </ng-template>\n\n </div>\n </div> \n\n <div *ngIf=\"right.isOpened\" class=\"rightPanelContent\">\n <ng-content select=\"[panel=right]\"></ng-content>\n </div>\n\n </div>\n </div>\n\n <!-- <div class=\"footer\">\n <div class=\"details\">details</div>\n <div class=\"copyright\">© 2023</div>\n </div> -->\n</div>\n\n<div class=\"splitter-horizontal\"></div>\n<div class=\"splitter-vertical\"></div> \n", styles: [".splitter{width:100vw;height:100dvh;padding:0;margin:0;display:flex;flex-direction:column}.splitter .topPanel{display:flex;flex-grow:0;flex-direction:column}.splitter .topPanel .topPanelContent{height:inherit}.splitter .main{background:lightgray;display:flex;flex-grow:1;flex-direction:row}.splitter .main .leftPanel{display:flex;flex-grow:0;flex-direction:row}.splitter .main .leftPanel .seperatorLeft{cursor:col-resize;border-style:solid}.splitter .main .leftPanel .seperatorLeft .buttonLeftOpened{width:8px;height:50px;position:absolute;top:50%;transform:translate(-6.5px,-25px);border-radius:7px 0 0 7px;border-width:1px 0 1px 1px;border-style:solid;stroke:#888;fill:#888;cursor:pointer}.splitter .main .leftPanel .seperatorLeft .buttonLeftOpened:hover{stroke:#444;fill:#444}.splitter .main .leftPanel .seperatorLeft .buttonLeftClosed{width:8px;height:50px;position:absolute;top:50%;transform:translateY(-25px);border-radius:0 6px 6px 0;border-width:1px 1px 1px 0;border-style:solid;stroke:#888;fill:#888;cursor:pointer}.splitter .main .leftPanel .seperatorLeft .buttonLeftClosed:hover{stroke:#444;fill:#444}.splitter .main .leftPanel .leftPanelContent{width:inherit;border:1px solid #777;border-radius:5px;padding:5px;margin:1px}.splitter .main .rightPanel{display:flex;flex-grow:0;flex-direction:row}.splitter .main .rightPanel .seperatorRight{cursor:col-resize;border-style:solid}.splitter .main .rightPanel .seperatorRight .buttonRightOpened{width:8px;height:50px;position:absolute;top:50%;transform:translateY(-25px);border-radius:0 7px 7px 0;border-width:1px 1px 1px 0;border-style:solid;stroke:#888;fill:#888;cursor:pointer}.splitter .main .rightPanel .seperatorRight .buttonRightOpened:hover{stroke:#444;fill:#444}.splitter .main .rightPanel .seperatorRight .buttonRightClosed{width:8px;height:50px;position:absolute;top:50%;transform:translate(-7px,-25px);border-radius:6px 0 0 6px;border-width:1px 0 1px 1px;border-style:solid;stroke:#888;fill:#888;cursor:pointer}.splitter .main .rightPanel .seperatorRight .buttonRightClosed:hover{stroke:#444;fill:#444}.splitter .main .rightPanel .rightPanelContent{width:inherit;border:1px solid #777;border-radius:5px;padding:5px;margin:1px}.splitter .main .content{display:flex;flex-direction:col