ninja-splitter
Version:
Convenient and easy to use splitter component for Angular 9+
49 lines • 4.97 kB
JavaScript
import { Component, HostListener, EventEmitter, Input, Output, HostBinding } from '@angular/core';
export class NinjaSeparatorComponent {
constructor() {
this.horizontal = true;
this.notifyWillChangeSize = new EventEmitter();
}
get vertical() {
return !this.horizontal;
}
get width() {
if (this.horizontal) {
return `inherit`;
}
else {
return `${this.thickness}px`;
}
}
get height() {
if (this.vertical) {
return `inherit`;
}
else {
return `${this.thickness}px`;
}
}
onMousedown() {
this.notifyWillChangeSize.emit(true);
}
}
NinjaSeparatorComponent.decorators = [
{ type: Component, args: [{
selector: 'ninja-separator',
template: `
<div class="handle"></div>
`,
styles: [":host{background-color:var(--ninja-separator-background-color, #fff);position:relative}:host.vertical{border-left:1px solid #ddd;cursor:var(--ninja-separator-vcursor, ew-resize)}:host.horizontal{border-top:1px solid #ddd;cursor:var(--ninja-separator-hcursor, ns-resize)}:host:hover{background-color:var(--ninja-separator-hover-background-color, #fafafa)}.handle{background-color:#eee}.handle.horizontal{margin:auto;width:35px;height:100%}.handle.vertical{position:absolute;top:calc(50% - 17px);width:100%;height:35px}\n"]
},] }
];
NinjaSeparatorComponent.ctorParameters = () => [];
NinjaSeparatorComponent.propDecorators = {
thickness: [{ type: Input }],
horizontal: [{ type: Input }, { type: HostBinding, args: ['class.horizontal',] }],
notifyWillChangeSize: [{ type: Output }],
vertical: [{ type: HostBinding, args: ['class.vertical',] }],
width: [{ type: HostBinding, args: ['style.width',] }],
height: [{ type: HostBinding, args: ['style.height',] }],
onMousedown: [{ type: HostListener, args: ['mousedown',] }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmluamEtc2VwYXJhdG9yLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25pbmphLXNwbGl0L3NyYy9saWIvbmluamEtc2VwYXJhdG9yLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxXQUFXLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFTbEcsTUFBTSxPQUFPLHVCQUF1QjtJQTBCbEM7UUF4QjBDLGVBQVUsR0FBRyxJQUFJLENBQUM7UUFFNUQseUJBQW9CLEdBQTBCLElBQUksWUFBWSxFQUFXLENBQUM7SUFzQjNELENBQUM7SUFyQmhCLElBQ1csUUFBUTtRQUNqQixPQUFPLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQztJQUMxQixDQUFDO0lBQ0QsSUFDVyxLQUFLO1FBQ2QsSUFBSSxJQUFJLENBQUMsVUFBVSxFQUFFO1lBQ25CLE9BQU8sU0FBUyxDQUFDO1NBQ2xCO2FBQU07WUFDTCxPQUFPLEdBQUcsSUFBSSxDQUFDLFNBQVMsSUFBSSxDQUFDO1NBQzlCO0lBQ0gsQ0FBQztJQUNELElBQ1csTUFBTTtRQUNmLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNqQixPQUFPLFNBQVMsQ0FBQztTQUNsQjthQUFNO1lBQ0wsT0FBTyxHQUFHLElBQUksQ0FBQyxTQUFTLElBQUksQ0FBQztTQUM5QjtJQUNILENBQUM7SUFLRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLG9CQUFvQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN2QyxDQUFDOzs7WUF0Q0YsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxpQkFBaUI7Z0JBRTNCLFFBQVEsRUFBRTs7R0FFVDs7YUFDRjs7Ozt3QkFFRSxLQUFLO3lCQUNMLEtBQUssWUFBSSxXQUFXLFNBQUMsa0JBQWtCO21DQUN2QyxNQUFNO3VCQUVOLFdBQVcsU0FBQyxnQkFBZ0I7b0JBSTVCLFdBQVcsU0FBQyxhQUFhO3FCQVF6QixXQUFXLFNBQUMsY0FBYzswQkFXMUIsWUFBWSxTQUFDLFdBQVciLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEhvc3RMaXN0ZW5lciwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0LCBIb3N0QmluZGluZyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICduaW5qYS1zZXBhcmF0b3InLFxyXG4gIHN0eWxlVXJsczogWyduaW5qYS1zZXBhcmF0b3IuY29tcG9uZW50LnNjc3MnXSxcclxuICB0ZW1wbGF0ZTogYFxyXG4gICAgPGRpdiBjbGFzcz1cImhhbmRsZVwiPjwvZGl2PlxyXG4gIGBcclxufSlcclxuZXhwb3J0IGNsYXNzIE5pbmphU2VwYXJhdG9yQ29tcG9uZW50IHtcclxuICBASW5wdXQoKSB0aGlja25lc3M6IG51bWJlcjtcclxuICBASW5wdXQoKSBASG9zdEJpbmRpbmcoJ2NsYXNzLmhvcml6b250YWwnKSBob3Jpem9udGFsID0gdHJ1ZTtcclxuICBAT3V0cHV0KClcclxuICBub3RpZnlXaWxsQ2hhbmdlU2l6ZTogRXZlbnRFbWl0dGVyPGJvb2xlYW4+ID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xyXG4gIEBIb3N0QmluZGluZygnY2xhc3MudmVydGljYWwnKVxyXG4gIHB1YmxpYyBnZXQgdmVydGljYWwoKTogYm9vbGVhbiB7XHJcbiAgICByZXR1cm4gIXRoaXMuaG9yaXpvbnRhbDtcclxuICB9XHJcbiAgQEhvc3RCaW5kaW5nKCdzdHlsZS53aWR0aCcpXHJcbiAgcHVibGljIGdldCB3aWR0aCgpOiBzdHJpbmcge1xyXG4gICAgaWYgKHRoaXMuaG9yaXpvbnRhbCkge1xyXG4gICAgICByZXR1cm4gYGluaGVyaXRgO1xyXG4gICAgfSBlbHNlIHtcclxuICAgICAgcmV0dXJuIGAke3RoaXMudGhpY2tuZXNzfXB4YDtcclxuICAgIH1cclxuICB9XHJcbiAgQEhvc3RCaW5kaW5nKCdzdHlsZS5oZWlnaHQnKVxyXG4gIHB1YmxpYyBnZXQgaGVpZ2h0KCk6IHN0cmluZyB7XHJcbiAgICBpZiAodGhpcy52ZXJ0aWNhbCkge1xyXG4gICAgICByZXR1cm4gYGluaGVyaXRgO1xyXG4gICAgfSBlbHNlIHtcclxuICAgICAgcmV0dXJuIGAke3RoaXMudGhpY2tuZXNzfXB4YDtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkge31cclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignbW91c2Vkb3duJylcclxuICBvbk1vdXNlZG93bigpOiB2b2lkIHtcclxuICAgIHRoaXMubm90aWZ5V2lsbENoYW5nZVNpemUuZW1pdCh0cnVlKTtcclxuICB9XHJcbn1cclxuIl19